@proto-labs-inc/rig-core 0.1.1 → 0.2.1

package/dist/frame-tools-loader.d.ts

@@ -0,0 +1,2 @@
+/** Stable bootstrap only. Selection behavior is deployed with the Frame app. */
+export declare function loadFrameTools(frameOrigin?: string): () => void;

package/dist/frame-tools-loader.js

@@ -0,0 +1,47 @@
+/** Stable bootstrap only. Selection behavior is deployed with the Frame app. */
+export function loadFrameTools(frameOrigin) {
+    if (window.parent === window)
+        return () => { };
+    let disposed = false;
+    let unmount;
+    const report = (status, origin = "*") => {
+        if (!disposed)
+            window.parent.postMessage({ type: "frame-tools-status", status }, origin);
+    };
+    const dispose = () => { disposed = true; unmount?.(); };
+    if (!frameOrigin) {
+        report("unavailable");
+        return dispose;
+    }
+    let origin;
+    try {
+        const url = new URL(frameOrigin);
+        const local = url.hostname === "localhost" || url.hostname === "127.0.0.1" || url.hostname === "[::1]";
+        if (url.protocol !== "https:" && !(url.protocol === "http:" && local))
+            throw new Error("Invalid Frame origin");
+        if (url.username || url.password || url.origin !== frameOrigin)
+            throw new Error("Expected an origin");
+        origin = url.origin;
+        // The origin is pinned in the prototype, never taken from a message or URL parameter.
+        if (!document.referrer || new URL(document.referrer).origin !== origin)
+            return dispose;
+    }
+    catch {
+        report("unavailable");
+        return dispose;
+    }
+    report("loading", origin);
+    const url = new URL("/frame-tools/v1.js", origin).href;
+    void import(/* @vite-ignore */ url).then((runtime) => {
+        if (disposed)
+            return;
+        unmount = runtime.mountFrameTools({ frameOrigin: origin });
+        report("ready", origin);
+    }).catch((error) => {
+        if (disposed)
+            return;
+        console.warn("Proto selection tools failed to load", error);
+        report("unavailable", origin);
+    });
+    return dispose;
+}

package/dist/index.d.ts

@@ -1,12 +1,16 @@
 /**
- * The rig's framework-free core: URL-state sync, the bridge, and comment
- * mode. Everything here is plain DOM + history + postMessage — no framework.
+ * The rig's framework-free core: URL-state sync, the bridge, and the Frame tools
+ * loader. Everything here is plain DOM + history + postMessage — no framework.
  * Framework adapters (@proto-labs-inc/rig for React, @proto-labs-inc/rig-vue for Vue) wrap
  * this with their own idioms and nothing else.
  */
 import { type Manifest, type ResolvedPreviewTheme, type RigToFrame } from "@proto-labs-inc/wire";
 export { STATE_PARAM, variantParam } from "@proto-labs-inc/wire";
 export declare const INTERNAL_PREVIEW_THEME_PARAM = "__protoTheme";
