@lt-three/love3 0.0.0-stage → 0.1.0

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

@@ -0,0 +1,345 @@
+import { LINE_CHART_DEFAULT_LABEL, LINE_CHART_EMPTY_TEXT, LINE_CHART_TABLE_POINT_LABEL, LINE_CHART_TABLE_SERIES_LABEL, LINE_CHART_TABLE_VALUE_LABEL, lineChartTableDropped, lineChartTableThinned } from "../lib/labels.js";
+import { cssVars } from "../lib/css-vars.js";
+import { cn } from "../lib/utils.js";
+import { useMemo } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { defineChart, dot, lineY } from "@tanstack/charts";
+import { Chart } from "@tanstack/charts/react";
+import { scaleLinear } from "@tanstack/charts/scales/linear";
+import { tooltip } from "@tanstack/charts/tooltip";
+
+//#region src/web/analytics/multi-line-chart.tsx
+const DEFAULT_HEIGHT = 220;
+/** 読み上げ用の表に出す、1 系列あたりの行数の上限。 */
+const MAX_TABLE_ROWS_PER_SERIES = 60;
+const THEME = {
+	foreground: "var(--foreground)",
+	muted: "var(--muted-foreground)",
+	grid: "var(--line)",
+	background: "transparent",
+	palette: [
+		"var(--chart-1)",
+		"var(--chart-2)",
+		"var(--chart-3)",
+		"var(--chart-4)",
+		"var(--chart-5)"
+	]
+};
+/** 罫線は 1px の細い線（`--line`）。ライブラリの既定の不透明度 0.11 は掛けず、トークンの色のまま出す。 */
+const GRID_LINE = {
+	stroke: "var(--line)",
+	strokeOpacity: 1,
+	strokeWidth: 1
+};
+/** 軸の基線は罫線より 1 段濃い（`--line-strong`）。 */
+const AXIS_LINE = {
+	stroke: "var(--line-strong)",
+	strokeOpacity: 1,
+	strokeWidth: 1
+};
+/** 目盛りの文字を薄めない（既定は 0.68）。 */
+const TICK_LABELS = { opacity: 1 };
+/** キーボードで図形（`svg tabindex=0`）に入ったときのフォーカスは、他の部品と同じ不透明の ring（低アルファは使わない。余白 2px）。 */
+const FOCUS_RING = "[&_svg:focus-visible]:rounded-control [&_svg:focus-visible]:ring-2 [&_svg:focus-visible]:ring-ring [&_svg:focus-visible]:ring-offset-2 [&_svg:focus-visible]:ring-offset-background [&_svg:focus-visible]:outline-none";
+const TOOLTIP_VARS = cssVars({
+	"--ts-chart-tooltip-background": "var(--overlay)",
+	"--ts-chart-tooltip-color": "var(--popover-foreground)",
+	"--ts-chart-tooltip-border": "1px solid var(--line)",
+	"--ts-chart-tooltip-border-radius": "var(--radius-control)",
+	"--ts-chart-tooltip-shadow": "var(--shadow-md)",
+	"--ts-chart-tooltip-padding": "8px 10px",
+	"--ts-chart-tooltip-font": "400 12px/16px var(--font-sans)"
+});
+/**
+* 複数系列の折れ線。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`）
+* - **色だけで系列を見分けさせない**: 凡例に系列名があり、副系列は破線にできる
+*/
+function MultiLineChart({ series, height = DEFAULT_HEIGHT, formatValue, emptyText = LINE_CHART_EMPTY_TEXT, accessibilityLabel, style, className, legend = true, table = true }) {
+	const label = accessibilityLabel ?? defaultLabel(series);
+	const model = useMemo(() => buildModel(series, formatValue), [series, formatValue]);
+	if (model === null) return /* @__PURE__ */ jsx("div", {
+		"data-slot": "line-chart",
+		"data-empty": "",
+		style: {
+			minHeight: height,
+			...style
+		},
+		className: cn("flex items-center justify-center", className),
+		children: /* @__PURE__ */ jsx("p", {
+			className: "text-muted-foreground text-sm",
+			children: emptyText
+		})
+	});
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "line-chart",
+		style,
+		className: cn("flex min-w-0 flex-col gap-2", FOCUS_RING, className),
+		children: [
+			/* @__PURE__ */ jsx(Chart, {
+				definition: model.definition,
+				height,
+				ariaLabel: label,
+				style: TOOLTIP_VARS
+			}),
+			legend ? /* @__PURE__ */ jsx("ul", {
+				"data-slot": "line-chart-legend",
+				className: "flex flex-wrap gap-x-4 gap-y-1 px-1",
+				children: series.map((entry) => /* @__PURE__ */ jsxs("li", {
+					className: "text-muted-foreground flex items-center gap-1.5 text-[11px]",
+					children: [/* @__PURE__ */ jsx("span", {
+						"aria-hidden": true,
+						className: "inline-block h-0.5 w-2.5",
+						style: {
+							background: entry.dashed === true ? `repeating-linear-gradient(90deg, ${entry.color} 0 4px, transparent 4px 6px)` : entry.color,
+							opacity: entry.points.length > 0 ? 1 : .4
+						}
+					}), entry.label]
+				}, entry.key))
+			}) : null,
+			table ? /* @__PURE__ */ jsx(DataTable, {
+				caption: label,
+				model
+			}) : null
+		]
+	});
+}
+/** 要約が無いときの名前。系列の名前を並べる。 */
+function defaultLabel(series) {
+	const names = series.map((entry) => entry.label).filter((name) => name !== "");
+	return names.length === 0 ? LINE_CHART_DEFAULT_LABEL : `${names.join("・")}の${LINE_CHART_DEFAULT_LABEL}`;
+}
+/** 等間隔に最大 `limit` 件へ抜き出す（先頭と末尾は必ず残す）。 */
+function thin(items, limit) {
+	if (items.length <= limit) return [...items];
+	const picked = /* @__PURE__ */ new Set();
+	for (let i = 0; i < limit; i += 1) picked.add(Math.round(i * (items.length - 1) / (limit - 1)));
+	return [...picked].sort((a, b) => a - b).flatMap((index) => items[index] === void 0 ? [] : [items[index]]);
+}
+/** 読み上げ用に隠した表。画面には出さない（sr-only）。値は図形の目盛りと同じ整形を通す。 */
+function DataTable({ caption, model }) {
+	const total = model.series.reduce((sum, entry) => sum + entry.points.length, 0);
+	const shownSeries = model.series.map((entry) => ({
+		entry,
+		points: thin(entry.points, MAX_TABLE_ROWS_PER_SERIES)
+	}));
+	const shown = shownSeries.reduce((sum, item) => sum + item.points.length, 0);
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "line-chart-table",
+		className: "sr-only",
+		children: [
+			model.dropped > 0 ? /* @__PURE__ */ jsx("p", { children: lineChartTableDropped(model.dropped) }) : null,
+			shown < total ? /* @__PURE__ */ jsx("p", { children: lineChartTableThinned(shown, total) }) : null,
+			/* @__PURE__ */ jsxs("table", { children: [
+				/* @__PURE__ */ jsx("caption", { children: caption }),
+				/* @__PURE__ */ jsx("thead", { children: /* @__PURE__ */ jsxs("tr", { children: [
+					/* @__PURE__ */ jsx("th", {
+						scope: "col",
+						children: LINE_CHART_TABLE_SERIES_LABEL
+					}),
+					/* @__PURE__ */ jsx("th", {
+						scope: "col",
+						children: LINE_CHART_TABLE_POINT_LABEL
+					}),
+					/* @__PURE__ */ jsx("th", {
+						scope: "col",
+						children: "値"
+					})
+				] }) }),
+				/* @__PURE__ */ jsx("tbody", { children: shownSeries.flatMap(({ entry, points }) => points.map((point, index) => /* @__PURE__ */ jsxs("tr", { children: [
+					/* @__PURE__ */ jsx("th", {
+						scope: "row",
+						children: entry.label
+					}),
+					/* @__PURE__ */ jsx("td", { children: String(point.x) }),
+					/* @__PURE__ */ jsx("td", { children: model.format(point.y) })
+				] }, `${entry.key}-${index.toString()}`))) })
+			] })
+		]
+	});
+}
+/** `y`（と `t`）が有限の点だけを描く。NaN・Infinity は、スケールを壊すので組む前に除く。 */
+function isUsable(point) {
+	return Number.isFinite(point.y) && (point.t === void 0 || Number.isFinite(point.t));
+}
+function buildModel(series, formatValue) {
+	const cleaned = series.map((entry) => ({
+		...entry,
+		points: entry.points.filter(isUsable)
+	}));
+	const total = series.reduce((sum, entry) => sum + entry.points.length, 0);
+	const clean = cleaned.filter((entry) => entry.points.length > 0);
+	if (clean.length === 0) return null;
+	const kept = clean.reduce((sum, entry) => sum + entry.points.length, 0);
+	const built = buildDefinition(clean, formatValue);
+	return {
+		definition: built.definition,
+		series: clean,
+		dropped: total - kept,
+		format: built.format
+	};
+}
+/** 位置にいちばん近い点。 */
+function nearestRow(entry, position) {
+	let best;
+	for (const row of entry) if (best === void 0 || Math.abs(row.x - position) < Math.abs(best.x - position)) best = row;
+	return best;
+}
+/** 全系列が `t` を持つなら時間で置く。 */
+function isTimed(series) {
+	const times = series.flatMap((entry) => entry.points.map((point) => point.t));
+	return times.length > 0 && times.every((time) => time !== void 0);
+}
+/** 点の横位置（時間があれば時間、無ければ系列の中の並びを 0〜1 に）。 */
+function positionOf(timed, index, count, point) {
+	if (timed && point.t !== void 0) return point.t;
+	return count === 1 ? .5 : index / (count - 1);
+}
+function extent(values) {
+	let min = Infinity;
+	let max = -Infinity;
+	for (const value of values) {
+		if (value < min) min = value;
+		if (value > max) max = value;
+	}
+	return [min, max];
+}
+/**
+* 既定の整形。目盛りの間隔（上・中・下の 3 本なので幅の半分）が見分けられる桁数に、もう 1 桁足す（0〜6 桁）。
+* 0〜1 の値は 2 桁、100 以上の幅なら整数。ツールチップ・読み上げの表も同じ整形にする。
+*/
+function autoFormat(low, high) {
+	const step = (high - low) / 2;
+	const digits = step > 0 && Number.isFinite(step) ? Math.min(6, Math.max(0, Math.ceil(-Math.log10(step)) + 1)) : 0;
+	return (value) => (value === 0 ? 0 : value).toFixed(digits);
+}
+/** 点の範囲の外側にどこまで寄せて、その系列の行を出すか（点の間隔の半分。1 点だけなら横軸の幅の 2%）。 */
+function reachOf(entry, domainWidth) {
+	if (entry.length < 2) return domainWidth * .02;
+	const [min, max] = extent(entry.map((row) => row.x));
+	return (max - min) / (entry.length - 1) / 2;
+}
+function buildDefinition(series, formatValue) {
+	const timed = isTimed(series);
+	const rows = series.map((entry) => entry.points.map((point, index) => ({
+		x: positionOf(timed, index, entry.points.length, point),
+		y: point.y,
+		label: String(point.x),
+		series: entry.label,
+		color: entry.color
+	})));
+	const [min, max] = extent(series.flatMap((entry) => entry.points.map((point) => point.y)));
+	const span = max - min || Math.max(Math.abs(max), 1);
+	const low = max === min ? min - span / 2 : min;
+	const high = max === min ? max + span / 2 : max;
+	const mid = low / 2 + high / 2;
+	const format = formatValue ?? autoFormat(low, high);
+	const [xMin, xMax] = extent(rows.flatMap((entry) => entry.map((row) => row.x)));
+	const xDomain = timed ? xMax === xMin ? [xMin - .5, xMax + .5] : [xMin, xMax] : [0, 1];
+	const domainWidth = xDomain[1] - xDomain[0];
+	const reference = rows[0] ?? [];
+	const tickRows = [
+		xDomain[0],
+		(xDomain[0] + xDomain[1]) / 2,
+		xDomain[1]
+	].map((position) => nearestRow(reference, position)).filter((row, index, all) => row !== void 0 && all.indexOf(row) === index);
+	const xTicks = tickRows.map((row) => row.x);
+	const labelAt = (position) => tickRows.find((row) => row.x === position)?.label ?? "";
+	const ranges = rows.map((entry) => extent(entry.map((row) => row.x)));
+	const reaches = rows.map((entry) => reachOf(entry, domainWidth));
+	return {
+		definition: defineChart({
+			marks: series.flatMap((entry, index) => {
+				const own = rows[index] ?? [];
+				const line = lineY(own, {
+					id: entry.key,
+					x: "x",
+					y: "y",
+					stroke: entry.color,
+					strokeWidth: entry.dashed === true ? 1.5 : 2,
+					strokeDasharray: entry.dashed === true ? "4 3" : void 0
+				});
+				return own.length === 1 ? [line, dot(own, {
+					id: `${entry.key}-dot`,
+					x: "x",
+					y: "y",
+					fill: entry.color,
+					r: 3
+				})] : [line];
+			}),
+			scales: {
+				x: {
+					scale: scaleLinear().domain(xDomain),
+					axis: {
+						line: AXIS_LINE,
+						ticks: {
+							values: xTicks,
+							format: labelAt
+						},
+						tickLabels: TICK_LABELS
+					}
+				},
+				y: {
+					scale: scaleLinear().domain([low, high]),
+					grid: GRID_LINE,
+					axis: {
+						line: AXIS_LINE,
+						ticks: {
+							values: [
+								low,
+								mid,
+								high
+							],
+							format
+						},
+						tickLabels: TICK_LABELS
+					}
+				}
+			},
+			theme: THEME,
+			focus: "nearest-x",
+			tooltip: {
+				use: tooltip,
+				content: (points) => {
+					const primary = points[0];
+					if (primary === void 0) return { rows: [] };
+					const position = primary.datum.x;
+					return {
+						title: primary.datum.label,
+						rows: rows.flatMap((entry, index) => {
+							const range = ranges[index] ?? [0, 0];
+							const reach = reaches[index] ?? 0;
+							if (position < range[0] - reach || position > range[1] + reach) return [];
+							const hit = nearestRow(entry, position);
+							if (hit === void 0) return [];
+							return [{
+								label: hit.label === primary.datum.label ? hit.series : `${hit.series}（${hit.label}）`,
+								value: format(hit.y),
+								color: hit.color
+							}];
+						})
+					};
+				}
+			}
+		}),
+		format
+	};
+}
+
+//#endregion
+export { MultiLineChart };

