@camstack/ui-library 0.1.25 → 0.1.27

package/dist/index.cjs

@@ -1,7 +1,9 @@
 "use strict";
+var __create = Object.create;
 var __defProp = Object.defineProperty;
 var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
 var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
 var __hasOwnProp = Object.prototype.hasOwnProperty;
 var __export = (target, all) => {
   for (var name in all)
@@ -15,6 +17,14 @@ var __copyProps = (to, from, except, desc) => {
   }
   return to;
 };
+var __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
 var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
 
 // src/index.ts
@@ -23,11 +33,17 @@ __export(src_exports, {
   AppShell: () => AppShell,
   Badge: () => Badge,
   Button: () => Button,
+  CLASS_COLORS: () => CLASS_COLORS,
   Card: () => Card,
   Checkbox: () => Checkbox,
   CodeBlock: () => CodeBlock,
   ConfirmDialog: () => ConfirmDialog,
+  DEFAULT_CLASS_COLORS: () => DEFAULT_CLASS_COLORS,
+  DEFAULT_COLOR: () => DEFAULT_COLOR,
   DataTable: () => DataTable,
+  DetectionCanvas: () => DetectionCanvas,
+  DetectionResultTree: () => DetectionResultTree,
+  DevShell: () => DevShell,
   DeviceCard: () => DeviceCard,
   DeviceGrid: () => DeviceGrid,
   Dialog: () => Dialog,
@@ -46,22 +62,30 @@ __export(src_exports, {
   FloatingPanel: () => FloatingPanel,
   FormField: () => FormField,
   IconButton: () => IconButton,
+  ImageSelector: () => ImageSelector,
+  InferenceConfigSelector: () => InferenceConfigSelector,
   Input: () => Input,
   KeyValueList: () => KeyValueList,
   Label: () => Label,
+  LoginForm: () => LoginForm,
   PageHeader: () => PageHeader,
+  PipelineBuilder: () => PipelineBuilder,
+  PipelineRuntimeSelector: () => PipelineRuntimeSelector,
+  PipelineStep: () => PipelineStep,
   Popover: () => Popover,
   PopoverContent: () => PopoverContent,
   PopoverTrigger: () => PopoverTrigger,
   ProviderBadge: () => ProviderBadge,
   ScrollArea: () => ScrollArea,
   Select: () => Select,
+  SemanticBadge: () => SemanticBadge,
   Separator: () => Separator,
   Sidebar: () => Sidebar,
   SidebarItem: () => SidebarItem,
   Skeleton: () => Skeleton,
   StatCard: () => StatCard,
   StatusBadge: () => StatusBadge,
+  StepTimings: () => StepTimings,
   Switch: () => Switch,
   Tabs: () => Tabs,
   TabsContent: () => TabsContent,
@@ -71,14 +95,18 @@ __export(src_exports, {
   Tooltip: () => Tooltip,
   TooltipContent: () => TooltipContent,
   TooltipTrigger: () => TooltipTrigger,
+  VersionBadge: () => VersionBadge,
   cn: () => cn,
   createTheme: () => createTheme,
   darkColors: () => darkColors,
   defaultTheme: () => defaultTheme,
+  getClassColor: () => getClassColor,
   lightColors: () => lightColors,
+  mountAddonPage: () => mountAddonPage,
   providerIcons: () => providerIcons,
   statusIcons: () => statusIcons,
   themeToCss: () => themeToCss,
+  useDevShell: () => useDevShell,
   useThemeMode: () => useThemeMode
 });
 module.exports = __toCommonJS(src_exports);
@@ -1322,8 +1350,30 @@ function ProviderBadge({
   ] });
 }
 
-// src/composites/form-field.tsx
+// src/composites/version-badge.tsx
 var import_jsx_runtime22 = require("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__ */ (0, import_jsx_runtime22.jsx)("span", { className: cn(
+    "inline-flex items-center rounded-md px-2 py-0.5 text-[11px] font-bold leading-tight",
+    mono && "font-mono",
+    VARIANT_STYLES[variant],
+    className
+  ), children });
+}
+function VersionBadge({ version, preRelease, className }) {
+  const isPreRelease = preRelease ?? /-(alpha|beta|rc|dev|canary|next)/i.test(version);
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(SemanticBadge, { variant: isPreRelease ? "warning" : "success", mono: true, className, children: version });
+}
+
+// src/composites/form-field.tsx
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function FormField({
   label,
   description,
@@ -1334,7 +1384,7 @@ function FormField({
   className
 }) {
   const isHorizontal = orientation === "horizontal";
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(
     "div",
     {
       className: cn(
@@ -1343,34 +1393,34 @@ function FormField({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: cn(isHorizontal ? "flex-1" : ""), children: [
-          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Label, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: cn(isHorizontal ? "flex-1" : ""), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)(Label, { children: [
             label,
-            required && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("span", { className: "text-danger ml-0.5", children: "*" })
+            required && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "text-danger ml-0.5", children: "*" })
           ] }),
-          description && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "text-foreground-subtle text-xs mt-0.5", children: description })
+          description && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-foreground-subtle text-xs mt-0.5", children: description })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: cn(isHorizontal ? "shrink-0" : ""), children }),
-        error && /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("p", { className: "text-danger text-xs", children: error })
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: cn(isHorizontal ? "shrink-0" : ""), children }),
+        error && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-danger text-xs", children: error })
       ]
     }
   );
 }
 
 // src/composites/page-header.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 function PageHeader({ title, subtitle, actions, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { className: cn("flex items-center justify-between mb-3", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("h1", { className: "text-sm font-semibold text-foreground", children: title }),
-      subtitle && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("p", { className: "text-foreground-subtle text-xs", children: subtitle })
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: cn("flex items-center justify-between mb-3", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("h1", { className: "text-sm font-semibold text-foreground", children: title }),
+      subtitle && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-foreground-subtle text-xs", children: subtitle })
     ] }),
