@eifi1/ui-kit 0.33.0 → 0.34.0

package/dist/shell/app-shell.js

@@ -1,6 +1,6 @@
 "use client";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { createContext, useCallback, useContext, useEffect, useId, useLayoutEffect, useRef, useState } from "react";
+import { createContext, useCallback, useContext, useEffect, useId, useLayoutEffect, useMemo, useRef, useState } from "react";
 import { createPortal } from "react-dom";
 import { Link, NavLink, matchPath, useHref, useLocation } from "react-router";
 import { ChevronRight, MoreHorizontal, PanelLeftClose, PanelLeftOpen } from "lucide-react";
@@ -11,16 +11,15 @@ 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 { CompactControls } from "../components/field-parts.js";
+import { mergeRefs } from "../components/field-parts.js";
 import { useAnchoredRect } from "../hooks/use-anchored-rect.js";
-import { useEscapeKey } from "../hooks/use-dismiss.js";
+import { anchoredInline } from "../hooks/use-anchored-panel.js";
+import { useDismissLayer } from "../hooks/use-dismiss.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"
-};
+import { DEFAULT_APP_SHELL_MORE_LABELS } from "./app-shell-labels.js";
 const DEFAULT_MOBILE_BAR_MAX = {
   normal: Number.POSITIVE_INFINITY,
   large: 4,
@@ -73,6 +72,7 @@ function AppShell({
   toggleGroupLabel,
   embedded: embeddedProp,
   className,
+  ref,
   ...rest
 }) {
   const embedded = useContext(AppShellNesting) || !!embeddedProp;
@@ -96,6 +96,7 @@ function AppShell({
   const [openGroup, setOpenGroup] = useState(null);
   const navRef = useRef(null);
   const rootRef = useRef(null);
+  const setRoot = useMemo(() => mergeRefs(rootRef, ref), [ref]);
   useNavHeightVar(navRef, rootRef, embedded);
   useEffect(() => {
     if (collapseStorageKey !== null) writeStored(collapseStorageKey, collapsed ? "1" : "0");
@@ -110,7 +111,7 @@ function AppShell({
       "div",
       {
         ...rest,
-        ref: rootRef,
+        ref: setRoot,
         "data-app-shell": "",
         className: cn(
           "relative flex flex-col",
@@ -129,7 +130,7 @@ function AppShell({
               {
                 className: cn(
                   // `border-e`: the sidebar sits at the START, which is the right in RTL.
-                  "hidden md:flex md:flex-col border-e border-[var(--border)] bg-[var(--bg-surface)] transition-[width] duration-200 ease-out overflow-hidden",
+                  "hidden md:flex md:flex-col border-e border-subtle bg-surface transition-[width] duration-200 ease-out overflow-hidden",
                   // 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)]",
@@ -150,13 +151,13 @@ function AppShell({
                   )) }) }),
                   !!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(
+                  !large && /* @__PURE__ */ jsx("div", { className: "border-t border-subtle p-2", children: collapsed ? /* @__PURE__ */ jsx(Tooltip, { label: labels.expand, side: "end", portal: true, className: "block", children: /* @__PURE__ */ jsx(
                     "button",
                     {
                       type: "button",
                       onClick: () => setCollapsed(false),
                       "aria-label": labels.expand,
-                      className: "flex w-full items-center justify-center min-h-9 rounded-md text-[var(--text-muted)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)]",
+                      className: "flex w-full items-center justify-center min-h-9 rounded-md text-muted hover:bg-hover hover:text-secondary",
                       children: /* @__PURE__ */ jsx(PanelLeftOpen, { className: "size-4 shrink-0 rtl:-scale-x-100" })
                     }
                   ) }) : /* @__PURE__ */ jsxs(
@@ -165,10 +166,10 @@ function AppShell({
                       type: "button",
                       onClick: () => setCollapsed(true),
                       "aria-label": labels.collapse,
-                      className: "flex w-full items-center gap-3 min-h-9 px-3 py-2 rounded-md text-sm text-[var(--text-muted)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)]",
+                      className: "flex w-full items-center gap-3 min-h-9 px-3 py-2 rounded-md text-sm text-muted hover:bg-hover hover:text-secondary",
                       children: [
                         /* @__PURE__ */ jsx(PanelLeftClose, { className: "size-4 shrink-0 rtl:-scale-x-100" }),
-                        /* @__PURE__ */ jsx("span", { className: "truncate", children: labels.collapse })
+                        /* @__PURE__ */ jsx("span", { className: "truncate-until-large", children: labels.collapse })
                       ]
                     }
                   ) })
@@ -194,7 +195,7 @@ function AppShell({
             "div",
             {
               ref: navRef,
-              className: "md:hidden fixed bottom-0 inset-x-0 z-30 border-t border-[var(--border)] bg-[var(--bg-surface)]",
+              className: "md:hidden fixed bottom-0 inset-x-0 z-30 border-t border-subtle bg-surface",
               children: [
                 mobileSubNav && /* @__PURE__ */ jsx(MobileSubNav, { nav, layout: mobileSubNavLayout }),
                 /* @__PURE__ */ jsxs(
@@ -219,7 +220,7 @@ function AppShell({
 }
 const routerLink = ({ href, ...p }) => /* @__PURE__ */ jsx(Link, { to: href, ...p });
 const plainLink = ({ children, ...p }) => /* @__PURE__ */ jsx("a", { ...p, children });
-const FOOTER_ICON_LINK = "flex min-h-8 items-center justify-center rounded-md text-[var(--text-muted)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)]";
+const FOOTER_ICON_LINK = "flex min-h-8 items-center justify-center rounded-md text-muted hover:bg-hover hover:text-secondary";
 function RenderedLink({ render, ...props }) {
   return render(props);
 }
@@ -249,9 +250,9 @@ function SidebarFooterItems({
         "nav",
         {
           "aria-label": item.label,
-          className: "flex flex-wrap justify-center gap-x-3 gap-y-0.5 text-caption text-[var(--text-muted)]",
+          className: "flex flex-wrap justify-center gap-x-3 gap-y-0.5 text-caption 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",
+            className: "rounded-sm hover:text-secondary hover:underline",
             children: l.label
           }) }, l.to))
         },
@@ -262,7 +263,7 @@ function SidebarFooterItems({
       className: cn(FOOTER_ICON_LINK, "gap-1.5 text-xs font-medium"),
       children: /* @__PURE__ */ jsxs(Fragment, { children: [
         /* @__PURE__ */ jsx(item.icon, { className: "size-3.5 shrink-0", "aria-hidden": true }),
-        /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate", children: item.text ?? item.label })
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 truncate-until-large", children: item.text ?? item.label })
       ] })
     });
     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);
@@ -273,10 +274,17 @@ const mobileCellClass = (active) => cn(
   // 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"
+  active ? "font-semibold text-brand before:bg-brand" : "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 });
+  return /* @__PURE__ */ jsx(
+    "span",
+    {
+      "data-truncate-ok": "",
+      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);
@@ -350,7 +358,7 @@ function MobileMoreCell({
           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)]"
+            isActive ? "bg-inverse text-inverse" : "text-primary hover:bg-hover"
           ),
           children: [
             /* @__PURE__ */ jsx(item.icon, { "aria-hidden": true, className: "size-5 shrink-0" }),
@@ -358,7 +366,7 @@ function MobileMoreCell({
           ]
         }
       ),
-      !!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(
+      !!item.items?.length && /* @__PURE__ */ jsx("ul", { "aria-label": item.label, className: "ms-[1.3rem] mt-0.5 space-y-0.5 border-s border-subtle ps-2", children: item.items.map((sub) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
         NavLink,
         {
           to: sub.to,
@@ -366,7 +374,7 @@ function MobileMoreCell({
           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)]"
+            isActive ? "bg-inverse text-inverse" : "text-secondary hover:bg-hover"
           ),
           children: [
             /* @__PURE__ */ jsx(sub.icon, { "aria-hidden": true, className: "size-4 shrink-0 opacity-70" }),
@@ -395,7 +403,7 @@ function MobileSubNav({ nav, layout }) {
     "nav",
     {
       "aria-label": group.label,
-      className: "animate-subnav border-b border-[var(--border)]",
+      className: "animate-subnav border-b border-subtle",
       children: /* @__PURE__ */ jsx(
         "ul",
         {
@@ -413,7 +421,7 @@ function MobileSubNav({ nav, layout }) {
               end: sub.end ?? true,
               className: ({ isActive }) => cn(
                 "flex items-center gap-1.5 rounded-full border px-3 py-1 text-xs transition-colors",
-                isActive ? "border-[var(--brand)] bg-[var(--brand)] font-medium text-[var(--brand-contrast)]" : "border-[var(--border)] text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]"
+                isActive ? "border-brand bg-brand font-medium text-brand-contrast" : "border-subtle text-secondary hover:bg-hover"
               ),
               children: [
                 /* @__PURE__ */ jsx(sub.icon, { className: "size-3.5 shrink-0", "aria-hidden": true }),
@@ -427,7 +435,7 @@ function MobileSubNav({ nav, layout }) {
     group.to
   );
 }
-const navLinkClass = (collapsed, forceActive, trail = false) => ({ isActive }) => `flex items-center gap-3 min-h-9 ${collapsed ? "justify-center px-2" : "px-3"} py-2 rounded-md text-sm transition-colors duration-150 ${isActive || forceActive && !trail ? "bg-[var(--bg-inverse)] text-[var(--text-inverse)]" : forceActive ? "font-medium text-[var(--text-primary)] hover:bg-[var(--bg-hover)]" : "text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]"}`;
+const navLinkClass = (collapsed, forceActive, trail = false) => ({ isActive }) => `flex items-center gap-3 min-h-9 ${collapsed ? "justify-center px-2" : "px-3"} py-2 rounded-md text-sm transition-colors duration-150 ${isActive || forceActive && !trail ? "bg-inverse text-inverse" : forceActive ? "font-medium text-primary hover:bg-hover" : "text-secondary hover:bg-hover"}`;
 function useSubItemActive(item) {
   const { pathname } = useLocation();
   return !!item.items?.some((sub) => matchPath({ path: sub.to, end: sub.end ?? true }, pathname));
@@ -515,7 +523,7 @@ function SidebarGroup({
           "aria-controls": listId,
           "aria-label": toggleGroupLabel(item.label),
           onClick: () => setOpenGroup(open ? null : item.to),
-          className: "flex size-9 shrink-0 items-center justify-center rounded-md text-[var(--text-muted)] hover:bg-[var(--bg-hover)] hover:text-[var(--text-secondary)]",
+          className: "flex size-9 shrink-0 items-center justify-center rounded-md text-muted hover:bg-hover hover:text-secondary",
           children: /* @__PURE__ */ jsx(
             ChevronRight,
             {
@@ -548,14 +556,14 @@ function SidebarGroup({
               "min-h-0 overflow-hidden transition-opacity duration-200 ease-out motion-reduce:transition-none",
               expanded ? "opacity-100" : "opacity-0"
             ),
-            children: /* @__PURE__ */ jsx("ul", { 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(
+            children: /* @__PURE__ */ jsx("ul", { className: "ms-[1.3rem] mt-0.5 space-y-0.5 border-s border-subtle ps-2", children: item.items.map((sub) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
               NavLink,
               {
                 to: sub.to,
                 end: sub.end ?? true,
                 className: ({ isActive }) => cn(
                   "flex min-h-8 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)]"
+                  isActive ? "bg-inverse text-inverse" : "text-secondary hover:bg-hover"
                 ),
                 children: [
                   /* @__PURE__ */ jsx(sub.icon, { className: "size-4 shrink-0 opacity-70", "aria-hidden": true }),
@@ -576,7 +584,14 @@ function SidebarFlyout({ item, children }) {
   const [open, setOpen] = useState(false);
   const [dir, setDir] = useState("ltr");
   const rect = useAnchoredRect(wrapperRef, open);
-  const pos = rect ? dir === "rtl" ? { top: rect.top, right: window.innerWidth - rect.left } : { top: rect.top, left: rect.right } : null;
+  const panelRef = useRef(null);
+  const [panelWidth, setPanelWidth] = useState(0);
+  const placed = rect !== null;
+  useLayoutEffect(() => {
+    if (open && placed) setPanelWidth(panelRef.current?.offsetWidth ?? 0);
+  }, [open, placed]);
+  const at = rect ? anchoredInline(rect, panelWidth, { dir, align: "after" }) : null;
+  const pos = rect && at ? { top: rect.top, ...dir === "rtl" ? { right: at.right } : { left: at.left } } : null;
   const cancelClose = useCallback(() => {
     if (closeTimer.current) {
       clearTimeout(closeTimer.current);
@@ -601,7 +616,7 @@ function SidebarFlyout({ item, children }) {
       if (activeFlyoutClose === closeNow) activeFlyoutClose = null;
     }, 140);
   }, [cancelClose, closeNow]);
-  useEscapeKey(() => setOpen(false), open);
+  useDismissLayer(open, () => setOpen(false));
   useEffect(
     () => () => {
       cancelClose();
@@ -631,6 +646,7 @@ function SidebarFlyout({ item, children }) {
             /* @__PURE__ */ jsx(
               "div",
               {
+                ref: panelRef,
                 dir,
                 style: { position: "fixed", ...pos },
                 className: "z-40 ps-1",
@@ -641,9 +657,9 @@ function SidebarFlyout({ item, children }) {
                   {
                     role: "menu",
                     "aria-label": item.label,
-                    className: "animate-flyout min-w-52 overflow-hidden rounded-md border border-[var(--border)] bg-[var(--bg-surface)] shadow-lg",
+                    className: "animate-flyout min-w-52 overflow-hidden rounded-md border border-subtle bg-surface shadow-lg",
                     children: [
-                      /* @__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("div", { className: "border-b border-subtle px-3 py-2 text-caption font-semibold uppercase tracking-wide text-muted", children: item.label }),
                       /* @__PURE__ */ jsx("ul", { className: "py-1", children: item.items.map((sub) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
                         NavLink,
                         {
@@ -653,10 +669,10 @@ function SidebarFlyout({ item, children }) {
                           onClick: () => setOpen(false),
                           className: ({ isActive }) => cn(
                             "flex items-center gap-2.5 px-3 py-2 text-sm",
-                            isActive ? "bg-[var(--bg-active)] font-medium text-[var(--text-primary)]" : "text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]"
+                            isActive ? "bg-active font-medium text-primary" : "text-secondary hover:bg-hover"
                           ),
                           children: [
-                            /* @__PURE__ */ jsx(sub.icon, { className: "size-4 shrink-0 text-[var(--text-placeholder)]" }),
+                            /* @__PURE__ */ jsx(sub.icon, { className: "size-4 shrink-0 text-placeholder" }),
                             /* @__PURE__ */ jsx("span", { className: "min-w-0 break-words leading-snug", children: sub.label })
                           ]
                         }