@umodeapporg/ui 0.8.2 → 0.9.1

package/dist/components/Navigation/PageTitle.d.ts

@@ -1,10 +1,10 @@
-import { ReactNode } from 'react';
+import { ReactNode, RefObject } from 'react';
 import { SymbolCodepoints } from '../UI/MaterialSymbol';
 export interface IPageTitleImage {
     src: string;
     /** The image REPLACES the icon chip, so it carries the accessible name of what it depicts. */
     alt: string;
-    /** Escape hatch for the shape, e.g. `rounded-full` for an avatar. */
+    /** Escape hatch for shape and size, e.g. `rounded-full` for an avatar. Merged last, so it wins. */
     className?: string;
 }
 interface IPageTitleProps {
@@ -16,6 +16,12 @@ interface IPageTitleProps {
     /** Conteúdo abaixo da linha do título, dentro da coluna de texto (tags, steppers). */
     subtitleSlot?: ReactNode;
     slot?: ReactNode;
+    /**
+     * Where the `slot` sits against the text column. `center` (default) is right for a one-line title with
+     * a couple of buttons; `start` pins it to the TOP of the header, which is what a tall identification
+     * block needs so its actions line up with the eyebrow instead of floating at the middle.
+     */
+    slotAlign?: 'center' | 'start';
     /** Conteúdo renderizado à ESQUERDA, imediatamente ao lado do título (o `slot` fica à direita). */
     titleSlot?: ReactNode;
     /** Conteúdo renderizado ANTES do ícone/título (ex.: botão voltar customizado, alvo de drop). */
@@ -33,6 +39,33 @@ interface IPageTitleProps {
      * image in the header.
      */
     titleImage?: IPageTitleImage;
+    /**
+     * Size of the leading media (icon chip or `titleImage`). `md` is the 2.5rem chip every page uses;
+     * `lg` is the 5rem cover of a RECORD header, where the image identifies the record itself (a product
+     * datasheet). `compact` already implies `sm`, so pass this only to go bigger.
+     */
+    titleMediaSize?: 'sm' | 'md' | 'lg';
+    /**
+     * The header pins itself to the top of its scroll container and, once pinned, shrinks: the
+     * breadcrumb, the eyebrow, the headline and the `subtitleSlot` go, the media drops one size (the
+     * record's picture stays, at the icon chip's size) and the title takes its compact type. The back
+     * button and the `slot` never move.
+     *
+     * EXPANDED, IT RENDERS EXACTLY WHAT IT RENDERED BEFORE THIS EXISTED: no wrapper node, no extra
+     * element, no background. That is deliberate. The first version added a sentinel node as a sibling
+     * of the header, and since almost every page wraps it in a `flex flex-col gap-y-*`, that node
+     * became a flex item and every page grew a stray gap.
+     *
+     * On by default. Turn it off for a header that must keep its full identity on screen, or one that
+     * is not at the top of a scrolling page (inside a card, a dialog or a print sheet).
+     */
+    collapseOnScroll?: boolean;
+    /**
+     * The element whose scrolling drives the collapse. Only needed when the page's content scrolls in a
+     * container that is NOT an ancestor of the header, which is what a split layout does (a fixed header
+     * over an independently scrolling body). Left out, the header finds its own scrollable ancestor.
+     */
+    collapseScrollRef?: RefObject<HTMLElement | null>;
     /** Deriva o ícone automaticamente do menu quando `titleIcon` não é passado. */
     autoIcon?: boolean;
     /** Variante compacta: título menor, para headers de navegação interna (ex.: pastas). */

package/dist/components/Navigation/PageTitle.js

@@ -1,14 +1,35 @@
 import { jsx, jsxs } from "react/jsx-runtime";
-import { useMemo, useState } from "react";
+import { useMemo, useState, useRef, useEffect } from "react";
 import classNames from "classnames";
 import { useTranslation } from "react-i18next";
+import { twMerge } from "tailwind-merge";
 import ControlledButton from "../Form/ControlledButton.js";
 import ControlledTooltip from "../UI/ControlledTooltip.js";
 import { capitalizeAllLetters } from "../../helpers/stringHelpers.js";
 import { MaterialSymbol } from "../UI/MaterialSymbol/index.js";
 import ControlledBreadcrumb from "./ControlledBreadcrumb.js";
+import { PageTitleCollapseProvider } from "./PageTitleCollapseContext.js";
 import { usePageTitleNavigation } from "./PageTitleNavigationContext.js";
 import { useUiNavigation } from "./UiNavigationContext.js";
+const MEDIA_BOX_CLASSNAME = {
+  sm: "size-8 rounded-lg",
+  md: "size-10 rounded-xl",
+  lg: "size-20 rounded-xl"
+};
+const MEDIA_ICON_SIZE = { sm: 18, md: 22, lg: 34 };
+const COLLAPSED_MEDIA_SIZE = { sm: "sm", md: "sm", lg: "md" };
+const COLLAPSE_AT_SCROLL = 48;
+const EXPAND_AT_SCROLL = 16;
+const PINNED_TOLERANCE_PX = 1;
+const findScrollParent = (node) => {
+  let current = node?.parentElement ?? null;
+  while (current) {
+    const { overflowY } = getComputedStyle(current);
+    if (overflowY === "auto" || overflowY === "scroll") return current;
+    current = current.parentElement;
+  }
+  return null;
+};
 const PageTitle = ({
   canBack = false,
   canFloat = false,
@@ -19,6 +40,7 @@ const PageTitle = ({
   subtitleSlot,
   headline,
   slot,
+  slotAlign = "center",
   titleSlot,
   leadingSlot,
   breadcrumb,
@@ -26,6 +48,9 @@ const PageTitle = ({
   titleIcon,
   titleIconClassName,
   titleImage,
+  titleMediaSize,
+  collapseOnScroll = true,
+  collapseScrollRef,
   autoIcon = true,
   compact = false,
   capitalizeTitle = true,
@@ -67,26 +92,82 @@ const PageTitle = ({
   const resolvedTitleIcon = titleIcon ?? (autoIcon ? menuTrail[menuTrail.length - 1]?.icon : void 0);
   const [failedTitleImageSrc, setFailedTitleImageSrc] = useState(null);
   const rendersTitleImage = Boolean(titleImage?.src) && titleImage?.src !== failedTitleImageSrc;
-  return /* @__PURE__ */ jsxs(
+  const rootRef = useRef(null);
+  const [isCollapsed, setIsCollapsed] = useState(false);
+  const collapses = collapseOnScroll && !canFloat;
+  useEffect(() => {
+    if (!collapses) {
+      setIsCollapsed(false);
+      return;
+    }
+    const root = rootRef.current;
+    if (!root) return;
+    const container = collapseScrollRef?.current ?? findScrollParent(root);
+    if (!container) return;
+    const scrollsUnderTheHeader = container.contains(root);
+    let frame = 0;
+    const evaluate = () => {
+      frame = 0;
+      if (!scrollsUnderTheHeader) {
+        const offset = container.scrollTop;
+        setIsCollapsed((previous) => previous ? offset > EXPAND_AT_SCROLL : offset >= COLLAPSE_AT_SCROLL);
+        return;
+      }
+      const stickyTop = Number.parseFloat(getComputedStyle(root).top);
+      const pinnedLine = container.getBoundingClientRect().top + (Number.isNaN(stickyTop) ? 0 : stickyTop);
+      setIsCollapsed(root.getBoundingClientRect().top <= pinnedLine + PINNED_TOLERANCE_PX);
+    };
+    const handleScroll = () => {
+      if (!frame) frame = requestAnimationFrame(evaluate);
+    };
+    evaluate();
+    container.addEventListener("scroll", handleScroll, { passive: true });
+    return () => {
+      container.removeEventListener("scroll", handleScroll);
+      if (frame) cancelAnimationFrame(frame);
+    };
+  }, [collapses, collapseScrollRef]);
+  const isCompactLayout = compact || isCollapsed;
+  const resolvedMediaSize = titleMediaSize ?? (compact ? "sm" : "md");
+  const mediaSize = isCollapsed ? COLLAPSED_MEDIA_SIZE[resolvedMediaSize] : resolvedMediaSize;
+  const mediaBoxClassName = MEDIA_BOX_CLASSNAME[mediaSize];
+  const mediaIconSize = MEDIA_ICON_SIZE[mediaSize];
+  const mediaTransitionClassName = "transition-[width,height] duration-base ease-enter";
+  const collapseValue = useMemo(() => ({ isCollapsed }), [isCollapsed]);
+  return /* @__PURE__ */ jsx(PageTitleCollapseProvider, { value: collapseValue, children: /* @__PURE__ */ jsxs(
     "div",
     {
-      className: classNames("flex flex-col", {
-        "zIndexMax fixed top-16 mr-7": canFloat,
+      ref: rootRef,
+      className: classNames(
+        "flex flex-col",
+        {
+          "zIndexMax fixed top-16 mr-7": canFloat,
+          // Pins under the app header, which publishes its own height; hosts without the shell stick
+          // at the top of their own scroll container. `sticky` is inert until it pins, so this costs
+          // nothing on a page that does not scroll.
+          "sticky top-[var(--page-header-sticky-top,0px)] z-30": collapses,
+          // The page's own background, and nothing else. Pinned, the header has to be opaque or the
+          // content slides visibly through the title; but it is not a PANEL, so no glass, no border
+          // and no shadow, which read as a second surface appearing out of nowhere mid-scroll.
+          "bg-canvas": collapses && isCollapsed
+        },
         className
-      }),
+      ),
       style: {
         width: canFloat ? isFirefox() ? "-moz-available" : "-webkit-fill-available" : "100%"
       },
       children: [
-        resolvedBreadcrumb && /* @__PURE__ */ jsx("div", { className: "mb-2 shrink-0", children: resolvedBreadcrumb }),
+        resolvedBreadcrumb && !isCollapsed && /* @__PURE__ */ jsx("div", { className: "mb-2 shrink-0", children: resolvedBreadcrumb }),
         /* @__PURE__ */ jsxs(
           "div",
           {
-            className: classNames("flex w-full flex-wrap items-center justify-between gap-x-4 gap-y-2", {
+            className: classNames("flex w-full flex-wrap justify-between gap-x-4 gap-y-2", {
+              "items-start": slotAlign === "start",
+              "items-center": slotAlign !== "start",
               "bg-surface py-5": canFloat
             }),
             children: [
-              /* @__PURE__ */ jsxs("div", { className: classNames("flex min-w-0 flex-1 basis-60 items-center", compact ? "gap-2" : "gap-3"), children: [
+              /* @__PURE__ */ jsxs("div", { className: classNames("flex min-w-0 flex-1 basis-60 items-center", isCompactLayout ? "gap-2" : "gap-3"), children: [
                 leadingSlot,
                 canBack && /* @__PURE__ */ jsx(ControlledTooltip, { content: t("actions.back"), children: /* @__PURE__ */ jsx(
                   ControlledButton,
@@ -96,9 +177,9 @@ const PageTitle = ({
                     disabled: disableBack,
                     className: classNames(
                       "flex shrink-0 items-center justify-center rounded-full text-foreground-subtle transition-interactive duration-base ease-enter hover:bg-muted-hover hover:text-foreground-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-border active:scale-90 disabled:pointer-events-none disabled:text-foreground-faint",
-                      compact ? "size-8" : "size-9"
+                      isCompactLayout ? "size-8" : "size-9"
                     ),
-                    children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: "arrow_back", size: compact ? 18 : 20 })
+                    children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: "arrow_back", size: isCompactLayout ? 18 : 20 })
                   }
                 ) }),
                 rendersTitleImage && titleImage ? /* @__PURE__ */ jsx(
@@ -107,32 +188,34 @@ const PageTitle = ({
                     src: titleImage.src,
                     alt: titleImage.alt,
                     onError: () => setFailedTitleImageSrc(titleImage.src),
-                    className: classNames(
+                    className: twMerge(
                       "shrink-0 border border-border object-cover",
-                      compact ? "size-8 rounded-lg" : "size-10 rounded-xl",
+                      mediaTransitionClassName,
+                      mediaBoxClassName,
                       titleImage.className
                     )
                   }
                 ) : resolvedTitleIcon && /* @__PURE__ */ jsx(
                   "span",
                   {
-                    className: classNames(
+                    className: twMerge(
                       "flex shrink-0 items-center justify-center",
-                      compact ? "size-8 rounded-lg" : "size-10 rounded-xl",
+                      mediaTransitionClassName,
+                      mediaBoxClassName,
                       titleIconClassName ?? "bg-brand-soft text-brand-emphasis"
                     ),
-                    children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: resolvedTitleIcon, size: compact ? 18 : 22, fill: true, className: "text-inherit" })
+                    children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: resolvedTitleIcon, size: mediaIconSize, fill: true, className: "text-inherit" })
                   }
                 ),
                 /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 flex-col", children: [
-                  eyebrow && /* @__PURE__ */ jsx("span", { className: "mb-0.5 text-xs font-semibold uppercase tracking-widest text-foreground-faint", children: eyebrow }),
+                  eyebrow && !isCollapsed && /* @__PURE__ */ jsx("span", { className: "mb-0.5 text-xs font-semibold uppercase tracking-widest text-foreground-faint", children: eyebrow }),
                   /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 items-center gap-2", children: [
                     titleContent ?? /* @__PURE__ */ jsx(
                       "span",
                       {
                         className: classNames(
                           "min-w-0 truncate",
-                          compact ? "text-sm font-semibold text-foreground" : "text-lg font-bold tracking-tight text-foreground laptop:text-xl",
+                          isCompactLayout ? "text-sm font-semibold text-foreground" : "text-lg font-bold tracking-tight text-foreground laptop:text-xl",
                           titleClassName
                         ),
                         children: capitalizeTitle ? capitalizeAllLetters(title) : title
@@ -140,18 +223,27 @@ const PageTitle = ({
                     ),
                     titleSlot
                   ] }),
-                  headline && /* @__PURE__ */ jsx("span", { className: "mt-0.5 text-xs text-foreground-subtle", children: headline }),
-                  subtitleSlot && /* @__PURE__ */ jsx("div", { className: "mt-1 flex min-w-0 flex-col gap-1", children: subtitleSlot })
+                  headline && !isCollapsed && /* @__PURE__ */ jsx("span", { className: "mt-0.5 text-xs text-foreground-subtle", children: headline }),
+                  subtitleSlot && !isCollapsed && /* @__PURE__ */ jsx("div", { className: "mt-1 flex min-w-0 flex-col gap-1", children: subtitleSlot })
                 ] })
               ] }),
-              slot && /* @__PURE__ */ jsx("div", { className: "ml-auto flex shrink-0 flex-wrap items-center justify-end gap-2", children: slot })
+              slot && /* @__PURE__ */ jsx(
+                "div",
+                {
+                  className: classNames(
+                    "ml-auto flex shrink-0 flex-wrap justify-end gap-2",
+                    slotAlign === "start" ? "items-start" : "items-center"
+                  ),
+                  children: slot
+                }
+              )
             ]
           }
         ),
-        showDivider && !canFloat && (title.length > 0 || Boolean(titleContent)) && /* @__PURE__ */ jsx("hr", { className: classNames("border-border-subtle", compact ? "mb-2 mt-2" : "mb-2 mt-3") })
+        showDivider && !canFloat && (title.length > 0 || Boolean(titleContent)) && /* @__PURE__ */ jsx("hr", { className: classNames("border-border-subtle", isCompactLayout ? "mb-2 mt-2" : "mb-2 mt-3") })
       ]
     }
-  );
+  ) });
 };
 export {
   PageTitle as default

package/dist/components/Navigation/PageTitle.js.map

@@ -1 +1 @@
-{"version":3,"file":"PageTitle.js","sources":["../../../src/components/Navigation/PageTitle.tsx"],"sourcesContent":["import { ReactNode, useMemo, useState } from 'react';\nimport classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport { capitalizeAllLetters } from '@/helpers/stringHelpers';\n\nimport { MaterialSymbol, SymbolCodepoints } from '../UI/MaterialSymbol';\n\nimport ControlledBreadcrumb from './ControlledBreadcrumb';\nimport { usePageTitleNavigation } from './PageTitleNavigationContext';\nimport { useUiNavigation } from './UiNavigationContext';\n\nexport interface IPageTitleImage {\n  src: string;\n  /** The image REPLACES the icon chip, so it carries the accessible name of what it depicts. */\n  alt: string;\n  /** Escape hatch for the shape, e.g. `rounded-full` for an avatar. */\n  className?: string;\n}\n\ninterface IPageTitleProps {\n  title?: string;\n  /** Substitui o span do título por conteúdo rico (ex.: nome editável inline da ficha técnica). */\n  titleContent?: ReactNode;\n  /** Rótulo pequeno em caixa alta acima do título (ex.: \"FICHA TÉCNICA\"). */\n  eyebrow?: string;\n  /** Conteúdo abaixo da linha do título, dentro da coluna de texto (tags, steppers). */\n  subtitleSlot?: ReactNode;\n  slot?: ReactNode;\n  /** Conteúdo renderizado à ESQUERDA, imediatamente ao lado do título (o `slot` fica à direita). */\n  titleSlot?: ReactNode;\n  /** Conteúdo renderizado ANTES do ícone/título (ex.: botão voltar customizado, alvo de drop). */\n  leadingSlot?: ReactNode;\n  /** Trilha custom acima do título (use `ControlledBreadcrumb`). Sem ela, a trilha é derivada do menu. */\n  breadcrumb?: ReactNode;\n  /** Deriva a trilha automaticamente da árvore de navegação quando `breadcrumb` não é passado. */\n  autoBreadcrumb?: boolean;\n  /** Ícone em chip à esquerda do título. Sem ele, herda o ícone do item de menu da rota atual. */\n  titleIcon?: SymbolCodepoints;\n  titleIconClassName?: string;\n  /**\n   * An image in the icon chip's place, at the same size and radius (e.g. the product cover on a\n   * datasheet header). A src that fails to load falls back to the icon instead of leaving a broken\n   * image in the header.\n   */\n  titleImage?: IPageTitleImage;\n  /** Deriva o ícone automaticamente do menu quando `titleIcon` não é passado. */\n  autoIcon?: boolean;\n  /** Variante compacta: título menor, para headers de navegação interna (ex.: pastas). */\n  compact?: boolean;\n  /** Desligue para títulos digitados pelo usuário (nomes de pastas etc.), que não podem ter a caixa alterada. */\n  capitalizeTitle?: boolean;\n  /** Desligue quando o header é seguido imediatamente por tabs ou outra divisão própria. */\n  showDivider?: boolean;\n  canBack?: boolean;\n  canBackTo?: string;\n  canFloat?: boolean;\n  headline?: string;\n  className?: string;\n  titleClassName?: string;\n  onBackClick?: () => void;\n  disableBack?: boolean;\n}\n\nconst PageTitle: React.FC<IPageTitleProps> = ({\n  canBack = false,\n  canFloat = false,\n  canBackTo,\n  title = '',\n  titleContent,\n  eyebrow,\n  subtitleSlot,\n  headline,\n  slot,\n  titleSlot,\n  leadingSlot,\n  breadcrumb,\n  autoBreadcrumb = true,\n  titleIcon,\n  titleIconClassName,\n  titleImage,\n  autoIcon = true,\n  compact = false,\n  capitalizeTitle = true,\n  showDivider = true,\n  className,\n  titleClassName,\n  onBackClick,\n  disableBack = false,\n}) => {\n  const { t } = useTranslation('ui');\n  const { navigate, goBack, location } = useUiNavigation();\n\n  const isFirefox = () => typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().includes('firefox');\n\n  const handleBack = () => {\n    if (disableBack) return;\n\n    if (onBackClick) {\n      onBackClick();\n    } else if (canBackTo) {\n      navigate(canBackTo);\n    } else {\n      goBack();\n    }\n  };\n\n  const { resolveTrail } = usePageTitleNavigation();\n\n  const menuTrail = useMemo(() => {\n    const needsTrail = (autoBreadcrumb && !breadcrumb && !canFloat) || (autoIcon && !titleIcon && !titleImage);\n    return needsTrail ? resolveTrail(location.pathname) : [];\n  }, [autoBreadcrumb, breadcrumb, canFloat, autoIcon, titleIcon, titleImage, location.pathname, resolveTrail]);\n\n  const resolvedBreadcrumb =\n    breadcrumb ??\n    (autoBreadcrumb && !canFloat && menuTrail.length >= 2 ? (\n      <ControlledBreadcrumb\n        ariaLabel={t('pageTitle.breadcrumbLabel')}\n        items={menuTrail.map((item, index) => ({\n          key: item.key,\n          label: item.label,\n          to: index < menuTrail.length - 1 ? item.to : undefined,\n        }))}\n      />\n    ) : undefined);\n\n  const resolvedTitleIcon = titleIcon ?? (autoIcon ? menuTrail[menuTrail.length - 1]?.icon : undefined);\n\n  // Holds the src that failed rather than a boolean, so pointing at another image retries on its own.\n  const [failedTitleImageSrc, setFailedTitleImageSrc] = useState<string | null>(null);\n  const rendersTitleImage = Boolean(titleImage?.src) && titleImage?.src !== failedTitleImageSrc;\n\n  return (\n    <div\n      className={classNames('flex flex-col', {\n        'zIndexMax fixed top-16 mr-7': canFloat,\n        className,\n      })}\n      style={{\n        width: canFloat ? (isFirefox() ? '-moz-available' : '-webkit-fill-available') : '100%',\n      }}\n    >\n      {resolvedBreadcrumb && <div className=\"mb-2 shrink-0\">{resolvedBreadcrumb}</div>}\n\n      <div\n        className={classNames('flex w-full flex-wrap items-center justify-between gap-x-4 gap-y-2', {\n          'bg-surface py-5': canFloat,\n        })}\n      >\n        <div className={classNames('flex min-w-0 flex-1 basis-60 items-center', compact ? 'gap-2' : 'gap-3')}>\n          {leadingSlot}\n\n          {canBack && (\n            <ControlledTooltip content={t('actions.back')}>\n              <ControlledButton\n                defaultHtmlButton\n                onClick={handleBack}\n                disabled={disableBack}\n                className={classNames(\n                  'flex shrink-0 items-center justify-center rounded-full text-foreground-subtle transition-interactive duration-base ease-enter hover:bg-muted-hover hover:text-foreground-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-border active:scale-90 disabled:pointer-events-none disabled:text-foreground-faint',\n                  compact ? 'size-8' : 'size-9',\n                )}\n              >\n                <MaterialSymbol icon=\"arrow_back\" size={compact ? 18 : 20} />\n              </ControlledButton>\n            </ControlledTooltip>\n          )}\n\n          {rendersTitleImage && titleImage ? (\n            <img\n              src={titleImage.src}\n              alt={titleImage.alt}\n              onError={() => setFailedTitleImageSrc(titleImage.src)}\n              className={classNames(\n                'shrink-0 border border-border object-cover',\n                compact ? 'size-8 rounded-lg' : 'size-10 rounded-xl',\n                titleImage.className,\n              )}\n            />\n          ) : (\n            resolvedTitleIcon && (\n              <span\n                className={classNames(\n                  'flex shrink-0 items-center justify-center',\n                  compact ? 'size-8 rounded-lg' : 'size-10 rounded-xl',\n                  titleIconClassName ?? 'bg-brand-soft text-brand-emphasis',\n                )}\n              >\n                <MaterialSymbol icon={resolvedTitleIcon} size={compact ? 18 : 22} fill className=\"text-inherit\" />\n              </span>\n            )\n          )}\n\n          <div className=\"flex min-w-0 flex-1 flex-col\">\n            {eyebrow && (\n              <span className=\"mb-0.5 text-xs font-semibold uppercase tracking-widest text-foreground-faint\">\n                {eyebrow}\n              </span>\n            )}\n\n            <div className=\"flex min-w-0 items-center gap-2\">\n              {titleContent ?? (\n                <span\n                  className={classNames(\n                    'min-w-0 truncate',\n                    compact\n                      ? 'text-sm font-semibold text-foreground'\n                      : 'text-lg font-bold tracking-tight text-foreground laptop:text-xl',\n                    titleClassName,\n                  )}\n                >\n                  {capitalizeTitle ? capitalizeAllLetters(title) : title}\n                </span>\n              )}\n\n              {titleSlot}\n            </div>\n\n            {headline && <span className=\"mt-0.5 text-xs text-foreground-subtle\">{headline}</span>}\n\n            {subtitleSlot && <div className=\"mt-1 flex min-w-0 flex-col gap-1\">{subtitleSlot}</div>}\n          </div>\n        </div>\n\n        {slot && <div className=\"ml-auto flex shrink-0 flex-wrap items-center justify-end gap-2\">{slot}</div>}\n      </div>\n      {showDivider && !canFloat && (title.length > 0 || Boolean(titleContent)) && (\n        <hr className={classNames('border-border-subtle', compact ? 'mb-2 mt-2' : 'mb-2 mt-3')} />\n      )}\n    </div>\n  );\n};\n\nexport default PageTitle;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"PageTitle.js","sources":["../../../src/components/Navigation/PageTitle.tsx"],"sourcesContent":["import { ReactNode, RefObject, useEffect, useMemo, useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\nimport { twMerge } from 'tailwind-merge';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport { capitalizeAllLetters } from '@/helpers/stringHelpers';\n\nimport { MaterialSymbol, SymbolCodepoints } from '../UI/MaterialSymbol';\n\nimport ControlledBreadcrumb from './ControlledBreadcrumb';\nimport { PageTitleCollapseProvider } from './PageTitleCollapseContext';\nimport { usePageTitleNavigation } from './PageTitleNavigationContext';\nimport { useUiNavigation } from './UiNavigationContext';\n\nexport interface IPageTitleImage {\n  src: string;\n  /** The image REPLACES the icon chip, so it carries the accessible name of what it depicts. */\n  alt: string;\n  /** Escape hatch for shape and size, e.g. `rounded-full` for an avatar. Merged last, so it wins. */\n  className?: string;\n}\n\nconst MEDIA_BOX_CLASSNAME: Record<'sm' | 'md' | 'lg', string> = {\n  sm: 'size-8 rounded-lg',\n  md: 'size-10 rounded-xl',\n  lg: 'size-20 rounded-xl',\n};\n\nconst MEDIA_ICON_SIZE: Record<'sm' | 'md' | 'lg', number> = { sm: 18, md: 22, lg: 34 };\n\n/** One step down, so a record cover stays recognisable in the collapsed header instead of vanishing. */\nconst COLLAPSED_MEDIA_SIZE: Record<'sm' | 'md' | 'lg', 'sm' | 'md' | 'lg'> = { sm: 'sm', md: 'sm', lg: 'md' };\n\n/**\n * Thresholds for the sibling-container case, in px. They differ on purpose: collapsing and expanding\n * at the same position makes the header flicker for a whole gesture when a scroll lands on it.\n */\nconst COLLAPSE_AT_SCROLL = 48;\nconst EXPAND_AT_SCROLL = 16;\n\n/** Tolerance for the pinned test: sub-pixel layout would otherwise flip the state on its own. */\nconst PINNED_TOLERANCE_PX = 1;\n\nconst findScrollParent = (node: HTMLElement | null): HTMLElement | null => {\n  let current = node?.parentElement ?? null;\n  while (current) {\n    const { overflowY } = getComputedStyle(current);\n    if (overflowY === 'auto' || overflowY === 'scroll') return current;\n    current = current.parentElement;\n  }\n  return null;\n};\n\ninterface IPageTitleProps {\n  title?: string;\n  /** Substitui o span do título por conteúdo rico (ex.: nome editável inline da ficha técnica). */\n  titleContent?: ReactNode;\n  /** Rótulo pequeno em caixa alta acima do título (ex.: \"FICHA TÉCNICA\"). */\n  eyebrow?: string;\n  /** Conteúdo abaixo da linha do título, dentro da coluna de texto (tags, steppers). */\n  subtitleSlot?: ReactNode;\n  slot?: ReactNode;\n  /**\n   * Where the `slot` sits against the text column. `center` (default) is right for a one-line title with\n   * a couple of buttons; `start` pins it to the TOP of the header, which is what a tall identification\n   * block needs so its actions line up with the eyebrow instead of floating at the middle.\n   */\n  slotAlign?: 'center' | 'start';\n  /** Conteúdo renderizado à ESQUERDA, imediatamente ao lado do título (o `slot` fica à direita). */\n  titleSlot?: ReactNode;\n  /** Conteúdo renderizado ANTES do ícone/título (ex.: botão voltar customizado, alvo de drop). */\n  leadingSlot?: ReactNode;\n  /** Trilha custom acima do título (use `ControlledBreadcrumb`). Sem ela, a trilha é derivada do menu. */\n  breadcrumb?: ReactNode;\n  /** Deriva a trilha automaticamente da árvore de navegação quando `breadcrumb` não é passado. */\n  autoBreadcrumb?: boolean;\n  /** Ícone em chip à esquerda do título. Sem ele, herda o ícone do item de menu da rota atual. */\n  titleIcon?: SymbolCodepoints;\n  titleIconClassName?: string;\n  /**\n   * An image in the icon chip's place, at the same size and radius (e.g. the product cover on a\n   * datasheet header). A src that fails to load falls back to the icon instead of leaving a broken\n   * image in the header.\n   */\n  titleImage?: IPageTitleImage;\n  /**\n   * Size of the leading media (icon chip or `titleImage`). `md` is the 2.5rem chip every page uses;\n   * `lg` is the 5rem cover of a RECORD header, where the image identifies the record itself (a product\n   * datasheet). `compact` already implies `sm`, so pass this only to go bigger.\n   */\n  titleMediaSize?: 'sm' | 'md' | 'lg';\n  /**\n   * The header pins itself to the top of its scroll container and, once pinned, shrinks: the\n   * breadcrumb, the eyebrow, the headline and the `subtitleSlot` go, the media drops one size (the\n   * record's picture stays, at the icon chip's size) and the title takes its compact type. The back\n   * button and the `slot` never move.\n   *\n   * EXPANDED, IT RENDERS EXACTLY WHAT IT RENDERED BEFORE THIS EXISTED: no wrapper node, no extra\n   * element, no background. That is deliberate. The first version added a sentinel node as a sibling\n   * of the header, and since almost every page wraps it in a `flex flex-col gap-y-*`, that node\n   * became a flex item and every page grew a stray gap.\n   *\n   * On by default. Turn it off for a header that must keep its full identity on screen, or one that\n   * is not at the top of a scrolling page (inside a card, a dialog or a print sheet).\n   */\n  collapseOnScroll?: boolean;\n  /**\n   * The element whose scrolling drives the collapse. Only needed when the page's content scrolls in a\n   * container that is NOT an ancestor of the header, which is what a split layout does (a fixed header\n   * over an independently scrolling body). Left out, the header finds its own scrollable ancestor.\n   */\n  collapseScrollRef?: RefObject<HTMLElement | null>;\n  /** Deriva o ícone automaticamente do menu quando `titleIcon` não é passado. */\n  autoIcon?: boolean;\n  /** Variante compacta: título menor, para headers de navegação interna (ex.: pastas). */\n  compact?: boolean;\n  /** Desligue para títulos digitados pelo usuário (nomes de pastas etc.), que não podem ter a caixa alterada. */\n  capitalizeTitle?: boolean;\n  /** Desligue quando o header é seguido imediatamente por tabs ou outra divisão própria. */\n  showDivider?: boolean;\n  canBack?: boolean;\n  canBackTo?: string;\n  canFloat?: boolean;\n  headline?: string;\n  className?: string;\n  titleClassName?: string;\n  onBackClick?: () => void;\n  disableBack?: boolean;\n}\n\nconst PageTitle: React.FC<IPageTitleProps> = ({\n  canBack = false,\n  canFloat = false,\n  canBackTo,\n  title = '',\n  titleContent,\n  eyebrow,\n  subtitleSlot,\n  headline,\n  slot,\n  slotAlign = 'center',\n  titleSlot,\n  leadingSlot,\n  breadcrumb,\n  autoBreadcrumb = true,\n  titleIcon,\n  titleIconClassName,\n  titleImage,\n  titleMediaSize,\n  collapseOnScroll = true,\n  collapseScrollRef,\n  autoIcon = true,\n  compact = false,\n  capitalizeTitle = true,\n  showDivider = true,\n  className,\n  titleClassName,\n  onBackClick,\n  disableBack = false,\n}) => {\n  const { t } = useTranslation('ui');\n  const { navigate, goBack, location } = useUiNavigation();\n\n  const isFirefox = () => typeof navigator !== 'undefined' && navigator.userAgent.toLowerCase().includes('firefox');\n\n  const handleBack = () => {\n    if (disableBack) return;\n\n    if (onBackClick) {\n      onBackClick();\n    } else if (canBackTo) {\n      navigate(canBackTo);\n    } else {\n      goBack();\n    }\n  };\n\n  const { resolveTrail } = usePageTitleNavigation();\n\n  const menuTrail = useMemo(() => {\n    const needsTrail = (autoBreadcrumb && !breadcrumb && !canFloat) || (autoIcon && !titleIcon && !titleImage);\n    return needsTrail ? resolveTrail(location.pathname) : [];\n  }, [autoBreadcrumb, breadcrumb, canFloat, autoIcon, titleIcon, titleImage, location.pathname, resolveTrail]);\n\n  const resolvedBreadcrumb =\n    breadcrumb ??\n    (autoBreadcrumb && !canFloat && menuTrail.length >= 2 ? (\n      <ControlledBreadcrumb\n        ariaLabel={t('pageTitle.breadcrumbLabel')}\n        items={menuTrail.map((item, index) => ({\n          key: item.key,\n          label: item.label,\n          to: index < menuTrail.length - 1 ? item.to : undefined,\n        }))}\n      />\n    ) : undefined);\n\n  const resolvedTitleIcon = titleIcon ?? (autoIcon ? menuTrail[menuTrail.length - 1]?.icon : undefined);\n\n  // Holds the src that failed rather than a boolean, so pointing at another image retries on its own.\n  const [failedTitleImageSrc, setFailedTitleImageSrc] = useState<string | null>(null);\n  const rendersTitleImage = Boolean(titleImage?.src) && titleImage?.src !== failedTitleImageSrc;\n\n  const rootRef = useRef<HTMLDivElement>(null);\n  const [isCollapsed, setIsCollapsed] = useState(false);\n  // A floating header is already pinned by its own mechanism, and collapsing it would fight it.\n  const collapses = collapseOnScroll && !canFloat;\n\n  useEffect(() => {\n    if (!collapses) {\n      setIsCollapsed(false);\n      return;\n    }\n\n    const root = rootRef.current;\n    if (!root) return;\n\n    const container = collapseScrollRef?.current ?? findScrollParent(root);\n    if (!container) return;\n\n    // Two shapes, one listener. When the container is an ANCESTOR the header travels with the page,\n    // so being pinned is a question about its position; when it is a SIBLING (a split layout, where\n    // the header never moves) its position says nothing and the scroll offset is all there is.\n    const scrollsUnderTheHeader = container.contains(root);\n    let frame = 0;\n\n    const evaluate = () => {\n      frame = 0;\n\n      if (!scrollsUnderTheHeader) {\n        const offset = container.scrollTop;\n        setIsCollapsed((previous) => (previous ? offset > EXPAND_AT_SCROLL : offset >= COLLAPSE_AT_SCROLL));\n        return;\n      }\n\n      // `top` comes from the sticky class, so the pinned line is read from the DOM instead of being\n      // duplicated here: the shell decides it, and a host without the shell pins at 0.\n      const stickyTop = Number.parseFloat(getComputedStyle(root).top);\n      const pinnedLine = container.getBoundingClientRect().top + (Number.isNaN(stickyTop) ? 0 : stickyTop);\n      setIsCollapsed(root.getBoundingClientRect().top <= pinnedLine + PINNED_TOLERANCE_PX);\n    };\n\n    const handleScroll = () => {\n      if (!frame) frame = requestAnimationFrame(evaluate);\n    };\n\n    evaluate();\n    container.addEventListener('scroll', handleScroll, { passive: true });\n    return () => {\n      container.removeEventListener('scroll', handleScroll);\n      if (frame) cancelAnimationFrame(frame);\n    };\n  }, [collapses, collapseScrollRef]);\n\n  const isCompactLayout = compact || isCollapsed;\n  const resolvedMediaSize = titleMediaSize ?? (compact ? 'sm' : 'md');\n  const mediaSize = isCollapsed ? COLLAPSED_MEDIA_SIZE[resolvedMediaSize] : resolvedMediaSize;\n  const mediaBoxClassName = MEDIA_BOX_CLASSNAME[mediaSize];\n  const mediaIconSize = MEDIA_ICON_SIZE[mediaSize];\n  const mediaTransitionClassName = 'transition-[width,height] duration-base ease-enter';\n  const collapseValue = useMemo(() => ({ isCollapsed }), [isCollapsed]);\n\n  return (\n    <PageTitleCollapseProvider value={collapseValue}>\n      <div\n        ref={rootRef}\n        className={classNames(\n          'flex flex-col',\n          {\n            'zIndexMax fixed top-16 mr-7': canFloat,\n            // Pins under the app header, which publishes its own height; hosts without the shell stick\n            // at the top of their own scroll container. `sticky` is inert until it pins, so this costs\n            // nothing on a page that does not scroll.\n            'sticky top-[var(--page-header-sticky-top,0px)] z-30': collapses,\n            // The page's own background, and nothing else. Pinned, the header has to be opaque or the\n            // content slides visibly through the title; but it is not a PANEL, so no glass, no border\n            // and no shadow, which read as a second surface appearing out of nowhere mid-scroll.\n            'bg-canvas': collapses && isCollapsed,\n          },\n          className,\n        )}\n        style={{\n          width: canFloat ? (isFirefox() ? '-moz-available' : '-webkit-fill-available') : '100%',\n        }}\n      >\n        {resolvedBreadcrumb && !isCollapsed && <div className=\"mb-2 shrink-0\">{resolvedBreadcrumb}</div>}\n\n        <div\n          className={classNames('flex w-full flex-wrap justify-between gap-x-4 gap-y-2', {\n            'items-start': slotAlign === 'start',\n            'items-center': slotAlign !== 'start',\n            'bg-surface py-5': canFloat,\n          })}\n        >\n          <div className={classNames('flex min-w-0 flex-1 basis-60 items-center', isCompactLayout ? 'gap-2' : 'gap-3')}>\n            {leadingSlot}\n\n            {canBack && (\n              <ControlledTooltip content={t('actions.back')}>\n                <ControlledButton\n                  defaultHtmlButton\n                  onClick={handleBack}\n                  disabled={disableBack}\n                  className={classNames(\n                    'flex shrink-0 items-center justify-center rounded-full text-foreground-subtle transition-interactive duration-base ease-enter hover:bg-muted-hover hover:text-foreground-muted focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-brand-border active:scale-90 disabled:pointer-events-none disabled:text-foreground-faint',\n                    isCompactLayout ? 'size-8' : 'size-9',\n                  )}\n                >\n                  <MaterialSymbol icon=\"arrow_back\" size={isCompactLayout ? 18 : 20} />\n                </ControlledButton>\n              </ControlledTooltip>\n            )}\n\n            {rendersTitleImage && titleImage ? (\n              <img\n                src={titleImage.src}\n                alt={titleImage.alt}\n                onError={() => setFailedTitleImageSrc(titleImage.src)}\n                className={twMerge(\n                  'shrink-0 border border-border object-cover',\n                  mediaTransitionClassName,\n                  mediaBoxClassName,\n                  titleImage.className,\n                )}\n              />\n            ) : (\n              resolvedTitleIcon && (\n                <span\n                  className={twMerge(\n                    'flex shrink-0 items-center justify-center',\n                    mediaTransitionClassName,\n                    mediaBoxClassName,\n                    titleIconClassName ?? 'bg-brand-soft text-brand-emphasis',\n                  )}\n                >\n                  <MaterialSymbol icon={resolvedTitleIcon} size={mediaIconSize} fill className=\"text-inherit\" />\n                </span>\n              )\n            )}\n\n            <div className=\"flex min-w-0 flex-1 flex-col\">\n              {eyebrow && !isCollapsed && (\n                <span className=\"mb-0.5 text-xs font-semibold uppercase tracking-widest text-foreground-faint\">\n                  {eyebrow}\n                </span>\n              )}\n\n              <div className=\"flex min-w-0 items-center gap-2\">\n                {titleContent ?? (\n                  <span\n                    className={classNames(\n                      'min-w-0 truncate',\n                      isCompactLayout\n                        ? 'text-sm font-semibold text-foreground'\n                        : 'text-lg font-bold tracking-tight text-foreground laptop:text-xl',\n                      titleClassName,\n                    )}\n                  >\n                    {capitalizeTitle ? capitalizeAllLetters(title) : title}\n                  </span>\n                )}\n\n                {titleSlot}\n              </div>\n\n              {headline && !isCollapsed && <span className=\"mt-0.5 text-xs text-foreground-subtle\">{headline}</span>}\n\n              {subtitleSlot && !isCollapsed && <div className=\"mt-1 flex min-w-0 flex-col gap-1\">{subtitleSlot}</div>}\n            </div>\n          </div>\n\n          {slot && (\n            <div\n              className={classNames(\n                'ml-auto flex shrink-0 flex-wrap justify-end gap-2',\n                slotAlign === 'start' ? 'items-start' : 'items-center',\n              )}\n            >\n              {slot}\n            </div>\n          )}\n        </div>\n        {showDivider && !canFloat && (title.length > 0 || Boolean(titleContent)) && (\n          <hr className={classNames('border-border-subtle', isCompactLayout ? 'mb-2 mt-2' : 'mb-2 mt-3')} />\n        )}\n      </div>\n    </PageTitleCollapseProvider>\n  );\n};\n\nexport default PageTitle;\n"],"names":[],"mappings":"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"}

package/dist/components/Navigation/PageTitleCollapseContext.d.ts

@@ -0,0 +1,13 @@
+interface IPageTitleCollapseValue {
+    /** `true` once the page under the header has been scrolled and the header shrank. */
+    isCollapsed: boolean;
+}
+export declare const PageTitleCollapseProvider: import('react').Provider<IPageTitleCollapseValue>;
+/**
+ * Reads the collapsed state of the PageTitle a node is rendered inside. It exists for the rich
+ * `titleContent` of a record header, which PageTitle cannot restyle on its own: the header owns
+ * that markup, so it is the one that decides how its title behaves when the header shrinks.
+ * Outside a PageTitle it answers `false`, so a component can be shared by both surfaces.
+ */
+export declare const usePageTitleCollapsed: () => boolean;
+export {};

package/dist/components/Navigation/PageTitleCollapseContext.js

@@ -0,0 +1,9 @@
+import { createContext, useContext } from "react";
+const PageTitleCollapseContext = createContext({ isCollapsed: false });
+const PageTitleCollapseProvider = PageTitleCollapseContext.Provider;
+const usePageTitleCollapsed = () => useContext(PageTitleCollapseContext).isCollapsed;
+export {
+  PageTitleCollapseProvider,
+  usePageTitleCollapsed
+};
+//# sourceMappingURL=PageTitleCollapseContext.js.map

package/dist/components/Navigation/PageTitleCollapseContext.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageTitleCollapseContext.js","sources":["../../../src/components/Navigation/PageTitleCollapseContext.tsx"],"sourcesContent":["import { createContext, useContext } from 'react';\n\ninterface IPageTitleCollapseValue {\n  /** `true` once the page under the header has been scrolled and the header shrank. */\n  isCollapsed: boolean;\n}\n\nconst PageTitleCollapseContext = createContext<IPageTitleCollapseValue>({ isCollapsed: false });\n\nexport const PageTitleCollapseProvider = PageTitleCollapseContext.Provider;\n\n/**\n * Reads the collapsed state of the PageTitle a node is rendered inside. It exists for the rich\n * `titleContent` of a record header, which PageTitle cannot restyle on its own: the header owns\n * that markup, so it is the one that decides how its title behaves when the header shrinks.\n * Outside a PageTitle it answers `false`, so a component can be shared by both surfaces.\n */\nexport const usePageTitleCollapsed = (): boolean => useContext(PageTitleCollapseContext).isCollapsed;\n"],"names":[],"mappings":";AAOA,MAAM,2BAA2B,cAAuC,EAAE,aAAa,OAAO;AAEvF,MAAM,4BAA4B,yBAAyB;AAQ3D,MAAM,wBAAwB,MAAe,WAAW,wBAAwB,EAAE;"}

package/dist/components/Shell/AppShell.js

@@ -85,7 +85,7 @@ const AppShell = ({
               id: "scrollableDiv",
               ref: scrollRef,
               className: "z-30 h-screen w-full px-4 pt-24 tablet:px-6",
-              style: { overflow: "auto" },
+              style: { overflow: "auto", ["--page-header-sticky-top"]: "4rem" },
               children
             }
           )

package/dist/components/Shell/AppShell.js.map

@@ -1 +1 @@
-{"version":3,"file":"AppShell.js","sources":["../../../src/components/Shell/AppShell.tsx"],"sourcesContent":["import { ReactNode, useEffect, useRef } from 'react';\nimport classNames from 'classnames';\n\nimport { useUiNavigation } from '@/components/Navigation/UiNavigationContext';\n\nimport AppHeader from './AppHeader';\nimport AppSidebar from './AppSidebar';\nimport { ISidebarMenuItem } from './SidebarMenu';\nimport { useSidebarState } from './useSidebarState';\n\nimport '../../styles/sidebar.css';\n\ninterface IAppShellProps {\n  items: Array<ISidebarMenuItem>;\n  homePath: string;\n  logo?: ReactNode;\n  toolsSlot?: ReactNode;\n  controlsSlot?: ReactNode;\n  userMenuSlot?: ReactNode;\n  /** Sidebar footer sign-out row; hidden when absent. */\n  onLogout?: () => void;\n  children: ReactNode;\n}\n\n/**\n * The uMode application chrome: fixed glass header, rail/dock/hover sidebar (pin persisted\n * through uiPreferences, Ctrl+\\ shortcut) and the scroll container every page renders into.\n * Everything app-shaped (menu items, tools, account surface, logout) arrives as props/slots.\n */\nconst AppShell: React.FC<IAppShellProps> = ({\n  items,\n  homePath,\n  logo,\n  toolsSlot,\n  controlsSlot,\n  userMenuSlot,\n  onLogout,\n  children,\n}) => {\n  const { location } = useUiNavigation();\n  const scrollRef = useRef<HTMLDivElement>(null);\n\n  const {\n    isMobile,\n    isVisible,\n    isDocked,\n    isOverlayOnMobile,\n    showRail,\n    toggleLabelKey,\n    togglePrimary,\n    onHoverEnter,\n    onHoverLeave,\n    closeMobileDrawer,\n  } = useSidebarState();\n\n  useEffect(() => {\n    scrollRef.current?.scrollTo({ top: 0, behavior: 'smooth' });\n  }, [location.pathname]);\n\n  return (\n    <div className=\"h-screen w-full bg-surface\">\n      <AppHeader\n        toggleSidebar={togglePrimary}\n        isSidebarOpen={isDocked}\n        toggleLabelKey={toggleLabelKey}\n        homePath={homePath}\n        logo={logo}\n        toolsSlot={toolsSlot}\n        controlsSlot={controlsSlot}\n        userMenuSlot={userMenuSlot}\n        onHoverEnter={onHoverEnter}\n        onHoverLeave={onHoverLeave}\n      />\n\n      <main\n        className={classNames('sidebar-content flex h-screen w-full', {\n          'is-rail': !isMobile && !isDocked,\n          'is-mobile': isMobile,\n        })}\n      >\n        {isOverlayOnMobile && (\n          <div\n            aria-hidden\n            className=\"fixed inset-0 z-40 bg-scrim motion-reduce:transition-none\"\n            onClick={closeMobileDrawer}\n          />\n        )}\n\n        <AppSidebar\n          items={items}\n          isMobile={isMobile}\n          isVisible={isVisible}\n          collapsed={showRail}\n          isFloating={!isMobile && !showRail && !isDocked}\n          onHoverEnter={onHoverEnter}\n          onHoverLeave={onHoverLeave}\n          onNavigate={isMobile ? closeMobileDrawer : undefined}\n          onLogout={onLogout}\n        />\n\n        <div\n          id=\"scrollableDiv\"\n          ref={scrollRef}\n          className=\"z-30 h-screen w-full px-4 pt-24 tablet:px-6\"\n          style={{ overflow: 'auto' }}\n        >\n          {children}\n        </div>\n      </main>\n    </div>\n  );\n};\n\nexport default AppShell;\n"],"names":[],"mappings":";;;;;;;;AA6BA,MAAM,WAAqC,CAAC;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,SAAA,IAAa,gBAAA;AACrB,QAAM,YAAY,OAAuB,IAAI;AAE7C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE,gBAAA;AAEJ,YAAU,MAAM;AACd,cAAU,SAAS,SAAS,EAAE,KAAK,GAAG,UAAU,UAAU;AAAA,EAC5D,GAAG,CAAC,SAAS,QAAQ,CAAC;AAEtB,SACE,qBAAC,OAAA,EAAI,WAAU,8BACb,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAe;AAAA,QACf,eAAe;AAAA,QACf;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IAAA;AAAA,IAGF;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,WAAW,wCAAwC;AAAA,UAC5D,WAAW,CAAC,YAAY,CAAC;AAAA,UACzB,aAAa;AAAA,QAAA,CACd;AAAA,QAEA,UAAA;AAAA,UAAA,qBACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,eAAW;AAAA,cACX,WAAU;AAAA,cACV,SAAS;AAAA,YAAA;AAAA,UAAA;AAAA,UAIb;AAAA,YAAC;AAAA,YAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cACA,WAAW;AAAA,cACX,YAAY,CAAC,YAAY,CAAC,YAAY,CAAC;AAAA,cACvC;AAAA,cACA;AAAA,cACA,YAAY,WAAW,oBAAoB;AAAA,cAC3C;AAAA,YAAA;AAAA,UAAA;AAAA,UAGF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAG;AAAA,cACH,KAAK;AAAA,cACL,WAAU;AAAA,cACV,OAAO,EAAE,UAAU,OAAA;AAAA,cAElB;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}
+{"version":3,"file":"AppShell.js","sources":["../../../src/components/Shell/AppShell.tsx"],"sourcesContent":["import { ReactNode, useEffect, useRef } from 'react';\nimport classNames from 'classnames';\n\nimport { useUiNavigation } from '@/components/Navigation/UiNavigationContext';\n\nimport AppHeader from './AppHeader';\nimport AppSidebar from './AppSidebar';\nimport { ISidebarMenuItem } from './SidebarMenu';\nimport { useSidebarState } from './useSidebarState';\n\nimport '../../styles/sidebar.css';\n\ninterface IAppShellProps {\n  items: Array<ISidebarMenuItem>;\n  homePath: string;\n  logo?: ReactNode;\n  toolsSlot?: ReactNode;\n  controlsSlot?: ReactNode;\n  userMenuSlot?: ReactNode;\n  /** Sidebar footer sign-out row; hidden when absent. */\n  onLogout?: () => void;\n  children: ReactNode;\n}\n\n/**\n * The uMode application chrome: fixed glass header, rail/dock/hover sidebar (pin persisted\n * through uiPreferences, Ctrl+\\ shortcut) and the scroll container every page renders into.\n * Everything app-shaped (menu items, tools, account surface, logout) arrives as props/slots.\n */\nconst AppShell: React.FC<IAppShellProps> = ({\n  items,\n  homePath,\n  logo,\n  toolsSlot,\n  controlsSlot,\n  userMenuSlot,\n  onLogout,\n  children,\n}) => {\n  const { location } = useUiNavigation();\n  const scrollRef = useRef<HTMLDivElement>(null);\n\n  const {\n    isMobile,\n    isVisible,\n    isDocked,\n    isOverlayOnMobile,\n    showRail,\n    toggleLabelKey,\n    togglePrimary,\n    onHoverEnter,\n    onHoverLeave,\n    closeMobileDrawer,\n  } = useSidebarState();\n\n  useEffect(() => {\n    scrollRef.current?.scrollTo({ top: 0, behavior: 'smooth' });\n  }, [location.pathname]);\n\n  return (\n    <div className=\"h-screen w-full bg-surface\">\n      <AppHeader\n        toggleSidebar={togglePrimary}\n        isSidebarOpen={isDocked}\n        toggleLabelKey={toggleLabelKey}\n        homePath={homePath}\n        logo={logo}\n        toolsSlot={toolsSlot}\n        controlsSlot={controlsSlot}\n        userMenuSlot={userMenuSlot}\n        onHoverEnter={onHoverEnter}\n        onHoverLeave={onHoverLeave}\n      />\n\n      <main\n        className={classNames('sidebar-content flex h-screen w-full', {\n          'is-rail': !isMobile && !isDocked,\n          'is-mobile': isMobile,\n        })}\n      >\n        {isOverlayOnMobile && (\n          <div\n            aria-hidden\n            className=\"fixed inset-0 z-40 bg-scrim motion-reduce:transition-none\"\n            onClick={closeMobileDrawer}\n          />\n        )}\n\n        <AppSidebar\n          items={items}\n          isMobile={isMobile}\n          isVisible={isVisible}\n          collapsed={showRail}\n          isFloating={!isMobile && !showRail && !isDocked}\n          onHoverEnter={onHoverEnter}\n          onHoverLeave={onHoverLeave}\n          onNavigate={isMobile ? closeMobileDrawer : undefined}\n          onLogout={onLogout}\n        />\n\n        <div\n          id=\"scrollableDiv\"\n          ref={scrollRef}\n          className=\"z-30 h-screen w-full px-4 pt-24 tablet:px-6\"\n          // `--page-header-sticky-top` is where a PageTitle pins itself when the page scrolls: the\n          // height of the fixed app header, so the two never overlap. Declared here because the shell\n          // owns that height; a host without the shell gets the fallback of 0.\n          style={{ overflow: 'auto', ['--page-header-sticky-top' as string]: '4rem' }}\n        >\n          {children}\n        </div>\n      </main>\n    </div>\n  );\n};\n\nexport default AppShell;\n"],"names":[],"mappings":";;;;;;;;AA6BA,MAAM,WAAqC,CAAC;AAAA,EAC1C;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,MAAM;AACJ,QAAM,EAAE,SAAA,IAAa,gBAAA;AACrB,QAAM,YAAY,OAAuB,IAAI;AAE7C,QAAM;AAAA,IACJ;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,IACA;AAAA,EAAA,IACE,gBAAA;AAEJ,YAAU,MAAM;AACd,cAAU,SAAS,SAAS,EAAE,KAAK,GAAG,UAAU,UAAU;AAAA,EAC5D,GAAG,CAAC,SAAS,QAAQ,CAAC;AAEtB,SACE,qBAAC,OAAA,EAAI,WAAU,8BACb,UAAA;AAAA,IAAA;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,eAAe;AAAA,QACf,eAAe;AAAA,QACf;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,QACA;AAAA,MAAA;AAAA,IAAA;AAAA,IAGF;AAAA,MAAC;AAAA,MAAA;AAAA,QACC,WAAW,WAAW,wCAAwC;AAAA,UAC5D,WAAW,CAAC,YAAY,CAAC;AAAA,UACzB,aAAa;AAAA,QAAA,CACd;AAAA,QAEA,UAAA;AAAA,UAAA,qBACC;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,eAAW;AAAA,cACX,WAAU;AAAA,cACV,SAAS;AAAA,YAAA;AAAA,UAAA;AAAA,UAIb;AAAA,YAAC;AAAA,YAAA;AAAA,cACC;AAAA,cACA;AAAA,cACA;AAAA,cACA,WAAW;AAAA,cACX,YAAY,CAAC,YAAY,CAAC,YAAY,CAAC;AAAA,cACvC;AAAA,cACA;AAAA,cACA,YAAY,WAAW,oBAAoB;AAAA,cAC3C;AAAA,YAAA;AAAA,UAAA;AAAA,UAGF;AAAA,YAAC;AAAA,YAAA;AAAA,cACC,IAAG;AAAA,cACH,KAAK;AAAA,cACL,WAAU;AAAA,cAIV,OAAO,EAAE,UAAU,QAAQ,CAAC,0BAAoC,GAAG,OAAA;AAAA,cAElE;AAAA,YAAA;AAAA,UAAA;AAAA,QACH;AAAA,MAAA;AAAA,IAAA;AAAA,EACF,GACF;AAEJ;"}

package/dist/components/UI/ControlledCollapse.d.ts

@@ -8,6 +8,11 @@ interface IControlledCollapseProps {
  * Height is measured from the content node and written to the wrapper, so the transition
  * always has a numeric start and end. The observer watches the CONTENT, whose height is
  * unconstrained, so updating the wrapper cannot feed back into it.
+ *
+ * A closed collapse is `inert`: `height: 0` with `overflow: hidden` still leaves whatever is
+ * inside reachable by Tab, so without it a keyboard lands on controls nobody can see, and
+ * `aria-hidden` around focusable content is itself an ARIA violation. Set through the DOM
+ * because React 18 does not type the attribute.
  */
 declare const ControlledCollapse: React.FC<IControlledCollapseProps>;
 export default ControlledCollapse;

package/dist/components/UI/ControlledCollapse.js

@@ -2,8 +2,15 @@ import { jsx } from "react/jsx-runtime";
 import { useRef, useState, useEffect } from "react";
 import { twMerge } from "tailwind-merge";
 const ControlledCollapse = ({ open, children, className }) => {
+  const wrapperRef = useRef(null);
   const contentRef = useRef(null);
   const [height, setHeight] = useState(0);
+  useEffect(() => {
+    const wrapper = wrapperRef.current;
+    if (!wrapper) return;
+    if (open) wrapper.removeAttribute("inert");
+    else wrapper.setAttribute("inert", "");
+  }, [open]);
   useEffect(() => {
     const content = contentRef.current;
     if (!content) return void 0;
@@ -19,6 +26,7 @@ const ControlledCollapse = ({ open, children, className }) => {
   return /* @__PURE__ */ jsx(
     "div",
     {
+      ref: wrapperRef,
       style: { height },
       "aria-hidden": !open,
       className: twMerge("overflow-hidden transition-[height] duration-slow ease-enter", className),

package/dist/components/UI/ControlledCollapse.js.map

@@ -1 +1 @@
-{"version":3,"file":"ControlledCollapse.js","sources":["../../../src/components/UI/ControlledCollapse.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { twMerge } from 'tailwind-merge';\n\ninterface IControlledCollapseProps {\n  open: boolean;\n  children: React.ReactNode;\n  className?: string;\n}\n\n/**\n * Height is measured from the content node and written to the wrapper, so the transition\n * always has a numeric start and end. The observer watches the CONTENT, whose height is\n * unconstrained, so updating the wrapper cannot feed back into it.\n */\nconst ControlledCollapse: React.FC<IControlledCollapseProps> = ({ open, children, className }) => {\n  const contentRef = useRef<HTMLDivElement>(null);\n  const [height, setHeight] = useState(0);\n\n  useEffect(() => {\n    const content = contentRef.current;\n    if (!content) return undefined;\n\n    if (!open) {\n      setHeight(0);\n      return undefined;\n    }\n\n    setHeight(content.scrollHeight);\n\n    const observer = new ResizeObserver(() => setHeight(content.scrollHeight));\n    observer.observe(content);\n\n    return () => observer.disconnect();\n  }, [open]);\n\n  return (\n    <div\n      style={{ height }}\n      aria-hidden={!open}\n      className={twMerge('overflow-hidden transition-[height] duration-slow ease-enter', className)}\n    >\n      <div ref={contentRef}>{children}</div>\n    </div>\n  );\n};\n\nexport default ControlledCollapse;\n"],"names":[],"mappings":";;;AAcA,MAAM,qBAAyD,CAAC,EAAE,MAAM,UAAU,gBAAgB;AAChG,QAAM,aAAa,OAAuB,IAAI;AAC9C,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,CAAC;AAEtC,YAAU,MAAM;AACd,UAAM,UAAU,WAAW;AAC3B,QAAI,CAAC,QAAS,QAAO;AAErB,QAAI,CAAC,MAAM;AACT,gBAAU,CAAC;AACX,aAAO;AAAA,IACT;AAEA,cAAU,QAAQ,YAAY;AAE9B,UAAM,WAAW,IAAI,eAAe,MAAM,UAAU,QAAQ,YAAY,CAAC;AACzE,aAAS,QAAQ,OAAO;AAExB,WAAO,MAAM,SAAS,WAAA;AAAA,EACxB,GAAG,CAAC,IAAI,CAAC;AAET,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,OAAO,EAAE,OAAA;AAAA,MACT,eAAa,CAAC;AAAA,MACd,WAAW,QAAQ,gEAAgE,SAAS;AAAA,MAE5F,UAAA,oBAAC,OAAA,EAAI,KAAK,YAAa,SAAA,CAAS;AAAA,IAAA;AAAA,EAAA;AAGtC;"}
+{"version":3,"file":"ControlledCollapse.js","sources":["../../../src/components/UI/ControlledCollapse.tsx"],"sourcesContent":["import React, { useEffect, useRef, useState } from 'react';\nimport { twMerge } from 'tailwind-merge';\n\ninterface IControlledCollapseProps {\n  open: boolean;\n  children: React.ReactNode;\n  className?: string;\n}\n\n/**\n * Height is measured from the content node and written to the wrapper, so the transition\n * always has a numeric start and end. The observer watches the CONTENT, whose height is\n * unconstrained, so updating the wrapper cannot feed back into it.\n *\n * A closed collapse is `inert`: `height: 0` with `overflow: hidden` still leaves whatever is\n * inside reachable by Tab, so without it a keyboard lands on controls nobody can see, and\n * `aria-hidden` around focusable content is itself an ARIA violation. Set through the DOM\n * because React 18 does not type the attribute.\n */\nconst ControlledCollapse: React.FC<IControlledCollapseProps> = ({ open, children, className }) => {\n  const wrapperRef = useRef<HTMLDivElement>(null);\n  const contentRef = useRef<HTMLDivElement>(null);\n  const [height, setHeight] = useState(0);\n\n  useEffect(() => {\n    const wrapper = wrapperRef.current;\n    if (!wrapper) return;\n    if (open) wrapper.removeAttribute('inert');\n    else wrapper.setAttribute('inert', '');\n  }, [open]);\n\n  useEffect(() => {\n    const content = contentRef.current;\n    if (!content) return undefined;\n\n    if (!open) {\n      setHeight(0);\n      return undefined;\n    }\n\n    setHeight(content.scrollHeight);\n\n    const observer = new ResizeObserver(() => setHeight(content.scrollHeight));\n    observer.observe(content);\n\n    return () => observer.disconnect();\n  }, [open]);\n\n  return (\n    <div\n      ref={wrapperRef}\n      style={{ height }}\n      aria-hidden={!open}\n      className={twMerge('overflow-hidden transition-[height] duration-slow ease-enter', className)}\n    >\n      <div ref={contentRef}>{children}</div>\n    </div>\n  );\n};\n\nexport default ControlledCollapse;\n"],"names":[],"mappings":";;;AAmBA,MAAM,qBAAyD,CAAC,EAAE,MAAM,UAAU,gBAAgB;AAChG,QAAM,aAAa,OAAuB,IAAI;AAC9C,QAAM,aAAa,OAAuB,IAAI;AAC9C,QAAM,CAAC,QAAQ,SAAS,IAAI,SAAS,CAAC;AAEtC,YAAU,MAAM;AACd,UAAM,UAAU,WAAW;AAC3B,QAAI,CAAC,QAAS;AACd,QAAI,KAAM,SAAQ,gBAAgB,OAAO;AAAA,QACpC,SAAQ,aAAa,SAAS,EAAE;AAAA,EACvC,GAAG,CAAC,IAAI,CAAC;AAET,YAAU,MAAM;AACd,UAAM,UAAU,WAAW;AAC3B,QAAI,CAAC,QAAS,QAAO;AAErB,QAAI,CAAC,MAAM;AACT,gBAAU,CAAC;AACX,aAAO;AAAA,IACT;AAEA,cAAU,QAAQ,YAAY;AAE9B,UAAM,WAAW,IAAI,eAAe,MAAM,UAAU,QAAQ,YAAY,CAAC;AACzE,aAAS,QAAQ,OAAO;AAExB,WAAO,MAAM,SAAS,WAAA;AAAA,EACxB,GAAG,CAAC,IAAI,CAAC;AAET,SACE;AAAA,IAAC;AAAA,IAAA;AAAA,MACC,KAAK;AAAA,MACL,OAAO,EAAE,OAAA;AAAA,MACT,eAAa,CAAC;AAAA,MACd,WAAW,QAAQ,gEAAgE,SAAS;AAAA,MAE5F,UAAA,oBAAC,OAAA,EAAI,KAAK,YAAa,SAAA,CAAS;AAAA,IAAA;AAAA,EAAA;AAGtC;"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@umodeapporg/ui",
-  "version": "0.8.2",
+  "version": "0.9.1",
   "license": "UNLICENSED",
   "type": "module",
   "sideEffects": [