@orianatech/pire 0.2.0 → 0.3.0

package/dist/index.cjs

@@ -42,26 +42,27 @@ __export(src_exports, {
   DatePicker: () => DatePicker,
   DescriptionList: () => DescriptionList,
   Dialog: () => Dialog,
-  DialogTrigger: () => import_react_aria_components23.DialogTrigger,
+  DialogTrigger: () => import_react_aria_components25.DialogTrigger,
   EmptyState: () => EmptyState,
   FilterBar: () => FilterBar,
   FooterBar: () => FooterBar,
   FormField: () => FormField,
-  I18nProvider: () => import_react_aria_components23.I18nProvider,
+  I18nProvider: () => import_react_aria_components25.I18nProvider,
   Icon: () => Icon,
   IconButton: () => IconButton,
   InlineMessage: () => InlineMessage,
   Input: () => Input,
   KpiTile: () => KpiTile,
   LinkList: () => LinkList,
-  Menu: () => import_react_aria_components23.Menu,
-  MenuItem: () => import_react_aria_components23.MenuItem,
-  MenuTrigger: () => import_react_aria_components23.MenuTrigger,
+  Menu: () => import_react_aria_components25.Menu,
+  MenuItem: () => import_react_aria_components25.MenuItem,
+  MenuTrigger: () => import_react_aria_components25.MenuTrigger,
+  MultiComboBox: () => MultiComboBox,
   NumberField: () => NumberField,
   ObjectHeader: () => ObjectHeader,
   PageHeader: () => PageHeader,
   Pagination: () => Pagination,
-  Popover: () => import_react_aria_components23.Popover,
+  Popover: () => import_react_aria_components25.Popover,
   ProgressBar: () => ProgressBar,
   Radio: () => Radio,
   RadioGroup: () => RadioGroup,
@@ -69,13 +70,16 @@ __export(src_exports, {
   SegmentedControl: () => SegmentedControl,
   Select: () => Select,
   SelectionBar: () => SelectionBar,
-  Separator: () => import_react_aria_components23.Separator,
+  Separator: () => import_react_aria_components25.Separator,
   ShellBar: () => ShellBar,
   SideNav: () => SideNav,
   SidePanel: () => SidePanel,
+  Skeleton: () => Skeleton,
+  SkeletonTableRow: () => SkeletonTableRow,
   Switch: () => Switch,
   Tabs: () => Tabs,
   Tag: () => Tag,
+  TextArea: () => TextArea,
   Timeline: () => Timeline,
   Toast: () => Toast,
   ToastProvider: () => ToastProvider,
@@ -461,9 +465,94 @@ function Input({
   );
 }
 
-// src/components/forms/Select.tsx
+// src/components/forms/TextArea.tsx
+var React6 = __toESM(require("react"), 1);
 var import_react_aria_components7 = require("react-aria-components");
 var import_jsx_runtime12 = require("react/jsx-runtime");
+var useIsomorphicLayoutEffect = typeof document === "undefined" ? React6.useEffect : React6.useLayoutEffect;
+function TextArea({
+  label,
+  description,
+  errorMessage,
+  size = "md",
+  rows = 3,
+  autoGrow,
+  maxRows,
+  fullWidth = true,
+  className,
+  style,
+  textAreaRef,
+  onChange,
+  ...rest
+}) {
+  const innerRef = React6.useRef(null);
+  const ref = React6.useCallback((node) => {
+    innerRef.current = node;
+    if (typeof textAreaRef === "function") textAreaRef(node);
+    else if (textAreaRef) textAreaRef.current = node;
+  }, [textAreaRef]);
+  const grow = React6.useCallback(() => {
+    const el = innerRef.current;
+    if (!el || !autoGrow) return;
+    const styles = getComputedStyle(el);
+    const lineHeight = Number.parseFloat(styles.lineHeight) || Number.parseFloat(styles.fontSize) * 1.5;
+    const chrome = el.offsetHeight - el.clientHeight;
+    el.style.height = "auto";
+    const wanted = maxRows ? Math.min(el.scrollHeight, Math.ceil(lineHeight * maxRows)) : el.scrollHeight;
+    const next = `${wanted + chrome}px`;
+    if (el.style.height !== next) el.style.height = next;
+  }, [autoGrow, maxRows]);
+  useIsomorphicLayoutEffect(() => {
+    if (!autoGrow) {
+      if (innerRef.current) innerRef.current.style.height = "";
+      return;
+    }
+    grow();
+  }, [autoGrow, grow, rest.value]);
+  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
+    import_react_aria_components7.TextField,
+    {
+      className: cx("pire-field", className),
+      style,
+      onChange,
+      validationBehavior: "aria",
+      ...rest,
+      children: [
+        label ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react_aria_components7.Label, { className: "pire-field-label", children: [
+          label,
+          rest.isRequired ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "pire-field-req", "aria-hidden": "true", children: "*" }) : null
+        ] }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+          import_react_aria_components7.Group,
+          {
+            className: "pire-control",
+            "data-size": size,
+            "data-full-width": String(fullWidth),
+            "data-multiline": "true",
+            "data-invalid": rest.isInvalid ? "true" : void 0,
+            "data-readonly": rest.isReadOnly ? "true" : void 0,
+            children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(
+              import_react_aria_components7.TextArea,
+              {
+                ref,
+                rows,
+                onInput: autoGrow ? grow : void 0,
+                className: cx("pire-input", "pire-textarea"),
+                "data-auto-grow": autoGrow ? "true" : void 0
+              }
+            )
+          }
+        ),
+        description ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_aria_components7.Text, { slot: "description", className: "pire-field-hint", children: description }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_aria_components7.FieldError, { className: "pire-field-error", children: errorMessage })
+      ]
+    }
+  );
+}
+
+// src/components/forms/Select.tsx
+var import_react_aria_components8 = require("react-aria-components");
+var import_jsx_runtime13 = require("react/jsx-runtime");
 var norm = (o) => typeof o === "string" ? { value: o, label: o, isDisabled: false } : o;
 function Select({
   label,
@@ -481,8 +570,8 @@ function Select({
   ...rest
 }) {
   const items = options.map(norm);
-  return /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-    import_react_aria_components7.Select,
+  return /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+    import_react_aria_components8.Select,
     {
       className: cx("pire-field", className),
       style,
@@ -493,78 +582,78 @@ function Select({
       validationBehavior: "aria",
       ...rest,
       children: [
-        label ? /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(import_react_aria_components7.Label, { className: "pire-field-label", children: [
+        label ? /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_react_aria_components8.Label, { className: "pire-field-label", children: [
           label,
-          rest.isRequired ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)("span", { className: "pire-field-req", "aria-hidden": "true", children: "*" }) : null
+          rest.isRequired ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "pire-field-req", "aria-hidden": "true", children: "*" }) : null
         ] }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsxs)(
-          import_react_aria_components7.Button,
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(
+          import_react_aria_components8.Button,
           {
             className: "pire-control",
             "data-size": size,
             "data-full-width": String(fullWidth),
             "data-invalid": rest.isInvalid ? "true" : void 0,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_aria_components7.SelectValue, { className: "pire-select-value" }),
-              /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(Icon, { name: "chevron-down", size: 16, className: "pire-leading-icon" })
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_aria_components8.SelectValue, { className: "pire-select-value" }),
+              /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { name: "chevron-down", size: 16, className: "pire-leading-icon" })
             ]
           }
         ),
-        description ? /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_aria_components7.Text, { slot: "description", className: "pire-field-hint", children: description }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_aria_components7.FieldError, { className: "pire-field-error", children: errorMessage }),
-        /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_aria_components7.Popover, { className: "pire-popover", children: /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_aria_components7.ListBox, { className: "pire-listbox", items, children: (item) => /* @__PURE__ */ (0, import_jsx_runtime12.jsx)(import_react_aria_components7.ListBoxItem, { className: "pire-option", id: item.value, textValue: item.label, isDisabled: item.isDisabled, children: item.label }) }) })
+        description ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_aria_components8.Text, { slot: "description", className: "pire-field-hint", children: description }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_aria_components8.FieldError, { className: "pire-field-error", children: errorMessage }),
+        /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_aria_components8.Popover, { className: "pire-popover", children: /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_aria_components8.ListBox, { className: "pire-listbox", items, children: (item) => /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_aria_components8.ListBoxItem, { className: "pire-option", id: item.value, textValue: item.label, isDisabled: item.isDisabled, children: item.label }) }) })
       ]
     }
   );
 }
 
 // src/components/forms/Checkbox.tsx
-var import_react_aria_components8 = require("react-aria-components");
-var import_jsx_runtime13 = require("react/jsx-runtime");
+var import_react_aria_components9 = require("react-aria-components");
+var import_jsx_runtime14 = require("react/jsx-runtime");
 function Checkbox({ label, hint, children, className, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(import_react_aria_components8.Checkbox, { className: cx("pire-choice", className), ...rest, children: ({ isSelected, isIndeterminate }) => /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)(import_jsx_runtime13.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "pire-choice-box", "aria-hidden": "true", children: isIndeterminate ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { name: "minus", size: 12 }) : isSelected ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)(Icon, { name: "check", size: 12 }) : null }),
