@eifi1/ui-kit 0.48.2 → 0.50.0

package/dist/settings/settings-layout.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/settings/settings-layout.tsx"],"sourcesContent":["import { useCallback, useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport type { ReactElement, ReactNode } from \"react\";\nimport { Link, useHref, useLocation } from \"react-router\";\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\nimport { Button } from \"../components/button\";\nimport { Card } from \"../components/card\";\nimport { EmptyState } from \"../components/empty-state\";\nimport { Tabs } from \"../components/tabs\";\nimport { FOCUS_RING } from \"../components/focus-ring\";\nimport { Chip } from \"../components/chip\";\nimport { List, ListItem } from \"../components/list\";\nimport type { ListItemLinkProps } from \"../components/list\";\nimport { PageHeader } from \"../components/page-header\";\nimport { SearchField } from \"../components/search-field\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels, type LabelOverride } from \"../i18n/kit-labels\";\nimport { createSearchIndex } from \"../search/search-index\";\nimport type { SearchEntry } from \"../search/search-index\";\nimport {\n  normalizeSettingsBase,\n  settingsHref,\n  settingsKeywords,\n  visibleSettingsEntries,\n} from \"./settings-catalogue\";\nimport type { SettingsEntry, SettingsGroup } from \"./settings-catalogue\";\nimport { SettingsLayoutContext } from \"./settings-context\";\nimport type { SettingsLayoutContextValue } from \"./settings-context\";\nimport { SettingsHeadingLevel } from \"./settings-heading\";\nimport { DEFAULT_SETTINGS_LABELS } from \"./settings-labels\";\nimport type { SettingsLabels } from \"./settings-labels\";\nimport { settingsFromListState, useSettingsRoute } from \"./use-settings-route\";\nimport type { SettingsLayoutMode } from \"./use-settings-route\";\nimport { useSettingsFocus } from \"./use-settings-focus\";\n\n/** The page's width cap (§3.2): `6xl` for settings, `7xl` for keksdose's admin, whose\n *  user table scrolled sideways at 6xl (dev#488). */\nexport type SettingsLayoutWidth = \"6xl\" | \"7xl\";\n\n/** More entries than this and the search field shows by itself (§3.4): Kurvenschmiede has\n *  about twelve, keksdose 26; a page of six needs none. */\nexport const SETTINGS_SEARCH_THRESHOLD = 8;\n\n/** The desktop sidebar's column: sticky beside a long group (§3.2). */\nconst SIDEBAR_COLUMN = \"mb-4 md:sticky md:top-6 md:mb-0 md:self-start\";\n\nexport interface SettingsLayoutProps<G extends string> {\n  /** The page's `h1`: \"Settings\", \"Administration\". Default: `labels.title`. */\n  title?: ReactNode;\n  /** The groups, in order (§4.2). */\n  groups: readonly SettingsGroup<G>[];\n  /** One entry per setting (§4.1). Hidden entries leave search; a group left without a\n   *  visible one is hidden. */\n  entries: readonly SettingsEntry<G>[];\n  /** `/settings` or `/admin`. The layout owns every path below it. */\n  basePath: string;\n  /** The group `/settings` opens on a desktop. Default: the first visible one. */\n  defaultGroup?: G;\n  /** Retired group ids and their successors, replaced in the address (§3.1). */\n  aliases?: Readonly<Partial<Record<string, G>>>;\n  /**\n   * The search field. Left out, it shows once more than {@link SETTINGS_SEARCH_THRESHOLD}\n   * entries are visible; `true` or `false` wins over the count — keksdose's admin keeps\n   * none (§3.4, §10.3). ⌘K gets the entries either way ({@link settingsSearchEntries}).\n   */\n  search?: boolean;\n  /** See {@link SettingsLayoutWidth}. Default `\"6xl\"`. */\n  width?: SettingsLayoutWidth;\n  /** The group's cards, in one column. `sub` is the path segment after the group, which\n   *  a card owns (`useSettingsLayout().selectSub`). */\n  renderGroup: (group: G, sub: string | null) => ReactNode;\n  /**\n   * Rows under the phone's group list that LEAVE settings — kastlan's \"Administration\",\n   * its import page (§3.3, §5). `ListItem`s with an `href`; the layout puts them in a list\n   * of their own, so they never read as a group. Not shown on a desktop, where the app's\n   * own navigation carries them.\n   */\n  phoneFooter?: ReactNode;\n  /**\n   * 0.42.0 (docs/admin-harmonization.md §2.5 decision 16): content under the section\n   * list on a desktop, in the same sticky column — the admin area's Tools list\n   * (`AdminToolLinks`). Not shown on a phone, where `phoneFooter` carries the same links.\n   */\n  sidebarFooter?: ReactNode;\n  /** Prop > `<UiKitProvider labels={{ settings }}>` > English. */\n  labels?: LabelOverride<SettingsLabels>;\n  /** See {@link SettingsLayoutMode}. Default `\"auto\"`: the screen decides. */\n  layout?: SettingsLayoutMode;\n  /**\n   * The app's name, the last part of the window's title: \"Security · Settings ·\n   * Kastlan\" (§3.1). Left out, the title ends at the page: \"Security · Settings\".\n   */\n  appName?: string;\n  /**\n   * The window's title (`document.title`, §3.1) — round 0.34 C8, KS U7. By default the\n   * layout writes \"<group> · <page> · <appName>\" while a group is open and\n   * \"<page> · <appName>\" on the phone's list, and puts back the title it found when it\n   * unmounts. `<page>` is `title` when that is a string, else `labels.title`.\n   *\n   * A function writes another order or another separator from the same parts; `false`\n   * leaves `document.title` to the app. Kastlan's `SettingsChrome` and Kurvenschmiede's\n   * `GroupTitle` were this effect written by hand, and Kurvenschmiede's admin page, on\n   * the same layout, had none — every admin section was titled \"Kurvenschmiede\".\n   */\n  documentTitle?: false | ((parts: SettingsDocumentTitleParts) => string);\n  className?: string;\n}\n\n/** What {@link SettingsLayoutProps.documentTitle} is given to write the window's title. */\nexport interface SettingsDocumentTitleParts {\n  /** The open group's name, or `null` on the phone's list of groups. */\n  group: string | null;\n  /** The page: `title` when it is a string, else `labels.title` (\"Settings\"). */\n  page: string;\n  /** The `appName` prop, or `undefined`. */\n  appName: string | undefined;\n}\n\n/** \"Security · Settings · Kastlan\" (§3.1); a part that is missing is left out. */\nfunction defaultDocumentTitle({ group, page, appName }: SettingsDocumentTitleParts): string {\n  return [group, page, appName].filter((part): part is string => Boolean(part)).join(\" · \");\n}\n\ninterface Searchable<G extends string> extends SearchEntry {\n  anchor: string;\n  settingsGroup: G;\n}\n\n/**\n * The settings page (docs/settings-harmonization.md §3), and the admin page built the\n * same way (§5). keksdose's page is the reference for the desktop; the phone pattern and\n * the path segments are new for all three apps.\n *\n * **Desktop** (§3.2): the page's `PageHeader`, the search field, then a 14rem sidebar —\n * the kit's vertical `Tabs`, a link per group, sticky so a long group keeps the list in\n * view — beside the open group: its heading (`h2`), its help line and its cards in ONE\n * column, never a masonry (keksdose dev#490/#493).\n *\n * **Phone** (§3.3, below `md`): a drill-down. `/settings` is a list of the groups (icon,\n * name, help line, chevron) with `phoneFooter` under it; a group is a page of its own with\n * a back link, its name as the `h1` and the cards under it. It replaces keksdose's chip\n * strip.\n *\n * **Routes, history and `?focus=`** are {@link useSettingsRoute}'s and\n * {@link useSettingsFocus}'s. **Search** (§3.4) runs the kit's matcher over the catalogue:\n * accents folded, ranked, over the title, the group's name and the keywords. On a desktop\n * the sidebar dims the groups without hits and counts the others' while the hits replace\n * the group; on a phone they replace the list. A hit is a link to its card.\n *\n * The cards inside read {@link useSettingsLayout} for `selectSub`, and their titles are\n * headings under the group's ({@link SettingsHeadingLevel}).\n */\nexport function SettingsLayout<G extends string>({\n  title,\n  groups,\n  entries,\n  basePath,\n  defaultGroup,\n  aliases,\n  search,\n  width = \"6xl\",\n  renderGroup,\n  phoneFooter,\n  sidebarFooter,\n  labels: labelsProp,\n  layout = \"auto\",\n  appName,\n  documentTitle,\n  className,\n}: SettingsLayoutProps<G>): ReactElement {\n  const labels = useKitLabels(\"settings\", DEFAULT_SETTINGS_LABELS, labelsProp);\n  const base = normalizeSettingsBase(basePath);\n  const route = useSettingsRoute({ groups, entries, basePath: base, defaultGroup, aliases, layout });\n  const location = useLocation();\n  // The browser URL of an app path, for the sidebar's real links (a middle click opens a\n  // tab): `#/settings/…` under a hash router, the basename in front under a browser one.\n  const root = useHref(\"/\").replace(/\\/$/, \"\");\n  const panelId = useId();\n  const searchRef = useRef<HTMLInputElement>(null);\n  const [query, setQuery] = useState(\"\");\n\n  const visibleEntries = useMemo(() => visibleSettingsEntries(groups, entries), [groups, entries]);\n  const showSearch = search ?? visibleEntries.length > SETTINGS_SEARCH_THRESHOLD;\n  const trimmed = query.trim();\n  const searching = showSearch && trimmed !== \"\";\n\n  const groupById = useMemo(() => new Map(route.groups.map((g) => [g.id, g])), [route.groups]);\n  const index = useMemo(\n    () =>\n      createSearchIndex<Searchable<G>>(\n        visibleEntries.map((e) => ({\n          id: e.id,\n          title: e.title,\n          keywords: [groupById.get(e.group)?.title ?? e.group, ...settingsKeywords(e.keywords)],\n          group: e.group,\n          anchor: e.anchor,\n          settingsGroup: e.group,\n        })),\n        // Every hit: the list is the page's whole answer, not a palette's top few.\n        { groupLimit: Infinity },\n      ),\n    [visibleEntries, groupById],\n  );\n  const hits = useMemo(() => (searching ? index.search(trimmed).map((h) => h.entry) : []), [searching, index, trimmed]);\n  const hitsByGroup = useMemo(() => {\n    const counts = new Map<G, number>();\n    for (const hit of hits) counts.set(hit.settingsGroup, (counts.get(hit.settingsGroup) ?? 0) + 1);\n    return counts;\n  }, [hits]);\n\n  const anchors = useMemo(() => new Set(entries.map((e) => e.anchor)), [entries]);\n  const { phone, group, sub, selectSub, select } = route;\n  const headingLevel = phone ? \"h2\" : \"h3\";\n  const context = useMemo<SettingsLayoutContextValue>(\n    () => ({\n      basePath: base,\n      group,\n      sub,\n      selectSub,\n      headingLevel,\n      hasAnchor: (anchor) => anchors.has(anchor),\n    }),\n    [base, group, sub, selectSub, headingLevel, anchors],\n  );\n\n  // Not while the address is about to be replaced (its removal of `focus` would undo the\n  // replace), not on the list, and not while the hits stand where the cards would be (a\n  // phone's group page has no search: a query left from its list does not count there).\n  const hitsShown = searching && (!phone || group === null);\n  useSettingsFocus(route.redirecting || group === null || hitsShown ? null : route.focus);\n\n  // A link inside the page. On a phone it opens a page of its own — a push that marks the\n  // list as the entry before it, so the group page's back is a real back. On a desktop\n  // it switches the group in place — a replace.\n  const { state } = location;\n  const renderLink = useCallback(\n    ({ href, ...props }: ListItemLinkProps) => (\n      <Link to={href} replace={!phone} state={phone ? settingsFromListState() : state} {...props} />\n    ),\n    [phone, state],\n  );\n\n  const clearSearch = () => {\n    setQuery(\"\");\n    // The button that was pressed goes with the empty state; the field is where the\n    // next query is typed.\n    searchRef.current?.focus();\n  };\n\n  const pageTitle = title ?? labels.title;\n\n  // The window's title (§3.1). Computed to a string during render so the effect below\n  // runs when the words change, not whenever an inline `documentTitle` function is new.\n  // Each run puts back the title it found before writing its own, so a group switch\n  // ends where it began and the unmount leaves the title the page had before settings.\n  const windowTitle =\n    documentTitle === false\n      ? null\n      : (documentTitle ?? defaultDocumentTitle)({\n          group: group === null ? null : (groupById.get(group)?.title ?? null),\n          page: typeof title === \"string\" ? title : labels.title,\n          appName,\n        });\n  useEffect(() => {\n    if (windowTitle === null) return;\n    const before = document.title;\n    document.title = windowTitle;\n    return () => {\n      document.title = before;\n    };\n  }, [windowTitle]);\n\n  const pageClass = cn(\"mx-auto w-full space-y-4 p-4 md:p-6\", width === \"7xl\" ? \"max-w-7xl\" : \"max-w-6xl\", className);\n\n  const searchField = showSearch ? (\n    <SearchField\n      ref={searchRef}\n      className=\"max-w-md\"\n      value={query}\n      onChange={setQuery}\n      aria-label={labels.search}\n      placeholder={labels.searchPlaceholder}\n    />\n  ) : null;\n\n  const results =\n    hits.length === 0 ? (\n      <EmptyState\n        title={labels.noMatches(trimmed)}\n        action={\n          <Button variant=\"secondary\" size=\"sm\" onClick={clearSearch}>\n            {labels.clearSearch}\n          </Button>\n        }\n      />\n    ) : (\n      <Card className=\"p-1\">\n        <List separator=\"divider\" density=\"comfortable\" aria-label={labels.results}>\n          {hits.map((hit) => (\n            <ListItem\n              key={hit.id}\n              title={hit.title}\n              trailing={groupById.get(hit.settingsGroup)?.title}\n              href={settingsHref(base, hit.settingsGroup, hit.anchor)}\n              renderLink={renderLink}\n              // Leave search on the way: the hit's card is what the user asked for.\n              onClick={() => setQuery(\"\")}\n            />\n          ))}\n        </List>\n      </Card>\n    );\n\n  const cards = (open: G) => (\n    <SettingsHeadingLevel level={headingLevel}>\n      <div className=\"space-y-4\">{renderGroup(open, sub)}</div>\n    </SettingsHeadingLevel>\n  );\n\n  let body: ReactNode;\n  if (phone) {\n    const open = group === null ? undefined : groupById.get(group);\n    body = open ? (\n      <div className={pageClass} data-settings-view=\"group\">\n        <PageHeader\n          size=\"compact\"\n          title={open.title}\n          description={open.help}\n          breadcrumbs={\n            <Link\n              to={base || \"/\"}\n              aria-label={labels.back}\n              onClick={(e) => {\n                // A real link for a middle click; a plain click is the page's own back,\n                // which is `navigate(-1)` when the list is the entry before this one.\n                if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;\n                e.preventDefault();\n                route.back();\n              }}\n              className={cn(\"-ms-1 inline-flex items-center gap-0.5 self-start rounded-md pe-1 text-sm font-medium text-muted hover:text-primary\", FOCUS_RING)}\n            >\n              <ChevronLeft aria-hidden className=\"size-4 rtl:-scale-x-100\" />\n              {pageTitle}\n            </Link>\n          }\n        />\n        {cards(open.id)}\n      </div>\n    ) : (\n      <div className={pageClass} data-settings-view=\"list\">\n        <PageHeader size=\"compact\" title={pageTitle} />\n        {searchField}\n        {searching ? (\n          results\n        ) : (\n          <Card className=\"p-1\">\n            <List separator=\"divider\" density=\"comfortable\" aria-label={labels.sections}>\n              {route.groups.map((g) => (\n                <ListItem\n                  key={g.id}\n                  href={settingsHref(base, g.id)}\n                  renderLink={renderLink}\n                  leading={\n                    <span\n                      aria-hidden\n                      className=\"flex size-8 shrink-0 items-center justify-center rounded-md bg-surface-2 text-secondary [&_svg]:size-4\"\n                    >\n                      {g.icon}\n                    </span>\n                  }\n                  title={g.title}\n                  subtitle={g.help}\n                  trailing={\n                    g.badge == null ? (\n                      <ChevronRight aria-hidden className=\"size-4 rtl:-scale-x-100\" />\n                    ) : (\n                      // The group's badge (0.48) before the chevron, the two as one end.\n                      <span className=\"flex items-center gap-2\">\n                        {g.badge}\n                        <ChevronRight aria-hidden className=\"size-4 rtl:-scale-x-100\" />\n                      </span>\n                    )\n                  }\n                />\n              ))}\n            </List>\n          </Card>\n        )}\n        {!searching && phoneFooter != null && (\n          <Card className=\"p-1\">\n            <List separator=\"divider\" density=\"comfortable\">\n              {phoneFooter}\n            </List>\n          </Card>\n        )}\n      </div>\n    );\n  } else {\n    const open = group === null ? undefined : groupById.get(group);\n    // The section list alone, or (0.42) with the app's `sidebarFooter` under it in one\n    // sticky column.\n    const withSidebarFooter = (tabs: ReactNode) =>\n      sidebarFooter == null ? (\n        tabs\n      ) : (\n        <div className={cn(SIDEBAR_COLUMN, \"space-y-6\")}>\n          {tabs}\n          <div data-slot=\"settings-sidebar-footer\">{sidebarFooter}</div>\n        </div>\n      );\n    body = (\n      <div className={pageClass} data-settings-view=\"desktop\">\n        <PageHeader size=\"compact\" title={pageTitle} />\n        {searchField}\n        <div className=\"md:grid md:grid-cols-[14rem_minmax(0,1fr)] md:gap-6\">\n          {withSidebarFooter(\n            <Tabs<G>\n              orientation=\"vertical\"\n              aria-label={labels.sections}\n              // Sticky (new in the harmonisation, §3.2): keksdose's notifications group\n              // scrolls for screens, and the list should stay in view beside it. With a\n              // `sidebarFooter` the column round both is the sticky one.\n              className={sidebarFooter == null ? SIDEBAR_COLUMN : undefined}\n              panelId={open && !searching ? panelId : undefined}\n              tabs={route.groups.map((g) => {\n                const count = hitsByGroup.get(g.id) ?? 0;\n                // While searching, the groups with nothing to show step back (keksdose).\n                const dim = searching && count === 0;\n                return {\n                  id: g.id,\n                  href: `${root}${settingsHref(base, g.id)}`,\n                  name: g.title,\n                  label: <span className={cn(dim && \"opacity-40\")}>{g.title}</span>,\n                  icon: <span className={cn(\"inline-flex [&_svg]:size-4\", dim && \"opacity-40\")}>{g.icon}</span>,\n                  // While searching, the hit count; otherwise the group's own badge (0.48).\n                  badge: searching ? (\n                    count > 0 ? (\n                      <Chip size=\"sm\" tone=\"brand\">\n                        <span aria-hidden>{count}</span>\n                        <span className=\"sr-only-fixed\">{labels.matchCount(count)}</span>\n                      </Chip>\n                    ) : undefined\n                  ) : (\n                    g.badge\n                  ),\n                };\n              })}\n              active={(open?.id ?? route.groups[0]?.id) as G}\n              onChange={(id) => {\n                // While searching the hits stand where the group would; a click on a group\n                // means \"go there\", so the search makes way (keksdose).\n                setQuery(\"\");\n                select(id);\n              }}\n            />,\n          )}\n          <div className=\"min-w-0 space-y-4\">\n            {searching ? (\n              results\n            ) : open ? (\n              <div\n                id={panelId}\n                role=\"tabpanel\"\n                aria-labelledby={`${panelId}-tab`}\n                className=\"space-y-4\"\n              >\n                <PageHeader as=\"h2\" size=\"sm\" title={open.title} description={open.help} />\n                {cards(open.id)}\n              </div>\n            ) : null}\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  return <SettingsLayoutContext.Provider value={context}>{body}</SettingsLayoutContext.Provider>;\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/settings/settings-layout.tsx"],"sourcesContent":["import { useCallback, useEffect, useId, useMemo, useRef, useState } from \"react\";\nimport type { ReactElement, ReactNode } from \"react\";\nimport { Link, useHref, useLocation } from \"react-router\";\nimport { ChevronLeft, ChevronRight } from \"lucide-react\";\nimport { Button } from \"../components/button\";\nimport { Card } from \"../components/card\";\nimport { EmptyState } from \"../components/empty-state\";\nimport { Tabs } from \"../components/tabs\";\nimport { FOCUS_RING } from \"../components/focus-ring\";\nimport { Chip } from \"../components/chip\";\nimport { List, ListItem } from \"../components/list\";\nimport type { ListItemLinkProps } from \"../components/list\";\nimport { PageHeader } from \"../components/page-header\";\nimport { SearchField } from \"../components/search-field\";\nimport { cn } from \"../lib/cn\";\nimport { useKitLabels, type LabelOverride } from \"../i18n/kit-labels\";\nimport { createSearchIndex } from \"../search/search-index\";\nimport type { SearchEntry } from \"../search/search-index\";\nimport {\n  normalizeSettingsBase,\n  settingsHref,\n  settingsKeywords,\n  visibleSettingsEntries,\n} from \"./settings-catalogue\";\nimport type { SettingsEntry, SettingsGroup } from \"./settings-catalogue\";\nimport { SettingsLayoutContext } from \"./settings-context\";\nimport type { SettingsLayoutContextValue } from \"./settings-context\";\nimport { SettingsHeadingLevel } from \"./settings-heading\";\nimport { DEFAULT_SETTINGS_LABELS } from \"./settings-labels\";\nimport type { SettingsLabels } from \"./settings-labels\";\nimport { settingsFromListState, useSettingsRoute } from \"./use-settings-route\";\nimport type { SettingsLayoutMode } from \"./use-settings-route\";\nimport { useSettingsFocus } from \"./use-settings-focus\";\n\n/** The page's width cap (§3.2): `6xl` for settings, `7xl` for keksdose's admin, whose\n *  user table scrolled sideways at 6xl (dev#488). */\nexport type SettingsLayoutWidth = \"6xl\" | \"7xl\";\n\n/** More entries than this and the search field shows by itself (§3.4): Kurvenschmiede has\n *  about twelve, keksdose 26; a page of six needs none. */\nexport const SETTINGS_SEARCH_THRESHOLD = 8;\n\n/** The desktop sidebar's column: sticky beside a long group (§3.2). */\nconst SIDEBAR_COLUMN = \"mb-4 md:sticky md:top-6 md:mb-0 md:self-start\";\n\nexport interface SettingsLayoutProps<G extends string> {\n  /** The page's `h1`: \"Settings\", \"Administration\". Default: `labels.title`. */\n  title?: ReactNode;\n  /** The groups, in order (§4.2). */\n  groups: readonly SettingsGroup<G>[];\n  /** One entry per setting (§4.1). Hidden entries leave search; a group left without a\n   *  visible one is hidden. */\n  entries: readonly SettingsEntry<G>[];\n  /** `/settings` or `/admin`. The layout owns every path below it. */\n  basePath: string;\n  /** The group `/settings` opens on a desktop. Default: the first visible one. */\n  defaultGroup?: G;\n  /** Retired group ids and their successors, replaced in the address (§3.1). */\n  aliases?: Readonly<Partial<Record<string, G>>>;\n  /**\n   * The search field. Left out, it shows once more than {@link SETTINGS_SEARCH_THRESHOLD}\n   * entries are visible; `true` or `false` wins over the count — keksdose's admin keeps\n   * none (§3.4, §10.3). ⌘K gets the entries either way ({@link settingsSearchEntries}).\n   */\n  search?: boolean;\n  /** See {@link SettingsLayoutWidth}. Default `\"6xl\"`. */\n  width?: SettingsLayoutWidth;\n  /** The group's cards, in one column. `sub` is the path segment after the group, which\n   *  a card owns (`useSettingsLayout().selectSub`). */\n  renderGroup: (group: G, sub: string | null) => ReactNode;\n  /**\n   * Rows under the phone's group list that LEAVE settings — kastlan's \"Administration\",\n   * its import page (§3.3, §5). `ListItem`s with an `href`; the layout puts them in a list\n   * of their own, so they never read as a group. Not shown on a desktop, where the app's\n   * own navigation carries them.\n   */\n  phoneFooter?: ReactNode;\n  /**\n   * 0.42.0 (docs/admin-harmonization.md §2.5 decision 16): content under the section\n   * list on a desktop, in the same sticky column — the admin area's Tools list\n   * (`AdminToolLinks`). Not shown on a phone, where `phoneFooter` carries the same links.\n   */\n  sidebarFooter?: ReactNode;\n  /** Prop > `<UiKitProvider labels={{ settings }}>` > English. */\n  labels?: LabelOverride<SettingsLabels>;\n  /** See {@link SettingsLayoutMode}. Default `\"auto\"`: the screen decides. */\n  layout?: SettingsLayoutMode;\n  /**\n   * The app's name, the last part of the window's title: \"Security · Settings ·\n   * Kastlan\" (§3.1). Left out, the title ends at the page: \"Security · Settings\".\n   */\n  appName?: string;\n  /**\n   * The window's title (`document.title`, §3.1) — round 0.34 C8, KS U7. By default the\n   * layout writes \"<group> · <page> · <appName>\" while a group is open and\n   * \"<page> · <appName>\" on the phone's list, and puts back the title it found when it\n   * unmounts. `<page>` is `title` when that is a string, else `labels.title`.\n   *\n   * A function writes another order or another separator from the same parts; `false`\n   * leaves `document.title` to the app. Kastlan's `SettingsChrome` and Kurvenschmiede's\n   * `GroupTitle` were this effect written by hand, and Kurvenschmiede's admin page, on\n   * the same layout, had none — every admin section was titled \"Kurvenschmiede\".\n   */\n  documentTitle?: false | ((parts: SettingsDocumentTitleParts) => string);\n  className?: string;\n}\n\n/** What {@link SettingsLayoutProps.documentTitle} is given to write the window's title. */\nexport interface SettingsDocumentTitleParts {\n  /** The open group's name, or `null` on the phone's list of groups. */\n  group: string | null;\n  /** The page: `title` when it is a string, else `labels.title` (\"Settings\"). */\n  page: string;\n  /** The `appName` prop, or `undefined`. */\n  appName: string | undefined;\n}\n\n/** \"Security · Settings · Kastlan\" (§3.1); a part that is missing is left out. */\nfunction defaultDocumentTitle({ group, page, appName }: SettingsDocumentTitleParts): string {\n  return [group, page, appName].filter((part): part is string => Boolean(part)).join(\" · \");\n}\n\ninterface Searchable<G extends string> extends SearchEntry {\n  anchor: string;\n  settingsGroup: G;\n}\n\n/**\n * The settings page (docs/settings-harmonization.md §3), and the admin page built the\n * same way (§5). keksdose's page is the reference for the desktop; the phone pattern and\n * the path segments are new for all three apps.\n *\n * **Desktop** (§3.2): the page's `PageHeader`, the search field, then a 14rem sidebar —\n * the kit's vertical `Tabs`, a link per group, sticky so a long group keeps the list in\n * view — beside the open group: its heading (`h2`), its help line and its cards in ONE\n * column, never a masonry (keksdose dev#490/#493).\n *\n * **Phone** (§3.3, below `md`): a drill-down. `/settings` is a list of the groups (icon,\n * name, help line, chevron) with `phoneFooter` under it; a group is a page of its own with\n * a back link, its name as the `h1` and the cards under it. It replaces keksdose's chip\n * strip.\n *\n * **Routes, history and `?focus=`** are {@link useSettingsRoute}'s and\n * {@link useSettingsFocus}'s. **Search** (§3.4) runs the kit's matcher over the catalogue:\n * accents folded, ranked, over the title, the group's name and the keywords. On a desktop\n * the sidebar dims the groups without hits and counts the others' while the hits replace\n * the group; on a phone they replace the list. A hit is a link to its card.\n *\n * The cards inside read {@link useSettingsLayout} for `selectSub`, and their titles are\n * headings under the group's ({@link SettingsHeadingLevel}).\n */\nexport function SettingsLayout<G extends string>({\n  title,\n  groups,\n  entries,\n  basePath,\n  defaultGroup,\n  aliases,\n  search,\n  width = \"6xl\",\n  renderGroup,\n  phoneFooter,\n  sidebarFooter,\n  labels: labelsProp,\n  layout = \"auto\",\n  appName,\n  documentTitle,\n  className,\n}: SettingsLayoutProps<G>): ReactElement {\n  const labels = useKitLabels(\"settings\", DEFAULT_SETTINGS_LABELS, labelsProp);\n  const base = normalizeSettingsBase(basePath);\n  const route = useSettingsRoute({ groups, entries, basePath: base, defaultGroup, aliases, layout });\n  const location = useLocation();\n  // The browser URL of an app path, for the sidebar's real links (a middle click opens a\n  // tab): `#/settings/…` under a hash router, the basename in front under a browser one.\n  const root = useHref(\"/\").replace(/\\/$/, \"\");\n  const panelId = useId();\n  const searchRef = useRef<HTMLInputElement>(null);\n  const [query, setQuery] = useState(\"\");\n\n  const visibleEntries = useMemo(() => visibleSettingsEntries(groups, entries), [groups, entries]);\n  const showSearch = search ?? visibleEntries.length > SETTINGS_SEARCH_THRESHOLD;\n  const trimmed = query.trim();\n  const searching = showSearch && trimmed !== \"\";\n\n  const groupById = useMemo(() => new Map(route.groups.map((g) => [g.id, g])), [route.groups]);\n  const index = useMemo(\n    () =>\n      createSearchIndex<Searchable<G>>(\n        visibleEntries.map((e) => ({\n          id: e.id,\n          title: e.title,\n          keywords: [groupById.get(e.group)?.title ?? e.group, ...settingsKeywords(e.keywords)],\n          group: e.group,\n          anchor: e.anchor,\n          settingsGroup: e.group,\n        })),\n        // Every hit: the list is the page's whole answer, not a palette's top few.\n        { groupLimit: Infinity },\n      ),\n    [visibleEntries, groupById],\n  );\n  const hits = useMemo(() => (searching ? index.search(trimmed).map((h) => h.entry) : []), [searching, index, trimmed]);\n  const hitsByGroup = useMemo(() => {\n    const counts = new Map<G, number>();\n    for (const hit of hits) counts.set(hit.settingsGroup, (counts.get(hit.settingsGroup) ?? 0) + 1);\n    return counts;\n  }, [hits]);\n\n  const anchors = useMemo(() => new Set(entries.map((e) => e.anchor)), [entries]);\n  const { phone, group, sub, selectSub, select } = route;\n  const headingLevel = phone ? \"h2\" : \"h3\";\n  const context = useMemo<SettingsLayoutContextValue>(\n    () => ({\n      basePath: base,\n      group,\n      sub,\n      selectSub,\n      headingLevel,\n      hasAnchor: (anchor) => anchors.has(anchor),\n    }),\n    [base, group, sub, selectSub, headingLevel, anchors],\n  );\n\n  // Not while the address is about to be replaced (its removal of `focus` would undo the\n  // replace), not on the list, and not while the hits stand where the cards would be (a\n  // phone's group page has no search: a query left from its list does not count there).\n  const hitsShown = searching && (!phone || group === null);\n  useSettingsFocus(route.redirecting || group === null || hitsShown ? null : route.focus);\n\n  // A link inside the page. On a phone it opens a page of its own — a push that marks the\n  // list as the entry before it, so the group page's back is a real back. On a desktop\n  // it switches the group in place — a replace.\n  const { state } = location;\n  const renderLink = useCallback(\n    ({ href, ...props }: ListItemLinkProps) => (\n      <Link to={href} replace={!phone} state={phone ? settingsFromListState() : state} {...props} />\n    ),\n    [phone, state],\n  );\n\n  const clearSearch = () => {\n    setQuery(\"\");\n    // The button that was pressed goes with the empty state; the field is where the\n    // next query is typed.\n    searchRef.current?.focus();\n  };\n\n  const pageTitle = title ?? labels.title;\n\n  // The window's title (§3.1). Computed to a string during render so the effect below\n  // runs when the words change, not whenever an inline `documentTitle` function is new.\n  // Each run puts back the title it found before writing its own, so a group switch\n  // ends where it began and the unmount leaves the title the page had before settings.\n  const windowTitle =\n    documentTitle === false\n      ? null\n      : (documentTitle ?? defaultDocumentTitle)({\n          group: group === null ? null : (groupById.get(group)?.title ?? null),\n          page: typeof title === \"string\" ? title : labels.title,\n          appName,\n        });\n  useEffect(() => {\n    if (windowTitle === null) return;\n    const before = document.title;\n    document.title = windowTitle;\n    return () => {\n      document.title = before;\n    };\n  }, [windowTitle]);\n\n  const pageClass = cn(\"mx-auto w-full space-y-4 p-4 md:p-6\", width === \"7xl\" ? \"max-w-7xl\" : \"max-w-6xl\", className);\n\n  const searchField = showSearch ? (\n    <SearchField\n      ref={searchRef}\n      className=\"max-w-md\"\n      value={query}\n      onChange={setQuery}\n      aria-label={labels.search}\n      placeholder={labels.searchPlaceholder}\n    />\n  ) : null;\n\n  const results =\n    hits.length === 0 ? (\n      <EmptyState\n        title={labels.noMatches(trimmed)}\n        action={\n          <Button variant=\"secondary\" size=\"sm\" onClick={clearSearch}>\n            {labels.clearSearch}\n          </Button>\n        }\n      />\n    ) : (\n      <Card className=\"p-1\">\n        <List separator=\"divider\" density=\"comfortable\" aria-label={labels.results}>\n          {hits.map((hit) => (\n            <ListItem\n              key={hit.id}\n              title={hit.title}\n              trailing={groupById.get(hit.settingsGroup)?.title}\n              href={settingsHref(base, hit.settingsGroup, hit.anchor)}\n              renderLink={renderLink}\n              // Leave search on the way: the hit's card is what the user asked for.\n              onClick={() => setQuery(\"\")}\n            />\n          ))}\n        </List>\n      </Card>\n    );\n\n  const cards = (open: G) => (\n    <SettingsHeadingLevel level={headingLevel}>\n      <div className=\"space-y-4\">{renderGroup(open, sub)}</div>\n    </SettingsHeadingLevel>\n  );\n\n  let body: ReactNode;\n  if (phone) {\n    const open = group === null ? undefined : groupById.get(group);\n    body = open ? (\n      <div className={pageClass} data-settings-view=\"group\">\n        <PageHeader\n          size=\"compact\"\n          documentTitle={false}\n          title={open.title}\n          description={open.help}\n          breadcrumbs={\n            <Link\n              to={base || \"/\"}\n              aria-label={labels.back}\n              onClick={(e) => {\n                // A real link for a middle click; a plain click is the page's own back,\n                // which is `navigate(-1)` when the list is the entry before this one.\n                if (e.button !== 0 || e.metaKey || e.ctrlKey || e.shiftKey || e.altKey) return;\n                e.preventDefault();\n                route.back();\n              }}\n              className={cn(\"-ms-1 inline-flex items-center gap-0.5 self-start rounded-md pe-1 text-sm font-medium text-muted hover:text-primary\", FOCUS_RING)}\n            >\n              <ChevronLeft aria-hidden className=\"size-4 rtl:-scale-x-100\" />\n              {pageTitle}\n            </Link>\n          }\n        />\n        {cards(open.id)}\n      </div>\n    ) : (\n      <div className={pageClass} data-settings-view=\"list\">\n        <PageHeader size=\"compact\" documentTitle={false} title={pageTitle} />\n        {searchField}\n        {searching ? (\n          results\n        ) : (\n          <Card className=\"p-1\">\n            <List separator=\"divider\" density=\"comfortable\" aria-label={labels.sections}>\n              {route.groups.map((g) => (\n                <ListItem\n                  key={g.id}\n                  href={settingsHref(base, g.id)}\n                  renderLink={renderLink}\n                  leading={\n                    <span\n                      aria-hidden\n                      className=\"flex size-8 shrink-0 items-center justify-center rounded-md bg-surface-2 text-secondary [&_svg]:size-4\"\n                    >\n                      {g.icon}\n                    </span>\n                  }\n                  title={g.title}\n                  subtitle={g.help}\n                  trailing={\n                    g.badge == null ? (\n                      <ChevronRight aria-hidden className=\"size-4 rtl:-scale-x-100\" />\n                    ) : (\n                      // The group's badge (0.48) before the chevron, the two as one end.\n                      <span className=\"flex items-center gap-2\">\n                        {g.badge}\n                        <ChevronRight aria-hidden className=\"size-4 rtl:-scale-x-100\" />\n                      </span>\n                    )\n                  }\n                />\n              ))}\n            </List>\n          </Card>\n        )}\n        {!searching && phoneFooter != null && (\n          <Card className=\"p-1\">\n            <List separator=\"divider\" density=\"comfortable\">\n              {phoneFooter}\n            </List>\n          </Card>\n        )}\n      </div>\n    );\n  } else {\n    const open = group === null ? undefined : groupById.get(group);\n    // The section list alone, or (0.42) with the app's `sidebarFooter` under it in one\n    // sticky column.\n    const withSidebarFooter = (tabs: ReactNode) =>\n      sidebarFooter == null ? (\n        tabs\n      ) : (\n        <div className={cn(SIDEBAR_COLUMN, \"space-y-6\")}>\n          {tabs}\n          <div data-slot=\"settings-sidebar-footer\">{sidebarFooter}</div>\n        </div>\n      );\n    body = (\n      <div className={pageClass} data-settings-view=\"desktop\">\n        <PageHeader size=\"compact\" documentTitle={false} title={pageTitle} />\n        {searchField}\n        <div className=\"md:grid md:grid-cols-[14rem_minmax(0,1fr)] md:gap-6\">\n          {withSidebarFooter(\n            <Tabs<G>\n              orientation=\"vertical\"\n              aria-label={labels.sections}\n              // Sticky (new in the harmonisation, §3.2): keksdose's notifications group\n              // scrolls for screens, and the list should stay in view beside it. With a\n              // `sidebarFooter` the column round both is the sticky one.\n              className={sidebarFooter == null ? SIDEBAR_COLUMN : undefined}\n              panelId={open && !searching ? panelId : undefined}\n              tabs={route.groups.map((g) => {\n                const count = hitsByGroup.get(g.id) ?? 0;\n                // While searching, the groups with nothing to show step back (keksdose).\n                const dim = searching && count === 0;\n                return {\n                  id: g.id,\n                  href: `${root}${settingsHref(base, g.id)}`,\n                  name: g.title,\n                  label: <span className={cn(dim && \"opacity-40\")}>{g.title}</span>,\n                  icon: <span className={cn(\"inline-flex [&_svg]:size-4\", dim && \"opacity-40\")}>{g.icon}</span>,\n                  // While searching, the hit count; otherwise the group's own badge (0.48).\n                  badge: searching ? (\n                    count > 0 ? (\n                      <Chip size=\"sm\" tone=\"brand\">\n                        <span aria-hidden>{count}</span>\n                        <span className=\"sr-only-fixed\">{labels.matchCount(count)}</span>\n                      </Chip>\n                    ) : undefined\n                  ) : (\n                    g.badge\n                  ),\n                };\n              })}\n              active={(open?.id ?? route.groups[0]?.id) as G}\n              onChange={(id) => {\n                // While searching the hits stand where the group would; a click on a group\n                // means \"go there\", so the search makes way (keksdose).\n                setQuery(\"\");\n                select(id);\n              }}\n            />,\n          )}\n          <div className=\"min-w-0 space-y-4\">\n            {searching ? (\n              results\n            ) : open ? (\n              <div\n                id={panelId}\n                role=\"tabpanel\"\n                aria-labelledby={`${panelId}-tab`}\n                className=\"space-y-4\"\n              >\n                <PageHeader as=\"h2\" size=\"sm\" title={open.title} description={open.help} />\n                {cards(open.id)}\n              </div>\n            ) : null}\n          </div>\n        </div>\n      </div>\n    );\n  }\n\n  return <SettingsLayoutContext.Provider value={context}>{body}</SettingsLayoutContext.Provider>;\n}\n"],"mappings":"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","names":[]}

