@agent-native/core 0.80.10 → 0.81.0

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

@@ -25,6 +25,8 @@ import {
   IconChevronRight,
   IconCircle,
   IconCode,
+  IconFileText,
+  IconFolder,
   IconLetterCase,
   IconPalette,
   IconPlus,
@@ -32,6 +34,7 @@ import {
   IconRuler,
   IconSpacingVertical,
   IconShadow,
+  IconUpload,
 } from "@tabler/icons-react";
 import { useEffect, useRef, useState } from "react";
 
@@ -43,6 +46,7 @@ import {
   PopoverContent,
   PopoverTrigger,
 } from "@/components/ui/popover";
+import { Textarea } from "@/components/ui/textarea";
 import {
   Tooltip,
   TooltipContent,
@@ -75,6 +79,18 @@ interface IndexDesignTokensResult {
   tokens: DesignToken[];
 }
 
+interface ImportDesignTokensResult {
+  designId: string;
+  importedCount: number;
+  filesAnalyzed: string[];
+  resolvedCssVars?: Record<string, string>;
+}
+
+interface TokenImportFile {
+  filename: string;
+  content: string;
+}
+
 // ---------------------------------------------------------------------------
 // Props
 // ---------------------------------------------------------------------------
@@ -182,18 +198,21 @@ function TokenRow({
       )}
 
       {/* Friendly name */}
-      <span
-        className="flex-1 cursor-pointer truncate text-[11px] text-foreground"
+      <button
+        type="button"
+        className="min-w-0 flex-1 cursor-pointer truncate bg-transparent p-0 text-left text-[11px] text-foreground"
         onClick={onStartEdit}
+        aria-label={`Edit ${token.name}`}
         title={token.name}
       >
         {token.name}
-      </span>
+      </button>
 
       {/* Value / edit input */}
       {editing ? (
         <Input
           ref={inputRef}
+          aria-label={`Token value for ${token.name}`}
           value={editDraft}
           onChange={(e) => onDraftChange(e.target.value)}
           onKeyDown={(e) => {
@@ -204,20 +223,22 @@ function TokenRow({
           className="h-5 w-24 px-1 py-0 text-[11px] font-mono"
         />
       ) : (
-        <span
-          className="max-w-[6rem] cursor-pointer truncate text-right font-mono text-[10px] text-muted-foreground hover:text-foreground"
+        <button
+          type="button"
+          className="max-w-[6rem] cursor-pointer truncate bg-transparent p-0 text-right font-mono text-[10px] text-muted-foreground hover:text-foreground"
           title={token.value}
+          aria-label={`Edit value for ${token.name}`}
           onClick={onStartEdit}
         >
           {token.value}
-        </span>
+        </button>
       )}
 
       {/* CSS var chip (hidden when editing, visible on hover) */}
       {!editing && (
         <Tooltip>
           <TooltipTrigger asChild>
-            <span className="hidden cursor-default select-all rounded bg-muted px-1 py-0 font-mono text-[9px] text-muted-foreground/70 group-hover:inline">
+            <span className="pointer-events-none hidden max-w-[5.5rem] shrink-0 cursor-default select-all truncate rounded bg-muted px-1 py-0 font-mono text-[9px] text-muted-foreground/70 group-hover:inline-block">
               {token.cssVar}
             </span>
           </TooltipTrigger>
@@ -231,7 +252,7 @@ function TokenRow({
       {!editing && (
         <Badge
           variant="outline"
-          className="hidden h-4 cursor-default px-1 py-0 text-[9px] text-muted-foreground/60 group-hover:flex"
+          className="pointer-events-none hidden h-4 shrink-0 cursor-default px-1 py-0 text-[9px] text-muted-foreground/60 group-hover:flex"
         >
           {token.source}
         </Badge>
@@ -383,6 +404,200 @@ function NewTokenPopover({ onAdd }: NewTokenPopoverProps) {
   );
 }
 
+// ---------------------------------------------------------------------------
+// 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>;
+  onImportText: (text: string) => Promise<ImportDesignTokensResult>;
+  onImportCurrentDesign: () => Promise<ImportDesignTokensResult>;
+  isPending: boolean;
+}
+
+function ImportTokensPopover({
+  onImportFiles,
+  onImportText,
+  onImportCurrentDesign,
+  isPending,
+}: ImportTokensPopoverProps) {
+  const t = useT();
+  const fileInputRef = useRef<HTMLInputElement>(null);
+  const folderInputRef = useRef<HTMLInputElement>(null);
+  const [open, setOpen] = useState(false);
+  const [text, setText] = useState("");
+  const [status, setStatus] = useState<string | null>(null);
+
+  const runImport = async (
+    importer: () => Promise<ImportDesignTokensResult>,
+  ) => {
+    setStatus(null);
+    try {
+      const result = await importer();
+      setStatus(
+        t("designEditor.tokens.importedCount", {
+          count: result.importedCount,
+        }),
+      );
+      if (result.importedCount > 0) {
+        setText("");
+      }
+    } catch (error) {
+      setStatus(error instanceof Error ? error.message : String(error));
+    }
+  };
+
+  const handleFileChange = (event: React.ChangeEvent<HTMLInputElement>) => {
+    const files = event.currentTarget.files;
+    event.currentTarget.value = "";
+    if (!files?.length) return;
+    void runImport(async () => onImportFiles(await readImportFiles(files)));
+  };
+
+  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]"
+              disabled={isPending}
+              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}
+              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}
+              onClick={() => void runImport(onImportCurrentDesign)}
+            >
+              {t("designEditor.tokens.current")}
+            </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">
+            <Textarea
+              value={text}
+              onChange={(event) => setText(event.target.value)}
+              placeholder={t("designEditor.tokens.pastePlaceholder")}
+              className="min-h-24 resize-none font-mono text-[11px]"
+            />
+            <Button
+              type="button"
+              className="h-7 w-full cursor-pointer text-[11px]"
+              disabled={isPending || !text.trim()}
+              onClick={() => void runImport(() => onImportText(text))}
+            >
+              {t("designEditor.tokens.importPasted")}
+            </Button>
+          </div>
+
+          {status && (
+            <p className="text-[10px] leading-snug text-muted-foreground">
+              {status}
+            </p>
+          )}
+        </div>
+      </PopoverContent>
+    </Popover>
+  );
+}
+
 // ---------------------------------------------------------------------------
 // Main panel
 // ---------------------------------------------------------------------------
@@ -404,6 +619,7 @@ export function TokensPanel({ designId, onTokensApplied }: TokensPanelProps) {
   );
 
   const applyMutation = useActionMutation("apply-design-token-edit");
+  const importMutation = useActionMutation("import-design-tokens");
 
   // ------------------------------------------------------------------
   // Local edit state
@@ -458,6 +674,40 @@ export function TokensPanel({ designId, onTokensApplied }: TokensPanelProps) {
     );
   };
 
+  const handleImportSuccess = (result: ImportDesignTokensResult) => {
+    void refetch();
+    if (result.resolvedCssVars && onTokensApplied) {
+      onTokensApplied(result.resolvedCssVars);
+    }
+    return result;
+  };
+
+  const importFiles = async (files: TokenImportFile[]) => {
+    const result = (await importMutation.mutateAsync({
+      designId,
+      source: "files",
+      files,
+    })) as ImportDesignTokensResult;
+    return handleImportSuccess(result);
+  };
+
+  const importText = async (text: string) => {
+    const result = (await importMutation.mutateAsync({
+      designId,
+      source: "paste",
+      text,
+    })) as ImportDesignTokensResult;
+    return handleImportSuccess(result);
+  };
+
+  const importCurrentDesign = async () => {
+    const result = (await importMutation.mutateAsync({
+      designId,
+      source: "current-design",
+    })) as ImportDesignTokensResult;
+    return handleImportSuccess(result);
+  };
+
   // ------------------------------------------------------------------
   // Render
   // ------------------------------------------------------------------
@@ -495,6 +745,12 @@ export function TokensPanel({ designId, onTokensApplied }: TokensPanelProps) {
             </TooltipTrigger>
             <TooltipContent>{t("designEditor.tokens.refresh")}</TooltipContent>
           </Tooltip>
+          <ImportTokensPopover
+            onImportFiles={importFiles}
+            onImportText={importText}
+            onImportCurrentDesign={importCurrentDesign}
+            isPending={importMutation.isPending}
+          />
           <NewTokenPopover onAdd={handleNewToken} />
         </div>
       </div>

package/corpus/templates/design/app/components/design/bridge/codegen.ts

@@ -0,0 +1,125 @@
+/**
+ * Bridge codegen — compiles every *.bridge.ts in this directory to a self-contained
+ * injectable string and writes the result as a generated TypeScript module under
+ * .generated/bridge/<name>.generated.ts.
+ *
+ * Usage (from the design template root):
+ *   pnpm exec tsx app/components/design/bridge/codegen.ts
+ *
+ * Called automatically by:
+ *   - The freshness guard test (bridge.guard.spec.ts)
+ *   - The project build script (see scripts.build in package.json)
+ *
+ * Mechanism
+ * ---------
+ * esbuild is invoked with bundle:true, format:'iife', platform:'browser',
+ * write:false for each .bridge.ts file. This means:
+ *   • Any ES import/require that CAN'T be resolved by esbuild causes a build error
+ *     (self-containment guarantee for non-local deps, e.g. npm packages).
+ *   • Any ES import that CAN be resolved (e.g. a relative .ts file) gets bundled
+ *     inline — the guard test's regex check on source prevents this.
+ *   • The output is an IIFE-wrapped, browser-runnable JS string.
+ *
+ * The generated module is a plain committed .ts file that any bundler (Vite, Nitro,
+ * Rolldown) handles as a normal module — no Vite plugin, no SSR complications.
+ */
+
+import { execSync } from "node:child_process";
+import { readdirSync, readFileSync, writeFileSync } from "node:fs";
+import { join, resolve } from "node:path";
+import { fileURLToPath } from "node:url";
+
+import * as esbuild from "esbuild";
+
+const __dirname = fileURLToPath(new URL(".", import.meta.url));
+const designRoot = resolve(__dirname, "../../../..");
+const bridgeDir = __dirname;
+const generatedDir = join(designRoot, ".generated", "bridge");
+
+const GENERATED_BANNER = `// AUTO-GENERATED by bridge/codegen.ts — do not edit manually.
+// Run: pnpm exec tsx app/components/design/bridge/codegen.ts
+`;
+
+async function compileBridge(srcFile: string): Promise<string> {
+  const result = await esbuild.build({
+    entryPoints: [srcFile],
+    bundle: true,
+    format: "iife",
+    platform: "browser",
+    target: "es2020",
+    write: false,
+    // No external packages — unresolved imports are a hard error.
+    // (Relative imports that CAN be resolved get bundled inline, which is also
+    // wrong; the guard test prevents those at the source level.)
+    external: [],
+  });
+
+  if (result.errors.length > 0) {
+    const msgs = await esbuild.formatMessages(result.errors, { kind: "error" });
+    throw new Error(`esbuild error for ${srcFile}:\n${msgs.join("\n")}`);
+  }
+
+  const output = result.outputFiles[0];
+  if (!output) throw new Error(`No output from esbuild for ${srcFile}`);
+  return output.text;
+}
+
+function bridgeName(filename: string): string {
+  return filename.replace(/\.bridge\.ts$/, "");
+}
+
+function generatedModuleSrc(name: string, compiled: string): string {
+  // Escape backticks and ${} in the compiled string so it embeds safely.
+  const escaped = compiled
+    .replace(/\\/g, "\\\\")
+    .replace(/`/g, "\\`")
+    .replace(/\$\{/g, "\\${");
+  return `${GENERATED_BANNER}
+/** Compiled IIFE string for ${name}.bridge.ts — inject into an iframe via srcdoc or a <script> tag. */
+export const ${camelCase(name)}BridgeScript: string = \`${escaped}\`;
+`;
+}
+
+function camelCase(name: string): string {
+  return name.replace(/[-_]([a-z])/g, (_, c: string) => c.toUpperCase());
+}
+
+async function runCodegen(): Promise<void> {
+  const bridgeFiles = readdirSync(bridgeDir).filter((f) =>
+    f.endsWith(".bridge.ts"),
+  );
+
+  if (bridgeFiles.length === 0) {
+    console.log("[bridge/codegen] No *.bridge.ts files found.");
+    return;
+  }
+
+  for (const filename of bridgeFiles) {
+    const srcPath = join(bridgeDir, filename);
+    const name = bridgeName(filename);
+    const outPath = join(generatedDir, `${name}.generated.ts`);
+
+    console.log(`[bridge/codegen] Compiling ${filename} ...`);
+    const compiled = await compileBridge(srcPath);
+    const src = generatedModuleSrc(name, compiled);
+    writeFileSync(outPath, src, "utf-8");
+    console.log(`[bridge/codegen] → .generated/bridge/${name}.generated.ts`);
+  }
+
+  // Run oxfmt on generated files so they pass the formatter check.
+  try {
+    execSync(`pnpm exec oxfmt .generated/bridge/`, {
+      cwd: designRoot,
+      stdio: "pipe",
+    });
+  } catch {
+    // oxfmt not critical — formatting mismatches caught by CI linter, not here.
+  }
+
+  console.log("[bridge/codegen] Done.");
+}
+
+runCodegen().catch((err) => {
+  console.error("[bridge/codegen] FAILED:", err);
+  process.exit(1);
+});