-    actions && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex items-center gap-2", children: actions })
+    actions && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "flex items-center gap-2", children: actions })
   ] });
 }
 
 // src/composites/empty-state.tsx
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 function EmptyState({
   icon: Icon,
   title,
@@ -1378,18 +1428,18 @@ function EmptyState({
   action,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: cn("flex flex-col items-center justify-center gap-3 py-12", className), children: [
-    Icon && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon, { className: "h-12 w-12 text-foreground-subtle", "aria-hidden": "true" }),
-    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "flex flex-col items-center gap-1 text-center", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-foreground-muted text-sm font-medium", children: title }),
-      description && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("p", { className: "text-foreground-subtle text-xs max-w-xs", children: description })
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: cn("flex flex-col items-center justify-center gap-3 py-12", className), children: [
+    Icon && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon, { className: "h-12 w-12 text-foreground-subtle", "aria-hidden": "true" }),
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("div", { className: "flex flex-col items-center gap-1 text-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "text-foreground-muted text-sm font-medium", children: title }),
+      description && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("p", { className: "text-foreground-subtle text-xs max-w-xs", children: description })
     ] }),
-    action && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "mt-1", children: action })
+    action && /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("div", { className: "mt-1", children: action })
   ] });
 }
 
 // src/composites/confirm-dialog.tsx
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function ConfirmDialog({
   title,
   message,
@@ -1401,14 +1451,14 @@ function ConfirmDialog({
   open,
   onOpenChange
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Dialog, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(DialogContent, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(DialogHeader, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DialogTitle, { children: title }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(DialogDescription, { children: message })
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Dialog, { open, onOpenChange, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(DialogContent, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(DialogHeader, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DialogTitle, { children: title }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(DialogDescription, { children: message })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(DialogFooter, { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Button, { variant: "ghost", onClick: onCancel, children: cancelLabel }),
-      /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(DialogFooter, { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Button, { variant: "ghost", onClick: onCancel, children: cancelLabel }),
+      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
         Button,
         {
           variant: variant === "danger" ? "danger" : "primary",
@@ -1422,12 +1472,12 @@ function ConfirmDialog({
 
 // src/composites/stat-card.tsx
 var import_lucide_react5 = require("lucide-react");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function StatCard({ value, label, trend, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(Card, { className: cn("flex flex-col gap-1", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "flex items-baseline gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-2xl font-semibold text-foreground", children: value }),
-      trend && /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(Card, { className: cn("flex flex-col gap-1", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("div", { className: "flex items-baseline gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "text-2xl font-semibold text-foreground", children: value }),
+      trend && /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
         "span",
         {
           className: cn(
@@ -1435,27 +1485,27 @@ function StatCard({ value, label, trend, className }) {
             trend.direction === "up" ? "text-success" : "text-danger"
           ),
           children: [
-            trend.direction === "up" ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react5.TrendingUp, { className: "h-3 w-3" }) : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_lucide_react5.TrendingDown, { className: "h-3 w-3" }),
+            trend.direction === "up" ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react5.TrendingUp, { className: "h-3 w-3" }) : /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_lucide_react5.TrendingDown, { className: "h-3 w-3" }),
             trend.value,
             "%"
           ]
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-xs text-foreground-muted", children: label })
+    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "text-xs text-foreground-muted", children: label })
   ] });
 }
 
 // src/composites/key-value-list.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function KeyValueList({ items, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("dl", { className: cn("flex flex-col", className), children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("dl", { className: cn("flex flex-col", className), children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
     "div",
     {
       className: "flex items-center h-7",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("dt", { className: "text-foreground-subtle text-xs w-1/3 shrink-0", children: item.key }),
-        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("dd", { className: "text-foreground text-xs", children: item.value })
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("dt", { className: "text-foreground-subtle text-xs w-1/3 shrink-0", children: item.key }),
+        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("dd", { className: "text-foreground text-xs", children: item.value })
       ]
     },
     item.key
@@ -1465,7 +1515,7 @@ function KeyValueList({ items, className }) {
 // src/composites/code-block.tsx
 var import_react21 = require("react");
 var import_lucide_react6 = require("lucide-react");
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function CodeBlock({ children, maxHeight = 300, className }) {
   const [copied, setCopied] = (0, import_react21.useState)(false);
   const handleCopy = (0, import_react21.useCallback)(() => {
@@ -1474,9 +1524,9 @@ function CodeBlock({ children, maxHeight = 300, className }) {
       setTimeout(() => setCopied(false), 2e3);
     });
   }, [children]);
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { className: cn("relative group", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(ScrollArea, { style: { maxHeight }, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("pre", { className: "font-mono text-xs bg-surface p-3 rounded-md border border-border-subtle", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("code", { children }) }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity", children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: cn("relative group", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(ScrollArea, { style: { maxHeight }, children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("pre", { className: "font-mono text-xs bg-surface p-3 rounded-md border border-border-subtle", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("code", { children }) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       IconButton,
       {
         icon: copied ? import_lucide_react6.Check : import_lucide_react6.Copy,
@@ -1491,27 +1541,27 @@ function CodeBlock({ children, maxHeight = 300, className }) {
 
 // src/composites/filter-bar.tsx
 var import_lucide_react7 = require("lucide-react");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 function FilterBar({ filters, values, onChange, className }) {
   const handleChange = (key, value) => {
     onChange({ ...values, [key]: value });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: cn("flex items-center gap-2 flex-wrap", className), children: filters.map((filter) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: cn("flex items-center gap-2 flex-wrap", className), children: filters.map((filter) => {
     switch (filter.type) {
       case "search":
-        return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
           Input,
           {
             placeholder: filter.placeholder ?? "Search...",
             value: values[filter.key] ?? "",
             onChange: (e) => handleChange(filter.key, e.target.value),
-            leftSlot: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_lucide_react7.Search, { className: "h-3 w-3 text-foreground-subtle" }),
+            leftSlot: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_lucide_react7.Search, { className: "h-3 w-3 text-foreground-subtle" }),
             className: "w-48"
           },
           filter.key
         );
       case "select":
-        return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+        return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
           Select,
           {
             options: filter.options,
@@ -1522,10 +1572,10 @@ function FilterBar({ filters, values, onChange, className }) {
           filter.key
         );
       case "badge-toggle":
-        return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "flex items-center gap-1", children: filter.options.map((option) => {
+        return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "flex items-center gap-1", children: filter.options.map((option) => {
           const currentValue = values[filter.key];
           const isActive = currentValue === option.value;
-          return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
             "button",
             {
               type: "button",
@@ -1533,7 +1583,7 @@ function FilterBar({ filters, values, onChange, className }) {
                 filter.key,
                 isActive ? void 0 : option.value
               ),
-              children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+              children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                 Badge,
                 {
                   variant: isActive ? "info" : "default",
@@ -1552,7 +1602,7 @@ function FilterBar({ filters, values, onChange, className }) {
 }
 
 // src/composites/app-shell/sidebar-item.tsx
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function SidebarItem({
   label,
   icon: Icon,
@@ -1561,7 +1611,7 @@ function SidebarItem({
   active = false,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
     "a",
     {
       href,
@@ -1571,18 +1621,18 @@ function SidebarItem({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { className: "h-3.5 w-3.5 shrink-0" }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "truncate flex-1", children: label }),
-        badge !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Badge, { className: "ml-auto text-[10px] px-1.5 py-0", children: badge })
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Icon, { className: "h-3.5 w-3.5 shrink-0" }),
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "truncate flex-1", children: label }),
+        badge !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Badge, { className: "ml-auto text-[10px] px-1.5 py-0", children: badge })
       ]
     }
   );
 }
 
 // src/composites/app-shell/sidebar.tsx
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_jsx_runtime32 = require("react/jsx-runtime");
 function Sidebar({ logo, sections, footer, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
     "nav",
     {
       className: cn(
@@ -1590,14 +1640,14 @@ function Sidebar({ logo, sections, footer, className }) {
         className
       ),
       children: [
-        logo && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "px-3 py-2 shrink-0", children: logo }),
-        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex-1 overflow-auto px-1 py-1", children: sections.map((section, sectionIndex) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: cn(sectionIndex > 0 ? "mt-3" : ""), children: [
-          section.label && /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "text-[10px] text-foreground-disabled uppercase tracking-wider px-2 mb-1 block", children: section.label }),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex flex-col gap-0.5", children: section.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SidebarItem, { ...item }, item.href)) })
+        logo && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "px-3 py-2 shrink-0", children: logo }),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex-1 overflow-auto px-1 py-1", children: sections.map((section, sectionIndex) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: cn(sectionIndex > 0 ? "mt-3" : ""), children: [
+          section.label && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-[10px] text-foreground-disabled uppercase tracking-wider px-2 mb-1 block", children: section.label }),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex flex-col gap-0.5", children: section.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SidebarItem, { ...item }, item.href)) })
         ] }, sectionIndex)) }),
-        footer && footer.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "shrink-0 px-1 pb-1", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Separator, { className: "mb-1" }),
-          /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "flex flex-col gap-0.5", children: footer.map((item) => /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(SidebarItem, { ...item }, item.href)) })
+        footer && footer.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "shrink-0 px-1 pb-1", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Separator, { className: "mb-1" }),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex flex-col gap-0.5", children: footer.map((item) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(SidebarItem, { ...item }, item.href)) })
         ] })
       ]
     }
@@ -1606,29 +1656,29 @@ function Sidebar({ logo, sections, footer, className }) {
 
 // src/composites/app-shell/app-shell.tsx
 var import_lucide_react8 = require("lucide-react");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime33 = require("react/jsx-runtime");
 function AppShell({ sidebar, header, children, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: cn("flex h-screen", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Sidebar, { ...sidebar }),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "flex flex-1 flex-col min-w-0", children: [
-      header && /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("header", { className: "flex items-center h-10 border-b border-border px-4 shrink-0", children: [
-        header.breadcrumbs && header.breadcrumbs.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("nav", { className: "flex items-center gap-1 text-xs flex-1 min-w-0", children: header.breadcrumbs.map((crumb, index) => {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: cn("flex h-screen", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Sidebar, { ...sidebar }),
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "flex flex-1 flex-col min-w-0", children: [
+      header && /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("header", { className: "flex items-center h-10 border-b border-border px-4 shrink-0", children: [
+        header.breadcrumbs && header.breadcrumbs.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("nav", { className: "flex items-center gap-1 text-xs flex-1 min-w-0", children: header.breadcrumbs.map((crumb, index) => {
           const isLast = index === header.breadcrumbs.length - 1;
-          return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { className: "flex items-center gap-1", children: [
-            index > 0 && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_lucide_react8.ChevronRight, { className: "h-3 w-3 text-foreground-subtle shrink-0" }),
-            crumb.href && !isLast ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { className: "flex items-center gap-1", children: [
+            index > 0 && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_lucide_react8.ChevronRight, { className: "h-3 w-3 text-foreground-subtle shrink-0" }),
+            crumb.href && !isLast ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
               "a",
               {
                 href: crumb.href,
                 className: "text-foreground-subtle hover:text-foreground transition-colors truncate",
                 children: crumb.label
               }
-            ) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "text-foreground truncate", children: crumb.label })
+            ) : /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "text-foreground truncate", children: crumb.label })
           ] }, index);
         }) }),
-        header.actions && /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "flex items-center gap-2 ml-auto shrink-0", children: header.actions })
+        header.actions && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "flex items-center gap-2 ml-auto shrink-0", children: header.actions })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("main", { className: "flex-1 overflow-auto p-4", children })
+      /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("main", { className: "flex-1 overflow-auto p-4", children })
     ] })
   ] });
 }
@@ -1639,20 +1689,20 @@ var import_react_table = require("@tanstack/react-table");
 
 // src/composites/data-table/data-table-header.tsx
 var import_lucide_react9 = require("lucide-react");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function DataTableHeader({
   headerGroups,
   onSortingChange,
   stickyHeader,
   flexRender: render
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     "thead",
     {
       className: cn(
         stickyHeader && "sticky top-0 z-10 bg-background"
       ),
-      children: headerGroups.map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("tr", { className: "h-6", children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+      children: headerGroups.map((headerGroup) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("tr", { className: "h-6", children: headerGroup.headers.map((header) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
         HeaderCell,
         {
           header,
@@ -1667,7 +1717,7 @@ function DataTableHeader({
 function HeaderCell({ header, sortable, flexRender: render }) {
   const sorted = header.column.getIsSorted();
   const SortIcon = sorted === "asc" ? import_lucide_react9.ArrowUp : sorted === "desc" ? import_lucide_react9.ArrowDown : import_lucide_react9.ArrowUpDown;
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
     "th",
     {
       className: cn(
@@ -1675,9 +1725,9 @@ function HeaderCell({ header, sortable, flexRender: render }) {
         sortable && "cursor-pointer select-none"
       ),
       onClick: sortable ? header.column.getToggleSortingHandler() : void 0,
-      children: /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("span", { className: "inline-flex items-center gap-1", children: [
+      children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: "inline-flex items-center gap-1", children: [
         header.isPlaceholder ? null : render(header.column.columnDef.header, header.getContext()),
-        sortable && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SortIcon, { className: "h-3 w-3" })
+        sortable && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(SortIcon, { className: "h-3 w-3" })
       ] })
     }
   );
@@ -1685,7 +1735,7 @@ function HeaderCell({ header, sortable, flexRender: render }) {
 
 // src/composites/data-table/data-table-row.tsx
 var import_lucide_react10 = require("lucide-react");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 function DataTableRow({
   row,
   onRowClick,
@@ -1693,7 +1743,7 @@ function DataTableRow({
   flexRender: render
 }) {
   const actions = rowActions ? rowActions(row.original) : [];
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
     "tr",
     {
       className: cn(
@@ -1703,17 +1753,17 @@ function DataTableRow({
       ),
       onClick: onRowClick ? () => onRowClick(row.original) : void 0,
       children: [
-        row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DataTableCell, { cell, flexRender: render }, cell.id)),
-        actions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("td", { className: "px-2 py-1.5 w-8", children: /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(Dropdown, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+        row.getVisibleCells().map((cell) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DataTableCell, { cell, flexRender: render }, cell.id)),
+        actions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("td", { className: "px-2 py-1.5 w-8", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(Dropdown, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
             DropdownTrigger,
             {
               className: "p-0.5 rounded hover:bg-surface-hover",
               onClick: (e) => e.stopPropagation(),
-              children: /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_lucide_react10.MoreHorizontal, { className: "h-3.5 w-3.5 text-foreground-muted" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_lucide_react10.MoreHorizontal, { className: "h-3.5 w-3.5 text-foreground-muted" })
             }
           ),
-          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DropdownContent, { className: "right-0 left-auto", children: actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(DropdownContent, { className: "right-0 left-auto", children: actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
             DropdownItem,
             {
               icon: action.icon,
@@ -1732,12 +1782,12 @@ function DataTableRow({
   );
 }
 function DataTableCell({ cell, flexRender: render }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("td", { className: "px-2 py-1.5 text-xs text-foreground", children: render(cell.column.columnDef.cell, cell.getContext()) });
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("td", { className: "px-2 py-1.5 text-xs text-foreground", children: render(cell.column.columnDef.cell, cell.getContext()) });
 }
 
 // src/composites/data-table/data-table-pagination.tsx
 var import_lucide_react11 = require("lucide-react");
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 var PAGE_SIZE_OPTIONS = [
   { value: "10", label: "10" },
   { value: "25", label: "25" },
@@ -1752,10 +1802,10 @@ function DataTablePagination({
 }) {
   const totalPages = Math.max(1, Math.ceil(total / pageSize));
   const currentPage = page + 1;
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex items-center justify-between px-2 py-2 text-xs text-foreground-muted", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { children: "Rows per page" }),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "w-16", children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-center justify-between px-2 py-2 text-xs text-foreground-muted", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { children: "Rows per page" }),
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "w-16", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
         Select,
         {
           options: PAGE_SIZE_OPTIONS,
@@ -1767,14 +1817,14 @@ function DataTablePagination({
         }
       ) })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex items-center gap-2", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { children: [
         "Page ",
         currentPage,
         " of ",
         totalPages
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
         IconButton,
         {
           icon: import_lucide_react11.ChevronLeft,
@@ -1785,7 +1835,7 @@ function DataTablePagination({
           onClick: () => onPaginationChange?.({ pageIndex: page - 1, pageSize })
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
         IconButton,
         {
           icon: import_lucide_react11.ChevronRight,
@@ -1801,7 +1851,7 @@ function DataTablePagination({
 }
 
 // src/composites/data-table/data-table.tsx
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 function DataTable({
   data,
   columns: userColumns,
@@ -1824,7 +1874,7 @@ function DataTable({
     if (!selectable) return userColumns;
     const selectColumn = {
       id: "__select",
-      header: ({ table: table2 }) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      header: ({ table: table2 }) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
         Checkbox,
         {
           checked: table2.getIsAllPageRowsSelected(),
@@ -1832,7 +1882,7 @@ function DataTable({
           "aria-label": "Select all"
         }
       ),
-      cell: ({ row }) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      cell: ({ row }) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
         Checkbox,
         {
           checked: row.getIsSelected(),
@@ -1870,9 +1920,9 @@ function DataTable({
     pageCount: pagination ? Math.ceil(pagination.total / pagination.pageSize) : void 0
   });
   const hasActions = !!rowActions;
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: cn("overflow-auto", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("table", { className: "w-full border-collapse", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: cn("overflow-auto", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("table", { className: "w-full border-collapse", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
         DataTableHeader,
         {
           headerGroups: table.getHeaderGroups(),
@@ -1881,14 +1931,14 @@ function DataTable({
           flexRender: import_react_table.flexRender
         }
       ),
-      /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("tbody", { children: loading ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(LoadingRows, { colSpan: columns.length + (hasActions ? 1 : 0), compact }) : table.getRowModel().rows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("tbody", { children: loading ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(LoadingRows, { colSpan: columns.length + (hasActions ? 1 : 0), compact }) : table.getRowModel().rows.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
         "td",
         {
           colSpan: columns.length + (hasActions ? 1 : 0),
           className: "text-center py-8 text-xs text-foreground-muted",
           children: emptyState ?? "No data"
         }
-      ) }) : table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      ) }) : table.getRowModel().rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
         DataTableRow,
         {
           row,
@@ -1899,7 +1949,7 @@ function DataTable({
         row.id
       )) })
     ] }),
-    pagination && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+    pagination && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
       DataTablePagination,
       {
         page: pagination.page,
@@ -1911,11 +1961,11 @@ function DataTable({
   ] });
 }
 function LoadingRows({ colSpan, compact }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_jsx_runtime36.Fragment, { children: Array.from({ length: 5 }).map((_, rowIdx) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("tr", { className: compact ? "h-7" : "h-9", children: Array.from({ length: colSpan }).map((_2, colIdx) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("td", { className: "px-2 py-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Skeleton, { className: "h-3 w-full" }) }, colIdx)) }, rowIdx)) });
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_jsx_runtime37.Fragment, { children: Array.from({ length: 5 }).map((_, rowIdx) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("tr", { className: compact ? "h-7" : "h-9", children: Array.from({ length: colSpan }).map((_2, colIdx) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("td", { className: "px-2 py-1.5", children: /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Skeleton, { className: "h-3 w-full" }) }, colIdx)) }, rowIdx)) });
 }
 
 // src/composites/device-card.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 var STATUS_COLORS = {
   online: "bg-success",
   offline: "bg-danger",
@@ -1934,7 +1984,7 @@ function DeviceCard({
   className
 }) {
   const isOffline = status === "offline";
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
     "div",
     {
       onClick,
@@ -1946,18 +1996,18 @@ function DeviceCard({
         className
       ),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "flex items-center justify-between mb-2", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "text-sm font-medium truncate", children: title }),
-          status && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: cn("h-2 w-2 rounded-full shrink-0", STATUS_COLORS[status]) })
+        /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "flex items-center justify-between mb-2", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "text-sm font-medium truncate", children: title }),
+          status && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: cn("h-2 w-2 rounded-full shrink-0", STATUS_COLORS[status]) })
         ] }),
-        subtitle && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "text-[11px] text-foreground-muted", children: subtitle }),
-        badges && badges.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "flex flex-wrap gap-1 mt-2", children: badges.map((badge, i) => {
+        subtitle && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "text-[11px] text-foreground-muted", children: subtitle }),
+        badges && badges.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "flex flex-wrap gap-1 mt-2", children: badges.map((badge, i) => {
           const cls = cn(
             "rounded px-1.5 py-0.5 text-[10px] flex items-center gap-0.5",
             selected ? "bg-primary/20" : "bg-surface-hover",
             badge.onClick && "hover:opacity-80 transition-opacity cursor-pointer"
           );
-          return badge.onClick ? /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+          return badge.onClick ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(
             "button",
             {
               onClick: (e) => {
@@ -1971,12 +2021,12 @@ function DeviceCard({
               ]
             },
             i
-          ) : /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("span", { className: cls, children: [
+          ) : /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("span", { className: cls, children: [
             badge.icon,
             badge.label
           ] }, i);
         }) }),
-        !isOffline && actions && actions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "flex items-center gap-0.5 mt-2 -mb-1", children: actions.map((action, i) => /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+        !isOffline && actions && actions.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "flex items-center gap-0.5 mt-2 -mb-1", children: actions.map((action, i) => /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
           "button",
           {
             onClick: (e) => {
@@ -1990,21 +2040,21 @@ function DeviceCard({
           },
           i
         )) }),
-        isOffline && offlineAction && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "mt-2", onClick: (e) => e.stopPropagation(), children: offlineAction })
+        isOffline && offlineAction && /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "mt-2", onClick: (e) => e.stopPropagation(), children: offlineAction })
       ]
     }
   );
 }
 
 // src/composites/device-grid.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 function DeviceGrid({
   children,
   minCardWidth = 220,
   gap = 3,
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(
     "div",
     {
       className: cn(
@@ -2020,16 +2070,1716 @@ function DeviceGrid({
     }
   );
 }
+
+// src/composites/pipeline-step.tsx
+var import_react23 = require("react");
+var import_lucide_react12 = require("lucide-react");
+var import_jsx_runtime40 = require("react/jsx-runtime");
+var ADDON_COLORS = {
+  "object-detection": "border-l-blue-500",
+  "motion-detection": "border-l-amber-500",
+  "face-detection": "border-l-purple-500",
+  "face-recognition": "border-l-violet-500",
+  "plate-detection": "border-l-pink-500",
+  "plate-recognition": "border-l-rose-500",
+  "animal-classifier": "border-l-lime-500",
+  "bird-nabirds-classifier": "border-l-emerald-500",
+  "bird-global-classifier": "border-l-teal-500",
+  "audio-classification": "border-l-green-500",
+  "segmentation-refiner": "border-l-cyan-500"
+};
+var SLOT_FALLBACK = {
+  detector: "border-l-blue-500",
+  cropper: "border-l-purple-500",
+  classifier: "border-l-lime-500",
+  refiner: "border-l-cyan-500"
+};
+function borderColor(addonId, slot) {
+  return ADDON_COLORS[addonId] ?? SLOT_FALLBACK[slot] ?? "border-l-primary";
+}
+var BACKEND_FORMAT = {
+  cpu: "onnx",
+  coreml: "coreml",
+  openvino: "openvino",
+  cuda: "onnx",
+  tensorrt: "onnx",
+  "onnx-py": "onnx",
+  pytorch: "pt"
+};
+function backendsForRuntime(runtime, caps, schema) {
+  const allBackends = runtime === "node" ? caps.runtimes.node.backends : caps.runtimes.python.backends;
+  if (!schema) return allBackends;
+  const availableFormats = /* @__PURE__ */ new Set();
+  for (const m of schema.models) {
+    for (const fmt of Object.keys(m.formats)) {
+      availableFormats.add(fmt);
+    }
+  }
+  if (runtime === "node") availableFormats.add("onnx");
+  return allBackends.map((b) => {
+    const neededFormat = BACKEND_FORMAT[b.id] ?? "onnx";
+    const hasFormat = availableFormats.has(neededFormat);
+    return { ...b, available: b.available && hasFormat };
+  });
+}
+function modelsForStep(schema, runtime, backend, caps) {
+  if (!schema) return [];
+  const fmt = runtime === "node" ? "onnx" : caps.runtimes.python.backends.find((b) => b.id === backend)?.modelFormat ?? "onnx";
+  return schema.models.filter((m) => m.formats[fmt]).map((m) => ({
+    id: m.id,
+    name: m.name,
+    downloaded: m.formats[fmt]?.downloaded ?? false
+  }));
+}
+function runtimeOptions(caps) {
+  const opts = [
+    { id: "node", label: "Node.js (ONNX)", available: true }
+  ];
+  if (caps.runtimes.python.available && caps.runtimes.python.backends.some((b) => b.available)) {
+    opts.unshift({ id: "python", label: "Python", available: true });
+  }
+  return opts;
+}
+function PipelineStep({
+  step,
+  schema,
+  allSchemas,
+  capabilities,
+  depth = 0,
+  onChange,
+  onDelete,
+  readOnly = false
+}) {
+  const [expanded, setExpanded] = (0, import_react23.useState)(false);
+  const color = borderColor(step.addonId, step.slot);
+  const backends = backendsForRuntime(step.runtime, capabilities, schema);
+  const rtOptions = runtimeOptions(capabilities);
+  const currentBackendAvailable = backends.find((b) => b.id === step.backend)?.available ?? false;
+  if (!currentBackendAvailable && !readOnly) {
+    const firstAvailable = backends.find((b) => b.available);
+    if (firstAvailable && firstAvailable.id !== step.backend) {
+      queueMicrotask(() => onChange({ ...step, backend: firstAvailable.id }));
+    }
+  }
+  const models = modelsForStep(schema, step.runtime, step.backend, capabilities);
+  if (models.length > 0 && !models.some((m) => m.id === step.modelId) && !readOnly) {
+    const defaultModel = schema?.defaultModelId ? models.find((m) => m.id === schema.defaultModelId) : null;
+    const fallback = defaultModel ?? models[0];
+    if (fallback && fallback.id !== step.modelId) {
+      queueMicrotask(() => onChange({ ...step, modelId: fallback.id }));
+    }
+  }
+  function handleClick(e) {
+    if (e.target.closest(".step-config")) return;
+    setExpanded((v) => !v);
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "space-y-2", children: /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+    "div",
+    {
+      className: cn(
+        "rounded-xl border border-border bg-surface overflow-hidden border-l-4 shadow-sm",
+        color,
+        !step.enabled && "opacity-[0.45]"
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-center gap-2.5 px-3 py-2.5 cursor-pointer select-none", onClick: handleClick, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "text-foreground-subtle", children: expanded ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react12.ChevronDown, { className: "h-4 w-4" }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(import_lucide_react12.ChevronRight, { className: "h-4 w-4" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex-1 min-w-0", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "text-[10px] uppercase tracking-wider font-medium text-foreground-subtle/60 block leading-none", children: step.slot }),
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "text-sm font-semibold text-foreground truncate block leading-tight", children: step.addonName }),
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-center gap-1 mt-0.5 flex-wrap", children: [
+              step.inputClasses.map((c) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "text-[9px] uppercase font-semibold tracking-wide px-1.5 py-0.5 rounded bg-blue-500/12 text-blue-400", children: c }, c)),
+              step.inputClasses.length > 0 && step.outputClasses.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "text-foreground-subtle/40 text-[10px]", children: "\u2192" }),
+              step.outputClasses.map((c) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "text-[9px] uppercase font-semibold tracking-wide px-1.5 py-0.5 rounded bg-green-500/12 text-green-400", children: c }, c))
+            ] })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+            "button",
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                onChange({ ...step, enabled: !step.enabled });
+              },
+              className: cn(
+                "relative inline-flex h-6 w-11 shrink-0 items-center rounded-full transition-colors",
+                step.enabled ? "bg-success" : "bg-foreground-subtle/30"
+              ),
+              children: /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: cn(
+                "inline-block h-4 w-4 rounded-full bg-white shadow transition-transform",
+                step.enabled ? "translate-x-6" : "translate-x-1"
+              ) })
+            }
+          )
+        ] }),
+        expanded && /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "step-config border-t border-border bg-background px-4 py-4 space-y-3", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "grid grid-cols-2 gap-3", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+              ConfigSelect,
+              {
+                label: "Agent",
+                value: step.agentId,
+                disabled: readOnly,
+                options: [{ value: step.agentId || "hub", label: step.agentId || "Hub (local)" }],
+                onChange: (v) => onChange({ ...step, agentId: v })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+              ConfigSelect,
+              {
+                label: "Runtime",
+                value: step.runtime,
+                disabled: readOnly,
+                options: rtOptions.map((r) => ({ value: r.id, label: r.label, disabled: !r.available })),
+                onChange: (v) => onChange({ ...step, runtime: v })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+              ConfigSelect,
+              {
+                label: "Backend",
+                value: step.backend,
+                disabled: readOnly,
+                options: backends.map((b) => ({ value: b.id, label: b.label, disabled: !b.available })),
+                onChange: (v) => onChange({ ...step, backend: v })
+              }
+            ),
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+              ConfigSelect,
+              {
+                label: "Model",
+                value: step.modelId,
+                disabled: readOnly,
+                options: models.map((m) => ({ value: m.id, label: `${m.name}${m.downloaded ? " \u2713" : ""}` })),
+                onChange: (v) => onChange({ ...step, modelId: v })
+              }
+            )
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { className: "flex items-center justify-between mb-1", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "text-[10px] font-medium text-foreground-subtle uppercase tracking-wide", children: "Confidence" }),
+              /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("span", { className: "text-xs font-medium text-foreground tabular-nums", children: [
+                (step.confidence * 100).toFixed(0),
+                "%"
+              ] })
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(
+              "input",
+              {
+                type: "range",
+                min: 0,
+                max: 1,
+                step: 0.01,
+                value: step.confidence,
+                disabled: readOnly,
+                onChange: (e) => onChange({ ...step, confidence: Number(e.target.value) }),
+                className: "w-full accent-primary h-1.5"
+              }
+            )
+          ] })
+        ] })
+      ]
+    }
+  ) });
+}
+function ConfigSelect({ label, value, options, disabled, onChange }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("label", { className: "block text-[10px] font-medium text-foreground-subtle uppercase tracking-wide mb-1.5", children: label }),
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
+      "select",
+      {
+        value,
+        onChange: (e) => onChange(e.target.value),
+        disabled,
+        className: "w-full rounded-lg border border-border bg-surface px-3 py-2 text-xs text-foreground focus:outline-none focus:border-primary/50",
+        children: [
+          options.length === 0 && /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("option", { value, children: value || "default" }),
+          options.map((o) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("option", { value: o.value, disabled: o.disabled, children: o.label }, o.value))
+        ]
+      }
+    )
+  ] });
+}
+
+// src/composites/pipeline-runtime-selector.tsx
+var import_lucide_react13 = require("lucide-react");
+var import_jsx_runtime41 = require("react/jsx-runtime");
+function PipelineRuntimeSelector({ options, value, onChange }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "flex flex-wrap gap-2", children: options.map((opt) => {
+    const active = opt.id === value;
+    return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+      "button",
+      {
+        onClick: () => opt.available && onChange(opt.id),
+        disabled: !opt.available,
+        className: `flex items-center gap-2 rounded-lg border px-3 py-2 text-xs font-medium transition-all ${active ? "border-primary/40 bg-primary/10 text-primary" : opt.available ? "border-border bg-surface text-foreground-subtle hover:bg-surface-hover hover:text-foreground" : "border-border/40 bg-surface/40 text-foreground-subtle/40 cursor-not-allowed"}`,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react13.Cpu, { className: "h-3.5 w-3.5 shrink-0" }),
+          opt.label,
+          opt.isBest && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("span", { className: "inline-flex items-center gap-0.5 rounded-full bg-amber-500/15 px-1.5 py-0.5 text-[10px] font-semibold text-amber-400", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_lucide_react13.Star, { className: "h-2.5 w-2.5" }),
+            "Best"
+          ] }),
+          opt.platformScore != null && /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("span", { className: "text-[10px] text-foreground-subtle/60", children: [
+            "(",
+            opt.platformScore,
+            ")"
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(
+            "span",
+            {
+              className: `h-1.5 w-1.5 rounded-full ${opt.available ? "bg-success" : "bg-danger"}`
+            }
+          )
+        ]
+      },
+      opt.id
+    );
+  }) });
+}
+
+// src/composites/pipeline-builder.tsx
+var import_react24 = require("react");
+var import_lucide_react14 = require("lucide-react");
+
+// src/lib/validate-template.ts
+function validateTemplate(steps, schema) {
+  const availableAddonIds = new Set(
+    schema.slots.flatMap((s) => s.addons.map((a) => a.id))
+  );
+  const warnings = [];
+  function validateStep(step) {
+    if (!availableAddonIds.has(step.addonId)) {
+      warnings.push(`Addon "${step.addonId}" is no longer available \u2014 step removed`);
+      return null;
+    }
+    const addon = schema.slots.flatMap((s) => s.addons).find((a) => a.id === step.addonId);
+    let modelId = step.modelId;
+    if (addon && !addon.models.some((m) => m.id === modelId)) {
+      const fallback = addon.defaultModelId;
+      warnings.push(`Model "${modelId}" not available for ${step.addonId} \u2014 using "${fallback}"`);
+      modelId = fallback;
+    }
+    const validChildren = step.children.map((c) => validateStep(c)).filter((c) => c !== null);
+    return { ...step, modelId, children: validChildren };
+  }
+  const validSteps = steps.map((s) => validateStep(s)).filter((s) => s !== null);
+  return {
+    valid: warnings.length === 0,
+    steps: validSteps,
+    warnings
+  };
+}
+
+// src/composites/pipeline-builder.tsx
+var import_jsx_runtime42 = require("react/jsx-runtime");
+function buildSchemaMap(schema) {
+  const map = /* @__PURE__ */ new Map();
+  for (const slot of schema.slots) {
+    for (const addon of slot.addons) {
+      map.set(addon.id, addon);
+    }
+  }
+  return map;
+}
+function createDefaultStep(addon, fallbackRuntime, fallbackBackend) {
+  return {
+    addonId: addon.id,
+    addonName: addon.name,
+    slot: addon.slot,
+    inputClasses: [...addon.inputClasses],
+    outputClasses: [...addon.outputClasses],
+    enabled: true,
+    agentId: "hub",
+    // Use per-addon defaults from backend PlatformScorer, fallback to provided
+    runtime: addon.defaultRuntime ?? fallbackRuntime ?? "node",
+    backend: addon.defaultBackend ?? fallbackBackend ?? "cpu",
+    modelId: addon.defaultModelId,
+    confidence: addon.defaultConfidence,
+    classFilters: [...addon.inputClasses],
+    children: []
+  };
+}
+function PlaceholderStep({ addon, onClick }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+    "button",
+    {
+      type: "button",
+      onClick,
+      className: "w-full rounded-xl border-2 border-dashed border-border/60 px-4 py-3 text-left transition-all hover:border-primary/30 hover:bg-surface/60 group",
+      children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-center gap-3", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react14.PlusCircle, { className: "h-[18px] w-[18px] text-foreground-subtle/30 group-hover:text-primary/60 shrink-0" }),
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex-1 min-w-0", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "text-[13px] font-medium text-foreground-subtle/50 group-hover:text-foreground-subtle block truncate", children: addon.name }),
+          /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-center gap-1 mt-0.5 flex-wrap", children: [
+            addon.inputClasses.map((c) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "text-[9px] uppercase font-semibold tracking-wide px-1.5 py-0.5 rounded bg-blue-500/8 text-blue-400/50", children: c }, c)),
+            addon.inputClasses.length > 0 && addon.outputClasses.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "text-foreground-subtle/25 text-[10px]", children: "\u2192" }),
+            addon.outputClasses.map((c) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "text-[9px] uppercase font-semibold tracking-wide px-1.5 py-0.5 rounded bg-green-500/8 text-green-400/50", children: c }, c))
+          ] })
+        ] })
+      ] })
+    }
+  );
+}
+function PipelineBuilder({
+  schema,
+  capabilities,
+  steps,
+  onChange,
+  templates,
+  selectedTemplateId,
+  onSelectTemplate,
+  onSaveTemplate,
+  onUpdateTemplate,
+  onDeleteTemplate,
+  readOnly = false,
+  excludeAddons = []
+}) {
+  const excluded = (0, import_react24.useMemo)(() => new Set(excludeAddons), [excludeAddons]);
+  const schemaMap = (0, import_react24.useMemo)(() => buildSchemaMap(schema), [schema]);
+  const [warnings, setWarnings] = (0, import_react24.useState)([]);
+  const 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");
+  const defaultBackend = bestPlatformScore?.backend ?? (hasPython ? capabilities.runtimes.python.backends.find((b) => b.available)?.id ?? "cpu" : capabilities.runtimes.node.backends.find((b) => b.available && b.id !== "cpu")?.id ?? "cpu");
+  const dirty = selectedTemplateId ? JSON.stringify(steps) !== JSON.stringify(templates.find((t) => t.id === selectedTemplateId)?.steps) : false;
+  function handleSelectTemplate(e) {
+    const id = e.target.value || null;
+    if (id) {
+      const tpl = templates.find((t) => t.id === id);
+      if (tpl) {
+        const result = validateTemplate(tpl.steps, schema);
+        setWarnings([...result.warnings]);
+      }
+    } else {
+      setWarnings([]);
+    }
+    onSelectTemplate(id);
+  }
+  function handleSave() {
+    if (selectedTemplateId) onUpdateTemplate(selectedTemplateId, steps);
+  }
+  function handleSaveAs() {
+    const name = window.prompt("Template name:");
+    if (name?.trim()) onSaveTemplate(name.trim(), steps);
+  }
+  function handleDelete() {
+    if (!selectedTemplateId) return;
+    const tpl = templates.find((t) => t.id === selectedTemplateId);
+    if (tpl && window.confirm(`Delete template "${tpl.name}"?`)) {
+      onDeleteTemplate(selectedTemplateId);
+    }
+  }
+  function handleStepChange(updated) {
+    onChange(steps.map((s) => {
+      if (s.addonId !== updated.addonId) return s;
+      return autoEnableAncestors(updated);
+    }));
+  }
+  function autoEnableAncestors(step) {
+    const hasEnabledChild = step.children.some((c) => c.enabled || c.children.some((gc) => gc.enabled));
+    return {
+      ...step,
+      enabled: step.enabled || hasEnabledChild,
+      children: step.children.map((c) => {
+        const hasEnabledGrandchild = c.children.some((gc) => gc.enabled);
+        return {
+          ...c,
+          enabled: c.enabled || hasEnabledGrandchild
+        };
+      })
+    };
+  }
+  function handleAddChildToStep(parentAddonId, addon) {
+    const child = createDefaultStep(addon, defaultRuntime, defaultBackend);
+    onChange(steps.map((s) => {
+      if (s.addonId !== parentAddonId) return s;
+      return { ...s, children: [...s.children, child] };
+    }));
+  }
+  function collectIds(list) {
+    const ids = /* @__PURE__ */ new Set();
+    for (const s of list) {
+      ids.add(s.addonId);
+      for (const c of s.children) ids.add(c.addonId);
+      const childIds = collectIds(s.children);
+      for (const id of childIds) ids.add(id);
+    }
+    return ids;
+  }
+  const existingIds = collectIds(steps);
+  function getChildPlaceholders(step) {
+    const stepSchema = schemaMap.get(step.addonId);
+    if (!stepSchema) return [];
+    const childSlotIds = stepSchema.childSlots;
+    const childIds = new Set(step.children.map((c) => c.addonId));
+    const placeholders = [];
+    for (const slot of schema.slots) {
+      if (!childSlotIds.includes(slot.id)) continue;
+      for (const addon of slot.addons) {
+        if (childIds.has(addon.id) || excluded.has(addon.id)) continue;
+        const compatible = addon.inputClasses.some((ic) => step.outputClasses.includes(ic));
+        if (compatible) placeholders.push(addon);
+      }
+    }
+    return placeholders;
+  }
+  function renderStep(step) {
+    const childPlaceholders = getChildPlaceholders(step);
+    return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "space-y-1.5", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        PipelineStep,
+        {
+          step,
+          schema: schemaMap.get(step.addonId) ?? null,
+          allSchemas: schemaMap,
+          capabilities,
+          onChange: handleStepChange,
+          onDelete: readOnly ? void 0 : (id) => onChange(steps.filter((s) => s.addonId !== id)),
+          readOnly
+        }
+      ),
+      (step.children.length > 0 || childPlaceholders.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "ml-6 pl-4 border-l-2 border-dashed border-border/40 space-y-1.5", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "text-[10px] font-semibold uppercase tracking-widest text-foreground-subtle/40", children: "Slot: Cropper / Classifier" }),
+        step.children.map((child) => {
+          const childChildPlaceholders = getChildPlaceholders(child);
+          return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "space-y-1.5", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+              PipelineStep,
+              {
+                step: child,
+                schema: schemaMap.get(child.addonId) ?? null,
+                allSchemas: schemaMap,
+                capabilities,
+                depth: 1,
+                onChange: (updated) => {
+                  handleStepChange({
+                    ...step,
+                    children: step.children.map((c) => c.addonId === updated.addonId ? updated : c)
+                  });
+                },
+                onDelete: readOnly ? void 0 : (id) => {
+                  handleStepChange({
+                    ...step,
+                    children: step.children.filter((c) => c.addonId !== id)
+                  });
+                },
+                readOnly
+              }
+            ),
+            (child.children.length > 0 || childChildPlaceholders.length > 0) && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "ml-6 pl-4 border-l-2 border-dashed border-border/30 space-y-1.5", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "text-[10px] font-semibold uppercase tracking-widest text-foreground-subtle/30", children: "Slot: Recognizer" }),
+              child.children.map((grandchild) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                PipelineStep,
+                {
+                  step: grandchild,
+                  schema: schemaMap.get(grandchild.addonId) ?? null,
+                  allSchemas: schemaMap,
+                  capabilities,
+                  depth: 2,
+                  onChange: (updatedGrandchild) => {
+                    handleStepChange({
+                      ...step,
+                      children: step.children.map(
+                        (c) => c.addonId === child.addonId ? { ...c, children: c.children.map((gc) => gc.addonId === updatedGrandchild.addonId ? updatedGrandchild : gc) } : c
+                      )
+                    });
+                  },
+                  onDelete: readOnly ? void 0 : (id) => {
+                    handleStepChange({
+                      ...step,
+                      children: step.children.map(
+                        (c) => c.addonId === child.addonId ? { ...c, children: c.children.filter((gc) => gc.addonId !== id) } : c
+                      )
+                    });
+                  },
+                  readOnly
+                },
+                grandchild.addonId
+              )),
+              !readOnly && childChildPlaceholders.map((addon) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+                PlaceholderStep,
+                {
+                  addon,
+                  onClick: () => {
+                    const newChild = createDefaultStep(addon, defaultRuntime, defaultBackend);
+                    handleStepChange({
+                      ...step,
+                      children: step.children.map(
+                        (c) => c.addonId === child.addonId ? { ...c, children: [...c.children, newChild] } : c
+                      )
+                    });
+                  }
+                },
+                addon.id
+              ))
+            ] })
+          ] }, child.addonId);
+        }),
+        !readOnly && childPlaceholders.map((addon) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+          PlaceholderStep,
+          {
+            addon,
+            onClick: () => handleAddChildToStep(step.addonId, addon)
+          },
+          addon.id
+        ))
+      ] })
+    ] }, step.addonId);
+  }
+  const rootSlots = schema.slots.filter((s) => s.parentSlot === null).sort((a, b) => a.priority - b.priority);
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "space-y-4", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "rounded-xl border border-border bg-surface p-3", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "relative flex-1 min-w-0", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(
+        "select",
+        {
+          value: selectedTemplateId ?? "",
+          onChange: handleSelectTemplate,
+          className: "w-full rounded-lg border border-border bg-background px-3 py-2 text-sm text-foreground focus:outline-none focus:border-primary/50",
+          children: [
+            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("option", { value: "", children: "No template" }),
+            templates.map((t) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("option", { value: t.id, children: t.name }, t.id))
+          ]
+        }
+      ) }),
+      dirty && /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "h-1.5 w-1.5 rounded-full bg-amber-500 shrink-0" }),
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        "button",
+        {
+          onClick: handleSave,
+          disabled: !selectedTemplateId || readOnly,
+          title: "Save",
+          className: cn(
+            "p-2 rounded-lg border border-border transition-colors",
+            selectedTemplateId && !readOnly ? "text-foreground-subtle hover:bg-surface-hover" : "text-foreground-subtle/30 cursor-not-allowed"
+          ),
+          children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react14.Save, { className: "h-4 w-4" })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        "button",
+        {
+          onClick: handleSaveAs,
+          disabled: readOnly,
+          title: "Save As",
+          className: cn(
+            "p-2 rounded-lg border border-border transition-colors",
+            !readOnly ? "text-foreground-subtle hover:bg-surface-hover" : "text-foreground-subtle/30 cursor-not-allowed"
+          ),
+          children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react14.CopyPlus, { className: "h-4 w-4" })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
+        "button",
+        {
+          onClick: handleDelete,
+          disabled: !selectedTemplateId || readOnly,
+          title: "Delete",
+          className: cn(
+            "p-2 rounded-lg border border-border transition-colors",
+            selectedTemplateId && !readOnly ? "text-foreground-subtle hover:text-danger" : "text-foreground-subtle/30 cursor-not-allowed"
+          ),
+          children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react14.Trash2, { className: "h-4 w-4" })
+        }
+      )
+    ] }) }),
+    warnings.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "rounded-lg border border-amber-500/30 bg-amber-500/5 p-3 text-xs text-amber-400 space-y-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "flex items-center justify-between", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "font-medium", children: "Template loaded with warnings:" }),
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("button", { onClick: () => setWarnings([]), className: "text-amber-400/60 hover:text-amber-400", children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_lucide_react14.X, { className: "h-3.5 w-3.5" }) })
+      ] }),
+      warnings.map((w, i) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { children: [
+        "\u2022 ",
+        w
+      ] }, i))
+    ] }),
+    rootSlots.map((slot) => {
+      const slotSteps = steps.filter((s) => s.slot === slot.id && !excluded.has(s.addonId));
+      const missingRootAddons = slot.addons.filter((a) => !existingIds.has(a.id) && !excluded.has(a.id));
+      return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "space-y-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("span", { className: "text-[10px] font-semibold uppercase tracking-widest text-foreground-subtle/50", children: [
+          "Slot: ",
+          slot.label
+        ] }),
+        slotSteps.map((step) => renderStep(step)),
+        !readOnly && missingRootAddons.map((addon) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(PlaceholderStep, { addon, onClick: () => {
+          onChange([...steps, createDefaultStep(addon, defaultRuntime, defaultBackend)]);
+        } }, addon.id))
+      ] }, slot.id);
+    })
+  ] });
+}
+
+// src/composites/detection-colors.ts
+var CLASS_COLORS = {
+  // Primary detection classes
+  person: "#3b82f6",
+  // blue-500
+  vehicle: "#f59e0b",
+  // amber-500
+  animal: "#22c55e",
+  // green-500
+  // Sub-detection classes
+  face: "#a855f7",
+  // purple-500
+  plate: "#ec4899",
+  // pink-500
+  // Specific animal types
+  bird: "#14b8a6",
+  // teal-500
+  dog: "#84cc16",
+  // lime-500
+  cat: "#f97316",
+  // orange-500
+  // Specific vehicle types
+  car: "#f59e0b",
+  // amber-500
+  truck: "#d97706",
+  // amber-600
+  bus: "#b45309",
+  // amber-700
+  motorcycle: "#eab308",
+  // yellow-500
+  bicycle: "#ca8a04",
+  // yellow-600
+  // Other
+  motion: "#facc15"
+  // yellow-400
+};
+var FALLBACK_PALETTE = [
+  "#ef4444",
+  // red-500
+  "#8b5cf6",
+  // violet-500
+  "#06b6d4",
+  // cyan-500
+  "#f97316",
+  // orange-500
+  "#10b981",
+  // emerald-500
+  "#6366f1",
+  // indigo-500
+  "#e11d48",
+  // rose-600
+  "#0891b2",
+  // cyan-600
+  "#7c3aed",
+  // violet-600
+  "#059669"
+  // emerald-600
+];
+var DEFAULT_COLOR = "#f59e42";
+function getClassColor(className, customColors) {
+  if (customColors?.[className]) return customColors[className];
+  if (customColors?.[className.toLowerCase()]) return customColors[className.toLowerCase()];
+  if (CLASS_COLORS[className]) return CLASS_COLORS[className];
+  if (CLASS_COLORS[className.toLowerCase()]) return CLASS_COLORS[className.toLowerCase()];
+  let hash = 0;
+  for (let i = 0; i < className.length; i++) {
+    hash = hash * 31 + (className.codePointAt(i) ?? 0) >>> 0;
+  }
+  return FALLBACK_PALETTE[hash % FALLBACK_PALETTE.length] ?? DEFAULT_COLOR;
+}
+
+// src/composites/detection-canvas.tsx
+var import_react25 = require("react");
+var import_jsx_runtime43 = require("react/jsx-runtime");
+var DEFAULT_CLASS_COLORS = CLASS_COLORS;
+function DetectionCanvas({
+  src,
+  imageWidth,
+  imageHeight,
+  detections = [],
+  classColors,
+  aspectRatio,
+  className,
+  placeholder,
+  showConfidence = true,
+  minConfidence = 0,
+  borderWidth = 2
+}) {
+  function getColor(className2) {
+    return getClassColor(className2, classColors);
+  }
+  const ratio = aspectRatio ?? (imageWidth && imageHeight ? `${imageWidth}/${imageHeight}` : "16/9");
+  const filteredDetections = detections.filter((d) => d.confidence >= minConfidence);
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    "div",
+    {
+      className: cn(
+        "rounded-lg border border-border bg-surface overflow-hidden relative",
+        className
+      ),
+      style: { aspectRatio: ratio },
+      children: src ? /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(import_jsx_runtime43.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("img", { src, className: "absolute inset-0 w-full h-full object-fill", alt: "" }),
+        filteredDetections.map(
+          (d, i) => d.mask && d.maskWidth && d.maskHeight ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+            MaskOverlay,
+            {
+              mask: d.mask,
+              maskWidth: d.maskWidth,
+              maskHeight: d.maskHeight,
+              bbox: d.bbox,
+              imageWidth,
+              imageHeight,
+              color: getColor(d.className)
+            },
+            `mask-${i}`
+          ) : null
+        ),
+        filteredDetections.map((d, i) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+          BoundingBox,
+          {
+            detection: d,
+            imageWidth,
+            imageHeight,
+            color: getColor(d.className),
+            showConfidence,
+            borderWidth: d.mask ? 1 : borderWidth,
+            children: d.children?.filter((c) => {
+              if (c.confidence < minConfidence) return false;
+              const [cx1, cy1, cx2, cy2] = c.bbox;
+              const cw = cx2 - cx1;
+              const ch = cy2 - cy1;
+              if (cw <= 0 || ch <= 0) return false;
+              const [px1, py1, px2, py2] = d.bbox;
+              const pw = px2 - px1;
+              const ph = py2 - py1;
+              if (pw > 0 && ph > 0 && cw * ch / (pw * ph) > 0.8) return false;
+              return true;
+            }).map((child, j) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+              ChildBoundingBox,
+              {
+                child,
+                parentBbox: d.bbox,
+                color: getColor(child.className),
+                showConfidence
+              },
+              `child-${j}`
+            ))
+          },
+          `det-${i}`
+        ))
+      ] }) : /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "w-full h-full flex items-center justify-center text-foreground-subtle text-sm", children: placeholder ?? "No image loaded" })
+    }
+  );
+}
+function BoundingBox({
+  detection,
+  imageWidth,
+  imageHeight,
+  color,
+  showConfidence,
+  borderWidth,
+  children
+}) {
+  const [x1, y1, x2, y2] = detection.bbox;
+  const labelCount = 1 + (detection.labelsData?.length ?? 0);
+  const labelHeightPx = labelCount * 16 + 4;
+  const topPct = y1 / imageHeight * 100;
+  const containerRef = (0, import_react25.useRef)(null);
+  const showBelow = topPct < labelHeightPx / imageHeight * 100 * 1.5;
+  const labelsElement = /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+    "div",
+    {
+      className: `absolute left-0 flex flex-col items-start gap-px ${showBelow ? "" : ""}`,
+      style: showBelow ? { top: "100%", marginTop: "2px" } : { bottom: "100%", marginBottom: "2px" },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+          "span",
+          {
+            className: "text-[10px] px-1 rounded-sm whitespace-nowrap text-white",
+            style: { backgroundColor: color },
+            children: [
+              detection.className,
+              showConfidence && ` ${(detection.confidence * 100).toFixed(0)}%`
+            ]
+          }
+        ),
+        detection.labelsData?.map((l, k) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+          "span",
+          {
+            className: "text-[9px] font-semibold px-1 rounded-sm whitespace-nowrap text-white",
+            style: { backgroundColor: getClassColor(l.addonId ?? l.label) },
+            children: [
+              l.label,
+              " ",
+              (l.score * 100).toFixed(0),
+              "%"
+            ]
+          },
+          k
+        ))
+      ]
+    }
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+    "div",
+    {
+      ref: containerRef,
+      className: "absolute rounded-sm",
+      style: {
+        left: `${x1 / imageWidth * 100}%`,
+        top: `${y1 / imageHeight * 100}%`,
+        width: `${(x2 - x1) / imageWidth * 100}%`,
+        height: `${(y2 - y1) / imageHeight * 100}%`,
+        borderWidth: `${borderWidth}px`,
+        borderStyle: "solid",
+        borderColor: color
+      },
+      children: [
+        labelsElement,
+        children
+      ]
+    }
+  );
+}
+function MaskOverlay({
+  mask,
+  maskWidth,
+  maskHeight,
+  bbox,
+  imageWidth,
+  imageHeight,
+  color
+}) {
+  const canvasRef = (0, import_react25.useRef)(null);
+  (0, import_react25.useEffect)(() => {
+    const canvas = canvasRef.current;
+    if (!canvas) return;
+    const ctx = canvas.getContext("2d");
+    if (!ctx) return;
+    const binary = atob(mask);
+    const bytes = new Uint8Array(binary.length);
+    for (let i = 0; i < binary.length; i++) bytes[i] = binary.charCodeAt(i);
+    const r = parseInt(color.slice(1, 3), 16);
+    const g = parseInt(color.slice(3, 5), 16);
+    const b = parseInt(color.slice(5, 7), 16);
+    canvas.width = maskWidth;
+    canvas.height = maskHeight;
+    const imageData = ctx.createImageData(maskWidth, maskHeight);
+    const totalPixels = maskWidth * maskHeight;
+    for (let i = 0; i < totalPixels; i++) {
+      const val = i < bytes.length ? bytes[i] : 0;
+      const px = i * 4;
+      if (val > 0) {
+        imageData.data[px] = r;
+        imageData.data[px + 1] = g;
+        imageData.data[px + 2] = b;
+        imageData.data[px + 3] = 120;
+      }
+    }
+    ctx.putImageData(imageData, 0, 0);
+  }, [mask, maskWidth, maskHeight, color]);
+  const [x1, y1, x2, y2] = bbox;
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    "canvas",
+    {
+      ref: canvasRef,
+      className: "absolute pointer-events-none",
+      style: {
+        left: `${x1 / imageWidth * 100}%`,
+        top: `${y1 / imageHeight * 100}%`,
+        width: `${(x2 - x1) / imageWidth * 100}%`,
+        height: `${(y2 - y1) / imageHeight * 100}%`,
+        imageRendering: "pixelated"
+      }
+    }
+  );
+}
+function ChildBoundingBox({
+  child,
+  parentBbox,
+  color,
+  showConfidence
+}) {
+  const [px1, py1, px2, py2] = parentBbox;
+  const [cx1, cy1, cx2, cy2] = child.bbox;
+  const pw = px2 - px1;
+  const ph = py2 - py1;
+  if (pw <= 0 || ph <= 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+    "div",
+    {
+      className: "absolute rounded-sm",
+      style: {
+        left: `${Math.max(0, (cx1 - px1) / pw * 100)}%`,
+        top: `${Math.max(0, (cy1 - py1) / ph * 100)}%`,
+        width: `${Math.min(100, (cx2 - cx1) / pw * 100)}%`,
+        height: `${Math.min(100, (cy2 - cy1) / ph * 100)}%`,
+        borderWidth: "1px",
+        borderStyle: "solid",
+        borderColor: color
+      },
+      children: (() => {
+        const labelCount = 1 + (child.labelsData?.length ?? 0);
+        const relTop = (cy1 - py1) / ph * 100;
+        const showBelow = relTop < labelCount * 6;
+        return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+          "div",
+          {
+            className: "absolute left-0 flex flex-col items-start gap-px",
+            style: showBelow ? { top: "100%", marginTop: "1px" } : { bottom: "100%", marginBottom: "1px" },
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+                "span",
+                {
+                  className: "text-[9px] px-0.5 rounded-sm whitespace-nowrap text-white",
+                  style: { backgroundColor: color },
+                  children: [
+                    child.className,
+                    showConfidence && ` ${(child.confidence * 100).toFixed(0)}%`
+                  ]
+                }
+              ),
+              child.labelsData?.map((l, k) => /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)(
+                "span",
+                {
+                  className: "text-[8px] font-semibold px-0.5 rounded-sm whitespace-nowrap text-white",
+                  style: { backgroundColor: getClassColor(l.addonId ?? l.label) },
+                  children: [
+                    l.label,
+                    " ",
+                    (l.score * 100).toFixed(0),
+                    "%"
+                  ]
+                },
+                k
+              ))
+            ]
+          }
+        );
+      })()
+    }
+  );
+}
+
+// src/composites/detection-result-tree.tsx
+var import_jsx_runtime44 = require("react/jsx-runtime");
+function DetectionResultTree({
+  detections,
+  classColors,
+  className,
+  hiddenKeys,
+  onToggleVisibility
+}) {
+  const colors = classColors;
+  if (detections.length === 0) {
+    return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "text-sm text-foreground-subtle italic text-center py-4", children: "No detections" });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "text-xs font-medium text-foreground-subtle uppercase tracking-wide mb-2", children: [
+      "Detections (",
+      detections.length,
+      ")"
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "space-y-2", children: detections.map((d, i) => /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+      DetectionNode,
+      {
+        detection: d,
+        path: String(i),
+        colors,
+        hiddenKeys,
+        onToggleVisibility
+      },
+      i
+    )) })
+  ] });
+}
+function DetectionNode({
+  detection,
+  path,
+  colors,
+  hiddenKeys,
+  onToggleVisibility
+}) {
+  const color = getClassColor(detection.className, colors);
+  const isVisible = !hiddenKeys?.has(path);
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: `rounded-md border border-border bg-surface p-3 space-y-1 ${isVisible ? "" : "opacity-40"}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex justify-between items-center", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex items-center gap-2", children: [
+        onToggleVisibility && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+          "input",
+          {
+            type: "checkbox",
+            checked: isVisible,
+            onChange: () => onToggleVisibility(path, !isVisible),
+            className: "h-3.5 w-3.5 rounded border-border accent-primary cursor-pointer shrink-0"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+          "span",
+          {
+            className: "h-2.5 w-2.5 rounded-full shrink-0",
+            style: { backgroundColor: color }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "text-sm font-medium text-foreground", children: detection.className }),
+        detection.mask && detection.maskWidth && detection.maskHeight && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { className: "text-[9px] font-mono px-1 py-0.5 rounded bg-primary/10 text-primary", children: [
+          "mask ",
+          detection.maskWidth,
+          "x",
+          detection.maskHeight
+        ] })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(ConfidenceBadge, { confidence: detection.confidence })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "text-[10px] text-foreground-subtle font-mono", children: [
+      "bbox: [",
+      detection.bbox.map((v) => Math.round(v)).join(", "),
+      "]"
+    ] }),
+    detection.labelsData && detection.labelsData.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "flex flex-wrap gap-1 mt-1", children: detection.labelsData.map((l, k) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+      "span",
+      {
+        className: "inline-flex items-center gap-1 text-[10px] font-medium px-1.5 py-0.5 rounded-full",
+        style: { backgroundColor: getClassColor(l.addonId ?? l.label, colors) + "20", color: getClassColor(l.addonId ?? l.label, colors) },
+        children: [
+          l.label,
+          /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { className: "opacity-60", children: [
+            (l.score * 100).toFixed(0),
+            "%"
+          ] }),
+          l.addonId && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "opacity-40 text-[8px]", children: l.addonId })
+        ]
+      },
+      k
+    )) }),
+    detection.children && detection.children.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+      ChildrenTree,
+      {
+        children: detection.children,
+        parentPath: path,
+        colors,
+        hiddenKeys,
+        onToggleVisibility
+      }
+    )
+  ] });
+}
+function ChildrenTree({
+  children,
+  parentPath,
+  colors,
+  hiddenKeys,
+  onToggleVisibility
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "ml-4 mt-1.5 space-y-1.5 border-l-2 border-border pl-3", children: children.map((child, j) => {
+    const childPath = `${parentPath}.${j}`;
+    const childColor = getClassColor(child.className, colors);
+    const isVisible = !hiddenKeys?.has(childPath);
+    return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: `text-xs space-y-0.5 ${isVisible ? "" : "opacity-40"}`, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "flex items-center gap-1.5", children: [
+        onToggleVisibility && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+          "input",
+          {
+            type: "checkbox",
+            checked: isVisible,
+            onChange: () => onToggleVisibility(childPath, !isVisible),
+            className: "h-3 w-3 rounded border-border accent-primary cursor-pointer shrink-0"
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+          "span",
+          {
+            className: "h-1.5 w-1.5 rounded-full shrink-0",
+            style: { backgroundColor: childColor }
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "font-medium", style: { color: childColor }, children: child.className }),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { className: "text-foreground-subtle", children: [
+          (child.confidence * 100).toFixed(0),
+          "%"
+        ] }),
+        child.mask && child.maskWidth && child.maskHeight && /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { className: "text-[9px] font-mono px-1 py-0.5 rounded bg-primary/10 text-primary", children: [
+          "mask ",
+          child.maskWidth,
+          "x",
+          child.maskHeight
+        ] })
+      ] }),
+      child.labelsData && child.labelsData.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("div", { className: "flex flex-wrap gap-1 ml-5 mt-0.5", children: child.labelsData.map((l, k) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
+        "span",
+        {
+          className: "inline-flex items-center gap-0.5 text-[9px] font-medium px-1 py-0.5 rounded-full",
+          style: { backgroundColor: getClassColor(l.addonId ?? l.label, colors) + "20", color: getClassColor(l.addonId ?? l.label, colors) },
+          children: [
+            l.label,
+            " ",
+            /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { className: "opacity-60", children: [
+              (l.score * 100).toFixed(0),
+              "%"
+            ] })
+          ]
+        },
+        k
+      )) }),
+      child.children && child.children.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(
+        ChildrenTree,
+        {
+          children: child.children,
+          parentPath: childPath,
+          colors,
+          hiddenKeys,
+          onToggleVisibility
+        }
+      )
+    ] }, j);
+  }) });
+}
+function ConfidenceBadge({ confidence }) {
+  const level = confidence >= 0.8 ? "bg-success/10 text-success" : confidence >= 0.5 ? "bg-warning/10 text-warning" : "bg-danger/10 text-danger";
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("span", { className: `text-xs font-medium px-2 py-0.5 rounded-full ${level}`, children: [
+    (confidence * 100).toFixed(1),
+    "%"
+  ] });
+}
+
+// src/composites/step-timings.tsx
+var import_jsx_runtime45 = require("react/jsx-runtime");
+function StepTimings({ timings, totalMs, className }) {
+  const entries = Object.entries(timings);
+  if (entries.length === 0 && totalMs === void 0) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: `rounded-lg border border-border bg-surface p-3 space-y-2 ${className ?? ""}`, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "text-xs font-medium text-foreground-subtle uppercase tracking-wide", children: "Timings" }),
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "space-y-1 text-xs", children: [
+      entries.map(([step, ms]) => /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex justify-between", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "text-foreground-subtle", children: step }),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("span", { className: "font-mono text-foreground", children: [
+          ms.toFixed(1),
+          "ms"
+        ] })
+      ] }, step)),
+      totalMs !== void 0 && /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { className: "flex justify-between pt-1 border-t border-border font-medium text-foreground", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { children: "Total" }),
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("span", { className: "font-mono", children: [
+          totalMs.toFixed(1),
+          "ms"
+        ] })
+      ] })
+    ] })
+  ] });
+}
+
+// src/composites/image-selector.tsx
+var import_jsx_runtime46 = require("react/jsx-runtime");
+function ImageSelector({
+  images,
+  selectedFilename,
+  uploadedName,
+  onSelect,
+  onUpload,
+  className
+}) {
+  const handleUploadClick = () => {
+    const input = document.createElement("input");
+    input.type = "file";
+    input.accept = "image/*";
+    input.onchange = (ev) => {
+      const file = ev.target.files?.[0];
+      if (!file) return;
+      const reader = new FileReader();
+      reader.onload = (e) => {
+        const dataUrl = e.target?.result;
+        const b64 = dataUrl.split(",")[1];
+        if (b64) onUpload(b64, file.name, dataUrl);
+      };
+      reader.readAsDataURL(file);
+    };
+    input.click();
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: `flex flex-wrap items-center gap-2 ${className ?? ""}`, children: [
+    images.map((img) => /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+      "button",
+      {
+        onClick: () => onSelect(img.filename),
+        className: `px-3 py-1.5 text-xs rounded-md border transition-colors ${selectedFilename === img.filename ? "bg-primary text-primary-foreground border-primary" : "bg-surface border-border text-foreground hover:border-primary/50"}`,
+        children: img.id
+      },
+      img.filename
+    )),
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+      "button",
+      {
+        onClick: handleUploadClick,
+        className: "px-3 py-1.5 text-xs rounded-md border border-border bg-surface text-foreground hover:bg-surface-hover transition-colors",
+        children: "Upload..."
+      }
+    ),
+    uploadedName && /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "text-xs text-foreground-subtle", children: uploadedName })
+  ] });
+}
+
+// src/composites/inference-config-selector.tsx
+var import_jsx_runtime47 = require("react/jsx-runtime");
+var 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,
+  backend,
+  modelId,
+  agentId = "hub",
+  runtimes,
+  backends,
+  models,
+  agents = [],
+  onRuntimeChange,
+  onBackendChange,
+  onModelChange,
+  onAgentChange,
+  layout = "grid",
+  className,
+  showAgent = false
+}) {
+  const containerClass = layout === "grid" ? "grid grid-cols-1 sm:grid-cols-2 lg:grid-cols-4 gap-4" : layout === "horizontal" ? "flex flex-wrap items-end gap-4" : "space-y-3";
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { className: `${containerClass} ${className ?? ""}`, children: [
+    showAgent && agents.length > 0 && /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("label", { className: "space-y-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "text-xs font-medium text-foreground-subtle", children: "Agent" }),
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+        "select",
+        {
+          value: agentId,
+          onChange: (e) => onAgentChange?.(e.target.value),
+          className: SELECT_CLASS,
+          children: agents.map((a) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("option", { value: a.id, children: [
+            a.name,
+            " (",
+            a.status,
+            ")"
+          ] }, a.id))
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("label", { className: "space-y-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "text-xs font-medium text-foreground-subtle", children: "Runtime" }),
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+        "select",
+        {
+          value: runtime,
+          onChange: (e) => onRuntimeChange(e.target.value),
+          className: SELECT_CLASS,
+          children: runtimes.map((r) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("option", { value: r.value, disabled: !r.available, children: [
+            r.label,
+            !r.available ? " (unavailable)" : ""
+          ] }, r.value))
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("label", { className: "space-y-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "text-xs font-medium text-foreground-subtle", children: "Backend" }),
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+        "select",
+        {
+          value: backend,
+          onChange: (e) => onBackendChange(e.target.value),
+          className: SELECT_CLASS,
+          children: backends.map((b) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("option", { value: b.id, disabled: !b.available, children: [
+            b.label,
+            !b.available ? " (unavailable)" : ""
+          ] }, b.id))
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("label", { className: "space-y-1", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("span", { className: "text-xs font-medium text-foreground-subtle", children: "Model" }),
+      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
+        "select",
+        {
+          value: modelId,
+          onChange: (e) => onModelChange(e.target.value),
+          className: SELECT_CLASS,
+          children: models.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("option", { value: "", children: "No compatible models" }) : models.map((m) => /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("option", { value: m.id, children: [
+            m.name,
+            m.downloaded ? " \u2713" : ""
+          ] }, m.id))
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/composites/mount-addon-page.tsx
+var import_react28 = require("react");
+var import_client2 = require("react-dom/client");
+
+// src/composites/dev-shell.tsx
+var import_react27 = require("react");
+var import_client = require("@trpc/client");
+var import_superjson = __toESM(require("superjson"), 1);
+
+// src/composites/login-form.tsx
+var import_react26 = require("react");
+var import_jsx_runtime48 = require("react/jsx-runtime");
+function EyeIcon({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("path", { d: "M2.062 12.348a1 1 0 0 1 0-.696 10.75 10.75 0 0 1 19.876 0 1 1 0 0 1 0 .696 10.75 10.75 0 0 1-19.876 0" }),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("circle", { cx: "12", cy: "12", r: "3" })
+      ]
+    }
+  );
+}
+function EyeOffIcon({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("path", { d: "M10.733 5.076a10.744 10.744 0 0 1 11.205 6.575 1 1 0 0 1 0 .696 10.747 10.747 0 0 1-1.444 2.49" }),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("path", { d: "M14.084 14.158a3 3 0 0 1-4.242-4.242" }),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("path", { d: "M17.479 17.499a10.75 10.75 0 0 1-15.417-5.151 1 1 0 0 1 0-.696 10.75 10.75 0 0 1 4.446-5.143" }),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("path", { d: "m2 2 20 20" })
+      ]
+    }
+  );
+}
+function SpinnerIcon({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("path", { d: "M21 12a9 9 0 1 1-6.219-8.56" })
+    }
+  );
+}
+function LoginForm({
+  onLogin,
+  serverUrl,
+  logoSrc,
+  error: externalError,
+  className
+}) {
+  const [username, setUsername] = (0, import_react26.useState)("");
+  const [password, setPassword] = (0, import_react26.useState)("");
+  const [showPassword, setShowPassword] = (0, import_react26.useState)(false);
+  const [submitting, setSubmitting] = (0, import_react26.useState)(false);
+  const [internalError, setInternalError] = (0, import_react26.useState)(null);
+  const error = externalError ?? internalError;
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+    if (submitting) return;
+    setInternalError(null);
+    setSubmitting(true);
+    try {
+      await onLogin(username, password);
+    } catch (err) {
+      const message = err instanceof Error ? err.message : "Login failed. Please try again.";
+      setInternalError(message);
+    } finally {
+      setSubmitting(false);
+    }
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+    "div",
+    {
+      className: cn(
+        "flex min-h-screen items-center justify-center bg-background p-4",
+        className
+      ),
+      children: /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "w-full max-w-sm", children: [
+        logoSrc && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "flex justify-center mb-8", children: /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("img", { src: logoSrc, alt: "Logo", className: "h-12" }) }),
+        serverUrl && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: "mb-4 text-center text-xs text-foreground-subtle truncate", children: serverUrl }),
+        /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+          "form",
+          {
+            onSubmit: handleSubmit,
+            className: "space-y-4 rounded-xl border border-border bg-surface p-6 shadow-xl shadow-black/10",
+            children: [
+              error && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "rounded-md bg-danger/10 border border-danger/20 px-3 py-2 text-xs text-danger", children: error }),
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "space-y-1.5", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("label", { className: "text-xs font-medium text-foreground-subtle", children: "Username" }),
+                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                  "input",
+                  {
+                    type: "text",
+                    value: username,
+                    onChange: (e) => setUsername(e.target.value),
+                    autoComplete: "username",
+                    required: true,
+                    className: "w-full rounded-lg border border-border bg-background px-3 py-2.5 text-sm text-foreground placeholder:text-foreground-subtle focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "space-y-1.5", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("label", { className: "text-xs font-medium text-foreground-subtle", children: "Password" }),
+                /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: "relative", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                    "input",
+                    {
+                      type: showPassword ? "text" : "password",
+                      value: password,
+                      onChange: (e) => setPassword(e.target.value),
+                      autoComplete: "current-password",
+                      required: true,
+                      className: "w-full rounded-lg border border-border bg-background px-3 py-2.5 pr-10 text-sm text-foreground placeholder:text-foreground-subtle focus:outline-none focus:ring-2 focus:ring-primary/50 focus:border-primary"
+                    }
+                  ),
+                  /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(
+                    "button",
+                    {
+                      type: "button",
+                      onClick: () => setShowPassword((prev) => !prev),
+                      className: "absolute right-2.5 top-1/2 -translate-y-1/2 text-foreground-subtle hover:text-foreground",
+                      tabIndex: -1,
+                      children: showPassword ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(EyeOffIcon, { className: "h-4 w-4" }) : /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(EyeIcon, { className: "h-4 w-4" })
+                    }
+                  )
+                ] })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)(
+                "button",
+                {
+                  type: "submit",
+                  disabled: submitting,
+                  className: "w-full rounded-lg bg-primary px-4 py-2.5 text-sm font-semibold text-primary-foreground hover:bg-primary/90 disabled:opacity-50 disabled:cursor-not-allowed transition-colors flex items-center justify-center gap-2",
+                  children: [
+                    submitting && /* @__PURE__ */ (0, import_jsx_runtime48.jsx)(SpinnerIcon, { className: "h-4 w-4 animate-spin" }),
+                    submitting ? "Logging in..." : "Log in"
+                  ]
+                }
+              )
+            ]
+          }
+        )
+      ] })
+    }
+  );
+}
+
+// src/composites/dev-shell.tsx
+var import_jsx_runtime49 = require("react/jsx-runtime");
+var STORAGE_KEY = "camstack_dev_token";
+var DevShellContext = (0, import_react27.createContext)(null);
+function useDevShell() {
+  const ctx = (0, import_react27.useContext)(DevShellContext);
+  if (!ctx) {
+    throw new Error("useDevShell must be used within a DevShell");
+  }
+  return ctx;
+}
+function getStoredToken() {
+  if (typeof window === "undefined") return null;
+  return localStorage.getItem(STORAGE_KEY);
+}
+function SunIcon({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("circle", { cx: "12", cy: "12", r: "4" }),
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("path", { d: "M12 2v2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("path", { d: "M12 20v2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("path", { d: "m4.93 4.93 1.41 1.41" }),
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("path", { d: "m17.66 17.66 1.41 1.41" }),
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("path", { d: "M2 12h2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("path", { d: "M20 12h2" }),
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("path", { d: "m6.34 17.66-1.41 1.41" }),
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("path", { d: "m19.07 4.93-1.41 1.41" })
+      ]
+    }
+  );
+}
+function MoonIcon({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      className,
+      children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("path", { d: "M12 3a6 6 0 0 0 9 9 9 9 0 1 1-9-9Z" })
+    }
+  );
+}
+function DevShellInner({
+  children,
+  serverUrl,
+  title,
+  token,
+  onLogout
+}) {
+  const theme = useThemeMode();
+  const trpc = (0, import_react27.useMemo)(
+    () => {
+      const wsUrl = serverUrl.replace(/^http/, "ws") + "/trpc";
+      const wsClient = (0, import_client.createWSClient)({
+        url: wsUrl,
+        connectionParams: () => ({ token })
+      });
+      return (0, import_client.createTRPCClient)({
+        links: [
+          (0, import_client.splitLink)({
+            condition: (op) => op.type === "subscription",
+            true: (0, import_client.wsLink)({ client: wsClient, transformer: import_superjson.default }),
+            false: (0, import_client.httpLink)({
+              url: `${serverUrl}/trpc`,
+              transformer: import_superjson.default,
+              headers: () => ({ authorization: `Bearer ${token}` })
+            })
+          })
+        ]
+      });
+    },
+    [serverUrl, token]
+  );
+  const contextValue = (0, import_react27.useMemo)(
+    () => ({ trpc, token, logout: onLogout }),
+    [trpc, token, onLogout]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(DevShellContext.Provider, { value: contextValue, children: /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "min-h-screen bg-background text-foreground", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex items-center justify-between border-b border-border bg-surface px-4 py-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "rounded bg-warning/20 px-2 py-0.5 text-xs font-bold text-warning", children: "DEV MODE" }),
+        title && /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "text-sm font-medium text-foreground", children: title }),
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "text-xs text-foreground-subtle", children: serverUrl })
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: "flex items-center gap-2", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)(
+          "button",
+          {
+            type: "button",
+            onClick: theme.toggleMode,
+            className: "flex items-center gap-1.5 rounded-md px-2 py-1 text-xs font-medium text-foreground-subtle hover:text-foreground hover:bg-surface-hover transition-colors",
+            title: `Theme: ${theme.mode}`,
+            children: [
+              theme.resolvedMode === "dark" ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(SunIcon, { className: "h-3.5 w-3.5" }) : /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(MoonIcon, { className: "h-3.5 w-3.5" }),
+              theme.mode === "dark" ? "Dark" : theme.mode === "light" ? "Light" : "System"
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+          "button",
+          {
+            type: "button",
+            onClick: onLogout,
+            className: "rounded-md px-2.5 py-1 text-xs font-medium text-danger hover:bg-danger/10 transition-colors",
+            children: "Logout"
+          }
+        )
+      ] })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "p-4", children: children({ trpc, theme }) })
+  ] }) });
+}
+function DevShell({
+  children,
+  serverUrl = "https://localhost:4443",
+  title
+}) {
+  const [token, setToken] = (0, import_react27.useState)(getStoredToken);
+  const handleLogin = (0, import_react27.useCallback)(
+    async (username, password) => {
+      const anonClient = (0, import_client.createTRPCClient)({
+        links: [
+          (0, import_client.httpLink)({
+            url: `${serverUrl}/trpc`,
+            transformer: import_superjson.default
+          })
+        ]
+      });
+      const res = await anonClient.auth.login.mutate({ username, password });
+      if (!res?.token) throw new Error("No token returned");
+      localStorage.setItem(STORAGE_KEY, res.token);
+      setToken(res.token);
+    },
+    [serverUrl]
+  );
+  const handleLogout = (0, import_react27.useCallback)(() => {
+    localStorage.removeItem(STORAGE_KEY);
+    setToken(null);
+  }, []);
+  if (!token) {
+    return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(LoginForm, { onLogin: handleLogin, serverUrl }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(ThemeProvider, { children: /* @__PURE__ */ (0, import_jsx_runtime49.jsx)(
+    DevShellInner,
+    {
+      serverUrl,
+      title,
+      token,
+      onLogout: handleLogout,
+      children
+    }
+  ) });
+}
+
+// src/composites/mount-addon-page.tsx
+function mountAddonPage(PageComponent, options = {}) {
+  const {
+    serverUrl = "https://localhost:4443",
+    title,
+    rootId = "root"
+  } = options;
+  const root = document.getElementById(rootId);
+  if (!root) {
+    console.error(`[mountAddonPage] Element #${rootId} not found`);
+    return;
+  }
+  (0, import_client2.createRoot)(root).render(
+    (0, import_react28.createElement)(DevShell, {
+      serverUrl,
+      title,
+      children: ({ trpc, theme }) => (0, import_react28.createElement)(PageComponent, {
+        trpc,
+        theme: { isDark: theme.resolvedMode === "dark" },
+        navigate: (path) => {
+          console.log("[dev] navigate:", path);
+        }
+      })
+    })
+  );
+}
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   AppShell,
   Badge,
   Button,
