nudge-ui 0.2.4 → 0.2.6

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 = [
@@ -272,7 +273,6 @@ export function SketchEditor({ open, document: sketchDocument, captured, onCance
             event.currentTarget.releasePointerCapture(event.pointerId);
         }
         catch {
-            // The pointer may already have been released by the browser.
         }
         if (draftPointLimitReached.current) {
             draftPointLimitReached.current = false;
@@ -298,7 +298,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 +365,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 +387,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";
@@ -7,13 +8,11 @@ import { sketchBelongsToCard, useDrafts } from "../drafts/store.js";
 export function sketchRouteKey(url) {
     try {
         const parsed = new URL(url);
-        // These parameters belong to the inspector host, not to the application
-        // route. Removing them lets a sketch follow the same page in Focus mode,
-        // the canvas, and a direct editor launch.
+        // Inspector-host params: removing them keeps one sketch attached across
+        // Focus mode, the canvas, and direct launch.
         parsed.searchParams.delete("__nudge_ui_direct");
         parsed.searchParams.delete("nudge-ui");
-        // Hashes identify an in-document location, not a different sketch canvas.
-        // Keep saved marks attached when navigation changes only the anchor.
+        // Hashes are in-document anchors, so marks stay attached when only the anchor changes.
         return `${parsed.origin}${parsed.pathname}${parsed.search}`;
     }
     catch {
@@ -42,9 +41,8 @@ export function projectSketchPoint(point, document, frameWindow, width, height)
     const viewportWidth = Math.max(1, frameWindow.innerWidth || width);
     const viewportHeight = Math.max(1, frameWindow.innerHeight || height);
     const scroll = getSketchScrollPosition(frameWindow);
-    // Preserve the point's relative horizontal position when the responsive
-    // iframe changes width. Apply the scroll delta separately so horizontal
-    // page scrolling still moves the sketch with the content.
+    // Horizontal position scales with the responsive iframe width; the scroll
+    // delta is applied separately.
     const captureLocalX = (point.x / imageWidth) * capture.viewportWidth;
     const currentLocalX = (captureLocalX / Math.max(1, capture.viewportWidth)) * viewportWidth
         - (scroll.x - capture.scrollX);
@@ -80,10 +78,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);
@@ -100,10 +98,9 @@ export function SketchFrameOverlay({ cardId, iframe, cardUrl, artifactId, ready
     const frameWindow = iframe?.contentWindow ?? null;
     const layers = useMemo(() => {
         if (!iframe || !frameWindow || documents.length === 0) {
-            return {
-                strokes: [],
-                annotations: [],
-            };
+            const strokes = [];
+            const annotations = [];
+            return { strokes, annotations };
         }
         const strokes = [];
         const annotations = [];

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;