@toyz/loom 0.9.0 → 0.11.0

package/README.md

@@ -25,17 +25,37 @@ It powers [placing.space](https://placing.space) in production — a real-time c
 
 ## Features
 
-- **`@component`** — register custom elements in one line
+- **`@component` / `@styles`** — register custom elements and scoped styles in one line
 - **`@reactive` / `@prop`** — fine-grained reactivity that only re-renders what changed
 - **`@computed` / `@watch`** — derived state and side effects
-- **`@on` / `@emit`** — declarative event handling
+- **`@on` / `@emit`** — declarative event handling via typed event bus
 - **JSX + DOM morphing** — write JSX, get surgical DOM patches (no virtual DOM)
-- **`@inject` / `@service`** — dependency injection container
-- **Hash & history router** — `@route`, `@guard`, `<loom-outlet>`
+- **`@inject` / `@service` / `@factory`** — full dependency injection container
+- **Hash & history router** — `@route`, `@guard`, `@group`, `<loom-outlet>`, `<loom-link>`
+- **`@api` / `@intercept`** — declarative data fetching with SWR, retry, and Result combinators
+- **`@lazy`** — code-split components with one decorator
+- **`@catch_` / `@suspend`** — error boundaries and async loading state
+- **`@interval` / `@timeout` / `@debounce` / `@throttle` / `@animationFrame`** — auto-cleaned timing
+- **`@mount` / `@unmount`** — lifecycle hooks
+- **`@form`** — declarative form binding with validation
+- **`@transform`** — typed value transforms for props and route params
+- **`Reactive<T>` / `CollectionStore<T>`** — observable state with `LocalAdapter` persistence
 - **`css\`\``** — adopted stylesheets with zero FOUC
 - **`<loom-virtual>`** — virtualized list for huge datasets
+- **`createDecorator`** — build your own decorators with the same factory Loom uses
 - **Zero dependencies** — just TypeScript and the platform
 
+## Create a Project
+
+```bash
+npm create @toyz/loom my-app
+cd my-app
+npm install
+npm run dev
+```
+
+Or install manually:
+
 ## Install
 
 ```bash
@@ -44,20 +64,27 @@ npm install @toyz/loom
 
 ## Quick Start
 
-```ts
-import { LoomElement, component, reactive, css } from "@toyz/loom";
+```tsx
+import { LoomElement, component, reactive, css, styles } from "@toyz/loom";
 
-const styles = css`
-  button { padding: 0.5rem 1rem; border-radius: 6px; cursor: pointer; }
-  span   { font-weight: bold; margin-left: 0.5rem; }
+const counterStyles = css`
+  button {
+    padding: 0.5rem 1rem;
+    border-radius: 6px;
+    cursor: pointer;
+  }
+  span {
+    font-weight: bold;
+    margin-left: 0.5rem;
+  }
 `;
 
 @component("click-counter")
+@styles(counterStyles)
 class ClickCounter extends LoomElement {
-  @reactive count = 0;
+  @reactive accessor count = 0;
 
   update() {
-    this.shadow.adoptedStyleSheets = [styles];
     return (
       <button onClick={() => this.count++}>
         Clicks: <span>{this.count}</span>

package/dist/element/element.d.ts

@@ -1,11 +1,14 @@
 import { type Constructor, type Handler } from "../bus";
 import { type LoomEvent } from "../event";
 import { type CSSValue } from "../css";
+import { type TraceDeps } from "../trace";
 export declare abstract class LoomElement extends HTMLElement {
     /** Access the LoomApp instance for inline provider resolution */
     protected get app(): import("..").LoomApp;
     protected shadow: ShadowRoot;
     private cleanups;
+    /** @internal — dependency tracking for traced template projection */
+    __traceDeps: TraceDeps | null;
     constructor();
     /** Adopt styles — supports both tagged template and string */
     protected css(text: string): void;

package/dist/element/element.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"element.d.ts","sourceRoot":"","sources":["../../src/element/element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,WAAW,EAAE,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAC7D,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,EAAE,KAAK,QAAQ,EAAY,MAAM,QAAQ,CAAC;AAKjD,8BAAsB,WAAY,SAAQ,WAAW;IACnD,iEAAiE;IACjE,SAAS,KAAK,GAAG,yBAAkB;IAEnC,SAAS,CAAC,MAAM,EAAE,UAAU,CAAC;IAC7B,OAAO,CAAC,QAAQ,CAAsB;;IAStC,8DAA8D;IAC9D,SAAS,CAAC,GAAG,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IACjC,SAAS,CAAC,GAAG,CAAC,OAAO,EAAE,oBAAoB,EAAE,GAAG,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI;IAQzE;;;;OAIG;IACH,WAAW,CAAC,MAAM,EAAE,aAAa,EAAE,GAAG,IAAI;IAU1C,8DAA8D;IAC9D,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI;IAMtE,yBAAyB;IACzB,SAAS,CAAC,IAAI,CAAC,CAAC,SAAS,SAAS,EAAE,KAAK,EAAE,CAAC,GAAG,IAAI;IAMnD,sDAAsD;IACtD,KAAK,CAAC,KAAK,EAAE,MAAM,IAAI,GAAG,IAAI;IAM9B,uCAAuC;IACvC,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,OAAO,GAAG,WAAW,EAAE,GAAG,EAAE,MAAM,GAAG,CAAC,GAAG,IAAI;IAInE,0CAA0C;IAC1C,SAAS,CAAC,EAAE,CAAC,CAAC,SAAS,OAAO,GAAG,WAAW,EAAE,GAAG,EAAE,MAAM,GAAG,CAAC,EAAE;IAM/D,iBAAiB,IAAI,IAAI;IAazB,oBAAoB,IAAI,IAAI;IAQ5B;;;OAGG;IACH,MAAM,IAAI,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI;IAE9B;;;OAGG;IACH,YAAY,IAAI,IAAI;IAEpB;;;OAGG;IACH,YAAY,IAAI,OAAO;IAMvB,OAAO,CAAC,gBAAgB,CAAS;IACjC,OAAO,CAAC,WAAW,CAAS;IAE5B,0DAA0D;IAC1D,cAAc,IAAI,IAAI;IA4BtB;;;OAGG;IACH,KAAK,IAAI,IAAI;CAKd"}
+{"version":3,"file":"element.d.ts","sourceRoot":"","sources":["../../src/element/element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAO,KAAK,WAAW,EAAE,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAC7D,OAAO,EAAE,KAAK,SAAS,EAAE,MAAM,UAAU,CAAC;AAC1C,OAAO,EAAE,KAAK,QAAQ,EAAY,MAAM,QAAQ,CAAC;AAIjD,OAAO,EAAqF,KAAK,SAAS,EAAE,MAAM,UAAU,CAAC;AAE7H,8BAAsB,WAAY,SAAQ,WAAW;IACnD,iEAAiE;IACjE,SAAS,KAAK,GAAG,yBAAkB;IAEnC,SAAS,CAAC,MAAM,EAAE,UAAU,CAAC;IAC7B,OAAO,CAAC,QAAQ,CAAsB;IACtC,qEAAqE;IACrE,WAAW,EAAE,SAAS,GAAG,IAAI,CAAQ;;IASrC,8DAA8D;IAC9D,SAAS,CAAC,GAAG,CAAC,IAAI,EAAE,MAAM,GAAG,IAAI;IACjC,SAAS,CAAC,GAAG,CAAC,OAAO,EAAE,oBAAoB,EAAE,GAAG,MAAM,EAAE,QAAQ,EAAE,GAAG,IAAI;IAQzE;;;;OAIG;IACH,WAAW,CAAC,MAAM,EAAE,aAAa,EAAE,GAAG,IAAI;IAU1C,8DAA8D;IAC9D,SAAS,CAAC,EAAE,CAAC,CAAC,EAAE,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC,EAAE,OAAO,EAAE,OAAO,CAAC,CAAC,CAAC,GAAG,MAAM,IAAI;IAMtE,yBAAyB;IACzB,SAAS,CAAC,IAAI,CAAC,CAAC,SAAS,SAAS,EAAE,KAAK,EAAE,CAAC,GAAG,IAAI;IAMnD,sDAAsD;IACtD,KAAK,CAAC,KAAK,EAAE,MAAM,IAAI,GAAG,IAAI;IAM9B,uCAAuC;IACvC,SAAS,CAAC,CAAC,CAAC,CAAC,SAAS,OAAO,GAAG,WAAW,EAAE,GAAG,EAAE,MAAM,GAAG,CAAC,GAAG,IAAI;IAInE,0CAA0C;IAC1C,SAAS,CAAC,EAAE,CAAC,CAAC,SAAS,OAAO,GAAG,WAAW,EAAE,GAAG,EAAE,MAAM,GAAG,CAAC,EAAE;IAM/D,iBAAiB,IAAI,IAAI;IAazB,oBAAoB,IAAI,IAAI;IAQ5B;;;OAGG;IACH,MAAM,IAAI,IAAI,GAAG,IAAI,EAAE,GAAG,IAAI;IAE9B;;;OAGG;IACH,YAAY,IAAI,IAAI;IAEpB;;;OAGG;IACH,YAAY,IAAI,OAAO;IAMvB,OAAO,CAAC,gBAAgB,CAAS;IACjC,OAAO,CAAC,WAAW,CAAS;IAE5B,0DAA0D;IAC1D,cAAc,IAAI,IAAI;IAoDtB;;;OAGG;IACH,KAAK,IAAI,IAAI;CAKd"}

package/dist/element/element.js

@@ -3,11 +3,14 @@ import { adoptCSS } from "../css";
 import { COMPUTED_DIRTY, REACTIVES, CONNECT_HOOKS, FIRST_UPDATED_HOOKS } from "../decorators/symbols";
 import { morph } from "../morph";
 import { app } from "../app";
+import { startTrace, endTrace, hasDirtyDeps, canFastPatch, applyBindings, refreshSnapshots } from "../trace";
 export class LoomElement extends HTMLElement {
     /** Access the LoomApp instance for inline provider resolution */
     get app() { return app; }
     shadow;
     cleanups = [];
+    /** @internal — dependency tracking for traced template projection */
+    __traceDeps = null;
     constructor() {
         super();
         this.shadow = this.attachShadow({ mode: "open" });
@@ -101,15 +104,33 @@ export class LoomElement extends HTMLElement {
             this._updateScheduled = false;
             if (!this.shouldUpdate())
                 return;
+            // Tier 1 — SKIP: no traced dependency changed
+            if (this.__traceDeps && !hasDirtyDeps(this.__traceDeps))
+                return;
+            // Tier 2 — FAST PATCH: all dirty deps have bindings
+            if (this.__traceDeps && canFastPatch(this.__traceDeps)) {
+                // Dirty @computed caches (they may depend on a fast-patched reactive)
+                for (const dirtyKey of this[COMPUTED_DIRTY] ?? []) {
+                    this[dirtyKey] = true;
+                }
+                applyBindings(this.__traceDeps);
+                refreshSnapshots(this.__traceDeps);
+                return;
+            }
+            // Tier 3 — FULL MORPH: structural change or first render
             // Dirty all @computed caches
             for (const dirtyKey of this[COMPUTED_DIRTY] ?? []) {
                 this[dirtyKey] = true;
             }
+            // Trace reactive reads during update()
+            startTrace();
             const result = this.update();
             // Auto-morph if update() returned DOM nodes
             if (result != null) {
                 morph(this.shadow, result);
             }
+            // Capture/refresh dependency tracking + bindings
+            this.__traceDeps = endTrace();
             if (!this._hasUpdated) {
                 this._hasUpdated = true;
                 this.firstUpdated();

package/dist/element/element.js.map

@@ -1 +1 @@
-{"version":3,"file":"element.js","sourceRoot":"","sources":["../../src/element/element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAkC,MAAM,QAAQ,CAAC;AAE7D,OAAO,EAAiB,QAAQ,EAAE,MAAM,QAAQ,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACtG,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAE7B,MAAM,OAAgB,WAAY,SAAQ,WAAW;IACnD,iEAAiE;IACjE,IAAc,GAAG,KAAK,OAAO,GAAG,CAAC,CAAC,CAAC;IAEzB,MAAM,CAAa;IACrB,QAAQ,GAAmB,EAAE,CAAC;IAEtC;QACE,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;IACpD,CAAC;IAOS,GAAG,CACX,aAA4C,EAC5C,GAAG,MAAkB;QAErB,QAAQ,CAAC,IAAI,CAAC,MAAM,EAAE,aAAa,EAAE,GAAG,MAAM,CAAC,CAAC;IAClD,CAAC;IAED;;;;OAIG;IACH,WAAW,CAAC,MAAuB;QACjC,MAAM,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC,kBAAkB,CAAC;QAChD,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;QAC5D,IAAI,SAAS,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACzB,IAAI,CAAC,MAAM,CAAC,kBAAkB,GAAG,CAAC,GAAG,QAAQ,EAAE,GAAG,SAAS,CAAC,CAAC;QAC/D,CAAC;IACH,CAAC;IAED,sBAAsB;IAEtB,8DAA8D;IACpD,EAAE,CAAI,IAAoB,EAAE,OAAmB;QACvD,MAAM,KAAK,GAAG,GAAG,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACpC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC1B,OAAO,KAAK,CAAC;IACf,CAAC;IAED,yBAAyB;IACf,IAAI,CAAsB,KAAQ;QAC1C,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAClB,CAAC;IAED,yBAAyB;IAEzB,sDAAsD;IACtD,KAAK,CAAC,KAAiB;QACrB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAED,oBAAoB;IAEpB,uCAAuC;IAC7B,CAAC,CAAkC,GAAW;QACtD,OAAO,IAAI,CAAC,MAAM,CAAC,aAAa,CAAI,GAAG,CAAC,CAAC;IAC3C,CAAC;IAED,0CAA0C;IAChC,EAAE,CAAkC,GAAW;QACvD,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAI,GAAG,CAAC,CAAC,CAAC;IAC1D,CAAC;IAED,kBAAkB;IAElB,iBAAiB;QACf,gFAAgF;QAChF,KAAK,MAAM,IAAI,IAAI,CAAE,IAAY,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC;YACxD,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;YAC3B,IAAI,OAAO,OAAO,KAAK,UAAU;gBAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACjE,CAAC;QAED,iDAAiD;QACjD,MAAM,YAAY,GAAG,CAAE,IAAY,CAAC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;QACjE,MAAM,eAAe,GAAG,IAAI,CAAC,MAAM,KAAK,WAAW,CAAC,SAAS,CAAC,MAAM,CAAC;QACrE,IAAI,YAAY,IAAI,eAAe;YAAE,IAAI,CAAC,cAAc,EAAE,CAAC;IAC7D,CAAC;IAED,oBAAoB;QAClB,oEAAoE;QACpE,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;QACpC,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;IACrB,CAAC;IAED,+CAA+C;IAE/C;;;OAGG;IACH,MAAM,KAA0B,CAAC;IAEjC;;;OAGG;IACH,YAAY,KAAU,CAAC;IAEvB;;;OAGG;IACH,YAAY;QACV,OAAO,IAAI,CAAC;IACd,CAAC;IAED,2BAA2B;IAEnB,gBAAgB,GAAG,KAAK,CAAC;IACzB,WAAW,GAAG,KAAK,CAAC;IAE5B,0DAA0D;IAC1D,cAAc;QACZ,IAAI,IAAI,CAAC,gBAAgB;YAAE,OAAO;QAClC,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;QAC7B,cAAc,CAAC,GAAG,EAAE;YAClB,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;YAC9B,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;gBAAE,OAAO;YACjC,6BAA6B;YAC7B,KAAK,MAAM,QAAQ,IAAK,IAAY,CAAC,cAAc,CAAC,IAAI,EAAE,EAAE,CAAC;gBAC1D,IAAY,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC;YACjC,CAAC;YACD,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;YAC7B,4CAA4C;YAC5C,IAAI,MAAM,IAAI,IAAI,EAAE,CAAC;gBACnB,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;YAC7B,CAAC;YACD,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;gBACtB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;gBACxB,IAAI,CAAC,YAAY,EAAE,CAAC;gBACpB,kEAAkE;gBAClE,oEAAoE;gBACpE,KAAK,MAAM,IAAI,IAAI,CAAE,IAAY,CAAC,mBAAmB,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC;oBAC9D,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;oBAC3B,IAAI,OAAO,OAAO,KAAK,UAAU;wBAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;gBACjE,CAAC;YACH,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;;OAGG;IACH,KAAK;QACH,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC5B,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;QACzB,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC3B,CAAC;CACF"}
+{"version":3,"file":"element.js","sourceRoot":"","sources":["../../src/element/element.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,GAAG,EAAkC,MAAM,QAAQ,CAAC;AAE7D,OAAO,EAAiB,QAAQ,EAAE,MAAM,QAAQ,CAAC;AACjD,OAAO,EAAE,cAAc,EAAE,SAAS,EAAE,aAAa,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AACtG,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AACjC,OAAO,EAAE,GAAG,EAAE,MAAM,QAAQ,CAAC;AAC7B,OAAO,EAAE,UAAU,EAAE,QAAQ,EAAE,YAAY,EAAE,YAAY,EAAE,aAAa,EAAE,gBAAgB,EAAkB,MAAM,UAAU,CAAC;AAE7H,MAAM,OAAgB,WAAY,SAAQ,WAAW;IACnD,iEAAiE;IACjE,IAAc,GAAG,KAAK,OAAO,GAAG,CAAC,CAAC,CAAC;IAEzB,MAAM,CAAa;IACrB,QAAQ,GAAmB,EAAE,CAAC;IACtC,qEAAqE;IACrE,WAAW,GAAqB,IAAI,CAAC;IAErC;QACE,KAAK,EAAE,CAAC;QACR,IAAI,CAAC,MAAM,GAAG,IAAI,CAAC,YAAY,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,CAAC,CAAC;IACpD,CAAC;IAOS,GAAG,CACX,aAA4C,EAC5C,GAAG,MAAkB;QAErB,QAAQ,CAAC,IAAI,CAAC,MAAM,EAAE,aAAa,EAAE,GAAG,MAAM,CAAC,CAAC;IAClD,CAAC;IAED;;;;OAIG;IACH,WAAW,CAAC,MAAuB;QACjC,MAAM,QAAQ,GAAG,IAAI,CAAC,MAAM,CAAC,kBAAkB,CAAC;QAChD,MAAM,SAAS,GAAG,MAAM,CAAC,MAAM,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,QAAQ,CAAC,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC;QAC5D,IAAI,SAAS,CAAC,MAAM,GAAG,CAAC,EAAE,CAAC;YACzB,IAAI,CAAC,MAAM,CAAC,kBAAkB,GAAG,CAAC,GAAG,QAAQ,EAAE,GAAG,SAAS,CAAC,CAAC;QAC/D,CAAC;IACH,CAAC;IAED,sBAAsB;IAEtB,8DAA8D;IACpD,EAAE,CAAI,IAAoB,EAAE,OAAmB;QACvD,MAAM,KAAK,GAAG,GAAG,CAAC,EAAE,CAAC,IAAI,EAAE,OAAO,CAAC,CAAC;QACpC,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;QAC1B,OAAO,KAAK,CAAC;IACf,CAAC;IAED,yBAAyB;IACf,IAAI,CAAsB,KAAQ;QAC1C,GAAG,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAClB,CAAC;IAED,yBAAyB;IAEzB,sDAAsD;IACtD,KAAK,CAAC,KAAiB;QACrB,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,KAAK,CAAC,CAAC;IAC5B,CAAC;IAED,oBAAoB;IAEpB,uCAAuC;IAC7B,CAAC,CAAkC,GAAW;QACtD,OAAO,IAAI,CAAC,MAAM,CAAC,aAAa,CAAI,GAAG,CAAC,CAAC;IAC3C,CAAC;IAED,0CAA0C;IAChC,EAAE,CAAkC,GAAW;QACvD,OAAO,KAAK,CAAC,IAAI,CAAC,IAAI,CAAC,MAAM,CAAC,gBAAgB,CAAI,GAAG,CAAC,CAAC,CAAC;IAC1D,CAAC;IAED,kBAAkB;IAElB,iBAAiB;QACf,gFAAgF;QAChF,KAAK,MAAM,IAAI,IAAI,CAAE,IAAY,CAAC,aAAa,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC;YACxD,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;YAC3B,IAAI,OAAO,OAAO,KAAK,UAAU;gBAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;QACjE,CAAC;QAED,iDAAiD;QACjD,MAAM,YAAY,GAAG,CAAE,IAAY,CAAC,SAAS,CAAC,EAAE,MAAM,IAAI,CAAC,CAAC,GAAG,CAAC,CAAC;QACjE,MAAM,eAAe,GAAG,IAAI,CAAC,MAAM,KAAK,WAAW,CAAC,SAAS,CAAC,MAAM,CAAC;QACrE,IAAI,YAAY,IAAI,eAAe;YAAE,IAAI,CAAC,cAAc,EAAE,CAAC;IAC7D,CAAC;IAED,oBAAoB;QAClB,oEAAoE;QACpE,IAAI,CAAC,QAAQ,CAAC,OAAO,CAAC,CAAC,EAAE,EAAE,EAAE,CAAC,EAAE,EAAE,CAAC,CAAC;QACpC,IAAI,CAAC,QAAQ,GAAG,EAAE,CAAC;IACrB,CAAC;IAED,+CAA+C;IAE/C;;;OAGG;IACH,MAAM,KAA2B,CAAC;IAElC;;;OAGG;IACH,YAAY,KAAW,CAAC;IAExB;;;OAGG;IACH,YAAY;QACV,OAAO,IAAI,CAAC;IACd,CAAC;IAED,2BAA2B;IAEnB,gBAAgB,GAAG,KAAK,CAAC;IACzB,WAAW,GAAG,KAAK,CAAC;IAE5B,0DAA0D;IAC1D,cAAc;QACZ,IAAI,IAAI,CAAC,gBAAgB;YAAE,OAAO;QAClC,IAAI,CAAC,gBAAgB,GAAG,IAAI,CAAC;QAC7B,cAAc,CAAC,GAAG,EAAE;YAClB,IAAI,CAAC,gBAAgB,GAAG,KAAK,CAAC;YAC9B,IAAI,CAAC,IAAI,CAAC,YAAY,EAAE;gBAAE,OAAO;YAEjC,8CAA8C;YAC9C,IAAI,IAAI,CAAC,WAAW,IAAI,CAAC,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC;gBAAE,OAAO;YAEhE,oDAAoD;YACpD,IAAI,IAAI,CAAC,WAAW,IAAI,YAAY,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC;gBACvD,sEAAsE;gBACtE,KAAK,MAAM,QAAQ,IAAK,IAAY,CAAC,cAAc,CAAC,IAAI,EAAE,EAAE,CAAC;oBAC1D,IAAY,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC;gBACjC,CAAC;gBACD,aAAa,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;gBAChC,gBAAgB,CAAC,IAAI,CAAC,WAAW,CAAC,CAAC;gBACnC,OAAO;YACT,CAAC;YAED,yDAAyD;YACzD,6BAA6B;YAC7B,KAAK,MAAM,QAAQ,IAAK,IAAY,CAAC,cAAc,CAAC,IAAI,EAAE,EAAE,CAAC;gBAC1D,IAAY,CAAC,QAAQ,CAAC,GAAG,IAAI,CAAC;YACjC,CAAC;YAED,uCAAuC;YACvC,UAAU,EAAE,CAAC;YACb,MAAM,MAAM,GAAG,IAAI,CAAC,MAAM,EAAE,CAAC;YAE7B,4CAA4C;YAC5C,IAAI,MAAM,IAAI,IAAI,EAAE,CAAC;gBACnB,KAAK,CAAC,IAAI,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;YAC7B,CAAC;YAED,iDAAiD;YACjD,IAAI,CAAC,WAAW,GAAG,QAAQ,EAAE,CAAC;YAE9B,IAAI,CAAC,IAAI,CAAC,WAAW,EAAE,CAAC;gBACtB,IAAI,CAAC,WAAW,GAAG,IAAI,CAAC;gBACxB,IAAI,CAAC,YAAY,EAAE,CAAC;gBACpB,kEAAkE;gBAClE,oEAAoE;gBACpE,KAAK,MAAM,IAAI,IAAI,CAAE,IAAY,CAAC,mBAAmB,CAAC,IAAI,EAAE,CAAC,EAAE,CAAC;oBAC9D,MAAM,OAAO,GAAG,IAAI,CAAC,IAAI,CAAC,CAAC;oBAC3B,IAAI,OAAO,OAAO,KAAK,UAAU;wBAAE,IAAI,CAAC,QAAQ,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;gBACjE,CAAC;YACH,CAAC;QACH,CAAC,CAAC,CAAC;IACL,CAAC;IAED;;;OAGG;IACH,KAAK;QACH,IAAI,CAAC,oBAAoB,EAAE,CAAC;QAC5B,IAAI,CAAC,WAAW,GAAG,KAAK,CAAC;QACzB,IAAI,CAAC,iBAAiB,EAAE,CAAC;IAC3B,CAAC;CACF"}

package/dist/element/form.d.ts

@@ -48,7 +48,9 @@ export interface FormState<T> {
     bind(field: keyof T): (e: Event) => void;
 }
 /**
- * Create a FormState<T> instance — pure reactive data, no DOM dependency.
+ * Create a FormState<T> instance — backed by Reactive primitives.
+ * All state reads go through Reactive.value (traceable),
+ * all mutations go through Reactive.set()/notify() (fires subscribers).
  */
 export declare function createFormState<T extends object>(schema: FormSchema<T>, scheduleUpdate: () => void): FormState<T>;
 /**

package/dist/element/form.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../src/element/form.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAKvC,MAAM,WAAW,WAAW,CAAC,CAAC,GAAG,OAAO;IACtC,8EAA8E;IAC9E,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,CAAC,CAAC;IAC/B,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,GAAG,MAAM,CAAC;CACxC;AAED,MAAM,MAAM,UAAU,CAAC,CAAC,IAAI;KACzB,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CACnC,CAAC;AAEF,MAAM,WAAW,SAAS,CAAC,CAAC;IAC1B,iCAAiC;IACjC,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAC;IACjB,gEAAgE;IAChE,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC;IAClD,0CAA0C;IAC1C,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC;IACxB,0DAA0D;IAC1D,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC;IACxB,+CAA+C;IAC/C,KAAK,IAAI,IAAI,CAAC;IACd,kEAAkE;IAClE,QAAQ,IAAI,UAAU,CAAC,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC;IAC5D,iEAAiE;IACjE,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;CAC1C;AAgBD;;GAEG;AACH,wBAAgB,eAAe,CAAC,CAAC,SAAS,MAAM,EAC9C,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC,EACrB,cAAc,EAAE,MAAM,IAAI,GACzB,SAAS,CAAC,CAAC,CAAC,CA0Gd;AAID;;;;;GAKG;AACH,wBAAgB,IAAI,CAAC,CAAC,SAAS,MAAM,EACnC,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC,IAEb,IAAI,SAAS,MAAM,EACzB,SAAS,4BAA4B,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,EACzD,SAAS,6BAA6B,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,KACzD,4BAA4B,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAgBpD"}
+{"version":3,"file":"form.d.ts","sourceRoot":"","sources":["../../src/element/form.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;GAsBG;AAEH,OAAO,EAAE,UAAU,EAAE,MAAM,WAAW,CAAC;AAMvC,MAAM,WAAW,WAAW,CAAC,CAAC,GAAG,OAAO;IACtC,8EAA8E;IAC9E,SAAS,CAAC,EAAE,CAAC,GAAG,EAAE,MAAM,KAAK,CAAC,CAAC;IAC/B,+CAA+C;IAC/C,QAAQ,CAAC,EAAE,CAAC,KAAK,EAAE,CAAC,KAAK,IAAI,GAAG,MAAM,CAAC;CACxC;AAED,MAAM,MAAM,UAAU,CAAC,CAAC,IAAI;KACzB,CAAC,IAAI,MAAM,CAAC,CAAC,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC;CACnC,CAAC;AAEF,MAAM,WAAW,SAAS,CAAC,CAAC;IAC1B,iCAAiC;IACjC,QAAQ,CAAC,IAAI,EAAE,CAAC,CAAC;IACjB,gEAAgE;IAChE,QAAQ,CAAC,MAAM,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC;IAClD,0CAA0C;IAC1C,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC;IACxB,0DAA0D;IAC1D,QAAQ,CAAC,KAAK,EAAE,OAAO,CAAC;IACxB,+CAA+C;IAC/C,KAAK,IAAI,IAAI,CAAC;IACd,kEAAkE;IAClE,QAAQ,IAAI,UAAU,CAAC,CAAC,EAAE,OAAO,CAAC,MAAM,CAAC,MAAM,CAAC,EAAE,MAAM,CAAC,CAAC,CAAC,CAAC;IAC5D,iEAAiE;IACjE,IAAI,CAAC,KAAK,EAAE,MAAM,CAAC,GAAG,CAAC,CAAC,EAAE,KAAK,KAAK,IAAI,CAAC;CAC1C;AAgBD;;;;GAIG;AACH,wBAAgB,eAAe,CAAC,CAAC,SAAS,MAAM,EAC9C,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC,EACrB,cAAc,EAAE,MAAM,IAAI,GACzB,SAAS,CAAC,CAAC,CAAC,CAgHd;AAID;;;;;GAKG;AACH,wBAAgB,IAAI,CAAC,CAAC,SAAS,MAAM,EACnC,MAAM,EAAE,UAAU,CAAC,CAAC,CAAC,IAEb,IAAI,SAAS,MAAM,EACzB,SAAS,4BAA4B,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,EACzD,SAAS,6BAA6B,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,KACzD,4BAA4B,CAAC,IAAI,EAAE,SAAS,CAAC,CAAC,CAAC,CAAC,CAgBpD"}

package/dist/element/form.js

@@ -22,6 +22,7 @@
  * ```
  */
 import { LoomResult } from "../result";
+import { Reactive } from "../store/reactive";
 // ── Helpers ──
 /**
  * Read a form element's value, handling checkboxes.
@@ -34,67 +35,77 @@ function readInputValue(input) {
 }
 // ── Core ──
 /**
- * Create a FormState<T> instance — pure reactive data, no DOM dependency.
+ * Create a FormState<T> instance — backed by Reactive primitives.
+ * All state reads go through Reactive.value (traceable),
+ * all mutations go through Reactive.set()/notify() (fires subscribers).
  */
 export function createFormState(schema, scheduleUpdate) {
     // Initialize all fields to empty string (or transform of empty)
     const initial = {};
-    const current = {};
-    const errors = {};
-    const touched = new Set();
-    let validatedAll = false;
+    const initData = {};
     for (const key of Object.keys(schema)) {
         const fieldSchema = schema[key];
         const raw = "";
         const transformed = fieldSchema?.transform ? fieldSchema.transform(raw) : raw;
         initial[key] = transformed;
-        current[key] = transformed;
+        initData[key] = transformed;
     }
-    let isValid = true;
+    // Reactive-backed state
+    const currentR = new Reactive({ ...initData });
+    const errorsR = new Reactive({});
+    const validR = new Reactive(true);
+    const touched = new Set();
+    let validatedAll = false;
     // Compute initial validity (without surfacing errors)
+    let initValid = true;
     for (const key of Object.keys(schema)) {
         const fieldSchema = schema[key];
         if (fieldSchema?.validate) {
-            const result = fieldSchema.validate(current[key]);
+            const result = fieldSchema.validate(initData[key]);
             if (result !== true)
-                isValid = false;
+                initValid = false;
         }
     }
+    validR.set(initValid);
     // Validation — only surfaces errors for touched fields (or all if validate() was called)
     function runValidation() {
+        const current = currentR.value;
+        const newErrors = {};
         let allValid = true;
         for (const key of Object.keys(schema)) {
             const fieldSchema = schema[key];
             if (fieldSchema?.validate) {
                 const result = fieldSchema.validate(current[key]);
                 if (result === true) {
-                    delete errors[key];
+                    // valid — no error
                 }
                 else {
                     allValid = false;
                     // Only surface error if field was touched or validate() was called
                     if (touched.has(key) || validatedAll) {
-                        errors[key] = result;
+                        newErrors[key] = result;
                     }
                 }
             }
         }
-        isValid = allValid;
+        errorsR.set(newErrors);
+        validR.set(allValid);
         return allValid;
     }
     // Bind handlers cache
     const bindCache = new Map();
     const state = {
         get data() {
-            return current;
+            return currentR.value;
         },
         get errors() {
-            return errors;
+            return errorsR.value;
         },
         get valid() {
-            return isValid;
+            return validR.value;
         },
         get dirty() {
+            const current = currentR.value;
             for (const key of Object.keys(schema)) {
                 if (current[key] !== initial[key])
                     return true;
@@ -102,15 +113,11 @@ export function createFormState(schema, scheduleUpdate) {
             return false;
         },
         reset() {
-            for (const key of Object.keys(schema)) {
-                current[key] = initial[key];
-            }
+            currentR.set({ ...initial });
             touched.clear();
             validatedAll = false;
-            // Clear all errors on reset
-            for (const key of Object.keys(errors)) {
-                delete errors[key];
-            }
+            errorsR.set({});
+            validR.set(true);
             scheduleUpdate();
         },
         validate() {
@@ -118,8 +125,8 @@ export function createFormState(schema, scheduleUpdate) {
             const valid = runValidation();
             scheduleUpdate();
             if (valid)
-                return LoomResult.ok(current);
-            return LoomResult.err({ ...errors });
+                return LoomResult.ok(currentR.value);
+            return LoomResult.err({ ...errorsR.value });
         },
         bind(field) {
             const key = field;
@@ -129,7 +136,9 @@ export function createFormState(schema, scheduleUpdate) {
                     const raw = readInputValue(input);
                     const fieldSchema = schema[field];
                     const transformed = fieldSchema?.transform ? fieldSchema.transform(raw) : raw;
+                    const current = currentR.value;
                     current[key] = transformed;
+                    currentR.notify();
                     touched.add(key);
                     runValidation();
                     scheduleUpdate();

package/dist/element/form.js.map

@@ -1 +1 @@
-{"version":3,"file":"form.js","sourceRoot":"","sources":["../../src/element/form.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"form.js","sourceRoot":"","sources":["../../src/element/form.ts"],"names":[],"mappings":"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"}

package/dist/element/icon.d.ts

@@ -27,9 +27,7 @@ export declare class LoomIcon extends LoomElement {
     static has(name: string): boolean;
     /** List all registered icon names. */
     static get names(): string[];
-    /** Immediately apply size/color from attributes — runs before connectedCallback */
-    attributeChangedCallback(name: string, _old: string | null, val: string | null): void;
-    connectedCallback(): void;
+    private syncVars;
     update(): SVGSVGElement | HTMLSpanElement;
 }
 //# sourceMappingURL=icon.d.ts.map

package/dist/element/icon.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../src/element/icon.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AA6BxC,qBACa,QAAS,SAAQ,WAAW;IAEvC,2DAA2D;IACrD,QAAQ,CAAC,IAAI,SAAM;IAEzB,qBAAqB;IACf,QAAQ,CAAC,IAAI,SAAM;IAEzB,+BAA+B;IACzB,QAAQ,CAAC,KAAK,SAAkB;IAEtC,mFAAmF;IACnF,MAAM,CAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI;IAIrD,uCAAuC;IACvC,MAAM,CAAC,WAAW,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI;IAMvD,sCAAsC;IACtC,MAAM,CAAC,GAAG,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO;IAIjC,sCAAsC;IACtC,MAAM,KAAK,KAAK,IAAI,MAAM,EAAE,CAE3B;IAED,mFAAmF;IACnF,wBAAwB,CAAC,IAAI,EAAE,MAAM,EAAE,IAAI,EAAE,MAAM,GAAG,IAAI,EAAE,GAAG,EAAE,MAAM,GAAG,IAAI;IAU9E,iBAAiB;IASjB,MAAM;CAiBP"}
+{"version":3,"file":"icon.d.ts","sourceRoot":"","sources":["../../src/element/icon.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;GAYG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AA8BxC,qBAEa,QAAS,SAAQ,WAAW;IAEvC,2DAA2D;IACrD,QAAQ,CAAC,IAAI,SAAM;IAEzB,qBAAqB;IACf,QAAQ,CAAC,IAAI,SAAM;IAEzB,+BAA+B;IACzB,QAAQ,CAAC,KAAK,SAAkB;IAEtC,mFAAmF;IACnF,MAAM,CAAC,QAAQ,CAAC,IAAI,EAAE,MAAM,EAAE,QAAQ,EAAE,MAAM,GAAG,IAAI;IAIrD,uCAAuC;IACvC,MAAM,CAAC,WAAW,CAAC,KAAK,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC,GAAG,IAAI;IAMvD,sCAAsC;IACtC,MAAM,CAAC,GAAG,CAAC,IAAI,EAAE,MAAM,GAAG,OAAO;IAIjC,sCAAsC;IACtC,MAAM,KAAK,KAAK,IAAI,MAAM,EAAE,CAE3B;IAID,OAAO,CAAC,QAAQ;IAKhB,MAAM;CAaP"}

package/dist/element/icon.js

@@ -11,6 +11,13 @@
  *   // Use anywhere in JSX
  *   <loom-icon name="bolt" size={20} color="var(--accent)" />
  */
+var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
+    var useValue = arguments.length > 2;
+    for (var i = 0; i < initializers.length; i++) {
+        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
+    }
+    return useValue ? value : void 0;
+};
 var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn, decorators, contextIn, initializers, extraInitializers) {
     function accept(f) { if (f !== void 0 && typeof f !== "function") throw new TypeError("Function expected"); return f; }
     var kind = contextIn.kind, key = kind === "getter" ? "get" : kind === "setter" ? "set" : "value";
@@ -38,16 +45,10 @@ var __esDecorate = (this && this.__esDecorate) || function (ctor, descriptorIn,
     if (target) Object.defineProperty(target, contextIn.name, descriptor);
     done = true;
 };
-var __runInitializers = (this && this.__runInitializers) || function (thisArg, initializers, value) {
-    var useValue = arguments.length > 2;
-    for (var i = 0; i < initializers.length; i++) {
-        value = useValue ? initializers[i].call(thisArg, value) : initializers[i].call(thisArg);
-    }
-    return useValue ? value : void 0;
-};
 import { LoomElement } from "./element";
-import { component } from "./decorators";
+import { component, styles } from "./decorators";
 import { prop } from "../store/decorators";
+import { watch } from "../store/watch";
 import { css } from "../css";
 const baseStyles = css `
   :host {
@@ -72,11 +73,12 @@ const baseStyles = css `
 /** Icon path data registry (name → SVG inner content) */
 const registry = new Map();
 let LoomIcon = (() => {
-    let _classDecorators = [component("loom-icon")];
+    let _classDecorators = [component("loom-icon"), styles(baseStyles)];
     let _classDescriptor;
     let _classExtraInitializers = [];
     let _classThis;
     let _classSuper = LoomElement;
+    let _instanceExtraInitializers = [];
     let _name_decorators;
     let _name_initializers = [];
     let _name_extraInitializers = [];
@@ -86,6 +88,7 @@ let LoomIcon = (() => {
     let _color_decorators;
     let _color_initializers = [];
     let _color_extraInitializers = [];
+    let _syncVars_decorators;
     var LoomIcon = class extends _classSuper {
         static { _classThis = this; }
         static {
@@ -93,15 +96,17 @@ let LoomIcon = (() => {
             _name_decorators = [prop];
             _size_decorators = [prop];
             _color_decorators = [prop];
+            _syncVars_decorators = [watch("size"), watch("color")];
             __esDecorate(this, null, _name_decorators, { kind: "accessor", name: "name", static: false, private: false, access: { has: obj => "name" in obj, get: obj => obj.name, set: (obj, value) => { obj.name = value; } }, metadata: _metadata }, _name_initializers, _name_extraInitializers);
             __esDecorate(this, null, _size_decorators, { kind: "accessor", name: "size", static: false, private: false, access: { has: obj => "size" in obj, get: obj => obj.size, set: (obj, value) => { obj.size = value; } }, metadata: _metadata }, _size_initializers, _size_extraInitializers);
             __esDecorate(this, null, _color_decorators, { kind: "accessor", name: "color", static: false, private: false, access: { has: obj => "color" in obj, get: obj => obj.color, set: (obj, value) => { obj.color = value; } }, metadata: _metadata }, _color_initializers, _color_extraInitializers);
+            __esDecorate(this, null, _syncVars_decorators, { kind: "method", name: "syncVars", static: false, private: false, access: { has: obj => "syncVars" in obj, get: obj => obj.syncVars }, metadata: _metadata }, null, _instanceExtraInitializers);
             __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
             LoomIcon = _classThis = _classDescriptor.value;
             if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
             __runInitializers(_classThis, _classExtraInitializers);
         }
-        #name_accessor_storage = __runInitializers(this, _name_initializers, "");
+        #name_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _name_initializers, ""));
         /** Icon name (must be registered via LoomIcon.register) */
         get name() { return this.#name_accessor_storage; }
         set name(value) { this.#name_accessor_storage = value; }
@@ -131,35 +136,16 @@ let LoomIcon = (() => {
         static get names() {
             return Array.from(registry.keys());
         }
-        /** Immediately apply size/color from attributes — runs before connectedCallback */
-        attributeChangedCallback(name, _old, val) {
-            // Note: @component decorator wraps this method and parses @prop values
-            // before calling us. We just sync the CSS custom properties immediately.
-            if (name === "size" && val !== null) {
-                this.style.setProperty("--_s", `${val}px`);
-            }
-            else if (name === "color" && val !== null) {
-                this.style.setProperty("--_c", val);
-            }
-        }
-        connectedCallback() {
-            // Set CSS vars from current attributes before first paint
-            const s = this.getAttribute("size");
-            const c = this.getAttribute("color");
-            this.style.setProperty("--_s", `${s ?? this.size}px`);
-            if (c)
-                this.style.setProperty("--_c", c);
-            super.connectedCallback();
+        syncVars() {
+            this.style.setProperty("--_s", `${this.size}px`);
+            this.style.setProperty("--_c", this.color);
         }
         update() {
-            this.shadow.adoptedStyleSheets = [baseStyles];
             this.style.setProperty("--_s", `${this.size}px`);
             this.style.setProperty("--_c", this.color);
             const inner = registry.get(this.name);
-            if (!inner) {
-                const placeholder = document.createElement("span");
-                return placeholder;
-            }
+            if (!inner)
+                return document.createElement("span");
             const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
             svg.setAttribute("viewBox", "0 0 24 24");
             svg.setAttribute("aria-hidden", "true");

package/dist/element/icon.js.map

@@ -1 +1 @@
-{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../src/element/icon.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"icon.js","sourceRoot":"","sources":["../../src/element/icon.ts"],"names":[],"mappings":"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"}

package/dist/element/index.d.ts

@@ -4,7 +4,6 @@
  * LoomElement base class, built-in elements, and element decorators.
  */
 export { LoomElement } from "./element";
-export type { VirtualListOptions } from "./virtual";
 export { component, query, queryAll, styles } from "./decorators";
 export { catch_, suspend, mount, unmount } from "./lifecycle";
 export { interval, timeout, debounce, throttle, animationFrame } from "./timing";

package/dist/element/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/element/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAKxC,YAAY,EAAE,kBAAkB,EAAE,MAAM,WAAW,CAAC;AAGpD,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAGlE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAG9D,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAGjF,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAGjE,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAG1C,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAG/B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/element/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAOxC,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAGlE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAG9D,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAGjF,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,SAAS,EAAE,UAAU,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAGjE,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAC9B,YAAY,EAAE,WAAW,EAAE,MAAM,QAAQ,CAAC;AAG1C,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAG/B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC"}

package/dist/element/index.js

@@ -5,6 +5,9 @@
  */
 // Base element
 export { LoomElement } from "./element";
+// Built-in elements — import explicitly to opt-in to side effects
+// e.g. import { LoomVirtual } from "@toyz/loom/element/virtual"
+// e.g. import { LoomIcon } from "@toyz/loom/element/icon"
 // Element decorators
 export { component, query, queryAll, styles } from "./decorators";
 // Lifecycle decorators

package/dist/element/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/element/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,eAAe;AACf,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAOxC,qBAAqB;AACrB,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAElE,uBAAuB;AACvB,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE9D,oBAAoB;AACpB,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAEjF,iBAAiB;AACjB,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAG9B,yBAAyB;AACzB,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAG9B,iBAAiB;AACjB,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE/B,uBAAuB;AACvB,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/element/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,eAAe;AACf,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAExC,kEAAkE;AAClE,gEAAgE;AAChE,0DAA0D;AAE1D,qBAAqB;AACrB,OAAO,EAAE,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAAE,MAAM,cAAc,CAAC;AAElE,uBAAuB;AACvB,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAAE,MAAM,aAAa,CAAC;AAE9D,oBAAoB;AACpB,OAAO,EAAE,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,cAAc,EAAE,MAAM,UAAU,CAAC;AAEjF,iBAAiB;AACjB,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAG9B,yBAAyB;AACzB,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAG9B,iBAAiB;AACjB,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE/B,uBAAuB;AACvB,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC"}

package/dist/element/timing.d.ts

@@ -48,21 +48,6 @@ export declare function debounce(ms: number): (method: Function, context: ClassM
  * ```
  */
 export declare function throttle(ms: number): (method: Function, context: ClassMethodDecoratorContext) => (this: any, ...args: unknown[]) => void;
-/**
- * Centralized rAF loop via RenderLoop. Method receives (deltaTime, timestamp).
- * Use layer to control execution order (lower = earlier).
- *
- * ```ts
- * @animationFrame(10)       // layer 10
- * draw(dt: number, t: number) { ... }
- *
- * @animationFrame()          // default layer 0
- * physics(dt: number) { ... }
- *
- * @animationFrame            // also valid
- * render(dt: number) { ... }
- * ```
- */
 export declare function animationFrame(layer?: number): (method: Function, context: ClassMethodDecoratorContext) => void;
 export declare function animationFrame(method: Function, context: ClassMethodDecoratorContext): void;
 //# sourceMappingURL=timing.d.ts.map

package/dist/element/timing.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"timing.d.ts","sourceRoot":"","sources":["../../src/element/timing.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAMH;;;;;;;;GAQG;AACH,eAAO,MAAM,QAAQ,kFAKnB,CAAC;AAEH;;;;;;;;GAQG;AACH,eAAO,MAAM,OAAO,kFAKlB,CAAC;AAEH;;;;;;;;GAQG;AACH,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,IACzB,QAAQ,QAAQ,EAAE,SAAS,2BAA2B,YAIjC,GAAG,WAAW,OAAO,EAAE,UAerD;AAED;;;;;;;;;GASG;AACH,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,IACzB,QAAQ,QAAQ,EAAE,SAAS,2BAA2B,YAKjC,GAAG,WAAW,OAAO,EAAE,UAyBrD;AAED;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,cAAc,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,2BAA2B,KAAK,IAAI,CAAC;AACjH,wBAAgB,cAAc,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,2BAA2B,GAAG,IAAI,CAAC"}
+{"version":3,"file":"timing.d.ts","sourceRoot":"","sources":["../../src/element/timing.ts"],"names":[],"mappings":"AAAA;;;;;;;;GAQG;AAMH;;;;;;;;GAQG;AACH,eAAO,MAAM,QAAQ,kFAKnB,CAAC;AAEH;;;;;;;;GAQG;AACH,eAAO,MAAM,OAAO,kFAKlB,CAAC;AAEH;;;;;;;;GAQG;AACH,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,IACzB,QAAQ,QAAQ,EAAE,SAAS,2BAA2B,YAIjC,GAAG,WAAW,OAAO,EAAE,UAerD;AAED;;;;;;;;;GASG;AACH,wBAAgB,QAAQ,CAAC,EAAE,EAAE,MAAM,IACzB,QAAQ,QAAQ,EAAE,SAAS,2BAA2B,YAKjC,GAAG,WAAW,OAAO,EAAE,UAyBrD;AAuBD,wBAAgB,cAAc,CAAC,KAAK,CAAC,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,2BAA2B,KAAK,IAAI,CAAC;AACjH,wBAAgB,cAAc,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,2BAA2B,GAAG,IAAI,CAAC"}

package/dist/element/timing.js

@@ -108,24 +108,34 @@ export function throttle(ms) {
         return replacement;
     };
 }
+/**
+ * Centralized rAF loop via RenderLoop. Method receives (deltaTime, timestamp).
+ * Use layer to control execution order (lower = earlier).
+ *
+ * ```ts
+ * @animationFrame(10)       // layer 10
+ * draw(dt: number, t: number) { ... }
+ *
+ * @animationFrame()          // default layer 0
+ * physics(dt: number) { ... }
+ *
+ * @animationFrame            // also valid
+ * render(dt: number) { ... }
+ * ```
+ */
+const _af = createDecorator((method, _key, layer) => {
+    return (el) => {
+        return renderLoop.add(layer, (dt, t) => method.call(el, dt, t));
+    };
+});
 export function animationFrame(methodOrLayer, context) {
     // Called as @animationFrame (no parens) — method is first arg
     if (typeof methodOrLayer === "function" && context) {
-        wireAnimationFrame(methodOrLayer, context, 0);
+        _af(0)(methodOrLayer, context);
         return;
     }
     // Called as @animationFrame() or @animationFrame(layer)
     const layer = typeof methodOrLayer === "number" ? methodOrLayer : 0;
-    return (method, ctx) => wireAnimationFrame(method, ctx, layer);
-}
-/** Internal: wire rAF lifecycle via addInitializer */
-function wireAnimationFrame(method, context, layer) {
-    context.addInitializer(function () {
-        if (!this[CONNECT_HOOKS])
-            this[CONNECT_HOOKS] = [];
-        this[CONNECT_HOOKS].push((el) => {
-            return renderLoop.add(layer, (dt, t) => method.call(el, dt, t));
-        });
-    });
+    return _af(layer);
 }
 //# sourceMappingURL=timing.js.map