@eifi1/ui-kit 0.53.0 → 0.55.0

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// The kit's one storage guard, which 0.51 wrote here again by hand (DUP-8, refactor audit\n// 2026-10-30). Storage blocked, \"Back to\" lasts as long as this page.\nimport { readSessionStored, writeSessionStored } from \"../lib/safe-storage\";\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\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 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 ? readSessionStored(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(readSessionStored(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        writeSessionStored(storageKey, null);\n        setKept(null);\n      } else if (kept === null && role !== undefined && next !== role) {\n        writeSessionStored(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":[]}
+{"version":3,"sources":["../../src/shell/dev-menu.tsx"],"sourcesContent":["import { useState, useSyncExternalStore } 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// The kit's one storage guard, which 0.51 wrote here again by hand (DUP-8, refactor audit\n// 2026-10-30). Storage blocked, \"Back to\" lasts as long as this page.\nimport { readSessionStored, writeSessionStored } from \"../lib/safe-storage\";\n// The kit's one \"today\" (0.55): a day moved there is an override on, whatever `active` says.\nimport { subscribeToday, todayOverride } from \"../lib/dates\";\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\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   * 0.55: a \"today\" the app moved with `setToday` (`@eifi1/ui-kit/dates`, the dev clock's\n   * day) counts by itself — the dot is on while one is set, `active` or not.\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 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  // Server render: no day is moved there.\n  const movedToday = useSyncExternalStore(subscribeToday, todayOverride, () => null);\n  const words = useTopBarPartsLabels(labelsProp ? { dev: labelsProp } : undefined).dev;\n  const [kept, setKept] = useState<string | null>(() => (enabled ? readSessionStored(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(readSessionStored(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        writeSessionStored(storageKey, null);\n        setKept(null);\n      } else if (kept === null && role !== undefined && next !== role) {\n        writeSessionStored(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 || movedToday !== null ? { 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/held-changes-banner-labels.d.ts

@@ -0,0 +1,23 @@
+/**
+ * `HeldChangesBanner`'s words — the `heldChanges` namespace of `<UiKitProvider labels>`
+ * (0.55, docs/top-bar-harmonization.md §2.6.1). The confirm's Cancel is
+ * `confirmDialog.cancel`.
+ */
+export interface HeldChangesBannerLabels {
+    /** The banner's sentence when the app passes none: how many wait, that they stay on the
+     *  device, and the two ways out. Says nothing of a way back, which the app may not have. */
+    message: (count: number) => string;
+    /** The way back — keksdose's switch to the budget the changes were made in. */
+    switchBack: string;
+    /** The button that asks first; the ellipsis says a question follows. */
+    discard: string;
+    /** The question, with the count that would be lost. */
+    confirmTitle: (count: number) => string;
+    /** The consequence under it: they are gone, and the device takes the server's state. */
+    confirmBody: (count: number) => string;
+    /** The button that answers it. */
+    confirmAction: string;
+    /** A switch back or a discard rejected and the app's `formatError` says nothing better. */
+    failed: string;
+}
+export declare const DEFAULT_HELD_CHANGES_BANNER_LABELS: HeldChangesBannerLabels;

package/dist/shell/held-changes-banner-labels.js

@@ -0,0 +1,14 @@
+"use client";
+const DEFAULT_HELD_CHANGES_BANNER_LABELS = {
+  message: (count) => count === 1 ? "1 change cannot be sent from here. It stays on this device until it can be sent, or until you discard it." : `${count} changes cannot be sent from here. They stay on this device until they can be sent, or until you discard them.`,
+  switchBack: "Switch back",
+  discard: "Discard\u2026",
+  confirmTitle: (count) => count === 1 ? "Discard 1 change that cannot be sent from here?" : `Discard ${count} changes that cannot be sent from here?`,
+  confirmBody: (count) => count === 1 ? "It cannot be recovered. This device then syncs with what the server has." : "They cannot be recovered. This device then syncs with what the server has.",
+  confirmAction: "Discard",
+  failed: "That didn\u2019t work. Please try again."
+};
+export {
+  DEFAULT_HELD_CHANGES_BANNER_LABELS
+};
+//# sourceMappingURL=held-changes-banner-labels.js.map

package/dist/shell/held-changes-banner-labels.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/shell/held-changes-banner-labels.ts"],"sourcesContent":["// The English words of ./held-changes-banner, in a module with no component code: the\n// English catalogue (src/i18n/defaults.ts) imports them without the component (0.34, KS U8).\n// keksdose's reviewed words (sync.held_*, sync.discard_held_*, sync.switch_back_held) are\n// the canon, without its budgets: the kit cannot know why a change waits, only that it does.\n\n/**\n * `HeldChangesBanner`'s words — the `heldChanges` namespace of `<UiKitProvider labels>`\n * (0.55, docs/top-bar-harmonization.md §2.6.1). The confirm's Cancel is\n * `confirmDialog.cancel`.\n */\nexport interface HeldChangesBannerLabels {\n  /** The banner's sentence when the app passes none: how many wait, that they stay on the\n   *  device, and the two ways out. Says nothing of a way back, which the app may not have. */\n  message: (count: number) => string;\n  /** The way back — keksdose's switch to the budget the changes were made in. */\n  switchBack: string;\n  /** The button that asks first; the ellipsis says a question follows. */\n  discard: string;\n  /** The question, with the count that would be lost. */\n  confirmTitle: (count: number) => string;\n  /** The consequence under it: they are gone, and the device takes the server's state. */\n  confirmBody: (count: number) => string;\n  /** The button that answers it. */\n  confirmAction: string;\n  /** A switch back or a discard rejected and the app's `formatError` says nothing better. */\n  failed: string;\n}\n\nexport const DEFAULT_HELD_CHANGES_BANNER_LABELS: HeldChangesBannerLabels = {\n  message: (count) =>\n    count === 1\n      ? \"1 change cannot be sent from here. It stays on this device until it can be sent, or until you discard it.\"\n      : `${count} changes cannot be sent from here. They stay on this device until they can be sent, or until you discard them.`,\n  switchBack: \"Switch back\",\n  discard: \"Discard…\",\n  confirmTitle: (count) =>\n    count === 1\n      ? \"Discard 1 change that cannot be sent from here?\"\n      : `Discard ${count} changes that cannot be sent from here?`,\n  confirmBody: (count) =>\n    count === 1\n      ? \"It cannot be recovered. This device then syncs with what the server has.\"\n      : \"They cannot be recovered. This device then syncs with what the server has.\",\n  confirmAction: \"Discard\",\n  failed: \"That didn’t work. Please try again.\",\n};\n"],"mappings":";AA4BO,MAAM,qCAA8D;AAAA,EACzE,SAAS,CAAC,UACR,UAAU,IACN,8GACA,GAAG,KAAK;AAAA,EACd,YAAY;AAAA,EACZ,SAAS;AAAA,EACT,cAAc,CAAC,UACb,UAAU,IACN,oDACA,WAAW,KAAK;AAAA,EACtB,aAAa,CAAC,UACZ,UAAU,IACN,6EACA;AAAA,EACN,eAAe;AAAA,EACf,QAAQ;AACV;","names":[]}

package/dist/shell/held-changes-banner.d.ts

@@ -0,0 +1,75 @@
+import type { ReactNode } from "react";
+import { type LabelOverride } from "../i18n/kit-labels.js";
+import { DEFAULT_HELD_CHANGES_BANNER_LABELS, type HeldChangesBannerLabels } from "./held-changes-banner-labels.js";
+export { DEFAULT_HELD_CHANGES_BANNER_LABELS };
+export type { HeldChangesBannerLabels };
+export interface HeldChangesBannerProps {
+    /**
+     * Changes kept on this device that cannot be sent from where the user is now — the
+     * indicator's `blocked`, or the part of it this banner is about (kastlan: the ones the
+     * server refused). 0 renders nothing.
+     */
+    count: number;
+    /**
+     * The app's sentence: why they wait and what would send them — keksdose's "2 changes
+     * were made in “Holiday”, which is no longer the active budget…". Default
+     * `heldChanges.message(count)`, which names no reason and no way back.
+     */
+    message?: ReactNode;
+    /**
+     * Room under the sentence — kastlan's refusal reasons, as a list. For the box: a strip
+     * holds its message to one line on a phone, and a list behind "More" is a list nobody
+     * opens, so a strip with `extra` is not clamped.
+     */
+    extra?: ReactNode;
+    /**
+     * The way back, where there is one — keksdose's switch to the budget the changes were
+     * made in, which sends them. Without it Discard is the one way out. A returned promise
+     * keeps the button busy until it settles; a rejection is shown as Discard's is.
+     */
+    onSwitchBack?: () => Promise<unknown> | void;
+    /**
+     * Lets them go, once the user has said yes to the kit's confirm: the app drops what is
+     * held and syncs (keksdose `discardWaitingChanges`, kastlan `discardRejected` then
+     * `onSync`). Busy until the promise settles. A rejection leaves the banner where it is,
+     * with the error under the sentence; the count going to 0 is what removes it.
+     */
+    onDiscard: () => Promise<unknown> | void;
+    /** Turns a rejection into words. Default `heldChanges.failed`. */
+    formatError?: (error: unknown) => ReactNode;
+    /**
+     * `box` (default): a framed callout above a page (kastlan's handover pages); on a phone
+     * its actions take a line of their own under the sentence. `strip`: a band in the
+     * shell beside the app's other strips (keksdose), its message held to one line on a
+     * phone with "More" (`clampMobile`, keksdose dev#611), so the actions keep theirs.
+     */
+    variant?: "box" | "strip";
+    /** Prop > `<UiKitProvider labels={{ heldChanges }}>` > English. */
+    labels?: LabelOverride<HeldChangesBannerLabels>;
+    className?: string;
+    /** `data-*` attributes go on the banner — a tour's anchor (`data-tour="…"`). */
+    [key: `data-${string}`]: string | number | boolean | undefined;
+}
+/**
+ * Changes this device keeps and cannot send from where the user is now, with the two ways
+ * out: back to where they can be sent, or let them go (docs/top-bar-harmonization.md
+ * §2.6.1). `SyncStatusIndicator` shows the state (`blocked`, ranked first); this is the
+ * room for the action that one control in the top bar does not have.
+ *
+ * Two apps built it by hand:
+ * - **keksdose budget switch** (app/held-changes-banner.tsx): the active budget moved
+ *   and the queue waits for the budget it was made in. A strip in the shell with "Switch
+ *   back" and "Discard…", which asks first with the count, then discards and syncs.
+ * - **kastlan handover-sync-banner** (:57-68): the changes the server refused, a danger
+ *   box with their reasons and a Discard that asked nothing.
+ *
+ * The kit's part is the banner and the question; what is held, how to discard it and the
+ * sync after are the app's (`onDiscard`). Warning, not danger: nothing is lost until the
+ * user says so, and the indicator in the bar already draws the danger. The safe action
+ * comes first, so the destructive one is never the only button somebody in a hurry finds
+ * (keksdose); Discard is then the quiet one. The confirm is `useConfirm`'s, in the danger
+ * tone (focus starts on Cancel), so the app needs a `ConfirmProvider` — all three mount
+ * one. Not behind the write lock: the changes are not the page's, and a viewer of what is
+ * on screen may still let go of what is held elsewhere (keksdose).
+ */
+export declare function HeldChangesBanner(props: HeldChangesBannerProps): import("react").JSX.Element | null;

package/dist/shell/held-changes-banner.js

@@ -0,0 +1,106 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { AlertBanner } from "../components/alert-banner.js";
+import { Button } from "../components/button.js";
+import { useConfirm } from "../components/confirm-dialog.js";
+import { useKitLabels } from "../i18n/kit-labels.js";
+import { hasContent } from "../lib/presence.js";
+import { DEFAULT_HELD_CHANGES_BANNER_LABELS } from "./held-changes-banner-labels.js";
+function HeldChangesBanner(props) {
+  if (!(props.count > 0)) return null;
+  return /* @__PURE__ */ jsx(HeldChangesBody, { ...props });
+}
+function HeldChangesBody({
+  count,
+  message,
+  extra,
+  onSwitchBack,
+  onDiscard,
+  formatError,
+  variant = "box",
+  labels: labelsProp,
+  className,
+  ...rest
+}) {
+  const labels = useKitLabels("heldChanges", DEFAULT_HELD_CHANGES_BANNER_LABELS, labelsProp);
+  const confirm = useConfirm();
+  const [busy, setBusy] = useState(null);
+  const [failure, setFailure] = useState(null);
+  const mounted = useRef(true);
+  useEffect(() => {
+    mounted.current = true;
+    return () => {
+      mounted.current = false;
+    };
+  }, []);
+  const run = async (key, action) => {
+    setBusy(key);
+    setFailure(null);
+    try {
+      await action();
+    } catch (caught) {
+      if (!mounted.current) return;
+      const said = formatError?.(caught);
+      setFailure(hasContent(said) ? said : labels.failed);
+    } finally {
+      if (mounted.current) setBusy(null);
+    }
+  };
+  const discard = async () => {
+    const yes = await confirm({
+      title: labels.confirmTitle(count),
+      body: labels.confirmBody(count),
+      confirmLabel: labels.confirmAction,
+      tone: "danger"
+    });
+    if (yes && mounted.current) await run("discard", onDiscard);
+  };
+  const strip = variant === "strip";
+  return /* @__PURE__ */ jsxs(
+    AlertBanner,
+    {
+      ...rest,
+      tone: "warning",
+      variant: strip ? "strip" : "box",
+      actionPlacement: "own-line",
+      clampMobile: strip && !failure && !hasContent(extra),
+      className,
+      action: /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-2", children: [
+        onSwitchBack && /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: "secondary",
+            size: "sm",
+            pending: busy === "switchBack",
+            disabled: busy === "discard",
+            onClick: () => void run("switchBack", onSwitchBack),
+            children: labels.switchBack
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          Button,
+          {
+            variant: onSwitchBack ? "ghost" : "secondary",
+            tone: "danger",
+            size: "sm",
+            pending: busy === "discard",
+            disabled: busy === "switchBack",
+            onClick: () => void discard(),
+            children: labels.discard
+          }
+        )
+      ] }),
+      children: [
+        message ?? labels.message(count),
+        hasContent(extra) && /* @__PURE__ */ jsx("div", { className: "mt-1", children: extra }),
+        hasContent(failure) && /* @__PURE__ */ jsx(AlertBanner, { variant: "inline", tone: "danger", size: "sm", block: true, className: "mt-1", children: failure })
+      ]
+    }
+  );
+}
+export {
+  DEFAULT_HELD_CHANGES_BANNER_LABELS,
+  HeldChangesBanner
+};
+//# sourceMappingURL=held-changes-banner.js.map

