nudge-ui 0.2.4 → 0.2.6

package/dist/inspector/sketch/raster.js

@@ -1,11 +1,12 @@
-import { SKETCH_ANNOTATION_RADIUS, SKETCH_LIMITS, SKETCH_STROKE_COLOR, } from "./model.js";
+import { SKETCH_ANNOTATION_RADIUS, SKETCH_LIMITS, SKETCH_ACCENT_COLOR, SKETCH_RECTANGLE_FILL_OPACITY, SKETCH_STROKE_COLOR, } from "./model.js";
 import { sketchStrokeOutline } from "./freehand.js";
 const PNG_SIGNATURE = new Uint8Array([137, 80, 78, 71, 13, 10, 26, 10]);
 const SKETCH_NOTE_PADDING = 24;
-const SKETCH_NOTE_TITLE_HEIGHT = 34;
+const SKETCH_NOTE_TITLE_LINE_HEIGHT = 34;
 const SKETCH_NOTE_LINE_HEIGHT = 32;
 const SKETCH_NOTE_FONT = "24px system-ui, sans-serif";
 const SKETCH_NOTE_TITLE_FONT = "600 24px system-ui, sans-serif";
+const SKETCH_NOTE_FALLBACK_HEADING = "Sketch notes";
 export function readPngDimensions(bytes) {
     if (bytes.length < 24)
         return null;
@@ -13,8 +14,7 @@ export function readPngDimensions(bytes) {
         if (bytes[index] !== PNG_SIGNATURE[index])
             return null;
     }
-    // IHDR is the first chunk in every PNG. The dimensions are big-endian at
-    // byte offsets 16 and 20 in the complete file.
+    // IHDR is the first chunk; dimensions are big-endian at byte offsets 16 and 20.
     if (bytes[12] !== 73 || bytes[13] !== 72 || bytes[14] !== 68 || bytes[15] !== 82)
         return null;
     const view = new DataView(bytes.buffer, bytes.byteOffset, bytes.byteLength);
@@ -63,9 +63,15 @@ export function drawSketchStroke(ctx, stroke, scaleX = 1, scaleY = scaleX) {
     if (stroke.kind === "rectangle") {
         ctx.lineCap = "round";
         ctx.lineJoin = "round";
-        ctx.strokeStyle = stroke.color || SKETCH_STROKE_COLOR;
+        const color = stroke.color || SKETCH_STROKE_COLOR;
+        ctx.strokeStyle = color;
+        ctx.fillStyle = color;
         ctx.lineWidth = stroke.width * Math.max(scaleX, scaleY);
         drawPointPath(ctx, stroke.points, scaleX, scaleY);
+        ctx.save();
+        ctx.globalAlpha = SKETCH_RECTANGLE_FILL_OPACITY;
+        ctx.fill();
+        ctx.restore();
         ctx.stroke();
     }
     else {
@@ -93,7 +99,7 @@ export function drawSketchAnnotation(ctx, annotation, scaleX = 1, scaleY = scale
     const y = annotation.point.y * scaleY;
     const radius = SKETCH_ANNOTATION_RADIUS * scale;
     ctx.save();
-    ctx.fillStyle = SKETCH_STROKE_COLOR;
+    ctx.fillStyle = SKETCH_ACCENT_COLOR;
     ctx.beginPath();
     ctx.arc(x, y, radius, 0, Math.PI * 2);
     ctx.fill();
@@ -159,7 +165,13 @@ function wrapText(ctx, text, maxWidth) {
         lines.push(line);
     return lines;
 }
-/** Wraps the description and numbered annotation notes to the panel width. */
+function wrapSketchHeading(ctx, width, heading) {
+    const text = heading.trim();
+    if (!text)
+        return [];
+    ctx.font = SKETCH_NOTE_TITLE_FONT;
+    return wrapText(ctx, text, Math.max(1, width - SKETCH_NOTE_PADDING * 2));
+}
 function wrapSketchNotes(ctx, width, description, annotations) {
     const notes = [
         description.trim(),
@@ -172,29 +184,34 @@ function wrapSketchNotes(ctx, width, description, annotations) {
     const textWidth = Math.max(1, width - SKETCH_NOTE_PADDING * 2);
     return notes.flatMap((note) => wrapText(ctx, note, textWidth));
 }
-function sketchNotePanelHeight(lineCount) {
-    if (lineCount === 0)
+function sketchNotePanelHeight(headingLineCount, noteLineCount) {
+    if (headingLineCount + noteLineCount === 0)
         return 0;
-    return SKETCH_NOTE_PADDING * 2 + SKETCH_NOTE_TITLE_HEIGHT + lineCount * SKETCH_NOTE_LINE_HEIGHT;
+    return SKETCH_NOTE_PADDING * 2
+        + headingLineCount * SKETCH_NOTE_TITLE_LINE_HEIGHT
+        + noteLineCount * SKETCH_NOTE_LINE_HEIGHT;
 }
-function drawSketchNotes(ctx, width, top, lines) {
+function drawSketchNotes(ctx, width, top, headingLines, noteLines) {
     ctx.save();
-    ctx.fillStyle = SKETCH_STROKE_COLOR;
-    ctx.fillRect(0, top, width, sketchNotePanelHeight(lines.length));
+    ctx.fillStyle = SKETCH_ACCENT_COLOR;
+    ctx.fillRect(0, top, width, sketchNotePanelHeight(headingLines.length, noteLines.length));
     ctx.fillStyle = "#ffffff";
     ctx.textAlign = "left";
     ctx.textBaseline = "top";
     ctx.font = SKETCH_NOTE_TITLE_FONT;
-    ctx.fillText("Sketch notes", SKETCH_NOTE_PADDING, top + SKETCH_NOTE_PADDING);
+    let y = top + SKETCH_NOTE_PADDING;
+    for (const line of headingLines) {
+        ctx.fillText(line, SKETCH_NOTE_PADDING, y);
+        y += SKETCH_NOTE_TITLE_LINE_HEIGHT;
+    }
     ctx.font = SKETCH_NOTE_FONT;
-    let y = top + SKETCH_NOTE_PADDING + SKETCH_NOTE_TITLE_HEIGHT;
-    for (const line of lines) {
+    for (const line of noteLines) {
         ctx.fillText(line, SKETCH_NOTE_PADDING, y);
         y += SKETCH_NOTE_LINE_HEIGHT;
     }
     ctx.restore();
 }
-export async function renderAnnotatedPng(originalImage, imageWidth, imageHeight, strokes, annotations = [], description = "") {
+export async function renderAnnotatedPng(originalImage, imageWidth, imageHeight, strokes, annotations = [], description = "", heading = SKETCH_NOTE_FALLBACK_HEADING) {
     await validatePngBlob(originalImage, { width: imageWidth, height: imageHeight });
     if (typeof document === "undefined")
         throw new Error("Sketch rendering requires a browser document.");
@@ -205,8 +222,9 @@ export async function renderAnnotatedPng(originalImage, imageWidth, imageHeight,
         const context = canvas.getContext("2d");
         if (!context)
             throw new Error("The browser could not create a sketch canvas.");
+        const headingLines = wrapSketchHeading(context, imageWidth, heading);
         const noteLines = wrapSketchNotes(context, imageWidth, description, annotations);
-        const outputHeight = imageHeight + sketchNotePanelHeight(noteLines.length);
+        const outputHeight = imageHeight + sketchNotePanelHeight(headingLines.length, noteLines.length);
         if (outputHeight > SKETCH_LIMITS.imageEdge) {
             throw new Error("Sketch notes are too long to fit below the captured image.");
         }
@@ -215,8 +233,9 @@ export async function renderAnnotatedPng(originalImage, imageWidth, imageHeight,
         context.drawImage(image.source, 0, 0, imageWidth, imageHeight);
         drawSketchStrokes(context, strokes);
         drawSketchAnnotations(context, annotations);
-        if (noteLines.length > 0)
-            drawSketchNotes(context, imageWidth, imageHeight, noteLines);
+        if (headingLines.length > 0 || noteLines.length > 0) {
+            drawSketchNotes(context, imageWidth, imageHeight, headingLines, noteLines);
+        }
         const result = await canvasPng(canvas);
         if (result.size > SKETCH_LIMITS.imageBytes) {
             throw new Error("This sketch is too detailed to save within the 2 MiB image limit.");
@@ -238,6 +257,7 @@ export async function blobToBase64(blob) {
         throw new Error("This browser cannot prepare sketch attachments.");
     return btoa(binary);
 }
+/** The promise form lets callers start the write inside the user gesture (required by Safari). */
 export async function copyImageToClipboard(blob) {
     if (typeof navigator === "undefined" || !navigator.clipboard?.write || typeof ClipboardItem === "undefined") {
         throw new Error("Image clipboard access is unavailable. Use Download image instead.");

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

@@ -35,7 +35,7 @@ export declare function markSketchesHandingOff(entries: readonly {
     readonly id: string;
     readonly revision: number;
 }[], batchRevision: number, localBatchId: string, agentRequestId?: string): Promise<boolean>;
-export declare function settleSketchDispatch(batchRevision: number | undefined, state: "working" | "completed" | "failed" | "interrupted", agentRequestId?: string, localBatchId?: string): Promise<boolean>;
+export declare function settleSketchDispatch(batchRevision: number | undefined, state: "delivered" | "working" | "completed" | "failed" | "interrupted", agentRequestId?: string, localBatchId?: string): Promise<boolean>;
 export declare function markSketchesHandedOff(entries: readonly {
     readonly id: string;
     readonly revision: number;

package/dist/inspector/sketch/store.js

@@ -74,7 +74,6 @@ function randomId(prefix) {
         }
     }
     catch {
-        // Fall through to the deterministic-enough browser fallback.
     }
     return `${prefix}-${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`;
 }
@@ -300,8 +299,8 @@ export function settleSketchDispatch(batchRevision, state, agentRequestId, local
         if (hydration)
             await hydration;
         assertWritable(projectId, expectedGeneration);
-        // Resolve the current revisions inside the write queue so a pending save
-        // or requeue cannot be removed by an older completion event.
+        // Resolved inside the write queue so an older completion event cannot
+        // remove a pending save or requeue.
         const changes = snapshot.items.flatMap(({ document, handoff }) => {
             if (!handoff || handoff.sketchRevision !== document.revision
                 || handoff.transport !== "direct" || handoff.batchRevision !== batchRevision)
@@ -325,7 +324,7 @@ export function settleSketchDispatch(batchRevision, state, agentRequestId, local
             }
             return true;
         }
-        const nextHandoffs = changes.map((handoff) => updateHandoff(handoff, state === "working" ? {
+        const nextHandoffs = changes.map((handoff) => updateHandoff(handoff, (state === "delivered" || state === "working") ? {
             state: "handing-off",
             transport: "direct",
             ...(agentRequestId ? { agentRequestId } : {}),

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

@@ -0,0 +1,6 @@
+/** Supplies still images to the DOM renderer while live videos stay mounted. */
+export declare function prepareSketchVideoFrames(targetDocument: Document): {
+    readonly filter: (node: Node) => boolean;
+    readonly prepareClone: (node: Node) => void;
+    readonly restore: () => void;
+};

package/dist/inspector/sketch/videoFrames.js

@@ -0,0 +1,80 @@
+import { SKETCH_LIMITS } from "./model.js";
+const FRAME_ATTRIBUTE = "data-nudge-ui-video-frame";
+const EMPTY_FRAME = "data:image/gif;base64,R0lGODlhAQABAIAAAAAAAP///ywAAAAAAQABAAACAUwAOw==";
+function* videoElements(root) {
+    yield* root.querySelectorAll("video");
+    for (const element of root.querySelectorAll("*")) {
+        if (element.shadowRoot)
+            yield* videoElements(element.shadowRoot);
+    }
+}
+function videoFrame(video) {
+    const image = video.ownerDocument.createElement("img");
+    image.src = video.poster || EMPTY_FRAME;
+    image.width = video.videoWidth || video.clientWidth || 300;
+    image.height = video.videoHeight || video.clientHeight || 150;
+    const style = video.ownerDocument.defaultView?.getComputedStyle(video);
+    if (style) {
+        for (const property of style) {
+            image.style.setProperty(property, style.getPropertyValue(property), style.getPropertyPriority(property));
+        }
+    }
+    // Preserve the replaced element's layout even when its CSS size is auto.
+    image.style.width = style?.width && style.width !== "auto" ? style.width : `${video.clientWidth}px`;
+    image.style.height = style?.height && style.height !== "auto" ? style.height : `${video.clientHeight}px`;
+    if (video.readyState >= 2 && video.videoWidth > 0 && video.videoHeight > 0) {
+        const canvas = video.ownerDocument.createElement("canvas");
+        const scale = Math.min(1, SKETCH_LIMITS.imageEdge / Math.max(video.videoWidth, video.videoHeight));
+        canvas.width = Math.max(1, Math.round(video.videoWidth * scale));
+        canvas.height = Math.max(1, Math.round(video.videoHeight * scale));
+        try {
+            const context = canvas.getContext("2d");
+            if (context) {
+                context.drawImage(video, 0, 0, canvas.width, canvas.height);
+                image.src = canvas.toDataURL("image/png");
+            }
+        }
+        catch {
+            // Cross-origin frames can taint a canvas; the poster or empty frame is kept.
+        }
+    }
+    return image;
+}
+/** Supplies still images to the DOM renderer while live videos stay mounted. */
+export function prepareSketchVideoFrames(targetDocument) {
+    const frames = new Map();
+    const placeholders = [];
+    for (const video of videoElements(targetDocument)) {
+        const id = String(frames.size);
+        frames.set(id, videoFrame(video));
+        const placeholder = targetDocument.createElement("img");
+        placeholder.hidden = true;
+        placeholder.src = EMPTY_FRAME;
+        placeholder.setAttribute(FRAME_ATTRIBUTE, id);
+        // A hidden sibling placeholder preserves capture order without touching the live video.
+        video.before(placeholder);
+        placeholders.push(placeholder);
+    }
+    return {
+        filter: (node) => node.nodeType !== 1 || node.localName !== "video",
+        prepareClone: (node) => {
+            if (node.nodeType !== 1)
+                return;
+            const element = node;
+            const id = element.getAttribute(FRAME_ATTRIBUTE);
+            const frame = id === null ? undefined : frames.get(id);
+            if (!frame)
+                return;
+            element.removeAttribute(FRAME_ATTRIBUTE);
+            element.removeAttribute("hidden");
+            element.style.cssText = frame.style.cssText;
+            element.setAttribute("src", frame.src);
+            element.setAttribute("width", String(frame.width));
+            element.setAttribute("height", String(frame.height));
+        },
+        restore: () => {
+            for (const placeholder of placeholders)
+                placeholder.remove();
+        },
+    };
+}

package/dist/inspector/spacing/projection.d.ts

@@ -29,15 +29,7 @@ export interface InspectorSpacingProjection {
 export interface InspectorProjection {
     spacing: Record<ProjectionGroup, InspectorSpacingProjection>;
 }
-/**
- * Projects resolved physical side facts into the compact spacing UI shape.
- * Authored value, token identity, computed value, and source property all
- * participate in shared/mixed detection so visually equal values cannot
- * accidentally discard authored CSS intent. Source properties remain on each
- * field as provenance but do not by themselves force expansion.
- */
 export declare function projectInspectorValues(el: HTMLElement, rows: ResolvedProperty[]): InspectorProjection;
-/** Projects computed group values into the existing spacing editor model. */
 export declare function projectInspectorValuesForSelection(selection: StyleSelection): InspectorProjection;
 export declare function projectionSides(axis: ProjectionAxis): readonly [ProjectionSide, ProjectionSide];
 export {};

package/dist/inspector/spacing/projection.js

@@ -1,23 +1,22 @@
 import { getStateStyleValue } from "../shell/stateValue.js";
+import { readAuthoredStyleValue } from "../styleEditors/layoutValue.js";
 const SIDES = ["top", "right", "bottom", "left"];
 const AXIS_SIDES = {
-    // Preserve CSS physical-side order within each axis. This makes a mixed
-    // horizontal value read as right, left and a mixed vertical value as top,
-    // bottom when the compact editor renders both values.
+    // CSS physical-side order per axis, so a mixed pair reads right/left, top/bottom.
     horizontal: ["right", "left"],
     vertical: ["top", "bottom"],
 };
 function fieldProjection(el, rows, property) {
     const row = rows.find((candidate) => candidate.property === property) ?? null;
-    // The selected element is the rendering authority. Resolved rows can be
-    // one render behind while the debounced inspector refreshes, so use the
-    // live computed side value for grouping when available and retain the row
-    // for authored/token/source provenance.
+    // Resolved rows can be one render behind; the live value is the grouping authority, the row only supplies provenance.
     const liveValue = getStateStyleValue(el, property);
     const rowValue = row?.computed || row?.resolvedValue;
     const rowIsCurrent = !liveValue || !row || Boolean(row.sourceProperty) || !rowValue || rowValue === liveValue;
     const effectiveRow = rowIsCurrent ? row : null;
-    const value = liveValue || row?.resolvedValue || "";
+    const computedValue = liveValue || row?.resolvedValue || "";
+    if (isInsetSide(property))
+        return insetFieldProjection(el, property, effectiveRow, computedValue);
+    const value = computedValue;
     return {
         property,
         authoredValue: effectiveRow?.authored ?? effectiveRow?.declaredValue ?? value,
@@ -27,11 +26,23 @@ function fieldProjection(el, rows, property) {
         row: effectiveRow,
     };
 }
+function isInsetSide(property) {
+    return SIDES.includes(property);
+}
+/** Inset sides report the browser's used offset even when unauthored, so only authored values are shown. */
+function insetFieldProjection(el, property, row, computedValue) {
+    const authoredValue = (row?.authored ?? row?.declaredValue ?? readAuthoredStyleValue(el, property) ?? "").trim() || "auto";
+    return {
+        property,
+        authoredValue,
+        value: authoredValue === "auto" ? "auto" : computedValue || authoredValue,
+        tokenName: row?.tokenName ?? null,
+        sourceProperty: row?.sourceProperty,
+        row,
+    };
+}
 function fieldSignature(field) {
-    // Source property is provenance, not visible value identity. Two physical
-    // longhands with the same authored/token value may still use the compact
-    // axis control; the individual source properties remain attached to their
-    // fields for prompt generation and edit metadata.
+    // Source property is provenance, not value identity, so it stays out of the signature.
     return [field.authoredValue, field.tokenName ?? "", field.value].join("|");
 }
 function axisProjection(axis, fields) {
@@ -61,13 +72,6 @@ function spacingProjection(el, rows, property) {
         },
     };
 }
-/**
- * Projects resolved physical side facts into the compact spacing UI shape.
- * Authored value, token identity, computed value, and source property all
- * participate in shared/mixed detection so visually equal values cannot
- * accidentally discard authored CSS intent. Source properties remain on each
- * field as provenance but do not by themselves force expansion.
- */
 export function projectInspectorValues(el, rows) {
     return {
         spacing: {
@@ -82,6 +86,8 @@ function selectionField(selection, property) {
     const mixed = selectedProperty?.value.kind === "mixed";
     const value = selectedProperty?.value.kind === "common" ? selectedProperty.value.value : "";
     const row = selectedProperty?.primaryRow ?? null;
+    if (isInsetSide(property))
+        return selectionInsetField(selection, property, row, selectedProperty?.token.kind === "common" ? selectedProperty.token.name : null);
     return {
         property,
         authoredValue: mixed ? "Mixed" : value,
@@ -91,6 +97,19 @@ function selectionField(selection, property) {
         row,
     };
 }
+function selectionInsetField(selection, property, row, tokenName) {
+    const authored = selection.domElements.map((el) => readAuthoredStyleValue(el, property) ?? "auto");
+    const mixed = new Set(authored).size > 1;
+    const value = mixed ? "Mixed" : authored[0] ?? "auto";
+    return {
+        property,
+        authoredValue: value,
+        value,
+        tokenName: mixed || value === "auto" ? null : tokenName,
+        sourceProperty: row?.sourceProperty,
+        row,
+    };
+}
 function selectionAxis(axis, fields) {
     const sides = AXIS_SIDES[axis];
     const pair = [fields[sides[0]], fields[sides[1]]];
@@ -118,7 +137,6 @@ function selectionSpacing(selection, property) {
         },
     };
 }
-/** Projects computed group values into the existing spacing editor model. */
 export function projectInspectorValuesForSelection(selection) {
     if (selection.elements.length === 1) {
         return projectInspectorValues(selection.primary.domElement, [...selection.primaryRows]);

package/dist/inspector/styleEditors/BackgroundEditor.js

@@ -6,7 +6,8 @@ import { interpretTokenValue } from "../../css/value-semantics/tokenInterpretati
 import { getNudgeUiTokenEntries } from "../runtime/runtimeConfig.js";
 import { colorValueToHex, TokenValueField } from "../tokens/TokenField.js";
 import { setStyles } from "../tokens/editActions.js";
-import { createChangeHistoryGroup, getActiveDraftChanges } from "../changes/draftChanges.js";
+import { getActiveDraftChanges } from "../drafts/store.js";
+import { createChangeHistoryGroup } from "../workspace/timeline.js";
 import { getStateStyleValue } from "../shell/stateValue.js";
 import { ControlSurface } from "../ui/ControlSurface.js";
 import { IconButton } from "../ui/IconButton.js";
@@ -175,7 +176,7 @@ function BackgroundLayerEditor(props) {
                                 const match = /^([+-]?(?:\d*\.)?\d+)(?:deg)?$/.exec(raw.trim());
                                 if (match && Number.isFinite(Number(match[1])))
                                     commitGradient({ ...gradient, angle: Number(match[1]) });
-                            }) : null, _jsx(IconButton, { variant: "quiet", label: "Reverse gradient", disabled: blockedBy !== null, onClick: () => commitGradient({ ...gradient, stops: [...gradient.stops].reverse().map((stop) => ({ ...stop, position: 100 - stop.position })) }), children: _jsx(IconArrowsDiff, { "aria-hidden": "true" }) }), _jsx(IconButton, { variant: "quiet", label: "Add gradient stop", disabled: blockedBy !== null, onClick: () => addStop(), children: _jsx(IconPlus, { "aria-hidden": "true" }) })] }), gradient.stops.map((stop, index) => ({ stop, index })).sort((a, b) => a.stop.position - b.stop.position).map(({ stop, index }) => {
+                            }) : null, _jsx(IconButton, { variant: "secondary", label: "Reverse gradient", disabled: blockedBy !== null, onClick: () => commitGradient({ ...gradient, stops: [...gradient.stops].reverse().map((stop) => ({ ...stop, position: 100 - stop.position })) }), children: _jsx(IconArrowsDiff, { "aria-hidden": "true" }) }), _jsx(IconButton, { variant: "quiet", label: "Add gradient stop", disabled: blockedBy !== null, onClick: () => addStop(), children: _jsx(IconPlus, { "aria-hidden": "true" }) })] }), gradient.stops.map((stop, index) => ({ stop, index })).sort((a, b) => a.stop.position - b.stop.position).map(({ stop, index }) => {
                         const color = interpretTokenValue(stop.color, { table: tokenTable });
                         return _jsxs("div", { className: "background-editor__stop-row", role: "group", "aria-label": `Stop ${index + 1}`, children: [rawField(`Stop ${index + 1} position`, `${Number(stop.position.toFixed(3))}%`, (raw) => {
                                     const match = /^([+-]?(?:\d*\.)?\d+)%?$/.exec(raw.trim());