@orianatech/pire 0.8.0 → 0.9.0

package/dist/index.cjs

@@ -42,13 +42,15 @@ __export(src_exports, {
   DatePicker: () => DatePicker,
   DescriptionList: () => DescriptionList,
   Dialog: () => Dialog,
-  DialogTrigger: () => import_react_aria_components29.DialogTrigger,
+  DialogTrigger: () => import_react_aria_components31.DialogTrigger,
   EmptyState: () => EmptyState,
+  FileDropZone: () => FileDropZone,
+  FileUpload: () => FileUpload,
   FilterBar: () => FilterBar,
   FooterBar: () => FooterBar,
   FormField: () => FormField,
   Heading: () => Heading,
-  I18nProvider: () => import_react_aria_components29.I18nProvider,
+  I18nProvider: () => import_react_aria_components31.I18nProvider,
   Icon: () => Icon,
   IconButton: () => IconButton,
   InlineMessage: () => InlineMessage,
@@ -60,7 +62,7 @@ __export(src_exports, {
   MenuItem: () => MenuItem,
   MenuSection: () => MenuSection,
   MenuSeparator: () => MenuSeparator,
-  MenuTrigger: () => import_react_aria_components29.MenuTrigger,
+  MenuTrigger: () => import_react_aria_components31.MenuTrigger,
   MultiComboBox: () => MultiComboBox,
   NumberField: () => NumberField,
   ObjectHeader: () => ObjectHeader,
@@ -68,11 +70,11 @@ __export(src_exports, {
   PageHeader: () => PageHeader,
   Pagination: () => Pagination,
   PireIntlProvider: () => PireIntlProvider,
-  Popover: () => import_react_aria_components29.Popover,
+  Popover: () => import_react_aria_components31.Popover,
   ProgressBar: () => ProgressBar,
   Radio: () => Radio,
   RadioGroup: () => RadioGroup,
-  RouterProvider: () => import_react_aria_components29.RouterProvider,
+  RouterProvider: () => import_react_aria_components31.RouterProvider,
   SectionHeader: () => SectionHeader,
   SegmentedControl: () => SegmentedControl,
   Select: () => Select,
@@ -84,7 +86,7 @@ __export(src_exports, {
   Skeleton: () => Skeleton,
   SkeletonTableRow: () => SkeletonTableRow,
   Strong: () => Strong,
-  SubmenuTrigger: () => import_react_aria_components29.SubmenuTrigger,
+  SubmenuTrigger: () => import_react_aria_components31.SubmenuTrigger,
   Switch: () => Switch,
   Tabs: () => Tabs,
   Tag: () => Tag,
@@ -99,6 +101,7 @@ __export(src_exports, {
   configureIcons: () => configureIcons,
   enMessages: () => enMessages,
   esMessages: () => esMessages,
+  formatFileSize: () => formatFileSize,
   usePireMessages: () => usePireMessages,
   useToast: () => useToast
 });
@@ -909,7 +912,11 @@ var enMessages = {
   paginationPrevious: "Previous page",
   paginationNext: "Next page",
   paginationRowsPerPage: "Rows per page",
-  sideNavLabel: "Main navigation"
+  sideNavLabel: "Main navigation",
+  fileUploadChoose: "Choose files",
+  fileUploadRemoveNamed: "Remove {name}",
+  fileUploadUploading: "Uploading",
+  fileDropZonePrompt: "Drag files here, or choose them"
 };
 var esMessages = {
   filterBarLabel: "Filtros",
@@ -941,7 +948,11 @@ var esMessages = {
   paginationPrevious: "P\xE1gina anterior",
   paginationNext: "P\xE1gina siguiente",
   paginationRowsPerPage: "Filas por p\xE1gina",
-  sideNavLabel: "Navegaci\xF3n principal"
+  sideNavLabel: "Navegaci\xF3n principal",
+  fileUploadChoose: "Elegir archivos",
+  fileUploadRemoveNamed: "Quitar {name}",
+  fileUploadUploading: "Subiendo",
+  fileDropZonePrompt: "Arrastr\xE1 archivos ac\xE1, o elegilos"
 };
 
 // src/i18n/PireIntlProvider.tsx
@@ -1629,8 +1640,165 @@ function ValueHelpField({
   ] });
 }
 
-// src/components/navigation/ShellBar.tsx
+// src/components/forms/FileUpload.tsx
+var React10 = __toESM(require("react"), 1);
+var import_react_aria_components22 = require("react-aria-components");
+
+// src/components/feedback/ProgressBar.tsx
+var import_react_aria_components21 = require("react-aria-components");
 var import_jsx_runtime31 = require("react/jsx-runtime");
+function ProgressBar({
+  value = 0,
+  minValue = 0,
+  maxValue = 100,
+  label,
+  showValue = true,
+  isIndeterminate,
+  status = "informative",
+  size = "md",
+  className,
+  style
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(
+    import_react_aria_components21.ProgressBar,
+    {
+      className: cx("pire-progress", className),
+      "data-status": status,
+      "data-size": size,
+      value,
+      minValue,
+      maxValue,
+      isIndeterminate,
+      style,
+      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_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/forms/FileUpload.tsx
+var import_jsx_runtime32 = require("react/jsx-runtime");
+var isImage = (file) => file.type.startsWith("image/");
+function formatFileSize(bytes) {
+  if (bytes < 1024) return `${bytes} B`;
+  if (bytes < 1024 * 1024) return `${Math.round(bytes / 1024).toLocaleString()} KB`;
+  return `${(bytes / (1024 * 1024)).toFixed(1)} MB`;
+}
+function screenFiles(files, { maxSize, acceptedFileTypes }) {
+  const accepted = [];
+  const rejected = [];
+  for (const file of files) {
+    if (maxSize != null && file.size > maxSize) {
+      rejected.push({ file, reason: "size" });
+      continue;
+    }
+    if (acceptedFileTypes?.length) {
+      const ok = acceptedFileTypes.some((t) => t.startsWith(".") ? file.name.toLowerCase().endsWith(t.toLowerCase()) : t.endsWith("/*") ? file.type.startsWith(t.slice(0, -1)) : file.type === t);
+      if (!ok) {
+        rejected.push({ file, reason: "type" });
+        continue;
+      }
+    }
+    accepted.push(file);
+  }
+  return { accepted, rejected };
+}
+function FileUpload({
+  label,
+  value,
+  defaultValue,
+  onChange,
+  acceptedFileTypes,
+  allowsMultiple,
+  maxSize,
+  onError,
+  showPreview = true,
+  uploadProgress,
+  chooseLabel,
+  description,
+  errorMessage,
+  isInvalid,
+  isDisabled,
+  isReadOnly,
+  isRequired,
+  fullWidth = true,
+  className,
+  style
+}) {
+  const msg = usePireMessages();
+  const [uncontrolled, setUncontrolled] = React10.useState(defaultValue ?? []);
+  const files = value ?? uncontrolled;
+  const created = React10.useRef([]);
+  React10.useEffect(() => () => {
+    for (const url of created.current) URL.revokeObjectURL(url);
+  }, []);
+  const commit = (next) => {
+    if (value === void 0) setUncontrolled(next);
+    onChange?.(next);
+  };
+  const accept = (picked) => {
+    if (!picked || isDisabled || isReadOnly) return;
+    const { accepted, rejected } = screenFiles([...picked], { maxSize, acceptedFileTypes });
+    if (rejected.length) onError?.(rejected);
+    if (!accepted.length) return;
+    const wrapped = accepted.map((file) => {
+      const previewUrl = showPreview && isImage(file) ? URL.createObjectURL(file) : void 0;
+      if (previewUrl) created.current.push(previewUrl);
+      return { file, previewUrl };
+    });
+    commit(allowsMultiple ? [...files, ...wrapped] : wrapped.slice(0, 1));
+  };
+  const remove = (target) => commit(files.filter((f) => f.file !== target));
+  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+    "div",
+    {
+      className: cx("pire-field", "pire-fileupload", className),
+      style,
+      "data-full-width": String(fullWidth),
+      "data-invalid": isInvalid ? "true" : void 0,
+      children: [
+        label ? /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("span", { className: "pire-field-label", children: [
+          label,
+          isRequired ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "pire-field-req", "aria-hidden": "true", children: "*" }) : null
+        ] }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+          import_react_aria_components22.FileTrigger,
+          {
+            acceptedFileTypes,
+            allowsMultiple,
+            onSelect: accept,
+            children: /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Button, { icon: "paperclip", isDisabled: isDisabled || isReadOnly, children: chooseLabel ?? msg.fileUploadChoose })
+          }
+        ),
+        files.length ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("ul", { className: "pire-fileupload-list", children: files.map(({ file, previewUrl }) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("li", { className: "pire-fileupload-item", children: [
+          previewUrl ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("img", { className: "pire-fileupload-thumb", src: previewUrl, alt: "" }) : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Icon, { name: "file-text", size: 16, className: "pire-fileupload-icon" }),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "pire-fileupload-name", children: file.name }),
+          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "pire-fileupload-size", children: formatFileSize(file.size) }),
+          isDisabled || isReadOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
+            IconButton,
+            {
+              icon: "x",
+              size: "sm",
+              label: msg.fileUploadRemoveNamed.replace("{name}", file.name),
+              onPress: () => remove(file)
+            }
+          )
+        ] }, `${file.name}-${file.size}-${file.lastModified}`)) }) : null,
+        uploadProgress != null ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(ProgressBar, { value: uploadProgress, label: msg.fileUploadUploading }) : null,
+        description ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react_aria_components22.Text, { slot: "description", className: "pire-field-hint", children: description }) : null,
+        isInvalid && errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "pire-field-error", children: errorMessage }) : null
+      ]
+    }
+  );
+}
+
+// src/components/navigation/ShellBar.tsx
+var import_jsx_runtime33 = require("react/jsx-runtime");
 var initials2 = (name) => name.trim().split(/\s+/).slice(0, 2).map((p) => p[0]).join("").toUpperCase();
 function ShellBar({
   product,
@@ -1645,22 +1813,75 @@ function ShellBar({
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime31.jsxs)("header", { className: cx("pire-shellbar", className), ...rest, children: [
-    onMenu ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(IconButton, { icon: "menu", label: menuLabel, variant: "inverse", size: "sm", onPress: onMenu }) : null,
-    monogram ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "pire-shellbar-mono", "aria-hidden": "true", children: monogram }) : null,
-    product ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "pire-shellbar-product", children: product }) : null,
-    title ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "pire-shellbar-title", children: title }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "pire-shellbar-spacer" }),
-    onSearch ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)(IconButton, { icon: "search", label: searchLabel, variant: "inverse", size: "sm", onPress: onSearch }) : null,
+  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)("header", { className: cx("pire-shellbar", className), ...rest, children: [
+    onMenu ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(IconButton, { icon: "menu", label: menuLabel, variant: "inverse", size: "sm", onPress: onMenu }) : null,
+    monogram ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "pire-shellbar-mono", "aria-hidden": "true", children: monogram }) : null,
+    product ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "pire-shellbar-product", children: product }) : null,
+    title ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "pire-shellbar-title", children: title }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "pire-shellbar-spacer" }),
+    onSearch ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(IconButton, { icon: "search", label: searchLabel, variant: "inverse", size: "sm", onPress: onSearch }) : null,
     actions,
