@hex-core/components 1.5.0 → 1.6.0

package/dist/index.js

@@ -39,6 +39,7 @@ import { DayPicker } from 'react-day-picker';
 import { format } from 'date-fns';
 import { OTPInput, OTPInputContext } from 'input-otp';
 import { Command as Command$1 } from 'cmdk';
+import * as ToolbarPrimitive from '@radix-ui/react-toolbar';
 import { Drawer as Drawer$1 } from 'vaul';
 import { Panel, Group, Separator as Separator$1 } from 'react-resizable-panels';
 import { Streamdown } from 'streamdown';
@@ -625,6 +626,288 @@ function Skeleton({ className, ...props }) {
     }
   );
 }
+var emptyVariants = cva(
+  [
+    "flex flex-col items-center justify-center text-center",
+    "rounded-md border border-dashed border-border bg-muted/30"
+  ].join(" "),
+  {
+    variants: {
+      size: {
+        sm: "gap-[var(--space-2,0.5rem)] px-[var(--space-4,1rem)] py-[var(--space-6,1.5rem)] text-sm",
+        default: "gap-[var(--space-3,0.75rem)] px-[var(--space-6,1.5rem)] py-[var(--space-8,2rem)]",
+        lg: "gap-[var(--space-4,1rem)] px-[var(--space-8,2rem)] py-[var(--space-12,3rem)]"
+      }
+    },
+    defaultVariants: { size: "default" }
+  }
+);
+var emptyIconWrapperVariants = cva(
+  "flex shrink-0 items-center justify-center rounded-full bg-muted text-muted-foreground [&_svg]:size-5",
+  {
+    variants: {
+      size: {
+        sm: "h-9 w-9",
+        default: "h-12 w-12 [&_svg]:size-6",
+        lg: "h-16 w-16 [&_svg]:size-7"
+      }
+    },
+    defaultVariants: { size: "default" }
+  }
+);
+var emptyTitleVariants = cva("font-semibold text-foreground", {
+  variants: {
+    size: {
+      sm: "text-sm",
+      default: "text-base",
+      lg: "text-lg"
+    }
+  },
+  defaultVariants: { size: "default" }
+});
+var emptyDescriptionVariants = cva("max-w-md text-muted-foreground", {
+  variants: {
+    size: {
+      sm: "text-xs",
+      default: "text-sm",
+      lg: "text-base"
+    }
+  },
+  defaultVariants: { size: "default" }
+});
+function Empty({
+  className,
+  size,
+  icon,
+  title,
+  description,
+  action,
+  titleAs = "h3",
+  ref,
+  ...props
+}) {
+  const titleId = React44.useId();
+  const TitleComp = titleAs;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      role: "region",
+      "aria-labelledby": titleId,
+      className: cn(emptyVariants({ size }), className),
+      ...props,
+      children: [
+        icon ? /* @__PURE__ */ jsx("div", { className: emptyIconWrapperVariants({ size }), "aria-hidden": "true", children: icon }) : null,
+        /* @__PURE__ */ jsx(TitleComp, { id: titleId, className: emptyTitleVariants({ size }), children: title }),
+        description ? /* @__PURE__ */ jsx("div", { className: emptyDescriptionVariants({ size }), children: description }) : null,
+        action ? /* @__PURE__ */ jsx("div", { className: "mt-[var(--space-2,0.5rem)]", children: action }) : null
+      ]
+    }
+  );
+}
+var loadingVariants = cva("flex w-full", {
+  variants: {
+    variant: {
+      list: "flex-col gap-[var(--space-3,0.75rem)]",
+      card: "flex-col gap-[var(--space-2,0.5rem)] rounded-md border border-border bg-card p-[var(--space-4,1rem)]",
+      stack: "flex-col gap-[var(--space-4,1rem)]"
+    }
+  },
+  defaultVariants: { variant: "list" }
+});
+function Loading({
+  className,
+  variant = "list",
+  rows = 3,
+  label = "Loading\u2026",
+  ref,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      role: "status",
+      "aria-live": "polite",
+      className: cn(loadingVariants({ variant }), className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("span", { className: "sr-only", children: label }),
+        Array.from({ length: rows }, (_, i) => (
+          // `variant` can be `null` per CVA's VariantProps shape — the
+          // destructured default only catches undefined. The fallback
+          // here narrows to the LoadingRow's "list" | "card" | "stack"
+          // signature.
+          /* @__PURE__ */ jsx(LoadingRow, { variant: variant ?? "list" }, i)
+        ))
+      ]
+    }
+  );
+}
+function LoadingRow({ variant }) {
+  if (variant === "card") {
+    return /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-3/4" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-full" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-5/6" })
+    ] });
+  }
+  if (variant === "stack") {
+    return /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-[var(--space-3,0.75rem)]", children: [
+      /* @__PURE__ */ jsx(Skeleton, { className: "h-10 w-10 shrink-0 rounded-full" }),
+      /* @__PURE__ */ jsxs("div", { className: "flex flex-1 flex-col gap-[var(--space-2,0.5rem)]", children: [
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-1/3" }),
+        /* @__PURE__ */ jsx(Skeleton, { className: "h-3 w-2/3" })
+      ] })
+    ] });
+  }
+  return /* @__PURE__ */ jsx(Skeleton, { className: "h-4 w-full" });
+}
+var errorStateVariants = cva(
+  [
+    "flex flex-col items-center justify-center text-center",
+    "rounded-md border px-[var(--space-6,1.5rem)] py-[var(--space-8,2rem)] gap-[var(--space-3,0.75rem)]"
+  ].join(" "),
+  {
+    variants: {
+      variant: {
+        default: "border-border bg-muted/30",
+        destructive: "border-destructive/30 bg-destructive/5"
+      }
+    },
+    defaultVariants: { variant: "default" }
+  }
+);
+var errorIconWrapperVariants = cva(
+  "flex h-12 w-12 shrink-0 items-center justify-center rounded-full [&_svg]:size-6",
+  {
+    variants: {
+      variant: {
+        default: "bg-muted text-muted-foreground",
+        destructive: "bg-destructive/10 text-destructive"
+      }
+    },
+    defaultVariants: { variant: "default" }
+  }
+);
+function ErrorState({
+  className,
+  variant,
+  icon,
+  title = "Something went wrong",
+  message,
+  action,
+  ref,
+  ...props
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      role: "alert",
+      className: cn(errorStateVariants({ variant }), className),
+      ...props,
+      children: [
+        icon ? /* @__PURE__ */ jsx("div", { className: errorIconWrapperVariants({ variant }), "aria-hidden": "true", children: icon }) : null,
+        /* @__PURE__ */ jsx("div", { className: "font-semibold text-foreground", children: title }),
+        /* @__PURE__ */ jsx("div", { className: "max-w-md text-sm text-muted-foreground", children: message }),
+        action ? /* @__PURE__ */ jsx("div", { className: "mt-[var(--space-2,0.5rem)]", children: action }) : null
+      ]
+    }
+  );
+}
+var tagVariants = cva(
+  [
+    "inline-flex items-center gap-[var(--gap-xs,0.25rem)] rounded-full border px-2.5 py-0.5 text-xs font-medium",
+    "transition-all duration-[var(--duration-normal,200ms)] ease-out",
+    "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2"
+  ].join(" "),
+  {
+    variants: {
+      variant: {
+        default: "border-transparent bg-primary text-primary-foreground",
+        secondary: "border-foreground/15 bg-secondary text-secondary-foreground hover:border-foreground/20",
+        destructive: "border-transparent bg-destructive text-destructive-foreground",
+        outline: "border-foreground/20 text-foreground hover:border-foreground/30"
+      }
+    },
+    defaultVariants: { variant: "default" }
+  }
+);
+function extractStringLabel(children) {
+  const parts = [];
+  const visit = (node) => {
+    if (node === null || node === void 0 || typeof node === "boolean") return;
+    if (typeof node === "string") {
+      parts.push(node);
+      return;
+    }
+    if (typeof node === "number") {
+      parts.push(String(node));
+      return;
+    }
+    if (Array.isArray(node)) {
+      for (const item of node) visit(item);
+      return;
+    }
+    if (React44.isValidElement(node)) {
+      const props = node.props;
+      visit(props.children);
+    }
+  };
+  visit(children);
+  const joined = parts.join(" ").replace(/\s+/g, " ").trim();
+  return joined.length > 0 ? joined : null;
+}
+function Tag({
+  className,
+  variant,
+  icon,
+  onRemove,
+  removeLabel,
+  children,
+  ref,
+  ...props
+}) {
+  const labelText = extractStringLabel(children);
+  const ariaLabel = removeLabel ?? (labelText ? `Remove ${labelText}` : "Remove");
+  return /* @__PURE__ */ jsxs("span", { ref, className: cn(tagVariants({ variant }), className), ...props, children: [
+    icon ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "-ml-0.5 [&_svg]:size-3 [&_svg]:shrink-0", children: icon }) : null,
+    /* @__PURE__ */ jsx("span", { children }),
+    onRemove ? /* @__PURE__ */ jsx(
+      "button",
+      {
+        type: "button",
+        onClick: onRemove,
+        "aria-label": ariaLabel,
+        className: cn(
+          "-mr-0.5 inline-flex h-4 w-4 shrink-0 items-center justify-center rounded-full",
+          "transition-colors duration-[var(--duration-normal,200ms)] ease-out",
+          "hover:bg-foreground/10 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
+          "active:scale-[0.92]"
+        ),
+        children: /* @__PURE__ */ jsxs(
+          "svg",
+          {
+            xmlns: "http://www.w3.org/2000/svg",
+            viewBox: "0 0 24 24",
+            fill: "none",
+            stroke: "currentColor",
+            strokeWidth: "2.5",
+            strokeLinecap: "round",
+            strokeLinejoin: "round",
+            className: "size-3",
+            "aria-hidden": "true",
+            children: [
+              /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+              /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+            ]
+          }
+        )
+      }
+    ) : null
+  ] });
+}
 var Progress = React44.forwardRef(({ className, value, max = 100, ...props }, ref) => {
   const pct = Math.max(0, Math.min(100, (value ?? 0) / max * 100));
   return /* @__PURE__ */ jsx(
@@ -3358,31 +3641,31 @@ function Dropzone({
     isDisabled: disabled,
     openFileDialog
   };
-  return /* @__PURE__ */ jsxs(
-    "div",
-    {
-      role: "button",
-      tabIndex: disabled ? -1 : 0,
-      "aria-label": ariaLabel,
-      "aria-disabled": disabled || void 0,
-      "data-drag-over": isDragOver || void 0,
-      onClick: openFileDialog,
-      onKeyDown: handleKeyDown,
-      onDragEnter: handleDragEnter,
-      onDragOver: handleDragOver,
-      onDragLeave: handleDragLeave,
-      onDrop: handleDrop,
-      className: cn(
-        "flex w-full cursor-pointer select-none flex-col items-center justify-center gap-[var(--space-2,0.5rem)] rounded-md border-2 border-dashed border-input bg-background px-[var(--space-6,1.5rem)] py-[var(--space-8,2rem)] text-center text-sm transition-all duration-[var(--duration-normal,200ms)] ease-out",
-        "hover:bg-accent hover:text-accent-foreground",
-        "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
-        isDragOver && "border-primary bg-accent text-accent-foreground",
-        disabled && "pointer-events-none opacity-50",
-        className
-      ),
-      ...rest,
-      children: [
-        typeof children === "function" ? children(renderState) : children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        role: "button",
+        tabIndex: disabled ? -1 : 0,
+        "aria-label": ariaLabel,
+        "aria-disabled": disabled || void 0,
+        "data-drag-over": isDragOver || void 0,
+        onClick: openFileDialog,
+        onKeyDown: handleKeyDown,
+        onDragEnter: handleDragEnter,
+        onDragOver: handleDragOver,
+        onDragLeave: handleDragLeave,
+        onDrop: handleDrop,
+        className: cn(
+          "flex w-full cursor-pointer select-none flex-col items-center justify-center gap-[var(--space-2,0.5rem)] rounded-md border-2 border-dashed border-input bg-background px-[var(--space-6,1.5rem)] py-[var(--space-8,2rem)] text-center text-sm transition-all duration-[var(--duration-normal,200ms)] ease-out",
+          "hover:bg-accent hover:text-accent-foreground",
+          "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2",
+          isDragOver && "border-primary bg-accent text-accent-foreground",
+          disabled && "pointer-events-none opacity-50",
+          className
+        ),
+        ...rest,
+        children: typeof children === "function" ? children(renderState) : children ?? /* @__PURE__ */ jsxs(Fragment, { children: [
           /* @__PURE__ */ jsxs(
             "svg",
             {
@@ -3404,25 +3687,27 @@ function Dropzone({
           ),
           /* @__PURE__ */ jsx("span", { className: "font-medium", children: isDragOver ? "Drop files to upload" : "Drag files here or click to browse" }),
           accept ? /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: accept }) : null
-        ] }),
-        /* @__PURE__ */ jsx(
-          "input",
-          {
-            ref: inputRef,
-            type: "file",
-            accept,
-            multiple,
-            disabled,
-            className: "sr-only",
-            onChange: (e) => {
-              emit(e.target.files);
-              e.target.value = "";
-            }
-          }
-        )
-      ]
-    }
-  );
+        ] })
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: inputRef,
+        type: "file",
+        accept,
+        multiple,
+        disabled,
+        "aria-hidden": "true",
+        tabIndex: -1,
+        className: "sr-only",
+        onChange: (e) => {
+          emit(e.target.files);
+          e.target.value = "";
+        }
+      }
+    )
+  ] });
 }
 Dropzone.displayName = "Dropzone";
 var TimePicker = React44.forwardRef(
@@ -3771,6 +4056,374 @@ function FileTree({
   );
 }
 FileTree.displayName = "FileTree";
+function flattenVisible(nodes, expanded) {
+  const out = [];
+  function walk(items, depth, parentId) {
+    for (const node of items) {
+      out.push({ node, depth, parentId });
+      if (node.children && expanded.has(node.id)) {
+        walk(node.children, depth + 1, node.id);
+      }
+    }
+  }
+  walk(nodes, 0, null);
+  return out;
+}
+function Tree({
+  data,
+  defaultExpanded,
+  expanded: expandedProp,
+  onExpandedChange,
+  selected: selectedProp,
+  onSelect,
+  "aria-label": ariaLabel,
+  className,
+  ref
+}) {
+  const [internalExpanded, setInternalExpanded] = React44.useState(
+    () => new Set(defaultExpanded ?? [])
+  );
+  const expanded = React44.useMemo(
+    () => expandedProp ? new Set(expandedProp) : internalExpanded,
+    [expandedProp, internalExpanded]
+  );
+  const [internalSelected, setInternalSelected] = React44.useState(null);
+  const selected = selectedProp ?? internalSelected;
+  const visible = React44.useMemo(() => flattenVisible(data, expanded), [data, expanded]);
+  const [focusedId, setFocusedId] = React44.useState(
+    () => visible[0]?.node.id ?? null
+  );
+  React44.useEffect(() => {
+    if (focusedId && !visible.some((row) => row.node.id === focusedId)) {
+      setFocusedId(visible[0]?.node.id ?? null);
+    }
+  }, [visible, focusedId]);
+  const setExpandedSet = React44.useCallback(
+    (next) => {
+      if (expandedProp) {
+        onExpandedChange?.([...next]);
+      } else {
+        setInternalExpanded(next);
+        onExpandedChange?.([...next]);
+      }
+    },
+    [expandedProp, onExpandedChange]
+  );
+  const toggleExpand = React44.useCallback(
+    (id) => {
+      const next = new Set(expanded);
+      if (next.has(id)) next.delete(id);
+      else next.add(id);
+      setExpandedSet(next);
+    },
+    [expanded, setExpandedSet]
+  );
+  const activate = React44.useCallback(
+    (id) => {
+      if (selectedProp === void 0) setInternalSelected(id);
+      onSelect?.(id);
+    },
+    [selectedProp, onSelect]
+  );
+  const handleKeyDown = React44.useCallback(
+    (e) => {
+      if (!focusedId) return;
+      const idx = visible.findIndex((row2) => row2.node.id === focusedId);
+      if (idx < 0) return;
+      const row = visible[idx];
+      if (!row) return;
+      const node = row.node;
+      const isParent = !!node.children;
+      const isExpanded = expanded.has(node.id);
+      switch (e.key) {
+        case "ArrowDown": {
+          e.preventDefault();
+          const next = visible[idx + 1];
+          if (next) setFocusedId(next.node.id);
+          break;
+        }
+        case "ArrowUp": {
+          e.preventDefault();
+          const prev = visible[idx - 1];
+          if (prev) setFocusedId(prev.node.id);
+          break;
+        }
+        case "ArrowRight": {
+          e.preventDefault();
+          if (isParent && !isExpanded) toggleExpand(node.id);
+          else if (isParent && isExpanded) {
+            const next = visible[idx + 1];
+            if (next) setFocusedId(next.node.id);
+          }
+          break;
+        }
+        case "ArrowLeft": {
+          e.preventDefault();
+          if (isParent && isExpanded) toggleExpand(node.id);
+          else if (row.parentId) {
+            setFocusedId(row.parentId);
+          }
+          break;
+        }
+        case "Home": {
+          e.preventDefault();
+          if (visible[0]) setFocusedId(visible[0].node.id);
+          break;
+        }
+        case "End": {
+          e.preventDefault();
+          const last = visible[visible.length - 1];
+          if (last) setFocusedId(last.node.id);
+          break;
+        }
+        case "Enter":
+        case " ": {
+          e.preventDefault();
+          if (node.disabled) return;
+          if (isParent) toggleExpand(node.id);
+          activate(node.id);
+          break;
+        }
+        default:
+          return;
+      }
+    },
+    [focusedId, visible, expanded, toggleExpand, activate]
+  );
+  const isSelectable = onSelect !== void 0 || selectedProp !== void 0;
+  return /* @__PURE__ */ jsx(
+    "ul",
+    {
+      ref,
+      role: "tree",
+      "aria-label": ariaLabel,
+      className: cn("flex flex-col text-sm text-foreground", className),
+      onKeyDown: handleKeyDown,
+      children: data.map((node) => /* @__PURE__ */ jsx(
+        TreeItem2,
+        {
+          node,
+          depth: 0,
+          expanded,
+          selected,
+          isSelectable,
+          focusedId,
+          onFocus: setFocusedId,
+          onToggleExpand: toggleExpand,
+          onActivate: activate
+        },
+        node.id
+      ))
+    }
+  );
+}
+function TreeItem2({
+  node,
+  depth,
+  expanded,
+  selected,
+  isSelectable,
+  focusedId,
+  onFocus,
+  onToggleExpand,
+  onActivate
+}) {
+  const children = node.children;
+  const isParent = children !== void 0;
+  const isExpanded = expanded.has(node.id);
+  const isSelected = selected === node.id;
+  const isFocused = focusedId === node.id;
+  const handleClick = () => {
+    if (node.disabled) return;
+    onFocus(node.id);
+    if (isParent) onToggleExpand(node.id);
+    onActivate(node.id);
+  };
+  const labelId = React44.useId();
+  return /* @__PURE__ */ jsxs(
+    "li",
+    {
+      role: "treeitem",
+      "aria-labelledby": labelId,
+      "aria-level": depth + 1,
+      "aria-expanded": isParent ? isExpanded : void 0,
+      "aria-selected": isSelectable ? isSelected : void 0,
+      "aria-disabled": node.disabled || void 0,
+      tabIndex: isFocused ? 0 : -1,
+      onClick: (e) => {
+        e.stopPropagation();
+        handleClick();
+      },
+      onFocus: (e) => {
+        e.stopPropagation();
+        if (!node.disabled) onFocus(node.id);
+      },
+      className: cn(
+        "outline-none rounded-sm",
+        // H1: focus-visible-driven ring (NOT state-driven) — the ring
+        // only shows on keyboard focus, not on mouse clicks.
+        "focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1"
+      ),
+      children: [
+        /* @__PURE__ */ jsxs(
+          "div",
+          {
+            className: cn(
+              "flex cursor-pointer select-none items-center gap-[var(--gap-xs,0.25rem)] rounded-sm px-[var(--space-2,0.5rem)] py-[var(--space-1,0.25rem)]",
+              "transition-colors duration-[var(--duration-normal,200ms)] ease-out",
+              "hover:bg-accent hover:text-accent-foreground",
+              isSelected && "bg-accent text-accent-foreground font-medium",
+              node.disabled && "cursor-not-allowed opacity-50"
+            ),
+            style: { paddingLeft: `calc(${depth} * var(--space-4, 1rem) + var(--space-2, 0.5rem))` },
+            children: [
+              isParent ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "inline-flex h-4 w-4 shrink-0 items-center justify-center", children: /* @__PURE__ */ jsx(
+                "svg",
+                {
+                  xmlns: "http://www.w3.org/2000/svg",
+                  viewBox: "0 0 24 24",
+                  fill: "none",
+                  stroke: "currentColor",
+                  strokeWidth: "2",
+                  strokeLinecap: "round",
+                  strokeLinejoin: "round",
+                  className: cn(
+                    "h-3 w-3 transition-transform duration-[var(--duration-normal,200ms)] ease-out",
+                    isExpanded ? "rotate-90" : "rotate-0"
+                  ),
+                  children: /* @__PURE__ */ jsx("polyline", { points: "9 18 15 12 9 6" })
+                }
+              ) }) : /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "inline-block h-4 w-4 shrink-0" }),
+              node.icon ? /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: "inline-flex h-4 w-4 shrink-0 items-center justify-center [&_svg]:size-4", children: node.icon }) : null,
+              /* @__PURE__ */ jsx("span", { id: labelId, className: "truncate", children: node.label })
+            ]
+          }
+        ),
+        isParent && isExpanded && children ? /* @__PURE__ */ jsx("ul", { role: "group", "aria-labelledby": labelId, className: "flex flex-col", children: children.map((child) => /* @__PURE__ */ jsx(
+          TreeItem2,
+          {
+            node: child,
+            depth: depth + 1,
+            expanded,
+            selected,
+            isSelectable,
+            focusedId,
+            onFocus,
+            onToggleExpand,
+            onActivate
+          },
+          child.id
+        )) }) : null
+      ]
+    }
+  );
+}
+var toolbarVariants = cva("flex items-center gap-[var(--gap-xs,0.25rem)] rounded-md border border-border bg-card p-[var(--space-1,0.25rem)]", {
+  variants: {
+    orientation: {
+      horizontal: "flex-row",
+      vertical: "flex-col items-stretch"
+    }
+  },
+  defaultVariants: { orientation: "horizontal" }
+});
+var toolbarItemBaseClasses = [
+  "inline-flex items-center justify-center gap-[var(--gap-xs,0.25rem)] rounded-sm",
+  "px-[var(--space-2,0.5rem)] h-[var(--control-height-sm,2.25rem)] text-sm font-medium",
+  "text-foreground/80 hover:text-foreground hover:bg-accent",
+  "transition-colors duration-[var(--duration-normal,200ms)] ease-out",
+  "focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
+  "disabled:pointer-events-none disabled:opacity-50",
+  "data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+  "active:scale-[0.98]",
+  "[&_svg]:size-4 [&_svg]:shrink-0"
+].join(" ");
+function Toolbar({ className, orientation = "horizontal", ref, ...props }) {
+  return /* @__PURE__ */ jsx(
+    ToolbarPrimitive.Root,
+    {
+      ref,
+      orientation,
+      className: cn(toolbarVariants({ orientation }), className),
+      ...props
+    }
+  );
+}
+function ToolbarButton({
+  className,
+  ref,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ToolbarPrimitive.Button,
+    {
+      ref,
+      className: cn(toolbarItemBaseClasses, className),
+      ...props
+    }
+  );
+}
+function ToolbarLink({
+  className,
+  ref,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ToolbarPrimitive.Link,
+    {
+      ref,
+      className: cn(toolbarItemBaseClasses, "underline-offset-4 hover:underline", className),
+      ...props
+    }
+  );
+}
+function ToolbarToggleGroup({
+  className,
+  ref,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ToolbarPrimitive.ToggleGroup,
+    {
+      ref,
+      className: cn("flex items-center gap-[var(--gap-xs,0.25rem)]", className),
+      ...props
+    }
+  );
+}
+function ToolbarToggleItem({
+  className,
+  ref,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ToolbarPrimitive.ToggleItem,
+    {
+      ref,
+      className: cn(toolbarItemBaseClasses, className),
+      ...props
+    }
+  );
+}
+function ToolbarSeparator({
+  className,
+  ref,
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    ToolbarPrimitive.Separator,
+    {
+      ref,
+      className: cn(
+        "shrink-0 bg-border",
+        "data-[orientation=horizontal]:h-4 data-[orientation=horizontal]:w-px data-[orientation=horizontal]:mx-[var(--space-1,0.25rem)]",
+        "data-[orientation=vertical]:w-4 data-[orientation=vertical]:h-px data-[orientation=vertical]:my-[var(--space-1,0.25rem)]",
+        className
+      ),
+      ...props
+    }
+  );
+}
 var Sheet = DialogPrimitive.Root;
 var SheetTrigger = DialogPrimitive.Trigger;
 var SheetClose = DialogPrimitive.Close;
