@toyz/loom 0.17.3 → 0.17.4

package/dist/element/clipboard.d.ts

@@ -0,0 +1,25 @@
+/**
+ * Loom — @clipboard decorator
+ *
+ * Method decorator for declarative clipboard read/write.
+ *
+ * ```ts
+ * // Write: method returns the text to copy
+ * @clipboard("write")
+ * copyLink() { return this.shareUrl; }
+ *
+ * // Read: method receives pasted text as argument
+ * @clipboard("read")
+ * onPaste(text: string) { this.content = text; }
+ * ```
+ */
+type ClipboardMode = "read" | "write";
+/**
+ * @clipboard(mode) — Method decorator
+ *
+ * - `"write"`: Calling the method copies its return value to the clipboard.
+ * - `"read"`: Binds a `paste` event listener; the method receives the pasted text.
+ */
+export declare function clipboard(mode: ClipboardMode): (method: Function, context: ClassMethodDecoratorContext) => ((this: any, ...args: unknown[]) => any) | undefined;
+export {};
+//# sourceMappingURL=clipboard.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"clipboard.d.ts","sourceRoot":"","sources":["../../src/element/clipboard.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAIH,KAAK,aAAa,GAAG,MAAM,GAAG,OAAO,CAAC;AAEtC;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,IAAI,EAAE,aAAa,IAC1B,QAAQ,QAAQ,EAAE,SAAS,2BAA2B,aAG5C,GAAG,WAAW,OAAO,EAAE,sBAkCnD"}

package/dist/element/clipboard.js

@@ -0,0 +1,60 @@
+/**
+ * Loom — @clipboard decorator
+ *
+ * Method decorator for declarative clipboard read/write.
+ *
+ * ```ts
+ * // Write: method returns the text to copy
+ * @clipboard("write")
+ * copyLink() { return this.shareUrl; }
+ *
+ * // Read: method receives pasted text as argument
+ * @clipboard("read")
+ * onPaste(text: string) { this.content = text; }
+ * ```
+ */
+import { CONNECT_HOOKS } from "../decorators/symbols";
+/**
+ * @clipboard(mode) — Method decorator
+ *
+ * - `"write"`: Calling the method copies its return value to the clipboard.
+ * - `"read"`: Binds a `paste` event listener; the method receives the pasted text.
+ */
+export function clipboard(mode) {
+    return function (method, context) {
+        if (mode === "write") {
+            // Wrap the method — calling it copies its return value
+            return function (...args) {
+                const text = method.call(this, ...args);
+                if (text != null && navigator.clipboard) {
+                    navigator.clipboard.writeText(String(text)).catch(() => {
+                        // Fallback: legacy execCommand
+                        const ta = document.createElement("textarea");
+                        ta.value = String(text);
+                        ta.style.position = "fixed";
+                        ta.style.opacity = "0";
+                        document.body.appendChild(ta);
+                        ta.select();
+                        document.execCommand("copy");
+                        ta.remove();
+                    });
+                }
+                return text;
+            };
+        }
+        // mode === "read" — listen for paste events on the element
+        context.addInitializer(function () {
+            if (!this[CONNECT_HOOKS.key])
+                this[CONNECT_HOOKS.key] = [];
+            this[CONNECT_HOOKS.key].push((el) => {
+                const handler = (e) => {
+                    const text = e.clipboardData?.getData("text/plain") ?? "";
+                    method.call(el, text, e);
+                };
+                el.addEventListener("paste", handler);
+                return () => el.removeEventListener("paste", handler);
+            });
+        });
+    };
+}
+//# sourceMappingURL=clipboard.js.map