-    user ? /* @__PURE__ */ (0, import_jsx_runtime31.jsx)("span", { className: "pire-avatar", title: user, "aria-label": user, role: "img", children: initials2(user) }) : null
+    user ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "pire-avatar", title: user, "aria-label": user, role: "img", children: initials2(user) }) : null
   ] });
 }
 
 // src/components/navigation/SideNav.tsx
-var React10 = __toESM(require("react"), 1);
-var import_react_aria_components21 = require("react-aria-components");
-var import_jsx_runtime32 = require("react/jsx-runtime");
+var React11 = __toESM(require("react"), 1);
+var import_react_aria_components24 = require("react-aria-components");
+
+// src/components/navigation/Menu.tsx
+var import_react_aria_components23 = require("react-aria-components");
+var import_jsx_runtime34 = require("react/jsx-runtime");
+function Menu({ minWidth, className, style, ...rest }) {
+  const width = typeof minWidth === "number" ? `${minWidth}px` : minWidth;
+  const menuStyle = width == null ? style : { ["--pire-menu-min-w"]: width, ...style };
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
+    import_react_aria_components23.Menu,
+    {
+      className: cx("pire-menu", className),
+      style: menuStyle,
+      ...rest
+    }
+  );
+}
+function MenuItem({
+  children,
+  icon,
+  description,
+  shortcut,
+  tone = "default",
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(
+    import_react_aria_components23.MenuItem,
+    {
+      className: cx("pire-menu-item", className),
+      "data-tone": tone === "danger" ? "danger" : void 0,
+      ...rest,
+      children: [
+        icon ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon, { name: icon, size: 16, className: "pire-menu-item-icon" }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)("span", { className: "pire-menu-item-body", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "pire-menu-item-label", children }),
+          description ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("span", { className: "pire-menu-item-desc", children: description }) : null
+        ] }),
+        shortcut ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)("kbd", { className: "pire-menu-item-shortcut", children: shortcut }) : null
+      ]
+    }
+  );
+}
+function MenuSection({ title, children, className, ...rest }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsxs)(import_react_aria_components23.MenuSection, { className: cx("pire-menu-section", className), ...rest, children: [
+    title ? /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react_aria_components23.Header, { className: "pire-menu-section-title", children: title }) : null,
+    children
+  ] });
+}
+function MenuSeparator({ className }) {
+  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react_aria_components23.Separator, { className: cx("pire-menu-separator", className) });
+}
+
+// src/components/navigation/SideNav.tsx
+var import_jsx_runtime35 = require("react/jsx-runtime");
 function findActiveParent(groups, value) {
   if (value == null) return void 0;
   for (const group of groups) {
@@ -1678,6 +1899,7 @@ function SideNav({
   defaultExpandedIds,
   onExpandedChange,
   collapsed,
+  railFlyout = true,
   footer,
   className,
   ...rest
@@ -1685,10 +1907,10 @@ function SideNav({
   const msg = usePireMessages();
   const activeParent = findActiveParent(groups, value);
   const isControlled = expandedIds != null;
-  const [ownExpanded, setOwnExpanded] = React10.useState(
+  const [ownExpanded, setOwnExpanded] = React11.useState(
     () => new Set(defaultExpandedIds ?? (activeParent ? [activeParent] : []))
   );
-  const [lastValue, setLastValue] = React10.useState(value);
+  const [lastValue, setLastValue] = React11.useState(value);
   if (value !== lastValue) {
     setLastValue(value);
     if (!isControlled && activeParent && !ownExpanded.has(activeParent)) {
@@ -1708,8 +1930,8 @@ function SideNav({
   };
   const renderRow = (item, onPress, isGroup) => {
     const selected = !isGroup && item.id === value;
-    const button = /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
-      import_react_aria_components21.Button,
+    const button = /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+      import_react_aria_components24.Button,
       {
         className: "pire-sidenav-item",
         "data-selected": selected ? "true" : void 0,
@@ -1718,50 +1940,70 @@ function SideNav({
         "aria-label": collapsed ? item.label : void 0,
         onPress,
         children: [
-          item.icon ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Icon, { name: item.icon, size: 16 }) : null,
-          collapsed ? null : /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { children: item.label }),
-          item.count != null && !collapsed ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "pire-sidenav-count", children: item.count }) : null
+          item.icon ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Icon, { name: item.icon, size: 16 }) : null,
+          collapsed ? null : /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { children: item.label }),
+          item.count != null && !collapsed ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "pire-sidenav-count", children: item.count }) : null
         ]
       },
       item.id
     );
-    return collapsed ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Tooltip, { label: item.label, placement: "right", children: button }, item.id) : button;
+    return collapsed ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Tooltip, { label: item.label, placement: "right", children: button }, item.id) : button;
   };
-  const renderSection = (item) => /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(import_react_aria_components21.Disclosure, { id: item.id, className: "pire-sidenav-section", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
-      import_react_aria_components21.Button,
+  const renderRailFlyout = (item) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_react_aria_components24.MenuTrigger, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      import_react_aria_components24.Button,
+      {
+        className: "pire-sidenav-item",
+        "aria-label": item.label,
+        "data-active-child": item.id === activeParent ? "true" : void 0,
+        children: item.icon ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Icon, { name: item.icon, size: 16 }) : null
+      }
+    ),
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react_aria_components24.Popover, { className: "pire-popover", placement: "right top", offset: 4, children: /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+      Menu,
+      {
+        "aria-label": item.label,
+        className: "pire-sidenav-flyout",
+        onAction: (key) => onChange?.(String(key)),
+        children: (item.items ?? []).map((child) => /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(MenuItem, { id: child.id, children: child.label }, child.id))
+      }
+    ) })
+  ] }, item.id);
+  const renderSection = (item) => /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(import_react_aria_components24.Disclosure, { id: item.id, className: "pire-sidenav-section", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+      import_react_aria_components24.Button,
       {
         slot: "trigger",
         className: "pire-sidenav-item",
         "data-kind": "group",
         "data-active-child": item.id === activeParent ? "true" : void 0,
         children: [
-          item.icon ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Icon, { name: item.icon, size: 16 }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { children: item.label }),
-          item.count != null ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "pire-sidenav-count", children: item.count }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(Icon, { name: "chevron-down", size: 16, className: "pire-sidenav-chevron" })
+          item.icon ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Icon, { name: item.icon, size: 16 }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { children: item.label }),
+          item.count != null ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "pire-sidenav-count", children: item.count }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(Icon, { name: "chevron-down", size: 16, className: "pire-sidenav-chevron" })
         ]
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(import_react_aria_components21.DisclosurePanel, { className: "pire-sidenav-subnav", children: item.items?.map((child) => {
+    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(import_react_aria_components24.DisclosurePanel, { className: "pire-sidenav-subnav", children: item.items?.map((child) => {
       const selected = child.id === value;
-      return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
-        import_react_aria_components21.Button,
+      return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
+        import_react_aria_components24.Button,
         {
           className: "pire-sidenav-item pire-sidenav-subitem",
           "data-selected": selected ? "true" : void 0,
           "aria-current": selected ? "page" : void 0,
           onPress: () => onChange?.(child.id),
           children: [
-            /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { children: child.label }),
-            child.count != null ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("span", { className: "pire-sidenav-count", children: child.count }) : null
+            /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { children: child.label }),
+            child.count != null ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "pire-sidenav-count", children: child.count }) : null
           ]
         },
         child.id
       );
     }) })
   ] }, item.id);
