@proto-labs-inc/rig-core 0.1.0 → 0.2.0

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,6 +1,6 @@
 /**
- * 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.
  */
@@ -10,6 +10,7 @@ export declare const INTERNAL_PREVIEW_THEME_PARAM = "__protoTheme";
 export declare function applyPreviewTheme(theme: ResolvedPreviewTheme): void;
 /** All addressable state, mirrored to the URL. Keys: "state" | "v.<component>". */
 export declare class RigStore {
+    private manifest;
     private values;
     private listeners;
     constructor(manifest: Manifest);

package/dist/index.js

@@ -1,12 +1,13 @@
 /**
- * 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, isFrameToRig, } from "@proto-labs-inc/wire";
+import { PROTOCOL_VERSION, STATE_PARAM, variantParam, applyVariantSelection, isFrameToRig, } from "@proto-labs-inc/wire";
+import { loadFrameTools } from "./frame-tools-loader.js";
 export { STATE_PARAM, variantParam } from "@proto-labs-inc/wire";
-const RIG_VERSION = "0.1.0";
+const RIG_VERSION = "0.2.0";
 export const INTERNAL_PREVIEW_THEME_PARAM = "__protoTheme";
 export function applyPreviewTheme(theme) {
     if (typeof document === "undefined")
@@ -29,9 +30,11 @@ function searchForFrame() {
 }
 /** All addressable state, mirrored to the URL. Keys: "state" | "v.<component>". */
 export class RigStore {
+    manifest;
     values = new Map();
     listeners = new Set();
     constructor(manifest) {
+        this.manifest = manifest;
         if (typeof window === "undefined")
             return;
         const params = new URLSearchParams(window.location.search);
@@ -61,6 +64,13 @@ export class RigStore {
         return this.values.get(key);
     }
     set(key, value) {
+        if (key.startsWith("v.")) {
+            const params = new URLSearchParams([...this.values]);
+            if (!applyVariantSelection(this.manifest.variantSets, params, key.slice(2), value))
+                return;
+            this.setMany([...params.entries()]);
+            return;
+        }
         this.setMany([[key, value]]);
     }
     setMany(entries) {
@@ -121,48 +131,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)
@@ -180,47 +148,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 = `
@@ -267,225 +194,13 @@ async function captureThumbnail() {
         restingState.remove();
     }
 }
-class ElementPicker {
-    overlay = null;
-    highlight = null;
-    cursorStyle = null;
-    target = null;
-    active = false;
-    mode = null;
-    enable(mode) {
-        if (typeof document === "undefined")
-            return;
-        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;
-            this.disable();
-            postToFrame({
-                type: "element-target-picked",
-                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 = () => {
@@ -494,6 +209,8 @@ export function wireRig(store, manifest) {
     };
     media.addEventListener("change", onSystemTheme);
     const onMessage = (e) => {
+        if (e.source !== window.parent)
+            return;
         if (!isFrameToRig(e.data))
             return; // tolerate unknown messages silently
         if (e.data.type === "set-state") {
@@ -506,42 +223,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({
@@ -564,6 +245,6 @@ export function wireRig(store, manifest) {
     return () => {
         media.removeEventListener("change", onSystemTheme);
         window.removeEventListener("message", onMessage);
-        elementPicker?.disable();
+        disposeTools();
     };
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@proto-labs-inc/rig-core",
-  "version": "0.1.0",
+  "version": "0.2.0",
   "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.0"
+    "@proto-labs-inc/wire": "^0.2.0"
   },
   "devDependencies": {
     "typescript": "~6.0.2",