@toyz/loom 0.4.0 → 0.6.0

package/dist/element/form.js

@@ -0,0 +1,167 @@
+/**
+ * Loom — @form<T> property decorator
+ *
+ * DOM-independent form state management with validation, transforms,
+ * dirty tracking, and explicit template binding.
+ *
+ * ```ts
+ * @form<LoginForm>({
+ *   email:    { transform: toTrimmed, validate: v => v.includes("@") || "Invalid email" },
+ *   password: { validate: v => v.length >= 8 || "Min 8 chars" },
+ *   remember: { transform: toBoolean },
+ * })
+ * accessor login!: FormState<LoginForm>;
+ *
+ * update() {
+ *   const f = this.login;
+ *   return (
+ *     <form>
+ *       <input value={f.data.email} onInput={f.bind("email")} />
+ *       <input value={f.data.password} onInput={f.bind("password")} />
+ *       <button disabled={!f.valid}>Submit</button>
+ *     </form>
+ *   );
+ * }
+ * ```
+ */
+// ── Helpers ──
+/**
+ * Read a form element's value, handling checkboxes.
+ */
+function readInputValue(input) {
+    if (input instanceof HTMLInputElement && input.type === "checkbox") {
+        return input.checked ? "true" : "false";
+    }
+    return input.value;
+}
+// ── Core ──
+/**
+ * Create a FormState<T> instance — pure reactive data, no DOM dependency.
+ */
+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;
+    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;
+    }
+    let isValid = true;
+    // Compute initial validity (without surfacing errors)
+    for (const key of Object.keys(schema)) {
+        const fieldSchema = schema[key];
+        if (fieldSchema?.validate) {
+            const result = fieldSchema.validate(current[key]);
+            if (result !== true)
+                isValid = false;
+        }
+    }
+    // Validation — only surfaces errors for touched fields (or all if validate() was called)
+    function runValidation() {
+        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];
+                }
+                else {
+                    allValid = false;
+                    // Only surface error if field was touched or validate() was called
+                    if (touched.has(key) || validatedAll) {
+                        errors[key] = result;
+                    }
+                }
+            }
+        }
+        isValid = allValid;
+        return allValid;
+    }
+    // Bind handlers cache
+    const bindCache = new Map();
+    const state = {
+        get data() {
+            return current;
+        },
+        get errors() {
+            return errors;
+        },
+        get valid() {
+            return isValid;
+        },
+        get dirty() {
+            for (const key of Object.keys(schema)) {
+                if (current[key] !== initial[key])
+                    return true;
+            }
+            return false;
+        },
+        reset() {
+            for (const key of Object.keys(schema)) {
+                current[key] = initial[key];
+            }
+            touched.clear();
+            validatedAll = false;
+            // Clear all errors on reset
+            for (const key of Object.keys(errors)) {
+                delete errors[key];
+            }
+            scheduleUpdate();
+        },
+        validate() {
+            validatedAll = true;
+            const result = runValidation();
+            scheduleUpdate();
+            return result;
+        },
+        bind(field) {
+            const key = field;
+            if (!bindCache.has(key)) {
+                bindCache.set(key, (e) => {
+                    const input = e.target;
+                    const raw = readInputValue(input);
+                    const fieldSchema = schema[field];
+                    const transformed = fieldSchema?.transform ? fieldSchema.transform(raw) : raw;
+                    current[key] = transformed;
+                    touched.add(key);
+                    runValidation();
+                    scheduleUpdate();
+                });
+            }
+            return bindCache.get(key);
+        },
+    };
+    return state;
+}
+// ── Decorator ──
+/**
+ * @form<T>(schema) — Auto-accessor decorator
+ *
+ * Creates a FormState<T> eagerly at class initialization.
+ * No DOM dependency — use `.bind(field)` in your template for explicit binding.
+ */
+export function form(schema) {
+    return (_target, context) => {
+        const stateKey = Symbol(`form:${String(context.name)}`);
+        return {
+            get() {
+                if (!this[stateKey]) {
+                    const scheduleUpdate = () => this.scheduleUpdate?.();
+                    this[stateKey] = createFormState(schema, scheduleUpdate);
+                }
+                return this[stateKey];
+            },
+            set(_val) {
+                // Ignore external sets — state is managed internally
+            },
+        };
+    };
+}
+//# sourceMappingURL=form.js.map

package/dist/element/form.js.map

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

package/dist/element/icon.d.ts

