@estiva-app/ui 0.36.0 → 0.37.1

package/dist/Panel.d.ts

@@ -0,0 +1,47 @@
+import type { ReactNode, Ref, UIEventHandler } from 'react';
+/**
+ * A panel of a page: its name in a `ContainerHeader`, a body under it that
+ * scrolls whenever it is taller than the room it has, and, when there is one,
+ * a row fixed at the bottom that never scrolls — a reply box.
+ *
+ * Made so that scrolling comes from the package, not from each app remembering
+ * it (Katerina, 26 September 2026). The apps built their panels from the
+ * package's header and a box of their own, and a box without a `ScrollArea`
+ * simply cut off what did not fit: Peek's widget panel on a Ship file lost the
+ * end of a long description and the status control under it, with no bar and
+ * nothing to scroll. Here the body is always a `ScrollArea`, so the bar shows
+ * as soon as there is more, and an empty panel or a short one has none.
+ *
+ * It takes the room it is given, never its content's height, so the body is
+ * what scrolls, not the page: the rest of a flex column (`flex-1 min-h-0`), or
+ * the whole of a plain box with a height (`h-full`). The second was missing in
+ * 0.37.0, and a panel in a plain box grew past it: Peek's thread story pushed
+ * its reply box out of its frame. Two panels in one column share it; a
+ * `max-h-*` in `className` caps one of them.
+ *
+ * It keeps a crash inside itself, as ListColumn does: if its body, its actions
+ * or its footer break, the panel keeps its title and shows `ErrorBoundary`'s
+ * message in the room the body had.
+ */
+export interface PanelProps {
+    /** The panel's name, in its header. A node for a title that is more than words. */
+    title: ReactNode;
+    /** A chevron after the title, as `ContainerHeader` draws it. */
+    chevron?: boolean;
+    /** The panel's own actions, at the header's right — a `Toolbar` of `ToolbarButton`s, or one `IconButton`. */
+    actions?: ReactNode;
+    /** The body. It scrolls when it is taller than the panel. */
+    children: ReactNode;
+    /** A row fixed under the body that never scrolls — a reply box. */
+    footer?: ReactNode;
+    /** The body's own box: its padding, gap and layout — `px-4 pt-3 pb-4`, `flex flex-col gap-2`. */
+    bodyClassName?: string;
+    /** The body's scrolling box, for a panel that reads or drives its scroll: a thread that opens at its newest reply. */
+    bodyRef?: Ref<HTMLDivElement>;
+    /** Fires as the body scrolls. */
+    onBodyScroll?: UIEventHandler<HTMLDivElement>;
+    /** Placement only: a cap such as `max-h-[60%]` when it shares a column. */
+    className?: string;
+}
+export declare function Panel(props: PanelProps): import("react").JSX.Element;
+//# sourceMappingURL=Panel.d.ts.map

package/dist/Panel.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Panel.d.ts","sourceRoot":"","sources":["../src/Panel.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAM3D;;;;;;;;;;;;;;;;;;;;;;;GAuBG;AACH,MAAM,WAAW,UAAU;IACzB,mFAAmF;IACnF,KAAK,EAAE,SAAS,CAAA;IAChB,gEAAgE;IAChE,OAAO,CAAC,EAAE,OAAO,CAAA;IACjB,6GAA6G;IAC7G,OAAO,CAAC,EAAE,SAAS,CAAA;IACnB,6DAA6D;IAC7D,QAAQ,EAAE,SAAS,CAAA;IACnB,mEAAmE;IACnE,MAAM,CAAC,EAAE,SAAS,CAAA;IAClB,iGAAiG;IACjG,aAAa,CAAC,EAAE,MAAM,CAAA;IACtB,sHAAsH;IACtH,OAAO,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;IAC7B,iCAAiC;IACjC,YAAY,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAA;IAC7C,2EAA2E;IAC3E,SAAS,CAAC,EAAE,MAAM,CAAA;CACnB;AAmBD,wBAAgB,KAAK,CAAC,KAAK,EAAE,UAAU,+BActC"}

package/dist/ScrollArea.d.ts

@@ -7,8 +7,13 @@ import type { ReactNode, Ref, UIEventHandler } from 'react';
  * right-hand padding looks wider than the left. Katerina saw it in every
  * scrolling surface of both apps (2026-09-08). Base UI's `ScrollArea` hides
  * the native bar and draws its own over the content, so nothing moves when
- * it appears; the bar shows while the pointer is over the region or the
- * content is moving, and fades otherwise.
+ * it appears.
+ *
+ * The bar shows whenever the region has more to scroll to, at rest too
+ * (Katerina, 26 September: a long folder list in Peek's side column looked
+ * complete, because the bar waited for the pointer). Base UI writes
+ * `data-has-overflow-y` / `-x` on the bar while that axis overflows; a region
+ * with nothing more to show keeps no bar at all.
  *
  * Three boxes, and each class prop lands on one:
  *

