@eifi1/ui-kit 0.51.3 → 0.51.5

package/dist/shell/dev-menu.js

@@ -64,9 +64,12 @@ function DevMenu({
   };
   const roleGroup = roles && roles.length > 0 && role !== void 0 && onRole ? [
     { kind: "heading", key: "head-role", label: words.roleHeading },
-    ...roles.map(
-      (r) => ({ key: `role-${r}`, label: roleLabel(r), checked: r === role, onSelect: () => pickRole(r) })
-    ),
+    ...roles.map((r) => ({
+      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 !== void 0 && original !== role ? [
       { kind: "divider", key: "sep-back" },
@@ -100,9 +103,12 @@ function DevMenu({
         )
       ] }) : words.planHeading
     },
-    ...plans.map(
-      (p) => ({ key: `plan-${p}`, label: planLabel(p), checked: p === plan, onSelect: () => onPlan(p) })
-    )
+    ...plans.map((p) => ({
+      key: `plan-${p}`,
+      label: planLabel(p),
+      checked: p === plan,
+      onSelect: () => onPlan(p)
+    }))
   ] : [];
   const appGroups = sections.flatMap((section) => [
     { kind: "heading", key: `section:${section.key}`, label: section.title },
@@ -122,7 +128,8 @@ function DevMenu({
       iconBadge: active ? { label: words.overridesOn } : null,
       "aria-label": name,
       entries,
-      scrollable: true
+      scrollable: true,
+      columns: true
     }
   );
 }

package/dist/shell/dev-menu.js.map

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

package/dist/shell/option-switcher-menu.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/shell/option-switcher-menu.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Check } from \"lucide-react\";\nimport { HoverMenu } from \"../components/hover-menu\";\nimport { TOPBAR_MENU_ITEM_CLASS, TOPBAR_TRIGGER_CLASS } from \"./topbar-controls\";\nimport { Tooltip } from \"../components/tooltip\";\n\nexport interface OptionSwitcherOption<T extends string> {\n  value: T;\n  label: ReactNode;\n}\n\n/**\n * A top-bar hover menu that switches between a small set of options, with a\n * check on the active one and an optional heading. Generic glue over\n * {@link HoverMenu} — e.g. a dev role/impersonation switcher, an environment\n * picker. Controlled: the app owns `value` and `onSelect`.\n */\nexport function OptionSwitcherMenu<T extends string>({\n  icon,\n  \"aria-label\": ariaLabel,\n  title,\n  heading,\n  options,\n  value,\n  onSelect,\n}: {\n  icon: ReactNode;\n  /** Names the trigger and the menu. Required: the trigger is an icon (refactor audit\n   *  2026-10, API-1 — the `ariaLabel` spelling went in 0.35). */\n  \"aria-label\": string;\n  /** The trigger's tooltip. Default: `aria-label` (0.48) — the name, shown on hover and\n   *  focus. A different text also describes the trigger (`aria-describedby`). */\n  title?: string;\n  heading?: string;\n  options: OptionSwitcherOption<T>[];\n  value: T;\n  onSelect: (value: T) => void;\n}) {\n  return (\n    <HoverMenu\n      aria-label={ariaLabel}\n      trigger={({ toggle }) => {\n        const button = (\n          <button type=\"button\" onClick={toggle} aria-label={ariaLabel} className={TOPBAR_TRIGGER_CLASS}>\n            {icon}\n          </button>\n        );\n        // The name on hover and focus even without a `title` (0.48, keksdose dev#610). A\n        // bubble that repeats the name sits round the button in a fragment, as IconButton's\n        // does, so it does not describe the button by its own name — a reader heard \"Text\n        // size, button, Text size\". A `title` that says more still describes it.\n        const tip = title ?? ariaLabel;\n        return (\n          <Tooltip label={tip} portal>\n            {tip === ariaLabel ? <>{button}</> : button}\n          </Tooltip>\n        );\n      }}\n    >\n      {(close) => (\n        <ul className=\"py-1\">\n          {heading && (\n            <li className=\"px-3 py-1 text-micro font-semibold uppercase tracking-wide text-placeholder\">\n              {heading}\n            </li>\n          )}\n          {options.map((opt) => (\n            <li key={opt.value}>\n              <button\n                type=\"button\"\n                onClick={() => {\n                  onSelect(opt.value);\n                  close();\n                }}\n                className={TOPBAR_MENU_ITEM_CLASS}\n              >\n                <span>{opt.label}</span>\n                {value === opt.value && <Check className=\"size-4 text-secondary\" />}\n              </button>\n            </li>\n          ))}\n        </ul>\n      )}\n    </HoverMenu>\n  );\n}\n"],"mappings":";AA2CU,SAWuB,UAXvB,KAyBI,YAzBJ;AA1CV,SAAS,aAAa;AACtB,SAAS,iBAAiB;AAC1B,SAAS,wBAAwB,4BAA4B;AAC7D,SAAS,eAAe;AAajB,SAAS,mBAAqC;AAAA,EACnD;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAYG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAY;AAAA,MACZ,SAAS,CAAC,EAAE,OAAO,MAAM;AACvB,cAAM,SACJ,oBAAC,YAAO,MAAK,UAAS,SAAS,QAAQ,cAAY,WAAW,WAAW,sBACtE,gBACH;AAMF,cAAM,MAAM,SAAS;AACrB,eACE,oBAAC,WAAQ,OAAO,KAAK,QAAM,MACxB,kBAAQ,YAAY,gCAAG,kBAAO,IAAM,QACvC;AAAA,MAEJ;AAAA,MAEC,WAAC,UACA,qBAAC,QAAG,WAAU,QACX;AAAA,mBACC,oBAAC,QAAG,WAAU,+EACX,mBACH;AAAA,QAED,QAAQ,IAAI,CAAC,QACZ,oBAAC,QACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS,MAAM;AACb,uBAAS,IAAI,KAAK;AAClB,oBAAM;AAAA,YACR;AAAA,YACA,WAAW;AAAA,YAEX;AAAA,kCAAC,UAAM,cAAI,OAAM;AAAA,cAChB,UAAU,IAAI,SAAS,oBAAC,SAAM,WAAU,yBAAwB;AAAA;AAAA;AAAA,QACnE,KAXO,IAAI,KAYb,CACD;AAAA,SACH;AAAA;AAAA,EAEJ;AAEJ;","names":[]}
+{"version":3,"sources":["../../src/shell/option-switcher-menu.tsx"],"sourcesContent":["import type { ReactNode } from \"react\";\nimport { Check } from \"lucide-react\";\nimport { HoverMenu } from \"../components/hover-menu\";\nimport { TOPBAR_MENU_ITEM_CLASS, TOPBAR_TRIGGER_CLASS } from \"./topbar-controls\";\nimport { Tooltip } from \"../components/tooltip\";\n\nexport interface OptionSwitcherOption<T extends string> {\n  value: T;\n  label: ReactNode;\n}\n\n/**\n * A top-bar hover menu that switches between a small set of options, with a\n * check on the active one and an optional heading. Generic glue over\n * {@link HoverMenu} — e.g. a dev role/impersonation switcher, an environment\n * picker. Controlled: the app owns `value` and `onSelect`.\n */\nexport function OptionSwitcherMenu<T extends string>({\n  icon,\n  \"aria-label\": ariaLabel,\n  title,\n  heading,\n  options,\n  value,\n  onSelect,\n}: {\n  icon: ReactNode;\n  /** Names the trigger and the menu. Required: the trigger is an icon (refactor audit\n   *  2026-10, API-1 — the `ariaLabel` spelling went in 0.35). */\n  \"aria-label\": string;\n  /** The trigger's tooltip. Default: `aria-label` (0.48) — the name, shown on hover and\n   *  focus. A different text also describes the trigger (`aria-describedby`). */\n  title?: string;\n  heading?: string;\n  options: OptionSwitcherOption<T>[];\n  value: T;\n  onSelect: (value: T) => void;\n}) {\n  return (\n    <HoverMenu\n      aria-label={ariaLabel}\n      trigger={({ toggle }) => {\n        const button = (\n          <button type=\"button\" onClick={toggle} aria-label={ariaLabel} className={TOPBAR_TRIGGER_CLASS}>\n            {icon}\n          </button>\n        );\n        // The name on hover and focus even without a `title` (0.48, keksdose dev#610). A\n        // bubble that repeats the name sits round the button in a fragment, as IconButton's\n        // does, so it does not describe the button by its own name — a reader heard \"Text\n        // size, button, Text size\". A `title` that says more still describes it.\n        const tip = title ?? ariaLabel;\n        return (\n          <Tooltip label={tip} portal>\n            {tip === ariaLabel ? <>{button}</> : button}\n          </Tooltip>\n        );\n      }}\n    >\n      {(close) => (\n        <ul className=\"py-1\">\n          {heading && (\n            <li className=\"px-3 py-1 text-micro font-semibold uppercase tracking-wide text-placeholder\">{heading}</li>\n          )}\n          {options.map((opt) => (\n            <li key={opt.value}>\n              <button\n                type=\"button\"\n                onClick={() => {\n                  onSelect(opt.value);\n                  close();\n                }}\n                className={TOPBAR_MENU_ITEM_CLASS}\n              >\n                <span>{opt.label}</span>\n                {value === opt.value && <Check className=\"size-4 text-secondary\" />}\n              </button>\n            </li>\n          ))}\n        </ul>\n      )}\n    </HoverMenu>\n  );\n}\n"],"mappings":";AA2CU,SAWuB,UAXvB,KAuBI,YAvBJ;AA1CV,SAAS,aAAa;AACtB,SAAS,iBAAiB;AAC1B,SAAS,wBAAwB,4BAA4B;AAC7D,SAAS,eAAe;AAajB,SAAS,mBAAqC;AAAA,EACnD;AAAA,EACA,cAAc;AAAA,EACd;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AACF,GAYG;AACD,SACE;AAAA,IAAC;AAAA;AAAA,MACC,cAAY;AAAA,MACZ,SAAS,CAAC,EAAE,OAAO,MAAM;AACvB,cAAM,SACJ,oBAAC,YAAO,MAAK,UAAS,SAAS,QAAQ,cAAY,WAAW,WAAW,sBACtE,gBACH;AAMF,cAAM,MAAM,SAAS;AACrB,eACE,oBAAC,WAAQ,OAAO,KAAK,QAAM,MACxB,kBAAQ,YAAY,gCAAG,kBAAO,IAAM,QACvC;AAAA,MAEJ;AAAA,MAEC,WAAC,UACA,qBAAC,QAAG,WAAU,QACX;AAAA,mBACC,oBAAC,QAAG,WAAU,+EAA+E,mBAAQ;AAAA,QAEtG,QAAQ,IAAI,CAAC,QACZ,oBAAC,QACC;AAAA,UAAC;AAAA;AAAA,YACC,MAAK;AAAA,YACL,SAAS,MAAM;AACb,uBAAS,IAAI,KAAK;AAClB,oBAAM;AAAA,YACR;AAAA,YACA,WAAW;AAAA,YAEX;AAAA,kCAAC,UAAM,cAAI,OAAM;AAAA,cAChB,UAAU,IAAI,SAAS,oBAAC,SAAM,WAAU,yBAAwB;AAAA;AAAA;AAAA,QACnE,KAXO,IAAI,KAYb,CACD;AAAA,SACH;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/shell/sync-status-indicator.js

@@ -62,10 +62,7 @@ function SyncStatusIndicator({
     };
   }, []);
   const onlineOnly = storage === "none";