-  return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)(
     "nav",
     {
       className: cx("pire-sidenav", className),
@@ -1774,12 +2016,13 @@ function SideNav({
           const rows = group.items.map((item) => {
             const isGroup = Boolean(item.items?.length);
             if (isGroup && !collapsed) return renderSection(item);
+            if (isGroup && collapsed && railFlyout) return renderRailFlyout(item);
             return renderRow(item, () => isGroup ? toggleExpanded(item.id) : onChange?.(item.id), isGroup);
           });
-          return /* @__PURE__ */ (0, import_jsx_runtime32.jsxs)("div", { className: "pire-sidenav-group", children: [
-            group.label && !collapsed ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "pire-sidenav-label", children: group.label }) : null,
-            hasSections ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)(
-              import_react_aria_components21.DisclosureGroup,
+          return /* @__PURE__ */ (0, import_jsx_runtime35.jsxs)("div", { className: "pire-sidenav-group", children: [
+            group.label && !collapsed ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "pire-sidenav-label", children: group.label }) : null,
+            hasSections ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+              import_react_aria_components24.DisclosureGroup,
               {
                 className: "pire-sidenav-tree",
                 allowsMultipleExpanded: true,
@@ -1790,18 +2033,18 @@ function SideNav({
             ) : rows
           ] }, group.label ?? gi);
         }),
-        footer ? /* @__PURE__ */ (0, import_jsx_runtime32.jsx)("div", { className: "pire-sidenav-footer", children: footer }) : null
+        footer ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("div", { className: "pire-sidenav-footer", children: footer }) : null
       ]
     }
   );
 }
 
 // src/components/navigation/Tabs.tsx