package/dist/web/atom/avatar.d.ts

@@ -0,0 +1,11 @@
+import React from "react";
+//#region src/web/atom/avatar.d.ts
+export type AvatarProps = {
+  src?: string;
+  /** 画像の代替テキスト。既定は空（飾り。隣に名前が出ている前提）。名前の無い単独の顔なら、人の名前を渡す */
+  alt?: string;
+  fallback?: React.ReactNode;
+  className?: string;
+};
+export declare function Avatar({ src, alt, fallback, className }: AvatarProps): React.JSX.Element;
+//#endregion

package/dist/web/atom/avatar.js

@@ -0,0 +1,24 @@
+import { cn } from "../lib/utils.js";
+import { Avatar as Avatar$1, AvatarFallback, AvatarImage } from "../base/avatar.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { User } from "lucide-react";
+
+//#region src/web/atom/avatar.tsx
+function Avatar({ src, alt = "", fallback, className }) {
+	return /* @__PURE__ */ jsxs(Avatar$1, {
+		className: cn("size-6", className),
+		children: [/* @__PURE__ */ jsx(AvatarImage, {
+			src,
+			alt
+		}), /* @__PURE__ */ jsx(AvatarFallback, {
+			className: "bg-muted-foreground text-background",
+			children: fallback ?? /* @__PURE__ */ jsx(User, {
+				className: "size-4",
+				"aria-hidden": true
+			})
+		})]
+	});
+}
+
+//#endregion
+export { Avatar };