package/dist/shell/account-menu-language.d.ts

@@ -35,7 +35,7 @@ export interface AccountMenuLanguageProps {
 /**
  * The language choice INSIDE the account menu (docs/top-bar-harmonization.md §2.3),
  * keksdose's sub-list: a `Disclosure variant="menu"` row — the globe, "Language", the
- * active language's flag and the chevron — that opens in place onto one checked
+ * active language's flag and code ("DE") and the chevron — that opens in place onto one checked
  * `MenuItem` per language. Inline rather than a nested popover: a popover inside a
  * popover fights the outside click and has nowhere to go on a phone (keksdose #140).
  *

package/dist/shell/account-menu-language.js

@@ -5,6 +5,7 @@ import { Globe } from "lucide-react";
 import { Disclosure } from "../components/disclosure.js";
 import { MenuItem } from "../components/menu-item.js";
 import { DEFAULT_TOP_BAR_LABELS, useKitLabels } from "../i18n/kit-labels.js";
+import { languageCodeLabel } from "./language-code.js";
 function flagOf(lang) {
   if (lang.flag !== void 0) return lang.flag;
   if (!lang.country) return void 0;
@@ -39,7 +40,14 @@ function AccountMenuLanguage({
           /* @__PURE__ */ jsx(Globe, { "aria-hidden": true, className: "size-4" }),
           label ?? words.language
         ] }),
