@eifi1/ui-kit 0.53.0 → 0.55.0

package/src/shell/auth-layout.tsx

@@ -1,186 +0,0 @@
-import type { ComponentPropsWithRef, CSSProperties, ReactNode } from "react";
-import { cn } from "../lib/cn";
-import { Card } from "../components/card";
-
-/**
- * `extends ComponentPropsWithRef<"div">` because this is the page's outermost element
- * — the one that owns `min-h-dvh` and the safe-area padding — so there is nothing a
- * consumer could wrap it in to add an id or a `data-*` hook without breaking that. The
- * `ref` too since 0.34 (API-2, refactor audit 2026-10).
- */
-export interface AuthLayoutProps extends Omit<ComponentPropsWithRef<"div">, "title"> {
-  /** The brand mark (an SVG), drawn in a brand-coloured tile above the title. */
-  logo?: ReactNode;
-  /** `false` draws `logo` as it is, without the tile — for a full-colour logo image. */
-  logoTile?: boolean;
-  /** The page's `<h1>` (see `headingAs`): the product name on sign-in, "Verify email",
-   *  "Imprint". */
-  title?: ReactNode;
-  /** The muted line under the title. */
-  description?: ReactNode;
-  /** The card's content — the form, the status, the legal text. */
-  children: ReactNode;
-  /**
-   * Above the header, outside the card — the legal pages' "← Back to sign in" link, or
-   * a notice banner. Start-aligned in both widths.
-   */
-  back?: ReactNode;
-  /** The top-end corner: a `LanguageMenu`. */
-  languageMenu?: ReactNode;
-  /** The top-end corner, before the language menu: a `ThemeToggle`. */
-  themeToggle?: ReactNode;
-  /** Below the card, centred — the legal links. */
-  footer?: ReactNode;
-  /** Wraps the footer in a `<nav>` with this name ("Legal"). Without it, a plain block. */
-  footerLabel?: string;
-  /**
-   * - `"narrow"` (default) — a `max-w-sm` card centred on the page, header centred:
-   *   sign-in, register, verify email, two-factor.
-   * - `"wide"` — a `max-w-3xl` column from the top of the page, header start-aligned:
-   *   running text (imprint, privacy, terms), which reads badly centred.
-   */
-  width?: "narrow" | "wide";
-  /** `false` lays the header and content on the page itself, without the card's
-   *  surface and border — the legal pages. Default true. */
-  card?: boolean;
-  /** Extra classes for the card (or, with `card={false}`, the content column). */
-  cardClassName?: string;
-  /**
-   * `false` draws the content column and the footer as plain `<div>`s instead of
-   * `<main>` and `<footer>` — for an AuthLayout embedded in a page that already has its
-   * landmarks (a preview, a docs page, a dialog), where a second `<main>` would nest
-   * one inside the other. Default `true`: on its own route it IS the page.
-   */
-  landmark?: boolean;
-  /** The title's element. Default `h1` — the page's heading; an embedded layout takes
-   *  the level of where it sits (`h2`, `h3`). */
-  headingAs?: "h1" | "h2" | "h3" | "h4" | "h5" | "h6";
-}
-
-/** Keeps the page clear of a notch, the rounded corners and the home indicator on a
- *  phone in `viewport-fit=cover`; 1rem where the platform reports no inset. Physical
- *  left/right, because that is what `env()` reports. */
-const SAFE_AREA: CSSProperties = {
-  paddingTop: "max(1rem, env(safe-area-inset-top, 0px))",
-  paddingBottom: "max(1rem, env(safe-area-inset-bottom, 0px))",
-  paddingLeft: "max(1rem, env(safe-area-inset-left, 0px))",
-  paddingRight: "max(1rem, env(safe-area-inset-right, 0px))",
-};
-
-const FOOTER_CLASS =
-  "flex flex-wrap justify-center gap-x-4 gap-y-1 text-xs text-muted [&_a:hover]:text-primary [&_a:hover]:underline [&_a]:rounded-sm [&_a:focus-visible]:outline-none [&_a:focus-visible]:ring-focus [&_a:focus-visible]:ring-brand";
-
-/**
- * The public page frame outside the app shell: sign-in, registration, email
- * verification, two-factor — and, `width="wide"`, the legal pages.
- *
- * kastlan's login, register, verify-email and two-factor pages each repeat the same
- * `min-h-screen` centring, the absolutely placed language switcher, the brand tile, the
- * centred title + subtitle and an absolutely placed legal footer. Absolutely placed,
- * the footer and the switcher sat ON the card on a short phone screen (a tall register
- * form, or the software keyboard up); here they are rows of a column that grows with
- * its content, so the page scrolls instead of overlapping.
- *
- * The corner controls, the `<main>` and the footer are in reading order: a screen
- * reader meets the language switch first, which is where someone who cannot read the
- * page's language needs it.
- */
-export function AuthLayout({
-  logo,
-  logoTile = true,
-  title,
-  description,
-  children,
-  back,
-  languageMenu,
-  themeToggle,
-  footer,
-  footerLabel,
-  width = "narrow",
-  card = true,
-  cardClassName,
-  landmark = true,
-  headingAs: Heading = "h1",
-  className,
-  style,
-  ...rest
-}: AuthLayoutProps) {
-  const Main = landmark ? "main" : "div";
-  const Footer = landmark ? "footer" : "div";
-  const wide = width === "wide";
-  const hasCorner = languageMenu != null || themeToggle != null;
-  const hasHeader = logo != null || title != null || description != null;
-
-  const header = hasHeader && (
-    <div
-      data-slot="auth-layout-header"
-      className={cn("flex flex-col gap-1.5", wide ? "items-start text-start" : "items-center text-center")}
-    >
-      {logo != null &&
-        (logoTile ? (
-          <div className="mb-2 flex size-12 items-center justify-center rounded-lg bg-brand text-brand-contrast [&_svg]:size-6">
-            {logo}
-          </div>
-        ) : (
-          <div className="mb-2">{logo}</div>
-        ))}
-      {title != null && (
-        <Heading className={cn("font-semibold leading-tight text-primary", wide ? "text-2xl md:text-3xl" : "text-2xl")}>
-          {title}
-        </Heading>
-      )}
-      {description != null && <p className="text-sm text-muted">{description}</p>}
-    </div>
-  );
-
-  const body = (
-    <>
-      {header}
-      <div className={cn(hasHeader && (wide ? "mt-6" : "mt-5"))}>{children}</div>
-    </>
-  );
-
-  return (
-    <div
-      {...rest}
-      data-auth-layout={width}
-      style={{ ...SAFE_AREA, ...style }}
-      className={cn("flex min-h-dvh flex-col bg-page text-primary", className)}
-    >
-      {hasCorner && (
-        <div data-slot="auth-layout-corner" className="flex items-center justify-end gap-1">
-          {themeToggle}
-          {languageMenu}
-        </div>
-      )}
-      <Main
-        data-slot="auth-layout-main"
-        className={cn(
-          // `relative` contains any `sr-only` child (see AppShell's <main>).
-          "relative flex w-full flex-1 flex-col",
-          wide ? "py-6 md:py-10" : "items-center justify-center py-8",
-        )}
-      >
-        <div className={cn("mx-auto w-full", wide ? "max-w-3xl" : "max-w-sm")}>
-          {back != null && <div className="mb-4">{back}</div>}
-          {card ? (
-            <Card className={cn(wide ? "p-6 md:p-8" : "p-6", cardClassName)}>{body}</Card>
-          ) : (
-            <div className={cardClassName}>{body}</div>
-          )}
-        </div>
-      </Main>
-      {footer != null && footer !== false && (
-        <Footer data-slot="auth-layout-footer" className="pt-4">
-          {footerLabel ? (
-            <nav aria-label={footerLabel} className={FOOTER_CLASS}>
-              {footer}
-            </nav>
-          ) : (
-            <div className={FOOTER_CLASS}>{footer}</div>
-          )}
-        </Footer>
-      )}
-    </div>
-  );
-}