package/dist/web/atom/badge.d.ts

@@ -0,0 +1,2 @@
+import { Badge, BadgeVariants, badgeVariants } from "../base/badge.js";
+export { Badge, type BadgeVariants, badgeVariants };

package/dist/web/atom/badge.js

@@ -0,0 +1,3 @@
+import { Badge, badgeVariants } from "../base/badge.js";
+
+export { Badge, badgeVariants };

package/dist/web/atom/button.d.ts

@@ -0,0 +1,23 @@
+import { ButtonSize, ButtonVariant } from "../../shared/button.js";
+import { Button as Button$1 } from "../base/button.js";
+import React, { ComponentType, SVGProps } from "react";
+//#region src/web/atom/button.d.ts
+export type ButtonIcon = ComponentType<SVGProps<SVGSVGElement>>;
+type ButtonIconProps = {
+  iconLeft?: never;
+  iconRight?: never;
+} | {
+  iconLeft: ButtonIcon;
+  iconRight?: never;
+} | {
+  iconLeft?: never;
+  iconRight: ButtonIcon;
+};
+export type ButtonProps = {
+  action?: "previous-page";
+  variant?: ButtonVariant;
+  size?: ButtonSize;
+} & ButtonIconProps;
+export declare function Button(props: ButtonProps & React.ComponentProps<typeof Button$1>): React.JSX.Element;
+//#endregion
+export {};

