@orianatech/pire 0.16.0 → 0.18.0

package/dist/index.cjs

@@ -45,12 +45,17 @@ __export(src_exports, {
   DateRangePicker: () => DateRangePicker,
   DescriptionList: () => DescriptionList,
   Dialog: () => Dialog,
+  DialogActions: () => DialogActions,
+  DialogBody: () => DialogBody,
+  DialogDescription: () => DialogDescription,
+  DialogTitle: () => DialogTitle,
   DialogTrigger: () => import_react_aria_components34.DialogTrigger,
   DonutChart: () => DonutChart,
   EmptyState: () => EmptyState,
   FileDropZone: () => FileDropZone,
   FileUpload: () => FileUpload,
   FilterBar: () => FilterBar,
+  Focusable: () => import_react_aria_components35.Focusable,
   FooterBar: () => FooterBar,
   FormField: () => FormField,
   Heading: () => Heading,
@@ -92,6 +97,7 @@ __export(src_exports, {
   SidePanel: () => SidePanel,
   Skeleton: () => Skeleton,
   SkeletonTableRow: () => SkeletonTableRow,
+  SplitPane: () => SplitPane,
   Strong: () => Strong,
   SubmenuTrigger: () => import_react_aria_components34.SubmenuTrigger,
   Switch: () => Switch,
@@ -524,15 +530,17 @@ var Button = React.forwardRef(function Button2({ children, variant = "secondary"
 });
 
 // src/components/core/IconButton.tsx
-var React2 = __toESM(require("react"), 1);
+var React3 = __toESM(require("react"), 1);
 var import_react_aria_components3 = require("react-aria-components");
 
 // src/components/feedback/Tooltip.tsx
+var React2 = __toESM(require("react"), 1);
 var import_react_aria_components2 = require("react-aria-components");
 var import_jsx_runtime3 = require("react/jsx-runtime");
 function Tooltip({ label, placement = "top", delay = 500, children }) {
+  const target = React2.isValidElement(children) ? React2.cloneElement(children, { className: cx(children.props.className, "pire-tooltip-target") }) : /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", { className: "pire-tooltip-target", children });
   return /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_aria_components2.TooltipTrigger, { delay, closeDelay: 0, children: [
-    children,
+    /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_aria_components2.Focusable, { children: target }),
     /* @__PURE__ */ (0, import_jsx_runtime3.jsxs)(import_react_aria_components2.Tooltip, { className: "pire-tooltip", placement, offset: 6, children: [
       /* @__PURE__ */ (0, import_jsx_runtime3.jsx)(import_react_aria_components2.OverlayArrow, { children: /* @__PURE__ */ (0, import_jsx_runtime3.jsx)("span", {}) }),
       label
@@ -542,7 +550,7 @@ function Tooltip({ label, placement = "top", delay = 500, children }) {
 
 // src/components/core/IconButton.tsx
 var import_jsx_runtime4 = require("react/jsx-runtime");
-var IconButton = React2.forwardRef(function IconButton2({
+var IconButton = React3.forwardRef(function IconButton2({
   icon,
   label,
   size = "md",
@@ -630,11 +638,11 @@ function Card({ title, subtitle, icon, actions, footer, interactive, children, c
 }
 
 // src/components/core/Avatar.tsx
-var React3 = __toESM(require("react"), 1);
+var React4 = __toESM(require("react"), 1);
 var import_jsx_runtime8 = require("react/jsx-runtime");
 var initials = (name) => name.trim().split(/\s+/).slice(0, 2).map((p) => p[0]).join("").toUpperCase();
 function Avatar({ name, size = "md", src, className, ...rest }) {
-  const [failed, setFailed] = React3.useState(false);
+  const [failed, setFailed] = React4.useState(false);
   return /* @__PURE__ */ (0, import_jsx_runtime8.jsx)("span", { className: cx("pire-avatar", className), "data-size": size, role: "img", "aria-label": name, ...rest, children: src && !failed ? /* @__PURE__ */ (0, import_jsx_runtime8.jsx)(
     "img",
     {
@@ -647,7 +655,7 @@ function Avatar({ name, size = "md", src, className, ...rest }) {
 }
 
 // src/components/core/SegmentedControl.tsx
-var React4 = __toESM(require("react"), 1);
+var React5 = __toESM(require("react"), 1);
 var import_react_aria_components5 = require("react-aria-components");
 var import_jsx_runtime9 = require("react/jsx-runtime");
 function SegmentedControl({
@@ -661,7 +669,7 @@ function SegmentedControl({
   style,
   ...rest
 }) {
-  const selected = React4.useMemo(() => new Set(value ? [value] : defaultValue ? [defaultValue] : []), [value, defaultValue]);
+  const selected = React5.useMemo(() => new Set(value ? [value] : defaultValue ? [defaultValue] : []), [value, defaultValue]);
   return /* @__PURE__ */ (0, import_jsx_runtime9.jsx)(
     import_react_aria_components5.ToggleButtonGroup,
     {
@@ -823,11 +831,11 @@ function FormField({ label, htmlFor, isRequired, hint, error, layout = "stacked"
 }
 
 // src/components/forms/Input.tsx
-var React6 = __toESM(require("react"), 1);
+var React7 = __toESM(require("react"), 1);
 var import_react_aria_components9 = require("react-aria-components");
 
 // src/i18n/PireIntlProvider.tsx
-var React5 = __toESM(require("react"), 1);
+var React6 = __toESM(require("react"), 1);
 
 // src/i18n/messages.ts
 var enMessages = {
@@ -837,6 +845,7 @@ var enMessages = {
   dataTableSelectAll: "Select all rows",
   dataTableSelectRow: "Select row",
   dataTableLoading: "Loading records",
+  dataTableSummaryRow: "Summary",
   dialogClose: "Close",
   sidePanelClose: "Close panel",
   inlineMessageDismiss: "Dismiss message",
@@ -868,6 +877,9 @@ var enMessages = {
   paginationNext: "Next page",
   paginationRowsPerPage: "Rows per page",
   sideNavLabel: "Main navigation",
+  splitPaneList: "List",
+  splitPaneDetail: "Detail",
+  splitPaneBack: "Back to list",
   fileUploadChoose: "Choose files",
   fileUploadRemoveNamed: "Remove {name}",
   fileUploadUploading: "Uploading",
@@ -892,6 +904,7 @@ var esMessages = {
   dataTableSelectAll: "Seleccionar todas las filas",
   dataTableSelectRow: "Seleccionar fila",
   dataTableLoading: "Cargando registros",
+  dataTableSummaryRow: "Resumen",
   dialogClose: "Cerrar",
   sidePanelClose: "Cerrar panel",
   inlineMessageDismiss: "Descartar mensaje",
@@ -923,6 +936,9 @@ var esMessages = {
   paginationNext: "P\xE1gina siguiente",
   paginationRowsPerPage: "Filas por p\xE1gina",
   sideNavLabel: "Navegaci\xF3n principal",
+  splitPaneList: "Lista",
+  splitPaneDetail: "Detalle",
+  splitPaneBack: "Volver a la lista",
   fileUploadChoose: "Elegir archivos",
   fileUploadRemoveNamed: "Quitar {name}",
   fileUploadUploading: "Subiendo",
@@ -943,19 +959,19 @@ var esMessages = {
 
 // src/i18n/PireIntlProvider.tsx
 var import_jsx_runtime16 = require("react/jsx-runtime");
-var MessagesContext = React5.createContext(enMessages);
+var MessagesContext = React6.createContext(enMessages);
 function PireIntlProvider({ messages, children }) {
-  const value = React5.useMemo(
+  const value = React6.useMemo(
     () => messages ? { ...enMessages, ...messages } : enMessages,
     [messages]
   );
   return /* @__PURE__ */ (0, import_jsx_runtime16.jsx)(MessagesContext.Provider, { value, children });
 }
 function usePireMessages() {
-  return React5.useContext(MessagesContext);
+  return React6.useContext(MessagesContext);
 }
 function useMessage(key, override) {
-  const messages = React5.useContext(MessagesContext);
+  const messages = React6.useContext(MessagesContext);
   return override ?? messages[key];
 }
 
@@ -980,7 +996,7 @@ function Input({
 }) {
   const msg = usePireMessages();
   const isControlled = rest.value !== void 0;
-  const [ownValue, setOwnValue] = React6.useState(rest.defaultValue ?? "");
+  const [ownValue, setOwnValue] = React7.useState(rest.defaultValue ?? "");
   const currentValue = isControlled ? rest.value : ownValue;
   const handleChange = (next) => {
     setOwnValue(next);
@@ -1027,10 +1043,10 @@ function Input({
 }
 
 // src/components/forms/TextArea.tsx
-var React7 = __toESM(require("react"), 1);
+var React8 = __toESM(require("react"), 1);
 var import_react_aria_components10 = require("react-aria-components");
 var import_jsx_runtime18 = require("react/jsx-runtime");
-var useIsomorphicLayoutEffect = typeof document === "undefined" ? React7.useEffect : React7.useLayoutEffect;
+var useIsomorphicLayoutEffect = typeof document === "undefined" ? React8.useEffect : React8.useLayoutEffect;
 function TextArea({
   label,
   description,
@@ -1046,13 +1062,13 @@ function TextArea({
   onChange,
   ...rest
 }) {
-  const innerRef = React7.useRef(null);
-  const ref = React7.useCallback((node) => {
+  const innerRef = React8.useRef(null);
+  const ref = React8.useCallback((node) => {
     innerRef.current = node;
     if (typeof textAreaRef === "function") textAreaRef(node);
     else if (textAreaRef) textAreaRef.current = node;
   }, [textAreaRef]);
-  const grow = React7.useCallback(() => {
+  const grow = React8.useCallback(() => {
     const el = innerRef.current;
     if (!el || !autoGrow) return;
     const styles = getComputedStyle(el);
@@ -1312,7 +1328,7 @@ function ComboBox({
 }
 
 // src/components/forms/MultiComboBox.tsx
-var React8 = __toESM(require("react"), 1);
+var React9 = __toESM(require("react"), 1);
 var import_react_aria_components16 = require("react-aria-components");
 var import_jsx_runtime24 = require("react/jsx-runtime");
 var norm3 = (o) => typeof o === "string" ? { value: o, label: o } : o;
@@ -1338,15 +1354,15 @@ function MultiComboBox({
   ...rest
 }) {
   const msg = usePireMessages();
-  const items = React8.useMemo(() => options.map(norm3), [options]);
+  const items = React9.useMemo(() => options.map(norm3), [options]);
   const collection = isFilteredExternally ? { items } : { defaultItems: items };
   const showsStatus = isLoading || isFilteredExternally && items.length === 0 && emptyLabel != null;
-  const [uncontrolled, setUncontrolled] = React8.useState(defaultValue ?? []);
-  const [announcement, setAnnouncement] = React8.useState("");
-  const inputRef = React8.useRef(null);
+  const [uncontrolled, setUncontrolled] = React9.useState(defaultValue ?? []);
+  const [announcement, setAnnouncement] = React9.useState("");
+  const inputRef = React9.useRef(null);
   const raw = value ?? uncontrolled;
   const contentKey = raw.join("\0");
-  const values = React8.useMemo(() => raw, [contentKey]);
+  const values = React9.useMemo(() => raw, [contentKey]);
   const labelOf = (v) => items.find((o) => o.value === v)?.label ?? v;
   const isEditable = !rest.isDisabled && !rest.isReadOnly;
   const commit = (next) => {
@@ -1662,14 +1678,27 @@ function DateRangePicker({
 }
 
 // src/components/forms/ValueHelpField.tsx
-var React10 = __toESM(require("react"), 1);
+var React12 = __toESM(require("react"), 1);
 
 // src/components/patterns/ValueHelpDialog.tsx
-var React9 = __toESM(require("react"), 1);
+var React11 = __toESM(require("react"), 1);
 
 // src/components/feedback/Dialog.tsx
+var React10 = __toESM(require("react"), 1);
 var import_react_aria_components20 = require("react-aria-components");
 var import_jsx_runtime28 = require("react/jsx-runtime");
+function DialogTitle({ children, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_aria_components20.Heading, { slot: "title", className: cx("pire-dialog-title", className), children });
+}
+function DialogDescription({ children, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: cx("pire-dialog-sub", className), style: { margin: 0 }, children });
+}
+function DialogBody({ children, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: cx("pire-dialog-body", className), children });
+}
+function DialogActions({ children, className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("footer", { className: cx("pire-dialog-foot", className), children });
+}
 function Dialog({
   isOpen,
   onOpenChange,
@@ -1689,6 +1718,18 @@ function Dialog({
     onClose?.();
     onOpenChange?.(false);
   };
+  const parts = React10.Children.toArray(children);
+  const slotOf = (type) => parts.find((node) => React10.isValidElement(node) && node.type === type);
+  const titleSlot = slotOf(DialogTitle);
+  const descriptionSlot = slotOf(DialogDescription);
+  const bodySlot = slotOf(DialogBody);
+  const actionsSlot = slotOf(DialogActions);
+  const slots = [titleSlot, descriptionSlot, bodySlot, actionsSlot];
+  const loose = parts.filter((node) => !slots.includes(node));
+  const heading = titleSlot ?? (title ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_aria_components20.Heading, { slot: "title", className: "pire-dialog-title", children: title }) : null);
+  const description = descriptionSlot ?? (subtitle ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "pire-dialog-sub", style: { margin: 0 }, children: subtitle }) : null);
+  const actions = actionsSlot ?? (footer ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("footer", { className: "pire-dialog-foot", children: footer }) : null);
+  const body = bodySlot ?? (loose.length ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "pire-dialog-body", children: loose }) : null);
   return /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(
     import_react_aria_components20.ModalOverlay,
     {
@@ -1699,15 +1740,15 @@ function Dialog({
         if (!o) close();
       },
       children: /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_aria_components20.Modal, { className: cx("pire-modal", className), "data-size": size, style, children: /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)(import_react_aria_components20.Dialog, { className: "pire-dialog", children: [
-        title ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("header", { className: "pire-dialog-head", children: [
+        heading || description ? /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("header", { className: "pire-dialog-head", children: [
           /* @__PURE__ */ (0, import_jsx_runtime28.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(import_react_aria_components20.Heading, { slot: "title", className: "pire-dialog-title", children: title }),
-            subtitle ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("p", { className: "pire-dialog-sub", style: { margin: 0 }, children: subtitle }) : null
+            heading,
+            description
           ] }),
           showClose ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)(IconButton, { icon: "x", label: msg.dialogClose, size: "sm", onPress: close }) : null
         ] }) : null,
-        children ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("div", { className: "pire-dialog-body", children }) : null,
-        footer ? /* @__PURE__ */ (0, import_jsx_runtime28.jsx)("footer", { className: "pire-dialog-foot", children: footer }) : null
+        body,
+        actions
       ] }) })
     }
   );
@@ -1778,6 +1819,10 @@ function DataTable({
   isLoading,
   loadingRowCount,
   loadingLabel,
+  footer,
+  rowProps,
+  renderExpanded,
+  expandedIds,
   className,
   style,
   ...rest
@@ -1794,6 +1839,11 @@ function DataTable({
     ...columns.map((c) => ({ width: c.width, align: c.align, numeric: c.numeric }))
   ];
   const body = isLoading ? [] : rows;
+  const presentation = new Map(rows.map((row) => [row.id, rowProps?.(row) ?? {}]));
+  const disabledKeys = rows.filter((row) => presentation.get(row.id)?.isDisabled).map((row) => row.id);
+  const expanded = new Set((expandedIds ?? []).map(String));
+  const spanAll = columns.length + (selectable ? 1 : 0);
+  const expandedKey = (id) => `${id}::__pire_expanded__`;
   return /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
     "div",
     {
@@ -1808,6 +1858,7 @@ function DataTable({
           "data-density": density,
           "data-sticky": String(stickyHeader),
           "aria-label": rest["aria-label"],
+          disabledKeys: disabledKeys.length ? new Set(disabledKeys) : void 0,
           selectionMode: selectable ? "multiple" : "none",
           selectedKeys: selected ? new Set(selected) : void 0,
           onSelectionChange: handleSelection,
@@ -1830,7 +1881,7 @@ 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_runtime30.jsxs)("span", { className: "pire-th-inner", children: [
+                  children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)("span", { className: cx("pire-th-inner", c.hideLabel && "pire-sr-only"), children: [
                     c.label,
                     c.sortable ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                       Icon,
@@ -1851,19 +1902,46 @@ function DataTable({
                 // biome-ignore lint/suspicious/noArrayIndexKey: placeholder rows are positional.
                 /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(SkeletonTableRow, { columns: skeletonColumns, density }, i)
               ))
-            ] }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "pire-table-empty", children: emptyLabel }), children: body.map((row) => /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_react_aria_components21.Row, { id: row.id, className: "pire-tr", "data-pressable": onRowAction ? "true" : void 0, children: [
-              selectable ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_aria_components21.Cell, { className: "pire-td", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Checkbox, { slot: "selection", "aria-label": msg.dataTableSelectRow }) }) : null,
-              columns.map((c) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+            ] }) : /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("div", { className: "pire-table-empty", children: emptyLabel }), children: body.flatMap((row) => {
+              const rowIsDisabled = presentation.get(row.id)?.isDisabled;
+              const record = /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(
+                import_react_aria_components21.Row,
+                {
+                  id: row.id,
+                  className: cx("pire-tr", presentation.get(row.id)?.className),
+                  "data-pressable": onRowAction && !rowIsDisabled ? "true" : void 0,
+                  children: [
+                    selectable ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_aria_components21.Cell, { className: "pire-td", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(Checkbox, { slot: "selection", "aria-label": msg.dataTableSelectRow }) }) : null,
+                    columns.map((c) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
+                      import_react_aria_components21.Cell,
+                      {
+                        className: "pire-td",
+                        "data-numeric": c.numeric ? "true" : void 0,
+                        style: { textAlign: c.align && !c.numeric ? c.align : void 0 },
+                        children: c.render ? c.render(row) : row[c.key]
+                      },
+                      c.key
+                    ))
+                  ]
+                },
+                row.id
+              );
+              if (!renderExpanded || !expanded.has(String(row.id))) return [record];
+              return [record, /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_aria_components21.Row, { id: expandedKey(row.id), className: "pire-tr-expanded", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_aria_components21.Cell, { className: "pire-td-expanded", colSpan: spanAll, children: renderExpanded(row) }) }, expandedKey(row.id))];
+            }) }),
+            footer && !isLoading ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_aria_components21.TableFooter, { className: "pire-tfoot", children: /* @__PURE__ */ (0, import_jsx_runtime30.jsxs)(import_react_aria_components21.Row, { id: "__pire_footer__", className: "pire-tr-footer", children: [
+              selectable ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(import_react_aria_components21.Cell, { className: "pire-tf" }) : null,
+              columns.map((c, i) => /* @__PURE__ */ (0, import_jsx_runtime30.jsx)(
                 import_react_aria_components21.Cell,
                 {
-                  className: "pire-td",
+                  className: "pire-tf",
                   "data-numeric": c.numeric ? "true" : void 0,
                   style: { textAlign: c.align && !c.numeric ? c.align : void 0 },
-                  children: c.render ? c.render(row) : row[c.key]
+                  children: footer[c.key] ?? (i === 0 && !selectable ? /* @__PURE__ */ (0, import_jsx_runtime30.jsx)("span", { className: "pire-sr-only", children: msg.dataTableSummaryRow }) : null)
                 },
                 c.key
               ))
-            ] }, row.id)) })
+            ] }) }) : null
           ]
         }
       )
@@ -1888,11 +1966,11 @@ function ValueHelpDialog({
   onClose
 }) {
   const msg = usePireMessages();
-  const [query, setQuery] = React9.useState("");
-  React9.useEffect(() => {
+  const [query, setQuery] = React11.useState("");
+  React11.useEffect(() => {
     if (isOpen) setQuery("");
   }, [isOpen]);
-  const filtered = React9.useMemo(() => {
+  const filtered = React11.useMemo(() => {
     if (isFilteredExternally) return rows;
     const q = query.trim().toLowerCase();
     if (!q) return rows;
@@ -1974,7 +2052,7 @@ function ValueHelpField({
   style
 }) {
   const msg = usePireMessages();
-  const [open, setOpen] = React10.useState(false);
+  const [open, setOpen] = React12.useState(false);
   return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: cx(className), style, children: [
     /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
       Input,
@@ -2030,7 +2108,7 @@ function ValueHelpField({
 }
 
 // src/components/forms/FileUpload.tsx
-var React11 = __toESM(require("react"), 1);
+var React13 = __toESM(require("react"), 1);
 var import_react_aria_components23 = require("react-aria-components");
 
 // src/components/feedback/ProgressBar.tsx
@@ -2120,10 +2198,10 @@ function FileUpload({
   style
 }) {
   const msg = usePireMessages();
-  const [uncontrolled, setUncontrolled] = React11.useState(defaultValue ?? []);
+  const [uncontrolled, setUncontrolled] = React13.useState(defaultValue ?? []);
   const files = value ?? uncontrolled;
-  const created = React11.useRef([]);
-  React11.useEffect(() => () => {
+  const created = React13.useRef([]);
+  React13.useEffect(() => () => {
     for (const url of created.current) URL.revokeObjectURL(url);
   }, []);
   const commit = (next) => {
@@ -2234,7 +2312,7 @@ function ShellBar({
 }
 
 // src/components/navigation/SideNav.tsx
-var React12 = __toESM(require("react"), 1);
+var React14 = __toESM(require("react"), 1);
 var import_react_aria_components26 = require("react-aria-components");
 
 // src/components/navigation/Menu.tsx
@@ -2321,10 +2399,10 @@ function SideNav({
   const msg = usePireMessages();
   const activeParent = findActiveParent(groups, value);
   const isControlled = expandedIds != null;
-  const [ownExpanded, setOwnExpanded] = React12.useState(
+  const [ownExpanded, setOwnExpanded] = React14.useState(
     () => new Set(defaultExpandedIds ?? (activeParent ? [activeParent] : []))
   );
-  const [lastValue, setLastValue] = React12.useState(value);
+  const [lastValue, setLastValue] = React14.useState(value);
   if (value !== lastValue) {
     setLastValue(value);
     if (!isControlled && activeParent && !ownExpanded.has(activeParent)) {
@@ -2588,7 +2666,7 @@ function InlineMessage({ kind = "info", title, action, onClose, children, classN
 }
 
 // src/components/feedback/Toast.tsx
-var React13 = __toESM(require("react"), 1);
+var React15 = __toESM(require("react"), 1);
 var import_jsx_runtime42 = require("react/jsx-runtime");
 var KIND_ICON2 = {
   info: "info",
@@ -2614,26 +2692,26 @@ function Toast({ kind = "success", onClose, position = "bottom-center", children
     }
   );
 }
-var ToastContext = React13.createContext(null);
+var ToastContext = React15.createContext(null);
 function ToastProvider({ children, timeout = 6e3 }) {
   const msg = usePireMessages();
-  const [toasts, setToasts] = React13.useState([]);
-  const close = React13.useCallback((id) => setToasts((t) => t.filter((x) => x.id !== id)), []);
-  const add = React13.useCallback((toast) => {
+  const [toasts, setToasts] = React15.useState([]);
+  const close = React15.useCallback((id) => setToasts((t) => t.filter((x) => x.id !== id)), []);
+  const add = React15.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 = React13.useMemo(() => ({ add, close }), [add, close]);
+  const value = React15.useMemo(() => ({ add, close }), [add, close]);
   return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)(ToastContext.Provider, { value, children: [
     children,
     /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "pire-toast-region", role: "region", "aria-label": msg.toastRegionLabel, children: toasts.map((t) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Toast, { kind: t.kind, onClose: () => close(t.id), style: { position: "static", transform: "none" }, children: t.message }, t.id)) })
   ] });
 }
 function useToast() {
-  const ctx = React13.useContext(ToastContext);
+  const ctx = React15.useContext(ToastContext);
   if (!ctx) throw new Error("useToast must be used inside <ToastProvider>");
   return ctx;
 }
@@ -2983,14 +3061,14 @@ function BarChart({
 }
 
 // src/components/data/LineChart.tsx
-var React14 = __toESM(require("react"), 1);
+var React16 = __toESM(require("react"), 1);
 var import_jsx_runtime50 = require("react/jsx-runtime");
 var PLOT_INSET = { top: 10, right: 14, bottom: 24, left: 58 };
 var MARKER_LIMIT = 20;
-var useIsomorphicLayoutEffect2 = typeof window === "undefined" ? React14.useEffect : React14.useLayoutEffect;
+var useIsomorphicLayoutEffect2 = typeof window === "undefined" ? React16.useEffect : React16.useLayoutEffect;
 function useMeasuredWidth() {
-  const ref = React14.useRef(null);
-  const [width, setWidth] = React14.useState(0);
+  const ref = React16.useRef(null);
+  const [width, setWidth] = React16.useState(0);
   useIsomorphicLayoutEffect2(() => {
     const element = ref.current;
     if (!element) return;
@@ -3153,7 +3231,7 @@ function LineChart({
 }
 
 // src/components/data/DonutChart.tsx
-var React15 = __toESM(require("react"), 1);
+var React17 = __toESM(require("react"), 1);
 var import_jsx_runtime51 = require("react/jsx-runtime");
 var SEGMENT_GAP_DEGREES = 1.5;
 function DonutChart({
@@ -3174,7 +3252,7 @@ function DonutChart({
 }) {
   const label = rest["aria-label"];
   const msg = usePireMessages();
-  const [hoveredIndex, setHoveredIndex] = React15.useState(null);
+  const [hoveredIndex, setHoveredIndex] = React17.useState(null);
   warnOnDonutShape(series, categories.length, label);
   const values = (series[0]?.values ?? []).slice(0, categories.length);
   const segments = categories.map((category, index) => ({ category, index, value: values[index] ?? 0 })).filter((segment) => segment.value > 0);
@@ -3338,8 +3416,43 @@ function FooterBar({ note, actions, children, className, ...rest }) {
   ] });
 }
 
-// src/components/patterns/ConfirmDialog.tsx
+// src/components/layout/SplitPane.tsx
 var import_jsx_runtime58 = require("react/jsx-runtime");
+function SplitPane({
+  list,
+  detail,
+  listWidth = "24rem",
+  listLabel,
+  detailLabel,
+  emptyDetail,
+  onBack,
+  backLabel,
+  className,
+  style,
+  ...rest
+}) {
+  const msg = usePireMessages();
+  const width = typeof listWidth === "number" ? `${listWidth}px` : listWidth;
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+    "div",
+    {
+      className: cx("pire-split", className),
+      "data-has-detail": detail != null ? "true" : void 0,
+      style: { ["--pire-split-list-w"]: width, ...style },
+      ...rest,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("section", { className: "pire-split-list", "aria-label": listLabel ?? msg.splitPaneList, children: list }),
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("section", { className: "pire-split-detail", "aria-label": detailLabel ?? msg.splitPaneDetail, children: [
+          onBack ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "pire-split-back", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Button, { variant: "tertiary", size: "sm", icon: "arrow-left", onPress: onBack, children: backLabel ?? msg.splitPaneBack }) }) : null,
+          detail ?? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "pire-split-empty", children: emptyDetail })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/patterns/ConfirmDialog.tsx
+var import_jsx_runtime59 = require("react/jsx-runtime");
 function ConfirmDialog({
   isOpen,
   title,
@@ -3353,7 +3466,7 @@ function ConfirmDialog({
   onConfirm,
   onCancel
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
     Dialog,
     {
       isOpen,
@@ -3363,12 +3476,12 @@ function ConfirmDialog({
       onClose: onCancel,
       isDismissable: !isBusy,
       showClose: false,
-      footer: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_jsx_runtime58.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Button, { variant: "tertiary", isDisabled: isBusy, onPress: onCancel, children: cancelLabel }),
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Button, { variant: tone === "danger" ? "danger" : "primary", isDisabled: isBusy, onPress: onConfirm, children: isBusy ? "Working\u2026" : confirmLabel })
+      footer: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx_runtime59.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Button, { variant: "tertiary", isDisabled: isBusy, onPress: onCancel, children: cancelLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Button, { variant: tone === "danger" ? "danger" : "primary", isDisabled: isBusy, onPress: onConfirm, children: isBusy ? "Working\u2026" : confirmLabel })
       ] }),
       children: [
-        consequence ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(InlineMessage, { kind: tone === "danger" ? "error" : "warning", style: { marginBottom: children ? "var(--sp-3)" : 0 }, children: consequence }) : null,
+        consequence ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(InlineMessage, { kind: tone === "danger" ? "error" : "warning", style: { marginBottom: children ? "var(--sp-3)" : 0 }, children: consequence }) : null,
         children
       ]
     }
@@ -3376,9 +3489,9 @@ function ConfirmDialog({
 }
 
 // src/components/patterns/CommandPalette.tsx
-var React16 = __toESM(require("react"), 1);
+var React18 = __toESM(require("react"), 1);
 var import_react_aria_components31 = require("react-aria-components");
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 var RESULTS_SECTION_KEY = "__pire_results__";
 var searchableText = (item) => [item.label, item.description, item.keywords].filter(Boolean).join(" ");
 function CommandPalette({
@@ -3399,17 +3512,17 @@ function CommandPalette({
   style
 }) {
   const msg = usePireMessages();
-  const [query, setQuery] = React16.useState("");
+  const [query, setQuery] = React18.useState("");
   const { contains } = (0, import_react_aria_components31.useFilter)({ sensitivity: "base" });
-  React16.useEffect(() => {
+  React18.useEffect(() => {
     if (isOpen) setQuery("");
   }, [isOpen]);
-  const searchableById = React16.useMemo(() => {
+  const searchableById = React18.useMemo(() => {
     const byId = /* @__PURE__ */ new Map();
     for (const group of groups) for (const item of group.items) byId.set(item.id, searchableText(item));
     return byId;
   }, [groups]);
-  const filter = React16.useCallback((textValue, inputValue, node) => {
+  const filter = React18.useCallback((textValue, inputValue, node) => {
     if (node.parentKey === RESULTS_SECTION_KEY) return true;
     return contains(searchableById.get(String(node.key)) ?? textValue, inputValue);
   }, [contains, searchableById]);
@@ -3419,7 +3532,7 @@ function CommandPalette({
   };
   const sections = [...groups, ...resultsGroup ? [{ ...resultsGroup, id: RESULTS_SECTION_KEY }] : []];
   const status = isLoading ? loadingLabel ?? msg.commandPaletteLoading : emptyLabel ?? msg.commandPaletteEmpty;
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
     import_react_aria_components31.ModalOverlay,
     {
       className: "pire-cp-overlay",
@@ -3428,11 +3541,11 @@ function CommandPalette({
       onOpenChange: (open) => {
         if (!open) onOpenChange?.(false);
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react_aria_components31.Modal, { className: cx("pire-cp-modal", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_react_aria_components31.Dialog, { className: "pire-cp-dialog", "aria-label": ariaLabel ?? msg.commandPaletteLabel, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_react_aria_components31.Autocomplete, { filter, inputValue: query, onInputChange: handleInputChange, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_react_aria_components31.SearchField, { className: "pire-cp-search", "aria-label": msg.commandPaletteSearchLabel, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Icon, { name: "search", size: 18, className: "pire-cp-search-icon" }),
-            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react_aria_components31.Modal, { className: cx("pire-cp-modal", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_react_aria_components31.Dialog, { className: "pire-cp-dialog", "aria-label": ariaLabel ?? msg.commandPaletteLabel, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_react_aria_components31.Autocomplete, { filter, inputValue: query, onInputChange: handleInputChange, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_react_aria_components31.SearchField, { className: "pire-cp-search", "aria-label": msg.commandPaletteSearchLabel, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Icon, { name: "search", size: 18, className: "pire-cp-search-icon" }),
+            /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
               import_react_aria_components31.Input,
               {
                 className: "pire-cp-input",
@@ -3441,16 +3554,16 @@ function CommandPalette({
               }
             )
           ] }),
-          isLoading ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "pire-cp-loading", role: "status", "aria-live": "polite", children: loadingLabel ?? msg.commandPaletteLoading }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+          isLoading ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "pire-cp-loading", role: "status", "aria-live": "polite", children: loadingLabel ?? msg.commandPaletteLoading }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
             import_react_aria_components31.Menu,
             {
               className: "pire-cp-list",
               onAction: (key) => onAction?.(String(key)),
-              renderEmptyState: () => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "pire-cp-status", children: status }),
-              children: sections.map((section) => /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_react_aria_components31.MenuSection, { id: section.id, className: "pire-cp-section", children: [
-                section.label ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react_aria_components31.Header, { className: "pire-cp-section-title", children: section.label }) : null,
-                section.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+              renderEmptyState: () => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "pire-cp-status", children: status }),
+              children: sections.map((section) => /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_react_aria_components31.MenuSection, { id: section.id, className: "pire-cp-section", children: [
+                section.label ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react_aria_components31.Header, { className: "pire-cp-section-title", children: section.label }) : null,
+                section.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
                   MenuItem,
                   {
                     id: item.id,
@@ -3471,18 +3584,18 @@ function CommandPalette({
           // aria-hidden: the glyphs are a sighted affordance for discovering the keys. A screen
           // reader already announces the listbox semantics that make those keys work, so reading
           // "up arrow down arrow navigate" out loud is noise on every open.
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "pire-cp-foot", "aria-hidden": "true", children: footer ?? /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx_runtime59.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("span", { className: "pire-cp-hint", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Kbd, { children: "\u2191" }),
-              /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Kbd, { children: "\u2193" }),
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "pire-cp-foot", "aria-hidden": "true", children: footer ?? /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_jsx_runtime60.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("span", { className: "pire-cp-hint", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Kbd, { children: "\u2191" }),
+              /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Kbd, { children: "\u2193" }),
               msg.commandPaletteHintNavigate
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("span", { className: "pire-cp-hint", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Kbd, { children: "\u21B5" }),
+            /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("span", { className: "pire-cp-hint", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Kbd, { children: "\u21B5" }),
               msg.commandPaletteHintSelect
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("span", { className: "pire-cp-hint", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Kbd, { children: "esc" }),
+            /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("span", { className: "pire-cp-hint", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Kbd, { children: "esc" }),
               msg.commandPaletteHintClose
             ] })
           ] }) })
@@ -3492,9 +3605,9 @@ function CommandPalette({
   );
 }
 function useCommandPaletteShortcut(onTrigger, { key = "k", isDisabled } = {}) {
-  const handler = React16.useRef(onTrigger);
+  const handler = React18.useRef(onTrigger);
   handler.current = onTrigger;
-  React16.useEffect(() => {
+  React18.useEffect(() => {
     if (isDisabled) return;
     const onKeyDown = (event) => {
       if (!(event.metaKey || event.ctrlKey) || event.altKey) return;
@@ -3509,10 +3622,10 @@ function useCommandPaletteShortcut(onTrigger, { key = "k", isDisabled } = {}) {
 
 // src/components/patterns/SidePanel.tsx
 var import_react_aria_components32 = require("react-aria-components");
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 function SidePanel({ isOpen, title, subtitle, width = 400, children, footer, onClose, className }) {
   const msg = usePireMessages();
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
     import_react_aria_components32.ModalOverlay,
     {
       className: "pire-sidepanel-overlay",
@@ -3521,36 +3634,36 @@ function SidePanel({ isOpen, title, subtitle, width = 400, children, footer, onC
       onOpenChange: (o) => {
         if (!o) onClose?.();
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react_aria_components32.Modal, { className: cx("pire-sidepanel", className), style: { width }, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_react_aria_components32.Dialog, { className: "pire-dialog", style: { height: "100%" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("header", { className: "pire-dialog-head", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react_aria_components32.Heading, { slot: "title", className: "pire-dialog-title", children: title }),
-            subtitle ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("p", { className: "pire-dialog-sub", style: { margin: 0 }, children: subtitle }) : null
+      children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_react_aria_components32.Modal, { className: cx("pire-sidepanel", className), style: { width }, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_react_aria_components32.Dialog, { className: "pire-dialog", style: { height: "100%" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("header", { className: "pire-dialog-head", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_react_aria_components32.Heading, { slot: "title", className: "pire-dialog-title", children: title }),
+            subtitle ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { className: "pire-dialog-sub", style: { margin: 0 }, children: subtitle }) : null
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(IconButton, { icon: "x", label: msg.sidePanelClose, size: "sm", onPress: onClose })
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(IconButton, { icon: "x", label: msg.sidePanelClose, size: "sm", onPress: onClose })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "pire-dialog-body", style: { flex: 1 }, children }),
-        footer ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("footer", { className: "pire-dialog-foot", children: footer }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "pire-dialog-body", style: { flex: 1 }, children }),
+        footer ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("footer", { className: "pire-dialog-foot", children: footer }) : null
       ] }) })
     }
   );
 }
 
 // src/components/patterns/EmptyState.tsx
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 function EmptyState({ icon = "file-text", title, action, compact, children, className, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: cx("pire-empty", className), "data-compact": compact ? "true" : void 0, ...rest, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Icon, { name: icon, size: 24, className: "pire-empty-icon" }),
-    title ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { className: "pire-empty-title", style: { margin: 0 }, children: title }) : null,
-    children ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { className: "pire-empty-body", style: { margin: 0 }, children }) : null,
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: cx("pire-empty", className), "data-compact": compact ? "true" : void 0, ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Icon, { name: icon, size: 24, className: "pire-empty-icon" }),
+    title ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { className: "pire-empty-title", style: { margin: 0 }, children: title }) : null,
+    children ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { className: "pire-empty-body", style: { margin: 0 }, children }) : null,
     action
   ] });
 }
 
 // src/components/patterns/FileDropZone.tsx
-var React17 = __toESM(require("react"), 1);
+var React19 = __toESM(require("react"), 1);
 var import_react_aria_components33 = require("react-aria-components");
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 var isImage2 = (file) => file.type.startsWith("image/");
 function FileDropZone({
   label,
@@ -3576,10 +3689,10 @@ function FileDropZone({
   style
 }) {
   const msg = usePireMessages();
-  const [uncontrolled, setUncontrolled] = React17.useState(defaultValue ?? []);
+  const [uncontrolled, setUncontrolled] = React19.useState(defaultValue ?? []);
   const files = value ?? uncontrolled;
-  const created = React17.useRef([]);
-  React17.useEffect(() => () => {
+  const created = React19.useRef([]);
+  React19.useEffect(() => () => {
     for (const url of created.current) URL.revokeObjectURL(url);
   }, []);
   const commit = (next) => {
@@ -3599,12 +3712,12 @@ function FileDropZone({
     commit(allowsMultiple ? [...files, ...wrapped] : wrapped.slice(0, 1));
   };
   const remove = (target) => commit(files.filter((f) => f.file !== target));
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: cx("pire-field", className), style, "data-full-width": String(fullWidth), children: [
-    label ? /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("span", { className: "pire-field-label", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: cx("pire-field", className), style, "data-full-width": String(fullWidth), children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("span", { className: "pire-field-label", children: [
       label,
-      isRequired ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "pire-field-req", "aria-hidden": "true", children: "*" }) : null
+      isRequired ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "pire-field-req", "aria-hidden": "true", children: "*" }) : null
     ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
       import_react_aria_components33.DropZone,
       {
         className: "pire-dropzone",
@@ -3617,25 +3730,25 @@ function FileDropZone({
           accept(dropped);
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Icon, { name: "download", size: 24, className: "pire-dropzone-icon" }),
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "pire-dropzone-prompt", children: promptLabel ?? msg.fileDropZonePrompt }),
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Icon, { name: "download", size: 24, className: "pire-dropzone-icon" }),
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "pire-dropzone-prompt", children: promptLabel ?? msg.fileDropZonePrompt }),
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
             import_react_aria_components33.FileTrigger,
             {
               acceptedFileTypes,
               allowsMultiple,
               onSelect: (list) => accept(list ? [...list] : []),
-              children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Button, { variant: "secondary", isDisabled: isDisabled || isReadOnly, children: msg.fileUploadChoose })
+              children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Button, { variant: "secondary", isDisabled: isDisabled || isReadOnly, children: msg.fileUploadChoose })
             }
           )
         ]
       }
     ),
-    files.length ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("ul", { className: "pire-fileupload-list", children: files.map(({ file, previewUrl }) => /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("li", { className: "pire-fileupload-item", children: [
-      previewUrl ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("img", { className: "pire-fileupload-thumb", src: previewUrl, alt: "" }) : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Icon, { name: "file-text", size: 16, className: "pire-fileupload-icon" }),
-      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "pire-fileupload-name", children: file.name }),
-      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "pire-fileupload-size", children: formatFileSize(file.size) }),
-      isDisabled || isReadOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+    files.length ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("ul", { className: "pire-fileupload-list", children: files.map(({ file, previewUrl }) => /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("li", { className: "pire-fileupload-item", children: [
+      previewUrl ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("img", { className: "pire-fileupload-thumb", src: previewUrl, alt: "" }) : /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Icon, { name: "file-text", size: 16, className: "pire-fileupload-icon" }),
+      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "pire-fileupload-name", children: file.name }),
+      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "pire-fileupload-size", children: formatFileSize(file.size) }),
+      isDisabled || isReadOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
         IconButton,
         {
           icon: "x",
@@ -3645,14 +3758,15 @@ function FileDropZone({
         }
       )
     ] }, `${file.name}-${file.size}-${file.lastModified}`)) }) : null,
-    uploadProgress != null ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(ProgressBar, { value: uploadProgress, label: msg.fileUploadUploading }) : null,
-    description ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "pire-field-hint", children: description }) : null,
-    isInvalid && errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "pire-field-error", children: errorMessage }) : null
+    uploadProgress != null ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(ProgressBar, { value: uploadProgress, label: msg.fileUploadUploading }) : null,
+    description ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "pire-field-hint", children: description }) : null,
+    isInvalid && errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "pire-field-error", children: errorMessage }) : null
   ] });
 }
 
 // src/index.ts
 var import_react_aria_components34 = require("react-aria-components");
+var import_react_aria_components35 = require("react-aria-components");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Avatar,
@@ -3670,12 +3784,17 @@ var import_react_aria_components34 = require("react-aria-components");
   DateRangePicker,
   DescriptionList,
   Dialog,
+  DialogActions,
+  DialogBody,
+  DialogDescription,
+  DialogTitle,
   DialogTrigger,
   DonutChart,
   EmptyState,
   FileDropZone,
   FileUpload,
   FilterBar,
+  Focusable,
   FooterBar,
   FormField,
   Heading,
@@ -3717,6 +3836,7 @@ var import_react_aria_components34 = require("react-aria-components");
   SidePanel,
   Skeleton,
   SkeletonTableRow,
+  SplitPane,
   Strong,
   SubmenuTrigger,
   Switch,