package/src/shell/company-switcher-labels.ts

@@ -1,13 +0,0 @@
-// The English words of ./company-switcher, in a module with no component code: the English
-// catalogue (src/i18n/defaults.ts) imports them without the component, so `en` loads as one
-// chunk like the other languages (0.34, KS U8). ./company-switcher re-exports them.
-
-import type { CompanySwitcherLabels } from "./company-switcher";
-
-export const DEFAULT_COMPANY_SWITCHER_LABELS: CompanySwitcherLabels = {
-  switchCompany: "Switch company",
-  heading: "Companies",
-  current: (name) => `Company: ${name}`,
-  currentMark: "(current)",
-  switching: "Switching company…",
-};

package/src/shell/company-switcher.tsx

@@ -1,136 +0,0 @@
-import { useState } from "react";
-import type { ReactNode } from "react";
-import { Building2 } from "lucide-react";
-import { cn } from "../lib/cn";
-import { useKitLabels, type LabelOverride } from "../i18n/kit-labels";
-import { useAnnounce } from "../hooks/use-announce";
-import { Spinner } from "../components/spinner";
-import { OptionSwitcherMenu } from "./option-switcher-menu";
-import { TOPBAR_TRIGGER_CLASS } from "./topbar-controls";
-import { DEFAULT_COMPANY_SWITCHER_LABELS } from "./company-switcher-labels";
-
-/** Every string the switcher renders or speaks — the `companySwitcher` namespace. A
- *  different context (keksdose's budgets) renames them all. */
-export interface CompanySwitcherLabels {
-  /** The trigger's and the menu's accessible name. */
-  switchCompany: string;
-  /** The small heading over the list. */
-  heading: string;
-  /** The trigger's tooltip (and description), given the current company's name. */
-  current: (name: string) => string;
-  /** Read after the current company's name in the list, where the eye sees a check. */
-  currentMark: string;
-  /** Said while a switch is running. */
-  switching: string;
-}
-
-// Defined in ./company-switcher-labels, which holds no component code (0.34, KS U8).
-export { DEFAULT_COMPANY_SWITCHER_LABELS };
-
-/** One company the user belongs to — kastlan's `/auth/me` `companies[]` (§5.3). */
-export interface CompanySwitcherCompany<Id extends string | number = string | number> {
-  /** kastlan's ids are numbers; a string works the same. */
-  id: Id;
-  name: string;
-}
-
-export interface CompanySwitcherProps<Id extends string | number> {
-  /** Every company the user belongs to. With fewer than two there is nothing to
-   *  switch, and nothing renders. */
-  companies: readonly CompanySwitcherCompany<Id>[];
-  /** The company the session is in — `/auth/me`'s `current_company_id`. */
-  currentId: Id;
-  /**
-   * Another company was picked: `POST /auth/switch-company {company_id}`, store the
-   * fresh tokens, reload what is company-scoped. While the promise runs the switcher is
-   * disabled, so a second pick cannot race the first; a rejection frees it (the app
-   * says why). Picking the current company does nothing.
-   */
-  onSwitch: (id: Id) => Promise<unknown> | void;
-  /** The trigger's glyph. Default a building; keksdose's budgets would pass a wallet. */
-  icon?: ReactNode;
-  labels?: LabelOverride<CompanySwitcherLabels>;
-}
-
-/**
- * The company switcher in the top bar (docs/auth-harmonization.md §5.3, §8): a kastlan
- * user may belong to several companies, and the access token carries the current one,
- * so switching is a request for new tokens — `onSwitch`, the app's. Built on
- * {@link OptionSwitcherMenu}: the icon trigger, the current company
- * in its tooltip, the list with a check on the current one.
- *
- * **Only for more than one company** — a user in one company has nothing to switch, and
- * the top bar stays as it was. **Disabled while a switch runs**: the trigger is swapped
- * for a disabled one with a spinner (`aria-busy`), and "Switching company…" is said, so
- * a second pick cannot race the first. The kit never sends the request.
- *
- * A generic context switcher: the labels rename it ("Switch budget", "Budgets"), `icon`
- * replaces the building, and `id` may be a number (kastlan's) or a string.
- */
-export function CompanySwitcher<Id extends string | number>({
-  companies,
-  currentId,
-  onSwitch,
-  icon,
-  labels: labelsProp,
-}: CompanySwitcherProps<Id>) {
-  const labels = useKitLabels("companySwitcher", DEFAULT_COMPANY_SWITCHER_LABELS, labelsProp);
-  const [pending, setPending] = useState(false);
-  const { announce, regionProps } = useAnnounce();
-  if (companies.length < 2) return null;
-
-  const current = companies.find((c) => c.id === currentId);
-  const select = (value: string) => {
-    if (pending) return;
-    const picked = companies.find((c) => String(c.id) === value);
-    if (!picked || picked.id === currentId) return;
-    const result = onSwitch(picked.id);
-    if (typeof (result as PromiseLike<unknown> | undefined)?.then !== "function") return;
-    setPending(true);
-    announce(labels.switching);
-    (result as PromiseLike<unknown>).then(
-      () => setPending(false),
-      () => setPending(false),
-    );
-  };
-
-  return (
-    <>
-      {pending ? (
-        <button
-          type="button"
-          disabled
-          aria-busy="true"
-          aria-label={labels.switchCompany}
-          className={cn(TOPBAR_TRIGGER_CLASS, "cursor-wait opacity-60 hover:bg-transparent")}
-        >
-          <Spinner label={null} />
-        </button>
-      ) : (
-        <OptionSwitcherMenu<string>
-          aria-label={labels.switchCompany}
-          title={current ? labels.current(current.name) : undefined}
-          heading={labels.heading}
-          icon={icon ?? <Building2 className="size-5" />}
-          options={companies.map((c) => ({
-            value: String(c.id),
-            label:
-              c.id === currentId ? (
-                // `relative`: the sr-only mark needs a local containing block.
-                <span className="relative">
-                  {c.name}
-                  <span className="sr-only"> {labels.currentMark}</span>
-                </span>
-              ) : (
-                c.name
-              ),
-          }))}
-          value={String(currentId)}
-          onSelect={select}
-        />
-      )}
-      {/* Outside both triggers, so it survives the swap and is read when it changes. */}
-      <span {...regionProps} />
-    </>
-  );
-}

