@camstack/ui-library 0.1.35 → 0.1.36

package/dist/index.js

@@ -917,12 +917,92 @@ import {
   createContext as createContext5,
   useCallback as useCallback4,
   useContext as useContext5,
-  useEffect as useEffect4,
+  useEffect as useEffect5,
   useId as useId4,
   useRef as useRef4,
   useState as useState5
 } from "react";
-import { jsx as jsx16 } from "react/jsx-runtime";
+
+// src/hooks/use-is-mobile.ts
+import { useSyncExternalStore } from "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 useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
+}
+
+// src/primitives/bottom-sheet.tsx
+import { useEffect as useEffect4 } from "react";
+import { X } from "lucide-react";
+import { Fragment, jsx as jsx16, jsxs as jsxs5 } from "react/jsx-runtime";
+function BottomSheet({ open, onClose, title, children, className }) {
+  useEffect4(() => {
+    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__ */ jsxs5(Fragment, { children: [
+    /* @__PURE__ */ jsx16(
+      "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__ */ jsxs5(
+      "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__ */ jsx16("div", { className: "flex justify-center pt-2 pb-1", children: /* @__PURE__ */ jsx16("div", { className: "h-1 w-8 rounded-full bg-foreground-subtle/30" }) }),
+          title && /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between px-4 pb-2", children: [
+            /* @__PURE__ */ jsx16("span", { className: "text-sm font-medium text-foreground", children: title }),
+            /* @__PURE__ */ jsx16(
+              "button",
+              {
+                onClick: onClose,
+                className: "p-1 rounded-md hover:bg-surface-hover text-foreground-muted transition-colors",
+                children: /* @__PURE__ */ jsx16(X, { className: "h-4 w-4" })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsx16("div", { className: "flex-1 overflow-y-auto px-4 pb-4", children })
+        ]
+      }
+    )
+  ] });
+}
+
+// src/primitives/popover.tsx
+import { jsx as jsx17 } from "react/jsx-runtime";
 var PopoverContext = createContext5(null);
 function usePopoverContext() {
   const ctx = useContext5(PopoverContext);
@@ -941,11 +1021,11 @@ function Popover({ children, open: controlledOpen, onOpenChange }) {
     },
     [controlledOpen, onOpenChange]
   );
-  return /* @__PURE__ */ jsx16(PopoverContext.Provider, { value: { open, setOpen, triggerId, contentId }, children: /* @__PURE__ */ jsx16("div", { className: "relative inline-block", children }) });
+  return /* @__PURE__ */ jsx17(PopoverContext.Provider, { value: { open, setOpen, triggerId, contentId }, children: /* @__PURE__ */ jsx17("div", { className: "relative inline-block", children }) });
 }
 function PopoverTrigger({ children, ...props }) {
   const { open, setOpen, triggerId, contentId } = usePopoverContext();
-  return /* @__PURE__ */ jsx16(
+  return /* @__PURE__ */ jsx17(
     "button",
     {
       type: "button",
@@ -961,9 +1041,10 @@ function PopoverTrigger({ children, ...props }) {
 }
 function PopoverContent({ className, children, ...props }) {
   const { open, setOpen, contentId, triggerId } = usePopoverContext();
+  const isMobile = useIsMobile();
   const ref = useRef4(null);
-  useEffect4(() => {
-    if (!open) return;
+  useEffect5(() => {
+    if (!open || isMobile) return;
     const handler = (e) => {
       const el = ref.current;
       const trigger = document.getElementById(triggerId);
@@ -980,9 +1061,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__ */ jsx16(
+  if (isMobile) {
+    return /* @__PURE__ */ jsx17(BottomSheet, { open, onClose: () => setOpen(false), children });
+  }
+  return /* @__PURE__ */ jsx17(
     "div",
     {
       ref,
@@ -1006,7 +1090,7 @@ import {
   useContext as useContext6,
   useState as useState6
 } from "react";
-import { jsx as jsx17 } from "react/jsx-runtime";
+import { jsx as jsx18 } from "react/jsx-runtime";
 var TabsContext = createContext6(null);
 function useTabsContext() {
   const ctx = useContext6(TabsContext);
@@ -1029,10 +1113,10 @@ function Tabs({
     },
     [controlledValue, onValueChange]
   );
-  return /* @__PURE__ */ jsx17(TabsContext.Provider, { value: { value, setValue }, children: /* @__PURE__ */ jsx17("div", { className, ...props }) });
+  return /* @__PURE__ */ jsx18(TabsContext.Provider, { value: { value, setValue }, children: /* @__PURE__ */ jsx18("div", { className, ...props }) });
 }
 function TabsList({ className, ...props }) {
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(
     "div",
     {
       role: "tablist",
@@ -1045,7 +1129,7 @@ function TabsTrigger({ value, className, ...props }) {
   const { value: activeValue, setValue } = useTabsContext();
   const isActive = value === activeValue;
   const panelId = `tabpanel-${value}`;
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(
     "button",
     {
       type: "button",
@@ -1066,7 +1150,7 @@ function TabsTrigger({ value, className, ...props }) {
 function TabsContent({ value, className, ...props }) {
   const { value: activeValue } = useTabsContext();
   if (value !== activeValue) return null;
-  return /* @__PURE__ */ jsx17(
+  return /* @__PURE__ */ jsx18(
     "div",
     {
       role: "tabpanel",
@@ -1079,10 +1163,10 @@ function TabsContent({ value, className, ...props }) {
 
 // src/primitives/scroll-area.tsx
 import { forwardRef as forwardRef13 } from "react";
-import { jsx as jsx18 } from "react/jsx-runtime";
+import { jsx as jsx19 } from "react/jsx-runtime";
 var ScrollArea = forwardRef13(
   ({ className, ...props }, ref) => {
-    return /* @__PURE__ */ jsx18(
+    return /* @__PURE__ */ jsx19(
       "div",
       {
         ref,
@@ -1098,29 +1182,9 @@ var ScrollArea = forwardRef13(
 ScrollArea.displayName = "ScrollArea";
 
 // src/primitives/floating-panel.tsx
-import { useRef as useRef5, useState as useState7, useCallback as useCallback6, useEffect as useEffect5 } from "react";
-import { X, Minimize2, Maximize2, GripHorizontal } from "lucide-react";
-
-// src/hooks/use-is-mobile.ts
-import { useSyncExternalStore } from "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 useSyncExternalStore(subscribe, getSnapshot, getServerSnapshot);
-}
-
-// src/primitives/floating-panel.tsx
-import { jsx as jsx19, jsxs as jsxs5 } from "react/jsx-runtime";
+import { useRef as useRef5, useState as useState7, useCallback as useCallback6, useEffect as useEffect6 } from "react";
+import { X as X2, Minimize2, Maximize2, GripHorizontal } from "lucide-react";
+import { jsx as jsx20, jsxs as jsxs6 } from "react/jsx-runtime";
 function FloatingPanel({
   title,
   onClose,
@@ -1150,7 +1214,7 @@ function FloatingPanel({
     resizing.current = true;
     offset.current = { x: e.clientX, y: e.clientY };
   }, []);
-  useEffect5(() => {
+  useEffect6(() => {
     const onMouseMove = (e) => {
       if (dragging.current) setPos({ x: e.clientX - offset.current.x, y: e.clientY - offset.current.y });
       if (resizing.current) {
@@ -1172,7 +1236,7 @@ function FloatingPanel({
     };
   }, [minWidth, minHeight]);
   if (isMobile) {
-    return /* @__PURE__ */ jsxs5(
+    return /* @__PURE__ */ jsxs6(
       "div",
       {
         className: cn(
@@ -1181,33 +1245,33 @@ function FloatingPanel({
         ),
         style: { maxHeight: "60dvh" },
         children: [
-          /* @__PURE__ */ jsxs5("div", { className: "flex items-center justify-between gap-2 px-3 py-2 border-b border-border shrink-0 bg-surface", children: [
-            /* @__PURE__ */ jsx19("span", { className: "text-[11px] font-medium truncate", children: title }),
-            /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-1 shrink-0", children: [
-              /* @__PURE__ */ jsx19(
+          /* @__PURE__ */ jsxs6("div", { className: "flex items-center justify-between gap-2 px-3 py-2 border-b border-border shrink-0 bg-surface", children: [
+            /* @__PURE__ */ jsx20("span", { className: "text-[11px] font-medium truncate", children: title }),
+            /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-1 shrink-0", children: [
+              /* @__PURE__ */ jsx20(
                 "button",
                 {
                   onClick: () => setMinimized(!minimized),
                   className: "p-0.5 rounded hover:bg-surface-hover text-foreground-muted transition-colors",
-                  children: minimized ? /* @__PURE__ */ jsx19(Maximize2, { size: 12 }) : /* @__PURE__ */ jsx19(Minimize2, { size: 12 })
+                  children: minimized ? /* @__PURE__ */ jsx20(Maximize2, { size: 12 }) : /* @__PURE__ */ jsx20(Minimize2, { size: 12 })
                 }
               ),
-              /* @__PURE__ */ jsx19(
+              /* @__PURE__ */ jsx20(
                 "button",
                 {
                   onClick: onClose,
                   className: "p-0.5 rounded hover:bg-danger/20 text-foreground-muted hover:text-danger transition-colors",
-                  children: /* @__PURE__ */ jsx19(X, { size: 12 })
+                  children: /* @__PURE__ */ jsx20(X2, { size: 12 })
                 }
               )
             ] })
           ] }),
-          !minimized && /* @__PURE__ */ jsx19("div", { className: "flex-1 min-h-0 overflow-y-auto", children })
+          !minimized && /* @__PURE__ */ jsx20("div", { className: "flex-1 min-h-0 overflow-y-auto", children })
         ]
       }
     );
   }
-  return /* @__PURE__ */ jsxs5(
+  return /* @__PURE__ */ jsxs6(
     "div",
     {
       className: cn(
@@ -1216,42 +1280,42 @@ function FloatingPanel({
       ),
       style: { left: pos.x, top: pos.y, width: minimized ? 280 : size.w, height: minimized ? "auto" : size.h },
       children: [
-        /* @__PURE__ */ jsxs5(
+        /* @__PURE__ */ jsxs6(
           "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__ */ jsxs5("div", { className: "flex items-center gap-2 min-w-0", children: [
-                /* @__PURE__ */ jsx19(GripHorizontal, { size: 12, className: "text-foreground-subtle shrink-0" }),
-                /* @__PURE__ */ jsx19("span", { className: "text-[11px] font-medium truncate", children: title })
+              /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-2 min-w-0", children: [
+                /* @__PURE__ */ jsx20(GripHorizontal, { size: 12, className: "text-foreground-subtle shrink-0" }),
+                /* @__PURE__ */ jsx20("span", { className: "text-[11px] font-medium truncate", children: title })
               ] }),
-              /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-1 shrink-0", children: [
-                /* @__PURE__ */ jsx19(
+              /* @__PURE__ */ jsxs6("div", { className: "flex items-center gap-1 shrink-0", children: [
+                /* @__PURE__ */ jsx20(
                   "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__ */ jsx19(Maximize2, { size: 12 }) : /* @__PURE__ */ jsx19(Minimize2, { size: 12 })
+                    children: minimized ? /* @__PURE__ */ jsx20(Maximize2, { size: 12 }) : /* @__PURE__ */ jsx20(Minimize2, { size: 12 })
                   }
                 ),
-                /* @__PURE__ */ jsx19(
+                /* @__PURE__ */ jsx20(
                   "button",
                   {
                     onClick: onClose,
                     className: "p-0.5 rounded hover:bg-danger/20 text-foreground-muted hover:text-danger transition-colors",
                     title: "Close",
-                    children: /* @__PURE__ */ jsx19(X, { size: 12 })
+                    children: /* @__PURE__ */ jsx20(X2, { size: 12 })
                   }
                 )
               ] })
             ]
           }
         ),
-        !minimized && /* @__PURE__ */ jsxs5("div", { className: "flex-1 min-h-0 overflow-y-auto relative", children: [
+        !minimized && /* @__PURE__ */ jsxs6("div", { className: "flex-1 min-h-0 overflow-y-auto relative", children: [
           children,
-          /* @__PURE__ */ jsx19(
+          /* @__PURE__ */ jsx20(
             "div",
             {
               onMouseDown: onResizeStart,
@@ -1266,11 +1330,11 @@ function FloatingPanel({
 }
 
 // src/primitives/mobile-drawer.tsx
-import { useEffect as useEffect6, useRef as useRef6 } from "react";
-import { Fragment, jsx as jsx20, jsxs as jsxs6 } from "react/jsx-runtime";
+import { useEffect as useEffect7, useRef as useRef6 } from "react";
+import { Fragment as Fragment2, jsx as jsx21, jsxs as jsxs7 } from "react/jsx-runtime";
 function MobileDrawer({ open, onClose, children, className, width = "w-64" }) {
   const drawerRef = useRef6(null);
-  useEffect6(() => {
+  useEffect7(() => {
     if (!open) return;
     const handleKeyDown = (e) => {
       if (e.key === "Escape") onClose();
@@ -1282,8 +1346,8 @@ function MobileDrawer({ open, onClose, children, className, width = "w-64" }) {
       document.body.style.overflow = "";
     };
   }, [open, onClose]);
-  return /* @__PURE__ */ jsxs6(Fragment, { children: [
-    /* @__PURE__ */ jsx20(
+  return /* @__PURE__ */ jsxs7(Fragment2, { children: [
+    /* @__PURE__ */ jsx21(
       "div",
       {
         className: cn(
@@ -1294,7 +1358,7 @@ function MobileDrawer({ open, onClose, children, className, width = "w-64" }) {
         "aria-hidden": "true"
       }
     ),
-    /* @__PURE__ */ jsx20(
+    /* @__PURE__ */ jsx21(
       "div",
       {
         ref: drawerRef,
@@ -1312,66 +1376,6 @@ function MobileDrawer({ open, onClose, children, className, width = "w-64" }) {
   ] });
 }
 
-// src/primitives/bottom-sheet.tsx
-import { useEffect as useEffect7 } from "react";
-import { X as X2 } from "lucide-react";
-import { Fragment as Fragment2, jsx as jsx21, jsxs as jsxs7 } from "react/jsx-runtime";
-function BottomSheet({ open, onClose, title, children, className }) {
-  useEffect7(() => {
-    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__ */ jsxs7(Fragment2, { children: [
-    /* @__PURE__ */ jsx21(
-      "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__ */ jsxs7(
-      "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__ */ jsx21("div", { className: "flex justify-center pt-2 pb-1", children: /* @__PURE__ */ jsx21("div", { className: "h-1 w-8 rounded-full bg-foreground-subtle/30" }) }),
-          title && /* @__PURE__ */ jsxs7("div", { className: "flex items-center justify-between px-4 pb-2", children: [
-            /* @__PURE__ */ jsx21("span", { className: "text-sm font-medium text-foreground", children: title }),
-            /* @__PURE__ */ jsx21(
-              "button",
-              {
-                onClick: onClose,
-                className: "p-1 rounded-md hover:bg-surface-hover text-foreground-muted transition-colors",
-                children: /* @__PURE__ */ jsx21(X2, { className: "h-4 w-4" })
-              }
-            )
-          ] }),
-          /* @__PURE__ */ jsx21("div", { className: "flex-1 overflow-y-auto px-4 pb-4", children })
-        ]
-      }
-    )
-  ] });
-}
-
 // src/composites/status-badge.tsx
 import { jsx as jsx22, jsxs as jsxs8 } from "react/jsx-runtime";
 var statusConfig = {
@@ -1627,12 +1631,79 @@ function CodeBlock({ children, maxHeight = 300, className }) {
 }
 
 // src/composites/filter-bar.tsx
-import { Search } from "lucide-react";
-import { jsx as jsx32 } from "react/jsx-runtime";
+import { useState as useState9 } from "react";
+import { Search, SlidersHorizontal } from "lucide-react";
+import { Fragment as Fragment3, jsx as jsx32, jsxs as jsxs17 } from "react/jsx-runtime";
 function FilterBar({ filters, values, onChange, className }) {
+  const isMobile = useIsMobile();
+  const [sheetOpen, setSheetOpen] = useState9(false);
   const handleChange = (key, value) => {
     onChange({ ...values, [key]: value });
   };
+  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__ */ jsxs17("div", { className: cn("flex items-center gap-2", className), children: [
+      searchFilter && /* @__PURE__ */ jsx32(
+        Input,
+        {
+          placeholder: searchFilter.placeholder ?? "Search...",
+          value: values[searchFilter.key] ?? "",
+          onChange: (e) => handleChange(searchFilter.key, e.target.value),
+          leftSlot: /* @__PURE__ */ jsx32(Search, { className: "h-3 w-3 text-foreground-subtle" }),
+          className: "flex-1"
+        }
+      ),
+      hasNonSearchFilters && /* @__PURE__ */ jsxs17(Fragment3, { children: [
+        /* @__PURE__ */ jsxs17(
+          "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__ */ jsx32(SlidersHorizontal, { className: "h-3.5 w-3.5" }),
+              "Filters",
+              activeCount > 0 && /* @__PURE__ */ jsx32(Badge, { variant: "info", className: "ml-1 text-[10px] px-1 py-0", children: activeCount })
+            ]
+          }
+        ),
+        /* @__PURE__ */ jsx32(BottomSheet, { open: sheetOpen, onClose: () => setSheetOpen(false), title: "Filters", children: /* @__PURE__ */ jsx32("div", { className: "flex flex-col gap-3", children: filters.filter((f) => f.type !== "search").map((filter) => {
+          switch (filter.type) {
+            case "select":
+              return /* @__PURE__ */ jsxs17("div", { children: [
+                /* @__PURE__ */ jsx32("label", { className: "text-xs text-foreground-muted mb-1 block", children: filter.label }),
+                /* @__PURE__ */ jsx32(
+                  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__ */ jsx32("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__ */ jsx32(
+                  "button",
+                  {
+                    type: "button",
+                    onClick: () => handleChange(filter.key, isActive ? void 0 : option.value),
+                    children: /* @__PURE__ */ jsx32(Badge, { variant: isActive ? "info" : "default", className: "cursor-pointer", children: option.label })
+                  },
+                  option.value
+                );
+              }) }, filter.key);
+            default:
+              return null;
+          }
+        }) }) })
+      ] })
+    ] });
+  }
   return /* @__PURE__ */ jsx32("div", { className: cn("flex items-center gap-2 flex-wrap", className), children: filters.map((filter) => {
     switch (filter.type) {
       case "search":
@@ -1666,18 +1737,8 @@ function FilterBar({ filters, values, onChange, className }) {
             "button",
             {
               type: "button",
-              onClick: () => handleChange(
-                filter.key,
-                isActive ? void 0 : option.value
-              ),
-              children: /* @__PURE__ */ jsx32(
-                Badge,
-                {
-                  variant: isActive ? "info" : "default",
-                  className: "cursor-pointer",
-                  children: option.label
-                }
-              )
+              onClick: () => handleChange(filter.key, isActive ? void 0 : option.value),
+              children: /* @__PURE__ */ jsx32(Badge, { variant: isActive ? "info" : "default", className: "cursor-pointer", children: option.label })
             },
             option.value
           );
@@ -1689,7 +1750,7 @@ function FilterBar({ filters, values, onChange, className }) {
 }
 
 // src/composites/app-shell/sidebar-item.tsx
-import { jsx as jsx33, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs18 } from "react/jsx-runtime";
 function SidebarItem({
   label,
   icon: Icon,
@@ -1698,7 +1759,7 @@ function SidebarItem({
   active = false,
   className
 }) {
-  return /* @__PURE__ */ jsxs17(
+  return /* @__PURE__ */ jsxs18(
     "a",
     {
       href,
@@ -1717,9 +1778,9 @@ function SidebarItem({
 }
 
 // src/composites/app-shell/sidebar.tsx
-import { jsx as jsx34, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs19 } from "react/jsx-runtime";
 function Sidebar({ logo, sections, footer, onNavigate, className }) {
-  return /* @__PURE__ */ jsxs18(
+  return /* @__PURE__ */ jsxs19(
     "nav",
     {
       className: cn(
@@ -1728,11 +1789,11 @@ function Sidebar({ logo, sections, footer, onNavigate, className }) {
       ),
       children: [
         logo && /* @__PURE__ */ jsx34("div", { className: "px-3 py-2 shrink-0", children: logo }),
-        /* @__PURE__ */ jsx34("div", { className: "flex-1 overflow-auto px-1 py-1", children: sections.map((section, sectionIndex) => /* @__PURE__ */ jsxs18("div", { className: cn(sectionIndex > 0 ? "mt-3" : ""), children: [
+        /* @__PURE__ */ jsx34("div", { className: "flex-1 overflow-auto px-1 py-1", children: sections.map((section, sectionIndex) => /* @__PURE__ */ jsxs19("div", { className: cn(sectionIndex > 0 ? "mt-3" : ""), children: [
           section.label && /* @__PURE__ */ jsx34("span", { className: "text-[10px] text-foreground-disabled uppercase tracking-wider px-2 mb-1 block", children: section.label }),
           /* @__PURE__ */ jsx34("div", { className: "flex flex-col gap-0.5", onClick: onNavigate, children: section.items.map((item) => /* @__PURE__ */ jsx34(SidebarItem, { ...item }, item.href)) })
         ] }, sectionIndex)) }),
-        footer && footer.length > 0 && /* @__PURE__ */ jsxs18("div", { className: "shrink-0 px-1 pb-1", children: [
+        footer && footer.length > 0 && /* @__PURE__ */ jsxs19("div", { className: "shrink-0 px-1 pb-1", children: [
           /* @__PURE__ */ jsx34(Separator, { className: "mb-1" }),
           /* @__PURE__ */ jsx34("div", { className: "flex flex-col gap-0.5", onClick: onNavigate, children: footer.map((item) => /* @__PURE__ */ jsx34(SidebarItem, { ...item }, item.href)) })
         ] })
@@ -1742,13 +1803,13 @@ function Sidebar({ logo, sections, footer, onNavigate, className }) {
 }
 
 // src/composites/app-shell/app-shell.tsx
-import { useState as useState9 } from "react";
+import { useState as useState10 } from "react";
 import { ChevronRight, Menu } from "lucide-react";
-import { jsx as jsx35, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs20 } from "react/jsx-runtime";
 function AppShell({ sidebar, header, mobileLogo, mobileActions, children, className }) {
   const isMobile = useIsMobile();
-  const [drawerOpen, setDrawerOpen] = useState9(false);
-  return /* @__PURE__ */ jsxs19("div", { className: cn("flex h-screen", className), children: [
+  const [drawerOpen, setDrawerOpen] = useState10(false);
+  return /* @__PURE__ */ jsxs20("div", { className: cn("flex h-screen", className), children: [
     !isMobile && /* @__PURE__ */ jsx35(Sidebar, { ...sidebar, className: cn("w-44", sidebar.className) }),
     isMobile && /* @__PURE__ */ jsx35(MobileDrawer, { open: drawerOpen, onClose: () => setDrawerOpen(false), width: "w-64", children: /* @__PURE__ */ jsx35(
       Sidebar,
@@ -1758,8 +1819,8 @@ function AppShell({ sidebar, header, mobileLogo, mobileActions, children, classN
         className: "w-full border-r-0"
       }
     ) }),
-    /* @__PURE__ */ jsxs19("div", { className: "flex flex-1 flex-col min-w-0", children: [
-      isMobile && /* @__PURE__ */ jsxs19("header", { className: "flex items-center h-12 border-b border-border px-3 shrink-0 bg-surface/80 backdrop-blur-sm", children: [
+    /* @__PURE__ */ jsxs20("div", { className: "flex flex-1 flex-col min-w-0", children: [
+      isMobile && /* @__PURE__ */ jsxs20("header", { className: "flex items-center h-12 border-b border-border px-3 shrink-0 bg-surface/80 backdrop-blur-sm", children: [
         /* @__PURE__ */ jsx35(
           "button",
           {
@@ -1772,10 +1833,10 @@ function AppShell({ sidebar, header, mobileLogo, mobileActions, children, classN
         mobileLogo && /* @__PURE__ */ jsx35("div", { className: "flex-1 flex justify-center", children: mobileLogo }),
         mobileActions && /* @__PURE__ */ jsx35("div", { className: "shrink-0", children: mobileActions })
       ] }),
-      !isMobile && header && /* @__PURE__ */ jsxs19("header", { className: "flex items-center h-10 border-b border-border px-4 shrink-0", children: [
+      !isMobile && header && /* @__PURE__ */ jsxs20("header", { className: "flex items-center h-10 border-b border-border px-4 shrink-0", children: [
         header.breadcrumbs && header.breadcrumbs.length > 0 && /* @__PURE__ */ jsx35("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__ */ jsxs19("span", { className: "flex items-center gap-1", children: [
+          return /* @__PURE__ */ jsxs20("span", { className: "flex items-center gap-1", children: [
             index > 0 && /* @__PURE__ */ jsx35(ChevronRight, { className: "h-3 w-3 text-foreground-subtle shrink-0" }),
             crumb.href && !isLast ? /* @__PURE__ */ jsx35(
               "a",
@@ -1807,7 +1868,7 @@ import {
 
 // src/composites/data-table/data-table-header.tsx
 import { ArrowUpDown, ArrowUp, ArrowDown } from "lucide-react";
-import { jsx as jsx36, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs21 } from "react/jsx-runtime";
 function DataTableHeader({
   headerGroups,
   onSortingChange,
@@ -1843,7 +1904,7 @@ function HeaderCell({ header, sortable, flexRender: render }) {
         sortable && "cursor-pointer select-none"
       ),
       onClick: sortable ? header.column.getToggleSortingHandler() : void 0,
-      children: /* @__PURE__ */ jsxs20("span", { className: "inline-flex items-center gap-1", children: [
+      children: /* @__PURE__ */ jsxs21("span", { className: "inline-flex items-center gap-1", children: [
         header.isPlaceholder ? null : render(header.column.columnDef.header, header.getContext()),
         sortable && /* @__PURE__ */ jsx36(SortIcon, { className: "h-3 w-3" })
       ] })
@@ -1853,7 +1914,7 @@ function HeaderCell({ header, sortable, flexRender: render }) {
 
 // src/composites/data-table/data-table-row.tsx
 import { MoreHorizontal } from "lucide-react";
-import { jsx as jsx37, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs22 } from "react/jsx-runtime";
 function DataTableRow({
   row,
   onRowClick,
@@ -1861,7 +1922,7 @@ function DataTableRow({
   flexRender: render
 }) {
   const actions = rowActions ? rowActions(row.original) : [];
-  return /* @__PURE__ */ jsxs21(
+  return /* @__PURE__ */ jsxs22(
     "tr",
     {
       className: cn(
@@ -1872,7 +1933,7 @@ function DataTableRow({
       onClick: onRowClick ? () => onRowClick(row.original) : void 0,
       children: [
         row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx37(DataTableCell, { cell, flexRender: render }, cell.id)),
-        actions.length > 0 && /* @__PURE__ */ jsx37("td", { className: "px-2 py-1.5 w-8", children: /* @__PURE__ */ jsxs21(Dropdown, { children: [
+        actions.length > 0 && /* @__PURE__ */ jsx37("td", { className: "px-2 py-1.5 w-8", children: /* @__PURE__ */ jsxs22(Dropdown, { children: [
           /* @__PURE__ */ jsx37(
             DropdownTrigger,
             {
@@ -1905,7 +1966,7 @@ function DataTableCell({ cell, flexRender: render }) {
 
 // src/composites/data-table/data-table-pagination.tsx
 import { ChevronLeft, ChevronRight as ChevronRight2 } from "lucide-react";
-import { jsx as jsx38, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs23 } from "react/jsx-runtime";
 var PAGE_SIZE_OPTIONS = [
   { value: "10", label: "10" },
   { value: "25", label: "25" },
@@ -1920,8 +1981,8 @@ function DataTablePagination({
 }) {
   const totalPages = Math.max(1, Math.ceil(total / pageSize));
   const currentPage = page + 1;
-  return /* @__PURE__ */ jsxs22("div", { className: "flex items-center justify-between px-2 py-2 text-xs text-foreground-muted", children: [
-    /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-2", children: [
+  return /* @__PURE__ */ jsxs23("div", { className: "flex items-center justify-between px-2 py-2 text-xs text-foreground-muted", children: [
+    /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-2", children: [
       /* @__PURE__ */ jsx38("span", { children: "Rows per page" }),
       /* @__PURE__ */ jsx38("div", { className: "w-16", children: /* @__PURE__ */ jsx38(
         Select,
@@ -1935,8 +1996,8 @@ function DataTablePagination({
         }
       ) })
     ] }),
-    /* @__PURE__ */ jsxs22("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsxs22("span", { children: [
+    /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs23("span", { children: [
         "Page ",
         currentPage,
         " of ",
@@ -1969,7 +2030,7 @@ function DataTablePagination({
 }
 
 // src/composites/data-table/data-table.tsx
-import { Fragment as Fragment3, jsx as jsx39, jsxs as jsxs23 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx39, jsxs as jsxs24 } from "react/jsx-runtime";
 function DataTable({
   data,
   columns: userColumns,
@@ -1986,7 +2047,8 @@ function DataTable({
   selectable = false,
   compact = true,
   stickyHeader = false,
-  className
+  className,
+  mobileMode = "scroll"
 }) {
   const columns = useMemo2(() => {
     if (!selectable) return userColumns;
@@ -2038,8 +2100,70 @@ function DataTable({
     pageCount: pagination ? Math.ceil(pagination.total / pagination.pageSize) : void 0
   });
   const hasActions = !!rowActions;
-  return /* @__PURE__ */ jsxs23("div", { className: cn("overflow-auto", className), children: [
-    /* @__PURE__ */ jsxs23("table", { className: "w-full border-collapse", children: [
+  const isMobile = useIsMobile();
+  const showCards = isMobile && mobileMode === "cards";
+  if (showCards) {
+    const rows = table.getRowModel().rows;
+    if (loading) {
+      return /* @__PURE__ */ jsx39("div", { className: cn("space-y-2", className), children: Array.from({ length: 3 }).map((_, i) => /* @__PURE__ */ jsxs24("div", { className: "rounded-lg border border-border bg-surface p-3 space-y-2", children: [
+        /* @__PURE__ */ jsx39(Skeleton, { className: "h-3 w-3/4" }),
+        /* @__PURE__ */ jsx39(Skeleton, { className: "h-3 w-1/2" }),
+        /* @__PURE__ */ jsx39(Skeleton, { className: "h-3 w-2/3" })
+      ] }, i)) });
+    }
+    if (rows.length === 0) {
+      return /* @__PURE__ */ jsx39("div", { className: cn("text-center py-8 text-xs text-foreground-muted", className), children: emptyState ?? "No data" });
+    }
+    return /* @__PURE__ */ jsxs24("div", { className: cn("space-y-2", className), children: [
+      rows.map((row) => /* @__PURE__ */ jsxs24(
+        "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__ */ jsxs24("div", { className: "flex items-baseline justify-between gap-2 text-xs", children: [
+                /* @__PURE__ */ jsx39("span", { className: "text-foreground-muted shrink-0", children: label }),
+                /* @__PURE__ */ jsx39("span", { className: "text-foreground text-right truncate", children: flexRender(cell.column.columnDef.cell, cell.getContext()) })
+              ] }, cell.id);
+            }),
+            rowActions && /* @__PURE__ */ jsx39("div", { className: "flex items-center gap-1 pt-1 border-t border-border mt-1.5", children: rowActions(row.original).map((action, i) => /* @__PURE__ */ jsx39(
+              "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__ */ jsx39(
+        DataTablePagination,
+        {
+          page: pagination.page,
+          pageSize: pagination.pageSize,
+          total: pagination.total,
+          onPaginationChange
+        }
+      )
+    ] });
+  }
+  return /* @__PURE__ */ jsxs24("div", { className: cn("overflow-x-auto", className), children: [
+    /* @__PURE__ */ jsxs24("table", { className: "w-full border-collapse", children: [
       /* @__PURE__ */ jsx39(
         DataTableHeader,
         {
@@ -2079,11 +2203,11 @@ function DataTable({
   ] });
 }
 function LoadingRows({ colSpan, compact }) {
-  return /* @__PURE__ */ jsx39(Fragment3, { children: Array.from({ length: 5 }).map((_, rowIdx) => /* @__PURE__ */ jsx39("tr", { className: compact ? "h-7" : "h-9", children: Array.from({ length: colSpan }).map((_2, colIdx) => /* @__PURE__ */ jsx39("td", { className: "px-2 py-1.5", children: /* @__PURE__ */ jsx39(Skeleton, { className: "h-3 w-full" }) }, colIdx)) }, rowIdx)) });
+  return /* @__PURE__ */ jsx39(Fragment4, { children: Array.from({ length: 5 }).map((_, rowIdx) => /* @__PURE__ */ jsx39("tr", { className: compact ? "h-7" : "h-9", children: Array.from({ length: colSpan }).map((_2, colIdx) => /* @__PURE__ */ jsx39("td", { className: "px-2 py-1.5", children: /* @__PURE__ */ jsx39(Skeleton, { className: "h-3 w-full" }) }, colIdx)) }, rowIdx)) });
 }
 
 // src/composites/device-card.tsx
-import { jsx as jsx40, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs25 } from "react/jsx-runtime";
 var STATUS_COLORS = {
   online: "bg-success",
   offline: "bg-danger",
@@ -2102,7 +2226,7 @@ function DeviceCard({
   className
 }) {
   const isOffline = status === "offline";
-  return /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs25(
     "div",
     {
       onClick,
@@ -2114,7 +2238,7 @@ function DeviceCard({
         className
       ),
       children: [
-        /* @__PURE__ */ jsxs24("div", { className: "flex items-center justify-between mb-2", children: [
+        /* @__PURE__ */ jsxs25("div", { className: "flex items-center justify-between mb-2", children: [
           /* @__PURE__ */ jsx40("span", { className: "text-sm font-medium truncate", children: title }),
           status && /* @__PURE__ */ jsx40("span", { className: cn("h-2 w-2 rounded-full shrink-0", STATUS_COLORS[status]) })
         ] }),
@@ -2125,7 +2249,7 @@ function DeviceCard({
             selected ? "bg-primary/20" : "bg-surface-hover",
             badge.onClick && "hover:opacity-80 transition-opacity cursor-pointer"
           );
-          return badge.onClick ? /* @__PURE__ */ jsxs24(
+          return badge.onClick ? /* @__PURE__ */ jsxs25(
             "button",
             {
               onClick: (e) => {
@@ -2139,7 +2263,7 @@ function DeviceCard({
               ]
             },
             i
-          ) : /* @__PURE__ */ jsxs24("span", { className: cls, children: [
+          ) : /* @__PURE__ */ jsxs25("span", { className: cls, children: [
             badge.icon,
             badge.label
           ] }, i);
@@ -2190,9 +2314,9 @@ function DeviceGrid({
 }
 
 // src/composites/pipeline-step.tsx
-import { useState as useState10 } from "react";
+import { useState as useState11 } from "react";
 import { ChevronRight as ChevronRight3, ChevronDown as ChevronDown2 } from "lucide-react";
-import { jsx as jsx42, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs26 } from "react/jsx-runtime";
 var ADDON_COLORS = {
   "object-detection": "border-l-blue-500",
   "motion-detection": "border-l-amber-500",
@@ -2268,7 +2392,7 @@ function PipelineStep({
   onDelete,
   readOnly = false
 }) {
-  const [expanded, setExpanded] = useState10(false);
+  const [expanded, setExpanded] = useState11(false);
   const color = borderColor(step.addonId, step.slot);
   const backends = backendsForRuntime(step.runtime, capabilities, schema);
   const rtOptions = runtimeOptions(capabilities);
@@ -2291,7 +2415,7 @@ function PipelineStep({
     if (e.target.closest(".step-config")) return;
     setExpanded((v) => !v);
   }
-  return /* @__PURE__ */ jsx42("div", { className: "space-y-2", children: /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsx42("div", { className: "space-y-2", children: /* @__PURE__ */ jsxs26(
     "div",
     {
       className: cn(
@@ -2300,12 +2424,12 @@ function PipelineStep({
         !step.enabled && "opacity-[0.45]"
       ),
       children: [
-        /* @__PURE__ */ jsxs25("div", { className: "flex items-center gap-2.5 px-3 py-2.5 cursor-pointer select-none", onClick: handleClick, children: [
+        /* @__PURE__ */ jsxs26("div", { className: "flex items-center gap-2.5 px-3 py-2.5 cursor-pointer select-none", onClick: handleClick, children: [
           /* @__PURE__ */ jsx42("span", { className: "text-foreground-subtle", children: expanded ? /* @__PURE__ */ jsx42(ChevronDown2, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx42(ChevronRight3, { className: "h-4 w-4" }) }),
-          /* @__PURE__ */ jsxs25("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ jsxs26("div", { className: "flex-1 min-w-0", children: [
             /* @__PURE__ */ jsx42("span", { className: "text-[10px] uppercase tracking-wider font-medium text-foreground-subtle/60 block leading-none", children: step.slot }),
             /* @__PURE__ */ jsx42("span", { className: "text-sm font-semibold text-foreground truncate block leading-tight", children: step.addonName }),
-            /* @__PURE__ */ jsxs25("div", { className: "flex items-center gap-1 mt-0.5 flex-wrap", children: [
+            /* @__PURE__ */ jsxs26("div", { className: "flex items-center gap-1 mt-0.5 flex-wrap", children: [
               step.inputClasses.map((c) => /* @__PURE__ */ jsx42("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__ */ jsx42("span", { className: "text-foreground-subtle/40 text-[10px]", children: "\u2192" }),
               step.outputClasses.map((c) => /* @__PURE__ */ jsx42("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))
@@ -2329,8 +2453,8 @@ function PipelineStep({
             }
           )
         ] }),
-        expanded && /* @__PURE__ */ jsxs25("div", { className: "step-config border-t border-border bg-background px-4 py-4 space-y-3", children: [
-          /* @__PURE__ */ jsxs25("div", { className: "grid grid-cols-2 gap-3", children: [
+        expanded && /* @__PURE__ */ jsxs26("div", { className: "step-config border-t border-border bg-background px-4 py-4 space-y-3", children: [
+          /* @__PURE__ */ jsxs26("div", { className: "grid grid-cols-2 gap-3", children: [
             /* @__PURE__ */ jsx42(
               ConfigSelect,
               {
@@ -2372,10 +2496,10 @@ function PipelineStep({
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs25("div", { children: [
-            /* @__PURE__ */ jsxs25("div", { className: "flex items-center justify-between mb-1", children: [
+          /* @__PURE__ */ jsxs26("div", { children: [
+            /* @__PURE__ */ jsxs26("div", { className: "flex items-center justify-between mb-1", children: [
               /* @__PURE__ */ jsx42("span", { className: "text-[10px] font-medium text-foreground-subtle uppercase tracking-wide", children: "Confidence" }),
-              /* @__PURE__ */ jsxs25("span", { className: "text-xs font-medium text-foreground tabular-nums", children: [
+              /* @__PURE__ */ jsxs26("span", { className: "text-xs font-medium text-foreground tabular-nums", children: [
                 (step.confidence * 100).toFixed(0),
                 "%"
               ] })
@@ -2400,9 +2524,9 @@ function PipelineStep({
   ) });
 }
 function ConfigSelect({ label, value, options, disabled, onChange }) {
-  return /* @__PURE__ */ jsxs25("div", { children: [
+  return /* @__PURE__ */ jsxs26("div", { children: [
     /* @__PURE__ */ jsx42("label", { className: "block text-[10px] font-medium text-foreground-subtle uppercase tracking-wide mb-1.5", children: label }),
-    /* @__PURE__ */ jsxs25(
+    /* @__PURE__ */ jsxs26(
       "select",
       {
         value,
@@ -2420,11 +2544,11 @@ function ConfigSelect({ label, value, options, disabled, onChange }) {
 
 // src/composites/pipeline-runtime-selector.tsx
 import { Cpu, Star } from "lucide-react";
-import { jsx as jsx43, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs27 } from "react/jsx-runtime";
 function PipelineRuntimeSelector({ options, value, onChange }) {
   return /* @__PURE__ */ jsx43("div", { className: "flex flex-wrap gap-2", children: options.map((opt) => {
     const active = opt.id === value;
-    return /* @__PURE__ */ jsxs26(
+    return /* @__PURE__ */ jsxs27(
       "button",
       {
         onClick: () => opt.available && onChange(opt.id),
@@ -2433,11 +2557,11 @@ function PipelineRuntimeSelector({ options, value, onChange }) {
         children: [
           /* @__PURE__ */ jsx43(Cpu, { className: "h-3.5 w-3.5 shrink-0" }),
           opt.label,
-          opt.isBest && /* @__PURE__ */ jsxs26("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: [
+          opt.isBest && /* @__PURE__ */ jsxs27("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__ */ jsx43(Star, { className: "h-2.5 w-2.5" }),
             "Best"
           ] }),
-          opt.platformScore != null && /* @__PURE__ */ jsxs26("span", { className: "text-[10px] text-foreground-subtle/60", children: [
+          opt.platformScore != null && /* @__PURE__ */ jsxs27("span", { className: "text-[10px] text-foreground-subtle/60", children: [
             "(",
             opt.platformScore,
             ")"
@@ -2456,7 +2580,7 @@ function PipelineRuntimeSelector({ options, value, onChange }) {
 }
 
 // src/composites/pipeline-builder.tsx
-import { useMemo as useMemo3, useState as useState11 } from "react";
+import { useMemo as useMemo3, useState as useState12 } from "react";
 import { Save, CopyPlus, Trash2, PlusCircle, X as X3 } from "lucide-react";
 
 // src/lib/validate-template.ts
@@ -2489,7 +2613,7 @@ function validateTemplate(steps, schema) {
 }
 
 // src/composites/pipeline-builder.tsx
-import { jsx as jsx44, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs28 } from "react/jsx-runtime";
 function buildSchemaMap(schema) {
   const map = /* @__PURE__ */ new Map();
   for (const slot of schema.slots) {
@@ -2524,11 +2648,11 @@ function PlaceholderStep({ addon, onClick }) {
       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__ */ jsxs27("div", { className: "flex items-center gap-3", children: [
+      children: /* @__PURE__ */ jsxs28("div", { className: "flex items-center gap-3", children: [
         /* @__PURE__ */ jsx44(PlusCircle, { className: "h-[18px] w-[18px] text-foreground-subtle/30 group-hover:text-primary/60 shrink-0" }),
-        /* @__PURE__ */ jsxs27("div", { className: "flex-1 min-w-0", children: [
+        /* @__PURE__ */ jsxs28("div", { className: "flex-1 min-w-0", children: [
           /* @__PURE__ */ jsx44("span", { className: "text-[13px] font-medium text-foreground-subtle/50 group-hover:text-foreground-subtle block truncate", children: addon.name }),
-          /* @__PURE__ */ jsxs27("div", { className: "flex items-center gap-1 mt-0.5 flex-wrap", children: [
+          /* @__PURE__ */ jsxs28("div", { className: "flex items-center gap-1 mt-0.5 flex-wrap", children: [
             addon.inputClasses.map((c) => /* @__PURE__ */ jsx44("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__ */ jsx44("span", { className: "text-foreground-subtle/25 text-[10px]", children: "\u2192" }),
             addon.outputClasses.map((c) => /* @__PURE__ */ jsx44("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))
@@ -2554,7 +2678,7 @@ function PipelineBuilder({
 }) {
   const excluded = useMemo3(() => new Set(excludeAddons), [excludeAddons]);
   const schemaMap = useMemo3(() => buildSchemaMap(schema), [schema]);
-  const [warnings, setWarnings] = useState11([]);
+  const [warnings, setWarnings] = useState12([]);
   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");
@@ -2643,7 +2767,7 @@ function PipelineBuilder({
   }
   function renderStep(step) {
     const childPlaceholders = getChildPlaceholders(step);
-    return /* @__PURE__ */ jsxs27("div", { className: "space-y-1.5", children: [
+    return /* @__PURE__ */ jsxs28("div", { className: "space-y-1.5", children: [
       /* @__PURE__ */ jsx44(
         PipelineStep,
         {
@@ -2656,11 +2780,11 @@ function PipelineBuilder({
           readOnly
         }
       ),
-      (step.children.length > 0 || childPlaceholders.length > 0) && /* @__PURE__ */ jsxs27("div", { className: "ml-6 pl-4 border-l-2 border-dashed border-border/40 space-y-1.5", children: [
+      (step.children.length > 0 || childPlaceholders.length > 0) && /* @__PURE__ */ jsxs28("div", { className: "ml-6 pl-4 border-l-2 border-dashed border-border/40 space-y-1.5", children: [
         /* @__PURE__ */ jsx44("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__ */ jsxs27("div", { className: "space-y-1.5", children: [
+          return /* @__PURE__ */ jsxs28("div", { className: "space-y-1.5", children: [
             /* @__PURE__ */ jsx44(
               PipelineStep,
               {
@@ -2684,7 +2808,7 @@ function PipelineBuilder({
                 readOnly
               }
             ),
-            (child.children.length > 0 || childChildPlaceholders.length > 0) && /* @__PURE__ */ jsxs27("div", { className: "ml-6 pl-4 border-l-2 border-dashed border-border/30 space-y-1.5", children: [
+            (child.children.length > 0 || childChildPlaceholders.length > 0) && /* @__PURE__ */ jsxs28("div", { className: "ml-6 pl-4 border-l-2 border-dashed border-border/30 space-y-1.5", children: [
               /* @__PURE__ */ jsx44("span", { className: "text-[10px] font-semibold uppercase tracking-widest text-foreground-subtle/30", children: "Slot: Recognizer" }),
               child.children.map((grandchild) => /* @__PURE__ */ jsx44(
                 PipelineStep,
@@ -2745,9 +2869,9 @@ function PipelineBuilder({
     ] }, step.addonId);
   }
   const rootSlots = schema.slots.filter((s) => s.parentSlot === null).sort((a, b) => a.priority - b.priority);
-  return /* @__PURE__ */ jsxs27("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsx44("div", { className: "rounded-xl border border-border bg-surface p-3", children: /* @__PURE__ */ jsxs27("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx44("div", { className: "relative flex-1 min-w-0", children: /* @__PURE__ */ jsxs27(
+  return /* @__PURE__ */ jsxs28("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ jsx44("div", { className: "rounded-xl border border-border bg-surface p-3", children: /* @__PURE__ */ jsxs28("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx44("div", { className: "relative flex-1 min-w-0", children: /* @__PURE__ */ jsxs28(
         "select",
         {
           value: selectedTemplateId ?? "",
@@ -2800,12 +2924,12 @@ function PipelineBuilder({
         }
       )
     ] }) }),
-    warnings.length > 0 && /* @__PURE__ */ jsxs27("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__ */ jsxs27("div", { className: "flex items-center justify-between", children: [
+    warnings.length > 0 && /* @__PURE__ */ jsxs28("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__ */ jsxs28("div", { className: "flex items-center justify-between", children: [
         /* @__PURE__ */ jsx44("span", { className: "font-medium", children: "Template loaded with warnings:" }),
         /* @__PURE__ */ jsx44("button", { onClick: () => setWarnings([]), className: "text-amber-400/60 hover:text-amber-400", children: /* @__PURE__ */ jsx44(X3, { className: "h-3.5 w-3.5" }) })
       ] }),
-      warnings.map((w, i) => /* @__PURE__ */ jsxs27("div", { children: [
+      warnings.map((w, i) => /* @__PURE__ */ jsxs28("div", { children: [
         "\u2022 ",
         w
       ] }, i))
@@ -2813,8 +2937,8 @@ 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__ */ jsxs27("div", { className: "space-y-2", children: [
-        /* @__PURE__ */ jsxs27("span", { className: "text-[10px] font-semibold uppercase tracking-widest text-foreground-subtle/50", children: [
+      return /* @__PURE__ */ jsxs28("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ jsxs28("span", { className: "text-[10px] font-semibold uppercase tracking-widest text-foreground-subtle/50", children: [
           "Slot: ",
           slot.label
         ] }),
@@ -2900,7 +3024,7 @@ function getClassColor(className, customColors) {
 
 // src/composites/detection-canvas.tsx
 import { useRef as useRef7, useEffect as useEffect8 } from "react";
-import { Fragment as Fragment4, jsx as jsx45, jsxs as jsxs28 } from "react/jsx-runtime";
+import { Fragment as Fragment5, jsx as jsx45, jsxs as jsxs29 } from "react/jsx-runtime";
 var DEFAULT_CLASS_COLORS = CLASS_COLORS;
 function DetectionCanvas({
   src,
@@ -2928,7 +3052,7 @@ function DetectionCanvas({
         className
       ),
       style: { aspectRatio: ratio },
-      children: src ? /* @__PURE__ */ jsxs28(Fragment4, { children: [
+      children: src ? /* @__PURE__ */ jsxs29(Fragment5, { children: [
         /* @__PURE__ */ jsx45("img", { src, className: "absolute inset-0 w-full h-full object-fill", alt: "" }),
         filteredDetections.map(
           (d, i) => d.mask && d.maskWidth && d.maskHeight ? /* @__PURE__ */ jsx45(
@@ -2997,13 +3121,13 @@ function BoundingBox({
   const topPct = y1 / imageHeight * 100;
   const containerRef = useRef7(null);
   const showBelow = topPct < labelHeightPx / imageHeight * 100 * 1.5;
-  const labelsElement = /* @__PURE__ */ jsxs28(
+  const labelsElement = /* @__PURE__ */ jsxs29(
     "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__ */ jsxs28(
+        /* @__PURE__ */ jsxs29(
           "span",
           {
             className: "text-[10px] px-1 rounded-sm whitespace-nowrap text-white",
@@ -3014,7 +3138,7 @@ function BoundingBox({
             ]
           }
         ),
-        detection.labelsData?.map((l, k) => /* @__PURE__ */ jsxs28(
+        detection.labelsData?.map((l, k) => /* @__PURE__ */ jsxs29(
           "span",
           {
             className: "text-[9px] font-semibold px-1 rounded-sm whitespace-nowrap text-white",
@@ -3031,7 +3155,7 @@ function BoundingBox({
       ]
     }
   );
-  return /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs29(
     "div",
     {
       ref: containerRef,
@@ -3133,13 +3257,13 @@ function ChildBoundingBox({
         const labelCount = 1 + (child.labelsData?.length ?? 0);
         const relTop = (cy1 - py1) / ph * 100;
         const showBelow = relTop < labelCount * 6;
-        return /* @__PURE__ */ jsxs28(
+        return /* @__PURE__ */ jsxs29(
           "div",
           {
             className: "absolute left-0 flex flex-col items-start gap-px",
             style: showBelow ? { top: "100%", marginTop: "1px" } : { bottom: "100%", marginBottom: "1px" },
             children: [
-              /* @__PURE__ */ jsxs28(
+              /* @__PURE__ */ jsxs29(
                 "span",
                 {
                   className: "text-[9px] px-0.5 rounded-sm whitespace-nowrap text-white",
@@ -3150,7 +3274,7 @@ function ChildBoundingBox({
                   ]
                 }
               ),
-              child.labelsData?.map((l, k) => /* @__PURE__ */ jsxs28(
+              child.labelsData?.map((l, k) => /* @__PURE__ */ jsxs29(
                 "span",
                 {
                   className: "text-[8px] font-semibold px-0.5 rounded-sm whitespace-nowrap text-white",
@@ -3173,7 +3297,7 @@ function ChildBoundingBox({
 }
 
 // src/composites/detection-result-tree.tsx
-import { jsx as jsx46, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs30 } from "react/jsx-runtime";
 function DetectionResultTree({
   detections,
   classColors,
@@ -3185,8 +3309,8 @@ function DetectionResultTree({
   if (detections.length === 0) {
     return /* @__PURE__ */ jsx46("div", { className: "text-sm text-foreground-subtle italic text-center py-4", children: "No detections" });
   }
-  return /* @__PURE__ */ jsxs29("div", { className, children: [
-    /* @__PURE__ */ jsxs29("div", { className: "text-xs font-medium text-foreground-subtle uppercase tracking-wide mb-2", children: [
+  return /* @__PURE__ */ jsxs30("div", { className, children: [
+    /* @__PURE__ */ jsxs30("div", { className: "text-xs font-medium text-foreground-subtle uppercase tracking-wide mb-2", children: [
       "Detections (",
       detections.length,
       ")"
@@ -3213,9 +3337,9 @@ function DetectionNode({
 }) {
   const color = getClassColor(detection.className, colors);
   const isVisible = !hiddenKeys?.has(path);
-  return /* @__PURE__ */ jsxs29("div", { className: `rounded-md border border-border bg-surface p-3 space-y-1 ${isVisible ? "" : "opacity-40"}`, children: [
-    /* @__PURE__ */ jsxs29("div", { className: "flex justify-between items-center", children: [
-      /* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-2", children: [
+  return /* @__PURE__ */ jsxs30("div", { className: `rounded-md border border-border bg-surface p-3 space-y-1 ${isVisible ? "" : "opacity-40"}`, children: [
+    /* @__PURE__ */ jsxs30("div", { className: "flex justify-between items-center", children: [
+      /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-2", children: [
         onToggleVisibility && /* @__PURE__ */ jsx46(
           "input",
           {
@@ -3233,7 +3357,7 @@ function DetectionNode({
           }
         ),
         /* @__PURE__ */ jsx46("span", { className: "text-sm font-medium text-foreground", children: detection.className }),
-        detection.mask && detection.maskWidth && detection.maskHeight && /* @__PURE__ */ jsxs29("span", { className: "text-[9px] font-mono px-1 py-0.5 rounded bg-primary/10 text-primary", children: [
+        detection.mask && detection.maskWidth && detection.maskHeight && /* @__PURE__ */ jsxs30("span", { className: "text-[9px] font-mono px-1 py-0.5 rounded bg-primary/10 text-primary", children: [
           "mask ",
           detection.maskWidth,
           "x",
@@ -3242,19 +3366,19 @@ function DetectionNode({
       ] }),
       /* @__PURE__ */ jsx46(ConfidenceBadge, { confidence: detection.confidence })
     ] }),
-    /* @__PURE__ */ jsxs29("div", { className: "text-[10px] text-foreground-subtle font-mono", children: [
+    /* @__PURE__ */ jsxs30("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__ */ jsx46("div", { className: "flex flex-wrap gap-1 mt-1", children: detection.labelsData.map((l, k) => /* @__PURE__ */ jsxs29(
+    detection.labelsData && detection.labelsData.length > 0 && /* @__PURE__ */ jsx46("div", { className: "flex flex-wrap gap-1 mt-1", children: detection.labelsData.map((l, k) => /* @__PURE__ */ jsxs30(
       "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__ */ jsxs29("span", { className: "opacity-60", children: [
+          /* @__PURE__ */ jsxs30("span", { className: "opacity-60", children: [
             (l.score * 100).toFixed(0),
             "%"
           ] }),
@@ -3286,8 +3410,8 @@ function ChildrenTree({
     const childPath = `${parentPath}.${j}`;
     const childColor = getClassColor(child.className, colors);
     const isVisible = !hiddenKeys?.has(childPath);
-    return /* @__PURE__ */ jsxs29("div", { className: `text-xs space-y-0.5 ${isVisible ? "" : "opacity-40"}`, children: [
-      /* @__PURE__ */ jsxs29("div", { className: "flex items-center gap-1.5", children: [
+    return /* @__PURE__ */ jsxs30("div", { className: `text-xs space-y-0.5 ${isVisible ? "" : "opacity-40"}`, children: [
+      /* @__PURE__ */ jsxs30("div", { className: "flex items-center gap-1.5", children: [
         onToggleVisibility && /* @__PURE__ */ jsx46(
           "input",
           {
@@ -3305,18 +3429,18 @@ function ChildrenTree({
           }
         ),
         /* @__PURE__ */ jsx46("span", { className: "font-medium", style: { color: childColor }, children: child.className }),
-        /* @__PURE__ */ jsxs29("span", { className: "text-foreground-subtle", children: [
+        /* @__PURE__ */ jsxs30("span", { className: "text-foreground-subtle", children: [
           (child.confidence * 100).toFixed(0),
           "%"
         ] }),
-        child.mask && child.maskWidth && child.maskHeight && /* @__PURE__ */ jsxs29("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__ */ jsxs30("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__ */ jsx46("div", { className: "flex flex-wrap gap-1 ml-5 mt-0.5", children: child.labelsData.map((l, k) => /* @__PURE__ */ jsxs29(
+      child.labelsData && child.labelsData.length > 0 && /* @__PURE__ */ jsx46("div", { className: "flex flex-wrap gap-1 ml-5 mt-0.5", children: child.labelsData.map((l, k) => /* @__PURE__ */ jsxs30(
         "span",
         {
           className: "inline-flex items-center gap-0.5 text-[9px] font-medium px-1 py-0.5 rounded-full",
@@ -3324,7 +3448,7 @@ function ChildrenTree({
           children: [
             l.label,
             " ",
-            /* @__PURE__ */ jsxs29("span", { className: "opacity-60", children: [
+            /* @__PURE__ */ jsxs30("span", { className: "opacity-60", children: [
               (l.score * 100).toFixed(0),
               "%"
             ] })
@@ -3347,30 +3471,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__ */ jsxs29("span", { className: `text-xs font-medium px-2 py-0.5 rounded-full ${level}`, children: [
+  return /* @__PURE__ */ jsxs30("span", { className: `text-xs font-medium px-2 py-0.5 rounded-full ${level}`, children: [
     (confidence * 100).toFixed(1),
     "%"
   ] });
 }
 
 // src/composites/step-timings.tsx
-import { jsx as jsx47, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs31 } from "react/jsx-runtime";
 function StepTimings({ timings, totalMs, className }) {
   const entries = Object.entries(timings);
   if (entries.length === 0 && totalMs === void 0) return null;
-  return /* @__PURE__ */ jsxs30("div", { className: `rounded-lg border border-border bg-surface p-3 space-y-2 ${className ?? ""}`, children: [
+  return /* @__PURE__ */ jsxs31("div", { className: `rounded-lg border border-border bg-surface p-3 space-y-2 ${className ?? ""}`, children: [
     /* @__PURE__ */ jsx47("div", { className: "text-xs font-medium text-foreground-subtle uppercase tracking-wide", children: "Timings" }),
-    /* @__PURE__ */ jsxs30("div", { className: "space-y-1 text-xs", children: [
-      entries.map(([step, ms]) => /* @__PURE__ */ jsxs30("div", { className: "flex justify-between", children: [
+    /* @__PURE__ */ jsxs31("div", { className: "space-y-1 text-xs", children: [
+      entries.map(([step, ms]) => /* @__PURE__ */ jsxs31("div", { className: "flex justify-between", children: [
         /* @__PURE__ */ jsx47("span", { className: "text-foreground-subtle", children: step }),
-        /* @__PURE__ */ jsxs30("span", { className: "font-mono text-foreground", children: [
+        /* @__PURE__ */ jsxs31("span", { className: "font-mono text-foreground", children: [
           ms.toFixed(1),
           "ms"
         ] })
       ] }, step)),
-      totalMs !== void 0 && /* @__PURE__ */ jsxs30("div", { className: "flex justify-between pt-1 border-t border-border font-medium text-foreground", children: [
+      totalMs !== void 0 && /* @__PURE__ */ jsxs31("div", { className: "flex justify-between pt-1 border-t border-border font-medium text-foreground", children: [
         /* @__PURE__ */ jsx47("span", { children: "Total" }),
-        /* @__PURE__ */ jsxs30("span", { className: "font-mono", children: [
+        /* @__PURE__ */ jsxs31("span", { className: "font-mono", children: [
           totalMs.toFixed(1),
           "ms"
         ] })
@@ -3380,7 +3504,7 @@ function StepTimings({ timings, totalMs, className }) {
 }
 
 // src/composites/image-selector.tsx
-import { jsx as jsx48, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs32 } from "react/jsx-runtime";
 function ImageSelector({
   images,
   selectedFilename,
@@ -3406,7 +3530,7 @@ function ImageSelector({
     };
     input.click();
   };
-  return /* @__PURE__ */ jsxs31("div", { className: `flex flex-wrap items-center gap-2 ${className ?? ""}`, children: [
+  return /* @__PURE__ */ jsxs32("div", { className: `flex flex-wrap items-center gap-2 ${className ?? ""}`, children: [
     images.map((img) => /* @__PURE__ */ jsx48(
       "button",
       {
@@ -3429,7 +3553,7 @@ function ImageSelector({
 }
 
 // src/composites/inference-config-selector.tsx
-import { jsx as jsx49, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs33 } from "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,
@@ -3449,8 +3573,8 @@ 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__ */ jsxs32("div", { className: `${containerClass} ${className ?? ""}`, children: [
-    showAgent && agents.length > 0 && /* @__PURE__ */ jsxs32("label", { className: "space-y-1", children: [
+  return /* @__PURE__ */ jsxs33("div", { className: `${containerClass} ${className ?? ""}`, children: [
+    showAgent && agents.length > 0 && /* @__PURE__ */ jsxs33("label", { className: "space-y-1", children: [
       /* @__PURE__ */ jsx49("span", { className: "text-xs font-medium text-foreground-subtle", children: "Agent" }),
       /* @__PURE__ */ jsx49(
         "select",
@@ -3458,7 +3582,7 @@ function InferenceConfigSelector({
           value: agentId,
           onChange: (e) => onAgentChange?.(e.target.value),
           className: SELECT_CLASS,
-          children: agents.map((a) => /* @__PURE__ */ jsxs32("option", { value: a.id, children: [
+          children: agents.map((a) => /* @__PURE__ */ jsxs33("option", { value: a.id, children: [
             a.name,
             " (",
             a.status,
@@ -3467,7 +3591,7 @@ function InferenceConfigSelector({
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs32("label", { className: "space-y-1", children: [
+    /* @__PURE__ */ jsxs33("label", { className: "space-y-1", children: [
       /* @__PURE__ */ jsx49("span", { className: "text-xs font-medium text-foreground-subtle", children: "Runtime" }),
       /* @__PURE__ */ jsx49(
         "select",
@@ -3475,14 +3599,14 @@ function InferenceConfigSelector({
           value: runtime,
           onChange: (e) => onRuntimeChange(e.target.value),
           className: SELECT_CLASS,
-          children: runtimes.map((r) => /* @__PURE__ */ jsxs32("option", { value: r.value, disabled: !r.available, children: [
+          children: runtimes.map((r) => /* @__PURE__ */ jsxs33("option", { value: r.value, disabled: !r.available, children: [
             r.label,
             !r.available ? " (unavailable)" : ""
           ] }, r.value))
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs32("label", { className: "space-y-1", children: [
+    /* @__PURE__ */ jsxs33("label", { className: "space-y-1", children: [
       /* @__PURE__ */ jsx49("span", { className: "text-xs font-medium text-foreground-subtle", children: "Backend" }),
       /* @__PURE__ */ jsx49(
         "select",
@@ -3490,14 +3614,14 @@ function InferenceConfigSelector({
           value: backend,
           onChange: (e) => onBackendChange(e.target.value),
           className: SELECT_CLASS,
-          children: backends.map((b) => /* @__PURE__ */ jsxs32("option", { value: b.id, disabled: !b.available, children: [
+          children: backends.map((b) => /* @__PURE__ */ jsxs33("option", { value: b.id, disabled: !b.available, children: [
             b.label,
             !b.available ? " (unavailable)" : ""
           ] }, b.id))
         }
       )
     ] }),
-    /* @__PURE__ */ jsxs32("label", { className: "space-y-1", children: [
+    /* @__PURE__ */ jsxs33("label", { className: "space-y-1", children: [
       /* @__PURE__ */ jsx49("span", { className: "text-xs font-medium text-foreground-subtle", children: "Model" }),
       /* @__PURE__ */ jsx49(
         "select",
@@ -3505,7 +3629,7 @@ function InferenceConfigSelector({
           value: modelId,
           onChange: (e) => onModelChange(e.target.value),
           className: SELECT_CLASS,
-          children: models.length === 0 ? /* @__PURE__ */ jsx49("option", { value: "", children: "No compatible models" }) : models.map((m) => /* @__PURE__ */ jsxs32("option", { value: m.id, children: [
+          children: models.length === 0 ? /* @__PURE__ */ jsx49("option", { value: "", children: "No compatible models" }) : models.map((m) => /* @__PURE__ */ jsxs33("option", { value: m.id, children: [
             m.name,
             m.downloaded ? " \u2713" : ""
           ] }, m.id))
@@ -3520,15 +3644,15 @@ import { createElement } from "react";
 import { createRoot } from "react-dom/client";
 
 // src/composites/dev-shell.tsx
-import { createContext as createContext7, useCallback as useCallback8, useContext as useContext7, useMemo as useMemo4, useState as useState13 } from "react";
+import { createContext as createContext7, useCallback as useCallback8, useContext as useContext7, useMemo as useMemo4, useState as useState14 } from "react";
 import { createTRPCClient, createWSClient, wsLink, httpLink, splitLink } from "@trpc/client";
 import superjson from "superjson";
 
 // src/composites/login-form.tsx
-import { useState as useState12 } from "react";
-import { jsx as jsx50, jsxs as jsxs33 } from "react/jsx-runtime";
+import { useState as useState13 } from "react";
+import { jsx as jsx50, jsxs as jsxs34 } from "react/jsx-runtime";
 function EyeIcon({ className }) {
-  return /* @__PURE__ */ jsxs33(
+  return /* @__PURE__ */ jsxs34(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -3547,7 +3671,7 @@ function EyeIcon({ className }) {
   );
 }
 function EyeOffIcon({ className }) {
-  return /* @__PURE__ */ jsxs33(
+  return /* @__PURE__ */ jsxs34(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -3590,11 +3714,11 @@ function LoginForm({
   error: externalError,
   className
 }) {
-  const [username, setUsername] = useState12("");
-  const [password, setPassword] = useState12("");
-  const [showPassword, setShowPassword] = useState12(false);
-  const [submitting, setSubmitting] = useState12(false);
-  const [internalError, setInternalError] = useState12(null);
+  const [username, setUsername] = useState13("");
+  const [password, setPassword] = useState13("");
+  const [showPassword, setShowPassword] = useState13(false);
+  const [submitting, setSubmitting] = useState13(false);
+  const [internalError, setInternalError] = useState13(null);
   const error = externalError ?? internalError;
   const handleSubmit = async (e) => {
     e.preventDefault();
@@ -3617,17 +3741,17 @@ function LoginForm({
         "flex min-h-screen items-center justify-center bg-background p-4",
         className
       ),
-      children: /* @__PURE__ */ jsxs33("div", { className: "w-full max-w-sm", children: [
+      children: /* @__PURE__ */ jsxs34("div", { className: "w-full max-w-sm", children: [
         logoSrc && /* @__PURE__ */ jsx50("div", { className: "flex justify-center mb-8", children: /* @__PURE__ */ jsx50("img", { src: logoSrc, alt: "Logo", className: "h-12" }) }),
         serverUrl && /* @__PURE__ */ jsx50("p", { className: "mb-4 text-center text-xs text-foreground-subtle truncate", children: serverUrl }),
-        /* @__PURE__ */ jsxs33(
+        /* @__PURE__ */ jsxs34(
           "form",
           {
             onSubmit: handleSubmit,
             className: "space-y-4 rounded-xl border border-border bg-surface p-6 shadow-xl shadow-black/10",
             children: [
               error && /* @__PURE__ */ jsx50("div", { className: "rounded-md bg-danger/10 border border-danger/20 px-3 py-2 text-xs text-danger", children: error }),
-              /* @__PURE__ */ jsxs33("div", { className: "space-y-1.5", children: [
+              /* @__PURE__ */ jsxs34("div", { className: "space-y-1.5", children: [
                 /* @__PURE__ */ jsx50("label", { className: "text-xs font-medium text-foreground-subtle", children: "Username" }),
                 /* @__PURE__ */ jsx50(
                   "input",
@@ -3641,9 +3765,9 @@ function LoginForm({
                   }
                 )
               ] }),
-              /* @__PURE__ */ jsxs33("div", { className: "space-y-1.5", children: [
+              /* @__PURE__ */ jsxs34("div", { className: "space-y-1.5", children: [
                 /* @__PURE__ */ jsx50("label", { className: "text-xs font-medium text-foreground-subtle", children: "Password" }),
-                /* @__PURE__ */ jsxs33("div", { className: "relative", children: [
+                /* @__PURE__ */ jsxs34("div", { className: "relative", children: [
                   /* @__PURE__ */ jsx50(
                     "input",
                     {
@@ -3667,7 +3791,7 @@ function LoginForm({
                   )
                 ] })
               ] }),
-              /* @__PURE__ */ jsxs33(
+              /* @__PURE__ */ jsxs34(
                 "button",
                 {
                   type: "submit",
@@ -3688,7 +3812,7 @@ function LoginForm({
 }
 
 // src/composites/dev-shell.tsx
-import { jsx as jsx51, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs35 } from "react/jsx-runtime";
 var STORAGE_KEY = "camstack_dev_token";
 var DevShellContext = createContext7(null);
 function useDevShell() {
@@ -3703,7 +3827,7 @@ function getStoredToken() {
   return localStorage.getItem(STORAGE_KEY);
 }
 function SunIcon({ className }) {
-  return /* @__PURE__ */ jsxs34(
+  return /* @__PURE__ */ jsxs35(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -3779,15 +3903,15 @@ function DevShellInner({
     () => ({ trpc, token, logout: onLogout }),
     [trpc, token, onLogout]
   );
-  return /* @__PURE__ */ jsx51(DevShellContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs34("div", { className: "min-h-screen bg-background text-foreground", children: [
-    /* @__PURE__ */ jsxs34("div", { className: "flex items-center justify-between border-b border-border bg-surface px-4 py-2", children: [
-      /* @__PURE__ */ jsxs34("div", { className: "flex items-center gap-2", children: [
+  return /* @__PURE__ */ jsx51(DevShellContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs35("div", { className: "min-h-screen bg-background text-foreground", children: [
+    /* @__PURE__ */ jsxs35("div", { className: "flex items-center justify-between border-b border-border bg-surface px-4 py-2", children: [
+      /* @__PURE__ */ jsxs35("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsx51("span", { className: "rounded bg-warning/20 px-2 py-0.5 text-xs font-bold text-warning", children: "DEV MODE" }),
         title && /* @__PURE__ */ jsx51("span", { className: "text-sm font-medium text-foreground", children: title }),
         /* @__PURE__ */ jsx51("span", { className: "text-xs text-foreground-subtle", children: serverUrl })
       ] }),
-      /* @__PURE__ */ jsxs34("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsxs34(
+      /* @__PURE__ */ jsxs35("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ jsxs35(
           "button",
           {
             type: "button",
@@ -3819,7 +3943,7 @@ function DevShell({
   serverUrl = "https://localhost:4443",
   title
 }) {
-  const [token, setToken] = useState13(getStoredToken);
+  const [token, setToken] = useState14(getStoredToken);
   const handleLogin = useCallback8(
     async (username, password) => {
       const anonClient = createTRPCClient({