@kitlangton/knobs 0.0.0-stage → 0.1.0

package/dist/themes.js

@@ -0,0 +1,235 @@
+// src/core/spring.ts
+class Spring {
+  x;
+  omega;
+  zeta;
+  eps;
+  v = 0;
+  target;
+  next;
+  constructor(x, omega = 24, zeta = 0.86, eps = 0.005) {
+    this.x = x;
+    this.omega = omega;
+    this.zeta = zeta;
+    this.eps = eps;
+    this.target = x;
+  }
+  set(target, delay = 0) {
+    if (delay > 0) {
+      if (target !== (this.next?.target ?? this.target))
+        this.next = { target, at: performance.now() + delay };
+      return this;
+    }
+    this.next = undefined;
+    this.target = target;
+    return this;
+  }
+  snap(x) {
+    this.next = undefined;
+    this.x = this.target = x;
+    this.v = 0;
+    return this;
+  }
+  step(dt) {
+    if (this.next && performance.now() >= this.next.at) {
+      this.target = this.next.target;
+      this.next = undefined;
+    }
+    if (this.x === this.target && this.v === 0)
+      return this.x;
+    const clampedDt = Math.min(dt, 0.1);
+    const h = 1 / 480;
+    for (let t = 0;t < clampedDt; t += h) {
+      const k = Math.min(h, clampedDt - t);
+      const a = -this.omega * this.omega * (this.x - this.target) - 2 * this.zeta * this.omega * this.v;
+      this.v += a * k;
+      this.x += this.v * k;
+    }
+    if (this.resting) {
+      this.x = this.target;
+      this.v = 0;
+    }
+    return this.x;
+  }
+  get resting() {
+    return !this.next && Math.abs(this.x - this.target) < this.eps && Math.abs(this.v) < this.eps * 4;
+  }
+}
+function springMotion({ duration, bounce }) {
+  return {
+    omega: 2 * Math.PI / Math.max(0.01, duration),
+    zeta: bounce >= 0 ? 1 - bounce : 1 / (1 + bounce)
+  };
+}
+function springEasing(omega, zeta) {
+  const s = new Spring(0, omega, zeta).set(1);
+  const points = ["0"];
+  const dt = 1 / 60;
+  let t = 0;
+  while (t < 4 && !(Math.abs(s.x - 1) < 0.002 && Math.abs(s.v) < 0.05)) {
+    s.step(dt);
+    t += dt;
+    points.push(String(Math.round(s.x * 1000) / 1000));
+  }
+  points[points.length - 1] = "1";
+  return { easing: `linear(${points.join(",")})`, ms: Math.round(t * 1000) };
+}
+function springCss(value) {
+  const { omega, zeta } = springMotion(value);
+  const { easing, ms } = springEasing(omega, zeta);
+  return { easing, duration: ms };
+}
+
+// src/core/theme.ts
+var block = (tokens) => Object.entries(tokens).map(([k, v]) => `${k.startsWith("--") || k === "color-scheme" ? k : `--k-${k}`}:${v}`).join(";");
+function presetCss(preset) {
+  if (!/^[\w-]+$/.test(preset.name))
+    throw new Error(`Invalid preset name: ${preset.name}`);
+  const at = `.knobs-panel[data-preset="${preset.name}"]`;
+  const light = preset.light ? `:where(.knobs-panel)[data-preset="${preset.name}"][data-theme="light"],` + `:where([data-knobs-theme="light"]) ${at}:not([data-theme="dark"]),` + `:where(:root[data-theme="light"]) ${at}[data-theme="auto"]{${block(preset.light)}}` + `@media(prefers-color-scheme:light){:where(:root:not([data-theme="dark"])) ${at}[data-theme="auto"]{${block(preset.light)}}}` : "";
+  return `${at}{${block(preset.dark)}}${light}${(preset.css ?? "").replaceAll("&", at)}`;
+}
+var glide = /* @__PURE__ */ springCss({ duration: 0.185, bounce: 0.14 });
+var labPreset = {
+  name: "lab",
+  dark: {
+    bg: "#191a1e",
+    page: "#141518",
+    surface: "rgba(216,219,224,.045)",
+    "surface-hi": "rgba(216,219,224,.08)",
+    line: "#23252a",
+    "line-hi": "#2c2f35",
+    text: "#d8dbe0",
+    label: "#8b9098",
+    dim: "#5b6068",
+    accent: "#4d8dff",
+    modified: "#4d8dff",
+    "seg-bg": "#0e0f11",
+    "seg-active": "#2c3747",
+    "toggle-track": "#2c2f35",
+    "toggle-thumb": "#fff",
+    thumb: "#c4c8ce",
+    rim: "transparent",
+    font: '-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif',
+    mono: 'ui-monospace,"SF Mono",SFMono-Regular,Menlo,monospace',
+    "font-size": "11.5px",
+    "font-weight": 400,
+    "label-weight": 400,
+    "title-weight": 600,
+    row: "26px",
+    pad: "0px",
+    inset: "8px",
+    gap: "3px",
+    radius: "0px",
+    "panel-radius": "0px",
+    frame: "flat",
+    chrome: 0,
+    glass: 0,
+    glow: 0,
+    lift: 0,
+    blur: 0.6,
+    "hover-in": 0,
+    "hover-out": 120,
+    "fill-rest-mix": "22%",
+    "fill-hover-mix": "28%",
+    "fill-active-mix": "34%",
+    "handle-rest": 0,
+    "value-font": "var(--k-mono)",
+    "unit-gap": ".3em",
+    "readout-mark": 1,
+    "group-size": "10px",
+    "group-color": "#8b9098",
+    "group-tracking": ".06em",
+    "group-divider": "#23252a",
+    "group-divider-gap": "6px",
+    "disabled-opacity": 0.38,
+    "curve-guide": "dashed",
+    "curve-dot": 0
+  }
+};
+var problemsPreset = {
+  name: "problems",
+  dark: {
+    bg: "#161618",
+    surface: "rgba(255,255,255,.055)",
+    "surface-hi": "rgba(255,255,255,.11)",
+    line: "rgba(255,255,255,.075)",
+    "line-hi": "rgba(255,255,255,.12)",
+    text: "#f5f5f7",
+    label: "rgba(235,235,245,.62)",
+    dim: "rgba(235,235,245,.36)",
+    accent: "#0091ff",
+    modified: "#0091ff",
+    "seg-bg": "rgba(120,120,128,.16)",
+    "seg-active": "rgba(120,120,128,.24)",
+    "toggle-track": "rgba(120,120,128,.32)",
+    "toggle-thumb": "#fff",
+    rim: "transparent",
+    font: 'system-ui,-apple-system,BlinkMacSystemFont,"Helvetica Neue",sans-serif',
+    mono: '"Kit SF Mono",ui-monospace,Menlo,monospace',
+    "font-size": "13px",
+    "label-weight": 500,
+    row: "34px",
+    radius: "8px",
+    "panel-radius": "12px",
+    pad: "0px",
+    inset: "10px",
+    gap: "4px",
+    "row-gap": "4px",
+    glass: 0,
+    glow: 0,
+    blur: 0.6,
+    "hover-in": 0,
+    "hover-out": 100,
+    "handle-rest": 0.55,
+    handle: "var(--k-text)",
+    "handle-inset": "7.5px",
+    "fill-base": "transparent",
+    "fill-rest-mix": "24%",
+    "fill-hover-mix": "36%",
+    "fill-active-mix": "36%",
+    chrome: 0,
+    "group-transform": "none",
+    "value-font": "var(--k-mono)",
+    "unit-gap": "0px",
+    "unit-color": "currentColor",
+    "readout-mark": 1,
+    "group-size": "12px",
+    "group-color": "rgba(235,235,245,.62)",
+    "group-inset": "0px",
+    "group-tracking": "-.01em",
+    "group-divider": "rgba(255,255,255,.075)",
+    "group-divider-gap": "8px",
+    "curve-inset": "0px",
+    "curve-guide": "dashed",
+    "curve-dot": 0,
+    spring: "0.185 0.14",
+    "fill-ease": glide.easing,
+    "fill-ms": glide.duration
+  },
+  light: {
+    bg: "#fff",
+    surface: "rgba(0,0,0,.045)",
+    "surface-hi": "rgba(0,0,0,.09)",
+    line: "rgba(0,0,0,.07)",
+    "line-hi": "rgba(0,0,0,.11)",
+    text: "#000",
+    label: "rgba(60,60,67,.66)",
+    dim: "rgba(60,60,67,.38)",
+    accent: "#0088ff",
+    modified: "#0088ff",
+    "seg-bg": "rgba(120,120,128,.11)",
+    "seg-active": "#fff",
+    "toggle-track": "rgba(120,120,128,.2)",
+    "toggle-thumb": "#fff",
+    rim: "transparent",
+    "group-color": "rgba(60,60,67,.66)",
+    "group-divider": "rgba(0,0,0,.07)",
+    "color-scheme": "light"
+  }
+};
+export {
+  labPreset,
+  presetCss,
+  problemsPreset
+};