@@ -4728,7 +5381,7 @@ var LABEL_TO_LANG = {
   prompt: "text",
   plain: "text"
 };
-var DEFAULT_THEMES = { light: "github-light", dark: "github-dark" };
+var DEFAULT_THEMES = { light: "github-light-high-contrast", dark: "github-dark" };
 var cachedCodeToHtml = cache(
   async (code, lang, themesKey, themes) => {
     return codeToHtml(code, { lang, themes, defaultColor: false });
@@ -4872,7 +5525,151 @@ function ErrorGlyph() {
     }
   );
 }
+var attachmentVariants = cva(
+  [
+    "group/attachment relative inline-flex items-center gap-[var(--gap-sm,0.5rem)] rounded-md border border-border bg-card",
+    "transition-all duration-[var(--duration-normal,200ms)] ease-out"
+  ].join(" "),
+  {
+    variants: {
+      variant: {
+        file: "px-[var(--space-3,0.75rem)] py-[var(--space-2,0.5rem)] max-w-xs",
+        image: "p-0 overflow-hidden"
+      }
+    },
+    defaultVariants: { variant: "file" }
+  }
+);
+function formatSize(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${(bytes / 1024).toFixed(1)} KB`;
+  if (bytes < 1024 * 1024 * 1024) return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+  return `${(bytes / (1024 * 1024 * 1024)).toFixed(1)} GB`;
+}
+function detectVariant(file) {
+  const preview = "preview" in file ? file.preview : void 0;
+  const isImage = file.type.startsWith("image/");
+  return isImage && preview ? "image" : "file";
+}
+function resolvePreview(file) {
+  return "preview" in file ? file.preview : void 0;
+}
+function Attachment({
+  className,
+  variant,
+  file,
+  onRemove,
+  progress,
+  ref,
+  ...props
+}) {
+  const preview = resolvePreview(file);
+  const detected = detectVariant(file);
+  const resolvedVariant = variant === "image" && !preview ? "file" : variant ?? detected;
+  const showProgress = typeof progress === "number" && progress >= 0 && progress < 1;
+  const progressPercent = showProgress ? Math.round(progress * 100) : 0;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref,
+      className: cn(attachmentVariants({ variant: resolvedVariant }), className),
+      ...props,
+      children: [
+        resolvedVariant === "image" && preview ? (
+          // Intentional plain <img> (not next/image) — Attachment is
+          // framework-agnostic. Consumers can swap in next/image at the
+          // callsite when they want optimization.
+          /* @__PURE__ */ jsx(
+            "img",
+            {
+              src: preview,
+              alt: file.name,
+              className: "block h-20 w-20 object-cover"
+            }
+          )
+        ) : /* @__PURE__ */ jsxs(Fragment, { children: [
+          /* @__PURE__ */ jsx(FileIcon2, { className: "h-5 w-5 shrink-0 text-muted-foreground" }),
+          /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-col", children: [
+            /* @__PURE__ */ jsx("span", { className: "truncate text-sm font-medium text-foreground", children: file.name }),
+            /* @__PURE__ */ jsx("span", { className: "text-xs text-muted-foreground", children: formatSize(file.size) })
+          ] })
+        ] }),
+        showProgress ? /* @__PURE__ */ jsx(
+          "div",
+          {
+            role: "progressbar",
+            "aria-valuemin": 0,
+            "aria-valuemax": 100,
+            "aria-valuenow": progressPercent,
+            "aria-label": `Uploading ${file.name}`,
+            className: "absolute inset-x-0 bottom-0 h-1 overflow-hidden rounded-b-md bg-muted",
+            children: /* @__PURE__ */ jsx(
+              "div",
+              {
+                className: "h-full bg-primary transition-[width] duration-[var(--duration-normal,200ms)] ease-out",
+                style: { width: `${progressPercent}%` }
+              }
+            )
+          }
+        ) : null,
+        onRemove ? /* @__PURE__ */ jsx(
+          "button",
+          {
+            type: "button",
+            onClick: onRemove,
+            "aria-label": `Remove ${file.name}`,
+            className: cn(
+              "absolute -right-2 -top-2 inline-flex h-5 w-5 items-center justify-center rounded-full",
+              "bg-card border border-border text-foreground shadow-sm",
+              "transition-all duration-[var(--duration-normal,200ms)] ease-out",
+              "hover:bg-accent hover:scale-110 focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-1",
+              "active:scale-90"
+            ),
+            children: /* @__PURE__ */ jsxs(
+              "svg",
+              {
+                xmlns: "http://www.w3.org/2000/svg",
+                viewBox: "0 0 24 24",
+                fill: "none",
+                stroke: "currentColor",
+                strokeWidth: "2.5",
+                strokeLinecap: "round",
+                strokeLinejoin: "round",
+                className: "size-3",
+                "aria-hidden": "true",
+                children: [
+                  /* @__PURE__ */ jsx("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                  /* @__PURE__ */ jsx("line", { x1: "6", y1: "6", x2: "18", y2: "18" })
+                ]
+              }
+            )
+          }
+        ) : null
+      ]
+    }
+  );
+}
+function FileIcon2(props) {
+  return /* @__PURE__ */ jsxs(
+    "svg",
+    {
+      xmlns: "http://www.w3.org/2000/svg",
+      viewBox: "0 0 24 24",
+      fill: "none",
+      stroke: "currentColor",
+      strokeWidth: "2",
+      strokeLinecap: "round",
+      strokeLinejoin: "round",
+      "aria-hidden": "true",
+      ...props,
+      children: [
+        /* @__PURE__ */ jsx("path", { d: "M14 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V8z" }),
+        /* @__PURE__ */ jsx("polyline", { points: "14 2 14 8 20 8" })
+      ]
+    }
+  );
+}
 
-export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AspectRatio, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Citation, Cluster, CodeBlock, CodeBlockCopy2 as CodeBlockCopy, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, ColorPicker, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Composer, Container, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuTrigger, DataTable, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuTrigger, Dropzone, FileTree, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Grid, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Label, LoadingIndicator, Markdown, Menubar, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarSeparator, MenubarShortcut, MenubarTrigger, Message, MessageActions, MessageList, MultiCombobox, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, Reasoning, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarItem, SidebarProvider, SidebarTrigger, Skeleton, Slider, Spacer, Stack, Stepper, Suggestion, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Textarea, TimePicker, Timeline, Toaster, Toggle, ToggleGroup, ToggleGroupItem, ToolCall, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, alertVariants, badgeVariants, buttonVariants, clusterVariants, cn, containerVariants, formatHslTriplet, gridVariants, hexToHslTriplet, hslToRgb, hslTripletToHex, loadingIndicatorVariants, messageVariants, navigationMenuTriggerStyle, parseHslTriplet, rgbToHsl, spacerVariants, stackVariants, toggleVariants, useFormField, useSidebar };
+export { Accordion, AccordionContent, AccordionItem, AccordionTrigger, Alert, AlertDescription, AlertDialog, AlertDialogAction, AlertDialogCancel, AlertDialogContent, AlertDialogDescription, AlertDialogFooter, AlertDialogHeader, AlertDialogOverlay, AlertDialogPortal, AlertDialogTitle, AlertDialogTrigger, AlertTitle, AspectRatio, Attachment, Avatar, AvatarFallback, AvatarImage, Badge, Breadcrumb, BreadcrumbEllipsis, BreadcrumbItem, BreadcrumbLink, BreadcrumbList, BreadcrumbPage, BreadcrumbSeparator, Button, Calendar, Card, CardContent, CardDescription, CardFooter, CardHeader, CardTitle, Checkbox, Citation, Cluster, CodeBlock, CodeBlockCopy2 as CodeBlockCopy, Collapsible, CollapsibleContent2 as CollapsibleContent, CollapsibleTrigger2 as CollapsibleTrigger, ColorPicker, Combobox, Command, CommandDialog, CommandEmpty, CommandGroup, CommandInput, CommandItem, CommandList, CommandSeparator, CommandShortcut, Composer, Container, ContextMenu, ContextMenuCheckboxItem, ContextMenuContent, ContextMenuGroup, ContextMenuItem, ContextMenuLabel, ContextMenuPortal, ContextMenuRadioGroup, ContextMenuRadioItem, ContextMenuSeparator, ContextMenuShortcut, ContextMenuTrigger, DataTable, DatePicker, Dialog, DialogClose, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogOverlay, DialogPortal, DialogTitle, DialogTrigger, Drawer, DrawerClose, DrawerContent, DrawerDescription, DrawerFooter, DrawerHeader, DrawerOverlay, DrawerPortal, DrawerTitle, DrawerTrigger, DropdownMenu, DropdownMenuCheckboxItem, DropdownMenuContent, DropdownMenuGroup, DropdownMenuItem, DropdownMenuLabel, DropdownMenuPortal, DropdownMenuRadioGroup, DropdownMenuRadioItem, DropdownMenuSeparator, DropdownMenuShortcut, DropdownMenuSub, DropdownMenuTrigger, Dropzone, Empty, ErrorState, FileTree, Form, FormControl, FormDescription, FormField, FormItem, FormLabel, FormMessage, Grid, HoverCard, HoverCardContent, HoverCardTrigger, Input, InputOTP, InputOTPGroup, InputOTPSeparator, InputOTPSlot, Label, Loading, LoadingIndicator, Markdown, Menubar, MenubarContent, MenubarGroup, MenubarItem, MenubarLabel, MenubarMenu, MenubarPortal, MenubarRadioGroup, MenubarSeparator, MenubarShortcut, MenubarTrigger, Message, MessageActions, MessageList, MultiCombobox, NavigationMenu, NavigationMenuContent, NavigationMenuIndicator, NavigationMenuItem, NavigationMenuLink, NavigationMenuList, NavigationMenuTrigger, NavigationMenuViewport, Pagination, PaginationContent, PaginationEllipsis, PaginationItem, PaginationLink, PaginationNext, PaginationPrevious, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Progress, RadioGroup, RadioGroupItem, Reasoning, ResizableHandle, ResizablePanel, ResizablePanelGroup, ScrollArea, ScrollBar, Select, SelectContent, SelectGroup, SelectItem, SelectLabel, SelectSeparator, SelectTrigger, SelectValue, Separator, Sheet, SheetClose, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetOverlay, SheetPortal, SheetTitle, SheetTrigger, Sidebar, SidebarContent, SidebarFooter, SidebarHeader, SidebarItem, SidebarProvider, SidebarTrigger, Skeleton, Slider, Spacer, Stack, Stepper, Suggestion, Switch, Table, TableBody, TableCaption, TableCell, TableFooter, TableHead, TableHeader, TableRow, Tabs, TabsContent, TabsList, TabsTrigger, Tag, Textarea, TimePicker, Timeline, Toaster, Toggle, ToggleGroup, ToggleGroupItem, ToolCall, Toolbar, ToolbarButton, ToolbarLink, ToolbarSeparator, ToolbarToggleGroup, ToolbarToggleItem, Tooltip, TooltipContent, TooltipProvider, TooltipTrigger, Tree, alertVariants, attachmentVariants, badgeVariants, buttonVariants, clusterVariants, cn, containerVariants, emptyVariants, errorStateVariants, formatHslTriplet, gridVariants, hexToHslTriplet, hslToRgb, hslTripletToHex, loadingIndicatorVariants, loadingVariants, messageVariants, navigationMenuTriggerStyle, parseHslTriplet, rgbToHsl, spacerVariants, stackVariants, tagVariants, toggleVariants, toolbarVariants, useFormField, useSidebar };
 //# sourceMappingURL=index.js.map
 //# sourceMappingURL=index.js.map