@agent-native/core 0.79.27 → 0.80.0

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

@@ -0,0 +1,329 @@
+import { useEffect, useRef } from "react";
+
+export type DesignHotkeyTool =
+  | "move"
+  | "frame"
+  | "rectangle"
+  | "text"
+  | "pen"
+  | "hand"
+  | "comment"
+  | "scale";
+
+export type DesignHotkeyDirection = "up" | "right" | "down" | "left";
+
+export interface DesignHotkeyDetails {
+  event: KeyboardEvent;
+  key: string;
+  primary: boolean;
+  shift: boolean;
+  alt: boolean;
+  repeat: boolean;
+}
+
+export interface DesignHotkeyNudgeDetails extends DesignHotkeyDetails {
+  direction: DesignHotkeyDirection;
+  largeStep: boolean;
+}
+
+export interface DesignHotkeyTabDetails extends DesignHotkeyDetails {
+  backwards: boolean;
+}
+
+export type DesignHotkeyTarget = Window | Document | HTMLElement;
+export type DesignHotkeyHandler = (details: DesignHotkeyDetails) => void;
+export type DesignHotkeyToolHandler = (
+  tool: DesignHotkeyTool,
+  details: DesignHotkeyDetails,
+) => void;
+export type DesignHotkeyNudgeHandler = (
+  details: DesignHotkeyNudgeDetails,
+) => void;
+export type DesignHotkeyTabHandler = (details: DesignHotkeyTabDetails) => void;
+
+export interface UseDesignHotkeysProps {
+  enabled?: boolean;
+  capture?: boolean;
+  target?: DesignHotkeyTarget | null;
+  preventDefault?: boolean;
+  ignoreEditableTargets?: boolean;
+  shouldHandleEvent?: (event: KeyboardEvent) => boolean;
+  onToolChange?: DesignHotkeyToolHandler;
+  onMoveTool?: DesignHotkeyHandler;
+  onFrameTool?: DesignHotkeyHandler;
+  onRectangleTool?: DesignHotkeyHandler;
+  onTextTool?: DesignHotkeyHandler;
+  onPenTool?: DesignHotkeyHandler;
+  onHandTool?: DesignHotkeyHandler;
+  onCommentTool?: DesignHotkeyHandler;
+  onScaleTool?: DesignHotkeyHandler;
+  onCopy?: DesignHotkeyHandler;
+  onCut?: DesignHotkeyHandler;
+  onPaste?: DesignHotkeyHandler;
+  onPasteOver?: DesignHotkeyHandler;
+  onCopyProps?: DesignHotkeyHandler;
+  onPasteProps?: DesignHotkeyHandler;
+  onCopyAsCode?: DesignHotkeyHandler;
+  onDuplicate?: DesignHotkeyHandler;
+  onDelete?: DesignHotkeyHandler;
+  onRename?: DesignHotkeyHandler;
+  onSelectAll?: DesignHotkeyHandler;
+  onGroup?: DesignHotkeyHandler;
+  onUngroup?: DesignHotkeyHandler;
+  onUndo?: DesignHotkeyHandler;
+  onRedo?: DesignHotkeyHandler;
+  onBringForward?: DesignHotkeyHandler;
+  onBringToFront?: DesignHotkeyHandler;
+  onSendBackward?: DesignHotkeyHandler;
+  onSendToBack?: DesignHotkeyHandler;
+  onEscape?: DesignHotkeyHandler;
+  onEnter?: DesignHotkeyHandler;
+  onTab?: DesignHotkeyTabHandler;
+  onNudge?: DesignHotkeyNudgeHandler;
+  onZoomIn?: DesignHotkeyHandler;
+  onZoomOut?: DesignHotkeyHandler;
+  onZoomReset?: DesignHotkeyHandler;
+  onZoomToFit?: DesignHotkeyHandler;
+  onZoomToSelection?: DesignHotkeyHandler;
+}
+
+const TOOL_SHORTCUTS: Record<
+  string,
+  { tool: DesignHotkeyTool; handler: keyof UseDesignHotkeysProps }
+> = {
+  v: { tool: "move", handler: "onMoveTool" },
+  f: { tool: "frame", handler: "onFrameTool" },
+  r: { tool: "rectangle", handler: "onRectangleTool" },
+  t: { tool: "text", handler: "onTextTool" },
+  p: { tool: "pen", handler: "onPenTool" },
+  h: { tool: "hand", handler: "onHandTool" },
+  c: { tool: "comment", handler: "onCommentTool" },
+  k: { tool: "scale", handler: "onScaleTool" },
+};
+
+const ARROW_DIRECTIONS: Record<string, DesignHotkeyDirection> = {
+  ArrowUp: "up",
+  ArrowRight: "right",
+  ArrowDown: "down",
+  ArrowLeft: "left",
+};
+
+export function isDesignHotkeyEditableTarget(target: EventTarget | null) {
+  if (!target || typeof Element === "undefined") return false;
+  if (!(target instanceof Element)) return false;
+
+  const editable = target.closest(
+    [
+      "input",
+      "textarea",
+      "select",
+      "[contenteditable]",
+      '[role="textbox"]',
+      '[data-hotkeys-scope="text"]',
+    ].join(","),
+  );
+
+  if (!editable) return false;
+  if (editable instanceof HTMLElement && editable.isContentEditable) {
+    return true;
+  }
+  const tagName = editable.tagName.toLowerCase();
+  return tagName === "input" || tagName === "textarea" || tagName === "select";
+}
+
+function isFocusableChromeTarget(target: EventTarget | null) {
+  if (!target || typeof Element === "undefined") return false;
+  if (!(target instanceof Element)) return false;
+  if (target === document.body || target === document.documentElement) {
+    return false;
+  }
+  return Boolean(
+    target.closest(
+      [
+        "a[href]",
+        "button",
+        "summary",
+        "input",
+        "textarea",
+        "select",
+        "[contenteditable]",
+        '[role="button"]',
+        '[role="menuitem"]',
+        '[role="option"]',
+        '[role="tab"]',
+        '[tabindex]:not([tabindex="-1"])',
+      ].join(","),
+    ),
+  );
+}
+
+export function useDesignHotkeys(props: UseDesignHotkeysProps) {
+  const propsRef = useRef(props);
+
+  useEffect(() => {
+    propsRef.current = props;
+  }, [props]);
+
+  useEffect(() => {
+    const eventTarget =
+      props.target ??
+      (typeof window === "undefined" ? null : (window as DesignHotkeyTarget));
+    if (!eventTarget || props.enabled === false) return;
+
+    const handleKeyDown = (event: Event) => {
+      if (!(event instanceof KeyboardEvent)) return;
+      const current = propsRef.current;
+      if (current.enabled === false) return;
+      if (event.defaultPrevented || event.isComposing) return;
+      if (current.shouldHandleEvent && !current.shouldHandleEvent(event))
+        return;
+      if (
+        current.ignoreEditableTargets !== false &&
+        isDesignHotkeyEditableTarget(event.target)
+      ) {
+        return;
+      }
+
+      handleDesignHotkey(event, current);
+    };
+
+    eventTarget.addEventListener("keydown", handleKeyDown, {
+      capture: props.capture,
+    });
+    return () => {
+      eventTarget.removeEventListener("keydown", handleKeyDown, {
+        capture: props.capture,
+      });
+    };
+  }, [props.capture, props.enabled, props.target]);
+}
+
+function handleDesignHotkey(
+  event: KeyboardEvent,
+  props: UseDesignHotkeysProps,
+) {
+  const key = normalizedKey(event);
+  const primary = event.metaKey || event.ctrlKey;
+  const details: DesignHotkeyDetails = {
+    event,
+    key,
+    primary,
+    shift: event.shiftKey,
+    alt: event.altKey,
+    repeat: event.repeat,
+  };
+
+  const prevent = () => {
+    if (props.preventDefault !== false) event.preventDefault();
+  };
+
+  const run = (handler: DesignHotkeyHandler | undefined) => {
+    if (!handler) return false;
+    prevent();
+    handler(details);
+    return true;
+  };
+
+  const runTool = (
+    tool: DesignHotkeyTool,
+    handler: DesignHotkeyHandler | undefined,
+  ) => {
+    if (!handler && !props.onToolChange) return false;
+    prevent();
+    handler?.(details);
+    props.onToolChange?.(tool, details);
+    return true;
+  };
+
+  const runNudge = (direction: DesignHotkeyDirection) => {
+    if (!props.onNudge) return false;
+    prevent();
+    props.onNudge({
+      ...details,
+      direction,
+      largeStep: event.shiftKey,
+    });
+    return true;
+  };
+
+  if (!primary && !event.altKey && !event.shiftKey) {
+    const toolShortcut = TOOL_SHORTCUTS[key];
+    if (toolShortcut) {
+      return runTool(
+        toolShortcut.tool,
+        props[toolShortcut.handler] as DesignHotkeyHandler | undefined,
+      );
+    }
+  }
+
+  if (event.key in ARROW_DIRECTIONS && !primary && !event.altKey) {
+    return runNudge(ARROW_DIRECTIONS[event.key]);
+  }
+
+  if (event.key === "Escape") return run(props.onEscape);
+  if (event.key === "Enter") return run(props.onEnter);
+  if (
+    event.key === "Tab" &&
+    props.onTab &&
+    !isFocusableChromeTarget(event.target)
+  ) {
+    prevent();
+    props.onTab({ ...details, backwards: event.shiftKey });
+    return true;
+  }
+  if ((event.key === "Delete" || event.key === "Backspace") && !primary) {
+    return run(props.onDelete);
+  }
+
+  if (primary && key === "z") {
+    return event.shiftKey ? run(props.onRedo) : run(props.onUndo);
+  }
+  if (primary && key === "y") return run(props.onRedo);
+  if (primary && key === "a") return run(props.onSelectAll);
+  if (primary && key === "x") return run(props.onCut);
+  if (primary && key === "c") {
+    if (event.altKey) return run(props.onCopyProps);
+    if (event.shiftKey) return run(props.onCopyAsCode);
+    return run(props.onCopy);
+  }
+  if (primary && key === "v") {
+    if (event.altKey) return run(props.onPasteProps);
+    if (event.shiftKey) return run(props.onPasteOver);
+    return run(props.onPaste);
+  }
+  if (primary && key === "d") return run(props.onDuplicate);
+  if (primary && key === "g") {
+    return event.shiftKey ? run(props.onUngroup) : run(props.onGroup);
+  }
+
+  if (primary && (key === "=" || key === "+")) return run(props.onZoomIn);
+  if (primary && key === "-") return run(props.onZoomOut);
+  if (primary && key === "0") return run(props.onZoomReset);
+
+  const digit = digitFromEvent(event);
+  if ((primary || event.shiftKey) && digit === "1") {
+    return run(props.onZoomToFit);
+  }
+  if ((primary || event.shiftKey) && digit === "2") {
+    return run(props.onZoomToSelection);
+  }
+
+  if (primary && key === "]") {
+    return event.altKey ? run(props.onBringToFront) : run(props.onBringForward);
+  }
+  if (primary && key === "[") {
+    return event.altKey ? run(props.onSendToBack) : run(props.onSendBackward);
+  }
+
+  return false;
+}
+
+function normalizedKey(event: KeyboardEvent) {
+  if (event.key === " ") return "space";
+  return event.key.length === 1 ? event.key.toLowerCase() : event.key;
+}
+
+function digitFromEvent(event: KeyboardEvent) {
+  if (event.code.startsWith("Digit")) return event.code.slice("Digit".length);
+  return /^[0-9]$/.test(event.key) ? event.key : "";
+}

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

