@eifi1/ui-kit 0.33.1 → 0.35.0

package/dist/shell/topbar-action-menu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/shell/topbar-action-menu.tsx"],"sourcesContent":["import { useId, useLayoutEffect, useRef } from \"react\";\nimport type { KeyboardEvent as ReactKeyboardEvent, ReactNode } from \"react\";\nimport { Link } from \"react-router\";\nimport { cn } from \"../lib/cn\";\nimport { HoverMenu } from \"../components/hover-menu\";\nimport { MenuItem } from \"../components/menu-item\";\nimport type { MenuItemTone } from \"../components/menu-item\";\nimport { StatusDot } from \"../components/status-dot\";\nimport type { UserAvatarBadge } from \"../components/user-avatar\";\nimport { TOPBAR_TRIGGER_CLASS } from \"./topbar-controls\";\n\n/**\n * One row of a {@link TopBarActionMenu}. An `action` (default) runs `onSelect`, a\n * `link` navigates via react-router, a `divider` draws a rule, and a `heading` names\n * the rows after it. Action and link rows close the menu automatically when chosen.\n * `kind` may be omitted for actions, keeping the common case terse.\n *\n * The rows are {@link MenuItem}s, so they take its options: `tone: \"danger\"` for the\n * log-out row, `checked` (+ `checkable`) for a choice, `current` for the link to the\n * page already open, `disabled`.\n */\nexport type TopBarMenuEntry =\n  | {\n      kind?: \"action\";\n      key: string;\n      icon?: ReactNode;\n      label: ReactNode;\n      trailing?: ReactNode;\n      onSelect: () => void;\n      tone?: MenuItemTone;\n      /** Makes the row a choice (`menuitemradio`, or `menuitemcheckbox` with\n       *  `checkable: \"checkbox\"`) and says whether it is chosen. */\n      checked?: boolean;\n      checkable?: \"radio\" | \"checkbox\";\n      disabled?: boolean;\n    }\n  | {\n      kind: \"link\";\n      key: string;\n      icon?: ReactNode;\n      label: ReactNode;\n      trailing?: ReactNode;\n      to: string;\n      tone?: MenuItemTone;\n      /** The link to the page already open: `aria-current=\"page\"` and a check mark. */\n      current?: boolean;\n      disabled?: boolean;\n    }\n  | { kind: \"divider\"; key: string }\n  | {\n      /**\n       * A group heading (0.23, keksdose's guided-tours menu): the rows after it, up to\n       * the next heading, the next `divider` or the end of `entries`, are ONE group\n       * named by `label`. keksdose files its tours by topic and separated the blocks\n       * with bare dividers — \"the kit's menu has no heading row to name them with\"\n       * (tour-menu.tsx) — so a sighted reader had to guess what each block was and a\n       * screen reader was told nothing at all.\n       *\n       * Not a row: it takes no focus, the arrow keys (and Home/End) pass over it, and it\n       * never closes the menu. It is announced the way the kit's other grouped lists\n       * announce theirs (`CommandPalette`): the group's rows sit in a `role=\"group\"`\n       * whose `aria-labelledby` is this heading, so a reader says \"On this page, group\"\n       * when the focus enters the first row, and nothing between rows.\n       *\n       * A divider ENDS the group, so a closing row such as \"All tours…\" behind a rule\n       * belongs to no topic. A heading with no rows under it is not drawn — an empty\n       * group names nothing; build the list from data and it may well be empty.\n       *\n       * The menu-wide `heading` prop is the panel's title, drawn once above everything;\n       * with group headings it is usually redundant (two stacked caps lines read as one),\n       * and the trigger's `ariaLabel` already names the menu.\n       */\n      kind: \"heading\";\n      key: string;\n      /** The group's name, shown above its rows and announced as the group's name. Keep\n       *  it short: it is set in small caps and wraps on a narrow panel. */\n      label: ReactNode;\n    };\n\ntype HeadingEntry = Extract<TopBarMenuEntry, { kind: \"heading\" }>;\ntype DividerEntry = Extract<TopBarMenuEntry, { kind: \"divider\" }>;\ntype RowEntry = Exclude<TopBarMenuEntry, HeadingEntry | DividerEntry>;\n\n/** What the panel draws from `entries`: loose rows and rules, and headed groups. */\ntype Block = { kind: \"loose\"; entry: RowEntry | DividerEntry } | { kind: \"group\"; heading: HeadingEntry; rows: RowEntry[] };\n\n/**\n * Cut `entries` into blocks: a heading opens a group that takes the rows after it until\n * the next heading or divider; everything else stands alone, as it always has.\n */\nfunction toBlocks(entries: readonly TopBarMenuEntry[]): Block[] {\n  const blocks: Block[] = [];\n  let group: Extract<Block, { kind: \"group\" }> | null = null;\n  for (const entry of entries) {\n    if (entry.kind === \"heading\") {\n      group = { kind: \"group\", heading: entry, rows: [] };\n      blocks.push(group);\n    } else if (entry.kind === \"divider\") {\n      group = null;\n      blocks.push({ kind: \"loose\", entry });\n    } else if (group) {\n      group.rows.push(entry);\n    } else {\n      blocks.push({ kind: \"loose\", entry });\n    }\n  }\n  // A heading with nothing under it names nothing: not drawn (see the `heading` kind).\n  return blocks.filter((block) => block.kind === \"loose\" || block.rows.length > 0);\n}\n\n/**\n * The non-interactive identity block at the top of an account menu — kastlan's name +\n * role, keksdose's display name + email + role chip. It is text, not a `menuitem`: the\n * arrow keys pass over it.\n */\nexport interface TopBarMenuHeader {\n  /** The first line — the user's name. */\n  title: ReactNode;\n  /** The muted second line — an email, a role. */\n  subtitle?: ReactNode;\n  /**\n   * Anything below — a role chip. A link or button here stays out of the arrow keys\n   * and in the Tab order, like the footer's.\n   *\n   * Pass a function to get `close`, as `footer` does — keksdose F7: its admin role\n   * chip links to the admin area, and a router link does not unmount the menu, so\n   * without `close` the panel stayed open over the page it had just navigated to.\n   */\n  extra?: ReactNode | ((close: () => void) => ReactNode);\n}\n\n/** What a control is, as far as `HoverMenu` is concerned, when it lives in the header\n *  or the footer: not a menu row. */\nconst SECTION_CONTROLS = \"a[href]:not([role]),button:not([role])\";\nconst TABBABLE = 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]';\n\n/**\n * A header or footer inside the menu panel.\n *\n * `HoverMenu` promotes EVERY role-less button and link in its panel to a `menuitem` out\n * of the Tab order, and turns every list into `role=\"none\"` — right for the rows, wrong\n * for a footer of legal links, which would join the arrow-key cycle and drop out of Tab.\n * So before it looks (a child's layout effect runs before its parent's), the controls\n * in here get their own role spelled out, which `HoverMenu` leaves alone, and any list\n * keeps its list semantics.\n */\nfunction MenuSection({ className, children }: { className: string; children: ReactNode }) {\n  const ref = useRef<HTMLLIElement>(null);\n  useLayoutEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n    for (const c of el.querySelectorAll<HTMLElement>(SECTION_CONTROLS)) {\n      c.setAttribute(\"role\", c.tagName === \"A\" ? \"link\" : \"button\");\n    }\n    for (const l of el.querySelectorAll<HTMLElement>(\"ul:not([role]),ol:not([role])\")) l.setAttribute(\"role\", \"list\");\n    for (const l of el.querySelectorAll<HTMLElement>(\"li:not([role])\")) l.setAttribute(\"role\", \"listitem\");\n  });\n  return (\n    <li ref={ref} role=\"none\" className={className}>\n      {children}\n    </li>\n  );\n}\n\n/**\n * `HoverMenu` closes on any Tab inside the panel — right when Tab leaves it, wrong when\n * Tab is on its way from a row to a footer link, or from one footer link to the next:\n * the panel would unmount under the focus. So a Tab whose next stop is still inside the\n * panel stops here and the browser moves focus; one that leaves reaches `HoverMenu`,\n * which closes.\n */\nfunction keepTabInsidePanel(e: ReactKeyboardEvent<HTMLUListElement>) {\n  if (e.key !== \"Tab\") return;\n  const from = e.target as HTMLElement;\n  const stops = Array.from(e.currentTarget.querySelectorAll<HTMLElement>(TABBABLE)).filter(\n    (el) => el.getAttribute(\"tabindex\") !== \"-1\",\n  );\n  const way = e.shiftKey ? Node.DOCUMENT_POSITION_PRECEDING : Node.DOCUMENT_POSITION_FOLLOWING;\n  if (stops.some((el) => el !== from && from.compareDocumentPosition(el) & way)) e.stopPropagation();\n}\n\n/**\n * A top-bar icon button that opens a {@link HoverMenu} of actions and/or links,\n * with an optional uppercase heading and divider rules. Generic glue over the\n * shared top-bar chrome — e.g. the feedback launcher or the guided-tours menu —\n * so those call sites describe their rows as data instead of rebuilding the\n * trigger + list markup. For a checkmarked value-switcher use\n * {@link OptionSwitcherMenu} instead.\n *\n * It is also the ACCOUNT menu kastlan and keksdose each hand-build on `HoverMenu`: a\n * custom `trigger` (the avatar), a `header` (name + role / email), the rows, and a\n * free-content `footer` (the legal links).\n *\n * A long menu is grouped by topic with `{ kind: \"heading\" }` entries (0.23) — see\n * {@link TopBarMenuEntry}. There is no separate phone layout: the panel is the same\n * hover panel at 390px, kept inside the viewport by `HoverMenu`, and a heading wraps\n * rather than widening it.\n */\nexport function TopBarActionMenu({\n  icon,\n  iconBadge,\n  trigger,\n  triggerClassName,\n  href,\n  ariaLabel,\n  heading,\n  header,\n  entries,\n  children,\n  footer,\n  footerLabel,\n  align,\n  panelClassName,\n}: {\n  /** The trigger's face for the usual icon button. Ignored when `trigger` is given. */\n  icon?: ReactNode;\n  /**\n   * A status dot in the top-end corner of `icon` — keksdose's unread-support dot on the\n   * feedback trigger. Like `UserAvatar`'s `badge`, its `label` joins the trigger's name\n   * (\"Send feedback 2 unread\"), so the dot is not something only the eye is told about.\n   * Ignored with `trigger`: give the face its own badge there.\n   */\n  iconBadge?: UserAvatarBadge | null;\n  /**\n   * A face of your own for the trigger — the account menu's `UserAvatar`. It is drawn\n   * INSIDE the kit's button, which keeps the wiring: `aria-haspopup`, `aria-expanded`,\n   * the toggle, the keyboard. `open` is there for a chevron that turns.\n   *\n   * The button is named by `ariaLabel` followed by any readable text in the face — a\n   * `UserAvatar` `badge` label reaches a screen reader that way (\"Account menu 3\n   * unread\"), where an `aria-label` on the button would have hidden it. A\n   * `UserAvatar`'s initials are `aria-hidden`, so the person's name is only in the\n   * name if `ariaLabel` carries it (\"Marcel Eifert, account menu\").\n   */\n  trigger?: (state: { open: boolean }) => ReactNode;\n  /** Extra classes for the trigger button — `rounded-full` round an avatar. */\n  triggerClassName?: string;\n  /**\n   * Make the trigger a LINK to this route (keksdose dev #585, Marcel: \"clicking on the\n   * guided tours icon shall lead to the tours page like the all tours element does\").\n   * A click or Enter follows it and shuts the panel; hover still opens the panel after\n   * the usual delay, and ↓/↑ on the focused trigger still open it onto the first/last\n   * row, so the rows stay reachable by keyboard. A tap on a touch screen follows the\n   * link — so use it where the destination offers everything the menu does. Rendered as\n   * an `<a>` (the router's `Link`) with `aria-haspopup=\"menu\"` and `aria-expanded`,\n   * named by `ariaLabel`: a link inside the kit's button would be interactive content\n   * inside interactive content.\n   */\n  href?: string;\n  /** Names the trigger and the menu. */\n  ariaLabel: string;\n  heading?: string;\n  /** A non-interactive identity block above the rows. */\n  header?: TopBarMenuHeader;\n  entries: TopBarMenuEntry[];\n  /**\n   * Rows the entry data cannot describe (a `Disclosure` sub-list, an app's own\n   * section), after `entries`. Render `<li>`s holding `MenuItem`s or plain controls;\n   * `close` shuts the menu.\n   */\n  children?: (close: () => void) => ReactNode;\n  /**\n   * Free content below the rows, behind a rule — the legal links. Its links and\n   * buttons are NOT menu rows: the arrow keys skip them and Tab reaches them. Pass a\n   * function to get `close` for the links' `onClick`.\n   */\n  footer?: ReactNode | ((close: () => void) => ReactNode);\n  /** Wraps the footer in a `<nav>` with this name (\"Legal\"). Without it, a plain block. */\n  footerLabel?: string;\n  /** Which edge of the trigger the panel lines up with (see `HoverMenu`). Default `end`. */\n  align?: \"start\" | \"end\" | \"left\" | \"right\";\n  panelClassName?: string;\n}) {\n  // Names the groups' headings for `aria-labelledby`. Positional rather than from the\n  // entry's `key`, which is the caller's text and may hold a space — and a space in\n  // `aria-labelledby` is a list separator.\n  const uid = useId();\n  return (\n    <HoverMenu\n      ariaLabel={ariaLabel}\n      align={align}\n      trigger={({ open, toggle, close }) => {\n        // One element for both kinds: the router's link when `href` is set, else the\n        // kit's button. Same classes and face either way.\n        const control = (className: string, children: ReactNode, label?: string) =>\n          href ? (\n            <Link to={href} onClick={close} aria-label={label} className={className}>\n              {children}\n            </Link>\n          ) : (\n            <button type=\"button\" onClick={toggle} aria-label={label} className={className}>\n              {children}\n            </button>\n          );\n        if (trigger) {\n          return control(\n            cn(TOPBAR_TRIGGER_CLASS, \"relative\", triggerClassName),\n            <>\n              <span className=\"sr-only\">{ariaLabel}</span>\n              {/* The space keeps the name from running into the face's text (\"Account\n                  menu3 unread\"); as a flex item it takes no room. */}\n              {\" \"}\n              {trigger({ open })}\n            </>,\n          );\n        }\n        if (iconBadge) {\n          // Named by its content, like the custom-trigger branch, so the badge label is\n          // part of the name; an `aria-label` would have hidden it.\n          return control(\n            cn(TOPBAR_TRIGGER_CLASS, \"relative\", triggerClassName),\n            <>\n              <span className=\"sr-only\">{ariaLabel}</span>{\" \"}\n              <span aria-hidden className=\"relative inline-flex\">\n                {icon}\n                <StatusDot ring tone={iconBadge.tone ?? \"danger\"} className=\"absolute -end-0.5 -top-0.5\" />\n              </span>{\" \"}\n              <span className=\"sr-only\">{iconBadge.label}</span>\n            </>,\n          );\n        }\n        return control(cn(TOPBAR_TRIGGER_CLASS, triggerClassName), icon, ariaLabel);\n      }}\n    >\n      {(close) => {\n        const footerBody = typeof footer === \"function\" ? footer(close) : footer;\n        const headerExtra = typeof header?.extra === \"function\" ? header.extra(close) : header?.extra;\n        const footerClass =\n          \"flex flex-wrap gap-x-3 gap-y-1 text-xs text-[var(--text-muted)] [&_a:hover]:text-[var(--text-primary)] [&_a]:rounded-sm [&_a:focus-visible]:outline-none [&_a:focus-visible]:ring-[length:var(--focus-ring-width)] [&_a:focus-visible]:ring-[var(--brand)]\";\n        /** One action or link row — loose, or inside a heading's group. */\n        const row = (entry: RowEntry) => (\n          <li key={entry.key}>\n            {entry.kind === \"link\" ? (\n              <MenuItem\n                href={entry.to}\n                renderLink={({ href, ...p }) => <Link to={href} {...p} />}\n                onClick={close}\n                leading={entry.icon}\n                trailing={entry.trailing}\n                tone={entry.tone}\n                current={entry.current}\n                disabled={entry.disabled}\n              >\n                {entry.label}\n              </MenuItem>\n            ) : (\n              <MenuItem\n                onClick={() => {\n                  entry.onSelect();\n                  close();\n                }}\n                leading={entry.icon}\n                trailing={entry.trailing}\n                tone={entry.tone}\n                checked={entry.checked}\n                checkable={entry.checkable}\n                disabled={entry.disabled}\n              >\n                {entry.label}\n              </MenuItem>\n            )}\n          </li>\n        );\n        return (\n          // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- a Tab bubbling up from a row or footer link, see keepTabInsidePanel\n          <ul className={cn(\"py-1\", panelClassName)} onKeyDown={keepTabInsidePanel}>\n            {header && (\n              <MenuSection className=\"mb-1 border-b border-[var(--border)] px-3 py-2\">\n                <div className=\"truncate text-sm font-medium text-[var(--text-primary)]\">{header.title}</div>\n                {header.subtitle != null && (\n                  <div className=\"truncate text-xs text-[var(--text-muted)]\">{header.subtitle}</div>\n                )}\n                {headerExtra != null && headerExtra !== false && <div className=\"mt-1\">{headerExtra}</div>}\n              </MenuSection>\n            )}\n            {heading && (\n              <li className=\"px-3 py-1 text-micro font-semibold uppercase tracking-wide text-[var(--text-placeholder)]\">\n                {heading}\n              </li>\n            )}\n            {toBlocks(entries).map((block, i, blocks) => {\n              if (block.kind === \"loose\") {\n                const entry = block.entry;\n                if (entry.kind === \"divider\") {\n                  return <li key={entry.key} className=\"my-1 border-t border-[var(--border)]\" />;\n                }\n                return row(entry);\n              }\n              const headingId = `${uid}-group-${i}`;\n              const before = blocks[i - 1];\n              // Under a rule (or at the top of the rows) the rule's margin is the gap;\n              // straight under another group's last row the heading makes its own.\n              const tight = !before || (before.kind === \"loose\" && before.entry.kind === \"divider\");\n              return (\n                <li key={block.heading.key} role=\"none\">\n                  <div\n                    id={headingId}\n                    role=\"presentation\"\n                    className={cn(\n                      \"px-3 pb-0.5 text-caption font-semibold uppercase tracking-wide text-[var(--text-muted)] [overflow-wrap:anywhere]\",\n                      tight ? \"pt-1\" : \"pt-2.5\",\n                    )}\n                  >\n                    {block.heading.label}\n                  </div>\n                  <ul role=\"group\" aria-labelledby={headingId}>\n                    {block.rows.map(row)}\n                  </ul>\n                </li>\n              );\n            })}\n            {children?.(close)}\n            {footerBody != null && footerBody !== false && (\n              <MenuSection className=\"mt-1 border-t border-[var(--border)] px-3 py-2\">\n                {footerLabel ? (\n                  <nav aria-label={footerLabel} className={footerClass}>\n                    {footerBody}\n                  </nav>\n                ) : (\n                  <div className={footerClass}>{footerBody}</div>\n                )}\n              </MenuSection>\n            )}\n          </ul>\n        );\n      }}\n    </HoverMenu>\n  );\n}\n"],"mappings":"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","names":["children","href"]}
+{"version":3,"sources":["../../src/shell/topbar-action-menu.tsx"],"sourcesContent":["import { useId, useLayoutEffect, useRef } from \"react\";\nimport type { KeyboardEvent as ReactKeyboardEvent, ReactNode } from \"react\";\nimport { Link } from \"react-router\";\nimport { cn } from \"../lib/cn\";\nimport { HoverMenu, type HoverMenuProps } from \"../components/hover-menu\";\nimport { MenuItem } from \"../components/menu-item\";\nimport type { MenuItemTone } from \"../components/menu-item\";\nimport { StatusDot } from \"../components/status-dot\";\nimport type { UserAvatarBadge } from \"../components/user-avatar\";\nimport { TOPBAR_TRIGGER_CLASS } from \"./topbar-controls\";\n\n/**\n * One row of a {@link TopBarActionMenu}. An `action` (default) runs `onSelect`, a\n * `link` navigates via react-router, a `divider` draws a rule, and a `heading` names\n * the rows after it. Action and link rows close the menu automatically when chosen.\n * `kind` may be omitted for actions, keeping the common case terse.\n *\n * The rows are {@link MenuItem}s, so they take its options: `tone: \"danger\"` for the\n * log-out row, `checked` (+ `checkable`) for a choice, `current` for the link to the\n * page already open, `disabled`.\n */\nexport type TopBarMenuEntry =\n  | {\n      kind?: \"action\";\n      key: string;\n      icon?: ReactNode;\n      label: ReactNode;\n      trailing?: ReactNode;\n      onSelect: () => void;\n      tone?: MenuItemTone;\n      /** Makes the row a choice (`menuitemradio`, or `menuitemcheckbox` with\n       *  `checkable: \"checkbox\"`) and says whether it is chosen. */\n      checked?: boolean;\n      checkable?: \"radio\" | \"checkbox\";\n      disabled?: boolean;\n    }\n  | {\n      kind: \"link\";\n      key: string;\n      icon?: ReactNode;\n      label: ReactNode;\n      trailing?: ReactNode;\n      to: string;\n      tone?: MenuItemTone;\n      /** The link to the page already open: `aria-current=\"page\"` and a check mark. */\n      current?: boolean;\n      disabled?: boolean;\n    }\n  | { kind: \"divider\"; key: string }\n  | {\n      /**\n       * A group heading (0.23, keksdose's guided-tours menu): the rows after it, up to\n       * the next heading, the next `divider` or the end of `entries`, are ONE group\n       * named by `label`. keksdose files its tours by topic and separated the blocks\n       * with bare dividers — \"the kit's menu has no heading row to name them with\"\n       * (tour-menu.tsx) — so a sighted reader had to guess what each block was and a\n       * screen reader was told nothing at all.\n       *\n       * Not a row: it takes no focus, the arrow keys (and Home/End) pass over it, and it\n       * never closes the menu. It is announced the way the kit's other grouped lists\n       * announce theirs (`CommandPalette`): the group's rows sit in a `role=\"group\"`\n       * whose `aria-labelledby` is this heading, so a reader says \"On this page, group\"\n       * when the focus enters the first row, and nothing between rows.\n       *\n       * A divider ENDS the group, so a closing row such as \"All tours…\" behind a rule\n       * belongs to no topic. A heading with no rows under it is not drawn — an empty\n       * group names nothing; build the list from data and it may well be empty.\n       *\n       * The menu-wide `heading` prop is the panel's title, drawn once above everything;\n       * with group headings it is usually redundant (two stacked caps lines read as one),\n       * and the trigger's `aria-label` already names the menu.\n       */\n      kind: \"heading\";\n      key: string;\n      /** The group's name, shown above its rows and announced as the group's name. Keep\n       *  it short: it is set in small caps and wraps on a narrow panel. */\n      label: ReactNode;\n    };\n\ntype HeadingEntry = Extract<TopBarMenuEntry, { kind: \"heading\" }>;\ntype DividerEntry = Extract<TopBarMenuEntry, { kind: \"divider\" }>;\ntype RowEntry = Exclude<TopBarMenuEntry, HeadingEntry | DividerEntry>;\n\n/** What the panel draws from `entries`: loose rows and rules, and headed groups. */\ntype Block = { kind: \"loose\"; entry: RowEntry | DividerEntry } | { kind: \"group\"; heading: HeadingEntry; rows: RowEntry[] };\n\n/**\n * Cut `entries` into blocks: a heading opens a group that takes the rows after it until\n * the next heading or divider; everything else stands alone, as it always has.\n */\nfunction toBlocks(entries: readonly TopBarMenuEntry[]): Block[] {\n  const blocks: Block[] = [];\n  let group: Extract<Block, { kind: \"group\" }> | null = null;\n  for (const entry of entries) {\n    if (entry.kind === \"heading\") {\n      group = { kind: \"group\", heading: entry, rows: [] };\n      blocks.push(group);\n    } else if (entry.kind === \"divider\") {\n      group = null;\n      blocks.push({ kind: \"loose\", entry });\n    } else if (group) {\n      group.rows.push(entry);\n    } else {\n      blocks.push({ kind: \"loose\", entry });\n    }\n  }\n  // A heading with nothing under it names nothing: not drawn (see the `heading` kind).\n  return blocks.filter((block) => block.kind === \"loose\" || block.rows.length > 0);\n}\n\n/**\n * The non-interactive identity block at the top of an account menu — kastlan's name +\n * role, keksdose's display name + email + role chip. It is text, not a `menuitem`: the\n * arrow keys pass over it.\n */\nexport interface TopBarMenuHeader {\n  /** The first line — the user's name. */\n  title: ReactNode;\n  /** The muted second line — an email, a role. */\n  subtitle?: ReactNode;\n  /**\n   * Anything below — a role chip. A link or button here stays out of the arrow keys\n   * and in the Tab order, like the footer's.\n   *\n   * Pass a function to get `close`, as `footer` does — keksdose F7: its admin role\n   * chip links to the admin area, and a router link does not unmount the menu, so\n   * without `close` the panel stayed open over the page it had just navigated to.\n   */\n  extra?: ReactNode | ((close: () => void) => ReactNode);\n}\n\n/** What a control is, as far as `HoverMenu` is concerned, when it lives in the header\n *  or the footer: not a menu row. */\nconst SECTION_CONTROLS = \"a[href]:not([role]),button:not([role])\";\nconst TABBABLE = 'a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]';\n\n/**\n * A header or footer inside the menu panel.\n *\n * `HoverMenu` promotes EVERY role-less button and link in its panel to a `menuitem` out\n * of the Tab order, and turns every list into `role=\"none\"` — right for the rows, wrong\n * for a footer of legal links, which would join the arrow-key cycle and drop out of Tab.\n * So before it looks (a child's layout effect runs before its parent's), the controls\n * in here get their own role spelled out, which `HoverMenu` leaves alone, and any list\n * keeps its list semantics.\n */\nfunction MenuSection({ className, children }: { className: string; children: ReactNode }) {\n  const ref = useRef<HTMLLIElement>(null);\n  useLayoutEffect(() => {\n    const el = ref.current;\n    if (!el) return;\n    for (const c of el.querySelectorAll<HTMLElement>(SECTION_CONTROLS)) {\n      c.setAttribute(\"role\", c.tagName === \"A\" ? \"link\" : \"button\");\n    }\n    for (const l of el.querySelectorAll<HTMLElement>(\"ul:not([role]),ol:not([role])\")) l.setAttribute(\"role\", \"list\");\n    for (const l of el.querySelectorAll<HTMLElement>(\"li:not([role])\")) l.setAttribute(\"role\", \"listitem\");\n  });\n  return (\n    <li ref={ref} role=\"none\" className={className}>\n      {children}\n    </li>\n  );\n}\n\n/**\n * `HoverMenu` closes on any Tab inside the panel — right when Tab leaves it, wrong when\n * Tab is on its way from a row to a footer link, or from one footer link to the next:\n * the panel would unmount under the focus. So a Tab whose next stop is still inside the\n * panel stops here and the browser moves focus; one that leaves reaches `HoverMenu`,\n * which closes.\n */\nfunction keepTabInsidePanel(e: ReactKeyboardEvent<HTMLUListElement>) {\n  if (e.key !== \"Tab\") return;\n  const from = e.target as HTMLElement;\n  const stops = Array.from(e.currentTarget.querySelectorAll<HTMLElement>(TABBABLE)).filter(\n    (el) => el.getAttribute(\"tabindex\") !== \"-1\",\n  );\n  const way = e.shiftKey ? Node.DOCUMENT_POSITION_PRECEDING : Node.DOCUMENT_POSITION_FOLLOWING;\n  if (stops.some((el) => el !== from && from.compareDocumentPosition(el) & way)) e.stopPropagation();\n}\n\n/**\n * A top-bar icon button that opens a {@link HoverMenu} of actions and/or links,\n * with an optional uppercase heading and divider rules. Generic glue over the\n * shared top-bar chrome — e.g. the feedback launcher or the guided-tours menu —\n * so those call sites describe their rows as data instead of rebuilding the\n * trigger + list markup. For a checkmarked value-switcher use\n * {@link OptionSwitcherMenu} instead.\n *\n * It is also the ACCOUNT menu kastlan and keksdose each hand-build on `HoverMenu`: a\n * custom `trigger` (the avatar), a `header` (name + role / email), the rows, and a\n * free-content `footer` (the legal links).\n *\n * A long menu is grouped by topic with `{ kind: \"heading\" }` entries (0.23) — see\n * {@link TopBarMenuEntry}. There is no separate phone layout: the panel is the same\n * hover panel at 390px, kept inside the viewport by `HoverMenu`, and a heading wraps\n * rather than widening it.\n */\nexport function TopBarActionMenu({\n  icon,\n  iconBadge,\n  trigger,\n  triggerClassName,\n  href,\n  \"aria-label\": ariaLabel,\n  heading,\n  header,\n  entries,\n  children,\n  footer,\n  footerLabel,\n  align,\n  panelClassName,\n}: {\n  /** The trigger's face for the usual icon button. Ignored when `trigger` is given. */\n  icon?: ReactNode;\n  /**\n   * A status dot in the top-end corner of `icon` — keksdose's unread-support dot on the\n   * feedback trigger. Like `UserAvatar`'s `badge`, its `label` joins the trigger's name\n   * (\"Send feedback 2 unread\"), so the dot is not something only the eye is told about.\n   * Ignored with `trigger`: give the face its own badge there.\n   */\n  iconBadge?: UserAvatarBadge | null;\n  /**\n   * A face of your own for the trigger — the account menu's `UserAvatar`. It is drawn\n   * INSIDE the kit's button, which keeps the wiring: `aria-haspopup`, `aria-expanded`,\n   * the toggle, the keyboard. `open` is there for a chevron that turns.\n   *\n   * The button is named by `aria-label` followed by any readable text in the face — a\n   * `UserAvatar` `badge` label reaches a screen reader that way (\"Account menu 3\n   * unread\"), where an `aria-label` on the button would have hidden it. A\n   * `UserAvatar`'s initials are `aria-hidden`, so the person's name is only in the\n   * name if `aria-label` carries it (\"Marcel Eifert, account menu\").\n   */\n  trigger?: (state: { open: boolean }) => ReactNode;\n  /** Extra classes for the trigger button — `rounded-full` round an avatar. */\n  triggerClassName?: string;\n  /**\n   * Make the trigger a LINK to this route (keksdose dev #585, Marcel: \"clicking on the\n   * guided tours icon shall lead to the tours page like the all tours element does\").\n   * A click or Enter follows it and shuts the panel; hover still opens the panel after\n   * the usual delay, and ↓/↑ on the focused trigger still open it onto the first/last\n   * row, so the rows stay reachable by keyboard. A tap on a touch screen follows the\n   * link — so use it where the destination offers everything the menu does. Rendered as\n   * an `<a>` (the router's `Link`) with `aria-haspopup=\"menu\"` and `aria-expanded`,\n   * named by `aria-label`: a link inside the kit's button would be interactive content\n   * inside interactive content.\n   */\n  href?: string;\n  /** Names the trigger and the menu. Required: the trigger is an icon (refactor audit\n   *  2026-10, API-1 — the `ariaLabel` spelling went in 0.35). */\n  \"aria-label\": string;\n  heading?: string;\n  /** A non-interactive identity block above the rows. */\n  header?: TopBarMenuHeader;\n  entries: TopBarMenuEntry[];\n  /**\n   * Rows the entry data cannot describe (a `Disclosure` sub-list, an app's own\n   * section), after `entries`. Render `<li>`s holding `MenuItem`s or plain controls;\n   * `close` shuts the menu.\n   */\n  children?: (close: () => void) => ReactNode;\n  /**\n   * Free content below the rows, behind a rule — the legal links. Its links and\n   * buttons are NOT menu rows: the arrow keys skip them and Tab reaches them. Pass a\n   * function to get `close` for the links' `onClick`.\n   */\n  footer?: ReactNode | ((close: () => void) => ReactNode);\n  /** Wraps the footer in a `<nav>` with this name (\"Legal\"). Without it, a plain block. */\n  footerLabel?: string;\n  /** Which edge of the trigger the panel lines up with, `start` or `end` in the reading\n   *  direction (see `HoverMenu`, whose type this is). Default `end`. */\n  align?: HoverMenuProps[\"align\"];\n  panelClassName?: string;\n}) {\n  // Names the groups' headings for `aria-labelledby`. Positional rather than from the\n  // entry's `key`, which is the caller's text and may hold a space — and a space in\n  // `aria-labelledby` is a list separator.\n  const uid = useId();\n  return (\n    <HoverMenu\n      aria-label={ariaLabel}\n      align={align}\n      trigger={({ open, toggle, close }) => {\n        // One element for both kinds: the router's link when `href` is set, else the\n        // kit's button. Same classes and face either way.\n        const control = (className: string, children: ReactNode, label?: string) =>\n          href ? (\n            <Link to={href} onClick={close} aria-label={label} className={className}>\n              {children}\n            </Link>\n          ) : (\n            <button type=\"button\" onClick={toggle} aria-label={label} className={className}>\n              {children}\n            </button>\n          );\n        if (trigger) {\n          return control(\n            cn(TOPBAR_TRIGGER_CLASS, \"relative\", triggerClassName),\n            <>\n              <span className=\"sr-only\">{ariaLabel}</span>\n              {/* The space keeps the name from running into the face's text (\"Account\n                  menu3 unread\"); as a flex item it takes no room. */}\n              {\" \"}\n              {trigger({ open })}\n            </>,\n          );\n        }\n        if (iconBadge) {\n          // Named by its content, like the custom-trigger branch, so the badge label is\n          // part of the name; an `aria-label` would have hidden it.\n          return control(\n            cn(TOPBAR_TRIGGER_CLASS, \"relative\", triggerClassName),\n            <>\n              <span className=\"sr-only\">{ariaLabel}</span>{\" \"}\n              <span aria-hidden className=\"relative inline-flex\">\n                {icon}\n                <StatusDot ring tone={iconBadge.tone ?? \"danger\"} className=\"absolute -end-0.5 -top-0.5\" />\n              </span>{\" \"}\n              <span className=\"sr-only\">{iconBadge.label}</span>\n            </>,\n          );\n        }\n        return control(cn(TOPBAR_TRIGGER_CLASS, triggerClassName), icon, ariaLabel);\n      }}\n    >\n      {(close) => {\n        const footerBody = typeof footer === \"function\" ? footer(close) : footer;\n        const headerExtra = typeof header?.extra === \"function\" ? header.extra(close) : header?.extra;\n        const footerClass =\n          \"flex flex-wrap gap-x-3 gap-y-1 text-xs text-muted [&_a:hover]:text-primary [&_a]:rounded-sm [&_a:focus-visible]:outline-none [&_a:focus-visible]:ring-focus [&_a:focus-visible]:ring-brand\";\n        /** One action or link row — loose, or inside a heading's group. */\n        const row = (entry: RowEntry) => (\n          <li key={entry.key}>\n            {entry.kind === \"link\" ? (\n              <MenuItem\n                href={entry.to}\n                renderLink={({ href, ...p }) => <Link to={href} {...p} />}\n                onClick={close}\n                leading={entry.icon}\n                trailing={entry.trailing}\n                tone={entry.tone}\n                current={entry.current}\n                disabled={entry.disabled}\n              >\n                {entry.label}\n              </MenuItem>\n            ) : (\n              <MenuItem\n                onClick={() => {\n                  entry.onSelect();\n                  close();\n                }}\n                leading={entry.icon}\n                trailing={entry.trailing}\n                tone={entry.tone}\n                checked={entry.checked}\n                checkable={entry.checkable}\n                disabled={entry.disabled}\n              >\n                {entry.label}\n              </MenuItem>\n            )}\n          </li>\n        );\n        return (\n          // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- a Tab bubbling up from a row or footer link, see keepTabInsidePanel\n          <ul className={cn(\"py-1\", panelClassName)} onKeyDown={keepTabInsidePanel}>\n            {header && (\n              <MenuSection className=\"mb-1 border-b border-subtle px-3 py-2\">\n                <div className=\"truncate text-sm font-medium text-primary\">{header.title}</div>\n                {header.subtitle != null && (\n                  <div className=\"truncate text-xs text-muted\">{header.subtitle}</div>\n                )}\n                {headerExtra != null && headerExtra !== false && <div className=\"mt-1\">{headerExtra}</div>}\n              </MenuSection>\n            )}\n            {heading && (\n              <li className=\"px-3 py-1 text-micro font-semibold uppercase tracking-wide text-placeholder\">\n                {heading}\n              </li>\n            )}\n            {toBlocks(entries).map((block, i, blocks) => {\n              if (block.kind === \"loose\") {\n                const entry = block.entry;\n                if (entry.kind === \"divider\") {\n                  return <li key={entry.key} className=\"my-1 border-t border-subtle\" />;\n                }\n                return row(entry);\n              }\n              const headingId = `${uid}-group-${i}`;\n              const before = blocks[i - 1];\n              // Under a rule (or at the top of the rows) the rule's margin is the gap;\n              // straight under another group's last row the heading makes its own.\n              const tight = !before || (before.kind === \"loose\" && before.entry.kind === \"divider\");\n              return (\n                <li key={block.heading.key} role=\"none\">\n                  <div\n                    id={headingId}\n                    role=\"presentation\"\n                    className={cn(\n                      \"px-3 pb-0.5 text-caption font-semibold uppercase tracking-wide text-muted [overflow-wrap:anywhere]\",\n                      tight ? \"pt-1\" : \"pt-2.5\",\n                    )}\n                  >\n                    {block.heading.label}\n                  </div>\n                  <ul role=\"group\" aria-labelledby={headingId}>\n                    {block.rows.map(row)}\n                  </ul>\n                </li>\n              );\n            })}\n            {children?.(close)}\n            {footerBody != null && footerBody !== false && (\n              <MenuSection className=\"mt-1 border-t border-subtle px-3 py-2\">\n                {footerLabel ? (\n                  <nav aria-label={footerLabel} className={footerClass}>\n                    {footerBody}\n                  </nav>\n                ) : (\n                  <div className={footerClass}>{footerBody}</div>\n                )}\n              </MenuSection>\n            )}\n          </ul>\n        );\n      }}\n    </HoverMenu>\n  );\n}\n"],"mappings":"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","names":["children","href"]}