package/dist/web/atom/button.js

@@ -0,0 +1,35 @@
+import { cn } from "../lib/utils.js";
+import { Button as Button$1 } from "../base/button.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/web/atom/button.tsx
+function Button(props) {
+	const { type = "button", onClick, iconLeft: IconLeft, iconRight: IconRight, className, children, action, asChild, ...remain } = props;
+	const innerOnClick = (event) => {
+		onClick?.(event);
+		switch (action) {
+			case "previous-page": window.history.back();
+		}
+	};
+	if (asChild) return /* @__PURE__ */ jsx(Button$1, {
+		asChild: true,
+		className: cn("cursor-pointer", className),
+		onClick: innerOnClick,
+		...remain,
+		children
+	});
+	return /* @__PURE__ */ jsxs(Button$1, {
+		type,
+		className: cn("cursor-pointer", className),
+		onClick: innerOnClick,
+		...remain,
+		children: [
+			IconLeft && /* @__PURE__ */ jsx(IconLeft, { className: "!w-3 !h-3" }),
+			children,
+			IconRight && /* @__PURE__ */ jsx(IconRight, { className: "!w-3 !h-3" })
+		]
+	});
+}
+
+//#endregion
+export { Button };

package/dist/web/atom/checkbox.d.ts

@@ -0,0 +1,19 @@
+import { Checkbox as Checkbox$1 } from "../base/checkbox.js";
+import { ComponentProps, ReactNode } from "react";
+//#region src/web/atom/checkbox.d.ts
+export type CheckboxProps = Omit<ComponentProps<typeof Checkbox$1>, "checked" | "onCheckedChange"> & {
+  /** チェック状態 (制御モード) */
+  checked: boolean;
+  /** 値変更時に呼ばれる */
+  onCheckedChange: (checked: boolean) => void;
+  /** チェックボックスの右に表示するラベル */
+  label?: ReactNode;
+  /** ラッパーの追加クラス */
+  wrapperClassName?: string;
+};
+/**
+ * フォーム文脈に依存しない簡易 Checkbox。
+ * `label` を渡すと右側にクリック可能なラベルが付く。
+ */
+export declare function Checkbox({ checked, onCheckedChange, label, wrapperClassName, id, ...rest }: CheckboxProps): import("react").JSX.Element;
+//#endregion