@@ -14,11 +14,11 @@
 import { LoomElement } from "./element";
 export declare class LoomIcon extends LoomElement {
     /** Icon name (must be registered via LoomIcon.register) */
-    name: string;
+    accessor name: string;
     /** Size in pixels */
-    size: number;
+    accessor size: number;
     /** Stroke color (CSS value) */
-    color: string;
+    accessor color: string;
     /** Register an icon. `svgInner` is the SVG inner content (paths, circles, etc). */
     static register(name: string, svgInner: string): void;
     /** Register multiple icons at once. */

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,IAAI,SAAM;IAEhB,qBAAqB;IACf,IAAI,SAAM;IAEhB,+BAA+B;IACzB,KAAK,SAAkB;IAE7B,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;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"}

package/dist/element/icon.js

@@ -11,11 +11,39 @@
  *   // Use anywhere in JSX
  *   <loom-icon name="bolt" size={20} color="var(--accent)" />
  */
-var __decorate = (this && this.__decorate) || function (decorators, target, key, desc) {
-    var c = arguments.length, r = c < 3 ? target : desc === null ? desc = Object.getOwnPropertyDescriptor(target, key) : desc, d;
-    if (typeof Reflect === "object" && typeof Reflect.decorate === "function") r = Reflect.decorate(decorators, target, key, desc);
-    else for (var i = decorators.length - 1; i >= 0; i--) if (d = decorators[i]) r = (c < 3 ? d(r) : c > 3 ? d(target, key, r) : d(target, key)) || r;
-    return c > 3 && r && Object.defineProperty(target, key, r), r;
+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";
+    var target = !descriptorIn && ctor ? contextIn["static"] ? ctor : ctor.prototype : null;
+    var descriptor = descriptorIn || (target ? Object.getOwnPropertyDescriptor(target, contextIn.name) : {});
+    var _, done = false;
+    for (var i = decorators.length - 1; i >= 0; i--) {
+        var context = {};
+        for (var p in contextIn) context[p] = p === "access" ? {} : contextIn[p];
+        for (var p in contextIn.access) context.access[p] = contextIn.access[p];
+        context.addInitializer = function (f) { if (done) throw new TypeError("Cannot add initializers after decoration has completed"); extraInitializers.push(accept(f || null)); };
+        var result = (0, decorators[i])(kind === "accessor" ? { get: descriptor.get, set: descriptor.set } : descriptor[key], context);
+        if (kind === "accessor") {
+            if (result === void 0) continue;
+            if (result === null || typeof result !== "object") throw new TypeError("Object expected");
+            if (_ = accept(result.get)) descriptor.get = _;
+            if (_ = accept(result.set)) descriptor.set = _;
+            if (_ = accept(result.init)) initializers.unshift(_);
+        }
+        else if (_ = accept(result)) {
+            if (kind === "field") initializers.unshift(_);
+            else descriptor[key] = _;
+        }
+    }
+    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";
@@ -43,78 +71,107 @@ const baseStyles = css `
 `;
 /** Icon path data registry (name → SVG inner content) */
 const registry = new Map();
-let LoomIcon = class LoomIcon extends LoomElement {
-    /** Icon name (must be registered via LoomIcon.register) */
-    name = "";
-    /** Size in pixels */
-    size = 24;
-    /** Stroke color (CSS value) */
-    color = "currentColor";
-    /** Register an icon. `svgInner` is the SVG inner content (paths, circles, etc). */
-    static register(name, svgInner) {
-        registry.set(name, svgInner);
-    }
-    /** Register multiple icons at once. */
-    static registerAll(icons) {
-        for (const [name, svg] of Object.entries(icons)) {
-            registry.set(name, svg);
+let LoomIcon = (() => {
+    let _classDecorators = [component("loom-icon")];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = LoomElement;
+    let _name_decorators;
+    let _name_initializers = [];
+    let _name_extraInitializers = [];
+    let _size_decorators;
+    let _size_initializers = [];
+    let _size_extraInitializers = [];
+    let _color_decorators;
+    let _color_initializers = [];
+    let _color_extraInitializers = [];
+    var LoomIcon = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _name_decorators = [prop];
+            _size_decorators = [prop];
+            _color_decorators = [prop];
+            __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(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);
         }
-    }
-    /** Check if an icon is registered. */
-    static has(name) {
-        return registry.has(name);
-    }
-    /** List all registered icon names. */
-    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`);
+        #name_accessor_storage = __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; }
+        #size_accessor_storage = (__runInitializers(this, _name_extraInitializers), __runInitializers(this, _size_initializers, 24));
+        /** Size in pixels */
+        get size() { return this.#size_accessor_storage; }
+        set size(value) { this.#size_accessor_storage = value; }
+        #color_accessor_storage = (__runInitializers(this, _size_extraInitializers), __runInitializers(this, _color_initializers, "currentColor"));
+        /** Stroke color (CSS value) */
+        get color() { return this.#color_accessor_storage; }
+        set color(value) { this.#color_accessor_storage = value; }
+        /** Register an icon. `svgInner` is the SVG inner content (paths, circles, etc). */
+        static register(name, svgInner) {
+            registry.set(name, svgInner);
         }
-        else if (name === "color" && val !== null) {
-            this.style.setProperty("--_c", val);
+        /** Register multiple icons at once. */
+        static registerAll(icons) {
+            for (const [name, svg] of Object.entries(icons)) {
+                registry.set(name, svg);
+            }
         }
-    }
-    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();
-    }
-    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;
+        /** Check if an icon is registered. */
+        static has(name) {
+            return registry.has(name);
         }
-        const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
-        svg.setAttribute("viewBox", "0 0 24 24");
-        svg.setAttribute("aria-hidden", "true");
-        svg.innerHTML = inner;
-        return svg;
-    }
-};
-__decorate([
-    prop
-], LoomIcon.prototype, "name", void 0);
-__decorate([
-    prop
-], LoomIcon.prototype, "size", void 0);
-__decorate([
-    prop
-], LoomIcon.prototype, "color", void 0);
-LoomIcon = __decorate([
-    component("loom-icon")
-], LoomIcon);
+        /** List all registered icon names. */
+        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();
+        }
+        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;
+            }
+            const svg = document.createElementNS("http://www.w3.org/2000/svg", "svg");
+            svg.setAttribute("viewBox", "0 0 24 24");
+            svg.setAttribute("aria-hidden", "true");
+            svg.innerHTML = inner;
+            return svg;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _color_extraInitializers);
+        }
+    };
+    return LoomIcon = _classThis;
+})();
 export { LoomIcon };
 //# sourceMappingURL=icon.js.map

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

@@ -5,7 +5,14 @@
  */
 export { LoomElement } from "./element";
 export type { VirtualListOptions } from "./virtual";
-export { component, query, queryAll } from "./decorators";
+export { component, query, queryAll, styles } from "./decorators";
 export { catch_, suspend, mount, unmount } from "./lifecycle";
 export { interval, timeout, debounce, throttle, animationFrame } from "./timing";
+export { form } from "./form";
+export type { FormState, FormSchema, FieldSchema } from "./form";
+export { lazy } from "./lazy";
+export type { LazyOptions } from "./lazy";
+export { slot } from "./slots";
+export { transition } from "./transition";
+export type { TransitionOptions } from "./transition";
 //# sourceMappingURL=index.d.ts.map

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,cAAc,CAAC;AAG1D,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"}
+{"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"}

package/dist/element/index.js

@@ -6,9 +6,17 @@
 // Base element
 export { LoomElement } from "./element";
 // Element decorators
-export { component, query, queryAll } from "./decorators";
+export { component, query, queryAll, styles } from "./decorators";
 // Lifecycle decorators
 export { catch_, suspend, mount, unmount } from "./lifecycle";
 // Timing decorators
 export { interval, timeout, debounce, throttle, animationFrame } from "./timing";
+// Form decorator
+export { form } from "./form";
+// Lazy loading decorator
+export { lazy } from "./lazy";
+// Slot decorator
+export { slot } from "./slots";
+// Transition decorator
+export { transition } from "./transition";
 //# sourceMappingURL=index.js.map

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,cAAc,CAAC;AAE1D,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"}
+{"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"}

package/dist/element/lazy.d.ts

@@ -0,0 +1,31 @@
+/**
+ * Loom — @lazy decorator (TC39 Stage 3)
+ *
+ * Stackable class decorator that defers module loading until first mount.
+ *
+ * ```ts
+ * @component("settings-page")
+ * @route("/settings")
+ * @lazy(() => import("./pages/settings"))
+ * class SettingsPage extends LoomElement {}
+ * ```
+ */
+declare const LAZY_LOADER: unique symbol;
+declare const LAZY_OPTS: unique symbol;
+declare const LAZY_LOADED: unique symbol;
+export interface LazyOptions {
+    /** Tag name of a loading component to show while the chunk loads */
+    loading?: string;
+}
+/**
+ * @lazy(loader, opts?) — Stackable class decorator
+ *
+ * Defers the real class body until first connectedCallback.
+ * The loader should return a dynamic import whose default export
+ * is the real component class.
+ */
+export declare function lazy(loader: () => Promise<{
+    default: unknown;
+} | unknown>, opts?: LazyOptions): (value: Function, _context: ClassDecoratorContext) => void;
+export { LAZY_LOADER, LAZY_OPTS, LAZY_LOADED };
+//# sourceMappingURL=lazy.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"lazy.d.ts","sourceRoot":"","sources":["../../src/element/lazy.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,QAAA,MAAM,WAAW,eAA6B,CAAC;AAC/C,QAAA,MAAM,SAAS,eAA2B,CAAC;AAC3C,QAAA,MAAM,WAAW,eAA6B,CAAC;AAE/C,MAAM,WAAW,WAAW;IAC1B,oEAAoE;IACpE,OAAO,CAAC,EAAE,MAAM,CAAC;CAClB;AAED;;;;;;GAMG;AACH,wBAAgB,IAAI,CAClB,MAAM,EAAE,MAAM,OAAO,CAAC;IAAE,OAAO,EAAE,OAAO,CAAA;CAAE,GAAG,OAAO,CAAC,EACrD,IAAI,CAAC,EAAE,WAAW,IAED,OAAO,QAAQ,EAAE,UAAU,qBAAqB,UAkDlE;AAED,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC"}

package/dist/element/lazy.js

@@ -0,0 +1,71 @@
+/**
+ * Loom — @lazy decorator (TC39 Stage 3)
+ *
+ * Stackable class decorator that defers module loading until first mount.
+ *
+ * ```ts
+ * @component("settings-page")
+ * @route("/settings")
+ * @lazy(() => import("./pages/settings"))
+ * class SettingsPage extends LoomElement {}
+ * ```
+ */
+const LAZY_LOADER = Symbol("loom:lazy:loader");
+const LAZY_OPTS = Symbol("loom:lazy:opts");
+const LAZY_LOADED = Symbol("loom:lazy:loaded");
+/**
+ * @lazy(loader, opts?) — Stackable class decorator
+ *
+ * Defers the real class body until first connectedCallback.
+ * The loader should return a dynamic import whose default export
+ * is the real component class.
+ */
+export function lazy(loader, opts) {
+    return function (value, _context) {
+        const ctor = value;
+        ctor[LAZY_LOADER] = loader;
+        ctor[LAZY_OPTS] = opts;
+        const origConnected = ctor.prototype.connectedCallback;
+        ctor.prototype.connectedCallback = async function () {
+            if (ctor[LAZY_LOADED]) {
+                origConnected?.call(this);
+                return;
+            }
+            if (opts?.loading) {
+                const loadingEl = document.createElement(opts.loading);
+                this.shadow.appendChild(loadingEl);
+            }
+            try {
+                const mod = await loader();
+                const RealClass = mod.default ?? mod;
+                const realProto = RealClass.prototype;
+                const descriptors = Object.getOwnPropertyDescriptors(realProto);
+                for (const [key, desc] of Object.entries(descriptors)) {
+                    if (key === "constructor")
+                        continue;
+                    Object.defineProperty(ctor.prototype, key, desc);
+                }
+                const staticDescs = Object.getOwnPropertyDescriptors(RealClass);
+                for (const [key, desc] of Object.entries(staticDescs)) {
+                    if (["prototype", "length", "name"].includes(key))
+                        continue;
+                    Object.defineProperty(ctor, key, desc);
+                }
+                ctor[LAZY_LOADED] = true;
+                this.shadow.innerHTML = "";
+                if (ctor.prototype.connectedCallback !== origConnected) {
+                    ctor.prototype.connectedCallback.call(this);
+                }
+                else {
+                    origConnected?.call(this);
+                }
+            }
+            catch (err) {
+                console.error("[Loom @lazy] Failed to load module:", err);
+                this.shadow.innerHTML = `<p style="color:red">Failed to load component</p>`;
+            }
+        };
+    };
+}
+export { LAZY_LOADER, LAZY_OPTS, LAZY_LOADED };
+//# sourceMappingURL=lazy.js.map

package/dist/element/lazy.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"lazy.js","sourceRoot":"","sources":["../../src/element/lazy.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;GAWG;AAEH,MAAM,WAAW,GAAG,MAAM,CAAC,kBAAkB,CAAC,CAAC;AAC/C,MAAM,SAAS,GAAG,MAAM,CAAC,gBAAgB,CAAC,CAAC;AAC3C,MAAM,WAAW,GAAG,MAAM,CAAC,kBAAkB,CAAC,CAAC;AAO/C;;;;;;GAMG;AACH,MAAM,UAAU,IAAI,CAClB,MAAqD,EACrD,IAAkB;IAElB,OAAO,UAAU,KAAe,EAAE,QAA+B;QAC/D,MAAM,IAAI,GAAG,KAAY,CAAC;QAC1B,IAAI,CAAC,WAAW,CAAC,GAAG,MAAM,CAAC;QAC3B,IAAI,CAAC,SAAS,CAAC,GAAG,IAAI,CAAC;QAEvB,MAAM,aAAa,GAAG,IAAI,CAAC,SAAS,CAAC,iBAAiB,CAAC;QAEvD,IAAI,CAAC,SAAS,CAAC,iBAAiB,GAAG,KAAK;YACtC,IAAI,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC;gBACtB,aAAa,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;gBAC1B,OAAO;YACT,CAAC;YAED,IAAI,IAAI,EAAE,OAAO,EAAE,CAAC;gBAClB,MAAM,SAAS,GAAG,QAAQ,CAAC,aAAa,CAAC,IAAI,CAAC,OAAO,CAAC,CAAC;gBACvD,IAAI,CAAC,MAAM,CAAC,WAAW,CAAC,SAAS,CAAC,CAAC;YACrC,CAAC;YAED,IAAI,CAAC;gBACH,MAAM,GAAG,GAAG,MAAM,MAAM,EAAE,CAAC;gBAC3B,MAAM,SAAS,GAAI,GAA8B,CAAC,OAAO,IAAI,GAAG,CAAC;gBAEjE,MAAM,SAAS,GAAI,SAAsB,CAAC,SAAS,CAAC;gBACpD,MAAM,WAAW,GAAG,MAAM,CAAC,yBAAyB,CAAC,SAAS,CAAC,CAAC;gBAEhE,KAAK,MAAM,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,EAAE,CAAC;oBACtD,IAAI,GAAG,KAAK,aAAa;wBAAE,SAAS;oBACpC,MAAM,CAAC,cAAc,CAAC,IAAI,CAAC,SAAS,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC;gBACnD,CAAC;gBAED,MAAM,WAAW,GAAG,MAAM,CAAC,yBAAyB,CAAC,SAAmB,CAAC,CAAC;gBAC1E,KAAK,MAAM,CAAC,GAAG,EAAE,IAAI,CAAC,IAAI,MAAM,CAAC,OAAO,CAAC,WAAW,CAAC,EAAE,CAAC;oBACtD,IAAI,CAAC,WAAW,EAAE,QAAQ,EAAE,MAAM,CAAC,CAAC,QAAQ,CAAC,GAAG,CAAC;wBAAE,SAAS;oBAC5D,MAAM,CAAC,cAAc,CAAC,IAAI,EAAE,GAAG,EAAE,IAAI,CAAC,CAAC;gBACzC,CAAC;gBAED,IAAI,CAAC,WAAW,CAAC,GAAG,IAAI,CAAC;gBACzB,IAAI,CAAC,MAAM,CAAC,SAAS,GAAG,EAAE,CAAC;gBAE3B,IAAI,IAAI,CAAC,SAAS,CAAC,iBAAiB,KAAK,aAAa,EAAE,CAAC;oBACvD,IAAI,CAAC,SAAS,CAAC,iBAAiB,CAAC,IAAI,CAAC,IAAI,CAAC,CAAC;gBAC9C,CAAC;qBAAM,CAAC;oBACN,aAAa,EAAE,IAAI,CAAC,IAAI,CAAC,CAAC;gBAC5B,CAAC;YACH,CAAC;YAAC,OAAO,GAAG,EAAE,CAAC;gBACb,OAAO,CAAC,KAAK,CAAC,qCAAqC,EAAE,GAAG,CAAC,CAAC;gBAC1D,IAAI,CAAC,MAAM,CAAC,SAAS,GAAG,mDAAmD,CAAC;YAC9E,CAAC;QACH,CAAC,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC;AAED,OAAO,EAAE,WAAW,EAAE,SAAS,EAAE,WAAW,EAAE,CAAC"}