@camstack/ui-library 0.1.34 → 0.1.36

package/dist/index.cjs

@@ -32,6 +32,7 @@ var src_exports = {};
 __export(src_exports, {
   AppShell: () => AppShell,
   Badge: () => Badge,
+  BottomSheet: () => BottomSheet,
   Button: () => Button,
   CLASS_COLORS: () => CLASS_COLORS,
   Card: () => Card,
@@ -68,6 +69,7 @@ __export(src_exports, {
   KeyValueList: () => KeyValueList,
   Label: () => Label,
   LoginForm: () => LoginForm,
+  MobileDrawer: () => MobileDrawer,
   PageHeader: () => PageHeader,
   PipelineBuilder: () => PipelineBuilder,
   PipelineRuntimeSelector: () => PipelineRuntimeSelector,
@@ -107,6 +109,7 @@ __export(src_exports, {
   statusIcons: () => statusIcons,
   themeToCss: () => themeToCss,
   useDevShell: () => useDevShell,
+  useIsMobile: () => useIsMobile,
   useThemeMode: () => useThemeMode
 });
 module.exports = __toCommonJS(src_exports);
@@ -787,7 +790,7 @@ function DialogTrigger({ children, ...props }) {
   return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", onClick: () => setOpen(true), ...props, children });
 }
 var contentVariants = (0, import_class_variance_authority7.cva)(
-  "bg-background-elevated border border-border rounded-lg p-4 backdrop:bg-black/50 backdrop:backdrop-blur-sm",
+  "bg-background-elevated border border-border rounded-lg p-4 backdrop:bg-black/50 backdrop:backdrop-blur-sm max-w-[calc(100vw-2rem)] max-h-[calc(100dvh-2rem)] overflow-y-auto",
   {
     variants: {
       width: {
@@ -1003,31 +1006,111 @@ function TooltipContent({ className, children, ...props }) {
 }
 
 // src/primitives/popover.tsx
+var import_react19 = require("react");
+
+// src/hooks/use-is-mobile.ts
 var import_react17 = require("react");
+var MOBILE_QUERY = "(max-width: 767px)";
+function subscribe(callback) {
+  const mql = window.matchMedia(MOBILE_QUERY);
+  mql.addEventListener("change", callback);
+  return () => mql.removeEventListener("change", callback);
+}
+function getSnapshot() {
+  return window.matchMedia(MOBILE_QUERY).matches;
+}
+function getServerSnapshot() {
+  return false;
+}
+function useIsMobile() {
+  return (0, import_react17.useSyncExternalStore)(subscribe, getSnapshot, getServerSnapshot);
+}
+
+// src/primitives/bottom-sheet.tsx
+var import_react18 = require("react");
+var import_lucide_react4 = require("lucide-react");
 var import_jsx_runtime16 = require("react/jsx-runtime");
-var PopoverContext = (0, import_react17.createContext)(null);
+function BottomSheet({ open, onClose, title, children, className }) {
+  (0, import_react18.useEffect)(() => {
+    if (!open) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      document.body.style.overflow = "";
+    };
+  }, [open, onClose]);
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_jsx_runtime16.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+      "div",
+      {
+        className: cn(
+          "fixed inset-0 z-40 bg-black/50 transition-opacity duration-200",
+          open ? "opacity-100" : "pointer-events-none opacity-0"
+        ),
+        onClick: onClose,
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
+      "div",
+      {
+        role: "dialog",
+        "aria-modal": "true",
+        className: cn(
+          "fixed inset-x-0 bottom-0 z-50 flex flex-col bg-background-elevated border-t border-border rounded-t-xl shadow-2xl transition-transform duration-200 ease-out",
+          "max-h-[80dvh]",
+          open ? "translate-y-0" : "translate-y-full",
+          className
+        ),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "flex justify-center pt-2 pb-1", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "h-1 w-8 rounded-full bg-foreground-subtle/30" }) }),
+          title && /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)("div", { className: "flex items-center justify-between px-4 pb-2", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "text-sm font-medium text-foreground", children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+              "button",
+              {
+                onClick: onClose,
+                className: "p-1 rounded-md hover:bg-surface-hover text-foreground-muted transition-colors",
+                children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_lucide_react4.X, { className: "h-4 w-4" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "flex-1 overflow-y-auto px-4 pb-4", children })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/primitives/popover.tsx
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var PopoverContext = (0, import_react19.createContext)(null);
 function usePopoverContext() {
-  const ctx = (0, import_react17.useContext)(PopoverContext);
+  const ctx = (0, import_react19.useContext)(PopoverContext);
   if (!ctx) throw new Error("Popover compound components must be used within <Popover>");
   return ctx;
 }
 function Popover({ children, open: controlledOpen, onOpenChange }) {
-  const [uncontrolledOpen, setUncontrolledOpen] = (0, import_react17.useState)(false);
+  const [uncontrolledOpen, setUncontrolledOpen] = (0, import_react19.useState)(false);
   const open = controlledOpen ?? uncontrolledOpen;
-  const triggerId = (0, import_react17.useId)();
-  const contentId = (0, import_react17.useId)();
-  const setOpen = (0, import_react17.useCallback)(
+  const triggerId = (0, import_react19.useId)();
+  const contentId = (0, import_react19.useId)();
+  const setOpen = (0, import_react19.useCallback)(
     (next) => {
       onOpenChange?.(next);
       if (controlledOpen === void 0) setUncontrolledOpen(next);
     },
     [controlledOpen, onOpenChange]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(PopoverContext.Provider, { value: { open, setOpen, triggerId, contentId }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "relative inline-block", children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(PopoverContext.Provider, { value: { open, setOpen, triggerId, contentId }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className: "relative inline-block", children }) });
 }
 function PopoverTrigger({ children, ...props }) {
   const { open, setOpen, triggerId, contentId } = usePopoverContext();
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "button",
     {
       type: "button",
@@ -1043,9 +1126,10 @@ function PopoverTrigger({ children, ...props }) {
 }
 function PopoverContent({ className, children, ...props }) {
   const { open, setOpen, contentId, triggerId } = usePopoverContext();
-  const ref = (0, import_react17.useRef)(null);
-  (0, import_react17.useEffect)(() => {
-    if (!open) return;
+  const isMobile = useIsMobile();
+  const ref = (0, import_react19.useRef)(null);
+  (0, import_react19.useEffect)(() => {
+    if (!open || isMobile) return;
     const handler = (e) => {
       const el = ref.current;
       const trigger = document.getElementById(triggerId);
@@ -1062,9 +1146,12 @@ function PopoverContent({ className, children, ...props }) {
       document.removeEventListener("mousedown", handler);
       document.removeEventListener("keydown", escHandler);
     };
-  }, [open, setOpen, triggerId]);
+  }, [open, setOpen, triggerId, isMobile]);
   if (!open) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+  if (isMobile) {
+    return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(BottomSheet, { open, onClose: () => setOpen(false), children });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
     "div",
     {
       ref,
@@ -1082,11 +1169,11 @@ function PopoverContent({ className, children, ...props }) {
 }
 
 // src/primitives/tabs.tsx
-var import_react18 = require("react");
-var import_jsx_runtime17 = require("react/jsx-runtime");
-var TabsContext = (0, import_react18.createContext)(null);
+var import_react20 = require("react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var TabsContext = (0, import_react20.createContext)(null);
 function useTabsContext() {
-  const ctx = (0, import_react18.useContext)(TabsContext);
+  const ctx = (0, import_react20.useContext)(TabsContext);
   if (!ctx) throw new Error("Tabs compound components must be used within <Tabs>");
   return ctx;
 }
@@ -1097,19 +1184,19 @@ function Tabs({
   className,
   ...props
 }) {
-  const [uncontrolledValue, setUncontrolledValue] = (0, import_react18.useState)(defaultValue);
+  const [uncontrolledValue, setUncontrolledValue] = (0, import_react20.useState)(defaultValue);
   const value = controlledValue ?? uncontrolledValue;
-  const setValue = (0, import_react18.useCallback)(
+  const setValue = (0, import_react20.useCallback)(
     (next) => {
       onValueChange?.(next);
       if (controlledValue === void 0) setUncontrolledValue(next);
     },
     [controlledValue, onValueChange]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TabsContext.Provider, { value: { value, setValue }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className, ...props }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(TabsContext.Provider, { value: { value, setValue }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("div", { className, ...props }) });
 }
 function TabsList({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "div",
     {
       role: "tablist",
@@ -1122,7 +1209,7 @@ function TabsTrigger({ value, className, ...props }) {
   const { value: activeValue, setValue } = useTabsContext();
   const isActive = value === activeValue;
   const panelId = `tabpanel-${value}`;
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "button",
     {
       type: "button",
@@ -1143,7 +1230,7 @@ function TabsTrigger({ value, className, ...props }) {
 function TabsContent({ value, className, ...props }) {
   const { value: activeValue } = useTabsContext();
   if (value !== activeValue) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
     "div",
     {
       role: "tabpanel",
@@ -1155,11 +1242,11 @@ function TabsContent({ value, className, ...props }) {
 }
 
 // src/primitives/scroll-area.tsx
-var import_react19 = require("react");
-var import_jsx_runtime18 = require("react/jsx-runtime");
-var ScrollArea = (0, import_react19.forwardRef)(
+var import_react21 = require("react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+var ScrollArea = (0, import_react21.forwardRef)(
   ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
       "div",
       {
         ref,
@@ -1175,9 +1262,9 @@ var ScrollArea = (0, import_react19.forwardRef)(
 ScrollArea.displayName = "ScrollArea";
 
 // src/primitives/floating-panel.tsx
-var import_react20 = require("react");
-var import_lucide_react4 = require("lucide-react");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_react22 = require("react");
+var import_lucide_react5 = require("lucide-react");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function FloatingPanel({
   title,
   onClose,
@@ -1189,24 +1276,25 @@ function FloatingPanel({
   offsetIndex = 0,
   className
 }) {
-  const [pos, setPos] = (0, import_react20.useState)({ x: 80 + offsetIndex * 30, y: 80 + offsetIndex * 30 });
-  const [size, setSize] = (0, import_react20.useState)({ w: defaultWidth, h: defaultHeight });
-  const [minimized, setMinimized] = (0, import_react20.useState)(false);
-  const dragging = (0, import_react20.useRef)(false);
-  const resizing = (0, import_react20.useRef)(false);
-  const offset = (0, import_react20.useRef)({ x: 0, y: 0 });
-  const onDragStart = (0, import_react20.useCallback)((e) => {
+  const [pos, setPos] = (0, import_react22.useState)({ x: 80 + offsetIndex * 30, y: 80 + offsetIndex * 30 });
+  const [size, setSize] = (0, import_react22.useState)({ w: defaultWidth, h: defaultHeight });
+  const [minimized, setMinimized] = (0, import_react22.useState)(false);
+  const dragging = (0, import_react22.useRef)(false);
+  const resizing = (0, import_react22.useRef)(false);
+  const offset = (0, import_react22.useRef)({ x: 0, y: 0 });
+  const isMobile = useIsMobile();
+  const onDragStart = (0, import_react22.useCallback)((e) => {
     e.preventDefault();
     dragging.current = true;
     offset.current = { x: e.clientX - pos.x, y: e.clientY - pos.y };
   }, [pos]);
-  const onResizeStart = (0, import_react20.useCallback)((e) => {
+  const onResizeStart = (0, import_react22.useCallback)((e) => {
     e.preventDefault();
     e.stopPropagation();
     resizing.current = true;
     offset.current = { x: e.clientX, y: e.clientY };
   }, []);
-  (0, import_react20.useEffect)(() => {
+  (0, import_react22.useEffect)(() => {
     const onMouseMove = (e) => {
       if (dragging.current) setPos({ x: e.clientX - offset.current.x, y: e.clientY - offset.current.y });
       if (resizing.current) {
@@ -1227,7 +1315,43 @@ function FloatingPanel({
       window.removeEventListener("mouseup", onMouseUp);
     };
   }, [minWidth, minHeight]);
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+  if (isMobile) {
+    return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+      "div",
+      {
+        className: cn(
+          "fixed inset-x-0 bottom-0 z-50 rounded-t-xl border-t border-border bg-background-elevated shadow-2xl flex flex-col overflow-hidden",
+          className
+        ),
+        style: { maxHeight: "60dvh" },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center justify-between gap-2 px-3 py-2 border-b border-border shrink-0 bg-surface", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-[11px] font-medium truncate", children: title }),
+            /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-1 shrink-0", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                "button",
+                {
+                  onClick: () => setMinimized(!minimized),
+                  className: "p-0.5 rounded hover:bg-surface-hover text-foreground-muted transition-colors",
+                  children: minimized ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react5.Maximize2, { size: 12 }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react5.Minimize2, { size: 12 })
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                "button",
+                {
+                  onClick: onClose,
+                  className: "p-0.5 rounded hover:bg-danger/20 text-foreground-muted hover:text-danger transition-colors",
+                  children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react5.X, { size: 12 })
+                }
+              )
+            ] })
+          ] }),
+          !minimized && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "flex-1 min-h-0 overflow-y-auto", children })
+        ]
+      }
+    );
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
     "div",
     {
       className: cn(
@@ -1236,42 +1360,42 @@ function FloatingPanel({
       ),
       style: { left: pos.x, top: pos.y, width: minimized ? 280 : size.w, height: minimized ? "auto" : size.h },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
           "div",
           {
             onMouseDown: onDragStart,
             className: "flex items-center justify-between gap-2 px-3 py-2 border-b border-border cursor-move select-none shrink-0 bg-surface",
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-2 min-w-0", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react4.GripHorizontal, { size: 12, className: "text-foreground-subtle shrink-0" }),
-                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-[11px] font-medium truncate", children: title })
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-2 min-w-0", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react5.GripHorizontal, { size: 12, className: "text-foreground-subtle shrink-0" }),
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-[11px] font-medium truncate", children: title })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-1 shrink-0", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex items-center gap-1 shrink-0", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                   "button",
                   {
                     onClick: () => setMinimized(!minimized),
                     className: "p-0.5 rounded hover:bg-surface-hover text-foreground-muted transition-colors",
                     title: minimized ? "Restore" : "Minimize",
-                    children: minimized ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react4.Maximize2, { size: 12 }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react4.Minimize2, { size: 12 })
+                    children: minimized ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react5.Maximize2, { size: 12 }) : /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react5.Minimize2, { size: 12 })
                   }
                 ),
-                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
                   "button",
                   {
                     onClick: onClose,
                     className: "p-0.5 rounded hover:bg-danger/20 text-foreground-muted hover:text-danger transition-colors",
                     title: "Close",
-                    children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react4.X, { size: 12 })
+                    children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_lucide_react5.X, { size: 12 })
                   }
                 )
               ] })
             ]
           }
         ),
-        !minimized && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex-1 min-h-0 overflow-y-auto relative", children: [
+        !minimized && /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("div", { className: "flex-1 min-h-0 overflow-y-auto relative", children: [
           children,
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
             "div",
             {
               onMouseDown: onResizeStart,
@@ -1285,8 +1409,55 @@ function FloatingPanel({
   );
 }
 
+// src/primitives/mobile-drawer.tsx
+var import_react23 = require("react");
+var import_jsx_runtime21 = require("react/jsx-runtime");
+function MobileDrawer({ open, onClose, children, className, width = "w-64" }) {
+  const drawerRef = (0, import_react23.useRef)(null);
+  (0, import_react23.useEffect)(() => {
+    if (!open) return;
+    const handleKeyDown = (e) => {
+      if (e.key === "Escape") onClose();
+    };
+    document.addEventListener("keydown", handleKeyDown);
+    document.body.style.overflow = "hidden";
+    return () => {
+      document.removeEventListener("keydown", handleKeyDown);
+      document.body.style.overflow = "";
+    };
+  }, [open, onClose]);
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_jsx_runtime21.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      "div",
+      {
+        className: cn(
+          "fixed inset-0 z-40 bg-black/50 backdrop-blur-sm transition-opacity duration-200",
+          open ? "opacity-100" : "pointer-events-none opacity-0"
+        ),
+        onClick: onClose,
+        "aria-hidden": "true"
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      "div",
+      {
+        ref: drawerRef,
+        role: "dialog",
+        "aria-modal": "true",
+        className: cn(
+          "fixed inset-y-0 left-0 z-50 flex flex-col bg-surface border-r border-border shadow-2xl transition-transform duration-200 ease-out",
+          width,
+          open ? "translate-x-0" : "-translate-x-full",
+          className
+        ),
+        children
+      }
+    )
+  ] });
+}
+
 // src/composites/status-badge.tsx
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 var statusConfig = {
   online: { colorClass: "bg-success", label: "Online" },
   offline: { colorClass: "bg-danger", label: "Offline" },
@@ -1301,7 +1472,7 @@ function StatusBadge({
   className
 }) {
   const config = statusConfig[status];
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
     "span",
     {
       className: cn(
@@ -1310,21 +1481,21 @@ function StatusBadge({
         className
       ),
       children: [
-        showDot && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+        showDot && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
           "span",
           {
             className: cn("h-1.5 w-1.5 shrink-0 rounded-full", config.colorClass),
             "aria-hidden": "true"
           }
         ),
-        showLabel && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-foreground", children: config.label })
+        showLabel && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-foreground", children: config.label })
       ]
     }
   );
 }
 
 // src/composites/provider-badge.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 var providerConfig = {
   frigate: { colorClass: "bg-provider-frigate", label: "Frigate" },
   scrypted: { colorClass: "bg-provider-scrypted", label: "Scrypted" },
@@ -1338,20 +1509,20 @@ function ProviderBadge({
   className
 }) {
   const config = providerConfig[provider];
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: cn("inline-flex items-center gap-1.5 text-xs", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("span", { className: cn("inline-flex items-center gap-1.5 text-xs", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
       "span",
       {
         className: cn("h-1.5 w-1.5 shrink-0 rounded-sm", config.colorClass),
         "aria-hidden": "true"
       }
     ),
-    showLabel && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-foreground", children: config.label })
+    showLabel && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-foreground", children: config.label })
   ] });
 }
 
 // src/composites/version-badge.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var VARIANT_STYLES = {
   success: "bg-emerald-400 text-emerald-950",
   warning: "bg-amber-400 text-amber-950",
@@ -1360,7 +1531,7 @@ var VARIANT_STYLES = {
   neutral: "bg-foreground-subtle/20 text-foreground"
 };
 function SemanticBadge({ children, variant = "neutral", mono, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: cn(
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: cn(
     "inline-flex items-center rounded-md px-2 py-0.5 text-[11px] font-bold leading-tight",
     mono && "font-mono",
     VARIANT_STYLES[variant],
@@ -1369,11 +1540,11 @@ function SemanticBadge({ children, variant = "neutral", mono, className }) {
 }
 function VersionBadge({ version, preRelease, className }) {
   const isPreRelease = preRelease ?? /-(alpha|beta|rc|dev|canary|next)/i.test(version);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SemanticBadge, { variant: isPreRelease ? "warning" : "success", mono: true, className, children: version });
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(SemanticBadge, { variant: isPreRelease ? "warning" : "success", mono: true, className, children: version });
 }
 
 // src/composites/form-field.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function FormField({
   label,
   description,
@@ -1384,7 +1555,7 @@ function FormField({
   className
 }) {
   const isHorizontal = orientation === "horizontal";
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
     "div",
     {
       className: cn(
@@ -1393,34 +1564,34 @@ function FormField({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: cn(isHorizontal ? "flex-1" : ""), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Label, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: cn(isHorizontal ? "flex-1" : ""), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(Label, { children: [
             label,
-            required && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-danger ml-0.5", children: "*" })
+            required && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "text-danger ml-0.5", children: "*" })
           ] }),
-          description && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-foreground-subtle text-xs mt-0.5", children: description })
+          description && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "text-foreground-subtle text-xs mt-0.5", children: description })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: cn(isHorizontal ? "shrink-0" : ""), children }),
-        error && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-danger text-xs", children: error })
+        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: cn(isHorizontal ? "shrink-0" : ""), children }),
+        error && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "text-danger text-xs", children: error })
       ]
     }
   );
 }
 
 // src/composites/page-header.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function PageHeader({ title, subtitle, actions, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: cn("flex items-center justify-between mb-3", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("h1", { className: "text-sm font-semibold text-foreground", children: title }),
-      subtitle && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-foreground-subtle text-xs", children: subtitle })
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: cn("flex flex-col gap-2 mb-3 sm:flex-row sm:items-center sm:justify-between", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("h1", { className: "text-sm font-semibold text-foreground", children: title }),
+      subtitle && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("p", { className: "text-foreground-subtle text-xs", children: subtitle })
     ] }),
-    actions && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex items-center gap-2", children: actions })
+    actions && /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "flex items-center gap-2 flex-wrap", children: actions })
   ] });
 }
 
 // src/composites/empty-state.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function EmptyState({
   icon: Icon,
   title,
@@ -1428,18 +1599,18 @@ function EmptyState({
   action,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: cn("flex flex-col items-center justify-center gap-3 py-12", className), children: [
-    Icon && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon, { className: "h-12 w-12 text-foreground-subtle", "aria-hidden": "true" }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex flex-col items-center gap-1 text-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "text-foreground-muted text-sm font-medium", children: title }),
-      description && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "text-foreground-subtle text-xs max-w-xs", children: description })
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: cn("flex flex-col items-center justify-center gap-3 py-12", className), children: [
+    Icon && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon, { className: "h-12 w-12 text-foreground-subtle", "aria-hidden": "true" }),
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex flex-col items-center gap-1 text-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "text-foreground-muted text-sm font-medium", children: title }),
+      description && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("p", { className: "text-foreground-subtle text-xs max-w-xs", children: description })
     ] }),
-    action && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "mt-1", children: action })
+    action && /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("div", { className: "mt-1", children: action })
   ] });
 }
 
 // src/composites/confirm-dialog.tsx
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function ConfirmDialog({
   title,
   message,
@@ -1451,14 +1622,14 @@ function ConfirmDialog({
   open,
   onOpenChange
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Dialog, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(DialogContent, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(DialogHeader, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DialogTitle, { children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DialogDescription, { children: message })
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Dialog, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(DialogContent, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(DialogHeader, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(DialogTitle, { children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(DialogDescription, { children: message })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(DialogFooter, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Button, { variant: "ghost", onClick: onCancel, children: cancelLabel }),
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(DialogFooter, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Button, { variant: "ghost", onClick: onCancel, children: cancelLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
         Button,
         {
           variant: variant === "danger" ? "danger" : "primary",
@@ -1471,13 +1642,13 @@ function ConfirmDialog({
 }
 
 // src/composites/stat-card.tsx
-var import_lucide_react5 = require("lucide-react");
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_lucide_react6 = require("lucide-react");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function StatCard({ value, label, trend, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Card, { className: cn("flex flex-col gap-1", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-baseline gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "text-2xl font-semibold text-foreground", children: value }),
-      trend && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(Card, { className: cn("flex flex-col gap-1", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "flex items-baseline gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-2xl font-semibold text-foreground", children: value }),
+      trend && /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(
         "span",
         {
           className: cn(
@@ -1485,27 +1656,27 @@ function StatCard({ value, label, trend, className }) {
             trend.direction === "up" ? "text-success" : "text-danger"
           ),
           children: [
-            trend.direction === "up" ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react5.TrendingUp, { className: "h-3 w-3" }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react5.TrendingDown, { className: "h-3 w-3" }),
+            trend.direction === "up" ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react6.TrendingUp, { className: "h-3 w-3" }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react6.TrendingDown, { className: "h-3 w-3" }),
             trend.value,
             "%"
           ]
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "text-xs text-foreground-muted", children: label })
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "text-xs text-foreground-muted", children: label })
   ] });
 }
 
 // src/composites/key-value-list.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function KeyValueList({ items, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("dl", { className: cn("flex flex-col", className), children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("dl", { className: cn("flex flex-col", className), children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
     "div",
     {
       className: "flex items-center h-7",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("dt", { className: "text-foreground-subtle text-xs w-1/3 shrink-0", children: item.key }),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("dd", { className: "text-foreground text-xs", children: item.value })
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("dt", { className: "text-foreground-subtle text-xs w-1/3 shrink-0", children: item.key }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("dd", { className: "text-foreground text-xs", children: item.value })
       ]
     },
     item.key
@@ -1513,23 +1684,23 @@ function KeyValueList({ items, className }) {
 }
 
 // src/composites/code-block.tsx
-var import_react21 = require("react");
-var import_lucide_react6 = require("lucide-react");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_react24 = require("react");
+var import_lucide_react7 = require("lucide-react");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function CodeBlock({ children, maxHeight = 300, className }) {
-  const [copied, setCopied] = (0, import_react21.useState)(false);
-  const handleCopy = (0, import_react21.useCallback)(() => {
+  const [copied, setCopied] = (0, import_react24.useState)(false);
+  const handleCopy = (0, import_react24.useCallback)(() => {
     navigator.clipboard.writeText(children).then(() => {
       setCopied(true);
       setTimeout(() => setCopied(false), 2e3);
     });
   }, [children]);
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: cn("relative group", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ScrollArea, { style: { maxHeight }, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("pre", { className: "font-mono text-xs bg-surface p-3 rounded-md border border-border-subtle", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("code", { children }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: cn("relative group", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(ScrollArea, { style: { maxHeight }, children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("pre", { className: "font-mono text-xs bg-surface p-3 rounded-md border border-border-subtle", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("code", { children }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
       IconButton,
       {
-        icon: copied ? import_lucide_react6.Check : import_lucide_react6.Copy,
+        icon: copied ? import_lucide_react7.Check : import_lucide_react7.Copy,
         "aria-label": "Copy code",
         variant: "ghost",
         size: "sm",
@@ -1540,28 +1711,95 @@ function CodeBlock({ children, maxHeight = 300, className }) {
 }
 
 // src/composites/filter-bar.tsx
-var import_lucide_react7 = require("lucide-react");
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_react25 = require("react");
+var import_lucide_react8 = require("lucide-react");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 function FilterBar({ filters, values, onChange, className }) {
+  const isMobile = useIsMobile();
+  const [sheetOpen, setSheetOpen] = (0, import_react25.useState)(false);
   const handleChange = (key, value) => {
     onChange({ ...values, [key]: value });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: cn("flex items-center gap-2 flex-wrap", className), children: filters.map((filter) => {
+  const activeCount = Object.values(values).filter((v) => v !== void 0 && v !== "").length;
+  if (isMobile) {
+    const searchFilter = filters.find((f) => f.type === "search");
+    const hasNonSearchFilters = filters.some((f) => f.type !== "search");
+    return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: cn("flex items-center gap-2", className), children: [
+      searchFilter && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+        Input,
+        {
+          placeholder: searchFilter.placeholder ?? "Search...",
+          value: values[searchFilter.key] ?? "",
+          onChange: (e) => handleChange(searchFilter.key, e.target.value),
+          leftSlot: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react8.Search, { className: "h-3 w-3 text-foreground-subtle" }),
+          className: "flex-1"
+        }
+      ),
+      hasNonSearchFilters && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_jsx_runtime32.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+          "button",
+          {
+            onClick: () => setSheetOpen(true),
+            className: "flex items-center gap-1.5 rounded-md border border-border px-2.5 py-1.5 text-xs text-foreground-muted hover:bg-surface-hover transition-colors shrink-0",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react8.SlidersHorizontal, { className: "h-3.5 w-3.5" }),
+              "Filters",
+              activeCount > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Badge, { variant: "info", className: "ml-1 text-[10px] px-1 py-0", children: activeCount })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(BottomSheet, { open: sheetOpen, onClose: () => setSheetOpen(false), title: "Filters", children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex flex-col gap-3", children: filters.filter((f) => f.type !== "search").map((filter) => {
+          switch (filter.type) {
+            case "select":
+              return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { children: [
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("label", { className: "text-xs text-foreground-muted mb-1 block", children: filter.label }),
+                /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                  Select,
+                  {
+                    options: filter.options,
+                    value: values[filter.key] ?? "",
+                    onChange: (e) => handleChange(filter.key, e.target.value),
+                    className: "w-full"
+                  }
+                )
+              ] }, filter.key);
+            case "badge-toggle":
+              return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex items-center gap-1 flex-wrap", children: filter.options.map((option) => {
+                const currentValue = values[filter.key];
+                const isActive = currentValue === option.value;
+                return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => handleChange(filter.key, isActive ? void 0 : option.value),
+                    children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Badge, { variant: isActive ? "info" : "default", className: "cursor-pointer", children: option.label })
+                  },
+                  option.value
+                );
+              }) }, filter.key);
+            default:
+              return null;
+          }
+        }) }) })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: cn("flex items-center gap-2 flex-wrap", className), children: filters.map((filter) => {
     switch (filter.type) {
       case "search":
-        return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
           Input,
           {
             placeholder: filter.placeholder ?? "Search...",
             value: values[filter.key] ?? "",
             onChange: (e) => handleChange(filter.key, e.target.value),
-            leftSlot: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react7.Search, { className: "h-3 w-3 text-foreground-subtle" }),
+            leftSlot: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react8.Search, { className: "h-3 w-3 text-foreground-subtle" }),
             className: "w-48"
           },
           filter.key
         );
       case "select":
-        return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
           Select,
           {
             options: filter.options,
@@ -1572,25 +1810,15 @@ function FilterBar({ filters, values, onChange, className }) {
           filter.key
         );
       case "badge-toggle":
-        return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "flex items-center gap-1", children: filter.options.map((option) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex items-center gap-1", children: filter.options.map((option) => {
           const currentValue = values[filter.key];
           const isActive = currentValue === option.value;
-          return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
             "button",
             {
               type: "button",
-              onClick: () => handleChange(
-                filter.key,
-                isActive ? void 0 : option.value
-              ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
-                Badge,
-                {
-                  variant: isActive ? "info" : "default",
-                  className: "cursor-pointer",
-                  children: option.label
-                }
-              )
+              onClick: () => handleChange(filter.key, isActive ? void 0 : option.value),
+              children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Badge, { variant: isActive ? "info" : "default", className: "cursor-pointer", children: option.label })
             },
             option.value
           );
@@ -1602,7 +1830,7 @@ function FilterBar({ filters, values, onChange, className }) {
 }
 
 // src/composites/app-shell/sidebar-item.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function SidebarItem({
   label,
   icon: Icon,
@@ -1611,7 +1839,7 @@ function SidebarItem({
   active = false,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
     "a",
     {
       href,
@@ -1621,33 +1849,33 @@ function SidebarItem({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Icon, { className: "h-3.5 w-3.5 shrink-0" }),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "truncate flex-1", children: label }),
-        badge !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Badge, { className: "ml-auto text-[10px] px-1.5 py-0", children: badge })
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Icon, { className: "h-3.5 w-3.5 shrink-0" }),
+        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "truncate flex-1", children: label }),
+        badge !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Badge, { className: "ml-auto text-[10px] px-1.5 py-0", children: badge })
       ]
     }
   );
 }
 
 // src/composites/app-shell/sidebar.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
-function Sidebar({ logo, sections, footer, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+var import_jsx_runtime34 = require("react/jsx-runtime");
+function Sidebar({ logo, sections, footer, onNavigate, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
     "nav",
     {
       className: cn(
-        "w-44 bg-surface border-r border-border h-full flex flex-col",
+        "bg-surface border-r border-border h-full flex flex-col",
         className
       ),
       children: [
-        logo && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "px-3 py-2 shrink-0", children: logo }),
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex-1 overflow-auto px-1 py-1", children: sections.map((section, sectionIndex) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: cn(sectionIndex > 0 ? "mt-3" : ""), children: [
-          section.label && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-[10px] text-foreground-disabled uppercase tracking-wider px-2 mb-1 block", children: section.label }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex flex-col gap-0.5", children: section.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SidebarItem, { ...item }, item.href)) })
+        logo && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "px-3 py-2 shrink-0", children: logo }),
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex-1 overflow-auto px-1 py-1", children: sections.map((section, sectionIndex) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: cn(sectionIndex > 0 ? "mt-3" : ""), children: [
+          section.label && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "text-[10px] text-foreground-disabled uppercase tracking-wider px-2 mb-1 block", children: section.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex flex-col gap-0.5", onClick: onNavigate, children: section.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SidebarItem, { ...item }, item.href)) })
         ] }, sectionIndex)) }),
