@ai-matrx/design-system 0.49.2 → 0.49.4

package/dist/index.cjs

@@ -161,7 +161,7 @@ __export(src_exports, {
   Input: () => Input,
   InputWithPrefix: () => InputWithPrefix,
   LAYER_FRONT_EVENT: () => LAYER_FRONT_EVENT,
-  Label: () => Label3,
+  Label: () => Label4,
   MOBILE_BREAKPOINT: () => MOBILE_BREAKPOINT,
   MODAL_LAYER_Z: () => MODAL_LAYER_Z,
   MOTION_BOTTOM_SHEET: () => MOTION_BOTTOM_SHEET,
@@ -192,6 +192,7 @@ __export(src_exports, {
   ScrollBar: () => ScrollBar,
   SegmentedControl: () => SegmentedControl,
   Select: () => Select,
+  SelectChevron: () => SelectChevron,
   SelectContent: () => SelectContent,
   SelectGroup: () => SelectGroup,
   SelectItem: () => SelectItem,
@@ -335,12 +336,6 @@ function MoreHorizontalIcon(props) {
 function LucideCheckIcon(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsx)("svg", { ...lucideProps(props), children: /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M20 6 9 17l-5-5" }) });
 }
-function ChevronsUpDownIcon(props) {
-  return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...lucideProps(props), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m7 15 5 5 5-5" }),
-    /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "m7 9 5-5 5 5" })
-  ] });
-}
 function ExternalLinkIcon(props) {
   return /* @__PURE__ */ (0, import_jsx_runtime.jsxs)("svg", { ...lucideProps(props), children: [
     /* @__PURE__ */ (0, import_jsx_runtime.jsx)("path", { d: "M15 3h6v6" }),
@@ -2042,17 +2037,177 @@ var ContextMenuShortcut = ({
 );
 ContextMenuShortcut.displayName = "ContextMenuShortcut";
 
+// src/select.tsx
+var SelectPrimitive = __toESM(require("@radix-ui/react-select"), 1);
+var import_class_variance_authority4 = require("class-variance-authority");
+var React18 = __toESM(require("react"), 1);
+
+// src/field-surface.ts
+var FIELD_SURFACE_CLASS = "border border-border bg-card";
+
+// src/select.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var Select = SelectPrimitive.Root;
+var SelectGroup = SelectPrimitive.Group;
+var SelectValue = SelectPrimitive.Value;
+var selectTriggerVariants = (0, import_class_variance_authority4.cva)(
+  `flex w-full items-center justify-between gap-2 whitespace-nowrap rounded-md ${FIELD_SURFACE_CLASS} text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground transition-colors hover:bg-accent hover:border-accent-foreground/20 focus:outline-none focus:ring-1 focus:ring-primary/30 focus:border-primary/40 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:min-w-0 [&>span]:line-clamp-1`,
+  {
+    variants: {
+      size: {
+        sm: "h-7 px-2 py-1 text-xs",
+        default: "h-9 px-3 py-1",
+        lg: "h-10 px-3 py-2"
+      }
+    },
+    defaultVariants: {
+      size: "default"
+    }
+  }
+);
+function SelectChevron({ className, size = "default" }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    RadixChevronDownIcon,
+    {
+      "aria-hidden": "true",
+      "data-select-chevron": "",
+      className: cn(size === "sm" ? "h-3.5 w-3.5" : "h-4 w-4", "shrink-0 opacity-50", className)
+    }
+  );
+}
+var SelectTrigger = React18.forwardRef(({ className, children, hideArrow = false, size, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  SelectPrimitive.Trigger,
+  {
+    ref,
+    className: cn(selectTriggerVariants({ size, className })),
+    ...props,
+    children: [
+      children,
+      !hideArrow && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SelectChevron, { size: size === "sm" ? "sm" : "default" }) })
+    ]
+  }
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+var SelectScrollUpButton = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  SelectPrimitive.ScrollUpButton,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(RadixChevronUpIcon, {})
+  }
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+var SelectScrollDownButton = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  SelectPrimitive.ScrollDownButton,
+  {
+    ref,
+    className: cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(RadixChevronDownIcon, {})
+  }
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+var SelectContent = React18.forwardRef(
+  ({
+    className,
+    children,
+    position = "popper",
+    container,
+    animated = true,
+    ...props
+  }, ref) => {
+    const portalContainer = usePortalContainer(container);
+    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SelectPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+      SelectPrimitive.Content,
+      {
+        ref,
+        className: cn(
+          "relative z-[10001] max-h-96 min-w-[8rem] max-w-[calc(100vw-2rem)] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md",
+          animated && MOTION_POPPER,
+          // The resting gap from the trigger. It is the `translate` property
+          // (POPPER_OFFSET), never Tailwind translate utilities: those compose
+          // with `transform` on a v4 host and are REPLACED by it on a v3 one,
+          // so on v3 the animation ate the gap and the surface snapped 4px at
+          // the end. Same law as the centred dialog card — see motion.ts.
+          position === "popper" && POPPER_OFFSET,
+          className
+        ),
+        position,
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SelectScrollUpButton, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+            SelectPrimitive.Viewport,
+            {
+              className: cn(
+                "max-w-full overflow-y-auto p-0.5",
+                position === "popper" && "w-full min-w-[var(--radix-select-trigger-width)] max-h-[var(--radix-select-content-available-height)]"
+              ),
+              children
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SelectScrollDownButton, {})
+        ]
+      }
+    ) });
+  }
+);
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+var SelectLabel = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  SelectPrimitive.Label,
+  {
+    ref,
+    className: cn("px-2 py-1.5 text-sm font-semibold", className),
+    ...props
+  }
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+var SelectItem = React18.forwardRef(({ className, children, description, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  SelectPrimitive.Item,
+  {
+    ref,
+    className: cn(
+      "relative flex w-full min-w-0 cursor-default select-none rounded-sm py-1 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      description ? "flex-col items-start gap-0.5 py-1.5" : "items-center",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CheckIcon, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "min-w-0 whitespace-normal break-words [overflow-wrap:anywhere]", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(SelectPrimitive.ItemText, { children }) }),
+      description ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "block min-w-0 break-words text-xs leading-snug text-muted-foreground [overflow-wrap:anywhere]", children: description }) : null
+    ]
+  }
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+var SelectSeparator = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  SelectPrimitive.Separator,
+  {
+    ref,
+    className: cn("-mx-1 my-1 h-px bg-muted", className),
+    ...props
+  }
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
 // src/creatable-picker.tsx
 var import_react = require("react");
 
 // src/popover.tsx
 var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"), 1);
-var React18 = __toESM(require("react"), 1);
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var React19 = __toESM(require("react"), 1);
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var Popover = PopoverPrimitive.Root;
 var PopoverTrigger = PopoverPrimitive.Trigger;
 var PopoverAnchor = PopoverPrimitive.Anchor;
-var PopoverContent = React18.forwardRef(
+var PopoverContent = React19.forwardRef(
   ({
     className,
     align = "center",
@@ -2064,7 +2219,7 @@ var PopoverContent = React18.forwardRef(
     ...props
   }, ref) => {
     const portalContainer = usePortalContainer(container);
-    return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(PopoverPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PopoverPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
       PopoverPrimitive.Content,
       {
         ref,
@@ -2091,7 +2246,7 @@ var PopoverContent = React18.forwardRef(
 PopoverContent.displayName = PopoverPrimitive.Content.displayName;
 
 // src/creatable-picker.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function article(noun) {
   return /^[aeiou]/i.test(noun.trim()) ? `an ${noun}` : `a ${noun}`;
 }
@@ -2166,8 +2321,8 @@ function CreatablePicker({
       setBusy(false);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Popover, { open, onOpenChange: (next) => next ? setOpen(true) : close(), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PopoverTrigger, { asChild: true, disabled, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Popover, { open, onOpenChange: (next) => next ? setOpen(true) : close(), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PopoverTrigger, { asChild: true, disabled, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
       "button",
       {
         type: "button",
@@ -2181,12 +2336,12 @@ function CreatablePicker({
           triggerClassName
         ),
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "min-w-0 flex-1 truncate", children: selected ? renderSelected ?? selected.render ?? selected.label : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-muted-foreground", children: loading ? "Loading\u2026" : placeholder }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ChevronsUpDownIcon, { className: "size-3.5 shrink-0 opacity-50" })
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "min-w-0 flex-1 truncate", children: selected ? renderSelected ?? selected.render ?? selected.label : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-muted-foreground", children: loading ? "Loading\u2026" : placeholder }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(SelectChevron, { size: "sm" })
         ]
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PopoverContent, { sizing: "content", align: "start", className: "p-0", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PopoverContent, { sizing: "content", align: "start", className: "p-0", children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
       Command,
       {
         filter: (itemValue, search, keywords) => {
@@ -2194,7 +2349,7 @@ function CreatablePicker({
           return haystack.includes(search.toLowerCase()) ? 1 : 0;
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
             CommandInput,
             {
               ref: inputRef,
@@ -2206,13 +2361,13 @@ function CreatablePicker({
               placeholder: searchPlaceholder ?? `Search or add ${article(noun)}\u2026`
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(CommandList, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(CommandEmpty, { children: emptyLabel }),
-            groups.map((group) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(CommandList, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(CommandEmpty, { children: emptyLabel }),
+            groups.map((group) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
               CommandGroup,
               {
                 ...group.heading === void 0 ? {} : { heading: group.heading },
-                children: group.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+                children: group.options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
                   CommandItem,
                   {
                     value: option.label,
@@ -2223,7 +2378,7 @@ function CreatablePicker({
                     },
                     className: "gap-2 text-xs",
                     children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
                         LucideCheckIcon,
                         {
                           className: cn(
@@ -2232,8 +2387,8 @@ function CreatablePicker({
                           )
                         }
                       ),
-                      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "min-w-0 flex-1 truncate", children: option.render ?? option.label }),
-                      option.hint ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "shrink-0 text-[10px] text-muted-foreground", children: option.hint }) : null
+                      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "min-w-0 flex-1 truncate", children: option.render ?? option.label }),
+                      option.hint ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "shrink-0 text-[10px] text-muted-foreground", children: option.hint }) : null
                     ]
                   },
                   option.value
@@ -2242,9 +2397,9 @@ function CreatablePicker({
               group.heading ?? "__ungrouped__"
             ))
           ] }),
-          canCreate ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "space-y-1 border-t border-border p-1", children: [
-            createExtra && typed && !exactMatch ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "px-1 pt-0.5", children: typeof createExtra === "function" ? createExtra(typed) : createExtra }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+          canCreate ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "space-y-1 border-t border-border p-1", children: [
+            createExtra && typed && !exactMatch ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "px-1 pt-0.5", children: typeof createExtra === "function" ? createExtra(typed) : createExtra }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
               "button",
               {
                 type: "button",
@@ -2252,22 +2407,22 @@ function CreatablePicker({
                 onClick: () => void create(typed),
                 className: "flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-foreground disabled:opacity-50",
                 children: [
-                  busy ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Loader2Icon, { className: "size-3.5 shrink-0 matrx-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PlusIcon, { className: "size-3.5 shrink-0" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "min-w-0 truncate", children: typed && !exactMatch ? `Create \u201C${typed}\u201D` : `Add ${article(noun)}\u2026` })
+                  busy ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Loader2Icon, { className: "size-3.5 shrink-0 matrx-spin" }) : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PlusIcon, { className: "size-3.5 shrink-0" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "min-w-0 truncate", children: typed && !exactMatch ? `Create \u201C${typed}\u201D` : `Add ${article(noun)}\u2026` })
                 ]
               }
             ),
-            needsName ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("p", { className: "px-2 pb-0.5 text-[11px] leading-snug text-muted-foreground", children: [
+            needsName ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("p", { className: "px-2 pb-0.5 text-[11px] leading-snug text-muted-foreground", children: [
               "Type the name of the ",
               noun,
               " you want to add \u2014 then this creates it."
             ] }) : null
           ] }) : null,
-          footerActions?.length || manageAction ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "space-y-0.5 border-t border-border p-1", children: [
+          footerActions?.length || manageAction ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "space-y-0.5 border-t border-border p-1", children: [
             footerActions?.map((action) => {
               const Icon2 = action.icon;
-              return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { children: [
-                /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+              return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
                   "button",
                   {
                     type: "button",
@@ -2277,15 +2432,15 @@ function CreatablePicker({
                     },
                     className: "flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
                     children: [
-                      Icon2 ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Icon2, { className: "size-3.5 shrink-0" }) : null,
-                      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "min-w-0 truncate", children: action.label })
+                      Icon2 ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon2, { className: "size-3.5 shrink-0" }) : null,
+                      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "min-w-0 truncate", children: action.label })
                     ]
                   }
                 ),
-                action.note ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "px-2 pb-1 text-[10px] leading-snug text-muted-foreground", children: action.note }) : null
+                action.note ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "px-2 pb-1 text-[10px] leading-snug text-muted-foreground", children: action.note }) : null
               ] }, action.label);
             }),
-            manageAction ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+            manageAction ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
               "a",
               {
                 href: manageAction.href,
@@ -2294,18 +2449,18 @@ function CreatablePicker({
                 onClick: close,
                 className: "flex w-full items-center gap-2 rounded-sm px-2 py-1.5 text-left text-xs text-muted-foreground transition-colors hover:bg-accent hover:text-foreground",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(ExternalLinkIcon, { className: "size-3.5 shrink-0" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "min-w-0 truncate", children: manageAction.label })
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(ExternalLinkIcon, { className: "size-3.5 shrink-0" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "min-w-0 truncate", children: manageAction.label })
                 ]
               }
             ) : null
           ] }) : null,
-          lockedNote ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: "space-y-1 border-t border-border p-2", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("p", { className: "flex gap-1.5 text-[11px] leading-snug text-muted-foreground", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(LockIcon, { className: "mt-px size-3 shrink-0" }),
-              /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { children: lockedNote })
+          lockedNote ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "space-y-1 border-t border-border p-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("p", { className: "flex gap-1.5 text-[11px] leading-snug text-muted-foreground", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(LockIcon, { className: "mt-px size-3 shrink-0" }),
+              /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { children: lockedNote })
             ] }),
-            lockedAction ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+            lockedAction ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
               "button",
               {
                 type: "button",
@@ -2315,8 +2470,8 @@ function CreatablePicker({
                 },
                 className: "flex w-full items-center gap-2 rounded-sm px-1 py-1 text-left text-xs font-medium text-primary transition-colors hover:bg-accent",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(PlusIcon, { className: "size-3.5 shrink-0" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "min-w-0 truncate", children: lockedAction.label })
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(PlusIcon, { className: "size-3.5 shrink-0" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "min-w-0 truncate", children: lockedAction.label })
                 ]
               }
             ) : null
@@ -2331,7 +2486,7 @@ function CreatablePicker({
 var DialogPrimitive2 = __toESM(require("@radix-ui/react-dialog"), 1);
 var VisuallyHidden2 = __toESM(require("@radix-ui/react-visually-hidden"), 1);
 var import_react_tree3 = require("@ai-matrx/kit/react-tree");
-var React19 = __toESM(require("react"), 1);
+var React20 = __toESM(require("react"), 1);
 
 // src/layer-front.ts
 var LAYER_FRONT_EVENT = "matrx:layer-front";
@@ -2343,15 +2498,15 @@ function announceLayerFront(element) {
 }
 
 // src/dialog.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
-var DialogWindowedByDefaultContext = React19.createContext(false);
+var import_jsx_runtime24 = require("react/jsx-runtime");
+var DialogWindowedByDefaultContext = React20.createContext(false);
 var Dialog = ({
   children,
   ...props
 }) => {
   const isMobile = useIsMobile();
   const modal = props.modal ?? isMobile;
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DialogWindowedByDefaultContext.Provider, { value: props.modal === void 0, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(RadixDialogModalProvider, { modal, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DialogPrimitive2.Root, { ...props, modal, children }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DialogWindowedByDefaultContext.Provider, { value: props.modal === void 0, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(RadixDialogModalProvider, { modal, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DialogPrimitive2.Root, { ...props, modal, children }) }) });
 };
 Dialog.displayName = "Dialog";
 var DialogTrigger = DialogPrimitive2.Trigger;
@@ -2361,14 +2516,14 @@ var DialogPortal = ({
   ...props
 }) => {
   const resolved = usePortalContainer(container);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DialogPrimitive2.Portal, { container: resolved ?? null, ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DialogPrimitive2.Portal, { container: resolved ?? null, ...props });
 };
 DialogPortal.displayName = "DialogPortal";
 var CONTEXT_SLOT3 = /* @__PURE__ */ Symbol.for("ai-matrx.design-system.dialog-container-context");
 var contextRegistry3 = globalThis;
-var DialogContainerContext = contextRegistry3[CONTEXT_SLOT3] ??= React19.createContext(null);
-var useDialogContainer = () => React19.useContext(DialogContainerContext);
-var DialogOverlay = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+var DialogContainerContext = contextRegistry3[CONTEXT_SLOT3] ??= React20.createContext(null);
+var useDialogContainer = () => React20.useContext(DialogContainerContext);
+var DialogOverlay = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
   DialogPrimitive2.Overlay,
   {
     ref,
@@ -2384,10 +2539,10 @@ var DialogOverlay = React19.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 DialogOverlay.displayName = DialogPrimitive2.Overlay.displayName;
-var DialogContentPrimitive = React19.forwardRef(({ onInteractOutside, ...props }, ref) => {
+var DialogContentPrimitive = React20.forwardRef(({ onInteractOutside, ...props }, ref) => {
   const isModal = useRadixDialogModal();
   useModalLayer(isModal);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     DialogPrimitive2.Content,
     {
       ...props,
@@ -2401,12 +2556,12 @@ DialogContentPrimitive.displayName = "DialogContentPrimitive";
 var DIALOG_DESKTOP_CLASSES2 = "matrx-dialog-card fixed inset-0 z-[10000] m-auto grid h-fit min-w-0 w-full max-w-lg gap-4 max-h-[85dvh] overflow-y-auto overscroll-contain [--dialog-pad:1.5rem] overflow-x-clip border bg-background p-6 shadow-lg [overflow-wrap:anywhere] [&>*]:min-w-0 [&>*]:max-w-full sm:rounded-lg";
 var DIALOG_MOBILE_SHEET_CLASSES2 = "matrx-mobile-sheet matrx-dialog-card fixed inset-x-0 bottom-0 left-0 right-0 top-auto z-[10000] flex min-w-0 flex-col w-full max-w-full max-h-[90dvh] gap-4 [--dialog-pad:1rem] overflow-x-clip border-t bg-background p-4 pb-safe shadow-lg [overflow-wrap:anywhere] [&>*]:min-w-0 [&>*]:max-w-full rounded-t-2xl rounded-b-none overflow-y-auto overscroll-contain";
 var DIALOG_MOBILE_SHEET_OVERRIDE2 = "inset-x-0 bottom-0 left-0 right-0 top-auto translate-none w-full max-w-full max-h-[90dvh] rounded-b-none rounded-t-2xl overflow-y-auto";
-var DialogWindowHandleContext = React19.createContext(null);
+var DialogWindowHandleContext = React20.createContext(null);
 var WINDOW_KEEP_VISIBLE = 80;
 function isInteractiveTarget(target) {
   return target instanceof Element && Boolean(target.closest("button, a, input, textarea, select, [role='button'], [contenteditable='true']"));
 }
-var DialogContent = React19.forwardRef(
+var DialogContent = React20.forwardRef(
   ({
     className,
     children,
@@ -2427,13 +2582,13 @@ var DialogContent = React19.forwardRef(
     const injectedContainer = usePortalContainer(container);
     const asSheet = mobileSheet && isMobile;
     const windowed = !isModal && !asSheet;
-    const windowedByDefault = React19.useContext(DialogWindowedByDefaultContext);
-    const [containerEl, setContainerEl] = React19.useState(
+    const windowedByDefault = React20.useContext(DialogWindowedByDefaultContext);
+    const [containerEl, setContainerEl] = React20.useState(
       null
     );
     const stacks = windowed && windowedByDefault;
-    const [behind, setBehind] = React19.useState(false);
-    React19.useEffect(() => {
+    const [behind, setBehind] = React20.useState(false);
+    React20.useEffect(() => {
       if (!stacks || !containerEl) return;
       const onFront = (event) => {
         const element = event.detail?.element ?? null;
@@ -2449,9 +2604,9 @@ var DialogContent = React19.forwardRef(
       setBehind(false);
       announceLayerFront(containerEl);
     };
-    const [offset, setOffset] = React19.useState({ x: 0, y: 0 });
-    const dragRef = React19.useRef(null);
-    const handle = React19.useMemo(() => {
+    const [offset, setOffset] = React20.useState({ x: 0, y: 0 });
+    const dragRef = React20.useRef(null);
+    const handle = React20.useMemo(() => {
       if (!windowed) return null;
       const clamp = (value, limit) => Math.max(-limit, Math.min(limit, value));
       return {
@@ -2479,7 +2634,7 @@ var DialogContent = React19.forwardRef(
         onDoubleClick: () => setOffset({ x: 0, y: 0 })
       };
     }, [windowed, offset.x, offset.y]);
-    const mergedRef = React19.useCallback(
+    const mergedRef = React20.useCallback(
       (node) => {
         setContainerEl(node);
         if (typeof ref === "function") ref(node);
@@ -2490,9 +2645,9 @@ var DialogContent = React19.forwardRef(
     );
     const hasTitle = (0, import_react_tree3.treeContainsComponent)(children, DialogTitle) || (0, import_react_tree3.treeContainsComponent)(children, DialogPrimitive2.Title);
     const hasDescription = (0, import_react_tree3.treeContainsComponent)(children, DialogDescription) || (0, import_react_tree3.treeContainsComponent)(children, DialogPrimitive2.Description);
-    return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(DialogPortal, { container, children: [
-      isModal ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DialogOverlay, {}) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(DialogPortal, { container, children: [
+      isModal ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DialogOverlay, {}) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
         DialogContentPrimitive,
         {
           ref: mergedRef,
@@ -2535,23 +2690,23 @@ var DialogContent = React19.forwardRef(
           ...hasDescription ? {} : { "aria-describedby": void 0 },
           ...props,
           children: [
-            hasTitle ? null : /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(VisuallyHidden2.Root, { children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DialogPrimitive2.Title, { children: "Dialog" }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DialogContainerContext.Provider, { value: containerEl, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(DialogWindowHandleContext.Provider, { value: handle, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+            hasTitle ? null : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(VisuallyHidden2.Root, { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DialogPrimitive2.Title, { children: "Dialog" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DialogContainerContext.Provider, { value: containerEl, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DialogWindowHandleContext.Provider, { value: handle, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
               PortalContainerProvider,
               {
                 container: containerEl ?? injectedContainer ?? null,
                 children
               }
             ) }) }),
-            showCloseButton ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+            showCloseButton ? /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
               DialogPrimitive2.Close,
               {
                 "data-slot": "dialog-close",
                 "aria-label": "Close",
                 className: "absolute right-2 top-4 flex h-11 w-11 items-center justify-center rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground sm:right-4 lg:h-10 lg:w-10",
                 children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(XIcon, { className: "h-4 w-4" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "sr-only", children: "Close" })
+                  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(XIcon, { className: "h-4 w-4" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "sr-only", children: "Close" })
                 ]
               }
             ) : null
@@ -2566,8 +2721,8 @@ var DialogHeader = ({
   className,
   ...props
 }) => {
-  const handle = React19.useContext(DialogWindowHandleContext);
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+  const handle = React20.useContext(DialogWindowHandleContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
     "div",
     {
       "data-slot": "dialog-header",
@@ -2591,7 +2746,7 @@ DialogHeader.displayName = "DialogHeader";
 var DialogFooter = ({
   className,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
   "div",
   {
     "data-slot": "dialog-footer",
@@ -2623,7 +2778,7 @@ var DialogFooter = ({
   }
 );
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+var DialogTitle = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
   DialogPrimitive2.Title,
   {
     ref,
@@ -2633,7 +2788,7 @@ var DialogTitle = React19.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 DialogTitle.displayName = DialogPrimitive2.Title.displayName;
-var DialogDescription = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+var DialogDescription = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
   DialogPrimitive2.Description,
   {
     ref,
@@ -2646,8 +2801,8 @@ DialogDescription.displayName = DialogPrimitive2.Description.displayName;
 
 // src/dropdown-menu.tsx
 var DropdownMenuPrimitive = __toESM(require("@radix-ui/react-dropdown-menu"), 1);
-var React20 = __toESM(require("react"), 1);
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var React21 = __toESM(require("react"), 1);
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var DropdownMenu = DropdownMenuPrimitive.Root;
 var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
 var DropdownMenuGroup = DropdownMenuPrimitive.Group;
@@ -2657,7 +2812,7 @@ var DropdownMenuRadioGroup = DropdownMenuPrimitive.RadioGroup;
 var MENU_SURFACE_CLASS = "z-[10001] min-w-[8rem] max-h-[var(--radix-dropdown-menu-content-available-height)] overflow-y-auto overflow-x-hidden overscroll-contain rounded-md border bg-popover p-1 text-popover-foreground";
 var MENU_ITEM_CLASS = "relative flex cursor-default select-none items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
 var MENU_INDICATOR_ITEM_CLASS = "relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50";
-var DropdownMenuSubTrigger = React20.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+var DropdownMenuSubTrigger = React21.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
   DropdownMenuPrimitive.SubTrigger,
   {
     ref,
@@ -2670,14 +2825,14 @@ var DropdownMenuSubTrigger = React20.forwardRef(({ className, inset, children, .
     ...props,
     children: [
       children,
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(RadixChevronRightIcon, { className: "ml-auto h-4 w-4" })
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(RadixChevronRightIcon, { className: "ml-auto h-4 w-4" })
     ]
   }
 ));
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-var DropdownMenuSubContent = React20.forwardRef(({ className, container, sideOffset = 2, alignOffset = -4, collisionPadding = 8, ...props }, ref) => {
+var DropdownMenuSubContent = React21.forwardRef(({ className, container, sideOffset = 2, alignOffset = -4, collisionPadding = 8, ...props }, ref) => {
   const portalContainer = usePortalContainer(container);
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DropdownMenuPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DropdownMenuPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     DropdownMenuPrimitive.SubContent,
     {
       ref,
@@ -2691,9 +2846,9 @@ var DropdownMenuSubContent = React20.forwardRef(({ className, container, sideOff
   ) });
 });
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-var DropdownMenuContent = React20.forwardRef(({ className, sideOffset = 4, container, ...props }, ref) => {
+var DropdownMenuContent = React21.forwardRef(({ className, sideOffset = 4, container, ...props }, ref) => {
   const portalContainer = usePortalContainer(container);
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DropdownMenuPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DropdownMenuPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
     DropdownMenuPrimitive.Content,
     {
       ref,
@@ -2710,7 +2865,7 @@ var DropdownMenuContent = React20.forwardRef(({ className, sideOffset = 4, conta
   ) });
 });
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = React20.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+var DropdownMenuItem = React21.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
   DropdownMenuPrimitive.Item,
   {
     ref,
@@ -2720,7 +2875,7 @@ var DropdownMenuItem = React20.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-var DropdownMenuCheckboxItem = React20.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+var DropdownMenuCheckboxItem = React21.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
   DropdownMenuPrimitive.CheckboxItem,
   {
     ref,
@@ -2728,13 +2883,13 @@ var DropdownMenuCheckboxItem = React20.forwardRef(({ className, children, ...pro
     className: cn(MENU_INDICATOR_ITEM_CLASS, className),
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(CheckIcon, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(CheckIcon, { className: "h-4 w-4" }) }) }),
       children
     ]
   }
 ));
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-var DropdownMenuRadioItem = React20.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+var DropdownMenuRadioItem = React21.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
   DropdownMenuPrimitive.RadioItem,
   {
     ref,
@@ -2742,13 +2897,13 @@ var DropdownMenuRadioItem = React20.forwardRef(({ className, children, ...props
     className: cn(MENU_INDICATOR_ITEM_CLASS, className),
     ...props,
     children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(DotFilledIcon, { className: "h-4 w-4 fill-current" }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DotFilledIcon, { className: "h-4 w-4 fill-current" }) }) }),
       children
     ]
   }
 ));
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-var DropdownMenuLabel = React20.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+var DropdownMenuLabel = React21.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
   DropdownMenuPrimitive.Label,
   {
     ref,
@@ -2758,7 +2913,7 @@ var DropdownMenuLabel = React20.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-var DropdownMenuSeparator = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+var DropdownMenuSeparator = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
   DropdownMenuPrimitive.Separator,
   {
     ref,
@@ -2771,7 +2926,7 @@ DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
 var DropdownMenuShortcut = ({
   className,
   ...props
-}) => /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+}) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
   "span",
   {
     "data-slot": "dropdown-menu-shortcut",
@@ -2783,7 +2938,7 @@ DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
 
 // src/editable-label.tsx
 var import_react2 = require("react");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function EditableLabel({
   value,
   onCommit,
@@ -2890,8 +3045,8 @@ function EditableLabel({
     setEditing
   ]);
   if (editing) {
-    return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: cn("relative flex min-w-0 flex-1 items-center", className), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("span", { className: cn("relative flex min-w-0 flex-1 items-center", className), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         "input",
         {
           ref: inputRef,
@@ -2931,12 +3086,12 @@ function EditableLabel({
           )
         }
       ),
-      busy && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Loader2Icon, { className: "absolute right-1 h-3.5 w-3.5 matrx-spin text-muted-foreground" }),
-      error && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "absolute left-0 top-full mt-0.5 whitespace-nowrap text-xs text-destructive", children: error })
+      busy && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Loader2Icon, { className: "absolute right-1 h-3.5 w-3.5 matrx-spin text-muted-foreground" }),
+      error && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "absolute left-0 top-full mt-0.5 whitespace-nowrap text-xs text-destructive", children: error })
     ] });
   }
   if (controlled) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
     "button",
     {
       type: "button",
@@ -2970,13 +3125,8 @@ function EditableLabel({
 }
 
 // src/input.tsx
-var React21 = __toESM(require("react"), 1);
-
-// src/field-surface.ts
-var FIELD_SURFACE_CLASS = "border border-border bg-card";
-
-// src/input.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var React22 = __toESM(require("react"), 1);
+var import_jsx_runtime27 = require("react/jsx-runtime");
 var getVariantStyles = (variant = "default") => {
   const baseStyles = `flex h-10 w-full ${FIELD_SURFACE_CLASS} text-foreground shadow-input rounded-md px-3 py-2 text-sm file:border-0 file:bg-transparent
     file:text-sm file:font-medium file:text-foreground placeholder:text-muted-foreground
@@ -3004,9 +3154,9 @@ var getVariantStyles = (variant = "default") => {
       return baseStyles;
   }
 };
-var Input = React21.forwardRef(
+var Input = React22.forwardRef(
   ({ className, type, variant = "default", ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       "input",
       {
         type,
@@ -3018,7 +3168,7 @@ var Input = React21.forwardRef(
   }
 );
 Input.displayName = "Input";
-var EnterInput = React21.forwardRef(
+var EnterInput = React22.forwardRef(
   ({ onEnter, ...props }, ref) => {
     const handleKeyDown = (e) => {
       if (e.key === "Enter" && onEnter) {
@@ -3026,7 +3176,7 @@ var EnterInput = React21.forwardRef(
         onEnter();
       }
     };
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       Input,
       {
         ...props,
@@ -3042,11 +3192,11 @@ var EnterInput = React21.forwardRef(
   }
 );
 EnterInput.displayName = "EnterInput";
-var BasicInput = React21.forwardRef(
+var BasicInput = React22.forwardRef(
   // `variant` is accepted (prop-compatible with Input) but intentionally
   // unused — and destructured so it never leaks onto the DOM element.
   ({ className, type, variant: _variant = "default", ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       "input",
       {
         type,
@@ -3061,10 +3211,10 @@ var BasicInput = React21.forwardRef(
   }
 );
 BasicInput.displayName = "BasicInput";
-var InputWithPrefix = React21.forwardRef(({ prefix, className, wrapperClassName, ...props }, ref) => {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: cn("relative", wrapperClassName), children: [
-    prefix && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground", children: prefix }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+var InputWithPrefix = React22.forwardRef(({ prefix, className, wrapperClassName, ...props }, ref) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: cn("relative", wrapperClassName), children: [
+    prefix && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground", children: prefix }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
       Input,
       {
         ref,
@@ -3078,9 +3228,9 @@ InputWithPrefix.displayName = "InputWithPrefix";
 
 // src/label.tsx
 var LabelPrimitive = __toESM(require("@radix-ui/react-label"), 1);
-var React22 = __toESM(require("react"), 1);
-var import_jsx_runtime27 = require("react/jsx-runtime");
-var Label3 = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+var React23 = __toESM(require("react"), 1);
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var Label4 = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
   LabelPrimitive.Root,
   {
     ref,
@@ -3091,11 +3241,11 @@ var Label3 = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE__ *
     ...props
   }
 ));
-Label3.displayName = LabelPrimitive.Root.displayName;
+Label4.displayName = LabelPrimitive.Root.displayName;
 
 // src/overflow-toolbar.tsx
 var import_react3 = require("react");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 var GAP_PX = 6;
 var TONE = {
   default: "border border-border bg-background hover:bg-accent text-foreground",
@@ -3117,16 +3267,16 @@ function ToolbarButton({
     action.hideLabel && !action.running ? "w-7 justify-center px-0" : "px-2",
     TONE[tone]
   );
-  const inner = /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_jsx_runtime28.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  const inner = /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       Icon2,
       {
         className: cn("w-3.5 h-3.5 shrink-0", action.running && "matrx-spin")
       }
     ),
-    showLabel && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { children: text })
+    showLabel && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { children: text })
   ] });
-  const control = action.href && !action.disabled ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  const control = action.href && !action.disabled ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     "a",
     {
       href: action.href,
@@ -3136,7 +3286,7 @@ function ToolbarButton({
       "aria-label": action.label,
       children: inner
     }
-  ) : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  ) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     "button",
     {
       type: "button",
@@ -3148,12 +3298,12 @@ function ToolbarButton({
     }
   );
   if (enableTooltip && action.hideLabel && renderTooltip) {
-    return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_jsx_runtime28.Fragment, { children: renderTooltip(control, action.label) });
+    return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_jsx_runtime29.Fragment, { children: renderTooltip(control, action.label) });
   }
   return control;
 }
 function OverflowTrigger({ ariaLabel }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
     "button",
     {
       type: "button",
@@ -3164,7 +3314,7 @@ function OverflowTrigger({ ariaLabel }) {
         "inline-flex items-center justify-center h-7 w-7 rounded-md transition-colors",
         "border border-border bg-background hover:bg-accent text-foreground"
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(MoreHorizontalIcon, { className: "w-3.5 h-3.5" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(MoreHorizontalIcon, { className: "w-3.5 h-3.5" })
     }
   );
 }
@@ -3224,22 +3374,22 @@ function OverflowToolbar({
   }, [signature, leading != null]);
   const shown = visibleActions.slice(0, visibleCount);
   const hidden = visibleActions.slice(visibleCount);
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { ref: containerRef, className: cn("relative min-w-0", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { ref: containerRef, className: cn("relative min-w-0", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
       "div",
       {
         ref: ghostRef,
         "aria-hidden": true,
         className: "pointer-events-none absolute left-0 top-0 flex items-center gap-1.5 opacity-0",
         children: [
-          visibleActions.map((a) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ToolbarButton, { action: a }, a.id)),
-          /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(OverflowTrigger, { ariaLabel: overflowAriaLabel })
+          visibleActions.map((a) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ToolbarButton, { action: a }, a.id)),
+          /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(OverflowTrigger, { ariaLabel: overflowAriaLabel })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: "flex items-center justify-end gap-1.5", children: [
-      leading != null && /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { ref: leadingRef, className: "shrink-0", children: leading }),
-      shown.map((a) => /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-center justify-end gap-1.5", children: [
+      leading != null && /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { ref: leadingRef, className: "shrink-0", children: leading }),
+      shown.map((a) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
         ToolbarButton,
         {
           action: a,
@@ -3250,7 +3400,7 @@ function OverflowToolbar({
       )),
       hidden.length > 0 && renderOverflowMenu({
         actions: hidden,
-        trigger: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(OverflowTrigger, { ariaLabel: overflowAriaLabel })
+        trigger: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(OverflowTrigger, { ariaLabel: overflowAriaLabel })
       })
     ] })
   ] });
@@ -3258,20 +3408,20 @@ function OverflowToolbar({
 
 // src/progress.tsx
 var ProgressPrimitive = __toESM(require("@radix-ui/react-progress"), 1);
-var React24 = __toESM(require("react"), 1);
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var React25 = __toESM(require("react"), 1);
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var PROGRESS_TONES = {
   default: "bg-primary",
   success: "bg-success",
   warning: "bg-warning",
   destructive: "bg-destructive"
 };
-var Progress = React24.forwardRef(({ className, tone = "default", indicatorClassName, ...props }, ref) => {
+var Progress = React25.forwardRef(({ className, tone = "default", indicatorClassName, ...props }, ref) => {
   const { value, max } = props;
   const ceiling = max ?? 100;
   const isIndeterminate = value === null || value === void 0;
   const pct = isIndeterminate ? 0 : Math.min(100, Math.max(0, value / ceiling * 100));
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     ProgressPrimitive.Root,
     {
       ref,
@@ -3281,7 +3431,7 @@ var Progress = React24.forwardRef(({ className, tone = "default", indicatorClass
         className
       ),
       ...props,
-      children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
         ProgressPrimitive.Indicator,
         {
           "data-slot": "progress-indicator",
@@ -3303,9 +3453,9 @@ Progress.displayName = ProgressPrimitive.Root.displayName;
 
 // src/scroll-area.tsx
 var ScrollAreaPrimitive = __toESM(require("@radix-ui/react-scroll-area"), 1);
-var React25 = __toESM(require("react"), 1);
-var import_jsx_runtime30 = require("react/jsx-runtime");
-var ScrollArea = React25.forwardRef(
+var React26 = __toESM(require("react"), 1);
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var ScrollArea = React26.forwardRef(
   ({
     className,
     children,
@@ -3314,7 +3464,7 @@ var ScrollArea = React25.forwardRef(
     scrollBarClassName,
     orientation = "vertical",
     ...props
-  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+  }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
     ScrollAreaPrimitive.Root,
     {
       ref,
@@ -3322,7 +3472,7 @@ var ScrollArea = React25.forwardRef(
       className: cn("relative overflow-hidden", className),
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
           ScrollAreaPrimitive.Viewport,
           {
             ref: viewportRef,
@@ -3331,14 +3481,14 @@ var ScrollArea = React25.forwardRef(
             children
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ScrollBar, { orientation, className: scrollBarClassName }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(ScrollAreaPrimitive.Corner, {})
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ScrollBar, { orientation, className: scrollBarClassName }),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ScrollAreaPrimitive.Corner, {})
       ]
     }
   )
 );
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-var ScrollBar = React25.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+var ScrollBar = React26.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
   ScrollAreaPrimitive.ScrollAreaScrollbar,
   {
     ref,
@@ -3351,7 +3501,7 @@ var ScrollBar = React25.forwardRef(({ className, orientation = "vertical", ...pr
       className
     ),
     ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+    children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       ScrollAreaPrimitive.ScrollAreaThumb,
       {
         "data-slot": "scroll-area-thumb",
@@ -3363,7 +3513,7 @@ var ScrollBar = React25.forwardRef(({ className, orientation = "vertical", ...pr
 ScrollBar.displayName = ScrollAreaPrimitive.ScrollAreaScrollbar.displayName;
 
 // src/score-ring.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var DEFAULT_SCORE_THRESHOLDS = {
   good: 75,
   warning: 50
@@ -3394,7 +3544,7 @@ function ScoreRing({
   const circumference = 2 * Math.PI * radius;
   const boundedPct = pct === null ? 0 : Math.max(0, Math.min(100, pct));
   const dashOffset = circumference * (1 - boundedPct / 100);
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
     "div",
     {
       className: cn(
@@ -3405,8 +3555,8 @@ function ScoreRing({
       role: "img",
       "aria-label": `${label ?? "Score"}: ${pct === null ? "not available" : `${pct} out of 100`}`,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("svg", { viewBox: "0 0 100 100", className: "h-full w-full -rotate-90", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("svg", { viewBox: "0 0 100 100", className: "h-full w-full -rotate-90", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             "circle",
             {
               cx: "50",
@@ -3417,7 +3567,7 @@ function ScoreRing({
               fill: "none"
             }
           ),
-          pct !== null ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+          pct !== null ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             "circle",
             {
               cx: "50",
@@ -3436,8 +3586,8 @@ function ScoreRing({
             }
           ) : null
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "absolute flex flex-col items-center justify-center", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "absolute flex flex-col items-center justify-center", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             "span",
             {
               className: cn(
@@ -3447,7 +3597,7 @@ function ScoreRing({
               children: pct === null ? "\u2014" : `${pct}${suffix}`
             }
           ),
-          label ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "max-w-[74px] truncate text-[9px] font-semibold uppercase tracking-wide text-muted-foreground", children: label }) : null
+          label ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "max-w-[74px] truncate text-[9px] font-semibold uppercase tracking-wide text-muted-foreground", children: label }) : null
         ] })
       ]
     }
@@ -3455,7 +3605,7 @@ function ScoreRing({
 }
 
 // src/segmented-control.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function SegmentedControl({
   value,
   onValueChange,
@@ -3470,7 +3620,7 @@ function SegmentedControl({
     md: "h-9 text-sm",
     lg: "h-10 text-base"
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
     "div",
     {
       className: cn(
@@ -3481,7 +3631,7 @@ function SegmentedControl({
       role: "tablist",
       children: data.map((option) => {
         const isActive = value === option.value;
-        return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
           "button",
           {
             type: "button",
@@ -3507,8 +3657,8 @@ function SegmentedControl({
 }
 
 // src/archive-filter.tsx
-var React26 = __toESM(require("react"), 1);
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var React27 = __toESM(require("react"), 1);
+var import_jsx_runtime34 = require("react/jsx-runtime");
 var ARCHIVE_FILTER_VALUES = ["active", "archived", "all"];
 var DEFAULT_ARCHIVE_FILTER = "active";
 var ARCHIVE_LABEL = "Archived";
@@ -3533,7 +3683,7 @@ function ArchiveFilter({
   "aria-label": ariaLabel = "Archive filter",
   disabled = false
 }) {
-  const data = React26.useMemo(
+  const data = React27.useMemo(
     () => ARCHIVE_FILTER_VALUES.map((state) => {
       const text = labels?.[state] ?? ARCHIVE_FILTER_LABELS[state];
       const count = counts?.[state];
@@ -3541,15 +3691,15 @@ function ArchiveFilter({
         value: state,
         disabled,
         ariaLabel: typeof count === "number" ? `${text} ${count}` : text,
-        label: typeof count === "number" ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { className: "inline-flex items-center gap-1.5", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { children: text }),
-          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-muted-foreground tabular-nums", children: count })
+        label: typeof count === "number" ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: "inline-flex items-center gap-1.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { children: text }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-muted-foreground tabular-nums", children: count })
         ] }) : text
       };
     }),
     [counts, labels, disabled]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { role: "group", "aria-label": ariaLabel, className: cn("inline-flex", className), children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { role: "group", "aria-label": ariaLabel, className: cn("inline-flex", className), children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     SegmentedControl,
     {
       value,
@@ -3561,7 +3711,7 @@ function ArchiveFilter({
 }
 
 // src/archived-disclosure.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 function ArchivedDisclosure({
   count,
   open,
@@ -3575,8 +3725,8 @@ function ArchivedDisclosure({
 }) {
   if (count <= 0 && !(open && keepWhileOpen)) return null;
   const parenthetical = countLabel === void 0 ? String(count) : countLabel;
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: cn("min-w-0", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: cn("min-w-0", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
       "button",
       {
         type: "button",
@@ -3584,161 +3734,16 @@ function ArchivedDisclosure({
         "aria-expanded": open,
         className: "flex w-full items-center gap-2 rounded-lg px-2 py-2 text-sm text-muted-foreground hover:bg-accent active:bg-accent",
         children: [
-          open ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ChevronDownIcon, { className: "h-4 w-4 shrink-0" }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ChevronRightIcon, { className: "h-4 w-4 shrink-0" }),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(ArchiveIcon, { className: "h-4 w-4 shrink-0" }),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "truncate", children: parenthetical === null ? label : `${label} (${parenthetical})` })
+          open ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ChevronDownIcon, { className: "h-4 w-4 shrink-0" }) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ChevronRightIcon, { className: "h-4 w-4 shrink-0" }),
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(ArchiveIcon, { className: "h-4 w-4 shrink-0" }),
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "truncate", children: parenthetical === null ? label : `${label} (${parenthetical})` })
         ]
       }
     ),
-    open && children ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: cn("mt-1", contentClassName), children }) : null
+    open && children ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: cn("mt-1", contentClassName), children }) : null
   ] });
 }
 
-// src/select.tsx
-var SelectPrimitive = __toESM(require("@radix-ui/react-select"), 1);
-var import_class_variance_authority4 = require("class-variance-authority");
-var React27 = __toESM(require("react"), 1);
-var import_jsx_runtime35 = require("react/jsx-runtime");
-var Select = SelectPrimitive.Root;
-var SelectGroup = SelectPrimitive.Group;
-var SelectValue = SelectPrimitive.Value;
-var selectTriggerVariants = (0, import_class_variance_authority4.cva)(
-  `flex w-full items-center justify-between gap-2 whitespace-nowrap rounded-md ${FIELD_SURFACE_CLASS} text-sm shadow-sm ring-offset-background placeholder:text-muted-foreground transition-colors hover:bg-accent hover:border-accent-foreground/20 focus:outline-none focus:ring-1 focus:ring-primary/30 focus:border-primary/40 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:min-w-0 [&>span]:line-clamp-1`,
-  {
-    variants: {
-      size: {
-        sm: "h-7 px-2 py-1 text-xs",
-        default: "h-9 px-3 py-1",
-        lg: "h-10 px-3 py-2"
-      }
-    },
-    defaultVariants: {
-      size: "default"
-    }
-  }
-);
-var SelectTrigger = React27.forwardRef(({ className, children, hideArrow = false, size, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
-  SelectPrimitive.Trigger,
-  {
-    ref,
-    className: cn(selectTriggerVariants({ size, className })),
-    ...props,
-    children: [
-      children,
-      !hideArrow && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(RadixChevronDownIcon, { className: "h-4 w-4 shrink-0 opacity-50" }) })
-    ]
-  }
-));
-SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectScrollUpButton = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-  SelectPrimitive.ScrollUpButton,
-  {
-    ref,
-    className: cn(
-      "flex cursor-default items-center justify-center py-1",
-      className
-    ),
-    ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(RadixChevronUpIcon, {})
-  }
-));
-SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var SelectScrollDownButton = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-  SelectPrimitive.ScrollDownButton,
-  {
-    ref,
-    className: cn(
-      "flex cursor-default items-center justify-center py-1",
-      className
-    ),
-    ...props,
-    children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(RadixChevronDownIcon, {})
-  }
-));
-SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = React27.forwardRef(
-  ({
-    className,
-    children,
-    position = "popper",
-    container,
-    animated = true,
-    ...props
-  }, ref) => {
-    const portalContainer = usePortalContainer(container);
-    return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SelectPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
-      SelectPrimitive.Content,
-      {
-        ref,
-        className: cn(
-          "relative z-[10001] max-h-96 min-w-[8rem] max-w-[calc(100vw-2rem)] overflow-hidden rounded-md border bg-popover text-popover-foreground shadow-md",
-          animated && MOTION_POPPER,
-          // The resting gap from the trigger. It is the `translate` property
-          // (POPPER_OFFSET), never Tailwind translate utilities: those compose
-          // with `transform` on a v4 host and are REPLACED by it on a v3 one,
-          // so on v3 the animation ate the gap and the surface snapped 4px at
-          // the end. Same law as the centred dialog card — see motion.ts.
-          position === "popper" && POPPER_OFFSET,
-          className
-        ),
-        position,
-        ...props,
-        children: [
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SelectScrollUpButton, {}),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-            SelectPrimitive.Viewport,
-            {
-              className: cn(
-                "max-w-full overflow-y-auto p-0.5",
-                position === "popper" && "w-full min-w-[var(--radix-select-trigger-width)] max-h-[var(--radix-select-content-available-height)]"
-              ),
-              children
-            }
-          ),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SelectScrollDownButton, {})
-        ]
-      }
-    ) });
-  }
-);
-SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-  SelectPrimitive.Label,
-  {
-    ref,
-    className: cn("px-2 py-1.5 text-sm font-semibold", className),
-    ...props
-  }
-));
-SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React27.forwardRef(({ className, children, description, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
-  SelectPrimitive.Item,
-  {
-    ref,
-    className: cn(
-      "relative flex w-full min-w-0 cursor-default select-none rounded-sm py-1 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
-      description ? "flex-col items-start gap-0.5 py-1.5" : "items-center",
-      className
-    ),
-    ...props,
-    children: [
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(CheckIcon, { className: "h-4 w-4" }) }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "min-w-0 whitespace-normal break-words [overflow-wrap:anywhere]", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(SelectPrimitive.ItemText, { children }) }),
-      description ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "block min-w-0 break-words text-xs leading-snug text-muted-foreground [overflow-wrap:anywhere]", children: description }) : null
-    ]
-  }
-));
-SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React27.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
-  SelectPrimitive.Separator,
-  {
-    ref,
-    className: cn("-mx-1 my-1 h-px bg-muted", className),
-    ...props
-  }
-));
-SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
-
 // src/separator.tsx
 var SeparatorPrimitive = __toESM(require("@radix-ui/react-separator"), 1);
 var React28 = __toESM(require("react"), 1);