@@ -52,10 +52,16 @@ const messages = {
       page: "頁面",
       typography: "版式",
       flexLayout: "彈性布局",
+      autoLayout: "自動布局",
+      positionLayout: "位置",
       layout: "布局",
       spacing: "間距",
       border: "邊界",
       fill: "充滿",
+      stroke: "描邊",
+      effects: "效果",
+      codeConfidence: "程式碼",
+      export: "匯出",
     },
     labels: {
       background: "背景",
@@ -76,6 +82,71 @@ const messages = {
       padding: "填充",
       margin: "利潤",
       radius: "半徑",
+      flexGrow: "增長",
+      flexShrink: "收縮",
+      flexBasis: "基準",
+      order: "順序",
+      alignSelf: "自身對齊",
+      gridColumn: "欄",
+      gridRow: "列",
+      position: "位置",
+      display: "顯示",
+      image: "圖片",
+      style: "樣式",
+      rotation: "旋轉",
+      flipHorizontal: "水平翻轉",
+      flipVertical: "垂直翻轉",
+      shadow: "陰影",
+      filter: "濾鏡",
+      addLayer: "新增圖層",
+      removeLayer: "移除圖層",
+      showLayer: "顯示圖層",
+      hideLayer: "隱藏圖層",
+      linkSides: "連結四邊",
+      unlinkSides: "取消連結四邊",
+      allSides: "全部",
+      cornerRadius: "圓角半徑",
+      independentCorners: "獨立圓角",
+      topLeft: "左上",
+      topRight: "右上",
+      bottomLeft: "左下",
+      bottomRight: "右下",
+      blend: "混合",
+      border: "邊框",
+      outline: "外框",
+      inside: "內側",
+      outside: "外側",
+      dropShadow: "投影",
+      addDropShadow: "新增投影",
+      innerShadow: "內陰影",
+      layerBlur: "圖層模糊",
+      blur: "模糊",
+      spread: "擴散",
+    },
+    selection: {
+      pageContext: "頁面預設",
+    },
+    layoutContext: {
+      container: "容器",
+      child: "子層",
+      gridChild: "格線子層",
+      parent: "父層",
+      flexContainer: "彈性",
+      notContainer: "一般流",
+      flexChild: "彈性子層",
+      flowChild: "流式子層",
+      flowDescription:
+        "此圖層位於一般文件流中。可使用位置控制進行明確偏移，或請代理調整結構布局。",
+    },
+    codeStatus: {
+      safeStyle: "安全樣式編輯",
+      safeStyleDescription:
+        "這些控制項會先套用即時樣式，再持久寫回 HTML 原始碼。",
+      classTarget: "穩定 class/id 目標",
+      selectorFallback: "選擇器備援",
+      agentStructural: "結構移動需要代理",
+      agentStructuralDescription:
+        "移動、包裹層與父層布局重寫需要代理保留意圖。",
     },
     sidePlaceholders: {
       top: "時間",
@@ -131,6 +202,36 @@ const messages = {
       stretch: "拉緊",
       baseline: "基線",
     },
+    alignSelfOptions: {
+      auto: "自動",
+      start: "起點",
+      center: "置中",
+      end: "終點",
+      stretch: "延展",
+      baseline: "基線",
+    },
+    displayOptions: {
+      block: "區塊",
+      flex: "彈性",
+      grid: "格線",
+      inline: "行內",
+      inlineBlock: "行內區塊",
+      none: "無",
+    },
+    positionOptions: {
+      static: "靜態",
+      relative: "相對",
+      absolute: "絕對",
+      fixed: "固定",
+      sticky: "黏著",
+    },
+    borderStyleOptions: {
+      none: "無",
+      solid: "實線",
+      dashed: "虛線",
+      dotted: "點線",
+      double: "雙線",
+    },
   },
   designEditor: {
     generationMayHaveStopped:
@@ -142,14 +243,30 @@ const messages = {
     backToDesigns: "返回設計",
     clickToRename: "點選重新命名",
     modes: {
+      annotate: "註解",
       comment: "評論",
       edit: "編輯",
       draw: "畫",
+      interact: "Interact",
+      screens: "螢幕",
+    },
+    fileTabs: "檔案",
+    tools: {
+      move: "移動",
+      frame: "畫框",
+      rect: "矩形",
+      text: "文字",
+      pen: "鋼筆",
+      hand: "手形",
+      scale: "縮放",
     },
     undo: "復原",
     undoShortcut: "復原 (⌘Z)",
     redo: "重做",
     redoShortcut: "重做 (⇧⌘Z)",
+    duplicate: "複製",
+    delete: "刪除",
+    view: "檢視",
     returnToCurrentScreen: "返回目前螢幕",
     openScreenOverview: "開啟螢幕概覽",
     currentScreen: "目前螢幕",
@@ -196,6 +313,16 @@ const messages = {
     addTweakControls: "新增調整控制項",
     closeTweaks: "關閉調整",
     noTweakControls: "還沒有調整控制項。",
+    extensions: "擴充功能",
+    addExtension: "擴充功能",
+    extensionsDocs: "文件",
+    extensionsPromptTitle: "這個擴充功能應該做什麼？",
+    extensionsPlaceholder: "樣式工具、選取輔助、畫板操作...",
+    extensionsEmptyTitle: "還沒有編輯器擴充功能",
+    extensionsEmptyDescription:
+      "建立一個小型檢查器擴充功能，用來讀取所選元素、呼叫操作，或請代理更新畫板。",
+    extensionsAvailable: "可用",
+    extensionsInstall: "新增",
     generatePlaceholder: "描述您想要建置的內容...",
     tweaksPromptTitle: "您想要哪些調整？",
     tweaksPlaceholder: "強調色選項、密度、圓角、深色模式...",
@@ -213,6 +340,29 @@ const messages = {
     closeOtherTabs: "關閉其他",
     closeTab: "關閉",
     fitToScreen: "適合螢幕",
+    patchProof: {
+      title: "補丁證明",
+      file: "檔案",
+      source: "來源",
+      capability: "能力",
+      pending: "已套用即時預覽；來源寫入待處理",
+      verified: "來源寫入已驗證；可回復",
+      rollback: "回復",
+      keep: "保留",
+      selectorMissing: "選取的元素已不在此畫面中。",
+      status: {
+        runtime: "已套用即時樣式",
+        queued: "正在寫入來源補丁",
+        applied: "補丁已套用",
+        failed: "補丁失敗",
+        rolledBack: "已回復",
+      },
+    },
+    capabilities: {
+      "deterministic-style-edit": "安全樣式編輯",
+      "deterministic-class-edit": "安全 class 編輯",
+      "agent-structural-edit": "結構移動需要代理",
+    },
     toasts: {
       codingHandoffError: "無法建立編碼交接",
       codingHandoffCopied: "編碼交接已複製",
@@ -231,7 +381,82 @@ const messages = {
       openScreenSvg: "匯出 SVG 前請先開啟一個螢幕",
       svgDownloaded: "SVG 已下載",
       svgExportError: "無法匯出 SVG",
+      screenDuplicated: "畫面已複製",
+      screenDuplicateError: "無法複製畫面",
+      copied: "已複製",
+      pasted: "已貼上",
+      deleted: "已刪除",
+      propsCopied: "屬性已複製",
+      propsPasted: "屬性已貼上",
+      primitiveInsertFailed: "無法將該圖層新增到畫面",
+      layerMoveFailed: "無法移動該圖層",
+    },
+  },
+  layersPanel: {
+    title: "圖層",
+    screens: "畫面",
+    addScreen: "新增畫面",
+    searchPlaceholder: "搜尋圖層...",
+    empty: "沒有圖層",
+    noMatches: "沒有符合的圖層",
+    designLayers: "設計圖層",
+    codeLayers: "程式碼圖層",
+    elementLayers: "元素圖層",
+    collapse: "收合圖層",
+    expand: "展開圖層",
+    lock: "鎖定圖層",
+    unlock: "解除鎖定圖層",
+    hide: "隱藏圖層",
+    show: "顯示圖層",
+    rename: "重新命名圖層",
+    selected: "已選取 {{count}} 個",
+  },
+  multiScreenCanvas: {
+    duplicate: "複製",
+    fork: "分支",
+    fullView: "完整檢視",
+    preview: "預覽",
+    openAndDuplicate: "選取 {{display}}。使用完整檢視進行聚焦捲動。",
+    openAndPreview: "選取 {{display}}。使用完整檢視進行聚焦捲動。",
+    doubleClickToEdit: "使用完整檢視進行聚焦捲動",
+    sources: {
+      localhost: { label: "本機", title: "由本機開發伺服器渲染" },
+      fusion: { label: "Fusion 遠端", title: "由 Fusion 渲染" },
+      inline: { label: "內嵌", title: "由內嵌程式碼渲染" },
     },
+    previews: {
+      live: { label: "即時", shortLabel: "即時框架", title: "即時預覽" },
+      snapshot: { label: "快照", shortLabel: "快照", title: "靜態快取快照" },
+      preview: { label: "預覽", shortLabel: "預覽", title: "內嵌預覽" },
+    },
+  },
+  questionFlow: {
+    defaultTitle: "先塑造設計",
+    defaultDescription: "回答高槓桿選項。代理可判斷的部分可以略過。",
+    answeredCount: "已回答 {{answered}} / {{total}}",
+    requiredCount: "必填 {{answered}} / {{total}}",
+    multiSelectHelp: "多選題可選多個籤。方向很精確時請使用其他。",
+    ready: "已可繼續。",
+    answerRequired: "回答必填卡片後才能繼續。",
+    skip: "略過",
+    continue: "繼續",
+    chooseAny: "選取所有適用項目",
+    chooseOne: "選擇一項",
+    required: "必填",
+    textPlaceholder: "輸入您的回答...",
+    selectedCount: "已選取 {{count}} 個。繼續前可新增或移除籤。",
+    selectUseful: "選取所有有用項目。",
+    other: "其他",
+    otherDescription: "清楚告訴代理您的意思。",
+    customPlaceholder: "輸入自訂回答...",
+    recommended: "建議",
+    dragFiles: "將檔案拖到這裡或",
+    browse: "瀏覽",
+    removeFile: "移除 {{name}}",
+    exploreLabel: "探索幾個選項",
+    exploreDescription: "定案前先展示不同方向。",
+    decideLabel: "幫我決定",
+    decideDescription: "用判斷力繼續推進。",
   },
   promptDialog: {
     assetsTitle: "Assets",
@@ -270,6 +495,45 @@ const messages = {
     send: "傳送",
     commentSent: "評論已傳送",
     comment: "評論",
+    annotationQueue: "註記佇列",
+    annotationQueueCounts: "{{queued}} 排隊 · {{sent}} 已送出",
+    batchApply: "批次套用",
+    queued: "已排隊",
+    queuedStatus: "已排隊 - {{status}}",
+    commentSentStatus: "評論已傳送 - {{status}}",
+    commentStatus: "評論 - {{status}}",
+    anchorLabel: "錨點 {{id}}",
+    nearText: "靠近「{{text}}」",
+    submitShortcut: "{{mod}}+Enter 送出",
+    queue: "排隊",
+    pinStatus: {
+      deterministic: {
+        label: "確定性",
+        shortLabel: "直接",
+        detail: "已錨定到圖層或選擇器，通常可直接處理。",
+      },
+      "needs-agent": {
+        label: "需要代理",
+        shortLabel: "代理",
+        detail: "需要解讀，或只有畫布位置脈絡。",
+      },
+      conflict: {
+        label: "衝突",
+        shortLabel: "衝突",
+        detail: "可能與另一個佇列中的註解重疊或衝突。",
+      },
+      unsupported: {
+        label: "不支援",
+        shortLabel: "阻擋",
+        detail: "可能超出此畫布編輯範圍。",
+      },
+    },
+    pinStatusCount: {
+      direct: "直接 {{count}}",
+      agent: "代理 {{count}}",
+      conflict: "衝突 {{count}}",
+      blocked: "阻擋 {{count}}",
+    },
   },
   home: {
     pageTitle: "Design",