@orianatech/pire 0.17.0 → 0.19.0

package/dist/components/layout/SplitPane.d.cts

@@ -0,0 +1,34 @@
+import type * as React from 'react';
+export interface SplitPaneProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** The narrow column: a list of records, kept in view while one of them is read. */
+    list: React.ReactNode;
+    /** The wide column. Leave it out when nothing is selected — `emptyDetail` fills the space. */
+    detail?: React.ReactNode;
+    /** Width of the list column. A number is pixels. */
+    listWidth?: number | string;
+    /** Names the list region for assistive tech. Both panes are landmarks, so both want a name. */
+    listLabel?: string;
+    detailLabel?: string;
+    /** Shown in place of the detail column when there is no `detail`. */
+    emptyDetail?: React.ReactNode;
+    /**
+     * Returns to the list on a narrow container, where only one column fits at a time.
+     *
+     * Without it a narrow layout can reach the detail and never leave it, so pass it whenever the
+     * pane can be seen on a small screen.
+     */
+    onBack?: () => void;
+    backLabel?: string;
+}
+/**
+ * Two columns that live side by side and scroll independently — a list on the left, the selected
+ * record on the right.
+ *
+ * Distinct from `SidePanel`, which is an overlay: this one is a layout, the panes coexist, and
+ * nothing is dismissed to get back to the list.
+ *
+ * It fills the box it is given and owns the scrolling inside it, so give it a parent with a
+ * definite height and no padding of its own. A wrapper that scrolls as well produces two nested
+ * scrollbars, which is the usual way this pattern goes wrong.
+ */
+export declare function SplitPane({ list, detail, listWidth, listLabel, detailLabel, emptyDetail, onBack, backLabel, className, style, ...rest }: SplitPaneProps): React.JSX.Element;

package/dist/components/layout/SplitPane.d.ts

@@ -0,0 +1,35 @@
+import type * as React from 'react';
+export interface SplitPaneProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'title'> {
+    /** The narrow column: a list of records, kept in view while one of them is read. */
+    list: React.ReactNode;
+    /** The wide column. Leave it out when nothing is selected — `emptyDetail` fills the space. */
+    detail?: React.ReactNode;
+    /** Width of the list column. A number is pixels. */
+    listWidth?: number | string;
+    /** Names the list region for assistive tech. Both panes are landmarks, so both want a name. */
+    listLabel?: string;
+    detailLabel?: string;
+    /** Shown in place of the detail column when there is no `detail`. */
+    emptyDetail?: React.ReactNode;
+    /**
+     * Returns to the list on a narrow container, where only one column fits at a time.
+     *
+     * Without it a narrow layout can reach the detail and never leave it, so pass it whenever the
+     * pane can be seen on a small screen.
+     */
+    onBack?: () => void;
+    backLabel?: string;
+}
+/**
+ * Two columns that live side by side and scroll independently — a list on the left, the selected
+ * record on the right.
+ *
+ * Distinct from `SidePanel`, which is an overlay: this one is a layout, the panes coexist, and
+ * nothing is dismissed to get back to the list.
+ *
+ * It fills the box it is given and owns the scrolling inside it, so give it a parent with a
+ * definite height and no padding of its own. A wrapper that scrolls as well produces two nested
+ * scrollbars, which is the usual way this pattern goes wrong.
+ */
+export declare function SplitPane({ list, detail, listWidth, listLabel, detailLabel, emptyDetail, onBack, backLabel, className, style, ...rest }: SplitPaneProps): React.JSX.Element;
+//# sourceMappingURL=SplitPane.d.ts.map

