@orianatech/pire 0.6.0 → 0.8.0

package/dist/index.js

@@ -252,9 +252,22 @@ function Tooltip({ label, placement = "top", delay = 500, children }) {
 }
 
 // src/components/core/IconButton.tsx
-import { jsx as jsx4 } from "react/jsx-runtime";
-var IconButton = React2.forwardRef(function IconButton2({ icon, label, size = "md", variant = "tertiary", selected, hideTooltip, className, ...rest }, ref) {
-  const button = /* @__PURE__ */ jsx4(
+import { jsx as jsx4, jsxs as jsxs3 } from "react/jsx-runtime";
+var IconButton = React2.forwardRef(function IconButton2({
+  icon,
+  label,
+  size = "md",
+  variant = "tertiary",
+  selected,
+  hideTooltip,
+  count,
+  countMax = 9,
+  countVariant = "number",
+  className,
+  ...rest
+}, ref) {
+  const showsCount = count != null && count > 0;
+  const button = /* @__PURE__ */ jsxs3(
     AriaButton2,
     {
       ref,
@@ -264,15 +277,19 @@ var IconButton = React2.forwardRef(function IconButton2({ icon, label, size = "m
       "data-size": size,
       "data-variant": variant,
       "data-selected": selected ? "true" : void 0,
+      "data-has-count": showsCount ? "true" : void 0,
       ...rest,
-      children: /* @__PURE__ */ jsx4(Icon, { name: icon, size: size === "lg" ? 20 : 16 })
+      children: [
+        /* @__PURE__ */ jsx4(Icon, { name: icon, size: size === "lg" ? 20 : 16 }),
+        showsCount ? /* @__PURE__ */ jsx4("span", { className: "pire-iconbtn-count", "data-variant": countVariant, "aria-hidden": "true", children: countVariant === "number" ? count > countMax ? `${countMax}+` : count : null }) : null
+      ]
     }
   );
   return hideTooltip ? button : /* @__PURE__ */ jsx4(Tooltip, { label, children: button });
 });
 
 // src/components/core/Badge.tsx
-import { jsx as jsx5, jsxs as jsxs3 } from "react/jsx-runtime";
+import { jsx as jsx5, jsxs as jsxs4 } from "react/jsx-runtime";
 var STATUS_ICON = {
   positive: "check-circle-2",
   critical: "alert-triangle",
@@ -281,7 +298,7 @@ var STATUS_ICON = {
   neutral: "circle"
 };
 function Badge({ children, status = "neutral", showIcon = true, className, ...rest }) {
-  return /* @__PURE__ */ jsxs3("span", { className: cx("pire-badge", className), "data-status": status, ...rest, children: [
+  return /* @__PURE__ */ jsxs4("span", { className: cx("pire-badge", className), "data-status": status, ...rest, children: [
     showIcon ? /* @__PURE__ */ jsx5(Icon, { name: STATUS_ICON[status], size: 12 }) : null,
     children
   ] });
@@ -289,9 +306,9 @@ function Badge({ children, status = "neutral", showIcon = true, className, ...re
 
 // src/components/core/Tag.tsx
 import { Button as AriaButton3 } from "react-aria-components";
-import { jsx as jsx6, jsxs as jsxs4 } from "react/jsx-runtime";
+import { jsx as jsx6, jsxs as jsxs5 } from "react/jsx-runtime";
 function Tag({ children, onRemove, isDisabled, className, ...rest }) {
-  return /* @__PURE__ */ jsxs4("span", { className: cx("pire-tag", className), "data-disabled": isDisabled ? "true" : void 0, ...rest, children: [
+  return /* @__PURE__ */ jsxs5("span", { className: cx("pire-tag", className), "data-disabled": isDisabled ? "true" : void 0, ...rest, children: [
     children,
     onRemove ? /* @__PURE__ */ jsx6(
       AriaButton3,
@@ -307,12 +324,12 @@ function Tag({ children, onRemove, isDisabled, className, ...rest }) {
 }
 
 // src/components/core/Card.tsx
-import { jsx as jsx7, jsxs as jsxs5 } from "react/jsx-runtime";
+import { jsx as jsx7, jsxs as jsxs6 } from "react/jsx-runtime";
 function Card({ title, subtitle, icon, actions, footer, interactive, children, className, ...rest }) {
-  return /* @__PURE__ */ jsxs5("section", { className: cx("pire-card", className), "data-interactive": interactive ? "true" : void 0, ...rest, children: [
-    title || actions ? /* @__PURE__ */ jsxs5("header", { className: "pire-card-head", children: [
+  return /* @__PURE__ */ jsxs6("section", { className: cx("pire-card", className), "data-interactive": interactive ? "true" : void 0, ...rest, children: [
+    title || actions ? /* @__PURE__ */ jsxs6("header", { className: "pire-card-head", children: [
       icon ? /* @__PURE__ */ jsx7(Icon, { name: icon, size: 20, style: { color: "var(--text-secondary)" } }) : null,
-      /* @__PURE__ */ jsxs5("div", { style: { flex: 1, minWidth: 0 }, children: [
+      /* @__PURE__ */ jsxs6("div", { style: { flex: 1, minWidth: 0 }, children: [
         /* @__PURE__ */ jsx7("h3", { className: "pire-card-title", children: title }),
         subtitle ? /* @__PURE__ */ jsx7("p", { className: "pire-card-sub", style: { margin: 0 }, children: subtitle }) : null
       ] }),
@@ -343,7 +360,7 @@ function Avatar({ name, size = "md", src, className, ...rest }) {
 // src/components/core/SegmentedControl.tsx
 import * as React4 from "react";
 import { ToggleButtonGroup, ToggleButton } from "react-aria-components";
-import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
+import { jsx as jsx9, jsxs as jsxs7 } from "react/jsx-runtime";
 function SegmentedControl({
   options,
   value,
@@ -370,7 +387,7 @@ function SegmentedControl({
         const first = [...keys][0];
         if (first != null) onChange?.(String(first));
       },
-      children: options.map((option) => /* @__PURE__ */ jsxs6(
+      children: options.map((option) => /* @__PURE__ */ jsxs7(
         ToggleButton,
         {
           id: option.id,
@@ -453,9 +470,9 @@ function Heading({
 
 // src/components/core/Link.tsx
 import { Link as AriaLink } from "react-aria-components";
-import { jsx as jsx12, jsxs as jsxs7 } from "react/jsx-runtime";
+import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
 function Link({ children, size, isExternal, className, rel, ...rest }) {
-  return /* @__PURE__ */ jsxs7(
+  return /* @__PURE__ */ jsxs8(
     AriaLink,
     {
       className: cx("pire-link", className),
@@ -495,15 +512,15 @@ function Separator({
 }
 
 // src/components/forms/FormField.tsx
-import { jsx as jsx14, jsxs as jsxs8 } from "react/jsx-runtime";
+import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
 function FormField({ label, htmlFor, isRequired, hint, error, layout = "stacked", children, className, ...rest }) {
-  return /* @__PURE__ */ jsxs8("div", { className: cx("pire-field", className), "data-layout": layout, ...rest, children: [
-    /* @__PURE__ */ jsxs8("label", { className: "pire-field-label", htmlFor, children: [
+  return /* @__PURE__ */ jsxs9("div", { className: cx("pire-field", className), "data-layout": layout, ...rest, children: [
+    /* @__PURE__ */ jsxs9("label", { className: "pire-field-label", htmlFor, children: [
       label,
       isRequired ? /* @__PURE__ */ jsx14("span", { className: "pire-field-req", "aria-hidden": "true", children: "*" }) : null
     ] }),
     children,
-    error ? /* @__PURE__ */ jsxs8("span", { className: "pire-field-error", role: "alert", children: [
+    error ? /* @__PURE__ */ jsxs9("span", { className: "pire-field-error", role: "alert", children: [
       /* @__PURE__ */ jsx14(Icon, { name: "alert-circle", size: 12 }),
       error
     ] }) : hint ? /* @__PURE__ */ jsx14("span", { className: "pire-field-hint", children: hint }) : null
@@ -512,7 +529,7 @@ function FormField({ label, htmlFor, isRequired, hint, error, layout = "stacked"
 
 // src/components/forms/Input.tsx
 import { TextField, Label, Input as AriaInput, Group, Text as Text2, FieldError } from "react-aria-components";
-import { jsx as jsx15, jsxs as jsxs9 } from "react/jsx-runtime";
+import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 function Input({
   label,
   icon,
@@ -528,7 +545,7 @@ function Input({
   onChange,
   ...rest
 }) {
-  return /* @__PURE__ */ jsxs9(
+  return /* @__PURE__ */ jsxs10(
     TextField,
     {
       className: cx("pire-field", className),
@@ -537,11 +554,11 @@ function Input({
       validationBehavior: "aria",
       ...rest,
       children: [
-        label ? /* @__PURE__ */ jsxs9(Label, { className: "pire-field-label", children: [
+        label ? /* @__PURE__ */ jsxs10(Label, { className: "pire-field-label", children: [
           label,
           rest.isRequired ? /* @__PURE__ */ jsx15("span", { className: "pire-field-req", "aria-hidden": "true", children: "*" }) : null
         ] }) : null,
-        /* @__PURE__ */ jsxs9(
+        /* @__PURE__ */ jsxs10(
           Group,
           {
             className: "pire-control",
@@ -566,7 +583,7 @@ function Input({
 // src/components/forms/TextArea.tsx
 import * as React5 from "react";
 import { TextField as TextField2, Label as Label2, TextArea as AriaTextArea, Group as Group2, Text as Text3, FieldError as FieldError2 } from "react-aria-components";
-import { jsx as jsx16, jsxs as jsxs10 } from "react/jsx-runtime";
+import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
 var useIsomorphicLayoutEffect = typeof document === "undefined" ? React5.useEffect : React5.useLayoutEffect;
 function TextArea({
   label,
@@ -607,7 +624,7 @@ function TextArea({
     }
     grow();
   }, [autoGrow, grow, rest.value]);
-  return /* @__PURE__ */ jsxs10(
+  return /* @__PURE__ */ jsxs11(
     TextField2,
     {
       className: cx("pire-field", className),
@@ -616,7 +633,7 @@ function TextArea({
       validationBehavior: "aria",
       ...rest,
       children: [
-        label ? /* @__PURE__ */ jsxs10(Label2, { className: "pire-field-label", children: [
+        label ? /* @__PURE__ */ jsxs11(Label2, { className: "pire-field-label", children: [
           label,
           rest.isRequired ? /* @__PURE__ */ jsx16("span", { className: "pire-field-req", "aria-hidden": "true", children: "*" }) : null
         ] }) : null,
@@ -660,7 +677,7 @@ import {
   Text as Text4,
   FieldError as FieldError3
 } from "react-aria-components";
-import { jsx as jsx17, jsxs as jsxs11 } from "react/jsx-runtime";
+import { jsx as jsx17, jsxs as jsxs12 } from "react/jsx-runtime";
 var norm = (o) => typeof o === "string" ? { value: o, label: o, isDisabled: false } : o;
 function Select({
   label,
@@ -678,7 +695,7 @@ function Select({
   ...rest
 }) {
   const items = options.map(norm);
-  return /* @__PURE__ */ jsxs11(
+  return /* @__PURE__ */ jsxs12(
     AriaSelect,
     {
       className: cx("pire-field", className),
@@ -690,11 +707,11 @@ function Select({
       validationBehavior: "aria",
       ...rest,
       children: [
-        label ? /* @__PURE__ */ jsxs11(Label3, { className: "pire-field-label", children: [
+        label ? /* @__PURE__ */ jsxs12(Label3, { className: "pire-field-label", children: [
           label,
           rest.isRequired ? /* @__PURE__ */ jsx17("span", { className: "pire-field-req", "aria-hidden": "true", children: "*" }) : null
         ] }) : null,
-        /* @__PURE__ */ jsxs11(
+        /* @__PURE__ */ jsxs12(
           AriaButton4,
           {
             className: "pire-control",
@@ -717,11 +734,11 @@ function Select({
 
 // src/components/forms/Checkbox.tsx
 import { Checkbox as AriaCheckbox } from "react-aria-components";
-import { Fragment, jsx as jsx18, jsxs as jsxs12 } from "react/jsx-runtime";
+import { Fragment, jsx as jsx18, jsxs as jsxs13 } from "react/jsx-runtime";
 function Checkbox({ label, hint, children, className, ...rest }) {
-  return /* @__PURE__ */ jsx18(AriaCheckbox, { className: cx("pire-choice", className), ...rest, children: ({ isSelected, isIndeterminate }) => /* @__PURE__ */ jsxs12(Fragment, { children: [
+  return /* @__PURE__ */ jsx18(AriaCheckbox, { className: cx("pire-choice", className), ...rest, children: ({ isSelected, isIndeterminate }) => /* @__PURE__ */ jsxs13(Fragment, { children: [
     /* @__PURE__ */ jsx18("span", { className: "pire-choice-box", "aria-hidden": "true", children: isIndeterminate ? /* @__PURE__ */ jsx18(Icon, { name: "minus", size: 12 }) : isSelected ? /* @__PURE__ */ jsx18(Icon, { name: "check", size: 12 }) : null }),
-    /* @__PURE__ */ jsxs12("span", { children: [
+    /* @__PURE__ */ jsxs13("span", { children: [
       label ?? children,
       hint ? /* @__PURE__ */ jsx18("span", { className: "pire-choice-hint", children: hint }) : null
     ] })
@@ -736,9 +753,9 @@ import {
   Text as Text5,
   FieldError as FieldError4
 } from "react-aria-components";
-import { jsx as jsx19, jsxs as jsxs13 } from "react/jsx-runtime";
+import { jsx as jsx19, jsxs as jsxs14 } from "react/jsx-runtime";
 function RadioGroup({ label, description, errorMessage, children, className, ...rest }) {
-  return /* @__PURE__ */ jsxs13(AriaRadioGroup, { className: cx("pire-field", className), validationBehavior: "aria", ...rest, children: [
+  return /* @__PURE__ */ jsxs14(AriaRadioGroup, { className: cx("pire-field", className), validationBehavior: "aria", ...rest, children: [
     label ? /* @__PURE__ */ jsx19(Label4, { className: "pire-field-label", children: label }) : null,
     /* @__PURE__ */ jsx19("div", { className: "pire-radiogroup", children }),
     description ? /* @__PURE__ */ jsx19(Text5, { slot: "description", className: "pire-field-hint", children: description }) : null,
@@ -746,9 +763,9 @@ function RadioGroup({ label, description, errorMessage, children, className, ...
   ] });
 }
 function Radio({ label, hint, children, className, ...rest }) {
-  return /* @__PURE__ */ jsxs13(AriaRadio, { className: cx("pire-choice", className), ...rest, children: [
+  return /* @__PURE__ */ jsxs14(AriaRadio, { className: cx("pire-choice", className), ...rest, children: [
     /* @__PURE__ */ jsx19("span", { className: "pire-choice-box", "data-radio": "true", "aria-hidden": "true" }),
-    /* @__PURE__ */ jsxs13("span", { children: [
+    /* @__PURE__ */ jsxs14("span", { children: [
       label ?? children,
       hint ? /* @__PURE__ */ jsx19("span", { className: "pire-choice-hint", children: hint }) : null
     ] })
@@ -757,9 +774,9 @@ function Radio({ label, hint, children, className, ...rest }) {
 
 // src/components/forms/Switch.tsx
 import { Switch as AriaSwitch } from "react-aria-components";
-import { jsx as jsx20, jsxs as jsxs14 } from "react/jsx-runtime";
+import { jsx as jsx20, jsxs as jsxs15 } from "react/jsx-runtime";
 function Switch({ label, children, className, ...rest }) {
-  return /* @__PURE__ */ jsxs14(AriaSwitch, { className: cx("pire-choice", className), ...rest, children: [
+  return /* @__PURE__ */ jsxs15(AriaSwitch, { className: cx("pire-choice", className), ...rest, children: [
     /* @__PURE__ */ jsx20("span", { className: "pire-switch-track", "aria-hidden": "true", children: /* @__PURE__ */ jsx20("span", { className: "pire-switch-thumb" }) }),
     /* @__PURE__ */ jsx20("span", { children: label ?? children })
   ] });
@@ -789,12 +806,14 @@ var enMessages = {
   filterBarClearAll: "Clear all",
   dataTableSelectAll: "Select all rows",
   dataTableSelectRow: "Select row",
+  dataTableLoading: "Loading records",
   dialogClose: "Close",
   sidePanelClose: "Close panel",
   inlineMessageDismiss: "Dismiss message",
   toastDismiss: "Dismiss",
   toastRegionLabel: "Notifications",
   comboBoxShowSuggestions: "Show suggestions",
+  comboBoxLoading: "Searching\u2026",
   datePickerOpenCalendar: "Open calendar",
   datePickerPreviousMonth: "Previous month",
   datePickerNextMonth: "Next month",
@@ -819,12 +838,14 @@ var esMessages = {
   filterBarClearAll: "Limpiar todo",
   dataTableSelectAll: "Seleccionar todas las filas",
   dataTableSelectRow: "Seleccionar fila",
+  dataTableLoading: "Cargando registros",
   dialogClose: "Cerrar",
   sidePanelClose: "Cerrar panel",
   inlineMessageDismiss: "Descartar mensaje",
   toastDismiss: "Descartar",
   toastRegionLabel: "Notificaciones",
   comboBoxShowSuggestions: "Mostrar sugerencias",
+  comboBoxLoading: "Buscando\u2026",
   datePickerOpenCalendar: "Abrir calendario",
   datePickerPreviousMonth: "Mes anterior",
   datePickerNextMonth: "Mes siguiente",
@@ -863,7 +884,7 @@ function useMessage(key, override) {
 }
 
 // src/components/forms/ComboBox.tsx
-import { jsx as jsx22, jsxs as jsxs15 } from "react/jsx-runtime";
+import { jsx as jsx22, jsxs as jsxs16 } from "react/jsx-runtime";
 var norm2 = (o) => typeof o === "string" ? { value: o, label: o } : o;
 function ComboBox({
   label,
@@ -876,31 +897,42 @@ function ComboBox({
   errorMessage,
   size = "md",
   fullWidth = true,
+  isFilteredExternally,
+  isLoading,
+  loadingLabel,
+  emptyLabel,
+  onLoadMore,
   className,
   style,
   ...rest
 }) {
   const msg = usePireMessages();
   const items = options.map(norm2);
-  return /* @__PURE__ */ jsxs15(
+  const collection = isFilteredExternally ? { items } : { defaultItems: items };
+  const showsStatus = isLoading || isFilteredExternally && items.length === 0 && emptyLabel != null;
+  return /* @__PURE__ */ jsxs16(
     AriaComboBox,
     {
       className: cx("pire-field", className),
       style,
       selectedKey: value,
       defaultSelectedKey: defaultValue,
-      onSelectionChange: (k) => onChange?.(k == null ? null : String(k)),
+      onSelectionChange: (k) => {
+        if (isLoading) return;
+        onChange?.(k == null ? null : String(k));
+      },
       onInputChange,
-      defaultItems: items,
+      ...collection,
+      allowsEmptyCollection: isFilteredExternally || isLoading,
       menuTrigger: "input",
       validationBehavior: "aria",
       ...rest,
       children: [
-        label ? /* @__PURE__ */ jsxs15(Label5, { className: "pire-field-label", children: [
+        label ? /* @__PURE__ */ jsxs16(Label5, { className: "pire-field-label", children: [
           label,
           rest.isRequired ? /* @__PURE__ */ jsx22("span", { className: "pire-field-req", "aria-hidden": "true", children: "*" }) : null
         ] }) : null,
-        /* @__PURE__ */ jsxs15(
+        /* @__PURE__ */ jsxs16(
           Group3,
           {
             className: "pire-control",
@@ -916,10 +948,21 @@ function ComboBox({
         ),
         description ? /* @__PURE__ */ jsx22(Text6, { slot: "description", className: "pire-field-hint", children: description }) : null,
         /* @__PURE__ */ jsx22(FieldError5, { className: "pire-field-error", children: errorMessage }),
-        /* @__PURE__ */ jsx22(Popover2, { className: "pire-popover", children: /* @__PURE__ */ jsx22(ListBox2, { className: "pire-listbox", children: (item) => /* @__PURE__ */ jsxs15(ListBoxItem2, { className: "pire-option", id: item.value, textValue: item.label, isDisabled: item.isDisabled, children: [
-          /* @__PURE__ */ jsx22("span", { style: { flex: 1 }, children: item.label }),
-          item.secondary ? /* @__PURE__ */ jsx22("span", { style: { font: "var(--type-code)", color: "var(--text-tertiary)" }, children: item.secondary }) : null
-        ] }) }) })
+        /* @__PURE__ */ jsx22(Popover2, { className: "pire-popover", children: /* @__PURE__ */ jsx22(
+          ListBox2,
+          {
+            className: "pire-listbox",
+            onScroll: onLoadMore ? (e) => {
+              const el = e.currentTarget;
+              if (el.scrollHeight - el.scrollTop - el.clientHeight < 48) onLoadMore();
+            } : void 0,
+            renderEmptyState: showsStatus ? () => /* @__PURE__ */ jsx22("div", { className: "pire-listbox-status", role: "status", "aria-live": "polite", children: isLoading ? loadingLabel ?? msg.comboBoxLoading : emptyLabel }) : void 0,
+            children: (item) => /* @__PURE__ */ jsxs16(ListBoxItem2, { className: "pire-option", id: item.value, textValue: item.label, isDisabled: item.isDisabled, children: [
+              /* @__PURE__ */ jsx22("span", { className: "pire-option-label", children: item.label }),
+              item.secondary ? /* @__PURE__ */ jsx22("span", { className: "pire-option-secondary", children: item.secondary }) : null
+            ] })
+          }
+        ) })
       ]
     }
   );
@@ -941,7 +984,7 @@ import {
   FieldError as FieldError6,
   VisuallyHidden
 } from "react-aria-components";
-import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
+import { jsx as jsx23, jsxs as jsxs17 } from "react/jsx-runtime";
 var norm3 = (o) => typeof o === "string" ? { value: o, label: o } : o;
 function MultiComboBox({
   label,
@@ -954,6 +997,11 @@ function MultiComboBox({
   errorMessage,
   allowsCustomValue,
   size = "md",
+  isFilteredExternally,
+  isLoading,
+  loadingLabel,
+  emptyLabel,
+  onLoadMore,
   fullWidth = true,
   className,
   style,
@@ -961,6 +1009,8 @@ function MultiComboBox({
 }) {
   const msg = usePireMessages();
   const items = React7.useMemo(() => options.map(norm3), [options]);
+  const collection = isFilteredExternally ? { items } : { defaultItems: items };
+  const showsStatus = isLoading || isFilteredExternally && items.length === 0 && emptyLabel != null;
   const [uncontrolled, setUncontrolled] = React7.useState(defaultValue ?? []);
   const [announcement, setAnnouncement] = React7.useState("");
   const inputRef = React7.useRef(null);
@@ -999,25 +1049,28 @@ function MultiComboBox({
     e.stopPropagation();
     if (!values.includes(next)) commit([...values, next]);
   };
-  return /* @__PURE__ */ jsxs16(
+  return /* @__PURE__ */ jsxs17(
     AriaComboBox2,
     {
       className: cx("pire-field", className),
       style,
       selectionMode: "multiple",
       value: values,
-      onChange: (keys) => commit(keys.map(String)),
+      onChange: (keys) => {
+        if (!isLoading) commit(keys.map(String));
+      },
       onInputChange,
-      defaultItems: items,
+      ...collection,
+      allowsEmptyCollection: isFilteredExternally || isLoading,
       menuTrigger: "input",
       validationBehavior: "aria",
       ...rest,
       children: [
-        label ? /* @__PURE__ */ jsxs16(Label6, { className: "pire-field-label", children: [
+        label ? /* @__PURE__ */ jsxs17(Label6, { className: "pire-field-label", children: [
           label,
           rest.isRequired ? /* @__PURE__ */ jsx23("span", { className: "pire-field-req", "aria-hidden": "true", children: "*" }) : null
         ] }) : null,
-        /* @__PURE__ */ jsxs16(
+        /* @__PURE__ */ jsxs17(
           Group4,
           {
             className: "pire-control",
@@ -1028,7 +1081,7 @@ function MultiComboBox({
             "data-readonly": rest.isReadOnly ? "true" : void 0,
             children: [
               /* @__PURE__ */ jsx23(Icon, { name: "search", size: 16, className: "pire-leading-icon" }),
-              /* @__PURE__ */ jsxs16("div", { className: "pire-chipfield", children: [
+              /* @__PURE__ */ jsxs17("div", { className: "pire-chipfield", children: [
                 /* @__PURE__ */ jsx23(ButtonContext.Provider, { value: null, children: values.map((v) => (
                   /* Disabled follows the field, not `isEditable`: a read-only field's chips are
                      real, current values and should read as such — they simply lose the × . */
@@ -1051,10 +1104,21 @@ function MultiComboBox({
         /* @__PURE__ */ jsx23(VisuallyHidden, { children: /* @__PURE__ */ jsx23("span", { "aria-live": "polite", children: announcement }) }),
         description ? /* @__PURE__ */ jsx23(Text7, { slot: "description", className: "pire-field-hint", children: description }) : null,
         /* @__PURE__ */ jsx23(FieldError6, { className: "pire-field-error", children: errorMessage }),
-        /* @__PURE__ */ jsx23(Popover3, { className: "pire-popover", children: /* @__PURE__ */ jsx23(ListBox3, { className: "pire-listbox", children: (item) => /* @__PURE__ */ jsxs16(ListBoxItem3, { className: "pire-option", id: item.value, textValue: item.label, isDisabled: item.isDisabled, children: [
-          /* @__PURE__ */ jsx23("span", { style: { flex: 1 }, children: item.label }),
-          item.secondary ? /* @__PURE__ */ jsx23("span", { style: { font: "var(--type-code)", color: "var(--text-tertiary)" }, children: item.secondary }) : null
-        ] }) }) })
+        /* @__PURE__ */ jsx23(Popover3, { className: "pire-popover", children: /* @__PURE__ */ jsx23(
+          ListBox3,
+          {
+            className: "pire-listbox",
+            onScroll: onLoadMore ? (e) => {
+              const el = e.currentTarget;
+              if (el.scrollHeight - el.scrollTop - el.clientHeight < 48) onLoadMore();
+            } : void 0,
+            renderEmptyState: showsStatus ? () => /* @__PURE__ */ jsx23("div", { className: "pire-listbox-status", role: "status", "aria-live": "polite", children: isLoading ? loadingLabel ?? msg.comboBoxLoading : emptyLabel }) : void 0,
+            children: (item) => /* @__PURE__ */ jsxs17(ListBoxItem3, { className: "pire-option", id: item.value, textValue: item.label, isDisabled: item.isDisabled, children: [
+              /* @__PURE__ */ jsx23("span", { className: "pire-option-label", children: item.label }),
+              item.secondary ? /* @__PURE__ */ jsx23("span", { className: "pire-option-secondary", children: item.secondary }) : null
+            ] })
+          }
+        ) })
       ]
     }
   );
@@ -1070,7 +1134,7 @@ import {
   Text as Text8,
   FieldError as FieldError7
 } from "react-aria-components";
-import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
+import { jsx as jsx24, jsxs as jsxs18 } from "react/jsx-runtime";
 function NumberField({
   label,
   suffix,
@@ -1084,12 +1148,12 @@ function NumberField({
   ...rest
 }) {
   const msg = usePireMessages();
-  return /* @__PURE__ */ jsxs17(AriaNumberField, { className: cx("pire-field", className), style, validationBehavior: "aria", ...rest, children: [
-    label ? /* @__PURE__ */ jsxs17(Label7, { className: "pire-field-label", children: [
+  return /* @__PURE__ */ jsxs18(AriaNumberField, { className: cx("pire-field", className), style, validationBehavior: "aria", ...rest, children: [
+    label ? /* @__PURE__ */ jsxs18(Label7, { className: "pire-field-label", children: [
       label,
       rest.isRequired ? /* @__PURE__ */ jsx24("span", { className: "pire-field-req", "aria-hidden": "true", children: "*" }) : null
     ] }) : null,
-    /* @__PURE__ */ jsxs17(
+    /* @__PURE__ */ jsxs18(
       Group5,
       {
         className: "pire-control",
@@ -1100,7 +1164,7 @@ function NumberField({
         children: [
           /* @__PURE__ */ jsx24(AriaInput4, { className: "pire-input", "data-numeric": "true" }),
           suffix ? /* @__PURE__ */ jsx24("span", { className: "pire-affix", children: suffix }) : null,
-          hideStepper ? null : /* @__PURE__ */ jsxs17("span", { className: "pire-stepper", children: [
+          hideStepper ? null : /* @__PURE__ */ jsxs18("span", { className: "pire-stepper", children: [
             /* @__PURE__ */ jsx24(AriaButton7, { slot: "increment", className: "pire-stepper-btn", "aria-label": msg.numberFieldIncrease, children: /* @__PURE__ */ jsx24(Icon, { name: "plus", size: 10 }) }),
             /* @__PURE__ */ jsx24(AriaButton7, { slot: "decrement", className: "pire-stepper-btn", "aria-label": msg.numberFieldDecrease, children: /* @__PURE__ */ jsx24(Icon, { name: "minus", size: 10 }) })
           ] })
@@ -1132,7 +1196,7 @@ import {
   Text as Text9,
   FieldError as FieldError8
 } from "react-aria-components";
-import { jsx as jsx25, jsxs as jsxs18 } from "react/jsx-runtime";
+import { jsx as jsx25, jsxs as jsxs19 } from "react/jsx-runtime";
 function DatePicker({
   label,
   description,
@@ -1144,12 +1208,12 @@ function DatePicker({
   ...rest
 }) {
   const msg = usePireMessages();
-  return /* @__PURE__ */ jsxs18(AriaDatePicker, { className: cx("pire-field", className), style, validationBehavior: "aria", ...rest, children: [
-    label ? /* @__PURE__ */ jsxs18(Label8, { className: "pire-field-label", children: [
+  return /* @__PURE__ */ jsxs19(AriaDatePicker, { className: cx("pire-field", className), style, validationBehavior: "aria", ...rest, children: [
+    label ? /* @__PURE__ */ jsxs19(Label8, { className: "pire-field-label", children: [
       label,
       rest.isRequired ? /* @__PURE__ */ jsx25("span", { className: "pire-field-req", "aria-hidden": "true", children: "*" }) : null
     ] }) : null,
-    /* @__PURE__ */ jsxs18(
+    /* @__PURE__ */ jsxs19(
       Group6,
       {
         className: "pire-control",
@@ -1165,13 +1229,13 @@ function DatePicker({
     ),
     description ? /* @__PURE__ */ jsx25(Text9, { slot: "description", className: "pire-field-hint", children: description }) : null,
     /* @__PURE__ */ jsx25(FieldError8, { className: "pire-field-error", children: errorMessage }),
-    /* @__PURE__ */ jsx25(Popover4, { className: "pire-popover", children: /* @__PURE__ */ jsx25(AriaDialog, { children: /* @__PURE__ */ jsxs18(Calendar, { className: "pire-calendar", children: [
-      /* @__PURE__ */ jsxs18("header", { className: "pire-calendar-head", children: [
+    /* @__PURE__ */ jsx25(Popover4, { className: "pire-popover", children: /* @__PURE__ */ jsx25(AriaDialog, { children: /* @__PURE__ */ jsxs19(Calendar, { className: "pire-calendar", children: [
+      /* @__PURE__ */ jsxs19("header", { className: "pire-calendar-head", children: [
         /* @__PURE__ */ jsx25(AriaButton8, { slot: "previous", className: "pire-iconbtn", "data-size": "sm", "aria-label": msg.datePickerPreviousMonth, children: /* @__PURE__ */ jsx25(Icon, { name: "chevron-left", size: 16 }) }),
         /* @__PURE__ */ jsx25(Heading2, { className: "pire-calendar-title" }),
         /* @__PURE__ */ jsx25(AriaButton8, { slot: "next", className: "pire-iconbtn", "data-size": "sm", "aria-label": msg.datePickerNextMonth, children: /* @__PURE__ */ jsx25(Icon, { name: "chevron-right", size: 16 }) })
       ] }),
-      /* @__PURE__ */ jsxs18(CalendarGrid, { className: "pire-calendar-grid", children: [
+      /* @__PURE__ */ jsxs19(CalendarGrid, { className: "pire-calendar-grid", children: [
         /* @__PURE__ */ jsx25(CalendarGridHeader, { children: (day) => /* @__PURE__ */ jsx25(CalendarHeaderCell, { children: day }) }),
         /* @__PURE__ */ jsx25(CalendarGridBody, { children: (date) => /* @__PURE__ */ jsx25(CalendarCell, { date, className: "pire-calendar-cell" }) })
       ] })
@@ -1187,7 +1251,7 @@ import * as React8 from "react";
 
 // src/components/feedback/Dialog.tsx
 import { ModalOverlay, Modal, Dialog as AriaDialog2, Heading as Heading3 } from "react-aria-components";
-import { jsx as jsx26, jsxs as jsxs19 } from "react/jsx-runtime";
+import { jsx as jsx26, jsxs as jsxs20 } from "react/jsx-runtime";
 function Dialog({
   isOpen,
   onOpenChange,
@@ -1216,9 +1280,9 @@ function Dialog({
       onOpenChange: (o) => {
         if (!o) close();
       },
-      children: /* @__PURE__ */ jsx26(Modal, { className: cx("pire-modal", className), "data-size": size, style, children: /* @__PURE__ */ jsxs19(AriaDialog2, { className: "pire-dialog", children: [
-        title ? /* @__PURE__ */ jsxs19("header", { className: "pire-dialog-head", children: [
-          /* @__PURE__ */ jsxs19("div", { style: { flex: 1, minWidth: 0 }, children: [
+      children: /* @__PURE__ */ jsx26(Modal, { className: cx("pire-modal", className), "data-size": size, style, children: /* @__PURE__ */ jsxs20(AriaDialog2, { className: "pire-dialog", children: [
+        title ? /* @__PURE__ */ jsxs20("header", { className: "pire-dialog-head", children: [
+          /* @__PURE__ */ jsxs20("div", { style: { flex: 1, minWidth: 0 }, children: [
             /* @__PURE__ */ jsx26(Heading3, { slot: "title", className: "pire-dialog-title", children: title }),
             subtitle ? /* @__PURE__ */ jsx26("p", { className: "pire-dialog-sub", style: { margin: 0 }, children: subtitle }) : null
           ] }),
@@ -1240,7 +1304,54 @@ import {
   Row,
   Cell
 } from "react-aria-components";
-import { jsx as jsx27, jsxs as jsxs20 } from "react/jsx-runtime";
+
+// src/components/feedback/Skeleton.tsx
+import { jsx as jsx27 } from "react/jsx-runtime";
+function Skeleton({ shape = "text", width, height, className, style, ...rest }) {
+  return /* @__PURE__ */ jsx27(
+    "div",
+    {
+      className: cx("pire-skeleton", className),
+      "data-shape": shape,
+      "aria-hidden": "true",
+      style: { width, height, ...style },
+      ...rest
+    }
+  );
+}
+var BAR_WIDTHS = ["72%", "54%", "86%", "63%"];
+function SkeletonTableRow({ columns, density = "regular", className, style, ...rest }) {
+  const cells = typeof columns === "number" ? Array.from({ length: columns }, () => ({})) : columns;
+  return /* @__PURE__ */ jsx27(
+    "div",
+    {
+      className: cx("pire-skeleton-row", className),
+      "data-density": density,
+      "aria-hidden": "true",
+      style,
+      ...rest,
+      children: cells.map((c, i) => {
+        const align = c.numeric ? "right" : c.align ?? "left";
+        return (
+          // biome-ignore lint/suspicious/noArrayIndexKey: columns are positional and never reordered.
+          /* @__PURE__ */ jsx27(
+            "div",
+            {
+              className: "pire-skeleton-cell",
+              "data-align": align,
+              style: { width: c.width, flex: c.width ? "0 0 auto" : void 0 },
+              children: /* @__PURE__ */ jsx27(Skeleton, { width: BAR_WIDTHS[i % BAR_WIDTHS.length] })
+            },
+            i
+          )
+        );
+      })
+    }
+  );
+}
+
+// src/components/data/DataTable.tsx
+import { jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
 function DataTable({
   columns,
   rows,
@@ -1253,6 +1364,9 @@ function DataTable({
   onRowAction,
   stickyHeader = true,
   emptyLabel = "No records match the current filters.",
+  isLoading,
+  loadingRowCount,
+  loadingLabel,
   className,
   style,
   ...rest
@@ -1263,70 +1377,91 @@ function DataTable({
     if (keys === "all") return onSelectionChange?.(rows.map((r) => r.id));
     onSelectionChange?.([...keys]);
   };
-  return /* @__PURE__ */ jsx27("div", { className: cx("pire-table-wrap", className), style, children: /* @__PURE__ */ jsxs20(
-    Table,
+  const skeletonRows = loadingRowCount ?? (rows.length || 5);
+  const skeletonColumns = [
+    ...selectable ? [{ width: 44 }] : [],
+    ...columns.map((c) => ({ width: c.width, align: c.align, numeric: c.numeric }))
+  ];
+  const body = isLoading ? [] : rows;
+  return /* @__PURE__ */ jsx28(
+    "div",
     {
-      className: "pire-table",
-      "data-density": density,
-      "data-sticky": String(stickyHeader),
-      "aria-label": rest["aria-label"],
-      selectionMode: selectable ? "multiple" : "none",
-      selectedKeys: selected ? new Set(selected) : void 0,
-      onSelectionChange: handleSelection,
-      sortDescriptor,
-      onSortChange: (d) => onSortChange?.({ key: String(d.column), dir: d.direction === "ascending" ? "asc" : "desc" }),
-      onRowAction: onRowAction ? (key) => {
-        const row = rows.find((r) => String(r.id) === String(key));
-        if (row) onRowAction(row);
-      } : void 0,
-      children: [
-        /* @__PURE__ */ jsxs20(TableHeader, { className: "pire-thead-row", children: [
-          selectable ? /* @__PURE__ */ jsx27(Column, { className: "pire-th", width: 44, children: /* @__PURE__ */ jsx27(Checkbox, { slot: "selection", "aria-label": msg.dataTableSelectAll }) }) : null,
-          columns.map((c, i) => /* @__PURE__ */ jsx27(
-            Column,
-            {
-              id: c.key,
-              className: "pire-th",
-              isRowHeader: i === 0 && !selectable,
-              allowsSorting: c.sortable,
-              width: c.width,
-              "data-align": c.numeric || c.align === "right" ? "right" : c.align,
-              "data-allows-sorting": c.sortable ? "true" : void 0,
-              children: /* @__PURE__ */ jsxs20("span", { className: "pire-th-inner", children: [
-                c.label,
-                c.sortable ? /* @__PURE__ */ jsx27(
-                  Icon,
-                  {
-                    size: 12,
-                    name: sort?.key === c.key ? sort.dir === "asc" ? "arrow-up" : "arrow-down" : "chevrons-up-down",
-                    style: { color: sort?.key === c.key ? "var(--accent-subtle-fg)" : "var(--text-tertiary)" }
-                  }
-                ) : null
-              ] })
-            },
-            c.key
-          ))
-        ] }),
-        /* @__PURE__ */ jsx27(TableBody, { renderEmptyState: () => /* @__PURE__ */ jsx27("div", { className: "pire-table-empty", children: emptyLabel }), children: rows.map((row) => /* @__PURE__ */ jsxs20(Row, { id: row.id, className: "pire-tr", "data-pressable": onRowAction ? "true" : void 0, children: [
-          selectable ? /* @__PURE__ */ jsx27(Cell, { className: "pire-td", children: /* @__PURE__ */ jsx27(Checkbox, { slot: "selection", "aria-label": msg.dataTableSelectRow }) }) : null,
-          columns.map((c) => /* @__PURE__ */ jsx27(
-            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)) })
-      ]
+      className: cx("pire-table-wrap", className),
+      style,
+      "data-loading": isLoading ? "true" : void 0,
+      "aria-busy": isLoading ? "true" : void 0,
+      children: /* @__PURE__ */ jsxs21(
+        Table,
+        {
+          className: "pire-table",
+          "data-density": density,
+          "data-sticky": String(stickyHeader),
+          "aria-label": rest["aria-label"],
+          selectionMode: selectable ? "multiple" : "none",
+          selectedKeys: selected ? new Set(selected) : void 0,
+          onSelectionChange: handleSelection,
+          sortDescriptor,
+          onSortChange: (d) => onSortChange?.({ key: String(d.column), dir: d.direction === "ascending" ? "asc" : "desc" }),
+          onRowAction: onRowAction ? (key) => {
+            const row = rows.find((r) => String(r.id) === String(key));
+            if (row) onRowAction(row);
+          } : void 0,
+          children: [
+            /* @__PURE__ */ jsxs21(TableHeader, { className: "pire-thead-row", children: [
+              selectable ? /* @__PURE__ */ jsx28(Column, { className: "pire-th", width: 44, children: /* @__PURE__ */ jsx28(Checkbox, { slot: "selection", "aria-label": msg.dataTableSelectAll }) }) : null,
+              columns.map((c, i) => /* @__PURE__ */ jsx28(
+                Column,
+                {
+                  id: c.key,
+                  className: "pire-th",
+                  isRowHeader: i === 0 && !selectable,
+                  allowsSorting: c.sortable,
+                  width: c.width,
+                  "data-align": c.numeric || c.align === "right" ? "right" : c.align,
+                  "data-allows-sorting": c.sortable ? "true" : void 0,
+                  children: /* @__PURE__ */ jsxs21("span", { className: "pire-th-inner", children: [
+                    c.label,
+                    c.sortable ? /* @__PURE__ */ jsx28(
+                      Icon,
+                      {
+                        size: 12,
+                        name: sort?.key === c.key ? sort.dir === "asc" ? "arrow-up" : "arrow-down" : "chevrons-up-down",
+                        style: { color: sort?.key === c.key ? "var(--accent-subtle-fg)" : "var(--text-tertiary)" }
+                      }
+                    ) : null
+                  ] })
+                },
+                c.key
+              ))
+            ] }),
+            /* @__PURE__ */ jsx28(TableBody, { renderEmptyState: () => isLoading ? /* @__PURE__ */ jsxs21("div", { className: "pire-table-loading", role: "status", "aria-live": "polite", children: [
+              /* @__PURE__ */ jsx28("span", { className: "pire-sr-only", children: loadingLabel ?? msg.dataTableLoading }),
+              Array.from({ length: skeletonRows }, (_, i) => (
+                // biome-ignore lint/suspicious/noArrayIndexKey: placeholder rows are positional.
+                /* @__PURE__ */ jsx28(SkeletonTableRow, { columns: skeletonColumns, density }, i)
+              ))
+            ] }) : /* @__PURE__ */ jsx28("div", { className: "pire-table-empty", children: emptyLabel }), children: body.map((row) => /* @__PURE__ */ jsxs21(Row, { id: row.id, className: "pire-tr", "data-pressable": onRowAction ? "true" : void 0, children: [
+              selectable ? /* @__PURE__ */ jsx28(Cell, { className: "pire-td", children: /* @__PURE__ */ jsx28(Checkbox, { slot: "selection", "aria-label": msg.dataTableSelectRow }) }) : null,
+              columns.map((c) => /* @__PURE__ */ jsx28(
+                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)) })
+          ]
+        }
+      )
     }
-  ) });
+  );
 }
 
 // src/components/patterns/ValueHelpDialog.tsx
-import { jsx as jsx28, jsxs as jsxs21 } from "react/jsx-runtime";
+import { jsx as jsx29, jsxs as jsxs22 } from "react/jsx-runtime";
 function ValueHelpDialog({
   isOpen,
   title = "Select a record",
@@ -1347,16 +1482,16 @@ function ValueHelpDialog({
     if (!q) return rows;
     return rows.filter((row) => Object.values(row).some((v) => String(v).toLowerCase().includes(q)));
   }, [rows, query]);
-  return /* @__PURE__ */ jsx28(
+  return /* @__PURE__ */ jsx29(
     Dialog,
     {
       isOpen,
       size: "lg",
       title,
       onClose,
-      footer: /* @__PURE__ */ jsx28(Button, { variant: "tertiary", onPress: onClose, children: msg.valueHelpDialogCancel }),
-      children: /* @__PURE__ */ jsxs21("div", { style: { display: "flex", flexDirection: "column", gap: "var(--sp-3)" }, children: [
-        /* @__PURE__ */ jsx28(
+      footer: /* @__PURE__ */ jsx29(Button, { variant: "tertiary", onPress: onClose, children: msg.valueHelpDialogCancel }),
+      children: /* @__PURE__ */ jsxs22("div", { style: { display: "flex", flexDirection: "column", gap: "var(--sp-3)" }, children: [
+        /* @__PURE__ */ jsx29(
           Input,
           {
             "aria-label": msg.valueHelpDialogSearch,
@@ -1368,7 +1503,7 @@ function ValueHelpDialog({
             autoFocus: true
           }
         ),
-        /* @__PURE__ */ jsx28(
+        /* @__PURE__ */ jsx29(
           DataTable,
           {
             "aria-label": typeof title === "string" ? title : "Records",
@@ -1388,7 +1523,7 @@ function ValueHelpDialog({
 }
 
 // src/components/forms/ValueHelpField.tsx
-import { jsx as jsx29, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx30, jsxs as jsxs23 } from "react/jsx-runtime";
 var defaultFormat = (row) => [row.id, row.name ?? row.label ?? row.text].filter(Boolean).join(" \u2014 ");
 function ValueHelpField({
   label,
@@ -1410,9 +1545,9 @@ function ValueHelpField({
 }) {
   const msg = usePireMessages();
   const [open, setOpen] = React9.useState(false);
-  return /* @__PURE__ */ jsxs22("div", { className: cx(className), style, children: [
-    /* @__PURE__ */ jsxs22("div", { style: { display: "flex", gap: "var(--sp-2)", alignItems: "flex-end" }, children: [
-      /* @__PURE__ */ jsx29(
+  return /* @__PURE__ */ jsxs23("div", { className: cx(className), style, children: [
+    /* @__PURE__ */ jsxs23("div", { style: { display: "flex", gap: "var(--sp-2)", alignItems: "flex-end" }, children: [
+      /* @__PURE__ */ jsx30(
         Input,
         {
           label,
@@ -1426,7 +1561,7 @@ function ValueHelpField({
           errorMessage
         }
       ),
-      allowsClear && value ? /* @__PURE__ */ jsx29(
+      allowsClear && value ? /* @__PURE__ */ jsx30(
         IconButton,
         {
           icon: "x",
@@ -1436,7 +1571,7 @@ function ValueHelpField({
           onPress: () => onChange?.(null)
         }
       ) : null,
-      /* @__PURE__ */ jsx29(
+      /* @__PURE__ */ jsx30(
         IconButton,
         {
           icon: "search",
@@ -1447,7 +1582,7 @@ function ValueHelpField({
         }
       )
     ] }),
-    /* @__PURE__ */ jsx29(
+    /* @__PURE__ */ jsx30(
       ValueHelpDialog,
       {
         isOpen: open,
@@ -1462,7 +1597,7 @@ function ValueHelpField({
 }
 
 // src/components/navigation/ShellBar.tsx
-import { jsx as jsx30, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx31, jsxs as jsxs24 } from "react/jsx-runtime";
 var initials2 = (name) => name.trim().split(/\s+/).slice(0, 2).map((p) => p[0]).join("").toUpperCase();
 function ShellBar({
   product,
@@ -1477,22 +1612,22 @@ function ShellBar({
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ jsxs23("header", { className: cx("pire-shellbar", className), ...rest, children: [
-    onMenu ? /* @__PURE__ */ jsx30(IconButton, { icon: "menu", label: menuLabel, variant: "inverse", size: "sm", onPress: onMenu }) : null,
-    monogram ? /* @__PURE__ */ jsx30("span", { className: "pire-shellbar-mono", "aria-hidden": "true", children: monogram }) : null,
-    product ? /* @__PURE__ */ jsx30("span", { className: "pire-shellbar-product", children: product }) : null,
-    title ? /* @__PURE__ */ jsx30("span", { className: "pire-shellbar-title", children: title }) : null,
-    /* @__PURE__ */ jsx30("span", { className: "pire-shellbar-spacer" }),
-    onSearch ? /* @__PURE__ */ jsx30(IconButton, { icon: "search", label: searchLabel, variant: "inverse", size: "sm", onPress: onSearch }) : null,
+  return /* @__PURE__ */ jsxs24("header", { className: cx("pire-shellbar", className), ...rest, children: [
+    onMenu ? /* @__PURE__ */ jsx31(IconButton, { icon: "menu", label: menuLabel, variant: "inverse", size: "sm", onPress: onMenu }) : null,
+    monogram ? /* @__PURE__ */ jsx31("span", { className: "pire-shellbar-mono", "aria-hidden": "true", children: monogram }) : null,
+    product ? /* @__PURE__ */ jsx31("span", { className: "pire-shellbar-product", children: product }) : null,
+    title ? /* @__PURE__ */ jsx31("span", { className: "pire-shellbar-title", children: title }) : null,
+    /* @__PURE__ */ jsx31("span", { className: "pire-shellbar-spacer" }),
+    onSearch ? /* @__PURE__ */ jsx31(IconButton, { icon: "search", label: searchLabel, variant: "inverse", size: "sm", onPress: onSearch }) : null,
     actions,
-    user ? /* @__PURE__ */ jsx30("span", { className: "pire-avatar", title: user, "aria-label": user, role: "img", children: initials2(user) }) : null
+    user ? /* @__PURE__ */ jsx31("span", { className: "pire-avatar", title: user, "aria-label": user, role: "img", children: initials2(user) }) : null
   ] });
 }
 
 // src/components/navigation/SideNav.tsx
 import * as React10 from "react";
 import { Button as AriaButton9, Disclosure, DisclosureGroup, DisclosurePanel } from "react-aria-components";
-import { jsx as jsx31, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx32, jsxs as jsxs25 } from "react/jsx-runtime";
 function findActiveParent(groups, value) {
   if (value == null) return void 0;
   for (const group of groups) {
@@ -1540,7 +1675,7 @@ function SideNav({
   };
   const renderRow = (item, onPress, isGroup) => {
     const selected = !isGroup && item.id === value;
-    const button = /* @__PURE__ */ jsxs24(
+    const button = /* @__PURE__ */ jsxs25(
       AriaButton9,
       {
         className: "pire-sidenav-item",
@@ -1550,17 +1685,17 @@ function SideNav({
         "aria-label": collapsed ? item.label : void 0,
         onPress,
         children: [
-          item.icon ? /* @__PURE__ */ jsx31(Icon, { name: item.icon, size: 16 }) : null,
-          collapsed ? null : /* @__PURE__ */ jsx31("span", { children: item.label }),
-          item.count != null && !collapsed ? /* @__PURE__ */ jsx31("span", { className: "pire-sidenav-count", children: item.count }) : null
+          item.icon ? /* @__PURE__ */ jsx32(Icon, { name: item.icon, size: 16 }) : null,
+          collapsed ? null : /* @__PURE__ */ jsx32("span", { children: item.label }),
+          item.count != null && !collapsed ? /* @__PURE__ */ jsx32("span", { className: "pire-sidenav-count", children: item.count }) : null
         ]
       },
       item.id
     );
-    return collapsed ? /* @__PURE__ */ jsx31(Tooltip, { label: item.label, placement: "right", children: button }, item.id) : button;
+    return collapsed ? /* @__PURE__ */ jsx32(Tooltip, { label: item.label, placement: "right", children: button }, item.id) : button;
   };
-  const renderSection = (item) => /* @__PURE__ */ jsxs24(Disclosure, { id: item.id, className: "pire-sidenav-section", children: [
-    /* @__PURE__ */ jsxs24(
+  const renderSection = (item) => /* @__PURE__ */ jsxs25(Disclosure, { id: item.id, className: "pire-sidenav-section", children: [
+    /* @__PURE__ */ jsxs25(
       AriaButton9,
       {
         slot: "trigger",
@@ -1568,16 +1703,16 @@ function SideNav({
         "data-kind": "group",
         "data-active-child": item.id === activeParent ? "true" : void 0,
         children: [
-          item.icon ? /* @__PURE__ */ jsx31(Icon, { name: item.icon, size: 16 }) : null,
-          /* @__PURE__ */ jsx31("span", { children: item.label }),
-          item.count != null ? /* @__PURE__ */ jsx31("span", { className: "pire-sidenav-count", children: item.count }) : null,
-          /* @__PURE__ */ jsx31(Icon, { name: "chevron-down", size: 16, className: "pire-sidenav-chevron" })
+          item.icon ? /* @__PURE__ */ jsx32(Icon, { name: item.icon, size: 16 }) : null,
+          /* @__PURE__ */ jsx32("span", { children: item.label }),
+          item.count != null ? /* @__PURE__ */ jsx32("span", { className: "pire-sidenav-count", children: item.count }) : null,
+          /* @__PURE__ */ jsx32(Icon, { name: "chevron-down", size: 16, className: "pire-sidenav-chevron" })
         ]
       }
     ),
-    /* @__PURE__ */ jsx31(DisclosurePanel, { className: "pire-sidenav-subnav", children: item.items?.map((child) => {
+    /* @__PURE__ */ jsx32(DisclosurePanel, { className: "pire-sidenav-subnav", children: item.items?.map((child) => {
       const selected = child.id === value;
-      return /* @__PURE__ */ jsxs24(
+      return /* @__PURE__ */ jsxs25(
         AriaButton9,
         {
           className: "pire-sidenav-item pire-sidenav-subitem",
@@ -1585,15 +1720,15 @@ function SideNav({
           "aria-current": selected ? "page" : void 0,
           onPress: () => onChange?.(child.id),
           children: [
-            /* @__PURE__ */ jsx31("span", { children: child.label }),
-            child.count != null ? /* @__PURE__ */ jsx31("span", { className: "pire-sidenav-count", children: child.count }) : null
+            /* @__PURE__ */ jsx32("span", { children: child.label }),
+            child.count != null ? /* @__PURE__ */ jsx32("span", { className: "pire-sidenav-count", children: child.count }) : null
           ]
         },
         child.id
       );
     }) })
   ] }, item.id);
-  return /* @__PURE__ */ jsxs24(
+  return /* @__PURE__ */ jsxs25(
     "nav",
     {
       className: cx("pire-sidenav", className),
@@ -1608,9 +1743,9 @@ function SideNav({
             if (isGroup && !collapsed) return renderSection(item);
             return renderRow(item, () => isGroup ? toggleExpanded(item.id) : onChange?.(item.id), isGroup);
           });
-          return /* @__PURE__ */ jsxs24("div", { className: "pire-sidenav-group", children: [
-            group.label && !collapsed ? /* @__PURE__ */ jsx31("div", { className: "pire-sidenav-label", children: group.label }) : null,
-            hasSections ? /* @__PURE__ */ jsx31(
+          return /* @__PURE__ */ jsxs25("div", { className: "pire-sidenav-group", children: [
+            group.label && !collapsed ? /* @__PURE__ */ jsx32("div", { className: "pire-sidenav-label", children: group.label }) : null,
+            hasSections ? /* @__PURE__ */ jsx32(
               DisclosureGroup,
               {
                 className: "pire-sidenav-tree",
@@ -1622,7 +1757,7 @@ function SideNav({
             ) : rows
           ] }, group.label ?? gi);
         }),
-        footer ? /* @__PURE__ */ jsx31("div", { className: "pire-sidenav-footer", children: footer }) : null
+        footer ? /* @__PURE__ */ jsx32("div", { className: "pire-sidenav-footer", children: footer }) : null
       ]
     }
   );
@@ -1630,9 +1765,9 @@ function SideNav({
 
 // src/components/navigation/Tabs.tsx
 import { Tabs as AriaTabs, TabList, Tab as AriaTab, TabPanel } from "react-aria-components";
-import { jsx as jsx32, jsxs as jsxs25 } from "react/jsx-runtime";
+import { jsx as jsx33, jsxs as jsxs26 } from "react/jsx-runtime";
 function Tabs({ items, value, defaultValue, onChange, panels, className, style, ...rest }) {
-  return /* @__PURE__ */ jsxs25(
+  return /* @__PURE__ */ jsxs26(
     AriaTabs,
     {
       className,
@@ -1641,12 +1776,12 @@ function Tabs({ items, value, defaultValue, onChange, panels, className, style,
       defaultSelectedKey: defaultValue,
       onSelectionChange: (k) => onChange?.(String(k)),
       children: [
-        /* @__PURE__ */ jsx32(TabList, { className: "pire-tablist", items, "aria-label": rest["aria-label"] ?? "Views", children: (item) => /* @__PURE__ */ jsxs25(AriaTab, { className: cx("pire-tab"), id: item.id, isDisabled: item.isDisabled, children: [
-          item.icon ? /* @__PURE__ */ jsx32(Icon, { name: item.icon, size: 16 }) : null,
+        /* @__PURE__ */ jsx33(TabList, { className: "pire-tablist", items, "aria-label": rest["aria-label"] ?? "Views", children: (item) => /* @__PURE__ */ jsxs26(AriaTab, { className: cx("pire-tab"), id: item.id, isDisabled: item.isDisabled, children: [
+          item.icon ? /* @__PURE__ */ jsx33(Icon, { name: item.icon, size: 16 }) : null,
           item.label,
-          item.count != null ? /* @__PURE__ */ jsx32("span", { className: "pire-tab-count", children: item.count }) : null
+          item.count != null ? /* @__PURE__ */ jsx33("span", { className: "pire-tab-count", children: item.count }) : null
         ] }) }),
-        items.map((item) => /* @__PURE__ */ jsx32(TabPanel, { id: item.id, className: panels ? "pire-tabpanel" : void 0, children: panels?.[item.id] }, item.id))
+        items.map((item) => /* @__PURE__ */ jsx33(TabPanel, { id: item.id, className: panels ? "pire-tabpanel" : void 0, children: panels?.[item.id] }, item.id))
       ]
     }
   );
@@ -1654,9 +1789,9 @@ function Tabs({ items, value, defaultValue, onChange, panels, className, style,
 
 // src/components/navigation/Breadcrumb.tsx
 import { Breadcrumbs as AriaBreadcrumbs, Breadcrumb as AriaBreadcrumb, Link as Link2 } from "react-aria-components";
-import { jsx as jsx33, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx34, jsxs as jsxs27 } from "react/jsx-runtime";
 function Breadcrumb({ items, onNavigate, className, style }) {
-  return /* @__PURE__ */ jsx33(
+  return /* @__PURE__ */ jsx34(
     AriaBreadcrumbs,
     {
       className: cx("pire-breadcrumbs", className),
@@ -1665,9 +1800,9 @@ function Breadcrumb({ items, onNavigate, className, style }) {
       onAction: (key) => onNavigate?.(String(key)),
       children: (item) => {
         const last = items[items.length - 1] === item;
-        return /* @__PURE__ */ jsxs26(AriaBreadcrumb, { className: "pire-breadcrumb", id: item.id ?? item.label, children: [
-          last ? item.label : /* @__PURE__ */ jsx33(Link2, { href: item.href, children: item.label }),
-          last ? null : /* @__PURE__ */ jsx33(Icon, { name: "chevron-right", size: 12, style: { color: "var(--text-tertiary)" } })
+        return /* @__PURE__ */ jsxs27(AriaBreadcrumb, { className: "pire-breadcrumb", id: item.id ?? item.label, children: [
+          last ? item.label : /* @__PURE__ */ jsx34(Link2, { href: item.href, children: item.label }),
+          last ? null : /* @__PURE__ */ jsx34(Icon, { name: "chevron-right", size: 12, style: { color: "var(--text-tertiary)" } })
         ] });
       }
     }
@@ -1675,7 +1810,7 @@ function Breadcrumb({ items, onNavigate, className, style }) {
 }
 
 // src/components/navigation/Pagination.tsx
-import { jsx as jsx34, jsxs as jsxs27 } from "react/jsx-runtime";
+import { jsx as jsx35, jsxs as jsxs28 } from "react/jsx-runtime";
 function Pagination({
   page = 1,
   pageSize = 25,
@@ -1690,9 +1825,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__ */ jsxs27("nav", { className: cx("pire-pagination", className), style, "aria-label": msg.paginationLabel, children: [
-    /* @__PURE__ */ jsx34("span", { className: "pire-pagination-count", children: msg.paginationRange.replace("{from}", from.toLocaleString()).replace("{to}", to.toLocaleString()).replace("{total}", total.toLocaleString()) }),
-    /* @__PURE__ */ jsx34(
+  return /* @__PURE__ */ jsxs28("nav", { className: cx("pire-pagination", className), style, "aria-label": msg.paginationLabel, children: [
+    /* @__PURE__ */ jsx35("span", { className: "pire-pagination-count", children: msg.paginationRange.replace("{from}", from.toLocaleString()).replace("{to}", to.toLocaleString()).replace("{total}", total.toLocaleString()) }),
+    /* @__PURE__ */ jsx35(
       IconButton,
       {
         icon: "chevron-left",
@@ -1703,8 +1838,8 @@ function Pagination({
         onPress: () => onPageChange?.(page - 1)
       }
     ),
-    /* @__PURE__ */ jsx34("span", { className: "pire-pagination-count", "aria-live": "polite", children: msg.paginationPageOf.replace("{page}", String(page)).replace("{pages}", String(pages)) }),
-    /* @__PURE__ */ jsx34(
+    /* @__PURE__ */ jsx35("span", { className: "pire-pagination-count", "aria-live": "polite", children: msg.paginationPageOf.replace("{page}", String(page)).replace("{pages}", String(pages)) }),
+    /* @__PURE__ */ jsx35(
       IconButton,
       {
         icon: "chevron-right",
@@ -1715,7 +1850,7 @@ function Pagination({
         onPress: () => onPageChange?.(page + 1)
       }
     ),
-    onPageSizeChange ? /* @__PURE__ */ jsx34(
+    onPageSizeChange ? /* @__PURE__ */ jsx35(
       Select,
       {
         "aria-label": msg.paginationRowsPerPage,
@@ -1738,11 +1873,11 @@ import {
   Separator as AriaSeparator2,
   Header
 } from "react-aria-components";
-import { jsx as jsx35, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx36, jsxs as jsxs29 } from "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__ */ jsx35(
+  return /* @__PURE__ */ jsx36(
     AriaMenu,
     {
       className: cx("pire-menu", className),
@@ -1760,35 +1895,35 @@ function MenuItem({
   className,
   ...rest
 }) {
-  return /* @__PURE__ */ jsxs28(
+  return /* @__PURE__ */ jsxs29(
     AriaMenuItem,
     {
       className: cx("pire-menu-item", className),
       "data-tone": tone === "danger" ? "danger" : void 0,
       ...rest,
       children: [
-        icon ? /* @__PURE__ */ jsx35(Icon, { name: icon, size: 16, className: "pire-menu-item-icon" }) : null,
-        /* @__PURE__ */ jsxs28("span", { className: "pire-menu-item-body", children: [
-          /* @__PURE__ */ jsx35("span", { className: "pire-menu-item-label", children }),
-          description ? /* @__PURE__ */ jsx35("span", { className: "pire-menu-item-desc", children: description }) : null
+        icon ? /* @__PURE__ */ jsx36(Icon, { name: icon, size: 16, className: "pire-menu-item-icon" }) : null,
+        /* @__PURE__ */ jsxs29("span", { className: "pire-menu-item-body", children: [
+          /* @__PURE__ */ jsx36("span", { className: "pire-menu-item-label", children }),
+          description ? /* @__PURE__ */ jsx36("span", { className: "pire-menu-item-desc", children: description }) : null
         ] }),
-        shortcut ? /* @__PURE__ */ jsx35("kbd", { className: "pire-menu-item-shortcut", children: shortcut }) : null
+        shortcut ? /* @__PURE__ */ jsx36("kbd", { className: "pire-menu-item-shortcut", children: shortcut }) : null
       ]
     }
   );
 }
 function MenuSection({ title, children, className, ...rest }) {
-  return /* @__PURE__ */ jsxs28(AriaMenuSection, { className: cx("pire-menu-section", className), ...rest, children: [
-    title ? /* @__PURE__ */ jsx35(Header, { className: "pire-menu-section-title", children: title }) : null,
+  return /* @__PURE__ */ jsxs29(AriaMenuSection, { className: cx("pire-menu-section", className), ...rest, children: [
+    title ? /* @__PURE__ */ jsx36(Header, { className: "pire-menu-section-title", children: title }) : null,
     children
   ] });
 }
 function MenuSeparator({ className }) {
-  return /* @__PURE__ */ jsx35(AriaSeparator2, { className: cx("pire-menu-separator", className) });
+  return /* @__PURE__ */ jsx36(AriaSeparator2, { className: cx("pire-menu-separator", className) });
 }
 
 // src/components/feedback/InlineMessage.tsx
-import { jsx as jsx36, jsxs as jsxs29 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs30 } from "react/jsx-runtime";
 var KIND_ICON = {
   info: "info",
   success: "check-circle-2",
@@ -1798,7 +1933,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__ */ jsxs29(
+  return /* @__PURE__ */ jsxs30(
     "div",
     {
       className: cx("pire-msg", className),
@@ -1807,13 +1942,13 @@ function InlineMessage({ kind = "info", title, action, onClose, children, classN
       "aria-live": assertive ? "assertive" : "polite",
       ...rest,
       children: [
-        /* @__PURE__ */ jsx36(Icon, { name: KIND_ICON[kind], size: 16, style: { marginTop: 2 } }),
-        /* @__PURE__ */ jsxs29("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: "var(--sp-1)" }, children: [
-          title ? /* @__PURE__ */ jsx36("span", { className: "pire-msg-title", children: title }) : null,
-          children ? /* @__PURE__ */ jsx36("span", { className: "pire-msg-body", children }) : null,
+        /* @__PURE__ */ jsx37(Icon, { name: KIND_ICON[kind], size: 16, style: { marginTop: 2 } }),
+        /* @__PURE__ */ jsxs30("div", { style: { flex: 1, display: "flex", flexDirection: "column", gap: "var(--sp-1)" }, children: [
+          title ? /* @__PURE__ */ jsx37("span", { className: "pire-msg-title", children: title }) : null,
+          children ? /* @__PURE__ */ jsx37("span", { className: "pire-msg-body", children }) : null,
           action
         ] }),
-        onClose ? /* @__PURE__ */ jsx36(IconButton, { icon: "x", label: msg.inlineMessageDismiss, size: "sm", onPress: onClose }) : null
+        onClose ? /* @__PURE__ */ jsx37(IconButton, { icon: "x", label: msg.inlineMessageDismiss, size: "sm", onPress: onClose }) : null
       ]
     }
   );
@@ -1821,7 +1956,7 @@ function InlineMessage({ kind = "info", title, action, onClose, children, classN
 
 // src/components/feedback/ProgressBar.tsx
 import { ProgressBar as AriaProgressBar, Label as Label9 } from "react-aria-components";
-import { Fragment as Fragment2, jsx as jsx37, jsxs as jsxs30 } from "react/jsx-runtime";
+import { Fragment as Fragment2, jsx as jsx38, jsxs as jsxs31 } from "react/jsx-runtime";
 function ProgressBar({
   value = 0,
   minValue = 0,
@@ -1834,7 +1969,7 @@ function ProgressBar({
   className,
   style
 }) {
-  return /* @__PURE__ */ jsx37(
+  return /* @__PURE__ */ jsx38(
     AriaProgressBar,
     {
       className: cx("pire-progress", className),
@@ -1845,12 +1980,12 @@ function ProgressBar({
       maxValue,
       isIndeterminate,
       style,
-      children: ({ percentage, valueText }) => /* @__PURE__ */ jsxs30(Fragment2, { children: [
-        label || showValue ? /* @__PURE__ */ jsxs30("div", { className: "pire-progress-head", children: [
-          label ? /* @__PURE__ */ jsx37(Label9, { children: label }) : /* @__PURE__ */ jsx37("span", {}),
-          showValue && !isIndeterminate ? /* @__PURE__ */ jsx37("span", { className: "pire-numeric", children: valueText }) : null
+      children: ({ percentage, valueText }) => /* @__PURE__ */ jsxs31(Fragment2, { children: [
+        label || showValue ? /* @__PURE__ */ jsxs31("div", { className: "pire-progress-head", children: [
+          label ? /* @__PURE__ */ jsx38(Label9, { children: label }) : /* @__PURE__ */ jsx38("span", {}),
+          showValue && !isIndeterminate ? /* @__PURE__ */ jsx38("span", { className: "pire-numeric", children: valueText }) : null
         ] }) : null,
-        /* @__PURE__ */ jsx37("div", { className: "pire-progress-track", children: /* @__PURE__ */ jsx37("div", { className: "pire-progress-fill", style: { width: `${isIndeterminate ? 40 : percentage}%` } }) })
+        /* @__PURE__ */ jsx38("div", { className: "pire-progress-track", children: /* @__PURE__ */ jsx38("div", { className: "pire-progress-fill", style: { width: `${isIndeterminate ? 40 : percentage}%` } }) })
       ] })
     }
   );
@@ -1858,7 +1993,7 @@ function ProgressBar({
 
 // src/components/feedback/Toast.tsx
 import * as React11 from "react";
-import { jsx as jsx38, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs32 } from "react/jsx-runtime";
 var KIND_ICON2 = {
   info: "info",
   success: "check-circle-2",
@@ -1867,7 +2002,7 @@ var KIND_ICON2 = {
 };
 function Toast({ kind = "success", onClose, position = "bottom-center", children, className, ...rest }) {
   const msg = usePireMessages();
-  return /* @__PURE__ */ jsxs31(
+  return /* @__PURE__ */ jsxs32(
     "div",
     {
       className: cx("pire-toast", className),
@@ -1876,9 +2011,9 @@ function Toast({ kind = "success", onClose, position = "bottom-center", children
       "aria-live": kind === "error" ? "assertive" : "polite",
       ...rest,
       children: [
-        /* @__PURE__ */ jsx38(Icon, { name: KIND_ICON2[kind], size: 16 }),
-        /* @__PURE__ */ jsx38("span", { style: { flex: 1 }, children }),
-        onClose ? /* @__PURE__ */ jsx38(IconButton, { icon: "x", label: msg.toastDismiss, size: "sm", variant: "inverse", onPress: onClose }) : null
+        /* @__PURE__ */ jsx39(Icon, { name: KIND_ICON2[kind], size: 16 }),
+        /* @__PURE__ */ jsx39("span", { style: { flex: 1 }, children }),
+        onClose ? /* @__PURE__ */ jsx39(IconButton, { icon: "x", label: msg.toastDismiss, size: "sm", variant: "inverse", onPress: onClose }) : null
       ]
     }
   );
@@ -1896,9 +2031,9 @@ function ToastProvider({ children, timeout = 6e3 }) {
     return id;
   }, [close, timeout]);
   const value = React11.useMemo(() => ({ add, close }), [add, close]);
-  return /* @__PURE__ */ jsxs31(ToastContext.Provider, { value, children: [
+  return /* @__PURE__ */ jsxs32(ToastContext.Provider, { value, children: [
     children,
-    /* @__PURE__ */ jsx38("div", { className: "pire-toast-region", role: "region", "aria-label": msg.toastRegionLabel, children: toasts.map((t) => /* @__PURE__ */ jsx38(Toast, { kind: t.kind, onClose: () => close(t.id), style: { position: "static", transform: "none" }, children: t.message }, t.id)) })
+    /* @__PURE__ */ jsx39("div", { className: "pire-toast-region", role: "region", "aria-label": msg.toastRegionLabel, children: toasts.map((t) => /* @__PURE__ */ jsx39(Toast, { kind: t.kind, onClose: () => close(t.id), style: { position: "static", transform: "none" }, children: t.message }, t.id)) })
   ] });
 }
 function useToast() {
@@ -1907,54 +2042,9 @@ function useToast() {
   return ctx;
 }
 
-// src/components/feedback/Skeleton.tsx
-import { jsx as jsx39 } from "react/jsx-runtime";
-function Skeleton({ shape = "text", width, height, className, style, ...rest }) {
-  return /* @__PURE__ */ jsx39(
-    "div",
-    {
-      className: cx("pire-skeleton", className),
-      "data-shape": shape,
-      "aria-hidden": "true",
-      style: { width, height, ...style },
-      ...rest
-    }
-  );
-}
-var BAR_WIDTHS = ["72%", "54%", "86%", "63%"];
-function SkeletonTableRow({ columns, density = "regular", className, style, ...rest }) {
-  const cells = typeof columns === "number" ? Array.from({ length: columns }, () => ({})) : columns;
-  return /* @__PURE__ */ jsx39(
-    "div",
-    {
-      className: cx("pire-skeleton-row", className),
-      "data-density": density,
-      "aria-hidden": "true",
-      style,
-      ...rest,
-      children: cells.map((c, i) => {
-        const align = c.numeric ? "right" : c.align ?? "left";
-        return (
-          // biome-ignore lint/suspicious/noArrayIndexKey: columns are positional and never reordered.
-          /* @__PURE__ */ jsx39(
-            "div",
-            {
-              className: "pire-skeleton-cell",
-              "data-align": align,
-              style: { width: c.width, flex: c.width ? "0 0 auto" : void 0 },
-              children: /* @__PURE__ */ jsx39(Skeleton, { width: BAR_WIDTHS[i % BAR_WIDTHS.length] })
-            },
-            i
-          )
-        );
-      })
-    }
-  );
-}
-
 // src/components/data/KpiTile.tsx
 import { Button as AriaButton10 } from "react-aria-components";
-import { Fragment as Fragment3, jsx as jsx40, jsxs as jsxs32 } from "react/jsx-runtime";
+import { Fragment as Fragment3, jsx as jsx40, jsxs as jsxs33 } from "react/jsx-runtime";
 function KpiTile({
   label,
   value,
@@ -1970,16 +2060,16 @@ function KpiTile({
   style
 }) {
   const tone = deltaTone ?? (deltaDirection === "down" ? "negative" : "positive");
-  const body = /* @__PURE__ */ jsxs32(Fragment3, { children: [
-    /* @__PURE__ */ jsxs32("span", { className: "pire-kpi-label", children: [
+  const body = /* @__PURE__ */ jsxs33(Fragment3, { children: [
+    /* @__PURE__ */ jsxs33("span", { className: "pire-kpi-label", children: [
       icon ? /* @__PURE__ */ jsx40(Icon, { name: icon, size: 16 }) : null,
       label
     ] }),
-    /* @__PURE__ */ jsxs32("span", { className: "pire-kpi-value", children: [
+    /* @__PURE__ */ jsxs33("span", { className: "pire-kpi-value", children: [
       value,
       unit ? /* @__PURE__ */ jsx40("span", { className: "pire-kpi-unit", children: unit }) : null
     ] }),
-    delta ? /* @__PURE__ */ jsxs32("span", { className: "pire-kpi-delta", "data-tone": tone, children: [
+    delta ? /* @__PURE__ */ jsxs33("span", { className: "pire-kpi-delta", "data-tone": tone, children: [
       deltaDirection ? /* @__PURE__ */ jsx40(Icon, { name: deltaDirection === "up" ? "trending-up" : "trending-down", size: 12 }) : null,
       delta
     ] }) : null,
@@ -1990,14 +2080,14 @@ function KpiTile({
 }
 
 // src/components/data/ObjectHeader.tsx
-import { jsx as jsx41, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs34 } from "react/jsx-runtime";
 function ObjectHeader({ title, subtitle, id, breadcrumb, badge, facts, actions, className, ...rest }) {
-  return /* @__PURE__ */ jsxs33("header", { className: cx("pire-objheader", className), ...rest, children: [
+  return /* @__PURE__ */ jsxs34("header", { className: cx("pire-objheader", className), ...rest, children: [
     breadcrumb,
-    /* @__PURE__ */ jsxs33("div", { className: "pire-objheader-row", children: [
-      /* @__PURE__ */ jsxs33("div", { style: { minWidth: 0 }, children: [
+    /* @__PURE__ */ jsxs34("div", { className: "pire-objheader-row", children: [
+      /* @__PURE__ */ jsxs34("div", { style: { minWidth: 0 }, children: [
         /* @__PURE__ */ jsx41("h1", { className: "pire-objheader-title", children: title }),
-        subtitle || id ? /* @__PURE__ */ jsxs33("div", { className: "pire-objheader-sub", children: [
+        subtitle || id ? /* @__PURE__ */ jsxs34("div", { className: "pire-objheader-sub", children: [
           subtitle,
           id ? /* @__PURE__ */ jsx41("span", { className: "pire-objheader-id", children: id }) : null
         ] }) : null
@@ -2005,7 +2095,7 @@ function ObjectHeader({ title, subtitle, id, breadcrumb, badge, facts, actions,
       badge,
       actions ? /* @__PURE__ */ jsx41("div", { className: "pire-objheader-actions", children: actions }) : null
     ] }),
-    facts?.length ? /* @__PURE__ */ jsx41("dl", { className: "pire-facts", style: { margin: 0 }, children: facts.map((fact) => /* @__PURE__ */ jsxs33("div", { children: [
+    facts?.length ? /* @__PURE__ */ jsx41("dl", { className: "pire-facts", style: { margin: 0 }, children: facts.map((fact) => /* @__PURE__ */ jsxs34("div", { children: [
       /* @__PURE__ */ jsx41("dt", { className: "pire-fact-label", children: fact.label }),
       /* @__PURE__ */ jsx41("dd", { className: "pire-fact-value", "data-numeric": fact.numeric ? "true" : void 0, style: { margin: 0 }, children: fact.value })
     ] }, fact.label)) }) : null
@@ -2013,7 +2103,7 @@ function ObjectHeader({ title, subtitle, id, breadcrumb, badge, facts, actions,
 }
 
 // src/components/data/FilterBar.tsx
-import { jsx as jsx42, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx42, jsxs as jsxs35 } from "react/jsx-runtime";
 function FilterBar({
   children,
   activeFilters = [],
@@ -2030,12 +2120,12 @@ function FilterBar({
   const label = useMessage("filterBarLabel", rest["aria-label"]);
   const go = useMessage("filterBarGo", goLabel);
   const clearAll = useMessage("filterBarClearAll", clearAllLabel);
-  return /* @__PURE__ */ jsxs34("section", { className: cx("pire-filterbar", className), ...rest, "aria-label": label, children: [
-    /* @__PURE__ */ jsxs34("div", { className: "pire-filterbar-controls", children: [
+  return /* @__PURE__ */ jsxs35("section", { className: cx("pire-filterbar", className), ...rest, "aria-label": label, children: [
+    /* @__PURE__ */ jsxs35("div", { className: "pire-filterbar-controls", children: [
       children,
       onGo ? /* @__PURE__ */ jsx42(Button, { variant: "primary", onPress: onGo, children: go }) : null
     ] }),
-    activeFilters.length || resultLabel || actions ? /* @__PURE__ */ jsxs34("div", { className: "pire-filterbar-foot", children: [
+    activeFilters.length || resultLabel || actions ? /* @__PURE__ */ jsxs35("div", { className: "pire-filterbar-foot", children: [
       activeFilters.map((filter) => /* @__PURE__ */ jsx42(Tag, { onRemove: onRemoveFilter ? () => onRemoveFilter(filter.id) : void 0, children: filter.label }, filter.id)),
       activeFilters.length && onClear ? /* @__PURE__ */ jsx42(Button, { variant: "tertiary", size: "sm", onPress: onClear, children: clearAll }) : null,
       resultLabel ? /* @__PURE__ */ jsx42("span", { className: "pire-filterbar-result", "aria-live": "polite", children: resultLabel }) : null,
@@ -2045,7 +2135,7 @@ function FilterBar({
 }
 
 // src/components/data/DescriptionList.tsx
-import { jsx as jsx43, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs36 } from "react/jsx-runtime";
 function DescriptionList({ items, layout = "rows", columns = 3, className, style, ...rest }) {
   return /* @__PURE__ */ jsx43(
     "dl",
@@ -2054,8 +2144,8 @@ function DescriptionList({ items, layout = "rows", columns = 3, className, style
       "data-layout": layout,
       style: { ...layout === "grid" ? { "--pire-dl-cols": columns } : null, ...style },
       ...rest,
-      children: items.map((item, i) => /* @__PURE__ */ jsxs35("div", { className: "pire-dl-row", "data-emphasis": item.emphasis ? "true" : void 0, children: [
-        /* @__PURE__ */ jsxs35("dt", { className: "pire-dl-term", children: [
+      children: items.map((item, i) => /* @__PURE__ */ jsxs36("div", { className: "pire-dl-row", "data-emphasis": item.emphasis ? "true" : void 0, children: [
+        /* @__PURE__ */ jsxs36("dt", { className: "pire-dl-term", children: [
           item.label,
           item.hint
         ] }),
@@ -2066,10 +2156,10 @@ function DescriptionList({ items, layout = "rows", columns = 3, className, style
 }
 
 // src/components/data/Timeline.tsx
-import { jsx as jsx44, jsxs as jsxs36 } from "react/jsx-runtime";
+import { jsx as jsx44, jsxs as jsxs37 } from "react/jsx-runtime";
 function Timeline({ entries, reverse = false, className, ...rest }) {
   const list = reverse ? [...entries].reverse() : entries;
-  return /* @__PURE__ */ jsx44("ol", { className: cx("pire-timeline", className), ...rest, children: list.map((entry, i) => /* @__PURE__ */ jsxs36("li", { className: "pire-timeline-item", children: [
+  return /* @__PURE__ */ jsx44("ol", { className: cx("pire-timeline", className), ...rest, children: list.map((entry, i) => /* @__PURE__ */ jsxs37("li", { className: "pire-timeline-item", children: [
     /* @__PURE__ */ jsx44("span", { className: "pire-timeline-time", children: entry.time }),
     /* @__PURE__ */ jsx44("span", { className: "pire-timeline-text", children: entry.event }),
     entry.actor ? /* @__PURE__ */ jsx44("span", { className: "pire-timeline-actor", children: entry.actor }) : null
@@ -2078,9 +2168,9 @@ function Timeline({ entries, reverse = false, className, ...rest }) {
 
 // src/components/data/LinkList.tsx
 import { Button as AriaButton11 } from "react-aria-components";
-import { jsx as jsx45, jsxs as jsxs37 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs38 } from "react/jsx-runtime";
 function LinkList({ items, onSelect, className, ...rest }) {
-  return /* @__PURE__ */ jsx45("div", { className: cx("pire-linklist", className), role: "list", ...rest, children: items.map((item) => /* @__PURE__ */ jsxs37(AriaButton11, { className: "pire-linklist-item", onPress: () => onSelect?.(item.id), children: [
+  return /* @__PURE__ */ jsx45("div", { className: cx("pire-linklist", className), role: "list", ...rest, children: items.map((item) => /* @__PURE__ */ jsxs38(AriaButton11, { className: "pire-linklist-item", onPress: () => onSelect?.(item.id), children: [
     item.icon ? /* @__PURE__ */ jsx45(Icon, { name: item.icon, size: 16, style: { color: "var(--text-secondary)" } }) : null,
     item.key ? /* @__PURE__ */ jsx45("span", { className: "pire-linklist-key", children: item.key }) : null,
     item.text ? /* @__PURE__ */ jsx45("span", { className: "pire-linklist-text", children: item.text }) : null,
@@ -2088,57 +2178,78 @@ function LinkList({ items, onSelect, className, ...rest }) {
   ] }, item.id)) });
 }
 
+// src/components/layout/PageBand.tsx
+import { jsx as jsx46 } from "react/jsx-runtime";
+function PageBand({
+  surface = "card",
+  hasBorder = true,
+  children,
+  className,
+  ...rest
+}) {
+  return /* @__PURE__ */ jsx46(
+    "div",
+    {
+      className: cx("pire-pageband", className),
+      "data-surface": surface,
+      "data-border": hasBorder ? "true" : void 0,
+      ...rest,
+      children
+    }
+  );
+}
+
 // src/components/layout/PageHeader.tsx
-import { jsx as jsx46, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx47, jsxs as jsxs39 } from "react/jsx-runtime";
 function PageHeader({ title, subtitle, actions, className, ...rest }) {
-  return /* @__PURE__ */ jsxs38("header", { className: cx("pire-pageheader", className), ...rest, children: [
-    /* @__PURE__ */ jsxs38("div", { style: { minWidth: 0 }, children: [
-      /* @__PURE__ */ jsx46("h1", { className: "pire-pageheader-title", children: title }),
-      subtitle ? /* @__PURE__ */ jsx46("p", { className: "pire-pageheader-sub", children: subtitle }) : null
+  return /* @__PURE__ */ jsxs39("header", { className: cx("pire-pageheader", className), ...rest, children: [
+    /* @__PURE__ */ jsxs39("div", { style: { minWidth: 0 }, children: [
+      /* @__PURE__ */ jsx47("h1", { className: "pire-pageheader-title", children: title }),
+      subtitle ? /* @__PURE__ */ jsx47("p", { className: "pire-pageheader-sub", children: subtitle }) : null
     ] }),
-    actions ? /* @__PURE__ */ jsx46("div", { className: "pire-pageheader-actions", children: actions }) : null
+    actions ? /* @__PURE__ */ jsx47("div", { className: "pire-pageheader-actions", children: actions }) : null
   ] });
 }
 
 // src/components/layout/SectionHeader.tsx
-import { jsx as jsx47, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs40 } from "react/jsx-runtime";
 function SectionHeader({ title, meta, actions, className, ...rest }) {
-  return /* @__PURE__ */ jsxs39("div", { className: cx("pire-sectionhead", className), ...rest, children: [
-    /* @__PURE__ */ jsx47("span", { className: "pire-eyebrow", children: title }),
-    meta ? /* @__PURE__ */ jsx47("span", { style: { font: "var(--type-caption)", color: "var(--text-tertiary)" }, children: meta }) : null,
-    actions ? /* @__PURE__ */ jsx47("div", { className: "pire-sectionhead-actions", children: actions }) : null
+  return /* @__PURE__ */ jsxs40("div", { className: cx("pire-sectionhead", className), ...rest, children: [
+    /* @__PURE__ */ jsx48("span", { className: "pire-eyebrow", children: title }),
+    meta ? /* @__PURE__ */ jsx48("span", { style: { font: "var(--type-caption)", color: "var(--text-tertiary)" }, children: meta }) : null,
+    actions ? /* @__PURE__ */ jsx48("div", { className: "pire-sectionhead-actions", children: actions }) : null
   ] });
 }
 
 // src/components/layout/SelectionBar.tsx
-import { jsx as jsx48, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs41 } from "react/jsx-runtime";
 function SelectionBar({ count, noun = "record", children, actions, className, ...rest }) {
   if (!count) return null;
-  return /* @__PURE__ */ jsxs40("div", { className: cx("pire-selectionbar", className), role: "status", "aria-live": "polite", ...rest, children: [
-    /* @__PURE__ */ jsxs40("span", { className: "pire-selectionbar-count", children: [
+  return /* @__PURE__ */ jsxs41("div", { className: cx("pire-selectionbar", className), role: "status", "aria-live": "polite", ...rest, children: [
+    /* @__PURE__ */ jsxs41("span", { className: "pire-selectionbar-count", children: [
       count.toLocaleString(),
       " ",
       noun,
       count === 1 ? "" : "s",
       " selected"
     ] }),
-    children ? /* @__PURE__ */ jsx48("span", { style: { color: "var(--text-secondary)", font: "var(--type-caption)" }, children }) : null,
-    actions ? /* @__PURE__ */ jsx48("div", { className: "pire-selectionbar-actions", children: actions }) : null
+    children ? /* @__PURE__ */ jsx49("span", { style: { color: "var(--text-secondary)", font: "var(--type-caption)" }, children }) : null,
+    actions ? /* @__PURE__ */ jsx49("div", { className: "pire-selectionbar-actions", children: actions }) : null
   ] });
 }
 
 // src/components/layout/FooterBar.tsx
-import { jsx as jsx49, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx50, jsxs as jsxs42 } from "react/jsx-runtime";
 function FooterBar({ note, actions, children, className, ...rest }) {
-  return /* @__PURE__ */ jsxs41("footer", { className: cx("pire-footerbar", className), ...rest, children: [
-    note ? /* @__PURE__ */ jsx49("span", { className: "pire-footerbar-note", children: note }) : null,
+  return /* @__PURE__ */ jsxs42("footer", { className: cx("pire-footerbar", className), ...rest, children: [
+    note ? /* @__PURE__ */ jsx50("span", { className: "pire-footerbar-note", children: note }) : null,
     children,
-    actions ? /* @__PURE__ */ jsx49("div", { className: "pire-footerbar-actions", children: actions }) : null
+    actions ? /* @__PURE__ */ jsx50("div", { className: "pire-footerbar-actions", children: actions }) : null
   ] });
 }
 
 // src/components/patterns/ConfirmDialog.tsx
-import { Fragment as Fragment4, jsx as jsx50, jsxs as jsxs42 } from "react/jsx-runtime";
+import { Fragment as Fragment4, jsx as jsx51, jsxs as jsxs43 } from "react/jsx-runtime";
 function ConfirmDialog({
   isOpen,
   title,
@@ -2152,7 +2263,7 @@ function ConfirmDialog({
   onConfirm,
   onCancel
 }) {
-  return /* @__PURE__ */ jsxs42(
+  return /* @__PURE__ */ jsxs43(
     Dialog,
     {
       isOpen,
@@ -2162,12 +2273,12 @@ function ConfirmDialog({
       onClose: onCancel,
       isDismissable: !isBusy,
       showClose: false,
-      footer: /* @__PURE__ */ jsxs42(Fragment4, { children: [
-        /* @__PURE__ */ jsx50(Button, { variant: "tertiary", isDisabled: isBusy, onPress: onCancel, children: cancelLabel }),
-        /* @__PURE__ */ jsx50(Button, { variant: tone === "danger" ? "danger" : "primary", isDisabled: isBusy, onPress: onConfirm, children: isBusy ? "Working\u2026" : confirmLabel })
+      footer: /* @__PURE__ */ jsxs43(Fragment4, { children: [
+        /* @__PURE__ */ jsx51(Button, { variant: "tertiary", isDisabled: isBusy, onPress: onCancel, children: cancelLabel }),
+        /* @__PURE__ */ jsx51(Button, { variant: tone === "danger" ? "danger" : "primary", isDisabled: isBusy, onPress: onConfirm, children: isBusy ? "Working\u2026" : confirmLabel })
       ] }),
       children: [
-        consequence ? /* @__PURE__ */ jsx50(InlineMessage, { kind: tone === "danger" ? "error" : "warning", style: { marginBottom: children ? "var(--sp-3)" : 0 }, children: consequence }) : null,
+        consequence ? /* @__PURE__ */ jsx51(InlineMessage, { kind: tone === "danger" ? "error" : "warning", style: { marginBottom: children ? "var(--sp-3)" : 0 }, children: consequence }) : null,
         children
       ]
     }
@@ -2176,10 +2287,10 @@ function ConfirmDialog({
 
 // src/components/patterns/SidePanel.tsx
 import { ModalOverlay as ModalOverlay2, Modal as Modal2, Dialog as AriaDialog3, Heading as Heading4 } from "react-aria-components";
-import { jsx as jsx51, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs44 } from "react/jsx-runtime";
 function SidePanel({ isOpen, title, subtitle, width = 400, children, footer, onClose, className }) {
   const msg = usePireMessages();
-  return /* @__PURE__ */ jsx51(
+  return /* @__PURE__ */ jsx52(
     ModalOverlay2,
     {
       className: "pire-sidepanel-overlay",
@@ -2188,28 +2299,28 @@ function SidePanel({ isOpen, title, subtitle, width = 400, children, footer, onC
       onOpenChange: (o) => {
         if (!o) onClose?.();
       },
-      children: /* @__PURE__ */ jsx51(Modal2, { className: cx("pire-sidepanel", className), style: { width }, children: /* @__PURE__ */ jsxs43(AriaDialog3, { className: "pire-dialog", style: { height: "100%" }, children: [
-        /* @__PURE__ */ jsxs43("header", { className: "pire-dialog-head", children: [
-          /* @__PURE__ */ jsxs43("div", { style: { flex: 1, minWidth: 0 }, children: [
-            /* @__PURE__ */ jsx51(Heading4, { slot: "title", className: "pire-dialog-title", children: title }),
-            subtitle ? /* @__PURE__ */ jsx51("p", { className: "pire-dialog-sub", style: { margin: 0 }, children: subtitle }) : null
+      children: /* @__PURE__ */ jsx52(Modal2, { className: cx("pire-sidepanel", className), style: { width }, children: /* @__PURE__ */ jsxs44(AriaDialog3, { className: "pire-dialog", style: { height: "100%" }, children: [
+        /* @__PURE__ */ jsxs44("header", { className: "pire-dialog-head", children: [
+          /* @__PURE__ */ jsxs44("div", { style: { flex: 1, minWidth: 0 }, children: [
+            /* @__PURE__ */ jsx52(Heading4, { slot: "title", className: "pire-dialog-title", children: title }),
+            subtitle ? /* @__PURE__ */ jsx52("p", { className: "pire-dialog-sub", style: { margin: 0 }, children: subtitle }) : null
           ] }),
-          /* @__PURE__ */ jsx51(IconButton, { icon: "x", label: msg.sidePanelClose, size: "sm", onPress: onClose })
+          /* @__PURE__ */ jsx52(IconButton, { icon: "x", label: msg.sidePanelClose, size: "sm", onPress: onClose })
         ] }),
-        /* @__PURE__ */ jsx51("div", { className: "pire-dialog-body", style: { flex: 1 }, children }),
-        footer ? /* @__PURE__ */ jsx51("footer", { className: "pire-dialog-foot", children: footer }) : null
+        /* @__PURE__ */ jsx52("div", { className: "pire-dialog-body", style: { flex: 1 }, children }),
+        footer ? /* @__PURE__ */ jsx52("footer", { className: "pire-dialog-foot", children: footer }) : null
       ] }) })
     }
   );
 }
 
 // src/components/patterns/EmptyState.tsx
-import { jsx as jsx52, jsxs as jsxs44 } from "react/jsx-runtime";
+import { jsx as jsx53, jsxs as jsxs45 } from "react/jsx-runtime";
 function EmptyState({ icon = "file-text", title, action, compact, children, className, ...rest }) {
-  return /* @__PURE__ */ jsxs44("div", { className: cx("pire-empty", className), "data-compact": compact ? "true" : void 0, ...rest, children: [
-    /* @__PURE__ */ jsx52(Icon, { name: icon, size: 24, className: "pire-empty-icon" }),
-    title ? /* @__PURE__ */ jsx52("p", { className: "pire-empty-title", style: { margin: 0 }, children: title }) : null,
-    children ? /* @__PURE__ */ jsx52("p", { className: "pire-empty-body", style: { margin: 0 }, children }) : null,
+  return /* @__PURE__ */ jsxs45("div", { className: cx("pire-empty", className), "data-compact": compact ? "true" : void 0, ...rest, children: [
+    /* @__PURE__ */ jsx53(Icon, { name: icon, size: 24, className: "pire-empty-icon" }),
+    title ? /* @__PURE__ */ jsx53("p", { className: "pire-empty-title", style: { margin: 0 }, children: title }) : null,
+    children ? /* @__PURE__ */ jsx53("p", { className: "pire-empty-body", style: { margin: 0 }, children }) : null,
     action
   ] });
 }
@@ -2251,6 +2362,7 @@ export {
   MultiComboBox,
   NumberField,
   ObjectHeader,
+  PageBand,
   PageHeader,
   Pagination,
   PireIntlProvider,