package/dist/element/clipboard.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"clipboard.js","sourceRoot":"","sources":["../../src/element/clipboard.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;GAcG;AAEH,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAItD;;;;;GAKG;AACH,MAAM,UAAU,SAAS,CAAC,IAAmB;IAC3C,OAAO,UAAU,MAAgB,EAAE,OAAoC;QACrE,IAAI,IAAI,KAAK,OAAO,EAAE,CAAC;YACrB,uDAAuD;YACvD,OAAO,UAAqB,GAAG,IAAe;gBAC5C,MAAM,IAAI,GAAG,MAAM,CAAC,IAAI,CAAC,IAAI,EAAE,GAAG,IAAI,CAAC,CAAC;gBACxC,IAAI,IAAI,IAAI,IAAI,IAAI,SAAS,CAAC,SAAS,EAAE,CAAC;oBACxC,SAAS,CAAC,SAAS,CAAC,SAAS,CAAC,MAAM,CAAC,IAAI,CAAC,CAAC,CAAC,KAAK,CAAC,GAAG,EAAE;wBACrD,+BAA+B;wBAC/B,MAAM,EAAE,GAAG,QAAQ,CAAC,aAAa,CAAC,UAAU,CAAC,CAAC;wBAC9C,EAAE,CAAC,KAAK,GAAG,MAAM,CAAC,IAAI,CAAC,CAAC;wBACxB,EAAE,CAAC,KAAK,CAAC,QAAQ,GAAG,OAAO,CAAC;wBAC5B,EAAE,CAAC,KAAK,CAAC,OAAO,GAAG,GAAG,CAAC;wBACvB,QAAQ,CAAC,IAAI,CAAC,WAAW,CAAC,EAAE,CAAC,CAAC;wBAC9B,EAAE,CAAC,MAAM,EAAE,CAAC;wBACZ,QAAQ,CAAC,WAAW,CAAC,MAAM,CAAC,CAAC;wBAC7B,EAAE,CAAC,MAAM,EAAE,CAAC;oBACd,CAAC,CAAC,CAAC;gBACL,CAAC;gBACD,OAAO,IAAI,CAAC;YACd,CAAC,CAAC;QACJ,CAAC;QAED,2DAA2D;QAC3D,OAAO,CAAC,cAAc,CAAC;YACrB,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC;gBAAE,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC;YAE3D,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,EAAe,EAAE,EAAE;gBAC/C,MAAM,OAAO,GAAG,CAAC,CAAiB,EAAE,EAAE;oBACpC,MAAM,IAAI,GAAG,CAAC,CAAC,aAAa,EAAE,OAAO,CAAC,YAAY,CAAC,IAAI,EAAE,CAAC;oBAC1D,MAAM,CAAC,IAAI,CAAC,EAAE,EAAE,IAAI,EAAE,CAAC,CAAC,CAAC;gBAC3B,CAAC,CAAC;gBAEF,EAAE,CAAC,gBAAgB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;gBACtC,OAAO,GAAG,EAAE,CAAC,EAAE,CAAC,mBAAmB,CAAC,OAAO,EAAE,OAAO,CAAC,CAAC;YACxD,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;IACL,CAAC,CAAC;AACJ,CAAC"}

package/dist/element/dnd.d.ts

