@umodeapporg/ui 0.9.2 → 0.9.3

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

@@ -46,18 +46,20 @@ interface IPageTitleProps {
      */
     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.
+     * The header shrinks once the content beside it has been scrolled: 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.
+     * It only applies where the header STAYS ON SCREEN while something else scrolls, which is a page
+     * whose content lives in a container beside the header (`collapseScrollRef`). When the page itself
+     * scrolls, the header goes with it and there is nothing to shrink: pinning it there would mean
+     * painting a background under it, and a header that grows a surface halfway through a scroll reads
+     * as a panel appearing out of nowhere.
      *
-     * 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).
+     * EXPANDED, IT RENDERS EXACTLY WHAT IT RENDERED BEFORE THIS EXISTED: no wrapper node, no extra
+     * element, no background, no positioning. 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.
      */
     collapseOnScroll?: boolean;
     /**

package/dist/components/Navigation/PageTitle.js

@@ -20,7 +20,6 @@ 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) {
@@ -103,20 +102,12 @@ const PageTitle = ({
     const root = rootRef.current;
     if (!root) return;
     const container = collapseScrollRef?.current ?? findScrollParent(root);
-    if (!container) return;
-    const scrollsUnderTheHeader = container.contains(root);
-    const containerPaddingTop = Number.parseFloat(getComputedStyle(container).paddingTop) || 0;
-    const stickyTop = Number.parseFloat(getComputedStyle(root).top) || 0;
+    if (!container || container.contains(root)) return;
     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 pinnedLine = container.getBoundingClientRect().top + containerPaddingTop + stickyTop;
-      setIsCollapsed(root.getBoundingClientRect().top <= pinnedLine + PINNED_TOLERANCE_PX);
+      const offset = container.scrollTop;
+      setIsCollapsed((previous) => previous ? offset > EXPAND_AT_SCROLL : offset >= COLLAPSE_AT_SCROLL);
     };
     const handleScroll = () => {
       if (!frame) frame = requestAnimationFrame(evaluate);
@@ -143,14 +134,10 @@ const PageTitle = ({
         "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
+          // Collapsed it keeps NO background: the header never has content passing behind it, so
+          // painting one would only add a panel nobody asked for. The padding is what keeps the
+          // shrunken row off the content below instead.
+          "py-2": isCollapsed
         },
         className
       ),

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

@@ -1 +1 @@
-{"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\n    // Read once: both are static for the life of the listener, and reading them per frame would mean\n    // a style recalculation on every scroll tick. A sticky offset is measured from the container's\n    // CONTENT box, so the pinned line is its padding plus that offset, never the border box alone.\n    const containerPaddingTop = Number.parseFloat(getComputedStyle(container).paddingTop) || 0;\n    const stickyTop = Number.parseFloat(getComputedStyle(root).top) || 0;\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      const pinnedLine = container.getBoundingClientRect().top + containerPaddingTop + 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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"}
+{"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 * Scroll offsets, in px, at which the header shrinks and grows back. They differ on purpose:\n * collapsing and expanding at the same position makes the header flicker for a whole gesture when a\n * scroll lands on it.\n */\nconst COLLAPSE_AT_SCROLL = 48;\nconst EXPAND_AT_SCROLL = 16;\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 shrinks once the content beside it has been scrolled: the breadcrumb, the eyebrow, the\n   * headline and the `subtitleSlot` go, the media drops one size (the record's picture stays, at the\n   * icon chip's size) and the title takes its compact type. The back button and the `slot` never move.\n   *\n   * It only applies where the header STAYS ON SCREEN while something else scrolls, which is a page\n   * whose content lives in a container beside the header (`collapseScrollRef`). When the page itself\n   * scrolls, the header goes with it and there is nothing to shrink: pinning it there would mean\n   * painting a background under it, and a header that grows a surface halfway through a scroll reads\n   * as a panel appearing out of nowhere.\n   *\n   * EXPANDED, IT RENDERS EXACTLY WHAT IT RENDERED BEFORE THIS EXISTED: no wrapper node, no extra\n   * element, no background, no positioning. That is deliberate. The first version added a sentinel\n   * node as a sibling of the header, and since almost every page wraps it in a `flex flex-col\n   * gap-y-*`, that node became a flex item and every page grew a stray gap.\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    // A container that CONTAINS the header is the page scrolling, header included: it leaves with\n    // the content, so there is nothing to shrink. Shrinking only means something where the header\n    // stays put while the content moves, which is a container beside it, never around it.\n    if (!container || container.contains(root)) return;\n\n    let frame = 0;\n\n    const evaluate = () => {\n      frame = 0;\n      const offset = container.scrollTop;\n      setIsCollapsed((previous) => (previous ? offset > EXPAND_AT_SCROLL : offset >= COLLAPSE_AT_SCROLL));\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            // Collapsed it keeps NO background: the header never has content passing behind it, so\n            // painting one would only add a panel nobody asked for. The padding is what keeps the\n            // shrunken row off the content below instead.\n            'py-2': 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/Shell/AppShell.js

@@ -84,14 +84,8 @@ const AppShell = ({
             {
               id: "scrollableDiv",
               ref: scrollRef,
-              className: "z-30 h-screen w-full px-4 tablet:px-6",
-              style: {
-                overflow: "auto",
-                paddingTop: "var(--page-scroll-padding-top)",
-                ["--page-scroll-padding-top"]: "6rem",
-                ["--app-header-height"]: "4rem",
-                ["--page-header-sticky-top"]: "calc(var(--app-header-height) - var(--page-scroll-padding-top))"
-              },
+              className: "z-30 h-screen w-full px-4 pt-24 tablet:px-6",
+              style: { overflow: "auto" },
               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 tablet:px-6\"\n          /*\n           * Where a PageTitle pins itself when the page scrolls. A sticky offset is measured from this\n           * container's CONTENT box, so the padding that clears the fixed app header has to be\n           * subtracted, or the header ends up pushed DOWN by the app header's height and covers the\n           * content below it before the page is even scrolled. The padding moves into the same object\n           * as the two numbers it depends on, so the relation between them stays visible.\n           */\n          style={{\n            overflow: 'auto',\n            paddingTop: 'var(--page-scroll-padding-top)',\n            ['--page-scroll-padding-top' as string]: '6rem',\n            ['--app-header-height' as string]: '4rem',\n            ['--page-header-sticky-top' as string]: 'calc(var(--app-header-height) - var(--page-scroll-padding-top))',\n          }}\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,cAQV,OAAO;AAAA,gBACL,UAAU;AAAA,gBACV,YAAY;AAAA,gBACZ,CAAC,2BAAqC,GAAG;AAAA,gBACzC,CAAC,qBAA+B,GAAG;AAAA,gBACnC,CAAC,0BAAoC,GAAG;AAAA,cAAA;AAAA,cAGzC;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          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;"}

package/package.json

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