-var import_react_aria_components22 = require("react-aria-components");
-var import_jsx_runtime33 = require("react/jsx-runtime");
+var import_react_aria_components25 = require("react-aria-components");
+var import_jsx_runtime36 = require("react/jsx-runtime");
 function Tabs({ items, value, defaultValue, onChange, panels, className, style, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(
-    import_react_aria_components22.Tabs,
+  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
+    import_react_aria_components25.Tabs,
     {
       className,
       style,
@@ -1809,23 +2052,23 @@ function Tabs({ items, value, defaultValue, onChange, panels, className, style,
       defaultSelectedKey: defaultValue,
       onSelectionChange: (k) => onChange?.(String(k)),
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_aria_components22.TabList, { className: "pire-tablist", items, "aria-label": rest["aria-label"] ?? "Views", children: (item) => /* @__PURE__ */ (0, import_jsx_runtime33.jsxs)(import_react_aria_components22.Tab, { className: cx("pire-tab"), id: item.id, isDisabled: item.isDisabled, children: [
-          item.icon ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(Icon, { name: item.icon, size: 16 }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react_aria_components25.TabList, { className: "pire-tablist", items, "aria-label": rest["aria-label"] ?? "Views", children: (item) => /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_react_aria_components25.Tab, { className: cx("pire-tab"), id: item.id, isDisabled: item.isDisabled, children: [
+          item.icon ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Icon, { name: item.icon, size: 16 }) : null,
           item.label,
-          item.count != null ? /* @__PURE__ */ (0, import_jsx_runtime33.jsx)("span", { className: "pire-tab-count", children: item.count }) : null
+          item.count != null ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "pire-tab-count", children: item.count }) : null
         ] }) }),
-        items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime33.jsx)(import_react_aria_components22.TabPanel, { id: item.id, className: panels ? "pire-tabpanel" : void 0, children: panels?.[item.id] }, item.id))
+        items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react_aria_components25.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_components23 = require("react-aria-components");
-var import_jsx_runtime34 = require("react/jsx-runtime");
+var import_react_aria_components26 = require("react-aria-components");
+var import_jsx_runtime37 = require("react/jsx-runtime");
 function Breadcrumb({ items, onNavigate, className, style }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(
-    import_react_aria_components23.Breadcrumbs,
+  return /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(
+    import_react_aria_components26.Breadcrumbs,
     {
       className: cx("pire-breadcrumbs", className),
       style,
@@ -1833,9 +2076,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_runtime34.jsxs)(import_react_aria_components23.Breadcrumb, { className: "pire-breadcrumb", id: item.id ?? item.label, children: [
-          last ? item.label : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(import_react_aria_components23.Link, { href: item.href, children: item.label }),
-          last ? null : /* @__PURE__ */ (0, import_jsx_runtime34.jsx)(Icon, { name: "chevron-right", size: 12, style: { color: "var(--text-tertiary)" } })
+        return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(import_react_aria_components26.Breadcrumb, { className: "pire-breadcrumb", id: item.id ?? item.label, children: [
+          last ? item.label : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(import_react_aria_components26.Link, { href: item.href, children: item.label }),
+          last ? null : /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Icon, { name: "chevron-right", size: 12, style: { color: "var(--text-tertiary)" } })
         ] });
       }
     }
@@ -1843,7 +2086,7 @@ function Breadcrumb({ items, onNavigate, className, style }) {
 }
 
 // src/components/navigation/Pagination.tsx
-var import_jsx_runtime35 = require("react/jsx-runtime");
+var import_jsx_runtime38 = require("react/jsx-runtime");
 function Pagination({
   page = 1,
   pageSize = 25,
@@ -1858,9 +2101,9 @@ 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_runtime35.jsxs)("nav", { className: cx("pire-pagination", className), style, "aria-label": msg.paginationLabel, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "pire-pagination-count", children: msg.paginationRange.replace("{from}", from.toLocaleString()).replace("{to}", to.toLocaleString()).replace("{total}", total.toLocaleString()) }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("nav", { className: cx("pire-pagination", className), style, "aria-label": msg.paginationLabel, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "pire-pagination-count", children: msg.paginationRange.replace("{from}", from.toLocaleString()).replace("{to}", to.toLocaleString()).replace("{total}", total.toLocaleString()) }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       IconButton,
       {
         icon: "chevron-left",
@@ -1871,8 +2114,8 @@ function Pagination({
         onPress: () => onPageChange?.(page - 1)
       }
     ),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)("span", { className: "pire-pagination-count", "aria-live": "polite", children: msg.paginationPageOf.replace("{page}", String(page)).replace("{pages}", String(pages)) }),
-    /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "pire-pagination-count", "aria-live": "polite", children: msg.paginationPageOf.replace("{page}", String(page)).replace("{pages}", String(pages)) }),
+    /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       IconButton,
       {
         icon: "chevron-right",
@@ -1883,7 +2126,7 @@ function Pagination({
         onPress: () => onPageChange?.(page + 1)
       }
     ),
-    onPageSizeChange ? /* @__PURE__ */ (0, import_jsx_runtime35.jsx)(
+    onPageSizeChange ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
       Select,
       {
         "aria-label": msg.paginationRowsPerPage,
@@ -1898,59 +2141,8 @@ function Pagination({
   ] });
 }
 
-// src/components/navigation/Menu.tsx
-var import_react_aria_components24 = require("react-aria-components");
-var import_jsx_runtime36 = require("react/jsx-runtime");
-function Menu({ minWidth, className, style, ...rest }) {
-  const width = typeof minWidth === "number" ? `${minWidth}px` : minWidth;
-  const menuStyle = width == null ? style : { ["--pire-menu-min-w"]: width, ...style };
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(
-    import_react_aria_components24.Menu,
-    {
-      className: cx("pire-menu", className),
-      style: menuStyle,
-      ...rest
-    }
-  );
-}
-function MenuItem({
-  children,
-  icon,
-  description,
-  shortcut,
-  tone = "default",
-  className,
-  ...rest
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(
-    import_react_aria_components24.MenuItem,
-    {
-      className: cx("pire-menu-item", className),
-      "data-tone": tone === "danger" ? "danger" : void 0,
-      ...rest,
-      children: [
-        icon ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(Icon, { name: icon, size: 16, className: "pire-menu-item-icon" }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)("span", { className: "pire-menu-item-body", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "pire-menu-item-label", children }),
-          description ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("span", { className: "pire-menu-item-desc", children: description }) : null
-        ] }),
-        shortcut ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)("kbd", { className: "pire-menu-item-shortcut", children: shortcut }) : null
-      ]
-    }
-  );
-}
-function MenuSection({ title, children, className, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsxs)(import_react_aria_components24.MenuSection, { className: cx("pire-menu-section", className), ...rest, children: [
-    title ? /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react_aria_components24.Header, { className: "pire-menu-section-title", children: title }) : null,
-    children
-  ] });
-}
-function MenuSeparator({ className }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime36.jsx)(import_react_aria_components24.Separator, { className: cx("pire-menu-separator", className) });
-}
-
 // src/components/feedback/InlineMessage.tsx
-var import_jsx_runtime37 = require("react/jsx-runtime");
+var import_jsx_runtime39 = require("react/jsx-runtime");
 var KIND_ICON = {
   info: "info",
   success: "check-circle-2",
@@ -1960,7 +2152,7 @@ var KIND_ICON = {
 function InlineMessage({ kind = "info", title, action, onClose, children, className, ...rest }) {
   const msg = usePireMessages();
   const assertive = kind === "error" || kind === "warning";
-  return /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
     "div",
     {
       className: cx("pire-msg", className),
@@ -1969,58 +2161,21 @@ function InlineMessage({ kind = "info", title, action, onClose, children, classN
       "aria-live": assertive ? "assertive" : "polite",
       ...rest,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(Icon, { name: KIND_ICON[kind], size: 16, style: { marginTop: 2 } }),
-        /* @__PURE__ */ (0, import_jsx_runtime37.jsxs)("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: "var(--sp-1)" }, children: [
-          title ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "pire-msg-title", children: title }) : null,
-          children ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)("span", { className: "pire-msg-body", children }) : null,
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Icon, { name: KIND_ICON[kind], size: 16, style: { marginTop: 2 } }),
+        /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: "var(--sp-1)" }, children: [
+          title ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "pire-msg-title", children: title }) : null,
+          children ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { className: "pire-msg-body", children }) : null,
           action
         ] }),
-        onClose ? /* @__PURE__ */ (0, import_jsx_runtime37.jsx)(IconButton, { icon: "x", label: msg.inlineMessageDismiss, size: "sm", onPress: onClose }) : null
+        onClose ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(IconButton, { icon: "x", label: msg.inlineMessageDismiss, size: "sm", onPress: onClose }) : null
       ]
     }
   );
 }
 
