@toyz/loom 0.11.2 → 0.12.1

package/README.md

@@ -23,6 +23,16 @@ Loom was born out of pure spite for boilerplate. What began as an ironic "what i
 
 It powers [placing.space](https://placing.space) in production — a real-time collaborative pixel canvas — so it's been battle-tested with WebSocket streams, thousands of DOM nodes, and zero framework overhead.
 
+## Why Loom?
+
+Most frameworks make you choose: **lightweight or batteries-included.** Loom doesn't.
+
+- **~20KB gzipped baseline** — smaller than React + ReactDOM alone, but includes a router, DI container, reactivity system, and lifecycle management out of the box.
+- **No virtual DOM** — JSX compiles to real DOM nodes. The morpher diffs the live DOM directly and patches in-place. No throwaway object trees, no GC pressure, no overhead on top of the work you were going to do anyway.
+- **Zero dependencies** — the entire framework is one `package.json` entry. No version conflicts, no transitive supply chain risk, no "which router do we pick" debates.
+- **Pay-as-you-go** — built-in components (`<loom-virtual>`, `<loom-canvas>`, `<loom-icon>`, `<loom-image>`) and systems (`@form`, `@api`, `CollectionStore`) are tree-shaken if you don't import them. You only ship what you use.
+- **Web standards** — built on custom elements, Shadow DOM, and TC39 Stage 3 decorators. When browsers ship native decorator support, your code gets faster for free.
+
 ## Features
 
 - **`@component` / `@styles`** — register custom elements and scoped styles in one line
@@ -101,11 +111,12 @@ class ClickCounter extends LoomElement {
 
 ## TSConfig
 
-Loom ships its own JSX runtime. Point your config at it:
+Loom uses TC39 decorators, which require `es2022` or later. Point your config at the Loom JSX runtime:
 
 ```json
 {
   "compilerOptions": {
+    "target": "es2022",
     "jsx": "react-jsx",
     "jsxImportSource": "@toyz/loom"
   }
@@ -118,6 +129,7 @@ For Vite:
 // vite.config.ts
 export default defineConfig({
   esbuild: {
+    target: "es2022",
     jsx: "automatic",
     jsxImportSource: "@toyz/loom",
   },

package/dist/decorators/events.d.ts

@@ -20,9 +20,16 @@ import { type Constructor } from "../bus";
  * @on(window, "resize")
  * onResize(e: Event) { ... }
  * ```
+ *
+ * Resolver — lazily resolve target at connect time (shadow DOM, @query, etc.):
+ * ```ts
+ * @on(el => el.shadow, "scroll")
+ * onShadowScroll(e: Event) { ... }
+ * ```
  */
 export declare function on<T extends LoomEvent>(type: Constructor<T>): (method: Function, context: ClassMethodDecoratorContext) => void;
 export declare function on(target: EventTarget, event: string): (method: Function, context: ClassMethodDecoratorContext) => void;
+export declare function on(resolver: (el: any) => EventTarget, event: string): (method: Function, context: ClassMethodDecoratorContext) => void;
 /**
  * Auto-broadcast to the bus.
  *

package/dist/decorators/events.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"events.d.ts","sourceRoot":"","sources":["../../src/decorators/events.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AACrC,OAAO,EAAO,KAAK,WAAW,EAAE,MAAM,QAAQ,CAAC;AAE/C;;;;;;;;;;;;;;GAcG;AACH,wBAAgB,EAAE,CAAC,CAAC,SAAS,SAAS,EAAE,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,2BAA2B,KAAK,IAAI,CAAC;AAChI,wBAAgB,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,2BAA2B,KAAK,IAAI,CAAC;AA6BzH;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,IAAI,CAAC,CAAC,SAAS,SAAS,EACtC,KAAK,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,EACtB,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,CAAC,IAwBrB,OAAO,QAAQ,GAAG,4BAA4B,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,SAAS,2BAA2B,GAAG,6BAA6B,oBApB7G,OAAO,WAAW,OAAO,EAAE,cA0BrD"}
+{"version":3,"file":"events.d.ts","sourceRoot":"","sources":["../../src/decorators/events.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AACrC,OAAO,EAAO,KAAK,WAAW,EAAE,MAAM,QAAQ,CAAC;AAE/C;;;;;;;;;;;;;;;;;;;;GAoBG;AACH,wBAAgB,EAAE,CAAC,CAAC,SAAS,SAAS,EAAE,IAAI,EAAE,WAAW,CAAC,CAAC,CAAC,GAAG,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,2BAA2B,KAAK,IAAI,CAAC;AAChI,wBAAgB,EAAE,CAAC,MAAM,EAAE,WAAW,EAAE,KAAK,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,2BAA2B,KAAK,IAAI,CAAC;AACzH,wBAAgB,EAAE,CAAC,QAAQ,EAAE,CAAC,EAAE,EAAE,GAAG,KAAK,WAAW,EAAE,KAAK,EAAE,MAAM,GAAG,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,2BAA2B,KAAK,IAAI,CAAC;AAiCxI;;;;;;;;;;;;;;;;;GAiBG;AACH,wBAAgB,IAAI,CAAC,CAAC,SAAS,SAAS,EACtC,KAAK,CAAC,EAAE,WAAW,CAAC,CAAC,CAAC,EACtB,OAAO,CAAC,EAAE,CAAC,GAAG,EAAE,OAAO,KAAK,CAAC,IAwBrB,OAAO,QAAQ,GAAG,4BAA4B,CAAC,GAAG,EAAE,GAAG,CAAC,EAAE,SAAS,2BAA2B,GAAG,6BAA6B,oBApB7G,OAAO,WAAW,OAAO,EAAE,cA0BrD"}

package/dist/decorators/events.js

@@ -25,9 +25,13 @@ export function on(typeOrTarget, event) {
                 this[CONNECT_HOOKS] = [];
             this[CONNECT_HOOKS].push((el) => {
                 if (event !== undefined) {
+                    // Resolve target: arrow/function resolver has no .prototype, class constructors do
+                    const target = typeof typeOrTarget === "function" && !typeOrTarget.prototype
+                        ? typeOrTarget(el)
+                        : typeOrTarget;
                     const fn = (e) => method.call(el, e);
-                    typeOrTarget.addEventListener(event, fn);
-                    return () => typeOrTarget.removeEventListener(event, fn);
+                    target.addEventListener(event, fn);
+                    return () => target.removeEventListener(event, fn);
                 }
                 else {
                     return bus.on(typeOrTarget, (e) => method.call(el, e));

package/dist/decorators/events.js.map

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

package/dist/element/canvas.d.ts

@@ -0,0 +1,42 @@
+/**
+ * Loom — Canvas Element
+ *
+ * Built-in `<loom-canvas>` web component that wraps a `<canvas>`
+ * with loom-keep, auto-resize via @observer, and per-frame
+ * draw callbacks through Loom's centralized RenderLoop.
+ *
+ * Usage:
+ *   <loom-canvas draw={(ctx, dt, t) => {
+ *     ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+ *     ctx.fillRect(x, y, 20, 20);
+ *   }} />
+ *
+ * The draw callback receives (CanvasRenderingContext2D, deltaTime, timestamp).
+ * Set autoResize={false} and width/height props for fixed-size canvases.
+ */
+import { LoomElement } from "./element";
+export type DrawCallback = (ctx: CanvasRenderingContext2D, dt: number, t: number) => void;
+export declare class LoomCanvas extends LoomElement {
+    /** Fixed width in CSS pixels (ignored when autoResize is true) */
+    accessor width: number;
+    /** Fixed height in CSS pixels (ignored when autoResize is true) */
+    accessor height: number;
+    /** When true, canvas auto-sizes to match host element bounds */
+    accessor autoResize: boolean;
+    /** Per-frame draw callback: (ctx, deltaTime, timestamp) => void */
+    accessor draw: DrawCallback | null;
+    accessor canvasEl: HTMLCanvasElement;
+    private _ctx;
+    /** Cached 2D rendering context */
+    get ctx(): CanvasRenderingContext2D;
+    /** Reference to the raw <canvas> element */
+    get canvas(): HTMLCanvasElement;
+    update(): Node;
+    private onResize;
+    /** Clear the full canvas */
+    clear(): void;
+    private tick;
+    /** Block morph after initial skeleton */
+    shouldUpdate(): boolean;
+}
+//# sourceMappingURL=canvas.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"canvas.d.ts","sourceRoot":"","sources":["../../src/element/canvas.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AAoBxC,MAAM,MAAM,YAAY,GAAG,CACzB,GAAG,EAAE,wBAAwB,EAC7B,EAAE,EAAE,MAAM,EACV,CAAC,EAAE,MAAM,KACN,IAAI,CAAC;AAEV,qBAEa,UAAW,SAAQ,WAAW;IAIzC,kEAAkE;IAC5D,QAAQ,CAAC,KAAK,SAAK;IAEzB,mEAAmE;IAC7D,QAAQ,CAAC,MAAM,SAAK;IAE1B,gEAAgE;IAC1D,QAAQ,CAAC,UAAU,UAAQ;IAEjC,mEAAmE;IAC5C,QAAQ,CAAC,IAAI,EAAE,YAAY,GAAG,IAAI,CAAQ;IAKjE,QAAQ,CAAC,QAAQ,EAAG,iBAAiB,CAAC;IAItC,OAAO,CAAC,IAAI,CAAyC;IAErD,kCAAkC;IAClC,IAAI,GAAG,IAAI,wBAAwB,CAKlC;IAED,4CAA4C;IAC5C,IAAI,MAAM,IAAI,iBAAiB,CAE9B;IAID,MAAM,IAAI,IAAI;IAad,OAAO,CAAC,QAAQ;IAShB,4BAA4B;IAC5B,KAAK;IAOL,OAAO,CAAC,IAAI;IAMZ,yCAAyC;IACzC,YAAY,IAAI,OAAO;CAGxB"}

package/dist/element/canvas.js

@@ -0,0 +1,187 @@
+/**
+ * Loom — Canvas Element
+ *
+ * Built-in `<loom-canvas>` web component that wraps a `<canvas>`
+ * with loom-keep, auto-resize via @observer, and per-frame
+ * draw callbacks through Loom's centralized RenderLoop.
+ *
+ * Usage:
+ *   <loom-canvas draw={(ctx, dt, t) => {
+ *     ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height);
+ *     ctx.fillRect(x, y, 20, 20);
+ *   }} />
+ *
+ * The draw callback receives (CanvasRenderingContext2D, deltaTime, timestamp).
+ * Set autoResize={false} and width/height props for fixed-size canvases.
+ */
+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";
+    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;
+};
+import { LoomElement } from "./element";
+import { component, query, styles } from "./decorators";
+import { prop } from "../store/decorators";
+import { css } from "../css";
+import { animationFrame } from "./timing";
+import { event } from "./events";
+import { observer } from "./observers";
+const canvasStyles = css `
+  :host {
+    display: block;
+    position: relative;
+  }
+  canvas {
+    display: block;
+    width: 100%;
+    height: 100%;
+  }
+`;
+let LoomCanvas = (() => {
+    let _classDecorators = [component("loom-canvas"), styles(canvasStyles)];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = LoomElement;
+    let _instanceExtraInitializers = [];
+    let _width_decorators;
+    let _width_initializers = [];
+    let _width_extraInitializers = [];
+    let _height_decorators;
+    let _height_initializers = [];
+    let _height_extraInitializers = [];
+    let _autoResize_decorators;
+    let _autoResize_initializers = [];
+    let _autoResize_extraInitializers = [];
+    let _draw_decorators;
+    let _draw_initializers = [];
+    let _draw_extraInitializers = [];
+    let _canvasEl_decorators;
+    let _canvasEl_initializers = [];
+    let _canvasEl_extraInitializers = [];
+    let _onResize_decorators;
+    let _tick_decorators;
+    var LoomCanvas = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _width_decorators = [prop];
+            _height_decorators = [prop];
+            _autoResize_decorators = [prop];
+            _draw_decorators = [event()];
+            _canvasEl_decorators = [query("canvas")];
+            _onResize_decorators = [observer("resize")];
+            _tick_decorators = [animationFrame];
+            __esDecorate(this, null, _width_decorators, { kind: "accessor", name: "width", static: false, private: false, access: { has: obj => "width" in obj, get: obj => obj.width, set: (obj, value) => { obj.width = value; } }, metadata: _metadata }, _width_initializers, _width_extraInitializers);
+            __esDecorate(this, null, _height_decorators, { kind: "accessor", name: "height", static: false, private: false, access: { has: obj => "height" in obj, get: obj => obj.height, set: (obj, value) => { obj.height = value; } }, metadata: _metadata }, _height_initializers, _height_extraInitializers);
+            __esDecorate(this, null, _autoResize_decorators, { kind: "accessor", name: "autoResize", static: false, private: false, access: { has: obj => "autoResize" in obj, get: obj => obj.autoResize, set: (obj, value) => { obj.autoResize = value; } }, metadata: _metadata }, _autoResize_initializers, _autoResize_extraInitializers);
+            __esDecorate(this, null, _draw_decorators, { kind: "accessor", name: "draw", static: false, private: false, access: { has: obj => "draw" in obj, get: obj => obj.draw, set: (obj, value) => { obj.draw = value; } }, metadata: _metadata }, _draw_initializers, _draw_extraInitializers);
+            __esDecorate(this, null, _canvasEl_decorators, { kind: "accessor", name: "canvasEl", static: false, private: false, access: { has: obj => "canvasEl" in obj, get: obj => obj.canvasEl, set: (obj, value) => { obj.canvasEl = value; } }, metadata: _metadata }, _canvasEl_initializers, _canvasEl_extraInitializers);
+            __esDecorate(this, null, _onResize_decorators, { kind: "method", name: "onResize", static: false, private: false, access: { has: obj => "onResize" in obj, get: obj => obj.onResize }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(this, null, _tick_decorators, { kind: "method", name: "tick", static: false, private: false, access: { has: obj => "tick" in obj, get: obj => obj.tick }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            LoomCanvas = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        #width_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _width_initializers, 0));
+        // ── Public props ──
+        /** Fixed width in CSS pixels (ignored when autoResize is true) */
+        get width() { return this.#width_accessor_storage; }
+        set width(value) { this.#width_accessor_storage = value; }
+        #height_accessor_storage = (__runInitializers(this, _width_extraInitializers), __runInitializers(this, _height_initializers, 0));
+        /** Fixed height in CSS pixels (ignored when autoResize is true) */
+        get height() { return this.#height_accessor_storage; }
+        set height(value) { this.#height_accessor_storage = value; }
+        #autoResize_accessor_storage = (__runInitializers(this, _height_extraInitializers), __runInitializers(this, _autoResize_initializers, true));
+        /** When true, canvas auto-sizes to match host element bounds */
+        get autoResize() { return this.#autoResize_accessor_storage; }
+        set autoResize(value) { this.#autoResize_accessor_storage = value; }
+        #draw_accessor_storage = (__runInitializers(this, _autoResize_extraInitializers), __runInitializers(this, _draw_initializers, null));
+        /** Per-frame draw callback: (ctx, deltaTime, timestamp) => void */
+        get draw() { return this.#draw_accessor_storage; }
+        set draw(value) { this.#draw_accessor_storage = value; }
+        #canvasEl_accessor_storage = (__runInitializers(this, _draw_extraInitializers), __runInitializers(this, _canvasEl_initializers, void 0));
+        // ── DOM refs ──
+        get canvasEl() { return this.#canvasEl_accessor_storage; }
+        set canvasEl(value) { this.#canvasEl_accessor_storage = value; }
+        // ── Internal ──
+        _ctx = (__runInitializers(this, _canvasEl_extraInitializers), null);
+        /** Cached 2D rendering context */
+        get ctx() {
+            if (!this._ctx) {
+                this._ctx = this.canvasEl.getContext("2d");
+            }
+            return this._ctx;
+        }
+        /** Reference to the raw <canvas> element */
+        get canvas() {
+            return this.canvasEl;
+        }
+        // ── Lifecycle ──
+        update() {
+            const c = document.createElement("canvas");
+            c.setAttribute("loom-keep", "");
+            if (!this.autoResize && this.width && this.height) {
+                c.width = this.width;
+                c.height = this.height;
+            }
+            return c;
+        }
+        onResize(entry) {
+            if (!this.autoResize)
+                return;
+            const { width, height } = entry.contentRect;
+            const dpr = window.devicePixelRatio || 1;
+            this.canvasEl.width = Math.round(width * dpr);
+            this.canvasEl.height = Math.round(height * dpr);
+            this.ctx.scale(dpr, dpr);
+        }
+        /** Clear the full canvas */
+        clear() {
+            this.ctx.clearRect(0, 0, this.canvasEl.width, this.canvasEl.height);
+        }
+        // ── Render loop ──
+        tick(dt, t) {
+            if (this.draw) {
+                this.draw(this.ctx, dt, t);
+            }
+        }
+        /** Block morph after initial skeleton */
+        shouldUpdate() {
+            return !this.canvasEl;
+        }
+    };
+    return LoomCanvas = _classThis;
+})();
+export { LoomCanvas };
+//# sourceMappingURL=canvas.js.map

package/dist/element/canvas.js.map

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

package/dist/element/events.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Loom — @event<T> decorator
+ *
+ * Marks an auto-accessor as an event callback prop.
+ * When assigned, stores the callback AND dispatches a composed
+ * CustomEvent so external listeners work across shadow DOM.
+ *
+ * ```ts
+ * @event<DrawCallback>() accessor draw: DrawCallback | null;
+ *
+ * // Invoke in your render loop:
+ * this.draw?.(ctx, dt, t);
+ * ```
+ *
+ * Consumers use it naturally in JSX:
+ * ```tsx
+ * <loom-canvas draw={(ctx, dt, t) => { ... }} />
+ * ```
+ *
+ * External listeners also work:
+ * ```ts
+ * el.addEventListener("draw", (e: CustomEvent) => ...);
+ * ```
+ */
+/**
+ * Decorator for typed event callback props.
+ *
+ * - Stores the callback as a JS property (JSX sets it via property assignment)
+ * - Dispatches a composed CustomEvent on invocation for cross-shadow-DOM listening
+ */
+export declare function event<T extends (...args: any[]) => void>(): <This extends HTMLElement>(_target: ClassAccessorDecoratorTarget<This, T | null>, context: ClassAccessorDecoratorContext<This, T | null>) => ClassAccessorDecoratorResult<This, T | null>;
+//# sourceMappingURL=events.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"events.d.ts","sourceRoot":"","sources":["../../src/element/events.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAIH;;;;;GAKG;AACH,wBAAgB,KAAK,CAAC,CAAC,SAAS,CAAC,GAAG,IAAI,EAAE,GAAG,EAAE,KAAK,IAAI,MAC9C,IAAI,SAAS,WAAW,EAC9B,SAAS,4BAA4B,CAAC,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC,EACrD,SAAS,6BAA6B,CAAC,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC,KACrD,4BAA4B,CAAC,IAAI,EAAE,CAAC,GAAG,IAAI,CAAC,CAgBhD"}

package/dist/element/events.js

@@ -0,0 +1,48 @@
+/**
+ * Loom — @event<T> decorator
+ *
+ * Marks an auto-accessor as an event callback prop.
+ * When assigned, stores the callback AND dispatches a composed
+ * CustomEvent so external listeners work across shadow DOM.
+ *
+ * ```ts
+ * @event<DrawCallback>() accessor draw: DrawCallback | null;
+ *
+ * // Invoke in your render loop:
+ * this.draw?.(ctx, dt, t);
+ * ```
+ *
+ * Consumers use it naturally in JSX:
+ * ```tsx
+ * <loom-canvas draw={(ctx, dt, t) => { ... }} />
+ * ```
+ *
+ * External listeners also work:
+ * ```ts
+ * el.addEventListener("draw", (e: CustomEvent) => ...);
+ * ```
+ */
+/**
+ * Decorator for typed event callback props.
+ *
+ * - Stores the callback as a JS property (JSX sets it via property assignment)
+ * - Dispatches a composed CustomEvent on invocation for cross-shadow-DOM listening
+ */
+export function event() {
+    return (_target, context) => {
+        const eventName = String(context.name);
+        const storage = new WeakMap();
+        return {
+            init() {
+                return null;
+            },
+            get() {
+                return storage.get(this) ?? null;
+            },
+            set(value) {
+                storage.set(this, value);
+            },
+        };
+    };
+}
+//# sourceMappingURL=events.js.map

package/dist/element/events.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"events.js","sourceRoot":"","sources":["../../src/element/events.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAIH;;;;;GAKG;AACH,MAAM,UAAU,KAAK;IACnB,OAAO,CACL,OAAqD,EACrD,OAAsD,EACR,EAAE;QAChD,MAAM,SAAS,GAAG,MAAM,CAAC,OAAO,CAAC,IAAI,CAAC,CAAC;QACvC,MAAM,OAAO,GAAG,IAAI,OAAO,EAAkB,CAAC;QAE9C,OAAO;YACL,IAAI;gBACF,OAAO,IAAI,CAAC;YACd,CAAC;YACD,GAAG;gBACD,OAAO,OAAO,CAAC,GAAG,CAAC,IAAI,CAAC,IAAI,IAAI,CAAC;YACnC,CAAC;YACD,GAAG,CAAa,KAAe;gBAC7B,OAAO,CAAC,GAAG,CAAC,IAAI,EAAE,KAAK,CAAC,CAAC;YAC3B,CAAC;SACF,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC"}

package/dist/element/image.d.ts

@@ -0,0 +1,47 @@
+/**
+ * Loom — Image Element
+ *
+ * Built-in `<loom-image>` web component with:
+ *  - Lazy loading via @observer("intersection")
+ *  - In-memory image cache (static Map) — repeated URLs are instant
+ *  - Smooth fade-in on load
+ *  - Customizable placeholder (slot or default shimmer)
+ *
+ * Usage:
+ *   <loom-image src="/photo.jpg" alt="Description" />
+ *   <loom-image src="/hero.png" width={800} height={400} />
+ *
+ * Custom placeholder:
+ *   <loom-image src="/photo.jpg">
+ *     <div slot="placeholder" class="my-skeleton">Loading...</div>
+ *   </loom-image>
+ */
+import { LoomElement } from "./element";
+export declare class LoomImage extends LoomElement {
+    /** Image source URL */
+    accessor src: string;
+    /** Alt text for accessibility */
+    accessor alt: string;
+    /** Fixed width in CSS pixels (optional) */
+    accessor width: number;
+    /** Fixed height in CSS pixels (optional) */
+    accessor height: number;
+    /** Object-fit mode for the image */
+    accessor fit: string;
+    private _loaded;
+    private _visible;
+    accessor imgEl: HTMLImageElement;
+    accessor placeholderEl: HTMLDivElement;
+    private onIntersect;
+    private loadImage;
+    private applyImage;
+    /** Preload images into the cache */
+    static preload(...urls: string[]): Promise<void[]>;
+    /** Clear the image cache (all or specific URL) */
+    static clearCache(url?: string): void;
+    /** Check if a URL is cached */
+    static isCached(url: string): boolean;
+    update(): Node[];
+    shouldUpdate(): boolean;
+}
+//# sourceMappingURL=image.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"image.d.ts","sourceRoot":"","sources":["../../src/element/image.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AA+DxC,qBAEa,SAAU,SAAQ,WAAW;IAIxC,uBAAuB;IACjB,QAAQ,CAAC,GAAG,SAAM;IAExB,iCAAiC;IAC3B,QAAQ,CAAC,GAAG,SAAM;IAExB,2CAA2C;IACrC,QAAQ,CAAC,KAAK,SAAK;IAEzB,4CAA4C;IACtC,QAAQ,CAAC,MAAM,SAAK;IAE1B,oCAAoC;IAC9B,QAAQ,CAAC,GAAG,EAAE,MAAM,CAAW;IAIrC,OAAO,CAAC,OAAO,CAAS;IACxB,OAAO,CAAC,QAAQ,CAAS;IAKzB,QAAQ,CAAC,KAAK,EAAG,gBAAgB,CAAC;IAGlC,QAAQ,CAAC,aAAa,EAAG,cAAc,CAAC;IAKxC,OAAO,CAAC,WAAW;IASnB,OAAO,CAAC,SAAS;IAuBjB,OAAO,CAAC,UAAU;IAkBlB,oCAAoC;IACpC,MAAM,CAAC,OAAO,CAAC,GAAG,IAAI,EAAE,MAAM,EAAE,GAAG,OAAO,CAAC,IAAI,EAAE,CAAC;IAYlD,kDAAkD;IAClD,MAAM,CAAC,UAAU,CAAC,GAAG,CAAC,EAAE,MAAM;IAK9B,+BAA+B;IAC/B,MAAM,CAAC,QAAQ,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO;IAMrC,MAAM,IAAI,IAAI,EAAE;IAgChB,YAAY,IAAI,OAAO;CAGxB"}

package/dist/element/image.js

@@ -0,0 +1,310 @@
+/**
+ * Loom — Image Element
+ *
+ * Built-in `<loom-image>` web component with:
+ *  - Lazy loading via @observer("intersection")
+ *  - In-memory image cache (static Map) — repeated URLs are instant
+ *  - Smooth fade-in on load
+ *  - Customizable placeholder (slot or default shimmer)
+ *
+ * Usage:
+ *   <loom-image src="/photo.jpg" alt="Description" />
+ *   <loom-image src="/hero.png" width={800} height={400} />
+ *
+ * Custom placeholder:
+ *   <loom-image src="/photo.jpg">
+ *     <div slot="placeholder" class="my-skeleton">Loading...</div>
+ *   </loom-image>
+ */
+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";
+    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;
+};
+import { LoomElement } from "./element";
+import { component, query, styles } from "./decorators";
+import { prop } from "../store/decorators";
+import { css } from "../css";
+import { observer } from "./observers";
+// ── Static image cache ──
+const imageCache = new Map();
+const imageStyles = css `
+  :host {
+    display: inline-block;
+    position: relative;
+    overflow: hidden;
+    line-height: 0;
+  }
+
+  .placeholder {
+    position: absolute;
+    inset: 0;
+    border-radius: inherit;
+    z-index: 1;
+    transition: opacity 0.3s ease;
+  }
+
+  .placeholder.hidden {
+    opacity: 0;
+    pointer-events: none;
+  }
+
+  .default-skeleton {
+    position: absolute;
+    inset: 0;
+    background: linear-gradient(
+      90deg,
+      rgba(255,255,255,0.04) 25%,
+      rgba(255,255,255,0.08) 50%,
+      rgba(255,255,255,0.04) 75%
+    );
+    background-size: 200% 100%;
+    animation: shimmer 1.5s ease-in-out infinite;
+    border-radius: inherit;
+  }
+
+  @keyframes shimmer {
+    0% { background-position: 200% 0; }
+    100% { background-position: -200% 0; }
+  }
+
+  img {
+    display: block;
+    width: 100%;
+    height: 100%;
+    object-fit: cover;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+  }
+
+  img.loaded {
+    opacity: 1;
+  }
+`;
+let LoomImage = (() => {
+    let _classDecorators = [component("loom-image"), styles(imageStyles)];
+    let _classDescriptor;
+    let _classExtraInitializers = [];
+    let _classThis;
+    let _classSuper = LoomElement;
+    let _instanceExtraInitializers = [];
+    let _src_decorators;
+    let _src_initializers = [];
+    let _src_extraInitializers = [];
+    let _alt_decorators;
+    let _alt_initializers = [];
+    let _alt_extraInitializers = [];
+    let _width_decorators;
+    let _width_initializers = [];
+    let _width_extraInitializers = [];
+    let _height_decorators;
+    let _height_initializers = [];
+    let _height_extraInitializers = [];
+    let _fit_decorators;
+    let _fit_initializers = [];
+    let _fit_extraInitializers = [];
+    let _imgEl_decorators;
+    let _imgEl_initializers = [];
+    let _imgEl_extraInitializers = [];
+    let _placeholderEl_decorators;
+    let _placeholderEl_initializers = [];
+    let _placeholderEl_extraInitializers = [];
+    let _onIntersect_decorators;
+    var LoomImage = class extends _classSuper {
+        static { _classThis = this; }
+        static {
+            const _metadata = typeof Symbol === "function" && Symbol.metadata ? Object.create(_classSuper[Symbol.metadata] ?? null) : void 0;
+            _src_decorators = [prop];
+            _alt_decorators = [prop];
+            _width_decorators = [prop];
+            _height_decorators = [prop];
+            _fit_decorators = [prop];
+            _imgEl_decorators = [query("img")];
+            _placeholderEl_decorators = [query(".placeholder")];
+            _onIntersect_decorators = [observer("intersection", { threshold: 0.01, rootMargin: "200px" })];
+            __esDecorate(this, null, _src_decorators, { kind: "accessor", name: "src", static: false, private: false, access: { has: obj => "src" in obj, get: obj => obj.src, set: (obj, value) => { obj.src = value; } }, metadata: _metadata }, _src_initializers, _src_extraInitializers);
+            __esDecorate(this, null, _alt_decorators, { kind: "accessor", name: "alt", static: false, private: false, access: { has: obj => "alt" in obj, get: obj => obj.alt, set: (obj, value) => { obj.alt = value; } }, metadata: _metadata }, _alt_initializers, _alt_extraInitializers);
+            __esDecorate(this, null, _width_decorators, { kind: "accessor", name: "width", static: false, private: false, access: { has: obj => "width" in obj, get: obj => obj.width, set: (obj, value) => { obj.width = value; } }, metadata: _metadata }, _width_initializers, _width_extraInitializers);
+            __esDecorate(this, null, _height_decorators, { kind: "accessor", name: "height", static: false, private: false, access: { has: obj => "height" in obj, get: obj => obj.height, set: (obj, value) => { obj.height = value; } }, metadata: _metadata }, _height_initializers, _height_extraInitializers);
+            __esDecorate(this, null, _fit_decorators, { kind: "accessor", name: "fit", static: false, private: false, access: { has: obj => "fit" in obj, get: obj => obj.fit, set: (obj, value) => { obj.fit = value; } }, metadata: _metadata }, _fit_initializers, _fit_extraInitializers);
+            __esDecorate(this, null, _imgEl_decorators, { kind: "accessor", name: "imgEl", static: false, private: false, access: { has: obj => "imgEl" in obj, get: obj => obj.imgEl, set: (obj, value) => { obj.imgEl = value; } }, metadata: _metadata }, _imgEl_initializers, _imgEl_extraInitializers);
+            __esDecorate(this, null, _placeholderEl_decorators, { kind: "accessor", name: "placeholderEl", static: false, private: false, access: { has: obj => "placeholderEl" in obj, get: obj => obj.placeholderEl, set: (obj, value) => { obj.placeholderEl = value; } }, metadata: _metadata }, _placeholderEl_initializers, _placeholderEl_extraInitializers);
+            __esDecorate(this, null, _onIntersect_decorators, { kind: "method", name: "onIntersect", static: false, private: false, access: { has: obj => "onIntersect" in obj, get: obj => obj.onIntersect }, metadata: _metadata }, null, _instanceExtraInitializers);
+            __esDecorate(null, _classDescriptor = { value: _classThis }, _classDecorators, { kind: "class", name: _classThis.name, metadata: _metadata }, null, _classExtraInitializers);
+            LoomImage = _classThis = _classDescriptor.value;
+            if (_metadata) Object.defineProperty(_classThis, Symbol.metadata, { enumerable: true, configurable: true, writable: true, value: _metadata });
+            __runInitializers(_classThis, _classExtraInitializers);
+        }
+        #src_accessor_storage = (__runInitializers(this, _instanceExtraInitializers), __runInitializers(this, _src_initializers, ""));
+        // ── Public props ──
+        /** Image source URL */
+        get src() { return this.#src_accessor_storage; }
+        set src(value) { this.#src_accessor_storage = value; }
+        #alt_accessor_storage = (__runInitializers(this, _src_extraInitializers), __runInitializers(this, _alt_initializers, ""));
+        /** Alt text for accessibility */
+        get alt() { return this.#alt_accessor_storage; }
+        set alt(value) { this.#alt_accessor_storage = value; }
+        #width_accessor_storage = (__runInitializers(this, _alt_extraInitializers), __runInitializers(this, _width_initializers, 0));
+        /** Fixed width in CSS pixels (optional) */
+        get width() { return this.#width_accessor_storage; }
+        set width(value) { this.#width_accessor_storage = value; }
+        #height_accessor_storage = (__runInitializers(this, _width_extraInitializers), __runInitializers(this, _height_initializers, 0));
+        /** Fixed height in CSS pixels (optional) */
+        get height() { return this.#height_accessor_storage; }
+        set height(value) { this.#height_accessor_storage = value; }
+        #fit_accessor_storage = (__runInitializers(this, _height_extraInitializers), __runInitializers(this, _fit_initializers, "cover"));
+        /** Object-fit mode for the image */
+        get fit() { return this.#fit_accessor_storage; }
+        set fit(value) { this.#fit_accessor_storage = value; }
+        // ── Internal state ──
+        _loaded = (__runInitializers(this, _fit_extraInitializers), false);
+        _visible = false;
+        #imgEl_accessor_storage = __runInitializers(this, _imgEl_initializers, void 0);
+        // ── DOM refs ──
+        get imgEl() { return this.#imgEl_accessor_storage; }
+        set imgEl(value) { this.#imgEl_accessor_storage = value; }
+        #placeholderEl_accessor_storage = (__runInitializers(this, _imgEl_extraInitializers), __runInitializers(this, _placeholderEl_initializers, void 0));
+        get placeholderEl() { return this.#placeholderEl_accessor_storage; }
+        set placeholderEl(value) { this.#placeholderEl_accessor_storage = value; }
+        // ── Lazy loading via @observer ──
+        onIntersect(entry) {
+            if (entry.isIntersecting && !this._visible) {
+                this._visible = true;
+                this.loadImage();
+            }
+        }
+        // ── Image loading with cache ──
+        loadImage() {
+            if (!this.src)
+                return;
+            // Check cache first
+            const cached = imageCache.get(this.src);
+            if (cached) {
+                this.applyImage(cached.src);
+                return;
+            }
+            // Load and cache
+            const img = new Image();
+            img.onload = () => {
+                imageCache.set(this.src, img);
+                this.applyImage(img.src);
+            };
+            img.onerror = () => {
+                // Still hide placeholder on error
+                if (this.placeholderEl)
+                    this.placeholderEl.classList.add("hidden");
+            };
+            img.src = this.src;
+        }
+        applyImage(src) {
+            if (!this.imgEl)
+                return;
+            this.imgEl.src = src;
+            this.imgEl.onload = () => {
+                this._loaded = true;
+                this.imgEl.classList.add("loaded");
+                if (this.placeholderEl)
+                    this.placeholderEl.classList.add("hidden");
+            };
+            // If cached, image may already be complete
+            if (this.imgEl.complete) {
+                this._loaded = true;
+                this.imgEl.classList.add("loaded");
+                if (this.placeholderEl)
+                    this.placeholderEl.classList.add("hidden");
+            }
+        }
+        // ── Static cache API ──
+        /** Preload images into the cache */
+        static preload(...urls) {
+            return Promise.all(urls.map(url => {
+                if (imageCache.has(url))
+                    return Promise.resolve();
+                return new Promise((resolve, reject) => {
+                    const img = new Image();
+                    img.onload = () => { imageCache.set(url, img); resolve(); };
+                    img.onerror = reject;
+                    img.src = url;
+                });
+            }));
+        }
+        /** Clear the image cache (all or specific URL) */
+        static clearCache(url) {
+            if (url)
+                imageCache.delete(url);
+            else
+                imageCache.clear();
+        }
+        /** Check if a URL is cached */
+        static isCached(url) {
+            return imageCache.has(url);
+        }
+        // ── Render ──
+        update() {
+            const hostStyle = {};
+            if (this.width)
+                hostStyle.width = `${this.width}px`;
+            if (this.height)
+                hostStyle.height = `${this.height}px`;
+            if (Object.keys(hostStyle).length) {
+                Object.assign(this.style, hostStyle);
+            }
+            const img = document.createElement("img");
+            img.setAttribute("loom-keep", "");
+            img.alt = this.alt;
+            if (this.fit)
+                img.style.objectFit = this.fit;
+            // Placeholder wrapper: user-slotted content or default shimmer
+            const placeholder = document.createElement("div");
+            placeholder.className = "placeholder";
+            placeholder.setAttribute("loom-keep", "");
+            const slot = document.createElement("slot");
+            slot.name = "placeholder";
+            // Default skeleton shown when no slotted content
+            const defaultSkeleton = document.createElement("div");
+            defaultSkeleton.className = "default-skeleton";
+            slot.appendChild(defaultSkeleton);
+            placeholder.appendChild(slot);
+            return [placeholder, img];
+        }
+        shouldUpdate() {
+            return !this.imgEl;
+        }
+        constructor() {
+            super(...arguments);
+            __runInitializers(this, _placeholderEl_extraInitializers);
+        }
+    };
+    return LoomImage = _classThis;
+})();
+export { LoomImage };
+//# sourceMappingURL=image.js.map

package/dist/element/image.js.map

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

package/dist/element/index.d.ts

@@ -6,6 +6,8 @@
 export { LoomElement } from "./element";
 export { component, query, queryAll, styles } from "./decorators";
 export { catch_, suspend, mount, unmount } from "./lifecycle";
+export { event } from "./events";
+export { observer } from "./observers";
 export { interval, timeout, debounce, throttle, animationFrame } from "./timing";
 export { form } from "./form";
 export type { FormState, FormSchema, FieldSchema } from "./form";

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;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"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/element/index.ts"],"names":[],"mappings":"AAAA;;;;GAIG;AAGH,OAAO,EAAE,WAAW,EAAE,MAAM,WAAW,CAAC;AASxC,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,KAAK,EAAE,MAAM,UAAU,CAAC;AAGjC,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAGvC,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

@@ -8,10 +8,16 @@ 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"
+// e.g. import { LoomCanvas } from "@toyz/loom/element/canvas"
+// e.g. import { LoomImage } from "@toyz/loom/element/image"
 // Element decorators
 export { component, query, queryAll, styles } from "./decorators";
 // Lifecycle decorators
 export { catch_, suspend, mount, unmount } from "./lifecycle";
+// Event decorator
+export { event } from "./events";
+// Observer decorator
+export { observer } from "./observers";
 // Timing decorators
 export { interval, timeout, debounce, throttle, animationFrame } from "./timing";
 // Form decorator

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;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"}
+{"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;AAC1D,8DAA8D;AAC9D,4DAA4D;AAE5D,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,kBAAkB;AAClB,OAAO,EAAE,KAAK,EAAE,MAAM,UAAU,CAAC;AAEjC,qBAAqB;AACrB,OAAO,EAAE,QAAQ,EAAE,MAAM,aAAa,CAAC;AAEvC,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/observers.d.ts

@@ -0,0 +1,28 @@
+/**
+ * Loom — @observer decorator
+ *
+ * Auto-managed DOM observers with lifecycle cleanup.
+ * Creates the observer on connect, observes `this`, disconnects on unmount.
+ *
+ * ```ts
+ * @observer("resize")
+ * onResize(entry: ResizeObserverEntry) {
+ *   const { width, height } = entry.contentRect;
+ *   // ...
+ * }
+ *
+ * @observer("intersection", { threshold: 0.5 })
+ * onVisible(entry: IntersectionObserverEntry) {
+ *   if (entry.isIntersecting) this.load();
+ * }
+ *
+ * @observer("mutation", { childList: true, subtree: true })
+ * onChildChange(record: MutationRecord) {
+ *   this.recount();
+ * }
+ * ```
+ */
+export declare function observer(type: "resize", options?: ResizeObserverOptions): (method: Function, context: ClassMethodDecoratorContext) => void;
+export declare function observer(type: "intersection", options?: IntersectionObserverInit): (method: Function, context: ClassMethodDecoratorContext) => void;
+export declare function observer(type: "mutation", options: MutationObserverInit): (method: Function, context: ClassMethodDecoratorContext) => void;
+//# sourceMappingURL=observers.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"observers.d.ts","sourceRoot":"","sources":["../../src/element/observers.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAMH,wBAAgB,QAAQ,CACtB,IAAI,EAAE,QAAQ,EACd,OAAO,CAAC,EAAE,qBAAqB,GAC9B,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,2BAA2B,KAAK,IAAI,CAAC;AAEpE,wBAAgB,QAAQ,CACtB,IAAI,EAAE,cAAc,EACpB,OAAO,CAAC,EAAE,wBAAwB,GACjC,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,2BAA2B,KAAK,IAAI,CAAC;AAEpE,wBAAgB,QAAQ,CACtB,IAAI,EAAE,UAAU,EAChB,OAAO,EAAE,oBAAoB,GAC5B,CAAC,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,2BAA2B,KAAK,IAAI,CAAC"}

package/dist/element/observers.js

@@ -0,0 +1,65 @@
+/**
+ * Loom — @observer decorator
+ *
+ * Auto-managed DOM observers with lifecycle cleanup.
+ * Creates the observer on connect, observes `this`, disconnects on unmount.
+ *
+ * ```ts
+ * @observer("resize")
+ * onResize(entry: ResizeObserverEntry) {
+ *   const { width, height } = entry.contentRect;
+ *   // ...
+ * }
+ *
+ * @observer("intersection", { threshold: 0.5 })
+ * onVisible(entry: IntersectionObserverEntry) {
+ *   if (entry.isIntersecting) this.load();
+ * }
+ *
+ * @observer("mutation", { childList: true, subtree: true })
+ * onChildChange(record: MutationRecord) {
+ *   this.recount();
+ * }
+ * ```
+ */
+import { CONNECT_HOOKS } from "../decorators/symbols";
+// ── Implementation ──
+export function observer(type, options) {
+    return (method, context) => {
+        context.addInitializer(function () {
+            if (!this[CONNECT_HOOKS])
+                this[CONNECT_HOOKS] = [];
+            this[CONNECT_HOOKS].push((el) => {
+                const callback = (entries) => {
+                    for (const entry of entries) {
+                        method.call(el, entry);
+                    }
+                };
+                let obs;
+                switch (type) {
+                    case "resize": {
+                        const ro = new ResizeObserver(callback);
+                        ro.observe(el, options);
+                        obs = ro;
+                        break;
+                    }
+                    case "intersection": {
+                        const io = new IntersectionObserver(callback, options);
+                        io.observe(el);
+                        obs = io;
+                        break;
+                    }
+                    case "mutation": {
+                        const mo = new MutationObserver(callback);
+                        mo.observe(el, options);
+                        obs = mo;
+                        break;
+                    }
+                }
+                // Return cleanup — runs on disconnectedCallback
+                return () => obs.disconnect();
+            });
+        });
+    };
+}
+//# sourceMappingURL=observers.js.map

package/dist/element/observers.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"observers.js","sourceRoot":"","sources":["../../src/element/observers.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AAEH,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAmBtD,uBAAuB;AAEvB,MAAM,UAAU,QAAQ,CACtB,IAA4C,EAC5C,OAAa;IAEb,OAAO,CAAC,MAAgB,EAAE,OAAoC,EAAE,EAAE;QAChE,OAAO,CAAC,cAAc,CAAC;YACrB,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC;gBAAE,IAAI,CAAC,aAAa,CAAC,GAAG,EAAE,CAAC;YAEnD,IAAI,CAAC,aAAa,CAAC,CAAC,IAAI,CAAC,CAAC,EAAe,EAAE,EAAE;gBAC3C,MAAM,QAAQ,GAAG,CAAC,OAAc,EAAE,EAAE;oBAClC,KAAK,MAAM,KAAK,IAAI,OAAO,EAAE,CAAC;wBAC5B,MAAM,CAAC,IAAI,CAAC,EAAE,EAAE,KAAK,CAAC,CAAC;oBACzB,CAAC;gBACH,CAAC,CAAC;gBAEF,IAAI,GAA2B,CAAC;gBAEhC,QAAQ,IAAI,EAAE,CAAC;oBACb,KAAK,QAAQ,CAAC,CAAC,CAAC;wBACd,MAAM,EAAE,GAAG,IAAI,cAAc,CAAC,QAAQ,CAAC,CAAC;wBACxC,EAAE,CAAC,OAAO,CAAC,EAAE,EAAE,OAAO,CAAC,CAAC;wBACxB,GAAG,GAAG,EAAE,CAAC;wBACT,MAAM;oBACR,CAAC;oBACD,KAAK,cAAc,CAAC,CAAC,CAAC;wBACpB,MAAM,EAAE,GAAG,IAAI,oBAAoB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;wBACvD,EAAE,CAAC,OAAO,CAAC,EAAE,CAAC,CAAC;wBACf,GAAG,GAAG,EAAE,CAAC;wBACT,MAAM;oBACR,CAAC;oBACD,KAAK,UAAU,CAAC,CAAC,CAAC;wBAChB,MAAM,EAAE,GAAG,IAAI,gBAAgB,CAAC,QAAQ,CAAC,CAAC;wBAC1C,EAAE,CAAC,OAAO,CAAC,EAAE,EAAE,OAAO,CAAC,CAAC;wBACxB,GAAG,GAAG,EAAE,CAAC;wBACT,MAAM;oBACR,CAAC;gBACH,CAAC;gBAED,gDAAgD;gBAChD,OAAO,GAAG,EAAE,CAAC,GAAG,CAAC,UAAU,EAAE,CAAC;YAChC,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;AACJ,CAAC"}

package/dist/index.d.ts

@@ -20,7 +20,7 @@ export type { Subscriber, Updater, Identifiable, StorageAdapter, StorageMedium,
 export { service, inject, factory } from "./di";
 /** @deprecated Use `@watch(Service)` or `@watch(Service, "prop")` instead. Will be removed in v1.0. */
 export { watch as watchService } from "./di";
-export { LoomElement, component, query, queryAll, styles, catch_, suspend, mount, unmount, interval, timeout, debounce, throttle, animationFrame, form, lazy, slot, transition, } from "./element";
+export { LoomElement, component, query, queryAll, styles, catch_, suspend, mount, unmount, event, observer, interval, timeout, debounce, throttle, animationFrame, form, lazy, slot, transition, } from "./element";
 export type { FormState, FormSchema, FieldSchema, LazyOptions, TransitionOptions } from "./element";
 export { transform, createTransform, typed, typedTransformer, toNumber, toBoolean, toDate, toJSON, toTrimmed, toInt, toFloat, } from "./transform";
 export type { TransformSchema } from "./transform";

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,YAAY,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAGrC,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC9C,YAAY,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAGlD,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,YAAY,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGtC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAGhC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAGpD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,YAAY,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAKhD,OAAO,EACL,QAAQ,EAAE,eAAe,EACzB,aAAa,EAAE,YAAY,EAAE,cAAc,EAAE,WAAW,EAAE,aAAa,EACvE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAC5C,KAAK,EACL,KAAK,GACN,MAAM,SAAS,CAAC;AACjB,YAAY,EACV,UAAU,EAAE,OAAO,EAAE,YAAY,EACjC,cAAc,EAAE,aAAa,EAAE,cAAc,GAC9C,MAAM,SAAS,CAAC;AAGjB,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,MAAM,CAAC;AAChD,uGAAuG;AACvG,OAAO,EAAE,KAAK,IAAI,YAAY,EAAE,MAAM,MAAM,CAAC;AAG7C,OAAO,EACL,WAAW,EACX,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAClC,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAC/B,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,cAAc,EACrD,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,GAC7B,MAAM,WAAW,CAAC;AACnB,YAAY,EAAE,SAAS,EAAE,UAAU,EAAE,WAAW,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAGpG,OAAO,EACL,SAAS,EAAE,eAAe,EAC1B,KAAK,EAAE,gBAAgB,EACvB,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,GAC/D,MAAM,aAAa,CAAC;AACrB,YAAY,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAGnD,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAGzD,OAAO,EACL,UAAU,EACV,YAAY,EACZ,KAAK,EACL,KAAK,EACL,KAAK,EACL,UAAU,EACV,MAAM,EACN,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,YAAY,GACb,MAAM,UAAU,CAAC;AAClB,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAG5F,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACzD,YAAY,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAG9E,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAGH,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,YAAY,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAGrC,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAC9C,YAAY,EAAE,WAAW,EAAE,OAAO,EAAE,MAAM,OAAO,CAAC;AAGlD,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAC5B,YAAY,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAGtC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAGhC,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAGpD,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAC3C,YAAY,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAKhD,OAAO,EACL,QAAQ,EAAE,eAAe,EACzB,aAAa,EAAE,YAAY,EAAE,cAAc,EAAE,WAAW,EAAE,aAAa,EACvE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAC5C,KAAK,EACL,KAAK,GACN,MAAM,SAAS,CAAC;AACjB,YAAY,EACV,UAAU,EAAE,OAAO,EAAE,YAAY,EACjC,cAAc,EAAE,aAAa,EAAE,cAAc,GAC9C,MAAM,SAAS,CAAC;AAGjB,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,MAAM,CAAC;AAChD,uGAAuG;AACvG,OAAO,EAAE,KAAK,IAAI,YAAY,EAAE,MAAM,MAAM,CAAC;AAG7C,OAAO,EACL,WAAW,EACX,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAClC,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAC/B,KAAK,EAAE,QAAQ,EACf,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,cAAc,EACrD,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,GAC7B,MAAM,WAAW,CAAC;AACnB,YAAY,EAAE,SAAS,EAAE,UAAU,EAAE,WAAW,EAAE,WAAW,EAAE,iBAAiB,EAAE,MAAM,WAAW,CAAC;AAGpG,OAAO,EACL,SAAS,EAAE,eAAe,EAC1B,KAAK,EAAE,gBAAgB,EACvB,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,GAC/D,MAAM,aAAa,CAAC;AACrB,YAAY,EAAE,eAAe,EAAE,MAAM,aAAa,CAAC;AAGnD,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAGzD,OAAO,EACL,UAAU,EACV,YAAY,EACZ,KAAK,EACL,KAAK,EACL,KAAK,EACL,UAAU,EACV,MAAM,EACN,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,YAAY,GACb,MAAM,UAAU,CAAC;AAClB,YAAY,EAAE,UAAU,EAAE,aAAa,EAAE,SAAS,EAAE,UAAU,EAAE,SAAS,EAAE,MAAM,UAAU,CAAC;AAG5F,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AACzD,YAAY,EAAE,MAAM,EAAE,QAAQ,EAAE,UAAU,EAAE,gBAAgB,EAAE,MAAM,SAAS,CAAC;AAG9E,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC"}

package/dist/index.js

@@ -25,7 +25,7 @@ export { service, inject, factory } from "./di";
 /** @deprecated Use `@watch(Service)` or `@watch(Service, "prop")` instead. Will be removed in v1.0. */
 export { watch as watchService } from "./di";
 // Element: base class, element decorators
-export { LoomElement, component, query, queryAll, styles, catch_, suspend, mount, unmount, interval, timeout, debounce, throttle, animationFrame, form, lazy, slot, transition, } from "./element";
+export { LoomElement, component, query, queryAll, styles, catch_, suspend, mount, unmount, event, observer, interval, timeout, debounce, throttle, animationFrame, form, lazy, slot, transition, } from "./element";
 // Transform: value transforms
 export { transform, createTransform, typed, typedTransformer, toNumber, toBoolean, toDate, toJSON, toTrimmed, toInt, toFloat, } from "./transform";
 // Decorators: event decorators + factory

package/dist/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,kBAAkB;AAClB,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5B,eAAe;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAG9C,MAAM;AACN,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5B,eAAe;AACf,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,wDAAwD;AACxD,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEpD,cAAc;AACd,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAG3C,0BAA0B;AAE1B,qCAAqC;AACrC,OAAO,EACL,QAAQ,EAAE,eAAe,EACzB,aAAa,EAAE,YAAY,EAAE,cAAc,EAAE,WAAW,EAAE,aAAa,EACvE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAC5C,KAAK,EACL,KAAK,GACN,MAAM,SAAS,CAAC;AAMjB,mCAAmC;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,MAAM,CAAC;AAChD,uGAAuG;AACvG,OAAO,EAAE,KAAK,IAAI,YAAY,EAAE,MAAM,MAAM,CAAC;AAE7C,0CAA0C;AAC1C,OAAO,EACL,WAAW,EACX,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAClC,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAC/B,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,cAAc,EACrD,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,GAC7B,MAAM,WAAW,CAAC;AAGnB,8BAA8B;AAC9B,OAAO,EACL,SAAS,EAAE,eAAe,EAC1B,KAAK,EAAE,gBAAgB,EACvB,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,GAC/D,MAAM,aAAa,CAAC;AAGrB,yCAAyC;AACzC,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAEzD,SAAS;AACT,OAAO,EACL,UAAU,EACV,YAAY,EACZ,KAAK,EACL,KAAK,EACL,KAAK,EACL,UAAU,EACV,MAAM,EACN,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,YAAY,GACb,MAAM,UAAU,CAAC;AAGlB,oDAAoD;AACpD,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAGzD,cAAc;AACd,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../src/index.ts"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,kBAAkB;AAClB,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5B,eAAe;AACf,OAAO,EAAE,SAAS,EAAE,MAAM,SAAS,CAAC;AACpC,OAAO,EAAE,QAAQ,EAAE,GAAG,EAAE,MAAM,EAAE,MAAM,OAAO,CAAC;AAG9C,MAAM;AACN,OAAO,EAAE,GAAG,EAAE,MAAM,OAAO,CAAC;AAG5B,eAAe;AACf,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,wDAAwD;AACxD,OAAO,EAAE,GAAG,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,eAAe,CAAC;AAEpD,cAAc;AACd,OAAO,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAG3C,0BAA0B;AAE1B,qCAAqC;AACrC,OAAO,EACL,QAAQ,EAAE,eAAe,EACzB,aAAa,EAAE,YAAY,EAAE,cAAc,EAAE,WAAW,EAAE,aAAa,EACvE,QAAQ,EAAE,IAAI,EAAE,QAAQ,EAAE,MAAM,EAAE,UAAU,EAC5C,KAAK,EACL,KAAK,GACN,MAAM,SAAS,CAAC;AAMjB,mCAAmC;AACnC,OAAO,EAAE,OAAO,EAAE,MAAM,EAAE,OAAO,EAAE,MAAM,MAAM,CAAC;AAChD,uGAAuG;AACvG,OAAO,EAAE,KAAK,IAAI,YAAY,EAAE,MAAM,MAAM,CAAC;AAE7C,0CAA0C;AAC1C,OAAO,EACL,WAAW,EACX,SAAS,EAAE,KAAK,EAAE,QAAQ,EAAE,MAAM,EAClC,MAAM,EAAE,OAAO,EAAE,KAAK,EAAE,OAAO,EAC/B,KAAK,EAAE,QAAQ,EACf,QAAQ,EAAE,OAAO,EAAE,QAAQ,EAAE,QAAQ,EAAE,cAAc,EACrD,IAAI,EAAE,IAAI,EAAE,IAAI,EAAE,UAAU,GAC7B,MAAM,WAAW,CAAC;AAGnB,8BAA8B;AAC9B,OAAO,EACL,SAAS,EAAE,eAAe,EAC1B,KAAK,EAAE,gBAAgB,EACvB,QAAQ,EAAE,SAAS,EAAE,MAAM,EAAE,MAAM,EAAE,SAAS,EAAE,KAAK,EAAE,OAAO,GAC/D,MAAM,aAAa,CAAC;AAGrB,yCAAyC;AACzC,OAAO,EAAE,EAAE,EAAE,IAAI,EAAE,eAAe,EAAE,MAAM,cAAc,CAAC;AAEzD,SAAS;AACT,OAAO,EACL,UAAU,EACV,YAAY,EACZ,KAAK,EACL,KAAK,EACL,KAAK,EACL,UAAU,EACV,MAAM,EACN,UAAU,EACV,QAAQ,EACR,QAAQ,EACR,WAAW,EACX,YAAY,EACZ,YAAY,GACb,MAAM,UAAU,CAAC;AAGlB,oDAAoD;AACpD,OAAO,EAAE,GAAG,EAAE,SAAS,EAAE,cAAc,EAAE,MAAM,SAAS,CAAC;AAGzD,cAAc;AACd,OAAO,EAAE,UAAU,EAAE,MAAM,UAAU,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toyz/loom",
-  "version": "0.11.2",
+  "version": "0.12.1",
   "type": "module",
   "description": "Decorator-driven web component framework with reactive state, DOM morphing, DI, and JSX",
   "license": "MIT",
@@ -59,6 +59,14 @@
       "types": "./dist/element/virtual.d.ts",
       "import": "./dist/element/virtual.js"
     },
+    "./element/canvas": {
+      "types": "./dist/element/canvas.d.ts",
+      "import": "./dist/element/canvas.js"
+    },
+    "./element/image": {
+      "types": "./dist/element/image.d.ts",
+      "import": "./dist/element/image.js"
+    },
     "./decorators": {
       "types": "./dist/decorators/index.d.ts",
       "import": "./dist/decorators/index.js"