@@ -0,0 +1,58 @@
+/**
+ * Loom — @draggable / @dropzone decorators
+ *
+ * Declarative HTML5 Drag and Drop API wrappers.
+ *
+ * ```ts
+ * // Make the component draggable — serializes data for transfer
+ * @draggable({ type: "card" })
+ * getDragData() { return JSON.stringify({ id: this.cardId }); }
+ *
+ * // Accept drops — receives transferred data
+ * @dropzone({ accept: "card" })
+ * onDrop(data: string) { this.items.push(JSON.parse(data)); }
+ *
+ * // With JSX overlay during drag-over
+ * @dropzone({ accept: "card", over: () => <div class="drop-hint">Drop here!</div> })
+ * onDrop(data: string) { ... }
+ * ```
+ */
+export interface DraggableOptions {
+    /** MIME-like type key for dataTransfer, default "text/plain" */
+    type?: string;
+    /** Drag effect, default "move" */
+    effect?: DataTransfer["effectAllowed"];
+}
+export interface DropzoneOptions {
+    /** MIME-like type key to accept, default "text/plain" */
+    accept?: string;
+    /** Drop effect, default "move" */
+    effect?: DataTransfer["dropEffect"];
+    /** CSS class to add when dragging over, default "drag-over" */
+    overClass?: string;
+    /**
+     * Optional JSX overlay rendered into the element's shadow DOM (or light DOM)
+     * during dragover. Removed on dragleave/drop. Accepts a function that returns
+     * a DOM node (JSX), or a string that creates a simple text overlay.
+     */
+    over?: (() => Node | string) | string;
+}
+/**
+ * @draggable(opts?) — Method decorator
+ *
+ * Makes the host element draggable. The decorated method returns the drag
+ * data string. Sets `draggable="true"`, wires `dragstart`/`dragend` events.
+ */
+export declare function draggable(opts?: DraggableOptions): (method: Function, context: ClassMethodDecoratorContext) => void;
+/**
+ * @dropzone(opts?) — Method decorator
+ *
+ * Makes the host element a drop target. The decorated method receives
+ * the transferred data string and the DragEvent. Wires `dragover`,
+ * `dragleave`, `drop` events with proper `preventDefault()`.
+ *
+ * When `opts.over` is provided, a JSX overlay is rendered into the
+ * element during dragover and removed on dragleave/drop.
+ */
+export declare function dropzone(opts?: DropzoneOptions): (method: Function, context: ClassMethodDecoratorContext) => void;
+//# sourceMappingURL=dnd.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"dnd.d.ts","sourceRoot":"","sources":["../../src/element/dnd.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;;GAkBG;AAIH,MAAM,WAAW,gBAAgB;IAC/B,gEAAgE;IAChE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,kCAAkC;IAClC,MAAM,CAAC,EAAE,YAAY,CAAC,eAAe,CAAC,CAAC;CACxC;AAED,MAAM,WAAW,eAAe;IAC9B,yDAAyD;IACzD,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,kCAAkC;IAClC,MAAM,CAAC,EAAE,YAAY,CAAC,YAAY,CAAC,CAAC;IACpC,+DAA+D;IAC/D,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB;;;;OAIG;IACH,IAAI,CAAC,EAAE,CAAC,MAAM,IAAI,GAAG,MAAM,CAAC,GAAG,MAAM,CAAC;CACvC;AAED;;;;;GAKG;AACH,wBAAgB,SAAS,CAAC,IAAI,CAAC,EAAE,gBAAgB,IAI9B,QAAQ,QAAQ,EAAE,SAAS,2BAA2B,UA6BxE;AAED;;;;;;;;;GASG;AACH,wBAAgB,QAAQ,CAAC,IAAI,CAAC,EAAE,eAAe,IAM5B,QAAQ,QAAQ,EAAE,SAAS,2BAA2B,UA+DxE"}

package/dist/element/dnd.js

