@agent-native/core 0.80.2 → 0.80.5

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

@@ -301,6 +301,9 @@ export function CanvasCommentPins({
   const containerRef = useRef<HTMLElement | null>(null);
   const lastSubmitQueuedSignalRef = useRef(submitQueuedSignal);
   const [canvasEl, setCanvasEl] = useState<HTMLElement | null>(null);
+  // Dummy tick forces a re-render (and a fresh getBoundingClientRect()) whenever
+  // the canvas scrolls or resizes, keeping pin overlays in sync.
+  const [, setLayoutTick] = useState(0);
 
   // Reset pins when the context (slide) changes — they're scoped to one view.
   useEffect(() => {
@@ -324,6 +327,32 @@ export function CanvasCommentPins({
     return () => clearTimeout(t);
   }, [active, canvasSelector, contextId]);
 
+  // Re-render when the canvas element moves in the viewport (scroll or resize),
+  // so getBoundingClientRect() returns fresh coordinates for pin overlays.
+  useEffect(() => {
+    const canvas = containerRef.current ?? canvasEl;
+    if (!canvas) return;
+
+    const bump = () => setLayoutTick((t) => t + 1);
+
+    // ResizeObserver fires when the canvas element's own size changes.
+    const ro = new ResizeObserver(bump);
+    ro.observe(canvas);
+
+    // Scroll listeners on the canvas's scrollable ancestor(s) and window cover
+    // both page-level scrolling and container-level panning.
+    const scrollTarget =
+      canvas.closest<HTMLElement>("[class*='overflow']") ?? window;
+    scrollTarget.addEventListener("scroll", bump, { passive: true });
+    window.addEventListener("resize", bump, { passive: true });
+
+    return () => {
+      ro.disconnect();
+      scrollTarget.removeEventListener("scroll", bump);
+      window.removeEventListener("resize", bump);
+    };
+  }, [canvasEl]);
+
   const dropPinAt = useCallback(
     (clientX: number, clientY: number, target?: HTMLElement | null) => {
       const canvas = containerRef.current;
@@ -538,13 +567,24 @@ export function CanvasCommentPins({
     setActivePinId(null);
   };
 
+  // Refs for drag-detection on the click overlay (Bug 3 fix).
+  // A pin is only dropped on a completed click, not on any drag gesture.
+  const overlayDownPos = useRef<{ x: number; y: number } | null>(null);
+  const overlayDidDrag = useRef(false);
+
   if (!active && pins.length === 0) return null;
 
   // Render pins as portaled overlays positioned on top of the canvas
   const canvas = containerRef.current ?? canvasEl;
   if (!canvas) return null;
   const rect = canvas.getBoundingClientRect();
-  const summaryLeft = Math.min(rect.right - 8, window.innerWidth - 8);
+  // Clamp summaryLeft so the w-64 (256px) panel, which is shifted left by
+  // -translate-x-full, never overflows the left viewport edge.
+  // 264 = 256 (panel width) + 8 (minimum margin from the viewport left edge).
+  const summaryLeft = Math.max(
+    264,
+    Math.min(rect.right - 8, window.innerWidth - 8),
+  );
   const summaryTop = Math.max(rect.top + 8, 72);
 
   return (
@@ -565,13 +605,25 @@ export function CanvasCommentPins({
             height: rect.height,
           }}
           onPointerDown={(e) => {
-            e.preventDefault();
+            overlayDownPos.current = { x: e.clientX, y: e.clientY };
+            overlayDidDrag.current = false;
             e.stopPropagation();
-            dropPinAt(e.clientX, e.clientY);
+          }}
+          onPointerMove={(e) => {
+            if (overlayDownPos.current) {
+              const dx = e.clientX - overlayDownPos.current.x;
+              const dy = e.clientY - overlayDownPos.current.y;
+              if (dx * dx + dy * dy > 16) overlayDidDrag.current = true;
+            }
           }}
           onClick={(e) => {
             e.preventDefault();
             e.stopPropagation();
+            if (!overlayDidDrag.current) {
+              dropPinAt(e.clientX, e.clientY);
+            }
+            overlayDownPos.current = null;
+            overlayDidDrag.current = false;
           }}
         />
       )}
@@ -714,96 +766,120 @@ export function CanvasCommentPins({
 
             {/* Inline composer. z-[260] keeps it above the shadcn floating-UI
              * tier (z-[250] — Tooltip, Popover, Dialog overlay, etc.) so a
-             * stray tooltip that pops over the pin can't swallow Send clicks. */}
-            {isActive && !pin.submitted && (
-              <div
-                data-pin-popover
-                className="absolute z-[260] left-3 top-1 w-72 rounded-lg border border-border bg-popover shadow-xl p-2"
-              >
-                <div className="mb-2 flex items-center justify-between gap-2">
-                  <p className="text-xs font-semibold text-foreground">
-                    {t("visualEditor.editDesign")}
-                  </p>
-                  <PinStatusBadge status={status} />
-                </div>
-                <Textarea
-                  autoFocus
-                  value={pin.draft || ""}
-                  onChange={(e) =>
-                    updatePin(pin.id, {
-                      draft: e.target.value,
-                      queued: false,
-                    })
-                  }
-                  onKeyDown={(e) => {
-                    if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
-                      e.preventDefault();
-                      submitPin(pin);
-                    }
-                    if (e.key === "Escape") {
-                      e.preventDefault();
-                      removePin(pin.id);
-                    }
-                  }}
-                  placeholder={t("visualEditor.tellAgentWhatToChange")}
-                  className="resize-none text-xs min-h-[60px]"
-                />
-                <p className="mt-1 text-[10px] leading-4 text-muted-foreground">
-                  {status.detail}
-                </p>
-                {pin.targetAnchorId && (
-                  <div className="mt-1 truncate rounded-md bg-muted/45 px-2 py-1 text-[10px] text-muted-foreground">
-                    {t("visualEditor.anchorLabel", {
-                      id: pin.targetAnchorId,
-                    })}
-                  </div>
-                )}
-                {pin.targetText && (
-                  <div className="text-[10px] text-muted-foreground mt-1 italic line-clamp-1">
-                    {t("visualEditor.nearText", { text: pin.targetText })}
-                  </div>
-                )}
-                <div className="flex items-center justify-between mt-2">
-                  <span className="text-[10px] text-muted-foreground">
-                    {t("visualEditor.submitShortcut", {
-                      mod: /Mac|iPhone|iPad/.test(navigator.userAgent)
-                        ? "⌘"
-                        : "Ctrl",
-                    })}
-                  </span>
-                  <div className="flex gap-1">
-                    <Button
-                      size="sm"
-                      variant="ghost"
-                      className="h-6 px-2 text-[10px] cursor-pointer"
-                      onClick={() => removePin(pin.id)}
-                    >
-                      <IconX className="w-3 h-3" />
-                    </Button>
-                    <Button
-                      size="sm"
-                      variant="outline"
-                      className="h-6 gap-1 px-2 text-[10px] cursor-pointer"
-                      onClick={() => queuePin(pin)}
-                      disabled={!(pin.draft || "").trim()}
-                    >
-                      {t("visualEditor.queue")}
-                    </Button>
-                    {submitMode === "direct" && (
-                      <Button
-                        size="sm"
-                        className="h-6 gap-1 px-2 text-[10px] cursor-pointer"
-                        onClick={() => submitPin(pin)}
-                        disabled={!(pin.draft || "").trim()}
-                      >
-                        <IconSend className="w-3 h-3" />
-                        {t("visualEditor.send")}
-                      </Button>
+             * stray tooltip that pops over the pin can't swallow Send clicks.
+             * Composer is flipped horizontally and/or vertically when the pin
+             * is near a viewport edge so it stays fully on-screen. */}
+            {isActive &&
+              !pin.submitted &&
+              (() => {
+                const composerW = 288; // w-72
+                const composerH = 220; // estimated height
+                const flipX = left + 12 + composerW > window.innerWidth;
+                const flipY = top + 4 + composerH > window.innerHeight;
+                return (
+                  <div
+                    data-pin-popover
+                    className="absolute z-[260] w-72 rounded-lg border border-border bg-popover shadow-xl p-2"
+                    style={{
+                      ...(flipX
+                        ? { right: "calc(100% + 4px)", left: "auto" }
+                        : { left: "0.75rem" }),
+                      ...(flipY
+                        ? { bottom: "calc(100% + 4px)", top: "auto" }
+                        : { top: "0.25rem" }),
+                    }}
+                  >
+                    <div className="mb-2 flex items-center justify-between gap-2">
+                      <p className="text-xs font-semibold text-foreground">
+                        {t("visualEditor.editDesign")}
+                      </p>
+                      <PinStatusBadge status={status} />
+                    </div>
+                    <Textarea
+                      autoFocus
+                      value={pin.draft || ""}
+                      onChange={(e) =>
+                        updatePin(pin.id, {
+                          draft: e.target.value,
+                          queued: false,
+                        })
+                      }
+                      onKeyDown={(e) => {
+                        if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) {
+                          e.preventDefault();
+                          submitPin(pin);
+                        }
+                        if (e.key === "Escape") {
+                          // Stop propagation so the window Escape listener (which
+                          // calls onClose) does not also fire. Collapse the composer
+                          // back to the pin dot while preserving the draft text —
+                          // the pin and any typed draft survive. A second Escape
+                          // with no composer open exits pin mode, matching Figma.
+                          e.stopPropagation();
+                          e.preventDefault();
+                          setActivePinId(null);
+                        }
+                      }}
+                      placeholder={t("visualEditor.tellAgentWhatToChange")}
+                      className="resize-none text-xs min-h-[60px]"
+                    />
+                    <p className="mt-1 text-[10px] leading-4 text-muted-foreground">
+                      {status.detail}
+                    </p>
+                    {pin.targetAnchorId && (
+                      <div className="mt-1 truncate rounded-md bg-muted/45 px-2 py-1 text-[10px] text-muted-foreground">
+                        {t("visualEditor.anchorLabel", {
+                          id: pin.targetAnchorId,
+                        })}
+                      </div>
+                    )}
+                    {pin.targetText && (
+                      <div className="text-[10px] text-muted-foreground mt-1 italic line-clamp-1">
+                        {t("visualEditor.nearText", { text: pin.targetText })}
+                      </div>
                     )}
+                    <div className="flex items-center justify-between mt-2">
+                      <span className="text-[10px] text-muted-foreground">
+                        {t("visualEditor.submitShortcut", {
+                          mod: /Mac|iPhone|iPad/.test(navigator.userAgent)
+                            ? "⌘"
+                            : "Ctrl",
+                        })}
+                      </span>
+                      <div className="flex gap-1">
+                        <Button
+                          size="sm"
+                          variant="ghost"
+                          className="h-6 px-2 text-[10px] cursor-pointer"
+                          onClick={() => removePin(pin.id)}
+                        >
+                          <IconX className="w-3 h-3" />
+                        </Button>
+                        <Button
+                          size="sm"
+                          variant="outline"
+                          className="h-6 gap-1 px-2 text-[10px] cursor-pointer"
+                          onClick={() => queuePin(pin)}
+                          disabled={!(pin.draft || "").trim()}
+                        >
+                          {t("visualEditor.queue")}
+                        </Button>
+                        {submitMode === "direct" && (
+                          <Button
+                            size="sm"
+                            className="h-6 gap-1 px-2 text-[10px] cursor-pointer"
+                            onClick={() => submitPin(pin)}
+                            disabled={!(pin.draft || "").trim()}
+                          >
+                            <IconSend className="w-3 h-3" />
+                            {t("visualEditor.send")}
+                          </Button>
+                        )}
+                      </div>
+                    </div>
                   </div>
-                </div>
-              </div>
-            )}
+                );
+              })()}
           </div>
         );
       })}

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

@@ -125,6 +125,7 @@ export function DrawOverlay({
   } | null>(null);
   const [instruction, setInstruction] = useState("");
   const drawing = useRef(false);
+  const canvasSizeRef = useRef({ w: 0, h: 0 });
 
   // Clear all state on hide so the next open starts fresh.
   useEffect(() => {
@@ -146,9 +147,15 @@ export function DrawOverlay({
     if (!ctx) return;
 
     const rect = canvas.getBoundingClientRect();
-    canvas.width = rect.width * window.devicePixelRatio;
-    canvas.height = rect.height * window.devicePixelRatio;
-    ctx.scale(window.devicePixelRatio, window.devicePixelRatio);
+    const dpr = window.devicePixelRatio;
+    const newW = rect.width * dpr;
+    const newH = rect.height * dpr;
+    if (newW !== canvasSizeRef.current.w || newH !== canvasSizeRef.current.h) {
+      canvas.width = newW;
+      canvas.height = newH;
+      canvasSizeRef.current = { w: newW, h: newH };
+      ctx.scale(dpr, dpr);
+    }
 
     ctx.clearRect(0, 0, rect.width, rect.height);
 
@@ -212,6 +219,11 @@ export function DrawOverlay({
     setCurrentStroke(null);
   }, [currentStroke, color, lineWidth]);
 
+  const handlePointerCancel = useCallback(() => {
+    drawing.current = false;
+    setCurrentStroke(null);
+  }, []);
+
   const undo = () => {
     setStrokes((prev) => {
       if (prev.length === 0) return prev;
@@ -328,6 +340,7 @@ export function DrawOverlay({
         onPointerDown={handlePointerDown}
         onPointerMove={handlePointerMove}
         onPointerUp={handlePointerUp}
+        onPointerCancel={handlePointerCancel}
       />
 
       {/* Rendered text annotations */}

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

@@ -17,6 +17,7 @@ interface SaveStatusIndicatorProps {
 }
 
 export function SaveStatusIndicator({
+  saving,
   offline,
   className,
 }: SaveStatusIndicatorProps) {
@@ -45,5 +46,19 @@ 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/global.css

@@ -188,6 +188,10 @@
   --agent-native-raised-shadow-right: 1px 0 0 var(--design-shell-divider);
 }
 
+.agent-layout-shell .agent-sidebar-main-surface::before {
+  box-shadow: none;
+}
+
 .dark .agent-layout-shell,
 .dark .agent-sidebar-shell,
 .dark.agent-layout-shell,

package/corpus/templates/design/app/hooks/use-design-system.ts

@@ -33,7 +33,10 @@ export function useDesignSystem(designSystemId?: string | null) {
   }>("get-design-system", designSystemId ? { id: designSystemId } : undefined);
 
   if (!designSystemId || !data?.data) {
-    return { designSystem: DEFAULT_DESIGN_SYSTEM, isLoading: false };
+    return {
+      designSystem: DEFAULT_DESIGN_SYSTEM,
+      isLoading: !!designSystemId && isLoading,
+    };
   }
 
   try {

package/corpus/templates/design/app/hooks/use-navigation-state.ts

@@ -17,9 +17,27 @@ export interface NavigationState {
   filename?: string;
   screen?: string;
   zoom?: number;
+  tool?: string;
   path?: string;
 }
 
+const DESIGN_EDITOR_TOOLS = [
+  "move",
+  "frame",
+  "rect",
+  "line",
+  "arrow",
+  "ellipse",
+  "polygon",
+  "star",
+  "text",
+  "pen",
+  "hand",
+  "comment",
+  "draw",
+  "scale",
+] as const;
+
 export interface DesignEditorCommand {
   designId: string;
   editorView?: "single" | "overview";
@@ -62,6 +80,13 @@ function normalizeInspectorTab(
     : undefined;
 }
 
+function normalizeDesignTool(value: unknown): string | undefined {
+  return typeof value === "string" &&
+    DESIGN_EDITOR_TOOLS.includes(value as (typeof DESIGN_EDITOR_TOOLS)[number])
+    ? value
+    : undefined;
+}
+
 export function editorPathFromCommand(cmd: NavigationState): string | null {
   if (cmd.path) return cmd.path;
   if (cmd.view !== "editor" || !cmd.designId) return null;
@@ -78,6 +103,8 @@ export function editorPathFromCommand(cmd: NavigationState): string | null {
   } else if (editorView === "single") {
     params.set("zoom", String(FOCUSED_SCREEN_ZOOM));
   }
+  const tool = normalizeDesignTool(cmd.tool);
+  if (tool) params.set("tool", tool);
 
   const query = params.toString();
   return `/design/${encodeURIComponent(cmd.designId)}${query ? `?${query}` : ""}`;
@@ -106,10 +133,12 @@ export function editorCommandFromNavigate(
   } else if (editorView === "single") {
     command.zoom = FOCUSED_SCREEN_ZOOM;
   }
+  const tool = normalizeDesignTool(cmd.tool);
+  if (tool) command.tool = tool;
   return command;
 }
 
-export function useNavigationState() {
+export function useNavigationState(enabled = true) {
   const params = useParams();
   const browserTabId = getBrowserTabId();
 
@@ -134,8 +163,13 @@ export function useNavigationState() {
         if (fileId) state.fileId = fileId;
         const filename = searchParams.get("filename");
         if (filename) state.filename = filename;
-        const zoom = Number(searchParams.get("zoom"));
-        if (Number.isFinite(zoom)) state.zoom = zoom;
+        const rawZoom = searchParams.get("zoom");
+        if (rawZoom !== null) {
+          const zoom = Number(rawZoom);
+          if (Number.isFinite(zoom)) state.zoom = zoom;
+        }
+        const tool = normalizeDesignTool(searchParams.get("tool"));
+        if (tool) state.tool = tool;
       } else if (pathname.startsWith("/design-systems")) {
         state.view = "design-systems";
         const designSystemId = searchParams.get("designSystemId");
@@ -177,5 +211,6 @@ export function useNavigationState() {
         setClientAppState(key, command).catch(() => {});
       }
     },
+    enabled,
   });
 }

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

@@ -127,6 +127,12 @@ export function isDesignHotkeyEditableTarget(target: EventTarget | null) {
   if (editable instanceof HTMLElement && editable.isContentEditable) {
     return true;
   }
+  if (
+    editable instanceof HTMLElement &&
+    editable.hasAttribute("data-hotkeys-scope")
+  ) {
+    return true;
+  }
   const tagName = editable.tagName.toLowerCase();
   return tagName === "input" || tagName === "textarea" || tagName === "select";
 }
@@ -292,6 +298,7 @@ function handleDesignHotkey(
     return run(props.onPaste);
   }
   if (primary && key === "d") return run(props.onDuplicate);
+  if (primary && key === "r") return run(props.onRename);
   if (primary && key === "g") {
     return event.shiftKey ? run(props.onUngroup) : run(props.onGroup);
   }
@@ -301,10 +308,10 @@ function handleDesignHotkey(
   if (primary && key === "0") return run(props.onZoomReset);
 
   const digit = digitFromEvent(event);
-  if ((primary || event.shiftKey) && digit === "1") {
+  if (event.shiftKey && !primary && digit === "1") {
     return run(props.onZoomToFit);
   }
-  if ((primary || event.shiftKey) && digit === "2") {
+  if (event.shiftKey && !primary && digit === "2") {
     return run(props.onZoomToSelection);
   }
 

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

@@ -248,6 +248,12 @@ const messages = {
     backToDesigns: "返回設計",
     clickToRename: "點選重新命名",
     collaborators: "協作者",
+    share: "分享",
+    signUpToSave: "儲存副本",
+    signUpToSaveDescription: "登入即可儲存這個設計的可編輯副本。",
+    signUpToShare: "登入以分享",
+    shareEditorLink: "編輯器連結",
+    shareEditorLinkDescription: "分享可在編輯器中開啟這個設計的連結。",
     modes: {
       annotate: "註解",
       comment: "評論",
@@ -335,6 +341,7 @@ const messages = {
       "建立一個小型檢查器擴充功能，用來讀取所選元素、呼叫操作，或請代理更新畫板。",
     extensionsAvailable: "可用",
     extensionsInstall: "新增",
+    extensionsInstallError: "安裝擴充功能失敗",
     generatePlaceholder: "描述您想要建置的內容...",
     tweaksPromptTitle: "您想要哪些調整？",
     tweaksPlaceholder: "強調色選項、密度、圓角、深色模式...",
@@ -402,6 +409,7 @@ const messages = {
       propsPasted: "屬性已貼上",
       primitiveInsertFailed: "無法將該圖層新增到畫面",
       layerMoveFailed: "無法移動該圖層",
+      saveCopyError: "無法儲存這個設計的副本",
     },
   },
   layersPanel: {
@@ -475,6 +483,7 @@ const messages = {
     assetsTitle: "Assets",
     assetsImagePicker: "Assets圖片選取器",
     loadingAssetsPicker: "載入 Assets 選取器",
+    assetsNoImageUrl: "Assets 未回傳圖片 URL。",
     assetAdded: "新增資產",
     failedToUploadFile: "上傳檔案失敗",
     designSystem: "Design系統",
@@ -503,6 +512,7 @@ const messages = {
     tellAgentWhatToChange: "告訴代理要更改什麼...",
     changesSaveWhenReconnected: "重新連線時將儲存更改",
     offline: "離線",
+    saving: "儲存...",
     clearedAllAnnotations: "已清除所有批注",
     undo: "復原",
     send: "傳送",
@@ -548,6 +558,17 @@ const messages = {
       blocked: "阻擋 {{count}}",
     },
   },
+  visualEdit: {
+    eyebrow: "視覺編輯",
+    title: "登入前先檢查本機應用畫面",
+    description:
+      "無需帳號即可開啟 visual-edit。只有在想儲存設計、保留畫面版面、與他人分享或生成新方向時才需要註冊。",
+    saveCta: "免費註冊以儲存",
+    openDesign: "開啟 Design",
+    templatesCta: "瀏覽範本",
+    previewLabel: "本機預覽",
+    layoutLabel: "畫面版面已可儲存",
+  },
   home: {
     pageTitle: "Design",
     searchPlaceholder: "搜尋設計...",
@@ -610,6 +631,7 @@ const messages = {
     designPreview: "Design 預覽",
     settingsDesign: "設定 — Design",
     teamDesign: "團隊 - Design",
+    visualEdit: "視覺編輯 - Design",
   },
   designSystemSetup: {
     importedBrand: "進口品牌",