-        footer && footer.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "shrink-0 px-1 pb-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Separator, { className: "mb-1" }),
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex flex-col gap-0.5", children: footer.map((item) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SidebarItem, { ...item }, item.href)) })
+        footer && footer.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "shrink-0 px-1 pb-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Separator, { className: "mb-1" }),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { className: "flex flex-col gap-0.5", onClick: onNavigate, children: footer.map((item) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SidebarItem, { ...item }, item.href)) })
         ] })
       ]
     }
@@ -1655,54 +1883,78 @@ function Sidebar({ logo, sections, footer, className }) {
 }
 
 // src/composites/app-shell/app-shell.tsx
-var import_lucide_react8 = require("lucide-react");
-var import_jsx_runtime33 = require("react/jsx-runtime");
-function AppShell({ sidebar, header, children, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: cn("flex h-screen", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Sidebar, { ...sidebar }),
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex flex-1 flex-col min-w-0", children: [
-      header && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("header", { className: "flex items-center h-10 border-b border-border px-4 shrink-0", children: [
-        header.breadcrumbs && header.breadcrumbs.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("nav", { className: "flex items-center gap-1 text-xs flex-1 min-w-0", children: header.breadcrumbs.map((crumb, index) => {
+var import_react26 = require("react");
+var import_lucide_react9 = require("lucide-react");
+var import_jsx_runtime35 = require("react/jsx-runtime");
+function AppShell({ sidebar, header, mobileLogo, mobileActions, children, className }) {
+  const isMobile = useIsMobile();
+  const [drawerOpen, setDrawerOpen] = (0, import_react26.useState)(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: cn("flex h-screen", className), children: [
+    !isMobile && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Sidebar, { ...sidebar, className: cn("w-44", sidebar.className) }),
+    isMobile && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(MobileDrawer, { open: drawerOpen, onClose: () => setDrawerOpen(false), width: "w-64", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      Sidebar,
+      {
+        ...sidebar,
+        onNavigate: () => setDrawerOpen(false),
+        className: "w-full border-r-0"
+      }
+    ) }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex flex-1 flex-col min-w-0", children: [
+      isMobile && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("header", { className: "flex items-center h-12 border-b border-border px-3 shrink-0 bg-surface/80 backdrop-blur-sm", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          "button",
+          {
+            onClick: () => setDrawerOpen(true),
+            className: "p-1.5 -ml-1.5 rounded-md hover:bg-surface-hover text-foreground-muted transition-colors",
+            "aria-label": "Open menu",
+            children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react9.Menu, { className: "h-5 w-5" })
+          }
+        ),
+        mobileLogo && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex-1 flex justify-center", children: mobileLogo }),
+        mobileActions && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "shrink-0", children: mobileActions })
+      ] }),
+      !isMobile && header && /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("header", { className: "flex items-center h-10 border-b border-border px-4 shrink-0", children: [
+        header.breadcrumbs && header.breadcrumbs.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("nav", { className: "flex items-center gap-1 text-xs flex-1 min-w-0", children: header.breadcrumbs.map((crumb, index) => {
           const isLast = index === header.breadcrumbs.length - 1;
-          return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { className: "flex items-center gap-1", children: [
-            index > 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react8.ChevronRight, { className: "h-3 w-3 text-foreground-subtle shrink-0" }),
-            crumb.href && !isLast ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { className: "flex items-center gap-1", children: [
+            index > 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react9.ChevronRight, { className: "h-3 w-3 text-foreground-subtle shrink-0" }),
+            crumb.href && !isLast ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
               "a",
               {
                 href: crumb.href,
                 className: "text-foreground-subtle hover:text-foreground transition-colors truncate",
                 children: crumb.label
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-foreground truncate", children: crumb.label })
+            ) : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "text-foreground truncate", children: crumb.label })
           ] }, index);
         }) }),
-        header.actions && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex items-center gap-2 ml-auto shrink-0", children: header.actions })
+        header.actions && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "flex items-center gap-2 ml-auto shrink-0", children: header.actions })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("main", { className: "flex-1 overflow-auto p-4", children })
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("main", { className: "flex-1 overflow-auto p-4", children })
     ] })
   ] });
 }
 
 // src/composites/data-table/data-table.tsx