package/src/shell/dev-menu.tsx

@@ -1,257 +0,0 @@
-import { useState } from "react";
-import type { ReactNode } from "react";
-import { FlaskConical, Undo2 } from "lucide-react";
-import { DEFAULT_TOP_BAR_LABELS, useKitLabels, type LabelOverride } from "../i18n/kit-labels";
-import { TopBarActionMenu, type TopBarMenuEntry } from "./topbar-action-menu";
-import { useTopBarPartsLabels, type DevSwitchersLabels } from "./top-bar-parts-labels";
-// The kit's one storage guard, which 0.51 wrote here again by hand (DUP-8, refactor audit
-// 2026-10-30). Storage blocked, "Back to" lasts as long as this page.
-import { readSessionStored, writeSessionStored } from "../lib/safe-storage";
-
-/** Where the role the session started with is kept, unless the app names its own key. */
-export const DEV_ORIGINAL_ROLE_KEY = "ui-kit:dev-original-role";
-
-/**
- * One of the app's own groups in the {@link DevMenu} (docs/top-bar-harmonization.md
- * §2.7.1): keksdose's budget role, its "today" override, its resets.
- *
- * The rows are plain {@link TopBarMenuEntry}s, and there is no dev item type beside them
- * (the contract with keksdose, 0.51): a choice of one is radio rows (`checked`), a toggle
- * is a `checkable: "checkbox"` row, an action is a plain row. No form fields — a menu is
- * a `role="menu"`, where a text or date input has no place in the arrow keys; a free
- * value is a "Custom…" row that opens the app's own dialog.
- */
-export interface DevMenuSection {
-  /** Unique among the sections. The rows' keys need be unique only within theirs: the
-   *  menu prefixes them with this. */
-  key: string;
-  /** The group's heading, drawn above its rows and announced as the group's name. */
-  title: ReactNode;
-  /** The rows, as `TopBarActionMenu` takes them. A `divider` ends the group, as there. */
-  entries: readonly TopBarMenuEntry[];
-}
-
-export interface DevMenuProps<R extends string, P extends string> {
-  /**
-   * Draw anything at all. The app passes `import.meta.env.DEV` AND its probe of the dev
-   * route (§2.7.1): the constant keeps the menu off a production build's screen, the
-   * probe off a dev build whose server has the route shut (§6.1) — flasks with nothing
-   * behind them. Neither takes code out of the bundle; see `sections`.
-   */
-  enabled: boolean;
-  roles?: readonly R[];
-  /** The role the server enforces now. Named `currentRole`, not `role`, because `role` on
-   *  a JSX element is the ARIA role (as `RoleChip`'s `value`). */
-  currentRole?: R;
-  /** Apply a role — the app calls server-kit's `POST /dev/switch {role}` and re-reads
-   *  `/auth/me` (§2.7, §6.2). */
-  onRole?: (role: R) => void;
-  plans?: readonly P[];
-  /** The plan the server enforces now. Left out (not known yet — kastlan's overview is a
-   *  404 while billing is off), the plan group still renders, with no row checked; a
-   *  `GET /dev/switch` answers it. */
-  currentPlan?: P;
-  /** Apply a plan — `POST /dev/switch {plan}`, then the overview (§6.3). */
-  onPlan?: (plan: P) => void;
-  /**
-   * The role to offer "Back to {role}" for. Left out, the kit keeps it itself: the role
-   * before the first switch of this browser session, in `sessionStorage` under
-   * `storageKey` — the server answers with the NEW role after a switch, so only the
-   * browser still knows the old one.
-   */
-  originalRole?: R;
-  /** The `sessionStorage` key for the kept role. Default {@link DEV_ORIGINAL_ROLE_KEY};
-   *  an app with several accounts on one browser may scope it per user. */
-  storageKey?: string;
-  /** Billing is off locally: the plan group says plans change nothing, and stays usable
-   *  (§6.3). */
-  billingOff?: boolean;
-  /** A role's or a plan's words in the menu. Default: the value itself. */
-  roleLabel?: (role: R) => ReactNode;
-  planLabel?: (plan: P) => ReactNode;
-  /** Prop > `<UiKitProvider labels={{ topBarParts: { dev } }}>` > English. */
-  labels?: LabelOverride<DevSwitchersLabels>;
-  /** 0.51: the app's own dev groups, after the kit's role and plan, in this order. Their
-   *  DEFINITIONS belong in a module only a dev build imports (§2.7.1): `enabled={false}`
-   *  hides the menu, but the code of a section built inline stays in the bundle. */
-  sections?: readonly DevMenuSection[];
-  /**
-   * 0.51: an override is on that the developer could forget — a "today" that is not
-   * today, a simulated slow server. The flask wears a dot, and its name says so ("Dev
-   * tools · Role: ADMIN · Plan: free Overrides on"), since a dot alone tells a screen
-   * reader nothing. The app decides what counts; the kit cannot see into its sections.
-   */
-  active?: boolean;
-}
-
-const flask = <FlaskConical className="size-5 text-warning" />;
-
-/** A label's text for a sentence, or the raw value when the label is not text. */
-const textOf = (label: ReactNode, value: string) =>
-  typeof label === "string" || typeof label === "number" ? String(label) : value;
-
-/** A row someone can pick — what makes a menu worth drawing. */
-const isRow = (entry: TopBarMenuEntry) => entry.kind !== "heading" && entry.kind !== "divider";
-
-/**
- * The top bar's local-dev menu (docs/top-bar-harmonization.md §2.7, §2.7.1, §6.2, §6.3):
- * ONE amber flask over the kit's Account section and the app's own.
- *
- * 0.42's `DevSwitchers` drew a flask per switcher and had no place for anything else,
- * and an app has more dev controls than a role and a plan — keksdose's budget role, a
- * "today" override, resets (agreed with keksdose for 0.51). So the kit's part is now the
- * menu, and the app's rows go in it.
- *
- * - **The Account section** comes first: the role group, ending in "Back to {role}" once
- *   the role differs from the one the session started with (the dev route needs only a
- *   signed-in user, so a switch to a lesser role can always switch back); then the plan
- *   group, which with `billingOff` notes that plans change nothing. Each renders only
- *   with its list and handler.
- * - **The app's `sections`** follow, each a group under its own heading.
- * - **`active`** puts a dot on the flask for an override that is easy to forget.
- *
- * Nothing renders unless `enabled`, and nothing with no row to show. The panel scrolls
- * (`TopBarActionMenu`'s `scrollable`): some 25 rows ran off a 390×844 phone.
- *
- * From `md` up the groups stand side by side, one column each, in that order (0.51.4,
- * `TopBarActionMenu`'s `columns`; keksdose dev #640, Marcel: "Each group gets a column").
- * "Back to {role}" stays under the roles. A desktop too narrow for all of them wraps
- * the columns onto a second row; a phone keeps the one scrolling column.
- */
-export function DevMenu<R extends string, P extends string>({
-  enabled,
-  roles,
-  currentRole: role,
-  onRole,
-  plans,
-  currentPlan: plan,
-  onPlan,
-  originalRole,
-  storageKey = DEV_ORIGINAL_ROLE_KEY,
-  billingOff = false,
-  roleLabel = (r) => r,
-  planLabel = (p) => p,
-  labels: labelsProp,
-  sections = [],
-  active = false,
-}: DevMenuProps<R, P>) {
-  const bar = useKitLabels("topBar", DEFAULT_TOP_BAR_LABELS);
-  const words = useTopBarPartsLabels(labelsProp ? { dev: labelsProp } : undefined).dev;
-  const [kept, setKept] = useState<string | null>(() => (enabled ? readSessionStored(storageKey) : null));
-  // 0.43 (keksdose): `enabled` may start false and turn true — an app's GET probe of the
-  // dev route — so the kept role is read again then, or "Back to {role}" is lost after a
-  // reload. Adjusted during render, React's pattern for state that follows a prop.
-  const [wasEnabled, setWasEnabled] = useState(enabled);
-  if (wasEnabled !== enabled) {
-    setWasEnabled(enabled);
-    if (enabled) setKept(readSessionStored(storageKey));
-  }
-  if (!enabled) return null;
-
-  const original = (originalRole ?? kept ?? undefined) as R | undefined;
-
-  const pickRole = (next: R) => {
-    if (originalRole === undefined) {
-      if (next === original) {
-        // Back where the session began: nothing left to go back to.
-        writeSessionStored(storageKey, null);
-        setKept(null);
-      } else if (kept === null && role !== undefined && next !== role) {
-        writeSessionStored(storageKey, role);
-        setKept(role);
-      }
-    }
-    onRole?.(next);
-  };
-
-  const roleGroup: TopBarMenuEntry[] =
-    roles && roles.length > 0 && role !== undefined && onRole
-      ? [
-          { kind: "heading", key: "head-role", label: words.roleHeading },
-          ...roles.map((r): TopBarMenuEntry => ({
-            key: `role-${r}`,
-            label: roleLabel(r),
-            checked: r === role,
-            onSelect: () => pickRole(r),
-          })),
-          // Behind a rule, which ends the role group: "Back to" is a way out, not a role.
-          ...(original !== undefined && original !== role
-            ? ([
-                { kind: "divider", key: "sep-back" },
-                {
-                  key: "back",
-                  icon: <Undo2 className="size-4" />,
-                  label: words.backTo(textOf(roleLabel(original), original)),
-                  onSelect: () => pickRole(original),
-                },
-              ] satisfies TopBarMenuEntry[])
-            : []),
-        ]
-      : [];
-
-  const planGroup: TopBarMenuEntry[] =
-    plans && plans.length > 0 && onPlan
-      ? [
-          {
-            kind: "heading",
-            key: "head-plan",
-            // The billing-off note is part of the group's NAME, under the heading. In 0.42's
-            // own plan menu it was a trailing `<li>`: not a row, so the arrow keys passed
-            // over it and a screen reader moving through the menu never reached it. Named,
-            // it is read on the way into the plans. And in one menu a trailing note would
-            // sit under the app's sections, not under the plans.
-            label: billingOff ? (
-              <>
-                {words.planHeading}{" "}
-                <span
-                  data-dev-billing-off=""
-                  className="mt-0.5 block font-normal normal-case tracking-normal text-xs text-muted"
-                >
-                  {words.billingOff}
-                </span>
-              </>
-            ) : (
-              words.planHeading
-            ),
-          },
-          ...plans.map((p): TopBarMenuEntry => ({
-            key: `plan-${p}`,
-            label: planLabel(p),
-            checked: p === plan,
-            onSelect: () => onPlan(p),
-          })),
-        ]
-      : [];
-
-  // The app's rows keyed under their section: two sections may well both have a "reset".
-  const appGroups = sections.flatMap((section): TopBarMenuEntry[] => [
-    { kind: "heading", key: `section:${section.key}`, label: section.title },
-    ...section.entries.map((entry): TopBarMenuEntry => ({ ...entry, key: `${section.key}:${entry.key}` })),
-  ]);
-
-  const entries = [...roleGroup, ...planGroup, ...appGroups];
-  if (!entries.some(isRow)) return null;
-
-  // The menu, then the role and the plan, as 0.42's two triggers named them: the bar
-  // shows the flask only, so its name (and tooltip) is where they are read.
-  const name = [
-    words.menu,
-    roleGroup.length > 0 && role !== undefined ? bar.role(role) : null,
-    planGroup.length > 0 && plan !== undefined ? words.plan(plan) : null,
-  ]
-    .filter((part): part is string => part !== null)
-    .join(" · ");
-
-  return (
-    <TopBarActionMenu
-      icon={flask}
-      // The badge's words join the trigger's name, as the tours compass's NEW dot does.
-      // `danger`, the badge's default: an amber dot would vanish into the amber flask.
-      iconBadge={active ? { label: words.overridesOn } : null}
-      aria-label={name}
-      entries={entries}
-      scrollable
-      columns
-    />
-  );
-}

