@agent-native/core 0.86.1 → 0.87.0

package/corpus/templates/plan/app/components/plan/PlanContentRenderer.tsx

@@ -10,6 +10,7 @@ import {
   type CollabUser,
   type RichMarkdownCollabUser,
 } from "@agent-native/core/client";
+import { Button } from "@agent-native/toolkit/ui/button";
 import type { PlanFileTreeBlock } from "@shared/plan-content";
 import type {
   PlanAnnotation,
@@ -33,7 +34,6 @@ import {
   type ReactNode,
 } from "react";
 
-import { Button } from "@/components/ui/button";
 import { usePlanPresence } from "@/hooks/use-plan-presence";
 import { cn } from "@/lib/utils";
 

package/corpus/templates/plan/app/components/plan/PlanImageViewer.tsx

@@ -1,5 +1,16 @@
 import { useT } from "@agent-native/core/client";
-import * as DialogPrimitive from "@radix-ui/react-dialog";
+import {
+  Dialog,
+  DialogContent,
+  DialogTitle,
+} from "@agent-native/toolkit/ui/dialog";
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+  DropdownMenuTrigger,
+} from "@agent-native/toolkit/ui/dropdown-menu";
 import {
   IconCopy,
   IconDownload,
@@ -15,14 +26,6 @@ import {
 } from "@tabler/icons-react";
 import { useState, type MouseEvent } from "react";
 
-import { Dialog, DialogOverlay, DialogTitle } from "@/components/ui/dialog";
-import {
-  DropdownMenu,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
 import { cn } from "@/lib/utils";
 
 import {
@@ -248,82 +251,80 @@ function PlanImageLightbox({
 
   return (
     <Dialog open={open} onOpenChange={handleOpenChange}>
-      <DialogPrimitive.Portal>
-        <DialogOverlay className="z-[250] bg-black/85 backdrop-blur-sm" />
-        <DialogPrimitive.Content
-          className="fixed inset-0 z-[251] flex items-center justify-center focus:outline-none"
-          aria-describedby={undefined}
-          onOpenAutoFocus={(event) => event.preventDefault()}
+      <DialogContent
+        hideClose
+        className="fixed inset-0 left-0 top-0 z-[281] flex h-screen max-h-none w-screen max-w-none translate-x-0 translate-y-0 items-center justify-center gap-0 overflow-hidden rounded-none border-0 bg-black/85 p-0 text-white shadow-none backdrop-blur-sm focus:outline-none data-[state=closed]:zoom-out-100 data-[state=open]:zoom-in-100"
+        aria-describedby={undefined}
+        onOpenAutoFocus={(event) => event.preventDefault()}
+      >
+        <DialogTitle className="sr-only">
+          {alt || t("raw.imageViewer.closePreview")}
+        </DialogTitle>
+
+        <div
+          className="flex h-full w-full items-center justify-center overflow-auto p-6"
+          onClick={(event) => {
+            if (event.target === event.currentTarget) handleOpenChange(false);
+          }}
         >
-          <DialogTitle className="sr-only">
-            {alt || t("raw.imageViewer.closePreview")}
-          </DialogTitle>
+          <img
+            src={src}
+            alt={alt}
+            draggable={false}
+            onClick={() => setZoomed((value) => !value)}
+            className={cn(
+              "rounded-lg shadow-2xl transition-transform",
+              zoomed
+                ? "max-w-none cursor-zoom-out"
+                : "max-h-[90vh] max-w-[92vw] cursor-zoom-in object-contain",
+            )}
+          />
+        </div>
 
-          <div
-            className="flex h-full w-full items-center justify-center overflow-auto p-6"
-            onClick={(event) => {
-              if (event.target === event.currentTarget) handleOpenChange(false);
-            }}
+        <div className="fixed bottom-6 left-1/2 flex -translate-x-1/2 items-center gap-1 rounded-full border border-white/15 bg-black/70 px-2 py-1.5 text-white shadow-xl backdrop-blur">
+          <button
+            type="button"
+            className="inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-full text-white/90 transition-colors hover:bg-white/15 disabled:cursor-default disabled:opacity-40"
+            aria-label={t("raw.imageViewer.fitToScreen")}
+            disabled={!zoomed}
+            onClick={() => setZoomed(false)}
           >
-            <img
-              src={src}
-              alt={alt}
-              draggable={false}
-              onClick={() => setZoomed((value) => !value)}
-              className={cn(
-                "rounded-lg shadow-2xl transition-transform",
-                zoomed
-                  ? "max-w-none cursor-zoom-out"
-                  : "max-h-[90vh] max-w-[92vw] cursor-zoom-in object-contain",
-              )}
-            />
-          </div>
-
-          <div className="fixed bottom-6 left-1/2 flex -translate-x-1/2 items-center gap-1 rounded-full border border-white/15 bg-black/70 px-2 py-1.5 text-white shadow-xl backdrop-blur">
-            <button
-              type="button"
-              className="inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-full text-white/90 transition-colors hover:bg-white/15 disabled:cursor-default disabled:opacity-40"
-              aria-label={t("raw.imageViewer.fitToScreen")}
-              disabled={!zoomed}
-              onClick={() => setZoomed(false)}
-            >
-              <IconMinus size={17} />
-            </button>
-            <span className="min-w-[5.5rem] text-center text-xs font-medium tabular-nums">
-              {zoomed
-                ? t("raw.imageViewer.actualSize")
-                : t("raw.imageViewer.fitToScreen")}
-            </span>
-            <button
-              type="button"
-              className="inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-full text-white/90 transition-colors hover:bg-white/15 disabled:cursor-default disabled:opacity-40"
-              aria-label={t("raw.imageViewer.actualSize")}
-              disabled={zoomed}
-              onClick={() => setZoomed(true)}
-            >
-              <IconPlus size={17} />
-            </button>
-            <span className="mx-1 h-5 w-px bg-white/20" aria-hidden />
-            <button
-              type="button"
-              className="inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-full text-white/90 transition-colors hover:bg-white/15"
-              aria-label={t("raw.imageViewer.downloadImage")}
-              onClick={() => void downloadImage(src, alt, actionMessages)}
-            >
-              <IconDownload size={17} />
-            </button>
-            <span className="mx-1 h-5 w-px bg-white/20" aria-hidden />
-            <button
-              type="button"
-              className="inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-full text-white/90 transition-colors hover:bg-white/15"
-              aria-label={t("raw.imageViewer.closePreview")}
-              onClick={() => handleOpenChange(false)}
-            >
-              <IconX size={17} />
-            </button>
-          </div>
-        </DialogPrimitive.Content>
-      </DialogPrimitive.Portal>
+            <IconMinus size={17} />
+          </button>
+          <span className="min-w-[5.5rem] text-center text-xs font-medium tabular-nums">
+            {zoomed
+              ? t("raw.imageViewer.actualSize")
+              : t("raw.imageViewer.fitToScreen")}
+          </span>
+          <button
+            type="button"
+            className="inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-full text-white/90 transition-colors hover:bg-white/15 disabled:cursor-default disabled:opacity-40"
+            aria-label={t("raw.imageViewer.actualSize")}
+            disabled={zoomed}
+            onClick={() => setZoomed(true)}
+          >
+            <IconPlus size={17} />
+          </button>
+          <span className="mx-1 h-5 w-px bg-white/20" aria-hidden />
+          <button
+            type="button"
+            className="inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-full text-white/90 transition-colors hover:bg-white/15"
+            aria-label={t("raw.imageViewer.downloadImage")}
+            onClick={() => void downloadImage(src, alt, actionMessages)}
+          >
+            <IconDownload size={17} />
+          </button>
+          <span className="mx-1 h-5 w-px bg-white/20" aria-hidden />
+          <button
+            type="button"
+            className="inline-flex h-8 w-8 cursor-pointer items-center justify-center rounded-full text-white/90 transition-colors hover:bg-white/15"
+            aria-label={t("raw.imageViewer.closePreview")}
+            onClick={() => handleOpenChange(false)}
+          >
+            <IconX size={17} />
+          </button>
+        </div>
+      </DialogContent>
     </Dialog>
   );
 }

package/corpus/templates/plan/app/components/plan/PlanVisualSurface.tsx

@@ -1,4 +1,7 @@
 import { useT } from "@agent-native/core/client";
+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 type { PlanBlock, PlanContent } from "@shared/plan-content";
 import type { PlanAnnotation } from "@shared/plan-content";
 import {
@@ -9,9 +12,6 @@ import {
 } from "@tabler/icons-react";
 import { useEffect, useMemo, useState } from "react";
 
-import { Button } from "@/components/ui/button";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 
 import {

package/corpus/templates/plan/app/components/plan/planBlocks.tsx

@@ -17,14 +17,14 @@ import {
   useT,
   type RichMarkdownCollabUser,
 } from "@agent-native/core/client";
-import type { PlanBlock } from "@shared/plan-content";
-import { lazy, Suspense, useEffect, useRef, useState } from "react";
-
 import {
   Popover,
   PopoverContent,
   PopoverTrigger,
-} from "@/components/ui/popover";
+} from "@agent-native/toolkit/ui/popover";
+import type { PlanBlock } from "@shared/plan-content";
+import { lazy, Suspense, useEffect, useRef, useState } from "react";
+
 import { cn } from "@/lib/utils";
 
 import { PlanBlockView } from "./DocumentArea";

package/corpus/templates/plan/app/pages/PlansPage.tsx

@@ -27,6 +27,90 @@ import {
   type OrgInvitationSummary,
   type DomainMatchOrg,
 } from "@agent-native/core/client/org";
+import {
+  useSetHeaderActions,
+  useSetPageTitle,
+} from "@agent-native/toolkit/app-shell";
+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 { Badge } from "@agent-native/toolkit/ui/badge";
+import { Button } from "@agent-native/toolkit/ui/button";
+import { Checkbox } from "@agent-native/toolkit/ui/checkbox";
+import {
+  Collapsible,
+  CollapsibleContent,
+  CollapsibleTrigger,
+} from "@agent-native/toolkit/ui/collapsible";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+} from "@agent-native/toolkit/ui/dialog";
+import {
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+} from "@agent-native/toolkit/ui/dropdown-menu";
+import { Input } from "@agent-native/toolkit/ui/input";
+import { Label } from "@agent-native/toolkit/ui/label";
+import {
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+} from "@agent-native/toolkit/ui/popover";
+import { ScrollArea } from "@agent-native/toolkit/ui/scroll-area";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "@agent-native/toolkit/ui/select";
+import { Separator } from "@agent-native/toolkit/ui/separator";
+import {
+  Sheet,
+  SheetContent,
+  SheetDescription,
+  SheetHeader,
+  SheetTitle,
+} from "@agent-native/toolkit/ui/sheet";
+import { Skeleton } from "@agent-native/toolkit/ui/skeleton";
+import { Textarea } from "@agent-native/toolkit/ui/textarea";
+import {
+  ToggleGroup,
+  ToggleGroupItem,
+} from "@agent-native/toolkit/ui/toggle-group";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@agent-native/toolkit/ui/tooltip";
 import {
   SOURCE_AUTHOR_COMMENT_MENTION_EMAIL,
   extractCommentMentions,
@@ -124,10 +208,6 @@ import {
 import { Link, useLocation, useNavigate, useParams } from "react-router";
 import { toast } from "sonner";
 
-import {
-  useSetHeaderActions,
-  useSetPageTitle,
-} from "@/components/layout/HeaderActions";
 import type {
   CanvasMarkupCreateContext,
   CanvasMarkupMode,
@@ -139,80 +219,7 @@ import {
   toggleWireframeStyle,
   useWireframeStyle,
 } from "@/components/plan/wireframe/use-wireframe-style";
-import {
-  AlertDialog,
-  AlertDialogAction,
-  AlertDialogCancel,
-  AlertDialogContent,
-  AlertDialogDescription,
-  AlertDialogFooter,
-  AlertDialogHeader,
-  AlertDialogTitle,
-} from "@/components/ui/alert-dialog";
-import { Avatar, AvatarFallback, AvatarImage } from "@/components/ui/avatar";
-import { Badge } from "@/components/ui/badge";
-import { Button } from "@/components/ui/button";
-import { Checkbox } from "@/components/ui/checkbox";
-import {
-  Collapsible,
-  CollapsibleContent,
-  CollapsibleTrigger,
-} from "@/components/ui/collapsible";
-import {
-  Dialog,
-  DialogContent,
-  DialogDescription,
-  DialogFooter,
-  DialogHeader,
-  DialogTitle,
-} from "@/components/ui/dialog";
-import {
-  DropdownMenu,
-  DropdownMenuCheckboxItem,
-  DropdownMenuContent,
-  DropdownMenuGroup,
-  DropdownMenuItem,
-  DropdownMenuLabel,
-  DropdownMenuRadioGroup,
-  DropdownMenuRadioItem,
-  DropdownMenuSeparator,
-  DropdownMenuSub,
-  DropdownMenuSubContent,
-  DropdownMenuSubTrigger,
-  DropdownMenuTrigger,
-} from "@/components/ui/dropdown-menu";
-import { Input } from "@/components/ui/input";
-import { Label } from "@/components/ui/label";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { ScrollArea } from "@/components/ui/scroll-area";
-import {
-  Select,
-  SelectContent,
-  SelectItem,
-  SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Separator } from "@/components/ui/separator";
-import {
-  Sheet,
-  SheetContent,
-  SheetDescription,
-  SheetHeader,
-  SheetTitle,
-} from "@/components/ui/sheet";
-import { Skeleton } from "@/components/ui/skeleton";
 import { Tabs, TabsList, TabsTrigger } from "@/components/ui/tabs";
-import { Textarea } from "@/components/ui/textarea";
-import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
 import {
   planBundleQueryKey,
   localPlanBundleQueryKey,

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

@@ -12,6 +12,7 @@ import {
   useT,
 } from "@agent-native/core/client";
 import { configureTracking } from "@agent-native/core/client";
+import { Toaster } from "@agent-native/toolkit/ui/sonner";
 import {
   IconMoon,
   IconScribble,
@@ -36,7 +37,6 @@ import {
   toggleWireframeStyle,
   useWireframeStyle,
 } from "@/components/plan/wireframe/use-wireframe-style";
-import { Toaster } from "@/components/ui/sonner";
 import { useNavigationState } from "@/hooks/use-navigation-state";
 import { APP_TITLE } from "@/lib/app-config";
 // Side effect: register Plan's native chat renderers so visual answers render

package/corpus/templates/plan/app/routes/_index.tsx

@@ -1,4 +1,5 @@
-import { Spinner } from "@/components/ui/spinner";
+import { Spinner } from "@agent-native/toolkit/ui/spinner";
+
 import { APP_TITLE } from "@/lib/app-config";
 import { PlanChatPage } from "@/pages/PlanChatPage";
 

package/corpus/templates/plan/app/routes/local-plans.$slug.tsx

@@ -1,6 +1,6 @@
+import { Spinner } from "@agent-native/toolkit/ui/spinner";
 import { useParams } from "react-router";
 
-import { Spinner } from "@/components/ui/spinner";
 import { APP_TITLE } from "@/lib/app-config";
 import { PlansPage } from "@/pages/PlansPage";
 

package/corpus/templates/plan/app/routes/plans.$id.tsx

@@ -1,4 +1,5 @@
-import { Spinner } from "@/components/ui/spinner";
+import { Spinner } from "@agent-native/toolkit/ui/spinner";
+
 import { APP_TITLE } from "@/lib/app-config";
 import { planDocumentTitle } from "@/lib/plan-document-title";
 import { PlansPage } from "@/pages/PlansPage";

package/corpus/templates/plan/app/routes/plans.tsx

@@ -1,4 +1,5 @@
-import { Spinner } from "@/components/ui/spinner";
+import { Spinner } from "@agent-native/toolkit/ui/spinner";
+
 import { APP_TITLE } from "@/lib/app-config";
 import { PlansPage } from "@/pages/PlansPage";
 

package/corpus/templates/plan/app/routes/recaps.$id.tsx

@@ -1,4 +1,5 @@
-import { Spinner } from "@/components/ui/spinner";
+import { Spinner } from "@agent-native/toolkit/ui/spinner";
+
 import { APP_TITLE } from "@/lib/app-config";
 import { planDocumentTitle } from "@/lib/plan-document-title";
 import { PlansPage } from "@/pages/PlansPage";

package/corpus/templates/plan/app/routes/recaps.tsx

@@ -1,4 +1,5 @@
-import { Spinner } from "@/components/ui/spinner";
+import { Spinner } from "@agent-native/toolkit/ui/spinner";
+
 import { APP_TITLE } from "@/lib/app-config";
 import { PlansPage } from "@/pages/PlansPage";
 

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

@@ -6,17 +6,17 @@ import {
   useT,
 } from "@agent-native/core/client";
 import { TeamPage } from "@agent-native/core/client/org";
-
-import { useSetPageTitle } from "@/components/layout/HeaderActions";
-import { Button } from "@/components/ui/button";
+import { useSetPageTitle } from "@agent-native/toolkit/app-shell";
+import { Button } from "@agent-native/toolkit/ui/button";
 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 { APP_TITLE } from "@/lib/app-config";
 
 import changelog from "../../CHANGELOG.md?raw";

package/corpus/templates/plan/changelog/2026-07-05-images-in-plan-documents-open-reliably-in-the-full-size-prev.md

@@ -0,0 +1,6 @@
+---
+type: fixed
+date: 2026-07-05
+---
+
+Images in Plan documents open reliably in the full-size preview.

package/corpus/templates/plan/package.json

@@ -15,6 +15,7 @@
   },
   "dependencies": {
     "@agent-native/core": "workspace:*",
+    "@agent-native/toolkit": "workspace:*",
     "@excalidraw/excalidraw": "0.18.1",
     "@excalidraw/mermaid-to-excalidraw": "2.2.2",
     "@fontsource-variable/inter": "^5.2.8",

package/corpus/templates/slides/app/components/ThemeToggle.tsx

@@ -1,14 +1,14 @@
 import { useT } from "@agent-native/core/client";
-import { IconSun, IconMoon } from "@tabler/icons-react";
-import { useTheme } from "next-themes";
-import { useState, useEffect } from "react";
-
-import { Button } from "@/components/ui/button";
+import { Button } from "@agent-native/toolkit/ui/button";
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from "@/components/ui/tooltip";
+} from "@agent-native/toolkit/ui/tooltip";
+import { IconSun, IconMoon } from "@tabler/icons-react";
+import { useTheme } from "next-themes";
+import { useState, useEffect } from "react";
+
 import { cn } from "@/lib/utils";
 
 export function ThemeToggle({ className }: { className?: string }) {

package/corpus/templates/slides/app/components/comments/SlideCommentsPanel.tsx

@@ -1,4 +1,9 @@
 import { useT } from "@agent-native/core/client";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@agent-native/toolkit/ui/tooltip";
 import {
   IconX,
   IconCheck,
@@ -8,11 +13,6 @@ import {
 } from "@tabler/icons-react";
 import { useState, useRef, useEffect } from "react";
 
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
 import {
   useSlideComments,
   useCreateSlideComment,

package/corpus/templates/slides/app/components/deck/DeckCard.tsx

@@ -1,4 +1,11 @@
 import { VisibilityBadge, useT } from "@agent-native/core/client";
+import {
+  DropdownMenu,
+  DropdownMenuTrigger,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuSeparator,
+} from "@agent-native/toolkit/ui/dropdown-menu";
 import {
   IconDots,
   IconTrash,
@@ -9,13 +16,6 @@ import {
 import { useState, useRef, useEffect } from "react";
 import { Link } from "react-router";
 
-import {
-  DropdownMenu,
-  DropdownMenuTrigger,
-  DropdownMenuContent,
-  DropdownMenuItem,
-  DropdownMenuSeparator,
-} from "@/components/ui/dropdown-menu";
 import type { Deck } from "@/context/DeckContext";
 
 import SlideRenderer from "./SlideRenderer";

package/corpus/templates/slides/app/components/deck/ExcalidrawSlide.tsx

@@ -1,3 +1,4 @@
+import { Skeleton } from "@agent-native/toolkit/ui/skeleton";
 import DOMPurify from "dompurify";
 import {
   useEffect,
@@ -8,8 +9,6 @@ import {
   Suspense,
 } from "react";
 
-import { Skeleton } from "@/components/ui/skeleton";
-
 const Excalidraw = lazy(async () => {
   await import("@excalidraw/excalidraw/index.css");
   const mod = await import("@excalidraw/excalidraw");

package/corpus/templates/slides/app/components/deck/SlideRenderer.tsx

@@ -1,4 +1,5 @@
 import { useT } from "@agent-native/core/client";
+import { Skeleton } from "@agent-native/toolkit/ui/skeleton";
 import {
   useState,
   useEffect,
@@ -11,7 +12,6 @@ import {
 import ReactMarkdown from "react-markdown";
 import rehypeRaw from "rehype-raw";
 
-import { Skeleton } from "@/components/ui/skeleton";
 import type { Slide } from "@/context/DeckContext";
 import { type AspectRatio, getAspectRatioDims } from "@/lib/aspect-ratios";
 import {

package/corpus/templates/slides/app/components/design-system/DesignSystemCard.tsx

@@ -1,11 +1,10 @@
 import { ShareButton, VisibilityBadge } from "@agent-native/core/client";
-import { IconPalette, IconStar, IconStarFilled } from "@tabler/icons-react";
-
 import {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
-} from "@/components/ui/tooltip";
+} from "@agent-native/toolkit/ui/tooltip";
+import { IconPalette, IconStar, IconStarFilled } from "@tabler/icons-react";
 
 import type { DesignSystemData } from "../../../shared/api";