@agent-native/core 0.117.2 → 0.118.0

package/corpus/templates/crm/app/components/crm/CrmSignalsPanel.tsx

@@ -4,8 +4,6 @@ import {
   useActionMutation,
   useActionQuery,
 } from "@agent-native/core/client/hooks";
-import { Badge } from "@agent-native/toolkit/ui/badge";
-import { Button } from "@agent-native/toolkit/ui/button";
 import {
   IconCheck,
   IconExternalLink,
@@ -14,6 +12,9 @@ import {
 } from "@tabler/icons-react";
 import { useState } from "react";
 
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+
 interface Signal {
   id: string;
   label: string;

package/corpus/templates/crm/app/components/crm/IntelligenceSettings.tsx

@@ -3,6 +3,10 @@ import {
   useActionQuery,
 } from "@agent-native/core/client/hooks";
 import { useT } from "@agent-native/core/client/i18n";
+import { IconBrain, IconPlus, IconTags, IconTrash } from "@tabler/icons-react";
+import { useState } from "react";
+import { toast } from "sonner";
+
 import {
   AlertDialog,
   AlertDialogAction,
@@ -13,9 +17,9 @@ import {
   AlertDialogHeader,
   AlertDialogTitle,
   AlertDialogTrigger,
-} from "@agent-native/toolkit/ui/alert-dialog";
-import { Badge } from "@agent-native/toolkit/ui/badge";
-import { Button } from "@agent-native/toolkit/ui/button";
+} from "@/components/ui/alert-dialog";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   Dialog,
   DialogContent,
@@ -24,9 +28,9 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from "@agent-native/toolkit/ui/dialog";
-import { Input } from "@agent-native/toolkit/ui/input";
-import { Label } from "@agent-native/toolkit/ui/label";
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
 import {
   Select,
   SelectContent,
@@ -34,12 +38,9 @@ import {
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@agent-native/toolkit/ui/select";
-import { Switch } from "@agent-native/toolkit/ui/switch";
-import { Textarea } from "@agent-native/toolkit/ui/textarea";
-import { IconBrain, IconPlus, IconTags, IconTrash } from "@tabler/icons-react";
-import { useState } from "react";
-import { toast } from "sonner";
+} from "@/components/ui/select";
+import { Switch } from "@/components/ui/switch";
+import { Textarea } from "@/components/ui/textarea";
 
 type TrackerKind = "keyword" | "smart";
 

package/corpus/templates/crm/app/components/crm/RecordActions.tsx

@@ -4,7 +4,18 @@ import {
   useActionQuery,
 } from "@agent-native/core/client/hooks";
 import { useT } from "@agent-native/core/client/i18n";
-import { Button } from "@agent-native/toolkit/ui/button";
+import {
+  IconBolt,
+  IconChecklist,
+  IconExternalLink,
+  IconFilePlus,
+  IconPencil,
+} from "@tabler/icons-react";
+import { useState } from "react";
+import { Link } from "react-router";
+import { toast } from "sonner";
+
+import { Button } from "@/components/ui/button";
 import {
   Dialog,
   DialogContent,
@@ -13,28 +24,17 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from "@agent-native/toolkit/ui/dialog";
-import { Input } from "@agent-native/toolkit/ui/input";
-import { Label } from "@agent-native/toolkit/ui/label";
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@agent-native/toolkit/ui/select";
-import { Textarea } from "@agent-native/toolkit/ui/textarea";
-import {
-  IconBolt,
-  IconChecklist,
-  IconExternalLink,
-  IconFilePlus,
-  IconPencil,
-} from "@tabler/icons-react";
-import { useState } from "react";
-import { Link } from "react-router";
-import { toast } from "sonner";
-
+} from "@/components/ui/select";
+import { Textarea } from "@/components/ui/textarea";
 import type { CrmRecordDetail } from "@/lib/types";
 
 export function RecordActions({ record }: { record: CrmRecordDetail }) {

package/corpus/templates/crm/app/components/crm/RecordGrid.tsx

@@ -1,5 +1,10 @@
-import { Badge } from "@agent-native/toolkit/ui/badge";
-import { Input } from "@agent-native/toolkit/ui/input";
+import { IconArrowUpRight, IconSearch } from "@tabler/icons-react";
+import { useEffect, useState } from "react";
+import { Link, useSearchParams } from "react-router";
+
+import { LoadingRows, SetupEmptyState } from "@/components/crm/Surface";
+import { Badge } from "@/components/ui/badge";
+import { Input } from "@/components/ui/input";
 import {
   Table,
   TableBody,
@@ -7,12 +12,7 @@ import {
   TableHead,
   TableHeader,
   TableRow,
-} from "@agent-native/toolkit/ui/table";
-import { IconArrowUpRight, IconSearch } from "@tabler/icons-react";
-import { useEffect, useState } from "react";
-import { Link, useSearchParams } from "react-router";
-
-import { LoadingRows, SetupEmptyState } from "@/components/crm/Surface";
+} from "@/components/ui/table";
 import type { CrmKind, CrmRecordSummary } from "@/lib/types";
 
 const labels: Record<CrmKind, string> = {

package/corpus/templates/crm/app/components/crm/RecordWorkspace.tsx

@@ -1,11 +1,3 @@
-import { Badge } from "@agent-native/toolkit/ui/badge";
-import { Button } from "@agent-native/toolkit/ui/button";
-import {
-  Tabs,
-  TabsContent,
-  TabsList,
-  TabsTrigger,
-} from "@agent-native/toolkit/ui/tabs";
 import {
   IconChecklist,
   IconExternalLink,
@@ -19,6 +11,9 @@ import { Link } from "react-router";
 
 import { CrmSignalsPanel } from "@/components/crm/CrmSignalsPanel";
 import { LoadingRows, SetupEmptyState } from "@/components/crm/Surface";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import {
   asText,
   normalizeTasks,

package/corpus/templates/crm/app/components/crm/SavedViewDataProgram.tsx

@@ -1,9 +1,10 @@
 import { useActionMutation } from "@agent-native/core/client/hooks";
 import { DataTable } from "@agent-native/toolkit/dashboard";
-import { Badge } from "@agent-native/toolkit/ui/badge";
 import { IconChartDots } from "@tabler/icons-react";
 import { useEffect, useRef } from "react";
 
+import { Badge } from "@/components/ui/badge";
+
 interface ProgramPreview {
   ok: boolean;
   rowCount?: number;

package/corpus/templates/crm/app/components/crm/Surface.tsx

@@ -1,5 +1,3 @@
-import { Button } from "@agent-native/toolkit/ui/button";
-import { Skeleton } from "@agent-native/toolkit/ui/skeleton";
 import {
   IconArrowUpRight,
   IconDatabase,
@@ -7,6 +5,9 @@ import {
 } from "@tabler/icons-react";
 import { Link } from "react-router";
 
+import { Button } from "@/components/ui/button";
+import { Skeleton } from "@/components/ui/skeleton";
+
 export function PageHeader({
   eyebrow,
   title,

package/corpus/templates/crm/app/components/crm/WorkOverview.tsx

@@ -1,9 +1,9 @@
-import { Badge } from "@agent-native/toolkit/ui/badge";
-import { Button } from "@agent-native/toolkit/ui/button";
 import { IconArrowRight, IconCheck, IconListCheck } from "@tabler/icons-react";
 import { Link } from "react-router";
 
 import { LoadingRows, SetupEmptyState } from "@/components/crm/Surface";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   normalizeRecords,
   normalizeTasks,

package/corpus/templates/crm/app/components/layout/CrmLayout.tsx

@@ -6,18 +6,18 @@ import {
   useAgentChatHomeHandoff,
   useAgentChatHomeHandoffLinks,
 } from "@agent-native/core/client/agent-chat";
-import { Button } from "@agent-native/toolkit/ui/button";
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetTitle,
-} from "@agent-native/toolkit/ui/sheet";
 import { IconMenu2 } from "@tabler/icons-react";
 import { useEffect, useState } from "react";
 import { useLocation, useNavigate } from "react-router";
 
 import { CrmSidebar } from "@/components/layout/CrmSidebar";
+import { Button } from "@/components/ui/button";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetTitle,
+} from "@/components/ui/sheet";
 import { TAB_ID } from "@/lib/tab-id";
 
 export function CrmLayout({ children }: { children: React.ReactNode }) {

package/corpus/templates/crm/app/components/layout/CrmSidebar.tsx

@@ -1,4 +1,3 @@
-import { Button } from "@agent-native/toolkit/ui/button";
 import {
   IconBuilding,
   IconChecklist,
@@ -13,6 +12,7 @@ import {
 } from "@tabler/icons-react";
 import { Link, NavLink } from "react-router";
 
+import { Button } from "@/components/ui/button";
 import { cn } from "@/lib/utils";
 
 const navigation = [

package/corpus/templates/crm/app/components/ui/alert-dialog.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/alert-dialog";

package/corpus/templates/crm/app/components/ui/badge.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/badge";

package/corpus/templates/crm/app/components/ui/button.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/button";

package/corpus/templates/crm/app/components/ui/card.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/card";

package/corpus/templates/crm/app/components/ui/dialog.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/dialog";

package/corpus/templates/crm/app/components/ui/input.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/input";

package/corpus/templates/crm/app/components/ui/label.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/label";

package/corpus/templates/crm/app/components/ui/select.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/select";

package/corpus/templates/crm/app/components/ui/sheet.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/sheet";

package/corpus/templates/crm/app/components/ui/skeleton.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/skeleton";

package/corpus/templates/crm/app/components/ui/switch.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/switch";

package/corpus/templates/crm/app/components/ui/table.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/table";

package/corpus/templates/crm/app/components/ui/tabs.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/tabs";

package/corpus/templates/crm/app/components/ui/textarea.tsx

@@ -0,0 +1 @@
+export * from "@agent-native/toolkit/ui/textarea";

package/corpus/templates/crm/app/components/ui/toolkit-provider.tsx

@@ -0,0 +1,17 @@
+import { ToolkitProvider, type ToolkitComponents } from "@agent-native/toolkit";
+import type { ReactNode } from "react";
+
+import { Button } from "@/components/ui/button";
+import { designSystem } from "@/design-system";
+
+const components: ToolkitComponents = {
+  Button: Button as ToolkitComponents["Button"],
+};
+
+export function AppToolkitProvider({ children }: { children: ReactNode }) {
+  return (
+    <ToolkitProvider components={components} designSystem={designSystem}>
+      {children}
+    </ToolkitProvider>
+  );
+}

package/corpus/templates/crm/app/design-system.ts

@@ -0,0 +1,3 @@
+import { defineDesignSystem } from "@agent-native/toolkit/design-system";
+
+export const designSystem = defineDesignSystem({});

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

@@ -13,6 +13,7 @@ import { Links, Meta, Outlet, Scripts, ScrollRestoration } from "react-router";
 import type { LinksFunction } from "react-router";
 
 import { CrmLayout } from "@/components/layout/CrmLayout";
+import { AppToolkitProvider } from "@/components/ui/toolkit-provider";
 import { useNavigationState } from "@/hooks/use-navigation-state";
 import { i18nCatalog } from "@/i18n";
 import { TAB_ID } from "@/lib/tab-id";
@@ -76,12 +77,14 @@ function SyncBridge() {
 export default function Root() {
   const [queryClient] = useState(() => createAgentNativeQueryClient());
   return (
-    <AppProviders queryClient={queryClient} i18n={{ catalog: i18nCatalog }}>
-      <SyncBridge />
-      <CrmLayout>
-        <Outlet />
-      </CrmLayout>
-    </AppProviders>
+    <AppToolkitProvider>
+      <AppProviders queryClient={queryClient} i18n={{ catalog: i18nCatalog }}>
+        <SyncBridge />
+        <CrmLayout>
+          <Outlet />
+        </CrmLayout>
+      </AppProviders>
+    </AppToolkitProvider>
   );
 }
 

package/corpus/templates/crm/app/routes/dashboard.tsx

@@ -3,7 +3,6 @@ import {
   useActionQuery,
 } from "@agent-native/core/client/hooks";
 import { useT } from "@agent-native/core/client/i18n";
-import { Button } from "@agent-native/toolkit/ui/button";
 import { IconRefresh } from "@tabler/icons-react";
 import { useMemo } from "react";
 import { useNavigate, useSearchParams } from "react-router";
@@ -11,6 +10,7 @@ import { toast } from "sonner";
 
 import { CrmDashboardPanel } from "@/components/crm/CrmDashboardPanel";
 import { PageHeader, SetupEmptyState } from "@/components/crm/Surface";
+import { Button } from "@/components/ui/button";
 import { crmDashboardMetaTitle } from "@/i18n/en-US";
 import { dashboardDataPanelId } from "@/lib/dashboard";
 import type { CrmDashboard } from "@/lib/types";

package/corpus/templates/crm/app/routes/proposals.tsx

@@ -2,19 +2,6 @@ import {
   useActionMutation,
   useActionQuery,
 } from "@agent-native/core/client/hooks";
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-  AlertDialogTrigger,
-} from "@agent-native/toolkit/ui/alert-dialog";
-import { Badge } from "@agent-native/toolkit/ui/badge";
-import { Button } from "@agent-native/toolkit/ui/button";
 import { IconExternalLink, IconShieldCheck } from "@tabler/icons-react";
 import { useState } from "react";
 import { Link } from "react-router";
@@ -25,6 +12,19 @@ import {
   PageHeader,
   SetupEmptyState,
 } from "@/components/crm/Surface";
+import {
+  AlertDialog,
+  AlertDialogAction,
+  AlertDialogCancel,
+  AlertDialogContent,
+  AlertDialogDescription,
+  AlertDialogFooter,
+  AlertDialogHeader,
+  AlertDialogTitle,
+  AlertDialogTrigger,
+} from "@/components/ui/alert-dialog";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 
 interface ProposalPreview {
   id: string;

package/corpus/templates/crm/app/routes/setup.tsx

@@ -2,21 +2,21 @@ import {
   useActionMutation,
   useActionQuery,
 } from "@agent-native/core/client/hooks";
-import { Button } from "@agent-native/toolkit/ui/button";
-import { Input } from "@agent-native/toolkit/ui/input";
-import { Label } from "@agent-native/toolkit/ui/label";
+import { useMemo, useState } from "react";
+import { Link, useNavigate } from "react-router";
+import { toast } from "sonner";
+
+import { PageHeader } from "@/components/crm/Surface";
+import { Button } from "@/components/ui/button";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@agent-native/toolkit/ui/select";
-import { useMemo, useState } from "react";
-import { Link, useNavigate } from "react-router";
-import { toast } from "sonner";
-
-import { PageHeader } from "@/components/crm/Surface";
+} from "@/components/ui/select";
 
 interface WorkspaceConnection {
   id: string;

package/corpus/templates/crm/app/routes/tasks.tsx

@@ -2,20 +2,6 @@ import {
   useActionMutation,
   useActionQuery,
 } from "@agent-native/core/client/hooks";
-import { Badge } from "@agent-native/toolkit/ui/badge";
-import { Button } from "@agent-native/toolkit/ui/button";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-  DialogTrigger,
-} from "@agent-native/toolkit/ui/dialog";
-import { Input } from "@agent-native/toolkit/ui/input";
-import { Label } from "@agent-native/toolkit/ui/label";
-import { Textarea } from "@agent-native/toolkit/ui/textarea";
 import { IconCheck, IconPlus, IconX } from "@tabler/icons-react";
 import { useState } from "react";
 import { Link } from "react-router";
@@ -26,6 +12,20 @@ import {
   PageHeader,
   SetupEmptyState,
 } from "@/components/crm/Surface";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
+import { Textarea } from "@/components/ui/textarea";
 import { normalizeTasks } from "@/lib/types";
 
 interface ManageTaskInput {

package/corpus/templates/crm/app/routes/views.tsx

@@ -2,8 +2,18 @@ import {
   useActionMutation,
   useActionQuery,
 } from "@agent-native/core/client/hooks";
-import { Badge } from "@agent-native/toolkit/ui/badge";
-import { Button } from "@agent-native/toolkit/ui/button";
+import { IconBookmark, IconPlus } from "@tabler/icons-react";
+import { useState } from "react";
+import { Link, useNavigate } from "react-router";
+import { toast } from "sonner";
+
+import {
+  LoadingRows,
+  PageHeader,
+  SetupEmptyState,
+} from "@/components/crm/Surface";
+import { Badge } from "@/components/ui/badge";
+import { Button } from "@/components/ui/button";
 import {
   Dialog,
   DialogContent,
@@ -12,26 +22,16 @@ import {
   DialogHeader,
   DialogTitle,
   DialogTrigger,
-} from "@agent-native/toolkit/ui/dialog";
-import { Input } from "@agent-native/toolkit/ui/input";
-import { Label } from "@agent-native/toolkit/ui/label";
+} from "@/components/ui/dialog";
+import { Input } from "@/components/ui/input";
+import { Label } from "@/components/ui/label";
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
   SelectValue,
-} from "@agent-native/toolkit/ui/select";
-import { IconBookmark, IconPlus } from "@tabler/icons-react";
-import { useState } from "react";
-import { Link, useNavigate } from "react-router";
-import { toast } from "sonner";
-
-import {
-  LoadingRows,
-  PageHeader,
-  SetupEmptyState,
-} from "@/components/crm/Surface";
+} from "@/components/ui/select";
 import { asText, type CrmKind, type CrmSavedView } from "@/lib/types";
 
 export default function SavedViewsRoute() {

package/corpus/templates/design/.agents/skills/agent-native-toolkit/SKILL.md

@@ -47,6 +47,34 @@ Before creating an app-local version of repeated workspace or agent UI:
 Use public package exports at runtime. Published source and ejection manifests
 are discovery and ownership-transfer mechanisms, not private runtime APIs.
 
+## Design-System Boundary
+
+Every app keeps an explicit design-system seam in `app/design-system.ts` using
+`defineDesignSystem` from `@agent-native/toolkit/design-system`, and supplies it
+to `ToolkitProvider`. The semantic contract contains:
+
+- nine leaf components: `ActionButton`, `IconButton`, `TextField`, `TextArea`,
+  `Spinner`, `Skeleton`, `Status`, `Surface`, and `Avatar`
+- eight behavior components: `Tooltip`, `Menu`, `Popover`, `Dialog`, `Picker`,
+  `Checkbox`, `Switch`, and `Tabs`
+
+These are semantic contracts, not styling contracts. An adapter may use
+Tailwind/shadcn, MUI-style theme providers, React Aria, CSS modules, CSS-in-JS,
+or another React design system. Do not assume CVA, utility classes, or even a
+`className`; behavior adapters may supply their overlay and focus
+implementation wholesale while honoring portal, focus-restoration, keyboard,
+dismissal, ARIA, and z-index interoperability.
+
+Pages, routes, and domain components import ordinary controls through the app's
+local adapter layer, usually `@/components/ui/*`. They must not import
+`@agent-native/toolkit/ui/*` directly. Toolkit feature exports are still the
+right home for shared workspace behavior; their presentation flows through the
+registered semantic components, feature controller, and product-level slots.
+
+Customer adapter packages are normal npm packages imported explicitly by the
+app. Never auto-detect them or load React components from JSON. Run the adapter
+against `@agent-native/toolkit/conformance` in customer CI before adopting it.
+
 ## Settings Direction
 
 Durable settings belong in the Settings app or a registered settings route. The
@@ -113,8 +141,9 @@ in the moment of agent use.
 When adding or refactoring one of these areas:
 
 1. Search existing framework and template code for duplicated UI or actions.
-2. Decide the shared contract: data shape, action API, React component/hook, and
-   app adapter points.
+2. Decide the shared contract: data shape, action API, feature-level headless
+   controller, default view, semantic components, and product-level render
+   slots.
 3. Keep shared data provider-agnostic and scoped by auth/sharing rules.
 4. Expose the same capability to the UI and agent through actions or documented
    client helpers.
@@ -125,6 +154,12 @@ When adding or refactoring one of these areas:
    ship readable source plus a complete ejection unit so apps can take ownership
    of the smallest feature when needed. See `customizing-agent-native` for the
    configure → compose → eject → propose seam ladder.
+8. Keep one controller as the source of truth for the default and custom render
+   paths. A custom design must not fork actions, analytics, async state, or
+   accessibility behavior.
+9. Verify the default adapter and at least one non-Tailwind adapter with the
+   conformance kit, including focus and portal stacking across mixed overlay
+   implementations.
 
 ## Related Skills