@lt-three/love3 0.1.0 → 0.1.1

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

@@ -2,38 +2,38 @@ import { ChartCommonProps, MultiLineChartSharedProps } from "../../shared/analyt
 import { CSSProperties } from "react";
 //#region src/web/analytics/multi-line-chart.d.ts
 export type MultiLineChartProps = ChartCommonProps & MultiLineChartSharedProps & {
-  /** 外側の要素に渡す style（native の `style: ViewStyle` に当たる）。 */
+  /** Style passed to the outer element (corresponds to native's `style: ViewStyle`). */
   style?: CSSProperties;
   className?: string;
-  /** 凡例を出すか（既定は出す。native の `MultiLineChart` は系列が 1 本でも出す）。 */
+  /** Whether to show the legend (shown by default. Native's `MultiLineChart` shows it even for a single series). */
   legend?: boolean;
   /**
-   * 読み上げ用の隠した表（系列・見出し・値）を出すか（既定は出す）。
-   * 図形の名前（`accessibilityLabel`）だけでは正確な値が読めないので、同じ値を HTML の表でも持つ。
-   * 値は `formatValue` と同じ整形を通す。**1 系列が 60 点を超えるときは、DOM が膨らまないよう等間隔に 60 点へ抜き出し**、
-   * その旨を表の前に一文で添える（全点の正確な値が要るなら、使う側の表や CSV で出す）。
+   * 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;
 };
 /**
- * 複数系列の折れ線。native の `analytics/multi-line-chart` と同じ API（`shared/analytics.ts`）。
- * 描画は `@tanstack/charts`（SVG）。目盛りの罫線は 1px の細い線で、色は `--chart-1〜5`・ツールチップは overlay 面 + 影。
+ * 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.
  *
- * - **数でない点は除く**: `y`（と `t`）が有限でない点（NaN・Infinity）は、組む前に取り除く（読み上げ用の表にも出さず、
- *   除いた件数を表に添える）。全部除かれたら `emptyText`
- * - 全系列が `t` を持つなら **時間で横位置を決める**。持たないものが 1 つでもあれば、系列ごとに並び順で等間隔に置く
- *   （単一系列ならそれでよい。刻みの違う系列を重ねるなら `t` を入れる）。1 点だけの系列は点（dot）で描く
- * - 横軸の目盛りは先頭・中・末の位置の 3 つまで（点が少なければ重ならない数）。**見出しは、先頭の系列の最も近い点のもの**
- *   （時間で置くとき、2 本目以降の系列にしかない時刻は、見出しにならない）。点の位置に置く
- * - 縦軸の目盛りは上・中・下の 3 本。全点が同じ値でも線が潰れないよう、幅ゼロのときだけ上下に逃がす
- * - `formatValue` の既定は、**データの幅に応じた桁数**（0〜1 の値でも目盛りが区別できる）。目盛り・ツールチップ・読み上げの表が
- *   同じ整形を通る。渡すときは **関数の参照を安定させる**（毎回新しい関数だと、描画のたびにチャートを組み直し、ツールチップが閉じる）。
- *   `series` も同じ（親が作り直さない参照を渡す）
- * - ホバー・フォーカスで、その位置の各系列の点の値をツールチップに出す（キーボードでも矢印で移れる）。系列名と色を添える。
- *   **系列の点がある範囲（端は点の間隔の半分まで）の外では、その系列の行を出さない**（遠い点の値を、その位置の値のように見せない）。
- *   点の見出しがタイトルと違うときは、行に添える
- * - 読み上げ: 図形は `role="img"` で、`accessibilityLabel`（要約）が名前。正確な値は隠した表でも持つ（`table`）
- * - **色だけで系列を見分けさせない**: 凡例に系列名があり、副系列は破線にできる
+ * - **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

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

@@ -1,6 +1,6 @@
+import { cn } from "../lib/utils.js";
 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";
@@ -10,7 +10,7 @@ import { tooltip } from "@tanstack/charts/tooltip";
 
 //#region src/web/analytics/multi-line-chart.tsx
 const DEFAULT_HEIGHT = 220;
-/** 読み上げ用の表に出す、1 系列あたりの行数の上限。 */
+/** The maximum number of rows per series in the table for screen readers. */
 const MAX_TABLE_ROWS_PER_SERIES = 60;
 const THEME = {
 	foreground: "var(--foreground)",
@@ -25,21 +25,21 @@ const THEME = {
 		"var(--chart-5)"
 	]
 };
-/** 罫線は 1px の細い線（`--line`）。ライブラリの既定の不透明度 0.11 は掛けず、トークンの色のまま出す。 */
+/** Grid lines are thin 1px lines (`--line`). The library's default opacity of 0.11 is not applied, and the token colour is used as is. */
 const GRID_LINE = {
 	stroke: "var(--line)",
 	strokeOpacity: 1,
 	strokeWidth: 1
 };
-/** 軸の基線は罫線より 1 段濃い（`--line-strong`）。 */
+/** The axis baseline is one step darker than the grid lines (`--line-strong`). */
 const AXIS_LINE = {
 	stroke: "var(--line-strong)",
 	strokeOpacity: 1,
 	strokeWidth: 1
 };
-/** 目盛りの文字を薄めない（既定は 0.68）。 */
+/** Do not fade tick label text (the default is 0.68). */
 const TICK_LABELS = { opacity: 1 };
-/** キーボードで図形（`svg tabindex=0`）に入ったときのフォーカスは、他の部品と同じ不透明の ring（低アルファは使わない。余白 2px）。 */
+/** Focus when entering the figure (`svg tabindex=0`) by keyboard is the same opaque ring as other components (no low alpha; 2px offset). */
 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)",
