@ceebee/ui 0.5.2 → 0.6.0

package/dist/client.js

@@ -1,20 +1,22 @@
 "use client";
-import { createContext, forwardRef, useContext, useMemo, useState, useRef, useEffect, useCallback, useId, isValidElement, cloneElement, Fragment, useReducer, Children } from 'react';
-import { jsxs, jsx, Fragment as Fragment$1 } from 'react/jsx-runtime';
+import { createContext, forwardRef, useContext, useMemo, useId, useState, useRef, useEffect, useCallback, Children, isValidElement, Fragment as Fragment$1, cloneElement, useReducer } from 'react';
+import { jsxs, jsx, Fragment } from 'react/jsx-runtime';
 import { motion } from 'motion/react';
 import { Select as Select$1 } from '@base-ui/react/select';
-import { ChevronLeft, ChevronRight, ChevronsUpDown, Check, Minus, X, CalendarDays, Clock, Upload as Upload$1, Plus, Search, Star, PanelLeftOpen, PanelLeftClose, ArrowUp, ArrowDown, XCircle, AlertTriangle, CheckCircle2, Info } from 'lucide-react';
+import { ChevronsUpDown, ChevronDown, ChevronRight, AlertTriangle, ChevronLeft, ZoomOut, RotateCcw, ZoomIn, X, XCircle, CheckCircle2, Info, Check, Minus, CalendarDays, Clock, Upload as Upload$1, Plus, Search, Star, PanelLeftOpen, PanelLeftClose, ArrowUp, ArrowDown } from 'lucide-react';
 import { Checkbox as Checkbox$1 } from '@base-ui/react/checkbox';
 import { Radio } from '@base-ui/react/radio';
 import { RadioGroup as RadioGroup$1 } from '@base-ui/react/radio-group';
 import { Switch as Switch$1 } from '@base-ui/react/switch';
 import { Combobox } from '@base-ui/react/combobox';
 import { Popover as Popover$1 } from '@base-ui/react/popover';
+import { Slider as Slider$1 } from '@base-ui/react/slider';
 import { Dialog } from '@base-ui/react/dialog';
 import { Tooltip as Tooltip$1 } from '@base-ui/react/tooltip';
 import { Toast } from '@base-ui/react/toast';
 import { Tabs as Tabs$1 } from '@base-ui/react/tabs';
-import { Menu } from '@base-ui/react/menu';
+import { Menu as Menu$1 } from '@base-ui/react/menu';
+import { Accordion } from '@base-ui/react/accordion';
 import useEmblaCarousel from 'embla-carousel-react';
 
 var DEFAULT_LABELS = {
@@ -184,6 +186,48 @@ var Button = forwardRef(function Button2({
     }
   );
 });