package/dist/components/layout/SplitPane.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitPane.d.ts","sourceRoot":"","sources":["../../../src/components/layout/SplitPane.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,KAAK,KAAK,MAAM,OAAO,CAAC;AAKpC,MAAM,WAAW,cAAe,SAAQ,IAAI,CAAC,KAAK,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,OAAO,CAAC;IACzF,oFAAoF;IACpF,IAAI,EAAE,KAAK,CAAC,SAAS,CAAC;IACtB,8FAA8F;IAC9F,MAAM,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IACzB,oDAAoD;IACpD,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,CAAC;IAC5B,+FAA+F;IAC/F,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qEAAqE;IACrE,WAAW,CAAC,EAAE,KAAK,CAAC,SAAS,CAAC;IAC9B;;;;;OAKG;IACH,MAAM,CAAC,EAAE,MAAM,IAAI,CAAC;IACpB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAED;;;;;;;;;;GAUG;AACH,wBAAgB,SAAS,CAAC,EAAE,IAAI,EAAE,MAAM,EAAE,SAAmB,EAAE,SAAS,EAAE,WAAW,EACnF,WAAW,EAAE,MAAM,EAAE,SAAS,EAAE,SAAS,EAAE,KAAK,EAAE,GAAG,IAAI,EAAE,EAAE,cAAc,qBAsB5E"}

package/dist/components.css

@@ -742,6 +742,33 @@
    command the user cannot run. */
 .pire-menu-item[data-disabled] .pire-kbd{color:var(--text-disabled);border-color:var(--border-subtle)}
 
+/* ---- SplitPane ---------------------------------------------------------- */
+/* A **container** query, not a media query: this is a layout primitive that can sit inside a shell
+   with a nav rail, a dialog or a card, and the viewport width says nothing about how much room it
+   actually has. The container is named so a nested SplitPane cannot answer the outer one's query.
+
+   45rem is the width below which two columns stop being two columns — the list at its default
+   24rem plus a detail pane narrow enough to be useless. */
+.pire-split{container-type:inline-size;container-name:pire-split;display:flex;min-height:0;height:100%;overflow:hidden;background:var(--surface-card)}
+/* Each pane scrolls on its own. `min-height:0` on both is what lets them do that inside a flex
+   parent, which otherwise sizes them to their content and pushes the scroll up to the page. */
+.pire-split-list{flex:0 0 var(--pire-split-list-w,24rem);min-width:0;min-height:0;overflow:auto;border-inline-end:1px solid var(--border-subtle)}
+/* Block, not flex. As a flex column its children shrank to fit instead of overflowing, so tall
+   detail content was squashed into the pane rather than scrolling inside it. */
+.pire-split-detail{flex:1;min-width:0;min-height:0;overflow:auto}
+.pire-split-empty{min-height:100%;display:grid;place-items:center;padding:var(--sp-8);text-align:center;color:var(--text-secondary)}
+/* Present in the markup at every size and revealed by the query below, so returning to the list
+   never depends on JavaScript having measured anything. */
+.pire-split-back{display:none}
+
+@container pire-split (max-width: 45rem){
+  /* One column at a time. Which one depends on whether there is a record to read. */
+  .pire-split-list{flex:1 1 auto;border-inline-end:0}
+  .pire-split[data-has-detail="true"] .pire-split-list{display:none}
+  .pire-split:not([data-has-detail="true"]) .pire-split-detail{display:none}
+  .pire-split-back{display:flex;flex:0 0 auto;padding:var(--sp-2);border-block-end:1px solid var(--border-subtle);background:var(--surface-card);position:sticky;top:0;z-index:1}
+}
+
 /* ---- CommandPalette ----------------------------------------------------- */
 /* Anchored near the top rather than centred: the list grows downwards as it fills, and a centred
    palette would shift its own input under the caret while the user is still typing. */

package/dist/i18n/messages.d.cts