-// src/components/feedback/ProgressBar.tsx
-var import_react_aria_components25 = require("react-aria-components");
-var import_jsx_runtime38 = require("react/jsx-runtime");
-function ProgressBar({
-  value = 0,
-  minValue = 0,
-  maxValue = 100,
-  label,
-  showValue = true,
-  isIndeterminate,
-  status = "informative",
-  size = "md",
-  className,
-  style
-}) {
-  return /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(
-    import_react_aria_components25.ProgressBar,
-    {
-      className: cx("pire-progress", className),
-      "data-status": status,
-      "data-size": size,
-      value,
-      minValue,
-      maxValue,
-      isIndeterminate,
-      style,
-      children: ({ percentage, valueText }) => /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)(import_jsx_runtime38.Fragment, { children: [
-        label || showValue ? /* @__PURE__ */ (0, import_jsx_runtime38.jsxs)("div", { className: "pire-progress-head", children: [
-          label ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)(import_react_aria_components25.Label, { children: label }) : /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", {}),
-          showValue && !isIndeterminate ? /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("span", { className: "pire-numeric", children: valueText }) : null
-        ] }) : null,
-        /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "pire-progress-track", children: /* @__PURE__ */ (0, import_jsx_runtime38.jsx)("div", { className: "pire-progress-fill", style: { width: `${isIndeterminate ? 40 : percentage}%` } }) })
-      ] })
-    }
-  );
-}
-
 // src/components/feedback/Toast.tsx
