@lt-three/love3 0.0.0-stage → 0.1.0

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
+/** エクスポート・保存の形式の名前とバージョン。形を変えたら `VERSION` を上げる。 */
+const FORMAT = "love3-tuning";
+const VERSION = 1;
+/** 保存先（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();
+/**
+* 形式の骨組み。**知らない項目は断る**（`strictObject`）。トークン名・色の中身など、DS に依存する検査は `parseTuning` が足す。
+* 全部省略できる（既定との差分だけを書く）。
+*/
+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);
+}
+/** 取り込む JSON の大きさの上限（バイト）。貼り付け・ファイルとも。 */
+const MAX_IMPORT_BYTES = 262144;
+/** 1 つの表（`tokens.light` / `tokens.dark` / `semantic`）の項目数の上限。調整できる名前は 50 に満たない。 */
+const MAX_ENTRIES = 200;
+/** 断る理由を、ここまで並べる（残りは「ほか N 件」）。 */
+const MAX_REASONS = 20;
+const BYTE_ENCODER = new TextEncoder();
+/** 取り込もうとしている文字が、上限（`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 まで）`;
+/**
+* 書体の値（CSS の font-family）の**許可リスト**。次の部品を、カンマ区切りに並べたものだけを通す:
+* - 閉じたクォート付きの名前（`"Geist Variable"` / `'Yu Gothic'`）。中に `\` `;` `{` `}` `<` `>` と改行は置かない
+* - 素の名前（文字・数字・`-`・`_`・空白。非 ASCII も可。`sans-serif` `ui-monospace` など）
+* - `var(--font-…)` の参照（`--font-mono: var(--font-geist-mono)` のような既定の形）
+*
+* **クォートの外の括弧（`(` `)` `[` `]`）と閉じていないクォートは断る**。通すと、`;` や `}` が括弧・引用符に飲まれて、
+* 後ろの宣言や `.dark {}` のブロック全体が消える（`Arial(` の再現）。理由を返す（安全なら undefined）。
+*/
+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 "書体の最後がカンマで終わっています";
+	}
+}
+/**
+* エクスポートの JSON（文字列）を読んで検証する。**1 つでも不正なら全体を断る（部分適用しない）**。
+* 断る理由は、見つけたものを全部、項目の場所つきの日本語で返す。
+*
+* 断るもの: JSON として読めない・`format` / `version` が違う・知らない項目・未知のトークン名（`--名前`）・
+* 不正な色・ライト・ダーク共通のトークン（ブランド色）のダークの指定・未知のセマンティックトークン・選べない参照先・
+* 範囲外の角丸と本文サイズ・差し込めない書体。成功したら、既定と同じ項目を落とした形（`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)
+	};
+}
+/** 差分だけのエクスポート用オブジェクト（空の節は省く）。 */
+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;
+}
+/** エクスポート・保存の JSON（既定との差分だけ。整形つき）。 */
+function toJson(tuning, catalog) {
+	return JSON.stringify(toExportObject(tuning, catalog), null, 2);
+}
+/** 読んだ JSON の、決まった道筋にある表（オブジェクト）。無ければ undefined。 */
+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
+/** ライト・ダーク。 */
+export type Mode = "light" | "dark";
+export declare const MODES: readonly Mode[];
+/**
+ * 角丸の役割（`--radius-control` / `--radius-surface`。部品は `rounded-control` / `rounded-surface` を使う）。
+ * - `control`: 操作する小さな要素（Button・入力・Select のトリガー・Checkbox・Badge・メニューの項目ほか）
+ * - `surface`: 面・入れ物（Card・Dialog・Sheet・Popover・Alert・Tooltip・メニューの入れ物ほか）
+ */
+export declare const RADIUS_ROLES: readonly ["control", "surface"];
+export type RadiusRole = (typeof RADIUS_ROLES)[number];
+/** 角丸（px）の上限。スライダも数値の入力も、ここまで。 */
+export declare const RADIUS_MAX = 64;
+/** 書体のキー（`--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>>;
+/** 本文サイズ（px）の範囲。 */
+export declare const BODY_SIZE_MIN = 8;
+export declare const BODY_SIZE_MAX = 32;
+/**
+ * 影の preset。`default` は love3 の既定（`--shadow-color` を使う淡い影）。`none` は全ての影を消す。
+ * `preset` は Tailwind の既定の影に差し替える。
+ */
+export type ShadowPreset = "default" | "none" | "preset";
+/**
+ * 調整の内容。**既定との差分だけ**を持つ（空 = 既定どおり）。保存・エクスポートの正本と同じ形。
+ *
+ * - `tokens`: 色のトークンの上書き。ライト・ダーク別。ブランド色（`lt-three*`）は共通なので `light` にだけ持つ
+ * - `radius`: 役割ごとの角丸（px）。`control`（操作する小さな要素）と `surface`（面・入れ物）。無ければ既定（`TuningCatalog.radius`）
+ * - `semantic`: セマンティックトークン（`background` など）の参照先（ランプ・状態・ブランドの名前）
+ * - `font`: 書体（CSS の font-family の値）と本文サイズ（px）
+ * - `shadow`: 影の preset（既定は `default` = love3 の淡い影）
+ */
+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;
+/** 色のトークンの区分。 */
+export type ColorGroup = "ramp" | "action" | "brand" | "state" | "chart";
+export interface ColorToken {
+  name: string;
+  group: ColorGroup;
+  /** ダークで別の値を持てるか。ブランド色は共通なので持たない。 */
+  hasDark: boolean;
+  /** 半透明を許すか（scrim）。それ以外は不透明な `#rrggbb` だけ。 */
+  alpha: boolean;
+}
+/**
+ * 調整の対象と既定値。DS から作る（`buildCatalog`）。ロジックはこの形だけを見るので、DS に依存せず Node でテストできる。
+ */
+export interface TuningCatalog {
+  /** 既定の実値（`var()` を解決したもの。love3 の `tokens`）。 */
+  defaults: Readonly<Record<Mode, Readonly<Record<string, string>>>>;
+  /** 色のトークン（生のランプ・主操作・ブランド・状態・チャート）。定義の順。 */
+  colors: readonly ColorToken[];
+  /** セマンティックトークン名 → 既定の参照先（`background` → `paper`）。定義の順。 */
+  semantic: Readonly<Record<string, string>>;
+  /** セマンティックの参照先に選べる名前（不透明な色のトークン）。 */
+  refOptions: readonly string[];
+  /** 役割ごとの角丸の既定（px）。CSS の `@theme`（`--radius-control` / `--radius-surface`）から読む。 */
+  radius: Readonly<Record<RadiusRole, number>>;
+  /** 本文サイズの既定（px）と行の高さ（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-control` / `--radius-surface`。部品は `rounded-control` / `rounded-surface` を使う）。
+* - `control`: 操作する小さな要素（Button・入力・Select のトリガー・Checkbox・Badge・メニューの項目ほか）
+* - `surface`: 面・入れ物（Card・Dialog・Sheet・Popover・Alert・Tooltip・メニューの入れ物ほか）
+*/
+const RADIUS_ROLES = ["control", "surface"];
+/** 角丸（px）の上限。スライダも数値の入力も、ここまで。 */
+const RADIUS_MAX = 64;
+/** 書体のキー（`--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"
+};
+/** 本文サイズ（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（native の `style: ViewStyle` に当たる）。 */
+  style?: CSSProperties;
+  className?: string;
+  /** 縦軸の目盛りとツールチップの値の整形（web の追加。native の `LineChart` は OS のチャートが整形する）。 */
+  formatValue?: (value: number) => string;
+  /** データが空のときの文言（web の追加）。 */
+  emptyText?: string;
+};
+/**
+ * 単一系列の折れ線。native の `analytics/line-chart` と同じ API（`shared/analytics.ts`）。**`data` と `formatValue` は参照を安定させて渡す**（`MultiLineChart` と同じ）。
+ * 中身は 1 本の系列の `MultiLineChart`（凡例は出さない）。複数の系列を重ねるなら `MultiLineChart`。
+ *
+ * native の `LineChart` は iOS の SwiftUI Charts で、iOS 以外では `fallbackText` を出す。web は常に描くので `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
+/**
+* 単一系列の折れ線。native の `analytics/line-chart` と同じ API（`shared/analytics.ts`）。**`data` と `formatValue` は参照を安定させて渡す**（`MultiLineChart` と同じ）。
+* 中身は 1 本の系列の `MultiLineChart`（凡例は出さない）。複数の系列を重ねるなら `MultiLineChart`。
+*
+* native の `LineChart` は iOS の SwiftUI Charts で、iOS 以外では `fallbackText` を出す。web は常に描くので `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"> & {
+  /** 指標の名前。文字列のほか、ヘルプのトリガー付きの見出しなど要素も渡せる（native は文字列）。 */
+  label: ReactNode;
+};
+/**
+ * 面付きの単一指標（ラベル + 大型の等幅数値 + 補助）。native の `analytics/metric-card` と同じ API（`shared/analytics.ts`）。
+ * raised 面 + 1px の薄い枠 + surface 角丸で、影は付けない。
+ *
+ * 中身は `<dl>`（ラベルが dt・値と補助が dd）で、それ自体で成り立つ（グリッドの親は `<div>` でよい）。
+ * 値は 1 行に収め、入りきらないときは省略する（折り返さない）。
+ *
+ * `trend` が正なら値を `state-success`、負なら `state-error` で塗る。**色だけで伝えない**ので、増減は `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
+/**
+* 面付きの単一指標（ラベル + 大型の等幅数値 + 補助）。native の `analytics/metric-card` と同じ API（`shared/analytics.ts`）。
+* raised 面 + 1px の薄い枠 + surface 角丸で、影は付けない。
+*
+* 中身は `<dl>`（ラベルが dt・値と補助が dd）で、それ自体で成り立つ（グリッドの親は `<div>` でよい）。
+* 値は 1 行に収め、入りきらないときは省略する（折り返さない）。
+*
+* `trend` が正なら値を `state-success`、負なら `state-error` で塗る。**色だけで伝えない**ので、増減は `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（native の `style: ViewStyle` に当たる）。 */
+  style?: CSSProperties;
+  className?: string;
+  /** 凡例を出すか（既定は出す。native の `MultiLineChart` は系列が 1 本でも出す）。 */
+  legend?: boolean;
+  /**
+   * 読み上げ用の隠した表（系列・見出し・値）を出すか（既定は出す）。
+   * 図形の名前（`accessibilityLabel`）だけでは正確な値が読めないので、同じ値を HTML の表でも持つ。
+   * 値は `formatValue` と同じ整形を通す。**1 系列が 60 点を超えるときは、DOM が膨らまないよう等間隔に 60 点へ抜き出し**、
+   * その旨を表の前に一文で添える（全点の正確な値が要るなら、使う側の表や CSV で出す）。
+   */
+  table?: boolean;
+};
+/**
+ * 複数系列の折れ線。native の `analytics/multi-line-chart` と同じ API（`shared/analytics.ts`）。
+ * 描画は `@tanstack/charts`（SVG）。目盛りの罫線は 1px の細い線で、色は `--chart-1〜5`・ツールチップは overlay 面 + 影。
+ *
+ * - **数でない点は除く**: `y`（と `t`）が有限でない点（NaN・Infinity）は、組む前に取り除く（読み上げ用の表にも出さず、
+ *   除いた件数を表に添える）。全部除かれたら `emptyText`
+ * - 全系列が `t` を持つなら **時間で横位置を決める**。持たないものが 1 つでもあれば、系列ごとに並び順で等間隔に置く
+ *   （単一系列ならそれでよい。刻みの違う系列を重ねるなら `t` を入れる）。1 点だけの系列は点（dot）で描く
+ * - 横軸の目盛りは先頭・中・末の位置の 3 つまで（点が少なければ重ならない数）。**見出しは、先頭の系列の最も近い点のもの**
+ *   （時間で置くとき、2 本目以降の系列にしかない時刻は、見出しにならない）。点の位置に置く
+ * - 縦軸の目盛りは上・中・下の 3 本。全点が同じ値でも線が潰れないよう、幅ゼロのときだけ上下に逃がす
+ * - `formatValue` の既定は、**データの幅に応じた桁数**（0〜1 の値でも目盛りが区別できる）。目盛り・ツールチップ・読み上げの表が
+ *   同じ整形を通る。渡すときは **関数の参照を安定させる**（毎回新しい関数だと、描画のたびにチャートを組み直し、ツールチップが閉じる）。
+ *   `series` も同じ（親が作り直さない参照を渡す）
+ * - ホバー・フォーカスで、その位置の各系列の点の値をツールチップに出す（キーボードでも矢印で移れる）。系列名と色を添える。
+ *   **系列の点がある範囲（端は点の間隔の半分まで）の外では、その系列の行を出さない**（遠い点の値を、その位置の値のように見せない）。
+ *   点の見出しがタイトルと違うときは、行に添える
+ * - 読み上げ: 図形は `role="img"` で、`accessibilityLabel`（要約）が名前。正確な値は隠した表でも持つ（`table`）
+ * - **色だけで系列を見分けさせない**: 凡例に系列名があり、副系列は破線にできる
+ */
+export declare function MultiLineChart({ series, height, formatValue, emptyText, accessibilityLabel, style, className, legend, table }: MultiLineChartProps): import("react").JSX.Element;
+//#endregion