nudge-ui 0.2.3 → 0.2.5

package/dist/inspector/shell/interactionStatePreview.js

@@ -0,0 +1,112 @@
+import { useLayoutEffect } from "react";
+import { collectRules, invalidateStyleResolutionCache, subscribeDocumentRevision } from "../tokens/resolution/cssomCollector.js";
+import { selectorPseudoClasses, splitSelectorAtTopLevel } from "../tokens/resolution/selectorSemantics.js";
+import { adoptStylesheet, allowsStyleElements, releaseAdoptedStylesheet, STATE_PREVIEW_SHEET_ID } from "../runtime/ownedStylesheets.js";
+import { INTERACTION_STATES } from "./styleState.js";
+const MARKER = "data-nudge-ui-state-preview";
+const interactionStates = new Set(INTERACTION_STATES);
+/** Matches native interaction states and the Inspector's temporary CSS state. */
+export function selectorForInteractionStatePreview(selector) {
+    let transformed = selector;
+    for (const pseudo of [...selectorPseudoClasses(selector)].reverse()) {
+        if (!interactionStates.has(pseudo.name))
+            continue;
+        // Keep native states on other elements, but use the chosen state on the
+        // selected element. :where() keeps the original pseudo-class specificity.
+        const replacement = `:is(:${pseudo.name}:where(:not([${MARKER}])), [${MARKER}="${pseudo.name}"])`;
+        transformed = transformed.slice(0, pseudo.start) + replacement + transformed.slice(pseudo.end);
+    }
+    return transformed;
+}
+function previewSelector(selector) {
+    const transformed = selectorForInteractionStatePreview(selector);
+    // Add the same specificity to every copied branch. This preserves their
+    // relative cascade while overriding native pointer states on the target.
+    const scope = `:where([${MARKER}], [${MARKER}] *):is(#${STATE_PREVIEW_SHEET_ID}, *)`;
+    // A scope must precede a pseudo-element, which cannot take an attribute.
+    let parentheses = 0;
+    let brackets = 0;
+    let quote = null;
+    for (let index = 0; index < transformed.length; index++) {
+        const character = transformed[index];
+        if (character === "\\") {
+            index++;
+            continue;
+        }
+        if (quote) {
+            if (character === quote)
+                quote = null;
+            continue;
+        }
+        if (character === '"' || character === "'") {
+            quote = character;
+            continue;
+        }
+        if (character === "[")
+            brackets++;
+        else if (character === "]")
+            brackets--;
+        else if (brackets === 0) {
+            if (character === "(")
+                parentheses++;
+            else if (character === ")")
+                parentheses--;
+            else if (parentheses === 0 && /^::|^:(?:before|after|first-line|first-letter)\b/.test(transformed.slice(index))) {
+                return transformed.slice(0, index) + scope + transformed.slice(index);
+            }
+        }
+    }
+    return transformed + scope;
+}
+/**
+ * Projects CSS interaction states into the selected element's document.
+ * This previews styles without dispatching events or changing application state.
+ */
+export function startInteractionStatePreview(element, state) {
+    if (state === "base")
+        return () => undefined;
+    const doc = element.ownerDocument;
+    const previousMarker = element.getAttribute(MARKER);
+    element.setAttribute(MARKER, state);
+    const style = allowsStyleElements(doc) ? doc.createElement("style") : null;
+    if (style) {
+        style.id = STATE_PREVIEW_SHEET_ID;
+        style.setAttribute("data-nudge-ui", "state-preview");
+        (doc.head ?? doc.documentElement).appendChild(style);
+    }
+    const refresh = () => {
+        const css = collectRules(doc).rules.map((rule) => {
+            const selector = splitSelectorAtTopLevel(rule.selectorText, ",")
+                .map((branch) => previewSelector(branch.trim())).join(", ");
+            const declarations = rule.declarations.map(({ property, value, important }) => `${property}: ${value}${important ? " !important" : ""};`).join(" ");
+            let text = `${selector} { ${declarations} }`;
+            for (const wrapper of [...(rule.atRules ?? [])].reverse()) {
+                text = `@${wrapper.kind} ${wrapper.params} { ${text} }`;
+            }
+            if (rule.layer)
+                text = `@layer ${rule.layer} { ${text} }`;
+            return text;
+        }).join("\n");
+        if (style)
+            style.textContent = css;
+        else
+            adoptStylesheet(doc, STATE_PREVIEW_SHEET_ID, css);
+    };
+    refresh();
+    // Inspection excludes the preview sheet, but its painted values have changed.
+    invalidateStyleResolutionCache(doc);
+    const unsubscribe = subscribeDocumentRevision(doc, refresh);
+    return () => {
+        unsubscribe();
+        style?.remove();
+        releaseAdoptedStylesheet(doc, STATE_PREVIEW_SHEET_ID);
+        if (previousMarker === null)
+            element.removeAttribute(MARKER);
+        else
+            element.setAttribute(MARKER, previousMarker);
+        invalidateStyleResolutionCache(doc);
+    };
+}
+export function useInteractionStatePreview(element, state) {
+    useLayoutEffect(() => element ? startInteractionStatePreview(element, state) : undefined, [element, state]);
+}