-var import_react22 = require("react");
+var import_react27 = require("react");
 var import_react_table = require("@tanstack/react-table");
 
 // src/composites/data-table/data-table-header.tsx
-var import_lucide_react9 = require("lucide-react");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_lucide_react10 = require("lucide-react");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function DataTableHeader({
   headerGroups,
   onSortingChange,
   stickyHeader,
   flexRender: render
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     "thead",
     {
       className: cn(
         stickyHeader && "sticky top-0 z-10 bg-background"
       ),
-      children: headerGroups.map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("tr", { className: "h-6", children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+      children: headerGroups.map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("tr", { className: "h-6", children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
         HeaderCell,
         {
           header,
@@ -1716,8 +1968,8 @@ function DataTableHeader({
 }
 function HeaderCell({ header, sortable, flexRender: render }) {
   const sorted = header.column.getIsSorted();
-  const SortIcon = sorted === "asc" ? import_lucide_react9.ArrowUp : sorted === "desc" ? import_lucide_react9.ArrowDown : import_lucide_react9.ArrowUpDown;
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  const SortIcon = sorted === "asc" ? import_lucide_react10.ArrowUp : sorted === "desc" ? import_lucide_react10.ArrowDown : import_lucide_react10.ArrowUpDown;
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
     "th",
     {
       className: cn(
@@ -1725,17 +1977,17 @@ function HeaderCell({ header, sortable, flexRender: render }) {
         sortable && "cursor-pointer select-none"
       ),
       onClick: sortable ? header.column.getToggleSortingHandler() : void 0,
-      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: "inline-flex items-center gap-1", children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: "inline-flex items-center gap-1", children: [
         header.isPlaceholder ? null : render(header.column.columnDef.header, header.getContext()),
-        sortable && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SortIcon, { className: "h-3 w-3" })
+        sortable && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(SortIcon, { className: "h-3 w-3" })
       ] })
     }
   );
 }
 
 // src/composites/data-table/data-table-row.tsx
-var import_lucide_react10 = require("lucide-react");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_lucide_react11 = require("lucide-react");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 function DataTableRow({
   row,
   onRowClick,
@@ -1743,7 +1995,7 @@ function DataTableRow({
   flexRender: render
 }) {
   const actions = rowActions ? rowActions(row.original) : [];
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
     "tr",
     {
       className: cn(
@@ -1753,17 +2005,17 @@ function DataTableRow({
       ),
       onClick: onRowClick ? () => onRowClick(row.original) : void 0,
       children: [
-        row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DataTableCell, { cell, flexRender: render }, cell.id)),
-        actions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("td", { className: "px-2 py-1.5 w-8", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Dropdown, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DataTableCell, { cell, flexRender: render }, cell.id)),
+        actions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("td", { className: "px-2 py-1.5 w-8", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(Dropdown, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
             DropdownTrigger,
             {
               className: "p-0.5 rounded hover:bg-surface-hover",
               onClick: (e) => e.stopPropagation(),
-              children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react10.MoreHorizontal, { className: "h-3.5 w-3.5 text-foreground-muted" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_lucide_react11.MoreHorizontal, { className: "h-3.5 w-3.5 text-foreground-muted" })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DropdownContent, { className: "right-0 left-auto", children: actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(DropdownContent, { className: "right-0 left-auto", children: actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
             DropdownItem,
             {
               icon: action.icon,
@@ -1782,12 +2034,12 @@ function DataTableRow({
   );
 }
 function DataTableCell({ cell, flexRender: render }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("td", { className: "px-2 py-1.5 text-xs text-foreground", children: render(cell.column.columnDef.cell, cell.getContext()) });
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("td", { className: "px-2 py-1.5 text-xs text-foreground", children: render(cell.column.columnDef.cell, cell.getContext()) });
 }
 
 // src/composites/data-table/data-table-pagination.tsx
-var import_lucide_react11 = require("lucide-react");
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_lucide_react12 = require("lucide-react");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var PAGE_SIZE_OPTIONS = [
   { value: "10", label: "10" },
   { value: "25", label: "25" },
@@ -1802,10 +2054,10 @@ function DataTablePagination({
 }) {
   const totalPages = Math.max(1, Math.ceil(total / pageSize));
   const currentPage = page + 1;
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-center justify-between px-2 py-2 text-xs text-foreground-muted", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { children: "Rows per page" }),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "w-16", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-center justify-between px-2 py-2 text-xs text-foreground-muted", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { children: "Rows per page" }),
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "w-16", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
         Select,
         {
           options: PAGE_SIZE_OPTIONS,
@@ -1817,17 +2069,17 @@ function DataTablePagination({
         }
       ) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("span", { children: [
         "Page ",
         currentPage,
         " of ",
         totalPages
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
         IconButton,
         {
-          icon: import_lucide_react11.ChevronLeft,
+          icon: import_lucide_react12.ChevronLeft,
           "aria-label": "Previous page",
           variant: "ghost",
           size: "sm",
@@ -1835,10 +2087,10 @@ function DataTablePagination({
           onClick: () => onPaginationChange?.({ pageIndex: page - 1, pageSize })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
         IconButton,
         {
-          icon: import_lucide_react11.ChevronRight,
+          icon: import_lucide_react12.ChevronRight,
           "aria-label": "Next page",
           variant: "ghost",
           size: "sm",
@@ -1851,7 +2103,7 @@ function DataTablePagination({
 }
 
 // src/composites/data-table/data-table.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 function DataTable({
   data,
   columns: userColumns,
@@ -1868,13 +2120,14 @@ function DataTable({
   selectable = false,
   compact = true,
   stickyHeader = false,
-  className
+  className,
+  mobileMode = "scroll"
 }) {
-  const columns = (0, import_react22.useMemo)(() => {
+  const columns = (0, import_react27.useMemo)(() => {
     if (!selectable) return userColumns;
     const selectColumn = {
       id: "__select",
-      header: ({ table: table2 }) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      header: ({ table: table2 }) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         Checkbox,
         {
           checked: table2.getIsAllPageRowsSelected(),
@@ -1882,7 +2135,7 @@ function DataTable({
           "aria-label": "Select all"
         }
       ),
-      cell: ({ row }) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      cell: ({ row }) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         Checkbox,
         {
           checked: row.getIsSelected(),
@@ -1920,9 +2173,71 @@ function DataTable({
     pageCount: pagination ? Math.ceil(pagination.total / pagination.pageSize) : void 0
   });
   const hasActions = !!rowActions;
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: cn("overflow-auto", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("table", { className: "w-full border-collapse", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+  const isMobile = useIsMobile();
+  const showCards = isMobile && mobileMode === "cards";
+  if (showCards) {
+    const rows = table.getRowModel().rows;
+    if (loading) {
+      return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: cn("space-y-2", className), children: Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "rounded-lg border border-border bg-surface p-3 space-y-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Skeleton, { className: "h-3 w-3/4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Skeleton, { className: "h-3 w-1/2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Skeleton, { className: "h-3 w-2/3" })
+      ] }, i)) });
+    }
+    if (rows.length === 0) {
+      return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: cn("text-center py-8 text-xs text-foreground-muted", className), children: emptyState ?? "No data" });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: cn("space-y-2", className), children: [
+      rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+        "div",
+        {
+          className: cn(
+            "rounded-lg border border-border bg-surface p-3 space-y-1.5",
+            onRowClick && "cursor-pointer hover:bg-surface-hover transition-colors"
+          ),
+          onClick: onRowClick ? () => onRowClick(row.original) : void 0,
+          children: [
+            row.getVisibleCells().filter((cell) => cell.column.id !== "__select").map((cell) => {
+              const header = cell.column.columnDef.header;
+              const label = typeof header === "string" ? header : cell.column.id;
+              return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: "flex items-baseline justify-between gap-2 text-xs", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "text-foreground-muted shrink-0", children: label }),
+                /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "text-foreground text-right truncate", children: (0, import_react_table.flexRender)(cell.column.columnDef.cell, cell.getContext()) })
+              ] }, cell.id);
+            }),
+            rowActions && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "flex items-center gap-1 pt-1 border-t border-border mt-1.5", children: rowActions(row.original).map((action, i) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+              "button",
+              {
+                onClick: (e) => {
+                  e.stopPropagation();
+                  action.onClick();
+                },
+                className: cn(
+                  "text-[11px] px-2 py-1 rounded-md transition-colors",
+                  action.variant === "danger" ? "text-danger hover:bg-danger/10" : "text-foreground-muted hover:bg-surface-hover"
+                ),
+                children: action.label
+              },
+              i
+            )) })
+          ]
+        },
+        row.id
+      )),
+      pagination && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+        DataTablePagination,
+        {
+          page: pagination.page,
+          pageSize: pagination.pageSize,
+          total: pagination.total,
+          onPaginationChange
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: cn("overflow-x-auto", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("table", { className: "w-full border-collapse", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         DataTableHeader,
         {
           headerGroups: table.getHeaderGroups(),
@@ -1931,14 +2246,14 @@ function DataTable({
           flexRender: import_react_table.flexRender
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("tbody", { children: loading ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(LoadingRows, { colSpan: columns.length + (hasActions ? 1 : 0), compact }) : table.getRowModel().rows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("tbody", { children: loading ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(LoadingRows, { colSpan: columns.length + (hasActions ? 1 : 0), compact }) : table.getRowModel().rows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         "td",
         {
           colSpan: columns.length + (hasActions ? 1 : 0),
           className: "text-center py-8 text-xs text-foreground-muted",
           children: emptyState ?? "No data"
         }
-      ) }) : table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+      ) }) : table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
         DataTableRow,
         {
           row,
@@ -1949,7 +2264,7 @@ function DataTable({
         row.id
       )) })
     ] }),
-    pagination && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    pagination && /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
       DataTablePagination,
       {
         page: pagination.page,
@@ -1961,11 +2276,11 @@ function DataTable({
   ] });
 }
 function LoadingRows({ colSpan, compact }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_jsx_runtime37.Fragment, { children: Array.from({ length: 5 }).map((_, rowIdx) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("tr", { className: compact ? "h-7" : "h-9", children: Array.from({ length: colSpan }).map((_2, colIdx) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("td", { className: "px-2 py-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Skeleton, { className: "h-3 w-full" }) }, colIdx)) }, rowIdx)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(import_jsx_runtime39.Fragment, { children: Array.from({ length: 5 }).map((_, rowIdx) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("tr", { className: compact ? "h-7" : "h-9", children: Array.from({ length: colSpan }).map((_2, colIdx) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("td", { className: "px-2 py-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Skeleton, { className: "h-3 w-full" }) }, colIdx)) }, rowIdx)) });
 }
 
 // src/composites/device-card.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var STATUS_COLORS = {
   online: "bg-success",
   offline: "bg-danger",
@@ -1984,7 +2299,7 @@ function DeviceCard({
   className
 }) {
   const isOffline = status === "offline";
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
     "div",
     {
       onClick,
@@ -1996,18 +2311,18 @@ function DeviceCard({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-center justify-between mb-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "text-sm font-medium truncate", children: title }),
-          status && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: cn("h-2 w-2 rounded-full shrink-0", STATUS_COLORS[status]) })
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-center justify-between mb-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "text-sm font-medium truncate", children: title }),
+          status && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: cn("h-2 w-2 rounded-full shrink-0", STATUS_COLORS[status]) })
         ] }),
-        subtitle && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "text-[11px] text-foreground-muted", children: subtitle }),
-        badges && badges.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "flex flex-wrap gap-1 mt-2", children: badges.map((badge, i) => {
+        subtitle && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "text-[11px] text-foreground-muted", children: subtitle }),
+        badges && badges.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "flex flex-wrap gap-1 mt-2", children: badges.map((badge, i) => {
           const cls = cn(
             "rounded px-1.5 py-0.5 text-[10px] flex items-center gap-0.5",
             selected ? "bg-primary/20" : "bg-surface-hover",
             badge.onClick && "hover:opacity-80 transition-opacity cursor-pointer"
           );
-          return badge.onClick ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
+          return badge.onClick ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
             "button",
             {
               onClick: (e) => {
@@ -2021,12 +2336,12 @@ function DeviceCard({
               ]
             },
             i
-          ) : /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("span", { className: cls, children: [
+          ) : /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("span", { className: cls, children: [
             badge.icon,
             badge.label
           ] }, i);
         }) }),
-        !isOffline && actions && actions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "flex items-center gap-0.5 mt-2 -mb-1", children: actions.map((action, i) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+        !isOffline && actions && actions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "flex items-center gap-0.5 mt-2 -mb-1", children: actions.map((action, i) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
           "button",
           {
             onClick: (e) => {
@@ -2040,21 +2355,21 @@ function DeviceCard({
           },
           i
         )) }),
-        isOffline && offlineAction && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "mt-2", onClick: (e) => e.stopPropagation(), children: offlineAction })
+        isOffline && offlineAction && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "mt-2", onClick: (e) => e.stopPropagation(), children: offlineAction })
       ]
     }
   );
 }
 
 // src/composites/device-grid.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 function DeviceGrid({
   children,
   minCardWidth = 220,
   gap = 3,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
     "div",
     {
       className: cn(
@@ -2072,9 +2387,9 @@ function DeviceGrid({
 }
 
 // src/composites/pipeline-step.tsx
-var import_react23 = require("react");
-var import_lucide_react12 = require("lucide-react");
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_react28 = require("react");
+var import_lucide_react13 = require("lucide-react");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 var ADDON_COLORS = {
   "object-detection": "border-l-blue-500",
   "motion-detection": "border-l-amber-500",
@@ -2150,7 +2465,7 @@ function PipelineStep({
   onDelete,
   readOnly = false
 }) {
-  const [expanded, setExpanded] = (0, import_react23.useState)(false);
+  const [expanded, setExpanded] = (0, import_react28.useState)(false);
   const color = borderColor(step.addonId, step.slot);
   const backends = backendsForRuntime(step.runtime, capabilities, schema);
   const rtOptions = runtimeOptions(capabilities);
@@ -2173,7 +2488,7 @@ function PipelineStep({
     if (e.target.closest(".step-config")) return;
     setExpanded((v) => !v);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "space-y-2", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "space-y-2", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
     "div",
     {
       className: cn(
@@ -2182,18 +2497,18 @@ function PipelineStep({
         !step.enabled && "opacity-[0.45]"
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-center gap-2.5 px-3 py-2.5 cursor-pointer select-none", onClick: handleClick, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "text-foreground-subtle", children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react12.ChevronDown, { className: "h-4 w-4" }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react12.ChevronRight, { className: "h-4 w-4" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex-1 min-w-0", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "text-[10px] uppercase tracking-wider font-medium text-foreground-subtle/60 block leading-none", children: step.slot }),
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "text-sm font-semibold text-foreground truncate block leading-tight", children: step.addonName }),
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-center gap-1 mt-0.5 flex-wrap", children: [
-              step.inputClasses.map((c) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "text-[9px] uppercase font-semibold tracking-wide px-1.5 py-0.5 rounded bg-blue-500/12 text-blue-400", children: c }, c)),
-              step.inputClasses.length > 0 && step.outputClasses.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "text-foreground-subtle/40 text-[10px]", children: "\u2192" }),
-              step.outputClasses.map((c) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "text-[9px] uppercase font-semibold tracking-wide px-1.5 py-0.5 rounded bg-green-500/12 text-green-400", children: c }, c))
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-center gap-2.5 px-3 py-2.5 cursor-pointer select-none", onClick: handleClick, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "text-foreground-subtle", children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react13.ChevronDown, { className: "h-4 w-4" }) : /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react13.ChevronRight, { className: "h-4 w-4" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "text-[10px] uppercase tracking-wider font-medium text-foreground-subtle/60 block leading-none", children: step.slot }),
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "text-sm font-semibold text-foreground truncate block leading-tight", children: step.addonName }),
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-center gap-1 mt-0.5 flex-wrap", children: [
+              step.inputClasses.map((c) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "text-[9px] uppercase font-semibold tracking-wide px-1.5 py-0.5 rounded bg-blue-500/12 text-blue-400", children: c }, c)),
+              step.inputClasses.length > 0 && step.outputClasses.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "text-foreground-subtle/40 text-[10px]", children: "\u2192" }),
+              step.outputClasses.map((c) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "text-[9px] uppercase font-semibold tracking-wide px-1.5 py-0.5 rounded bg-green-500/12 text-green-400", children: c }, c))
             ] })
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
             "button",
             {
               onClick: (e) => {
@@ -2204,16 +2519,16 @@ function PipelineStep({
                 "relative inline-flex h-6 w-11 shrink-0 items-center rounded-full transition-colors",
                 step.enabled ? "bg-success" : "bg-foreground-subtle/30"
               ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: cn(
+              children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: cn(
                 "inline-block h-4 w-4 rounded-full bg-white shadow transition-transform",
                 step.enabled ? "translate-x-6" : "translate-x-1"
               ) })
             }
           )
         ] }),