-    /* @__PURE__ */ (0, import_jsx_runtime13.jsxs)("span", { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_aria_components9.Checkbox, { className: cx("pire-choice", className), ...rest, children: ({ isSelected, isIndeterminate }) => /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_jsx_runtime14.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "pire-choice-box", "aria-hidden": "true", children: isIndeterminate ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { name: "minus", size: 12 }) : isSelected ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(Icon, { name: "check", size: 12 }) : null }),
+    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { children: [
       label ?? children,
-      hint ? /* @__PURE__ */ (0, import_jsx_runtime13.jsx)("span", { className: "pire-choice-hint", children: hint }) : null
+      hint ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "pire-choice-hint", children: hint }) : null
     ] })
   ] }) });
 }
 
 // src/components/forms/Radio.tsx
-var import_react_aria_components9 = require("react-aria-components");
-var import_jsx_runtime14 = require("react/jsx-runtime");
+var import_react_aria_components10 = require("react-aria-components");
+var import_jsx_runtime15 = require("react/jsx-runtime");
 function RadioGroup({ label, description, errorMessage, children, className, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_aria_components9.RadioGroup, { className: cx("pire-field", className), validationBehavior: "aria", ...rest, children: [
-    label ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_aria_components9.Label, { className: "pire-field-label", children: label }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("div", { className: "pire-radiogroup", children }),
-    description ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_aria_components9.Text, { slot: "description", className: "pire-field-hint", children: description }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)(import_react_aria_components9.FieldError, { className: "pire-field-error", children: errorMessage })
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_aria_components10.RadioGroup, { className: cx("pire-field", className), validationBehavior: "aria", ...rest, children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_aria_components10.Label, { className: "pire-field-label", children: label }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("div", { className: "pire-radiogroup", children }),
+    description ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_aria_components10.Text, { slot: "description", className: "pire-field-hint", children: description }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)(import_react_aria_components10.FieldError, { className: "pire-field-error", children: errorMessage })
   ] });
 }
 function Radio({ label, hint, children, className, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)(import_react_aria_components9.Radio, { className: cx("pire-choice", className), ...rest, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "pire-choice-box", "data-radio": "true", "aria-hidden": "true" }),
-    /* @__PURE__ */ (0, import_jsx_runtime14.jsxs)("span", { children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_aria_components10.Radio, { className: cx("pire-choice", className), ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "pire-choice-box", "data-radio": "true", "aria-hidden": "true" }),
+    /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)("span", { children: [
       label ?? children,
-      hint ? /* @__PURE__ */ (0, import_jsx_runtime14.jsx)("span", { className: "pire-choice-hint", children: hint }) : null
+      hint ? /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "pire-choice-hint", children: hint }) : null
     ] })
   ] });
 }
 
 // src/components/forms/Switch.tsx
-var import_react_aria_components10 = require("react-aria-components");
-var import_jsx_runtime15 = require("react/jsx-runtime");
+var import_react_aria_components11 = require("react-aria-components");
+var import_jsx_runtime16 = require("react/jsx-runtime");
 function Switch({ label, children, className, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime15.jsxs)(import_react_aria_components10.Switch, { className: cx("pire-choice", className), ...rest, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "pire-switch-track", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { className: "pire-switch-thumb" }) }),
-    /* @__PURE__ */ (0, import_jsx_runtime15.jsx)("span", { children: label ?? children })
+  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react_aria_components11.Switch, { className: cx("pire-choice", className), ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "pire-switch-track", "aria-hidden": "true", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "pire-switch-thumb" }) }),
+    /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { children: label ?? children })
   ] });
 }
 
 // src/components/forms/ComboBox.tsx
-var import_react_aria_components11 = require("react-aria-components");
-var import_jsx_runtime16 = require("react/jsx-runtime");
+var import_react_aria_components12 = require("react-aria-components");
+var import_jsx_runtime17 = require("react/jsx-runtime");
 var norm2 = (o) => typeof o === "string" ? { value: o, label: o } : o;
 function ComboBox({
   label,
@@ -582,8 +671,8 @@ function ComboBox({
   ...rest
 }) {
   const items = options.map(norm2);
-  return /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
-    import_react_aria_components11.ComboBox,
+  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+    import_react_aria_components12.ComboBox,
     {
       className: cx("pire-field", className),
       style,
@@ -596,29 +685,150 @@ function ComboBox({
       validationBehavior: "aria",
       ...rest,
       children: [
-        label ? /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react_aria_components11.Label, { className: "pire-field-label", children: [
+        label ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_aria_components12.Label, { className: "pire-field-label", children: [
           label,
-          rest.isRequired ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { className: "pire-field-req", "aria-hidden": "true", children: "*" }) : null
+          rest.isRequired ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "pire-field-req", "aria-hidden": "true", children: "*" }) : null
         ] }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(
-          import_react_aria_components11.Group,
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
+          import_react_aria_components12.Group,
           {
             className: "pire-control",
             "data-size": size,
             "data-full-width": String(fullWidth),
             "data-invalid": rest.isInvalid ? "true" : void 0,
             children: [
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon, { name: "search", size: 16, className: "pire-leading-icon" }),
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_aria_components11.Input, { className: "pire-input", placeholder: rest.placeholder }),
-              /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_aria_components11.Button, { className: "pire-iconbtn", "data-size": "sm", "aria-label": "Show suggestions", style: { width: 20, height: 20 }, children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(Icon, { name: "chevron-down", size: 16 }) })
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Icon, { name: "search", size: 16, className: "pire-leading-icon" }),
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_aria_components12.Input, { className: "pire-input", placeholder: rest.placeholder }),
+              /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_aria_components12.Button, { className: "pire-iconbtn", "data-size": "sm", "aria-label": "Show suggestions", style: { width: 20, height: 20 }, children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Icon, { name: "chevron-down", size: 16 }) })
             ]
           }
         ),
-        description ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_aria_components11.Text, { slot: "description", className: "pire-field-hint", children: description }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_aria_components11.FieldError, { className: "pire-field-error", children: errorMessage }),
-        /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_aria_components11.Popover, { className: "pire-popover", children: /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(import_react_aria_components11.ListBox, { className: "pire-listbox", children: (item) => /* @__PURE__ */ (0, import_jsx_runtime16.jsxs)(import_react_aria_components11.ListBoxItem, { className: "pire-option", id: item.value, textValue: item.label, isDisabled: item.isDisabled, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { style: { flex: 1 }, children: item.label }),
-          item.secondary ? /* @__PURE__ */ (0, import_jsx_runtime16.jsx)("span", { style: { font: "var(--type-code)", color: "var(--text-tertiary)" }, children: item.secondary }) : null
+        description ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_aria_components12.Text, { slot: "description", className: "pire-field-hint", children: description }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_aria_components12.FieldError, { className: "pire-field-error", children: errorMessage }),
+        /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_aria_components12.Popover, { className: "pire-popover", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_aria_components12.ListBox, { className: "pire-listbox", children: (item) => /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_aria_components12.ListBoxItem, { className: "pire-option", id: item.value, textValue: item.label, isDisabled: item.isDisabled, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { style: { flex: 1 }, children: item.label }),
+          item.secondary ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { style: { font: "var(--type-code)", color: "var(--text-tertiary)" }, children: item.secondary }) : null
+        ] }) }) })
+      ]
+    }
+  );
+}
+
+// src/components/forms/MultiComboBox.tsx
+var React7 = __toESM(require("react"), 1);
+var import_react_aria_components13 = require("react-aria-components");
+var import_jsx_runtime18 = require("react/jsx-runtime");
+var norm3 = (o) => typeof o === "string" ? { value: o, label: o } : o;
+function MultiComboBox({
+  label,
+  value,
+  defaultValue,
+  onChange,
+  onInputChange,
+  options = [],
+  description,
+  errorMessage,
+  allowsCustomValue,
+  size = "md",
+  fullWidth = true,
+  className,
+  style,
+  ...rest
+}) {
+  const items = React7.useMemo(() => options.map(norm3), [options]);
+  const [uncontrolled, setUncontrolled] = React7.useState(defaultValue ?? []);
+  const [announcement, setAnnouncement] = React7.useState("");
+  const inputRef = React7.useRef(null);
+  const raw = value ?? uncontrolled;
+  const contentKey = raw.join("\0");
+  const values = React7.useMemo(() => raw, [contentKey]);
+  const labelOf = (v) => items.find((o) => o.value === v)?.label ?? v;
+  const isEditable = !rest.isDisabled && !rest.isReadOnly;
+  const commit = (next) => {
+    const added = next.find((v) => !values.includes(v));
+    const removed = values.find((v) => !next.includes(v));
+    if (added) setAnnouncement(`${labelOf(added)} added. ${next.length} selected.`);
+    else if (removed) setAnnouncement(`${labelOf(removed)} removed. ${next.length} selected.`);
+    if (value === void 0) setUncontrolled(next);
+    onChange?.(next);
+  };
+  const remove = (v) => {
+    commit(values.filter((x) => x !== v));
+    inputRef.current?.focus();
+  };
+  const onKeyDownCapture = (e) => {
+    const el = e.currentTarget;
+    if (!isEditable) return;
+    if (e.key === "Backspace" && el.value === "" && values.length > 0) {
+      e.preventDefault();
+      e.stopPropagation();
+      commit(values.slice(0, -1));
+      return;
+    }
+    if (e.key !== "Enter" || !allowsCustomValue) return;
+    const text = el.value.trim();
+    if (text === "" || el.getAttribute("aria-activedescendant")) return;
+    const match = items.find((o) => o.label.toLowerCase() === text.toLowerCase());
+    const next = match ? match.value : text;
+    e.preventDefault();
+    e.stopPropagation();
+    if (!values.includes(next)) commit([...values, next]);
+  };
+  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+    import_react_aria_components13.ComboBox,
+    {
+      className: cx("pire-field", className),
+      style,
+      selectionMode: "multiple",
+      value: values,
+      onChange: (keys) => commit(keys.map(String)),
+      onInputChange,
+      defaultItems: items,
+      menuTrigger: "input",
+      validationBehavior: "aria",
+      ...rest,
+      children: [
+        label ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react_aria_components13.Label, { className: "pire-field-label", children: [
+          label,
+          rest.isRequired ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "pire-field-req", "aria-hidden": "true", children: "*" }) : null
+        ] }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
+          import_react_aria_components13.Group,
+          {
+            className: "pire-control",
+            "data-size": size,
+            "data-full-width": String(fullWidth),
+            "data-multiline": "true",
+            "data-invalid": rest.isInvalid ? "true" : void 0,
+            "data-readonly": rest.isReadOnly ? "true" : void 0,
+            children: [
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon, { name: "search", size: 16, className: "pire-leading-icon" }),
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("div", { className: "pire-chipfield", children: [
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_aria_components13.ButtonContext.Provider, { value: null, children: values.map((v) => (
+                  /* Disabled follows the field, not `isEditable`: a read-only field's chips are
+                     real, current values and should read as such — they simply lose the × . */
+                  /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Tag, { isDisabled: rest.isDisabled, onRemove: isEditable ? () => remove(v) : void 0, children: labelOf(v) }, v)
+                )) }),
+                /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(
+                  import_react_aria_components13.Input,
+                  {
+                    ref: inputRef,
+                    className: cx("pire-input", "pire-chipinput"),
+                    placeholder: rest.placeholder,
+                    onKeyDownCapture
+                  }
+                )
+              ] }),
+              /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_aria_components13.Button, { className: "pire-iconbtn", "data-size": "sm", "aria-label": "Show suggestions", style: { width: 20, height: 20 }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon, { name: "chevron-down", size: 16 }) })
+            ]
+          }
+        ),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_aria_components13.VisuallyHidden, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { "aria-live": "polite", children: announcement }) }),
+        description ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_aria_components13.Text, { slot: "description", className: "pire-field-hint", children: description }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_aria_components13.FieldError, { className: "pire-field-error", children: errorMessage }),
+        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_aria_components13.Popover, { className: "pire-popover", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_aria_components13.ListBox, { className: "pire-listbox", children: (item) => /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react_aria_components13.ListBoxItem, { className: "pire-option", id: item.value, textValue: item.label, isDisabled: item.isDisabled, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { style: { flex: 1 }, children: item.label }),
+          item.secondary ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { style: { font: "var(--type-code)", color: "var(--text-tertiary)" }, children: item.secondary }) : null
         ] }) }) })
       ]
     }