package/dist/types/core/adapter.d.ts

@@ -0,0 +1,21 @@
+import type { ControlDescriptor } from "./remote.js";
+import type { Choice, Schema, State } from "./schema.js";
+import type { Controls, DensityMode, MountPanelOptions, ThemeMode } from "./store.js";
+export type ChoiceKey<S extends Schema> = {
+    [K in keyof S]: S[K] extends Choice ? K : never;
+}[keyof S] & string;
+export type KnobsPanelProps<S extends Schema = Schema> = MountPanelOptions & {
+    controls: Controls<S>;
+    /**
+     * Remote controls only: the descriptors to show. A new array swaps rows in place
+     * (`remote.update`); the same array with new `values` just syncs them.
+     */
+    descriptors?: readonly ControlDescriptor[];
+    /** The values to show, from your own state. Keys in hand keep theirs until let go. */
+    values?: State;
+    /** While true, a different item is arriving: values land without springing or rolling. */
+    land?: boolean;
+};
+export declare function syncPanelLook<S extends Schema>(host: HTMLElement | null | undefined, controls: Controls<S>, theme?: ThemeMode, density?: DensityMode): void;
+export declare function syncPanelValues<S extends Schema>(controls: Controls<S>, descriptors?: readonly ControlDescriptor[], values?: State, land?: boolean): void;
+export declare function mountPanelAdapter<S extends Schema>(host: HTMLElement, controls: Controls<S>, getProps: () => KnobsPanelProps<S>): () => void;

