@ultimat3/ui 29.3.2 → 30.0.0

package/src/components/HeatStrip.module.scss

@@ -0,0 +1,133 @@
+@use '../tokens' as t;
+
+.strip {
+  display: grid;
+  gap: t.space(2);
+  margin: 0;
+  min-inline-size: 0;
+}
+
+.caption {
+  @include t.label-caps;
+  color: t.role('fg-muted');
+}
+
+.hidden {
+  @include t.visually-hidden;
+}
+
+// Name above the cells on a phone, beside them once there is room: the cells never scroll the page.
+.row {
+  display: grid;
+  gap: t.space(1);
+  min-inline-size: 0;
+
+  @include t.respond-to(md) {
+    grid-template-columns: t.rem(128px) minmax(0, 1fr);
+    align-items: center;
+    gap: t.space(3);
+  }
+}
+
+.name {
+  @include t.truncate;
+  color: t.role('fg');
+  font-size: t.text(sm);
+}
+
+// The cells share the row's width: many buckets get thinner, never wider than the screen.
+.cells {
+  display: flex;
+  gap: t.stroke(thick);
+  margin: 0;
+  padding: 0;
+  list-style: none;
+  min-inline-size: 0;
+}
+
+.slot {
+  flex: 1 1 0;
+  min-inline-size: 0;
+  max-inline-size: t.space(6);
+}
+
+.cell {
+  position: relative;
+  display: block;
+  aspect-ratio: 1;
+  inline-size: 100%;
+
+  // The mark is a pseudo-element, so its clip-path shape never clips the link's touch area.
+  &::before {
+    content: '';
+    position: absolute;
+    inset: 0;
+    background: var(--heat, #{t.role('line', 0.5)});
+    clip-path: var(--shape, none);
+  }
+}
+
+.linked {
+  @include t.focus-ring;
+  @include t.touch-target(true);
+}
+
+// A tone is a colour AND a shape: the shape alone tells the cells apart in greyscale.
+.cell[data-tone='neutral'] {
+  --heat: #{t.role('fg-strong')};
+}
+
+@each $tone in (success, info, accent, warning, danger) {
+  .cell[data-tone='#{$tone}'] {
+    --heat: #{t.role($tone)};
+  }
+}
+
+.cell[data-shape='circle'] {
+  --shape: circle(50%);
+}
+
+.cell[data-shape='ring'] {
+  --shape: polygon(
+    evenodd,
+    0 0,
+    100% 0,
+    100% 100%,
+    0 100%,
+    0 0,
+    25% 25%,
+    25% 75%,
+    75% 75%,
+    75% 25%,
+    25% 25%
+  );
+}
+
+.cell[data-shape='triangle'] {
+  --shape: polygon(50% 0, 100% 100%, 0 100%);
+}
+
+.cell[data-shape='diamond'] {
+  --shape: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
+}
+
+.cell[data-shape='cross'] {
+  --shape: polygon(
+    20% 0,
+    50% 30%,
+    80% 0,
+    100% 20%,
+    70% 50%,
+    100% 80%,
+    80% 100%,
+    50% 70%,
+    20% 100%,
+    0 80%,
+    30% 50%,
+    0 20%
+  );
+}
+
+.cell[data-shape='dash'] {
+  --shape: inset(40% 0);
+}

package/src/components/HeatStrip.tsx

@@ -0,0 +1,64 @@
+// Rows of status cells — a check per five minutes, a service per row — as HTML, not a chart: each
+// cell is one element named by its whole reading, shaped by its tone, and a link when it has a
+// page. Arrow keys never: a linked cell is a tab stop like any link, an unlinked one is none.
+
+import type { JSX } from 'solid-js';
+import { cx } from '../cx';
+import styles from './HeatStrip.module.scss';
+import type { HeatCellView, HeatRow } from './heat-strip-view';
+import { heatCells } from './heat-strip-view';
+
+export interface HeatStripProps {
+  /** The strip's name, already translated: its caption. */
+  label: string;
+  /** One row per thing watched; cells oldest first. */
+  rows: readonly HeatRow[];
+  /** Show the caption. Default off — it names the figure for assistive tech either way. */
+  showCaption?: boolean | undefined;
+  class?: string | undefined;
+}
+
+export function HeatStrip(props: HeatStripProps): JSX.Element {
+  return (
+    <figure class={cx(styles['strip'], props.class)}>
+      <figcaption class={props.showCaption === true ? styles['caption'] : styles['hidden']}>
+        {props.label}
+      </figcaption>
+      {props.rows.map((row) => (
+        <div class={styles['row']}>
+          <span class={styles['name']}>{row.label}</span>
+          <ol class={styles['cells']} aria-label={row.label}>
+            {heatCells(row).map((cell) => (
+              <li class={styles['slot']}>{cellNode(cell)}</li>
+            ))}
+          </ol>
+        </div>
+      ))}
+    </figure>
+  );
+}
+
+function cellNode(cell: HeatCellView): JSX.Element {
+  return cell.href === undefined ? (
+    // One value as a picture: `img` names it and claims nothing more, and is no tab stop.
+    <span
+      class={styles['cell']}
+      role="img"
+      aria-label={cell.name}
+      title={cell.name}
+      data-tone={cell.tone}
+      data-shape={cell.shape}
+    />
+  ) : (
+    <a
+      class={cx(styles['cell'], styles['linked'])}
+      href={cell.href}
+      title={cell.name}
+      data-tone={cell.tone}
+      data-shape={cell.shape}
+    >
+      {/* The link's name is its content — the whole reading — read and never seen. */}
+      <span class={styles['hidden']}>{cell.name}</span>
+    </a>
+  );
+}

package/src/components/JsonView.module.scss

@@ -0,0 +1,64 @@
+@use '../tokens' as t;
+
+.json {
+  padding: t.space(3);
+  border-radius: t.radius(md);
+  background: t.role('bg-soft');
+  font-family: var(--font-mono);
+  font-size: t.text(sm);
+  color: t.role('fg');
+  text-align: start;
+  overflow-wrap: anywhere;
+}
+
+.summary {
+  @include t.focus-ring;
+  cursor: pointer;
+  min-block-size: t.touch(target);
+}
+
+.entries {
+  margin: 0;
+  padding-inline-start: t.space(4);
+  list-style: none;
+}
+
+.key {
+  margin-inline-end: t.space(2);
+  color: t.role('info');
+
+  &::after {
+    content: ':';
+    color: t.role('fg-muted');
+  }
+}
+
+.count,
+.more {
+  color: t.role('fg-muted');
+}
+
+.value-string {
+  color: t.role('success');
+  white-space: pre-wrap;
+}
+
+.value-number {
+  color: t.role('warning');
+}
+
+.value-boolean,
+.value-null {
+  color: t.role('accent-strong');
+}
+
+.value-other,
+.value-deep,
+.value-circular {
+  color: t.role('fg-muted');
+}
+
+.branch,
+.leaf {
+  display: block;
+}

package/src/components/JsonView.tsx

@@ -0,0 +1,68 @@
+// Any value as nested native `<details>`: keyboard and no-script for free, keys in the order given,
+// long strings wrapped. A webhook body, an event, a tool call — whatever arrived prints as text.
+
+import type { JSX } from 'solid-js';
+import { cx } from '../cx';
+import styles from './JsonView.module.scss';
+import { type JsonViewNode, jsonViewTree } from './json-view-view';
+
+export interface JsonViewProps {
+  value: unknown;
+  /** Already-translated name of the whole value. */
+  label: string;
+  /** Levels open on first paint; deeper containers start closed. Defaults to 1. */
+  open?: number | undefined;
+  class?: string | undefined;
+}
+
+function key(name: string | null): JSX.Element {
+  return name === null ? null : <span class={styles['key']}>{name}</span>;
+}
+
+function leafText(tree: JsonViewNode): string {
+  if (tree.kind === 'deep') return '…';
+  if (tree.kind === 'circular') return '↺';
+  if (tree.kind === 'string') return JSON.stringify(tree.value);
+  return 'value' in tree ? tree.value : '';
+}
+
+function node(
+  tree: JsonViewNode,
+  depth: number,
+  name: string | null,
+  openDepth: number,
+): JSX.Element {
+  if (tree.kind === 'object' || tree.kind === 'array') {
+    const [left, right] = tree.kind === 'array' ? ['[', ']'] : ['{', '}'];
+    return (
+      <details class={styles['branch']} open={depth < openDepth}>
+        <summary class={styles['summary']}>
+          {key(name)}
+          <span class={styles['count']}>{`${left}${tree.size}${right}`}</span>
+        </summary>
+        <ul class={styles['entries']}>
+          {tree.entries.map(([child, value]) => (
+            <li>{node(value, depth + 1, child, openDepth)}</li>
+          ))}
+          {tree.more > 0 ? <li class={styles['more']}>{`… +${tree.more}`}</li> : null}
+        </ul>
+      </details>
+    );
+  }
+  const text = leafText(tree);
+  return (
+    <span class={styles['leaf']}>
+      {key(name)}
+      <span class={styles[`value-${tree.kind}`]}>{text}</span>
+    </span>
+  );
+}
+
+export function JsonView(props: JsonViewProps): JSX.Element {
+  return (
+    // biome-ignore lint/a11y/useSemanticElements: a value read, not a form's fieldset
+    <div class={cx(styles['json'], props.class)} role="group" aria-label={props.label} dir="ltr">
+      {node(jsonViewTree(props.value), 0, null, props.open ?? 1)}
+    </div>
+  );
+}

package/src/components/LineChart.tsx

@@ -5,31 +5,43 @@
 
 import type { JSX } from 'solid-js';
 import { cx } from '../cx';
+import { UI_KEYS } from '../i18n-keys';
 import { useUi } from '../theme/context';
 import type { ChartHit } from './ChartFrame';
-import { ChartFrame, chartHits, seriesSwatch } from './ChartFrame';
+import { ChartFrame, ChartHits, ReferenceLabels, ReferenceRules, seriesSwatch } from './ChartFrame';
+import { checkAt, checkSeries } from './chart-checks';
 import type { ChartSeries } from './chart-frame-view';
 import {
   chartNumberFormat,
   chartTable,
   cssPercent,
   hitEdge,
+  hitIds,
   markerPath,
   pointLabel,
   seriesStyle,
 } from './chart-frame-view';
+import type { ChartReference } from './chart-reference-view';
+import { referenceLines, referenceValues } from './chart-reference-view';
 import { categoryLabels, minorTicks, tickDecimals } from './chart-ticks-view';
 import styles from './LineChart.module.scss';
 import type { LineLayout } from './line-chart-view';
-import { LINE_CHART, lineLayout, markedPoints } from './line-chart-view';
+import { LINE_CHART, lineLayout, lineY, markedPoints } from './line-chart-view';
 
 export interface LineChartProps {
   /** The chart's name, already translated: the figure's caption and the svg's accessible name. */
   label: string;
   /** The x axis, oldest first, already formatted for display — "17 Sep", "14:00". */
   keys: readonly string[];
-  /** One entry per line. `values[i]` belongs to `keys[i]`; `null` is a gap, never a zero. */
+  /** One entry per line, exactly one value per key; `null` is a gap, never a zero. */
   series: readonly ChartSeries[];
+  /**
+   * True x positions, one per key, strictly ascending — `row.at.getTime()` for a time axis.
+   * Absent, keys are evenly spaced, which is honest only for regular samples.
+   */
+  at?: readonly number[] | undefined;
+  /** Dashed rules at a value — a target, an SLO. Each widens the axis so it stays on the plot. */
+  references?: readonly ChartReference[] | undefined;
   /** The key column's head in the data table, already translated — "Day". */
   keyLabel?: string | undefined;
   /** Formats every value and tick. Default: `Intl.NumberFormat` in the page's locale. */
@@ -44,44 +56,56 @@ export interface LineChartProps {
   class?: string | undefined;
 }
 
-/** The same props: an area chart is a line chart that fills. */
-export type AreaChartProps = LineChartProps;
+/** An area chart is a line chart that fills — and may stack, each series on the ones before. */
+export interface AreaChartProps extends LineChartProps {
+  /** Each series' band sits on the series before it; the axis reads the total. Default off. */
+  stacked?: boolean | undefined;
+}
 
 /** Up to six value labels: at 390px a seventh crowds the ones beside it. */
 const MAX_TICKS = 6;
 const MARKER_RADIUS = 4;
 
 export function LineChart(props: LineChartProps): JSX.Element {
-  return xyChart(props, false);
+  return xyChart(props, false, () => false);
 }
 
 export function AreaChart(props: AreaChartProps): JSX.Element {
-  return xyChart(props, true);
+  return xyChart(props, true, () => props.stacked === true);
 }
 
-function xyChart(props: LineChartProps, filled: boolean): JSX.Element {
+function xyChart(props: LineChartProps, filled: boolean, stacked: () => boolean): JSX.Element {
   const ui = useUi();
-  const layout = (): LineLayout =>
-    lineLayout({
+  const layout = (): LineLayout => {
+    checkSeries('LineChart', props.keys, props.series);
+    if (props.at !== undefined) checkAt('LineChart', props.keys, props.at);
+    return lineLayout({
       keys: props.keys,
       series: props.series,
       zero: props.zero !== false,
       maxTicks: MAX_TICKS,
+      at: props.at,
+      also: referenceValues(props.references),
+      stacked: stacked(),
     });
+  };
   const format = (value: number): string => (props.format ?? chartNumberFormat(ui.locale))(value);
   const tickFormat = (value: number): string =>
     (props.format ?? chartNumberFormat(ui.locale, tickDecimals(layout().scale.step)))(value);
   const { width, height } = LINE_CHART;
 
   const hits = (): readonly ChartHit[] =>
-    props.series.flatMap((series, s) =>
-      (layout().series[s]?.points ?? []).map((point) => ({
+    props.series.flatMap((series, s) => {
+      const ids = hitIds(s, props.keys);
+      return (layout().series[s]?.points ?? []).map((point) => ({
+        id: ids[point.index] ?? `${s}:${point.index}`,
         x: cssPercent(point.x, width),
         y: cssPercent(point.y, height),
         label: pointLabel(props.keys[point.index] ?? '', series.label, format(point.value)),
         edge: hitEdge(point.x, width),
-      })),
-    );
+      }));
+    });
+  const lines = () => referenceLines(props.references, (value) => lineY(layout().scale, value));
 
   return (
     <ChartFrame
@@ -93,7 +117,7 @@ function xyChart(props: LineChartProps, filled: boolean): JSX.Element {
           ? undefined
           : props.series.map((series, s) => ({
               label: series.label,
-              swatch: seriesSwatch(seriesStyle(s)),
+              swatch: seriesSwatch(seriesStyle(s), series.tone),
             }))
       }
       table={chartTable({
@@ -102,6 +126,7 @@ function xyChart(props: LineChartProps, filled: boolean): JSX.Element {
         keys: props.keys,
         series: props.series,
         format,
+        none: ui.t(UI_KEYS.chartNone),
       })}
     >
       <div class={styles['chart']}>
@@ -127,12 +152,12 @@ function xyChart(props: LineChartProps, filled: boolean): JSX.Element {
             {layout().ticks.map((tick) => (
               <line class={styles['grid']} x1={0} x2={width} y1={tick.y} y2={tick.y} />
             ))}
-            {props.series.map((_, s) => {
+            {props.series.map((series, s) => {
               const style = seriesStyle(s);
               const geometry = layout().series[s];
               if (geometry === undefined) return null;
               return (
-                <g data-series={style.slot} data-line={String(s)}>
+                <g data-series={style.slot} data-tone={series.tone} data-line={String(s)}>
                   {filled && geometry.area !== '' ? (
                     <path class={styles['area']} d={geometry.area} data-area="true" />
                   ) : null}
@@ -147,8 +172,10 @@ function xyChart(props: LineChartProps, filled: boolean): JSX.Element {
                 </g>
               );
             })}
+            <ReferenceRules lines={lines()} width={width} />
           </svg>
-          {props.focusable === true ? chartHits(hits()) : null}
+          <ReferenceLabels lines={lines()} height={height} format={format} />
+          {props.focusable === true ? <ChartHits hits={hits()} /> : null}
         </div>
         <div class={styles['keys']} aria-hidden="true">
           {categoryLabels(props.keys.length).map((label) => (

package/src/components/LiveIndicator.module.scss

@@ -0,0 +1,44 @@
+@use '../tokens' as t;
+
+.indicator {
+  display: inline-flex;
+  align-items: center;
+  gap: t.space(2);
+  color: t.role('fg');
+  font-size: t.text(sm);
+}
+
+// Static on purpose: no animation, so there is nothing to withdraw under reduced motion.
+.dot {
+  flex: none;
+  inline-size: t.space(3);
+  block-size: t.space(3);
+  border-radius: t.radius(full);
+  background: currentcolor;
+}
+
+.word {
+  white-space: nowrap;
+}
+
+// Each state a shape as well as a colour: filled, a ring, two bars, a square.
+[data-live='live'] .dot {
+  color: t.role('success');
+}
+
+[data-live='reconnecting'] .dot {
+  border: t.stroke(thick) solid t.role('warning');
+  background: none;
+}
+
+[data-live='paused'] .dot {
+  border-radius: 0;
+  border-inline: t.stroke(thick) solid t.role('fg-muted');
+  background: none;
+  inline-size: t.space(2);
+}
+
+[data-live='offline'] .dot {
+  border-radius: t.radius(sm);
+  background: t.role('danger');
+}

package/src/components/LiveIndicator.tsx

@@ -0,0 +1,45 @@
+// Whether a live view is live: a static dot whose SHAPE is the state, with the word beside it —
+// live, reconnecting, paused, offline. Never blinks: a pulse is motion a reader cannot stop and
+// says nothing the word does not. A change of state is announced once; a tick never is.
+
+import type { JSX } from 'solid-js';
+import { announce } from '../a11y';
+import { cx } from '../cx';
+import { UI_KEYS } from '../i18n-keys';
+import { useUi } from '../theme/context';
+import { solid } from '../theme/solid-adapter';
+import styles from './LiveIndicator.module.scss';
+
+export const LIVE_INDICATOR_STATES = ['live', 'reconnecting', 'paused', 'offline'] as const;
+export type LiveIndicatorState = (typeof LIVE_INDICATOR_STATES)[number];
+
+const WORDS = {
+  live: UI_KEYS.liveLive,
+  reconnecting: UI_KEYS.liveReconnecting,
+  paused: UI_KEYS.livePaused,
+  offline: UI_KEYS.liveOffline,
+} as const;
+
+export interface LiveIndicatorProps {
+  state: LiveIndicatorState;
+  class?: string | undefined;
+}
+
+export function LiveIndicator(props: LiveIndicatorProps): JSX.Element {
+  const ui = useUi();
+  const rt = solid();
+  const word = (): string => ui.t(WORDS[props.state]);
+  // The first state is what the page rendered with — on screen already, not news.
+  let previous: LiveIndicatorState | undefined;
+  rt.createEffect(() => {
+    const state = props.state;
+    if (previous !== undefined && previous !== state) announce(ui.t(WORDS[state]));
+    previous = state;
+  });
+  return (
+    <span class={cx(styles['indicator'], props.class)} data-live={props.state}>
+      <span class={styles['dot']} aria-hidden="true" />
+      <span class={styles['word']}>{word()}</span>
+    </span>
+  );
+}

package/src/components/LogViewer.module.scss

@@ -0,0 +1,102 @@
+@use 'sass:map';
+@use '../tokens' as t;
+
+$sm: map.get(t.$breakpoints, 'sm');
+
+.log {
+  @include t.column(t.space(2));
+  @include t.container(log);
+}
+
+.bar {
+  @include t.row(t.space(2), center);
+  flex-wrap: wrap;
+}
+
+// Filtering and follow need script; without it every line is in the document.
+.log:not([data-enhanced='true']) .bar {
+  display: none;
+}
+
+.filter,
+.levels,
+.follow {
+  @include t.focus-ring;
+  min-block-size: t.touch(target);
+  border: t.stroke(hairline) solid t.role('line');
+  border-radius: t.radius(md);
+  background: t.role('surface');
+  color: t.role('fg');
+  font-size: t.text(md);
+  padding-inline: t.space(2);
+}
+
+.filter {
+  flex: 1;
+  min-inline-size: 0;
+}
+
+.follow[aria-pressed='true'] {
+  border-color: t.role('accent');
+  color: t.role('accent');
+}
+
+.capped {
+  margin: 0;
+  color: t.role('fg-muted');
+  font-size: t.text(sm);
+}
+
+// The caller sizes the page; the log's own box is a bounded share of the viewport, and
+// VirtualList bounds itself inside it.
+.box {
+  block-size: min(70vh, t.rem(640px));
+  border: t.stroke(hairline) solid t.role('line');
+  border-radius: t.radius(md);
+  background: t.role('bg-soft');
+  font-family: var(--font-mono);
+  font-size: t.text(sm);
+}
+
+// Timestamp above the line on a phone; one row of columns from `sm` of the log's own width.
+.line {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 0 t.space(2);
+  padding-block: t.space(1);
+  padding-inline: t.space(2);
+  text-align: start;
+
+  &[data-level='warn'] .level {
+    color: t.role('warning');
+  }
+
+  &[data-level='error'] .level {
+    color: t.role('danger');
+  }
+}
+
+.time {
+  grid-column: 1 / -1;
+  color: t.role('fg-muted');
+}
+
+.level {
+  color: t.role('fg-muted');
+  text-transform: uppercase;
+}
+
+.text {
+  white-space: pre-wrap;
+  overflow-wrap: anywhere;
+}
+
+@include t.container-query(log, $sm) {
+  .line {
+    grid-template-columns: auto auto 1fr;
+  }
+
+  .time {
+    grid-column: auto;
+  }
+}