@camstack/ui-library 0.1.25

package/dist/index.cjs

@@ -0,0 +1,2086 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var src_exports = {};
+__export(src_exports, {
+  AppShell: () => AppShell,
+  Badge: () => Badge,
+  Button: () => Button,
+  Card: () => Card,
+  Checkbox: () => Checkbox,
+  CodeBlock: () => CodeBlock,
+  ConfirmDialog: () => ConfirmDialog,
+  DataTable: () => DataTable,
+  DeviceCard: () => DeviceCard,
+  DeviceGrid: () => DeviceGrid,
+  Dialog: () => Dialog,
+  DialogContent: () => DialogContent,
+  DialogDescription: () => DialogDescription,
+  DialogFooter: () => DialogFooter,
+  DialogHeader: () => DialogHeader,
+  DialogTitle: () => DialogTitle,
+  DialogTrigger: () => DialogTrigger,
+  Dropdown: () => Dropdown,
+  DropdownContent: () => DropdownContent,
+  DropdownItem: () => DropdownItem,
+  DropdownTrigger: () => DropdownTrigger,
+  EmptyState: () => EmptyState,
+  FilterBar: () => FilterBar,
+  FloatingPanel: () => FloatingPanel,
+  FormField: () => FormField,
+  IconButton: () => IconButton,
+  Input: () => Input,
+  KeyValueList: () => KeyValueList,
+  Label: () => Label,
+  PageHeader: () => PageHeader,
+  Popover: () => Popover,
+  PopoverContent: () => PopoverContent,
+  PopoverTrigger: () => PopoverTrigger,
+  ProviderBadge: () => ProviderBadge,
+  ScrollArea: () => ScrollArea,
+  Select: () => Select,
+  Separator: () => Separator,
+  Sidebar: () => Sidebar,
+  SidebarItem: () => SidebarItem,
+  Skeleton: () => Skeleton,
+  StatCard: () => StatCard,
+  StatusBadge: () => StatusBadge,
+  Switch: () => Switch,
+  Tabs: () => Tabs,
+  TabsContent: () => TabsContent,
+  TabsList: () => TabsList,
+  TabsTrigger: () => TabsTrigger,
+  ThemeProvider: () => ThemeProvider,
+  Tooltip: () => Tooltip,
+  TooltipContent: () => TooltipContent,
+  TooltipTrigger: () => TooltipTrigger,
+  cn: () => cn,
+  createTheme: () => createTheme,
+  darkColors: () => darkColors,
+  defaultTheme: () => defaultTheme,
+  lightColors: () => lightColors,
+  providerIcons: () => providerIcons,
+  statusIcons: () => statusIcons,
+  themeToCss: () => themeToCss,
+  useThemeMode: () => useThemeMode
+});
+module.exports = __toCommonJS(src_exports);
+
+// src/theme/defaults.ts
+var providerColors = {
+  frigate: "#3b82f6",
+  scrypted: "#a855f7",
+  reolink: "#06b6d4",
+  homeAssistant: "#22d3ee",
+  rtsp: "#78716c"
+};
+var darkColors = {
+  primary: "#f59e42",
+  primaryForeground: "#0c0a09",
+  background: "#0c0a09",
+  backgroundElevated: "#1c1917",
+  surface: "#1c1917",
+  surfaceHover: "#292524",
+  border: "#292524",
+  borderSubtle: "#1c1917",
+  foreground: "#fafaf9",
+  foregroundMuted: "#a8a29e",
+  foregroundSubtle: "#78716c",
+  foregroundDisabled: "#57534e",
+  success: "#4ade80",
+  warning: "#fbbf24",
+  danger: "#f87171",
+  info: "#60a5fa",
+  provider: providerColors
+};
+var lightColors = {
+  primary: "#e67e22",
+  primaryForeground: "#ffffff",
+  background: "#fafaf9",
+  backgroundElevated: "#ffffff",
+  surface: "#f5f5f4",
+  surfaceHover: "#e7e5e4",
+  border: "#d6d3d1",
+  borderSubtle: "#e7e5e4",
+  foreground: "#1c1917",
+  foregroundMuted: "#57534e",
+  foregroundSubtle: "#78716c",
+  foregroundDisabled: "#a8a29e",
+  success: "#16a34a",
+  warning: "#d97706",
+  danger: "#dc2626",
+  info: "#2563eb",
+  provider: providerColors
+};
+var defaultTheme = {
+  colors: {
+    dark: darkColors,
+    light: lightColors
+  },
+  spacing: {
+    xs: 2,
+    sm: 4,
+    md: 8,
+    lg: 12,
+    xl: 16,
+    "2xl": 24,
+    "3xl": 32
+  },
+  radius: {
+    sm: 4,
+    md: 6,
+    lg: 8,
+    xl: 12
+  },
+  typography: {
+    fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif',
+    sizes: {
+      xs: { fontSize: 10, lineHeight: 14 },
+      sm: { fontSize: 11, lineHeight: 16 },
+      base: { fontSize: 12, lineHeight: 18 },
+      lg: { fontSize: 13, lineHeight: 18 },
+      xl: { fontSize: 14, lineHeight: 20 },
+      "2xl": { fontSize: 16, lineHeight: 22 },
+      "3xl": { fontSize: 20, lineHeight: 28 }
+    },
+    weights: {
+      regular: 400,
+      medium: 500,
+      semibold: 600,
+      bold: 700
+    }
+  },
+  table: {
+    rowHeight: 28,
+    headerHeight: 24,
+    cellPaddingX: 8,
+    cellPaddingY: 6
+  },
+  sidebar: {
+    width: 176,
+    itemHeight: 28,
+    iconSize: 14
+  }
+};
+
+// src/theme/create-theme.ts
+function deepMerge(target, source) {
+  const result = { ...target };
+  for (const key in source) {
+    const sourceVal = source[key];
+    const targetVal = target[key];
+    if (sourceVal !== void 0 && typeof sourceVal === "object" && sourceVal !== null && !Array.isArray(sourceVal) && typeof targetVal === "object" && targetVal !== null) {
+      result[key] = deepMerge(
+        targetVal,
+        sourceVal
+      );
+    } else if (sourceVal !== void 0) {
+      result[key] = sourceVal;
+    }
+  }
+  return result;
+}
+function createTheme(overrides) {
+  if (!overrides) return structuredClone(defaultTheme);
+  return deepMerge(structuredClone(defaultTheme), overrides);
+}
+
+// src/theme/theme-to-css.ts
+function camelToKebab(str) {
+  return str.replace(/[A-Z]/g, (m) => `-${m.toLowerCase()}`);
+}
+function colorTokenToCssVar(key) {
+  return `--color-${camelToKebab(key)}`;
+}
+function generateColorBlock(colors) {
+  const lines = [];
+  for (const [key, value] of Object.entries(colors)) {
+    if (key === "provider") continue;
+    lines.push(`  ${colorTokenToCssVar(key)}: ${value};`);
+  }
+  return lines.join("\n");
+}
+function generateProviderColors(provider) {
+  const lines = [];
+  for (const [key, value] of Object.entries(provider)) {
+    lines.push(`  --color-provider-${camelToKebab(key)}: ${value};`);
+  }
+  return lines.join("\n");
+}
+function generateSpacingTokens(spacing) {
+  const lines = [];
+  for (const [key, value] of Object.entries(spacing)) {
+    lines.push(`  --spacing-${key}: ${value}px;`);
+  }
+  return lines.join("\n");
+}
+function generateRadiusTokens(radius) {
+  const lines = [];
+  for (const [key, value] of Object.entries(radius)) {
+    lines.push(`  --radius-${key}: ${value}px;`);
+  }
+  return lines.join("\n");
+}
+function themeToCss(theme) {
+  const darkColorBlock = generateColorBlock(theme.colors.dark);
+  const lightColorBlock = generateColorBlock(theme.colors.light);
+  const providerBlock = generateProviderColors(theme.colors.dark.provider);
+  const spacingBlock = generateSpacingTokens(theme.spacing);
+  const radiusBlock = generateRadiusTokens(theme.radius);
+  return `@theme {
+${providerBlock}
+${spacingBlock}
+${radiusBlock}
+}
+
+.dark {
+${darkColorBlock}
+}
+
+.light {
+${lightColorBlock}
+}
+
+@media (prefers-color-scheme: dark) {
+  :root {
+${darkColorBlock.replace(/^  /gm, "    ")}
+  }
+}
+
+@media (prefers-color-scheme: light) {
+  :root {
+${lightColorBlock.replace(/^  /gm, "    ")}
+  }
+}
+`;
+}
+
+// src/theme/theme-provider.tsx
+var import_react = require("react");
+var import_jsx_runtime = require("react/jsx-runtime");
+var ThemeContext = (0, import_react.createContext)(null);
+var TOGGLE_ORDER = ["dark", "light", "system"];
+function getSystemPreference() {
+  if (typeof window === "undefined") return "dark";
+  return window.matchMedia("(prefers-color-scheme: dark)").matches ? "dark" : "light";
+}
+function getInitialMode(storageKey, defaultMode) {
+  if (typeof window === "undefined") return defaultMode;
+  const stored = localStorage.getItem(storageKey);
+  if (stored === "dark" || stored === "light" || stored === "system") {
+    return stored;
+  }
+  return defaultMode;
+}
+function resolveMode(mode) {
+  if (mode === "system") return getSystemPreference();
+  return mode;
+}
+function ThemeProvider({
+  children,
+  defaultMode = "system",
+  storageKey = "camstack-theme-mode"
+}) {
+  const [mode, setModeState] = (0, import_react.useState)(() => getInitialMode(storageKey, defaultMode));
+  const [resolvedMode, setResolvedMode] = (0, import_react.useState)(() => resolveMode(mode));
+  const setMode = (0, import_react.useCallback)(
+    (newMode) => {
+      setModeState(newMode);
+      setResolvedMode(resolveMode(newMode));
+      if (typeof window !== "undefined") {
+        localStorage.setItem(storageKey, newMode);
+      }
+    },
+    [storageKey]
+  );
+  const toggleMode = (0, import_react.useCallback)(() => {
+    const currentIndex = TOGGLE_ORDER.indexOf(mode);
+    const nextIndex = (currentIndex + 1) % TOGGLE_ORDER.length;
+    setMode(TOGGLE_ORDER[nextIndex] ?? "dark");
+  }, [mode, setMode]);
+  (0, import_react.useEffect)(() => {
+    if (typeof document === "undefined") return;
+    const root = document.documentElement;
+    root.classList.remove("dark", "light");
+    root.classList.add(resolvedMode);
+  }, [mode, resolvedMode]);
+  (0, import_react.useEffect)(() => {
+    if (typeof window === "undefined" || mode !== "system") return;
+    const mediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+    const handleChange = () => {
+      setResolvedMode(getSystemPreference());
+    };
+    mediaQuery.addEventListener("change", handleChange);
+    return () => mediaQuery.removeEventListener("change", handleChange);
+  }, [mode]);
+  const value = (0, import_react.useMemo)(
+    () => ({ mode, resolvedMode, setMode, toggleMode }),
+    [mode, resolvedMode, setMode, toggleMode]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime.jsx)(ThemeContext.Provider, { value, children });
+}
+
+// src/theme/use-theme-mode.ts
+var import_react2 = require("react");
+function useThemeMode() {
+  const context = (0, import_react2.useContext)(ThemeContext);
+  if (!context) {
+    throw new Error("useThemeMode must be used within a ThemeProvider");
+  }
+  return context;
+}
+
+// src/lib/cn.ts
+var import_clsx = require("clsx");
+var import_tailwind_merge = require("tailwind-merge");
+function cn(...inputs) {
+  return (0, import_tailwind_merge.twMerge)((0, import_clsx.clsx)(inputs));
+}
+
+// src/icons/provider-icons.ts
+var import_lucide_react = require("lucide-react");
+var providerIcons = {
+  frigate: import_lucide_react.Ship,
+  scrypted: import_lucide_react.Shield,
+  reolink: import_lucide_react.Radio,
+  homeAssistant: import_lucide_react.Home,
+  rtsp: import_lucide_react.Cast
+};
+
+// src/icons/status-icons.ts
+var import_lucide_react2 = require("lucide-react");
+var statusIcons = {
+  online: import_lucide_react2.CircleCheck,
+  offline: import_lucide_react2.CircleX,
+  degraded: import_lucide_react2.CircleAlert,
+  unknown: import_lucide_react2.CircleHelp
+};
+
+// src/primitives/button.tsx
+var import_react3 = require("react");
+var import_class_variance_authority = require("class-variance-authority");
+var import_jsx_runtime2 = require("react/jsx-runtime");
+var buttonVariants = (0, import_class_variance_authority.cva)(
+  "inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:opacity-50 disabled:pointer-events-none",
+  {
+    variants: {
+      variant: {
+        primary: "bg-primary text-primary-foreground hover:bg-primary/90",
+        secondary: "bg-surface text-foreground hover:bg-surface-hover",
+        ghost: "hover:bg-surface-hover text-foreground-muted",
+        danger: "bg-danger text-white hover:bg-danger/90",
+        outline: "border border-border bg-transparent hover:bg-surface-hover"
+      },
+      size: {
+        sm: "h-7 px-2.5 text-xs gap-1.5",
+        md: "h-8 px-3 text-sm gap-2",
+        lg: "h-9 px-4 text-sm gap-2"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "sm"
+    }
+  }
+);
+var Button = (0, import_react3.forwardRef)(
+  ({ className, variant, size, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime2.jsx)(
+      "button",
+      {
+        ref,
+        className: cn(buttonVariants({ variant, size }), className),
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/primitives/icon-button.tsx
+var import_react4 = require("react");
+var import_class_variance_authority2 = require("class-variance-authority");
+var import_jsx_runtime3 = require("react/jsx-runtime");
+var iconButtonVariants = (0, import_class_variance_authority2.cva)(
+  "inline-flex items-center justify-center rounded-md font-medium transition-colors disabled:opacity-50 disabled:pointer-events-none",
+  {
+    variants: {
+      variant: {
+        primary: "bg-primary text-primary-foreground hover:bg-primary/90",
+        secondary: "bg-surface text-foreground hover:bg-surface-hover",
+        ghost: "hover:bg-surface-hover text-foreground-muted",
+        danger: "bg-danger text-white hover:bg-danger/90",
+        outline: "border border-border bg-transparent hover:bg-surface-hover"
+      },
+      size: {
+        sm: "h-7 w-7",
+        md: "h-8 w-8",
+        lg: "h-9 w-9"
+      }
+    },
+    defaultVariants: {
+      variant: "primary",
+      size: "sm"
+    }
+  }
+);
+var IconButton = (0, import_react4.forwardRef)(
+  ({ className, variant, size, icon: Icon, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(
+      "button",
+      {
+        ref,
+        className: cn(iconButtonVariants({ variant, size }), className),
+        ...props,
+        children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(Icon, { className: "h-4 w-4" })
+      }
+    );
+  }
+);
+IconButton.displayName = "IconButton";
+
+// src/primitives/badge.tsx
+var import_react5 = require("react");
+var import_class_variance_authority3 = require("class-variance-authority");
+var import_jsx_runtime4 = require("react/jsx-runtime");
+var badgeVariants = (0, import_class_variance_authority3.cva)(
+  "inline-flex items-center rounded-full text-xs font-medium px-2 py-0.5",
+  {
+    variants: {
+      variant: {
+        default: "bg-surface-hover text-foreground",
+        success: "bg-success/15 text-success",
+        warning: "bg-warning/15 text-warning",
+        danger: "bg-danger/15 text-danger",
+        info: "bg-info/15 text-info"
+      },
+      styleVariant: {
+        solid: "",
+        outline: "border bg-transparent"
+      }
+    },
+    defaultVariants: {
+      variant: "default",
+      styleVariant: "solid"
+    }
+  }
+);
+var Badge = (0, import_react5.forwardRef)(
+  ({ className, variant, style, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime4.jsx)(
+      "span",
+      {
+        ref,
+        className: cn(badgeVariants({ variant, styleVariant: style }), className),
+        ...props
+      }
+    );
+  }
+);
+Badge.displayName = "Badge";
+
+// src/primitives/card.tsx
+var import_react6 = require("react");
+var import_class_variance_authority4 = require("class-variance-authority");
+var import_jsx_runtime5 = require("react/jsx-runtime");
+var cardVariants = (0, import_class_variance_authority4.cva)("rounded-lg p-3", {
+  variants: {
+    variant: {
+      flat: "bg-surface",
+      bordered: "bg-surface border border-border"
+    }
+  },
+  defaultVariants: {
+    variant: "bordered"
+  }
+});
+var Card = (0, import_react6.forwardRef)(
+  ({ className, variant, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime5.jsx)(
+      "div",
+      {
+        ref,
+        className: cn(cardVariants({ variant }), className),
+        ...props
+      }
+    );
+  }
+);
+Card.displayName = "Card";
+
+// src/primitives/label.tsx
+var import_react7 = require("react");
+var import_jsx_runtime6 = require("react/jsx-runtime");
+var Label = (0, import_react7.forwardRef)(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime6.jsx)(
+      "label",
+      {
+        ref,
+        className: cn(
+          "text-[10px] uppercase tracking-wider text-foreground-muted font-medium",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Label.displayName = "Label";
+
+// src/primitives/separator.tsx
+var import_react8 = require("react");
+var import_class_variance_authority5 = require("class-variance-authority");
+var import_jsx_runtime7 = require("react/jsx-runtime");
+var separatorVariants = (0, import_class_variance_authority5.cva)("", {
+  variants: {
+    orientation: {
+      horizontal: "h-px w-full bg-border-subtle",
+      vertical: "w-px h-full bg-border-subtle"
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal"
+  }
+});
+var Separator = (0, import_react8.forwardRef)(
+  ({ className, orientation, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime7.jsx)(
+      "div",
+      {
+        ref,
+        role: "separator",
+        className: cn(separatorVariants({ orientation }), className),
+        ...props
+      }
+    );
+  }
+);
+Separator.displayName = "Separator";
+
+// src/primitives/skeleton.tsx
+var import_react9 = require("react");
+var import_jsx_runtime8 = require("react/jsx-runtime");
+var Skeleton = (0, import_react9.forwardRef)(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
+      "div",
+      {
+        ref,
+        className: cn("animate-pulse bg-surface-hover rounded-md h-4 w-full", className),
+        ...props
+      }
+    );
+  }
+);
+Skeleton.displayName = "Skeleton";
+
+// src/primitives/input.tsx
+var import_react10 = require("react");
+var import_class_variance_authority6 = require("class-variance-authority");
+var import_jsx_runtime9 = require("react/jsx-runtime");
+var inputVariants = (0, import_class_variance_authority6.cva)(
+  "h-7 w-full px-2.5 text-xs bg-surface border rounded-md text-foreground placeholder:text-foreground-subtle focus:outline-none focus:ring-1 focus:ring-primary transition-colors",
+  {
+    variants: {
+      state: {
+        default: "border-border",
+        error: "border-danger"
+      }
+    },
+    defaultVariants: {
+      state: "default"
+    }
+  }
+);
+var Input = (0, import_react10.forwardRef)(
+  ({ className, state, leftSlot, rightSlot, ...props }, ref) => {
+    if (leftSlot || rightSlot) {
+      return /* @__PURE__ */ (0, import_jsx_runtime9.jsxs)("div", { className: "relative flex items-center w-full", children: [
+        leftSlot && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "absolute left-2.5 flex items-center pointer-events-none", children: leftSlot }),
+        /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+          "input",
+          {
+            ref,
+            className: cn(
+              inputVariants({ state }),
+              leftSlot ? "pl-7" : "",
+              rightSlot ? "pr-7" : "",
+              className
+            ),
+            ...props
+          }
+        ),
+        rightSlot && /* @__PURE__ */ (0, import_jsx_runtime9.jsx)("div", { className: "absolute right-2.5 flex items-center pointer-events-none", children: rightSlot })
+      ] });
+    }
+    return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
+      "input",
+      {
+        ref,
+        className: cn(inputVariants({ state }), className),
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+
+// src/primitives/select.tsx
+var import_react11 = require("react");
+var import_lucide_react3 = require("lucide-react");
+var import_jsx_runtime10 = require("react/jsx-runtime");
+var Select = (0, import_react11.forwardRef)(
+  ({ className, options, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime10.jsxs)("div", { className: "relative w-full", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(
+        "select",
+        {
+          ref,
+          className: cn(
+            "h-7 w-full px-2.5 text-xs bg-surface border border-border rounded-md text-foreground appearance-none pr-7 focus:outline-none focus:ring-1 focus:ring-primary",
+            className
+          ),
+          ...props,
+          children: options.map((option) => /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("option", { value: option.value, children: option.label }, option.value))
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime10.jsx)("div", { className: "absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none text-foreground-muted", children: /* @__PURE__ */ (0, import_jsx_runtime10.jsx)(import_lucide_react3.ChevronDown, { className: "h-3.5 w-3.5" }) })
+    ] });
+  }
+);
+Select.displayName = "Select";
+
+// src/primitives/checkbox.tsx
+var import_react12 = require("react");
+var import_jsx_runtime11 = require("react/jsx-runtime");
+var Checkbox = (0, import_react12.forwardRef)(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime11.jsx)(
+      "input",
+      {
+        ref,
+        type: "checkbox",
+        className: cn(
+          "w-3.5 h-3.5 rounded-sm border border-border accent-primary",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Checkbox.displayName = "Checkbox";
+
+// src/primitives/switch.tsx
+var import_react13 = require("react");
+var import_jsx_runtime12 = require("react/jsx-runtime");
+var Switch = (0, import_react13.forwardRef)(
+  ({ className, checked, onCheckedChange, label, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+      "button",
+      {
+        ref,
+        role: "switch",
+        "aria-checked": checked,
+        type: "button",
+        onClick: () => onCheckedChange(!checked),
+        className: cn("inline-flex items-center gap-2", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+            "span",
+            {
+              className: cn(
+                "w-8 h-4 rounded-full transition-colors",
+                checked ? "bg-primary" : "bg-surface-hover"
+              ),
+              children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+                "span",
+                {
+                  className: cn(
+                    "block w-3.5 h-3.5 rounded-full bg-white transition-transform",
+                    checked ? "translate-x-4" : "translate-x-0.5"
+                  )
+                }
+              )
+            }
+          ),
+          label && /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "text-xs text-foreground", children: label })
+        ]
+      }
+    );
+  }
+);
+Switch.displayName = "Switch";
+
+// src/primitives/dialog.tsx
+var import_react14 = require("react");
+var import_class_variance_authority7 = require("class-variance-authority");
+var import_jsx_runtime13 = require("react/jsx-runtime");
+var DialogContext = (0, import_react14.createContext)(null);
+function useDialogContext() {
+  const ctx = (0, import_react14.useContext)(DialogContext);
+  if (!ctx) throw new Error("Dialog compound components must be used within <Dialog>");
+  return ctx;
+}
+function Dialog({ children, open: controlledOpen, onOpenChange }) {
+  const [uncontrolledOpen, setUncontrolledOpen] = (0, import_react14.useState)(false);
+  const open = controlledOpen ?? uncontrolledOpen;
+  const contentId = (0, import_react14.useId)();
+  const setOpen = (0, import_react14.useCallback)(
+    (next) => {
+      onOpenChange?.(next);
+      if (controlledOpen === void 0) setUncontrolledOpen(next);
+    },
+    [controlledOpen, onOpenChange]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(DialogContext.Provider, { value: { open, setOpen, contentId }, children });
+}
+function DialogTrigger({ children, ...props }) {
+  const { setOpen } = useDialogContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("button", { type: "button", onClick: () => setOpen(true), ...props, children });
+}
+var contentVariants = (0, import_class_variance_authority7.cva)(
+  "bg-background-elevated border border-border rounded-lg p-4 backdrop:bg-black/50 backdrop:backdrop-blur-sm",
+  {
+    variants: {
+      width: {
+        sm: "max-w-sm",
+        md: "max-w-md",
+        lg: "max-w-lg"
+      }
+    },
+    defaultVariants: { width: "md" }
+  }
+);
+var DialogContent = (0, import_react14.forwardRef)(
+  ({ className, width, children, ...props }, ref) => {
+    const { open, setOpen, contentId } = useDialogContext();
+    const innerRef = (0, import_react14.useRef)(null);
+    const dialogRef = ref ?? innerRef;
+    (0, import_react14.useEffect)(() => {
+      const el = dialogRef.current;
+      if (!el) return;
+      if (open && !el.open) el.showModal();
+      if (!open && el.open) el.close();
+    }, [open, dialogRef]);
+    const handleClick = (e) => {
+      if (e.target === e.currentTarget) setOpen(false);
+    };
+    return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(
+      "dialog",
+      {
+        ref: dialogRef,
+        id: contentId,
+        className: cn(contentVariants({ width }), "w-full", className),
+        onClick: handleClick,
+        onClose: () => setOpen(false),
+        ...props,
+        children
+      }
+    );
+  }
+);
+DialogContent.displayName = "DialogContent";
+function DialogHeader({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: cn("flex flex-col gap-1 mb-3", className), ...props });
+}
+function DialogFooter({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("div", { className: cn("flex justify-end gap-2 mt-4", className), ...props });
+}
+function DialogTitle({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("h2", { className: cn("text-sm font-semibold text-foreground", className), ...props });
+}
+function DialogDescription({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("p", { className: cn("text-xs text-foreground-muted", className), ...props });
+}
+
+// src/primitives/dropdown.tsx
+var import_react15 = require("react");
+var import_jsx_runtime14 = require("react/jsx-runtime");
+var DropdownContext = (0, import_react15.createContext)(null);
+function useDropdownContext() {
+  const ctx = (0, import_react15.useContext)(DropdownContext);
+  if (!ctx) throw new Error("Dropdown compound components must be used within <Dropdown>");
+  return ctx;
+}
+function Dropdown({ children }) {
+  const [open, setOpen] = (0, import_react15.useState)(false);
+  const triggerId = (0, import_react15.useId)();
+  const contentId = (0, import_react15.useId)();
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(DropdownContext.Provider, { value: { open, setOpen, triggerId, contentId }, children: /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "relative inline-block", children }) });
+}
+function DropdownTrigger({ children, ...props }) {
+  const { open, setOpen, triggerId, contentId } = useDropdownContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    "button",
+    {
+      type: "button",
+      id: triggerId,
+      "aria-haspopup": "menu",
+      "aria-expanded": open,
+      "aria-controls": open ? contentId : void 0,
+      onClick: () => setOpen(!open),
+      ...props,
+      children
+    }
+  );
+}
+function DropdownContent({ className, children, ...props }) {
+  const { open, setOpen, contentId, triggerId } = useDropdownContext();
+  const ref = (0, import_react15.useRef)(null);
+  (0, import_react15.useEffect)(() => {
+    if (!open) return;
+    const handler = (e) => {
+      const el = ref.current;
+      const trigger = document.getElementById(triggerId);
+      if (el && !el.contains(e.target) && !trigger?.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+    const escHandler = (e) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("mousedown", handler);
+    document.addEventListener("keydown", escHandler);
+    return () => {
+      document.removeEventListener("mousedown", handler);
+      document.removeEventListener("keydown", escHandler);
+    };
+  }, [open, setOpen, triggerId]);
+  if (!open) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(
+    "div",
+    {
+      ref,
+      id: contentId,
+      role: "menu",
+      "aria-labelledby": triggerId,
+      className: cn(
+        "absolute left-0 top-full z-50 mt-1 bg-background-elevated border border-border rounded-md shadow-lg py-1 min-w-[160px]",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+function DropdownItem({
+  className,
+  icon: Icon,
+  variant = "default",
+  children,
+  onClick,
+  ...props
+}) {
+  const { setOpen } = useDropdownContext();
+  const handleClick = (0, import_react15.useCallback)(
+    (e) => {
+      onClick?.(e);
+      setOpen(false);
+    },
+    [onClick, setOpen]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(
+    "button",
+    {
+      type: "button",
+      role: "menuitem",
+      className: cn(
+        "h-7 text-xs px-2 w-full text-left flex items-center gap-2",
+        variant === "danger" ? "text-danger hover:bg-danger/10" : "text-foreground hover:bg-surface-hover",
+        className
+      ),
+      onClick: handleClick,
+      ...props,
+      children: [
+        Icon && /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { size: 14 }),
+        children
+      ]
+    }
+  );
+}
+
+// src/primitives/tooltip.tsx
+var import_react16 = require("react");
+var import_jsx_runtime15 = require("react/jsx-runtime");
+var TooltipContext = (0, import_react16.createContext)(null);
+function useTooltipContext() {
+  const ctx = (0, import_react16.useContext)(TooltipContext);
+  if (!ctx) throw new Error("Tooltip compound components must be used within <Tooltip>");
+  return ctx;
+}
+function Tooltip({ children }) {
+  const [open, setOpen] = (0, import_react16.useState)(false);
+  const timerRef = (0, import_react16.useRef)(null);
+  const tooltipId = (0, import_react16.useId)();
+  const show = () => {
+    timerRef.current = setTimeout(() => setOpen(true), 300);
+  };
+  const hide = () => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    setOpen(false);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(TooltipContext.Provider, { value: { open, show, hide, tooltipId }, children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "relative inline-block", children }) });
+}
+function TooltipTrigger({ children, ...props }) {
+  const { show, hide, tooltipId, open } = useTooltipContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    "div",
+    {
+      onMouseEnter: show,
+      onMouseLeave: hide,
+      onFocus: show,
+      onBlur: hide,
+      "aria-describedby": open ? tooltipId : void 0,
+      ...props,
+      children
+    }
+  );
+}
+function TooltipContent({ className, children, ...props }) {
+  const { open, tooltipId } = useTooltipContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(
+    "div",
+    {
+      id: tooltipId,
+      role: "tooltip",
+      className: cn(
+        "absolute bottom-full left-1/2 -translate-x-1/2 mb-2 bg-foreground text-background text-xs px-2 py-1 rounded-md shadow-md whitespace-nowrap pointer-events-none transition-opacity duration-150",
+        open ? "opacity-100" : "opacity-0",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+
+// src/primitives/popover.tsx
+var import_react17 = require("react");
+var import_jsx_runtime16 = require("react/jsx-runtime");
+var PopoverContext = (0, import_react17.createContext)(null);
+function usePopoverContext() {
+  const ctx = (0, import_react17.useContext)(PopoverContext);
+  if (!ctx) throw new Error("Popover compound components must be used within <Popover>");
+  return ctx;
+}
+function Popover({ children, open: controlledOpen, onOpenChange }) {
+  const [uncontrolledOpen, setUncontrolledOpen] = (0, import_react17.useState)(false);
+  const open = controlledOpen ?? uncontrolledOpen;
+  const triggerId = (0, import_react17.useId)();
+  const contentId = (0, import_react17.useId)();
+  const setOpen = (0, import_react17.useCallback)(
+    (next) => {
+      onOpenChange?.(next);
+      if (controlledOpen === void 0) setUncontrolledOpen(next);
+    },
+    [controlledOpen, onOpenChange]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(PopoverContext.Provider, { value: { open, setOpen, triggerId, contentId }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("div", { className: "relative inline-block", children }) });
+}
+function PopoverTrigger({ children, ...props }) {
+  const { open, setOpen, triggerId, contentId } = usePopoverContext();
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    "button",
+    {
+      type: "button",
+      id: triggerId,
+      "aria-haspopup": "dialog",
+      "aria-expanded": open,
+      "aria-controls": open ? contentId : void 0,
+      onClick: () => setOpen(!open),
+      ...props,
+      children
+    }
+  );
+}
+function PopoverContent({ className, children, ...props }) {
+  const { open, setOpen, contentId, triggerId } = usePopoverContext();
+  const ref = (0, import_react17.useRef)(null);
+  (0, import_react17.useEffect)(() => {
+    if (!open) return;
+    const handler = (e) => {
+      const el = ref.current;
+      const trigger = document.getElementById(triggerId);
+      if (el && !el.contains(e.target) && !trigger?.contains(e.target)) {
+        setOpen(false);
+      }
+    };
+    const escHandler = (e) => {
+      if (e.key === "Escape") setOpen(false);
+    };
+    document.addEventListener("mousedown", handler);
+    document.addEventListener("keydown", escHandler);
+    return () => {
+      document.removeEventListener("mousedown", handler);
+      document.removeEventListener("keydown", escHandler);
+    };
+  }, [open, setOpen, triggerId]);
+  if (!open) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(
+    "div",
+    {
+      ref,
+      id: contentId,
+      role: "dialog",
+      "aria-labelledby": triggerId,
+      className: cn(
+        "absolute left-0 top-full z-50 mt-1 bg-background-elevated border border-border rounded-lg shadow-lg p-3",
+        className
+      ),
+      ...props,
+      children
+    }
+  );
+}
+
+// src/primitives/tabs.tsx
+var import_react18 = require("react");
+var import_jsx_runtime17 = require("react/jsx-runtime");
+var TabsContext = (0, import_react18.createContext)(null);
+function useTabsContext() {
+  const ctx = (0, import_react18.useContext)(TabsContext);
+  if (!ctx) throw new Error("Tabs compound components must be used within <Tabs>");
+  return ctx;
+}
+function Tabs({
+  value: controlledValue,
+  onValueChange,
+  defaultValue = "",
+  className,
+  ...props
+}) {
+  const [uncontrolledValue, setUncontrolledValue] = (0, import_react18.useState)(defaultValue);
+  const value = controlledValue ?? uncontrolledValue;
+  const setValue = (0, import_react18.useCallback)(
+    (next) => {
+      onValueChange?.(next);
+      if (controlledValue === void 0) setUncontrolledValue(next);
+    },
+    [controlledValue, onValueChange]
+  );
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(TabsContext.Provider, { value: { value, setValue }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("div", { className, ...props }) });
+}
+function TabsList({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    "div",
+    {
+      role: "tablist",
+      className: cn("flex flex-row border-b border-border-subtle", className),
+      ...props
+    }
+  );
+}
+function TabsTrigger({ value, className, ...props }) {
+  const { value: activeValue, setValue } = useTabsContext();
+  const isActive = value === activeValue;
+  const panelId = `tabpanel-${value}`;
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    "button",
+    {
+      type: "button",
+      role: "tab",
+      "aria-selected": isActive,
+      "aria-controls": panelId,
+      tabIndex: isActive ? 0 : -1,
+      className: cn(
+        "h-7 text-xs px-3 transition-colors",
+        isActive ? "border-b-2 border-primary text-foreground font-medium" : "text-foreground-muted hover:text-foreground",
+        className
+      ),
+      onClick: () => setValue(value),
+      ...props
+    }
+  );
+}
+function TabsContent({ value, className, ...props }) {
+  const { value: activeValue } = useTabsContext();
+  if (value !== activeValue) return null;
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+    "div",
+    {
+      role: "tabpanel",
+      id: `tabpanel-${value}`,
+      className: cn("pt-3", className),
+      ...props
+    }
+  );
+}
+
+// src/primitives/scroll-area.tsx
+var import_react19 = require("react");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var ScrollArea = (0, import_react19.forwardRef)(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+      "div",
+      {
+        ref,
+        className: cn(
+          "overflow-auto [&::-webkit-scrollbar]:w-1 [&::-webkit-scrollbar-track]:bg-transparent [&::-webkit-scrollbar-thumb]:bg-surface-hover [&::-webkit-scrollbar-thumb]:rounded-full",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+ScrollArea.displayName = "ScrollArea";
+
+// src/primitives/floating-panel.tsx
+var import_react20 = require("react");
+var import_lucide_react4 = require("lucide-react");
+var import_jsx_runtime19 = require("react/jsx-runtime");
+function FloatingPanel({
+  title,
+  onClose,
+  children,
+  defaultWidth = 360,
+  defaultHeight = 280,
+  minWidth = 280,
+  minHeight = 160,
+  offsetIndex = 0,
+  className
+}) {
+  const [pos, setPos] = (0, import_react20.useState)({ x: 80 + offsetIndex * 30, y: 80 + offsetIndex * 30 });
+  const [size, setSize] = (0, import_react20.useState)({ w: defaultWidth, h: defaultHeight });
+  const [minimized, setMinimized] = (0, import_react20.useState)(false);
+  const dragging = (0, import_react20.useRef)(false);
+  const resizing = (0, import_react20.useRef)(false);
+  const offset = (0, import_react20.useRef)({ x: 0, y: 0 });
+  const onDragStart = (0, import_react20.useCallback)((e) => {
+    e.preventDefault();
+    dragging.current = true;
+    offset.current = { x: e.clientX - pos.x, y: e.clientY - pos.y };
+  }, [pos]);
+  const onResizeStart = (0, import_react20.useCallback)((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    resizing.current = true;
+    offset.current = { x: e.clientX, y: e.clientY };
+  }, []);
+  (0, import_react20.useEffect)(() => {
+    const onMouseMove = (e) => {
+      if (dragging.current) setPos({ x: e.clientX - offset.current.x, y: e.clientY - offset.current.y });
+      if (resizing.current) {
+        const dx = e.clientX - offset.current.x;
+        const dy = e.clientY - offset.current.y;
+        offset.current = { x: e.clientX, y: e.clientY };
+        setSize((prev) => ({ w: Math.max(minWidth, prev.w + dx), h: Math.max(minHeight, prev.h + dy) }));
+      }
+    };
+    const onMouseUp = () => {
+      dragging.current = false;
+      resizing.current = false;
+    };
+    window.addEventListener("mousemove", onMouseMove);
+    window.addEventListener("mouseup", onMouseUp);
+    return () => {
+      window.removeEventListener("mousemove", onMouseMove);
+      window.removeEventListener("mouseup", onMouseUp);
+    };
+  }, [minWidth, minHeight]);
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+    "div",
+    {
+      className: cn(
+        "fixed z-50 rounded-lg border border-border bg-background-elevated shadow-2xl flex flex-col overflow-hidden",
+        className
+      ),
+      style: { left: pos.x, top: pos.y, width: minimized ? 280 : size.w, height: minimized ? "auto" : size.h },
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+          "div",
+          {
+            onMouseDown: onDragStart,
+            className: "flex items-center justify-between gap-2 px-3 py-2 border-b border-border cursor-move select-none shrink-0 bg-surface",
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-2 min-w-0", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react4.GripHorizontal, { size: 12, className: "text-foreground-subtle shrink-0" }),
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "text-[11px] font-medium truncate", children: title })
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex items-center gap-1 shrink-0", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                  "button",
+                  {
+                    onClick: () => setMinimized(!minimized),
+                    className: "p-0.5 rounded hover:bg-surface-hover text-foreground-muted transition-colors",
+                    title: minimized ? "Restore" : "Minimize",
+                    children: minimized ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react4.Maximize2, { size: 12 }) : /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react4.Minimize2, { size: 12 })
+                  }
+                ),
+                /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+                  "button",
+                  {
+                    onClick: onClose,
+                    className: "p-0.5 rounded hover:bg-danger/20 text-foreground-muted hover:text-danger transition-colors",
+                    title: "Close",
+                    children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_lucide_react4.X, { size: 12 })
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        !minimized && /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { className: "flex-1 min-h-0 overflow-y-auto relative", children: [
+          children,
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
+            "div",
+            {
+              onMouseDown: onResizeStart,
+              className: "absolute bottom-0 right-0 w-4 h-4 cursor-nwse-resize",
+              style: { background: "linear-gradient(135deg, transparent 50%, var(--color-foreground-subtle) 50%)", opacity: 0.4 }
+            }
+          )
+        ] })
+      ]
+    }
+  );
+}
+
+// src/composites/status-badge.tsx
+var import_jsx_runtime20 = require("react/jsx-runtime");
+var statusConfig = {
+  online: { colorClass: "bg-success", label: "Online" },
+  offline: { colorClass: "bg-danger", label: "Offline" },
+  degraded: { colorClass: "bg-warning", label: "Degraded" },
+  unknown: { colorClass: "bg-foreground-subtle", label: "Unknown" }
+};
+function StatusBadge({
+  status,
+  showDot = true,
+  showLabel = true,
+  size = "sm",
+  className
+}) {
+  const config = statusConfig[status];
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+    "span",
+    {
+      className: cn(
+        "inline-flex items-center gap-1.5",
+        size === "sm" ? "text-xs" : "text-sm",
+        className
+      ),
+      children: [
+        showDot && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+          "span",
+          {
+            className: cn("h-1.5 w-1.5 shrink-0 rounded-full", config.colorClass),
+            "aria-hidden": "true"
+          }
+        ),
+        showLabel && /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "text-foreground", children: config.label })
+      ]
+    }
+  );
+}
+
+// src/composites/provider-badge.tsx
+var import_jsx_runtime21 = require("react/jsx-runtime");
+var providerConfig = {
+  frigate: { colorClass: "bg-provider-frigate", label: "Frigate" },
+  scrypted: { colorClass: "bg-provider-scrypted", label: "Scrypted" },
+  reolink: { colorClass: "bg-provider-reolink", label: "Reolink" },
+  homeAssistant: { colorClass: "bg-provider-homeAssistant", label: "Home Assistant" },
+  rtsp: { colorClass: "bg-provider-rtsp", label: "RTSP" }
+};
+function ProviderBadge({
+  provider,
+  showLabel = true,
+  className
+}) {
+  const config = providerConfig[provider];
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("span", { className: cn("inline-flex items-center gap-1.5 text-xs", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      "span",
+      {
+        className: cn("h-1.5 w-1.5 shrink-0 rounded-sm", config.colorClass),
+        "aria-hidden": "true"
+      }
+    ),
+    showLabel && /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("span", { className: "text-foreground", children: config.label })
+  ] });
+}
+
+// src/composites/form-field.tsx
+var import_jsx_runtime22 = require("react/jsx-runtime");
+function FormField({
+  label,
+  description,
+  error,
+  required,
+  children,
+  orientation = "vertical",
+  className
+}) {
+  const isHorizontal = orientation === "horizontal";
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+    "div",
+    {
+      className: cn(
+        "flex gap-2",
+        isHorizontal ? "flex-row items-center justify-between" : "flex-col",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: cn(isHorizontal ? "flex-1" : ""), children: [
+          /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(Label, { children: [
+            label,
+            required && /* @__PURE__ */ (0, import_jsx_runtime22.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 })
+        ] }),
+        /* @__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 })
+      ]
+    }
+  );
+}
+
+// src/composites/page-header.tsx
+var import_jsx_runtime23 = 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 })
+    ] }),
+    actions && /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("div", { className: "flex items-center gap-2", children: actions })
+  ] });
+}
+
+// src/composites/empty-state.tsx
+var import_jsx_runtime24 = require("react/jsx-runtime");
+function EmptyState({
+  icon: Icon,
+  title,
+  description,
+  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 })
+    ] }),
+    action && /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "mt-1", children: action })
+  ] });
+}
+
+// src/composites/confirm-dialog.tsx
+var import_jsx_runtime25 = require("react/jsx-runtime");
+function ConfirmDialog({
+  title,
+  message,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  onConfirm,
+  onCancel,
+  variant = "default",
+  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 })
+    ] }),
+    /* @__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)(
+        Button,
+        {
+          variant: variant === "danger" ? "danger" : "primary",
+          onClick: onConfirm,
+          children: confirmLabel
+        }
+      )
+    ] })
+  ] }) });
+}
+
+// src/composites/stat-card.tsx
+var import_lucide_react5 = require("lucide-react");
+var import_jsx_runtime26 = 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)(
+        "span",
+        {
+          className: cn(
+            "inline-flex items-center gap-0.5 text-xs font-medium",
+            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.value,
+            "%"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "text-xs text-foreground-muted", children: label })
+  ] });
+}
+
+// src/composites/key-value-list.tsx
+var import_jsx_runtime27 = 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)(
+    "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 })
+      ]
+    },
+    item.key
+  )) });
+}
+
+// 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");
+function CodeBlock({ children, maxHeight = 300, className }) {
+  const [copied, setCopied] = (0, import_react21.useState)(false);
+  const handleCopy = (0, import_react21.useCallback)(() => {
+    navigator.clipboard.writeText(children).then(() => {
+      setCopied(true);
+      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)(
+      IconButton,
+      {
+        icon: copied ? import_lucide_react6.Check : import_lucide_react6.Copy,
+        "aria-label": "Copy code",
+        variant: "ghost",
+        size: "sm",
+        onClick: handleCopy
+      }
+    ) })
+  ] });
+}
+
+// src/composites/filter-bar.tsx
+var import_lucide_react7 = require("lucide-react");
+var import_jsx_runtime29 = 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) => {
+    switch (filter.type) {
+      case "search":
+        return /* @__PURE__ */ (0, import_jsx_runtime29.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" }),
+            className: "w-48"
+          },
+          filter.key
+        );
+      case "select":
+        return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+          Select,
+          {
+            options: filter.options,
+            value: values[filter.key] ?? "",
+            onChange: (e) => handleChange(filter.key, e.target.value),
+            className: "w-36"
+          },
+          filter.key
+        );
+      case "badge-toggle":
+        return /* @__PURE__ */ (0, import_jsx_runtime29.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)(
+            "button",
+            {
+              type: "button",
+              onClick: () => handleChange(
+                filter.key,
+                isActive ? void 0 : option.value
+              ),
+              children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
+                Badge,
+                {
+                  variant: isActive ? "info" : "default",
+                  className: "cursor-pointer",
+                  children: option.label
+                }
+              )
+            },
+            option.value
+          );
+        }) }, filter.key);
+      default:
+        return null;
+    }
+  }) });
+}
+
+// src/composites/app-shell/sidebar-item.tsx
+var import_jsx_runtime30 = require("react/jsx-runtime");
+function SidebarItem({
+  label,
+  icon: Icon,
+  href,
+  badge,
+  active = false,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+    "a",
+    {
+      href,
+      className: cn(
+        "flex items-center gap-2 h-7 px-2 text-[11px] transition-colors",
+        active ? "border-l-2 border-primary bg-primary/[0.08] text-foreground rounded-r-md" : "text-foreground-subtle hover:bg-surface-hover rounded-md",
+        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 })
+      ]
+    }
+  );
+}
+
+// src/composites/app-shell/sidebar.tsx
+var import_jsx_runtime31 = require("react/jsx-runtime");
+function Sidebar({ logo, sections, footer, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(
+    "nav",
+    {
+      className: cn(
+        "w-44 bg-surface border-r border-border h-full flex flex-col",
+        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)) })
+        ] }, 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)) })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/composites/app-shell/app-shell.tsx
+var import_lucide_react8 = require("lucide-react");
+var import_jsx_runtime32 = 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) => {
+          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)(
+              "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 })
+          ] }, index);
+        }) }),
+        header.actions && /* @__PURE__ */ (0, import_jsx_runtime32.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 })
+    ] })
+  ] });
+}
+
+// src/composites/data-table/data-table.tsx
+var import_react22 = require("react");
+var import_react_table = require("@tanstack/react-table");
+
+// src/composites/data-table/data-table-header.tsx
+var import_lucide_react9 = require("lucide-react");
+var import_jsx_runtime33 = require("react/jsx-runtime");
+function DataTableHeader({
+  headerGroups,
+  onSortingChange,
+  stickyHeader,
+  flexRender: render
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.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)(
+        HeaderCell,
+        {
+          header,
+          sortable: header.column.getCanSort() && !!onSortingChange,
+          flexRender: render
+        },
+        header.id
+      )) }, headerGroup.id))
+    }
+  );
+}
+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)(
+    "th",
+    {
+      className: cn(
+        "px-2 py-1 text-left text-[10px] text-foreground-subtle uppercase tracking-wider font-medium",
+        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: [
+        header.isPlaceholder ? null : render(header.column.columnDef.header, header.getContext()),
+        sortable && /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(SortIcon, { className: "h-3 w-3" })
+      ] })
+    }
+  );
+}
+
+// src/composites/data-table/data-table-row.tsx
+var import_lucide_react10 = require("lucide-react");
+var import_jsx_runtime34 = require("react/jsx-runtime");
+function DataTableRow({
+  row,
+  onRowClick,
+  rowActions,
+  flexRender: render
+}) {
+  const actions = rowActions ? rowActions(row.original) : [];
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+    "tr",
+    {
+      className: cn(
+        "h-7 border-b border-border/50",
+        onRowClick && "cursor-pointer",
+        "hover:bg-surface-hover"
+      ),
+      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)(
+            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" })
+            }
+          ),
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(DropdownContent, { className: "right-0 left-auto", children: actions.map((action) => /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+            DropdownItem,
+            {
+              icon: action.icon,
+              variant: action.variant,
+              onClick: (e) => {
+                e.stopPropagation();
+                action.onClick();
+              },
+              children: action.label
+            },
+            action.label
+          )) })
+        ] }) })
+      ]
+    }
+  );
+}
+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()) });
+}
+
+// src/composites/data-table/data-table-pagination.tsx
+var import_lucide_react11 = require("lucide-react");
+var import_jsx_runtime35 = require("react/jsx-runtime");
+var PAGE_SIZE_OPTIONS = [
+  { value: "10", label: "10" },
+  { value: "25", label: "25" },
+  { value: "50", label: "50" },
+  { value: "100", label: "100" }
+];
+function DataTablePagination({
+  page,
+  pageSize,
+  total,
+  onPaginationChange
+}) {
+  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)(
+        Select,
+        {
+          options: PAGE_SIZE_OPTIONS,
+          value: String(pageSize),
+          onChange: (e) => onPaginationChange?.({
+            pageIndex: 0,
+            pageSize: Number(e.target.value)
+          })
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("span", { children: [
+        "Page ",
+        currentPage,
+        " of ",
+        totalPages
+      ] }),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        IconButton,
+        {
+          icon: import_lucide_react11.ChevronLeft,
+          "aria-label": "Previous page",
+          variant: "ghost",
+          size: "sm",
+          disabled: page <= 0,
+          onClick: () => onPaginationChange?.({ pageIndex: page - 1, pageSize })
+        }
+      ),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+        IconButton,
+        {
+          icon: import_lucide_react11.ChevronRight,
+          "aria-label": "Next page",
+          variant: "ghost",
+          size: "sm",
+          disabled: currentPage >= totalPages,
+          onClick: () => onPaginationChange?.({ pageIndex: page + 1, pageSize })
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/composites/data-table/data-table.tsx
+var import_jsx_runtime36 = require("react/jsx-runtime");
+function DataTable({
+  data,
+  columns: userColumns,
+  sorting,
+  onSortingChange,
+  filtering,
+  onFilteringChange,
+  pagination,
+  onPaginationChange,
+  loading = false,
+  emptyState,
+  rowActions,
+  onRowClick,
+  selectable = false,
+  compact = true,
+  stickyHeader = false,
+  className
+}) {
+  const columns = (0, import_react22.useMemo)(() => {
+    if (!selectable) return userColumns;
+    const selectColumn = {
+      id: "__select",
+      header: ({ table: table2 }) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        Checkbox,
+        {
+          checked: table2.getIsAllPageRowsSelected(),
+          onChange: table2.getToggleAllPageRowsSelectedHandler(),
+          "aria-label": "Select all"
+        }
+      ),
+      cell: ({ row }) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+        Checkbox,
+        {
+          checked: row.getIsSelected(),
+          onChange: row.getToggleSelectedHandler(),
+          "aria-label": "Select row"
+        }
+      ),
+      enableSorting: false
+    };
+    return [selectColumn, ...userColumns];
+  }, [userColumns, selectable]);
+  const table = (0, import_react_table.useReactTable)({
+    data,
+    columns,
+    state: {
+      ...sorting !== void 0 && { sorting },
+      ...filtering !== void 0 && { columnFilters: filtering },
+      ...pagination !== void 0 && {
+        pagination: { pageIndex: pagination.page, pageSize: pagination.pageSize }
+      }
+    },
+    onSortingChange: onSortingChange ? (updater) => {
+      const next = typeof updater === "function" ? updater(sorting ?? []) : updater;
+      onSortingChange(next);
+    } : void 0,
+    onColumnFiltersChange: onFilteringChange ? (updater) => {
+      const next = typeof updater === "function" ? updater(filtering ?? []) : updater;
+      onFilteringChange(next);
+    } : void 0,
+    getCoreRowModel: (0, import_react_table.getCoreRowModel)(),
+    getSortedRowModel: (0, import_react_table.getSortedRowModel)(),
+    getFilteredRowModel: (0, import_react_table.getFilteredRowModel)(),
+    getPaginationRowModel: pagination ? (0, import_react_table.getPaginationRowModel)() : void 0,
+    manualPagination: pagination !== void 0,
+    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)(
+        DataTableHeader,
+        {
+          headerGroups: table.getHeaderGroups(),
+          onSortingChange,
+          stickyHeader,
+          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)(
+        "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)(
+        DataTableRow,
+        {
+          row,
+          onRowClick,
+          rowActions,
+          flexRender: import_react_table.flexRender
+        },
+        row.id
+      )) })
+    ] }),
+    pagination && /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
+      DataTablePagination,
+      {
+        page: pagination.page,
+        pageSize: pagination.pageSize,
+        total: pagination.total,
+        onPaginationChange
+      }
+    )
+  ] });
+}
+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)) });
+}
+
+// src/composites/device-card.tsx
+var import_jsx_runtime37 = require("react/jsx-runtime");
+var STATUS_COLORS = {
+  online: "bg-success",
+  offline: "bg-danger",
+  warning: "bg-warning",
+  unknown: "bg-foreground-subtle"
+};
+function DeviceCard({
+  title,
+  subtitle,
+  status,
+  selected,
+  onClick,
+  badges,
+  actions,
+  offlineAction,
+  className
+}) {
+  const isOffline = status === "offline";
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+    "div",
+    {
+      onClick,
+      className: cn(
+        "w-full rounded-lg border p-3 text-left transition-colors",
+        onClick && "cursor-pointer",
+        selected ? "border-primary bg-primary/10" : "border-border bg-surface hover:bg-surface-hover",
+        isOffline && !selected && "opacity-50",
+        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]) })
+        ] }),
+        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) => {
+          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)(
+            "button",
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                badge.onClick();
+              },
+              className: cls,
+              children: [
+                badge.icon,
+                badge.label
+              ]
+            },
+            i
+          ) : /* @__PURE__ */ (0, import_jsx_runtime37.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)(
+          "button",
+          {
+            onClick: (e) => {
+              e.stopPropagation();
+              action.onClick();
+            },
+            className: "p-1 rounded hover:bg-surface-hover text-foreground-subtle hover:text-foreground transition-colors",
+            title: action.label,
+            "aria-label": action.label,
+            children: action.icon
+          },
+          i
+        )) }),
+        isOffline && offlineAction && /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "mt-2", onClick: (e) => e.stopPropagation(), children: offlineAction })
+      ]
+    }
+  );
+}
+
+// src/composites/device-grid.tsx
+var import_jsx_runtime38 = require("react/jsx-runtime");
+function DeviceGrid({
+  children,
+  minCardWidth = 220,
+  gap = 3,
+  className
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
+    "div",
+    {
+      className: cn(
+        "p-4 overflow-y-auto flex-1 content-start",
+        className
+      ),
+      style: {
+        display: "grid",
+        gridTemplateColumns: `repeat(auto-fill, minmax(${minCardWidth}px, 1fr))`,
+        gap: `${gap * 4}px`
+      },
+      children
+    }
+  );
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  AppShell,
+  Badge,
+  Button,
+  Card,
+  Checkbox,
+  CodeBlock,
+  ConfirmDialog,
+  DataTable,
+  DeviceCard,
+  DeviceGrid,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+  Dropdown,
+  DropdownContent,
+  DropdownItem,
+  DropdownTrigger,
+  EmptyState,
+  FilterBar,
+  FloatingPanel,
+  FormField,
+  IconButton,
+  Input,
+  KeyValueList,
+  Label,
+  PageHeader,
+  Popover,
+  PopoverContent,
+  PopoverTrigger,
+  ProviderBadge,
+  ScrollArea,
+  Select,
+  Separator,
+  Sidebar,
+  SidebarItem,
+  Skeleton,
+  StatCard,
+  StatusBadge,
+  Switch,
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+  ThemeProvider,
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+  cn,
+  createTheme,
+  darkColors,
+  defaultTheme,
+  lightColors,
+  providerIcons,
+  statusIcons,
+  themeToCss,
+  useThemeMode
+});
+//# sourceMappingURL=index.cjs.map