+var FloatButton = forwardRef(function FloatButton2({
+  label,
+  visibleLabel = false,
+  icon,
+  tone = "brand",
+  size = "md",
+  placement = "bottom-end",
+  type = "button",
+  "aria-label": _ariaLabel,
+  "aria-labelledby": _ariaLabelledBy,
+  style: _style,
+  ...rest
+}, ref) {
+  const {
+    className: _className,
+    role: _role,
+    color: _color,
+    children: _children,
+    "data-tone": _dataTone,
+    ...safeRest
+  } = rest;
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      ref,
+      type,
+      ...safeRest,
+      className: cn(
+        "cb-float-button",
+        `cb-float-button--${size}`,
+        `cb-float-button--${placement}`,
+        visibleLabel && "cb-float-button--label-visible"
+      ),
+      "data-tone": tone,
+      "aria-label": label,
+      children: [
+        icon ? /* @__PURE__ */ jsx("span", { className: "cb-float-button__icon", "aria-hidden": "true", children: icon }) : null,
+        visibleLabel ? /* @__PURE__ */ jsx("span", { className: "cb-float-button__label", children: label }) : null
+      ]
+    }
+  );
+});
 var FieldContext = createContext(null);
 function useFieldWiring() {
   return useContext(FieldContext);
@@ -711,32 +755,32 @@ function DatePicker({
         side: "bottom",
         align: "start",
         sideOffset: 6,
-        className: "cb-calendar__positioner",
-        children: /* @__PURE__ */ jsxs(Popover$1.Popup, { className: "cb-calendar", children: [
-          /* @__PURE__ */ jsxs("div", { className: "cb-calendar__head", children: [
+        className: "cb-date-picker-calendar__positioner",
+        children: /* @__PURE__ */ jsxs(Popover$1.Popup, { className: "cb-date-picker-calendar", children: [
+          /* @__PURE__ */ jsxs("div", { className: "cb-date-picker-calendar__head", children: [
             /* @__PURE__ */ jsx(
               "button",
               {
                 type: "button",
-                className: "cb-calendar__nav",
+                className: "cb-date-picker-calendar__nav",
                 "aria-label": labels.previousMonth,
                 onClick: () => setCursor(new Date(cursor.getFullYear(), cursor.getMonth() - 1, 1)),
                 children: /* @__PURE__ */ jsx(ChevronLeft, { size: 16 })
               }
             ),
-            /* @__PURE__ */ jsx("p", { className: "cb-calendar__month", "aria-live": "polite", children: cursor.toLocaleDateString(void 0, { month: "long", year: "numeric" }) }),
+            /* @__PURE__ */ jsx("p", { className: "cb-date-picker-calendar__month", "aria-live": "polite", children: cursor.toLocaleDateString(void 0, { month: "long", year: "numeric" }) }),
             /* @__PURE__ */ jsx(
               "button",
               {
                 type: "button",
-                className: "cb-calendar__nav",
+                className: "cb-date-picker-calendar__nav",
                 "aria-label": labels.nextMonth,
                 onClick: () => setCursor(new Date(cursor.getFullYear(), cursor.getMonth() + 1, 1)),
                 children: /* @__PURE__ */ jsx(ChevronRight, { size: 16 })
               }
             )
           ] }),
-          /* @__PURE__ */ jsxs("table", { className: "cb-calendar__grid", children: [
+          /* @__PURE__ */ jsxs("table", { className: "cb-date-picker-calendar__grid", children: [
             /* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsx("tr", { children: weekdays.map((day) => /* @__PURE__ */ jsx("th", { scope: "col", abbr: day, children: day }, day)) }) }),
             /* @__PURE__ */ jsx("tbody", { children: weeks.map((week, weekIndex) => /* @__PURE__ */ jsx("tr", { children: week.map((cell) => {
               const selected = isSameDay(cell.date, current);
@@ -745,7 +789,7 @@ function DatePicker({
                 "button",
                 {
                   type: "button",
-                  className: "cb-calendar__day",
+                  className: "cb-date-picker-calendar__day",
                   "data-outside": !cell.inMonth || void 0,
                   "data-selected": selected || void 0,
                   "data-today": isSameDay(cell.date, /* @__PURE__ */ new Date()) || void 0,
@@ -1161,130 +1205,1285 @@ function InputNumber({
 function formatValue(value) {
   return value === null ? "" : String(value);
 }
-function Modal({
-  open,
-  defaultOpen,
-  onOpenChange,
-  title,
-  description,
-  children,
-  footer,
-  size = "md",
-  placement = "center",
-  trigger,
-  className
+function box({ width = "100%", height = "1rem", radius = "md", className }) {
+  const style = { "--cb-skeleton-w": width, "--cb-skeleton-h": height };
+  return /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn("cb-skeleton", `cb-radius--${radius}`, className), style });
+}
+function text({ lines = 3, lastLineWidth = "62%", className }) {
+  return /* @__PURE__ */ jsx("span", { className: cn("cb-skeleton-text", className), children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ jsx(SkeletonBox, { height: "0.75rem", width: i === lines - 1 ? lastLineWidth : "100%" }, i)) });
+}
+function circle({ size = "2.5rem", className }) {
+  return /* @__PURE__ */ jsx(SkeletonBox, { width: size, height: size, radius: "full", className });
+}
+var SkeletonBox = box;
+var Skeleton = Object.assign(box, {
+  Text: text,
+  Circle: circle,
+  Rect: box
+});
+function SliderSkeleton({ orientation = "horizontal", range = false, size = "md" }) {
+  return /* @__PURE__ */ jsx("div", { "aria-hidden": "true", className: cn("cb-slider", "cb-slider--skeleton", `cb-slider--${size}`, `cb-slider--${orientation}`, range && "cb-slider--range"), children: /* @__PURE__ */ jsxs("div", { className: "cb-slider__control", children: [
+    /* @__PURE__ */ jsx(Skeleton, { className: "cb-slider__track", radius: "full" }),
+    /* @__PURE__ */ jsx(Skeleton.Circle, { className: "cb-slider__thumb", size: "var(--cb-slider-thumb-size)" }),
+    range ? /* @__PURE__ */ jsx(Skeleton.Circle, { className: "cb-slider__thumb", size: "var(--cb-slider-thumb-size)" }) : null
+  ] }) });
+}
+function SliderComponent(props) {
+  const {
+    label,
+    min = 0,
+    max = 100,
+    step = 1,
+    largeStep,
+    minStepsBetweenValues = 0,
+    motion: motion3 = true,
+    disabled = false,
+    orientation = "horizontal",
+    tone = "brand",
+    size = "md",
+    name,
+    getAriaValueText
+  } = props;
+  const field = useFieldWiring();
+  const range = props.range === true;
+  const value = props.value;
+  const defaultValue = props.defaultValue;
+  validateSlider({ min, max, step, largeStep, minStepsBetweenValues, value, defaultValue, range });
+  const ariaLabel = (index) => {
+    if (!range) return label;
+    return index === 0 ? `Minimum ${label}` : `Maximum ${label}`;
+  };
+  const ariaValueText = getAriaValueText ? (_formattedValue, currentValue, index) => getAriaValueText(currentValue, index) : void 0;
+  const rootClassName = cn(
+    "cb-slider",
+    `cb-slider--${size}`,
+    `cb-slider--${orientation}`,
+    range && "cb-slider--range",
+    !motion3 && "cb-slider--motionless"
+  );
+  const shared = {
+    min,
+    max,
+    step,
+    largeStep,
+    minStepsBetweenValues,
+    disabled,
+    orientation,
+    name,
+    className: rootClassName,
+    "data-tone": tone,
+    "data-invalid": field?.invalid || void 0
+  };
+  const thumbWiring = {
+    "aria-describedby": field?.describedBy,
+    "aria-invalid": field?.invalid || void 0
+  };
+  const thumbInputRef = (first) => (input) => {
+    if (!input) return;
+    if (first && field) input.id = field.controlId;
+    if (field?.describedBy) input.setAttribute("aria-describedby", field.describedBy);
+    else input.removeAttribute("aria-describedby");
+    if (field?.invalid) input.setAttribute("aria-invalid", "true");
+    else input.removeAttribute("aria-invalid");
+  };
+  if (range) {
+    const rangeDefaultValue = defaultValue ?? [min, max];
+    return /* @__PURE__ */ jsxs(
+      Slider$1.Root,
+      {
+        ...shared,
+        value,
+        defaultValue: rangeDefaultValue,
+        onValueChange: (next) => props.onValueChange?.(next),
+        onValueCommitted: (next) => props.onValueCommitted?.(next),
+        children: [
+          /* @__PURE__ */ jsx(SliderTrack, {}),
+          /* @__PURE__ */ jsx(Slider$1.Thumb, { index: 0, className: "cb-slider__thumb", inputRef: thumbInputRef(true), getAriaLabel: ariaLabel, getAriaValueText: ariaValueText, ...thumbWiring }),
+          /* @__PURE__ */ jsx(Slider$1.Thumb, { index: 1, className: "cb-slider__thumb", inputRef: thumbInputRef(false), getAriaLabel: ariaLabel, getAriaValueText: ariaValueText, ...thumbWiring })
+        ]
+      },
+      "range"
+    );
+  }
+  return /* @__PURE__ */ jsxs(
+    Slider$1.Root,
+    {
+      ...shared,
+      value,
+      defaultValue,
+      onValueChange: (next) => props.onValueChange?.(next),
+      onValueCommitted: (next) => props.onValueCommitted?.(next),
+      children: [
+        /* @__PURE__ */ jsx(SliderTrack, {}),
+        /* @__PURE__ */ jsx(Slider$1.Thumb, { className: "cb-slider__thumb", inputRef: thumbInputRef(true), getAriaLabel: ariaLabel, getAriaValueText: ariaValueText, ...thumbWiring })
+      ]
+    },
+    "single"
+  );
+}
+function SliderTrack() {
+  return /* @__PURE__ */ jsx(Slider$1.Control, { className: "cb-slider__control", children: /* @__PURE__ */ jsx(Slider$1.Track, { className: "cb-slider__track", children: /* @__PURE__ */ jsx(Slider$1.Indicator, { className: "cb-slider__indicator" }) }) });
+}
+function validateSlider({
+  min,
+  max,
+  step,
+  largeStep,
+  minStepsBetweenValues,
+  value,
+  defaultValue,
+  range
 }) {
-  return /* @__PURE__ */ jsxs(Dialog.Root, { open, defaultOpen, onOpenChange, children: [
-    trigger ? /* @__PURE__ */ jsx(Dialog.Trigger, { render: trigger }) : null,
-    /* @__PURE__ */ jsxs(Dialog.Portal, { children: [
-      /* @__PURE__ */ jsx(Dialog.Backdrop, { className: "cb-modal__backdrop" }),
-      /* @__PURE__ */ jsxs(
-        Dialog.Popup,
+  if (!Number.isFinite(min) || !Number.isFinite(max) || min >= max) {
+    throw new RangeError("Slider requires finite min and max values where min is less than max.");
+  }
+  if (!Number.isFinite(step) || step <= 0) {
+    throw new RangeError("Slider step must be a finite number greater than zero.");
+  }
+  if (largeStep !== void 0 && (!Number.isFinite(largeStep) || largeStep <= 0)) {
+    throw new RangeError("Slider largeStep must be a finite number greater than zero.");
+  }
+  if (!Number.isInteger(minStepsBetweenValues) || minStepsBetweenValues < 0) {
+    throw new RangeError("Slider minStepsBetweenValues must be a non-negative integer.");
+  }
+  if (range && step * minStepsBetweenValues > max - min) {
+    throw new RangeError("Slider minStepsBetweenValues cannot fit within min and max.");
+  }
+  const candidate = value ?? defaultValue;
+  if (candidate === void 0) return;
+  if (range) {
+    if (!Array.isArray(candidate) || candidate.length !== 2) {
+      throw new RangeError("A range Slider requires exactly two values.");
+    }
+    validateValue(candidate[0], min, max, step);
+    validateValue(candidate[1], min, max, step);
+    if (candidate[0] > candidate[1]) {
+      throw new RangeError("A range Slider requires values in ascending order.");
+    }
+    if (candidate[1] - candidate[0] < step * minStepsBetweenValues) {
+      throw new RangeError("Range Slider values do not satisfy minStepsBetweenValues.");
+    }
+    return;
+  }
+  if (typeof candidate !== "number") {
+    throw new RangeError("A single-value Slider requires one number.");
+  }
+  validateValue(candidate, min, max, step);
+}
+function validateValue(value, min, max, step) {
+  if (!Number.isFinite(value) || value < min || value > max) {
+    throw new RangeError("Slider values must be finite and within min and max.");
+  }
+  if (!isStepAligned(value, min, step)) {
+    throw new RangeError("Slider values must align to step increments from min.");
+  }
+}
+function isStepAligned(value, min, step) {
+  const steps = (value - min) / step;
+  return Math.abs(steps - Math.round(steps)) <= Number.EPSILON * Math.max(1, Math.abs(steps)) * 32;
+}
+var Slider = Object.assign(SliderComponent, { Skeleton: SliderSkeleton });
+function MentionsSkeleton({ rows = 3 }) {
+  return /* @__PURE__ */ jsx("div", { className: "cb-mentions cb-mentions--skeleton", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Skeleton.Text, { lines: rows }) });
+}
+function queryAtCaret(value, caret, trigger) {
+  const prefix = value.slice(0, caret);
+  const triggerIndex = prefix.lastIndexOf(trigger);
+  if (triggerIndex < 0) return null;
+  const beforeTrigger = prefix.slice(0, triggerIndex);
+  const text2 = prefix.slice(triggerIndex + trigger.length);
+  if (beforeTrigger && !/\s$/.test(beforeTrigger) || /\s/.test(text2)) return null;
+  return { start: triggerIndex, end: caret, text: text2 };
+}
+function normalizeTrigger(trigger) {
+  if (Array.from(trigger).length !== 1) {
+    throw new RangeError("Mentions trigger must be exactly one character.");
+  }
+  return trigger;
+}
+function validateOptions(options) {
+  const values = /* @__PURE__ */ new Set();
+  for (const option of options) {
+    if (values.has(option.value)) throw new RangeError("Mentions options require unique values.");
+    values.add(option.value);
+  }
+}
+function matchingOptions(options, query) {
+  if (!query) return [];
+  const needle = query.text.toLocaleLowerCase();
+  return options.filter((option) => (option.searchText ?? option.value).toLocaleLowerCase().includes(needle));
+}
+function MentionsRoot({
+  options,
+  value,
+  defaultValue = "",
+  onValueChange,
+  trigger = "@",
+  separator = " ",
+  placeholder,
+  rows = 3,
+  name,
+  disabled = false,
+  motion: motion3 = true
+}) {
+  const field = useFieldWiring();
+  const listboxId = useId();
+  const normalizedTrigger = normalizeTrigger(trigger);
+  validateOptions(options);
+  const controlled = value !== void 0;
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const text2 = controlled ? value : internalValue;
+  const textareaRef = useRef(null);
+  const anchorRef = useRef(null);
+  const [query, setQuery] = useState(null);
+  const [open, setOpen] = useState(false);
+  const [activeIndex, setActiveIndex] = useState(0);
+  const isComposingRef = useRef(false);
+  const matches = useMemo(() => matchingOptions(options, query), [options, query]);
+  const enabledMatches = useMemo(() => matches.filter((option) => !option.disabled), [matches]);
+  useEffect(() => {
+    setActiveIndex(0);
+  }, [query?.start, query?.text, matches.length]);
+  useEffect(() => {
+    if (!disabled) return;
+    setOpen(false);
+    setQuery(null);
+  }, [disabled]);
+  const updateText = (next) => {
+    if (!controlled) setInternalValue(next);
+    onValueChange?.(next);
+  };
+  const updateQuery = (nextText = text2, caret = textareaRef.current?.selectionStart ?? nextText.length) => {
+    if (disabled || isComposingRef.current) {
+      setQuery(null);
+      setOpen(false);
+      return;
+    }
+    const nextQuery = queryAtCaret(nextText, caret, normalizedTrigger);
+    setQuery(nextQuery);
+    setOpen(Boolean(matchingOptions(options, nextQuery).some((option) => !option.disabled)));
+  };
+  const selectOption = (option) => {
+    if (disabled || !query || option.disabled) return;
+    const inserted = `${normalizedTrigger}${option.value}${separator}`;
+    const next = `${text2.slice(0, query.start)}${inserted}${text2.slice(query.end)}`;
+    const caret = query.start + inserted.length;
+    updateText(next);
+    setQuery(null);
+    setOpen(false);
+    requestAnimationFrame(() => {
+      textareaRef.current?.focus();
+      textareaRef.current?.setSelectionRange(caret, caret);
+    });
+  };
+  const moveActive = (amount) => {
+    if (enabledMatches.length === 0) return;
+    setActiveIndex((current) => (current + amount + enabledMatches.length) % enabledMatches.length);
+  };
+  const handleChange = (event) => {
+    const next = event.target.value;
+    updateText(next);
+    if (disabled || isComposingRef.current) return;
+    const nextQuery = queryAtCaret(next, event.target.selectionStart, normalizedTrigger);
+    setQuery(nextQuery);
+    setOpen(Boolean(nextQuery && options.some((option) => !option.disabled && (option.searchText ?? option.value).toLocaleLowerCase().includes(nextQuery.text.toLocaleLowerCase()))));
+  };
+  const handleKeyDown = (event) => {
+    if (isComposingRef.current || event.nativeEvent.isComposing) return;
+    if (!open) return;
+    if (event.key === "Tab") {
+      setOpen(false);
+    } else if (event.key === "ArrowDown") {
+      event.preventDefault();
+      moveActive(1);
+    } else if (event.key === "ArrowUp") {
+      event.preventDefault();
+      moveActive(-1);
+    } else if (event.key === "Enter") {
+      const active = enabledMatches[activeIndex];
+      if (active) {
+        event.preventDefault();
+        selectOption(active);
+      }
+    } else if (event.key === "Escape") {
+      event.preventDefault();
+      setOpen(false);
+    }
+  };
+  const activeOption = enabledMatches[activeIndex];
+  return /* @__PURE__ */ jsxs(Popover$1.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx("div", { ref: anchorRef, className: `cb-mentions${!motion3 ? " cb-mentions--motionless" : ""}`, "data-disabled": disabled || void 0, children: /* @__PURE__ */ jsx(
+      "textarea",
+      {
+        ref: textareaRef,
+        className: "cb-mentions__textarea",
+        id: field?.controlId,
+        name,
+        value: text2,
+        placeholder,
+        rows,
+        disabled,
+        required: field?.required,
+        "aria-describedby": field?.describedBy,
+        "aria-invalid": field?.invalid || void 0,
+        "aria-autocomplete": "list",
+        "aria-controls": open ? listboxId : void 0,
+        "aria-activedescendant": open && activeOption ? `${listboxId}-option-${matches.indexOf(activeOption)}` : void 0,
+        onChange: handleChange,
+        onSelect: () => updateQuery(),
+        onFocus: () => updateQuery(),
+        onCompositionStart: () => {
+          isComposingRef.current = true;
+          setQuery(null);
+          setOpen(false);
+        },
+        onCompositionEnd: (event) => {
+          isComposingRef.current = false;
+          updateQuery(event.currentTarget.value, event.currentTarget.selectionStart);
+        },
+        onKeyDown: handleKeyDown
+      }
+    ) }),
+    /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(Popover$1.Positioner, { anchor: anchorRef, side: "bottom", align: "start", className: "cb-mentions__positioner", children: /* @__PURE__ */ jsx(Popover$1.Popup, { className: `cb-mentions__popup${!motion3 ? " cb-mentions__popup--motionless" : ""}`, initialFocus: false, finalFocus: false, children: /* @__PURE__ */ jsx("div", { className: "cb-mentions__list", id: listboxId, role: "listbox", "aria-label": "Mention suggestions", children: matches.map((option, matchIndex) => {
+      const index = enabledMatches.indexOf(option);
+      const active = index === activeIndex;
+      return /* @__PURE__ */ jsx(
+        "button",
         {
-          className: cn("cb-modal", `cb-modal--${size}`, `cb-modal--${placement}`, className),
-          children: [
-            /* @__PURE__ */ jsx(Dialog.Title, { className: "cb-modal__title", children: title }),
-            description ? /* @__PURE__ */ jsx(Dialog.Description, { className: "cb-modal__description", children: description }) : null,
-            children ? /* @__PURE__ */ jsx("div", { className: "cb-modal__body", children }) : null,
-            footer ? /* @__PURE__ */ jsx("div", { className: "cb-modal__footer", children: footer }) : null
-          ]
-        }
-      )
-    ] })
+          type: "button",
+          role: "option",
+          id: `${listboxId}-option-${matchIndex}`,
+          className: "cb-mentions__option",
+          disabled: option.disabled,
+          tabIndex: -1,
+          "aria-selected": active,
+          "data-active": active || void 0,
+          onMouseDown: (event) => event.preventDefault(),
+          onClick: () => selectOption(option),
+          children: option.label
+        },
+        `${option.value}-${matchIndex}`
+      );
+    }) }) }) }) })
   ] });
 }
-var DialogClose = Dialog.Close;
-function Drawer({
-  open,
-  defaultOpen,
-  onOpenChange,
-  title,
-  description,
-  children,
-  footer,
-  trigger,
-  className
-}) {
-  return /* @__PURE__ */ jsxs(Dialog.Root, { open, defaultOpen, onOpenChange, children: [
-    trigger ? /* @__PURE__ */ jsx(Dialog.Trigger, { render: trigger }) : null,
-    /* @__PURE__ */ jsxs(Dialog.Portal, { children: [
-      /* @__PURE__ */ jsx(Dialog.Backdrop, { className: "cb-drawer__backdrop" }),
-      /* @__PURE__ */ jsxs(Dialog.Popup, { className: cn("cb-drawer", className), children: [
-        /* @__PURE__ */ jsx(Dialog.Title, { className: "cb-drawer__title", children: title }),
-        description ? /* @__PURE__ */ jsx(Dialog.Description, { className: "cb-drawer__description", children: description }) : null,
-        children ? /* @__PURE__ */ jsx("div", { className: "cb-drawer__body", children }) : null,
-        footer ? /* @__PURE__ */ jsx("div", { className: "cb-drawer__footer", children: footer }) : null
-      ] })
-    ] })
+var Mentions = Object.assign(MentionsRoot, { Skeleton: MentionsSkeleton });
+function TransferSkeleton({ items = 4 }) {
+  return /* @__PURE__ */ jsxs("div", { className: "cb-transfer cb-transfer--skeleton", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx(TransferSkeletonList, { items }),
+    /* @__PURE__ */ jsxs("div", { className: "cb-transfer__actions", children: [
+      /* @__PURE__ */ jsx("span", { className: "cb-skeleton cb-transfer__skeleton-action" }),
+      /* @__PURE__ */ jsx("span", { className: "cb-skeleton cb-transfer__skeleton-action" })
+    ] }),
+    /* @__PURE__ */ jsx(TransferSkeletonList, { items })
   ] });
 }
-var DrawerClose = Dialog.Close;
-
-// src/overlay/command.util.ts
-function rankCommand(command, query) {
-  const needle = query.trim().toLowerCase();
-  if (!needle) return 1;
-  const label = command.label.toLowerCase();
-  if (label === needle) return 100;
-  if (label.startsWith(needle)) return 80;
-  if (label.split(/\s+/).some((word) => word.startsWith(needle))) return 60;
-  if (label.includes(needle)) return 40;
-  if (command.keywords?.some((keyword) => keyword.toLowerCase().includes(needle))) return 20;
-  return 0;
+function TransferSkeletonList({ items }) {
+  return /* @__PURE__ */ jsxs("div", { className: "cb-transfer__list", children: [
+    /* @__PURE__ */ jsx(Skeleton, { className: "cb-transfer__skeleton-title" }),
+    /* @__PURE__ */ jsx("ul", { className: "cb-transfer__items", children: Array.from({ length: items }, (_, index) => /* @__PURE__ */ jsxs("li", { className: "cb-transfer__item", children: [
+      /* @__PURE__ */ jsx("span", { className: "cb-skeleton cb-transfer__skeleton-checkbox" }),
+      /* @__PURE__ */ jsx(Skeleton, { className: "cb-transfer__skeleton-label" })
+    ] }, index)) })
+  ] });
 }
-function filterCommands(commands, query) {
-  return commands.map((command, index) => ({ command, score: rankCommand(command, query), index })).filter((entry) => entry.score > 0).sort((a, b) => b.score === a.score ? a.index - b.index : b.score - a.score).map((entry) => entry.command);
+function normalizeTargetKeys(items, keys) {
+  const itemKeys = new Set(items.map((item) => item.key));
+  const seen = /* @__PURE__ */ new Set();
+  return keys.filter((key) => itemKeys.has(key) && !seen.has(key) && (seen.add(key), true));
 }
-function groupCommands(commands) {
-  const groups = [];
-  for (const command of commands) {
-    const existing = groups.find((entry) => entry.group === command.group);
-    if (existing) existing.items.push(command);
-    else groups.push({ group: command.group, items: [command] });
+function validateItemKeys(items) {
+  const seen = /* @__PURE__ */ new Set();
+  for (const item of items) {
+    if (seen.has(item.key)) throw new RangeError(`Transfer item keys must be unique: ${item.key}`);
+    seen.add(item.key);
   }
-  return groups;
 }
-function CommandPalette({
-  open,
-  onOpenChange,
-  commands,
-  placeholder = "Type a command\u2026",
-  emptyMessage = "No matching command",
-  className
+function TransferRoot({
+  items,
+  targetKeys,
+  defaultTargetKeys = [],
+  onTargetKeysChange,
+  sourceTitle = "Available",
+  targetTitle = "Selected",
+  disabled = false,
+  "aria-label": ariaLabel = "Transfer items"
 }) {
-  const [query, setQuery] = useState("");
-  const [active, setActive] = useState(0);
-  const results = useMemo(() => filterCommands(commands, query), [commands, query]);
-  const groups = useMemo(() => groupCommands(results), [results]);
+  validateItemKeys(items);
+  const generatedId = useId();
+  const controlled = targetKeys !== void 0;
+  const [internalTargetKeys, setInternalTargetKeys] = useState(() => normalizeTargetKeys(items, defaultTargetKeys));
+  const [sourceSelection, setSourceSelection] = useState(() => /* @__PURE__ */ new Set());
+  const [targetSelection, setTargetSelection] = useState(() => /* @__PURE__ */ new Set());
+  const assignedKeys = normalizeTargetKeys(items, controlled ? targetKeys ?? [] : internalTargetKeys);
+  const assigned = useMemo(() => new Set(assignedKeys), [assignedKeys]);
+  const sourceItems = items.filter((item) => !assigned.has(item.key));
+  const targetItems = items.filter((item) => assigned.has(item.key));
   useEffect(() => {
-    if (!open) {
-      setQuery("");
-      setActive(0);
-    }
-  }, [open]);
-  useEffect(() => setActive(0), [query]);
-  const run = (command) => {
-    onOpenChange(false);
-    command.onRun();
+    const sourceKeys = new Set(sourceItems.map((item) => item.key));
+    const targetKeys2 = new Set(targetItems.map((item) => item.key));
+    setSourceSelection((previous) => intersection(previous, sourceKeys));
+    setTargetSelection((previous) => intersection(previous, targetKeys2));
+  }, [sourceItems, targetItems]);
+  const updateAssignment = (next) => {
+    if (!controlled) setInternalTargetKeys(next);
+    onTargetKeysChange?.(next);
   };
-  return /* @__PURE__ */ jsx(Dialog.Root, { open, onOpenChange, children: /* @__PURE__ */ jsxs(Dialog.Portal, { children: [
-    /* @__PURE__ */ jsx(Dialog.Backdrop, { className: "cb-palette__backdrop" }),
-    /* @__PURE__ */ jsxs(Dialog.Popup, { className: cn("cb-palette", className), "aria-label": "Command palette", children: [
-      /* @__PURE__ */ jsxs("div", { className: "cb-palette__search", children: [
-        /* @__PURE__ */ jsx(Search, { size: 16, className: "cb-palette__search-icon" }),
+  const toggle = (key, side, checked) => {
+    const setSelection = side === "source" ? setSourceSelection : setTargetSelection;
+    setSelection((previous) => {
+      const next = new Set(previous);
+      if (checked) next.add(key);
+      else next.delete(key);
+      return next;
+    });
+  };
+  const movable = (list, selected) => list.filter((item) => selected.has(item.key) && !item.disabled).map((item) => item.key);
+  const moveToTarget = () => {
+    if (disabled) return;
+    const moving = movable(sourceItems, sourceSelection);
+    if (moving.length === 0) return;
+    updateAssignment([...assignedKeys, ...moving]);
+    if (!controlled) setSourceSelection((previous) => without(previous, moving));
+  };
+  const moveToSource = () => {
+    if (disabled) return;
+    const moving = movable(targetItems, targetSelection);
+    if (moving.length === 0) return;
+    const movingSet = new Set(moving);
+    updateAssignment(assignedKeys.filter((key) => !movingSet.has(key)));
+    if (!controlled) setTargetSelection((previous) => without(previous, moving));
+  };
+  const movableSource = movable(sourceItems, sourceSelection);
+  const movableTarget = movable(targetItems, targetSelection);
+  return /* @__PURE__ */ jsxs("section", { className: "cb-transfer", "aria-label": ariaLabel, "data-disabled": disabled || void 0, children: [
+    /* @__PURE__ */ jsx(
+      TransferList,
+      {
+        id: `${generatedId}-source`,
+        title: sourceTitle,
+        items: sourceItems,
+        selection: sourceSelection,
+        disabled,
+        onToggle: (key, checked) => toggle(key, "source", checked)
+      }
+    ),
+    /* @__PURE__ */ jsxs("div", { className: "cb-transfer__actions", "aria-label": "Transfer actions", children: [
+      /* @__PURE__ */ jsx("button", { type: "button", className: "cb-transfer__action", onClick: moveToTarget, disabled: disabled || movableSource.length === 0, "aria-label": "Move selected to target", children: "\u2192" }),
+      /* @__PURE__ */ jsx("button", { type: "button", className: "cb-transfer__action", onClick: moveToSource, disabled: disabled || movableTarget.length === 0, "aria-label": "Move selected to source", children: "\u2190" })
+    ] }),
+    /* @__PURE__ */ jsx(
+      TransferList,
+      {
+        id: `${generatedId}-target`,
+        title: targetTitle,
+        items: targetItems,
+        selection: targetSelection,
+        disabled,
+        onToggle: (key, checked) => toggle(key, "target", checked)
+      }
+    )
+  ] });
+}
+function without(previous, keys) {
+  const next = new Set(previous);
+  keys.forEach((key) => next.delete(key));
+  return next;
+}
+function intersection(previous, valid) {
+  const next = new Set([...previous].filter((key) => valid.has(key)));
+  return next.size === previous.size ? previous : next;
+}
+function TransferList({
+  id,
+  title,
+  items,
+  selection,
+  disabled,
+  onToggle
+}) {
+  return /* @__PURE__ */ jsxs("fieldset", { className: "cb-transfer__list", disabled, children: [
+    /* @__PURE__ */ jsx("legend", { className: "cb-transfer__title", children: title }),
+    /* @__PURE__ */ jsx("span", { className: "cb-transfer__count", "aria-live": "polite", children: items.length }),
+    /* @__PURE__ */ jsx("ul", { className: "cb-transfer__items", children: items.map((item) => {
+      const itemId = `${id}-${encodeURIComponent(item.key)}`;
+      const descriptionId = item.description ? `${itemId}-description` : void 0;
+      return /* @__PURE__ */ jsxs("li", { className: "cb-transfer__item", "data-disabled": item.disabled || void 0, children: [
         /* @__PURE__ */ jsx(
           "input",
           {
-            className: "cb-palette__input",
-            value: query,
-            placeholder,
-            autoFocus: true,
-            role: "combobox",
-            "aria-expanded": true,
-            "aria-controls": "cb-palette-list",
-            "aria-activedescendant": results[active] ? `cb-palette-${results[active].id}` : void 0,
-            onChange: (event) => setQuery(event.target.value),
-            onKeyDown: (event) => {
+            id: itemId,
+            className: "cb-transfer__checkbox",
+            type: "checkbox",
+            checked: selection.has(item.key),
+            disabled: item.disabled,
+            "aria-describedby": descriptionId,
+            onChange: (event) => onToggle(item.key, event.target.checked)
+          }
+        ),
+        /* @__PURE__ */ jsxs("span", { className: "cb-transfer__content", children: [
+          /* @__PURE__ */ jsx("label", { className: "cb-transfer__label", htmlFor: itemId, children: /* @__PURE__ */ jsx("span", { children: item.label }) }),
+          item.description ? /* @__PURE__ */ jsx("span", { className: "cb-transfer__description", id: descriptionId, children: item.description }) : null
+        ] })
+      ] }, item.key);
+    }) })
+  ] });
+}
+var Transfer = Object.assign(TransferRoot, { Skeleton: TransferSkeleton });
+function TreeSkeleton({ items = 5, size = "md", tone = "brand", "aria-label": ariaLabel = "Loading tree" }) {
+  return /* @__PURE__ */ jsx("div", { role: "tree", "aria-label": ariaLabel, "aria-hidden": "true", className: cn("cb-tree", `cb-tree--${size}`, `cb-tree--${tone}`, "cb-tree--skeleton"), children: /* @__PURE__ */ jsx("div", { role: "group", className: "cb-tree__group", children: Array.from({ length: items }, (_, index) => /* @__PURE__ */ jsx("div", { className: "cb-tree__node", children: /* @__PURE__ */ jsx(Skeleton, { className: cn("cb-tree__skeleton-line", index % 3 === 0 && "cb-tree__skeleton-line--long") }) }, index)) }) });
+}
+function TreeRoot({
+  nodes,
+  expandedPaths,
+  defaultExpandedPaths = [],
+  onExpandedPathsChange,
+  selectedPath,
+  defaultSelectedPath,
+  onSelectedPathChange,
+  size = "md",
+  tone = "brand",
+  motion: motion3 = true,
+  "aria-label": ariaLabel = "Tree"
+}) {
+  validateTreeNodes(nodes);
+  const [uncontrolledExpandedPaths, setUncontrolledExpandedPaths] = useState(defaultExpandedPaths);
+  const [uncontrolledSelectedPath, setUncontrolledSelectedPath] = useState(defaultSelectedPath);
+  const currentExpandedPaths = expandedPaths ?? uncontrolledExpandedPaths;
+  const currentSelectedPath = selectedPath ?? uncontrolledSelectedPath;
+  const visibleNodes = useMemo(() => flattenVisible(nodes, currentExpandedPaths), [nodes, currentExpandedPaths]);
+  const firstEnabledPath = visibleNodes.find(({ node }) => !node.disabled)?.path;
+  const [activePath, setActivePath] = useState(() => selectedPath ?? defaultSelectedPath ?? firstEnabledPath);
+  const currentActivePath = visibleNodes.some(({ path, node }) => path === activePath && !node.disabled) ? activePath : firstEnabledPath;
+  useEffect(() => {
+    if (selectedPath && visibleNodes.some(({ path, node }) => path === selectedPath && !node.disabled)) {
+      setActivePath(selectedPath);
+    }
+  }, [selectedPath]);
+  const itemRefs = useRef(/* @__PURE__ */ new Map());
+  const setExpanded = (next) => {
+    if (expandedPaths === void 0) setUncontrolledExpandedPaths(next);
+    onExpandedPathsChange?.(next);
+  };
+  const expand = (path) => {
+    if (!currentExpandedPaths.includes(path)) setExpanded([...currentExpandedPaths, path]);
+  };
+  const collapse = (path) => {
+    if (currentExpandedPaths.includes(path)) setExpanded(currentExpandedPaths.filter((item) => item !== path));
+  };
+  const select = (path) => {
+    if (selectedPath === void 0) setUncontrolledSelectedPath(path);
+    onSelectedPathChange?.(path);
+  };
+  const focusPath = (path) => {
+    setActivePath(path);
+    itemRefs.current.get(path)?.focus();
+  };
+  const onKeyDown = (event, current) => {
+    const enabled = visibleNodes.filter(({ node }) => !node.disabled);
+    const currentIndex = enabled.findIndex(({ path }) => path === current.path);
+    const currentExpanded = currentExpandedPaths.includes(current.path);
+    const child = enabled.find(({ parentPath }) => parentPath === current.path);
+    if (event.key === "ArrowDown" && currentIndex < enabled.length - 1) {
+      event.preventDefault();
+      focusPath(enabled[currentIndex + 1].path);
+    } else if (event.key === "ArrowUp" && currentIndex > 0) {
+      event.preventDefault();
+      focusPath(enabled[currentIndex - 1].path);
+    } else if (event.key === "Home" && enabled[0]) {
+      event.preventDefault();
+      focusPath(enabled[0].path);
+    } else if (event.key === "End" && enabled.at(-1)) {
+      event.preventDefault();
+      focusPath(enabled.at(-1).path);
+    } else if (event.key === "ArrowRight" && current.hasChildren) {
+      event.preventDefault();
+      if (!currentExpanded) expand(current.path);
+      else if (child) focusPath(child.path);
+    } else if (event.key === "ArrowLeft") {
+      if (current.hasChildren && currentExpanded) {
+        event.preventDefault();
+        collapse(current.path);
+      } else if (current.parentPath) {
+        event.preventDefault();
+        const parent = nearestEnabledParent(current.parentPath, visibleNodes);
+        if (parent) focusPath(parent);
+      }
+    } else if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      select(current.path);
+    }
+  };
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      role: "tree",
+      "aria-label": ariaLabel,
+      className: cn("cb-tree", `cb-tree--${size}`, `cb-tree--${tone}`, !motion3 && "cb-tree--motion-off"),
+      children: /* @__PURE__ */ jsx(
+        TreeGroup,
+        {
+          nodes,
+          pathParts: [],
+          root: true,
+          level: 1,
+          parentPath: void 0,
+          expandedPaths: currentExpandedPaths,
+          selectedPath: currentSelectedPath,
+          activePath: currentActivePath,
+          refs: itemRefs,
+          onFocusPath: focusPath,
+          onSelect: select,
+          onKeyDown
+        }
+      )
+    }
+  );
+}
+function TreeGroup({ nodes, pathParts, root = false, level, parentPath, expandedPaths, selectedPath, activePath, refs, onFocusPath, onSelect, onKeyDown }) {
+  return /* @__PURE__ */ jsx("div", { role: root ? void 0 : "group", className: "cb-tree__group", children: nodes.map((node) => {
+    const parts = [...pathParts, node.key];
+    const path = toPath(parts);
+    const hasChildren = Boolean(node.children?.length);
+    const expanded = expandedPaths.includes(path);
+    const current = { node, path, parentPath, level, hasChildren };
+    return /* @__PURE__ */ jsxs("div", { className: "cb-tree__node", children: [
+      /* @__PURE__ */ jsxs(
+        "div",
+        {
+          ref: (element) => {
+            if (element) refs.current.set(path, element);
+            else refs.current.delete(path);
+          },
+          role: "treeitem",
+          "aria-level": level,
+          "aria-expanded": hasChildren ? expanded : void 0,
+          "aria-selected": selectedPath === path || void 0,
+          "aria-disabled": node.disabled || void 0,
+          tabIndex: !node.disabled && activePath === path ? 0 : -1,
+          className: "cb-tree__item",
+          "data-selected": selectedPath === path || void 0,
+          "data-disabled": node.disabled || void 0,
+          onFocus: () => onFocusPath(path),
+          onClick: () => {
+            if (!node.disabled) onSelect(path);
+          },
+          onKeyDown: (event) => onKeyDown(event, current),
+          children: [
+            hasChildren ? /* @__PURE__ */ jsx(TreeChevron, { expanded }) : /* @__PURE__ */ jsx("span", { className: "cb-tree__indent", "aria-hidden": "true" }),
+            /* @__PURE__ */ jsx("span", { className: "cb-tree__label", children: node.label }),
+            node.content ? /* @__PURE__ */ jsx("span", { className: "cb-tree__content", children: node.content }) : null
+          ]
+        }
+      ),
+      hasChildren && expanded ? /* @__PURE__ */ jsx(
+        TreeGroup,
+        {
+          nodes: node.children,
+          pathParts: parts,
+          level: level + 1,
+          parentPath: path,
+          expandedPaths,
+          selectedPath,
+          activePath,
+          refs,
+          onFocusPath,
+          onSelect,
+          onKeyDown
+        }
+      ) : null
+    ] }, path);
+  }) });
+}
+function TreeChevron({ expanded }) {
+  return /* @__PURE__ */ jsxs("span", { className: "cb-tree__chevrons", "aria-hidden": "true", "data-expanded": expanded || void 0, children: [
+    /* @__PURE__ */ jsx(ChevronRight, { className: "cb-tree__chevron cb-tree__chevron--collapsed" }),
+    /* @__PURE__ */ jsx(ChevronDown, { className: "cb-tree__chevron cb-tree__chevron--expanded" })
+  ] });
+}
+function flattenVisible(nodes, expandedPaths, pathParts = [], level = 1, parentPath) {
+  return nodes.flatMap((node) => {
+    const parts = [...pathParts, node.key];
+    const path = toPath(parts);
+    const hasChildren = Boolean(node.children?.length);
+    const current = { node, path, parentPath, level, hasChildren };
+    const children = hasChildren && expandedPaths.includes(path) ? flattenVisible(node.children, expandedPaths, parts, level + 1, path) : [];
+    return [current, ...children];
+  });
+}
+function toPath(parts) {
+  return parts.map(encodeURIComponent).join("/");
+}
+function nearestEnabledParent(path, visibleNodes) {
+  let candidate = visibleNodes.find((node) => node.path === path);
+  while (candidate && candidate.node.disabled) {
+    candidate = candidate.parentPath ? visibleNodes.find((node) => node.path === candidate.parentPath) : void 0;
+  }
+  return candidate?.path;
+}
+function validateTreeNodes(nodes, path = []) {
+  const siblingKeys = /* @__PURE__ */ new Set();
+  for (const node of nodes) {
+    if (siblingKeys.has(node.key)) {
+      const location = [...path, node.key].join(" / ") || node.key;
+      throw new Error(`Tree requires unique sibling keys; duplicate key at ${location}.`);
+    }
+    siblingKeys.add(node.key);
+    if (node.children?.length) validateTreeNodes(node.children, [...path, node.key]);
+  }
+}
+var Tree = Object.assign(TreeRoot, { Skeleton: TreeSkeleton });
+function TreeSelectSkeleton({ size = "md" }) {
+  return /* @__PURE__ */ jsx(Skeleton, { className: `cb-tree-select cb-tree-select--${size} cb-tree-select--skeleton` });
+}
+function TreeSelectRoot({ nodes, value, defaultValue = null, onValueChange, open, defaultOpen = false, onOpenChange, label, placeholder = "Select\u2026", name, disabled = false, motion: motion3 = true }) {
+  const field = useFieldWiring();
+  const generatedId = useId();
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const currentValue = value !== void 0 ? value : internalValue;
+  const currentOpen = open ?? internalOpen;
+  const effectiveOpen = disabled ? false : currentOpen;
+  const selectedLabel = currentValue ? labelForPath(nodes, currentValue) : void 0;
+  const setOpen = (next) => {
+    if (open === void 0) setInternalOpen(next);
+    onOpenChange?.(next);
+  };
+  const select = (path) => {
+    if (value === void 0) setInternalValue(path);
+    onValueChange?.(path);
+    setOpen(false);
+  };
+  useEffect(() => {
+    if (disabled && currentOpen) setOpen(false);
+  }, [disabled, currentOpen]);
+  return /* @__PURE__ */ jsxs(Popover$1.Root, { open: effectiveOpen, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsx(
+      Popover$1.Trigger,
+      {
+        disabled,
+        render: /* @__PURE__ */ jsxs("button", { type: "button", id: field?.controlId ?? generatedId, className: cn("cb-tree-select", !motion3 && "cb-tree-select--motionless"), "aria-label": label, "aria-describedby": field?.describedBy, "aria-invalid": field?.invalid || void 0, "aria-required": field?.required || void 0, children: [
+          /* @__PURE__ */ jsx("span", { className: cn("cb-tree-select__value", !selectedLabel && "cb-tree-select__placeholder"), children: selectedLabel ?? placeholder }),
+          /* @__PURE__ */ jsx(ChevronsUpDown, { className: "cb-tree-select__icon", "aria-hidden": "true" })
+        ] })
+      }
+    ),
+    name && currentValue ? /* @__PURE__ */ jsx("input", { type: "hidden", name, value: currentValue }) : null,
+    /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(Popover$1.Positioner, { side: "bottom", align: "start", className: "cb-tree-select__positioner", children: /* @__PURE__ */ jsx(Popover$1.Popup, { className: cn("cb-tree-select__popup", !motion3 && "cb-tree-select__popup--motionless"), children: /* @__PURE__ */ jsx(Tree, { nodes, selectedPath: currentValue ?? void 0, onSelectedPathChange: select, motion: motion3, "aria-label": `${label} options` }) }) }) })
+  ] });
+}
+function labelForPath(nodes, path, parts = []) {
+  for (const node of nodes) {
+    const next = [...parts, node.key];
+    const nodePath = next.map(encodeURIComponent).join("/");
+    if (nodePath === path) return node.label;
+    const found = node.children ? labelForPath(node.children, path, next) : void 0;
+    if (found) return found;
+  }
+  return void 0;
+}
+var TreeSelect = Object.assign(TreeSelectRoot, { Skeleton: TreeSelectSkeleton });
+function CascaderSkeleton({ rows = 3 }) {
+  return /* @__PURE__ */ jsxs("div", { className: "cb-cascader cb-cascader--skeleton", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx(Skeleton, { className: "cb-cascader__skeleton-label" }),
+    /* @__PURE__ */ jsx(ChevronPlaceholder, {}),
+    /* @__PURE__ */ jsx("div", { className: "cb-cascader__skeleton-menu", children: Array.from({ length: rows }, (_, index) => /* @__PURE__ */ jsx(Skeleton, { height: "var(--cb-control-height-sm)" }, index)) })
+  ] });
+}
+function ChevronPlaceholder() {
+  return /* @__PURE__ */ jsx(Skeleton.Circle, { size: "var(--cb-space-4)" });
+}
+function firstEnabledKey(options) {
+  return options.find((option) => !option.disabled)?.key;
+}
+function findOption(options, key) {
+  return options.find((option) => option.key === key);
+}
+function isLeafPath(options, path) {
+  let current = options;
+  for (const key of path) {
+    const option = findOption(current, key);
+    if (!option || option.disabled) return false;
+    current = option.children ?? [];
+  }
+  return path.length > 0 && current.length === 0;
+}
+function labelsForPath(options, path) {
+  const labels = [];
+  let current = options;
+  for (const key of path) {
+    const option = findOption(current, key);
+    if (!option) return [];
+    labels.push(option.label);
+    current = option.children ?? [];
+  }
+  return labels;
+}
+function validateOptions2(options, ancestors = []) {
+  const keys = /* @__PURE__ */ new Set();
+  for (const option of options) {
+    if (keys.has(option.key)) throw new Error(`Cascader requires unique sibling keys; duplicate key at ${[...ancestors, option.key].join(" / ")}.`);
+    keys.add(option.key);
+    if (option.children?.length) validateOptions2(option.children, [...ancestors, option.key]);
+  }
+}
+function columnsForPath(options, path) {
+  const columns = [];
+  let current = options;
+  for (let index = 0; current.length > 0; index += 1) {
+    const activeKey = findOption(current, path[index]) && !findOption(current, path[index]).disabled ? path[index] : firstEnabledKey(current);
+    if (!activeKey) break;
+    columns.push({ options: current, activeKey });
+    if (index >= path.length - 1) break;
+    const active = findOption(current, activeKey);
+    current = active?.children ?? [];
+  }
+  return columns;
+}
+function optionId(popupId, path) {
+  const encodedPath = path.map((key) => encodeURIComponent(key)).join("--");
+  return `${popupId}-option-${encodedPath}`;
+}
+function CascaderRoot({
+  options,
+  label,
+  value,
+  defaultValue = [],
+  onValueChange,
+  placeholder = "Select\u2026",
+  disabled = false,
+  motion: motion3 = true
+}) {
+  validateOptions2(options);
+  if (label.trim().length === 0) throw new Error("Cascader label must not be empty.");
+  const field = useFieldWiring();
+  const popupId = useId();
+  const triggerRef = useRef(null);
+  const controlled = value !== void 0;
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const selectedPath = controlled ? value : internalValue;
+  const [open, setOpen] = useState(false);
+  const [activePath, setActivePath] = useState([]);
+  const [activeColumn, setActiveColumn] = useState(0);
+  const columns = useMemo(() => columnsForPath(options, activePath), [options, activePath]);
+  const selectedLabels = labelsForPath(options, selectedPath);
+  useEffect(() => {
+    if (disabled) setOpen(false);
+  }, [disabled]);
+  const initialize = () => {
+    const initialPath = isLeafPath(options, selectedPath) ? selectedPath : [firstEnabledKey(options)].filter((key) => Boolean(key));
+    setActivePath(initialPath);
+    setActiveColumn(Math.max(0, initialPath.length - 1));
+  };
+  const openPopup = () => {
+    if (disabled) return;
+    initialize();
+    setOpen(true);
+  };
+  const updatePathAtColumn = (columnIndex, key) => {
+    setActivePath((current) => [...current.slice(0, columnIndex), key]);
+    setActiveColumn(columnIndex);
+  };
+  const choose = (path) => {
+    if (disabled || !isLeafPath(options, path)) return;
+    if (!controlled) setInternalValue(path);
+    onValueChange?.(path);
+    setOpen(false);
+    requestAnimationFrame(() => triggerRef.current?.focus());
+  };
+  const currentColumn = columns[activeColumn];
+  const currentOption = currentColumn ? findOption(currentColumn.options, currentColumn.activeKey) : void 0;
+  const activeOptionId = open && currentColumn ? optionId(popupId, [...activePath.slice(0, activeColumn), currentColumn.activeKey]) : void 0;
+  const handleKeyDown = (event) => {
+    if (disabled) return;
+    if (!open && (event.key === "ArrowDown" || event.key === "Enter" || event.key === " ")) {
+      event.preventDefault();
+      openPopup();
+      return;
+    }
+    if (!open) return;
+    if (event.key === "Escape") {
+      event.preventDefault();
+      setOpen(false);
+    } else if ((event.key === "ArrowDown" || event.key === "ArrowUp") && currentColumn) {
+      event.preventDefault();
+      const enabled = currentColumn.options.filter((option) => !option.disabled);
+      const index = enabled.findIndex((option) => option.key === currentColumn.activeKey);
+      if (enabled.length > 0) updatePathAtColumn(activeColumn, enabled[(index + (event.key === "ArrowDown" ? 1 : -1) + enabled.length) % enabled.length].key);
+    } else if (event.key === "ArrowRight" && currentOption?.children?.length) {
+      event.preventDefault();
+      const childKey = firstEnabledKey(currentOption.children);
+      if (childKey) {
+        setActivePath((current) => [...current.slice(0, activeColumn + 1), childKey]);
+        setActiveColumn(activeColumn + 1);
+      }
+    } else if (event.key === "ArrowLeft" && activeColumn > 0) {
+      event.preventDefault();
+      setActivePath((current) => current.slice(0, activeColumn));
+      setActiveColumn(activeColumn - 1);
+    } else if (event.key === "Enter" && currentOption && !currentOption.children?.length) {
+      event.preventDefault();
+      choose(activePath.slice(0, activeColumn + 1));
+    }
+  };
+  return /* @__PURE__ */ jsxs(Popover$1.Root, { open, onOpenChange: setOpen, children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        ref: triggerRef,
+        type: "button",
+        role: "combobox",
+        className: `cb-cascader${!motion3 ? " cb-cascader--motionless" : ""}`,
+        id: field?.controlId,
+        disabled,
+        "aria-describedby": field?.describedBy,
+        "aria-label": label,
+        "aria-invalid": field?.invalid || void 0,
+        "aria-required": field?.required || void 0,
+        "aria-haspopup": "dialog",
+        "aria-expanded": open,
+        "aria-controls": open ? popupId : void 0,
+        "aria-activedescendant": activeOptionId,
+        onClick: openPopup,
+        onKeyDown: handleKeyDown,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "cb-cascader__value", children: selectedLabels.length ? selectedLabels.map((label2, index) => /* @__PURE__ */ jsxs("span", { children: [
+            index ? " / " : null,
+            label2
+          ] }, index)) : placeholder }),
+          /* @__PURE__ */ jsx(ChevronDown, { className: "cb-cascader__icon", "aria-hidden": "true" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(Popover$1.Positioner, { anchor: triggerRef, side: "bottom", align: "start", className: "cb-cascader__positioner", children: /* @__PURE__ */ jsx(Popover$1.Popup, { id: popupId, "aria-label": "Cascader options", className: `cb-cascader__popup${!motion3 ? " cb-cascader__popup--motionless" : ""}`, initialFocus: false, finalFocus: false, children: /* @__PURE__ */ jsx("div", { className: "cb-cascader__columns", "aria-label": "Cascader options", children: columns.map((column, columnIndex) => /* @__PURE__ */ jsx("div", { className: "cb-cascader__column", role: "listbox", "aria-label": `Level ${columnIndex + 1}`, children: column.options.map((option) => {
+      const active = option.key === column.activeKey;
+      const hasChildren = Boolean(option.children?.length);
+      const path = [...activePath.slice(0, columnIndex), option.key];
+      return /* @__PURE__ */ jsxs(
+        "button",
+        {
+          type: "button",
+          role: "option",
+          id: optionId(popupId, path),
+          tabIndex: -1,
+          className: "cb-cascader__option",
+          disabled: option.disabled,
+          "aria-selected": active,
+          "data-active": active || void 0,
+          "data-branch": hasChildren || void 0,
+          onMouseDown: (event) => event.preventDefault(),
+          onClick: () => {
+            if (option.disabled) return;
+            if (hasChildren) {
+              const child = firstEnabledKey(option.children);
+              if (child) {
+                setActivePath([...path, child]);
+                setActiveColumn(columnIndex + 1);
+              }
+            } else choose(path);
+          },
+          children: [
+            /* @__PURE__ */ jsx("span", { className: "cb-cascader__option-label", children: option.label }),
+            hasChildren ? /* @__PURE__ */ jsx(ChevronRight, { className: "cb-cascader__option-icon", "aria-hidden": "true" }) : null
+          ]
+        },
+        option.key
+      );
+    }) }, columnIndex)) }) }) }) })
+  ] });
+}
+var Cascader = Object.assign(CascaderRoot, { Skeleton: CascaderSkeleton });
+function ColorPickerSkeleton() {
+  return /* @__PURE__ */ jsx("div", { className: "cb-color-picker cb-color-picker--skeleton", "aria-hidden": "true", children: /* @__PURE__ */ jsx(Skeleton, { className: "cb-color-picker__skeleton" }) });
+}
+var CORE_OPTIONS = [
+  { tone: "neutral", label: "Neutral" },
+  { tone: "brand", label: "Brand" },
+  { tone: "success", label: "Success" },
+  { tone: "warning", label: "Warning" },
+  { tone: "danger", label: "Danger" },
+  { tone: "info", label: "Info" }
+];
+function validateOptions3(options) {
+  if (options.length === 0) throw new RangeError("ColorPicker options must not be empty.");
+  const tones = /* @__PURE__ */ new Set();
+  options.forEach((option) => {
+    if (tones.has(option.tone)) throw new RangeError(`ColorPicker option tones must be unique: ${option.tone}`);
+    tones.add(option.tone);
+  });
+  if (!options.some((option) => !option.disabled)) throw new RangeError("ColorPicker options must include an enabled tone.");
+}
+function ColorPickerRoot({ label, value, defaultValue = "brand", onValueChange, open, defaultOpen, onOpenChange, options = CORE_OPTIONS, name, disabled = false, motion: motion3 = true }) {
+  validateOptions3(options);
+  if (label.trim().length === 0) throw new RangeError("ColorPicker label must not be empty.");
+  const field = useFieldWiring();
+  const controlledValue = value !== void 0;
+  const [internalValue, setInternalValue] = useState(defaultValue);
+  const selected = controlledValue ? value : internalValue;
+  if (!options.some((option) => option.tone === selected && !option.disabled)) throw new RangeError(`ColorPicker value must match an enabled option: ${selected}`);
+  const controlledOpen = open !== void 0;
+  const [internalOpen, setInternalOpen] = useState(defaultOpen ?? false);
+  const expanded = controlledOpen ? open : internalOpen;
+  const effectiveExpanded = disabled ? false : expanded;
+  const [activeIndex, setActiveIndex] = useState(() => Math.max(0, options.findIndex((option) => option.tone === selected && !option.disabled)));
+  const optionRefs = useRef([]);
+  const enabled = useMemo(() => options.map((option, index) => ({ option, index })).filter(({ option }) => !option.disabled), [options]);
+  useEffect(() => {
+    const selectedIndex = options.findIndex((option) => option.tone === selected && !option.disabled);
+    if (selectedIndex >= 0) setActiveIndex(selectedIndex);
+  }, [options, selected]);
+  useEffect(() => {
+    if (disabled && expanded) {
+      if (!controlledOpen) setInternalOpen(false);
+      onOpenChange?.(false);
+    }
+  }, [controlledOpen, disabled, expanded, onOpenChange]);
+  const changeOpen = (next) => {
+    if (!controlledOpen) setInternalOpen(next);
+    onOpenChange?.(next);
+  };
+  const select = (tone) => {
+    if (disabled) return;
+    if (!controlledValue) setInternalValue(tone);
+    onValueChange?.(tone);
+    changeOpen(false);
+  };
+  const move = (amount) => {
+    if (enabled.length === 0) return;
+    const current = enabled.findIndex(({ index }) => index === activeIndex);
+    const next = enabled[(Math.max(0, current) + amount + enabled.length) % enabled.length].index;
+    setActiveIndex(next);
+    optionRefs.current[next]?.focus();
+  };
+  const handleGridKey = (event) => {
+    if (event.key === "ArrowRight") {
+      event.preventDefault();
+      move(1);
+    } else if (event.key === "ArrowLeft") {
+      event.preventDefault();
+      move(-1);
+    } else if (event.key === "ArrowDown") {
+      event.preventDefault();
+      move(3);
+    } else if (event.key === "ArrowUp") {
+      event.preventDefault();
+      move(-3);
+    } else if (event.key === "Escape") {
+      event.preventDefault();
+      changeOpen(false);
+    }
+  };
+  return /* @__PURE__ */ jsxs(Popover$1.Root, { open: effectiveExpanded, onOpenChange: changeOpen, children: [
+    /* @__PURE__ */ jsxs("span", { className: "cb-color-picker", "data-motion": motion3 ? void 0 : "off", "data-disabled": disabled || void 0, children: [
+      name ? /* @__PURE__ */ jsx("input", { type: "hidden", name, value: selected }) : null,
+      /* @__PURE__ */ jsxs(Popover$1.Trigger, { render: /* @__PURE__ */ jsx("button", { type: "button" }), id: field?.controlId, className: "cb-color-picker__trigger", "aria-label": label, "aria-describedby": field?.describedBy, "aria-invalid": field?.invalid || void 0, "aria-required": field?.required || void 0, disabled, children: [
+        /* @__PURE__ */ jsx("span", { className: "cb-color-picker__swatch", "data-tone": selected, "aria-hidden": "true" }),
+        /* @__PURE__ */ jsx("span", { children: options.find((option) => option.tone === selected)?.label ?? selected })
+      ] })
+    ] }),
+    /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(Popover$1.Positioner, { side: "bottom", align: "start", className: "cb-color-picker__positioner", children: /* @__PURE__ */ jsx(Popover$1.Popup, { className: "cb-color-picker__popup", "data-motion": motion3 ? void 0 : "off", initialFocus: () => optionRefs.current[activeIndex] ?? false, children: /* @__PURE__ */ jsx("div", { className: "cb-color-picker__grid", role: "grid", "aria-label": `${label} options`, onKeyDown: handleGridKey, children: Array.from({ length: Math.ceil(options.length / 3) }, (_, rowIndex) => /* @__PURE__ */ jsx("div", { role: "row", className: "cb-color-picker__row", children: options.slice(rowIndex * 3, rowIndex * 3 + 3).map((option, offset) => {
+      const index = rowIndex * 3 + offset;
+      return /* @__PURE__ */ jsx("button", { ref: (node) => {
+        optionRefs.current[index] = node;
+      }, type: "button", role: "gridcell", className: "cb-color-picker__option", "data-tone": option.tone, "data-selected": selected === option.tone || void 0, tabIndex: index === activeIndex ? 0 : -1, disabled: option.disabled, "aria-label": option.label, "aria-selected": selected === option.tone, onClick: () => select(option.tone), onKeyDown: (event) => {
+        if ((event.key === "Enter" || event.key === " ") && !option.disabled) {
+          event.preventDefault();
+          select(option.tone);
+        }
+      }, children: /* @__PURE__ */ jsx("span", { className: "cb-color-picker__swatch", "data-tone": option.tone, "aria-hidden": "true" }) }, option.tone);
+    }) }, rowIndex)) }) }) }) })
+  ] });
+}
+var ColorPicker = Object.assign(ColorPickerRoot, { Skeleton: ColorPickerSkeleton });
+function ModalSkeleton({
+  size = "md",
+  lines = 3,
+  withActions = true,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("cb-modal-skeleton", `cb-modal--${size}`, className),
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx(Skeleton, { width: "48%", height: "1.125rem" }),
+        /* @__PURE__ */ jsx("div", { className: "cb-modal-skeleton__body", children: /* @__PURE__ */ jsx(Skeleton.Text, { lines }) }),
+        withActions ? /* @__PURE__ */ jsxs("div", { className: "cb-modal__footer", children: [
+          /* @__PURE__ */ jsx(Skeleton, { width: "5rem", height: "2.5rem" }),
+          /* @__PURE__ */ jsx(Skeleton, { width: "5rem", height: "2.5rem" })
+        ] }) : null
+      ]
+    }
+  );
+}
+var CONFIRM_ICONS = {
+  neutral: /* @__PURE__ */ jsx(Info, { size: 20 }),
+  brand: /* @__PURE__ */ jsx(Info, { size: 20 }),
+  info: /* @__PURE__ */ jsx(Info, { size: 20 }),
+  success: /* @__PURE__ */ jsx(CheckCircle2, { size: 20 }),
+  warning: /* @__PURE__ */ jsx(AlertTriangle, { size: 20 }),
+  danger: /* @__PURE__ */ jsx(XCircle, { size: 20 })
+};
+function ModalRoot({
+  open,
+  defaultOpen,
+  onOpenChange,
+  title,
+  description,
+  children,
+  footer,
+  size = "md",
+  placement = "center",
+  trigger,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(Dialog.Root, { open, defaultOpen, onOpenChange, children: [
+    trigger ? /* @__PURE__ */ jsx(Dialog.Trigger, { render: trigger }) : null,
+    /* @__PURE__ */ jsxs(Dialog.Portal, { children: [
+      /* @__PURE__ */ jsx(Dialog.Backdrop, { className: "cb-modal__backdrop" }),
+      /* @__PURE__ */ jsxs(
+        Dialog.Popup,
+        {
+          className: cn("cb-modal", `cb-modal--${size}`, `cb-modal--${placement}`, className),
+          children: [
+            /* @__PURE__ */ jsx(Dialog.Title, { className: "cb-modal__title", children: title }),
+            description ? /* @__PURE__ */ jsx(Dialog.Description, { className: "cb-modal__description", children: description }) : null,
+            children ? /* @__PURE__ */ jsx("div", { className: "cb-modal__body", children }) : null,
+            footer ? /* @__PURE__ */ jsx("div", { className: "cb-modal__footer", children: footer }) : null
+          ]
+        }
+      )
+    ] })
+  ] });
+}
+function ModalConfirm({
+  title,
+  description,
+  children,
+  cancelAction,
+  confirmAction,
+  tone = "warning",
+  icon,
+  className,
+  ...rootProps
+}) {
+  return /* @__PURE__ */ jsx(
+    ModalRoot,
+    {
+      ...rootProps,
+      title: /* @__PURE__ */ jsxs("span", { className: "cb-modal-confirm__heading", children: [
+        icon === null ? null : /* @__PURE__ */ jsx("span", { className: "cb-modal-confirm__icon", "data-tone": tone, "aria-hidden": "true", children: icon ?? CONFIRM_ICONS[tone] }),
+        /* @__PURE__ */ jsx("span", { children: title })
+      ] }),
+      description,
+      footer: /* @__PURE__ */ jsxs(Fragment, { children: [
+        cancelAction,
+        confirmAction
+      ] }),
+      size: "sm",
+      placement: "center",
+      className: cn("cb-modal-confirm", className),
+      children
+    }
+  );
+}
+var Modal = Object.assign(ModalRoot, {
+  Confirm: ModalConfirm,
+  Skeleton: ModalSkeleton
+});
+var DialogClose = Dialog.Close;
+function Drawer({
+  open,
+  defaultOpen,
+  onOpenChange,
+  title,
+  description,
+  children,
+  footer,
+  trigger,
+  className
+}) {
+  return /* @__PURE__ */ jsxs(Dialog.Root, { open, defaultOpen, onOpenChange, children: [
+    trigger ? /* @__PURE__ */ jsx(Dialog.Trigger, { render: trigger }) : null,
+    /* @__PURE__ */ jsxs(Dialog.Portal, { children: [
+      /* @__PURE__ */ jsx(Dialog.Backdrop, { className: "cb-drawer__backdrop" }),
+      /* @__PURE__ */ jsxs(Dialog.Popup, { className: cn("cb-drawer", className), children: [
+        /* @__PURE__ */ jsx(Dialog.Title, { className: "cb-drawer__title", children: title }),
+        description ? /* @__PURE__ */ jsx(Dialog.Description, { className: "cb-drawer__description", children: description }) : null,
+        children ? /* @__PURE__ */ jsx("div", { className: "cb-drawer__body", children }) : null,
+        footer ? /* @__PURE__ */ jsx("div", { className: "cb-drawer__footer", children: footer }) : null
+      ] })
+    ] })
+  ] });
+}
+var DrawerClose = Dialog.Close;
+
+// src/overlay/command.util.ts
+function rankCommand(command, query) {
+  const needle = query.trim().toLowerCase();
+  if (!needle) return 1;
+  const label = command.label.toLowerCase();
+  if (label === needle) return 100;
+  if (label.startsWith(needle)) return 80;
+  if (label.split(/\s+/).some((word) => word.startsWith(needle))) return 60;
+  if (label.includes(needle)) return 40;
+  if (command.keywords?.some((keyword) => keyword.toLowerCase().includes(needle))) return 20;
+  return 0;
+}
+function filterCommands(commands, query) {
+  return commands.map((command, index) => ({ command, score: rankCommand(command, query), index })).filter((entry) => entry.score > 0).sort((a, b) => b.score === a.score ? a.index - b.index : b.score - a.score).map((entry) => entry.command);
+}
+function groupCommands(commands) {
+  const groups = [];
+  for (const command of commands) {
+    const existing = groups.find((entry) => entry.group === command.group);
+    if (existing) existing.items.push(command);
+    else groups.push({ group: command.group, items: [command] });
+  }
+  return groups;
+}
+function CommandPalette({
+  open,
+  onOpenChange,
+  commands,
+  placeholder = "Type a command\u2026",
+  emptyMessage = "No matching command",
+  className
+}) {
+  const [query, setQuery] = useState("");
+  const [active, setActive] = useState(0);
+  const results = useMemo(() => filterCommands(commands, query), [commands, query]);
+  const groups = useMemo(() => groupCommands(results), [results]);
+  useEffect(() => {
+    if (!open) {
+      setQuery("");
+      setActive(0);
+    }
+  }, [open]);
+  useEffect(() => setActive(0), [query]);
+  const run = (command) => {
+    onOpenChange(false);
+    command.onRun();
+  };
+  return /* @__PURE__ */ jsx(Dialog.Root, { open, onOpenChange, children: /* @__PURE__ */ jsxs(Dialog.Portal, { children: [
+    /* @__PURE__ */ jsx(Dialog.Backdrop, { className: "cb-palette__backdrop" }),
+    /* @__PURE__ */ jsxs(Dialog.Popup, { className: cn("cb-palette", className), "aria-label": "Command palette", children: [
+      /* @__PURE__ */ jsxs("div", { className: "cb-palette__search", children: [
+        /* @__PURE__ */ jsx(Search, { size: 16, className: "cb-palette__search-icon" }),
+        /* @__PURE__ */ jsx(
+          "input",
+          {
+            className: "cb-palette__input",
+            value: query,
+            placeholder,
+            autoFocus: true,
+            role: "combobox",
+            "aria-expanded": true,
+            "aria-controls": "cb-palette-list",
+            "aria-activedescendant": results[active] ? `cb-palette-${results[active].id}` : void 0,
+            onChange: (event) => setQuery(event.target.value),
+            onKeyDown: (event) => {
               if (event.key === "ArrowDown") {
                 setActive((index) => Math.min(index + 1, results.length - 1));
                 event.preventDefault();
@@ -1464,6 +2663,82 @@ function ArrowShape() {
     }
   );
 }
+function PopconfirmSkeleton({
+  withDescription = true,
+  withCancel = true
+}) {
+  return /* @__PURE__ */ jsxs("div", { className: "cb-popconfirm cb-popconfirm--skeleton", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsx("span", { className: "cb-skeleton cb-popconfirm__skeleton-icon" }),
+    /* @__PURE__ */ jsxs("div", { className: "cb-popconfirm__content", children: [
+      /* @__PURE__ */ jsx("span", { className: "cb-skeleton cb-popconfirm__skeleton-title" }),
+      withDescription ? /* @__PURE__ */ jsx("span", { className: "cb-skeleton cb-popconfirm__skeleton-description" }) : null,
+      /* @__PURE__ */ jsxs("div", { className: "cb-popconfirm__actions", children: [
+        withCancel ? /* @__PURE__ */ jsx("span", { className: "cb-skeleton cb-popconfirm__skeleton-action" }) : null,
+        /* @__PURE__ */ jsx("span", { className: "cb-skeleton cb-popconfirm__skeleton-action" })
+      ] })
+    ] })
+  ] });
+}
+function PopconfirmRoot({
+  trigger,
+  title,
+  description,
+  cancelAction,
+  confirmAction,
+  tone = "warning",
+  icon,
+  side = "top",
+  align = "center",
+  open,
+  defaultOpen,
+  onOpenChange,
+  motion: motion3 = true
+}) {
+  const hasIcon = icon !== null;
+  return /* @__PURE__ */ jsxs(
+    Popover$1.Root,
+    {
+      open,
+      defaultOpen,
+      onOpenChange,
+      children: [
+        /* @__PURE__ */ jsx(Popover$1.Trigger, { render: trigger }),
+        /* @__PURE__ */ jsx(Popover$1.Portal, { children: /* @__PURE__ */ jsx(
+          Popover$1.Positioner,
+          {
+            side,
+            align,
+            className: "cb-popconfirm__positioner",
+            children: /* @__PURE__ */ jsxs(
+              Popover$1.Popup,
+              {
+                className: "cb-popconfirm",
+                "data-tone": tone,
+                "data-motion": motion3 ? void 0 : "off",
+                "data-icon": hasIcon ? void 0 : "none",
+                children: [
+                  /* @__PURE__ */ jsx(Popover$1.Arrow, { className: "cb-popconfirm__arrow", children: /* @__PURE__ */ jsx(ArrowShape, {}) }),
+                  hasIcon ? /* @__PURE__ */ jsx("span", { className: "cb-popconfirm__icon", "aria-hidden": "true", children: icon ?? /* @__PURE__ */ jsx(AlertTriangle, { size: 18 }) }) : null,
+                  /* @__PURE__ */ jsxs("div", { className: "cb-popconfirm__content", children: [
+                    /* @__PURE__ */ jsx(Popover$1.Title, { className: "cb-popconfirm__title", children: title }),
+                    description ? /* @__PURE__ */ jsx(Popover$1.Description, { className: "cb-popconfirm__description", children: description }) : null,
+                    /* @__PURE__ */ jsxs("div", { className: "cb-popconfirm__actions", children: [
+                      cancelAction ? /* @__PURE__ */ jsx(Popover$1.Close, { render: cancelAction }) : null,
+                      /* @__PURE__ */ jsx(Popover$1.Close, { render: confirmAction })
+                    ] })
+                  ] })
+                ]
+              }
+            )
+          }
+        ) })
+      ]
+    }
+  );
+}
+var Popconfirm = Object.assign(PopconfirmRoot, {
+  Skeleton: PopconfirmSkeleton
+});
 function Tag({
   children,
   tone = "neutral",
@@ -1478,7 +2753,7 @@ function Tag({
 }) {
   const labels = useLabels();
   const classes = cn("cb-badge", "cb-tag", `cb-badge--${variant}`, `cb-badge--${size}`, className);
-  const body = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+  const body = /* @__PURE__ */ jsxs(Fragment, { children: [
     icon,
     children
   ] });
@@ -1633,6 +2908,78 @@ function useToast() {
     promise: manager.promise
   };
 }
+function WatermarkSkeleton({
+  content = "Loading",
+  tone = "neutral",
+  density = "md",
+  direction = "horizontal",
+  lines = 3
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn(
+        "cb-watermark",
+        "cb-watermark--skeleton",
+        `cb-watermark--${density}`,
+        `cb-watermark--${direction}`
+      ),
+      "data-tone": tone,
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "cb-watermark__content", children: /* @__PURE__ */ jsx(Skeleton.Text, { lines }) }),
+        /* @__PURE__ */ jsx(WatermarkMarks, { content, density, direction })
+      ]
+    }
+  );
+}
+function normalizeContent(content) {
+  return Array.isArray(content) ? content.filter(Boolean) : [content];
+}
+function WatermarkMarks({
+  content,
+  density = "md",
+  direction = "horizontal"
+}) {
+  const marks = normalizeContent(content);
+  const values = marks.length > 0 ? marks : [""];
+  const id = `cb-watermark-pattern-${useId().replaceAll(":", "")}`;
+  const vertical = direction === "vertical";
+  return /* @__PURE__ */ jsxs("svg", { className: "cb-watermark__marks", "aria-hidden": "true", focusable: "false", children: [
+    /* @__PURE__ */ jsx("defs", { children: /* @__PURE__ */ jsx(
+      "pattern",
+      {
+        className: "cb-watermark__pattern",
+        id,
+        patternUnits: "userSpaceOnUse",
+        width: vertical ? "0.5em" : "1em",
+        height: vertical ? "1em" : "0.5em",
+        children: /* @__PURE__ */ jsx("text", { className: "cb-watermark__mark", x: "0", y: "0", dy: "1em", children: values.join(" \xB7 ") })
+      }
+    ) }),
+    /* @__PURE__ */ jsx("rect", { className: "cb-watermark__fill", width: "100%", height: "100%", fill: `url(#${id})` })
+  ] });
+}
+function WatermarkRoot({
+  content,
+  children,
+  tone = "neutral",
+  density = "md",
+  direction = "horizontal"
+}) {
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: cn("cb-watermark", `cb-watermark--${density}`, `cb-watermark--${direction}`),
+      "data-tone": tone,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "cb-watermark__content", children }),
+        /* @__PURE__ */ jsx(WatermarkMarks, { content, density, direction })
+      ]
+    }
+  );
+}
+var Watermark = Object.assign(WatermarkRoot, { Skeleton: WatermarkSkeleton });
 function Tabs({ items, value, defaultValue, onValueChange, variant = "underline", className }) {
   return /* @__PURE__ */ jsxs(
     Tabs$1.Root,
@@ -1656,22 +3003,22 @@ function Tabs({ items, value, defaultValue, onValueChange, variant = "underline"
 }
 function Dropdown({ trigger, items, sections, align = "end", side = "bottom", className }) {
   const groups = sections ?? [{ items }];
-  return /* @__PURE__ */ jsxs(Menu.Root, { children: [
-    /* @__PURE__ */ jsx(Menu.Trigger, { render: trigger }),
-    /* @__PURE__ */ jsx(Menu.Portal, { children: /* @__PURE__ */ jsx(
-      Menu.Positioner,
+  return /* @__PURE__ */ jsxs(Menu$1.Root, { children: [
+    /* @__PURE__ */ jsx(Menu$1.Trigger, { render: trigger }),
+    /* @__PURE__ */ jsx(Menu$1.Portal, { children: /* @__PURE__ */ jsx(
+      Menu$1.Positioner,
       {
         side,
         align,
         sideOffset: 6,
         className: "cb-menu-positioner",
-        children: /* @__PURE__ */ jsx(Menu.Popup, { className: cn("cb-menu", className), children: groups.map((section, sectionIndex) => /* @__PURE__ */ jsxs(Fragment, { children: [
-          sectionIndex > 0 ? /* @__PURE__ */ jsx(Menu.Separator, { className: "cb-menu__separator" }) : null,
-          /* @__PURE__ */ jsxs(Menu.Group, { className: "cb-menu__group", children: [
-            section.label ? /* @__PURE__ */ jsx(Menu.GroupLabel, { className: "cb-menu__group-label", children: section.label }) : null,
+        children: /* @__PURE__ */ jsx(Menu$1.Popup, { className: cn("cb-menu", className), children: groups.map((section, sectionIndex) => /* @__PURE__ */ jsxs(Fragment$1, { children: [
+          sectionIndex > 0 ? /* @__PURE__ */ jsx(Menu$1.Separator, { className: "cb-menu__separator" }) : null,
+          /* @__PURE__ */ jsxs(Menu$1.Group, { className: "cb-menu__group", children: [
+            section.label ? /* @__PURE__ */ jsx(Menu$1.GroupLabel, { className: "cb-menu__group-label", children: section.label }) : null,
             section.items.map(
-              (item, itemIndex) => item.separator ? /* @__PURE__ */ jsx(Menu.Separator, { className: "cb-menu__separator" }, `separator-${itemIndex}`) : /* @__PURE__ */ jsxs(
-                Menu.Item,
+              (item, itemIndex) => item.separator ? /* @__PURE__ */ jsx(Menu$1.Separator, { className: "cb-menu__separator" }, `separator-${itemIndex}`) : /* @__PURE__ */ jsxs(
+                Menu$1.Item,
                 {
                   className: "cb-menu__item",
                   "data-tone": item.tone,
@@ -1692,6 +3039,156 @@ function Dropdown({ trigger, items, sections, align = "end", side = "bottom", cl
     ) })
   ] });
 }
+function MenuSkeleton({
+  items = 4,
+  size = "md",
+  tone = "brand",
+  "aria-label": ariaLabel = "Loading navigation"
+}) {
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      "aria-label": ariaLabel,
+      "aria-hidden": "true",
+      className: cn("cb-persistent-menu", `cb-persistent-menu--${size}`, `cb-persistent-menu--${tone}`, "cb-persistent-menu--skeleton"),
+      children: /* @__PURE__ */ jsx("ul", { className: "cb-persistent-menu__list", children: Array.from({ length: items }, (_, index) => /* @__PURE__ */ jsx("li", { className: "cb-persistent-menu__item", children: /* @__PURE__ */ jsx(Skeleton, { className: cn("cb-persistent-menu__skeleton-line", index % 3 === 0 && "cb-persistent-menu__skeleton-line--long") }) }, index)) })
+    }
+  );
+}
+function MenuRoot({
+  items,
+  selectedPath,
+  defaultSelectedPath,
+  onSelectedPathChange,
+  openKeys,
+  defaultOpenKeys = [],
+  onOpenKeysChange,
+  size = "md",
+  tone = "brand",
+  motion: motion3 = true,
+  "aria-label": ariaLabel = "Navigation"
+}) {
+  const [uncontrolledSelectedPath, setUncontrolledSelectedPath] = useState(defaultSelectedPath);
+  const [uncontrolledOpenKeys, setUncontrolledOpenKeys] = useState(defaultOpenKeys);
+  const currentSelectedPath = selectedPath ?? uncontrolledSelectedPath;
+  const currentOpenKeys = openKeys ?? uncontrolledOpenKeys;
+  const menuId = useId();
+  const select = (path) => {
+    if (selectedPath === void 0) setUncontrolledSelectedPath(path);
+    onSelectedPathChange?.(path);
+  };
+  const toggle = (key) => {
+    const next = currentOpenKeys.includes(key) ? currentOpenKeys.filter((openKey) => openKey !== key) : [...currentOpenKeys, key];
+    if (openKeys === void 0) setUncontrolledOpenKeys(next);
+    onOpenKeysChange?.(next);
+  };
+  return /* @__PURE__ */ jsx(
+    "nav",
+    {
+      "aria-label": ariaLabel,
+      className: cn("cb-persistent-menu", `cb-persistent-menu--${size}`, `cb-persistent-menu--${tone}`, !motion3 && "cb-persistent-menu--motion-off"),
+      children: /* @__PURE__ */ jsx(
+        MenuList,
+        {
+          items,
+          selectedPath: currentSelectedPath,
+          openKeys: currentOpenKeys,
+          path: [],
+          menuId,
+          onSelect: select,
+          onToggle: toggle
+        }
+      )
+    }
+  );
+}
+function MenuList({ items, selectedPath, openKeys, path, menuId, nested = false, onSelect, onToggle }) {
+  return /* @__PURE__ */ jsx("ul", { className: cn("cb-persistent-menu__list", nested && "cb-persistent-menu__list--nested"), children: items.map((item) => {
+    const itemPath = [...path, item.key];
+    const pathKey = pathIdentity(itemPath);
+    const isBranch = "children" in item;
+    const open = openKeys.includes(pathKey);
+    const current = selectedPath === pathKey;
+    const branchId = `${menuId}-${pathKey}`;
+    return /* @__PURE__ */ jsxs("li", { className: "cb-persistent-menu__item", children: [
+      /* @__PURE__ */ jsx("div", { className: "cb-persistent-menu__row", children: isBranch ? /* @__PURE__ */ jsx(MenuBranch, { item, open, branchId, onToggle: () => onToggle(pathKey) }) : /* @__PURE__ */ jsx(MenuEntry, { item, path: pathKey, current, onSelect }) }),
+      isBranch && open ? /* @__PURE__ */ jsx("div", { id: branchId, className: "cb-persistent-menu__branch", children: /* @__PURE__ */ jsx(
+        MenuList,
+        {
+          items: item.children,
+          selectedPath,
+          openKeys,
+          path: itemPath,
+          menuId,
+          nested: true,
+          onSelect,
+          onToggle
+        }
+      ) }) : null
+    ] }, item.key);
+  }) });
+}
+function MenuEntry({
+  item,
+  path,
+  current,
+  onSelect
+}) {
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
+    item.icon ? /* @__PURE__ */ jsx("span", { className: "cb-persistent-menu__icon", "aria-hidden": "true", children: item.icon }) : null,
+    /* @__PURE__ */ jsx("span", { className: "cb-persistent-menu__label", children: item.label })
+  ] });
+  const props = {
+    className: "cb-persistent-menu__entry",
+    "aria-current": current ? "page" : void 0,
+    "aria-disabled": item.disabled || void 0,
+    "data-current": current || void 0,
+    "data-disabled": item.disabled || void 0
+  };
+  if (item.disabled) {
+    return /* @__PURE__ */ jsx("span", { ...props, children: content });
+  }
+  return /* @__PURE__ */ jsx(
+    "a",
+    {
+      href: item.href,
+      ...props,
+      onClick: () => onSelect(path),
+      children: content
+    }
+  );
+}
+function MenuBranch({
+  item,
+  open,
+  branchId,
+  onToggle
+}) {
+  return /* @__PURE__ */ jsxs(
+    "button",
+    {
+      type: "button",
+      className: "cb-persistent-menu__branch-trigger",
+      "aria-label": item.ariaLabel,
+      "aria-expanded": open,
+      "aria-controls": branchId,
+      disabled: item.disabled,
+      "data-open": open || void 0,
+      "data-disabled": item.disabled || void 0,
+      onClick: onToggle,
+      children: [
+        item.icon ? /* @__PURE__ */ jsx("span", { className: "cb-persistent-menu__icon", "aria-hidden": "true", children: item.icon }) : null,
+        /* @__PURE__ */ jsx("span", { className: "cb-persistent-menu__label", children: item.label }),
+        /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true", className: "cb-persistent-menu__chevron cb-persistent-menu__chevron--collapsed" }),
+        /* @__PURE__ */ jsx(ChevronDown, { "aria-hidden": "true", className: "cb-persistent-menu__chevron cb-persistent-menu__chevron--expanded" })
+      ]
+    }
+  );
+}
+function pathIdentity(path) {
+  return path.map(encodeURIComponent).join("/");
+}
+var Menu = Object.assign(MenuRoot, { Skeleton: MenuSkeleton });
 var hasActiveChild = (item) => Boolean(item.items?.some((child) => child.active));
 function Sidebar({ sections, header, footer, collapsed = false, onCollapsedChange, className }) {
   const labels = useLabels();
@@ -1733,7 +3230,7 @@ function SidebarEntry({ item, collapsed }) {
   if (collapsed) {
     return /* @__PURE__ */ jsx(Flyout, { label: item.label, items: children, children: /* @__PURE__ */ jsx(SidebarRow, { item: { ...item, active: item.active || hasActiveChild(item) }, collapsed: true }) });
   }
-  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
     /* @__PURE__ */ jsxs(
       "button",
       {
@@ -1754,7 +3251,7 @@ function SidebarEntry({ item, collapsed }) {
   ] });
 }
 function SidebarRow({ item, collapsed, nested }) {
-  const content = /* @__PURE__ */ jsxs(Fragment$1, { children: [
+  const content = /* @__PURE__ */ jsxs(Fragment, { children: [
     item.icon ? /* @__PURE__ */ jsx("span", { className: "cb-sidebar__icon", children: item.icon }) : null,
     /* @__PURE__ */ jsx("span", { className: "cb-sidebar__label", children: item.label }),
     item.adornment && !collapsed ? /* @__PURE__ */ jsx("span", { className: "cb-sidebar__adornment", children: item.adornment }) : null
@@ -1793,22 +3290,6 @@ function TopBar({ title, subtitle, center, actions, sticky = true, className })
     actions ? /* @__PURE__ */ jsx("div", { className: "cb-topbar__actions", children: actions }) : null
   ] });
 }
-function box({ width = "100%", height = "1rem", radius = "md", className }) {
-  const style = { "--cb-skeleton-w": width, "--cb-skeleton-h": height };
-  return /* @__PURE__ */ jsx("span", { "aria-hidden": "true", className: cn("cb-skeleton", `cb-radius--${radius}`, className), style });
-}
-function text({ lines = 3, lastLineWidth = "62%", className }) {
-  return /* @__PURE__ */ jsx("span", { className: cn("cb-skeleton-text", className), children: Array.from({ length: lines }, (_, i) => /* @__PURE__ */ jsx(SkeletonBox, { height: "0.75rem", width: i === lines - 1 ? lastLineWidth : "100%" }, i)) });
-}
-function circle({ size = "2.5rem", className }) {
-  return /* @__PURE__ */ jsx(SkeletonBox, { width: size, height: size, radius: "full", className });
-}
-var SkeletonBox = box;
-var Skeleton = Object.assign(box, {
-  Text: text,
-  Circle: circle,
-  Rect: box
-});
 
 // src/data/table-sort.ts
 function nextSort(current, column) {
@@ -1964,7 +3445,349 @@ function Pagination({
     ] })
   ] });
 }
-function Image({
+function CollapseSkeleton({
+  items = 3,
+  openItems = [0],
+  lines = 2,
+  size = "md",
+  bordered = true,
+  expandIconPosition = "start",
+  className
+}) {
+  const openSet = new Set(openItems);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "aria-hidden": "true",
+      className: cn(
+        "cb-collapse",
+        `cb-collapse--${size}`,
+        "cb-collapse--skeleton",
+        bordered && "cb-collapse--bordered",
+        expandIconPosition === "end" && "cb-collapse--icon-end",
+        className
+      ),
+      children: Array.from({ length: items }, (_, index) => /* @__PURE__ */ jsxs("div", { className: "cb-collapse__item", children: [
+        /* @__PURE__ */ jsxs("div", { className: "cb-collapse__trigger", children: [
+          /* @__PURE__ */ jsx(Skeleton.Circle, { size: "1rem", className: "cb-collapse__icon" }),
+          /* @__PURE__ */ jsx(Skeleton, { width: "42%", height: "0.875rem", className: "cb-collapse__label" })
+        ] }),
+        openSet.has(index) ? /* @__PURE__ */ jsx("div", { className: "cb-collapse__content", children: /* @__PURE__ */ jsx(Skeleton.Text, { lines }) }) : null
+      ] }, index))
+    }
+  );
+}
+function normalizeValue(value, multiple) {
+  if (value == null) return void 0;
+  if (Array.isArray(value)) return multiple ? value : value.slice(0, 1);
+  return [value];
+}
+function CollapseRoot({
+  items,
+  value,
+  defaultValue,
+  onValueChange,
+  multiple = false,
+  size = "md",
+  bordered = true,
+  expandIconPosition = "start",
+  headingLevel = 3,
+  disabled = false,
+  keepMounted = false,
+  hiddenUntilFound = false,
+  motion: motion3 = true,
+  className
+}) {
+  const Heading = `h${headingLevel}`;
+  return /* @__PURE__ */ jsx(
+    Accordion.Root,
+    {
+      value: normalizeValue(value, multiple),
+      defaultValue: normalizeValue(defaultValue, multiple),
+      onValueChange: (next) => onValueChange?.(multiple ? next.map(String) : next[0] == null ? void 0 : String(next[0])),
+      multiple,
+      disabled,
+      keepMounted: hiddenUntilFound ? void 0 : keepMounted,
+      hiddenUntilFound,
+      className: cn(
+        "cb-collapse",
+        `cb-collapse--${size}`,
+        bordered && "cb-collapse--bordered",
+        expandIconPosition === "end" && "cb-collapse--icon-end",
+        !motion3 && "cb-collapse--motionless",
+        className
+      ),
+      children: items.map((item) => /* @__PURE__ */ jsxs(
+        Accordion.Item,
+        {
+          value: item.key,
+          disabled: item.disabled,
+          className: "cb-collapse__item",
+          children: [
+            /* @__PURE__ */ jsx(Accordion.Header, { render: /* @__PURE__ */ jsx(Heading, { className: "cb-collapse__heading" }), children: /* @__PURE__ */ jsxs(Accordion.Trigger, { className: "cb-collapse__trigger", children: [
+              /* @__PURE__ */ jsx("span", { className: "cb-collapse__icon", "aria-hidden": "true", children: /* @__PURE__ */ jsx(ChevronDown, {}) }),
+              /* @__PURE__ */ jsx("span", { className: "cb-collapse__label", children: item.label })
+            ] }) }),
+            /* @__PURE__ */ jsx(Accordion.Panel, { className: "cb-collapse__panel", children: /* @__PURE__ */ jsx("div", { className: "cb-collapse__content", children: item.children }) })
+          ]
+        },
+        item.key
+      ))
+    }
+  );
+}
+var Collapse = Object.assign(CollapseRoot, {
+  Skeleton: CollapseSkeleton
+});
+function CalendarSkeleton({ weekStartsOn = 1 }) {
+  return /* @__PURE__ */ jsxs("div", { className: "cb-calendar cb-calendar--skeleton", "aria-hidden": "true", "data-week-starts-on": weekStartsOn, children: [
+    /* @__PURE__ */ jsxs("div", { className: "cb-calendar__header", children: [
+      /* @__PURE__ */ jsx(Skeleton.Circle, { size: "var(--cb-control-height-sm)" }),
+      /* @__PURE__ */ jsx(Skeleton, { width: "42%", height: "var(--cb-text-sm)" }),
+      /* @__PURE__ */ jsx(Skeleton.Circle, { size: "var(--cb-control-height-sm)" })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "cb-calendar__weekdays", children: Array.from({ length: 7 }, (_, index) => /* @__PURE__ */ jsx(Skeleton, { width: "60%", height: "var(--cb-text-xs)" }, index)) }),
+    /* @__PURE__ */ jsx("div", { className: "cb-calendar__grid", children: Array.from({ length: 42 }, (_, index) => /* @__PURE__ */ jsx(Skeleton, { className: "cb-calendar__skeleton-day" }, index)) })
+  ] });
+}
+function isUsableDate(value) {
+  return value instanceof Date && Number.isFinite(value.getTime());
+}
+function calendarDay(value) {
+  return new Date(value.getFullYear(), value.getMonth(), value.getDate());
+}
+function sameDay(left, right) {
+  return Boolean(left && right && left.getFullYear() === right.getFullYear() && left.getMonth() === right.getMonth() && left.getDate() === right.getDate());
+}
+function sameMonth(left, right) {
+  return left.getFullYear() === right.getFullYear() && left.getMonth() === right.getMonth();
+}
+function dateKey(date) {
+  return `${date.getFullYear()}-${String(date.getMonth() + 1).padStart(2, "0")}-${String(date.getDate()).padStart(2, "0")}`;
+}
+function addDays(date, amount) {
+  return new Date(date.getFullYear(), date.getMonth(), date.getDate() + amount);
+}
+function addMonths(date, amount) {
+  const targetYear = date.getFullYear();
+  const targetMonth = date.getMonth() + amount;
+  const lastDay = new Date(targetYear, targetMonth + 1, 0).getDate();
+  return new Date(targetYear, targetMonth, Math.min(date.getDate(), lastDay));
+}
+function isDisabled(date, minDate, maxDate, disabledDate) {
+  const day = calendarDay(date);
+  return isUsableDate(minDate) && day < calendarDay(minDate) || isUsableDate(maxDate) && day > calendarDay(maxDate) || disabledDate?.(day) === true;
+}
+function monthCells(month, weekStartsOn) {
+  const first = new Date(month.getFullYear(), month.getMonth(), 1);
+  const leadingDays = (first.getDay() - weekStartsOn + 7) % 7;
+  const start = addDays(first, -leadingDays);
+  return Array.from({ length: 42 }, (_, index) => addDays(start, index));
+}
+function firstEnabledDate(month, weekStartsOn, minDate, maxDate, disabledDate) {
+  const cells = monthCells(month, weekStartsOn);
+  return cells.find((date) => sameMonth(date, month) && !isDisabled(date, minDate, maxDate, disabledDate)) ?? cells.find((date) => !isDisabled(date, minDate, maxDate, disabledDate));
+}
+function CalendarRoot({
+  value,
+  defaultValue = null,
+  onValueChange,
+  month,
+  defaultMonth,
+  onMonthChange,
+  minDate,
+  maxDate,
+  disabledDate,
+  renderDay,
+  locale,
+  weekStartsOn = 1,
+  disabled = false
+}) {
+  const labels = useLabels();
+  const headingId = useId();
+  const rootRef = useRef(null);
+  const focusKeyRef = useRef(void 0);
+  const today = useMemo(() => calendarDay(/* @__PURE__ */ new Date()), []);
+  const controlledValue = value !== void 0;
+  const [internalValue, setInternalValue] = useState(() => isUsableDate(defaultValue) && !isDisabled(defaultValue, minDate, maxDate, disabledDate) ? calendarDay(defaultValue) : null);
+  const requestedValue = controlledValue ? value : internalValue;
+  const selected = isUsableDate(requestedValue) && !isDisabled(requestedValue, minDate, maxDate, disabledDate) ? calendarDay(requestedValue) : null;
+  const controlledMonth = month !== void 0;
+  const [internalMonth, setInternalMonth] = useState(() => {
+    const initial = isUsableDate(defaultMonth) ? defaultMonth : selected ?? today;
+    return new Date(initial.getFullYear(), initial.getMonth(), 1);
+  });
+  const displayedMonth = controlledMonth && isUsableDate(month) ? new Date(month.getFullYear(), month.getMonth(), 1) : internalMonth;
+  const [activeDate, setActiveDate] = useState(() => selected && sameMonth(selected, displayedMonth) ? selected : firstEnabledDate(displayedMonth, weekStartsOn, minDate, maxDate, disabledDate) ?? displayedMonth);
+  const cells = useMemo(() => monthCells(displayedMonth, weekStartsOn), [displayedMonth, weekStartsOn]);
+  const rovingDate = cells.some((date) => sameDay(date, activeDate) && !isDisabled(date, minDate, maxDate, disabledDate)) ? activeDate : firstEnabledDate(displayedMonth, weekStartsOn, minDate, maxDate, disabledDate);
+  const weekdayFormatter = useMemo(() => new Intl.DateTimeFormat(locale, { weekday: "short" }), [locale]);
+  const fullDateFormatter = useMemo(() => new Intl.DateTimeFormat(locale, { dateStyle: "full" }), [locale]);
+  const monthFormatter = useMemo(() => new Intl.DateTimeFormat(locale, { month: "long", year: "numeric" }), [locale]);
+  const weekdayDates = useMemo(() => Array.from({ length: 7 }, (_, index) => new Date(2023, 0, 1 + (weekStartsOn + index) % 7)), [weekStartsOn]);
+  const controlledMonthKey = controlledMonth ? dateKey(displayedMonth) : void 0;
+  const controlledValueKey = controlledValue && selected ? dateKey(selected) : void 0;
+  const previousControlledMonthKey = useRef(controlledMonthKey);
+  const previousControlledValueKey = useRef(controlledValueKey);
+  useEffect(() => {
+    const monthChanged = controlledMonth && previousControlledMonthKey.current !== controlledMonthKey;
+    const valueChanged = controlledValue && previousControlledValueKey.current !== controlledValueKey;
+    previousControlledMonthKey.current = controlledMonthKey;
+    previousControlledValueKey.current = controlledValueKey;
+    if (!monthChanged && !valueChanged) return;
+    const next = selected && sameMonth(selected, displayedMonth) ? selected : firstEnabledDate(displayedMonth, weekStartsOn, minDate, maxDate, disabledDate);
+    if (next) setActiveDate(next);
+  }, [controlledMonth, controlledMonthKey, controlledValue, controlledValueKey, disabledDate, displayedMonth, maxDate, minDate, selected, weekStartsOn]);
+  useEffect(() => {
+    const key = focusKeyRef.current;
+    if (!key) return;
+    const target = rootRef.current?.querySelector(`[data-date-key="${key}"]`);
+    if (target) target.focus();
+    focusKeyRef.current = void 0;
+  }, [displayedMonth, activeDate]);
+  const changeMonth = (next) => {
+    const normalized = new Date(next.getFullYear(), next.getMonth(), 1);
+    if (!controlledMonth) setInternalMonth(normalized);
+    onMonthChange?.(normalized);
+  };
+  const setActive = (next, shouldFocus = false) => {
+    const normalized = calendarDay(next);
+    const enabled = isDisabled(normalized, minDate, maxDate, disabledDate) ? firstEnabledDate(normalized, weekStartsOn, minDate, maxDate, disabledDate) : normalized;
+    if (!enabled) return;
+    setActiveDate(enabled);
+    if (!sameMonth(enabled, displayedMonth)) changeMonth(enabled);
+    if (shouldFocus) focusKeyRef.current = dateKey(enabled);
+  };
+  const select = (next) => {
+    if (disabled || isDisabled(next, minDate, maxDate, disabledDate)) return;
+    const normalized = calendarDay(next);
+    if (!controlledValue) setInternalValue(normalized);
+    onValueChange?.(normalized);
+    setActive(normalized);
+  };
+  const handleKeyDown = (event, current) => {
+    if (disabled) return;
+    const moveFromCurrent = (amount) => {
+      const direction = Math.sign(amount);
+      let candidate = addDays(current, amount);
+      for (let attempts = 0; attempts < 366 && isDisabled(candidate, minDate, maxDate, disabledDate); attempts += 1) {
+        candidate = addDays(candidate, direction || 1);
+      }
+      if (!isDisabled(candidate, minDate, maxDate, disabledDate)) setActive(candidate, true);
+    };
+    if (event.key === "ArrowLeft") {
+      event.preventDefault();
+      moveFromCurrent(-1);
+    } else if (event.key === "ArrowRight") {
+      event.preventDefault();
+      moveFromCurrent(1);
+    } else if (event.key === "ArrowUp") {
+      event.preventDefault();
+      moveFromCurrent(-7);
+    } else if (event.key === "ArrowDown") {
+      event.preventDefault();
+      moveFromCurrent(7);
+    } else if (event.key === "Home") {
+      event.preventDefault();
+      moveFromCurrent(-((current.getDay() - weekStartsOn + 7) % 7));
+    } else if (event.key === "End") {
+      event.preventDefault();
+      moveFromCurrent(6 - (current.getDay() - weekStartsOn + 7) % 7);
+    } else if (event.key === "PageUp") {
+      event.preventDefault();
+      setActive(addMonths(current, event.shiftKey ? -12 : -1), true);
+    } else if (event.key === "PageDown") {
+      event.preventDefault();
+      setActive(addMonths(current, event.shiftKey ? 12 : 1), true);
+    } else if (event.key === "Enter" || event.key === " ") {
+      event.preventDefault();
+      select(current);
+    }
+  };
+  return /* @__PURE__ */ jsxs("section", { ref: rootRef, className: "cb-calendar", "aria-label": monthFormatter.format(displayedMonth), "data-disabled": disabled || void 0, children: [
+    /* @__PURE__ */ jsxs("div", { className: "cb-calendar__header", children: [
+      /* @__PURE__ */ jsx("button", { type: "button", className: "cb-calendar__nav", onClick: () => changeMonth(addMonths(displayedMonth, -1)), disabled, "aria-label": labels.previousMonth, children: /* @__PURE__ */ jsx(ChevronLeft, { "aria-hidden": "true" }) }),
+      /* @__PURE__ */ jsx("h2", { className: "cb-calendar__month", id: headingId, "aria-live": "polite", children: monthFormatter.format(displayedMonth) }),
+      /* @__PURE__ */ jsx("button", { type: "button", className: "cb-calendar__nav", onClick: () => changeMonth(addMonths(displayedMonth, 1)), disabled, "aria-label": labels.nextMonth, children: /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true" }) })
+    ] }),
+    /* @__PURE__ */ jsx("div", { className: "cb-calendar__weekdays", "aria-hidden": "true", children: weekdayDates.map((date) => /* @__PURE__ */ jsx("span", { children: weekdayFormatter.format(date) }, date.getDay())) }),
+    /* @__PURE__ */ jsx("div", { className: "cb-calendar__grid", role: "grid", "aria-labelledby": headingId, children: Array.from({ length: 6 }, (_, weekIndex) => /* @__PURE__ */ jsx("div", { className: "cb-calendar__week", role: "row", children: cells.slice(weekIndex * 7, weekIndex * 7 + 7).map((date) => {
+      const unavailable = disabled || isDisabled(date, minDate, maxDate, disabledDate);
+      const day = { date, inMonth: sameMonth(date, displayedMonth), selected: sameDay(date, selected), today: sameDay(date, today), disabled: unavailable };
+      const active = sameDay(date, rovingDate) && !unavailable;
+      return /* @__PURE__ */ jsx("div", { role: "gridcell", className: "cb-calendar__cell", "aria-selected": day.selected || void 0, children: /* @__PURE__ */ jsx(
+        "button",
+        {
+          type: "button",
+          className: "cb-calendar__day",
+          "data-date-key": dateKey(date),
+          "data-outside": !day.inMonth || void 0,
+          "data-selected": day.selected || void 0,
+          "data-today": day.today || void 0,
+          disabled: unavailable,
+          tabIndex: active ? 0 : -1,
+          "aria-label": fullDateFormatter.format(date),
+          "aria-pressed": day.selected,
+          onFocus: () => setActiveDate(date),
+          onClick: () => select(date),
+          onKeyDown: (event) => handleKeyDown(event, date),
+          children: renderDay ? renderDay(day) : date.getDate()
+        }
+      ) }, dateKey(date));
+    }) }, weekIndex)) })
+  ] });
+}
+var Calendar = Object.assign(CalendarRoot, { Skeleton: CalendarSkeleton });
+function ImageSkeleton({
+  aspectRatio,
+  radius = "md",
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      className: cn(
+        "cb-image cb-image--skeleton",
+        `cb-radius--${radius}`,
+        className
+      ),
+      style: aspectRatio ? { aspectRatio: String(aspectRatio) } : void 0,
+      "aria-hidden": "true",
+      children: /* @__PURE__ */ jsx(
+        Skeleton,
+        {
+          className: "cb-image__skeleton-shape",
+          width: "100%",
+          height: "100%",
+          radius: "md"
+        }
+      )
+    }
+  );
+}
+function ImagePreviewGroupSkeleton({
+  items = 3,
+  aspectRatio,
+  radius = "md",
+  className
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      className: cn("cb-image-preview-group cb-image-preview-group--skeleton", className),
+      "aria-hidden": "true",
+      children: Array.from({ length: Math.max(0, items) }, (_, itemIndex) => /* @__PURE__ */ jsx(
+        ImageSkeleton,
+        {
+          aspectRatio,
+          radius
+        },
+        itemIndex
+      ))
+    }
+  );
+}
+function ImageRoot({
   src,
   alt,
   aspectRatio,
@@ -1973,6 +3796,7 @@ function Image({
   fit = "cover",
   radius = "md",
   loading = "lazy",
+  motion: motion3 = true,
   className
 }) {
   const [loaded, setLoaded] = useState(false);
@@ -1987,6 +3811,7 @@ function Image({
       className: cn("cb-image", `cb-radius--${radius}`, className),
       "data-loaded": loaded || void 0,
       "data-blurred": blurDataUrl ? "" : void 0,
+      "data-motion": motion3 ? void 0 : "off",
       style,
       children: /* @__PURE__ */ jsx(
         "img",
@@ -2006,6 +3831,208 @@ function Image({
     }
   );
 }
+var DEFAULT_PREVIEW_LABELS = {
+  close: "Close preview",
+  previous: "Previous image",
+  next: "Next image",
+  zoomIn: "Zoom in",
+  zoomOut: "Zoom out",
+  resetZoom: "Reset zoom",
+  open: (item) => `Preview ${item.alt || "image"}`,
+  position: (current, total) => `Image ${current} of ${total}`
+};
+function clampIndex(index, length) {
+  return Math.max(0, Math.min(index, Math.max(length - 1, 0)));
+}
+function ImagePreviewGroupRoot({
+  items,
+  label,
+  open,
+  defaultOpen = false,
+  onOpenChange,
+  index,
+  defaultIndex = 0,
+  onIndexChange,
+  loop = false,
+  labels: labelOverrides,
+  motion: motion3 = true,
+  className
+}) {
+  const [internalOpen, setInternalOpen] = useState(defaultOpen);
+  const [internalIndex, setInternalIndex] = useState(
+    () => clampIndex(defaultIndex, items.length)
+  );
+  const [scale, setScale] = useState(1);
+  const isOpen = open ?? internalOpen;
+  const selectedIndex = clampIndex(index ?? internalIndex, items.length);
+  const selectedItem = items[selectedIndex];
+  const labels = useMemo(
+    () => ({ ...DEFAULT_PREVIEW_LABELS, ...labelOverrides }),
+    [labelOverrides]
+  );
+  const changeOpen = (nextOpen) => {
+    if (open === void 0) setInternalOpen(nextOpen);
+    if (!nextOpen) setScale(1);
+    onOpenChange?.(nextOpen);
+  };
+  const changeIndex = (nextIndex) => {
+    if (items.length === 0) return;
+    const next = loop ? (nextIndex + items.length) % items.length : clampIndex(nextIndex, items.length);
+    if (index === void 0) setInternalIndex(next);
+    setScale(1);
+    onIndexChange?.(next);
+  };
+  useEffect(() => {
+    if (selectedIndex !== (index ?? internalIndex) && index === void 0) {
+      setInternalIndex(selectedIndex);
+    }
+  }, [index, internalIndex, selectedIndex]);
+  const canGoPrevious = loop && items.length > 1 || selectedIndex > 0;
+  const canGoNext = loop && items.length > 1 || selectedIndex < items.length - 1;
+  const zoomIn = () => setScale((current) => Math.min(3, current + 0.5));
+  const zoomOut = () => setScale((current) => Math.max(1, current - 0.5));
+  const onPreviewKeyDown = (event) => {
+    if (event.key === "ArrowLeft" && canGoPrevious)
+      changeIndex(selectedIndex - 1);
+    else if (event.key === "ArrowRight" && canGoNext)
+      changeIndex(selectedIndex + 1);
+    else if (event.key === "+" || event.key === "=") zoomIn();
+    else if (event.key === "-") zoomOut();
+    else if (event.key === "0") setScale(1);
+    else if (event.key === "Home") changeIndex(0);
+    else if (event.key === "End") changeIndex(items.length - 1);
+    else return;
+    event.preventDefault();
+  };
+  return /* @__PURE__ */ jsxs(Dialog.Root, { open: isOpen, onOpenChange: changeOpen, children: [
+    /* @__PURE__ */ jsx(
+      "div",
+      {
+        className: cn("cb-image-preview-group", className),
+        role: "group",
+        "aria-label": label,
+        children: items.map((item, itemIndex) => {
+          const {
+            id,
+            previewSrc: _previewSrc,
+            caption: _caption,
+            ...imageProps
+          } = item;
+          return /* @__PURE__ */ jsx(
+            Dialog.Trigger,
+            {
+              className: "cb-image-preview-group__trigger",
+              "aria-label": labels.open(item, itemIndex),
+              onClick: () => changeIndex(itemIndex),
+              children: /* @__PURE__ */ jsx(ImageRoot, { ...imageProps })
+            },
+            id
+          );
+        })
+      }
+    ),
+    /* @__PURE__ */ jsx(Dialog.Portal, { children: selectedItem ? /* @__PURE__ */ jsxs(Fragment, { children: [
+      /* @__PURE__ */ jsx(Dialog.Backdrop, { className: "cb-image-preview__backdrop" }),
+      /* @__PURE__ */ jsxs(
+        Dialog.Popup,
+        {
+          className: "cb-image-preview",
+          "data-motion": motion3 ? void 0 : "off",
+          onKeyDown: onPreviewKeyDown,
+          children: [
+            /* @__PURE__ */ jsx(Dialog.Title, { className: "cb-image-preview__sr-title", children: labels.position(selectedIndex + 1, items.length) }),
+            /* @__PURE__ */ jsxs("div", { className: "cb-image-preview__toolbar", children: [
+              /* @__PURE__ */ jsx("span", { className: "cb-image-preview__position", "aria-live": "polite", children: labels.position(selectedIndex + 1, items.length) }),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "cb-image-preview__control",
+                  "aria-label": labels.zoomOut,
+                  disabled: scale === 1,
+                  onClick: zoomOut,
+                  children: /* @__PURE__ */ jsx(ZoomOut, { "aria-hidden": "true" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "cb-image-preview__control",
+                  "aria-label": labels.resetZoom,
+                  disabled: scale === 1,
+                  onClick: () => setScale(1),
+                  children: /* @__PURE__ */ jsx(RotateCcw, { "aria-hidden": "true" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "cb-image-preview__control",
+                  "aria-label": labels.zoomIn,
+                  disabled: scale === 3,
+                  onClick: zoomIn,
+                  children: /* @__PURE__ */ jsx(ZoomIn, { "aria-hidden": "true" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                Dialog.Close,
+                {
+                  className: "cb-image-preview__control",
+                  "aria-label": labels.close,
+                  children: /* @__PURE__ */ jsx(X, { "aria-hidden": "true" })
+                }
+              )
+            ] }),
+            /* @__PURE__ */ jsxs("div", { className: "cb-image-preview__stage", children: [
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "cb-image-preview__navigation cb-image-preview__navigation--previous",
+                  "aria-label": labels.previous,
+                  disabled: !canGoPrevious,
+                  onClick: () => changeIndex(selectedIndex - 1),
+                  children: /* @__PURE__ */ jsx(ChevronLeft, { "aria-hidden": "true" })
+                }
+              ),
+              /* @__PURE__ */ jsx(
+                "img",
+                {
+                  className: "cb-image-preview__image",
+                  src: selectedItem.previewSrc ?? selectedItem.src,
+                  alt: selectedItem.alt,
+                  style: { "--cb-image-preview-scale": scale },
+                  onDoubleClick: () => setScale((current) => current === 1 ? 2 : 1)
+                },
+                selectedItem.id
+              ),
+              /* @__PURE__ */ jsx(
+                "button",
+                {
+                  type: "button",
+                  className: "cb-image-preview__navigation cb-image-preview__navigation--next",
+                  "aria-label": labels.next,
+                  disabled: !canGoNext,
+                  onClick: () => changeIndex(selectedIndex + 1),
+                  children: /* @__PURE__ */ jsx(ChevronRight, { "aria-hidden": "true" })
+                }
+              )
+            ] }),
+            selectedItem.caption ? /* @__PURE__ */ jsx("div", { className: "cb-image-preview__caption", children: selectedItem.caption }) : null
+          ]
+        }
+      )
+    ] }) : null })
+  ] });
+}
+var Image = Object.assign(ImageRoot, {
+  PreviewGroup: Object.assign(ImagePreviewGroupRoot, {
+    Skeleton: ImagePreviewGroupSkeleton
+  }),
+  Skeleton: ImageSkeleton
+});
 
 // src/media/autoplay.ts
 function shouldAutoplay(conditions) {
@@ -2182,7 +4209,7 @@ function Coachmark({
   const labels = useLabels();
   const rect = useAnchorRect(anchor, open && spotlight !== false);
   const padding = typeof spotlight === "number" ? spotlight : 8;
-  return /* @__PURE__ */ jsxs(Fragment$1, { children: [
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
     rect ? /* @__PURE__ */ jsx(
       "div",
       {
@@ -2357,7 +4384,7 @@ function Tour({ id, steps, open = false, onOpenChange, seenStore, onFinish, onSk
       spotlight: step.spotlight,
       progress: { current: state.index + 1, total: steps.length },
       onDismiss: skip,
-      actions: /* @__PURE__ */ jsxs(Fragment$1, { children: [
+      actions: /* @__PURE__ */ jsxs(Fragment, { children: [
         state.index > 0 ? /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", tone: "neutral", onClick: () => rawDispatch({ type: "prev" }), children: text2.back }) : /* @__PURE__ */ jsx(Button, { size: "sm", variant: "ghost", tone: "neutral", onClick: skip, children: text2.skip }),
         /* @__PURE__ */ jsx(Button, { size: "sm", onClick: () => rawDispatch({ type: "next" }), children: isLast ? text2.done : text2.next })
       ] }),
@@ -2399,5 +4426,167 @@ function Reveal({
 function Stagger({ children, step = 0.06, from = "below", onView = false, className }) {
   return /* @__PURE__ */ jsx("div", { className, children: Children.map(children, (child, index) => /* @__PURE__ */ jsx(Reveal, { from, delay: index * step, onView, children: child })) });
 }
+function BorderBeam({ children, tone = "brand", size = "md", motion: motion3 = true }) {
+  return /* @__PURE__ */ jsxs("div", { className: cn("cb-border-beam", `cb-border-beam--${size}`), "data-tone": tone, "data-motion": motion3 ? "on" : "off", children: [
+    /* @__PURE__ */ jsx("span", { className: "cb-border-beam__overlay", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx("div", { className: "cb-border-beam__content", children })
+  ] });
+}
+function SplitterSkeleton({
+  orientation = "horizontal",
+  size = 50,
+  handleSize = "md"
+}) {
+  const safeSize = Number.isFinite(size) ? size : 50;
+  const boundedSize = Math.min(100, Math.max(0, Math.round(safeSize)));
+  const style = {
+    "--cb-splitter-first-grow": String(boundedSize),
+    "--cb-splitter-second-grow": String(100 - boundedSize)
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `cb-splitter cb-splitter--skeleton cb-splitter--${orientation} cb-splitter--handle-${handleSize}`,
+      style,
+      "aria-hidden": "true",
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "cb-splitter__pane cb-splitter__pane--first", children: /* @__PURE__ */ jsx(Skeleton, { className: "cb-splitter__skeleton-pane" }) }),
+        /* @__PURE__ */ jsx("div", { className: "cb-splitter__handle" }),
+        /* @__PURE__ */ jsx("div", { className: "cb-splitter__pane cb-splitter__pane--second", children: /* @__PURE__ */ jsx(Skeleton, { className: "cb-splitter__skeleton-pane" }) })
+      ]
+    }
+  );
+}
+function clampSize(value, minSize, maxSize) {
+  return Math.min(maxSize, Math.max(minSize, Math.round(value)));
+}
+function finiteValue(value, fallback) {
+  return typeof value === "number" && Number.isFinite(value) ? value : fallback;
+}
+function normalizedBounds(minSize, maxSize) {
+  const min = Math.min(100, Math.max(0, Math.round(finiteValue(minSize, 0))));
+  const max = Math.min(100, Math.max(min, Math.round(finiteValue(maxSize, 100))));
+  return { min, max };
+}
+function paneChildren(children) {
+  return Children.toArray(children).flatMap(
+    (child) => isValidElement(child) && child.type === Fragment$1 ? paneChildren(child.props.children) : [child]
+  );
+}
+function SplitterRoot({
+  size,
+  defaultSize = 50,
+  minSize = 0,
+  maxSize = 100,
+  onSizeChange,
+  orientation = "horizontal",
+  handleSize = "md",
+  disabled = false,
+  handleLabel = "Resize panes",
+  children
+}) {
+  const panes = paneChildren(children);
+  if (panes.length !== 2) {
+    throw new Error("Splitter requires exactly two pane children.");
+  }
+  const rootRef = useRef(null);
+  const grabOffsetRef = useRef(0);
+  const [uncontrolledSize, setUncontrolledSize] = useState(() => finiteValue(defaultSize, 50));
+  const { min, max } = normalizedBounds(minSize, maxSize);
+  const currentSize = clampSize(size === void 0 ? uncontrolledSize : finiteValue(size, 50), min, max);
+  const setSize = (nextSize) => {
+    if (disabled) return;
+    const next = clampSize(nextSize, min, max);
+    if (size === void 0) setUncontrolledSize(next);
+    onSizeChange?.(next);
+  };
+  const sizeFromPointer = (event) => {
+    const rootRect = rootRef.current?.getBoundingClientRect();
+    const handleRect = event.currentTarget.getBoundingClientRect();
+    if (!rootRect) return;
+    const rootLength = orientation === "horizontal" ? rootRect.width : rootRect.height;
+    const handleLength = orientation === "horizontal" ? handleRect.width : handleRect.height;
+    const availableLength = rootLength - handleLength;
+    if (availableLength <= 0) return;
+    const rootStart = orientation === "horizontal" ? rootRect.left : rootRect.top;
+    const pointerPosition = orientation === "horizontal" ? event.clientX : event.clientY;
+    setSize((pointerPosition - rootStart - grabOffsetRef.current) / availableLength * 100);
+  };
+  const handlePointerDown = (event) => {
+    if (disabled) return;
+    const handleRect = event.currentTarget.getBoundingClientRect();
+    const handleStart = orientation === "horizontal" ? handleRect.left : handleRect.top;
+    const pointerPosition = orientation === "horizontal" ? event.clientX : event.clientY;
+    grabOffsetRef.current = pointerPosition - handleStart;
+    event.currentTarget.setPointerCapture(event.pointerId);
+    sizeFromPointer(event);
+  };
+  const handlePointerMove = (event) => {
+    if (!disabled && event.currentTarget.hasPointerCapture(event.pointerId)) sizeFromPointer(event);
+  };
+  const handlePointerUp = (event) => {
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) {
+      sizeFromPointer(event);
+      event.currentTarget.releasePointerCapture(event.pointerId);
+    }
+  };
+  const handlePointerCancel = (event) => {
+    if (event.currentTarget.hasPointerCapture(event.pointerId)) event.currentTarget.releasePointerCapture(event.pointerId);
+  };
+  const handleKeyDown = (event) => {
+    if (disabled) return;
+    const decrease = orientation === "horizontal" ? "ArrowLeft" : "ArrowUp";
+    const increase = orientation === "horizontal" ? "ArrowRight" : "ArrowDown";
+    if (event.key === decrease) {
+      event.preventDefault();
+      setSize(currentSize - 1);
+    } else if (event.key === increase) {
+      event.preventDefault();
+      setSize(currentSize + 1);
+    } else if (event.key === "Home") {
+      event.preventDefault();
+      setSize(min);
+    } else if (event.key === "End") {
+      event.preventDefault();
+      setSize(max);
+    }
+  };
+  const style = {
+    "--cb-splitter-first-grow": String(currentSize),
+    "--cb-splitter-second-grow": String(100 - currentSize)
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: rootRef,
+      className: `cb-splitter cb-splitter--${orientation} cb-splitter--handle-${handleSize}${disabled ? " cb-splitter--disabled" : ""}`,
+      style,
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "cb-splitter__pane cb-splitter__pane--first", children: panes[0] }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            className: "cb-splitter__handle",
+            role: "separator",
+            "aria-orientation": orientation === "horizontal" ? "vertical" : "horizontal",
+            "aria-valuenow": currentSize,
+            "aria-valuemin": min,
+            "aria-valuemax": max,
+            "aria-label": handleLabel,
+            "aria-disabled": disabled || void 0,
+            tabIndex: disabled ? -1 : 0,
+            onKeyDown: handleKeyDown,
+            onPointerDown: handlePointerDown,
+            onPointerMove: handlePointerMove,
+            onPointerUp: handlePointerUp,
+            onPointerCancel: handlePointerCancel
+          }
+        ),
+        /* @__PURE__ */ jsx("div", { className: "cb-splitter__pane cb-splitter__pane--second", children: panes[1] })
+      ]
+    }
+  );
+}
+var Splitter = Object.assign(SplitterRoot, { Skeleton: SplitterSkeleton });
 
-export { Alert, AutoComplete, Button, Carousel, Checkbox, Checklist, Coachmark, CommandPalette, DEFAULT_LABELS, DatePicker, DialogClose, Drawer, DrawerClose, Dropdown, Field, Image, Input, InputNumber, LabelsProvider, Modal, MotionProvider, Pagination, Popover, RadioGroup, Rate, Reveal, Select, Sidebar, Stagger, Switch, Table, Tabs, Tag, Textarea, ThemeProvider, TimePicker, ToastProvider, Tooltip, TopBar, Tour, Upload, ariaSortFor, canStep, clamp, decimalPlaces, describeAccept, filterCommands, formatISO, formatTime, groupCommands, hasEnded, initialTourState, isOutOfRange, isSameDay, isTimeOutOfRange, matchesAccept, monthMatrix, nextSort, pageRange, parseDateInput, parseNumber, parseTime, partitionFiles, rankCommand, resolveTarget, shouldAutoplay, startOfDay, stepBy, timeOptions, timeToMinutes, tourReducer, useFieldWiring, useLabels, useMotionSettings, useTheme, useToast };
+export { Alert, AutoComplete, BorderBeam, Button, Calendar, CalendarSkeleton, Carousel, Cascader, CascaderSkeleton, Checkbox, Checklist, Coachmark, Collapse, CollapseSkeleton, ColorPicker, ColorPickerSkeleton, CommandPalette, DEFAULT_LABELS, DatePicker, DialogClose, Drawer, DrawerClose, Dropdown, Field, FloatButton, Image, Input, InputNumber, LabelsProvider, Mentions, MentionsSkeleton, Menu, MenuSkeleton, Modal, MotionProvider, Pagination, Popconfirm, PopconfirmSkeleton, Popover, RadioGroup, Rate, Reveal, Select, Sidebar, Slider, SliderSkeleton, Splitter, SplitterSkeleton, Stagger, Switch, Table, Tabs, Tag, Textarea, ThemeProvider, TimePicker, ToastProvider, Tooltip, TopBar, Tour, Transfer, TransferSkeleton, Tree, TreeSelect, TreeSelectSkeleton, TreeSkeleton, Upload, Watermark, WatermarkSkeleton, ariaSortFor, canStep, clamp, decimalPlaces, describeAccept, filterCommands, formatISO, formatTime, groupCommands, hasEnded, initialTourState, isOutOfRange, isSameDay, isTimeOutOfRange, matchesAccept, monthMatrix, nextSort, pageRange, parseDateInput, parseNumber, parseTime, partitionFiles, rankCommand, resolveTarget, shouldAutoplay, startOfDay, stepBy, timeOptions, timeToMinutes, tourReducer, useFieldWiring, useLabels, useMotionSettings, useTheme, useToast };