@micha.bigler/ui-core-micha 3.14.3 → 4.0.0

package/dev/fixtures.js

@@ -1,26 +0,0 @@
-export const notificationFixtures = [
-  {
-    id: 101,
-    notification_id: 501,
-    notification_type: 'case.updated',
-    content: { title_key: 'harness.caseUpdated', body_key: 'harness.caseUpdatedBody' },
-    created_at: '2026-07-31T09:00:00Z',
-    seen_at: null,
-  },
-  {
-    id: 102,
-    notification_id: 502,
-    notification_type: 'case.assigned',
-    content: { title_key: 'harness.caseAssigned', body_key: 'harness.caseAssignedBody' },
-    created_at: '2026-07-30T12:00:00Z',
-    seen_at: '2026-07-30T12:05:00Z',
-  },
-];
-
-export const barChartFixture = {
-  series: [
-    { data: [24, 36, 28, 52], label: 'Opened' },
-    { data: [18, 29, 31, 44], label: 'Resolved' },
-  ],
-  xAxis: [{ data: ['Apr', 'May', 'Jun', 'Jul'] }],
-};

package/dev/main.jsx

@@ -1,75 +0,0 @@
-import { StrictMode, useMemo, useState } from 'react';
-import { createRoot } from 'react-dom/client';
-import { I18nextProvider } from 'react-i18next';
-import i18next from 'i18next';
-import { MemoryRouter } from 'react-router-dom';
-import { Box, Button, ButtonGroup, CssBaseline, FormControl, InputLabel, MenuItem, Paper, Select, Stack, ThemeProvider, Typography, createTheme } from '@mui/material';
-
-import { chartsTranslations } from '../src/i18n/chartsTranslations';
-import { notificationsTranslations } from '../src/i18n/notificationsTranslations';
-import { messagingTranslations } from '../src/i18n/messagingTranslations';
-import { sectionNavTranslations } from '../src/i18n/sectionNavTranslations';
-import { createAppTheme } from '../src/theme/createAppTheme';
-import { entries } from './entries';
-import { MockTransportProvider } from './mockTransport';
-
-const translations = Object.fromEntries(
-  Object.entries({
-    ...notificationsTranslations,
-    ...chartsTranslations,
-    ...messagingTranslations,
-    ...sectionNavTranslations,
-  }).map(([key, value]) => [key, value.en]),
-);
-Object.assign(translations, {
-  'harness.caseUpdated': 'Case updated',
-  'harness.caseUpdatedBody': 'The case is ready for review.',
-  'harness.caseAssigned': 'Case assigned',
-  'harness.caseAssignedBody': 'A case was assigned to you.',
-});
-
-const i18n = i18next.createInstance();
-i18n.init({ lng: 'en', fallbackLng: 'en', resources: { en: { translation: translations } }, interpolation: { escapeValue: false } });
-
-function Harness() {
-  const [entryId, setEntryId] = useState(entries[0].id);
-  const [mode, setMode] = useState('light');
-  const [width, setWidth] = useState('desktop');
-  const entry = entries.find((item) => item.id === entryId) || entries[0];
-  const usesBaselineTheme = ['theme-baseline', 'mobile-bottom-nav'].includes(entry.id);
-  const usesBrowserViewport = entry.id === 'mobile-bottom-nav';
-  const effectiveMode = mode;
-  const theme = useMemo(
-    () => usesBaselineTheme
-      ? createAppTheme({ palette: { mode, primary: { main: '#3D5A99' } } })
-      : createTheme({ palette: { mode } }),
-    [mode, usesBaselineTheme],
-  );
-  const viewportWidth = width === 'mobile' ? 390 : width === 'tablet' ? 768 : 1180;
-  const Entry = entry.Component;
-
-  return (
-    <ThemeProvider theme={theme}>
-      <CssBaseline />
-      <Box sx={{ minHeight: '100vh', p: 3, bgcolor: 'background.default' }}>
-        <Stack direction={{ xs: 'column', md: 'row' }} spacing={2} sx={{ mb: 3 }} alignItems={{ md: 'center' }}>
-          <Typography variant="h5" sx={{ mr: 'auto' }}>ui-core-micha harness</Typography>
-          <FormControl size="small" sx={{ minWidth: 220 }}><InputLabel id="entry-label">Entry</InputLabel><Select labelId="entry-label" label="Entry" value={entryId} onChange={(event) => setEntryId(event.target.value)}>{entries.map((item) => <MenuItem key={item.id} value={item.id}>{item.label}</MenuItem>)}</Select></FormControl>
-          <ButtonGroup size="small"><Button variant={effectiveMode === 'light' ? 'contained' : 'outlined'} onClick={() => setMode('light')}>Light</Button><Button variant={effectiveMode === 'dark' ? 'contained' : 'outlined'} onClick={() => setMode('dark')}>Dark</Button></ButtonGroup>
-          {usesBrowserViewport ? (
-            <Typography variant="caption" color="text.secondary">Use the browser viewport for this specimen</Typography>
-          ) : (
-            <ButtonGroup size="small">{['mobile', 'tablet', 'desktop'].map((size) => <Button key={size} variant={width === size ? 'contained' : 'outlined'} onClick={() => setWidth(size)}>{size}</Button>)}</ButtonGroup>
-          )}
-        </Stack>
-        <Paper variant="outlined" sx={{ width: viewportWidth, maxWidth: '100%', mx: 'auto', p: 3, overflow: 'hidden', containerType: 'inline-size' }}>
-          <Entry />
-        </Paper>
-      </Box>
-    </ThemeProvider>
-  );
-}
-
-createRoot(document.getElementById('root')).render(
-  <StrictMode><I18nextProvider i18n={i18n}><MemoryRouter><MockTransportProvider><Harness /></MockTransportProvider></MemoryRouter></I18nextProvider></StrictMode>,
-);