package/dist/shell/topbar-controls.d.ts

@@ -1,38 +1,33 @@
-import * as react from 'react';
-import { PalettePreset } from '../theme/palette-presets.js';
-import { ThemeMode } from '../theme/theme-store.js';
-import '../theme/chart-palette.js';
-import 'zustand/middleware';
-import 'zustand';
-
+import type { PalettePreset } from "../theme/palette-presets.js";
+import type { ThemeMode } from "../theme/theme-store.js";
 /** Shared square icon-button styling for top-bar triggers, so app-owned controls
  *  (account/feedback menus) line up with the shared ones. */
-declare const TOPBAR_TRIGGER_CLASS = "size-9 rounded-md flex items-center justify-center text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-hover)]";
+export declare const TOPBAR_TRIGGER_CLASS = "size-9 rounded-md flex items-center justify-center text-secondary hover:text-primary hover:bg-hover";
 /** Shared row styling for the top-bar hover-menu items. `text-start`, so a label that
  *  wraps aligns to the reading edge in RTL too. */
-declare const TOPBAR_MENU_ITEM_CLASS = "flex w-full items-center justify-between gap-3 px-3 py-2 text-sm text-start text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]";
+export declare const TOPBAR_MENU_ITEM_CLASS = "flex w-full items-center justify-between gap-3 px-3 py-2 text-sm text-start text-secondary hover:bg-hover";
 /** Sun/Moon toggle for the light/dark theme. Controlled: the app owns the mode. */