-        active && flagOf(active)
+        active && // The flag alone could not tell de-CH, fr-CH and it-CH apart (one Swiss
+        // flag each), so the code sits beside it (0.49 KIT-10); the row's name
+        // carries the language's own name.
+        /* @__PURE__ */ jsxs("span", { className: "flex items-center gap-1.5", children: [
+          flagOf(active),
+          /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: "text-xs font-semibold tabular-nums tracking-wide text-secondary", children: languageCodeLabel(active.code) }),
+          /* @__PURE__ */ jsx("span", { className: "sr-only", children: active.label })
+        ] })
       ] }),
       children: /* @__PURE__ */ jsx("ul", { children: languages.map((lang) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(
         MenuItem,

package/dist/shell/account-menu-language.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/shell/account-menu-language.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { Globe } from \"lucide-react\";\nimport { Disclosure } from \"../components/disclosure\";\nimport { MenuItem } from \"../components/menu-item\";\nimport { DEFAULT_TOP_BAR_LABELS, useKitLabels } from \"../i18n/kit-labels\";\n\n/** One offered language in the account menu's sub-list. */\nexport interface AccountMenuLanguageOption {\n  code: string;\n  /** Its name, in its own language (\"Deutsch\", \"Français\"). */\n  label: ReactNode;\n  /**\n   * A flag before the name, as the app draws it — keksdose's flag-icons span\n   * (`<span aria-hidden className=\"fi fi-ch …\" />`). A node rather than a country code, so\n   * the kit ships no flag set; decorative, so give it `aria-hidden`.\n   */\n  flag?: ReactNode;\n  /**\n   * Or the ISO 3166-1 alpha-2 country (lowercase) whose flag-icons flag to draw, as\n   * `LanguageMenu`'s `LanguageOption` takes it — so one language list feeds both\n   * (Kurvenschmiede's `LANGUAGES`). Needs the app's flag-icons CSS, as `LanguageMenu`\n   * does. `flag` wins when both are given.\n   */\n  country?: string;\n}\n\n/** The option's flag: its own node, else the flag-icons flag of its country. */\nfunction flagOf(lang: AccountMenuLanguageOption): ReactNode {\n  if (lang.flag !== undefined) return lang.flag;\n  if (!lang.country) return undefined;\n  return (\n    <span\n      aria-hidden\n      data-country={lang.country}\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  );\n}\n\nexport interface AccountMenuLanguageProps {\n  languages: readonly AccountMenuLanguageOption[];\n  /** The active language's code. */\n  value: string | undefined;\n  /** A pick: the app sets the device's language and, signed in, the account's\n   *  (settings §6.2). */\n  onPick: (code: string) => void;\n  /** The account menu's `close` (from `TopBarActionMenu`'s `children`): a pick shuts it. */\n  close?: () => void;\n  /** The row's name. Default: `topBar.language` (\"Language\"). */\n  label?: string;\n  /** Open the sub-list at first. Default `false`. */\n  defaultOpen?: boolean;\n}\n\n/**\n * The language choice INSIDE the account menu (docs/top-bar-harmonization.md §2.3),\n * keksdose's sub-list: a `Disclosure variant=\"menu\"` row — the globe, \"Language\", the\n * active language's flag and the chevron — that opens in place onto one checked\n * `MenuItem` per language. Inline rather than a nested popover: a popover inside a\n * popover fights the outside click and has nowhere to go on a phone (keksdose #140).\n *\n * It renders its own `<li>`: drop it into `TopBarActionMenu`'s `children` first after the\n * app's context rows (§6.5). Signed out there is no account menu; `LanguageMenu` stays\n * the bar's button (§2.3).\n */\nexport function AccountMenuLanguage({\n  languages,\n  value,\n  onPick,\n  close,\n  label,\n  defaultOpen = false,\n}: AccountMenuLanguageProps) {\n  const words = useKitLabels(\"topBar\", DEFAULT_TOP_BAR_LABELS);\n  const [open, setOpen] = useState(defaultOpen);\n  const active = languages.find((l) => l.code === value);\n  return (\n    <li>\n      <Disclosure\n        variant=\"menu\"\n        open={open}\n        onOpenChange={setOpen}\n        title={\n          <span className=\"flex items-center justify-between gap-3\">\n            <span className=\"flex items-center gap-2\">\n              <Globe aria-hidden className=\"size-4\" />\n              {label ?? words.language}\n            </span>\n            {active && flagOf(active)}\n          </span>\n        }\n      >\n        <ul>\n          {languages.map((lang) => (\n            <li key={lang.code}>\n              <MenuItem\n                checked={lang.code === value}\n                onClick={() => {\n                  onPick(lang.code);\n                  setOpen(false);\n                  close?.();\n                }}\n                leading={flagOf(lang)}\n                // Under the row's own text, past the globe.\n                className=\"ps-9\"\n              >\n                {lang.label}\n              </MenuItem>\n            </li>\n          ))}\n        </ul>\n      </Disclosure>\n    </li>\n  );\n}\n"],"mappings":";AAgCI,cAqDQ,YArDR;AAhCJ,SAAS,gBAAgB;AAEzB,SAAS,aAAa;AACtB,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,SAAS,wBAAwB,oBAAoB;AAuBrD,SAAS,OAAO,MAA4C;AAC1D,MAAI,KAAK,SAAS,OAAW,QAAO,KAAK;AACzC,MAAI,CAAC,KAAK,QAAS,QAAO;AAC1B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,MACX,gBAAc,KAAK;AAAA,MACnB,WAAW,SAAS,KAAK,OAAO;AAAA;AAAA,EAClC;AAEJ;AA4BO,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAChB,GAA6B;AAC3B,QAAM,QAAQ,aAAa,UAAU,sBAAsB;AAC3D,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,WAAW;AAC5C,QAAM,SAAS,UAAU,KAAK,CAAC,MAAM,EAAE,SAAS,KAAK;AACrD,SACE,oBAAC,QACC;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR;AAAA,MACA,cAAc;AAAA,MACd,OACE,qBAAC,UAAK,WAAU,2CACd;AAAA,6BAAC,UAAK,WAAU,2BACd;AAAA,8BAAC,SAAM,eAAW,MAAC,WAAU,UAAS;AAAA,UACrC,SAAS,MAAM;AAAA,WAClB;AAAA,QACC,UAAU,OAAO,MAAM;AAAA,SAC1B;AAAA,MAGF,8BAAC,QACE,oBAAU,IAAI,CAAC,SACd,oBAAC,QACC;AAAA,QAAC;AAAA;AAAA,UACC,SAAS,KAAK,SAAS;AAAA,UACvB,SAAS,MAAM;AACb,mBAAO,KAAK,IAAI;AAChB,oBAAQ,KAAK;AACb,oBAAQ;AAAA,UACV;AAAA,UACA,SAAS,OAAO,IAAI;AAAA,UAEpB,WAAU;AAAA,UAET,eAAK;AAAA;AAAA,MACR,KAbO,KAAK,IAcd,CACD,GACH;AAAA;AAAA,EACF,GACF;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/shell/account-menu-language.tsx"],"sourcesContent":["import { useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { Globe } from \"lucide-react\";\nimport { Disclosure } from \"../components/disclosure\";\nimport { MenuItem } from \"../components/menu-item\";\nimport { DEFAULT_TOP_BAR_LABELS, useKitLabels } from \"../i18n/kit-labels\";\nimport { languageCodeLabel } from \"./language-code\";\n\n/** One offered language in the account menu's sub-list. */\nexport interface AccountMenuLanguageOption {\n  code: string;\n  /** Its name, in its own language (\"Deutsch\", \"Français\"). */\n  label: ReactNode;\n  /**\n   * A flag before the name, as the app draws it — keksdose's flag-icons span\n   * (`<span aria-hidden className=\"fi fi-ch …\" />`). A node rather than a country code, so\n   * the kit ships no flag set; decorative, so give it `aria-hidden`.\n   */\n  flag?: ReactNode;\n  /**\n   * Or the ISO 3166-1 alpha-2 country (lowercase) whose flag-icons flag to draw, as\n   * `LanguageMenu`'s `LanguageOption` takes it — so one language list feeds both\n   * (Kurvenschmiede's `LANGUAGES`). Needs the app's flag-icons CSS, as `LanguageMenu`\n   * does. `flag` wins when both are given.\n   */\n  country?: string;\n}\n\n/** The option's flag: its own node, else the flag-icons flag of its country. */\nfunction flagOf(lang: AccountMenuLanguageOption): ReactNode {\n  if (lang.flag !== undefined) return lang.flag;\n  if (!lang.country) return undefined;\n  return (\n    <span\n      aria-hidden\n      data-country={lang.country}\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  );\n}\n\nexport interface AccountMenuLanguageProps {\n  languages: readonly AccountMenuLanguageOption[];\n  /** The active language's code. */\n  value: string | undefined;\n  /** A pick: the app sets the device's language and, signed in, the account's\n   *  (settings §6.2). */\n  onPick: (code: string) => void;\n  /** The account menu's `close` (from `TopBarActionMenu`'s `children`): a pick shuts it. */\n  close?: () => void;\n  /** The row's name. Default: `topBar.language` (\"Language\"). */\n  label?: string;\n  /** Open the sub-list at first. Default `false`. */\n  defaultOpen?: boolean;\n}\n\n/**\n * The language choice INSIDE the account menu (docs/top-bar-harmonization.md §2.3),\n * keksdose's sub-list: a `Disclosure variant=\"menu\"` row — the globe, \"Language\", the\n * active language's flag and code (\"DE\") and the chevron — that opens in place onto one checked\n * `MenuItem` per language. Inline rather than a nested popover: a popover inside a\n * popover fights the outside click and has nowhere to go on a phone (keksdose #140).\n *\n * It renders its own `<li>`: drop it into `TopBarActionMenu`'s `children` first after the\n * app's context rows (§6.5). Signed out there is no account menu; `LanguageMenu` stays\n * the bar's button (§2.3).\n */\nexport function AccountMenuLanguage({\n  languages,\n  value,\n  onPick,\n  close,\n  label,\n  defaultOpen = false,\n}: AccountMenuLanguageProps) {\n  const words = useKitLabels(\"topBar\", DEFAULT_TOP_BAR_LABELS);\n  const [open, setOpen] = useState(defaultOpen);\n  const active = languages.find((l) => l.code === value);\n  return (\n    <li>\n      <Disclosure\n        variant=\"menu\"\n        open={open}\n        onOpenChange={setOpen}\n        title={\n          <span className=\"flex items-center justify-between gap-3\">\n            <span className=\"flex items-center gap-2\">\n              <Globe aria-hidden className=\"size-4\" />\n              {label ?? words.language}\n            </span>\n            {active && (\n              // The flag alone could not tell de-CH, fr-CH and it-CH apart (one Swiss\n              // flag each), so the code sits beside it (0.49 KIT-10); the row's name\n              // carries the language's own name.\n              <span className=\"flex items-center gap-1.5\">\n                {flagOf(active)}\n                <span aria-hidden className=\"text-xs font-semibold tabular-nums tracking-wide text-secondary\">\n                  {languageCodeLabel(active.code)}\n                </span>\n                <span className=\"sr-only\">{active.label}</span>\n              </span>\n            )}\n          </span>\n        }\n      >\n        <ul>\n          {languages.map((lang) => (\n            <li key={lang.code}>\n              <MenuItem\n                checked={lang.code === value}\n                onClick={() => {\n                  onPick(lang.code);\n                  setOpen(false);\n                  close?.();\n                }}\n                leading={flagOf(lang)}\n                // Under the row's own text, past the globe.\n                className=\"ps-9\"\n              >\n                {lang.label}\n              </MenuItem>\n            </li>\n          ))}\n        </ul>\n      </Disclosure>\n    </li>\n  );\n}\n"],"mappings":";AAiCI,cAqDQ,YArDR;AAjCJ,SAAS,gBAAgB;AAEzB,SAAS,aAAa;AACtB,SAAS,kBAAkB;AAC3B,SAAS,gBAAgB;AACzB,SAAS,wBAAwB,oBAAoB;AACrD,SAAS,yBAAyB;AAuBlC,SAAS,OAAO,MAA4C;AAC1D,MAAI,KAAK,SAAS,OAAW,QAAO,KAAK;AACzC,MAAI,CAAC,KAAK,QAAS,QAAO;AAC1B,SACE;AAAA,IAAC;AAAA;AAAA,MACC,eAAW;AAAA,MACX,gBAAc,KAAK;AAAA,MACnB,WAAW,SAAS,KAAK,OAAO;AAAA;AAAA,EAClC;AAEJ;AA4BO,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,cAAc;AAChB,GAA6B;AAC3B,QAAM,QAAQ,aAAa,UAAU,sBAAsB;AAC3D,QAAM,CAAC,MAAM,OAAO,IAAI,SAAS,WAAW;AAC5C,QAAM,SAAS,UAAU,KAAK,CAAC,MAAM,EAAE,SAAS,KAAK;AACrD,SACE,oBAAC,QACC;AAAA,IAAC;AAAA;AAAA,MACC,SAAQ;AAAA,MACR;AAAA,MACA,cAAc;AAAA,MACd,OACE,qBAAC,UAAK,WAAU,2CACd;AAAA,6BAAC,UAAK,WAAU,2BACd;AAAA,8BAAC,SAAM,eAAW,MAAC,WAAU,UAAS;AAAA,UACrC,SAAS,MAAM;AAAA,WAClB;AAAA,QACC;AAAA;AAAA;AAAA,QAIC,qBAAC,UAAK,WAAU,6BACb;AAAA,iBAAO,MAAM;AAAA,UACd,oBAAC,UAAK,eAAW,MAAC,WAAU,mEACzB,4BAAkB,OAAO,IAAI,GAChC;AAAA,UACA,oBAAC,UAAK,WAAU,WAAW,iBAAO,OAAM;AAAA,WAC1C;AAAA,SAEJ;AAAA,MAGF,8BAAC,QACE,oBAAU,IAAI,CAAC,SACd,oBAAC,QACC;AAAA,QAAC;AAAA;AAAA,UACC,SAAS,KAAK,SAAS;AAAA,UACvB,SAAS,MAAM;AACb,mBAAO,KAAK,IAAI;AAChB,oBAAQ,KAAK;AACb,oBAAQ;AAAA,UACV;AAAA,UACA,SAAS,OAAO,IAAI;AAAA,UAEpB,WAAU;AAAA,UAET,eAAK;AAAA;AAAA,MACR,KAbO,KAAK,IAcd,CACD,GACH;AAAA;AAAA,EACF,GACF;AAEJ;","names":[]}

package/dist/shell/app-shell-labels.js

@@ -1,7 +1,8 @@
 "use client";
 const DEFAULT_APP_SHELL_MORE_LABELS = {
   more: "More",
-  moreTitle: "More pages"
+  moreTitle: "More pages",
+  overview: "Overview"
 };
 export {
   DEFAULT_APP_SHELL_MORE_LABELS

package/dist/shell/app-shell-labels.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/shell/app-shell-labels.ts"],"sourcesContent":["// The English words of ./app-shell, in a module with no component code: the English\n// catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one\n// chunk like the other languages (0.34, KS U8). ./app-shell re-exports them.\n\nimport type { AppShellMoreLabels } from \"./app-shell\";\n\nexport const DEFAULT_APP_SHELL_MORE_LABELS: AppShellMoreLabels = {\n  more: \"More\",\n  moreTitle: \"More pages\",\n};\n"],"mappings":";AAMO,MAAM,gCAAoD;AAAA,EAC/D,MAAM;AAAA,EACN,WAAW;AACb;","names":[]}
+{"version":3,"sources":["../../src/shell/app-shell-labels.ts"],"sourcesContent":["// The English words of ./app-shell, in a module with no component code: the English\n// catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one\n// chunk like the other languages (0.34, KS U8). ./app-shell re-exports them.\n\nimport type { AppShellMoreLabels } from \"./app-shell\";\n\nexport const DEFAULT_APP_SHELL_MORE_LABELS: AppShellMoreLabels = {\n  more: \"More\",\n  moreTitle: \"More pages\",\n  overview: \"Overview\",\n};\n"],"mappings":";AAMO,MAAM,gCAAoD;AAAA,EAC/D,MAAM;AAAA,EACN,WAAW;AAAA,EACX,UAAU;AACZ;","names":[]}

package/dist/shell/app-shell.d.ts

@@ -28,6 +28,19 @@ export interface AppShellNavItem {
      *  from Large up (keksdose dev#613, which read `useTextSize()` in its layout to decide).
      *  Default `"normal"`: the short label at every size, as before. */
     shortLabelFrom?: TextSize;
+    /** 0.49: `shortLabel` is another word for the page, not a shortening of `label` —
+     *  keksdose's "Activity" for "Transactions". Without it a development build warns once
+     *  when `shortLabel` does not start with `label`'s first word (an abbreviation of that
+     *  word, "Trans." for "Transactions", counts), because a bar cell that names a page
+     *  differently from the sidebar, the title and the palette is a page the reader
+     *  looks for twice. */
+    shortLabelIsAlias?: boolean;
+    /** 0.49: which entries sit in the phone bar when they do not all fit
+     *  ({@link AppShellProps.mobileMaxItems}). Lower first: the entries with a priority take
+     *  the bar's cells in its order, then the rest in the list's order; the bar still shows
+     *  its entries in the list's order, and the others go under "More". Unset: the list's
+     *  order decides (as before). */
+    mobilePriority?: number;
     /** 0.31.0: leave this entry out of the MOBILE BOTTOM BAR; the sidebar keeps it.
      *  For an entry a phone reaches another way — the brand link to the start page —
      *  when one cell fewer is what keeps the others' labels whole (the bar divides its
@@ -43,8 +56,10 @@ export interface AppShellNavItem {
     dataTour?: string;
     /** Optional sub-items. When present, hovering (or focusing) the item opens a
      *  flyout to the right of the sidebar with a header (this item's label) and the
-     *  sub-items as icon + title links. Works collapsed or expanded; the mobile
-     *  bottom bar ignores sub-items and links to `to`. */
+     *  sub-items as icon + title links. Works collapsed or expanded. On the phone (0.49)
+     *  the bar's cell opens a sheet of them instead of linking to `to` — the sheet lists
+     *  `to` first as "Overview" when no sub-item is that page — and the pages of the group
+     *  the reader is in show as the row above the bar (`mobileSubNav`). */
     items?: AppShellSubItem[];
 }
 /**
@@ -106,14 +121,35 @@ export interface AppShellMoreLabels {
     more: string;
     /** The sheet's heading, and so its accessible name. */
     moreTitle: string;
+    /** 0.49: a parent entry's own page in the sheet its bar cell opens, above its pages,
+     *  when no page is that one — "Overview". */
+    overview: string;
 }
 export { DEFAULT_APP_SHELL_MORE_LABELS };
 /**
- * The most entries the phone bar shows before the rest go under "More", per text size
- * (§10.7): every entry at Normal, four at Large, three at Extra large. A fifth of a
- * 360 px phone at 150 % is 48 px of Normal-sized room, and the cells hold a word each.
+ * The most cells the phone bar holds, "More" included, per text size (0.49 KIT-6; 0.32
+ * §10.7): five at Normal and Large, four at Extra large. Eight entries are four and
+ * "More" at Normal; a fifth of a 390 px phone holds one word of the bar's type, and a
+ * sixth no longer does once the type grows. A fifth of a 360 px phone at 150 % is 48 px
+ * of Normal-sized room.
+ */
+export declare const DEFAULT_MOBILE_MAX_ITEMS: Readonly<Record<TextSize, number>>;
+/**
+ * @deprecated 0.49 — use {@link DEFAULT_MOBILE_MAX_ITEMS} and `AppShell`'s
+ * `mobileMaxItems`: the bar is sized in cells, "More" included; removed in 0.51. This is
+ * the same default counted as entries before "More" (one fewer).
  */
 export declare const DEFAULT_MOBILE_BAR_MAX: Readonly<Record<TextSize, number>>;
+/**
+ * The phone bar's cells (0.49 KIT-6): every entry when there are at most `maxItems`,
+ * else `maxItems − 1` entries and a "More" cell for the rest. Which entries stay is
+ * `priority`'s call — lower first, entries without one after them in the list's order —
+ * and both halves keep the list's order. Never fewer than one entry beside More.
+ */
+export declare function pickMobileBar<T>(entries: readonly T[], maxItems: number, priority?: (entry: T) => number | undefined): {
+    shown: T[];
+    hidden: T[];
+};
 /**
  * Split the bar's entries into the cells shown and the ones under "More", in the app's
  * order (§10.7: the app puts its four most used first, or orders by role). One hidden
@@ -190,17 +226,23 @@ export interface AppShellProps extends ComponentPropsWithoutRef<"div"> {
      */
     mobileSubNavLayout?: "wrap" | "scroll";
     /**
-     * The most entries the phone bar shows; the rest move into a "More" cell that opens a
-     * sheet listing them, each group with its pages (0.32, docs/text-size-harmonization.md
-     * §4, §10.7). The bar takes `nav` in the app's order — after `mobileHidden` — so the
-     * app puts its most used entries first (or orders by role: kastlan's manager and
-     * accountant see different firsts).
+     * The most cells the phone bar holds, "More" included (0.49 KIT-6). When `nav` (after
+     * `mobileHidden`) has more entries, the bar keeps `mobileMaxItems − 1` of them and a
+     * last "More" cell opens a sheet with the rest, each group with its pages. Which
+     * entries stay is the items' `mobilePriority`, else the list's order (so the app puts
+     * its most used entries first, or orders by role: kastlan's manager and accountant see
+     * different firsts).
      *
-     * Default {@link DEFAULT_MOBILE_BAR_MAX}: unlimited at Normal, 4 at Large, 3 at Extra
-     * large, because the cells' words grow with the text and the phone does not. A number
-     * replaces the default at every size; `{ large: 5 }` replaces it at one size only.
-     * Never fewer than one entry; and one entry over the limit shows in full rather than
-     * behind a More that would take the same cell.
+     * Default {@link DEFAULT_MOBILE_MAX_ITEMS}: 5 at Normal and Large, 4 at Extra large —
+     * eight entries are four and "More". A number replaces the default at every size;
+     * `{ xlarge: 5 }` replaces it at one size only. Never fewer than one entry beside More.
+     */
+    mobileMaxItems?: number | Partial<Record<TextSize, number>>;
+    /**
+     * @deprecated 0.49 — use `mobileMaxItems`, which counts the bar's cells, "More"
+     * included: `mobileBarMax={4}` is `mobileMaxItems={5}`; removed in 0.51. Read as that
+     * (one more, per size), with a development warning; ignored when `mobileMaxItems` is
+     * given.
      */
     mobileBarMax?: number | Partial<Record<TextSize, number>>;
     /** The More cell's words over the provider's `appShellMore`. */
@@ -228,4 +270,4 @@ export interface AppShellProps extends ComponentPropsWithoutRef<"div"> {
  * `NavLink`; domain-free — nav items, brand, footer and the top bar's actions
  * are all supplied by the app.
  */
-export declare function AppShell({ nav, topBar, children, footer, sidebarFooter, sidebarFooterItems, renderLink, collapseStorageKey: collapseStorageKeyProp, collapseLabel, expandLabel, subNav, mobileSubNav, mobileSubNavLayout: mobileSubNavLayoutProp, mobileBarMax, moreLabels, toggleGroupLabel, embedded: embeddedProp, className, ref, ...rest }: AppShellProps): import("react").JSX.Element;
+export declare function AppShell({ nav, topBar, children, footer, sidebarFooter, sidebarFooterItems, renderLink, collapseStorageKey: collapseStorageKeyProp, collapseLabel, expandLabel, subNav, mobileSubNav, mobileSubNavLayout: mobileSubNavLayoutProp, mobileMaxItems, mobileBarMax, moreLabels, toggleGroupLabel, embedded: embeddedProp, className, ref, ...rest }: AppShellProps): import("react").JSX.Element;

package/dist/shell/app-shell.js

@@ -21,16 +21,83 @@ import { useBreakpoint } from "../hooks/use-breakpoint.js";
 import { TEXT_SIZES, useTextSize } from "../theme/text-size.js";
 import { DEFAULT_APP_SHELL_LABELS, useKitLabels, useKitLink } from "../i18n/kit-labels.js";
 import { DEFAULT_APP_SHELL_MORE_LABELS } from "./app-shell-labels.js";
+const DEFAULT_MOBILE_MAX_ITEMS = {
+  normal: 5,
+  large: 5,
+  xlarge: 4
+};
 const DEFAULT_MOBILE_BAR_MAX = {
-  normal: Number.POSITIVE_INFINITY,
-  large: 4,
-  xlarge: 3
+  normal: DEFAULT_MOBILE_MAX_ITEMS.normal - 1,
+  large: DEFAULT_MOBILE_MAX_ITEMS.large - 1,
+  xlarge: DEFAULT_MOBILE_MAX_ITEMS.xlarge - 1
 };
+function pickMobileBar(entries, maxItems, priority) {
+  const cells = Math.max(1, Math.floor(maxItems));
+  if (entries.length <= cells) return { shown: [...entries], hidden: [] };
+  const keep = Math.max(1, cells - 1);
+  const rank = (i) => priority?.(entries[i]) ?? Number.POSITIVE_INFINITY;
+  const chosen = new Set(
+    entries.map((_, i) => i).sort((a, b) => rank(a) - rank(b) || a - b).slice(0, keep)
+  );
+  return {
+    shown: entries.filter((_, i) => chosen.has(i)),
+    hidden: entries.filter((_, i) => !chosen.has(i))
+  };
+}
 function splitMobileBar(entries, max) {
   const limit = Math.max(1, Math.floor(max));
   if (entries.length <= limit + 1) return { shown: [...entries], hidden: [] };
   return { shown: entries.slice(0, limit), hidden: entries.slice(limit) };
 }
+function mobileCells(maxItems, barMax, size) {
+  if (maxItems !== void 0) {
+    return typeof maxItems === "number" ? maxItems : maxItems[size] ?? DEFAULT_MOBILE_MAX_ITEMS[size];
+  }
+  if (barMax !== void 0) {
+    const entries = typeof barMax === "number" ? barMax : barMax[size];
+    if (entries !== void 0) return entries + 1;
+  }
+  return DEFAULT_MOBILE_MAX_ITEMS[size];
+}
+function devWarnings() {
+  return Boolean(import.meta.env?.DEV) && !import.meta.env?.VITEST;
+}
+const warnedNav = /* @__PURE__ */ new Set();
+function warnNavOnce(key, message) {
+  if (warnedNav.has(key)) return;
+  warnedNav.add(key);
+  console.warn(message);
+}
+function firstWord(text) {
+  return (text.trim().match(/^[\p{L}\p{N}]+/u)?.[0] ?? "").toLocaleLowerCase();
+}
+function shortLabelNamesLabel(short, label) {
+  const s = firstWord(short);
+  const l = firstWord(label);
+  return s === "" || l === "" || l.startsWith(s) || s.startsWith(l);
+}
+const TEXT_SIZE_WORDS = { normal: "Normal", large: "Large", xlarge: "Extra large" };
+function useNavDevWarnings(nav, deprecatedBarMax) {
+  useEffect(() => {
+    if (!devWarnings()) return;
+    if (deprecatedBarMax) {
+      warnNavOnce(
+        "mobileBarMax",
+        `[ui-kit] AppShell mobileBarMax is deprecated: use mobileMaxItems, which counts the bar's cells with "More" (mobileBarMax={4} is mobileMaxItems={5}). Removed in 0.51.`
+      );
+    }
+    for (const item of nav) {
+      if (item.shortLabel === void 0 || item.shortLabelIsAlias) continue;
+      if (shortLabelNamesLabel(item.shortLabel, item.label)) continue;
+      const from = item.shortLabelFrom ?? "normal";
+      const where = from === "normal" ? "at every text size" : `from ${TEXT_SIZE_WORDS[from]} text up`;
+      warnNavOnce(
+        `shortLabel|${item.to}|${item.shortLabel}|${item.label}`,
+        `[ui-kit] AppShell nav "${item.to}": shortLabel "${item.shortLabel}" does not start with "${item.label.trim().split(/\s+/)[0]}", the first word of its label "${item.label}". The phone bar shows it ${where}, so the page has another name there than in the sidebar and its title. Shorten the label instead, or pass shortLabelIsAlias: true if the other word is meant.`
+      );
+    }
+  }, [nav, deprecatedBarMax]);
+}
 const AppShellNesting = createContext(false);
 function useNavHeightVar(ref, shellRef, embedded) {
   const isMdUp = useBreakpoint("md", false);
@@ -68,6 +135,7 @@ function AppShell({
   subNav = "flyout",
   mobileSubNav = true,
   mobileSubNavLayout: mobileSubNavLayoutProp,
+  mobileMaxItems,
   mobileBarMax,
   moreLabels,
   toggleGroupLabel,
@@ -80,11 +148,13 @@ function AppShell({
   const { size: textSize } = useTextSize();
   const large = textSize !== "normal";
   const mobileSubNavLayout = mobileSubNavLayoutProp ?? (large ? "scroll" : "wrap");
-  const barMax = typeof mobileBarMax === "number" ? mobileBarMax : mobileBarMax?.[textSize] ?? DEFAULT_MOBILE_BAR_MAX[textSize];
-  const { shown: barNav, hidden: moreNav } = splitMobileBar(
+  const maxItems = mobileCells(mobileMaxItems, mobileBarMax, textSize);
+  const { shown: barNav, hidden: moreNav } = pickMobileBar(
     nav.filter((item) => !item.mobileHidden),
-    barMax
+    maxItems,
+    (item) => item.mobilePriority
   );
+  useNavDevWarnings(nav, mobileBarMax !== void 0 && mobileMaxItems === void 0);
   const collapseStorageKey = collapseStorageKeyProp ?? (embedded ? null : "appLayout.sidebarCollapsed");
   const labels = useKitLabels("appShell", DEFAULT_APP_SHELL_LABELS, {
     collapse: collapseLabel,
@@ -186,7 +256,7 @@ function AppShell({
                 "main",
                 {
                   className: cn(
-                    "relative flex-1 max-w-full overflow-x-clip pb-[calc(var(--app-nav-h,4rem)+max(1.5rem,var(--app-float-clearance,0px)))] md:pb-0 md:min-h-0 md:overflow-y-auto md:[scrollbar-gutter:stable_both-edges]",
+                    "relative flex-1 max-w-full overflow-x-clip pb-[calc(var(--app-nav-h,4rem)+max(1.5rem,var(--app-float-clearance,0px)))] md:pb-[var(--app-float-clearance,0px)] md:min-h-0 md:overflow-y-auto md:[scrollbar-gutter:stable_both-edges]",
                     // The list page's fill (0.40, docs/page-layout-harmonization.md §1.3): while
                     // a `fillHeight` DataTable is inside, a flex column — a banner above the
                     // page keeps its own height and the page (a `FillHeight`) takes the rest,
@@ -225,7 +295,9 @@ function AppShell({
                     className: "grid",
                     style: { gridTemplateColumns: `repeat(${barNav.length + (moreNav.length ? 1 : 0)}, minmax(0, 1fr))` },
                     children: [
-                      barNav.map((item) => /* @__PURE__ */ jsx(MobileNavItem, { item }, item.to)),
+                      barNav.map(
+                        (item) => item.items?.length ? /* @__PURE__ */ jsx(MobileGroupCell, { item, labels: moreLabels }, item.to) : /* @__PURE__ */ jsx(MobileNavItem, { item }, item.to)
+                      ),
                       moreNav.length > 0 && /* @__PURE__ */ jsx(MobileMoreCell, { hidden: moreNav, labels: moreLabels })
                     ]
                   }
@@ -326,8 +398,7 @@ function MobileCellLabel({ children }) {
 }
 function MobileNavItem({ item }) {
   const subActive = useSubItemActive(item);
-  const { size } = useTextSize();
-  const short = item.shortLabel !== void 0 && TEXT_SIZES.indexOf(size) >= TEXT_SIZES.indexOf(item.shortLabelFrom ?? "normal") ? item.shortLabel : void 0;
+  const label = useCellLabel(item);
   return /* @__PURE__ */ jsxs(
     NavLink,
     {
@@ -337,11 +408,76 @@ function MobileNavItem({ item }) {
       className: ({ isActive }) => mobileCellClass(isActive || subActive),
       children: [
         /* @__PURE__ */ jsx("span", { className: "relative", children: /* @__PURE__ */ jsx(item.icon, { className: "size-5" }) }),
-        /* @__PURE__ */ jsx(MobileCellLabel, { children: short ?? item.label })
+        /* @__PURE__ */ jsx(MobileCellLabel, { children: label })
+      ]
+    }
+  );
+}
+function useCellLabel(item) {
+  const { size } = useTextSize();
+  return item.shortLabel !== void 0 && TEXT_SIZES.indexOf(size) >= TEXT_SIZES.indexOf(item.shortLabelFrom ?? "normal") ? item.shortLabel : item.label;
+}
+function SheetLink({
+  to,
+  end,
+  icon: Icon,
+  label,
+  onClick,
+  level
+}) {
+  return /* @__PURE__ */ jsxs(
+    NavLink,
+    {
+      to,
+      end: end ?? true,
+      onClick,
+      className: ({ isActive }) => cn(
+        level === "entry" ? "flex min-h-11 items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors" : "flex min-h-11 items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm transition-colors",
+        isActive ? "bg-inverse text-inverse" : level === "entry" ? "text-primary hover:bg-hover" : "text-secondary hover:bg-hover"
+      ),
+      children: [
+        /* @__PURE__ */ jsx(Icon, { "aria-hidden": true, className: level === "entry" ? "size-5 shrink-0" : "size-4 shrink-0 opacity-70" }),
+        /* @__PURE__ */ jsx("span", { className: "min-w-0 break-words leading-snug", children: label })
       ]
     }
   );
 }
+function MobileGroupCell({
+  item,
+  labels: labelsProp
+}) {
+  const labels = useKitLabels("appShellMore", DEFAULT_APP_SHELL_MORE_LABELS, labelsProp);
+  const { pathname } = useLocation();
+  const [open, setOpen] = useState(false);
+  const label = useCellLabel(item);
+  const active = entryIsCurrent(item, pathname);
+  const close = () => setOpen(false);
+  const pages = item.items ?? [];
+  const ownPageListed = pages.some((sub) => sub.to === item.to);
+  return /* @__PURE__ */ jsxs("div", { "data-slot": "app-shell-group", className: "relative min-w-0", children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        type: "button",
+        "aria-haspopup": "dialog",
+        "aria-expanded": open,
+        "aria-label": label === item.label ? void 0 : item.label,
+        onClick: () => setOpen(true),
+        className: mobileCellClass(active),
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "relative", children: /* @__PURE__ */ jsx(item.icon, { "aria-hidden": true, className: "size-5" }) }),
+          /* @__PURE__ */ jsx(MobileCellLabel, { children: label })
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx(TourAnchor, { to: item.to, dataTour: item.dataTour }),
+    pages.filter((sub) => sub.to !== item.to).map((sub) => /* @__PURE__ */ jsx(TourAnchor, { to: sub.to }, sub.to)),
+    /* @__PURE__ */ jsx(DialogFrame, { open, onClose: close, title: item.label, closeButton: true, bodyClassName: "space-y-1", children: /* @__PURE__ */ jsxs("ul", { className: "space-y-1", children: [
+      !ownPageListed && /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(SheetLink, { to: item.to, end: item.end, icon: item.icon, label: labels.overview, onClick: close, level: "entry" }) }),
+      pages.map((sub) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(SheetLink, { to: sub.to, end: sub.end, icon: sub.icon, label: sub.label, onClick: close, level: "entry" }) }, sub.to))
+    ] }) })
+  ] });
+}
 function entryIsCurrent(item, pathname) {
   return !!matchPath({ path: item.to, end: item.end ?? true }, pathname) || !!item.items?.some((sub) => matchPath({ path: sub.to, end: sub.end ?? true }, pathname));
 }
@@ -390,38 +526,8 @@ function MobileMoreCell({
       ...(item.items ?? []).map((sub) => /* @__PURE__ */ jsx(TourAnchor, { to: sub.to }, `${item.to} ${sub.to}`))
     ]),
     /* @__PURE__ */ jsx(DialogFrame, { open, onClose: close, title: labels.moreTitle, closeButton: true, bodyClassName: "space-y-1", children: /* @__PURE__ */ jsx("ul", { className: "space-y-1", children: hidden.map((item) => /* @__PURE__ */ jsxs("li", { children: [
-      /* @__PURE__ */ jsxs(
-        NavLink,
-        {
-          to: item.to,
-          end: item.end ?? true,
-          onClick: close,
-          className: ({ isActive }) => cn(
-            "flex min-h-11 items-center gap-3 rounded-md px-3 py-2 text-sm transition-colors",
-            isActive ? "bg-inverse text-inverse" : "text-primary hover:bg-hover"
-          ),
-          children: [
-            /* @__PURE__ */ jsx(item.icon, { "aria-hidden": true, className: "size-5 shrink-0" }),
-            /* @__PURE__ */ jsx("span", { className: "min-w-0 break-words leading-snug", children: item.label })
-          ]
-        }
-      ),
-      !!item.items?.length && /* @__PURE__ */ jsx("ul", { "aria-label": item.label, className: "ms-[1.3rem] mt-0.5 space-y-0.5 border-s border-subtle ps-2", children: item.items.map((sub) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsxs(
-        NavLink,
-        {
-          to: sub.to,
-          end: sub.end ?? true,
-          onClick: close,
-          className: ({ isActive }) => cn(
-            "flex min-h-11 items-center gap-2.5 rounded-md px-2.5 py-1.5 text-sm transition-colors",
-            isActive ? "bg-inverse text-inverse" : "text-secondary hover:bg-hover"
-          ),
-          children: [
-            /* @__PURE__ */ jsx(sub.icon, { "aria-hidden": true, className: "size-4 shrink-0 opacity-70" }),
-            /* @__PURE__ */ jsx("span", { className: "min-w-0 break-words leading-snug", children: sub.label })
-          ]
-        }
-      ) }, sub.to)) })
+      /* @__PURE__ */ jsx(SheetLink, { to: item.to, end: item.end, icon: item.icon, label: item.label, onClick: close, level: "entry" }),
+      !!item.items?.length && /* @__PURE__ */ jsx("ul", { "aria-label": item.label, className: "ms-[1.3rem] mt-0.5 space-y-0.5 border-s border-subtle ps-2", children: item.items.map((sub) => /* @__PURE__ */ jsx("li", { children: /* @__PURE__ */ jsx(SheetLink, { to: sub.to, end: sub.end, icon: sub.icon, label: sub.label, onClick: close, level: "page" }) }, sub.to)) })
     ] }, item.to)) }) })
   ] });
 }
@@ -733,6 +839,8 @@ export {
   AppShell,
   DEFAULT_APP_SHELL_MORE_LABELS,
   DEFAULT_MOBILE_BAR_MAX,
+  DEFAULT_MOBILE_MAX_ITEMS,
+  pickMobileBar,
   splitMobileBar
 };
 //# sourceMappingURL=app-shell.js.map