@ai-matrx/design-system 0.60.7 → 0.60.9

package/dist/index.js

@@ -281,9 +281,10 @@ AccordionContent.displayName = "AccordionContent";
 
 // src/badge.tsx
 import { cva } from "class-variance-authority";
+import * as React2 from "react";
 import { jsx as jsx3 } from "react/jsx-runtime";
 var badgeVariants = cva(
-  "inline-flex items-center rounded-md border px-2 py-0.5 text-[11px] font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-0",
+  "inline-flex min-w-0 max-w-[16rem] items-center gap-1 whitespace-nowrap rounded-md border px-2 py-0.5 text-[11px] font-medium transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-0 [&>svg]:shrink-0",
   {
     variants: {
       variant: {
@@ -303,8 +304,136 @@ var badgeVariants = cva(
     }
   }
 );
-function Badge({ className, variant, ...props }) {
-  return /* @__PURE__ */ jsx3("span", { "data-slot": "badge", className: cn(badgeVariants({ variant }), className), ...props });
+function textOf(children) {
+  const parts = [];
+  let onlyText = true;
+  React2.Children.forEach(children, (c) => {
+    if (typeof c === "string" || typeof c === "number") parts.push(String(c));
+    else if (c != null && typeof c !== "boolean") onlyText = false;
+  });
+  const text = parts.join("").trim();
+  return onlyText && text ? text : null;
+}
+function Badge({ className, variant, children, title, ...props }) {
+  const clamped = React2.Children.map(
+    children,
+    (c) => typeof c === "string" || typeof c === "number" ? /* @__PURE__ */ jsx3("span", { "data-slot": "badge-text", className: "min-w-0 truncate", children: c }) : c
+  );
+  return /* @__PURE__ */ jsx3(
+    "span",
+    {
+      "data-slot": "badge",
+      title: title ?? textOf(children) ?? void 0,
+      className: cn(badgeVariants({ variant }), className),
+      ...props,
+      children: clamped
+    }
+  );
+}
+
+// src/pill-guard.ts
+var PILL_MAX_WIDTH_PX = 320;
+var SELECTOR = [
+  '[data-slot="badge"]',
+  "[data-matrx-pill]",
+  "a.rounded-full",
+  "button.rounded-full",
+  "span.rounded-full",
+  "div.rounded-full"
+].join(",");
+var SLOT = /* @__PURE__ */ Symbol.for("@ai-matrx/design-system:pill-guard");
+function px(v) {
+  const n = Number.parseFloat(v ?? "");
+  return Number.isFinite(n) ? n : 0;
+}
+function describe(el) {
+  const t = (el.textContent ?? "").replace(/\s+/g, " ").trim();
+  return t.length > 60 ? `${t.slice(0, 57)}\u2026` : t;
+}
+function findPillViolation(el, maxWidth = PILL_MAX_WIDTH_PX) {
+  if (el.getAttribute("data-matrx-pill") === "off") return null;
+  const text = (el.textContent ?? "").trim();
+  if (!text) return null;
+  const view = el.ownerDocument.defaultView;
+  if (!view) return null;
+  const rect = el.getBoundingClientRect();
+  if (rect.width === 0 || rect.height === 0) return null;
+  const cs = view.getComputedStyle(el);
+  if (cs.display === "none" || cs.visibility === "hidden") return null;
+  if (rect.width > maxWidth + 0.5) {
+    return `pill is ${Math.round(rect.width)}px wide (budget ${maxWidth}px) holding "${describe(el)}" \u2014 a pill holds a short label: clamp it (Badge, or truncate + max-w + title) or render a list row.`;
+  }
+  const fontSize = px(cs.fontSize) || 12;
+  const lineHeight = px(cs.lineHeight) || fontSize * 1.4;
+  const inner = rect.height - px(cs.paddingTop) - px(cs.paddingBottom) - px(cs.borderTopWidth) - px(cs.borderBottomWidth);
+  if (inner > lineHeight * 1.5) {
+    const lines = Math.round(inner / lineHeight);
+    return `pill wraps to ${lines} lines holding "${describe(el)}" \u2014 a pill is one line: clamp it (Badge, or truncate + max-w + title) or render a list row.`;
+  }
+  return null;
+}
+var OUTLINE = "2px dashed hsl(var(--destructive))";
+function enablePillGuard(options = {}) {
+  const g = globalThis;
+  if (g[SLOT]) return g[SLOT];
+  const doc = options.root ?? (typeof document === "undefined" ? null : document);
+  const view = doc?.defaultView;
+  if (!doc || !view) return () => {
+  };
+  const maxWidth = options.maxWidth ?? PILL_MAX_WIDTH_PX;
+  const marked = /* @__PURE__ */ new Map();
+  const reported2 = /* @__PURE__ */ new Set();
+  let timer = null;
+  let observer = null;
+  const scan = () => {
+    timer = null;
+    observer?.disconnect();
+    for (const [el, before] of marked) {
+      if (!el.isConnected || !findPillViolation(el, maxWidth)) {
+        el.style.outline = before;
+        el.removeAttribute("data-matrx-pill-violation");
+        marked.delete(el);
+      }
+    }
+    doc.querySelectorAll(SELECTOR).forEach((el) => {
+      const reason = findPillViolation(el, maxWidth);
+      if (!reason) return;
+      if (!marked.has(el)) marked.set(el, el.style.outline);
+      el.style.outline = OUTLINE;
+      el.style.outlineOffset = "1px";
+      el.setAttribute("data-matrx-pill-violation", reason);
+      if (!reported2.has(reason)) {
+        reported2.add(reason);
+        console.error(`[pill-guard] ${reason}`, el);
+      }
+    });
+    observe();
+  };
+  const schedule = () => {
+    if (timer) clearTimeout(timer);
+    timer = setTimeout(scan, 400);
+  };
+  const observe = () => {
+    if (!doc.body) return;
+    observer ??= new view.MutationObserver(schedule);
+    observer.observe(doc.body, { childList: true, subtree: true, characterData: true });
+  };
+  view.addEventListener("resize", schedule);
+  observe();
+  schedule();
+  const off = () => {
+    observer?.disconnect();
+    view.removeEventListener("resize", schedule);
+    if (timer) clearTimeout(timer);
+    for (const [el, before] of marked) {
+      el.style.outline = before;
+      el.removeAttribute("data-matrx-pill-violation");
+    }
+    marked.clear();
+    delete g[SLOT];
+  };
+  g[SLOT] = off;
+  return off;
 }
 
 // src/bottom-sheet.tsx
@@ -313,13 +442,13 @@ import { Drawer as DrawerPrimitive2 } from "vaul";
 
 // src/drawer.tsx
 import { treeContainsComponent } from "@ai-matrx/kit/react-tree";
-import * as React4 from "react";
+import * as React5 from "react";
 import { Drawer as DrawerPrimitive } from "vaul";
 
 // src/floating-layer.tsx
 import { FocusScope } from "@radix-ui/react-focus-scope";
 import { Slot } from "@radix-ui/react-slot";
-import * as React2 from "react";
+import * as React3 from "react";
 import { jsx as jsx4 } from "react/jsx-runtime";
 var MODAL_LAYER_Z = 1e4;
 var FLOATING_LAYER_ATTR = "data-matrx-floating-layer";
@@ -364,10 +493,10 @@ function subscribe(listener) {
   return () => registry.listeners.delete(listener);
 }
 function useModalLayerOpen() {
-  return React2.useSyncExternalStore(subscribe, isModalLayerOpen, () => false);
+  return React3.useSyncExternalStore(subscribe, isModalLayerOpen, () => false);
 }
 function useModalLayer(active) {
-  React2.useLayoutEffect(() => active ? registerModalLayer() : void 0, [active]);
+  React3.useLayoutEffect(() => active ? registerModalLayer() : void 0, [active]);
 }
 var POPPER_WRAPPER = "[data-radix-popper-content-wrapper]";
 function isInsideFloatingLayer(target) {
@@ -388,8 +517,8 @@ function useFloatingLayerZIndex(ownZ) {
   return floatingLayerZIndex(ownZ, useModalLayerOpen());
 }
 var preventAutoFocus = (event) => event.preventDefault();
-var FloatingLayer = React2.forwardRef(({ children }, ref) => {
-  const [opener] = React2.useState(
+var FloatingLayer = React3.forwardRef(({ children }, ref) => {
+  const [opener] = React3.useState(
     () => typeof document === "undefined" ? null : document.activeElement
   );
   const returnFocus = (event) => {
@@ -423,11 +552,11 @@ var FloatingLayer = React2.forwardRef(({ children }, ref) => {
 FloatingLayer.displayName = "FloatingLayer";
 
 // src/radix-dialog-modal-context.tsx
-import * as React3 from "react";
+import * as React4 from "react";
 import { jsx as jsx5 } from "react/jsx-runtime";
 var CONTEXT_SLOT = /* @__PURE__ */ Symbol.for("ai-matrx.design-system.dialog-modal-context");
 var contextRegistry = globalThis;
-var RadixDialogModalContext = contextRegistry[CONTEXT_SLOT] ??= React3.createContext(true);
+var RadixDialogModalContext = contextRegistry[CONTEXT_SLOT] ??= React4.createContext(true);
 function RadixDialogModalProvider({
   children,
   modal
@@ -435,13 +564,13 @@ function RadixDialogModalProvider({
   return /* @__PURE__ */ jsx5(RadixDialogModalContext.Provider, { value: modal, children });
 }
 function useRadixDialogModal() {
-  return React3.useContext(RadixDialogModalContext);
+  return React4.useContext(RadixDialogModalContext);
 }
 
 // src/drawer.tsx
 import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
-var DrawerDirectionContext = React4.createContext("bottom");
-var useDrawerDirection = () => React4.useContext(DrawerDirectionContext);
+var DrawerDirectionContext = React5.createContext("bottom");
+var useDrawerDirection = () => React5.useContext(DrawerDirectionContext);
 var Drawer = ({
   children,
   shouldScaleBackground = true,
@@ -471,7 +600,7 @@ Drawer.displayName = "Drawer";
 var DrawerTrigger = DrawerPrimitive.Trigger;
 var DrawerPortal = DrawerPrimitive.Portal;
 var DrawerClose = DrawerPrimitive.Close;
-var DrawerOverlay = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
+var DrawerOverlay = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
   DrawerPrimitive.Overlay,
   {
     ref,
@@ -484,7 +613,7 @@ var DrawerOverlay = React4.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 DrawerOverlay.displayName = DrawerPrimitive.Overlay.displayName;
-var DrawerDescription = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
+var DrawerDescription = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
   DrawerPrimitive.Description,
   {
     ref,
@@ -494,7 +623,7 @@ var DrawerDescription = React4.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 DrawerDescription.displayName = DrawerPrimitive.Description.displayName;
-var DrawerContentPrimitive = React4.forwardRef(({ onInteractOutside, ...props }, ref) => {
+var DrawerContentPrimitive = React5.forwardRef(({ onInteractOutside, ...props }, ref) => {
   useModalLayer(true);
   return /* @__PURE__ */ jsx6(
     DrawerPrimitive.Content,
@@ -520,7 +649,7 @@ var SIZE_CLASSES = {
   left: { adaptive: "w-auto max-w-[92vw]", full: "h-dvh w-[92vw] max-w-sm" },
   right: { adaptive: "w-auto max-w-[92vw]", full: "h-dvh w-[92vw] max-w-sm" }
 };
-var DrawerContent = React4.forwardRef(({ className, children, size = "adaptive", showHandle, ...props }, ref) => {
+var DrawerContent = React5.forwardRef(({ className, children, size = "adaptive", showHandle, ...props }, ref) => {
   const direction = useDrawerDirection();
   const hasDescription = treeContainsComponent(children, DrawerDescription) || treeContainsComponent(children, DrawerPrimitive.Description);
   const withHandle = showHandle ?? (direction === "bottom" || direction === "top");
@@ -602,7 +731,7 @@ var DrawerFooter = ({
   }
 );
 DrawerFooter.displayName = "DrawerFooter";
-var DrawerTitle = React4.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
+var DrawerTitle = React5.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx6(
   DrawerPrimitive.Title,
   {
     ref,
@@ -724,14 +853,14 @@ function BottomSheetFooter({
 
 // src/alert.tsx
 import { cva as cva2 } from "class-variance-authority";
-import * as React6 from "react";
+import * as React7 from "react";
 
 // src/error-box.tsx
-import * as React5 from "react";
+import * as React6 from "react";
 import { Fragment, jsx as jsx8, jsxs as jsxs5 } from "react/jsx-runtime";
 var CONTEXT_KEY = /* @__PURE__ */ Symbol.for("@ai-matrx/design-system/error-actions");
 var registry2 = globalThis;
-var ErrorActionsContext = registry2[CONTEXT_KEY] ?? (registry2[CONTEXT_KEY] = React5.createContext(null));
+var ErrorActionsContext = registry2[CONTEXT_KEY] ?? (registry2[CONTEXT_KEY] = React6.createContext(null));
 function ErrorActionsProvider({
   render,
   children
@@ -739,14 +868,14 @@ function ErrorActionsProvider({
   return /* @__PURE__ */ jsx8(ErrorActionsContext.Provider, { value: render, children });
 }
 function useErrorActions() {
-  return React5.useContext(ErrorActionsContext);
+  return React6.useContext(ErrorActionsContext);
 }
 function ErrorActions(props) {
   const render = useErrorActions();
   if (!render) return null;
   return /* @__PURE__ */ jsx8(Fragment, { children: render(props) });
 }
-var ErrorBox = React5.forwardRef(function ErrorBox2({
+var ErrorBox = React6.forwardRef(function ErrorBox2({
   as = "p",
   message,
   title,
@@ -793,7 +922,7 @@ var alertVariants = cva2(
     }
   }
 );
-var Alert = React6.forwardRef(
+var Alert = React7.forwardRef(
   ({ className, variant, children, errorFacts, ...props }, ref) => /* @__PURE__ */ jsxs6(
     "div",
     {
@@ -811,7 +940,7 @@ var Alert = React6.forwardRef(
   )
 );
 Alert.displayName = "Alert";
-var AlertTitle = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx9(
+var AlertTitle = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx9(
   "h5",
   {
     ref,
@@ -821,7 +950,7 @@ var AlertTitle = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 AlertTitle.displayName = "AlertTitle";
-var AlertDescription = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx9(
+var AlertDescription = React7.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx9(
   "div",
   {
     ref,
@@ -835,12 +964,12 @@ AlertDescription.displayName = "AlertDescription";
 // src/alert-dialog.tsx
 import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
 import { treeContainsComponent as treeContainsComponent2 } from "@ai-matrx/kit/react-tree";
-import * as React9 from "react";
+import * as React10 from "react";
 
 // src/button.tsx
 import { Slot as Slot2 } from "@radix-ui/react-slot";
 import { cva as cva3 } from "class-variance-authority";
-import * as React7 from "react";
+import * as React8 from "react";
 import { jsx as jsx10 } from "react/jsx-runtime";
 var buttonVariants = cva3(
   "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-0 disabled:opacity-50 active:scale-[0.98] [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
@@ -908,7 +1037,7 @@ function swallowClick(event) {
   event.preventDefault();
   event.stopPropagation();
 }
-var Button = React7.forwardRef(
+var Button = React8.forwardRef(
   ({ className, variant, size, asChild = false, onClick, ...props }, ref) => {
     const Component = asChild ? Slot2 : "button";
     const resolvedSize = size ?? "default";
@@ -975,11 +1104,11 @@ var FORBIDDEN_HOST_MOTION_UTILITIES = [
 ];
 
 // src/portal-container.tsx
-import * as React8 from "react";
+import * as React9 from "react";
 import { jsx as jsx11 } from "react/jsx-runtime";
 var CONTEXT_SLOT2 = /* @__PURE__ */ Symbol.for("ai-matrx.design-system.portal-container-context");
 var contextRegistry2 = globalThis;
-var PortalContainerContext = contextRegistry2[CONTEXT_SLOT2] ??= React8.createContext(void 0);
+var PortalContainerContext = contextRegistry2[CONTEXT_SLOT2] ??= React9.createContext(void 0);
 function PortalContainerProvider({
   container,
   children
@@ -987,7 +1116,7 @@ function PortalContainerProvider({
   return /* @__PURE__ */ jsx11(PortalContainerContext.Provider, { value: container ?? void 0, children });
 }
 function usePortalContainer(explicit) {
-  const injected = React8.useContext(PortalContainerContext);
+  const injected = React9.useContext(PortalContainerContext);
   if (explicit !== void 0) {
     return explicit ?? void 0;
   }
@@ -1006,7 +1135,7 @@ var AlertDialogPortal = ({
   return /* @__PURE__ */ jsx12(AlertDialogPrimitive.Portal, { container: resolved ?? null, ...props });
 };
 AlertDialogPortal.displayName = "AlertDialogPortal";
-var AlertDialogOverlay = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx12(
+var AlertDialogOverlay = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx12(
   AlertDialogPrimitive.Overlay,
   {
     ref,
@@ -1020,12 +1149,12 @@ var AlertDialogOverlay = React9.forwardRef(({ className, ...props }, ref) => /*
   }
 ));
 AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
-var AlertDialogContentPrimitive = React9.forwardRef((props, ref) => {
+var AlertDialogContentPrimitive = React10.forwardRef((props, ref) => {
   useModalLayer(true);
   return /* @__PURE__ */ jsx12(AlertDialogPrimitive.Content, { ...props, ref, "aria-modal": "true" });
 });
 AlertDialogContentPrimitive.displayName = "AlertDialogContentPrimitive";
-var AlertDialogDescription = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx12(
+var AlertDialogDescription = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx12(
   AlertDialogPrimitive.Description,
   {
     ref,
@@ -1035,7 +1164,7 @@ var AlertDialogDescription = React9.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
-var AlertDialogContent = React9.forwardRef(({ className, children, container, animated = true, ...props }, ref) => {
+var AlertDialogContent = React10.forwardRef(({ className, children, container, animated = true, ...props }, ref) => {
   const hasDescription = treeContainsComponent2(children, AlertDialogDescription) || treeContainsComponent2(children, AlertDialogPrimitive.Description);
   return /* @__PURE__ */ jsxs7(AlertDialogPortal, { container, children: [
     /* @__PURE__ */ jsx12(AlertDialogOverlay, {}),
@@ -1114,7 +1243,7 @@ var AlertDialogFooter = ({
   }
 );
 AlertDialogFooter.displayName = "AlertDialogFooter";
-var AlertDialogTitle = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx12(
+var AlertDialogTitle = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx12(
   AlertDialogPrimitive.Title,
   {
     ref,
@@ -1124,7 +1253,7 @@ var AlertDialogTitle = React9.forwardRef(({ className, ...props }, ref) => /* @_
   }
 ));
 AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
-var AlertDialogAction = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx12(
+var AlertDialogAction = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx12(
   AlertDialogPrimitive.Action,
   {
     ref,
@@ -1134,7 +1263,7 @@ var AlertDialogAction = React9.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
-var AlertDialogCancel = React9.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx12(
+var AlertDialogCancel = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx12(
   AlertDialogPrimitive.Cancel,
   {
     ref,
@@ -1200,14 +1329,14 @@ function DragCursorMonitor({
 
 // src/avatar.tsx
 import * as AvatarPrimitive from "@radix-ui/react-avatar";
-import * as React10 from "react";
+import * as React11 from "react";
 import { jsx as jsx13 } from "react/jsx-runtime";
 var AVATAR_SIZES = {
   sm: "h-8 w-8 text-[11px]",
   md: "h-9 w-9 text-xs",
   lg: "h-10 w-10 text-sm"
 };
-var Avatar = React10.forwardRef(({ className, size = "lg", ...props }, ref) => /* @__PURE__ */ jsx13(
+var Avatar = React11.forwardRef(({ className, size = "lg", ...props }, ref) => /* @__PURE__ */ jsx13(
   AvatarPrimitive.Root,
   {
     ref,
@@ -1221,7 +1350,7 @@ var Avatar = React10.forwardRef(({ className, size = "lg", ...props }, ref) => /
   }
 ));
 Avatar.displayName = AvatarPrimitive.Root.displayName;
-var AvatarImage = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx13(
+var AvatarImage = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx13(
   AvatarPrimitive.Image,
   {
     ref,
@@ -1231,7 +1360,7 @@ var AvatarImage = React10.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 AvatarImage.displayName = AvatarPrimitive.Image.displayName;
-var AvatarFallback = React10.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx13(
+var AvatarFallback = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx13(
   AvatarPrimitive.Fallback,
   {
     ref,
@@ -1246,7 +1375,7 @@ var AvatarFallback = React10.forwardRef(({ className, ...props }, ref) => /* @__
 AvatarFallback.displayName = AvatarPrimitive.Fallback.displayName;
 
 // src/card.tsx
-import * as React11 from "react";
+import * as React12 from "react";
 import { jsx as jsx14 } from "react/jsx-runtime";
 var CARD_SIZES = {
   sm: {
@@ -1265,11 +1394,11 @@ var CARD_SIZES = {
     padTopless: "p-6 pt-0"
   }
 };
-var CardSizeContext = React11.createContext("md");
+var CardSizeContext = React12.createContext("md");
 function useCardSize() {
-  return React11.useContext(CardSizeContext);
+  return React12.useContext(CardSizeContext);
 }
-var Card = React11.forwardRef(
+var Card = React12.forwardRef(
   ({ className, size = "md", ...props }, ref) => /* @__PURE__ */ jsx14(CardSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx14(
     "div",
     {
@@ -1282,7 +1411,7 @@ var Card = React11.forwardRef(
   ) })
 );
 Card.displayName = "Card";
-var CardHeader = React11.forwardRef(({ className, ...props }, ref) => {
+var CardHeader = React12.forwardRef(({ className, ...props }, ref) => {
   const size = useCardSize();
   return /* @__PURE__ */ jsx14(
     "div",
@@ -1299,7 +1428,7 @@ var CardHeader = React11.forwardRef(({ className, ...props }, ref) => {
   );
 });
 CardHeader.displayName = "CardHeader";
-var CardTitle = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx14(
+var CardTitle = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx14(
   "h3",
   {
     ref,
@@ -1309,7 +1438,7 @@ var CardTitle = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 CardTitle.displayName = "CardTitle";
-var CardDescription = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx14(
+var CardDescription = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx14(
   "p",
   {
     ref,
@@ -1319,7 +1448,7 @@ var CardDescription = React11.forwardRef(({ className, ...props }, ref) => /* @_
   }
 ));
 CardDescription.displayName = "CardDescription";
-var CardAction = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx14(
+var CardAction = React12.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx14(
   "div",
   {
     ref,
@@ -1329,7 +1458,7 @@ var CardAction = React11.forwardRef(({ className, ...props }, ref) => /* @__PURE
   }
 ));
 CardAction.displayName = "CardAction";
-var CardContent = React11.forwardRef(({ className, ...props }, ref) => {
+var CardContent = React12.forwardRef(({ className, ...props }, ref) => {
   const size = useCardSize();
   return /* @__PURE__ */ jsx14(
     "div",
@@ -1342,7 +1471,7 @@ var CardContent = React11.forwardRef(({ className, ...props }, ref) => {
   );
 });
 CardContent.displayName = "CardContent";
-var CardFooter = React11.forwardRef(({ className, ...props }, ref) => {
+var CardFooter = React12.forwardRef(({ className, ...props }, ref) => {
   const size = useCardSize();
   return /* @__PURE__ */ jsx14(
     "div",
@@ -1362,13 +1491,13 @@ CardFooter.displayName = "CardFooter";
 
 // src/checkbox.tsx
 import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
-import * as React12 from "react";
+import * as React13 from "react";
 import { jsx as jsx15 } from "react/jsx-runtime";
 var CHECKBOX_SIZES = {
   sm: { root: "h-3.5 w-3.5 rounded-xs", glyph: "h-3 w-3" },
   md: { root: "h-4 w-4 rounded-sm", glyph: "h-3.5 w-3.5" }
 };
-var Checkbox = React12.forwardRef(({ className, size = "md", ...props }, ref) => /* @__PURE__ */ jsx15(
+var Checkbox = React13.forwardRef(({ className, size = "md", ...props }, ref) => /* @__PURE__ */ jsx15(
   CheckboxPrimitive.Root,
   {
     ref,
@@ -1393,11 +1522,11 @@ Checkbox.displayName = CheckboxPrimitive.Root.displayName;
 
 // src/collapsible.tsx
 import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
-import * as React13 from "react";
+import * as React14 from "react";
 import { jsx as jsx16 } from "react/jsx-runtime";
 var Collapsible = CollapsiblePrimitive.Root;
 var CollapsibleTrigger2 = CollapsiblePrimitive.CollapsibleTrigger;
-var CollapsibleContent2 = React13.forwardRef(({ className, animated = true, ...props }, ref) => /* @__PURE__ */ jsx16(
+var CollapsibleContent2 = React14.forwardRef(({ className, animated = true, ...props }, ref) => /* @__PURE__ */ jsx16(
   CollapsiblePrimitive.CollapsibleContent,
   {
     ref,
@@ -1414,14 +1543,14 @@ CollapsibleContent2.displayName = "CollapsibleContent";
 // src/command.tsx
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { Command as CommandPrimitive } from "cmdk";
-import * as React14 from "react";
+import * as React15 from "react";
 
 // src/use-is-mobile.ts
 import { MOBILE_BREAKPOINT, useIsMobile } from "@ai-matrx/kit/media-query";
 
 // src/command.tsx
 import { jsx as jsx17, jsxs as jsxs8 } from "react/jsx-runtime";
-var Command = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx17(
+var Command = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx17(
   CommandPrimitive,
   {
     ref,
@@ -1436,7 +1565,7 @@ Command.displayName = CommandPrimitive.displayName;
 var DIALOG_DESKTOP_CLASSES = `fixed left-[50%] top-[50%] z-[10000] grid min-w-0 w-full max-w-lg ${CENTERED_DIALOG} gap-4 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_CLASSES = "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] translate-x-0 translate-y-0 gap-4 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_OVERRIDE = "inset-x-0 bottom-0 left-0 right-0 top-auto translate-x-0 translate-y-0 w-full max-w-full max-h-[90dvh] rounded-b-none rounded-t-2xl overflow-y-auto";
-var CommandDialogContent = React14.forwardRef(({ className, children, container, onInteractOutside, ...props }, ref) => {
+var CommandDialogContent = React15.forwardRef(({ className, children, container, onInteractOutside, ...props }, ref) => {
   const isMobile = useIsMobile();
   const isModal = useRadixDialogModal();
   useModalLayer(isModal);
@@ -1496,7 +1625,7 @@ var CommandDialog = ({
     }
   ) }) });
 };
-var CommandInput = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs8("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [
+var CommandInput = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsxs8("div", { className: "flex items-center border-b px-3", "cmdk-input-wrapper": "", children: [
   /* @__PURE__ */ jsx17(MagnifyingGlassIcon, { className: "mr-2 h-4 w-4 shrink-0 opacity-50" }),
   /* @__PURE__ */ jsx17(
     CommandPrimitive.Input,
@@ -1511,7 +1640,7 @@ var CommandInput = React14.forwardRef(({ className, ...props }, ref) => /* @__PU
   )
 ] }));
 CommandInput.displayName = CommandPrimitive.Input.displayName;
-var CommandList = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx17(
+var CommandList = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx17(
   CommandPrimitive.List,
   {
     ref,
@@ -1520,7 +1649,7 @@ var CommandList = React14.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 CommandList.displayName = CommandPrimitive.List.displayName;
-var CommandEmpty = React14.forwardRef((props, ref) => /* @__PURE__ */ jsx17(
+var CommandEmpty = React15.forwardRef((props, ref) => /* @__PURE__ */ jsx17(
   CommandPrimitive.Empty,
   {
     ref,
@@ -1529,7 +1658,7 @@ var CommandEmpty = React14.forwardRef((props, ref) => /* @__PURE__ */ jsx17(
   }
 ));
 CommandEmpty.displayName = CommandPrimitive.Empty.displayName;
-var CommandGroup = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx17(
+var CommandGroup = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx17(
   CommandPrimitive.Group,
   {
     ref,
@@ -1541,7 +1670,7 @@ var CommandGroup = React14.forwardRef(({ className, ...props }, ref) => /* @__PU
   }
 ));
 CommandGroup.displayName = CommandPrimitive.Group.displayName;
-var CommandSeparator = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx17(
+var CommandSeparator = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx17(
   CommandPrimitive.Separator,
   {
     ref,
@@ -1550,7 +1679,7 @@ var CommandSeparator = React14.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 CommandSeparator.displayName = CommandPrimitive.Separator.displayName;
-var CommandItem = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx17(
+var CommandItem = React15.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx17(
   CommandPrimitive.Item,
   {
     ref,
@@ -1640,13 +1769,13 @@ function ConfirmDialog({
 // src/confirm-host.tsx
 import { confirmOpener } from "@ai-matrx/kit/confirm-opener";
 import { useOpenerHost } from "@ai-matrx/kit/opener-react";
-import * as React15 from "react";
+import * as React16 from "react";
 import { jsx as jsx19 } from "react/jsx-runtime";
 function ConfirmDialogHost() {
   const { shown, open, settle } = useOpenerHost(confirmOpener);
-  const [readyFor, setReadyFor] = React15.useState(null);
+  const [readyFor, setReadyFor] = React16.useState(null);
   const ready = shown?.ready;
-  React15.useEffect(() => {
+  React16.useEffect(() => {
     if (!shown || !ready) return void 0;
     let live = true;
     const release = () => {
@@ -1658,8 +1787,8 @@ function ConfirmDialogHost() {
     };
   }, [shown, ready]);
   const held = !!ready && readyFor !== shown;
-  const handleConfirm = React15.useCallback(() => settle(true), [settle]);
-  const handleOpenChange = React15.useCallback(
+  const handleConfirm = React16.useCallback(() => settle(true), [settle]);
+  const handleOpenChange = React16.useCallback(
     (next) => {
       if (!next) settle(false);
     },
@@ -1683,10 +1812,10 @@ function ConfirmDialogHost() {
 
 // src/context-menu.tsx
 import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
-import * as React18 from "react";
+import * as React19 from "react";
 
 // src/menu-scroll-edges.tsx
-import * as React16 from "react";
+import * as React17 from "react";
 
 // src/use-scroll-fade.ts
 import { useCallback as useCallback2, useEffect as useEffect3, useRef, useState as useState3 } from "react";
@@ -1755,13 +1884,13 @@ function composeRefs(...refs) {
   };
 }
 function MenuScrollEdge({ side, scroller }) {
-  const frame = React16.useRef(null);
+  const frame = React17.useRef(null);
   const dir = side === "top" ? -1 : 1;
-  const stop = React16.useCallback(() => {
+  const stop = React17.useCallback(() => {
     if (frame.current !== null) cancelAnimationFrame(frame.current);
     frame.current = null;
   }, []);
-  const glide = React16.useCallback(() => {
+  const glide = React17.useCallback(() => {
     stop();
     let last = performance.now();
     const step = (now) => {
@@ -1773,7 +1902,7 @@ function MenuScrollEdge({ side, scroller }) {
     };
     frame.current = requestAnimationFrame(step);
   }, [dir, scroller, stop]);
-  React16.useEffect(() => stop, [stop]);
+  React17.useEffect(() => stop, [stop]);
   return /* @__PURE__ */ jsx20("div", { "aria-hidden": true, "data-menu-scroll-edge": side, className: "matrx-menu-scroll-edge", children: /* @__PURE__ */ jsx20("div", { className: "matrx-menu-scroll-fade", children: /* @__PURE__ */ jsx20(
     "div",
     {
@@ -1795,8 +1924,8 @@ function MenuScrollEdge({ side, scroller }) {
 }
 function useMenuScrollEdges(...forwarded) {
   const fade = useScrollFade();
-  const scroller = React16.useRef(null);
-  const ref = React16.useCallback(composeRefs(scroller, fade.ref, ...forwarded), [
+  const scroller = React17.useRef(null);
+  const ref = React17.useCallback(composeRefs(scroller, fade.ref, ...forwarded), [
     fade.ref,
     ...forwarded
   ]);
@@ -1809,10 +1938,10 @@ function useMenuScrollEdges(...forwarded) {
 }
 
 // src/submenu-focus.ts
-import * as React17 from "react";
+import * as React18 from "react";
 function useSubmenuSurvivesParentPanelFocus(forwardedRef, onFocusOutside) {
-  const content = React17.useRef(null);
-  const ref = React17.useCallback(
+  const content = React18.useRef(null);
+  const ref = React18.useCallback(
     (node) => {
       content.current = node;
       if (typeof forwardedRef === "function") forwardedRef(node);
@@ -1843,7 +1972,7 @@ var ContextMenuRadioGroup = ContextMenuPrimitive.RadioGroup;
 var SURFACE_CLASS = "z-[10001] min-w-[8rem] max-h-[var(--radix-context-menu-content-available-height)] overflow-y-auto overflow-x-hidden overscroll-contain rounded-md border bg-popover p-1 text-popover-foreground";
 var ITEM_CLASS = "relative flex select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:opacity-50";
 var INDICATOR_ITEM_CLASS = "relative flex 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]:opacity-50";
-var ContextMenuSubTrigger = React18.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs11(
+var ContextMenuSubTrigger = React19.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs11(
   ContextMenuPrimitive.SubTrigger,
   {
     ref,
@@ -1861,7 +1990,7 @@ var ContextMenuSubTrigger = React18.forwardRef(({ className, inset, children, ..
   }
 ));
 ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
-var ContextMenuSubContent = React18.forwardRef(({ className, container, onFocusOutside, children, ...props }, ref) => {
+var ContextMenuSubContent = React19.forwardRef(({ className, container, onFocusOutside, children, ...props }, ref) => {
   const portalContainer = usePortalContainer(container);
   const keep = useSubmenuSurvivesParentPanelFocus(ref, onFocusOutside);
   const edges = useMenuScrollEdges(keep.ref);
@@ -1878,7 +2007,7 @@ var ContextMenuSubContent = React18.forwardRef(({ className, container, onFocusO
   ) });
 });
 ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
-var ContextMenuContent = React18.forwardRef(({ className, container, children, ...props }, ref) => {
+var ContextMenuContent = React19.forwardRef(({ className, container, children, ...props }, ref) => {
   const portalContainer = usePortalContainer(container);
   const edges = useMenuScrollEdges(ref);
   return /* @__PURE__ */ jsx21(ContextMenuPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx21(
@@ -1893,7 +2022,7 @@ var ContextMenuContent = React18.forwardRef(({ className, container, children, .
   ) });
 });
 ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
-var ContextMenuItem = React18.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx21(
+var ContextMenuItem = React19.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx21(
   ContextMenuPrimitive.Item,
   {
     ref,
@@ -1908,7 +2037,7 @@ var ContextMenuItem = React18.forwardRef(({ className, inset, ...props }, ref) =
   }
 ));
 ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
-var ContextMenuCheckboxItem = React18.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs11(
+var ContextMenuCheckboxItem = React19.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs11(
   ContextMenuPrimitive.CheckboxItem,
   {
     ref,
@@ -1922,7 +2051,7 @@ var ContextMenuCheckboxItem = React18.forwardRef(({ className, children, ...prop
   }
 ));
 ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
-var ContextMenuRadioItem = React18.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs11(
+var ContextMenuRadioItem = React19.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs11(
   ContextMenuPrimitive.RadioItem,
   {
     ref,
@@ -1936,7 +2065,7 @@ var ContextMenuRadioItem = React18.forwardRef(({ className, children, ...props }
   }
 ));
 ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
-var ContextMenuLabel = React18.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx21(
+var ContextMenuLabel = React19.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx21(
   ContextMenuPrimitive.Label,
   {
     ref,
@@ -1950,7 +2079,7 @@ var ContextMenuLabel = React18.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
-var ContextMenuSeparator = React18.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx21(
+var ContextMenuSeparator = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx21(
   ContextMenuPrimitive.Separator,
   {
     ref,
@@ -1976,7 +2105,7 @@ ContextMenuShortcut.displayName = "ContextMenuShortcut";
 // src/select.tsx
 import * as SelectPrimitive from "@radix-ui/react-select";
 import { cva as cva4 } from "class-variance-authority";
-import * as React19 from "react";
+import * as React20 from "react";
 
 // src/field-surface.ts
 var FIELD_SURFACE_CLASS = "border border-border bg-card";
@@ -2011,7 +2140,7 @@ function SelectChevron({ className, size = "default" }) {
     }
   );
 }
-var SelectTrigger = React19.forwardRef(({ className, children, hideArrow = false, size, ...props }, ref) => /* @__PURE__ */ jsxs12(
+var SelectTrigger = React20.forwardRef(({ className, children, hideArrow = false, size, ...props }, ref) => /* @__PURE__ */ jsxs12(
   SelectPrimitive.Trigger,
   {
     ref,
@@ -2024,7 +2153,7 @@ var SelectTrigger = React19.forwardRef(({ className, children, hideArrow = false
   }
 ));
 SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
-var SelectScrollUpButton = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx22(
+var SelectScrollUpButton = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx22(
   SelectPrimitive.ScrollUpButton,
   {
     ref,
@@ -2037,7 +2166,7 @@ var SelectScrollUpButton = React19.forwardRef(({ className, ...props }, ref) =>
   }
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
-var SelectScrollDownButton = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx22(
+var SelectScrollDownButton = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx22(
   SelectPrimitive.ScrollDownButton,
   {
     ref,
@@ -2050,7 +2179,7 @@ var SelectScrollDownButton = React19.forwardRef(({ className, ...props }, ref) =
   }
 ));
 SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
-var SelectContent = React19.forwardRef(
+var SelectContent = React20.forwardRef(
   ({
     className,
     children,
@@ -2096,7 +2225,7 @@ var SelectContent = React19.forwardRef(
   }
 );
 SelectContent.displayName = SelectPrimitive.Content.displayName;
-var SelectLabel = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx22(
+var SelectLabel = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx22(
   SelectPrimitive.Label,
   {
     ref,
@@ -2105,7 +2234,7 @@ var SelectLabel = React19.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 SelectLabel.displayName = SelectPrimitive.Label.displayName;
-var SelectItem = React19.forwardRef(({ className, children, description, ...props }, ref) => /* @__PURE__ */ jsxs12(
+var SelectItem = React20.forwardRef(({ className, children, description, ...props }, ref) => /* @__PURE__ */ jsxs12(
   SelectPrimitive.Item,
   {
     ref,
@@ -2123,7 +2252,7 @@ var SelectItem = React19.forwardRef(({ className, children, description, ...prop
   }
 ));
 SelectItem.displayName = SelectPrimitive.Item.displayName;
-var SelectSeparator = React19.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx22(
+var SelectSeparator = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx22(
   SelectPrimitive.Separator,
   {
     ref,
@@ -2141,12 +2270,12 @@ import {
 
 // src/popover.tsx
 import * as PopoverPrimitive from "@radix-ui/react-popover";
-import * as React20 from "react";
+import * as React21 from "react";
 import { jsx as jsx23 } from "react/jsx-runtime";
 var Popover = PopoverPrimitive.Root;
 var PopoverTrigger = PopoverPrimitive.Trigger;
 var PopoverAnchor = PopoverPrimitive.Anchor;
-var PopoverContent = React20.forwardRef(
+var PopoverContent = React21.forwardRef(
   ({
     className,
     align = "center",
@@ -2425,7 +2554,7 @@ function CreatablePicker({
 import * as DialogPrimitive2 from "@radix-ui/react-dialog";
 import * as VisuallyHidden2 from "@radix-ui/react-visually-hidden";
 import { treeContainsComponent as treeContainsComponent3 } from "@ai-matrx/kit/react-tree";
-import * as React21 from "react";
+import * as React22 from "react";
 
 // src/layer-front.ts
 var LAYER_FRONT_EVENT = "matrx:layer-front";
@@ -2438,7 +2567,7 @@ function announceLayerFront(element) {
 
 // src/dialog.tsx
 import { jsx as jsx25, jsxs as jsxs14 } from "react/jsx-runtime";
-var DialogWindowedByDefaultContext = React21.createContext(false);
+var DialogWindowedByDefaultContext = React22.createContext(false);
 var Dialog = ({
   children,
   ...props
@@ -2460,9 +2589,9 @@ var DialogPortal = ({
 DialogPortal.displayName = "DialogPortal";
 var CONTEXT_SLOT3 = /* @__PURE__ */ Symbol.for("ai-matrx.design-system.dialog-container-context");
 var contextRegistry3 = globalThis;
-var DialogContainerContext = contextRegistry3[CONTEXT_SLOT3] ??= React21.createContext(null);
-var useDialogContainer = () => React21.useContext(DialogContainerContext);
-var DialogOverlay = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx25(
+var DialogContainerContext = contextRegistry3[CONTEXT_SLOT3] ??= React22.createContext(null);
+var useDialogContainer = () => React22.useContext(DialogContainerContext);
+var DialogOverlay = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx25(
   DialogPrimitive2.Overlay,
   {
     ref,
@@ -2478,7 +2607,7 @@ var DialogOverlay = React21.forwardRef(({ className, ...props }, ref) => /* @__P
   }
 ));
 DialogOverlay.displayName = DialogPrimitive2.Overlay.displayName;
-var DialogContentPrimitive = React21.forwardRef(({ onInteractOutside, ...props }, ref) => {
+var DialogContentPrimitive = React22.forwardRef(({ onInteractOutside, ...props }, ref) => {
   const isModal = useRadixDialogModal();
   useModalLayer(isModal);
   return /* @__PURE__ */ jsx25(
@@ -2495,12 +2624,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 = React21.createContext(null);
+var DialogWindowHandleContext = React22.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 = React21.forwardRef(
+var DialogContent = React22.forwardRef(
   ({
     className,
     children,
@@ -2521,13 +2650,13 @@ var DialogContent = React21.forwardRef(
     const injectedContainer = usePortalContainer(container);
     const asSheet = mobileSheet && isMobile;
     const windowed = !isModal && !asSheet;
-    const windowedByDefault = React21.useContext(DialogWindowedByDefaultContext);
-    const [containerEl, setContainerEl] = React21.useState(
+    const windowedByDefault = React22.useContext(DialogWindowedByDefaultContext);
+    const [containerEl, setContainerEl] = React22.useState(
       null
     );
     const stacks = windowed && windowedByDefault;
-    const [behind, setBehind] = React21.useState(false);
-    React21.useEffect(() => {
+    const [behind, setBehind] = React22.useState(false);
+    React22.useEffect(() => {
       if (!stacks || !containerEl) return;
       const onFront = (event) => {
         const element = event.detail?.element ?? null;
@@ -2543,9 +2672,9 @@ var DialogContent = React21.forwardRef(
       setBehind(false);
       announceLayerFront(containerEl);
     };
-    const [offset, setOffset] = React21.useState({ x: 0, y: 0 });
-    const dragRef = React21.useRef(null);
-    const handle = React21.useMemo(() => {
+    const [offset, setOffset] = React22.useState({ x: 0, y: 0 });
+    const dragRef = React22.useRef(null);
+    const handle = React22.useMemo(() => {
       if (!windowed) return null;
       const clamp = (value, limit) => Math.max(-limit, Math.min(limit, value));
       return {
@@ -2573,7 +2702,7 @@ var DialogContent = React21.forwardRef(
         onDoubleClick: () => setOffset({ x: 0, y: 0 })
       };
     }, [windowed, offset.x, offset.y]);
-    const mergedRef = React21.useCallback(
+    const mergedRef = React22.useCallback(
       (node) => {
         setContainerEl(node);
         if (typeof ref === "function") ref(node);
@@ -2660,7 +2789,7 @@ var DialogHeader = ({
   className,
   ...props
 }) => {
-  const handle = React21.useContext(DialogWindowHandleContext);
+  const handle = React22.useContext(DialogWindowHandleContext);
   return /* @__PURE__ */ jsx25(
     "div",
     {
@@ -2717,7 +2846,7 @@ var DialogFooter = ({
   }
 );
 DialogFooter.displayName = "DialogFooter";
-var DialogTitle = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx25(
+var DialogTitle = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx25(
   DialogPrimitive2.Title,
   {
     ref,
@@ -2727,7 +2856,7 @@ var DialogTitle = React21.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 DialogTitle.displayName = DialogPrimitive2.Title.displayName;
-var DialogDescription = React21.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx25(
+var DialogDescription = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx25(
   DialogPrimitive2.Description,
   {
     ref,
@@ -2740,7 +2869,7 @@ DialogDescription.displayName = DialogPrimitive2.Description.displayName;
 
 // src/dropdown-menu.tsx
 import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
-import * as React22 from "react";
+import * as React23 from "react";
 import { jsx as jsx26, jsxs as jsxs15 } from "react/jsx-runtime";
 var DropdownMenu = DropdownMenuPrimitive.Root;
 var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
@@ -2751,7 +2880,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 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]:opacity-50";
 var MENU_INDICATOR_ITEM_CLASS = "relative flex 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]:opacity-50";
-var DropdownMenuSubTrigger = React22.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs15(
+var DropdownMenuSubTrigger = React23.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ jsxs15(
   DropdownMenuPrimitive.SubTrigger,
   {
     ref,
@@ -2769,7 +2898,7 @@ var DropdownMenuSubTrigger = React22.forwardRef(({ className, inset, children, .
   }
 ));
 DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
-var DropdownMenuSubContent = React22.forwardRef(({ className, container, sideOffset = 2, alignOffset = -4, collisionPadding = 8, onFocusOutside, children, ...props }, ref) => {
+var DropdownMenuSubContent = React23.forwardRef(({ className, container, sideOffset = 2, alignOffset = -4, collisionPadding = 8, onFocusOutside, children, ...props }, ref) => {
   const portalContainer = usePortalContainer(container);
   const keep = useSubmenuSurvivesParentPanelFocus(ref, onFocusOutside);
   const edges = useMenuScrollEdges(keep.ref);
@@ -2789,7 +2918,7 @@ var DropdownMenuSubContent = React22.forwardRef(({ className, container, sideOff
   ) });
 });
 DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
-var DropdownMenuContent = React22.forwardRef(({ className, sideOffset = 4, container, children, ...props }, ref) => {
+var DropdownMenuContent = React23.forwardRef(({ className, sideOffset = 4, container, children, ...props }, ref) => {
   const portalContainer = usePortalContainer(container);
   const edges = useMenuScrollEdges(ref);
   return /* @__PURE__ */ jsx26(DropdownMenuPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx26(
@@ -2811,7 +2940,7 @@ var DropdownMenuContent = React22.forwardRef(({ className, sideOffset = 4, conta
   ) });
 });
 DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
-var DropdownMenuItem = React22.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx26(
+var DropdownMenuItem = React23.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx26(
   DropdownMenuPrimitive.Item,
   {
     ref,
@@ -2821,7 +2950,7 @@ var DropdownMenuItem = React22.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
-var DropdownMenuCheckboxItem = React22.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs15(
+var DropdownMenuCheckboxItem = React23.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs15(
   DropdownMenuPrimitive.CheckboxItem,
   {
     ref,
@@ -2835,7 +2964,7 @@ var DropdownMenuCheckboxItem = React22.forwardRef(({ className, children, ...pro
   }
 ));
 DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
-var DropdownMenuRadioItem = React22.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs15(
+var DropdownMenuRadioItem = React23.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs15(
   DropdownMenuPrimitive.RadioItem,
   {
     ref,
@@ -2849,7 +2978,7 @@ var DropdownMenuRadioItem = React22.forwardRef(({ className, children, ...props
   }
 ));
 DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
-var DropdownMenuLabel = React22.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx26(
+var DropdownMenuLabel = React23.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx26(
   DropdownMenuPrimitive.Label,
   {
     ref,
@@ -2859,7 +2988,7 @@ var DropdownMenuLabel = React22.forwardRef(({ className, inset, ...props }, ref)
   }
 ));
 DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
-var DropdownMenuSeparator = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx26(
+var DropdownMenuSeparator = React23.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx26(
   DropdownMenuPrimitive.Separator,
   {
     ref,
@@ -3071,7 +3200,7 @@ function EditableLabel({
 }
 
 // src/input.tsx
-import * as React23 from "react";
+import * as React24 from "react";
 import { jsx as jsx28, jsxs as jsxs17 } from "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
@@ -3100,7 +3229,7 @@ var getVariantStyles = (variant = "default") => {
       return baseStyles;
   }
 };
-var Input = React23.forwardRef(
+var Input = React24.forwardRef(
   ({ className, type, variant = "default", ...props }, ref) => {
     return /* @__PURE__ */ jsx28(
       "input",
@@ -3114,7 +3243,7 @@ var Input = React23.forwardRef(
   }
 );
 Input.displayName = "Input";
-var EnterInput = React23.forwardRef(
+var EnterInput = React24.forwardRef(
   ({ onEnter, ...props }, ref) => {
     const handleKeyDown = (e) => {
       if (e.key === "Enter" && onEnter) {
@@ -3138,7 +3267,7 @@ var EnterInput = React23.forwardRef(
   }
 );
 EnterInput.displayName = "EnterInput";
-var BasicInput = React23.forwardRef(
+var BasicInput = React24.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) => {
@@ -3157,7 +3286,7 @@ var BasicInput = React23.forwardRef(
   }
 );
 BasicInput.displayName = "BasicInput";
-var InputWithPrefix = React23.forwardRef(({ prefix, className, wrapperClassName, ...props }, ref) => {
+var InputWithPrefix = React24.forwardRef(({ prefix, className, wrapperClassName, ...props }, ref) => {
   return /* @__PURE__ */ jsxs17("div", { className: cn("relative", wrapperClassName), children: [
     prefix && /* @__PURE__ */ jsx28("div", { className: "absolute left-3 top-1/2 -translate-y-1/2 text-muted-foreground", children: prefix }),
     /* @__PURE__ */ jsx28(
@@ -3174,9 +3303,9 @@ InputWithPrefix.displayName = "InputWithPrefix";
 
 // src/label.tsx
 import * as LabelPrimitive from "@radix-ui/react-label";
-import * as React24 from "react";
+import * as React25 from "react";
 import { jsx as jsx29 } from "react/jsx-runtime";
-var Label4 = React24.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx29(
+var Label4 = React25.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx29(
   LabelPrimitive.Root,
   {
     ref,
@@ -3354,7 +3483,7 @@ function OverflowToolbar({
 
 // src/progress.tsx
 import * as ProgressPrimitive from "@radix-ui/react-progress";
-import * as React26 from "react";
+import * as React27 from "react";
 import { jsx as jsx31 } from "react/jsx-runtime";
 var PROGRESS_TONES = {
   default: "bg-primary",
@@ -3362,7 +3491,7 @@ var PROGRESS_TONES = {
   warning: "bg-warning",
   destructive: "bg-destructive"
 };
-var Progress = React26.forwardRef(({ className, tone = "default", indicatorClassName, ...props }, ref) => {
+var Progress = React27.forwardRef(({ className, tone = "default", indicatorClassName, ...props }, ref) => {
   const { value, max } = props;
   const ceiling = max ?? 100;
   const isIndeterminate = value === null || value === void 0;
@@ -3399,9 +3528,9 @@ Progress.displayName = ProgressPrimitive.Root.displayName;
 
 // src/scroll-area.tsx
 import * as ScrollAreaPrimitive from "@radix-ui/react-scroll-area";
-import * as React27 from "react";
+import * as React28 from "react";
 import { jsx as jsx32, jsxs as jsxs19 } from "react/jsx-runtime";
-var ScrollArea = React27.forwardRef(
+var ScrollArea = React28.forwardRef(
   ({
     className,
     children,
@@ -3434,7 +3563,7 @@ var ScrollArea = React27.forwardRef(
   )
 );
 ScrollArea.displayName = ScrollAreaPrimitive.Root.displayName;
-var ScrollBar = React27.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx32(
+var ScrollBar = React28.forwardRef(({ className, orientation = "vertical", ...props }, ref) => /* @__PURE__ */ jsx32(
   ScrollAreaPrimitive.ScrollAreaScrollbar,
   {
     ref,
@@ -3603,7 +3732,7 @@ function SegmentedControl({
 }
 
 // src/archive-filter.tsx
-import * as React28 from "react";
+import * as React29 from "react";
 import { jsx as jsx35, jsxs as jsxs21 } from "react/jsx-runtime";
 var ARCHIVE_FILTER_VALUES = ["active", "archived", "all"];
 var DEFAULT_ARCHIVE_FILTER = "active";
@@ -3629,7 +3758,7 @@ function ArchiveFilter({
   "aria-label": ariaLabel = "Archive filter",
   disabled = false
 }) {
-  const data = React28.useMemo(
+  const data = React29.useMemo(
     () => ARCHIVE_FILTER_VALUES.map((state) => {
       const text = labels?.[state] ?? ARCHIVE_FILTER_LABELS[state];
       const count = counts?.[state];
@@ -3692,9 +3821,9 @@ function ArchivedDisclosure({
 
 // src/separator.tsx
 import * as SeparatorPrimitive from "@radix-ui/react-separator";
-import * as React29 from "react";
+import * as React30 from "react";
 import { jsx as jsx37 } from "react/jsx-runtime";
-var Separator4 = React29.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx37(
+var Separator4 = React30.forwardRef(({ className, orientation = "horizontal", decorative = true, ...props }, ref) => /* @__PURE__ */ jsx37(
   SeparatorPrimitive.Root,
   {
     ref,
@@ -3714,9 +3843,9 @@ Separator4.displayName = SeparatorPrimitive.Root.displayName;
 import * as SheetPrimitive from "@radix-ui/react-dialog";
 import { treeContainsComponent as treeContainsComponent4 } from "@ai-matrx/kit/react-tree";
 import { cva as cva5 } from "class-variance-authority";
-import * as React30 from "react";
+import * as React31 from "react";
 import { jsx as jsx38, jsxs as jsxs23 } from "react/jsx-runtime";
-var SheetContentBase = React30.forwardRef(({ onInteractOutside, ...props }, ref) => {
+var SheetContentBase = React31.forwardRef(({ onInteractOutside, ...props }, ref) => {
   const isModal = useRadixDialogModal();
   useModalLayer(isModal);
   return /* @__PURE__ */ jsx38(
@@ -3730,7 +3859,7 @@ var SheetContentBase = React30.forwardRef(({ onInteractOutside, ...props }, ref)
   );
 });
 SheetContentBase.displayName = "SheetContentBase";
-var Sheet = React30.forwardRef(({ children, ...props }, _ref) => {
+var Sheet = React31.forwardRef(({ children, ...props }, _ref) => {
   const modal = props.modal ?? true;
   return /* @__PURE__ */ jsx38(RadixDialogModalProvider, { modal, children: /* @__PURE__ */ jsx38(SheetPrimitive.Root, { ...props, modal, children }) });
 });
@@ -3738,7 +3867,7 @@ Sheet.displayName = "Sheet";
 var SheetTrigger = SheetPrimitive.Trigger;
 var SheetClose = SheetPrimitive.Close;
 var SheetPortal = SheetPrimitive.Portal;
-var SheetOverlay = React30.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx38(
+var SheetOverlay = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx38(
   SheetPrimitive.Overlay,
   {
     className: cn(
@@ -3777,7 +3906,7 @@ var sheetVariants = cva5(
     }
   }
 );
-var SheetDescription = React30.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx38(
+var SheetDescription = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx38(
   SheetPrimitive.Description,
   {
     ref,
@@ -3786,7 +3915,7 @@ var SheetDescription = React30.forwardRef(({ className, ...props }, ref) => /* @
   }
 ));
 SheetDescription.displayName = SheetPrimitive.Description.displayName;
-var SheetContent = React30.forwardRef(
+var SheetContent = React31.forwardRef(
   ({
     side = "right",
     className,
@@ -3857,7 +3986,7 @@ var SheetFooter = ({
   }
 );
 SheetFooter.displayName = "SheetFooter";
-var SheetTitle = React30.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx38(
+var SheetTitle = React31.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx38(
   SheetPrimitive.Title,
   {
     ref,
@@ -3868,7 +3997,7 @@ var SheetTitle = React30.forwardRef(({ className, ...props }, ref) => /* @__PURE
 SheetTitle.displayName = SheetPrimitive.Title.displayName;
 
 // src/organization-picker.tsx
-import * as React31 from "react";
+import * as React32 from "react";
 
 // src/skeleton.tsx
 import { jsx as jsx39 } from "react/jsx-runtime";
@@ -3956,9 +4085,9 @@ function OrganizationPicker({
   foldedLabel = "More",
   className
 }) {
-  const [query, setQuery] = React31.useState("");
-  const [showFixtures, setShowFixtures] = React31.useState(false);
-  const [showFolded, setShowFolded] = React31.useState(false);
+  const [query, setQuery] = React32.useState("");
+  const [showFixtures, setShowFixtures] = React32.useState(false);
+  const [showFolded, setShowFolded] = React32.useState(false);
   const favorites = new Set(favoriteOrganizationIds);
   const isFavorite = (id) => favorites.has(id);
   const rank = (org) => isFavorite(org.id) ? 0 : org.isOwn ? 1 : 2;
@@ -4158,11 +4287,11 @@ function OrganizationPicker({
 // src/sidebar.tsx
 import { Slot as Slot3 } from "@radix-ui/react-slot";
 import { cva as cva6 } from "class-variance-authority";
-import * as React33 from "react";
+import * as React34 from "react";
 
 // src/tooltip.tsx
 import * as TooltipPrimitive from "@radix-ui/react-tooltip";
-import * as React32 from "react";
+import * as React33 from "react";
 
 // src/title-tooltips.ts
 var TITLE_TOOLTIP_ATTR = "data-matrx-title";
@@ -4221,7 +4350,7 @@ function install(doc) {
     if (el.closest(`[${NATIVE_TITLE_OPT_OUT_ATTR}]`)) return null;
     return el;
   };
-  const textOf = (el) => (el.getAttribute(TITLE_TOOLTIP_ATTR) ?? el.getAttribute("title") ?? "").trim();
+  const textOf2 = (el) => (el.getAttribute(TITLE_TOOLTIP_ATTR) ?? el.getAttribute("title") ?? "").trim();
   const lift = (el) => {
     const title = el.getAttribute("title");
     if (title === null) return;
@@ -4303,7 +4432,7 @@ function install(doc) {
   const show = (el, instant) => {
     if (active !== el) return;
     if (el.closest(`[${TOOLTIP_TRIGGER_ATTR}]`)) return;
-    const text = textOf(el);
+    const text = textOf2(el);
     if (!text || !el.isConnected) return;
     if (repeatsVisibleText(el, text)) return;
     const node = ensureSurface();
@@ -4396,16 +4525,16 @@ function install(doc) {
 // src/tooltip.tsx
 import { jsx as jsx41 } from "react/jsx-runtime";
 function TooltipProvider({ titleTooltips = true, ...props }) {
-  React32.useEffect(() => {
+  React33.useEffect(() => {
     if (!titleTooltips) return;
     return acquireTitleTooltips();
   }, [titleTooltips]);
   return /* @__PURE__ */ jsx41(TooltipPrimitive.Provider, { ...props });
 }
 var Tooltip = TooltipPrimitive.Root;
-var TooltipTrigger = React32.forwardRef((props, ref) => /* @__PURE__ */ jsx41(TooltipPrimitive.Trigger, { ref, ...{ [TOOLTIP_TRIGGER_ATTR]: "" }, ...props }));
+var TooltipTrigger = React33.forwardRef((props, ref) => /* @__PURE__ */ jsx41(TooltipPrimitive.Trigger, { ref, ...{ [TOOLTIP_TRIGGER_ATTR]: "" }, ...props }));
 TooltipTrigger.displayName = TooltipPrimitive.Trigger.displayName;
-var TooltipContent = React32.forwardRef(({ className, sideOffset = 4, container, animated = true, ...props }, ref) => {
+var TooltipContent = React33.forwardRef(({ className, sideOffset = 4, container, animated = true, ...props }, ref) => {
   const resolved = usePortalContainer(container);
   return /* @__PURE__ */ jsx41(TooltipPrimitive.Portal, { container: resolved ?? null, children: /* @__PURE__ */ jsx41(
     TooltipPrimitive.Content,
@@ -4430,9 +4559,9 @@ var SIDEBAR_WIDTH = "16rem";
 var SIDEBAR_WIDTH_MOBILE = "18rem";
 var SIDEBAR_WIDTH_ICON = "3rem";
 var SIDEBAR_KEYBOARD_SHORTCUT = "b";
-var SidebarContext = React33.createContext(null);
+var SidebarContext = React34.createContext(null);
 function useSidebar() {
-  const context = React33.useContext(SidebarContext);
+  const context = React34.useContext(SidebarContext);
   if (!context) {
     throw new Error("useSidebar must be used within a SidebarProvider.");
   }
@@ -4449,10 +4578,10 @@ function SidebarProvider({
   ...props
 }) {
   const isMobile = useIsMobile();
-  const [openMobile, setOpenMobile] = React33.useState(false);
-  const [_open, _setOpen] = React33.useState(defaultOpen);
+  const [openMobile, setOpenMobile] = React34.useState(false);
+  const [_open, _setOpen] = React34.useState(defaultOpen);
   const open = openProp ?? _open;
-  const setOpen = React33.useCallback(
+  const setOpen = React34.useCallback(
     (value) => {
       const openState = typeof value === "function" ? value(open) : value;
       if (setOpenProp) {
@@ -4463,10 +4592,10 @@ function SidebarProvider({
     },
     [setOpenProp, open]
   );
-  const toggleSidebar = React33.useCallback(() => {
+  const toggleSidebar = React34.useCallback(() => {
     return isMobile ? setOpenMobile((open2) => !open2) : setOpen((open2) => !open2);
   }, [isMobile, setOpen, setOpenMobile]);
-  React33.useEffect(() => {
+  React34.useEffect(() => {
     if (!keyboardShortcut) return;
     const handleKeyDown = (event) => {
       if (event.key === keyboardShortcut && (event.metaKey || event.ctrlKey)) {
@@ -4478,7 +4607,7 @@ function SidebarProvider({
     return () => window.removeEventListener("keydown", handleKeyDown);
   }, [keyboardShortcut, toggleSidebar]);
   const state = open ? "expanded" : "collapsed";
-  const contextValue = React33.useMemo(
+  const contextValue = React34.useMemo(
     () => ({
       state,
       open,
@@ -4926,7 +5055,7 @@ function SidebarMenuSkeleton({
   showIcon = false,
   ...props
 }) {
-  const width = React33.useMemo(() => {
+  const width = React34.useMemo(() => {
     return `${Math.floor(Math.random() * 40) + 50}%`;
   }, []);
   return /* @__PURE__ */ jsxs25(
@@ -5007,7 +5136,7 @@ function SidebarMenuSubButton({
 }
 
 // src/app-shell/app-rail.tsx
-import * as React34 from "react";
+import * as React35 from "react";
 
 // src/app-shell/status-dot.tsx
 import { jsx as jsx43 } from "react/jsx-runtime";
@@ -5063,7 +5192,7 @@ function AppRailGroup({ className, ...props }) {
 function AppRailSpacer() {
   return /* @__PURE__ */ jsx44("div", { "data-slot": "app-rail-spacer", className: "flex-1" });
 }
-var AppRailItem = React34.forwardRef(function AppRailItem2({ icon, label, shortcut, active = false, attention, attentionLabel, className, ...props }, ref) {
+var AppRailItem = React35.forwardRef(function AppRailItem2({ icon, label, shortcut, active = false, attention, attentionLabel, className, ...props }, ref) {
   return /* @__PURE__ */ jsxs26(Tooltip, { children: [
     /* @__PURE__ */ jsx44(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs26(
       "button",
@@ -5103,7 +5232,7 @@ var AppRailItem = React34.forwardRef(function AppRailItem2({ icon, label, shortc
     ] }) })
   ] });
 });
-var AppRailAvatar = React34.forwardRef(function AppRailAvatar2({ initials = "", label, className, children, ...props }, ref) {
+var AppRailAvatar = React35.forwardRef(function AppRailAvatar2({ initials = "", label, className, children, ...props }, ref) {
   return /* @__PURE__ */ jsxs26(Tooltip, { children: [
     /* @__PURE__ */ jsx44(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx44(
       "button",
@@ -5126,7 +5255,7 @@ var AppRailAvatar = React34.forwardRef(function AppRailAvatar2({ initials = "",
 });
 
 // src/app-shell/canvas.tsx
-import * as React35 from "react";
+import * as React36 from "react";
 
 // src/resizable.tsx
 import { Group as Group4, Panel, Separator as Separator5 } from "react-resizable-panels";
@@ -5193,7 +5322,7 @@ function CanvasLayout({ columns, expandedId = null, className }) {
   if (expanded) {
     return /* @__PURE__ */ jsx46("div", { "data-slot": "canvas-layout", "data-expanded": expanded.id, className: cn("flex h-full w-full", className), children: expanded.node });
   }
-  return /* @__PURE__ */ jsx46(ResizablePanelGroup, { "data-slot": "canvas-layout", orientation: "horizontal", className: cn("gap-0", className), children: visible2.map((column, ci) => /* @__PURE__ */ jsxs27(React35.Fragment, { children: [
+  return /* @__PURE__ */ jsx46(ResizablePanelGroup, { "data-slot": "canvas-layout", orientation: "horizontal", className: cn("gap-0", className), children: visible2.map((column, ci) => /* @__PURE__ */ jsxs27(React36.Fragment, { children: [
     ci > 0 ? /* @__PURE__ */ jsx46(ResizableHandle, { "data-canvas-gap": "column", size: "md", className: GAP }) : null,
     /* @__PURE__ */ jsx46(
       ResizablePanel,
@@ -5201,7 +5330,7 @@ function CanvasLayout({ columns, expandedId = null, className }) {
         id: column.id,
         minSize: column.minSize ?? 220,
         ...column.defaultSize !== void 0 ? { defaultSize: column.defaultSize } : {},
-        children: /* @__PURE__ */ jsx46(ResizablePanelGroup, { "data-canvas-column": column.id, orientation: "vertical", children: column.panels.map((panel, pi) => /* @__PURE__ */ jsxs27(React35.Fragment, { children: [
+        children: /* @__PURE__ */ jsx46(ResizablePanelGroup, { "data-canvas-column": column.id, orientation: "vertical", children: column.panels.map((panel, pi) => /* @__PURE__ */ jsxs27(React36.Fragment, { children: [
           pi > 0 ? /* @__PURE__ */ jsx46(ResizableHandle, { "data-canvas-gap": "row", size: "md", className: GAP }) : null,
           /* @__PURE__ */ jsx46(
             ResizablePanel,
@@ -5219,10 +5348,10 @@ function CanvasLayout({ columns, expandedId = null, className }) {
 }
 
 // src/app-shell/mode-switch.tsx
-import * as React36 from "react";
+import * as React37 from "react";
 import { jsx as jsx47, jsxs as jsxs28 } from "react/jsx-runtime";
 function ModeSwitch({ value, onValueChange, options, label = "Mode", className }) {
-  const refs = React36.useRef([]);
+  const refs = React37.useRef([]);
   const move = (from, delta) => {
     const next = (from + delta + options.length) % options.length;
     const option = options[next];
@@ -5285,7 +5414,7 @@ function ModeSwitch({ value, onValueChange, options, label = "Mode", className }
 
 // src/switch.tsx
 import * as SwitchPrimitives from "@radix-ui/react-switch";
-import * as React37 from "react";
+import * as React38 from "react";
 import { jsx as jsx48 } from "react/jsx-runtime";
 var SWITCH_SIZES = {
   sm: {
@@ -5297,7 +5426,7 @@ var SWITCH_SIZES = {
     thumb: "h-4 w-4 data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
   }
 };
-var Switch = React37.forwardRef(({ className, size = "md", ...props }, ref) => /* @__PURE__ */ jsx48(
+var Switch = React38.forwardRef(({ className, size = "md", ...props }, ref) => /* @__PURE__ */ jsx48(
   SwitchPrimitives.Root,
   {
     ref,
@@ -5378,17 +5507,17 @@ function TabbedBottomSheet({
 }
 
 // src/table.tsx
-import * as React38 from "react";
+import * as React39 from "react";
 import { jsx as jsx50 } from "react/jsx-runtime";
 var TABLE_SIZES = {
   sm: { head: "px-2", cell: "p-2" },
   md: { head: "px-3", cell: "p-3" }
 };
-var TableSizeContext = React38.createContext("md");
+var TableSizeContext = React39.createContext("md");
 function useTableSize() {
-  return React38.useContext(TableSizeContext);
+  return React39.useContext(TableSizeContext);
 }
-var Table = React38.forwardRef(
+var Table = React39.forwardRef(
   ({ className, size = "md", wrap = true, wrapperClassName, ...props }, ref) => {
     const table = /* @__PURE__ */ jsx50(
       "table",
@@ -5411,7 +5540,7 @@ var Table = React38.forwardRef(
   }
 );
 Table.displayName = "Table";
-var TableHeader = React38.forwardRef(({ className, sticky = false, ...props }, ref) => /* @__PURE__ */ jsx50(
+var TableHeader = React39.forwardRef(({ className, sticky = false, ...props }, ref) => /* @__PURE__ */ jsx50(
   "thead",
   {
     ref,
@@ -5425,7 +5554,7 @@ var TableHeader = React38.forwardRef(({ className, sticky = false, ...props }, r
   }
 ));
 TableHeader.displayName = "TableHeader";
-var TableBody = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx50(
+var TableBody = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx50(
   "tbody",
   {
     ref,
@@ -5435,7 +5564,7 @@ var TableBody = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE_
   }
 ));
 TableBody.displayName = "TableBody";
-var TableFooter = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx50(
+var TableFooter = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx50(
   "tfoot",
   {
     ref,
@@ -5448,7 +5577,7 @@ var TableFooter = React38.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 TableFooter.displayName = "TableFooter";
-var TableRow = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx50(
+var TableRow = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx50(
   "tr",
   {
     ref,
@@ -5461,7 +5590,7 @@ var TableRow = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 TableRow.displayName = "TableRow";
-var TableHead = React38.forwardRef(({ className, ...props }, ref) => {
+var TableHead = React39.forwardRef(({ className, ...props }, ref) => {
   const size = useTableSize();
   return /* @__PURE__ */ jsx50(
     "th",
@@ -5478,7 +5607,7 @@ var TableHead = React38.forwardRef(({ className, ...props }, ref) => {
   );
 });
 TableHead.displayName = "TableHead";
-var TableCell = React38.forwardRef(({ className, ...props }, ref) => {
+var TableCell = React39.forwardRef(({ className, ...props }, ref) => {
   const size = useTableSize();
   return /* @__PURE__ */ jsx50(
     "td",
@@ -5495,7 +5624,7 @@ var TableCell = React38.forwardRef(({ className, ...props }, ref) => {
   );
 });
 TableCell.displayName = "TableCell";
-var TableCaption = React38.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx50(
+var TableCaption = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx50(
   "caption",
   {
     ref,
@@ -5508,11 +5637,11 @@ TableCaption.displayName = "TableCaption";
 
 // src/tabs.tsx
 import * as TabsPrimitive from "@radix-ui/react-tabs";
-import * as React39 from "react";
+import * as React40 from "react";
 import { jsx as jsx51 } from "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:opacity-50 data-[state=active]:bg-background data-[state=active]:text-foreground data-[state=active]:shadow-sm";
-var TabsList = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx51(
+var TabsList = React40.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx51(
   TabsPrimitive.List,
   {
     ref,
@@ -5525,7 +5654,7 @@ var TabsList = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__
   }
 ));
 TabsList.displayName = TabsPrimitive.List.displayName;
-var TabsTrigger = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx51(
+var TabsTrigger = React40.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx51(
   TabsPrimitive.Trigger,
   {
     ref,
@@ -5539,7 +5668,7 @@ var TabsTrigger = React39.forwardRef(({ className, ...props }, ref) => /* @__PUR
   }
 ));
 TabsTrigger.displayName = TabsPrimitive.Trigger.displayName;
-var TabsTriggerCore = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx51(
+var TabsTriggerCore = React40.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx51(
   TabsPrimitive.Trigger,
   {
     ref,
@@ -5549,7 +5678,7 @@ var TabsTriggerCore = React39.forwardRef(({ className, ...props }, ref) => /* @_
   }
 ));
 TabsTriggerCore.displayName = TabsPrimitive.Trigger.displayName;
-var TabsContent = React39.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx51(
+var TabsContent = React40.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx51(
   TabsPrimitive.Content,
   {
     ref,
@@ -5565,7 +5694,7 @@ var TabsContent = React39.forwardRef(({ className, ...props }, ref) => /* @__PUR
 TabsContent.displayName = TabsPrimitive.Content.displayName;
 
 // src/textarea.tsx
-import * as React40 from "react";
+import * as React41 from "react";
 import { jsx as jsx52, jsxs as jsxs30 } from "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|$)/;
@@ -5579,7 +5708,7 @@ function getStretchClasses(className) {
 var TEXTAREA_ELEVATED_CLASS = `flex h-auto w-full rounded-md ${FIELD_SURFACE_CLASS} px-3 py-2 text-sm text-foreground shadow-textarea transition duration-400 placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-[2px] focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50`;
 var TEXTAREA_CONTROL_CLASS = `flex w-full rounded-md ${FIELD_SURFACE_CLASS} px-3 py-2 text-sm text-foreground shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50`;
 function useAutoGrow(ref, value, autoGrow = false, minHeight, maxHeight) {
-  React40.useEffect(() => {
+  React41.useEffect(() => {
     if (!autoGrow || !ref.current) return;
     const textarea = ref.current;
     textarea.style.height = "auto";
@@ -5595,8 +5724,8 @@ function useAutoGrow(ref, value, autoGrow = false, minHeight, maxHeight) {
   }, [value, autoGrow, minHeight, maxHeight, ref]);
 }
 function useMergedTextareaRef(forwarded) {
-  const internal = React40.useRef(null);
-  const callback = React40.useCallback(
+  const internal = React41.useRef(null);
+  const callback = React41.useCallback(
     (node) => {
       internal.current = node;
       if (typeof forwarded === "function") forwarded(node);
@@ -5613,7 +5742,7 @@ function boxStyle(minHeight, maxHeight) {
     maxHeight: maxHeight ? `${maxHeight}px` : void 0
   };
 }
-var Textarea = React40.forwardRef(
+var Textarea = React41.forwardRef(
   ({ className, autoGrow, minHeight, maxHeight, wrapperClassName, ...props }, forwarded) => {
     const { ref, callback } = useMergedTextareaRef(forwarded);
     const stretchClasses = getStretchClasses(className);
@@ -5639,7 +5768,7 @@ var Textarea = React40.forwardRef(
   }
 );
 Textarea.displayName = "Textarea";
-var BasicTextarea = React40.forwardRef(
+var BasicTextarea = React41.forwardRef(
   ({ className, autoGrow, minHeight, maxHeight, ...props }, forwarded) => {
     const { ref, callback } = useMergedTextareaRef(forwarded);
     useAutoGrow(ref, props.value, autoGrow, minHeight, maxHeight);
@@ -5661,7 +5790,7 @@ var BasicTextarea = React40.forwardRef(
   }
 );
 BasicTextarea.displayName = "BasicTextarea";
-var TextareaWithPrefix = React40.forwardRef(
+var TextareaWithPrefix = React41.forwardRef(
   ({
     prefix,
     className,
@@ -5704,11 +5833,11 @@ TextareaWithPrefix.displayName = "TextareaWithPrefix";
 
 // src/hover-card.tsx
 import * as HoverCardPrimitive from "@radix-ui/react-hover-card";
-import * as React41 from "react";
+import * as React42 from "react";
 import { jsx as jsx53 } from "react/jsx-runtime";
 var HoverCard = HoverCardPrimitive.Root;
 var HoverCardTrigger = HoverCardPrimitive.Trigger;
-var HoverCardContent = React41.forwardRef(
+var HoverCardContent = React42.forwardRef(
   ({ className, align = "center", sideOffset = 4, container, animated = true, ...props }, ref) => {
     const resolved = usePortalContainer(container);
     return /* @__PURE__ */ jsx53(HoverCardPrimitive.Portal, { container: resolved ?? null, children: /* @__PURE__ */ jsx53(
@@ -5732,9 +5861,9 @@ HoverCardContent.displayName = HoverCardPrimitive.Content.displayName;
 
 // src/radio-group.tsx
 import * as RadioGroupPrimitive from "@radix-ui/react-radio-group";
-import * as React42 from "react";
+import * as React43 from "react";
 import { jsx as jsx54 } from "react/jsx-runtime";
-var RadioGroupSizeContext = React42.createContext("md");
+var RadioGroupSizeContext = React43.createContext("md");
 var CONTROL_CLASSES = {
   sm: "h-3.5 w-3.5",
   md: "h-4 w-4",
@@ -5745,7 +5874,7 @@ var DOT_CLASSES = {
   md: "h-1.5 w-1.5",
   lg: "h-2 w-2"
 };
-var RadioGroup3 = React42.forwardRef(({ className, size = "md", ...props }, ref) => /* @__PURE__ */ jsx54(RadioGroupSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx54(
+var RadioGroup3 = React43.forwardRef(({ className, size = "md", ...props }, ref) => /* @__PURE__ */ jsx54(RadioGroupSizeContext.Provider, { value: size, children: /* @__PURE__ */ jsx54(
   RadioGroupPrimitive.Root,
   {
     ref,
@@ -5755,8 +5884,8 @@ var RadioGroup3 = React42.forwardRef(({ className, size = "md", ...props }, ref)
   }
 ) }));
 RadioGroup3.displayName = RadioGroupPrimitive.Root.displayName;
-var RadioGroupItem = React42.forwardRef(({ className, size, ...props }, ref) => {
-  const groupSize = React42.useContext(RadioGroupSizeContext);
+var RadioGroupItem = React43.forwardRef(({ className, size, ...props }, ref) => {
+  const groupSize = React43.useContext(RadioGroupSizeContext);
   const resolved = size ?? groupSize;
   return /* @__PURE__ */ jsx54(
     RadioGroupPrimitive.Item,
@@ -5788,7 +5917,7 @@ RadioGroupItem.displayName = RadioGroupPrimitive.Item.displayName;
 
 // src/slider.tsx
 import * as SliderPrimitive from "@radix-ui/react-slider";
-import * as React43 from "react";
+import * as React44 from "react";
 import { jsx as jsx55, jsxs as jsxs31 } from "react/jsx-runtime";
 var TRACK_CLASSES = {
   sm: "h-1",
@@ -5800,7 +5929,7 @@ var THUMB_CLASSES = {
   md: "h-4 w-4",
   lg: "h-5 w-5"
 };
-var Slider = React43.forwardRef(({ className, size = "md", ...props }, ref) => {
+var Slider = React44.forwardRef(({ className, size = "md", ...props }, ref) => {
   const thumbCount = Math.max(
     1,
     (props.value ?? props.defaultValue ?? [0]).length
@@ -5862,7 +5991,7 @@ Slider.displayName = SliderPrimitive.Root.displayName;
 import * as ToggleGroupPrimitive from "@radix-ui/react-toggle-group";
 import * as TogglePrimitive from "@radix-ui/react-toggle";
 import { cva as cva7 } from "class-variance-authority";
-import * as React44 from "react";
+import * as React45 from "react";
 import { jsx as jsx56 } from "react/jsx-runtime";
 var toggleVariants = cva7(
   "inline-flex 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:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
@@ -5884,7 +6013,7 @@ var toggleVariants = cva7(
     }
   }
 );
-var Toggle = React44.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsx56(
+var Toggle = React45.forwardRef(({ className, variant, size, ...props }, ref) => /* @__PURE__ */ jsx56(
   TogglePrimitive.Root,
   {
     ref,
@@ -5894,8 +6023,8 @@ var Toggle = React44.forwardRef(({ className, variant, size, ...props }, ref) =>
   }
 ));
 Toggle.displayName = TogglePrimitive.Root.displayName;
-var ToggleGroupContext = React44.createContext({ size: "default", variant: "default" });
-var ToggleGroup = React44.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ jsx56(
+var ToggleGroupContext = React45.createContext({ size: "default", variant: "default" });
+var ToggleGroup = React45.forwardRef(({ className, variant, size, children, ...props }, ref) => /* @__PURE__ */ jsx56(
   ToggleGroupPrimitive.Root,
   {
     ref,
@@ -5906,8 +6035,8 @@ var ToggleGroup = React44.forwardRef(({ className, variant, size, children, ...p
   }
 ));
 ToggleGroup.displayName = ToggleGroupPrimitive.Root.displayName;
-var ToggleGroupItem = React44.forwardRef(({ className, children, variant, size, ...props }, ref) => {
-  const context = React44.useContext(ToggleGroupContext);
+var ToggleGroupItem = React45.forwardRef(({ className, children, variant, size, ...props }, ref) => {
+  const context = React45.useContext(ToggleGroupContext);
   return /* @__PURE__ */ jsx56(
     ToggleGroupPrimitive.Item,
     {
@@ -5981,11 +6110,11 @@ function classNameMisuse(className) {
   const bad = className.split(/\s+/).filter((t) => t && NON_COLOUR_CLASS.test(t));
   return bad.length ? `className is the glyph colour only \u2014 remove "${bad.join(" ")}"` : null;
 }
-function px(value) {
+function px2(value) {
   const n = Number.parseFloat(value);
   return Number.isFinite(n) ? n : 0;
 }
-function describe(el) {
+function describe2(el) {
   const cls = typeof el.className === "string" ? el.className.trim().split(/\s+/).slice(0, 4).join(".") : "";
   return `<${el.tagName.toLowerCase()}${cls ? `.${cls}` : ""}>`;
 }
@@ -6030,7 +6159,7 @@ function canon(doc) {
     key,
     target: a.offsetHeight,
     pill: a.firstElementChild.offsetHeight,
-    icon: px(view.getComputedStyle(a.querySelector("svg")).height),
+    icon: px2(view.getComputedStyle(a.querySelector("svg")).height),
     sm: b.offsetHeight,
     smPill: b.firstElementChild.offsetHeight,
     wide: w.firstElementChild.offsetHeight
@@ -6060,7 +6189,7 @@ function findTapViolation(el) {
   const inline = /matrx-tap-target-(?:inline|mobile-icon-only)/.test(el.className);
   const pill = el.querySelector(":scope > .matrx-tap-pill");
   const icon = pill?.querySelector(".matrx-tap-icon") ?? null;
-  const floored = px(cs.minHeight) >= el.offsetHeight - 0.5 || px(cs.minWidth) >= el.offsetWidth - 0.5;
+  const floored = px2(cs.minHeight) >= el.offsetHeight - 0.5 || px2(cs.minWidth) >= el.offsetWidth - 0.5;
   if (!inTable && pill && !floored) {
     const c = canon(doc);
     const box = sm ? c.sm : c.target;
@@ -6071,7 +6200,7 @@ function findTapViolation(el) {
       return `pill is ${pill.offsetHeight}px, canon is ${pillSizes.join(" or ")}px`;
     }
     if (icon && !moved.has("--matrx-tap-icon-size")) {
-      const size = px(view.getComputedStyle(icon).height);
+      const size = px2(view.getComputedStyle(icon).height);
       if (Math.abs(size - c.icon) > 0.5) return `glyph is ${size}px, canon is ${c.icon}px`;
     }
   }
@@ -6088,9 +6217,9 @@ function findTapViolation(el) {
     if (others.length > 0) break;
     if (ownText(parent, slot, view) !== "") break;
     const pcs = view.getComputedStyle(parent);
-    const space = px(pcs.marginLeft) + px(pcs.marginRight) + px(pcs.paddingLeft) + px(pcs.paddingRight);
+    const space = px2(pcs.marginLeft) + px2(pcs.marginRight) + px2(pcs.paddingLeft) + px2(pcs.paddingRight);
     if (space > 0.5) {
-      return `${describe(parent)} adds ${space}px around a tap button \u2014 tap buttons space themselves`;
+      return `${describe2(parent)} adds ${space}px around a tap button \u2014 tap buttons space themselves`;
     }
     slot = parent;
   }
@@ -6101,9 +6230,9 @@ function findTapViolation(el) {
     const neighbours = Array.from(row.children).filter((c) => c !== slot && isTapSlot(c, view));
     if (flexOrGrid && neighbours.length > 0) {
       const horizontal = rcs.display.includes("grid") || !rcs.flexDirection.startsWith("column");
-      const gap = px(horizontal ? rcs.columnGap : rcs.rowGap);
+      const gap = px2(horizontal ? rcs.columnGap : rcs.rowGap);
       if (gap > 0.5) {
-        return `${describe(row)} adds a ${gap}px gap between tap buttons \u2014 remove it; tap buttons space themselves`;
+        return `${describe2(row)} adds a ${gap}px gap between tap buttons \u2014 remove it; tap buttons space themselves`;
       }
     }
   }
@@ -6146,11 +6275,11 @@ function findTapPlacementWarning(el) {
   if (!row) return null;
   if (glass) {
     const mixed = Array.from(row.children).find((c) => c !== slot && visible(c, view) && !isGlassItem(c));
-    if (mixed) return `glass beside non-glass ${describe(mixed)} \u2014 make the row all glass or none`;
+    if (mixed) return `glass beside non-glass ${describe2(mixed)} \u2014 make the row all glass or none`;
   }
   const pill = el.querySelector(":scope > .matrx-tap-pill") ?? slot.querySelector(".matrx-tap-group-capsule");
   if (!pill) return null;
-  const gap = px(view.getComputedStyle(el).getPropertyValue("--matrx-tap-gap")) || 6;
+  const gap = px2(view.getComputedStyle(el).getPropertyValue("--matrx-tap-gap")) || 6;
   const p = pill.getBoundingClientRect();
   if (p.width === 0) return null;
   for (const [side, sib] of [["after", slot.nextElementSibling], ["before", slot.previousElementSibling]]) {
@@ -6158,9 +6287,9 @@ function findTapPlacementWarning(el) {
     const r = sib.getBoundingClientRect();
     if (Math.abs(r.top + r.height / 2 - (p.top + p.height / 2)) > p.height) continue;
     const cs = view.getComputedStyle(sib);
-    const distance = side === "after" ? r.left + px(cs.paddingLeft) - p.right : p.left - (r.right - px(cs.paddingRight));
+    const distance = side === "after" ? r.left + px2(cs.paddingLeft) - p.right : p.left - (r.right - px2(cs.paddingRight));
     if (distance < gap - 0.5) {
-      return `${describe(sib)} sits ${Math.round(distance)}px from the pill \u2014 anything beside a tap button adds its own ${gap / 2}px (the box only carries ${gap / 2}px)`;
+      return `${describe2(sib)} sits ${Math.round(distance)}px from the pill \u2014 anything beside a tap button adds its own ${gap / 2}px (the box only carries ${gap / 2}px)`;
     }
   }
   return null;
@@ -7362,6 +7491,7 @@ export {
   OrganizationMark,
   OrganizationPicker,
   OverflowToolbar,
+  PILL_MAX_WIDTH_PX,
   POPPER_OFFSET,
   Popover,
   PopoverAnchor,
@@ -7468,7 +7598,9 @@ export {
   badgeVariants,
   buttonVariants,
   cn,
+  enablePillGuard,
   enableTapTargetGuard,
+  findPillViolation,
   findTapPlacementWarning,
   findTapViolation,
   floatingLayerZIndex,