@agent-native/core 0.80.0 → 0.80.1

package/corpus/templates/design/app/pages/DesignSystemSetup.tsx

@@ -2,7 +2,6 @@ import {
   sendToAgentChat,
   openAgentSidebar,
   useActionQuery,
-  useActionMutation,
   appApiPath,
   useT,
 } from "@agent-native/core/client";
@@ -18,8 +17,8 @@ import {
   IconPhoto,
   IconPalette,
   IconCheck,
+  IconExternalLink,
 } from "@tabler/icons-react";
-import { useQueryClient } from "@tanstack/react-query";
 import { useState, useCallback, useRef, useMemo, useEffect } from "react";
 import { useNavigate, useSearchParams } from "react-router";
 import { toast } from "sonner";
@@ -48,31 +47,13 @@ interface UploadedFile {
 
 interface FigImportResult {
   ok: boolean;
+  source: "builder";
   suggestedTitle: string;
-  data: {
-    colors?: Record<string, string>;
-    typography?: {
-      headingFont?: string;
-      bodyFont?: string;
-      headingWeight?: string;
-      bodyWeight?: string;
-      headingSizes?: { h1?: string; h2?: string; h3?: string };
-    };
-    spacing?: Record<string, string>;
-    borders?: Record<string, string>;
-    defaults?: Record<string, string>;
-    customCSS?: string;
-    notes?: string;
-  };
-  customInstructions: string;
-  preview: {
-    gradients: string[];
-    palette: { hex: string; name?: string; count: number }[];
-    namedColors: Record<string, string>;
-    thumbnailDataUrl: string | null;
-    nodeCount: number;
-    imageCount: number;
-  };
+  projectId: string;
+  jobId: string;
+  designSystemId: string;
+  builderUrl: string;
+  status: "in-progress";
 }
 
 export default function DesignSystemSetup() {
@@ -113,15 +94,11 @@ export default function DesignSystemSetup() {
   const existingProjects = designsData?.designs ?? [];
   const existingSystems = designSystemsData?.designSystems ?? [];
 
-  // --- Figma .fig import (deep brand extraction → design system) ----------
-  const queryClient = useQueryClient();
-  const createSystemMutation = useActionMutation("create-design-system");
+  // --- Figma .fig import (Builder design-system indexing) -----------------
   const realFigInputRef = useRef<HTMLInputElement>(null);
   const [figParsing, setFigParsing] = useState(false);
   const [figResult, setFigResult] = useState<FigImportResult | null>(null);
   const [figError, setFigError] = useState<string | null>(null);
-  const [figTitle, setFigTitle] = useState("");
-  const [figCreating, setFigCreating] = useState(false);
 
   const handleFigImport = useCallback(
     async (e: React.ChangeEvent<HTMLInputElement>) => {
@@ -147,10 +124,6 @@ export default function DesignSystemSetup() {
           throw new Error(json?.error || `Upload failed (${res.status})`);
         }
         setFigResult(json as FigImportResult);
-        setFigTitle(
-          (json as FigImportResult).suggestedTitle ||
-            t("designSystemSetup.importedBrand"),
-        );
       } catch (err) {
         setFigError(
           err instanceof Error
@@ -164,37 +137,6 @@ export default function DesignSystemSetup() {
     [t],
   );
 
-  const handleCreateFromFig = useCallback(async () => {
-    if (!figResult) return;
-    const title =
-      figTitle.trim() ||
-      figResult.suggestedTitle ||
-      t("designSystemSetup.importedBrand");
-    setFigCreating(true);
-    try {
-      const created = (await createSystemMutation.mutateAsync({
-        title,
-        data: JSON.stringify(figResult.data),
-        customInstructions: figResult.customInstructions || "",
-      } as any)) as { id?: string } | undefined;
-      await queryClient.invalidateQueries({
-        queryKey: ["action", "list-design-systems"],
-      });
-      toast.success(t("designSystemSetup.figmaCreateSuccess"));
-      navigate(
-        created?.id
-          ? `/design-systems?designSystemId=${encodeURIComponent(created.id)}`
-          : "/design-systems",
-      );
-    } catch (err) {
-      setFigCreating(false);
-      toast.error(t("designSystemSetup.figmaCreateError"), {
-        description:
-          err instanceof Error ? err.message : t("common.genericError"),
-      });
-    }
-  }, [figResult, figTitle, createSystemMutation, queryClient, navigate, t]);
-
   useEffect(() => {
     if (!sourceId || appliedSourceIdRef.current === sourceId) return;
     const sourceExists =
@@ -416,7 +358,7 @@ export default function DesignSystemSetup() {
 
     if (normalizedGithubLinks.length > 0) {
       parts.push(
-        `\n## GitHub Repositories\nExtract design tokens from code. Call \`import-github\` for each:\n${normalizedGithubLinks.map((l) => `- ${l.url}`).join("\n")}\n\nIf a repository is private or GitHub denies access, tell me to save a fine-grained GitHub token as \`GITHUB_TOKEN\` in Settings > Secrets. The token should be limited to the repository with Repository permissions > Contents: Read-only. Do not ask me to paste a PAT into chat.`,
+        `\n## GitHub Repositories\nStart Builder design-system indexing for each repository with \`index-design-system-with-builder\`:\n${normalizedGithubLinks.map((l) => `- ${l.url}`).join("\n")}\n\nBuilder is the source of truth for repo/code design-system indexing. The action also creates a local selectable proxy design system for Design flows. If Builder is not connected, stop and tell me to connect Builder from Settings instead of asking me to paste repository credentials into chat.`,
       );
     }
 
@@ -426,7 +368,7 @@ export default function DesignSystemSetup() {
 
       if (withContent.length > 0) {
         parts.push(
-          `\n## Code Files (${withContent.length} files with content)\nCall \`import-code\` with these files:`,
+          `\n## Code Files (${withContent.length} files with content)\nStart Builder design-system indexing with \`index-design-system-with-builder\` using these files:`,
         );
         for (const f of withContent) {
           parts.push(
@@ -485,12 +427,12 @@ export default function DesignSystemSetup() {
 
     if (customInstructions.trim()) {
       parts.push(
-        `\n## Custom Instructions (durable — store on the design system)\nWhen you call \`create-design-system\`, pass these verbatim as the \`customInstructions\` argument. They will be re-applied every time the design system is used to generate a design:\n\n${customInstructions.trim()}`,
+        `\n## Custom Instructions (durable — store on the design system)\nIf you create a local design system from non-Builder sources, pass these verbatim as the \`customInstructions\` argument. They will be re-applied every time the design system is used to generate a design:\n\n${customInstructions.trim()}`,
       );
     }
 
     parts.push(
-      `\n---\nAfter processing all sources, call \`create-design-system\` with the combined tokens${
+      `\n---\nAfter processing all sources, if you started Builder design-system indexing, report the Builder job/design-system URL plus the local selectable design-system id returned by \`index-design-system-with-builder\`. Do not call \`create-design-system\` again for those Builder-indexed sources. If you processed non-Builder sources into concrete tokens, call \`create-design-system\` with the combined tokens${
         customInstructions.trim()
           ? " AND the verbatim --customInstructions string from above"
           : ""
@@ -626,10 +568,6 @@ export default function DesignSystemSetup() {
               ) : (
                 <FigImportPreview
                   result={figResult}
-                  title={figTitle}
-                  onTitleChange={setFigTitle}
-                  creating={figCreating}
-                  onCreate={handleCreateFromFig}
                   onReset={() => {
                     setFigResult(null);
                     setFigError(null);
@@ -1100,168 +1038,66 @@ function FileList({
 
 function FigImportPreview({
   result,
-  title,
-  onTitleChange,
-  creating,
-  onCreate,
   onReset,
 }: {
   result: FigImportResult;
-  title: string;
-  onTitleChange: (v: string) => void;
-  creating: boolean;
-  onCreate: () => void;
   onReset: () => void;
 }) {
   const t = useT();
-  const colors = result.data.colors ?? {};
-  const colorEntries = (
-    [
-      [t("designSystemSetup.colorLabels.accent"), "accent"],
-      [t("designSystemSetup.colorLabels.primary"), "primary"],
-      [t("designSystemSetup.colorLabels.secondary"), "secondary"],
-      [t("designSystemSetup.colorLabels.background"), "background"],
-      [t("designSystemSetup.colorLabels.surface"), "surface"],
-      [t("designSystemSetup.colorLabels.text"), "text"],
-      [t("designSystemSetup.colorLabels.muted"), "textMuted"],
-    ] as const
-  ).filter(([, k]) => colors[k]);
-  const typo = result.data.typography ?? {};
-  const gradients = result.preview.gradients ?? [];
 
   return (
-    <div className="space-y-5 rounded-xl border border-border bg-card p-4">
-      <div className="flex items-start gap-4">
-        {result.preview.thumbnailDataUrl ? (
-          <img
-            src={result.preview.thumbnailDataUrl}
-            alt={t("designSystemSetup.figmaThumbnailAlt")}
-            className="h-20 w-28 shrink-0 rounded-md border border-border object-cover"
-          />
-        ) : null}
+    <div className="space-y-4 rounded-xl border border-border bg-card p-4">
+      <div className="flex items-start gap-3">
+        <div className="flex h-10 w-10 shrink-0 items-center justify-center rounded-lg bg-[#609FF8]/10">
+          <IconBrandFigma className="h-5 w-5 text-[#609FF8]" />
+        </div>
         <div className="min-w-0 flex-1">
-          <label className="text-xs font-medium uppercase tracking-wide text-muted-foreground">
-            {t("designSystemSetup.designSystemName")}
-          </label>
-          <Input
-            value={title}
-            onChange={(e) => onTitleChange(e.target.value)}
-            className="mt-1 bg-accent/50"
-            placeholder={t("designSystemSetup.brandNamePlaceholder")}
-          />
-          <p className="mt-2 text-xs text-muted-foreground/70">
-            {t("designSystemSetup.extractedSummary", {
-              nodes: result.preview.nodeCount.toLocaleString(),
-              gradients: gradients.length,
-              images: result.preview.imageCount,
-            })}
+          <h3 className="text-sm font-semibold text-foreground">
+            {result.suggestedTitle}
+          </h3>
+          <p className="mt-1 text-xs leading-relaxed text-muted-foreground">
+            {
+              "Builder is indexing this Figma file into a reusable design system." /* i18n-ignore Builder indexing status */
+            }
           </p>
         </div>
       </div>
 
-      {colorEntries.length > 0 && (
-        <div>
-          <h4 className="mb-2 text-xs font-medium uppercase text-muted-foreground">
-            {t("designSystemSetup.previewColors")}
-          </h4>
-          <div className="flex flex-wrap gap-3">
-            {colorEntries.map(([label, k]) => (
-              <div key={k} className="flex items-center gap-2">
-                <div
-                  className="h-8 w-8 rounded-md border border-border"
-                  style={{ backgroundColor: colors[k] }}
-                />
-                <div className="text-xs">
-                  <div className="text-foreground/80">{label}</div>
-                  <div className="font-mono text-[11px] text-muted-foreground">
-                    {colors[k]}
-                  </div>
-                </div>
-              </div>
-            ))}
-          </div>
-        </div>
-      )}
-
-      {gradients.length > 0 && (
-        <div>
-          <h4 className="mb-2 text-xs font-medium uppercase text-muted-foreground">
-            {t("designSystemSetup.signatureGradients")}
-          </h4>
-          <div className="flex flex-wrap gap-2">
-            {gradients.slice(0, 4).map((g, i) => (
-              <div
-                key={i}
-                className="h-10 w-28 rounded-md border border-border"
-                style={{ backgroundImage: g }}
-                title={g}
-              />
-            ))}
-          </div>
-        </div>
-      )}
-
-      {(typo.headingFont || typo.bodyFont) && (
-        <div>
-          <h4 className="mb-2 text-xs font-medium uppercase text-muted-foreground">
-            {t("designSystemSetup.previewTypography")}
-          </h4>
-          <div className="text-sm text-foreground/80">
-            {typo.headingFont && (
-              <span>
-                <span className="text-muted-foreground">
-                  {t("designSystemSetup.headingsLabel")}
-                </span>{" "}
-                {typo.headingFont}
-                {typo.headingWeight ? ` ${typo.headingWeight}` : ""}
-              </span>
-            )}
-            {typo.bodyFont && (
-              <span className="ml-4">
-                <span className="text-muted-foreground">
-                  {t("designSystemSetup.bodyLabel")}
-                </span>{" "}
-                {typo.bodyFont}
-              </span>
-            )}
-          </div>
-        </div>
-      )}
-
-      {result.customInstructions && (
-        <div>
-          <h4 className="mb-2 text-xs font-medium uppercase text-muted-foreground">
-            {t("designSystemSetup.brandBrief")}
-          </h4>
-          <div className="max-h-40 overflow-y-auto whitespace-pre-wrap rounded-md border border-border bg-muted/30 p-3 text-xs leading-relaxed text-muted-foreground">
-            {result.customInstructions}
-          </div>
-          <p className="mt-1 text-[11px] text-muted-foreground/60">
-            {t("designSystemSetup.brandBriefHelp")}
-          </p>
-        </div>
-      )}
+      <dl className="grid grid-cols-[112px_minmax(0,1fr)] gap-x-3 gap-y-2 rounded-lg border border-border bg-muted/25 p-3 text-xs">
+        <dt className="text-muted-foreground">
+          {"Status" /* i18n-ignore Builder indexing field */}
+        </dt>
+        <dd className="font-medium text-foreground">{result.status}</dd>
+        <dt className="text-muted-foreground">
+          {"Project" /* i18n-ignore Builder indexing field */}
+        </dt>
+        <dd className="truncate font-mono text-[11px] text-foreground/80">
+          {result.projectId}
+        </dd>
+        <dt className="text-muted-foreground">
+          {"Job" /* i18n-ignore Builder indexing field */}
+        </dt>
+        <dd className="truncate font-mono text-[11px] text-foreground/80">
+          {result.jobId}
+        </dd>
+        <dt className="text-muted-foreground">
+          {"Design system" /* i18n-ignore Builder indexing field */}
+        </dt>
+        <dd className="truncate font-mono text-[11px] text-foreground/80">
+          {result.designSystemId}
+        </dd>
+      </dl>
 
       <div className="flex items-center gap-2 border-t border-border pt-4">
-        <Button
-          onClick={onCreate}
-          disabled={creating || !title.trim()}
-          className="cursor-pointer"
-        >
-          {creating ? (
-            <>
-              <Spinner className="size-4" /> {t("designSystemSetup.creating")}
-            </>
-          ) : (
-            t("designSystemSetup.createDesignSystem")
-          )}
-        </Button>
-        <Button
-          variant="ghost"
-          onClick={onReset}
-          disabled={creating}
-          className="cursor-pointer"
-        >
+        {result.builderUrl ? (
+          <Button asChild className="cursor-pointer">
+            <a href={result.builderUrl} target="_blank" rel="noreferrer">
+              <IconExternalLink className="size-4" />
+              {"Open in Builder" /* i18n-ignore Builder link action */}
+            </a>
+          </Button>
+        ) : null}
+        <Button variant="ghost" onClick={onReset} className="cursor-pointer">
           {t("designSystemSetup.chooseDifferentFile")}
         </Button>
       </div>

package/corpus/templates/design/changelog/2026-06-29-canvas-selection-no-longer-flashes-broken-prototype-html-whe.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-29
+---
+
+Canvas selection no longer flashes broken prototype HTML when screens include embedded scripts or styles.

package/corpus/templates/design/changelog/2026-06-29-command-menu-selections-are-clearer-in-dark-mode.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-29
+---
+
+Command menu selections are clearer in dark mode.

package/corpus/templates/design/changelog/2026-06-29-design-mode-top-chrome-now-groups-collaborators-preview-shar.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-29
+---
+
+Design mode top chrome now groups collaborators, preview, Share, and chat closer to Figma.

package/corpus/templates/design/changelog/2026-06-29-element-selection-now-stays-on-the-intended-layer-after-sele.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-06-29
+---
+
+Element selection now stays on the intended layer after selector replay and reparenting.

package/corpus/templates/design/changelog/2026-06-29-screen-overview-full-view-controls-now-sit-above-frames-inst.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-29
+---
+
+Screen overview full-view controls now sit above frames instead of covering the preview.

package/corpus/templates/design/changelog/2026-06-29-screen-overview-tools-can-draw-shapes-create-screens-and-kee.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-29
+---
+
+Screen overview tools can draw shapes, create screens, and keep handles visible while zooming.

package/corpus/templates/design/changelog/2026-06-29-the-pen-tool-now-creates-anchor-based-bezier-vectors-with-ha.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-06-29
+---
+
+The Pen tool now creates anchor-based Bezier vectors with handles and close-path feedback.

package/corpus/templates/design/server/handlers/import-figma-system.ts

@@ -1,63 +1,21 @@
 import {
-  extractFigBrandKit,
-  looksLikeFigFile,
-} from "@agent-native/core/brand-kit/fig";
-import { getSession } from "@agent-native/core/server";
+  FeatureNotConfiguredError,
+  getSession,
+  startBuilderDesignSystemIndex,
+} from "@agent-native/core/server";
 import {
   defineEventHandler,
   readMultipartFormData,
   setResponseStatus,
 } from "h3";
 
-import type { DesignSystemData } from "../../shared/api.js";
-
-// .fig files can be large (the document is a kiwi-compressed canvas). Cap to
-// keep memory bounded — typical brand files are well under this.
 const MAX_FIG_BYTES = 200 * 1024 * 1024;
 
-/** Fill any tokens the extractor couldn't determine with sane defaults, so the
- * resulting design system is a complete, usable DesignSystemData. */
-function withDefaults(partial: Partial<DesignSystemData>): DesignSystemData {
-  const dark = partial.defaults?.background === "dark";
-  return {
-    colors: {
-      primary: "#0F172A",
-      secondary: "#1E293B",
-      accent: "#2684FF",
-      background: dark ? "#0B1220" : "#FFFFFF",
-      surface: dark ? "#111827" : "#F8FAFC",
-      text: dark ? "#F8FAFC" : "#0F172A",
-      textMuted: dark ? "#94A3B8" : "#64748B",
-      ...partial.colors,
-    },
-    typography: {
-      headingFont: "Sora",
-      bodyFont: "Inter",
-      headingWeight: "700",
-      bodyWeight: "400",
-      headingSizes: { h1: "48px", h2: "32px", h3: "24px" },
-      ...partial.typography,
-    },
-    spacing: { pagePadding: "32px", elementGap: "16px", ...partial.spacing },
-    borders: { radius: "12px", accentWidth: "2px", ...partial.borders },
-    defaults: {
-      background: partial.defaults?.background ?? "light",
-      labelStyle: partial.defaults?.labelStyle ?? "none",
-    },
-    logos: partial.logos ?? [],
-    ...(partial.imageStyle ? { imageStyle: partial.imageStyle } : {}),
-    ...(partial.customCSS ? { customCSS: partial.customCSS } : {}),
-    ...(partial.notes ? { notes: partial.notes } : {}),
-  };
-}
-
 /**
- * Parse-only endpoint: accepts a `.fig` upload (multipart field `file`),
- * decodes it, and returns the deeply-extracted brand profile (tokens, signature
- * gradients, and a synthesized brand-character brief) for preview. It does NOT
- * persist — the client reviews/edits, then calls the `create-design-system`
- * action on confirm (which owns ownership/scoping). This mirrors Claude
- * Design's upload → parse → preview → approve flow.
+ * Builder-indexing endpoint: accepts a `.fig` upload (multipart field `file`)
+ * and starts Builder's design-system indexing pipeline. The app does not decode
+ * Figma files locally; Builder owns extraction, generated docs, and the
+ * asynchronous indexing job.
  */
 export const importFigmaSystem = defineEventHandler(async (event) => {
   const session = await getSession(event).catch(() => null);
@@ -89,45 +47,40 @@ export const importFigmaSystem = defineEventHandler(async (event) => {
     };
   }
 
-  // Validate it actually looks like a .fig: a zip archive (PK) or fig-kiwi.
-  if (!looksLikeFigFile(part.data)) {
-    setResponseStatus(event, 400);
-    return { error: "That doesn't look like a Figma .fig file." };
-  }
-
-  let extracted;
-  try {
-    extracted = extractFigBrandKit(part.data);
-  } catch (e) {
-    setResponseStatus(event, 422);
-    return {
-      error: `Could not decode the .fig file: ${
-        e instanceof Error ? e.message : "unknown error"
-      }`,
-    };
-  }
-
-  const thumbnailDataUrl = extracted.preview.thumbnailDataUrl;
-  const data = withDefaults(extracted.data as Partial<DesignSystemData>);
-  // Attach the file thumbnail as a brand reference image for the generator.
-  if (thumbnailDataUrl) {
-    data.imageStyle = {
-      referenceUrls: [thumbnailDataUrl],
-      styleDescription: data.imageStyle?.styleDescription ?? "",
-    };
-  }
-
   const suggestedTitle =
     (part.filename || "Imported brand")
       .replace(/\.fig$/i, "")
       .replace(/[-_]+/g, " ")
       .trim() || "Imported brand";
 
-  return {
-    ok: true,
-    suggestedTitle,
-    data,
-    customInstructions: extracted.customInstructions,
-    preview: extracted.preview,
-  };
+  try {
+    return await startBuilderDesignSystemIndex({
+      projectName: suggestedTitle,
+      files: [
+        {
+          name: part.filename || "brand.fig",
+          data: part.data,
+          mimeType: "application/octet-stream",
+        },
+      ],
+    });
+  } catch (err) {
+    if (err instanceof FeatureNotConfiguredError) {
+      setResponseStatus(event, 412);
+      return {
+        error:
+          err.message ||
+          "Connect Builder.io before indexing a design system from Figma.",
+        builderConnectUrl:
+          err.builderConnectUrl ?? "/_agent-native/builder/connect",
+      };
+    }
+    setResponseStatus(event, 502);
+    return {
+      error:
+        err instanceof Error
+          ? err.message
+          : "Builder design-system indexing failed.",
+    };
+  }
 });

package/corpus/templates/design/server/lib/design-snapshot.ts

@@ -15,6 +15,7 @@ import { hasCollabState, getText } from "@agent-native/core/collab";
 import { eq } from "drizzle-orm";
 
 import type { TweakDefinition } from "../../shared/api.js";
+import { shouldUseLiveFileContent } from "../../shared/html-content.js";
 import {
   resolveTweaksToCssVars,
   type TweakSelections,
@@ -78,7 +79,14 @@ export async function buildDesignSnapshot(
     try {
       if (await hasCollabState(f.id)) {
         const live = await getText(f.id, "content");
-        if (typeof live === "string") {
+        if (
+          typeof live === "string" &&
+          shouldUseLiveFileContent({
+            liveContent: live,
+            storedContent: f.content,
+            fileType: f.fileType,
+          })
+        ) {
           content = live;
           source = "collab";
         }