@agent-native/core 0.85.6 → 0.86.0

package/corpus/templates/design/app/components/visual-editor/DrawOverlay.tsx

@@ -158,6 +158,10 @@ export function DrawOverlay({
     value: string;
   } | null>(null);
   const textInputRef = useRef<HTMLInputElement>(null);
+  // Escape cancels the pending text annotation, but unmounting the input also
+  // fires its blur handler, which would commit the very annotation the user
+  // just cancelled. This flag lets the blur handler skip that commit.
+  const cancelingTextRef = useRef(false);
   const [instruction, setInstruction] = useState("");
   const drawing = useRef(false);
   const canvasSizeRef = useRef({ w: 0, h: 0 });
@@ -252,6 +256,7 @@ export function DrawOverlay({
       const rect = canvasRef.current?.getBoundingClientRect();
       if (!rect) return;
       if (textMode) {
+        cancelingTextRef.current = false;
         setTextInput({
           xFrac: (e.clientX - rect.left) / rect.width,
           yFrac: (e.clientY - rect.top) / rect.height,
@@ -708,6 +713,12 @@ export function DrawOverlay({
                   )
                 }
                 onBlur={() => {
+                  // Escape unmounts the input, which fires this blur — skip
+                  // the commit for a cancelled annotation.
+                  if (cancelingTextRef.current) {
+                    cancelingTextRef.current = false;
+                    return;
+                  }
                   if (textInput.value.trim()) commitTextAnnotation();
                 }}
                 onKeyDown={(e) => {
@@ -715,7 +726,10 @@ export function DrawOverlay({
                     e.preventDefault();
                     commitTextAnnotation();
                   }
-                  if (e.key === "Escape") setTextInput(null);
+                  if (e.key === "Escape") {
+                    cancelingTextRef.current = true;
+                    setTextInput(null);
+                  }
                 }}
                 className="h-7 w-48 border-primary bg-background text-sm"
                 autoFocus

package/corpus/templates/design/app/components/visual-editor/SaveStatusIndicator.tsx

@@ -9,7 +9,11 @@ import {
 import { cn } from "@/lib/utils";
 
 interface SaveStatusIndicatorProps {
-  /** True while a save is in flight or pending (debounced). */
+  /**
+   * True while a save is in flight or pending (debounced). Deliberately NOT
+   * rendered: automatic saving is silent (Figma-style) — a "Saving…" ticker is
+   * clutter. Only the exceptional offline state gets UI.
+   */
   saving: boolean;
   /** True when offline / save errored. Shows the warning state. */
   offline?: boolean;
@@ -17,7 +21,7 @@ interface SaveStatusIndicatorProps {
 }
 
 export function SaveStatusIndicator({
-  saving,
+  saving: _saving,
   offline,
   className,
 }: SaveStatusIndicatorProps) {
@@ -46,19 +50,5 @@ export function SaveStatusIndicator({
     );
   }
 
-  if (saving) {
-    return (
-      <span
-        data-save-status="saving"
-        className={cn(
-          "animate-pulse !text-[11px] text-muted-foreground",
-          className,
-        )}
-      >
-        {t("visualEditor.saving")}
-      </span>
-    );
-  }
-
   return null;
 }

package/corpus/templates/design/app/hooks/useDesignHotkeys.ts

@@ -7,6 +7,9 @@ export type DesignHotkeyTool =
   | "move"
   | "frame"
   | "rectangle"
+  | "line"
+  | "arrow"
+  | "ellipse"
   | "text"
   | "pen"
   | "hand"
@@ -33,6 +36,11 @@ export interface DesignHotkeyTabDetails extends DesignHotkeyDetails {
   backwards: boolean;
 }
 
+export interface DesignHotkeyOpacityDetails extends DesignHotkeyDetails {
+  /** 1-100. Digit "1".."9" (no modifier) map to 10-90; "0" maps to 100. */
+  opacity: number;
+}
+
 export type DesignHotkeyTarget = Window | Document | HTMLElement;
 export type DesignHotkeyHandler = (details: DesignHotkeyDetails) => void;
 export type DesignHotkeyToolHandler = (
@@ -43,6 +51,9 @@ export type DesignHotkeyNudgeHandler = (
   details: DesignHotkeyNudgeDetails,
 ) => void;
 export type DesignHotkeyTabHandler = (details: DesignHotkeyTabDetails) => void;
+export type DesignHotkeyOpacityHandler = (
+  details: DesignHotkeyOpacityDetails,
+) => void;
 
 export interface UseDesignHotkeysProps {
   enabled?: boolean;
@@ -55,6 +66,9 @@ export interface UseDesignHotkeysProps {
   onMoveTool?: DesignHotkeyHandler;
   onFrameTool?: DesignHotkeyHandler;
   onRectangleTool?: DesignHotkeyHandler;
+  onLineTool?: DesignHotkeyHandler;
+  onArrowTool?: DesignHotkeyHandler;
+  onEllipseTool?: DesignHotkeyHandler;
   onTextTool?: DesignHotkeyHandler;
   onPenTool?: DesignHotkeyHandler;
   onHandTool?: DesignHotkeyHandler;
@@ -88,6 +102,17 @@ export interface UseDesignHotkeysProps {
   onZoomReset?: DesignHotkeyHandler;
   onZoomToFit?: DesignHotkeyHandler;
   onZoomToSelection?: DesignHotkeyHandler;
+  /** Figma's Shift+0 — zoom to 100%. Distinct from onZoomReset (Cmd+0). */
+  onZoomTo100?: DesignHotkeyHandler;
+  /** Figma's Cmd+Alt+K — create component from the current selection. */
+  onCreateComponent?: DesignHotkeyHandler;
+  /**
+   * Figma's plain digit 1-9 / 0 — set selection opacity (10-90%, 0 = 100%).
+   * Only fires when a layer is selected (caller decides via presence of the
+   * handler / its own guard) and the event isn't a modifier combo or an
+   * editable-target keystroke (already filtered by ignoreEditableTargets).
+   */
+  onOpacityChange?: DesignHotkeyOpacityHandler;
 }
 
 const TOOL_SHORTCUTS: Record<
@@ -97,6 +122,8 @@ const TOOL_SHORTCUTS: Record<
   v: { tool: "move", handler: "onMoveTool" },
   f: { tool: "frame", handler: "onFrameTool" },
   r: { tool: "rectangle", handler: "onRectangleTool" },
+  o: { tool: "ellipse", handler: "onEllipseTool" },
+  l: { tool: "line", handler: "onLineTool" },
   t: { tool: "text", handler: "onTextTool" },
   p: { tool: "pen", handler: "onPenTool" },
   h: { tool: "hand", handler: "onHandTool" },
@@ -104,6 +131,17 @@ const TOOL_SHORTCUTS: Record<
   k: { tool: "scale", handler: "onScaleTool" },
 };
 
+// H1: shift+key variants of a base tool shortcut (Figma muscle-memory), e.g.
+// Shift+L selects the arrow tool while plain L selects the line tool. Keyed
+// by the same lowercased key as TOOL_SHORTCUTS; only consulted when
+// event.shiftKey is true so it never shadows the unshifted binding.
+const SHIFT_TOOL_SHORTCUTS: Record<
+  string,
+  { tool: DesignHotkeyTool; handler: keyof UseDesignHotkeysProps }
+> = {
+  l: { tool: "arrow", handler: "onArrowTool" },
+};
+
 const ARROW_DIRECTIONS: Record<string, DesignHotkeyDirection> = {
   ArrowUp: "up",
   ArrowRight: "right",
@@ -255,6 +293,18 @@ function handleDesignHotkey(
     return true;
   };
 
+  if (!primary && !event.altKey && event.shiftKey) {
+    // H1: shift+key variant (e.g. Shift+L → arrow tool) takes priority over
+    // the base binding for the same key while shift is held.
+    const shiftToolShortcut = SHIFT_TOOL_SHORTCUTS[key];
+    if (shiftToolShortcut) {
+      return runTool(
+        shiftToolShortcut.tool,
+        props[shiftToolShortcut.handler] as DesignHotkeyHandler | undefined,
+      );
+    }
+  }
+
   if (!primary && !event.altKey && !event.shiftKey) {
     const toolShortcut = TOOL_SHORTCUTS[key];
     if (toolShortcut) {
@@ -319,6 +369,11 @@ function handleDesignHotkey(
   if (primary && key === "-") return run(props.onZoomOut);
   if (primary && key === "0") return run(props.onZoomReset);
 
+  // H2: Cmd+Alt+K — create component from the current selection.
+  if (primary && event.altKey && key === "k") {
+    return run(props.onCreateComponent);
+  }
+
   const digit = digitFromEvent(event);
   if (event.shiftKey && !primary && digit === "1") {
     return run(props.onZoomToFit);
@@ -326,6 +381,28 @@ function handleDesignHotkey(
   if (event.shiftKey && !primary && digit === "2") {
     return run(props.onZoomToSelection);
   }
+  // H2: Shift+0 — zoom to 100%. Distinct from Cmd+0 (onZoomReset above).
+  if (event.shiftKey && !primary && !event.altKey && digit === "0") {
+    return run(props.onZoomTo100);
+  }
+
+  // H2: plain digit 1-9/0 (no modifier) — set selection opacity. Figma maps
+  // 1-9 to 10%-90% and 0 to 100%. Only handled when nothing else claimed the
+  // digit (e.g. Shift+1/Shift+2 zoom above) and no modifier is held; the
+  // caller supplies onOpacityChange only when a layer is selected and canvas
+  // has focus, so an absent handler naturally no-ops here.
+  if (
+    !primary &&
+    !event.altKey &&
+    !event.shiftKey &&
+    digit &&
+    props.onOpacityChange
+  ) {
+    const opacity = digit === "0" ? 100 : Number(digit) * 10;
+    prevent();
+    props.onOpacityChange({ ...details, opacity });
+    return true;
+  }
 
   if (primary && key === "]") {
     return event.altKey ? run(props.onBringToFront) : run(props.onBringForward);

package/corpus/templates/design/app/i18n/zh-TW.ts

@@ -502,6 +502,8 @@ const messages = {
       duplicateElementFailed: "無法複製該元素",
       saveCopyError: "無法儲存這個設計的副本",
       auditRunFailed: "無法執行設計稽核",
+      undoSkippedConcurrentEdit: "已略過復原 — 其他人移動了該項目",
+      redoSkippedConcurrentEdit: "已略過重做 — 其他人移動了該項目",
     },
     localSourceEdit: {
       copyPrompt: "複製提示",

package/corpus/templates/design/app/i18n-data.ts

@@ -516,6 +516,8 @@ const enUS = {
       auditRunFailed: "Unable to run design audit",
       componentCreated: "Component created",
       componentCreateFailed: "Could not create component",
+      undoSkippedConcurrentEdit: "Skipped an undo — someone else moved that",
+      redoSkippedConcurrentEdit: "Skipped a redo — someone else moved that",
     },
     localSourceEdit: {
       copyPrompt: "Copy prompt",
@@ -1186,6 +1188,8 @@ const designLocaleOverrides = {
         openScreenSvg: "导出 SVG 之前打开一个屏幕",
         svgDownloaded: "SVG 下载",
         svgExportError: "无法导出 SVG",
+        undoSkippedConcurrentEdit: "已跳过撤消 — 其他人移动了该内容",
+        redoSkippedConcurrentEdit: "已跳过重做 — 其他人移动了该内容",
       },
     },
     designSystemSetup: {
@@ -1544,6 +1548,8 @@ const designLocaleOverrides = {
         openScreenSvg: "Abra una pantalla antes de exportar SVG",
         svgDownloaded: "SVG descargado",
         svgExportError: "No se pudo exportar SVG",
+        undoSkippedConcurrentEdit: "Se omitió deshacer: otra persona movió eso",
+        redoSkippedConcurrentEdit: "Se omitió rehacer: otra persona movió eso",
       },
     },
     designSystemSetup: {
@@ -1921,6 +1927,10 @@ const designLocaleOverrides = {
         openScreenSvg: "Ouvrir un écran avant d'exporter SVG",
         svgDownloaded: "SVG téléchargé",
         svgExportError: "Impossible d'exporter SVG",
+        undoSkippedConcurrentEdit:
+          "Annulation ignorée : quelqu'un d'autre a déplacé cet élément",
+        redoSkippedConcurrentEdit:
+          "Rétablissement ignoré : quelqu'un d'autre a déplacé cet élément",
       },
     },
     designSystemSetup: {
@@ -2298,6 +2308,10 @@ const designLocaleOverrides = {
         openScreenSvg: "Öffnen Sie einen Bildschirm, bevor Sie SVG exportieren",
         svgDownloaded: "SVG heruntergeladen",
         svgExportError: "SVG konnte nicht exportiert werden",
+        undoSkippedConcurrentEdit:
+          "Rückgängig übersprungen – jemand anderes hat das verschoben",
+        redoSkippedConcurrentEdit:
+          "Wiederholen übersprungen – jemand anderes hat das verschoben",
       },
     },
     designSystemSetup: {
@@ -2674,6 +2688,10 @@ const designLocaleOverrides = {
         openScreenSvg: "SVG をエクスポートする前に画面を開く",
         svgDownloaded: "SVGがダウンロードされました",
         svgExportError: "SVG をエクスポートできませんでした",
+        undoSkippedConcurrentEdit:
+          "元に戻す操作をスキップしました — 他のユーザーがそれを移動しました",
+        redoSkippedConcurrentEdit:
+          "やり直し操作をスキップしました — 他のユーザーがそれを移動しました",
       },
     },
     designSystemSetup: {
@@ -3045,6 +3063,10 @@ const designLocaleOverrides = {
         openScreenSvg: "SVG를 내보내기 전에 화면을 엽니다",
         svgDownloaded: "SVG 다운로드됨",
         svgExportError: "SVG를 내보낼 수 없습니다.",
+        undoSkippedConcurrentEdit:
+          "실행 취소를 건너뛰었습니다 — 다른 사용자가 이동했습니다",
+        redoSkippedConcurrentEdit:
+          "다시 실행을 건너뛰었습니다 — 다른 사용자가 이동했습니다",
       },
     },
     designSystemSetup: {
@@ -3412,6 +3434,9 @@ const designLocaleOverrides = {
         openScreenSvg: "Abra uma tela antes de exportar SVG",
         svgDownloaded: "SVG baixado",
         svgExportError: "Não foi possível exportar SVG",
+        undoSkippedConcurrentEdit:
+          "Desfazer ignorado — outra pessoa moveu isso",
+        redoSkippedConcurrentEdit: "Refazer ignorado — outra pessoa moveu isso",
       },
     },
     designSystemSetup: {
@@ -3784,6 +3809,10 @@ const designLocaleOverrides = {
         openScreenSvg: "SVG निर्यात करने से पहले एक स्क्रीन खोलें",
         svgDownloaded: "SVG डाउनलोड किया गया",
         svgExportError: "SVG निर्यात नहीं किया जा सका",
+        undoSkippedConcurrentEdit:
+          "पूर्ववत करना छोड़ दिया गया — किसी और ने इसे स्थानांतरित कर दिया",
+        redoSkippedConcurrentEdit:
+          "फिर से करना छोड़ दिया गया — किसी और ने इसे स्थानांतरित कर दिया",
       },
     },
     designSystemSetup: {
@@ -4149,6 +4178,8 @@ const designLocaleOverrides = {
         openScreenSvg: "افتح الشاشة قبل تصدير SVG",
         svgDownloaded: "تم تنزيل SVG",
         svgExportError: "تعذر تصدير SVG",
+        undoSkippedConcurrentEdit: "تم تخطي التراجع — قام شخص آخر بنقله",
+        redoSkippedConcurrentEdit: "تم تخطي الإعادة — قام شخص آخر بنقله",
       },
     },
     designSystemSetup: {

package/corpus/templates/design/app/lib/design-import.ts

@@ -1,3 +1,5 @@
+import type { PortableStyleSnapshot } from "@/components/design/types";
+
 export interface ImportResult {
   designId?: string;
   files?: Array<{ id: string; filename: string }>;
@@ -43,3 +45,96 @@ export function importResultSummary(
   if (count === 1) return `Imported ${result!.files![0]!.filename}.`;
   return `Imported ${count} screens.`;
 }
+
+// --- Cross-tab / system-clipboard round-trip (U4/U6) ---
+//
+// The in-memory clipboard refs (copiedLayerEntriesRef etc.) never survive a
+// tab switch, a page reload, or a copy made in another window, and pasting
+// from the OS clipboard after copying elsewhere silently reuses the stale
+// in-memory entries instead. To fix that, every copy embeds a serialized
+// marker comment in the text actually written to navigator.clipboard, and
+// paste parses that marker back out of the live clipboard content so a
+// cross-tab paste (or a same-tab paste after an external copy) round-trips
+// the original entries instead of just raw concatenated HTML.
+
+export interface DesignClipboardLayerEntry {
+  html: string;
+  rootNodeId?: string;
+  sourceFileId: string;
+  portableStyleSnapshot?: PortableStyleSnapshot;
+}
+
+export interface DesignClipboardScreenEntry {
+  filename: string;
+  fileType?: string;
+  content: string;
+  canvasFrame?: {
+    x?: number;
+    y?: number;
+    width?: number;
+    height?: number;
+  };
+}
+
+export interface DesignClipboardPayload {
+  version: 1;
+  entries: DesignClipboardLayerEntry[];
+  screens?: DesignClipboardScreenEntry[];
+}
+
+const CLIPBOARD_MARKER_PREFIX = "agent-native-clipboard-v1:";
+
+function encodeClipboardMarkerData(payload: DesignClipboardPayload): string {
+  // btoa is UTF-16-unsafe for non-Latin1 text; encodeURIComponent first so
+  // arbitrary copied HTML (emoji, non-Latin scripts, etc.) round-trips.
+  return btoa(encodeURIComponent(JSON.stringify(payload)));
+}
+
+function decodeClipboardMarkerData(
+  data: string,
+): DesignClipboardPayload | null {
+  try {
+    const json = decodeURIComponent(atob(data));
+    const parsed = JSON.parse(json) as unknown;
+    if (
+      !parsed ||
+      typeof parsed !== "object" ||
+      (parsed as { version?: unknown }).version !== 1 ||
+      !Array.isArray((parsed as { entries?: unknown }).entries)
+    ) {
+      return null;
+    }
+    return parsed as DesignClipboardPayload;
+  } catch {
+    return null;
+  }
+}
+
+/**
+ * Appends an invisible marker comment (safe inside HTML and plain text alike)
+ * encoding the full clipboard payload after the human-visible clipboard text.
+ */
+export function serializeDesignClipboardPayload(
+  visibleText: string,
+  payload: DesignClipboardPayload,
+): string {
+  const marker = `<!--${CLIPBOARD_MARKER_PREFIX}${encodeClipboardMarkerData(payload)}-->`;
+  return `${visibleText}\n${marker}`;
+}
+
+/**
+ * Extracts a previously-serialized payload from clipboard text, if present.
+ * Returns null for clipboard content that was never written by this app (a
+ * plain copy from elsewhere, or another app's clipboard payload).
+ */
+export function parseDesignClipboardMarker(
+  text: string | null | undefined,
+): DesignClipboardPayload | null {
+  if (!text) return null;
+  const markerIndex = text.lastIndexOf(`<!--${CLIPBOARD_MARKER_PREFIX}`);
+  if (markerIndex === -1) return null;
+  const start = markerIndex + 4 + CLIPBOARD_MARKER_PREFIX.length;
+  const end = text.indexOf("-->", start);
+  if (end === -1) return null;
+  return decodeClipboardMarkerData(text.slice(start, end));
+}