@@ -51,24 +51,24 @@ const TOOLTIP_VARS = cssVars({
 	"--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 面 + 影。
+* 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.
 *
-* - **数でない点は除く**: `y`（と `t`）が有限でない点（NaN・Infinity）は、組む前に取り除く（読み上げ用の表にも出さず、
-*   除いた件数を表に添える）。全部除かれたら `emptyText`
-* - 全系列が `t` を持つなら **時間で横位置を決める**。持たないものが 1 つでもあれば、系列ごとに並び順で等間隔に置く
-*   （単一系列ならそれでよい。刻みの違う系列を重ねるなら `t` を入れる）。1 点だけの系列は点（dot）で描く
-* - 横軸の目盛りは先頭・中・末の位置の 3 つまで（点が少なければ重ならない数）。**見出しは、先頭の系列の最も近い点のもの**
-*   （時間で置くとき、2 本目以降の系列にしかない時刻は、見出しにならない）。点の位置に置く
-* - 縦軸の目盛りは上・中・下の 3 本。全点が同じ値でも線が潰れないよう、幅ゼロのときだけ上下に逃がす
-* - `formatValue` の既定は、**データの幅に応じた桁数**（0〜1 の値でも目盛りが区別できる）。目盛り・ツールチップ・読み上げの表が
-*   同じ整形を通る。渡すときは **関数の参照を安定させる**（毎回新しい関数だと、描画のたびにチャートを組み直し、ツールチップが閉じる）。
-*   `series` も同じ（親が作り直さない参照を渡す）
-* - ホバー・フォーカスで、その位置の各系列の点の値をツールチップに出す（キーボードでも矢印で移れる）。系列名と色を添える。
-*   **系列の点がある範囲（端は点の間隔の半分まで）の外では、その系列の行を出さない**（遠い点の値を、その位置の値のように見せない）。
-*   点の見出しがタイトルと違うときは、行に添える
-* - 読み上げ: 図形は `role="img"` で、`accessibilityLabel`（要約）が名前。正確な値は隠した表でも持つ（`table`）
-* - **色だけで系列を見分けさせない**: 凡例に系列名があり、副系列は破線にできる
+* - **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
 */
 function MultiLineChart({ series, height = DEFAULT_HEIGHT, formatValue, emptyText = LINE_CHART_EMPTY_TEXT, accessibilityLabel, style, className, legend = true, table = true }) {
 	const label = accessibilityLabel ?? defaultLabel(series);
@@ -119,19 +119,19 @@ function MultiLineChart({ series, height = DEFAULT_HEIGHT, formatValue, emptyTex
 		]
 	});
 }
-/** 要約が無いときの名前。系列の名前を並べる。 */
+/** The name when there is no summary. It lists the series names. */
 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` 件へ抜き出す（先頭と末尾は必ず残す）。 */
+/** Samples at even intervals down to at most `limit` items (the first and the last are always kept). */
 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）。値は図形の目盛りと同じ整形を通す。 */
+/** The table hidden for screen readers. It is not shown on screen (sr-only). Values go through the same formatting as the figure's ticks. */
 function DataTable({ caption, model }) {
 	const total = model.series.reduce((sum, entry) => sum + entry.points.length, 0);
 	const shownSeries = model.series.map((entry) => ({
@@ -173,7 +173,7 @@ function DataTable({ caption, model }) {
 		]
 	});
 }
-/** `y`（と `t`）が有限の点だけを描く。NaN・Infinity は、スケールを壊すので組む前に除く。 */
+/** Draws only points whose `y` (and `t`) are finite. NaN and Infinity break the scale, so they are dropped before building. */
 function isUsable(point) {
 	return Number.isFinite(point.y) && (point.t === void 0 || Number.isFinite(point.t));
 }
@@ -194,18 +194,18 @@ function buildModel(series, formatValue) {
 		format: built.format
 	};
 }
-/** 位置にいちばん近い点。 */
+/** The point nearest to a position. */
 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` を持つなら時間で置く。 */
+/** When every series has `t`, place by time. */
 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 に）。 */
+/** The horizontal position of a point (by time when there is time, otherwise its order within the series, mapped to 0 to 1). */
 function positionOf(timed, index, count, point) {
 	if (timed && point.t !== void 0) return point.t;
 	return count === 1 ? .5 : index / (count - 1);
@@ -220,15 +220,15 @@ function extent(values) {
 	return [min, max];
 }
 /**
-* 既定の整形。目盛りの間隔（上・中・下の 3 本なので幅の半分）が見分けられる桁数に、もう 1 桁足す（0〜6 桁）。
-* 0〜1 の値は 2 桁、100 以上の幅なら整数。ツールチップ・読み上げの表も同じ整形にする。
+* The default formatting. It takes the number of digits that lets the tick spacing (half the range, since there are three ticks, top, middle and bottom) be told apart, and adds one more digit (0 to 6 digits).
+* Values from 0 to 1 get 2 digits, and a range of 100 or more gives integers. The tooltip and the table for screen readers use the same formatting.
 */
 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%）。 */
+/** How far outside a series' point range its row is still shown (half the point spacing; for a single point, 2% of the x-axis width). */
 function reachOf(entry, domainWidth) {
 	if (entry.length < 2) return domainWidth * .02;
 	const [min, max] = extent(entry.map((row) => row.x));

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

@@ -2,7 +2,7 @@ import React from "react";
 //#region src/web/atom/avatar.d.ts
 export type AvatarProps = {
   src?: string;
-  /** 画像の代替テキスト。既定は空（飾り。隣に名前が出ている前提）。名前の無い単独の顔なら、人の名前を渡す */
+  /** Alt text for the image. Empty by default (decorative; assumes the name is shown next to it). For a standalone face with no name, pass the person's name */
   alt?: string;
   fallback?: React.ReactNode;
   className?: string;

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

@@ -2,18 +2,18 @@ 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 state (controlled mode) */
   checked: boolean;
-  /** 値変更時に呼ばれる */
+  /** Called when the value changes */
   onCheckedChange: (checked: boolean) => void;
-  /** チェックボックスの右に表示するラベル */
+  /** Label shown to the right of the checkbox */
   label?: ReactNode;
-  /** ラッパーの追加クラス */
+  /** Extra class for the wrapper */
   wrapperClassName?: string;
 };
 /**
- * フォーム文脈に依存しない簡易 Checkbox。
- * `label` を渡すと右側にクリック可能なラベルが付く。
+ * A simple Checkbox that does not depend on a form context.
+ * Passing `label` adds a clickable label on the right.
  */
 export declare function Checkbox({ checked, onCheckedChange, label, wrapperClassName, id, ...rest }: CheckboxProps): import("react").JSX.Element;
 //#endregion

package/dist/web/atom/checkbox.js

@@ -6,8 +6,8 @@ import { jsx, jsxs } from "react/jsx-runtime";
 
 //#region src/web/atom/checkbox.tsx
 /**
-* フォーム文脈に依存しない簡易 Checkbox。
-* `label` を渡すと右側にクリック可能なラベルが付く。
+* A simple Checkbox that does not depend on a form context.
+* Passing `label` adds a clickable label on the right.
 */
 function Checkbox({ checked, onCheckedChange, label, wrapperClassName, id, ...rest }) {
 	const generated = useId();

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

@@ -3,11 +3,11 @@ 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 以上）。
- * 数値なので等幅（タブラー）で描く。
+ * A number whose colour changes with its sign. Same API as native's `atom/colored-value` (`shared/analytics.ts`).
+ * The default colours are the tokens `state-success` / `state-error` (4.5:1 or more in light and dark), not a fixed Tailwind palette.
+ * It is a number, so it is drawn monospaced (tabular).
  *
- * **色だけで伝えない。** 増減は `format` で符号（`+` / `−`）を値に含める（色が見えない人にも増減が伝わる）。
+ * **Do not convey meaning by colour alone.** `format` puts the sign (`+` / `−`) into the value, so the direction is clear even to people who cannot see the colour.
  */
 export declare function ColoredValue<TValue>({ value, format, isPositive, isNegative, positiveColor, negativeColor, className }: ColoredValueProps<TValue>): ReactNode;
 //#endregion

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

@@ -3,11 +3,11 @@ 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 以上）。
-* 数値なので等幅（タブラー）で描く。
+* A number whose colour changes with its sign. Same API as native's `atom/colored-value` (`shared/analytics.ts`).
+* The default colours are the tokens `state-success` / `state-error` (4.5:1 or more in light and dark), not a fixed Tailwind palette.
+* It is a number, so it is drawn monospaced (tabular).
 *
-* **色だけで伝えない。** 増減は `format` で符号（`+` / `−`）を値に含める（色が見えない人にも増減が伝わる）。
+* **Do not convey meaning by colour alone.** `format` puts the sign (`+` / `−`) into the value, so the direction is clear even to people who cannot see the colour.
 */
 function ColoredValue({ value, format, isPositive, isNegative, positiveColor = "text-state-success", negativeColor = "text-state-error", className }) {
 	const formatted = format ? format(value) : String(value);

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

@@ -2,7 +2,7 @@ import React from "react";
 //#region src/web/atom/help.d.ts
 type Props = {
   children: React.ReactNode;
-  /** トリガーの読み上げ名（アイコンだけの表示なので、名前はここで付ける） */
+  /** Accessible name of the trigger (it is shown as an icon only, so the name is given here) */
   label?: string;
 };
 export declare function Help({ children, label }: Props): React.JSX.Element;

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

@@ -4,7 +4,7 @@ export type SegmentedOption<T extends string | number> = {
   value: T;
   label: ReactNode;
   disabled?: boolean;
-  /** DEV-E2E: e2e から個々のセグメントを特定するための ID */
+  /** DEV-E2E: ID used by e2e to identify individual segments */
   testId?: string;
 };
 export type SegmentedControlProps<T extends string | number> = {
@@ -12,29 +12,28 @@ export type SegmentedControlProps<T extends string | number> = {
   onValueChange: (value: T) => void;
   options: SegmentedOption<T>[];
   /**
-   * - `joined`（既定）… 1 本の枠を共有し、間に 1px の仕切りが入る
-   * - `separate` … 各セグメントが独立した枠を持つ
-   * - `underline` … 枠を持たず、選択中だけ下線が付くタブ
-   * - `solid` … 各セグメントが 1px の枠を持ち、隣と枠を重ねて並ぶ。選択中はインディゴ塗り
+   * - `joined` (default) ... share a single border, with a 1px divider between segments
+   * - `separate` ... each segment has its own independent border
+   * - `underline` ... no border; tabs where only the selected one gets an underline
+   * - `solid` ... each segment has a 1px border and the borders overlap with neighbours. The selected one is filled with indigo
    */
   variant?: "joined" | "separate" | "underline" | "solid";
-  /** `md` は本文サイズ（16/26・pad 9/16）。 */
+  /** `md` is the body size (16/26, pad 9/16). */
   size?: "xs" | "sm" | "md";
-  /** セグメントを横幅いっぱいに等分する */
+  /** Divide the full width equally among the segments */
   fill?: boolean;
   className?: string;
   "aria-label"?: string;
 };
 /**
- * 排他選択の横並び（タブ・モード選択・間隔選択・絞り込みの種別）。
+ * Horizontal exclusive selection (tabs, mode picker, interval picker, filter kinds).
  *
- * 選択中はインディゴ（action）塗り + 白文字になる（角丸は control の段）。
- * `role="radiogroup"` を張り、各セグメントに `aria-checked` を付けるので、
- * 使用側が aria を組み立てる必要はない。
+ * The selected segment gets the indigo (action) fill with white text (corner radius is the control step).
+ * It sets `role="radiogroup"` and `aria-checked` on each segment, so callers
+ * do not have to assemble aria themselves.
  *
- * アプリ側で `.map` して `<button>` に三項の className を当てる形が
- * 18 箇所書かれていた。仕切り線・選択時の見た目の切り替え・キーボード操作の扱いが
- * 少しずつ違っていたため、1 つにまとめている。
+ * Hand-rolled versions (`.map` over `<button>` with a ternary className) tend to drift in
+ * dividers, selected-state styling and keyboard handling, so they are consolidated here.
  */
 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

package/dist/web/atom/segmented-control.js

@@ -8,15 +8,14 @@ const SIZE = {
 	md: "px-4 py-[9px] text-base leading-[26px]"
 };
 /**
-* 排他選択の横並び（タブ・モード選択・間隔選択・絞り込みの種別）。
+* Horizontal exclusive selection (tabs, mode picker, interval picker, filter kinds).
 *
-* 選択中はインディゴ（action）塗り + 白文字になる（角丸は control の段）。
-* `role="radiogroup"` を張り、各セグメントに `aria-checked` を付けるので、
-* 使用側が aria を組み立てる必要はない。
+* The selected segment gets the indigo (action) fill with white text (corner radius is the control step).
+* It sets `role="radiogroup"` and `aria-checked` on each segment, so callers
+* do not have to assemble aria themselves.
 *
-* アプリ側で `.map` して `<button>` に三項の className を当てる形が
-* 18 箇所書かれていた。仕切り線・選択時の見た目の切り替え・キーボード操作の扱いが
-* 少しずつ違っていたため、1 つにまとめている。
+* Hand-rolled versions (`.map` over `<button>` with a ternary className) tend to drift in
+* dividers, selected-state styling and keyboard handling, so they are consolidated here.
 */
 function SegmentedControl({ value, onValueChange, options, variant = "joined", size = "sm", fill, className, "aria-label": ariaLabel }) {
 	return /* @__PURE__ */ jsx("div", {

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

@@ -4,7 +4,7 @@ import { ComponentProps, ReactNode } from "react";
 export type SelectOption = {
   value: string;
   label: ReactNode;
-  /** テキスト検索用（label が ReactNode の場合に指定） */
+  /** For text search (specify when label is a ReactNode) */
   textValue?: string;
 };
 export type SelectOptionGroup = {
@@ -24,19 +24,19 @@ export type SelectProps = {
   wrapperClassName?: string;
   disabled?: boolean;
   size?: "xs" | "sm" | "default";
-  /** open 状態の制御 (インライン編集など) */
+  /** Controls the open state (inline editing, etc.) */
   open?: boolean;
   onOpenChange?: (open: boolean) => void;
-  /** Trigger 直接の DOM プロパティ (autoFocus・onBlur 等) */
+  /** DOM props passed straight to the Trigger (autoFocus, onBlur, etc.) */
   triggerProps?: ComponentProps<typeof SelectTrigger>;
-  /** form 側でエラーを差し込むためのスロット */
+  /** Slot for the form side to insert an error */
   errorSlot?: ReactNode;
   invalid?: boolean;
-  /** DEV-E2E: e2e からトリガーボタンを特定するための ID */
+  /** DEV-E2E: ID used by e2e to identify the trigger button */
   "data-testid"?: string;
-  /** トリガーの DOM id。外側の `<label htmlFor>` と対応付けるときに使う。 */
+  /** DOM id of the trigger. Use it to pair with an outer `<label htmlFor>`. */
   id?: string;
-  /** 可視ラベルが無いときのアクセシブル名。`label` を渡す場合は不要。 */
+  /** Accessible name when there is no visible label. Not needed when `label` is passed. */
   "aria-label"?: string;
 };
 export declare function Select({ value, onValueChange, options, placeholder, label, required, description, helpText, className, wrapperClassName, disabled, size, open, onOpenChange, triggerProps, errorSlot, invalid, id, "aria-label": ariaLabel, "data-testid": testId }: SelectProps): import("react").JSX.Element;

package/dist/web/atom/select.js

@@ -7,12 +7,12 @@ import { jsx, jsxs } from "react/jsx-runtime";
 //#region src/web/atom/select.tsx
 const EMPTY_SENTINEL = "__atom_select_empty__";
 /**
-* `""` を「選択肢としての空」ではなく「まだ選んでいない」として扱ってよいか。
+* Whether `""` may be treated as "not selected yet" rather than "an empty choice".
 *
-* センチネルに置き換えると Radix は**値が選ばれている**と解釈するため、
-* `<SelectValue placeholder>` が一切描画されない（選択肢に無い値なので中身も空になり、
-* トリガーが**無言で空のボタン**になる）。空の選択肢を持たないときは、
-* placeholder を自分で描いて「未選択」と分かる形にする。
+* When it is replaced by the sentinel, Radix interprets it as **a value is selected**, so
+* `<SelectValue placeholder>` is not rendered at all (the value is not among the options, so the
+* content is empty too, and the trigger becomes a **silently empty button**). When there is no
+* empty option, draw the placeholder yourself so that it reads as "not selected".
 */
 function hasEmptyOption(options) {
 	return options.some((o) => isOptionGroup(o) ? o.options.some((x) => x.value === "") : o.value === "");

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

@@ -14,7 +14,7 @@ type CommonProps = {
   min?: number;
   max: number;
   step?: number;
-  /** 値の右側に表示する整形済み文字列。指定が無ければ生の数値（範囲時は ` / ` 区切り）を表示 */
+  /** Formatted string shown to the right of the value. If not given, the raw number is shown (a range is separated by ` / `) */
   formattedValue?: ReactNode;
 } & Omit<ComponentProps<typeof Slider$1>, "value" | "onValueChange" | "defaultValue" | "min" | "max" | "step" | "disabled" | "className">;
 export type SliderProps = ({
@@ -25,8 +25,8 @@ export type SliderProps = ({
   onValueChange: (value: number[]) => void;
 } & CommonProps);
 /**
- * 制御専用の Slider。単一値 (`number`) と範囲 (`number[]`) の両方を許容する。
- * Radix Slider は内部的に `number[]` で扱うため、`number` 入力時はランタイムで配列化する。
+ * A controlled-only Slider. Accepts both a single value (`number`) and a range (`number[]`).
+ * Radix Slider handles `number[]` internally, so a `number` input is turned into an array at runtime.
  */
 export declare function Slider(props: SliderProps): import("react").JSX.Element;
 //#endregion

package/dist/web/atom/slider.js

@@ -9,8 +9,8 @@ function isRange(props) {
 	return Array.isArray(props.value);
 }
 /**
-* 制御専用の Slider。単一値 (`number`) と範囲 (`number[]`) の両方を許容する。
-* Radix Slider は内部的に `number[]` で扱うため、`number` 入力時はランタイムで配列化する。
+* A controlled-only Slider. Accepts both a single value (`number`) and a range (`number[]`).
+* Radix Slider handles `number[]` internally, so a `number` input is turned into an array at runtime.
 */
 function Slider(props) {
 	const { label, required, description, helpText, className, wrapperClassName, errorSlot, invalid, "aria-invalid": ariaInvalid, min, max, step, disabled, formattedValue, value, onValueChange: _onValueChange, ...rest } = props;

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

@@ -2,9 +2,9 @@ import { Switch as Switch$1 } from "../base/switch.js";
 import { ComponentProps } from "react";
 //#region src/web/atom/switch.d.ts
 /**
- * フォーム外で使える制御モードの Switch。
- * `form/switch.tsx` は TanStack Form の field context に依存するため、
- * 単独の ON/OFF トグルにはこちらを使う。
+ * A controlled Switch that works outside a form.
+ * `form/switch.tsx` depends on TanStack Form's field context,
+ * so use this one for a standalone ON/OFF toggle.
  */
 export type SwitchProps = ComponentProps<typeof Switch$1>;
 export declare function Switch(props: SwitchProps): import("react").JSX.Element;

package/dist/web/atom/text-area.d.ts

@@ -7,16 +7,17 @@ export type TextAreaProps = Omit<ComponentProps<"textarea">, "value" | "onChange
   onValueChange: (value: string) => void;
 };
 /**
- * 素の複数行入力。TanStack Form を使わない画面（設定・小さな編集欄・読み取り専用の
- * 書き出し）から直接使う。`base/textarea` はアプリから直接 import しない決まりなので、
- * その入口を担う。`atom/text-field` の複数行版。
+ * A plain multi-line input. Use it directly from screens that do not use TanStack Form
+ * (settings, small edit fields, read-only output). Apps are expected not to import
+ * `base/textarea` directly, so this is the entry point for it. A multi-line version
+ * of `atom/text-field`.
  *
- * variant は `atom/text-field` と揃えてある:
- *   default … 1px の枠を持つ欄
- *   `<3`    … 既存の行に添える下線だけの欄
- *   block   … 枠を持たず本文に見える欄（常時編集できる行）
+ * The variants match `atom/text-field`:
+ *   default ... a field with a 1px border
+ *   `<3`    ... an underline-only field that attaches to an existing row
+ *   block   ... a field with no border that reads as body text (an always-editable row)
  *
- * フォーム統合が要るときは `form/text-area`（同じ `base/textarea` を内側で使っている）。
+ * When you need form integration, use `form/text-area` (it uses the same `base/textarea` inside).
  */
 export declare function TextArea({ value, onValueChange, ...props }: TextAreaProps): import("react").JSX.Element;
 //#endregion

package/dist/web/atom/text-area.js

@@ -3,16 +3,17 @@ import { jsx } from "react/jsx-runtime";
 
 //#region src/web/atom/text-area.tsx
 /**
-* 素の複数行入力。TanStack Form を使わない画面（設定・小さな編集欄・読み取り専用の
-* 書き出し）から直接使う。`base/textarea` はアプリから直接 import しない決まりなので、
-* その入口を担う。`atom/text-field` の複数行版。
+* A plain multi-line input. Use it directly from screens that do not use TanStack Form
+* (settings, small edit fields, read-only output). Apps are expected not to import
+* `base/textarea` directly, so this is the entry point for it. A multi-line version
+* of `atom/text-field`.
 *
-* variant は `atom/text-field` と揃えてある:
-*   default … 1px の枠を持つ欄
-*   `<3`    … 既存の行に添える下線だけの欄
-*   block   … 枠を持たず本文に見える欄（常時編集できる行）
+* The variants match `atom/text-field`:
+*   default ... a field with a 1px border
+*   `<3`    ... an underline-only field that attaches to an existing row
+*   block   ... a field with no border that reads as body text (an always-editable row)
 *
-* フォーム統合が要るときは `form/text-area`（同じ `base/textarea` を内側で使っている）。
+* When you need form integration, use `form/text-area` (it uses the same `base/textarea` inside).
 */
 function TextArea({ value, onValueChange, ...props }) {
 	return /* @__PURE__ */ jsx(Textarea, {

package/dist/web/atom/text-field.d.ts

@@ -7,11 +7,12 @@ export type TextFieldProps = Omit<ComponentProps<"input">, "value" | "onChange">
   onValueChange: (value: string) => void;
 };
 /**
- * 素のテキスト入力。TanStack Form を使わない画面（設定・検索条件・小さな編集欄）から
- * 直接使う。`base/input` はアプリから直接 import しない決まりなので、その入口を担う。
+ * A plain text input. Use it directly from screens that do not use TanStack Form
+ * (settings, search filters, small edit fields). Apps are expected not to import
+ * `base/input` directly, so this is the entry point for it.
  *
- * フォーム統合が要るときは `form/text-input`（同じ `base/input` を内側で使っている）。
- * native の `atom/text-field` と対になる。
+ * When you need form integration, use `form/text-input` (it uses the same `base/input` inside).
+ * It pairs with native's `atom/text-field`.
  */
 export declare function TextField({ value, onValueChange, ...props }: TextFieldProps): import("react").JSX.Element;
 //#endregion

package/dist/web/atom/text-field.js

@@ -3,11 +3,12 @@ import { jsx } from "react/jsx-runtime";
 
 //#region src/web/atom/text-field.tsx
 /**
-* 素のテキスト入力。TanStack Form を使わない画面（設定・検索条件・小さな編集欄）から
-* 直接使う。`base/input` はアプリから直接 import しない決まりなので、その入口を担う。
+* A plain text input. Use it directly from screens that do not use TanStack Form
+* (settings, search filters, small edit fields). Apps are expected not to import
+* `base/input` directly, so this is the entry point for it.
 *
-* フォーム統合が要るときは `form/text-input`（同じ `base/input` を内側で使っている）。
-* native の `atom/text-field` と対になる。
+* When you need form integration, use `form/text-input` (it uses the same `base/input` inside).
+* It pairs with native's `atom/text-field`.
 */
 function TextField({ value, onValueChange, ...props }) {
 	return /* @__PURE__ */ jsx(Input, {