Development

To add a new browser module, place durable first-party feature code in the L0 layer, then add a thin HTML extension adapter to mount components and delegate state to an Alpine store. This ensures maintainable frontend behavior across the layered runtime.

The correct module layout uses a `mod/<author>/<repo>/...` browser module structure. Keeping adapters thin within this namespacing convention ensures deterministic UI composition and clear separation between repo-owned code and runtime state layers.

Component composition works by wiring page shells to HTML extension anchors, mounting components, and routing state through Alpine stores. JS extension hooks connect to `space.extend` seams, linking UI elements to store-backed state for auditable behavior.

Use L0 for durable repo-owned code, L1 for overrides, and L2 for user state. Adhering to these layer placement rules prevents confusion when adding new UI modules and ensures correct separation between first-party features and runtime modifications.

The best way to wire admin UI features is to implement JS extension hooks at the `space.extend` seams. This connects the admin interface components to the Alpine store, ensuring deterministic state management and auditable frontend behavior.

Frontend state breaks when code violates layer placement rules or uses thick adapters instead of delegating state. Ensure your HTML extension anchors mount existing components and route state through `space.fw.createStore(...)` to maintain deterministic composition.