package/src/shell/fill-height.tsx

@@ -1,45 +0,0 @@
-import type { ComponentPropsWithRef } from "react";
-import { cn } from "../lib/cn";
-
-/**
- * The list page's fill, for an element between AppShell's `<main>` and a `fillHeight`
- * DataTable (0.40, docs/page-layout-harmonization.md §1.3): from `md` up, a flex column
- * that takes the rest of its parent — only while such a table is inside
- * (`has-[[data-fill-height]]`, the marker the table sets). Below `md`, and around
- * anything else, nothing: so a shell column may carry it for every route.
- *
- * No `min-h-0`, on purpose: a flex item's automatic minimum is its content's, and that
- * content counts the table's body at its 12rem floor, not at its rows. On a window too
- * short for the page's header and the floor, the page keeps that height and `<main>`
- * scrolls — with the page's own padding, which a `min-h-0` would push out of view.
- *
- * For a wrapper that is another component, or that merges other classes; otherwise
- * use {@link FillHeight}.
- */
-export const FILL_HEIGHT_CLASS =
-  "md:has-[[data-fill-height]]:flex md:has-[[data-fill-height]]:flex-1 md:has-[[data-fill-height]]:flex-col";
-
-/** A plain `div`'s props: `className` is merged after {@link FILL_HEIGHT_CLASS}, and
- *  `ref` reaches the `div`. */
-export type FillHeightProps = ComponentPropsWithRef<"div">;
-
-/**
- * A wrapper between AppShell's `<main>` and a `fillHeight` DataTable: from `md`, a flex
- * column that takes the rest of its parent — only while such a table is inside. Below
- * `md`, and around anything else, a plain `div`.
- *
- * Every element on the way is one: the page's root, and any wrapper between it and the
- * table (an `id` holder, a desktop-only wrapper — that one merges
- * {@link FILL_HEIGHT_CLASS} with its own classes). The page's header above the table
- * keeps its height; only the table's body scrolls.
- *
- * ```tsx
- * <FillHeight className="py-4 md:p-6">
- *   <PageHeader title="Payees" />
- *   <DataTable fillHeight rows={rows} columns={columns} rowKey={(r) => r.id} />
- * </FillHeight>
- * ```
- */
-export function FillHeight({ className, ...props }: FillHeightProps) {
-  return <div {...props} className={cn(FILL_HEIGHT_CLASS, className)} />;
-}

package/src/shell/language-code.ts

@@ -1,5 +0,0 @@
-/** "de-CH" → "DE": the language subtag in capitals, the code the language triggers show
- *  (0.49 KIT-10). Internal. */
-export function languageCodeLabel(code: string): string {
-  return code.split(/[-_]/)[0].toUpperCase();
-}