@umriss-ui/charts 0.9.0 → 0.11.0

package/CHANGELOG.md

@@ -29,6 +29,198 @@ interface was still expected to move before `0.3.0`.
 
 ---
 
+## 0.11.0 – A chart bound to its rows, with a view of its own (Oct. 2026)
+
+Two efforts in one break, released together with `@umriss-ui/table` and
+`@umriss-ui/schedule`. A chart is declared through `useChart(rows)`, as a
+table is through `useTable`, and every series and axis reads its rows through
+`value` - a field name the compiler checks, or a function (ADR-0048). And the
+chart holds its own **view**: the span each zoomable x axis shows and the
+hidden series, taken as a start and reported whole (ADR-0047) - zoom, the
+legend's toggle and a way back cost a caller no state of its own any more. The
+old shape is removed, not deprecated; the table below says what stands in
+each place.
+
+### Changed
+
+**Moving over.** Every export and prop that went, and what stands in its
+place:
+
+| Was | Is |
+|---|---|
+| `import { Chart } from "@umriss-ui/charts"`, `<Chart data={rows}>` | `const { Chart } = useChart(rows)`, `<Chart>` without `data` - one `Chart` per `useChart`, a second chart is a second call |
+| `import { XAxis, YAxis }` | `const { XAxis, YAxis } = useChart(rows)` |
+| `import { Line, Area, Bar, Scatter, StateBand, Matrix, BoxPlot }` | the same names from `useChart(rows)`; a series with its own `data` is still one, typed by that `data` |
+| `ChartProps<T>`, `ChartProps.data` | `ChartProps`, without a type parameter and without `data` |
+| `accessor={(d: Row) => d.a}` on `Line`, `Area`, `Bar`, `Scatter`, `StateBand` | `value="a"` - a field name of the row, or a function where a field does not suffice; required |
+| `XAxis accessor` | `XAxis value`; an axis over series that bring their own `data` names their row: `<XAxis<Row> value="t" />` |
+| `YAxis accessor`, `YAxisProps<T>` | nothing - along y the series place their rows; `YAxisProps` has no type parameter |
+| `Matrix accessor` (the row) | `Matrix value`, as the y position on every kind |
+| `Matrix value` (the colour) | `Matrix level`; `MatrixSeriesConfig.value` is `MatrixSeriesConfig.level` |
+| `TooltipPoint.value` of a matrix cell (its colour) | `TooltipPoint.level`; `yValue` stays the cell's row |
+| `ControlChart accessor` | `ControlChart value`, a field name or a function |
+| `hidden` on every series kind, `SeriesBase.hidden` | the view's `hidden`, by the series' `name`: `initialView: { hidden: ["…"] }`, or `toggleSeries`, `showOnly`, `showAllSeries` from `useChart` |
+| `Legend onToggle` | nothing - the legend toggles by itself; the change arrives in `onViewChange` |
+| `XAxis onDomainChange` | `XAxis zoomable`; the span arrives in `onViewChange` as `view.domains[axisId]` - a lone x axis is `"x"` |
+| a zoomed `XAxis domain` handed back (controlled) | `initialView: { domains: { x: span } }` or `setDomain("x", span)`; `domain` stays the axis' configuration and is a zoomable axis' start |
+| clamping the proposed domain in the handler | `XAxis zoomLimits={{ min, max }}`; without it at most the data's extent or the axis' own `domain`, whichever is wider, at least three data steps; a span equal to the axis' own domain is no part of the view |
+| `AxisConfig.onDomainChange` | `AxisConfig.zoomable`, `AxisConfig.zoomLimits` |
+| the type `Accessor<T>`, `ListAccessor<T>` | `ValueFunction<T>`, `ListFunction<T>` - the function form of `Value<T>` and `ListValue<T>`, same shape |
+
+- **`Chart`, the axes and the series kinds are no exports of their own.**
+  `useChart(rows)` hands them out, typed at the row; their props stay public
+  types. `Tooltip`, `Legend`, `DataTable`, `LimitLine` and `LimitBand` read no
+  row and are imported as before. A `Chart` taken from one `useChart` and
+  drawn twice at once warns in DEV: it holds the view, and two charts are two
+  calls.
+- **`value` replaces `accessor` everywhere**, and is required on every series
+  kind and on `XAxis`. A field name is checked by the compiler against the
+  row's number fields; it is compared by its name, so a switched name
+  redraws. A function is compared by its source text, as `accessor` was (see
+  `docs/capabilities.md`, "Known limits"). The named channels - `baseline`,
+  the box's five numbers, `mean`, `count`, the notch, `outliers` (a list
+  field) - take a field name as well.
+- **The legend toggles by default.** Every entry of a named series is a
+  button with `aria-pressed`; a click hides or shows the series at once, a
+  state's entry every band showing it. A series without a `name` cannot be
+  hidden and its entry stays text. A legend that should not toggle has no
+  switch; a caller who kept the legend static by leaving out `onToggle` now
+  gets the buttons.
+- **A zoom is the chart's own.** Wheel, pinch, drag and the keys move the
+  span on an `XAxis zoomable` at once, within `zoomLimits`; nothing is
+  proposed to the caller any more. The double click and the key `0` go back
+  to the axis' own `domain` - before, they proposed the whole data range. A
+  pan keeps its width and is not clamped; a view handed in or set is taken as
+  given.
+- **`ChartsWording` has three more keys**: `legendHelp`, `allShown` and
+  `showAll`. A complete wording object of one's own needs them; a
+  `Partial<ChartsWording>` handed to `Chart wording` does not. `zoomHelp`
+  says what `0` does now: "0 goes back to the axis' own span." / "0 kehrt
+  zum eigenen Bereich der Achse zurück."
+
+### Added
+
+- **`useChart(rows, { initialView, onViewChange })`** - the chart and its
+  parts over the rows, each keeping its identity over the renders, with the
+  chart's view and its setters: `view`, `domains`, `setDomain(axisId, span |
+  null)` (`null` = the axis' own `domain`), `hidden`, `toggleSeries(name)`,
+  `showOnly(name)`, `showAllSeries()`.
+  - `initialView` is the view to start from, and to go to whenever one
+    differing in content from the last one handed in arrives; the same view
+    again changes nothing, and what it leaves out is reset. Axis ids and
+    series names the chart does not carry fall out. **A known limit:** a view
+    handed in that equals one the chart reported less than a second ago, and
+    that has not come back yet, is taken for the chart's own report coming
+    back late and is not applied - so that two charts in step do not jump back
+    mid-pan. An application that restores a just-reported view within that
+    second sees no change.
+  - `onViewChange(view)` hears every change of the view once, always the
+    whole view, a pan or zoom at most once per frame; not the view the chart
+    starts with. Charts keep in step by handing each other what they report;
+    `syncId` keeps sharing the pointer only.
+- **`XAxis zoomable` and `zoomLimits: { min, max }`** - zoom and pan by Ctrl/⌘
+  + wheel, pinch, drag, a horizontal or Shift wheel and, with the focus on the
+  chart, + − Shift+←/→ and 0; without `zoomable` nothing zooms and the plain
+  wheel stays the page's.
+- **'Show all'**: once a zoomable x axis shows a span of its own, a quiet
+  button over the plot area's corner (top right; bottom right under a legend
+  or the data key above) brings every zoomed axis back, reported once, and
+  goes. A tab stop of its own after the plot's, handing the focus to the plot
+  as it goes; its label is the wording's `showAll` ("Show all" / "Alles
+  zeigen"); `--uc-*` tokens only, kept under forced colours, no transition
+  under reduced motion.
+- **The legend's gestures**: a double click, Alt/⌥+click or Shift+Enter on
+  an entry shows only that series (a state's entry: its bands), and on the
+  only one visible shows all again. Whatever would hide every series shows
+  all instead, and the polite live region says so (`allShown`); the plot's
+  summary names Shift+Enter (`legendHelp`). A view handed in is taken as
+  given and may hide every series.
+- **Types**: `ChartParts`, `ChartOptions`, `ChartView`, `AxisSpans`,
+  `ZoomLimits`, and the forms a value takes - `Value`, `NumberField`,
+  `ListValue`, `ListField`.
+- **`Echoes`** - the rule that tells a view reported and handed back late
+  from one handed in, which `@umriss-ui/schedule` takes from here (ADR-0022)
+  instead of a copy of its own.
+- **The demo** has the pages 'Zoom and pan', 'Legend' (split from 'Tooltip &
+  Legend', which is 'Tooltip' now) and 'View' (a view kept across a reload
+  and restored), all in the rubric Chart. The zoom and legend examples moved
+  there; their old anchors - `/axis/#zoom-and-pan`, `/axis/#visible-domain`,
+  `/chart/#cursor-sync`, `/tooltip/#toggling-legend`,
+  `/tooltip/#legend-placement` - land on them. Every example declares its
+  chart through `useChart` and `value`.
+
+---
+
+## 0.10.0 – Every export explained, and a limit's colour at its label (Oct. 2026)
+
+The package explains itself where it is used: every export carries a comment,
+every default a `@default` tag, and the demo lists all of it in an API index
+(ADR-0044). Every prop of a props table is shown by an example or named as
+an exception. A limit's own `color` reaches its label, as a stroke before the
+text, and on an x axis the label leaves no tick label half covered (see
+Fixed).
+
+### Added
+
+- **Every export carries a comment**, the German wording's included: what a
+  component, a function, a constant or a type is for. The editor shows it on
+  hover, from the package's `.d.ts`. Nothing else changes.
+- **A prop's default stands in a `@default` tag**, no longer in a sentence of
+  its comment: `Chart height` is `300`, `LimitLine role` `"specification"`,
+  a series' `color` the palette's. The editor shows the tag on hover. Nothing
+  else changes.
+- **A prop's comment cites no requirement number**: "Binding to a y axis."
+  ends there; the number stands in a `@remarks` tag. Nothing else changes.
+- **The demo has an API index**: `/charts/api/`, the last entry of the
+  sidebar, lists every export of `@umriss-ui/charts` and of
+  `@umriss-ui/charts/wording/de` under its import path, grouped as components,
+  functions, constants and types, alphabetical - each value with its comment
+  and its declaration, each type with a link to its table or its definition,
+  and the pages that use it. `DEFAULT_CHARTS_WORDING` and its German twin link
+  their table on core's Language page. A hook or a function a page names, in
+  its text or its import line, leads to its entry. `docs/llms-full.md` ends
+  with the same index, in place of the appendix "The rest of the API". The
+  library is unchanged.
+- **`docs/llms-full.md` defines every type a props table names**: a type
+  without a table of its own (`Accessor`, `MatrixColoring`) stands under
+  "Types on this page" of each page that names it, with its comment and its
+  members or its declaration.
+- **Every token listed**: core's Theming page lists the 29 `--uc-…` tokens
+  of the chart's root, with the core token each one takes, and the
+  Installation page links there. The tokens themselves are unchanged.
+- **The Chart page says what a screen reader meets**: a section
+  Accessibility after Keyboard names the plot's role and name, the summary,
+  the readout after a key, the label to pass and what forced colours change.
+  Every other page with a chart in its examples - Installation, Axis, the
+  series, the limits, Tooltip & Legend and Benchmark as well as Line - has a
+  Keyboard section linking the Chart page's keys. In the demo, the Markdown
+  twins and `docs/llms-full.md`; the chart is unchanged.
+- **Every prop of a props table is shown, or named as an exception**: new
+  examples for shares of the whole over time (`normalize`), moments and
+  windows along time (a limit's `orientation="x"` and `color`), specification
+  and control limits side by side (`role="control"`), the rules of a control
+  chart (`rules`, `zoneLines`, `onViolations`) and every kind of series on a
+  second axis (`xAxisId`, `yAxisId`); existing examples now show `dash` on an
+  area, `hidden` from a legend's `onToggle` on a stack and a state band, and
+  `format` on a matrix. The 20 props left without an example are
+  pass-throughs and twins of a prop shown on a sibling type; the demo's list
+  says so for each. The charts are unchanged.
+
+### Fixed
+
+- **A limit with a `color` of its own marks its label with it**: a short
+  stroke before the text, in the limit's colour and its line's pattern
+  (dashed for a specification, solid for a control limit, dotted for a
+  zone). The text stays in the axis's text colour, legible in both themes,
+  which a colour chosen for a line need not be. The label kept the
+  severity's colour before - a "Release freeze" in alarm red beside its
+  own-coloured line. Without `color` the severity and the role colour the
+  text as before, with no stroke.
+- **On an x axis a tick label a limit's label reaches over gives way**, as on
+  a y axis; it stood half covered before. Its tick mark stays.
+
+---
+
 ## 0.9.0 – A box plot (Oct. 2026)
 
 ### Changed
@@ -273,7 +465,7 @@ interface was still expected to move before `0.3.0`.
 
 - **An axis band no longer keeps the width of the fallback font.** A chart
   laid out before its web font had arrived remembered the wider band under the
-  hysteresis (R-3.4) and kept it - the plot stood up to seven pixels too far in,
+  hysteresis and kept it - the plot stood up to seven pixels too far in,
   or not, depending on which came first. The band is now measured anew once the
   font is there, and on a change of theme.
 

package/README.md

@@ -23,7 +23,7 @@ does so because it chose to, not because this one required it (ADR-0020).
 ## The smallest chart that runs
 
 ```tsx
-import { Chart, Line, XAxis, YAxis, Tooltip } from "@umriss-ui/charts";
+import { Tooltip, useChart } from "@umriss-ui/charts";
 
 interface Point {
   t: number;
@@ -38,17 +38,26 @@ const DATA: Point[] = [
 ];
 
 export function Course() {
+  const { Chart, XAxis, YAxis, Line } = useChart(DATA);
   return (
-    <Chart data={DATA} height={280} ariaLabel="Course of one series">
-      <XAxis accessor={(d: Point) => d.t} label="Index" />
-      <YAxis accessor={(d: Point) => d.a} />
-      <Line accessor={(d: Point) => d.a} name="Series A" />
+    <Chart height={280} ariaLabel="Course of one series">
+      <XAxis value="t" label="Index" />
+      <YAxis />
+      <Line value="a" name="Series A" />
       <Tooltip />
     </Chart>
   );
 }
 ```
 
+`useChart(rows)` binds the chart to its rows, as `useTable` binds a table: it
+hands back `Chart`, the axes and every series kind, typed at the row, so that
+`value` is a field name the compiler checks - or a function where a field does
+not suffice. A series with its own `data` is typed by that data instead, and
+an x axis that reads such rows names their type: `<XAxis<Row> value="t" />`.
+A y axis reads no value: its series place the rows along y. `Tooltip`, `Legend`, `DataTable`, `LimitLine` and `LimitBand` read no row and
+are imported as they are (ADR-0048).
+
 A series is an element, not an entry in a configuration object: the order in the
 JSX decides what lies over what, and at the same time the palette colour.
 
@@ -63,7 +72,7 @@ words are English; German comes from its own subpath:
 ```tsx
 import { GERMAN_CHARTS_WORDING } from "@umriss-ui/charts/wording/de";
 
-<Chart data={DATA} ariaLabel="Verlauf" wording={GERMAN_CHARTS_WORDING}>…</Chart>
+<Chart ariaLabel="Verlauf" wording={GERMAN_CHARTS_WORDING}>…</Chart>
 ```
 
 ## Styles
@@ -90,6 +99,13 @@ loaded: Geist when the application has it, the system fonts otherwise.
   double bookings — is `@umriss-ui/schedule`'s (ADR-0026).
 * **Several axes per orientation**, each with its own extent; only the first
   registered axis per orientation draws a grid.
+* **The chart holds its own view** (ADR-0047): an `XAxis zoomable` zooms and
+  pans by wheel, pinch, drag and keys within its `zoomLimits`, and a 'Show
+  all' button brings the whole back; the legend hides and shows a series on a
+  click and shows only it on a double click. `useChart(rows, { initialView,
+  onViewChange })` takes a start and reports every change, always the whole
+  view - charts in step hand each other theirs; `setDomain`, `toggleSeries`,
+  `showOnly` and `showAllSeries` stand on what the hook hands back.
 * **The instruments**: `LimitLine` and `LimitBand`, `ControlChart` with its four
   rule violations, `pareto()` with a collected remainder, and a working-time
   axis that takes the empty hours out and marks every removed span.
@@ -114,17 +130,19 @@ them: bars and areas stack (`stack`, `normalize`).
 * The demo: <https://romanhaendler.github.io/umriss-ui/charts/>, or locally
   `pnpm dev:charts` (port 4174). It is the documentation — every page
   shows running examples with their source and the props table generated from
-  `src/`.
+  `src/`, each prop linked to the examples that show it. An API index lists
+  every export, and one search finds across all five packages.
 * [`CHANGELOG.md`](CHANGELOG.md) — what changes for a caller.
 * **For a coding agent**: `docs/llms-full.md` inside the installed package —
   the demo as one Markdown file, pinned to the installed version: every page
   with its examples' source, its props tables and why it is built as it is,
-  and the declaration of every other export. Online, for the latest version:
+  and an index of every export with its comment and its declaration. Each
+  page also has a Markdown twin online; for the latest version:
   <https://romanhaendler.github.io/umriss-ui/charts/llms.txt>.
 * [`docs/capabilities.md`](docs/capabilities.md) — every capability with the
   level at which it is proved.
 * [`../../docs/design-language.md`](../../docs/design-language.md) — the design
-  language all four packages share.
+  language all five packages share.
 
 ## Licence
 

package/dist/charts.css

@@ -1 +1 @@
-@layer umriss.tokens,umriss.base,umriss.components;@layer umriss.components{.uc-root,.uc-root:before,.uc-root:after{box-sizing:border-box}.uc-plot,.uc-plot:before,.uc-plot:after{box-sizing:border-box}.uc-sr,.uc-sr:before,.uc-sr:after{box-sizing:border-box}.uc-axes,.uc-axes:before,.uc-axes:after{box-sizing:border-box}.uc-axis,.uc-axis:before,.uc-axis:after{box-sizing:border-box}.uc-axis-line,.uc-axis-line:before,.uc-axis-line:after{box-sizing:border-box}.uc-axis-y,.uc-axis-y:before,.uc-axis-y:after{box-sizing:border-box}.uc-axis-left,.uc-axis-left:before,.uc-axis-left:after{box-sizing:border-box}.uc-axis-right,.uc-axis-right:before,.uc-axis-right:after{box-sizing:border-box}.uc-axis-x,.uc-axis-x:before,.uc-axis-x:after{box-sizing:border-box}.uc-axis-bottom,.uc-axis-bottom:before,.uc-axis-bottom:after{box-sizing:border-box}.uc-axis-top,.uc-axis-top:before,.uc-axis-top:after{box-sizing:border-box}.uc-tick,.uc-tick:before,.uc-tick:after{box-sizing:border-box}.uc-tick-mark,.uc-tick-mark:before,.uc-tick-mark:after{box-sizing:border-box}.uc-tick-label,.uc-tick-label:before,.uc-tick-label:after{box-sizing:border-box}.uc-axis-title,.uc-axis-title:before,.uc-axis-title:after{box-sizing:border-box}.uc-empty,.uc-empty:before,.uc-empty:after{box-sizing:border-box}.uc-legend,.uc-legend:before,.uc-legend:after{box-sizing:border-box}.uc-legend-top,.uc-legend-top:before,.uc-legend-top:after{box-sizing:border-box}.uc-legend-bottom,.uc-legend-bottom:before,.uc-legend-bottom:after{box-sizing:border-box}.uc-legend-item,.uc-legend-item:before,.uc-legend-item:after{box-sizing:border-box}.uc-legend-chip,.uc-legend-chip:before,.uc-legend-chip:after{box-sizing:border-box}.uc-legend-mark,.uc-legend-mark:before,.uc-legend-mark:after{box-sizing:border-box}.uc-data-key,.uc-data-key:before,.uc-data-key:after{box-sizing:border-box}.uc-data-panel,.uc-data-panel:before,.uc-data-panel:after{box-sizing:border-box}.uc-data-table,.uc-data-table:before,.uc-data-table:after{box-sizing:border-box}.uc-tooltip,.uc-tooltip:before,.uc-tooltip:after{box-sizing:border-box}.uc-tooltip-head,.uc-tooltip-head:before,.uc-tooltip-head:after{box-sizing:border-box}.uc-tooltip-list,.uc-tooltip-list:before,.uc-tooltip-list:after{box-sizing:border-box}.uc-tooltip-row,.uc-tooltip-row:before,.uc-tooltip-row:after{box-sizing:border-box}.uc-tooltip-chip,.uc-tooltip-chip:before,.uc-tooltip-chip:after{box-sizing:border-box}.uc-tooltip-name,.uc-tooltip-name:before,.uc-tooltip-name:after{box-sizing:border-box}.uc-tooltip-total,.uc-tooltip-total:before,.uc-tooltip-total:after{box-sizing:border-box}.uc-tooltip-part,.uc-tooltip-part:before,.uc-tooltip-part:after{box-sizing:border-box}.uc-tooltip-x,.uc-tooltip-x:before,.uc-tooltip-x:after{box-sizing:border-box}.uc-tooltip-value,.uc-tooltip-value:before,.uc-tooltip-value:after{box-sizing:border-box}.uc-measure,.uc-measure:before,.uc-measure:after{box-sizing:border-box}.uc-limit-label,.uc-limit-label:before,.uc-limit-label:after{box-sizing:border-box}.uc-break,.uc-break:before,.uc-break:after{box-sizing:border-box}.uc-root{--uc-color-axis: var(--u-edge-color-strong, rgba(23, 23, 23, .17));--uc-color-grid: var(--u-hairline, rgba(23, 23, 23, .06));--uc-color-text: var(--u-color-text-muted, #71717a);--uc-color-bg: var(--u-color-surface, #ffffff);--uc-font: var( --u-font-sans, "Geist Sans", "Geist", -apple-system, "Segoe UI", system-ui, sans-serif );--uc-font-mono: var( --u-font-mono, "Geist Mono", ui-monospace, "Cascadia Mono", "Consolas", monospace );--uc-color-warning: var(--u-color-warning, #8a5c00);--uc-color-alarm: var(--u-color-danger, #b13636);--uc-color-ok: var(--u-color-success, #217a4b);--uc-series-1: var(--u-chart-1, #2563eb);--uc-series-2: var(--u-chart-2, #db2777);--uc-series-3: var(--u-chart-3, #059669);--uc-series-4: var(--u-chart-4, #d97706);--uc-series-5: var(--u-chart-5, #7c3aed);--uc-series-6: var(--u-chart-6, #0891b2);--uc-size-tick: 11.5px;--uc-size-title: 12px;--uc-size-legend: 12.5px;--uc-size-tooltip: 12px;--uc-leading-label: 1.25;--uc-leading-text: 1.35;--uc-radius: 6px;--uc-radius-chip: 2px;--uc-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 4px 12px rgba(0, 0, 0, .08);--uc-focus-ring: var(--u-focus-ring, 0 0 0 2px #0e7d72);--uc-color-hover: var(--u-color-surface-sunken, #f4f4f5);--uc-color-pressed: var(--u-color-surface-pressed, #e9e9eb);--uc-transition-state: var(--u-transition, .12s cubic-bezier(.22, 1, .36, 1));--uc-transition: 80ms var(--u-ease-out, cubic-bezier(.22, 1, .36, 1));position:relative;display:flex;flex-direction:column;font-family:var(--uc-font);color:var(--uc-color-text);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}.uc-plot{position:relative;flex:1 1 auto;min-height:0;min-width:0}.uc-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.uc-plot:focus{outline:none}.uc-plot:focus-visible{outline:2px solid transparent;box-shadow:var(--uc-focus-ring)}.uc-plot>canvas{box-sizing:border-box}.uc-plot>canvas{position:absolute;top:0;right:0;bottom:0;left:0;display:block;pointer-events:none}.uc-axes{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.uc-axis{position:absolute}.uc-axis-line{position:absolute;background:var(--uc-color-axis)}.uc-axis-y>.uc-axis-line{top:0;width:1px;height:100%}.uc-axis-left>.uc-axis-line{right:0}.uc-axis-right>.uc-axis-line{left:0}.uc-axis-x>.uc-axis-line{left:0;width:100%;height:1px}.uc-axis-bottom>.uc-axis-line{top:0}.uc-axis-top>.uc-axis-line{bottom:0}.uc-tick{position:absolute}.uc-axis-y>.uc-tick{left:0;right:0;height:1px}.uc-axis-x>.uc-tick{top:0;bottom:0;width:1px}.uc-tick-mark{position:absolute;background:var(--uc-color-axis)}.uc-axis-y>.uc-tick>.uc-tick-mark{top:0;width:5px;height:1px}.uc-axis-left>.uc-tick>.uc-tick-mark{right:0}.uc-axis-right>.uc-tick>.uc-tick-mark{left:0}.uc-axis-x>.uc-tick>.uc-tick-mark{left:0;width:1px;height:5px}.uc-axis-bottom>.uc-tick>.uc-tick-mark{top:0}.uc-axis-top>.uc-tick>.uc-tick-mark{bottom:0}.uc-tick-label{position:absolute;white-space:pre;font-size:var(--uc-size-tick);line-height:var(--uc-leading-label);letter-spacing:.005em;color:var(--uc-color-text)}.uc-axis-y>.uc-tick>.uc-tick-label{top:50%;transform:translateY(-50%)}.uc-axis-left>.uc-tick>.uc-tick-label{text-align:right}.uc-axis-x>.uc-tick>.uc-tick-label{text-align:center}.uc-axis-right>.uc-tick>.uc-tick-label{text-align:left}.uc-axis-title{position:absolute;white-space:pre;font-size:var(--uc-size-title);line-height:var(--uc-leading-label);letter-spacing:.01em;color:var(--uc-color-text)}.uc-axis-x>.uc-axis-title{left:0;right:0;text-align:center}.uc-axis-bottom>.uc-axis-title{bottom:0}.uc-axis-top>.uc-axis-title{top:0}.uc-axis-y>.uc-axis-title{top:50%;writing-mode:vertical-rl}.uc-axis-left>.uc-axis-title{left:0;transform:translateY(-50%) rotate(180deg)}.uc-axis-right>.uc-axis-title{right:0;transform:translateY(-50%)}.uc-empty{position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;font-size:var(--uc-size-legend);color:var(--uc-color-text)}.uc-legend{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:var(--uc-size-legend);line-height:var(--uc-leading-text);color:var(--uc-color-text)}.uc-legend-top{order:-1;padding-bottom:8px}.uc-legend-bottom{order:1;padding-top:8px}.uc-legend-item{display:inline-flex;align-items:center;gap:6px;cursor:default}.uc-legend-chip{display:inline-block;width:10px;height:10px;border-radius:var(--uc-radius-chip);corner-shape:squircle}.uc-legend-mark{display:block;flex:none;forced-color-adjust:none}button.uc-legend-item{box-sizing:border-box}button.uc-legend-item{padding:0;border:0;border-radius:var(--uc-radius-chip);corner-shape:squircle;background:none;font:inherit;color:inherit;cursor:pointer;transition:background-color var(--uc-transition-state),box-shadow var(--uc-transition-state)}button.uc-legend-item:hover{box-sizing:border-box}button.uc-legend-item:hover{background:var(--uc-color-hover)}button.uc-legend-item:hover:not(:focus-visible){box-sizing:border-box}button.uc-legend-item:hover:not(:focus-visible){box-shadow:0 0 0 3px var(--uc-color-hover)}button.uc-legend-item:active{box-sizing:border-box}button.uc-legend-item:active{background:var(--uc-color-pressed)}button.uc-legend-item:active:not(:focus-visible){box-sizing:border-box}button.uc-legend-item:active:not(:focus-visible){box-shadow:0 0 0 3px var(--uc-color-pressed)}button.uc-legend-item:focus-visible{box-sizing:border-box}button.uc-legend-item:focus-visible{outline:2px solid transparent;box-shadow:var(--uc-focus-ring)}.uc-legend-item[data-hidden]{text-decoration:line-through}.uc-legend-item[data-hidden]>.uc-legend-chip{opacity:.3}.uc-data-key{margin-left:auto}.uc-data-panel{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;overflow:auto;background:var(--uc-color-bg);font-size:var(--uc-size-tooltip);line-height:var(--uc-leading-text);color:var(--uc-color-text)}.uc-data-panel:focus{outline:none}.uc-data-panel:focus-visible{outline:2px solid transparent;box-shadow:var(--uc-focus-ring)}.uc-root:has(>.uc-data-panel)>.uc-plot{visibility:hidden}.uc-data-table{width:100%;border-collapse:collapse}.uc-data-table+.uc-data-table{margin-top:12px}.uc-data-table>caption{box-sizing:border-box}.uc-data-table>caption{padding-bottom:6px;text-align:left}.uc-data-table th,.uc-data-table td{box-sizing:border-box}.uc-data-table th,.uc-data-table td{padding:3px 8px;border-bottom:1px solid var(--uc-color-grid);white-space:nowrap;font-weight:400;text-align:right}.uc-data-table>thead th{box-sizing:border-box}.uc-data-table>thead th{position:sticky;top:0;background:var(--uc-color-bg);border-bottom-color:var(--uc-color-axis)}.uc-data-table th:first-child{box-sizing:border-box}.uc-data-table th:first-child{text-align:left}.uc-data-table>tbody th{box-sizing:border-box}.uc-data-table>tbody td{box-sizing:border-box}.uc-data-table>tbody th,.uc-data-table>tbody td{font-family:var(--uc-font-mono)}.uc-tooltip{position:absolute;top:0;left:0;z-index:2;pointer-events:none;opacity:0;transition:opacity var(--uc-transition);min-width:96px;padding:7px 9px;border:1px solid var(--uc-color-axis);border-radius:var(--uc-radius);corner-shape:squircle;background:var(--uc-color-bg);box-shadow:var(--uc-shadow);font-size:var(--uc-size-tooltip);line-height:var(--uc-leading-text);color:var(--uc-color-text)}.uc-tooltip-head{font-family:var(--uc-font-mono);font-size:var(--uc-size-tick);letter-spacing:.01em;padding-bottom:5px;margin-bottom:5px;border-bottom:1px solid var(--uc-color-grid)}.uc-tooltip-list{display:grid;grid-template-columns:auto 1fr auto;gap:3px 8px;align-items:center}.uc-tooltip-row{display:contents}.uc-tooltip-chip{width:8px;height:8px;border-radius:var(--uc-radius-chip);corner-shape:squircle}.uc-tooltip-name{white-space:nowrap}.uc-tooltip-total{grid-column:1 / 3}.uc-tooltip-part{grid-column:2}.uc-tooltip-x{margin-left:6px;font-family:var(--uc-font-mono)}.uc-tooltip-value{font-family:var(--uc-font-mono);text-align:right;white-space:nowrap}@media(prefers-reduced-motion:reduce){.uc-tooltip,button.uc-legend-item{transition:none}}.uc-measure{position:absolute;top:0;left:0;right:auto;bottom:auto;transform:none;visibility:hidden;pointer-events:none;white-space:pre;writing-mode:horizontal-tb}.uc-limit-label{position:absolute;font-size:var(--uc-size-tick);line-height:var(--uc-leading-label);white-space:nowrap;font-variant-numeric:tabular-nums;background:var(--uc-color-bg);padding:0 2px}.uc-limit-label[data-severity=warning]{color:var(--uc-color-warning)}.uc-limit-label[data-severity=alarm]{color:var(--uc-color-alarm)}.uc-limit-label[data-role=control],.uc-limit-label[data-role=zone]{color:var(--uc-color-text)}.uc-axis-y .uc-limit-label{transform:translateY(-50%)}.uc-axis-left .uc-limit-label{right:9px}.uc-axis-right .uc-limit-label{left:9px}.uc-break{position:absolute;top:0;width:7px;height:9px;margin-left:-3.5px;color:var(--uc-color-text)}.uc-break:before,.uc-break:after{content:"";position:absolute;top:0;width:1px;height:9px;background:currentColor;opacity:.55;transform:skew(-20deg)}.uc-break:before{left:1px}.uc-break:after{left:4px}}
+@layer umriss.tokens,umriss.base,umriss.components;@layer umriss.components{.uc-root,.uc-root:before,.uc-root:after{box-sizing:border-box}.uc-plot,.uc-plot:before,.uc-plot:after{box-sizing:border-box}.uc-sr,.uc-sr:before,.uc-sr:after{box-sizing:border-box}.uc-axes,.uc-axes:before,.uc-axes:after{box-sizing:border-box}.uc-axis,.uc-axis:before,.uc-axis:after{box-sizing:border-box}.uc-axis-line,.uc-axis-line:before,.uc-axis-line:after{box-sizing:border-box}.uc-axis-y,.uc-axis-y:before,.uc-axis-y:after{box-sizing:border-box}.uc-axis-left,.uc-axis-left:before,.uc-axis-left:after{box-sizing:border-box}.uc-axis-right,.uc-axis-right:before,.uc-axis-right:after{box-sizing:border-box}.uc-axis-x,.uc-axis-x:before,.uc-axis-x:after{box-sizing:border-box}.uc-axis-bottom,.uc-axis-bottom:before,.uc-axis-bottom:after{box-sizing:border-box}.uc-axis-top,.uc-axis-top:before,.uc-axis-top:after{box-sizing:border-box}.uc-tick,.uc-tick:before,.uc-tick:after{box-sizing:border-box}.uc-tick-mark,.uc-tick-mark:before,.uc-tick-mark:after{box-sizing:border-box}.uc-tick-label,.uc-tick-label:before,.uc-tick-label:after{box-sizing:border-box}.uc-axis-title,.uc-axis-title:before,.uc-axis-title:after{box-sizing:border-box}.uc-empty,.uc-empty:before,.uc-empty:after{box-sizing:border-box}.uc-legend,.uc-legend:before,.uc-legend:after{box-sizing:border-box}.uc-legend-top,.uc-legend-top:before,.uc-legend-top:after{box-sizing:border-box}.uc-legend-bottom,.uc-legend-bottom:before,.uc-legend-bottom:after{box-sizing:border-box}.uc-legend-item,.uc-legend-item:before,.uc-legend-item:after{box-sizing:border-box}.uc-legend-chip,.uc-legend-chip:before,.uc-legend-chip:after{box-sizing:border-box}.uc-legend-mark,.uc-legend-mark:before,.uc-legend-mark:after{box-sizing:border-box}.uc-show-all,.uc-show-all:before,.uc-show-all:after{box-sizing:border-box}.uc-show-all-bottom,.uc-show-all-bottom:before,.uc-show-all-bottom:after{box-sizing:border-box}.uc-data-key,.uc-data-key:before,.uc-data-key:after{box-sizing:border-box}.uc-data-panel,.uc-data-panel:before,.uc-data-panel:after{box-sizing:border-box}.uc-data-table,.uc-data-table:before,.uc-data-table:after{box-sizing:border-box}.uc-tooltip,.uc-tooltip:before,.uc-tooltip:after{box-sizing:border-box}.uc-tooltip-head,.uc-tooltip-head:before,.uc-tooltip-head:after{box-sizing:border-box}.uc-tooltip-list,.uc-tooltip-list:before,.uc-tooltip-list:after{box-sizing:border-box}.uc-tooltip-row,.uc-tooltip-row:before,.uc-tooltip-row:after{box-sizing:border-box}.uc-tooltip-chip,.uc-tooltip-chip:before,.uc-tooltip-chip:after{box-sizing:border-box}.uc-tooltip-name,.uc-tooltip-name:before,.uc-tooltip-name:after{box-sizing:border-box}.uc-tooltip-total,.uc-tooltip-total:before,.uc-tooltip-total:after{box-sizing:border-box}.uc-tooltip-part,.uc-tooltip-part:before,.uc-tooltip-part:after{box-sizing:border-box}.uc-tooltip-x,.uc-tooltip-x:before,.uc-tooltip-x:after{box-sizing:border-box}.uc-tooltip-value,.uc-tooltip-value:before,.uc-tooltip-value:after{box-sizing:border-box}.uc-measure,.uc-measure:before,.uc-measure:after{box-sizing:border-box}.uc-limit-label,.uc-limit-label:before,.uc-limit-label:after{box-sizing:border-box}.uc-limit-mark,.uc-limit-mark:before,.uc-limit-mark:after{box-sizing:border-box}.uc-break,.uc-break:before,.uc-break:after{box-sizing:border-box}.uc-root{--uc-color-axis: var(--u-edge-color-strong, rgba(23, 23, 23, .17));--uc-color-grid: var(--u-hairline, rgba(23, 23, 23, .06));--uc-color-text: var(--u-color-text-muted, #71717a);--uc-color-bg: var(--u-color-surface, #ffffff);--uc-font: var( --u-font-sans, "Geist Sans", "Geist", -apple-system, "Segoe UI", system-ui, sans-serif );--uc-font-mono: var( --u-font-mono, "Geist Mono", ui-monospace, "Cascadia Mono", "Consolas", monospace );--uc-color-warning: var(--u-color-warning, #8a5c00);--uc-color-alarm: var(--u-color-danger, #b13636);--uc-color-ok: var(--u-color-success, #217a4b);--uc-series-1: var(--u-chart-1, #2563eb);--uc-series-2: var(--u-chart-2, #db2777);--uc-series-3: var(--u-chart-3, #059669);--uc-series-4: var(--u-chart-4, #d97706);--uc-series-5: var(--u-chart-5, #7c3aed);--uc-series-6: var(--u-chart-6, #0891b2);--uc-size-tick: 11.5px;--uc-size-title: 12px;--uc-size-legend: 12.5px;--uc-size-tooltip: 12px;--uc-leading-label: 1.25;--uc-leading-text: 1.35;--uc-radius: 6px;--uc-radius-chip: 2px;--uc-shadow: 0 1px 2px rgba(0, 0, 0, .06), 0 4px 12px rgba(0, 0, 0, .08);--uc-focus-ring: var(--u-focus-ring, 0 0 0 2px #0e7d72);--uc-color-hover: var(--u-color-surface-sunken, #f4f4f5);--uc-color-pressed: var(--u-color-surface-pressed, #e9e9eb);--uc-transition-state: var(--u-transition, .12s cubic-bezier(.22, 1, .36, 1));--uc-transition: 80ms var(--u-ease-out, cubic-bezier(.22, 1, .36, 1));position:relative;display:flex;flex-direction:column;font-family:var(--uc-font);color:var(--uc-color-text);font-variant-numeric:tabular-nums;font-feature-settings:"tnum" 1}.uc-plot{position:relative;flex:1 1 auto;min-height:0;min-width:0}.uc-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}.uc-plot:focus{outline:none}.uc-plot:focus-visible{outline:2px solid transparent;box-shadow:var(--uc-focus-ring)}.uc-plot>canvas{box-sizing:border-box}.uc-plot>canvas{position:absolute;top:0;right:0;bottom:0;left:0;display:block;pointer-events:none}.uc-axes{position:absolute;top:0;right:0;bottom:0;left:0;pointer-events:none}.uc-axis{position:absolute}.uc-axis-line{position:absolute;background:var(--uc-color-axis)}.uc-axis-y>.uc-axis-line{top:0;width:1px;height:100%}.uc-axis-left>.uc-axis-line{right:0}.uc-axis-right>.uc-axis-line{left:0}.uc-axis-x>.uc-axis-line{left:0;width:100%;height:1px}.uc-axis-bottom>.uc-axis-line{top:0}.uc-axis-top>.uc-axis-line{bottom:0}.uc-tick{position:absolute}.uc-axis-y>.uc-tick{left:0;right:0;height:1px}.uc-axis-x>.uc-tick{top:0;bottom:0;width:1px}.uc-tick-mark{position:absolute;background:var(--uc-color-axis)}.uc-axis-y>.uc-tick>.uc-tick-mark{top:0;width:5px;height:1px}.uc-axis-left>.uc-tick>.uc-tick-mark{right:0}.uc-axis-right>.uc-tick>.uc-tick-mark{left:0}.uc-axis-x>.uc-tick>.uc-tick-mark{left:0;width:1px;height:5px}.uc-axis-bottom>.uc-tick>.uc-tick-mark{top:0}.uc-axis-top>.uc-tick>.uc-tick-mark{bottom:0}.uc-tick-label{position:absolute;white-space:pre;font-size:var(--uc-size-tick);line-height:var(--uc-leading-label);letter-spacing:.005em;color:var(--uc-color-text)}.uc-axis-y>.uc-tick>.uc-tick-label{top:50%;transform:translateY(-50%)}.uc-axis-left>.uc-tick>.uc-tick-label{text-align:right}.uc-axis-x>.uc-tick>.uc-tick-label{text-align:center}.uc-axis-right>.uc-tick>.uc-tick-label{text-align:left}.uc-axis-title{position:absolute;white-space:pre;font-size:var(--uc-size-title);line-height:var(--uc-leading-label);letter-spacing:.01em;color:var(--uc-color-text)}.uc-axis-x>.uc-axis-title{left:0;right:0;text-align:center}.uc-axis-bottom>.uc-axis-title{bottom:0}.uc-axis-top>.uc-axis-title{top:0}.uc-axis-y>.uc-axis-title{top:50%;writing-mode:vertical-rl}.uc-axis-left>.uc-axis-title{left:0;transform:translateY(-50%) rotate(180deg)}.uc-axis-right>.uc-axis-title{right:0;transform:translateY(-50%)}.uc-empty{position:absolute;display:flex;align-items:center;justify-content:center;text-align:center;font-size:var(--uc-size-legend);color:var(--uc-color-text)}.uc-legend{display:flex;flex-wrap:wrap;gap:4px 14px;font-size:var(--uc-size-legend);line-height:var(--uc-leading-text);color:var(--uc-color-text)}.uc-legend-top{order:-1;padding-bottom:8px}.uc-legend-bottom{order:1;padding-top:8px}.uc-legend-item{display:inline-flex;align-items:center;gap:6px;cursor:default}.uc-legend-chip{display:inline-block;width:10px;height:10px;border-radius:var(--uc-radius-chip);corner-shape:squircle}.uc-legend-mark{display:block;flex:none;forced-color-adjust:none}button.uc-legend-item{box-sizing:border-box}button.uc-legend-item{padding:0;border:0;border-radius:var(--uc-radius-chip);corner-shape:squircle;background:none;font:inherit;color:inherit;cursor:pointer;transition:background-color var(--uc-transition-state),box-shadow var(--uc-transition-state)}button.uc-legend-item:hover{box-sizing:border-box}button.uc-legend-item:hover{background:var(--uc-color-hover)}button.uc-legend-item:hover:not(:focus-visible){box-sizing:border-box}button.uc-legend-item:hover:not(:focus-visible){box-shadow:0 0 0 3px var(--uc-color-hover)}button.uc-legend-item:active{box-sizing:border-box}button.uc-legend-item:active{background:var(--uc-color-pressed)}button.uc-legend-item:active:not(:focus-visible){box-sizing:border-box}button.uc-legend-item:active:not(:focus-visible){box-shadow:0 0 0 3px var(--uc-color-pressed)}button.uc-legend-item:focus-visible{box-sizing:border-box}button.uc-legend-item:focus-visible{outline:2px solid transparent;box-shadow:var(--uc-focus-ring)}.uc-legend-item[data-hidden]{text-decoration:line-through}.uc-legend-item[data-hidden]>.uc-legend-chip{opacity:.3}.uc-show-all{position:absolute;top:0;left:0;z-index:1;translate:calc(-100% - 6px) 6px;padding:2px 8px;border:1px solid var(--uc-color-axis);border-radius:var(--uc-radius);corner-shape:squircle;background:var(--uc-color-bg);font:inherit;font-size:var(--uc-size-tick);line-height:var(--uc-leading-text);color:var(--uc-color-text);white-space:nowrap;cursor:pointer;transition:background-color var(--uc-transition-state),box-shadow var(--uc-transition-state)}.uc-show-all-bottom{translate:calc(-100% - 6px) calc(-100% - 6px)}.uc-show-all:hover{background:var(--uc-color-hover)}.uc-show-all:active{background:var(--uc-color-pressed)}.uc-show-all:focus-visible{outline:2px solid transparent;box-shadow:var(--uc-focus-ring)}.uc-data-key{margin-left:auto}.uc-data-panel{position:absolute;top:0;right:0;bottom:0;left:0;z-index:3;overflow:auto;background:var(--uc-color-bg);font-size:var(--uc-size-tooltip);line-height:var(--uc-leading-text);color:var(--uc-color-text)}.uc-data-panel:focus{outline:none}.uc-data-panel:focus-visible{outline:2px solid transparent;box-shadow:var(--uc-focus-ring)}.uc-root:has(>.uc-data-panel)>.uc-plot,.uc-root:has(>.uc-data-panel)>.uc-show-all{visibility:hidden}.uc-data-table{width:100%;border-collapse:collapse}.uc-data-table+.uc-data-table{margin-top:12px}.uc-data-table>caption{box-sizing:border-box}.uc-data-table>caption{padding-bottom:6px;text-align:left}.uc-data-table th,.uc-data-table td{box-sizing:border-box}.uc-data-table th,.uc-data-table td{padding:3px 8px;border-bottom:1px solid var(--uc-color-grid);white-space:nowrap;font-weight:400;text-align:right}.uc-data-table>thead th{box-sizing:border-box}.uc-data-table>thead th{position:sticky;top:0;background:var(--uc-color-bg);border-bottom-color:var(--uc-color-axis)}.uc-data-table th:first-child{box-sizing:border-box}.uc-data-table th:first-child{text-align:left}.uc-data-table>tbody th{box-sizing:border-box}.uc-data-table>tbody td{box-sizing:border-box}.uc-data-table>tbody th,.uc-data-table>tbody td{font-family:var(--uc-font-mono)}.uc-tooltip{position:absolute;top:0;left:0;z-index:2;pointer-events:none;opacity:0;transition:opacity var(--uc-transition);min-width:96px;padding:7px 9px;border:1px solid var(--uc-color-axis);border-radius:var(--uc-radius);corner-shape:squircle;background:var(--uc-color-bg);box-shadow:var(--uc-shadow);font-size:var(--uc-size-tooltip);line-height:var(--uc-leading-text);color:var(--uc-color-text)}.uc-tooltip-head{font-family:var(--uc-font-mono);font-size:var(--uc-size-tick);letter-spacing:.01em;padding-bottom:5px;margin-bottom:5px;border-bottom:1px solid var(--uc-color-grid)}.uc-tooltip-list{display:grid;grid-template-columns:auto 1fr auto;gap:3px 8px;align-items:center}.uc-tooltip-row{display:contents}.uc-tooltip-chip{width:8px;height:8px;border-radius:var(--uc-radius-chip);corner-shape:squircle}.uc-tooltip-name{white-space:nowrap}.uc-tooltip-total{grid-column:1 / 3}.uc-tooltip-part{grid-column:2}.uc-tooltip-x{margin-left:6px;font-family:var(--uc-font-mono)}.uc-tooltip-value{font-family:var(--uc-font-mono);text-align:right;white-space:nowrap}@media(prefers-reduced-motion:reduce){.uc-tooltip,button.uc-legend-item,.uc-show-all{transition:none}}.uc-measure{position:absolute;top:0;left:0;right:auto;bottom:auto;transform:none;visibility:hidden;pointer-events:none;white-space:pre;writing-mode:horizontal-tb}.uc-limit-label{position:absolute;font-size:var(--uc-size-tick);line-height:var(--uc-leading-label);white-space:nowrap;font-variant-numeric:tabular-nums;background:var(--uc-color-bg);padding:0 2px}.uc-limit-label[data-severity=warning]{color:var(--uc-color-warning)}.uc-limit-label[data-severity=alarm]{color:var(--uc-color-alarm)}.uc-limit-label[data-role=control],.uc-limit-label[data-role=zone],.uc-limit-label[data-own]{color:var(--uc-color-text)}.uc-limit-mark{display:inline-block;width:10px;margin-right:4px;vertical-align:middle;border-top:2px dashed currentColor}.uc-limit-label[data-role=control]>.uc-limit-mark{border-top-style:solid}.uc-limit-label[data-role=zone]>.uc-limit-mark{border-top-style:dotted}.uc-axis-y .uc-limit-label{transform:translateY(-50%)}.uc-axis-left .uc-limit-label{right:9px}.uc-axis-right .uc-limit-label{left:9px}.uc-break{position:absolute;top:0;width:7px;height:9px;margin-left:-3.5px;color:var(--uc-color-text)}.uc-break:before,.uc-break:after{content:"";position:absolute;top:0;width:1px;height:9px;background:currentColor;opacity:.55;transform:skew(-20deg)}.uc-break:before{left:1px}.uc-break:after{left:4px}}