@@ -0,0 +1,132 @@
+/**
+ * Loom — @draggable / @dropzone decorators
+ *
+ * Declarative HTML5 Drag and Drop API wrappers.
+ *
+ * ```ts
+ * // Make the component draggable — serializes data for transfer
+ * @draggable({ type: "card" })
+ * getDragData() { return JSON.stringify({ id: this.cardId }); }
+ *
+ * // Accept drops — receives transferred data
+ * @dropzone({ accept: "card" })
+ * onDrop(data: string) { this.items.push(JSON.parse(data)); }
+ *
+ * // With JSX overlay during drag-over
+ * @dropzone({ accept: "card", over: () => <div class="drop-hint">Drop here!</div> })
+ * onDrop(data: string) { ... }
+ * ```
+ */
+import { CONNECT_HOOKS } from "../decorators/symbols";
+/**
+ * @draggable(opts?) — Method decorator
+ *
+ * Makes the host element draggable. The decorated method returns the drag
+ * data string. Sets `draggable="true"`, wires `dragstart`/`dragend` events.
+ */
+export function draggable(opts) {
+    const mimeType = opts?.type ?? "text/plain";
+    const effect = opts?.effect ?? "move";
+    return function (method, context) {
+        context.addInitializer(function () {
+            if (!this[CONNECT_HOOKS.key])
+                this[CONNECT_HOOKS.key] = [];
+            this[CONNECT_HOOKS.key].push((el) => {
+                el.draggable = true;
+                const onStart = (e) => {
+                    const data = method.call(el);
+                    e.dataTransfer?.setData(mimeType, String(data ?? ""));
+                    if (e.dataTransfer)
+                        e.dataTransfer.effectAllowed = effect;
+                    el.classList.add("dragging");
+                };
+                const onEnd = () => {
+                    el.classList.remove("dragging");
+                };
+                el.addEventListener("dragstart", onStart);
+                el.addEventListener("dragend", onEnd);
+                return () => {
+                    el.removeEventListener("dragstart", onStart);
+                    el.removeEventListener("dragend", onEnd);
+                    el.draggable = false;
+                };
+            });
+        });
+    };
+}
+/**
+ * @dropzone(opts?) — Method decorator
+ *
+ * Makes the host element a drop target. The decorated method receives
+ * the transferred data string and the DragEvent. Wires `dragover`,
+ * `dragleave`, `drop` events with proper `preventDefault()`.
+ *
+ * When `opts.over` is provided, a JSX overlay is rendered into the
+ * element during dragover and removed on dragleave/drop.
+ */
+export function dropzone(opts) {
+    const mimeType = opts?.accept ?? "text/plain";
+    const dropEffect = opts?.effect ?? "move";
+    const overClass = opts?.overClass ?? "drag-over";
+    const overFn = opts?.over;
+    return function (method, context) {
+        context.addInitializer(function () {
+            if (!this[CONNECT_HOOKS.key])
+                this[CONNECT_HOOKS.key] = [];
+            this[CONNECT_HOOKS.key].push((el) => {
+                let overlayEl = null;
+                const showOverlay = () => {
+                    if (!overFn || overlayEl)
+                        return;
+                    const content = typeof overFn === "function" ? overFn() : overFn;
+                    if (content instanceof Node) {
+                        overlayEl = content;
+                    }
+                    else {
+                        const div = document.createElement("div");
+                        div.setAttribute("data-loom-dropzone-overlay", "");
+                        div.textContent = String(content);
+                        overlayEl = div;
+                    }
+                    // Append to shadow root if available, otherwise light DOM
+                    const root = el.shadowRoot ?? el;
+                    root.appendChild(overlayEl);
+                };
+                const hideOverlay = () => {
+                    if (overlayEl) {
+                        overlayEl.parentNode?.removeChild(overlayEl);
+                        overlayEl = null;
+                    }
+                };
+                const onOver = (e) => {
+                    e.preventDefault();
+                    if (e.dataTransfer)
+                        e.dataTransfer.dropEffect = dropEffect;
+                    el.classList.add(overClass);
+                    showOverlay();
+                };
+                const onLeave = () => {
+                    el.classList.remove(overClass);
+                    hideOverlay();
+                };
+                const onDrop = (e) => {
+                    e.preventDefault();
+                    el.classList.remove(overClass);
+                    hideOverlay();
+                    const data = e.dataTransfer?.getData(mimeType) ?? "";
+                    method.call(el, data, e);
+                };
+                el.addEventListener("dragover", onOver);
+                el.addEventListener("dragleave", onLeave);
+                el.addEventListener("drop", onDrop);
+                return () => {
+                    el.removeEventListener("dragover", onOver);
+                    el.removeEventListener("dragleave", onLeave);
+                    el.removeEventListener("drop", onDrop);
+                    hideOverlay();
+                };
+            });
+        });
+    };
+}
+//# sourceMappingURL=dnd.js.map

package/dist/element/dnd.js.map

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

package/dist/element/fullscreen.d.ts

@@ -0,0 +1,29 @@
+/**
+ * Loom — @fullscreen decorator
+ *
+ * Accessor decorator that binds a boolean field to the Fullscreen API.
+ * Setting to `true` calls `requestFullscreen()`, `false` calls `exitFullscreen()`.
+ * Listens for `fullscreenchange` events to keep the field in sync.
+ *
+ * ```ts
+ * @fullscreen()
+ * accessor isFullscreen = false;
+ *
+ * // With options
+ * @fullscreen({ navigationUI: "hide" })
+ * accessor isFullscreen = false;
+ * ```
+ */
+export interface FullscreenOptions {
+    /** Navigation UI preference for requestFullscreen */
+    navigationUI?: "auto" | "hide" | "show";
+}
+/**
+ * @fullscreen(opts?) — Accessor decorator
+ *
+ * Binds a boolean accessor to the Fullscreen API.
+ * Toggling the field enters/exits fullscreen. The field stays in sync
+ * with external fullscreen changes (e.g., user presses Escape).
+ */
+export declare function fullscreen(opts?: FullscreenOptions): (_target: ClassAccessorDecoratorTarget<any, boolean>, context: ClassAccessorDecoratorContext) => ClassAccessorDecoratorResult<any, boolean>;
+//# sourceMappingURL=fullscreen.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"fullscreen.d.ts","sourceRoot":"","sources":["../../src/element/fullscreen.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAIH,MAAM,WAAW,iBAAiB;IAChC,qDAAqD;IACrD,YAAY,CAAC,EAAE,MAAM,GAAG,MAAM,GAAG,MAAM,CAAC;CACzC;AAED;;;;;;GAMG;AACH,wBAAgB,UAAU,CAAC,IAAI,CAAC,EAAE,iBAAiB,IAE/C,SAAS,4BAA4B,CAAC,GAAG,EAAE,OAAO,CAAC,EACnD,SAAS,6BAA6B,KACrC,4BAA4B,CAAC,GAAG,EAAE,OAAO,CAAC,CAoD9C"}

