@usetheo/ui 0.16.0 → 0.18.0

package/dist/components/primitives/combobox/combobox.d.ts

@@ -0,0 +1,53 @@
+import { Command as CommandPrimitive } from "cmdk";
+import type { ComponentPropsWithoutRef, HTMLAttributes, ReactNode } from "react";
+interface ComboboxProps extends Omit<HTMLAttributes<HTMLDivElement>, "onChange"> {
+    /** Selected value (controlled). */
+    value?: string;
+    onValueChange?: (value: string) => void;
+    /** Listbox visibility (controlled). */
+    open?: boolean;
+    defaultOpen?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    /** Set false to disable cmdk's internal filter (async mode — consumer filters). */
+    shouldFilter?: boolean;
+    children: ReactNode;
+}
+type ComboboxInputProps = ComponentPropsWithoutRef<typeof CommandPrimitive.Input>;
+interface ComboboxContentProps extends HTMLAttributes<HTMLDivElement> {
+    /** Async fetch in flight: shows the loading slot and hides items/empty. */
+    loading?: boolean;
+}
+type ComboboxItemProps = ComponentPropsWithoutRef<typeof CommandPrimitive.Item>;
+declare const Combobox: import("react").ForwardRefExoticComponent<ComboboxProps & import("react").RefAttributes<HTMLDivElement>> & {
+    Input: import("react").ForwardRefExoticComponent<Omit<Omit<Pick<Pick<import("react").DetailedHTMLProps<import("react").InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof import("react").InputHTMLAttributes<HTMLInputElement>> & {
+        ref?: React.Ref<HTMLInputElement>;
+    } & {
+        asChild?: boolean;
+    }, "asChild" | "key" | keyof import("react").InputHTMLAttributes<HTMLInputElement>>, "type" | "value" | "onChange"> & {
+        value?: string;
+        onValueChange?: (search: string) => void;
+    } & import("react").RefAttributes<HTMLInputElement>, "ref"> & import("react").RefAttributes<HTMLInputElement>>;
+    Content: import("react").ForwardRefExoticComponent<ComboboxContentProps & import("react").RefAttributes<HTMLDivElement>>;
+    Item: import("react").ForwardRefExoticComponent<Omit<{
+        children?: React.ReactNode;
+    } & Omit<Pick<Pick<import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & {
+        ref?: React.Ref<HTMLDivElement>;
+    } & {
+        asChild?: boolean;
+    }, "asChild" | "key" | keyof HTMLAttributes<HTMLDivElement>>, "disabled" | "value" | "onSelect"> & {
+        disabled?: boolean;
+        onSelect?: (value: string) => void;
+        value?: string;
+        keywords?: string[];
+        forceMount?: boolean;
+    } & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+    Empty: import("react").ForwardRefExoticComponent<Omit<{
+        children?: React.ReactNode;
+    } & Pick<Pick<import("react").DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<HTMLDivElement>> & {
+        ref?: React.Ref<HTMLDivElement>;
+    } & {
+        asChild?: boolean;
+    }, "asChild" | "key" | keyof HTMLAttributes<HTMLDivElement>> & import("react").RefAttributes<HTMLDivElement>, "ref"> & import("react").RefAttributes<HTMLDivElement>>;
+};
+export { Combobox };
+export type { ComboboxProps, ComboboxContentProps, ComboboxInputProps, ComboboxItemProps };

package/dist/components/primitives/combobox/index.d.ts

@@ -0,0 +1 @@
+export { Combobox, type ComboboxContentProps, type ComboboxInputProps, type ComboboxItemProps, type ComboboxProps, } from "./combobox.js";

package/dist/components/primitives/description-list/description-list.d.ts

@@ -0,0 +1,33 @@
+import type { HTMLAttributes } from "react";
+/**
+ * DescriptionList — semantic key/value pairs on native `dl/dt/dd`.
+ *
+ * Layouts: `vertical` (default — stacked groups) and `horizontal` (two-column
+ * grid: terms in a fixed max-content column, details beside them; the Item
+ * wrapper uses `display: contents` so dt/dd participate in the root grid).
+ * `dense` tightens the gaps for crowded detail panels.
+ *
+ *   <DescriptionList layout="horizontal">
+ *     <DescriptionList.Item>
+ *       <DescriptionList.Term>Status</DescriptionList.Term>
+ *       <DescriptionList.Detail><Badge>live</Badge></DescriptionList.Detail>
+ *     </DescriptionList.Item>
+ *   </DescriptionList>
+ *
+ * One Term per Item; multiple Details per Term are valid HTML and supported.
+ * Composing dd without a preceding dt is the consumer's responsibility
+ * (invalid HTML — same contract as Breadcrumb.Page placement).
+ */
+interface DescriptionListProps extends HTMLAttributes<HTMLDListElement> {
+    /** vertical (default): stacked groups. horizontal: term column + detail column. */
+    layout?: "vertical" | "horizontal";
+    /** Compact spacing for dense detail panels. */
+    dense?: boolean;
+}
+declare const DescriptionList: import("react").ForwardRefExoticComponent<DescriptionListProps & import("react").RefAttributes<HTMLDListElement>> & {
+    Item: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLDivElement> & import("react").RefAttributes<HTMLDivElement>>;
+    Term: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;
+    Detail: import("react").ForwardRefExoticComponent<HTMLAttributes<HTMLElement> & import("react").RefAttributes<HTMLElement>>;
+};
+export { DescriptionList };
+export type { DescriptionListProps };

package/dist/components/primitives/description-list/index.d.ts

@@ -0,0 +1 @@
+export { DescriptionList, type DescriptionListProps } from "./description-list.js";

package/dist/components/primitives/json-viewer/index.d.ts

@@ -0,0 +1 @@
+export { JsonViewer, type JsonViewerProps } from "./json-viewer.js";

package/dist/components/primitives/json-viewer/json-viewer.d.ts

@@ -0,0 +1,32 @@
+import type { HTMLAttributes } from "react";
+/**
+ * JsonViewer — read-only collapsible JSON tree, dependency-free.
+ *
+ * Collapse: `collapsed` mirrors the SOTA contract — `true` collapses every
+ * node, a number collapses everything at depth >= N (root is depth 0).
+ * Collapsed subtrees are NOT rendered (lazy): that is the performance guard —
+ * a huge payload fully expanded is the consumer's responsibility (ADR D1);
+ * prefer `collapsed={1}` for large payloads.
+ *
+ * Safety: circular references render a "[Circular]" marker (and serialize as
+ * such on copy) instead of overflowing the stack. Copy limitation: the
+ * serializer conservatively marks REPEATED (shared, non-circular) references
+ * as "[Circular]" too — output is always JSON.parse-able — the studied SOTA reference
+ * does not handle this. BigInt renders with the `n` suffix; NaN/Infinity
+ * follow JSON semantics on copy (null).
+ *
+ *   <JsonViewer value={eventPayload} collapsed={1} enableCopy />
+ */
+interface JsonViewerProps extends Omit<HTMLAttributes<HTMLDivElement>, "children"> {
+    /** Data to render. Any value — objects, arrays, primitives, BigInt, Date. */
+    value: unknown;
+    /** true = all collapsed; number = collapse at depth >= N. Default: all expanded. */
+    collapsed?: boolean | number;
+    /** Truncate strings longer than this (click to reveal). Default 60. */
+    shortenTextAfterLength?: number;
+    /** Show a copy button on the root and on object/array nodes. */
+    enableCopy?: boolean;
+}
+declare const JsonViewer: import("react").ForwardRefExoticComponent<JsonViewerProps & import("react").RefAttributes<HTMLDivElement>>;
+export { JsonViewer };
+export type { JsonViewerProps };