package/dist/types/core/code.d.ts

@@ -0,0 +1,3 @@
+import type { State } from "./schema.js";
+export type CodeFormat = "ts" | "json" | "jsx";
+export declare function formatCode(values: State, format?: CodeFormat): string;

package/dist/types/core/color.d.ts

@@ -0,0 +1,27 @@
+/** An OKLCH colour: lightness 0…1, chroma 0…0.37, hue in degrees. */
+export interface Oklch {
+    readonly l: number;
+    readonly c: number;
+    readonly h: number;
+}
+export declare const CHROMA_MAX = 0.37;
+/** OKLCH → linear-light sRGB (unclamped). */
+export declare function oklchToLinear({ l, c, h }: Oklch): [number, number, number];
+/** The most chroma this lightness and hue can carry inside sRGB. */
+export declare function maxChroma(l: number, h: number): number;
+/**
+ * Gamut-mapped sRGB channels 0…1: a colour inside sRGB (any hex, as the string keeps it) converts
+ * as it is; one outside drops chroma until it fits, keeping lightness and hue.
+ */
+export declare function oklchToRgb(color: Oklch): [number, number, number];
+export declare function rgbToOklch(r: number, g: number, b: number): Oklch;
+/** Reads `oklch(L C H)` (L as 0…1 or a percentage), `#rgb` / `#rrggbb`, or `{ l, c, h }`. */
+export declare function parseColor(input: unknown): Oklch | undefined;
+/**
+ * Clamps into range and into sRGB (by chroma), rounded to what the string keeps: five places for
+ * lightness and chroma and three for hue, enough for every hex to come back exactly.
+ */
+export declare function fitColor({ l, c, h }: Oklch): Oklch;
+export declare function formatColor({ l, c, h }: Oklch): string;
+/** A colour field's value as `#rrggbb` (sRGB). */
+export declare function colorHex(value: string | Oklch): string;