package/dist/element/fullscreen.js

@@ -0,0 +1,73 @@
+/**
+ * Loom — @fullscreen decorator
+ *
+ * Accessor decorator that binds a boolean field to the Fullscreen API.
+ * Setting to `true` calls `requestFullscreen()`, `false` calls `exitFullscreen()`.
+ * Listens for `fullscreenchange` events to keep the field in sync.
+ *
+ * ```ts
+ * @fullscreen()
+ * accessor isFullscreen = false;
+ *
+ * // With options
+ * @fullscreen({ navigationUI: "hide" })
+ * accessor isFullscreen = false;
+ * ```
+ */
+import { CONNECT_HOOKS } from "../decorators/symbols";
+/**
+ * @fullscreen(opts?) — Accessor decorator
+ *
+ * Binds a boolean accessor to the Fullscreen API.
+ * Toggling the field enters/exits fullscreen. The field stays in sync
+ * with external fullscreen changes (e.g., user presses Escape).
+ */
+export function fullscreen(opts) {
+    return function (_target, context) {
+        const fieldName = context.name;
+        const storageKey = `__fs_${fieldName}`;
+        context.addInitializer(function () {
+            if (!this[CONNECT_HOOKS.key])
+                this[CONNECT_HOOKS.key] = [];
+            this[CONNECT_HOOKS.key].push((el) => {
+                // Sync field when fullscreen changes externally (e.g., Escape key)
+                const handler = () => {
+                    const isFs = document.fullscreenElement === el;
+                    this[storageKey] = isFs;
+                    this.scheduleUpdate?.();
+                };
+                document.addEventListener("fullscreenchange", handler);
+                return () => {
+                    document.removeEventListener("fullscreenchange", handler);
+                    // Exit fullscreen if component disconnects while fullscreen
+                    if (document.fullscreenElement === el) {
+                        document.exitFullscreen?.();
+                    }
+                };
+            });
+        });
+        return {
+            init(_value) {
+                return false;
+            },
+            set(value) {
+                const prev = this[storageKey];
+                this[storageKey] = value;
+                if (value && !prev) {
+                    // Entering fullscreen
+                    this.requestFullscreen?.(opts);
+                }
+                else if (!value && prev) {
+                    // Exiting fullscreen
+                    if (document.fullscreenElement === this) {
+                        document.exitFullscreen?.();
+                    }
+                }
+            },
+            get() {
+                return this[storageKey] ?? false;
+            },
+        };
+    };
+}
+//# sourceMappingURL=fullscreen.js.map