package/dist/inspector/shell/originalPreview.d.ts

@@ -3,7 +3,8 @@ export declare function subscribeOriginalPreview(listener: () => void): () => vo
 export declare function useOriginalPreviewActive(): boolean;
 /**
  * Hold-to-view-original (NUD-30). While active the host document shows the
- * page without any inspector changes. Canonical intent stays in the workspace
- * store, so releasing restores the edited preview without loss.
+ * page without any inspector changes; the draft preview owns that projection.
+ * Canonical intent stays in the workspace, so releasing restores the edited
+ * preview without loss.
  */
 export declare function setOriginalPreviewActive(next: boolean): void;

package/dist/inspector/shell/originalPreview.js

@@ -1,7 +1,4 @@
 import { useSyncExternalStore } from "react";
-import { draftChangeStore } from "../changes/draftChanges.js";
-import { applyHostDraftProjection, compileDraftProjection, } from "../projection/draftProjection.js";
-import { isEditorShellDocument } from "../runtime/editorShell.js";
 let previewingOriginal = false;
 const listeners = new Set();
 export function isOriginalPreviewActive() {
@@ -16,7 +13,16 @@ export function subscribeOriginalPreview(listener) {
 export function useOriginalPreviewActive() {
     return useSyncExternalStore(subscribeOriginalPreview, () => previewingOriginal, () => false);
 }
-function notifyOriginalPreviewListeners() {
+/**
+ * Hold-to-view-original (NUD-30). While active the host document shows the
+ * page without any inspector changes; the draft preview owns that projection.
+ * Canonical intent stays in the workspace, so releasing restores the edited
+ * preview without loss.
+ */
+export function setOriginalPreviewActive(next) {
+    if (next === previewingOriginal)
+        return;
+    previewingOriginal = next;
     for (const listener of listeners) {
         try {
             listener();
@@ -26,36 +32,3 @@ function notifyOriginalPreviewListeners() {
         }
     }
 }
-function applyEmptyHostProjection() {
-    if (isEditorShellDocument())
-        return;
-    const { revision } = draftChangeStore.getSnapshot();
-    applyHostDraftProjection({
-        sourceRevision: revision,
-        managedStyles: { rules: [], css: "" },
-        instanceOverrides: [],
-        structuralChanges: [],
-        textContentChanges: [],
-        componentOverrides: [],
-    });
-}
-function applyCanonicalHostProjection() {
-    if (isEditorShellDocument())
-        return;
-    applyHostDraftProjection(compileDraftProjection(draftChangeStore.getSnapshot()));
-}
-/**
- * Hold-to-view-original (NUD-30). While active the host document shows the
- * page without any inspector changes. Canonical intent stays in the workspace
- * store, so releasing restores the edited preview without loss.
- */
-export function setOriginalPreviewActive(next) {
-    if (next === previewingOriginal)
-        return;
-    previewingOriginal = next;
-    if (previewingOriginal)
-        applyEmptyHostProjection();
-    else
-        applyCanonicalHostProjection();
-    notifyOriginalPreviewListeners();
-}

package/dist/inspector/shell/stateValue.js

@@ -1,5 +1,5 @@
 import { getActiveStyleState } from "./styleState.js";
-import { getBrowserCssInspection } from "../inspection/browserCssInspectionRegistry.js";
+import { readInspectionSnapshot } from "../inspection/inspectionSnapshot.js";
 import { getElementComputedStyle } from "../runtime/domRealm.js";
 /** Read an inspector value from the selected authored state, falling back to
  * the browser only when CSSOM has no declaration to attribute. */
@@ -20,8 +20,7 @@ export function getStateStyleValue(el, property, fallback = "") {
         if (state === "base" && !hasLiveInteraction) {
             return getElementComputedStyle(el).getPropertyValue(property).trim() || fallback;
         }
-        const rows = getBrowserCssInspection(el.ownerDocument ?? document)
-            .inspect(el, { state }).properties;
+        const rows = readInspectionSnapshot(el, state)?.properties ?? [];
         const row = rows.find((candidate) => candidate.property === property)
             ?? (property === "background-color" ? rows.find((candidate) => candidate.property === "background") : undefined);
         if (row?.resolvedValue)

package/dist/inspector/sketch/SketchEditor.js

@@ -7,9 +7,10 @@ import { IconButton } from "../ui/IconButton.js";
 import { StatusCallout } from "../ui/StatusCallout.js";
 import { Tooltip } from "../ui/Tooltip.js";
 import { renderAnnotatedPng } from "./raster.js";
+import { sketchFrameHeading } from "./frameHeading.js";
 import { SketchSvgLayer } from "./freehand.js";
 import { findSketchElementAt, translateSketchAnnotation, translateSketchStroke, } from "./geometry.js";
-import { SKETCH_LIMITS, SKETCH_ANNOTATION_RADIUS, SKETCH_STROKE_COLOR, SKETCH_STROKE_OUTLINE, SKETCH_STROKE_WIDTH, } from "./model.js";
+import { SKETCH_LIMITS, SKETCH_ANNOTATION_RADIUS, SKETCH_STROKE_COLOR, SKETCH_STROKE_OUTLINE, SKETCH_RECTANGLE_STROKE_WIDTH, SKETCH_STROKE_WIDTH, } from "./model.js";
 import { DRAG_CURSOR, SKETCH_CURSOR } from "../ui/customCursors.js";
 import { portalContainer } from "../ui/portalContainer.js";
 const SKETCH_TOOLS = [
@@ -298,7 +299,7 @@ export function SketchEditor({ open, document: sketchDocument, captured, onCance
             const stroke = {
                 id: `stroke-${Date.now()}-${Math.random().toString(36).slice(2)}`,
                 kind: tool === "rectangle" ? "rectangle" : "freehand",
-                width: SKETCH_STROKE_WIDTH,
+                width: tool === "rectangle" ? SKETCH_RECTANGLE_STROKE_WIDTH : SKETCH_STROKE_WIDTH,
                 color: SKETCH_STROKE_COLOR,
                 outlineColor: SKETCH_STROKE_OUTLINE,
                 points: points.map((point) => ({ ...point })),
@@ -365,7 +366,7 @@ export function SketchEditor({ open, document: sketchDocument, captured, onCance
         setSaving(true);
         setError(null);
         try {
-            const rendered = await renderAnnotatedPng(image, imageWidth, imageHeight, strokes, committedAnnotations, description.trim());
+            const rendered = await renderAnnotatedPng(image, imageWidth, imageHeight, strokes, committedAnnotations, description.trim(), sketchFrameHeading(capture.url));
             await onSave({
                 ...(sketchDocument ? { id: sketchDocument.id } : {}),
                 capture,
@@ -387,7 +388,7 @@ export function SketchEditor({ open, document: sketchDocument, captured, onCance
         ? {
             id: "draft",
             kind: tool === "rectangle" ? "rectangle" : "freehand",
-            width: SKETCH_STROKE_WIDTH,
+            width: tool === "rectangle" ? SKETCH_RECTANGLE_STROKE_WIDTH : SKETCH_STROKE_WIDTH,
             color: SKETCH_STROKE_COLOR,
             outlineColor: SKETCH_STROKE_OUTLINE,
             points: tool === "rectangle" && draftPoints.length > 1

package/dist/inspector/sketch/SketchFrameOverlay.d.ts

@@ -1,7 +1,8 @@
+import { type CanvasFrame } from "../canvas/canvasFrame.js";
 import type { ReactElement } from "react";
 import type { SketchDocument, SketchPoint } from "./model.js";
 interface SketchFrameOverlayProps {
-    readonly iframe: HTMLIFrameElement | null;
+    readonly iframe: CanvasFrame | null;
     readonly cardId?: string;
     readonly cardUrl: string;
     readonly artifactId?: string;

package/dist/inspector/sketch/SketchFrameOverlay.js

@@ -1,4 +1,5 @@
 import { jsx as _jsx } from "react/jsx-runtime";
+import { canvasFrameElement } from "../canvas/canvasFrame.js";
 import { useEffect, useMemo, useState } from "react";
 import { SketchSvgLayer } from "./freehand.js";
 import { useSketchStore } from "./store.js";
@@ -80,10 +81,10 @@ export function SketchFrameOverlay({ cardId, iframe, cardUrl, artifactId, ready
         window.addEventListener("resize", refresh);
         frameWindow.addEventListener("resize", refresh);
         frameWindow.addEventListener("scroll", refresh, true);
-        const observer = typeof ResizeObserver === "undefined"
-            ? null
-            : new ResizeObserver(refresh);
-        observer?.observe(iframe);
+        const element = canvasFrameElement(iframe);
+        const observer = element && typeof ResizeObserver !== "undefined" ? new ResizeObserver(refresh) : null;
+        if (element)
+            observer?.observe(element);
         return () => {
             window.removeEventListener("resize", refresh);
             frameWindow.removeEventListener("resize", refresh);

package/dist/inspector/sketch/SketchOverlay.d.ts

@@ -1,19 +1,17 @@
 import type { ReactElement } from "react";
 import { type SketchViewport } from "./capture.js";
-import { type SketchAnnotation, type SketchStroke } from "./model.js";
-import type { SketchEntryTool } from "./interaction.js";
+import { type SketchPoint, type SketchStroke } from "./model.js";
 export interface SketchLiveDraft {
     /** Kept for compatibility with sketches created with the original editor. */
     readonly description: string;
     readonly strokes: readonly SketchStroke[];
-    readonly annotations: readonly SketchAnnotation[];
     readonly viewport: SketchViewport;
 }
 export interface SketchOverlayProps {
     readonly open: boolean;
     readonly hostElement: HTMLElement;
-    readonly initialTool?: SketchEntryTool;
+    readonly selectTarget?: (point: SketchPoint, lockedTarget: HTMLElement | null) => HTMLElement | null;
     readonly onCancel: () => void;
     readonly onDone: (draft: SketchLiveDraft) => Promise<void>;
 }
-export declare function SketchOverlay({ open, hostElement, initialTool, onCancel, onDone }: SketchOverlayProps): ReactElement | null;
+export declare function SketchOverlay({ open, hostElement, selectTarget, onCancel, onDone }: SketchOverlayProps): ReactElement | null;