package/dist/types/core/easing.d.ts

@@ -0,0 +1,21 @@
+/** A CSS `cubic-bezier(x1, y1, x2, y2)`. */
+export type Bezier = readonly [number, number, number, number];
+/** Named curves offered as chips in the easing editor. */
+export declare const EASINGS: {
+    readonly ease: readonly [0.25, 0.1, 0.25, 1];
+    readonly in: readonly [0.42, 0, 1, 1];
+    readonly out: readonly [0, 0, 0.58, 1];
+    readonly "in-out": readonly [0.42, 0, 0.58, 1];
+    readonly linear: readonly [0, 0, 1, 1];
+    readonly smooth: readonly [0.65, 0, 0.35, 1];
+    readonly snappy: readonly [0.32, 0.72, 0, 1];
+    readonly back: readonly [0.34, 1.56, 0.64, 1];
+};
+export type EasingName = keyof typeof EASINGS | "ease-in" | "ease-out" | "ease-in-out";
+export declare const EASING_Y: readonly [number, number];
+export declare function namedEasing(name: string): Bezier | undefined;
+/** The chip name whose curve this is, if any. */
+export declare function easingName(value: Bezier): string | undefined;
+/** The curve's point at parameter `t` (not time): (0,0) → (1,1). */
+export declare function bezierPoint([x1, y1, x2, y2]: Bezier, t: number): [number, number];
+export declare const bezierCss: (b: Bezier) => string;

package/dist/types/core/internal.d.ts

@@ -0,0 +1,18 @@
+import type { Schema, State } from "./schema.js";
+/**
+ * Swaps a store's schema in place (see `RemoteControls.update`). Shared through the global symbol
+ * registry, so the core and panel bundles agree on it.
+ */
+export declare const RESHAPE: unique symbol;
+export type Reshape = (schema: Schema, values: State, options?: {
+    land?: boolean;
+    mixed?: readonly string[];
+}) => void;
+/**
+ * What a remote store hears from `reset(keys)` in place of an `onReset({ key })` per key, so it
+ * can send the keys' resets together (see `RemoteControlsOptions.onSetBatch`).
+ */
+export declare const RESET_KEYS: unique symbol;
+export type ResetKeys = (keys: readonly string[]) => void;
+/** How many times `controls.refresh()` was called: panels ask their accessories again when it moves. */
+export declare const REFRESHES: unique symbol;

package/dist/types/core/keys.d.ts

@@ -0,0 +1,21 @@
+export declare const isApple: () => boolean;
+/** The canonical spelling of a combination, or `""` when it names no key. */
+export declare function normalizeCombo(combo: string): string;
+/**
+ * The letter a keydown means in the user's layout, or `""` when it isn't a letter key. The typed
+ * character when it's a plain letter (Dvorak's K is K); with ⌥, which changes the character on
+ * macOS, the layout's letter for that physical key (QWERTY's when the layout can't be read).
+ */
+export declare function letterOf(event: KeyboardEvent): string;
+/** The combination a keydown names, or `""` for a bare modifier. */
+export declare function comboFromEvent(event: KeyboardEvent): string;
+/** The modifiers held in an event, as a combination's prefix (for a live capture preview). */
+export declare function heldMods(event: KeyboardEvent): string[];
+/** Whether a keydown presses `combo` (normalized or not). */
+export declare function matchesCombo(combo: string, event: KeyboardEvent): boolean;
+/**
+ * How a combination reads: Apple glyphs on Apple platforms (`⌃⌥⇧⌘K`), words elsewhere
+ * (`Ctrl+Shift+K`). Returns the parts so a chip can space them.
+ */
+export declare function comboParts(combo: string, apple?: boolean): string[];
+export declare function comboLabel(combo: string, apple?: boolean): string;