package/dist/element/fullscreen.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"fullscreen.js","sourceRoot":"","sources":["../../src/element/fullscreen.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;GAeG;AAEH,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAOtD;;;;;;GAMG;AACH,MAAM,UAAU,UAAU,CAAC,IAAwB;IACjD,OAAO,UACL,OAAmD,EACnD,OAAsC;QAEtC,MAAM,SAAS,GAAG,OAAO,CAAC,IAAc,CAAC;QACzC,MAAM,UAAU,GAAG,QAAQ,SAAS,EAAE,CAAC;QAEvC,OAAO,CAAC,cAAc,CAAC;YACrB,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC;gBAAE,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC;YAE3D,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,EAAe,EAAE,EAAE;gBAC/C,mEAAmE;gBACnE,MAAM,OAAO,GAAG,GAAG,EAAE;oBACnB,MAAM,IAAI,GAAG,QAAQ,CAAC,iBAAiB,KAAK,EAAE,CAAC;oBAC/C,IAAI,CAAC,UAAU,CAAC,GAAG,IAAI,CAAC;oBACxB,IAAI,CAAC,cAAc,EAAE,EAAE,CAAC;gBAC1B,CAAC,CAAC;gBAEF,QAAQ,CAAC,gBAAgB,CAAC,kBAAkB,EAAE,OAAO,CAAC,CAAC;gBAEvD,OAAO,GAAG,EAAE;oBACV,QAAQ,CAAC,mBAAmB,CAAC,kBAAkB,EAAE,OAAO,CAAC,CAAC;oBAC1D,4DAA4D;oBAC5D,IAAI,QAAQ,CAAC,iBAAiB,KAAK,EAAE,EAAE,CAAC;wBACtC,QAAQ,CAAC,cAAc,EAAE,EAAE,CAAC;oBAC9B,CAAC;gBACH,CAAC,CAAC;YACJ,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;QAEH,OAAO;YACL,IAAI,CAAC,MAAe;gBAClB,OAAO,KAAK,CAAC;YACf,CAAC;YAED,GAAG,CAAY,KAAc;gBAC3B,MAAM,IAAI,GAAG,IAAI,CAAC,UAAU,CAAC,CAAC;gBAC9B,IAAI,CAAC,UAAU,CAAC,GAAG,KAAK,CAAC;gBAEzB,IAAI,KAAK,IAAI,CAAC,IAAI,EAAE,CAAC;oBACnB,sBAAsB;oBACrB,IAAoB,CAAC,iBAAiB,EAAE,CAAC,IAAI,CAAC,CAAC;gBAClD,CAAC;qBAAM,IAAI,CAAC,KAAK,IAAI,IAAI,EAAE,CAAC;oBAC1B,qBAAqB;oBACrB,IAAI,QAAQ,CAAC,iBAAiB,KAAK,IAAI,EAAE,CAAC;wBACxC,QAAQ,CAAC,cAAc,EAAE,EAAE,CAAC;oBAC9B,CAAC;gBACH,CAAC;YACH,CAAC;YAED,GAAG;gBACD,OAAO,IAAI,CAAC,UAAU,CAAC,IAAI,KAAK,CAAC;YACnC,CAAC;SACF,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC"}

package/dist/element/index.d.ts

@@ -25,4 +25,10 @@ export { provide, consume, ContextRequestEvent } from "./context";
 export type { ContextCallback } from "./context";
 export { portal } from "./portal";
 export type { PortalOptions } from "./portal";
+export { media } from "./media";
+export { fullscreen } from "./fullscreen";
+export type { FullscreenOptions } from "./fullscreen";
+export { clipboard } from "./clipboard";
+export { draggable, dropzone } from "./dnd";
+export type { DraggableOptions, DropzoneOptions } from "./dnd";
 //# 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;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,KAAK,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAG7G,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;AAC1C,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAG3D,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAG/B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAGtD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAG3D,OAAO,EAAE,GAAG,EAAE,YAAY,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/E,YAAY,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAG5D,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAClE,YAAY,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAGjD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,aAAa,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;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,KAAK,qBAAqB,EAAE,MAAM,UAAU,CAAC;AAG7G,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;AAC1C,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAG3D,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAG/B,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAGtD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,UAAU,CAAC;AAG3D,OAAO,EAAE,GAAG,EAAE,YAAY,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAC/E,YAAY,EAAE,QAAQ,EAAE,QAAQ,EAAE,UAAU,EAAE,MAAM,OAAO,CAAC;AAG5D,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAClE,YAAY,EAAE,eAAe,EAAE,MAAM,WAAW,CAAC;AAGjD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAClC,YAAY,EAAE,aAAa,EAAE,MAAM,UAAU,CAAC;AAG9C,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAGhC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAC1C,YAAY,EAAE,iBAAiB,EAAE,MAAM,cAAc,CAAC;AAGtD,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAGxC,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC;AAC5C,YAAY,EAAE,gBAAgB,EAAE,eAAe,EAAE,MAAM,OAAO,CAAC"}

package/dist/element/index.js

@@ -37,4 +37,12 @@ export { log, LogTransport, ConsoleTransport, resetLogTransport } from "./log";
 export { provide, consume, ContextRequestEvent } from "./context";
 // Portal: teleport content to external DOM targets
 export { portal } from "./portal";
