@umodeapporg/ui 0.29.0 → 0.30.1

package/dist/components/Form/ControlledTabs.js

@@ -11,6 +11,17 @@ import LoadingSpinner from "../UI/LoadingSpinner.js";
 import { MaterialSymbol } from "../UI/MaterialSymbol/index.js";
 import ControlledButton from "./ControlledButton.js";
 import { Tab, TabsRoot, TabsHeader, TabsBody, TabPanel } from "./ControlledTabsPrimitives.js";
+const EDGE_TOLERANCE = 1;
+const ARROW_ROOM = 40;
+const distanceToReveal = (container, tab) => {
+  const strip = container.getBoundingClientRect();
+  const rect = tab.getBoundingClientRect();
+  const pastStart = rect.left - strip.left - ARROW_ROOM;
+  const pastEnd = rect.right - strip.right + ARROW_ROOM;
+  if (pastEnd > EDGE_TOLERANCE) return Math.min(pastEnd, pastStart);
+  if (pastStart < -EDGE_TOLERANCE && container.scrollLeft > 0) return Math.max(pastStart, -container.scrollLeft);
+  return 0;
+};
 const EditableTabLabel = ({
   label,
   count,
@@ -144,11 +155,11 @@ const ControlledTabs = forwardRef(
     const { location, searchParams, setSearchParams } = useUiNavigation();
     const urlParamOwnerIdRef = useRef({});
     const scrollRef = useRef(null);
+    const revealedTabRef = useRef(null);
     const stickySentinelRef = useRef(null);
     const stickyBarRef = useRef(null);
     const [canScrollLeft, setCanScrollLeft] = useState(false);
     const [canScrollRight, setCanScrollRight] = useState(false);
-    const [clippedTabValues, setClippedTabValues] = useState([]);
     const [isStuck, setIsStuck] = useState(false);
     const dragTabValueRef = useRef(null);
     const [draggingTabValue, setDraggingTabValue] = useState(null);
@@ -216,22 +227,7 @@ const ControlledTabs = forwardRef(
       if (!container) return;
       setCanScrollLeft(container.scrollLeft > 4);
       setCanScrollRight(container.scrollLeft + container.clientWidth < container.scrollWidth - 4);
-      const EDGE_TOLERANCE = 1;
-      const containerRect = container.getBoundingClientRect();
-      const clipped = [];
-      container.querySelectorAll("[data-value]").forEach((node) => {
-        const element = node;
-        const value = element.getAttribute("data-value");
-        if (!value || value === activeTab) return;
-        const rect = element.getBoundingClientRect();
-        const crossesLeftEdge = rect.left < containerRect.left - EDGE_TOLERANCE && rect.right > containerRect.left + EDGE_TOLERANCE;
-        const crossesRightEdge = rect.right > containerRect.right + EDGE_TOLERANCE && rect.left < containerRect.right - EDGE_TOLERANCE;
-        if (crossesLeftEdge || crossesRightEdge) clipped.push(value);
-      });
-      setClippedTabValues(
-        (prev) => prev.length === clipped.length && prev.every((value, index) => value === clipped[index]) ? prev : clipped
-      );
-    }, [activeTab]);
+    }, []);
     useEffect(() => {
       if (!stickyHeader) return;
       const sentinel = stickySentinelRef.current;
@@ -282,10 +278,31 @@ const ControlledTabs = forwardRef(
         target.style.removeProperty("--sticky-tabs-height");
       };
     }, [stickyHeader]);
+    const revealActiveTab = useCallback(
+      (behavior) => {
+        const container = scrollRef.current;
+        if (!container?.clientWidth) return false;
+        const tab = Array.from(container.querySelectorAll("[data-value]")).find(
+          (node) => node.getAttribute("data-value") === activeTab
+        );
+        if (!tab) return false;
+        const distance = distanceToReveal(container, tab);
+        if (distance !== 0) container.scrollBy({ left: distance, behavior });
+        return true;
+      },
+      [activeTab]
+    );
     useEffect(() => {
       if (!scrollableHeader) return;
+      if (revealedTabRef.current !== activeTab) {
+        const behavior = revealedTabRef.current === null ? "auto" : "smooth";
+        if (revealActiveTab(behavior)) revealedTabRef.current = activeTab;
+      }
       updateOverflow();
-      const onResize = () => updateOverflow();
+      const onResize = () => {
+        revealActiveTab("auto");
+        updateOverflow();
+      };
       window.addEventListener("resize", onResize);
       const scroller = scrollRef.current;
       const observer = scroller && typeof ResizeObserver !== "undefined" ? new ResizeObserver(onResize) : null;
@@ -297,25 +314,26 @@ const ControlledTabs = forwardRef(
         window.removeEventListener("resize", onResize);
         observer?.disconnect();
       };
-    }, [scrollableHeader, tabs, updateOverflow]);
+    }, [scrollableHeader, tabs, updateOverflow, revealActiveTab, activeTab]);
     const scrollByStep = (direction) => {
       const container = scrollRef.current;
       if (!container) return;
-      const EDGE_TOLERANCE = 1;
       const containerRect = container.getBoundingClientRect();
       const nodes = Array.from(container.querySelectorAll("[data-value]"));
       if (direction > 0) {
         const nextHidden = nodes.find(
-          (node) => node.getBoundingClientRect().right > containerRect.right + EDGE_TOLERANCE
+          (node) => node.getBoundingClientRect().right > containerRect.right - ARROW_ROOM + EDGE_TOLERANCE
         );
         if (!nextHidden) return;
-        container.scrollBy({ left: nextHidden.getBoundingClientRect().left - containerRect.left, behavior: "smooth" });
+        const distance2 = nextHidden.getBoundingClientRect().left - containerRect.left - ARROW_ROOM;
+        container.scrollBy({ left: Math.max(distance2, ARROW_ROOM), behavior: "smooth" });
         return;
       }
-      const previousHidden = [...nodes].reverse().find((node) => node.getBoundingClientRect().left < containerRect.left - EDGE_TOLERANCE);
+      const previousHidden = [...nodes].reverse().find((node) => node.getBoundingClientRect().left < containerRect.left + ARROW_ROOM - EDGE_TOLERANCE);
       if (!previousHidden) return;
+      const distance = previousHidden.getBoundingClientRect().right - containerRect.right + ARROW_ROOM;
       container.scrollBy({
-        left: previousHidden.getBoundingClientRect().right - containerRect.right,
+        left: Math.min(distance, -ARROW_ROOM),
         behavior: "smooth"
       });
     };
@@ -379,8 +397,7 @@ const ControlledTabs = forwardRef(
               ["!text-foreground-faint line-through opacity-60 hover:!text-foreground-faint"]: tab.isVisible === false,
               ["cursor-grab active:cursor-grabbing"]: Boolean(onReorderTab),
               ["rounded-md bg-brand-soft !opacity-100 ring-1 ring-brand-border"]: isTabDropTarget,
-              ["opacity-40"]: draggingTabValue === tab.value,
-              ["invisible"]: clippedTabValues.includes(tab.value)
+              ["opacity-40"]: draggingTabValue === tab.value
             }
           ),
           children: [
@@ -413,8 +430,10 @@ const ControlledTabs = forwardRef(
         `controlled-tab-${index}-${tab.value}`
       );
     });
