@orianatech/pire 0.22.0 → 1.0.0

package/dist/index.cjs

@@ -982,6 +982,12 @@ function useMessage(key, override) {
   return override ?? messages[key];
 }
 
+// src/components/utils/focusField.ts
+function focusFieldOf(button) {
+  const control = button?.closest?.(".pire-control");
+  control?.querySelector(".pire-datesegment, .pire-input, input, textarea")?.focus();
+}
+
 // src/components/forms/Input.tsx
 var import_jsx_runtime17 = require("react/jsx-runtime");
 function Input({
@@ -1037,7 +1043,17 @@ function Input({
             children: [
               icon ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Icon, { name: icon, size: 16, className: "pire-leading-icon" }) : null,
               /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_aria_components9.Input, { ref: inputRef, className: "pire-input", "data-numeric": numeric ? "true" : void 0 }),
-              showsClear ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_aria_components9.Button, { className: "pire-input-clear", onPress: () => handleChange(""), children: clearLabel ?? msg.inputClear }) : null,
+              showsClear ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(
+                import_react_aria_components9.Button,
+                {
+                  className: "pire-input-clear",
+                  onPress: (event) => {
+                    handleChange("");
+                    focusFieldOf(event.target);
+                  },
+                  children: clearLabel ?? msg.inputClear
+                }
+              ) : null,
               suffix ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "pire-affix", children: suffix }) : null
             ]
           }
@@ -1330,7 +1346,18 @@ function ComboBox({
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon, { name: "search", size: 16, className: "pire-leading-icon" }),
               /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_aria_components15.Input, { className: "pire-input", placeholder: rest.placeholder }),
-              showsClear ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_aria_components15.Button, { className: "pire-input-clear", slot: null, onPress: clear, children: clearLabel ?? msg.inputClear }) : null,
+              showsClear ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
+                import_react_aria_components15.Button,
+                {
+                  className: "pire-input-clear",
+                  slot: null,
+                  onPress: (event) => {
+                    clear();
+                    focusFieldOf(event.target);
+                  },
+                  children: clearLabel ?? msg.inputClear
+                }
+              ) : null,
               /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(import_react_aria_components15.Button, { className: "pire-iconbtn", "data-size": "sm", "aria-label": msg.comboBoxShowSuggestions, style: { width: 20, height: 20 }, children: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Icon, { name: "chevron-down", size: 16 }) })
             ]
           }