-        expanded && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "step-config border-t border-border bg-background px-4 py-4 space-y-3", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "grid grid-cols-2 gap-3", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+        expanded && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "step-config border-t border-border bg-background px-4 py-4 space-y-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "grid grid-cols-2 gap-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
               ConfigSelect,
               {
                 label: "Agent",
@@ -2223,7 +2538,7 @@ function PipelineStep({
                 onChange: (v) => onChange({ ...step, agentId: v })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
               ConfigSelect,
               {
                 label: "Runtime",
@@ -2233,7 +2548,7 @@ function PipelineStep({
                 onChange: (v) => onChange({ ...step, runtime: v })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
               ConfigSelect,
               {
                 label: "Backend",
@@ -2243,7 +2558,7 @@ function PipelineStep({
                 onChange: (v) => onChange({ ...step, backend: v })
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
               ConfigSelect,
               {
                 label: "Model",
@@ -2254,15 +2569,15 @@ function PipelineStep({
               }
             )
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-center justify-between mb-1", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "text-[10px] font-medium text-foreground-subtle uppercase tracking-wide", children: "Confidence" }),
-              /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("span", { className: "text-xs font-medium text-foreground tabular-nums", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-center justify-between mb-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "text-[10px] font-medium text-foreground-subtle uppercase tracking-wide", children: "Confidence" }),
+              /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("span", { className: "text-xs font-medium text-foreground tabular-nums", children: [
                 (step.confidence * 100).toFixed(0),
                 "%"
               ] })
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
               "input",
               {
                 type: "range",
@@ -2282,9 +2597,9 @@ function PipelineStep({
   ) });
 }
 function ConfigSelect({ label, value, options, disabled, onChange }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("label", { className: "block text-[10px] font-medium text-foreground-subtle uppercase tracking-wide mb-1.5", children: label }),
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("label", { className: "block text-[10px] font-medium text-foreground-subtle uppercase tracking-wide mb-1.5", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
       "select",
       {
         value,
@@ -2292,8 +2607,8 @@ function ConfigSelect({ label, value, options, disabled, onChange }) {
         disabled,
         className: "w-full rounded-lg border border-border bg-surface px-3 py-2 text-xs text-foreground focus:outline-none focus:border-primary/50",
         children: [
-          options.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("option", { value, children: value || "default" }),
-          options.map((o) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("option", { value: o.value, disabled: o.disabled, children: o.label }, o.value))
+          options.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("option", { value, children: value || "default" }),
+          options.map((o) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("option", { value: o.value, disabled: o.disabled, children: o.label }, o.value))
         ]
       }
     )
@@ -2301,30 +2616,30 @@ function ConfigSelect({ label, value, options, disabled, onChange }) {
 }
 
 // src/composites/pipeline-runtime-selector.tsx
-var import_lucide_react13 = require("lucide-react");
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_lucide_react14 = require("lucide-react");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 function PipelineRuntimeSelector({ options, value, onChange }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "flex flex-wrap gap-2", children: options.map((opt) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "flex flex-wrap gap-2", children: options.map((opt) => {
     const active = opt.id === value;
-    return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+    return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
       "button",
       {
         onClick: () => opt.available && onChange(opt.id),
         disabled: !opt.available,
         className: `flex items-center gap-2 rounded-lg border px-3 py-2 text-xs font-medium transition-all ${active ? "border-primary/40 bg-primary/10 text-primary" : opt.available ? "border-border bg-surface text-foreground-subtle hover:bg-surface-hover hover:text-foreground" : "border-border/40 bg-surface/40 text-foreground-subtle/40 cursor-not-allowed"}`,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react13.Cpu, { className: "h-3.5 w-3.5 shrink-0" }),
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react14.Cpu, { className: "h-3.5 w-3.5 shrink-0" }),
           opt.label,
-          opt.isBest && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("span", { className: "inline-flex items-center gap-0.5 rounded-full bg-amber-500/15 px-1.5 py-0.5 text-[10px] font-semibold text-amber-400", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react13.Star, { className: "h-2.5 w-2.5" }),
+          opt.isBest && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("span", { className: "inline-flex items-center gap-0.5 rounded-full bg-amber-500/15 px-1.5 py-0.5 text-[10px] font-semibold text-amber-400", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(import_lucide_react14.Star, { className: "h-2.5 w-2.5" }),
             "Best"
           ] }),
-          opt.platformScore != null && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("span", { className: "text-[10px] text-foreground-subtle/60", children: [
+          opt.platformScore != null && /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("span", { className: "text-[10px] text-foreground-subtle/60", children: [
             "(",
             opt.platformScore,
             ")"
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
             "span",
             {
               className: `h-1.5 w-1.5 rounded-full ${opt.available ? "bg-success" : "bg-danger"}`
@@ -2338,8 +2653,8 @@ function PipelineRuntimeSelector({ options, value, onChange }) {
 }
 
 // src/composites/pipeline-builder.tsx
-var import_react24 = require("react");
-var import_lucide_react14 = require("lucide-react");
+var import_react29 = require("react");
+var import_lucide_react15 = require("lucide-react");
 
 // src/lib/validate-template.ts
 function validateTemplate(steps, schema) {
@@ -2371,7 +2686,7 @@ function validateTemplate(steps, schema) {
 }
 
 // src/composites/pipeline-builder.tsx
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 function buildSchemaMap(schema) {
   const map = /* @__PURE__ */ new Map();
   for (const slot of schema.slots) {
@@ -2400,20 +2715,20 @@ function createDefaultStep(addon, fallbackRuntime, fallbackBackend) {
   };
 }
 function PlaceholderStep({ addon, onClick }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
     "button",
     {
       type: "button",
       onClick,
       className: "w-full rounded-xl border-2 border-dashed border-border/60 px-4 py-3 text-left transition-all hover:border-primary/30 hover:bg-surface/60 group",
-      children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react14.PlusCircle, { className: "h-[18px] w-[18px] text-foreground-subtle/30 group-hover:text-primary/60 shrink-0" }),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex-1 min-w-0", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "text-[13px] font-medium text-foreground-subtle/50 group-hover:text-foreground-subtle block truncate", children: addon.name }),
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-center gap-1 mt-0.5 flex-wrap", children: [
-            addon.inputClasses.map((c) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "text-[9px] uppercase font-semibold tracking-wide px-1.5 py-0.5 rounded bg-blue-500/8 text-blue-400/50", children: c }, c)),
-            addon.inputClasses.length > 0 && addon.outputClasses.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "text-foreground-subtle/25 text-[10px]", children: "\u2192" }),
-            addon.outputClasses.map((c) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "text-[9px] uppercase font-semibold tracking-wide px-1.5 py-0.5 rounded bg-green-500/8 text-green-400/50", children: c }, c))
+      children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react15.PlusCircle, { className: "h-[18px] w-[18px] text-foreground-subtle/30 group-hover:text-primary/60 shrink-0" }),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "text-[13px] font-medium text-foreground-subtle/50 group-hover:text-foreground-subtle block truncate", children: addon.name }),
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex items-center gap-1 mt-0.5 flex-wrap", children: [
+            addon.inputClasses.map((c) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "text-[9px] uppercase font-semibold tracking-wide px-1.5 py-0.5 rounded bg-blue-500/8 text-blue-400/50", children: c }, c)),
+            addon.inputClasses.length > 0 && addon.outputClasses.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "text-foreground-subtle/25 text-[10px]", children: "\u2192" }),
+            addon.outputClasses.map((c) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "text-[9px] uppercase font-semibold tracking-wide px-1.5 py-0.5 rounded bg-green-500/8 text-green-400/50", children: c }, c))
           ] })
         ] })
       ] })
@@ -2434,9 +2749,9 @@ function PipelineBuilder({
   readOnly = false,
   excludeAddons = []
 }) {
-  const excluded = (0, import_react24.useMemo)(() => new Set(excludeAddons), [excludeAddons]);
-  const schemaMap = (0, import_react24.useMemo)(() => buildSchemaMap(schema), [schema]);
-  const [warnings, setWarnings] = (0, import_react24.useState)([]);
+  const excluded = (0, import_react29.useMemo)(() => new Set(excludeAddons), [excludeAddons]);
+  const schemaMap = (0, import_react29.useMemo)(() => buildSchemaMap(schema), [schema]);
+  const [warnings, setWarnings] = (0, import_react29.useState)([]);
   const bestPlatformScore = capabilities.platformScores?.find((s) => s.available);
   const hasPython = capabilities.runtimes.python.available && capabilities.runtimes.python.backends.some((b) => b.available);
   const defaultRuntime = bestPlatformScore?.runtime ?? (hasPython ? "python" : "node");
@@ -2525,8 +2840,8 @@ function PipelineBuilder({
   }
   function renderStep(step) {
     const childPlaceholders = getChildPlaceholders(step);
-    return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "space-y-1.5", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "space-y-1.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
         PipelineStep,
         {
           step,
@@ -2538,12 +2853,12 @@ function PipelineBuilder({
           readOnly
         }
       ),
-      (step.children.length > 0 || childPlaceholders.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "ml-6 pl-4 border-l-2 border-dashed border-border/40 space-y-1.5", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "text-[10px] font-semibold uppercase tracking-widest text-foreground-subtle/40", children: "Slot: Cropper / Classifier" }),
+      (step.children.length > 0 || childPlaceholders.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "ml-6 pl-4 border-l-2 border-dashed border-border/40 space-y-1.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "text-[10px] font-semibold uppercase tracking-widest text-foreground-subtle/40", children: "Slot: Cropper / Classifier" }),
         step.children.map((child) => {
           const childChildPlaceholders = getChildPlaceholders(child);
-          return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "space-y-1.5", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "space-y-1.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
               PipelineStep,
               {
                 step: child,
@@ -2566,9 +2881,9 @@ function PipelineBuilder({
                 readOnly
               }
             ),
-            (child.children.length > 0 || childChildPlaceholders.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "ml-6 pl-4 border-l-2 border-dashed border-border/30 space-y-1.5", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "text-[10px] font-semibold uppercase tracking-widest text-foreground-subtle/30", children: "Slot: Recognizer" }),
-              child.children.map((grandchild) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+            (child.children.length > 0 || childChildPlaceholders.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "ml-6 pl-4 border-l-2 border-dashed border-border/30 space-y-1.5", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "text-[10px] font-semibold uppercase tracking-widest text-foreground-subtle/30", children: "Slot: Recognizer" }),
+              child.children.map((grandchild) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
                 PipelineStep,
                 {
                   step: grandchild,
@@ -2596,7 +2911,7 @@ function PipelineBuilder({
                 },
                 grandchild.addonId
               )),
-              !readOnly && childChildPlaceholders.map((addon) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              !readOnly && childChildPlaceholders.map((addon) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
                 PlaceholderStep,
                 {
                   addon,
@@ -2615,7 +2930,7 @@ function PipelineBuilder({
             ] })
           ] }, child.addonId);
         }),
-        !readOnly && childPlaceholders.map((addon) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        !readOnly && childPlaceholders.map((addon) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
           PlaceholderStep,
           {
             addon,
@@ -2627,22 +2942,22 @@ function PipelineBuilder({
     ] }, step.addonId);
   }
   const rootSlots = schema.slots.filter((s) => s.parentSlot === null).sort((a, b) => a.priority - b.priority);
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "rounded-xl border border-border bg-surface p-3", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "relative flex-1 min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "rounded-xl border border-border bg-surface p-3", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "relative flex-1 min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
         "select",
         {
           value: selectedTemplateId ?? "",
           onChange: handleSelectTemplate,
           className: "w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground focus:outline-none focus:border-primary/50",
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("option", { value: "", children: "No template" }),
-            templates.map((t) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("option", { value: t.id, children: t.name }, t.id))
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("option", { value: "", children: "No template" }),
+            templates.map((t) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("option", { value: t.id, children: t.name }, t.id))
           ]
         }
       ) }),
-      dirty && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "h-1.5 w-1.5 rounded-full bg-amber-500 shrink-0" }),
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      dirty && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "h-1.5 w-1.5 rounded-full bg-amber-500 shrink-0" }),
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
         "button",
         {
           onClick: handleSave,
@@ -2652,10 +2967,10 @@ function PipelineBuilder({
             "p-2 rounded-lg border border-border transition-colors",
             selectedTemplateId && !readOnly ? "text-foreground-subtle hover:bg-surface-hover" : "text-foreground-subtle/30 cursor-not-allowed"
           ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react14.Save, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react15.Save, { className: "h-4 w-4" })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
         "button",
         {
           onClick: handleSaveAs,
@@ -2665,10 +2980,10 @@ function PipelineBuilder({
             "p-2 rounded-lg border border-border transition-colors",
             !readOnly ? "text-foreground-subtle hover:bg-surface-hover" : "text-foreground-subtle/30 cursor-not-allowed"
           ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react14.CopyPlus, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react15.CopyPlus, { className: "h-4 w-4" })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
         "button",
         {
           onClick: handleDelete,
@@ -2678,16 +2993,16 @@ function PipelineBuilder({
             "p-2 rounded-lg border border-border transition-colors",
             selectedTemplateId && !readOnly ? "text-foreground-subtle hover:text-danger" : "text-foreground-subtle/30 cursor-not-allowed"
           ),
-          children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react14.Trash2, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react15.Trash2, { className: "h-4 w-4" })
         }
       )
     ] }) }),
