🗄️ Data Management & CRUD Operations

In Instant Ship™, data is handled through a tiered strategy based on the Volatility of the information.

---

1. Static/Authoritative Data (Docs & Blog)

This data is managed via the ID-First Protocol and sourced from TypeScript modules.

• Create: Add a new object to the appropriate array in a src/mocks/content/registry-*.ts file.
• Read (List):
  1. Hook useDocsDB().getList() returns items with id and slug.
• Read (Detail):
  1. Primary (Fast): Page checks location.state.prid and calls getDetailById(id).
  2. Fallback (Slow): If state is empty (refresh), Page calls getDetailBySlug(slug).
• Update: Modify the object in the source TypeScript module; the change is picked up by Vite's HMR in dev or included in the next build.
• Delete: Remove the object from the array in the source TypeScript module.

2. Local User State (Settings & Logs)

We use Dexie (IndexedDB) for zero-latency, offline-capable local storage.

• Storage Hub: lib/db.ts
• CRUD Pattern:
  • db.states.put({ key: 'theme', value: 'dark' })
  • This ensures settings persist even if the user clears browser cookies or the sandbox environment resets.

3. Dynamic SaaS Data (User Content)

For real-world SaaS applications, we bridge to Supabase through the Lovable Logic Injection.

• Pattern: Components call Lovable-generated hooks (useProfile, useSubscription).
• Logic Sovereignty: The frontend remains the "Clean Body," while Supabase handles the "Heavy Logic."

4. Discovery Algorithm (The "Rescue" Logic)

When standard routing fails, we use a Greedy Dictionary Match:

typescript
// Conceptual Logic
const allDocs = registry.getAll(); // Assuming a function that gets all items
const bestMatch = allDocs
  .sort((a, b) => b.slug.length - a.slug.length) // Length descending
  .find(doc => window.location.href.includes(doc.slug));