+/** Mark the page light or dark (data-proto-theme and the "dark" class) for
+ *  a prototype that styles both. The page's own CSS decides color-scheme:
+ *  forcing it here gave pages that only style light mode dark form fields
+ *  on a light page whenever the viewer's system was dark. */
 export declare function applyPreviewTheme(theme: ResolvedPreviewTheme): void;
 /** All addressable state, mirrored to the URL. Keys: "state" | "v.<component>". */
 export declare class RigStore {

package/dist/index.js

@@ -1,21 +1,24 @@
 /**
- * The rig's framework-free core: URL-state sync, the bridge, and comment
- * mode. Everything here is plain DOM + history + postMessage — no framework.
+ * The rig's framework-free core: URL-state sync, the bridge, and the Frame tools
+ * loader. Everything here is plain DOM + history + postMessage — no framework.
  * Framework adapters (@proto-labs-inc/rig for React, @proto-labs-inc/rig-vue for Vue) wrap
  * this with their own idioms and nothing else.
  */
 import { PROTOCOL_VERSION, STATE_PARAM, variantParam, applyVariantSelection, isFrameToRig, } from "@proto-labs-inc/wire";
-import { ElementPreview } from "./element-preview.js";
+import { loadFrameTools } from "./frame-tools-loader.js";
 export { STATE_PARAM, variantParam } from "@proto-labs-inc/wire";
-const RIG_VERSION = "0.1.1";
+const RIG_VERSION = "0.2.1";
 export const INTERNAL_PREVIEW_THEME_PARAM = "__protoTheme";
+/** Mark the page light or dark (data-proto-theme and the "dark" class) for
+ *  a prototype that styles both. The page's own CSS decides color-scheme:
+ *  forcing it here gave pages that only style light mode dark form fields
+ *  on a light page whenever the viewer's system was dark. */
 export function applyPreviewTheme(theme) {
     if (typeof document === "undefined")
         return;
     const root = document.documentElement;
     root.dataset.protoTheme = theme;
     root.classList.toggle("dark", theme === "dark");
-    root.style.colorScheme = theme;
 }
 function resolvedSystemTheme() {
     return window.matchMedia("(prefers-color-scheme: dark)").matches
@@ -131,48 +134,6 @@ export function postToFrame(msg) {
     if (typeof window !== "undefined" && window.parent !== window)
         window.parent.postMessage(msg, "*");
 }
-// ─── comment mode ──────────────────────────────────────────────────
-// The Frame can't touch this document (cross-origin iframe), so the blue
-// selector runs here: hit-test [data-proto-id] under the cursor, draw the
-// highlight, and on click capture the view with the highlight baked in.
-// The highlight is Proto blue (#0088FF): 2px solid at 55%, a 6% fill,
-// radius 4px, 0.12s ease-out entry; the picker layer sits at z-index 99997.
-const COMMENT_BLUE = "#0088FF";
-const TARGET_ATTR = "data-proto-id";
-function selectorFor(element) {
-    if (element === document.documentElement)
-        return "html";
-    if (element === document.body)
-        return "body";
-    const protoId = element.getAttribute(TARGET_ATTR);
-    if (protoId)
-        return `[${TARGET_ATTR}="${CSS.escape(protoId)}"]`;
-    if (element.id) {
-        const idSelector = `#${CSS.escape(element.id)}`;
-        if (document.querySelectorAll(idSelector).length === 1)
-            return idSelector;
-    }
-    const owner = element.closest(`[${TARGET_ATTR}]`);
-    const boundary = owner ?? document.body;
-    const segments = [];
-    let current = element;
-    while (current && current !== boundary) {
-        const tag = current.tagName.toLowerCase();
-        const currentTagName = current.tagName;
-        const siblings = current.parentElement
-            ? [...current.parentElement.children].filter((sibling) => sibling.tagName === currentTagName)
-            : [];
-        const index = siblings.indexOf(current);
-        segments.unshift(siblings.length > 1 && index >= 0 ? `${tag}:nth-of-type(${index + 1})` : tag);
-        current = current.parentElement;
-    }
-    const base = owner
-        ? `[${TARGET_ATTR}="${CSS.escape(owner.getAttribute(TARGET_ATTR) ?? "")}"]`
-        : boundary === element
-            ? element.tagName.toLowerCase()
-            : "body";
-    return segments.length > 0 ? `${base} > ${segments.join(" > ")}` : base;
-}
 async function waitForCaptureReady() {
     const pendingImages = [...document.images]
         .filter((image) => !image.complete)
@@ -190,47 +151,6 @@ async function waitForCaptureReady() {
     // resting state before the gallery captures them.
     await new Promise((resolve) => window.setTimeout(resolve, 1500));
 }
-async function captureViewport(scale = Math.min(window.devicePixelRatio || 1, 2)) {
-    try {
-        // Optional peer provided by the prototype, not the rig.
-        const mod = (await import("modern-screenshot"));
-        const root = document.body;
-        const viewportWidth = document.documentElement.clientWidth;
-        const viewportHeight = document.documentElement.clientHeight;
-        const scrollX = window.scrollX || document.documentElement.scrollLeft;
-        const scrollY = window.scrollY || document.documentElement.scrollTop;
-        const contentWidth = Math.max(viewportWidth, document.documentElement.scrollWidth, root.scrollWidth);
-        const contentHeight = Math.max(viewportHeight, document.documentElement.scrollHeight, root.scrollHeight);
-        return await mod.domToDataUrl(root, {
-            scale,
-            width: viewportWidth,
-            height: viewportHeight,
-            features: { restoreScrollPosition: true },
-            style: {
-                margin: "0",
-                width: `${contentWidth}px`,
-                height: `${contentHeight}px`,
-                transform: `translate(${-scrollX}px, ${-scrollY}px)`,
-                transformOrigin: "top left",
-                overflow: "visible",
-            },
-            onCloneNode: (cloned) => {
-                if (!(cloned instanceof HTMLElement) || (!scrollX && !scrollY))
-                    return;
-                const fixed = [cloned, ...cloned.querySelectorAll("*")].filter((element) => element.style.position === "fixed");
-                for (const element of fixed) {
-                    const existing = element.style.transform;
-                    element.style.transform =
-                        `translate(${scrollX}px, ${scrollY}px)` +
-                            (existing && existing !== "none" ? ` ${existing}` : "");
-                }
-            },
-        });
-    }
-    catch {
-        return null;
-    }
-}
 async function captureThumbnail() {
     const restingState = document.createElement("style");
     restingState.textContent = `
@@ -277,229 +197,13 @@ async function captureThumbnail() {
         restingState.remove();
     }
 }
-const elementPreview = new ElementPreview(postToFrame);
-class ElementPicker {
-    overlay = null;
-    highlight = null;
-    cursorStyle = null;
-    target = null;
-    active = false;
-    mode = null;
-    enable(mode) {
-        if (typeof document === "undefined")
-            return;
-        elementPreview.release();
-        if (this.active || this.overlay)
-            this.disable();
-        this.active = true;
-        this.mode = mode;
-        this.cursorStyle = document.createElement("style");
-        this.cursorStyle.setAttribute("data-proto-picker-cursor", "");
-        this.cursorStyle.textContent =
-            "html, body, body * { cursor: crosshair !important; }";
-        document.head.appendChild(this.cursorStyle);
-        const blue = COMMENT_BLUE;
-        this.overlay = document.createElement("div");
-        this.overlay.setAttribute("data-proto-rig-overlay", "");
-        Object.assign(this.overlay.style, {
-            position: "fixed",
-            inset: "0",
-            zIndex: "99997",
-            pointerEvents: "none",
-        });
-        this.highlight = document.createElement("div");
-        Object.assign(this.highlight.style, {
-            position: "absolute",
-            border: `2px solid color-mix(in srgb, ${blue} 55%, transparent)`,
-            borderRadius: "4px",
-            backgroundColor: `color-mix(in srgb, ${blue} 6%, transparent)`,
-            pointerEvents: "none",
-            boxSizing: "border-box",
-            opacity: "0",
-            transition: "opacity 0.12s ease-out",
-            willChange: "opacity",
-        });
-        this.overlay.appendChild(this.highlight);
-        document.body.appendChild(this.overlay);
-        document.addEventListener("pointermove", this.onMove, true);
-        document.addEventListener("click", this.onClick, true);
-        document.addEventListener("keydown", this.onKey, true);
-    }
-    disable() {
-        if (!this.active && !this.overlay && !this.cursorStyle)
-            return;
-        this.active = false;
-        document.removeEventListener("pointermove", this.onMove, true);
-        document.removeEventListener("click", this.onClick, true);
-        document.removeEventListener("keydown", this.onKey, true);
-        this.overlay?.remove();
-        this.cursorStyle?.remove();
-        this.overlay = null;
-        this.highlight = null;
-        this.cursorStyle = null;
-        this.target = null;
-        this.mode = null;
-    }
-    freezeSelection() {
-        this.active = false;
-        document.removeEventListener("pointermove", this.onMove, true);
-        document.removeEventListener("click", this.onClick, true);
-        document.removeEventListener("keydown", this.onKey, true);
-        this.cursorStyle?.remove();
-        this.cursorStyle = null;
-    }
-    onMove = (e) => {
-        const hit = this.targetAt(e.clientX, e.clientY);
-        if (hit === this.target)
-            return;
-        this.target = hit;
-        if (!this.highlight)
-            return;
-        const rect = this.rectFor(hit);
-        Object.assign(this.highlight.style, {
-            left: `${rect.left}px`,
-            top: `${rect.top}px`,
-            width: `${rect.width}px`,
-            height: `${rect.height}px`,
-            opacity: "1",
-        });
-    };
-    onClick = (e) => {
-        e.preventDefault();
-        e.stopPropagation();
-        const clickedTarget = this.targetAt(e.clientX, e.clientY);
-        this.target = clickedTarget;
-        const targetId = clickedTarget?.getAttribute(TARGET_ATTR) ?? null;
-        if (this.mode === "element") {
-            const rect = this.rectFor(clickedTarget);
-            const text = clickedTarget.textContent?.replace(/\s+/g, " ").trim() || null;
-            const inspection = elementPreview.inspect(clickedTarget);
-            this.disable();
-            postToFrame({
-                type: "element-target-picked",
-                inspection,
-                selector: selectorFor(clickedTarget),
-                tagName: clickedTarget.tagName.toLowerCase(),
-                text: text?.slice(0, 160) ?? null,
-                anchor: {
-                    x: rect.left,
-                    y: rect.top,
-                    width: rect.width,
-                    height: rect.height,
-                },
-            });
-            return;
-        }
-        if (this.mode === "variantSet") {
-            if (!targetId)
-                return;
-            const rect = this.rectFor(clickedTarget);
-            this.disable();
-            postToFrame({
-                type: "variant-set-target-picked",
-                targetId,
-                anchor: {
-                    x: rect.left,
-                    y: rect.top,
-                    width: rect.width,
-                    height: rect.height,
-                },
-            });
-            return;
-        }
-        const rect = this.rectFor(clickedTarget);
-        if (this.highlight) {
-            Object.assign(this.highlight.style, {
-                left: `${rect.left}px`,
-                top: `${rect.top}px`,
-                width: `${rect.width}px`,
-                height: `${rect.height}px`,
-                opacity: "1",
-            });
-        }
-        this.freezeSelection();
-        postToFrame({
-            type: "comment-target-picked",
-            targetId,
-            anchor: {
-                x: rect.left,
-                y: rect.top,
-                width: rect.width,
-                height: rect.height,
-            },
-        });
-    };
-    targetAt(x, y) {
-        const hit = document.elementFromPoint(x, y);
-        if (this.mode === "element")
-            return hit ?? document.body;
-        return hit?.closest(`[${TARGET_ATTR}]`) ?? document.body;
-    }
-    rectFor(target) {
-        if (target === document.body || target === document.documentElement) {
-            return {
-                left: 0,
-                top: 0,
-                width: document.documentElement.clientWidth,
-                height: document.documentElement.clientHeight,
-            };
-        }
-        return target.getBoundingClientRect();
-    }
-    onKey = (e) => {
-        if (e.key !== "Escape")
-            return;
-        e.preventDefault();
-        const mode = this.mode;
-        this.disable();
-        postToFrame({
-            type: mode === "variantSet"
-                ? "variant-set-picker-exited"
-                : mode === "element"
-                    ? "element-picker-exited"
-                    : "comment-mode-exited",
-        });
-    };
-    async captureSelection(requestId) {
-        if (!this.target)
-            return;
-        const targetId = this.target.getAttribute(TARGET_ATTR);
-        const rect = this.rectFor(this.target);
-        const anchor = {
-            x: rect.left,
-            y: rect.top,
-            width: rect.width,
-            height: rect.height,
-        };
-        if (this.highlight) {
-            Object.assign(this.highlight.style, {
-                left: `${rect.left}px`,
-                top: `${rect.top}px`,
-                width: `${rect.width}px`,
-                height: `${rect.height}px`,
-            });
-        }
-        // The page is already interactive when the user picks a comment target.
-        // Capture immediately: thumbnail readiness delays can consume the Frame's
-        // request timeout on image-heavy prototypes.
-        const image = await captureViewport();
-        this.disable();
-        postToFrame({
-            type: "comment-capture",
-            targetId,
-            image,
-            requestId,
-            anchor,
-        });
-    }
-}
-const elementPicker = typeof window === "undefined" ? null : new ElementPicker();
 /**
  * Wire a store to the bridge: listen for Frame messages, announce the rig,
  * and report the boot-time state (the deep-link fix). Returns a disposer.
  * Call client-side only.
  */
 export function wireRig(store, manifest) {
+    const disposeTools = loadFrameTools(manifest.frameOrigin);
     let controlledTheme = false;
     const media = window.matchMedia("(prefers-color-scheme: dark)");
     const onSystemTheme = () => {
@@ -512,16 +216,6 @@ export function wireRig(store, manifest) {
             return;
         if (!isFrameToRig(e.data))
             return; // tolerate unknown messages silently
-        if (e.data.type === "preview-element-styles") {
-            elementPreview.preview(e.data.selectionId, e.data.styles);
-            return;
-        }
-        if (e.data.type === "release-element") {
-            elementPreview.release(e.data.selectionId);
-            return;
-        }
-        if (["set-state", "set-variant", "set-theme"].includes(e.data.type))
-            elementPreview.release();
         if (e.data.type === "set-state") {
             const state = manifest.states.find((s) => s.id === e.data.id);
             store.setState(e.data.id, state?.variants ?? {});
@@ -532,42 +226,6 @@ export function wireRig(store, manifest) {
         }
         else if (e.data.type === "set-variant")
             store.set(variantParam(e.data.component), e.data.variant);
-        else if (e.data.type === "measure-target") {
-            const target = Array.from(document.querySelectorAll(`[${TARGET_ATTR}]`)).find((candidate) => candidate.getAttribute(TARGET_ATTR) === e.data.id);
-            const rect = target?.getBoundingClientRect();
-            postToFrame({
-                type: "target-measured",
-                targetId: e.data.id,
-                anchor: rect
-                    ? {
-                        x: rect.left,
-                        y: rect.top,
-                        width: rect.width,
-                        height: rect.height,
-                    }
-                    : null,
-            });
-        }
-        else if (e.data.type === "set-comment-mode") {
-            if (e.data.on)
-                elementPicker?.enable("comment");
-            else
-                elementPicker?.disable();
-        }
-        else if (e.data.type === "capture-comment")
-            void elementPicker?.captureSelection(e.data.requestId);
-        else if (e.data.type === "set-variant-set-picker") {
-            if (e.data.on)
-                elementPicker?.enable("variantSet");
-            else
-                elementPicker?.disable();
-        }
-        else if (e.data.type === "set-element-picker") {
-            if (e.data.on)
-                elementPicker?.enable("element");
-            else
-                elementPicker?.disable();
-        }
     };
     window.addEventListener("message", onMessage);
     postToFrame({
@@ -590,7 +248,6 @@ export function wireRig(store, manifest) {
     return () => {
         media.removeEventListener("change", onSystemTheme);
         window.removeEventListener("message", onMessage);
-        elementPicker?.disable();
-        elementPreview.release();
+        disposeTools();
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proto-labs-inc/rig-core",
-  "version": "0.1.1",
+  "version": "0.2.1",
   "description": "Proto's rig, framework-free: URL-state sync, the postMessage bridge to the Frame, and comment mode.",
   "license": "MIT",
   "repository": {
@@ -28,7 +28,7 @@
     }
   },
   "dependencies": {
-    "@proto-labs-inc/wire": "^0.1.1"
+    "@proto-labs-inc/wire": "^0.2.0"
   },
   "devDependencies": {
     "typescript": "~6.0.2",

package/dist/element-preview.d.ts

@@ -1,20 +0,0 @@
-import { type ElementStyles, type RigToFrame } from "@proto-labs-inc/wire";
-/** Owns one temporary edit. Never resolves a selector back to a different element. */
-export declare class ElementPreview {
-    private post;
-    private session;
-    private observer;
-    private resize;
-    private animationFrame;
-    private lastBounds;
-    constructor(post: (message: RigToFrame) => void);
-    inspect(target: Element): {
-        selectionId: `${string}-${string}-${string}-${string}-${string}`;
-        styles: Partial<Record<"color" | "background-color" | "opacity" | "font-family" | "font-size" | "font-weight" | "line-height" | "letter-spacing" | "padding-top" | "padding-right" | "padding-bottom" | "padding-left" | "border-radius" | "gap", string>>;
-    } | undefined;
-    preview(id: string, styles: ElementStyles): void;
-    private restore;
-    release(id?: string): void;
-    private scheduleBounds;
-    private measure;
-}

package/dist/element-preview.js

@@ -1,95 +0,0 @@
-import { ELEMENT_STYLE_PROPERTIES } from "@proto-labs-inc/wire";
-/** Owns one temporary edit. Never resolves a selector back to a different element. */
-export class ElementPreview {
-    post;
-    session = null;
-    observer = null;
-    resize = null;
-    animationFrame = 0;
-    lastBounds = "";
-    constructor(post) {
-        this.post = post;
-    }
-    inspect(target) {
-        this.release();
-        if (!(target instanceof HTMLElement || target instanceof SVGElement))
-            return undefined;
-        const computed = getComputedStyle(target);
-        const hasText = Array.from(target.childNodes).some((node) => node.nodeType === Node.TEXT_NODE && Boolean(node.textContent?.trim())) || target.matches("input, textarea, select");
-        const typography = new Set(["color", "font-family", "font-size", "font-weight", "line-height", "letter-spacing"]);
-        const styles = {};
-        for (const property of ELEMENT_STYLE_PROPERTIES) {
-            if (typography.has(property) && !hasText)
-                continue;
-            if (property === "gap" && !/flex|grid/.test(computed.display))
-                continue;
-            styles[property] = computed.getPropertyValue(property);
-        }
-        const selectionId = crypto.randomUUID();
-        this.session = { id: selectionId, target, original: target.getAttribute("style") };
-        this.lastBounds = "";
-        this.observer = new MutationObserver(this.scheduleBounds);
-        this.observer.observe(document.body, { childList: true, subtree: true, attributes: true });
-        this.resize = new ResizeObserver(this.scheduleBounds);
-        this.resize.observe(target);
-        window.addEventListener("scroll", this.scheduleBounds, true);
-        window.addEventListener("resize", this.scheduleBounds);
-        return { selectionId, styles };
-    }
-    preview(id, styles) {
-        const session = this.session;
-        if (!session || session.id !== id)
-            return;
-        this.restore();
-        for (const property of ELEMENT_STYLE_PROPERTIES) {
-            const value = styles[property];
-            if (value && CSS.supports(property, value))
-                session.target.style.setProperty(property, value, "important");
-        }
-        this.scheduleBounds();
-    }
-    restore() {
-        if (!this.session)
-            return;
-        const { target, original } = this.session;
-        if (original === null)
-            target.removeAttribute("style");
-        else
-            target.setAttribute("style", original);
-    }
-    release(id) {
-        if (!this.session || (id && id !== this.session.id))
-            return;
-        const selectionId = this.session.id;
-        this.observer?.disconnect();
-        this.resize?.disconnect();
-        window.removeEventListener("scroll", this.scheduleBounds, true);
-        window.removeEventListener("resize", this.scheduleBounds);
-        cancelAnimationFrame(this.animationFrame);
-        this.animationFrame = 0;
-        this.restore();
-        this.session = null;
-        this.post({ type: "element-preview-bounds", selectionId, anchor: null });
-    }
-    scheduleBounds = () => {
-        if (!this.animationFrame)
-            this.animationFrame = requestAnimationFrame(this.measure);
-    };
-    measure = () => {
-        this.animationFrame = 0;
-        if (!this.session)
-            return;
-        const { target, id } = this.session;
-        if (!target.isConnected) {
-            this.release();
-            return;
-        }
-        const rect = target.getBoundingClientRect();
-        const anchor = { x: rect.x, y: rect.y, width: rect.width, height: rect.height };
-        const bounds = JSON.stringify(anchor);
-        if (bounds === this.lastBounds)
-            return;
-        this.lastBounds = bounds;
-        this.post({ type: "element-preview-bounds", selectionId: id, anchor });
-    };
-}