@camstack/ui-library 0.1.26 → 0.1.28

package/dist/index.js

@@ -1273,8 +1273,30 @@ function ProviderBadge({
   ] });
 }
 
+// src/composites/version-badge.tsx
+import { jsx as jsx22 } from "react/jsx-runtime";
+var VARIANT_STYLES = {
+  success: "bg-emerald-400 text-emerald-950",
+  warning: "bg-amber-400 text-amber-950",
+  danger: "bg-red-400 text-red-950",
+  info: "bg-blue-400 text-blue-950",
+  neutral: "bg-foreground-subtle/20 text-foreground"
+};
+function SemanticBadge({ children, variant = "neutral", mono, className }) {
+  return /* @__PURE__ */ jsx22("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],
+    className
+  ), children });
+}
+function VersionBadge({ version, preRelease, className }) {
+  const isPreRelease = preRelease ?? /-(alpha|beta|rc|dev|canary|next)/i.test(version);
+  return /* @__PURE__ */ jsx22(SemanticBadge, { variant: isPreRelease ? "warning" : "success", mono: true, className, children: version });
+}
+
 // src/composites/form-field.tsx
-import { jsx as jsx22, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs8 } from "react/jsx-runtime";
 function FormField({
   label,
   description,
@@ -1297,31 +1319,31 @@ function FormField({
         /* @__PURE__ */ jsxs8("div", { className: cn(isHorizontal ? "flex-1" : ""), children: [
           /* @__PURE__ */ jsxs8(Label, { children: [
             label,
-            required && /* @__PURE__ */ jsx22("span", { className: "text-danger ml-0.5", children: "*" })
+            required && /* @__PURE__ */ jsx23("span", { className: "text-danger ml-0.5", children: "*" })
           ] }),
-          description && /* @__PURE__ */ jsx22("p", { className: "text-foreground-subtle text-xs mt-0.5", children: description })
+          description && /* @__PURE__ */ jsx23("p", { className: "text-foreground-subtle text-xs mt-0.5", children: description })
         ] }),
-        /* @__PURE__ */ jsx22("div", { className: cn(isHorizontal ? "shrink-0" : ""), children }),
-        error && /* @__PURE__ */ jsx22("p", { className: "text-danger text-xs", children: error })
+        /* @__PURE__ */ jsx23("div", { className: cn(isHorizontal ? "shrink-0" : ""), children }),
+        error && /* @__PURE__ */ jsx23("p", { className: "text-danger text-xs", children: error })
       ]
     }
   );
 }
 
 // src/composites/page-header.tsx
-import { jsx as jsx23, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs9 } from "react/jsx-runtime";
 function PageHeader({ title, subtitle, actions, className }) {
   return /* @__PURE__ */ jsxs9("div", { className: cn("flex items-center justify-between mb-3", className), children: [
     /* @__PURE__ */ jsxs9("div", { children: [
-      /* @__PURE__ */ jsx23("h1", { className: "text-sm font-semibold text-foreground", children: title }),
-      subtitle && /* @__PURE__ */ jsx23("p", { className: "text-foreground-subtle text-xs", children: subtitle })
+      /* @__PURE__ */ jsx24("h1", { className: "text-sm font-semibold text-foreground", children: title }),
+      subtitle && /* @__PURE__ */ jsx24("p", { className: "text-foreground-subtle text-xs", children: subtitle })
     ] }),
-    actions && /* @__PURE__ */ jsx23("div", { className: "flex items-center gap-2", children: actions })
+    actions && /* @__PURE__ */ jsx24("div", { className: "flex items-center gap-2", children: actions })
   ] });
 }
 
 // src/composites/empty-state.tsx