-declare function ThemeToggle({ mode, onToggle, ariaLabel, title, className, }: {
+export declare function ThemeToggle({ mode, onToggle, "aria-label": ariaLabel, title, className, }: {
     mode: ThemeMode;
     onToggle: () => void;
     /** Default: `topBar.theme` from the {@link UiKitProvider}, else English. */
-    ariaLabel?: string;
+    "aria-label"?: string;
     title?: string;
     className?: string;
-}): react.JSX.Element;
+}): import("react").JSX.Element;
 /** Appearance-preset switcher: a hover menu of palette presets with per-theme
  *  colour swatches. Controlled — the app owns the active id and applies it. */
-declare function PaletteMenu({ palettes, activeId, mode, onSelect, ariaLabel, heading, }: {
+export declare function PaletteMenu({ palettes, activeId, mode, onSelect, "aria-label": ariaLabel, heading, }: {
     palettes: PalettePreset[];
     activeId: string;
     mode: ThemeMode;
     onSelect: (id: string) => void;
     /** Default: `topBar.palette` from the {@link UiKitProvider}, else English. */
-    ariaLabel?: string;
+    "aria-label"?: string;
     /** Optional small heading row above the list. */
     heading?: string;
-}): react.JSX.Element;
-interface LanguageOption {
+}): import("react").JSX.Element;
+export interface LanguageOption {
     code: string;
     label: string;
     /** ISO 3166-1 alpha-2 country code (lowercase) for the flag-icons flag. */
@@ -47,15 +42,13 @@ interface LanguageOption {
  *  (Keksdose feedback #121). The flag also shows which language is currently on,
  *  which no icon can, and costs the same width on a crowded mobile bar. A globe
  *  covers the case where `current` matches nothing in `options`. */
-declare function LanguageMenu({ options, current, onChange, ariaLabel, heading, }: {
+export declare function LanguageMenu({ options, current, onChange, "aria-label": ariaLabel, heading, }: {
     options: LanguageOption[];
     current: string | undefined;
     onChange: (code: string) => void;
     /** Default: `topBar.language` from the {@link UiKitProvider}, else English. */
-    ariaLabel?: string;
+    "aria-label"?: string;
     /** Optional small heading row above the list — as on `TopBarActionMenu`,
      *  `OptionSwitcherMenu` and `PaletteMenu`. */
     heading?: string;
-}): react.JSX.Element;
-
-export { LanguageMenu, type LanguageOption, PaletteMenu, TOPBAR_MENU_ITEM_CLASS, TOPBAR_TRIGGER_CLASS, ThemeToggle };
+}): import("react").JSX.Element;

package/dist/shell/topbar-controls.js

@@ -5,15 +5,15 @@ import { cn } from "../lib/cn.js";
 import { HoverMenu } from "../components/hover-menu.js";
 import { Tooltip } from "../components/tooltip.js";
 import { DEFAULT_TOP_BAR_LABELS, useKitLabels } from "../i18n/kit-labels.js";
-const TOPBAR_TRIGGER_CLASS = "size-9 rounded-md flex items-center justify-center text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-hover)]";
-const TOPBAR_MENU_ITEM_CLASS = "flex w-full items-center justify-between gap-3 px-3 py-2 text-sm text-start text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]";
+const TOPBAR_TRIGGER_CLASS = "size-9 rounded-md flex items-center justify-center text-secondary hover:text-primary hover:bg-hover";
+const TOPBAR_MENU_ITEM_CLASS = "flex w-full items-center justify-between gap-3 px-3 py-2 text-sm text-start text-secondary hover:bg-hover";
 function MenuHeading({ children }) {
-  return /* @__PURE__ */ jsx("li", { className: "px-3 py-1 text-micro font-semibold uppercase tracking-wide text-[var(--text-placeholder)]", children });
+  return /* @__PURE__ */ jsx("li", { className: "px-3 py-1 text-micro font-semibold uppercase tracking-wide text-placeholder", children });
 }
 function ThemeToggle({
   mode,
   onToggle,
-  ariaLabel,
+  "aria-label": ariaLabel,
   title,
   className
 }) {
@@ -35,7 +35,7 @@ function PaletteMenu({
   activeId,
   mode,
   onSelect,
-  ariaLabel,
+  "aria-label": ariaLabel,
   heading
 }) {
   const labels = useKitLabels("topBar", DEFAULT_TOP_BAR_LABELS, { palette: ariaLabel });
@@ -43,7 +43,7 @@ function PaletteMenu({
   return /* @__PURE__ */ jsx(
     HoverMenu,
     {
-      ariaLabel: labels.palette,
+      "aria-label": labels.palette,
       trigger: ({ toggle }) => /* @__PURE__ */ jsx(Tooltip, { label: activeName, portal: true, children: /* @__PURE__ */ jsx(
         "button",
         {
@@ -80,10 +80,10 @@ function PaletteMenu({
                   )) }),
                   /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 flex-col text-start", children: [
                     /* @__PURE__ */ jsx("span", { className: "truncate", children: p.name }),
-                    /* @__PURE__ */ jsx("span", { className: "truncate text-caption text-[var(--text-placeholder)]", children: p.blurb })
+                    /* @__PURE__ */ jsx("span", { className: "truncate text-caption text-placeholder", children: p.blurb })
                   ] })
                 ] }),
-                activeId === p.id && /* @__PURE__ */ jsx(Check, { className: "size-4 shrink-0 text-[var(--text-secondary)]" })
+                activeId === p.id && /* @__PURE__ */ jsx(Check, { className: "size-4 shrink-0 text-secondary" })
               ]
             }
           ) }, p.id);
@@ -96,7 +96,7 @@ function LanguageMenu({
   options,
   current,
   onChange,
-  ariaLabel,
+  "aria-label": ariaLabel,
   heading
 }) {
   const labels = useKitLabels("topBar", DEFAULT_TOP_BAR_LABELS, { language: ariaLabel });
@@ -104,7 +104,7 @@ function LanguageMenu({
   return /* @__PURE__ */ jsx(
     HoverMenu,
     {
-      ariaLabel: labels.language,
+      "aria-label": labels.language,
       trigger: ({ toggle }) => /* @__PURE__ */ jsx(Tooltip, { label: active?.label ?? labels.language, portal: true, children: /* @__PURE__ */ jsx(
         "button",
         {
@@ -145,7 +145,7 @@ function LanguageMenu({
                   ),
                   lang.label
                 ] }),
-                isActive && /* @__PURE__ */ jsx(Check, { className: "size-4 text-[var(--text-secondary)]" })
+                isActive && /* @__PURE__ */ jsx(Check, { className: "size-4 text-secondary" })
               ]
             }
           ) }, lang.code);

package/dist/shell/topbar-controls.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/shell/topbar-controls.tsx"],"sourcesContent":["import { Check, Globe, Moon, Palette, Sun } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { HoverMenu } from \"../components/hover-menu\";\nimport type { PalettePreset } from \"../theme/palette-presets\";\nimport type { ThemeMode } from \"../theme/theme-store\";\nimport { Tooltip } from \"../components/tooltip\";\nimport { DEFAULT_TOP_BAR_LABELS, useKitLabels } from \"../i18n/kit-labels\";\n\n/** Shared square icon-button styling for top-bar triggers, so app-owned controls\n *  (account/feedback menus) line up with the shared ones. */\nexport const TOPBAR_TRIGGER_CLASS =\n  \"size-9 rounded-md flex items-center justify-center text-[var(--text-secondary)] hover:text-[var(--text-primary)] hover:bg-[var(--bg-hover)]\";\n\n/** Shared row styling for the top-bar hover-menu items. `text-start`, so a label that\n *  wraps aligns to the reading edge in RTL too. */\nexport const TOPBAR_MENU_ITEM_CLASS =\n  \"flex w-full items-center justify-between gap-3 px-3 py-2 text-sm text-start text-[var(--text-secondary)] hover:bg-[var(--bg-hover)]\";\n\n/** The small uppercase heading row the top-bar menus share (`heading`). */\nfunction MenuHeading({ children }: { children: string }) {\n  return (\n    <li className=\"px-3 py-1 text-micro font-semibold uppercase tracking-wide text-[var(--text-placeholder)]\">\n      {children}\n    </li>\n  );\n}\n\n/** Sun/Moon toggle for the light/dark theme. Controlled: the app owns the mode. */\nexport function ThemeToggle({\n  mode,\n  onToggle,\n  ariaLabel,\n  title,\n  className,\n}: {\n  mode: ThemeMode;\n  onToggle: () => void;\n  /** Default: `topBar.theme` from the {@link UiKitProvider}, else English. */\n  ariaLabel?: string;\n  title?: string;\n  className?: string;\n}) {\n  // This had no default at all, so a toggle rendered without `ariaLabel` was an\n  // icon button with no name — a reader heard \"button\" and nothing else.\n  const labels = useKitLabels(\"topBar\", DEFAULT_TOP_BAR_LABELS, { theme: ariaLabel });\n  const Icon = mode === \"dark\" ? Moon : Sun;\n  return (\n    <Tooltip label={title} portal>\n      <button\n        type=\"button\"\n        onClick={onToggle}\n        aria-label={labels.theme}\n        className={cn(TOPBAR_TRIGGER_CLASS, className)}\n      >\n        <Icon className=\"size-5\" />\n      </button>\n    </Tooltip>\n  );\n}\n\n/** Appearance-preset switcher: a hover menu of palette presets with per-theme\n *  colour swatches. Controlled — the app owns the active id and applies it. */\nexport function PaletteMenu({\n  palettes,\n  activeId,\n  mode,\n  onSelect,\n  ariaLabel,\n  heading,\n}: {\n  palettes: PalettePreset[];\n  activeId: string;\n  mode: ThemeMode;\n  onSelect: (id: string) => void;\n  /** Default: `topBar.palette` from the {@link UiKitProvider}, else English. */\n  ariaLabel?: string;\n  /** Optional small heading row above the list. */\n  heading?: string;\n}) {\n  const labels = useKitLabels(\"topBar\", DEFAULT_TOP_BAR_LABELS, { palette: ariaLabel });\n  const activeName = palettes.find((p) => p.id === activeId)?.name ?? activeId;\n  return (\n    <HoverMenu\n      ariaLabel={labels.palette}\n      trigger={({ toggle }) => (\n        <Tooltip label={activeName} portal>\n          <button\n            type=\"button\"\n            onClick={toggle}\n            aria-label={labels.palette}\n            className={TOPBAR_TRIGGER_CLASS}\n          >\n            {/* A DATA colour, not a semantic one: the palette mark is the\n                \"colour\" control, so it carries a colour, and which hue is\n                arbitrary. `--chart-1` is the violet end of the CVD-safe\n                categorical ramp and flips per theme — a fixed `violet-500` did\n                not, and stayed a cool violet island on a warm page. */}\n            <Palette className=\"size-5 text-[var(--chart-1)]\" />\n          </button>\n        </Tooltip>\n      )}\n    >\n      {(close) => (\n        <ul className=\"w-60 py-1\">\n          {heading && <MenuHeading>{heading}</MenuHeading>}\n          {palettes.map((p) => {\n            const ts = p[mode];\n            const swatches = [ts.bgPage, ts.brand, ts.moneyIncome, ts.moneyExpense, ts.moneyNet];\n            return (\n              <li key={p.id}>\n                <button\n                  type=\"button\"\n                  onClick={() => {\n                    onSelect(p.id);\n                    close();\n                  }}\n                  className={TOPBAR_MENU_ITEM_CLASS}\n                >\n                  <span className=\"flex min-w-0 items-center gap-2\">\n                    <span className=\"flex shrink-0 gap-0.5\">\n                      {/* Deliberately a neutral at 10% and not a token: this hairline\n                          sits on an ARBITRARY preset colour, so it has to read against\n                          whatever that preset paints, which no themed border does. */}\n                      {swatches.map((c, i) => (\n                        <span\n                          key={i}\n                          className=\"size-3.5 rounded-sm ring-1 ring-inset ring-black/10 dark:ring-white/10\"\n                          style={{ background: c }}\n                        />\n                      ))}\n                    </span>\n                    <span className=\"flex min-w-0 flex-col text-start\">\n                      <span className=\"truncate\">{p.name}</span>\n                      <span className=\"truncate text-caption text-[var(--text-placeholder)]\">\n                        {p.blurb}\n                      </span>\n                    </span>\n                  </span>\n                  {activeId === p.id && (\n                    <Check className=\"size-4 shrink-0 text-[var(--text-secondary)]\" />\n                  )}\n                </button>\n              </li>\n            );\n          })}\n        </ul>\n      )}\n    </HoverMenu>\n  );\n}\n\nexport interface LanguageOption {\n  code: string;\n  label: string;\n  /** ISO 3166-1 alpha-2 country code (lowercase) for the flag-icons flag. */\n  country: string;\n}\n\n/** Language switcher: a hover menu of options with flags and a check on the\n *  active one. Controlled — the app owns the current code and change handler.\n *\n *  The trigger is the *active* option's flag, not an icon: lucide's `Languages`\n *  glyph (文A) is the same mark Chrome puts in the omnibox for \"translate this\n *  page\", so it read as machine-translation rather than \"pick the UI language\"\n *  (Keksdose feedback #121). The flag also shows which language is currently on,\n *  which no icon can, and costs the same width on a crowded mobile bar. A globe\n *  covers the case where `current` matches nothing in `options`. */\nexport function LanguageMenu({\n  options,\n  current,\n  onChange,\n  ariaLabel,\n  heading,\n}: {\n  options: LanguageOption[];\n  current: string | undefined;\n  onChange: (code: string) => void;\n  /** Default: `topBar.language` from the {@link UiKitProvider}, else English. */\n  ariaLabel?: string;\n  /** Optional small heading row above the list — as on `TopBarActionMenu`,\n   *  `OptionSwitcherMenu` and `PaletteMenu`. */\n  heading?: string;\n}) {\n  const labels = useKitLabels(\"topBar\", DEFAULT_TOP_BAR_LABELS, { language: ariaLabel });\n  const active = options.find((o) => o.code === current);\n  return (\n    <HoverMenu\n      ariaLabel={labels.language}\n      trigger={({ toggle }) => (\n        <Tooltip label={active?.label ?? labels.language} portal>\n          <button\n            type=\"button\"\n            onClick={toggle}\n            aria-label={labels.language}\n            className={TOPBAR_TRIGGER_CLASS}\n          >\n            {active ? (\n              <span\n                aria-hidden\n                className={`fi fi-${active.country} inline-block h-[0.9375rem] w-5 shrink-0 rounded-sm shadow-[0_0_0_1px_rgba(0,0,0,0.08)]`}\n              />\n            ) : (\n              <Globe className=\"size-5\" />\n            )}\n          </button>\n        </Tooltip>\n      )}\n    >\n      {(close) => (\n        <ul className=\"py-1\">\n          {heading && <MenuHeading>{heading}</MenuHeading>}\n          {options.map((lang) => {\n            const isActive = lang.code === current;\n            return (\n              <li key={lang.code}>\n                <button\n                  type=\"button\"\n                  onClick={() => {\n                    onChange(lang.code);\n                    close();\n                  }}\n                  className={TOPBAR_MENU_ITEM_CLASS}\n                >\n                  <span className=\"flex items-center gap-2\">\n                    <span\n                      aria-hidden\n                      className={`fi fi-${lang.country} inline-block h-[0.9375rem] w-5 shrink-0 rounded-sm shadow-[0_0_0_1px_rgba(0,0,0,0.08)]`}\n                    />\n                    {lang.label}\n                  </span>\n                  {isActive && <Check className=\"size-4 text-[var(--text-secondary)]\" />}\n                </button>\n              </li>\n            );\n          })}\n        </ul>\n      )}\n    </HoverMenu>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/shell/topbar-controls.tsx"],"sourcesContent":["import { Check, Globe, Moon, Palette, Sun } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { HoverMenu } from \"../components/hover-menu\";\nimport type { PalettePreset } from \"../theme/palette-presets\";\nimport type { ThemeMode } from \"../theme/theme-store\";\nimport { Tooltip } from \"../components/tooltip\";\nimport { DEFAULT_TOP_BAR_LABELS, useKitLabels } from \"../i18n/kit-labels\";\n\n/** Shared square icon-button styling for top-bar triggers, so app-owned controls\n *  (account/feedback menus) line up with the shared ones. */\nexport const TOPBAR_TRIGGER_CLASS =\n  \"size-9 rounded-md flex items-center justify-center text-secondary hover:text-primary hover:bg-hover\";\n\n/** Shared row styling for the top-bar hover-menu items. `text-start`, so a label that\n *  wraps aligns to the reading edge in RTL too. */\nexport const TOPBAR_MENU_ITEM_CLASS =\n  \"flex w-full items-center justify-between gap-3 px-3 py-2 text-sm text-start text-secondary hover:bg-hover\";\n\n/** The small uppercase heading row the top-bar menus share (`heading`). */\nfunction MenuHeading({ children }: { children: string }) {\n  return (\n    <li className=\"px-3 py-1 text-micro font-semibold uppercase tracking-wide text-placeholder\">\n      {children}\n    </li>\n  );\n}\n\n/** Sun/Moon toggle for the light/dark theme. Controlled: the app owns the mode. */\nexport function ThemeToggle({\n  mode,\n  onToggle,\n  \"aria-label\": ariaLabel,\n  title,\n  className,\n}: {\n  mode: ThemeMode;\n  onToggle: () => void;\n  /** Default: `topBar.theme` from the {@link UiKitProvider}, else English. */\n  \"aria-label\"?: string;\n  title?: string;\n  className?: string;\n}) {\n  // This had no default at all, so a toggle rendered without `aria-label` was an\n  // icon button with no name — a reader heard \"button\" and nothing else.\n  const labels = useKitLabels(\"topBar\", DEFAULT_TOP_BAR_LABELS, { theme: ariaLabel });\n  const Icon = mode === \"dark\" ? Moon : Sun;\n  return (\n    <Tooltip label={title} portal>\n      <button\n        type=\"button\"\n        onClick={onToggle}\n        aria-label={labels.theme}\n        className={cn(TOPBAR_TRIGGER_CLASS, className)}\n      >\n        <Icon className=\"size-5\" />\n      </button>\n    </Tooltip>\n  );\n}\n\n/** Appearance-preset switcher: a hover menu of palette presets with per-theme\n *  colour swatches. Controlled — the app owns the active id and applies it. */\nexport function PaletteMenu({\n  palettes,\n  activeId,\n  mode,\n  onSelect,\n  \"aria-label\": ariaLabel,\n  heading,\n}: {\n  palettes: PalettePreset[];\n  activeId: string;\n  mode: ThemeMode;\n  onSelect: (id: string) => void;\n  /** Default: `topBar.palette` from the {@link UiKitProvider}, else English. */\n  \"aria-label\"?: string;\n  /** Optional small heading row above the list. */\n  heading?: string;\n}) {\n  const labels = useKitLabels(\"topBar\", DEFAULT_TOP_BAR_LABELS, { palette: ariaLabel });\n  const activeName = palettes.find((p) => p.id === activeId)?.name ?? activeId;\n  return (\n    <HoverMenu\n      aria-label={labels.palette}\n      trigger={({ toggle }) => (\n        <Tooltip label={activeName} portal>\n          <button\n            type=\"button\"\n            onClick={toggle}\n            aria-label={labels.palette}\n            className={TOPBAR_TRIGGER_CLASS}\n          >\n            {/* A DATA colour, not a semantic one: the palette mark is the\n                \"colour\" control, so it carries a colour, and which hue is\n                arbitrary. `--chart-1` is the violet end of the CVD-safe\n                categorical ramp and flips per theme — a fixed `violet-500` did\n                not, and stayed a cool violet island on a warm page. */}\n            <Palette className=\"size-5 text-[var(--chart-1)]\" />\n          </button>\n        </Tooltip>\n      )}\n    >\n      {(close) => (\n        <ul className=\"w-60 py-1\">\n          {heading && <MenuHeading>{heading}</MenuHeading>}\n          {palettes.map((p) => {\n            const ts = p[mode];\n            const swatches = [ts.bgPage, ts.brand, ts.moneyIncome, ts.moneyExpense, ts.moneyNet];\n            return (\n              <li key={p.id}>\n                <button\n                  type=\"button\"\n                  onClick={() => {\n                    onSelect(p.id);\n                    close();\n                  }}\n                  className={TOPBAR_MENU_ITEM_CLASS}\n                >\n                  <span className=\"flex min-w-0 items-center gap-2\">\n                    <span className=\"flex shrink-0 gap-0.5\">\n                      {/* Deliberately a neutral at 10% and not a token: this hairline\n                          sits on an ARBITRARY preset colour, so it has to read against\n                          whatever that preset paints, which no themed border does. */}\n                      {swatches.map((c, i) => (\n                        <span\n                          key={i}\n                          className=\"size-3.5 rounded-sm ring-1 ring-inset ring-black/10 dark:ring-white/10\"\n                          style={{ background: c }}\n                        />\n                      ))}\n                    </span>\n                    <span className=\"flex min-w-0 flex-col text-start\">\n                      <span className=\"truncate\">{p.name}</span>\n                      <span className=\"truncate text-caption text-placeholder\">\n                        {p.blurb}\n                      </span>\n                    </span>\n                  </span>\n                  {activeId === p.id && (\n                    <Check className=\"size-4 shrink-0 text-secondary\" />\n                  )}\n                </button>\n              </li>\n            );\n          })}\n        </ul>\n      )}\n    </HoverMenu>\n  );\n}\n\nexport interface LanguageOption {\n  code: string;\n  label: string;\n  /** ISO 3166-1 alpha-2 country code (lowercase) for the flag-icons flag. */\n  country: string;\n}\n\n/** Language switcher: a hover menu of options with flags and a check on the\n *  active one. Controlled — the app owns the current code and change handler.\n *\n *  The trigger is the *active* option's flag, not an icon: lucide's `Languages`\n *  glyph (文A) is the same mark Chrome puts in the omnibox for \"translate this\n *  page\", so it read as machine-translation rather than \"pick the UI language\"\n *  (Keksdose feedback #121). The flag also shows which language is currently on,\n *  which no icon can, and costs the same width on a crowded mobile bar. A globe\n *  covers the case where `current` matches nothing in `options`. */\nexport function LanguageMenu({\n  options,\n  current,\n  onChange,\n  \"aria-label\": ariaLabel,\n  heading,\n}: {\n  options: LanguageOption[];\n  current: string | undefined;\n  onChange: (code: string) => void;\n  /** Default: `topBar.language` from the {@link UiKitProvider}, else English. */\n  \"aria-label\"?: string;\n  /** Optional small heading row above the list — as on `TopBarActionMenu`,\n   *  `OptionSwitcherMenu` and `PaletteMenu`. */\n  heading?: string;\n}) {\n  const labels = useKitLabels(\"topBar\", DEFAULT_TOP_BAR_LABELS, { language: ariaLabel });\n  const active = options.find((o) => o.code === current);\n  return (\n    <HoverMenu\n      aria-label={labels.language}\n      trigger={({ toggle }) => (\n        <Tooltip label={active?.label ?? labels.language} portal>\n          <button\n            type=\"button\"\n            onClick={toggle}\n            aria-label={labels.language}\n            className={TOPBAR_TRIGGER_CLASS}\n          >\n            {active ? (\n              <span\n                aria-hidden\n                className={`fi fi-${active.country} inline-block h-[0.9375rem] w-5 shrink-0 rounded-sm shadow-[0_0_0_1px_rgba(0,0,0,0.08)]`}\n              />\n            ) : (\n              <Globe className=\"size-5\" />\n            )}\n          </button>\n        </Tooltip>\n      )}\n    >\n      {(close) => (\n        <ul className=\"py-1\">\n          {heading && <MenuHeading>{heading}</MenuHeading>}\n          {options.map((lang) => {\n            const isActive = lang.code === current;\n            return (\n              <li key={lang.code}>\n                <button\n                  type=\"button\"\n                  onClick={() => {\n                    onChange(lang.code);\n                    close();\n                  }}\n                  className={TOPBAR_MENU_ITEM_CLASS}\n                >\n                  <span className=\"flex items-center gap-2\">\n                    <span\n                      aria-hidden\n                      className={`fi fi-${lang.country} inline-block h-[0.9375rem] w-5 shrink-0 rounded-sm shadow-[0_0_0_1px_rgba(0,0,0,0.08)]`}\n                    />\n                    {lang.label}\n                  </span>\n                  {isActive && <Check className=\"size-4 text-secondary\" />}\n                </button>\n              </li>\n            );\n          })}\n        </ul>\n      )}\n    </HoverMenu>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/shell.d.ts

@@ -1,116 +1,25 @@
-export { LanguageMenu, LanguageOption, PaletteMenu, TOPBAR_MENU_ITEM_CLASS, TOPBAR_TRIGGER_CLASS, ThemeToggle } from './shell/topbar-controls.js';
-export { TopBar, TopBarProps } from './shell/top-bar.js';
-export { bA as AppShell, bC as AppShellMoreLabels, bD as AppShellNavItem, bE as AppShellProps, bF as AppShellSidebarFooterItem, bG as AppShellSubItem, co as DEFAULT_APP_SHELL_MORE_LABELS, cG as DEFAULT_MOBILE_BAR_MAX, ga as splitMobileBar } from './delete-account-setting-DAgGBrbn.js';
-export { OptionSwitcherMenu, OptionSwitcherOption } from './shell/option-switcher-menu.js';
-export { RoleSwitcher, RoleSwitcherProps } from './shell/role-switcher.js';
-export { TopBarActionMenu, TopBarMenuEntry, TopBarMenuHeader } from './shell/topbar-action-menu.js';
-export { TopBarBrand, TopBarBrandProps } from './shell/top-bar-brand.js';
-export { AuthLayout, AuthLayoutProps } from './shell/auth-layout.js';
-export { SETTINGS_SEARCH_THRESHOLD, SettingsLayout, SettingsLayoutProps, SettingsLayoutWidth } from './settings/settings-layout.js';
-export { SETTINGS_FROM_LIST_STATE, SettingsLayoutMode, SettingsLocation, SettingsLocationResult, SettingsLocationRules, SettingsRoute, UseSettingsRouteOptions, resolveSettingsLocation, settingsFromListState, useSettingsRoute } from './settings/use-settings-route.js';
-export { SETTINGS_FOCUS_MS, SETTINGS_FOCUS_RING, useSettingsFocus } from './settings/use-settings-focus.js';
-export { SettingsSection, SettingsSectionProps } from './settings/settings-section.js';
-export { SettingsLayoutContextValue, useSettingsLayout } from './settings/settings-context.js';
-export { SettingsHeadingLevel, SettingsHeadingLevelProps, SettingsHeadingTag, useSettingsHeadingLevel } from './settings/settings-heading.js';
-export { SettingsEntry, SettingsGroup, SettingsSearchEntriesOptions, settingsHref, settingsSearchEntries, visibleSettingsEntries, visibleSettingsGroups } from './settings/settings-catalogue.js';
-export { DEFAULT_LAST_VISITED_EXCLUDES, LastVisitedPageOptions, NEXT_PARAM, PathPattern, RedirectIfAuthed, RedirectIfAuthedProps, RootEntry, RootEntryProps, RoutingSession, clearLastVisitedPage, readLastVisitedPage, safeNextPath, useLastVisitedPage } from './landing/routing.js';
-export { PublicHeader, PublicHeaderBrand, PublicHeaderProps } from './landing/public-header.js';
-import 'react';
-import './theme/palette-presets.js';
-import './theme/chart-palette.js';
-import './theme/theme-store.js';
-import 'zustand/middleware';
-import 'zustand';
-import './components/tooltip.js';
-import './hooks/use-anchored-rect.js';
-import './lib/clipping.js';
-import './data-table-labels-BJ5JE_X2.js';
-import './components/data-table-sort.js';
-import './components/swipeable-row.js';
-import './components/status-dot.js';
-import './components/progress-bar.js';
-import './components/signed-amount.js';
-import './components/stat-tile.js';
-import './components/chip.js';
-import 'lucide-react';
-import './components/field-parts.js';
-import './components/write-lock.js';
-import './components/mini-calendar.js';
-import './components/calendar-heatmap.js';
-import './components/popover.js';
-import './hooks/use-breakpoint.js';
-import './components/field-sync.js';
-import './wizard/types.js';
-import './tour/tour.js';
-import './search/command-palette.js';
-import './search/global-search.js';
-import './search/search-index.js';
-import './components/month-picker.js';
-import './components/page-contents.js';
-import './components/series-chart-labels.js';
-import './components/pie-chart-labels.js';
-import './components/sparkline.js';
-import './components/signature-pad.js';
-import './components/password-strength.js';
-import './components/swatch-picker.js';
-import './components/tile-radio.js';
-import './components/icon-picker.js';
-import './components/dialog-frame.js';
-import './components/modal.js';
-import './hooks/use-search-param-state.js';
-import './components/measured-grid.js';
-import './components/user-avatar.js';
-import './lib/person-name.js';
-import './components/floating-panel.js';
-import './hooks/use-authed-src.js';
-import './components/account-settings-labels.js';
-import './components/bulk-action-bar.js';
-import './components/list.js';
-import './components/breadcrumbs.js';
-import './components/toast.js';
-import './components/description-list.js';
-import './components/line-items.js';
-import './components/error-boundary.js';
-import './components/authed-image.js';
-import './components/image-grid.js';
-import './components/lightbox.js';
-import './auth/sign-in-form.js';
-import './landing/access.js';
-import './landing/landing-labels.js';
-import './auth/complete-name-dialog.js';
-import './auth/forgot-password-form.js';
-import './auth/status-parts.js';
-import './auth/reset-password-form.js';
-import './auth/verify-email.js';
-import './auth/not-found-page.js';
-import './auth/accept-invitation.js';
-import './shell/company-switcher.js';
-import './account/email-change-setting.js';
-import './account/sessions-setting.js';
-import './lib/format.js';
-import './account/data-export-setting.js';
-import './components/account-chips.js';
-import './admin/admin-parts.js';
-import './admin/admin-action-log.js';
-import './settings/settings-labels.js';
-import './demo/demo-labels.js';
-import './i18n/plurals.js';
-import './components/appearance-labels.js';
-import './theme/contrast.js';
-import './theme/text-size.js';
-import './components/reauth-dialog.js';
-import './components/server-wake.js';
-import './lib/server-wake.js';
-import './components/translation-review-labels.js';
-import './lib/translation-review.js';
-import './components/country-select.js';
-import './components/inline-edit-field.js';
-import './lib/iban.js';
-import './lib/phone.js';
-import './components/sign-chip.js';
-import './components/column-mapper.js';
-import './lib/column-mapping.js';
-import './lib/table-text.js';
-import './components/focus-ring.js';
-import './components/menu-item.js';
-import './landing/landing-actions.js';
+export * from "./shell/topbar-controls.js";
+export * from "./shell/top-bar.js";
+export * from "./shell/app-shell.js";
+export * from "./shell/option-switcher-menu.js";
+export * from "./shell/role-switcher.js";
+export * from "./shell/topbar-action-menu.js";
+export * from "./shell/top-bar-brand.js";
+export * from "./shell/auth-layout.js";
+export { SettingsLayout, SETTINGS_SEARCH_THRESHOLD } from "./settings/settings-layout.js";
+export type { SettingsLayoutProps, SettingsLayoutWidth, SettingsDocumentTitleParts } from "./settings/settings-layout.js";
+export { useSettingsRoute, resolveSettingsLocation, settingsFromListState, SETTINGS_FROM_LIST_STATE, } from "./settings/use-settings-route.js";
+export type { UseSettingsRouteOptions, SettingsRoute, SettingsLayoutMode, SettingsLocation, SettingsLocationRules, SettingsLocationResult, } from "./settings/use-settings-route.js";
+export { useSettingsFocus, SETTINGS_FOCUS_RING, SETTINGS_FOCUS_MS } from "./settings/use-settings-focus.js";
+export { SettingsSection } from "./settings/settings-section.js";
+export type { SettingsSectionProps } from "./settings/settings-section.js";
+export { useSettingsLayout } from "./settings/settings-context.js";
+export type { SettingsLayoutContextValue } from "./settings/settings-context.js";
+export { SettingsHeadingLevel, useSettingsHeadingLevel } from "./settings/settings-heading.js";
+export type { SettingsHeadingLevelProps, SettingsHeadingTag } from "./settings/settings-heading.js";
+export { settingsSearchEntries, visibleSettingsGroups, visibleSettingsEntries, settingsHref, } from "./settings/settings-catalogue.js";
+export type { SettingsGroup, SettingsEntry, SettingsSearchEntriesOptions } from "./settings/settings-catalogue.js";
+export { RootEntry, RedirectIfAuthed, useLastVisitedPage, readLastVisitedPage, clearLastVisitedPage, safeNextPath, NEXT_PARAM, DEFAULT_LAST_VISITED_EXCLUDES, } from "./landing/routing.js";
+export type { RootEntryProps, RedirectIfAuthedProps, RoutingSession, LastVisitedPageOptions, PathPattern, } from "./landing/routing.js";
+export { PublicHeader } from "./landing/public-header.js";
+export type { PublicHeaderProps, PublicHeaderBrand } from "./landing/public-header.js";

package/dist/shell.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/shell.ts"],"sourcesContent":["// `@eifi1/ui-kit/shell` — the composable app chrome.\n//\n// A re-slicing of the main barrel, not a new API. This entry point requires\n// `react-router`: AppShell renders NavLink and TopBarActionMenu renders Link.\nexport * from \"./shell/topbar-controls\";\nexport * from \"./shell/top-bar\";\nexport * from \"./shell/app-shell\";\nexport * from \"./shell/option-switcher-menu\";\nexport * from \"./shell/role-switcher\";\nexport * from \"./shell/topbar-action-menu\";\nexport * from \"./shell/top-bar-brand\";\nexport * from \"./shell/auth-layout\";\n// 0.31.0: the settings and admin pages' shell (docs/settings-harmonization.md §3, §5).\nexport { SettingsLayout, SETTINGS_SEARCH_THRESHOLD } from \"./settings/settings-layout\";\nexport type { SettingsLayoutProps, SettingsLayoutWidth } from \"./settings/settings-layout\";\nexport {\n  useSettingsRoute,\n  resolveSettingsLocation,\n  settingsFromListState,\n  SETTINGS_FROM_LIST_STATE,\n} from \"./settings/use-settings-route\";\nexport type {\n  UseSettingsRouteOptions,\n  SettingsRoute,\n  SettingsLayoutMode,\n  SettingsLocation,\n  SettingsLocationRules,\n  SettingsLocationResult,\n} from \"./settings/use-settings-route\";\nexport { useSettingsFocus, SETTINGS_FOCUS_RING, SETTINGS_FOCUS_MS } from \"./settings/use-settings-focus\";\nexport { SettingsSection } from \"./settings/settings-section\";\nexport type { SettingsSectionProps } from \"./settings/settings-section\";\nexport { useSettingsLayout } from \"./settings/settings-context\";\nexport type { SettingsLayoutContextValue } from \"./settings/settings-context\";\nexport { SettingsHeadingLevel, useSettingsHeadingLevel } from \"./settings/settings-heading\";\nexport type { SettingsHeadingLevelProps, SettingsHeadingTag } from \"./settings/settings-heading\";\nexport {\n  settingsSearchEntries,\n  visibleSettingsGroups,\n  visibleSettingsEntries,\n  settingsHref,\n} from \"./settings/settings-catalogue\";\nexport type { SettingsGroup, SettingsEntry, SettingsSearchEntriesOptions } from \"./settings/settings-catalogue\";\n// 0.31.0: the public pages' header and the resume (docs/landing-demo-harmonization.md §3, §4.1).\nexport {\n  RootEntry,\n  RedirectIfAuthed,\n  useLastVisitedPage,\n  readLastVisitedPage,\n  clearLastVisitedPage,\n  safeNextPath,\n  NEXT_PARAM,\n  DEFAULT_LAST_VISITED_EXCLUDES,\n} from \"./landing/routing\";\nexport type {\n  RootEntryProps,\n  RedirectIfAuthedProps,\n  RoutingSession,\n  LastVisitedPageOptions,\n  PathPattern,\n} from \"./landing/routing\";\nexport { PublicHeader } from \"./landing/public-header\";\nexport type { PublicHeaderProps, PublicHeaderBrand } from \"./landing/public-header\";\n"],"mappings":";AAIA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAEd,SAAS,gBAAgB,iCAAiC;AAE1D;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AASP,SAAS,kBAAkB,qBAAqB,yBAAyB;AACzE,SAAS,uBAAuB;AAEhC,SAAS,yBAAyB;AAElC,SAAS,sBAAsB,+BAA+B;AAE9D;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAQP,SAAS,oBAAoB;","names":[]}
+{"version":3,"sources":["../src/shell.ts"],"sourcesContent":["// `@eifi1/ui-kit/shell` — the composable app chrome.\n//\n// A re-slicing of the main barrel, not a new API. This entry point requires\n// `react-router`: AppShell renders NavLink and TopBarActionMenu renders Link.\nexport * from \"./shell/topbar-controls\";\nexport * from \"./shell/top-bar\";\nexport * from \"./shell/app-shell\";\nexport * from \"./shell/option-switcher-menu\";\nexport * from \"./shell/role-switcher\";\nexport * from \"./shell/topbar-action-menu\";\nexport * from \"./shell/top-bar-brand\";\nexport * from \"./shell/auth-layout\";\n// 0.31.0: the settings and admin pages' shell (docs/settings-harmonization.md §3, §5).\nexport { SettingsLayout, SETTINGS_SEARCH_THRESHOLD } from \"./settings/settings-layout\";\nexport type { SettingsLayoutProps, SettingsLayoutWidth, SettingsDocumentTitleParts } from \"./settings/settings-layout\";\nexport {\n  useSettingsRoute,\n  resolveSettingsLocation,\n  settingsFromListState,\n  SETTINGS_FROM_LIST_STATE,\n} from \"./settings/use-settings-route\";\nexport type {\n  UseSettingsRouteOptions,\n  SettingsRoute,\n  SettingsLayoutMode,\n  SettingsLocation,\n  SettingsLocationRules,\n  SettingsLocationResult,\n} from \"./settings/use-settings-route\";\nexport { useSettingsFocus, SETTINGS_FOCUS_RING, SETTINGS_FOCUS_MS } from \"./settings/use-settings-focus\";\nexport { SettingsSection } from \"./settings/settings-section\";\nexport type { SettingsSectionProps } from \"./settings/settings-section\";\nexport { useSettingsLayout } from \"./settings/settings-context\";\nexport type { SettingsLayoutContextValue } from \"./settings/settings-context\";\nexport { SettingsHeadingLevel, useSettingsHeadingLevel } from \"./settings/settings-heading\";\nexport type { SettingsHeadingLevelProps, SettingsHeadingTag } from \"./settings/settings-heading\";\nexport {\n  settingsSearchEntries,\n  visibleSettingsGroups,\n  visibleSettingsEntries,\n  settingsHref,\n} from \"./settings/settings-catalogue\";\nexport type { SettingsGroup, SettingsEntry, SettingsSearchEntriesOptions } from \"./settings/settings-catalogue\";\n// 0.31.0: the public pages' header and the resume (docs/landing-demo-harmonization.md §3, §4.1).\nexport {\n  RootEntry,\n  RedirectIfAuthed,\n  useLastVisitedPage,\n  readLastVisitedPage,\n  clearLastVisitedPage,\n  safeNextPath,\n  NEXT_PARAM,\n  DEFAULT_LAST_VISITED_EXCLUDES,\n} from \"./landing/routing\";\nexport type {\n  RootEntryProps,\n  RedirectIfAuthedProps,\n  RoutingSession,\n  LastVisitedPageOptions,\n  PathPattern,\n} from \"./landing/routing\";\nexport { PublicHeader } from \"./landing/public-header\";\nexport type { PublicHeaderProps, PublicHeaderBrand } from \"./landing/public-header\";\n"],"mappings":";AAIA,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AACd,cAAc;AAEd,SAAS,gBAAgB,iCAAiC;AAE1D;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AASP,SAAS,kBAAkB,qBAAqB,yBAAyB;AACzE,SAAS,uBAAuB;AAEhC,SAAS,yBAAyB;AAElC,SAAS,sBAAsB,+BAA+B;AAE9D;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAGP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OACK;AAQP,SAAS,oBAAoB;","names":[]}

package/dist/table-text.d.ts

@@ -1 +1 @@
-export { DecimalRule, ParseTableOptions, ParseTextTableOptions, ParsedTable, TableLine, TableSeparator, TextTable, cellNumber, isCellNumber, parseRows, parseTable, parseTextTable, splitRow, tableNumber } from './lib/table-text.js';
+export * from "./lib/table-text.js";

package/dist/testing/css-variables.d.ts

@@ -29,8 +29,8 @@
  *  stylesheet's `:root` / `.dark` mirror. Component internals (`--slider-fill`, `--fp-*`,
  *  `--icon-button-tone`, `--label-strip-edge`) are not: an app that reads one depends on
  *  the kit's internals, and the guard says so. */
-declare const KIT_CSS_VARIABLES: ReadonlySet<string>;
-interface UndeclaredCssVariablesOptions {
+export declare const KIT_CSS_VARIABLES: ReadonlySet<string>;
+export interface UndeclaredCssVariablesOptions {
     /** Variables a library writes at runtime, as names or patterns:
      *  `["--radix-collapsible-content-height"]`. An app's own writes are found in its
      *  source and need no listing. */
@@ -47,7 +47,7 @@ interface UndeclaredCssVariablesOptions {
  * declared only inside `@theme inline`, which Tailwind never emits as a variable. Comments
  * are skipped. The same rule builds {@link KIT_CSS_VARIABLES} from `tokens.css`.
  */
-declare function declaredCustomProperties(css: string): Set<string>;
+export declare function declaredCustomProperties(css: string): Set<string>;
 /**
  * Every `var(--name)` without a fallback that nothing declares, as `"path:line --name"`.
  *
@@ -69,6 +69,4 @@ declare function declaredCustomProperties(css: string): Set<string>;
  * (`test.css.include`) would otherwise lose every declaration and every use in it, and
  * this would pass or fail for the wrong reason.
  */
-declare function undeclaredCssVariables(sources: Record<string, string>, options?: UndeclaredCssVariablesOptions): string[];
-
-export { KIT_CSS_VARIABLES, type UndeclaredCssVariablesOptions, declaredCustomProperties, undeclaredCssVariables };
+export declare function undeclaredCssVariables(sources: Record<string, string>, options?: UndeclaredCssVariablesOptions): string[];

package/dist/testing/css-variables.generated.d.ts

@@ -1,7 +1,5 @@
 /** Every custom property tokens.css declares, `@theme inline` names and `--app-nav-h`
  *  left out (100 names). */
-declare const KIT_NAMES: string;
+export declare const KIT_NAMES: string;
 /** The theme variables of Tailwind 4.3.3's `theme.css` (413 names). */
-declare const TAILWIND_THEME_NAMES: string;
-
-export { KIT_NAMES, TAILWIND_THEME_NAMES };
+export declare const TAILWIND_THEME_NAMES: string;

package/dist/testing/index.d.ts

@@ -1 +1,2 @@
-export { KIT_CSS_VARIABLES, UndeclaredCssVariablesOptions, declaredCustomProperties, undeclaredCssVariables } from './css-variables.js';
+export { KIT_CSS_VARIABLES, declaredCustomProperties, undeclaredCssVariables, type UndeclaredCssVariablesOptions, } from "./css-variables.js";
+export { setViewportWidth, stubResizeObserver, stubViewportWidth, viewportMatchMedia, type ResizeObserverStub, type StubbedBoxSize, type ViewportOptions, } from "./viewport.js";

package/dist/testing/index.js

@@ -4,9 +4,19 @@ import {
   declaredCustomProperties,
   undeclaredCssVariables
 } from "./css-variables.js";
+import {
+  setViewportWidth,
+  stubResizeObserver,
+  stubViewportWidth,
+  viewportMatchMedia
+} from "./viewport.js";
 export {
   KIT_CSS_VARIABLES,
   declaredCustomProperties,
-  undeclaredCssVariables
+  setViewportWidth,
+  stubResizeObserver,
+  stubViewportWidth,
+  undeclaredCssVariables,
+  viewportMatchMedia
 };
 //# sourceMappingURL=index.js.map

package/dist/testing/index.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/testing/index.ts"],"sourcesContent":["// `@eifi1/ui-kit/testing` — helpers an app runs from its OWN test suite (0.33).\n//\n// Not part of the main barrel: nothing here renders, and an app's production bundle has\n// no business carrying it. Browser-safe like the rest of the kit (no `node:fs`): each\n// helper takes texts, so an app collects them with `import.meta.glob` or `node:fs`, as\n// its setup allows. The first content is the guard against undeclared CSS custom\n// properties (docs/colour-roles-harmonization.md §8).\nexport {\n  KIT_CSS_VARIABLES,\n  declaredCustomProperties,\n  undeclaredCssVariables,\n  type UndeclaredCssVariablesOptions,\n} from \"./css-variables\";\n"],"mappings":";AAOA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAEK;","names":[]}
+{"version":3,"sources":["../../src/testing/index.ts"],"sourcesContent":["// `@eifi1/ui-kit/testing` — helpers an app runs from its OWN test suite (0.33).\n//\n// Not part of the main barrel: nothing here renders, and an app's production bundle has\n// no business carrying it. Browser-safe like the rest of the kit (no `node:fs`): each\n// helper takes texts, so an app collects them with `import.meta.glob` or `node:fs`, as\n// its setup allows. The first content is the guard against undeclared CSS custom\n// properties (docs/colour-roles-harmonization.md §8).\nexport {\n  KIT_CSS_VARIABLES,\n  declaredCustomProperties,\n  undeclaredCssVariables,\n  type UndeclaredCssVariablesOptions,\n} from \"./css-variables\";\n// 0.34 (refactor audit 2026-10, TST-10): the environment jsdom lacks — a `matchMedia`\n// that answers from a viewport width (right at every text size) and a `ResizeObserver`\n// the test drives. Framework-free: each returns its own undo. 0.35: `setViewportWidth`,\n// a live resize of the stub in force — its lists flip and fire `change` (keksdose).\nexport {\n  setViewportWidth,\n  stubResizeObserver,\n  stubViewportWidth,\n  viewportMatchMedia,\n  type ResizeObserverStub,\n  type StubbedBoxSize,\n  type ViewportOptions,\n} from \"./viewport\";\n"],"mappings":";AAOA;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,OAEK;AAKP;AAAA,EACE;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,OAIK;","names":[]}