package/dev/mockTransport.jsx

@@ -1,128 +0,0 @@
-import { createContext, useContext, useMemo, useRef } from 'react';
-
-import apiClient from '../src/auth/apiClient';
-import { RealtimeContext } from '../src/notifications/realtime';
-import { notificationFixtures } from './fixtures';
-
-const MockTransportContext = createContext(null);
-
-/**
- * Stands in for the browser's WebSocket wherever a component (e.g.
- * NotificationsProvider) opens its own socket internally via
- * `useRealtimeCore` rather than reading it from context — that path can't be
- * satisfied by wrapping RealtimeContext.Provider, since the component never
- * looks at ambient context for it. Registering this as `window.WebSocket`
- * lets the harness intercept the connection at the point the component
- * actually creates it, instead of opening a real (and always-failing)
- * socket to a harness-local URL.
- */
-class MockWebSocket {
-  constructor(url) {
-    this.url = url;
-    this.readyState = MockWebSocket.CONNECTING;
-    MockWebSocket._instances.add(this);
-    // Mirror the async-open timing of a real WebSocket handshake.
-    setTimeout(() => {
-      this.readyState = MockWebSocket.OPEN;
-      this.onopen?.(new Event('open'));
-    }, 0);
-  }
-
-  send() {}
-
-  close() {
-    this.readyState = MockWebSocket.CLOSED;
-    MockWebSocket._instances.delete(this);
-    this.onclose?.(new CloseEvent('close'));
-  }
-
-  static _instances = new Set();
-
-  static dispatch(frame) {
-    const payload = { data: JSON.stringify(frame) };
-    MockWebSocket._instances.forEach((socket) => {
-      if (socket.readyState === MockWebSocket.OPEN) socket.onmessage?.(payload);
-    });
-  }
-}
-MockWebSocket.CONNECTING = 0;
-MockWebSocket.OPEN = 1;
-MockWebSocket.CLOSING = 2;
-MockWebSocket.CLOSED = 3;
-
-export function createMockTransport({ notifications = notificationFixtures } = {}) {
-  let feed = [...notifications];
-  const subscribers = new Map();
-  const reconnectSubscribers = new Set();
-
-  return {
-    async adapter(config) {
-      const { method = 'get', url = '' } = config;
-      let data = {};
-      if (method === 'get' && url === '/api/notifications/feed/') {
-        data = { results: feed };
-      } else if (method === 'get' && url === '/api/notifications/feed/unread-count/') {
-        data = { count: feed.filter((item) => !item.seen_at && !item.dismissed_at).length };
-      } else if (method === 'post' && url === '/api/notifications/feed/mark/') {
-        const { action, ids = [] } = JSON.parse(config.data || '{}');
-        feed = feed.map((item) => (ids.includes(item.id)
-          ? { ...item, [`${action}_at`]: item[`${action}_at`] || new Date().toISOString() }
-          : item));
-        data = { updated: ids.length };
-      } else {
-        return Promise.reject(new Error(`No harness response for ${method.toUpperCase()} ${url}`));
-      }
-      return { config, data, headers: {}, status: 200, statusText: 'OK' };
-    },
-    subscribe(envelope, handler) {
-      const handlers = subscribers.get(envelope) || new Set();
-      handlers.add(handler);
-      subscribers.set(envelope, handlers);
-      return () => handlers.delete(handler);
-    },
-    // Mirrors the shape `useRealtimeCore` returns (`{ subscribe, onReconnect }`,
-    // the MSG-3 chunk-1 additive extension) so a component that calls
-    // `onReconnect()` internally (e.g. MessagingProvider) can be exercised in
-    // the harness the same way `dispatchReconnect()` lets it be triggered.
-    onReconnect(handler) {
-      reconnectSubscribers.add(handler);
-      return () => reconnectSubscribers.delete(handler);
-    },
-    // Drives both consumption paths: components reading `useRealtime()`
-    // from an ambient RealtimeContext (e.g. a harness entry composed
-    // directly under MockTransportProvider), and components that open
-    // their own socket internally (e.g. NotificationsProvider), which
-    // receive the frame via the intercepted `window.WebSocket` instead.
-    dispatch(frame) {
-      const envelope = frame.envelope || 'notification';
-      subscribers.get(envelope)?.forEach((handler) => handler(frame));
-      MockWebSocket.dispatch(frame);
-    },
-    dispatchReconnect() {
-      reconnectSubscribers.forEach((handler) => handler());
-    },
-  };
-}
-
-export function MockTransportProvider({ children }) {
-  const transportRef = useRef(null);
-  if (!transportRef.current) {
-    transportRef.current = createMockTransport();
-    apiClient.defaults.adapter = transportRef.current.adapter;
-    window.WebSocket = MockWebSocket;
-  }
-  const transport = transportRef.current;
-  const realtimeValue = useMemo(() => ({ subscribe: transport.subscribe, onReconnect: transport.onReconnect }), [transport]);
-
-  return (
-    <MockTransportContext.Provider value={transport}>
-      <RealtimeContext.Provider value={realtimeValue}>{children}</RealtimeContext.Provider>
-    </MockTransportContext.Provider>
-  );
-}
-
-export function useMockTransport() {
-  const transport = useContext(MockTransportContext);
-  if (!transport) throw new Error('useMockTransport must be used within MockTransportProvider');
-  return transport;
-}

