@camstack/ui-library 0.1.25

package/dist/index.js

@@ -0,0 +1,2043 @@
+// 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
+import { createContext, useCallback, useEffect, useMemo, useState } from "react";
+import { jsx } from "react/jsx-runtime";
+var ThemeContext = 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] = useState(() => getInitialMode(storageKey, defaultMode));
+  const [resolvedMode, setResolvedMode] = useState(() => resolveMode(mode));
+  const setMode = useCallback(
+    (newMode) => {
+      setModeState(newMode);
+      setResolvedMode(resolveMode(newMode));
+      if (typeof window !== "undefined") {
+        localStorage.setItem(storageKey, newMode);
+      }
+    },
+    [storageKey]
+  );
+  const toggleMode = useCallback(() => {
+    const currentIndex = TOGGLE_ORDER.indexOf(mode);
+    const nextIndex = (currentIndex + 1) % TOGGLE_ORDER.length;
+    setMode(TOGGLE_ORDER[nextIndex] ?? "dark");
+  }, [mode, setMode]);
+  useEffect(() => {
+    if (typeof document === "undefined") return;
+    const root = document.documentElement;
+    root.classList.remove("dark", "light");
+    root.classList.add(resolvedMode);
+  }, [mode, resolvedMode]);
+  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 = useMemo(
+    () => ({ mode, resolvedMode, setMode, toggleMode }),
+    [mode, resolvedMode, setMode, toggleMode]
+  );
+  return /* @__PURE__ */ jsx(ThemeContext.Provider, { value, children });
+}
+
+// src/theme/use-theme-mode.ts
+import { useContext } from "react";
+function useThemeMode() {
+  const context = useContext(ThemeContext);
+  if (!context) {
+    throw new Error("useThemeMode must be used within a ThemeProvider");
+  }
+  return context;
+}
+
+// src/lib/cn.ts
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+function cn(...inputs) {
+  return twMerge(clsx(inputs));
+}
+
+// src/icons/provider-icons.ts
+import { Ship, Shield, Radio, Home, Cast } from "lucide-react";
+var providerIcons = {
+  frigate: Ship,
+  scrypted: Shield,
+  reolink: Radio,
+  homeAssistant: Home,
+  rtsp: Cast
+};
+
+// src/icons/status-icons.ts
+import { CircleCheck, CircleX, CircleAlert, CircleHelp } from "lucide-react";
+var statusIcons = {
+  online: CircleCheck,
+  offline: CircleX,
+  degraded: CircleAlert,
+  unknown: CircleHelp
+};
+
+// src/primitives/button.tsx
+import { forwardRef } from "react";
+import { cva } from "class-variance-authority";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var buttonVariants = 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 = forwardRef(
+  ({ className, variant, size, ...props }, ref) => {
+    return /* @__PURE__ */ jsx2(
+      "button",
+      {
+        ref,
+        className: cn(buttonVariants({ variant, size }), className),
+        ...props
+      }
+    );
+  }
+);
+Button.displayName = "Button";
+
+// src/primitives/icon-button.tsx
+import { forwardRef as forwardRef2 } from "react";
+import { cva as cva2 } from "class-variance-authority";
+import { jsx as jsx3 } from "react/jsx-runtime";
+var iconButtonVariants = cva2(
+  "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 = forwardRef2(
+  ({ className, variant, size, icon: Icon, ...props }, ref) => {
+    return /* @__PURE__ */ jsx3(
+      "button",
+      {
+        ref,
+        className: cn(iconButtonVariants({ variant, size }), className),
+        ...props,
+        children: /* @__PURE__ */ jsx3(Icon, { className: "h-4 w-4" })
+      }
+    );
+  }
+);
+IconButton.displayName = "IconButton";
+
+// src/primitives/badge.tsx
+import { forwardRef as forwardRef3 } from "react";
+import { cva as cva3 } from "class-variance-authority";
+import { jsx as jsx4 } from "react/jsx-runtime";
+var badgeVariants = cva3(
+  "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 = forwardRef3(
+  ({ className, variant, style, ...props }, ref) => {
+    return /* @__PURE__ */ jsx4(
+      "span",
+      {
+        ref,
+        className: cn(badgeVariants({ variant, styleVariant: style }), className),
+        ...props
+      }
+    );
+  }
+);
+Badge.displayName = "Badge";
+
+// src/primitives/card.tsx
+import { forwardRef as forwardRef4 } from "react";
+import { cva as cva4 } from "class-variance-authority";
+import { jsx as jsx5 } from "react/jsx-runtime";
+var cardVariants = cva4("rounded-lg p-3", {
+  variants: {
+    variant: {
+      flat: "bg-surface",
+      bordered: "bg-surface border border-border"
+    }
+  },
+  defaultVariants: {
+    variant: "bordered"
+  }
+});
+var Card = forwardRef4(
+  ({ className, variant, ...props }, ref) => {
+    return /* @__PURE__ */ jsx5(
+      "div",
+      {
+        ref,
+        className: cn(cardVariants({ variant }), className),
+        ...props
+      }
+    );
+  }
+);
+Card.displayName = "Card";
+
+// src/primitives/label.tsx
+import { forwardRef as forwardRef5 } from "react";
+import { jsx as jsx6 } from "react/jsx-runtime";
+var Label = forwardRef5(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx6(
+      "label",
+      {
+        ref,
+        className: cn(
+          "text-[10px] uppercase tracking-wider text-foreground-muted font-medium",
+          className
+        ),
+        ...props
+      }
+    );
+  }
+);
+Label.displayName = "Label";
+
+// src/primitives/separator.tsx
+import { forwardRef as forwardRef6 } from "react";
+import { cva as cva5 } from "class-variance-authority";
+import { jsx as jsx7 } from "react/jsx-runtime";
+var separatorVariants = cva5("", {
+  variants: {
+    orientation: {
+      horizontal: "h-px w-full bg-border-subtle",
+      vertical: "w-px h-full bg-border-subtle"
+    }
+  },
+  defaultVariants: {
+    orientation: "horizontal"
+  }
+});
+var Separator = forwardRef6(
+  ({ className, orientation, ...props }, ref) => {
+    return /* @__PURE__ */ jsx7(
+      "div",
+      {
+        ref,
+        role: "separator",
+        className: cn(separatorVariants({ orientation }), className),
+        ...props
+      }
+    );
+  }
+);
+Separator.displayName = "Separator";
+
+// src/primitives/skeleton.tsx
+import { forwardRef as forwardRef7 } from "react";
+import { jsx as jsx8 } from "react/jsx-runtime";
+var Skeleton = forwardRef7(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx8(
+      "div",
+      {
+        ref,
+        className: cn("animate-pulse bg-surface-hover rounded-md h-4 w-full", className),
+        ...props
+      }
+    );
+  }
+);
+Skeleton.displayName = "Skeleton";
+
+// src/primitives/input.tsx
+import { forwardRef as forwardRef8 } from "react";
+import { cva as cva6 } from "class-variance-authority";
+import { jsx as jsx9, jsxs } from "react/jsx-runtime";
+var inputVariants = cva6(
+  "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 = forwardRef8(
+  ({ className, state, leftSlot, rightSlot, ...props }, ref) => {
+    if (leftSlot || rightSlot) {
+      return /* @__PURE__ */ jsxs("div", { className: "relative flex items-center w-full", children: [
+        leftSlot && /* @__PURE__ */ jsx9("div", { className: "absolute left-2.5 flex items-center pointer-events-none", children: leftSlot }),
+        /* @__PURE__ */ jsx9(
+          "input",
+          {
+            ref,
+            className: cn(
+              inputVariants({ state }),
+              leftSlot ? "pl-7" : "",
+              rightSlot ? "pr-7" : "",
+              className
+            ),
+            ...props
+          }
+        ),
+        rightSlot && /* @__PURE__ */ jsx9("div", { className: "absolute right-2.5 flex items-center pointer-events-none", children: rightSlot })
+      ] });
+    }
+    return /* @__PURE__ */ jsx9(
+      "input",
+      {
+        ref,
+        className: cn(inputVariants({ state }), className),
+        ...props
+      }
+    );
+  }
+);
+Input.displayName = "Input";
+
+// src/primitives/select.tsx
+import { forwardRef as forwardRef9 } from "react";
+import { ChevronDown } from "lucide-react";
+import { jsx as jsx10, jsxs as jsxs2 } from "react/jsx-runtime";
+var Select = forwardRef9(
+  ({ className, options, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs2("div", { className: "relative w-full", children: [
+      /* @__PURE__ */ jsx10(
+        "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__ */ jsx10("option", { value: option.value, children: option.label }, option.value))
+        }
+      ),
+      /* @__PURE__ */ jsx10("div", { className: "absolute right-2 top-1/2 -translate-y-1/2 pointer-events-none text-foreground-muted", children: /* @__PURE__ */ jsx10(ChevronDown, { className: "h-3.5 w-3.5" }) })
+    ] });
+  }
+);
+Select.displayName = "Select";
+
+// src/primitives/checkbox.tsx
+import { forwardRef as forwardRef10 } from "react";
+import { jsx as jsx11 } from "react/jsx-runtime";
+var Checkbox = forwardRef10(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx11(
+      "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
+import { forwardRef as forwardRef11 } from "react";
+import { jsx as jsx12, jsxs as jsxs3 } from "react/jsx-runtime";
+var Switch = forwardRef11(
+  ({ className, checked, onCheckedChange, label, ...props }, ref) => {
+    return /* @__PURE__ */ jsxs3(
+      "button",
+      {
+        ref,
+        role: "switch",
+        "aria-checked": checked,
+        type: "button",
+        onClick: () => onCheckedChange(!checked),
+        className: cn("inline-flex items-center gap-2", className),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx12(
+            "span",
+            {
+              className: cn(
+                "w-8 h-4 rounded-full transition-colors",
+                checked ? "bg-primary" : "bg-surface-hover"
+              ),
+              children: /* @__PURE__ */ jsx12(
+                "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__ */ jsx12("span", { className: "text-xs text-foreground", children: label })
+        ]
+      }
+    );
+  }
+);
+Switch.displayName = "Switch";
+
+// src/primitives/dialog.tsx
+import {
+  createContext as createContext2,
+  forwardRef as forwardRef12,
+  useCallback as useCallback2,
+  useContext as useContext2,
+  useEffect as useEffect2,
+  useId,
+  useRef,
+  useState as useState2
+} from "react";
+import { cva as cva7 } from "class-variance-authority";
+import { jsx as jsx13 } from "react/jsx-runtime";
+var DialogContext = createContext2(null);
+function useDialogContext() {
+  const ctx = useContext2(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] = useState2(false);
+  const open = controlledOpen ?? uncontrolledOpen;
+  const contentId = useId();
+  const setOpen = useCallback2(
+    (next) => {
+      onOpenChange?.(next);
+      if (controlledOpen === void 0) setUncontrolledOpen(next);
+    },
+    [controlledOpen, onOpenChange]
+  );
+  return /* @__PURE__ */ jsx13(DialogContext.Provider, { value: { open, setOpen, contentId }, children });
+}
+function DialogTrigger({ children, ...props }) {
+  const { setOpen } = useDialogContext();
+  return /* @__PURE__ */ jsx13("button", { type: "button", onClick: () => setOpen(true), ...props, children });
+}
+var contentVariants = cva7(
+  "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 = forwardRef12(
+  ({ className, width, children, ...props }, ref) => {
+    const { open, setOpen, contentId } = useDialogContext();
+    const innerRef = useRef(null);
+    const dialogRef = ref ?? innerRef;
+    useEffect2(() => {
+      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__ */ jsx13(
+      "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__ */ jsx13("div", { className: cn("flex flex-col gap-1 mb-3", className), ...props });
+}
+function DialogFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx13("div", { className: cn("flex justify-end gap-2 mt-4", className), ...props });
+}
+function DialogTitle({ className, ...props }) {
+  return /* @__PURE__ */ jsx13("h2", { className: cn("text-sm font-semibold text-foreground", className), ...props });
+}
+function DialogDescription({ className, ...props }) {
+  return /* @__PURE__ */ jsx13("p", { className: cn("text-xs text-foreground-muted", className), ...props });
+}
+
+// src/primitives/dropdown.tsx
+import {
+  createContext as createContext3,
+  useCallback as useCallback3,
+  useContext as useContext3,
+  useEffect as useEffect3,
+  useId as useId2,
+  useRef as useRef2,
+  useState as useState3
+} from "react";
+import { jsx as jsx14, jsxs as jsxs4 } from "react/jsx-runtime";
+var DropdownContext = createContext3(null);
+function useDropdownContext() {
+  const ctx = useContext3(DropdownContext);
+  if (!ctx) throw new Error("Dropdown compound components must be used within <Dropdown>");
+  return ctx;
+}
+function Dropdown({ children }) {
+  const [open, setOpen] = useState3(false);
+  const triggerId = useId2();
+  const contentId = useId2();
+  return /* @__PURE__ */ jsx14(DropdownContext.Provider, { value: { open, setOpen, triggerId, contentId }, children: /* @__PURE__ */ jsx14("div", { className: "relative inline-block", children }) });
+}
+function DropdownTrigger({ children, ...props }) {
+  const { open, setOpen, triggerId, contentId } = useDropdownContext();
+  return /* @__PURE__ */ jsx14(
+    "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 = useRef2(null);
+  useEffect3(() => {
+    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__ */ jsx14(
+    "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 = useCallback3(
+    (e) => {
+      onClick?.(e);
+      setOpen(false);
+    },
+    [onClick, setOpen]
+  );
+  return /* @__PURE__ */ jsxs4(
+    "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__ */ jsx14(Icon, { size: 14 }),
+        children
+      ]
+    }
+  );
+}
+
+// src/primitives/tooltip.tsx
+import {
+  createContext as createContext4,
+  useContext as useContext4,
+  useId as useId3,
+  useRef as useRef3,
+  useState as useState4
+} from "react";
+import { jsx as jsx15 } from "react/jsx-runtime";
+var TooltipContext = createContext4(null);
+function useTooltipContext() {
+  const ctx = useContext4(TooltipContext);
+  if (!ctx) throw new Error("Tooltip compound components must be used within <Tooltip>");
+  return ctx;
+}
+function Tooltip({ children }) {
+  const [open, setOpen] = useState4(false);
+  const timerRef = useRef3(null);
+  const tooltipId = useId3();
+  const show = () => {
+    timerRef.current = setTimeout(() => setOpen(true), 300);
+  };
+  const hide = () => {
+    if (timerRef.current) clearTimeout(timerRef.current);
+    setOpen(false);
+  };
+  return /* @__PURE__ */ jsx15(TooltipContext.Provider, { value: { open, show, hide, tooltipId }, children: /* @__PURE__ */ jsx15("div", { className: "relative inline-block", children }) });
+}
+function TooltipTrigger({ children, ...props }) {
+  const { show, hide, tooltipId, open } = useTooltipContext();
+  return /* @__PURE__ */ jsx15(
+    "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__ */ jsx15(
+    "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
+import {
+  createContext as createContext5,
+  useCallback as useCallback4,
+  useContext as useContext5,
+  useEffect as useEffect4,
+  useId as useId4,
+  useRef as useRef4,
+  useState as useState5
+} from "react";
+import { jsx as jsx16 } from "react/jsx-runtime";
+var PopoverContext = createContext5(null);
+function usePopoverContext() {
+  const ctx = useContext5(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] = useState5(false);
+  const open = controlledOpen ?? uncontrolledOpen;
+  const triggerId = useId4();
+  const contentId = useId4();
+  const setOpen = useCallback4(
+    (next) => {
+      onOpenChange?.(next);
+      if (controlledOpen === void 0) setUncontrolledOpen(next);
+    },
+    [controlledOpen, onOpenChange]
+  );
+  return /* @__PURE__ */ jsx16(PopoverContext.Provider, { value: { open, setOpen, triggerId, contentId }, children: /* @__PURE__ */ jsx16("div", { className: "relative inline-block", children }) });
+}
+function PopoverTrigger({ children, ...props }) {
+  const { open, setOpen, triggerId, contentId } = usePopoverContext();
+  return /* @__PURE__ */ jsx16(
+    "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 = useRef4(null);
+  useEffect4(() => {
+    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__ */ jsx16(
+    "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
+import {
+  createContext as createContext6,
+  useCallback as useCallback5,
+  useContext as useContext6,
+  useState as useState6
+} from "react";
+import { jsx as jsx17 } from "react/jsx-runtime";
+var TabsContext = createContext6(null);
+function useTabsContext() {
+  const ctx = useContext6(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] = useState6(defaultValue);
+  const value = controlledValue ?? uncontrolledValue;
+  const setValue = useCallback5(
+    (next) => {
+      onValueChange?.(next);
+      if (controlledValue === void 0) setUncontrolledValue(next);
+    },
+    [controlledValue, onValueChange]
+  );
+  return /* @__PURE__ */ jsx17(TabsContext.Provider, { value: { value, setValue }, children: /* @__PURE__ */ jsx17("div", { className, ...props }) });
+}
+function TabsList({ className, ...props }) {
+  return /* @__PURE__ */ jsx17(
+    "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__ */ jsx17(
+    "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__ */ jsx17(
+    "div",
+    {
+      role: "tabpanel",
+      id: `tabpanel-${value}`,
+      className: cn("pt-3", className),
+      ...props
+    }
+  );
+}
+
+// src/primitives/scroll-area.tsx
+import { forwardRef as forwardRef13 } from "react";
+import { jsx as jsx18 } from "react/jsx-runtime";
+var ScrollArea = forwardRef13(
+  ({ className, ...props }, ref) => {
+    return /* @__PURE__ */ jsx18(
+      "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
+import { useRef as useRef5, useState as useState7, useCallback as useCallback6, useEffect as useEffect5 } from "react";
+import { X, Minimize2, Maximize2, GripHorizontal } from "lucide-react";
+import { jsx as jsx19, jsxs as jsxs5 } from "react/jsx-runtime";
+function FloatingPanel({
+  title,
+  onClose,
+  children,
+  defaultWidth = 360,
+  defaultHeight = 280,
+  minWidth = 280,
+  minHeight = 160,
+  offsetIndex = 0,
+  className
+}) {
+  const [pos, setPos] = useState7({ x: 80 + offsetIndex * 30, y: 80 + offsetIndex * 30 });
+  const [size, setSize] = useState7({ w: defaultWidth, h: defaultHeight });
+  const [minimized, setMinimized] = useState7(false);
+  const dragging = useRef5(false);
+  const resizing = useRef5(false);
+  const offset = useRef5({ x: 0, y: 0 });
+  const onDragStart = useCallback6((e) => {
+    e.preventDefault();
+    dragging.current = true;
+    offset.current = { x: e.clientX - pos.x, y: e.clientY - pos.y };
+  }, [pos]);
+  const onResizeStart = useCallback6((e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    resizing.current = true;
+    offset.current = { x: e.clientX, y: e.clientY };
+  }, []);
+  useEffect5(() => {
+    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__ */ jsxs5(
+    "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__ */ jsxs5(
+          "div",
+          {
+            onMouseDown: onDragStart,
+            className: "flex items-center justify-between gap-2 px-3 py-2 border-b border-border cursor-move select-none shrink-0 bg-surface",
+            children: [
+              /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-2 min-w-0", children: [
+                /* @__PURE__ */ jsx19(GripHorizontal, { size: 12, className: "text-foreground-subtle shrink-0" }),
+                /* @__PURE__ */ jsx19("span", { className: "text-[11px] font-medium truncate", children: title })
+              ] }),
+              /* @__PURE__ */ jsxs5("div", { className: "flex items-center gap-1 shrink-0", children: [
+                /* @__PURE__ */ jsx19(
+                  "button",
+                  {
+                    onClick: () => setMinimized(!minimized),
+                    className: "p-0.5 rounded hover:bg-surface-hover text-foreground-muted transition-colors",
+                    title: minimized ? "Restore" : "Minimize",
+                    children: minimized ? /* @__PURE__ */ jsx19(Maximize2, { size: 12 }) : /* @__PURE__ */ jsx19(Minimize2, { size: 12 })
+                  }
+                ),
+                /* @__PURE__ */ jsx19(
+                  "button",
+                  {
+                    onClick: onClose,
+                    className: "p-0.5 rounded hover:bg-danger/20 text-foreground-muted hover:text-danger transition-colors",
+                    title: "Close",
+                    children: /* @__PURE__ */ jsx19(X, { size: 12 })
+                  }
+                )
+              ] })
+            ]
+          }
+        ),
+        !minimized && /* @__PURE__ */ jsxs5("div", { className: "flex-1 min-h-0 overflow-y-auto relative", children: [
+          children,
+          /* @__PURE__ */ jsx19(
+            "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
+import { jsx as jsx20, jsxs as jsxs6 } from "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__ */ jsxs6(
+    "span",
+    {
+      className: cn(
+        "inline-flex items-center gap-1.5",
+        size === "sm" ? "text-xs" : "text-sm",
+        className
+      ),
+      children: [
+        showDot && /* @__PURE__ */ jsx20(
+          "span",
+          {
+            className: cn("h-1.5 w-1.5 shrink-0 rounded-full", config.colorClass),
+            "aria-hidden": "true"
+          }
+        ),
+        showLabel && /* @__PURE__ */ jsx20("span", { className: "text-foreground", children: config.label })
+      ]
+    }
+  );
+}
+
+// src/composites/provider-badge.tsx
+import { jsx as jsx21, jsxs as jsxs7 } from "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__ */ jsxs7("span", { className: cn("inline-flex items-center gap-1.5 text-xs", className), children: [
+    /* @__PURE__ */ jsx21(
+      "span",
+      {
+        className: cn("h-1.5 w-1.5 shrink-0 rounded-sm", config.colorClass),
+        "aria-hidden": "true"
+      }
+    ),
+    showLabel && /* @__PURE__ */ jsx21("span", { className: "text-foreground", children: config.label })
+  ] });
+}
+
+// src/composites/form-field.tsx
+import { jsx as jsx22, jsxs as jsxs8 } from "react/jsx-runtime";
+function FormField({
+  label,
+  description,
+  error,
+  required,
+  children,
+  orientation = "vertical",
+  className
+}) {
+  const isHorizontal = orientation === "horizontal";
+  return /* @__PURE__ */ jsxs8(
+    "div",
+    {
+      className: cn(
+        "flex gap-2",
+        isHorizontal ? "flex-row items-center justify-between" : "flex-col",
+        className
+      ),
+      children: [
+        /* @__PURE__ */ jsxs8("div", { className: cn(isHorizontal ? "flex-1" : ""), children: [
+          /* @__PURE__ */ jsxs8(Label, { children: [
+            label,
+            required && /* @__PURE__ */ jsx22("span", { className: "text-danger ml-0.5", children: "*" })
+          ] }),
+          description && /* @__PURE__ */ jsx22("p", { className: "text-foreground-subtle text-xs mt-0.5", children: description })
+        ] }),
+        /* @__PURE__ */ jsx22("div", { className: cn(isHorizontal ? "shrink-0" : ""), children }),
+        error && /* @__PURE__ */ jsx22("p", { className: "text-danger text-xs", children: error })
+      ]
+    }
+  );
+}
+
+// src/composites/page-header.tsx
+import { jsx as jsx23, jsxs as jsxs9 } from "react/jsx-runtime";
+function PageHeader({ title, subtitle, actions, className }) {
+  return /* @__PURE__ */ jsxs9("div", { className: cn("flex items-center justify-between mb-3", className), children: [
+    /* @__PURE__ */ jsxs9("div", { children: [
+      /* @__PURE__ */ jsx23("h1", { className: "text-sm font-semibold text-foreground", children: title }),
+      subtitle && /* @__PURE__ */ jsx23("p", { className: "text-foreground-subtle text-xs", children: subtitle })
+    ] }),
+    actions && /* @__PURE__ */ jsx23("div", { className: "flex items-center gap-2", children: actions })
+  ] });
+}
+
+// src/composites/empty-state.tsx
+import { jsx as jsx24, jsxs as jsxs10 } from "react/jsx-runtime";
+function EmptyState({
+  icon: Icon,
+  title,
+  description,
+  action,
+  className
+}) {
+  return /* @__PURE__ */ jsxs10("div", { className: cn("flex flex-col items-center justify-center gap-3 py-12", className), children: [
+    Icon && /* @__PURE__ */ jsx24(Icon, { className: "h-12 w-12 text-foreground-subtle", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsxs10("div", { className: "flex flex-col items-center gap-1 text-center", children: [
+      /* @__PURE__ */ jsx24("p", { className: "text-foreground-muted text-sm font-medium", children: title }),
+      description && /* @__PURE__ */ jsx24("p", { className: "text-foreground-subtle text-xs max-w-xs", children: description })
+    ] }),
+    action && /* @__PURE__ */ jsx24("div", { className: "mt-1", children: action })
+  ] });
+}
+
+// src/composites/confirm-dialog.tsx
+import { jsx as jsx25, jsxs as jsxs11 } from "react/jsx-runtime";
+function ConfirmDialog({
+  title,
+  message,
+  confirmLabel = "Confirm",
+  cancelLabel = "Cancel",
+  onConfirm,
+  onCancel,
+  variant = "default",
+  open,
+  onOpenChange
+}) {
+  return /* @__PURE__ */ jsx25(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs11(DialogContent, { children: [
+    /* @__PURE__ */ jsxs11(DialogHeader, { children: [
+      /* @__PURE__ */ jsx25(DialogTitle, { children: title }),
+      /* @__PURE__ */ jsx25(DialogDescription, { children: message })
+    ] }),
+    /* @__PURE__ */ jsxs11(DialogFooter, { children: [
+      /* @__PURE__ */ jsx25(Button, { variant: "ghost", onClick: onCancel, children: cancelLabel }),
+      /* @__PURE__ */ jsx25(
+        Button,
+        {
+          variant: variant === "danger" ? "danger" : "primary",
+          onClick: onConfirm,
+          children: confirmLabel
+        }
+      )
+    ] })
+  ] }) });
+}
+
+// src/composites/stat-card.tsx
+import { TrendingUp, TrendingDown } from "lucide-react";
+import { jsx as jsx26, jsxs as jsxs12 } from "react/jsx-runtime";
+function StatCard({ value, label, trend, className }) {
+  return /* @__PURE__ */ jsxs12(Card, { className: cn("flex flex-col gap-1", className), children: [
+    /* @__PURE__ */ jsxs12("div", { className: "flex items-baseline gap-2", children: [
+      /* @__PURE__ */ jsx26("span", { className: "text-2xl font-semibold text-foreground", children: value }),
+      trend && /* @__PURE__ */ jsxs12(
+        "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__ */ jsx26(TrendingUp, { className: "h-3 w-3" }) : /* @__PURE__ */ jsx26(TrendingDown, { className: "h-3 w-3" }),
+            trend.value,
+            "%"
+          ]
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx26("span", { className: "text-xs text-foreground-muted", children: label })
+  ] });
+}
+
+// src/composites/key-value-list.tsx
+import { jsx as jsx27, jsxs as jsxs13 } from "react/jsx-runtime";
+function KeyValueList({ items, className }) {
+  return /* @__PURE__ */ jsx27("dl", { className: cn("flex flex-col", className), children: items.map((item) => /* @__PURE__ */ jsxs13(
+    "div",
+    {
+      className: "flex items-center h-7",
+      children: [
+        /* @__PURE__ */ jsx27("dt", { className: "text-foreground-subtle text-xs w-1/3 shrink-0", children: item.key }),
+        /* @__PURE__ */ jsx27("dd", { className: "text-foreground text-xs", children: item.value })
+      ]
+    },
+    item.key
+  )) });
+}
+
+// src/composites/code-block.tsx
+import { useCallback as useCallback7, useState as useState8 } from "react";
+import { Copy, Check } from "lucide-react";
+import { jsx as jsx28, jsxs as jsxs14 } from "react/jsx-runtime";
+function CodeBlock({ children, maxHeight = 300, className }) {
+  const [copied, setCopied] = useState8(false);
+  const handleCopy = useCallback7(() => {
+    navigator.clipboard.writeText(children).then(() => {
+      setCopied(true);
+      setTimeout(() => setCopied(false), 2e3);
+    });
+  }, [children]);
+  return /* @__PURE__ */ jsxs14("div", { className: cn("relative group", className), children: [
+    /* @__PURE__ */ jsx28(ScrollArea, { style: { maxHeight }, children: /* @__PURE__ */ jsx28("pre", { className: "font-mono text-xs bg-surface p-3 rounded-md border border-border-subtle", children: /* @__PURE__ */ jsx28("code", { children }) }) }),
+    /* @__PURE__ */ jsx28("div", { className: "absolute top-2 right-2 opacity-0 group-hover:opacity-100 transition-opacity", children: /* @__PURE__ */ jsx28(
+      IconButton,
+      {
+        icon: copied ? Check : Copy,
+        "aria-label": "Copy code",
+        variant: "ghost",
+        size: "sm",
+        onClick: handleCopy
+      }
+    ) })
+  ] });
+}
+
+// src/composites/filter-bar.tsx
+import { Search } from "lucide-react";
+import { jsx as jsx29 } from "react/jsx-runtime";
+function FilterBar({ filters, values, onChange, className }) {
+  const handleChange = (key, value) => {
+    onChange({ ...values, [key]: value });
+  };
+  return /* @__PURE__ */ jsx29("div", { className: cn("flex items-center gap-2 flex-wrap", className), children: filters.map((filter) => {
+    switch (filter.type) {
+      case "search":
+        return /* @__PURE__ */ jsx29(
+          Input,
+          {
+            placeholder: filter.placeholder ?? "Search...",
+            value: values[filter.key] ?? "",
+            onChange: (e) => handleChange(filter.key, e.target.value),
+            leftSlot: /* @__PURE__ */ jsx29(Search, { className: "h-3 w-3 text-foreground-subtle" }),
+            className: "w-48"
+          },
+          filter.key
+        );
+      case "select":
+        return /* @__PURE__ */ jsx29(
+          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__ */ jsx29("div", { className: "flex items-center gap-1", children: filter.options.map((option) => {
+          const currentValue = values[filter.key];
+          const isActive = currentValue === option.value;
+          return /* @__PURE__ */ jsx29(
+            "button",
+            {
+              type: "button",
+              onClick: () => handleChange(
+                filter.key,
+                isActive ? void 0 : option.value
+              ),
+              children: /* @__PURE__ */ jsx29(
+                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
+import { jsx as jsx30, jsxs as jsxs15 } from "react/jsx-runtime";
+function SidebarItem({
+  label,
+  icon: Icon,
+  href,
+  badge,
+  active = false,
+  className
+}) {
+  return /* @__PURE__ */ jsxs15(
+    "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__ */ jsx30(Icon, { className: "h-3.5 w-3.5 shrink-0" }),
+        /* @__PURE__ */ jsx30("span", { className: "truncate flex-1", children: label }),
+        badge !== void 0 && /* @__PURE__ */ jsx30(Badge, { className: "ml-auto text-[10px] px-1.5 py-0", children: badge })
+      ]
+    }
+  );
+}
+
+// src/composites/app-shell/sidebar.tsx
+import { jsx as jsx31, jsxs as jsxs16 } from "react/jsx-runtime";
+function Sidebar({ logo, sections, footer, className }) {
+  return /* @__PURE__ */ jsxs16(
+    "nav",
+    {
+      className: cn(
+        "w-44 bg-surface border-r border-border h-full flex flex-col",
+        className
+      ),
+      children: [
+        logo && /* @__PURE__ */ jsx31("div", { className: "px-3 py-2 shrink-0", children: logo }),
+        /* @__PURE__ */ jsx31("div", { className: "flex-1 overflow-auto px-1 py-1", children: sections.map((section, sectionIndex) => /* @__PURE__ */ jsxs16("div", { className: cn(sectionIndex > 0 ? "mt-3" : ""), children: [
+          section.label && /* @__PURE__ */ jsx31("span", { className: "text-[10px] text-foreground-disabled uppercase tracking-wider px-2 mb-1 block", children: section.label }),
+          /* @__PURE__ */ jsx31("div", { className: "flex flex-col gap-0.5", children: section.items.map((item) => /* @__PURE__ */ jsx31(SidebarItem, { ...item }, item.href)) })
+        ] }, sectionIndex)) }),
+        footer && footer.length > 0 && /* @__PURE__ */ jsxs16("div", { className: "shrink-0 px-1 pb-1", children: [
+          /* @__PURE__ */ jsx31(Separator, { className: "mb-1" }),
+          /* @__PURE__ */ jsx31("div", { className: "flex flex-col gap-0.5", children: footer.map((item) => /* @__PURE__ */ jsx31(SidebarItem, { ...item }, item.href)) })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/composites/app-shell/app-shell.tsx
+import { ChevronRight } from "lucide-react";
+import { jsx as jsx32, jsxs as jsxs17 } from "react/jsx-runtime";
+function AppShell({ sidebar, header, children, className }) {
+  return /* @__PURE__ */ jsxs17("div", { className: cn("flex h-screen", className), children: [
+    /* @__PURE__ */ jsx32(Sidebar, { ...sidebar }),
+    /* @__PURE__ */ jsxs17("div", { className: "flex flex-1 flex-col min-w-0", children: [
+      header && /* @__PURE__ */ jsxs17("header", { className: "flex items-center h-10 border-b border-border px-4 shrink-0", children: [
+        header.breadcrumbs && header.breadcrumbs.length > 0 && /* @__PURE__ */ jsx32("nav", { className: "flex items-center gap-1 text-xs flex-1 min-w-0", children: header.breadcrumbs.map((crumb, index) => {
+          const isLast = index === header.breadcrumbs.length - 1;
+          return /* @__PURE__ */ jsxs17("span", { className: "flex items-center gap-1", children: [
+            index > 0 && /* @__PURE__ */ jsx32(ChevronRight, { className: "h-3 w-3 text-foreground-subtle shrink-0" }),
+            crumb.href && !isLast ? /* @__PURE__ */ jsx32(
+              "a",
+              {
+                href: crumb.href,
+                className: "text-foreground-subtle hover:text-foreground transition-colors truncate",
+                children: crumb.label
+              }
+            ) : /* @__PURE__ */ jsx32("span", { className: "text-foreground truncate", children: crumb.label })
+          ] }, index);
+        }) }),
+        header.actions && /* @__PURE__ */ jsx32("div", { className: "flex items-center gap-2 ml-auto shrink-0", children: header.actions })
+      ] }),
+      /* @__PURE__ */ jsx32("main", { className: "flex-1 overflow-auto p-4", children })
+    ] })
+  ] });
+}
+
+// src/composites/data-table/data-table.tsx
+import { useMemo as useMemo2 } from "react";
+import {
+  useReactTable,
+  getCoreRowModel,
+  getSortedRowModel,
+  getFilteredRowModel,
+  getPaginationRowModel,
+  flexRender
+} from "@tanstack/react-table";
+
+// src/composites/data-table/data-table-header.tsx
+import { ArrowUpDown, ArrowUp, ArrowDown } from "lucide-react";
+import { jsx as jsx33, jsxs as jsxs18 } from "react/jsx-runtime";
+function DataTableHeader({
+  headerGroups,
+  onSortingChange,
+  stickyHeader,
+  flexRender: render
+}) {
+  return /* @__PURE__ */ jsx33(
+    "thead",
+    {
+      className: cn(
+        stickyHeader && "sticky top-0 z-10 bg-background"
+      ),
+      children: headerGroups.map((headerGroup) => /* @__PURE__ */ jsx33("tr", { className: "h-6", children: headerGroup.headers.map((header) => /* @__PURE__ */ jsx33(
+        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" ? ArrowUp : sorted === "desc" ? ArrowDown : ArrowUpDown;
+  return /* @__PURE__ */ jsx33(
+    "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__ */ jsxs18("span", { className: "inline-flex items-center gap-1", children: [
+        header.isPlaceholder ? null : render(header.column.columnDef.header, header.getContext()),
+        sortable && /* @__PURE__ */ jsx33(SortIcon, { className: "h-3 w-3" })
+      ] })
+    }
+  );
+}
+
+// src/composites/data-table/data-table-row.tsx
+import { MoreHorizontal } from "lucide-react";
+import { jsx as jsx34, jsxs as jsxs19 } from "react/jsx-runtime";
+function DataTableRow({
+  row,
+  onRowClick,
+  rowActions,
+  flexRender: render
+}) {
+  const actions = rowActions ? rowActions(row.original) : [];
+  return /* @__PURE__ */ jsxs19(
+    "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__ */ jsx34(DataTableCell, { cell, flexRender: render }, cell.id)),
+        actions.length > 0 && /* @__PURE__ */ jsx34("td", { className: "px-2 py-1.5 w-8", children: /* @__PURE__ */ jsxs19(Dropdown, { children: [
+          /* @__PURE__ */ jsx34(
+            DropdownTrigger,
+            {
+              className: "p-0.5 rounded hover:bg-surface-hover",
+              onClick: (e) => e.stopPropagation(),
+              children: /* @__PURE__ */ jsx34(MoreHorizontal, { className: "h-3.5 w-3.5 text-foreground-muted" })
+            }
+          ),
+          /* @__PURE__ */ jsx34(DropdownContent, { className: "right-0 left-auto", children: actions.map((action) => /* @__PURE__ */ jsx34(
+            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__ */ jsx34("td", { className: "px-2 py-1.5 text-xs text-foreground", children: render(cell.column.columnDef.cell, cell.getContext()) });
+}
+
+// src/composites/data-table/data-table-pagination.tsx
+import { ChevronLeft, ChevronRight as ChevronRight2 } from "lucide-react";
+import { jsx as jsx35, jsxs as jsxs20 } from "react/jsx-runtime";
+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__ */ jsxs20("div", { className: "flex items-center justify-between px-2 py-2 text-xs text-foreground-muted", children: [
+    /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsx35("span", { children: "Rows per page" }),
+      /* @__PURE__ */ jsx35("div", { className: "w-16", children: /* @__PURE__ */ jsx35(
+        Select,
+        {
+          options: PAGE_SIZE_OPTIONS,
+          value: String(pageSize),
+          onChange: (e) => onPaginationChange?.({
+            pageIndex: 0,
+            pageSize: Number(e.target.value)
+          })
+        }
+      ) })
+    ] }),
+    /* @__PURE__ */ jsxs20("div", { className: "flex items-center gap-2", children: [
+      /* @__PURE__ */ jsxs20("span", { children: [
+        "Page ",
+        currentPage,
+        " of ",
+        totalPages
+      ] }),
+      /* @__PURE__ */ jsx35(
+        IconButton,
+        {
+          icon: ChevronLeft,
+          "aria-label": "Previous page",
+          variant: "ghost",
+          size: "sm",
+          disabled: page <= 0,
+          onClick: () => onPaginationChange?.({ pageIndex: page - 1, pageSize })
+        }
+      ),
+      /* @__PURE__ */ jsx35(
+        IconButton,
+        {
+          icon: ChevronRight2,
+          "aria-label": "Next page",
+          variant: "ghost",
+          size: "sm",
+          disabled: currentPage >= totalPages,
+          onClick: () => onPaginationChange?.({ pageIndex: page + 1, pageSize })
+        }
+      )
+    ] })
+  ] });
+}
+
+// src/composites/data-table/data-table.tsx
+import { Fragment, jsx as jsx36, jsxs as jsxs21 } from "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 = useMemo2(() => {
+    if (!selectable) return userColumns;
+    const selectColumn = {
+      id: "__select",
+      header: ({ table: table2 }) => /* @__PURE__ */ jsx36(
+        Checkbox,
+        {
+          checked: table2.getIsAllPageRowsSelected(),
+          onChange: table2.getToggleAllPageRowsSelectedHandler(),
+          "aria-label": "Select all"
+        }
+      ),
+      cell: ({ row }) => /* @__PURE__ */ jsx36(
+        Checkbox,
+        {
+          checked: row.getIsSelected(),
+          onChange: row.getToggleSelectedHandler(),
+          "aria-label": "Select row"
+        }
+      ),
+      enableSorting: false
+    };
+    return [selectColumn, ...userColumns];
+  }, [userColumns, selectable]);
+  const 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: getCoreRowModel(),
+    getSortedRowModel: getSortedRowModel(),
+    getFilteredRowModel: getFilteredRowModel(),
+    getPaginationRowModel: pagination ? getPaginationRowModel() : void 0,
+    manualPagination: pagination !== void 0,
+    pageCount: pagination ? Math.ceil(pagination.total / pagination.pageSize) : void 0
+  });
+  const hasActions = !!rowActions;
+  return /* @__PURE__ */ jsxs21("div", { className: cn("overflow-auto", className), children: [
+    /* @__PURE__ */ jsxs21("table", { className: "w-full border-collapse", children: [
+      /* @__PURE__ */ jsx36(
+        DataTableHeader,
+        {
+          headerGroups: table.getHeaderGroups(),
+          onSortingChange,
+          stickyHeader,
+          flexRender
+        }
+      ),
+      /* @__PURE__ */ jsx36("tbody", { children: loading ? /* @__PURE__ */ jsx36(LoadingRows, { colSpan: columns.length + (hasActions ? 1 : 0), compact }) : table.getRowModel().rows.length === 0 ? /* @__PURE__ */ jsx36("tr", { children: /* @__PURE__ */ jsx36(
+        "td",
+        {
+          colSpan: columns.length + (hasActions ? 1 : 0),
+          className: "text-center py-8 text-xs text-foreground-muted",
+          children: emptyState ?? "No data"
+        }
+      ) }) : table.getRowModel().rows.map((row) => /* @__PURE__ */ jsx36(
+        DataTableRow,
+        {
+          row,
+          onRowClick,
+          rowActions,
+          flexRender
+        },
+        row.id
+      )) })
+    ] }),
+    pagination && /* @__PURE__ */ jsx36(
+      DataTablePagination,
+      {
+        page: pagination.page,
+        pageSize: pagination.pageSize,
+        total: pagination.total,
+        onPaginationChange
+      }
+    )
+  ] });
+}
+function LoadingRows({ colSpan, compact }) {
+  return /* @__PURE__ */ jsx36(Fragment, { children: Array.from({ length: 5 }).map((_, rowIdx) => /* @__PURE__ */ jsx36("tr", { className: compact ? "h-7" : "h-9", children: Array.from({ length: colSpan }).map((_2, colIdx) => /* @__PURE__ */ jsx36("td", { className: "px-2 py-1.5", children: /* @__PURE__ */ jsx36(Skeleton, { className: "h-3 w-full" }) }, colIdx)) }, rowIdx)) });
+}
+
+// src/composites/device-card.tsx
+import { jsx as jsx37, jsxs as jsxs22 } from "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__ */ jsxs22(
+    "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__ */ jsxs22("div", { className: "flex items-center justify-between mb-2", children: [
+          /* @__PURE__ */ jsx37("span", { className: "text-sm font-medium truncate", children: title }),
+          status && /* @__PURE__ */ jsx37("span", { className: cn("h-2 w-2 rounded-full shrink-0", STATUS_COLORS[status]) })
+        ] }),
+        subtitle && /* @__PURE__ */ jsx37("div", { className: "text-[11px] text-foreground-muted", children: subtitle }),
+        badges && badges.length > 0 && /* @__PURE__ */ jsx37("div", { className: "flex flex-wrap gap-1 mt-2", children: badges.map((badge, i) => {
+          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__ */ jsxs22(
+            "button",
+            {
+              onClick: (e) => {
+                e.stopPropagation();
+                badge.onClick();
+              },
+              className: cls,
+              children: [
+                badge.icon,
+                badge.label
+              ]
+            },
+            i
+          ) : /* @__PURE__ */ jsxs22("span", { className: cls, children: [
+            badge.icon,
+            badge.label
+          ] }, i);
+        }) }),
+        !isOffline && actions && actions.length > 0 && /* @__PURE__ */ jsx37("div", { className: "flex items-center gap-0.5 mt-2 -mb-1", children: actions.map((action, i) => /* @__PURE__ */ jsx37(
+          "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__ */ jsx37("div", { className: "mt-2", onClick: (e) => e.stopPropagation(), children: offlineAction })
+      ]
+    }
+  );
+}
+
+// src/composites/device-grid.tsx
+import { jsx as jsx38 } from "react/jsx-runtime";
+function DeviceGrid({
+  children,
+  minCardWidth = 220,
+  gap = 3,
+  className
+}) {
+  return /* @__PURE__ */ jsx38(
+    "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
+    }
+  );
+}
+export {
+  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.js.map