@vllnt/ui 0.2.0 → 0.2.1-canary.0aaaad2

package/dist/components/tree-view/tree-view.js

@@ -0,0 +1,298 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import {
+  forwardRef,
+  useCallback,
+  useMemo,
+  useState
+} from "react";
+import { cn } from "../../lib/utils";
+const DEFAULT_LABELS = {
+  region: "Tree"
+};
+function flattenVisible(arguments_) {
+  const { depth = 0, expanded, nodes, parentId } = arguments_;
+  return nodes.flatMap((node) => {
+    const hasChildren = (node.nodes?.length ?? 0) > 0;
+    const head = { depth, hasChildren, node, parentId };
+    if (!hasChildren || !expanded.has(node.id)) return [head];
+    return [
+      head,
+      ...flattenVisible({
+        depth: depth + 1,
+        expanded,
+        nodes: node.nodes ?? [],
+        parentId: node.id
+      })
+    ];
+  });
+}
+function useControlled(controlled, defaultValue) {
+  const [internal, setInternal] = useState(defaultValue);
+  const isControlled = controlled !== void 0;
+  const value = isControlled ? controlled : internal;
+  const setValue = useCallback(
+    (next) => {
+      if (!isControlled) setInternal(next);
+    },
+    [isControlled]
+  );
+  return [value, setValue, isControlled];
+}
+function toggleSet(set, id) {
+  const next = new Set(set);
+  if (next.has(id)) next.delete(id);
+  else next.add(id);
+  return [...next];
+}
+function TreeRow({
+  active,
+  expanded,
+  flat,
+  onActivate,
+  onExpand,
+  onSelect,
+  selected
+}) {
+  const { depth, hasChildren, node } = flat;
+  const activate = () => {
+    if (node.disabled) return;
+    onActivate(node.id);
+    if (hasChildren) onExpand(node.id);
+    else onSelect(node.id);
+  };
+  const handleKeyDown = (event) => {
+    if (event.key !== "Enter" && event.key !== " ") return;
+    event.preventDefault();
+    activate();
+  };
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      "aria-disabled": node.disabled || void 0,
+      "aria-expanded": hasChildren ? expanded : void 0,
+      "aria-selected": selected || void 0,
+      className: cn(
+        "flex cursor-pointer items-center gap-1.5 rounded-md px-2 py-1 text-sm focus:outline-none",
+        active ? "bg-accent text-accent-foreground" : "hover:bg-accent/60",
+        selected ? "ring-1 ring-primary" : "",
+        node.disabled ? "cursor-not-allowed opacity-50" : ""
+      ),
+      "data-active": active ? "true" : void 0,
+      "data-depth": depth,
+      "data-node-id": node.id,
+      "data-selected": selected ? "true" : void 0,
+      onClick: activate,
+      onKeyDown: handleKeyDown,
+      role: "treeitem",
+      style: { paddingLeft: `${(depth * 16 + 8).toString()}px` },
+      children: [
+        /* @__PURE__ */ jsx(
+          "span",
+          {
+            "aria-hidden": "true",
+            className: cn(
+              "inline-flex size-4 shrink-0 items-center justify-center text-xs text-muted-foreground transition-transform",
+              hasChildren ? "" : "opacity-0",
+              expanded ? "rotate-90" : ""
+            ),
+            children: "\u25B8"
+          }
+        ),
+        node.icon ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "inline-flex size-4 shrink-0", children: node.icon }) : null,
+        /* @__PURE__ */ jsx("span", { className: "truncate", children: node.label })
+      ]
+    }
+  );
+}
+function nextActiveId(flat, delta, current) {
+  if (flat.length === 0) return void 0;
+  if (!current) return flat[0]?.node.id;
+  const index = flat.findIndex((entry) => entry.node.id === current);
+  if (index < 0) return flat[0]?.node.id;
+  const nextIndex = Math.min(Math.max(index + delta, 0), flat.length - 1);
+  return flat[nextIndex]?.node.id;
+}
+function findFlat(flat, id) {
+  if (!id) return void 0;
+  return flat.find((entry) => entry.node.id === id);
+}
+function useTreeState(arguments_) {
+  const {
+    defaultExpanded = [],
+    defaultSelected = [],
+    expanded,
+    onExpandedChange,
+    onSelect,
+    selected,
+    selectionMode
+  } = arguments_;
+  const [expandedState, setExpandedState] = useControlled(
+    expanded,
+    defaultExpanded
+  );
+  const [selectedState, setSelectedState] = useControlled(
+    selected,
+    defaultSelected
+  );
+  const expandedSet = useMemo(() => new Set(expandedState), [expandedState]);
+  const selectedSet = useMemo(() => new Set(selectedState), [selectedState]);
+  const applyExpand = useCallback(
+    (id) => {
+      const next = toggleSet(expandedSet, id);
+      setExpandedState(next);
+      onExpandedChange?.(next);
+    },
+    [expandedSet, onExpandedChange, setExpandedState]
+  );
+  const applySelect = useCallback(
+    (id) => {
+      const next = selectionMode === "single" ? [id] : toggleSet(selectedSet, id);
+      setSelectedState(next);
+      onSelect?.(next);
+    },
+    [onSelect, selectedSet, selectionMode, setSelectedState]
+  );
+  return { applyExpand, applySelect, expandedSet, selectedSet };
+}
+function useKeyboardHandler(arguments_) {
+  const { activeId, applyExpand, applySelect, expandedSet, flat, setActiveId } = arguments_;
+  return useCallback(
+    (event) => {
+      const current = findFlat(flat, activeId);
+      if (event.key === "ArrowDown") {
+        event.preventDefault();
+        setActiveId(nextActiveId(flat, 1, activeId));
+        return;
+      }
+      if (event.key === "ArrowUp") {
+        event.preventDefault();
+        setActiveId(nextActiveId(flat, -1, activeId));
+        return;
+      }
+      if (event.key === "ArrowRight" && current?.hasChildren) {
+        event.preventDefault();
+        if (!expandedSet.has(current.node.id)) applyExpand(current.node.id);
+        return;
+      }
+      if (event.key === "ArrowLeft" && current) {
+        event.preventDefault();
+        if (current.hasChildren && expandedSet.has(current.node.id)) {
+          applyExpand(current.node.id);
+        } else if (current.parentId) {
+          setActiveId(current.parentId);
+        }
+        return;
+      }
+      if (event.key === "Enter" || event.key === " ") {
+        if (!current || current.node.disabled) return;
+        event.preventDefault();
+        if (current.hasChildren) applyExpand(current.node.id);
+        else applySelect(current.node.id);
+      }
+    },
+    [activeId, applyExpand, applySelect, expandedSet, flat, setActiveId]
+  );
+}
+function TreeRows({
+  activeId,
+  applyExpand,
+  applySelect,
+  expandedSet,
+  flat,
+  selectedSet,
+  setActiveId
+}) {
+  return /* @__PURE__ */ jsx(Fragment, { children: flat.map((entry) => /* @__PURE__ */ jsx(
+    TreeRow,
+    {
+      active: entry.node.id === activeId,
+      expanded: expandedSet.has(entry.node.id),
+      flat: entry,
+      onActivate: setActiveId,
+      onExpand: applyExpand,
+      onSelect: applySelect,
+      selected: selectedSet.has(entry.node.id)
+    },
+    entry.node.id
+  )) });
+}
+const TreeView = forwardRef(
+  (props, ref) => {
+    const {
+      className,
+      defaultExpanded,
+      defaultSelected,
+      expanded,
+      labels,
+      nodes,
+      onExpandedChange,
+      onSelect,
+      selected,
+      selectionMode = "single",
+      ...rest
+    } = props;
+    const resolvedLabels = useMemo(
+      () => ({ ...DEFAULT_LABELS, ...labels }),
+      [labels]
+    );
+    const { applyExpand, applySelect, expandedSet, selectedSet } = useTreeState(
+      {
+        defaultExpanded,
+        defaultSelected,
+        expanded,
+        onExpandedChange,
+        onSelect,
+        selected,
+        selectionMode
+      }
+    );
+    const flat = useMemo(
+      () => flattenVisible({ expanded: expandedSet, nodes }),
+      [expandedSet, nodes]
+    );
+    const [activeId, setActiveId] = useState(
+      () => flat[0]?.node.id
+    );
+    const handleKeyDown = useKeyboardHandler({
+      activeId,
+      applyExpand,
+      applySelect,
+      expandedSet,
+      flat,
+      setActiveId
+    });
+    return /* @__PURE__ */ jsx(
+      "ul",
+      {
+        "aria-label": resolvedLabels.region,
+        "aria-multiselectable": selectionMode === "multiple" || void 0,
+        className: cn(
+          "flex flex-col gap-0.5 rounded-2xl border bg-background p-2 text-foreground focus:outline-none focus-visible:ring-2 focus-visible:ring-ring",
+          className
+        ),
+        onKeyDown: handleKeyDown,
+        ref,
+        role: "tree",
+        tabIndex: 0,
+        ...rest,
+        children: /* @__PURE__ */ jsx(
+          TreeRows,
+          {
+            activeId,
+            applyExpand,
+            applySelect,
+            expandedSet,
+            flat,
+            selectedSet,
+            setActiveId
+          }
+        )
+      }
+    );
+  }
+);
+TreeView.displayName = "TreeView";
+export {
+  TreeView
+};

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

@@ -32,11 +32,11 @@ 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"}`
             }
           )
         }
@@ -44,7 +44,7 @@ function TutorialCompleteImpl({
       /* @__PURE__ */ jsx("h2", { className: "text-3xl font-bold 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
       ] })
     ] }),
@@ -64,15 +64,15 @@ 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
         );
       }) })
     ] }),
@@ -86,7 +86,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

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

@@ -1,3 +1,4 @@
+"use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { forwardRef, useMemo } from "react";
 import { ArrowDownRight, ArrowUpRight } from "lucide-react";
@@ -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,116 @@
+"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 handleClick = () => {
+    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: handleClick,
+        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 ?? "hsl(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)
         ]
       }
@@ -87,12 +87,12 @@ const Watchlist = React.forwardRef(
             ] }),
             /* @__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
+};