package/dist/components/primitives/slider/index.d.ts

@@ -0,0 +1 @@
+export { Slider, type SliderMark, type SliderProps } from "./slider.js";

package/dist/components/primitives/slider/slider.d.ts

@@ -0,0 +1,24 @@
+import * as SliderPrimitive from "@radix-ui/react-slider";
+import type { ComponentPropsWithoutRef, ReactNode } from "react";
+/**
+ * Slider — range input primitive over Radix Slider.
+ *
+ * Single thumb: `defaultValue={[5]}`. Range: `defaultValue={[20, 80]}` (one
+ * thumb per array entry). `marks` renders labelled, clickable points over the
+ * track (Mantine-shaped `{value, label?}`); clicking a mark sets the value in
+ * single mode and is a no-op in range mode (which thumb to move is ambiguous).
+ *
+ *   <Slider aria-label="Top K" min={1} max={100} defaultValue={[5]}
+ *           marks={[{ value: 1 }, { value: 50 }, { value: 100 }]} />
+ */
+interface SliderMark {
+    value: number;
+    label?: ReactNode;
+}
+interface SliderProps extends ComponentPropsWithoutRef<typeof SliderPrimitive.Root> {
+    /** Labelled, clickable points rendered over the track. Values outside [min, max] are skipped. */
+    marks?: SliderMark[];
+}
+declare const Slider: import("react").ForwardRefExoticComponent<SliderProps & import("react").RefAttributes<HTMLSpanElement>>;
+export { Slider };
+export type { SliderMark, SliderProps };

package/dist/index.d.ts

@@ -2,6 +2,10 @@ export { cn } from "./lib/cn.js";
 export { Button, buttonVariants, type ButtonProps } from "./components/primitives/button/index.js";
 export { Badge, badgeVariants, type BadgeProps } from "./components/primitives/badge/index.js";
 export { Breadcrumb, type BreadcrumbLinkProps, } from "./components/primitives/breadcrumb/index.js";
+export { DescriptionList, type DescriptionListProps, } from "./components/primitives/description-list/index.js";
+export { JsonViewer, type JsonViewerProps } from "./components/primitives/json-viewer/index.js";
+export { Combobox, type ComboboxContentProps, type ComboboxInputProps, type ComboboxItemProps, type ComboboxProps, } from "./components/primitives/combobox/index.js";
+export { Slider, type SliderMark, type SliderProps, } from "./components/primitives/slider/index.js";
 export { UpdateBanner, type UpdateBannerProps, } from "./components/primitives/update-banner/index.js";
 export { Card } from "./components/primitives/card/index.js";
 export { Input, type InputProps } from "./components/primitives/input/index.js";

package/dist/index.js

@@ -2,9 +2,11 @@ import { clsx } from 'clsx';
 import { extendTailwindMerge } from 'tailwind-merge';
 import { Slot } from '@radix-ui/react-slot';
 import { cva } from 'class-variance-authority';
-import { forwardRef, createContext, useId, Children, isValidElement, cloneElement, Fragment as Fragment$1, useContext, useEffect, useState, useRef, useCallback, createElement, useMemo } from 'react';
+import { forwardRef, useState, useRef, useEffect, useCallback, createContext, useId, useMemo, Children, isValidElement, cloneElement, Fragment as Fragment$1, useContext, createElement } from 'react';
 import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
-import { ArrowUpCircle, X, AlertCircle, ChevronDown, ChevronUp, Check, Minus, Circle, ChevronRight, ChevronsUpDown, Copy, TrendingDown, TrendingUp, ArrowUpRight, Loader2, TriangleAlert, CheckCircle2, Info, ChevronsLeft, ChevronLeft, ChevronsRight, Search, Filter, GitCommit, GitBranch, Activity, Plus, Lock, EyeOff, Eye, Trash2, GitPullRequest, Server, ExternalLink, Globe, ShieldCheck, ShieldX, Clock, RotateCcw, ArrowDownLeft, MoreHorizontal } from 'lucide-react';
+import { Check, X, Copy, Loader2, ArrowUpCircle, AlertCircle, ChevronDown, ChevronUp, Minus, Circle, ChevronRight, ChevronsUpDown, TrendingDown, TrendingUp, ArrowUpRight, TriangleAlert, CheckCircle2, Info, ChevronsLeft, ChevronLeft, ChevronsRight, Search, Filter, GitCommit, GitBranch, Activity, Plus, Lock, EyeOff, Eye, Trash2, GitPullRequest, Server, ExternalLink, Globe, ShieldCheck, ShieldX, Clock, RotateCcw, ArrowDownLeft, MoreHorizontal } from 'lucide-react';
+import { Command, useCommandState } from 'cmdk';
+import * as SliderPrimitive from '@radix-ui/react-slider';
 import * as DialogPrimitive from '@radix-ui/react-dialog';
 import * as TabsPrimitive from '@radix-ui/react-tabs';
 import * as TooltipPrimitive from '@radix-ui/react-tooltip';
@@ -17,7 +19,6 @@ import * as CheckboxPrimitive from '@radix-ui/react-checkbox';
 import * as RadioGroupPrimitive from '@radix-ui/react-radio-group';
 import * as SwitchPrimitive from '@radix-ui/react-switch';
 import * as DropdownMenuPrimitive from '@radix-ui/react-dropdown-menu';