package/dist/types/core/mutate.d.ts

@@ -0,0 +1,21 @@
+import { type Schema, type Value } from "./schema.js";
+/**
+ * How far a mutation moves things. Numbers and points move 8–12% of their range either way;
+ * springs the same share of the range Random uses; choices and switches change only `flip` of the
+ * time. Colours turn a few degrees and shift chroma and lightness slightly.
+ */
+export declare const MUTATE: {
+    readonly min: 0.08;
+    readonly max: 0.12;
+    readonly flip: 0.15;
+    readonly hue: readonly [4, 12];
+    readonly chroma: 0.02;
+    readonly lightness: readonly [0.015, 0.045];
+    readonly bezier: readonly [0.03, 0.06];
+};
+/**
+ * Small changes around `current` for `keys` (every field when omitted): a nudge rather than a
+ * re-roll. When only switches and choices are asked for and none happened to change, one flips,
+ * so a mutation always does something.
+ */
+export declare function mutateValues<S extends Schema>(schema: S, current: Readonly<Record<string, Value>>, keys?: readonly string[], random?: () => number): Record<string, Value>;

package/dist/types/core/ramp.d.ts

@@ -0,0 +1,150 @@
+/** A gradient stop: where it sits (0…1) and its colour, as an `oklch(L C H)` string. */
+export interface GradientStop {
+    readonly at: number;
+    readonly color: string;
+}
+/** How a gradient blends between its stops: perceptually (`oklab`) or as CSS does (`srgb`). */
+export type GradientSpace = "oklab" | "srgb";
+/** A curve point: x across 0…1, y in the curve's range. */
+export interface CurvePoint {
+    readonly x: number;
+    readonly y: number;
+}
+/** `smooth` is a monotone cubic: it never overshoots its points, so a falloff stays a falloff. */
+export type CurveInterp = "smooth" | "linear" | "step";
+export declare const MAX_STOPS = 32;
+export declare const MAX_POINTS = 64;
+/** How many evenly spaced samples a gradient strip and a curve are drawn from (both renderers). */
+export declare const GRADIENT_SAMPLES = 64;
+export declare const CURVE_SAMPLES = 129;
+/** Stops as given, sorted by position (ties keep their order) and clamped; undefined if fewer than two. */
+export declare function normalizeStops(input: unknown): readonly GradientStop[] | undefined;
+/**
+ * Points sorted by x and clamped into `range`, the first at x 0 and the last at x 1 (the ends are
+ * pinned); undefined if fewer than two.
+ */
+export declare function normalizePoints(input: unknown, range: readonly [number, number]): readonly CurvePoint[] | undefined;
+export interface SampleGradientOptions {
+    /** How the stops blend (the field's own `space`); `oklab` by default. Pass the field itself. */
+    readonly space?: GradientSpace;
+}
+/**
+ * The gradient's colour at `t` (0…1, clamped): an `oklch()` string by default, `"hex"` for
+ * `#rrggbb`, `"rgb"` for gamma-encoded sRGB channels (0…1) or `"linear"` for linear-light ones (a
+ * shader's). Blends in the field's `space`: `sampleGradient(v.smoke, age, { ...field, as: "linear" })`.
+ */
+export declare function sampleGradient(stops: readonly GradientStop[], t: number, options?: SampleGradientOptions & {
+    readonly as?: "css" | "hex";
+}): string;
+export declare function sampleGradient(stops: readonly GradientStop[], t: number, options: SampleGradientOptions & {
+    readonly as: "rgb" | "linear";
+}): [number, number, number];
+/** `n` evenly spaced samples (t = i / (n − 1)) as gamma-encoded sRGB triples, flat. */
+export declare function gradientSamples(stops: readonly GradientStop[], space: GradientSpace, n?: number): number[];
+/** A CSS `linear-gradient(…)` of the gradient (sampled, so `oklab` blends match). */
+export declare function gradientCss(stops: readonly GradientStop[], options?: SampleGradientOptions & {
+    readonly direction?: string;
+}): string;
+/** The colour halfway between two stops, for a stop added between them. */
+export declare function stopColorAt(stops: readonly GradientStop[], space: GradientSpace, t: number): string;
+export interface SampleCurveOptions {
+    /** How the points join (the field's own `interp`); `smooth` by default. Pass the field itself. */
+    readonly interp?: CurveInterp;
+}
+/** The curve's y at `x` (clamped to 0…1): `sampleCurve(v.falloff, distance / radius, field)`. */
+export declare function sampleCurve(points: readonly CurvePoint[], x: number, options?: SampleCurveOptions): number;
+/**
+ * `n` samples of the curve as x, y pairs: evenly spaced in x, except that the sample nearest each
+ * point lands on it exactly (corners stay sharp; a step rises straight up). The count never
+ * changes, so two curves' samples can be blended point for point.
+ */
+export declare function curveSamples(points: readonly CurvePoint[], interp: CurveInterp, n?: number): number[];
+/** Built-in curve shapes, y over 0…1 (mapped onto the field's range). */
+export declare const CURVE_SHAPES: {
+    readonly linear: readonly [{
+        readonly x: 0;
+        readonly y: 0;
+    }, {
+        readonly x: 1;
+        readonly y: 1;
+    }];
+    readonly "ease-out": readonly [{
+        readonly x: 0;
+        readonly y: 0;
+    }, {
+        readonly x: 0.35;
+        readonly y: 0.62;
+    }, {
+        readonly x: 1;
+        readonly y: 1;
+    }];
+    readonly "inverse\u00B2": readonly [{
+        readonly x: 0;
+        readonly y: 1;
+    }, {
+        readonly x: 0.1;
+        readonly y: 0.85;
+    }, {
+        readonly x: 0.25;
+        readonly y: 0.47;
+    }, {
+        readonly x: 0.5;
+        readonly y: 0.15;
+    }, {
+        readonly x: 1;
+        readonly y: 0;
+    }];
+    readonly smoothstep: readonly [{
+        readonly x: 0;
+        readonly y: 0;
+    }, {
+        readonly x: 0.25;
+        readonly y: 0.156;
+    }, {
+        readonly x: 0.5;
+        readonly y: 0.5;
+    }, {
+        readonly x: 0.75;
+        readonly y: 0.844;
+    }, {
+        readonly x: 1;
+        readonly y: 1;
+    }];
+    readonly bell: readonly [{
+        readonly x: 0;
+        readonly y: 0;
+    }, {
+        readonly x: 0.25;
+        readonly y: 0.25;
+    }, {
+        readonly x: 0.5;
+        readonly y: 1;
+    }, {
+        readonly x: 0.75;
+        readonly y: 0.25;
+    }, {
+        readonly x: 1;
+        readonly y: 0;
+    }];
+};
+/** A 0…1 shape in a y range. */
+export declare const inRange: (shape: readonly CurvePoint[], range: readonly [number, number]) => {
+    x: number;
+    y: number;
+}[];
+/** Whether two point or stop lists are the same, to a rounding. */
+export declare function sameRamp(a: readonly (CurvePoint | GradientStop)[], b: readonly (CurvePoint | GradientStop)[]): boolean;
+/**
+ * A fresh gradient with as many stops: positions spread evenly with a little play, colours a
+ * walk through a few neighbouring hues from dark to light (or back), so it reads as one ramp.
+ */
+export declare function randomStops(count: number, random: () => number): GradientStop[];
+/**
+ * The stops nudged: each colour turns a few degrees and shifts lightness and chroma a touch (as a
+ * colour field mutates), and each position moves a little without passing its neighbours.
+ */
+export declare function mutateStops(stops: readonly GradientStop[], random: () => number, hue: readonly [number, number], lightness: readonly [number, number]): GradientStop[];
+/** A built-in shape, picked at random, with its inner points shifted a touch. */
+export declare function randomPoints(range: readonly [number, number], random: () => number): CurvePoint[];
+/** Each point nudged a little in y (and the inner ones in x, between their neighbours). */
+export declare function mutatePoints(points: readonly CurvePoint[], range: readonly [number, number], random: () => number, share: readonly [number, number]): CurvePoint[];

