@openwarelabs/ui 0.11.1 → 0.12.0

package/dist/index.js

@@ -145,8 +145,8 @@ import { forwardRef as forwardRef2 } from "react";
 
 // src/hooks/useControllableState.ts
 import { useCallback, useRef, useState } from "react";
-function useControllableState(value, defaultValue, onChange) {
-  const [internal, setInternal] = useState(defaultValue);
+function useControllableState(value, defaultValue2, onChange) {
+  const [internal, setInternal] = useState(defaultValue2);
   const isControlled = value !== void 0;
   const current = isControlled ? value : internal;
   const currentRef = useRef(current);
@@ -330,6 +330,27 @@ var InboxIcon = /* @__PURE__ */ icon(
     /* @__PURE__ */ jsx4("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__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx4("path", { d: "M4 5h16" }),
+    /* @__PURE__ */ jsx4("path", { d: "M4 12h16" }),
+    /* @__PURE__ */ jsx4("path", { d: "M4 19h16" })
+  ] })
+);
+var PanelLeftOpenIcon = /* @__PURE__ */ icon(
+  /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx4("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
+    /* @__PURE__ */ jsx4("path", { d: "M9 3v18" }),
+    /* @__PURE__ */ jsx4("path", { d: "m14 9 3 3-3 3" })
+  ] })
+);
+var PanelLeftCloseIcon = /* @__PURE__ */ icon(
+  /* @__PURE__ */ jsxs2(Fragment, { children: [
+    /* @__PURE__ */ jsx4("rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }),
+    /* @__PURE__ */ jsx4("path", { d: "M9 3v18" }),
+    /* @__PURE__ */ jsx4("path", { d: "m16 15-3-3 3-3" })
+  ] })
+);
 
 // src/components/Button/ButtonGroup.tsx
 import { jsx as jsx5 } from "react/jsx-runtime";
@@ -425,7 +446,7 @@ import { jsx as jsx6, jsxs as jsxs3 } from "react/jsx-runtime";
 function SegmentedControl({
   options,
   value,
-  defaultValue,
+  defaultValue: defaultValue2,
   onChange,
   size: size2 = "md",
   fullWidth = false,
@@ -433,7 +454,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 = useRef2([]);
   const groupRef = useRef2(null);
   useIndicator(groupRef, '[aria-checked="true"]', current);
@@ -957,7 +978,7 @@ function ToggleButtonGroup(props) {
     options,
     selectionMode = "single",
     value,
-    defaultValue,
+    defaultValue: defaultValue2,
     onChange,
     disallowEmptySelection = false,
     size: sizeProp,
@@ -975,7 +996,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] = useState6(null);
@@ -1138,7 +1159,7 @@ function CheckboxGroup({
   label,
   description,
   value,
-  defaultValue = [],
+  defaultValue: defaultValue2 = [],
   onChange,
   orientation = "vertical",
   error,
@@ -1147,7 +1168,7 @@ function CheckboxGroup({
   children,
   className
 }) {
-  const [current, setCurrent] = useControllableState(value, defaultValue, onChange);
+  const [current, setCurrent] = useControllableState(value, defaultValue2, onChange);
   const generatedName = useId();
   const errorId = useId();
   return /* @__PURE__ */ jsx12(
@@ -1615,7 +1636,7 @@ function assignRef2(ref, value) {
 }
 var SearchField = /* @__PURE__ */ forwardRef8(function SearchField2({
   value,
-  defaultValue = "",
+  defaultValue: defaultValue2 = "",
   onChange,
   onSubmit,
   loading = false,
@@ -1625,7 +1646,7 @@ var SearchField = /* @__PURE__ */ forwardRef8(function SearchField2({
   onKeyDown,
   ...inputProps
 }, ref) {
-  const [text, setText] = useControllableState(value, defaultValue, onChange);
+  const [text, setText] = useControllableState(value, defaultValue2, onChange);
   const inputRef = useRef10(null);
   function handleKeyDown(event) {
     onKeyDown?.(event);
@@ -1675,7 +1696,7 @@ import { jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
 var decimals = (step) => (String(step).split(".")[1] ?? "").length;
 var NumberField = /* @__PURE__ */ forwardRef9(function NumberField2({
   value,
-  defaultValue = null,
+  defaultValue: defaultValue2 = null,
   onChange,
   min,
   max,
@@ -1692,7 +1713,7 @@ var NumberField = /* @__PURE__ */ forwardRef9(function NumberField2({
   form,
   ...inputProps
 }, ref) {
-  const [number, setNumber] = useControllableState(value, defaultValue, onChange);
+  const [number2, setNumber] = useControllableState(value, defaultValue2, onChange);
   const [draft, setDraft] = useState9(null);
   const format = (n) => n === null ? "" : formatOptions ? new Intl.NumberFormat(void 0, formatOptions).format(n) : String(n);
   const clamp3 = (n) => {
@@ -1713,7 +1734,7 @@ var NumberField = /* @__PURE__ */ forwardRef9(function NumberField2({
     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));
@@ -1735,8 +1756,8 @@ var NumberField = /* @__PURE__ */ forwardRef9(function NumberField2({
     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__ */ jsxs12(
     "div",
     {
@@ -1769,16 +1790,16 @@ var NumberField = /* @__PURE__ */ forwardRef9(function NumberField2({
             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) => {
@@ -1789,7 +1810,7 @@ var NumberField = /* @__PURE__ */ forwardRef9(function NumberField2({
             ...inputProps
           }
         ),
-        name ? /* @__PURE__ */ jsx18("input", { type: "hidden", name, form, value: number ?? "", disabled }) : null,
+        name ? /* @__PURE__ */ jsx18("input", { type: "hidden", name, form, value: number2 ?? "", disabled }) : null,
         /* @__PURE__ */ jsx18(
           "button",
           {
@@ -1813,7 +1834,7 @@ import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
 function InputOTP({
   length = 6,
   value,
-  defaultValue = "",
+  defaultValue: defaultValue2 = "",
   onChange,
   onComplete,
   type = "numeric",
@@ -1828,7 +1849,7 @@ function InputOTP({
   name,
   className
 }) {
-  const [code, setCode] = useControllableState(value, defaultValue, onChange);
+  const [code, setCode] = useControllableState(value, defaultValue2, onChange);
   const refs = useRef11([]);
   const latest = useRef11(code);
   latest.current = code;
@@ -1925,35 +1946,35 @@ import { forwardRef as forwardRef10, useMemo as useMemo3, useRef as useRef13, us
 
 // 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));
@@ -2194,9 +2215,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;
       }
     });
@@ -2364,12 +2385,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);
@@ -2386,7 +2407,7 @@ function dateLayout(locale) {
 }
 var DateField = /* @__PURE__ */ forwardRef10(function DateField2({
   value,
-  defaultValue = "",
+  defaultValue: defaultValue2 = "",
   onChange,
   min,
   max,
@@ -2403,7 +2424,7 @@ var DateField = /* @__PURE__ */ forwardRef10(function DateField2({
   "aria-describedby": ariaDescribedBy,
   className
 }, ref) {
-  const [current, setCurrent] = useControllableState(value, defaultValue, onChange);
+  const [current, setCurrent] = useControllableState(value, defaultValue2, onChange);
   const [parts, setParts] = useState11(() => fromISO(current));
   const partsRef = useRef13(parts);
   partsRef.current = parts;
@@ -2549,7 +2570,7 @@ function timeLayout(locale, twelve, seconds) {
 }
 var TimeField = /* @__PURE__ */ forwardRef11(function TimeField2({
   value,
-  defaultValue = "",
+  defaultValue: defaultValue2 = "",
   onChange,
   hourCycle,
   granularity = "minute",
@@ -2569,7 +2590,7 @@ var TimeField = /* @__PURE__ */ forwardRef11(function TimeField2({
   "aria-describedby": ariaDescribedBy,
   className
 }, ref) {
-  const [current, setCurrent] = useControllableState(value, defaultValue, onChange);
+  const [current, setCurrent] = useControllableState(value, defaultValue2, onChange);
   const localeCycle = useMemo4(() => localeHourCycle(locale), [locale]);
   const twelve = (hourCycle ?? localeCycle) === 12;
   const seconds = granularity === "second";
@@ -3065,7 +3086,7 @@ function ListBoxWithRef({
   options,
   selectionMode,
   value,
-  defaultValue,
+  defaultValue: defaultValue2,
   onChange,
   disallowEmptySelection = false,
   emptyMessage = "No options",
@@ -3083,7 +3104,7 @@ function ListBoxWithRef({
   const multiple = selectionMode === "multiple";
   const [current, setCurrent] = useControllableState(
     value,
-    defaultValue ?? (multiple ? [] : ""),
+    defaultValue2 ?? (multiple ? [] : ""),
     onChange
   );
   const listRef = useRef17(null);
@@ -3374,7 +3395,7 @@ function assignRef4(ref, value) {
 var Combobox = /* @__PURE__ */ forwardRef14(function Combobox2({
   options,
   value,
-  defaultValue = "",
+  defaultValue: defaultValue2 = "",
   onChange,
   onInputChange,
   placeholder = "Search\u2026",
@@ -3387,7 +3408,7 @@ var Combobox = /* @__PURE__ */ forwardRef14(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] = useState15(() => labelOf(selected));
   const [isOpen, setOpen] = useState15(false);
@@ -3602,7 +3623,7 @@ function RadioGroup({
   label,
   description,
   value,
-  defaultValue = "",
+  defaultValue: defaultValue2 = "",
   onChange,
   orientation = "vertical",
   variant = "default",
@@ -3612,7 +3633,7 @@ function RadioGroup({
   children,
   className
 }) {
-  const [current, select] = useControllableState(value, defaultValue, onChange);
+  const [current, select] = useControllableState(value, defaultValue2, onChange);
   const generatedName = useId6();
   return /* @__PURE__ */ jsx27(RadioGroupContext.Provider, { value: { name: name ?? generatedName, value: current, select, disabled }, children: /* @__PURE__ */ jsx27(
     Fieldset,
@@ -3683,7 +3704,7 @@ import { useId as useId7 } from "react";
 import { jsx as jsx29, jsxs as jsxs19 } from "react/jsx-runtime";
 function Slider({
   value,
-  defaultValue,
+  defaultValue: defaultValue2,
   onChange,
   onChangeEnd,
   min = 0,
@@ -3699,7 +3720,7 @@ function Slider({
   disabled,
   className
 }) {
-  const [current, setCurrent] = useControllableState(value, defaultValue ?? min, onChange);
+  const [current, setCurrent] = useControllableState(value, defaultValue2 ?? min, onChange);
   const labelId = useId7();
   const isRange = Array.isArray(current);
   const [low, high] = isRange ? current : [min, current];
@@ -3880,8 +3901,8 @@ function FileDropZone({
 // src/components/Calendar/Calendar.tsx
 import { forwardRef as forwardRef16, useEffect as useEffect14, useImperativeHandle, useMemo as useMemo8, useRef as useRef20, useState as useState17 } from "react";
 import { jsx as jsx31, jsxs as jsxs21 } from "react/jsx-runtime";
-var Calendar = /* @__PURE__ */ forwardRef16(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__ */ forwardRef16(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] = useState17(() => selected || clampDate(today, min, max));
   const [shouldFocus, setShouldFocus] = useState17(autoFocus);
@@ -3955,14 +3976,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)
   };
@@ -4076,7 +4097,7 @@ function assignRef5(ref, value) {
 }
 var DatePicker = /* @__PURE__ */ forwardRef17(function DatePicker2({
   value,
-  defaultValue = "",
+  defaultValue: defaultValue2 = "",
   onChange,
   placeholder = "Pick a date",
   formatOptions = { dateStyle: "medium" },
@@ -4091,7 +4112,7 @@ var DatePicker = /* @__PURE__ */ forwardRef17(function DatePicker2({
   "aria-describedby": ariaDescribedBy,
   ...calendarProps
 }, ref) {
-  const [date, setDate] = useControllableState(value, defaultValue, onChange);
+  const [date, setDate] = useControllableState(value, defaultValue2, onChange);
   const [isOpen, setOpen] = useState18(false);
   const triggerRef = useRef21(null);
   const panelRef = useRef21(null);
@@ -4174,9 +4195,9 @@ var DatePicker = /* @__PURE__ */ forwardRef17(function DatePicker2({
 // src/components/Calendar/RangeCalendar.tsx
 import { forwardRef as forwardRef18, useEffect as useEffect15, useId as useId10, useImperativeHandle as useImperativeHandle2, useRef as useRef22, useState as useState19 } from "react";
 import { jsx as jsx33, jsxs as jsxs23 } from "react/jsx-runtime";
-var RangeCalendar = /* @__PURE__ */ forwardRef18(function RangeCalendar2({ value, defaultValue = null, onChange, min, max, isDateDisabled, locale, weekStartsOn = 1, visibleMonths = 1, autoFocus = false, className }, ref) {
+var RangeCalendar = /* @__PURE__ */ forwardRef18(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] = useState19(() => range ? ordered(range.start, range.end).start : clampDate(today, min, max));
   const [firstMonth, setFirstMonth] = useState19(() => fitMonths(startOfMonth(focused), months, min, max));
@@ -4248,8 +4269,8 @@ var RangeCalendar = /* @__PURE__ */ forwardRef18(function RangeCalendar2({ value
   }
   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,
@@ -4359,7 +4380,7 @@ function useMediaQuery(query) {
 }
 var DateRangePicker = /* @__PURE__ */ forwardRef19(function DateRangePicker2({
   value,
-  defaultValue = null,
+  defaultValue: defaultValue2 = null,
   onChange,
   presets,
   visibleMonths = 2,
@@ -4376,7 +4397,7 @@ var DateRangePicker = /* @__PURE__ */ forwardRef19(function DateRangePicker2({
   "aria-describedby": ariaDescribedBy,
   ...calendarProps
 }, ref) {
-  const [range, setRange] = useControllableState(value, defaultValue, onChange);
+  const [range, setRange] = useControllableState(value, defaultValue2, onChange);
   const [isOpen, setOpen] = useState20(false);
   const fieldRef = useRef23(null);
   const triggerRef = useRef23(null);
@@ -4575,8 +4596,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__ */ jsxs26(
@@ -4596,14 +4617,14 @@ function ProgressCircle({
       style: { width: box, height: box },
       children: [
         /* @__PURE__ */ jsxs26("svg", { width: box, height: box, viewBox: `0 0 ${box} ${box}`, "aria-hidden": "true", children: [
-          /* @__PURE__ */ jsx36("circle", { className: "ow-progress-circle__track", cx: box / 2, cy: box / 2, r: radius, strokeWidth: stroke, fill: "none" }),
+          /* @__PURE__ */ jsx36("circle", { className: "ow-progress-circle__track", cx: box / 2, cy: box / 2, r: radius2, strokeWidth: stroke, fill: "none" }),
           /* @__PURE__ */ jsx36(
             "circle",
             {
               className: "ow-progress-circle__fill",
               cx: box / 2,
               cy: box / 2,
-              r: radius,
+              r: radius2,
               strokeWidth: stroke,
               fill: "none",
               strokeLinecap: "round",
@@ -4742,7 +4763,7 @@ function Toaster({
   duration = 6e3,
   closeButton = true,
   offset = 16,
-  gap = 10,
+  gap: gap2 = 10,
   id,
   className
 }) {
@@ -4775,7 +4796,7 @@ function Toaster({
       closeButton,
       offset,
       mobileOffset: offset,
-      gap,
+      gap: gap2,
       icons: icons2,
       className: cx("ow-toaster", className),
       containerAriaLabel: "Notifications",
@@ -5414,8 +5435,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 = useId19();
   return /* @__PURE__ */ jsx45(TabsContext.Provider, { value: { value: current, select, baseId, variant }, children: /* @__PURE__ */ jsx45("div", { className: cx("ow-tabs", `ow-tabs--${variant}`, className), ...props, children }) });
 }
@@ -5582,7 +5603,7 @@ var AccordionContext = /* @__PURE__ */ createContext7(null);
 function Accordion({
   type = "single",
   value,
-  defaultValue = [],
+  defaultValue: defaultValue2 = [],
   onValueChange,
   variant = "bordered",
   headingLevel = 3,
@@ -5591,7 +5612,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]);
@@ -5786,7 +5807,16 @@ function Steps({ items: items2, current = 0, orientation = "vertical", title, la
 }
 
 // src/components/NavList/NavList.tsx
-import { forwardRef as forwardRef22 } from "react";
+import { forwardRef as forwardRef22, useContext as useContext11 } from "react";
+
+// src/components/AppShell/AppShell.context.ts
+import { createContext as createContext8, useContext as useContext10 } from "react";
+var AppShellContext = /* @__PURE__ */ createContext8(null);
+function useAppShell() {
+  return useContext10(AppShellContext);
+}
+
+// src/components/NavList/NavList.tsx
 import { Fragment as Fragment9, jsx as jsx50, jsxs as jsxs39 } from "react/jsx-runtime";
 function NavList({ label, heading, orientation = "vertical", children, className }) {
   return /* @__PURE__ */ jsxs39("nav", { "aria-label": label, className: cx("ow-nav", `ow-nav--${orientation}`, className), children: [
@@ -5795,6 +5825,7 @@ function NavList({ label, heading, orientation = "vertical", children, className
   ] });
 }
 var NavItem = /* @__PURE__ */ forwardRef22(function NavItem2({ icon: icon2, active = false, className, children, type = "button", href, end, ...buttonProps }, ref) {
+  const collapsed = useContext11(AppShellContext)?.collapsed ?? false;
   const content = /* @__PURE__ */ jsxs39(Fragment9, { children: [
     icon2 ? /* @__PURE__ */ jsx50("span", { className: "ow-nav__icon", children: icon2 }) : null,
     /* @__PURE__ */ jsx50("span", { className: "ow-nav__label", children }),
@@ -5804,24 +5835,215 @@ var NavItem = /* @__PURE__ */ forwardRef22(function NavItem2({ icon: icon2, acti
     "aria-current": active ? "page" : void 0,
     className: cx("ow-nav__item", active && "ow-nav__item--active", className)
   };
-  if (href !== void 0) {
-    return /* @__PURE__ */ jsx50(
-      "a",
-      {
-        ref,
-        href,
-        ...shared,
-        ...buttonProps,
-        children: content
-      }
-    );
-  }
-  return /* @__PURE__ */ jsx50("button", { ref, type, ...shared, ...buttonProps, children: content });
+  const item = href !== void 0 ? /* @__PURE__ */ jsx50("a", { ref, href, ...shared, ...buttonProps, children: content }) : /* @__PURE__ */ jsx50("button", { ref, type, ...shared, ...buttonProps, children: content });
+  return collapsed ? /* @__PURE__ */ jsx50(Tooltip, { label: children, placement: "right", children: item }) : item;
 });
 
+// src/components/AppShell/AppShell.tsx
+import { useCallback as useCallback10, useId as useId22, useMemo as useMemo10, useState as useState27 } from "react";
+
+// src/components/Layout/Layout.tsx
+import {
+  useEffect as useEffect25,
+  useRef as useRef31,
+  useState as useState26
+} from "react";
+import { jsx as jsx51 } from "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__ */ jsx51(
+    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__ */ jsx51("div", { role: "separator", className: cx("ow-separator-label", className), style: { margin: margin2 }, children: /* @__PURE__ */ jsx51("span", { className: "ow-separator-label__text", children: label }) });
+  }
+  return /* @__PURE__ */ jsx51(
+    "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 = useRef31(null);
+  const [edges, setEdges] = useState26({ start: false, end: false });
+  useEffect25(() => {
+    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__ */ jsx51(
+    "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__ */ jsx51("span", { className: cx("ow-visually-hidden", className), ...props });
+}
+
+// src/components/AppShell/AppShell.tsx
+import { jsx as jsx52, jsxs as jsxs40 } from "react/jsx-runtime";
+function AppShell({
+  sidebar,
+  children,
+  variant = "inset",
+  collapsible = false,
+  collapsed,
+  defaultCollapsed = false,
+  onCollapsedChange,
+  breakpoint = "md",
+  topbar,
+  topbarActions,
+  labels = {},
+  className,
+  ...props
+}) {
+  const sidebarId = useId22();
+  const [ownCollapsed, setOwnCollapsed] = useControllableState(collapsed, defaultCollapsed, onCollapsedChange);
+  const [drawerOpen, setDrawerOpen] = useState27(false);
+  const folded = collapsible && ownCollapsed;
+  const openNavigation = useCallback10(() => setDrawerOpen(true), []);
+  const closeNavigation = useCallback10(() => setDrawerOpen(false), []);
+  const shared = useMemo10(
+    () => ({
+      collapsible,
+      setCollapsed: setOwnCollapsed,
+      toggleCollapsed: () => setOwnCollapsed((previous) => !previous),
+      openNavigation,
+      closeNavigation,
+      sidebarId
+    }),
+    [collapsible, setOwnCollapsed, openNavigation, closeNavigation, sidebarId]
+  );
+  const beside = useMemo10(() => ({ ...shared, collapsed: folded, inDrawer: false }), [shared, folded]);
+  const inDrawer = useMemo10(() => ({ ...shared, collapsed: false, inDrawer: true }), [shared]);
+  const closeOnChoice = (event) => {
+    if (event.target.closest(".ow-nav__item, [data-closes-navigation]")) setDrawerOpen(false);
+  };
+  return /* @__PURE__ */ jsxs40(
+    "div",
+    {
+      className: cx("ow-app-shell", `ow-app-shell--${variant}`, `ow-app-shell--${breakpoint}`, folded && "ow-app-shell--collapsed", className),
+      ...props,
+      children: [
+        /* @__PURE__ */ jsxs40("div", { className: "ow-app-shell__frame", children: [
+          /* @__PURE__ */ jsx52(AppShellContext.Provider, { value: beside, children: /* @__PURE__ */ jsx52("aside", { id: sidebarId, className: "ow-app-shell__sidebar", "aria-label": labels.navigation ?? "Main navigation", children: /* @__PURE__ */ jsx52("div", { className: "ow-sidebar", children: sidebar }) }) }),
+          /* @__PURE__ */ jsxs40("div", { className: "ow-app-shell__body", children: [
+            /* @__PURE__ */ jsxs40("header", { className: "ow-app-shell__topbar", children: [
+              /* @__PURE__ */ jsx52(Button, { variant: "ghost", iconOnly: true, "aria-label": labels.openNavigation ?? "Open navigation", onClick: openNavigation, children: /* @__PURE__ */ jsx52(MenuIcon, { size: 18 }) }),
+              /* @__PURE__ */ jsx52("div", { className: "ow-app-shell__topbar-start", children: topbar }),
+              topbarActions ? /* @__PURE__ */ jsx52("div", { className: "ow-app-shell__topbar-end", children: topbarActions }) : null
+            ] }),
+            /* @__PURE__ */ jsx52("main", { className: "ow-app-shell__main", children })
+          ] })
+        ] }),
+        /* @__PURE__ */ jsx52(Drawer, { open: drawerOpen, onClose: closeNavigation, side: "left", size: 300, title: labels.menu ?? "Menu", className: "ow-app-shell__drawer", children: /* @__PURE__ */ jsx52(AppShellContext.Provider, { value: inDrawer, children: /* @__PURE__ */ jsx52("div", { className: "ow-sidebar ow-sidebar--drawer", onClick: closeOnChoice, children: sidebar }) }) })
+      ]
+    }
+  );
+}
+function SidebarHeader({ className, ...props }) {
+  return /* @__PURE__ */ jsx52("div", { className: cx("ow-sidebar__header", className), ...props });
+}
+function SidebarContent({ className, children, ...props }) {
+  return /* @__PURE__ */ jsx52(ScrollShadow, { className: cx("ow-sidebar__content", className), ...props, children });
+}
+function SidebarFooter({ className, ...props }) {
+  return /* @__PURE__ */ jsx52("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__ */ jsx52(Tooltip, { label, placement: "right", children: /* @__PURE__ */ jsx52(
+    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__ */ jsx52(Icon, { size: 16 })
+    }
+  ) });
+}
+
 // src/components/Table/Table.tsx
-import { useMemo as useMemo10 } from "react";
-import { jsx as jsx51, jsxs as jsxs40 } from "react/jsx-runtime";
+import { useMemo as useMemo11 } from "react";
+import { jsx as jsx53, jsxs as jsxs41 } from "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" });
@@ -5856,7 +6078,7 @@ function Table({
     return typeof first === "string" || typeof first === "number" ? String(first) : `row ${index + 1}`;
   };
   const field = (row, key) => row[key];
-  const sorted = useMemo10(() => {
+  const sorted = useMemo11(() => {
     if (!currentSort || manualSort) return rows;
     const column = columns.find((c) => c.key === currentSort.key);
     if (!column) return rows;
@@ -5872,16 +6094,16 @@ function Table({
     );
   }
   const selectable = selectionMode === "multiple";
-  return /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsx53(
     "div",
     {
       className: cx("ow-table-wrap", stickyHeader && "ow-table-wrap--sticky", className),
       style: maxHeight ? { maxHeight } : void 0,
       tabIndex: maxHeight ? 0 : void 0,
-      children: /* @__PURE__ */ jsxs40("table", { className: cx("ow-table", `ow-table--${density}`), children: [
-        caption ? /* @__PURE__ */ jsx51("caption", { className: cx("ow-table__caption", hideCaption && "ow-visually-hidden"), children: caption }) : null,
-        /* @__PURE__ */ jsx51("thead", { children: /* @__PURE__ */ jsxs40("tr", { children: [
-          selectable ? /* @__PURE__ */ jsx51("th", { className: "ow-table__select", scope: "col", children: /* @__PURE__ */ jsx51(
+      children: /* @__PURE__ */ jsxs41("table", { className: cx("ow-table", `ow-table--${density}`), children: [
+        caption ? /* @__PURE__ */ jsx53("caption", { className: cx("ow-table__caption", hideCaption && "ow-visually-hidden"), children: caption }) : null,
+        /* @__PURE__ */ jsx53("thead", { children: /* @__PURE__ */ jsxs41("tr", { children: [
+          selectable ? /* @__PURE__ */ jsx53("th", { className: "ow-table__select", scope: "col", children: /* @__PURE__ */ jsx53(
             Checkbox,
             {
               size: "sm",
@@ -5895,27 +6117,27 @@ function Table({
           ) }) : null,
           columns.map((column) => {
             const direction = currentSort?.key === column.key ? currentSort.direction : void 0;
-            return /* @__PURE__ */ jsx51(
+            return /* @__PURE__ */ jsx53(
               "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__ */ jsxs40("button", { type: "button", className: "ow-table__sort", onClick: () => toggleSort(column.key), children: [
+                children: column.sortable ? /* @__PURE__ */ jsxs41("button", { type: "button", className: "ow-table__sort", onClick: () => toggleSort(column.key), children: [
                   column.header,
-                  /* @__PURE__ */ jsx51("span", { className: cx("ow-table__sort-icon", direction && "ow-table__sort-icon--active"), children: direction === "ascending" ? /* @__PURE__ */ jsx51(ArrowUpIcon, { size: 12 }) : direction === "descending" ? /* @__PURE__ */ jsx51(ArrowDownIcon, { size: 12 }) : /* @__PURE__ */ jsx51(ChevronsUpDownIcon, { size: 12 }) })
+                  /* @__PURE__ */ jsx53("span", { className: cx("ow-table__sort-icon", direction && "ow-table__sort-icon--active"), children: direction === "ascending" ? /* @__PURE__ */ jsx53(ArrowUpIcon, { size: 12 }) : direction === "descending" ? /* @__PURE__ */ jsx53(ArrowDownIcon, { size: 12 }) : /* @__PURE__ */ jsx53(ChevronsUpDownIcon, { size: 12 }) })
                 ] }) : column.header
               },
               column.key
             );
           })
         ] }) }),
-        /* @__PURE__ */ jsx51("tbody", { children: sorted.length === 0 ? /* @__PURE__ */ jsx51("tr", { children: /* @__PURE__ */ jsx51("td", { className: "ow-table__empty", colSpan: columns.length + (selectable ? 1 : 0), children: emptyContent }) }) : sorted.map((row, index) => {
+        /* @__PURE__ */ jsx53("tbody", { children: sorted.length === 0 ? /* @__PURE__ */ jsx53("tr", { children: /* @__PURE__ */ jsx53("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__ */ jsxs40("tr", { className: cx(isSelected && "ow-table__row--selected"), children: [
-            selectable ? /* @__PURE__ */ jsx51("td", { className: "ow-table__select", children: /* @__PURE__ */ jsx51(
+          return /* @__PURE__ */ jsxs41("tr", { className: cx(isSelected && "ow-table__row--selected"), children: [
+            selectable ? /* @__PURE__ */ jsx53("td", { className: "ow-table__select", children: /* @__PURE__ */ jsx53(
               Checkbox,
               {
                 size: "sm",
@@ -5926,7 +6148,7 @@ function Table({
                 )
               }
             ) }) : null,
-            columns.map((column) => /* @__PURE__ */ jsx51("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__ */ jsx53("td", { className: cx(`ow-table__cell--${column.align ?? "start"}`), children: column.render ? column.render(row) : field(row, column.key) }, column.key))
           ] }, key);
         }) })
       ] })
@@ -5935,7 +6157,7 @@ function Table({
 }
 
 // src/components/Stat/Stat.tsx
-import { jsx as jsx52, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx54, jsxs as jsxs42 } from "react/jsx-runtime";
 function Sparkline({ values }) {
   const max = Math.max(...values);
   const min = Math.min(...values);
@@ -5947,37 +6169,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__ */ jsxs41("div", { className: "ow-stat__trend", "aria-hidden": "true", children: [
-    /* @__PURE__ */ jsxs41("svg", { viewBox: "0 0 100 40", preserveAspectRatio: "none", children: [
-      /* @__PURE__ */ jsx52("path", { d: `${line} L100 40 L0 40 Z`, className: "ow-stat__trend-area" }),
-      /* @__PURE__ */ jsx52("path", { d: line, className: "ow-stat__trend-line", vectorEffect: "non-scaling-stroke" })
+  return /* @__PURE__ */ jsxs42("div", { className: "ow-stat__trend", "aria-hidden": "true", children: [
+    /* @__PURE__ */ jsxs42("svg", { viewBox: "0 0 100 40", preserveAspectRatio: "none", children: [
+      /* @__PURE__ */ jsx54("path", { d: `${line} L100 40 L0 40 Z`, className: "ow-stat__trend-area" }),
+      /* @__PURE__ */ jsx54("path", { d: line, className: "ow-stat__trend-line", vectorEffect: "non-scaling-stroke" })
     ] }),
-    /* @__PURE__ */ jsx52("span", { className: "ow-stat__trend-end", style: { left: `${lastX}%`, top: `${lastY / 40 * 100}%` } })
+    /* @__PURE__ */ jsx54("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__ */ jsxs41("div", { className: cx("ow-stat", className), children: [
-    /* @__PURE__ */ jsxs41("div", { className: "ow-stat__label", children: [
-      icon2 ? /* @__PURE__ */ jsx52("span", { className: "ow-stat__icon", children: icon2 }) : null,
-      /* @__PURE__ */ jsx52("span", { children: label })
+  return /* @__PURE__ */ jsxs42("div", { className: cx("ow-stat", className), children: [
+    /* @__PURE__ */ jsxs42("div", { className: "ow-stat__label", children: [
+      icon2 ? /* @__PURE__ */ jsx54("span", { className: "ow-stat__icon", children: icon2 }) : null,
+      /* @__PURE__ */ jsx54("span", { children: label })
     ] }),
-    /* @__PURE__ */ jsxs41("div", { className: "ow-stat__row", children: [
-      /* @__PURE__ */ jsx52("span", { className: "ow-stat__value", children: value }),
-      change ? /* @__PURE__ */ jsxs41("span", { className: cx("ow-stat__change", `ow-stat__change--${tone}`), children: [
-        tone === "neutral" ? null : rising ? /* @__PURE__ */ jsx52(ArrowUpIcon, { size: 12 }) : /* @__PURE__ */ jsx52(ArrowDownIcon, { size: 12 }),
+    /* @__PURE__ */ jsxs42("div", { className: "ow-stat__row", children: [
+      /* @__PURE__ */ jsx54("span", { className: "ow-stat__value", children: value }),
+      change ? /* @__PURE__ */ jsxs42("span", { className: cx("ow-stat__change", `ow-stat__change--${tone}`), children: [
+        tone === "neutral" ? null : rising ? /* @__PURE__ */ jsx54(ArrowUpIcon, { size: 12 }) : /* @__PURE__ */ jsx54(ArrowDownIcon, { size: 12 }),
         change
       ] }) : null
     ] }),
-    description ? /* @__PURE__ */ jsx52("div", { className: "ow-stat__description", children: description }) : null,
-    trend && trend.length > 1 ? /* @__PURE__ */ jsx52(Sparkline, { values: trend }) : null
+    description ? /* @__PURE__ */ jsx54("div", { className: "ow-stat__description", children: description }) : null,
+    trend && trend.length > 1 ? /* @__PURE__ */ jsx54(Sparkline, { values: trend }) : null
+  ] });
+}
+
+// src/components/Chart/Cartesian.tsx
+import { useState as useState29 } from "react";
+
+// src/components/Chart/chartUtils.ts
+import { useLayoutEffect as useLayoutEffect7, useRef as useRef32, useState as useState28 } from "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 = useRef32(null);
+  const [width, setWidth] = useState28(0);
+  useLayoutEffect7(() => {
+    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
+import { jsx as jsx55, jsxs as jsxs43 } from "react/jsx-runtime";
+function ChartLegend({ items: items2, shape }) {
+  return /* @__PURE__ */ jsx55("ul", { className: "ow-chart__legend", children: items2.map((item, i) => /* @__PURE__ */ jsxs43("li", { className: "ow-chart__legend-item", children: [
+    /* @__PURE__ */ jsx55("span", { className: `ow-chart__key ow-chart__key--${shape}`, style: { background: item.color }, "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx55("span", { className: "ow-chart__legend-label", children: item.label }),
+    item.value !== void 0 ? /* @__PURE__ */ jsx55("span", { className: "ow-chart__legend-value", children: item.value }) : null
+  ] }, i)) });
+}
+function ChartTable({ caption, head, rows }) {
+  return /* @__PURE__ */ jsxs43("table", { className: "ow-visually-hidden", children: [
+    /* @__PURE__ */ jsx55("caption", { children: caption }),
+    /* @__PURE__ */ jsx55("thead", { children: /* @__PURE__ */ jsx55("tr", { children: head.map((cell, i) => /* @__PURE__ */ jsx55("th", { scope: "col", children: cell }, i)) }) }),
+    /* @__PURE__ */ jsx55("tbody", { children: rows.map((row, r) => /* @__PURE__ */ jsx55("tr", { children: row.map(
+      (cell, i) => i === 0 ? /* @__PURE__ */ jsx55("th", { scope: "row", children: cell }, i) : /* @__PURE__ */ jsx55("td", { children: cell }, i)
+    ) }, r)) })
+  ] });
+}
+
+// src/components/Chart/Cartesian.tsx
+import { Fragment as Fragment10, jsx as jsx56, jsxs as jsxs44 } from "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] = useState29(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__ */ jsx56("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__ */ jsx56("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__ */ jsxs44("g", { children: [
+      area && points.length ? /* @__PURE__ */ jsx56(
+        "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__ */ jsx56("path", { className: "ow-chart__line", d: line, stroke: colors[s] }),
+      count === 1 ? /* @__PURE__ */ jsx56("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__ */ jsxs44("figure", { className: cx("ow-chart", `ow-chart--${kind}`, className), children: [
+    legend ? /* @__PURE__ */ jsx56(ChartLegend, { items: series.map((entry, s) => ({ label: entry.label, color: colors[s] })), shape: kind === "line" ? "line" : "square" }) : null,
+    /* @__PURE__ */ jsxs44(
+      "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__ */ jsxs44("svg", { width, height, "aria-hidden": "true", className: "ow-chart__svg", children: [
+            ticks.map((tick, t) => /* @__PURE__ */ jsxs44("g", { children: [
+              /* @__PURE__ */ jsx56(
+                "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__ */ jsx56("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__ */ jsx56(
+              "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__ */ jsx56("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__ */ jsxs44(Fragment10, { children: [
+              /* @__PURE__ */ jsx56("line", { className: "ow-chart__crosshair", x1: x(shown), x2: x(shown), y1: margin2.top, y2: margin2.top + plotHeight }),
+              series.map((entry, s) => /* @__PURE__ */ jsx56(
+                "circle",
+                {
+                  className: "ow-chart__point",
+                  cx: x(shown),
+                  cy: y(valueOf(data[shown], entry.key)),
+                  r: 4,
+                  fill: colors[s]
+                },
+                entry.key
+              ))
+            ] }) : null,
+            /* @__PURE__ */ jsx56(
+              "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__ */ jsxs44("div", { className: "ow-chart__readout", style: onRight ? { right: width - x(shown) + 12 } : { left: x(shown) + 12 }, "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx56("span", { className: "ow-chart__readout-title", children: indexLabels[shown] }),
+            series.map((entry, s) => /* @__PURE__ */ jsxs44("span", { className: "ow-chart__readout-row", children: [
+              /* @__PURE__ */ jsx56("span", { className: `ow-chart__key ow-chart__key--${kind === "line" ? "line" : "square"}`, style: { background: colors[s] } }),
+              /* @__PURE__ */ jsx56("span", { className: "ow-chart__readout-label", children: entry.label }),
+              /* @__PURE__ */ jsx56("strong", { children: formatValue(valueOf(data[shown], entry.key)) })
+            ] }, entry.key))
+          ] }) : null,
+          /* @__PURE__ */ jsx56("span", { className: "ow-visually-hidden", "aria-live": "polite", children: shown !== null ? describe(shown) : "" })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx56(
+      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
+import { jsx as jsx57 } from "react/jsx-runtime";
+function LineChart(props) {
+  return /* @__PURE__ */ jsx57(CartesianChart, { kind: "line", ...props });
+}
+
+// src/components/Chart/BarChart.tsx
+import { jsx as jsx58 } from "react/jsx-runtime";
+function BarChart(props) {
+  return /* @__PURE__ */ jsx58(CartesianChart, { kind: "bar", ...props });
+}
+
+// src/components/Chart/DonutChart.tsx
+import { useState as useState30 } from "react";
+import { jsx as jsx59, jsxs as jsxs45 } from "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] = useState30(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__ */ jsxs45("figure", { className: cx("ow-chart", "ow-chart--donut", className), children: [
+    /* @__PURE__ */ jsxs45(
+      "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__ */ jsxs45("svg", { width: size2, height: size2, viewBox: `0 0 ${size2} ${size2}`, "aria-hidden": "true", children: [
+            total === 0 ? /* @__PURE__ */ jsx59("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__ */ jsx59(
+                "path",
+                {
+                  d,
+                  fill: slice.fill,
+                  className: cx("ow-chart__slice", active !== null && active !== i && "ow-chart__slice--dim"),
+                  onPointerEnter: () => setActive(i)
+                },
+                i
+              );
+            })
+          ] }),
+          /* @__PURE__ */ jsxs45("div", { className: "ow-chart__center", "aria-hidden": "true", children: [
+            /* @__PURE__ */ jsx59("strong", { className: "ow-chart__center-value", children: shown ? formatValue(shown.value) : center ?? formatValue(total) }),
+            /* @__PURE__ */ jsx59("span", { className: "ow-chart__center-label", children: shown ? `${shown.label} \xB7 ${share(shown.value)}` : centerLabel })
+          ] }),
+          /* @__PURE__ */ jsx59("span", { className: "ow-visually-hidden", "aria-live": "polite", children: shown ? `${shown.label}: ${formatValue(shown.value)}, ${share(shown.value)}.` : "" })
+        ]
+      }
+    ),
+    legend ? /* @__PURE__ */ jsx59(
+      ChartLegend,
+      {
+        shape: "square",
+        items: slices.map((slice) => ({ label: slice.label, color: slice.fill, value: `${formatValue(slice.value)} \xB7 ${share(slice.value)}` }))
+      }
+    ) : null,
+    /* @__PURE__ */ jsx59(
+      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
+import { Fragment as Fragment11, jsx as jsx60, jsxs as jsxs46 } from "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__ */ jsx60(
+    "span",
+    {
+      role: "img",
+      "aria-label": ariaLabel,
+      className: cx("ow-sparkline", className),
+      style: { width, height, "--ow-sparkline-color": colorOf(color, 0) },
+      children: data.length ? /* @__PURE__ */ jsxs46(Fragment11, { children: [
+        /* @__PURE__ */ jsxs46("svg", { viewBox: `0 0 100 ${height}`, preserveAspectRatio: "none", "aria-hidden": "true", children: [
+          area ? /* @__PURE__ */ jsx60("path", { className: "ow-sparkline__area", d: `${line}L100 ${height}L0 ${height}Z` }) : null,
+          /* @__PURE__ */ jsx60("path", { className: "ow-sparkline__line", d: line, vectorEffect: "non-scaling-stroke" })
+        ] }),
+        /* @__PURE__ */ jsx60("span", { className: "ow-sparkline__end", style: { left: `${x(last)}%`, top: y(data[last]) }, "aria-hidden": "true" })
+      ] }) : null
+    }
+  );
+}
 
 // src/components/FileTree/FileTree.tsx
-import { useMemo as useMemo11, useRef as useRef31, useState as useState26 } from "react";
-import { jsx as jsx53, jsxs as jsxs42 } from "react/jsx-runtime";
+import { useMemo as useMemo12, useRef as useRef33, useState as useState31 } from "react";
+import { jsx as jsx61, jsxs as jsxs47 } from "react/jsx-runtime";
 function flatten(nodes, expanded, parent, level = 1) {
   return nodes.flatMap((node) => {
     const path = parent ? `${parent}/${node.name}` : node.name;
@@ -6002,10 +6670,10 @@ function FileTree({
   className
 }) {
   const [current, setCurrent] = useControllableState(selected, defaultSelected, onSelect);
-  const [expanded, setExpanded] = useState26(() => new Set(defaultExpanded === "all" ? allFolders(items2) : defaultExpanded));
-  const rows = useMemo11(() => flatten(items2, expanded), [items2, expanded]);
-  const [focusPath, setFocusPath] = useState26();
-  const refs = useRef31(/* @__PURE__ */ new Map());
+  const [expanded, setExpanded] = useState31(() => new Set(defaultExpanded === "all" ? allFolders(items2) : defaultExpanded));
+  const rows = useMemo12(() => flatten(items2, expanded), [items2, expanded]);
+  const [focusPath, setFocusPath] = useState31();
+  const refs = useRef33(/* @__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;
@@ -6055,8 +6723,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__ */ jsx53(FolderOpenIcon, { size: 16 }) : /* @__PURE__ */ jsx53(FolderIcon, { size: 16 }) : /* @__PURE__ */ jsx53(FileIcon, { size: 16 }));
-      return /* @__PURE__ */ jsxs42(
+      const icon2 = node.icon ?? (row.isFolder ? isOpen ? /* @__PURE__ */ jsx61(FolderOpenIcon, { size: 16 }) : /* @__PURE__ */ jsx61(FolderIcon, { size: 16 }) : /* @__PURE__ */ jsx61(FileIcon, { size: 16 }));
+      return /* @__PURE__ */ jsxs47(
         "li",
         {
           ref: (element) => {
@@ -6074,7 +6742,7 @@ function FileTree({
             if (event.target === event.currentTarget) setFocusPath(path);
           },
           children: [
-            /* @__PURE__ */ jsxs42(
+            /* @__PURE__ */ jsxs47(
               "div",
               {
                 className: cx("ow-tree__row", !row.isFolder && current === path && "ow-tree__row--selected"),
@@ -6084,51 +6752,51 @@ function FileTree({
                   activate(row);
                 },
                 children: [
-                  row.isFolder ? /* @__PURE__ */ jsx53(ChevronRightIcon, { size: 14, className: cx("ow-tree__chevron", isOpen && "ow-tree__chevron--open") }) : /* @__PURE__ */ jsx53("span", { className: "ow-tree__spacer" }),
-                  /* @__PURE__ */ jsx53("span", { className: cx("ow-tree__icon", row.isFolder && "ow-tree__icon--folder"), children: icon2 }),
-                  /* @__PURE__ */ jsx53("span", { className: "ow-tree__name", children: node.name }),
-                  node.meta ? /* @__PURE__ */ jsx53("span", { className: "ow-tree__meta", children: node.meta }) : null
+                  row.isFolder ? /* @__PURE__ */ jsx61(ChevronRightIcon, { size: 14, className: cx("ow-tree__chevron", isOpen && "ow-tree__chevron--open") }) : /* @__PURE__ */ jsx61("span", { className: "ow-tree__spacer" }),
+                  /* @__PURE__ */ jsx61("span", { className: cx("ow-tree__icon", row.isFolder && "ow-tree__icon--folder"), children: icon2 }),
+                  /* @__PURE__ */ jsx61("span", { className: "ow-tree__name", children: node.name }),
+                  node.meta ? /* @__PURE__ */ jsx61("span", { className: "ow-tree__meta", children: node.meta }) : null
                 ]
               }
             ),
-            isOpen && node.children.length > 0 ? /* @__PURE__ */ jsx53("ul", { role: "group", className: "ow-tree__group", children: render(node.children, path, level + 1) }) : null
+            isOpen && node.children.length > 0 ? /* @__PURE__ */ jsx61("ul", { role: "group", className: "ow-tree__group", children: render(node.children, path, level + 1) }) : null
           ]
         },
         path
       );
     });
   }
-  return /* @__PURE__ */ jsx53("ul", { role: "tree", "aria-label": label, className: cx("ow-tree", className), children: render(items2) });
+  return /* @__PURE__ */ jsx61("ul", { role: "tree", "aria-label": label, className: cx("ow-tree", className), children: render(items2) });
 }
 
 // src/components/EmptyState/EmptyState.tsx
-import { jsx as jsx54, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx62, jsxs as jsxs48 } from "react/jsx-runtime";
 function EmptyState({ title, description, icon: icon2, actions, bordered = false, className }) {
-  return /* @__PURE__ */ jsxs43("div", { className: cx("ow-empty", bordered && "ow-empty--bordered", className), children: [
-    /* @__PURE__ */ jsx54("span", { className: "ow-empty__icon", "aria-hidden": "true", children: icon2 ?? /* @__PURE__ */ jsx54(InboxIcon, { size: 20 }) }),
-    /* @__PURE__ */ jsxs43("div", { className: "ow-empty__text", children: [
-      /* @__PURE__ */ jsx54("p", { className: "ow-empty__title", children: title }),
-      description ? /* @__PURE__ */ jsx54("p", { className: "ow-empty__description", children: description }) : null
+  return /* @__PURE__ */ jsxs48("div", { className: cx("ow-empty", bordered && "ow-empty--bordered", className), children: [
+    /* @__PURE__ */ jsx62("span", { className: "ow-empty__icon", "aria-hidden": "true", children: icon2 ?? /* @__PURE__ */ jsx62(InboxIcon, { size: 20 }) }),
+    /* @__PURE__ */ jsxs48("div", { className: "ow-empty__text", children: [
+      /* @__PURE__ */ jsx62("p", { className: "ow-empty__title", children: title }),
+      description ? /* @__PURE__ */ jsx62("p", { className: "ow-empty__description", children: description }) : null
     ] }),
-    actions ? /* @__PURE__ */ jsx54("div", { className: "ow-empty__actions", children: actions }) : null
+    actions ? /* @__PURE__ */ jsx62("div", { className: "ow-empty__actions", children: actions }) : null
   ] });
 }
 
 // src/components/Tag/Tag.tsx
-import { jsx as jsx55, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs49 } from "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__ */ jsxs44("span", { className: cx("ow-tag", `ow-tag--${variant}`, `ow-tag--${size2}`, onRemove && "ow-tag--removable", className), ...props, children: [
-    icon2 ? /* @__PURE__ */ jsx55("span", { className: "ow-tag__icon", children: icon2 }) : null,
-    /* @__PURE__ */ jsx55("span", { className: "ow-tag__label", children }),
-    onRemove ? /* @__PURE__ */ jsx55("button", { type: "button", className: "ow-tag__remove", "aria-label": `Remove ${name}`, onClick: onRemove, children: /* @__PURE__ */ jsx55(XIcon, { size: 12 }) }) : null
+  return /* @__PURE__ */ jsxs49("span", { className: cx("ow-tag", `ow-tag--${variant}`, `ow-tag--${size2}`, onRemove && "ow-tag--removable", className), ...props, children: [
+    icon2 ? /* @__PURE__ */ jsx63("span", { className: "ow-tag__icon", children: icon2 }) : null,
+    /* @__PURE__ */ jsx63("span", { className: "ow-tag__label", children }),
+    onRemove ? /* @__PURE__ */ jsx63("button", { type: "button", className: "ow-tag__remove", "aria-label": `Remove ${name}`, onClick: onRemove, children: /* @__PURE__ */ jsx63(XIcon, { size: 12 }) }) : null
   ] });
 }
 function TagGroup({ label, className, children, ...props }) {
-  return /* @__PURE__ */ jsx55("div", { role: "group", "aria-label": label, className: cx("ow-tag-group", className), ...props, children });
+  return /* @__PURE__ */ jsx63("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__ */ jsx55(
+  const swatch = /* @__PURE__ */ jsx63(
     "span",
     {
       className: cx("ow-swatch", `ow-swatch--${size2}`, shape === "circle" && "ow-swatch--circle"),
@@ -6136,19 +6804,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__ */ jsx55("span", { className, children: swatch });
-  return /* @__PURE__ */ jsxs44("span", { className: cx("ow-swatch-label", className), children: [
+  if (!name && !value) return /* @__PURE__ */ jsx63("span", { className, children: swatch });
+  return /* @__PURE__ */ jsxs49("span", { className: cx("ow-swatch-label", className), children: [
     swatch,
-    /* @__PURE__ */ jsxs44("span", { className: "ow-swatch-label__text", children: [
-      name ? /* @__PURE__ */ jsx55("span", { className: "ow-swatch-label__name", children: name }) : null,
-      /* @__PURE__ */ jsx55("span", { className: "ow-swatch-label__value", children: value })
+    /* @__PURE__ */ jsxs49("span", { className: "ow-swatch-label__text", children: [
+      name ? /* @__PURE__ */ jsx63("span", { className: "ow-swatch-label__name", children: name }) : null,
+      /* @__PURE__ */ jsx63("span", { className: "ow-swatch-label__value", children: value })
     ] })
   ] });
 }
 
 // src/components/Avatar/Avatar.tsx
-import { useState as useState27 } from "react";
-import { jsx as jsx56 } from "react/jsx-runtime";
+import { useState as useState32 } from "react";
+import { jsx as jsx64 } from "react/jsx-runtime";
 var namedSizes = { sm: 24, md: 28, lg: 36, xl: 48 };
 function avatarSize(size2) {
   if (typeof size2 === "number") {
@@ -6158,37 +6826,37 @@ function avatarSize(size2) {
 }
 function Avatar({ name, src, size: size2 = "md", label, className }) {
   const initials = getInitials(name);
-  const [failedImage, setFailedImage] = useState27();
+  const [failedImage, setFailedImage] = useState32();
   const showImage = src && src !== failedImage;
   const sizing = avatarSize(size2);
-  return /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsx64(
     "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__ */ jsx56("img", { src, alt: "", className: "ow-avatar__image", onError: () => setFailedImage(src) }) : initials ? null : /* @__PURE__ */ jsx56(UserIcon, { size: Math.round(sizing.pixels * 0.52) })
+      children: showImage ? /* @__PURE__ */ jsx64("img", { src, alt: "", className: "ow-avatar__image", onError: () => setFailedImage(src) }) : initials ? null : /* @__PURE__ */ jsx64(UserIcon, { size: Math.round(sizing.pixels * 0.52) })
     }
   );
 }
 
 // src/components/Avatar/AvatarGroup.tsx
 import { Children, cloneElement as cloneElement4, isValidElement as isValidElement4 } from "react";
-import { jsx as jsx57, jsxs as jsxs45 } from "react/jsx-runtime";
+import { jsx as jsx65, jsxs as jsxs50 } from "react/jsx-runtime";
 function AvatarGroup({ children, max = 4, size: size2 = "md", label, className }) {
   const avatars = Children.toArray(children).filter(isValidElement4);
   const sizing = avatarSize(size2);
   const shown = avatars.slice(0, max);
   const hidden = avatars.length - shown.length;
-  return /* @__PURE__ */ jsxs45("div", { role: "group", "aria-label": label, className: cx("ow-avatar-group", className), children: [
+  return /* @__PURE__ */ jsxs50("div", { role: "group", "aria-label": label, className: cx("ow-avatar-group", className), children: [
     shown.map((avatar) => cloneElement4(avatar, { size: size2 })),
-    hidden > 0 ? /* @__PURE__ */ jsxs45("span", { className: cx("ow-avatar", sizing.className, "ow-avatar--count"), style: sizing.style, children: [
-      /* @__PURE__ */ jsxs45("span", { "aria-hidden": "true", children: [
+    hidden > 0 ? /* @__PURE__ */ jsxs50("span", { className: cx("ow-avatar", sizing.className, "ow-avatar--count"), style: sizing.style, children: [
+      /* @__PURE__ */ jsxs50("span", { "aria-hidden": "true", children: [
         "+",
         hidden
       ] }),
-      /* @__PURE__ */ jsxs45("span", { className: "ow-visually-hidden", children: [
+      /* @__PURE__ */ jsxs50("span", { className: "ow-visually-hidden", children: [
         "and ",
         hidden,
         " more"
@@ -6201,164 +6869,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__ */ jsxs45("div", { className: cx("ow-user", userSize(size2), className), children: [
-    /* @__PURE__ */ jsx57(Avatar, { name, src, size: size2 }),
-    /* @__PURE__ */ jsxs45("div", { className: "ow-user__text", children: [
-      /* @__PURE__ */ jsx57("span", { className: "ow-user__name", children: name }),
-      description ? /* @__PURE__ */ jsx57("span", { className: "ow-user__description", children: description }) : null
+  return /* @__PURE__ */ jsxs50("div", { className: cx("ow-user", userSize(size2), className), children: [
+    /* @__PURE__ */ jsx65(Avatar, { name, src, size: size2 }),
+    /* @__PURE__ */ jsxs50("div", { className: "ow-user__text", children: [
+      /* @__PURE__ */ jsx65("span", { className: "ow-user__name", children: name }),
+      description ? /* @__PURE__ */ jsx65("span", { className: "ow-user__description", children: description }) : null
     ] })
   ] });
 }
 
 // src/components/Kbd/Kbd.tsx
-import { jsx as jsx58 } from "react/jsx-runtime";
+import { jsx as jsx66 } from "react/jsx-runtime";
 function Kbd({ className, ...props }) {
-  return /* @__PURE__ */ jsx58("kbd", { className: cx("ow-kbd", className), ...props });
+  return /* @__PURE__ */ jsx66("kbd", { className: cx("ow-kbd", className), ...props });
 }
 function Code({ className, ...props }) {
-  return /* @__PURE__ */ jsx58("code", { className: cx("ow-code", className), ...props });
+  return /* @__PURE__ */ jsx66("code", { className: cx("ow-code", className), ...props });
 }
 
 // src/components/Card/Card.tsx
-import { jsx as jsx59, jsxs as jsxs46 } from "react/jsx-runtime";
+import { jsx as jsx67, jsxs as jsxs51 } from "react/jsx-runtime";
 function Card({ className, padding = "md", ...props }) {
-  return /* @__PURE__ */ jsx59("div", { className: cx("ow-card", `ow-card--pad-${padding}`, className), ...props });
+  return /* @__PURE__ */ jsx67("div", { className: cx("ow-card", `ow-card--pad-${padding}`, className), ...props });
 }
 function SettingsRow({ children, description, label, className }) {
-  return /* @__PURE__ */ jsxs46("div", { className: cx("ow-settings-row", className), children: [
-    /* @__PURE__ */ jsxs46("div", { className: "ow-settings-row__text", children: [
-      /* @__PURE__ */ jsx59("span", { className: "ow-settings-row__label", children: label }),
-      description ? /* @__PURE__ */ jsx59("div", { className: "ow-settings-row__description", children: description }) : null
+  return /* @__PURE__ */ jsxs51("div", { className: cx("ow-settings-row", className), children: [
+    /* @__PURE__ */ jsxs51("div", { className: "ow-settings-row__text", children: [
+      /* @__PURE__ */ jsx67("span", { className: "ow-settings-row__label", children: label }),
+      description ? /* @__PURE__ */ jsx67("div", { className: "ow-settings-row__description", children: description }) : null
     ] }),
-    /* @__PURE__ */ jsx59("div", { className: "ow-settings-row__control", children })
+    /* @__PURE__ */ jsx67("div", { className: "ow-settings-row__control", children })
   ] });
 }
 
-// src/components/Layout/Layout.tsx
-import {
-  useEffect as useEffect25,
-  useRef as useRef32,
-  useState as useState28
-} from "react";
-import { jsx as jsx60 } from "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__ */ jsx60(
-    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__ */ jsx60("div", { role: "separator", className: cx("ow-separator-label", className), style: { margin: margin2 }, children: /* @__PURE__ */ jsx60("span", { className: "ow-separator-label__text", children: label }) });
-  }
-  return /* @__PURE__ */ jsx60(
-    "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 = useRef32(null);
-  const [edges, setEdges] = useState28({ start: false, end: false });
-  useEffect25(() => {
-    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__ */ jsx60(
-    "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__ */ jsx60("span", { className: cx("ow-visually-hidden", className), ...props });
-}
-
 // src/components/Container/Container.tsx
-import { jsx as jsx61 } from "react/jsx-runtime";
+import { jsx as jsx68 } from "react/jsx-runtime";
 function Container({ size: size2 = "page", as: Element2 = "div", className, ...props }) {
-  return /* @__PURE__ */ jsx61(Element2, { className: cx("ow-container", `ow-container--${size2}`, className), ...props });
+  return /* @__PURE__ */ jsx68(Element2, { className: cx("ow-container", `ow-container--${size2}`, className), ...props });
 }
 
 // src/components/Section/Section.tsx
-import { jsx as jsx62 } from "react/jsx-runtime";
+import { jsx as jsx69 } from "react/jsx-runtime";
 function Section({ tone = "paper", spacing = "md", size: size2 = "page", as: Element2 = "section", className, children, ...props }) {
-  return /* @__PURE__ */ jsx62(Element2, { className: cx("ow-section", `ow-section--${tone}`, `ow-section--space-${spacing}`, className), ...props, children: size2 === false ? children : /* @__PURE__ */ jsx62(Container, { size: size2, children }) });
+  return /* @__PURE__ */ jsx69(Element2, { className: cx("ow-section", `ow-section--${tone}`, `ow-section--space-${spacing}`, className), ...props, children: size2 === false ? children : /* @__PURE__ */ jsx69(Container, { size: size2, children }) });
 }
 
 // src/components/Marketing/Marketing.tsx
-import { useRef as useRef33 } from "react";
-import { jsx as jsx63, jsxs as jsxs47 } from "react/jsx-runtime";
+import { useRef as useRef34 } from "react";
+import { jsx as jsx70, jsxs as jsxs52 } from "react/jsx-runtime";
 function Chip({ className, ...props }) {
-  return /* @__PURE__ */ jsx63("span", { className: cx("ow-chip", className), ...props });
+  return /* @__PURE__ */ jsx70("span", { className: cx("ow-chip", className), ...props });
 }
 function SectionHeading({
   eyebrow,
@@ -6368,21 +6928,21 @@ function SectionHeading({
   as: Heading = "h2",
   className
 }) {
-  return /* @__PURE__ */ jsxs47("div", { className: cx("ow-section-heading", align === "center" && "ow-section-heading--center", className), children: [
-    eyebrow ? /* @__PURE__ */ jsx63(Chip, { children: eyebrow }) : null,
-    /* @__PURE__ */ jsx63(Heading, { className: "ow-section-heading__title", children: title }),
-    intro ? /* @__PURE__ */ jsx63("p", { className: "ow-section-heading__intro", children: intro }) : null
+  return /* @__PURE__ */ jsxs52("div", { className: cx("ow-section-heading", align === "center" && "ow-section-heading--center", className), children: [
+    eyebrow ? /* @__PURE__ */ jsx70(Chip, { children: eyebrow }) : null,
+    /* @__PURE__ */ jsx70(Heading, { className: "ow-section-heading__title", children: title }),
+    intro ? /* @__PURE__ */ jsx70("p", { className: "ow-section-heading__intro", children: intro }) : null
   ] });
 }
 function SiteHeader({ brand, nav, actions, className }) {
-  return /* @__PURE__ */ jsxs47("header", { className: cx("ow-site-header", className), children: [
-    /* @__PURE__ */ jsx63("div", { className: "ow-site-header__brand", children: brand }),
-    nav ? /* @__PURE__ */ jsx63("nav", { className: "ow-site-header__nav", children: nav }) : null,
-    actions ? /* @__PURE__ */ jsx63("div", { className: "ow-site-header__actions", children: actions }) : null
+  return /* @__PURE__ */ jsxs52("header", { className: cx("ow-site-header", className), children: [
+    /* @__PURE__ */ jsx70("div", { className: "ow-site-header__brand", children: brand }),
+    nav ? /* @__PURE__ */ jsx70("nav", { className: "ow-site-header__nav", children: nav }) : null,
+    actions ? /* @__PURE__ */ jsx70("div", { className: "ow-site-header__actions", children: actions }) : null
   ] });
 }
 function DotGrid({ fade = false, interactive = false, className, children, onPointerMove, ...props }) {
-  const ref = useRef33(null);
+  const ref = useRef34(null);
   function track(event) {
     onPointerMove?.(event);
     const element = ref.current;
@@ -6391,7 +6951,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__ */ jsxs47(
+  return /* @__PURE__ */ jsxs52(
     "div",
     {
       ref,
@@ -6399,20 +6959,20 @@ function DotGrid({ fade = false, interactive = false, className, children, onPoi
       onPointerMove: track,
       ...props,
       children: [
-        /* @__PURE__ */ jsx63("span", { className: "ow-dot-grid__dots", "aria-hidden": "true" }),
-        interactive ? /* @__PURE__ */ jsx63("span", { className: "ow-dot-grid__brass", "aria-hidden": "true" }) : null,
-        /* @__PURE__ */ jsx63("div", { className: "ow-dot-grid__content", children })
+        /* @__PURE__ */ jsx70("span", { className: "ow-dot-grid__dots", "aria-hidden": "true" }),
+        interactive ? /* @__PURE__ */ jsx70("span", { className: "ow-dot-grid__brass", "aria-hidden": "true" }) : null,
+        /* @__PURE__ */ jsx70("div", { className: "ow-dot-grid__content", children })
       ]
     }
   );
 }
 
 // src/components/Prose/Prose.tsx
-import { forwardRef as forwardRef23, useEffect as useEffect26, useRef as useRef34 } from "react";
-import { jsx as jsx64 } from "react/jsx-runtime";
+import { forwardRef as forwardRef23, useEffect as useEffect26, useRef as useRef35 } from "react";
+import { jsx as jsx71 } from "react/jsx-runtime";
 var Prose = /* @__PURE__ */ forwardRef23(function Prose2({ size: size2 = "md", fullWidth = false, as = "div", className, children, ...props }, ref) {
   const Element2 = as;
-  const root = useRef34(null);
+  const root = useRef35(null);
   useEffect26(() => {
     const element = root.current;
     if (!element) return;
@@ -6425,7 +6985,7 @@ var Prose = /* @__PURE__ */ forwardRef23(function Prose2({ size: size2 = "md", f
       if (text) box.setAttribute("aria-label", text);
     }
   });
-  return /* @__PURE__ */ jsx64(
+  return /* @__PURE__ */ jsx71(
     Element2,
     {
       ref: (node) => {
@@ -6441,10 +7001,10 @@ var Prose = /* @__PURE__ */ forwardRef23(function Prose2({ size: size2 = "md", f
 });
 
 // src/components/TextShimmer/TextShimmer.tsx
-import { jsx as jsx65 } from "react/jsx-runtime";
+import { jsx as jsx72 } from "react/jsx-runtime";
 function TextShimmer({ children, as = "span", duration = 2, active = true, className }) {
   const Element2 = as;
-  return /* @__PURE__ */ jsx65(
+  return /* @__PURE__ */ jsx72(
     Element2,
     {
       className: cx("ow-shimmer", active && "ow-shimmer--active", className),
@@ -6458,17 +7018,17 @@ function TextShimmer({ children, as = "span", duration = 2, active = true, class
 import {
   forwardRef as forwardRef24,
   useEffect as useEffect27,
-  useId as useId22,
-  useLayoutEffect as useLayoutEffect7,
-  useRef as useRef35,
-  useState as useState29
+  useId as useId23,
+  useLayoutEffect as useLayoutEffect8,
+  useRef as useRef36,
+  useState as useState33
 } from "react";
-import { jsx as jsx66, jsxs as jsxs48 } from "react/jsx-runtime";
+import { jsx as jsx73, jsxs as jsxs53 } from "react/jsx-runtime";
 var noAttachments = [];
 var counterFrom = 0.8;
 var announceDelay = 1e3;
 function Glyph({ children }) {
-  return /* @__PURE__ */ jsx66(
+  return /* @__PURE__ */ jsx73(
     "svg",
     {
       xmlns: "http://www.w3.org/2000/svg",
@@ -6488,29 +7048,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__ */ jsx66(Glyph, { children: /* @__PURE__ */ jsx66("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__ */ jsx66(Glyph, { children: /* @__PURE__ */ jsx66("rect", { x: "6", y: "6", width: "12", height: "12", rx: "2", fill: "currentColor", stroke: "none" }) });
+var PaperclipIcon = () => /* @__PURE__ */ jsx73(Glyph, { children: /* @__PURE__ */ jsx73("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__ */ jsx73(Glyph, { children: /* @__PURE__ */ jsx73("rect", { x: "6", y: "6", width: "12", height: "12", rx: "2", fill: "currentColor", stroke: "none" }) });
 var fileIcons = {
-  image: /* @__PURE__ */ jsxs48(Glyph, { children: [
-    /* @__PURE__ */ jsx66("path", { d: sheet }),
-    /* @__PURE__ */ jsx66("path", { d: fold }),
-    /* @__PURE__ */ jsx66("circle", { cx: "10", cy: "12", r: "2" }),
-    /* @__PURE__ */ jsx66("path", { d: "m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22" })
+  image: /* @__PURE__ */ jsxs53(Glyph, { children: [
+    /* @__PURE__ */ jsx73("path", { d: sheet }),
+    /* @__PURE__ */ jsx73("path", { d: fold }),
+    /* @__PURE__ */ jsx73("circle", { cx: "10", cy: "12", r: "2" }),
+    /* @__PURE__ */ jsx73("path", { d: "m20 17-1.296-1.296a2.41 2.41 0 0 0-3.408 0L9 22" })
   ] }),
-  code: /* @__PURE__ */ jsxs48(Glyph, { children: [
-    /* @__PURE__ */ jsx66("path", { d: sheet }),
-    /* @__PURE__ */ jsx66("path", { d: fold }),
-    /* @__PURE__ */ jsx66("path", { d: "M10 12.5 8 15l2 2.5" }),
-    /* @__PURE__ */ jsx66("path", { d: "m14 12.5 2 2.5-2 2.5" })
+  code: /* @__PURE__ */ jsxs53(Glyph, { children: [
+    /* @__PURE__ */ jsx73("path", { d: sheet }),
+    /* @__PURE__ */ jsx73("path", { d: fold }),
+    /* @__PURE__ */ jsx73("path", { d: "M10 12.5 8 15l2 2.5" }),
+    /* @__PURE__ */ jsx73("path", { d: "m14 12.5 2 2.5-2 2.5" })
   ] }),
-  text: /* @__PURE__ */ jsxs48(Glyph, { children: [
-    /* @__PURE__ */ jsx66("path", { d: sheet }),
-    /* @__PURE__ */ jsx66("path", { d: fold }),
-    /* @__PURE__ */ jsx66("path", { d: "M10 9H8" }),
-    /* @__PURE__ */ jsx66("path", { d: "M16 13H8" }),
-    /* @__PURE__ */ jsx66("path", { d: "M16 17H8" })
+  text: /* @__PURE__ */ jsxs53(Glyph, { children: [
+    /* @__PURE__ */ jsx73("path", { d: sheet }),
+    /* @__PURE__ */ jsx73("path", { d: fold }),
+    /* @__PURE__ */ jsx73("path", { d: "M10 9H8" }),
+    /* @__PURE__ */ jsx73("path", { d: "M16 13H8" }),
+    /* @__PURE__ */ jsx73("path", { d: "M16 17H8" })
   ] }),
-  file: /* @__PURE__ */ jsx66(FileIcon, { size: 16 })
+  file: /* @__PURE__ */ jsx73(FileIcon, { size: 16 })
 };
 function kindOf({ name, type = "" }) {
   const lower = name.toLowerCase();
@@ -6552,7 +7112,7 @@ function accepts(file, accept) {
 var hasFiles = (event) => Array.from(event.dataTransfer.types).includes("Files");
 var PromptInput = /* @__PURE__ */ forwardRef24(function PromptInput2({
   value,
-  defaultValue = "",
+  defaultValue: defaultValue2 = "",
   onChange,
   onSubmit,
   isStreaming = false,
@@ -6581,18 +7141,18 @@ var PromptInput = /* @__PURE__ */ forwardRef24(function PromptInput2({
   onKeyDown,
   className
 }, ref) {
-  const [text, setText] = useControllableState(value, defaultValue, onChange);
-  const textAreaRef = useRef35(null);
-  const actionRef = useRef35(null);
-  const pickerRef = useRef35(null);
-  const listRef = useRef35(null);
-  const composing = useRef35(false);
-  const dragDepth = useRef35(0);
-  const pendingFocus = useRef35(null);
-  const [isDragging, setIsDragging] = useState29(false);
-  const [notice, setNotice] = useState29();
-  const [announcement, setAnnouncement] = useState29("");
-  const hintId = useId22();
+  const [text, setText] = useControllableState(value, defaultValue2, onChange);
+  const textAreaRef = useRef36(null);
+  const actionRef = useRef36(null);
+  const pickerRef = useRef36(null);
+  const listRef = useRef36(null);
+  const composing = useRef36(false);
+  const dragDepth = useRef36(0);
+  const pendingFocus = useRef36(null);
+  const [isDragging, setIsDragging] = useState33(false);
+  const [notice, setNotice] = useState33();
+  const [announcement, setAnnouncement] = useState33("");
+  const hintId = useId23();
   const rows = Math.max(1, Math.round(minRows));
   const maxRowCount = Math.max(rows, Math.round(maxRows));
   const canAttach = Boolean(onAttach) && !disabled;
@@ -6602,7 +7162,7 @@ var PromptInput = /* @__PURE__ */ forwardRef24(function PromptInput2({
   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");
@@ -6623,20 +7183,20 @@ var PromptInput = /* @__PURE__ */ forwardRef24(function PromptInput2({
     observer.observe(textArea);
     return () => observer.disconnect();
   }, []);
-  useLayoutEffect7(() => {
+  useLayoutEffect8(() => {
     if (textAreaRef.current) resizeTextArea(textAreaRef.current);
   }, [size2, rows]);
-  const wasStreaming = useRef35(isStreaming);
-  const actionHadFocus = useRef35(false);
+  const wasStreaming = useRef36(isStreaming);
+  const actionHadFocus = useRef36(false);
   if (wasStreaming.current !== isStreaming) {
     actionHadFocus.current = typeof document !== "undefined" && document.activeElement === actionRef.current;
   }
-  useLayoutEffect7(() => {
+  useLayoutEffect8(() => {
     if (wasStreaming.current && !isStreaming && actionHadFocus.current && !hasContent) textAreaRef.current?.focus();
     wasStreaming.current = isStreaming;
     actionHadFocus.current = false;
   }, [isStreaming, hasContent]);
-  useLayoutEffect7(() => {
+  useLayoutEffect8(() => {
     const pending = pendingFocus.current;
     if (!pending) return;
     pendingFocus.current = null;
@@ -6648,7 +7208,7 @@ var PromptInput = /* @__PURE__ */ forwardRef24(function PromptInput2({
   useEffect27(() => {
     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]);
@@ -6703,7 +7263,7 @@ var PromptInput = /* @__PURE__ */ forwardRef24(function PromptInput2({
     event.preventDefault();
     textAreaRef.current?.focus();
   }
-  const attachButton = onAttach ? /* @__PURE__ */ jsx66(Tooltip, { label: "Attach files", children: /* @__PURE__ */ jsx66(
+  const attachButton = onAttach ? /* @__PURE__ */ jsx73(Tooltip, { label: "Attach files", children: /* @__PURE__ */ jsx73(
     Button,
     {
       className: "ow-prompt-input__attach",
@@ -6713,11 +7273,11 @@ var PromptInput = /* @__PURE__ */ forwardRef24(function PromptInput2({
       "aria-label": multiple ? "Attach files" : "Attach a file",
       disabled,
       onClick: () => pickerRef.current?.click(),
-      children: /* @__PURE__ */ jsx66(PaperclipIcon, {})
+      children: /* @__PURE__ */ jsx73(PaperclipIcon, {})
     }
   ) }) : null;
   const actionLabel = isStreaming ? "Stop" : "Send";
-  const actionButton = /* @__PURE__ */ jsx66(Tooltip, { label: actionLabel, children: /* @__PURE__ */ jsx66(
+  const actionButton = /* @__PURE__ */ jsx73(Tooltip, { label: actionLabel, children: /* @__PURE__ */ jsx73(
     Button,
     {
       ref: actionRef,
@@ -6732,10 +7292,10 @@ var PromptInput = /* @__PURE__ */ forwardRef24(function PromptInput2({
         else submit();
         textAreaRef.current?.focus();
       },
-      children: isStreaming ? /* @__PURE__ */ jsx66(StopIcon, {}) : /* @__PURE__ */ jsx66(ArrowUpIcon, { size: 16 })
+      children: isStreaming ? /* @__PURE__ */ jsx73(StopIcon, {}) : /* @__PURE__ */ jsx73(ArrowUpIcon, { size: 16 })
     }
   ) });
-  return /* @__PURE__ */ jsxs48(
+  return /* @__PURE__ */ jsxs53(
     "div",
     {
       className: cx(
@@ -6749,7 +7309,7 @@ var PromptInput = /* @__PURE__ */ forwardRef24(function PromptInput2({
       ),
       style: { "--ow-prompt-min-rows": rows, "--ow-prompt-max-rows": maxRowCount },
       children: [
-        /* @__PURE__ */ jsxs48(
+        /* @__PURE__ */ jsxs53(
           "fieldset",
           {
             role: "presentation",
@@ -6779,12 +7339,12 @@ var PromptInput = /* @__PURE__ */ forwardRef24(function PromptInput2({
               take(Array.from(event.dataTransfer.files));
             },
             children: [
-              attachments.length ? /* @__PURE__ */ jsx66("ul", { ref: listRef, className: "ow-prompt-input__attachments", "aria-label": "Attachments", children: attachments.map((attachment, index) => {
+              attachments.length ? /* @__PURE__ */ jsx73("ul", { ref: listRef, className: "ow-prompt-input__attachments", "aria-label": "Attachments", children: attachments.map((attachment, index) => {
                 const [base, extension] = splitName(attachment.name);
-                return /* @__PURE__ */ jsxs48("li", { className: "ow-prompt-input__attachment", children: [
-                  /* @__PURE__ */ jsxs48("span", { className: "ow-prompt-input__thumb", "aria-hidden": "true", children: [
+                return /* @__PURE__ */ jsxs53("li", { className: "ow-prompt-input__attachment", children: [
+                  /* @__PURE__ */ jsxs53("span", { className: "ow-prompt-input__thumb", "aria-hidden": "true", children: [
                     fileIcons[kindOf(attachment)],
-                    attachment.previewUrl ? /* @__PURE__ */ jsx66(
+                    attachment.previewUrl ? /* @__PURE__ */ jsx73(
                       "img",
                       {
                         src: attachment.previewUrl,
@@ -6795,26 +7355,26 @@ var PromptInput = /* @__PURE__ */ forwardRef24(function PromptInput2({
                       }
                     ) : null
                   ] }),
-                  /* @__PURE__ */ jsxs48("span", { className: "ow-prompt-input__file", children: [
-                    /* @__PURE__ */ jsxs48("span", { className: "ow-prompt-input__file-name", title: attachment.name, children: [
-                      /* @__PURE__ */ jsx66("span", { className: "ow-prompt-input__file-base", children: base }),
+                  /* @__PURE__ */ jsxs53("span", { className: "ow-prompt-input__file", children: [
+                    /* @__PURE__ */ jsxs53("span", { className: "ow-prompt-input__file-name", title: attachment.name, children: [
+                      /* @__PURE__ */ jsx73("span", { className: "ow-prompt-input__file-base", children: base }),
                       extension
                     ] }),
-                    attachment.size !== void 0 ? /* @__PURE__ */ jsx66("span", { className: "ow-prompt-input__file-size", children: formatBytes(attachment.size, locale) }) : null
+                    attachment.size !== void 0 ? /* @__PURE__ */ jsx73("span", { className: "ow-prompt-input__file-size", children: formatBytes(attachment.size, locale) }) : null
                   ] }),
-                  onRemoveAttachment ? /* @__PURE__ */ jsx66(
+                  onRemoveAttachment ? /* @__PURE__ */ jsx73(
                     "button",
                     {
                       type: "button",
                       className: "ow-prompt-input__remove",
                       "aria-label": `Remove ${attachment.name}`,
                       onClick: () => remove(attachment, index),
-                      children: /* @__PURE__ */ jsx66(XIcon, { size: 14 })
+                      children: /* @__PURE__ */ jsx73(XIcon, { size: 14 })
                     }
                   ) : null
                 ] }, attachment.id);
               }) }) : null,
-              /* @__PURE__ */ jsx66(
+              /* @__PURE__ */ jsx73(
                 Textarea,
                 {
                   ref: setTextAreaRef,
@@ -6845,22 +7405,22 @@ var PromptInput = /* @__PURE__ */ forwardRef24(function PromptInput2({
                   }
                 }
               ),
-              /* @__PURE__ */ jsxs48("div", { className: "ow-prompt-input__toolbar", "data-prompt-blank": "", children: [
-                toolbarStart ? /* @__PURE__ */ jsxs48("div", { className: "ow-prompt-input__start", "data-prompt-blank": "", children: [
+              /* @__PURE__ */ jsxs53("div", { className: "ow-prompt-input__toolbar", "data-prompt-blank": "", children: [
+                toolbarStart ? /* @__PURE__ */ jsxs53("div", { className: "ow-prompt-input__start", "data-prompt-blank": "", children: [
                   attachButton,
                   startActions
                 ] }) : null,
-                /* @__PURE__ */ jsxs48("div", { className: "ow-prompt-input__end", "data-prompt-blank": "", children: [
-                  showCounter ? /* @__PURE__ */ jsxs48("span", { className: cx("ow-prompt-input__counter", remaining === 0 && "ow-prompt-input__counter--full"), "aria-hidden": "true", children: [
-                    number(text.length),
+                /* @__PURE__ */ jsxs53("div", { className: "ow-prompt-input__end", "data-prompt-blank": "", children: [
+                  showCounter ? /* @__PURE__ */ jsxs53("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__ */ jsx66(
+              onAttach ? /* @__PURE__ */ jsx73(
                 "input",
                 {
                   ref: pickerRef,
@@ -6876,14 +7436,14 @@ var PromptInput = /* @__PURE__ */ forwardRef24(function PromptInput2({
                   }
                 }
               ) : null,
-              isDragging ? /* @__PURE__ */ jsxs48("div", { className: "ow-prompt-input__drop", "aria-hidden": "true", children: [
-                /* @__PURE__ */ jsx66(UploadIcon, { size: 16 }),
+              isDragging ? /* @__PURE__ */ jsxs53("div", { className: "ow-prompt-input__drop", "aria-hidden": "true", children: [
+                /* @__PURE__ */ jsx73(UploadIcon, { size: 16 }),
                 "Drop to attach"
               ] }) : null
             ]
           }
         ),
-        shownHint ? /* @__PURE__ */ jsx66(
+        shownHint ? /* @__PURE__ */ jsx73(
           "div",
           {
             className: cx("ow-prompt-input__hint", notice && "ow-prompt-input__hint--notice"),
@@ -6892,7 +7452,7 @@ var PromptInput = /* @__PURE__ */ forwardRef24(function PromptInput2({
             children: shownHint
           }
         ) : null,
-        /* @__PURE__ */ jsx66("span", { className: "ow-visually-hidden", role: "status", children: announcement })
+        /* @__PURE__ */ jsx73("span", { className: "ow-visually-hidden", role: "status", children: announcement })
       ]
     }
   );
@@ -6900,18 +7460,18 @@ var PromptInput = /* @__PURE__ */ forwardRef24(function PromptInput2({
 
 // src/components/PromptInput/PromptSuggestion.tsx
 import { forwardRef as forwardRef25 } from "react";
-import { jsx as jsx67, jsxs as jsxs49 } from "react/jsx-runtime";
+import { jsx as jsx74, jsxs as jsxs54 } from "react/jsx-runtime";
 var PromptSuggestion = /* @__PURE__ */ forwardRef25(function PromptSuggestion2({ children, icon: icon2, description, variant = description ? "card" : "pill", type = "button", className, ...buttonProps }, ref) {
   if (variant === "card") {
-    return /* @__PURE__ */ jsxs49("button", { ref, type, className: cx("ow-prompt-suggestion", "ow-prompt-suggestion--card", className), ...buttonProps, children: [
-      icon2 ? /* @__PURE__ */ jsx67("span", { className: "ow-prompt-suggestion__icon", children: icon2 }) : null,
-      /* @__PURE__ */ jsxs49("span", { className: "ow-prompt-suggestion__text", children: [
-        /* @__PURE__ */ jsx67("span", { className: "ow-prompt-suggestion__title", children }),
-        description ? /* @__PURE__ */ jsx67("span", { className: "ow-prompt-suggestion__description", children: description }) : null
+    return /* @__PURE__ */ jsxs54("button", { ref, type, className: cx("ow-prompt-suggestion", "ow-prompt-suggestion--card", className), ...buttonProps, children: [
+      icon2 ? /* @__PURE__ */ jsx74("span", { className: "ow-prompt-suggestion__icon", children: icon2 }) : null,
+      /* @__PURE__ */ jsxs54("span", { className: "ow-prompt-suggestion__text", children: [
+        /* @__PURE__ */ jsx74("span", { className: "ow-prompt-suggestion__title", children }),
+        description ? /* @__PURE__ */ jsx74("span", { className: "ow-prompt-suggestion__description", children: description }) : null
       ] })
     ] });
   }
-  return /* @__PURE__ */ jsxs49(
+  return /* @__PURE__ */ jsxs54(
     "button",
     {
       ref,
@@ -6924,8 +7484,8 @@ var PromptSuggestion = /* @__PURE__ */ forwardRef25(function PromptSuggestion2({
       ),
       ...buttonProps,
       children: [
-        icon2 ? /* @__PURE__ */ jsx67("span", { className: "ow-prompt-suggestion__icon", children: icon2 }) : null,
-        /* @__PURE__ */ jsx67("span", { className: "ow-prompt-suggestion__label", children })
+        icon2 ? /* @__PURE__ */ jsx74("span", { className: "ow-prompt-suggestion__icon", children: icon2 }) : null,
+        /* @__PURE__ */ jsx74("span", { className: "ow-prompt-suggestion__label", children })
       ]
     }
   );
@@ -6940,7 +7500,7 @@ function PromptSuggestions({
   style,
   ...props
 }) {
-  return /* @__PURE__ */ jsx67(
+  return /* @__PURE__ */ jsx74(
     "div",
     {
       role: "group",
@@ -6956,18 +7516,18 @@ function PromptSuggestions({
 // src/components/Chat/ChatConversation.tsx
 import {
   Children as Children2,
-  createContext as createContext8,
+  createContext as createContext9,
   forwardRef as forwardRef26,
-  useCallback as useCallback10,
+  useCallback as useCallback11,
   useEffect as useEffect28,
   useImperativeHandle as useImperativeHandle3,
-  useLayoutEffect as useLayoutEffect8,
-  useMemo as useMemo12,
-  useRef as useRef36,
-  useState as useState30
+  useLayoutEffect as useLayoutEffect9,
+  useMemo as useMemo13,
+  useRef as useRef37,
+  useState as useState34
 } from "react";
-import { jsx as jsx68, jsxs as jsxs50 } from "react/jsx-runtime";
-var ChatConversationContext = /* @__PURE__ */ createContext8(null);
+import { jsx as jsx75, jsxs as jsxs55 } from "react/jsx-runtime";
+var ChatConversationContext = /* @__PURE__ */ createContext9(null);
 var stickyDistance = 32;
 var defaultCount = (count) => `${count} new`;
 var prefersReducedMotion = () => typeof window !== "undefined" && Boolean(window.matchMedia?.("(prefers-reduced-motion: reduce)").matches);
@@ -6983,17 +7543,17 @@ var ChatConversation = /* @__PURE__ */ forwardRef26(function ChatConversation2({
   className,
   ...props
 }, ref) {
-  const scrollerRef = useRef36(null);
-  const contentRef = useRef36(null);
-  const jumpRef = useRef36(null);
-  const following = useRef36(true);
-  const lastTop = useRef36(0);
-  const ready = useRef36(false);
-  const unseen = useRef36(/* @__PURE__ */ new Set());
-  const [isFollowing, setIsFollowing] = useState30(true);
-  const [newCount, setNewCount] = useState30(0);
+  const scrollerRef = useRef37(null);
+  const contentRef = useRef37(null);
+  const jumpRef = useRef37(null);
+  const following = useRef37(true);
+  const lastTop = useRef37(0);
+  const ready = useRef37(false);
+  const unseen = useRef37(/* @__PURE__ */ new Set());
+  const [isFollowing, setIsFollowing] = useState34(true);
+  const [newCount, setNewCount] = useState34(0);
   const isEmpty = Children2.toArray(children).length === 0;
-  const follow = useCallback10((next) => {
+  const follow = useCallback11((next) => {
     following.current = next;
     setIsFollowing(next);
     if (next && unseen.current.size > 0) {
@@ -7001,13 +7561,13 @@ var ChatConversation = /* @__PURE__ */ forwardRef26(function ChatConversation2({
       setNewCount(0);
     }
   }, []);
-  const stick = useCallback10(() => {
+  const stick = useCallback11(() => {
     const scroller = scrollerRef.current;
     if (!scroller) return;
     scroller.scrollTop = scroller.scrollHeight;
     lastTop.current = scroller.scrollTop;
   }, []);
-  const scrollToBottom = useCallback10(
+  const scrollToBottom = useCallback11(
     (options) => {
       const scroller = scrollerRef.current;
       if (!scroller) return;
@@ -7017,7 +7577,7 @@ var ChatConversation = /* @__PURE__ */ forwardRef26(function ChatConversation2({
     [follow]
   );
   useImperativeHandle3(ref, () => ({ scrollToBottom }), [scrollToBottom]);
-  useLayoutEffect8(stick, [stick]);
+  useLayoutEffect9(stick, [stick]);
   useEffect28(() => {
     ready.current = true;
   }, []);
@@ -7044,7 +7604,7 @@ var ChatConversation = /* @__PURE__ */ forwardRef26(function ChatConversation2({
     }
     lastTop.current = top;
   }
-  const context = useMemo12(
+  const context = useMemo13(
     () => ({
       ready,
       register(id) {
@@ -7061,9 +7621,9 @@ var ChatConversation = /* @__PURE__ */ forwardRef26(function ChatConversation2({
   );
   const showJump = !isFollowing && !isEmpty;
   const jump = usePresence(showJump);
-  return /* @__PURE__ */ jsxs50("div", { className: cx("ow-chat-conversation", width === "full" && "ow-chat-conversation--full", className), ...props, children: [
-    /* @__PURE__ */ jsxs50("div", { className: "ow-chat-conversation__viewport", children: [
-      /* @__PURE__ */ jsx68(
+  return /* @__PURE__ */ jsxs55("div", { className: cx("ow-chat-conversation", width === "full" && "ow-chat-conversation--full", className), ...props, children: [
+    /* @__PURE__ */ jsxs55("div", { className: "ow-chat-conversation__viewport", children: [
+      /* @__PURE__ */ jsx75(
         "div",
         {
           ref: scrollerRef,
@@ -7075,17 +7635,17 @@ var ChatConversation = /* @__PURE__ */ forwardRef26(function ChatConversation2({
           "aria-labelledby": ariaLabelledBy,
           tabIndex: isEmpty ? void 0 : 0,
           onScroll,
-          children: /* @__PURE__ */ jsx68("div", { ref: contentRef, className: "ow-chat-conversation__content", children: /* @__PURE__ */ jsx68(ChatConversationContext.Provider, { value: context, children }) })
+          children: /* @__PURE__ */ jsx75("div", { ref: contentRef, className: "ow-chat-conversation__content", children: /* @__PURE__ */ jsx75(ChatConversationContext.Provider, { value: context, children }) })
         }
       ),
-      isEmpty && empty ? /* @__PURE__ */ jsx68("div", { className: "ow-chat-conversation__empty", children: /* @__PURE__ */ jsx68("div", { className: "ow-chat-conversation__empty-inner", children: empty }) }) : null,
-      jump.mounted ? /* @__PURE__ */ jsx68("div", { className: "ow-chat-conversation__jump", "data-state": jump.state, children: /* @__PURE__ */ jsxs50(
+      isEmpty && empty ? /* @__PURE__ */ jsx75("div", { className: "ow-chat-conversation__empty", children: /* @__PURE__ */ jsx75("div", { className: "ow-chat-conversation__empty-inner", children: empty }) }) : null,
+      jump.mounted ? /* @__PURE__ */ jsx75("div", { className: "ow-chat-conversation__jump", "data-state": jump.state, children: /* @__PURE__ */ jsxs55(
         Button,
         {
           ref: jumpRef,
           size: "sm",
           shape: "pill",
-          startIcon: /* @__PURE__ */ jsx68(ArrowDownIcon, { size: 16 }),
+          startIcon: /* @__PURE__ */ jsx75(ArrowDownIcon, { size: 16 }),
           "aria-label": newCount > 0 ? `${jumpLabel}, ${formatNewCount(newCount)}` : jumpLabel,
           tabIndex: showJump ? void 0 : -1,
           onClick: () => {
@@ -7094,29 +7654,29 @@ var ChatConversation = /* @__PURE__ */ forwardRef26(function ChatConversation2({
           },
           children: [
             jumpLabel,
-            newCount > 0 ? /* @__PURE__ */ jsx68("span", { className: "ow-chat-conversation__count", children: formatNewCount(newCount) }) : null
+            newCount > 0 ? /* @__PURE__ */ jsx75("span", { className: "ow-chat-conversation__count", children: formatNewCount(newCount) }) : null
           ]
         }
       ) }) : null
     ] }),
-    footer != null && footer !== false ? /* @__PURE__ */ jsx68("div", { className: "ow-chat-conversation__footer", children: /* @__PURE__ */ jsx68("div", { className: "ow-chat-conversation__footer-inner", children: footer }) }) : null
+    footer != null && footer !== false ? /* @__PURE__ */ jsx75("div", { className: "ow-chat-conversation__footer", children: /* @__PURE__ */ jsx75("div", { className: "ow-chat-conversation__footer-inner", children: footer }) }) : null
   ] });
 });
 
 // src/components/Chat/ChatMessage.tsx
 import {
   forwardRef as forwardRef27,
-  useContext as useContext10,
+  useContext as useContext12,
   useEffect as useEffect29,
-  useId as useId23,
-  useLayoutEffect as useLayoutEffect9,
-  useRef as useRef37,
-  useState as useState31
+  useId as useId24,
+  useLayoutEffect as useLayoutEffect10,
+  useRef as useRef38,
+  useState as useState35
 } from "react";
-import { Fragment as Fragment10, jsx as jsx69, jsxs as jsxs51 } from "react/jsx-runtime";
+import { Fragment as Fragment12, jsx as jsx76, jsxs as jsxs56 } from "react/jsx-runtime";
 function lucide(paths) {
   return function Icon({ size: size2 = 16, strokeWidth = 2, ...props }) {
-    return /* @__PURE__ */ jsx69(
+    return /* @__PURE__ */ jsx76(
       "svg",
       {
         xmlns: "http://www.w3.org/2000/svg",
@@ -7137,55 +7697,55 @@ function lucide(paths) {
   };
 }
 var BotIcon = /* @__PURE__ */ lucide(
-  /* @__PURE__ */ jsxs51(Fragment10, { children: [
-    /* @__PURE__ */ jsx69("path", { d: "M12 8V4H8" }),
-    /* @__PURE__ */ jsx69("rect", { width: "16", height: "12", x: "4", y: "8", rx: "2" }),
-    /* @__PURE__ */ jsx69("path", { d: "M2 14h2" }),
-    /* @__PURE__ */ jsx69("path", { d: "M20 14h2" }),
-    /* @__PURE__ */ jsx69("path", { d: "M15 13v2" }),
-    /* @__PURE__ */ jsx69("path", { d: "M9 13v2" })
+  /* @__PURE__ */ jsxs56(Fragment12, { children: [
+    /* @__PURE__ */ jsx76("path", { d: "M12 8V4H8" }),
+    /* @__PURE__ */ jsx76("rect", { width: "16", height: "12", x: "4", y: "8", rx: "2" }),
+    /* @__PURE__ */ jsx76("path", { d: "M2 14h2" }),
+    /* @__PURE__ */ jsx76("path", { d: "M20 14h2" }),
+    /* @__PURE__ */ jsx76("path", { d: "M15 13v2" }),
+    /* @__PURE__ */ jsx76("path", { d: "M9 13v2" })
   ] })
 );
 var RotateCcwIcon = /* @__PURE__ */ lucide(
-  /* @__PURE__ */ jsxs51(Fragment10, { children: [
-    /* @__PURE__ */ jsx69("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
-    /* @__PURE__ */ jsx69("path", { d: "M3 3v5h5" })
+  /* @__PURE__ */ jsxs56(Fragment12, { children: [
+    /* @__PURE__ */ jsx76("path", { d: "M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8" }),
+    /* @__PURE__ */ jsx76("path", { d: "M3 3v5h5" })
   ] })
 );
 var ThumbsUpIcon = /* @__PURE__ */ lucide(
-  /* @__PURE__ */ jsxs51(Fragment10, { children: [
-    /* @__PURE__ */ jsx69("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__ */ jsx69("path", { d: "M7 10v12" })
+  /* @__PURE__ */ jsxs56(Fragment12, { children: [
+    /* @__PURE__ */ jsx76("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__ */ jsx76("path", { d: "M7 10v12" })
   ] })
 );
 var ThumbsDownIcon = /* @__PURE__ */ lucide(
-  /* @__PURE__ */ jsxs51(Fragment10, { children: [
-    /* @__PURE__ */ jsx69("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__ */ jsx69("path", { d: "M17 14V2" })
+  /* @__PURE__ */ jsxs56(Fragment12, { children: [
+    /* @__PURE__ */ jsx76("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__ */ jsx76("path", { d: "M17 14V2" })
   ] })
 );
 var PencilIcon = /* @__PURE__ */ lucide(
-  /* @__PURE__ */ jsxs51(Fragment10, { children: [
-    /* @__PURE__ */ jsx69("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__ */ jsx69("path", { d: "m15 5 4 4" })
+  /* @__PURE__ */ jsxs56(Fragment12, { children: [
+    /* @__PURE__ */ jsx76("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__ */ jsx76("path", { d: "m15 5 4 4" })
   ] })
 );
 var botSizes = { sm: 14, md: 16, lg: 18 };
 function ChatAgentAvatar({ size: size2 = "md", label, className }) {
-  return /* @__PURE__ */ jsx69(
+  return /* @__PURE__ */ jsx76(
     "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__ */ jsx69(BotIcon, { size: botSizes[size2] })
+      children: /* @__PURE__ */ jsx76(BotIcon, { size: botSizes[size2] })
     }
   );
 }
 function useChatEntrance() {
-  const conversation = useContext10(ChatConversationContext);
-  const [entering] = useState31(() => conversation?.ready.current ?? false);
+  const conversation = useContext12(ChatConversationContext);
+  const [entering] = useState35(() => conversation?.ready.current ?? false);
   return entering;
 }
 var formatters = /* @__PURE__ */ new Map();
@@ -7204,14 +7764,14 @@ function formattersFor(locale) {
 function MessageTime({ time, locale }) {
   const date = typeof time === "string" ? new Date(time) : time;
   if (Number.isNaN(date.getTime())) {
-    return /* @__PURE__ */ jsx69("time", { className: "ow-chat-message__time", children: String(time) });
+    return /* @__PURE__ */ jsx76("time", { className: "ow-chat-message__time", children: String(time) });
   }
   const { short, full } = formattersFor(locale);
-  return /* @__PURE__ */ jsx69("time", { className: "ow-chat-message__time", dateTime: date.toISOString(), title: full.format(date), children: short.format(date) });
+  return /* @__PURE__ */ jsx76("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) {
-  useLayoutEffect9(() => {
+  useLayoutEffect10(() => {
     const body = bodyRef.current;
     const content = contentRef.current;
     const caret = caretRef.current;
@@ -7257,37 +7817,37 @@ function useStreamingCaret(bodyRef, contentRef, caretRef, active) {
   }, [active, bodyRef, contentRef, caretRef]);
 }
 var ChatMessage = /* @__PURE__ */ forwardRef27(function ChatMessage2({ from, children, name, avatar, time, locale, status = "done", error, onRetry, retryLabel = "Retry", actions, showActions = "hover", className, ...props }, ref) {
-  const conversation = useContext10(ChatConversationContext);
+  const conversation = useContext12(ChatConversationContext);
   const entering = useChatEntrance();
-  const id = useId23();
-  const bodyRef = useRef37(null);
-  const contentRef = useRef37(null);
-  const caretRef = useRef37(null);
+  const id = useId24();
+  const bodyRef = useRef38(null);
+  const contentRef = useRef38(null);
+  const caretRef = useRef38(null);
   const streaming = status === "streaming";
   useEffect29(() => conversation?.register(id), [conversation, id]);
   useStreamingCaret(bodyRef, contentRef, caretRef, streaming && from !== "system");
   if (from === "system") {
-    return /* @__PURE__ */ jsx69(
+    return /* @__PURE__ */ jsx76(
       "div",
       {
         ref,
         className: cx("ow-chat-message", "ow-chat-message--system", entering && "ow-chat-message--enter", className),
         ...props,
-        children: /* @__PURE__ */ jsxs51("span", { className: "ow-chat-message__system-text", children: [
+        children: /* @__PURE__ */ jsxs56("span", { className: "ow-chat-message__system-text", children: [
           children,
-          time !== void 0 ? /* @__PURE__ */ jsxs51(Fragment10, { children: [
-            /* @__PURE__ */ jsx69("span", { "aria-hidden": "true", children: " \xB7 " }),
-            /* @__PURE__ */ jsx69(MessageTime, { time, locale })
+          time !== void 0 ? /* @__PURE__ */ jsxs56(Fragment12, { children: [
+            /* @__PURE__ */ jsx76("span", { "aria-hidden": "true", children: " \xB7 " }),
+            /* @__PURE__ */ jsx76(MessageTime, { time, locale })
           ] }) : null
         ] })
       }
     );
   }
   const isUser = from === "user";
-  const avatarNode = avatar !== void 0 ? avatar : isUser ? null : /* @__PURE__ */ jsx69(ChatAgentAvatar, {});
+  const avatarNode = avatar !== void 0 ? avatar : isUser ? null : /* @__PURE__ */ jsx76(ChatAgentAvatar, {});
   const hasHeader = name != null || time !== void 0;
   const errorText = error ?? (isUser ? "Couldn't send this message." : "The answer didn't finish.");
-  return /* @__PURE__ */ jsxs51(
+  return /* @__PURE__ */ jsxs56(
     "article",
     {
       ref,
@@ -7303,22 +7863,22 @@ var ChatMessage = /* @__PURE__ */ forwardRef27(function ChatMessage2({ from, chi
       "aria-busy": streaming || void 0,
       ...props,
       children: [
-        avatarNode != null && avatarNode !== false ? /* @__PURE__ */ jsx69("div", { className: "ow-chat-message__avatar", children: avatarNode }) : null,
-        /* @__PURE__ */ jsxs51("div", { className: "ow-chat-message__main", children: [
-          hasHeader ? /* @__PURE__ */ jsxs51("div", { className: "ow-chat-message__header", children: [
-            name != null ? /* @__PURE__ */ jsx69("span", { className: "ow-chat-message__name", children: name }) : /* @__PURE__ */ jsx69("span", { className: "ow-visually-hidden", children: isUser ? "You" : "Agent" }),
-            time !== void 0 ? /* @__PURE__ */ jsx69(MessageTime, { time, locale }) : null
-          ] }) : /* @__PURE__ */ jsx69("span", { className: "ow-visually-hidden", children: isUser ? "You" : "Agent" }),
-          /* @__PURE__ */ jsxs51("div", { ref: bodyRef, className: "ow-chat-message__body", children: [
-            /* @__PURE__ */ jsx69("div", { ref: contentRef, className: "ow-chat-message__content", children }),
-            streaming ? /* @__PURE__ */ jsx69("span", { ref: caretRef, className: "ow-chat-message__caret", "aria-hidden": "true" }) : null
+        avatarNode != null && avatarNode !== false ? /* @__PURE__ */ jsx76("div", { className: "ow-chat-message__avatar", children: avatarNode }) : null,
+        /* @__PURE__ */ jsxs56("div", { className: "ow-chat-message__main", children: [
+          hasHeader ? /* @__PURE__ */ jsxs56("div", { className: "ow-chat-message__header", children: [
+            name != null ? /* @__PURE__ */ jsx76("span", { className: "ow-chat-message__name", children: name }) : /* @__PURE__ */ jsx76("span", { className: "ow-visually-hidden", children: isUser ? "You" : "Agent" }),
+            time !== void 0 ? /* @__PURE__ */ jsx76(MessageTime, { time, locale }) : null
+          ] }) : /* @__PURE__ */ jsx76("span", { className: "ow-visually-hidden", children: isUser ? "You" : "Agent" }),
+          /* @__PURE__ */ jsxs56("div", { ref: bodyRef, className: "ow-chat-message__body", children: [
+            /* @__PURE__ */ jsx76("div", { ref: contentRef, className: "ow-chat-message__content", children }),
+            streaming ? /* @__PURE__ */ jsx76("span", { ref: caretRef, className: "ow-chat-message__caret", "aria-hidden": "true" }) : null
           ] }),
-          status === "error" ? /* @__PURE__ */ jsxs51("div", { className: cx("ow-chat-message__error", onRetry && "ow-chat-message__error--retry"), children: [
-            /* @__PURE__ */ jsx69(CircleAlertIcon, { size: 16, className: "ow-chat-message__error-icon" }),
-            /* @__PURE__ */ jsx69("span", { className: "ow-chat-message__error-text", children: errorText }),
-            onRetry ? /* @__PURE__ */ jsx69(Button, { size: "sm", startIcon: /* @__PURE__ */ jsx69(RotateCcwIcon, { size: 16 }), onClick: onRetry, children: retryLabel }) : null
+          status === "error" ? /* @__PURE__ */ jsxs56("div", { className: cx("ow-chat-message__error", onRetry && "ow-chat-message__error--retry"), children: [
+            /* @__PURE__ */ jsx76(CircleAlertIcon, { size: 16, className: "ow-chat-message__error-icon" }),
+            /* @__PURE__ */ jsx76("span", { className: "ow-chat-message__error-text", children: errorText }),
+            onRetry ? /* @__PURE__ */ jsx76(Button, { size: "sm", startIcon: /* @__PURE__ */ jsx76(RotateCcwIcon, { size: 16 }), onClick: onRetry, children: retryLabel }) : null
           ] }) : null,
-          actions && !streaming ? /* @__PURE__ */ jsx69("div", { className: "ow-chat-message__actions", children: actions }) : null
+          actions && !streaming ? /* @__PURE__ */ jsx76("div", { className: "ow-chat-message__actions", children: actions }) : null
         ] })
       ]
     }
@@ -7326,12 +7886,12 @@ var ChatMessage = /* @__PURE__ */ forwardRef27(function ChatMessage2({ from, chi
 });
 var defaultLabels = { copy: "Copy", copied: "Copied", edit: "Edit", retry: "Retry", good: "Good response", bad: "Bad response" };
 function CopyAction({ text, label, copiedLabel }) {
-  const [copied, setCopied] = useState31(false);
-  const timer = useRef37(0);
+  const [copied, setCopied] = useState35(false);
+  const timer = useRef38(0);
   useEffect29(() => () => window.clearTimeout(timer.current), []);
   const current = copied ? copiedLabel : label;
-  return /* @__PURE__ */ jsxs51(Fragment10, { children: [
-    /* @__PURE__ */ jsx69(Tooltip, { label: current, children: /* @__PURE__ */ jsx69(
+  return /* @__PURE__ */ jsxs56(Fragment12, { children: [
+    /* @__PURE__ */ jsx76(Tooltip, { label: current, children: /* @__PURE__ */ jsx76(
       Button,
       {
         variant: "ghost",
@@ -7346,13 +7906,13 @@ function CopyAction({ text, label, copiedLabel }) {
             timer.current = window.setTimeout(() => setCopied(false), 2e3);
           }
         },
-        children: /* @__PURE__ */ jsxs51("span", { className: "ow-chat-actions__copy-icon", children: [
-          /* @__PURE__ */ jsx69(CopyIcon, { size: 16 }),
-          /* @__PURE__ */ jsx69(CheckIcon, { size: 16 })
+        children: /* @__PURE__ */ jsxs56("span", { className: "ow-chat-actions__copy-icon", children: [
+          /* @__PURE__ */ jsx76(CopyIcon, { size: 16 }),
+          /* @__PURE__ */ jsx76(CheckIcon, { size: 16 })
         ] })
       }
     ) }),
-    /* @__PURE__ */ jsx69("span", { className: "ow-visually-hidden", "aria-live": "polite", children: copied ? copiedLabel : "" })
+    /* @__PURE__ */ jsx76("span", { className: "ow-visually-hidden", "aria-live": "polite", children: copied ? copiedLabel : "" })
   ] });
 }
 function ChatMessageActions({
@@ -7371,7 +7931,7 @@ function ChatMessageActions({
   const [current, setCurrent] = useControllableState(rating, defaultRating, onRate);
   const rate = (value, label, Icon) => {
     const pressed = current === value;
-    return /* @__PURE__ */ jsx69(Tooltip, { label, children: /* @__PURE__ */ jsx69(
+    return /* @__PURE__ */ jsx76(Tooltip, { label, children: /* @__PURE__ */ jsx76(
       ToggleButton,
       {
         variant: "ghost",
@@ -7381,15 +7941,15 @@ function ChatMessageActions({
         pressed,
         className: "ow-chat-actions__rate",
         onPressedChange: () => setCurrent(pressed ? null : value),
-        children: /* @__PURE__ */ jsx69(Icon, { size: 16 })
+        children: /* @__PURE__ */ jsx76(Icon, { size: 16 })
       }
     ) });
   };
-  return /* @__PURE__ */ jsxs51(Toolbar, { variant: "plain", size: "sm", "aria-label": ariaLabel, className: cx("ow-chat-actions", className), children: [
-    text !== void 0 ? /* @__PURE__ */ jsx69(CopyAction, { text, label: words.copy, copiedLabel: words.copied }) : null,
-    onEdit ? /* @__PURE__ */ jsx69(Tooltip, { label: words.edit, children: /* @__PURE__ */ jsx69(Button, { variant: "ghost", size: "sm", iconOnly: true, "aria-label": words.edit, onClick: onEdit, children: /* @__PURE__ */ jsx69(PencilIcon, { size: 16 }) }) }) : null,
-    onRetry ? /* @__PURE__ */ jsx69(Tooltip, { label: words.retry, children: /* @__PURE__ */ jsx69(Button, { variant: "ghost", size: "sm", iconOnly: true, "aria-label": words.retry, onClick: onRetry, children: /* @__PURE__ */ jsx69(RotateCcwIcon, { size: 16 }) }) }) : null,
-    onRate ? /* @__PURE__ */ jsxs51(Fragment10, { children: [
+  return /* @__PURE__ */ jsxs56(Toolbar, { variant: "plain", size: "sm", "aria-label": ariaLabel, className: cx("ow-chat-actions", className), children: [
+    text !== void 0 ? /* @__PURE__ */ jsx76(CopyAction, { text, label: words.copy, copiedLabel: words.copied }) : null,
+    onEdit ? /* @__PURE__ */ jsx76(Tooltip, { label: words.edit, children: /* @__PURE__ */ jsx76(Button, { variant: "ghost", size: "sm", iconOnly: true, "aria-label": words.edit, onClick: onEdit, children: /* @__PURE__ */ jsx76(PencilIcon, { size: 16 }) }) }) : null,
+    onRetry ? /* @__PURE__ */ jsx76(Tooltip, { label: words.retry, children: /* @__PURE__ */ jsx76(Button, { variant: "ghost", size: "sm", iconOnly: true, "aria-label": words.retry, onClick: onRetry, children: /* @__PURE__ */ jsx76(RotateCcwIcon, { size: 16 }) }) }) : null,
+    onRate ? /* @__PURE__ */ jsxs56(Fragment12, { children: [
       rate("up", words.good, ThumbsUpIcon),
       rate("down", words.bad, ThumbsDownIcon)
     ] }) : null,
@@ -7398,31 +7958,31 @@ function ChatMessageActions({
 }
 
 // src/components/Chat/ChatLoader.tsx
-import { jsx as jsx70, jsxs as jsxs52 } from "react/jsx-runtime";
+import { jsx as jsx77, jsxs as jsxs57 } from "react/jsx-runtime";
 function ChatLoader({ label, inline = false, name, avatar, srLabel = "Working\u2026", className }) {
   const entering = useChatEntrance();
-  const indicator = label != null ? /* @__PURE__ */ jsx70(TextShimmer, { className: "ow-chat-loader__label", children: label }) : /* @__PURE__ */ jsxs52("span", { className: "ow-chat-loader__dots", children: [
-    /* @__PURE__ */ jsx70("span", { className: "ow-chat-loader__dot", "aria-hidden": "true" }),
-    /* @__PURE__ */ jsx70("span", { className: "ow-chat-loader__dot", "aria-hidden": "true" }),
-    /* @__PURE__ */ jsx70("span", { className: "ow-chat-loader__dot", "aria-hidden": "true" }),
-    /* @__PURE__ */ jsx70("span", { className: "ow-visually-hidden", children: srLabel })
+  const indicator = label != null ? /* @__PURE__ */ jsx77(TextShimmer, { className: "ow-chat-loader__label", children: label }) : /* @__PURE__ */ jsxs57("span", { className: "ow-chat-loader__dots", children: [
+    /* @__PURE__ */ jsx77("span", { className: "ow-chat-loader__dot", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx77("span", { className: "ow-chat-loader__dot", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx77("span", { className: "ow-chat-loader__dot", "aria-hidden": "true" }),
+    /* @__PURE__ */ jsx77("span", { className: "ow-visually-hidden", children: srLabel })
   ] });
   if (inline) {
-    return /* @__PURE__ */ jsx70("span", { role: "status", className: cx("ow-chat-loader", "ow-chat-loader--inline", className), children: indicator });
+    return /* @__PURE__ */ jsx77("span", { role: "status", className: cx("ow-chat-loader", "ow-chat-loader--inline", className), children: indicator });
   }
-  const avatarNode = avatar === void 0 ? /* @__PURE__ */ jsx70(ChatAgentAvatar, {}) : avatar;
-  return /* @__PURE__ */ jsxs52("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__ */ jsx70("div", { className: "ow-chat-message__avatar", children: avatarNode }) : null,
-    /* @__PURE__ */ jsxs52("div", { className: "ow-chat-message__main", children: [
-      name != null ? /* @__PURE__ */ jsx70("div", { className: "ow-chat-message__header", children: /* @__PURE__ */ jsx70("span", { className: "ow-chat-message__name", children: name }) }) : null,
-      /* @__PURE__ */ jsx70("div", { className: "ow-chat-loader__line", children: indicator })
+  const avatarNode = avatar === void 0 ? /* @__PURE__ */ jsx77(ChatAgentAvatar, {}) : avatar;
+  return /* @__PURE__ */ jsxs57("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__ */ jsx77("div", { className: "ow-chat-message__avatar", children: avatarNode }) : null,
+    /* @__PURE__ */ jsxs57("div", { className: "ow-chat-message__main", children: [
+      name != null ? /* @__PURE__ */ jsx77("div", { className: "ow-chat-message__header", children: /* @__PURE__ */ jsx77("span", { className: "ow-chat-message__name", children: name }) }) : null,
+      /* @__PURE__ */ jsx77("div", { className: "ow-chat-loader__line", children: indicator })
     ] })
   ] });
 }
 
 // src/components/ChatTool/ChatTool.tsx
-import { forwardRef as forwardRef28, useEffect as useEffect30, useId as useId24, useRef as useRef38, useState as useState32 } from "react";
-import { Fragment as Fragment11, jsx as jsx71, jsxs as jsxs53 } from "react/jsx-runtime";
+import { forwardRef as forwardRef28, useEffect as useEffect30, useId as useId25, useRef as useRef39, useState as useState36 } from "react";
+import { Fragment as Fragment13, jsx as jsx78, jsxs as jsxs58 } from "react/jsx-runtime";
 var statusWords = {
   pending: "Not started",
   running: "Running",
@@ -7432,7 +7992,7 @@ var statusWords = {
   cancelled: "Cancelled"
 };
 function SlashIcon() {
-  return /* @__PURE__ */ jsx71(
+  return /* @__PURE__ */ jsx78(
     "svg",
     {
       width: 12,
@@ -7444,12 +8004,12 @@ function SlashIcon() {
       strokeLinecap: "round",
       "aria-hidden": "true",
       focusable: "false",
-      children: /* @__PURE__ */ jsx71("path", { d: "M7 17 17 7" })
+      children: /* @__PURE__ */ jsx78("path", { d: "M7 17 17 7" })
     }
   );
 }
 function ExclamationIcon() {
-  return /* @__PURE__ */ jsxs53(
+  return /* @__PURE__ */ jsxs58(
     "svg",
     {
       width: 12,
@@ -7462,41 +8022,41 @@ function ExclamationIcon() {
       "aria-hidden": "true",
       focusable: "false",
       children: [
-        /* @__PURE__ */ jsx71("path", { d: "M12 5v9" }),
-        /* @__PURE__ */ jsx71("path", { d: "M12 19h.01" })
+        /* @__PURE__ */ jsx78("path", { d: "M12 5v9" }),
+        /* @__PURE__ */ jsx78("path", { d: "M12 19h.01" })
       ]
     }
   );
 }
 function ChatStatusMarker({ status, icon: icon2 }) {
   const showsIcon = Boolean(icon2) && (status === "success" || status === "pending");
-  const glyph = status === "running" ? /* @__PURE__ */ jsx71(Spinner, { size: "sm", label: "" }) : status === "error" ? /* @__PURE__ */ jsx71(XIcon, { size: 12, strokeWidth: 3 }) : status === "approval" ? /* @__PURE__ */ jsx71(ExclamationIcon, {}) : status === "cancelled" ? /* @__PURE__ */ jsx71(SlashIcon, {}) : showsIcon ? icon2 : status === "success" ? /* @__PURE__ */ jsx71(CheckIcon, { size: 12, strokeWidth: 3 }) : null;
-  return /* @__PURE__ */ jsxs53("span", { className: cx("ow-chat-status", `ow-chat-status--${status}`, showsIcon && "ow-chat-status--icon"), children: [
-    /* @__PURE__ */ jsx71("span", { className: "ow-chat-status__glyph", "aria-hidden": "true", children: glyph }),
-    /* @__PURE__ */ jsxs53("span", { className: "ow-visually-hidden", children: [
+  const glyph = status === "running" ? /* @__PURE__ */ jsx78(Spinner, { size: "sm", label: "" }) : status === "error" ? /* @__PURE__ */ jsx78(XIcon, { size: 12, strokeWidth: 3 }) : status === "approval" ? /* @__PURE__ */ jsx78(ExclamationIcon, {}) : status === "cancelled" ? /* @__PURE__ */ jsx78(SlashIcon, {}) : showsIcon ? icon2 : status === "success" ? /* @__PURE__ */ jsx78(CheckIcon, { size: 12, strokeWidth: 3 }) : null;
+  return /* @__PURE__ */ jsxs58("span", { className: cx("ow-chat-status", `ow-chat-status--${status}`, showsIcon && "ow-chat-status--icon"), children: [
+    /* @__PURE__ */ jsx78("span", { className: "ow-chat-status__glyph", "aria-hidden": "true", children: glyph }),
+    /* @__PURE__ */ jsxs58("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__ */ jsx71("time", { dateTime: `PT${Math.max(0, Math.round(ms)) / 1e3}S`, className, children: formatDuration(ms, locale) });
+  return /* @__PURE__ */ jsx78("time", { dateTime: `PT${Math.max(0, Math.round(ms)) / 1e3}S`, className, children: formatDuration(ms, locale) });
 }
 function useStatusExpansion({
   expanded,
@@ -7507,8 +8067,8 @@ function useStatusExpansion({
   initial = wantsOpen
 }) {
   const [isOpen, setOpen] = useControllableState(expanded, defaultExpanded ?? initial, onExpandedChange);
-  const touched = useRef38(false);
-  const previous = useRef38(wantsOpen);
+  const touched = useRef39(false);
+  const previous = useRef39(wantsOpen);
   useEffect30(() => {
     if (previous.current === wantsOpen) return;
     previous.current = wantsOpen;
@@ -7535,11 +8095,11 @@ function ChatCollapse({
   className,
   children
 }) {
-  const ref = useRef38(null);
+  const ref = useRef39(null);
   useEffect30(() => {
     if (ref.current) ref.current.inert = !open;
   }, [open]);
-  return /* @__PURE__ */ jsx71("div", { ref, id, className: cx("ow-chat-collapse", bleed && "ow-chat-collapse--bleed"), "data-open": open, children: /* @__PURE__ */ jsx71("div", { className: "ow-chat-collapse__clip", children: /* @__PURE__ */ jsx71("div", { className, children }) }) });
+  return /* @__PURE__ */ jsx78("div", { ref, id, className: cx("ow-chat-collapse", bleed && "ow-chat-collapse--bleed"), "data-open": open, children: /* @__PURE__ */ jsx78("div", { className: "ow-chat-collapse__clip", children: /* @__PURE__ */ jsx78("div", { className, children }) }) });
 }
 var codeMaxHeight = 280;
 function formatInput(input) {
@@ -7572,12 +8132,12 @@ var ChatTool = /* @__PURE__ */ forwardRef28(function ChatTool2({
   className,
   ...props
 }, ref) {
-  const id = useId24();
-  const rootRef = useRef38(null);
-  const triggerRef = useRef38(null);
-  const messageRef = useRef38(null);
-  const decided = useRef38(false);
-  const [announcement, setAnnouncement] = useState32("");
+  const id = useId25();
+  const rootRef = useRef39(null);
+  const triggerRef = useRef39(null);
+  const messageRef = useRef39(null);
+  const decided = useRef39(false);
+  const [announcement, setAnnouncement] = useState36("");
   const needsApproval = status === "approval";
   const [isOpen, toggle] = useStatusExpansion({
     expanded,
@@ -7608,23 +8168,23 @@ var ChatTool = /* @__PURE__ */ forwardRef28(function ChatTool2({
     if (!active || active === document.body) (triggerRef.current ?? rootRef.current)?.focus();
   }, [needsApproval]);
   const running = status === "running";
-  const header = /* @__PURE__ */ jsxs53(Fragment11, { children: [
-    /* @__PURE__ */ jsx71(ChatStatusMarker, { status }),
-    icon2 ? /* @__PURE__ */ jsx71("span", { className: "ow-chat-tool__icon", "aria-hidden": "true", children: icon2 }) : null,
-    /* @__PURE__ */ jsxs53("span", { className: "ow-chat-tool__main", children: [
-      /* @__PURE__ */ jsxs53("span", { className: "ow-chat-tool__heading", children: [
-        /* @__PURE__ */ jsx71("span", { className: "ow-chat-tool__title", children: running ? /* @__PURE__ */ jsx71(TextShimmer, { children: title }) : title }),
-        name ? /* @__PURE__ */ jsx71(Code, { className: "ow-chat-tool__name", children: name }) : null
+  const header = /* @__PURE__ */ jsxs58(Fragment13, { children: [
+    /* @__PURE__ */ jsx78(ChatStatusMarker, { status }),
+    icon2 ? /* @__PURE__ */ jsx78("span", { className: "ow-chat-tool__icon", "aria-hidden": "true", children: icon2 }) : null,
+    /* @__PURE__ */ jsxs58("span", { className: "ow-chat-tool__main", children: [
+      /* @__PURE__ */ jsxs58("span", { className: "ow-chat-tool__heading", children: [
+        /* @__PURE__ */ jsx78("span", { className: "ow-chat-tool__title", children: running ? /* @__PURE__ */ jsx78(TextShimmer, { children: title }) : title }),
+        name ? /* @__PURE__ */ jsx78(Code, { className: "ow-chat-tool__name", children: name }) : null
       ] }),
-      hasMeta ? /* @__PURE__ */ jsxs53("span", { className: "ow-chat-tool__meta", children: [
-        summary ? /* @__PURE__ */ jsx71("span", { className: "ow-chat-tool__summary", children: summary }) : null,
-        summary && duration !== void 0 ? /* @__PURE__ */ jsx71("span", { className: "ow-chat-tool__dot", "aria-hidden": "true", children: "\xB7" }) : null,
-        duration !== void 0 ? /* @__PURE__ */ jsx71(ChatDuration, { ms: duration, locale, className: "ow-chat-tool__duration" }) : null
+      hasMeta ? /* @__PURE__ */ jsxs58("span", { className: "ow-chat-tool__meta", children: [
+        summary ? /* @__PURE__ */ jsx78("span", { className: "ow-chat-tool__summary", children: summary }) : null,
+        summary && duration !== void 0 ? /* @__PURE__ */ jsx78("span", { className: "ow-chat-tool__dot", "aria-hidden": "true", children: "\xB7" }) : null,
+        duration !== void 0 ? /* @__PURE__ */ jsx78(ChatDuration, { ms: duration, locale, className: "ow-chat-tool__duration" }) : null
       ] }) : null
     ] }),
-    hasDetails ? /* @__PURE__ */ jsx71("span", { className: "ow-chat-tool__chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx71(ChevronRightIcon, { size: 14 }) }) : null
+    hasDetails ? /* @__PURE__ */ jsx78("span", { className: "ow-chat-tool__chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx78(ChevronRightIcon, { size: 14 }) }) : null
   ] });
-  return /* @__PURE__ */ jsxs53(
+  return /* @__PURE__ */ jsxs58(
     "div",
     {
       ref: (element) => {
@@ -7639,7 +8199,7 @@ var ChatTool = /* @__PURE__ */ forwardRef28(function ChatTool2({
       tabIndex: hasDetails ? void 0 : -1,
       ...props,
       children: [
-        hasDetails ? /* @__PURE__ */ jsx71(
+        hasDetails ? /* @__PURE__ */ jsx78(
           "button",
           {
             ref: triggerRef,
@@ -7651,28 +8211,28 @@ var ChatTool = /* @__PURE__ */ forwardRef28(function ChatTool2({
             onClick: toggle,
             children: header
           }
-        ) : /* @__PURE__ */ jsx71("div", { className: "ow-chat-tool__header", children: header }),
-        hasDetails ? /* @__PURE__ */ jsxs53(ChatCollapse, { id: `${id}-details`, open: isOpen, className: "ow-chat-tool__details", children: [
-          hasInput ? /* @__PURE__ */ jsxs53("div", { className: "ow-chat-tool__section", children: [
-            /* @__PURE__ */ jsx71("span", { className: "ow-chat-tool__label", children: "Input" }),
-            typeof input === "string" && !input.includes("\n") ? /* @__PURE__ */ jsx71(Snippet, { value: input, prompt: null }) : /* @__PURE__ */ jsx71(CodeBlock, { code: formatInput(input), language: typeof input === "string" ? void 0 : "json", maxHeight: codeMaxHeight })
+        ) : /* @__PURE__ */ jsx78("div", { className: "ow-chat-tool__header", children: header }),
+        hasDetails ? /* @__PURE__ */ jsxs58(ChatCollapse, { id: `${id}-details`, open: isOpen, className: "ow-chat-tool__details", children: [
+          hasInput ? /* @__PURE__ */ jsxs58("div", { className: "ow-chat-tool__section", children: [
+            /* @__PURE__ */ jsx78("span", { className: "ow-chat-tool__label", children: "Input" }),
+            typeof input === "string" && !input.includes("\n") ? /* @__PURE__ */ jsx78(Snippet, { value: input, prompt: null }) : /* @__PURE__ */ jsx78(CodeBlock, { code: formatInput(input), language: typeof input === "string" ? void 0 : "json", maxHeight: codeMaxHeight })
           ] }) : null,
-          hasOutput ? /* @__PURE__ */ jsxs53("div", { className: "ow-chat-tool__section", children: [
-            /* @__PURE__ */ jsx71("span", { className: "ow-chat-tool__label", children: "Output" }),
-            typeof output === "string" ? /* @__PURE__ */ jsx71(CodeBlock, { code: output, maxHeight: codeMaxHeight }) : /* @__PURE__ */ jsx71("div", { className: "ow-chat-tool__output", children: output })
+          hasOutput ? /* @__PURE__ */ jsxs58("div", { className: "ow-chat-tool__section", children: [
+            /* @__PURE__ */ jsx78("span", { className: "ow-chat-tool__label", children: "Output" }),
+            typeof output === "string" ? /* @__PURE__ */ jsx78(CodeBlock, { code: output, maxHeight: codeMaxHeight }) : /* @__PURE__ */ jsx78("div", { className: "ow-chat-tool__output", children: output })
           ] }) : null,
-          hasError ? /* @__PURE__ */ jsxs53("div", { className: "ow-chat-tool__section", children: [
-            /* @__PURE__ */ jsx71("span", { className: "ow-chat-tool__label", children: "Error" }),
-            /* @__PURE__ */ jsx71("div", { className: "ow-chat-tool__error", children: error })
+          hasError ? /* @__PURE__ */ jsxs58("div", { className: "ow-chat-tool__section", children: [
+            /* @__PURE__ */ jsx78("span", { className: "ow-chat-tool__label", children: "Error" }),
+            /* @__PURE__ */ jsx78("div", { className: "ow-chat-tool__error", children: error })
           ] }) : null
         ] }) : null,
-        needsApproval ? /* @__PURE__ */ jsxs53("div", { className: "ow-chat-tool__approval", role: "group", "aria-labelledby": `${id}-request`, children: [
-          /* @__PURE__ */ jsx71("p", { ref: messageRef, id: `${id}-request`, className: "ow-chat-tool__request", children: approvalMessage ?? (name ? /* @__PURE__ */ jsxs53(Fragment11, { children: [
+        needsApproval ? /* @__PURE__ */ jsxs58("div", { className: "ow-chat-tool__approval", role: "group", "aria-labelledby": `${id}-request`, children: [
+          /* @__PURE__ */ jsx78("p", { ref: messageRef, id: `${id}-request`, className: "ow-chat-tool__request", children: approvalMessage ?? (name ? /* @__PURE__ */ jsxs58(Fragment13, { children: [
             "Wants to run ",
-            /* @__PURE__ */ jsx71(Code, { children: name })
+            /* @__PURE__ */ jsx78(Code, { children: name })
           ] }) : "Wants to go ahead") }),
-          /* @__PURE__ */ jsxs53("div", { className: "ow-chat-tool__actions", children: [
-            /* @__PURE__ */ jsx71(
+          /* @__PURE__ */ jsxs58("div", { className: "ow-chat-tool__actions", children: [
+            /* @__PURE__ */ jsx78(
               Button,
               {
                 variant: "primary",
@@ -7684,7 +8244,7 @@ var ChatTool = /* @__PURE__ */ forwardRef28(function ChatTool2({
                 children: approveLabel
               }
             ),
-            /* @__PURE__ */ jsx71(
+            /* @__PURE__ */ jsx78(
               Button,
               {
                 size: "sm",
@@ -7697,15 +8257,15 @@ var ChatTool = /* @__PURE__ */ forwardRef28(function ChatTool2({
             )
           ] })
         ] }) : null,
-        /* @__PURE__ */ jsx71("span", { className: "ow-visually-hidden", "aria-live": "polite", children: announcement })
+        /* @__PURE__ */ jsx78("span", { className: "ow-visually-hidden", "aria-live": "polite", children: announcement })
       ]
     }
   );
 });
 
 // src/components/ChainOfThought/ChainOfThought.tsx
-import { forwardRef as forwardRef29, useId as useId25 } from "react";
-import { jsx as jsx72, jsxs as jsxs54 } from "react/jsx-runtime";
+import { forwardRef as forwardRef29, useId as useId26 } from "react";
+import { jsx as jsx79, jsxs as jsxs59 } from "react/jsx-runtime";
 var plural = (count, word) => `${count} ${word}${count === 1 ? "" : "s"}`;
 var ChainOfThought = /* @__PURE__ */ forwardRef29(function ChainOfThought2({
   steps = [],
@@ -7721,7 +8281,7 @@ var ChainOfThought = /* @__PURE__ */ forwardRef29(function ChainOfThought2({
   className,
   ...props
 }, ref) {
-  const id = useId25();
+  const id = useId26();
   const running = status === "running";
   const [isOpen, toggle] = useStatusExpansion({
     expanded,
@@ -7737,30 +8297,30 @@ var ChainOfThought = /* @__PURE__ */ forwardRef29(function ChainOfThought2({
   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__ */ jsxs54("span", { className: "ow-chat-toggle__text", children: [
-    /* @__PURE__ */ jsx72("span", { className: "ow-chain-of-thought__label", children: running ? /* @__PURE__ */ jsx72(TextShimmer, { children: heading }) : heading }),
-    count ? /* @__PURE__ */ jsxs54("span", { className: "ow-chat-toggle__meta", children: [
-      /* @__PURE__ */ jsx72("span", { "aria-hidden": "true", children: "\xB7 " }),
+  const headerText = /* @__PURE__ */ jsxs59("span", { className: "ow-chat-toggle__text", children: [
+    /* @__PURE__ */ jsx79("span", { className: "ow-chain-of-thought__label", children: running ? /* @__PURE__ */ jsx79(TextShimmer, { children: heading }) : heading }),
+    count ? /* @__PURE__ */ jsxs59("span", { className: "ow-chat-toggle__meta", children: [
+      /* @__PURE__ */ jsx79("span", { "aria-hidden": "true", children: "\xB7 " }),
       count,
-      failed > 0 ? /* @__PURE__ */ jsxs54("span", { className: "ow-chain-of-thought__failed", children: [
+      failed > 0 ? /* @__PURE__ */ jsxs59("span", { className: "ow-chain-of-thought__failed", children: [
         ", ",
         failed,
         " failed"
       ] }) : null
     ] }) : null
   ] });
-  return /* @__PURE__ */ jsxs54("div", { ref, className: cx("ow-chain-of-thought", className), "data-status": status, "aria-busy": running || void 0, ...props, children: [
-    hasBody ? /* @__PURE__ */ jsxs54("button", { type: "button", className: "ow-chat-toggle", "aria-expanded": isOpen, "aria-controls": `${id}-body`, onClick: toggle, children: [
-      /* @__PURE__ */ jsx72("span", { className: "ow-chat-toggle__chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx72(ChevronRightIcon, { size: 14 }) }),
+  return /* @__PURE__ */ jsxs59("div", { ref, className: cx("ow-chain-of-thought", className), "data-status": status, "aria-busy": running || void 0, ...props, children: [
+    hasBody ? /* @__PURE__ */ jsxs59("button", { type: "button", className: "ow-chat-toggle", "aria-expanded": isOpen, "aria-controls": `${id}-body`, onClick: toggle, children: [
+      /* @__PURE__ */ jsx79("span", { className: "ow-chat-toggle__chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx79(ChevronRightIcon, { size: 14 }) }),
       headerText
-    ] }) : /* @__PURE__ */ jsx72("div", { className: "ow-chat-toggle ow-chain-of-thought__static", children: headerText }),
-    hasBody ? /* @__PURE__ */ jsxs54(ChatCollapse, { id: `${id}-body`, open: isOpen, bleed: true, className: "ow-chain-of-thought__body", children: [
-      hasReasoning ? /* @__PURE__ */ jsx72("div", { className: "ow-chain-of-thought__reasoning", children }) : null,
-      steps.length > 0 ? /* @__PURE__ */ jsx72("ol", { className: "ow-chain-of-thought__steps", children: steps.map((step) => /* @__PURE__ */ jsxs54("li", { className: "ow-chain-of-thought__step", "data-status": step.status, children: [
-        /* @__PURE__ */ jsx72(ChatStatusMarker, { status: step.status, icon: step.icon }),
-        /* @__PURE__ */ jsxs54("div", { className: "ow-chain-of-thought__step-body", children: [
-          /* @__PURE__ */ jsx72("span", { className: "ow-chain-of-thought__step-title", children: step.status === "running" ? /* @__PURE__ */ jsx72(TextShimmer, { children: step.title }) : step.title }),
-          step.detail !== void 0 && step.detail !== null ? /* @__PURE__ */ jsx72("div", { className: "ow-chain-of-thought__detail", children: step.detail }) : null
+    ] }) : /* @__PURE__ */ jsx79("div", { className: "ow-chat-toggle ow-chain-of-thought__static", children: headerText }),
+    hasBody ? /* @__PURE__ */ jsxs59(ChatCollapse, { id: `${id}-body`, open: isOpen, bleed: true, className: "ow-chain-of-thought__body", children: [
+      hasReasoning ? /* @__PURE__ */ jsx79("div", { className: "ow-chain-of-thought__reasoning", children }) : null,
+      steps.length > 0 ? /* @__PURE__ */ jsx79("ol", { className: "ow-chain-of-thought__steps", children: steps.map((step) => /* @__PURE__ */ jsxs59("li", { className: "ow-chain-of-thought__step", "data-status": step.status, children: [
+        /* @__PURE__ */ jsx79(ChatStatusMarker, { status: step.status, icon: step.icon }),
+        /* @__PURE__ */ jsxs59("div", { className: "ow-chain-of-thought__step-body", children: [
+          /* @__PURE__ */ jsx79("span", { className: "ow-chain-of-thought__step-title", children: step.status === "running" ? /* @__PURE__ */ jsx79(TextShimmer, { children: step.title }) : step.title }),
+          step.detail !== void 0 && step.detail !== null ? /* @__PURE__ */ jsx79("div", { className: "ow-chain-of-thought__detail", children: step.detail }) : null
         ] })
       ] }, step.id)) }) : null
     ] }) : null
@@ -7768,8 +8328,8 @@ var ChainOfThought = /* @__PURE__ */ forwardRef29(function ChainOfThought2({
 });
 
 // src/components/ChatSource/ChatSource.tsx
-import { forwardRef as forwardRef30, useCallback as useCallback11, useEffect as useEffect31, useId as useId26, useRef as useRef39, useState as useState33 } from "react";
-import { Fragment as Fragment12, jsx as jsx73, jsxs as jsxs55 } from "react/jsx-runtime";
+import { forwardRef as forwardRef30, useCallback as useCallback12, useEffect as useEffect31, useId as useId27, useRef as useRef40, useState as useState37 } from "react";
+import { Fragment as Fragment14, jsx as jsx80, jsxs as jsxs60 } from "react/jsx-runtime";
 var openDelay = 250;
 var closeDelay = 150;
 var ChatSource = /* @__PURE__ */ forwardRef30(function ChatSource2({
@@ -7787,13 +8347,13 @@ var ChatSource = /* @__PURE__ */ forwardRef30(function ChatSource2({
   "aria-label": ariaLabel,
   className
 }, ref) {
-  const id = useId26();
-  const wrapperRef = useRef39(null);
-  const chipRef = useRef39(null);
-  const cardRef = useRef39(null);
-  const timer = useRef39(0);
-  const pointer = useRef39("mouse");
-  const [open, setOpen] = useState33(false);
+  const id = useId27();
+  const wrapperRef = useRef40(null);
+  const chipRef = useRef40(null);
+  const cardRef = useRef40(null);
+  const timer = useRef40(0);
+  const pointer = useRef40("mouse");
+  const [open, setOpen] = useState37(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) => {
@@ -7801,7 +8361,7 @@ var ChatSource = /* @__PURE__ */ forwardRef30(function ChatSource2({
     if (delay === 0) setOpen(next);
     else timer.current = window.setTimeout(() => setOpen(next), delay);
   };
-  const close = useCallback11(() => {
+  const close = useCallback12(() => {
     window.clearTimeout(timer.current);
     setOpen(false);
   }, []);
@@ -7838,8 +8398,8 @@ var ChatSource = /* @__PURE__ */ forwardRef30(function ChatSource2({
       onClick?.(event);
     }
   };
-  const chipText = /* @__PURE__ */ jsx73("span", { className: "ow-chat-source__chip-text", children: index ?? label });
-  return /* @__PURE__ */ jsxs55(
+  const chipText = /* @__PURE__ */ jsx80("span", { className: "ow-chat-source__chip-text", children: index ?? label });
+  return /* @__PURE__ */ jsxs60(
     "span",
     {
       ref: wrapperRef,
@@ -7851,19 +8411,19 @@ var ChatSource = /* @__PURE__ */ forwardRef30(function ChatSource2({
         if (event.pointerType === "mouse") schedule(false, closeDelay);
       },
       children: [
-        href ? /* @__PURE__ */ jsx73("a", { href, ...externalProps, ...chipProps, children: chipText }) : /* @__PURE__ */ jsx73("button", { type: "button", ...chipProps, children: chipText }),
-        /* @__PURE__ */ jsxs55("span", { ref: cardRef, ...manualPopover, hidden: !mounted, "data-state": state, className: "ow-chat-source-card ow-floating", style, children: [
-          /* @__PURE__ */ jsxs55("span", { className: "ow-chat-source-card__header", children: [
-            icon2 ? /* @__PURE__ */ jsx73("span", { className: "ow-chat-source-card__icon", "aria-hidden": "true", children: icon2 }) : null,
-            /* @__PURE__ */ jsx73("span", { id: `${id}-title`, className: "ow-chat-source-card__title", children: title })
+        href ? /* @__PURE__ */ jsx80("a", { href, ...externalProps, ...chipProps, children: chipText }) : /* @__PURE__ */ jsx80("button", { type: "button", ...chipProps, children: chipText }),
+        /* @__PURE__ */ jsxs60("span", { ref: cardRef, ...manualPopover, hidden: !mounted, "data-state": state, className: "ow-chat-source-card ow-floating", style, children: [
+          /* @__PURE__ */ jsxs60("span", { className: "ow-chat-source-card__header", children: [
+            icon2 ? /* @__PURE__ */ jsx80("span", { className: "ow-chat-source-card__icon", "aria-hidden": "true", children: icon2 }) : null,
+            /* @__PURE__ */ jsx80("span", { id: `${id}-title`, className: "ow-chat-source-card__title", children: title })
           ] }),
-          source ? /* @__PURE__ */ jsx73("span", { id: `${id}-source`, className: "ow-chat-source-card__source", children: source }) : null,
-          snippet ? /* @__PURE__ */ jsx73("span", { id: `${id}-snippet`, className: cx("ow-chat-source-card__snippet", `ow-chat-source-card__snippet--${snippetFormat}`), children: snippet }) : null,
+          source ? /* @__PURE__ */ jsx80("span", { id: `${id}-source`, className: "ow-chat-source-card__source", children: source }) : null,
+          snippet ? /* @__PURE__ */ jsx80("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__ */ jsxs55("a", { href, ...externalProps, tabIndex: -1, className: cx(linkClassName({ variant: "standalone" }), "ow-chat-source-card__open"), children: [
+            /* @__PURE__ */ jsxs60("a", { href, ...externalProps, tabIndex: -1, className: cx(linkClassName({ variant: "standalone" }), "ow-chat-source-card__open"), children: [
               openLabel,
-              /* @__PURE__ */ jsx73(ArrowUpRightIcon, { size: 13 })
+              /* @__PURE__ */ jsx80(ArrowUpRightIcon, { size: 13 })
             ] })
           ) : null
         ] })
@@ -7872,33 +8432,33 @@ var ChatSource = /* @__PURE__ */ forwardRef30(function ChatSource2({
   );
 });
 var ChatSources = /* @__PURE__ */ forwardRef30(function ChatSources2({ sources, label, expanded, defaultExpanded = false, onExpandedChange, className, ...props }, ref) {
-  const id = useId26();
+  const id = useId27();
   const [isOpen, setOpen] = useControllableState(expanded, defaultExpanded, onExpandedChange);
   if (sources.length === 0) return null;
-  return /* @__PURE__ */ jsxs55("div", { ref, className: cx("ow-chat-sources", className), ...props, children: [
-    /* @__PURE__ */ jsxs55("button", { type: "button", className: "ow-chat-toggle", "aria-expanded": isOpen, "aria-controls": `${id}-list`, onClick: () => setOpen(!isOpen), children: [
-      /* @__PURE__ */ jsx73("span", { className: "ow-chat-toggle__chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx73(ChevronRightIcon, { size: 14 }) }),
-      /* @__PURE__ */ jsx73("span", { className: "ow-chat-toggle__text", children: label ?? `${sources.length} ${sources.length === 1 ? "source" : "sources"}` })
+  return /* @__PURE__ */ jsxs60("div", { ref, className: cx("ow-chat-sources", className), ...props, children: [
+    /* @__PURE__ */ jsxs60("button", { type: "button", className: "ow-chat-toggle", "aria-expanded": isOpen, "aria-controls": `${id}-list`, onClick: () => setOpen(!isOpen), children: [
+      /* @__PURE__ */ jsx80("span", { className: "ow-chat-toggle__chevron", "aria-hidden": "true", children: /* @__PURE__ */ jsx80(ChevronRightIcon, { size: 14 }) }),
+      /* @__PURE__ */ jsx80("span", { className: "ow-chat-toggle__text", children: label ?? `${sources.length} ${sources.length === 1 ? "source" : "sources"}` })
     ] }),
-    /* @__PURE__ */ jsx73(ChatCollapse, { id: `${id}-list`, open: isOpen, bleed: true, className: "ow-chat-sources__body", children: /* @__PURE__ */ jsx73("ul", { className: "ow-chat-sources__list", children: sources.map((item, position) => {
-      const content = /* @__PURE__ */ jsxs55(Fragment12, { children: [
-        /* @__PURE__ */ jsxs55("span", { className: "ow-chat-sources__lead", children: [
-          item.index !== void 0 ? /* @__PURE__ */ jsxs55("span", { className: "ow-chat-sources__index", children: [
-            /* @__PURE__ */ jsx73("span", { className: "ow-visually-hidden", children: "Source " }),
+    /* @__PURE__ */ jsx80(ChatCollapse, { id: `${id}-list`, open: isOpen, bleed: true, className: "ow-chat-sources__body", children: /* @__PURE__ */ jsx80("ul", { className: "ow-chat-sources__list", children: sources.map((item, position) => {
+      const content = /* @__PURE__ */ jsxs60(Fragment14, { children: [
+        /* @__PURE__ */ jsxs60("span", { className: "ow-chat-sources__lead", children: [
+          item.index !== void 0 ? /* @__PURE__ */ jsxs60("span", { className: "ow-chat-sources__index", children: [
+            /* @__PURE__ */ jsx80("span", { className: "ow-visually-hidden", children: "Source " }),
             item.index
           ] }) : null,
-          item.icon || item.index === void 0 ? /* @__PURE__ */ jsx73("span", { className: "ow-chat-sources__icon", "aria-hidden": "true", children: item.icon ?? /* @__PURE__ */ jsx73(FileIcon, { size: 15 }) }) : null
+          item.icon || item.index === void 0 ? /* @__PURE__ */ jsx80("span", { className: "ow-chat-sources__icon", "aria-hidden": "true", children: item.icon ?? /* @__PURE__ */ jsx80(FileIcon, { size: 15 }) }) : null
         ] }),
-        /* @__PURE__ */ jsxs55("span", { className: "ow-chat-sources__text", children: [
-          /* @__PURE__ */ jsx73("span", { className: "ow-chat-sources__title", children: item.title }),
-          item.source ? /* @__PURE__ */ jsx73("span", { className: "ow-chat-sources__source", children: item.source }) : null
+        /* @__PURE__ */ jsxs60("span", { className: "ow-chat-sources__text", children: [
+          /* @__PURE__ */ jsx80("span", { className: "ow-chat-sources__title", children: item.title }),
+          item.source ? /* @__PURE__ */ jsx80("span", { className: "ow-chat-sources__source", children: item.source }) : null
         ] }),
-        item.href && item.external ? /* @__PURE__ */ jsxs55(Fragment12, { children: [
-          /* @__PURE__ */ jsx73("span", { className: "ow-chat-sources__external", "aria-hidden": "true", children: /* @__PURE__ */ jsx73(ArrowUpRightIcon, { size: 14 }) }),
-          /* @__PURE__ */ jsx73("span", { className: "ow-visually-hidden", children: " (opens in a new tab)" })
+        item.href && item.external ? /* @__PURE__ */ jsxs60(Fragment14, { children: [
+          /* @__PURE__ */ jsx80("span", { className: "ow-chat-sources__external", "aria-hidden": "true", children: /* @__PURE__ */ jsx80(ArrowUpRightIcon, { size: 14 }) }),
+          /* @__PURE__ */ jsx80("span", { className: "ow-visually-hidden", children: " (opens in a new tab)" })
         ] }) : null
       ] });
-      return /* @__PURE__ */ jsx73("li", { children: item.href ? /* @__PURE__ */ jsx73(
+      return /* @__PURE__ */ jsx80("li", { children: item.href ? /* @__PURE__ */ jsx80(
         "a",
         {
           href: item.href,
@@ -7906,21 +8466,21 @@ var ChatSources = /* @__PURE__ */ forwardRef30(function ChatSources2({ sources,
           ...item.external ? { target: "_blank", rel: "noopener noreferrer" } : {},
           children: content
         }
-      ) : /* @__PURE__ */ jsx73("div", { className: "ow-chat-sources__card", children: content }) }, item.id ?? item.index ?? position);
+      ) : /* @__PURE__ */ jsx80("div", { className: "ow-chat-sources__card", children: content }) }, item.id ?? item.index ?? position);
     }) }) })
   ] });
 });
 
 // src/components/ColorPicker/ColorPicker.tsx
-import { forwardRef as forwardRef31, useCallback as useCallback12, useEffect as useEffect32, useId as useId27, useRef as useRef40, useState as useState34 } from "react";
+import { forwardRef as forwardRef31, useCallback as useCallback13, useEffect as useEffect32, useId as useId28, useRef as useRef41, useState as useState38 } from "react";
 import { HexAlphaColorPicker, HexColorInput, HexColorPicker } from "react-colorful";
-import { Fragment as Fragment13, jsx as jsx74, jsxs as jsxs56 } from "react/jsx-runtime";
+import { Fragment as Fragment15, jsx as jsx81, jsxs as jsxs61 } from "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,
@@ -7929,9 +8489,9 @@ function ColorPicker({
   "aria-label": ariaLabel = "Colour",
   className
 }) {
-  const [color, setColor] = useControllableState(value, defaultValue, onChange);
-  const [canPick, setCanPick] = useState34(false);
-  const rootRef = useRef40(null);
+  const [color, setColor] = useControllableState(value, defaultValue2, onChange);
+  const [canPick, setCanPick] = useState38(false);
+  const rootRef = useRef41(null);
   useEffect32(() => setCanPick(typeof window !== "undefined" && "EyeDropper" in window), []);
   useEffect32(() => {
     const names = { saturation: "Colour", hue: "Hue", alpha: "Opacity" };
@@ -7949,13 +8509,13 @@ function ColorPicker({
     } catch {
     }
   }
-  return /* @__PURE__ */ jsxs56("div", { ref: rootRef, role: "group", "aria-label": ariaLabel, className: cx("ow-color-picker", className), children: [
-    /* @__PURE__ */ jsx74(Picker, { color, onChange: change }),
-    showInput || eyeDropper && canPick ? /* @__PURE__ */ jsxs56("div", { className: "ow-color-picker__row", children: [
-      eyeDropper && canPick ? /* @__PURE__ */ jsx74("button", { type: "button", className: "ow-color-picker__dropper", "aria-label": "Pick a colour from the screen", onClick: pickFromScreen, children: /* @__PURE__ */ jsx74(PipetteIcon, { size: 15 }) }) : null,
-      showInput ? /* @__PURE__ */ jsxs56("span", { className: "ow-input-group ow-input-group--sm ow-color-picker__input", children: [
-        /* @__PURE__ */ jsx74("span", { className: "ow-input-group__addon", "aria-hidden": "true", children: "#" }),
-        /* @__PURE__ */ jsx74(
+  return /* @__PURE__ */ jsxs61("div", { ref: rootRef, role: "group", "aria-label": ariaLabel, className: cx("ow-color-picker", className), children: [
+    /* @__PURE__ */ jsx81(Picker, { color, onChange: change }),
+    showInput || eyeDropper && canPick ? /* @__PURE__ */ jsxs61("div", { className: "ow-color-picker__row", children: [
+      eyeDropper && canPick ? /* @__PURE__ */ jsx81("button", { type: "button", className: "ow-color-picker__dropper", "aria-label": "Pick a colour from the screen", onClick: pickFromScreen, children: /* @__PURE__ */ jsx81(PipetteIcon, { size: 15 }) }) : null,
+      showInput ? /* @__PURE__ */ jsxs61("span", { className: "ow-input-group ow-input-group--sm ow-color-picker__input", children: [
+        /* @__PURE__ */ jsx81("span", { className: "ow-input-group__addon", "aria-hidden": "true", children: "#" }),
+        /* @__PURE__ */ jsx81(
           HexColorInput,
           {
             className: "ow-input-group__input",
@@ -7967,11 +8527,11 @@ function ColorPicker({
           }
         )
       ] }) : null,
-      /* @__PURE__ */ jsx74("span", { className: "ow-color-picker__preview", style: { "--ow-color-picker-value": color }, "aria-hidden": "true" })
+      /* @__PURE__ */ jsx81("span", { className: "ow-color-picker__preview", style: { "--ow-color-picker-value": color }, "aria-hidden": "true" })
     ] }) : null,
-    swatches?.length ? /* @__PURE__ */ jsx74("div", { className: "ow-color-picker__swatches", role: "group", "aria-label": "Swatches", children: swatches.map((swatch) => {
+    swatches?.length ? /* @__PURE__ */ jsx81("div", { className: "ow-color-picker__swatches", role: "group", "aria-label": "Swatches", children: swatches.map((swatch) => {
       const swatchValue = swatchColor(swatch);
-      return /* @__PURE__ */ jsx74(
+      return /* @__PURE__ */ jsx81(
         "button",
         {
           type: "button",
@@ -7993,7 +8553,7 @@ function assignRef7(ref, value) {
 }
 var ColorField = /* @__PURE__ */ forwardRef31(function ColorField2({
   value,
-  defaultValue = "#312c7e",
+  defaultValue: defaultValue2 = "#312c7e",
   onChange,
   size: size2 = "md",
   isInvalid = false,
@@ -8006,14 +8566,14 @@ var ColorField = /* @__PURE__ */ forwardRef31(function ColorField2({
   "aria-describedby": ariaDescribedBy,
   ...pickerProps
 }, ref) {
-  const [color, setColor] = useControllableState(value, defaultValue, onChange);
-  const [isOpen, setOpen] = useState34(false);
-  const triggerRef = useRef40(null);
-  const panelRef = useRef40(null);
-  const panelId = useId27();
+  const [color, setColor] = useControllableState(value, defaultValue2, onChange);
+  const [isOpen, setOpen] = useState38(false);
+  const triggerRef = useRef41(null);
+  const panelRef = useRef41(null);
+  const panelId = useId28();
   const { mounted, state } = usePresence(isOpen);
   const style = useFloating({ open: mounted, anchorRef: triggerRef, floatingRef: panelRef, placement, offset: 6, maxHeight: 640 });
-  const close = useCallback12((reason) => {
+  const close = useCallback13((reason) => {
     setOpen(false);
     if (reason !== "outside") triggerRef.current?.focus();
   }, []);
@@ -8023,8 +8583,8 @@ var ColorField = /* @__PURE__ */ forwardRef31(function ColorField2({
     const frame = requestAnimationFrame(() => panelRef.current?.querySelector(".react-colorful__interactive")?.focus());
     return () => cancelAnimationFrame(frame);
   }, [isOpen]);
-  return /* @__PURE__ */ jsxs56(Fragment13, { children: [
-    /* @__PURE__ */ jsxs56(
+  return /* @__PURE__ */ jsxs61(Fragment15, { children: [
+    /* @__PURE__ */ jsxs61(
       "button",
       {
         ref: (element) => {
@@ -8056,13 +8616,13 @@ var ColorField = /* @__PURE__ */ forwardRef31(function ColorField2({
           }
         },
         children: [
-          /* @__PURE__ */ jsx74("span", { className: "ow-color-field__swatch", style: { "--ow-color-picker-value": color }, "aria-hidden": "true" }),
-          /* @__PURE__ */ jsx74("span", { id: `${panelId}-value`, className: "ow-select__value ow-color-field__value", children: color.toUpperCase() }),
-          /* @__PURE__ */ jsx74(ChevronDownIcon, { size: size2 === "sm" ? 14 : 16, className: "ow-select__chevron" })
+          /* @__PURE__ */ jsx81("span", { className: "ow-color-field__swatch", style: { "--ow-color-picker-value": color }, "aria-hidden": "true" }),
+          /* @__PURE__ */ jsx81("span", { id: `${panelId}-value`, className: "ow-select__value ow-color-field__value", children: color.toUpperCase() }),
+          /* @__PURE__ */ jsx81(ChevronDownIcon, { size: size2 === "sm" ? 14 : 16, className: "ow-select__chevron" })
         ]
       }
     ),
-    mounted ? /* @__PURE__ */ jsx74(
+    mounted ? /* @__PURE__ */ jsx81(
       "div",
       {
         ref: panelRef,
@@ -8076,17 +8636,17 @@ var ColorField = /* @__PURE__ */ forwardRef31(function ColorField2({
         onKeyDown: (event) => {
           if (event.key === "Enter" && event.target.closest(".react-colorful")) close();
         },
-        children: /* @__PURE__ */ jsx74(ColorPicker, { ...pickerProps, value: color, onChange: setColor })
+        children: /* @__PURE__ */ jsx81(ColorPicker, { ...pickerProps, value: color, onChange: setColor })
       }
     ) : null
   ] });
 });
 
 // src/components/ColorPicker/ColorArea.tsx
-import { forwardRef as forwardRef32, useRef as useRef42, useState as useState36 } from "react";
+import { forwardRef as forwardRef32, useRef as useRef43, useState as useState40 } from "react";
 
 // src/components/ColorPicker/color.ts
-import { useCallback as useCallback13, useReducer, useRef as useRef41, useState as useState35 } from "react";
+import { useCallback as useCallback14, useReducer, useRef as useRef42, useState as useState39 } from "react";
 var clamp2 = (n, min, max) => Math.min(max, Math.max(min, n));
 function parseHex(color) {
   let hex = color.trim().replace(/^#/, "");
@@ -8161,9 +8721,9 @@ 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 = useRef41(null);
+function useColorModel(value, defaultValue2, onChange, model, { hue, alpha = false } = {}) {
+  const [color, setColor] = useControllableState(value, defaultValue2, onChange);
+  const memory = useRef42(null);
   const [, rerender] = useReducer((n) => n + 1, 0);
   const incoming = normalizeHex(color);
   if (!memory.current || memory.current.hex !== incoming || memory.current.model !== model) {
@@ -8175,7 +8735,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 = useCallback13(
+  const set = useCallback14(
     (next) => {
       const hex = toHex(model.write(next), withAlpha);
       memory.current = { hex, model, value: next };
@@ -8185,7 +8745,7 @@ function useColorModel(value, defaultValue, onChange, model, { hue, alpha = fals
     },
     [model, withAlpha, setColor]
   );
-  const latest = useCallback13(() => memory.current?.hex ?? incoming, [incoming]);
+  const latest = useCallback14(() => memory.current?.hex ?? incoming, [incoming]);
   return { value: current, rgba: model.write(current), hex: memory.current.hex, set, latest };
 }
 function useDrag({
@@ -8194,8 +8754,8 @@ function useDrag({
   onStart,
   disabled = false
 }) {
-  const [dragging, setDragging] = useState35(false);
-  const [pointerFocus, setPointerFocus] = useState35(false);
+  const [dragging, setDragging] = useState39(false);
+  const [pointerFocus, setPointerFocus] = useState39(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));
@@ -8267,7 +8827,7 @@ 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
-import { jsx as jsx75, jsxs as jsxs57 } from "react/jsx-runtime";
+import { jsx as jsx82, jsxs as jsxs62 } from "react/jsx-runtime";
 var size = (length) => typeof length === "number" ? `${length}px` : length;
 function assignRef8(ref, value) {
   if (typeof ref === "function") ref(value);
@@ -8275,7 +8835,7 @@ function assignRef8(ref, value) {
 }
 var ColorArea = /* @__PURE__ */ forwardRef32(function ColorArea2({
   value,
-  defaultValue = "#312c7e",
+  defaultValue: defaultValue2 = "#312c7e",
   onChange,
   onChangeEnd,
   hue,
@@ -8290,10 +8850,10 @@ var ColorArea = /* @__PURE__ */ forwardRef32(function ColorArea2({
   id,
   className
 }, ref) {
-  const { value: hsv, rgba, hex, set, latest } = useColorModel(value, defaultValue, onChange, hsvModel, { hue });
-  const rootRef = useRef42(null);
-  const inputs = useRef42({ x: null, y: null });
-  const [axis, setAxis] = useState36("x");
+  const { value: hsv, rgba, hex, set, latest } = useColorModel(value, defaultValue2, onChange, hsvModel, { hue });
+  const rootRef = useRef43(null);
+  const inputs = useRef43({ x: null, y: null });
+  const [axis, setAxis] = useState40("x");
   const isRtl = () => rootRef.current ? getComputedStyle(rootRef.current).direction === "rtl" : false;
   const end = () => onChangeEnd?.(latest());
   const drag = useDrag({
@@ -8344,11 +8904,11 @@ var ColorArea = /* @__PURE__ */ forwardRef32(function ColorArea2({
   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__ */ jsx75(
+  const input = (which) => /* @__PURE__ */ jsx82(
     "input",
     {
       ref: (element) => {
@@ -8375,7 +8935,7 @@ var ColorArea = /* @__PURE__ */ forwardRef32(function ColorArea2({
       onKeyUp
     }
   );
-  return /* @__PURE__ */ jsxs57(
+  return /* @__PURE__ */ jsxs62(
     "div",
     {
       ref: rootRef,
@@ -8396,7 +8956,7 @@ var ColorArea = /* @__PURE__ */ forwardRef32(function ColorArea2({
       },
       ...drag.handlers,
       children: [
-        /* @__PURE__ */ jsxs57(
+        /* @__PURE__ */ jsxs62(
           "div",
           {
             className: "ow-color-area__thumb",
@@ -8407,15 +8967,15 @@ var ColorArea = /* @__PURE__ */ forwardRef32(function ColorArea2({
             ]
           }
         ),
-        name ? /* @__PURE__ */ jsx75("input", { type: "hidden", name, value: hex }) : null
+        name ? /* @__PURE__ */ jsx82("input", { type: "hidden", name, value: hex }) : null
       ]
     }
   );
 });
 
 // src/components/ColorPicker/ColorSlider.tsx
-import { forwardRef as forwardRef33, useId as useId28, useRef as useRef43 } from "react";
-import { jsx as jsx76, jsxs as jsxs58 } from "react/jsx-runtime";
+import { forwardRef as forwardRef33, useId as useId29, useRef as useRef44 } from "react";
+import { jsx as jsx83, jsxs as jsxs63 } from "react/jsx-runtime";
 var channels = {
   hue: { name: "Hue", max: 360, unit: "degree" },
   saturation: { name: "Saturation", max: 100, unit: "percent" },
@@ -8465,7 +9025,7 @@ function assignRef9(ref, value) {
 var ColorSlider = /* @__PURE__ */ forwardRef33(function ColorSlider2({
   channel,
   value,
-  defaultValue = "#312c7e",
+  defaultValue: defaultValue2 = "#312c7e",
   onChange,
   onChangeEnd,
   hue,
@@ -8484,15 +9044,15 @@ var ColorSlider = /* @__PURE__ */ forwardRef33(function ColorSlider2({
 }, 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 = useId28();
-  const trackRef = useRef43(null);
-  const inputRef = useRef43(null);
+  const labelId = useId29();
+  const trackRef = useRef44(null);
+  const inputRef = useRef44(null);
   const vertical = orientation === "vertical";
   const isRtl = () => !vertical && trackRef.current !== null && getComputedStyle(trackRef.current).direction === "rtl";
   const end = () => onChangeEnd?.(latest());
@@ -8530,7 +9090,7 @@ var ColorSlider = /* @__PURE__ */ forwardRef33(function ColorSlider2({
   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__ */ jsxs58(
+  return /* @__PURE__ */ jsxs63(
     "div",
     {
       className: cx(
@@ -8545,11 +9105,11 @@ var ColorSlider = /* @__PURE__ */ forwardRef33(function ColorSlider2({
         className
       ),
       children: [
-        label || showValue ? /* @__PURE__ */ jsxs58("div", { className: "ow-color-slider__header", children: [
-          label ? /* @__PURE__ */ jsx76("span", { id: labelId, className: "ow-color-slider__label", children: label }) : /* @__PURE__ */ jsx76("span", {}),
-          showValue ? /* @__PURE__ */ jsx76("output", { className: "ow-color-slider__value", "aria-hidden": "true", children: shown }) : null
+        label || showValue ? /* @__PURE__ */ jsxs63("div", { className: "ow-color-slider__header", children: [
+          label ? /* @__PURE__ */ jsx83("span", { id: labelId, className: "ow-color-slider__label", children: label }) : /* @__PURE__ */ jsx83("span", {}),
+          showValue ? /* @__PURE__ */ jsx83("output", { className: "ow-color-slider__value", "aria-hidden": "true", children: shown }) : null
         ] }) : null,
-        /* @__PURE__ */ jsx76(
+        /* @__PURE__ */ jsx83(
           "div",
           {
             ref: trackRef,
@@ -8558,12 +9118,12 @@ var ColorSlider = /* @__PURE__ */ forwardRef33(function ColorSlider2({
               "--ow-color-slider-gradient": `linear-gradient(var(--ow-color-slider-direction), ${gradient(channel, color.value, rgba)})`
             },
             ...drag.handlers,
-            children: /* @__PURE__ */ jsx76(
+            children: /* @__PURE__ */ jsx83(
               "div",
               {
                 className: "ow-color-slider__thumb",
                 style: { "--ow-color-slider-position": `${current / spec.max * 100}%`, "--ow-color-slider-thumb": fill },
-                children: /* @__PURE__ */ jsx76(
+                children: /* @__PURE__ */ jsx83(
                   "input",
                   {
                     ref: (element) => {
@@ -8595,18 +9155,18 @@ var ColorSlider = /* @__PURE__ */ forwardRef33(function ColorSlider2({
             )
           }
         ),
-        name ? /* @__PURE__ */ jsx76("input", { type: "hidden", name, value: color.hex }) : null
+        name ? /* @__PURE__ */ jsx83("input", { type: "hidden", name, value: color.hex }) : null
       ]
     }
   );
 });
 
 // src/components/ColorPicker/ColorSwatchPicker.tsx
-import { forwardRef as forwardRef34, useRef as useRef44 } from "react";
-import { jsx as jsx77, jsxs as jsxs59 } from "react/jsx-runtime";
-var ColorSwatchPicker = /* @__PURE__ */ forwardRef34(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 = useRef44([]);
+import { forwardRef as forwardRef34, useRef as useRef45 } from "react";
+import { jsx as jsx84, jsxs as jsxs64 } from "react/jsx-runtime";
+var ColorSwatchPicker = /* @__PURE__ */ forwardRef34(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 = useRef45([]);
   const items2 = options.map((option) => {
     const item = typeof option === "string" ? { value: option } : option;
     const rgba = parseHex(item.value);
@@ -8640,7 +9200,7 @@ var ColorSwatchPicker = /* @__PURE__ */ forwardRef34(function ColorSwatchPicker2
     refs.current[target]?.focus();
     choose(target);
   }
-  return /* @__PURE__ */ jsxs59(
+  return /* @__PURE__ */ jsxs64(
     "div",
     {
       ref,
@@ -8657,7 +9217,7 @@ var ColorSwatchPicker = /* @__PURE__ */ forwardRef34(function ColorSwatchPicker2
         items2.map((item, index) => {
           const isSelected = index === selectedIndex;
           const isDisabled = disabled || Boolean(item.disabled);
-          return /* @__PURE__ */ jsx77(
+          return /* @__PURE__ */ jsx84(
             "div",
             {
               ref: (element) => {
@@ -8674,12 +9234,12 @@ var ColorSwatchPicker = /* @__PURE__ */ forwardRef34(function ColorSwatchPicker2
               style: { "--ow-color-swatch-picker-value": item.value },
               onClick: () => choose(index),
               onKeyDown: (event) => onKeyDown(event, index),
-              children: /* @__PURE__ */ jsx77(CheckIcon, { size: size2 === "sm" ? 14 : 16, strokeWidth: 2.5, className: "ow-color-swatch-picker__check", "aria-hidden": "true" })
+              children: /* @__PURE__ */ jsx84(CheckIcon, { size: size2 === "sm" ? 14 : 16, strokeWidth: 2.5, className: "ow-color-swatch-picker__check", "aria-hidden": "true" })
             },
             `${item.value}-${index}`
           );
         }),
-        name ? /* @__PURE__ */ jsx77("input", { type: "hidden", name, value: selectedIndex >= 0 ? items2[selectedIndex].value : "" }) : null
+        name ? /* @__PURE__ */ jsx84("input", { type: "hidden", name, value: selectedIndex >= 0 ? items2[selectedIndex].value : "" }) : null
       ]
     }
   );
@@ -8881,9 +9441,11 @@ export {
   Accordion,
   AccordionItem,
   Alert,
+  AppShell,
   Avatar,
   AvatarGroup,
   Badge,
+  BarChart,
   Breadcrumbs,
   Button,
   ButtonGroup,
@@ -8921,6 +9483,7 @@ export {
   DateRangePicker,
   Dialog,
   Disclosure,
+  DonutChart,
   DotGrid,
   Drawer,
   EmptyState,
@@ -8933,6 +9496,7 @@ export {
   Input,
   InputOTP,
   Kbd,
+  LineChart,
   Link,
   ListBox,
   Menu,
@@ -8962,11 +9526,16 @@ export {
   Select,
   Separator,
   SettingsRow,
+  SidebarContent,
+  SidebarFooter,
+  SidebarHeader,
+  SidebarToggle,
   SiteHeader,
   Skeleton,
   SkeletonRows,
   Slider,
   Snippet,
+  Sparkline2 as Sparkline,
   Spinner,
   Stack,
   Stat,
@@ -9012,6 +9581,7 @@ export {
   toISO,
   toast,
   todayISO,
+  useAppShell,
   useControllableState,
   useDismiss,
   useFloating,