@ai-matrx/design-system 0.60.1 → 0.60.6

package/dist/desktop.js

@@ -0,0 +1,3533 @@
+"use client";
+
+// src/desktop/cn.ts
+import { clsx } from "clsx";
+import { extendTailwindMerge } from "tailwind-merge";
+var 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(clsx(inputs));
+}
+
+// src/desktop/text.tsx
+import * as React from "react";
+import { jsx } from "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__ */ 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
+import { jsx as jsx2 } from "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__ */ jsx2(
+    "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__ */ jsx2(
+        "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
+import { Slot } from "@radix-ui/react-slot";
+import { cva } from "class-variance-authority";
+import * as React4 from "react";
+
+// src/tooltip.tsx
+import * as TooltipPrimitive from "@radix-ui/react-tooltip";
+import * as React3 from "react";
+
+// src/cn.ts
+import { clsx as clsx2 } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn2(...inputs) {
+  return twMerge(clsx2(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
+import * as React2 from "react";
+import { jsx as jsx3 } from "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__ */ jsx3(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
+import { jsx as jsx4 } from "react/jsx-runtime";
+function TooltipProvider({ titleTooltips = true, ...props }) {
+  React3.useEffect(() => {
+    if (!titleTooltips) return;
+    return acquireTitleTooltips();
+  }, [titleTooltips]);
+  return /* @__PURE__ */ jsx4(TooltipPrimitive.Provider, { ...props });
+}
+var Tooltip = TooltipPrimitive.Root;
+var TooltipTrigger = React3.forwardRef((props, ref) => /* @__PURE__ */ jsx4(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__ */ jsx4(TooltipPrimitive.Portal, { container: resolved ?? null, children: /* @__PURE__ */ jsx4(
+    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
+import { Fragment, jsx as jsx5, jsxs } from "react/jsx-runtime";
+var buttonVariants = 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 ? Slot : "button";
+  return /* @__PURE__ */ jsx5(
+    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__ */ jsxs(Fragment, { children: [
+        busy ? /* @__PURE__ */ jsx5(Spinner, { size: size === "sm" ? "sm" : "md" }) : icon,
+        children
+      ] })
+    }
+  );
+});
+var iconButtonVariants = 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__ */ jsxs(Tooltip, { children: [
+    /* @__PURE__ */ jsx5(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx5(
+      "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__ */ jsxs(TooltipContent, { children: [
+      label,
+      shortcut ? /* @__PURE__ */ jsx5("span", { className: "ml-2 opacity-60", children: shortcut }) : null
+    ] })
+  ] });
+});
+
+// src/desktop/field.tsx
+import * as React5 from "react";
+
+// src/icons.tsx
+import { jsx as jsx6, jsxs as jsxs2 } from "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__ */ jsx6("svg", { ...lucideProps(props), children: /* @__PURE__ */ jsx6("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" }) });
+}
+function ChevronRightIcon(props) {
+  return /* @__PURE__ */ jsx6("svg", { ...lucideProps(props), children: /* @__PURE__ */ jsx6("path", { d: "m9 18 6-6-6-6" }) });
+}
+function ChevronDownIcon(props) {
+  return /* @__PURE__ */ jsx6("svg", { ...lucideProps(props), children: /* @__PURE__ */ jsx6("path", { d: "m6 9 6 6 6-6" }) });
+}
+function MoreHorizontalIcon(props) {
+  return /* @__PURE__ */ jsxs2("svg", { ...lucideProps(props), children: [
+    /* @__PURE__ */ jsx6("circle", { cx: "12", cy: "12", r: "1" }),
+    /* @__PURE__ */ jsx6("circle", { cx: "19", cy: "12", r: "1" }),
+    /* @__PURE__ */ jsx6("circle", { cx: "5", cy: "12", r: "1" })
+  ] });
+}
+function ChevronsUpDownIcon(props) {
+  return /* @__PURE__ */ jsxs2("svg", { ...lucideProps(props), children: [
+    /* @__PURE__ */ jsx6("path", { d: "m7 15 5 5 5-5" }),
+    /* @__PURE__ */ jsx6("path", { d: "m7 9 5-5 5 5" })
+  ] });
+}
+function XIcon(props) {
+  return /* @__PURE__ */ jsxs2("svg", { ...lucideProps(props), children: [
+    /* @__PURE__ */ jsx6("path", { d: "M18 6 6 18" }),
+    /* @__PURE__ */ jsx6("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__ */ jsx6("svg", { ...radixProps(props), children: /* @__PURE__ */ jsx6(
+    "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__ */ jsx6("svg", { ...radixProps(props), children: /* @__PURE__ */ jsx6(
+    "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__ */ jsx6("svg", { ...radixProps(props), children: /* @__PURE__ */ jsx6(
+    "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__ */ jsx6("svg", { ...radixProps(props), children: /* @__PURE__ */ jsx6(
+    "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__ */ jsx6("svg", { ...radixProps(props), children: /* @__PURE__ */ jsx6(
+    "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__ */ jsx6("svg", { ...radixProps(props), children: /* @__PURE__ */ jsx6(
+    "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__ */ jsx6("svg", { ...radixProps(props), children: /* @__PURE__ */ jsx6(
+    "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__ */ jsx6("svg", { ...radixProps(props), children: /* @__PURE__ */ jsx6(
+    "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
+import { jsx as jsx7, jsxs as jsxs3 } from "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__ */ jsx7(
+    "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__ */ jsx7(
+    "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__ */ jsxs3(
+    "div",
+    {
+      "data-slot": "search-field",
+      className: cn("relative flex items-center", size === "sm" ? "h-control-sm" : "h-control", className),
+      children: [
+        /* @__PURE__ */ jsx7(MagnifyingGlassIcon, { className: "pointer-events-none absolute left-2 size-icon-sm text-label-tertiary" }),
+        /* @__PURE__ */ jsx7(
+          "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__ */ jsx7(
+          "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__ */ jsx7(XIcon, { className: "size-2.5", strokeWidth: 3 })
+          }
+        ) : null
+      ]
+    }
+  );
+});
+
+// src/desktop/select.tsx
+import * as SelectPrimitive2 from "@radix-ui/react-select";
+
+// src/select.tsx
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { cva as cva2 } from "class-variance-authority";
+import * as React6 from "react";
+
+// src/field-surface.ts
+var FIELD_SURFACE_CLASS = "border border-border bg-card";
+
+// src/select.tsx
+import { jsx as jsx8, jsxs as jsxs4 } from "react/jsx-runtime";
+var selectTriggerVariants = cva2(
+  `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__ */ jsx8(
+    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__ */ jsxs4(
+  SelectPrimitive.Trigger,
+  {
+    ref,
+    className: cn2(selectTriggerVariants({ size, className })),
+    ...props,
+    children: [
+      children,
+      !hideArrow && /* @__PURE__ */ jsx8(SelectPrimitive.Icon, { asChild: true, children: /* @__PURE__ */ jsx8(SelectChevron, { size: size === "sm" ? "sm" : "default" }) })
+    ]
+  }
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+var SelectScrollUpButton = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
+  SelectPrimitive.ScrollUpButton,
+  {
+    ref,
+    className: cn2(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx8(RadixChevronUpIcon, {})
+  }
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+var SelectScrollDownButton = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
+  SelectPrimitive.ScrollDownButton,
+  {
+    ref,
+    className: cn2(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    ),
+    ...props,
+    children: /* @__PURE__ */ jsx8(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__ */ jsx8(SelectPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsxs4(
+      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__ */ jsx8(SelectScrollUpButton, {}),
+          /* @__PURE__ */ jsx8(
+            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__ */ jsx8(SelectScrollDownButton, {})
+        ]
+      }
+    ) });
+  }
+);
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+var SelectLabel = React6.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx8(
+  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__ */ jsxs4(
+  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__ */ jsx8("span", { className: "absolute right-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx8(SelectPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx8(CheckIcon, { className: "h-4 w-4" }) }) }),
+      /* @__PURE__ */ jsx8("span", { className: "min-w-0 whitespace-normal break-words [overflow-wrap:anywhere]", children: /* @__PURE__ */ jsx8(SelectPrimitive.ItemText, { children }) }),
+      description ? /* @__PURE__ */ jsx8("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__ */ jsx8(
+  SelectPrimitive.Separator,
+  {
+    ref,
+    className: cn2("-mx-1 my-1 h-px bg-muted", className),
+    ...props
+  }
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+// src/desktop/select.tsx
+import { jsx as jsx9, jsxs as jsxs5 } from "react/jsx-runtime";
+function Select({
+  value,
+  onValueChange,
+  options,
+  placeholder,
+  size = "md",
+  disabled,
+  id,
+  className,
+  "aria-label": ariaLabel,
+  ...data
+}) {
+  return /* @__PURE__ */ jsxs5(SelectPrimitive2.Root, { ...value === void 0 ? {} : { value }, onValueChange, disabled: disabled ?? false, children: [
+    /* @__PURE__ */ jsxs5(
+      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__ */ jsx9("span", { className: "min-w-0 truncate", children: /* @__PURE__ */ jsx9(SelectPrimitive2.Value, { placeholder }) }),
+          /* @__PURE__ */ jsx9(SelectPrimitive2.Icon, { asChild: true, children: /* @__PURE__ */ jsx9(ChevronsUpDownIcon, { className: "size-icon-sm shrink-0 text-label-secondary" }) })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx9(SelectContent, { children: options.map(
+      (option, index) => option === "-" ? /* @__PURE__ */ jsx9(SelectSeparator, {}, `sep-${index}`) : /* @__PURE__ */ jsx9(SelectItem, { value: option.value, disabled: option.disabled ?? false, children: option.label }, option.value)
+    ) })
+  ] });
+}
+
+// src/desktop/segmented.tsx
+import * as ToggleGroup from "@radix-ui/react-toggle-group";
+import { jsx as jsx10 } from "react/jsx-runtime";
+function Segmented({
+  value,
+  onValueChange,
+  segments,
+  size = "md",
+  className,
+  "aria-label": ariaLabel,
+  ...data
+}) {
+  return /* @__PURE__ */ jsx10(
+    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__ */ jsx10(
+        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
+import * as SwitchPrimitives from "@radix-ui/react-switch";
+import * as React7 from "react";
+import { jsx as jsx11 } from "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__ */ jsx11(
+  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__ */ jsx11(
+      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
+import * as CheckboxPrimitive from "@radix-ui/react-checkbox";
+import * as React8 from "react";
+import { jsx as jsx12 } from "react/jsx-runtime";
+var CHECKBOX_SIZES = {
+  sm: { root: "h-3.5 w-3.5 rounded-xs", glyph: "h-3 w-3" },
+  md: { root: "h-4 w-4 rounded-sm", glyph: "h-3.5 w-3.5" }
+};
+var Checkbox = React8.forwardRef(({ className, size = "md", ...props }, ref) => /* @__PURE__ */ jsx12(
+  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__ */ jsx12(
+      CheckboxPrimitive.Indicator,
+      {
+        "data-slot": "checkbox-indicator",
+        className: "flex items-center justify-center text-current",
+        children: props.checked === "indeterminate" ? /* @__PURE__ */ jsx12(DividerHorizontalIcon, { className: CHECKBOX_SIZES[size].glyph }) : /* @__PURE__ */ jsx12(CheckIcon, { className: CHECKBOX_SIZES[size].glyph })
+      }
+    )
+  }
+));
+Checkbox.displayName = CheckboxPrimitive.Root.displayName;
+
+// src/desktop/layout.tsx
+import * as React9 from "react";
+import { jsx as jsx13, jsxs as jsxs6 } from "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__ */ jsx13("div", { ref, "data-slot": "page", className: cn("h-full overflow-y-auto bg-content", className), ...props, children: /* @__PURE__ */ jsxs6("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__ */ jsx13("div", { className: cn("flex w-full flex-col gap-6", WIDTH.form), children }) : children
+  ] }) });
+});
+function PageHeader({ title, subtitle, icon, actions, className, ...props }) {
+  return /* @__PURE__ */ jsxs6("header", { "data-slot": "page-header", className: cn("flex min-h-control-lg items-center gap-3", className), ...props, children: [
+    icon ? /* @__PURE__ */ jsx13("span", { className: "flex size-icon-xl shrink-0 items-center justify-center text-label-secondary [&_svg]:size-icon-lg", children: icon }) : null,
+    /* @__PURE__ */ jsxs6("div", { className: "flex min-w-0 flex-1 flex-col", children: [
+      /* @__PURE__ */ jsx13(Text, { as: "h1", variant: "title-2", truncate: true, children: title }),
+      /* @__PURE__ */ jsx13(Text, { variant: "callout", tone: "secondary", truncate: true, "aria-hidden": subtitle ? void 0 : true, children: subtitle ?? "\xA0" })
+    ] }),
+    actions ? /* @__PURE__ */ jsx13("div", { className: "flex shrink-0 items-center gap-2", children: actions }) : null
+  ] });
+}
+function Toolbar({ draggable, className, ...props }) {
+  return /* @__PURE__ */ jsx13(
+    "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__ */ jsx13("div", { "aria-hidden": true, className: "flex-1" });
+}
+function ToolbarDivider() {
+  return /* @__PURE__ */ jsx13("div", { "aria-hidden": true, className: "mx-1 h-icon w-px bg-separator" });
+}
+
+// src/desktop/group.tsx
+import * as React10 from "react";
+import { Fragment as Fragment2, jsx as jsx14, jsxs as jsxs7 } from "react/jsx-runtime";
+function Section({ title, actions, footer, appearance = "grouped", className, children, ...props }) {
+  return /* @__PURE__ */ jsxs7("section", { "data-slot": "section", className: cn("flex flex-col gap-2", appearance === "grouped" && "max-w-form", className), ...props, children: [
+    title || actions ? /* @__PURE__ */ jsxs7("div", { className: "flex min-h-control items-end gap-2", children: [
+      title ? /* @__PURE__ */ jsx14(Text, { as: "h2", variant: "headline", className: "flex-1", truncate: true, children: title }) : /* @__PURE__ */ jsx14("span", { className: "flex-1" }),
+      actions ? /* @__PURE__ */ jsx14("div", { className: "flex items-center gap-2", children: actions }) : null
+    ] }) : null,
+    /* @__PURE__ */ jsx14(
+      "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__ */ jsx14(Text, { as: "p", variant: "caption", tone: "secondary", children: footer }) : null
+  ] });
+}
+function SectionContent({ className, ...props }) {
+  return /* @__PURE__ */ jsx14("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__ */ jsxs7(Fragment2, { children: [
+    icon ? /* @__PURE__ */ jsx14("span", { className: "flex size-icon-lg shrink-0 items-center justify-center text-label-secondary [&_svg]:size-icon", children: icon }) : null,
+    /* @__PURE__ */ jsxs7("span", { className: "flex min-w-0 flex-1 flex-col", children: [
+      /* @__PURE__ */ jsx14(Text, { tone: destructive ? "danger" : "primary", mono, truncate: true, className: cn(selected && "text-inherit"), children: title }),
+      subtitle ? /* @__PURE__ */ jsx14(Text, { variant: "callout", tone: "secondary", truncate: true, className: cn(selected && "text-inherit opacity-80"), children: subtitle }) : null
+    ] }),
+    value !== void 0 && value !== null ? /* @__PURE__ */ jsx14(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__ */ jsx14(
+      "span",
+      {
+        className: "flex shrink-0 items-center gap-2",
+        onClick: (event) => event.stopPropagation(),
+        onKeyDown: (event) => event.stopPropagation(),
+        children: accessory
+      }
+    ) : null,
+    chevron ? /* @__PURE__ */ jsx14(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__ */ jsx14(
+      "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__ */ jsx14("div", { ref, "data-slot": "row", style, className: rowClass, ...props, children: body });
+});
+function FieldRow({ label, field, action, onSubmit, stacked, className, ...props }) {
+  return /* @__PURE__ */ jsxs7(
+    "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__ */ jsx14(Text, { variant: "body", className: "w-32 shrink-0", truncate: true, children: label }) : null,
+        /* @__PURE__ */ jsx14("div", { className: "min-w-0 flex-1", children: field }),
+        action ? /* @__PURE__ */ jsx14("div", { className: cn("flex shrink-0 items-center gap-2", stacked && "self-end"), children: action }) : null
+      ]
+    }
+  );
+}
+
+// src/desktop/code-block.tsx
+import * as React11 from "react";
+import { jsx as jsx15 } from "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__ */ jsx15(
+    "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
+import * as React18 from "react";
+
+// src/alert-dialog.tsx
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
+import { treeContainsComponent } from "@ai-matrx/kit/react-tree";
+import * as React14 from "react";
+
+// src/button.tsx
+import { Slot as Slot2 } from "@radix-ui/react-slot";
+import { cva as cva3 } from "class-variance-authority";
+import * as React12 from "react";
+import { jsx as jsx16 } from "react/jsx-runtime";
+var buttonVariants2 = cva3(
+  "inline-flex items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-all duration-200 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-0 disabled:opacity-50 active:scale-[0.98] [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  {
+    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 ? Slot2 : "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__ */ jsx16(
+      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
+import { FocusScope } from "@radix-ui/react-focus-scope";
+import { Slot as Slot3 } from "@radix-ui/react-slot";
+import * as React13 from "react";
+import { jsx as jsx17 } from "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__ */ jsx17(
+    FocusScope,
+    {
+      asChild: true,
+      trapped: false,
+      loop: false,
+      onMountAutoFocus: preventAutoFocus,
+      onUnmountAutoFocus: returnFocus,
+      children: /* @__PURE__ */ jsx17(
+        Slot3,
+        {
+          ref,
+          ...{ [FLOATING_LAYER_ATTR]: "" },
+          style: { pointerEvents: "auto" },
+          children
+        }
+      )
+    }
+  );
+});
+FloatingLayer.displayName = "FloatingLayer";
+
+// src/alert-dialog.tsx
+import { jsx as jsx18, jsxs as jsxs8 } from "react/jsx-runtime";
+var AlertDialog = AlertDialogPrimitive.Root;
+var AlertDialogPortal = ({
+  container,
+  ...props
+}) => {
+  const resolved = usePortalContainer(container);
+  return /* @__PURE__ */ jsx18(AlertDialogPrimitive.Portal, { container: resolved ?? null, ...props });
+};
+AlertDialogPortal.displayName = "AlertDialogPortal";
+var AlertDialogOverlay = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx18(
+  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__ */ jsx18(AlertDialogPrimitive.Content, { ...props, ref, "aria-modal": "true" });
+});
+AlertDialogContentPrimitive.displayName = "AlertDialogContentPrimitive";
+var AlertDialogDescription = React14.forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx18(
+  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 = treeContainsComponent(children, AlertDialogDescription) || treeContainsComponent(children, AlertDialogPrimitive.Description);
+  return /* @__PURE__ */ jsxs8(AlertDialogPortal, { container, children: [
+    /* @__PURE__ */ jsx18(AlertDialogOverlay, {}),
+    /* @__PURE__ */ jsxs8(
+      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__ */ jsx18(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__ */ jsx18(
+  "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__ */ jsx18(
+  "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__ */ jsx18(
+  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__ */ jsx18(
+  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__ */ jsx18(
+  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
+import { jsx as jsx19, jsxs as jsxs9 } from "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__ */ jsx19(AlertDialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs9(
+    AlertDialogContent,
+    {
+      className: contentClassName,
+      ...portalContainer === void 0 ? {} : { container: portalContainer },
+      children: [
+        /* @__PURE__ */ jsxs9(AlertDialogHeader, { children: [
+          /* @__PURE__ */ jsx19(AlertDialogTitle, { children: title }),
+          description ? /* @__PURE__ */ jsx19(AlertDialogDescription, { asChild: true, children: /* @__PURE__ */ jsx19("div", { children: description }) }) : null
+        ] }),
+        content ?? null,
+        /* @__PURE__ */ jsxs9(AlertDialogFooter, { children: [
+          cancelLabel === null ? null : /* @__PURE__ */ jsx19(AlertDialogCancel, { className: "max-lg:min-h-11", disabled: busy, children: cancelLabel }),
+          confirmHeld ? null : /* @__PURE__ */ jsxs9(
+            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__ */ jsx19(Loader2Icon, { className: cn2("mr-2 h-4 w-4", MOTION_SPIN) }) : null,
+                confirmLabel
+              ]
+            }
+          )
+        ] })
+      ]
+    }
+  ) });
+}
+
+// src/dropdown-menu.tsx
+import * as DropdownMenuPrimitive from "@radix-ui/react-dropdown-menu";
+import * as React17 from "react";
+
+// src/menu-scroll-edges.tsx
+import * as React15 from "react";
+
+// src/use-scroll-fade.ts
+import { useCallback, useEffect as useEffect2, useRef as useRef2, useState as useState2 } from "react";
+var EPSILON = 2;
+function useScrollFade() {
+  const [state, setState] = useState2({
+    top: false,
+    bottom: false
+  });
+  const nodeRef = useRef2(null);
+  const cleanupRef = useRef2(null);
+  const measure = 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 = 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]
+  );
+  useEffect2(() => () => 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
+import { Fragment as Fragment3, jsx as jsx20, jsxs as jsxs10 } from "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__ */ jsx20("div", { "aria-hidden": true, "data-menu-scroll-edge": side, className: "matrx-menu-scroll-edge", children: /* @__PURE__ */ jsx20("div", { className: "matrx-menu-scroll-fade", children: /* @__PURE__ */ jsx20(
+    "div",
+    {
+      "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__ */ jsx20(RadixChevronUpIcon, {}) : /* @__PURE__ */ jsx20(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__ */ jsxs10(Fragment3, { children: [
+    fade.state.top ? /* @__PURE__ */ jsx20(MenuScrollEdge, { side: "top", scroller }) : null,
+    children,
+    fade.state.bottom ? /* @__PURE__ */ jsx20(MenuScrollEdge, { side: "bottom", scroller }) : null
+  ] });
+  return { ref, wrap, surfaceClassName: "matrx-menu-surface" };
+}
+
+// src/submenu-focus.ts
+import * as React16 from "react";
+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
+import { jsx as jsx21, jsxs as jsxs11 } from "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__ */ jsxs11(
+  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__ */ jsx21(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__ */ jsx21(DropdownMenuPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx21(
+    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__ */ jsx21(DropdownMenuPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx21(
+    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__ */ jsx21(
+  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__ */ jsxs11(
+  DropdownMenuPrimitive.CheckboxItem,
+  {
+    ref,
+    "data-slot": "dropdown-menu-checkbox-item",
+    className: cn2(MENU_INDICATOR_ITEM_CLASS, className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx21("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx21(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx21(CheckIcon, { className: "h-4 w-4" }) }) }),
+      children
+    ]
+  }
+));
+DropdownMenuCheckboxItem.displayName = DropdownMenuPrimitive.CheckboxItem.displayName;
+var DropdownMenuRadioItem = React17.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs11(
+  DropdownMenuPrimitive.RadioItem,
+  {
+    ref,
+    "data-slot": "dropdown-menu-radio-item",
+    className: cn2(MENU_INDICATOR_ITEM_CLASS, className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx21("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx21(DropdownMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx21(DotFilledIcon, { className: "h-4 w-4 fill-current" }) }) }),
+      children
+    ]
+  }
+));
+DropdownMenuRadioItem.displayName = DropdownMenuPrimitive.RadioItem.displayName;
+var DropdownMenuLabel = React17.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx21(
+  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__ */ jsx21(
+  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__ */ jsx21(
+  "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
+import { jsx as jsx22, jsxs as jsxs12 } from "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__ */ jsx22("div", { "data-slot": "data-table", className: cn("overflow-hidden rounded-group bg-content shadow-raised", className), ...rest, children: /* @__PURE__ */ jsxs12("table", { "aria-label": ariaLabel, className: "w-full table-auto border-collapse text-body", children: [
+    /* @__PURE__ */ jsx22("thead", { children: /* @__PURE__ */ jsxs12("tr", { className: "h-row-compact border-b border-separator", children: [
+      detail ? /* @__PURE__ */ jsx22("th", { "aria-hidden": true, className: "w-6" }) : null,
+      columns.map((column) => {
+        const sorted = sort?.key === column.key ? sort.direction : void 0;
+        return /* @__PURE__ */ jsx22(
+          "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__ */ jsxs12(
+              "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__ */ jsx22(
+                    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__ */ jsx22("th", { "aria-label": "Actions", className: "w-px" }) : null
+    ] }) }),
+    rows.length === 0 && empty ? /* @__PURE__ */ jsx22("tbody", { children: /* @__PURE__ */ jsx22("tr", { children: /* @__PURE__ */ jsx22("td", { colSpan: span, children: empty }) }) }) : /* @__PURE__ */ jsx22("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__ */ jsxs12(React18.Fragment, { children: [
+        /* @__PURE__ */ jsxs12(
+          "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__ */ jsx22("td", { className: "w-6 pl-2", children: content !== null ? /* @__PURE__ */ jsx22(
+                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__ */ jsx22(
+                "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__ */ jsx22(
+                "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__ */ jsx22(RowActions, { action: rowAction?.(row) ?? null, menu: rowMenu?.(row) ?? null })
+                }
+              ) : null
+            ]
+          }
+        ),
+        open ? /* @__PURE__ */ jsx22("tr", { className: cn(striped && index % 2 === 1 && "bg-fill"), children: /* @__PURE__ */ jsx22("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__ */ jsxs12("span", { className: "flex items-center justify-end gap-1", children: [
+    action ? /* @__PURE__ */ jsx22(Button, { size: "sm", disabled: action.disabled ?? false, onClick: action.onSelect, children: action.label }) : null,
+    menu && menu.length > 0 ? /* @__PURE__ */ jsxs12(DropdownMenu, { children: [
+      /* @__PURE__ */ jsx22(DropdownMenuTrigger, { asChild: true, children: /* @__PURE__ */ jsx22(IconButton, { size: "sm", label: "More", icon: /* @__PURE__ */ jsx22(MoreHorizontalIcon, {}) }) }),
+      /* @__PURE__ */ jsx22(DropdownMenuContent, { align: "end", children: menu.map((item) => /* @__PURE__ */ jsx22(
+        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__ */ jsx22(
+      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
+import * as React19 from "react";
+import { jsx as jsx23, jsxs as jsxs13 } from "react/jsx-runtime";
+function SourceList({ className, onKeyDown, ...props }) {
+  return /* @__PURE__ */ jsx23(
+    "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__ */ jsxs13("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__ */ jsxs13("div", { className: "flex h-row-compact items-center gap-2 px-2", children: [
+      /* @__PURE__ */ jsx23(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__ */ jsxs13(
+    "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__ */ jsx23("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__ */ jsxs13("span", { className: "flex min-w-0 flex-1 flex-col", children: [
+          /* @__PURE__ */ jsx23("span", { className: "truncate", children: label }),
+          hint ? /* @__PURE__ */ jsx23("span", { className: "truncate text-callout font-normal text-label-secondary", children: hint }) : null
+        ] }),
+        badge ? /* @__PURE__ */ jsx23("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__ */ jsx23(
+    "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
+import { jsx as jsx24, jsxs as jsxs14 } from "react/jsx-runtime";
+function StateView({ kind, icon, title, message, actions, size = "inline", className, ...props }) {
+  return /* @__PURE__ */ jsxs14(
+    "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__ */ jsx24(Spinner, { size: "lg" }) : icon ? /* @__PURE__ */ jsx24(
+          "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__ */ jsx24(Text, { variant: size === "page" ? "title-3" : "headline", tone: kind === "loading" ? "secondary" : "primary", children: title }),
+        message ? /* @__PURE__ */ jsx24(Text, { as: "p", variant: "callout", tone: "secondary", selectable: kind === "error", className: "max-w-form", children: message }) : null,
+        actions ? /* @__PURE__ */ jsx24("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__ */ jsxs14(
+    "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__ */ jsx24("span", { className: cn("flex shrink-0 [&_svg]:size-icon", message && "mt-px", BANNER_TONE[tone].icon), children: icon }) : null,
+        /* @__PURE__ */ jsxs14("div", { className: "flex min-w-0 flex-1 flex-col gap-0.5", children: [
+          /* @__PURE__ */ jsx24(Text, { emphasized: true, children: title }),
+          message ? /* @__PURE__ */ jsx24(Text, { as: "p", variant: "callout", tone: "secondary", selectable: true, children: message }) : null
+        ] }),
+        actions ? /* @__PURE__ */ jsx24("div", { className: "flex shrink-0 items-center gap-2", children: actions }) : null
+      ]
+    }
+  );
+}
+function AlertGlyph() {
+  return /* @__PURE__ */ jsxs14("svg", { viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: 1.75, strokeLinecap: "round", strokeLinejoin: "round", "aria-hidden": true, children: [
+    /* @__PURE__ */ jsx24("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__ */ jsx24("path", { d: "M12 9v4" }),
+    /* @__PURE__ */ jsx24("path", { d: "M12 17h.01" })
+  ] });
+}
+function ErrorBanner({ error, onDismiss, title = "That didn't work", ...props }) {
+  if (!error) return null;
+  return /* @__PURE__ */ jsx24(
+    Banner,
+    {
+      tone: "danger",
+      icon: /* @__PURE__ */ jsx24(AlertGlyph, {}),
+      title,
+      message: error.message,
+      actions: /* @__PURE__ */ jsx24(Button, { size: "sm", onClick: onDismiss, children: "Dismiss" }),
+      ...props
+    }
+  );
+}
+
+// src/desktop/resource.tsx
+import { Fragment as Fragment5, jsx as jsx25 } from "react/jsx-runtime";
+function Resource({ state, loading, failed, isEmpty, empty, size = "inline", children }) {
+  if (state.data === void 0) {
+    if (state.error) {
+      return /* @__PURE__ */ jsx25(
+        StateView,
+        {
+          kind: "error",
+          size,
+          title: failed,
+          message: state.error.message,
+          actions: state.refetch ? /* @__PURE__ */ jsx25(Button, { onClick: () => void state.refetch?.(), children: "Try again" }) : void 0
+        }
+      );
+    }
+    return /* @__PURE__ */ jsx25(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__ */ jsx25(Fragment5, { children: empty });
+  return /* @__PURE__ */ jsx25(Fragment5, { children: children(state.data) });
+}
+
+// src/desktop/tag.tsx
+import { jsx as jsx26 } from "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__ */ jsx26(
+    "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__ */ jsx26(
+    "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__ */ jsx26(
+    "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
+import { jsx as jsx27, jsxs as jsxs15 } from "react/jsx-runtime";
+function ComingSoon({ icon, title, summary, includes, className, ...props }) {
+  return /* @__PURE__ */ jsx27(Page, { width: "full", "data-coming-soon": title, className, ...props, children: /* @__PURE__ */ jsxs15("div", { className: "mx-auto flex max-w-form flex-col items-center gap-3 pt-16 text-center", children: [
+    /* @__PURE__ */ jsx27("span", { className: "flex size-16 items-center justify-center rounded-panel bg-fill-secondary text-label-secondary [&_svg]:size-icon-xl", children: icon }),
+    /* @__PURE__ */ jsxs15("div", { className: "flex flex-col items-center gap-1.5", children: [
+      /* @__PURE__ */ jsx27(Tag, { children: "Coming soon" }),
+      /* @__PURE__ */ jsx27(Text, { as: "h1", variant: "title-1", children: title }),
+      /* @__PURE__ */ jsx27(Text, { as: "p", variant: "body", tone: "secondary", className: "max-w-form", children: summary })
+    ] }),
+    includes && includes.length > 0 ? /* @__PURE__ */ jsx27("ul", { className: "mt-3 flex flex-col gap-2 text-left", children: includes.slice(0, 4).map((line) => /* @__PURE__ */ jsxs15("li", { className: "flex items-start gap-2", children: [
+      /* @__PURE__ */ jsx27("span", { "aria-hidden": true, className: "mt-1.5 size-1.5 shrink-0 rounded-full bg-label-tertiary" }),
+      /* @__PURE__ */ jsx27(Text, { variant: "callout", tone: "secondary", children: line })
+    ] }, line)) }) : null
+  ] }) });
+}
+
+// src/desktop/meter.tsx
+import * as ProgressPrimitive from "@radix-ui/react-progress";
+import { jsx as jsx28 } from "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__ */ jsx28(
+    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__ */ jsx28(
+        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
+import * as ContextMenuPrimitive from "@radix-ui/react-context-menu";
+import * as React20 from "react";
+import { jsx as jsx29, jsxs as jsxs16 } from "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__ */ jsxs16(
+  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__ */ jsx29(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__ */ jsx29(ContextMenuPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx29(
+    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__ */ jsx29(ContextMenuPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx29(
+    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__ */ jsx29(
+  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__ */ jsxs16(
+  ContextMenuPrimitive.CheckboxItem,
+  {
+    ref,
+    "data-slot": "context-menu-checkbox-item",
+    className: cn2(INDICATOR_ITEM_CLASS, className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx29("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx29(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx29(CheckIcon, { className: "h-4 w-4" }) }) }),
+      children
+    ]
+  }
+));
+ContextMenuCheckboxItem.displayName = ContextMenuPrimitive.CheckboxItem.displayName;
+var ContextMenuRadioItem = React20.forwardRef(({ className, children, ...props }, ref) => /* @__PURE__ */ jsxs16(
+  ContextMenuPrimitive.RadioItem,
+  {
+    ref,
+    "data-slot": "context-menu-radio-item",
+    className: cn2(INDICATOR_ITEM_CLASS, className),
+    ...props,
+    children: [
+      /* @__PURE__ */ jsx29("span", { className: "absolute left-2 flex h-3.5 w-3.5 items-center justify-center", children: /* @__PURE__ */ jsx29(ContextMenuPrimitive.ItemIndicator, { children: /* @__PURE__ */ jsx29(DotFilledIcon, { className: "h-4 w-4 fill-current" }) }) }),
+      children
+    ]
+  }
+));
+ContextMenuRadioItem.displayName = ContextMenuPrimitive.RadioItem.displayName;
+var ContextMenuLabel = React20.forwardRef(({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx29(
+  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__ */ jsx29(
+  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__ */ jsx29(
+  "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
+import * as DialogPrimitive from "@radix-ui/react-dialog";
+import * as VisuallyHidden from "@radix-ui/react-visually-hidden";
+import { treeContainsComponent as treeContainsComponent2 } from "@ai-matrx/kit/react-tree";
+import * as React22 from "react";
+
+// src/radix-dialog-modal-context.tsx
+import * as React21 from "react";
+import { jsx as jsx30 } from "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__ */ jsx30(RadixDialogModalContext.Provider, { value: modal, children });
+}
+function useRadixDialogModal() {
+  return React21.useContext(RadixDialogModalContext);
+}
+
+// src/use-is-mobile.ts
+import { MOBILE_BREAKPOINT, useIsMobile } from "@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
+import { jsx as jsx31, jsxs as jsxs17 } from "react/jsx-runtime";
+var DialogWindowedByDefaultContext = React22.createContext(false);
+var Dialog = ({
+  children,
+  ...props
+}) => {
+  const isMobile = useIsMobile();
+  const modal = props.modal ?? isMobile;
+  return /* @__PURE__ */ jsx31(DialogWindowedByDefaultContext.Provider, { value: props.modal === void 0, children: /* @__PURE__ */ jsx31(RadixDialogModalProvider, { modal, children: /* @__PURE__ */ jsx31(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__ */ jsx31(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__ */ jsx31(
+  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__ */ jsx31(
+    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 = 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 = treeContainsComponent2(children, DialogTitle) || treeContainsComponent2(children, DialogPrimitive.Title);
+    const hasDescription = treeContainsComponent2(children, DialogDescription) || treeContainsComponent2(children, DialogPrimitive.Description);
+    return /* @__PURE__ */ jsxs17(DialogPortal, { container, children: [
+      isModal ? /* @__PURE__ */ jsx31(DialogOverlay, {}) : null,
+      /* @__PURE__ */ jsxs17(
+        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__ */ jsx31(VisuallyHidden.Root, { children: /* @__PURE__ */ jsx31(DialogPrimitive.Title, { children: "Dialog" }) }),
+            /* @__PURE__ */ jsx31(DialogContainerContext.Provider, { value: containerEl, children: /* @__PURE__ */ jsx31(DialogWindowHandleContext.Provider, { value: handle, children: /* @__PURE__ */ jsx31(
+              PortalContainerProvider,
+              {
+                container: containerEl ?? injectedContainer ?? null,
+                children
+              }
+            ) }) }),
+            showCloseButton ? /* @__PURE__ */ jsxs17(
+              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__ */ jsx31(XIcon, { className: "h-4 w-4" }),
+                  /* @__PURE__ */ jsx31("span", { className: "sr-only", children: "Close" })
+                ]
+              }
+            ) : null
+          ]
+        }
+      )
+    ] });
+  }
+);
+DialogContent.displayName = DialogPrimitive.Content.displayName;
+var DialogHeader = ({
+  className,
+  ...props
+}) => {
+  const handle = React22.useContext(DialogWindowHandleContext);
+  return /* @__PURE__ */ jsx31(
+    "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__ */ jsx31(
+  "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__ */ jsx31(
+  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__ */ jsx31(
+  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
+import { confirmOpener } from "@ai-matrx/kit/confirm-opener";
+import { useOpenerHost } from "@ai-matrx/kit/opener-react";
+import * as React23 from "react";
+import { jsx as jsx32 } from "react/jsx-runtime";
+function ConfirmDialogHost() {
+  const { shown, open, settle } = useOpenerHost(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__ */ jsx32(
+    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
+import * as PopoverPrimitive from "@radix-ui/react-popover";
+import * as React24 from "react";
+import { jsx as jsx33 } from "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__ */ jsx33(PopoverPrimitive.Portal, { container: portalContainer, children: /* @__PURE__ */ jsx33(
+      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
+import * as CollapsiblePrimitive from "@radix-ui/react-collapsible";
+import * as React25 from "react";
+import { jsx as jsx34 } from "react/jsx-runtime";
+var Collapsible = CollapsiblePrimitive.Root;
+var CollapsibleTrigger2 = CollapsiblePrimitive.CollapsibleTrigger;
+var CollapsibleContent2 = React25.forwardRef(({ className, animated = true, ...props }, ref) => /* @__PURE__ */ jsx34(
+  CollapsiblePrimitive.CollapsibleContent,
+  {
+    ref,
+    "data-slot": "collapsible-content",
+    className: cn2(
+      animated && "matrx-collapsible-content overflow-hidden",
+      className
+    ),
+    ...props
+  }
+));
+CollapsibleContent2.displayName = "CollapsibleContent";
+
+// src/skeleton.tsx
+import { jsx as jsx35 } from "react/jsx-runtime";
+function Skeleton({ className, animated = true, ...props }) {
+  return /* @__PURE__ */ jsx35(
+    "div",
+    {
+      "data-slot": "skeleton",
+      className: cn2(
+        "rounded-md bg-primary/10",
+        animated && MOTION_PULSE,
+        className
+      ),
+      ...props
+    }
+  );
+}
+
+// src/app-shell/app-rail.tsx
+import * as React26 from "react";
+
+// src/app-shell/status-dot.tsx
+import { jsx as jsx36 } from "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__ */ jsx36(
+    "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
+import { jsx as jsx37, jsxs as jsxs18 } from "react/jsx-runtime";
+function AppRail({ className, style, ...props }) {
+  return /* @__PURE__ */ jsx37(
+    "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__ */ jsx37("div", { "data-slot": "app-rail-group", className: cn2("flex flex-col items-center gap-1", className), ...props });
+}
+function AppRailSpacer() {
+  return /* @__PURE__ */ jsx37("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__ */ jsxs18(Tooltip, { children: [
+    /* @__PURE__ */ jsx37(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsxs18(
+      "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__ */ jsx37(
+            StatusDot,
+            {
+              tone: attention,
+              variant: "ring",
+              ...attentionLabel ? { label: attentionLabel } : {},
+              className: "absolute right-0.5 bottom-0.5"
+            }
+          ) : null
+        ]
+      }
+    ) }),
+    /* @__PURE__ */ jsx37(TooltipContent, { side: "right", align: "center", children: /* @__PURE__ */ jsxs18("span", { className: "flex items-center gap-2", children: [
+      label,
+      shortcut ? /* @__PURE__ */ jsx37("span", { className: "opacity-60", children: shortcut }) : null
+    ] }) })
+  ] });
+});
+var AppRailAvatar = React26.forwardRef(function AppRailAvatar2({ initials = "", label, className, children, ...props }, ref) {
+  return /* @__PURE__ */ jsxs18(Tooltip, { children: [
+    /* @__PURE__ */ jsx37(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx37(
+      "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__ */ jsx37(TooltipContent, { side: "right", align: "center", children: label })
+  ] });
+});
+
+// src/app-shell/canvas.tsx
+import * as React27 from "react";
+
+// src/resizable.tsx
+import { Group as Group4, Panel, Separator as Separator4 } from "react-resizable-panels";
+import { jsx as jsx38 } from "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__ */ jsx38(
+  Group4,
+  {
+    "data-slot": "resizable-group",
+    className: cn2("flex h-full w-full", className),
+    ...props
+  }
+);
+ResizablePanelGroup.displayName = "ResizablePanelGroup";
+var ResizablePanel = Panel;
+var ResizableHandle = ({
+  withHandle,
+  size = "xs",
+  className,
+  ...props
+}) => /* @__PURE__ */ jsx38(
+  Separator4,
+  {
+    "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__ */ jsx38("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__ */ jsx38(DragHandleDots2Icon, { className: "h-2.5 w-2.5 group-aria-[orientation=horizontal]/handle:rotate-90" }) }) : null
+  }
+);
+ResizableHandle.displayName = "ResizableHandle";
+
+// src/app-shell/canvas.tsx
+import { jsx as jsx39, jsxs as jsxs19 } from "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__ */ jsx39("div", { "data-slot": "canvas-layout", "data-expanded": expanded.id, className: cn2("flex h-full w-full", className), children: expanded.node });
+  }
+  return /* @__PURE__ */ jsx39(ResizablePanelGroup, { "data-slot": "canvas-layout", orientation: "horizontal", className: cn2("gap-0", className), children: visible.map((column, ci) => /* @__PURE__ */ jsxs19(React27.Fragment, { children: [
+    ci > 0 ? /* @__PURE__ */ jsx39(ResizableHandle, { "data-canvas-gap": "column", size: "md", className: GAP }) : null,
+    /* @__PURE__ */ jsx39(
+      ResizablePanel,
+      {
+        id: column.id,
+        minSize: column.minSize ?? 220,
+        ...column.defaultSize !== void 0 ? { defaultSize: column.defaultSize } : {},
+        children: /* @__PURE__ */ jsx39(ResizablePanelGroup, { "data-canvas-column": column.id, orientation: "vertical", children: column.panels.map((panel, pi) => /* @__PURE__ */ jsxs19(React27.Fragment, { children: [
+          pi > 0 ? /* @__PURE__ */ jsx39(ResizableHandle, { "data-canvas-gap": "row", size: "md", className: GAP }) : null,
+          /* @__PURE__ */ jsx39(
+            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
+import * as React28 from "react";
+import { jsx as jsx40, jsxs as jsxs20 } from "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__ */ jsx40(
+    "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__ */ jsxs20(Tooltip, { children: [
+          /* @__PURE__ */ jsx40(TooltipTrigger, { asChild: true, children: /* @__PURE__ */ jsx40(
+            "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__ */ jsx40(TooltipContent, { side: "bottom", align: "center", children: /* @__PURE__ */ jsxs20("span", { className: "flex items-center gap-2", children: [
+            option.label,
+            option.shortcut ? /* @__PURE__ */ jsx40("span", { className: "opacity-60", children: option.shortcut }) : null
+          ] }) })
+        ] }, option.value);
+      })
+    }
+  );
+}
+
+// src/organization-picker.tsx
+import * as React29 from "react";
+import { Fragment as Fragment7, jsx as jsx41, jsxs as jsxs21 } from "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__ */ jsx41(
+      "span",
+      {
+        style: box,
+        className: cn2("relative inline-flex shrink-0 overflow-hidden rounded-md bg-muted", className),
+        "data-slot": "organization-mark",
+        children: /* @__PURE__ */ jsx41("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__ */ jsx41(
+    "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
+    }
+  );
+}
+export {
+  AppRail,
+  AppRailAvatar,
+  AppRailGroup,
+  AppRailItem,
+  AppRailSpacer,
+  Banner,
+  Button,
+  CanvasLayout,
+  Checkbox,
+  CodeBlock,
+  Collapsible,
+  CollapsibleContent2 as CollapsibleContent,
+  CollapsibleTrigger2 as CollapsibleTrigger,
+  ComingSoon,
+  ConfirmDialog,
+  ConfirmDialogHost,
+  ContextMenu,
+  ContextMenuContent,
+  ContextMenuItem,
+  ContextMenuSeparator,
+  ContextMenuShortcut,
+  ContextMenuTrigger,
+  DataTable,
+  Dialog,
+  DialogClose,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  DropdownMenu,
+  DropdownMenuCheckboxItem,
+  DropdownMenuContent,
+  DropdownMenuGroup,
+  DropdownMenuItem,
+  DropdownMenuLabel,
+  DropdownMenuRadioGroup,
+  DropdownMenuRadioItem,
+  DropdownMenuSeparator,
+  DropdownMenuShortcut,
+  DropdownMenuSub,
+  DropdownMenuSubContent,
+  DropdownMenuSubTrigger,
+  DropdownMenuTrigger,
+  ErrorBanner,
+  FIELD,
+  FieldRow,
+  IconButton,
+  Kbd,
+  METER_THRESHOLDS,
+  Meter,
+  ModeSwitch,
+  OrganizationMark,
+  Page,
+  PageHeader,
+  Popover,
+  PopoverAnchor,
+  PopoverContent,
+  PopoverTrigger,
+  Resource,
+  Row,
+  SearchField,
+  Section,
+  SectionContent,
+  Segmented,
+  Select,
+  Skeleton,
+  SourceList,
+  SourceListItem,
+  SourceListMore,
+  SourceListSection,
+  Spinner,
+  StateView,
+  StatusDot,
+  StatusLight,
+  Switch,
+  TEXT_TONE,
+  Tag,
+  Text,
+  TextArea,
+  TextField,
+  Toolbar,
+  ToolbarDivider,
+  ToolbarSpacer,
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+  buttonVariants,
+  cn,
+  errorMessage,
+  formatAge,
+  formatBytes,
+  formatClockTime,
+  formatDuration,
+  formatRelativeTime,
+  formatUsage,
+  meterTone,
+  organizationColor
+};
+//# sourceMappingURL=desktop.js.map