package/dist/types/core/random.d.ts

@@ -0,0 +1,2 @@
+import { type Schema, type Values } from "./schema.js";
+export declare function randomValues<S extends Schema>(schema: S, random?: () => number): Values<S>;

package/dist/types/core/readout.d.ts

@@ -0,0 +1,73 @@
+/** A number or text that changes on its own: FPS, a count, a status. */
+export type WatchValue = number | string;
+export type LogLevel = "debug" | "info" | "warn" | "error";
+export interface LogEntry {
+    readonly text: string;
+    readonly level?: LogLevel;
+    /** When it happened (ms since the epoch); when it was pushed by default. */
+    readonly time?: number;
+}
+/** A table's rows (cells by column), or a key-value record. */
+export type TableRows = readonly (readonly (string | number)[])[] | Readonly<Record<string, unknown>>;
+/** A fixed-size history of numbers, oldest first. */
+export declare class Ring {
+    readonly capacity: number;
+    private data;
+    private start;
+    length: number;
+    constructor(capacity: number);
+    push(v: number): void;
+    /** The `i`th sample, 0 the oldest. */
+    at(i: number): number;
+    last(): number;
+    clear(): void;
+    /** The smallest and largest finite samples (NaN when there are none). */
+    extent(): [number, number];
+    toArray(): number[];
+}
+/** A log's entries, oldest first, the oldest dropped past `max`; `total` counts every one pushed. */
+export declare class EntryLog {
+    readonly max: number;
+    entries: (LogEntry & {
+        readonly seq: number;
+        readonly time: number;
+    })[];
+    total: number;
+    constructor(max: number);
+    push(entry: LogEntry): void;
+    clear(): void;
+}
+/** What a readout has received, kept by the store per key. */
+export interface ReadoutState {
+    /** Bumps on every push, so a row can tell it has something new. */
+    seq: number;
+    /** The latest value as pushed (`watch`, `meter`, `table`), else the last sample. */
+    value: unknown;
+    /** `sparkline`: one ring; `graph`: one per series id. */
+    readonly series?: Map<string, Ring>;
+    readonly log?: EntryLog;
+}
+/** A readout field's own options, as far as the history goes. */
+export interface ReadoutShape {
+    readonly kind: string;
+    readonly history?: number;
+    readonly series?: readonly {
+        readonly id: string;
+    }[];
+    readonly max?: number;
+}
+export declare function readoutState(field: ReadoutShape): ReadoutState;
+/**
+ * Takes a pushed value into a readout's state. `null` clears a history (and blanks a value);
+ * a sparkline takes a number or an array that replaces its history, a graph a number (its first
+ * series) or `{ [series]: number }`, a log a string, an entry or an array of them.
+ */
+export declare function pushReadout(field: ReadoutShape, state: ReadoutState, value: unknown): void;
+/** Shared by the store and the panel bundles (the global symbol registry). */
+export declare const READOUT: unique symbol;
+/** What panels use to follow a store's readouts. */
+export interface ReadoutPort {
+    state(key: string): ReadoutState | undefined;
+    /** Calls `cb(key)` after each push; returns the unsubscribe. */
+    listen(cb: (key: string) => void): () => void;
+}