package/dist/web/atom/checkbox.js

@@ -0,0 +1,33 @@
+import { cn } from "../lib/utils.js";
+import { Checkbox as Checkbox$1 } from "../base/checkbox.js";
+import { Label } from "../base/label.js";
+import { useId } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/web/atom/checkbox.tsx
+/**
+* フォーム文脈に依存しない簡易 Checkbox。
+* `label` を渡すと右側にクリック可能なラベルが付く。
+*/
+function Checkbox({ checked, onCheckedChange, label, wrapperClassName, id, ...rest }) {
+	const generated = useId();
+	const inputId = id ?? generated;
+	const box = /* @__PURE__ */ jsx(Checkbox$1, {
+		id: inputId,
+		checked,
+		onCheckedChange: (c) => onCheckedChange(c === true),
+		...rest
+	});
+	if (label === void 0) return box;
+	return /* @__PURE__ */ jsxs("div", {
+		className: cn("inline-flex items-center gap-1.5", wrapperClassName),
+		children: [box, /* @__PURE__ */ jsx(Label, {
+			htmlFor: inputId,
+			className: "cursor-pointer",
+			children: label
+		})]
+	});
+}
+
+//#endregion
+export { Checkbox };

package/dist/web/atom/colored-value.d.ts

@@ -0,0 +1,13 @@
+import { ColoredValueSharedProps } from "../../shared/analytics.js";
+import { ReactNode } from "react";
+//#region src/web/atom/colored-value.d.ts
+export type ColoredValueProps<TValue> = ColoredValueSharedProps<TValue>;
+/**
+ * 符号で色が変わる数値。native の `atom/colored-value` と同じ API（`shared/analytics.ts`）。
+ * 既定色は Tailwind の固定パレットでなく、トークンの `state-success` / `state-error`（ライト・ダークとも 4.5:1 以上）。
+ * 数値なので等幅（タブラー）で描く。
+ *
+ * **色だけで伝えない。** 増減は `format` で符号（`+` / `−`）を値に含める（色が見えない人にも増減が伝わる）。
+ */
+export declare function ColoredValue<TValue>({ value, format, isPositive, isNegative, positiveColor, negativeColor, className }: ColoredValueProps<TValue>): ReactNode;
+//#endregion