+// Media: reactive media query binding
+export { media } from "./media";
+// Fullscreen: toggle fullscreen API
+export { fullscreen } from "./fullscreen";
+// Clipboard: declarative copy/paste
+export { clipboard } from "./clipboard";
+// Drag & Drop: declarative DnD
+export { draggable, dropzone } from "./dnd";
 //# 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;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,EAA8B,MAAM,UAAU,CAAC;AAE7G,iBAAiB;AACjB,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAG9B,yBAAyB;AACzB,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE3D,iBAAiB;AACjB,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE/B,uBAAuB;AACvB,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG1C,mBAAmB;AACnB,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAGlC,4BAA4B;AAC5B,OAAO,EAAE,GAAG,EAAE,YAAY,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG/E,oDAAoD;AACpD,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAGlE,mDAAmD;AACnD,OAAO,EAAE,MAAM,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;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,EAA8B,MAAM,UAAU,CAAC;AAE7G,iBAAiB;AACjB,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAG9B,yBAAyB;AACzB,OAAO,EAAE,IAAI,EAAE,MAAM,QAAQ,CAAC;AAE9B,OAAO,EAAE,aAAa,EAAE,WAAW,EAAE,MAAM,eAAe,CAAC;AAE3D,iBAAiB;AACjB,OAAO,EAAE,IAAI,EAAE,MAAM,SAAS,CAAC;AAE/B,uBAAuB;AACvB,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG1C,mBAAmB;AACnB,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAGlC,4BAA4B;AAC5B,OAAO,EAAE,GAAG,EAAE,YAAY,EAAE,gBAAgB,EAAE,iBAAiB,EAAE,MAAM,OAAO,CAAC;AAG/E,oDAAoD;AACpD,OAAO,EAAE,OAAO,EAAE,OAAO,EAAE,mBAAmB,EAAE,MAAM,WAAW,CAAC;AAGlE,mDAAmD;AACnD,OAAO,EAAE,MAAM,EAAE,MAAM,UAAU,CAAC;AAGlC,sCAAsC;AACtC,OAAO,EAAE,KAAK,EAAE,MAAM,SAAS,CAAC;AAEhC,oCAAoC;AACpC,OAAO,EAAE,UAAU,EAAE,MAAM,cAAc,CAAC;AAG1C,oCAAoC;AACpC,OAAO,EAAE,SAAS,EAAE,MAAM,aAAa,CAAC;AAExC,+BAA+B;AAC/B,OAAO,EAAE,SAAS,EAAE,QAAQ,EAAE,MAAM,OAAO,CAAC"}

package/dist/element/media.d.ts

@@ -0,0 +1,27 @@
+/**
+ * Loom — @media decorator
+ *
+ * Reactive media-query binding for accessor fields.
+ * Creates a `matchMedia` listener on connect, cleans up on disconnect.
+ * The field auto-updates when the media query match state changes.
+ *
+ * ```ts
+ * @media("(max-width: 768px)")
+ * accessor isMobile = false;
+ *
+ * @media("(prefers-color-scheme: dark)")
+ * accessor prefersDark = false;
+ *
+ * @media("(min-width: 1024px) and (orientation: landscape)")
+ * accessor isDesktop = false;
+ * ```
+ */
+/**
+ * @media(query) — Accessor decorator
+ *
+ * Binds a boolean accessor to a CSS media query via `matchMedia`.
+ * The field is set to `true`/`false` on connect and updated reactively
+ * whenever the match state changes. Cleanup is automatic on disconnect.
+ */
+export declare function media(query: string): (_target: ClassAccessorDecoratorTarget<any, boolean>, context: ClassAccessorDecoratorContext) => ClassAccessorDecoratorResult<any, boolean>;
+//# sourceMappingURL=media.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"media.d.ts","sourceRoot":"","sources":["../../src/element/media.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAIH;;;;;;GAMG;AACH,wBAAgB,KAAK,CAAC,KAAK,EAAE,MAAM,IAE/B,SAAS,4BAA4B,CAAC,GAAG,EAAE,OAAO,CAAC,EACnD,SAAS,6BAA6B,KACrC,4BAA4B,CAAC,GAAG,EAAE,OAAO,CAAC,CAyC9C"}

package/dist/element/media.js