package/docs/CHART-LAYOUT.md

@@ -1,157 +0,0 @@
-# Chart layout model (UCM-CHART-12)
-
-One function, `resolveChartLayout` (`src/components/charts/chartDefaults.js`), owns the geometry
-of every chart preset (`BarChart`, `LineChart`, `ScatterChart`, and indirectly `TimeSeriesChart`,
-which wraps `BarChart`). It replaces `resolveChartHeight`, `spaceForRotatedTicks`, and
-`warnOnHeightMismatch` — all three deleted in this version. This is a **breaking major (`3.0.0`)**.
-
-## The model
-
-Every reserved band is derived from the content it holds and collapses to zero when that content
-is empty. Consumers express intent, never pixels.
-
-```
-chartHeight === plotHeight + xAxisBand + xTitleBand + legendBand
-```
-
-- `xAxisBand` — the tick row. Zero when the axis has no visible tick content (an empty `data`
-  array, or every formatted tick is a blank string). Non-zero otherwise: for horizontal labels, a
-  floor of 25px (MUI X-Charts' own `DEFAULT_AXIS_SIZE_HEIGHT`) scaled up from the actual tick font
-  size once it needs more room than that floor leaves MUI's own internal fit check — a flat floor
-  alone was a near-miss with essentially no margin at any font size above whatever MUI itself
-  implicitly assumed (`UCM-CHART-16`); or a measured/estimated projection for rotated ones (same
-  measurement mechanism as before — a real DOM measurement when available, a per-glyph estimate
-  otherwise). The title addition (20px, `AXIS_LABEL_DEFAULT_HEIGHT`) grows by a further few pixels
-  when an axis title shares the tick row's band, matching the extra gap MUI itself reserves
-  between the two.
-- `xTitleBand` — the axis title. Zero unless the x-axis carries a `label`.
-- `legendBand` — one row for the legend. Zero when `hideLegend` is set.
-- `plotHeight` is the residual: `chartHeight` minus the three bands above.
-- The y-axis band collapses to zero the same way the x-axis one does: candidates existed (the
-  axis has real `min`/`max` or plotted data) but a caller `valueFormatter` blanks every formatted
-  tick, and there is no axis title either — the axis has nothing to show, so it reserves nothing.
-  Distinct from "nothing to measure at all" (no `min`/`max`/data), where MUI's own default applies
-  untouched.
-
-Width follows the same shape (`yAxisBand + plotWidth + secondaryYAxisBand + rightPad`), but the
-presets stay responsive — they never fix a pixel width — so `plotWidth`/`containerWidth` are only
-meaningful when a caller explicitly supplies `containerWidth` (tests, or the browser-level check);
-the presets themselves never pass it. A **secondary (right-positioned) y-axis** — `TimeSeriesChart`'s
-`axis: 'secondary'` feature, or any preset given a two-entry `yAxis` array with one `position:
-'right'` — reserves its own width on the right, added to `margin.right` alongside the fixed
-breathing-room pad; an axis with no explicit `position` defaults to the left, matching MUI's own
-default-assignment rule.
-
-## Removed props, and their replacement
-
-| Removed prop | Replacement | Why |
-|---|---|---|
-| `minHeight` | `size` (see below) | A floor was a *card* concern, not a chart one — `ChartFrame` still has its own `minHeight`, unchanged. |
-| `aspect` | `size` | One size source, system-wide (operator decision). A chart's height no longer tracks its width. |
-| `margin` | *(none)* | The model owns margins completely — spacing between a chart and its neighbours is the card's job. |
-| `xAxisAngle` / a caller-set `tickLabelStyle.angle` | `xLabels: "auto" \| "horizontal" \| "angled"` | Under `"auto"` the model decides from the tick count and label length whether rotation is needed — a consumer no longer states a rotation and separately pays for its geometry. |
-
-Passing a removed prop throws in development (`assertRemovedChartProp`), naming the replacement.
-It is inert in production — a shared package must not crash a consumer's page over a layout prop.
-This is deliberate, not a silent ignore: every call site that still passes `minHeight`/`aspect`/
-`margin` will see it immediately in dev.
-
-## `size` — before / after
-
-```diff
-- <BarChart minHeight={320} series={series} />
-+ <BarChart size="standard" series={series} />
-```
-
-```diff
-- <BarChart aspect={1.8} minHeight={280} series={series} />
-+ <BarChart size="tall" series={series} />
-```
-
-Tokens resolve through the theme's spacing scale (`theme.spacing`, MUI's 8px unit):
-
-| Token | Spacing units | Height |
-|---|---|---|
-| `compact` | 40 | 320px |
-| `standard` | 50 | 400px |
-| `tall` | 60 | 480px |
-| `extra_tall` | 70 | 560px |
-| `super_tall` | 80 | 640px |
-
-**UCM-CHART-15** shifted the whole scale up one step and added `extra_tall`/`super_tall` above the
-old ceiling — `tall` (400px) had been the largest token, and hram had already needed the `height`
-px escape to get past it. `standard`'s old pin to 320px (`TimeSeriesChart`'s historical
-`CHART_HEIGHT`) was a migration guardrail for CHART-12, not a design verdict; that migration is
-long complete, so the scale is now a chosen set of five values rather than one inherited number.
-`height` (a raw px number) survives as a **documented escape** for a justified special case; prefer
-`size`.
-
-**Four call sites lose responsive height with `aspect` gone**: `hram/AccessGapScatterPanel.jsx`
-and three in `fitness-monitor/BodyHistoryPage.jsx` (its `960/380` ratios were a design decision,
-not an accident — operator accepted this trade 2026-08-22). Each converts to a size token as a
-named, visible decision in its own migration WO — charts still reflow horizontally (`width: 100%`
-on the wrapper), only the height stops tracking width.
-
-## `xLabels` — before / after
-
-```diff
-- <BarChart xAxis={[{ data: wardNames, tickLabelStyle: { angle: -45 } }]} />
-+ <BarChart xAxis={[{ data: wardNames }]} xLabels="angled" />
-```
-
-```diff
-- <BarChart xAxis={[{ data: months }]} />   {/* horizontal by default, unrotated */}
-+ <BarChart xAxis={[{ data: months }]} xLabels="auto" />   {/* the new default; equivalent here */}
-```
-
-`"auto"` (the default) is a **heuristic**, not a true fit computation — the presets stay
-responsive, so the resolver has no real container width to measure against before render. It
-rotates when there are more than 6 categories *and* the longest label's real MEASURED width
-(same DOM measurement the rotated-band projection itself uses — a real browser measurement when
-available, a per-glyph estimate otherwise) exceeds 50px; otherwise it stays horizontal.
-`"horizontal"` always stays flat; `"angled"` always rotates (at the caller's own
-`tickLabelStyle.angle`, or -45° if unset). "Measured labels" (Rule 3) is therefore real — what
-remains unmeasured is "available width", since no container width exists before render. Verify a
-specific chart's real rendered fit with the browser-level check described below.
-
-## `margin` — no replacement
-
-There is no margin prop any more. Spacing between a chart card and its neighbours is the card's
-job (a wrapping `Box`/`Stack`'s own `gap`/`p`), not the chart's.
-
-```diff
-- <Chart series={series} margin={{ left: 220 }} />   {/* hand-tuned gutter for a long label */}
-+ <Box sx={{ pl: '220px' }}>
-+   <Chart series={series} />
-+ </Box>
-```
-
-If the extra space was compensating for a wide y-axis label the resolver now sizes itself
-(`sizeYAxisForContent`), try dropping the override entirely first — the model may already reserve
-the right amount.
-
-## What stays unchanged
-
-- `ChartFrame`'s own `minHeight` — it is a whole-card floor (title, toolbar, chart, legend,
-  footnotes, export links), not a single chart's size (`UCM-CHART-9` established this distinction).
-  `height` and `aspect` are **not** part of this — `UCM-CHART-13` removed them, but for different
-  reasons: `height` was destructured and only ever fed a dev-mode warning, never applied — genuinely
-  dead. `aspect` was applied (`aspectRatio` on the box, through 3.0.1) and worked.
-  **Correction (`UCM-CHART-14`, left legible rather than silently rewritten):** `UCM-CHART-13`
-  originally claimed here that no consumer passed `aspect`. That measurement was false — a
-  parser-based census (`scripts/chart-api-census.mjs`) found **four live call sites in
-  fitness-monitor** (`BodyHistoryPage.jsx` ×2, `EnvironmentPage.jsx` ×2) a `head`-truncated grep had
-  missed. The removal itself still stands; only the affected-consumer count was wrong. Those four
-  sites are `FM-CHART-1`'s scope. Passing either prop now throws in dev, naming the real replacement
-  — `aspect`'s message states plainly that it WAS applied and this is a real, visible behaviour
-  change for whoever still passes it, not a no-op cleanup.
-- Palettes, series colours, tooltips, legend content, interaction.
-- `sizeYAxisForContent` (y-axis width from tick content) — reused unchanged inside the resolver.
-
-## Verifying a migrated chart
-
-The invariant is arithmetic, but only against **real rendered geometry** — jsdom cannot measure
-SVG text (`getComputedTextLength` is unimplemented there), so the unit suite injects a stubbed
-measurement. Before shipping a chart that leans on rotated or auto-detected labels, render it in
-a real browser at a realistic width and confirm no tick label is clipped and no band is reserved
-with nothing in it (the Access-scatter defect this WO exists to close).