package/dist/web/atom/colored-value.js

@@ -0,0 +1,24 @@
+import { cn } from "../lib/utils.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/web/atom/colored-value.tsx
+/**
+* 符号で色が変わる数値。native の `atom/colored-value` と同じ API（`shared/analytics.ts`）。
+* 既定色は Tailwind の固定パレットでなく、トークンの `state-success` / `state-error`（ライト・ダークとも 4.5:1 以上）。
+* 数値なので等幅（タブラー）で描く。
+*
+* **色だけで伝えない。** 増減は `format` で符号（`+` / `−`）を値に含める（色が見えない人にも増減が伝わる）。
+*/
+function ColoredValue({ value, format, isPositive, isNegative, positiveColor = "text-state-success", negativeColor = "text-state-error", className }) {
+	const formatted = format ? format(value) : String(value);
+	const tone = isPositive?.(value) ? "positive" : isNegative?.(value) ? "negative" : void 0;
+	return /* @__PURE__ */ jsx("span", {
+		"data-slot": "colored-value",
+		"data-tone": tone,
+		className: cn("font-mono tabular-nums", tone === "positive" && positiveColor, tone === "negative" && negativeColor, className),
+		children: formatted
+	});
+}
+
+//#endregion
+export { ColoredValue };

package/dist/web/atom/help.d.ts