package/dist/shell/held-changes-banner.js.map

@@ -0,0 +1 @@
+{"version":3,"sources":["../../src/shell/held-changes-banner.tsx"],"sourcesContent":["import { useEffect, useRef, useState } from \"react\";\nimport type { ReactNode } from \"react\";\nimport { AlertBanner } from \"../components/alert-banner\";\nimport { Button } from \"../components/button\";\nimport { useConfirm } from \"../components/confirm-dialog\";\nimport { useKitLabels, type LabelOverride } from \"../i18n/kit-labels\";\nimport { hasContent } from \"../lib/presence\";\nimport { DEFAULT_HELD_CHANGES_BANNER_LABELS, type HeldChangesBannerLabels } from \"./held-changes-banner-labels\";\n\n// Defined in ./held-changes-banner-labels, which holds no component code (0.34, KS U8).\nexport { DEFAULT_HELD_CHANGES_BANNER_LABELS };\nexport type { HeldChangesBannerLabels };\n\nexport interface HeldChangesBannerProps {\n  /**\n   * Changes kept on this device that cannot be sent from where the user is now — the\n   * indicator's `blocked`, or the part of it this banner is about (kastlan: the ones the\n   * server refused). 0 renders nothing.\n   */\n  count: number;\n  /**\n   * The app's sentence: why they wait and what would send them — keksdose's \"2 changes\n   * were made in “Holiday”, which is no longer the active budget…\". Default\n   * `heldChanges.message(count)`, which names no reason and no way back.\n   */\n  message?: ReactNode;\n  /**\n   * Room under the sentence — kastlan's refusal reasons, as a list. For the box: a strip\n   * holds its message to one line on a phone, and a list behind \"More\" is a list nobody\n   * opens, so a strip with `extra` is not clamped.\n   */\n  extra?: ReactNode;\n  /**\n   * The way back, where there is one — keksdose's switch to the budget the changes were\n   * made in, which sends them. Without it Discard is the one way out. A returned promise\n   * keeps the button busy until it settles; a rejection is shown as Discard's is.\n   */\n  onSwitchBack?: () => Promise<unknown> | void;\n  /**\n   * Lets them go, once the user has said yes to the kit's confirm: the app drops what is\n   * held and syncs (keksdose `discardWaitingChanges`, kastlan `discardRejected` then\n   * `onSync`). Busy until the promise settles. A rejection leaves the banner where it is,\n   * with the error under the sentence; the count going to 0 is what removes it.\n   */\n  onDiscard: () => Promise<unknown> | void;\n  /** Turns a rejection into words. Default `heldChanges.failed`. */\n  formatError?: (error: unknown) => ReactNode;\n  /**\n   * `box` (default): a framed callout above a page (kastlan's handover pages); on a phone\n   * its actions take a line of their own under the sentence. `strip`: a band in the\n   * shell beside the app's other strips (keksdose), its message held to one line on a\n   * phone with \"More\" (`clampMobile`, keksdose dev#611), so the actions keep theirs.\n   */\n  variant?: \"box\" | \"strip\";\n  /** Prop > `<UiKitProvider labels={{ heldChanges }}>` > English. */\n  labels?: LabelOverride<HeldChangesBannerLabels>;\n  className?: string;\n  /** `data-*` attributes go on the banner — a tour's anchor (`data-tour=\"…\"`). */\n  [key: `data-${string}`]: string | number | boolean | undefined;\n}\n\n/**\n * Changes this device keeps and cannot send from where the user is now, with the two ways\n * out: back to where they can be sent, or let them go (docs/top-bar-harmonization.md\n * §2.6.1). `SyncStatusIndicator` shows the state (`blocked`, ranked first); this is the\n * room for the action that one control in the top bar does not have.\n *\n * Two apps built it by hand:\n * - **keksdose budget switch** (app/held-changes-banner.tsx): the active budget moved\n *   and the queue waits for the budget it was made in. A strip in the shell with \"Switch\n *   back\" and \"Discard…\", which asks first with the count, then discards and syncs.\n * - **kastlan handover-sync-banner** (:57-68): the changes the server refused, a danger\n *   box with their reasons and a Discard that asked nothing.\n *\n * The kit's part is the banner and the question; what is held, how to discard it and the\n * sync after are the app's (`onDiscard`). Warning, not danger: nothing is lost until the\n * user says so, and the indicator in the bar already draws the danger. The safe action\n * comes first, so the destructive one is never the only button somebody in a hurry finds\n * (keksdose); Discard is then the quiet one. The confirm is `useConfirm`'s, in the danger\n * tone (focus starts on Cancel), so the app needs a `ConfirmProvider` — all three mount\n * one. Not behind the write lock: the changes are not the page's, and a viewer of what is\n * on screen may still let go of what is held elsewhere (keksdose).\n */\nexport function HeldChangesBanner(props: HeldChangesBannerProps) {\n  // Nothing held: nothing to say. The body's state (a running action, an error) goes with\n  // it, so a later hold starts clean.\n  if (!(props.count > 0)) return null;\n  return <HeldChangesBody {...props} />;\n}\n\nfunction HeldChangesBody({\n  count,\n  message,\n  extra,\n  onSwitchBack,\n  onDiscard,\n  formatError,\n  variant = \"box\",\n  labels: labelsProp,\n  className,\n  ...rest\n}: HeldChangesBannerProps) {\n  const labels = useKitLabels(\"heldChanges\", DEFAULT_HELD_CHANGES_BANNER_LABELS, labelsProp);\n  const confirm = useConfirm();\n  // One action at a time: a switch back racing a discard would send what is being dropped.\n  const [busy, setBusy] = useState<\"switchBack\" | \"discard\" | null>(null);\n  const [failure, setFailure] = useState<ReactNode>(null);\n  // A discard that worked usually takes the banner with it (the count reaches 0) before\n  // its promise settles here.\n  const mounted = useRef(true);\n  useEffect(() => {\n    mounted.current = true;\n    return () => {\n      mounted.current = false;\n    };\n  }, []);\n\n  const run = async (key: \"switchBack\" | \"discard\", action: () => Promise<unknown> | void) => {\n    setBusy(key);\n    setFailure(null);\n    try {\n      await action();\n    } catch (caught) {\n      if (!mounted.current) return;\n      const said = formatError?.(caught);\n      setFailure(hasContent(said) ? said : labels.failed);\n    } finally {\n      if (mounted.current) setBusy(null);\n    }\n  };\n\n  const discard = async () => {\n    const yes = await confirm({\n      title: labels.confirmTitle(count),\n      body: labels.confirmBody(count),\n      confirmLabel: labels.confirmAction,\n      tone: \"danger\",\n    });\n    if (yes && mounted.current) await run(\"discard\", onDiscard);\n  };\n\n  const strip = variant === \"strip\";\n  return (\n    <AlertBanner\n      {...rest}\n      tone=\"warning\"\n      variant={strip ? \"strip\" : \"box\"}\n      // A long sentence beside two buttons squeezed into a column on a phone (kastlan 53):\n      // the actions get a line of their own under it. AlertBanner's default, said here.\n      actionPlacement=\"own-line\"\n      // Not while an error shows or `extra` is there: the clamp would hide them behind \"More\".\n      clampMobile={strip && !failure && !hasContent(extra)}\n      className={className}\n      action={\n        <div className=\"flex flex-wrap items-center gap-2\">\n          {onSwitchBack && (\n            <Button\n              variant=\"secondary\"\n              size=\"sm\"\n              pending={busy === \"switchBack\"}\n              disabled={busy === \"discard\"}\n              onClick={() => void run(\"switchBack\", onSwitchBack)}\n            >\n              {labels.switchBack}\n            </Button>\n          )}\n          <Button\n            variant={onSwitchBack ? \"ghost\" : \"secondary\"}\n            tone=\"danger\"\n            size=\"sm\"\n            pending={busy === \"discard\"}\n            disabled={busy === \"switchBack\"}\n            onClick={() => void discard()}\n          >\n            {labels.discard}\n          </Button>\n        </div>\n      }\n    >\n      {message ?? labels.message(count)}\n      {hasContent(extra) && <div className=\"mt-1\">{extra}</div>}\n      {/* Inline, so it is a live region: the answer to the button just pressed is heard. */}\n      {hasContent(failure) && (\n        <AlertBanner variant=\"inline\" tone=\"danger\" size=\"sm\" block className=\"mt-1\">\n          {failure}\n        </AlertBanner>\n      )}\n    </AlertBanner>\n  );\n}\n"],"mappings":";AAuFS,cAmED,YAnEC;AAvFT,SAAS,WAAW,QAAQ,gBAAgB;AAE5C,SAAS,mBAAmB;AAC5B,SAAS,cAAc;AACvB,SAAS,kBAAkB;AAC3B,SAAS,oBAAwC;AACjD,SAAS,kBAAkB;AAC3B,SAAS,0CAAwE;AA4E1E,SAAS,kBAAkB,OAA+B;AAG/D,MAAI,EAAE,MAAM,QAAQ,GAAI,QAAO;AAC/B,SAAO,oBAAC,mBAAiB,GAAG,OAAO;AACrC;AAEA,SAAS,gBAAgB;AAAA,EACvB;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA;AAAA,EACA,UAAU;AAAA,EACV,QAAQ;AAAA,EACR;AAAA,EACA,GAAG;AACL,GAA2B;AACzB,QAAM,SAAS,aAAa,eAAe,oCAAoC,UAAU;AACzF,QAAM,UAAU,WAAW;AAE3B,QAAM,CAAC,MAAM,OAAO,IAAI,SAA0C,IAAI;AACtE,QAAM,CAAC,SAAS,UAAU,IAAI,SAAoB,IAAI;AAGtD,QAAM,UAAU,OAAO,IAAI;AAC3B,YAAU,MAAM;AACd,YAAQ,UAAU;AAClB,WAAO,MAAM;AACX,cAAQ,UAAU;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,MAAM,OAAO,KAA+B,WAA0C;AAC1F,YAAQ,GAAG;AACX,eAAW,IAAI;AACf,QAAI;AACF,YAAM,OAAO;AAAA,IACf,SAAS,QAAQ;AACf,UAAI,CAAC,QAAQ,QAAS;AACtB,YAAM,OAAO,cAAc,MAAM;AACjC,iBAAW,WAAW,IAAI,IAAI,OAAO,OAAO,MAAM;AAAA,IACpD,UAAE;AACA,UAAI,QAAQ,QAAS,SAAQ,IAAI;AAAA,IACnC;AAAA,EACF;AAEA,QAAM,UAAU,YAAY;AAC1B,UAAM,MAAM,MAAM,QAAQ;AAAA,MACxB,OAAO,OAAO,aAAa,KAAK;AAAA,MAChC,MAAM,OAAO,YAAY,KAAK;AAAA,MAC9B,cAAc,OAAO;AAAA,MACrB,MAAM;AAAA,IACR,CAAC;AACD,QAAI,OAAO,QAAQ,QAAS,OAAM,IAAI,WAAW,SAAS;AAAA,EAC5D;AAEA,QAAM,QAAQ,YAAY;AAC1B,SACE;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,MAAK;AAAA,MACL,SAAS,QAAQ,UAAU;AAAA,MAG3B,iBAAgB;AAAA,MAEhB,aAAa,SAAS,CAAC,WAAW,CAAC,WAAW,KAAK;AAAA,MACnD;AAAA,MACA,QACE,qBAAC,SAAI,WAAU,qCACZ;AAAA,wBACC;AAAA,UAAC;AAAA;AAAA,YACC,SAAQ;AAAA,YACR,MAAK;AAAA,YACL,SAAS,SAAS;AAAA,YAClB,UAAU,SAAS;AAAA,YACnB,SAAS,MAAM,KAAK,IAAI,cAAc,YAAY;AAAA,YAEjD,iBAAO;AAAA;AAAA,QACV;AAAA,QAEF;AAAA,UAAC;AAAA;AAAA,YACC,SAAS,eAAe,UAAU;AAAA,YAClC,MAAK;AAAA,YACL,MAAK;AAAA,YACL,SAAS,SAAS;AAAA,YAClB,UAAU,SAAS;AAAA,YACnB,SAAS,MAAM,KAAK,QAAQ;AAAA,YAE3B,iBAAO;AAAA;AAAA,QACV;AAAA,SACF;AAAA,MAGD;AAAA,mBAAW,OAAO,QAAQ,KAAK;AAAA,QAC/B,WAAW,KAAK,KAAK,oBAAC,SAAI,WAAU,QAAQ,iBAAM;AAAA,QAElD,WAAW,OAAO,KACjB,oBAAC,eAAY,SAAQ,UAAS,MAAK,UAAS,MAAK,MAAK,OAAK,MAAC,WAAU,QACnE,mBACH;AAAA;AAAA;AAAA,EAEJ;AAEJ;","names":[]}