@@ -626,8 +836,8 @@ function ComboBox({
 }
 
 // src/components/forms/NumberField.tsx
-var import_react_aria_components12 = require("react-aria-components");
-var import_jsx_runtime17 = require("react/jsx-runtime");
+var import_react_aria_components14 = require("react-aria-components");
+var import_jsx_runtime19 = require("react/jsx-runtime");
 function NumberField({
   label,
   suffix,
@@ -640,13 +850,13 @@ function NumberField({
   style,
   ...rest
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_aria_components12.NumberField, { className: cx("pire-field", className), style, validationBehavior: "aria", ...rest, children: [
-    label ? /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(import_react_aria_components12.Label, { className: "pire-field-label", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react_aria_components14.NumberField, { className: cx("pire-field", className), style, validationBehavior: "aria", ...rest, children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react_aria_components14.Label, { className: "pire-field-label", children: [
       label,
-      rest.isRequired ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "pire-field-req", "aria-hidden": "true", children: "*" }) : null
+      rest.isRequired ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "pire-field-req", "aria-hidden": "true", children: "*" }) : null
     ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)(
-      import_react_aria_components12.Group,
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(
+      import_react_aria_components14.Group,
       {
         className: "pire-control",
         "data-size": size,
@@ -654,23 +864,23 @@ function NumberField({
         "data-invalid": rest.isInvalid ? "true" : void 0,
         "data-readonly": rest.isReadOnly ? "true" : void 0,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_aria_components12.Input, { className: "pire-input", "data-numeric": "true" }),
-          suffix ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)("span", { className: "pire-affix", children: suffix }) : null,
-          hideStepper ? null : /* @__PURE__ */ (0, import_jsx_runtime17.jsxs)("span", { className: "pire-stepper", children: [
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_aria_components12.Button, { slot: "increment", className: "pire-stepper-btn", "aria-label": "Increase", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Icon, { name: "plus", size: 10 }) }),
-            /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_aria_components12.Button, { slot: "decrement", className: "pire-stepper-btn", "aria-label": "Decrease", children: /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(Icon, { name: "minus", size: 10 }) })
+          /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_aria_components14.Input, { className: "pire-input", "data-numeric": "true" }),
+          suffix ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("span", { className: "pire-affix", children: suffix }) : null,
+          hideStepper ? null : /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("span", { className: "pire-stepper", children: [
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_aria_components14.Button, { slot: "increment", className: "pire-stepper-btn", "aria-label": "Increase", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { name: "plus", size: 10 }) }),
+            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_aria_components14.Button, { slot: "decrement", className: "pire-stepper-btn", "aria-label": "Decrease", children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(Icon, { name: "minus", size: 10 }) })
           ] })
         ]
       }
     ),
-    description ? /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_aria_components12.Text, { slot: "description", className: "pire-field-hint", children: description }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime17.jsx)(import_react_aria_components12.FieldError, { className: "pire-field-error", children: errorMessage })
+    description ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_aria_components14.Text, { slot: "description", className: "pire-field-hint", children: description }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_aria_components14.FieldError, { className: "pire-field-error", children: errorMessage })
   ] });
 }
 
 // src/components/forms/DatePicker.tsx
-var import_react_aria_components13 = require("react-aria-components");
-var import_jsx_runtime18 = require("react/jsx-runtime");
+var import_react_aria_components15 = require("react-aria-components");
+var import_jsx_runtime20 = require("react/jsx-runtime");
 function DatePicker({
   label,
   description,
@@ -681,13 +891,13 @@ function DatePicker({
   style,
   ...rest
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react_aria_components13.DatePicker, { className: cx("pire-field", className), style, validationBehavior: "aria", ...rest, children: [
-    label ? /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react_aria_components13.Label, { className: "pire-field-label", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react_aria_components15.DatePicker, { className: cx("pire-field", className), style, validationBehavior: "aria", ...rest, children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react_aria_components15.Label, { className: "pire-field-label", children: [
       label,
-      rest.isRequired ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)("span", { className: "pire-field-req", "aria-hidden": "true", children: "*" }) : null
+      rest.isRequired ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("span", { className: "pire-field-req", "aria-hidden": "true", children: "*" }) : null
     ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(
-      import_react_aria_components13.Group,
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
+      import_react_aria_components15.Group,
       {
         className: "pire-control",
         "data-size": size,
@@ -695,36 +905,36 @@ function DatePicker({
         "data-invalid": rest.isInvalid ? "true" : void 0,
         "data-readonly": rest.isReadOnly ? "true" : void 0,
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_aria_components13.DateInput, { className: "pire-datefield", children: (segment) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_aria_components13.DateSegment, { segment, className: "pire-datesegment" }) }),
-          /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_aria_components13.Button, { className: "pire-iconbtn", "data-size": "sm", "aria-label": "Open calendar", style: { width: 24, height: 24 }, children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon, { name: "calendar", size: 16 }) })
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_aria_components15.DateInput, { className: "pire-datefield", children: (segment) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_aria_components15.DateSegment, { segment, className: "pire-datesegment" }) }),
+          /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_aria_components15.Button, { className: "pire-iconbtn", "data-size": "sm", "aria-label": "Open calendar", style: { width: 24, height: 24 }, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { name: "calendar", size: 16 }) })
         ]
       }
     ),
-    description ? /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_aria_components13.Text, { slot: "description", className: "pire-field-hint", children: description }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_aria_components13.FieldError, { className: "pire-field-error", children: errorMessage }),
-    /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_aria_components13.Popover, { className: "pire-popover", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_aria_components13.Dialog, { children: /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react_aria_components13.Calendar, { className: "pire-calendar", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)("header", { className: "pire-calendar-head", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_aria_components13.Button, { slot: "previous", className: "pire-iconbtn", "data-size": "sm", "aria-label": "Previous month", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon, { name: "chevron-left", size: 16 }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_aria_components13.Heading, { className: "pire-calendar-title" }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_aria_components13.Button, { slot: "next", className: "pire-iconbtn", "data-size": "sm", "aria-label": "Next month", children: /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(Icon, { name: "chevron-right", size: 16 }) })
+    description ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_aria_components15.Text, { slot: "description", className: "pire-field-hint", children: description }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_aria_components15.FieldError, { className: "pire-field-error", children: errorMessage }),
+    /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_aria_components15.Popover, { className: "pire-popover", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_aria_components15.Dialog, { children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react_aria_components15.Calendar, { className: "pire-calendar", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("header", { className: "pire-calendar-head", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_aria_components15.Button, { slot: "previous", className: "pire-iconbtn", "data-size": "sm", "aria-label": "Previous month", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { name: "chevron-left", size: 16 }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_aria_components15.Heading, { className: "pire-calendar-title" }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_aria_components15.Button, { slot: "next", className: "pire-iconbtn", "data-size": "sm", "aria-label": "Next month", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Icon, { name: "chevron-right", size: 16 }) })
       ] }),
-      /* @__PURE__ */ (0, import_jsx_runtime18.jsxs)(import_react_aria_components13.CalendarGrid, { className: "pire-calendar-grid", children: [
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_aria_components13.CalendarGridHeader, { children: (day) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_aria_components13.CalendarHeaderCell, { children: day }) }),
-        /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_aria_components13.CalendarGridBody, { children: (date) => /* @__PURE__ */ (0, import_jsx_runtime18.jsx)(import_react_aria_components13.CalendarCell, { date, className: "pire-calendar-cell" }) })
+      /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react_aria_components15.CalendarGrid, { className: "pire-calendar-grid", children: [
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_aria_components15.CalendarGridHeader, { children: (day) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_aria_components15.CalendarHeaderCell, { children: day }) }),
+        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_aria_components15.CalendarGridBody, { children: (date) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_aria_components15.CalendarCell, { date, className: "pire-calendar-cell" }) })
       ] })
     ] }) }) })
   ] });
 }
 
 // src/components/forms/ValueHelpField.tsx
