@openwarelabs/ui 0.11.1 → 0.12.0

package/dist/index.cjs

@@ -23,9 +23,11 @@ __export(index_exports, {
   Accordion: () => Accordion,
   AccordionItem: () => AccordionItem,
   Alert: () => Alert,
+  AppShell: () => AppShell,
   Avatar: () => Avatar,
   AvatarGroup: () => AvatarGroup,
   Badge: () => Badge,
+  BarChart: () => BarChart,
   Breadcrumbs: () => Breadcrumbs,
   Button: () => Button,
   ButtonGroup: () => ButtonGroup,
@@ -63,6 +65,7 @@ __export(index_exports, {
   DateRangePicker: () => DateRangePicker,
   Dialog: () => Dialog,
   Disclosure: () => Disclosure,
+  DonutChart: () => DonutChart,
   DotGrid: () => DotGrid,
   Drawer: () => Drawer,
   EmptyState: () => EmptyState,
@@ -75,6 +78,7 @@ __export(index_exports, {
   Input: () => Input,
   InputOTP: () => InputOTP,
   Kbd: () => Kbd,
+  LineChart: () => LineChart,
   Link: () => Link,
   ListBox: () => ListBox,
   Menu: () => Menu,
@@ -104,11 +108,16 @@ __export(index_exports, {
   Select: () => Select,
   Separator: () => Separator,
   SettingsRow: () => SettingsRow,
+  SidebarContent: () => SidebarContent,
+  SidebarFooter: () => SidebarFooter,
+  SidebarHeader: () => SidebarHeader,
+  SidebarToggle: () => SidebarToggle,
   SiteHeader: () => SiteHeader,
   Skeleton: () => Skeleton,
   SkeletonRows: () => SkeletonRows,
   Slider: () => Slider,
   Snippet: () => Snippet,
+  Sparkline: () => Sparkline2,
   Spinner: () => Spinner,
   Stack: () => Stack,
   Stat: () => Stat,
@@ -154,6 +163,7 @@ __export(index_exports, {
   toISO: () => toISO,
   toast: () => import_sonner.toast,
   todayISO: () => todayISO,
+  useAppShell: () => useAppShell,
   useControllableState: () => useControllableState,
   useDismiss: () => useDismiss,
   useFloating: () => useFloating,
@@ -312,8 +322,8 @@ var import_react3 = require("react");
 
 // src/hooks/useControllableState.ts
 var import_react2 = require("react");
-function useControllableState(value, defaultValue, onChange) {
-  const [internal, setInternal] = (0, import_react2.useState)(defaultValue);
+function useControllableState(value, defaultValue2, onChange) {
+  const [internal, setInternal] = (0, import_react2.useState)(defaultValue2);
   const isControlled = value !== void 0;
   const current = isControlled ? value : internal;
   const currentRef = (0, import_react2.useRef)(current);
@@ -497,6 +507,27 @@ var InboxIcon = /* @__PURE__ */ icon(
     /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M5.45 5.11 2 12v6a2 2 0 0 0 2 2h16a2 2 0 0 0 2-2v-6l-3.45-6.89A2 2 0 0 0 16.76 4H7.24a2 2 0 0 0-1.79 1.11z" })
   ] })
 );
+var MenuIcon = /* @__PURE__ */ icon(
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M4 5h16" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M4 12h16" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M4 19h16" })
+  ] })
+);
+var PanelLeftOpenIcon = /* @__PURE__ */ icon(
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M9 3v18" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m14 9 3 3-3 3" })
+  ] })
+);
+var PanelLeftCloseIcon = /* @__PURE__ */ icon(
+  /* @__PURE__ */ (0, import_jsx_runtime4.jsxs)(import_jsx_runtime4.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "M9 3v18" }),
+    /* @__PURE__ */ (0, import_jsx_runtime4.jsx)("path", { d: "m16 15-3-3 3-3" })
+  ] })
+);
 
 // src/components/Button/ButtonGroup.tsx
 var import_jsx_runtime5 = require("react/jsx-runtime");
