@ai-matrx/design-system 0.11.6 → 0.12.0

package/CHANGELOG.md

@@ -1,5 +1,28 @@
 # Changelog
 
+## 0.12.0 — 2026-09-08
+
+### `OrganizationPicker` — the ONE "which organization am I acting in" control
+
+Three surfaces, three UIs for one fact: matrx-frontend had the full picker
+(list with abbreviation tile, Personal badge, default star, active check, the
+"Set as my default" switch, and the sentence naming the working organization);
+Workflow Studio's sidebar and the admin dashboard's settings each had a bare
+`<Select>` with different copy, different placement and no default control.
+`OrganizationPicker` is the matrx-frontend panel ported verbatim
+(`OrganizationPickerPanel` + `UserMenuOrgSection` + `DefaultOrgSwitch`), made
+presentational: the host supplies memberships, the active id, the default id,
+`onSelect` and (optionally) `onSetDefault`; it owns no fetch, storage or
+resolution. Omit `onSetDefault` and the switch is not rendered — a host with no
+write path must not show a control that does nothing. `OrganizationAbbreviation`
+ships alongside (falls back to the name's first letter, so a tile is never
+empty). Icons are package SVGs (C19: `StarIcon`, `Building2Icon` added
+internally); the loading rows are this package's `Skeleton`; the default star
+uses the semantic `warning` token — both caught by the package's own guards on
+the first attempt. Adopted in the same session by matrx-frontend (user menu +
+header nudge), workflow-studio (sidebar popover) and the admin dashboard
+(Settings → Organization).
+
 ## 0.11.6 — 2026-09-08
 
 **THE PATCH TO TAKE.** 0.11.3, 0.11.4 and 0.11.5 are all superseded; the

package/dist/index.cjs

@@ -157,6 +157,8 @@ __export(src_exports, {
   MOTION_PULSE: () => MOTION_PULSE,
   MOTION_SHEET: () => MOTION_SHEET,
   MOTION_SPIN: () => MOTION_SPIN,
+  OrganizationAbbreviation: () => OrganizationAbbreviation,
+  OrganizationPicker: () => OrganizationPicker,
   OverflowToolbar: () => OverflowToolbar,
   POPPER_OFFSET: () => POPPER_OFFSET,
   Popover: () => Popover,
@@ -437,6 +439,9 @@ function DragHandleDots2Icon(props) {
     }
   ) });
 }
+function StarIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { ...lucideProps(props), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M11.525 2.295a.53.53 0 0 1 .95 0l2.31 4.679a2.123 2.123 0 0 0 1.595 1.16l5.166.756a.53.53 0 0 1 .294.904l-3.736 3.638a2.123 2.123 0 0 0-.611 1.878l.882 5.14a.53.53 0 0 1-.771.56l-4.618-2.428a2.122 2.122 0 0 0-1.973 0L6.396 21.01a.53.53 0 0 1-.77-.56l.881-5.139a2.122 2.122 0 0 0-.611-1.879L2.16 9.795a.53.53 0 0 1 .294-.906l5.165-.755a2.122 2.122 0 0 0 1.597-1.16z" }) });
+}
 
 // src/accordion.tsx
 var import_jsx_runtime2 = require("react/jsx-runtime");
@@ -3512,9 +3517,145 @@ var Switch = React27.forwardRef(({ className, size = "md", ...props }, ref) => /
 ));
 Switch.displayName = SwitchPrimitives.Root.displayName;
 
