@toyz/loom 0.11.1 → 0.12.0

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"}