package/dist/shell/sync-status-indicator.d.ts

@@ -19,15 +19,27 @@ export interface SyncStatus {
     waitingForPlan?: number;
     /** When the last good round ended — epoch ms, an ISO string or a `Date`. */
     lastSyncedAt?: number | string | Date | null;
+    /**
+     * 0.55 (held back from 0.53): a round of this tab waits for another tab's on the same
+     * device copy — the sync engine's Web Lock (0.52) lets one tab's round run at a time — so
+     * nothing goes out from here until that one ends. `useSyncStatus` fills it from the
+     * engine's `waitingForTab`.
+     */
+    waitingForTab?: boolean;
 }
-/** The seven states, in their ranking: the first that holds wins. */
-export type SyncState = "blocked" | "waitingForPlan" | "offline" | "error" | "syncing" | "pending" | "synced";
+/** The eight states, in their ranking: the first that holds wins. */
+export type SyncState = "blocked" | "waitingForPlan" | "offline" | "waitingForTab" | "error" | "syncing" | "pending" | "synced";
 /**
- * Which of the seven states a {@link SyncStatus} is in — keksdose's ranking
+ * Which of the eight states a {@link SyncStatus} is in — keksdose's ranking
  * (sync-status-indicator.tsx): a write that cannot be sent at all ranks above everything,
  * because waiting cannot help it; then one waiting for a plan; then offline; then a refused
  * round; then a round under way; then writes waiting; else in sync. `syncing` also holds
  * while a tap's own round runs (`refreshing`), before the engine publishes its phase.
+ *
+ * 0.55 (held back from 0.53): a round waiting for another tab's (`waitingForTab`) ranks
+ * after offline, which it cannot help either, and before the rest: it is the start of a
+ * round, which replaces an error as `syncing` does once it runs, and the engine never says
+ * it beside `syncing` — so it is what a tap's own round shows while it waits its turn.
  */
 export declare function syncState(status: SyncStatus, refreshing?: boolean): SyncState;
 /** The scope words of an indicator that covers only part of the app (§6.10). */
