@howells/hairline 0.0.0-stage → 0.1.0

package/LICENSE

@@ -0,0 +1,21 @@
+MIT License
+
+Copyright (c) 2026 Daniel Howells
+
+Permission is hereby granted, free of charge, to any person obtaining a copy
+of this software and associated documentation files (the "Software"), to deal
+in the Software without restriction, including without limitation the rights
+to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
+copies of the Software, and to permit persons to whom the Software is
+furnished to do so, subject to the following conditions:
+
+The above copyright notice and this permission notice shall be included in all
+copies or substantial portions of the Software.
+
+THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
+IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
+FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
+AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
+LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
+OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE
+SOFTWARE.

package/README.md

@@ -1,3 +1,149 @@
-# Temporary Holding Version
+# Hairline
 
-This version is a temporary placeholder for this package. An operational version to replace this has been submitted for review and is awaiting a staged release.
+An engraved chart library for React. Ninety charts, one hand: pixel-snapped hairlines, a single ink hero per chart, and texture made the way a banknote is made, with crosshatch, hatching, stipple and halftone screens laid on exact pixels over warm paper.
+
+See it at [hairline.danielhowells.com](https://hairline.danielhowells.com).
+
+The temperament is an old-fashioned broadsheet chart desk with modern tools: authority from hierarchy rather than ornament, the zero line sharply distinct from a faint grid, labels set on the marks, exact figures, and every chart in the same frame.
+
+## Running it
+
+```sh
+pnpm install
+pnpm dev           # http://localhost:5173
+pnpm build
+pnpm lint          # @howells/lint (oxlint + oxfmt), kept at zero findings
+pnpm lint:fix
+pnpm build:lib     # the package, into lib/
+pnpm test          # builds lib/, then tests it the way a consumer imports it
+pnpm e2e           # the acceptance suite in the Playwright image (acceptance/README.md)
+```
+
+The docs site is its own workspace package in `site/`, built with [Blume](https://github.com/haydenbleasel/blume). Both commands build `lib/` first, since the site draws its examples with the package:
+
+```sh
+pnpm --filter @howells/hairline-site dev     # http://localhost:4321
+pnpm --filter @howells/hairline-site build   # static HTML in site/dist
+```
+
+| Route | What |
+| --- | --- |
+| `#/` | The grid: every chart, each in the house frame, with nothing else |
+| `#/chart/<ID>` | One chart on its own, for example `#/chart/L13` |
+| `#/kit` | The fills, marks and type the charts are drawn from |
+| `#/sources` | Where each chart's numbers come from |
+
+Three modes, Pink (the default, after the salmon broadsheet), Paper and Dark, set the same ink on three papers. The switcher recolours everything with a cross-fade and is remembered between visits.
+
+## Docs
+
+How to use the package lives on the docs site in [`site/`](site): getting started, the payload contract, the philosophy, and a page per chart. The chart pages are generated from the registry and the zod schemas (`site/src/chart-pages.ts`), so a chart's props table and JSON Schema cannot drift from what it validates. The site's `llms.txt` lists every registry kind with its JSON Schema, for agents.
+
+## Using it in an app
+
+`@howells/hairline` is MIT licensed and not yet published to npm. Once it is, the install will be `npm install @howells/hairline`. Until then, build it locally. Clone the repository, then:
+
+```sh
+pnpm install
+pnpm build:lib     # writes lib/
+```
+
+and install it into the app from a path (`"@howells/hairline": "file:../hairline"`). A `file:` install is a copy, so rebuild and reinstall after any change. The host needs React 19.
+
+Every packaged chart is also its own subpath (`@howells/hairline/rung-bars`, `/hairline-line`, `/hairline-area`, `/dumbbell-queue`, `/plumb-scatter`, `/slope`), so a bundle takes only what it draws. The map charts are behind `@howells/hairline/maps`.
+
+```tsx
+import "@howells/hairline/hairline.css";
+import { RungBars } from "@howells/hairline/rung-bars";
+
+<div className="hl-root">
+  <RungBars
+    data={[
+      { label: "Everest", value: 8849 },
+      { label: "K2", value: 8611 },
+      { label: "Kangchenjunga", value: 8586 },
+    ]}
+    unit={500}
+    unitNote="One rung = 500 m"
+  />
+</div>;
+```
+
+`hairline.css` is precompiled: the tokens, text roles, rules, textures and motion in one file, with no Tailwind in the host. Its selectors sit under `.hl-root` and its custom properties are prefixed `--hl-`, so nothing meets the host's own. A host that builds with Tailwind v4 can instead import `@howells/hairline/tokens.css` and `@howells/hairline/theme.css` after `@import "tailwindcss"`.
+
+- **Theming.** `deriveTheme` from `@howells/hairline/theme` is React-free. Give it a paper and an ink, and if you like a hero, an alert, a font and a mode, and it returns every `--hl-*` property the charts draw with, ready as a `style` on the `hl-root` element. The ramp is derived, not inverted, so dark mode keeps its contrast. Setting the `--hl-*` variables yourself works too. The library sets nothing on `:root`.
+
+  ```tsx
+  import { deriveTheme } from "@howells/hairline/theme";
+
+  const theme = deriveTheme({
+    paper: "#faf9f6",
+    ink: "#1d1d1b",
+    hero: "#a3402b",
+  });
+
+  <div className="hl-root" style={theme}>
+    {/* charts */}
+  </div>;
+  ```
+
+- **Data is required.** The package never falls back to demo data. The six charts with schemas take a `data` (or, for `Slope`, `rows`) prop that a zod 4 schema validates; see the chart's page on the docs site.
+- **The schema contract.** `@howells/hairline/schema` is React-free: one schema per chart, the types inferred from it, `validate` returning path-specific issues, formatter descriptors (`"percent"`, or Intl number-format options; functions still work from TypeScript), and a `registry` of each chart's `kind`, Visual Vocabulary job, data shape, limits and guidance. The JSON Schemas are emitted at build to `lib/json-schema/<kind>.json` (`@howells/hairline/json-schema/<kind>.json`), with an `index.json`.
+- **Server mode.** Pass `width` and `height` for a fixed-size chart that is complete in the server's first HTML (`renderToString` returns the drawn chart), and it is drawn and ready (`data-hl-ready="true"`) with no client: a fixed-size chart defaults to `animate="off"`, while `animate="scroll"` or `"mount"` asks for the entry animation (then it starts hidden). The responsive chart defaults to `"scroll"`. Omit `width` for the measured, responsive chart, and give it `initialWidth` so its first render is real. A summary and a data table are in the markup for screen readers; `table` shows the table to everyone. Every module starts with `"use client"`, so a server component can render a chart whose props are plain data. A formatter function cannot cross that boundary, so use a descriptor, or wrap the chart in a client component of your own.
+- **Export mode.** For slides and rendered images, draw at the logical `width` and set `scale` to show the whole composition larger through the viewBox, type and textures with it. `fit` fills the container at the chart's aspect ratio. `strokes="device"` keeps every stroke at one device pixel however large the chart is shown. It acts on stroked geometry only (rules, lines, rings, outlines); filled marks such as RungBars' bars scale with the composition either way, so there it changes just the baseline rule. `animate="off"` and `onReady` tell a renderer when the chart has settled.
+- **Several roots on one page.** `idPrefix` leads every SVG id, so charts rendered in separate React roots do not collide.
+- **Fonts.** `deriveTheme`'s `font`, or `--hl-font`, sets the charts' face. Label widths are measured for Inter, so another face may crowd; pass `metrics` with its glyph widths.
+- **Emphasis.** The hero is chosen by a datum's key (`id`, else its label or date), never by index.
+- **Size.** One chart costs a host, minified and gzipped with React left out and every other dependency bundled: DumbbellQueue 52 KB, HairlineArea 55 KB, HairlineLine 55 KB, PlumbScatter 52 KB, RungBars 47 KB, Slope 51 KB (1 KB = 1,000 bytes). `tests/bundle-size.test.ts` bundles each subpath and fails a chart that outgrows its budget; raising one is a reviewed edit to the test and to this line.
+- **Types.** Each packaged chart exports its props and datum types by name (`RungBarsProps`, `RungDatum`); for the rest use `ComponentProps<typeof Chart>`.
+- **The kit.** `@howells/hairline/kit` exports the parts the charts are drawn from (`Plot`, `ChartSvg`, `Label`, the rules, marks and textures), for a new chart drawn in the same hand.
+- **The frame.** Charts draw only the plot and take no title or source. The host composes those, or sets `Frame` from `@howells/hairline/frame` round any chart: `<Frame name source footnote note>` is the gallery cell (the name, an (i) opening `note`, the chart, then the source and footnote). The in-plot unit key is the chart's `unitNote` prop; `note` is its deprecated old name.
+
+## The system
+
+- **Type.** Inter only, in sentence case, with tabular figures wherever numbers line up. Three sizes and five roles: `t-axis`, `t-label`, `t-value` and `t-figure` in the charts, `text-small` around them. No capitals, no tracking, no mono; a lint rule holds the case.
+- **Line.** Three stroke widths: 1px hairlines (snapped to the pixel grid with `crisp()` and `shape-crisp`), 1.5px for data lines and curves, 2px for emphasis. A ladder of rules: `grid-line` (faint), `rule` (quiet structure: leaders, tracks, connectors), `hairline` (baselines and zero lines, full ink).
+- **Texture.** One shared module, `src/charts/texture.tsx`: `Hatch`, `CrossHatch`, `Rules`, `Stipple`, `DotScreen`, `Beads`, `DottedLine`, `DotRing`, `DottedPath`, `PixelLine` and `KeySwatch`. Pitches are named in `TEXTURE_PITCH` (hatch 4, crosshatch 6, dot screen 4, dense 3); diagonals are drawn as 1px pixel staircases, so they stay crisp. Textures sit on paper inside a 1px rule, and density or angle encodes a value.
+- **Fills.** Every fill comes from one taxonomy, `src/charts/fills.ts`: a family (solid, hatch, crosshatch, rules, upright rules, stipple, dense stipple, broken rungs) in a tone (ink, strong, mid, quiet, faint, alert), or a step on one of two value ladders (halftone, hatch density) when the fill encodes a quantity. The Fills sheet on the Kit page (`#/kit`, beside Marks and Type) draws the whole taxonomy, so drift shows at a glance.
+- **Colour.** Each mode is a set of CSS variables (`src/system/tokens.css`): paper, ink, an even warm ramp `--hl-l0`…`--hl-l6` drawn in OKLCH between them, `--hl-hero` for the one emphasised element, and `--hl-alert` for a single exceptional mark. Charts never use hex. Paper is built on patternmode's paper and ink; Pink is a greyed broadsheet rose; Dark rebuilds contrast on a warm near-black rather than inverting.
+- **Grain.** Every surface carries a very faint noise in its own ink's colour (`--grain`), behind the marks and never over them, so the page feels like paper while ink and hairlines stay crisp.
+- **Motion.** One set of tokens (`--ease-enter`, `--ease-travel`, five durations, four stagger tiers) shared by CSS and by the script-driven charts (`src/charts/motion.ts`). Charts reveal once as they scroll into view; under reduced motion nothing travels or fades, and the stylesheet draws the plot in the first paint (`data-hl-ready` turns "true" once hydration has read the preference).
+- **Frame.** Every cell carries a short ink bar and the chart's name above the chart. Nothing else: no prose inside charts.
+- **Data.** The gallery draws real public data, credited on `#/sources` and behind each chart's (i). A chart takes its data through props; the package carries none.
+
+## Layout
+
+```
+src/
+  system/      tokens.css (modes, grain, motion), hairline.css (what the charts need: text roles, rules, motion utilities), app.css (the site's own theme), palette, router
+  index.ts     every chart, generated by scripts/library-index.ts; kit.ts, the parts
+  charts/
+    core.tsx     Plot, Chart, Tooltip, grids and ticks
+    texture.tsx  engraved patterns and guides; texture-ids.ts for pitches and ids
+    control.tsx  the one pill control (Play, Pause, Replay, view pickers)
+    motion.ts    motion tokens for script-driven charts
+    hooks.ts     useMeasure, useReveal, useSvgId, useScrub, useReducedMotion
+    axes.ts      tick helpers and crisp()
+    lupi/ basics/ glance/ big/ maps/ board/ originals/ forms/   one kebab-case file per chart + <chart>.data.ts
+  schema/      one zod schema per packaged chart, and the registry (React-free)
+  gallery/     the registry of every chart (GalleryEntry)
+  pages/       the grid and the single-chart page
+docs/
+  REFINE.md    the design rules (the amendments are the current word)
+  BRIEF.md     the original build brief and the reference mapping
+site/          the docs site (Blume): hand-written pages in docs/, a page per chart from src/chart-pages.ts
+reference/     (local only, git-ignored) the screenshots the first versions were rebuilt from
+reports/ and research_notes/   research on broadsheet chart craft, with public-domain example plates
+```
+
+## Adding a chart
+
+1. Create `src/charts/<family>/<name>.tsx`. Render only the plot, inside `<Plot>`; the grid supplies the frame and the name.
+2. Take data through props, required; never default to demo data. Use the text roles, the rule ladder, the shared textures and theme colours only.
+3. Register it as a `GalleryEntry` with a plain, sentence-case name, and add its numbers to `src/gallery/sources.json` and `about.json`. Pick every fill from the Fills sheet; if a chart needs one that isn't there, add it to `fills.ts` so the sheet shows it.
+4. To package it, add `src/schema/<kind>.ts` following `rung-bars.ts`, an entry in `src/schema/registry.ts`, and an example in `site/src/examples.ts`. The chart's docs page, its JSON Schema and its line in the site's `llms.txt` follow from those.
+5. `pnpm typecheck`, `pnpm lint` and `pnpm test` must be clean, and the chart must be looked at in the browser at 1440 and 390.
+
+## Provenance
+
+The first versions were rebuilt from two references: a set of dashboard charts shared publicly by @wheresryan22, and screenshots of the [Lieflat Charts](https://github.com/larashero3-dotcom/lieflat-charts) catalogue. Lieflat Charts is published under the PolyForm Noncommercial licence; none of its code was ever read or used here, and every chart has since been redesigned, renamed and given its own data. Ten charts (O1–O10) are original to Hairline.

package/lib/charts/axes.js

@@ -0,0 +1,5 @@
+"use client";
+//#region src/charts/axes.ts
+var e = (e, t) => e < t ? "past" : e === t ? "active" : "future", t = (e) => Math.round(e) + .5;
+//#endregion
+export { t as crisp, e as phase };

package/lib/charts/basics/candlestick.data.js

@@ -0,0 +1,44 @@
+"use client";
+import { rnd as e } from "../../lib/random.js";
+import { dayAfter as t } from "./util-a.js";
+//#region src/charts/basics/candlestick.data.ts
+var n = [
+	[15.2, 15.6],
+	[15.6, 15.3],
+	[15.3, 15.9],
+	[15.9, 16.4],
+	[16.4, 16.2],
+	[16.2, 16.8],
+	[16.8, 17.3],
+	[17.3, 17.1],
+	[17.1, 17.8],
+	[17.8, 18.4],
+	[18.4, 18.9],
+	[18.9, 19.6],
+	[19.4, 17.2],
+	[17, 16.1],
+	[16.1, 15.4],
+	[15.4, 14.8],
+	[14.8, 15.1],
+	[15.1, 14.6],
+	[14.6, 15.3],
+	[15.3, 15.9],
+	[15.9, 16.7],
+	[16.7, 17.4],
+	[17.4, 17.2],
+	[17.2, 18.1],
+	[18.1, 18.6],
+	[18.6, 19.3],
+	[19.3, 19],
+	[19, 19.8],
+	[19.8, 20.4],
+	[20.4, 21.1]
+], r = (e) => Math.round(e * 10) / 10, i = n.map(([n = 0, i = 0], a) => ({
+	close: i,
+	date: t("2026-08-24", a + Math.floor(a / 5) * 2),
+	high: r(Math.max(n, i) + .2 + e(a, 1) * .8),
+	low: r(Math.min(n, i) - .2 - e(a, 2) * .8),
+	open: n
+}));
+//#endregion
+export { i as candlestickDemo };

package/lib/charts/basics/candlestick.js

@@ -0,0 +1,180 @@
+"use client";
+import { dayTickLabels as e, fmtDay as t, fmtMoney as n, fmtPrice as r } from "../../lib/format.js";
+import { useHover as i } from "../hooks.js";
+import { Plot as a, Tooltip as o } from "../core.js";
+import { noteOf as s, stagger as c } from "../util.js";
+import { DimGroup as l, HitRect as u } from "../hover.js";
+import "../marks.js";
+import { FootNote as d } from "../plot-note.js";
+import { HRule as f, Stem as p, Tick as m } from "../rules.js";
+import { ChartSvg as h } from "../svg.js";
+import { Label as g } from "../text.js";
+import { inkWidth as _ } from "./util-b.js";
+import { paint as v, useTextureIds as y } from "../texture-ids.js";
+import { Hatch as b } from "../texture.js";
+import { ValueGrid as x } from "../value-grid.js";
+import { candlestickDemo as S } from "./candlestick.data.js";
+import { scaleBand as C, scaleLinear as w } from "d3-scale";
+import { jsx as T, jsxs as E } from "react/jsx-runtime";
+//#region src/charts/basics/candlestick.tsx
+var D = (e) => e.date.toISOString(), O = (e, t) => {
+	let n = e.filter((e) => e.date.getUTCDay() === 1);
+	return t ? n.filter((e, t) => t % 2 == 0) : n;
+}, k = (t, n, r, i, a, o) => {
+	let s = (e) => C().domain(r.map(D)).range([0, e - 48]).paddingInner(.1).paddingOuter(.4), c = (t) => {
+		let n = s(t), i = n.bandwidth(), a = O(r, i < 12), c = e(a.map((e) => e.date)), l = [...a.map((e, t) => ({
+			d: e,
+			text: c[t] ?? ""
+		})), ...o];
+		return Math.max(0, ...l.map((e) => Math.ceil(_(e.text)) / 2 - ((n(D(e.d)) ?? 0) + i / 2)));
+	}, l = r.length * 26 + 48, u = Math.min(t - 4, l);
+	for (let e = 0; e < 3; e += 1) u = Math.min(t - 4 - c(u), l);
+	let d = c(u), f = Math.round((t - u - d) / 2 + d), p = f + u, m = Math.round(n - (a ? 78 : 32)), h = s(u).range([f, p - 48]), g = h.bandwidth();
+	return {
+		axisY: m,
+		body: Math.max(3, Math.min(14, g * .62)),
+		left: f,
+		narrow: g < 12,
+		right: p,
+		x: h,
+		y: w().domain(i).range([m - 28, 30])
+	};
+}, A = (e, t) => (e.x(D(t)) ?? 0) + e.x.bandwidth() / 2, j = (t) => {
+	let { layout: n } = t, r = O(t.data, n.narrow), i = e(r.map((e) => e.date));
+	return /* @__PURE__ */ E("g", { children: [/* @__PURE__ */ T(f, {
+		x0: n.left,
+		x1: n.right,
+		y: n.axisY
+	}), r.map((e, t) => /* @__PURE__ */ E("g", { children: [/* @__PURE__ */ T(m, {
+		x: A(n, e),
+		y: n.axisY + 1
+	}), /* @__PURE__ */ T(g, {
+		anchor: "middle",
+		voice: "axis",
+		x: A(n, e),
+		y: n.axisY + 20,
+		children: i[t]
+	})] }, D(e)))] });
+}, M = (e) => e ? 2 : 1, N = (e) => {
+	let { datum: t, layout: n } = e, { y: r } = n, i = A(n, t), a = n.x.bandwidth(), o = t.close >= t.open, s = 2 * Math.floor(n.body / 2) + 1, d = Math.round(i) - Math.floor(s / 2), f = Math.round(r(Math.max(t.open, t.close))), m = Math.max(3, Math.round(r(Math.min(t.open, t.close))) - f), h = !o && !e.hero, g = o ? M(e.hero) : Number(h), _ = e.hero ? "fill-hero" : "stroke-l5", y = e.hero ? "fill-paper stroke-hero" : "fill-paper stroke-l3";
+	return /* @__PURE__ */ E(l, {
+		dim: e.dim,
+		onPointerEnter: () => {
+			e.onHover(i, r(t.high) - 8);
+		},
+		children: [
+			/* @__PURE__ */ T(u, {
+				height: r(t.low) - r(t.high) + 12,
+				width: a + 2,
+				x: i - a / 2 - 1,
+				y: r(t.high) - 6
+			}),
+			/* @__PURE__ */ T(p, {
+				className: `fade ${e.hero ? "stroke-hero" : "stroke-l3"}`,
+				style: c(e.index, "mark"),
+				x: i,
+				y0: Math.round(r(t.high)),
+				y1: Math.round(r(t.low))
+			}),
+			/* @__PURE__ */ T("rect", {
+				className: `grow-y ${o ? y : _}`,
+				fill: h ? v(e.hatch) : void 0,
+				height: m - g,
+				rx: 2 - g / 2,
+				strokeWidth: g,
+				style: c(e.index, "mark"),
+				width: s - g,
+				x: d + g / 2,
+				y: f + g / 2
+			})
+		]
+	});
+}, P = (e) => {
+	let c = e.data ?? S, l = e.height ?? 420, u = e.format ?? n, f = e.formatPrice ?? r, p = i(), m = y("candle"), _ = Math.min(...c.map((e) => e.low)), v = Math.max(...c.map((e) => e.high)), C = c.find((e) => e.high === v), O = c.find((e) => e.low === _), M = w().domain([_, v]).nice(5), [P = _, F = v] = M.domain(), I = M.ticks(5), L = `Daily prices, ${c.length} days, from ${f(c[0]?.open ?? 0)} to ${f(c.at(-1)?.close ?? 0)}; high ${f(v)}, low ${f(_)}`;
+	return /* @__PURE__ */ T(a, {
+		overlay: p.at === null ? null : /* @__PURE__ */ E(o, {
+			x: p.at.x,
+			y: p.at.y,
+			children: [
+				/* @__PURE__ */ T("b", { children: t(c[p.at.key].date) }),
+				" · O",
+				" ",
+				f(c[p.at.key].open),
+				" · H",
+				" ",
+				f(c[p.at.key].high),
+				" · L",
+				" ",
+				f(c[p.at.key].low),
+				" · C",
+				" ",
+				f(c[p.at.key].close)
+			]
+		}),
+		children: (t) => {
+			let n = k(t, l, c, [P, F], s(e) !== void 0, [C, O].flatMap((e, t) => e === void 0 ? [] : [{
+				d: e,
+				text: f(t === 0 ? v : _)
+			}]));
+			return /* @__PURE__ */ E(h, {
+				height: l,
+				label: L,
+				leave: p.clear,
+				width: t,
+				children: [
+					/* @__PURE__ */ T("defs", { children: /* @__PURE__ */ T(b, {
+						id: m("hatch"),
+						tone: "fill-l3"
+					}) }),
+					/* @__PURE__ */ T(x, {
+						labelFloor: !0,
+						side: "right",
+						floor: n.axisY,
+						format: u,
+						ticks: I,
+						x0: n.left,
+						x1: n.right,
+						y: n.y
+					}),
+					/* @__PURE__ */ T(j, {
+						data: c,
+						layout: n
+					}),
+					c.map((e, t) => /* @__PURE__ */ T(N, {
+						hatch: m("hatch"),
+						datum: e,
+						hero: t === c.length - 1,
+						dim: p.dim(t),
+						index: t,
+						layout: n,
+						onHover: p.showAt(t)
+					}, D(e))),
+					C === void 0 ? null : /* @__PURE__ */ T(g, {
+						anchor: "middle",
+						order: 10,
+						voice: "axis",
+						x: A(n, C),
+						y: n.y(v) - 10,
+						children: f(v)
+					}),
+					O === void 0 ? null : /* @__PURE__ */ T(g, {
+						anchor: "middle",
+						halo: !0,
+						order: 10,
+						voice: "axis",
+						x: A(n, O),
+						y: n.y(_) + 18,
+						children: f(_)
+					}),
+					/* @__PURE__ */ T(d, {
+						height: l,
+						text: s(e),
+						width: t
+					})
+				]
+			});
+		}
+	});
+};
+//#endregion
+export { P as Candlestick };

package/lib/charts/basics/daily-empty.js

@@ -0,0 +1,24 @@
+"use client";
+import { HRule as e } from "../rules.js";
+import { ChartSvg as t } from "../svg.js";
+import { Label as n } from "../text.js";
+import { jsx as r, jsxs as i } from "react/jsx-runtime";
+//#region src/charts/basics/daily-empty.tsx
+var a = ({ floor: a, height: o, name: s, width: c }) => /* @__PURE__ */ i(t, {
+	height: o,
+	label: s ?? "No data",
+	width: c,
+	children: [/* @__PURE__ */ r(e, {
+		x0: 8,
+		x1: c - 8,
+		y: a
+	}), /* @__PURE__ */ r(n, {
+		anchor: "middle",
+		voice: "axis",
+		x: c / 2,
+		y: a - 12,
+		children: "No data"
+	})]
+});
+//#endregion
+export { a as DailyEmpty };

package/lib/charts/basics/daily-readings.js

@@ -0,0 +1,16 @@
+"use client";
+import { keyOf as e } from "../../schema/key.js";
+//#region src/charts/basics/daily-readings.ts
+var t = (t) => t.flatMap((t) => {
+	let n = new Date(t.date);
+	return Number.isNaN(n.getTime()) ? [] : [{
+		date: n,
+		key: e(t),
+		value: t.value !== null && Number.isFinite(t.value) ? t.value : null
+	}];
+}).toSorted((e, t) => e.date.getTime() - t.date.getTime()), n = (e, t, n) => e.map((e) => [t(e.date), e.value === null ? "No reading" : n(e.value)]), r = (e) => e.flatMap((e, t) => e.value === null ? [] : [t]), i = (e) => ({
+	live: r(e),
+	readings: e
+}), a = (e, t) => `${e.key}#${t}`, o = (e, t) => e[t].value ?? 0, s = (e, t, n, r) => n === void 0 ? r : t.find((t) => e[t].key === n) ?? -1, c = (e) => e.value !== null;
+//#endregion
+export { s as heroOf, c as isLive, r as liveOf, a as reactKeyOf, n as readingRows, t as readingsOf, i as seriesOf, o as valueAt };

package/lib/charts/basics/dot-heat.data.js

@@ -0,0 +1,225 @@
+"use client";
+//#region src/charts/basics/dot-heat.data.ts
+var e = {
+	columns: [
+		"0:00",
+		"1:00",
+		"2:00",
+		"3:00",
+		"4:00",
+		"5:00",
+		"6:00",
+		"7:00",
+		"8:00",
+		"9:00",
+		"10:00",
+		"11:00",
+		"12:00",
+		"13:00",
+		"14:00",
+		"15:00",
+		"16:00",
+		"17:00",
+		"18:00",
+		"19:00",
+		"20:00",
+		"21:00",
+		"22:00",
+		"23:00"
+	],
+	rows: [
+		"Mon",
+		"Tue",
+		"Wed",
+		"Thu",
+		"Fri",
+		"Sat",
+		"Sun"
+	],
+	values: [
+		[
+			2.1,
+			2.2,
+			2.2,
+			2.2,
+			2.3,
+			2.4,
+			2.5,
+			4.8,
+			7.1,
+			5.1,
+			5,
+			5,
+			6.6,
+			6.1,
+			5.3,
+			4.9,
+			5.1,
+			5.3,
+			4.8,
+			4.2,
+			4.2,
+			3.8,
+			3.6,
+			3.2
+		],
+		[
+			2.7,
+			2.7,
+			2.6,
+			2.6,
+			2.5,
+			2.6,
+			2.7,
+			4.6,
+			6.7,
+			5.1,
+			5,
+			5,
+			6.4,
+			5.9,
+			5.3,
+			4.9,
+			4.9,
+			5.1,
+			4.7,
+			4,
+			4,
+			3.6,
+			3.4,
+			3.1
+		],
+		[
+			2.8,
+			2.8,
+			2.6,
+			2.6,
+			2.6,
+			2.6,
+			2.7,
+			4.6,
+			6.5,
+			5,
+			5,
+			5,
+			6.2,
+			5.8,
+			5.2,
+			4.9,
+			5,
+			5.1,
+			4.7,
+			4.1,
+			3.9,
+			3.7,
+			3.4,
+			3.1
+		],
+		[
+			2.7,
+			2.8,
+			2.6,
+			2.6,
+			2.5,
+			2.6,
+			2.7,
+			4.5,
+			6.4,
+			5,
+			4.9,
+			4.9,
+			6.3,
+			5.9,
+			5.2,
+			4.9,
+			5,
+			5.2,
+			4.7,
+			4.1,
+			4,
+			3.7,
+			3.4,
+			3.2
+		],
+		[
+			2.8,
+			2.8,
+			2.7,
+			2.6,
+			2.6,
+			2.6,
+			2.8,
+			4.9,
+			7,
+			5.2,
+			5,
+			4.9,
+			6.2,
+			5.8,
+			5.3,
+			5,
+			5,
+			4.9,
+			4.4,
+			3.9,
+			3.8,
+			3.5,
+			3.3,
+			3.1
+		],
+		[
+			3.9,
+			3.9,
+			3.8,
+			3.7,
+			3.6,
+			3.6,
+			3.6,
+			3.8,
+			4.7,
+			5,
+			5,
+			4.9,
+			5,
+			4.7,
+			4.6,
+			4.6,
+			4.5,
+			4.4,
+			4.1,
+			3.8,
+			3.9,
+			3.7,
+			3.7,
+			3.5
+		],
+		[
+			3.6,
+			3.8,
+			3.5,
+			3.7,
+			3.6,
+			3.6,
+			3.7,
+			3.9,
+			4.6,
+			4.9,
+			5,
+			5,
+			5,
+			4.7,
+			4.7,
+			4.6,
+			4.5,
+			4.4,
+			4.1,
+			3.9,
+			4,
+			3.8,
+			3.7,
+			3.7
+		]
+	]
+};
+//#endregion
+export { e as dotHeatDemo };