@@ -592,7 +623,7 @@ var import_jsx_runtime6 = require("react/jsx-runtime");
 function SegmentedControl({
   options,
   value,
-  defaultValue,
+  defaultValue: defaultValue2,
   onChange,
   size: size2 = "md",
   fullWidth = false,
@@ -600,7 +631,7 @@ function SegmentedControl({
   className,
   ...aria
 }) {
-  const [current, setCurrent] = useControllableState(value, defaultValue ?? options[0]?.value ?? "", onChange);
+  const [current, setCurrent] = useControllableState(value, defaultValue2 ?? options[0]?.value ?? "", onChange);
   const refs = (0, import_react5.useRef)([]);
   const groupRef = (0, import_react5.useRef)(null);
   useIndicator(groupRef, '[aria-checked="true"]', current);
@@ -1115,7 +1146,7 @@ function ToggleButtonGroup(props) {
     options,
     selectionMode = "single",
     value,
-    defaultValue,
+    defaultValue: defaultValue2,
     onChange,
     disallowEmptySelection = false,
     size: sizeProp,
@@ -1133,7 +1164,7 @@ function ToggleButtonGroup(props) {
   const multiple = selectionMode === "multiple";
   const [selected, setSelected] = useControllableState(
     toList(value),
-    toList(defaultValue) ?? [],
+    toList(defaultValue2) ?? [],
     (next) => onChange?.(multiple ? next : next[0] ?? "")
   );
   const [focusedValue, setFocusedValue] = (0, import_react12.useState)(null);
@@ -1289,7 +1320,7 @@ function CheckboxGroup({
   label,
   description,
   value,
-  defaultValue = [],
+  defaultValue: defaultValue2 = [],
   onChange,
   orientation = "vertical",
   error,
@@ -1298,7 +1329,7 @@ function CheckboxGroup({
   children,
   className
 }) {
-  const [current, setCurrent] = useControllableState(value, defaultValue, onChange);
+  const [current, setCurrent] = useControllableState(value, defaultValue2, onChange);
   const generatedName = (0, import_react13.useId)();
   const errorId = (0, import_react13.useId)();
   return /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
@@ -1757,7 +1788,7 @@ function assignRef2(ref, value) {
 }
 var SearchField = /* @__PURE__ */ (0, import_react17.forwardRef)(function SearchField2({
   value,
-  defaultValue = "",
+  defaultValue: defaultValue2 = "",
   onChange,
   onSubmit,
   loading = false,
@@ -1767,7 +1798,7 @@ var SearchField = /* @__PURE__ */ (0, import_react17.forwardRef)(function Search
   onKeyDown,
   ...inputProps
 }, ref) {
-  const [text, setText] = useControllableState(value, defaultValue, onChange);
+  const [text, setText] = useControllableState(value, defaultValue2, onChange);
   const inputRef = (0, import_react17.useRef)(null);
   function handleKeyDown(event) {
     onKeyDown?.(event);
@@ -1817,7 +1848,7 @@ var import_jsx_runtime18 = require("react/jsx-runtime");
 var decimals = (step) => (String(step).split(".")[1] ?? "").length;
 var NumberField = /* @__PURE__ */ (0, import_react18.forwardRef)(function NumberField2({
   value,
-  defaultValue = null,
+  defaultValue: defaultValue2 = null,
   onChange,
   min,
   max,
@@ -1834,7 +1865,7 @@ var NumberField = /* @__PURE__ */ (0, import_react18.forwardRef)(function Number
   form,
   ...inputProps
 }, ref) {
-  const [number, setNumber] = useControllableState(value, defaultValue, onChange);
+  const [number2, setNumber] = useControllableState(value, defaultValue2, onChange);
   const [draft, setDraft] = (0, import_react18.useState)(null);
   const format = (n) => n === null ? "" : formatOptions ? new Intl.NumberFormat(void 0, formatOptions).format(n) : String(n);
   const clamp3 = (n) => {
@@ -1855,7 +1886,7 @@ var NumberField = /* @__PURE__ */ (0, import_react18.forwardRef)(function Number
     if (keepEditing) setDraft(String(next));
   }
   function stepBy(multiple) {
-    const base = draft !== null && draft !== "" && !Number.isNaN(Number(draft)) ? Number(draft) : number ?? min ?? 0;
+    const base = draft !== null && draft !== "" && !Number.isNaN(Number(draft)) ? Number(draft) : number2 ?? min ?? 0;
     const next = clamp3(base + step * multiple);
     setNumber(next);
     if (draft !== null) setDraft(String(next));
@@ -1877,8 +1908,8 @@ var NumberField = /* @__PURE__ */ (0, import_react18.forwardRef)(function Number
     event.preventDefault();
     move();
   }
-  const atMin = min !== void 0 && number !== null && number <= min;
-  const atMax = max !== void 0 && number !== null && number >= max;
+  const atMin = min !== void 0 && number2 !== null && number2 <= min;
+  const atMax = max !== void 0 && number2 !== null && number2 >= max;
   return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
     "div",
     {
@@ -1911,16 +1942,16 @@ var NumberField = /* @__PURE__ */ (0, import_react18.forwardRef)(function Number
             role: "spinbutton",
             autoComplete: "off",
             className: "ow-number-field__input",
-            "aria-valuenow": number ?? void 0,
+            "aria-valuenow": number2 ?? void 0,
             "aria-valuemin": min,
             "aria-valuemax": max,
-            "aria-valuetext": number === null ? void 0 : format(number),
+            "aria-valuetext": number2 === null ? void 0 : format(number2),
             "aria-invalid": isInvalid || void 0,
             disabled,
-            value: draft ?? format(number),
+            value: draft ?? format(number2),
             onFocus: (event) => {
               onFocus?.(event);
-              setDraft(number === null ? "" : String(number));
+              setDraft(number2 === null ? "" : String(number2));
             },
             onChange: (event) => setDraft(event.target.value),
             onBlur: (event) => {
@@ -1931,7 +1962,7 @@ var NumberField = /* @__PURE__ */ (0, import_react18.forwardRef)(function Number
             ...inputProps
           }
         ),
-        name ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("input", { type: "hidden", name, form, value: number ?? "", disabled }) : null,
+        name ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("input", { type: "hidden", name, form, value: number2 ?? "", disabled }) : null,
         /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
           "button",
           {
@@ -1955,7 +1986,7 @@ var import_jsx_runtime19 = require("react/jsx-runtime");
 function InputOTP({
   length = 6,
   value,
-  defaultValue = "",
+  defaultValue: defaultValue2 = "",
   onChange,
   onComplete,
   type = "numeric",
@@ -1970,7 +2001,7 @@ function InputOTP({
   name,
   className
 }) {
-  const [code, setCode] = useControllableState(value, defaultValue, onChange);
+  const [code, setCode] = useControllableState(value, defaultValue2, onChange);
   const refs = (0, import_react19.useRef)([]);
   const latest = (0, import_react19.useRef)(code);
   latest.current = code;
@@ -2067,35 +2098,35 @@ var import_react21 = require("react");
 
 // src/components/Calendar/dates.ts
 var pad = (n) => String(n).padStart(2, "0");
-function toISO(year, month, day) {
+function toISO(year, month, day2) {
   const date = /* @__PURE__ */ new Date(0);
-  date.setUTCFullYear(year, month, day);
+  date.setUTCFullYear(year, month, day2);
   return `${String(date.getUTCFullYear()).padStart(4, "0")}-${pad(date.getUTCMonth() + 1)}-${pad(date.getUTCDate())}`;
 }
 function parseISO(iso) {
-  const [year, month, day] = iso.split("-").map(Number);
-  return { year, month: month - 1, day };
+  const [year, month, day2] = iso.split("-").map(Number);
+  return { year, month: month - 1, day: day2 };
 }
 function todayISO() {
   const now = /* @__PURE__ */ new Date();
   return toISO(now.getFullYear(), now.getMonth(), now.getDate());
 }
 function addDays(iso, days) {
-  const { year, month, day } = parseISO(iso);
-  return toISO(year, month, day + days);
+  const { year, month, day: day2 } = parseISO(iso);
+  return toISO(year, month, day2 + days);
 }
 function addMonths(iso, months) {
-  const { year, month, day } = parseISO(iso);
+  const { year, month, day: day2 } = parseISO(iso);
   const lastDay = new Date(Date.UTC(year, month + months + 1, 0)).getUTCDate();
-  return toISO(year, month + months, Math.min(day, lastDay));
+  return toISO(year, month + months, Math.min(day2, lastDay));
 }
 function weekday(iso) {
-  const { year, month, day } = parseISO(iso);
-  return new Date(Date.UTC(year, month, day)).getUTCDay();
+  const { year, month, day: day2 } = parseISO(iso);
+  return new Date(Date.UTC(year, month, day2)).getUTCDay();
 }
 function toDate(iso) {
-  const { year, month, day } = parseISO(iso);
-  return new Date(Date.UTC(year, month, day));
+  const { year, month, day: day2 } = parseISO(iso);
+  return new Date(Date.UTC(year, month, day2));
 }
 function formatDate(iso, locale, options) {
   return new Intl.DateTimeFormat(locale, { ...options, timeZone: "UTC" }).format(toDate(iso));
@@ -2336,9 +2367,9 @@ function SegmentedField({
     segmentRefs.current.slice(0, segments.length).forEach((element, index) => {
       if (!element) return;
       const box = element.getBoundingClientRect();
-      const gap = event.clientX < box.left ? box.left - event.clientX : Math.max(0, event.clientX - box.right);
-      if (gap < distance) {
-        distance = gap;
+      const gap2 = event.clientX < box.left ? box.left - event.clientX : Math.max(0, event.clientX - box.right);
+      if (gap2 < distance) {
+        distance = gap2;
         nearest = index;
       }
     });
@@ -2506,12 +2537,12 @@ function daysIn(year, month) {
 function fromISO(iso) {
   const match = /^(\d{4})-(\d{2})-(\d{2})$/.exec(iso);
   if (!match) return {};
-  const [year, month, day] = [Number(match[1]), Number(match[2]), Number(match[3])];
-  if (year < 1 || month < 1 || month > 12 || day < 1 || day > daysIn(year, month)) return {};
-  return { year, month, day };
+  const [year, month, day2] = [Number(match[1]), Number(match[2]), Number(match[3])];
+  if (year < 1 || month < 1 || month > 12 || day2 < 1 || day2 > daysIn(year, month)) return {};
+  return { year, month, day: day2 };
 }
-function toISOValue({ day, month, year }) {
-  return day === void 0 || month === void 0 || year === void 0 ? "" : `${pad2(year, 4)}-${pad2(month)}-${pad2(day)}`;
+function toISOValue({ day: day2, month, year }) {
+  return day2 === void 0 || month === void 0 || year === void 0 ? "" : `${pad2(year, 4)}-${pad2(month)}-${pad2(day2)}`;
 }
 function constrain(parts) {
   const last = daysIn(parts.year, parts.month);
@@ -2528,7 +2559,7 @@ function dateLayout(locale) {
 }
 var DateField = /* @__PURE__ */ (0, import_react21.forwardRef)(function DateField2({
   value,
-  defaultValue = "",
+  defaultValue: defaultValue2 = "",
   onChange,
   min,
   max,
@@ -2545,7 +2576,7 @@ var DateField = /* @__PURE__ */ (0, import_react21.forwardRef)(function DateFiel
   "aria-describedby": ariaDescribedBy,
   className
 }, ref) {
-  const [current, setCurrent] = useControllableState(value, defaultValue, onChange);
+  const [current, setCurrent] = useControllableState(value, defaultValue2, onChange);
   const [parts, setParts] = (0, import_react21.useState)(() => fromISO(current));
   const partsRef = (0, import_react21.useRef)(parts);
   partsRef.current = parts;
@@ -2691,7 +2722,7 @@ function timeLayout(locale, twelve, seconds) {
 }
 var TimeField = /* @__PURE__ */ (0, import_react22.forwardRef)(function TimeField2({
   value,
-  defaultValue = "",
+  defaultValue: defaultValue2 = "",
   onChange,
   hourCycle,
   granularity = "minute",
@@ -2711,7 +2742,7 @@ var TimeField = /* @__PURE__ */ (0, import_react22.forwardRef)(function TimeFiel
   "aria-describedby": ariaDescribedBy,
   className
 }, ref) {
-  const [current, setCurrent] = useControllableState(value, defaultValue, onChange);
+  const [current, setCurrent] = useControllableState(value, defaultValue2, onChange);
   const localeCycle = (0, import_react22.useMemo)(() => localeHourCycle(locale), [locale]);
   const twelve = (hourCycle ?? localeCycle) === 12;
   const seconds = granularity === "second";
@@ -3195,7 +3226,7 @@ function ListBoxWithRef({
   options,
   selectionMode,
   value,
-  defaultValue,
+  defaultValue: defaultValue2,
   onChange,
   disallowEmptySelection = false,
   emptyMessage = "No options",
@@ -3213,7 +3244,7 @@ function ListBoxWithRef({
   const multiple = selectionMode === "multiple";
   const [current, setCurrent] = useControllableState(
     value,
-    defaultValue ?? (multiple ? [] : ""),
+    defaultValue2 ?? (multiple ? [] : ""),
     onChange
   );
   const listRef = (0, import_react25.useRef)(null);
@@ -3497,7 +3528,7 @@ function assignRef4(ref, value) {
 var Combobox = /* @__PURE__ */ (0, import_react26.forwardRef)(function Combobox2({
   options,
   value,
-  defaultValue = "",
+  defaultValue: defaultValue2 = "",
   onChange,
   onInputChange,
   placeholder = "Search\u2026",
@@ -3510,7 +3541,7 @@ var Combobox = /* @__PURE__ */ (0, import_react26.forwardRef)(function Combobox2
   className,
   ...aria
 }, ref) {
-  const [selected, setSelected] = useControllableState(value, defaultValue, onChange);
+  const [selected, setSelected] = useControllableState(value, defaultValue2, onChange);
   const labelOf = (v) => options.find((option) => option.value === v)?.label ?? (allowCustomValue ? v : "");
   const [text, setText] = (0, import_react26.useState)(() => labelOf(selected));
   const [isOpen, setOpen] = (0, import_react26.useState)(false);
@@ -3725,7 +3756,7 @@ function RadioGroup({
   label,
   description,
   value,
-  defaultValue = "",
+  defaultValue: defaultValue2 = "",
   onChange,
   orientation = "vertical",
   variant = "default",
@@ -3735,7 +3766,7 @@ function RadioGroup({
   children,
   className
 }) {
-  const [current, select] = useControllableState(value, defaultValue, onChange);
+  const [current, select] = useControllableState(value, defaultValue2, onChange);
   const generatedName = (0, import_react27.useId)();
   return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(RadioGroupContext.Provider, { value: { name: name ?? generatedName, value: current, select, disabled }, children: /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
     Fieldset,
@@ -3806,7 +3837,7 @@ var import_react29 = require("react");
 var import_jsx_runtime29 = require("react/jsx-runtime");
 function Slider({
   value,
-  defaultValue,
+  defaultValue: defaultValue2,
   onChange,
   onChangeEnd,
   min = 0,
@@ -3822,7 +3853,7 @@ function Slider({
   disabled,
   className
 }) {
-  const [current, setCurrent] = useControllableState(value, defaultValue ?? min, onChange);
+  const [current, setCurrent] = useControllableState(value, defaultValue2 ?? min, onChange);
   const labelId = (0, import_react29.useId)();
   const isRange = Array.isArray(current);
   const [low, high] = isRange ? current : [min, current];
@@ -4003,8 +4034,8 @@ function FileDropZone({
 // src/components/Calendar/Calendar.tsx
 var import_react31 = require("react");
 var import_jsx_runtime31 = require("react/jsx-runtime");
-var Calendar = /* @__PURE__ */ (0, import_react31.forwardRef)(function Calendar2({ value, defaultValue = "", onChange, min, max, isDateDisabled, locale, weekStartsOn = 1, autoFocus = false, className }, ref) {
-  const [selected, setSelected] = useControllableState(value, defaultValue, onChange);
+var Calendar = /* @__PURE__ */ (0, import_react31.forwardRef)(function Calendar2({ value, defaultValue: defaultValue2 = "", onChange, min, max, isDateDisabled, locale, weekStartsOn = 1, autoFocus = false, className }, ref) {
+  const [selected, setSelected] = useControllableState(value, defaultValue2, onChange);
   const today = todayISO();
   const [focused, setFocused] = (0, import_react31.useState)(() => selected || clampDate(today, min, max));
   const [shouldFocus, setShouldFocus] = (0, import_react31.useState)(autoFocus);
@@ -4078,14 +4109,14 @@ function canShowAfter(last, max) {
   return !max || addMonths(last, 1) <= max;
 }
 function dateForKey(event, date, weekStartsOn) {
-  const day = (weekday(date) - weekStartsOn + 7) % 7;
+  const day2 = (weekday(date) - weekStartsOn + 7) % 7;
   const moves = {
     ArrowLeft: () => addDays(date, -1),
     ArrowRight: () => addDays(date, 1),
     ArrowUp: () => addDays(date, -7),
     ArrowDown: () => addDays(date, 7),
-    Home: () => addDays(date, -day),
-    End: () => addDays(date, 6 - day),
+    Home: () => addDays(date, -day2),
+    End: () => addDays(date, 6 - day2),
     PageUp: () => addMonths(date, event.shiftKey ? -12 : -1),
     PageDown: () => addMonths(date, event.shiftKey ? 12 : 1)
   };
@@ -4199,7 +4230,7 @@ function assignRef5(ref, value) {
 }
 var DatePicker = /* @__PURE__ */ (0, import_react32.forwardRef)(function DatePicker2({
   value,
-  defaultValue = "",
+  defaultValue: defaultValue2 = "",
   onChange,
   placeholder = "Pick a date",
   formatOptions = { dateStyle: "medium" },
@@ -4214,7 +4245,7 @@ var DatePicker = /* @__PURE__ */ (0, import_react32.forwardRef)(function DatePic
   "aria-describedby": ariaDescribedBy,
   ...calendarProps
 }, ref) {
-  const [date, setDate] = useControllableState(value, defaultValue, onChange);
+  const [date, setDate] = useControllableState(value, defaultValue2, onChange);
   const [isOpen, setOpen] = (0, import_react32.useState)(false);
   const triggerRef = (0, import_react32.useRef)(null);
   const panelRef = (0, import_react32.useRef)(null);
@@ -4297,9 +4328,9 @@ var DatePicker = /* @__PURE__ */ (0, import_react32.forwardRef)(function DatePic
 // src/components/Calendar/RangeCalendar.tsx
 var import_react33 = require("react");
 var import_jsx_runtime33 = require("react/jsx-runtime");
-var RangeCalendar = /* @__PURE__ */ (0, import_react33.forwardRef)(function RangeCalendar2({ value, defaultValue = null, onChange, min, max, isDateDisabled, locale, weekStartsOn = 1, visibleMonths = 1, autoFocus = false, className }, ref) {
+var RangeCalendar = /* @__PURE__ */ (0, import_react33.forwardRef)(function RangeCalendar2({ value, defaultValue: defaultValue2 = null, onChange, min, max, isDateDisabled, locale, weekStartsOn = 1, visibleMonths = 1, autoFocus = false, className }, ref) {
   const months = visibleMonths;
-  const [range, setRange] = useControllableState(value, defaultValue, onChange);
+  const [range, setRange] = useControllableState(value, defaultValue2, onChange);
   const today = todayISO();
   const [focused, setFocused] = (0, import_react33.useState)(() => range ? ordered(range.start, range.end).start : clampDate(today, min, max));
   const [firstMonth, setFirstMonth] = (0, import_react33.useState)(() => fitMonths(startOfMonth(focused), months, min, max));
@@ -4371,8 +4402,8 @@ var RangeCalendar = /* @__PURE__ */ (0, import_react33.forwardRef)(function Rang
   }
   function cellClassName(date, column) {
     if (!shown || shown.start === shown.end || !inShown(date)) return void 0;
-    const { day } = parseISO(date);
-    const monthStart = months > 1 && day === 1;
+    const { day: day2 } = parseISO(date);
+    const monthStart = months > 1 && day2 === 1;
     const monthEnd = months > 1 && parseISO(addDays(date, 1)).day === 1;
     return cx("ow-range-calendar__cell--in-range", {
       "ow-range-calendar__cell--start": date === shown.start,
@@ -4482,7 +4513,7 @@ function useMediaQuery(query) {
 }
 var DateRangePicker = /* @__PURE__ */ (0, import_react34.forwardRef)(function DateRangePicker2({
   value,
-  defaultValue = null,
+  defaultValue: defaultValue2 = null,
   onChange,
   presets,
   visibleMonths = 2,
@@ -4499,7 +4530,7 @@ var DateRangePicker = /* @__PURE__ */ (0, import_react34.forwardRef)(function Da
   "aria-describedby": ariaDescribedBy,
   ...calendarProps
 }, ref) {
-  const [range, setRange] = useControllableState(value, defaultValue, onChange);
+  const [range, setRange] = useControllableState(value, defaultValue2, onChange);
   const [isOpen, setOpen] = (0, import_react34.useState)(false);
   const fieldRef = (0, import_react34.useRef)(null);
   const triggerRef = (0, import_react34.useRef)(null);
@@ -4698,8 +4729,8 @@ function ProgressCircle({
   className
 }) {
   const { box, stroke } = circleSizes[size2];
-  const radius = (box - stroke) / 2;
-  const circumference = 2 * Math.PI * radius;
+  const radius2 = (box - stroke) / 2;
+  const circumference = 2 * Math.PI * radius2;
   const indeterminate = value === void 0;
   const pct = indeterminate ? 25 : Math.min(100, Math.max(0, value / max * 100));
   return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
@@ -4719,14 +4750,14 @@ function ProgressCircle({
       style: { width: box, height: box },
       children: [
         /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("svg", { width: box, height: box, viewBox: `0 0 ${box} ${box}`, "aria-hidden": "true", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("circle", { className: "ow-progress-circle__track", cx: box / 2, cy: box / 2, r: radius, strokeWidth: stroke, fill: "none" }),
+          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("circle", { className: "ow-progress-circle__track", cx: box / 2, cy: box / 2, r: radius2, strokeWidth: stroke, fill: "none" }),
           /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
             "circle",
             {
               className: "ow-progress-circle__fill",
               cx: box / 2,
               cy: box / 2,
-              r: radius,
+              r: radius2,
               strokeWidth: stroke,
               fill: "none",
               strokeLinecap: "round",
@@ -4865,7 +4896,7 @@ function Toaster({
   duration = 6e3,
   closeButton = true,
   offset = 16,
-  gap = 10,
+  gap: gap2 = 10,
   id,
   className
 }) {
@@ -4898,7 +4929,7 @@ function Toaster({
       closeButton,
       offset,
       mobileOffset: offset,
-      gap,
+      gap: gap2,
       icons: icons2,
       className: cx("ow-toaster", className),
       containerAriaLabel: "Notifications",
@@ -5514,8 +5545,8 @@ function useTabs(component) {
   return context;
 }
 var idPart = (value) => value.replace(/[^\w-]/g, "_");
-function Tabs({ value, defaultValue = "", onValueChange, variant = "segmented", className, children, ...props }) {
-  const [current, select] = useControllableState(value, defaultValue, onValueChange);
+function Tabs({ value, defaultValue: defaultValue2 = "", onValueChange, variant = "segmented", className, children, ...props }) {
+  const [current, select] = useControllableState(value, defaultValue2, onValueChange);
   const baseId = (0, import_react46.useId)();
   return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(TabsContext.Provider, { value: { value: current, select, baseId, variant }, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: cx("ow-tabs", `ow-tabs--${variant}`, className), ...props, children }) });
 }
@@ -5676,7 +5707,7 @@ var AccordionContext = /* @__PURE__ */ (0, import_react47.createContext)(null);
 function Accordion({
   type = "single",
   value,
-  defaultValue = [],
+  defaultValue: defaultValue2 = [],
   onValueChange,
   variant = "bordered",
   headingLevel = 3,
@@ -5685,7 +5716,7 @@ function Accordion({
   onKeyDown,
   ...props
 }) {
-  const [openValues, setOpenValues] = useControllableState(value, defaultValue, onValueChange);
+  const [openValues, setOpenValues] = useControllableState(value, defaultValue2, onValueChange);
   function toggle(item) {
     const isOpen = openValues.includes(item);
     if (type === "single") setOpenValues(isOpen ? [] : [item]);
@@ -5880,7 +5911,16 @@ function Steps({ items: items2, current = 0, orientation = "vertical", title, la
 }
 
 // src/components/NavList/NavList.tsx
+var import_react51 = require("react");
+
+// src/components/AppShell/AppShell.context.ts
 var import_react50 = require("react");
+var AppShellContext = /* @__PURE__ */ (0, import_react50.createContext)(null);
+function useAppShell() {
+  return (0, import_react50.useContext)(AppShellContext);
+}
+
+// src/components/NavList/NavList.tsx
 var import_jsx_runtime50 = require("react/jsx-runtime");
 function NavList({ label, heading, orientation = "vertical", children, className }) {
   return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("nav", { "aria-label": label, className: cx("ow-nav", `ow-nav--${orientation}`, className), children: [
@@ -5888,7 +5928,8 @@ function NavList({ label, heading, orientation = "vertical", children, className
     children
   ] });
 }
-var NavItem = /* @__PURE__ */ (0, import_react50.forwardRef)(function NavItem2({ icon: icon2, active = false, className, children, type = "button", href, end, ...buttonProps }, ref) {
+var NavItem = /* @__PURE__ */ (0, import_react51.forwardRef)(function NavItem2({ icon: icon2, active = false, className, children, type = "button", href, end, ...buttonProps }, ref) {
+  const collapsed = (0, import_react51.useContext)(AppShellContext)?.collapsed ?? false;
   const content = /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)(import_jsx_runtime50.Fragment, { children: [
     icon2 ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "ow-nav__icon", children: icon2 }) : null,
     /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "ow-nav__label", children }),
@@ -5898,24 +5939,211 @@ var NavItem = /* @__PURE__ */ (0, import_react50.forwardRef)(function NavItem2({
     "aria-current": active ? "page" : void 0,
     className: cx("ow-nav__item", active && "ow-nav__item--active", className)
   };
-  if (href !== void 0) {
-    return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(
-      "a",
-      {
-        ref,
-        href,
-        ...shared,
-        ...buttonProps,
-        children: content
-      }
-    );
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("button", { ref, type, ...shared, ...buttonProps, children: content });
+  const item = href !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("a", { ref, href, ...shared, ...buttonProps, children: content }) : /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("button", { ref, type, ...shared, ...buttonProps, children: content });
+  return collapsed ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)(Tooltip, { label: children, placement: "right", children: item }) : item;
 });
 
-// src/components/Table/Table.tsx
-var import_react51 = require("react");
+// src/components/AppShell/AppShell.tsx
+var import_react53 = require("react");
+
+// src/components/Layout/Layout.tsx
+var import_react52 = require("react");
 var import_jsx_runtime51 = require("react/jsx-runtime");
+var space = (token) => token === "none" ? "0" : `var(--ow-space-${token})`;
+var alignments = { start: "flex-start", center: "center", end: "flex-end", stretch: "stretch", baseline: "baseline", between: "space-between" };
+function Stack({
+  direction = "column",
+  gap: gap2 = "md",
+  align,
+  justify,
+  wrap = false,
+  as = "div",
+  className,
+  style,
+  children,
+  ...props
+}) {
+  const Element2 = as;
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+    Element2,
+    {
+      className: cx("ow-stack", className),
+      style: {
+        flexDirection: direction,
+        gap: space(gap2),
+        alignItems: align ? alignments[align] : void 0,
+        justifyContent: justify ? alignments[justify] : void 0,
+        flexWrap: wrap ? "wrap" : void 0,
+        ...style
+      },
+      ...props,
+      children
+    }
+  );
+}
+function Separator({ orientation = "horizontal", label, spacing = "none", className }) {
+  const margin2 = orientation === "horizontal" ? `${space(spacing)} 0` : `0 ${space(spacing)}`;
+  if (label && orientation === "horizontal") {
+    return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { role: "separator", className: cx("ow-separator-label", className), style: { margin: margin2 }, children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "ow-separator-label__text", children: label }) });
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+    "div",
+    {
+      role: "separator",
+      "aria-orientation": orientation,
+      className: cx("ow-separator", `ow-separator--${orientation}`, className),
+      style: { margin: margin2 }
+    }
+  );
+}
+function ScrollShadow({
+  orientation = "vertical",
+  size: size2 = 32,
+  maxSize,
+  className,
+  style,
+  children,
+  "aria-label": ariaLabel,
+  ...props
+}) {
+  const ref = (0, import_react52.useRef)(null);
+  const [edges, setEdges] = (0, import_react52.useState)({ start: false, end: false });
+  (0, import_react52.useEffect)(() => {
+    const element = ref.current;
+    if (!element) return;
+    const update = () => {
+      const position = orientation === "vertical" ? element.scrollTop : element.scrollLeft;
+      const extent = orientation === "vertical" ? element.scrollHeight - element.clientHeight : element.scrollWidth - element.clientWidth;
+      setEdges({ start: position > 1, end: position < extent - 1 });
+    };
+    update();
+    element.addEventListener("scroll", update, { passive: true });
+    const observer = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(update);
+    observer?.observe(element);
+    if (element.firstElementChild) observer?.observe(element.firstElementChild);
+    return () => {
+      element.removeEventListener("scroll", update);
+      observer?.disconnect();
+    };
+  }, [orientation]);
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+    "div",
+    {
+      ref,
+      className: cx("ow-scroll-shadow", `ow-scroll-shadow--${orientation}`, className),
+      "data-start": edges.start || void 0,
+      "data-end": edges.end || void 0,
+      tabIndex: ariaLabel ? 0 : void 0,
+      role: ariaLabel ? "region" : void 0,
+      "aria-label": ariaLabel,
+      style: {
+        "--ow-scroll-shadow": `${size2}px`,
+        [orientation === "vertical" ? "maxHeight" : "maxWidth"]: maxSize,
+        ...style
+      },
+      ...props,
+      children
+    }
+  );
+}
+function VisuallyHidden({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: cx("ow-visually-hidden", className), ...props });
+}
+
+// src/components/AppShell/AppShell.tsx
+var import_jsx_runtime52 = require("react/jsx-runtime");
+function AppShell({
+  sidebar,
+  children,
+  variant = "inset",
+  collapsible = false,
+  collapsed,
+  defaultCollapsed = false,
+  onCollapsedChange,
+  breakpoint = "md",
+  topbar,
+  topbarActions,
+  labels = {},
+  className,
+  ...props
+}) {
+  const sidebarId = (0, import_react53.useId)();
+  const [ownCollapsed, setOwnCollapsed] = useControllableState(collapsed, defaultCollapsed, onCollapsedChange);
+  const [drawerOpen, setDrawerOpen] = (0, import_react53.useState)(false);
+  const folded = collapsible && ownCollapsed;
+  const openNavigation = (0, import_react53.useCallback)(() => setDrawerOpen(true), []);
+  const closeNavigation = (0, import_react53.useCallback)(() => setDrawerOpen(false), []);
+  const shared = (0, import_react53.useMemo)(
+    () => ({
+      collapsible,
+      setCollapsed: setOwnCollapsed,
+      toggleCollapsed: () => setOwnCollapsed((previous) => !previous),
+      openNavigation,
+      closeNavigation,
+      sidebarId
+    }),
+    [collapsible, setOwnCollapsed, openNavigation, closeNavigation, sidebarId]
+  );
+  const beside = (0, import_react53.useMemo)(() => ({ ...shared, collapsed: folded, inDrawer: false }), [shared, folded]);
+  const inDrawer = (0, import_react53.useMemo)(() => ({ ...shared, collapsed: false, inDrawer: true }), [shared]);
+  const closeOnChoice = (event) => {
+    if (event.target.closest(".ow-nav__item, [data-closes-navigation]")) setDrawerOpen(false);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
+    "div",
+    {
+      className: cx("ow-app-shell", `ow-app-shell--${variant}`, `ow-app-shell--${breakpoint}`, folded && "ow-app-shell--collapsed", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "ow-app-shell__frame", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(AppShellContext.Provider, { value: beside, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("aside", { id: sidebarId, className: "ow-app-shell__sidebar", "aria-label": labels.navigation ?? "Main navigation", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "ow-sidebar", children: sidebar }) }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "ow-app-shell__body", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("header", { className: "ow-app-shell__topbar", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Button, { variant: "ghost", iconOnly: true, "aria-label": labels.openNavigation ?? "Open navigation", onClick: openNavigation, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(MenuIcon, { size: 18 }) }),
+              /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "ow-app-shell__topbar-start", children: topbar }),
+              topbarActions ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "ow-app-shell__topbar-end", children: topbarActions }) : null
+            ] }),
+            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("main", { className: "ow-app-shell__main", children })
+          ] })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Drawer, { open: drawerOpen, onClose: closeNavigation, side: "left", size: 300, title: labels.menu ?? "Menu", className: "ow-app-shell__drawer", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(AppShellContext.Provider, { value: inDrawer, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "ow-sidebar ow-sidebar--drawer", onClick: closeOnChoice, children: sidebar }) }) })
+      ]
+    }
+  );
+}
+function SidebarHeader({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: cx("ow-sidebar__header", className), ...props });
+}
+function SidebarContent({ className, children, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(ScrollShadow, { className: cx("ow-sidebar__content", className), ...props, children });
+}
+function SidebarFooter({ className, ...props }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: cx("ow-sidebar__footer", className), ...props });
+}
+function SidebarToggle({ labels = {}, className }) {
+  const shell = useAppShell();
+  if (!shell?.collapsible || shell.inDrawer) return null;
+  const label = shell.collapsed ? labels.expand ?? "Expand sidebar" : labels.collapse ?? "Collapse sidebar";
+  const Icon = shell.collapsed ? PanelLeftOpenIcon : PanelLeftCloseIcon;
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Tooltip, { label, placement: "right", children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
+    Button,
+    {
+      variant: "ghost",
+      iconOnly: true,
+      size: "sm",
+      "aria-label": label,
+      "aria-expanded": !shell.collapsed,
+      "aria-controls": shell.sidebarId,
+      className: cx("ow-sidebar__toggle", className),
+      onClick: shell.toggleCollapsed,
+      children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Icon, { size: 16 })
+    }
+  ) });
+}
+
+// src/components/Table/Table.tsx
+var import_react54 = require("react");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 function compare(a, b) {
   if (typeof a === "number" && typeof b === "number") return a - b;
   return String(a).localeCompare(String(b), void 0, { numeric: true, sensitivity: "base" });
@@ -5950,7 +6178,7 @@ function Table({
     return typeof first === "string" || typeof first === "number" ? String(first) : `row ${index + 1}`;
   };
   const field = (row, key) => row[key];
-  const sorted = (0, import_react51.useMemo)(() => {
+  const sorted = (0, import_react54.useMemo)(() => {
     if (!currentSort || manualSort) return rows;
     const column = columns.find((c) => c.key === currentSort.key);
     if (!column) return rows;
@@ -5966,16 +6194,16 @@ function Table({
     );
   }
   const selectable = selectionMode === "multiple";
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
     "div",
     {
       className: cx("ow-table-wrap", stickyHeader && "ow-table-wrap--sticky", className),
       style: maxHeight ? { maxHeight } : void 0,
       tabIndex: maxHeight ? 0 : void 0,
-      children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("table", { className: cx("ow-table", `ow-table--${density}`), children: [
-        caption ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("caption", { className: cx("ow-table__caption", hideCaption && "ow-visually-hidden"), children: caption }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("tr", { children: [
-          selectable ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("th", { className: "ow-table__select", scope: "col", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("table", { className: cx("ow-table", `ow-table--${density}`), children: [
+        caption ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("caption", { className: cx("ow-table__caption", hideCaption && "ow-visually-hidden"), children: caption }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("tr", { children: [
+          selectable ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("th", { className: "ow-table__select", scope: "col", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
             Checkbox,
             {
               size: "sm",
@@ -5989,27 +6217,27 @@ function Table({
           ) }) : null,
           columns.map((column) => {
             const direction = currentSort?.key === column.key ? currentSort.direction : void 0;
-            return /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+            return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
               "th",
               {
                 scope: "col",
                 "aria-sort": direction ?? (column.sortable ? "none" : void 0),
                 className: cx(`ow-table__cell--${column.align ?? "start"}`),
                 style: column.width !== void 0 ? { width: column.width } : void 0,
-                children: column.sortable ? /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("button", { type: "button", className: "ow-table__sort", onClick: () => toggleSort(column.key), children: [
+                children: column.sortable ? /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("button", { type: "button", className: "ow-table__sort", onClick: () => toggleSort(column.key), children: [
                   column.header,
-                  /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: cx("ow-table__sort-icon", direction && "ow-table__sort-icon--active"), children: direction === "ascending" ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(ArrowUpIcon, { size: 12 }) : direction === "descending" ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(ArrowDownIcon, { size: 12 }) : /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(ChevronsUpDownIcon, { size: 12 }) })
+                  /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: cx("ow-table__sort-icon", direction && "ow-table__sort-icon--active"), children: direction === "ascending" ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ArrowUpIcon, { size: 12 }) : direction === "descending" ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ArrowDownIcon, { size: 12 }) : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ChevronsUpDownIcon, { size: 12 }) })
                 ] }) : column.header
               },
               column.key
             );
           })
         ] }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("tbody", { children: sorted.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("td", { className: "ow-table__empty", colSpan: columns.length + (selectable ? 1 : 0), children: emptyContent }) }) : sorted.map((row, index) => {
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("tbody", { children: sorted.length === 0 ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("tr", { children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("td", { className: "ow-table__empty", colSpan: columns.length + (selectable ? 1 : 0), children: emptyContent }) }) : sorted.map((row, index) => {
           const key = keyOf2(row);
           const isSelected = selected.includes(key);
-          return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("tr", { className: cx(isSelected && "ow-table__row--selected"), children: [
-            selectable ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("td", { className: "ow-table__select", children: /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("tr", { className: cx(isSelected && "ow-table__row--selected"), children: [
+            selectable ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("td", { className: "ow-table__select", children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
               Checkbox,
               {
                 size: "sm",
@@ -6020,7 +6248,7 @@ function Table({
                 )
               }
             ) }) : null,
-            columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("td", { className: cx(`ow-table__cell--${column.align ?? "start"}`), children: column.render ? column.render(row) : field(row, column.key) }, column.key))
+            columns.map((column) => /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("td", { className: cx(`ow-table__cell--${column.align ?? "start"}`), children: column.render ? column.render(row) : field(row, column.key) }, column.key))
           ] }, key);
         }) })
       ] })
@@ -6029,7 +6257,7 @@ function Table({
 }
 
 // src/components/Stat/Stat.tsx
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 function Sparkline({ values }) {
   const max = Math.max(...values);
   const min = Math.min(...values);
@@ -6041,37 +6269,483 @@ function Sparkline({ values }) {
   });
   const line = points.map(([x, y], index) => `${index ? "L" : "M"}${x.toFixed(2)} ${y.toFixed(2)}`).join(" ");
   const [lastX, lastY] = points[points.length - 1];
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "ow-stat__trend", "aria-hidden": "true", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("svg", { viewBox: "0 0 100 40", preserveAspectRatio: "none", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("path", { d: `${line} L100 40 L0 40 Z`, className: "ow-stat__trend-area" }),
-      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("path", { d: line, className: "ow-stat__trend-line", vectorEffect: "non-scaling-stroke" })
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "ow-stat__trend", "aria-hidden": "true", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("svg", { viewBox: "0 0 100 40", preserveAspectRatio: "none", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("path", { d: `${line} L100 40 L0 40 Z`, className: "ow-stat__trend-area" }),
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("path", { d: line, className: "ow-stat__trend-line", vectorEffect: "non-scaling-stroke" })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "ow-stat__trend-end", style: { left: `${lastX}%`, top: `${lastY / 40 * 100}%` } })
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "ow-stat__trend-end", style: { left: `${lastX}%`, top: `${lastY / 40 * 100}%` } })
   ] });
 }
 function Stat({ label, value, icon: icon2, change, changeTone, description, trend, className }) {
   const tone = changeTone ?? (change?.startsWith("+") ? "positive" : /^[-−]/.test(change ?? "") ? "negative" : "neutral");
   const rising = change ? !/^[-−]/.test(change) : false;
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: cx("ow-stat", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "ow-stat__label", children: [
-      icon2 ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "ow-stat__icon", children: icon2 }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { children: label })
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: cx("ow-stat", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "ow-stat__label", children: [
+      icon2 ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "ow-stat__icon", children: icon2 }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { children: label })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { className: "ow-stat__row", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("span", { className: "ow-stat__value", children: value }),
-      change ? /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("span", { className: cx("ow-stat__change", `ow-stat__change--${tone}`), children: [
-        tone === "neutral" ? null : rising ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(ArrowUpIcon, { size: 12 }) : /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(ArrowDownIcon, { size: 12 }),
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "ow-stat__row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "ow-stat__value", children: value }),
+      change ? /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("span", { className: cx("ow-stat__change", `ow-stat__change--${tone}`), children: [
+        tone === "neutral" ? null : rising ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ArrowUpIcon, { size: 12 }) : /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(ArrowDownIcon, { size: 12 }),
         change
       ] }) : null
     ] }),
-    description ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "ow-stat__description", children: description }) : null,
-    trend && trend.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Sparkline, { values: trend }) : null
+    description ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "ow-stat__description", children: description }) : null,
+    trend && trend.length > 1 ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Sparkline, { values: trend }) : null
+  ] });
+}
+
+// src/components/Chart/Cartesian.tsx
+var import_react56 = require("react");
+
+// src/components/Chart/chartUtils.ts
+var import_react55 = require("react");
+var colorOf = (color, index) => color === void 0 ? `var(--ow-chart-${index % 8 + 1})` : typeof color === "number" ? `var(--ow-chart-${color})` : color;
+var seriesColors = (series) => series.map((entry, index) => colorOf(entry.color, index));
+var number = new Intl.NumberFormat();
+var compact = new Intl.NumberFormat(void 0, { notation: "compact", maximumFractionDigits: 1 });
+var day = new Intl.DateTimeFormat(void 0, { day: "numeric", month: "short" });
+var defaultValue = (value) => number.format(value);
+var defaultTick = (value) => compact.format(value);
+var defaultIndex = (value) => value instanceof Date ? day.format(value) : String(value ?? "");
+var valueOf = (row, key) => {
+  const value = row?.[key];
+  return typeof value === "number" && Number.isFinite(value) ? value : 0;
+};
+function niceTicks(min, max) {
+  const low = Math.min(0, min);
+  const high = Math.max(0, max);
+  const rough = (high - low || 1) / 4;
+  const power = 10 ** Math.floor(Math.log10(rough));
+  const step = [1, 2, 2.5, 5, 10].map((factor) => factor * power).find((candidate) => candidate >= rough);
+  const start = Math.floor(low / step) * step;
+  const end = Math.ceil(high / step) * step || step;
+  const ticks = [];
+  for (let tick = start; tick <= end + step / 2; tick += step) ticks.push(Math.round(tick / step) * step);
+  return ticks;
+}
+function useWidth() {
+  const ref = (0, import_react55.useRef)(null);
+  const [width, setWidth] = (0, import_react55.useState)(0);
+  (0, import_react55.useLayoutEffect)(() => {
+    const element = ref.current;
+    if (!element) return;
+    const measure = () => setWidth(element.clientWidth);
+    measure();
+    if (typeof ResizeObserver === "undefined") return;
+    const observer = new ResizeObserver(measure);
+    observer.observe(element);
+    return () => observer.disconnect();
+  }, []);
+  return [ref, width];
+}
+var textWidth = (text) => text.length * 6.6;
+
+// src/components/Chart/ChartParts.tsx
+var import_jsx_runtime55 = require("react/jsx-runtime");
+function ChartLegend({ items: items2, shape }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("ul", { className: "ow-chart__legend", children: items2.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("li", { className: "ow-chart__legend-item", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: `ow-chart__key ow-chart__key--${shape}`, style: { background: item.color }, "aria-hidden": "true" }),
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "ow-chart__legend-label", children: item.label }),
+    item.value !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "ow-chart__legend-value", children: item.value }) : null
+  ] }, i)) });
+}
+function ChartTable({ caption, head, rows }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("table", { className: "ow-visually-hidden", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("caption", { children: caption }),
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("thead", { children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("tr", { children: head.map((cell, i) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("th", { scope: "col", children: cell }, i)) }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("tbody", { children: rows.map((row, r) => /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("tr", { children: row.map(
+      (cell, i) => i === 0 ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("th", { scope: "row", children: cell }, i) : /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("td", { children: cell }, i)
+    ) }, r)) })
+  ] });
+}
+
+// src/components/Chart/Cartesian.tsx
+var import_jsx_runtime56 = require("react/jsx-runtime");
+var gap = 2;
+var maxBar = 24;
+var radius = 4;
+function barPath(x, top, width, bottom, round) {
+  const height = bottom - top;
+  if (height <= 0 || width <= 0) return "";
+  const r = round ? Math.min(radius, width / 2, height) : 0;
+  return `M${x} ${bottom}V${top + r}${r ? `Q${x} ${top} ${x + r} ${top}` : ""}H${x + width - r}${r ? `Q${x + width} ${top} ${x + width} ${top + r}` : ""}V${bottom}Z`;
+}
+function linePath(points, curved) {
+  if (!points.length) return "";
+  const fixed = (n2) => n2.toFixed(1);
+  if (!curved || points.length < 3) return points.map(([x, y], i) => `${i ? "L" : "M"}${fixed(x)} ${fixed(y)}`).join("");
+  const n = points.length;
+  const slopes = points.slice(0, -1).map(([x, y], i) => (points[i + 1][1] - y) / (points[i + 1][0] - x || 1));
+  const tangents = points.map((_, i) => {
+    if (i === 0) return slopes[0];
+    if (i === n - 1) return slopes[n - 2];
+    const a = slopes[i - 1];
+    const b = slopes[i];
+    return a * b <= 0 ? 0 : 3 * a * b / (Math.max(a, b) * 2 + Math.min(a, b));
+  });
+  let d = `M${fixed(points[0][0])} ${fixed(points[0][1])}`;
+  for (let i = 0; i < n - 1; i++) {
+    const [x0, y0] = points[i];
+    const [x1, y1] = points[i + 1];
+    const h = (x1 - x0) / 3;
+    d += `C${fixed(x0 + h)} ${fixed(y0 + tangents[i] * h)} ${fixed(x1 - h)} ${fixed(y1 - tangents[i + 1] * h)} ${fixed(x1)} ${fixed(y1)}`;
+  }
+  return d;
+}
+function CartesianChart(props) {
+  const {
+    kind,
+    data,
+    index,
+    series,
+    label,
+    height = 240,
+    formatValue = defaultValue,
+    formatTick = defaultTick,
+    formatIndex = defaultIndex,
+    legend = series.length > 1,
+    className
+  } = props;
+  const stacked = kind === "bar" && Boolean(props.stacked);
+  const area = kind === "line" && Boolean(props.area);
+  const curved = kind === "line" && Boolean(props.curved);
+  const [plotRef, width] = useWidth();
+  const [active, setActive] = (0, import_react56.useState)(null);
+  const colors = seriesColors(series);
+  const count = data.length;
+  const totals = data.map((row) => series.reduce((sum, entry) => sum + Math.max(0, valueOf(row, entry.key)), 0));
+  const values = data.flatMap((row) => series.map((entry) => valueOf(row, entry.key)));
+  const ticks = niceTicks(Math.min(0, ...values), stacked ? Math.max(0, ...totals) : Math.max(0, ...values));
+  const low = ticks[0];
+  const high = ticks[ticks.length - 1];
+  const tickLabels = ticks.map(formatTick);
+  const margin2 = { top: 8, right: kind === "line" ? 10 : 4, bottom: 26, left: Math.ceil(Math.max(...tickLabels.map(textWidth))) + 12 };
+  const plotWidth = Math.max(0, width - margin2.left - margin2.right);
+  const plotHeight = Math.max(0, height - margin2.top - margin2.bottom);
+  const y = (value) => margin2.top + plotHeight - (value - low) / (high - low || 1) * plotHeight;
+  const band = count ? plotWidth / count : 0;
+  const inset = 6;
+  const step = count > 1 ? (plotWidth - inset * 2) / (count - 1) : 0;
+  const x = (i) => kind === "bar" ? margin2.left + band * (i + 0.5) : count > 1 ? margin2.left + inset + i * step : margin2.left + plotWidth / 2;
+  const indexLabels = data.map((row) => formatIndex(row[index]));
+  const spacing = kind === "bar" ? band : step || plotWidth;
+  const every = Math.max(1, Math.ceil((Math.max(0, ...indexLabels.map(textWidth)) + 14) / (spacing || 1)));
+  const labelled = data.map((_, i) => i).filter((i) => kind === "line" ? (count - 1 - i) % every === 0 : i % every === 0);
+  const pick = (event) => {
+    const left = event.currentTarget.getBoundingClientRect().left - margin2.left;
+    const position = event.clientX - left;
+    const i = kind === "bar" ? Math.floor((position - margin2.left) / (band || 1)) : Math.round((position - margin2.left - inset) / (step || 1));
+    setActive(Math.min(count - 1, Math.max(0, i)));
+  };
+  const onKeyDown = (event) => {
+    if (!count) return;
+    const current = active ?? count - 1;
+    const moves = { ArrowLeft: current - 1, ArrowRight: current + 1, Home: 0, End: count - 1 };
+    if (event.key === "Escape") return setActive(null);
+    if (!(event.key in moves)) return;
+    event.preventDefault();
+    setActive(Math.min(count - 1, Math.max(0, moves[event.key])));
+  };
+  const shown = active === null ? null : Math.min(active, count - 1);
+  const describe = (i) => `${indexLabels[i]}: ${series.map((entry) => `${entry.label} ${formatValue(valueOf(data[i], entry.key))}`).join(", ")}.`;
+  const groupSeries = stacked ? 1 : series.length;
+  const groupWidth = Math.min(band * 0.72, groupSeries * maxBar + (groupSeries - 1) * gap);
+  const barWidth = Math.max(1, (groupWidth - (groupSeries - 1) * gap) / groupSeries);
+  const bars = () => data.map((row, i) => {
+    const start = x(i) - groupWidth / 2;
+    if (stacked) {
+      let base = 0;
+      const parts = series.map((entry, s) => {
+        const value = Math.max(0, valueOf(row, entry.key));
+        const part = { s, from: base, to: base + value };
+        base += value;
+        return part;
+      });
+      const top = [...parts].reverse().find((part) => part.to > part.from)?.s;
+      return parts.map(
+        ({ s, from, to }) => to > from ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("path", { d: barPath(start, y(to), barWidth, y(from) - (from > 0 ? gap : 0), s === top), fill: colors[s] }, `${i}-${s}`) : null
+      );
+    }
+    return series.map((entry, s) => {
+      const value = valueOf(row, entry.key);
+      const left = start + s * (barWidth + gap);
+      const d = value >= 0 ? barPath(left, y(value), barWidth, y(0), true) : y(value) > y(0) ? flipped(left, y(0), barWidth, y(value)) : "";
+      return d ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("path", { d, fill: colors[s] }, `${i}-${s}`) : null;
+    });
+  });
+  const lines = () => series.map((entry, s) => {
+    const points = data.map((row, i) => [x(i), y(valueOf(row, entry.key))]);
+    const line = linePath(points, curved);
+    return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("g", { children: [
+      area && points.length ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+        "path",
+        {
+          className: "ow-chart__area",
+          d: `${line}L${points[points.length - 1][0].toFixed(1)} ${y(Math.max(low, 0))}L${points[0][0].toFixed(1)} ${y(Math.max(low, 0))}Z`,
+          fill: colors[s]
+        }
+      ) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("path", { className: "ow-chart__line", d: line, stroke: colors[s] }),
+      count === 1 ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("circle", { className: "ow-chart__point", cx: points[0][0], cy: points[0][1], r: 4, fill: colors[s] }) : null
+    ] }, entry.key);
+  });
+  const onRight = shown !== null && x(shown) > width / 2;
+  return /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("figure", { className: cx("ow-chart", `ow-chart--${kind}`, className), children: [
+    legend ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(ChartLegend, { items: series.map((entry, s) => ({ label: entry.label, color: colors[s] })), shape: kind === "line" ? "line" : "square" }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(
+      "div",
+      {
+        ref: plotRef,
+        className: "ow-chart__plot",
+        style: { height },
+        tabIndex: count ? 0 : void 0,
+        role: "group",
+        "aria-label": `${label}. Use the left and right arrow keys to read each point.`,
+        onKeyDown,
+        onFocus: (event) => {
+          if (event.target === event.currentTarget) setActive((current) => current ?? count - 1);
+        },
+        onBlur: () => setActive(null),
+        children: [
+          width > 0 ? /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("svg", { width, height, "aria-hidden": "true", className: "ow-chart__svg", children: [
+            ticks.map((tick, t) => /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("g", { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                "line",
+                {
+                  className: tick === 0 ? "ow-chart__baseline" : "ow-chart__grid",
+                  x1: margin2.left,
+                  x2: width - margin2.right,
+                  y1: Math.round(y(tick)) + 0.5,
+                  y2: Math.round(y(tick)) + 0.5
+                }
+              ),
+              /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("text", { className: "ow-chart__tick", x: margin2.left - 10, y: y(tick), dy: "0.32em", textAnchor: "end", children: tickLabels[t] })
+            ] }, tick)),
+            labelled.map((i) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+              "text",
+              {
+                className: "ow-chart__tick",
+                x: x(i),
+                y: height - 6,
+                textAnchor: kind === "line" && count > 1 && i === 0 ? "start" : kind === "line" && count > 1 && i === count - 1 ? "end" : "middle",
+                children: indexLabels[i]
+              },
+              i
+            )),
+            kind === "bar" && shown !== null ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("rect", { className: "ow-chart__band", x: x(shown) - band / 2, y: margin2.top, width: band, height: plotHeight, rx: 6 }) : null,
+            kind === "bar" ? bars() : lines(),
+            kind === "line" && shown !== null ? /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)(import_jsx_runtime56.Fragment, { children: [
+              /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("line", { className: "ow-chart__crosshair", x1: x(shown), x2: x(shown), y1: margin2.top, y2: margin2.top + plotHeight }),
+              series.map((entry, s) => /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+                "circle",
+                {
+                  className: "ow-chart__point",
+                  cx: x(shown),
+                  cy: y(valueOf(data[shown], entry.key)),
+                  r: 4,
+                  fill: colors[s]
+                },
+                entry.key
+              ))
+            ] }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+              "rect",
+              {
+                className: "ow-chart__hit",
+                x: margin2.left,
+                y: margin2.top,
+                width: plotWidth,
+                height: plotHeight,
+                onPointerMove: pick,
+                onPointerDown: pick,
+                onPointerLeave: () => setActive(null)
+              }
+            )
+          ] }) : null,
+          shown !== null && width > 0 ? /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("div", { className: "ow-chart__readout", style: onRight ? { right: width - x(shown) + 12 } : { left: x(shown) + 12 }, "aria-hidden": "true", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "ow-chart__readout-title", children: indexLabels[shown] }),
+            series.map((entry, s) => /* @__PURE__ */ (0, import_jsx_runtime56.jsxs)("span", { className: "ow-chart__readout-row", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: `ow-chart__key ow-chart__key--${kind === "line" ? "line" : "square"}`, style: { background: colors[s] } }),
+              /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "ow-chart__readout-label", children: entry.label }),
+              /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("strong", { children: formatValue(valueOf(data[shown], entry.key)) })
+            ] }, entry.key))
+          ] }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("span", { className: "ow-visually-hidden", "aria-live": "polite", children: shown !== null ? describe(shown) : "" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+      ChartTable,
+      {
+        caption: label,
+        head: ["", ...series.map((entry) => entry.label)],
+        rows: data.map((row, i) => [indexLabels[i], ...series.map((entry) => formatValue(valueOf(row, entry.key)))])
+      }
+    )
+  ] });
+}
+function flipped(x, top, width, bottom) {
+  const height = bottom - top;
+  const r = Math.min(radius, width / 2, height);
+  return `M${x} ${top}V${bottom - r}Q${x} ${bottom} ${x + r} ${bottom}H${x + width - r}Q${x + width} ${bottom} ${x + width} ${bottom - r}V${top}Z`;
+}
+
+// src/components/Chart/LineChart.tsx
+var import_jsx_runtime57 = require("react/jsx-runtime");
+function LineChart(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(CartesianChart, { kind: "line", ...props });
+}
+
+// src/components/Chart/BarChart.tsx
+var import_jsx_runtime58 = require("react/jsx-runtime");
+function BarChart(props) {
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(CartesianChart, { kind: "bar", ...props });
+}
+
+// src/components/Chart/DonutChart.tsx
+var import_react57 = require("react");
+var import_jsx_runtime59 = require("react/jsx-runtime");
+var percent = new Intl.NumberFormat(void 0, { style: "percent", maximumFractionDigits: 1 });
+function slicePath(cx2, cy, outer, inner, start, end) {
+  const point = (r, a) => `${(cx2 + r * Math.sin(a)).toFixed(2)} ${(cy - r * Math.cos(a)).toFixed(2)}`;
+  const large = end - start > Math.PI ? 1 : 0;
+  return `M${point(outer, start)}A${outer} ${outer} 0 ${large} 1 ${point(outer, end)}L${point(inner, end)}A${inner} ${inner} 0 ${large} 0 ${point(inner, start)}Z`;
+}
+function DonutChart({ data, label, formatValue = defaultValue, center, centerLabel = "Total", size: size2 = 180, legend = true, className }) {
+  const [active, setActive] = (0, import_react57.useState)(null);
+  const slices = data.map((slice, i) => ({ ...slice, value: Math.max(0, slice.value), fill: colorOf(slice.color, i) }));
+  const total = slices.reduce((sum, slice) => sum + slice.value, 0);
+  const share = (value) => percent.format(total ? value / total : 0);
+  const outer = size2 / 2;
+  const inner = outer - Math.max(14, Math.round(size2 * 0.13));
+  const pad4 = (radius2) => slices.filter((slice) => slice.value > 0).length > 1 ? 1 / radius2 : 0;
+  let angle = 0;
+  const arcs = slices.map((slice) => {
+    const start = angle;
+    angle += total ? slice.value / total * Math.PI * 2 : 0;
+    return { start, end: angle };
+  });
+  const onKeyDown = (event) => {
+    if (!slices.length) return;
+    const current = active ?? 0;
+    const moves = {
+      ArrowRight: (current + 1) % slices.length,
+      ArrowDown: (current + 1) % slices.length,
+      ArrowLeft: (current - 1 + slices.length) % slices.length,
+      ArrowUp: (current - 1 + slices.length) % slices.length,
+      Home: 0,
+      End: slices.length - 1
+    };
+    if (event.key === "Escape") return setActive(null);
+    if (!(event.key in moves)) return;
+    event.preventDefault();
+    setActive(moves[event.key]);
+  };
+  const shown = active === null ? null : slices[active];
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("figure", { className: cx("ow-chart", "ow-chart--donut", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
+      "div",
+      {
+        className: "ow-chart__donut",
+        style: { width: size2, height: size2 },
+        tabIndex: slices.length ? 0 : void 0,
+        role: "group",
+        "aria-label": `${label}. Use the arrow keys to read each part.`,
+        onKeyDown,
+        onFocus: () => setActive((current) => current ?? 0),
+        onBlur: () => setActive(null),
+        onPointerLeave: () => setActive(null),
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("svg", { width: size2, height: size2, viewBox: `0 0 ${size2} ${size2}`, "aria-hidden": "true", children: [
+            total === 0 ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("circle", { className: "ow-chart__empty", cx: outer, cy: outer, r: (outer + inner) / 2, strokeWidth: outer - inner }) : null,
+            slices.map((slice, i) => {
+              const { start, end } = arcs[i];
+              if (end - start <= 0) return null;
+              const whole = end - start >= Math.PI * 2 - 1e-6;
+              const d = whole ? `${slicePath(outer, outer, outer, inner, 0, Math.PI)}${slicePath(outer, outer, outer, inner, Math.PI, Math.PI * 2)}` : innerPadded(outer, inner, start, end, pad4(outer), pad4(inner));
+              return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+                "path",
+                {
+                  d,
+                  fill: slice.fill,
+                  className: cx("ow-chart__slice", active !== null && active !== i && "ow-chart__slice--dim"),
+                  onPointerEnter: () => setActive(i)
+                },
+                i
+              );
+            })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "ow-chart__center", "aria-hidden": "true", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("strong", { className: "ow-chart__center-value", children: shown ? formatValue(shown.value) : center ?? formatValue(total) }),
+            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "ow-chart__center-label", children: shown ? `${shown.label} \xB7 ${share(shown.value)}` : centerLabel })
+          ] }),
+          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "ow-visually-hidden", "aria-live": "polite", children: shown ? `${shown.label}: ${formatValue(shown.value)}, ${share(shown.value)}.` : "" })
+        ]
+      }
+    ),
+    legend ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+      ChartLegend,
+      {
+        shape: "square",
+        items: slices.map((slice) => ({ label: slice.label, color: slice.fill, value: `${formatValue(slice.value)} \xB7 ${share(slice.value)}` }))
+      }
+    ) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+      ChartTable,
+      {
+        caption: label,
+        head: ["", "Value", "Share"],
+        rows: slices.map((slice) => [slice.label, formatValue(slice.value), share(slice.value)])
+      }
+    )
   ] });
 }
+function innerPadded(outer, inner, start, end, padOuter, padInner) {
+  const c = outer;
+  const point = (r, a) => `${(c + r * Math.sin(a)).toFixed(2)} ${(c - r * Math.cos(a)).toFixed(2)}`;
+  const os = start + padOuter;
+  const oe = Math.max(os, end - padOuter);
+  const is = start + padInner;
+  const ie = Math.max(is, end - padInner);
+  const largeOuter = oe - os > Math.PI ? 1 : 0;
+  const largeInner = ie - is > Math.PI ? 1 : 0;
+  return `M${point(outer, os)}A${outer} ${outer} 0 ${largeOuter} 1 ${point(outer, oe)}L${point(inner, ie)}A${inner} ${inner} 0 ${largeInner} 0 ${point(inner, is)}Z`;
+}
+
+// src/components/Chart/Sparkline.tsx
+var import_jsx_runtime60 = require("react/jsx-runtime");
+function Sparkline2({ data, "aria-label": ariaLabel, color = 1, area = true, width = 120, height = 32, className }) {
+  const min = Math.min(...data);
+  const max = Math.max(...data);
+  const pad4 = 3;
+  const y = (value) => pad4 + (1 - (value - min) / (max - min || 1)) * (height - pad4 * 2) - (max === min ? (height - pad4 * 2) / 2 : 0);
+  const x = (i) => data.length > 1 ? i / (data.length - 1) * 100 : 50;
+  const line = data.map((value, i) => `${i ? "L" : "M"}${x(i).toFixed(2)} ${y(value).toFixed(2)}`).join("");
+  const last = data.length - 1;
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+    "span",
+    {
+      role: "img",
+      "aria-label": ariaLabel,
+      className: cx("ow-sparkline", className),
+      style: { width, height, "--ow-sparkline-color": colorOf(color, 0) },
+      children: data.length ? /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_jsx_runtime60.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("svg", { viewBox: `0 0 100 ${height}`, preserveAspectRatio: "none", "aria-hidden": "true", children: [
+          area ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("path", { className: "ow-sparkline__area", d: `${line}L100 ${height}L0 ${height}Z` }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("path", { className: "ow-sparkline__line", d: line, vectorEffect: "non-scaling-stroke" })
+        ] }),
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "ow-sparkline__end", style: { left: `${x(last)}%`, top: y(data[last]) }, "aria-hidden": "true" })
+      ] }) : null
+    }
+  );
+}
 
 // src/components/FileTree/FileTree.tsx
-var import_react52 = require("react");
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_react58 = require("react");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 function flatten(nodes, expanded, parent, level = 1) {
   return nodes.flatMap((node) => {
     const path = parent ? `${parent}/${node.name}` : node.name;
@@ -6096,10 +6770,10 @@ function FileTree({
   className
 }) {
   const [current, setCurrent] = useControllableState(selected, defaultSelected, onSelect);
-  const [expanded, setExpanded] = (0, import_react52.useState)(() => new Set(defaultExpanded === "all" ? allFolders(items2) : defaultExpanded));
-  const rows = (0, import_react52.useMemo)(() => flatten(items2, expanded), [items2, expanded]);
-  const [focusPath, setFocusPath] = (0, import_react52.useState)();
-  const refs = (0, import_react52.useRef)(/* @__PURE__ */ new Map());
+  const [expanded, setExpanded] = (0, import_react58.useState)(() => new Set(defaultExpanded === "all" ? allFolders(items2) : defaultExpanded));
+  const rows = (0, import_react58.useMemo)(() => flatten(items2, expanded), [items2, expanded]);
+  const [focusPath, setFocusPath] = (0, import_react58.useState)();
+  const refs = (0, import_react58.useRef)(/* @__PURE__ */ new Map());
   const tabStop = rows.some((row) => row.path === focusPath) ? focusPath : (rows.find((row) => row.path === current) ?? rows[0])?.path;
   function focus(path) {
     if (!path) return;
@@ -6149,8 +6823,8 @@ function FileTree({
       const row = rows.find((entry) => entry.path === path);
       if (!row) return null;
       const isOpen = row.isFolder && expanded.has(path);
-      const icon2 = node.icon ?? (row.isFolder ? isOpen ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(FolderOpenIcon, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(FolderIcon, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(FileIcon, { size: 16 }));
-      return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+      const icon2 = node.icon ?? (row.isFolder ? isOpen ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(FolderOpenIcon, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(FolderIcon, { size: 16 }) : /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(FileIcon, { size: 16 }));
+      return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
         "li",
         {
           ref: (element) => {
@@ -6168,7 +6842,7 @@ function FileTree({
             if (event.target === event.currentTarget) setFocusPath(path);
           },
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(
+            /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(
               "div",
               {
                 className: cx("ow-tree__row", !row.isFolder && current === path && "ow-tree__row--selected"),
@@ -6178,51 +6852,51 @@ function FileTree({
                   activate(row);
                 },
                 children: [
-                  row.isFolder ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(ChevronRightIcon, { size: 14, className: cx("ow-tree__chevron", isOpen && "ow-tree__chevron--open") }) : /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "ow-tree__spacer" }),
-                  /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: cx("ow-tree__icon", row.isFolder && "ow-tree__icon--folder"), children: icon2 }),
-                  /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "ow-tree__name", children: node.name }),
-                  node.meta ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("span", { className: "ow-tree__meta", children: node.meta }) : null
+                  row.isFolder ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(ChevronRightIcon, { size: 14, className: cx("ow-tree__chevron", isOpen && "ow-tree__chevron--open") }) : /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "ow-tree__spacer" }),
+                  /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: cx("ow-tree__icon", row.isFolder && "ow-tree__icon--folder"), children: icon2 }),
+                  /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "ow-tree__name", children: node.name }),
+                  node.meta ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("span", { className: "ow-tree__meta", children: node.meta }) : null
                 ]
               }
             ),
-            isOpen && node.children.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("ul", { role: "group", className: "ow-tree__group", children: render(node.children, path, level + 1) }) : null
+            isOpen && node.children.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("ul", { role: "group", className: "ow-tree__group", children: render(node.children, path, level + 1) }) : null
           ]
         },
         path
       );
     });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("ul", { role: "tree", "aria-label": label, className: cx("ow-tree", className), children: render(items2) });
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("ul", { role: "tree", "aria-label": label, className: cx("ow-tree", className), children: render(items2) });
 }
 
 // src/components/EmptyState/EmptyState.tsx
-var import_jsx_runtime54 = require("react/jsx-runtime");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 function EmptyState({ title, description, icon: icon2, actions, bordered = false, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: cx("ow-empty", bordered && "ow-empty--bordered", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("span", { className: "ow-empty__icon", "aria-hidden": "true", children: icon2 ?? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(InboxIcon, { size: 20 }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: "ow-empty__text", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { className: "ow-empty__title", children: title }),
-      description ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { className: "ow-empty__description", children: description }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: cx("ow-empty", bordered && "ow-empty--bordered", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "ow-empty__icon", "aria-hidden": "true", children: icon2 ?? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(InboxIcon, { size: 20 }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: "ow-empty__text", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { className: "ow-empty__title", children: title }),
+      description ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { className: "ow-empty__description", children: description }) : null
     ] }),
-    actions ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("div", { className: "ow-empty__actions", children: actions }) : null
+    actions ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("div", { className: "ow-empty__actions", children: actions }) : null
   ] });
 }
 
 // src/components/Tag/Tag.tsx
-var import_jsx_runtime55 = require("react/jsx-runtime");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 function Tag({ onRemove, variant = "neutral", size: size2 = "md", icon: icon2, removeLabel, className, children, ...props }) {
   const name = removeLabel ?? (typeof children === "string" ? children : "tag");
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("span", { className: cx("ow-tag", `ow-tag--${variant}`, `ow-tag--${size2}`, onRemove && "ow-tag--removable", className), ...props, children: [
-    icon2 ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "ow-tag__icon", children: icon2 }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "ow-tag__label", children }),
-    onRemove ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("button", { type: "button", className: "ow-tag__remove", "aria-label": `Remove ${name}`, onClick: onRemove, children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(XIcon, { size: 12 }) }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("span", { className: cx("ow-tag", `ow-tag--${variant}`, `ow-tag--${size2}`, onRemove && "ow-tag--removable", className), ...props, children: [
+    icon2 ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "ow-tag__icon", children: icon2 }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "ow-tag__label", children }),
+    onRemove ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("button", { type: "button", className: "ow-tag__remove", "aria-label": `Remove ${name}`, onClick: onRemove, children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(XIcon, { size: 12 }) }) : null
   ] });
 }
 function TagGroup({ label, className, children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("div", { role: "group", "aria-label": label, className: cx("ow-tag-group", className), ...props, children });
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { role: "group", "aria-label": label, className: cx("ow-tag-group", className), ...props, children });
 }
 function ColorSwatch({ color, name, value, size: size2 = "md", shape = "square", className }) {
-  const swatch = /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+  const swatch = /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
     "span",
     {
       className: cx("ow-swatch", `ow-swatch--${size2}`, shape === "circle" && "ow-swatch--circle"),
@@ -6230,19 +6904,19 @@ function ColorSwatch({ color, name, value, size: size2 = "md", shape = "square",
       ...name && !value ? { role: "img", "aria-label": name } : { "aria-hidden": true }
     }
   );
-  if (!name && !value) return /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className, children: swatch });
-  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("span", { className: cx("ow-swatch-label", className), children: [
+  if (!name && !value) return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className, children: swatch });
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("span", { className: cx("ow-swatch-label", className), children: [
     swatch,
-    /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("span", { className: "ow-swatch-label__text", children: [
-      name ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "ow-swatch-label__name", children: name }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "ow-swatch-label__value", children: value })
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("span", { className: "ow-swatch-label__text", children: [
+      name ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "ow-swatch-label__name", children: name }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "ow-swatch-label__value", children: value })
     ] })
   ] });
 }
 
 // src/components/Avatar/Avatar.tsx
-var import_react53 = require("react");
-var import_jsx_runtime56 = require("react/jsx-runtime");
+var import_react59 = require("react");
+var import_jsx_runtime64 = require("react/jsx-runtime");
 var namedSizes = { sm: 24, md: 28, lg: 36, xl: 48 };
 function avatarSize(size2) {
   if (typeof size2 === "number") {
@@ -6252,37 +6926,37 @@ function avatarSize(size2) {
 }
 function Avatar({ name, src, size: size2 = "md", label, className }) {
   const initials = getInitials(name);
-  const [failedImage, setFailedImage] = (0, import_react53.useState)();
+  const [failedImage, setFailedImage] = (0, import_react59.useState)();
   const showImage = src && src !== failedImage;
   const sizing = avatarSize(size2);
-  return /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
     "span",
     {
       className: cx("ow-avatar", sizing.className, !initials && !showImage && "ow-avatar--empty", className),
       style: sizing.style,
       ...label ? { role: "img", "aria-label": label } : { "aria-hidden": true },
       "data-initials": !showImage && initials ? initials : void 0,
-      children: showImage ? /* @__PURE__ */ (0, import_jsx_runtime56.jsx)("img", { src, alt: "", className: "ow-avatar__image", onError: () => setFailedImage(src) }) : initials ? null : /* @__PURE__ */ (0, import_jsx_runtime56.jsx)(UserIcon, { size: Math.round(sizing.pixels * 0.52) })
+      children: showImage ? /* @__PURE__ */ (0, import_jsx_runtime64.jsx)("img", { src, alt: "", className: "ow-avatar__image", onError: () => setFailedImage(src) }) : initials ? null : /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(UserIcon, { size: Math.round(sizing.pixels * 0.52) })
     }
   );
 }
 
 // src/components/Avatar/AvatarGroup.tsx
-var import_react54 = require("react");
-var import_jsx_runtime57 = require("react/jsx-runtime");
+var import_react60 = require("react");
+var import_jsx_runtime65 = require("react/jsx-runtime");
 function AvatarGroup({ children, max = 4, size: size2 = "md", label, className }) {
-  const avatars = import_react54.Children.toArray(children).filter(import_react54.isValidElement);
+  const avatars = import_react60.Children.toArray(children).filter(import_react60.isValidElement);
   const sizing = avatarSize(size2);
   const shown = avatars.slice(0, max);
   const hidden = avatars.length - shown.length;
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { role: "group", "aria-label": label, className: cx("ow-avatar-group", className), children: [
-    shown.map((avatar) => (0, import_react54.cloneElement)(avatar, { size: size2 })),
-    hidden > 0 ? /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("span", { className: cx("ow-avatar", sizing.className, "ow-avatar--count"), style: sizing.style, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("span", { "aria-hidden": "true", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { role: "group", "aria-label": label, className: cx("ow-avatar-group", className), children: [
+    shown.map((avatar) => (0, import_react60.cloneElement)(avatar, { size: size2 })),
+    hidden > 0 ? /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("span", { className: cx("ow-avatar", sizing.className, "ow-avatar--count"), style: sizing.style, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("span", { "aria-hidden": "true", children: [
         "+",
         hidden
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("span", { className: "ow-visually-hidden", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("span", { className: "ow-visually-hidden", children: [
         "and ",
         hidden,
         " more"
@@ -6295,160 +6969,56 @@ function userSize(size2) {
   return size2 >= 48 ? "ow-user--xl" : size2 >= 36 ? "ow-user--lg" : size2 >= 28 ? "ow-user--md" : "ow-user--sm";
 }
 function User({ name, description, src, size: size2 = "md", className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: cx("ow-user", userSize(size2), className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsx)(Avatar, { name, src, size: size2 }),
-    /* @__PURE__ */ (0, import_jsx_runtime57.jsxs)("div", { className: "ow-user__text", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "ow-user__name", children: name }),
-      description ? /* @__PURE__ */ (0, import_jsx_runtime57.jsx)("span", { className: "ow-user__description", children: description }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: cx("ow-user", userSize(size2), className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(Avatar, { name, src, size: size2 }),
+    /* @__PURE__ */ (0, import_jsx_runtime65.jsxs)("div", { className: "ow-user__text", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "ow-user__name", children: name }),
+      description ? /* @__PURE__ */ (0, import_jsx_runtime65.jsx)("span", { className: "ow-user__description", children: description }) : null
     ] })
   ] });
 }
 
 // src/components/Kbd/Kbd.tsx
-var import_jsx_runtime58 = require("react/jsx-runtime");
+var import_jsx_runtime66 = require("react/jsx-runtime");
 function Kbd({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("kbd", { className: cx("ow-kbd", className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("kbd", { className: cx("ow-kbd", className), ...props });
 }
 function Code({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("code", { className: cx("ow-code", className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("code", { className: cx("ow-code", className), ...props });
 }
 
 // src/components/Card/Card.tsx
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime67 = require("react/jsx-runtime");
 function Card({ className, padding = "md", ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: cx("ow-card", `ow-card--pad-${padding}`, className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: cx("ow-card", `ow-card--pad-${padding}`, className), ...props });
 }
 function SettingsRow({ children, description, label, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: cx("ow-settings-row", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("div", { className: "ow-settings-row__text", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("span", { className: "ow-settings-row__label", children: label }),
-      description ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "ow-settings-row__description", children: description }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: cx("ow-settings-row", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("div", { className: "ow-settings-row__text", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "ow-settings-row__label", children: label }),
+      description ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "ow-settings-row__description", children: description }) : null
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "ow-settings-row__control", children })
+    /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("div", { className: "ow-settings-row__control", children })
   ] });
 }
 
-// src/components/Layout/Layout.tsx
-var import_react55 = require("react");
-var import_jsx_runtime60 = require("react/jsx-runtime");
-var space = (token) => token === "none" ? "0" : `var(--ow-space-${token})`;
-var alignments = { start: "flex-start", center: "center", end: "flex-end", stretch: "stretch", baseline: "baseline", between: "space-between" };
-function Stack({
-  direction = "column",
-  gap = "md",
-  align,
-  justify,
-  wrap = false,
-  as = "div",
-  className,
-  style,
-  children,
-  ...props
-}) {
-  const Element2 = as;
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-    Element2,
-    {
-      className: cx("ow-stack", className),
-      style: {
-        flexDirection: direction,
-        gap: space(gap),
-        alignItems: align ? alignments[align] : void 0,
-        justifyContent: justify ? alignments[justify] : void 0,
-        flexWrap: wrap ? "wrap" : void 0,
-        ...style
-      },
-      ...props,
-      children
-    }
-  );
-}
-function Separator({ orientation = "horizontal", label, spacing = "none", className }) {
-  const margin2 = orientation === "horizontal" ? `${space(spacing)} 0` : `0 ${space(spacing)}`;
-  if (label && orientation === "horizontal") {
-    return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { role: "separator", className: cx("ow-separator-label", className), style: { margin: margin2 }, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: "ow-separator-label__text", children: label }) });
-  }
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-    "div",
-    {
-      role: "separator",
-      "aria-orientation": orientation,
-      className: cx("ow-separator", `ow-separator--${orientation}`, className),
-      style: { margin: margin2 }
-    }
-  );
-}
-function ScrollShadow({
-  orientation = "vertical",
-  size: size2 = 32,
-  maxSize,
-  className,
-  style,
-  children,
-  "aria-label": ariaLabel,
-  ...props
-}) {
-  const ref = (0, import_react55.useRef)(null);
-  const [edges, setEdges] = (0, import_react55.useState)({ start: false, end: false });
-  (0, import_react55.useEffect)(() => {
-    const element = ref.current;
-    if (!element) return;
-    const update = () => {
-      const position = orientation === "vertical" ? element.scrollTop : element.scrollLeft;
-      const extent = orientation === "vertical" ? element.scrollHeight - element.clientHeight : element.scrollWidth - element.clientWidth;
-      setEdges({ start: position > 1, end: position < extent - 1 });
-    };
-    update();
-    element.addEventListener("scroll", update, { passive: true });
-    const observer = typeof ResizeObserver === "undefined" ? void 0 : new ResizeObserver(update);
-    observer?.observe(element);
-    if (element.firstElementChild) observer?.observe(element.firstElementChild);
-    return () => {
-      element.removeEventListener("scroll", update);
-      observer?.disconnect();
-    };
-  }, [orientation]);
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
-    "div",
-    {
-      ref,
-      className: cx("ow-scroll-shadow", `ow-scroll-shadow--${orientation}`, className),
-      "data-start": edges.start || void 0,
-      "data-end": edges.end || void 0,
-      tabIndex: ariaLabel ? 0 : void 0,
-      role: ariaLabel ? "region" : void 0,
-      "aria-label": ariaLabel,
-      style: {
-        "--ow-scroll-shadow": `${size2}px`,
-        [orientation === "vertical" ? "maxHeight" : "maxWidth"]: maxSize,
-        ...style
-      },
-      ...props,
-      children
-    }
-  );
-}
-function VisuallyHidden({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("span", { className: cx("ow-visually-hidden", className), ...props });
-}
-
 // src/components/Container/Container.tsx
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_jsx_runtime68 = require("react/jsx-runtime");
 function Container({ size: size2 = "page", as: Element2 = "div", className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Element2, { className: cx("ow-container", `ow-container--${size2}`, className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(Element2, { className: cx("ow-container", `ow-container--${size2}`, className), ...props });
 }
 
 // src/components/Section/Section.tsx
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_jsx_runtime69 = require("react/jsx-runtime");
 function Section({ tone = "paper", spacing = "md", size: size2 = "page", as: Element2 = "section", className, children, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Element2, { className: cx("ow-section", `ow-section--${tone}`, `ow-section--space-${spacing}`, className), ...props, children: size2 === false ? children : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Container, { size: size2, children }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Element2, { className: cx("ow-section", `ow-section--${tone}`, `ow-section--space-${spacing}`, className), ...props, children: size2 === false ? children : /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Container, { size: size2, children }) });
 }
 
 // src/components/Marketing/Marketing.tsx
-var import_react56 = require("react");
-var import_jsx_runtime63 = require("react/jsx-runtime");
+var import_react61 = require("react");
+var import_jsx_runtime70 = require("react/jsx-runtime");
 function Chip({ className, ...props }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: cx("ow-chip", className), ...props });
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: cx("ow-chip", className), ...props });
 }
 function SectionHeading({
   eyebrow,
@@ -6458,21 +7028,21 @@ function SectionHeading({
   as: Heading = "h2",
   className
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: cx("ow-section-heading", align === "center" && "ow-section-heading--center", className), children: [
-    eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Chip, { children: eyebrow }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Heading, { className: "ow-section-heading__title", children: title }),
-    intro ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("p", { className: "ow-section-heading__intro", children: intro }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: cx("ow-section-heading", align === "center" && "ow-section-heading--center", className), children: [
+    eyebrow ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Chip, { children: eyebrow }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(Heading, { className: "ow-section-heading__title", children: title }),
+    intro ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("p", { className: "ow-section-heading__intro", children: intro }) : null
   ] });
 }
 function SiteHeader({ brand, nav, actions, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("header", { className: cx("ow-site-header", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "ow-site-header__brand", children: brand }),
-    nav ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("nav", { className: "ow-site-header__nav", children: nav }) : null,
-    actions ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "ow-site-header__actions", children: actions }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("header", { className: cx("ow-site-header", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "ow-site-header__brand", children: brand }),
+    nav ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("nav", { className: "ow-site-header__nav", children: nav }) : null,
+    actions ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "ow-site-header__actions", children: actions }) : null
   ] });
 }
 function DotGrid({ fade = false, interactive = false, className, children, onPointerMove, ...props }) {
-  const ref = (0, import_react56.useRef)(null);
+  const ref = (0, import_react61.useRef)(null);
   function track(event) {
     onPointerMove?.(event);
     const element = ref.current;
@@ -6481,7 +7051,7 @@ function DotGrid({ fade = false, interactive = false, className, children, onPoi
     element.style.setProperty("--ow-pointer-x", `${event.clientX - rect.left}px`);
     element.style.setProperty("--ow-pointer-y", `${event.clientY - rect.top}px`);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)(
     "div",
     {
       ref,
@@ -6489,21 +7059,21 @@ function DotGrid({ fade = false, interactive = false, className, children, onPoi
       onPointerMove: track,
       ...props,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "ow-dot-grid__dots", "aria-hidden": "true" }),
-        interactive ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "ow-dot-grid__brass", "aria-hidden": "true" }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("div", { className: "ow-dot-grid__content", children })
+        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "ow-dot-grid__dots", "aria-hidden": "true" }),
+        interactive ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "ow-dot-grid__brass", "aria-hidden": "true" }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "ow-dot-grid__content", children })
       ]
     }
   );
 }
 
 // src/components/Prose/Prose.tsx
-var import_react57 = require("react");
-var import_jsx_runtime64 = require("react/jsx-runtime");
-var Prose = /* @__PURE__ */ (0, import_react57.forwardRef)(function Prose2({ size: size2 = "md", fullWidth = false, as = "div", className, children, ...props }, ref) {
+var import_react62 = require("react");
+var import_jsx_runtime71 = require("react/jsx-runtime");
+var Prose = /* @__PURE__ */ (0, import_react62.forwardRef)(function Prose2({ size: size2 = "md", fullWidth = false, as = "div", className, children, ...props }, ref) {
   const Element2 = as;
-  const root = (0, import_react57.useRef)(null);
-  (0, import_react57.useEffect)(() => {
+  const root = (0, import_react62.useRef)(null);
+  (0, import_react62.useEffect)(() => {
     const element = root.current;
     if (!element) return;
     for (const scroller of element.querySelectorAll("pre, .ow-table-wrap")) {
@@ -6515,7 +7085,7 @@ var Prose = /* @__PURE__ */ (0, import_react57.forwardRef)(function Prose2({ siz
       if (text) box.setAttribute("aria-label", text);
     }
   });
-  return /* @__PURE__ */ (0, import_jsx_runtime64.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
     Element2,
     {
       ref: (node) => {
@@ -6531,10 +7101,10 @@ var Prose = /* @__PURE__ */ (0, import_react57.forwardRef)(function Prose2({ siz
 });
 
 // src/components/TextShimmer/TextShimmer.tsx
-var import_jsx_runtime65 = require("react/jsx-runtime");
+var import_jsx_runtime72 = require("react/jsx-runtime");
 function TextShimmer({ children, as = "span", duration = 2, active = true, className }) {
   const Element2 = as;
-  return /* @__PURE__ */ (0, import_jsx_runtime65.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(
     Element2,
     {
       className: cx("ow-shimmer", active && "ow-shimmer--active", className),
@@ -6545,13 +7115,13 @@ function TextShimmer({ children, as = "span", duration = 2, active = true, class
 }
 
 // src/components/PromptInput/PromptInput.tsx
-var import_react58 = require("react");
-var import_jsx_runtime66 = require("react/jsx-runtime");
+var import_react63 = require("react");
+var import_jsx_runtime73 = require("react/jsx-runtime");
 var noAttachments = [];
 var counterFrom = 0.8;
 var announceDelay = 1e3;
 function Glyph({ children }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -6571,29 +7141,29 @@ function Glyph({ children }) {
 }
 var sheet = "M6 22a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h8a2.4 2.4 0 0 1 1.704.706l3.588 3.588A2.4 2.4 0 0 1 20 8v12a2 2 0 0 1-2 2z";
 var fold = "M14 2v5a1 1 0 0 0 1 1h5";
-var PaperclipIcon = () => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Glyph, { children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("path", { d: "m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551" }) });
-var StopIcon = () => /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Glyph, { children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("rect", { x: "6", y: "6", width: "12", height: "12", rx: "2", fill: "currentColor", stroke: "none" }) });
+var PaperclipIcon = () => /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Glyph, { children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("path", { d: "m16 6-8.414 8.586a2 2 0 0 0 2.829 2.829l8.414-8.586a4 4 0 1 0-5.657-5.657l-8.379 8.551a6 6 0 1 0 8.485 8.485l8.379-8.551" }) });
+var StopIcon = () => /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Glyph, { children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("rect", { x: "6", y: "6", width: "12", height: "12", rx: "2", fill: "currentColor", stroke: "none" }) });
 var fileIcons = {
-  image: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(Glyph, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("path", { d: sheet }),
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("path", { d: fold }),
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("circle", { cx: "10", cy: "12", r: "2" }),
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("path", { d: "m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22" })
+  image: /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(Glyph, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("path", { d: sheet }),
+    /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("path", { d: fold }),
+    /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("circle", { cx: "10", cy: "12", r: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("path", { d: "m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22" })
   ] }),
-  code: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(Glyph, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("path", { d: sheet }),
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("path", { d: fold }),
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("path", { d: "M10 12.5 8 15l2 2.5" }),
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("path", { d: "m14 12.5 2 2.5-2 2.5" })
+  code: /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(Glyph, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("path", { d: sheet }),
+    /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("path", { d: fold }),
+    /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("path", { d: "M10 12.5 8 15l2 2.5" }),
+    /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("path", { d: "m14 12.5 2 2.5-2 2.5" })
   ] }),
-  text: /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(Glyph, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("path", { d: sheet }),
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("path", { d: fold }),
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("path", { d: "M10 9H8" }),
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("path", { d: "M16 13H8" }),
-    /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("path", { d: "M16 17H8" })
+  text: /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(Glyph, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("path", { d: sheet }),
+    /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("path", { d: fold }),
+    /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("path", { d: "M10 9H8" }),
+    /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("path", { d: "M16 13H8" }),
+    /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("path", { d: "M16 17H8" })
   ] }),
-  file: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(FileIcon, { size: 16 })
+  file: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(FileIcon, { size: 16 })
 };
 function kindOf({ name, type = "" }) {
   const lower = name.toLowerCase();
@@ -6633,9 +7203,9 @@ function accepts(file, accept) {
   });
 }
 var hasFiles = (event) => Array.from(event.dataTransfer.types).includes("Files");
-var PromptInput = /* @__PURE__ */ (0, import_react58.forwardRef)(function PromptInput2({
+var PromptInput = /* @__PURE__ */ (0, import_react63.forwardRef)(function PromptInput2({
   value,
-  defaultValue = "",
+  defaultValue: defaultValue2 = "",
   onChange,
   onSubmit,
   isStreaming = false,
@@ -6664,18 +7234,18 @@ var PromptInput = /* @__PURE__ */ (0, import_react58.forwardRef)(function Prompt
   onKeyDown,
   className
 }, ref) {
-  const [text, setText] = useControllableState(value, defaultValue, onChange);
-  const textAreaRef = (0, import_react58.useRef)(null);
-  const actionRef = (0, import_react58.useRef)(null);
-  const pickerRef = (0, import_react58.useRef)(null);
-  const listRef = (0, import_react58.useRef)(null);
-  const composing = (0, import_react58.useRef)(false);
-  const dragDepth = (0, import_react58.useRef)(0);
-  const pendingFocus = (0, import_react58.useRef)(null);
-  const [isDragging, setIsDragging] = (0, import_react58.useState)(false);
-  const [notice, setNotice] = (0, import_react58.useState)();
-  const [announcement, setAnnouncement] = (0, import_react58.useState)("");
-  const hintId = (0, import_react58.useId)();
+  const [text, setText] = useControllableState(value, defaultValue2, onChange);
+  const textAreaRef = (0, import_react63.useRef)(null);
+  const actionRef = (0, import_react63.useRef)(null);
+  const pickerRef = (0, import_react63.useRef)(null);
+  const listRef = (0, import_react63.useRef)(null);
+  const composing = (0, import_react63.useRef)(false);
+  const dragDepth = (0, import_react63.useRef)(0);
+  const pendingFocus = (0, import_react63.useRef)(null);
+  const [isDragging, setIsDragging] = (0, import_react63.useState)(false);
+  const [notice, setNotice] = (0, import_react63.useState)();
+  const [announcement, setAnnouncement] = (0, import_react63.useState)("");
+  const hintId = (0, import_react63.useId)();
   const rows = Math.max(1, Math.round(minRows));
   const maxRowCount = Math.max(rows, Math.round(maxRows));
   const canAttach = Boolean(onAttach) && !disabled;
@@ -6685,7 +7255,7 @@ var PromptInput = /* @__PURE__ */ (0, import_react58.forwardRef)(function Prompt
   const inline = !toolbarStart && !endActions;
   const showCounter = maxLength !== void 0 && maxLength > 0 && text.length >= maxLength * counterFrom;
   const remaining = maxLength === void 0 ? 0 : Math.max(0, maxLength - text.length);
-  const number = (count) => new Intl.NumberFormat(locale).format(count);
+  const number2 = (count) => new Intl.NumberFormat(locale).format(count);
   const shownHint = notice ?? hint;
   const describedBy = [ariaDescribedBy, hint && !notice ? hintId : void 0].filter(Boolean).join(" ") || void 0;
   const name = ariaLabel ?? (ariaLabelledBy || id ? void 0 : "Message");
@@ -6694,7 +7264,7 @@ var PromptInput = /* @__PURE__ */ (0, import_react58.forwardRef)(function Prompt
     if (typeof ref === "function") ref(element);
     else if (ref) ref.current = element;
   }
-  (0, import_react58.useEffect)(() => {
+  (0, import_react63.useEffect)(() => {
     const textArea = textAreaRef.current;
     if (!textArea || typeof ResizeObserver === "undefined") return;
     let width = textArea.clientWidth;
@@ -6706,20 +7276,20 @@ var PromptInput = /* @__PURE__ */ (0, import_react58.forwardRef)(function Prompt
     observer.observe(textArea);
     return () => observer.disconnect();
   }, []);
-  (0, import_react58.useLayoutEffect)(() => {
+  (0, import_react63.useLayoutEffect)(() => {
     if (textAreaRef.current) resizeTextArea(textAreaRef.current);
   }, [size2, rows]);
-  const wasStreaming = (0, import_react58.useRef)(isStreaming);
-  const actionHadFocus = (0, import_react58.useRef)(false);
+  const wasStreaming = (0, import_react63.useRef)(isStreaming);
+  const actionHadFocus = (0, import_react63.useRef)(false);
   if (wasStreaming.current !== isStreaming) {
     actionHadFocus.current = typeof document !== "undefined" && document.activeElement === actionRef.current;
   }
-  (0, import_react58.useLayoutEffect)(() => {
+  (0, import_react63.useLayoutEffect)(() => {
     if (wasStreaming.current && !isStreaming && actionHadFocus.current && !hasContent) textAreaRef.current?.focus();
     wasStreaming.current = isStreaming;
     actionHadFocus.current = false;
   }, [isStreaming, hasContent]);
-  (0, import_react58.useLayoutEffect)(() => {
+  (0, import_react63.useLayoutEffect)(() => {
     const pending = pendingFocus.current;
     if (!pending) return;
     pendingFocus.current = null;
@@ -6728,10 +7298,10 @@ var PromptInput = /* @__PURE__ */ (0, import_react58.forwardRef)(function Prompt
     const next = buttons?.length ? buttons[Math.min(pending.index, buttons.length - 1)] : void 0;
     (next ?? textAreaRef.current)?.focus();
   }, [attachments]);
-  (0, import_react58.useEffect)(() => {
+  (0, import_react63.useEffect)(() => {
     if (!showCounter || document.activeElement !== textAreaRef.current) return;
     const timer = window.setTimeout(() => {
-      setAnnouncement(`${number(remaining)} ${remaining === 1 ? "character" : "characters"} left`);
+      setAnnouncement(`${number2(remaining)} ${remaining === 1 ? "character" : "characters"} left`);
     }, announceDelay);
     return () => window.clearTimeout(timer);
   }, [showCounter, remaining, locale]);
@@ -6786,7 +7356,7 @@ var PromptInput = /* @__PURE__ */ (0, import_react58.forwardRef)(function Prompt
     event.preventDefault();
     textAreaRef.current?.focus();
   }
-  const attachButton = onAttach ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Tooltip, { label: "Attach files", children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+  const attachButton = onAttach ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Tooltip, { label: "Attach files", children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
     Button,
     {
       className: "ow-prompt-input__attach",
@@ -6796,11 +7366,11 @@ var PromptInput = /* @__PURE__ */ (0, import_react58.forwardRef)(function Prompt
       "aria-label": multiple ? "Attach files" : "Attach a file",
       disabled,
       onClick: () => pickerRef.current?.click(),
-      children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(PaperclipIcon, {})
+      children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(PaperclipIcon, {})
     }
   ) }) : null;
   const actionLabel = isStreaming ? "Stop" : "Send";
-  const actionButton = /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(Tooltip, { label: actionLabel, children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+  const actionButton = /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(Tooltip, { label: actionLabel, children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
     Button,
     {
       ref: actionRef,
@@ -6815,10 +7385,10 @@ var PromptInput = /* @__PURE__ */ (0, import_react58.forwardRef)(function Prompt
         else submit();
         textAreaRef.current?.focus();
       },
-      children: isStreaming ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(StopIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(ArrowUpIcon, { size: 16 })
+      children: isStreaming ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(StopIcon, {}) : /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(ArrowUpIcon, { size: 16 })
     }
   ) });
-  return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
     "div",
     {
       className: cx(
@@ -6832,7 +7402,7 @@ var PromptInput = /* @__PURE__ */ (0, import_react58.forwardRef)(function Prompt
       ),
       style: { "--ow-prompt-min-rows": rows, "--ow-prompt-max-rows": maxRowCount },
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
           "fieldset",
           {
             role: "presentation",
@@ -6862,12 +7432,12 @@ var PromptInput = /* @__PURE__ */ (0, import_react58.forwardRef)(function Prompt
               take(Array.from(event.dataTransfer.files));
             },
             children: [
-              attachments.length ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("ul", { ref: listRef, className: "ow-prompt-input__attachments", "aria-label": "Attachments", children: attachments.map((attachment, index) => {
+              attachments.length ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("ul", { ref: listRef, className: "ow-prompt-input__attachments", "aria-label": "Attachments", children: attachments.map((attachment, index) => {
                 const [base, extension] = splitName(attachment.name);
-                return /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("li", { className: "ow-prompt-input__attachment", children: [
-                  /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("span", { className: "ow-prompt-input__thumb", "aria-hidden": "true", children: [
+                return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("li", { className: "ow-prompt-input__attachment", children: [
+                  /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("span", { className: "ow-prompt-input__thumb", "aria-hidden": "true", children: [
                     fileIcons[kindOf(attachment)],
-                    attachment.previewUrl ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+                    attachment.previewUrl ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
                       "img",
                       {
                         src: attachment.previewUrl,
@@ -6878,26 +7448,26 @@ var PromptInput = /* @__PURE__ */ (0, import_react58.forwardRef)(function Prompt
                       }
                     ) : null
                   ] }),
-                  /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("span", { className: "ow-prompt-input__file", children: [
-                    /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("span", { className: "ow-prompt-input__file-name", title: attachment.name, children: [
-                      /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "ow-prompt-input__file-base", children: base }),
+                  /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("span", { className: "ow-prompt-input__file", children: [
+                    /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("span", { className: "ow-prompt-input__file-name", title: attachment.name, children: [
+                      /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "ow-prompt-input__file-base", children: base }),
                       extension
                     ] }),
-                    attachment.size !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "ow-prompt-input__file-size", children: formatBytes(attachment.size, locale) }) : null
+                    attachment.size !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "ow-prompt-input__file-size", children: formatBytes(attachment.size, locale) }) : null
                   ] }),
-                  onRemoveAttachment ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+                  onRemoveAttachment ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
                     "button",
                     {
                       type: "button",
                       className: "ow-prompt-input__remove",
                       "aria-label": `Remove ${attachment.name}`,
                       onClick: () => remove(attachment, index),
-                      children: /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(XIcon, { size: 14 })
+                      children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(XIcon, { size: 14 })
                     }
                   ) : null
                 ] }, attachment.id);
               }) }) : null,
-              /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+              /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
                 Textarea,
                 {
                   ref: setTextAreaRef,
@@ -6928,22 +7498,22 @@ var PromptInput = /* @__PURE__ */ (0, import_react58.forwardRef)(function Prompt
                   }
                 }
               ),
-              /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "ow-prompt-input__toolbar", "data-prompt-blank": "", children: [
-                toolbarStart ? /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "ow-prompt-input__start", "data-prompt-blank": "", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "ow-prompt-input__toolbar", "data-prompt-blank": "", children: [
+                toolbarStart ? /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "ow-prompt-input__start", "data-prompt-blank": "", children: [
                   attachButton,
                   startActions
                 ] }) : null,
-                /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "ow-prompt-input__end", "data-prompt-blank": "", children: [
-                  showCounter ? /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("span", { className: cx("ow-prompt-input__counter", remaining === 0 && "ow-prompt-input__counter--full"), "aria-hidden": "true", children: [
-                    number(text.length),
+                /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "ow-prompt-input__end", "data-prompt-blank": "", children: [
+                  showCounter ? /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("span", { className: cx("ow-prompt-input__counter", remaining === 0 && "ow-prompt-input__counter--full"), "aria-hidden": "true", children: [
+                    number2(text.length),
                     " / ",
-                    number(maxLength)
+                    number2(maxLength)
                   ] }) : null,
                   endActions,
                   actionButton
                 ] })
               ] }),
-              onAttach ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+              onAttach ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
                 "input",
                 {
                   ref: pickerRef,
@@ -6959,14 +7529,14 @@ var PromptInput = /* @__PURE__ */ (0, import_react58.forwardRef)(function Prompt
                   }
                 }
               ) : null,
-              isDragging ? /* @__PURE__ */ (0, import_jsx_runtime66.jsxs)("div", { className: "ow-prompt-input__drop", "aria-hidden": "true", children: [
-                /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(UploadIcon, { size: 16 }),
+              isDragging ? /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { className: "ow-prompt-input__drop", "aria-hidden": "true", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(UploadIcon, { size: 16 }),
                 "Drop to attach"
               ] }) : null
             ]
           }
         ),
-        shownHint ? /* @__PURE__ */ (0, import_jsx_runtime66.jsx)(
+        shownHint ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
           "div",
           {
             className: cx("ow-prompt-input__hint", notice && "ow-prompt-input__hint--notice"),
@@ -6975,26 +7545,26 @@ var PromptInput = /* @__PURE__ */ (0, import_react58.forwardRef)(function Prompt
             children: shownHint
           }
         ) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime66.jsx)("span", { className: "ow-visually-hidden", role: "status", children: announcement })
+        /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "ow-visually-hidden", role: "status", children: announcement })
       ]
     }
   );
 });
 
 // src/components/PromptInput/PromptSuggestion.tsx
-var import_react59 = require("react");
-var import_jsx_runtime67 = require("react/jsx-runtime");
-var PromptSuggestion = /* @__PURE__ */ (0, import_react59.forwardRef)(function PromptSuggestion2({ children, icon: icon2, description, variant = description ? "card" : "pill", type = "button", className, ...buttonProps }, ref) {
+var import_react64 = require("react");
+var import_jsx_runtime74 = require("react/jsx-runtime");
+var PromptSuggestion = /* @__PURE__ */ (0, import_react64.forwardRef)(function PromptSuggestion2({ children, icon: icon2, description, variant = description ? "card" : "pill", type = "button", className, ...buttonProps }, ref) {
   if (variant === "card") {
-    return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("button", { ref, type, className: cx("ow-prompt-suggestion", "ow-prompt-suggestion--card", className), ...buttonProps, children: [
-      icon2 ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "ow-prompt-suggestion__icon", children: icon2 }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)("span", { className: "ow-prompt-suggestion__text", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "ow-prompt-suggestion__title", children }),
-        description ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "ow-prompt-suggestion__description", children: description }) : null
+    return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("button", { ref, type, className: cx("ow-prompt-suggestion", "ow-prompt-suggestion--card", className), ...buttonProps, children: [
+      icon2 ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "ow-prompt-suggestion__icon", children: icon2 }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("span", { className: "ow-prompt-suggestion__text", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "ow-prompt-suggestion__title", children }),
+        description ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "ow-prompt-suggestion__description", children: description }) : null
       ] })
     ] });
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
     "button",
     {
       ref,
@@ -7007,8 +7577,8 @@ var PromptSuggestion = /* @__PURE__ */ (0, import_react59.forwardRef)(function P
       ),
       ...buttonProps,
       children: [
-        icon2 ? /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "ow-prompt-suggestion__icon", children: icon2 }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime67.jsx)("span", { className: "ow-prompt-suggestion__label", children })
+        icon2 ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "ow-prompt-suggestion__icon", children: icon2 }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "ow-prompt-suggestion__label", children })
       ]
     }
   );
@@ -7023,7 +7593,7 @@ function PromptSuggestions({
   style,
   ...props
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime67.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
     "div",
     {
       role: "group",
@@ -7037,13 +7607,13 @@ function PromptSuggestions({
 }
 
 // src/components/Chat/ChatConversation.tsx
-var import_react60 = require("react");
-var import_jsx_runtime68 = require("react/jsx-runtime");
-var ChatConversationContext = /* @__PURE__ */ (0, import_react60.createContext)(null);
+var import_react65 = require("react");
+var import_jsx_runtime75 = require("react/jsx-runtime");
+var ChatConversationContext = /* @__PURE__ */ (0, import_react65.createContext)(null);
 var stickyDistance = 32;
 var defaultCount = (count) => `${count} new`;
 var prefersReducedMotion = () => typeof window !== "undefined" && Boolean(window.matchMedia?.("(prefers-reduced-motion: reduce)").matches);
-var ChatConversation = /* @__PURE__ */ (0, import_react60.forwardRef)(function ChatConversation2({
+var ChatConversation = /* @__PURE__ */ (0, import_react65.forwardRef)(function ChatConversation2({
   children,
   empty,
   footer,
@@ -7055,17 +7625,17 @@ var ChatConversation = /* @__PURE__ */ (0, import_react60.forwardRef)(function C
   className,
   ...props
 }, ref) {
-  const scrollerRef = (0, import_react60.useRef)(null);
-  const contentRef = (0, import_react60.useRef)(null);
-  const jumpRef = (0, import_react60.useRef)(null);
-  const following = (0, import_react60.useRef)(true);
-  const lastTop = (0, import_react60.useRef)(0);
-  const ready = (0, import_react60.useRef)(false);
-  const unseen = (0, import_react60.useRef)(/* @__PURE__ */ new Set());
-  const [isFollowing, setIsFollowing] = (0, import_react60.useState)(true);
-  const [newCount, setNewCount] = (0, import_react60.useState)(0);
-  const isEmpty = import_react60.Children.toArray(children).length === 0;
-  const follow = (0, import_react60.useCallback)((next) => {
+  const scrollerRef = (0, import_react65.useRef)(null);
+  const contentRef = (0, import_react65.useRef)(null);
+  const jumpRef = (0, import_react65.useRef)(null);
+  const following = (0, import_react65.useRef)(true);
+  const lastTop = (0, import_react65.useRef)(0);
+  const ready = (0, import_react65.useRef)(false);
+  const unseen = (0, import_react65.useRef)(/* @__PURE__ */ new Set());
+  const [isFollowing, setIsFollowing] = (0, import_react65.useState)(true);
+  const [newCount, setNewCount] = (0, import_react65.useState)(0);
+  const isEmpty = import_react65.Children.toArray(children).length === 0;
+  const follow = (0, import_react65.useCallback)((next) => {
     following.current = next;
     setIsFollowing(next);
     if (next && unseen.current.size > 0) {
@@ -7073,13 +7643,13 @@ var ChatConversation = /* @__PURE__ */ (0, import_react60.forwardRef)(function C
       setNewCount(0);
     }
   }, []);
-  const stick = (0, import_react60.useCallback)(() => {
+  const stick = (0, import_react65.useCallback)(() => {
     const scroller = scrollerRef.current;
     if (!scroller) return;
     scroller.scrollTop = scroller.scrollHeight;
     lastTop.current = scroller.scrollTop;
   }, []);
-  const scrollToBottom = (0, import_react60.useCallback)(
+  const scrollToBottom = (0, import_react65.useCallback)(
     (options) => {
       const scroller = scrollerRef.current;
       if (!scroller) return;
@@ -7088,12 +7658,12 @@ var ChatConversation = /* @__PURE__ */ (0, import_react60.forwardRef)(function C
     },
     [follow]
   );
-  (0, import_react60.useImperativeHandle)(ref, () => ({ scrollToBottom }), [scrollToBottom]);
-  (0, import_react60.useLayoutEffect)(stick, [stick]);
-  (0, import_react60.useEffect)(() => {
+  (0, import_react65.useImperativeHandle)(ref, () => ({ scrollToBottom }), [scrollToBottom]);
+  (0, import_react65.useLayoutEffect)(stick, [stick]);
+  (0, import_react65.useEffect)(() => {
     ready.current = true;
   }, []);
-  (0, import_react60.useEffect)(() => {
+  (0, import_react65.useEffect)(() => {
     const scroller = scrollerRef.current;
     const content = contentRef.current;
     if (!scroller || !content || typeof ResizeObserver === "undefined") return void 0;
@@ -7116,7 +7686,7 @@ var ChatConversation = /* @__PURE__ */ (0, import_react60.forwardRef)(function C
     }
     lastTop.current = top;
   }
-  const context = (0, import_react60.useMemo)(
+  const context = (0, import_react65.useMemo)(
     () => ({
       ready,
       register(id) {
@@ -7133,9 +7703,9 @@ var ChatConversation = /* @__PURE__ */ (0, import_react60.forwardRef)(function C
   );
   const showJump = !isFollowing && !isEmpty;
   const jump = usePresence(showJump);
-  return /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: cx("ow-chat-conversation", width === "full" && "ow-chat-conversation--full", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)("div", { className: "ow-chat-conversation__viewport", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: cx("ow-chat-conversation", width === "full" && "ow-chat-conversation--full", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)("div", { className: "ow-chat-conversation__viewport", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
         "div",
         {
           ref: scrollerRef,
@@ -7147,17 +7717,17 @@ var ChatConversation = /* @__PURE__ */ (0, import_react60.forwardRef)(function C
           "aria-labelledby": ariaLabelledBy,
           tabIndex: isEmpty ? void 0 : 0,
           onScroll,
-          children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { ref: contentRef, className: "ow-chat-conversation__content", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(ChatConversationContext.Provider, { value: context, children }) })
+          children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { ref: contentRef, className: "ow-chat-conversation__content", children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(ChatConversationContext.Provider, { value: context, children }) })
         }
       ),
-      isEmpty && empty ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "ow-chat-conversation__empty", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "ow-chat-conversation__empty-inner", children: empty }) }) : null,
-      jump.mounted ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "ow-chat-conversation__jump", "data-state": jump.state, children: /* @__PURE__ */ (0, import_jsx_runtime68.jsxs)(
+      isEmpty && empty ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: "ow-chat-conversation__empty", children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: "ow-chat-conversation__empty-inner", children: empty }) }) : null,
+      jump.mounted ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: "ow-chat-conversation__jump", "data-state": jump.state, children: /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
         Button,
         {
           ref: jumpRef,
           size: "sm",
           shape: "pill",
-          startIcon: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)(ArrowDownIcon, { size: 16 }),
+          startIcon: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(ArrowDownIcon, { size: 16 }),
           "aria-label": newCount > 0 ? `${jumpLabel}, ${formatNewCount(newCount)}` : jumpLabel,
           tabIndex: showJump ? void 0 : -1,
           onClick: () => {
@@ -7166,21 +7736,21 @@ var ChatConversation = /* @__PURE__ */ (0, import_react60.forwardRef)(function C
           },
           children: [
             jumpLabel,
-            newCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("span", { className: "ow-chat-conversation__count", children: formatNewCount(newCount) }) : null
+            newCount > 0 ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("span", { className: "ow-chat-conversation__count", children: formatNewCount(newCount) }) : null
           ]
         }
       ) }) : null
     ] }),
-    footer != null && footer !== false ? /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "ow-chat-conversation__footer", children: /* @__PURE__ */ (0, import_jsx_runtime68.jsx)("div", { className: "ow-chat-conversation__footer-inner", children: footer }) }) : null
+    footer != null && footer !== false ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: "ow-chat-conversation__footer", children: /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("div", { className: "ow-chat-conversation__footer-inner", children: footer }) }) : null
   ] });
 });
 
 // src/components/Chat/ChatMessage.tsx
-var import_react61 = require("react");
-var import_jsx_runtime69 = require("react/jsx-runtime");
+var import_react66 = require("react");
+var import_jsx_runtime76 = require("react/jsx-runtime");
 function lucide(paths) {
   return function Icon({ size: size2 = 16, strokeWidth = 2, ...props }) {
-    return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
@@ -7201,55 +7771,55 @@ function lucide(paths) {
   };
 }
 var BotIcon = /* @__PURE__ */ lucide(
-  /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_jsx_runtime69.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("path", { d: "M12 8V4H8" }),
-    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("rect", { width: "16", height: "12", x: "4", y: "8", rx: "2" }),
-    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("path", { d: "M2 14h2" }),
-    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("path", { d: "M20 14h2" }),
-    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("path", { d: "M15 13v2" }),
-    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("path", { d: "M9 13v2" })
+  /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(import_jsx_runtime76.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("path", { d: "M12 8V4H8" }),
+    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("rect", { width: "16", height: "12", x: "4", y: "8", rx: "2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("path", { d: "M2 14h2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("path", { d: "M20 14h2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("path", { d: "M15 13v2" }),
+    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("path", { d: "M9 13v2" })
   ] })
 );
 var RotateCcwIcon = /* @__PURE__ */ lucide(
-  /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_jsx_runtime69.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
-    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("path", { d: "M3 3v5h5" })
+  /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(import_jsx_runtime76.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
+    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("path", { d: "M3 3v5h5" })
   ] })
 );
 var ThumbsUpIcon = /* @__PURE__ */ lucide(
-  /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_jsx_runtime69.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("path", { d: "M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z" }),
-    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("path", { d: "M7 10v12" })
+  /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(import_jsx_runtime76.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("path", { d: "M15 5.88 14 10h5.83a2 2 0 0 1 1.92 2.56l-2.33 8A2 2 0 0 1 17.5 22H4a2 2 0 0 1-2-2v-8a2 2 0 0 1 2-2h2.76a2 2 0 0 0 1.79-1.11L12 2a3.13 3.13 0 0 1 3 3.88Z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("path", { d: "M7 10v12" })
   ] })
 );
 var ThumbsDownIcon = /* @__PURE__ */ lucide(
-  /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_jsx_runtime69.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("path", { d: "M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88Z" }),
-    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("path", { d: "M17 14V2" })
+  /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(import_jsx_runtime76.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("path", { d: "M9 18.12 10 14H4.17a2 2 0 0 1-1.92-2.56l2.33-8A2 2 0 0 1 6.5 2H20a2 2 0 0 1 2 2v8a2 2 0 0 1-2 2h-2.76a2 2 0 0 0-1.79 1.11L12 22a3.13 3.13 0 0 1-3-3.88Z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("path", { d: "M17 14V2" })
   ] })
 );
 var PencilIcon = /* @__PURE__ */ lucide(
-  /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_jsx_runtime69.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("path", { d: "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" }),
-    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("path", { d: "m15 5 4 4" })
+  /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(import_jsx_runtime76.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("path", { d: "M21.174 6.812a1 1 0 0 0-3.986-3.987L3.842 16.174a2 2 0 0 0-.5.83l-1.321 4.352a.5.5 0 0 0 .623.622l4.353-1.32a2 2 0 0 0 .83-.497z" }),
+    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("path", { d: "m15 5 4 4" })
   ] })
 );
 var botSizes = { sm: 14, md: 16, lg: 18 };
 function ChatAgentAvatar({ size: size2 = "md", label, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
     "span",
     {
       className: cx("ow-chat-avatar", size2 !== "md" && `ow-chat-avatar--${size2}`, className),
       role: label ? "img" : void 0,
       "aria-label": label,
       "aria-hidden": label ? void 0 : true,
-      children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(BotIcon, { size: botSizes[size2] })
+      children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(BotIcon, { size: botSizes[size2] })
     }
   );
 }
 function useChatEntrance() {
-  const conversation = (0, import_react61.useContext)(ChatConversationContext);
-  const [entering] = (0, import_react61.useState)(() => conversation?.ready.current ?? false);
+  const conversation = (0, import_react66.useContext)(ChatConversationContext);
+  const [entering] = (0, import_react66.useState)(() => conversation?.ready.current ?? false);
   return entering;
 }
 var formatters = /* @__PURE__ */ new Map();
@@ -7268,14 +7838,14 @@ function formattersFor(locale) {
 function MessageTime({ time, locale }) {
   const date = typeof time === "string" ? new Date(time) : time;
   if (Number.isNaN(date.getTime())) {
-    return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("time", { className: "ow-chat-message__time", children: String(time) });
+    return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("time", { className: "ow-chat-message__time", children: String(time) });
   }
   const { short, full } = formattersFor(locale);
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("time", { className: "ow-chat-message__time", dateTime: date.toISOString(), title: full.format(date), children: short.format(date) });
+  return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("time", { className: "ow-chat-message__time", dateTime: date.toISOString(), title: full.format(date), children: short.format(date) });
 }
 var skipCaret = '[aria-hidden="true"], .ow-visually-hidden';
 function useStreamingCaret(bodyRef, contentRef, caretRef, active) {
-  (0, import_react61.useLayoutEffect)(() => {
+  (0, import_react66.useLayoutEffect)(() => {
     const body = bodyRef.current;
     const content = contentRef.current;
     const caret = caretRef.current;
@@ -7320,38 +7890,38 @@ function useStreamingCaret(bodyRef, contentRef, caretRef, active) {
     };
   }, [active, bodyRef, contentRef, caretRef]);
 }
-var ChatMessage = /* @__PURE__ */ (0, import_react61.forwardRef)(function ChatMessage2({ from, children, name, avatar, time, locale, status = "done", error, onRetry, retryLabel = "Retry", actions, showActions = "hover", className, ...props }, ref) {
-  const conversation = (0, import_react61.useContext)(ChatConversationContext);
+var ChatMessage = /* @__PURE__ */ (0, import_react66.forwardRef)(function ChatMessage2({ from, children, name, avatar, time, locale, status = "done", error, onRetry, retryLabel = "Retry", actions, showActions = "hover", className, ...props }, ref) {
+  const conversation = (0, import_react66.useContext)(ChatConversationContext);
   const entering = useChatEntrance();
-  const id = (0, import_react61.useId)();
-  const bodyRef = (0, import_react61.useRef)(null);
-  const contentRef = (0, import_react61.useRef)(null);
-  const caretRef = (0, import_react61.useRef)(null);
+  const id = (0, import_react66.useId)();
+  const bodyRef = (0, import_react66.useRef)(null);
+  const contentRef = (0, import_react66.useRef)(null);
+  const caretRef = (0, import_react66.useRef)(null);
   const streaming = status === "streaming";
-  (0, import_react61.useEffect)(() => conversation?.register(id), [conversation, id]);
+  (0, import_react66.useEffect)(() => conversation?.register(id), [conversation, id]);
   useStreamingCaret(bodyRef, contentRef, caretRef, streaming && from !== "system");
   if (from === "system") {
-    return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
       "div",
       {
         ref,
         className: cx("ow-chat-message", "ow-chat-message--system", entering && "ow-chat-message--enter", className),
         ...props,
-        children: /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("span", { className: "ow-chat-message__system-text", children: [
+        children: /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("span", { className: "ow-chat-message__system-text", children: [
           children,
-          time !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_jsx_runtime69.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { "aria-hidden": "true", children: " \xB7 " }),
-            /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(MessageTime, { time, locale })
+          time !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(import_jsx_runtime76.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { "aria-hidden": "true", children: " \xB7 " }),
+            /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(MessageTime, { time, locale })
           ] }) : null
         ] })
       }
     );
   }
   const isUser = from === "user";
-  const avatarNode = avatar !== void 0 ? avatar : isUser ? null : /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(ChatAgentAvatar, {});
+  const avatarNode = avatar !== void 0 ? avatar : isUser ? null : /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(ChatAgentAvatar, {});
   const hasHeader = name != null || time !== void 0;
   const errorText = error ?? (isUser ? "Couldn't send this message." : "The answer didn't finish.");
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
     "article",
     {
       ref,
@@ -7367,22 +7937,22 @@ var ChatMessage = /* @__PURE__ */ (0, import_react61.forwardRef)(function ChatMe
       "aria-busy": streaming || void 0,
       ...props,
       children: [
-        avatarNode != null && avatarNode !== false ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "ow-chat-message__avatar", children: avatarNode }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "ow-chat-message__main", children: [
-          hasHeader ? /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: "ow-chat-message__header", children: [
-            name != null ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "ow-chat-message__name", children: name }) : /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "ow-visually-hidden", children: isUser ? "You" : "Agent" }),
-            time !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(MessageTime, { time, locale }) : null
-          ] }) : /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "ow-visually-hidden", children: isUser ? "You" : "Agent" }),
-          /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { ref: bodyRef, className: "ow-chat-message__body", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { ref: contentRef, className: "ow-chat-message__content", children }),
-            streaming ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { ref: caretRef, className: "ow-chat-message__caret", "aria-hidden": "true" }) : null
+        avatarNode != null && avatarNode !== false ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "ow-chat-message__avatar", children: avatarNode }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "ow-chat-message__main", children: [
+          hasHeader ? /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "ow-chat-message__header", children: [
+            name != null ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: "ow-chat-message__name", children: name }) : /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: "ow-visually-hidden", children: isUser ? "You" : "Agent" }),
+            time !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(MessageTime, { time, locale }) : null
+          ] }) : /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: "ow-visually-hidden", children: isUser ? "You" : "Agent" }),
+          /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { ref: bodyRef, className: "ow-chat-message__body", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { ref: contentRef, className: "ow-chat-message__content", children }),
+            streaming ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { ref: caretRef, className: "ow-chat-message__caret", "aria-hidden": "true" }) : null
           ] }),
-          status === "error" ? /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("div", { className: cx("ow-chat-message__error", onRetry && "ow-chat-message__error--retry"), children: [
-            /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(CircleAlertIcon, { size: 16, className: "ow-chat-message__error-icon" }),
-            /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "ow-chat-message__error-text", children: errorText }),
-            onRetry ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Button, { size: "sm", startIcon: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(RotateCcwIcon, { size: 16 }), onClick: onRetry, children: retryLabel }) : null
+          status === "error" ? /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: cx("ow-chat-message__error", onRetry && "ow-chat-message__error--retry"), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(CircleAlertIcon, { size: 16, className: "ow-chat-message__error-icon" }),
+            /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: "ow-chat-message__error-text", children: errorText }),
+            onRetry ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Button, { size: "sm", startIcon: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(RotateCcwIcon, { size: 16 }), onClick: onRetry, children: retryLabel }) : null
           ] }) : null,
-          actions && !streaming ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("div", { className: "ow-chat-message__actions", children: actions }) : null
+          actions && !streaming ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("div", { className: "ow-chat-message__actions", children: actions }) : null
         ] })
       ]
     }
@@ -7390,12 +7960,12 @@ var ChatMessage = /* @__PURE__ */ (0, import_react61.forwardRef)(function ChatMe
 });
 var defaultLabels = { copy: "Copy", copied: "Copied", edit: "Edit", retry: "Retry", good: "Good response", bad: "Bad response" };
 function CopyAction({ text, label, copiedLabel }) {
-  const [copied, setCopied] = (0, import_react61.useState)(false);
-  const timer = (0, import_react61.useRef)(0);
-  (0, import_react61.useEffect)(() => () => window.clearTimeout(timer.current), []);
+  const [copied, setCopied] = (0, import_react66.useState)(false);
+  const timer = (0, import_react66.useRef)(0);
+  (0, import_react66.useEffect)(() => () => window.clearTimeout(timer.current), []);
   const current = copied ? copiedLabel : label;
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_jsx_runtime69.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Tooltip, { label: current, children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(import_jsx_runtime76.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Tooltip, { label: current, children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
       Button,
       {
         variant: "ghost",
@@ -7410,13 +7980,13 @@ function CopyAction({ text, label, copiedLabel }) {
             timer.current = window.setTimeout(() => setCopied(false), 2e3);
           }
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)("span", { className: "ow-chat-actions__copy-icon", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(CopyIcon, { size: 16 }),
-          /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(CheckIcon, { size: 16 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("span", { className: "ow-chat-actions__copy-icon", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(CopyIcon, { size: 16 }),
+          /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(CheckIcon, { size: 16 })
         ] })
       }
     ) }),
-    /* @__PURE__ */ (0, import_jsx_runtime69.jsx)("span", { className: "ow-visually-hidden", "aria-live": "polite", children: copied ? copiedLabel : "" })
+    /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { className: "ow-visually-hidden", "aria-live": "polite", children: copied ? copiedLabel : "" })
   ] });
 }
 function ChatMessageActions({
@@ -7435,7 +8005,7 @@ function ChatMessageActions({
   const [current, setCurrent] = useControllableState(rating, defaultRating, onRate);
   const rate = (value, label, Icon) => {
     const pressed = current === value;
-    return /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Tooltip, { label, children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(
+    return /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Tooltip, { label, children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
       ToggleButton,
       {
         variant: "ghost",
@@ -7445,15 +8015,15 @@ function ChatMessageActions({
         pressed,
         className: "ow-chat-actions__rate",
         onPressedChange: () => setCurrent(pressed ? null : value),
-        children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Icon, { size: 16 })
+        children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Icon, { size: 16 })
       }
     ) });
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(Toolbar, { variant: "plain", size: "sm", "aria-label": ariaLabel, className: cx("ow-chat-actions", className), children: [
-    text !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(CopyAction, { text, label: words.copy, copiedLabel: words.copied }) : null,
-    onEdit ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Tooltip, { label: words.edit, children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Button, { variant: "ghost", size: "sm", iconOnly: true, "aria-label": words.edit, onClick: onEdit, children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(PencilIcon, { size: 16 }) }) }) : null,
-    onRetry ? /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Tooltip, { label: words.retry, children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(Button, { variant: "ghost", size: "sm", iconOnly: true, "aria-label": words.retry, onClick: onRetry, children: /* @__PURE__ */ (0, import_jsx_runtime69.jsx)(RotateCcwIcon, { size: 16 }) }) }) : null,
-    onRate ? /* @__PURE__ */ (0, import_jsx_runtime69.jsxs)(import_jsx_runtime69.Fragment, { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(Toolbar, { variant: "plain", size: "sm", "aria-label": ariaLabel, className: cx("ow-chat-actions", className), children: [
+    text !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(CopyAction, { text, label: words.copy, copiedLabel: words.copied }) : null,
+    onEdit ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Tooltip, { label: words.edit, children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Button, { variant: "ghost", size: "sm", iconOnly: true, "aria-label": words.edit, onClick: onEdit, children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(PencilIcon, { size: 16 }) }) }) : null,
+    onRetry ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Tooltip, { label: words.retry, children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(Button, { variant: "ghost", size: "sm", iconOnly: true, "aria-label": words.retry, onClick: onRetry, children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(RotateCcwIcon, { size: 16 }) }) }) : null,
+    onRate ? /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(import_jsx_runtime76.Fragment, { children: [
       rate("up", words.good, ThumbsUpIcon),
       rate("down", words.bad, ThumbsDownIcon)
     ] }) : null,
@@ -7462,31 +8032,31 @@ function ChatMessageActions({
 }
 
 // src/components/Chat/ChatLoader.tsx
-var import_jsx_runtime70 = require("react/jsx-runtime");
+var import_jsx_runtime77 = require("react/jsx-runtime");
 function ChatLoader({ label, inline = false, name, avatar, srLabel = "Working\u2026", className }) {
   const entering = useChatEntrance();
-  const indicator = label != null ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(TextShimmer, { className: "ow-chat-loader__label", children: label }) : /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("span", { className: "ow-chat-loader__dots", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "ow-chat-loader__dot", "aria-hidden": "true" }),
-    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "ow-chat-loader__dot", "aria-hidden": "true" }),
-    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "ow-chat-loader__dot", "aria-hidden": "true" }),
-    /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "ow-visually-hidden", children: srLabel })
+  const indicator = label != null ? /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(TextShimmer, { className: "ow-chat-loader__label", children: label }) : /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("span", { className: "ow-chat-loader__dots", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("span", { className: "ow-chat-loader__dot", "aria-hidden": "true" }),
+    /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("span", { className: "ow-chat-loader__dot", "aria-hidden": "true" }),
+    /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("span", { className: "ow-chat-loader__dot", "aria-hidden": "true" }),
+    /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("span", { className: "ow-visually-hidden", children: srLabel })
   ] });
   if (inline) {
-    return /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { role: "status", className: cx("ow-chat-loader", "ow-chat-loader--inline", className), children: indicator });
+    return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("span", { role: "status", className: cx("ow-chat-loader", "ow-chat-loader--inline", className), children: indicator });
   }
-  const avatarNode = avatar === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)(ChatAgentAvatar, {}) : avatar;
-  return /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { role: "status", className: cx("ow-chat-message", "ow-chat-message--assistant", "ow-chat-loader", entering && "ow-chat-loader--enter", className), children: [
-    avatarNode != null && avatarNode !== false ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "ow-chat-message__avatar", children: avatarNode }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime70.jsxs)("div", { className: "ow-chat-message__main", children: [
-      name != null ? /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "ow-chat-message__header", children: /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("span", { className: "ow-chat-message__name", children: name }) }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime70.jsx)("div", { className: "ow-chat-loader__line", children: indicator })
+  const avatarNode = avatar === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(ChatAgentAvatar, {}) : avatar;
+  return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { role: "status", className: cx("ow-chat-message", "ow-chat-message--assistant", "ow-chat-loader", entering && "ow-chat-loader--enter", className), children: [
+    avatarNode != null && avatarNode !== false ? /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: "ow-chat-message__avatar", children: avatarNode }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)("div", { className: "ow-chat-message__main", children: [
+      name != null ? /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: "ow-chat-message__header", children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("span", { className: "ow-chat-message__name", children: name }) }) : null,
+      /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("div", { className: "ow-chat-loader__line", children: indicator })
     ] })
   ] });
 }
 
 // src/components/ChatTool/ChatTool.tsx
-var import_react62 = require("react");
-var import_jsx_runtime71 = require("react/jsx-runtime");
+var import_react67 = require("react");
+var import_jsx_runtime78 = require("react/jsx-runtime");
 var statusWords = {
   pending: "Not started",
   running: "Running",
@@ -7496,7 +8066,7 @@ var statusWords = {
   cancelled: "Cancelled"
 };
 function SlashIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
     "svg",
     {
       width: 12,
@@ -7508,12 +8078,12 @@ function SlashIcon() {
       strokeLinecap: "round",
       "aria-hidden": "true",
       focusable: "false",
-      children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("path", { d: "M7 17 17 7" })
+      children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("path", { d: "M7 17 17 7" })
     }
   );
 }
 function ExclamationIcon() {
-  return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
     "svg",
     {
       width: 12,
@@ -7526,41 +8096,41 @@ function ExclamationIcon() {
       "aria-hidden": "true",
       focusable: "false",
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("path", { d: "M12 5v9" }),
-        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("path", { d: "M12 19h.01" })
+        /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("path", { d: "M12 5v9" }),
+        /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("path", { d: "M12 19h.01" })
       ]
     }
   );
 }
 function ChatStatusMarker({ status, icon: icon2 }) {
   const showsIcon = Boolean(icon2) && (status === "success" || status === "pending");
-  const glyph = status === "running" ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Spinner, { size: "sm", label: "" }) : status === "error" ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(XIcon, { size: 12, strokeWidth: 3 }) : status === "approval" ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ExclamationIcon, {}) : status === "cancelled" ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(SlashIcon, {}) : showsIcon ? icon2 : status === "success" ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(CheckIcon, { size: 12, strokeWidth: 3 }) : null;
-  return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("span", { className: cx("ow-chat-status", `ow-chat-status--${status}`, showsIcon && "ow-chat-status--icon"), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "ow-chat-status__glyph", "aria-hidden": "true", children: glyph }),
-    /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("span", { className: "ow-visually-hidden", children: [
+  const glyph = status === "running" ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Spinner, { size: "sm", label: "" }) : status === "error" ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(XIcon, { size: 12, strokeWidth: 3 }) : status === "approval" ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(ExclamationIcon, {}) : status === "cancelled" ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(SlashIcon, {}) : showsIcon ? icon2 : status === "success" ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(CheckIcon, { size: 12, strokeWidth: 3 }) : null;
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("span", { className: cx("ow-chat-status", `ow-chat-status--${status}`, showsIcon && "ow-chat-status--icon"), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "ow-chat-status__glyph", "aria-hidden": "true", children: glyph }),
+    /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("span", { className: "ow-visually-hidden", children: [
       statusWords[status],
       ": "
     ] })
   ] });
 }
 function formatDuration(ms, locale) {
-  const number = (value, digits = 0) => new Intl.NumberFormat(locale, { maximumFractionDigits: digits }).format(value);
+  const number2 = (value, digits = 0) => new Intl.NumberFormat(locale, { maximumFractionDigits: digits }).format(value);
   const safe = Math.max(0, ms);
-  if (safe < 1e3) return `${number(Math.round(safe))} ms`;
+  if (safe < 1e3) return `${number2(Math.round(safe))} ms`;
   const seconds = safe / 1e3;
-  if (seconds < 10) return `${number(Math.floor(seconds * 10) / 10, 1)} s`;
-  if (seconds < 60) return `${number(Math.floor(seconds))} s`;
+  if (seconds < 10) return `${number2(Math.floor(seconds * 10) / 10, 1)} s`;
+  if (seconds < 60) return `${number2(Math.floor(seconds))} s`;
   const minutes = Math.floor(seconds / 60);
   if (minutes < 60) {
     const rest2 = Math.floor(seconds % 60);
-    return rest2 ? `${number(minutes)} min ${number(rest2)} s` : `${number(minutes)} min`;
+    return rest2 ? `${number2(minutes)} min ${number2(rest2)} s` : `${number2(minutes)} min`;
   }
   const hours = Math.floor(minutes / 60);
   const rest = minutes % 60;
-  return rest ? `${number(hours)} h ${number(rest)} min` : `${number(hours)} h`;
+  return rest ? `${number2(hours)} h ${number2(rest)} min` : `${number2(hours)} h`;
 }
 function ChatDuration({ ms, locale, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("time", { dateTime: `PT${Math.max(0, Math.round(ms)) / 1e3}S`, className, children: formatDuration(ms, locale) });
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("time", { dateTime: `PT${Math.max(0, Math.round(ms)) / 1e3}S`, className, children: formatDuration(ms, locale) });
 }
 function useStatusExpansion({
   expanded,
@@ -7571,9 +8141,9 @@ function useStatusExpansion({
   initial = wantsOpen
 }) {
   const [isOpen, setOpen] = useControllableState(expanded, defaultExpanded ?? initial, onExpandedChange);
-  const touched = (0, import_react62.useRef)(false);
-  const previous = (0, import_react62.useRef)(wantsOpen);
-  (0, import_react62.useEffect)(() => {
+  const touched = (0, import_react67.useRef)(false);
+  const previous = (0, import_react67.useRef)(wantsOpen);
+  (0, import_react67.useEffect)(() => {
     if (previous.current === wantsOpen) return;
     previous.current = wantsOpen;
     if (expanded !== void 0) return;
@@ -7599,11 +8169,11 @@ function ChatCollapse({
   className,
   children
 }) {
-  const ref = (0, import_react62.useRef)(null);
-  (0, import_react62.useEffect)(() => {
+  const ref = (0, import_react67.useRef)(null);
+  (0, import_react67.useEffect)(() => {
     if (ref.current) ref.current.inert = !open;
   }, [open]);
-  return /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { ref, id, className: cx("ow-chat-collapse", bleed && "ow-chat-collapse--bleed"), "data-open": open, children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "ow-chat-collapse__clip", children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className, children }) }) });
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { ref, id, className: cx("ow-chat-collapse", bleed && "ow-chat-collapse--bleed"), "data-open": open, children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "ow-chat-collapse__clip", children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className, children }) }) });
 }
 var codeMaxHeight = 280;
 function formatInput(input) {
@@ -7614,7 +8184,7 @@ function formatInput(input) {
     return String(input);
   }
 }
-var ChatTool = /* @__PURE__ */ (0, import_react62.forwardRef)(function ChatTool2({
+var ChatTool = /* @__PURE__ */ (0, import_react67.forwardRef)(function ChatTool2({
   title,
   name,
   icon: icon2,
@@ -7636,12 +8206,12 @@ var ChatTool = /* @__PURE__ */ (0, import_react62.forwardRef)(function ChatTool2
   className,
   ...props
 }, ref) {
-  const id = (0, import_react62.useId)();
-  const rootRef = (0, import_react62.useRef)(null);
-  const triggerRef = (0, import_react62.useRef)(null);
-  const messageRef = (0, import_react62.useRef)(null);
-  const decided = (0, import_react62.useRef)(false);
-  const [announcement, setAnnouncement] = (0, import_react62.useState)("");
+  const id = (0, import_react67.useId)();
+  const rootRef = (0, import_react67.useRef)(null);
+  const triggerRef = (0, import_react67.useRef)(null);
+  const messageRef = (0, import_react67.useRef)(null);
+  const decided = (0, import_react67.useRef)(false);
+  const [announcement, setAnnouncement] = (0, import_react67.useState)("");
   const needsApproval = status === "approval";
   const [isOpen, toggle] = useStatusExpansion({
     expanded,
@@ -7654,7 +8224,7 @@ var ChatTool = /* @__PURE__ */ (0, import_react62.forwardRef)(function ChatTool2
   const hasError = error !== void 0 && error !== null && error !== false && error !== "";
   const hasDetails = hasInput || hasOutput || hasError;
   const hasMeta = Boolean(summary) || duration !== void 0;
-  (0, import_react62.useEffect)(() => {
+  (0, import_react67.useEffect)(() => {
     if (!needsApproval) {
       setAnnouncement("");
       return;
@@ -7665,30 +8235,30 @@ var ChatTool = /* @__PURE__ */ (0, import_react62.forwardRef)(function ChatTool2
     }, 150);
     return () => window.clearTimeout(timer);
   }, [needsApproval]);
-  (0, import_react62.useEffect)(() => {
+  (0, import_react67.useEffect)(() => {
     if (needsApproval || !decided.current) return;
     decided.current = false;
     const active = document.activeElement;
     if (!active || active === document.body) (triggerRef.current ?? rootRef.current)?.focus();
   }, [needsApproval]);
   const running = status === "running";
-  const header = /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_jsx_runtime71.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ChatStatusMarker, { status }),
-    icon2 ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "ow-chat-tool__icon", "aria-hidden": "true", children: icon2 }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("span", { className: "ow-chat-tool__main", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("span", { className: "ow-chat-tool__heading", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "ow-chat-tool__title", children: running ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(TextShimmer, { children: title }) : title }),
-        name ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Code, { className: "ow-chat-tool__name", children: name }) : null
+  const header = /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(import_jsx_runtime78.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(ChatStatusMarker, { status }),
+    icon2 ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "ow-chat-tool__icon", "aria-hidden": "true", children: icon2 }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("span", { className: "ow-chat-tool__main", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("span", { className: "ow-chat-tool__heading", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "ow-chat-tool__title", children: running ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(TextShimmer, { children: title }) : title }),
+        name ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Code, { className: "ow-chat-tool__name", children: name }) : null
       ] }),
-      hasMeta ? /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("span", { className: "ow-chat-tool__meta", children: [
-        summary ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "ow-chat-tool__summary", children: summary }) : null,
-        summary && duration !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "ow-chat-tool__dot", "aria-hidden": "true", children: "\xB7" }) : null,
-        duration !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ChatDuration, { ms: duration, locale, className: "ow-chat-tool__duration" }) : null
+      hasMeta ? /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("span", { className: "ow-chat-tool__meta", children: [
+        summary ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "ow-chat-tool__summary", children: summary }) : null,
+        summary && duration !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "ow-chat-tool__dot", "aria-hidden": "true", children: "\xB7" }) : null,
+        duration !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(ChatDuration, { ms: duration, locale, className: "ow-chat-tool__duration" }) : null
       ] }) : null
     ] }),
-    hasDetails ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "ow-chat-tool__chevron", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(ChevronRightIcon, { size: 14 }) }) : null
+    hasDetails ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "ow-chat-tool__chevron", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(ChevronRightIcon, { size: 14 }) }) : null
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(
     "div",
     {
       ref: (element) => {
@@ -7703,7 +8273,7 @@ var ChatTool = /* @__PURE__ */ (0, import_react62.forwardRef)(function ChatTool2
       tabIndex: hasDetails ? void 0 : -1,
       ...props,
       children: [
-        hasDetails ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+        hasDetails ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
           "button",
           {
             ref: triggerRef,
@@ -7715,28 +8285,28 @@ var ChatTool = /* @__PURE__ */ (0, import_react62.forwardRef)(function ChatTool2
             onClick: toggle,
             children: header
           }
-        ) : /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "ow-chat-tool__header", children: header }),
-        hasDetails ? /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(ChatCollapse, { id: `${id}-details`, open: isOpen, className: "ow-chat-tool__details", children: [
-          hasInput ? /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "ow-chat-tool__section", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "ow-chat-tool__label", children: "Input" }),
-            typeof input === "string" && !input.includes("\n") ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Snippet, { value: input, prompt: null }) : /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(CodeBlock, { code: formatInput(input), language: typeof input === "string" ? void 0 : "json", maxHeight: codeMaxHeight })
+        ) : /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "ow-chat-tool__header", children: header }),
+        hasDetails ? /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(ChatCollapse, { id: `${id}-details`, open: isOpen, className: "ow-chat-tool__details", children: [
+          hasInput ? /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "ow-chat-tool__section", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "ow-chat-tool__label", children: "Input" }),
+            typeof input === "string" && !input.includes("\n") ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Snippet, { value: input, prompt: null }) : /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(CodeBlock, { code: formatInput(input), language: typeof input === "string" ? void 0 : "json", maxHeight: codeMaxHeight })
           ] }) : null,
-          hasOutput ? /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "ow-chat-tool__section", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "ow-chat-tool__label", children: "Output" }),
-            typeof output === "string" ? /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(CodeBlock, { code: output, maxHeight: codeMaxHeight }) : /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "ow-chat-tool__output", children: output })
+          hasOutput ? /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "ow-chat-tool__section", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "ow-chat-tool__label", children: "Output" }),
+            typeof output === "string" ? /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(CodeBlock, { code: output, maxHeight: codeMaxHeight }) : /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "ow-chat-tool__output", children: output })
           ] }) : null,
-          hasError ? /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "ow-chat-tool__section", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "ow-chat-tool__label", children: "Error" }),
-            /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("div", { className: "ow-chat-tool__error", children: error })
+          hasError ? /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "ow-chat-tool__section", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "ow-chat-tool__label", children: "Error" }),
+            /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("div", { className: "ow-chat-tool__error", children: error })
           ] }) : null
         ] }) : null,
-        needsApproval ? /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "ow-chat-tool__approval", role: "group", "aria-labelledby": `${id}-request`, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("p", { ref: messageRef, id: `${id}-request`, className: "ow-chat-tool__request", children: approvalMessage ?? (name ? /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)(import_jsx_runtime71.Fragment, { children: [
+        needsApproval ? /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "ow-chat-tool__approval", role: "group", "aria-labelledby": `${id}-request`, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("p", { ref: messageRef, id: `${id}-request`, className: "ow-chat-tool__request", children: approvalMessage ?? (name ? /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)(import_jsx_runtime78.Fragment, { children: [
             "Wants to run ",
-            /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(Code, { children: name })
+            /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(Code, { children: name })
           ] }) : "Wants to go ahead") }),
-          /* @__PURE__ */ (0, import_jsx_runtime71.jsxs)("div", { className: "ow-chat-tool__actions", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime78.jsxs)("div", { className: "ow-chat-tool__actions", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
               Button,
               {
                 variant: "primary",
@@ -7748,7 +8318,7 @@ var ChatTool = /* @__PURE__ */ (0, import_react62.forwardRef)(function ChatTool2
                 children: approveLabel
               }
             ),
-            /* @__PURE__ */ (0, import_jsx_runtime71.jsx)(
+            /* @__PURE__ */ (0, import_jsx_runtime78.jsx)(
               Button,
               {
                 size: "sm",
@@ -7761,17 +8331,17 @@ var ChatTool = /* @__PURE__ */ (0, import_react62.forwardRef)(function ChatTool2
             )
           ] })
         ] }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime71.jsx)("span", { className: "ow-visually-hidden", "aria-live": "polite", children: announcement })
+        /* @__PURE__ */ (0, import_jsx_runtime78.jsx)("span", { className: "ow-visually-hidden", "aria-live": "polite", children: announcement })
       ]
     }
   );
 });
 
 // src/components/ChainOfThought/ChainOfThought.tsx
-var import_react63 = require("react");
-var import_jsx_runtime72 = require("react/jsx-runtime");
+var import_react68 = require("react");
+var import_jsx_runtime79 = require("react/jsx-runtime");
 var plural = (count, word) => `${count} ${word}${count === 1 ? "" : "s"}`;
-var ChainOfThought = /* @__PURE__ */ (0, import_react63.forwardRef)(function ChainOfThought2({
+var ChainOfThought = /* @__PURE__ */ (0, import_react68.forwardRef)(function ChainOfThought2({
   steps = [],
   status = "success",
   duration,
@@ -7785,7 +8355,7 @@ var ChainOfThought = /* @__PURE__ */ (0, import_react63.forwardRef)(function Cha
   className,
   ...props
 }, ref) {
-  const id = (0, import_react63.useId)();
+  const id = (0, import_react68.useId)();
   const running = status === "running";
   const [isOpen, toggle] = useStatusExpansion({
     expanded,
@@ -7801,30 +8371,30 @@ var ChainOfThought = /* @__PURE__ */ (0, import_react63.forwardRef)(function Cha
   const failed = steps.filter((step) => step.status === "error").length;
   const heading = label ?? (running ? "Thinking\u2026" : duration !== void 0 ? `Thought for ${formatDuration(duration, locale)}` : "Reasoning");
   const count = steps.length > 0 ? running ? `${finished} of ${plural(steps.length, "step")}` : plural(steps.length, "step") : null;
-  const headerText = /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("span", { className: "ow-chat-toggle__text", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("span", { className: "ow-chain-of-thought__label", children: running ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(TextShimmer, { children: heading }) : heading }),
-    count ? /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("span", { className: "ow-chat-toggle__meta", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("span", { "aria-hidden": "true", children: "\xB7 " }),
+  const headerText = /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("span", { className: "ow-chat-toggle__text", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { className: "ow-chain-of-thought__label", children: running ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(TextShimmer, { children: heading }) : heading }),
+    count ? /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("span", { className: "ow-chat-toggle__meta", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { "aria-hidden": "true", children: "\xB7 " }),
       count,
-      failed > 0 ? /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("span", { className: "ow-chain-of-thought__failed", children: [
+      failed > 0 ? /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("span", { className: "ow-chain-of-thought__failed", children: [
         ", ",
         failed,
         " failed"
       ] }) : null
     ] }) : null
   ] });
-  return /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { ref, className: cx("ow-chain-of-thought", className), "data-status": status, "aria-busy": running || void 0, ...props, children: [
-    hasBody ? /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("button", { type: "button", className: "ow-chat-toggle", "aria-expanded": isOpen, "aria-controls": `${id}-body`, onClick: toggle, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("span", { className: "ow-chat-toggle__chevron", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(ChevronRightIcon, { size: 14 }) }),
+  return /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { ref, className: cx("ow-chain-of-thought", className), "data-status": status, "aria-busy": running || void 0, ...props, children: [
+    hasBody ? /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("button", { type: "button", className: "ow-chat-toggle", "aria-expanded": isOpen, "aria-controls": `${id}-body`, onClick: toggle, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { className: "ow-chat-toggle__chevron", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(ChevronRightIcon, { size: 14 }) }),
       headerText
-    ] }) : /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: "ow-chat-toggle ow-chain-of-thought__static", children: headerText }),
-    hasBody ? /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)(ChatCollapse, { id: `${id}-body`, open: isOpen, bleed: true, className: "ow-chain-of-thought__body", children: [
-      hasReasoning ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: "ow-chain-of-thought__reasoning", children }) : null,
-      steps.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("ol", { className: "ow-chain-of-thought__steps", children: steps.map((step) => /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("li", { className: "ow-chain-of-thought__step", "data-status": step.status, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(ChatStatusMarker, { status: step.status, icon: step.icon }),
-        /* @__PURE__ */ (0, import_jsx_runtime72.jsxs)("div", { className: "ow-chain-of-thought__step-body", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("span", { className: "ow-chain-of-thought__step-title", children: step.status === "running" ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)(TextShimmer, { children: step.title }) : step.title }),
-          step.detail !== void 0 && step.detail !== null ? /* @__PURE__ */ (0, import_jsx_runtime72.jsx)("div", { className: "ow-chain-of-thought__detail", children: step.detail }) : null
+    ] }) : /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "ow-chat-toggle ow-chain-of-thought__static", children: headerText }),
+    hasBody ? /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)(ChatCollapse, { id: `${id}-body`, open: isOpen, bleed: true, className: "ow-chain-of-thought__body", children: [
+      hasReasoning ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "ow-chain-of-thought__reasoning", children }) : null,
+      steps.length > 0 ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("ol", { className: "ow-chain-of-thought__steps", children: steps.map((step) => /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("li", { className: "ow-chain-of-thought__step", "data-status": step.status, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(ChatStatusMarker, { status: step.status, icon: step.icon }),
+        /* @__PURE__ */ (0, import_jsx_runtime79.jsxs)("div", { className: "ow-chain-of-thought__step-body", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("span", { className: "ow-chain-of-thought__step-title", children: step.status === "running" ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)(TextShimmer, { children: step.title }) : step.title }),
+          step.detail !== void 0 && step.detail !== null ? /* @__PURE__ */ (0, import_jsx_runtime79.jsx)("div", { className: "ow-chain-of-thought__detail", children: step.detail }) : null
         ] })
       ] }, step.id)) }) : null
     ] }) : null
@@ -7832,11 +8402,11 @@ var ChainOfThought = /* @__PURE__ */ (0, import_react63.forwardRef)(function Cha
 });
 
 // src/components/ChatSource/ChatSource.tsx
-var import_react64 = require("react");
-var import_jsx_runtime73 = require("react/jsx-runtime");
+var import_react69 = require("react");
+var import_jsx_runtime80 = require("react/jsx-runtime");
 var openDelay = 250;
 var closeDelay = 150;
-var ChatSource = /* @__PURE__ */ (0, import_react64.forwardRef)(function ChatSource2({
+var ChatSource = /* @__PURE__ */ (0, import_react69.forwardRef)(function ChatSource2({
   title,
   source,
   snippet,
@@ -7851,13 +8421,13 @@ var ChatSource = /* @__PURE__ */ (0, import_react64.forwardRef)(function ChatSou
   "aria-label": ariaLabel,
   className
 }, ref) {
-  const id = (0, import_react64.useId)();
-  const wrapperRef = (0, import_react64.useRef)(null);
-  const chipRef = (0, import_react64.useRef)(null);
-  const cardRef = (0, import_react64.useRef)(null);
-  const timer = (0, import_react64.useRef)(0);
-  const pointer = (0, import_react64.useRef)("mouse");
-  const [open, setOpen] = (0, import_react64.useState)(false);
+  const id = (0, import_react69.useId)();
+  const wrapperRef = (0, import_react69.useRef)(null);
+  const chipRef = (0, import_react69.useRef)(null);
+  const cardRef = (0, import_react69.useRef)(null);
+  const timer = (0, import_react69.useRef)(0);
+  const pointer = (0, import_react69.useRef)("mouse");
+  const [open, setOpen] = (0, import_react69.useState)(false);
   const { mounted, state } = usePresence(open);
   const style = useFloating({ open: mounted, anchorRef: chipRef, floatingRef: cardRef, placement: "bottom-start", offset: 6, maxHeight: 360 });
   const schedule = (next, delay) => {
@@ -7865,12 +8435,12 @@ var ChatSource = /* @__PURE__ */ (0, import_react64.forwardRef)(function ChatSou
     if (delay === 0) setOpen(next);
     else timer.current = window.setTimeout(() => setOpen(next), delay);
   };
-  const close = (0, import_react64.useCallback)(() => {
+  const close = (0, import_react69.useCallback)(() => {
     window.clearTimeout(timer.current);
     setOpen(false);
   }, []);
   useDismiss(open, [wrapperRef], close);
-  (0, import_react64.useEffect)(() => () => window.clearTimeout(timer.current), []);
+  (0, import_react69.useEffect)(() => () => window.clearTimeout(timer.current), []);
   const name = ariaLabel ?? (index !== void 0 ? `Source ${index}` : label ?? "Source");
   const describedBy = [`${id}-title`, source ? `${id}-source` : null, snippet ? `${id}-snippet` : null].filter(Boolean).join(" ");
   const externalProps = external ? { target: "_blank", rel: "noopener noreferrer" } : {};
@@ -7902,8 +8472,8 @@ var ChatSource = /* @__PURE__ */ (0, import_react64.forwardRef)(function ChatSou
       onClick?.(event);
     }
   };
-  const chipText = /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "ow-chat-source__chip-text", children: index ?? label });
-  return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(
+  const chipText = /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: "ow-chat-source__chip-text", children: index ?? label });
+  return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(
     "span",
     {
       ref: wrapperRef,
@@ -7915,19 +8485,19 @@ var ChatSource = /* @__PURE__ */ (0, import_react64.forwardRef)(function ChatSou
         if (event.pointerType === "mouse") schedule(false, closeDelay);
       },
       children: [
-        href ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("a", { href, ...externalProps, ...chipProps, children: chipText }) : /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("button", { type: "button", ...chipProps, children: chipText }),
-        /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("span", { ref: cardRef, ...manualPopover, hidden: !mounted, "data-state": state, className: "ow-chat-source-card ow-floating", style, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("span", { className: "ow-chat-source-card__header", children: [
-            icon2 ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "ow-chat-source-card__icon", "aria-hidden": "true", children: icon2 }) : null,
-            /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { id: `${id}-title`, className: "ow-chat-source-card__title", children: title })
+        href ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("a", { href, ...externalProps, ...chipProps, children: chipText }) : /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("button", { type: "button", ...chipProps, children: chipText }),
+        /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("span", { ref: cardRef, ...manualPopover, hidden: !mounted, "data-state": state, className: "ow-chat-source-card ow-floating", style, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("span", { className: "ow-chat-source-card__header", children: [
+            icon2 ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: "ow-chat-source-card__icon", "aria-hidden": "true", children: icon2 }) : null,
+            /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { id: `${id}-title`, className: "ow-chat-source-card__title", children: title })
           ] }),
-          source ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { id: `${id}-source`, className: "ow-chat-source-card__source", children: source }) : null,
-          snippet ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { id: `${id}-snippet`, className: cx("ow-chat-source-card__snippet", `ow-chat-source-card__snippet--${snippetFormat}`), children: snippet }) : null,
+          source ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { id: `${id}-source`, className: "ow-chat-source-card__source", children: source }) : null,
+          snippet ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { id: `${id}-snippet`, className: cx("ow-chat-source-card__snippet", `ow-chat-source-card__snippet--${snippetFormat}`), children: snippet }) : null,
           href ? (
             // The chip is the same link, so this one stays out of the tab order.
-            /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("a", { href, ...externalProps, tabIndex: -1, className: cx(linkClassName({ variant: "standalone" }), "ow-chat-source-card__open"), children: [
+            /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("a", { href, ...externalProps, tabIndex: -1, className: cx(linkClassName({ variant: "standalone" }), "ow-chat-source-card__open"), children: [
               openLabel,
-              /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(ArrowUpRightIcon, { size: 13 })
+              /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(ArrowUpRightIcon, { size: 13 })
             ] })
           ) : null
         ] })
@@ -7935,34 +8505,34 @@ var ChatSource = /* @__PURE__ */ (0, import_react64.forwardRef)(function ChatSou
     }
   );
 });
-var ChatSources = /* @__PURE__ */ (0, import_react64.forwardRef)(function ChatSources2({ sources, label, expanded, defaultExpanded = false, onExpandedChange, className, ...props }, ref) {
-  const id = (0, import_react64.useId)();
+var ChatSources = /* @__PURE__ */ (0, import_react69.forwardRef)(function ChatSources2({ sources, label, expanded, defaultExpanded = false, onExpandedChange, className, ...props }, ref) {
+  const id = (0, import_react69.useId)();
   const [isOpen, setOpen] = useControllableState(expanded, defaultExpanded, onExpandedChange);
   if (sources.length === 0) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("div", { ref, className: cx("ow-chat-sources", className), ...props, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("button", { type: "button", className: "ow-chat-toggle", "aria-expanded": isOpen, "aria-controls": `${id}-list`, onClick: () => setOpen(!isOpen), children: [
-      /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "ow-chat-toggle__chevron", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(ChevronRightIcon, { size: 14 }) }),
-      /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "ow-chat-toggle__text", children: label ?? `${sources.length} ${sources.length === 1 ? "source" : "sources"}` })
+  return /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("div", { ref, className: cx("ow-chat-sources", className), ...props, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("button", { type: "button", className: "ow-chat-toggle", "aria-expanded": isOpen, "aria-controls": `${id}-list`, onClick: () => setOpen(!isOpen), children: [
+      /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: "ow-chat-toggle__chevron", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(ChevronRightIcon, { size: 14 }) }),
+      /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: "ow-chat-toggle__text", children: label ?? `${sources.length} ${sources.length === 1 ? "source" : "sources"}` })
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(ChatCollapse, { id: `${id}-list`, open: isOpen, bleed: true, className: "ow-chat-sources__body", children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("ul", { className: "ow-chat-sources__list", children: sources.map((item, position) => {
-      const content = /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(import_jsx_runtime73.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("span", { className: "ow-chat-sources__lead", children: [
-          item.index !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("span", { className: "ow-chat-sources__index", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "ow-visually-hidden", children: "Source " }),
+    /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(ChatCollapse, { id: `${id}-list`, open: isOpen, bleed: true, className: "ow-chat-sources__body", children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("ul", { className: "ow-chat-sources__list", children: sources.map((item, position) => {
+      const content = /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(import_jsx_runtime80.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("span", { className: "ow-chat-sources__lead", children: [
+          item.index !== void 0 ? /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("span", { className: "ow-chat-sources__index", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: "ow-visually-hidden", children: "Source " }),
             item.index
           ] }) : null,
-          item.icon || item.index === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "ow-chat-sources__icon", "aria-hidden": "true", children: item.icon ?? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(FileIcon, { size: 15 }) }) : null
+          item.icon || item.index === void 0 ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: "ow-chat-sources__icon", "aria-hidden": "true", children: item.icon ?? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(FileIcon, { size: 15 }) }) : null
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)("span", { className: "ow-chat-sources__text", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "ow-chat-sources__title", children: item.title }),
-          item.source ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "ow-chat-sources__source", children: item.source }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)("span", { className: "ow-chat-sources__text", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: "ow-chat-sources__title", children: item.title }),
+          item.source ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: "ow-chat-sources__source", children: item.source }) : null
         ] }),
-        item.href && item.external ? /* @__PURE__ */ (0, import_jsx_runtime73.jsxs)(import_jsx_runtime73.Fragment, { children: [
-          /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "ow-chat-sources__external", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(ArrowUpRightIcon, { size: 14 }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("span", { className: "ow-visually-hidden", children: " (opens in a new tab)" })
+        item.href && item.external ? /* @__PURE__ */ (0, import_jsx_runtime80.jsxs)(import_jsx_runtime80.Fragment, { children: [
+          /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: "ow-chat-sources__external", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(ArrowUpRightIcon, { size: 14 }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("span", { className: "ow-visually-hidden", children: " (opens in a new tab)" })
         ] }) : null
       ] });
-      return /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("li", { children: item.href ? /* @__PURE__ */ (0, import_jsx_runtime73.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("li", { children: item.href ? /* @__PURE__ */ (0, import_jsx_runtime80.jsx)(
         "a",
         {
           href: item.href,
@@ -7970,21 +8540,21 @@ var ChatSources = /* @__PURE__ */ (0, import_react64.forwardRef)(function ChatSo
           ...item.external ? { target: "_blank", rel: "noopener noreferrer" } : {},
           children: content
         }
-      ) : /* @__PURE__ */ (0, import_jsx_runtime73.jsx)("div", { className: "ow-chat-sources__card", children: content }) }, item.id ?? item.index ?? position);
+      ) : /* @__PURE__ */ (0, import_jsx_runtime80.jsx)("div", { className: "ow-chat-sources__card", children: content }) }, item.id ?? item.index ?? position);
     }) }) })
   ] });
 });
 
 // src/components/ColorPicker/ColorPicker.tsx
-var import_react65 = require("react");
+var import_react70 = require("react");
 var import_react_colorful = require("react-colorful");
-var import_jsx_runtime74 = require("react/jsx-runtime");
+var import_jsx_runtime81 = require("react/jsx-runtime");
 var swatchColor = (swatch) => typeof swatch === "string" ? swatch : swatch.color;
 var swatchName = (swatch) => typeof swatch === "string" ? swatch : swatch.name;
 var same = (a, b) => a.toLowerCase().replace(/^#/, "") === b.toLowerCase().replace(/^#/, "");
 function ColorPicker({
   value,
-  defaultValue = "#312c7e",
+  defaultValue: defaultValue2 = "#312c7e",
   onChange,
   alpha = false,
   swatches,
@@ -7993,11 +8563,11 @@ function ColorPicker({
   "aria-label": ariaLabel = "Colour",
   className
 }) {
-  const [color, setColor] = useControllableState(value, defaultValue, onChange);
-  const [canPick, setCanPick] = (0, import_react65.useState)(false);
-  const rootRef = (0, import_react65.useRef)(null);
-  (0, import_react65.useEffect)(() => setCanPick(typeof window !== "undefined" && "EyeDropper" in window), []);
-  (0, import_react65.useEffect)(() => {
+  const [color, setColor] = useControllableState(value, defaultValue2, onChange);
+  const [canPick, setCanPick] = (0, import_react70.useState)(false);
+  const rootRef = (0, import_react70.useRef)(null);
+  (0, import_react70.useEffect)(() => setCanPick(typeof window !== "undefined" && "EyeDropper" in window), []);
+  (0, import_react70.useEffect)(() => {
     const names = { saturation: "Colour", hue: "Hue", alpha: "Opacity" };
     for (const [part, label] of Object.entries(names)) {
       rootRef.current?.querySelector(`.react-colorful__${part} .react-colorful__interactive`)?.setAttribute("aria-label", label);
@@ -8013,13 +8583,13 @@ function ColorPicker({
     } catch {
     }
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { ref: rootRef, role: "group", "aria-label": ariaLabel, className: cx("ow-color-picker", className), children: [
-    /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(Picker, { color, onChange: change }),
-    showInput || eyeDropper && canPick ? /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("div", { className: "ow-color-picker__row", children: [
-      eyeDropper && canPick ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("button", { type: "button", className: "ow-color-picker__dropper", "aria-label": "Pick a colour from the screen", onClick: pickFromScreen, children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(PipetteIcon, { size: 15 }) }) : null,
-      showInput ? /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)("span", { className: "ow-input-group ow-input-group--sm ow-color-picker__input", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "ow-input-group__addon", "aria-hidden": "true", children: "#" }),
-        /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { ref: rootRef, role: "group", "aria-label": ariaLabel, className: cx("ow-color-picker", className), children: [
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(Picker, { color, onChange: change }),
+    showInput || eyeDropper && canPick ? /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("div", { className: "ow-color-picker__row", children: [
+      eyeDropper && canPick ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("button", { type: "button", className: "ow-color-picker__dropper", "aria-label": "Pick a colour from the screen", onClick: pickFromScreen, children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(PipetteIcon, { size: 15 }) }) : null,
+      showInput ? /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)("span", { className: "ow-input-group ow-input-group--sm ow-color-picker__input", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { className: "ow-input-group__addon", "aria-hidden": "true", children: "#" }),
+        /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
           import_react_colorful.HexColorInput,
           {
             className: "ow-input-group__input",
@@ -8031,11 +8601,11 @@ function ColorPicker({
           }
         )
       ] }) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "ow-color-picker__preview", style: { "--ow-color-picker-value": color }, "aria-hidden": "true" })
+      /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { className: "ow-color-picker__preview", style: { "--ow-color-picker-value": color }, "aria-hidden": "true" })
     ] }) : null,
-    swatches?.length ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("div", { className: "ow-color-picker__swatches", role: "group", "aria-label": "Swatches", children: swatches.map((swatch) => {
+    swatches?.length ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("div", { className: "ow-color-picker__swatches", role: "group", "aria-label": "Swatches", children: swatches.map((swatch) => {
       const swatchValue = swatchColor(swatch);
-      return /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+      return /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
         "button",
         {
           type: "button",
@@ -8055,9 +8625,9 @@ function assignRef7(ref, value) {
   if (typeof ref === "function") ref(value);
   else if (ref) ref.current = value;
 }
-var ColorField = /* @__PURE__ */ (0, import_react65.forwardRef)(function ColorField2({
+var ColorField = /* @__PURE__ */ (0, import_react70.forwardRef)(function ColorField2({
   value,
-  defaultValue = "#312c7e",
+  defaultValue: defaultValue2 = "#312c7e",
   onChange,
   size: size2 = "md",
   isInvalid = false,
@@ -8070,25 +8640,25 @@ var ColorField = /* @__PURE__ */ (0, import_react65.forwardRef)(function ColorFi
   "aria-describedby": ariaDescribedBy,
   ...pickerProps
 }, ref) {
-  const [color, setColor] = useControllableState(value, defaultValue, onChange);
-  const [isOpen, setOpen] = (0, import_react65.useState)(false);
-  const triggerRef = (0, import_react65.useRef)(null);
-  const panelRef = (0, import_react65.useRef)(null);
-  const panelId = (0, import_react65.useId)();
+  const [color, setColor] = useControllableState(value, defaultValue2, onChange);
+  const [isOpen, setOpen] = (0, import_react70.useState)(false);
+  const triggerRef = (0, import_react70.useRef)(null);
+  const panelRef = (0, import_react70.useRef)(null);
+  const panelId = (0, import_react70.useId)();
   const { mounted, state } = usePresence(isOpen);
   const style = useFloating({ open: mounted, anchorRef: triggerRef, floatingRef: panelRef, placement, offset: 6, maxHeight: 640 });
-  const close = (0, import_react65.useCallback)((reason) => {
+  const close = (0, import_react70.useCallback)((reason) => {
     setOpen(false);
     if (reason !== "outside") triggerRef.current?.focus();
   }, []);
   useDismiss(isOpen, [panelRef, triggerRef], close);
-  (0, import_react65.useEffect)(() => {
+  (0, import_react70.useEffect)(() => {
     if (!isOpen) return void 0;
     const frame = requestAnimationFrame(() => panelRef.current?.querySelector(".react-colorful__interactive")?.focus());
     return () => cancelAnimationFrame(frame);
   }, [isOpen]);
-  return /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(import_jsx_runtime74.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime74.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(import_jsx_runtime81.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime81.jsxs)(
       "button",
       {
         ref: (element) => {
@@ -8120,13 +8690,13 @@ var ColorField = /* @__PURE__ */ (0, import_react65.forwardRef)(function ColorFi
           }
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { className: "ow-color-field__swatch", style: { "--ow-color-picker-value": color }, "aria-hidden": "true" }),
-          /* @__PURE__ */ (0, import_jsx_runtime74.jsx)("span", { id: `${panelId}-value`, className: "ow-select__value ow-color-field__value", children: color.toUpperCase() }),
-          /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(ChevronDownIcon, { size: size2 === "sm" ? 14 : 16, className: "ow-select__chevron" })
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { className: "ow-color-field__swatch", style: { "--ow-color-picker-value": color }, "aria-hidden": "true" }),
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)("span", { id: `${panelId}-value`, className: "ow-select__value ow-color-field__value", children: color.toUpperCase() }),
+          /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ChevronDownIcon, { size: size2 === "sm" ? 14 : 16, className: "ow-select__chevron" })
         ]
       }
     ),
-    mounted ? /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(
+    mounted ? /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(
       "div",
       {
         ref: panelRef,
@@ -8140,17 +8710,17 @@ var ColorField = /* @__PURE__ */ (0, import_react65.forwardRef)(function ColorFi
         onKeyDown: (event) => {
           if (event.key === "Enter" && event.target.closest(".react-colorful")) close();
         },
-        children: /* @__PURE__ */ (0, import_jsx_runtime74.jsx)(ColorPicker, { ...pickerProps, value: color, onChange: setColor })
+        children: /* @__PURE__ */ (0, import_jsx_runtime81.jsx)(ColorPicker, { ...pickerProps, value: color, onChange: setColor })
       }
     ) : null
   ] });
 });
 
 // src/components/ColorPicker/ColorArea.tsx
-var import_react67 = require("react");
+var import_react72 = require("react");
 
 // src/components/ColorPicker/color.ts
-var import_react66 = require("react");
+var import_react71 = require("react");
 var clamp2 = (n, min, max) => Math.min(max, Math.max(min, n));
 function parseHex(color) {
   let hex = color.trim().replace(/^#/, "");
@@ -8225,10 +8795,10 @@ var hslModel = {
   write: (model) => hsvToRgb(hslToHsv(model))
 };
 var fallback = { r: 0, g: 0, b: 0, a: 1 };
-function useColorModel(value, defaultValue, onChange, model, { hue, alpha = false } = {}) {
-  const [color, setColor] = useControllableState(value, defaultValue, onChange);
-  const memory = (0, import_react66.useRef)(null);
-  const [, rerender] = (0, import_react66.useReducer)((n) => n + 1, 0);
+function useColorModel(value, defaultValue2, onChange, model, { hue, alpha = false } = {}) {
+  const [color, setColor] = useControllableState(value, defaultValue2, onChange);
+  const memory = (0, import_react71.useRef)(null);
+  const [, rerender] = (0, import_react71.useReducer)((n) => n + 1, 0);
   const incoming = normalizeHex(color);
   if (!memory.current || memory.current.hex !== incoming || memory.current.model !== model) {
     const rgba2 = parseHex(incoming);
@@ -8239,7 +8809,7 @@ function useColorModel(value, defaultValue, onChange, model, { hue, alpha = fals
   const isGrey = rgba.r === rgba.g && rgba.g === rgba.b;
   const current = isGrey && hue !== void 0 ? { ...memory.current.value, h: hue } : memory.current.value;
   const withAlpha = alpha || hasAlpha(color);
-  const set = (0, import_react66.useCallback)(
+  const set = (0, import_react71.useCallback)(
     (next) => {
       const hex = toHex(model.write(next), withAlpha);
       memory.current = { hex, model, value: next };
@@ -8249,7 +8819,7 @@ function useColorModel(value, defaultValue, onChange, model, { hue, alpha = fals
     },
     [model, withAlpha, setColor]
   );
-  const latest = (0, import_react66.useCallback)(() => memory.current?.hex ?? incoming, [incoming]);
+  const latest = (0, import_react71.useCallback)(() => memory.current?.hex ?? incoming, [incoming]);
   return { value: current, rgba: model.write(current), hex: memory.current.hex, set, latest };
 }
 function useDrag({
@@ -8258,8 +8828,8 @@ function useDrag({
   onStart,
   disabled = false
 }) {
-  const [dragging, setDragging] = (0, import_react66.useState)(false);
-  const [pointerFocus, setPointerFocus] = (0, import_react66.useState)(false);
+  const [dragging, setDragging] = (0, import_react71.useState)(false);
+  const [pointerFocus, setPointerFocus] = (0, import_react71.useState)(false);
   const move = (event) => {
     const rect = event.currentTarget.getBoundingClientRect();
     onMove(clamp2((event.clientX - rect.left) / (rect.width || 1), 0, 1), clamp2((event.clientY - rect.top) / (rect.height || 1), 0, 1));
@@ -8331,15 +8901,15 @@ var hueHex = (h) => toHex(hsvToRgb({ h, s: 100, v: 100, a: 1 }));
 var hueStops = "#ff0000 0%, #ffff00 16.67%, #00ff00 33.33%, #00ffff 50%, #0000ff 66.67%, #ff00ff 83.33%, #ff0000 100%";
 
 // src/components/ColorPicker/ColorArea.tsx
-var import_jsx_runtime75 = require("react/jsx-runtime");
+var import_jsx_runtime82 = require("react/jsx-runtime");
 var size = (length) => typeof length === "number" ? `${length}px` : length;
 function assignRef8(ref, value) {
   if (typeof ref === "function") ref(value);
   else if (ref) ref.current = value;
 }
-var ColorArea = /* @__PURE__ */ (0, import_react67.forwardRef)(function ColorArea2({
+var ColorArea = /* @__PURE__ */ (0, import_react72.forwardRef)(function ColorArea2({
   value,
-  defaultValue = "#312c7e",
+  defaultValue: defaultValue2 = "#312c7e",
   onChange,
   onChangeEnd,
   hue,
@@ -8354,10 +8924,10 @@ var ColorArea = /* @__PURE__ */ (0, import_react67.forwardRef)(function ColorAre
   id,
   className
 }, ref) {
-  const { value: hsv, rgba, hex, set, latest } = useColorModel(value, defaultValue, onChange, hsvModel, { hue });
-  const rootRef = (0, import_react67.useRef)(null);
-  const inputs = (0, import_react67.useRef)({ x: null, y: null });
-  const [axis, setAxis] = (0, import_react67.useState)("x");
+  const { value: hsv, rgba, hex, set, latest } = useColorModel(value, defaultValue2, onChange, hsvModel, { hue });
+  const rootRef = (0, import_react72.useRef)(null);
+  const inputs = (0, import_react72.useRef)({ x: null, y: null });
+  const [axis, setAxis] = (0, import_react72.useState)("x");
   const isRtl = () => rootRef.current ? getComputedStyle(rootRef.current).direction === "rtl" : false;
   const end = () => onChangeEnd?.(latest());
   const drag = useDrag({
@@ -8408,11 +8978,11 @@ var ColorArea = /* @__PURE__ */ (0, import_react67.forwardRef)(function ColorAre
   function onKeyUp(event) {
     if (/^(Arrow|Page|Home|End)/.test(event.key)) end();
   }
-  const percent = new Intl.NumberFormat(locale, { style: "percent", maximumFractionDigits: 0 });
-  const saturation = `Saturation ${percent.format(hsv.s / 100)}`;
-  const brightness = `brightness ${percent.format(hsv.v / 100)}`;
+  const percent2 = new Intl.NumberFormat(locale, { style: "percent", maximumFractionDigits: 0 });
+  const saturation = `Saturation ${percent2.format(hsv.s / 100)}`;
+  const brightness = `brightness ${percent2.format(hsv.v / 100)}`;
   const colorName = describeColor(rgba);
-  const input = (which) => /* @__PURE__ */ (0, import_jsx_runtime75.jsx)(
+  const input = (which) => /* @__PURE__ */ (0, import_jsx_runtime82.jsx)(
     "input",
     {
       ref: (element) => {
@@ -8439,7 +9009,7 @@ var ColorArea = /* @__PURE__ */ (0, import_react67.forwardRef)(function ColorAre
       onKeyUp
     }
   );
-  return /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(
     "div",
     {
       ref: rootRef,
@@ -8460,7 +9030,7 @@ var ColorArea = /* @__PURE__ */ (0, import_react67.forwardRef)(function ColorAre
       },
       ...drag.handlers,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime75.jsxs)(
+        /* @__PURE__ */ (0, import_jsx_runtime82.jsxs)(
           "div",
           {
             className: "ow-color-area__thumb",
@@ -8471,15 +9041,15 @@ var ColorArea = /* @__PURE__ */ (0, import_react67.forwardRef)(function ColorAre
             ]
           }
         ),
-        name ? /* @__PURE__ */ (0, import_jsx_runtime75.jsx)("input", { type: "hidden", name, value: hex }) : null
+        name ? /* @__PURE__ */ (0, import_jsx_runtime82.jsx)("input", { type: "hidden", name, value: hex }) : null
       ]
     }
   );
 });
 
 // src/components/ColorPicker/ColorSlider.tsx
-var import_react68 = require("react");
-var import_jsx_runtime76 = require("react/jsx-runtime");
+var import_react73 = require("react");
+var import_jsx_runtime83 = require("react/jsx-runtime");
 var channels = {
   hue: { name: "Hue", max: 360, unit: "degree" },
   saturation: { name: "Saturation", max: 100, unit: "percent" },
@@ -8526,10 +9096,10 @@ function assignRef9(ref, value) {
   if (typeof ref === "function") ref(value);
   else if (ref) ref.current = value;
 }
-var ColorSlider = /* @__PURE__ */ (0, import_react68.forwardRef)(function ColorSlider2({
+var ColorSlider = /* @__PURE__ */ (0, import_react73.forwardRef)(function ColorSlider2({
   channel,
   value,
-  defaultValue = "#312c7e",
+  defaultValue: defaultValue2 = "#312c7e",
   onChange,
   onChangeEnd,
   hue,
@@ -8548,15 +9118,15 @@ var ColorSlider = /* @__PURE__ */ (0, import_react68.forwardRef)(function ColorS
 }, ref) {
   const spec = channels[channel];
   const isHsl = channel === "saturation" || channel === "lightness";
-  const color = useColorModel(value, defaultValue, onChange, isHsl ? hslModel : hsvModel, {
+  const color = useColorModel(value, defaultValue2, onChange, isHsl ? hslModel : hsvModel, {
     hue,
     alpha: channel === "alpha"
   });
   const { rgba, latest } = color;
   const current = read(channel, color.value, rgba);
-  const labelId = (0, import_react68.useId)();
-  const trackRef = (0, import_react68.useRef)(null);
-  const inputRef = (0, import_react68.useRef)(null);
+  const labelId = (0, import_react73.useId)();
+  const trackRef = (0, import_react73.useRef)(null);
+  const inputRef = (0, import_react73.useRef)(null);
   const vertical = orientation === "vertical";
   const isRtl = () => !vertical && trackRef.current !== null && getComputedStyle(trackRef.current).direction === "rtl";
   const end = () => onChangeEnd?.(latest());
@@ -8594,7 +9164,7 @@ var ColorSlider = /* @__PURE__ */ (0, import_react68.forwardRef)(function ColorS
   const shown = format.format(spec.unit === "percent" ? current / 100 : current);
   const named = channel === "hue" ? describeColor(parseHex(hueHex(color.value.h))) : describeColor({ ...rgba, a: 1 });
   const fill = channel === "hue" ? hueHex(color.value.h) : toHex(rgba, channel === "alpha");
-  return /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)(
     "div",
     {
       className: cx(
@@ -8609,11 +9179,11 @@ var ColorSlider = /* @__PURE__ */ (0, import_react68.forwardRef)(function ColorS
         className
       ),
       children: [
-        label || showValue ? /* @__PURE__ */ (0, import_jsx_runtime76.jsxs)("div", { className: "ow-color-slider__header", children: [
-          label ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", { id: labelId, className: "ow-color-slider__label", children: label }) : /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("span", {}),
-          showValue ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("output", { className: "ow-color-slider__value", "aria-hidden": "true", children: shown }) : null
+        label || showValue ? /* @__PURE__ */ (0, import_jsx_runtime83.jsxs)("div", { className: "ow-color-slider__header", children: [
+          label ? /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("span", { id: labelId, className: "ow-color-slider__label", children: label }) : /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("span", {}),
+          showValue ? /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("output", { className: "ow-color-slider__value", "aria-hidden": "true", children: shown }) : null
         ] }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
           "div",
           {
             ref: trackRef,
@@ -8622,12 +9192,12 @@ var ColorSlider = /* @__PURE__ */ (0, import_react68.forwardRef)(function ColorS
               "--ow-color-slider-gradient": `linear-gradient(var(--ow-color-slider-direction), ${gradient(channel, color.value, rgba)})`
             },
             ...drag.handlers,
-            children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+            children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
               "div",
               {
                 className: "ow-color-slider__thumb",
                 style: { "--ow-color-slider-position": `${current / spec.max * 100}%`, "--ow-color-slider-thumb": fill },
-                children: /* @__PURE__ */ (0, import_jsx_runtime76.jsx)(
+                children: /* @__PURE__ */ (0, import_jsx_runtime83.jsx)(
                   "input",
                   {
                     ref: (element) => {
@@ -8659,18 +9229,18 @@ var ColorSlider = /* @__PURE__ */ (0, import_react68.forwardRef)(function ColorS
             )
           }
         ),
-        name ? /* @__PURE__ */ (0, import_jsx_runtime76.jsx)("input", { type: "hidden", name, value: color.hex }) : null
+        name ? /* @__PURE__ */ (0, import_jsx_runtime83.jsx)("input", { type: "hidden", name, value: color.hex }) : null
       ]
     }
   );
 });
 
 // src/components/ColorPicker/ColorSwatchPicker.tsx
-var import_react69 = require("react");
-var import_jsx_runtime77 = require("react/jsx-runtime");
-var ColorSwatchPicker = /* @__PURE__ */ (0, import_react69.forwardRef)(function ColorSwatchPicker2({ options, value, defaultValue, onChange, size: size2 = "md", shape = "square", disabled = false, name, className, ...aria }, ref) {
-  const [current, setCurrent] = useControllableState(value, defaultValue ?? "", onChange);
-  const refs = (0, import_react69.useRef)([]);
+var import_react74 = require("react");
+var import_jsx_runtime84 = require("react/jsx-runtime");
+var ColorSwatchPicker = /* @__PURE__ */ (0, import_react74.forwardRef)(function ColorSwatchPicker2({ options, value, defaultValue: defaultValue2, onChange, size: size2 = "md", shape = "square", disabled = false, name, className, ...aria }, ref) {
+  const [current, setCurrent] = useControllableState(value, defaultValue2 ?? "", onChange);
+  const refs = (0, import_react74.useRef)([]);
   const items2 = options.map((option) => {
     const item = typeof option === "string" ? { value: option } : option;
     const rgba = parseHex(item.value);
@@ -8704,7 +9274,7 @@ var ColorSwatchPicker = /* @__PURE__ */ (0, import_react69.forwardRef)(function
     refs.current[target]?.focus();
     choose(target);
   }
-  return /* @__PURE__ */ (0, import_jsx_runtime77.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime84.jsxs)(
     "div",
     {
       ref,
@@ -8721,7 +9291,7 @@ var ColorSwatchPicker = /* @__PURE__ */ (0, import_react69.forwardRef)(function
         items2.map((item, index) => {
           const isSelected = index === selectedIndex;
           const isDisabled = disabled || Boolean(item.disabled);
-          return /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(
+          return /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(
             "div",
             {
               ref: (element) => {
@@ -8738,12 +9308,12 @@ var ColorSwatchPicker = /* @__PURE__ */ (0, import_react69.forwardRef)(function
               style: { "--ow-color-swatch-picker-value": item.value },
               onClick: () => choose(index),
               onKeyDown: (event) => onKeyDown(event, index),
-              children: /* @__PURE__ */ (0, import_jsx_runtime77.jsx)(CheckIcon, { size: size2 === "sm" ? 14 : 16, strokeWidth: 2.5, className: "ow-color-swatch-picker__check", "aria-hidden": "true" })
+              children: /* @__PURE__ */ (0, import_jsx_runtime84.jsx)(CheckIcon, { size: size2 === "sm" ? 14 : 16, strokeWidth: 2.5, className: "ow-color-swatch-picker__check", "aria-hidden": "true" })
             },
             `${item.value}-${index}`
           );
         }),
-        name ? /* @__PURE__ */ (0, import_jsx_runtime77.jsx)("input", { type: "hidden", name, value: selectedIndex >= 0 ? items2[selectedIndex].value : "" }) : null
+        name ? /* @__PURE__ */ (0, import_jsx_runtime84.jsx)("input", { type: "hidden", name, value: selectedIndex >= 0 ? items2[selectedIndex].value : "" }) : null
       ]
     }
   );