-import { Command } from 'cmdk';
 
 // src/lib/cn.ts
 var twMerge = extendTailwindMerge({
@@ -286,6 +287,657 @@ var Breadcrumb = Object.assign(Root, {
   Separator,
   Ellipsis
 });
+function sub2(tag, slot, displayName, baseClass) {
+  const Component = forwardRef(
+    ({ className, children, ...props }, ref) => createElement(
+      tag,
+      { "data-slot": slot, ref, className: cn(baseClass, className), ...props },
+      children
+    )
+  );
+  Component.displayName = displayName;
+  return Component;
+}
+var Root2 = forwardRef(
+  ({ className, layout = "vertical", dense, ...props }, ref) => /* @__PURE__ */ jsx(
+    "dl",
+    {
+      "data-slot": "description-list",
+      "data-layout": layout,
+      "data-dense": dense ? "true" : void 0,
+      ref,
+      className: cn(
+        "text-body-sm",
+        layout === "vertical" && (dense ? "grid gap-2" : "grid gap-4"),
+        layout === "horizontal" && "grid grid-cols-[max-content_1fr] items-baseline [&>div]:contents [&_dd]:col-start-2",
+        layout === "horizontal" && (dense ? "gap-x-4 gap-y-1.5" : "gap-x-6 gap-y-3"),
+        className
+      ),
+      ...props
+    }
+  )
+);
+Root2.displayName = "DescriptionList";
+var Item2 = sub2(
+  "div",
+  "description-list-item",
+  "DescriptionList.Item",
+  "grid gap-1"
+);
+var Term = sub2(
+  "dt",
+  "description-list-term",
+  "DescriptionList.Term",
+  "font-medium text-muted-foreground"
+);
+var Detail = sub2(
+  "dd",
+  "description-list-detail",
+  "DescriptionList.Detail",
+  "m-0 text-foreground"
+);
+var DescriptionList = Object.assign(Root2, { Item: Item2, Term, Detail });
+var VARIANT = {
+  ghost: "hover:bg-muted",
+  outline: "border border-border/60 rounded-md"
+};
+var SIZE = {
+  sm: "px-2 py-1 text-label",
+  md: "px-2.5 py-1.5 text-body-sm"
+};
+var CopyButton = forwardRef(
+  ({
+    className,
+    value,
+    label,
+    variant = "ghost",
+    size = "sm",
+    onCopied,
+    feedbackDuration = 1500,
+    ...props
+  }, ref) => {
+    const [state, setState] = useState("idle");
+    const timerRef = useRef(null);
+    useEffect(() => {
+      return () => {
+        if (timerRef.current !== null) {
+          clearTimeout(timerRef.current);
+        }
+      };
+    }, []);
+    const scheduleRevert = useCallback(() => {
+      if (timerRef.current !== null) {
+        clearTimeout(timerRef.current);
+      }
+      timerRef.current = setTimeout(() => {
+        setState("idle");
+        timerRef.current = null;
+      }, feedbackDuration);
+    }, [feedbackDuration]);
+    const handleClick = useCallback(() => {
+      if (state !== "idle") return;
+      if (typeof navigator === "undefined" || !navigator.clipboard?.writeText) {
+        setState("failed");
+        scheduleRevert();
+        return;
+      }
+      navigator.clipboard.writeText(value).then(
+        () => {
+          setState("copied");
+          onCopied?.(value);
+          scheduleRevert();
+        },
+        () => {
+          setState("failed");
+          scheduleRevert();
+        }
+      );
+    }, [state, value, onCopied, scheduleRevert]);
+    const Icon2 = state === "copied" ? Check : state === "failed" ? X : Copy;
+    const liveMessage = state === "copied" ? "Copied to clipboard" : state === "failed" ? "Copy failed" : "";
+    const labelText = label !== void 0 ? state === "copied" ? "Copied!" : state === "failed" ? "Failed" : label : null;
+    return /* @__PURE__ */ jsxs(
+      "button",
+      {
+        "data-slot": "copy-button",
+        ref,
+        type: "button",
+        onClick: handleClick,
+        "data-state": state,
+        className: cn(
+          "inline-flex items-center gap-1.5",
+          "font-sans transition-colors",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card",
+          VARIANT[variant],
+          SIZE[size],
+          className
+        ),
+        ...props,
+        children: [
+          /* @__PURE__ */ jsx(
+            Icon2,
+            {
+              "aria-hidden": "true",
+              className: cn(
+                "size-3.5 shrink-0 transition-opacity duration-200",
+                state === "copied" && "text-success",
+                state === "failed" && "text-destructive"
+              )
+            }
+          ),
+          labelText !== null ? /* @__PURE__ */ jsx("span", { children: labelText }) : null,
+          /* @__PURE__ */ jsx("span", { className: "sr-only", "aria-live": "polite", children: liveMessage })
+        ]
+      }
+    );
+  }
+);
+CopyButton.displayName = "CopyButton";
+var PATH_SEP = "";
+var EMPTY_CHAIN = { has: () => false };
+function isPlainContainer(value) {
+  return typeof value === "object" && value !== null && !(value instanceof Date);
+}
+function safeStringify(value) {
+  const seen = /* @__PURE__ */ new WeakSet();
+  return JSON.stringify(
+    value,
+    (_key, entry) => {
+      if (typeof entry === "bigint") return `${entry}n`;
+      if (typeof entry === "object" && entry !== null) {
+        if (seen.has(entry)) return "[Circular]";
+        seen.add(entry);
+      }
+      return entry;
+    },
+    2
+  );
+}
+function defaultExpanded(depth, collapsed) {
+  if (collapsed === true) return false;
+  if (typeof collapsed === "number") return depth < collapsed;
+  return true;
+}
+function PrimitiveValue({
+  value,
+  shortenAfter
+}) {
+  const [revealed, setRevealed] = useState(false);
+  if (typeof value === "string") {
+    const shorten = !revealed && value.length > shortenAfter;
+    const text2 = shorten ? `${value.slice(0, shortenAfter)}\u2026` : `"${value}"`;
+    return /* @__PURE__ */ jsx(
+      "span",
+      {
+        "data-slot": "json-viewer-value",
+        "data-type": "string",
+        className: cn("text-success", shorten && "cursor-pointer underline decoration-dotted"),
+        onClick: shorten ? () => setRevealed(true) : void 0,
+        onKeyDown: shorten ? (e) => {
+          if (e.key === "Enter" || e.key === " ") {
+            e.preventDefault();
+            setRevealed(true);
+          }
+        } : void 0,
+        role: shorten ? "button" : void 0,
+        tabIndex: shorten ? 0 : void 0,
+        children: text2
+      }
+    );
+  }
+  let text;
+  let type = typeof value;
+  if (typeof value === "bigint") text = `${value}n`;
+  else if (value === null) {
+    text = "null";
+    type = "null";
+  } else if (value === void 0) text = "undefined";
+  else if (typeof value === "function") text = "\u0192";
+  else if (value instanceof Date) {
+    text = value.toISOString();
+    type = "date";
+  } else text = String(value);
+  return /* @__PURE__ */ jsx("span", { "data-slot": "json-viewer-value", "data-type": type, className: "text-info", children: text });
+}
+function JsonNode(props) {
+  const { nodeKey, value, path, depth, ancestors, viewer, expandedOverrides, onToggle } = props;
+  const copyValue = useMemo(
+    () => viewer.enableCopy && isPlainContainer(value) ? safeStringify(value) : "",
+    [value, viewer.enableCopy]
+  );
+  const keyLabel = nodeKey !== void 0 ? /* @__PURE__ */ jsxs("span", { className: "text-muted-foreground", children: [
+    /* @__PURE__ */ jsx("span", { "data-slot": "json-viewer-key", children: nodeKey === "" ? '""' : nodeKey }),
+    ":"
+  ] }) : null;
+  if (isPlainContainer(value) && ancestors.has(value)) {
+    return /* @__PURE__ */ jsxs("li", { "data-slot": "json-viewer-node", className: "flex items-baseline gap-1.5", children: [
+      keyLabel,
+      /* @__PURE__ */ jsx("span", { "data-slot": "json-viewer-value", "data-type": "circular", className: "text-warning", children: "[Circular]" })
+    ] });
+  }
+  if (!isPlainContainer(value)) {
+    return /* @__PURE__ */ jsxs("li", { "data-slot": "json-viewer-node", className: "flex items-baseline gap-1.5", children: [
+      keyLabel,
+      /* @__PURE__ */ jsx(PrimitiveValue, { value, shortenAfter: viewer.shortenTextAfterLength })
+    ] });
+  }
+  const isArray = Array.isArray(value);
+  const entries = isArray ? value.map((entry, index) => [String(index), entry]) : Object.entries(value);
+  if (entries.length === 0) {
+    return /* @__PURE__ */ jsxs("li", { "data-slot": "json-viewer-node", className: "flex items-baseline gap-1.5", children: [
+      keyLabel,
+      /* @__PURE__ */ jsx("span", { "data-slot": "json-viewer-value", "data-type": isArray ? "array" : "object", children: isArray ? "[]" : "{}" })
+    ] });
+  }
+  const expanded = expandedOverrides.get(path) ?? defaultExpanded(depth, viewer.collapsed);
+  const badge = isArray ? `[${entries.length}]` : `{${entries.length}}`;
+  return /* @__PURE__ */ jsxs("li", { "data-slot": "json-viewer-node", children: [
+    /* @__PURE__ */ jsxs("span", { className: "group/node flex items-baseline gap-1.5", children: [
+      /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "data-slot": "json-viewer-toggle",
+          "aria-expanded": expanded,
+          "aria-label": `Toggle ${nodeKey ?? "root"}`,
+          onClick: () => onToggle(path, !expanded),
+          className: "inline-flex size-4 shrink-0 translate-y-0.5 items-center justify-center rounded text-muted-foreground hover:text-foreground",
+          children: /* @__PURE__ */ jsx(
+            ChevronRight,
+            {
+              "aria-hidden": true,
+              className: cn("size-3.5 transition-transform", expanded && "rotate-90")
+            }
+          )
+        }
+      ),
+      keyLabel,
+      !expanded && /* @__PURE__ */ jsx("span", { className: "text-muted-foreground", children: badge }),
+      viewer.enableCopy && /* @__PURE__ */ jsx(
+        "span",
+        {
+          "data-slot": "json-viewer-copy",
+          className: "opacity-0 transition-opacity group-focus-within/node:opacity-100 group-hover/node:opacity-100",
+          children: /* @__PURE__ */ jsx(CopyButton, { value: copyValue, "aria-label": `Copy ${nodeKey ?? "JSON"}` })
+        }
+      )
+    ] }),
+    expanded && /* @__PURE__ */ jsx("ul", { className: "m-0 grid list-none gap-0.5 border-border/40 border-l pl-4", children: entries.map(([entryKey, entryValue]) => /* @__PURE__ */ jsx(
+      JsonNode,
+      {
+        nodeKey: entryKey,
+        value: entryValue,
+        path: path + PATH_SEP + entryKey,
+        depth: depth + 1,
+        ancestors: {
+          has: (candidate) => candidate === value || ancestors.has(candidate)
+        },
+        viewer,
+        expandedOverrides,
+        onToggle
+      },
+      entryKey
+    )) })
+  ] });
+}
+var JsonViewer = forwardRef(
+  ({ value, collapsed, shortenTextAfterLength = 60, enableCopy = false, className, ...props }, ref) => {
+    const [expandedOverrides, setExpandedOverrides] = useState(/* @__PURE__ */ new Map());
+    const onToggle = (path, next) => {
+      setExpandedOverrides((prev) => new Map(prev).set(path, next));
+    };
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-slot": "json-viewer",
+        ref,
+        className: cn("font-mono text-code-sm", className),
+        ...props,
+        children: /* @__PURE__ */ jsx("ul", { className: "m-0 grid list-none gap-0.5 p-0", children: /* @__PURE__ */ jsx(
+          JsonNode,
+          {
+            value,
+            path: "$",
+            depth: 0,
+            ancestors: EMPTY_CHAIN,
+            viewer: { collapsed, shortenTextAfterLength, enableCopy },
+            expandedOverrides,
+            onToggle
+          }
+        ) })
+      }
+    );
+  }
+);
+JsonViewer.displayName = "JsonViewer";
+var inputVariants = cva(
+  [
+    "flex w-full rounded-md border border-input bg-card",
+    "text-foreground placeholder:text-muted-foreground",
+    "transition-[box-shadow,border-color] duration-base ease-out-soft",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
+    "focus-visible:border-primary",
+    "disabled:cursor-not-allowed disabled:opacity-50",
+    "file:border-0 file:bg-transparent file:font-medium file:text-body-sm"
+  ],
+  {
+    variants: {
+      size: {
+        sm: "h-8 px-2.5 py-1 text-body-sm",
+        // md: density-tunable via CSS var. Comfortable (default) = 36px.
+        md: "h-[var(--theo-control-h,2.25rem)] px-[var(--theo-control-px,0.875rem)] py-1.5 text-body-sm",
+        lg: "h-11 px-4 py-2.5 text-body-md"
+      }
+    },
+    defaultVariants: { size: "md" }
+  }
+);
+var Input = forwardRef(
+  ({ className, type = "text", size, ...props }, ref) => /* @__PURE__ */ jsx(
+    "input",
+    {
+      "data-slot": "input",
+      "data-size": size,
+      ref,
+      type,
+      className: cn(inputVariants({ size }), className),
+      ...props
+    }
+  )
+);
+Input.displayName = "Input";
+var ComboboxContext = createContext(null);
+function composeRefs(local, forwarded) {
+  return (node) => {
+    local.current = node;
+    if (typeof forwarded === "function") forwarded(node);
+    else if (forwarded) forwarded.current = node;
+  };
+}
+function useComboboxContext(sub3) {
+  const ctx = useContext(ComboboxContext);
+  if (!ctx) throw new Error(`<Combobox.${sub3}> must be used inside <Combobox>`);
+  return ctx;
+}
+var Root3 = forwardRef(
+  ({
+    className,
+    children,
+    value,
+    onValueChange,
+    open: openProp,
+    defaultOpen = false,
+    onOpenChange,
+    shouldFilter = true,
+    "aria-label": ariaLabel,
+    ...props
+  }, ref) => {
+    const [uncontrolledOpen, setUncontrolledOpen] = useState(defaultOpen);
+    const open = openProp ?? uncontrolledOpen;
+    const rootRef = useRef(null);
+    const listId = useId();
+    const setOpen = useCallback(
+      (next) => {
+        setUncontrolledOpen(next);
+        onOpenChange?.(next);
+      },
+      [onOpenChange]
+    );
+    const select = useCallback(
+      (next) => {
+        onValueChange?.(next);
+        setOpen(false);
+      },
+      [onValueChange, setOpen]
+    );
+    useEffect(() => {
+      if (!open) return;
+      const onMouseDown = (event) => {
+        if (rootRef.current && !rootRef.current.contains(event.target)) {
+          setOpen(false);
+        }
+      };
+      document.addEventListener("mousedown", onMouseDown);
+      return () => document.removeEventListener("mousedown", onMouseDown);
+    }, [open, setOpen]);
+    return /* @__PURE__ */ jsx(ComboboxContext.Provider, { value: { open, setOpen, value, select, listId }, children: /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-slot": "combobox",
+        ref: composeRefs(rootRef, ref),
+        className: cn("relative w-full", className),
+        ...props,
+        children: /* @__PURE__ */ jsx(Command, { label: ariaLabel, shouldFilter, children })
+      }
+    ) });
+  }
+);
+Root3.displayName = "Combobox";
+var Input2 = forwardRef(
+  ({ className, onFocus, onKeyDown, onValueChange, ...props }, ref) => {
+    const { open, setOpen, listId } = useComboboxContext("Input");
+    const innerRef = useRef(null);
+    useEffect(() => {
+      const el = innerRef.current;
+      if (!el) return;
+      el.setAttribute("aria-expanded", String(open));
+      if (open) el.setAttribute("aria-controls", listId);
+      else el.removeAttribute("aria-controls");
+    });
+    return /* @__PURE__ */ jsx(
+      Command.Input,
+      {
+        "data-slot": "combobox-input",
+        ref: composeRefs(innerRef, ref),
+        className: cn(inputVariants({ size: "md" }), className),
+        onFocus: (event) => {
+          setOpen(true);
+          onFocus?.(event);
+        },
+        onKeyDown: (event) => {
+          if (event.key === "Escape") setOpen(false);
+          onKeyDown?.(event);
+        },
+        onValueChange: (search) => {
+          if (!open) setOpen(true);
+          onValueChange?.(search);
+        },
+        ...props
+      }
+    );
+  }
+);
+Input2.displayName = "Combobox.Input";
+var Content = forwardRef(
+  ({ className, children, loading, ...props }, ref) => {
+    const { open, listId } = useComboboxContext("Content");
+    const resultCount = useCommandState((state) => state.filtered.count);
+    const listRef = useRef(null);
+    useEffect(() => {
+      const el = listRef.current;
+      if (!el) return;
+      el.setAttribute("id", listId);
+      if (resultCount === 0) {
+        el.setAttribute("role", "presentation");
+        el.removeAttribute("aria-label");
+      } else {
+        el.setAttribute("role", "listbox");
+        if (!el.getAttribute("aria-label")) el.setAttribute("aria-label", "Suggestions");
+      }
+    });
+    if (!open) return null;
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        "data-slot": "combobox-content",
+        ref,
+        className: cn(
+          "absolute top-full z-50 mt-1 w-full rounded-lg border border-border bg-popover p-1 text-popover-foreground shadow-md",
+          className
+        ),
+        ...props,
+        children: loading ? /* @__PURE__ */ jsxs(
+          "div",
+          {
+            "data-slot": "combobox-loading",
+            id: listId,
+            "aria-busy": "true",
+            className: "flex items-center justify-center gap-2 px-3 py-6 text-body-sm text-muted-foreground",
+            children: [
+              /* @__PURE__ */ jsx(Loader2, { "aria-hidden": true, className: "size-4 animate-spin" }),
+              "Loading\u2026"
+            ]
+          }
+        ) : /* @__PURE__ */ jsx(Command.List, { ref: listRef, className: "max-h-64 overflow-y-auto", children })
+      }
+    );
+  }
+);
+Content.displayName = "Combobox.Content";
+var Item3 = forwardRef(
+  ({ className, children, value, onSelect, ...props }, ref) => {
+    const ctx = useComboboxContext("Item");
+    const selected = value !== void 0 && ctx.value === value;
+    return /* @__PURE__ */ jsxs(
+      Command.Item,
+      {
+        "data-slot": "combobox-item",
+        "data-selected-value": selected ? "true" : void 0,
+        ref,
+        value,
+        onSelect: (selectedValue) => {
+          ctx.select(selectedValue);
+          onSelect?.(selectedValue);
+        },
+        className: cn(
+          "flex cursor-pointer items-center gap-2 rounded-md px-3 py-2 text-body-sm",
+          "data-[selected=true]:bg-accent/10 data-[selected=true]:text-foreground",
+          className
+        ),
+        ...props,
+        children: [
+          children,
+          /* @__PURE__ */ jsx(
+            Check,
+            {
+              "aria-hidden": true,
+              className: cn("ml-auto size-4", selected ? "opacity-100" : "opacity-0")
+            }
+          )
+        ]
+      }
+    );
+  }
+);
+Item3.displayName = "Combobox.Item";
+var Empty = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+  Command.Empty,
+  {
+    "data-slot": "combobox-empty",
+    ref,
+    className: cn("px-3 py-6 text-center text-body-sm text-muted-foreground", className),
+    ...props
+  }
+));
+Empty.displayName = "Combobox.Empty";
+var Combobox = Object.assign(Root3, { Input: Input2, Content, Item: Item3, Empty });
+var Slider = forwardRef(
+  ({
+    className,
+    defaultValue,
+    value,
+    min = 0,
+    max = 100,
+    marks,
+    disabled,
+    onValueChange,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    ...props
+  }, ref) => {
+    const clamp = (entries) => entries?.map((entry) => Math.min(Math.max(entry, min), max));
+    const [internalValue, setInternalValue] = useState(clamp(defaultValue));
+    const clampedValue = clamp(value) ?? internalValue;
+    const thumbCount = useMemo(() => {
+      if (Array.isArray(value)) return value.length;
+      if (Array.isArray(defaultValue)) return defaultValue.length;
+      return 1;
+    }, [value, defaultValue]);
+    const span = max - min || 1;
+    const visibleMarks = (marks ?? []).filter((mark) => mark.value >= min && mark.value <= max);
+    const isRange = thumbCount > 1;
+    return /* @__PURE__ */ jsxs("div", { "data-slot": "slider", className: cn("relative w-full", visibleMarks.length > 0 && "pb-5"), children: [
+      /* @__PURE__ */ jsxs(
+        SliderPrimitive.Root,
+        {
+          ref,
+          "data-slot": "slider-root",
+          value: clampedValue,
+          min,
+          max,
+          disabled,
+          onValueChange: (next) => {
+            if (value === void 0) setInternalValue(next);
+            onValueChange?.(next);
+          },
+          className: cn(
+            "relative flex w-full touch-none select-none items-center",
+            "data-[disabled]:opacity-50",
+            "data-[orientation=vertical]:h-full data-[orientation=vertical]:min-h-44 data-[orientation=vertical]:w-auto data-[orientation=vertical]:flex-col",
+            className
+          ),
+          ...props,
+          children: [
+            /* @__PURE__ */ jsx(
+              SliderPrimitive.Track,
+              {
+                "data-slot": "slider-track",
+                className: "relative grow overflow-hidden rounded-full bg-muted data-[orientation=horizontal]:h-1.5 data-[orientation=vertical]:h-full data-[orientation=horizontal]:w-full data-[orientation=vertical]:w-1.5",
+                children: /* @__PURE__ */ jsx(
+                  SliderPrimitive.Range,
+                  {
+                    "data-slot": "slider-range",
+                    className: "absolute bg-primary data-[orientation=horizontal]:h-full data-[orientation=vertical]:w-full"
+                  }
+                )
+              }
+            ),
+            Array.from({ length: thumbCount }, (_, index) => /* @__PURE__ */ jsx(
+              SliderPrimitive.Thumb,
+              {
+                "aria-label": isRange && ariaLabel ? `${ariaLabel} (${index + 1} of ${thumbCount})` : ariaLabel,
+                "aria-labelledby": ariaLabelledby,
+                "data-slot": "slider-thumb",
+                className: "block size-4 shrink-0 rounded-full border border-primary bg-background shadow-sm transition-[box-shadow] hover:ring-4 hover:ring-ring/50 focus-visible:outline-none focus-visible:ring-4 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50"
+              },
+              index
+            ))
+          ]
+        }
+      ),
+      visibleMarks.map((mark) => /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          "data-slot": "slider-mark",
+          disabled,
+          tabIndex: -1,
+          "aria-hidden": "true",
+          style: { left: `${(mark.value - min) / span * 100}%` },
+          className: "-translate-x-1/2 absolute top-4 cursor-pointer text-body-sm text-muted-foreground disabled:cursor-default",
+          onClick: () => {
+            if (disabled || isRange) return;
+            if (value === void 0) setInternalValue([mark.value]);
+            onValueChange?.([mark.value]);
+          },
+          children: mark.label ?? mark.value
+        },
+        mark.value
+      ))
+    ] });
+  }
+);
+Slider.displayName = "Slider";
 var UpdateBanner = forwardRef(
   ({
     currentVersion,
@@ -361,7 +1013,7 @@ var UpdateBanner = forwardRef(
 UpdateBanner.displayName = "UpdateBanner";
 var CardContext = createContext({ size: "md" });
 var useCardSize = () => useContext(CardContext).size;
-var Root2 = forwardRef(
+var Root5 = forwardRef(
   ({ className, size = "md", ...props }, ref) => /* @__PURE__ */ jsx(CardContext.Provider, { value: { size }, children: /* @__PURE__ */ jsx(
     "div",
     {
@@ -376,7 +1028,7 @@ var Root2 = forwardRef(
     }
   ) })
 );
-Root2.displayName = "Card";
+Root5.displayName = "Card";
 var headerPadBySize = {
   sm: "gap-1 p-3 pb-1.5",
   md: "gap-1.5 p-5 pb-2.5",
@@ -478,49 +1130,13 @@ var Footer = forwardRef(
   }
 );
 Footer.displayName = "Card.Footer";
-var Card = /* @__PURE__ */ Object.assign(Root2, {
+var Card = /* @__PURE__ */ Object.assign(Root5, {
   Header,
   Title,
   Description,
   Body,
   Footer
 });
-var inputVariants = cva(
-  [
-    "flex w-full rounded-md border border-input bg-card",
-    "text-foreground placeholder:text-muted-foreground",
-    "transition-[box-shadow,border-color] duration-base ease-out-soft",
-    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background",
-    "focus-visible:border-primary",
-    "disabled:cursor-not-allowed disabled:opacity-50",
-    "file:border-0 file:bg-transparent file:font-medium file:text-body-sm"
-  ],
-  {
-    variants: {
-      size: {
-        sm: "h-8 px-2.5 py-1 text-body-sm",
-        // md: density-tunable via CSS var. Comfortable (default) = 36px.
-        md: "h-[var(--theo-control-h,2.25rem)] px-[var(--theo-control-px,0.875rem)] py-1.5 text-body-sm",
-        lg: "h-11 px-4 py-2.5 text-body-md"
-      }
-    },
-    defaultVariants: { size: "md" }
-  }
-);
-var Input = forwardRef(
-  ({ className, type = "text", size, ...props }, ref) => /* @__PURE__ */ jsx(
-    "input",
-    {
-      "data-slot": "input",
-      "data-size": size,
-      ref,
-      type,
-      className: cn(inputVariants({ size }), className),
-      ...props
-    }
-  )
-);
-Input.displayName = "Input";
 var Overlay2 = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   DialogPrimitive.Overlay,
   {
@@ -536,7 +1152,7 @@ var Overlay2 = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   }
 ));
 Overlay2.displayName = "Dialog.Overlay";
-var Content2 = forwardRef(
+var Content3 = forwardRef(
   ({ className, children, hideCloseButton, ...props }, ref) => /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [
     /* @__PURE__ */ jsx(Overlay2, {}),
     /* @__PURE__ */ jsxs(
@@ -575,7 +1191,7 @@ var Content2 = forwardRef(
     )
   ] })
 );
-Content2.displayName = "Dialog.Content";
+Content3.displayName = "Dialog.Content";
 var Header2 = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("flex flex-col gap-1.5 p-6 pb-3 text-left", className), ...props });
 Header2.displayName = "Dialog.Header";
 var Body2 = ({ className, ...props }) => /* @__PURE__ */ jsx("div", { className: cn("px-6 pb-6 text-body-md text-muted-foreground", className), ...props });
@@ -613,7 +1229,7 @@ Description3.displayName = "Dialog.Description";
 var Dialog = /* @__PURE__ */ Object.assign(DialogPrimitive.Root, {
   Trigger: DialogPrimitive.Trigger,
   Close: DialogPrimitive.Close,
-  Content: Content2,
+  Content: Content3,
   Overlay: Overlay2,
   Header: Header2,
   Body: Body2,
@@ -655,7 +1271,7 @@ var Trigger3 = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   }
 ));
 Trigger3.displayName = "Tabs.Trigger";
-var Content4 = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
+var Content5 = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
   TabsPrimitive.Content,
   {
     "data-slot": "tabs-content",
@@ -667,16 +1283,16 @@ var Content4 = forwardRef(({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     ...props
   }
 ));
-Content4.displayName = "Tabs.Content";
+Content5.displayName = "Tabs.Content";
 var Tabs = /* @__PURE__ */ Object.assign(TabsPrimitive.Root, {
   List: List3,
   Trigger: Trigger3,
-  Content: Content4
+  Content: Content5
 });
 var Provider2 = TooltipPrimitive.Provider;
-var Root6 = TooltipPrimitive.Root;
+var Root9 = TooltipPrimitive.Root;
 var Trigger5 = TooltipPrimitive.Trigger;
-var Content6 = forwardRef(({ className, sideOffset = 6, ...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+var Content7 = forwardRef(({ className, sideOffset = 6, ...props }, ref) => /* @__PURE__ */ jsx(TooltipPrimitive.Portal, { children: /* @__PURE__ */ jsx(
   TooltipPrimitive.Content,
   {
     "data-slot": "tooltip-content",
@@ -694,7 +1310,7 @@ var Content6 = forwardRef(({ className, sideOffset = 6, ...props }, ref) => /* @
     ...props
   }
 ) }));
-Content6.displayName = "Tooltip.Content";
+Content7.displayName = "Tooltip.Content";
 var Tooltip = ({
   label,
   side = "top",
@@ -702,15 +1318,15 @@ var Tooltip = ({
   delayDuration = 200,
   children,
   ...rootProps
-}) => /* @__PURE__ */ jsx(Provider2, { delayDuration, children: /* @__PURE__ */ jsxs(Root6, { ...rootProps, children: [
+}) => /* @__PURE__ */ jsx(Provider2, { delayDuration, children: /* @__PURE__ */ jsxs(Root9, { ...rootProps, children: [
   /* @__PURE__ */ jsx(Trigger5, { asChild: true, children }),
-  /* @__PURE__ */ jsx(Content6, { side, align, children: label })
+  /* @__PURE__ */ jsx(Content7, { side, align, children: label })
 ] }) });
 var TooltipWithStatics = Tooltip;
 TooltipWithStatics.Provider = Provider2;
-TooltipWithStatics.Root = Root6;
+TooltipWithStatics.Root = Root9;
 TooltipWithStatics.Trigger = Trigger5;
-TooltipWithStatics.Content = Content6;
+TooltipWithStatics.Content = Content7;
 var ScrollAreaRoot = forwardRef(
   ({ className, children, orientation = "vertical", size = "thin", type = "hover", ...props }, ref) => /* @__PURE__ */ jsxs(
     ScrollAreaPrimitive.Root,
@@ -1560,7 +2176,7 @@ var Textarea = forwardRef(
   )
 );
 Textarea.displayName = "Textarea";
-var Root16 = forwardRef(
+var Root19 = forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "aside",
     {
@@ -1574,7 +2190,7 @@ var Root16 = forwardRef(
     }
   )
 );
-Root16.displayName = "Sidebar";
+Root19.displayName = "Sidebar";
 var Header3 = forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
@@ -1603,7 +2219,7 @@ var Section = forwardRef(
   )
 );
 Section.displayName = "Sidebar.Section";
-var Item4 = forwardRef(
+var Item6 = forwardRef(
   ({ className, icon: Icon2, active, count, as = "button", href, children, ...props }, ref) => {
     const classes = cn(
       "group flex w-full items-center gap-3 rounded-lg px-2 py-2",
@@ -1663,7 +2279,7 @@ var Item4 = forwardRef(
     );
   }
 );
-Item4.displayName = "Sidebar.Item";
+Item6.displayName = "Sidebar.Item";
 var Footer3 = forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
@@ -1676,13 +2292,13 @@ var Footer3 = forwardRef(
   )
 );
 Footer3.displayName = "Sidebar.Footer";
-var Sidebar = /* @__PURE__ */ Object.assign(Root16, {
+var Sidebar = /* @__PURE__ */ Object.assign(Root19, {
   Header: Header3,
   Section,
-  Item: Item4,
+  Item: Item6,
   Footer: Footer3
 });
-var Root17 = forwardRef(
+var Root20 = forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "header",
     {
@@ -1696,7 +2312,7 @@ var Root17 = forwardRef(
     }
   )
 );
-Root17.displayName = "TopNav";
+Root20.displayName = "TopNav";
 var Left = forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "div",
@@ -1831,7 +2447,7 @@ var ModeSwitcher = forwardRef(
   }
 );
 ModeSwitcher.displayName = "TopNav.ModeSwitcher";
-var TopNav = /* @__PURE__ */ Object.assign(Root17, {
+var TopNav = /* @__PURE__ */ Object.assign(Root20, {
   Left,
   Center,
   Right,
@@ -1871,7 +2487,7 @@ var sheetVariants = cva(
     defaultVariants: { side: "right" }
   }
 );
-var Content9 = forwardRef(
+var Content10 = forwardRef(
   ({ className, children, hideCloseButton, side = "right", ...props }, ref) => /* @__PURE__ */ jsxs(DialogPrimitive.Portal, { children: [
     /* @__PURE__ */ jsx(Overlay4, {}),
     /* @__PURE__ */ jsxs(
@@ -1903,7 +2519,7 @@ var Content9 = forwardRef(
     )
   ] })
 );
-Content9.displayName = "Sheet.Content";
+Content10.displayName = "Sheet.Content";
 var Header4 = ({ className, ...props }) => /* @__PURE__ */ jsx(
   "div",
   {
@@ -1948,7 +2564,7 @@ Description6.displayName = "Sheet.Description";
 var Sheet = DialogPrimitive.Root;
 Sheet.Trigger = DialogPrimitive.Trigger;
 Sheet.Close = DialogPrimitive.Close;
-Sheet.Content = Content9;
+Sheet.Content = Content10;
 Sheet.Overlay = Overlay4;
 Sheet.Header = Header4;
 Sheet.Body = Body3;
@@ -2127,7 +2743,7 @@ var alignClass = {
   center: "text-center",
   right: "text-right"
 };
-var Root19 = forwardRef(
+var Root22 = forwardRef(
   ({ className, density = "default", children, ...props }, ref) => /* @__PURE__ */ jsx(TableDensityContext.Provider, { value: density, children: /* @__PURE__ */ jsx(
     "table",
     {
@@ -2139,7 +2755,7 @@ var Root19 = forwardRef(
     }
   ) })
 );
-Root19.displayName = "Table";
+Root22.displayName = "Table";
 var Header5 = forwardRef(
   ({ className, ...props }, ref) => /* @__PURE__ */ jsx(
     "thead",
@@ -2259,7 +2875,7 @@ var HeaderCell = forwardRef(
   }
 );
 HeaderCell.displayName = "Table.HeaderCell";
-var Table = Object.assign(Root19, { Header: Header5, Body: Body4, Row, Cell, HeaderCell });
+var Table = Object.assign(Root22, { Header: Header5, Body: Body4, Row, Cell, HeaderCell });
 
 // src/lib/env.ts
 function readNodeEnv() {
@@ -2282,7 +2898,7 @@ var LABEL_COLOR = {
   idle: "text-muted-foreground",
   warning: "text-warning"
 };
-var SIZE = {
+var SIZE2 = {
   xs: "size-1.5",
   sm: "size-2",
   md: "size-2.5"
@@ -2305,7 +2921,7 @@ var StatusDot = forwardRef(
         "aria-hidden": hasVisibleLabel ? "true" : void 0,
         className: cn(
           "inline-block shrink-0 rounded-full",
-          SIZE[size],
+          SIZE2[size],
           DOT_COLOR[status],
           shouldPulse && "animate-pulse"
         )
@@ -2346,102 +2962,6 @@ var StatusDot = forwardRef(
   }
 );
 StatusDot.displayName = "StatusDot";
-var VARIANT = {
-  ghost: "hover:bg-muted",
-  outline: "border border-border/60 rounded-md"
-};
-var SIZE2 = {
-  sm: "px-2 py-1 text-label",
-  md: "px-2.5 py-1.5 text-body-sm"
-};
-var CopyButton = forwardRef(
-  ({
-    className,
-    value,
-    label,
-    variant = "ghost",
-    size = "sm",
-    onCopied,
-    feedbackDuration = 1500,
-    ...props
-  }, ref) => {
-    const [state, setState] = useState("idle");
-    const timerRef = useRef(null);
-    useEffect(() => {
-      return () => {
-        if (timerRef.current !== null) {
-          clearTimeout(timerRef.current);
-        }
-      };
-    }, []);
-    const scheduleRevert = useCallback(() => {
-      if (timerRef.current !== null) {
-        clearTimeout(timerRef.current);
-      }
-      timerRef.current = setTimeout(() => {
-        setState("idle");
-        timerRef.current = null;
-      }, feedbackDuration);
-    }, [feedbackDuration]);
-    const handleClick = useCallback(() => {
-      if (state !== "idle") return;
-      if (typeof navigator === "undefined" || !navigator.clipboard?.writeText) {
-        setState("failed");
-        scheduleRevert();
-        return;
-      }
-      navigator.clipboard.writeText(value).then(
-        () => {
-          setState("copied");
-          onCopied?.(value);
-          scheduleRevert();
-        },
-        () => {
-          setState("failed");
-          scheduleRevert();
-        }
-      );
-    }, [state, value, onCopied, scheduleRevert]);
-    const Icon2 = state === "copied" ? Check : state === "failed" ? X : Copy;
-    const liveMessage = state === "copied" ? "Copied to clipboard" : state === "failed" ? "Copy failed" : "";
-    const labelText = label !== void 0 ? state === "copied" ? "Copied!" : state === "failed" ? "Failed" : label : null;
-    return /* @__PURE__ */ jsxs(
-      "button",
-      {
-        "data-slot": "copy-button",
-        ref,
-        type: "button",
-        onClick: handleClick,
-        "data-state": state,
-        className: cn(
-          "inline-flex items-center gap-1.5",
-          "font-sans transition-colors",
-          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-card",
-          VARIANT[variant],
-          SIZE2[size],
-          className
-        ),
-        ...props,
-        children: [
-          /* @__PURE__ */ jsx(
-            Icon2,
-            {
-              "aria-hidden": "true",
-              className: cn(
-                "size-3.5 shrink-0 transition-opacity duration-200",
-                state === "copied" && "text-success",
-                state === "failed" && "text-destructive"
-              )
-            }
-          ),
-          labelText !== null ? /* @__PURE__ */ jsx("span", { children: labelText }) : null,
-          /* @__PURE__ */ jsx("span", { className: "sr-only", "aria-live": "polite", children: liveMessage })
-        ]
-      }
-    );
-  }
-);
-CopyButton.displayName = "CopyButton";
 function toDate(value) {
   const d = value instanceof Date ? value : new Date(value);
   return Number.isNaN(d.getTime()) ? null : d;
@@ -2636,7 +3156,7 @@ var StatTile = forwardRef(
   }
 );
 StatTile.displayName = "StatTile";
-var Root20 = forwardRef(
+var Root23 = forwardRef(
   ({ className, title = "Danger Zone", children, ...props }, ref) => /* @__PURE__ */ jsxs(
     "section",
     {
@@ -2652,7 +3172,7 @@ var Root20 = forwardRef(
     }
   )
 );
-Root20.displayName = "DangerZone";
+Root23.displayName = "DangerZone";
 var Action2 = forwardRef(
   ({ className, title, description, action, ...props }, ref) => /* @__PURE__ */ jsxs(
     "div",
@@ -2675,7 +3195,7 @@ var Action2 = forwardRef(
   )
 );
 Action2.displayName = "DangerZone.Action";
-var DangerZone = Object.assign(Root20, { Action: Action2 });
+var DangerZone = Object.assign(Root23, { Action: Action2 });
 var ConfirmDialog = forwardRef(
   ({
     open,
@@ -3187,7 +3707,7 @@ var Portal6 = DropdownMenuPrimitive.Portal;
 var Group3 = DropdownMenuPrimitive.Group;
 var Sub2 = DropdownMenuPrimitive.Sub;
 var RadioGroup3 = DropdownMenuPrimitive.RadioGroup;
-var Content11 = forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
+var Content12 = forwardRef(({ className, sideOffset = 4, ...props }, ref) => /* @__PURE__ */ jsx(DropdownMenuPrimitive.Portal, { children: /* @__PURE__ */ jsx(
   DropdownMenuPrimitive.Content,
   {
     "data-slot": "dropdown-menu-content",
@@ -3203,8 +3723,8 @@ var Content11 = forwardRef(({ className, sideOffset = 4, ...props }, ref) => /*
     ...props
   }
 ) }));
-Content11.displayName = "DropdownMenu.Content";
-var Item6 = forwardRef(
+Content12.displayName = "DropdownMenu.Content";
+var Item8 = forwardRef(
   ({ className, inset, ...props }, ref) => /* @__PURE__ */ jsx(
     DropdownMenuPrimitive.Item,
     {
@@ -3223,7 +3743,7 @@ var Item6 = forwardRef(
     }
   )
 );
-Item6.displayName = "DropdownMenu.Item";
+Item8.displayName = "DropdownMenu.Item";
 var CheckboxItem2 = forwardRef(({ className, children, checked, ...props }, ref) => /* @__PURE__ */ jsxs(
   DropdownMenuPrimitive.CheckboxItem,
   {
@@ -3338,8 +3858,8 @@ SubContent2.displayName = "DropdownMenu.SubContent";
 var DropdownMenu = Object.assign(DropdownMenuPrimitive.Root, {
   Trigger: Trigger9,
   Portal: Portal6,
-  Content: Content11,
-  Item: Item6,
+  Content: Content12,
+  Item: Item8,
   CheckboxItem: CheckboxItem2,
   RadioItem: RadioItem2,
   Label: Label4,
@@ -4788,4 +5308,4 @@ function CommandPalette({
   ] }) });
 }
 
-export { AccountMenu, ActionBar, Alert, Avatar, BadgeWithDot as Badge, Breadcrumb, Button, Card, Checkbox, CodeBlock, CommandPalette, ConfirmDialog, CopyButton, DangerZone, DataTable, DeploymentRow, Dialog, DomainConfig, DropdownMenu, EmptyState, EnvVarEditor, FormField, Input, Label, LoginSplit, MetricCard, MetricsPanel, PageShell, Pagination, PinInput, PlanBadge, PreviewEnvCard, Progress, ProjectCard, RadioGroup, RollbackUI, ScrollArea, Select, Sheet, Sidebar, Skeleton, SocialAuthRow, StatTile, StatusDot, StatusIndicator, Switch, Table, Tabs, TaskHeader, Textarea, Timestamp, Toast, Toaster, TooltipWithStatics as Tooltip, TopNav, UpdateBanner, avatarVariants, badgeVariants, buttonVariants, cn, computePageRange, isNearBottom, sheetVariants, useStickToBottom, useToast };
+export { AccountMenu, ActionBar, Alert, Avatar, BadgeWithDot as Badge, Breadcrumb, Button, Card, Checkbox, CodeBlock, Combobox, CommandPalette, ConfirmDialog, CopyButton, DangerZone, DataTable, DeploymentRow, DescriptionList, Dialog, DomainConfig, DropdownMenu, EmptyState, EnvVarEditor, FormField, Input, JsonViewer, Label, LoginSplit, MetricCard, MetricsPanel, PageShell, Pagination, PinInput, PlanBadge, PreviewEnvCard, Progress, ProjectCard, RadioGroup, RollbackUI, ScrollArea, Select, Sheet, Sidebar, Skeleton, Slider, SocialAuthRow, StatTile, StatusDot, StatusIndicator, Switch, Table, Tabs, TaskHeader, Textarea, Timestamp, Toast, Toaster, TooltipWithStatics as Tooltip, TopNav, UpdateBanner, avatarVariants, badgeVariants, buttonVariants, cn, computePageRange, isNearBottom, sheetVariants, useStickToBottom, useToast };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@usetheo/ui",
-  "version": "0.16.0",
+  "version": "0.18.0",
   "type": "module",
   "license": "Apache-2.0",
   "description": "Violet Forge design system — generic React components + primitives (the non-AI foundation of @theokit/ui).",
@@ -34,6 +34,7 @@
     "@radix-ui/react-radio-group": "^1.3.8",
     "@radix-ui/react-scroll-area": "^1.2.10",
     "@radix-ui/react-select": "^2.2.6",
+    "@radix-ui/react-slider": "^1.4.3",
     "@radix-ui/react-slot": "^1.1.2",
     "@radix-ui/react-switch": "^1.2.6",
     "@radix-ui/react-tabs": "^1.1.3",