-  const state = syncState(
-    onlineOnly ? { ...status, pending: 0, blocked: 0, waitingForPlan: 0 } : status,
-    refreshing
-  );
+  const state = syncState(onlineOnly ? { ...status, pending: 0, blocked: 0, waitingForPlan: 0 } : status, refreshing);
   const data = dataAttributes(rest);
   if (hideWhenIdle && state === "synced") return null;
   const { Icon, tone } = LOOK[state];
@@ -142,7 +139,10 @@ function SyncStatusIndicator({
       ...data,
       role: "status",
       "data-sync-state": state,
-      className: cn("relative inline-flex size-9 shrink-0 items-center justify-center [&>svg]:size-5", TEXT_TONE[tone]),
+      className: cn(
+        "relative inline-flex size-9 shrink-0 items-center justify-center [&>svg]:size-5",
+        TEXT_TONE[tone]
+      ),
       children: [
         glyph,
         /* @__PURE__ */ jsx("span", { className: "sr-only", children: name }),
@@ -157,7 +157,8 @@ function SyncStatusIndicator({
       ]
     }
   ) });
-  if (!showLabel || !short) return className ? /* @__PURE__ */ jsx("span", { className: cn("inline-flex", className), children: control }) : control;
+  if (!showLabel || !short)
+    return className ? /* @__PURE__ */ jsx("span", { className: cn("inline-flex", className), children: control }) : control;
   return /* @__PURE__ */ jsxs("span", { className: cn("inline-flex items-center gap-1", className), children: [
     control,
     /* @__PURE__ */ jsx("span", { "aria-hidden": true, className: cn("whitespace-nowrap text-xs font-medium", TEXT_TONE[tone]), children: short })

package/dist/shell/sync-status-indicator.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/shell/sync-status-indicator.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport type { ComponentType } from \"react\";\nimport { Check, Cloud, CloudAlert, CloudOff, RefreshCw, UploadCloud } from \"lucide-react\";\nimport type { LucideProps } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { IconButton } from \"../components/icon-button\";\nimport { Tooltip } from \"../components/tooltip\";\nimport { useBillingLabels } from \"../billing/billing-labels\";\nimport { useKitLocale, type LabelOverride } from \"../i18n/kit-labels\";\nimport { useTopBarPartsLabels, type SyncStatusLabels } from \"./top-bar-parts-labels\";\n\n/**\n * What the indicator shows, fed by the app's sync engine (docs/top-bar-harmonization.md\n * §2.6). Small on purpose: keksdose's sync-status store, kastlan's handover controller and\n * Kurvenschmiede's online state + `useIsMutating` all fill it.\n */\nexport interface SyncStatus {\n  /** What the engine is doing. `offline` is the engine's own verdict; `online: false` is\n   *  the browser's — either shows the offline state. */\n  phase: \"idle\" | \"syncing\" | \"offline\" | \"error\";\n  /** The browser's `navigator.onLine` (or the app's better guess). */\n  online: boolean;\n  /** Writes kept on this device and not yet sent. */\n  pending: number;\n  /** Writes this device cannot send at all (keksdose: no key for the budget). Ranked first. */\n  blocked?: number;\n  /** Writes the server refused as read-only and keeps until a plan (billing §12.5). */\n  waitingForPlan?: number;\n  /** When the last good round ended — epoch ms, an ISO string or a `Date`. */\n  lastSyncedAt?: number | string | Date | null;\n}\n\n/** The seven states, in their ranking: the first that holds wins. */\nexport type SyncState = \"blocked\" | \"waitingForPlan\" | \"offline\" | \"error\" | \"syncing\" | \"pending\" | \"synced\";\n\n/**\n * Which of the seven states a {@link SyncStatus} is in — keksdose's ranking\n * (sync-status-indicator.tsx): a write that cannot be sent at all ranks above everything,\n * because waiting cannot help it; then one waiting for a plan; then offline; then a refused\n * round; then a round under way; then writes waiting; else in sync. `syncing` also holds\n * while a tap's own round runs (`refreshing`), before the engine publishes its phase.\n */\nexport function syncState(status: SyncStatus, refreshing = false): SyncState {\n  if ((status.blocked ?? 0) > 0) return \"blocked\";\n  if ((status.waitingForPlan ?? 0) > 0) return \"waitingForPlan\";\n  if (!status.online || status.phase === \"offline\") return \"offline\";\n  if (status.phase === \"error\") return \"error\";\n  if (status.phase === \"syncing\" || refreshing) return \"syncing\";\n  if (status.pending > 0) return \"pending\";\n  return \"synced\";\n}\n\ntype Tone = \"danger\" | \"warning\" | \"info\" | \"success\";\n\nconst LOOK: Record<SyncState, { Icon: ComponentType<LucideProps>; tone: Tone }> = {\n  // The one the user must act on: the kit's danger, where keksdose had rose.\n  blocked: { Icon: CloudAlert, tone: \"danger\" },\n  // Safe, and a payment sends them: amber, the kit's warning.\n  waitingForPlan: { Icon: CloudAlert, tone: \"warning\" },\n  offline: { Icon: CloudOff, tone: \"warning\" },\n  // Usually resolves by itself (a deploy, a read-only view): amber, not danger.\n  error: { Icon: CloudAlert, tone: \"warning\" },\n  syncing: { Icon: RefreshCw, tone: \"info\" },\n  pending: { Icon: UploadCloud, tone: \"warning\" },\n  synced: { Icon: Cloud, tone: \"success\" },\n};\n\nconst TEXT_TONE: Record<Tone, string> = {\n  danger: \"text-danger\",\n  warning: \"text-warning\",\n  info: \"text-info\",\n  success: \"text-success\",\n};\n\n/** The scope words of an indicator that covers only part of the app (§6.10). */\nexport interface SyncStatusScope {\n  /** Put before every state in the tooltip: \"Handovers on this device\" →\n   *  \"Handovers on this device: 3 changes waiting to sync\". */\n  name: string;\n  /** The whole offline sentence instead of the kit's, when offline means something\n   *  narrower: \"Offline: handovers keep working on this device; everything else needs a\n   *  connection\". */\n  offline?: string;\n}\n\nexport interface SyncStatusIndicatorProps {\n  status: SyncStatus;\n  /**\n   * Run a round now (push, then pull, then re-read what is on screen). With it the\n   * indicator is a \"sync now\" button, disabled offline and mid-round but keeping its\n   * colour; a returned promise keeps the spin until it settles. Without it, a status only\n   * (§6.9).\n   */\n  onSync?: () => void | Promise<unknown>;\n  /** Render nothing while in sync — kastlan and Kurvenschmiede show it only while offline,\n   *  syncing or with changes waiting, held or refused (§2.6). */\n  hideWhenIdle?: boolean;\n  /** The app's words for its part of the app (§6.10). */\n  scope?: SyncStatusScope;\n  /**\n   * Where the app keeps a change before the server has it. `\"device\"` (the default): an\n   * offline-first app (keksdose, kastlan's handovers) — offline means \"kept here, sent\n   * later\". `\"none\"`: an online-only app that keeps nothing on the device (Kurvenschmiede,\n   * build review B1) — offline reads \"changes can't be saved until you reconnect\", a\n   * round reads \"Saving…\", and `pending`, `blocked` and `waitingForPlan` are ignored,\n   * since there is nowhere for a change to wait. \"Up to date\" when settled.\n   */\n  storage?: \"device\" | \"none\";\n  /** Short words beside the cloud (\"Offline\", \"Syncing…\", \"3 waiting\") while not in sync. */\n  showLabel?: boolean;\n  /** Prop > `<UiKitProvider labels={{ topBarParts: { sync } }}>` > English. */\n  labels?: LabelOverride<SyncStatusLabels>;\n  /** The clock's language for \"Synced at 14:05\". Default: the provider's locale. */\n  locale?: string;\n  className?: string;\n  /** `data-*` attributes go on the trigger — a tour's anchor (`data-tour=\"sync-status\"`). */\n  [key: `data-${string}`]: string | number | boolean | undefined;\n}\n\n/** The `data-*` attributes of a rest object, for a trigger. */\nfunction dataAttributes(rest: Record<string, unknown>): Record<string, unknown> {\n  return Object.fromEntries(Object.entries(rest).filter(([k]) => k.startsWith(\"data-\")));\n}\n\n/**\n * The top bar's sync status (docs/top-bar-harmonization.md §2.6), lifted from keksdose's\n * `SyncStatusIndicator`: the seven states and their ranking ({@link syncState}), one cloud\n * per state, a ✓ badge when in sync and a spin while syncing. With `onSync` it is also the\n * \"sync now\" button, and its name says both what it is and what a tap does.\n *\n * Colours are the kit's roles — danger for a write that cannot be sent, warning for\n * anything waiting, info while syncing, success when in sync — where keksdose had raw\n * rose/amber/sky/emerald pairs.\n */\nexport function SyncStatusIndicator({\n  status,\n  onSync,\n  hideWhenIdle = false,\n  scope,\n  showLabel = false,\n  labels: labelsProp,\n  locale: localeProp,\n  className,\n  storage = \"device\",\n  ...rest\n}: SyncStatusIndicatorProps) {\n  const words = useTopBarPartsLabels(labelsProp ? { sync: labelsProp } : undefined).sync;\n  const billing = useBillingLabels();\n  const locale = useKitLocale(localeProp);\n  // The tap's own round, local rather than in the app's store: the store's phase belongs\n  // to the sync engine, and a second writer would race the round itself.\n  const [refreshing, setRefreshing] = useState(false);\n  const mounted = useRef(true);\n  useEffect(() => {\n    mounted.current = true;\n    return () => {\n      mounted.current = false;\n    };\n  }, []);\n\n  const onlineOnly = storage === \"none\";\n  // Online-only: nothing waits on the device, so only offline, error, saving and settled.\n  const state = syncState(\n    onlineOnly ? { ...status, pending: 0, blocked: 0, waitingForPlan: 0 } : status,\n    refreshing,\n  );\n  const data = dataAttributes(rest);\n  if (hideWhenIdle && state === \"synced\") return null;\n\n  const { Icon, tone } = LOOK[state];\n  const spin = state === \"syncing\";\n  let text: string;\n  switch (state) {\n    case \"blocked\":\n      text = words.blocked(status.blocked ?? 0);\n      break;\n    case \"waitingForPlan\":\n      text = billing.waitingChanges(status.waitingForPlan ?? 0);\n      break;\n    case \"offline\":\n      text = onlineOnly ? words.offlineUnsaved : words.offline;\n      break;\n    case \"error\":\n      text = words.refused;\n      break;\n    case \"syncing\":\n      text = onlineOnly ? words.saving : words.syncing;\n      break;\n    case \"pending\":\n      text = words.pending(status.pending);\n      break;\n    default:\n      text = !onlineOnly && status.lastSyncedAt\n        ? words.syncedAt(\n            // A clock time in the UI's language, never the browser's (keksdose live #246).\n            new Date(status.lastSyncedAt).toLocaleTimeString(locale, { hour: \"2-digit\", minute: \"2-digit\" }),\n          )\n        : words.idle;\n  }\n  if (scope) {\n    text = state === \"offline\" && scope.offline ? scope.offline : words.scoped(scope.name, text);\n  }\n\n  const short =\n    state === \"offline\"\n      ? words.offlineShort\n      : state === \"syncing\"\n        ? onlineOnly\n          ? words.saving\n          : words.syncingShort\n        : state === \"error\"\n          ? words.refusedShort\n          : state === \"pending\" || state === \"blocked\" || state === \"waitingForPlan\"\n            ? words.waitingShort(\n                state === \"pending\"\n                  ? status.pending\n                  : state === \"blocked\"\n                    ? (status.blocked ?? 0)\n                    : (status.waitingForPlan ?? 0),\n              )\n            : null;\n\n  const offline = state === \"offline\";\n  const canSync = !!onSync && status.online && status.phase !== \"offline\" && !spin;\n  const name = onSync\n    ? canSync\n      ? words.withHint(text, words.syncHint)\n      : offline\n        ? words.withHint(text, words.offlineHint)\n        : text\n    : text;\n  const badge = state === \"synced\" ? <Check className=\"stroke-[3]\" /> : undefined;\n  const glyph = <Icon aria-hidden className={spin ? \"animate-spin\" : undefined} />;\n\n  const sync = async () => {\n    if (!canSync || !onSync) return;\n    setRefreshing(true);\n    try {\n      await onSync();\n    } finally {\n      if (mounted.current) setRefreshing(false);\n    }\n  };\n\n  const control = onSync ? (\n    <IconButton\n      {...data}\n      data-sync-state={state}\n      size=\"2xs\"\n      glyphSize={20}\n      shape=\"round\"\n      // A status that is also an action: disabled (offline, mid-round) is exactly when\n      // the state matters most, so it keeps its colour.\n      disabledStyle=\"keep\"\n      tone={tone}\n      quiet={false}\n      label={name}\n      labelVisible={false}\n      // Below: the bar is at the top edge, where a bubble above has no room.\n      tooltipSide=\"bottom\"\n      onClick={() => void sync()}\n      disabled={!canSync}\n      // It announces itself as a status: a reader hears the state change.\n      aria-live=\"polite\"\n      badge={badge}\n    >\n      {glyph}\n    </IconButton>\n  ) : (\n    <Tooltip label={name} side=\"bottom\">\n      <span\n        {...data}\n        role=\"status\"\n        data-sync-state={state}\n        className={cn(\"relative inline-flex size-9 shrink-0 items-center justify-center [&>svg]:size-5\", TEXT_TONE[tone])}\n      >\n        {glyph}\n        <span className=\"sr-only\">{name}</span>\n        {badge && (\n          <span\n            aria-hidden\n            className=\"pointer-events-none absolute bottom-1.5 end-1.5 inline-flex rounded-full bg-surface [&_svg]:size-3\"\n          >\n            {badge}\n          </span>\n        )}\n      </span>\n    </Tooltip>\n  );\n\n  if (!showLabel || !short) return className ? <span className={cn(\"inline-flex\", className)}>{control}</span> : control;\n  return (\n    <span className={cn(\"inline-flex items-center gap-1\", className)}>\n      {control}\n      {/* The eye's short words; the name above already says it in full. */}\n      <span aria-hidden className={cn(\"whitespace-nowrap text-xs font-medium\", TEXT_TONE[tone])}>\n        {short}\n      </span>\n    </span>\n  );\n}\n"],"mappings":"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","names":[]}
+{"version":3,"sources":["../../src/shell/sync-status-indicator.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport type { ComponentType } from \"react\";\nimport { Check, Cloud, CloudAlert, CloudOff, RefreshCw, UploadCloud } from \"lucide-react\";\nimport type { LucideProps } from \"lucide-react\";\nimport { cn } from \"../lib/cn\";\nimport { IconButton } from \"../components/icon-button\";\nimport { Tooltip } from \"../components/tooltip\";\nimport { useBillingLabels } from \"../billing/billing-labels\";\nimport { useKitLocale, type LabelOverride } from \"../i18n/kit-labels\";\nimport { useTopBarPartsLabels, type SyncStatusLabels } from \"./top-bar-parts-labels\";\n\n/**\n * What the indicator shows, fed by the app's sync engine (docs/top-bar-harmonization.md\n * §2.6). Small on purpose: keksdose's sync-status store, kastlan's handover controller and\n * Kurvenschmiede's online state + `useIsMutating` all fill it.\n */\nexport interface SyncStatus {\n  /** What the engine is doing. `offline` is the engine's own verdict; `online: false` is\n   *  the browser's — either shows the offline state. */\n  phase: \"idle\" | \"syncing\" | \"offline\" | \"error\";\n  /** The browser's `navigator.onLine` (or the app's better guess). */\n  online: boolean;\n  /** Writes kept on this device and not yet sent. */\n  pending: number;\n  /** Writes this device cannot send at all (keksdose: no key for the budget). Ranked first. */\n  blocked?: number;\n  /** Writes the server refused as read-only and keeps until a plan (billing §12.5). */\n  waitingForPlan?: number;\n  /** When the last good round ended — epoch ms, an ISO string or a `Date`. */\n  lastSyncedAt?: number | string | Date | null;\n}\n\n/** The seven states, in their ranking: the first that holds wins. */\nexport type SyncState = \"blocked\" | \"waitingForPlan\" | \"offline\" | \"error\" | \"syncing\" | \"pending\" | \"synced\";\n\n/**\n * Which of the seven states a {@link SyncStatus} is in — keksdose's ranking\n * (sync-status-indicator.tsx): a write that cannot be sent at all ranks above everything,\n * because waiting cannot help it; then one waiting for a plan; then offline; then a refused\n * round; then a round under way; then writes waiting; else in sync. `syncing` also holds\n * while a tap's own round runs (`refreshing`), before the engine publishes its phase.\n */\nexport function syncState(status: SyncStatus, refreshing = false): SyncState {\n  if ((status.blocked ?? 0) > 0) return \"blocked\";\n  if ((status.waitingForPlan ?? 0) > 0) return \"waitingForPlan\";\n  if (!status.online || status.phase === \"offline\") return \"offline\";\n  if (status.phase === \"error\") return \"error\";\n  if (status.phase === \"syncing\" || refreshing) return \"syncing\";\n  if (status.pending > 0) return \"pending\";\n  return \"synced\";\n}\n\ntype Tone = \"danger\" | \"warning\" | \"info\" | \"success\";\n\nconst LOOK: Record<SyncState, { Icon: ComponentType<LucideProps>; tone: Tone }> = {\n  // The one the user must act on: the kit's danger, where keksdose had rose.\n  blocked: { Icon: CloudAlert, tone: \"danger\" },\n  // Safe, and a payment sends them: amber, the kit's warning.\n  waitingForPlan: { Icon: CloudAlert, tone: \"warning\" },\n  offline: { Icon: CloudOff, tone: \"warning\" },\n  // Usually resolves by itself (a deploy, a read-only view): amber, not danger.\n  error: { Icon: CloudAlert, tone: \"warning\" },\n  syncing: { Icon: RefreshCw, tone: \"info\" },\n  pending: { Icon: UploadCloud, tone: \"warning\" },\n  synced: { Icon: Cloud, tone: \"success\" },\n};\n\nconst TEXT_TONE: Record<Tone, string> = {\n  danger: \"text-danger\",\n  warning: \"text-warning\",\n  info: \"text-info\",\n  success: \"text-success\",\n};\n\n/** The scope words of an indicator that covers only part of the app (§6.10). */\nexport interface SyncStatusScope {\n  /** Put before every state in the tooltip: \"Handovers on this device\" →\n   *  \"Handovers on this device: 3 changes waiting to sync\". */\n  name: string;\n  /** The whole offline sentence instead of the kit's, when offline means something\n   *  narrower: \"Offline: handovers keep working on this device; everything else needs a\n   *  connection\". */\n  offline?: string;\n}\n\nexport interface SyncStatusIndicatorProps {\n  status: SyncStatus;\n  /**\n   * Run a round now (push, then pull, then re-read what is on screen). With it the\n   * indicator is a \"sync now\" button, disabled offline and mid-round but keeping its\n   * colour; a returned promise keeps the spin until it settles. Without it, a status only\n   * (§6.9).\n   */\n  onSync?: () => void | Promise<unknown>;\n  /** Render nothing while in sync — kastlan and Kurvenschmiede show it only while offline,\n   *  syncing or with changes waiting, held or refused (§2.6). */\n  hideWhenIdle?: boolean;\n  /** The app's words for its part of the app (§6.10). */\n  scope?: SyncStatusScope;\n  /**\n   * Where the app keeps a change before the server has it. `\"device\"` (the default): an\n   * offline-first app (keksdose, kastlan's handovers) — offline means \"kept here, sent\n   * later\". `\"none\"`: an online-only app that keeps nothing on the device (Kurvenschmiede,\n   * build review B1) — offline reads \"changes can't be saved until you reconnect\", a\n   * round reads \"Saving…\", and `pending`, `blocked` and `waitingForPlan` are ignored,\n   * since there is nowhere for a change to wait. \"Up to date\" when settled.\n   */\n  storage?: \"device\" | \"none\";\n  /** Short words beside the cloud (\"Offline\", \"Syncing…\", \"3 waiting\") while not in sync. */\n  showLabel?: boolean;\n  /** Prop > `<UiKitProvider labels={{ topBarParts: { sync } }}>` > English. */\n  labels?: LabelOverride<SyncStatusLabels>;\n  /** The clock's language for \"Synced at 14:05\". Default: the provider's locale. */\n  locale?: string;\n  className?: string;\n  /** `data-*` attributes go on the trigger — a tour's anchor (`data-tour=\"sync-status\"`). */\n  [key: `data-${string}`]: string | number | boolean | undefined;\n}\n\n/** The `data-*` attributes of a rest object, for a trigger. */\nfunction dataAttributes(rest: Record<string, unknown>): Record<string, unknown> {\n  return Object.fromEntries(Object.entries(rest).filter(([k]) => k.startsWith(\"data-\")));\n}\n\n/**\n * The top bar's sync status (docs/top-bar-harmonization.md §2.6), lifted from keksdose's\n * `SyncStatusIndicator`: the seven states and their ranking ({@link syncState}), one cloud\n * per state, a ✓ badge when in sync and a spin while syncing. With `onSync` it is also the\n * \"sync now\" button, and its name says both what it is and what a tap does.\n *\n * Colours are the kit's roles — danger for a write that cannot be sent, warning for\n * anything waiting, info while syncing, success when in sync — where keksdose had raw\n * rose/amber/sky/emerald pairs.\n */\nexport function SyncStatusIndicator({\n  status,\n  onSync,\n  hideWhenIdle = false,\n  scope,\n  showLabel = false,\n  labels: labelsProp,\n  locale: localeProp,\n  className,\n  storage = \"device\",\n  ...rest\n}: SyncStatusIndicatorProps) {\n  const words = useTopBarPartsLabels(labelsProp ? { sync: labelsProp } : undefined).sync;\n  const billing = useBillingLabels();\n  const locale = useKitLocale(localeProp);\n  // The tap's own round, local rather than in the app's store: the store's phase belongs\n  // to the sync engine, and a second writer would race the round itself.\n  const [refreshing, setRefreshing] = useState(false);\n  const mounted = useRef(true);\n  useEffect(() => {\n    mounted.current = true;\n    return () => {\n      mounted.current = false;\n    };\n  }, []);\n\n  const onlineOnly = storage === \"none\";\n  // Online-only: nothing waits on the device, so only offline, error, saving and settled.\n  const state = syncState(onlineOnly ? { ...status, pending: 0, blocked: 0, waitingForPlan: 0 } : status, refreshing);\n  const data = dataAttributes(rest);\n  if (hideWhenIdle && state === \"synced\") return null;\n\n  const { Icon, tone } = LOOK[state];\n  const spin = state === \"syncing\";\n  let text: string;\n  switch (state) {\n    case \"blocked\":\n      text = words.blocked(status.blocked ?? 0);\n      break;\n    case \"waitingForPlan\":\n      text = billing.waitingChanges(status.waitingForPlan ?? 0);\n      break;\n    case \"offline\":\n      text = onlineOnly ? words.offlineUnsaved : words.offline;\n      break;\n    case \"error\":\n      text = words.refused;\n      break;\n    case \"syncing\":\n      text = onlineOnly ? words.saving : words.syncing;\n      break;\n    case \"pending\":\n      text = words.pending(status.pending);\n      break;\n    default:\n      text =\n        !onlineOnly && status.lastSyncedAt\n          ? words.syncedAt(\n              // A clock time in the UI's language, never the browser's (keksdose live #246).\n              new Date(status.lastSyncedAt).toLocaleTimeString(locale, { hour: \"2-digit\", minute: \"2-digit\" }),\n            )\n          : words.idle;\n  }\n  if (scope) {\n    text = state === \"offline\" && scope.offline ? scope.offline : words.scoped(scope.name, text);\n  }\n\n  const short =\n    state === \"offline\"\n      ? words.offlineShort\n      : state === \"syncing\"\n        ? onlineOnly\n          ? words.saving\n          : words.syncingShort\n        : state === \"error\"\n          ? words.refusedShort\n          : state === \"pending\" || state === \"blocked\" || state === \"waitingForPlan\"\n            ? words.waitingShort(\n                state === \"pending\"\n                  ? status.pending\n                  : state === \"blocked\"\n                    ? (status.blocked ?? 0)\n                    : (status.waitingForPlan ?? 0),\n              )\n            : null;\n\n  const offline = state === \"offline\";\n  const canSync = !!onSync && status.online && status.phase !== \"offline\" && !spin;\n  const name = onSync\n    ? canSync\n      ? words.withHint(text, words.syncHint)\n      : offline\n        ? words.withHint(text, words.offlineHint)\n        : text\n    : text;\n  const badge = state === \"synced\" ? <Check className=\"stroke-[3]\" /> : undefined;\n  const glyph = <Icon aria-hidden className={spin ? \"animate-spin\" : undefined} />;\n\n  const sync = async () => {\n    if (!canSync || !onSync) return;\n    setRefreshing(true);\n    try {\n      await onSync();\n    } finally {\n      if (mounted.current) setRefreshing(false);\n    }\n  };\n\n  const control = onSync ? (\n    <IconButton\n      {...data}\n      data-sync-state={state}\n      size=\"2xs\"\n      glyphSize={20}\n      shape=\"round\"\n      // A status that is also an action: disabled (offline, mid-round) is exactly when\n      // the state matters most, so it keeps its colour.\n      disabledStyle=\"keep\"\n      tone={tone}\n      quiet={false}\n      label={name}\n      labelVisible={false}\n      // Below: the bar is at the top edge, where a bubble above has no room.\n      tooltipSide=\"bottom\"\n      onClick={() => void sync()}\n      disabled={!canSync}\n      // It announces itself as a status: a reader hears the state change.\n      aria-live=\"polite\"\n      badge={badge}\n    >\n      {glyph}\n    </IconButton>\n  ) : (\n    <Tooltip label={name} side=\"bottom\">\n      <span\n        {...data}\n        role=\"status\"\n        data-sync-state={state}\n        className={cn(\n          \"relative inline-flex size-9 shrink-0 items-center justify-center [&>svg]:size-5\",\n          TEXT_TONE[tone],\n        )}\n      >\n        {glyph}\n        <span className=\"sr-only\">{name}</span>\n        {badge && (\n          <span\n            aria-hidden\n            className=\"pointer-events-none absolute bottom-1.5 end-1.5 inline-flex rounded-full bg-surface [&_svg]:size-3\"\n          >\n            {badge}\n          </span>\n        )}\n      </span>\n    </Tooltip>\n  );\n\n  if (!showLabel || !short)\n    return className ? <span className={cn(\"inline-flex\", className)}>{control}</span> : control;\n  return (\n    <span className={cn(\"inline-flex items-center gap-1\", className)}>\n      {control}\n      {/* The eye's short words; the name above already says it in full. */}\n      <span aria-hidden className={cn(\"whitespace-nowrap text-xs font-medium\", TEXT_TONE[tone])}>\n        {short}\n      </span>\n    </span>\n  );\n}\n"],"mappings":"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","names":[]}

package/dist/shell/top-bar-parts-labels.js.map

@@ -1 +1 @@
-{"version":3,"sources":["../../src/shell/top-bar-parts-labels.ts"],"sourcesContent":["import { useKitLabels, type LabelOverride } from \"../i18n/kit-labels\";\n\n/**\n * The `topBarParts` namespace (0.42, docs/top-bar-harmonization.md §3.1): the words of the\n * top bar's shared parts — `TourMenu`, `SyncStatusIndicator` and `DevMenu` (0.42's\n * `DevSwitchers`, whose words these still are, §2.7.1). A module\n * of words with no component code, like every `*-labels.ts` (0.34, KS U8). The language\n * sub-list (`AccountMenuLanguage`) names itself with `topBar.language`, and the role in the\n * dev flask's name is `topBar.role`, as `RoleSwitcher`'s tooltip.\n */\n\n/** `TourMenu`'s words (§2.4). */\nexport interface TourMenuLabels {\n  /** The compass's name, and the menu's. */\n  menu: string;\n  /** The NEW dot on the compass, for a reader: it joins the trigger's name. */\n  newDot: string;\n  /** The heading over the tours that start on the open page. */\n  thisPage: string;\n  /** The heading over the untaken new tours. */\n  newTours: string;\n  /** The last row, the way to the app's tours page (only with `href`). */\n  allTours: string;\n  /** The chip on a new tour's row. */\n  badgeNew: string;\n  /** What the ✓ on a taken tour's row says to a reader. */\n  completed: string;\n  /** The chip on a tour reset by an update (0.43, docs/tours-harmonization.md §8). */\n  badgeUpdated: string;\n  /** The dot on the compass while only updated tours light it, for a reader. */\n  updatedDot: string;\n  /** The heading over the untaken new tours when updated ones are among them. */\n  newAndUpdated: string;\n}\n\n/** `SyncStatusIndicator`'s words (§2.6). The \"waiting for a plan\" state is\n *  `billing.waitingChanges`, the kit's words for it since billing §12.5. */\nexport interface SyncStatusLabels {\n  /** Writes this device cannot send (keksdose: no key for the budget). Ranked first. */\n  blocked: (count: number) => string;\n  offline: string;\n  /** The server refused the last round. */\n  refused: string;\n  syncing: string;\n  pending: (count: number) => string;\n  /** Settled, with the time of the last good round (already formatted). */\n  syncedAt: (time: string) => string;\n  /** Settled, before the first round. */\n  idle: string;\n  /** Joined to the state when a tap syncs: what the tap does. */\n  syncHint: string;\n  /** Joined to the state while offline, when a tap can do nothing. */\n  offlineHint: string;\n  /** The state and what a tap does, as one tooltip: \"Offline — nothing to sync…\". */\n  withHint: (state: string, hint: string) => string;\n  /** The state with the app's `scope` words before it: \"Handovers on this device: …\". */\n  scoped: (scope: string, state: string) => string;\n  /** The short words beside the cloud (`showLabel`): offline. */\n  offlineShort: string;\n  /** The short words while syncing. */\n  syncingShort: string;\n  /** The short words while changes wait (pending, held for a plan, or blocked). */\n  waitingShort: (count: number) => string;\n  /** The short words after a refused round. */\n  refusedShort: string;\n  /** Offline in an online-only app (`storage=\"none\"`): nothing is kept on the device. */\n  offlineUnsaved: string;\n  /** A round under way in an online-only app — it saves, it doesn't sync. Also its short\n   *  words beside the cloud. */\n  saving: string;\n}\n\n/**\n * `DevMenu`'s words (§2.7, §2.7.1, §6.2, §6.3). Still named for 0.42's `DevSwitchers`: the\n * namespace is the same `topBarParts.dev`, and an app's label tree keeps compiling.\n */\nexport interface DevSwitchersLabels {\n  /** 0.51: the flask's name, and the menu's — the role and the plan follow it. */\n  menu: string;\n  /** 0.51: what the dot on the flask means while `active`, joined to its name — an\n   *  override the developer could forget is on (a \"today\", a slow server). */\n  overridesOn: string;\n  /** The heading of the role group. */\n  roleHeading: string;\n  /** @deprecated 0.51 — DevMenu's one flask is named by `menu`; removed in 0.52. */\n  switchPlan: string;\n  /** The plan in the flask's name, given the active plan. */\n  plan: (value: string) => string;\n  /** The heading of the plan group. */\n  planHeading: string;\n  /** The row back to the role the session started with. */\n  backTo: (role: string) => string;\n  /** The plan group's note while billing is off locally. */\n  billingOff: string;\n}\n\nexport interface TopBarPartsLabels {\n  tours: TourMenuLabels;\n  sync: SyncStatusLabels;\n  dev: DevSwitchersLabels;\n}\n\nexport const DEFAULT_TOP_BAR_PARTS_LABELS: TopBarPartsLabels = {\n  tours: {\n    menu: \"Guided tours\",\n    newDot: \"New tours\",\n    thisPage: \"On this page\",\n    newTours: \"New tours\",\n    allTours: \"All tours…\",\n    badgeNew: \"New\",\n    completed: \"Completed\",\n    badgeUpdated: \"Updated\",\n    updatedDot: \"Updated tours\",\n    newAndUpdated: \"New and updated\",\n  },\n  sync: {\n    blocked: (count) =>\n      count === 1\n        ? \"1 change cannot be sent from this device\"\n        : `${count} changes cannot be sent from this device`,\n    offline: \"Offline — changes are saved on this device and will sync when you reconnect\",\n    refused: \"The server refused the last sync\",\n    syncing: \"Syncing…\",\n    pending: (count) => (count === 1 ? \"1 change waiting to sync\" : `${count} changes waiting to sync`),\n    syncedAt: (time) => `Synced at ${time}`,\n    idle: \"Up to date\",\n    syncHint: \"Tap to sync now\",\n    offlineHint: \"nothing to sync while offline\",\n    withHint: (state, hint) => `${state} — ${hint}`,\n    scoped: (scope, state) => `${scope}: ${state}`,\n    offlineShort: \"Offline\",\n    syncingShort: \"Syncing…\",\n    waitingShort: (count) => `${count} waiting`,\n    refusedShort: \"Not synced\",\n    offlineUnsaved: \"Offline — changes can't be saved until you reconnect\",\n    saving: \"Saving…\",\n  },\n  dev: {\n    menu: \"Dev tools\",\n    overridesOn: \"Overrides on\",\n    roleHeading: \"Dev · role\",\n    switchPlan: \"Switch plan\",\n    plan: (value) => `Plan: ${value}`,\n    planHeading: \"Dev · plan\",\n    backTo: (role) => `Back to ${role}`,\n    billingOff: \"Billing is off locally: plans change nothing\",\n  },\n};\n\n/** The `topBarParts` namespace, resolved — English, then the provider, then `labels`. */\nexport function useTopBarPartsLabels(labels?: LabelOverride<TopBarPartsLabels>): TopBarPartsLabels {\n  return useKitLabels(\"topBarParts\", DEFAULT_TOP_BAR_PARTS_LABELS, labels);\n}\n"],"mappings":";AAAA,SAAS,oBAAwC;AAsG1C,MAAM,+BAAkD;AAAA,EAC7D,OAAO;AAAA,IACL,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA,IACV,WAAW;AAAA,IACX,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,eAAe;AAAA,EACjB;AAAA,EACA,MAAM;AAAA,IACJ,SAAS,CAAC,UACR,UAAU,IACN,6CACA,GAAG,KAAK;AAAA,IACd,SAAS;AAAA,IACT,SAAS;AAAA,IACT,SAAS;AAAA,IACT,SAAS,CAAC,UAAW,UAAU,IAAI,6BAA6B,GAAG,KAAK;AAAA,IACxE,UAAU,CAAC,SAAS,aAAa,IAAI;AAAA,IACrC,MAAM;AAAA,IACN,UAAU;AAAA,IACV,aAAa;AAAA,IACb,UAAU,CAAC,OAAO,SAAS,GAAG,KAAK,WAAM,IAAI;AAAA,IAC7C,QAAQ,CAAC,OAAO,UAAU,GAAG,KAAK,KAAK,KAAK;AAAA,IAC5C,cAAc;AAAA,IACd,cAAc;AAAA,IACd,cAAc,CAAC,UAAU,GAAG,KAAK;AAAA,IACjC,cAAc;AAAA,IACd,gBAAgB;AAAA,IAChB,QAAQ;AAAA,EACV;AAAA,EACA,KAAK;AAAA,IACH,MAAM;AAAA,IACN,aAAa;AAAA,IACb,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,MAAM,CAAC,UAAU,SAAS,KAAK;AAAA,IAC/B,aAAa;AAAA,IACb,QAAQ,CAAC,SAAS,WAAW,IAAI;AAAA,IACjC,YAAY;AAAA,EACd;AACF;AAGO,SAAS,qBAAqB,QAA8D;AACjG,SAAO,aAAa,eAAe,8BAA8B,MAAM;AACzE;","names":[]}
+{"version":3,"sources":["../../src/shell/top-bar-parts-labels.ts"],"sourcesContent":["import { useKitLabels, type LabelOverride } from \"../i18n/kit-labels\";\n\n/**\n * The `topBarParts` namespace (0.42, docs/top-bar-harmonization.md §3.1): the words of the\n * top bar's shared parts — `TourMenu`, `SyncStatusIndicator` and `DevMenu` (0.42's\n * `DevSwitchers`, whose words these still are, §2.7.1). A module\n * of words with no component code, like every `*-labels.ts` (0.34, KS U8). The language\n * sub-list (`AccountMenuLanguage`) names itself with `topBar.language`, and the role in the\n * dev flask's name is `topBar.role`, as `RoleSwitcher`'s tooltip.\n */\n\n/** `TourMenu`'s words (§2.4). */\nexport interface TourMenuLabels {\n  /** The compass's name, and the menu's. */\n  menu: string;\n  /** The NEW dot on the compass, for a reader: it joins the trigger's name. */\n  newDot: string;\n  /** The heading over the tours that start on the open page. */\n  thisPage: string;\n  /** The heading over the untaken new tours. */\n  newTours: string;\n  /** The last row, the way to the app's tours page (only with `href`). */\n  allTours: string;\n  /** The chip on a new tour's row. */\n  badgeNew: string;\n  /** What the ✓ on a taken tour's row says to a reader. */\n  completed: string;\n  /** The chip on a tour reset by an update (0.43, docs/tours-harmonization.md §8). */\n  badgeUpdated: string;\n  /** The dot on the compass while only updated tours light it, for a reader. */\n  updatedDot: string;\n  /** The heading over the untaken new tours when updated ones are among them. */\n  newAndUpdated: string;\n}\n\n/** `SyncStatusIndicator`'s words (§2.6). The \"waiting for a plan\" state is\n *  `billing.waitingChanges`, the kit's words for it since billing §12.5. */\nexport interface SyncStatusLabels {\n  /** Writes this device cannot send (keksdose: no key for the budget). Ranked first. */\n  blocked: (count: number) => string;\n  offline: string;\n  /** The server refused the last round. */\n  refused: string;\n  syncing: string;\n  pending: (count: number) => string;\n  /** Settled, with the time of the last good round (already formatted). */\n  syncedAt: (time: string) => string;\n  /** Settled, before the first round. */\n  idle: string;\n  /** Joined to the state when a tap syncs: what the tap does. */\n  syncHint: string;\n  /** Joined to the state while offline, when a tap can do nothing. */\n  offlineHint: string;\n  /** The state and what a tap does, as one tooltip: \"Offline — nothing to sync…\". */\n  withHint: (state: string, hint: string) => string;\n  /** The state with the app's `scope` words before it: \"Handovers on this device: …\". */\n  scoped: (scope: string, state: string) => string;\n  /** The short words beside the cloud (`showLabel`): offline. */\n  offlineShort: string;\n  /** The short words while syncing. */\n  syncingShort: string;\n  /** The short words while changes wait (pending, held for a plan, or blocked). */\n  waitingShort: (count: number) => string;\n  /** The short words after a refused round. */\n  refusedShort: string;\n  /** Offline in an online-only app (`storage=\"none\"`): nothing is kept on the device. */\n  offlineUnsaved: string;\n  /** A round under way in an online-only app — it saves, it doesn't sync. Also its short\n   *  words beside the cloud. */\n  saving: string;\n}\n\n/**\n * `DevMenu`'s words (§2.7, §2.7.1, §6.2, §6.3). Still named for 0.42's `DevSwitchers`: the\n * namespace is the same `topBarParts.dev`, and an app's label tree keeps compiling.\n */\nexport interface DevSwitchersLabels {\n  /** 0.51: the flask's name, and the menu's — the role and the plan follow it. */\n  menu: string;\n  /** 0.51: what the dot on the flask means while `active`, joined to its name — an\n   *  override the developer could forget is on (a \"today\", a slow server). */\n  overridesOn: string;\n  /** The heading of the role group. */\n  roleHeading: string;\n  /** @deprecated 0.51 — DevMenu's one flask is named by `menu`; removed in 0.52. */\n  switchPlan: string;\n  /** The plan in the flask's name, given the active plan. */\n  plan: (value: string) => string;\n  /** The heading of the plan group. */\n  planHeading: string;\n  /** The row back to the role the session started with. */\n  backTo: (role: string) => string;\n  /** The plan group's note while billing is off locally. */\n  billingOff: string;\n}\n\nexport interface TopBarPartsLabels {\n  tours: TourMenuLabels;\n  sync: SyncStatusLabels;\n  dev: DevSwitchersLabels;\n}\n\nexport const DEFAULT_TOP_BAR_PARTS_LABELS: TopBarPartsLabels = {\n  tours: {\n    menu: \"Guided tours\",\n    newDot: \"New tours\",\n    thisPage: \"On this page\",\n    newTours: \"New tours\",\n    allTours: \"All tours…\",\n    badgeNew: \"New\",\n    completed: \"Completed\",\n    badgeUpdated: \"Updated\",\n    updatedDot: \"Updated tours\",\n    newAndUpdated: \"New and updated\",\n  },\n  sync: {\n    blocked: (count) =>\n      count === 1 ? \"1 change cannot be sent from this device\" : `${count} changes cannot be sent from this device`,\n    offline: \"Offline — changes are saved on this device and will sync when you reconnect\",\n    refused: \"The server refused the last sync\",\n    syncing: \"Syncing…\",\n    pending: (count) => (count === 1 ? \"1 change waiting to sync\" : `${count} changes waiting to sync`),\n    syncedAt: (time) => `Synced at ${time}`,\n    idle: \"Up to date\",\n    syncHint: \"Tap to sync now\",\n    offlineHint: \"nothing to sync while offline\",\n    withHint: (state, hint) => `${state} — ${hint}`,\n    scoped: (scope, state) => `${scope}: ${state}`,\n    offlineShort: \"Offline\",\n    syncingShort: \"Syncing…\",\n    waitingShort: (count) => `${count} waiting`,\n    refusedShort: \"Not synced\",\n    offlineUnsaved: \"Offline — changes can't be saved until you reconnect\",\n    saving: \"Saving…\",\n  },\n  dev: {\n    menu: \"Dev tools\",\n    overridesOn: \"Overrides on\",\n    roleHeading: \"Dev · role\",\n    switchPlan: \"Switch plan\",\n    plan: (value) => `Plan: ${value}`,\n    planHeading: \"Dev · plan\",\n    backTo: (role) => `Back to ${role}`,\n    billingOff: \"Billing is off locally: plans change nothing\",\n  },\n};\n\n/** The `topBarParts` namespace, resolved — English, then the provider, then `labels`. */\nexport function useTopBarPartsLabels(labels?: LabelOverride<TopBarPartsLabels>): TopBarPartsLabels {\n  return useKitLabels(\"topBarParts\", DEFAULT_TOP_BAR_PARTS_LABELS, labels);\n}\n"],"mappings":";AAAA,SAAS,oBAAwC;AAsG1C,MAAM,+BAAkD;AAAA,EAC7D,OAAO;AAAA,IACL,MAAM;AAAA,IACN,QAAQ;AAAA,IACR,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA,IACV,UAAU;AAAA,IACV,WAAW;AAAA,IACX,cAAc;AAAA,IACd,YAAY;AAAA,IACZ,eAAe;AAAA,EACjB;AAAA,EACA,MAAM;AAAA,IACJ,SAAS,CAAC,UACR,UAAU,IAAI,6CAA6C,GAAG,KAAK;AAAA,IACrE,SAAS;AAAA,IACT,SAAS;AAAA,IACT,SAAS;AAAA,IACT,SAAS,CAAC,UAAW,UAAU,IAAI,6BAA6B,GAAG,KAAK;AAAA,IACxE,UAAU,CAAC,SAAS,aAAa,IAAI;AAAA,IACrC,MAAM;AAAA,IACN,UAAU;AAAA,IACV,aAAa;AAAA,IACb,UAAU,CAAC,OAAO,SAAS,GAAG,KAAK,WAAM,IAAI;AAAA,IAC7C,QAAQ,CAAC,OAAO,UAAU,GAAG,KAAK,KAAK,KAAK;AAAA,IAC5C,cAAc;AAAA,IACd,cAAc;AAAA,IACd,cAAc,CAAC,UAAU,GAAG,KAAK;AAAA,IACjC,cAAc;AAAA,IACd,gBAAgB;AAAA,IAChB,QAAQ;AAAA,EACV;AAAA,EACA,KAAK;AAAA,IACH,MAAM;AAAA,IACN,aAAa;AAAA,IACb,aAAa;AAAA,IACb,YAAY;AAAA,IACZ,MAAM,CAAC,UAAU,SAAS,KAAK;AAAA,IAC/B,aAAa;AAAA,IACb,QAAQ,CAAC,SAAS,WAAW,IAAI;AAAA,IACjC,YAAY;AAAA,EACd;AACF;AAGO,SAAS,qBAAqB,QAA8D;AACjG,SAAO,aAAa,eAAe,8BAA8B,MAAM;AACzE;","names":[]}

package/dist/shell/topbar-action-menu.d.ts

@@ -106,7 +106,7 @@ export interface TopBarMenuHeader {
  * rather than widening it. A menu that can grow taller than a phone's glass passes
  * `scrollable` (0.51), since that clamp is sideways only.
  */
-export declare function TopBarActionMenu({ icon, iconBadge, trigger, triggerClassName, href, "aria-label": ariaLabel, heading, header, entries, leading, children, footer, footerLabel, align, panelClassName, scrollable, triggerAttributes, }: {
+export declare function TopBarActionMenu({ icon, iconBadge, trigger, triggerClassName, href, "aria-label": ariaLabel, heading, header, entries, leading, children, footer, footerLabel, align, panelClassName, scrollable, columns, triggerAttributes, }: {
     /** The trigger's face for the usual icon button. Ignored when `trigger` is given. */
     icon?: ReactNode;
     /**
@@ -190,6 +190,19 @@ export declare function TopBarActionMenu({ icon, iconBadge, trigger, triggerClas
      * header and the footer are inside the list and scroll with the rows.
      */
     scrollable?: boolean;
+    /**
+     * From `md` up, lay the heading groups side by side, one column per group (0.51.4,
+     * `DevMenu`; keksdose dev #640, Marcel: "Each group gets a column. That way it would be
+     * much better visible for desktop users"). Below `md`, the one column as before.
+     *
+     * A column is a group and the loose rows after it up to the next heading, so a row
+     * behind a rule at the end of a group (DevMenu's "Back to {role}") stays in that
+     * group's column. Loose rows before the first heading, the header, the menu-wide
+     * `heading` and the footer span the panel. The DOM order is unchanged, so ↓/↑ walk the
+     * rows down one column and on into the next, as a reader reads them. `leading` and
+     * `children` rows take a cell each; add `md:col-span-full` to one that should span.
+     */
+    columns?: boolean;
     /** `data-*` attributes for the trigger itself — a tour's anchor (`data-tour`), a test
      *  hook. The parts built on this menu (`TourMenu`) pass theirs through here. */
     triggerAttributes?: {

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

@@ -26,6 +26,21 @@ function toBlocks(entries) {
   }
   return blocks.filter((block) => block.kind === "loose" || block.rows.length > 0);
 }
+function toColumns(blocks) {
+  const lead = [];
+  const columns = [];
+  blocks.forEach((block, index) => {
+    if (block.kind === "group") columns.push({ group: block, after: [], index });
+    else if (columns.length === 0) lead.push(block);
+    else columns[columns.length - 1].after.push(block.entry);
+  });
+  for (const column of columns) {
+    while (column.after.at(-1)?.kind === "divider") column.after.pop();
+  }
+  return { lead, columns };
+}
+const COLUMNS_PANEL = "md:grid md:grid-cols-[repeat(auto-fill,minmax(14rem,1fr))] md:items-start md:gap-y-2 md:w-[min(calc(100vw-2rem),var(--menu-columns-width))]";
+const SPAN_ALL = "md:col-span-full";
 const SECTION_CONTROLS = "a[href]:not([role]),button:not([role])";
 const TABBABLE = "a[href],button:not([disabled]),input:not([disabled]),select:not([disabled]),textarea:not([disabled]),[tabindex]";
 const SCROLLABLE_PANEL = "max-h-[calc(100dvh-4rem)] overflow-y-auto overscroll-contain";
@@ -68,9 +83,13 @@ function TopBarActionMenu({
   align,
   panelClassName,
   scrollable = false,
+  columns = false,
   triggerAttributes
 }) {
   const uid = useId();
+  const blocks = toBlocks(entries);
+  const grouped = columns ? toColumns(blocks) : null;
+  const laidOut = grouped && grouped.columns.length > 0 ? grouped : null;
   return /* @__PURE__ */ jsx(
     HoverMenu,
     {
@@ -109,7 +128,7 @@ function TopBarActionMenu({
         const footerBody = typeof footer === "function" ? footer(close) : footer;
         const headerExtra = typeof header?.extra === "function" ? header.extra(close) : header?.extra;
         const footerClass = "flex flex-wrap gap-x-3 gap-y-1 text-xs text-muted [&_a:hover]:text-primary [&_a]:rounded-sm [&_a:focus-visible]:outline-none [&_a:focus-visible]:ring-focus [&_a:focus-visible]:ring-brand";
-        const row = (entry) => /* @__PURE__ */ jsx("li", { children: entry.kind === "link" ? /* @__PURE__ */ jsx(
+        const row = (entry, className) => /* @__PURE__ */ jsx("li", { className, children: entry.kind === "link" ? /* @__PURE__ */ jsx(
           MenuItem,
           {
             href: entry.to,
@@ -138,46 +157,78 @@ function TopBarActionMenu({
             children: entry.label
           }
         ) }, entry.key);
+        const loose = (block, span) => {
+          const entry = block.entry;
+          if (entry.kind === "divider") {
+            return /* @__PURE__ */ jsx("li", { className: cn("my-1 border-t border-subtle", span && SPAN_ALL) }, entry.key);
+          }
+          return row(entry, span ? SPAN_ALL : void 0);
+        };
+        const group = (block, i, tight, inColumn = false) => {
+          const headingId = `${uid}-group-${i}`;
+          return /* @__PURE__ */ jsxs("li", { role: "none", children: [
+            /* @__PURE__ */ jsx(
+              "div",
+              {
+                id: headingId,
+                role: "presentation",
+                className: cn(
+                  "px-3 pb-0.5 text-caption font-semibold uppercase tracking-wide text-muted [overflow-wrap:anywhere]",
+                  // A column's heading lines up with its neighbours' at the top of the
+                  // grid row; under `md` the columns stack, and it spaces like the list's.
+                  tight ? "pt-1" : cn("pt-2.5", inColumn && "md:pt-1")
+                ),
+                children: block.heading.label
+              }
+            ),
+            /* @__PURE__ */ jsx("ul", { role: "group", "aria-labelledby": headingId, children: block.rows.map((entry) => row(entry)) })
+          ] }, block.heading.key);
+        };
         return (
           // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions -- a Tab bubbling up from a row or footer link, see keepTabInsidePanel
-          /* @__PURE__ */ jsxs("ul", { className: cn("py-1", scrollable && SCROLLABLE_PANEL, panelClassName), onKeyDown: keepTabInsidePanel, children: [
-            header && /* @__PURE__ */ jsxs(MenuSection, { className: "mb-1 border-b border-subtle px-3 py-2", children: [
-              /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-medium text-primary", children: header.title }),
-              header.subtitle != null && /* @__PURE__ */ jsx("div", { className: "truncate text-xs text-muted", children: header.subtitle }),
-              headerExtra != null && headerExtra !== false && /* @__PURE__ */ jsx("div", { className: "mt-1", children: headerExtra })
-            ] }),
-            heading && /* @__PURE__ */ jsx("li", { className: "px-3 py-1 text-micro font-semibold uppercase tracking-wide text-placeholder", children: heading }),
-            leading?.(close),
-            toBlocks(entries).map((block, i, blocks) => {
-              if (block.kind === "loose") {
-                const entry = block.entry;
-                if (entry.kind === "divider") {
-                  return /* @__PURE__ */ jsx("li", { className: "my-1 border-t border-subtle" }, entry.key);
-                }
-                return row(entry);
-              }
-              const headingId = `${uid}-group-${i}`;
-              const before = blocks[i - 1];
-              const tight = !before || before.kind === "loose" && before.entry.kind === "divider";
-              return /* @__PURE__ */ jsxs("li", { role: "none", children: [
-                /* @__PURE__ */ jsx(
-                  "div",
+          /* @__PURE__ */ jsxs(
+            "ul",
+            {
+              className: cn("py-1", scrollable && SCROLLABLE_PANEL, laidOut && COLUMNS_PANEL, panelClassName),
+              style: laidOut ? { "--menu-columns-width": `${laidOut.columns.length * 14}rem` } : void 0,
+              onKeyDown: keepTabInsidePanel,
+              children: [
+                header && /* @__PURE__ */ jsxs(MenuSection, { className: cn("mb-1 border-b border-subtle px-3 py-2", laidOut && SPAN_ALL), children: [
+                  /* @__PURE__ */ jsx("div", { className: "truncate text-sm font-medium text-primary", children: header.title }),
+                  header.subtitle != null && /* @__PURE__ */ jsx("div", { className: "truncate text-xs text-muted", children: header.subtitle }),
+                  headerExtra != null && headerExtra !== false && /* @__PURE__ */ jsx("div", { className: "mt-1", children: headerExtra })
+                ] }),
+                heading && /* @__PURE__ */ jsx(
+                  "li",
                   {
-                    id: headingId,
-                    role: "presentation",
                     className: cn(
-                      "px-3 pb-0.5 text-caption font-semibold uppercase tracking-wide text-muted [overflow-wrap:anywhere]",
-                      tight ? "pt-1" : "pt-2.5"
+                      "px-3 py-1 text-micro font-semibold uppercase tracking-wide text-placeholder",
+                      laidOut && SPAN_ALL
                     ),
-                    children: block.heading.label
+                    children: heading
                   }
                 ),
-                /* @__PURE__ */ jsx("ul", { role: "group", "aria-labelledby": headingId, children: block.rows.map(row) })
-              ] }, block.heading.key);
-            }),
-            children?.(close),
-            footerBody != null && footerBody !== false && /* @__PURE__ */ jsx(MenuSection, { className: "mt-1 border-t border-subtle px-3 py-2", children: footerLabel ? /* @__PURE__ */ jsx("nav", { "aria-label": footerLabel, className: footerClass, children: footerBody }) : /* @__PURE__ */ jsx("div", { className: footerClass, children: footerBody }) })
-          ] })
+                leading?.(close),
+                laidOut ? /* @__PURE__ */ jsxs(Fragment, { children: [
+                  laidOut.lead.map((block) => loose(block, true)),
+                  laidOut.columns.map((column, c) => (
+                    // A column of the grid; under `md` a group as in the list, its rows
+                    // following.
+                    /* @__PURE__ */ jsx("li", { role: "none", "data-menu-column": "", className: "min-w-0", children: /* @__PURE__ */ jsxs("ul", { role: "none", children: [
+                      group(column.group, column.index, c === 0 && laidOut.lead.length === 0, true),
+                      column.after.map((entry) => loose({ kind: "loose", entry }, false))
+                    ] }) }, column.group.heading.key)
+                  ))
+                ] }) : blocks.map((block, i) => {
+                  if (block.kind === "loose") return loose(block, false);
+                  const before = blocks[i - 1];
+                  return group(block, i, !before || before.kind === "loose" && before.entry.kind === "divider");
+                }),
+                children?.(close),
+                footerBody != null && footerBody !== false && /* @__PURE__ */ jsx(MenuSection, { className: cn("mt-1 border-t border-subtle px-3 py-2", laidOut && SPAN_ALL), children: footerLabel ? /* @__PURE__ */ jsx("nav", { "aria-label": footerLabel, className: footerClass, children: footerBody }) : /* @__PURE__ */ jsx("div", { className: footerClass, children: footerBody }) })
+              ]
+            }
+          )
         );
       }
     }