@@ -1501,6 +1528,7 @@ function MultiComboBox({
 }
 
 // src/components/forms/NumberField.tsx
+var React14 = __toESM(require("react"), 1);
 var import_react_aria_components17 = require("react-aria-components");
 var import_jsx_runtime25 = require("react/jsx-runtime");
 function decimalSeparatorFor(locale) {
@@ -1515,6 +1543,17 @@ function typeIntoInput(el, text) {
   const caret = start + text.length;
   el.setSelectionRange(caret, caret);
 }
+var SINGLE_DOT = /^(-?\d+)\.(\d+)$/;
+function couldBeGrouped(integerPart, fractionPart) {
+  return fractionPart.length === 3 && integerPart.replace("-", "").length <= 3;
+}
+function localiseMachineDecimal(text, separator) {
+  const match = SINGLE_DOT.exec(text.trim());
+  if (!match || couldBeGrouped(match[1], match[2])) {
+    return text;
+  }
+  return `${match[1]}${separator}${match[2]}`;
+}
 function toAriaNumber(value) {
   if (value === void 0) {
     return void 0;
@@ -1524,6 +1563,24 @@ function toAriaNumber(value) {
   }
   return typeof value === "number" ? value : Number(value);
 }
+function ClearButton({ label, onClear }) {
+  const state = React14.useContext(import_react_aria_components17.NumberFieldStateContext);
+  if (!state?.inputValue) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+    import_react_aria_components17.Button,
+    {
+      className: "pire-input-clear",
+      slot: null,
+      onPress: (event) => {
+        onClear();
+        focusFieldOf(event.target);
+      },
+      children: label
+    }
+  );
+}
 function NumberField({
   label,
   suffix,
@@ -1538,12 +1595,24 @@ function NumberField({
   defaultValue,
   onChange,
   emptyValue,
+  isClearable,
+  clearLabel,
   ...rest
 }) {
   const msg = usePireMessages();
   const { locale } = (0, import_react_aria_components17.useLocale)();
   const empty = emptyValue === void 0 ? NaN : emptyValue;
-  const handleChange = onChange && ((next) => onChange(Number.isNaN(next) ? empty : next));
+  const isControlled = value !== void 0;
+  const [ownValue, setOwnValue] = React14.useState(() => toAriaNumber(defaultValue) ?? NaN);
+  const takesOverValue = Boolean(isClearable) && !isControlled;
+  const valueProps = takesOverValue ? { value: ownValue, defaultValue: void 0 } : { value: toAriaNumber(value), defaultValue: toAriaNumber(defaultValue) };
+  const handleChange = (next) => {
+    if (takesOverValue) {
+      setOwnValue(next);
+    }
+    onChange?.(Number.isNaN(next) ? empty : next);
+  };
+  const showsClear = Boolean(isClearable) && !rest.isDisabled && !rest.isReadOnly;
   const handleDecimalKey = (event) => {
     if (event.key !== "." || event.ctrlKey || event.metaKey || event.altKey) {
       return;
@@ -1562,16 +1631,36 @@ function NumberField({
     event.preventDefault();
     typeIntoInput(event.currentTarget, separator);
   };
+  const handlePaste = (event) => {
+    if (rest.isReadOnly || rest.isDisabled) {
+      return;
+    }
+    const separator = decimalSeparatorFor(locale);
+    if (separator === ".") {
+      return;
+    }
+    const { maximumFractionDigits } = new Intl.NumberFormat(locale, rest.formatOptions).resolvedOptions();
+    if (!maximumFractionDigits) {
+      return;
+    }
+    const pasted = event.clipboardData.getData("text");
+    const localised = localiseMachineDecimal(pasted, separator);
+    if (localised === pasted) {
+      return;
+    }
+    event.preventDefault();
+    event.stopPropagation();
+    typeIntoInput(event.currentTarget, localised);
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
     import_react_aria_components17.NumberField,
     {
       className: cx("pire-field", className),
       style,
       validationBehavior: "aria",
-      value: toAriaNumber(value),
-      defaultValue: toAriaNumber(defaultValue),
       onChange: handleChange,
       ...rest,
+      ...valueProps,
       children: [
         label ? /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react_aria_components17.Label, { className: "pire-field-label", children: [
           label,
@@ -1586,8 +1675,17 @@ function NumberField({
             "data-invalid": rest.isInvalid ? "true" : void 0,
             "data-readonly": rest.isReadOnly ? "true" : void 0,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_aria_components17.Input, { className: "pire-input", "data-numeric": "true", onKeyDown: handleDecimalKey }),
+              /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(
+                import_react_aria_components17.Input,
+                {
+                  className: "pire-input",
+                  "data-numeric": "true",
+                  onKeyDown: handleDecimalKey,
+                  onPasteCapture: handlePaste
+                }
+              ),
               suffix ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "pire-affix", children: suffix }) : null,
+              showsClear ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(ClearButton, { label: clearLabel ?? msg.inputClear, onClear: () => handleChange(NaN) }) : null,
               hideStepper ? null : /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("span", { className: "pire-stepper", children: [
                 /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_aria_components17.Button, { slot: "increment", className: "pire-stepper-btn", "aria-label": msg.numberFieldIncrease, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon, { name: "plus", size: 10 }) }),
                 /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_aria_components17.Button, { slot: "decrement", className: "pire-stepper-btn", "aria-label": msg.numberFieldDecrease, children: /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon, { name: "minus", size: 10 }) })
@@ -1603,9 +1701,11 @@ function NumberField({
 }
 
 // src/components/forms/DatePicker.tsx
+var React15 = __toESM(require("react"), 1);
 var import_react_aria_components18 = require("react-aria-components");
+
+// src/components/forms/dateValues.ts
 var import_date = require("@internationalized/date");
-var import_jsx_runtime26 = require("react/jsx-runtime");
 var ISO_DATE = /^(\d{4}-\d{2}-\d{2})(?:[T ].*)?$/;
 function coerceDateValue(value) {
   if (value === void 0) {
@@ -1627,6 +1727,30 @@ function coerceDateValue(value) {
     return null;
   }
 }
+function coerceBound(value) {
+  return coerceDateValue(value) ?? void 0;
+}
+
+// src/components/forms/DatePicker.tsx
+var import_jsx_runtime26 = require("react/jsx-runtime");
+function ClearButton2({ label }) {
+  const state = React15.useContext(import_react_aria_components18.DatePickerStateContext);
+  if (!state?.value) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
+    import_react_aria_components18.Button,
+    {
+      className: "pire-input-clear",
+      slot: null,
+      onPress: (event) => {
+        state.setValue(null);
+        focusFieldOf(event.target);
+      },
+      children: label
+    }
+  );
+}
 function DatePicker({
   label,
   description,
@@ -1639,18 +1763,25 @@ function DatePicker({
   defaultValue,
   onChange,
   valueFormat,
+  minValue,
+  maxValue,
+  isClearable,
+  clearLabel,
   ...rest
 }) {
   const msg = usePireMessages();
-  const handleChange = onChange && ((next) => onChange(
+  const showsClear = Boolean(isClearable) && !rest.isDisabled && !rest.isReadOnly;
+  const handleChange = (next) => onChange?.(
     valueFormat === "iso" && next ? next.toString() : next
-  ));
+  );
   return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
     import_react_aria_components18.DatePicker,
     {
       className: cx("pire-field", className),
       style,
       validationBehavior: "aria",
+      minValue: coerceBound(minValue),
+      maxValue: coerceBound(maxValue),
       value: coerceDateValue(value),
       defaultValue: coerceDateValue(defaultValue),
       onChange: handleChange,
@@ -1670,6 +1801,7 @@ function DatePicker({
             "data-readonly": rest.isReadOnly ? "true" : void 0,
             children: [
               /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_aria_components18.DateInput, { className: "pire-datefield", children: (segment) => /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_aria_components18.DateSegment, { segment, className: "pire-datesegment" }) }),
+              showsClear ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(ClearButton2, { label: clearLabel ?? msg.inputClear }) : null,
               /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_aria_components18.Button, { className: "pire-iconbtn", "data-size": "sm", "aria-label": msg.datePickerOpenCalendar, style: { width: 24, height: 24 }, children: /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Icon, { name: "calendar", size: 16 }) })
             ]
           }
@@ -1693,10 +1825,45 @@ function DatePicker({
 }
 
 // src/components/forms/DateRangePicker.tsx
+var React16 = __toESM(require("react"), 1);
 var import_react_aria_components19 = require("react-aria-components");
 var import_jsx_runtime27 = require("react/jsx-runtime");
+function coerceRange(range) {
+  if (range === void 0) {
+    return void 0;
+  }
+  if (range === null) {
+    return null;
+  }
+  const start = coerceDateValue(range.start) ?? null;
+  const end = coerceDateValue(range.end) ?? null;
+  return start === null && end === null ? null : { start, end };
+}
 function rangeLengthInDays(range) {
-  return range.end.toDate("UTC").getTime() / 864e5 - range.start.toDate("UTC").getTime() / 864e5 + 1;
+  const start = coerceDateValue(range?.start) ?? null;
+  const end = coerceDateValue(range?.end) ?? null;
+  if (start === null || end === null) {
+    return null;
+  }
+  return end.toDate("UTC").getTime() / 864e5 - start.toDate("UTC").getTime() / 864e5 + 1;
+}
+function ClearButton3({ label }) {
+  const state = React16.useContext(import_react_aria_components19.DateRangePickerStateContext);
+  if (!state?.value?.start && !state?.value?.end) {
+    return null;
+  }
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    import_react_aria_components19.Button,
+    {
+      className: "pire-input-clear",
+      slot: null,
+      onPress: (event) => {
+        state.setValue(null);
+        focusFieldOf(event.target);
+      },
+      children: label
+    }
+  );
 }
 function DateRangePicker({
   label,
@@ -1710,11 +1877,30 @@ function DateRangePicker({
   endName,
   className,
   style,
+  value,
+  defaultValue,
+  onChange,
+  valueFormat,
+  minValue,
+  maxValue,
+  isClearable,
+  clearLabel,
   ...rest
 }) {
   const msg = usePireMessages();
-  const current = rest.value ?? rest.defaultValue ?? null;
-  const tooLong = maxRangeDays != null && current != null && rangeLengthInDays(current) > maxRangeDays;
+  const current = coerceRange(value) ?? coerceRange(defaultValue) ?? null;
+  const span = current === null ? null : rangeLengthInDays(current);
+  const tooLong = maxRangeDays != null && span != null && span > maxRangeDays;
+  const emit = (next) => {
+    if (!onChange) {
+      return;
+    }
+    if (!next?.start || !next.end) {
+      onChange(null);
+      return;
+    }
+    onChange(valueFormat === "iso" ? { start: next.start.toString(), end: next.end.toString() } : { start: next.start, end: next.end });
+  };
   return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
     import_react_aria_components19.DateRangePicker,
     {
@@ -1723,8 +1909,13 @@ function DateRangePicker({
       startName,
       endName,
       validationBehavior: "aria",
+      value: coerceRange(value),
+      defaultValue: coerceRange(defaultValue),
+      minValue: coerceBound(minValue),
+      maxValue: coerceBound(maxValue),
+      onChange: emit,
       ...rest,
-      isInvalid: rest.isInvalid || tooLong,
+      isInvalid: rest.isInvalid || tooLong || void 0,
       children: [
         label ? /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react_aria_components19.Label, { className: "pire-field-label", children: [
           label,
@@ -1742,6 +1933,7 @@ function DateRangePicker({
               /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_aria_components19.DateInput, { slot: "start", className: "pire-datefield", children: (segment) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_aria_components19.DateSegment, { segment, className: "pire-datesegment" }) }),
               /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { "aria-hidden": "true", className: "pire-daterange-dash", children: "\u2013" }),
               /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_aria_components19.DateInput, { slot: "end", className: "pire-datefield", children: (segment) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_aria_components19.DateSegment, { segment, className: "pire-datesegment" }) }),
+              isClearable && !rest.isDisabled && !rest.isReadOnly ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(ClearButton3, { label: clearLabel ?? msg.inputClear }) : null,
               /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
                 import_react_aria_components19.Button,
                 {
@@ -1765,7 +1957,7 @@ function DateRangePicker({
               import_react_aria_components19.Button,
               {
                 className: "pire-daterange-preset",
-                onPress: () => rest.onChange?.(preset.range()),
+                onPress: () => emit(coerceRange(preset.range()) ?? null),
                 children: preset.label
               },
               preset.id
@@ -1807,13 +1999,13 @@ function DateRangePicker({
 }
 
 // src/components/forms/ValueHelpField.tsx
-var React16 = __toESM(require("react"), 1);
+var React19 = __toESM(require("react"), 1);
 
 // src/components/patterns/ValueHelpDialog.tsx
-var React15 = __toESM(require("react"), 1);
+var React18 = __toESM(require("react"), 1);
 
 // src/components/feedback/Dialog.tsx
-var React14 = __toESM(require("react"), 1);
+var React17 = __toESM(require("react"), 1);
 var import_react_aria_components20 = require("react-aria-components");
 var import_jsx_runtime28 = require("react/jsx-runtime");
 function DialogTitle({ children, className }) {
@@ -1847,8 +2039,8 @@ function Dialog({
     onClose?.();
     onOpenChange?.(false);
   };
-  const parts = React14.Children.toArray(children);
-  const slotOf = (type) => parts.find((node) => React14.isValidElement(node) && node.type === type);
+  const parts = React17.Children.toArray(children);
+  const slotOf = (type) => parts.find((node) => React17.isValidElement(node) && node.type === type);
   const titleSlot = slotOf(DialogTitle);
   const descriptionSlot = slotOf(DialogDescription);
   const bodySlot = slotOf(DialogBody);
@@ -2097,11 +2289,11 @@ function ValueHelpDialog({
   onClose
 }) {
   const msg = usePireMessages();
-  const [query, setQuery] = React15.useState("");
-  React15.useEffect(() => {
+  const [query, setQuery] = React18.useState("");
+  React18.useEffect(() => {
     if (isOpen) setQuery("");
   }, [isOpen]);
-  const filtered = React15.useMemo(() => {
+  const filtered = React18.useMemo(() => {
     if (isFilteredExternally) return rows;
     const q = query.trim().toLowerCase();
     if (!q) return rows;
@@ -2183,7 +2375,7 @@ function ValueHelpField({
   style
 }) {
   const msg = usePireMessages();
-  const [open, setOpen] = React16.useState(false);
+  const [open, setOpen] = React19.useState(false);
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: cx(className), style, children: [
     /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       Input,
@@ -2239,7 +2431,7 @@ function ValueHelpField({
 }
 
 // src/components/forms/FileUpload.tsx
-var React17 = __toESM(require("react"), 1);
+var React20 = __toESM(require("react"), 1);
 var import_react_aria_components23 = require("react-aria-components");
 
 // src/components/feedback/ProgressBar.tsx
@@ -2330,10 +2522,10 @@ function FileUpload({
   ...rest
 }) {
   const msg = usePireMessages();
-  const [uncontrolled, setUncontrolled] = React17.useState(defaultValue ?? []);
+  const [uncontrolled, setUncontrolled] = React20.useState(defaultValue ?? []);
   const files = value ?? uncontrolled;
-  const created = React17.useRef([]);
-  React17.useEffect(() => () => {
+  const created = React20.useRef([]);
+  React20.useEffect(() => () => {
     for (const url of created.current) URL.revokeObjectURL(url);
   }, []);
   const commit = (next) => {
@@ -2445,7 +2637,7 @@ function ShellBar({
 }
 
 // src/components/navigation/SideNav.tsx
-var React18 = __toESM(require("react"), 1);
+var React21 = __toESM(require("react"), 1);
 var import_react_aria_components26 = require("react-aria-components");
 
 // src/components/navigation/Menu.tsx
@@ -2532,10 +2724,10 @@ function SideNav({
   const msg = usePireMessages();
   const activeParent = findActiveParent(groups, value);
   const isControlled = expandedIds != null;
-  const [ownExpanded, setOwnExpanded] = React18.useState(
+  const [ownExpanded, setOwnExpanded] = React21.useState(
     () => new Set(defaultExpandedIds ?? (activeParent ? [activeParent] : []))
   );
-  const [lastValue, setLastValue] = React18.useState(value);
+  const [lastValue, setLastValue] = React21.useState(value);
   if (value !== lastValue) {
     setLastValue(value);
     if (!isControlled && activeParent && !ownExpanded.has(activeParent)) {
@@ -2799,7 +2991,7 @@ function InlineMessage({ kind = "info", title, action, onClose, children, classN
 }
 
 // src/components/feedback/Toast.tsx
-var React19 = __toESM(require("react"), 1);
+var React22 = __toESM(require("react"), 1);
 var import_jsx_runtime42 = require("react/jsx-runtime");
 var KIND_ICON2 = {
   info: "info",
@@ -2825,26 +3017,26 @@ function Toast({ kind = "success", onClose, position = "bottom-center", children
     }
   );
 }
-var ToastContext = React19.createContext(null);
+var ToastContext = React22.createContext(null);
 function ToastProvider({ children, timeout = 6e3 }) {
   const msg = usePireMessages();
-  const [toasts, setToasts] = React19.useState([]);
-  const close = React19.useCallback((id) => setToasts((t) => t.filter((x) => x.id !== id)), []);
-  const add = React19.useCallback((toast) => {
+  const [toasts, setToasts] = React22.useState([]);
+  const close = React22.useCallback((id) => setToasts((t) => t.filter((x) => x.id !== id)), []);
+  const add = React22.useCallback((toast) => {
     const id = Math.random().toString(36).slice(2);
     setToasts((t) => [...t, { ...toast, id }]);
     const ms = toast.timeout ?? timeout;
     if (ms > 0) setTimeout(() => close(id), ms);
     return id;
   }, [close, timeout]);
-  const value = React19.useMemo(() => ({ add, close }), [add, close]);
+  const value = React22.useMemo(() => ({ add, close }), [add, close]);
   return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(ToastContext.Provider, { value, children: [
     children,
     /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "pire-toast-region", role: "region", "aria-label": msg.toastRegionLabel, children: toasts.map((t) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Toast, { kind: t.kind, onClose: () => close(t.id), style: { position: "static", transform: "none" }, children: t.message }, t.id)) })
   ] });
 }
 function useToast() {
-  const ctx = React19.useContext(ToastContext);
+  const ctx = React22.useContext(ToastContext);
   if (!ctx) throw new Error("useToast must be used inside <ToastProvider>");
   return ctx;
 }
@@ -3194,14 +3386,14 @@ function BarChart({
 }
 
 // src/components/data/LineChart.tsx
-var React20 = __toESM(require("react"), 1);
+var React23 = __toESM(require("react"), 1);
 var import_jsx_runtime50 = require("react/jsx-runtime");
 var PLOT_INSET = { top: 10, right: 14, bottom: 24, left: 58 };
 var MARKER_LIMIT = 20;
-var useIsomorphicLayoutEffect2 = typeof window === "undefined" ? React20.useEffect : React20.useLayoutEffect;
+var useIsomorphicLayoutEffect2 = typeof window === "undefined" ? React23.useEffect : React23.useLayoutEffect;
 function useMeasuredWidth() {
-  const ref = React20.useRef(null);
-  const [width, setWidth] = React20.useState(0);
+  const ref = React23.useRef(null);
+  const [width, setWidth] = React23.useState(0);
   useIsomorphicLayoutEffect2(() => {
     const element = ref.current;
     if (!element) return;
@@ -3364,7 +3556,7 @@ function LineChart({
 }
 
 // src/components/data/DonutChart.tsx
-var React21 = __toESM(require("react"), 1);
+var React24 = __toESM(require("react"), 1);
 var import_jsx_runtime51 = require("react/jsx-runtime");
 var SEGMENT_GAP_DEGREES = 1.5;
 function DonutChart({
@@ -3385,7 +3577,7 @@ function DonutChart({
 }) {
   const label = rest["aria-label"];
   const msg = usePireMessages();
-  const [hoveredIndex, setHoveredIndex] = React21.useState(null);
+  const [hoveredIndex, setHoveredIndex] = React24.useState(null);
   warnOnDonutShape(series, categories.length, label);
   const values = (series[0]?.values ?? []).slice(0, categories.length);
   const segments = categories.map((category, index) => ({ category, index, value: values[index] ?? 0 })).filter((segment) => segment.value > 0);
@@ -3622,7 +3814,7 @@ function ConfirmDialog({
 }
 
 // src/components/patterns/CommandPalette.tsx
-var React22 = __toESM(require("react"), 1);
+var React25 = __toESM(require("react"), 1);
 var import_react_aria_components31 = require("react-aria-components");
 var import_jsx_runtime60 = require("react/jsx-runtime");
 var RESULTS_SECTION_KEY = "__pire_results__";
@@ -3645,17 +3837,17 @@ function CommandPalette({
   style
 }) {
   const msg = usePireMessages();
-  const [query, setQuery] = React22.useState("");
+  const [query, setQuery] = React25.useState("");
   const { contains } = (0, import_react_aria_components31.useFilter)({ sensitivity: "base" });
-  React22.useEffect(() => {
+  React25.useEffect(() => {
     if (isOpen) setQuery("");
   }, [isOpen]);
-  const searchableById = React22.useMemo(() => {
+  const searchableById = React25.useMemo(() => {
     const byId = /* @__PURE__ */ new Map();
     for (const group of groups) for (const item of group.items) byId.set(item.id, searchableText(item));
     return byId;
   }, [groups]);
-  const filter = React22.useCallback((textValue, inputValue, node) => {
+  const filter = React25.useCallback((textValue, inputValue, node) => {
     if (node.parentKey === RESULTS_SECTION_KEY) return true;
     return contains(searchableById.get(String(node.key)) ?? textValue, inputValue);
   }, [contains, searchableById]);
@@ -3738,9 +3930,9 @@ function CommandPalette({
   );
 }
 function useCommandPaletteShortcut(onTrigger, { key = "k", isDisabled } = {}) {
-  const handler = React22.useRef(onTrigger);
+  const handler = React25.useRef(onTrigger);
   handler.current = onTrigger;
-  React22.useEffect(() => {
+  React25.useEffect(() => {
     if (isDisabled) return;
     const onKeyDown = (event) => {
       if (!(event.metaKey || event.ctrlKey) || event.altKey) return;
@@ -3794,7 +3986,7 @@ function EmptyState({ icon = "file-text", title, action, compact, children, clas
 }
 
 // src/components/patterns/FileDropZone.tsx
-var React23 = __toESM(require("react"), 1);
+var React26 = __toESM(require("react"), 1);
 var import_react_aria_components33 = require("react-aria-components");
 var import_jsx_runtime63 = require("react/jsx-runtime");
 var isImage2 = (file) => file.type.startsWith("image/");
@@ -3824,10 +4016,10 @@ function FileDropZone({
   ...rest
 }) {
   const msg = usePireMessages();
-  const [uncontrolled, setUncontrolled] = React23.useState(defaultValue ?? []);
+  const [uncontrolled, setUncontrolled] = React26.useState(defaultValue ?? []);
   const files = value ?? uncontrolled;
-  const created = React23.useRef([]);
-  React23.useEffect(() => () => {
+  const created = React26.useRef([]);
+  React26.useEffect(() => () => {
     for (const url of created.current) URL.revokeObjectURL(url);
   }, []);
   const commit = (next) => {