-    warnings.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "rounded-lg border border-amber-500/30 bg-amber-500/5 p-3 text-xs text-amber-400 space-y-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "font-medium", children: "Template loaded with warnings:" }),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("button", { onClick: () => setWarnings([]), className: "text-amber-400/60 hover:text-amber-400", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react14.X, { className: "h-3.5 w-3.5" }) })
+    warnings.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "rounded-lg border border-amber-500/30 bg-amber-500/5 p-3 text-xs text-amber-400 space-y-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "font-medium", children: "Template loaded with warnings:" }),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("button", { onClick: () => setWarnings([]), className: "text-amber-400/60 hover:text-amber-400", children: /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(import_lucide_react15.X, { className: "h-3.5 w-3.5" }) })
       ] }),
-      warnings.map((w, i) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { children: [
+      warnings.map((w, i) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { children: [
         "\u2022 ",
         w
       ] }, i))
@@ -2695,13 +3010,13 @@ function PipelineBuilder({
     rootSlots.map((slot) => {
       const slotSteps = steps.filter((s) => s.slot === slot.id && !excluded.has(s.addonId));
       const missingRootAddons = slot.addons.filter((a) => !existingIds.has(a.id) && !excluded.has(a.id));
-      return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("span", { className: "text-[10px] font-semibold uppercase tracking-widest text-foreground-subtle/50", children: [
+      return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { className: "text-[10px] font-semibold uppercase tracking-widest text-foreground-subtle/50", children: [
           "Slot: ",
           slot.label
         ] }),
         slotSteps.map((step) => renderStep(step)),
-        !readOnly && missingRootAddons.map((addon) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(PlaceholderStep, { addon, onClick: () => {
+        !readOnly && missingRootAddons.map((addon) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(PlaceholderStep, { addon, onClick: () => {
           onChange([...steps, createDefaultStep(addon, defaultRuntime, defaultBackend)]);
         } }, addon.id))
       ] }, slot.id);
@@ -2781,8 +3096,8 @@ function getClassColor(className, customColors) {
 }
 
 // src/composites/detection-canvas.tsx
-var import_react25 = require("react");
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_react30 = require("react");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 var DEFAULT_CLASS_COLORS = CLASS_COLORS;
 function DetectionCanvas({
   src,
@@ -2802,7 +3117,7 @@ function DetectionCanvas({
   }
   const ratio = aspectRatio ?? (imageWidth && imageHeight ? `${imageWidth}/${imageHeight}` : "16/9");
   const filteredDetections = detections.filter((d) => d.confidence >= minConfidence);
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
     "div",
     {
       className: cn(
@@ -2810,10 +3125,10 @@ function DetectionCanvas({
         className
       ),
       style: { aspectRatio: ratio },
-      children: src ? /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("img", { src, className: "absolute inset-0 w-full h-full object-fill", alt: "" }),
+      children: src ? /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_jsx_runtime45.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("img", { src, className: "absolute inset-0 w-full h-full object-fill", alt: "" }),
         filteredDetections.map(
-          (d, i) => d.mask && d.maskWidth && d.maskHeight ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+          (d, i) => d.mask && d.maskWidth && d.maskHeight ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
             MaskOverlay,
             {
               mask: d.mask,
@@ -2827,7 +3142,7 @@ function DetectionCanvas({
             `mask-${i}`
           ) : null
         ),
-        filteredDetections.map((d, i) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+        filteredDetections.map((d, i) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
           BoundingBox,
           {
             detection: d,
@@ -2847,7 +3162,7 @@ function DetectionCanvas({
               const ph = py2 - py1;
               if (pw > 0 && ph > 0 && cw * ch / (pw * ph) > 0.8) return false;
               return true;
-            }).map((child, j) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            }).map((child, j) => /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
               ChildBoundingBox,
               {
                 child,
@@ -2860,7 +3175,7 @@ function DetectionCanvas({
           },
           `det-${i}`
         ))
-      ] }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "w-full h-full flex items-center justify-center text-foreground-subtle text-sm", children: placeholder ?? "No image loaded" })
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "w-full h-full flex items-center justify-center text-foreground-subtle text-sm", children: placeholder ?? "No image loaded" })
     }
   );
 }
@@ -2877,15 +3192,15 @@ function BoundingBox({
   const labelCount = 1 + (detection.labelsData?.length ?? 0);
   const labelHeightPx = labelCount * 16 + 4;
   const topPct = y1 / imageHeight * 100;
-  const containerRef = (0, import_react25.useRef)(null);
+  const containerRef = (0, import_react30.useRef)(null);
   const showBelow = topPct < labelHeightPx / imageHeight * 100 * 1.5;
-  const labelsElement = /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+  const labelsElement = /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
     "div",
     {
       className: `absolute left-0 flex flex-col items-start gap-px ${showBelow ? "" : ""}`,
       style: showBelow ? { top: "100%", marginTop: "2px" } : { bottom: "100%", marginBottom: "2px" },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
           "span",
           {
             className: "text-[10px] px-1 rounded-sm whitespace-nowrap text-white",
@@ -2896,7 +3211,7 @@ function BoundingBox({
             ]
           }
         ),
-        detection.labelsData?.map((l, k) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+        detection.labelsData?.map((l, k) => /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
           "span",
           {
             className: "text-[9px] font-semibold px-1 rounded-sm whitespace-nowrap text-white",
@@ -2913,7 +3228,7 @@ function BoundingBox({
       ]
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
     "div",
     {
       ref: containerRef,
@@ -2943,8 +3258,8 @@ function MaskOverlay({
   imageHeight,
   color
 }) {
-  const canvasRef = (0, import_react25.useRef)(null);
-  (0, import_react25.useEffect)(() => {
+  const canvasRef = (0, import_react30.useRef)(null);
+  (0, import_react30.useEffect)(() => {
     const canvas = canvasRef.current;
     if (!canvas) return;
     const ctx = canvas.getContext("2d");
@@ -2972,7 +3287,7 @@ function MaskOverlay({
     ctx.putImageData(imageData, 0, 0);
   }, [mask, maskWidth, maskHeight, color]);
   const [x1, y1, x2, y2] = bbox;
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
     "canvas",
     {
       ref: canvasRef,
@@ -2998,7 +3313,7 @@ function ChildBoundingBox({
   const pw = px2 - px1;
   const ph = py2 - py1;
   if (pw <= 0 || ph <= 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
     "div",
     {
       className: "absolute rounded-sm",
@@ -3015,13 +3330,13 @@ function ChildBoundingBox({
         const labelCount = 1 + (child.labelsData?.length ?? 0);
         const relTop = (cy1 - py1) / ph * 100;
         const showBelow = relTop < labelCount * 6;
-        return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+        return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
           "div",
           {
             className: "absolute left-0 flex flex-col items-start gap-px",
             style: showBelow ? { top: "100%", marginTop: "1px" } : { bottom: "100%", marginBottom: "1px" },
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
                 "span",
                 {
                   className: "text-[9px] px-0.5 rounded-sm whitespace-nowrap text-white",
@@ -3032,7 +3347,7 @@ function ChildBoundingBox({
                   ]
                 }
               ),
-              child.labelsData?.map((l, k) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+              child.labelsData?.map((l, k) => /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(
                 "span",
                 {
                   className: "text-[8px] font-semibold px-0.5 rounded-sm whitespace-nowrap text-white",
@@ -3055,7 +3370,7 @@ function ChildBoundingBox({
 }
 
 // src/composites/detection-result-tree.tsx
-var import_jsx_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 function DetectionResultTree({
   detections,
   classColors,
@@ -3065,15 +3380,15 @@ function DetectionResultTree({
 }) {
   const colors = classColors;
   if (detections.length === 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "text-sm text-foreground-subtle italic text-center py-4", children: "No detections" });
+    return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "text-sm text-foreground-subtle italic text-center py-4", children: "No detections" });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "text-xs font-medium text-foreground-subtle uppercase tracking-wide mb-2", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "text-xs font-medium text-foreground-subtle uppercase tracking-wide mb-2", children: [
       "Detections (",
       detections.length,
       ")"
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "space-y-2", children: detections.map((d, i) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "space-y-2", children: detections.map((d, i) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
       DetectionNode,
       {
         detection: d,
@@ -3095,10 +3410,10 @@ function DetectionNode({
 }) {
   const color = getClassColor(detection.className, colors);
   const isVisible = !hiddenKeys?.has(path);
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: `rounded-md border border-border bg-surface p-3 space-y-1 ${isVisible ? "" : "opacity-40"}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex justify-between items-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex items-center gap-2", children: [
-        onToggleVisibility && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: `rounded-md border border-border bg-surface p-3 space-y-1 ${isVisible ? "" : "opacity-40"}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex justify-between items-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex items-center gap-2", children: [
+        onToggleVisibility && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
           "input",
           {
             type: "checkbox",
@@ -3107,45 +3422,45 @@ function DetectionNode({
             className: "h-3.5 w-3.5 rounded border-border accent-primary cursor-pointer shrink-0"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
           "span",
           {
             className: "h-2.5 w-2.5 rounded-full shrink-0",
             style: { backgroundColor: color }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "text-sm font-medium text-foreground", children: detection.className }),
-        detection.mask && detection.maskWidth && detection.maskHeight && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { className: "text-[9px] font-mono px-1 py-0.5 rounded bg-primary/10 text-primary", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "text-sm font-medium text-foreground", children: detection.className }),
+        detection.mask && detection.maskWidth && detection.maskHeight && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("span", { className: "text-[9px] font-mono px-1 py-0.5 rounded bg-primary/10 text-primary", children: [
           "mask ",
           detection.maskWidth,
           "x",
           detection.maskHeight
         ] })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ConfidenceBadge, { confidence: detection.confidence })
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(ConfidenceBadge, { confidence: detection.confidence })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "text-[10px] text-foreground-subtle font-mono", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "text-[10px] text-foreground-subtle font-mono", children: [
       "bbox: [",
       detection.bbox.map((v) => Math.round(v)).join(", "),
       "]"
     ] }),
-    detection.labelsData && detection.labelsData.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "flex flex-wrap gap-1 mt-1", children: detection.labelsData.map((l, k) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+    detection.labelsData && detection.labelsData.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "flex flex-wrap gap-1 mt-1", children: detection.labelsData.map((l, k) => /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
       "span",
       {
         className: "inline-flex items-center gap-1 text-[10px] font-medium px-1.5 py-0.5 rounded-full",
         style: { backgroundColor: getClassColor(l.addonId ?? l.label, colors) + "20", color: getClassColor(l.addonId ?? l.label, colors) },
         children: [
           l.label,
-          /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { className: "opacity-60", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("span", { className: "opacity-60", children: [
             (l.score * 100).toFixed(0),
             "%"
           ] }),
-          l.addonId && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "opacity-40 text-[8px]", children: l.addonId })
+          l.addonId && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "opacity-40 text-[8px]", children: l.addonId })
         ]
       },
       k
     )) }),
-    detection.children && detection.children.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    detection.children && detection.children.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
       ChildrenTree,
       {
         children: detection.children,
@@ -3164,13 +3479,13 @@ function ChildrenTree({
   hiddenKeys,
   onToggleVisibility
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "ml-4 mt-1.5 space-y-1.5 border-l-2 border-border pl-3", children: children.map((child, j) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "ml-4 mt-1.5 space-y-1.5 border-l-2 border-border pl-3", children: children.map((child, j) => {
     const childPath = `${parentPath}.${j}`;
     const childColor = getClassColor(child.className, colors);
     const isVisible = !hiddenKeys?.has(childPath);
-    return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: `text-xs space-y-0.5 ${isVisible ? "" : "opacity-40"}`, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex items-center gap-1.5", children: [
-        onToggleVisibility && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: `text-xs space-y-0.5 ${isVisible ? "" : "opacity-40"}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+        onToggleVisibility && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
           "input",
           {
             type: "checkbox",
@@ -3179,26 +3494,26 @@ function ChildrenTree({
             className: "h-3 w-3 rounded border-border accent-primary cursor-pointer shrink-0"
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
           "span",
           {
             className: "h-1.5 w-1.5 rounded-full shrink-0",
             style: { backgroundColor: childColor }
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "font-medium", style: { color: childColor }, children: child.className }),
-        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { className: "text-foreground-subtle", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "font-medium", style: { color: childColor }, children: child.className }),
+        /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("span", { className: "text-foreground-subtle", children: [
           (child.confidence * 100).toFixed(0),
           "%"
         ] }),
-        child.mask && child.maskWidth && child.maskHeight && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { className: "text-[9px] font-mono px-1 py-0.5 rounded bg-primary/10 text-primary", children: [
+        child.mask && child.maskWidth && child.maskHeight && /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("span", { className: "text-[9px] font-mono px-1 py-0.5 rounded bg-primary/10 text-primary", children: [
           "mask ",
           child.maskWidth,
           "x",
           child.maskHeight
         ] })
       ] }),
-      child.labelsData && child.labelsData.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "flex flex-wrap gap-1 ml-5 mt-0.5", children: child.labelsData.map((l, k) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+      child.labelsData && child.labelsData.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: "flex flex-wrap gap-1 ml-5 mt-0.5", children: child.labelsData.map((l, k) => /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(
         "span",
         {
           className: "inline-flex items-center gap-0.5 text-[9px] font-medium px-1 py-0.5 rounded-full",
@@ -3206,7 +3521,7 @@ function ChildrenTree({
           children: [
             l.label,
             " ",
-            /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { className: "opacity-60", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("span", { className: "opacity-60", children: [
               (l.score * 100).toFixed(0),
               "%"
             ] })
@@ -3214,7 +3529,7 @@ function ChildrenTree({
         },
         k
       )) }),
-      child.children && child.children.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+      child.children && child.children.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
         ChildrenTree,
         {
           children: child.children,
@@ -3229,30 +3544,30 @@ function ChildrenTree({
 }
 function ConfidenceBadge({ confidence }) {
   const level = confidence >= 0.8 ? "bg-success/10 text-success" : confidence >= 0.5 ? "bg-warning/10 text-warning" : "bg-danger/10 text-danger";
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { className: `text-xs font-medium px-2 py-0.5 rounded-full ${level}`, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("span", { className: `text-xs font-medium px-2 py-0.5 rounded-full ${level}`, children: [
     (confidence * 100).toFixed(1),
     "%"
   ] });
 }
 
 // src/composites/step-timings.tsx
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 function StepTimings({ timings, totalMs, className }) {
   const entries = Object.entries(timings);
   if (entries.length === 0 && totalMs === void 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: `rounded-lg border border-border bg-surface p-3 space-y-2 ${className ?? ""}`, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "text-xs font-medium text-foreground-subtle uppercase tracking-wide", children: "Timings" }),
-    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "space-y-1 text-xs", children: [
-      entries.map(([step, ms]) => /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex justify-between", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "text-foreground-subtle", children: step }),
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("span", { className: "font-mono text-foreground", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: `rounded-lg border border-border bg-surface p-3 space-y-2 ${className ?? ""}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "text-xs font-medium text-foreground-subtle uppercase tracking-wide", children: "Timings" }),
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "space-y-1 text-xs", children: [
+      entries.map(([step, ms]) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex justify-between", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "text-foreground-subtle", children: step }),
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("span", { className: "font-mono text-foreground", children: [
           ms.toFixed(1),
           "ms"
         ] })
       ] }, step)),
-      totalMs !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex justify-between pt-1 border-t border-border font-medium text-foreground", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { children: "Total" }),
-        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("span", { className: "font-mono", children: [
+      totalMs !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: "flex justify-between pt-1 border-t border-border font-medium text-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { children: "Total" }),
+        /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("span", { className: "font-mono", children: [
           totalMs.toFixed(1),
           "ms"
         ] })
@@ -3262,7 +3577,7 @@ function StepTimings({ timings, totalMs, className }) {
 }
 
 // src/composites/image-selector.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 function ImageSelector({
   images,
   selectedFilename,
@@ -3288,8 +3603,8 @@ function ImageSelector({
     };
     input.click();
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: `flex flex-wrap items-center gap-2 ${className ?? ""}`, children: [
-    images.map((img) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: `flex flex-wrap items-center gap-2 ${className ?? ""}`, children: [
+    images.map((img) => /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
       "button",
       {
         onClick: () => onSelect(img.filename),
@@ -3298,7 +3613,7 @@ function ImageSelector({
       },
       img.filename
     )),
-    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
       "button",
       {
         onClick: handleUploadClick,
@@ -3306,12 +3621,12 @@ function ImageSelector({
         children: "Upload..."
       }
     ),
-    uploadedName && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "text-xs text-foreground-subtle", children: uploadedName })
+    uploadedName && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "text-xs text-foreground-subtle", children: uploadedName })
   ] });
 }
 
 // src/composites/inference-config-selector.tsx
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 var SELECT_CLASS = "w-full px-3 py-2 text-sm rounded-md border border-border bg-surface text-foreground focus:outline-none focus:ring-2 focus:ring-primary/50";
 function InferenceConfigSelector({
   runtime,
@@ -3331,16 +3646,16 @@ function InferenceConfigSelector({
   showAgent = false
 }) {
   const containerClass = layout === "grid" ? "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4" : layout === "horizontal" ? "flex flex-wrap items-end gap-4" : "space-y-3";
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: `${containerClass} ${className ?? ""}`, children: [
-    showAgent && agents.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("label", { className: "space-y-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "text-xs font-medium text-foreground-subtle", children: "Agent" }),
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: `${containerClass} ${className ?? ""}`, children: [
+    showAgent && agents.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("label", { className: "space-y-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "text-xs font-medium text-foreground-subtle", children: "Agent" }),
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
         "select",
         {
           value: agentId,
           onChange: (e) => onAgentChange?.(e.target.value),
           className: SELECT_CLASS,
-          children: agents.map((a) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("option", { value: a.id, children: [
+          children: agents.map((a) => /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("option", { value: a.id, children: [
             a.name,
             " (",
             a.status,
@@ -3349,45 +3664,45 @@ function InferenceConfigSelector({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("label", { className: "space-y-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "text-xs font-medium text-foreground-subtle", children: "Runtime" }),
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("label", { className: "space-y-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "text-xs font-medium text-foreground-subtle", children: "Runtime" }),
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
         "select",
         {
           value: runtime,
           onChange: (e) => onRuntimeChange(e.target.value),
           className: SELECT_CLASS,
-          children: runtimes.map((r) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("option", { value: r.value, disabled: !r.available, children: [
+          children: runtimes.map((r) => /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("option", { value: r.value, disabled: !r.available, children: [
             r.label,
             !r.available ? " (unavailable)" : ""
           ] }, r.value))
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("label", { className: "space-y-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "text-xs font-medium text-foreground-subtle", children: "Backend" }),
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("label", { className: "space-y-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "text-xs font-medium text-foreground-subtle", children: "Backend" }),
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
         "select",
         {
           value: backend,
           onChange: (e) => onBackendChange(e.target.value),
           className: SELECT_CLASS,
-          children: backends.map((b) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("option", { value: b.id, disabled: !b.available, children: [
+          children: backends.map((b) => /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("option", { value: b.id, disabled: !b.available, children: [
             b.label,
             !b.available ? " (unavailable)" : ""
           ] }, b.id))
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("label", { className: "space-y-1", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "text-xs font-medium text-foreground-subtle", children: "Model" }),
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("label", { className: "space-y-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "text-xs font-medium text-foreground-subtle", children: "Model" }),
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
         "select",
         {
           value: modelId,
           onChange: (e) => onModelChange(e.target.value),
           className: SELECT_CLASS,
-          children: models.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("option", { value: "", children: "No compatible models" }) : models.map((m) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("option", { value: m.id, children: [
+          children: models.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("option", { value: "", children: "No compatible models" }) : models.map((m) => /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("option", { value: m.id, children: [
             m.name,
             m.downloaded ? " \u2713" : ""
           ] }, m.id))
@@ -3398,19 +3713,19 @@ function InferenceConfigSelector({
 }
 
 // src/composites/mount-addon-page.tsx
-var import_react28 = require("react");
+var import_react33 = require("react");
 var import_client2 = require("react-dom/client");
 
 // src/composites/dev-shell.tsx
-var import_react27 = require("react");
+var import_react32 = require("react");
 var import_client = require("@trpc/client");
 var import_superjson = __toESM(require("superjson"), 1);
 
 // src/composites/login-form.tsx
-var import_react26 = require("react");
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_react31 = require("react");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 function EyeIcon({ className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -3422,14 +3737,14 @@ function EyeIcon({ className }) {
       strokeLinejoin: "round",
       className,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("path", { d: "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" }),
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("circle", { cx: "12", cy: "12", r: "3" })
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("path", { d: "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" }),
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("circle", { cx: "12", cy: "12", r: "3" })
       ]
     }
   );
 }
 function EyeOffIcon({ className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -3441,16 +3756,16 @@ function EyeOffIcon({ className }) {
       strokeLinejoin: "round",
       className,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("path", { d: "M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49" }),
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("path", { d: "M14.084 14.158a3 3 0 0 1-4.242-4.242" }),
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("path", { d: "M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143" }),
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("path", { d: "m2 2 20 20" })
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("path", { d: "M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49" }),
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("path", { d: "M14.084 14.158a3 3 0 0 1-4.242-4.242" }),
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("path", { d: "M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143" }),
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("path", { d: "m2 2 20 20" })
       ]
     }
   );
 }
 function SpinnerIcon({ className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -3461,7 +3776,7 @@ function SpinnerIcon({ className }) {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       className,
-      children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
     }
   );
 }
@@ -3472,11 +3787,11 @@ function LoginForm({
   error: externalError,
   className
 }) {
-  const [username, setUsername] = (0, import_react26.useState)("");
-  const [password, setPassword] = (0, import_react26.useState)("");
-  const [showPassword, setShowPassword] = (0, import_react26.useState)(false);
-  const [submitting, setSubmitting] = (0, import_react26.useState)(false);
-  const [internalError, setInternalError] = (0, import_react26.useState)(null);
+  const [username, setUsername] = (0, import_react31.useState)("");
+  const [password, setPassword] = (0, import_react31.useState)("");
+  const [showPassword, setShowPassword] = (0, import_react31.useState)(false);
+  const [submitting, setSubmitting] = (0, import_react31.useState)(false);
+  const [internalError, setInternalError] = (0, import_react31.useState)(null);
   const error = externalError ?? internalError;
   const handleSubmit = async (e) => {
     e.preventDefault();
@@ -3492,26 +3807,26 @@ function LoginForm({
       setSubmitting(false);
     }
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
     "div",
     {
       className: cn(
         "flex min-h-screen items-center justify-center bg-background p-4",
         className
       ),
-      children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "w-full max-w-sm", children: [
-        logoSrc && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "flex justify-center mb-8", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("img", { src: logoSrc, alt: "Logo", className: "h-12" }) }),
-        serverUrl && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: "mb-4 text-center text-xs text-foreground-subtle truncate", children: serverUrl }),
-        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "w-full max-w-sm", children: [
+        logoSrc && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "flex justify-center mb-8", children: /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("img", { src: logoSrc, alt: "Logo", className: "h-12" }) }),
+        serverUrl && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("p", { className: "mb-4 text-center text-xs text-foreground-subtle truncate", children: serverUrl }),
+        /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
           "form",
           {
             onSubmit: handleSubmit,
             className: "space-y-4 rounded-xl border border-border bg-surface p-6 shadow-xl shadow-black/10",
             children: [
-              error && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "rounded-md bg-danger/10 border border-danger/20 px-3 py-2 text-xs text-danger", children: error }),
-              /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "space-y-1.5", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("label", { className: "text-xs font-medium text-foreground-subtle", children: "Username" }),
-                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+              error && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "rounded-md bg-danger/10 border border-danger/20 px-3 py-2 text-xs text-danger", children: error }),
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "space-y-1.5", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("label", { className: "text-xs font-medium text-foreground-subtle", children: "Username" }),
+                /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
                   "input",
                   {
                     type: "text",
@@ -3523,10 +3838,10 @@ function LoginForm({
                   }
                 )
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "space-y-1.5", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("label", { className: "text-xs font-medium text-foreground-subtle", children: "Password" }),
-                /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "relative", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "space-y-1.5", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("label", { className: "text-xs font-medium text-foreground-subtle", children: "Password" }),
+                /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: "relative", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
                     "input",
                     {
                       type: showPassword ? "text" : "password",
@@ -3537,26 +3852,26 @@ function LoginForm({
                       className: "w-full rounded-lg border border-border bg-background px-3 py-2.5 pr-10 text-sm text-foreground placeholder:text-foreground-subtle focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
                     }
                   ),
-                  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                  /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
                     "button",
                     {
                       type: "button",
                       onClick: () => setShowPassword((prev) => !prev),
                       className: "absolute right-2.5 top-1/2 -translate-y-1/2 text-foreground-subtle hover:text-foreground",
                       tabIndex: -1,
-                      children: showPassword ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(EyeOffIcon, { className: "h-4 w-4" }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(EyeIcon, { className: "h-4 w-4" })
+                      children: showPassword ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(EyeOffIcon, { className: "h-4 w-4" }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(EyeIcon, { className: "h-4 w-4" })
                     }
                   )
                 ] })
               ] }),
-              /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+              /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(
                 "button",
                 {
                   type: "submit",
                   disabled: submitting,
                   className: "w-full rounded-lg bg-primary px-4 py-2.5 text-sm font-semibold text-primary-foreground hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center justify-center gap-2",
                   children: [
-                    submitting && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SpinnerIcon, { className: "h-4 w-4 animate-spin" }),
+                    submitting && /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(SpinnerIcon, { className: "h-4 w-4 animate-spin" }),
                     submitting ? "Logging in..." : "Log in"
                   ]
                 }
@@ -3570,11 +3885,11 @@ function LoginForm({
 }
 
 // src/composites/dev-shell.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 var STORAGE_KEY = "camstack_dev_token";
-var DevShellContext = (0, import_react27.createContext)(null);
+var DevShellContext = (0, import_react32.createContext)(null);
 function useDevShell() {
-  const ctx = (0, import_react27.useContext)(DevShellContext);
+  const ctx = (0, import_react32.useContext)(DevShellContext);
   if (!ctx) {
     throw new Error("useDevShell must be used within a DevShell");
   }
@@ -3585,7 +3900,7 @@ function getStoredToken() {
   return localStorage.getItem(STORAGE_KEY);
 }
 function SunIcon({ className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -3597,21 +3912,21 @@ function SunIcon({ className }) {
       strokeLinejoin: "round",
       className,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("circle", { cx: "12", cy: "12", r: "4" }),
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("path", { d: "M12 2v2" }),
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("path", { d: "M12 20v2" }),
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("path", { d: "m4.93 4.93 1.41 1.41" }),
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("path", { d: "m17.66 17.66 1.41 1.41" }),
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("path", { d: "M2 12h2" }),
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("path", { d: "M20 12h2" }),
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("path", { d: "m6.34 17.66-1.41 1.41" }),
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("path", { d: "m19.07 4.93-1.41 1.41" })
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("circle", { cx: "12", cy: "12", r: "4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("path", { d: "M12 2v2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("path", { d: "M12 20v2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("path", { d: "m4.93 4.93 1.41 1.41" }),
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("path", { d: "m17.66 17.66 1.41 1.41" }),
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("path", { d: "M2 12h2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("path", { d: "M20 12h2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("path", { d: "m6.34 17.66-1.41 1.41" }),
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("path", { d: "m19.07 4.93-1.41 1.41" })
       ]
     }
   );
 }
 function MoonIcon({ className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -3622,7 +3937,7 @@ function MoonIcon({ className }) {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       className,
-      children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" })
     }
   );
 }
@@ -3634,7 +3949,7 @@ function DevShellInner({
   onLogout
 }) {
   const theme = useThemeMode();
-  const trpc = (0, import_react27.useMemo)(
+  const trpc = (0, import_react32.useMemo)(
     () => {
       const wsUrl = serverUrl.replace(/^http/, "ws") + "/trpc";
       const wsClient = (0, import_client.createWSClient)({
@@ -3657,19 +3972,19 @@ function DevShellInner({
     },
     [serverUrl, token]
   );
-  const contextValue = (0, import_react27.useMemo)(
+  const contextValue = (0, import_react32.useMemo)(
     () => ({ trpc, token, logout: onLogout }),
     [trpc, token, onLogout]
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(DevShellContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "min-h-screen bg-background text-foreground", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex items-center justify-between border-b border-border bg-surface px-4 py-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "rounded bg-warning/20 px-2 py-0.5 text-xs font-bold text-warning", children: "DEV MODE" }),
-        title && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "text-sm font-medium text-foreground", children: title }),
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "text-xs text-foreground-subtle", children: serverUrl })
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(DevShellContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "min-h-screen bg-background text-foreground", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex items-center justify-between border-b border-border bg-surface px-4 py-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "rounded bg-warning/20 px-2 py-0.5 text-xs font-bold text-warning", children: "DEV MODE" }),
+        title && /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "text-sm font-medium text-foreground", children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "text-xs text-foreground-subtle", children: serverUrl })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+      /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
           "button",
           {
             type: "button",
@@ -3677,12 +3992,12 @@ function DevShellInner({
             className: "flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium text-foreground-subtle hover:text-foreground hover:bg-surface-hover transition-colors",
             title: `Theme: ${theme.mode}`,
             children: [
-              theme.resolvedMode === "dark" ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(SunIcon, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(MoonIcon, { className: "h-3.5 w-3.5" }),
+              theme.resolvedMode === "dark" ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(SunIcon, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(MoonIcon, { className: "h-3.5 w-3.5" }),
               theme.mode === "dark" ? "Dark" : theme.mode === "light" ? "Light" : "System"
             ]
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
           "button",
           {
             type: "button",
@@ -3693,7 +4008,7 @@ function DevShellInner({
         )
       ] })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "p-4", children: children({ trpc, theme }) })
+    /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "p-4", children: children({ trpc, theme }) })
   ] }) });
 }
 function DevShell({
@@ -3701,8 +4016,8 @@ function DevShell({
   serverUrl = "https://localhost:4443",
   title
 }) {
-  const [token, setToken] = (0, import_react27.useState)(getStoredToken);
-  const handleLogin = (0, import_react27.useCallback)(
+  const [token, setToken] = (0, import_react32.useState)(getStoredToken);
+  const handleLogin = (0, import_react32.useCallback)(
     async (username, password) => {
       const anonClient = (0, import_client.createTRPCClient)({
         links: [
@@ -3719,14 +4034,14 @@ function DevShell({
     },
     [serverUrl]
   );
-  const handleLogout = (0, import_react27.useCallback)(() => {
+  const handleLogout = (0, import_react32.useCallback)(() => {
     localStorage.removeItem(STORAGE_KEY);
     setToken(null);
   }, []);
   if (!token) {
-    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(LoginForm, { onLogin: handleLogin, serverUrl }) });
+    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(LoginForm, { onLogin: handleLogin, serverUrl }) });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
     DevShellInner,
     {
       serverUrl,
@@ -3751,10 +4066,10 @@ function mountAddonPage(PageComponent, options = {}) {
     return;
   }
   (0, import_client2.createRoot)(root).render(
-    (0, import_react28.createElement)(DevShell, {
+    (0, import_react33.createElement)(DevShell, {
       serverUrl,
       title,
-      children: ({ trpc, theme }) => (0, import_react28.createElement)(PageComponent, {
+      children: ({ trpc, theme }) => (0, import_react33.createElement)(PageComponent, {
         trpc,
         theme: { isDark: theme.resolvedMode === "dark" },
         navigate: (path) => {
@@ -3768,6 +4083,7 @@ function mountAddonPage(PageComponent, options = {}) {
 0 && (module.exports = {
   AppShell,
   Badge,
+  BottomSheet,
   Button,
   CLASS_COLORS,
   Card,
@@ -3804,6 +4120,7 @@ function mountAddonPage(PageComponent, options = {}) {
   KeyValueList,
   Label,
   LoginForm,
+  MobileDrawer,
   PageHeader,
   PipelineBuilder,
   PipelineRuntimeSelector,
@@ -3843,6 +4160,7 @@ function mountAddonPage(PageComponent, options = {}) {
   statusIcons,
   themeToCss,
   useDevShell,
+  useIsMobile,
   useThemeMode
 });
 //# sourceMappingURL=index.cjs.map