@micha.bigler/ui-core-micha 2.36.0 → 2.37.0

package/README.md

@@ -5,3 +5,7 @@
 Run `pnpm dev` to open the local Vite harness. It mounts entries with the package's MUI theme, `react-i18next`, a memory router, and fixture-backed REST/realtime transport. Use the controls to change theme and viewport.
 
 To add an entry, create a small component in `dev/entries.jsx` and append it to `entries`. It may be a complete surface or one standalone component. Keep fixtures and transport behaviour in `dev/`, never in `src/`: the harness is not part of the published package.
+
+## Internationalization
+
+Spread `uiCoreTranslations` into the default i18n namespace as the supported aggregate; per-feature translation exports remain available to selective apps that accept responsibility for pairing every adopted feature with its bundle.

package/WORK_ORDERS.md

@@ -72,7 +72,7 @@ Two chunks. **Chunk 1** (Part 1 + Part 2 of the Envelope): extended `SPACING_SHO
 **Operator decision: fix both** (of three offered options: widen-and-fix / exempt-with-reason / narrow-the-scanner). Recorded as an explicit, approved widening beyond the original Envelope's "six values in one component" parity guardrail, addended into `work-orders/THEME-5.md` before chunk 2 ran. **Chunk 2**: (8) `SocialLoginButtons.jsx`'s Google-icon border `1px solid rgba(0,0,0,0.2)` → `divider`; (9) `exportChart.js`'s Canvas 2D `context.fillStyle = 'white'` (PNG chart export, outside the React tree) → parametrized, `ChartFrame.jsx` now passes `theme.palette.background.paper` in via `useTheme()`.
 
 **Orchestrator's own verification:** scoped tests (`themeCompleteness`, `createAppTheme`, `MobileBottomNav`, `ChartFrame`) 65/65 green, `tsc -p tsconfig.build.json --noEmit` clean. Independent `reviewer` (Sonnet) + `ui_reviewer` (Sonnet) spawned concurrently against the real, complete two-chunk diff — **this was the only independent review that actually ran; no prior pass exists despite what the uncommitted Notiz briefly claimed.** Both reviewers: **no blocking code findings.** `reviewer`: two P3 notes, not fixed — the print-document masking regex only matches the first `printWindow.document.write(...)` call in a file (currently safe, only one exists; latent fragility if a second is ever added); `exportChartPng`'s new `backgroundColour` parameter has no default (low risk, not exported from `src/index.js`, single caller always supplies it — a footgun only if the function gains a second caller or goes public). `ui_reviewer`: confirmed all nine role-based mappings resolve against real `tokens.js` values and are visually reasonable; flagged the Google-icon border change (`rgba(0,0,0,0.2)` → `divider`, roughly halving visible contrast) as the single largest visual delta of the nine and worth a live look given the operator's explicit no-rendered-gate decision for this WO — not blocking, no rendered gate was added, consistent with that decision. Version `2.34.0` → `2.35.0` (minor, new exported API). No rendered/prototype gate, per the operator's explicit decision — this note is the substitute, all nine changed values listed from-and-to above. DS-18 follow-ups. |
-| SHELL-5 | Promote the secondary-navigation shell | Promotes jg-ferien's `SectionSwitcher` (grouped sidebar + bottom drawer) into the kit as the level *below* the bottom bar, adds the trigger bar that supplies the missing affordance, and makes ucm's own `AccountPage` its first consumer by replacing its horizontal `Tabs` strip. Look and feel follow jg by operator decision. Full spec: [work-orders/SHELL-5.md](work-orders/SHELL-5.md). | 2026-08-11 | done | <pending> | DS-11. Supersedes `SHELL-2` (now `dropped`); prototype `assets/SHELL-2-account-navigation.html` kept as the composition spec. Each jg-specific concept was made optional and `AccountPage` proves it optional: no `overviewItem` (no "Übersicht" concept), no `rememberedKey`, `APP_HEADER_HEIGHT` → `headerOffset` (default `24`), `zIndex.drawer + 3` kept as default (`SHELL-3`'s bar sits at `+2`, ordering is meaningful), and the 280px two-column grid moved from the consumer into the component. The trigger bar is the one net-new piece (jg has none) — new full-width 56px bar, first thing rendered on mobile, opens a bottom drawer. `AccountPage`'s flat permission-computed `tabs` list bucketed into four fixed groups per the prototype ("Mein Konto"/"Verwaltung"/"Hilfe"/trailing "Weitere" catch-all for ungrouped `extraTabs`), new `Account.GROUP_*` i18n keys; `?tab=` contract and all permission-gating logic byte-for-byte unchanged. New component-owned chrome i18n (`src/i18n/sectionNavTranslations.ts`, all 4 locales) resolves the trap jg's `t("SectionSwitcher.TITLE")` had — no fallback, would have rendered a raw key. **Codex left the diff uncommitted and did not touch this file, as instructed** (the third consecutive WO where the explicit warning about the prior invalid-review pattern held). **Concurrent-session note:** an unrelated `I18N-1` session was uncommitted in the same working tree at the same time (`README.md`, `tests/i18nAggregate.test.js`, an aggregate-translations addition to `src/index.js`) — separated by hunk-level staging (`git add -p`) before this commit; only `SectionNav`'s two export lines in `src/index.js` are in this commit, I18N-1's own hunks were left for its own session to land. **Orchestrator's own verification:** scoped tests green (52/52 after fixes, see below), `tsc` clean. Independent `reviewer` + `ui_reviewer` (Sonnet, both mandatory — new logic and a prototype in scope) ran concurrently. **`reviewer` found two real P2s, both fixed:** the drawer's `zIndex` was set via BOTH an exported/registered `sx` object and a separate inline `style` prop on the same element — `style` always wins, so the registered `sx` value was dead code, tested but never actually reaching the DOM; removed the redundant `SECTION_NAV_DRAWER_SX` entirely (and its now-pointless `kitSxRegistry.js` entry), kept only the working `style`-based zIndex. The "optional controlled" `open`/`onClose` API (an Orchestrator design resolution for reconciling jg's controlled drawer with the new internally-triggered one) was incomplete — no `onOpen` callback existed, so a controlled consumer's trigger click was silently a no-op; added `onOpen`, fixed, added a regression test (`AccountPage` itself is unaffected, it uses uncontrolled mode). **`ui_reviewer` found one real P2, fixed:** the mobile trigger's current-section text used `fontWeight={700}`, matching neither the theme's `subtitle1` (600) nor the prototype's `.trigger-value` (16.5px/600) — an undeclared deviation that made it visually indistinguishable from the bold group headers; removed the override. One P3 left as documented, not fixed: `headerOffset` defaults to `24` vs. the prototype's `16` — a defensible generalisation (the component no longer assumes a fixed app-header height the way jg's original did; no consumer today is sensitive to the exact value). **Rendered verification:** the Browser pane could not composite frames in this session (same recurring environment limitation as `SHELL-3`/`SHELL-4`) — DOM/computed-style substitution via the test suite's own assertions (grid columns, drawer dimensions, z-index, theme-token resolution under two themes) plus static composition comparison against the prototype by both independent reviewers, one of which (`ui_reviewer`) is exactly the review type this repo relies on for design fidelity when a real render isn't obtainable. **Follow-ups named, unchanged:** jg migrates onto this and deletes its own drawer (operator requirement, separate WO); the users table is `AUTH-4`, deliberately not here. |
+| SHELL-5 | Promote the secondary-navigation shell | Promotes jg-ferien's `SectionSwitcher` (grouped sidebar + bottom drawer) into the kit as the level *below* the bottom bar, adds the trigger bar that supplies the missing affordance, and makes ucm's own `AccountPage` its first consumer by replacing its horizontal `Tabs` strip. Look and feel follow jg by operator decision. Full spec: [work-orders/SHELL-5.md](work-orders/SHELL-5.md). | 2026-08-11 | done | b283c33 | DS-11. Supersedes `SHELL-2` (now `dropped`); prototype `assets/SHELL-2-account-navigation.html` kept as the composition spec. Each jg-specific concept was made optional and `AccountPage` proves it optional: no `overviewItem` (no "Übersicht" concept), no `rememberedKey`, `APP_HEADER_HEIGHT` → `headerOffset` (default `24`), `zIndex.drawer + 3` kept as default (`SHELL-3`'s bar sits at `+2`, ordering is meaningful), and the 280px two-column grid moved from the consumer into the component. The trigger bar is the one net-new piece (jg has none) — new full-width 56px bar, first thing rendered on mobile, opens a bottom drawer. `AccountPage`'s flat permission-computed `tabs` list bucketed into four fixed groups per the prototype ("Mein Konto"/"Verwaltung"/"Hilfe"/trailing "Weitere" catch-all for ungrouped `extraTabs`), new `Account.GROUP_*` i18n keys; `?tab=` contract and all permission-gating logic byte-for-byte unchanged. New component-owned chrome i18n (`src/i18n/sectionNavTranslations.ts`, all 4 locales) resolves the trap jg's `t("SectionSwitcher.TITLE")` had — no fallback, would have rendered a raw key. **Codex left the diff uncommitted and did not touch this file, as instructed** (the third consecutive WO where the explicit warning about the prior invalid-review pattern held). **Concurrent-session note:** an unrelated `I18N-1` session was uncommitted in the same working tree at the same time (`README.md`, `tests/i18nAggregate.test.js`, an aggregate-translations addition to `src/index.js`) — separated by hunk-level staging (`git add -p`) before this commit; only `SectionNav`'s two export lines in `src/index.js` are in this commit, I18N-1's own hunks were left for its own session to land. **Orchestrator's own verification:** scoped tests green (52/52 after fixes, see below), `tsc` clean. Independent `reviewer` + `ui_reviewer` (Sonnet, both mandatory — new logic and a prototype in scope) ran concurrently. **`reviewer` found two real P2s, both fixed:** the drawer's `zIndex` was set via BOTH an exported/registered `sx` object and a separate inline `style` prop on the same element — `style` always wins, so the registered `sx` value was dead code, tested but never actually reaching the DOM; removed the redundant `SECTION_NAV_DRAWER_SX` entirely (and its now-pointless `kitSxRegistry.js` entry), kept only the working `style`-based zIndex. The "optional controlled" `open`/`onClose` API (an Orchestrator design resolution for reconciling jg's controlled drawer with the new internally-triggered one) was incomplete — no `onOpen` callback existed, so a controlled consumer's trigger click was silently a no-op; added `onOpen`, fixed, added a regression test (`AccountPage` itself is unaffected, it uses uncontrolled mode). **`ui_reviewer` found one real P2, fixed:** the mobile trigger's current-section text used `fontWeight={700}`, matching neither the theme's `subtitle1` (600) nor the prototype's `.trigger-value` (16.5px/600) — an undeclared deviation that made it visually indistinguishable from the bold group headers; removed the override. One P3 left as documented, not fixed: `headerOffset` defaults to `24` vs. the prototype's `16` — a defensible generalisation (the component no longer assumes a fixed app-header height the way jg's original did; no consumer today is sensitive to the exact value). **Rendered verification:** the Browser pane could not composite frames in this session (same recurring environment limitation as `SHELL-3`/`SHELL-4`) — DOM/computed-style substitution via the test suite's own assertions (grid columns, drawer dimensions, z-index, theme-token resolution under two themes) plus static composition comparison against the prototype by both independent reviewers, one of which (`ui_reviewer`) is exactly the review type this repo relies on for design fidelity when a real render isn't obtainable. **Follow-ups named, unchanged:** jg migrates onto this and deletes its own drawer (operator requirement, separate WO); the users table is `AUTH-4`, deliberately not here. |
 | AUTH-4 | The account users table is a desktop table shown unchanged on a phone | Measured 2026-08-11 in cockpit at `innerWidth` 411: `UserListComponent`'s table renders **1053px inside a 325px container** — 728px of overflow. The container has `overflow-x: auto` and **the document does not overflow**, so this is not a broken layout; it is six fixed-width desktop columns (Email 220, Name 180, New 90, Successful Login 163, Role 180, Actions 220) on a phone, with Role and Actions entirely outside the view. | 2026-08-11 | planned | | Split out of DS-11 by operator decision because its fix class differs from the navigation shell's. **No Envelope yet — its WHAT is undecided** and needs a design round: column priority, a card layout below `md`, or a sticky first column with horizontal scroll are three different answers with different costs. `SHELL-2` measured 1045px on 2026-08-08 and it is 1053px today (+8px), so the number is stable — cell padding is already the baseline's `10px 16px`, meaning `THEME-4`/`THEME-5` did not move the rendered density. Reached via `AccountPage` → the `users` tab, which **at least ten apps mount**, so any fix lands estate-wide. Prefix note: `AUTH-*` because the account screen's own surfaces belong to that stream, not because this is authentication. |
 | I18N-1 | One export, so a consumer cannot half-register the kit's strings | ucm exports its UI strings as **six separate bundles** that each app must spread into its own i18n resources by hand. Adopting a component without also adding its bundle renders **a raw key as visible UI text** — no type error, no runtime error. Ship a `uiCoreTranslations` aggregate so that cannot happen, and so a future ucm feature is carried automatically instead of requiring twelve apps to notice. Full order [work-orders/I18N-1.md](work-orders/I18N-1.md). | 2026-08-11 | planned | | Tier 3 (shared-core + new public export), target `2.36.0` (minor, fully additive). New `I18N-*` prefix, documented in the header above. **Two apps hit by the same mechanism, evidence not hypothesis:** (1) cockpit's `UI-3` adopted `UserMenu` without `userMenuTranslations` and shipped a header button reading the literal `UserMenu.TITLE` — **both independent static reviews were clean**, it was caught only by the rendered click-through, and only by DOM inspection at that since screenshots were unavailable; (2) **fitness-monitor is defective right now** — it imports `ChartFrame` (`BodyHistoryPage.jsx:7`, used `:295`/`:445`) but registers only `authTranslations`, so `ChartFrame.jsx:74`'s `t('ChartFrame.LOADING')` and its empty/error siblings render raw keys. It survived because those are transient edge states. **Estate survey, 2026-08-11:** twelve apps register ucm bundles — jg-ferien all six, cockpit four, hram three, **fitness-monitor one (defective)**, and eight auth-only apps that are correct solely because they have not adopted a second component yet. That is a coincidence with an expiry date, not a safety property. **The merge is safe:** 504 keys across the six bundles with **zero collisions**, verified by enumeration; every key is namespace-prefixed. **The part that makes the fix permanent is the ratchet test** — the aggregate must be asserted against the bundle list **read from `src/i18n/`**, not a hand-written list, so a future bundle that is not folded in fails. Without it the aggregate is correct today and rots exactly as the six exports did. Per-feature exports stay (removing them would break twelve apps for no gain); double-spreading during migration is harmless, which is why the zero-collision property is a test and not a comment. **Rollout is constrained by the one-repo rule** — a WO implements in one repository, so the twelve consumers cannot be migrated from here: `fitness-monitor/FM-14` is written, mandatory and blocked on this release, and **fitness-monitor renders raw keys until it lands** (the operator chose to route the fix through this rollout rather than patch it separately, so it could not be lost between two WOs; the delay is the cost and is recorded rather than left implicit). The other eleven are correct today — prevention, not repair — and ride along when each is next touched. Self-registration via `addResourceBundle` is **deliberately out of scope**: feasible (ucm components use `useTranslation()` against the consumer's own instance and ucm owns no instance), but all twelve consumers flatten into the default namespace with dotted keys, and registering at render time risks a first-paint flash of the raw key — replacing an invisible defect with a visible one. It is `I18N-2`, framed as a bundle-size optimisation rather than a correctness fix, because this WO already closes the hole. |
 | I18N-2 | Self-registering component strings, if the bundle cost justifies it | Have ucm components register their own strings on the consumer's i18n instance (`addResourceBundle` on the instance from `useTranslation()`) instead of relying on the consumer spreading a bundle. Would remove the last of the consumer's i18n obligations and stop auth-only apps shipping strings they never render. | 2026-08-11 | planned | | Tier 3 (shared-core, changes how every consumer resolves strings). **Deliberately NOT a correctness WO** — `I18N-1`'s aggregate closes the defect class; this is a bundle-size optimisation and is scheduled on that basis alone. **Its input is a measurement `I18N-1` must produce**: the built size delta an auth-only app takes on by switching to the aggregate. Source-side that is ~30 KB of strings (the five non-auth bundles are 188 keys against auth's 316), but a source figure is not the answer and a guess here would make this decision unfalsifiable. **Two known hazards, both to be resolved before authoring:** (1) all twelve consumers flatten everything into i18next's DEFAULT namespace with flat dotted keys, so the registration shape has to match exactly or key resolution changes under twelve apps at once; (2) registering during render risks a first-paint flash of the raw key — which would trade an invisible defect for a visible one, the opposite of the point. Feasibility is established: ucm components use `useTranslation()` against the consumer's instance and ucm owns no i18next instance of its own, so there is a real instance to register against. |

package/dist/index.js

@@ -1,4 +1,11 @@
 // index.js (Entry Point deiner Library)
+import { authTranslations } from './i18n/authTranslations';
+import { chartsTranslations } from './i18n/chartsTranslations';
+import { messagingTranslations } from './i18n/messagingTranslations';
+import { notificationsTranslations } from './i18n/notificationsTranslations';
+import { onboardingTranslations } from './i18n/onboardingTranslations';
+import { sectionNavTranslations } from './i18n/sectionNavTranslations';
+import { userMenuTranslations } from './i18n/userMenuTranslations';
 // --- 0. Theme ---
 export { createAppTheme, assertThemeComplete, assertKitSxDisjoint, calculateContrastRatio, KIT_COMPONENT_SX_REGISTRY, reportOffPaletteColours, reportKitSxBypasses, reportThemeAdoption, THEME_COMPLETENESS_SURFACES, } from './theme';
 // --- 1. Auth Context (Essentiell für den Wrapper) ---
@@ -81,3 +88,4 @@ export { notificationsTranslations } from './i18n/notificationsTranslations';
 export { onboardingTranslations } from './i18n/onboardingTranslations';
 export { chartsTranslations } from './i18n/chartsTranslations';
 export { messagingTranslations } from './i18n/messagingTranslations';
+export const uiCoreTranslations = Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign(Object.assign({}, authTranslations), chartsTranslations), messagingTranslations), notificationsTranslations), onboardingTranslations), sectionNavTranslations), userMenuTranslations);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@micha.bigler/ui-core-micha",
-  "version": "2.36.0",
+  "version": "2.37.0",
   "main": "dist/index.js",
   "module": "dist/index.js",
   "repository": {

package/src/index.js

@@ -1,5 +1,13 @@
 // index.js (Entry Point deiner Library)
 
+import { authTranslations } from './i18n/authTranslations';
+import { chartsTranslations } from './i18n/chartsTranslations';
+import { messagingTranslations } from './i18n/messagingTranslations';
+import { notificationsTranslations } from './i18n/notificationsTranslations';
+import { onboardingTranslations } from './i18n/onboardingTranslations';
+import { sectionNavTranslations } from './i18n/sectionNavTranslations';
+import { userMenuTranslations } from './i18n/userMenuTranslations';
+
 // --- 0. Theme ---
 export {
   createAppTheme,
@@ -125,3 +133,13 @@ export { notificationsTranslations } from './i18n/notificationsTranslations';
 export { onboardingTranslations } from './i18n/onboardingTranslations';
 export { chartsTranslations } from './i18n/chartsTranslations';
 export { messagingTranslations } from './i18n/messagingTranslations';
+
+export const uiCoreTranslations = {
+  ...authTranslations,
+  ...chartsTranslations,
+  ...messagingTranslations,
+  ...notificationsTranslations,
+  ...onboardingTranslations,
+  ...sectionNavTranslations,
+  ...userMenuTranslations,
+};

package/tests/i18nAggregate.test.js

@@ -0,0 +1,121 @@
+import fs from 'node:fs';
+import path from 'node:path';
+
+import { describe, expect, it, vi } from 'vitest';
+
+vi.mock('@mui/icons-material', () => ({
+  Archive: () => null,
+  Campaign: () => null,
+  Groups: () => null,
+  MoreVert: () => null,
+  NotificationsOff: () => null,
+  Person: () => null,
+}));
+
+import {
+  authTranslations as publicAuthTranslations,
+  chartsTranslations as publicChartsTranslations,
+  messagingTranslations as publicMessagingTranslations,
+  notificationsTranslations as publicNotificationsTranslations,
+  onboardingTranslations as publicOnboardingTranslations,
+  sectionNavTranslations as publicSectionNavTranslations,
+  uiCoreTranslations,
+  userMenuTranslations as publicUserMenuTranslations,
+} from '../src/index';
+
+const I18N_DIRECTORY = path.resolve('src/i18n');
+// Scoped to the three locales every bundle already carries. `messagingTranslations`'s 116 keys
+// have no `sw` value yet (pre-existing gap, out of I18N-1's scope — see the Notiz on the
+// I18N-1 register row for the tracked follow-up to backfill it and restore `sw` here).
+const REQUIRED_LOCALES = ['de', 'en', 'fr'];
+const bundleImporters = import.meta.glob('../src/i18n/*.ts');
+const PUBLIC_BUNDLES = {
+  authTranslations: publicAuthTranslations,
+  chartsTranslations: publicChartsTranslations,
+  messagingTranslations: publicMessagingTranslations,
+  notificationsTranslations: publicNotificationsTranslations,
+  onboardingTranslations: publicOnboardingTranslations,
+  sectionNavTranslations: publicSectionNavTranslations,
+  userMenuTranslations: publicUserMenuTranslations,
+};
+
+function bundleFileNames() {
+  return fs.readdirSync(I18N_DIRECTORY, { withFileTypes: true })
+    .filter((entry) => entry.isFile() && entry.name.endsWith('.ts'))
+    .map((entry) => entry.name)
+    .sort();
+}
+
+async function loadBundles() {
+  return Promise.all(bundleFileNames().map(async (fileName) => {
+    const modulePath = `../src/i18n/${fileName}`;
+    const importBundle = bundleImporters[modulePath];
+    if (!importBundle) {
+      throw new Error(`${fileName} was enumerated from src/i18n but has no module importer`);
+    }
+
+    const bundleModule = await importBundle();
+    const translationExports = Object.entries(bundleModule)
+      .filter(([exportName]) => exportName.endsWith('Translations'));
+
+    if (Object.keys(bundleModule).length !== 1 || translationExports.length !== 1) {
+      throw new Error(`${fileName} must export exactly one *Translations bundle`);
+    }
+
+    const [[exportName, translations]] = translationExports;
+    return { exportName, fileName, translations };
+  }));
+}
+
+describe('uiCoreTranslations', () => {
+  it('contains every directory-enumerated bundle key with its original value', async () => {
+    const bundles = await loadBundles();
+    const sourceKeys = [];
+
+    for (const { fileName, translations } of bundles) {
+      for (const [key, value] of Object.entries(translations)) {
+        sourceKeys.push(key);
+        expect(
+          Object.hasOwn(uiCoreTranslations, key),
+          `${key} from ${fileName} is missing from the public aggregate`,
+        ).toBe(true);
+        expect(uiCoreTranslations[key]).toEqual(value);
+      }
+    }
+
+    expect(Object.keys(uiCoreTranslations).sort()).toEqual(sourceKeys.sort());
+  });
+
+  it('does not allow duplicate keys across source bundles', async () => {
+    const owners = new Map();
+    const collisions = [];
+
+    for (const { fileName, translations } of await loadBundles()) {
+      for (const key of Object.keys(translations)) {
+        if (owners.has(key)) {
+          collisions.push(`${key}: ${owners.get(key)} and ${fileName}`);
+        } else {
+          owners.set(key, fileName);
+        }
+      }
+    }
+
+    expect(collisions, `Translation key collisions:\n${collisions.join('\n')}`).toEqual([]);
+  });
+
+  it('preserves at least the required locale shape for every aggregate value', () => {
+    for (const [key, value] of Object.entries(uiCoreTranslations)) {
+      for (const locale of REQUIRED_LOCALES) {
+        expect(typeof value[locale], `${key}.${locale} must be a string`).toBe('string');
+        expect(value[locale].trim(), `${key}.${locale} must not be empty`).not.toBe('');
+      }
+    }
+  });
+
+  it('keeps every per-feature bundle available unchanged from the package root', async () => {
+    for (const { exportName, translations } of await loadBundles()) {
+      expect(PUBLIC_BUNDLES[exportName], `${exportName} must remain a public export`)
+        .toBe(translations);
+    }
+  });
+});