@ai-matrx/design-system 0.60.0 → 0.60.6

package/dist/desktop.cjs

@@ -0,0 +1,3565 @@
+"use client";
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/desktop/index.ts
+var desktop_exports = {};
+__export(desktop_exports, {
+  AppRail: () => AppRail,
+  AppRailAvatar: () => AppRailAvatar,
+  AppRailGroup: () => AppRailGroup,
+  AppRailItem: () => AppRailItem,
+  AppRailSpacer: () => AppRailSpacer,
+  Banner: () => Banner,
+  Button: () => Button,
+  CanvasLayout: () => CanvasLayout,
+  Checkbox: () => Checkbox,
+  CodeBlock: () => CodeBlock,
+  Collapsible: () => Collapsible,
+  CollapsibleContent: () => CollapsibleContent2,
+  CollapsibleTrigger: () => CollapsibleTrigger2,
+  ComingSoon: () => ComingSoon,
+  ConfirmDialog: () => ConfirmDialog,
+  ConfirmDialogHost: () => ConfirmDialogHost,
+  ContextMenu: () => ContextMenu,
+  ContextMenuContent: () => ContextMenuContent,
+  ContextMenuItem: () => ContextMenuItem,
+  ContextMenuSeparator: () => ContextMenuSeparator,
+  ContextMenuShortcut: () => ContextMenuShortcut,
+  ContextMenuTrigger: () => ContextMenuTrigger,
+  DataTable: () => DataTable,
+  Dialog: () => Dialog,
+  DialogClose: () => DialogClose,
+  DialogContent: () => DialogContent,
+  DialogDescription: () => DialogDescription,
+  DialogFooter: () => DialogFooter,
+  DialogHeader: () => DialogHeader,
+  DialogTitle: () => DialogTitle,
+  DialogTrigger: () => DialogTrigger,
+  DropdownMenu: () => DropdownMenu,
+  DropdownMenuCheckboxItem: () => DropdownMenuCheckboxItem,
+  DropdownMenuContent: () => DropdownMenuContent,
+  DropdownMenuGroup: () => DropdownMenuGroup,
+  DropdownMenuItem: () => DropdownMenuItem,
+  DropdownMenuLabel: () => DropdownMenuLabel,
+  DropdownMenuRadioGroup: () => DropdownMenuRadioGroup,
+  DropdownMenuRadioItem: () => DropdownMenuRadioItem,
+  DropdownMenuSeparator: () => DropdownMenuSeparator,
+  DropdownMenuShortcut: () => DropdownMenuShortcut,
+  DropdownMenuSub: () => DropdownMenuSub,
+  DropdownMenuSubContent: () => DropdownMenuSubContent,
+  DropdownMenuSubTrigger: () => DropdownMenuSubTrigger,
+  DropdownMenuTrigger: () => DropdownMenuTrigger,
+  ErrorBanner: () => ErrorBanner,
+  FIELD: () => FIELD,
+  FieldRow: () => FieldRow,
+  IconButton: () => IconButton,
+  Kbd: () => Kbd,
+  METER_THRESHOLDS: () => METER_THRESHOLDS,
+  Meter: () => Meter,
+  ModeSwitch: () => ModeSwitch,
+  OrganizationMark: () => OrganizationMark,
+  Page: () => Page,
+  PageHeader: () => PageHeader,
+  Popover: () => Popover,
+  PopoverAnchor: () => PopoverAnchor,
+  PopoverContent: () => PopoverContent,
+  PopoverTrigger: () => PopoverTrigger,
+  Resource: () => Resource,
+  Row: () => Row,
+  SearchField: () => SearchField,
+  Section: () => Section,
+  SectionContent: () => SectionContent,
+  Segmented: () => Segmented,
+  Select: () => Select,
+  Skeleton: () => Skeleton,
+  SourceList: () => SourceList,
+  SourceListItem: () => SourceListItem,
+  SourceListMore: () => SourceListMore,
+  SourceListSection: () => SourceListSection,
+  Spinner: () => Spinner,
+  StateView: () => StateView,
+  StatusDot: () => StatusDot,
+  StatusLight: () => StatusLight,
+  Switch: () => Switch,
+  TEXT_TONE: () => TEXT_TONE,
+  Tag: () => Tag,
+  Text: () => Text,
+  TextArea: () => TextArea,
+  TextField: () => TextField,
+  Toolbar: () => Toolbar,
+  ToolbarDivider: () => ToolbarDivider,
+  ToolbarSpacer: () => ToolbarSpacer,
+  Tooltip: () => Tooltip,
+  TooltipContent: () => TooltipContent,
+  TooltipProvider: () => TooltipProvider,
+  TooltipTrigger: () => TooltipTrigger,
+  buttonVariants: () => buttonVariants,
+  cn: () => cn,
+  errorMessage: () => errorMessage,
+  formatAge: () => formatAge,
+  formatBytes: () => formatBytes,
+  formatClockTime: () => formatClockTime,
+  formatDuration: () => formatDuration,
+  formatRelativeTime: () => formatRelativeTime,
+  formatUsage: () => formatUsage,
+  meterTone: () => meterTone,
+  organizationColor: () => organizationColor
+});
+module.exports = __toCommonJS(desktop_exports);
+
+// src/desktop/cn.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+var merge = (0, import_tailwind_merge.extendTailwindMerge)({
+  extend: {
+    theme: {
+      spacing: [
+        "control-sm",
+        "control",
+        "control-lg",
+        "row-compact",
+        "sidebar-row",
+        "row",
+        "row-tall",
+        "toolbar",
+        "icon-sm",
+        "icon",
+        "icon-lg",
+        "icon-xl"
+      ],
+      radius: ["control", "group", "panel"],
+      container: ["form", "page", "wide"],
+      text: ["title-large", "title-1", "title-2", "title-3", "headline", "body", "callout", "caption"],
+      shadow: ["control", "raised", "popover"]
+    }
+  }
+});
+function cn(...inputs) {
+  return merge((0, import_clsx.clsx)(inputs));
+}
+
+// src/desktop/text.tsx
+var React = __toESM(require("react"), 1);
+var import_jsx_runtime = require("react/jsx-runtime");
+var VARIANT = {
+  "title-large": "text-title-large",
+  "title-1": "text-title-1",
+  "title-2": "text-title-2",
+  "title-3": "text-title-3",
+  headline: "text-headline",
+  body: "text-body",
+  callout: "text-callout",
+  caption: "text-caption"
+};
+var TEXT_TONE = {
+  primary: "text-label",
+  secondary: "text-label-secondary",
+  tertiary: "text-label-tertiary",
+  tint: "text-tint",
+  danger: "text-system-red",
+  warning: "text-system-orange",
+  success: "text-system-green"
+};
+var Text = React.forwardRef(function Text2({
+  variant = "body",
+  tone = "primary",
+  emphasized,
+  mono,
+  truncate,
+  tabular,
+  selectable,
+  as: Tag2 = "span",
+  className,
+  ...props
+}, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(
+    Tag2,
+    {
+      ref,
+      "data-slot": "text",
+      className: cn(
+        VARIANT[variant],
+        TEXT_TONE[tone],
+        emphasized && "font-medium",
+        mono && "font-mono",
+        truncate && "min-w-0 truncate",
+        tabular && "tabular-nums",
+        selectable && "select-text",
+        className
+      ),
+      ...props
+    }
+  );
+});
+
+// src/desktop/spinner.tsx
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var SPOKES = Array.from({ length: 12 }, (_, i) => i);
+var SIZE = { sm: "size-icon-sm", md: "size-icon", lg: "size-icon-lg", xl: "size-icon-xl" };
+function Spinner({ size = "md", label, className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+    "svg",
+    {
+      viewBox: "0 0 24 24",
+      role: label ? "status" : void 0,
+      "aria-label": label,
+      "aria-hidden": label ? void 0 : true,
+      "data-slot": "spinner",
+      className: cn("mx-spinner shrink-0 text-label-secondary", SIZE[size], className),
+      ...props,
+      children: SPOKES.map((i) => /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+        "rect",
+        {
+          x: "11",
+          y: "2",
+          width: "2",
+          height: "6",
+          rx: "1",
+          fill: "currentColor",
+          opacity: 0.18 + 0.82 * (i + 1) / 12,
+          transform: `rotate(${i * 30} 12 12)`
+        },
+        i
+      ))
+    }
+  );
+}
+
+// src/desktop/button.tsx
+var import_react_slot = require("@radix-ui/react-slot");
+var import_class_variance_authority = require("class-variance-authority");
+var React4 = __toESM(require("react"), 1);
+
+// src/tooltip.tsx
+var TooltipPrimitive = __toESM(require("@radix-ui/react-tooltip"), 1);
+var React3 = __toESM(require("react"), 1);
+
+// src/cn.ts
+var import_clsx2 = require("clsx");
+var import_tailwind_merge2 = require("tailwind-merge");
+function cn2(...inputs) {
+  return (0, import_tailwind_merge2.twMerge)((0, import_clsx2.clsx)(inputs));
+}
+
+// src/motion.ts
+var MOTION_OVERLAY = "matrx-motion-overlay";
+var MOTION_DIALOG = "matrx-motion-dialog";
+var CENTERED_DIALOG = "matrx-dialog-centered";
+var POPPER_OFFSET = "matrx-popper-offset";
+var MOTION_BOTTOM_SHEET = "matrx-motion-bottom-sheet";
+var MOTION_POPPER = "matrx-motion-popper";
+var MOTION_SHEET = {
+  top: "matrx-motion-sheet-top",
+  bottom: "matrx-motion-sheet-bottom",
+  left: "matrx-motion-sheet-left",
+  right: "matrx-motion-sheet-right",
+  center: "matrx-motion-sheet-center"
+};
+var MOTION_PULSE = "matrx-pulse";
+var MOTION_SPIN = "matrx-spin";
+var ALL_MOTION_CLASSES = [
+  MOTION_OVERLAY,
+  MOTION_DIALOG,
+  MOTION_BOTTOM_SHEET,
+  MOTION_POPPER,
+  ...Object.values(MOTION_SHEET),
+  MOTION_PULSE,
+  MOTION_SPIN
+];
+
+// src/portal-container.tsx
+var React2 = __toESM(require("react"), 1);
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var CONTEXT_SLOT = /* @__PURE__ */ Symbol.for("ai-matrx.design-system.portal-container-context");
+var contextRegistry = globalThis;
+var PortalContainerContext = contextRegistry[CONTEXT_SLOT] ??= React2.createContext(void 0);
+function PortalContainerProvider({
+  container,
+  children
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(PortalContainerContext.Provider, { value: container ?? void 0, children });
+}
+function usePortalContainer(explicit) {
+  const injected = React2.useContext(PortalContainerContext);
+  if (explicit !== void 0) {
+    return explicit ?? void 0;
+  }
+  return injected ?? void 0;
+}
+
+// src/title-tooltips.ts
+var TITLE_TOOLTIP_ATTR = "data-matrx-title";
+var TOOLTIP_TRIGGER_ATTR = "data-matrx-tooltip-trigger";
+var NATIVE_TITLE_OPT_OUT_ATTR = "data-native-title";
+var OPEN_DELAY_MS = 350;
+var SKIP_DELAY_MS = 500;
+var GAP_PX = 6;
+var EDGE_PX = 8;
+var SURFACE_CLASS = "matrx-tooltip matrx-title-tooltip matrx-motion-popper z-[10001] rounded-md border border-border bg-popover px-2.5 py-1 text-xs font-medium text-popover-foreground";
+var INSTALLATION_KEY = /* @__PURE__ */ Symbol.for("@ai-matrx/design-system/title-tooltips");
+var installations = {
+  get: (doc) => doc[INSTALLATION_KEY],
+  set: (doc, value) => {
+    doc[INSTALLATION_KEY] = value;
+  },
+  delete: (doc) => {
+    delete doc[INSTALLATION_KEY];
+  }
+};
+function acquireTitleTooltips(doc = typeof document === "undefined" ? void 0 : document) {
+  if (!doc) return () => {
+  };
+  const existing = installations.get(doc);
+  if (existing) {
+    existing.count += 1;
+  } else {
+    installations.set(doc, { count: 1, uninstall: install(doc) });
+  }
+  let released = false;
+  return () => {
+    if (released) return;
+    released = true;
+    const current = installations.get(doc);
+    if (!current) return;
+    current.count -= 1;
+    if (current.count <= 0) {
+      current.uninstall();
+      installations.delete(doc);
+    }
+  };
+}
+function install(doc) {
+  const win = doc.defaultView;
+  let active = null;
+  let surface = null;
+  let openTimer;
+  let lastClosedAt = 0;
+  const HTMLElementCtor = win?.HTMLElement;
+  const titledAncestor = (node) => {
+    if (!HTMLElementCtor || !(node instanceof win.Node)) return null;
+    const start = node instanceof HTMLElementCtor ? node : node.parentElement;
+    if (!start) return null;
+    const el = start.closest(`[title], [${TITLE_TOOLTIP_ATTR}]`);
+    if (!el || !(el instanceof HTMLElementCtor)) return null;
+    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 lift = (el) => {
+    const title = el.getAttribute("title");
+    if (title === null) return;
+    el.setAttribute(TITLE_TOOLTIP_ATTR, title);
+    el.removeAttribute("title");
+  };
+  const restore = (el) => {
+    const held = el.getAttribute(TITLE_TOOLTIP_ATTR);
+    if (held === null) return;
+    if (!el.hasAttribute("title")) el.setAttribute("title", held);
+    el.removeAttribute(TITLE_TOOLTIP_ATTR);
+  };
+  const ensureSurface = () => {
+    if (surface && surface.isConnected) return surface;
+    surface = doc.createElement("div");
+    surface.setAttribute("role", "tooltip");
+    surface.setAttribute("data-slot", "title-tooltip");
+    surface.className = SURFACE_CLASS;
+    surface.style.visibility = "hidden";
+    doc.body.appendChild(surface);
+    return surface;
+  };
+  const preferredSide = (el) => {
+    const hint = el.closest("[data-title-side]")?.getAttribute("data-title-side");
+    return hint === "bottom" || hint === "left" || hint === "right" ? hint : "top";
+  };
+  const place = (el, node) => {
+    const vw = win?.innerWidth ?? 0;
+    const vh = win?.innerHeight ?? 0;
+    const anchor = el.getBoundingClientRect();
+    const box = node.getBoundingClientRect();
+    const fits = {
+      top: anchor.top - GAP_PX - box.height >= EDGE_PX,
+      bottom: anchor.bottom + GAP_PX + box.height <= vh - EDGE_PX,
+      left: anchor.left - GAP_PX - box.width >= EDGE_PX,
+      right: anchor.right + GAP_PX + box.width <= vw - EDGE_PX
+    };
+    const opposite = { top: "bottom", bottom: "top", left: "right", right: "left" };
+    const wanted = preferredSide(el);
+    const side = fits[wanted] ? wanted : fits[opposite[wanted]] ? opposite[wanted] : wanted;
+    let x;
+    let y;
+    if (side === "top" || side === "bottom") {
+      x = anchor.left + anchor.width / 2 - box.width / 2;
+      y = side === "top" ? anchor.top - GAP_PX - box.height : anchor.bottom + GAP_PX;
+    } else {
+      y = anchor.top + anchor.height / 2 - box.height / 2;
+      x = side === "left" ? anchor.left - GAP_PX - box.width : anchor.right + GAP_PX;
+    }
+    x = Math.min(Math.max(x, EDGE_PX), Math.max(EDGE_PX, vw - EDGE_PX - box.width));
+    y = Math.min(Math.max(y, EDGE_PX), Math.max(EDGE_PX, vh - EDGE_PX - box.height));
+    node.style.transform = `translate(${Math.round(x)}px, ${Math.round(y)}px)`;
+    node.setAttribute("data-side", side);
+  };
+  const isShown = (node, root) => {
+    const rect = node.getBoundingClientRect();
+    if (rect.width <= 0 || rect.height <= 0) return false;
+    for (let cur = node; cur; cur = cur === root ? null : cur.parentElement) {
+      const cs = win?.getComputedStyle(cur);
+      if (!cs) return false;
+      if (cs.display === "none" || cs.visibility === "hidden" || Number(cs.opacity) === 0) return false;
+    }
+    return true;
+  };
+  const repeatsVisibleText = (el, text) => {
+    const norm = (t) => t.replace(/\s+/g, " ").trim().toLowerCase();
+    const want = norm(text);
+    if (!want || !win) return false;
+    const walker = doc.createTreeWalker(el, win.NodeFilter.SHOW_TEXT);
+    for (let node = walker.nextNode(); node; node = walker.nextNode()) {
+      if (norm(node.textContent ?? "") !== want) continue;
+      const host = node.parentElement;
+      if (!host || !isShown(host, el)) continue;
+      if (host.scrollWidth > host.clientWidth + 1) continue;
+      return true;
+    }
+    return false;
+  };
+  const show = (el, instant) => {
+    if (active !== el) return;
+    if (el.closest(`[${TOOLTIP_TRIGGER_ATTR}]`)) return;
+    const text = textOf(el);
+    if (!text || !el.isConnected) return;
+    if (repeatsVisibleText(el, text)) return;
+    const node = ensureSurface();
+    node.textContent = text;
+    node.style.visibility = "hidden";
+    node.setAttribute("data-state", instant ? "instant-open" : "delayed-open");
+    place(el, node);
+    node.style.visibility = "visible";
+    if (el.id) node.id = `${el.id}-title-tooltip`;
+  };
+  const hide = () => {
+    if (openTimer !== void 0) clearTimeout(openTimer);
+    openTimer = void 0;
+    if (surface && surface.style.visibility === "visible") lastClosedAt = Date.now();
+    if (surface) {
+      surface.style.visibility = "hidden";
+      surface.removeAttribute("data-state");
+    }
+  };
+  const activate = (el) => {
+    if (active === el) return;
+    deactivate();
+    active = el;
+    lift(el);
+    const instant = Date.now() - lastClosedAt < SKIP_DELAY_MS;
+    if (instant) show(el, true);
+    else openTimer = setTimeout(() => show(el, false), OPEN_DELAY_MS);
+  };
+  const deactivate = () => {
+    hide();
+    if (active) restore(active);
+    active = null;
+  };
+  const onPointerOver = (e) => {
+    if (e.pointerType === "touch") return;
+    const el = titledAncestor(e.target);
+    if (el) activate(el);
+    else if (active) deactivate();
+  };
+  const onPointerOut = (e) => {
+    if (!active) return;
+    const next = e.relatedTarget;
+    if (next instanceof win.Node && active.contains(next)) return;
+    deactivate();
+  };
+  const onFocusIn = (e) => {
+    const el = titledAncestor(e.target);
+    if (!el) return;
+    let visible = true;
+    try {
+      visible = e.target.matches(":focus-visible");
+    } catch {
+      visible = true;
+    }
+    if (visible) activate(el);
+  };
+  const onFocusOut = (e) => {
+    if (!active) return;
+    const next = e.relatedTarget;
+    if (next instanceof win.Node && active.contains(next)) return;
+    deactivate();
+  };
+  const onDismiss = () => deactivate();
+  const onKeyDown = (e) => {
+    if (e.key === "Escape") deactivate();
+  };
+  doc.addEventListener("pointerover", onPointerOver, true);
+  doc.addEventListener("pointerout", onPointerOut, true);
+  doc.addEventListener("focusin", onFocusIn, true);
+  doc.addEventListener("focusout", onFocusOut, true);
+  doc.addEventListener("pointerdown", onDismiss, true);
+  doc.addEventListener("keydown", onKeyDown, true);
+  doc.addEventListener("scroll", onDismiss, true);
+  win?.addEventListener("blur", onDismiss);
+  return () => {
+    deactivate();
+    doc.removeEventListener("pointerover", onPointerOver, true);
+    doc.removeEventListener("pointerout", onPointerOut, true);
+    doc.removeEventListener("focusin", onFocusIn, true);
+    doc.removeEventListener("focusout", onFocusOut, true);
+    doc.removeEventListener("pointerdown", onDismiss, true);
+    doc.removeEventListener("keydown", onKeyDown, true);
+    doc.removeEventListener("scroll", onDismiss, true);
+    win?.removeEventListener("blur", onDismiss);
+    surface?.remove();
+    surface = null;
+  };
+}
+
+// src/tooltip.tsx
+var import_jsx_runtime4 = require("react/jsx-runtime");
+function TooltipProvider({ titleTooltips = true, ...props }) {
+  React3.useEffect(() => {
+    if (!titleTooltips) return;
+    return acquireTitleTooltips();
+  }, [titleTooltips]);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TooltipPrimitive.Provider, { ...props });
+}
+var Tooltip = TooltipPrimitive.Root;
+var TooltipTrigger = React3.forwardRef((props, ref) => /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TooltipPrimitive.Trigger, { ref, ...{ [TOOLTIP_TRIGGER_ATTR]: "" }, ...props }));
+TooltipTrigger.displayName = TooltipPrimitive.Trigger.displayName;
+var TooltipContent = React3.forwardRef(({ className, sideOffset = 4, container, animated = true, ...props }, ref) => {
+  const resolved = usePortalContainer(container);
+  return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(TooltipPrimitive.Portal, { container: resolved ?? null, children: /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+    TooltipPrimitive.Content,
+    {
+      ref,
+      "data-slot": "tooltip-content",
+      sideOffset,
+      className: cn2(
+        "matrx-tooltip z-[10001] overflow-hidden rounded-md border border-border bg-popover px-2.5 py-1 text-xs font-medium text-popover-foreground",
+        animated && MOTION_POPPER,
+        className
+      ),
+      ...props
+    }
+  ) });
+});
+TooltipContent.displayName = TooltipPrimitive.Content.displayName;
+
+// src/desktop/button.tsx
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var buttonVariants = (0, import_class_variance_authority.cva)(
+  "focus-ring inline-flex shrink-0 select-none items-center justify-center gap-1.5 whitespace-nowrap rounded-control font-medium transition-colors duration-100 disabled:pointer-events-none disabled:opacity-40 [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      variant: {
+        primary: "bg-tint text-tint-label shadow-control hover:brightness-110 active:brightness-95 disabled:bg-fill-secondary disabled:text-label-tertiary disabled:opacity-100 disabled:shadow-none",
+        secondary: "bg-control text-label shadow-control hover:bg-fill-secondary active:bg-fill-tertiary",
+        plain: "bg-transparent text-label hover:bg-fill-secondary active:bg-fill-tertiary",
+        destructive: "bg-control text-system-red shadow-control hover:bg-fill-secondary active:bg-fill-tertiary"
+      },
+      size: {
+        sm: "h-control-sm px-2 text-callout [&_svg]:size-icon-sm",
+        md: "h-control px-3 text-body [&_svg]:size-icon",
+        lg: "h-control-lg px-4 text-body [&_svg]:size-icon"
+      }
+    },
+    defaultVariants: { variant: "secondary", size: "md" }
+  }
+);
+var Button = React4.forwardRef(function Button2({ variant, size, icon, busy, asChild, disabled, className, children, type = "button", ...props }, ref) {
+  const Comp = asChild ? import_react_slot.Slot : "button";
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+    Comp,
+    {
+      ref,
+      type: asChild ? void 0 : type,
+      "data-slot": "button",
+      disabled: disabled || busy,
+      "aria-busy": busy || void 0,
+      className: cn(buttonVariants({ variant, size }), className),
+      ...props,
+      children: asChild ? children : /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(import_jsx_runtime5.Fragment, { children: [
+        busy ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(Spinner, { size: size === "sm" ? "sm" : "md" }) : icon,
+        children
+      ] })
+    }
+  );
+});
+var iconButtonVariants = (0, import_class_variance_authority.cva)(
+  "focus-ring inline-flex shrink-0 select-none items-center justify-center rounded-control text-label-secondary transition-colors duration-100 hover:bg-fill-secondary hover:text-label active:bg-fill-tertiary disabled:pointer-events-none disabled:opacity-40 data-[active=true]:bg-fill-secondary data-[active=true]:text-label [&_svg]:pointer-events-none [&_svg]:shrink-0",
+  {
+    variants: {
+      size: {
+        sm: "size-control-sm [&_svg]:size-icon-sm",
+        md: "size-control [&_svg]:size-icon"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+);
+var IconButton = React4.forwardRef(function IconButton2({ icon, label, shortcut, active, size, className, type = "button", ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "button",
+      {
+        ref,
+        type,
+        "data-slot": "icon-button",
+        "aria-label": label,
+        "aria-pressed": active === void 0 ? void 0 : active,
+        "data-active": active || void 0,
+        className: cn(iconButtonVariants({ size }), className),
+        ...props,
+        children: icon
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime5.jsxs)(TooltipContent, { children: [
+      label,
+      shortcut ? /* @__PURE__ */ (0, import_jsx_runtime5.jsx)("span", { className: "ml-2 opacity-60", children: shortcut }) : null
+    ] })
+  ] });
+});
+
+// src/desktop/field.tsx
+var React5 = __toESM(require("react"), 1);
+
+// src/icons.tsx
+var import_jsx_runtime6 = require("react/jsx-runtime");
+function lucideProps(props) {
+  return {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 24 24",
+    fill: "none",
+    stroke: "currentColor",
+    strokeWidth: 2,
+    strokeLinecap: "round",
+    strokeLinejoin: "round",
+    "aria-hidden": true,
+    ...props
+  };
+}
+function Loader2Icon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { ...lucideProps(props), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) });
+}
+function ChevronRightIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { ...lucideProps(props), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "m9 18 6-6-6-6" }) });
+}
+function ChevronDownIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { ...lucideProps(props), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "m6 9 6 6 6-6" }) });
+}
+function MoreHorizontalIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { ...lucideProps(props), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: "12", cy: "12", r: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: "19", cy: "12", r: "1" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("circle", { cx: "5", cy: "12", r: "1" })
+  ] });
+}
+function ChevronsUpDownIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { ...lucideProps(props), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "m7 15 5 5 5-5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "m7 9 5-5 5 5" })
+  ] });
+}
+function XIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsxs)("svg", { ...lucideProps(props), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "M18 6 6 18" }),
+    /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("path", { d: "m6 6 12 12" })
+  ] });
+}
+function radixProps(props) {
+  return {
+    xmlns: "http://www.w3.org/2000/svg",
+    viewBox: "0 0 15 15",
+    width: 15,
+    height: 15,
+    fill: "none",
+    "aria-hidden": true,
+    ...props
+  };
+}
+function MagnifyingGlassIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { ...radixProps(props), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "path",
+    {
+      d: "M10 6.5C10 8.433 8.433 10 6.5 10C4.567 10 3 8.433 3 6.5C3 4.567 4.567 3 6.5 3C8.433 3 10 4.567 10 6.5ZM9.30884 10.0159C8.53901 10.6318 7.56251 11 6.5 11C4.01472 11 2 8.98528 2 6.5C2 4.01472 4.01472 2 6.5 2C8.98528 2 11 4.01472 11 6.5C11 7.56251 10.6318 8.53901 10.0159 9.30884L12.8536 12.1464C13.0488 12.3417 13.0488 12.6583 12.8536 12.8536C12.6583 13.0488 12.3417 13.0488 12.1464 12.8536L9.30884 10.0159Z",
+      fill: "currentColor",
+      fillRule: "evenodd",
+      clipRule: "evenodd"
+    }
+  ) });
+}
+function CheckIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { ...radixProps(props), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "path",
+    {
+      d: "M11.4669 3.72684C11.7558 3.91574 11.8369 4.30308 11.648 4.59198L7.39799 11.092C7.29783 11.2452 7.13556 11.3467 6.95402 11.3699C6.77247 11.3931 6.58989 11.3355 6.45446 11.2124L3.70446 8.71241C3.44905 8.48022 3.43023 8.08494 3.66242 7.82953C3.89461 7.57412 4.28989 7.55529 4.5453 7.78749L6.75292 9.79441L10.6018 3.90792C10.7907 3.61902 11.178 3.53795 11.4669 3.72684Z",
+      fill: "currentColor",
+      fillRule: "evenodd",
+      clipRule: "evenodd"
+    }
+  ) });
+}
+function DividerHorizontalIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { ...radixProps(props), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "path",
+    {
+      d: "M2 7.5C2 7.22386 2.22386 7 2.5 7H12.5C12.7761 7 13 7.22386 13 7.5C13 7.77614 12.7761 8 12.5 8H2.5C2.22386 8 2 7.77614 2 7.5Z",
+      fill: "currentColor",
+      fillRule: "evenodd",
+      clipRule: "evenodd"
+    }
+  ) });
+}
+function DotFilledIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { ...radixProps(props), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "path",
+    {
+      d: "M9.875 7.5C9.875 8.81168 8.81168 9.875 7.5 9.875C6.18832 9.875 5.125 8.81168 5.125 7.5C5.125 6.18832 6.18832 5.125 7.5 5.125C8.81168 5.125 9.875 6.18832 9.875 7.5Z",
+      fill: "currentColor"
+    }
+  ) });
+}
+function RadixChevronRightIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { ...radixProps(props), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "path",
+    {
+      d: "M6.1584 3.13508C6.35985 2.94621 6.67627 2.95642 6.86514 3.15788L10.6151 7.15788C10.7954 7.3502 10.7954 7.64949 10.6151 7.84182L6.86514 11.8418C6.67627 12.0433 6.35985 12.0535 6.1584 11.8646C5.95694 11.6757 5.94673 11.3593 6.1356 11.1579L9.565 7.49985L6.1356 3.84182C5.94673 3.64036 5.95694 3.32394 6.1584 3.13508Z",
+      fill: "currentColor",
+      fillRule: "evenodd",
+      clipRule: "evenodd"
+    }
+  ) });
+}
+function RadixChevronDownIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { ...radixProps(props), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "path",
+    {
+      d: "M3.13523 6.15803C3.3241 5.95657 3.64052 5.94637 3.84197 6.13523L7.5 9.56464L11.158 6.13523C11.3595 5.94637 11.6759 5.95657 11.8648 6.15803C12.0536 6.35949 12.0434 6.67591 11.842 6.86477L7.84197 10.6148C7.64964 10.7951 7.35036 10.7951 7.15803 10.6148L3.15803 6.86477C2.95657 6.67591 2.94637 6.35949 3.13523 6.15803Z",
+      fill: "currentColor",
+      fillRule: "evenodd",
+      clipRule: "evenodd"
+    }
+  ) });
+}
+function RadixChevronUpIcon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { ...radixProps(props), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "path",
+    {
+      d: "M3.13523 8.84197C3.3241 9.04343 3.64052 9.05363 3.84197 8.86477L7.5 5.43536L11.158 8.86477C11.3595 9.05363 11.6759 9.04343 11.8648 8.84197C12.0536 8.64051 12.0434 8.32409 11.842 8.13523L7.84197 4.38523C7.64964 4.20492 7.35036 4.20492 7.15803 4.38523L3.15803 8.13523C2.95657 8.32409 2.94637 8.64051 3.13523 8.84197Z",
+      fill: "currentColor",
+      fillRule: "evenodd",
+      clipRule: "evenodd"
+    }
+  ) });
+}
+function DragHandleDots2Icon(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)("svg", { ...radixProps(props), children: /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+    "path",
+    {
+      d: "M4.5 2.5C5.05228 2.5 5.5 2.05228 5.5 1.5C5.5 0.947715 5.05228 0.5 4.5 0.5C3.94772 0.5 3.5 0.947715 3.5 1.5C3.5 2.05228 3.94772 2.5 4.5 2.5ZM4.5 6.5C5.05228 6.5 5.5 6.05229 5.5 5.5C5.5 4.94771 5.05228 4.5 4.5 4.5C3.94772 4.5 3.5 4.94771 3.5 5.5C3.5 6.05229 3.94772 6.5 4.5 6.5ZM5.5 9.5C5.5 10.0523 5.05228 10.5 4.5 10.5C3.94772 10.5 3.5 10.0523 3.5 9.5C3.5 8.94771 3.94772 8.5 4.5 8.5C5.05228 8.5 5.5 8.94771 5.5 9.5ZM4.5 14.5C5.05228 14.5 5.5 14.0523 5.5 13.5C5.5 12.9477 5.05228 12.5 4.5 12.5C3.94772 12.5 3.5 12.9477 3.5 13.5C3.5 14.0523 3.94772 14.5 4.5 14.5ZM11.5 1.5C11.5 2.05228 11.0523 2.5 10.5 2.5C9.94771 2.5 9.5 2.05228 9.5 1.5C9.5 0.947715 9.94771 0.5 10.5 0.5C11.0523 0.5 11.5 0.947715 11.5 1.5ZM10.5 6.5C11.0523 6.5 11.5 6.05229 11.5 5.5C11.5 4.94771 11.0523 4.5 10.5 4.5C9.94771 4.5 9.5 4.94771 9.5 5.5C9.5 6.05229 9.94771 6.5 10.5 6.5ZM11.5 9.5C11.5 10.0523 11.0523 10.5 10.5 10.5C9.94771 10.5 9.5 10.0523 9.5 9.5C9.5 8.94771 9.94771 8.5 10.5 8.5C11.0523 8.5 11.5 8.94771 11.5 9.5ZM10.5 14.5C11.0523 14.5 11.5 14.0523 11.5 13.5C11.5 12.9477 11.0523 12.5 10.5 12.5C9.94771 12.5 9.5 12.9477 9.5 13.5C9.5 14.0523 9.94771 14.5 10.5 14.5Z",
+      fill: "currentColor",
+      fillRule: "evenodd",
+      clipRule: "evenodd"
+    }
+  ) });
+}
+
+// src/desktop/field.tsx
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var FIELD = "focus-ring w-full min-w-0 rounded-control bg-control text-body text-label shadow-control placeholder:text-label-tertiary disabled:opacity-40 read-only:bg-fill";
+var TextField = React5.forwardRef(function TextField2({ size = "md", invalid, className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "input",
+    {
+      ref,
+      "data-slot": "text-field",
+      "aria-invalid": invalid || void 0,
+      className: cn(
+        FIELD,
+        "select-text px-2",
+        size === "sm" ? "h-control-sm text-callout" : "h-control",
+        invalid && "outline outline-2 outline-system-red/60",
+        className
+      ),
+      ...props
+    }
+  );
+});
+var TextArea = React5.forwardRef(function TextArea2({ invalid, className, rows = 4, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+    "textarea",
+    {
+      ref,
+      rows,
+      "data-slot": "text-area",
+      "aria-invalid": invalid || void 0,
+      className: cn(FIELD, "select-text resize-none px-2 py-1.5", invalid && "outline outline-2 outline-system-red/60", className),
+      ...props
+    }
+  );
+});
+var SearchField = React5.forwardRef(function SearchField2({ value, onValueChange, size = "md", placeholder = "Search", className, onKeyDown, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime7.jsxs)(
+    "div",
+    {
+      "data-slot": "search-field",
+      className: cn("relative flex items-center", size === "sm" ? "h-control-sm" : "h-control", className),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(MagnifyingGlassIcon, { className: "pointer-events-none absolute left-2 size-icon-sm text-label-tertiary" }),
+        /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "input",
+          {
+            ref,
+            type: "search",
+            value,
+            placeholder,
+            onChange: (event) => onValueChange(event.target.value),
+            onKeyDown: (event) => {
+              if (event.key === "Escape" && value) {
+                event.preventDefault();
+                onValueChange("");
+              }
+              onKeyDown?.(event);
+            },
+            className: cn(
+              FIELD,
+              "h-full select-text bg-fill pl-7 pr-7 shadow-none [&::-webkit-search-cancel-button]:hidden",
+              size === "sm" && "text-callout"
+            ),
+            ...props
+          }
+        ),
+        value ? /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+          "button",
+          {
+            type: "button",
+            "aria-label": "Clear search",
+            onClick: () => onValueChange(""),
+            className: "focus-ring absolute right-1.5 flex size-icon items-center justify-center rounded-full bg-label-tertiary text-content hover:bg-label-secondary",
+            children: /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(XIcon, { className: "size-2.5", strokeWidth: 3 })
+          }
+        ) : null
+      ]
+    }
+  );
+});
+
+// src/desktop/select.tsx
+var SelectPrimitive2 = __toESM(require("@radix-ui/react-select"), 1);
+
+// src/select.tsx
+var SelectPrimitive = __toESM(require("@radix-ui/react-select"), 1);
+var import_class_variance_authority2 = require("class-variance-authority");
+var React6 = __toESM(require("react"), 1);
+
+// src/field-surface.ts
+var FIELD_SURFACE_CLASS = "border border-border bg-card";
+
+// src/select.tsx
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var selectTriggerVariants = (0, import_class_variance_authority2.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_runtime8.jsx)(
+    RadixChevronDownIcon,
+    {
+      "aria-hidden": "true",
+      "data-select-chevron": "",
+      className: cn2(size === "sm" ? "h-3.5 w-3.5" : "h-4 w-4", "shrink-0 opacity-50", className)
+    }
+  );
+}
+var SelectTrigger = React6.forwardRef(({ className, children, hideArrow = false, size, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  SelectPrimitive.Trigger,
+  {
+    ref,
+    className: cn2(selectTriggerVariants({ size, className })),
+    ...props,
+    children: [
+      children,
+      !hideArrow && /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SelectChevron, { size: size === "sm" ? "sm" : "default" }) })
+    ]
+  }
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+var SelectScrollUpButton = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  SelectPrimitive.ScrollUpButton,
+  {
+    ref,
+    className: cn2(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RadixChevronUpIcon, {})
+  }
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+var SelectScrollDownButton = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  SelectPrimitive.ScrollDownButton,
+  {
+    ref,
+    className: cn2(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(RadixChevronDownIcon, {})
+  }
+));
+SelectScrollDownButton.displayName = SelectPrimitive.ScrollDownButton.displayName;
+var SelectContent = React6.forwardRef(
+  ({
+    className,
+    children,
+    position = "popper",
+    container,
+    animated = true,
+    ...props
+  }, ref) => {
+    const portalContainer = usePortalContainer(container);
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SelectPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+      SelectPrimitive.Content,
+      {
+        ref,
+        className: cn2(
+          "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_runtime8.jsx)(SelectScrollUpButton, {}),
+          /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+            SelectPrimitive.Viewport,
+            {
+              className: cn2(
+                "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_runtime8.jsx)(SelectScrollDownButton, {})
+        ]
+      }
+    ) });
+  }
+);
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+var SelectLabel = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  SelectPrimitive.Label,
+  {
+    ref,
+    className: cn2("px-2 py-1.5 text-sm font-semibold", className),
+    ...props
+  }
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+var SelectItem = React6.forwardRef(({ className, children, description, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsxs)(
+  SelectPrimitive.Item,
+  {
+    ref,
+    className: cn2(
+      "relative flex w-full min-w-0 select-none rounded-sm py-1 pl-2 pr-8 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:opacity-50",
+      description ? "flex-col items-start gap-0.5 py-1.5" : "items-center",
+      className
+    ),
+    ...props,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(CheckIcon, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: "min-w-0 whitespace-normal break-words [overflow-wrap:anywhere]", children: /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(SelectPrimitive.ItemText, { children }) }),
+      description ? /* @__PURE__ */ (0, import_jsx_runtime8.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 = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+  SelectPrimitive.Separator,
+  {
+    ref,
+    className: cn2("-mx-1 my-1 h-px bg-muted", className),
+    ...props
+  }
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+// src/desktop/select.tsx
+var import_jsx_runtime9 = require("react/jsx-runtime");
+function Select({
+  value,
+  onValueChange,
+  options,
+  placeholder,
+  size = "md",
+  disabled,
+  id,
+  className,
+  "aria-label": ariaLabel,
+  ...data
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(SelectPrimitive2.Root, { ...value === void 0 ? {} : { value }, onValueChange, disabled: disabled ?? false, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)(
+      SelectPrimitive2.Trigger,
+      {
+        ...data,
+        id,
+        "aria-label": ariaLabel,
+        "data-slot": "select",
+        className: cn(
+          "focus-ring inline-flex min-w-0 items-center justify-between gap-2 rounded-control bg-control pl-2.5 pr-1.5 text-label shadow-control hover:bg-fill-secondary disabled:opacity-40 data-[placeholder]:text-label-tertiary",
+          size === "sm" ? "h-control-sm text-callout" : "h-control text-body",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("span", { className: "min-w-0 truncate", children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SelectPrimitive2.Value, { placeholder }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SelectPrimitive2.Icon, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(ChevronsUpDownIcon, { className: "size-icon-sm shrink-0 text-label-secondary" }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SelectContent, { children: options.map(
+      (option, index) => option === "-" ? /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SelectSeparator, {}, `sep-${index}`) : /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(SelectItem, { value: option.value, disabled: option.disabled ?? false, children: option.label }, option.value)
+    ) })
+  ] });
+}
+
+// src/desktop/segmented.tsx
+var ToggleGroup = __toESM(require("@radix-ui/react-toggle-group"), 1);
+var import_jsx_runtime10 = require("react/jsx-runtime");
+function Segmented({
+  value,
+  onValueChange,
+  segments,
+  size = "md",
+  className,
+  "aria-label": ariaLabel,
+  ...data
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+    ToggleGroup.Root,
+    {
+      ...data,
+      type: "single",
+      value,
+      "aria-label": ariaLabel,
+      onValueChange: (next) => {
+        if (next) onValueChange(next);
+      },
+      "data-slot": "segmented",
+      className: cn(
+        "inline-flex items-stretch gap-0.5 rounded-control bg-fill-secondary p-0.5",
+        size === "sm" ? "h-control-sm text-callout" : "h-control text-body",
+        className
+      ),
+      children: segments.map((segment) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        ToggleGroup.Item,
+        {
+          value: segment.value,
+          "aria-label": segment.ariaLabel,
+          disabled: segment.disabled,
+          className: "focus-ring inline-flex min-w-0 flex-1 items-center justify-center gap-1 rounded-control px-2.5 text-label-secondary transition-colors duration-100 hover:text-label disabled:opacity-40 data-[state=on]:bg-control data-[state=on]:text-label data-[state=on]:shadow-control [&_svg]:size-icon-sm",
+          children: segment.label
+        },
+        segment.value
+      ))
+    }
+  );
+}
+
+// src/switch.tsx
+var SwitchPrimitives = __toESM(require("@radix-ui/react-switch"), 1);
+var React7 = __toESM(require("react"), 1);
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var SWITCH_SIZES = {
+  sm: {
+    root: "h-4 w-9 border-border data-[state=unchecked]:bg-input",
+    thumb: "h-4 w-4 border border-primary data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+  },
+  md: {
+    root: "h-5 w-9 border-transparent data-[state=unchecked]:bg-input",
+    thumb: "h-4 w-4 data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0"
+  }
+};
+var Switch = React7.forwardRef(({ className, size = "md", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+  SwitchPrimitives.Root,
+  {
+    ref,
+    "data-slot": "switch",
+    className: cn2(
+      "peer inline-flex shrink-0 items-center rounded-full border-2 shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary",
+      SWITCH_SIZES[size].root,
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      SwitchPrimitives.Thumb,
+      {
+        "data-slot": "switch-thumb",
+        className: cn2(
+          "pointer-events-none block rounded-full bg-background shadow-lg ring-0 transition-transform",
+          SWITCH_SIZES[size].thumb
+        )
+      }
+    )
+  }
+));
+Switch.displayName = SwitchPrimitives.Root.displayName;
+
+// src/checkbox.tsx
+var CheckboxPrimitive = __toESM(require("@radix-ui/react-checkbox"), 1);
+var React8 = __toESM(require("react"), 1);
+var import_jsx_runtime12 = require("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 = React8.forwardRef(({ className, size = "md", ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+  CheckboxPrimitive.Root,
+  {
+    ref,
+    "data-slot": "checkbox",
+    className: cn2(
+      "peer shrink-0 border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground data-[state=indeterminate]:bg-primary data-[state=indeterminate]:text-primary-foreground",
+      CHECKBOX_SIZES[size].root,
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+      CheckboxPrimitive.Indicator,
+      {
+        "data-slot": "checkbox-indicator",
+        className: "flex items-center justify-center text-current",
+        children: props.checked === "indeterminate" ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(DividerHorizontalIcon, { className: CHECKBOX_SIZES[size].glyph }) : /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(CheckIcon, { className: CHECKBOX_SIZES[size].glyph })
+      }
+    )
+  }
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+// src/desktop/layout.tsx
+var React9 = __toESM(require("react"), 1);
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var WIDTH = {
+  form: "max-w-form",
+  wide: "max-w-wide",
+  full: "max-w-none"
+};
+var Page = React9.forwardRef(function Page2({ width = "wide", header, className, children, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { ref, "data-slot": "page", className: cn("h-full overflow-y-auto bg-content", className), ...props, children: /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: cn("mx-auto flex w-full flex-col gap-6 px-8 pb-10 pt-6", width === "full" ? WIDTH.full : WIDTH.wide), children: [
+    header,
+    width === "form" ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: cn("flex w-full flex-col gap-6", WIDTH.form), children }) : children
+  ] }) });
+});
+function PageHeader({ title, subtitle, icon, actions, className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("header", { "data-slot": "page-header", className: cn("flex min-h-control-lg items-center gap-3", className), ...props, children: [
+    icon ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "flex size-icon-xl shrink-0 items-center justify-center text-label-secondary [&_svg]:size-icon-lg", children: icon }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Text, { as: "h1", variant: "title-2", truncate: true, children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Text, { variant: "callout", tone: "secondary", truncate: true, "aria-hidden": subtitle ? void 0 : true, children: subtitle ?? "\xA0" })
+    ] }),
+    actions ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: "flex shrink-0 items-center gap-2", children: actions }) : null
+  ] });
+}
+function Toolbar({ draggable, className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+    "div",
+    {
+      role: "toolbar",
+      "data-slot": "toolbar",
+      className: cn(
+        "flex h-toolbar shrink-0 items-center gap-2 px-3 [&_button]:window-no-drag [&_input]:window-no-drag",
+        draggable && "window-drag",
+        className
+      ),
+      ...props
+    }
+  );
+}
+function ToolbarSpacer() {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { "aria-hidden": true, className: "flex-1" });
+}
+function ToolbarDivider() {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { "aria-hidden": true, className: "mx-1 h-icon w-px bg-separator" });
+}
+
+// src/desktop/group.tsx
+var React10 = __toESM(require("react"), 1);
+var import_jsx_runtime14 = require("react/jsx-runtime");
+function Section({ title, actions, footer, appearance = "grouped", className, children, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("section", { "data-slot": "section", className: cn("flex flex-col gap-2", appearance === "grouped" && "max-w-form", className), ...props, children: [
+    title || actions ? /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("div", { className: "flex min-h-control items-end gap-2", children: [
+      title ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Text, { as: "h2", variant: "headline", className: "flex-1", truncate: true, children: title }) : /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "flex-1" }),
+      actions ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "flex items-center gap-2", children: actions }) : null
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      "div",
+      {
+        "data-appearance": appearance,
+        className: cn(
+          "flex flex-col [&>[data-slot=row]+[data-slot=row]]:before:block",
+          appearance === "grouped" && "max-w-form overflow-hidden rounded-group bg-group shadow-raised"
+        ),
+        children
+      }
+    ),
+    footer ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Text, { as: "p", variant: "caption", tone: "secondary", children: footer }) : null
+  ] });
+}
+function SectionContent({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { "data-slot": "row", className: cn("relative px-3 py-3", className), ...props });
+}
+var Row = React10.forwardRef(function Row2({ icon, title, subtitle, value, accessory, chevron, onSelect, selected, disabled, destructive, mono, className, style, ...props }, ref) {
+  const interactive = Boolean(onSelect) && !disabled;
+  const body = /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+    icon ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "flex size-icon-lg shrink-0 items-center justify-center text-label-secondary [&_svg]:size-icon", children: icon }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { className: "flex min-w-0 flex-1 flex-col", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Text, { tone: destructive ? "danger" : "primary", mono, truncate: true, className: cn(selected && "text-inherit"), children: title }),
+      subtitle ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Text, { variant: "callout", tone: "secondary", truncate: true, className: cn(selected && "text-inherit opacity-80"), children: subtitle }) : null
+    ] }),
+    value !== void 0 && value !== null ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Text, { tone: "secondary", tabular: true, truncate: true, className: cn("max-w-1/2 shrink-0 text-right", selected && "text-inherit opacity-80"), children: value }) : null,
+    accessory ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      "span",
+      {
+        className: "flex shrink-0 items-center gap-2",
+        onClick: (event) => event.stopPropagation(),
+        onKeyDown: (event) => event.stopPropagation(),
+        children: accessory
+      }
+    ) : null,
+    chevron ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(ChevronRightIcon, { "aria-hidden": true, className: "size-icon-sm shrink-0 text-label-tertiary" }) : null
+  ] });
+  const rowClass = cn(
+    "relative flex w-full items-center gap-3 px-3 text-left before:absolute before:right-0 before:top-0 before:hidden before:h-px before:bg-separator",
+    icon ? "before:left-11" : "before:left-3",
+    subtitle ? "min-h-row-tall py-1.5" : "min-h-row py-1",
+    disabled && "opacity-40",
+    selected && "bg-selection text-selection-label",
+    className
+  );
+  if (interactive) {
+    return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+      "button",
+      {
+        ref,
+        type: "button",
+        "data-slot": "row",
+        "aria-current": selected || void 0,
+        onClick: onSelect,
+        style,
+        className: cn(rowClass, "focus-ring -outline-offset-3 transition-colors duration-100", !selected && "hover:bg-fill active:bg-fill-secondary"),
+        ...props,
+        children: body
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { ref, "data-slot": "row", style, className: rowClass, ...props, children: body });
+});
+function FieldRow({ label, field, action, onSubmit, stacked, className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    "form",
+    {
+      "data-slot": "row",
+      noValidate: true,
+      onSubmit: (event) => {
+        event.preventDefault();
+        onSubmit?.();
+      },
+      className: cn(
+        "relative flex min-h-row w-full gap-3 px-3 py-1.5 before:absolute before:left-3 before:right-0 before:top-0 before:hidden before:h-px before:bg-separator",
+        stacked ? "flex-col py-3" : "items-center",
+        className
+      ),
+      ...props,
+      children: [
+        label ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Text, { variant: "body", className: "w-32 shrink-0", truncate: true, children: label }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "min-w-0 flex-1", children: field }),
+        action ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: cn("flex shrink-0 items-center gap-2", stacked && "self-end"), children: action }) : null
+      ]
+    }
+  );
+}
+
+// src/desktop/code-block.tsx
+var React11 = __toESM(require("react"), 1);
+var import_jsx_runtime15 = require("react/jsx-runtime");
+function CodeBlock({ scroll = true, follow = false, className, children, ...props }) {
+  const ref = React11.useRef(null);
+  const pinned = React11.useRef(true);
+  React11.useLayoutEffect(() => {
+    const el = ref.current;
+    if (follow && el && pinned.current) el.scrollTop = el.scrollHeight;
+  }, [follow, children]);
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    "pre",
+    {
+      ref,
+      onScroll: (event) => {
+        const el = event.currentTarget;
+        pinned.current = el.scrollHeight - el.scrollTop - el.clientHeight < 8;
+      },
+      "data-slot": "code-block",
+      className: cn(
+        "m-0 select-text whitespace-pre-wrap break-words rounded-control bg-fill px-3 py-2 font-mono text-callout text-label",
+        scroll && "max-h-80 overflow-y-auto",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+
+// src/desktop/table.tsx
+var React18 = __toESM(require("react"), 1);
+
+// src/alert-dialog.tsx
+var AlertDialogPrimitive = __toESM(require("@radix-ui/react-alert-dialog"), 1);
+var import_react_tree = require("@ai-matrx/kit/react-tree");
+var React14 = __toESM(require("react"), 1);
+
+// src/button.tsx
+var import_react_slot2 = require("@radix-ui/react-slot");
+var import_class_variance_authority3 = require("class-variance-authority");
+var React12 = __toESM(require("react"), 1);
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var buttonVariants2 = (0, import_class_variance_authority3.cva)(
+  "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",
+  {
+    variants: {
+      variant: {
+        default: "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90",
+        /**
+         * An explicit spelling of `default`, identical by construction. It is
+         * not decoration: matrx-frontend's `ButtonMine` fork carried it, ~17
+         * call sites say `variant="primary"`, and the alternative to keeping
+         * the word was a host shim translating a prop — the massage C22 bans.
+         */
+        primary: "bg-primary text-primary-foreground shadow-sm hover:bg-primary/90",
+        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
+        /** The affirmative twin of `destructive` — confirm, approve, publish. */
+        success: "bg-success text-success-foreground shadow-sm hover:bg-success/90",
+        outline: "border border-border bg-card shadow-sm hover:bg-accent hover:text-accent-foreground",
+        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
+        ghost: "hover:bg-accent hover:text-accent-foreground",
+        link: "text-primary underline-offset-4 hover:underline",
+        subtle: "border border-transparent bg-muted/50 text-foreground hover:border-border hover:bg-muted"
+      },
+      /**
+       * ONE size scale, xs → 3xl, plus the two icon boxes. The top and bottom
+       * of the scale came in from matrx-frontend's `ButtonMine` fork (2026-09-07):
+       * a dense toolbar needs `xs`, and a marketing/hero call to action needs
+       * `xl`+. A host that has to reach outside this scale forks the button,
+       * which is exactly how `ButtonMine` was born.
+       */
+      size: {
+        xs: "h-6 rounded-md px-1 text-xs",
+        sm: "h-8 rounded-md px-3 text-xs",
+        default: "h-9 px-4 py-2",
+        /** An explicit spelling of `default` (the fork's middle rung). */
+        md: "h-9 px-4 py-2",
+        lg: "h-10 rounded-md px-6",
+        xl: "h-12 px-8 py-3 text-base",
+        "2xl": "h-14 px-10 py-3 text-base",
+        "3xl": "h-16 px-12 py-3 text-base",
+        icon: "h-9 w-9",
+        "icon-sm": "h-7 w-7",
+        /** A circular icon box — an avatar-shaped control, not a square one. */
+        roundIcon: "h-8 w-8 rounded-full p-0"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      size: "default"
+    }
+  }
+);
+var TOUCH_FLOOR_SIZES = /* @__PURE__ */ new Set([
+  "xs",
+  "sm",
+  "default",
+  "md",
+  "lg",
+  "icon",
+  "icon-sm",
+  "roundIcon"
+]);
+var SQUARE_SIZES = /* @__PURE__ */ new Set(["icon", "icon-sm", "roundIcon"]);
+function swallowClick(event) {
+  event.preventDefault();
+  event.stopPropagation();
+}
+var Button3 = React12.forwardRef(
+  ({ className, variant, size, asChild = false, onClick, ...props }, ref) => {
+    const Component = asChild ? import_react_slot2.Slot : "button";
+    const resolvedSize = size ?? "default";
+    const disabledChild = asChild && Boolean(props.disabled);
+    const ariaDisabled = props["aria-disabled"];
+    const inert = disabledChild || ariaDisabled === true || ariaDisabled === "true";
+    return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      Component,
+      {
+        className: cn2(buttonVariants2({ variant, size, className })),
+        "data-matrx-button": "",
+        "data-tap-floor": TOUCH_FLOOR_SIZES.has(resolvedSize) ? "" : void 0,
+        "data-tap-floor-square": SQUARE_SIZES.has(resolvedSize) ? "" : void 0,
+        ref,
+        ...props,
+        "aria-disabled": disabledChild ? true : ariaDisabled,
+        tabIndex: disabledChild ? -1 : props.tabIndex,
+        onClick: inert ? swallowClick : onClick
+      }
+    );
+  }
+);
+Button3.displayName = "Button";
+
+// src/floating-layer.tsx
+var import_react_focus_scope = require("@radix-ui/react-focus-scope");
+var import_react_slot3 = require("@radix-ui/react-slot");
+var React13 = __toESM(require("react"), 1);
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var FLOATING_LAYER_ATTR = "data-matrx-floating-layer";
+var REGISTRY_SLOT = /* @__PURE__ */ Symbol.for("ai-matrx.design-system.modal-layer-registry");
+var registryHost = globalThis;
+var registry = registryHost[REGISTRY_SLOT] ??= {
+  count: 0,
+  listeners: /* @__PURE__ */ new Set()
+};
+function emit() {
+  for (const listener of registry.listeners) listener();
+}
+var SCROLL_EVENTS = ["wheel", "touchmove"];
+function stopAtBody(event) {
+  if (isInsideFloatingLayer(event.target)) event.stopPropagation();
+}
+function setScrollPassthrough(on) {
+  if (typeof document === "undefined" || !document.body) return;
+  for (const type of SCROLL_EVENTS) {
+    if (on) document.body.addEventListener(type, stopAtBody, { passive: true });
+    else document.body.removeEventListener(type, stopAtBody);
+  }
+}
+function registerModalLayer() {
+  registry.count += 1;
+  if (registry.count === 1) setScrollPassthrough(true);
+  emit();
+  let released = false;
+  return () => {
+    if (released) return;
+    released = true;
+    registry.count = Math.max(0, registry.count - 1);
+    if (registry.count === 0) setScrollPassthrough(false);
+    emit();
+  };
+}
+function isModalLayerOpen() {
+  return registry.count > 0;
+}
+function useModalLayer(active) {
+  React13.useLayoutEffect(() => active ? registerModalLayer() : void 0, [active]);
+}
+var POPPER_WRAPPER = "[data-radix-popper-content-wrapper]";
+function isInsideFloatingLayer(target) {
+  if (!(target instanceof Element)) return false;
+  if (target.closest(`[${FLOATING_LAYER_ATTR}]`)) return true;
+  return target.closest(POPPER_WRAPPER) !== null && target.ownerDocument.querySelector(`[${FLOATING_LAYER_ATTR}]`) !== null;
+}
+function keepFloatingLayersInside(handler) {
+  return (event) => {
+    handler?.(event);
+    if (isInsideFloatingLayer(event.target)) event.preventDefault();
+  };
+}
+var preventAutoFocus = (event) => event.preventDefault();
+var FloatingLayer = React13.forwardRef(({ children }, ref) => {
+  const [opener] = React13.useState(
+    () => typeof document === "undefined" ? null : document.activeElement
+  );
+  const returnFocus = (event) => {
+    event.preventDefault();
+    const active = document.activeElement;
+    const lost = !active || active === document.body || !active.isConnected;
+    if (lost && isModalLayerOpen() && opener instanceof HTMLElement && opener.isConnected) {
+      opener.focus({ preventScroll: true });
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    import_react_focus_scope.FocusScope,
+    {
+      asChild: true,
+      trapped: false,
+      loop: false,
+      onMountAutoFocus: preventAutoFocus,
+      onUnmountAutoFocus: returnFocus,
+      children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+        import_react_slot3.Slot,
+        {
+          ref,
+          ...{ [FLOATING_LAYER_ATTR]: "" },
+          style: { pointerEvents: "auto" },
+          children
+        }
+      )
+    }
+  );
+});
+FloatingLayer.displayName = "FloatingLayer";
+
+// src/alert-dialog.tsx
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var AlertDialog = AlertDialogPrimitive.Root;
+var AlertDialogPortal = ({
+  container,
+  ...props
+}) => {
+  const resolved = usePortalContainer(container);
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AlertDialogPrimitive.Portal, { container: resolved ?? null, ...props });
+};
+AlertDialogPortal.displayName = "AlertDialogPortal";
+var AlertDialogOverlay = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  AlertDialogPrimitive.Overlay,
+  {
+    ref,
+    "data-slot": "alert-dialog-overlay",
+    className: cn2(
+      "fixed inset-0 z-[10000] bg-[var(--matrx-overlay-scrim)]",
+      MOTION_OVERLAY,
+      className
+    ),
+    ...props
+  }
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
+var AlertDialogContentPrimitive = React14.forwardRef((props, ref) => {
+  useModalLayer(true);
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AlertDialogPrimitive.Content, { ...props, ref, "aria-modal": "true" });
+});
+AlertDialogContentPrimitive.displayName = "AlertDialogContentPrimitive";
+var AlertDialogDescription = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  AlertDialogPrimitive.Description,
+  {
+    ref,
+    "data-slot": "alert-dialog-description",
+    className: cn2("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+AlertDialogDescription.displayName = AlertDialogPrimitive.Description.displayName;
+var AlertDialogContent = React14.forwardRef(({ className, children, container, animated = true, ...props }, ref) => {
+  const hasDescription = (0, import_react_tree.treeContainsComponent)(children, AlertDialogDescription) || (0, import_react_tree.treeContainsComponent)(children, AlertDialogPrimitive.Description);
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(AlertDialogPortal, { container, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AlertDialogOverlay, {}),
+    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+      AlertDialogContentPrimitive,
+      {
+        ref,
+        "data-slot": "alert-dialog-content",
+        className: cn2(
+          `matrx-dialog-card fixed left-[50%] top-[50%] z-[10000] grid min-w-0 w-full max-w-lg ${CENTERED_DIALOG} gap-4 border bg-background p-6 shadow-lg`,
+          // Ruling 3 — never taller than the viewport, always scrollable, and
+          // the footer stays reachable via --dialog-pad like Dialog's.
+          // Ruling 5 (0.11.3) — `matrx-dialog-card` hands the bottom padding to
+          // a sticky footer when there is one, so the footer's box matches the
+          // space the grid gave it and sticky never clamps it up over the
+          // consequence copy.
+          "max-h-[85dvh] overflow-y-auto overscroll-contain [--dialog-pad:1.5rem] overflow-x-clip [overflow-wrap:anywhere] [&>*]:min-w-0 [&>*]:max-w-full",
+          "sm:rounded-lg",
+          animated && MOTION_DIALOG,
+          className
+        ),
+        ...props,
+        children: [
+          hasDescription ? null : /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(AlertDialogPrimitive.Description, { className: "sr-only", children: "Please confirm the action described in this dialog." }),
+          children
+        ]
+      }
+    )
+  ] });
+});
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
+var AlertDialogHeader = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  "div",
+  {
+    "data-slot": "alert-dialog-header",
+    className: cn2("flex flex-col space-y-2 text-center sm:text-left", className),
+    ...props
+  }
+);
+AlertDialogHeader.displayName = "AlertDialogHeader";
+var AlertDialogFooter = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  "div",
+  {
+    "data-slot": "alert-dialog-footer",
+    className: cn2(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      // Ruling 3/4 — sticky to the card edges so a scrolled body never shows
+      // through under the actions, and safe-area padded on a phone.
+      //
+      // 🚨 THERE IS NO `mb-[…]` HERE, AND THERE MUST NEVER BE ONE AGAIN
+      // (0.11.3, feedback bf8fb00b). The bleed over the card's bottom padding
+      // used to be a NEGATIVE BLOCK MARGIN, which makes this box taller than
+      // the grid area the card allocates it — and `position: sticky` CLAMPS a
+      // box to its containing block, so the browser yanked the footer UP by
+      // `--dialog-pad` against the card's `gap-4` and painted 8px of opaque
+      // footer over the last line of the consequence, at every length. The
+      // card now RESERVES this footer's block size instead (`matrx-dialog-card`
+      // in styles.css hands over its `padding-bottom`), so the bleed costs no
+      // margin at all. Guard: `sticky-footer-geometry.test.tsx`.
+      //
+      // These stay UTILITIES rather than a shipped rule so a caller's
+      // `className` still wins through tailwind-merge — a shipped rule would
+      // have to be unlayered to survive Tailwind preflight (§ THE PREFLIGHT
+      // RULE in styles.css) and would then override every caller's padding.
+      "sticky bottom-0 z-10 bg-background pt-3",
+      "mx-[calc(var(--dialog-pad,0px)*-1)] px-[var(--dialog-pad,0px)] pb-[var(--dialog-pad,0px)]",
+      className
+    ),
+    ...props
+  }
+);
+AlertDialogFooter.displayName = "AlertDialogFooter";
+var AlertDialogTitle = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  AlertDialogPrimitive.Title,
+  {
+    ref,
+    "data-slot": "alert-dialog-title",
+    className: cn2("text-lg font-semibold", className),
+    ...props
+  }
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
+var AlertDialogAction = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  AlertDialogPrimitive.Action,
+  {
+    ref,
+    "data-slot": "alert-dialog-action",
+    className: cn2(buttonVariants2(), className),
+    ...props
+  }
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
+var AlertDialogCancel = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+  AlertDialogPrimitive.Cancel,
+  {
+    ref,
+    "data-slot": "alert-dialog-cancel",
+    className: cn2(
+      buttonVariants2({ variant: "outline" }),
+      "mt-2 sm:mt-0",
+      className
+    ),
+    ...props
+  }
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
+
+// src/confirm-dialog.tsx
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function ConfirmDialog({
+  open,
+  onOpenChange,
+  title,
+  description,
+  content,
+  contentClassName,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  variant = "default",
+  busy = false,
+  confirmDisabled = false,
+  confirmHeld = false,
+  portalContainer,
+  onConfirm
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(AlertDialog, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+    AlertDialogContent,
+    {
+      className: contentClassName,
+      ...portalContainer === void 0 ? {} : { container: portalContainer },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(AlertDialogHeader, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(AlertDialogTitle, { children: title }),
+          description ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(AlertDialogDescription, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { children: description }) }) : null
+        ] }),
+        content ?? null,
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(AlertDialogFooter, { children: [
+          cancelLabel === null ? null : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(AlertDialogCancel, { className: "max-lg:min-h-11", disabled: busy, children: cancelLabel }),
+          confirmHeld ? null : /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+            AlertDialogAction,
+            {
+              disabled: busy || confirmDisabled,
+              onClick: (event) => {
+                event.preventDefault();
+                void onConfirm();
+              },
+              className: cn2(
+                "max-lg:min-h-11",
+                // One source of button appearance: the destructive look comes
+                // from `buttonVariants`, not a second hand-written copy of it.
+                // tailwind-merge makes it WIN over the default variant classes.
+                variant === "destructive" && buttonVariants2({ variant: "destructive" })
+              ),
+              children: [
+                busy ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Loader2Icon, { className: cn2("mr-2 h-4 w-4", MOTION_SPIN) }) : null,
+                confirmLabel
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  ) });
+}
+
+// src/dropdown-menu.tsx
+var DropdownMenuPrimitive = __toESM(require("@radix-ui/react-dropdown-menu"), 1);
+var React17 = __toESM(require("react"), 1);
+
+// src/menu-scroll-edges.tsx
+var React15 = __toESM(require("react"), 1);
+
+// src/use-scroll-fade.ts
+var import_react = require("react");
+var EPSILON = 2;
+function useScrollFade() {
+  const [state, setState] = (0, import_react.useState)({
+    top: false,
+    bottom: false
+  });
+  const nodeRef = (0, import_react.useRef)(null);
+  const cleanupRef = (0, import_react.useRef)(null);
+  const measure = (0, import_react.useCallback)(() => {
+    const el = nodeRef.current;
+    if (!el) return;
+    const overflowing = el.scrollHeight - el.clientHeight > EPSILON;
+    const next = {
+      top: overflowing && el.scrollTop > EPSILON,
+      bottom: overflowing && el.scrollTop + el.clientHeight < el.scrollHeight - EPSILON
+    };
+    setState(
+      (prev) => prev.top === next.top && prev.bottom === next.bottom ? prev : next
+    );
+  }, []);
+  const ref = (0, import_react.useCallback)(
+    (node) => {
+      cleanupRef.current?.();
+      cleanupRef.current = null;
+      nodeRef.current = node;
+      if (!node) return;
+      node.addEventListener("scroll", measure, { passive: true });
+      const ro = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
+      ro?.observe(node);
+      const mo = new MutationObserver(measure);
+      mo.observe(node, { childList: true, subtree: true });
+      cleanupRef.current = () => {
+        node.removeEventListener("scroll", measure);
+        ro?.disconnect();
+        mo.disconnect();
+      };
+      requestAnimationFrame(measure);
+    },
+    [measure]
+  );
+  (0, import_react.useEffect)(() => () => cleanupRef.current?.(), []);
+  return {
+    ref,
+    state,
+    fadeProps: {
+      "data-fade-top": state.top ? "" : void 0,
+      "data-fade-bottom": state.bottom ? "" : void 0,
+      className: "matrx-scroll-fade"
+    }
+  };
+}
+
+// src/menu-scroll-edges.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var HOVER_SPEED = 0.6;
+var PAGE_OVERLAP = 48;
+function composeRefs(...refs) {
+  return (node) => {
+    for (const ref of refs) {
+      if (typeof ref === "function") ref(node);
+      else if (ref) ref.current = node;
+    }
+  };
+}
+function MenuScrollEdge({ side, scroller }) {
+  const frame = React15.useRef(null);
+  const dir = side === "top" ? -1 : 1;
+  const stop = React15.useCallback(() => {
+    if (frame.current !== null) cancelAnimationFrame(frame.current);
+    frame.current = null;
+  }, []);
+  const glide = React15.useCallback(() => {
+    stop();
+    let last = performance.now();
+    const step = (now) => {
+      const el = scroller.current;
+      if (!el) return stop();
+      el.scrollTop += dir * HOVER_SPEED * (now - last);
+      last = now;
+      frame.current = requestAnimationFrame(step);
+    };
+    frame.current = requestAnimationFrame(step);
+  }, [dir, scroller, stop]);
+  React15.useEffect(() => stop, [stop]);
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { "aria-hidden": true, "data-menu-scroll-edge": side, className: "matrx-menu-scroll-edge", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "matrx-menu-scroll-fade", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+    "div",
+    {
+      "data-menu-scroll-button": "",
+      className: "matrx-menu-scroll-button",
+      onPointerEnter: (e) => {
+        if (e.pointerType !== "touch") glide();
+      },
+      onPointerLeave: stop,
+      onPointerDown: (e) => {
+        e.preventDefault();
+        const el = scroller.current;
+        if (!el) return;
+        el.scrollTop += dir * Math.max(el.clientHeight - PAGE_OVERLAP, PAGE_OVERLAP);
+      },
+      children: side === "top" ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(RadixChevronUpIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(RadixChevronDownIcon, {})
+    }
+  ) }) });
+}
+function useMenuScrollEdges(...forwarded) {
+  const fade = useScrollFade();
+  const scroller = React15.useRef(null);
+  const ref = React15.useCallback(composeRefs(scroller, fade.ref, ...forwarded), [
+    fade.ref,
+    ...forwarded
+  ]);
+  const wrap = (children) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_jsx_runtime20.Fragment, { children: [
+    fade.state.top ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(MenuScrollEdge, { side: "top", scroller }) : null,
+    children,
+    fade.state.bottom ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(MenuScrollEdge, { side: "bottom", scroller }) : null
+  ] });
+  return { ref, wrap, surfaceClassName: "matrx-menu-surface" };
+}
+
+// src/submenu-focus.ts
+var React16 = __toESM(require("react"), 1);
+function useSubmenuSurvivesParentPanelFocus(forwardedRef, onFocusOutside) {
+  const content = React16.useRef(null);
+  const ref = React16.useCallback(
+    (node) => {
+      content.current = node;
+      if (typeof forwardedRef === "function") forwardedRef(node);
+      else if (forwardedRef) forwardedRef.current = node;
+    },
+    [forwardedRef]
+  );
+  const handle = (event) => {
+    onFocusOutside?.(event);
+    if (event.defaultPrevented) return;
+    const to = event.target;
+    const id = content.current?.id;
+    if (!(to instanceof Element) || !id || to.getAttribute("role") !== "menu") return;
+    const holdsTrigger = Array.from(to.querySelectorAll("[aria-controls]")).some((el) => el.getAttribute("aria-controls") === id);
+    if (holdsTrigger) event.preventDefault();
+  };
+  return { ref, onFocusOutside: handle };
+}
+
+// src/dropdown-menu.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var DropdownMenu = DropdownMenuPrimitive.Root;
+var DropdownMenuTrigger = DropdownMenuPrimitive.Trigger;
+var DropdownMenuGroup = DropdownMenuPrimitive.Group;
+var DropdownMenuSub = DropdownMenuPrimitive.Sub;
+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 = React17.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  DropdownMenuPrimitive.SubTrigger,
+  {
+    ref,
+    "data-slot": "dropdown-menu-sub-trigger",
+    className: cn2(
+      "flex select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent",
+      inset && "pl-8",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(RadixChevronRightIcon, { className: "ml-auto h-4 w-4" })
+    ]
+  }
+));
+DropdownMenuSubTrigger.displayName = DropdownMenuPrimitive.SubTrigger.displayName;
+var DropdownMenuSubContent = React17.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);
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DropdownMenuPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    DropdownMenuPrimitive.SubContent,
+    {
+      ref: edges.ref,
+      onFocusOutside: keep.onFocusOutside,
+      "data-slot": "dropdown-menu-sub-content",
+      sideOffset,
+      alignOffset,
+      collisionPadding,
+      className: cn2(MENU_SURFACE_CLASS, edges.surfaceClassName, "shadow-lg", MOTION_POPPER, className),
+      ...props,
+      children: edges.wrap(children)
+    }
+  ) });
+});
+DropdownMenuSubContent.displayName = DropdownMenuPrimitive.SubContent.displayName;
+var DropdownMenuContent = React17.forwardRef(({ className, sideOffset = 4, container, children, ...props }, ref) => {
+  const portalContainer = usePortalContainer(container);
+  const edges = useMenuScrollEdges(ref);
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DropdownMenuPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    DropdownMenuPrimitive.Content,
+    {
+      ref: edges.ref,
+      "data-slot": "dropdown-menu-content",
+      sideOffset,
+      className: cn2(
+        MENU_SURFACE_CLASS,
+        edges.surfaceClassName,
+        "shadow-md",
+        MOTION_POPPER,
+        className
+      ),
+      ...props,
+      children: edges.wrap(children)
+    }
+  ) });
+});
+DropdownMenuContent.displayName = DropdownMenuPrimitive.Content.displayName;
+var DropdownMenuItem = React17.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  DropdownMenuPrimitive.Item,
+  {
+    ref,
+    "data-slot": "dropdown-menu-item",
+    className: cn2(MENU_ITEM_CLASS, inset && "pl-8", className),
+    ...props
+  }
+));
+DropdownMenuItem.displayName = DropdownMenuPrimitive.Item.displayName;
+var DropdownMenuCheckboxItem = React17.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  DropdownMenuPrimitive.CheckboxItem,
+  {
+    ref,
+    "data-slot": "dropdown-menu-checkbox-item",
+    className: cn2(MENU_INDICATOR_ITEM_CLASS, className),
+    ...props,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(CheckIcon, { className: "h-4 w-4" }) }) }),
+      children
+    ]
+  }
+));
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
+var DropdownMenuRadioItem = React17.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(
+  DropdownMenuPrimitive.RadioItem,
+  {
+    ref,
+    "data-slot": "dropdown-menu-radio-item",
+    className: cn2(MENU_INDICATOR_ITEM_CLASS, className),
+    ...props,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(DotFilledIcon, { className: "h-4 w-4 fill-current" }) }) }),
+      children
+    ]
+  }
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+var DropdownMenuLabel = React17.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  DropdownMenuPrimitive.Label,
+  {
+    ref,
+    "data-slot": "dropdown-menu-label",
+    className: cn2("px-2 py-1.5 text-sm font-semibold", inset && "pl-8", className),
+    ...props
+  }
+));
+DropdownMenuLabel.displayName = DropdownMenuPrimitive.Label.displayName;
+var DropdownMenuSeparator = React17.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  DropdownMenuPrimitive.Separator,
+  {
+    ref,
+    "data-slot": "dropdown-menu-separator",
+    className: cn2("-mx-1 my-1 h-px bg-muted", className),
+    ...props
+  }
+));
+DropdownMenuSeparator.displayName = DropdownMenuPrimitive.Separator.displayName;
+var DropdownMenuShortcut = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  "span",
+  {
+    "data-slot": "dropdown-menu-shortcut",
+    className: cn2("ml-auto text-xs tracking-widest opacity-60", className),
+    ...props
+  }
+);
+DropdownMenuShortcut.displayName = "DropdownMenuShortcut";
+
+// src/desktop/table.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+var WIDTH2 = { auto: "", fit: "w-px whitespace-nowrap", xs: "w-16", sm: "w-24", md: "w-36", lg: "w-56" };
+var ALIGN = { start: "text-left", end: "text-right", center: "text-center" };
+var CONTROL_TAGS = /* @__PURE__ */ new Set(["BUTTON", "A", "INPUT", "SELECT", "TEXTAREA"]);
+function insideControl(target, row) {
+  for (let el = target; el && el !== row; el = el.parentElement) {
+    if (CONTROL_TAGS.has(el.tagName) || el.getAttribute("role") === "menuitem") return true;
+  }
+  return false;
+}
+function DataTable({
+  columns,
+  rows,
+  rowKey,
+  onRowSelect,
+  selectedKey,
+  empty,
+  striped = true,
+  detail,
+  isDisabled,
+  rowAction,
+  rowMenu,
+  defaultSort,
+  rowData,
+  className,
+  "aria-label": ariaLabel,
+  ...rest
+}) {
+  const bodyRef = React18.useRef(null);
+  const [expanded, setExpanded] = React18.useState(() => /* @__PURE__ */ new Set());
+  const toggle = (key, open) => setExpanded((prev) => {
+    const next = new Set(prev);
+    if (open ?? !next.has(key)) next.add(key);
+    else next.delete(key);
+    return next;
+  });
+  const [sort, setSort] = React18.useState(defaultSort ?? null);
+  const sortColumn = sort ? columns.find((c) => c.key === sort.key && c.sort) : void 0;
+  const ordered = React18.useMemo(() => {
+    if (!sort || !sortColumn?.sort) return rows;
+    const by = sortColumn.sort;
+    const sign = sort.direction === "ascending" ? 1 : -1;
+    return [...rows].sort((a, b) => sign * by(a, b));
+  }, [rows, sort, sortColumn]);
+  const toggleSort = (key) => setSort((prev) => prev?.key === key ? { key, direction: prev.direction === "ascending" ? "descending" : "ascending" } : { key, direction: "descending" });
+  const hasActions = Boolean(rowAction || rowMenu);
+  const span = columns.length + (detail ? 1 : 0) + (hasActions ? 1 : 0);
+  const moveFocus = (event, delta) => {
+    const rowsEls = Array.from(bodyRef.current?.rows ?? []).filter((tr) => tr.tabIndex >= 0);
+    const next = rowsEls[rowsEls.indexOf(event.currentTarget) + delta];
+    if (next) {
+      event.preventDefault();
+      next.focus();
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { "data-slot": "data-table", className: cn("overflow-hidden rounded-group bg-content shadow-raised", className), ...rest, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("table", { "aria-label": ariaLabel, className: "w-full table-auto border-collapse text-body", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("tr", { className: "h-row-compact border-b border-separator", children: [
+      detail ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("th", { "aria-hidden": true, className: "w-6" }) : null,
+      columns.map((column) => {
+        const sorted = sort?.key === column.key ? sort.direction : void 0;
+        return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+          "th",
+          {
+            scope: "col",
+            "aria-sort": column.sort ? sorted ?? "none" : void 0,
+            className: cn(
+              "px-3 text-caption font-medium text-label-secondary",
+              WIDTH2[column.width ?? "auto"],
+              ALIGN[column.align ?? (column.numeric ? "end" : "start")]
+            ),
+            children: column.sort ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+              "button",
+              {
+                type: "button",
+                onClick: () => toggleSort(column.key),
+                className: cn(
+                  "focus-ring inline-flex items-center gap-1 rounded-control hover:text-label",
+                  sorted && "text-label",
+                  (column.align ?? (column.numeric ? "end" : "start")) === "end" && "flex-row-reverse"
+                ),
+                children: [
+                  column.header,
+                  /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                    ChevronDownIcon,
+                    {
+                      "aria-hidden": true,
+                      className: cn("size-2.5 transition-transform duration-100", !sorted && "invisible", sorted === "ascending" && "rotate-180")
+                    }
+                  )
+                ]
+              }
+            ) : column.header
+          },
+          column.key
+        );
+      }),
+      hasActions ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("th", { "aria-label": "Actions", className: "w-px" }) : null
+    ] }) }),
+    rows.length === 0 && empty ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("tbody", { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { colSpan: span, children: empty }) }) }) : /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("tbody", { ref: bodyRef, children: ordered.map((row, index) => {
+      const key = rowKey(row);
+      const selected = selectedKey === key;
+      const disabled = isDisabled?.(row) ?? false;
+      const content = detail && !disabled ? detail(row) : null;
+      const open = content !== null && expanded.has(key);
+      const activate = onRowSelect ? () => onRowSelect(row) : content !== null ? () => toggle(key) : void 0;
+      const focusable = Boolean(activate) && !disabled;
+      return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(React18.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+          "tr",
+          {
+            ...rowData?.(row),
+            tabIndex: focusable ? 0 : void 0,
+            "aria-selected": onRowSelect ? selected : void 0,
+            "aria-expanded": content !== null ? open : void 0,
+            "aria-disabled": disabled || void 0,
+            "data-row-key": key,
+            onClick: focusable ? (event) => {
+              if (insideControl(event.target, event.currentTarget)) return;
+              activate?.();
+            } : void 0,
+            onKeyDown: focusable ? (event) => {
+              if (event.key === "Enter" || event.key === " ") {
+                event.preventDefault();
+                activate?.();
+              } else if (event.key === "ArrowDown") moveFocus(event, 1);
+              else if (event.key === "ArrowUp") moveFocus(event, -1);
+              else if (event.key === "ArrowRight" && content !== null) toggle(key, true);
+              else if (event.key === "ArrowLeft" && content !== null) toggle(key, false);
+            } : void 0,
+            className: cn(
+              "group/row h-row-compact",
+              striped && index % 2 === 1 && "bg-fill",
+              focusable && "focus-ring -outline-offset-3",
+              disabled && "text-label-tertiary",
+              selected && "bg-selection text-selection-label"
+            ),
+            children: [
+              detail ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { className: "w-6 pl-2", children: content !== null ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                ChevronRightIcon,
+                {
+                  "aria-hidden": true,
+                  className: cn("size-icon-sm text-label-secondary transition-transform duration-100", open && "rotate-90")
+                }
+              ) : null }) : null,
+              columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                "td",
+                {
+                  className: cn(
+                    "max-w-0 truncate px-3",
+                    WIDTH2[column.width ?? "auto"],
+                    ALIGN[column.align ?? (column.numeric ? "end" : "start")],
+                    column.numeric && "tabular-nums",
+                    column.mono && "font-mono text-callout",
+                    column.width === "fit" && "max-w-none"
+                  ),
+                  children: column.cell(row)
+                },
+                column.key
+              )),
+              hasActions ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+                "td",
+                {
+                  className: cn(
+                    "w-px whitespace-nowrap px-2",
+                    // Finder: a row's buttons appear on hover, keyboard focus or selection only.
+                    !selected && "opacity-0 group-hover/row:opacity-100 group-focus-within/row:opacity-100 has-[[data-state=open]]:opacity-100"
+                  ),
+                  children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(RowActions, { action: rowAction?.(row) ?? null, menu: rowMenu?.(row) ?? null })
+                }
+              ) : null
+            ]
+          }
+        ),
+        open ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("tr", { className: cn(striped && index % 2 === 1 && "bg-fill"), children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("td", { colSpan: span, className: "px-3 pb-2 pl-9", children: content }) }) : null
+      ] }, key);
+    }) })
+  ] }) });
+}
+function RowActions({ action, menu }) {
+  const [asking, setAsking] = React18.useState(null);
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { className: "flex items-center justify-end gap-1", children: [
+    action ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Button, { size: "sm", disabled: action.disabled ?? false, onClick: action.onSelect, children: action.label }) : null,
+    menu && menu.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(DropdownMenu, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(IconButton, { size: "sm", label: "More", icon: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(MoreHorizontalIcon, {}) }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(DropdownMenuContent, { align: "end", children: menu.map((item) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+        DropdownMenuItem,
+        {
+          disabled: item.disabled ?? false,
+          onSelect: () => item.destructive && item.confirm ? setAsking(item) : item.onSelect(),
+          className: item.destructive ? "text-system-red focus:text-system-red" : void 0,
+          children: item.label
+        },
+        item.label
+      )) })
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      ConfirmDialog,
+      {
+        open: asking !== null,
+        onOpenChange: (open) => open ? void 0 : setAsking(null),
+        title: asking?.confirm ?? "",
+        confirmLabel: asking?.label,
+        variant: "destructive",
+        onConfirm: () => {
+          asking?.onSelect();
+          setAsking(null);
+        }
+      }
+    )
+  ] });
+}
+
+// src/desktop/source-list.tsx
+var React19 = __toESM(require("react"), 1);
+var import_jsx_runtime23 = require("react/jsx-runtime");
+function SourceList({ className, onKeyDown, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    "nav",
+    {
+      "data-slot": "source-list",
+      className: cn("flex min-h-0 flex-col gap-3 px-2", className),
+      onKeyDown: (event) => {
+        onKeyDown?.(event);
+        if (event.defaultPrevented) return;
+        const keys = ["ArrowDown", "ArrowUp", "Home", "End"];
+        if (!keys.includes(event.key)) return;
+        const items = Array.from(event.currentTarget.querySelectorAll("[data-slot=source-list-item]:not(:disabled)"));
+        const at = items.indexOf(document.activeElement);
+        if (at === -1) return;
+        const next = event.key === "Home" ? 0 : event.key === "End" ? items.length - 1 : at + (event.key === "ArrowDown" ? 1 : -1);
+        const target = items[Math.max(0, Math.min(items.length - 1, next))];
+        if (target) {
+          event.preventDefault();
+          target.focus();
+        }
+      },
+      ...props
+    }
+  );
+}
+function SourceListSection({ title, action, className, children, ...props }) {
+  const id = React19.useId();
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { role: "group", "aria-labelledby": title ? id : void 0, "data-slot": "source-list-section", className: cn("flex flex-col", className), ...props, children: [
+    title || action ? /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: "flex h-row-compact items-center gap-2 px-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Text, { id, variant: "caption", tone: "tertiary", emphasized: true, className: "flex-1", truncate: true, children: title }),
+      action
+    ] }) : null,
+    children
+  ] });
+}
+var SourceListItem = React19.forwardRef(function SourceListItem2({ icon, label, hint, badge, current, className, type = "button", ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+    "button",
+    {
+      ref,
+      type,
+      "data-slot": "source-list-item",
+      "data-current": current || void 0,
+      "aria-current": current ? "page" : void 0,
+      className: cn(
+        "focus-ring group/item flex w-full items-center gap-2 rounded-control px-2 text-left text-body text-label transition-colors duration-100 hover:bg-fill disabled:opacity-40",
+        hint ? "min-h-row py-1" : "h-sidebar-row",
+        current && "bg-selection-muted font-medium hover:bg-selection-muted [[data-window-active=false]_&]:bg-fill",
+        className
+      ),
+      ...props,
+      children: [
+        icon ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: cn("flex size-icon shrink-0 items-center justify-center text-label-secondary [&_svg]:size-icon", hint && "self-start mt-px"), children: icon }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: "flex min-w-0 flex-1 flex-col", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "truncate", children: label }),
+          hint ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "truncate text-callout font-normal text-label-secondary", children: hint }) : null
+        ] }),
+        badge ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "flex shrink-0 items-center text-callout tabular-nums text-label-tertiary", children: badge }) : null
+      ]
+    }
+  );
+});
+function SourceListMore({ expanded, onToggle, className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+    "button",
+    {
+      ...props,
+      type: "button",
+      "data-slot": "source-list-more",
+      "aria-expanded": expanded,
+      onClick: onToggle,
+      className: cn("focus-ring flex h-sidebar-row w-full items-center rounded-control px-2 text-left text-callout text-label-tertiary hover:text-label-secondary", className),
+      children: expanded ? "Show less" : "Show more"
+    }
+  );
+}
+
+// src/desktop/state.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+function StateView({ kind, icon, title, message, actions, size = "inline", className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+    "div",
+    {
+      role: kind === "error" ? "alert" : kind === "loading" ? "status" : void 0,
+      "aria-busy": kind === "loading" || void 0,
+      "data-slot": "state-view",
+      "data-kind": kind,
+      className: cn(
+        "flex flex-col items-center justify-center gap-2 px-6 text-center",
+        size === "page" ? "h-full min-h-60 py-16" : "py-10",
+        className
+      ),
+      ...props,
+      children: [
+        kind === "loading" ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Spinner, { size: "lg" }) : icon ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+          "span",
+          {
+            className: cn(
+              "mb-1 flex items-center justify-center [&_svg]:size-icon-xl",
+              kind === "error" ? "text-system-red" : "text-label-tertiary"
+            ),
+            children: icon
+          }
+        ) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text, { variant: size === "page" ? "title-3" : "headline", tone: kind === "loading" ? "secondary" : "primary", children: title }),
+        message ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text, { as: "p", variant: "callout", tone: "secondary", selectable: kind === "error", className: "max-w-form", children: message }) : null,
+        actions ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "mt-2 flex items-center gap-2", children: actions }) : null
+      ]
+    }
+  );
+}
+var BANNER_TONE = {
+  neutral: { box: "bg-fill", icon: "text-label-secondary" },
+  info: { box: "bg-system-blue/10", icon: "text-system-blue" },
+  warning: { box: "bg-system-orange/12", icon: "text-system-orange" },
+  danger: { box: "bg-system-red/10", icon: "text-system-red" },
+  success: { box: "bg-system-green/10", icon: "text-system-green" }
+};
+function Banner({ tone, icon, title, message, actions, className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+    "div",
+    {
+      role: tone === "danger" || tone === "warning" ? "alert" : "status",
+      "data-slot": "banner",
+      "data-tone": tone,
+      className: cn("flex gap-2.5 rounded-group px-3 py-2", message ? "items-start" : "items-center", BANNER_TONE[tone].box, className),
+      ...props,
+      children: [
+        icon ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: cn("flex shrink-0 [&_svg]:size-icon", message && "mt-px", BANNER_TONE[tone].icon), children: icon }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text, { emphasized: true, children: title }),
+          message ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Text, { as: "p", variant: "callout", tone: "secondary", selectable: true, children: message }) : null
+        ] }),
+        actions ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex shrink-0 items-center gap-2", children: actions }) : null
+      ]
+    }
+  );
+}
+function AlertGlyph() {
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { d: "m21.73 18-8-14a2 2 0 0 0-3.48 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3" }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { d: "M12 9v4" }),
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("path", { d: "M12 17h.01" })
+  ] });
+}
+function ErrorBanner({ error, onDismiss, title = "That didn't work", ...props }) {
+  if (!error) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
+    Banner,
+    {
+      tone: "danger",
+      icon: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(AlertGlyph, {}),
+      title,
+      message: error.message,
+      actions: /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Button, { size: "sm", onClick: onDismiss, children: "Dismiss" }),
+      ...props
+    }
+  );
+}
+
+// src/desktop/resource.tsx
+var import_jsx_runtime25 = require("react/jsx-runtime");
+function Resource({ state, loading, failed, isEmpty, empty, size = "inline", children }) {
+  if (state.data === void 0) {
+    if (state.error) {
+      return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+        StateView,
+        {
+          kind: "error",
+          size,
+          title: failed,
+          message: state.error.message,
+          actions: state.refetch ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Button, { onClick: () => void state.refetch?.(), children: "Try again" }) : void 0
+        }
+      );
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(StateView, { kind: "loading", size, title: loading });
+  }
+  const blank = isEmpty ? isEmpty(state.data) : Array.isArray(state.data) && state.data.length === 0;
+  if (blank && empty) return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_jsx_runtime25.Fragment, { children: empty });
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_jsx_runtime25.Fragment, { children: children(state.data) });
+}
+
+// src/desktop/tag.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
+var TONE = {
+  neutral: "bg-fill-secondary text-label-secondary",
+  tint: "bg-tint/12 text-tint",
+  success: "bg-system-green/14 text-system-green",
+  warning: "bg-system-orange/14 text-system-orange",
+  danger: "bg-system-red/12 text-system-red"
+};
+function Tag({ tone = "neutral", className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    "span",
+    {
+      "data-slot": "tag",
+      "data-tone": tone,
+      className: cn(
+        "inline-flex h-4.5 shrink-0 items-center gap-1 whitespace-nowrap rounded-full px-1.5 text-caption font-medium [&_svg]:size-2.5",
+        TONE[tone],
+        className
+      ),
+      ...props
+    }
+  );
+}
+var DOT = {
+  neutral: "bg-system-gray",
+  success: "bg-system-green",
+  warning: "bg-system-orange",
+  danger: "bg-system-red",
+  tint: "bg-tint"
+};
+function StatusLight({ tone, label, className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    "span",
+    {
+      role: "img",
+      "aria-label": label,
+      "data-slot": "status-light",
+      className: cn("inline-block size-2 shrink-0 rounded-full", DOT[tone], className),
+      ...props
+    }
+  );
+}
+function Kbd({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    "kbd",
+    {
+      "data-slot": "kbd",
+      className: cn("inline-flex h-4.5 items-center rounded-control bg-fill-secondary px-1 font-sans text-caption text-label-secondary", className),
+      ...props
+    }
+  );
+}
+
+// src/desktop/coming-soon.tsx
+var import_jsx_runtime27 = require("react/jsx-runtime");
+function ComingSoon({ icon, title, summary, includes, className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Page, { width: "full", "data-coming-soon": title, className, ...props, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "mx-auto flex max-w-form flex-col items-center gap-3 pt-16 text-center", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "flex size-16 items-center justify-center rounded-panel bg-fill-secondary text-label-secondary [&_svg]:size-icon-xl", children: icon }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex flex-col items-center gap-1.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Tag, { children: "Coming soon" }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Text, { as: "h1", variant: "title-1", children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Text, { as: "p", variant: "body", tone: "secondary", className: "max-w-form", children: summary })
+    ] }),
+    includes && includes.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("ul", { className: "mt-3 flex flex-col gap-2 text-left", children: includes.slice(0, 4).map((line) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("li", { className: "flex items-start gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { "aria-hidden": true, className: "mt-1.5 size-1.5 shrink-0 rounded-full bg-label-tertiary" }),
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Text, { variant: "callout", tone: "secondary", children: line })
+    ] }, line)) }) : null
+  ] }) });
+}
+
+// src/desktop/meter.tsx
+var ProgressPrimitive = __toESM(require("@radix-ui/react-progress"), 1);
+var import_jsx_runtime28 = require("react/jsx-runtime");
+var METER_THRESHOLDS = { warning: 0.7, critical: 0.9 };
+function meterTone(fraction) {
+  if (fraction >= METER_THRESHOLDS.critical) return "critical";
+  if (fraction >= METER_THRESHOLDS.warning) return "warning";
+  return "normal";
+}
+function Meter({ value, max = 100, kind = "progress", size = "md", className, "aria-label": ariaLabel, ...data }) {
+  const fraction = value === null ? 0 : Math.min(1, Math.max(0, value / max));
+  const tone = kind === "level" ? meterTone(fraction) : "progress";
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    ProgressPrimitive.Root,
+    {
+      ...data,
+      value,
+      max,
+      "aria-label": ariaLabel,
+      "data-slot": "meter",
+      className: cn("relative w-full min-w-16 overflow-hidden rounded-full bg-fill-tertiary", size === "sm" ? "h-1" : "h-1.5", className),
+      children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+        ProgressPrimitive.Indicator,
+        {
+          className: cn(
+            "h-full rounded-full transition-all duration-200",
+            value === null && "w-1/3 animate-pulse",
+            tone === "progress" && "bg-tint",
+            tone === "normal" && "bg-system-green",
+            tone === "warning" && "bg-system-orange",
+            tone === "critical" && "bg-system-red"
+          ),
+          style: value === null ? void 0 : { width: `${fraction * 100}%` }
+        }
+      )
+    }
+  );
+}
+
+// src/desktop/format.ts
+var BYTE_UNITS = ["bytes", "KB", "MB", "GB", "TB", "PB"];
+function formatBytes(bytes) {
+  if (bytes === null || bytes === void 0 || !Number.isFinite(bytes)) return "\u2014";
+  if (bytes < 1e3) return `${Math.round(bytes)} ${bytes === 1 ? "byte" : "bytes"}`;
+  let value = bytes;
+  let unit = 0;
+  while (value >= 1e3 && unit < BYTE_UNITS.length - 1) {
+    value /= 1e3;
+    unit += 1;
+  }
+  return `${value >= 100 ? Math.round(value) : value.toFixed(1).replace(/\.0$/, "")} ${BYTE_UNITS[unit]}`;
+}
+function formatDuration(ms) {
+  if (ms === null || ms === void 0 || !Number.isFinite(ms) || ms < 0) return "\u2014";
+  const s = Math.floor(ms / 1e3);
+  if (s < 60) return `${s} sec`;
+  const m = Math.floor(s / 60);
+  if (m < 60) return `${m} min`;
+  const h = Math.floor(m / 60);
+  if (h < 24) return m % 60 ? `${h} hr ${m % 60} min` : `${h} hr`;
+  const d = Math.floor(h / 24);
+  return h % 24 ? `${d} ${d === 1 ? "day" : "days"} ${h % 24} hr` : `${d} ${d === 1 ? "day" : "days"}`;
+}
+var RELATIVE = new Intl.RelativeTimeFormat(void 0, { numeric: "auto" });
+var SAME_YEAR = new Intl.DateTimeFormat(void 0, { month: "short", day: "numeric", hour: "numeric", minute: "2-digit" });
+var OTHER_YEAR = new Intl.DateTimeFormat(void 0, { year: "numeric", month: "short", day: "numeric" });
+function formatRelativeTime(at, now = Date.now()) {
+  if (at === null || at === void 0) return "\u2014";
+  const time = at instanceof Date ? at.getTime() : typeof at === "string" ? Date.parse(at) : at;
+  if (!Number.isFinite(time)) return "\u2014";
+  const seconds = Math.round((time - now) / 1e3);
+  const abs = Math.abs(seconds);
+  if (abs < 45) return "just now";
+  if (abs < 3600) return RELATIVE.format(Math.round(seconds / 60), "minute");
+  if (abs < 86400) return RELATIVE.format(Math.round(seconds / 3600), "hour");
+  if (abs < 86400 * 2) return RELATIVE.format(Math.round(seconds / 86400), "day");
+  return new Date(time).getFullYear() === new Date(now).getFullYear() ? SAME_YEAR.format(time) : OTHER_YEAR.format(time);
+}
+function errorMessage(error) {
+  if (error instanceof Error) return error.message || error.name;
+  if (typeof error === "string") return error;
+  if (error && typeof error === "object" && "message" in error && typeof error.message === "string") {
+    return error.message;
+  }
+  return "Something went wrong.";
+}
+function formatAge(at, now = Date.now()) {
+  if (at === null || at === void 0) return "\u2014";
+  const time = at instanceof Date ? at.getTime() : typeof at === "string" ? Date.parse(at) : at;
+  if (!Number.isFinite(time)) return "\u2014";
+  const minutes = Math.floor((now - time) / 6e4);
+  if (minutes < 1) return "now";
+  if (minutes < 60) return `${minutes}m`;
+  if (minutes < 60 * 24) return `${Math.floor(minutes / 60)}h`;
+  if (minutes < 60 * 24 * 7) return `${Math.floor(minutes / (60 * 24))}d`;
+  return new Date(time).toLocaleDateString(void 0, { month: "short", day: "numeric" });
+}
+var CLOCK = new Intl.DateTimeFormat(void 0, { hour: "numeric", minute: "2-digit" });
+function formatClockTime(at) {
+  if (at === null || at === void 0) return "\u2014";
+  const time = at instanceof Date ? at.getTime() : typeof at === "string" ? Date.parse(at) : at;
+  return Number.isFinite(time) ? CLOCK.format(time) : "\u2014";
+}
+function formatUsage(used, total) {
+  if (used === null || used === void 0 || total === null || total === void 0) return "\u2014";
+  return `${formatBytes(used)} of ${formatBytes(total)} in use`;
+}
+
+// src/context-menu.tsx
+var ContextMenuPrimitive = __toESM(require("@radix-ui/react-context-menu"), 1);
+var React20 = __toESM(require("react"), 1);
+var import_jsx_runtime29 = require("react/jsx-runtime");
+var ContextMenu = ContextMenuPrimitive.Root;
+var ContextMenuTrigger = ContextMenuPrimitive.Trigger;
+var SURFACE_CLASS2 = "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 = React20.forwardRef(({ className, inset, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+  ContextMenuPrimitive.SubTrigger,
+  {
+    ref,
+    "data-slot": "context-menu-sub-trigger",
+    className: cn2(
+      "flex select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[state=open]:bg-accent data-[state=open]:text-accent-foreground",
+      inset && "pl-8",
+      className
+    ),
+    ...props,
+    children: [
+      children,
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(RadixChevronRightIcon, { className: "ml-auto h-4 w-4" })
+    ]
+  }
+));
+ContextMenuSubTrigger.displayName = ContextMenuPrimitive.SubTrigger.displayName;
+var ContextMenuSubContent = React20.forwardRef(({ className, container, onFocusOutside, children, ...props }, ref) => {
+  const portalContainer = usePortalContainer(container);
+  const keep = useSubmenuSurvivesParentPanelFocus(ref, onFocusOutside);
+  const edges = useMenuScrollEdges(keep.ref);
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ContextMenuPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    ContextMenuPrimitive.SubContent,
+    {
+      ref: edges.ref,
+      onFocusOutside: keep.onFocusOutside,
+      "data-slot": "context-menu-sub-content",
+      className: cn2(SURFACE_CLASS2, edges.surfaceClassName, "shadow-lg", MOTION_POPPER, className),
+      ...props,
+      children: edges.wrap(children)
+    }
+  ) });
+});
+ContextMenuSubContent.displayName = ContextMenuPrimitive.SubContent.displayName;
+var ContextMenuContent = React20.forwardRef(({ className, container, children, ...props }, ref) => {
+  const portalContainer = usePortalContainer(container);
+  const edges = useMenuScrollEdges(ref);
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ContextMenuPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+    ContextMenuPrimitive.Content,
+    {
+      ref: edges.ref,
+      "data-slot": "context-menu-content",
+      className: cn2(SURFACE_CLASS2, edges.surfaceClassName, "shadow-md", MOTION_POPPER, className),
+      ...props,
+      children: edges.wrap(children)
+    }
+  ) });
+});
+ContextMenuContent.displayName = ContextMenuPrimitive.Content.displayName;
+var ContextMenuItem = React20.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  ContextMenuPrimitive.Item,
+  {
+    ref,
+    "data-slot": "context-menu-item",
+    className: cn2(
+      ITEM_CLASS,
+      "gap-2 [&>svg]:size-4 [&>svg]:shrink-0",
+      inset && "pl-8",
+      className
+    ),
+    ...props
+  }
+));
+ContextMenuItem.displayName = ContextMenuPrimitive.Item.displayName;
+var ContextMenuCheckboxItem = React20.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+  ContextMenuPrimitive.CheckboxItem,
+  {
+    ref,
+    "data-slot": "context-menu-checkbox-item",
+    className: cn2(INDICATOR_ITEM_CLASS, className),
+    ...props,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(CheckIcon, { className: "h-4 w-4" }) }) }),
+      children
+    ]
+  }
+));
+ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
+var ContextMenuRadioItem = React20.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
+  ContextMenuPrimitive.RadioItem,
+  {
+    ref,
+    "data-slot": "context-menu-radio-item",
+    className: cn2(INDICATOR_ITEM_CLASS, className),
+    ...props,
+    children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(DotFilledIcon, { className: "h-4 w-4 fill-current" }) }) }),
+      children
+    ]
+  }
+));
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
+var ContextMenuLabel = React20.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  ContextMenuPrimitive.Label,
+  {
+    ref,
+    "data-slot": "context-menu-label",
+    className: cn2(
+      "px-2 py-1.5 text-sm font-semibold text-foreground",
+      inset && "pl-8",
+      className
+    ),
+    ...props
+  }
+));
+ContextMenuLabel.displayName = ContextMenuPrimitive.Label.displayName;
+var ContextMenuSeparator = React20.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  ContextMenuPrimitive.Separator,
+  {
+    ref,
+    "data-slot": "context-menu-separator",
+    className: cn2("-mx-1 my-1 h-px bg-border", className),
+    ...props
+  }
+));
+ContextMenuSeparator.displayName = ContextMenuPrimitive.Separator.displayName;
+var ContextMenuShortcut = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  "span",
+  {
+    "data-slot": "context-menu-shortcut",
+    className: cn2("ml-auto text-xs tracking-widest text-muted-foreground", className),
+    ...props
+  }
+);
+ContextMenuShortcut.displayName = "ContextMenuShortcut";
+
+// src/dialog.tsx
+var DialogPrimitive = __toESM(require("@radix-ui/react-dialog"), 1);
+var VisuallyHidden = __toESM(require("@radix-ui/react-visually-hidden"), 1);
+var import_react_tree2 = require("@ai-matrx/kit/react-tree");
+var React22 = __toESM(require("react"), 1);
+
+// src/radix-dialog-modal-context.tsx
+var React21 = __toESM(require("react"), 1);
+var import_jsx_runtime30 = require("react/jsx-runtime");
+var CONTEXT_SLOT2 = /* @__PURE__ */ Symbol.for("ai-matrx.design-system.dialog-modal-context");
+var contextRegistry2 = globalThis;
+var RadixDialogModalContext = contextRegistry2[CONTEXT_SLOT2] ??= React21.createContext(true);
+function RadixDialogModalProvider({
+  children,
+  modal
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(RadixDialogModalContext.Provider, { value: modal, children });
+}
+function useRadixDialogModal() {
+  return React21.useContext(RadixDialogModalContext);
+}
+
+// src/use-is-mobile.ts
+var import_media_query = require("@ai-matrx/kit/media-query");
+
+// src/layer-front.ts
+var LAYER_FRONT_EVENT = "matrx:layer-front";
+function announceLayerFront(element) {
+  if (typeof document === "undefined") return;
+  document.dispatchEvent(
+    new CustomEvent(LAYER_FRONT_EVENT, { detail: { element } })
+  );
+}
+
+// src/dialog.tsx
+var import_jsx_runtime31 = require("react/jsx-runtime");
+var DialogWindowedByDefaultContext = React22.createContext(false);
+var Dialog = ({
+  children,
+  ...props
+}) => {
+  const isMobile = (0, import_media_query.useIsMobile)();
+  const modal = props.modal ?? isMobile;
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(DialogWindowedByDefaultContext.Provider, { value: props.modal === void 0, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(RadixDialogModalProvider, { modal, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(DialogPrimitive.Root, { ...props, modal, children }) }) });
+};
+Dialog.displayName = "Dialog";
+var DialogTrigger = DialogPrimitive.Trigger;
+var DialogClose = DialogPrimitive.Close;
+var DialogPortal = ({
+  container,
+  ...props
+}) => {
+  const resolved = usePortalContainer(container);
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(DialogPrimitive.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] ??= React22.createContext(null);
+var DialogOverlay = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  DialogPrimitive.Overlay,
+  {
+    ref,
+    "data-slot": "dialog-overlay",
+    className: cn2(
+      // Page context behind the modal stays readable; separation comes from a
+      // light token scrim, not a blur.
+      "fixed inset-0 z-[10000] bg-[var(--matrx-overlay-scrim-soft)]",
+      MOTION_OVERLAY,
+      className
+    ),
+    ...props
+  }
+));
+DialogOverlay.displayName = DialogPrimitive.Overlay.displayName;
+var DialogContentPrimitive = React22.forwardRef(({ onInteractOutside, ...props }, ref) => {
+  const isModal = useRadixDialogModal();
+  useModalLayer(isModal);
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    DialogPrimitive.Content,
+    {
+      ...props,
+      ref,
+      "aria-modal": isModal || void 0,
+      onInteractOutside: keepFloatingLayersInside(onInteractOutside)
+    }
+  );
+});
+DialogContentPrimitive.displayName = "DialogContentPrimitive";
+var DIALOG_DESKTOP_CLASSES = "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_CLASSES = "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_OVERRIDE = "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 = 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 = React22.forwardRef(
+  ({
+    className,
+    children,
+    mobileSheet = true,
+    animated = true,
+    showCloseButton = true,
+    container,
+    dismissOnOutsideClick = false,
+    onInteractOutside,
+    onEscapeKeyDown,
+    onPointerDownCapture,
+    onFocusCapture,
+    style,
+    ...props
+  }, ref) => {
+    const isMobile = (0, import_media_query.useIsMobile)();
+    const isModal = useRadixDialogModal();
+    const injectedContainer = usePortalContainer(container);
+    const asSheet = mobileSheet && isMobile;
+    const windowed = !isModal && !asSheet;
+    const windowedByDefault = React22.useContext(DialogWindowedByDefaultContext);
+    const [containerEl, setContainerEl] = React22.useState(
+      null
+    );
+    const stacks = windowed && windowedByDefault;
+    const [behind, setBehind] = React22.useState(false);
+    React22.useEffect(() => {
+      if (!stacks || !containerEl) return;
+      const onFront = (event) => {
+        const element = event.detail?.element ?? null;
+        if (element && (element === containerEl || containerEl.contains(element))) return;
+        setBehind(true);
+      };
+      document.addEventListener(LAYER_FRONT_EVENT, onFront);
+      announceLayerFront(containerEl);
+      return () => document.removeEventListener(LAYER_FRONT_EVENT, onFront);
+    }, [stacks, containerEl]);
+    const bringToFront = () => {
+      if (!stacks || !containerEl) return;
+      setBehind(false);
+      announceLayerFront(containerEl);
+    };
+    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 {
+        onPointerDown: (event) => {
+          if (event.button !== 0 || isInteractiveTarget(event.target)) return;
+          dragRef.current = { x: event.clientX, y: event.clientY, baseX: offset.x, baseY: offset.y };
+          event.currentTarget.setPointerCapture?.(event.pointerId);
+        },
+        onPointerMove: (event) => {
+          const start = dragRef.current;
+          if (!start) return;
+          setOffset({
+            x: clamp(start.baseX + event.clientX - start.x, window.innerWidth / 2 - WINDOW_KEEP_VISIBLE / 2),
+            y: clamp(start.baseY + event.clientY - start.y, window.innerHeight / 2 - WINDOW_KEEP_VISIBLE / 2)
+          });
+        },
+        onPointerUp: (event) => {
+          if (!dragRef.current) return;
+          dragRef.current = null;
+          event.currentTarget.releasePointerCapture?.(event.pointerId);
+        },
+        onPointerCancel: () => {
+          dragRef.current = null;
+        },
+        onDoubleClick: () => setOffset({ x: 0, y: 0 })
+      };
+    }, [windowed, offset.x, offset.y]);
+    const mergedRef = React22.useCallback(
+      (node) => {
+        setContainerEl(node);
+        if (typeof ref === "function") ref(node);
+        else if (ref)
+          ref.current = node;
+      },
+      [ref]
+    );
+    const hasTitle = (0, import_react_tree2.treeContainsComponent)(children, DialogTitle) || (0, import_react_tree2.treeContainsComponent)(children, DialogPrimitive.Title);
+    const hasDescription = (0, import_react_tree2.treeContainsComponent)(children, DialogDescription) || (0, import_react_tree2.treeContainsComponent)(children, DialogPrimitive.Description);
+    return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(DialogPortal, { container, children: [
+      isModal ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(DialogOverlay, {}) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+        DialogContentPrimitive,
+        {
+          ref: mergedRef,
+          "data-slot": "dialog-content",
+          className: cn2(
+            asSheet ? DIALOG_MOBILE_SHEET_CLASSES : DIALOG_DESKTOP_CLASSES,
+            animated && (asSheet ? MOTION_BOTTOM_SHEET : MOTION_DIALOG),
+            className,
+            asSheet && DIALOG_MOBILE_SHEET_OVERRIDE,
+            // A non-modal dialog is the coexistence contract for content that
+            // can sit beside a host's floating window manager (which starts at
+            // z=1000); staying below that boundary makes a newly focused window
+            // usable without coupling the two systems.
+            !isModal && !windowedByDefault && "z-[900]",
+            // Another layer came to the front after this window (layer-front.ts).
+            stacks && behind && "z-[999]",
+            // Without an overlay the card needs its own separation from the page.
+            windowed && "shadow-2xl ring-1 ring-border/60"
+          ),
+          style: windowed && (offset.x !== 0 || offset.y !== 0) ? { ...style, translate: `${offset.x}px ${offset.y}px` } : style,
+          onPointerDownCapture: (event) => {
+            onPointerDownCapture?.(event);
+            if (behind) bringToFront();
+          },
+          onFocusCapture: (event) => {
+            onFocusCapture?.(event);
+            if (behind) bringToFront();
+          },
+          onInteractOutside: (event) => {
+            onInteractOutside?.(event);
+            if (windowed && !dismissOnOutsideClick) event.preventDefault();
+          },
+          onEscapeKeyDown: (event) => {
+            onEscapeKeyDown?.(event);
+            const pressedIn = event.target instanceof Node && event.target !== document.body ? event.target : document.activeElement;
+            if (windowed && containerEl && !(pressedIn && containerEl.contains(pressedIn))) {
+              event.preventDefault();
+            }
+          },
+          ...hasDescription ? {} : { "aria-describedby": void 0 },
+          ...props,
+          children: [
+            hasTitle ? null : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(VisuallyHidden.Root, { children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(DialogPrimitive.Title, { children: "Dialog" }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(DialogContainerContext.Provider, { value: containerEl, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(DialogWindowHandleContext.Provider, { value: handle, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+              PortalContainerProvider,
+              {
+                container: containerEl ?? injectedContainer ?? null,
+                children
+              }
+            ) }) }),
+            showCloseButton ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+              DialogPrimitive.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 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_runtime31.jsx)(XIcon, { className: "h-4 w-4" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "sr-only", children: "Close" })
+                ]
+              }
+            ) : null
+          ]
+        }
+      )
+    ] });
+  }
+);
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+var DialogHeader = ({
+  className,
+  ...props
+}) => {
+  const handle = React22.useContext(DialogWindowHandleContext);
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    "div",
+    {
+      "data-slot": "dialog-header",
+      ...handle ? {
+        ...handle,
+        "data-window-handle": "",
+        title: "Drag to move \xB7 double-click to recenter"
+      } : {},
+      className: cn2(
+        // DialogContent owns an absolute close control. Reserve its hit area in
+        // every header so trailing actions never render underneath it.
+        "flex flex-col space-y-1.5 pr-12 text-center sm:text-left",
+        handle && "cursor-grab select-none active:cursor-grabbing",
+        className
+      ),
+      ...props
+    }
+  );
+};
+DialogHeader.displayName = "DialogHeader";
+var DialogFooter = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  "div",
+  {
+    "data-slot": "dialog-footer",
+    className: cn2(
+      "flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2",
+      // Ruling 3/4 — sticky to the card edges so a scrolled body never shows
+      // through under the actions, and safe-area padded on a phone.
+      //
+      // 🚨 THERE IS NO `mb-[…]` HERE, AND THERE MUST NEVER BE ONE AGAIN
+      // (0.11.3, feedback bf8fb00b). The bleed over the card's bottom padding
+      // used to be a NEGATIVE BLOCK MARGIN, which makes this box taller than
+      // the grid area the card allocates it — and `position: sticky` CLAMPS a
+      // box to its containing block, so the browser yanked the footer UP by
+      // `--dialog-pad` against the card's `gap-4` and painted 8px of opaque
+      // footer over the last line of the consequence, at every length. The
+      // card now RESERVES this footer's block size instead (`matrx-dialog-card`
+      // in styles.css hands over its `padding-bottom`), so the bleed costs no
+      // margin at all. Guard: `sticky-footer-geometry.test.tsx`.
+      //
+      // These stay UTILITIES rather than a shipped rule so a caller's
+      // `className` still wins through tailwind-merge — a shipped rule would
+      // have to be unlayered to survive Tailwind preflight (§ THE PREFLIGHT
+      // RULE in styles.css) and would then override every caller's padding.
+      "sticky bottom-0 z-10 bg-background pt-3",
+      "mx-[calc(var(--dialog-pad,0px)*-1)] px-[var(--dialog-pad,0px)] pb-[var(--dialog-pad,0px)]",
+      className
+    ),
+    ...props
+  }
+);
+DialogFooter.displayName = "DialogFooter";
+var DialogTitle = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  DialogPrimitive.Title,
+  {
+    ref,
+    "data-slot": "dialog-title",
+    className: cn2("text-lg font-semibold leading-none tracking-tight", className),
+    ...props
+  }
+));
+DialogTitle.displayName = DialogPrimitive.Title.displayName;
+var DialogDescription = React22.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+  DialogPrimitive.Description,
+  {
+    ref,
+    "data-slot": "dialog-description",
+    className: cn2("text-sm text-muted-foreground", className),
+    ...props
+  }
+));
+DialogDescription.displayName = DialogPrimitive.Description.displayName;
+
+// src/confirm-host.tsx
+var import_confirm_opener = require("@ai-matrx/kit/confirm-opener");
+var import_opener_react = require("@ai-matrx/kit/opener-react");
+var React23 = __toESM(require("react"), 1);
+var import_jsx_runtime32 = require("react/jsx-runtime");
+function ConfirmDialogHost() {
+  const { shown, open, settle } = (0, import_opener_react.useOpenerHost)(import_confirm_opener.confirmOpener);
+  const [readyFor, setReadyFor] = React23.useState(null);
+  const ready = shown?.ready;
+  React23.useEffect(() => {
+    if (!shown || !ready) return void 0;
+    let live = true;
+    const release = () => {
+      if (live) setReadyFor(shown);
+    };
+    Promise.resolve(ready).then(release, release);
+    return () => {
+      live = false;
+    };
+  }, [shown, ready]);
+  const held = !!ready && readyFor !== shown;
+  const handleConfirm = React23.useCallback(() => settle(true), [settle]);
+  const handleOpenChange = React23.useCallback(
+    (next) => {
+      if (!next) settle(false);
+    },
+    [settle]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+    ConfirmDialog,
+    {
+      open,
+      onOpenChange: handleOpenChange,
+      title: shown?.title ?? "",
+      description: shown?.description,
+      confirmLabel: shown?.confirmLabel,
+      cancelLabel: shown?.cancelLabel,
+      variant: shown?.variant,
+      confirmHeld: held,
+      onConfirm: handleConfirm
+    }
+  );
+}
+
+// src/popover.tsx
+var PopoverPrimitive = __toESM(require("@radix-ui/react-popover"), 1);
+var React24 = __toESM(require("react"), 1);
+var import_jsx_runtime33 = require("react/jsx-runtime");
+var Popover = PopoverPrimitive.Root;
+var PopoverTrigger = PopoverPrimitive.Trigger;
+var PopoverAnchor = PopoverPrimitive.Anchor;
+var PopoverContent = React24.forwardRef(
+  ({
+    className,
+    align = "center",
+    sideOffset = 4,
+    container,
+    animated = true,
+    sizing = "fixed",
+    collisionPadding = 16,
+    ...props
+  }, ref) => {
+    const portalContainer = usePortalContainer(container);
+    return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(PopoverPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      PopoverPrimitive.Content,
+      {
+        ref,
+        align,
+        sideOffset,
+        collisionPadding,
+        className: cn2(
+          // Cap to the viewport space Radix measured and scroll — a popover taller
+          // than the screen must never trap the user with unreachable content.
+          // z must EQUAL the dialog layer (z-[10000]), never exceed it: with equal
+          // z, DOM portal order decides, so a dialog opened FROM a popover stacks
+          // above it, and a popover opened from a dialog still stacks above the
+          // dialog. z-[10001] buried dialogs behind fullscreen popovers.
+          "z-[10000] max-h-[var(--radix-popover-content-available-height)] overflow-y-auto overscroll-contain rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none",
+          sizing === "content" ? "w-auto min-w-[min(max(var(--radix-popover-trigger-width),20rem),calc(100vw-2rem))] max-w-[min(28rem,calc(100vw-2rem))]" : "w-72 max-w-[calc(100vw-2rem)]",
+          animated && MOTION_POPPER,
+          className
+        ),
+        ...props
+      }
+    ) });
+  }
+);
+PopoverContent.displayName = PopoverPrimitive.Content.displayName;
+
+// src/collapsible.tsx
+var CollapsiblePrimitive = __toESM(require("@radix-ui/react-collapsible"), 1);
+var React25 = __toESM(require("react"), 1);
+var import_jsx_runtime34 = require("react/jsx-runtime");
+var Collapsible = CollapsiblePrimitive.Root;
+var CollapsibleTrigger2 = CollapsiblePrimitive.CollapsibleTrigger;
+var CollapsibleContent2 = React25.forwardRef(({ className, animated = true, ...props }, ref) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  CollapsiblePrimitive.CollapsibleContent,
+  {
+    ref,
+    "data-slot": "collapsible-content",
+    className: cn2(
+      animated && "matrx-collapsible-content overflow-hidden",
+      className
+    ),
+    ...props
+  }
+));
+CollapsibleContent2.displayName = "CollapsibleContent";
+
+// src/skeleton.tsx
+var import_jsx_runtime35 = require("react/jsx-runtime");
+function Skeleton({ className, animated = true, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    "div",
+    {
+      "data-slot": "skeleton",
+      className: cn2(
+        "rounded-md bg-primary/10",
+        animated && MOTION_PULSE,
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/app-shell/app-rail.tsx
+var React26 = __toESM(require("react"), 1);
+
+// src/app-shell/status-dot.tsx
+var import_jsx_runtime36 = require("react/jsx-runtime");
+var FILL = {
+  info: "bg-info",
+  warning: "bg-warning",
+  danger: "bg-destructive",
+  success: "bg-success",
+  neutral: "bg-muted-foreground/60"
+};
+var RING = {
+  info: "border-info",
+  warning: "border-warning",
+  danger: "border-destructive",
+  success: "border-success",
+  neutral: "border-muted-foreground/60"
+};
+function StatusDot({ tone, variant = "solid", label, className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    "span",
+    {
+      "data-slot": "status-dot",
+      "data-tone": tone,
+      "data-variant": variant,
+      ...label ? { role: "img", "aria-label": label } : { "aria-hidden": true },
+      className: cn2(
+        "inline-block shrink-0 rounded-full",
+        variant === "solid" ? cn2("size-1.5", FILL[tone]) : cn2("size-2 border-[1.5px] bg-transparent", RING[tone]),
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/app-shell/app-rail.tsx
+var import_jsx_runtime37 = require("react/jsx-runtime");
+function AppRail({ className, style, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    "nav",
+    {
+      "data-slot": "app-rail",
+      "aria-label": "Areas",
+      className: cn2("flex h-full w-(--app-rail-width) shrink-0 flex-col items-center gap-1 py-2", className),
+      style: { "--app-rail-width": "48px", ...style },
+      ...props
+    }
+  );
+}
+function AppRailGroup({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { "data-slot": "app-rail-group", className: cn2("flex flex-col items-center gap-1", className), ...props });
+}
+function AppRailSpacer() {
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { "data-slot": "app-rail-spacer", className: "flex-1" });
+}
+var AppRailItem = React26.forwardRef(function AppRailItem2({ icon, label, shortcut, active = false, attention, attentionLabel, className, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+      "button",
+      {
+        ref,
+        type: "button",
+        "data-slot": "app-rail-item",
+        "data-active": active,
+        "aria-label": label,
+        "aria-current": active ? "page" : void 0,
+        className: cn2(
+          "relative flex size-8 items-center justify-center rounded-lg text-foreground/55 outline-none transition-colors",
+          "hover:bg-foreground/[0.06] hover:text-foreground",
+          "data-[active=true]:bg-foreground/[0.08] data-[active=true]:text-foreground",
+          "focus-visible:ring-2 focus-visible:ring-ring",
+          "[&_svg]:size-[18px] [&_svg]:shrink-0",
+          className
+        ),
+        ...props,
+        children: [
+          icon,
+          attention ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+            StatusDot,
+            {
+              tone: attention,
+              variant: "ring",
+              ...attentionLabel ? { label: attentionLabel } : {},
+              className: "absolute right-0.5 bottom-0.5"
+            }
+          ) : null
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TooltipContent, { side: "right", align: "center", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: "flex items-center gap-2", children: [
+      label,
+      shortcut ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "opacity-60", children: shortcut }) : null
+    ] }) })
+  ] });
+});
+var AppRailAvatar = React26.forwardRef(function AppRailAvatar2({ initials = "", label, className, children, ...props }, ref) {
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Tooltip, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      "button",
+      {
+        ref,
+        type: "button",
+        "data-slot": "app-rail-avatar",
+        "aria-label": label,
+        className: cn2(
+          "flex size-6 items-center justify-center rounded-full bg-foreground/[0.12] text-[10px] font-semibold leading-none text-foreground/80 outline-none [&_svg]:size-3.5",
+          "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+          className
+        ),
+        ...props,
+        children: children ?? initials.slice(0, 2).toUpperCase()
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(TooltipContent, { side: "right", align: "center", children: label })
+  ] });
+});
+
+// src/app-shell/canvas.tsx
+var React27 = __toESM(require("react"), 1);
+
+// src/resizable.tsx
+var import_react_resizable_panels = require("react-resizable-panels");
+var import_jsx_runtime38 = require("react/jsx-runtime");
+var HANDLE_SIZES = {
+  xs: "w-0.5 [&[aria-orientation=horizontal]]:h-0.5 [&[aria-orientation=horizontal]]:w-full",
+  sm: "w-1 [&[aria-orientation=horizontal]]:h-1 [&[aria-orientation=horizontal]]:w-full",
+  md: "w-1.5 [&[aria-orientation=horizontal]]:h-1.5 [&[aria-orientation=horizontal]]:w-full",
+  lg: "w-2 [&[aria-orientation=horizontal]]:h-2 [&[aria-orientation=horizontal]]:w-full",
+  xl: "w-3 [&[aria-orientation=horizontal]]:h-3 [&[aria-orientation=horizontal]]:w-full",
+  "2xl": "w-4 [&[aria-orientation=horizontal]]:h-4 [&[aria-orientation=horizontal]]:w-full",
+  "3xl": "w-6 [&[aria-orientation=horizontal]]:h-6 [&[aria-orientation=horizontal]]:w-full",
+  "4xl": "w-8 [&[aria-orientation=horizontal]]:h-8 [&[aria-orientation=horizontal]]:w-full"
+};
+var ResizablePanelGroup = ({
+  className,
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  import_react_resizable_panels.Group,
+  {
+    "data-slot": "resizable-group",
+    className: cn2("flex h-full w-full", className),
+    ...props
+  }
+);
+ResizablePanelGroup.displayName = "ResizablePanelGroup";
+var ResizablePanel = import_react_resizable_panels.Panel;
+var ResizableHandle = ({
+  withHandle,
+  size = "xs",
+  className,
+  ...props
+}) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  import_react_resizable_panels.Separator,
+  {
+    "data-slot": "resizable-handle",
+    className: cn2(
+      "group/handle relative flex shrink-0 items-center justify-center bg-border transition-colors",
+      // Invisible hit target centered on the line; wider still on touch.
+      "after:absolute after:inset-y-0 after:left-1/2 after:w-1.5 after:-translate-x-1/2 after:content-['']",
+      "pointer-coarse:after:w-11",
+      "[&[aria-orientation=horizontal]]:after:inset-x-0 [&[aria-orientation=horizontal]]:after:left-0 [&[aria-orientation=horizontal]]:after:top-1/2 [&[aria-orientation=horizontal]]:after:h-1.5 [&[aria-orientation=horizontal]]:after:w-full [&[aria-orientation=horizontal]]:after:-translate-x-0 [&[aria-orientation=horizontal]]:after:-translate-y-1/2",
+      "pointer-coarse:[&[aria-orientation=horizontal]]:after:h-11",
+      // The drag-outline bug: suppress for ALL focus, restore for keyboard.
+      "focus:outline-none focus-visible:ring-1 focus-visible:ring-ring focus-visible:ring-offset-1",
+      // Library-driven state feedback.
+      "data-[separator=hover]:bg-primary data-[separator=active]:bg-primary",
+      HANDLE_SIZES[size],
+      "cursor-col-resize [&[aria-orientation=horizontal]]:cursor-row-resize",
+      className
+    ),
+    ...props,
+    children: withHandle ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "z-10 flex h-8 w-4 items-center justify-center rounded-sm border bg-border group-aria-[orientation=horizontal]/handle:h-4 group-aria-[orientation=horizontal]/handle:w-8", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(DragHandleDots2Icon, { className: "h-2.5 w-2.5 group-aria-[orientation=horizontal]/handle:rotate-90" }) }) : null
+  }
+);
+ResizableHandle.displayName = "ResizableHandle";
+
+// src/app-shell/canvas.tsx
+var import_jsx_runtime39 = require("react/jsx-runtime");
+var GAP = "bg-transparent data-[separator=hover]:bg-foreground/15 data-[separator=active]:bg-foreground/25";
+function CanvasLayout({ columns, expandedId = null, className }) {
+  const visible = columns.filter((c) => c.panels.length > 0);
+  const expanded = expandedId ? visible.flatMap((c) => c.panels).find((p) => p.id === expandedId) : void 0;
+  if (expanded) {
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { "data-slot": "canvas-layout", "data-expanded": expanded.id, className: cn2("flex h-full w-full", className), children: expanded.node });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ResizablePanelGroup, { "data-slot": "canvas-layout", orientation: "horizontal", className: cn2("gap-0", className), children: visible.map((column, ci) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(React27.Fragment, { children: [
+    ci > 0 ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ResizableHandle, { "data-canvas-gap": "column", size: "md", className: GAP }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+      ResizablePanel,
+      {
+        id: column.id,
+        minSize: column.minSize ?? 220,
+        ...column.defaultSize !== void 0 ? { defaultSize: column.defaultSize } : {},
+        children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ResizablePanelGroup, { "data-canvas-column": column.id, orientation: "vertical", children: column.panels.map((panel, pi) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(React27.Fragment, { children: [
+          pi > 0 ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(ResizableHandle, { "data-canvas-gap": "row", size: "md", className: GAP }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+            ResizablePanel,
+            {
+              id: panel.id,
+              minSize: panel.minSize ?? 120,
+              ...panel.defaultSize !== void 0 ? { defaultSize: panel.defaultSize } : {},
+              children: panel.node
+            }
+          )
+        ] }, panel.id)) })
+      }
+    )
+  ] }, column.id)) });
+}
+
+// src/app-shell/mode-switch.tsx
+var React28 = __toESM(require("react"), 1);
+var import_jsx_runtime40 = require("react/jsx-runtime");
+function ModeSwitch({ value, onValueChange, options, label = "Mode", className }) {
+  const refs = React28.useRef([]);
+  const move = (from, delta) => {
+    const next = (from + delta + options.length) % options.length;
+    const option = options[next];
+    if (!option) return;
+    onValueChange(option.value);
+    refs.current[next]?.focus();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+    "div",
+    {
+      role: "radiogroup",
+      "aria-label": label,
+      "data-slot": "mode-switch",
+      className: cn2("inline-flex items-center gap-0.5 rounded-lg bg-foreground/[0.06] p-0.5", className),
+      children: options.map((option, index) => {
+        const checked = option.value === value;
+        return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(Tooltip, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+            "button",
+            {
+              ref: (el) => {
+                refs.current[index] = el;
+              },
+              type: "button",
+              role: "radio",
+              "aria-checked": checked,
+              "aria-label": option.label,
+              "data-slot": "mode-switch-item",
+              "data-value": option.value,
+              tabIndex: checked ? 0 : -1,
+              onClick: () => onValueChange(option.value),
+              onKeyDown: (event) => {
+                if (event.key === "ArrowRight" || event.key === "ArrowDown") {
+                  event.preventDefault();
+                  move(index, 1);
+                } else if (event.key === "ArrowLeft" || event.key === "ArrowUp") {
+                  event.preventDefault();
+                  move(index, -1);
+                }
+              },
+              className: cn2(
+                "flex h-6 w-7 items-center justify-center rounded-md text-foreground/55 outline-none transition-colors",
+                "hover:text-foreground focus-visible:ring-2 focus-visible:ring-ring",
+                "aria-checked:bg-background aria-checked:text-foreground aria-checked:shadow-[0_0_0_0.5px_hsl(var(--foreground)/0.12),0_1px_2px_hsl(var(--foreground)/0.08)]",
+                "dark:aria-checked:bg-foreground/[0.14] dark:aria-checked:shadow-none",
+                "[&_svg]:size-[15px] [&_svg]:shrink-0"
+              ),
+              children: option.icon
+            }
+          ) }),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(TooltipContent, { side: "bottom", align: "center", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("span", { className: "flex items-center gap-2", children: [
+            option.label,
+            option.shortcut ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "opacity-60", children: option.shortcut }) : null
+          ] }) })
+        ] }, option.value);
+      })
+    }
+  );
+}
+
+// src/organization-picker.tsx
+var React29 = __toESM(require("react"), 1);
+var import_jsx_runtime41 = require("react/jsx-runtime");
+var ORGANIZATION_HUES = [217, 262, 330, 12, 32, 152, 189, 290];
+function organizationColor(seed) {
+  let hash = 0;
+  for (let index = 0; index < seed.length; index += 1) {
+    hash = hash * 31 + seed.charCodeAt(index) >>> 0;
+  }
+  const hue = ORGANIZATION_HUES[hash % ORGANIZATION_HUES.length];
+  return { background: `hsl(${hue} 62% 46%)`, color: "#fff" };
+}
+function OrganizationMark({
+  id,
+  name,
+  abbreviation,
+  logoUrl,
+  size = 20,
+  className
+}) {
+  const box = { width: size, height: size };
+  if (logoUrl) {
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+      "span",
+      {
+        style: box,
+        className: cn2("relative inline-flex shrink-0 overflow-hidden rounded-md bg-muted", className),
+        "data-slot": "organization-mark",
+        children: /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("img", { src: logoUrl, alt: name, className: "h-full w-full object-cover" })
+      }
+    );
+  }
+  const letters = (abbreviation && abbreviation.trim() || name.trim().slice(0, 1) || "?").slice(0, 3).toUpperCase();
+  const fontSize = Math.round(size * (letters.length >= 3 ? 0.36 : 0.44));
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+    "span",
+    {
+      style: { ...box, ...organizationColor(id || name), fontSize },
+      className: cn2(
+        "inline-flex shrink-0 items-center justify-center rounded-md font-bold leading-none tracking-tight",
+        className
+      ),
+      "aria-label": `Organization abbreviation ${letters}`,
+      title: letters,
+      "data-slot": "organization-mark",
+      children: letters
+    }
+  );
+}
+//# sourceMappingURL=desktop.cjs.map