@@ -80,6 +80,12 @@ export interface PireMessages {
     paginationRowsPerPage: string;
     /** Landmark name of the main SideNav. Override it when a screen has more than one nav. */
     sideNavLabel: string;
+    /** Names SplitPane's list column. */
+    splitPaneList: string;
+    /** Names SplitPane's detail column. */
+    splitPaneDetail: string;
+    /** Returns to the list when SplitPane is narrow enough to show one column. */
+    splitPaneBack: string;
     /** Button that opens the OS file picker. */
     fileUploadChoose: string;
     /** Removes one picked file. `{name}` is replaced with the file name. */

package/dist/i18n/messages.d.ts

@@ -80,6 +80,12 @@ export interface PireMessages {
     paginationRowsPerPage: string;
     /** Landmark name of the main SideNav. Override it when a screen has more than one nav. */
     sideNavLabel: string;
+    /** Names SplitPane's list column. */
+    splitPaneList: string;
+    /** Names SplitPane's detail column. */
+    splitPaneDetail: string;
+    /** Returns to the list when SplitPane is narrow enough to show one column. */
+    splitPaneBack: string;
     /** Button that opens the OS file picker. */
     fileUploadChoose: string;
     /** Removes one picked file. `{name}` is replaced with the file name. */

package/dist/i18n/messages.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"messages.d.ts","sourceRoot":"","sources":["../../src/i18n/messages.ts"],"names":[],"mappings":"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"}
+{"version":3,"file":"messages.d.ts","sourceRoot":"","sources":["../../src/i18n/messages.ts"],"names":[],"mappings":"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"}

package/dist/index.cjs

@@ -97,6 +97,7 @@ __export(src_exports, {
   SidePanel: () => SidePanel,
   Skeleton: () => Skeleton,
   SkeletonTableRow: () => SkeletonTableRow,
+  SplitPane: () => SplitPane,
   Strong: () => Strong,
   SubmenuTrigger: () => import_react_aria_components34.SubmenuTrigger,
   Switch: () => Switch,
@@ -876,6 +877,9 @@ var enMessages = {
   paginationNext: "Next page",
   paginationRowsPerPage: "Rows per page",
   sideNavLabel: "Main navigation",
+  splitPaneList: "List",
+  splitPaneDetail: "Detail",
+  splitPaneBack: "Back to list",
   fileUploadChoose: "Choose files",
   fileUploadRemoveNamed: "Remove {name}",
   fileUploadUploading: "Uploading",
@@ -932,6 +936,9 @@ var esMessages = {
   paginationNext: "P\xE1gina siguiente",
   paginationRowsPerPage: "Filas por p\xE1gina",
   sideNavLabel: "Navegaci\xF3n principal",
+  splitPaneList: "Lista",
+  splitPaneDetail: "Detalle",
+  splitPaneBack: "Volver a la lista",
   fileUploadChoose: "Elegir archivos",
   fileUploadRemoveNamed: "Quitar {name}",
   fileUploadUploading: "Subiendo",
@@ -3409,8 +3416,43 @@ function FooterBar({ note, actions, children, className, ...rest }) {
   ] });
 }
 
-// src/components/patterns/ConfirmDialog.tsx
+// src/components/layout/SplitPane.tsx
 var import_jsx_runtime58 = require("react/jsx-runtime");
+function SplitPane({
+  list,
+  detail,
+  listWidth = "24rem",
+  listLabel,
+  detailLabel,
+  emptyDetail,
+  onBack,
+  backLabel,
+  className,
+  style,
+  ...rest
+}) {
+  const msg = usePireMessages();
+  const width = typeof listWidth === "number" ? `${listWidth}px` : listWidth;
+  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+    "div",
+    {
+      className: cx("pire-split", className),
+      "data-has-detail": detail != null ? "true" : void 0,
+      style: { ["--pire-split-list-w"]: width, ...style },
+      ...rest,
+      children: [
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("section", { className: "pire-split-list", "aria-label": listLabel ?? msg.splitPaneList, children: list }),
+        /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)("section", { className: "pire-split-detail", "aria-label": detailLabel ?? msg.splitPaneDetail, children: [
+          onBack ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "pire-split-back", children: /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Button, { variant: "tertiary", size: "sm", icon: "arrow-left", onPress: onBack, children: backLabel ?? msg.splitPaneBack }) }) : null,
+          detail ?? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)("div", { className: "pire-split-empty", children: emptyDetail })
+        ] })
+      ]
+    }
+  );
+}
+
+// src/components/patterns/ConfirmDialog.tsx
+var import_jsx_runtime59 = require("react/jsx-runtime");
 function ConfirmDialog({
   isOpen,
   title,
@@ -3424,7 +3466,7 @@ function ConfirmDialog({
   onConfirm,
   onCancel
 }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(
+  return /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(
     Dialog,
     {
       isOpen,
@@ -3434,12 +3476,12 @@ function ConfirmDialog({
       onClose: onCancel,
       isDismissable: !isBusy,
       showClose: false,
-      footer: /* @__PURE__ */ (0, import_jsx_runtime58.jsxs)(import_jsx_runtime58.Fragment, { children: [
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Button, { variant: "tertiary", isDisabled: isBusy, onPress: onCancel, children: cancelLabel }),
-        /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(Button, { variant: tone === "danger" ? "danger" : "primary", isDisabled: isBusy, onPress: onConfirm, children: isBusy ? "Working\u2026" : confirmLabel })
+      footer: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx_runtime59.Fragment, { children: [
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Button, { variant: "tertiary", isDisabled: isBusy, onPress: onCancel, children: cancelLabel }),
+        /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Button, { variant: tone === "danger" ? "danger" : "primary", isDisabled: isBusy, onPress: onConfirm, children: isBusy ? "Working\u2026" : confirmLabel })
       ] }),
       children: [
-        consequence ? /* @__PURE__ */ (0, import_jsx_runtime58.jsx)(InlineMessage, { kind: tone === "danger" ? "error" : "warning", style: { marginBottom: children ? "var(--sp-3)" : 0 }, children: consequence }) : null,
+        consequence ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(InlineMessage, { kind: tone === "danger" ? "error" : "warning", style: { marginBottom: children ? "var(--sp-3)" : 0 }, children: consequence }) : null,
         children
       ]
     }
@@ -3449,7 +3491,7 @@ function ConfirmDialog({
 // src/components/patterns/CommandPalette.tsx
 var React18 = __toESM(require("react"), 1);
 var import_react_aria_components31 = require("react-aria-components");
-var import_jsx_runtime59 = require("react/jsx-runtime");
+var import_jsx_runtime60 = require("react/jsx-runtime");
 var RESULTS_SECTION_KEY = "__pire_results__";
 var searchableText = (item) => [item.label, item.description, item.keywords].filter(Boolean).join(" ");
 function CommandPalette({
@@ -3490,7 +3532,7 @@ function CommandPalette({
   };
   const sections = [...groups, ...resultsGroup ? [{ ...resultsGroup, id: RESULTS_SECTION_KEY }] : []];
   const status = isLoading ? loadingLabel ?? msg.commandPaletteLoading : emptyLabel ?? msg.commandPaletteEmpty;
-  return /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
     import_react_aria_components31.ModalOverlay,
     {
       className: "pire-cp-overlay",
@@ -3499,11 +3541,11 @@ function CommandPalette({
       onOpenChange: (open) => {
         if (!open) onOpenChange?.(false);
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react_aria_components31.Modal, { className: cx("pire-cp-modal", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_react_aria_components31.Dialog, { className: "pire-cp-dialog", "aria-label": ariaLabel ?? msg.commandPaletteLabel, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_react_aria_components31.Autocomplete, { filter, inputValue: query, onInputChange: handleInputChange, children: [
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_react_aria_components31.SearchField, { className: "pire-cp-search", "aria-label": msg.commandPaletteSearchLabel, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Icon, { name: "search", size: 18, className: "pire-cp-search-icon" }),
-            /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+      children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react_aria_components31.Modal, { className: cx("pire-cp-modal", className), style, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_react_aria_components31.Dialog, { className: "pire-cp-dialog", "aria-label": ariaLabel ?? msg.commandPaletteLabel, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_react_aria_components31.Autocomplete, { filter, inputValue: query, onInputChange: handleInputChange, children: [
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_react_aria_components31.SearchField, { className: "pire-cp-search", "aria-label": msg.commandPaletteSearchLabel, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Icon, { name: "search", size: 18, className: "pire-cp-search-icon" }),
+            /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
               import_react_aria_components31.Input,
               {
                 className: "pire-cp-input",
@@ -3512,16 +3554,16 @@ function CommandPalette({
               }
             )
           ] }),
-          isLoading ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "pire-cp-loading", role: "status", "aria-live": "polite", children: loadingLabel ?? msg.commandPaletteLoading }) : null,
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+          isLoading ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "pire-cp-loading", role: "status", "aria-live": "polite", children: loadingLabel ?? msg.commandPaletteLoading }) : null,
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
             import_react_aria_components31.Menu,
             {
               className: "pire-cp-list",
               onAction: (key) => onAction?.(String(key)),
-              renderEmptyState: () => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "pire-cp-status", children: status }),
-              children: sections.map((section) => /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_react_aria_components31.MenuSection, { id: section.id, className: "pire-cp-section", children: [
-                section.label ? /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(import_react_aria_components31.Header, { className: "pire-cp-section-title", children: section.label }) : null,
-                section.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(
+              renderEmptyState: () => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "pire-cp-status", children: status }),
+              children: sections.map((section) => /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_react_aria_components31.MenuSection, { id: section.id, className: "pire-cp-section", children: [
+                section.label ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react_aria_components31.Header, { className: "pire-cp-section-title", children: section.label }) : null,
+                section.items.map((item) => /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
                   MenuItem,
                   {
                     id: item.id,
@@ -3542,18 +3584,18 @@ function CommandPalette({
           // aria-hidden: the glyphs are a sighted affordance for discovering the keys. A screen
           // reader already announces the listbox semantics that make those keys work, so reading
           // "up arrow down arrow navigate" out loud is noise on every open.
-          /* @__PURE__ */ (0, import_jsx_runtime59.jsx)("div", { className: "pire-cp-foot", "aria-hidden": "true", children: footer ?? /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)(import_jsx_runtime59.Fragment, { children: [
-            /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("span", { className: "pire-cp-hint", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Kbd, { children: "\u2191" }),
-              /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Kbd, { children: "\u2193" }),
+          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "pire-cp-foot", "aria-hidden": "true", children: footer ?? /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_jsx_runtime60.Fragment, { children: [
+            /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("span", { className: "pire-cp-hint", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Kbd, { children: "\u2191" }),
+              /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Kbd, { children: "\u2193" }),
               msg.commandPaletteHintNavigate
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("span", { className: "pire-cp-hint", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Kbd, { children: "\u21B5" }),
+            /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("span", { className: "pire-cp-hint", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Kbd, { children: "\u21B5" }),
               msg.commandPaletteHintSelect
             ] }),
-            /* @__PURE__ */ (0, import_jsx_runtime59.jsxs)("span", { className: "pire-cp-hint", children: [
-              /* @__PURE__ */ (0, import_jsx_runtime59.jsx)(Kbd, { children: "esc" }),
+            /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("span", { className: "pire-cp-hint", children: [
+              /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(Kbd, { children: "esc" }),
               msg.commandPaletteHintClose
             ] })
           ] }) })
@@ -3580,10 +3622,10 @@ function useCommandPaletteShortcut(onTrigger, { key = "k", isDisabled } = {}) {
 
 // src/components/patterns/SidePanel.tsx
 var import_react_aria_components32 = require("react-aria-components");
-var import_jsx_runtime60 = require("react/jsx-runtime");
+var import_jsx_runtime61 = require("react/jsx-runtime");
 function SidePanel({ isOpen, title, subtitle, width = 400, children, footer, onClose, className }) {
   const msg = usePireMessages();
-  return /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(
+  return /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(
     import_react_aria_components32.ModalOverlay,
     {
       className: "pire-sidepanel-overlay",
@@ -3592,28 +3634,28 @@ function SidePanel({ isOpen, title, subtitle, width = 400, children, footer, onC
       onOpenChange: (o) => {
         if (!o) onClose?.();
       },
-      children: /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react_aria_components32.Modal, { className: cx("pire-sidepanel", className), style: { width }, children: /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)(import_react_aria_components32.Dialog, { className: "pire-dialog", style: { height: "100%" }, children: [
-        /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("header", { className: "pire-dialog-head", children: [
-          /* @__PURE__ */ (0, import_jsx_runtime60.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
-            /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(import_react_aria_components32.Heading, { slot: "title", className: "pire-dialog-title", children: title }),
-            subtitle ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("p", { className: "pire-dialog-sub", style: { margin: 0 }, children: subtitle }) : null
+      children: /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_react_aria_components32.Modal, { className: cx("pire-sidepanel", className), style: { width }, children: /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)(import_react_aria_components32.Dialog, { className: "pire-dialog", style: { height: "100%" }, children: [
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("header", { className: "pire-dialog-head", children: [
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { style: { flex: 1, minWidth: 0 }, children: [
+            /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(import_react_aria_components32.Heading, { slot: "title", className: "pire-dialog-title", children: title }),
+            subtitle ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { className: "pire-dialog-sub", style: { margin: 0 }, children: subtitle }) : null
           ] }),
-          /* @__PURE__ */ (0, import_jsx_runtime60.jsx)(IconButton, { icon: "x", label: msg.sidePanelClose, size: "sm", onPress: onClose })
+          /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(IconButton, { icon: "x", label: msg.sidePanelClose, size: "sm", onPress: onClose })
         ] }),
-        /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("div", { className: "pire-dialog-body", style: { flex: 1 }, children }),
-        footer ? /* @__PURE__ */ (0, import_jsx_runtime60.jsx)("footer", { className: "pire-dialog-foot", children: footer }) : null
+        /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("div", { className: "pire-dialog-body", style: { flex: 1 }, children }),
+        footer ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("footer", { className: "pire-dialog-foot", children: footer }) : null
       ] }) })
     }
   );
 }
 
 // src/components/patterns/EmptyState.tsx
-var import_jsx_runtime61 = require("react/jsx-runtime");
+var import_jsx_runtime62 = require("react/jsx-runtime");
 function EmptyState({ icon = "file-text", title, action, compact, children, className, ...rest }) {
-  return /* @__PURE__ */ (0, import_jsx_runtime61.jsxs)("div", { className: cx("pire-empty", className), "data-compact": compact ? "true" : void 0, ...rest, children: [
-    /* @__PURE__ */ (0, import_jsx_runtime61.jsx)(Icon, { name: icon, size: 24, className: "pire-empty-icon" }),
-    title ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { className: "pire-empty-title", style: { margin: 0 }, children: title }) : null,
-    children ? /* @__PURE__ */ (0, import_jsx_runtime61.jsx)("p", { className: "pire-empty-body", style: { margin: 0 }, children }) : null,
+  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: cx("pire-empty", className), "data-compact": compact ? "true" : void 0, ...rest, children: [
+    /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Icon, { name: icon, size: 24, className: "pire-empty-icon" }),
+    title ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { className: "pire-empty-title", style: { margin: 0 }, children: title }) : null,
+    children ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("p", { className: "pire-empty-body", style: { margin: 0 }, children }) : null,
     action
   ] });
 }
@@ -3621,7 +3663,7 @@ function EmptyState({ icon = "file-text", title, action, compact, children, clas
 // src/components/patterns/FileDropZone.tsx
 var React19 = __toESM(require("react"), 1);
 var import_react_aria_components33 = require("react-aria-components");
-var import_jsx_runtime62 = require("react/jsx-runtime");
+var import_jsx_runtime63 = require("react/jsx-runtime");
 var isImage2 = (file) => file.type.startsWith("image/");
 function FileDropZone({
   label,
@@ -3670,12 +3712,12 @@ function FileDropZone({
     commit(allowsMultiple ? [...files, ...wrapped] : wrapped.slice(0, 1));
   };
   const remove = (target) => commit(files.filter((f) => f.file !== target));
-  return /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("div", { className: cx("pire-field", className), style, "data-full-width": String(fullWidth), children: [
-    label ? /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("span", { className: "pire-field-label", children: [
+  return /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("div", { className: cx("pire-field", className), style, "data-full-width": String(fullWidth), children: [
+    label ? /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("span", { className: "pire-field-label", children: [
       label,
-      isRequired ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "pire-field-req", "aria-hidden": "true", children: "*" }) : null
+      isRequired ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "pire-field-req", "aria-hidden": "true", children: "*" }) : null
     ] }) : null,
-    /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)(
+    /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)(
       import_react_aria_components33.DropZone,
       {
         className: "pire-dropzone",
@@ -3688,25 +3730,25 @@ function FileDropZone({
           accept(dropped);
         },
         children: [
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Icon, { name: "download", size: 24, className: "pire-dropzone-icon" }),
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "pire-dropzone-prompt", children: promptLabel ?? msg.fileDropZonePrompt }),
-          /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Icon, { name: "download", size: 24, className: "pire-dropzone-icon" }),
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "pire-dropzone-prompt", children: promptLabel ?? msg.fileDropZonePrompt }),
+          /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
             import_react_aria_components33.FileTrigger,
             {
               acceptedFileTypes,
               allowsMultiple,
               onSelect: (list) => accept(list ? [...list] : []),
-              children: /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Button, { variant: "secondary", isDisabled: isDisabled || isReadOnly, children: msg.fileUploadChoose })
+              children: /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Button, { variant: "secondary", isDisabled: isDisabled || isReadOnly, children: msg.fileUploadChoose })
             }
           )
         ]
       }
     ),
-    files.length ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("ul", { className: "pire-fileupload-list", children: files.map(({ file, previewUrl }) => /* @__PURE__ */ (0, import_jsx_runtime62.jsxs)("li", { className: "pire-fileupload-item", children: [
-      previewUrl ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("img", { className: "pire-fileupload-thumb", src: previewUrl, alt: "" }) : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(Icon, { name: "file-text", size: 16, className: "pire-fileupload-icon" }),
-      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "pire-fileupload-name", children: file.name }),
-      /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "pire-fileupload-size", children: formatFileSize(file.size) }),
-      isDisabled || isReadOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(
+    files.length ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("ul", { className: "pire-fileupload-list", children: files.map(({ file, previewUrl }) => /* @__PURE__ */ (0, import_jsx_runtime63.jsxs)("li", { className: "pire-fileupload-item", children: [
+      previewUrl ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("img", { className: "pire-fileupload-thumb", src: previewUrl, alt: "" }) : /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(Icon, { name: "file-text", size: 16, className: "pire-fileupload-icon" }),
+      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "pire-fileupload-name", children: file.name }),
+      /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "pire-fileupload-size", children: formatFileSize(file.size) }),
+      isDisabled || isReadOnly ? null : /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(
         IconButton,
         {
           icon: "x",
@@ -3716,9 +3758,9 @@ function FileDropZone({
         }
       )
     ] }, `${file.name}-${file.size}-${file.lastModified}`)) }) : null,
-    uploadProgress != null ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)(ProgressBar, { value: uploadProgress, label: msg.fileUploadUploading }) : null,
-    description ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "pire-field-hint", children: description }) : null,
-    isInvalid && errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime62.jsx)("span", { className: "pire-field-error", children: errorMessage }) : null
+    uploadProgress != null ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)(ProgressBar, { value: uploadProgress, label: msg.fileUploadUploading }) : null,
+    description ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "pire-field-hint", children: description }) : null,
+    isInvalid && errorMessage ? /* @__PURE__ */ (0, import_jsx_runtime63.jsx)("span", { className: "pire-field-error", children: errorMessage }) : null
   ] });
 }
 
@@ -3794,6 +3836,7 @@ var import_react_aria_components35 = require("react-aria-components");
   SidePanel,
   Skeleton,
   SkeletonTableRow,
+  SplitPane,
   Strong,
   SubmenuTrigger,
   Switch,