-    const showScrollArrows = canScrollLeft || canScrollRight;
-    const scrollArrowClass = "flex size-8 shrink-0 items-center justify-center rounded-full text-foreground-subtle transition-colors hover:bg-brand-soft hover:text-brand-emphasis";
+    const scrollArrowClass = (
+      // Centred with margins: a product may scale a pressed button, and that would drop a translate.
+      "absolute inset-y-0 z-10 my-auto bg-surface shadow-xs flex size-8 shrink-0 items-center justify-center rounded-full text-foreground-subtle transition-colors hover:bg-brand-soft hover:text-brand-emphasis"
+    );
     return /* @__PURE__ */ jsxs(TabsRoot, { value: activeTab, className: classNames("!overflow-visible", rootClassName), children: [
       stickyHeader && /* @__PURE__ */ jsx("div", { ref: stickySentinelRef, className: "h-px", "aria-hidden": true }),
       /* @__PURE__ */ jsxs(
@@ -435,28 +454,26 @@ const ControlledTabs = forwardRef(
           ),
           children: [
             headerSlot && /* @__PURE__ */ jsx(Fragment, { children: headerSlot }),
-            scrollableHeader ? /* @__PURE__ */ jsxs("div", { className: "flex min-w-0 flex-1 items-center gap-1 border-b border-border-subtle", children: [
-              showScrollArrows && /* @__PURE__ */ jsx(
+            scrollableHeader ? /* @__PURE__ */ jsxs("div", { className: "relative flex min-w-0 flex-1 items-center border-b border-border-subtle", children: [
+              canScrollLeft && /* @__PURE__ */ jsx(
                 ControlledButton,
                 {
                   "aria-label": t("controlledTabs.scrollLeft"),
                   defaultHtmlButton: true,
                   onClick: () => scrollByStep(-1),
-                  disabled: !canScrollLeft,
-                  className: classNames(scrollArrowClass, { ["pointer-events-none opacity-0"]: !canScrollLeft }),
+                  className: classNames(scrollArrowClass, "left-0"),
                   tabIndex: -1,
                   children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: "chevron_left", size: 20 })
                 }
               ),
               /* @__PURE__ */ jsx("div", { ref: scrollRef, onScroll: updateOverflow, className: "scrollbar-hide min-w-0 flex-1 overflow-x-auto", children: /* @__PURE__ */ jsx(TabsHeader, { className: "flex w-max flex-nowrap items-center gap-1 rounded-none border-b-0 border-border-subtle bg-transparent p-0", children: tabElements }) }),
-              showScrollArrows && /* @__PURE__ */ jsx(
+              canScrollRight && /* @__PURE__ */ jsx(
                 ControlledButton,
                 {
                   "aria-label": t("controlledTabs.scrollRight"),
                   defaultHtmlButton: true,
                   onClick: () => scrollByStep(1),
-                  disabled: !canScrollRight,
-                  className: classNames(scrollArrowClass, { ["pointer-events-none opacity-0"]: !canScrollRight }),
+                  className: classNames(scrollArrowClass, "right-0"),
                   tabIndex: -1,
                   children: /* @__PURE__ */ jsx(MaterialSymbol, { icon: "chevron_right", size: 20 })
                 }

package/dist/components/Form/ControlledTabs.js.map

@@ -1 +1 @@
-{"version":3,"file":"ControlledTabs.js","sources":["../../../src/components/Form/ControlledTabs.tsx"],"sourcesContent":["import { forwardRef, ReactNode, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport { useUiNavigation } from '@/components/Navigation/UiNavigationContext';\nimport { TUiCapability, useUiAccess } from '@/components/UI/access/UiAccessContext';\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport { formatNumber } from '@/helpers/formatHelpers';\nimport {\n  claimUrlParam,\n  queueUrlParamUpdate,\n  releaseUrlParam,\n  TABS_URL_PARAM,\n  URL_PARAM_PRIORITY,\n} from '@/helpers/urlParamSync';\n\nimport LoadingSpinner from '../UI/LoadingSpinner';\nimport { MaterialSymbol } from '../UI/MaterialSymbol';\n\nimport ControlledButton from './ControlledButton';\nimport { Tab, TabPanel, TabsBody, TabsHeader, TabsRoot } from './ControlledTabsPrimitives';\n\ninterface IEditableTabLabelProps {\n  label: string;\n  count?: number;\n  loading?: boolean;\n  isVisible?: boolean;\n  canToggleVisibility?: boolean;\n  onRename: (newLabel: string) => void;\n  onToggleVisibility?: () => void;\n}\n\nconst EditableTabLabel = ({\n  label,\n  count,\n  loading,\n  isVisible = true,\n  canToggleVisibility = true,\n  onRename,\n  onToggleVisibility,\n}: IEditableTabLabelProps) => {\n  const { t } = useTranslation('ui');\n  const [editing, setEditing] = useState(false);\n  const [draft, setDraft] = useState(label);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (editing) {\n      inputRef.current?.focus();\n      inputRef.current?.select();\n    }\n  }, [editing]);\n\n  const handleEditClick = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    setDraft(label);\n    setEditing(true);\n  };\n\n  const commit = () => {\n    const trimmed = draft.trim();\n    if (trimmed && trimmed !== label) onRename(trimmed);\n    setEditing(false);\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      commit();\n    }\n    if (e.key === 'Escape') {\n      setEditing(false);\n      setDraft(label);\n    }\n    e.stopPropagation();\n  };\n\n  if (editing) {\n    return (\n      <div className=\"flex items-center\" onClick={(e) => e.stopPropagation()}>\n        <input\n          ref={inputRef}\n          value={draft}\n          onChange={(e) => setDraft(e.target.value)}\n          onBlur={commit}\n          onKeyDown={handleKeyDown}\n          style={{ width: `${Math.max(draft.length + 2, 6)}ch` }}\n          className=\"border-b border-brand-border bg-transparent px-0 py-0.5 text-sm font-medium leading-none focus:outline-none\"\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"group/tab flex items-center gap-x-1.5 align-bottom\">\n      <span>{label}</span>\n      {count !== undefined &&\n        (loading ? (\n          <LoadingSpinner size={3} />\n        ) : (\n          <span className=\"inline-flex min-w-[18px] items-center justify-center rounded-full bg-muted-hover px-1.5 py-px text-[11px] font-medium leading-none text-foreground-subtle\">\n            {formatNumber(count)}\n          </span>\n        ))}\n      <ControlledTooltip content={t('controlledTabs.renameTab')}>\n        <ControlledButton\n          aria-label={t('controlledTabs.renameTab')}\n          defaultHtmlButton\n          onClick={handleEditClick}\n          className=\"ml-0.5 flex items-center text-foreground-faint transition-colors hover:text-brand-emphasis\"\n          tabIndex={-1}\n        >\n          <MaterialSymbol icon=\"edit\" size={14} />\n        </ControlledButton>\n      </ControlledTooltip>\n      {onToggleVisibility && (\n        <ControlledTooltip\n          content={\n            !canToggleVisibility\n              ? t('controlledTabs.mustKeepOneEnabled')\n              : isVisible\n                ? t('controlledTabs.disableTab')\n                : t('controlledTabs.enableTabShort')\n          }\n        >\n          <ControlledButton\n            aria-label={isVisible ? t('controlledTabs.disableTab') : t('controlledTabs.enableTabShort')}\n            defaultHtmlButton\n            onClick={(e) => {\n              e.stopPropagation();\n              if (canToggleVisibility) onToggleVisibility();\n            }}\n            className={classNames('ml-0.5 flex items-center transition-colors', {\n              ['text-foreground-faint hover:text-warning-emphasis']: isVisible && canToggleVisibility,\n              ['text-warning-emphasis hover:text-success-emphasis']: !isVisible,\n              ['cursor-not-allowed text-foreground-faint']: isVisible && !canToggleVisibility,\n            })}\n            tabIndex={-1}\n          >\n            <MaterialSymbol icon={isVisible ? 'visibility' : 'visibility_off'} size={14} />\n          </ControlledButton>\n        </ControlledTooltip>\n      )}\n    </div>\n  );\n};\n\nexport interface ITabInfo {\n  label: string;\n  value: string;\n  /** Missing capability removes the tab and never mounts its panel, so no protected request runs. */\n  capability?: TUiCapability | Array<TUiCapability>;\n  count?: number;\n  /** Pendências/alertas da aba — badge âmbar ao lado do nome (oculto quando 0/ausente). */\n  alertCount?: number;\n  tooltip?: string;\n  status?: number | string;\n  isVisible?: boolean;\n  /** When false, the tab keeps a plain label in the bar: no inline rename pencil and no visibility eye (e.g. aggregate tabs). */\n  editable?: boolean;\n  /**\n   * Content rendered after the label, inside the tab (a per-tab actions menu, a status icon). Presses\n   * on it never select or drag the tab, so a menu trigger placed here opens without switching tabs.\n   */\n  trailingSlot?: ReactNode;\n}\n\nexport interface IDataTab {\n  key: string;\n  element: ReactNode;\n}\n\ninterface IControlledTabsProps {\n  initialActiveTab: string;\n  activeTab?: string;\n  tabs: Array<ITabInfo>;\n  dataTabs: Array<IDataTab>;\n  loading?: boolean;\n  /** Blocks tab switching and dims the header, e.g. while a blocking operation runs in the active tab. */\n  disabled?: boolean;\n  handleActiveTabChildren?: () => void;\n  useRenderValidation?: boolean;\n  onTabChange?: (tab: string) => void;\n  beforeTabChange?: (from: string, to: string) => boolean;\n  tabsBodyClassName?: string;\n  tabPanelClassName?: string;\n\n  rootClassName?: string;\n  /** Classes extras aplicadas a cada aba (ex.: reduzir o padding vertical em telas específicas). */\n  tabClassName?: string;\n  headerSlot?: ReactNode;\n  /** Conteúdo fixo alinhado à direita do cabeçalho das abas (ex.: botão de ação principal). */\n  actionsSlot?: ReactNode;\n  onRenameTab?: (value: string, newLabel: string) => void;\n  onToggleTabVisibility?: (value: string) => void;\n  /**\n   * Habilita arrastar-e-soltar das abas no cabeçalho (mesmo molde do drag nativo dos\n   * campos do construtor de fichas). Recebe os values da aba arrastada e da aba alvo;\n   * o consumidor decide como persistir a nova ordem (ex.: tabOrderPriority).\n   */\n  onReorderTab?: (fromValue: string, toValue: string) => void;\n  /**\n   * Renders the tab header as a single horizontally-scrollable line (browser-tab style)\n   * with navigation arrows and a \"+N\" overflow menu, instead of wrapping onto several lines.\n   */\n  scrollableHeader?: boolean;\n  /**\n   * Faz o cabeçalho das abas grudar no topo do container rolável (`position: sticky`), com\n   * fundo sólido e uma sombra sutil que aparece só ao rolar, além de um acabamento mais\n   * delicado nas abas (pill no hover, sublinhado fino e transição suave). Use quando a barra\n   * precisa ficar visível durante todo o scroll (ex.: ficha técnica do produto).\n   */\n  stickyHeader?: boolean;\n  /**\n   * Sincroniza a aba ativa com o query param `activeTab` da URL (ler no mount e\n   * escrever a cada troca). Default `true`. Use `false` em abas dentro de modais/\n   * dialogs, cujo estado é efêmero e não deve poluir a URL da página nem competir\n   * com abas de nível de página que já usam `activeTab`.\n   */\n  syncWithUrl?: boolean;\n}\n\nconst ControlledTabs = forwardRef<unknown, IControlledTabsProps>(\n  (\n    {\n      initialActiveTab,\n      activeTab: controlledActiveTab,\n      tabs: tabsProp,\n      dataTabs: dataTabsProp,\n      loading = false,\n      disabled = false,\n      handleActiveTabChildren,\n      useRenderValidation = false,\n      onTabChange,\n      beforeTabChange,\n      tabsBodyClassName,\n      tabPanelClassName,\n      rootClassName,\n      tabClassName,\n      headerSlot,\n      actionsSlot,\n      onRenameTab,\n      onToggleTabVisibility,\n      onReorderTab,\n      scrollableHeader = false,\n      stickyHeader = false,\n      syncWithUrl = true,\n    },\n    ref,\n  ) => {\n    const { t } = useTranslation('ui');\n    const { check } = useUiAccess();\n\n    const deniedTabValues = useMemo(\n      () => new Set(tabsProp.filter((tab) => tab.capability && !check(tab.capability)).map((tab) => tab.value)),\n      [tabsProp, check],\n    );\n\n    const tabs = useMemo(() => tabsProp.filter((tab) => !deniedTabValues.has(tab.value)), [tabsProp, deniedTabValues]);\n\n    const dataTabs = useMemo(\n      () => dataTabsProp.filter((tabPanel) => !deniedTabValues.has(tabPanel.key)),\n      [dataTabsProp, deniedTabValues],\n    );\n\n    const { location, searchParams, setSearchParams } = useUiNavigation();\n    const urlParamOwnerIdRef = useRef<object>({});\n    const scrollRef = useRef<HTMLDivElement>(null);\n    const stickySentinelRef = useRef<HTMLDivElement>(null);\n    const stickyBarRef = useRef<HTMLDivElement>(null);\n    const [canScrollLeft, setCanScrollLeft] = useState(false);\n    const [canScrollRight, setCanScrollRight] = useState(false);\n    // Abas que cruzam uma borda da área rolável (visíveis só pela metade). Ficam invisíveis para\n    // que na borda só apareça aba inteira ou espaço vazio, nunca um pedaço de texto cortado.\n    const [clippedTabValues, setClippedTabValues] = useState<Array<string>>([]);\n    // Barra sticky: detecta quando a barra \"grudou\" (usuário já rolou) para só então mostrar a sombra.\n    const [isStuck, setIsStuck] = useState(false);\n    // Drag nativo das abas (opt-in via onReorderTab), mesmo molde dos campos do construtor.\n    const dragTabValueRef = useRef<string | null>(null);\n    const [draggingTabValue, setDraggingTabValue] = useState<string | null>(null);\n    const [dragOverTabValue, setDragOverTabValue] = useState<string | null>(null);\n\n    const resolveInitialActiveTab = () => {\n      const fallbackTab = tabs.some((tab) => tab.value === initialActiveTab)\n        ? initialActiveTab\n        : (tabs[0]?.value ?? initialActiveTab);\n\n      if (!syncWithUrl) return fallbackTab;\n      if ((location.state as { ignoreActiveTab?: boolean } | null | undefined)?.ignoreActiveTab === true)\n        return fallbackTab;\n      const urlActiveTab = searchParams.get(TABS_URL_PARAM);\n      const isValidUrlTab = urlActiveTab != null && tabs.some((tab) => tab.value === urlActiveTab);\n      return isValidUrlTab ? urlActiveTab : fallbackTab;\n    };\n\n    const [internalActiveTab, setInternalActiveTab] = useState(resolveInitialActiveTab);\n    const isControlled = controlledActiveTab !== undefined;\n    const activeTab = isControlled ? controlledActiveTab : internalActiveTab;\n\n    const handleActiveTab = (tab: string) => {\n      if (disabled) return;\n      if (beforeTabChange && !beforeTabChange(activeTab, tab)) {\n        if (!isControlled) {\n          setInternalActiveTab(activeTab);\n        }\n        return;\n      }\n      if (handleActiveTabChildren) {\n        handleActiveTabChildren();\n      }\n      if (!isControlled) {\n        setInternalActiveTab(tab);\n      }\n      if (onTabChange) {\n        onTabChange(tab);\n      }\n\n      if (syncWithUrl) {\n        queueUrlParamUpdate(TABS_URL_PARAM, tab, setSearchParams);\n      }\n    };\n\n    useImperativeHandle(ref, () => ({\n      activeTab,\n      setActiveTab: handleActiveTab,\n    }));\n\n    const handleToggleTabVisibility = (value: string) => {\n      const visibleCount = tabs.filter((t) => t.isVisible !== false).length;\n      const isCurrentlyVisible = tabs.find((t) => t.value === value)?.isVisible !== false;\n      if (isCurrentlyVisible && visibleCount <= 1) return;\n      onToggleTabVisibility?.(value);\n    };\n\n    // As abas são o topo da hierarquia de parâmetros: assumem `activeTab` mesmo montando depois de\n    // um controle que já o tivesse reivindicado, e o liberam ao desmontar.\n    useEffect(() => {\n      if (!syncWithUrl) return;\n\n      const ownerId = urlParamOwnerIdRef.current;\n      claimUrlParam(TABS_URL_PARAM, ownerId, URL_PARAM_PRIORITY.tabs);\n\n      return () => releaseUrlParam(TABS_URL_PARAM, ownerId);\n    }, [syncWithUrl]);\n\n    useEffect(() => {\n      if (syncWithUrl && searchParams.get(TABS_URL_PARAM) !== activeTab) {\n        queueUrlParamUpdate(TABS_URL_PARAM, activeTab, setSearchParams);\n      }\n      const tabButton = document.querySelector(`li[data-value=${activeTab}]`) as HTMLElement | null;\n      if (tabButton) {\n        tabButton.click();\n      }\n    }, [activeTab]);\n\n    const updateOverflow = useCallback(() => {\n      const container = scrollRef.current;\n      if (!container) return;\n\n      setCanScrollLeft(container.scrollLeft > 4);\n      setCanScrollRight(container.scrollLeft + container.clientWidth < container.scrollWidth - 4);\n\n      const EDGE_TOLERANCE = 1;\n      const containerRect = container.getBoundingClientRect();\n      const clipped: Array<string> = [];\n      container.querySelectorAll('[data-value]').forEach((node) => {\n        const element = node as HTMLElement;\n        const value = element.getAttribute('data-value');\n        if (!value || value === activeTab) return;\n        const rect = element.getBoundingClientRect();\n        const crossesLeftEdge =\n          rect.left < containerRect.left - EDGE_TOLERANCE && rect.right > containerRect.left + EDGE_TOLERANCE;\n        const crossesRightEdge =\n          rect.right > containerRect.right + EDGE_TOLERANCE && rect.left < containerRect.right - EDGE_TOLERANCE;\n        if (crossesLeftEdge || crossesRightEdge) clipped.push(value);\n      });\n      setClippedTabValues((prev) =>\n        prev.length === clipped.length && prev.every((value, index) => value === clipped[index]) ? prev : clipped,\n      );\n    }, [activeTab]);\n\n    useEffect(() => {\n      if (!stickyHeader) return;\n      const sentinel = stickySentinelRef.current;\n      if (!sentinel || typeof IntersectionObserver === 'undefined') return;\n      // Descobre o ancestral rolável para observar o sentinela em relação a ele. Quando o sentinela\n      // (logo acima da barra) sai do topo do container, a barra grudou e ligamos a sombra.\n      let scrollParent = sentinel.parentElement;\n      while (scrollParent) {\n        const overflowY = getComputedStyle(scrollParent).overflowY;\n        if (overflowY === 'auto' || overflowY === 'scroll') break;\n        scrollParent = scrollParent.parentElement;\n      }\n      const observer = new IntersectionObserver(([entry]) => setIsStuck(!entry.isIntersecting), {\n        root: scrollParent ?? null,\n        threshold: 0,\n      });\n      observer.observe(sentinel);\n      return () => observer.disconnect();\n    }, [stickyHeader]);\n\n    // Publica a altura da barra fixa como `--sticky-tabs-height` no container rolável, para\n    // que conteúdo sticky mais abaixo (ex.: cabeçalho de material da ficha) possa grudar logo\n    // abaixo da barra em vez de ficar escondido atrás dela.\n    useEffect(() => {\n      if (!stickyHeader) return;\n      const bar = stickyBarRef.current;\n      if (!bar) return;\n      let scrollParent = bar.parentElement;\n      while (scrollParent) {\n        const overflowY = getComputedStyle(scrollParent).overflowY;\n        if (overflowY === 'auto' || overflowY === 'scroll') break;\n        scrollParent = scrollParent.parentElement;\n      }\n      if (!scrollParent) return;\n      const target = scrollParent;\n      let rafId = 0;\n      let lastHeight = -1;\n      // Escreve a variável só quando a altura muda de fato, e fora do ciclo de entrega do\n      // ResizeObserver (via rAF): escrever um valor que afeta layout dentro do callback dispara\n      // \"ResizeObserver loop completed with undelivered notifications\".\n      const publishHeight = () => {\n        const height = bar.offsetHeight;\n        if (height === lastHeight) return;\n        lastHeight = height;\n        target.style.setProperty('--sticky-tabs-height', `${height}px`);\n      };\n      publishHeight();\n      if (typeof ResizeObserver === 'undefined') return;\n      const observer = new ResizeObserver(() => {\n        cancelAnimationFrame(rafId);\n        rafId = requestAnimationFrame(publishHeight);\n      });\n      observer.observe(bar);\n      return () => {\n        cancelAnimationFrame(rafId);\n        observer.disconnect();\n        target.style.removeProperty('--sticky-tabs-height');\n      };\n    }, [stickyHeader]);\n\n    useEffect(() => {\n      if (!scrollableHeader) return;\n      updateOverflow();\n      const onResize = () => updateOverflow();\n      window.addEventListener('resize', onResize);\n\n      // The strip also changes size with no window resize: a side panel opening, the web font\n      // arriving, the arrows themselves appearing.\n      const scroller = scrollRef.current;\n      const observer = scroller && typeof ResizeObserver !== 'undefined' ? new ResizeObserver(onResize) : null;\n      if (scroller && observer) {\n        observer.observe(scroller);\n        if (scroller.firstElementChild) observer.observe(scroller.firstElementChild);\n      }\n\n      return () => {\n        window.removeEventListener('resize', onResize);\n        observer?.disconnect();\n      };\n    }, [scrollableHeader, tabs, updateOverflow]);\n\n    const scrollByStep = (direction: number) => {\n      const container = scrollRef.current;\n      if (!container) return;\n      const EDGE_TOLERANCE = 1;\n      const containerRect = container.getBoundingClientRect();\n      const nodes = Array.from(container.querySelectorAll('[data-value]')) as Array<HTMLElement>;\n\n      if (direction > 0) {\n        const nextHidden = nodes.find(\n          (node) => node.getBoundingClientRect().right > containerRect.right + EDGE_TOLERANCE,\n        );\n        if (!nextHidden) return;\n        container.scrollBy({ left: nextHidden.getBoundingClientRect().left - containerRect.left, behavior: 'smooth' });\n        return;\n      }\n\n      const previousHidden = [...nodes]\n        .reverse()\n        .find((node) => node.getBoundingClientRect().left < containerRect.left - EDGE_TOLERANCE);\n      if (!previousHidden) return;\n      container.scrollBy({\n        left: previousHidden.getBoundingClientRect().right - containerRect.right,\n        behavior: 'smooth',\n      });\n    };\n\n    const tabLabel = (label: string, count?: number, alertCount?: number) => {\n      const showCount = count !== undefined;\n      return (\n        <div className=\"flex items-center gap-x-1.5 align-bottom\">\n          {label}\n          {loading && showCount ? (\n            <LoadingSpinner size={3} />\n          ) : showCount ? (\n            <span className=\"inline-flex min-w-[18px] items-center justify-center rounded-full bg-muted-hover px-1.5 py-px text-[11px] font-medium leading-none text-foreground-subtle\">\n              {formatNumber(count)}\n            </span>\n          ) : null}\n          {Boolean(alertCount) && (\n            <span className=\"inline-flex min-w-[18px] items-center justify-center rounded-full bg-warning-soft px-1.5 py-px text-[11px] font-semibold leading-none text-warning-emphasis\">\n              {formatNumber(alertCount as number)}\n            </span>\n          )}\n        </div>\n      );\n    };\n\n    const handleTabDragEnd = () => {\n      const from = dragTabValueRef.current;\n      const to = dragOverTabValue;\n\n      if (from && to && from !== to) {\n        onReorderTab?.(from, to);\n      }\n\n      dragTabValueRef.current = null;\n      setDraggingTabValue(null);\n      setDragOverTabValue(null);\n    };\n\n    const tabElements = tabs.map((tab, index) => {\n      const isActive = activeTab === tab.value && tab.isVisible !== false;\n      const isInactive = activeTab !== tab.value && tab.isVisible !== false;\n      const isTabDropTarget =\n        Boolean(draggingTabValue) && dragOverTabValue === tab.value && draggingTabValue !== tab.value;\n      const tabDragProps = onReorderTab\n        ? {\n            draggable: true,\n            onDragStart: (event: React.DragEvent) => {\n              // Arrastar a partir do input de renomear deve selecionar texto, não mover a aba; e a\n              // partir do slot de ações (menu da aba) não deve mover nada.\n              if ((event.target as HTMLElement).closest('input, [data-tab-trailing-slot]')) {\n                event.preventDefault();\n                return;\n              }\n              event.dataTransfer.effectAllowed = 'move';\n              dragTabValueRef.current = tab.value;\n              setDraggingTabValue(tab.value);\n            },\n            onDragEnter: (event: React.DragEvent) => {\n              event.preventDefault();\n              if (dragTabValueRef.current) setDragOverTabValue(tab.value);\n            },\n            onDragOver: (event: React.DragEvent) => event.preventDefault(),\n            onDragEnd: handleTabDragEnd,\n          }\n        : {};\n      return (\n        <Tab\n          key={`controlled-tab-${index}-${tab.value}`}\n          value={tab.value}\n          style={{ zIndex: 2 }}\n          disabled={loading}\n          onClick={() => handleActiveTab(tab.value)}\n          {...tabDragProps}\n          className={classNames(\n            'max-w-fit px-4',\n            tabClassName,\n            // Acabamento mais delicado quando a barra é sticky: pill sutil no hover das abas\n            // inativas e peso de fonte mais leve ao trocar de aba.\n            stickyHeader && 'rounded-md transition-interactive duration-fast',\n            {\n              [stickyHeader ? 'font-medium text-brand-emphasis' : 'text-brand-emphasis']: isActive,\n              [stickyHeader ? 'font-normal opacity-70 hover:bg-muted-hover hover:opacity-100' : 'opacity-70']:\n                isInactive,\n              ['!text-foreground-faint line-through opacity-60 hover:!text-foreground-faint']: tab.isVisible === false,\n              ['cursor-grab active:cursor-grabbing']: Boolean(onReorderTab),\n              ['rounded-md bg-brand-soft !opacity-100 ring-1 ring-brand-border']: isTabDropTarget,\n              ['opacity-40']: draggingTabValue === tab.value,\n              ['invisible']: clippedTabValues.includes(tab.value),\n            },\n          )}\n        >\n          {onRenameTab && tab.editable !== false ? (\n            <EditableTabLabel\n              label={tab.label}\n              count={tab.count}\n              loading={loading}\n              isVisible={tab.isVisible !== false}\n              canToggleVisibility={tab.isVisible === false || tabs.filter((t) => t.isVisible !== false).length > 1}\n              onRename={(newLabel) => onRenameTab(tab.value, newLabel)}\n              onToggleVisibility={onToggleTabVisibility ? () => handleToggleTabVisibility(tab.value) : undefined}\n            />\n          ) : tab.tooltip ? (\n            <ControlledTooltip content={tab.tooltip} className=\"max-w-60\">\n              {tabLabel(tab.label, tab.count, tab.alertCount)}\n            </ControlledTooltip>\n          ) : (\n            tabLabel(tab.label, tab.count, tab.alertCount)\n          )}\n          {tab.trailingSlot && (\n            <span\n              data-tab-trailing-slot\n              className=\"ml-1 flex items-center\"\n              onClick={(event) => event.stopPropagation()}\n              onMouseDown={(event) => event.stopPropagation()}\n              onPointerDown={(event) => event.stopPropagation()}\n              onKeyDown={(event) => event.stopPropagation()}\n            >\n              {tab.trailingSlot}\n            </span>\n          )}\n        </Tab>\n      );\n    });\n\n    // Sublinhado fino (2px). Na barra sticky mantemos a animação de deslize nativa (transform) com\n    // transição suave de ~120ms; nas demais telas o indicador segue estático como antes.\n\n    // Both arrows or none: out of the row when everything fits, or the first tab starts indented\n    // against the content; kept once one direction runs out, or the tabs jump under the pointer.\n    const showScrollArrows = canScrollLeft || canScrollRight;\n    const scrollArrowClass =\n      'flex size-8 shrink-0 items-center justify-center rounded-full text-foreground-subtle transition-colors hover:bg-brand-soft hover:text-brand-emphasis';\n\n    return (\n      <TabsRoot value={activeTab} className={classNames('!overflow-visible', rootClassName)}>\n        {/* Sentinela de 1px: quando sai do topo do container rolável a barra já grudou e acende a sombra. */}\n        {stickyHeader && <div ref={stickySentinelRef} className=\"h-px\" aria-hidden />}\n        <div\n          ref={stickyBarRef}\n          className={classNames(\n            'flex shrink-0 items-center',\n            // Com header rolável a barra é sempre UMA linha (nowrap): as abas cedem e viram scroll\n            // horizontal, enquanto as ações (shrink-0 + ml-auto) permanecem pinadas à direita e nunca\n            // caem para baixo. Sem header rolável, mantém o comportamento antigo de wrap.\n            scrollableHeader ? 'flex-nowrap gap-x-3' : actionsSlot ? 'flex-wrap gap-x-3 gap-y-2' : 'gap-1',\n            // Gruda logo abaixo do header do produto: fundo sólido para tapar o conteúdo que\n            // rola por baixo e sombra sutil só depois que a barra encosta no topo.\n            stickyHeader && 'sticky top-0 z-20 bg-surface transition-shadow duration-fast',\n            stickyHeader && isStuck && 'shadow-elevation1',\n            disabled && 'pointer-events-none select-none opacity-50',\n          )}\n        >\n          {headerSlot && <>{headerSlot}</>}\n          {scrollableHeader ? (\n            <div className=\"flex min-w-0 flex-1 items-center gap-1 border-b border-border-subtle\">\n              {showScrollArrows && (\n                <ControlledButton\n                  aria-label={t('controlledTabs.scrollLeft')}\n                  defaultHtmlButton\n                  onClick={() => scrollByStep(-1)}\n                  disabled={!canScrollLeft}\n                  className={classNames(scrollArrowClass, { ['pointer-events-none opacity-0']: !canScrollLeft })}\n                  tabIndex={-1}\n                >\n                  <MaterialSymbol icon=\"chevron_left\" size={20} />\n                </ControlledButton>\n              )}\n\n              <div ref={scrollRef} onScroll={updateOverflow} className=\"scrollbar-hide min-w-0 flex-1 overflow-x-auto\">\n                <TabsHeader className=\"flex w-max flex-nowrap items-center gap-1 rounded-none border-b-0 border-border-subtle bg-transparent p-0\">\n                  {tabElements}\n                </TabsHeader>\n              </div>\n\n              {showScrollArrows && (\n                <ControlledButton\n                  aria-label={t('controlledTabs.scrollRight')}\n                  defaultHtmlButton\n                  onClick={() => scrollByStep(1)}\n                  disabled={!canScrollRight}\n                  className={classNames(scrollArrowClass, { ['pointer-events-none opacity-0']: !canScrollRight })}\n                  tabIndex={-1}\n                >\n                  <MaterialSymbol icon=\"chevron_right\" size={20} />\n                </ControlledButton>\n              )}\n            </div>\n          ) : (\n            <TabsHeader className=\"flex flex-1 flex-wrap items-center gap-1 rounded-none border-b-0 border-border-subtle bg-transparent p-0\">\n              {tabElements}\n            </TabsHeader>\n          )}\n          {actionsSlot && <div className=\"ml-auto flex shrink-0 items-center\">{actionsSlot}</div>}\n        </div>\n\n        <TabsBody className={tabsBodyClassName}>\n          {dataTabs.map((tabPanel) => {\n            const isTabVisible = tabs.find((t) => t.value === tabPanel.key)?.isVisible !== false;\n            return (\n              <TabPanel key={tabPanel.key} value={tabPanel.key} className={classNames('size-full', tabPanelClassName)}>\n                <div className={classNames('relative size-full', { ['pointer-events-none']: !isTabVisible })}>\n                  {useRenderValidation\n                    ? activeTab === tabPanel.key && (\n                        <div className=\"size-full animate-fade-in transition-interactive duration-slow ease-standard\">\n                          {tabPanel.element}\n                        </div>\n                      )\n                    : tabPanel.element}\n                  {!isTabVisible && (\n                    <div className=\"absolute inset-0 z-10 flex flex-col items-center justify-center gap-2 rounded-lg bg-muted-hover/70 glass-veil\">\n                      <MaterialSymbol icon=\"visibility_off\" size={32} className=\"text-foreground-faint\" />\n                      <span className=\"text-sm font-medium text-foreground-subtle\">\n                        {t('controlledTabs.tabDisabled')}\n                      </span>\n                      {onToggleTabVisibility && (\n                        <ControlledButton\n                          size=\"sm\"\n                          variant=\"outlined\"\n                          className=\"pointer-events-auto mt-1 flex items-center gap-x-1\"\n                          onClick={() => onToggleTabVisibility(tabPanel.key)}\n                        >\n                          <MaterialSymbol icon=\"visibility\" size={16} />\n                          {t('controlledTabs.enableTab')}\n                        </ControlledButton>\n                      )}\n                    </div>\n                  )}\n                </div>\n              </TabPanel>\n            );\n          })}\n        </TabsBody>\n      </TabsRoot>\n    );\n  },\n);\n\nexport default ControlledTabs;\n"],"names":["t"],"mappings":"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"}
+{"version":3,"file":"ControlledTabs.js","sources":["../../../src/components/Form/ControlledTabs.tsx"],"sourcesContent":["import { forwardRef, ReactNode, useCallback, useEffect, useImperativeHandle, useMemo, useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport { useUiNavigation } from '@/components/Navigation/UiNavigationContext';\nimport { TUiCapability, useUiAccess } from '@/components/UI/access/UiAccessContext';\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport { formatNumber } from '@/helpers/formatHelpers';\nimport {\n  claimUrlParam,\n  queueUrlParamUpdate,\n  releaseUrlParam,\n  TABS_URL_PARAM,\n  URL_PARAM_PRIORITY,\n} from '@/helpers/urlParamSync';\n\nimport LoadingSpinner from '../UI/LoadingSpinner';\nimport { MaterialSymbol } from '../UI/MaterialSymbol';\n\nimport ControlledButton from './ControlledButton';\nimport { Tab, TabPanel, TabsBody, TabsHeader, TabsRoot } from './ControlledTabsPrimitives';\n\nconst EDGE_TOLERANCE = 1;\n// The arrows lie over the strip: a tab under one is not in view, and landing there would hide it.\nconst ARROW_ROOM = 40;\n\n/** How far the strip has to move to show a tab clear of both arrows; 0 when it already is. */\nconst distanceToReveal = (container: HTMLElement, tab: HTMLElement): number => {\n  const strip = container.getBoundingClientRect();\n  const rect = tab.getBoundingClientRect();\n  const pastStart = rect.left - strip.left - ARROW_ROOM;\n  const pastEnd = rect.right - strip.right + ARROW_ROOM;\n  if (pastEnd > EDGE_TOLERANCE) return Math.min(pastEnd, pastStart);\n  if (pastStart < -EDGE_TOLERANCE && container.scrollLeft > 0) return Math.max(pastStart, -container.scrollLeft);\n  return 0;\n};\n\ninterface IEditableTabLabelProps {\n  label: string;\n  count?: number;\n  loading?: boolean;\n  isVisible?: boolean;\n  canToggleVisibility?: boolean;\n  onRename: (newLabel: string) => void;\n  onToggleVisibility?: () => void;\n}\n\nconst EditableTabLabel = ({\n  label,\n  count,\n  loading,\n  isVisible = true,\n  canToggleVisibility = true,\n  onRename,\n  onToggleVisibility,\n}: IEditableTabLabelProps) => {\n  const { t } = useTranslation('ui');\n  const [editing, setEditing] = useState(false);\n  const [draft, setDraft] = useState(label);\n  const inputRef = useRef<HTMLInputElement>(null);\n\n  useEffect(() => {\n    if (editing) {\n      inputRef.current?.focus();\n      inputRef.current?.select();\n    }\n  }, [editing]);\n\n  const handleEditClick = (e: React.MouseEvent) => {\n    e.stopPropagation();\n    setDraft(label);\n    setEditing(true);\n  };\n\n  const commit = () => {\n    const trimmed = draft.trim();\n    if (trimmed && trimmed !== label) onRename(trimmed);\n    setEditing(false);\n  };\n\n  const handleKeyDown = (e: React.KeyboardEvent<HTMLInputElement>) => {\n    if (e.key === 'Enter') {\n      e.preventDefault();\n      commit();\n    }\n    if (e.key === 'Escape') {\n      setEditing(false);\n      setDraft(label);\n    }\n    e.stopPropagation();\n  };\n\n  if (editing) {\n    return (\n      <div className=\"flex items-center\" onClick={(e) => e.stopPropagation()}>\n        <input\n          ref={inputRef}\n          value={draft}\n          onChange={(e) => setDraft(e.target.value)}\n          onBlur={commit}\n          onKeyDown={handleKeyDown}\n          style={{ width: `${Math.max(draft.length + 2, 6)}ch` }}\n          className=\"border-b border-brand-border bg-transparent px-0 py-0.5 text-sm font-medium leading-none focus:outline-none\"\n        />\n      </div>\n    );\n  }\n\n  return (\n    <div className=\"group/tab flex items-center gap-x-1.5 align-bottom\">\n      <span>{label}</span>\n      {count !== undefined &&\n        (loading ? (\n          <LoadingSpinner size={3} />\n        ) : (\n          <span className=\"inline-flex min-w-[18px] items-center justify-center rounded-full bg-muted-hover px-1.5 py-px text-[11px] font-medium leading-none text-foreground-subtle\">\n            {formatNumber(count)}\n          </span>\n        ))}\n      <ControlledTooltip content={t('controlledTabs.renameTab')}>\n        <ControlledButton\n          aria-label={t('controlledTabs.renameTab')}\n          defaultHtmlButton\n          onClick={handleEditClick}\n          className=\"ml-0.5 flex items-center text-foreground-faint transition-colors hover:text-brand-emphasis\"\n          tabIndex={-1}\n        >\n          <MaterialSymbol icon=\"edit\" size={14} />\n        </ControlledButton>\n      </ControlledTooltip>\n      {onToggleVisibility && (\n        <ControlledTooltip\n          content={\n            !canToggleVisibility\n              ? t('controlledTabs.mustKeepOneEnabled')\n              : isVisible\n                ? t('controlledTabs.disableTab')\n                : t('controlledTabs.enableTabShort')\n          }\n        >\n          <ControlledButton\n            aria-label={isVisible ? t('controlledTabs.disableTab') : t('controlledTabs.enableTabShort')}\n            defaultHtmlButton\n            onClick={(e) => {\n              e.stopPropagation();\n              if (canToggleVisibility) onToggleVisibility();\n            }}\n            className={classNames('ml-0.5 flex items-center transition-colors', {\n              ['text-foreground-faint hover:text-warning-emphasis']: isVisible && canToggleVisibility,\n              ['text-warning-emphasis hover:text-success-emphasis']: !isVisible,\n              ['cursor-not-allowed text-foreground-faint']: isVisible && !canToggleVisibility,\n            })}\n            tabIndex={-1}\n          >\n            <MaterialSymbol icon={isVisible ? 'visibility' : 'visibility_off'} size={14} />\n          </ControlledButton>\n        </ControlledTooltip>\n      )}\n    </div>\n  );\n};\n\nexport interface ITabInfo {\n  label: string;\n  value: string;\n  /** Missing capability removes the tab and never mounts its panel, so no protected request runs. */\n  capability?: TUiCapability | Array<TUiCapability>;\n  count?: number;\n  /** Pendências/alertas da aba — badge âmbar ao lado do nome (oculto quando 0/ausente). */\n  alertCount?: number;\n  tooltip?: string;\n  status?: number | string;\n  isVisible?: boolean;\n  /** When false, the tab keeps a plain label in the bar: no inline rename pencil and no visibility eye (e.g. aggregate tabs). */\n  editable?: boolean;\n  /**\n   * Content rendered after the label, inside the tab (a per-tab actions menu, a status icon). Presses\n   * on it never select or drag the tab, so a menu trigger placed here opens without switching tabs.\n   */\n  trailingSlot?: ReactNode;\n}\n\nexport interface IDataTab {\n  key: string;\n  element: ReactNode;\n}\n\ninterface IControlledTabsProps {\n  initialActiveTab: string;\n  activeTab?: string;\n  tabs: Array<ITabInfo>;\n  dataTabs: Array<IDataTab>;\n  loading?: boolean;\n  /** Blocks tab switching and dims the header, e.g. while a blocking operation runs in the active tab. */\n  disabled?: boolean;\n  handleActiveTabChildren?: () => void;\n  useRenderValidation?: boolean;\n  onTabChange?: (tab: string) => void;\n  beforeTabChange?: (from: string, to: string) => boolean;\n  tabsBodyClassName?: string;\n  tabPanelClassName?: string;\n\n  rootClassName?: string;\n  /** Classes extras aplicadas a cada aba (ex.: reduzir o padding vertical em telas específicas). */\n  tabClassName?: string;\n  headerSlot?: ReactNode;\n  /** Conteúdo fixo alinhado à direita do cabeçalho das abas (ex.: botão de ação principal). */\n  actionsSlot?: ReactNode;\n  onRenameTab?: (value: string, newLabel: string) => void;\n  onToggleTabVisibility?: (value: string) => void;\n  /**\n   * Habilita arrastar-e-soltar das abas no cabeçalho (mesmo molde do drag nativo dos\n   * campos do construtor de fichas). Recebe os values da aba arrastada e da aba alvo;\n   * o consumidor decide como persistir a nova ordem (ex.: tabOrderPriority).\n   */\n  onReorderTab?: (fromValue: string, toValue: string) => void;\n  /**\n   * Renders the tab header as a single horizontally-scrollable line (browser-tab style)\n   * with navigation arrows and a \"+N\" overflow menu, instead of wrapping onto several lines.\n   */\n  scrollableHeader?: boolean;\n  /**\n   * Faz o cabeçalho das abas grudar no topo do container rolável (`position: sticky`), com\n   * fundo sólido e uma sombra sutil que aparece só ao rolar, além de um acabamento mais\n   * delicado nas abas (pill no hover, sublinhado fino e transição suave). Use quando a barra\n   * precisa ficar visível durante todo o scroll (ex.: ficha técnica do produto).\n   */\n  stickyHeader?: boolean;\n  /**\n   * Sincroniza a aba ativa com o query param `activeTab` da URL (ler no mount e\n   * escrever a cada troca). Default `true`. Use `false` em abas dentro de modais/\n   * dialogs, cujo estado é efêmero e não deve poluir a URL da página nem competir\n   * com abas de nível de página que já usam `activeTab`.\n   */\n  syncWithUrl?: boolean;\n}\n\nconst ControlledTabs = forwardRef<unknown, IControlledTabsProps>(\n  (\n    {\n      initialActiveTab,\n      activeTab: controlledActiveTab,\n      tabs: tabsProp,\n      dataTabs: dataTabsProp,\n      loading = false,\n      disabled = false,\n      handleActiveTabChildren,\n      useRenderValidation = false,\n      onTabChange,\n      beforeTabChange,\n      tabsBodyClassName,\n      tabPanelClassName,\n      rootClassName,\n      tabClassName,\n      headerSlot,\n      actionsSlot,\n      onRenameTab,\n      onToggleTabVisibility,\n      onReorderTab,\n      scrollableHeader = false,\n      stickyHeader = false,\n      syncWithUrl = true,\n    },\n    ref,\n  ) => {\n    const { t } = useTranslation('ui');\n    const { check } = useUiAccess();\n\n    const deniedTabValues = useMemo(\n      () => new Set(tabsProp.filter((tab) => tab.capability && !check(tab.capability)).map((tab) => tab.value)),\n      [tabsProp, check],\n    );\n\n    const tabs = useMemo(() => tabsProp.filter((tab) => !deniedTabValues.has(tab.value)), [tabsProp, deniedTabValues]);\n\n    const dataTabs = useMemo(\n      () => dataTabsProp.filter((tabPanel) => !deniedTabValues.has(tabPanel.key)),\n      [dataTabsProp, deniedTabValues],\n    );\n\n    const { location, searchParams, setSearchParams } = useUiNavigation();\n    const urlParamOwnerIdRef = useRef<object>({});\n    const scrollRef = useRef<HTMLDivElement>(null);\n    const revealedTabRef = useRef<string | null>(null);\n    const stickySentinelRef = useRef<HTMLDivElement>(null);\n    const stickyBarRef = useRef<HTMLDivElement>(null);\n    const [canScrollLeft, setCanScrollLeft] = useState(false);\n    const [canScrollRight, setCanScrollRight] = useState(false);\n    // Abas que cruzam uma borda da área rolável (visíveis só pela metade). Ficam invisíveis para\n    // que na borda só apareça aba inteira ou espaço vazio, nunca um pedaço de texto cortado.\n    // Barra sticky: detecta quando a barra \"grudou\" (usuário já rolou) para só então mostrar a sombra.\n    const [isStuck, setIsStuck] = useState(false);\n    // Drag nativo das abas (opt-in via onReorderTab), mesmo molde dos campos do construtor.\n    const dragTabValueRef = useRef<string | null>(null);\n    const [draggingTabValue, setDraggingTabValue] = useState<string | null>(null);\n    const [dragOverTabValue, setDragOverTabValue] = useState<string | null>(null);\n\n    const resolveInitialActiveTab = () => {\n      const fallbackTab = tabs.some((tab) => tab.value === initialActiveTab)\n        ? initialActiveTab\n        : (tabs[0]?.value ?? initialActiveTab);\n\n      if (!syncWithUrl) return fallbackTab;\n      if ((location.state as { ignoreActiveTab?: boolean } | null | undefined)?.ignoreActiveTab === true)\n        return fallbackTab;\n      const urlActiveTab = searchParams.get(TABS_URL_PARAM);\n      const isValidUrlTab = urlActiveTab != null && tabs.some((tab) => tab.value === urlActiveTab);\n      return isValidUrlTab ? urlActiveTab : fallbackTab;\n    };\n\n    const [internalActiveTab, setInternalActiveTab] = useState(resolveInitialActiveTab);\n    const isControlled = controlledActiveTab !== undefined;\n    const activeTab = isControlled ? controlledActiveTab : internalActiveTab;\n\n    const handleActiveTab = (tab: string) => {\n      if (disabled) return;\n      if (beforeTabChange && !beforeTabChange(activeTab, tab)) {\n        if (!isControlled) {\n          setInternalActiveTab(activeTab);\n        }\n        return;\n      }\n      if (handleActiveTabChildren) {\n        handleActiveTabChildren();\n      }\n      if (!isControlled) {\n        setInternalActiveTab(tab);\n      }\n      if (onTabChange) {\n        onTabChange(tab);\n      }\n\n      if (syncWithUrl) {\n        queueUrlParamUpdate(TABS_URL_PARAM, tab, setSearchParams);\n      }\n    };\n\n    useImperativeHandle(ref, () => ({\n      activeTab,\n      setActiveTab: handleActiveTab,\n    }));\n\n    const handleToggleTabVisibility = (value: string) => {\n      const visibleCount = tabs.filter((t) => t.isVisible !== false).length;\n      const isCurrentlyVisible = tabs.find((t) => t.value === value)?.isVisible !== false;\n      if (isCurrentlyVisible && visibleCount <= 1) return;\n      onToggleTabVisibility?.(value);\n    };\n\n    // As abas são o topo da hierarquia de parâmetros: assumem `activeTab` mesmo montando depois de\n    // um controle que já o tivesse reivindicado, e o liberam ao desmontar.\n    useEffect(() => {\n      if (!syncWithUrl) return;\n\n      const ownerId = urlParamOwnerIdRef.current;\n      claimUrlParam(TABS_URL_PARAM, ownerId, URL_PARAM_PRIORITY.tabs);\n\n      return () => releaseUrlParam(TABS_URL_PARAM, ownerId);\n    }, [syncWithUrl]);\n\n    useEffect(() => {\n      if (syncWithUrl && searchParams.get(TABS_URL_PARAM) !== activeTab) {\n        queueUrlParamUpdate(TABS_URL_PARAM, activeTab, setSearchParams);\n      }\n      const tabButton = document.querySelector(`li[data-value=${activeTab}]`) as HTMLElement | null;\n      if (tabButton) {\n        tabButton.click();\n      }\n    }, [activeTab]);\n\n    const updateOverflow = useCallback(() => {\n      const container = scrollRef.current;\n      if (!container) return;\n\n      setCanScrollLeft(container.scrollLeft > 4);\n      setCanScrollRight(container.scrollLeft + container.clientWidth < container.scrollWidth - 4);\n    }, []);\n\n    useEffect(() => {\n      if (!stickyHeader) return;\n      const sentinel = stickySentinelRef.current;\n      if (!sentinel || typeof IntersectionObserver === 'undefined') return;\n      // Descobre o ancestral rolável para observar o sentinela em relação a ele. Quando o sentinela\n      // (logo acima da barra) sai do topo do container, a barra grudou e ligamos a sombra.\n      let scrollParent = sentinel.parentElement;\n      while (scrollParent) {\n        const overflowY = getComputedStyle(scrollParent).overflowY;\n        if (overflowY === 'auto' || overflowY === 'scroll') break;\n        scrollParent = scrollParent.parentElement;\n      }\n      const observer = new IntersectionObserver(([entry]) => setIsStuck(!entry.isIntersecting), {\n        root: scrollParent ?? null,\n        threshold: 0,\n      });\n      observer.observe(sentinel);\n      return () => observer.disconnect();\n    }, [stickyHeader]);\n\n    // Publica a altura da barra fixa como `--sticky-tabs-height` no container rolável, para\n    // que conteúdo sticky mais abaixo (ex.: cabeçalho de material da ficha) possa grudar logo\n    // abaixo da barra em vez de ficar escondido atrás dela.\n    useEffect(() => {\n      if (!stickyHeader) return;\n      const bar = stickyBarRef.current;\n      if (!bar) return;\n      let scrollParent = bar.parentElement;\n      while (scrollParent) {\n        const overflowY = getComputedStyle(scrollParent).overflowY;\n        if (overflowY === 'auto' || overflowY === 'scroll') break;\n        scrollParent = scrollParent.parentElement;\n      }\n      if (!scrollParent) return;\n      const target = scrollParent;\n      let rafId = 0;\n      let lastHeight = -1;\n      // Escreve a variável só quando a altura muda de fato, e fora do ciclo de entrega do\n      // ResizeObserver (via rAF): escrever um valor que afeta layout dentro do callback dispara\n      // \"ResizeObserver loop completed with undelivered notifications\".\n      const publishHeight = () => {\n        const height = bar.offsetHeight;\n        if (height === lastHeight) return;\n        lastHeight = height;\n        target.style.setProperty('--sticky-tabs-height', `${height}px`);\n      };\n      publishHeight();\n      if (typeof ResizeObserver === 'undefined') return;\n      const observer = new ResizeObserver(() => {\n        cancelAnimationFrame(rafId);\n        rafId = requestAnimationFrame(publishHeight);\n      });\n      observer.observe(bar);\n      return () => {\n        cancelAnimationFrame(rafId);\n        observer.disconnect();\n        target.style.removeProperty('--sticky-tabs-height');\n      };\n    }, [stickyHeader]);\n\n    /** False while the strip or the tab is not laid out yet, so the caller tries again later. */\n    const revealActiveTab = useCallback(\n      (behavior: ScrollBehavior): boolean => {\n        const container = scrollRef.current;\n        if (!container?.clientWidth) return false;\n        const tab = Array.from(container.querySelectorAll<HTMLElement>('[data-value]')).find(\n          (node) => node.getAttribute('data-value') === activeTab,\n        );\n        if (!tab) return false;\n        const distance = distanceToReveal(container, tab);\n        if (distance !== 0) container.scrollBy({ left: distance, behavior });\n        return true;\n      },\n      [activeTab],\n    );\n\n    useEffect(() => {\n      if (!scrollableHeader) return;\n      // Once per tab, so a new render never undoes the person's own scrolling. A page opened on a far\n      // tab simply starts there; after that the strip travels, as it does with the arrows.\n      if (revealedTabRef.current !== activeTab) {\n        const behavior = revealedTabRef.current === null ? 'auto' : 'smooth';\n        if (revealActiveTab(behavior)) revealedTabRef.current = activeTab;\n      }\n      updateOverflow();\n      const onResize = () => {\n        revealActiveTab('auto');\n        updateOverflow();\n      };\n      window.addEventListener('resize', onResize);\n\n      // The strip also changes size with no window resize: a side panel opening, the web font\n      // arriving, the arrows themselves appearing.\n      const scroller = scrollRef.current;\n      const observer = scroller && typeof ResizeObserver !== 'undefined' ? new ResizeObserver(onResize) : null;\n      if (scroller && observer) {\n        observer.observe(scroller);\n        if (scroller.firstElementChild) observer.observe(scroller.firstElementChild);\n      }\n\n      return () => {\n        window.removeEventListener('resize', onResize);\n        observer?.disconnect();\n      };\n    }, [scrollableHeader, tabs, updateOverflow, revealActiveTab, activeTab]);\n\n    const scrollByStep = (direction: number) => {\n      const container = scrollRef.current;\n      if (!container) return;\n      const containerRect = container.getBoundingClientRect();\n      const nodes = Array.from(container.querySelectorAll('[data-value]')) as Array<HTMLElement>;\n\n      if (direction > 0) {\n        const nextHidden = nodes.find(\n          (node) => node.getBoundingClientRect().right > containerRect.right - ARROW_ROOM + EDGE_TOLERANCE,\n        );\n        if (!nextHidden) return;\n        const distance = nextHidden.getBoundingClientRect().left - containerRect.left - ARROW_ROOM;\n        container.scrollBy({ left: Math.max(distance, ARROW_ROOM), behavior: 'smooth' });\n        return;\n      }\n\n      const previousHidden = [...nodes]\n        .reverse()\n        .find((node) => node.getBoundingClientRect().left < containerRect.left + ARROW_ROOM - EDGE_TOLERANCE);\n      if (!previousHidden) return;\n      const distance = previousHidden.getBoundingClientRect().right - containerRect.right + ARROW_ROOM;\n      container.scrollBy({\n        left: Math.min(distance, -ARROW_ROOM),\n        behavior: 'smooth',\n      });\n    };\n\n    const tabLabel = (label: string, count?: number, alertCount?: number) => {\n      const showCount = count !== undefined;\n      return (\n        <div className=\"flex items-center gap-x-1.5 align-bottom\">\n          {label}\n          {loading && showCount ? (\n            <LoadingSpinner size={3} />\n          ) : showCount ? (\n            <span className=\"inline-flex min-w-[18px] items-center justify-center rounded-full bg-muted-hover px-1.5 py-px text-[11px] font-medium leading-none text-foreground-subtle\">\n              {formatNumber(count)}\n            </span>\n          ) : null}\n          {Boolean(alertCount) && (\n            <span className=\"inline-flex min-w-[18px] items-center justify-center rounded-full bg-warning-soft px-1.5 py-px text-[11px] font-semibold leading-none text-warning-emphasis\">\n              {formatNumber(alertCount as number)}\n            </span>\n          )}\n        </div>\n      );\n    };\n\n    const handleTabDragEnd = () => {\n      const from = dragTabValueRef.current;\n      const to = dragOverTabValue;\n\n      if (from && to && from !== to) {\n        onReorderTab?.(from, to);\n      }\n\n      dragTabValueRef.current = null;\n      setDraggingTabValue(null);\n      setDragOverTabValue(null);\n    };\n\n    const tabElements = tabs.map((tab, index) => {\n      const isActive = activeTab === tab.value && tab.isVisible !== false;\n      const isInactive = activeTab !== tab.value && tab.isVisible !== false;\n      const isTabDropTarget =\n        Boolean(draggingTabValue) && dragOverTabValue === tab.value && draggingTabValue !== tab.value;\n      const tabDragProps = onReorderTab\n        ? {\n            draggable: true,\n            onDragStart: (event: React.DragEvent) => {\n              // Arrastar a partir do input de renomear deve selecionar texto, não mover a aba; e a\n              // partir do slot de ações (menu da aba) não deve mover nada.\n              if ((event.target as HTMLElement).closest('input, [data-tab-trailing-slot]')) {\n                event.preventDefault();\n                return;\n              }\n              event.dataTransfer.effectAllowed = 'move';\n              dragTabValueRef.current = tab.value;\n              setDraggingTabValue(tab.value);\n            },\n            onDragEnter: (event: React.DragEvent) => {\n              event.preventDefault();\n              if (dragTabValueRef.current) setDragOverTabValue(tab.value);\n            },\n            onDragOver: (event: React.DragEvent) => event.preventDefault(),\n            onDragEnd: handleTabDragEnd,\n          }\n        : {};\n      return (\n        <Tab\n          key={`controlled-tab-${index}-${tab.value}`}\n          value={tab.value}\n          style={{ zIndex: 2 }}\n          disabled={loading}\n          onClick={() => handleActiveTab(tab.value)}\n          {...tabDragProps}\n          className={classNames(\n            'max-w-fit px-4',\n            tabClassName,\n            // Acabamento mais delicado quando a barra é sticky: pill sutil no hover das abas\n            // inativas e peso de fonte mais leve ao trocar de aba.\n            stickyHeader && 'rounded-md transition-interactive duration-fast',\n            {\n              [stickyHeader ? 'font-medium text-brand-emphasis' : 'text-brand-emphasis']: isActive,\n              [stickyHeader ? 'font-normal opacity-70 hover:bg-muted-hover hover:opacity-100' : 'opacity-70']:\n                isInactive,\n              ['!text-foreground-faint line-through opacity-60 hover:!text-foreground-faint']: tab.isVisible === false,\n              ['cursor-grab active:cursor-grabbing']: Boolean(onReorderTab),\n              ['rounded-md bg-brand-soft !opacity-100 ring-1 ring-brand-border']: isTabDropTarget,\n              ['opacity-40']: draggingTabValue === tab.value,\n            },\n          )}\n        >\n          {onRenameTab && tab.editable !== false ? (\n            <EditableTabLabel\n              label={tab.label}\n              count={tab.count}\n              loading={loading}\n              isVisible={tab.isVisible !== false}\n              canToggleVisibility={tab.isVisible === false || tabs.filter((t) => t.isVisible !== false).length > 1}\n              onRename={(newLabel) => onRenameTab(tab.value, newLabel)}\n              onToggleVisibility={onToggleTabVisibility ? () => handleToggleTabVisibility(tab.value) : undefined}\n            />\n          ) : tab.tooltip ? (\n            <ControlledTooltip content={tab.tooltip} className=\"max-w-60\">\n              {tabLabel(tab.label, tab.count, tab.alertCount)}\n            </ControlledTooltip>\n          ) : (\n            tabLabel(tab.label, tab.count, tab.alertCount)\n          )}\n          {tab.trailingSlot && (\n            <span\n              data-tab-trailing-slot\n              className=\"ml-1 flex items-center\"\n              onClick={(event) => event.stopPropagation()}\n              onMouseDown={(event) => event.stopPropagation()}\n              onPointerDown={(event) => event.stopPropagation()}\n              onKeyDown={(event) => event.stopPropagation()}\n            >\n              {tab.trailingSlot}\n            </span>\n          )}\n        </Tab>\n      );\n    });\n\n    // Sublinhado fino (2px). Na barra sticky mantemos a animação de deslize nativa (transform) com\n    // transição suave de ~120ms; nas demais telas o indicador segue estático como antes.\n\n    // Each arrow lies over the strip and only exists while there is something to reach on its side:\n    // the strip keeps its width either way, so the first tab lines up with the content at the start\n    // and the tabs never jump under the pointer.\n    const scrollArrowClass =\n      // Centred with margins: a product may scale a pressed button, and that would drop a translate.\n      'absolute inset-y-0 z-10 my-auto bg-surface shadow-xs ' +\n      'flex size-8 shrink-0 items-center justify-center rounded-full text-foreground-subtle transition-colors hover:bg-brand-soft hover:text-brand-emphasis';\n\n    return (\n      <TabsRoot value={activeTab} className={classNames('!overflow-visible', rootClassName)}>\n        {/* Sentinela de 1px: quando sai do topo do container rolável a barra já grudou e acende a sombra. */}\n        {stickyHeader && <div ref={stickySentinelRef} className=\"h-px\" aria-hidden />}\n        <div\n          ref={stickyBarRef}\n          className={classNames(\n            'flex shrink-0 items-center',\n            // Com header rolável a barra é sempre UMA linha (nowrap): as abas cedem e viram scroll\n            // horizontal, enquanto as ações (shrink-0 + ml-auto) permanecem pinadas à direita e nunca\n            // caem para baixo. Sem header rolável, mantém o comportamento antigo de wrap.\n            scrollableHeader ? 'flex-nowrap gap-x-3' : actionsSlot ? 'flex-wrap gap-x-3 gap-y-2' : 'gap-1',\n            // Gruda logo abaixo do header do produto: fundo sólido para tapar o conteúdo que\n            // rola por baixo e sombra sutil só depois que a barra encosta no topo.\n            stickyHeader && 'sticky top-0 z-20 bg-surface transition-shadow duration-fast',\n            stickyHeader && isStuck && 'shadow-elevation1',\n            disabled && 'pointer-events-none select-none opacity-50',\n          )}\n        >\n          {headerSlot && <>{headerSlot}</>}\n          {scrollableHeader ? (\n            <div className=\"relative flex min-w-0 flex-1 items-center border-b border-border-subtle\">\n              {canScrollLeft && (\n                <ControlledButton\n                  aria-label={t('controlledTabs.scrollLeft')}\n                  defaultHtmlButton\n                  onClick={() => scrollByStep(-1)}\n                  className={classNames(scrollArrowClass, 'left-0')}\n                  tabIndex={-1}\n                >\n                  <MaterialSymbol icon=\"chevron_left\" size={20} />\n                </ControlledButton>\n              )}\n\n              <div ref={scrollRef} onScroll={updateOverflow} className=\"scrollbar-hide min-w-0 flex-1 overflow-x-auto\">\n                <TabsHeader className=\"flex w-max flex-nowrap items-center gap-1 rounded-none border-b-0 border-border-subtle bg-transparent p-0\">\n                  {tabElements}\n                </TabsHeader>\n              </div>\n\n              {canScrollRight && (\n                <ControlledButton\n                  aria-label={t('controlledTabs.scrollRight')}\n                  defaultHtmlButton\n                  onClick={() => scrollByStep(1)}\n                  className={classNames(scrollArrowClass, 'right-0')}\n                  tabIndex={-1}\n                >\n                  <MaterialSymbol icon=\"chevron_right\" size={20} />\n                </ControlledButton>\n              )}\n            </div>\n          ) : (\n            <TabsHeader className=\"flex flex-1 flex-wrap items-center gap-1 rounded-none border-b-0 border-border-subtle bg-transparent p-0\">\n              {tabElements}\n            </TabsHeader>\n          )}\n          {actionsSlot && <div className=\"ml-auto flex shrink-0 items-center\">{actionsSlot}</div>}\n        </div>\n\n        <TabsBody className={tabsBodyClassName}>\n          {dataTabs.map((tabPanel) => {\n            const isTabVisible = tabs.find((t) => t.value === tabPanel.key)?.isVisible !== false;\n            return (\n              <TabPanel key={tabPanel.key} value={tabPanel.key} className={classNames('size-full', tabPanelClassName)}>\n                <div className={classNames('relative size-full', { ['pointer-events-none']: !isTabVisible })}>\n                  {useRenderValidation\n                    ? activeTab === tabPanel.key && (\n                        <div className=\"size-full animate-fade-in transition-interactive duration-slow ease-standard\">\n                          {tabPanel.element}\n                        </div>\n                      )\n                    : tabPanel.element}\n                  {!isTabVisible && (\n                    <div className=\"absolute inset-0 z-10 flex flex-col items-center justify-center gap-2 rounded-lg bg-muted-hover/70 glass-veil\">\n                      <MaterialSymbol icon=\"visibility_off\" size={32} className=\"text-foreground-faint\" />\n                      <span className=\"text-sm font-medium text-foreground-subtle\">\n                        {t('controlledTabs.tabDisabled')}\n                      </span>\n                      {onToggleTabVisibility && (\n                        <ControlledButton\n                          size=\"sm\"\n                          variant=\"outlined\"\n                          className=\"pointer-events-auto mt-1 flex items-center gap-x-1\"\n                          onClick={() => onToggleTabVisibility(tabPanel.key)}\n                        >\n                          <MaterialSymbol icon=\"visibility\" size={16} />\n                          {t('controlledTabs.enableTab')}\n                        </ControlledButton>\n                      )}\n                    </div>\n                  )}\n                </div>\n              </TabPanel>\n            );\n          })}\n        </TabsBody>\n      </TabsRoot>\n    );\n  },\n);\n\nexport default ControlledTabs;\n"],"names":["t","distance"],"mappings":"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"}

package/dist/components/Form/ControlledTabsPrimitives.js.map

@@ -1 +1 @@
-{"version":3,"file":"ControlledTabsPrimitives.js","sources":["../../../src/components/Form/ControlledTabsPrimitives.tsx"],"sourcesContent":["import React, { createContext, forwardRef, useContext } from 'react';\nimport classNames from 'classnames';\n\nimport { mergeClasses } from '@/helpers/mergeClasses';\n\ninterface ITabsContext {\n  active: string;\n}\n\nconst TabsContext = createContext<ITabsContext>({ active: '' });\n\ninterface ITabsRootProps {\n  value: string;\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport const TabsRoot: React.FC<ITabsRootProps> = ({ value, children, className }) => (\n  <TabsContext.Provider value={{ active: value }}>\n    <div className={mergeClasses('block', className)}>{children}</div>\n  </TabsContext.Provider>\n);\n\ninterface ITabsHeaderProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport const TabsHeader: React.FC<ITabsHeaderProps> = ({ children, className }) => (\n  <div role=\"tablist\" className={mergeClasses('relative flex', className)}>\n    {children}\n  </div>\n);\n\ninterface ITabProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'className'> {\n  value: string;\n  disabled?: boolean;\n  className?: string;\n  children: React.ReactNode;\n}\n\n/**\n * Rendered as a div with role=\"tab\", not a native button: a tab can carry its own controls\n * (inline rename, visibility toggle, drag handle), and a button inside a button is invalid\n * HTML that silently breaks the inner controls.\n *\n * The active underline lives on the tab itself rather than on a separate sliding indicator,\n * so no measurement is needed and reordering or horizontal scrolling cannot desynchronise it.\n */\nexport const Tab = forwardRef<HTMLDivElement, ITabProps>(\n  ({ value, disabled = false, className, children, ...rest }, ref) => {\n    const { active } = useContext(TabsContext);\n    const isActive = active === value;\n\n    return (\n      <div\n        ref={ref}\n        role=\"tab\"\n        // ControlledTabs locates tabs by this attribute to scroll the header and hide clipped ones.\n        data-value={value}\n        aria-selected={isActive}\n        tabIndex={disabled ? -1 : 0}\n        className={mergeClasses(\n          classNames(\n            'relative flex cursor-pointer select-none items-center justify-center border-b-2 py-2 text-sm transition-interactive',\n            isActive ? 'border-brand' : 'border-transparent',\n            { 'pointer-events-none opacity-50': disabled },\n          ),\n          className,\n        )}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nTab.displayName = 'Tab';\n\ninterface ITabsBodyProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport const TabsBody: React.FC<ITabsBodyProps> = ({ children, className }) => (\n  <div className={mergeClasses('block w-full', className)}>{children}</div>\n);\n\ninterface ITabPanelProps {\n  value: string;\n  children: React.ReactNode;\n  className?: string;\n}\n\n/**\n * Inactive panels stay MOUNTED and hidden. Unmounting them would discard the state, focus\n * and scroll position of every tab the user is not looking at.\n */\nexport const TabPanel: React.FC<ITabPanelProps> = ({ value, children, className }) => {\n  const { active } = useContext(TabsContext);\n  const isActive = active === value;\n\n  // `hidden` goes AFTER the consumer classes on purpose: a `tabPanelClassName` such as\n  // `flex flex-col` is a display utility too, so merged the other way round it would win over\n  // `hidden` and every inactive panel would render stacked under the active one.\n  return (\n    <div role=\"tabpanel\" hidden={!isActive} className={mergeClasses(className, classNames({ '!hidden': !isActive }))}>\n      {children}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;AASA,MAAM,cAAc,cAA4B,EAAE,QAAQ,IAAI;AAQvD,MAAM,WAAqC,CAAC,EAAE,OAAO,UAAU,gBACpE,oBAAC,YAAY,UAAZ,EAAqB,OAAO,EAAE,QAAQ,MAAA,GACrC,UAAA,oBAAC,OAAA,EAAI,WAAW,aAAa,SAAS,SAAS,GAAI,SAAA,CAAS,EAAA,CAC9D;AAQK,MAAM,aAAyC,CAAC,EAAE,UAAU,gBACjE,oBAAC,OAAA,EAAI,MAAK,WAAU,WAAW,aAAa,iBAAiB,SAAS,GACnE,SAAA,CACH;AAkBK,MAAM,MAAM;AAAA,EACjB,CAAC,EAAE,OAAO,WAAW,OAAO,WAAW,UAAU,GAAG,KAAA,GAAQ,QAAQ;AAClE,UAAM,EAAE,OAAA,IAAW,WAAW,WAAW;AACzC,UAAM,WAAW,WAAW;AAE5B,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QAEL,cAAY;AAAA,QACZ,iBAAe;AAAA,QACf,UAAU,WAAW,KAAK;AAAA,QAC1B,WAAW;AAAA,UACT;AAAA,YACE;AAAA,YACA,WAAW,iBAAiB;AAAA,YAC5B,EAAE,kCAAkC,SAAA;AAAA,UAAS;AAAA,UAE/C;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,IAAI,cAAc;AAOX,MAAM,WAAqC,CAAC,EAAE,UAAU,UAAA,MAC7D,oBAAC,OAAA,EAAI,WAAW,aAAa,gBAAgB,SAAS,GAAI,SAAA,CAAS;AAa9D,MAAM,WAAqC,CAAC,EAAE,OAAO,UAAU,gBAAgB;AACpF,QAAM,EAAE,OAAA,IAAW,WAAW,WAAW;AACzC,QAAM,WAAW,WAAW;AAK5B,6BACG,OAAA,EAAI,MAAK,YAAW,QAAQ,CAAC,UAAU,WAAW,aAAa,WAAW,WAAW,EAAE,WAAW,CAAC,UAAU,CAAC,GAC5G,UACH;AAEJ;"}
+{"version":3,"file":"ControlledTabsPrimitives.js","sources":["../../../src/components/Form/ControlledTabsPrimitives.tsx"],"sourcesContent":["import React, { createContext, forwardRef, useContext } from 'react';\nimport classNames from 'classnames';\n\nimport { mergeClasses } from '@/helpers/mergeClasses';\n\ninterface ITabsContext {\n  active: string;\n}\n\nconst TabsContext = createContext<ITabsContext>({ active: '' });\n\ninterface ITabsRootProps {\n  value: string;\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport const TabsRoot: React.FC<ITabsRootProps> = ({ value, children, className }) => (\n  <TabsContext.Provider value={{ active: value }}>\n    <div className={mergeClasses('block', className)}>{children}</div>\n  </TabsContext.Provider>\n);\n\ninterface ITabsHeaderProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport const TabsHeader: React.FC<ITabsHeaderProps> = ({ children, className }) => (\n  <div role=\"tablist\" className={mergeClasses('relative flex', className)}>\n    {children}\n  </div>\n);\n\ninterface ITabProps extends Omit<React.HTMLAttributes<HTMLDivElement>, 'className'> {\n  value: string;\n  disabled?: boolean;\n  className?: string;\n  children: React.ReactNode;\n}\n\n/**\n * Rendered as a div with role=\"tab\", not a native button: a tab can carry its own controls\n * (inline rename, visibility toggle, drag handle), and a button inside a button is invalid\n * HTML that silently breaks the inner controls.\n *\n * The active underline lives on the tab itself rather than on a separate sliding indicator,\n * so no measurement is needed and reordering or horizontal scrolling cannot desynchronise it.\n */\nexport const Tab = forwardRef<HTMLDivElement, ITabProps>(\n  ({ value, disabled = false, className, children, ...rest }, ref) => {\n    const { active } = useContext(TabsContext);\n    const isActive = active === value;\n\n    return (\n      <div\n        ref={ref}\n        role=\"tab\"\n        // ControlledTabs locates tabs by this attribute to scroll the header.\n        data-value={value}\n        aria-selected={isActive}\n        tabIndex={disabled ? -1 : 0}\n        className={mergeClasses(\n          classNames(\n            'relative flex cursor-pointer select-none items-center justify-center border-b-2 py-2 text-sm transition-interactive',\n            isActive ? 'border-brand' : 'border-transparent',\n            { 'pointer-events-none opacity-50': disabled },\n          ),\n          className,\n        )}\n        {...rest}\n      >\n        {children}\n      </div>\n    );\n  },\n);\n\nTab.displayName = 'Tab';\n\ninterface ITabsBodyProps {\n  children: React.ReactNode;\n  className?: string;\n}\n\nexport const TabsBody: React.FC<ITabsBodyProps> = ({ children, className }) => (\n  <div className={mergeClasses('block w-full', className)}>{children}</div>\n);\n\ninterface ITabPanelProps {\n  value: string;\n  children: React.ReactNode;\n  className?: string;\n}\n\n/**\n * Inactive panels stay MOUNTED and hidden. Unmounting them would discard the state, focus\n * and scroll position of every tab the user is not looking at.\n */\nexport const TabPanel: React.FC<ITabPanelProps> = ({ value, children, className }) => {\n  const { active } = useContext(TabsContext);\n  const isActive = active === value;\n\n  // `hidden` goes AFTER the consumer classes on purpose: a `tabPanelClassName` such as\n  // `flex flex-col` is a display utility too, so merged the other way round it would win over\n  // `hidden` and every inactive panel would render stacked under the active one.\n  return (\n    <div role=\"tabpanel\" hidden={!isActive} className={mergeClasses(className, classNames({ '!hidden': !isActive }))}>\n      {children}\n    </div>\n  );\n};\n"],"names":[],"mappings":";;;;AASA,MAAM,cAAc,cAA4B,EAAE,QAAQ,IAAI;AAQvD,MAAM,WAAqC,CAAC,EAAE,OAAO,UAAU,gBACpE,oBAAC,YAAY,UAAZ,EAAqB,OAAO,EAAE,QAAQ,MAAA,GACrC,UAAA,oBAAC,OAAA,EAAI,WAAW,aAAa,SAAS,SAAS,GAAI,SAAA,CAAS,EAAA,CAC9D;AAQK,MAAM,aAAyC,CAAC,EAAE,UAAU,gBACjE,oBAAC,OAAA,EAAI,MAAK,WAAU,WAAW,aAAa,iBAAiB,SAAS,GACnE,SAAA,CACH;AAkBK,MAAM,MAAM;AAAA,EACjB,CAAC,EAAE,OAAO,WAAW,OAAO,WAAW,UAAU,GAAG,KAAA,GAAQ,QAAQ;AAClE,UAAM,EAAE,OAAA,IAAW,WAAW,WAAW;AACzC,UAAM,WAAW,WAAW;AAE5B,WACE;AAAA,MAAC;AAAA,MAAA;AAAA,QACC;AAAA,QACA,MAAK;AAAA,QAEL,cAAY;AAAA,QACZ,iBAAe;AAAA,QACf,UAAU,WAAW,KAAK;AAAA,QAC1B,WAAW;AAAA,UACT;AAAA,YACE;AAAA,YACA,WAAW,iBAAiB;AAAA,YAC5B,EAAE,kCAAkC,SAAA;AAAA,UAAS;AAAA,UAE/C;AAAA,QAAA;AAAA,QAED,GAAG;AAAA,QAEH;AAAA,MAAA;AAAA,IAAA;AAAA,EAGP;AACF;AAEA,IAAI,cAAc;AAOX,MAAM,WAAqC,CAAC,EAAE,UAAU,UAAA,MAC7D,oBAAC,OAAA,EAAI,WAAW,aAAa,gBAAgB,SAAS,GAAI,SAAA,CAAS;AAa9D,MAAM,WAAqC,CAAC,EAAE,OAAO,UAAU,gBAAgB;AACpF,QAAM,EAAE,OAAA,IAAW,WAAW,WAAW;AACzC,QAAM,WAAW,WAAW;AAK5B,6BACG,OAAA,EAAI,MAAK,YAAW,QAAQ,CAAC,UAAU,WAAW,aAAa,WAAW,WAAW,EAAE,WAAW,CAAC,UAAU,CAAC,GAC5G,UACH;AAEJ;"}

package/dist/components/Shell/SidebarMenu.d.ts

@@ -9,6 +9,11 @@ export interface ISidebarMenuItem {
     externalUrl?: string;
     end?: boolean;
     section?: TUiSidebarSection;
+    /**
+     * A group of the product's own: rows sharing this text sit under a header showing it as
+     * written, in the order they first appear, after the fixed sections. `section` wins.
+     */
+    sectionLabel?: string;
     children?: Array<ISidebarMenuItem>;
 }
 export declare const resolveSidebarItemId: (item: ISidebarMenuItem) => string;

package/dist/components/Shell/SidebarMenu.js

@@ -151,12 +151,15 @@ const SECTION_LABEL_KEYS = {
   management: "sidebar.sections.management",
   registration: "sidebar.sections.registration"
 };
-const SidebarSectionHeader = ({ section, collapsed, withDivider }) => {
+const SidebarSectionHeader = ({ section, label, collapsed, withDivider }) => {
   const { t } = useTranslation("ui");
   if (collapsed) {
     if (!withDivider) return null;
     return /* @__PURE__ */ jsx("li", { "aria-hidden": true, className: "flex flex-col px-3", children: /* @__PURE__ */ jsx("span", { className: "border-t border-border/70" }) });
   }
+  if (section === null) {
+    return /* @__PURE__ */ jsx("li", { className: "mt-3 flex min-w-0 flex-col", children: /* @__PURE__ */ jsx("span", { className: "truncate px-3 pb-0.5 text-xs font-semibold text-brand-emphasis", children: label }) });
+  }
   return /* @__PURE__ */ jsxs("li", { className: classNames("flex flex-col", withDivider ? "mt-2" : "mt-1"), children: [
     withDivider && /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "mx-3 mb-2 border-t border-border/70" }),
     /* @__PURE__ */ jsx("span", { className: "px-3 pb-0.5 text-xxs font-semibold uppercase tracking-wide text-foreground-subtle", children: t(SECTION_LABEL_KEYS[section]) })
@@ -164,12 +167,24 @@ const SidebarSectionHeader = ({ section, collapsed, withDivider }) => {
 };
 const SECTION_ORDER = ["favorites", "management", "registration"];
 const groupItemsBySection = (items) => {
-  const itemsWithoutSection = (items ?? []).filter((item) => !item.section);
+  const rows = items ?? [];
+  const ungrouped = rows.filter((item) => !item.section && !item.sectionLabel);
   const sectionGroups = SECTION_ORDER.map((section) => ({
     section,
-    items: (items ?? []).filter((item) => item.section === section)
+    label: null,
+    items: rows.filter((item) => item.section === section)
   })).filter((group) => group.items.length > 0);
-  return itemsWithoutSection.length ? [{ section: null, items: itemsWithoutSection }, ...sectionGroups] : sectionGroups;
+  const named = rows.filter((item) => !item.section && item.sectionLabel);
+  const labelGroups = [...new Set(named.map((item) => item.sectionLabel ?? ""))].map((label) => ({
+    section: null,
+    label,
+    items: named.filter((item) => item.sectionLabel === label)
+  }));
+  return [
+    ...ungrouped.length ? [{ section: null, label: null, items: ungrouped }] : [],
+    ...sectionGroups,
+    ...labelGroups
+  ];
 };
 const SidebarMenu = ({
   items,
@@ -193,19 +208,20 @@ const SidebarMenu = ({
     setOpenKey((current) => current === key ? null : key);
   };
   const showSections = level === 0;
-  const groups = showSections ? groupItemsBySection(items) : [{ section: null, items: items ?? [] }];
+  const groups = showSections ? groupItemsBySection(items) : [{ section: null, label: null, items: items ?? [] }];
   return /* @__PURE__ */ jsx("ul", { className: classNames("flex flex-col", level === 0 ? "gap-y-2" : "gap-y-1"), children: groups.flatMap((group, groupIndex) => {
     const rows = [];
-    if (group.section) {
+    if (group.section || group.label) {
       rows.push(
         /* @__PURE__ */ jsx(
           SidebarSectionHeader,
           {
             section: group.section,
+            label: group.label,
             collapsed,
             withDivider: groupIndex > 0
           },
-          `section-${group.section}`
+          `section-${group.section ?? group.label}`
         )
       );
     }

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

@@ -1 +1 @@
-{"version":3,"file":"SidebarMenu.js","sources":["../../../src/components/Shell/SidebarMenu.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport { useUiNavigation } from '@/components/Navigation/UiNavigationContext';\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport { MaterialSymbol, MaterialSymbolWeight, SymbolCodepoints } from '@/components/UI/MaterialSymbol';\n\nimport { resolveSidebarFavoriteKey, useSidebarFavorites } from './sidebarFavorites';\n\nexport type TUiSidebarSection = 'favorites' | 'management' | 'registration';\n\nexport interface ISidebarMenuItem {\n  id?: string;\n  weight?: MaterialSymbolWeight;\n  icon: SymbolCodepoints;\n  text: string;\n  to: string;\n  externalUrl?: string;\n  end?: boolean;\n  section?: TUiSidebarSection;\n  children?: Array<ISidebarMenuItem>;\n}\n\nexport const resolveSidebarItemId = (item: ISidebarMenuItem): string => item.id ?? `${item.to}:${item.text}`;\n\ninterface ISidebarLocation {\n  pathname: string;\n  search: string;\n}\n\ninterface ISidebarMenuProps {\n  items: Array<ISidebarMenuItem>;\n  activeClass: string;\n  collapsed: boolean;\n  activeIconClass?: string;\n  onNavigate?: () => void;\n  level?: number;\n}\n\nconst matchesRoute = (location: ISidebarLocation, target: string, end = false): boolean => {\n  if (!target || target === '#') return false;\n\n  if (target.includes('?')) {\n    const [pathPart, queryPart] = target.split('?');\n    const samePath = end\n      ? location.pathname === pathPart\n      : location.pathname === pathPart || location.pathname.startsWith(`${pathPart}/`);\n    if (!samePath) return false;\n\n    const currentParams = new URLSearchParams(location.search);\n    const expectedParams = new URLSearchParams(queryPart);\n\n    return Array.from(expectedParams.entries()).every(([key, value]) => currentParams.get(key) === value);\n  }\n\n  return end\n    ? location.pathname === target\n    : location.pathname === target || location.pathname.startsWith(`${target}/`);\n};\n\nconst containsActiveRoute = (item: ISidebarMenuItem, location: ISidebarLocation): boolean =>\n  item.children?.length\n    ? item.children.some((child) => containsActiveRoute(child, location))\n    : matchesRoute(location, item.to, item.end);\n\ninterface ISidebarMenuRowProps {\n  item: ISidebarMenuItem;\n  isOpen: boolean;\n  collapsed: boolean;\n  onToggle: () => void;\n  activeClass: string;\n  activeIconClass?: string;\n  onNavigate?: () => void;\n  level: number;\n}\n\ninterface ISidebarFavoriteToggleProps {\n  favoriteKey: string;\n}\n\nconst SidebarFavoriteToggle: React.FC<ISidebarFavoriteToggleProps> = ({ favoriteKey }) => {\n  const { t } = useTranslation('ui');\n  const { isFavorite, toggleFavorite } = useSidebarFavorites();\n  const favorite = isFavorite(favoriteKey);\n\n  return (\n    <ControlledTooltip content={t(favorite ? 'sidebar.favorites.remove' : 'sidebar.favorites.add')} placement=\"right\">\n      <ControlledButton\n        aria-label={t(favorite ? 'sidebar.favorites.remove' : 'sidebar.favorites.add')}\n        defaultHtmlButton\n        onClick={() => toggleFavorite(favoriteKey)}\n        aria-pressed={favorite}\n        className={classNames(\n          'absolute right-1 top-1/2 flex size-7 -translate-y-1/2 items-center justify-center rounded-md transition-interactive duration-fast hover:bg-muted-active focus-visible:opacity-100 group-hover/row:opacity-100 [@media(hover:none)]:opacity-100',\n          favorite ? 'text-warning-emphasis opacity-0' : 'text-foreground-subtle opacity-0 hover:text-foreground',\n        )}\n      >\n        <MaterialSymbol icon=\"star\" size={16} fill={favorite} />\n      </ControlledButton>\n    </ControlledTooltip>\n  );\n};\n\nconst SidebarMenuRow: React.FC<ISidebarMenuRowProps> = ({\n  item,\n  isOpen,\n  collapsed,\n  onToggle,\n  activeClass,\n  activeIconClass,\n  onNavigate,\n  level,\n}) => {\n  const { location, Link: NavigationLink } = useUiNavigation();\n  const { canFavorite } = useSidebarFavorites();\n  const contentRef = useRef<HTMLDivElement>(null);\n  const submenuRef = useRef<HTMLDivElement>(null);\n  const [maxHeight, setMaxHeight] = useState('0px');\n\n  const hasChildren = Boolean(item.children?.length);\n  const isActive = hasChildren ? containsActiveRoute(item, location) : matchesRoute(location, item.to, item.end);\n  const submenuOpen = isOpen && !collapsed;\n\n  /* `max-height: 0` hides the links but leaves them in the Tab order, so the keyboard lands on rows\n     nobody can see. Set through the DOM because React 18 does not type the attribute. */\n  useEffect(() => {\n    const submenu = submenuRef.current;\n    if (!submenu) return;\n    if (submenuOpen) submenu.removeAttribute('inert');\n    else submenu.setAttribute('inert', '');\n  }, [submenuOpen]);\n\n  useEffect(() => {\n    const content = contentRef.current;\n    if (!content) return;\n\n    if (!submenuOpen) {\n      setMaxHeight('0px');\n      return;\n    }\n\n    const updateHeight = () => setMaxHeight(`${content.scrollHeight}px`);\n    updateHeight();\n\n    const observer = new ResizeObserver(updateHeight);\n    observer.observe(content);\n\n    return () => observer.disconnect();\n  }, [submenuOpen]);\n\n  const rowClassName = classNames(\n    'relative flex h-9 w-full items-center gap-x-3 rounded-lg px-3 text-left transition-colors duration-base',\n    isActive ? activeClass : 'text-foreground-muted hover:bg-muted-hover hover:text-foreground',\n  );\n\n  const iconClassName = classNames(\n    'shrink-0',\n    isActive ? (activeIconClass ?? 'text-brand-emphasis') : 'text-foreground-muted',\n  );\n\n  const activeBar = isActive ? (\n    <span aria-hidden className=\"absolute left-0 top-1/2 h-5 w-0.5 -translate-y-1/2 rounded-full bg-brand\" />\n  ) : null;\n\n  const icon = <MaterialSymbol icon={item.icon} size={20} weight={item.weight || 400} className={iconClassName} />;\n  const label = <span className={classNames('sidebar-label text-sm', { 'is-collapsed': collapsed })}>{item.text}</span>;\n\n  if (item.externalUrl) {\n    return (\n      <li className=\"flex flex-col\">\n        <a\n          href={item.externalUrl}\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          className={rowClassName}\n          onClick={onNavigate}\n        >\n          {activeBar}\n          {icon}\n          {label}\n        </a>\n      </li>\n    );\n  }\n\n  if (hasChildren) {\n    return (\n      <li className=\"flex flex-col\">\n        <ControlledButton defaultHtmlButton onClick={onToggle} aria-expanded={submenuOpen} className={rowClassName}>\n          {activeBar}\n          {icon}\n          {label}\n          <MaterialSymbol\n            icon=\"chevron_right\"\n            size={18}\n            className={classNames('sidebar-chevron ml-auto shrink-0 text-foreground-subtle', {\n              'is-collapsed': collapsed,\n              'is-open': submenuOpen,\n            })}\n          />\n        </ControlledButton>\n\n        <div ref={submenuRef} style={{ maxHeight }} className={classNames('sidebar-submenu', { 'mt-1': submenuOpen })}>\n          <div ref={contentRef} className=\"pl-5\">\n            <SidebarMenu\n              items={item.children ?? []}\n              collapsed={collapsed}\n              activeClass={activeClass}\n              activeIconClass={activeIconClass}\n              onNavigate={onNavigate}\n              level={level + 1}\n            />\n          </div>\n        </div>\n      </li>\n    );\n  }\n\n  const favoriteKey = canFavorite && !collapsed ? resolveSidebarFavoriteKey(item) : null;\n\n  return (\n    <li className=\"group/row relative flex flex-col\">\n      <NavigationLink to={item.to} className={classNames(rowClassName, { 'pr-9': favoriteKey })} onClick={onNavigate}>\n        {activeBar}\n        {icon}\n        {label}\n      </NavigationLink>\n      {favoriteKey && <SidebarFavoriteToggle favoriteKey={favoriteKey} />}\n    </li>\n  );\n};\n\nconst SECTION_LABEL_KEYS: Record<TUiSidebarSection, string> = {\n  favorites: 'sidebar.sections.favorites',\n  management: 'sidebar.sections.management',\n  registration: 'sidebar.sections.registration',\n};\n\ninterface ISidebarSectionHeaderProps {\n  section: TUiSidebarSection;\n  collapsed: boolean;\n  withDivider: boolean;\n}\n\nconst SidebarSectionHeader: React.FC<ISidebarSectionHeaderProps> = ({ section, collapsed, withDivider }) => {\n  const { t } = useTranslation('ui');\n\n  if (collapsed) {\n    if (!withDivider) return null;\n    return (\n      <li aria-hidden className=\"flex flex-col px-3\">\n        <span className=\"border-t border-border/70\" />\n      </li>\n    );\n  }\n\n  return (\n    <li className={classNames('flex flex-col', withDivider ? 'mt-2' : 'mt-1')}>\n      {withDivider && <span aria-hidden className=\"mx-3 mb-2 border-t border-border/70\" />}\n      <span className=\"px-3 pb-0.5 text-xxs font-semibold uppercase tracking-wide text-foreground-subtle\">\n        {t(SECTION_LABEL_KEYS[section])}\n      </span>\n    </li>\n  );\n};\n\nconst SECTION_ORDER: Array<TUiSidebarSection> = ['favorites', 'management', 'registration'];\n\ninterface ISidebarMenuGroup {\n  section: TUiSidebarSection | null;\n  items: Array<ISidebarMenuItem>;\n}\n\nconst groupItemsBySection = (items: Array<ISidebarMenuItem>): Array<ISidebarMenuGroup> => {\n  const itemsWithoutSection = (items ?? []).filter((item) => !item.section);\n  const sectionGroups = SECTION_ORDER.map((section) => ({\n    section,\n    items: (items ?? []).filter((item) => item.section === section),\n  })).filter((group) => group.items.length > 0);\n\n  return itemsWithoutSection.length ? [{ section: null, items: itemsWithoutSection }, ...sectionGroups] : sectionGroups;\n};\n\nconst SidebarMenu: React.FC<ISidebarMenuProps> = ({\n  items,\n  activeClass,\n  collapsed,\n  activeIconClass,\n  onNavigate,\n  level = 0,\n}) => {\n  const { location } = useUiNavigation();\n\n  const activeKey =\n    items\n      .filter((item) => Boolean(item.children?.length) && containsActiveRoute(item, location))\n      .map(resolveSidebarItemId)[0] ?? null;\n\n  const [openKey, setOpenKey] = useState<string | null>(activeKey);\n  const previousActiveKey = useRef(activeKey);\n\n  useEffect(() => {\n    if (activeKey && activeKey !== previousActiveKey.current) {\n      setOpenKey(activeKey);\n    }\n    previousActiveKey.current = activeKey;\n  }, [activeKey]);\n\n  const handleToggle = (key: string) => {\n    setOpenKey((current) => (current === key ? null : key));\n  };\n\n  const showSections = level === 0;\n  const groups = showSections ? groupItemsBySection(items) : [{ section: null, items: items ?? [] }];\n\n  return (\n    <ul className={classNames('flex flex-col', level === 0 ? 'gap-y-2' : 'gap-y-1')}>\n      {groups.flatMap((group, groupIndex) => {\n        const rows: Array<React.ReactElement> = [];\n\n        if (group.section) {\n          rows.push(\n            <SidebarSectionHeader\n              key={`section-${group.section}`}\n              section={group.section}\n              collapsed={collapsed}\n              withDivider={groupIndex > 0}\n            />,\n          );\n        }\n\n        group.items.forEach((item) => {\n          const itemId = resolveSidebarItemId(item);\n\n          rows.push(\n            <SidebarMenuRow\n              key={itemId}\n              item={item}\n              isOpen={openKey === itemId}\n              collapsed={collapsed}\n              onToggle={() => handleToggle(itemId)}\n              activeClass={activeClass}\n              activeIconClass={activeIconClass}\n              onNavigate={onNavigate}\n              level={level}\n            />,\n          );\n        });\n\n        return rows;\n      })}\n    </ul>\n  );\n};\n\nexport default SidebarMenu;\n"],"names":[],"mappings":"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"}
+{"version":3,"file":"SidebarMenu.js","sources":["../../../src/components/Shell/SidebarMenu.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from 'react';\nimport classNames from 'classnames';\nimport { useTranslation } from 'react-i18next';\n\nimport ControlledButton from '@/components/Form/ControlledButton';\nimport { useUiNavigation } from '@/components/Navigation/UiNavigationContext';\nimport ControlledTooltip from '@/components/UI/ControlledTooltip';\nimport { MaterialSymbol, MaterialSymbolWeight, SymbolCodepoints } from '@/components/UI/MaterialSymbol';\n\nimport { resolveSidebarFavoriteKey, useSidebarFavorites } from './sidebarFavorites';\n\nexport type TUiSidebarSection = 'favorites' | 'management' | 'registration';\n\nexport interface ISidebarMenuItem {\n  id?: string;\n  weight?: MaterialSymbolWeight;\n  icon: SymbolCodepoints;\n  text: string;\n  to: string;\n  externalUrl?: string;\n  end?: boolean;\n  section?: TUiSidebarSection;\n  /**\n   * A group of the product's own: rows sharing this text sit under a header showing it as\n   * written, in the order they first appear, after the fixed sections. `section` wins.\n   */\n  sectionLabel?: string;\n  children?: Array<ISidebarMenuItem>;\n}\n\nexport const resolveSidebarItemId = (item: ISidebarMenuItem): string => item.id ?? `${item.to}:${item.text}`;\n\ninterface ISidebarLocation {\n  pathname: string;\n  search: string;\n}\n\ninterface ISidebarMenuProps {\n  items: Array<ISidebarMenuItem>;\n  activeClass: string;\n  collapsed: boolean;\n  activeIconClass?: string;\n  onNavigate?: () => void;\n  level?: number;\n}\n\nconst matchesRoute = (location: ISidebarLocation, target: string, end = false): boolean => {\n  if (!target || target === '#') return false;\n\n  if (target.includes('?')) {\n    const [pathPart, queryPart] = target.split('?');\n    const samePath = end\n      ? location.pathname === pathPart\n      : location.pathname === pathPart || location.pathname.startsWith(`${pathPart}/`);\n    if (!samePath) return false;\n\n    const currentParams = new URLSearchParams(location.search);\n    const expectedParams = new URLSearchParams(queryPart);\n\n    return Array.from(expectedParams.entries()).every(([key, value]) => currentParams.get(key) === value);\n  }\n\n  return end\n    ? location.pathname === target\n    : location.pathname === target || location.pathname.startsWith(`${target}/`);\n};\n\nconst containsActiveRoute = (item: ISidebarMenuItem, location: ISidebarLocation): boolean =>\n  item.children?.length\n    ? item.children.some((child) => containsActiveRoute(child, location))\n    : matchesRoute(location, item.to, item.end);\n\ninterface ISidebarMenuRowProps {\n  item: ISidebarMenuItem;\n  isOpen: boolean;\n  collapsed: boolean;\n  onToggle: () => void;\n  activeClass: string;\n  activeIconClass?: string;\n  onNavigate?: () => void;\n  level: number;\n}\n\ninterface ISidebarFavoriteToggleProps {\n  favoriteKey: string;\n}\n\nconst SidebarFavoriteToggle: React.FC<ISidebarFavoriteToggleProps> = ({ favoriteKey }) => {\n  const { t } = useTranslation('ui');\n  const { isFavorite, toggleFavorite } = useSidebarFavorites();\n  const favorite = isFavorite(favoriteKey);\n\n  return (\n    <ControlledTooltip content={t(favorite ? 'sidebar.favorites.remove' : 'sidebar.favorites.add')} placement=\"right\">\n      <ControlledButton\n        aria-label={t(favorite ? 'sidebar.favorites.remove' : 'sidebar.favorites.add')}\n        defaultHtmlButton\n        onClick={() => toggleFavorite(favoriteKey)}\n        aria-pressed={favorite}\n        className={classNames(\n          'absolute right-1 top-1/2 flex size-7 -translate-y-1/2 items-center justify-center rounded-md transition-interactive duration-fast hover:bg-muted-active focus-visible:opacity-100 group-hover/row:opacity-100 [@media(hover:none)]:opacity-100',\n          favorite ? 'text-warning-emphasis opacity-0' : 'text-foreground-subtle opacity-0 hover:text-foreground',\n        )}\n      >\n        <MaterialSymbol icon=\"star\" size={16} fill={favorite} />\n      </ControlledButton>\n    </ControlledTooltip>\n  );\n};\n\nconst SidebarMenuRow: React.FC<ISidebarMenuRowProps> = ({\n  item,\n  isOpen,\n  collapsed,\n  onToggle,\n  activeClass,\n  activeIconClass,\n  onNavigate,\n  level,\n}) => {\n  const { location, Link: NavigationLink } = useUiNavigation();\n  const { canFavorite } = useSidebarFavorites();\n  const contentRef = useRef<HTMLDivElement>(null);\n  const submenuRef = useRef<HTMLDivElement>(null);\n  const [maxHeight, setMaxHeight] = useState('0px');\n\n  const hasChildren = Boolean(item.children?.length);\n  const isActive = hasChildren ? containsActiveRoute(item, location) : matchesRoute(location, item.to, item.end);\n  const submenuOpen = isOpen && !collapsed;\n\n  /* `max-height: 0` hides the links but leaves them in the Tab order, so the keyboard lands on rows\n     nobody can see. Set through the DOM because React 18 does not type the attribute. */\n  useEffect(() => {\n    const submenu = submenuRef.current;\n    if (!submenu) return;\n    if (submenuOpen) submenu.removeAttribute('inert');\n    else submenu.setAttribute('inert', '');\n  }, [submenuOpen]);\n\n  useEffect(() => {\n    const content = contentRef.current;\n    if (!content) return;\n\n    if (!submenuOpen) {\n      setMaxHeight('0px');\n      return;\n    }\n\n    const updateHeight = () => setMaxHeight(`${content.scrollHeight}px`);\n    updateHeight();\n\n    const observer = new ResizeObserver(updateHeight);\n    observer.observe(content);\n\n    return () => observer.disconnect();\n  }, [submenuOpen]);\n\n  const rowClassName = classNames(\n    'relative flex h-9 w-full items-center gap-x-3 rounded-lg px-3 text-left transition-colors duration-base',\n    isActive ? activeClass : 'text-foreground-muted hover:bg-muted-hover hover:text-foreground',\n  );\n\n  const iconClassName = classNames(\n    'shrink-0',\n    isActive ? (activeIconClass ?? 'text-brand-emphasis') : 'text-foreground-muted',\n  );\n\n  const activeBar = isActive ? (\n    <span aria-hidden className=\"absolute left-0 top-1/2 h-5 w-0.5 -translate-y-1/2 rounded-full bg-brand\" />\n  ) : null;\n\n  const icon = <MaterialSymbol icon={item.icon} size={20} weight={item.weight || 400} className={iconClassName} />;\n  const label = <span className={classNames('sidebar-label text-sm', { 'is-collapsed': collapsed })}>{item.text}</span>;\n\n  if (item.externalUrl) {\n    return (\n      <li className=\"flex flex-col\">\n        <a\n          href={item.externalUrl}\n          target=\"_blank\"\n          rel=\"noopener noreferrer\"\n          className={rowClassName}\n          onClick={onNavigate}\n        >\n          {activeBar}\n          {icon}\n          {label}\n        </a>\n      </li>\n    );\n  }\n\n  if (hasChildren) {\n    return (\n      <li className=\"flex flex-col\">\n        <ControlledButton defaultHtmlButton onClick={onToggle} aria-expanded={submenuOpen} className={rowClassName}>\n          {activeBar}\n          {icon}\n          {label}\n          <MaterialSymbol\n            icon=\"chevron_right\"\n            size={18}\n            className={classNames('sidebar-chevron ml-auto shrink-0 text-foreground-subtle', {\n              'is-collapsed': collapsed,\n              'is-open': submenuOpen,\n            })}\n          />\n        </ControlledButton>\n\n        <div ref={submenuRef} style={{ maxHeight }} className={classNames('sidebar-submenu', { 'mt-1': submenuOpen })}>\n          <div ref={contentRef} className=\"pl-5\">\n            <SidebarMenu\n              items={item.children ?? []}\n              collapsed={collapsed}\n              activeClass={activeClass}\n              activeIconClass={activeIconClass}\n              onNavigate={onNavigate}\n              level={level + 1}\n            />\n          </div>\n        </div>\n      </li>\n    );\n  }\n\n  const favoriteKey = canFavorite && !collapsed ? resolveSidebarFavoriteKey(item) : null;\n\n  return (\n    <li className=\"group/row relative flex flex-col\">\n      <NavigationLink to={item.to} className={classNames(rowClassName, { 'pr-9': favoriteKey })} onClick={onNavigate}>\n        {activeBar}\n        {icon}\n        {label}\n      </NavigationLink>\n      {favoriteKey && <SidebarFavoriteToggle favoriteKey={favoriteKey} />}\n    </li>\n  );\n};\n\nconst SECTION_LABEL_KEYS: Record<TUiSidebarSection, string> = {\n  favorites: 'sidebar.sections.favorites',\n  management: 'sidebar.sections.management',\n  registration: 'sidebar.sections.registration',\n};\n\ninterface ISidebarSectionHeaderProps {\n  section: TUiSidebarSection | null;\n  label: string | null;\n  collapsed: boolean;\n  withDivider: boolean;\n}\n\nconst SidebarSectionHeader: React.FC<ISidebarSectionHeaderProps> = ({ section, label, collapsed, withDivider }) => {\n  const { t } = useTranslation('ui');\n\n  if (collapsed) {\n    if (!withDivider) return null;\n    return (\n      <li aria-hidden className=\"flex flex-col px-3\">\n        <span className=\"border-t border-border/70\" />\n      </li>\n    );\n  }\n\n  // A product's own label is a phrase read as written: the words carry the group, no line above it.\n  if (section === null) {\n    return (\n      <li className=\"mt-3 flex min-w-0 flex-col\">\n        <span className=\"truncate px-3 pb-0.5 text-xs font-semibold text-brand-emphasis\">{label}</span>\n      </li>\n    );\n  }\n\n  return (\n    <li className={classNames('flex flex-col', withDivider ? 'mt-2' : 'mt-1')}>\n      {withDivider && <span aria-hidden className=\"mx-3 mb-2 border-t border-border/70\" />}\n      <span className=\"px-3 pb-0.5 text-xxs font-semibold uppercase tracking-wide text-foreground-subtle\">\n        {t(SECTION_LABEL_KEYS[section])}\n      </span>\n    </li>\n  );\n};\n\nconst SECTION_ORDER: Array<TUiSidebarSection> = ['favorites', 'management', 'registration'];\n\ninterface ISidebarMenuGroup {\n  section: TUiSidebarSection | null;\n  label: string | null;\n  items: Array<ISidebarMenuItem>;\n}\n\nconst groupItemsBySection = (items: Array<ISidebarMenuItem>): Array<ISidebarMenuGroup> => {\n  const rows = items ?? [];\n  const ungrouped = rows.filter((item) => !item.section && !item.sectionLabel);\n  const sectionGroups = SECTION_ORDER.map((section) => ({\n    section,\n    label: null,\n    items: rows.filter((item) => item.section === section),\n  })).filter((group) => group.items.length > 0);\n  const named = rows.filter((item) => !item.section && item.sectionLabel);\n  const labelGroups = [...new Set(named.map((item) => item.sectionLabel ?? ''))].map((label) => ({\n    section: null,\n    label,\n    items: named.filter((item) => item.sectionLabel === label),\n  }));\n\n  return [\n    ...(ungrouped.length ? [{ section: null, label: null, items: ungrouped }] : []),\n    ...sectionGroups,\n    ...labelGroups,\n  ];\n};\n\nconst SidebarMenu: React.FC<ISidebarMenuProps> = ({\n  items,\n  activeClass,\n  collapsed,\n  activeIconClass,\n  onNavigate,\n  level = 0,\n}) => {\n  const { location } = useUiNavigation();\n\n  const activeKey =\n    items\n      .filter((item) => Boolean(item.children?.length) && containsActiveRoute(item, location))\n      .map(resolveSidebarItemId)[0] ?? null;\n\n  const [openKey, setOpenKey] = useState<string | null>(activeKey);\n  const previousActiveKey = useRef(activeKey);\n\n  useEffect(() => {\n    if (activeKey && activeKey !== previousActiveKey.current) {\n      setOpenKey(activeKey);\n    }\n    previousActiveKey.current = activeKey;\n  }, [activeKey]);\n\n  const handleToggle = (key: string) => {\n    setOpenKey((current) => (current === key ? null : key));\n  };\n\n  const showSections = level === 0;\n  const groups: Array<ISidebarMenuGroup> = showSections\n    ? groupItemsBySection(items)\n    : [{ section: null, label: null, items: items ?? [] }];\n\n  return (\n    <ul className={classNames('flex flex-col', level === 0 ? 'gap-y-2' : 'gap-y-1')}>\n      {groups.flatMap((group, groupIndex) => {\n        const rows: Array<React.ReactElement> = [];\n\n        if (group.section || group.label) {\n          rows.push(\n            <SidebarSectionHeader\n              key={`section-${group.section ?? group.label}`}\n              section={group.section}\n              label={group.label}\n              collapsed={collapsed}\n              withDivider={groupIndex > 0}\n            />,\n          );\n        }\n\n        group.items.forEach((item) => {\n          const itemId = resolveSidebarItemId(item);\n\n          rows.push(\n            <SidebarMenuRow\n              key={itemId}\n              item={item}\n              isOpen={openKey === itemId}\n              collapsed={collapsed}\n              onToggle={() => handleToggle(itemId)}\n              activeClass={activeClass}\n              activeIconClass={activeIconClass}\n              onNavigate={onNavigate}\n              level={level}\n            />,\n          );\n        });\n\n        return rows;\n      })}\n    </ul>\n  );\n};\n\nexport default SidebarMenu;\n"],"names":[],"mappings":"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"}

package/package.json

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

package/src/assets/styles/base.css

@@ -170,8 +170,7 @@ body {
    theme. This is how print previews stay truthful: what the user sees on screen is
    what comes out of the printer, regardless of the app theme or of the skin on it.
    --------------------------------------------------------------------------- */
-[data-theme='light'],
-[data-theme='dark'] {
+:where([data-theme='light'], [data-theme='dark']) {
   background-color: rgb(var(--color-canvas));
   color: rgb(var(--color-foreground));
 }

package/src/assets/styles/theme.css

@@ -33,6 +33,12 @@
   --color-ink: 32 32 32;
   --color-ink-fg: 246 246 246;
   --color-ink-muted: 163 163 163;
+  /* The night panel, a product's showcase surface. On a light page, near black would read as black. */
+  --color-night: 45 27 105;
+  --color-night-lobe: 67 41 143;
+  --color-night-fg: 255 255 255;
+  --color-night-muted: 217 210 243;
+  --color-night-accent: 199 174 255;
   --color-muted: 242 242 242;
   --color-muted-hover: 232 232 232;
   --color-muted-active: 222 222 222;
@@ -161,6 +167,12 @@
   --color-ink: 36 36 36;
   --color-ink-fg: 237 237 237;
   --color-ink-muted: 148 148 148;
+  /* The night panel, a product's showcase surface: deeper here, where the page is dark too. */
+  --color-night: 23 15 46;
+  --color-night-lobe: 41 27 82;
+  --color-night-fg: 255 255 255;
+  --color-night-muted: 201 193 228;
+  --color-night-accent: 169 123 255;
   --color-muted: 28 28 28;
   --color-muted-hover: 38 38 38;
   --color-muted-active: 48 48 48;
@@ -281,6 +293,15 @@
      The bright pumpkin orange lives in `ring`, which is never a text background.
    - `warning` leaves amber for yellow. With an orange brand, an amber warning chip and a
      brand chip would read as the same thing, and a status must never look like decoration. */
+/* A night panel pins the dark scheme for the controls inside it, which would also pin the dark night.
+   Its colours still follow the page, so a panel on a light page keeps the light page's night. */
+:root:not([data-theme='dark']) [data-theme='dark'] {
+  --color-night: 45 27 105;
+  --color-night-lobe: 67 41 143;
+  --color-night-muted: 217 210 243;
+  --color-night-accent: 199 174 255;
+}
+
 :root[data-theme='dark'][data-theme-skin='halloween'] {
   --color-ring: 255 138 51;
   --color-selection: 138 62 12;

package/tailwind.preset.js

@@ -72,6 +72,16 @@ export default {
            with the theme; `ink` deliberately does not. */
         ink: { DEFAULT: token('ink'), fg: token('ink-fg'), muted: token('ink-muted') },
 
+        /* A showcase surface that stays violet in BOTH themes, deeper in the dark one: the login panel,
+           a hero over a page. `ink` is neutral chrome; `night` is the product speaking. */
+        night: {
+          DEFAULT: token('night'),
+          lobe: token('night-lobe'),
+          fg: token('night-fg'),
+          muted: token('night-muted'),
+          accent: token('night-accent'),
+        },
+
         /* The light counterpart of `ink`: a white veil that stays white in BOTH themes
            because it sits on media (a photo, the canvas), not on a themed surface.
            Always used with an opacity modifier: `bg-glass/10`. */