@@ -0,0 +1,62 @@
+/**
+ * Loom — @media decorator
+ *
+ * Reactive media-query binding for accessor fields.
+ * Creates a `matchMedia` listener on connect, cleans up on disconnect.
+ * The field auto-updates when the media query match state changes.
+ *
+ * ```ts
+ * @media("(max-width: 768px)")
+ * accessor isMobile = false;
+ *
+ * @media("(prefers-color-scheme: dark)")
+ * accessor prefersDark = false;
+ *
+ * @media("(min-width: 1024px) and (orientation: landscape)")
+ * accessor isDesktop = false;
+ * ```
+ */
+import { CONNECT_HOOKS } from "../decorators/symbols";
+/**
+ * @media(query) — Accessor decorator
+ *
+ * Binds a boolean accessor to a CSS media query via `matchMedia`.
+ * The field is set to `true`/`false` on connect and updated reactively
+ * whenever the match state changes. Cleanup is automatic on disconnect.
+ */
+export function media(query) {
+    return function (_target, context) {
+        const fieldName = context.name;
+        const storageKey = `__media_${fieldName}`;
+        context.addInitializer(function () {
+            if (!this[CONNECT_HOOKS.key])
+                this[CONNECT_HOOKS.key] = [];
+            this[CONNECT_HOOKS.key].push((_el) => {
+                const mql = window.matchMedia(query);
+                // Set initial value from current match state
+                this[storageKey] = mql.matches;
+                this.scheduleUpdate?.();
+                // Listen for changes
+                const handler = (e) => {
+                    this[storageKey] = e.matches;
+                    this.scheduleUpdate?.();
+                };
+                mql.addEventListener("change", handler);
+                // Return cleanup — runs on disconnectedCallback
+                return () => mql.removeEventListener("change", handler);
+            });
+        });
+        return {
+            init(_value) {
+                return false; // Will be set from matchMedia on connect
+            },
+            set(value) {
+                this[storageKey] = value;
+            },
+            get() {
+                return this[storageKey] ?? false;
+            },
+        };
+    };
+}
+//# sourceMappingURL=media.js.map

package/dist/element/media.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"media.js","sourceRoot":"","sources":["../../src/element/media.ts"],"names":[],"mappings":"AAAA;;;;;;;;;;;;;;;;;GAiBG;AAEH,OAAO,EAAE,aAAa,EAAE,MAAM,uBAAuB,CAAC;AAEtD;;;;;;GAMG;AACH,MAAM,UAAU,KAAK,CAAC,KAAa;IACjC,OAAO,UACL,OAAmD,EACnD,OAAsC;QAEtC,MAAM,SAAS,GAAG,OAAO,CAAC,IAAc,CAAC;QACzC,MAAM,UAAU,GAAG,WAAW,SAAS,EAAE,CAAC;QAE1C,OAAO,CAAC,cAAc,CAAC;YACrB,IAAI,CAAC,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC;gBAAE,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,GAAG,EAAE,CAAC;YAE3D,IAAI,CAAC,aAAa,CAAC,GAAG,CAAC,CAAC,IAAI,CAAC,CAAC,GAAgB,EAAE,EAAE;gBAChD,MAAM,GAAG,GAAG,MAAM,CAAC,UAAU,CAAC,KAAK,CAAC,CAAC;gBAErC,6CAA6C;gBAC7C,IAAI,CAAC,UAAU,CAAC,GAAG,GAAG,CAAC,OAAO,CAAC;gBAC/B,IAAI,CAAC,cAAc,EAAE,EAAE,CAAC;gBAExB,qBAAqB;gBACrB,MAAM,OAAO,GAAG,CAAC,CAAsB,EAAE,EAAE;oBACzC,IAAI,CAAC,UAAU,CAAC,GAAG,CAAC,CAAC,OAAO,CAAC;oBAC7B,IAAI,CAAC,cAAc,EAAE,EAAE,CAAC;gBAC1B,CAAC,CAAC;gBAEF,GAAG,CAAC,gBAAgB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;gBAExC,gDAAgD;gBAChD,OAAO,GAAG,EAAE,CAAC,GAAG,CAAC,mBAAmB,CAAC,QAAQ,EAAE,OAAO,CAAC,CAAC;YAC1D,CAAC,CAAC,CAAC;QACL,CAAC,CAAC,CAAC;QAEH,OAAO;YACL,IAAI,CAAC,MAAe;gBAClB,OAAO,KAAK,CAAC,CAAC,yCAAyC;YACzD,CAAC;YAED,GAAG,CAAY,KAAc;gBAC3B,IAAI,CAAC,UAAU,CAAC,GAAG,KAAK,CAAC;YAC3B,CAAC;YAED,GAAG;gBACD,OAAO,IAAI,CAAC,UAAU,CAAC,IAAI,KAAK,CAAC;YACnC,CAAC;SACF,CAAC;IACJ,CAAC,CAAC;AACJ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@toyz/loom",
-  "version": "0.17.3",
+  "version": "0.17.4",
   "type": "module",
   "description": "Decorator-driven web component framework with reactive state, DOM morphing, DI, and JSX",
   "license": "MIT",