+  CLASS_COLORS,
   Card,
   Checkbox,
   CodeBlock,
   ConfirmDialog,
+  DEFAULT_CLASS_COLORS,
+  DEFAULT_COLOR,
   DataTable,
+  DetectionCanvas,
+  DetectionResultTree,
+  DevShell,
   DeviceCard,
   DeviceGrid,
   Dialog,
@@ -2048,22 +3798,30 @@ function DeviceGrid({
   FloatingPanel,
   FormField,
   IconButton,
+  ImageSelector,
+  InferenceConfigSelector,
   Input,
   KeyValueList,
   Label,
+  LoginForm,
   PageHeader,
+  PipelineBuilder,
+  PipelineRuntimeSelector,
+  PipelineStep,
   Popover,
   PopoverContent,
   PopoverTrigger,
   ProviderBadge,
   ScrollArea,
   Select,
+  SemanticBadge,
   Separator,
   Sidebar,
   SidebarItem,
   Skeleton,
   StatCard,
   StatusBadge,
+  StepTimings,
   Switch,
   Tabs,
   TabsContent,
@@ -2073,14 +3831,18 @@ function DeviceGrid({
   Tooltip,
   TooltipContent,
   TooltipTrigger,
+  VersionBadge,
   cn,
   createTheme,
   darkColors,
   defaultTheme,
+  getClassColor,
   lightColors,
+  mountAddonPage,
   providerIcons,
   statusIcons,
   themeToCss,
+  useDevShell,
   useThemeMode
 });
 //# sourceMappingURL=index.cjs.map