@hackcove/ui-react 0.10.8 → 0.10.9

package/dist/AppShell.d.ts

@@ -78,21 +78,33 @@ export declare function AppShellHideBelow({ breakpoint, children, ...rest }: Pas
  * reachable and nothing scrolls sideways. The menu is a native `<details>`, so it works with the
  * keyboard, with a screen reader and on a page that never hydrates. From `md` the header is the
  * row, and the `subnav` row, as they are.
+ *
+ * `controls` stay in the row at every width, so keep them few (a theme toggle, the viewer's avatar);
+ * on a phone a crowded `controls` clips, and the Menu button is never the part cut off. Pickers and
+ * actions that do not fit a phone row go in `menuControls`: rendered once, they sit in the row after
+ * `controls` from `md`, and below `md` at the top of the Menu, above `nav` and `subnav`.
  */
-export declare function AppShell({ brand, nav, controls, header, subnav, menuLabel, footer, bleed, hideChromeInPrint, children, ...rest }: {
+export declare function AppShell({ brand, nav, controls, menuControls, header, subnav, menuLabel, footer, bleed, hideChromeInPrint, children, ...rest }: {
     /** The brand: a logo and a name, in the header's brand type, with the gap between them. `AppShellBrand` makes both one link. */
     brand?: ReactNode;
     /** The main navigation, e.g. a `Tabs variant="pill"` of links (it is already a `<nav>`). Below `md` it is in the menu. */
     nav?: ReactNode;
     /** The end of the row: a picker, a theme toggle. Gap-2, vertically centred; no child shrinks, and a full-width control (a `Select` at its default) sizes to its content. */
     controls?: ReactNode;
+    /**
+     * Pickers and actions that do not fit a phone row, such as a project `Select` and a Sign out
+     * `Button`. From `md` they sit in the row after `controls`; below `md` they are at the top of the
+     * Menu, above `nav` and `subnav`. Rendered once, so a field keeps its state and ids stay unique.
+     * `controls` stay in the row at every width, so keep those few.
+     */
+    menuControls?: ReactNode;
     /** The escape hatch: a free node in the header row, after `brand` and `nav`. */
     header?: ReactNode;
     /** A second fixed-height row under the header from `md`, e.g. a `Tabs variant="pill"` of links. Below `md` it is in the menu with `nav`. */
     subnav?: ReactNode;
     /**
      * The phone menu button's name, for an app in another language. Only drawn below `md`, and only
-     * when `nav` or `subnav` is given.
+     * when `nav`, `subnav` or `menuControls` is given.
      * @default Menu
      */
     menuLabel?: string;

package/dist/AppShell.js

@@ -62,17 +62,20 @@ function ScrollRow({ className, children }) {
     return (_jsx(ContainerFrame, { elementRef: setRow, className: cx(ROW, FADE, className), children: children }));
 }
 /**
- * The header row's slots in order: brand, nav (from `md`), the free `children`, then controls and,
- * below `md`, the menu at the end.
+ * The header row's slots in order: brand, nav (from `md`), the free `children`, then `controls` and
+ * the menu at the end. `controls` have a wrapper of their own that shrinks and clips, and the menu
+ * sits beside it, so a crowded `controls` never pushes the Menu off a phone screen. From `md` the
+ * menu is the inline row of `menuControls` after `controls`.
  */
-function HeaderSlots({ brand, nav, controls, menu, children, }) {
-    return (_jsxs(_Fragment, { children: [brand && (_jsx("div", { className: "flex items-center gap-2 text-base font-bold tracking-tight text-slate-900", children: brand })), nav && _jsx("div", { className: "hidden items-center gap-4 *:shrink-0 md:flex", children: nav }), children, (controls || menu) && (_jsxs("div", { className: controls
-                    ? "ml-auto flex items-center gap-2 *:shrink-0 [&>.w-full]:w-auto"
-                    : "ml-auto flex items-center gap-2 *:shrink-0 md:hidden", children: [controls, menu] }))] }));
+function HeaderSlots({ brand, nav, controls, menu, menuInline, children, }) {
+    return (_jsxs(_Fragment, { children: [brand && (_jsx("div", { className: "flex items-center gap-2 text-base font-bold tracking-tight text-slate-900", children: brand })), nav && _jsx("div", { className: "hidden items-center gap-4 *:shrink-0 md:flex", children: nav }), children, (controls || menu) && (_jsxs("div", { className: cx(
+                // Below `md` this wrapper may shrink (the row's `*:shrink-0` is overridden), so a crowded
+                // `controls` clips inside its own box; from `md` it keeps its width and the row scrolls.
+                "ml-auto flex min-w-0 items-center gap-2 max-md:shrink!", !controls && !menuInline && "md:hidden"), children: [controls && (_jsx("div", { className: "flex min-w-0 items-center gap-2 *:shrink-0 max-md:-mx-1 max-md:overflow-x-clip max-md:px-1 [&>.w-full]:w-auto", children: controls })), menu] }))] }));
 }
 /** The sticky header: the one-row slots, and from `md` the `subnav` row under them. */
-function AppShellHeader({ brand, nav, controls, subnav, menuLabel, hideChromeInPrint, children, }) {
-    return (_jsxs("header", { className: cx("sticky top-0 z-10 border-b border-slate-200 bg-white", hideChromeInPrint && "print:hidden"), children: [_jsx(ScrollRow, { className: "flex h-14", children: _jsx(HeaderSlots, { brand: brand, nav: nav, controls: controls, menu: (nav || subnav) && (_jsxs(AppShellMenu, { label: menuLabel, children: [nav, subnav] })), children: children }) }), subnav && _jsx(ScrollRow, { className: "hidden h-12 md:flex", children: subnav })] }));
+function AppShellHeader({ brand, nav, controls, menuControls, subnav, menuLabel, hideChromeInPrint, children, }) {
+    return (_jsxs("header", { className: cx("sticky top-0 z-10 border-b border-slate-200 bg-white", hideChromeInPrint && "print:hidden"), children: [_jsx(ScrollRow, { className: "flex h-14", children: _jsx(HeaderSlots, { brand: brand, nav: nav, controls: controls, menuInline: !!menuControls, menu: (nav || subnav || menuControls) && (_jsxs(AppShellMenu, { label: menuLabel, controls: menuControls, children: [nav, subnav] })), children: children }) }), subnav && _jsx(ScrollRow, { className: "hidden h-12 md:flex", children: subnav })] }));
 }
 /**
  * The page frame: it paints the page canvas and sets the type face, ink and font smoothing
@@ -93,10 +96,15 @@ function AppShellHeader({ brand, nav, controls, subnav, menuLabel, hideChromeInP
  * reachable and nothing scrolls sideways. The menu is a native `<details>`, so it works with the
  * keyboard, with a screen reader and on a page that never hydrates. From `md` the header is the
  * row, and the `subnav` row, as they are.
+ *
+ * `controls` stay in the row at every width, so keep them few (a theme toggle, the viewer's avatar);
+ * on a phone a crowded `controls` clips, and the Menu button is never the part cut off. Pickers and
+ * actions that do not fit a phone row go in `menuControls`: rendered once, they sit in the row after
+ * `controls` from `md`, and below `md` at the top of the Menu, above `nav` and `subnav`.
  */
-export function AppShell({ brand, nav, controls, header, subnav, menuLabel = "Menu", footer, bleed = false, hideChromeInPrint = false, children, ...rest }) {
+export function AppShell({ brand, nav, controls, menuControls, header, subnav, menuLabel = "Menu", footer, bleed = false, hideChromeInPrint = false, children, ...rest }) {
     return (_jsxs("div", { ...rest, className: cx("flex min-h-dvh flex-col bg-gray-50 font-sans text-slate-900 antialiased", 
         // The sticky header's height (its rows and the bottom border), for a bar that sticks under it.
         // Below `md` it is one row whatever the slots are: the subnav is in the menu.
-        "[--app-header:calc(3.5rem+1px)]", subnav ? "md:[--app-header:calc(6.5rem+1px)]" : undefined), children: [_jsx(AppShellHeader, { brand: brand, nav: nav, controls: controls, subnav: subnav, menuLabel: menuLabel, hideChromeInPrint: hideChromeInPrint, children: header }), _jsx("main", { className: "flex flex-1 flex-col", children: bleed ? (children) : (_jsx(ContainerFrame, { className: cx("py-8", hideChromeInPrint && "print:p-0"), children: children })) }), footer && (_jsx("footer", { className: cx("border-t border-slate-200", hideChromeInPrint && "print:hidden"), children: _jsx(ContainerFrame, { className: "py-6 text-sm text-slate-500", children: footer }) }))] }));
+        "[--app-header:calc(3.5rem+1px)]", subnav ? "md:[--app-header:calc(6.5rem+1px)]" : undefined), children: [_jsx(AppShellHeader, { brand: brand, nav: nav, controls: controls, menuControls: menuControls, subnav: subnav, menuLabel: menuLabel, hideChromeInPrint: hideChromeInPrint, children: header }), _jsx("main", { className: "flex flex-1 flex-col", children: bleed ? (children) : (_jsx(ContainerFrame, { className: cx("py-8", hideChromeInPrint && "print:p-0"), children: children })) }), footer && (_jsx("footer", { className: cx("border-t border-slate-200", hideChromeInPrint && "print:hidden"), children: _jsx(ContainerFrame, { className: "py-6 text-sm text-slate-500", children: footer }) }))] }));
 }

package/dist/AppShellMenu.d.ts

@@ -6,8 +6,15 @@ import { type ReactElement, type ReactNode } from "react";
  * is out of flow (it hangs under the header, `top-full`), so the header keeps its one height open
  * or closed. With script it also closes on Escape (focus returns to the button) and when a link in
  * it is followed, for a router that changes the page without a reload.
+ *
+ * `controls` (AppShell's `menuControls`) sit at the top of the panel, above the links. From `md`
+ * the `<details>` drops its own box and shows only them, inline at the row's end, whether it is
+ * open or not: the summary and the link copies are hidden (the links render in their own rows from
+ * `md`) and the panel is a plain row. They are rendered once, so a field keeps its state.
  */
-export declare function AppShellMenu({ label, children, }: {
+export declare function AppShellMenu({ label, controls, children, }: {
     label: string;
+    /** Rendered once: at the top of the panel below `md`, inline in the row from `md`. */
+    controls?: ReactNode;
     children: ReactNode;
 }): ReactElement;

package/dist/AppShellMenu.js

@@ -21,8 +21,13 @@ const ICON = {
  * is out of flow (it hangs under the header, `top-full`), so the header keeps its one height open
  * or closed. With script it also closes on Escape (focus returns to the button) and when a link in
  * it is followed, for a router that changes the page without a reload.
+ *
+ * `controls` (AppShell's `menuControls`) sit at the top of the panel, above the links. From `md`
+ * the `<details>` drops its own box and shows only them, inline at the row's end, whether it is
+ * open or not: the summary and the link copies are hidden (the links render in their own rows from
+ * `md`) and the panel is a plain row. They are rendered once, so a field keeps its state.
  */
-export function AppShellMenu({ label, children, }) {
+export function AppShellMenu({ label, controls, children, }) {
     const details = useRef(null);
     const close = (focusButton) => {
         const el = details.current;
@@ -32,11 +37,17 @@ export function AppShellMenu({ label, children, }) {
         if (focusButton)
             el.querySelector("summary")?.focus();
     };
-    return (_jsxs("details", { ref: details, className: "group md:hidden", onKeyDown: (event) => {
-            if (event.key === "Escape")
+    return (_jsxs("details", { ref: details, className: cx("group shrink-0", controls
+            ? "md:contents md:[&::details-content]:contents md:[&::details-content]:[content-visibility:visible]"
+            : "md:hidden"), onKeyDown: (event) => {
+            // A dialog opened from a control in the menu takes its own Escape; the menu stays open.
+            if (event.key === "Escape" &&
+                !(event.target instanceof Element && event.target.closest("dialog")))
                 close(true);
-        }, children: [_jsxs("summary", { className: cx("flex cursor-pointer list-none items-center gap-2 rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-900 select-none hover:bg-slate-50 [&::-webkit-details-marker]:hidden", focusRing), children: [_jsx("svg", { ...ICON, className: cx(ICON.className, "group-open:hidden"), children: _jsx("path", { d: "M3 5.5h14M3 10h14M3 14.5h14" }) }), _jsx("svg", { ...ICON, className: cx(ICON.className, "hidden group-open:block"), children: _jsx("path", { d: "M5 5l10 10M15 5L5 15" }) }), label] }), _jsx("div", { className: "absolute inset-x-0 top-full max-h-[calc(100dvh-var(--app-header))] overflow-y-auto overscroll-contain border-y border-slate-200 bg-white shadow-lg", onClick: (event) => {
+        }, children: [_jsxs("summary", { className: cx("flex cursor-pointer list-none md:hidden items-center gap-2 rounded-lg border border-slate-300 bg-white px-3 py-2 text-sm font-medium text-slate-900 select-none hover:bg-slate-50 [&::-webkit-details-marker]:hidden", focusRing), children: [_jsx("svg", { ...ICON, className: cx(ICON.className, "group-open:hidden"), children: _jsx("path", { d: "M3 5.5h14M3 10h14M3 14.5h14" }) }), _jsx("svg", { ...ICON, className: cx(ICON.className, "hidden group-open:block"), children: _jsx("path", { d: "M5 5l10 10M15 5L5 15" }) }), label] }), _jsx("div", { 
+                // From `md` the panel draws no box (`contents`), so its dropdown look applies below `md` only.
+                className: "absolute inset-x-0 top-full max-h-[calc(100dvh-var(--app-header))] overflow-y-auto overscroll-contain border-y border-slate-200 bg-white shadow-lg md:contents", onClick: (event) => {
                     if (event.target instanceof Element && event.target.closest("a[href]"))
                         close(false);
-                }, children: _jsx(ContainerFrame, { className: "flex flex-col gap-3 py-3", children: children }) })] }));
+                }, children: _jsxs(ContainerFrame, { className: "flex flex-col gap-3 py-3 md:contents", children: [controls && (_jsx("div", { className: "flex flex-wrap items-center gap-2 md:flex-nowrap md:*:shrink-0 md:[&>.w-full]:w-auto", children: controls })), _jsx("div", { className: "flex flex-col gap-3 md:hidden", children: children })] }) })] }));
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@hackcove/ui-react",
-  "version": "0.10.8",
+  "version": "0.10.9",
   "description": "Hack Cove React components: primitives, typography roles and a safe Markdown renderer, written against Tailwind v4 utilities. Pair with a theme from @hackcove/themes.",
   "keywords": [
     "components",