-var React11 = __toESM(require("react"), 1);
-var import_jsx_runtime39 = require("react/jsx-runtime");
+var React12 = __toESM(require("react"), 1);
+var import_jsx_runtime40 = require("react/jsx-runtime");
 var KIND_ICON2 = {
   info: "info",
   success: "check-circle-2",
@@ -2029,7 +2184,7 @@ var KIND_ICON2 = {
 };
 function Toast({ kind = "success", onClose, position = "bottom-center", children, className, ...rest }) {
   const msg = usePireMessages();
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(
     "div",
     {
       className: cx("pire-toast", className),
@@ -2038,40 +2193,40 @@ function Toast({ kind = "success", onClose, position = "bottom-center", children
       "aria-live": kind === "error" ? "assertive" : "polite",
       ...rest,
       children: [
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Icon, { name: KIND_ICON2[kind], size: 16 }),
-        /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("span", { style: { flex: 1 }, children }),
-        onClose ? /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(IconButton, { icon: "x", label: msg.toastDismiss, size: "sm", variant: "inverse", onPress: onClose }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Icon, { name: KIND_ICON2[kind], size: 16 }),
+        /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { style: { flex: 1 }, children }),
+        onClose ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(IconButton, { icon: "x", label: msg.toastDismiss, size: "sm", variant: "inverse", onPress: onClose }) : null
       ]
     }
   );
 }
-var ToastContext = React11.createContext(null);
+var ToastContext = React12.createContext(null);
 function ToastProvider({ children, timeout = 6e3 }) {
   const msg = usePireMessages();
-  const [toasts, setToasts] = React11.useState([]);
-  const close = React11.useCallback((id) => setToasts((t) => t.filter((x) => x.id !== id)), []);
-  const add = React11.useCallback((toast) => {
+  const [toasts, setToasts] = React12.useState([]);
+  const close = React12.useCallback((id) => setToasts((t) => t.filter((x) => x.id !== id)), []);
+  const add = React12.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 = React11.useMemo(() => ({ add, close }), [add, close]);
-  return /* @__PURE__ */ (0, import_jsx_runtime39.jsxs)(ToastContext.Provider, { value, children: [
+  const value = React12.useMemo(() => ({ add, close }), [add, close]);
+  return /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(ToastContext.Provider, { value, children: [
     children,
-    /* @__PURE__ */ (0, import_jsx_runtime39.jsx)("div", { className: "pire-toast-region", role: "region", "aria-label": msg.toastRegionLabel, children: toasts.map((t) => /* @__PURE__ */ (0, import_jsx_runtime39.jsx)(Toast, { kind: t.kind, onClose: () => close(t.id), style: { position: "static", transform: "none" }, children: t.message }, t.id)) })
+    /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { className: "pire-toast-region", role: "region", "aria-label": msg.toastRegionLabel, children: toasts.map((t) => /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Toast, { kind: t.kind, onClose: () => close(t.id), style: { position: "static", transform: "none" }, children: t.message }, t.id)) })
   ] });
 }
 function useToast() {
-  const ctx = React11.useContext(ToastContext);
+  const ctx = React12.useContext(ToastContext);
   if (!ctx) throw new Error("useToast must be used inside <ToastProvider>");
   return ctx;
 }
 
 // src/components/data/KpiTile.tsx
-var import_react_aria_components26 = require("react-aria-components");
-var import_jsx_runtime40 = require("react/jsx-runtime");
+var import_react_aria_components27 = require("react-aria-components");
+var import_jsx_runtime41 = require("react/jsx-runtime");
 function KpiTile({
   label,
   value,
@@ -2087,50 +2242,50 @@ function KpiTile({
   style
 }) {
   const tone = deltaTone ?? (deltaDirection === "down" ? "negative" : "positive");
-  const body = /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)(import_jsx_runtime40.Fragment, { children: [
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("span", { className: "pire-kpi-label", children: [
-      icon ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Icon, { name: icon, size: 16 }) : null,
+  const body = /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)(import_jsx_runtime41.Fragment, { children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("span", { className: "pire-kpi-label", children: [
+      icon ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icon, { name: icon, size: 16 }) : null,
       label
     ] }),
-    /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("span", { className: "pire-kpi-value", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("span", { className: "pire-kpi-value", children: [
       value,
-      unit ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "pire-kpi-unit", children: unit }) : null
+      unit ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "pire-kpi-unit", children: unit }) : null
     ] }),
-    delta ? /* @__PURE__ */ (0, import_jsx_runtime40.jsxs)("span", { className: "pire-kpi-delta", "data-tone": tone, children: [
-      deltaDirection ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)(Icon, { name: deltaDirection === "up" ? "trending-up" : "trending-down", size: 12 }) : null,
+    delta ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("span", { className: "pire-kpi-delta", "data-tone": tone, children: [
+      deltaDirection ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(Icon, { name: deltaDirection === "up" ? "trending-up" : "trending-down", size: 12 }) : null,
       delta
     ] }) : null,
-    footnote ? /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("span", { className: "pire-kpi-foot", children: footnote }) : null
+    footnote ? /* @__PURE__ */ (0, import_jsx_runtime41.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_runtime40.jsx)(import_react_aria_components26.Button, { ...props, "data-pressable": "true", onPress, children: body }) : /* @__PURE__ */ (0, import_jsx_runtime40.jsx)("div", { ...props, children: body });
+  return onPress ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)(import_react_aria_components27.Button, { ...props, "data-pressable": "true", onPress, children: body }) : /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { ...props, children: body });
 }
 
 // src/components/data/ObjectHeader.tsx
-var import_jsx_runtime41 = require("react/jsx-runtime");
+var import_jsx_runtime42 = require("react/jsx-runtime");
 function ObjectHeader({ title, subtitle, id, breadcrumb, badge, facts, actions, className, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("header", { className: cx("pire-objheader", className), ...rest, children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("header", { className: cx("pire-objheader", className), ...rest, children: [
     breadcrumb,
-    /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "pire-objheader-row", children: [
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { style: { minWidth: 0 }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("h1", { className: "pire-objheader-title", children: title }),
-        subtitle || id ? /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { className: "pire-objheader-sub", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "pire-objheader-row", children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { style: { minWidth: 0 }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("h1", { className: "pire-objheader-title", children: title }),
+        subtitle || id ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "pire-objheader-sub", children: [
           subtitle,
-          id ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("span", { className: "pire-objheader-id", children: id }) : null
+          id ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "pire-objheader-id", children: id }) : null
         ] }) : null
       ] }),
       badge,
-      actions ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("div", { className: "pire-objheader-actions", children: actions }) : null
+      actions ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "pire-objheader-actions", children: actions }) : null
     ] }),
-    facts?.length ? /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("dl", { className: "pire-facts", style: { margin: 0 }, children: facts.map((fact) => /* @__PURE__ */ (0, import_jsx_runtime41.jsxs)("div", { children: [
-      /* @__PURE__ */ (0, import_jsx_runtime41.jsx)("dt", { className: "pire-fact-label", children: fact.label }),
-      /* @__PURE__ */ (0, import_jsx_runtime41.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_runtime42.jsx)("dl", { className: "pire-facts", style: { margin: 0 }, children: facts.map((fact) => /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { children: [
+      /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("dt", { className: "pire-fact-label", children: fact.label }),
+      /* @__PURE__ */ (0, import_jsx_runtime42.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_runtime42 = require("react/jsx-runtime");
+var import_jsx_runtime43 = require("react/jsx-runtime");
 function FilterBar({
   children,
   activeFilters = [],
@@ -2147,66 +2302,66 @@ function FilterBar({
   const label = useMessage("filterBarLabel", rest["aria-label"]);
   const go = useMessage("filterBarGo", goLabel);
   const clearAll = useMessage("filterBarClearAll", clearAllLabel);
-  return /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("section", { className: cx("pire-filterbar", className), ...rest, "aria-label": label, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "pire-filterbar-controls", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("section", { className: cx("pire-filterbar", className), ...rest, "aria-label": label, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "pire-filterbar-controls", children: [
       children,
-      onGo ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Button, { variant: "primary", onPress: onGo, children: go }) : null
+      onGo ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Button, { variant: "primary", onPress: onGo, children: go }) : null
     ] }),
-    activeFilters.length || resultLabel || actions ? /* @__PURE__ */ (0, import_jsx_runtime42.jsxs)("div", { className: "pire-filterbar-foot", children: [
-      activeFilters.map((filter) => /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Tag, { onRemove: onRemoveFilter ? () => onRemoveFilter(filter.id) : void 0, children: filter.label }, filter.id)),
-      activeFilters.length && onClear ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)(Button, { variant: "tertiary", size: "sm", onPress: onClear, children: clearAll }) : null,
-      resultLabel ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("span", { className: "pire-filterbar-result", "aria-live": "polite", children: resultLabel }) : null,
-      actions ? /* @__PURE__ */ (0, import_jsx_runtime42.jsx)("div", { className: "pire-filterbar-actions", children: actions }) : null
+    activeFilters.length || resultLabel || actions ? /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("div", { className: "pire-filterbar-foot", children: [
+      activeFilters.map((filter) => /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Tag, { onRemove: onRemoveFilter ? () => onRemoveFilter(filter.id) : void 0, children: filter.label }, filter.id)),
+      activeFilters.length && onClear ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(Button, { variant: "tertiary", size: "sm", onPress: onClear, children: clearAll }) : null,
+      resultLabel ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("span", { className: "pire-filterbar-result", "aria-live": "polite", children: resultLabel }) : null,
+      actions ? /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("div", { className: "pire-filterbar-actions", children: actions }) : null
     ] }) : null
   ] });
 }
 
 // src/components/data/DescriptionList.tsx
-var import_jsx_runtime43 = require("react/jsx-runtime");
+var import_jsx_runtime44 = require("react/jsx-runtime");
 function DescriptionList({ items, layout = "rows", columns = 3, className, style, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime43.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime44.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_runtime43.jsxs)("div", { className: "pire-dl-row", "data-emphasis": item.emphasis ? "true" : void 0, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsxs)("dt", { className: "pire-dl-term", children: [
+      children: items.map((item, i) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("div", { className: "pire-dl-row", "data-emphasis": item.emphasis ? "true" : void 0, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("dt", { className: "pire-dl-term", children: [
           item.label,
           item.hint
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime43.jsx)("dd", { className: "pire-dl-value", "data-numeric": item.numeric ? "true" : void 0, children: item.value })
+        /* @__PURE__ */ (0, import_jsx_runtime44.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_runtime44 = require("react/jsx-runtime");
+var import_jsx_runtime45 = require("react/jsx-runtime");
 function Timeline({ entries, reverse = false, className, ...rest }) {
   const list = reverse ? [...entries].reverse() : entries;
-  return /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("ol", { className: cx("pire-timeline", className), ...rest, children: list.map((entry, i) => /* @__PURE__ */ (0, import_jsx_runtime44.jsxs)("li", { className: "pire-timeline-item", children: [
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "pire-timeline-time", children: entry.time }),
-    /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "pire-timeline-text", children: entry.event }),
-    entry.actor ? /* @__PURE__ */ (0, import_jsx_runtime44.jsx)("span", { className: "pire-timeline-actor", children: entry.actor }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("ol", { className: cx("pire-timeline", className), ...rest, children: list.map((entry, i) => /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)("li", { className: "pire-timeline-item", children: [
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "pire-timeline-time", children: entry.time }),
+    /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "pire-timeline-text", children: entry.event }),
+    entry.actor ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "pire-timeline-actor", children: entry.actor }) : null
   ] }, entry.id ?? i)) });
 }
 
 // src/components/data/LinkList.tsx
-var import_react_aria_components27 = require("react-aria-components");
-var import_jsx_runtime45 = require("react/jsx-runtime");
+var import_react_aria_components28 = require("react-aria-components");
+var import_jsx_runtime46 = require("react/jsx-runtime");
 function LinkList({ items, onSelect, className, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("div", { className: cx("pire-linklist", className), role: "list", ...rest, children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime45.jsxs)(import_react_aria_components27.Button, { className: "pire-linklist-item", onPress: () => onSelect?.(item.id), children: [
-    item.icon ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)(Icon, { name: item.icon, size: 16, style: { color: "var(--text-secondary)" } }) : null,
-    item.key ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "pire-linklist-key", children: item.key }) : null,
-    item.text ? /* @__PURE__ */ (0, import_jsx_runtime45.jsx)("span", { className: "pire-linklist-text", children: item.text }) : null,
+  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("div", { className: cx("pire-linklist", className), role: "list", ...rest, children: items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime46.jsxs)(import_react_aria_components28.Button, { className: "pire-linklist-item", onPress: () => onSelect?.(item.id), children: [
+    item.icon ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(Icon, { name: item.icon, size: 16, style: { color: "var(--text-secondary)" } }) : null,
+    item.key ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "pire-linklist-key", children: item.key }) : null,
+    item.text ? /* @__PURE__ */ (0, import_jsx_runtime46.jsx)("span", { className: "pire-linklist-text", children: item.text }) : null,
     item.trailing
   ] }, item.id)) });
 }
 
 // src/components/layout/PageBand.tsx
-var import_jsx_runtime46 = require("react/jsx-runtime");
+var import_jsx_runtime47 = require("react/jsx-runtime");
 function PageBand({
   surface = "card",
   hasBorder = true,
@@ -2214,7 +2369,7 @@ function PageBand({
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime46.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime47.jsx)(
     "div",
     {
       className: cx("pire-pageband", className),
@@ -2227,56 +2382,56 @@ function PageBand({
 }
 
 // src/components/layout/PageHeader.tsx
-var import_jsx_runtime47 = require("react/jsx-runtime");
+var import_jsx_runtime48 = require("react/jsx-runtime");
 function PageHeader({ title, subtitle, actions, className, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("header", { className: cx("pire-pageheader", className), ...rest, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime47.jsxs)("div", { style: { minWidth: 0 }, children: [
-      /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("h1", { className: "pire-pageheader-title", children: title }),
-      subtitle ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("p", { className: "pire-pageheader-sub", children: subtitle }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("header", { className: cx("pire-pageheader", className), ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { style: { minWidth: 0 }, children: [
+      /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("h1", { className: "pire-pageheader-title", children: title }),
+      subtitle ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("p", { className: "pire-pageheader-sub", children: subtitle }) : null
     ] }),
-    actions ? /* @__PURE__ */ (0, import_jsx_runtime47.jsx)("div", { className: "pire-pageheader-actions", children: actions }) : null
+    actions ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "pire-pageheader-actions", children: actions }) : null
   ] });
 }
 
 // src/components/layout/SectionHeader.tsx
-var import_jsx_runtime48 = require("react/jsx-runtime");
+var import_jsx_runtime49 = require("react/jsx-runtime");
 function SectionHeader({ title, meta, actions, className, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime48.jsxs)("div", { className: cx("pire-sectionhead", className), ...rest, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { className: "pire-eyebrow", children: title }),
-    meta ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("span", { style: { font: "var(--type-caption)", color: "var(--text-tertiary)" }, children: meta }) : null,
-    actions ? /* @__PURE__ */ (0, import_jsx_runtime48.jsx)("div", { className: "pire-sectionhead-actions", children: actions }) : null
+  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: cx("pire-sectionhead", className), ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { className: "pire-eyebrow", children: title }),
+    meta ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { style: { font: "var(--type-caption)", color: "var(--text-tertiary)" }, children: meta }) : null,
+    actions ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "pire-sectionhead-actions", children: actions }) : null
   ] });
 }
 
 // src/components/layout/SelectionBar.tsx
-var import_jsx_runtime49 = require("react/jsx-runtime");
+var import_jsx_runtime50 = require("react/jsx-runtime");
 function SelectionBar({ count, noun = "record", children, actions, className, ...rest }) {
   if (!count) return null;
-  return /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("div", { className: cx("pire-selectionbar", className), role: "status", "aria-live": "polite", ...rest, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime49.jsxs)("span", { className: "pire-selectionbar-count", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("div", { className: cx("pire-selectionbar", className), role: "status", "aria-live": "polite", ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("span", { className: "pire-selectionbar-count", children: [
       count.toLocaleString(),
       " ",
       noun,
       count === 1 ? "" : "s",
       " selected"
     ] }),
-    children ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("span", { style: { color: "var(--text-secondary)", font: "var(--type-caption)" }, children }) : null,
-    actions ? /* @__PURE__ */ (0, import_jsx_runtime49.jsx)("div", { className: "pire-selectionbar-actions", children: actions }) : null
+    children ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { style: { color: "var(--text-secondary)", font: "var(--type-caption)" }, children }) : null,
+    actions ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "pire-selectionbar-actions", children: actions }) : null
   ] });
 }
 
 // src/components/layout/FooterBar.tsx
-var import_jsx_runtime50 = require("react/jsx-runtime");
+var import_jsx_runtime51 = require("react/jsx-runtime");
 function FooterBar({ note, actions, children, className, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime50.jsxs)("footer", { className: cx("pire-footerbar", className), ...rest, children: [
-    note ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("span", { className: "pire-footerbar-note", children: note }) : null,
+  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)("footer", { className: cx("pire-footerbar", className), ...rest, children: [
+    note ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("span", { className: "pire-footerbar-note", children: note }) : null,
     children,
-    actions ? /* @__PURE__ */ (0, import_jsx_runtime50.jsx)("div", { className: "pire-footerbar-actions", children: actions }) : null
+    actions ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)("div", { className: "pire-footerbar-actions", children: actions }) : null
   ] });
 }
 
 // src/components/patterns/ConfirmDialog.tsx
-var import_jsx_runtime51 = require("react/jsx-runtime");
+var import_jsx_runtime52 = require("react/jsx-runtime");
 function ConfirmDialog({
   isOpen,
   title,
@@ -2290,7 +2445,7 @@ function ConfirmDialog({
   onConfirm,
   onCancel
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(
     Dialog,
     {
       isOpen,
@@ -2300,12 +2455,12 @@ function ConfirmDialog({
       onClose: onCancel,
       isDismissable: !isBusy,
       showClose: false,
-      footer: /* @__PURE__ */ (0, import_jsx_runtime51.jsxs)(import_jsx_runtime51.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Button, { variant: "tertiary", isDisabled: isBusy, onPress: onCancel, children: cancelLabel }),
-        /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(Button, { variant: tone === "danger" ? "danger" : "primary", isDisabled: isBusy, onPress: onConfirm, children: isBusy ? "Working\u2026" : confirmLabel })
+      footer: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_jsx_runtime52.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Button, { variant: "tertiary", isDisabled: isBusy, onPress: onCancel, children: cancelLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(Button, { variant: tone === "danger" ? "danger" : "primary", isDisabled: isBusy, onPress: onConfirm, children: isBusy ? "Working\u2026" : confirmLabel })
       ] }),
       children: [
-        consequence ? /* @__PURE__ */ (0, import_jsx_runtime51.jsx)(InlineMessage, { kind: tone === "danger" ? "error" : "warning", style: { marginBottom: children ? "var(--sp-3)" : 0 }, children: consequence }) : null,
+        consequence ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(InlineMessage, { kind: tone === "danger" ? "error" : "warning", style: { marginBottom: children ? "var(--sp-3)" : 0 }, children: consequence }) : null,
         children
       ]
     }
@@ -2313,12 +2468,12 @@ function ConfirmDialog({
 }
 
 // src/components/patterns/SidePanel.tsx
-var import_react_aria_components28 = require("react-aria-components");
-var import_jsx_runtime52 = require("react/jsx-runtime");
+var import_react_aria_components29 = require("react-aria-components");
+var import_jsx_runtime53 = require("react/jsx-runtime");
 function SidePanel({ isOpen, title, subtitle, width = 400, children, footer, onClose, className }) {
   const msg = usePireMessages();
-  return /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(
-    import_react_aria_components28.ModalOverlay,
+  return /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(
+    import_react_aria_components29.ModalOverlay,
     {
       className: "pire-sidepanel-overlay",
       isOpen,
@@ -2326,34 +2481,138 @@ function SidePanel({ isOpen, title, subtitle, width = 400, children, footer, onC
       onOpenChange: (o) => {
         if (!o) onClose?.();
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_react_aria_components28.Modal, { className: cx("pire-sidepanel", className), style: { width }, children: /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)(import_react_aria_components28.Dialog, { className: "pire-dialog", style: { height: "100%" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("header", { className: "pire-dialog-head", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime52.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(import_react_aria_components28.Heading, { slot: "title", className: "pire-dialog-title", children: title }),
-            subtitle ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("p", { className: "pire-dialog-sub", style: { margin: 0 }, children: subtitle }) : null
+      children: /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_react_aria_components29.Modal, { className: cx("pire-sidepanel", className), style: { width }, children: /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)(import_react_aria_components29.Dialog, { className: "pire-dialog", style: { height: "100%" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("header", { className: "pire-dialog-head", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(import_react_aria_components29.Heading, { slot: "title", className: "pire-dialog-title", children: title }),
+            subtitle ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("p", { className: "pire-dialog-sub", style: { margin: 0 }, children: subtitle }) : null
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime52.jsx)(IconButton, { icon: "x", label: msg.sidePanelClose, size: "sm", onPress: onClose })
+          /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(IconButton, { icon: "x", label: msg.sidePanelClose, size: "sm", onPress: onClose })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("div", { className: "pire-dialog-body", style: { flex: 1 }, children }),
-        footer ? /* @__PURE__ */ (0, import_jsx_runtime52.jsx)("footer", { className: "pire-dialog-foot", children: footer }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("div", { className: "pire-dialog-body", style: { flex: 1 }, children }),
+        footer ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("footer", { className: "pire-dialog-foot", children: footer }) : null
       ] }) })
     }
   );
 }
 
 // src/components/patterns/EmptyState.tsx
-var import_jsx_runtime53 = require("react/jsx-runtime");
+var import_jsx_runtime54 = require("react/jsx-runtime");
 function EmptyState({ icon = "file-text", title, action, compact, children, className, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime53.jsxs)("div", { className: cx("pire-empty", className), "data-compact": compact ? "true" : void 0, ...rest, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime53.jsx)(Icon, { name: icon, size: 24, className: "pire-empty-icon" }),
-    title ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("p", { className: "pire-empty-title", style: { margin: 0 }, children: title }) : null,
-    children ? /* @__PURE__ */ (0, import_jsx_runtime53.jsx)("p", { className: "pire-empty-body", style: { margin: 0 }, children }) : null,
+  return /* @__PURE__ */ (0, import_jsx_runtime54.jsxs)("div", { className: cx("pire-empty", className), "data-compact": compact ? "true" : void 0, ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime54.jsx)(Icon, { name: icon, size: 24, className: "pire-empty-icon" }),
+    title ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { className: "pire-empty-title", style: { margin: 0 }, children: title }) : null,
+    children ? /* @__PURE__ */ (0, import_jsx_runtime54.jsx)("p", { className: "pire-empty-body", style: { margin: 0 }, children }) : null,
     action
   ] });
 }
 
+// src/components/patterns/FileDropZone.tsx
+var React13 = __toESM(require("react"), 1);
+var import_react_aria_components30 = require("react-aria-components");
+var import_jsx_runtime55 = require("react/jsx-runtime");
+var isImage2 = (file) => file.type.startsWith("image/");
+function FileDropZone({
+  label,
+  value,
+  defaultValue,
+  onChange,
+  acceptedFileTypes,
+  allowsMultiple,
+  maxSize,
+  onError,
+  showPreview = true,
+  uploadProgress,
+  promptLabel,
+  height = "regular",
+  description,
+  errorMessage,
+  isInvalid,
+  isDisabled,
+  isReadOnly,
+  isRequired,
+  fullWidth = true,
+  className,
+  style
+}) {
+  const msg = usePireMessages();
+  const [uncontrolled, setUncontrolled] = React13.useState(defaultValue ?? []);
+  const files = value ?? uncontrolled;
+  const created = React13.useRef([]);
+  React13.useEffect(() => () => {
+    for (const url of created.current) URL.revokeObjectURL(url);
+  }, []);
+  const commit = (next) => {
+    if (value === void 0) setUncontrolled(next);
+    onChange?.(next);
+  };
+  const accept = (picked) => {
+    if (isDisabled || isReadOnly || !picked.length) return;
+    const { accepted, rejected } = screenFiles(picked, { maxSize, acceptedFileTypes });
+    if (rejected.length) onError?.(rejected);
+    if (!accepted.length) return;
+    const wrapped = accepted.map((file) => {
+      const previewUrl = showPreview && isImage2(file) ? URL.createObjectURL(file) : void 0;
+      if (previewUrl) created.current.push(previewUrl);
+      return { file, previewUrl };
+    });
+    commit(allowsMultiple ? [...files, ...wrapped] : wrapped.slice(0, 1));
+  };
+  const remove = (target) => commit(files.filter((f) => f.file !== target));
+  return /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("div", { className: cx("pire-field", className), style, "data-full-width": String(fullWidth), children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("span", { className: "pire-field-label", children: [
+      label,
+      isRequired ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "pire-field-req", "aria-hidden": "true", children: "*" }) : null
+    ] }) : null,
+    /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)(
+      import_react_aria_components30.DropZone,
+      {
+        className: "pire-dropzone",
+        "data-height": height,
+        isDisabled: isDisabled || isReadOnly,
+        onDrop: async (e) => {
+          const dropped = await Promise.all(
+            e.items.filter(import_react_aria_components30.isFileDropItem).map((item) => item.getFile())
+          );
+          accept(dropped);
+        },
+        children: [
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Icon, { name: "download", size: 24, className: "pire-dropzone-icon" }),
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "pire-dropzone-prompt", children: promptLabel ?? msg.fileDropZonePrompt }),
+          /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+            import_react_aria_components30.FileTrigger,
+            {
+              acceptedFileTypes,
+              allowsMultiple,
+              onSelect: (list) => accept(list ? [...list] : []),
+              children: /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Button, { variant: "secondary", isDisabled: isDisabled || isReadOnly, children: msg.fileUploadChoose })
+            }
+          )
+        ]
+      }
+    ),
+    files.length ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("ul", { className: "pire-fileupload-list", children: files.map(({ file, previewUrl }) => /* @__PURE__ */ (0, import_jsx_runtime55.jsxs)("li", { className: "pire-fileupload-item", children: [
+      previewUrl ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("img", { className: "pire-fileupload-thumb", src: previewUrl, alt: "" }) : /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(Icon, { name: "file-text", size: 16, className: "pire-fileupload-icon" }),
+      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "pire-fileupload-name", children: file.name }),
+      /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "pire-fileupload-size", children: formatFileSize(file.size) }),
+      isDisabled || isReadOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(
+        IconButton,
+        {
+          icon: "x",
+          size: "sm",
+          label: msg.fileUploadRemoveNamed.replace("{name}", file.name),
+          onPress: () => remove(file)
+        }
+      )
+    ] }, `${file.name}-${file.size}-${file.lastModified}`)) }) : null,
+    uploadProgress != null ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)(ProgressBar, { value: uploadProgress, label: msg.fileUploadUploading }) : null,
+    description ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "pire-field-hint", children: description }) : null,
+    isInvalid && errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime55.jsx)("span", { className: "pire-field-error", children: errorMessage }) : null
+  ] });
+}
+
 // src/index.ts
-var import_react_aria_components29 = require("react-aria-components");
+var import_react_aria_components31 = require("react-aria-components");
 // Annotate the CommonJS export names for ESM import in node:
 0 && (module.exports = {
   Avatar,
@@ -2370,6 +2629,8 @@ var import_react_aria_components29 = require("react-aria-components");
   Dialog,
   DialogTrigger,
   EmptyState,
+  FileDropZone,
+  FileUpload,
   FilterBar,
   FooterBar,
   FormField,
@@ -2425,6 +2686,7 @@ var import_react_aria_components29 = require("react-aria-components");
   configureIcons,
   enMessages,
   esMessages,
+  formatFileSize,
   usePireMessages,
   useToast
 });