-var React7 = __toESM(require("react"), 1);
+var React9 = __toESM(require("react"), 1);
 
 // src/components/patterns/ValueHelpDialog.tsx
-var React6 = __toESM(require("react"), 1);
+var React8 = __toESM(require("react"), 1);
 
 // src/components/feedback/Dialog.tsx
-var import_react_aria_components14 = require("react-aria-components");
-var import_jsx_runtime19 = require("react/jsx-runtime");
+var import_react_aria_components16 = require("react-aria-components");
+var import_jsx_runtime21 = require("react/jsx-runtime");
 function Dialog({
   isOpen,
   onOpenChange,
@@ -743,8 +953,8 @@ function Dialog({
     onClose?.();
     onOpenChange?.(false);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(
-    import_react_aria_components14.ModalOverlay,
+  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+    import_react_aria_components16.ModalOverlay,
     {
       className: "pire-modal-overlay",
       isOpen,
@@ -752,24 +962,24 @@ function Dialog({
       onOpenChange: (o) => {
         if (!o) close();
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_aria_components14.Modal, { className: cx("pire-modal", className), "data-size": size, style, children: /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)(import_react_aria_components14.Dialog, { className: "pire-dialog", children: [
-        title ? /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("header", { className: "pire-dialog-head", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime19.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(import_react_aria_components14.Heading, { slot: "title", className: "pire-dialog-title", children: title }),
-            subtitle ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("p", { className: "pire-dialog-sub", style: { margin: 0 }, children: subtitle }) : null
+      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_aria_components16.Modal, { className: cx("pire-modal", className), "data-size": size, style, children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)(import_react_aria_components16.Dialog, { className: "pire-dialog", children: [
+        title ? /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("header", { className: "pire-dialog-head", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(import_react_aria_components16.Heading, { slot: "title", className: "pire-dialog-title", children: title }),
+            subtitle ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("p", { className: "pire-dialog-sub", style: { margin: 0 }, children: subtitle }) : null
           ] }),
-          showClose ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)(IconButton, { icon: "x", label: "Close", size: "sm", onPress: close }) : null
+          showClose ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(IconButton, { icon: "x", label: "Close", size: "sm", onPress: close }) : null
         ] }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("div", { className: "pire-dialog-body", children }),
-        footer ? /* @__PURE__ */ (0, import_jsx_runtime19.jsx)("footer", { className: "pire-dialog-foot", children: footer }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("div", { className: "pire-dialog-body", children }),
+        footer ? /* @__PURE__ */ (0, import_jsx_runtime21.jsx)("footer", { className: "pire-dialog-foot", children: footer }) : null
       ] }) })
     }
   );
 }
 
 // src/components/data/DataTable.tsx
-var import_react_aria_components15 = require("react-aria-components");
-var import_jsx_runtime20 = require("react/jsx-runtime");
+var import_react_aria_components17 = require("react-aria-components");
+var import_jsx_runtime22 = require("react/jsx-runtime");
 function DataTable({
   columns,
   rows,
@@ -791,8 +1001,8 @@ function DataTable({
     if (keys === "all") return onSelectionChange?.(rows.map((r) => r.id));
     onSelectionChange?.([...keys]);
   };
-  return /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: cx("pire-table-wrap", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(
-    import_react_aria_components15.Table,
+  return /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: cx("pire-table-wrap", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(
+    import_react_aria_components17.Table,
     {
       className: "pire-table",
       "data-density": density,
@@ -808,10 +1018,10 @@ function DataTable({
         if (row) onRowAction(row);
       } : void 0,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react_aria_components15.TableHeader, { className: "pire-thead-row", children: [
-          selectable ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_aria_components15.Column, { className: "pire-th", width: 44, children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Checkbox, { slot: "selection", "aria-label": "Select all rows" }) }) : null,
-          columns.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-            import_react_aria_components15.Column,
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react_aria_components17.TableHeader, { className: "pire-thead-row", children: [
+          selectable ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_aria_components17.Column, { className: "pire-th", width: 44, children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Checkbox, { slot: "selection", "aria-label": "Select all rows" }) }) : null,
+          columns.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            import_react_aria_components17.Column,
             {
               id: c.key,
               className: "pire-th",
@@ -820,9 +1030,9 @@ function DataTable({
               width: c.width,
               "data-align": c.numeric || c.align === "right" ? "right" : c.align,
               "data-allows-sorting": c.sortable ? "true" : void 0,
-              children: /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)("span", { className: "pire-th-inner", children: [
+              children: /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("span", { className: "pire-th-inner", children: [
                 c.label,
-                c.sortable ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
+                c.sortable ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
                   Icon,
                   {
                     size: 12,
@@ -835,10 +1045,10 @@ function DataTable({
             c.key
           ))
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_aria_components15.TableBody, { renderEmptyState: () => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)("div", { className: "pire-table-empty", children: emptyLabel }), children: rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime20.jsxs)(import_react_aria_components15.Row, { id: row.id, className: "pire-tr", "data-pressable": onRowAction ? "true" : void 0, children: [
-          selectable ? /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(import_react_aria_components15.Cell, { className: "pire-td", children: /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(Checkbox, { slot: "selection", "aria-label": "Select row" }) }) : null,
-          columns.map((c) => /* @__PURE__ */ (0, import_jsx_runtime20.jsx)(
-            import_react_aria_components15.Cell,
+        /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_aria_components17.TableBody, { renderEmptyState: () => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)("div", { className: "pire-table-empty", children: emptyLabel }), children: rows.map((row) => /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)(import_react_aria_components17.Row, { id: row.id, className: "pire-tr", "data-pressable": onRowAction ? "true" : void 0, children: [
+          selectable ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(import_react_aria_components17.Cell, { className: "pire-td", children: /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(Checkbox, { slot: "selection", "aria-label": "Select row" }) }) : null,
+          columns.map((c) => /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+            import_react_aria_components17.Cell,
             {
               className: "pire-td",
               "data-numeric": c.numeric ? "true" : void 0,
@@ -854,7 +1064,7 @@ function DataTable({
 }
 
 // src/components/patterns/ValueHelpDialog.tsx
-var import_jsx_runtime21 = require("react/jsx-runtime");
+var import_jsx_runtime23 = require("react/jsx-runtime");
 function ValueHelpDialog({
   isOpen,
   title = "Select a record",
@@ -865,25 +1075,25 @@ function ValueHelpDialog({
   onSelect,
   onClose
 }) {
-  const [query, setQuery] = React6.useState("");
-  React6.useEffect(() => {
+  const [query, setQuery] = React8.useState("");
+  React8.useEffect(() => {
     if (isOpen) setQuery("");
   }, [isOpen]);
-  const filtered = React6.useMemo(() => {
+  const filtered = React8.useMemo(() => {
     const q = query.trim().toLowerCase();
     if (!q) return rows;
     return rows.filter((row) => Object.values(row).some((v) => String(v).toLowerCase().includes(q)));
   }, [rows, query]);
-  return /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
     Dialog,
     {
       isOpen,
       size: "lg",
       title,
       onClose,
-      footer: /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(Button, { variant: "tertiary", onPress: onClose, children: "Cancel" }),
-      children: /* @__PURE__ */ (0, import_jsx_runtime21.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "var(--sp-3)" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+      footer: /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(Button, { variant: "tertiary", onPress: onClose, children: "Cancel" }),
+      children: /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("div", { style: { display: "flex", flexDirection: "column", gap: "var(--sp-3)" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           Input,
           {
             "aria-label": "Search records",
@@ -895,7 +1105,7 @@ function ValueHelpDialog({
             autoFocus: true
           }
         ),
-        /* @__PURE__ */ (0, import_jsx_runtime21.jsx)(
+        /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(
           DataTable,
           {
             "aria-label": typeof title === "string" ? title : "Records",
@@ -915,7 +1125,7 @@ function ValueHelpDialog({
 }
 
 // src/components/forms/ValueHelpField.tsx
-var import_jsx_runtime22 = require("react/jsx-runtime");
+var import_jsx_runtime24 = require("react/jsx-runtime");
 var defaultFormat = (row) => [row.id, row.name ?? row.label ?? row.text].filter(Boolean).join(" \u2014 ");
 function ValueHelpField({
   label,
@@ -935,10 +1145,10 @@ function ValueHelpField({
   className,
   style
 }) {
-  const [open, setOpen] = React7.useState(false);
-  return /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { className: cx(className), style, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsxs)("div", { style: { display: "flex", gap: "var(--sp-2)", alignItems: "flex-end" }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+  const [open, setOpen] = React9.useState(false);
+  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: cx(className), style, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { style: { display: "flex", gap: "var(--sp-2)", alignItems: "flex-end" }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         Input,
         {
           label,
@@ -952,7 +1162,7 @@ function ValueHelpField({
           errorMessage
         }
       ),
-      allowsClear && value ? /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      allowsClear && value ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         IconButton,
         {
           icon: "x",
@@ -962,7 +1172,7 @@ function ValueHelpField({
           onPress: () => onChange?.(null)
         }
       ) : null,
-      /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+      /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
         IconButton,
         {
           icon: "search",
@@ -973,7 +1183,7 @@ function ValueHelpField({
         }
       )
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime22.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(
       ValueHelpDialog,
       {
         isOpen: open,
@@ -988,26 +1198,26 @@ function ValueHelpField({
 }
 
 // src/components/navigation/ShellBar.tsx
-var import_jsx_runtime23 = require("react/jsx-runtime");
+var import_jsx_runtime25 = require("react/jsx-runtime");
 var initials2 = (name) => name.trim().split(/\s+/).slice(0, 2).map((p) => p[0]).join("").toUpperCase();
 function ShellBar({ product, monogram, title, onMenu, onSearch, actions, user, className, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime23.jsxs)("header", { className: cx("pire-shellbar", className), ...rest, children: [
-    onMenu ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(IconButton, { icon: "menu", label: "Open navigation", variant: "inverse", size: "sm", onPress: onMenu }) : null,
-    monogram ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "pire-shellbar-mono", "aria-hidden": "true", children: monogram }) : null,
-    product ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "pire-shellbar-product", children: product }) : null,
-    title ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "pire-shellbar-title", children: title }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "pire-shellbar-spacer" }),
-    onSearch ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)(IconButton, { icon: "search", label: "Search", variant: "inverse", size: "sm", onPress: onSearch }) : null,
+  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)("header", { className: cx("pire-shellbar", className), ...rest, children: [
+    onMenu ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(IconButton, { icon: "menu", label: "Open navigation", variant: "inverse", size: "sm", onPress: onMenu }) : null,
+    monogram ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "pire-shellbar-mono", "aria-hidden": "true", children: monogram }) : null,
+    product ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "pire-shellbar-product", children: product }) : null,
+    title ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "pire-shellbar-title", children: title }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "pire-shellbar-spacer" }),
+    onSearch ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(IconButton, { icon: "search", label: "Search", variant: "inverse", size: "sm", onPress: onSearch }) : null,
     actions,
-    user ? /* @__PURE__ */ (0, import_jsx_runtime23.jsx)("span", { className: "pire-avatar", title: user, "aria-label": user, role: "img", children: initials2(user) }) : null
+    user ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "pire-avatar", title: user, "aria-label": user, role: "img", children: initials2(user) }) : null
   ] });
 }
 
 // src/components/navigation/SideNav.tsx
-var import_react_aria_components16 = require("react-aria-components");
-var import_jsx_runtime24 = require("react/jsx-runtime");
+var import_react_aria_components18 = require("react-aria-components");
+var import_jsx_runtime26 = require("react/jsx-runtime");
 function SideNav({ groups, value, onChange, collapsed, footer, className, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
     "nav",
     {
       className: cx("pire-sidenav", className),
@@ -1015,40 +1225,40 @@ function SideNav({ groups, value, onChange, collapsed, footer, className, ...res
       "aria-label": "Main navigation",
       ...rest,
       children: [
-        groups.map((group, gi) => /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)("div", { className: "pire-sidenav-group", children: [
-          group.label && !collapsed ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "pire-sidenav-label", children: group.label }) : null,
+        groups.map((group, gi) => /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)("div", { className: "pire-sidenav-group", children: [
+          group.label && !collapsed ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "pire-sidenav-label", children: group.label }) : null,
           group.items.map((item) => {
             const selected = item.id === value;
-            const button = /* @__PURE__ */ (0, import_jsx_runtime24.jsxs)(
-              import_react_aria_components16.Button,
+            const button = /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(
+              import_react_aria_components18.Button,
               {
                 className: "pire-sidenav-item",
                 "data-selected": selected ? "true" : void 0,
                 "aria-current": selected ? "page" : void 0,
                 onPress: () => onChange?.(item.id),
                 children: [
-                  item.icon ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Icon, { name: item.icon, size: 16 }) : null,
-                  collapsed ? null : /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { children: item.label }),
-                  item.count != null && !collapsed ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("span", { className: "pire-sidenav-count", children: item.count }) : null
+                  item.icon ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Icon, { name: item.icon, size: 16 }) : null,
+                  collapsed ? null : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { children: item.label }),
+                  item.count != null && !collapsed ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("span", { className: "pire-sidenav-count", children: item.count }) : null
                 ]
               },
               item.id
             );
-            return collapsed ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)(Tooltip, { label: item.label, placement: "right", children: button }, item.id) : button;
+            return collapsed ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Tooltip, { label: item.label, placement: "right", children: button }, item.id) : button;
           })
         ] }, group.label ?? gi)),
-        footer ? /* @__PURE__ */ (0, import_jsx_runtime24.jsx)("div", { className: "pire-sidenav-footer", children: footer }) : null
+        footer ? /* @__PURE__ */ (0, import_jsx_runtime26.jsx)("div", { className: "pire-sidenav-footer", children: footer }) : null
       ]
     }
   );
 }
 
 // src/components/navigation/Tabs.tsx
-var import_react_aria_components17 = require("react-aria-components");
-var import_jsx_runtime25 = require("react/jsx-runtime");
+var import_react_aria_components19 = require("react-aria-components");
+var import_jsx_runtime27 = require("react/jsx-runtime");
 function Tabs({ items, value, defaultValue, onChange, panels, className, style, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(
-    import_react_aria_components17.Tabs,
+  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(
+    import_react_aria_components19.Tabs,
     {
       className,
       style,
@@ -1056,23 +1266,23 @@ function Tabs({ items, value, defaultValue, onChange, panels, className, style,
       defaultSelectedKey: defaultValue,
       onSelectionChange: (k) => onChange?.(String(k)),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_aria_components17.TabList, { className: "pire-tablist", items, "aria-label": rest["aria-label"] ?? "Views", children: (item) => /* @__PURE__ */ (0, import_jsx_runtime25.jsxs)(import_react_aria_components17.Tab, { className: cx("pire-tab"), id: item.id, isDisabled: item.isDisabled, children: [
-          item.icon ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(Icon, { name: item.icon, size: 16 }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_aria_components19.TabList, { className: "pire-tablist", items, "aria-label": rest["aria-label"] ?? "Views", children: (item) => /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)(import_react_aria_components19.Tab, { className: cx("pire-tab"), id: item.id, isDisabled: item.isDisabled, children: [
+          item.icon ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(Icon, { name: item.icon, size: 16 }) : null,
           item.label,
-          item.count != null ? /* @__PURE__ */ (0, import_jsx_runtime25.jsx)("span", { className: "pire-tab-count", children: item.count }) : null
+          item.count != null ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)("span", { className: "pire-tab-count", children: item.count }) : null
         ] }) }),
-        items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime25.jsx)(import_react_aria_components17.TabPanel, { id: item.id, className: panels ? "pire-tabpanel" : void 0, children: panels?.[item.id] }, item.id))
+        items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(import_react_aria_components19.TabPanel, { id: item.id, className: panels ? "pire-tabpanel" : void 0, children: panels?.[item.id] }, item.id))
       ]
     }
   );
 }
 
 // src/components/navigation/Breadcrumb.tsx
-var import_react_aria_components18 = require("react-aria-components");
-var import_jsx_runtime26 = require("react/jsx-runtime");
+var import_react_aria_components20 = require("react-aria-components");
+var import_jsx_runtime28 = require("react/jsx-runtime");
 function Breadcrumb({ items, onNavigate, className, style }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(
-    import_react_aria_components18.Breadcrumbs,
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
+    import_react_aria_components20.Breadcrumbs,
     {
       className: cx("pire-breadcrumbs", className),
       style,
@@ -1080,9 +1290,9 @@ function Breadcrumb({ items, onNavigate, className, style }) {
       onAction: (key) => onNavigate?.(String(key)),
       children: (item) => {
         const last = items[items.length - 1] === item;
-        return /* @__PURE__ */ (0, import_jsx_runtime26.jsxs)(import_react_aria_components18.Breadcrumb, { className: "pire-breadcrumb", id: item.id ?? item.label, children: [
-          last ? item.label : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(import_react_aria_components18.Link, { href: item.href, children: item.label }),
-          last ? null : /* @__PURE__ */ (0, import_jsx_runtime26.jsx)(Icon, { name: "chevron-right", size: 12, style: { color: "var(--text-tertiary)" } })
+        return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react_aria_components20.Breadcrumb, { className: "pire-breadcrumb", id: item.id ?? item.label, children: [
+          last ? item.label : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_aria_components20.Link, { href: item.href, children: item.label }),
+          last ? null : /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icon, { name: "chevron-right", size: 12, style: { color: "var(--text-tertiary)" } })
         ] });
       }
     }
@@ -1090,7 +1300,7 @@ function Breadcrumb({ items, onNavigate, className, style }) {
 }
 
 // src/components/navigation/Pagination.tsx
-var import_jsx_runtime27 = require("react/jsx-runtime");
+var import_jsx_runtime29 = require("react/jsx-runtime");
 function Pagination({
   page = 1,
   pageSize = 25,
@@ -1104,15 +1314,15 @@ function Pagination({
   const pages = Math.max(1, Math.ceil(total / pageSize));
   const from = total === 0 ? 0 : (page - 1) * pageSize + 1;
   const to = Math.min(total, page * pageSize);
-  return /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("nav", { className: cx("pire-pagination", className), style, "aria-label": "Pagination", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { className: "pire-pagination-count", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("nav", { className: cx("pire-pagination", className), style, "aria-label": "Pagination", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("span", { className: "pire-pagination-count", children: [
       from.toLocaleString(),
       "\u2013",
       to.toLocaleString(),
       " of ",
       total.toLocaleString()
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       IconButton,
       {
         icon: "chevron-left",
@@ -1123,13 +1333,13 @@ function Pagination({
         onPress: () => onPageChange?.(page - 1)
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsxs)("span", { className: "pire-pagination-count", "aria-live": "polite", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("span", { className: "pire-pagination-count", "aria-live": "polite", children: [
       "Page ",
       page,
       " of ",
       pages
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       IconButton,
       {
         icon: "chevron-right",
@@ -1140,7 +1350,7 @@ function Pagination({
         onPress: () => onPageChange?.(page + 1)
       }
     ),
-    onPageSizeChange ? /* @__PURE__ */ (0, import_jsx_runtime27.jsx)(
+    onPageSizeChange ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
       Select,
       {
         "aria-label": "Rows per page",
@@ -1156,7 +1366,7 @@ function Pagination({
 }
 
 // src/components/feedback/InlineMessage.tsx
-var import_jsx_runtime28 = require("react/jsx-runtime");
+var import_jsx_runtime30 = require("react/jsx-runtime");
 var KIND_ICON = {
   info: "info",
   success: "check-circle-2",
@@ -1165,7 +1375,7 @@ var KIND_ICON = {
 };
 function InlineMessage({ kind = "info", title, action, onClose, children, className, ...rest }) {
   const assertive = kind === "error" || kind === "warning";
-  return /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
     "div",
     {
       className: cx("pire-msg", className),
@@ -1174,21 +1384,21 @@ function InlineMessage({ kind = "info", title, action, onClose, children, classN
       "aria-live": assertive ? "assertive" : "polite",
       ...rest,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(Icon, { name: KIND_ICON[kind], size: 16, style: { marginTop: 2 } }),
-        /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: "var(--sp-1)" }, children: [
-          title ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "pire-msg-title", children: title }) : null,
-          children ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("span", { className: "pire-msg-body", children }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { name: KIND_ICON[kind], size: 16, style: { marginTop: 2 } }),
+        /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: "var(--sp-1)" }, children: [
+          title ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "pire-msg-title", children: title }) : null,
+          children ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "pire-msg-body", children }) : null,
           action
         ] }),
-        onClose ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(IconButton, { icon: "x", label: "Dismiss message", size: "sm", onPress: onClose }) : null
+        onClose ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(IconButton, { icon: "x", label: "Dismiss message", size: "sm", onPress: onClose }) : null
       ]
     }
   );
 }
 
 // src/components/feedback/ProgressBar.tsx
-var import_react_aria_components19 = require("react-aria-components");
-var import_jsx_runtime29 = require("react/jsx-runtime");
+var import_react_aria_components21 = require("react-aria-components");
+var import_jsx_runtime31 = require("react/jsx-runtime");
 function ProgressBar({
   value = 0,
   minValue = 0,
@@ -1201,8 +1411,8 @@ function ProgressBar({
   className,
   style
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(
-    import_react_aria_components19.ProgressBar,
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    import_react_aria_components21.ProgressBar,
     {
       className: cx("pire-progress", className),
       "data-status": status,
@@ -1212,20 +1422,20 @@ function ProgressBar({
       maxValue,
       isIndeterminate,
       style,
-      children: ({ percentage, valueText }) => /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)(import_jsx_runtime29.Fragment, { children: [
-        label || showValue ? /* @__PURE__ */ (0, import_jsx_runtime29.jsxs)("div", { className: "pire-progress-head", children: [
-          label ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)(import_react_aria_components19.Label, { children: label }) : /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", {}),
-          showValue && !isIndeterminate ? /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("span", { className: "pire-numeric", children: valueText }) : null
+      children: ({ percentage, valueText }) => /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
+        label || showValue ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("div", { className: "pire-progress-head", children: [
+          label ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_aria_components21.Label, { children: label }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", {}),
+          showValue && !isIndeterminate ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "pire-numeric", children: valueText }) : null
         ] }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "pire-progress-track", children: /* @__PURE__ */ (0, import_jsx_runtime29.jsx)("div", { className: "pire-progress-fill", style: { width: `${isIndeterminate ? 40 : percentage}%` } }) })
+        /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "pire-progress-track", children: /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { className: "pire-progress-fill", style: { width: `${isIndeterminate ? 40 : percentage}%` } }) })
       ] })
     }
   );
 }
 
 // src/components/feedback/Toast.tsx
-var React8 = __toESM(require("react"), 1);
-var import_jsx_runtime30 = require("react/jsx-runtime");
+var React10 = __toESM(require("react"), 1);
+var import_jsx_runtime32 = require("react/jsx-runtime");
 var KIND_ICON2 = {
   info: "info",
   success: "check-circle-2",
@@ -1233,7 +1443,7 @@ var KIND_ICON2 = {
   error: "alert-octagon"
 };
 function Toast({ kind = "success", onClose, position = "bottom-center", children, className, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
     "div",
     {
       className: cx("pire-toast", className),
@@ -1242,39 +1452,84 @@ function Toast({ kind = "success", onClose, position = "bottom-center", children
       "aria-live": kind === "error" ? "assertive" : "polite",
       ...rest,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Icon, { name: KIND_ICON2[kind], size: 16 }),
-        /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { style: { flex: 1 }, children }),
-        onClose ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(IconButton, { icon: "x", label: "Dismiss", size: "sm", variant: "inverse", onPress: onClose }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Icon, { name: KIND_ICON2[kind], size: 16 }),
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { style: { flex: 1 }, children }),
+        onClose ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(IconButton, { icon: "x", label: "Dismiss", size: "sm", variant: "inverse", onPress: onClose }) : null
       ]
     }
   );
 }
-var ToastContext = React8.createContext(null);
+var ToastContext = React10.createContext(null);
 function ToastProvider({ children, timeout = 6e3 }) {
-  const [toasts, setToasts] = React8.useState([]);
-  const close = React8.useCallback((id) => setToasts((t) => t.filter((x) => x.id !== id)), []);
-  const add = React8.useCallback((toast) => {
+  const [toasts, setToasts] = React10.useState([]);
+  const close = React10.useCallback((id) => setToasts((t) => t.filter((x) => x.id !== id)), []);
+  const add = React10.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 = React8.useMemo(() => ({ add, close }), [add, close]);
-  return /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(ToastContext.Provider, { value, children: [
+  const value = React10.useMemo(() => ({ add, close }), [add, close]);
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(ToastContext.Provider, { value, children: [
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "pire-toast-region", role: "region", "aria-label": "Notifications", children: toasts.map((t) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Toast, { kind: t.kind, onClose: () => close(t.id), style: { position: "static", transform: "none" }, children: t.message }, t.id)) })
+    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "pire-toast-region", role: "region", "aria-label": "Notifications", children: toasts.map((t) => /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Toast, { kind: t.kind, onClose: () => close(t.id), style: { position: "static", transform: "none" }, children: t.message }, t.id)) })
   ] });
 }
 function useToast() {
-  const ctx = React8.useContext(ToastContext);
+  const ctx = React10.useContext(ToastContext);
   if (!ctx) throw new Error("useToast must be used inside <ToastProvider>");
   return ctx;
 }
 
+// src/components/feedback/Skeleton.tsx
+var import_jsx_runtime33 = require("react/jsx-runtime");
+function Skeleton({ shape = "text", width, height, className, style, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    "div",
+    {
+      className: cx("pire-skeleton", className),
+      "data-shape": shape,
+      "aria-hidden": "true",
+      style: { width, height, ...style },
+      ...rest
+    }
+  );
+}
+var BAR_WIDTHS = ["72%", "54%", "86%", "63%"];
+function SkeletonTableRow({ columns, density = "regular", className, style, ...rest }) {
+  const cells = typeof columns === "number" ? Array.from({ length: columns }, () => ({})) : columns;
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+    "div",
+    {
+      className: cx("pire-skeleton-row", className),
+      "data-density": density,
+      "aria-hidden": "true",
+      style,
+      ...rest,
+      children: cells.map((c, i) => {
+        const align = c.numeric ? "right" : c.align ?? "left";
+        return (
+          // biome-ignore lint/suspicious/noArrayIndexKey: columns are positional and never reordered.
+          /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(
+            "div",
+            {
+              className: "pire-skeleton-cell",
+              "data-align": align,
+              style: { width: c.width, flex: c.width ? "0 0 auto" : void 0 },
+              children: /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Skeleton, { width: BAR_WIDTHS[i % BAR_WIDTHS.length] })
+            },
+            i
+          )
+        );
+      })
+    }
+  );
+}
+
 // src/components/data/KpiTile.tsx
-var import_react_aria_components20 = require("react-aria-components");
-var import_jsx_runtime31 = require("react/jsx-runtime");
+var import_react_aria_components22 = require("react-aria-components");
+var import_jsx_runtime34 = require("react/jsx-runtime");
 function KpiTile({
   label,
   value,
@@ -1290,50 +1545,50 @@ function KpiTile({
   style
 }) {
   const tone = deltaTone ?? (deltaDirection === "down" ? "negative" : "positive");
-  const body = /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)(import_jsx_runtime31.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { className: "pire-kpi-label", children: [
-      icon ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Icon, { name: icon, size: 16 }) : null,
+  const body = /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_jsx_runtime34.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: "pire-kpi-label", children: [
+      icon ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon, { name: icon, size: 16 }) : null,
       label
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { className: "pire-kpi-value", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: "pire-kpi-value", children: [
       value,
-      unit ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "pire-kpi-unit", children: unit }) : null
+      unit ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "pire-kpi-unit", children: unit }) : null
     ] }),
-    delta ? /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("span", { className: "pire-kpi-delta", "data-tone": tone, children: [
-      deltaDirection ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(Icon, { name: deltaDirection === "up" ? "trending-up" : "trending-down", size: 12 }) : null,
+    delta ? /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: "pire-kpi-delta", "data-tone": tone, children: [
+      deltaDirection ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon, { name: deltaDirection === "up" ? "trending-up" : "trending-down", size: 12 }) : null,
       delta
     ] }) : null,
-    footnote ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "pire-kpi-foot", children: footnote }) : null
+    footnote ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "pire-kpi-foot", children: footnote }) : null
   ] });
   const props = { className: cx("pire-kpi", className), "data-status": status, style };
-  return onPress ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(import_react_aria_components20.Button, { ...props, "data-pressable": "true", onPress, children: body }) : /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("div", { ...props, children: body });
+  return onPress ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react_aria_components22.Button, { ...props, "data-pressable": "true", onPress, children: body }) : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("div", { ...props, children: body });
 }
 
 // src/components/data/ObjectHeader.tsx
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var import_jsx_runtime35 = require("react/jsx-runtime");
 function ObjectHeader({ title, subtitle, id, breadcrumb, badge, facts, actions, className, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("header", { className: cx("pire-objheader", className), ...rest, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("header", { className: cx("pire-objheader", className), ...rest, children: [
     breadcrumb,
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "pire-objheader-row", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { style: { minWidth: 0 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("h1", { className: "pire-objheader-title", children: title }),
-        subtitle || id ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "pire-objheader-sub", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "pire-objheader-row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { style: { minWidth: 0 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("h1", { className: "pire-objheader-title", children: title }),
+        subtitle || id ? /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "pire-objheader-sub", children: [
           subtitle,
-          id ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "pire-objheader-id", children: id }) : null
+          id ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "pire-objheader-id", children: id }) : null
         ] }) : null
       ] }),
       badge,
-      actions ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "pire-objheader-actions", children: actions }) : null
+      actions ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "pire-objheader-actions", children: actions }) : null
     ] }),
-    facts?.length ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("dl", { className: "pire-facts", style: { margin: 0 }, children: facts.map((fact) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("dt", { className: "pire-fact-label", children: fact.label }),
-      /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("dd", { className: "pire-fact-value", "data-numeric": fact.numeric ? "true" : void 0, style: { margin: 0 }, children: fact.value })
+    facts?.length ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("dl", { className: "pire-facts", style: { margin: 0 }, children: facts.map((fact) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("dt", { className: "pire-fact-label", children: fact.label }),
+      /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("dd", { className: "pire-fact-value", "data-numeric": fact.numeric ? "true" : void 0, style: { margin: 0 }, children: fact.value })
     ] }, fact.label)) }) : null
   ] });
 }
 
 // src/components/data/FilterBar.tsx
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function FilterBar({
   children,
   activeFilters = [],
@@ -1345,115 +1600,115 @@ function FilterBar({
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("section", { className: cx("pire-filterbar", className), "aria-label": "Filters", ...rest, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "pire-filterbar-controls", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("section", { className: cx("pire-filterbar", className), "aria-label": "Filters", ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "pire-filterbar-controls", children: [
       children,
-      onGo ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Button, { variant: "primary", onPress: onGo, children: "Go" }) : null
+      onGo ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Button, { variant: "primary", onPress: onGo, children: "Go" }) : null
     ] }),
-    activeFilters.length || resultLabel || actions ? /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("div", { className: "pire-filterbar-foot", children: [
-      activeFilters.map((filter) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Tag, { onRemove: onRemoveFilter ? () => onRemoveFilter(filter.id) : void 0, children: filter.label }, filter.id)),
-      activeFilters.length && onClear ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Button, { variant: "tertiary", size: "sm", onPress: onClear, children: "Clear all" }) : null,
-      resultLabel ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "pire-filterbar-result", "aria-live": "polite", children: resultLabel }) : null,
-      actions ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("div", { className: "pire-filterbar-actions", children: actions }) : null
+    activeFilters.length || resultLabel || actions ? /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("div", { className: "pire-filterbar-foot", children: [
+      activeFilters.map((filter) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Tag, { onRemove: onRemoveFilter ? () => onRemoveFilter(filter.id) : void 0, children: filter.label }, filter.id)),
+      activeFilters.length && onClear ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Button, { variant: "tertiary", size: "sm", onPress: onClear, children: "Clear all" }) : null,
+      resultLabel ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "pire-filterbar-result", "aria-live": "polite", children: resultLabel }) : null,
+      actions ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: "pire-filterbar-actions", children: actions }) : null
     ] }) : null
   ] });
 }
 
 // src/components/data/DescriptionList.tsx
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 function DescriptionList({ items, layout = "rows", columns = 3, className, style, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
     "dl",
     {
       className: cx("pire-dl", className),
       "data-layout": layout,
       style: { ...layout === "grid" ? { "--pire-dl-cols": columns } : null, ...style },
       ...rest,
-      children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("div", { className: "pire-dl-row", "data-emphasis": item.emphasis ? "true" : void 0, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("dt", { className: "pire-dl-term", children: [
+      children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { className: "pire-dl-row", "data-emphasis": item.emphasis ? "true" : void 0, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("dt", { className: "pire-dl-term", children: [
           item.label,
           item.hint
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("dd", { className: "pire-dl-value", "data-numeric": item.numeric ? "true" : void 0, children: item.value })
+        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("dd", { className: "pire-dl-value", "data-numeric": item.numeric ? "true" : void 0, children: item.value })
       ] }, i))
     }
   );
 }
 
 // src/components/data/Timeline.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function Timeline({ entries, reverse = false, className, ...rest }) {
   const list = reverse ? [...entries].reverse() : entries;
-  return /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("ol", { className: cx("pire-timeline", className), ...rest, children: list.map((entry, i) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("li", { className: "pire-timeline-item", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "pire-timeline-time", children: entry.time }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "pire-timeline-text", children: entry.event }),
-    entry.actor ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "pire-timeline-actor", children: entry.actor }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("ol", { className: cx("pire-timeline", className), ...rest, children: list.map((entry, i) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("li", { className: "pire-timeline-item", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "pire-timeline-time", children: entry.time }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "pire-timeline-text", children: entry.event }),
+    entry.actor ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "pire-timeline-actor", children: entry.actor }) : null
   ] }, entry.id ?? i)) });
 }
 
 // src/components/data/LinkList.tsx
-var import_react_aria_components21 = require("react-aria-components");
-var import_jsx_runtime36 = require("react/jsx-runtime");
+var import_react_aria_components23 = require("react-aria-components");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 function LinkList({ items, onSelect, className, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("div", { className: cx("pire-linklist", className), role: "list", ...rest, children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_react_aria_components21.Button, { className: "pire-linklist-item", onPress: () => onSelect?.(item.id), children: [
-    item.icon ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Icon, { name: item.icon, size: 16, style: { color: "var(--text-secondary)" } }) : null,
-    item.key ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "pire-linklist-key", children: item.key }) : null,
-    item.text ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "pire-linklist-text", children: item.text }) : null,
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: cx("pire-linklist", className), role: "list", ...rest, children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(import_react_aria_components23.Button, { className: "pire-linklist-item", onPress: () => onSelect?.(item.id), children: [
+    item.icon ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Icon, { name: item.icon, size: 16, style: { color: "var(--text-secondary)" } }) : null,
+    item.key ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "pire-linklist-key", children: item.key }) : null,
+    item.text ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "pire-linklist-text", children: item.text }) : null,
     item.trailing
   ] }, item.id)) });
 }
 
 // src/components/layout/PageHeader.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime40 = require("react/jsx-runtime");
 function PageHeader({ title, subtitle, actions, className, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("header", { className: cx("pire-pageheader", className), ...rest, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { style: { minWidth: 0 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("h1", { className: "pire-pageheader-title", children: title }),
-      subtitle ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("p", { className: "pire-pageheader-sub", children: subtitle }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("header", { className: cx("pire-pageheader", className), ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("div", { style: { minWidth: 0 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("h1", { className: "pire-pageheader-title", children: title }),
+      subtitle ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("p", { className: "pire-pageheader-sub", children: subtitle }) : null
     ] }),
-    actions ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("div", { className: "pire-pageheader-actions", children: actions }) : null
+    actions ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "pire-pageheader-actions", children: actions }) : null
   ] });
 }
 
 // src/components/layout/SectionHeader.tsx
-var import_jsx_runtime38 = require("react/jsx-runtime");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 function SectionHeader({ title, meta, actions, className, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: cx("pire-sectionhead", className), ...rest, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "pire-eyebrow", children: title }),
-    meta ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { style: { font: "var(--type-caption)", color: "var(--text-tertiary)" }, children: meta }) : null,
-    actions ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "pire-sectionhead-actions", children: actions }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: cx("pire-sectionhead", className), ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "pire-eyebrow", children: title }),
+    meta ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { style: { font: "var(--type-caption)", color: "var(--text-tertiary)" }, children: meta }) : null,
+    actions ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "pire-sectionhead-actions", children: actions }) : null
   ] });
 }
 
 // src/components/layout/SelectionBar.tsx
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 function SelectionBar({ count, noun = "record", children, actions, className, ...rest }) {
   if (!count) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { className: cx("pire-selectionbar", className), role: "status", "aria-live": "polite", ...rest, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("span", { className: "pire-selectionbar-count", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: cx("pire-selectionbar", className), role: "status", "aria-live": "polite", ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("span", { className: "pire-selectionbar-count", children: [
       count.toLocaleString(),
       " ",
       noun,
       count === 1 ? "" : "s",
       " selected"
     ] }),
-    children ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { style: { color: "var(--text-secondary)", font: "var(--type-caption)" }, children }) : null,
-    actions ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "pire-selectionbar-actions", children: actions }) : null
+    children ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { style: { color: "var(--text-secondary)", font: "var(--type-caption)" }, children }) : null,
+    actions ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "pire-selectionbar-actions", children: actions }) : null
   ] });
 }
 
 // src/components/layout/FooterBar.tsx
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 function FooterBar({ note, actions, children, className, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("footer", { className: cx("pire-footerbar", className), ...rest, children: [
-    note ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "pire-footerbar-note", children: note }) : null,
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("footer", { className: cx("pire-footerbar", className), ...rest, children: [
+    note ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "pire-footerbar-note", children: note }) : null,
     children,
-    actions ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "pire-footerbar-actions", children: actions }) : null
+    actions ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "pire-footerbar-actions", children: actions }) : null
   ] });
 }
 
 // src/components/patterns/ConfirmDialog.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 function ConfirmDialog({
   isOpen,
   title,
@@ -1467,7 +1722,7 @@ function ConfirmDialog({
   onConfirm,
   onCancel
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(
     Dialog,
     {
       isOpen,
@@ -1477,12 +1732,12 @@ function ConfirmDialog({
       onClose: onCancel,
       isDismissable: !isBusy,
       showClose: false,
-      footer: /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Button, { variant: "tertiary", isDisabled: isBusy, onPress: onCancel, children: cancelLabel }),
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Button, { variant: tone === "danger" ? "danger" : "primary", isDisabled: isBusy, onPress: onConfirm, children: isBusy ? "Working\u2026" : confirmLabel })
+      footer: /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)(import_jsx_runtime44.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Button, { variant: "tertiary", isDisabled: isBusy, onPress: onCancel, children: cancelLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(Button, { variant: tone === "danger" ? "danger" : "primary", isDisabled: isBusy, onPress: onConfirm, children: isBusy ? "Working\u2026" : confirmLabel })
       ] }),
       children: [
-        consequence ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(InlineMessage, { kind: tone === "danger" ? "error" : "warning", style: { marginBottom: children ? "var(--sp-3)" : 0 }, children: consequence }) : null,
+        consequence ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)(InlineMessage, { kind: tone === "danger" ? "error" : "warning", style: { marginBottom: children ? "var(--sp-3)" : 0 }, children: consequence }) : null,
         children
       ]
     }
@@ -1490,11 +1745,11 @@ function ConfirmDialog({
 }
 
 // src/components/patterns/SidePanel.tsx
-var import_react_aria_components22 = require("react-aria-components");
-var import_jsx_runtime42 = require("react/jsx-runtime");
+var import_react_aria_components24 = require("react-aria-components");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 function SidePanel({ isOpen, title, subtitle, width = 400, children, footer, onClose, className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(
-    import_react_aria_components22.ModalOverlay,
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(
+    import_react_aria_components24.ModalOverlay,
     {
       className: "pire-sidepanel-overlay",
       isOpen,
@@ -1502,34 +1757,34 @@ function SidePanel({ isOpen, title, subtitle, width = 400, children, footer, onC
       onOpenChange: (o) => {
         if (!o) onClose?.();
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_aria_components22.Modal, { className: cx("pire-sidepanel", className), style: { width }, children: /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(import_react_aria_components22.Dialog, { className: "pire-dialog", style: { height: "100%" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("header", { className: "pire-dialog-head", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(import_react_aria_components22.Heading, { slot: "title", className: "pire-dialog-title", children: title }),
-            subtitle ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("p", { className: "pire-dialog-sub", style: { margin: 0 }, children: subtitle }) : null
+      children: /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react_aria_components24.Modal, { className: cx("pire-sidepanel", className), style: { width }, children: /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_react_aria_components24.Dialog, { className: "pire-dialog", style: { height: "100%" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("header", { className: "pire-dialog-head", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(import_react_aria_components24.Heading, { slot: "title", className: "pire-dialog-title", children: title }),
+            subtitle ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("p", { className: "pire-dialog-sub", style: { margin: 0 }, children: subtitle }) : null
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(IconButton, { icon: "x", label: "Close panel", size: "sm", onPress: onClose })
+          /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(IconButton, { icon: "x", label: "Close panel", size: "sm", onPress: onClose })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "pire-dialog-body", style: { flex: 1 }, children }),
-        footer ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("footer", { className: "pire-dialog-foot", children: footer }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: "pire-dialog-body", style: { flex: 1 }, children }),
+        footer ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("footer", { className: "pire-dialog-foot", children: footer }) : null
       ] }) })
     }
   );
 }
 
 // src/components/patterns/EmptyState.tsx
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 function EmptyState({ icon = "file-text", title, action, compact, children, className, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: cx("pire-empty", className), "data-compact": compact ? "true" : void 0, ...rest, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Icon, { name: icon, size: 24, className: "pire-empty-icon" }),
-    title ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { className: "pire-empty-title", style: { margin: 0 }, children: title }) : null,
-    children ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("p", { className: "pire-empty-body", style: { margin: 0 }, children }) : null,
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)("div", { className: cx("pire-empty", className), "data-compact": compact ? "true" : void 0, ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Icon, { name: icon, size: 24, className: "pire-empty-icon" }),
+    title ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("p", { className: "pire-empty-title", style: { margin: 0 }, children: title }) : null,
+    children ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("p", { className: "pire-empty-body", style: { margin: 0 }, children }) : null,
     action
   ] });
 }
 
 // src/index.ts
-var import_react_aria_components23 = require("react-aria-components");
+var import_react_aria_components25 = require("react-aria-components");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Avatar,
@@ -1559,6 +1814,7 @@ var import_react_aria_components23 = require("react-aria-components");
   Menu,
   MenuItem,
   MenuTrigger,
+  MultiComboBox,
   NumberField,
   ObjectHeader,
   PageHeader,
@@ -1575,9 +1831,12 @@ var import_react_aria_components23 = require("react-aria-components");
   ShellBar,
   SideNav,
   SidePanel,
+  Skeleton,
+  SkeletonTableRow,
   Switch,
   Tabs,
   Tag,
+  TextArea,
   Timeline,
   Toast,
   ToastProvider,