@micha.bigler/ui-core-micha 2.30.0 → 2.31.0

package/WORK_ORDERS.md

@@ -24,6 +24,7 @@ prefixed ID; never reuse a bare flat number across workstreams.
 
 | ID | Titel | Beschreibung | Datum | Status | Commit(s) | Notiz |
 |---|---|---|---|---|---|---|
+| CHART-6 | Chart-chrome defaults in the three wrappers, plus two generic fixes hoisted up | Closes the chart-chrome default surface in `BarChart`/`LineChart`/`TimeSeriesChart`: baseline tick font size (from `theme.typography.caption`), a horizontal grid, `showMark:false` with a filled-marker fix when a caller opts markers back in, automatic bottom-margin growth for rotated tick labels, a new `legendPosition` prop (default bottom-start), and `TimeSeriesChart`'s own toolbar becoming the sole legend (MUI's redundant second legend removed). Hoists `chartLabels.js` (short granularity-aware tick-label formatters) and a generalised `yearTickInterval` from fitness-monitor. `2.31.0`. Full spec: [work-orders/CHART-6.md](work-orders/CHART-6.md). | 2026-08-10 | done | 6dedc62 | Envelope authored by Expertenchat (DS-4). Precondition (THEME-1 landed + published `2.30.0`) verified before start. Orchestrator filled the Implementation map with concrete MUI X-Charts source pointers (installed `8.29.2`, not the WO's stated `8.28.2` — flagged and verified against the actual installed source throughout), then ran Codex (stdin invocation, same as THEME-1). Codex implemented `src/components/charts/{chartDefaults,chartLabels,yearTickInterval}.js`, wired all three wrappers, wrote the 10 required tests, and used a wrapper-level `slots.mark` composition for the filled-marker fix (a deliberate, now-documented deviation from the WO's named `MuiMarkElement` theme-token mechanism — the wrapper-level fix applies to all 14 consumers immediately on this version bump, not only to apps that separately adopt `createAppTheme`). **Independent `reviewer` (Sonnet) + `ui_reviewer` (Haiku) ran concurrently.** `reviewer` found **R1 (P2)** — the marker-fill deviation from the WO's specified mechanism was undocumented; fixed with an explanatory code comment (functionally correct either way, this was a disclosure gap, not a bug). `ui_reviewer` found **U1 (P3)** — `SeriesToggleDot`'s 12px dot used hardcoded pixels instead of `theme.spacing()`; fixed. Both reviewers otherwise found the six highest-risk invariants (default-vs-caller-override merge order, filled markers, rotated-tick margin math, the double-legend fix, `yearTickInterval`'s generalisation, `skipAnimation` passthrough) correct and non-vacuously tested. **A third, more serious bug was found by the Orchestrator's own DS-1 two-width rendered check (not by either reviewer, since both are static-diff reviews)**: `withAxisDefaults` in `chartDefaults.js` only applied `defaults.scaleType` when the caller passed NO `xAxis`/`yAxis` array at all — a caller-supplied axis with `data` but no explicit `scaleType` (exactly what the new dev-harness "Chart defaults" `LineChart` specimen used) silently lost the wrapper's `'point'`/`'band'` scale default entirely, leaving MUI's scale undefined and every rendered line/point position `NaN` (`<path> attribute d: Expected number, "MNaN,...`, confirmed live via `read_console_messages` and only reproducible through a real MUI scale computation — a mocked prop-assertion test structurally cannot catch it, the same class of bug CHART-1/3/4/5 have each found before in this kit). Fixed by spreading `defaults` before `axis` in the per-axis merge (caller's own explicit `scaleType`, if any, still wins); a new regression test added (`tests/chartDefaults.test.js`, "keeps the default scaleType on a caller-supplied axis that does not set one"), confirmed against both `BarChart`'s `'band'` and `LineChart`'s `'point'` defaults. Re-verified after all three fixes: 44/44 scoped vitest tests green (10 new + 34 existing adjacent chart tests, no regressions), `tsc -p tsconfig.build.json --noEmit` clean. **Two-width rendered side-by-side (DS-1 gate)** run in the dev harness's "Theme / Shared baseline" entry (which now also carries the two new `LineChart` chart-chrome specimens per the WO's "at least one chart that set the props and one that did not" requirement) at 375px and 1280px — confirmed live: correct line rendering (post-fix), filled markers on the caller-override chart, horizontal grid, bottom-start vs. caller-chosen legend position, and rotated tick labels with adequate margin at 1280px. |
 | THEME-1 | Shared MUI theme baseline: `createAppTheme` factory + completeness assertion | Ships `createAppTheme(appConfig)` (palette-first merge of a fixed light-mode baseline with the app's own `palette`/`typography`/`components`; throws without `palette.primary`; throws on a function anywhere in `appConfig.components.*.styleOverrides`), an exported `assertThemeComplete` completeness assertion with an exemption arm and contrast checks (status text-on-own-tint, `controlBorder` on white + page background), a non-breaking chart-ramp fallback in `useNeutralChartPalette` (adopters get the theme's `dataSeries` ramp, non-adopters see byte-identical output), a new "Shared theme baseline" dev-harness entry, and `DESIGN.md` principles 1/8 reworded per the accepted policy change (ucm now ships a shared theme; the data-colour layer has a shared default). Full spec: [work-orders/THEME-1.md](work-orders/THEME-1.md). | 2026-08-10 | done | b329b39, 96992cf | Envelope authored by Expertenchat from the accepted reference sheet (`work-orders/assets/THEME-1-baseline-reference-sheet.html`, DS-2 decisions 1–23). Orchestrator filled the Implementation map, then ran Codex (stdin, not positional arg — the WO text exceeded Windows' command-line length limit via the npm shim, "Argument list too long"; `codex exec ... -` reading the WO from stdin is the working invocation for large WOs on this platform). Codex implemented `src/theme/{tokens,createAppTheme,themeCompleteness,index}.js`, wrote all 13 required tests + extended `tests/chartsPalette.test.js`, updated `src/index.js` exports, `DESIGN.md`, `package.json` (2.29.2→2.30.0, new `@fontsource/dm-sans` dependency — WO-scoped, no separate approval needed), and the dev harness. **Independent `reviewer` (Sonnet) + `ui_reviewer` (Haiku) ran concurrently. `ui_reviewer`: no findings.** `reviewer` found three, all confirmed real and fixed by the Orchestrator: **R1 (P2)** — MUI's `createTheme(options, ...args)` only runs palette augmentation on the FIRST argument; every later arg (how the baseline was layered in) is deep-merged raw, so `success`/`warning`/`error`/`info` — which had `text`/`fill`/`fillText`/`bg` but no `main`/`contrastText` — silently kept MUI's own stock hues for any standard `color="success"` usage. Verified live via a Node repro (`createTheme({...},{palette:BASELINE_PALETTE},{...})` on the pre-fix baseline produced `success.main:'#2e7d32'`, MUI's stock green, not the canonical `#1B8038`). Fixed: explicit `main`/`light`/`dark`/`contrastText` added to all four status channels (`light`/`dark` computed via MUI's own `lighten`/`darken` at the same 0.2/0.3 tonal offsets `augmentColor` uses), plus a new regression assertion in `tests/createAppTheme.test.js`. **R2 (P3)** — `controlBorder.focus` was derived to clear 3:1 only against `background.paper`, while `assertThemeComplete`'s own contrast check tests it against `#FFFFFF` and `background.default` — an app overriding either background could pass the derivation and still fail the assertion. Fixed: derivation now targets both surfaces. **R3 (P3)** — `MuiOutlinedInput`'s `variants` array was nested inside `styleOverrides.root` instead of as a sibling key; MUI never reads `variants` from inside `styleOverrides` (it's matched by `props` independently), so the entry was inert dead code, and it also meant the function-in-`styleOverrides` guard's own suggested escape hatch ("use MUI variants") was structurally unreachable from inside `styleOverrides`. Fixed: moved to the correct sibling placement; updated the one test and the one completeness-surface path that referenced the old (wrong) location. Re-verified after fixes: 15/15 scoped vitest tests green (`tests/createAppTheme.test.js`, `tests/themeCompleteness.test.js`, `tests/chartsPalette.test.js`), `tsc -p tsconfig.build.json --noEmit` clean. Orchestrator's own security/scope pass: no findings (only the WO-approved `@fontsource/dm-sans` dependency addition, no secrets, no scope creep). **Two-width rendered side-by-side (DS-1 gate)** run in the dev harness's new "Theme / Shared baseline" entry at 375px and 1280px — both screenshots confirm radius (3/8), no resting shadow on Paper/Card, correct status fill/text/bg tones, and the six-colour series ramp, consistent with the reference sheet. No app pin bumps in this WO — all 14 consumers pin exact versions and pick this up on their own adoption WO. |
 | CHART-5 | Dual y-axis + always-visible x-axis ticks on `TimeSeriesChart` | Opt-in second y-axis via a new per-series `axis: 'secondary'` field (backward-compatible, off by default) with auto-detected integer-only tick labels per axis group; deterministic x-axis `tickLabelInterval` so bucket labels never all vanish under MUI's default collision-avoidance (the live symptom: zero x-axis labels with 24 hourly buckets). Reverses CHART-2's deliberate "no second y-axis" choice on fresh operator instruction; `DESIGN.md` #8 updated to record the scoped exception. Full spec: [work-orders/CHART-5.md](work-orders/CHART-5.md). | 2026-08-07 | done | 839e6c5, 84c37ac, 0dd3bac, f4e5586, 4a12a71 | Operator-requested after seeing the shipped chart live: y-axis showed decimal ticks (0.2, 0.4, ...) for an integer user-count series sharing an axis with fractional hours; x-axis showed no time labels at all. **Codex out of credits, known up front** — implemented directly (author-flip, independent review mandatory). Independent `reviewer` + `ui_reviewer` ran concurrently: **`reviewer` found R1 (P1, real bug)** — used `yAxisKey` (removed in MUI X-Charts v7, per the installed v8.29.2's own CHANGELOG and `useBarPlotData.mjs` source, which reads `series[i].yAxisId`) instead of `yAxisId`; the WO explicitly asked to verify this passthrough against real MUI behaviour rather than assume, and the first pass didn't — the dual-axis feature would have silently plotted every series on the primary axis in production despite all mocked tests passing (a mocked-prop test structurally cannot catch a wrong-field-name bug, since it only checks whatever the code itself sets). Fixed (`yAxisKey` → `yAxisId`, verified against `node_modules` source directly, not just the mock) and the pre-existing `tests/BarChart.test.jsx` "dual axis" case corrected too (R2 — it used the same wrong field name and was cited by the WO as precedent, giving false confidence). **`ui_reviewer` found U1 (P1, real bug)** — `tickLabelInterval`'s `index % step === 0` systematically dropped the LAST x-axis bucket unless it landed exactly on a step boundary (e.g. 24 labels/step 3 → indices 0..21, never 23), exactly the failure mode the WO's own SCOPE C explicitly warned to check for; fixed by force-including `index === lastIndex`, with a new `it.each([24,12,7,1])` regression test, confirmed non-vacuous by reverting the fix. **U2 (P2)**: `DESIGN.md` #8's "Never dual-axis" now contradicted the shipped code — updated to record dual-axis as a scoped, opt-in exception (CHART-5) rather than a general rule change. U3 (P3, fixed `MAX_X_TICKS` under-displays low-density ranges e.g. 12 monthly buckets showing only 6) and U4 (P3, no UI indication of which axis a toggle's series plots against) both accepted, not fixed — informational, no code change. Re-verified after fixes: 31/31 scoped vitest tests (`TimeSeriesChart.test.jsx` + `BarChart.test.jsx`) green, `tsc` build clean. Published: ucm 2.29.0 (minor — new optional per-series field + prop, additive, no breaking change). **Third bug found post-publish (2.29.1 patch)**: after jg-ferien adopted it (ACT-7) the operator reported live that the secondary axis was "obviously there but invisible" and x-axis labels were still missing. Investigated by adding a new DX-1 harness entry (`dev/entries.jsx` `TimeSeriesChartEntry`, previously missing — this component had NEVER been visually verified in a real browser through CHART-2/3/4/5) and reading the real rendered DOM directly. X-axis confirmed working (9 evenly-spread labels for 24 buckets) — the live report was very likely a stale PWA service-worker cache on jg-ferien's side, not a code defect. Y-axis confirmed broken: only 1 of 2 `yAxis` entries rendered in the DOM. Root cause traced to the installed MUI X-Charts source (`defaultizeAxis.js`): `defaultPosition = index === 0 ? 'left' : 'none'` — every yAxis array entry past the first silently renders nothing unless given an explicit `position`, a class of bug no mocked-`BarChart` test can catch (the mock never runs MUI's own defaulting logic). Fixed by setting `position: 'left'`/`'right'` explicitly on the primary/secondary entries; independent `reviewer` traced the fix against the same MUI source and confirmed no second gating layer exists. Live-reverified in the dev harness after the fix: both axes render with independent scales (primary `0,1,2`; secondary `0.0,0.5,1.0,1.5,2.0`). 32/32 tests green, build clean. Published: ucm 2.29.1 (patch). **Fourth report, root cause NOT in ucm**: operator reported x-axis labels still empty even after 2.29.1. Extensive live investigation (scoped DOM queries, computed-style checks, a real-browser-DOM comparison against this repo's own dev harness in both dev and production-build mode, a DM-Sans-not-loaded font test) could not reproduce it anywhere in ucm with the exact real bucket data — ruled out: stale cache, MUI axis config, container width, dev-vs-prod build, font-loading timing. Root cause found via web search: a known, unfixed upstream MUI X-Charts bug (mui/mui-x#18768, duplicate of #18399) where insufficient measured space makes its `ellipsize` logic collapse an ENTIRE tick label to `''` instead of shortening it, confirmed live via a `<tspan>` with correct styling but zero text content — triggered by jg-ferien's verbose label format ("08/05, 10:00 AM", 16 chars) combined with its actual DM Sans font metrics (not reproducible with this repo's default Roboto-based harness). Fixed in jg-ferien (ACT-9: short, granularity-aware labels), not in ucm — `TimeSeriesChart` itself has no defect here, it's a host-side label-length choice interacting with an upstream MUI bug. This repo's DX-1 harness entry (`TimeSeriesChartEntry`) updated to model the correct short-label pattern so it doesn't teach the risky verbose format. |
 | CHART-4 | Fix `TimeSeriesChart` chart canvas rendering at zero height | Neither `ChartFrame` nor `BarChart` ever receive a height from `TimeSeriesChart` — MUI X-Charts' responsive container measures a zero-height parent and draws no bars/axes, while the legend (sized by its own content) renders regardless, which is why the live symptom was "legend shows, chart canvas doesn't". Fix supplies a preset default height (`CHART_HEIGHT = 320`, `minHeight` on `ChartFrame` + `height` forwarded to the real `MuiBarChart`), matching the working `dev/entries.jsx` reference pattern. Full spec: [work-orders/CHART-4.md](work-orders/CHART-4.md). | 2026-08-07 | done | f0953a1, fcb289b | Second, independent bug found live in jg-ferien immediately after CHART-3 + the ucm pin bump landed — CHART-3's own fix is what let this one become visible for the first time (it was previously masked by the permanently-empty-chart bug). Root cause of it shipping twice undetected: every test in `tests/TimeSeriesChart.test.jsx`/`tests/BarChart.test.jsx` mocks the real `@mui/x-charts/BarChart`, so no test has ever mounted the real chart and observed its size. **Codex out of credits, known up front** — implemented directly (author-flip, independent review mandatory). **Test-writing pitfall found and self-corrected during implementation**: first wrote an *unmocked* render test asserting the real chart SVG's `viewBox` height was non-zero — verified vacuous (stays green even fully reverting the fix, since jsdom's `ResizeObserver`/layout handling doesn't reproduce the real zero-height-parent browser behavior this bug depends on). Deleted; replaced with a `chartSpy`-mocked prop assertion (`props.height` non-zero) matching the file's existing convention, confirmed non-vacuous (fails pre-fix with `props.height` undefined). Independent `reviewer` + `ui_reviewer` ran concurrently: `reviewer` verified the fix mechanism end-to-end (no prop-name collision between `BarChart`'s own `minHeight`/`aspect` and the forwarded `height`) and the test's non-vacuity claim, no findings. `ui_reviewer`: two P3 informational notes, neither blocking — (U1) the fixed 320px height is a deliberate, documented exception to `DESIGN.md` #14 ("responsive = container-sized, not fixed px"), needed specifically because MUI X-Charts' own `ResizeObserver`-based height measurement is what caused CHART-4 in the first place; a code comment was added warning future readers not to "fix" this back to a responsive height without re-verifying the underlying MUI bug is resolved. (U2) `CHART_HEIGHT` uses 320 for both `ChartFrame.minHeight` and `BarChart.height`, vs. `dev/entries.jsx`'s 360/320 split — functionally harmless (WO explicitly permits one fixed value), no change made. 13/13 scoped vitest tests green, `tsc` build clean. Published: ucm 2.28.2 (patch, no interface change). No app pin bumps in this WO — jg-ferien picks it up on its next ucm bump. |

package/dev/entries.jsx

@@ -30,6 +30,7 @@ import {
 import { AuthContext } from '../src/auth/AuthContext';
 import { BarChart } from '../src/components/charts/BarChart';
 import { ChartFrame } from '../src/components/charts/ChartFrame';
+import { LineChart } from '../src/components/charts/LineChart';
 import { TimeSeriesChart } from '../src/components/charts/TimeSeriesChart';
 import { NotificationBell } from '../src/notifications/NotificationBell';
 import { NotificationsProvider } from '../src/notifications/NotificationsProvider';
@@ -165,6 +166,42 @@ function ThemeBaselineEntry() {
           height={320}
         />
       </ChartFrame>
+
+      <Stack
+        direction="column"
+        spacing={2}
+        sx={{ '@container (min-width: 900px)': { flexDirection: 'row' } }}
+      >
+        <ChartFrame title="Chart defaults" subtitle="No caller chrome props" minHeight={360}>
+          <LineChart
+            xAxis={[{ data: ['Jan', 'Feb', 'Mar', 'Apr'] }]}
+            series={[
+              { label: 'Observed', data: [8, 12, 10, 16] },
+              { label: 'Forecast', data: [7, 11, 13, 15] },
+            ]}
+            xAxisLabel="Month"
+            yAxisLabel="Cases"
+            height={320}
+          />
+        </ChartFrame>
+        <ChartFrame title="Caller overrides" subtitle="Tuned ticks, marks, grid and legend" minHeight={360}>
+          <LineChart
+            xAxis={[{
+              data: ['Jan', 'Feb', 'Mar', 'Apr'],
+              tickLabelStyle: { fontSize: 14, angle: -25 },
+            }]}
+            series={[
+              { label: 'Observed', data: [8, 12, 10, 16], showMark: true },
+              { label: 'Forecast', data: [7, 11, 13, 15], showMark: true },
+            ]}
+            xAxisLabel="Month"
+            yAxisLabel="Cases"
+            grid={{ horizontal: true, vertical: true }}
+            legendPosition={{ vertical: 'top', horizontal: 'end' }}
+            height={320}
+          />
+        </ChartFrame>
+      </Stack>
     </Stack>
   );
 }

package/dist/components/charts/BarChart.js

@@ -12,21 +12,23 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { Box } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
 import { BarChart as MuiBarChart } from '@mui/x-charts/BarChart';
 import { useNeutralChartPalette } from './palette';
-function labelledAxis(axes, label, defaults) {
-    const values = (axes === null || axes === void 0 ? void 0 : axes.length) ? axes : [defaults];
-    return values.map((axis) => (Object.assign(Object.assign({}, axis), { label: axis.label || label })));
-}
+import { DEFAULT_LEGEND_POSITION, spaceForRotatedTicks, withAxisDefaults, withChartSlotDefaults, } from './chartDefaults';
 /**
  * Responsive MUI X-Charts bar preset. xAxisLabel and yAxisLabel (including units) are required.
  * It supplies labelled axes, tooltips, and an automatic multi-series legend.
  */
 export function BarChart(_a) {
-    var { series = [], xAxisLabel, yAxisLabel, xAxis, yAxis, palette, minHeight, aspect } = _a, chartProps = __rest(_a, ["series", "xAxisLabel", "yAxisLabel", "xAxis", "yAxis", "palette", "minHeight", "aspect"]);
+    var { series = [], xAxisLabel, yAxisLabel, xAxis, yAxis, palette, minHeight, aspect, grid = { horizontal: true }, hideLegend = series.length <= 1, legendPosition = DEFAULT_LEGEND_POSITION, margin, slotProps } = _a, chartProps = __rest(_a, ["series", "xAxisLabel", "yAxisLabel", "xAxis", "yAxis", "palette", "minHeight", "aspect", "grid", "hideLegend", "legendPosition", "margin", "slotProps"]);
+    const theme = useTheme();
     const neutralPalette = useNeutralChartPalette();
     if (!xAxisLabel || !yAxisLabel) {
         throw new Error('BarChart requires xAxisLabel and yAxisLabel.');
     }
-    return (_jsx(Box, { "data-testid": "bar-chart-container", sx: { width: '100%', minHeight, aspectRatio: aspect }, children: _jsx(MuiBarChart, Object.assign({}, chartProps, { series: series, xAxis: labelledAxis(xAxis, xAxisLabel, { scaleType: 'band', data: [] }), yAxis: labelledAxis(yAxis, yAxisLabel, { scaleType: 'linear' }), colors: palette || neutralPalette.categorical, hideLegend: series.length <= 1, slotProps: { tooltip: { trigger: 'axis' } } })) }));
+    const labelledXAxis = withAxisDefaults(xAxis, xAxisLabel, { scaleType: 'band', data: [] }, theme.typography.caption.fontSize);
+    const labelledYAxis = withAxisDefaults(yAxis, yAxisLabel, { scaleType: 'linear' }, theme.typography.caption.fontSize);
+    const rotatedTickSpace = spaceForRotatedTicks(labelledXAxis, margin, theme.typography.caption.lineHeight);
+    return (_jsx(Box, { "data-testid": "bar-chart-container", sx: { width: '100%', minHeight, aspectRatio: aspect }, children: _jsx(MuiBarChart, Object.assign({}, chartProps, { series: series, xAxis: rotatedTickSpace.xAxis, yAxis: labelledYAxis, colors: palette || neutralPalette.categorical, grid: grid, hideLegend: hideLegend, margin: rotatedTickSpace.margin, slotProps: withChartSlotDefaults(slotProps, legendPosition) })) }));
 }

package/dist/components/charts/LineChart.js

@@ -12,21 +12,38 @@ var __rest = (this && this.__rest) || function (s, e) {
 import { jsx as _jsx } from "react/jsx-runtime";
 import React from 'react';
 import { Box } from '@mui/material';
-import { LineChart as MuiLineChart } from '@mui/x-charts/LineChart';
+import { useTheme } from '@mui/material/styles';
+import { LineChart as MuiLineChart, MarkElement as MuiMarkElement, } from '@mui/x-charts/LineChart';
 import { useNeutralChartPalette } from './palette';
-function labelledAxis(axes, label, defaults) {
-    const values = (axes === null || axes === void 0 ? void 0 : axes.length) ? axes : [defaults];
-    return values.map((axis) => (Object.assign(Object.assign({}, axis), { label: axis.label || label })));
+import { DEFAULT_LEGEND_POSITION, spaceForRotatedTicks, withAxisDefaults, withChartSlotDefaults, } from './chartDefaults';
+// Fixes MUI's hollow `background.paper`-filled marker (MarkElement.js's own
+// `styled()` default). CHART-6's WO named a `MuiMarkElement` theme-token
+// override in src/theme/tokens.js as the preferred mechanism, with a
+// per-wrapper slots/sx override as the documented fallback. This uses the
+// fallback deliberately, not because the theme route was infeasible: a
+// wrapper-level fix applies to every consumer immediately on this version
+// bump, including the 14 apps that haven't adopted `createAppTheme` yet
+// (THEME-1 is a separate, optional pin bump) -- a theme-token override would
+// only take effect for apps on the new baseline theme. Composes correctly
+// with a caller's own `slots.mark` (spread after this default, so it wins).
+function FilledMarkElement(_a) {
+    var { color, style } = _a, props = __rest(_a, ["color", "style"]);
+    return _jsx(MuiMarkElement, Object.assign({}, props, { color: color, style: Object.assign({ fill: color }, style) }));
 }
 /**
  * Responsive MUI X-Charts line preset. xAxisLabel and yAxisLabel (including units) are required.
  * It supplies labelled axes, tooltips, and an automatic multi-series legend.
  */
 export function LineChart(_a) {
-    var { series = [], xAxisLabel, yAxisLabel, xAxis, yAxis, palette, minHeight, aspect } = _a, chartProps = __rest(_a, ["series", "xAxisLabel", "yAxisLabel", "xAxis", "yAxis", "palette", "minHeight", "aspect"]);
+    var { series = [], xAxisLabel, yAxisLabel, xAxis, yAxis, palette, minHeight, aspect, grid = { horizontal: true }, hideLegend = series.length <= 1, legendPosition = DEFAULT_LEGEND_POSITION, margin, slots, slotProps } = _a, chartProps = __rest(_a, ["series", "xAxisLabel", "yAxisLabel", "xAxis", "yAxis", "palette", "minHeight", "aspect", "grid", "hideLegend", "legendPosition", "margin", "slots", "slotProps"]);
+    const theme = useTheme();
     const neutralPalette = useNeutralChartPalette();
     if (!xAxisLabel || !yAxisLabel) {
         throw new Error('LineChart requires xAxisLabel and yAxisLabel.');
     }
-    return (_jsx(Box, { "data-testid": "line-chart-container", sx: { width: '100%', minHeight, aspectRatio: aspect }, children: _jsx(MuiLineChart, Object.assign({}, chartProps, { series: series, xAxis: labelledAxis(xAxis, xAxisLabel, { scaleType: 'point', data: [] }), yAxis: labelledAxis(yAxis, yAxisLabel, { scaleType: 'linear' }), colors: palette || neutralPalette.categorical, hideLegend: series.length <= 1, slotProps: { tooltip: { trigger: 'axis' } } })) }));
+    const labelledXAxis = withAxisDefaults(xAxis, xAxisLabel, { scaleType: 'point', data: [] }, theme.typography.caption.fontSize);
+    const labelledYAxis = withAxisDefaults(yAxis, yAxisLabel, { scaleType: 'linear' }, theme.typography.caption.fontSize);
+    const rotatedTickSpace = spaceForRotatedTicks(labelledXAxis, margin, theme.typography.caption.lineHeight);
+    const defaultedSeries = series.map((item) => (Object.assign({ showMark: false, labelMarkType: 'square' }, item)));
+    return (_jsx(Box, { "data-testid": "line-chart-container", sx: { width: '100%', minHeight, aspectRatio: aspect }, children: _jsx(MuiLineChart, Object.assign({}, chartProps, { series: defaultedSeries, xAxis: rotatedTickSpace.xAxis, yAxis: labelledYAxis, colors: palette || neutralPalette.categorical, grid: grid, hideLegend: hideLegend, margin: rotatedTickSpace.margin, slots: Object.assign({ mark: FilledMarkElement }, slots), slotProps: withChartSlotDefaults(slotProps, legendPosition) })) }));
 }

package/dist/components/charts/TimeSeriesChart.js

@@ -66,6 +66,15 @@ const RANGE_OPTIONS = [
     { key: '1m', granularity: 'day', labelKey: 'TimeSeriesChart.RANGE_1_MONTH' },
     { key: '1y', granularity: 'month', labelKey: 'TimeSeriesChart.RANGE_1_YEAR' },
 ];
+function SeriesToggleDot({ color, active }) {
+    return (_jsx(Box, { component: "span", "data-testid": "series-colour-dot", sx: {
+            width: (theme) => theme.spacing(1.5),
+            height: (theme) => theme.spacing(1.5),
+            borderRadius: '50%',
+            bgcolor: color,
+            opacity: active ? 1 : 0.35,
+        } }));
+}
 /**
  * A time-series preset on ChartFrame + BarChart: a range picker (emits the
  * selected range AND its mapped granularity to the host) and series toggle
@@ -81,7 +90,7 @@ const RANGE_OPTIONS = [
  * (requires `secondaryYAxisLabel`). Omit `axis` (or set it to `'primary'`)
  * on every series for today's single-shared-axis behaviour, unchanged.
  */
-export function TimeSeriesChart({ title, subtitle, xAxisLabel, yAxisLabel, secondaryYAxisLabel, data, loading = false, error = false, onRangeChange, defaultRange = '1w', }) {
+export function TimeSeriesChart({ title, subtitle, xAxisLabel, yAxisLabel, secondaryYAxisLabel, data, loading = false, error = false, onRangeChange, defaultRange = '1w', skipAnimation, }) {
     const { t } = useTranslation();
     const palette = useNeutralChartPalette().categorical;
     const seriesConfig = (data === null || data === void 0 ? void 0 : data.series) || [];
@@ -153,13 +162,13 @@ export function TimeSeriesChart({ title, subtitle, xAxisLabel, yAxisLabel, secon
             Object.assign({ id: 'secondary', label: secondaryYAxisLabel, position: 'right' }, (isIntegerAxis(secondaryVisibleSeries) ? { valueFormatter: integerTickFormatter } : {})),
         ]
         : (isIntegerAxis(primaryVisibleSeries) ? [{ valueFormatter: integerTickFormatter }] : undefined);
-    const toolbar = (_jsxs(Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: 3, alignItems: 'center' }, children: [_jsx(RadioGroup, { row: true, value: range, onChange: handleRangeChange, "aria-label": t('TimeSeriesChart.RANGE_LABEL'), children: RANGE_OPTIONS.map((option) => (_jsx(FormControlLabel, { value: option.key, control: _jsx(Radio, { size: "small" }), label: t(option.labelKey) }, option.key))) }), seriesConfig.length > 0 && (_jsx(FormGroup, { row: true, "aria-label": t('TimeSeriesChart.SERIES_LABEL'), children: seriesConfig.map((series, index) => (_jsx(FormControlLabel, { control: (_jsx(Checkbox, { size: "small", checked: visibleKeys.has(series.key), onChange: () => toggleSeries(series.key), sx: {
+    const toolbar = (_jsxs(Box, { sx: { display: 'flex', flexWrap: 'wrap', gap: 3, alignItems: 'center' }, children: [_jsx(RadioGroup, { row: true, value: range, onChange: handleRangeChange, "aria-label": t('TimeSeriesChart.RANGE_LABEL'), children: RANGE_OPTIONS.map((option) => (_jsx(FormControlLabel, { value: option.key, control: _jsx(Radio, { size: "small" }), label: t(option.labelKey) }, option.key))) }), seriesConfig.length > 0 && (_jsx(FormGroup, { row: true, "aria-label": t('TimeSeriesChart.SERIES_LABEL'), children: seriesConfig.map((series, index) => (_jsx(FormControlLabel, { control: (_jsx(Checkbox, { size: "small", checked: visibleKeys.has(series.key), onChange: () => toggleSeries(series.key), icon: _jsx(SeriesToggleDot, { color: palette[index % palette.length], active: false }), checkedIcon: _jsx(SeriesToggleDot, { color: palette[index % palette.length], active: true }), sx: {
                             color: palette[index % palette.length],
                             '&.Mui-checked': { color: palette[index % palette.length] },
                         } })), label: series.label }, series.key))) }))] }));
     return (_jsx(ChartFrame, { title: title, subtitle: subtitle, toolbar: toolbar, loading: loading, error: error, isEmpty: isDataEmpty, minHeight: CHART_HEIGHT, children: !isDataEmpty && (_jsx(BarChart, { xAxisLabel: xAxisLabel, yAxisLabel: yAxisLabel, xAxis: [{
                     data: (data === null || data === void 0 ? void 0 : data.xLabels) || [],
                     tickLabelInterval: makeTickLabelInterval(((data === null || data === void 0 ? void 0 : data.xLabels) || []).length),
-                }], yAxis: yAxis, series: visibleSeries.map((series) => (Object.assign({ data: series.data, label: series.label }, (hasSecondaryAxis && series.axis === 'secondary' ? { yAxisId: 'secondary' } : {})))), palette: visiblePalette, height: CHART_HEIGHT })) }));
+                }], yAxis: yAxis, series: visibleSeries.map((series) => (Object.assign({ data: series.data, label: series.label }, (hasSecondaryAxis && series.axis === 'secondary' ? { yAxisId: 'secondary' } : {})))), palette: visiblePalette, height: CHART_HEIGHT, hideLegend: seriesConfig.length > 0, skipAnimation: skipAnimation })) }));
 }
 export default TimeSeriesChart;

package/dist/components/charts/chartDefaults.js

@@ -0,0 +1,80 @@
+export const DEFAULT_LEGEND_POSITION = {
+    vertical: 'bottom',
+    horizontal: 'start',
+};
+export function withAxisDefaults(axes, label, defaults, tickFontSize) {
+    const values = (axes === null || axes === void 0 ? void 0 : axes.length) ? axes : [defaults];
+    return values.map((axis) => (Object.assign(Object.assign(Object.assign({}, defaults), axis), { tickLabelStyle: Object.assign({ fontSize: tickFontSize }, axis.tickLabelStyle), label: axis.label || label })));
+}
+function cssLengthToPixels(value) {
+    if (typeof value === 'number')
+        return value;
+    if (typeof value !== 'string')
+        return 0;
+    const parsed = Number.parseFloat(value);
+    if (!Number.isFinite(parsed))
+        return 0;
+    if (value.endsWith('rem') || value.endsWith('em'))
+        return parsed * 16;
+    return parsed;
+}
+const MUI_LABELLED_X_AXIS_HEIGHT = 45;
+const MUI_CHART_MARGIN_BOTTOM = 20;
+const AVERAGE_GLYPH_WIDTH_EM = 0.6;
+function formattedTickText(axis, value) {
+    if (!axis.valueFormatter)
+        return String(value);
+    try {
+        return String(axis.valueFormatter(value, { location: 'tick' }));
+    }
+    catch (_a) {
+        // Some formatters require MUI's complete scale context. Falling back to
+        // the raw value is conservative: it reserves at least as much space.
+        return String(value);
+    }
+}
+function rotatedTickMetrics(axis, defaultLineHeight) {
+    var _a, _b, _c;
+    const angle = Number((_a = axis.tickLabelStyle) === null || _a === void 0 ? void 0 : _a.angle) || 0;
+    if (angle === 0)
+        return null;
+    const fontSize = cssLengthToPixels((_b = axis.tickLabelStyle) === null || _b === void 0 ? void 0 : _b.fontSize);
+    if (fontSize === 0)
+        return null;
+    const lineHeight = Number((_c = axis.tickLabelStyle) === null || _c === void 0 ? void 0 : _c.lineHeight) || defaultLineHeight;
+    const longestLabel = (axis.data || []).reduce((longest, value) => {
+        const text = formattedTickText(axis, value);
+        return text.length > longest.length ? text : longest;
+    }, '');
+    const textWidth = Math.max(fontSize, longestLabel.length * fontSize * AVERAGE_GLYPH_WIDTH_EM);
+    const radians = (angle * Math.PI) / 180;
+    const projectedHeight = Math.abs(Math.cos(radians)) * fontSize * lineHeight
+        + Math.abs(Math.sin(radians)) * textWidth;
+    const extraHeight = Math.max(1, Math.ceil(projectedHeight - fontSize));
+    return { extraHeight };
+}
+/**
+ * Rotated labels project both their line box and text width vertically.
+ * X-Charts uses xAxis.height when deciding whether a label fits, while margin
+ * only separates the axis from the SVG edge, so both surfaces must grow.
+ * Explicit caller height and bottom-margin values always remain untouched.
+ */
+export function spaceForRotatedTicks(xAxis, margin, defaultLineHeight = 1) {
+    let largestExtraHeight = 0;
+    const spacedXAxis = xAxis.map((axis) => {
+        const metrics = rotatedTickMetrics(axis, defaultLineHeight);
+        if (!metrics)
+            return axis;
+        largestExtraHeight = Math.max(largestExtraHeight, metrics.extraHeight);
+        if (axis.height != null)
+            return axis;
+        return Object.assign(Object.assign({}, axis), { height: MUI_LABELLED_X_AXIS_HEIGHT + metrics.extraHeight });
+    });
+    const callerSetBottom = typeof margin === 'number' || (margin === null || margin === void 0 ? void 0 : margin.bottom) != null;
+    const spacedMargin = largestExtraHeight > 0 && !callerSetBottom
+        ? Object.assign(Object.assign({}, margin), { bottom: MUI_CHART_MARGIN_BOTTOM + largestExtraHeight }) : margin;
+    return { xAxis: spacedXAxis, margin: spacedMargin };
+}
+export function withChartSlotDefaults(slotProps, legendPosition) {
+    return Object.assign(Object.assign({}, slotProps), { tooltip: Object.assign({ trigger: 'axis' }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.tooltip), legend: Object.assign({ position: legendPosition }, slotProps === null || slotProps === void 0 ? void 0 : slotProps.legend) });
+}

package/dist/components/charts/chartLabels.js

@@ -0,0 +1,31 @@
+// Short, granularity-aware x-axis tick labels.
+//
+// Not a style choice -- MUI X-Charts has a known, unfixed bug (mui-x#18768,
+// duplicate of #18399): when the measured space for a tick label gets
+// tight, its ellipsize() logic doesn't truncate the text, it collapses it
+// to an empty string (the <tspan> stays in the DOM with no content). It
+// only reproduces with long label text ("08/05, 10:00 AM"-style, ~16
+// characters) combined with this app's actual font metrics (DM Sans) --
+// short labels like "05.08." or "10:00" leave enough margin that the bug
+// never triggers. Same fix already proven in jg-ferien's ActivitySection.
+// `locale` defaults to "de-CH" only as a fallback for callers that don't
+// pass the app's active i18n language (found in review: an earlier version
+// hardcoded "de-CH" always, showing German month names to en/fr users).
+export function formatShortTime(date, locale = 'de-CH') {
+    // hour12 forced false regardless of locale -- an English 12-hour label
+    // ("10:00 AM") is exactly the longer style that triggered the original
+    // collapse bug; staying short is the point, not locale fidelity here.
+    return date.toLocaleTimeString(locale, { hour: '2-digit', minute: '2-digit', hour12: false });
+}
+export function formatShortDate(date, locale = 'de-CH') {
+    return date.toLocaleDateString(locale, { day: '2-digit', month: '2-digit' });
+}
+export function formatShortMonth(date, locale = 'de-CH') {
+    return date.toLocaleDateString(locale, { month: 'short', year: '2-digit' });
+}
+// "All" spans years -- day/month labels repeat (e.g. every "01.04." shows up
+// once per year) and read as meaningless noise; a bare year number is the
+// only granularity dense multi-year history can show cleanly.
+export function formatShortYear(date, locale = 'de-CH') {
+    return date.toLocaleDateString(locale, { year: 'numeric' });
+}

package/dist/components/charts/yearTickInterval.js

@@ -0,0 +1,7 @@
+/** Return one January tick for every calendar year represented in dates. */
+export function yearTickInterval(dates) {
+    const years = new Set(dates.map((date) => date.getFullYear()));
+    return [...years]
+        .sort((first, second) => first - second)
+        .map((year) => new Date(year, 0, 1));
+}

package/dist/index.js

@@ -36,6 +36,8 @@ export { BarChart } from './components/charts/BarChart';
 export { LineChart } from './components/charts/LineChart';
 export { TimeSeriesChart } from './components/charts/TimeSeriesChart';
 export { getNeutralChartPalette, useNeutralChartPalette } from './components/charts/palette';
+export { formatShortTime, formatShortDate, formatShortMonth, formatShortYear, } from './components/charts/chartLabels';
+export { yearTickInterval } from './components/charts/yearTickInterval';
 export { formatPercentage, formatCompact, formatRatio, createChartFormatters, useChartFormatters, } from './components/charts/formatters';
 // --- 7. Translations ---
 export { authTranslations } from './i18n/authTranslations';

package/dist/theme/index.js

@@ -1,2 +1,4 @@
 export { createAppTheme } from './createAppTheme';
 export { assertThemeComplete, calculateContrastRatio, reportThemeAdoption, THEME_COMPLETENESS_SURFACES, } from './themeCompleteness';
+export { formatShortTime, formatShortDate, formatShortMonth, formatShortYear, } from '../components/charts/chartLabels';
+export { yearTickInterval } from '../components/charts/yearTickInterval';

package/package.json

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

package/src/components/charts/BarChart.jsx

@@ -1,12 +1,14 @@
 import React from 'react';
 import { Box } from '@mui/material';
+import { useTheme } from '@mui/material/styles';
 import { BarChart as MuiBarChart } from '@mui/x-charts/BarChart';
 import { useNeutralChartPalette } from './palette';
-
-function labelledAxis(axes, label, defaults) {
-  const values = axes?.length ? axes : [defaults];
-  return values.map((axis) => ({ ...axis, label: axis.label || label }));
-}
+import {
+  DEFAULT_LEGEND_POSITION,
+  spaceForRotatedTicks,
+  withAxisDefaults,
+  withChartSlotDefaults,
+} from './chartDefaults';
 
 /**
  * Responsive MUI X-Charts bar preset. xAxisLabel and yAxisLabel (including units) are required.
@@ -21,23 +23,49 @@ export function BarChart({
   palette,
   minHeight,
   aspect,
+  grid = { horizontal: true },
+  hideLegend = series.length <= 1,
+  legendPosition = DEFAULT_LEGEND_POSITION,
+  margin,
+  slotProps,
   ...chartProps
 }) {
+  const theme = useTheme();
   const neutralPalette = useNeutralChartPalette();
   if (!xAxisLabel || !yAxisLabel) {
     throw new Error('BarChart requires xAxisLabel and yAxisLabel.');
   }
 
+  const labelledXAxis = withAxisDefaults(
+    xAxis,
+    xAxisLabel,
+    { scaleType: 'band', data: [] },
+    theme.typography.caption.fontSize,
+  );
+  const labelledYAxis = withAxisDefaults(
+    yAxis,
+    yAxisLabel,
+    { scaleType: 'linear' },
+    theme.typography.caption.fontSize,
+  );
+  const rotatedTickSpace = spaceForRotatedTicks(
+    labelledXAxis,
+    margin,
+    theme.typography.caption.lineHeight,
+  );
+
   return (
     <Box data-testid="bar-chart-container" sx={{ width: '100%', minHeight, aspectRatio: aspect }}>
       <MuiBarChart
         {...chartProps}
         series={series}
-        xAxis={labelledAxis(xAxis, xAxisLabel, { scaleType: 'band', data: [] })}
-        yAxis={labelledAxis(yAxis, yAxisLabel, { scaleType: 'linear' })}
+        xAxis={rotatedTickSpace.xAxis}
+        yAxis={labelledYAxis}
         colors={palette || neutralPalette.categorical}
-        hideLegend={series.length <= 1}
-        slotProps={{ tooltip: { trigger: 'axis' } }}
+        grid={grid}
+        hideLegend={hideLegend}
+        margin={rotatedTickSpace.margin}
+        slotProps={withChartSlotDefaults(slotProps, legendPosition)}
       />
     </Box>
   );

package/src/components/charts/LineChart.jsx

@@ -1,11 +1,30 @@
 import React from 'react';
 import { Box } from '@mui/material';
-import { LineChart as MuiLineChart } from '@mui/x-charts/LineChart';
+import { useTheme } from '@mui/material/styles';
+import {
+  LineChart as MuiLineChart,
+  MarkElement as MuiMarkElement,
+} from '@mui/x-charts/LineChart';
 import { useNeutralChartPalette } from './palette';
+import {
+  DEFAULT_LEGEND_POSITION,
+  spaceForRotatedTicks,
+  withAxisDefaults,
+  withChartSlotDefaults,
+} from './chartDefaults';
 
-function labelledAxis(axes, label, defaults) {
-  const values = axes?.length ? axes : [defaults];
-  return values.map((axis) => ({ ...axis, label: axis.label || label }));
+// Fixes MUI's hollow `background.paper`-filled marker (MarkElement.js's own
+// `styled()` default). CHART-6's WO named a `MuiMarkElement` theme-token
+// override in src/theme/tokens.js as the preferred mechanism, with a
+// per-wrapper slots/sx override as the documented fallback. This uses the
+// fallback deliberately, not because the theme route was infeasible: a
+// wrapper-level fix applies to every consumer immediately on this version
+// bump, including the 14 apps that haven't adopted `createAppTheme` yet
+// (THEME-1 is a separate, optional pin bump) -- a theme-token override would
+// only take effect for apps on the new baseline theme. Composes correctly
+// with a caller's own `slots.mark` (spread after this default, so it wins).
+function FilledMarkElement({ color, style, ...props }) {
+  return <MuiMarkElement {...props} color={color} style={{ fill: color, ...style }} />;
 }
 
 /**
@@ -21,23 +40,56 @@ export function LineChart({
   palette,
   minHeight,
   aspect,
+  grid = { horizontal: true },
+  hideLegend = series.length <= 1,
+  legendPosition = DEFAULT_LEGEND_POSITION,
+  margin,
+  slots,
+  slotProps,
   ...chartProps
 }) {
+  const theme = useTheme();
   const neutralPalette = useNeutralChartPalette();
   if (!xAxisLabel || !yAxisLabel) {
     throw new Error('LineChart requires xAxisLabel and yAxisLabel.');
   }
 
+  const labelledXAxis = withAxisDefaults(
+    xAxis,
+    xAxisLabel,
+    { scaleType: 'point', data: [] },
+    theme.typography.caption.fontSize,
+  );
+  const labelledYAxis = withAxisDefaults(
+    yAxis,
+    yAxisLabel,
+    { scaleType: 'linear' },
+    theme.typography.caption.fontSize,
+  );
+  const rotatedTickSpace = spaceForRotatedTicks(
+    labelledXAxis,
+    margin,
+    theme.typography.caption.lineHeight,
+  );
+  const defaultedSeries = series.map((item) => ({
+    showMark: false,
+    labelMarkType: 'square',
+    ...item,
+  }));
+
   return (
     <Box data-testid="line-chart-container" sx={{ width: '100%', minHeight, aspectRatio: aspect }}>
       <MuiLineChart
         {...chartProps}
-        series={series}
-        xAxis={labelledAxis(xAxis, xAxisLabel, { scaleType: 'point', data: [] })}
-        yAxis={labelledAxis(yAxis, yAxisLabel, { scaleType: 'linear' })}
+        series={defaultedSeries}
+        xAxis={rotatedTickSpace.xAxis}
+        yAxis={labelledYAxis}
         colors={palette || neutralPalette.categorical}
-        hideLegend={series.length <= 1}
-        slotProps={{ tooltip: { trigger: 'axis' } }}
+        grid={grid}
+        hideLegend={hideLegend}
+        margin={rotatedTickSpace.margin}
+        slots={{ mark: FilledMarkElement, ...slots }}
+        slotProps={withChartSlotDefaults(slotProps, legendPosition)}
       />
     </Box>
   );

package/src/components/charts/TimeSeriesChart.jsx

@@ -80,6 +80,22 @@ const RANGE_OPTIONS = [
   { key: '1y', granularity: 'month', labelKey: 'TimeSeriesChart.RANGE_1_YEAR' },
 ];
 
+function SeriesToggleDot({ color, active }) {
+  return (
+    <Box
+      component="span"
+      data-testid="series-colour-dot"
+      sx={{
+        width: (theme) => theme.spacing(1.5),
+        height: (theme) => theme.spacing(1.5),
+        borderRadius: '50%',
+        bgcolor: color,
+        opacity: active ? 1 : 0.35,
+      }}
+    />
+  );
+}
+
 /**
  * A time-series preset on ChartFrame + BarChart: a range picker (emits the
  * selected range AND its mapped granularity to the host) and series toggle
@@ -106,6 +122,7 @@ export function TimeSeriesChart({
   error = false,
   onRangeChange,
   defaultRange = '1w',
+  skipAnimation,
 }) {
   const { t } = useTranslation();
   const palette = useNeutralChartPalette().categorical;
@@ -221,6 +238,8 @@ export function TimeSeriesChart({
                   size="small"
                   checked={visibleKeys.has(series.key)}
                   onChange={() => toggleSeries(series.key)}
+                  icon={<SeriesToggleDot color={palette[index % palette.length]} active={false} />}
+                  checkedIcon={<SeriesToggleDot color={palette[index % palette.length]} active />}
                   sx={{
                     color: palette[index % palette.length],
                     '&.Mui-checked': { color: palette[index % palette.length] },
@@ -261,6 +280,8 @@ export function TimeSeriesChart({
           }))}
           palette={visiblePalette}
           height={CHART_HEIGHT}
+          hideLegend={seriesConfig.length > 0}
+          skipAnimation={skipAnimation}
         />
       )}
     </ChartFrame>