@lt-three/love3 0.0.0 → 0.1.1

package/dist/tuning/schema.js

@@ -0,0 +1,247 @@
+import { findColor } from "./catalog.js";
+import { parseTokenColor } from "./color.js";
+import { BODY_SIZE_MAX, BODY_SIZE_MIN, FONT_KEYS, MODES, RADIUS_MAX, RADIUS_ROLES, emptyTuning } from "./types.js";
+import { normalize } from "./model.js";
+import { z } from "zod";
+
+//#region src/tuning/schema.ts
+/** The name and version of the export and save format. Bump `VERSION` when the shape changes. */
+const FORMAT = "love3-tuning";
+const VERSION = 1;
+/** The key of the storage location (localStorage). */
+const STORAGE_KEY = "love3-preview:tuning";
+const colorMap = z.record(z.string(), z.string());
+const radiusPx = z.number().min(0, { error: "角丸は 0 以上です" }).max(64, { error: `角丸は ${64}px 以下です` });
+const fontValue = z.string();
+/**
+* The skeleton of the format. **Unknown fields are rejected** (`strictObject`). Checks that depend on the design system, such as token names and color contents, are added by `parseTuning`.
+* Every field can be omitted (write only the difference from the defaults).
+*/
+const envelope = z.strictObject({
+	format: z.literal(FORMAT, { error: (issue) => `format は "${FORMAT}" にしてください（実際: ${show(issue.input)}）` }),
+	version: z.literal(1, { error: (issue) => `version は ${1} だけに対応しています（実際: ${show(issue.input)}）` }),
+	tokens: z.strictObject({
+		light: colorMap.optional(),
+		dark: colorMap.optional()
+	}).optional(),
+	radius: z.strictObject({
+		control: radiusPx.optional(),
+		surface: radiusPx.optional()
+	}).optional(),
+	semantic: z.record(z.string(), z.string()).optional(),
+	font: z.strictObject({
+		geist: fontValue.optional(),
+		geistMono: fontValue.optional(),
+		jp: fontValue.optional(),
+		bodySize: z.number().min(8, { error: `本文サイズは ${8}px 以上です` }).max(32, { error: `本文サイズは ${32}px 以下です` }).optional()
+	}).optional(),
+	shadow: z.enum([
+		"default",
+		"none",
+		"preset"
+	], { error: (issue) => `shadow は "default"・"none"・"preset" のどれかです（実際: ${show(issue.input)}）` }).optional()
+});
+function show(value) {
+	return typeof value === "string" ? `"${value}"` : JSON.stringify(value) ?? String(value);
+}
+/** The upper limit of the size of an imported JSON (bytes), for both pasting and files. */
+const MAX_IMPORT_BYTES = 262144;
+/** The upper limit of the number of entries in one table (`tokens.light` / `tokens.dark` / `semantic`). There are fewer than 50 names that can be tuned. */
+const MAX_ENTRIES = 200;
+/** Lists rejection reasons up to this many (the rest become "N more"). */
+const MAX_REASONS = 20;
+const BYTE_ENCODER = new TextEncoder();
+/** Whether the text being imported exceeds the limit (`MAX_IMPORT_BYTES`). */
+function tooLarge(text) {
+	return text.length > 262144 || BYTE_ENCODER.encode(text).length > 262144;
+}
+const TOO_LARGE_REASON = `大きすぎます（${MAX_IMPORT_BYTES / 1024} KB まで）`;
+/**
+* An **allowlist** for typeface values (CSS font-family). Only comma-separated lists of the following parts pass:
+* - Names with closed quotes (`"Geist Variable"` / `'Yu Gothic'`). `\`, `;`, `{`, `}`, `<`, `>`, and newlines are not allowed inside
+* - Bare names (letters, digits, `-`, `_`, and spaces; non-ASCII is allowed too; `sans-serif`, `ui-monospace`, and so on)
+* - `var(--font-…)` references (the default form such as `--font-mono: var(--font-geist-mono)`)
+*
+* **Brackets outside quotes (`(` `)` `[` `]`) and unclosed quotes are rejected.** If they were let through, a `;` or `}` would be swallowed by the bracket or quote,
+* and the following declarations or the whole `.dark {}` block would disappear (reproduced with `Arial(`). Returns the reason (undefined if safe).
+*/
+function unreadable(value, index) {
+	return `書体の「${value.slice(index, index + 12).trim()}」から先を読めません。使えるのは、閉じたクォート付きの名前・素の名前（英数字・-・_・空白）・カンマ・var(--font-…) だけです（括弧 ( ) [ ] ; や閉じていない引用符は使えません）`;
+}
+function fontProblem(value) {
+	if (value.trim() === "") return "書体が空です。既定に戻すときは、その項目を空にするか「既定へ」を押してください";
+	if (value.length > 400) return "書体が長すぎます（400 文字まで）";
+	if (/url\s*\(|@import|expression\s*\(/i.test(value)) return "書体に url()・@import は使えません";
+	const part = /\s*(?:"[^"\\\n\r;{}<>]*"|'[^'\\\n\r;{}<>]*'|var\(\s*--font-[a-z0-9-]+\s*\)|[\p{L}\p{N}_ -]+)\s*/uy;
+	let index = 0;
+	for (;;) {
+		part.lastIndex = index;
+		const match = part.exec(value);
+		if (match === null || match[0].trim() === "") return unreadable(value, index);
+		index = part.lastIndex;
+		if (index >= value.length) return void 0;
+		if (value[index] !== ",") return unreadable(value, index);
+		index += 1;
+		if (index >= value.length) return "書体の最後がカンマで終わっています";
+	}
+}
+/**
+* Reads and validates an exported JSON (a string). **If anything is invalid, the whole input is rejected (no partial application).**
+* The rejection reasons are all the problems found, in Japanese, each with the location of the item.
+*
+* What is rejected: unreadable JSON, a wrong `format` / `version`, unknown fields, unknown token names (`--name`),
+* invalid colors, a dark specification for a token common to light and dark (brand colors), unknown semantic tokens, unselectable reference targets,
+* out-of-range radius and body size, and typefaces that cannot be injected. On success, it returns the form with items equal to the defaults dropped (`normalize`).
+*/
+function parseTuning(text, catalog) {
+	if (tooLarge(text)) return {
+		ok: false,
+		reasons: [TOO_LARGE_REASON]
+	};
+	let json;
+	try {
+		json = JSON.parse(text);
+	} catch (error) {
+		return {
+			ok: false,
+			reasons: [`JSON として読めません（${error instanceof Error ? error.message : String(error)}）`]
+		};
+	}
+	const result = envelope.safeParse(json);
+	if (!result.success) {
+		const reasons = result.error.issues.map((issue) => describe(issue.path, describeIssue(issue)));
+		return {
+			ok: false,
+			reasons: reasons.length > 20 ? [...reasons.slice(0, 20), `ほか ${reasons.length - 20} 件`] : reasons
+		};
+	}
+	const data = result.data;
+	const reasons = [];
+	const tuning = emptyTuning();
+	for (const [where, table, message] of [
+		[
+			["tokens", "light"],
+			rawTable(json, ["tokens", "light"]),
+			"未知のトークン名です（--__proto__）"
+		],
+		[
+			["tokens", "dark"],
+			rawTable(json, ["tokens", "dark"]),
+			"未知のトークン名です（--__proto__）"
+		],
+		[
+			["semantic"],
+			rawTable(json, ["semantic"]),
+			"未知のセマンティックトークンです（--__proto__）"
+		]
+	]) if (table !== void 0 && Object.hasOwn(table, "__proto__")) reasons.push(describe([...where, "__proto__"], message));
+	for (const mode of MODES) {
+		const entries = Object.entries(data.tokens?.[mode] ?? {});
+		if (entries.length > 200) {
+			reasons.push(describe(["tokens", mode], `項目が多すぎます（${entries.length} 個。${200} 個まで）`));
+			continue;
+		}
+		for (const [name, value] of entries) {
+			const where = [
+				"tokens",
+				mode,
+				name
+			];
+			const color = findColor(catalog, name);
+			if (color === void 0) reasons.push(describe(where, `未知のトークン名です（--${name}）。調整できる色は ${catalog.colors.map((c) => c.name).join("・")}`));
+			else if (mode === "dark" && !color.hasDark) reasons.push(describe(where, `--${name} はライト・ダーク共通です。light に書いてください`));
+			else {
+				const parsed = parseTokenColor(value, { alpha: color.alpha });
+				if (parsed.ok) tuning.tokens[mode][name] = parsed.value;
+				else reasons.push(describe(where, parsed.reason));
+			}
+		}
+	}
+	const semanticEntries = Object.entries(data.semantic ?? {});
+	if (semanticEntries.length > 200) {
+		reasons.push(describe(["semantic"], `項目が多すぎます（${semanticEntries.length} 個。${200} 個まで）`));
+		semanticEntries.length = 0;
+	}
+	for (const [name, ref] of semanticEntries) {
+		const where = ["semantic", name];
+		if (!Object.hasOwn(catalog.semantic, name)) reasons.push(describe(where, `未知のセマンティックトークンです（--${name}）`));
+		else if (!catalog.refOptions.includes(ref)) reasons.push(describe(where, `参照先「${ref}」は選べません。選べるのは ${catalog.refOptions.join("・")}`));
+		else tuning.semantic[name] = ref;
+	}
+	for (const role of RADIUS_ROLES) {
+		const px = data.radius?.[role];
+		if (px !== void 0) tuning.radius[role] = px;
+	}
+	for (const key of FONT_KEYS) {
+		const value = data.font?.[key];
+		if (value === void 0) continue;
+		const problem = fontProblem(value);
+		if (problem === void 0) tuning.font[key] = value;
+		else reasons.push(describe(["font", key], problem));
+	}
+	if (data.font?.bodySize !== void 0) tuning.font.bodySize = data.font.bodySize;
+	tuning.shadow = data.shadow ?? "default";
+	if (reasons.length > 20) return {
+		ok: false,
+		reasons: [...reasons.slice(0, 20), `ほか ${reasons.length - 20} 件`]
+	};
+	if (reasons.length > 0) return {
+		ok: false,
+		reasons
+	};
+	return {
+		ok: true,
+		tuning: normalize(tuning, catalog)
+	};
+}
+/** The object for export containing only the difference (empty sections are omitted). */
+function toExportObject(tuning, catalog) {
+	const n = normalize(tuning, catalog);
+	const out = {
+		format: FORMAT,
+		version: 1
+	};
+	if (Object.keys(n.tokens.light).length > 0 || Object.keys(n.tokens.dark).length > 0) out.tokens = {
+		...Object.keys(n.tokens.light).length > 0 ? { light: n.tokens.light } : {},
+		...Object.keys(n.tokens.dark).length > 0 ? { dark: n.tokens.dark } : {}
+	};
+	if (Object.keys(n.radius).length > 0) out.radius = n.radius;
+	if (Object.keys(n.semantic).length > 0) out.semantic = n.semantic;
+	if (Object.keys(n.font).length > 0) out.font = n.font;
+	if (n.shadow !== "default") out.shadow = n.shadow;
+	return out;
+}
+/** The JSON for export and saving (only the difference from the defaults; pretty-printed). */
+function toJson(tuning, catalog) {
+	return JSON.stringify(toExportObject(tuning, catalog), null, 2);
+}
+/** The table (object) at a given path in the parsed JSON. undefined if absent. */
+function rawTable(json, path) {
+	let current = json;
+	for (const key of path) {
+		if (typeof current !== "object" || current === null || !Object.hasOwn(current, key)) return void 0;
+		current = Reflect.get(current, key);
+	}
+	return typeof current === "object" && current !== null ? current : void 0;
+}
+function describe(path, message) {
+	return path.length === 0 ? message : `${path.map(String).join(".")}: ${message}`;
+}
+function describeIssue(issue) {
+	switch (issue.code) {
+		case "unrecognized_keys": return `知らない項目があります（${issue.keys.join("・")}）`;
+		case "invalid_type": return issue.path.length === 0 ? "最上位が JSON のオブジェクトではありません" : `型が違います（期待: ${expectedType(issue.expected)}）`;
+		default: return issue.message;
+	}
+}
+function expectedType(expected) {
+	return {
+		string: "文字",
+		number: "数",
+		object: "オブジェクト",
+		boolean: "真偽値"
+	}[expected] ?? expected;
+}
+
+//#endregion
+export { FORMAT, MAX_ENTRIES, MAX_IMPORT_BYTES, MAX_REASONS, STORAGE_KEY, TOO_LARGE_REASON, VERSION, fontProblem, parseTuning, toExportObject, toJson, tooLarge };

package/dist/tuning/types.d.ts

@@ -0,0 +1,75 @@
+//#region src/tuning/types.d.ts
+/** Light and dark. */
+export type Mode = "light" | "dark";
+export declare const MODES: readonly Mode[];
+/**
+ * Radius roles (`--radius-control` / `--radius-surface`; components use `rounded-control` / `rounded-surface`).
+ * - `control`: small interactive elements (Button, inputs, the Select trigger, Checkbox, Badge, menu items, and so on)
+ * - `surface`: surfaces and containers (Card, Dialog, Sheet, Popover, Alert, Tooltip, menu containers, and so on)
+ */
+export declare const RADIUS_ROLES: readonly ["control", "surface"];
+export type RadiusRole = (typeof RADIUS_ROLES)[number];
+/** The upper limit of the radius (px). Both the slider and numeric input stop here. */
+export declare const RADIUS_MAX = 64;
+/** Typeface keys (`--font-geist` / `--font-geist-mono` / `--font-jp`). */
+export declare const FONT_KEYS: readonly ["geist", "geistMono", "jp"];
+export type FontKey = (typeof FONT_KEYS)[number];
+export declare const FONT_TOKEN: Readonly<Record<FontKey, string>>;
+/** The range of the body size (px). */
+export declare const BODY_SIZE_MIN = 8;
+export declare const BODY_SIZE_MAX = 32;
+/**
+ * Shadow presets. `default` is the love3 default (soft shadows using `--shadow-color`). `none` removes all shadows.
+ * `preset` swaps in Tailwind's default shadows.
+ */
+export type ShadowPreset = "default" | "none" | "preset";
+/**
+ * The content of a tuning. It holds **only the difference from the defaults** (empty = the defaults as they are). The same shape as the canonical form for saving and exporting.
+ *
+ * - `tokens`: overrides of color tokens, per light and dark. Brand colors (`lt-three*`) are common to both, so they are held only in `light`
+ * - `radius`: the radius (px) per role. `control` (small interactive elements) and `surface` (surfaces and containers). Falls back to the default (`TuningCatalog.radius`) when absent
+ * - `semantic`: what the semantic tokens (`background` and so on) refer to (names of ramp, state, and brand tokens)
+ * - `font`: the typeface (a CSS font-family value) and the body size (px)
+ * - `shadow`: the shadow preset (the default is `default` = the love3 soft shadows)
+ */
+export interface Tuning {
+  tokens: Record<Mode, Record<string, string>>;
+  radius: Partial<Record<RadiusRole, number>>;
+  semantic: Record<string, string>;
+  font: Partial<Record<FontKey, string>> & {
+    bodySize?: number;
+  };
+  shadow: ShadowPreset;
+}
+export declare function emptyTuning(): Tuning;
+/** The groups of color tokens. */
+export type ColorGroup = "ramp" | "action" | "brand" | "state" | "chart";
+export interface ColorToken {
+  name: string;
+  group: ColorGroup;
+  /** Whether it can have a separate value in dark. Brand colors are common to both, so they do not. */
+  hasDark: boolean;
+  /** Whether translucency is allowed (scrim). Everything else is an opaque `#rrggbb` only. */
+  alpha: boolean;
+}
+/**
+ * What can be tuned, and the defaults. Built from the design system (`buildCatalog`). The logic looks only at this shape, so it does not depend on the design system and can be tested in Node.
+ */
+export interface TuningCatalog {
+  /** The default actual values (with `var()` resolved; the love3 `tokens`). */
+  defaults: Readonly<Record<Mode, Readonly<Record<string, string>>>>;
+  /** The color tokens (raw ramp, primary action, brand, state, chart), in definition order. */
+  colors: readonly ColorToken[];
+  /** Semantic token name → default reference (`background` → `paper`), in definition order. */
+  semantic: Readonly<Record<string, string>>;
+  /** The names that can be chosen as the target of a semantic reference (opaque color tokens). */
+  refOptions: readonly string[];
+  /** The default radius (px) per role. Read from the CSS `@theme` (`--radius-control` / `--radius-surface`). */
+  radius: Readonly<Record<RadiusRole, number>>;
+  /** The default body size (px) and line height (px). */
+  body: {
+    size: number;
+    lineHeight: number;
+  };
+}
+//#endregion

package/dist/tuning/types.js

@@ -0,0 +1,39 @@
+//#region src/tuning/types.ts
+const MODES = ["light", "dark"];
+/**
+* Radius roles (`--radius-control` / `--radius-surface`; components use `rounded-control` / `rounded-surface`).
+* - `control`: small interactive elements (Button, inputs, the Select trigger, Checkbox, Badge, menu items, and so on)
+* - `surface`: surfaces and containers (Card, Dialog, Sheet, Popover, Alert, Tooltip, menu containers, and so on)
+*/
+const RADIUS_ROLES = ["control", "surface"];
+/** The upper limit of the radius (px). Both the slider and numeric input stop here. */
+const RADIUS_MAX = 64;
+/** Typeface keys (`--font-geist` / `--font-geist-mono` / `--font-jp`). */
+const FONT_KEYS = [
+	"geist",
+	"geistMono",
+	"jp"
+];
+const FONT_TOKEN = {
+	geist: "font-geist",
+	geistMono: "font-geist-mono",
+	jp: "font-jp"
+};
+/** The range of the body size (px). */
+const BODY_SIZE_MIN = 8;
+const BODY_SIZE_MAX = 32;
+function emptyTuning() {
+	return {
+		tokens: {
+			light: {},
+			dark: {}
+		},
+		radius: {},
+		semantic: {},
+		font: {},
+		shadow: "default"
+	};
+}
+
+//#endregion
+export { BODY_SIZE_MAX, BODY_SIZE_MIN, FONT_KEYS, FONT_TOKEN, MODES, RADIUS_MAX, RADIUS_ROLES, emptyTuning };

package/dist/web/analytics/line-chart.d.ts

@@ -0,0 +1,20 @@
+import { ChartCommonProps, LineChartSharedProps } from "../../shared/analytics.js";
+import { CSSProperties } from "react";
+//#region src/web/analytics/line-chart.d.ts
+export type LineChartProps = ChartCommonProps & LineChartSharedProps & {
+  /** Style passed to the outer element (corresponds to native's `style: ViewStyle`). */
+  style?: CSSProperties;
+  className?: string;
+  /** Formatting of the y-axis ticks and the tooltip values (a web addition. Native's `LineChart` is formatted by the OS chart). */
+  formatValue?: (value: number) => string;
+  /** Text shown when there is no data (a web addition). */
+  emptyText?: string;
+};
+/**
+ * A single-series line chart. Same API as native's `analytics/line-chart` (`shared/analytics.ts`). **Pass `data` and `formatValue` with stable references** (same as `MultiLineChart`).
+ * Inside it is a `MultiLineChart` with one series (no legend). To overlay several series, use `MultiLineChart`.
+ *
+ * Native's `LineChart` is iOS SwiftUI Charts, and shows `fallbackText` on anything other than iOS. Web always draws, so it has no `fallbackText`.
+ */
+export declare function LineChart({ data, color, ...rest }: LineChartProps): import("react").JSX.Element;
+//#endregion

package/dist/web/analytics/line-chart.js

@@ -0,0 +1,28 @@
+import { LINE_CHART_SINGLE_SERIES_LABEL } from "../lib/labels.js";
+import { MultiLineChart } from "./multi-line-chart.js";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/web/analytics/line-chart.tsx
+/**
+* A single-series line chart. Same API as native's `analytics/line-chart` (`shared/analytics.ts`). **Pass `data` and `formatValue` with stable references** (same as `MultiLineChart`).
+* Inside it is a `MultiLineChart` with one series (no legend). To overlay several series, use `MultiLineChart`.
+*
+* Native's `LineChart` is iOS SwiftUI Charts, and shows `fallbackText` on anything other than iOS. Web always draws, so it has no `fallbackText`.
+*/
+function LineChart({ data, color = "var(--chart-1)", ...rest }) {
+	const series = useMemo(() => [{
+		key: "line",
+		label: "値",
+		points: data,
+		color
+	}], [data, color]);
+	return /* @__PURE__ */ jsx(MultiLineChart, {
+		legend: false,
+		series,
+		...rest
+	});
+}
+
+//#endregion
+export { LineChart };

package/dist/web/analytics/metric-card.d.ts

@@ -0,0 +1,18 @@
+import { MetricCardSharedProps } from "../../shared/analytics.js";
+import { ReactNode } from "react";
+//#region src/web/analytics/metric-card.d.ts
+export type MetricCardProps = Omit<MetricCardSharedProps, "label"> & {
+  /** Name of the metric. Besides a string you can pass an element, such as a heading with a help trigger (native takes a string). */
+  label: ReactNode;
+};
+/**
+ * A single metric on a surface (label + a large monospaced number + supporting text). Same API as native's `analytics/metric-card` (`shared/analytics.ts`).
+ * A raised surface + a thin 1px border + the surface corner radius, with no shadow.
+ *
+ * Inside it is a `<dl>` (the label is a dt; the value and the supporting text are dd), and it stands on its own (a grid parent can be a `<div>`).
+ * The value stays on one line and is truncated when it does not fit (it does not wrap).
+ *
+ * When `trend` is positive the value is coloured `state-success`; when negative, `state-error`. **Meaning is not conveyed by colour alone**, so put the sign in `value`.
+ */
+export declare function MetricCard({ label, value, subValue, trend, className }: MetricCardProps): import("react").JSX.Element;
+//#endregion

package/dist/web/analytics/metric-card.js

@@ -0,0 +1,40 @@
+import { cn } from "../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/web/analytics/metric-card.tsx
+/**
+* A single metric on a surface (label + a large monospaced number + supporting text). Same API as native's `analytics/metric-card` (`shared/analytics.ts`).
+* A raised surface + a thin 1px border + the surface corner radius, with no shadow.
+*
+* Inside it is a `<dl>` (the label is a dt; the value and the supporting text are dd), and it stands on its own (a grid parent can be a `<div>`).
+* The value stays on one line and is truncated when it does not fit (it does not wrap).
+*
+* When `trend` is positive the value is coloured `state-success`; when negative, `state-error`. **Meaning is not conveyed by colour alone**, so put the sign in `value`.
+*/
+function MetricCard({ label, value, subValue, trend, className }) {
+	const tone = trend === void 0 || trend === 0 ? void 0 : trend > 0 ? "up" : "down";
+	return /* @__PURE__ */ jsxs("dl", {
+		"data-slot": "metric-card",
+		className: cn("bg-card border-border rounded-surface flex min-w-0 flex-col gap-1 border p-4", className),
+		children: [
+			/* @__PURE__ */ jsx("dt", {
+				className: "text-muted-foreground flex items-center gap-1 text-xs font-medium tracking-[0.06em] uppercase",
+				children: label
+			}),
+			/* @__PURE__ */ jsx("dd", {
+				"data-slot": "metric-card-value",
+				"data-trend": tone,
+				title: value,
+				className: cn("min-w-0 truncate font-mono text-xl font-bold tabular-nums sm:text-2xl", tone === "up" && "text-state-success", tone === "down" && "text-state-error"),
+				children: value
+			}),
+			subValue ? /* @__PURE__ */ jsx("dd", {
+				className: "text-muted-foreground min-w-0 truncate font-mono text-xs tabular-nums",
+				children: subValue
+			}) : null
+		]
+	});
+}
+
+//#endregion
+export { MetricCard };

package/dist/web/analytics/multi-line-chart.d.ts

@@ -0,0 +1,39 @@
+import { ChartCommonProps, MultiLineChartSharedProps } from "../../shared/analytics.js";
+import { CSSProperties } from "react";
+//#region src/web/analytics/multi-line-chart.d.ts
+export type MultiLineChartProps = ChartCommonProps & MultiLineChartSharedProps & {
+  /** Style passed to the outer element (corresponds to native's `style: ViewStyle`). */
+  style?: CSSProperties;
+  className?: string;
+  /** Whether to show the legend (shown by default. Native's `MultiLineChart` shows it even for a single series). */
+  legend?: boolean;
+  /**
+   * Whether to show the hidden table for screen readers (series, label, value) (shown by default).
+   * The name of the figure (`accessibilityLabel`) alone cannot convey the exact values, so the same values are also held in an HTML table.
+   * Values go through the same formatting as `formatValue`. **When a series has more than 60 points, 60 are sampled at even intervals so the DOM does not grow**,
+   * and a sentence before the table says so (if you need the exact value of every point, provide your own table or a CSV).
+   */
+  table?: boolean;
+};
+/**
+ * A multi-series line chart. Same API as native's `analytics/multi-line-chart` (`shared/analytics.ts`).
+ * It is drawn with `@tanstack/charts` (SVG). Grid lines are thin 1px lines, the colours are `--chart-1` to `--chart-5`, and the tooltip is an overlay surface + a shadow.
+ *
+ * - **Non-numeric points are dropped**: points whose `y` (or `t`) is not finite (NaN, Infinity) are removed before building
+ *   (they are not in the table for screen readers either, and the number removed is noted with the table). If everything is removed, `emptyText`
+ * - When every series has `t`, **the horizontal position is decided by time**. If even one lacks it, each series is placed at even intervals in its own order
+ *   (that is fine for a single series; when overlaying series with different steps, provide `t`). A series with a single point is drawn as a dot
+ * - There are at most three x-axis ticks, at the first, middle and last positions (a number that does not overlap when there are few points). **The label comes from the nearest point of the first series**
+ *   (when placing by time, a time that exists only in the second or later series does not become a label). It is placed at the point's position
+ * - There are three y-axis ticks, top, middle and bottom. So the line does not collapse even when all points have the same value, it is moved up and down only when the range is zero
+ * - The default of `formatValue` has **a number of digits that depends on the data's range** (ticks can be told apart even for values from 0 to 1). Ticks, the tooltip and the table for screen readers
+ *   go through the same formatting. When you pass one, **keep the function reference stable** (a new function every time rebuilds the chart on every render and closes the tooltip).
+ *   The same goes for `series` (pass a reference the parent does not recreate)
+ * - On hover and focus, the tooltip shows the value of each series' point at that position (arrow keys also move it by keyboard), with the series name and colour.
+ *   **Outside the range where a series has points (up to half the point spacing at the ends), no row is shown for that series** (so a far-away point's value does not look like the value at that position).
+ *   When the point's label differs from the title, it is added to the row
+ * - Reading: the figure is `role="img"` named by `accessibilityLabel` (a summary). The exact values are also held in a hidden table (`table`)
+ * - **Series are not told apart by colour alone**: the legend has the series names, and secondary series can be dashed
+ */
+export declare function MultiLineChart({ series, height, formatValue, emptyText, accessibilityLabel, style, className, legend, table }: MultiLineChartProps): import("react").JSX.Element;
+//#endregion