package/docs/DARK-TOKENS.md

@@ -1,140 +0,0 @@
-# Dark-mode baseline tokens
-
-Reference sheet for `UCM-THEME-13`. **This file is the value source** for the dark baseline: `UCM-THEME-14`
-(dark mode in `createAppTheme`) takes every dark value from here by token name, and if code and this
-sheet ever disagree, this sheet is the one to fix first.
-
-Instrument: [`work-orders/assets/UCM-THEME-13-dark-prototype.html`](../work-orders/assets/UCM-THEME-13-dark-prototype.html)
-(the screen the values were judged on, at 375 px and 1280 px, with contrasts computed in the page).
-
-## Frozen
-
-**Frozen 2026-10-02 by the operator** ("Passt so, bitte einfrieren"), after two value rounds.
-
-## Structural decisions (operator, 2026-10-01)
-
-1. **Complete baseline.** Every mode-dependent token class of the light baseline has a dark value, so an app
-   that turns dark on is complete and `assertThemeComplete` can judge dark as it judges light.
-2. **Outlined first, as in light.** Resting surfaces carry no shadow. Structure comes from borders and a
-   small surface step. Only overlays (dialog, menu, popover, drawer) stand out, through a lighter surface;
-   their shadow is an edge, not the means of separation.
-3. **Primary is derived unless the app sets it.** The factory lightens the app's light primary until it
-   clears 4.5:1 on the dark page. An app that supplies its own dark primary (webshop-guenter: `#D49040`)
-   keeps it.
-4. **Fixed dark status set, derivation as a safety net.** The status colours below are decided values. On
-   an app page that is not the baseline page, the factory lightens a status colour that would fail there,
-   the dark counterpart of the darkening `UCM-THEME-15` does on light pages.
-
-## Token table
-
-Every value below is either **distilled** (found in the estate, source named), **derived** (computed by a
-stated rule from a decided value) or **invented** (no precedent anywhere; labelled, unvalidated).
-
-### Surfaces and ink
-
-| Token | Light (today) | Dark | Origin |
-|---|---|---|---|
-| `background.default` (page) | `#FAFAFA` | `#14181B` | distilled: cockpit OBS-10, cockpit KB-23 (`#14181b`), ucm SHELL-2 (`#14171c`) |
-| `background.paper` (card) | `#FFFFFF` | `#1B2126` | distilled: cockpit OBS-10, KB-23 |
-| `background.subtle` | `#F4F5F6` | `#20262C` | distilled: cockpit OBS-10, KB-23 (`surface2`) |
-| overlay surface (dialog, menu, popover, drawer) | = paper, plus shadow | `#232A31` | derived: one step above paper on the same hue, ratio 1.12:1 to paper; new in dark |
-| `divider` | `rgba(33,37,41,.10)` | `#2B333A` | distilled: cockpit OBS-10, KB-23 (`border`) |
-| `ink.primary` / `text.primary` | `#212529` | `#E6EBEF` | distilled: cockpit KB-23 (`ink`); OBS-10 `#e7ebee` |
-| `ink.secondary` / `text.secondary` | `#5B6670` | `#AAB5BF` | distilled: cockpit KB-23 (`ink2`) |
-| `ink.muted` / `text.disabled` | `#6A7178` | `#87919A` | distilled: cockpit OBS-10 (`text3`) |
-
-### Controls
-
-| Token | Light (today) | Dark | Origin |
-|---|---|---|---|
-| `controlBorder.main` | `rgba(33,37,41,.50)` | `rgba(230,235,239,.38)` | derived: `ink.primary` at the smallest alpha **in 0.02 steps from 0.30** that clears 3:1 on page and paper (wording made precise 2026-10-02; a finer step would give 0.37, the frozen value is 0.38) |
-| `controlBorder.hover` | `rgba(33,37,41,.65)` | `rgba(230,235,239,.53)` | derived: the light step (+0.15) carried over |
-| `controlBorder.error` | `#BF3227` | `#E58B80` | = `error.main` (dark) |
-| `controlBorder.focus` | derived from primary | derived from primary | rule: lighten the primary until it clears 3:1 on page and paper |
-| autofill field | paper inset, `ink.primary` text and caret | paper inset, `ink.primary` text and caret | derived: the palette-aware block in `createAppTheme.js:97-108` already resolves from the palette and wins over the static light block in `tokens.js`; dark follows once the dark palette is in place |
-
-### Status
-
-`main` = `text` in dark. `light`/`dark`/`contrastText` follow from `main` through `withMainShades`, with
-`contrastText` = `#14181B`. A solid fill takes the status colour with the page colour as its text (dark
-text on a light fill, the same rule as the primary button).
-
-| Status | `text` = `main` | `bg` | `fill` | `fillText` | Origin |
-|---|---|---|---|---|---|
-| success | `#7BC496` | `#1C2A22` | `#7BC496` | `#14181B` | distilled: cockpit KB-23 (`ok`, `ok-bg`) |
-| warning | `#D8BD7E` | `#2A2418` | `#D8BD7E` | `#14181B` | distilled: cockpit KB-23 (`warn`, `warn-bg`) |
-| error | `#E58B80` | `#3A2320` | `#E58B80` | `#14181B` | distilled: cockpit KB-23 (`err`), OBS-10 (`danger-bg`) |
-| info | `#8FB8E0` | `#1A2633` | `#8FB8E0` | `#14181B` | **invented**: no dark info hue anywhere in the estate |
-| stale | `#AAB5BF` | `#20262C` | `#AAB5BF` | `#14181B` | **invented**, like the light `stale` it mirrors: `ink.secondary` on `subtle` |
-
-### Data series and shadows
-
-| Token | Light (today) | Dark | Origin |
-|---|---|---|---|
-| `dataSeries.categorical` | `#3D5A99 #3E80B8 #2E8F8A #7A5FA8 #9C4F86 #8A7355` | `#506BA3 #3E80B8 #2E8F8A #7A5FA8 #A1588C #8A7355` | derived: each light colour lightened in 0.05 steps until it clears 3:1 on paper; only slots 1 and 5 move |
-| `shadow.rest` | `none` | `none` | structural decision 2 |
-| `shadow.overlay` | `0 8px 24px rgba(20,26,31,.16), 0 2px 8px rgba(20,26,31,.08)` | `0 8px 28px rgba(0,0,0,.45)` | invented: on near-black the light shadow is invisible; the surface step carries the separation |
-| scrim (behind a modal) | MUI default | `rgba(0,0,0,.55)` | invented |
-
-### App identity in dark (rules, not values)
-
-| What | Rule | Worked examples (computed) |
-|---|---|---|
-| primary, app sets none | lighten the light primary in 0.05 steps until it clears 4.5:1 on `#14181B` | `#468AB2` stays `#468AB2` (4.71:1); hram `#2F4F96` -> `#6D84B6` (4.78:1); survey_app `#432CA1` -> `#8576C2` (4.56:1) |
-| primary button text | whichever of `#FFFFFF` and `#14181B` contrasts more with the derived primary | `#14181B` in all three examples |
-| primary, app sets its own | the app's value | webshop-guenter `#D49040` with `#0E0B08` text (7.35:1) |
-| status on an app page that is not `#14181B` | lighten the status colour until it clears 4.5:1 on its `bg` and on the page | webshop-guenter `#0E0B08`: no status colour needs to move |
-
-## Contrast table (computed 2026-10-02 with the instrument's own functions)
-
-| Pair | Foreground | Background | Ratio | Threshold |
-|---|---|---|---|---|
-| ink.primary on page / paper / overlay | `#E6EBEF` | `#14181B` / `#1B2126` / `#232A31` | 14.87 / 13.54 / 12.09 | 4.5 |
-| ink.secondary on page / paper / overlay | `#AAB5BF` | same | 8.56 / 7.79 / 6.96 | 4.5 |
-| ink.muted on page / paper | `#87919A` | `#14181B` / `#1B2126` | 5.57 / 5.07 | 3 |
-| success text on bg; main on page / paper; fillText on fill | `#7BC496` | | 7.25; 8.65 / 7.88; 8.65 | 4.5 |
-| warning, same pairs | `#D8BD7E` | | 8.43; 9.78 / 8.90; 9.78 | 4.5 |
-| error, same pairs | `#E58B80` | | 5.78; 7.09 / 6.45; 7.09 | 4.5 |
-| info, same pairs | `#8FB8E0` | | 7.38; 8.59 / 7.82; 8.59 | 4.5 |
-| stale text on bg; fillText on fill | `#AAB5BF` | `#20262C` | 7.32; 8.56 | 4.5 |
-| controlBorder.main on page / paper | `rgba(230,235,239,.38)` | | 3.18 / 3.14 | 3 |
-| controlBorder.hover on page / paper | `rgba(230,235,239,.53)` | | 4.98 / 4.79 | 3 |
-| controlBorder.error on paper | `#E58B80` | `#1B2126` | 6.45 | 3 |
-| dataSeries 1-6 on paper | as above | `#1B2126` | 3.07 / 3.86 / 4.19 / 3.12 / 3.32 / 3.61 | 3 |
-| surface steps: paper/page, overlay/paper, divider/paper, subtle/paper | | | 1.10 / 1.12 / 1.27 / 1.06 | none (structure, not text) |
-
-Every pair passes. Two pairs sit close to their threshold: `controlBorder.main` (3.14:1 on paper) and
-`dataSeries` slot 1 (3.07:1). A paper colour that moves lighter breaks them first.
-
-## Rejected, and why
-
-- **Neutral base B** (`#121212` / `#1C1C1C`, no cast, near MUI) and **C** (`#16181B` / `#1D2024`, the light
-  baseline's own cool ink carried into dark). Round 1: at this lightness none of the three could be told
-  apart, so the cast was decided on principle: A is the one the estate already uses in three places.
-- **Surface step 2** (paper `#1F262C`, overlay `#29313A`) and **step 3** (paper `#232B32`, overlay
-  `#2F3942`). Round 2: step 1, the estate's own, reads as card and dialog already; the larger steps lower
-  text and border contrast on cards for no gain the operator could see.
-
-## Identity versus baseline
-
-The baseline owns everything above. An app owns, in dark as in light, only its primary (optional in dark,
-derived otherwise) and its font. An app with a decided brand (webshop-guenter) may own its dark surfaces and
-ink too; that is the app's identity bucket, not a baseline change.
-
-## Unverified
-
-Declared, not demonstrated, because a static instrument cannot show them: hover and pressed states, focus
-rings in a running app, native date and select pickers, scrollbars, transitions, and how browsers paint
-autofill in dark. `UCM-THEME-14`'s rendered check is where they are first seen.
-
-## Known code that assumes light (input for `UCM-THEME-14`)
-
-- `src/theme/createAppTheme.js:221` and `src/theme/themeCompleteness.js:298`: contrast surfaces include a
-  fixed `#FFFFFF`; the derivations only darken.
-- `src/theme/tokens.js` `autofill`: fixed `#FFFFFF` inset and `#212529` text. **Shadowed** by the
-  palette-aware block in `src/theme/createAppTheme.js:97-108` (corrected 2026-10-02: the first version of
-  this sheet listed it as live). Harmless in both modes, but a duplicate that can mislead.
-- `BASELINE_INTENTIONAL_DEFAULT_EXEMPTIONS`: the `background.paper` reason ("deliberately MUI white") is
-  false in dark.
-- `src/components/QrSignupManager.jsx:361`: `#ffffff` behind a QR code. **Stays white on purpose**: a QR code
-  needs a light quiet zone to scan.

package/docs/TYPE-SCALE.md

@@ -1,111 +0,0 @@
-# Baseline type scale
-
-Reference sheet for `UCM-THEME-17`. **This file is the value source** for the baseline typography:
-`UCM-THEME-18` takes every value from here by variant name, and if code and this sheet ever disagree, this
-sheet is the one to fix first.
-
-Instrument: [`work-orders/assets/UCM-THEME-17-type-scale.html`](../work-orders/assets/UCM-THEME-17-type-scale.html)
-(the candidates beside today's baseline and the MUI default on four estate screens at 375 px and 1280 px; sizes,
-ratios and frame heights are measured in the page).
-
-## Frozen
-
-**Frozen 2026-10-04 by the operator** ("Ja, einfrieren"), after two value rounds.
-
-## Why the scale changed
-
-The previous baseline stepped its headings by 1 to 3 px (h4 20, h5 18, h6 16, subtitle1 15), so hierarchy rested
-on weight alone, and where apps raised every level to 700 or 800 the levels merged (survey_app sites, operator
-screenshots 2026-10-04). The approved prototypes in the estate had used the larger title step all along: screen
-title about 1.7x body at 1280 px, stepped down on mobile, section labels below body size.
-
-## Structural decisions (operator, 2026-10-04)
-
-1. **One scale** for every app and page type; no separate reading register. Body stays at the tool density
-   (`jg-ferien` `JG-DL-7` had rejected a larger body).
-2. **The screen title (h4) steps down on narrow screens.** No other variant does.
-3. **Size carries the hierarchy, weight is fixed**: every heading 600. App overrides are for font family, not
-   for per-level weight.
-4. **The section label (subtitle1) sits below body size**, set apart by weight.
-
-Role mapping, unchanged from the `THEME-1` sheet: h4 screen title, h5 panel or dialog, h6 card title,
-subtitle1 section label.
-
-## Token table
-
-| Variant | Before | Frozen | Weight | Line height | Origin |
-|---|---|---|---|---|---|
-| h1 | 32 | **36** | 600 | 1.2 | derived: 4 px steps above h3 |
-| h2 | 28 | **32** | 600 | 1.22 | derived: 4 px steps above h3 |
-| h3 | 24 | **28** | 600 | 1.25 | derived: 4 px above h4 |
-| h4, screen title | 20 | **24** | 600 | 1.3 | distilled: prototype median (KZ-UI-1, UX-10, JG-MEM-1) |
-| h4 below `sm` (600 px) | 20 | **23** | 600 | 1.3 | decided round 2: the smallest size that keeps h4 : h5 at 1.12 or more on mobile. The breakpoint is the baseline's own `sm`, derived, not judged |
-| h5, panel | 18 | **20** | 600 | 1.3 | distilled: prototypes 18 to 20 |
-| h6, card title | 16 | 16 | 600 | 1.35 | unchanged |
-| subtitle1, section label | 15/600 | **13** | 600 | 1.4 | distilled: prototypes 12 to 13 at 600 to 700 |
-| subtitle2 | 13/500 | 13 | 500 | 1.4 | unchanged |
-| body1 | 14 | 14 | 400 | 1.55 | unchanged (decision 1) |
-| body2 | 13 | 13 | 400 | 1.55 | unchanged |
-| button | 14/500 | 14 | 500 | 1.4 | unchanged |
-| caption | 12 | 12 | 400 | 1.4 | unchanged |
-| overline | 11/600 | 11 | 600 | 1.4 | unchanged |
-
-Sizes in px. `letterSpacing` 0 throughout, overline 0.4px uppercase as before.
-
-## Measurements (computed in the instrument, 2026-10-04)
-
-| Ratio | Before | Frozen | MUI |
-|---|---|---|---|
-| h4 : h5 at 1280 | 1.11 | 1.20 | 1.42 |
-| h4 : h5 at 375 | 1.11 | 1.15 | 1.42 |
-| h5 : h6 | 1.13 | 1.25 | 1.20 |
-| h6 : body1 | 1.14 | 1.14 | 1.25 |
-| h4 : body1 at 1280 / 375 | 1.43 / 1.43 | 1.71 / 1.64 | 2.13 / 2.13 |
-| subtitle1 : body1 | 1.07 | 0.93 | 1.00 |
-
-The instrument works with a threshold of 1.12 between two heading levels at the same weight. That number is this
-sheet's working assumption, not a standard.
-
-Frame height against the previous baseline: hram Research -1.1 % / -1.0 % (375 / 1280), jg-ferien dashboard
-+0.5 % / +0.5 %, kerzenziehen admin -1.4 % / -1.3 %, survey site +0.7 % / +0.8 %. The smaller section label offsets
-the larger titles; the vertical-space risk named in the work order does not occur. MUI by comparison: +4 to +18 %.
-
-## Rejected, and why
-
-- **Candidate A** (h4 22, h5 18, h6 16, subtitle1 13): leaves h5 : h6 at 1.13, the panel and card stay as
-  close as before.
-- **Candidate C** (h4 28, h5 22, h6 17, subtitle1 12): the counter-test; closest to MUI, largest height cost
-  (up to +2.3 %).
-- **Mobile title at desktop minus 2** (round 1, B at 22): h4 : h5 on mobile falls to 1.10, as close as before.
-- **h1 to h3 kept at 32 / 28 / 24**: h3 would equal the new h4 and drop out as a level.
-- **The MUI scale**: body 16 is the size `jg-ferien` already rejected for tool screens.
-
-## Known consequences outside this repo
-
-These are inputs for the per-app follow-up after the release, not part of the baseline:
-
-- **Screens that use another variant as their screen title** do not get the new title value or the mobile step.
-  Measured 2026-10-04 (first heading variant in each `*Page.jsx`, a heuristic): hram 5 pages h5, jg-ferien 3 pages
-  h5 (`DashboardPage.jsx:187`), kerzenziehen admin h5 (rendered measurement), spesix 1 page h5, fitness-monitor
-  1 page h5; survey_app uses h3 on 7 pages, which grows from 24 to 28.
-- **Per-level weight overrides** contradict decision 3: survey_app (h1 to h6 800/700, site builder 800),
-  hram (500), spesix (weights). survey_app's held typography revert (`SVA-THEME-1`) is decided by this sheet.
-- **subtitle1 also serves as a title, not only as a section label** (added 2026-10-04, after the freeze; the
-  inventory missed it, because it read subtitle1 only in its section-label role on hram Research). Uses in
-  `src/`: hram 72, jg-ferien 39, ui-core-micha itself 12 (`UserMenu` user name, `SectionNav` active item,
-  announcement titles), innoservice 9, survey_app 7, reimbursements 6, spesix 5. As item or panel titles they
-  fall below body size. **Decided at the jg-ferien pilot `JG-DEPS-4`, 2026-10-04: subtitle1 stays at 13 px.**
-  The operator looked at jg-ferien on the 3.12.0 build, including `FinanceSummaryPanel` with subtitle1 as a
-  panel section title, and accepted it without any remapping. Rollout orders therefore do not remap
-  subtitle1 by default; a remap happens only where an app's own look rejects a specific screen.
-- **Exception to decision 3: spesix keeps its own heading weights** (operator, 2026-10-04, at `SPX-DEP-3`). Its
-  `DESIGN` block (h1 800, h2-h5 700, h6 600, button 700) belongs to a decided design (`SPX-THEME-1`, identity
-  bucket), and the new sizes separate the levels on their own. survey_app's 800/700 weights are not covered by
-  this exception: there the operator found the bold levels themselves to be the problem.
-- webshop-guenter keeps its handoff scale (decided brand, identity bucket). Kira, Cinevia and Gustav use no MUI
-  heading variants and are unaffected.
-
-## Unverified
-
-Declared, not shown by the static instrument: long titles wrapping in French and German at 375 px, dialogs,
-the h1 to h3 sizes on real public pages, and the step at exactly 600 px.