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

package/dist/element-preview.d.ts

@@ -0,0 +1,20 @@
+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

@@ -0,0 +1,95 @@
+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 });
+    };
+}

package/dist/index.d.ts

@@ -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

@@ -4,9 +4,10 @@
  * 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 { ElementPreview } from "./element-preview.js";
 export { STATE_PARAM, variantParam } from "@proto-labs-inc/wire";
-const RIG_VERSION = "0.1.0";
+const RIG_VERSION = "0.1.1";
 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) {
@@ -267,6 +277,7 @@ async function captureThumbnail() {
         restingState.remove();
     }
 }
+const elementPreview = new ElementPreview(postToFrame);
 class ElementPicker {
     overlay = null;
     highlight = null;
@@ -277,6 +288,7 @@ class ElementPicker {
     enable(mode) {
         if (typeof document === "undefined")
             return;
+        elementPreview.release();
         if (this.active || this.overlay)
             this.disable();
         this.active = true;
@@ -361,9 +373,11 @@ class ElementPicker {
         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,
@@ -494,8 +508,20 @@ 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 === "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 ?? {});
@@ -565,5 +591,6 @@ export function wireRig(store, manifest) {
         media.removeEventListener("change", onSystemTheme);
         window.removeEventListener("message", onMessage);
         elementPicker?.disable();
+        elementPreview.release();
     };
 }

package/package.json

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