+// src/organization-picker.tsx
+var import_jsx_runtime36 = require("react/jsx-runtime");
+function OrganizationAbbreviation({
+  abbreviation,
+  name,
+  className
+}) {
+  const mark = abbreviation && abbreviation.trim() || name.trim().slice(0, 1) || "?";
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    "span",
+    {
+      className: cn(
+        "inline-flex shrink-0 items-center justify-center font-bold uppercase tracking-wide",
+        className
+      ),
+      "aria-label": `Organization abbreviation ${mark}`,
+      title: mark,
+      children: mark
+    }
+  );
+}
+function OrganizationPicker({
+  organizations,
+  activeOrganizationId,
+  defaultOrganizationId = null,
+  loading = false,
+  loadFailed = false,
+  onSelect,
+  onSetDefault,
+  hideHeading = false,
+  itemClassName,
+  className
+}) {
+  const active = organizations.find((o) => o.id === activeOrganizationId) ?? null;
+  const isDefault = (id) => !!defaultOrganizationId && id === defaultOrganizationId;
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: cn("flex flex-col", className), "data-slot": "organization-picker", children: [
+    !hideHeading && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "px-2 py-1.5 text-[11px] font-semibold uppercase tracking-wide text-muted-foreground", children: "Organization" }),
+    loading ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "space-y-1 px-1 py-1", "aria-busy": "true", "aria-label": "Loading organizations", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Skeleton, { className: "h-7 rounded-md" }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Skeleton, { className: "h-7 rounded-md" })
+    ] }) : loadFailed ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "px-2 py-2 text-xs text-destructive", role: "alert", children: "Could not load organizations." }) : organizations.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "px-2 py-2 text-xs text-muted-foreground", children: "Your account is not a member of any organization. Ask an administrator to add you to one." }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+      active ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("p", { className: "px-2 pb-1 text-[11px] text-muted-foreground", "data-slot": "organization-picker-status", children: [
+        "Working in",
+        " ",
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "font-medium text-foreground", children: active.name })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "px-2 pb-1 text-[11px] text-destructive", "data-slot": "organization-picker-status", children: "No organization selected \u2014 pick one below." }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("ul", { className: "max-h-72 overflow-y-auto", role: "listbox", "aria-label": "Organizations", children: organizations.map((org) => {
+        const isActive = org.id === activeOrganizationId;
+        return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("li", { role: "none", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+          "button",
+          {
+            type: "button",
+            role: "option",
+            "aria-selected": isActive,
+            "aria-pressed": isActive,
+            onClick: (event) => {
+              event.stopPropagation();
+              onSelect(org);
+            },
+            className: cn(
+              "flex w-full items-center gap-2 rounded-md px-2 py-1.5 text-left text-sm text-foreground transition-colors hover:bg-accent",
+              isActive && "bg-primary/10 font-medium text-primary",
+              itemClassName
+            ),
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                OrganizationAbbreviation,
+                {
+                  abbreviation: org.abbreviation,
+                  name: org.name,
+                  className: cn(
+                    "h-5 min-w-8 rounded border border-border bg-muted px-1 text-[9px]",
+                    isActive ? "text-primary" : "text-muted-foreground"
+                  )
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "min-w-0 flex-1 truncate", children: org.name }),
+              org.isPersonal && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "shrink-0 rounded-full bg-muted px-1.5 py-0.5 text-[10px] font-medium text-muted-foreground", children: "Personal" }),
+              isDefault(org.id) && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+                StarIcon,
+                {
+                  className: "h-[13px] w-[13px] shrink-0 fill-warning text-warning",
+                  "aria-hidden": false,
+                  "aria-label": "Default organization",
+                  role: "img"
+                }
+              ),
+              isActive && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(LucideCheckIcon, { className: "h-[15px] w-[15px] shrink-0 text-primary" })
+            ]
+          }
+        ) }, org.id);
+      }) }),
+      onSetDefault && /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_jsx_runtime36.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "my-1 border-t border-border" }),
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          DefaultOrganizationSwitch,
+          {
+            active,
+            checked: !!active && isDefault(active.id),
+            onChange: (on) => onSetDefault(on && active ? active.id : null)
+          }
+        )
+      ] })
+    ] })
+  ] });
+}
+function DefaultOrganizationSwitch({
+  active,
+  checked,
+  onChange
+}) {
+  const disabled = !active;
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+    "div",
+    {
+      className: "flex items-center justify-between gap-3 rounded-md px-2 py-1.5",
+      "data-slot": "organization-picker-default",
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "min-w-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "text-xs font-medium text-foreground", children: "Set as my default" }),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("p", { className: "truncate text-[11px] text-muted-foreground", children: disabled ? "Select an organization first" : checked ? `Next startup opens ${active.name}` : "Auto-select this at startup" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+          Switch,
+          {
+            checked,
+            disabled,
+            onCheckedChange: onChange,
+            "aria-label": "Set this organization as my default"
+          }
+        )
+      ]
+    }
+  );
+}
+
 // src/tabbed-bottom-sheet.tsx
 var import_react4 = require("react");
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 function TabbedBottomSheet({
   open,
   onOpenChange,
@@ -3528,15 +3669,15 @@ function TabbedBottomSheet({
     if (open) setSelectedTabId(null);
   }
   const selectedTab = selectedTabId ? tabs.find((tab) => tab.id === selectedTabId) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     BottomSheet,
     {
       open,
       onOpenChange,
       title,
       size: "full",
-      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "matrx-mobile-sheet flex min-h-0 flex-1 flex-col", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "matrx-mobile-sheet flex min-h-0 flex-1 flex-col", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
           BottomSheetHeader,
           {
             title: selectedTab ? selectedTab.label : title,
@@ -3544,19 +3685,19 @@ function TabbedBottomSheet({
             onBack: () => setSelectedTabId(null)
           }
         ),
-        selectedTab ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden pb-safe", children: selectedTab.content }) : /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(BottomSheetBody, { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("ul", { className: "divide-y divide-border", children: tabs.map((tab) => {
+        selectedTab ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "flex min-h-0 flex-1 flex-col overflow-hidden pb-safe", children: selectedTab.content }) : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(BottomSheetBody, { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("ul", { className: "divide-y divide-border", children: tabs.map((tab) => {
           const Icon2 = tab.icon;
-          return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+          return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("li", { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
             "button",
             {
               type: "button",
               onClick: () => setSelectedTabId(tab.id),
               className: "flex w-full items-center gap-3 px-4 py-3.5 text-left transition-colors hover:bg-muted/60 active:bg-muted",
               children: [
-                Icon2 ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Icon2, { className: "h-5 w-5 shrink-0 text-muted-foreground" }) : null,
-                /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "min-w-0 flex-1 text-base text-foreground", children: tab.label }),
+                Icon2 ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Icon2, { className: "h-5 w-5 shrink-0 text-muted-foreground" }) : null,
+                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "min-w-0 flex-1 text-base text-foreground", children: tab.label }),
                 tab.trailing,
-                /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(ChevronRightIcon, { className: "h-5 w-5 shrink-0 text-muted-foreground" })
+                /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(ChevronRightIcon, { className: "h-5 w-5 shrink-0 text-muted-foreground" })
               ]
             }
           ) }, tab.id);
@@ -3568,7 +3709,7 @@ function TabbedBottomSheet({
 
 // src/table.tsx
 var React28 = __toESM(require("react"), 1);
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var TABLE_SIZES = {
   sm: { head: "px-2", cell: "p-2" },
   md: { head: "px-3", cell: "p-3" }
@@ -3579,7 +3720,7 @@ function useTableSize() {
 }
 var Table = React28.forwardRef(
   ({ className, size = "md", wrap = true, wrapperClassName, ...props }, ref) => {
-    const table = /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    const table = /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       "table",
       {
         ref,
@@ -3589,7 +3730,7 @@ var Table = React28.forwardRef(
         ...props
       }
     );
-    return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TableSizeContext.Provider, { value: size, children: wrap ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(TableSizeContext.Provider, { value: size, children: wrap ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       "div",
       {
         "data-slot": "table-wrapper",
@@ -3600,7 +3741,7 @@ var Table = React28.forwardRef(
   }
 );
 Table.displayName = "Table";
-var TableHeader = React28.forwardRef(({ className, sticky = false, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+var TableHeader = React28.forwardRef(({ className, sticky = false, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
   "thead",
   {
     ref,
@@ -3614,7 +3755,7 @@ var TableHeader = React28.forwardRef(({ className, sticky = false, ...props }, r
   }
 ));
 TableHeader.displayName = "TableHeader";
-var TableBody = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+var TableBody = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
   "tbody",
   {
     ref,
@@ -3624,7 +3765,7 @@ var TableBody = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 TableBody.displayName = "TableBody";
-var TableFooter = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+var TableFooter = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
   "tfoot",
   {
     ref,
@@ -3637,7 +3778,7 @@ var TableFooter = React28.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 TableFooter.displayName = "TableFooter";
-var TableRow = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+var TableRow = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
   "tr",
   {
     ref,
@@ -3652,7 +3793,7 @@ var TableRow = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__
 TableRow.displayName = "TableRow";
 var TableHead = React28.forwardRef(({ className, ...props }, ref) => {
   const size = useTableSize();
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     "th",
     {
       ref,
@@ -3669,7 +3810,7 @@ var TableHead = React28.forwardRef(({ className, ...props }, ref) => {
 TableHead.displayName = "TableHead";
 var TableCell = React28.forwardRef(({ className, ...props }, ref) => {
   const size = useTableSize();
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
     "td",
     {
       ref,
@@ -3684,7 +3825,7 @@ var TableCell = React28.forwardRef(({ className, ...props }, ref) => {
   );
 });
 TableCell.displayName = "TableCell";
-var TableCaption = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+var TableCaption = React28.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
   "caption",
   {
     ref,
@@ -3698,10 +3839,10 @@ TableCaption.displayName = "TableCaption";
 // src/tabs.tsx
 var TabsPrimitive = __toESM(require("@radix-ui/react-tabs"), 1);
 var React29 = __toESM(require("react"), 1);
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var Tabs = TabsPrimitive.Root;
 var TABS_TRIGGER_BASE = "inline-flex items-center justify-center whitespace-nowrap rounded-md px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm";
-var TabsList = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+var TabsList = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
   TabsPrimitive.List,
   {
     ref,
@@ -3714,7 +3855,7 @@ var TabsList = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 TabsList.displayName = TabsPrimitive.List.displayName;
-var TabsTrigger = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+var TabsTrigger = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
   TabsPrimitive.Trigger,
   {
     ref,
@@ -3728,7 +3869,7 @@ var TabsTrigger = React29.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-var TabsTriggerCore = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+var TabsTriggerCore = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
   TabsPrimitive.Trigger,
   {
     ref,
@@ -3738,7 +3879,7 @@ var TabsTriggerCore = React29.forwardRef(({ className, ...props }, ref) => /* @_
   }
 ));
 TabsTriggerCore.displayName = TabsPrimitive.Trigger.displayName;
-var TabsContent = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+var TabsContent = React29.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
   TabsPrimitive.Content,
   {
     ref,
@@ -3755,7 +3896,7 @@ TabsContent.displayName = TabsPrimitive.Content.displayName;
 
 // src/textarea.tsx
 var React30 = __toESM(require("react"), 1);
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var FILL_HEIGHT_REGEX = /(?:^|\s)(h-full|h-dvh|flex-1|grow)(?:\s|$)/;
 var FILL_WIDTH_REGEX = /(?:^|\s)(w-full|w-screen)(?:\s|$)/;
 function getStretchClasses(className) {
@@ -3808,7 +3949,7 @@ var Textarea = React30.forwardRef(
     const stretchClasses = getStretchClasses(className);
     const needsWrapper = Boolean(wrapperClassName || stretchClasses);
     useAutoGrow(ref, props.value, autoGrow, minHeight, maxHeight);
-    const textarea = /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    const textarea = /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
       "textarea",
       {
         ref: callback,
@@ -3824,7 +3965,7 @@ var Textarea = React30.forwardRef(
       }
     );
     if (!needsWrapper) return textarea;
-    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: cn(stretchClasses, wrapperClassName), children: textarea });
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: cn(stretchClasses, wrapperClassName), children: textarea });
   }
 );
 Textarea.displayName = "Textarea";
@@ -3832,7 +3973,7 @@ var BasicTextarea = React30.forwardRef(
   ({ className, autoGrow, minHeight, maxHeight, ...props }, forwarded) => {
     const { ref, callback } = useMergedTextareaRef(forwarded);
     useAutoGrow(ref, props.value, autoGrow, minHeight, maxHeight);
-    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
       "textarea",
       {
         ref: callback,
@@ -3862,13 +4003,13 @@ var TextareaWithPrefix = React30.forwardRef(
   }, forwarded) => {
     const { ref, callback } = useMergedTextareaRef(forwarded);
     useAutoGrow(ref, props.value, autoGrow, minHeight, maxHeight);
-    return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
       "div",
       {
         className: cn("relative", getStretchClasses(className), wrapperClassName),
         children: [
-          prefix ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "pointer-events-none absolute left-3 top-3 z-10 text-muted-foreground", children: prefix }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+          prefix ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "pointer-events-none absolute left-3 top-3 z-10 text-muted-foreground", children: prefix }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
             "textarea",
             {
               ref: callback,
@@ -3948,13 +4089,13 @@ function useScrollFade() {
 // src/hover-card.tsx
 var HoverCardPrimitive = __toESM(require("@radix-ui/react-hover-card"), 1);
 var React31 = __toESM(require("react"), 1);
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 var HoverCard = HoverCardPrimitive.Root;
 var HoverCardTrigger = HoverCardPrimitive.Trigger;
 var HoverCardContent = React31.forwardRef(
   ({ className, align = "center", sideOffset = 4, container, animated = true, ...props }, ref) => {
     const resolved = usePortalContainer(container);
-    return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(HoverCardPrimitive.Portal, { container: resolved ?? null, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(HoverCardPrimitive.Portal, { container: resolved ?? null, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
       HoverCardPrimitive.Content,
       {
         ref,
@@ -3976,7 +4117,7 @@ HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
 // src/radio-group.tsx
 var RadioGroupPrimitive = __toESM(require("@radix-ui/react-radio-group"), 1);
 var React32 = __toESM(require("react"), 1);
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 var RadioGroupSizeContext = React32.createContext("md");
 var CONTROL_CLASSES = {
   sm: "h-3.5 w-3.5",
@@ -3988,7 +4129,7 @@ var DOT_CLASSES = {
   md: "h-1.5 w-1.5",
   lg: "h-2 w-2"
 };
-var RadioGroup3 = React32.forwardRef(({ className, size = "md", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(RadioGroupSizeContext.Provider, { value: size, children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+var RadioGroup3 = React32.forwardRef(({ className, size = "md", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(RadioGroupSizeContext.Provider, { value: size, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
   RadioGroupPrimitive.Root,
   {
     ref,
@@ -4001,7 +4142,7 @@ RadioGroup3.displayName = RadioGroupPrimitive.Root.displayName;
 var RadioGroupItem = React32.forwardRef(({ className, size, ...props }, ref) => {
   const groupSize = React32.useContext(RadioGroupSizeContext);
   const resolved = size ?? groupSize;
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
     RadioGroupPrimitive.Item,
     {
       ref,
@@ -4018,7 +4159,7 @@ var RadioGroupItem = React32.forwardRef(({ className, size, ...props }, ref) =>
         className
       ),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(RadioGroupPrimitive.Indicator, { className: "flex items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
         "div",
         {
           className: cn("rounded-full bg-primary-foreground", DOT_CLASSES[resolved])
@@ -4031,7 +4172,7 @@ RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
 
 // src/resizable.tsx
 var import_react_resizable_panels = require("react-resizable-panels");
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 var HANDLE_SIZES = {
   xs: "w-0.5 [&[aria-orientation=horizontal]]:h-0.5 [&[aria-orientation=horizontal]]:w-full",
   sm: "w-1 [&[aria-orientation=horizontal]]:h-1 [&[aria-orientation=horizontal]]:w-full",
@@ -4045,7 +4186,7 @@ var HANDLE_SIZES = {
 var ResizablePanelGroup = ({
   className,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
   import_react_resizable_panels.Group,
   {
     "data-slot": "resizable-group",
@@ -4060,7 +4201,7 @@ var ResizableHandle = ({
   size = "xs",
   className,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
   import_react_resizable_panels.Separator,
   {
     "data-slot": "resizable-handle",
@@ -4080,7 +4221,7 @@ var ResizableHandle = ({
       className
     ),
     ...props,
-    children: withHandle ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "z-10 flex h-8 w-4 items-center justify-center rounded-sm border bg-border group-aria-[orientation=horizontal]/handle:h-4 group-aria-[orientation=horizontal]/handle:w-8", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(DragHandleDots2Icon, { className: "h-2.5 w-2.5 group-aria-[orientation=horizontal]/handle:rotate-90" }) }) : null
+    children: withHandle ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "z-10 flex h-8 w-4 items-center justify-center rounded-sm border bg-border group-aria-[orientation=horizontal]/handle:h-4 group-aria-[orientation=horizontal]/handle:w-8", children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(DragHandleDots2Icon, { className: "h-2.5 w-2.5 group-aria-[orientation=horizontal]/handle:rotate-90" }) }) : null
   }
 );
 ResizableHandle.displayName = "ResizableHandle";
@@ -4088,7 +4229,7 @@ ResizableHandle.displayName = "ResizableHandle";
 // src/slider.tsx
 var SliderPrimitive = __toESM(require("@radix-ui/react-slider"), 1);
 var React33 = __toESM(require("react"), 1);
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 var TRACK_CLASSES = {
   sm: "h-1",
   md: "h-1.5",
@@ -4104,7 +4245,7 @@ var Slider = React33.forwardRef(({ className, size = "md", ...props }, ref) => {
     1,
     (props.value ?? props.defaultValue ?? [0]).length
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
     SliderPrimitive.Root,
     {
       ref,
@@ -4116,7 +4257,7 @@ var Slider = React33.forwardRef(({ className, size = "md", ...props }, ref) => {
       ),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
           SliderPrimitive.Track,
           {
             "data-slot": "slider-track",
@@ -4125,7 +4266,7 @@ var Slider = React33.forwardRef(({ className, size = "md", ...props }, ref) => {
               TRACK_CLASSES[size],
               "data-[orientation=vertical]:h-full data-[orientation=vertical]:w-1.5"
             ),
-            children: /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
               SliderPrimitive.Range,
               {
                 "data-slot": "slider-range",
@@ -4134,7 +4275,7 @@ var Slider = React33.forwardRef(({ className, size = "md", ...props }, ref) => {
             )
           }
         ),
-        Array.from({ length: thumbCount }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+        Array.from({ length: thumbCount }, (_, index) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
           SliderPrimitive.Thumb,
           {
             "data-slot": "slider-thumb",
@@ -4162,7 +4303,7 @@ var ToggleGroupPrimitive = __toESM(require("@radix-ui/react-toggle-group"), 1);
 var TogglePrimitive = __toESM(require("@radix-ui/react-toggle"), 1);
 var import_class_variance_authority6 = require("class-variance-authority");
 var React34 = __toESM(require("react"), 1);
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var toggleVariants = (0, import_class_variance_authority6.cva)(
   "inline-flex cursor-pointer items-center justify-center gap-2 rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
@@ -4183,7 +4324,7 @@ var toggleVariants = (0, import_class_variance_authority6.cva)(
     }
   }
 );
-var Toggle = React34.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+var Toggle = React34.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
   TogglePrimitive.Root,
   {
     ref,
@@ -4194,20 +4335,20 @@ var Toggle = React34.forwardRef(({ className, variant, size, ...props }, ref) =>
 ));
 Toggle.displayName = TogglePrimitive.Root.displayName;
 var ToggleGroupContext = React34.createContext({ size: "default", variant: "default" });
-var ToggleGroup = React34.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+var ToggleGroup = React34.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
   ToggleGroupPrimitive.Root,
   {
     ref,
     "data-slot": "toggle-group",
     className: cn("flex items-center justify-center gap-1", className),
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ToggleGroupContext.Provider, { value: { variant, size }, children })
+    children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(ToggleGroupContext.Provider, { value: { variant, size }, children })
   }
 ));
 ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
 var ToggleGroupItem = React34.forwardRef(({ className, children, variant, size, ...props }, ref) => {
   const context = React34.useContext(ToggleGroupContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
     ToggleGroupPrimitive.Item,
     {
       ref,
@@ -4229,13 +4370,13 @@ ToggleGroupItem.displayName = ToggleGroupPrimitive.Item.displayName;
 // src/tooltip.tsx
 var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"), 1);
 var React35 = __toESM(require("react"), 1);
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 var TooltipProvider = TooltipPrimitive.Provider;
 var Tooltip = TooltipPrimitive.Root;
 var TooltipTrigger = TooltipPrimitive.Trigger;
 var TooltipContent = React35.forwardRef(({ className, sideOffset = 4, container, animated = true, ...props }, ref) => {
   const resolved = usePortalContainer(container);
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(TooltipPrimitive.Portal, { container: resolved ?? null, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(TooltipPrimitive.Portal, { container: resolved ?? null, children: /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
     TooltipPrimitive.Content,
     {
       ref,