@agent-native/core 0.92.9 → 0.92.11

package/corpus/templates/design/app/components/design/LayersPanel.tsx

@@ -733,6 +733,92 @@ export function dropDescendantsOfSelectedAncestors(
   });
 }
 
+// BUG-LAYERS-MULTISELECT — Figma-parity multi-select: Cmd/Ctrl+Click toggles
+// one row's membership in the selection; Shift+Click selects the visible
+// range between the anchor row (the last row selected via a PLAIN click —
+// Shift+Click never moves the anchor, so consecutive range clicks keep
+// pivoting from the same row, matching Figma) and the clicked row; a plain
+// click replaces the selection with just the clicked row. Extracted out of
+// the row click handler (`selectNode` below) as a pure function so the
+// range/toggle computation itself — anchor fallback when the anchor row
+// scrolled out of view/was deleted, additive range-merge, and dropping a
+// selected descendant whose ancestor is also selected — is unit-testable
+// without mounting the panel.
+export function computeLayerMultiSelectIds(args: {
+  id: string;
+  additive: boolean;
+  range: boolean;
+  currentSelectedIds: readonly string[];
+  anchor: string | null;
+  selectableVisibleIds: readonly string[];
+  visibleRows: readonly FlatLayerRow[];
+  // Source for the stale-anchor fallback search below. Defaults to
+  // `currentSelectedIds`. The real panel passes its own `selectedIds` prop
+  // here instead — pointer clicks pass a `currentSelectedIds` freshly
+  // re-read from the DOM (readSelectedIdsFromTree), which can transiently
+  // differ from the panel's own selection state, and the fallback has always
+  // pivoted off the latter.
+  anchorFallbackSelectedIds?: readonly string[];
+}): { nextIds: string[]; nextAnchor: string | null } {
+  const {
+    id,
+    additive,
+    range,
+    currentSelectedIds,
+    anchor,
+    selectableVisibleIds,
+    visibleRows,
+    anchorFallbackSelectedIds = currentSelectedIds,
+  } = args;
+  const currentSelectedIdSet = new Set(currentSelectedIds);
+  let nextIds: string[];
+  // Only advance the anchor on plain clicks; Shift+clicks extend from the
+  // existing anchor so the pivot stays fixed across consecutive range
+  // clicks (returning `anchor` unchanged, including when it was never set).
+  // The one exception is the stale-anchor fallback just below, which DOES
+  // move the anchor even on a range click — it's re-pivoting onto a
+  // still-valid row, not starting a fresh selection.
+  let nextAnchor = range ? anchor : id;
+  if (range && anchor) {
+    let effectiveAnchor = anchor;
+    if (selectableVisibleIds.indexOf(effectiveAnchor) < 0) {
+      // Stale anchor (deleted / filtered / collapsed out of view): pivot from
+      // the last selected layer that is still visible & selectable, matching
+      // Figma's behavior instead of dropping the range to a single select.
+      const fallback = [...anchorFallbackSelectedIds]
+        .reverse()
+        .find((sid) => selectableVisibleIds.includes(sid));
+      if (fallback) {
+        effectiveAnchor = fallback;
+        nextAnchor = fallback;
+      }
+    }
+    const from = selectableVisibleIds.indexOf(effectiveAnchor);
+    const to = selectableVisibleIds.indexOf(id);
+    if (from >= 0 && to >= 0) {
+      const [start, end] = from < to ? [from, to] : [to, from];
+      const rangeIds = selectableVisibleIds.slice(start, end + 1);
+      const merged = additive
+        ? Array.from(new Set([...currentSelectedIds, ...rangeIds]))
+        : rangeIds;
+      // A range that spans an expanded parent and some of its children would
+      // otherwise co-select both. Normalize so a selected descendant whose
+      // ancestor is also selected gets dropped — the ancestor selection
+      // already implies it.
+      nextIds = dropDescendantsOfSelectedAncestors(merged, visibleRows);
+    } else {
+      nextIds = [id];
+    }
+  } else if (additive) {
+    nextIds = currentSelectedIdSet.has(id)
+      ? currentSelectedIds.filter((selectedId) => selectedId !== id)
+      : [...currentSelectedIds, id];
+  } else {
+    nextIds = [id];
+  }
+  return { nextIds, nextAnchor };
+}
+
 export function getDraggedLayerIdsForRows(args: {
   selectedIds: readonly string[];
   nodeId: string;
@@ -745,12 +831,21 @@ export function getDraggedLayerIdsForRows(args: {
   // extract them from the parent being dragged. Optional only for
   // call-site/back-compat convenience; always pass it in the real panel.
   ancestorIdMap?: ReadonlyMap<string, string[]>;
+  // Full-tree node lookup used to keep locked layers out of a multi-layer
+  // drag payload. Figma lets a locked row remain selected alongside unlocked
+  // rows, but dragging one of the unlocked rows must not silently move the
+  // locked selection too. Optional for pure-helper/back-compat callers; the
+  // real panel always passes it from the same full roots used above.
+  nodeById?: ReadonlyMap<string, LayersPanelNode>;
 }): string[] {
   const rawDraggedIds = args.selectedIds.includes(args.nodeId)
     ? getTreeOrderedLayerIds(args.selectedIds, args.visibleRows)
     : [args.nodeId];
-  const draggedIdSet = new Set(rawDraggedIds);
-  return rawDraggedIds.filter((id) => {
+  const movableDraggedIds = rawDraggedIds.filter(
+    (id) => args.nodeById?.get(id)?.locked !== true,
+  );
+  const draggedIdSet = new Set(movableDraggedIds);
+  return movableDraggedIds.filter((id) => {
     const ancestorIds =
       args.ancestorIdMap?.get(id) ??
       args.visibleRows.find((row) => row.node.id === id)?.ancestorIds;
@@ -758,6 +853,21 @@ export function getDraggedLayerIdsForRows(args: {
   });
 }
 
+/** Builds an id-to-node lookup over the full tree. Kept separate from the
+ * ancestor map because drag-start needs both node state (locked) and ancestry,
+ * while other callers only need one or the other. */
+export function buildLayerNodeMap(
+  nodes: readonly LayersPanelNode[],
+): Map<string, LayersPanelNode> {
+  const map = new Map<string, LayersPanelNode>();
+  const visit = (node: LayersPanelNode) => {
+    map.set(node.id, node);
+    node.children?.forEach(visit);
+  };
+  nodes.forEach(visit);
+  return map;
+}
+
 // Row context-menu actions (copy/duplicate/delete/group/reorder) operate on
 // the whole current selection when the right-clicked row is already part of
 // it (matching Figma), or on just that row otherwise (right-clicking an
@@ -1010,57 +1120,25 @@ function LayersPanelImpl(
     ) => {
       const currentSelectedIds =
         options.currentSelectedIds ?? selectedIdsRef.current;
-      const currentSelectedIdSet = new Set(currentSelectedIds);
-      let nextIds: string[];
-      if (options.range && lastSelectionAnchorRef.current) {
-        let anchor = lastSelectionAnchorRef.current;
-        if (selectableVisibleIds.indexOf(anchor) < 0) {
-          // Stale anchor (deleted / filtered / collapsed out of view): pivot from
-          // the last selected layer that is still visible & selectable, matching
-          // Figma's behavior instead of dropping the range to a single select.
-          const fallback = [...selectedIds]
-            .reverse()
-            .find((sid) => selectableVisibleIds.includes(sid));
-          if (fallback) {
-            anchor = fallback;
-            lastSelectionAnchorRef.current = fallback;
-          }
-        }
-        const from = selectableVisibleIds.indexOf(anchor);
-        const to = selectableVisibleIds.indexOf(id);
-        if (from >= 0 && to >= 0) {
-          const [start, end] = from < to ? [from, to] : [to, from];
-          const rangeIds = selectableVisibleIds.slice(start, end + 1);
-          const merged = options.additive
-            ? Array.from(new Set([...currentSelectedIds, ...rangeIds]))
-            : rangeIds;
-          // A range that spans an expanded parent and some of its children
-          // would otherwise co-select both. Normalize so a selected
-          // descendant whose ancestor is also selected gets dropped — the
-          // ancestor selection already implies it.
-          nextIds = dropDescendantsOfSelectedAncestors(
-            merged,
-            visibleRowsRef.current,
-          );
-        } else {
-          nextIds = [id];
-        }
-      } else if (options.additive) {
-        nextIds = currentSelectedIdSet.has(id)
-          ? currentSelectedIds.filter((selectedId) => selectedId !== id)
-          : [...currentSelectedIds, id];
-      } else {
-        nextIds = [id];
-      }
-      // Only advance the anchor on plain clicks; Shift+clicks extend from the
-      // existing anchor so the pivot stays fixed across consecutive range clicks.
-      if (!options.range) {
-        lastSelectionAnchorRef.current = id;
-      }
+      // NOTE: the stale-anchor fallback intentionally searches the PANEL'S
+      // OWN `selectedIds` prop, not `currentSelectedIds` (which pointer
+      // clicks pass in freshly re-read from the DOM via readSelectedIdsFromTree
+      // and can transiently differ) — matches the pre-extraction behavior.
+      const { nextIds, nextAnchor } = computeLayerMultiSelectIds({
+        id,
+        additive: options.additive,
+        range: options.range,
+        currentSelectedIds,
+        anchor: lastSelectionAnchorRef.current,
+        selectableVisibleIds,
+        visibleRows: visibleRowsRef.current,
+        anchorFallbackSelectedIds: selectedIds,
+      });
+      lastSelectionAnchorRef.current = nextAnchor;
       lastPanelSelectionSignatureRef.current = nextIds.join("\0");
       onSelectionChange(nextIds, { id, selectedIds: nextIds, ...options });
     },
-    [onSelectionChange, selectableVisibleIds],
+    [onSelectionChange, selectableVisibleIds, selectedIds],
   );
 
   const commitRename = useCallback(
@@ -1606,6 +1684,7 @@ const LayerRow = memo(function LayerRow({
   onFlipHorizontal,
   onFlipVertical,
 }: LayerRowProps) {
+  const t = useT();
   const { node, depth, hasChildren, canAcceptChildren } = row;
   const isComponentLayer = layerNodeIsComponent(node);
   const selectable = node.selectable !== false;
@@ -1734,12 +1813,20 @@ const LayerRow = memo(function LayerRow({
     // descendant nested inside a currently-collapsed dragged ancestor is
     // still correctly recognized as a descendant and excluded from the drag
     // payload (see L13 / buildAncestorIdMap).
-    const ancestorIdMap = buildAncestorIdMap(rootsRef.current);
+    const roots = rootsRef.current;
+    const ancestorIdMap = buildAncestorIdMap(roots);
+    const nodeById = buildLayerNodeMap(roots);
+    // Search/collapse only changes which rows are painted; it must not change
+    // the structural order of an existing multi-selection's drag payload.
+    // Flatten the complete tree for ordering, while the visible rows remain
+    // the interaction surface that actually started the gesture.
+    const allRows = flattenRows(roots, new Set(), true);
     const draggedIds = getDraggedLayerIdsForRows({
       selectedIds: selectedIdsRef.current,
       nodeId: node.id,
-      visibleRows: visibleRowsRef.current,
+      visibleRows: allRows,
       ancestorIdMap,
+      nodeById,
     });
     event.dataTransfer.effectAllowed = "move";
     event.dataTransfer.setData("application/x-design-layer-id", node.id);
@@ -1747,6 +1834,27 @@ const LayerRow = memo(function LayerRow({
       "application/x-design-layer-ids",
       JSON.stringify(draggedIds),
     );
+    // Figma parity: dragging 2+ selected layers shows a small "N layers"
+    // count badge following the cursor instead of the browser's default
+    // drag image — a screenshot of just the ONE row that received this
+    // native dragstart event, even though every selected row moves together.
+    // setDragImage requires the image element to be attached to the DOM at
+    // the moment it's called, but not after — build an offscreen node here,
+    // wire it up, and detach it on the next frame. Single-layer drags are
+    // unaffected (kept exactly as before: the browser's own row snapshot).
+    if (draggedIds.length > 1) {
+      const ghost = document.createElement("div");
+      ghost.textContent = t("layersPanel.dragGhostCount", {
+        count: draggedIds.length,
+      });
+      ghost.className =
+        "fixed left-[-9999px] top-[-9999px] pointer-events-none select-none whitespace-nowrap rounded-full border border-[var(--design-editor-control-border)] bg-[var(--design-editor-panel-bg)] px-2.5 py-1 text-[11px] font-medium leading-none text-foreground shadow-[0_4px_16px_rgba(0,0,0,0.16),0_0_0_0.5px_rgba(0,0,0,0.08)]";
+      document.body.appendChild(ghost);
+      event.dataTransfer.setDragImage(ghost, -12, -12);
+      requestAnimationFrame(() => {
+        ghost.remove();
+      });
+    }
     // Store drag state at module level so handleDragOver can read it.
     // dataTransfer.getData() returns "" during dragover per the HTML spec.
     activeDragState = { sourceId: node.id, draggedIds };
@@ -2435,7 +2543,11 @@ function LayerGlyph({
     case "board-element":
     case "shape":
     case "rectangle":
-      return <RectangleLayerGlyph className={common} />;
+      return shapeLayerUsesLayoutGlyph(node) ? (
+        <LayoutLayerGlyph node={node} className={common} />
+      ) : (
+        <RectangleLayerGlyph className={common} />
+      );
     case "vector":
       return <VectorLayerGlyph className={common} />;
     case "line":
@@ -2462,6 +2574,21 @@ function LayerGlyph({
   }
 }
 
+/**
+ * A canvas rectangle starts as a shape, but nest-on-drop can promote it to a
+ * flex/grid container. Once promoted, show the same auto-layout glyph as a
+ * frame so the Layers tree reflects the layer's real layout behavior instead
+ * of continuing to advertise it as a leaf rectangle.
+ */
+export function shapeLayerUsesLayoutGlyph(
+  node: Pick<LayersPanelNode, "type" | "layout">,
+): boolean {
+  return (
+    ["board-element", "shape", "rectangle"].includes(node.type ?? "") &&
+    Boolean(node.layout?.isFlexContainer || node.layout?.isGridContainer)
+  );
+}
+
 function layerNodeTagName(
   node: Pick<LayersPanelNode, "tagName" | "detail">,
 ): string | null {

package/corpus/templates/design/app/components/design/LocalhostWriteConsentDialog.tsx

@@ -21,7 +21,6 @@ export interface LocalhostWriteConsentPayload {
   /** Pending callback to invoke after user grants consent. */
   onGranted: (grant: {
     grantId: string;
-    bridgeToken: string;
     rootPath: string;
     grantedUntil: string;
   }) => void;
@@ -58,7 +57,6 @@ export function LocalhostWriteConsentDialog({
     try {
       const result = await callAction<{
         grantId: string;
-        bridgeToken: string;
         rootPath: string;
         grantedUntil: string;
       }>("grant-localhost-write-consent", {

package/corpus/templates/design/app/components/design/MotionDock.tsx

@@ -139,6 +139,21 @@ function formatMsTick(ms: number): string {
   return `${s}s`;
 }
 
+/**
+ * Whether committing on this key should also suppress the blur handler's own
+ * commit. Enter/Escape both trigger an explicit `.blur()` call right after
+ * committing so the field visually defocuses; without this guard, that
+ * synchronous blur re-invokes the (still stale, same-render) commit callback
+ * a second time in the same tick — a harmless-looking no-op for identical
+ * values, but it double-fires side effects like `onPlayheadChange` /
+ * `onDurationChange` and the preview postMessage. Mirrors
+ * `propInputKeyRequiresBlurGuard` in edit-panel/panel-primitives.tsx (the
+ * same bug class, fixed there for style-property fields).
+ */
+export function motionFieldKeyRequiresBlurGuard(key: string): boolean {
+  return key === "Enter" || key === "Escape";
+}
+
 /** Human label for an ease value: preset name when recognised, else raw. */
 function easeLabel(
   ease: MotionEase | undefined,
@@ -330,6 +345,12 @@ export function MotionDock({
 
   // Current-time field draft (null = displaying the live playhead).
   const [timeDraft, setTimeDraft] = useState<string | null>(null);
+  // See motionFieldKeyRequiresBlurGuard: set right before an Enter-triggered
+  // `.blur()` so the blur handler that fires in the same synchronous tick
+  // skips its own commit instead of double-invoking commitTimeDraft.
+  const skipNextTimeBlurCommitRef = useRef(false);
+  // Same guard for the duration field's Enter -> blur -> onBlur-commit path.
+  const skipNextDurationBlurCommitRef = useRef(false);
   /** Internal high-frequency playhead update — does NOT notify the parent. */
   const setPlayheadLocal = useCallback(
     (next: number) => {
@@ -750,6 +771,16 @@ export function MotionDock({
     timeDraft,
   ]);
 
+  // ── Duration field ────────────────────────────────────────────────────────
+  const commitDurationDraft = useCallback(() => {
+    const ms = parseInt(durationInput, 10);
+    if (!isNaN(ms) && ms >= 50) {
+      onDurationChange?.(ms);
+    } else {
+      setDurationInput(String(durationMs));
+    }
+  }, [durationInput, durationMs, onDurationChange]);
+
   // ── Space plays/pauses while the dock has focus (Figma parity) ───────────
   const handleDockKeyDown = useCallback(
     (e: ReactKeyboardEvent<HTMLDivElement>) => {
@@ -947,11 +978,32 @@ export function MotionDock({
                   setTimeDraft(String(Math.round(playhead * durationMs)))
                 }
                 onChange={(e) => setTimeDraft(e.target.value)}
-                onBlur={commitTimeDraft}
+                onBlur={() => {
+                  if (skipNextTimeBlurCommitRef.current) {
+                    skipNextTimeBlurCommitRef.current = false;
+                    return;
+                  }
+                  commitTimeDraft();
+                }}
                 onKeyDown={(e) => {
                   if (e.key === "Enter") {
                     e.preventDefault();
                     commitTimeDraft();
+                    // Without this, the blur triggered below re-enters
+                    // commitTimeDraft() a second time in the same
+                    // synchronous tick (see motionFieldKeyRequiresBlurGuard).
+                    skipNextTimeBlurCommitRef.current =
+                      motionFieldKeyRequiresBlurGuard(e.key);
+                    (e.target as HTMLInputElement).blur();
+                    return;
+                  }
+                  if (e.key === "Escape") {
+                    e.preventDefault();
+                    // Cancel the in-progress edit — revert to displaying the
+                    // live playhead instead of committing the draft.
+                    setTimeDraft(null);
+                    skipNextTimeBlurCommitRef.current =
+                      motionFieldKeyRequiresBlurGuard(e.key);
                     (e.target as HTMLInputElement).blur();
                   }
                 }}
@@ -973,11 +1025,31 @@ export function MotionDock({
                 value={durationInput}
                 onChange={(e) => setDurationInput(e.target.value)}
                 onBlur={() => {
-                  const ms = parseInt(durationInput, 10);
-                  if (!isNaN(ms) && ms >= 50) {
-                    onDurationChange?.(ms);
-                  } else {
+                  if (skipNextDurationBlurCommitRef.current) {
+                    skipNextDurationBlurCommitRef.current = false;
+                    return;
+                  }
+                  commitDurationDraft();
+                }}
+                onKeyDown={(e) => {
+                  if (e.key === "Enter") {
+                    e.preventDefault();
+                    commitDurationDraft();
+                    // Same double-commit guard as the current-time field —
+                    // see motionFieldKeyRequiresBlurGuard.
+                    skipNextDurationBlurCommitRef.current =
+                      motionFieldKeyRequiresBlurGuard(e.key);
+                    (e.target as HTMLInputElement).blur();
+                    return;
+                  }
+                  if (e.key === "Escape") {
+                    e.preventDefault();
+                    // Cancel the in-progress edit — revert to the last
+                    // committed duration instead of persisting the draft.
                     setDurationInput(String(durationMs));
+                    skipNextDurationBlurCommitRef.current =
+                      motionFieldKeyRequiresBlurGuard(e.key);
+                    (e.target as HTMLInputElement).blur();
                   }
                 }}
                 className="h-5 w-16 px-1 !text-[11px] md:!text-[11px]"
@@ -2106,6 +2178,68 @@ interface CurveEditorProps {
   onChange: (value: [number, number, number, number]) => void;
 }
 
+/** Format a bezier control-point axis value for display (2 decimal places). */
+export function formatCurveAxisValue(n: number): string {
+  return String(Math.round(n * 100) / 100);
+}
+
+interface CurveNumberFieldProps {
+  label: string;
+  value: number;
+  onChange: (n: number) => void;
+}
+
+/**
+ * One x1/y1/x2/y2 control-point number field in the bezier CurveEditor.
+ * Keeps its own draft string instead of being fully controlled by
+ * `formatCurveAxisValue(value)` so a user can type an in-progress value
+ * ("-", "0.", "1.5") without the field snapping back to the last-committed,
+ * rounded value on every keystroke. A prior version bound `value` directly to
+ * the rounded prop: typing "0" then "." called onChange(0) (parseFloat("0.")
+ * is a finite 0), which re-rendered the field back to "0" and silently
+ * dropped the "." the instant it was typed — decimals (and a bare "-" before
+ * a negative number) could never be entered. Mirrors the `focusedRef` resync
+ * guard in edit-panel/panel-primitives.tsx's LengthField (same "mid-edit prop
+ * stomp" bug class fixed there for style-property fields).
+ */
+function CurveNumberField({ label, value, onChange }: CurveNumberFieldProps) {
+  const [draft, setDraft] = useState(() => formatCurveAxisValue(value));
+  const focusedRef = useRef(false);
+
+  useEffect(() => {
+    if (!focusedRef.current) setDraft(formatCurveAxisValue(value));
+  }, [value]);
+
+  return (
+    <label className="flex flex-col items-stretch gap-0.5">
+      <span className="text-center text-[9px] text-muted-foreground">
+        {label}
+      </span>
+      <Input
+        type="number"
+        step={0.01}
+        value={draft}
+        onFocus={() => {
+          focusedRef.current = true;
+        }}
+        onChange={(e) => {
+          setDraft(e.target.value);
+          const n = parseFloat(e.target.value);
+          if (Number.isFinite(n)) onChange(n);
+        }}
+        onBlur={() => {
+          focusedRef.current = false;
+          // Snap back to the canonical rounded string — clears any
+          // unparsed/partial trailing input ("-", "1.") left over from typing.
+          setDraft(formatCurveAxisValue(value));
+        }}
+        className="h-5 px-1 !text-[10px] md:!text-[10px]"
+        aria-label={label}
+      />
+    </label>
+  );
+}
+
 function CurveEditor({ value, onChange }: CurveEditorProps) {
   const t = useT();
   const [x1, y1, x2, y2] = value;
@@ -2151,22 +2285,11 @@ function CurveEditor({ value, onChange }: CurveEditorProps) {
     fieldValue: number,
     apply: (n: number) => [number, number, number, number],
   ) => (
-    <label className="flex flex-col items-stretch gap-0.5">
-      <span className="text-center text-[9px] text-muted-foreground">
-        {label}
-      </span>
-      <Input
-        type="number"
-        step={0.01}
-        value={String(Math.round(fieldValue * 100) / 100)}
-        onChange={(e) => {
-          const n = parseFloat(e.target.value);
-          if (Number.isFinite(n)) onChange(apply(n));
-        }}
-        className="h-5 px-1 !text-[10px] md:!text-[10px]"
-        aria-label={label}
-      />
-    </label>
+    <CurveNumberField
+      label={label}
+      value={fieldValue}
+      onChange={(n) => onChange(apply(n))}
+    />
   );
 
   return (