@agent-native/core 0.84.56 → 0.84.58

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

@@ -24,7 +24,6 @@ import {
   IconChevronDown,
   IconChevronRight,
   IconCircle,
-  IconCode,
   IconFileText,
   IconFolder,
   IconLetterCase,
@@ -335,109 +334,10 @@ function TokenGroupSection({
 // New Token popover
 // ---------------------------------------------------------------------------
 
+type TokenCreateMode = "menu" | "add" | "text";
+
 interface NewTokenPopoverProps {
   onAdd: (cssVar: string, value: string) => void;
-}
-
-function NewTokenPopover({ onAdd }: NewTokenPopoverProps) {
-  const [open, setOpen] = useState(false);
-  const [cssVar, setCssVar] = useState("--my-token");
-  const [value, setValue] = useState("#000000");
-  const t = useT();
-
-  const handleAdd = () => {
-    const cleanVar = cssVar.startsWith("--") ? cssVar : `--${cssVar}`;
-    onAdd(cleanVar, value);
-    setOpen(false);
-    setCssVar("--my-token");
-    setValue("#000000");
-  };
-
-  return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <PopoverTrigger asChild>
-        <Button
-          type="button"
-          variant="ghost"
-          size="sm"
-          className="h-6 cursor-pointer gap-1 px-2 !text-[11px] text-muted-foreground hover:text-foreground"
-        >
-          <IconPlus className="size-3" />
-          {t("designEditor.tokens.newToken")}
-        </Button>
-      </PopoverTrigger>
-      <PopoverContent align="end" className="w-56 p-3 text-[12px]">
-        <div className="space-y-2">
-          <div className="space-y-1">
-            <label className="text-[10px] font-medium text-muted-foreground">
-              {t("designEditor.tokens.cssVar")}
-            </label>
-            <Input
-              value={cssVar}
-              onChange={(e) => setCssVar(e.target.value)}
-              className="h-6 font-mono !text-[11px] md:!text-[11px]"
-              placeholder="--my-token"
-            />
-          </div>
-          <div className="space-y-1">
-            <label className="text-[10px] font-medium text-muted-foreground">
-              {t("designEditor.tokens.value")}
-            </label>
-            <Input
-              value={value}
-              onChange={(e) => setValue(e.target.value)}
-              className="h-6 font-mono !text-[11px] md:!text-[11px]"
-              placeholder="#3B82F6"
-            />
-          </div>
-          <Button
-            type="button"
-            className="h-7 w-full cursor-pointer !text-[11px]"
-            onClick={handleAdd}
-            disabled={!cssVar || !value}
-          >
-            {t("designEditor.tokens.add")}
-          </Button>
-        </div>
-      </PopoverContent>
-    </Popover>
-  );
-}
-
-// ---------------------------------------------------------------------------
-// Import popover
-// ---------------------------------------------------------------------------
-
-const TOKEN_IMPORT_ACCEPT = [
-  ".css",
-  ".scss",
-  ".sass",
-  ".less",
-  ".json",
-  ".ts",
-  ".tsx",
-  ".js",
-  ".jsx",
-  ".md",
-  ".mdx",
-  ".txt",
-].join(",");
-
-async function readImportFiles(fileList: FileList): Promise<TokenImportFile[]> {
-  const selected = [...fileList].slice(0, 20);
-  const files = await Promise.all(
-    selected.map(async (file) => ({
-      filename:
-        (file as File & { webkitRelativePath?: string }).webkitRelativePath ||
-        file.name,
-      content: await file.text(),
-    })),
-  );
-
-  return files.filter((file) => file.content.trim().length > 0);
-}
-
-interface ImportTokensPopoverProps {
   onImportFiles: (
     files: TokenImportFile[],
   ) => Promise<ImportDesignTokensResult>;
@@ -446,18 +346,31 @@ interface ImportTokensPopoverProps {
   isPending: boolean;
 }
 
-function ImportTokensPopover({
+function NewTokenPopover({
+  onAdd,
   onImportFiles,
   onImportText,
   onImportCurrentDesign,
   isPending,
-}: ImportTokensPopoverProps) {
-  const t = useT();
-  const fileInputRef = useRef<HTMLInputElement>(null);
-  const folderInputRef = useRef<HTMLInputElement>(null);
+}: NewTokenPopoverProps) {
   const [open, setOpen] = useState(false);
+  const [mode, setMode] = useState<TokenCreateMode>("menu");
+  const [cssVar, setCssVar] = useState("--my-token");
+  const [value, setValue] = useState("#000000");
   const [text, setText] = useState("");
   const [status, setStatus] = useState<string | null>(null);
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const folderInputRef = useRef<HTMLInputElement>(null);
+  const t = useT();
+
+  const handleAdd = () => {
+    const cleanVar = cssVar.startsWith("--") ? cssVar : `--${cssVar}`;
+    onAdd(cleanVar, value);
+    setOpen(false);
+    setMode("menu");
+    setCssVar("--my-token");
+    setValue("#000000");
+  };
 
   const runImport = async (
     importer: () => Promise<ImportDesignTokensResult>,
@@ -478,6 +391,14 @@ function ImportTokensPopover({
     }
   };
 
+  const closeOrReset = (nextOpen: boolean) => {
+    setOpen(nextOpen);
+    if (!nextOpen) {
+      setMode("menu");
+      setStatus(null);
+    }
+  };
+
   const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
     const files = event.currentTarget.files;
     event.currentTarget.value = "";
@@ -486,91 +407,98 @@ function ImportTokensPopover({
   };
 
   return (
-    <Popover open={open} onOpenChange={setOpen}>
-      <Tooltip>
-        <TooltipTrigger asChild>
-          <PopoverTrigger asChild>
-            <Button
-              type="button"
-              variant="ghost"
-              size="icon"
-              className="size-6 cursor-pointer text-muted-foreground/60 hover:text-foreground"
-              aria-label={t("designEditor.tokens.import")}
-            >
-              <IconUpload className="size-3" />
-            </Button>
-          </PopoverTrigger>
-        </TooltipTrigger>
-        <TooltipContent>{t("designEditor.tokens.import")}</TooltipContent>
-      </Tooltip>
-      <PopoverContent align="end" className="w-72 p-3 text-[12px]">
-        <div className="space-y-3">
-          <div className="space-y-1">
-            <p className="!text-[11px] font-medium text-foreground">
-              {t("designEditor.tokens.importTitle")}
-            </p>
-            <p className="text-[10px] leading-snug text-muted-foreground">
-              {t("designEditor.tokens.importHint")}
-            </p>
-          </div>
-
-          <div className="grid grid-cols-3 gap-1.5">
-            <Button
-              type="button"
-              variant="outline"
-              size="sm"
-              className="h-7 cursor-pointer gap-1 px-2 text-[10px]"
+    <Popover open={open} onOpenChange={closeOrReset}>
+      <PopoverTrigger asChild>
+        <Button
+          type="button"
+          variant="ghost"
+          size="sm"
+          className="h-6 cursor-pointer gap-1 px-2 !text-[11px] text-muted-foreground hover:text-foreground"
+        >
+          <IconPlus className="size-3" />
+          {t("designEditor.tokens.newToken")}
+        </Button>
+      </PopoverTrigger>
+      <PopoverContent align="end" className="w-72 p-2 text-[12px]">
+        {mode === "menu" ? (
+          <div className="space-y-0.5">
+            <TokenCreateOption
+              icon={<IconPlus className="size-3.5" />}
+              title="Add one token"
+              description="Create a single CSS variable by hand."
+              onClick={() => setMode("add")}
               disabled={isPending}
+            />
+            <TokenCreateOption
+              icon={<IconUpload className="size-3.5" />}
+              title="Import a set from text"
+              description="Paste CSS variables, theme notes, or token JSON."
+              onClick={() => setMode("text")}
+              disabled={isPending}
+            />
+            <TokenCreateOption
+              icon={<IconFileText className="size-3.5" />}
+              title="Import from a file"
+              description="Read colors, spacing, and type from selected files."
               onClick={() => fileInputRef.current?.click()}
-            >
-              <IconFileText className="size-3" />
-              {t("designEditor.tokens.files")}
-            </Button>
-            <Button
-              type="button"
-              variant="outline"
-              size="sm"
-              className="h-7 cursor-pointer gap-1 px-2 text-[10px]"
               disabled={isPending}
+            />
+            <TokenCreateOption
+              icon={<IconFolder className="size-3.5" />}
+              title="Import from a folder"
+              description="Scan a small source folder for token definitions."
               onClick={() => folderInputRef.current?.click()}
-            >
-              <IconFolder className="size-3" />
-              {t("designEditor.tokens.folder")}
-            </Button>
-            <Button
-              type="button"
-              variant="outline"
-              size="sm"
-              className="h-7 cursor-pointer px-2 text-[10px]"
               disabled={isPending}
+            />
+            <TokenCreateOption
+              icon={<IconPalette className="size-3.5" />}
+              title="Import from current design"
+              description="Extract reusable tokens already used on the canvas."
               onClick={() => void runImport(onImportCurrentDesign)}
+              disabled={isPending}
+            />
+          </div>
+        ) : mode === "add" ? (
+          <div className="space-y-2 p-1">
+            <TokenCreateBackButton onClick={() => setMode("menu")} />
+            <div className="space-y-1">
+              <label className="text-[10px] font-medium text-muted-foreground">
+                {t("designEditor.tokens.cssVar")}
+              </label>
+              <Input
+                value={cssVar}
+                onChange={(e) => setCssVar(e.target.value)}
+                className="h-6 font-mono !text-[11px] md:!text-[11px]"
+                placeholder="--my-token"
+              />
+            </div>
+            <div className="space-y-1">
+              <label className="text-[10px] font-medium text-muted-foreground">
+                {t("designEditor.tokens.value")}
+              </label>
+              <Input
+                value={value}
+                onChange={(e) => setValue(e.target.value)}
+                className="h-6 font-mono !text-[11px] md:!text-[11px]"
+                placeholder="#3B82F6"
+              />
+            </div>
+            <Button
+              type="button"
+              className="h-7 w-full cursor-pointer !text-[11px]"
+              onClick={handleAdd}
+              disabled={!cssVar || !value}
             >
-              {t("designEditor.tokens.current")}
+              {t("designEditor.tokens.add")}
             </Button>
           </div>
-
-          <input
-            ref={fileInputRef}
-            type="file"
-            multiple
-            accept={TOKEN_IMPORT_ACCEPT}
-            className="hidden"
-            onChange={handleFileChange}
-          />
-          <input
-            ref={folderInputRef}
-            type="file"
-            multiple
-            accept={TOKEN_IMPORT_ACCEPT}
-            className="hidden"
-            onChange={handleFileChange}
-            {...({ directory: "", webkitdirectory: "" } as Record<
-              string,
-              string
-            >)}
-          />
-
-          <div className="space-y-1.5">
+        ) : (
+          <div className="space-y-2 p-1">
+            <TokenCreateBackButton onClick={() => setMode("menu")} />
+            <p className="text-[10px] leading-snug text-muted-foreground">
+              Paste a token set from CSS, JSON, Tailwind config, or design
+              notes.
+            </p>
             <Textarea
               value={text}
               onChange={(event) => setText(event.target.value)}
@@ -586,18 +514,119 @@ function ImportTokensPopover({
               {t("designEditor.tokens.importPasted")}
             </Button>
           </div>
+        )}
 
-          {status && (
-            <p className="text-[10px] leading-snug text-muted-foreground">
-              {status}
-            </p>
-          )}
-        </div>
+        <input
+          ref={fileInputRef}
+          type="file"
+          multiple
+          accept={TOKEN_IMPORT_ACCEPT}
+          className="hidden"
+          onChange={handleFileChange}
+        />
+        <input
+          ref={folderInputRef}
+          type="file"
+          multiple
+          accept={TOKEN_IMPORT_ACCEPT}
+          className="hidden"
+          onChange={handleFileChange}
+          {...({ directory: "", webkitdirectory: "" } as Record<
+            string,
+            string
+          >)}
+        />
+
+        {status && (
+          <p className="mt-2 px-1 text-[10px] leading-snug text-muted-foreground">
+            {status}
+          </p>
+        )}
       </PopoverContent>
     </Popover>
   );
 }
 
+function TokenCreateBackButton({ onClick }: { onClick: () => void }) {
+  return (
+    <button
+      type="button"
+      onClick={onClick}
+      className="mb-1 text-[10px] font-medium text-muted-foreground hover:text-foreground"
+    >
+      Back
+    </button>
+  );
+}
+
+function TokenCreateOption({
+  icon,
+  title,
+  description,
+  onClick,
+  disabled,
+}: {
+  icon: React.ReactNode;
+  title: string;
+  description: string;
+  onClick: () => void;
+  disabled?: boolean;
+}) {
+  return (
+    <button
+      type="button"
+      disabled={disabled}
+      onClick={onClick}
+      className="group flex w-full cursor-pointer items-center gap-2.5 rounded-md px-2 py-1.5 text-left transition-colors hover:bg-accent/60 disabled:cursor-not-allowed disabled:opacity-50"
+    >
+      <span className="flex size-8 shrink-0 items-center justify-center rounded-md border border-border/70 bg-muted/70 text-muted-foreground transition-colors group-hover:border-border group-hover:bg-muted">
+        {icon}
+      </span>
+      <span className="min-w-0 flex-1">
+        <span className="block truncate text-[13px] font-medium leading-tight text-foreground">
+          {title}
+        </span>
+        <span className="mt-0.5 line-clamp-1 text-[11px] leading-snug text-muted-foreground">
+          {description}
+        </span>
+      </span>
+    </button>
+  );
+}
+
+// ---------------------------------------------------------------------------
+// Import helpers
+// ---------------------------------------------------------------------------
+
+const TOKEN_IMPORT_ACCEPT = [
+  ".css",
+  ".scss",
+  ".sass",
+  ".less",
+  ".json",
+  ".ts",
+  ".tsx",
+  ".js",
+  ".jsx",
+  ".md",
+  ".mdx",
+  ".txt",
+].join(",");
+
+async function readImportFiles(fileList: FileList): Promise<TokenImportFile[]> {
+  const selected = [...fileList].slice(0, 20);
+  const files = await Promise.all(
+    selected.map(async (file) => ({
+      filename:
+        (file as File & { webkitRelativePath?: string }).webkitRelativePath ||
+        file.name,
+      content: await file.text(),
+    })),
+  );
+
+  return files.filter((file) => file.content.trim().length > 0);
+}
+
 // ---------------------------------------------------------------------------
 // Main panel
 // ---------------------------------------------------------------------------
@@ -719,7 +748,6 @@ export function TokensPanel({ designId, onTokensApplied }: TokensPanelProps) {
       {/* Header */}
       <div className="flex items-center justify-between border-b border-border/60 px-3 py-2">
         <div className="flex items-center gap-1.5">
-          <IconCode className="size-3.5 text-muted-foreground/60" />
           <span className="!text-[11px] font-semibold text-foreground">
             {t("designEditor.tokens.title")}
           </span>
@@ -745,13 +773,13 @@ export function TokensPanel({ designId, onTokensApplied }: TokensPanelProps) {
             </TooltipTrigger>
             <TooltipContent>{t("designEditor.tokens.refresh")}</TooltipContent>
           </Tooltip>
-          <ImportTokensPopover
+          <NewTokenPopover
+            onAdd={handleNewToken}
             onImportFiles={importFiles}
             onImportText={importText}
             onImportCurrentDesign={importCurrentDesign}
             isPending={importMutation.isPending}
           />
-          <NewTokenPopover onAdd={handleNewToken} />
         </div>
       </div>
 

package/corpus/templates/design/app/components/design/code-workbench-theme.ts

@@ -0,0 +1,150 @@
+export interface CodeWorkbenchTheme {
+  colorScheme: "light" | "dark";
+  values: Record<string, string>;
+}
+
+const WORKBENCH_THEME_VARS: Record<string, string[]> = {
+  "--workbench-bg": ["--design-editor-panel-bg", "--background"],
+  "--workbench-sidebar-bg": ["--design-editor-panel-bg", "--card"],
+  "--workbench-editor-bg": ["--design-editor-panel-bg", "--background"],
+  "--workbench-surface-bg": ["--design-editor-control-bg", "--muted"],
+  "--workbench-border": ["--design-editor-control-border", "--border"],
+  "--workbench-fg": ["--foreground"],
+  "--workbench-muted-fg": ["--muted-foreground"],
+  "--workbench-hover-bg": ["--design-editor-layer-hover-color", "--accent"],
+  "--workbench-active-bg": ["--design-editor-selection-color", "--accent"],
+  "--workbench-active-fg": [
+    "--design-editor-accent-color",
+    "--accent-foreground",
+  ],
+  "--workbench-accent": ["--design-editor-accent-color", "--primary"],
+  "--workbench-button-bg": ["--design-editor-control-bg", "--background"],
+  "--workbench-button-fg": ["--foreground"],
+  "--workbench-selection-bg": ["--design-editor-selection-color", "--accent"],
+  "--workbench-dirty": ["--warning", "--destructive"],
+};
+
+const HEX_COLOR_RE = /^#(?:[0-9a-f]{3,4}|[0-9a-f]{6}|[0-9a-f]{8})$/i;
+
+function normalizeHexColor(value: string): string {
+  const hex = value.toLowerCase();
+  if (hex.length !== 4 && hex.length !== 5) return hex;
+  const [, r, g, b, a] = hex;
+  return `#${r}${r}${g}${g}${b}${b}${a ? `${a}${a}` : ""}`;
+}
+
+function parseRgbChannel(value: string): number | undefined {
+  const trimmed = value.trim();
+  const parsed = trimmed.endsWith("%")
+    ? (Number.parseFloat(trimmed.slice(0, -1)) * 255) / 100
+    : Number.parseFloat(trimmed);
+  if (!Number.isFinite(parsed)) return undefined;
+  return Math.min(255, Math.max(0, Math.round(parsed)));
+}
+
+function parseRgbAlpha(value: string | undefined): number {
+  if (!value) return 255;
+  const trimmed = value.trim();
+  const parsed = trimmed.endsWith("%")
+    ? Number.parseFloat(trimmed.slice(0, -1)) / 100
+    : Number.parseFloat(trimmed);
+  if (!Number.isFinite(parsed)) return 255;
+  return Math.min(255, Math.max(0, Math.round(parsed * 255)));
+}
+
+function toHexByte(value: number): string {
+  return value.toString(16).padStart(2, "0");
+}
+
+function parseRgbColor(value: string): string | undefined {
+  const match = /^rgba?\((.*)\)$/i.exec(value.trim());
+  if (!match) return undefined;
+  const body = match[1]?.trim();
+  if (!body) return undefined;
+  const parts = body.includes(",")
+    ? body.split(",").map((part) => part.trim())
+    : body.replace(/\//g, " / ").split(/\s+/).filter(Boolean);
+  const slashIndex = parts.indexOf("/");
+  const colorParts = slashIndex === -1 ? parts : parts.slice(0, slashIndex);
+  const alphaPart =
+    slashIndex === -1 ? colorParts[3] : parts.slice(slashIndex + 1).join(" ");
+  if (colorParts.length < 3) return undefined;
+  const red = parseRgbChannel(colorParts[0] ?? "");
+  const green = parseRgbChannel(colorParts[1] ?? "");
+  const blue = parseRgbChannel(colorParts[2] ?? "");
+  if (red === undefined || green === undefined || blue === undefined) {
+    return undefined;
+  }
+  const alpha = parseRgbAlpha(alphaPart);
+  const hex = `#${toHexByte(red)}${toHexByte(green)}${toHexByte(blue)}`;
+  return alpha < 255 ? `${hex}${toHexByte(alpha)}` : hex;
+}
+
+export function normalizeThemeColorValue(value: string): string {
+  const trimmed = value.trim();
+  if (!trimmed) return "";
+  if (/^-?\d+(\.\d+)?\s+-?\d+(\.\d+)?%/.test(trimmed)) {
+    return `hsl(${trimmed})`;
+  }
+  return trimmed;
+}
+
+export function normalizeMonacoThemeColor(
+  value: string | undefined,
+): string | undefined {
+  const normalized = normalizeThemeColorValue(value ?? "");
+  if (!normalized) return undefined;
+  if (HEX_COLOR_RE.test(normalized)) return normalizeHexColor(normalized);
+  return parseRgbColor(normalized);
+}
+
+export function resolveCssColorValue(value: string): string {
+  if (typeof window === "undefined" || typeof document === "undefined") {
+    return value;
+  }
+  const probe = document.createElement("span");
+  probe.style.color = value;
+  probe.style.position = "fixed";
+  probe.style.pointerEvents = "none";
+  probe.style.visibility = "hidden";
+  document.body.appendChild(probe);
+  const resolved = window.getComputedStyle(probe).color;
+  probe.remove();
+  return resolved || value;
+}
+
+function readThemeVar(
+  elementStyles: CSSStyleDeclaration,
+  rootStyles: CSSStyleDeclaration,
+  names: string[],
+): string | undefined {
+  for (const name of names) {
+    const value =
+      elementStyles.getPropertyValue(name) || rootStyles.getPropertyValue(name);
+    const normalized = normalizeThemeColorValue(value);
+    if (normalized) return resolveCssColorValue(normalized);
+  }
+  return undefined;
+}
+
+export function readCodeWorkbenchTheme(
+  element: HTMLElement | null,
+): CodeWorkbenchTheme {
+  if (typeof window === "undefined" || !element) {
+    return { colorScheme: "light", values: {} };
+  }
+  const elementStyles = window.getComputedStyle(element);
+  const rootStyles = window.getComputedStyle(document.documentElement);
+  const values: Record<string, string> = {};
+  for (const [targetVar, sourceVars] of Object.entries(WORKBENCH_THEME_VARS)) {
+    const value = readThemeVar(elementStyles, rootStyles, sourceVars);
+    if (value) values[targetVar] = value;
+  }
+  const colorScheme =
+    document.documentElement.classList.contains("dark") ||
+    elementStyles.colorScheme.includes("dark") ||
+    rootStyles.colorScheme.includes("dark")
+      ? "dark"
+      : "light";
+  return { colorScheme, values };
+}

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

@@ -279,8 +279,8 @@ const messages = {
         "將 Figma 選取內容、.fig 匯出檔或獨立 HTML 帶入為 Design 螢幕。",
       figmaPasteTitle: "從 Figma 貼上",
       figmaPasteDescription:
-        "在 Figma 複製畫框或圖層，然後聚焦此目標並貼上。可用時會直接匯入 Figma 中繼資料。",
-      figmaPasteTarget: "在此貼上 Figma 內容",
+        "在 Figma 複製畫框或圖層，然後貼到 Design 畫布。可用時會直接匯入 Figma 中繼資料。",
+      figmaPasteTarget: "貼到畫布",
       figUploadTitle: "上傳 .fig",
       figUploadDescription:
         "只匯出需要的畫框。含有許多嵌入圖片的大型檔案可能超過匯入限制。",
@@ -293,17 +293,15 @@ const messages = {
       chooseHtmlFile: "選擇 HTML 檔案",
       githubTitle: "GitHub",
       githubDescription: "即將推出：直接從儲存庫匯入螢幕和元件。",
-      localTitle: "本機 app / VS Code",
-      localDescription: "使用 visual-edit 連接執行中的本機 app。",
+      localTitle: "本機 app",
+      localDescription: "使用 /visual-edit 連接任何執行中的本機 app。",
       visualEditGuidance:
-        "啟動 app，在 app repo 中執行下方命令，然後請代理使用 visual-edit skill 新增 URL 螢幕。",
-      useVisualEditNow: "立即使用 visual-edit",
+        "安裝 /visual-edit skill，啟動任意本機 app，然後在該 app repo 中執行橋接命令，讓代理新增 URL 螢幕。",
       comingSoon: "即將推出",
       warningsToast: "匯入完成但有警告",
       figmaSuccess: "已匯入 Figma 貼上內容",
       htmlSuccess: "已匯入 HTML",
       uploadSuccess: "已匯入檔案",
-      visualEditSent: "已將 visual-edit 請求傳送給代理",
       lastImport: "上次匯入",
       errors: {
         notHtml: "請貼上或選擇有效的 HTML 以匯入。",