@@ -0,0 +1,10 @@
+import React from "react";
+//#region src/web/atom/help.d.ts
+type Props = {
+  children: React.ReactNode;
+  /** トリガーの読み上げ名（アイコンだけの表示なので、名前はここで付ける） */
+  label?: string;
+};
+export declare function Help({ children, label }: Props): React.JSX.Element;
+//#endregion
+export {};

package/dist/web/atom/help.js

@@ -0,0 +1,18 @@
+import { HELP_LABEL } from "../lib/labels.js";
+import { Tooltip, TooltipContent, TooltipTrigger } from "../base/tooltip.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { CircleQuestionMark } from "lucide-react";
+
+//#region src/web/atom/help.tsx
+function Help({ children, label = HELP_LABEL }) {
+	return /* @__PURE__ */ jsxs(Tooltip, { children: [/* @__PURE__ */ jsx(TooltipTrigger, {
+		"aria-label": label,
+		children: /* @__PURE__ */ jsx(CircleQuestionMark, {
+			className: "h-4 w-4",
+			"aria-hidden": true
+		})
+	}), /* @__PURE__ */ jsx(TooltipContent, { children })] });
+}
+
+//#endregion
+export { Help };

package/dist/web/atom/label.d.ts

@@ -0,0 +1,2 @@
+import { Label } from "../base/label.js";
+export { Label };

package/dist/web/atom/label.js

@@ -0,0 +1,3 @@
+import { Label } from "../base/label.js";
+
+export { Label };

package/dist/web/atom/segmented-control.d.ts

@@ -0,0 +1,40 @@
+import { ReactNode } from "react";
+//#region src/web/atom/segmented-control.d.ts
+export type SegmentedOption<T extends string | number> = {
+  value: T;
+  label: ReactNode;
+  disabled?: boolean;
+  /** DEV-E2E: e2e から個々のセグメントを特定するための ID */
+  testId?: string;
+};
+export type SegmentedControlProps<T extends string | number> = {
+  value: T;
+  onValueChange: (value: T) => void;
+  options: SegmentedOption<T>[];
+  /**
+   * - `joined`（既定）… 1 本の枠を共有し、間に 1px の仕切りが入る
+   * - `separate` … 各セグメントが独立した枠を持つ
+   * - `underline` … 枠を持たず、選択中だけ下線が付くタブ
+   * - `solid` … 各セグメントが 1px の枠を持ち、隣と枠を重ねて並ぶ。選択中はインディゴ塗り
+   */
+  variant?: "joined" | "separate" | "underline" | "solid";
+  /** `md` は本文サイズ（16/26・pad 9/16）。 */
+  size?: "xs" | "sm" | "md";
+  /** セグメントを横幅いっぱいに等分する */
+  fill?: boolean;
+  className?: string;
+  "aria-label"?: string;
+};
+/**
+ * 排他選択の横並び（タブ・モード選択・間隔選択・絞り込みの種別）。
+ *
+ * 選択中はインディゴ（action）塗り + 白文字になる（角丸は control の段）。
+ * `role="radiogroup"` を張り、各セグメントに `aria-checked` を付けるので、
+ * 使用側が aria を組み立てる必要はない。
+ *
+ * アプリ側で `.map` して `<button>` に三項の className を当てる形が
+ * 18 箇所書かれていた。仕切り線・選択時の見た目の切り替え・キーボード操作の扱いが
+ * 少しずつ違っていたため、1 つにまとめている。
+ */
+export declare function SegmentedControl<T extends string | number>({ value, onValueChange, options, variant, size, fill, className, "aria-label": ariaLabel }: SegmentedControlProps<T>): import("react").JSX.Element;
+//#endregion