package/dist/ScrollArea.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ScrollArea.d.ts","sourceRoot":"","sources":["../src/ScrollArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAI3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GAsCG;AACH,MAAM,WAAW,eAAe;IAC9B,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,CAAA;IAChD,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,8DAA8D;IAC9D,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,yEAAyE;IACzE,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB;;;;;;;;OAQG;IACH,WAAW,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;IACjC,uFAAuF;IACvF,QAAQ,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAA;IACzC,QAAQ,EAAE,SAAS,CAAA;CACpB;AAKD,wBAAgB,UAAU,CAAC,EAAE,WAAwB,EAAE,SAAS,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,eAAe,+BA4CxJ"}
+{"version":3,"file":"ScrollArea.d.ts","sourceRoot":"","sources":["../src/ScrollArea.tsx"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,GAAG,EAAE,cAAc,EAAE,MAAM,OAAO,CAAA;AAI3D;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;GA2CG;AACH,MAAM,WAAW,eAAe;IAC9B,WAAW,CAAC,EAAE,UAAU,GAAG,YAAY,GAAG,MAAM,CAAA;IAChD,6CAA6C;IAC7C,SAAS,CAAC,EAAE,MAAM,CAAA;IAClB,8DAA8D;IAC9D,iBAAiB,CAAC,EAAE,MAAM,CAAA;IAC1B,yEAAyE;IACzE,gBAAgB,CAAC,EAAE,MAAM,CAAA;IACzB;;;;;;;;OAQG;IACH,WAAW,CAAC,EAAE,GAAG,CAAC,cAAc,CAAC,CAAA;IACjC,uFAAuF;IACvF,QAAQ,CAAC,EAAE,cAAc,CAAC,cAAc,CAAC,CAAA;IACzC,QAAQ,EAAE,SAAS,CAAA;CACpB;AAKD,wBAAgB,UAAU,CAAC,EAAE,WAAwB,EAAE,SAAS,EAAE,iBAAiB,EAAE,gBAAgB,EAAE,WAAW,EAAE,QAAQ,EAAE,QAAQ,EAAE,EAAE,eAAe,+BA4CxJ"}

package/dist/eslint/index.js

@@ -991,15 +991,28 @@ var INTERACTIVE = ["onClick", "href", "role", "onKeyDown", "onPointerDown"];
 var noHandmadeHeader = {
   meta: {
     type: "problem",
-    docs: { description: "A column's header bar drawn by hand where ContainerHeader is the part" },
+    docs: { description: "A column's header bar drawn by hand, or the package's header on its own in an app, where Panel is the part" },
     schema: [],
     messages: {
-      handmade: "A column's header bar drawn by hand. Use `ContainerHeader` from @estiva-app/ui: 48px, the title, the column's buttons at the right edge (`actions`), a hairline under it.",
+      handmade: "A column's header bar drawn by hand. Use `Panel` from @estiva-app/ui: its header (48px, the title, the column's buttons at the right edge in `actions`, a hairline under it) and a body under it that scrolls. For a list beside the page, `ListColumn`.",
+      bare: "A panel put together by hand: `ContainerHeader` over a box of your own, which cuts off whatever does not fit. Use `Panel` from @estiva-app/ui: the same header (`title`, `actions`), a body that scrolls whenever it is taller, and a `footer` that stays put. For a list beside the page, `ListColumn`.",
       ...ESCAPE_MESSAGES
     }
   },
   create(context) {
+    const bare2 = /* @__PURE__ */ new Set();
     return {
+      ImportDeclaration(node) {
+        const declaration = node;
+        if (declaration.source.value !== "@estiva-app/ui") return;
+        for (const specifier of declaration.specifiers) if (specifier.type === "ImportSpecifier" && specifier.imported?.name === "ContainerHeader") bare2.add(specifier.local.name);
+      },
+      JSXOpeningElement(node) {
+        const element = node;
+        if (element.name.type !== "JSXIdentifier" || !bare2.has(element.name.name ?? "")) return;
+        if (isEscaped(context, element)) return;
+        context.report({ loc: element.loc, messageId: "bare" });
+      },
       JSXElement(node) {
         const column = node;
         const kids = meaningful(column);
@@ -1389,7 +1402,7 @@ var noCopiedLook = {
 };
 
 // src/eslint/no-native-title.ts
-var PARTS_WITH_A_TITLE = ["CollapsibleSection", "ConfirmDialog", "ContainerHeader", "DialogShell", "ListColumn", "SectionHeader"];
+var PARTS_WITH_A_TITLE = ["CollapsibleSection", "ConfirmDialog", "ContainerHeader", "DialogShell", "ListColumn", "Panel", "SectionHeader"];
 var child3 = (node, key) => node[key];
 var nameOf4 = (node) => node?.type === "JSXIdentifier" || node?.type === "Identifier" ? node.name : void 0;
 var noNativeTitle = {