-import { jsx as jsx24, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs10 } from "react/jsx-runtime";
 function EmptyState({
   icon: Icon,
   title,
@@ -1330,17 +1352,17 @@ function EmptyState({
   className
 }) {
   return /* @__PURE__ */ jsxs10("div", { className: cn("flex flex-col items-center justify-center gap-3 py-12", className), children: [
-    Icon && /* @__PURE__ */ jsx24(Icon, { className: "h-12 w-12 text-foreground-subtle", "aria-hidden": "true" }),
+    Icon && /* @__PURE__ */ jsx25(Icon, { className: "h-12 w-12 text-foreground-subtle", "aria-hidden": "true" }),
     /* @__PURE__ */ jsxs10("div", { className: "flex flex-col items-center gap-1 text-center", children: [
-      /* @__PURE__ */ jsx24("p", { className: "text-foreground-muted text-sm font-medium", children: title }),
-      description && /* @__PURE__ */ jsx24("p", { className: "text-foreground-subtle text-xs max-w-xs", children: description })
+      /* @__PURE__ */ jsx25("p", { className: "text-foreground-muted text-sm font-medium", children: title }),
+      description && /* @__PURE__ */ jsx25("p", { className: "text-foreground-subtle text-xs max-w-xs", children: description })
     ] }),
-    action && /* @__PURE__ */ jsx24("div", { className: "mt-1", children: action })
+    action && /* @__PURE__ */ jsx25("div", { className: "mt-1", children: action })
   ] });
 }
 
 // src/composites/confirm-dialog.tsx
-import { jsx as jsx25, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs11 } from "react/jsx-runtime";
 function ConfirmDialog({
   title,
   message,
@@ -1352,14 +1374,14 @@ function ConfirmDialog({
   open,
   onOpenChange
 }) {
-  return /* @__PURE__ */ jsx25(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs11(DialogContent, { children: [
+  return /* @__PURE__ */ jsx26(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs11(DialogContent, { children: [
     /* @__PURE__ */ jsxs11(DialogHeader, { children: [
-      /* @__PURE__ */ jsx25(DialogTitle, { children: title }),
-      /* @__PURE__ */ jsx25(DialogDescription, { children: message })
+      /* @__PURE__ */ jsx26(DialogTitle, { children: title }),
+      /* @__PURE__ */ jsx26(DialogDescription, { children: message })
     ] }),
     /* @__PURE__ */ jsxs11(DialogFooter, { children: [
-      /* @__PURE__ */ jsx25(Button, { variant: "ghost", onClick: onCancel, children: cancelLabel }),
-      /* @__PURE__ */ jsx25(
+      /* @__PURE__ */ jsx26(Button, { variant: "ghost", onClick: onCancel, children: cancelLabel }),
+      /* @__PURE__ */ jsx26(
         Button,
         {
           variant: variant === "danger" ? "danger" : "primary",
@@ -1373,11 +1395,11 @@ function ConfirmDialog({
 
 // src/composites/stat-card.tsx
 import { TrendingUp, TrendingDown } from "lucide-react";
-import { jsx as jsx26, jsxs as jsxs12 } from "react/jsx-runtime";
+import { jsx as jsx27, jsxs as jsxs12 } from "react/jsx-runtime";
 function StatCard({ value, label, trend, className }) {
   return /* @__PURE__ */ jsxs12(Card, { className: cn("flex flex-col gap-1", className), children: [
     /* @__PURE__ */ jsxs12("div", { className: "flex items-baseline gap-2", children: [
-      /* @__PURE__ */ jsx26("span", { className: "text-2xl font-semibold text-foreground", children: value }),
+      /* @__PURE__ */ jsx27("span", { className: "text-2xl font-semibold text-foreground", children: value }),
       trend && /* @__PURE__ */ jsxs12(
         "span",
         {
@@ -1386,27 +1408,27 @@ function StatCard({ value, label, trend, className }) {
             trend.direction === "up" ? "text-success" : "text-danger"
           ),
           children: [
-            trend.direction === "up" ? /* @__PURE__ */ jsx26(TrendingUp, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx26(TrendingDown, { className: "h-3 w-3" }),
+            trend.direction === "up" ? /* @__PURE__ */ jsx27(TrendingUp, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx27(TrendingDown, { className: "h-3 w-3" }),
             trend.value,
             "%"
           ]
         }
       )
     ] }),
-    /* @__PURE__ */ jsx26("span", { className: "text-xs text-foreground-muted", children: label })
+    /* @__PURE__ */ jsx27("span", { className: "text-xs text-foreground-muted", children: label })
   ] });
 }
 
 // src/composites/key-value-list.tsx
-import { jsx as jsx27, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx28, jsxs as jsxs13 } from "react/jsx-runtime";
 function KeyValueList({ items, className }) {
-  return /* @__PURE__ */ jsx27("dl", { className: cn("flex flex-col", className), children: items.map((item) => /* @__PURE__ */ jsxs13(
+  return /* @__PURE__ */ jsx28("dl", { className: cn("flex flex-col", className), children: items.map((item) => /* @__PURE__ */ jsxs13(
     "div",
     {
       className: "flex items-center h-7",
       children: [
-        /* @__PURE__ */ jsx27("dt", { className: "text-foreground-subtle text-xs w-1/3 shrink-0", children: item.key }),
-        /* @__PURE__ */ jsx27("dd", { className: "text-foreground text-xs", children: item.value })
+        /* @__PURE__ */ jsx28("dt", { className: "text-foreground-subtle text-xs w-1/3 shrink-0", children: item.key }),
+        /* @__PURE__ */ jsx28("dd", { className: "text-foreground text-xs", children: item.value })
       ]
     },
     item.key
@@ -1416,7 +1438,7 @@ function KeyValueList({ items, className }) {
 // src/composites/code-block.tsx
 import { useCallback as useCallback7, useState as useState8 } from "react";
 import { Copy, Check } from "lucide-react";
-import { jsx as jsx28, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs14 } from "react/jsx-runtime";
 function CodeBlock({ children, maxHeight = 300, className }) {
   const [copied, setCopied] = useState8(false);
   const handleCopy = useCallback7(() => {
@@ -1426,8 +1448,8 @@ function CodeBlock({ children, maxHeight = 300, className }) {
     });
   }, [children]);
   return /* @__PURE__ */ jsxs14("div", { className: cn("relative group", className), children: [
-    /* @__PURE__ */ jsx28(ScrollArea, { style: { maxHeight }, children: /* @__PURE__ */ jsx28("pre", { className: "font-mono text-xs bg-surface p-3 rounded-md border border-border-subtle", children: /* @__PURE__ */ jsx28("code", { children }) }) }),
-    /* @__PURE__ */ jsx28("div", { className: "absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity", children: /* @__PURE__ */ jsx28(
+    /* @__PURE__ */ jsx29(ScrollArea, { style: { maxHeight }, children: /* @__PURE__ */ jsx29("pre", { className: "font-mono text-xs bg-surface p-3 rounded-md border border-border-subtle", children: /* @__PURE__ */ jsx29("code", { children }) }) }),
+    /* @__PURE__ */ jsx29("div", { className: "absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity", children: /* @__PURE__ */ jsx29(
       IconButton,
       {
         icon: copied ? Check : Copy,
@@ -1442,27 +1464,27 @@ function CodeBlock({ children, maxHeight = 300, className }) {
 
 // src/composites/filter-bar.tsx
 import { Search } from "lucide-react";
-import { jsx as jsx29 } from "react/jsx-runtime";
+import { jsx as jsx30 } from "react/jsx-runtime";
 function FilterBar({ filters, values, onChange, className }) {
   const handleChange = (key, value) => {
     onChange({ ...values, [key]: value });
   };
-  return /* @__PURE__ */ jsx29("div", { className: cn("flex items-center gap-2 flex-wrap", className), children: filters.map((filter) => {
+  return /* @__PURE__ */ jsx30("div", { className: cn("flex items-center gap-2 flex-wrap", className), children: filters.map((filter) => {
     switch (filter.type) {
       case "search":
-        return /* @__PURE__ */ jsx29(
+        return /* @__PURE__ */ jsx30(
           Input,
           {
             placeholder: filter.placeholder ?? "Search...",
             value: values[filter.key] ?? "",
             onChange: (e) => handleChange(filter.key, e.target.value),
-            leftSlot: /* @__PURE__ */ jsx29(Search, { className: "h-3 w-3 text-foreground-subtle" }),
+            leftSlot: /* @__PURE__ */ jsx30(Search, { className: "h-3 w-3 text-foreground-subtle" }),
             className: "w-48"
           },
           filter.key
         );
       case "select":
-        return /* @__PURE__ */ jsx29(
+        return /* @__PURE__ */ jsx30(
           Select,
           {
             options: filter.options,
@@ -1473,10 +1495,10 @@ function FilterBar({ filters, values, onChange, className }) {
           filter.key
         );
       case "badge-toggle":
-        return /* @__PURE__ */ jsx29("div", { className: "flex items-center gap-1", children: filter.options.map((option) => {
+        return /* @__PURE__ */ jsx30("div", { className: "flex items-center gap-1", children: filter.options.map((option) => {
           const currentValue = values[filter.key];
           const isActive = currentValue === option.value;
-          return /* @__PURE__ */ jsx29(
+          return /* @__PURE__ */ jsx30(
             "button",
             {
               type: "button",
@@ -1484,7 +1506,7 @@ function FilterBar({ filters, values, onChange, className }) {
                 filter.key,
                 isActive ? void 0 : option.value
               ),
-              children: /* @__PURE__ */ jsx29(
+              children: /* @__PURE__ */ jsx30(
                 Badge,
                 {
                   variant: isActive ? "info" : "default",
@@ -1503,7 +1525,7 @@ function FilterBar({ filters, values, onChange, className }) {
 }
 
 // src/composites/app-shell/sidebar-item.tsx
-import { jsx as jsx30, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs15 } from "react/jsx-runtime";
 function SidebarItem({
   label,
   icon: Icon,
@@ -1522,16 +1544,16 @@ function SidebarItem({
         className
       ),
       children: [
-        /* @__PURE__ */ jsx30(Icon, { className: "h-3.5 w-3.5 shrink-0" }),
-        /* @__PURE__ */ jsx30("span", { className: "truncate flex-1", children: label }),
-        badge !== void 0 && /* @__PURE__ */ jsx30(Badge, { className: "ml-auto text-[10px] px-1.5 py-0", children: badge })
+        /* @__PURE__ */ jsx31(Icon, { className: "h-3.5 w-3.5 shrink-0" }),
+        /* @__PURE__ */ jsx31("span", { className: "truncate flex-1", children: label }),
+        badge !== void 0 && /* @__PURE__ */ jsx31(Badge, { className: "ml-auto text-[10px] px-1.5 py-0", children: badge })
       ]
     }
   );
 }
 
 // src/composites/app-shell/sidebar.tsx
-import { jsx as jsx31, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs16 } from "react/jsx-runtime";
 function Sidebar({ logo, sections, footer, className }) {
   return /* @__PURE__ */ jsxs16(
     "nav",
@@ -1541,14 +1563,14 @@ function Sidebar({ logo, sections, footer, className }) {
         className
       ),
       children: [
-        logo && /* @__PURE__ */ jsx31("div", { className: "px-3 py-2 shrink-0", children: logo }),
-        /* @__PURE__ */ jsx31("div", { className: "flex-1 overflow-auto px-1 py-1", children: sections.map((section, sectionIndex) => /* @__PURE__ */ jsxs16("div", { className: cn(sectionIndex > 0 ? "mt-3" : ""), children: [
-          section.label && /* @__PURE__ */ jsx31("span", { className: "text-[10px] text-foreground-disabled uppercase tracking-wider px-2 mb-1 block", children: section.label }),
-          /* @__PURE__ */ jsx31("div", { className: "flex flex-col gap-0.5", children: section.items.map((item) => /* @__PURE__ */ jsx31(SidebarItem, { ...item }, item.href)) })
+        logo && /* @__PURE__ */ jsx32("div", { className: "px-3 py-2 shrink-0", children: logo }),
+        /* @__PURE__ */ jsx32("div", { className: "flex-1 overflow-auto px-1 py-1", children: sections.map((section, sectionIndex) => /* @__PURE__ */ jsxs16("div", { className: cn(sectionIndex > 0 ? "mt-3" : ""), children: [
+          section.label && /* @__PURE__ */ jsx32("span", { className: "text-[10px] text-foreground-disabled uppercase tracking-wider px-2 mb-1 block", children: section.label }),
+          /* @__PURE__ */ jsx32("div", { className: "flex flex-col gap-0.5", children: section.items.map((item) => /* @__PURE__ */ jsx32(SidebarItem, { ...item }, item.href)) })
         ] }, sectionIndex)) }),
         footer && footer.length > 0 && /* @__PURE__ */ jsxs16("div", { className: "shrink-0 px-1 pb-1", children: [
-          /* @__PURE__ */ jsx31(Separator, { className: "mb-1" }),
-          /* @__PURE__ */ jsx31("div", { className: "flex flex-col gap-0.5", children: footer.map((item) => /* @__PURE__ */ jsx31(SidebarItem, { ...item }, item.href)) })
+          /* @__PURE__ */ jsx32(Separator, { className: "mb-1" }),
+          /* @__PURE__ */ jsx32("div", { className: "flex flex-col gap-0.5", children: footer.map((item) => /* @__PURE__ */ jsx32(SidebarItem, { ...item }, item.href)) })
         ] })
       ]
     }
@@ -1557,29 +1579,29 @@ function Sidebar({ logo, sections, footer, className }) {
 
 // src/composites/app-shell/app-shell.tsx
 import { ChevronRight } from "lucide-react";
-import { jsx as jsx32, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs17 } from "react/jsx-runtime";
 function AppShell({ sidebar, header, children, className }) {
   return /* @__PURE__ */ jsxs17("div", { className: cn("flex h-screen", className), children: [
-    /* @__PURE__ */ jsx32(Sidebar, { ...sidebar }),
+    /* @__PURE__ */ jsx33(Sidebar, { ...sidebar }),
     /* @__PURE__ */ jsxs17("div", { className: "flex flex-1 flex-col min-w-0", children: [
       header && /* @__PURE__ */ jsxs17("header", { className: "flex items-center h-10 border-b border-border px-4 shrink-0", children: [
-        header.breadcrumbs && header.breadcrumbs.length > 0 && /* @__PURE__ */ jsx32("nav", { className: "flex items-center gap-1 text-xs flex-1 min-w-0", children: header.breadcrumbs.map((crumb, index) => {
+        header.breadcrumbs && header.breadcrumbs.length > 0 && /* @__PURE__ */ jsx33("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__ */ jsxs17("span", { className: "flex items-center gap-1", children: [
-            index > 0 && /* @__PURE__ */ jsx32(ChevronRight, { className: "h-3 w-3 text-foreground-subtle shrink-0" }),
-            crumb.href && !isLast ? /* @__PURE__ */ jsx32(
+            index > 0 && /* @__PURE__ */ jsx33(ChevronRight, { className: "h-3 w-3 text-foreground-subtle shrink-0" }),
+            crumb.href && !isLast ? /* @__PURE__ */ jsx33(
               "a",
               {
                 href: crumb.href,
                 className: "text-foreground-subtle hover:text-foreground transition-colors truncate",
                 children: crumb.label
               }
-            ) : /* @__PURE__ */ jsx32("span", { className: "text-foreground truncate", children: crumb.label })
+            ) : /* @__PURE__ */ jsx33("span", { className: "text-foreground truncate", children: crumb.label })
           ] }, index);
         }) }),
-        header.actions && /* @__PURE__ */ jsx32("div", { className: "flex items-center gap-2 ml-auto shrink-0", children: header.actions })
+        header.actions && /* @__PURE__ */ jsx33("div", { className: "flex items-center gap-2 ml-auto shrink-0", children: header.actions })
       ] }),
-      /* @__PURE__ */ jsx32("main", { className: "flex-1 overflow-auto p-4", children })
+      /* @__PURE__ */ jsx33("main", { className: "flex-1 overflow-auto p-4", children })
     ] })
   ] });
 }
@@ -1597,20 +1619,20 @@ import {
 
 // src/composites/data-table/data-table-header.tsx
 import { ArrowUpDown, ArrowUp, ArrowDown } from "lucide-react";
-import { jsx as jsx33, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs18 } from "react/jsx-runtime";
 function DataTableHeader({
   headerGroups,
   onSortingChange,
   stickyHeader,
   flexRender: render
 }) {
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx34(
     "thead",
     {
       className: cn(
         stickyHeader && "sticky top-0 z-10 bg-background"
       ),
-      children: headerGroups.map((headerGroup) => /* @__PURE__ */ jsx33("tr", { className: "h-6", children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx33(
+      children: headerGroups.map((headerGroup) => /* @__PURE__ */ jsx34("tr", { className: "h-6", children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx34(
         HeaderCell,
         {
           header,
@@ -1625,7 +1647,7 @@ function DataTableHeader({
 function HeaderCell({ header, sortable, flexRender: render }) {
   const sorted = header.column.getIsSorted();
   const SortIcon = sorted === "asc" ? ArrowUp : sorted === "desc" ? ArrowDown : ArrowUpDown;
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx34(
     "th",
     {
       className: cn(
@@ -1635,7 +1657,7 @@ function HeaderCell({ header, sortable, flexRender: render }) {
       onClick: sortable ? header.column.getToggleSortingHandler() : void 0,
       children: /* @__PURE__ */ jsxs18("span", { className: "inline-flex items-center gap-1", children: [
         header.isPlaceholder ? null : render(header.column.columnDef.header, header.getContext()),
-        sortable && /* @__PURE__ */ jsx33(SortIcon, { className: "h-3 w-3" })
+        sortable && /* @__PURE__ */ jsx34(SortIcon, { className: "h-3 w-3" })
       ] })
     }
   );
@@ -1643,7 +1665,7 @@ function HeaderCell({ header, sortable, flexRender: render }) {
 
 // src/composites/data-table/data-table-row.tsx
 import { MoreHorizontal } from "lucide-react";
-import { jsx as jsx34, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs19 } from "react/jsx-runtime";
 function DataTableRow({
   row,
   onRowClick,
@@ -1661,17 +1683,17 @@ function DataTableRow({
       ),
       onClick: onRowClick ? () => onRowClick(row.original) : void 0,
       children: [
-        row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx34(DataTableCell, { cell, flexRender: render }, cell.id)),
-        actions.length > 0 && /* @__PURE__ */ jsx34("td", { className: "px-2 py-1.5 w-8", children: /* @__PURE__ */ jsxs19(Dropdown, { children: [
-          /* @__PURE__ */ jsx34(
+        row.getVisibleCells().map((cell) => /* @__PURE__ */ jsx35(DataTableCell, { cell, flexRender: render }, cell.id)),
+        actions.length > 0 && /* @__PURE__ */ jsx35("td", { className: "px-2 py-1.5 w-8", children: /* @__PURE__ */ jsxs19(Dropdown, { children: [
+          /* @__PURE__ */ jsx35(
             DropdownTrigger,
             {
               className: "p-0.5 rounded hover:bg-surface-hover",
               onClick: (e) => e.stopPropagation(),
-              children: /* @__PURE__ */ jsx34(MoreHorizontal, { className: "h-3.5 w-3.5 text-foreground-muted" })
+              children: /* @__PURE__ */ jsx35(MoreHorizontal, { className: "h-3.5 w-3.5 text-foreground-muted" })
             }
           ),
-          /* @__PURE__ */ jsx34(DropdownContent, { className: "right-0 left-auto", children: actions.map((action) => /* @__PURE__ */ jsx34(
+          /* @__PURE__ */ jsx35(DropdownContent, { className: "right-0 left-auto", children: actions.map((action) => /* @__PURE__ */ jsx35(
             DropdownItem,
             {
               icon: action.icon,
@@ -1690,12 +1712,12 @@ function DataTableRow({
   );
 }
 function DataTableCell({ cell, flexRender: render }) {
-  return /* @__PURE__ */ jsx34("td", { className: "px-2 py-1.5 text-xs text-foreground", children: render(cell.column.columnDef.cell, cell.getContext()) });
+  return /* @__PURE__ */ jsx35("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
 import { ChevronLeft, ChevronRight as ChevronRight2 } from "lucide-react";
-import { jsx as jsx35, jsxs as jsxs20 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs20 } from "react/jsx-runtime";
 var PAGE_SIZE_OPTIONS = [
   { value: "10", label: "10" },
   { value: "25", label: "25" },
@@ -1712,8 +1734,8 @@ function DataTablePagination({
   const currentPage = page + 1;
   return /* @__PURE__ */ jsxs20("div", { className: "flex items-center justify-between px-2 py-2 text-xs text-foreground-muted", children: [
     /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx35("span", { children: "Rows per page" }),
-      /* @__PURE__ */ jsx35("div", { className: "w-16", children: /* @__PURE__ */ jsx35(
+      /* @__PURE__ */ jsx36("span", { children: "Rows per page" }),
+      /* @__PURE__ */ jsx36("div", { className: "w-16", children: /* @__PURE__ */ jsx36(
         Select,
         {
           options: PAGE_SIZE_OPTIONS,
@@ -1732,7 +1754,7 @@ function DataTablePagination({
         " of ",
         totalPages
       ] }),
-      /* @__PURE__ */ jsx35(
+      /* @__PURE__ */ jsx36(
         IconButton,
         {
           icon: ChevronLeft,
@@ -1743,7 +1765,7 @@ function DataTablePagination({
           onClick: () => onPaginationChange?.({ pageIndex: page - 1, pageSize })
         }
       ),
-      /* @__PURE__ */ jsx35(
+      /* @__PURE__ */ jsx36(
         IconButton,
         {
           icon: ChevronRight2,
@@ -1759,7 +1781,7 @@ function DataTablePagination({
 }
 
 // src/composites/data-table/data-table.tsx
-import { Fragment, jsx as jsx36, jsxs as jsxs21 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx37, jsxs as jsxs21 } from "react/jsx-runtime";
 function DataTable({
   data,
   columns: userColumns,
@@ -1782,7 +1804,7 @@ function DataTable({
     if (!selectable) return userColumns;
     const selectColumn = {
       id: "__select",
-      header: ({ table: table2 }) => /* @__PURE__ */ jsx36(
+      header: ({ table: table2 }) => /* @__PURE__ */ jsx37(
         Checkbox,
         {
           checked: table2.getIsAllPageRowsSelected(),
@@ -1790,7 +1812,7 @@ function DataTable({
           "aria-label": "Select all"
         }
       ),
-      cell: ({ row }) => /* @__PURE__ */ jsx36(
+      cell: ({ row }) => /* @__PURE__ */ jsx37(
         Checkbox,
         {
           checked: row.getIsSelected(),
@@ -1830,7 +1852,7 @@ function DataTable({
   const hasActions = !!rowActions;
   return /* @__PURE__ */ jsxs21("div", { className: cn("overflow-auto", className), children: [
     /* @__PURE__ */ jsxs21("table", { className: "w-full border-collapse", children: [
-      /* @__PURE__ */ jsx36(
+      /* @__PURE__ */ jsx37(
         DataTableHeader,
         {
           headerGroups: table.getHeaderGroups(),
@@ -1839,14 +1861,14 @@ function DataTable({
           flexRender
         }
       ),
-      /* @__PURE__ */ jsx36("tbody", { children: loading ? /* @__PURE__ */ jsx36(LoadingRows, { colSpan: columns.length + (hasActions ? 1 : 0), compact }) : table.getRowModel().rows.length === 0 ? /* @__PURE__ */ jsx36("tr", { children: /* @__PURE__ */ jsx36(
+      /* @__PURE__ */ jsx37("tbody", { children: loading ? /* @__PURE__ */ jsx37(LoadingRows, { colSpan: columns.length + (hasActions ? 1 : 0), compact }) : table.getRowModel().rows.length === 0 ? /* @__PURE__ */ jsx37("tr", { children: /* @__PURE__ */ jsx37(
         "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__ */ jsx36(
+      ) }) : table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx37(
         DataTableRow,
         {
           row,
@@ -1857,7 +1879,7 @@ function DataTable({
         row.id
       )) })
     ] }),
-    pagination && /* @__PURE__ */ jsx36(
+    pagination && /* @__PURE__ */ jsx37(
       DataTablePagination,
       {
         page: pagination.page,
@@ -1869,11 +1891,11 @@ function DataTable({
   ] });
 }
 function LoadingRows({ colSpan, compact }) {
-  return /* @__PURE__ */ jsx36(Fragment, { children: Array.from({ length: 5 }).map((_, rowIdx) => /* @__PURE__ */ jsx36("tr", { className: compact ? "h-7" : "h-9", children: Array.from({ length: colSpan }).map((_2, colIdx) => /* @__PURE__ */ jsx36("td", { className: "px-2 py-1.5", children: /* @__PURE__ */ jsx36(Skeleton, { className: "h-3 w-full" }) }, colIdx)) }, rowIdx)) });
+  return /* @__PURE__ */ jsx37(Fragment, { children: Array.from({ length: 5 }).map((_, rowIdx) => /* @__PURE__ */ jsx37("tr", { className: compact ? "h-7" : "h-9", children: Array.from({ length: colSpan }).map((_2, colIdx) => /* @__PURE__ */ jsx37("td", { className: "px-2 py-1.5", children: /* @__PURE__ */ jsx37(Skeleton, { className: "h-3 w-full" }) }, colIdx)) }, rowIdx)) });
 }
 
 // src/composites/device-card.tsx
-import { jsx as jsx37, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs22 } from "react/jsx-runtime";
 var STATUS_COLORS = {
   online: "bg-success",
   offline: "bg-danger",
@@ -1905,11 +1927,11 @@ function DeviceCard({
       ),
       children: [
         /* @__PURE__ */ jsxs22("div", { className: "flex items-center justify-between mb-2", children: [
-          /* @__PURE__ */ jsx37("span", { className: "text-sm font-medium truncate", children: title }),
-          status && /* @__PURE__ */ jsx37("span", { className: cn("h-2 w-2 rounded-full shrink-0", STATUS_COLORS[status]) })
+          /* @__PURE__ */ jsx38("span", { className: "text-sm font-medium truncate", children: title }),
+          status && /* @__PURE__ */ jsx38("span", { className: cn("h-2 w-2 rounded-full shrink-0", STATUS_COLORS[status]) })
         ] }),
-        subtitle && /* @__PURE__ */ jsx37("div", { className: "text-[11px] text-foreground-muted", children: subtitle }),
-        badges && badges.length > 0 && /* @__PURE__ */ jsx37("div", { className: "flex flex-wrap gap-1 mt-2", children: badges.map((badge, i) => {
+        subtitle && /* @__PURE__ */ jsx38("div", { className: "text-[11px] text-foreground-muted", children: subtitle }),
+        badges && badges.length > 0 && /* @__PURE__ */ jsx38("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",
@@ -1934,7 +1956,7 @@ function DeviceCard({
             badge.label
           ] }, i);
         }) }),
-        !isOffline && actions && actions.length > 0 && /* @__PURE__ */ jsx37("div", { className: "flex items-center gap-0.5 mt-2 -mb-1", children: actions.map((action, i) => /* @__PURE__ */ jsx37(
+        !isOffline && actions && actions.length > 0 && /* @__PURE__ */ jsx38("div", { className: "flex items-center gap-0.5 mt-2 -mb-1", children: actions.map((action, i) => /* @__PURE__ */ jsx38(
           "button",
           {
             onClick: (e) => {
@@ -1948,21 +1970,21 @@ function DeviceCard({
           },
           i
         )) }),
-        isOffline && offlineAction && /* @__PURE__ */ jsx37("div", { className: "mt-2", onClick: (e) => e.stopPropagation(), children: offlineAction })
+        isOffline && offlineAction && /* @__PURE__ */ jsx38("div", { className: "mt-2", onClick: (e) => e.stopPropagation(), children: offlineAction })
       ]
     }
   );
 }
 
 // src/composites/device-grid.tsx
-import { jsx as jsx38 } from "react/jsx-runtime";
+import { jsx as jsx39 } from "react/jsx-runtime";
 function DeviceGrid({
   children,
   minCardWidth = 220,
   gap = 3,
   className
 }) {
-  return /* @__PURE__ */ jsx38(
+  return /* @__PURE__ */ jsx39(
     "div",
     {
       className: cn(
@@ -1982,7 +2004,7 @@ function DeviceGrid({
 // src/composites/pipeline-step.tsx
 import { useState as useState9 } from "react";
 import { ChevronRight as ChevronRight3, ChevronDown as ChevronDown2 } from "lucide-react";
-import { jsx as jsx39, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx40, jsxs as jsxs23 } from "react/jsx-runtime";
 var ADDON_COLORS = {
   "object-detection": "border-l-blue-500",
   "motion-detection": "border-l-amber-500",
@@ -2081,7 +2103,7 @@ function PipelineStep({
     if (e.target.closest(".step-config")) return;
     setExpanded((v) => !v);
   }
-  return /* @__PURE__ */ jsx39("div", { className: "space-y-2", children: /* @__PURE__ */ jsxs23(
+  return /* @__PURE__ */ jsx40("div", { className: "space-y-2", children: /* @__PURE__ */ jsxs23(
     "div",
     {
       className: cn(
@@ -2091,17 +2113,17 @@ function PipelineStep({
       ),
       children: [
         /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-2.5 px-3 py-2.5 cursor-pointer select-none", onClick: handleClick, children: [
-          /* @__PURE__ */ jsx39("span", { className: "text-foreground-subtle", children: expanded ? /* @__PURE__ */ jsx39(ChevronDown2, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx39(ChevronRight3, { className: "h-4 w-4" }) }),
+          /* @__PURE__ */ jsx40("span", { className: "text-foreground-subtle", children: expanded ? /* @__PURE__ */ jsx40(ChevronDown2, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx40(ChevronRight3, { className: "h-4 w-4" }) }),
           /* @__PURE__ */ jsxs23("div", { className: "flex-1 min-w-0", children: [
-            /* @__PURE__ */ jsx39("span", { className: "text-[10px] uppercase tracking-wider font-medium text-foreground-subtle/60 block leading-none", children: step.slot }),
-            /* @__PURE__ */ jsx39("span", { className: "text-sm font-semibold text-foreground truncate block leading-tight", children: step.addonName }),
+            /* @__PURE__ */ jsx40("span", { className: "text-[10px] uppercase tracking-wider font-medium text-foreground-subtle/60 block leading-none", children: step.slot }),
+            /* @__PURE__ */ jsx40("span", { className: "text-sm font-semibold text-foreground truncate block leading-tight", children: step.addonName }),
             /* @__PURE__ */ jsxs23("div", { className: "flex items-center gap-1 mt-0.5 flex-wrap", children: [
-              step.inputClasses.map((c) => /* @__PURE__ */ jsx39("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__ */ jsx39("span", { className: "text-foreground-subtle/40 text-[10px]", children: "\u2192" }),
-              step.outputClasses.map((c) => /* @__PURE__ */ jsx39("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))
+              step.inputClasses.map((c) => /* @__PURE__ */ jsx40("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__ */ jsx40("span", { className: "text-foreground-subtle/40 text-[10px]", children: "\u2192" }),
+              step.outputClasses.map((c) => /* @__PURE__ */ jsx40("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__ */ jsx39(
+          /* @__PURE__ */ jsx40(
             "button",
             {
               onClick: (e) => {
@@ -2112,7 +2134,7 @@ 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__ */ jsx39("span", { className: cn(
+              children: /* @__PURE__ */ jsx40("span", { className: cn(
                 "inline-block h-4 w-4 rounded-full bg-white shadow transition-transform",
                 step.enabled ? "translate-x-6" : "translate-x-1"
               ) })
@@ -2121,7 +2143,7 @@ function PipelineStep({
         ] }),
         expanded && /* @__PURE__ */ jsxs23("div", { className: "step-config border-t border-border bg-background px-4 py-4 space-y-3", children: [
           /* @__PURE__ */ jsxs23("div", { className: "grid grid-cols-2 gap-3", children: [
-            /* @__PURE__ */ jsx39(
+            /* @__PURE__ */ jsx40(
               ConfigSelect,
               {
                 label: "Agent",
@@ -2131,7 +2153,7 @@ function PipelineStep({
                 onChange: (v) => onChange({ ...step, agentId: v })
               }
             ),
-            /* @__PURE__ */ jsx39(
+            /* @__PURE__ */ jsx40(
               ConfigSelect,
               {
                 label: "Runtime",
@@ -2141,7 +2163,7 @@ function PipelineStep({
                 onChange: (v) => onChange({ ...step, runtime: v })
               }
             ),
-            /* @__PURE__ */ jsx39(
+            /* @__PURE__ */ jsx40(
               ConfigSelect,
               {
                 label: "Backend",
@@ -2151,7 +2173,7 @@ function PipelineStep({
                 onChange: (v) => onChange({ ...step, backend: v })
               }
             ),
-            /* @__PURE__ */ jsx39(
+            /* @__PURE__ */ jsx40(
               ConfigSelect,
               {
                 label: "Model",
@@ -2164,13 +2186,13 @@ function PipelineStep({
           ] }),
           /* @__PURE__ */ jsxs23("div", { children: [
             /* @__PURE__ */ jsxs23("div", { className: "flex items-center justify-between mb-1", children: [
-              /* @__PURE__ */ jsx39("span", { className: "text-[10px] font-medium text-foreground-subtle uppercase tracking-wide", children: "Confidence" }),
+              /* @__PURE__ */ jsx40("span", { className: "text-[10px] font-medium text-foreground-subtle uppercase tracking-wide", children: "Confidence" }),
               /* @__PURE__ */ jsxs23("span", { className: "text-xs font-medium text-foreground tabular-nums", children: [
                 (step.confidence * 100).toFixed(0),
                 "%"
               ] })
             ] }),
-            /* @__PURE__ */ jsx39(
+            /* @__PURE__ */ jsx40(
               "input",
               {
                 type: "range",
@@ -2191,7 +2213,7 @@ function PipelineStep({
 }
 function ConfigSelect({ label, value, options, disabled, onChange }) {
   return /* @__PURE__ */ jsxs23("div", { children: [
-    /* @__PURE__ */ jsx39("label", { className: "block text-[10px] font-medium text-foreground-subtle uppercase tracking-wide mb-1.5", children: label }),
+    /* @__PURE__ */ jsx40("label", { className: "block text-[10px] font-medium text-foreground-subtle uppercase tracking-wide mb-1.5", children: label }),
     /* @__PURE__ */ jsxs23(
       "select",
       {
@@ -2200,8 +2222,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__ */ jsx39("option", { value, children: value || "default" }),
-          options.map((o) => /* @__PURE__ */ jsx39("option", { value: o.value, disabled: o.disabled, children: o.label }, o.value))
+          options.length === 0 && /* @__PURE__ */ jsx40("option", { value, children: value || "default" }),
+          options.map((o) => /* @__PURE__ */ jsx40("option", { value: o.value, disabled: o.disabled, children: o.label }, o.value))
         ]
       }
     )
@@ -2210,9 +2232,9 @@ function ConfigSelect({ label, value, options, disabled, onChange }) {
 
 // src/composites/pipeline-runtime-selector.tsx
 import { Cpu, Star } from "lucide-react";
-import { jsx as jsx40, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs24 } from "react/jsx-runtime";
 function PipelineRuntimeSelector({ options, value, onChange }) {
-  return /* @__PURE__ */ jsx40("div", { className: "flex flex-wrap gap-2", children: options.map((opt) => {
+  return /* @__PURE__ */ jsx41("div", { className: "flex flex-wrap gap-2", children: options.map((opt) => {
     const active = opt.id === value;
     return /* @__PURE__ */ jsxs24(
       "button",
@@ -2221,10 +2243,10 @@ function PipelineRuntimeSelector({ options, value, onChange }) {
         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__ */ jsx40(Cpu, { className: "h-3.5 w-3.5 shrink-0" }),
+          /* @__PURE__ */ jsx41(Cpu, { className: "h-3.5 w-3.5 shrink-0" }),
           opt.label,
           opt.isBest && /* @__PURE__ */ jsxs24("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__ */ jsx40(Star, { className: "h-2.5 w-2.5" }),
+            /* @__PURE__ */ jsx41(Star, { className: "h-2.5 w-2.5" }),
             "Best"
           ] }),
           opt.platformScore != null && /* @__PURE__ */ jsxs24("span", { className: "text-[10px] text-foreground-subtle/60", children: [
@@ -2232,7 +2254,7 @@ function PipelineRuntimeSelector({ options, value, onChange }) {
             opt.platformScore,
             ")"
           ] }),
-          /* @__PURE__ */ jsx40(
+          /* @__PURE__ */ jsx41(
             "span",
             {
               className: `h-1.5 w-1.5 rounded-full ${opt.available ? "bg-success" : "bg-danger"}`
@@ -2279,7 +2301,7 @@ function validateTemplate(steps, schema) {
 }
 
 // src/composites/pipeline-builder.tsx
-import { jsx as jsx41, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs25 } from "react/jsx-runtime";
 function buildSchemaMap(schema) {
   const map = /* @__PURE__ */ new Map();
   for (const slot of schema.slots) {
@@ -2308,20 +2330,20 @@ function createDefaultStep(addon, fallbackRuntime, fallbackBackend) {
   };
 }
 function PlaceholderStep({ addon, onClick }) {
-  return /* @__PURE__ */ jsx41(
+  return /* @__PURE__ */ jsx42(
     "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__ */ jsxs25("div", { className: "flex items-center gap-3", children: [
-        /* @__PURE__ */ jsx41(PlusCircle, { className: "h-[18px] w-[18px] text-foreground-subtle/30 group-hover:text-primary/60 shrink-0" }),
+        /* @__PURE__ */ jsx42(PlusCircle, { className: "h-[18px] w-[18px] text-foreground-subtle/30 group-hover:text-primary/60 shrink-0" }),
         /* @__PURE__ */ jsxs25("div", { className: "flex-1 min-w-0", children: [
-          /* @__PURE__ */ jsx41("span", { className: "text-[13px] font-medium text-foreground-subtle/50 group-hover:text-foreground-subtle block truncate", children: addon.name }),
+          /* @__PURE__ */ jsx42("span", { className: "text-[13px] font-medium text-foreground-subtle/50 group-hover:text-foreground-subtle block truncate", children: addon.name }),
           /* @__PURE__ */ jsxs25("div", { className: "flex items-center gap-1 mt-0.5 flex-wrap", children: [
-            addon.inputClasses.map((c) => /* @__PURE__ */ jsx41("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__ */ jsx41("span", { className: "text-foreground-subtle/25 text-[10px]", children: "\u2192" }),
-            addon.outputClasses.map((c) => /* @__PURE__ */ jsx41("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))
+            addon.inputClasses.map((c) => /* @__PURE__ */ jsx42("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__ */ jsx42("span", { className: "text-foreground-subtle/25 text-[10px]", children: "\u2192" }),
+            addon.outputClasses.map((c) => /* @__PURE__ */ jsx42("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,7 +2456,7 @@ function PipelineBuilder({
   function renderStep(step) {
     const childPlaceholders = getChildPlaceholders(step);
     return /* @__PURE__ */ jsxs25("div", { className: "space-y-1.5", children: [
-      /* @__PURE__ */ jsx41(
+      /* @__PURE__ */ jsx42(
         PipelineStep,
         {
           step,
@@ -2447,11 +2469,11 @@ function PipelineBuilder({
         }
       ),
       (step.children.length > 0 || childPlaceholders.length > 0) && /* @__PURE__ */ jsxs25("div", { className: "ml-6 pl-4 border-l-2 border-dashed border-border/40 space-y-1.5", children: [
-        /* @__PURE__ */ jsx41("span", { className: "text-[10px] font-semibold uppercase tracking-widest text-foreground-subtle/40", children: "Slot: Cropper / Classifier" }),
+        /* @__PURE__ */ jsx42("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__ */ jsxs25("div", { className: "space-y-1.5", children: [
-            /* @__PURE__ */ jsx41(
+            /* @__PURE__ */ jsx42(
               PipelineStep,
               {
                 step: child,
@@ -2475,8 +2497,8 @@ function PipelineBuilder({
               }
             ),
             (child.children.length > 0 || childChildPlaceholders.length > 0) && /* @__PURE__ */ jsxs25("div", { className: "ml-6 pl-4 border-l-2 border-dashed border-border/30 space-y-1.5", children: [
-              /* @__PURE__ */ jsx41("span", { className: "text-[10px] font-semibold uppercase tracking-widest text-foreground-subtle/30", children: "Slot: Recognizer" }),
-              child.children.map((grandchild) => /* @__PURE__ */ jsx41(
+              /* @__PURE__ */ jsx42("span", { className: "text-[10px] font-semibold uppercase tracking-widest text-foreground-subtle/30", children: "Slot: Recognizer" }),
+              child.children.map((grandchild) => /* @__PURE__ */ jsx42(
                 PipelineStep,
                 {
                   step: grandchild,
@@ -2504,7 +2526,7 @@ function PipelineBuilder({
                 },
                 grandchild.addonId
               )),
-              !readOnly && childChildPlaceholders.map((addon) => /* @__PURE__ */ jsx41(
+              !readOnly && childChildPlaceholders.map((addon) => /* @__PURE__ */ jsx42(
                 PlaceholderStep,
                 {
                   addon,
@@ -2523,7 +2545,7 @@ function PipelineBuilder({
             ] })
           ] }, child.addonId);
         }),
-        !readOnly && childPlaceholders.map((addon) => /* @__PURE__ */ jsx41(
+        !readOnly && childPlaceholders.map((addon) => /* @__PURE__ */ jsx42(
           PlaceholderStep,
           {
             addon,
@@ -2536,21 +2558,21 @@ function PipelineBuilder({
   }
   const rootSlots = schema.slots.filter((s) => s.parentSlot === null).sort((a, b) => a.priority - b.priority);
   return /* @__PURE__ */ jsxs25("div", { className: "space-y-4", children: [
-    /* @__PURE__ */ jsx41("div", { className: "rounded-xl border border-border bg-surface p-3", children: /* @__PURE__ */ jsxs25("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ jsx41("div", { className: "relative flex-1 min-w-0", children: /* @__PURE__ */ jsxs25(
+    /* @__PURE__ */ jsx42("div", { className: "rounded-xl border border-border bg-surface p-3", children: /* @__PURE__ */ jsxs25("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx42("div", { className: "relative flex-1 min-w-0", children: /* @__PURE__ */ jsxs25(
         "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__ */ jsx41("option", { value: "", children: "No template" }),
-            templates.map((t) => /* @__PURE__ */ jsx41("option", { value: t.id, children: t.name }, t.id))
+            /* @__PURE__ */ jsx42("option", { value: "", children: "No template" }),
+            templates.map((t) => /* @__PURE__ */ jsx42("option", { value: t.id, children: t.name }, t.id))
           ]
         }
       ) }),
-      dirty && /* @__PURE__ */ jsx41("span", { className: "h-1.5 w-1.5 rounded-full bg-amber-500 shrink-0" }),
-      /* @__PURE__ */ jsx41(
+      dirty && /* @__PURE__ */ jsx42("span", { className: "h-1.5 w-1.5 rounded-full bg-amber-500 shrink-0" }),
+      /* @__PURE__ */ jsx42(
         "button",
         {
           onClick: handleSave,
@@ -2560,10 +2582,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__ */ jsx41(Save, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ jsx42(Save, { className: "h-4 w-4" })
         }
       ),
-      /* @__PURE__ */ jsx41(
+      /* @__PURE__ */ jsx42(
         "button",
         {
           onClick: handleSaveAs,
@@ -2573,10 +2595,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__ */ jsx41(CopyPlus, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ jsx42(CopyPlus, { className: "h-4 w-4" })
         }
       ),
-      /* @__PURE__ */ jsx41(
+      /* @__PURE__ */ jsx42(
         "button",
         {
           onClick: handleDelete,
@@ -2586,14 +2608,14 @@ 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__ */ jsx41(Trash2, { className: "h-4 w-4" })
+          children: /* @__PURE__ */ jsx42(Trash2, { className: "h-4 w-4" })
         }
       )
     ] }) }),
     warnings.length > 0 && /* @__PURE__ */ jsxs25("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__ */ jsxs25("div", { className: "flex items-center justify-between", children: [
-        /* @__PURE__ */ jsx41("span", { className: "font-medium", children: "Template loaded with warnings:" }),
-        /* @__PURE__ */ jsx41("button", { onClick: () => setWarnings([]), className: "text-amber-400/60 hover:text-amber-400", children: /* @__PURE__ */ jsx41(X2, { className: "h-3.5 w-3.5" }) })
+        /* @__PURE__ */ jsx42("span", { className: "font-medium", children: "Template loaded with warnings:" }),
+        /* @__PURE__ */ jsx42("button", { onClick: () => setWarnings([]), className: "text-amber-400/60 hover:text-amber-400", children: /* @__PURE__ */ jsx42(X2, { className: "h-3.5 w-3.5" }) })
       ] }),
       warnings.map((w, i) => /* @__PURE__ */ jsxs25("div", { children: [
         "\u2022 ",
@@ -2609,7 +2631,7 @@ function PipelineBuilder({
           slot.label
         ] }),
         slotSteps.map((step) => renderStep(step)),
-        !readOnly && missingRootAddons.map((addon) => /* @__PURE__ */ jsx41(PlaceholderStep, { addon, onClick: () => {
+        !readOnly && missingRootAddons.map((addon) => /* @__PURE__ */ jsx42(PlaceholderStep, { addon, onClick: () => {
           onChange([...steps, createDefaultStep(addon, defaultRuntime, defaultBackend)]);
         } }, addon.id))
       ] }, slot.id);
@@ -2690,7 +2712,7 @@ function getClassColor(className, customColors) {
 
 // src/composites/detection-canvas.tsx
 import { useRef as useRef6, useEffect as useEffect6 } from "react";
-import { Fragment as Fragment2, jsx as jsx42, jsxs as jsxs26 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx43, jsxs as jsxs26 } from "react/jsx-runtime";
 var DEFAULT_CLASS_COLORS = CLASS_COLORS;
 function DetectionCanvas({
   src,
@@ -2710,7 +2732,7 @@ function DetectionCanvas({
   }
   const ratio = aspectRatio ?? (imageWidth && imageHeight ? `${imageWidth}/${imageHeight}` : "16/9");
   const filteredDetections = detections.filter((d) => d.confidence >= minConfidence);
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43(
     "div",
     {
       className: cn(
@@ -2719,9 +2741,9 @@ function DetectionCanvas({
       ),
       style: { aspectRatio: ratio },
       children: src ? /* @__PURE__ */ jsxs26(Fragment2, { children: [
-        /* @__PURE__ */ jsx42("img", { src, className: "absolute inset-0 w-full h-full object-fill", alt: "" }),
+        /* @__PURE__ */ jsx43("img", { src, className: "absolute inset-0 w-full h-full object-fill", alt: "" }),
         filteredDetections.map(
-          (d, i) => d.mask && d.maskWidth && d.maskHeight ? /* @__PURE__ */ jsx42(
+          (d, i) => d.mask && d.maskWidth && d.maskHeight ? /* @__PURE__ */ jsx43(
             MaskOverlay,
             {
               mask: d.mask,
@@ -2735,7 +2757,7 @@ function DetectionCanvas({
             `mask-${i}`
           ) : null
         ),
-        filteredDetections.map((d, i) => /* @__PURE__ */ jsx42(
+        filteredDetections.map((d, i) => /* @__PURE__ */ jsx43(
           BoundingBox,
           {
             detection: d,
@@ -2755,7 +2777,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__ */ jsx42(
+            }).map((child, j) => /* @__PURE__ */ jsx43(
               ChildBoundingBox,
               {
                 child,
@@ -2768,7 +2790,7 @@ function DetectionCanvas({
           },
           `det-${i}`
         ))
-      ] }) : /* @__PURE__ */ jsx42("div", { className: "w-full h-full flex items-center justify-center text-foreground-subtle text-sm", children: placeholder ?? "No image loaded" })
+      ] }) : /* @__PURE__ */ jsx43("div", { className: "w-full h-full flex items-center justify-center text-foreground-subtle text-sm", children: placeholder ?? "No image loaded" })
     }
   );
 }
@@ -2880,7 +2902,7 @@ function MaskOverlay({
     ctx.putImageData(imageData, 0, 0);
   }, [mask, maskWidth, maskHeight, color]);
   const [x1, y1, x2, y2] = bbox;
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43(
     "canvas",
     {
       ref: canvasRef,
@@ -2906,7 +2928,7 @@ function ChildBoundingBox({
   const pw = px2 - px1;
   const ph = py2 - py1;
   if (pw <= 0 || ph <= 0) return null;
-  return /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx43(
     "div",
     {
       className: "absolute rounded-sm",
@@ -2963,7 +2985,7 @@ function ChildBoundingBox({
 }
 
 // src/composites/detection-result-tree.tsx
-import { jsx as jsx43, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs27 } from "react/jsx-runtime";
 function DetectionResultTree({
   detections,
   classColors,
@@ -2973,7 +2995,7 @@ function DetectionResultTree({
 }) {
   const colors = classColors;
   if (detections.length === 0) {
-    return /* @__PURE__ */ jsx43("div", { className: "text-sm text-foreground-subtle italic text-center py-4", children: "No detections" });
+    return /* @__PURE__ */ jsx44("div", { className: "text-sm text-foreground-subtle italic text-center py-4", children: "No detections" });
   }
   return /* @__PURE__ */ jsxs27("div", { className, children: [
     /* @__PURE__ */ jsxs27("div", { className: "text-xs font-medium text-foreground-subtle uppercase tracking-wide mb-2", children: [
@@ -2981,7 +3003,7 @@ function DetectionResultTree({
       detections.length,
       ")"
     ] }),
-    /* @__PURE__ */ jsx43("div", { className: "space-y-2", children: detections.map((d, i) => /* @__PURE__ */ jsx43(
+    /* @__PURE__ */ jsx44("div", { className: "space-y-2", children: detections.map((d, i) => /* @__PURE__ */ jsx44(
       DetectionNode,
       {
         detection: d,
@@ -3006,7 +3028,7 @@ function DetectionNode({
   return /* @__PURE__ */ jsxs27("div", { className: `rounded-md border border-border bg-surface p-3 space-y-1 ${isVisible ? "" : "opacity-40"}`, children: [
     /* @__PURE__ */ jsxs27("div", { className: "flex justify-between items-center", children: [
       /* @__PURE__ */ jsxs27("div", { className: "flex items-center gap-2", children: [
-        onToggleVisibility && /* @__PURE__ */ jsx43(
+        onToggleVisibility && /* @__PURE__ */ jsx44(
           "input",
           {
             type: "checkbox",
@@ -3015,14 +3037,14 @@ function DetectionNode({
             className: "h-3.5 w-3.5 rounded border-border accent-primary cursor-pointer shrink-0"
           }
         ),
-        /* @__PURE__ */ jsx43(
+        /* @__PURE__ */ jsx44(
           "span",
           {
             className: "h-2.5 w-2.5 rounded-full shrink-0",
             style: { backgroundColor: color }
           }
         ),
-        /* @__PURE__ */ jsx43("span", { className: "text-sm font-medium text-foreground", children: detection.className }),
+        /* @__PURE__ */ jsx44("span", { className: "text-sm font-medium text-foreground", children: detection.className }),
         detection.mask && detection.maskWidth && detection.maskHeight && /* @__PURE__ */ jsxs27("span", { className: "text-[9px] font-mono px-1 py-0.5 rounded bg-primary/10 text-primary", children: [
           "mask ",
           detection.maskWidth,
@@ -3030,14 +3052,14 @@ function DetectionNode({
           detection.maskHeight
         ] })
       ] }),
-      /* @__PURE__ */ jsx43(ConfidenceBadge, { confidence: detection.confidence })
+      /* @__PURE__ */ jsx44(ConfidenceBadge, { confidence: detection.confidence })
     ] }),
     /* @__PURE__ */ jsxs27("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__ */ jsx43("div", { className: "flex flex-wrap gap-1 mt-1", children: detection.labelsData.map((l, k) => /* @__PURE__ */ jsxs27(
+    detection.labelsData && detection.labelsData.length > 0 && /* @__PURE__ */ jsx44("div", { className: "flex flex-wrap gap-1 mt-1", children: detection.labelsData.map((l, k) => /* @__PURE__ */ jsxs27(
       "span",
       {
         className: "inline-flex items-center gap-1 text-[10px] font-medium px-1.5 py-0.5 rounded-full",
@@ -3048,12 +3070,12 @@ function DetectionNode({
             (l.score * 100).toFixed(0),
             "%"
           ] }),
-          l.addonId && /* @__PURE__ */ jsx43("span", { className: "opacity-40 text-[8px]", children: l.addonId })
+          l.addonId && /* @__PURE__ */ jsx44("span", { className: "opacity-40 text-[8px]", children: l.addonId })
         ]
       },
       k
     )) }),
-    detection.children && detection.children.length > 0 && /* @__PURE__ */ jsx43(
+    detection.children && detection.children.length > 0 && /* @__PURE__ */ jsx44(
       ChildrenTree,
       {
         children: detection.children,
@@ -3072,13 +3094,13 @@ function ChildrenTree({
   hiddenKeys,
   onToggleVisibility
 }) {
-  return /* @__PURE__ */ jsx43("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__ */ jsx44("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__ */ jsxs27("div", { className: `text-xs space-y-0.5 ${isVisible ? "" : "opacity-40"}`, children: [
       /* @__PURE__ */ jsxs27("div", { className: "flex items-center gap-1.5", children: [
-        onToggleVisibility && /* @__PURE__ */ jsx43(
+        onToggleVisibility && /* @__PURE__ */ jsx44(
           "input",
           {
             type: "checkbox",
@@ -3087,14 +3109,14 @@ function ChildrenTree({
             className: "h-3 w-3 rounded border-border accent-primary cursor-pointer shrink-0"
           }
         ),
-        /* @__PURE__ */ jsx43(
+        /* @__PURE__ */ jsx44(
           "span",
           {
             className: "h-1.5 w-1.5 rounded-full shrink-0",
             style: { backgroundColor: childColor }
           }
         ),
-        /* @__PURE__ */ jsx43("span", { className: "font-medium", style: { color: childColor }, children: child.className }),
+        /* @__PURE__ */ jsx44("span", { className: "font-medium", style: { color: childColor }, children: child.className }),
         /* @__PURE__ */ jsxs27("span", { className: "text-foreground-subtle", children: [
           (child.confidence * 100).toFixed(0),
           "%"
@@ -3106,7 +3128,7 @@ function ChildrenTree({
           child.maskHeight
         ] })
       ] }),
-      child.labelsData && child.labelsData.length > 0 && /* @__PURE__ */ jsx43("div", { className: "flex flex-wrap gap-1 ml-5 mt-0.5", children: child.labelsData.map((l, k) => /* @__PURE__ */ jsxs27(
+      child.labelsData && child.labelsData.length > 0 && /* @__PURE__ */ jsx44("div", { className: "flex flex-wrap gap-1 ml-5 mt-0.5", children: child.labelsData.map((l, k) => /* @__PURE__ */ jsxs27(
         "span",
         {
           className: "inline-flex items-center gap-0.5 text-[9px] font-medium px-1 py-0.5 rounded-full",
@@ -3122,7 +3144,7 @@ function ChildrenTree({
         },
         k
       )) }),
-      child.children && child.children.length > 0 && /* @__PURE__ */ jsx43(
+      child.children && child.children.length > 0 && /* @__PURE__ */ jsx44(
         ChildrenTree,
         {
           children: child.children,
@@ -3144,22 +3166,22 @@ function ConfidenceBadge({ confidence }) {
 }
 
 // src/composites/step-timings.tsx
-import { jsx as jsx44, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs28 } 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__ */ jsxs28("div", { className: `rounded-lg border border-border bg-surface p-3 space-y-2 ${className ?? ""}`, children: [
-    /* @__PURE__ */ jsx44("div", { className: "text-xs font-medium text-foreground-subtle uppercase tracking-wide", children: "Timings" }),
+    /* @__PURE__ */ jsx45("div", { className: "text-xs font-medium text-foreground-subtle uppercase tracking-wide", children: "Timings" }),
     /* @__PURE__ */ jsxs28("div", { className: "space-y-1 text-xs", children: [
       entries.map(([step, ms]) => /* @__PURE__ */ jsxs28("div", { className: "flex justify-between", children: [
-        /* @__PURE__ */ jsx44("span", { className: "text-foreground-subtle", children: step }),
+        /* @__PURE__ */ jsx45("span", { className: "text-foreground-subtle", children: step }),
         /* @__PURE__ */ jsxs28("span", { className: "font-mono text-foreground", children: [
           ms.toFixed(1),
           "ms"
         ] })
       ] }, step)),
       totalMs !== void 0 && /* @__PURE__ */ jsxs28("div", { className: "flex justify-between pt-1 border-t border-border font-medium text-foreground", children: [
-        /* @__PURE__ */ jsx44("span", { children: "Total" }),
+        /* @__PURE__ */ jsx45("span", { children: "Total" }),
         /* @__PURE__ */ jsxs28("span", { className: "font-mono", children: [
           totalMs.toFixed(1),
           "ms"
@@ -3170,7 +3192,7 @@ function StepTimings({ timings, totalMs, className }) {
 }
 
 // src/composites/image-selector.tsx
-import { jsx as jsx45, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs29 } from "react/jsx-runtime";
 function ImageSelector({
   images,
   selectedFilename,
@@ -3197,7 +3219,7 @@ function ImageSelector({
     input.click();
   };
   return /* @__PURE__ */ jsxs29("div", { className: `flex flex-wrap items-center gap-2 ${className ?? ""}`, children: [
-    images.map((img) => /* @__PURE__ */ jsx45(
+    images.map((img) => /* @__PURE__ */ jsx46(
       "button",
       {
         onClick: () => onSelect(img.filename),
@@ -3206,7 +3228,7 @@ function ImageSelector({
       },
       img.filename
     )),
-    /* @__PURE__ */ jsx45(
+    /* @__PURE__ */ jsx46(
       "button",
       {
         onClick: handleUploadClick,
@@ -3214,12 +3236,12 @@ function ImageSelector({
         children: "Upload..."
       }
     ),
-    uploadedName && /* @__PURE__ */ jsx45("span", { className: "text-xs text-foreground-subtle", children: uploadedName })
+    uploadedName && /* @__PURE__ */ jsx46("span", { className: "text-xs text-foreground-subtle", children: uploadedName })
   ] });
 }
 
 // src/composites/inference-config-selector.tsx
-import { jsx as jsx46, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs30 } 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,
@@ -3241,8 +3263,8 @@ function InferenceConfigSelector({
   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__ */ jsxs30("div", { className: `${containerClass} ${className ?? ""}`, children: [
     showAgent && agents.length > 0 && /* @__PURE__ */ jsxs30("label", { className: "space-y-1", children: [
-      /* @__PURE__ */ jsx46("span", { className: "text-xs font-medium text-foreground-subtle", children: "Agent" }),
-      /* @__PURE__ */ jsx46(
+      /* @__PURE__ */ jsx47("span", { className: "text-xs font-medium text-foreground-subtle", children: "Agent" }),
+      /* @__PURE__ */ jsx47(
         "select",
         {
           value: agentId,
@@ -3258,8 +3280,8 @@ function InferenceConfigSelector({
       )
     ] }),
     /* @__PURE__ */ jsxs30("label", { className: "space-y-1", children: [
-      /* @__PURE__ */ jsx46("span", { className: "text-xs font-medium text-foreground-subtle", children: "Runtime" }),
-      /* @__PURE__ */ jsx46(
+      /* @__PURE__ */ jsx47("span", { className: "text-xs font-medium text-foreground-subtle", children: "Runtime" }),
+      /* @__PURE__ */ jsx47(
         "select",
         {
           value: runtime,
@@ -3273,8 +3295,8 @@ function InferenceConfigSelector({
       )
     ] }),
     /* @__PURE__ */ jsxs30("label", { className: "space-y-1", children: [
-      /* @__PURE__ */ jsx46("span", { className: "text-xs font-medium text-foreground-subtle", children: "Backend" }),
-      /* @__PURE__ */ jsx46(
+      /* @__PURE__ */ jsx47("span", { className: "text-xs font-medium text-foreground-subtle", children: "Backend" }),
+      /* @__PURE__ */ jsx47(
         "select",
         {
           value: backend,
@@ -3288,14 +3310,14 @@ function InferenceConfigSelector({
       )
     ] }),
     /* @__PURE__ */ jsxs30("label", { className: "space-y-1", children: [
-      /* @__PURE__ */ jsx46("span", { className: "text-xs font-medium text-foreground-subtle", children: "Model" }),
-      /* @__PURE__ */ jsx46(
+      /* @__PURE__ */ jsx47("span", { className: "text-xs font-medium text-foreground-subtle", children: "Model" }),
+      /* @__PURE__ */ jsx47(
         "select",
         {
           value: modelId,
           onChange: (e) => onModelChange(e.target.value),
           className: SELECT_CLASS,
-          children: models.length === 0 ? /* @__PURE__ */ jsx46("option", { value: "", children: "No compatible models" }) : models.map((m) => /* @__PURE__ */ jsxs30("option", { value: m.id, children: [
+          children: models.length === 0 ? /* @__PURE__ */ jsx47("option", { value: "", children: "No compatible models" }) : models.map((m) => /* @__PURE__ */ jsxs30("option", { value: m.id, children: [
             m.name,
             m.downloaded ? " \u2713" : ""
           ] }, m.id))
@@ -3316,7 +3338,7 @@ import superjson from "superjson";
 
 // src/composites/login-form.tsx
 import { useState as useState11 } from "react";
-import { jsx as jsx47, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs31 } from "react/jsx-runtime";
 function EyeIcon({ className }) {
   return /* @__PURE__ */ jsxs31(
     "svg",
@@ -3330,8 +3352,8 @@ function EyeIcon({ className }) {
       strokeLinejoin: "round",
       className,
       children: [
-        /* @__PURE__ */ jsx47("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__ */ jsx47("circle", { cx: "12", cy: "12", r: "3" })
+        /* @__PURE__ */ jsx48("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__ */ jsx48("circle", { cx: "12", cy: "12", r: "3" })
       ]
     }
   );
@@ -3349,16 +3371,16 @@ function EyeOffIcon({ className }) {
       strokeLinejoin: "round",
       className,
       children: [
-        /* @__PURE__ */ jsx47("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__ */ jsx47("path", { d: "M14.084 14.158a3 3 0 0 1-4.242-4.242" }),
-        /* @__PURE__ */ jsx47("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__ */ jsx47("path", { d: "m2 2 20 20" })
+        /* @__PURE__ */ jsx48("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__ */ jsx48("path", { d: "M14.084 14.158a3 3 0 0 1-4.242-4.242" }),
+        /* @__PURE__ */ jsx48("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__ */ jsx48("path", { d: "m2 2 20 20" })
       ]
     }
   );
 }
 function SpinnerIcon({ className }) {
-  return /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx48(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -3369,7 +3391,7 @@ function SpinnerIcon({ className }) {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       className,
-      children: /* @__PURE__ */ jsx47("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
+      children: /* @__PURE__ */ jsx48("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
     }
   );
 }
@@ -3400,7 +3422,7 @@ function LoginForm({
       setSubmitting(false);
     }
   };
-  return /* @__PURE__ */ jsx47(
+  return /* @__PURE__ */ jsx48(
     "div",
     {
       className: cn(
@@ -3408,18 +3430,18 @@ function LoginForm({
         className
       ),
       children: /* @__PURE__ */ jsxs31("div", { className: "w-full max-w-sm", children: [
-        logoSrc && /* @__PURE__ */ jsx47("div", { className: "flex justify-center mb-8", children: /* @__PURE__ */ jsx47("img", { src: logoSrc, alt: "Logo", className: "h-12" }) }),
-        serverUrl && /* @__PURE__ */ jsx47("p", { className: "mb-4 text-center text-xs text-foreground-subtle truncate", children: serverUrl }),
+        logoSrc && /* @__PURE__ */ jsx48("div", { className: "flex justify-center mb-8", children: /* @__PURE__ */ jsx48("img", { src: logoSrc, alt: "Logo", className: "h-12" }) }),
+        serverUrl && /* @__PURE__ */ jsx48("p", { className: "mb-4 text-center text-xs text-foreground-subtle truncate", children: serverUrl }),
         /* @__PURE__ */ jsxs31(
           "form",
           {
             onSubmit: handleSubmit,
             className: "space-y-4 rounded-xl border border-border bg-surface p-6 shadow-xl shadow-black/10",
             children: [
-              error && /* @__PURE__ */ jsx47("div", { className: "rounded-md bg-danger/10 border border-danger/20 px-3 py-2 text-xs text-danger", children: error }),
+              error && /* @__PURE__ */ jsx48("div", { className: "rounded-md bg-danger/10 border border-danger/20 px-3 py-2 text-xs text-danger", children: error }),
               /* @__PURE__ */ jsxs31("div", { className: "space-y-1.5", children: [
-                /* @__PURE__ */ jsx47("label", { className: "text-xs font-medium text-foreground-subtle", children: "Username" }),
-                /* @__PURE__ */ jsx47(
+                /* @__PURE__ */ jsx48("label", { className: "text-xs font-medium text-foreground-subtle", children: "Username" }),
+                /* @__PURE__ */ jsx48(
                   "input",
                   {
                     type: "text",
@@ -3432,9 +3454,9 @@ function LoginForm({
                 )
               ] }),
               /* @__PURE__ */ jsxs31("div", { className: "space-y-1.5", children: [
-                /* @__PURE__ */ jsx47("label", { className: "text-xs font-medium text-foreground-subtle", children: "Password" }),
+                /* @__PURE__ */ jsx48("label", { className: "text-xs font-medium text-foreground-subtle", children: "Password" }),
                 /* @__PURE__ */ jsxs31("div", { className: "relative", children: [
-                  /* @__PURE__ */ jsx47(
+                  /* @__PURE__ */ jsx48(
                     "input",
                     {
                       type: showPassword ? "text" : "password",
@@ -3445,14 +3467,14 @@ 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__ */ jsx47(
+                  /* @__PURE__ */ jsx48(
                     "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__ */ jsx47(EyeOffIcon, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx47(EyeIcon, { className: "h-4 w-4" })
+                      children: showPassword ? /* @__PURE__ */ jsx48(EyeOffIcon, { className: "h-4 w-4" }) : /* @__PURE__ */ jsx48(EyeIcon, { className: "h-4 w-4" })
                     }
                   )
                 ] })
@@ -3464,7 +3486,7 @@ function LoginForm({
                   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__ */ jsx47(SpinnerIcon, { className: "h-4 w-4 animate-spin" }),
+                    submitting && /* @__PURE__ */ jsx48(SpinnerIcon, { className: "h-4 w-4 animate-spin" }),
                     submitting ? "Logging in..." : "Log in"
                   ]
                 }
@@ -3478,7 +3500,7 @@ function LoginForm({
 }
 
 // src/composites/dev-shell.tsx
-import { jsx as jsx48, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs32 } from "react/jsx-runtime";
 var STORAGE_KEY = "camstack_dev_token";
 var DevShellContext = createContext7(null);
 function useDevShell() {
@@ -3505,21 +3527,21 @@ function SunIcon({ className }) {
       strokeLinejoin: "round",
       className,
       children: [
-        /* @__PURE__ */ jsx48("circle", { cx: "12", cy: "12", r: "4" }),
-        /* @__PURE__ */ jsx48("path", { d: "M12 2v2" }),
-        /* @__PURE__ */ jsx48("path", { d: "M12 20v2" }),
-        /* @__PURE__ */ jsx48("path", { d: "m4.93 4.93 1.41 1.41" }),
-        /* @__PURE__ */ jsx48("path", { d: "m17.66 17.66 1.41 1.41" }),
-        /* @__PURE__ */ jsx48("path", { d: "M2 12h2" }),
-        /* @__PURE__ */ jsx48("path", { d: "M20 12h2" }),
-        /* @__PURE__ */ jsx48("path", { d: "m6.34 17.66-1.41 1.41" }),
-        /* @__PURE__ */ jsx48("path", { d: "m19.07 4.93-1.41 1.41" })
+        /* @__PURE__ */ jsx49("circle", { cx: "12", cy: "12", r: "4" }),
+        /* @__PURE__ */ jsx49("path", { d: "M12 2v2" }),
+        /* @__PURE__ */ jsx49("path", { d: "M12 20v2" }),
+        /* @__PURE__ */ jsx49("path", { d: "m4.93 4.93 1.41 1.41" }),
+        /* @__PURE__ */ jsx49("path", { d: "m17.66 17.66 1.41 1.41" }),
+        /* @__PURE__ */ jsx49("path", { d: "M2 12h2" }),
+        /* @__PURE__ */ jsx49("path", { d: "M20 12h2" }),
+        /* @__PURE__ */ jsx49("path", { d: "m6.34 17.66-1.41 1.41" }),
+        /* @__PURE__ */ jsx49("path", { d: "m19.07 4.93-1.41 1.41" })
       ]
     }
   );
 }
 function MoonIcon({ className }) {
-  return /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx49(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -3530,7 +3552,7 @@ function MoonIcon({ className }) {
       strokeLinecap: "round",
       strokeLinejoin: "round",
       className,
-      children: /* @__PURE__ */ jsx48("path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" })
+      children: /* @__PURE__ */ jsx49("path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" })
     }
   );
 }
@@ -3569,12 +3591,12 @@ function DevShellInner({
     () => ({ trpc, token, logout: onLogout }),
     [trpc, token, onLogout]
   );
-  return /* @__PURE__ */ jsx48(DevShellContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs32("div", { className: "min-h-screen bg-background text-foreground", children: [
+  return /* @__PURE__ */ jsx49(DevShellContext.Provider, { value: contextValue, children: /* @__PURE__ */ jsxs32("div", { className: "min-h-screen bg-background text-foreground", children: [
     /* @__PURE__ */ jsxs32("div", { className: "flex items-center justify-between border-b border-border bg-surface px-4 py-2", children: [
       /* @__PURE__ */ jsxs32("div", { className: "flex items-center gap-2", children: [
-        /* @__PURE__ */ jsx48("span", { className: "rounded bg-warning/20 px-2 py-0.5 text-xs font-bold text-warning", children: "DEV MODE" }),
-        title && /* @__PURE__ */ jsx48("span", { className: "text-sm font-medium text-foreground", children: title }),
-        /* @__PURE__ */ jsx48("span", { className: "text-xs text-foreground-subtle", children: serverUrl })
+        /* @__PURE__ */ jsx49("span", { className: "rounded bg-warning/20 px-2 py-0.5 text-xs font-bold text-warning", children: "DEV MODE" }),
+        title && /* @__PURE__ */ jsx49("span", { className: "text-sm font-medium text-foreground", children: title }),
+        /* @__PURE__ */ jsx49("span", { className: "text-xs text-foreground-subtle", children: serverUrl })
       ] }),
       /* @__PURE__ */ jsxs32("div", { className: "flex items-center gap-2", children: [
         /* @__PURE__ */ jsxs32(
@@ -3585,12 +3607,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__ */ jsx48(SunIcon, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx48(MoonIcon, { className: "h-3.5 w-3.5" }),
+              theme.resolvedMode === "dark" ? /* @__PURE__ */ jsx49(SunIcon, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ jsx49(MoonIcon, { className: "h-3.5 w-3.5" }),
               theme.mode === "dark" ? "Dark" : theme.mode === "light" ? "Light" : "System"
             ]
           }
         ),
-        /* @__PURE__ */ jsx48(
+        /* @__PURE__ */ jsx49(
           "button",
           {
             type: "button",
@@ -3601,7 +3623,7 @@ function DevShellInner({
         )
       ] })
     ] }),
-    /* @__PURE__ */ jsx48("div", { className: "p-4", children: children({ trpc, theme }) })
+    /* @__PURE__ */ jsx49("div", { className: "p-4", children: children({ trpc, theme }) })
   ] }) });
 }
 function DevShell({
@@ -3632,9 +3654,9 @@ function DevShell({
     setToken(null);
   }, []);
   if (!token) {
-    return /* @__PURE__ */ jsx48(ThemeProvider, { children: /* @__PURE__ */ jsx48(LoginForm, { onLogin: handleLogin, serverUrl }) });
+    return /* @__PURE__ */ jsx49(ThemeProvider, { children: /* @__PURE__ */ jsx49(LoginForm, { onLogin: handleLogin, serverUrl }) });
   }
-  return /* @__PURE__ */ jsx48(ThemeProvider, { children: /* @__PURE__ */ jsx48(
+  return /* @__PURE__ */ jsx49(ThemeProvider, { children: /* @__PURE__ */ jsx49(
     DevShellInner,
     {
       serverUrl,
@@ -3721,6 +3743,7 @@ export {
   ProviderBadge,
   ScrollArea,
   Select,
+  SemanticBadge,
   Separator,
   Sidebar,
   SidebarItem,
@@ -3737,6 +3760,7 @@ export {
   Tooltip,
   TooltipContent,
   TooltipTrigger,
+  VersionBadge,
   cn,
   createTheme,
   darkColors,