@@ -46,7 +58,8 @@ export interface SyncStatusIndicatorProps {
      * Run a round now (push, then pull, then re-read what is on screen). With it the
      * indicator is a "sync now" button, disabled offline and mid-round but keeping its
      * colour; a returned promise keeps the spin until it settles. Without it, a status only
-     * (§6.9).
+     * (§6.9). Disabled too while a round waits for another tab's (0.55): a tap would only
+     * queue one more behind it.
      */
     onSync?: () => void | Promise<unknown>;
     /** Render nothing while in sync — kastlan and Kurvenschmiede show it only while offline,
@@ -59,11 +72,12 @@ export interface SyncStatusIndicatorProps {
      * offline-first app (keksdose, kastlan's handovers) — offline means "kept here, sent
      * later". `"none"`: an online-only app that keeps nothing on the device (Kurvenschmiede,
      * build review B1) — offline reads "changes can't be saved until you reconnect", a
-     * round reads "Saving…", and `pending`, `blocked` and `waitingForPlan` are ignored,
-     * since there is nowhere for a change to wait. "Up to date" when settled.
+     * round reads "Saving…", and `pending`, `blocked`, `waitingForPlan` and `waitingForTab`
+     * are ignored, since there is nowhere for a change to wait. "Up to date" when settled.
      */
     storage?: "device" | "none";
-    /** Short words beside the cloud ("Offline", "Syncing…", "3 waiting") while not in sync. */
+    /** Short words beside the cloud ("Offline", "Syncing…", "3 waiting", "Waiting for tab")
+     *  while not in sync. */
     showLabel?: boolean;
     /** Prop > `<UiKitProvider labels={{ topBarParts: { sync } }}>` > English. */
     labels?: LabelOverride<SyncStatusLabels>;
@@ -75,12 +89,13 @@ export interface SyncStatusIndicatorProps {
 }
 /**
  * The top bar's sync status (docs/top-bar-harmonization.md §2.6), lifted from keksdose's
- * `SyncStatusIndicator`: the seven states and their ranking ({@link syncState}), one cloud
- * per state, a ✓ badge when in sync and a spin while syncing. With `onSync` it is also the
- * "sync now" button, and its name says both what it is and what a tap does.
+ * `SyncStatusIndicator`: its seven states and their ranking ({@link syncState}; 0.55 adds an
+ * eighth, "Waiting for another tab", an hourglass), one cloud per state, a ✓ badge when in
+ * sync and a spin while syncing. With `onSync` it is also the "sync now" button, and its
+ * name says both what it is and what a tap does.
  *
  * Colours are the kit's roles — danger for a write that cannot be sent, warning for
- * anything waiting, info while syncing, success when in sync — where keksdose had raw
- * rose/amber/sky/emerald pairs.
+ * anything waiting, info while syncing (or waiting for another tab's round), success when
+ * in sync — where keksdose had raw rose/amber/sky/emerald pairs.
  */
 export declare function SyncStatusIndicator({ status, onSync, hideWhenIdle, scope, showLabel, labels: labelsProp, locale: localeProp, className, storage, ...rest }: SyncStatusIndicatorProps): import("react").JSX.Element | null;

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

@@ -1,7 +1,7 @@
 "use client";
 import { jsx, jsxs } from "react/jsx-runtime";
 import { useEffect, useRef, useState } from "react";
-import { Check, Cloud, CloudAlert, CloudOff, RefreshCw, UploadCloud } from "lucide-react";
+import { Check, Cloud, CloudAlert, CloudOff, Hourglass, RefreshCw, UploadCloud } from "lucide-react";
 import { cn } from "../lib/cn.js";
 import { IconButton } from "../components/icon-button.js";
 import { Tooltip } from "../components/tooltip.js";
@@ -12,6 +12,7 @@ function syncState(status, refreshing = false) {
   if ((status.blocked ?? 0) > 0) return "blocked";
   if ((status.waitingForPlan ?? 0) > 0) return "waitingForPlan";
   if (!status.online || status.phase === "offline") return "offline";
+  if (status.waitingForTab) return "waitingForTab";
   if (status.phase === "error") return "error";
   if (status.phase === "syncing" || refreshing) return "syncing";
   if (status.pending > 0) return "pending";
@@ -23,6 +24,8 @@ const LOOK = {
   // Safe, and a payment sends them: amber, the kit's warning.
   waitingForPlan: { Icon: CloudAlert, tone: "warning" },
   offline: { Icon: CloudOff, tone: "warning" },
+  // A round under way, in another tab: info, as syncing, without the spin.
+  waitingForTab: { Icon: Hourglass, tone: "info" },
   // Usually resolves by itself (a deploy, a read-only view): amber, not danger.
   error: { Icon: CloudAlert, tone: "warning" },
   syncing: { Icon: RefreshCw, tone: "info" },
@@ -62,7 +65,10 @@ 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, waitingForTab: false } : status,
+    refreshing
+  );
   const data = dataAttributes(rest);
   if (hideWhenIdle && state === "synced") return null;
   const { Icon, tone } = LOOK[state];
@@ -78,6 +84,9 @@ function SyncStatusIndicator({
     case "offline":
       text = onlineOnly ? words.offlineUnsaved : words.offline;
       break;
+    case "waitingForTab":
+      text = words.waitingForTab;
+      break;
     case "error":
       text = words.refused;
       break;
@@ -96,11 +105,11 @@ function SyncStatusIndicator({
   if (scope) {
     text = state === "offline" && scope.offline ? scope.offline : words.scoped(scope.name, text);
   }
-  const short = state === "offline" ? words.offlineShort : state === "syncing" ? onlineOnly ? words.saving : words.syncingShort : state === "error" ? words.refusedShort : state === "pending" || state === "blocked" || state === "waitingForPlan" ? words.waitingShort(
+  const short = state === "offline" ? words.offlineShort : state === "syncing" ? onlineOnly ? words.saving : words.syncingShort : state === "error" ? words.refusedShort : state === "waitingForTab" ? words.waitingForTabShort : state === "pending" || state === "blocked" || state === "waitingForPlan" ? words.waitingShort(
     state === "pending" ? status.pending : state === "blocked" ? status.blocked ?? 0 : status.waitingForPlan ?? 0
   ) : null;
   const offline = state === "offline";
-  const canSync = !!onSync && status.online && status.phase !== "offline" && !spin;
+  const canSync = !!onSync && status.online && status.phase !== "offline" && !spin && state !== "waitingForTab";
   const name = onSync ? canSync ? words.withHint(text, words.syncHint) : offline ? words.withHint(text, words.offlineHint) : text : text;
   const badge = state === "synced" ? /* @__PURE__ */ jsx(Check, { className: "stroke-[3]" }) : void 0;
   const glyph = /* @__PURE__ */ jsx(Icon, { "aria-hidden": true, className: spin ? "animate-spin" : void 0 });

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(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":";AAqOqC,cAuC/B,YAvC+B;AArOrC,SAAS,WAAW,QAAQ,gBAAgB;AAE5C,SAAS,OAAO,OAAO,YAAY,UAAU,WAAW,mBAAmB;AAE3E,SAAS,UAAU;AACnB,SAAS,kBAAkB;AAC3B,SAAS,eAAe;AACxB,SAAS,wBAAwB;AACjC,SAAS,oBAAwC;AACjD,SAAS,4BAAmD;AAiCrD,SAAS,UAAU,QAAoB,aAAa,OAAkB;AAC3E,OAAK,OAAO,WAAW,KAAK,EAAG,QAAO;AACtC,OAAK,OAAO,kBAAkB,KAAK,EAAG,QAAO;AAC7C,MAAI,CAAC,OAAO,UAAU,OAAO,UAAU,UAAW,QAAO;AACzD,MAAI,OAAO,UAAU,QAAS,QAAO;AACrC,MAAI,OAAO,UAAU,aAAa,WAAY,QAAO;AACrD,MAAI,OAAO,UAAU,EAAG,QAAO;AAC/B,SAAO;AACT;AAIA,MAAM,OAA4E;AAAA;AAAA,EAEhF,SAAS,EAAE,MAAM,YAAY,MAAM,SAAS;AAAA;AAAA,EAE5C,gBAAgB,EAAE,MAAM,YAAY,MAAM,UAAU;AAAA,EACpD,SAAS,EAAE,MAAM,UAAU,MAAM,UAAU;AAAA;AAAA,EAE3C,OAAO,EAAE,MAAM,YAAY,MAAM,UAAU;AAAA,EAC3C,SAAS,EAAE,MAAM,WAAW,MAAM,OAAO;AAAA,EACzC,SAAS,EAAE,MAAM,aAAa,MAAM,UAAU;AAAA,EAC9C,QAAQ,EAAE,MAAM,OAAO,MAAM,UAAU;AACzC;AAEA,MAAM,YAAkC;AAAA,EACtC,QAAQ;AAAA,EACR,SAAS;AAAA,EACT,MAAM;AAAA,EACN,SAAS;AACX;AAgDA,SAAS,eAAe,MAAwD;AAC9E,SAAO,OAAO,YAAY,OAAO,QAAQ,IAAI,EAAE,OAAO,CAAC,CAAC,CAAC,MAAM,EAAE,WAAW,OAAO,CAAC,CAAC;AACvF;AAYO,SAAS,oBAAoB;AAAA,EAClC;AAAA,EACA;AAAA,EACA,eAAe;AAAA,EACf;AAAA,EACA,YAAY;AAAA,EACZ,QAAQ;AAAA,EACR,QAAQ;AAAA,EACR;AAAA,EACA,UAAU;AAAA,EACV,GAAG;AACL,GAA6B;AAC3B,QAAM,QAAQ,qBAAqB,aAAa,EAAE,MAAM,WAAW,IAAI,MAAS,EAAE;AAClF,QAAM,UAAU,iBAAiB;AACjC,QAAM,SAAS,aAAa,UAAU;AAGtC,QAAM,CAAC,YAAY,aAAa,IAAI,SAAS,KAAK;AAClD,QAAM,UAAU,OAAO,IAAI;AAC3B,YAAU,MAAM;AACd,YAAQ,UAAU;AAClB,WAAO,MAAM;AACX,cAAQ,UAAU;AAAA,IACpB;AAAA,EACF,GAAG,CAAC,CAAC;AAEL,QAAM,aAAa,YAAY;AAE/B,QAAM,QAAQ,UAAU,aAAa,EAAE,GAAG,QAAQ,SAAS,GAAG,SAAS,GAAG,gBAAgB,EAAE,IAAI,QAAQ,UAAU;AAClH,QAAM,OAAO,eAAe,IAAI;AAChC,MAAI,gBAAgB,UAAU,SAAU,QAAO;AAE/C,QAAM,EAAE,MAAM,KAAK,IAAI,KAAK,KAAK;AACjC,QAAM,OAAO,UAAU;AACvB,MAAI;AACJ,UAAQ,OAAO;AAAA,IACb,KAAK;AACH,aAAO,MAAM,QAAQ,OAAO,WAAW,CAAC;AACxC;AAAA,IACF,KAAK;AACH,aAAO,QAAQ,eAAe,OAAO,kBAAkB,CAAC;AACxD;AAAA,IACF,KAAK;AACH,aAAO,aAAa,MAAM,iBAAiB,MAAM;AACjD;AAAA,IACF,KAAK;AACH,aAAO,MAAM;AACb;AAAA,IACF,KAAK;AACH,aAAO,aAAa,MAAM,SAAS,MAAM;AACzC;AAAA,IACF,KAAK;AACH,aAAO,MAAM,QAAQ,OAAO,OAAO;AACnC;AAAA,IACF;AACE,aACE,CAAC,cAAc,OAAO,eAClB,MAAM;AAAA;AAAA,QAEJ,IAAI,KAAK,OAAO,YAAY,EAAE,mBAAmB,QAAQ,EAAE,MAAM,WAAW,QAAQ,UAAU,CAAC;AAAA,MACjG,IACA,MAAM;AAAA,EAChB;AACA,MAAI,OAAO;AACT,WAAO,UAAU,aAAa,MAAM,UAAU,MAAM,UAAU,MAAM,OAAO,MAAM,MAAM,IAAI;AAAA,EAC7F;AAEA,QAAM,QACJ,UAAU,YACN,MAAM,eACN,UAAU,YACR,aACE,MAAM,SACN,MAAM,eACR,UAAU,UACR,MAAM,eACN,UAAU,aAAa,UAAU,aAAa,UAAU,mBACtD,MAAM;AAAA,IACJ,UAAU,YACN,OAAO,UACP,UAAU,YACP,OAAO,WAAW,IAClB,OAAO,kBAAkB;AAAA,EAClC,IACA;AAEZ,QAAM,UAAU,UAAU;AAC1B,QAAM,UAAU,CAAC,CAAC,UAAU,OAAO,UAAU,OAAO,UAAU,aAAa,CAAC;AAC5E,QAAM,OAAO,SACT,UACE,MAAM,SAAS,MAAM,MAAM,QAAQ,IACnC,UACE,MAAM,SAAS,MAAM,MAAM,WAAW,IACtC,OACJ;AACJ,QAAM,QAAQ,UAAU,WAAW,oBAAC,SAAM,WAAU,cAAa,IAAK;AACtE,QAAM,QAAQ,oBAAC,QAAK,eAAW,MAAC,WAAW,OAAO,iBAAiB,QAAW;AAE9E,QAAM,OAAO,YAAY;AACvB,QAAI,CAAC,WAAW,CAAC,OAAQ;AACzB,kBAAc,IAAI;AAClB,QAAI;AACF,YAAM,OAAO;AAAA,IACf,UAAE;AACA,UAAI,QAAQ,QAAS,eAAc,KAAK;AAAA,IAC1C;AAAA,EACF;AAEA,QAAM,UAAU,SACd;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,mBAAiB;AAAA,MACjB,MAAK;AAAA,MACL,WAAW;AAAA,MACX,OAAM;AAAA,MAGN,eAAc;AAAA,MACd;AAAA,MACA,OAAO;AAAA,MACP,OAAO;AAAA,MACP,cAAc;AAAA,MAEd,aAAY;AAAA,MACZ,SAAS,MAAM,KAAK,KAAK;AAAA,MACzB,UAAU,CAAC;AAAA,MAEX,aAAU;AAAA,MACV;AAAA,MAEC;AAAA;AAAA,EACH,IAEA,oBAAC,WAAQ,OAAO,MAAM,MAAK,UACzB;AAAA,IAAC;AAAA;AAAA,MACE,GAAG;AAAA,MACJ,MAAK;AAAA,MACL,mBAAiB;AAAA,MACjB,WAAW;AAAA,QACT;AAAA,QACA,UAAU,IAAI;AAAA,MAChB;AAAA,MAEC;AAAA;AAAA,QACD,oBAAC,UAAK,WAAU,WAAW,gBAAK;AAAA,QAC/B,SACC;AAAA,UAAC;AAAA;AAAA,YACC,eAAW;AAAA,YACX,WAAU;AAAA,YAET;AAAA;AAAA,QACH;AAAA;AAAA;AAAA,EAEJ,GACF;AAGF,MAAI,CAAC,aAAa,CAAC;AACjB,WAAO,YAAY,oBAAC,UAAK,WAAW,GAAG,eAAe,SAAS,GAAI,mBAAQ,IAAU;AACvF,SACE,qBAAC,UAAK,WAAW,GAAG,kCAAkC,SAAS,GAC5D;AAAA;AAAA,IAED,oBAAC,UAAK,eAAW,MAAC,WAAW,GAAG,yCAAyC,UAAU,IAAI,CAAC,GACrF,iBACH;AAAA,KACF;AAEJ;","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, Hourglass, 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   * 0.55 (held back from 0.53): a round of this tab waits for another tab's on the same\n   * device copy — the sync engine's Web Lock (0.52) lets one tab's round run at a time — so\n   * nothing goes out from here until that one ends. `useSyncStatus` fills it from the\n   * engine's `waitingForTab`.\n   */\n  waitingForTab?: boolean;\n}\n\n/** The eight states, in their ranking: the first that holds wins. */\nexport type SyncState =\n  \"blocked\" | \"waitingForPlan\" | \"offline\" | \"waitingForTab\" | \"error\" | \"syncing\" | \"pending\" | \"synced\";\n\n/**\n * Which of the eight 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 *\n * 0.55 (held back from 0.53): a round waiting for another tab's (`waitingForTab`) ranks\n * after offline, which it cannot help either, and before the rest: it is the start of a\n * round, which replaces an error as `syncing` does once it runs, and the engine never says\n * it beside `syncing` — so it is what a tap's own round shows while it waits its turn.\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.waitingForTab) return \"waitingForTab\";\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  // A round under way, in another tab: info, as syncing, without the spin.\n  waitingForTab: { Icon: Hourglass, tone: \"info\" },\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). Disabled too while a round waits for another tab's (0.55): a tap would only\n   * queue one more behind it.\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`, `waitingForPlan` and `waitingForTab`\n   * are ignored, 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\", \"Waiting for tab\")\n   *  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`: its seven states and their ranking ({@link syncState}; 0.55 adds an\n * eighth, \"Waiting for another tab\", an hourglass), one cloud per state, a ✓ badge when in\n * sync and a spin while syncing. With `onSync` it is also the \"sync now\" button, and its\n * 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 (or waiting for another tab's round), success when\n * in sync — where keksdose had raw 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, waitingForTab: false } : 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 \"waitingForTab\":\n      text = words.waitingForTab;\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 === \"waitingForTab\"\n            ? words.waitingForTabShort\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  // Not while a round waits for another tab's either: a tap would queue one more behind it.\n  const canSync = !!onSync && status.online && status.phase !== \"offline\" && !spin && state !== \"waitingForTab\";\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.d.ts

@@ -65,6 +65,11 @@ export interface SyncStatusLabels {
     /** A round under way in an online-only app — it saves, it doesn't sync. Also its short
      *  words beside the cloud. */
     saving: string;
+    /** 0.55 (held back from 0.53): a round waits for another tab's on the same device copy
+     *  (the sync engine's Web Lock lets one tab sync at a time). */
+    waitingForTab: string;
+    /** Its short words beside the cloud. */
+    waitingForTabShort: string;
 }
 /**
  * `DevMenu`'s words (§2.7, §2.7.1, §6.2, §6.3). Still named for 0.42's `DevSwitchers`: the

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

@@ -30,7 +30,9 @@ const DEFAULT_TOP_BAR_PARTS_LABELS = {
     waitingShort: (count) => `${count} waiting`,
     refusedShort: "Not synced",
     offlineUnsaved: "Offline \u2014 changes can't be saved until you reconnect",
-    saving: "Saving\u2026"
+    saving: "Saving\u2026",
+    waitingForTab: "Waiting for another tab to finish syncing",
+    waitingForTabShort: "Waiting for tab"
   },
   dev: {
     menu: "Dev tools",