@vllnt/ui 0.2.1 → 0.3.0-canary.a42d8f4

package/dist/components/tutorial-complete/tutorial-complete.js

@@ -2,7 +2,7 @@
 import { jsx, jsxs } from "react/jsx-runtime";
 import { memo } from "react";
 import { Check, ChevronRight, RotateCcw } from "lucide-react";
-import { Button } from "../button";
+import { Button } from "../button/button";
 import { ProfileSection } from "../profile-section";
 import { ShareSection } from "../share-section";
 function DefaultLink({
@@ -22,9 +22,11 @@ function TutorialCompleteImpl({
   onRestart,
   profile,
   relatedContent,
+  sectionLabelAs: SectionHeading = "h3",
   sections,
   shareUrl,
-  title
+  title,
+  titleAs: TitleHeading = "h2"
 }) {
   const isFullyComplete = completionPercent === 100;
   return /* @__PURE__ */ jsxs("div", { children: [
@@ -32,24 +34,24 @@ function TutorialCompleteImpl({
       /* @__PURE__ */ jsx(
         "div",
         {
-          className: `inline-flex items-center justify-center w-20 h-20 rounded-full mb-6 ${isFullyComplete ? "bg-green-100 dark:bg-green-900/30" : "bg-muted"}`,
+          className: `inline-flex items-center justify-center size-20 rounded-full mb-6 ${isFullyComplete ? "bg-green-100 dark:bg-green-900/30" : "bg-muted"}`,
           children: /* @__PURE__ */ jsx(
             Check,
             {
-              className: `h-10 w-10 ${isFullyComplete ? "text-green-600 dark:text-green-400" : "text-muted-foreground"}`
+              className: `size-10 ${isFullyComplete ? "text-green-600 dark:text-green-400" : "text-muted-foreground"}`
             }
           )
         }
       ),
-      /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold mb-2", children: isFullyComplete ? labels.tutorialComplete : labels.tutorialFinished }),
+      /* @__PURE__ */ jsx(TitleHeading, { className: "text-3xl font-semibold mb-2", children: isFullyComplete ? labels.tutorialComplete : labels.tutorialFinished }),
       /* @__PURE__ */ jsx("p", { className: "text-muted-foreground mb-6", children: isFullyComplete ? `${labels.youveCompletedAll} "${title}"` : `${labels.youveFinishedWith} "${title}" (${completionPercent}%)` }),
       /* @__PURE__ */ jsxs(Button, { className: "gap-2", onClick: onRestart, variant: "outline", children: [
-        /* @__PURE__ */ jsx(RotateCcw, { className: "h-4 w-4" }),
+        /* @__PURE__ */ jsx(RotateCcw, { className: "size-4" }),
         labels.startOver
       ] })
     ] }),
     /* @__PURE__ */ jsxs("div", { className: "max-w-2xl mx-auto mt-8", children: [
-      /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-4", children: labels.reviewSections }),
+      /* @__PURE__ */ jsx(SectionHeading, { className: "text-lg font-semibold mb-4", children: labels.reviewSections }),
       /* @__PURE__ */ jsx("div", { className: "space-y-2", children: sections.map((section, index) => {
         const isCompleted = completedSections.has(section.id);
         return /* @__PURE__ */ jsxs(
@@ -64,20 +66,20 @@ function TutorialCompleteImpl({
               /* @__PURE__ */ jsx(
                 "div",
                 {
-                  className: `flex-shrink-0 w-5 h-5 rounded-full border-2 flex items-center justify-center ${isCompleted ? "bg-foreground border-foreground" : "border-muted-foreground"}`,
-                  children: isCompleted ? /* @__PURE__ */ jsx(Check, { className: "h-3 w-3 text-background" }) : null
+                  className: `flex-shrink-0 size-5 rounded-full border-2 flex items-center justify-center ${isCompleted ? "bg-foreground border-foreground" : "border-muted-foreground"}`,
+                  children: isCompleted ? /* @__PURE__ */ jsx(Check, { className: "size-3 text-background" }) : null
                 }
               ),
               /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: section.title }),
-              /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 text-muted-foreground" })
+              /* @__PURE__ */ jsx(ChevronRight, { className: "size-4 text-muted-foreground" })
             ]
           },
-          `${section.id}-${index}`
+          section.id
         );
       }) })
     ] }),
     relatedContent.length > 0 ? /* @__PURE__ */ jsxs("div", { className: "max-w-2xl mx-auto mt-12", children: [
-      /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mb-4", children: labels.relatedContent }),
+      /* @__PURE__ */ jsx(SectionHeading, { className: "text-lg font-semibold mb-4", children: labels.relatedContent }),
       /* @__PURE__ */ jsx("div", { className: "space-y-2", children: relatedContent.map((item) => /* @__PURE__ */ jsxs(
         LinkComponent,
         {
@@ -86,7 +88,7 @@ function TutorialCompleteImpl({
           children: [
             /* @__PURE__ */ jsx("span", { className: "text-xs uppercase text-muted-foreground font-medium", children: item.type }),
             /* @__PURE__ */ jsx("span", { className: "flex-1 truncate", children: item.title }),
-            /* @__PURE__ */ jsx(ChevronRight, { className: "h-4 w-4 text-muted-foreground" })
+            /* @__PURE__ */ jsx(ChevronRight, { className: "size-4 text-muted-foreground" })
           ]
         },
         item.href
@@ -117,7 +119,7 @@ function TutorialCompleteImpl({
     /* @__PURE__ */ jsx("div", { className: "text-center pt-8", children: /* @__PURE__ */ jsx(
       LinkComponent,
       {
-        className: "inline-flex items-center space-x-2 text-muted-foreground hover:text-foreground transition-colors",
+        className: "inline-flex items-center gap-x-2 text-muted-foreground hover:text-foreground transition-colors",
         href: backHref,
         children: /* @__PURE__ */ jsxs("span", { children: [
           "\u2190 ",

package/dist/components/tutorial-filters/tutorial-filters.js

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { memo } from "react";
-import { Badge } from "../badge";
+import { Badge } from "../badge/badge";
 function SearchInput({
   isPending,
   labels,
@@ -74,7 +74,7 @@ function TagFilter({
         }
       ) : null
     ] }),
-    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", children: tags.map((tag) => {
+    /* @__PURE__ */ jsx("div", { className: "flex flex-wrap gap-2", "data-testid": "tag-filter-list", children: tags.map((tag) => {
       const isActive = currentTags.includes(tag);
       return /* @__PURE__ */ jsx(
         Badge,

package/dist/components/tutorial-intro-content/tutorial-intro-content.js

@@ -21,7 +21,7 @@ const serverMarkdownComponents = {
   }) => /* @__PURE__ */ jsx(
     "blockquote",
     {
-      className: "border-l-4 border-primary pl-4 italic text-muted-foreground my-6 py-2 text-sm",
+      className: "border-l border-primary pl-4 italic text-muted-foreground my-6 py-2 text-sm",
       ...props,
       children
     }
@@ -47,15 +47,15 @@ const serverMarkdownComponents = {
   h1: ({
     children,
     ...props
-  }) => /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold mt-8 mb-4", ...props, children }),
+  }) => /* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold mt-8 mb-4", ...props, children }),
   h2: ({
     children,
     ...props
-  }) => /* @__PURE__ */ jsx("h2", { className: "text-xl font-bold mt-6 mb-3", ...props, children }),
+  }) => /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold mt-6 mb-3", ...props, children }),
   h3: ({
     children,
     ...props
-  }) => /* @__PURE__ */ jsx("h3", { className: "text-lg font-bold mt-4 mb-2", ...props, children }),
+  }) => /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mt-4 mb-2", ...props, children }),
   hr: (props) => /* @__PURE__ */ jsx("hr", { className: "my-8 border-border", ...props }),
   li: ({
     children,
@@ -132,7 +132,7 @@ function TutorialIntroContent({
 }) {
   const markdownContent = stripMDXComponents(content);
   return /* @__PURE__ */ jsxs("section", { className: cn("py-6", className), children: [
-    /* @__PURE__ */ jsx("h2", { className: "text-2xl md:text-3xl font-bold mb-6", children: title }),
+    /* @__PURE__ */ jsx("h2", { className: "text-2xl md:text-3xl font-semibold mb-6", children: title }),
     /* @__PURE__ */ jsx("div", { className: "max-w-none [&_h2:first-of-type]:hidden", children: /* @__PURE__ */ jsx(ReactMarkdown, { components: serverMarkdownComponents, children: markdownContent }) })
   ] });
 }

package/dist/components/tutorial-mdx/tutorial-mdx.js

@@ -10,7 +10,7 @@ import {
   AccordionContent,
   AccordionItem,
   AccordionTrigger
-} from "../accordion";
+} from "../accordion/accordion";
 import { Callout } from "../callout";
 import { Checklist } from "../checklist";
 import { CodePlayground, FileTree } from "../code-playground";
@@ -95,7 +95,7 @@ const markdownComponents = {
   blockquote: ({ children, ...props }) => /* @__PURE__ */ jsx(
     "blockquote",
     {
-      className: "border-l-4 border-primary pl-4 italic text-muted-foreground my-6 py-2 text-sm",
+      className: "border-l border-primary pl-4 italic text-muted-foreground my-6 py-2 text-sm",
       ...props,
       children
     }
@@ -114,10 +114,10 @@ const markdownComponents = {
       }
     );
   },
-  h1: ({ children, ...props }) => /* @__PURE__ */ jsx("h1", { className: "text-2xl font-bold mt-8 mb-4", ...props, children }),
-  h2: ({ children, ...props }) => /* @__PURE__ */ jsx("h2", { className: "text-xl font-bold mt-6 mb-3", ...props, children }),
-  h3: ({ children, ...props }) => /* @__PURE__ */ jsx("h3", { className: "text-lg font-bold mt-4 mb-2", ...props, children }),
-  h4: ({ children, ...props }) => /* @__PURE__ */ jsx("h4", { className: "text-base font-bold mt-3 mb-2", ...props, children }),
+  h1: ({ children, ...props }) => /* @__PURE__ */ jsx("h1", { className: "text-2xl font-semibold mt-8 mb-4", ...props, children }),
+  h2: ({ children, ...props }) => /* @__PURE__ */ jsx("h2", { className: "text-xl font-semibold mt-6 mb-3", ...props, children }),
+  h3: ({ children, ...props }) => /* @__PURE__ */ jsx("h3", { className: "text-lg font-semibold mt-4 mb-2", ...props, children }),
+  h4: ({ children, ...props }) => /* @__PURE__ */ jsx("h4", { className: "text-base font-semibold mt-3 mb-2", ...props, children }),
   hr: ({ ...props }) => /* @__PURE__ */ jsx("hr", { className: "my-8 border-border", ...props }),
   li: ({ children, ...props }) => /* @__PURE__ */ jsx(
     "li",

package/dist/components/usage-breakdown/usage-breakdown.js

@@ -1,8 +1,9 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useMemo } from "react";
 import { ArrowDownRight, ArrowUpRight } from "lucide-react";
 import { cn } from "../../lib/utils";
-import { Badge } from "../badge";
+import { Badge } from "../badge/badge";
 import {
   Card,
   CardContent,
@@ -20,10 +21,14 @@ function formatPercent(value) {
   if (!Number.isFinite(value)) return "0%";
   return `${Math.round(value)}%`;
 }
+const LARGE_VALUE_FORMATTER = new Intl.NumberFormat("en-US", {
+  maximumFractionDigits: 0
+});
+const SMALL_VALUE_FORMATTER = new Intl.NumberFormat("en-US", {
+  maximumFractionDigits: 1
+});
 function formatValue(value) {
-  return new Intl.NumberFormat("en-US", {
-    maximumFractionDigits: value >= 100 ? 0 : 1
-  }).format(value);
+  return value >= 100 ? LARGE_VALUE_FORMATTER.format(value) : SMALL_VALUE_FORMATTER.format(value);
 }
 function getRelativeWidth(value, maxValue) {
   if (maxValue <= 0) return 0;
@@ -38,7 +43,7 @@ function UsageBreakdownTrend({ item }) {
   const trendTone = item.tone ?? "default";
   const TrendIcon = item.trend.direction === "down" ? ArrowDownRight : ArrowUpRight;
   return /* @__PURE__ */ jsxs(Badge, { className: cn("gap-1 border", toneClasses[trendTone]), children: [
-    /* @__PURE__ */ jsx(TrendIcon, { className: "h-3.5 w-3.5" }),
+    /* @__PURE__ */ jsx(TrendIcon, { className: "size-3.5" }),
     item.trend.label
   ] });
 }
@@ -68,7 +73,7 @@ function UsageBreakdownRow({
   totalValue
 }) {
   return /* @__PURE__ */ jsx("li", { className: "rounded-lg border bg-background/70 p-4", children: /* @__PURE__ */ jsxs("div", { className: "flex items-start gap-3", children: [
-    /* @__PURE__ */ jsx("div", { className: "flex h-10 w-10 shrink-0 items-center justify-center rounded-md border bg-muted text-sm font-semibold text-muted-foreground", children: item.icon ?? rank }),
+    /* @__PURE__ */ jsx("div", { className: "flex size-10 shrink-0 items-center justify-center rounded-md border bg-muted text-sm font-semibold text-muted-foreground", children: item.icon ?? rank }),
     /* @__PURE__ */ jsxs("div", { className: "min-w-0 flex-1 space-y-3", children: [
       /* @__PURE__ */ jsxs("div", { className: "flex flex-col gap-2 sm:flex-row sm:items-start sm:justify-between", children: [
         /* @__PURE__ */ jsxs("div", { className: "min-w-0 space-y-1", children: [

package/dist/components/video-embed/video-embed.js

@@ -60,14 +60,14 @@ function VideoEmbed({
                   src: thumbnail
                 }
               ) : /* @__PURE__ */ jsx("div", { className: "absolute inset-0 bg-gradient-to-br from-muted to-muted-foreground/20" }),
-              /* @__PURE__ */ jsx("div", { className: "relative z-10 flex h-16 w-16 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg transition-transform group-hover:scale-110", children: /* @__PURE__ */ jsx(Play, { className: "h-6 w-6 ml-1" }) })
+              /* @__PURE__ */ jsx("div", { className: "relative z-10 flex size-16 items-center justify-center rounded-full bg-primary text-primary-foreground shadow-lg transition-transform group-hover:scale-110", children: /* @__PURE__ */ jsx(Play, { className: "size-6 ml-1" }) })
             ]
           }
         )
       }
     ),
     /* @__PURE__ */ jsxs("p", { className: "mt-2 text-sm text-center text-muted-foreground flex items-center justify-center gap-1", children: [
-      /* @__PURE__ */ jsx(Video, { className: "h-4 w-4" }),
+      /* @__PURE__ */ jsx(Video, { className: "size-4" }),
       title
     ] })
   ] });

package/dist/components/viewport-bookmarks/index.js

@@ -0,0 +1,6 @@
+import {
+  ViewportBookmarks
+} from "./viewport-bookmarks";
+export {
+  ViewportBookmarks
+};

package/dist/components/viewport-bookmarks/viewport-bookmarks.js

@@ -0,0 +1,118 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const DEFAULT_LABELS = {
+  empty: "No saved views",
+  region: "Viewport bookmarks"
+};
+const Row = (props) => {
+  const { active, bookmark, onSelect } = props;
+  const handleSelectBookmark = () => {
+    onSelect?.(bookmark.id);
+  };
+  const rowClass = "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-xs transition-colors";
+  const activeClass = active ? "bg-muted/60 text-foreground" : "text-muted-foreground hover:bg-muted/30 hover:text-foreground";
+  if (onSelect) {
+    return /* @__PURE__ */ jsx(
+      "button",
+      {
+        "aria-pressed": active,
+        className: cn(
+          rowClass,
+          activeClass,
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring"
+        ),
+        "data-viewport-bookmark": bookmark.id,
+        "data-viewport-bookmark-active": active,
+        onClick: handleSelectBookmark,
+        type: "button",
+        children: /* @__PURE__ */ jsx(RowBody, { bookmark })
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(rowClass, activeClass),
+      "data-viewport-bookmark": bookmark.id,
+      "data-viewport-bookmark-active": active,
+      children: /* @__PURE__ */ jsx(RowBody, { bookmark })
+    }
+  );
+};
+const RowBody = (props) => {
+  const { bookmark } = props;
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-hidden": "true",
+        className: "size-1.5 rounded-full",
+        style: {
+          backgroundColor: bookmark.color ?? "oklch(var(--foreground))"
+        }
+      }
+    ),
+    /* @__PURE__ */ jsxs("span", { className: "flex flex-1 flex-col text-left", children: [
+      /* @__PURE__ */ jsx("span", { className: "truncate font-medium", children: bookmark.label }),
+      bookmark.detail ? /* @__PURE__ */ jsx(
+        "span",
+        {
+          className: "truncate text-[10px] text-muted-foreground",
+          "data-viewport-bookmark-detail": true,
+          children: bookmark.detail
+        }
+      ) : null
+    ] })
+  ] });
+};
+const ViewportBookmarks = forwardRef((props, ref) => {
+  const {
+    activeId,
+    bookmarks,
+    className,
+    labels,
+    onSelect,
+    title = "Saved views",
+    ...rest
+  } = props;
+  const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+  return /* @__PURE__ */ jsxs(
+    "section",
+    {
+      "aria-label": resolvedLabels.region,
+      className: cn(
+        "flex w-full flex-col gap-1 rounded-lg border border-border bg-background p-2 text-foreground",
+        className
+      ),
+      "data-viewport-bookmarks": true,
+      ref,
+      ...rest,
+      children: [
+        /* @__PURE__ */ jsx("header", { className: "px-2 text-[10px] font-semibold uppercase tracking-wide text-muted-foreground", children: title }),
+        bookmarks.length === 0 ? /* @__PURE__ */ jsx(
+          "p",
+          {
+            className: "px-2 py-3 text-center text-[11px] text-muted-foreground",
+            "data-viewport-bookmarks-state": "empty",
+            children: resolvedLabels.empty
+          }
+        ) : /* @__PURE__ */ jsx("ul", { className: "space-y-0.5", children: bookmarks.map((bookmark) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
+          Row,
+          {
+            active: activeId === bookmark.id,
+            bookmark,
+            onSelect
+          }
+        ) }, bookmark.id)) })
+      ]
+    }
+  );
+});
+ViewportBookmarks.displayName = "ViewportBookmarks";
+export {
+  ViewportBookmarks
+};

package/dist/components/wallet-card/wallet-card.js

@@ -31,7 +31,7 @@ function WalletDetails({
       /* @__PURE__ */ jsx("p", { className: "text-xs uppercase tracking-[0.18em] text-muted-foreground", children: "Current balance" }),
       /* @__PURE__ */ jsx("p", { className: "mt-2 text-3xl font-semibold tracking-tight", children: balanceLabel })
     ] }),
-    /* @__PURE__ */ jsxs("div", { className: "space-y-3 rounded-lg border border-border/70 bg-muted/20 px-4 py-4", children: [
+    /* @__PURE__ */ jsxs("div", { className: "space-y-3 rounded-lg border border-border/70 bg-muted/20 p-4", children: [
       availableLabel ? /* @__PURE__ */ jsx(DetailRow, { label: "Available now", value: availableLabel }) : null,
       pendingLabel ? /* @__PURE__ */ jsx(DetailRow, { label: "Pending", value: pendingLabel }) : null,
       renewsLabel ? /* @__PURE__ */ jsx(DetailRow, { label: "Refresh", value: renewsLabel }) : null

package/dist/components/watchlist/watchlist.js

@@ -21,13 +21,13 @@ function WatchlistRow({ item }) {
       {
         "aria-hidden": "true",
         className: cn(
-          "flex h-7 w-7 items-center justify-center rounded-full border",
+          "flex size-7 items-center justify-center rounded-full border",
           item.starred ? "border-amber-400/40 bg-amber-400/10 text-amber-500" : "border-border bg-background text-muted-foreground"
         ),
         children: /* @__PURE__ */ jsx(
           Star,
           {
-            className: cn("h-3.5 w-3.5", item.starred && "fill-current"),
+            className: cn("size-3.5", item.starred && "fill-current"),
             strokeWidth: 1.75
           }
         )
@@ -49,7 +49,7 @@ function WatchlistRow({ item }) {
           isPositive ? "border-emerald-500/30 bg-emerald-500/10 text-emerald-600 dark:text-emerald-400" : "border-rose-500/30 bg-rose-500/10 text-rose-600 dark:text-rose-400"
         ),
         children: [
-          /* @__PURE__ */ jsx(TrendIcon, { className: "h-3 w-3" }),
+          /* @__PURE__ */ jsx(TrendIcon, { className: "size-3" }),
           formatChange(item.change)
         ]
       }
@@ -58,6 +58,7 @@ function WatchlistRow({ item }) {
 }
 const Watchlist = React.forwardRef(
   ({
+    as: Heading = "h2",
     className,
     eyebrow = "Tracked symbols",
     items,
@@ -83,16 +84,16 @@ const Watchlist = React.forwardRef(
           /* @__PURE__ */ jsxs("header", { className: "mb-3 flex flex-wrap items-start justify-between gap-3", children: [
             /* @__PURE__ */ jsxs("div", { children: [
               /* @__PURE__ */ jsx("p", { className: "text-xs font-medium uppercase tracking-[0.28em] text-muted-foreground", children: eyebrow }),
-              /* @__PURE__ */ jsx("h2", { className: "text-lg font-semibold text-foreground", children: title })
+              /* @__PURE__ */ jsx(Heading, { className: "text-lg font-semibold text-foreground", children: title })
             ] }),
             /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-2 text-xs text-muted-foreground", children: [
               /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 rounded-full border border-emerald-500/30 bg-emerald-500/10 px-2 py-1 text-emerald-600 dark:text-emerald-400", children: [
-                /* @__PURE__ */ jsx(ArrowUpRight, { className: "h-3 w-3" }),
+                /* @__PURE__ */ jsx(ArrowUpRight, { className: "size-3" }),
                 advancing,
                 " up"
               ] }),
               /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1 rounded-full border border-rose-500/30 bg-rose-500/10 px-2 py-1 text-rose-600 dark:text-rose-400", children: [
-                /* @__PURE__ */ jsx(ArrowDownRight, { className: "h-3 w-3" }),
+                /* @__PURE__ */ jsx(ArrowDownRight, { className: "size-3" }),
                 declining,
                 " down"
               ] })

package/dist/components/workspace-switcher/index.js

@@ -0,0 +1,6 @@
+import {
+  WorkspaceSwitcher
+} from "./workspace-switcher";
+export {
+  WorkspaceSwitcher
+};

package/dist/components/workspace-switcher/workspace-switcher.js

@@ -0,0 +1,61 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { forwardRef, useMemo, useState } from "react";
+import { cn } from "../../lib/utils";
+const WorkspaceSwitcher = forwardRef(
+  ({ className, defaultValue, onValueChange, value, workspaces, ...props }, ref) => {
+    const fallbackValue = defaultValue ?? workspaces[0]?.id ?? "";
+    const [internalValue, setInternalValue] = useState(fallbackValue);
+    const currentValue = value ?? internalValue;
+    const currentWorkspace = useMemo(
+      () => workspaces.find((workspace) => workspace.id === currentValue),
+      [currentValue, workspaces]
+    );
+    function handleSelect(nextValue) {
+      if (value === void 0) {
+        setInternalValue(nextValue);
+      }
+      onValueChange?.(nextValue);
+    }
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(
+          "inline-flex min-w-0 items-center gap-1 rounded-full border border-border/70 bg-muted/50 p-1",
+          className
+        ),
+        ref,
+        role: "radiogroup",
+        ...props,
+        children: [
+          workspaces.map((workspace) => {
+            const isActive = workspace.id === currentValue;
+            return /* @__PURE__ */ jsx(
+              "button",
+              {
+                "aria-checked": isActive,
+                className: cn(
+                  "rounded-full px-3 py-1.5 text-sm font-medium transition-colors",
+                  isActive ? "bg-background text-foreground shadow-sm" : "text-muted-foreground hover:text-foreground"
+                ),
+                onClick: () => {
+                  handleSelect(workspace.id);
+                },
+                role: "radio",
+                title: workspace.description,
+                type: "button",
+                children: workspace.label
+              },
+              workspace.id
+            );
+          }),
+          currentWorkspace?.description ? /* @__PURE__ */ jsx("span", { className: "hidden pl-2 pr-1 text-xs text-muted-foreground md:inline", children: currentWorkspace.description }) : null
+        ]
+      }
+    );
+  }
+);
+WorkspaceSwitcher.displayName = "WorkspaceSwitcher";
+export {
+  WorkspaceSwitcher
+};

package/dist/components/world-breadcrumbs/index.js

@@ -0,0 +1,6 @@
+import {
+  WorldBreadcrumbs
+} from "./world-breadcrumbs";
+export {
+  WorldBreadcrumbs
+};

package/dist/components/world-breadcrumbs/world-breadcrumbs.js

@@ -0,0 +1,114 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef
+} from "react";
+import { cn } from "../../lib/utils";
+const KIND_GLYPH = {
+  agent: "\u25C7",
+  artifact: "\u25CC",
+  group: "\u25A4",
+  run: "\u25B6",
+  task: "\u25A2",
+  world: "\u2726"
+};
+const DEFAULT_LABELS = {
+  empty: "No location",
+  region: "World breadcrumbs"
+};
+const Crumb = (props) => {
+  const { crumb, isLast, onSelect } = props;
+  const glyph = crumb.kind ? KIND_GLYPH[crumb.kind] : null;
+  const handleSelectCrumb = () => {
+    onSelect?.(crumb.id);
+  };
+  const text = /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1", children: [
+    glyph ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "text-muted-foreground", children: glyph }) : null,
+    /* @__PURE__ */ jsx("span", { className: "truncate", children: crumb.label })
+  ] });
+  if (isLast || !onSelect) {
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        "aria-current": isLast ? "location" : void 0,
+        className: cn(
+          "inline-flex items-center text-xs",
+          isLast ? "font-semibold text-foreground" : "text-muted-foreground"
+        ),
+        "data-world-breadcrumb": crumb.id,
+        "data-world-breadcrumb-active": isLast,
+        children: text
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "button",
+    {
+      className: "inline-flex items-center rounded-sm text-xs text-muted-foreground transition-colors hover:text-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+      "data-world-breadcrumb": crumb.id,
+      "data-world-breadcrumb-active": "false",
+      onClick: handleSelectCrumb,
+      type: "button",
+      children: text
+    }
+  );
+};
+const WorldBreadcrumbs = forwardRef(
+  (props, ref) => {
+    const { className, crumbs, labels, onSelect, ...rest } = props;
+    const resolvedLabels = { ...DEFAULT_LABELS, ...labels };
+    if (crumbs.length === 0) {
+      return /* @__PURE__ */ jsx(
+        "nav",
+        {
+          "aria-label": resolvedLabels.region,
+          className: cn(
+            "inline-flex items-center text-xs text-muted-foreground",
+            className
+          ),
+          "data-world-breadcrumbs": true,
+          "data-world-breadcrumbs-state": "empty",
+          ref,
+          ...rest,
+          children: resolvedLabels.empty
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx(
+      "nav",
+      {
+        "aria-label": resolvedLabels.region,
+        className: cn(
+          "inline-flex items-center gap-1.5 text-xs text-muted-foreground",
+          className
+        ),
+        "data-world-breadcrumbs": true,
+        ref,
+        ...rest,
+        children: crumbs.map((crumb, index) => /* @__PURE__ */ jsxs("span", { className: "inline-flex items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx(
+            Crumb,
+            {
+              crumb,
+              isLast: index === crumbs.length - 1,
+              onSelect
+            }
+          ),
+          index < crumbs.length - 1 ? /* @__PURE__ */ jsx(
+            "span",
+            {
+              "aria-hidden": "true",
+              className: "text-muted-foreground/60",
+              "data-world-breadcrumb-sep": true,
+              children: "\u203A"
+            }
+          ) : null
+        ] }, crumb.id))
+      }
+    );
+  }
+);
+WorldBreadcrumbs.displayName = "WorldBreadcrumbs";
+export {
+  WorldBreadcrumbs
+};