@eifi1/ui-kit 0.31.0 → 0.32.0

package/dist/shell/app-shell.js

@@ -2,21 +2,38 @@
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
 import { createContext, useCallback, useContext, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
 import { createPortal } from "react-dom";
-import { Link, NavLink, matchPath, useLocation } from "react-router";
-import { ChevronRight, PanelLeftClose, PanelLeftOpen } from "lucide-react";
+import { Link, NavLink, matchPath, useHref, useLocation } from "react-router";
+import { ChevronRight, MoreHorizontal, PanelLeftClose, PanelLeftOpen } from "lucide-react";
 import { cn } from "../lib/cn.js";
 import { scrollIntoStrip, useStripFade } from "../lib/strip-fade.js";
 import { dirOf } from "../lib/direction.js";
 import { readStored, writeStored } from "../lib/safe-storage.js";
 import { Tooltip } from "../components/tooltip.js";
 import { pickLinkRenderer } from "../components/text-link.js";
+import { DialogFrame } from "../components/dialog-frame.js";
+import { CompactControls } from "../components/ui.js";
 import { useAnchoredRect } from "../hooks/use-anchored-rect.js";
 import { useEscapeKey } from "../hooks/use-dismiss.js";
-import { useMediaQuery } from "../hooks/use-media-query.js";
+import { useBreakpoint } from "../hooks/use-breakpoint.js";
+import { useTextSize } from "../theme/text-size.js";
 import { DEFAULT_APP_SHELL_LABELS, useKitLabels, useKitLink } from "../i18n/kit-labels.js";
+const DEFAULT_APP_SHELL_MORE_LABELS = {
+  more: "More",
+  moreTitle: "More pages"
+};
+const DEFAULT_MOBILE_BAR_MAX = {
+  normal: Number.POSITIVE_INFINITY,
+  large: 4,
+  xlarge: 3
+};
+function splitMobileBar(entries, max) {
+  const limit = Math.max(1, Math.floor(max));
+  if (entries.length <= limit + 1) return { shown: [...entries], hidden: [] };
+  return { shown: entries.slice(0, limit), hidden: entries.slice(limit) };
+}
 const AppShellNesting = createContext(false);
 function useNavHeightVar(ref, shellRef, embedded) {
-  const isMdUp = useMediaQuery("(min-width: 768px)", false);
+  const isMdUp = useBreakpoint("md", false);
   useEffect(() => {
     const node = ref.current;
     const shell = shellRef.current;
@@ -51,13 +68,21 @@ function AppShell({
   subNav = "flyout",
   mobileSubNav = true,
   mobileSubNavLayout = "wrap",
+  mobileBarMax,
+  moreLabels,
   toggleGroupLabel,
   embedded: embeddedProp,
   className,
   ...rest
 }) {
   const embedded = useContext(AppShellNesting) || !!embeddedProp;
-  const barNav = nav.filter((item) => !item.mobileHidden);
+  const { size: textSize } = useTextSize();
+  const large = textSize !== "normal";
+  const barMax = typeof mobileBarMax === "number" ? mobileBarMax : mobileBarMax?.[textSize] ?? DEFAULT_MOBILE_BAR_MAX[textSize];
+  const { shown: barNav, hidden: moreNav } = splitMobileBar(
+    nav.filter((item) => !item.mobileHidden),
+    barMax
+  );
   const collapseStorageKey = collapseStorageKeyProp ?? (embedded ? null : "appLayout.sidebarCollapsed");
   const labels = useKitLabels("appShell", DEFAULT_APP_SHELL_LABELS, {
     collapse: collapseLabel,
@@ -74,6 +99,7 @@ function AppShell({
   useEffect(() => {
     if (collapseStorageKey !== null) writeStored(collapseStorageKey, collapsed ? "1" : "0");
   }, [collapsed, collapseStorageKey]);
+  const iconOnly = collapsed && !large;
   return (
     // The caller's attributes go on the shell's own root, never on the `data-tour="nav"`
     // wrappers below — those are the kit's anchors for its own guided tour (#313/#322),
@@ -95,7 +121,7 @@ function AppShell({
           className
         ),
         children: [
-          topBar,
+          /* @__PURE__ */ jsx(CompactControls, { children: topBar }),
           /* @__PURE__ */ jsxs("div", { className: "flex flex-1 min-h-0", children: [
             /* @__PURE__ */ jsxs(
               "aside",
@@ -106,14 +132,14 @@ function AppShell({
                   // Embedded, the row it sits in is already the shell's height; the sticky
                   // offsets below are measured against the window's top bar.
                   embedded ? "md:self-stretch" : "md:sticky md:top-12 md:self-start md:h-[calc(100vh-3rem)]",
-                  collapsed ? "md:w-14" : "md:w-60"
+                  iconOnly ? "md:w-14" : "md:w-60"
                 ),
                 children: [
                   /* @__PURE__ */ jsx("nav", { className: "flex-1 px-2 py-3 overflow-y-auto overflow-x-hidden", children: /* @__PURE__ */ jsx("div", { "data-tour": "nav", className: "space-y-1", children: nav.map((item) => /* @__PURE__ */ jsx(
                     SidebarNavItem,
                     {
                       item,
-                      collapsed,
+                      collapsed: iconOnly,
                       inline: subNav === "inline",
                       toggleGroupLabel: labels.toggleGroup,
                       openGroup,
@@ -121,9 +147,9 @@ function AppShell({
                     },
                     item.to
                   )) }) }),
-                  !!sidebarFooterItems?.length && /* @__PURE__ */ jsx(SidebarFooterItems, { items: sidebarFooterItems, collapsed, renderLink }),
-                  sidebarFooter?.(collapsed),
-                  /* @__PURE__ */ jsx("div", { className: "border-t border-[var(--border)] p-2", children: collapsed ? /* @__PURE__ */ jsx(Tooltip, { label: labels.expand, side: "end", portal: true, className: "block", children: /* @__PURE__ */ jsx(
+                  !!sidebarFooterItems?.length && /* @__PURE__ */ jsx(SidebarFooterItems, { items: sidebarFooterItems, collapsed: iconOnly, renderLink }),
+                  sidebarFooter?.(iconOnly),
+                  !large && /* @__PURE__ */ jsx("div", { className: "border-t border-[var(--border)] p-2", children: collapsed ? /* @__PURE__ */ jsx(Tooltip, { label: labels.expand, side: "end", portal: true, className: "block", children: /* @__PURE__ */ jsx(
                     "button",
                     {
                       type: "button",
@@ -170,13 +196,16 @@ function AppShell({
               className: "md:hidden fixed bottom-0 inset-x-0 z-30 border-t border-[var(--border)] bg-[var(--bg-surface)]",
               children: [
                 mobileSubNav && /* @__PURE__ */ jsx(MobileSubNav, { nav, layout: mobileSubNavLayout }),
-                /* @__PURE__ */ jsx(
+                /* @__PURE__ */ jsxs(
                   "nav",
                   {
                     "data-tour": "nav",
                     className: "grid",
-                    style: { gridTemplateColumns: `repeat(${barNav.length}, minmax(0, 1fr))` },
-                    children: barNav.map((item) => /* @__PURE__ */ jsx(MobileNavItem, { item }, item.to))
+                    style: { gridTemplateColumns: `repeat(${barNav.length + (moreNav.length ? 1 : 0)}, minmax(0, 1fr))` },
+                    children: [
+                      barNav.map((item) => /* @__PURE__ */ jsx(MobileNavItem, { item }, item.to)),
+                      moreNav.length > 0 && /* @__PURE__ */ jsx(MobileMoreCell, { hidden: moreNav, labels: moreLabels })
+                    ]
                   }
                 )
               ]
@@ -219,7 +248,7 @@ function SidebarFooterItems({
         "nav",
         {
           "aria-label": item.label,
-          className: "flex flex-wrap justify-center gap-x-3 gap-y-0.5 text-[11px] text-[var(--text-muted)]",
+          className: "flex flex-wrap justify-center gap-x-3 gap-y-0.5 text-caption text-[var(--text-muted)]",
           children: item.links.map((l) => /* @__PURE__ */ jsx("span", { children: linkTo(l.to, l.external, {
             className: "rounded-sm hover:text-[var(--text-secondary)] hover:underline",
             children: l.label
@@ -238,6 +267,16 @@ function SidebarFooterItems({
     return item.hint ? /* @__PURE__ */ jsx(Tooltip, { label: item.hint, side: "top", portal: true, className: "block", children: link }, item.key) : /* @__PURE__ */ jsx("div", { children: link }, item.key);
   }) });
 }
+const mobileCellClass = (active) => cn(
+  // `h-full`: the grid row stretches every cell to the tallest one's height, so a
+  // label on two lines never leaves its neighbours a different shape.
+  "relative flex h-full w-full flex-col items-center justify-start py-2 text-caption gap-0.5 transition-colors",
+  "before:absolute before:content-[''] before:inset-x-4 before:top-0 before:h-0.5 before:rounded-full before:transition-colors",
+  active ? "font-semibold text-[var(--brand)] before:bg-[var(--brand)]" : "text-[var(--text-muted)] before:bg-transparent"
+);
+function MobileCellLabel({ children }) {
+  return /* @__PURE__ */ jsx("span", { className: "line-clamp-2 max-w-full break-words px-0.5 text-center leading-tight hyphens-auto", children });
+}
 function MobileNavItem({ item }) {
   const subActive = useSubItemActive(item);
   return /* @__PURE__ */ jsxs(
@@ -246,23 +285,97 @@ function MobileNavItem({ item }) {
       to: item.to,
       end: item.end ?? true,
       "data-tour": item.dataTour,
-      className: ({ isActive }) => (
-        // The active page needs a clear marker, not just a subtle text
-        // shade (feedback #327): brand-accent icon + label, bolder weight,
-        // and a top accent bar spanning the cell so it reads at a glance.
-        cn(
-          "relative flex flex-col items-center justify-center py-2 text-[11px] gap-0.5 transition-colors",
-          "before:absolute before:content-[''] before:inset-x-4 before:top-0 before:h-0.5 before:rounded-full before:transition-colors",
-          isActive || subActive ? "font-semibold text-[var(--brand)] before:bg-[var(--brand)]" : "text-[var(--text-muted)] before:bg-transparent"
-        )
-      ),
+      className: ({ isActive }) => mobileCellClass(isActive || subActive),
       children: [
         /* @__PURE__ */ jsx("span", { className: "relative", children: /* @__PURE__ */ jsx(item.icon, { className: "size-5" }) }),
-        /* @__PURE__ */ jsx("span", { className: "max-w-full truncate px-0.5", children: item.shortLabel ?? item.label })
+        /* @__PURE__ */ jsx(MobileCellLabel, { children: item.shortLabel ?? item.label })
       ]
     }
   );
 }
+function entryIsCurrent(item, pathname) {
+  return !!matchPath({ path: item.to, end: item.end ?? true }, pathname) || !!item.items?.some((sub) => matchPath({ path: sub.to, end: sub.end ?? true }, pathname));
+}
+function TourAnchor({ to, dataTour }) {
+  const href = useHref(to);
+  return (
+    // eslint-disable-next-line jsx-a11y/anchor-has-content -- a tour anchor, aria-hidden and inert; the More button under it is the control (see MobileMoreCell)
+    /* @__PURE__ */ jsx(
+      "a",
+      {
+        href,
+        "data-tour": dataTour,
+        "aria-hidden": true,
+        tabIndex: -1,
+        className: "pointer-events-none absolute inset-0"
+      }
+    )
+  );
+}
+function MobileMoreCell({
+  hidden,
+  labels: labelsProp
+}) {
+  const labels = useKitLabels("appShellMore", DEFAULT_APP_SHELL_MORE_LABELS, labelsProp);
+  const { pathname } = useLocation();
+  const [open, setOpen] = useState(false);
+  const active = hidden.some((item) => entryIsCurrent(item, pathname));
+  const close = () => setOpen(false);
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "app-shell-more", className: "relative min-w-0", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        "aria-haspopup": "dialog",
+        "aria-expanded": open,
+        onClick: () => setOpen(true),
+        className: mobileCellClass(active),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "relative", children: /* @__PURE__ */ jsx(MoreHorizontal, { "aria-hidden": true, className: "size-5" }) }),
+          /* @__PURE__ */ jsx(MobileCellLabel, { children: labels.more })
+        ]
+      }
+    ),
+    hidden.flatMap((item) => [
+      /* @__PURE__ */ jsx(TourAnchor, { to: item.to, dataTour: item.dataTour }, item.to),
+      ...(item.items ?? []).map((sub) => /* @__PURE__ */ jsx(TourAnchor, { to: sub.to }, `${item.to} ${sub.to}`))
+    ]),
+    /* @__PURE__ */ jsx(DialogFrame, { open, onClose: close, title: labels.moreTitle, closeButton: true, bodyClassName: "space-y-1", children: /* @__PURE__ */ jsx("ul", { className: "space-y-1", children: hidden.map((item) => /* @__PURE__ */ jsxs("li", { children: [
+      /* @__PURE__ */ jsxs(
+        NavLink,
+        {
+          to: item.to,
+          end: item.end ?? true,
+          onClick: close,
+          className: ({ isActive }) => cn(
+            "flex min-h-11 items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors",
+            isActive ? "bg-[var(--bg-inverse)] text-[var(--text-inverse)]" : "text-[var(--text-primary)] hover:bg-[var(--bg-hover)]"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(item.icon, { "aria-hidden": true, className: "size-5 shrink-0" }),
+            /* @__PURE__ */ jsx("span", { className: "min-w-0 break-words leading-snug", children: item.label })
+          ]
+        }
+      ),
+      !!item.items?.length && /* @__PURE__ */ jsx("ul", { "aria-label": item.label, className: "ms-[1.3rem] mt-0.5 space-y-0.5 border-s border-[var(--border)] ps-2", children: item.items.map((sub) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
+        NavLink,
+        {
+          to: sub.to,
+          end: sub.end ?? true,
+          onClick: close,
+          className: ({ isActive }) => cn(
+            "flex min-h-11 items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm transition-colors",
+            isActive ? "bg-[var(--bg-inverse)] text-[var(--text-inverse)]" : "text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]"
+          ),
+          children: [
+            /* @__PURE__ */ jsx(sub.icon, { "aria-hidden": true, className: "size-4 shrink-0 opacity-70" }),
+            /* @__PURE__ */ jsx("span", { className: "min-w-0 break-words leading-snug", children: sub.label })
+          ]
+        }
+      ) }, sub.to)) })
+    ] }, item.to)) }) })
+  ] });
+}
 function MobileSubNav({ nav, layout }) {
   const { pathname } = useLocation();
   const scroll = layout === "scroll";
@@ -529,7 +642,7 @@ function SidebarFlyout({ item, children }) {
                     "aria-label": item.label,
                     className: "animate-flyout min-w-52 overflow-hidden rounded-md border border-[var(--border)] bg-[var(--bg-surface)] shadow-lg",
                     children: [
-                      /* @__PURE__ */ jsx("div", { className: "border-b border-[var(--border)] px-3 py-2 text-[11px] font-semibold uppercase tracking-wide text-[var(--text-muted)]", children: item.label }),
+                      /* @__PURE__ */ jsx("div", { className: "border-b border-[var(--border)] px-3 py-2 text-caption font-semibold uppercase tracking-wide text-[var(--text-muted)]", children: item.label }),
                       /* @__PURE__ */ jsx("ul", { className: "py-1", children: item.items.map((sub) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
                         NavLink,
                         {
@@ -560,6 +673,9 @@ function SidebarFlyout({ item, children }) {
   );
 }
 export {
-  AppShell
+  AppShell,
+  DEFAULT_APP_SHELL_MORE_LABELS,
+  DEFAULT_MOBILE_BAR_MAX,
+  splitMobileBar
 };
 //# sourceMappingURL=app-shell.js.map