@agent-native/core 0.86.0 → 0.87.0

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

@@ -36,6 +36,57 @@ import {
   type OtherPresence,
   type PromptComposerSubmitOptions,
 } from "@agent-native/core/client";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+} from "@agent-native/toolkit/ui/alert-dialog";
+import {
+  Avatar,
+  AvatarFallback,
+  AvatarImage,
+} from "@agent-native/toolkit/ui/avatar";
+import { Button } from "@agent-native/toolkit/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@agent-native/toolkit/ui/dialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@agent-native/toolkit/ui/dropdown-menu";
+import { Input } from "@agent-native/toolkit/ui/input";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@agent-native/toolkit/ui/popover";
+import { Spinner } from "@agent-native/toolkit/ui/spinner";
+import { Tabs, TabsList, TabsTrigger } from "@agent-native/toolkit/ui/tabs";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@agent-native/toolkit/ui/tooltip";
 import type { TweakDefinition } from "@shared/api";
 import { isBoardFile } from "@shared/board-file";
 import {
@@ -239,53 +290,6 @@ import {
 } from "@/components/design/types";
 import PromptPopover from "@/components/editor/PromptDialog";
 import type { UploadedFile } from "@/components/editor/PromptDialog";
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { Button } from "@/components/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuShortcut,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { Input } from "@/components/ui/input";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { Spinner } from "@/components/ui/spinner";
-import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
 import { useAgentGenerating } from "@/hooks/use-agent-generating";
 import { useDesignSystems } from "@/hooks/use-design-systems";
 import {

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

@@ -4,6 +4,14 @@ import {
   appApiPath,
   useT,
 } from "@agent-native/core/client";
+import {
+  useSetPageTitle,
+  useSetHeaderActions,
+} from "@agent-native/toolkit/app-shell";
+import { Button } from "@agent-native/toolkit/ui/button";
+import { Input } from "@agent-native/toolkit/ui/input";
+import { Spinner } from "@agent-native/toolkit/ui/spinner";
+import { Textarea } from "@agent-native/toolkit/ui/textarea";
 import {
   IconArrowLeft,
   IconBrandGithub,
@@ -22,14 +30,6 @@ import { useState, useCallback, useRef, useMemo, useEffect } from "react";
 import { useNavigate, useSearchParams } from "react-router";
 import { toast } from "sonner";
 
-import {
-  useSetPageTitle,
-  useSetHeaderActions,
-} from "@/components/layout/HeaderActions";
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Spinner } from "@/components/ui/spinner";
-import { Textarea } from "@/components/ui/textarea";
 import { sendToDesignAgentChat } from "@/lib/agent-chat";
 
 interface GitHubLink {
@@ -254,7 +254,7 @@ export default function DesignSystemSetup() {
         if (
           f.size < 200 * 1024 &&
           (f.name.match(
-            /\.(css|scss|sass|less|ts|tsx|js|jsx|json|html|svg|xml)$/i,
+            /\.(css|scss|sass|less|ts|tsx|js|jsx|json|html|svg|xml|md|markdown|mdx|txt)$/i,
           ) ||
             f.type.startsWith("text/"))
         ) {
@@ -362,10 +362,16 @@ export default function DesignSystemSetup() {
     const normalizedGithubLinks = pendingGithubUrl
       ? [...githubLinks, { id: "pending", url: pendingGithubUrl }]
       : githubLinks;
+    const readableCodeFiles = codeFiles.filter((f) => f.textContent);
+    const designMdFiles = readableCodeFiles.filter(isDesignMdFile);
+    const builderCodeFiles = readableCodeFiles.filter(
+      (file) => !isDesignMdFile(file),
+    );
+    const unreadableCodeFiles = codeFiles.filter((f) => !f.textContent);
 
     const parts: string[] = [];
     parts.push(
-      "Set up a design system from the following sources. Analyze each source, extract design tokens (colors, fonts, spacing, borders), and create a cohesive design system.",
+      "Set up a design system from the following sources. Use Builder Design System Intelligence (DSI) as the source of truth for reusable Figma/code/design.md indexing. Analyze each source, extract design tokens (colors, fonts, spacing, borders), and create a cohesive design system.",
     );
 
     if (companyInfo.trim()) {
@@ -380,34 +386,41 @@ export default function DesignSystemSetup() {
 
     if (normalizedGithubLinks.length > 0) {
       parts.push(
-        `\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.`,
+        `\n## Connect Code: GitHub Repositories\nStart Builder DSI 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.`,
       );
     }
 
     if (codeFiles.length > 0) {
-      const withContent = codeFiles.filter((f) => f.textContent);
-      const withoutContent = codeFiles.filter((f) => !f.textContent);
-
-      if (withContent.length > 0) {
+      if (builderCodeFiles.length > 0) {
         parts.push(
-          `\n## Code Files (${withContent.length} files with content)\nStart Builder design-system indexing with \`index-design-system-with-builder\` using these files:`,
+          `\n## Connect Code: Code Files (${builderCodeFiles.length} files with content)\nStart Builder DSI indexing with \`index-design-system-with-builder\` using these files as the \`codeFiles\` argument:`,
         );
-        for (const f of withContent) {
+        for (const f of builderCodeFiles) {
           parts.push(
             `\n### ${f.name}\n\`\`\`\n${f.textContent!.slice(0, 5000)}\n\`\`\``,
           );
         }
       }
-      if (withoutContent.length > 0) {
+      if (designMdFiles.length > 0) {
         parts.push(
-          `\nBinary code files (could not read):\n${withoutContent.map((f) => `- ${f.name}`).join("\n")}`,
+          `\n## Optional design.md (${designMdFiles.length} file${designMdFiles.length === 1 ? "" : "s"})\nPass this content as the \`designMd\` argument to \`index-design-system-with-builder\` alongside any Figma/code sources:`,
+        );
+        for (const f of designMdFiles) {
+          parts.push(
+            `\n### ${f.name}\n\`\`\`md\n${f.textContent!.slice(0, 5000)}\n\`\`\``,
+          );
+        }
+      }
+      if (unreadableCodeFiles.length > 0) {
+        parts.push(
+          `\nBinary code files (could not read):\n${unreadableCodeFiles.map((f) => `- ${f.name}`).join("\n")}`,
         );
       }
     }
 
     if (builderIndexResult) {
       parts.push(
-        `\n## Builder-Indexed Figma File\nBuilder design-system indexing has already started.\n- Design system: ${builderIndexResult.designSystemId}\n- Local selectable design system: ${builderIndexResult.localDesignSystemId ?? "(not returned)"}\n- Project: ${builderIndexResult.projectId}\n- Job: ${builderIndexResult.jobId}\n- URL: ${builderIndexResult.builderUrl}\n\nUse Builder as the source of truth for extracted tokens, assets, and guidance. Do not call \`create-design-system\` again for this Builder-indexed source.`,
+        `\n## Connect Figma: Builder-Indexed Figma File\nBuilder DSI indexing has already started.\n- Design system: ${builderIndexResult.designSystemId}\n- Local selectable design system: ${builderIndexResult.localDesignSystemId ?? "(not returned)"}\n- Project: ${builderIndexResult.projectId}\n- Job: ${builderIndexResult.jobId}\n- URL: ${builderIndexResult.builderUrl}\n\nUse Builder as the source of truth for extracted tokens, assets, components, and guidance. Do not call \`create-design-system\` again for this Builder-indexed source.`,
       );
     }
 
@@ -454,7 +467,7 @@ export default function DesignSystemSetup() {
     }
 
     parts.push(
-      `\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${
+      `\n---\nAfter processing all sources, if you started Builder DSI 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 Builder-indexed Figma/code/design.md 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"
           : ""
@@ -757,7 +770,7 @@ export default function DesignSystemSetup() {
                   ref={codeInputRef}
                   type="file"
                   multiple
-                  accept=".css,.scss,.sass,.less,.ts,.tsx,.js,.jsx,.json,.html,.svg"
+                  accept=".css,.scss,.sass,.less,.ts,.tsx,.js,.jsx,.json,.html,.svg,.xml,.md,.markdown,.mdx,.txt"
                   onChange={handleCodeUpload}
                   className="hidden"
                 />
@@ -1137,6 +1150,11 @@ function formatSize(bytes: number): string {
   return `${(bytes / (1024 * 1024)).toFixed(1)}MB`;
 }
 
+function isDesignMdFile(file: UploadedFile): boolean {
+  const name = file.name.split(/[\\/]/).pop()?.toLowerCase() ?? file.name;
+  return name === "design.md" || name === "design.mdx";
+}
+
 function isHttpUrl(value: string): boolean {
   try {
     const url = new URL(value);

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

@@ -5,32 +5,10 @@ import {
   useActionMutation,
   useT,
 } from "@agent-native/core/client";
-import {
-  IconCheckbox,
-  IconChecks,
-  IconDots,
-  IconPlus,
-  IconPalette,
-  IconStar,
-  IconStarFilled,
-  IconTrash,
-  IconX,
-} from "@tabler/icons-react";
-import { useQueryClient } from "@tanstack/react-query";
-import {
-  useCallback,
-  useEffect,
-  useMemo,
-  useState,
-  type ReactNode,
-} from "react";
-import { Link, useNavigate, useSearchParams } from "react-router";
-import { toast } from "sonner";
-
 import {
   useSetHeaderActions,
   useSetPageTitle,
-} from "@/components/layout/HeaderActions";
+} from "@agent-native/toolkit/app-shell";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -40,17 +18,17 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
-import { Button } from "@/components/ui/button";
-import { Checkbox } from "@/components/ui/checkbox";
+} from "@agent-native/toolkit/ui/alert-dialog";
+import { Button } from "@agent-native/toolkit/ui/button";
+import { Checkbox } from "@agent-native/toolkit/ui/checkbox";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
+} from "@agent-native/toolkit/ui/dropdown-menu";
+import { Input } from "@agent-native/toolkit/ui/input";
+import { Label } from "@agent-native/toolkit/ui/label";
 import {
   Sheet,
   SheetContent,
@@ -58,13 +36,35 @@ import {
   SheetFooter,
   SheetHeader,
   SheetTitle,
-} from "@/components/ui/sheet";
-import { Textarea } from "@/components/ui/textarea";
+} from "@agent-native/toolkit/ui/sheet";
+import { Textarea } from "@agent-native/toolkit/ui/textarea";
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from "@/components/ui/tooltip";
+} from "@agent-native/toolkit/ui/tooltip";
+import {
+  IconCheckbox,
+  IconChecks,
+  IconDots,
+  IconPlus,
+  IconPalette,
+  IconStar,
+  IconStarFilled,
+  IconTrash,
+  IconX,
+} from "@tabler/icons-react";
+import { useQueryClient } from "@tanstack/react-query";
+import {
+  useCallback,
+  useEffect,
+  useMemo,
+  useState,
+  type ReactNode,
+} from "react";
+import { Link, useNavigate, useSearchParams } from "react-router";
+import { toast } from "sonner";
+
 import {
   formatDesignTokenValue,
   getCssColorToken,

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

@@ -4,30 +4,10 @@ import {
   useT,
 } from "@agent-native/core/client";
 import type { PromptComposerSubmitOptions } from "@agent-native/core/client";
-import { FULL_APP_BUILDING_ENABLED } from "@shared/full-app";
-import {
-  IconChecks,
-  IconPlus,
-  IconPalette,
-  IconSearch,
-  IconDots,
-  IconTrash,
-  IconCopy,
-  IconCode,
-  IconX,
-  IconPencil,
-} from "@tabler/icons-react";
-import { useQueryClient } from "@tanstack/react-query";
-import { nanoid } from "nanoid";
-import { useState, useRef, useCallback, useEffect } from "react";
-import { useNavigate, Link } from "react-router";
-
-import PromptPopover from "@/components/editor/PromptDialog";
-import type { UploadedFile } from "@/components/editor/PromptDialog";
 import {
   useSetHeaderActions,
   useSetPageTitle,
-} from "@/components/layout/HeaderActions";
+} from "@agent-native/toolkit/app-shell";
 import {
   AlertDialog,
   AlertDialogAction,
@@ -37,22 +17,42 @@ import {
   AlertDialogFooter,
   AlertDialogHeader,
   AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
-import { Button } from "@/components/ui/button";
-import { Checkbox } from "@/components/ui/checkbox";
+} from "@agent-native/toolkit/ui/alert-dialog";
+import { Button } from "@agent-native/toolkit/ui/button";
+import { Checkbox } from "@agent-native/toolkit/ui/checkbox";
 import {
   DropdownMenu,
   DropdownMenuContent,
   DropdownMenuItem,
   DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { Input } from "@/components/ui/input";
-import { Spinner } from "@/components/ui/spinner";
+} from "@agent-native/toolkit/ui/dropdown-menu";
+import { Input } from "@agent-native/toolkit/ui/input";
+import { Spinner } from "@agent-native/toolkit/ui/spinner";
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from "@/components/ui/tooltip";
+} from "@agent-native/toolkit/ui/tooltip";
+import { FULL_APP_BUILDING_ENABLED } from "@shared/full-app";
+import {
+  IconChecks,
+  IconPlus,
+  IconPalette,
+  IconSearch,
+  IconDots,
+  IconTrash,
+  IconCopy,
+  IconCode,
+  IconX,
+  IconPencil,
+} from "@tabler/icons-react";
+import { useQueryClient } from "@tanstack/react-query";
+import { nanoid } from "nanoid";
+import { useState, useRef, useCallback, useEffect } from "react";
+import { useNavigate, Link } from "react-router";
+
+import PromptPopover from "@/components/editor/PromptDialog";
+import type { UploadedFile } from "@/components/editor/PromptDialog";
 import { useDesignSystems } from "@/hooks/use-design-systems";
 import { sendToDesignAgentChat } from "@/lib/agent-chat";
 import {

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

@@ -3,11 +3,10 @@ import {
   useSession,
   useT,
 } from "@agent-native/core/client";
+import { Button } from "@agent-native/toolkit/ui/button";
 import { IconArrowLeft, IconLogin2 } from "@tabler/icons-react";
 import { Link } from "react-router";
 
-import { Button } from "@/components/ui/button";
-
 export default function NotFound() {
   const t = useT();
   const { session, isLoading } = useSession();

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

@@ -1,9 +1,8 @@
 import { useActionQuery, useT } from "@agent-native/core/client";
+import { Skeleton } from "@agent-native/toolkit/ui/skeleton";
 import { useState, useEffect, useCallback } from "react";
 import { useParams, useNavigate } from "react-router";
 
-import { Skeleton } from "@/components/ui/skeleton";
-
 interface DesignFile {
   id: string;
   filename: string;

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

@@ -1,4 +1,5 @@
 import { agentNativePath, useSession, useT } from "@agent-native/core/client";
+import { Button } from "@agent-native/toolkit/ui/button";
 import {
   IconArrowUpRight,
   IconBrush,
@@ -8,8 +9,6 @@ import {
 } from "@tabler/icons-react";
 import { Link } from "react-router";
 
-import { Button } from "@/components/ui/button";
-
 function buildSignInHref(): string {
   const ret = "/visual-edit?intent=save";
   return `${agentNativePath("/_agent-native/sign-in")}?return=${encodeURIComponent(ret)}`;

package/corpus/templates/design/app/root.tsx

@@ -12,6 +12,7 @@ import {
   useSession,
   useT,
 } from "@agent-native/core/client";
+import { Toaster } from "@agent-native/toolkit/ui/sonner";
 import { IconSun, IconMoon } from "@tabler/icons-react";
 import { useQueryClient } from "@tanstack/react-query";
 import { useTheme } from "next-themes";
@@ -27,7 +28,6 @@ import {
 import type { LinksFunction } from "react-router";
 
 import { Layout as AppLayout } from "@/components/layout/Layout";
-import { Toaster } from "@/components/ui/sonner";
 
 import changelog from "../CHANGELOG.md?raw";
 import { i18nCatalog } from "./i18n";

package/corpus/templates/design/app/routes/settings.tsx

@@ -8,15 +8,15 @@ import {
   useT,
 } from "@agent-native/core/client";
 import { TeamPage } from "@agent-native/core/client/org";
-
 import {
   Card,
   CardContent,
   CardDescription,
   CardHeader,
   CardTitle,
-} from "@/components/ui/card";
-import { Label } from "@/components/ui/label";
+} from "@agent-native/toolkit/ui/card";
+import { Label } from "@agent-native/toolkit/ui/label";
+
 import { messagesByLocale } from "@/i18n-data";
 
 import changelog from "../../CHANGELOG.md?raw";

package/corpus/templates/design/changelog/2026-07-03-design-system-setup-now-indexes-figma-code-and-design-md-sou.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-03
+---
+
+Design system setup now indexes Figma, code, and design.md sources through Builder DSI.

package/corpus/templates/design/changelog/2026-07-03-the-code-editor-is-easier-to-use-with-top-sidebar-tabs-clear.md

@@ -0,0 +1,6 @@
+---
+type: improved
+date: 2026-07-03
+---
+
+The code editor is easier to use with top sidebar tabs, clearer screen names, no minimap, and fewer false reload conflicts.

package/corpus/templates/design/package.json

@@ -19,6 +19,7 @@
   "dependencies": {
     "@agent-native/core": "workspace:*",
     "@agent-native/pinpoint": "workspace:*",
+    "@agent-native/toolkit": "workspace:*",
     "@fontsource-variable/inter": "^5.2.8",
     "@libsql/client": "^0.15.8",
     "@paper-design/shaders-react": "0.0.76",