Store — Usecase

Applied to a hidden element via data-ln-data-store id="name", ln-data-store initializes and queries an IndexedDB database (ln_app_cache) with schema indexing and optional AES-GCM encryption. It is completely blind to the network: it listens for request CustomEvents (ln-data-store:request-query, request-save, request-delete), resolves results against local records, and emits ln-data-store:stale when cached data exceeds its configured timeout.

Understanding local-first architecture in isolation is difficult. True appreciation comes from seeing a fully-wired CRUD application working flawlessly in real-world scenarios: syncing data instantly across tabs, queuing actions while offline, and automatically resolving server version conflicts (409) without freezing the UI.

This demo page illustrates the ultimate Local-First CRUD Pipeline in ln-ashlar, orchestrating five independent, highly-specialized components through standard DOM event channels:

Five Interlocking Primitive Players

1. The Cache Store (ln-store): Renders nothing. Manages local IndexedDB storage, outbox write queues, delta sync loops, and optimistic states.
2. The Presenter (ln-table): Displays the records. It triggers query fetches, processes local column filters/sorting, renders templates, and captures selection events.
3. The Form Gate (ln-form): Manages inputs. It handles native validation, block submissions, bulk-fills from row selections, and serializes updates.
4. The Focus Gate (ln-modal): Houses the editor form. It keeps focus trapped, responds to escape cancellations, and opens or closes on demand.
5. The Safety Gate (ln-confirm): Prevents accidental row deletions. It gates trash clicks in-place, arming and releasing actions cleanly.

Telemetry and Tele-Coordinating

All operations are mediated by a single, lightweight coordinator script at the bottom of the page. The coordinator coordinates queries, intercepts store mutations to refresh tables, handles toast notifications, and resolves complex 409 server conflicts dynamically by feeding merged payloads back into form fields.

• Simulate 600 ms latency on every request
• ~15% of mutations fail (drives the coordinator's server-reject path)
• ~10% of updates return 409 (drives the coordinator's conflict-revert path)

Reset seed data — wipes localStorage + IndexedDB + reloads.