@lt-three/love3 0.1.0 → 0.1.1

package/dist/tokens/styles.gen.css

@@ -1,68 +1,68 @@
 /*
- * このファイルは生成物。直接編集しない。
- * ソース: design/love3/src/tokens/definition.ts
- * 再生成: bun run generate（design/love3 で）
+ * This file is generated. Do not edit it directly.
+ * Source: src/tokens/definition.ts
+ * Regenerate: bun run generate
  */
 
 @custom-variant dark (&:is(.dark *));
 
 :root {
   /*
-   * 生トークン: 文字のランプと、背景の階層
-   * 文字は 3 段（主 = ink-900 / 副 = ink-700 / 補助 = ink-500）。背景は frame ＜ paper ＜ raised ＜ overlay の順に「手前」になる。
-   * ダークは別パレットではなくロールの反転で、純黒でなく青みのある near-black の階層にする。
+   * Raw tokens: text ramp and background layers
+   * Text has 3 levels (primary = ink-900 / secondary = ink-700 / tertiary = ink-500). Backgrounds come "forward" in the order frame < paper < raised < overlay.
+   * Dark is not a separate palette but an inversion of the roles, built as layers of bluish near-black rather than pure black.
    */
-  --ink-1000: #0f1012; /* 最も強い文字 */
-  --ink-900: #1b1c20; /* 見出し・主要テキスト */
-  --ink-700: #40434a; /* 本文（副） */
-  --ink-500: #676b74; /* 補助・ミュート、プレースホルダ */
-  --ink-300: #a3a6ad; /* 無効、薄いラベル */
-  --line: #e6e7eb; /* 1px の極薄の枠・区切り線 */
-  --line-strong: #d5d7dd; /* テキスト入力の枠・強めの枠（3:1 には届かない既知の例外。操作部品の枠は line-control） */
-  --line-control: #80858f; /* 未選択の Checkbox / Radio / Switch の枠。どの面の上でも 3:1 以上（非テキストの AA） */
-  --frame: #f4f5f7; /* 外枠・サイドバー・ページのキャンバス */
-  --paper: #ffffff; /* 本文パネル（基本背景） */
-  --raised: #ffffff; /* カード・入力・secondary ボタンの面 */
-  --overlay: #ffffff; /* ポップオーバー・ダイアログ・メニュー */
-  --wash: #f1f2f4; /* hover・zebra 用の淡い面 */
-  --scrim: rgba(0, 0, 0, 0.32); /* モーダルのスクリム。ブラー無し */
-  --shadow-color: rgba(16, 24, 40, 0.1); /* 影の色。shadow-xs〜2xl が参照する */
+  --ink-1000: #0f1012; /* Strongest text */
+  --ink-900: #1b1c20; /* Headings and primary text */
+  --ink-700: #40434a; /* Body text (secondary) */
+  --ink-500: #676b74; /* Tertiary, muted, placeholder */
+  --ink-300: #a3a6ad; /* Disabled, faint labels */
+  --line: #e6e7eb; /* 1px hairline border and divider */
+  --line-strong: #d5d7dd; /* Border of text inputs and stronger borders (a known exception that does not reach 3:1; borders of interactive controls use line-control) */
+  --line-control: #80858f; /* Border of unselected Checkbox / Radio / Switch. At least 3:1 on every surface (non-text AA) */
+  --frame: #f4f5f7; /* Outer frame, sidebar, page canvas */
+  --paper: #ffffff; /* Main content panel (base background) */
+  --raised: #ffffff; /* Surface of cards, inputs and secondary buttons */
+  --overlay: #ffffff; /* Popovers, dialogs, menus */
+  --wash: #f1f2f4; /* Light surface for hover and zebra rows */
+  --scrim: rgba(0, 0, 0, 0.32); /* Modal scrim. No blur */
+  --shadow-color: rgba(16, 24, 40, 0.1); /* Shadow color. Referenced by shadow-xs to shadow-2xl */
 
   /*
-   * 主操作の色（インディゴ）
-   * 主操作・フォーカス・選択状態に使う落ち着いたインディゴ。ライト・ダークで同じ値。
-   * 塗り（action）の上の文字は action-foreground（白）。暗い面の上に action を「文字・リンク」として置くと AA に届かないので、
-   * 文字には action-ink を使う。hover は塗りを少し深くする（白文字の AA を保つ）。
+   * Primary action color (indigo)
+   * A calm indigo for the primary action, focus and selected states. The same value in light and dark.
+   * Text on the fill (action) is action-foreground (white). Placing action as "text or link" on a dark surface does not reach AA,
+   * so use action-ink for text. Hover deepens the fill slightly (keeping AA for white text).
    */
-  --action: #5e6ad2; /* 主操作の塗り・ring */
-  --action-hover: #5059c2; /* 主操作の hover */
+  --action: #5e6ad2; /* Fill of the primary action, and the ring */
+  --action-hover: #5059c2; /* Hover of the primary action */
   --action-foreground: #ffffff;
-  --action-ink: #4a55c0; /* 文字・リンクとして置くインディゴ */
+  --action-ink: #4a55c0; /* Indigo used as text or a link */
 
   /*
-   * ブランド色（<3 / Less Than Three）
-   * インディゴの外にあるブランド色で、`<3` variant を持つコンポーネントだけが使う。
-   * 文字は黒（白は 2.98:1 で AA に届かず、黒なら余裕で超える）。ダークでも反転させない。
+   * Brand color (<3 / Less Than Three)
+   * A brand color outside the indigo, used only by components that have a `<3` variant.
+   * Text on it is black (white is 2.98:1 and misses AA, while black clears it easily). Not inverted in dark.
    */
   --lt-three: #ff5c76;
   --lt-three-foreground: #000000;
 
   /*
-   * セマンティック状態
-   * 文字・枠・小アイコンに使い、バッジやアラートでは `bg-state-xxx/10` 程度の淡い塗りも使える。
-   * ソリッドの塗りは破壊的操作の主操作（destructive-solid）だけ。ダークは near-black 上で読めるよう明るくする。
+   * Semantic states
+   * Used for text, borders and small icons; badges and alerts can also use a light fill such as `bg-state-xxx/10`.
+   * A solid fill is only for the primary action of a destructive operation (destructive-solid). In dark they are brightened to stay readable on near-black.
    */
   --state-success: #187548;
   --state-error: #c42b3a;
   --state-warning: #8f5f00;
-  --destructive-solid: #c42b3a; /* 破壊的操作の塗り（ソリッド）。上の文字は destructive-solid-foreground（白）。state-error は文字用で、暗い面では明るく、塗りには向かない */
+  --destructive-solid: #c42b3a; /* Fill (solid) of a destructive action. Text on it is destructive-solid-foreground (white). state-error is for text: it is bright on dark surfaces and not suited to a fill */
   --destructive-solid-foreground: #ffffff;
 
   /*
-   * 書体
-   * 欧文は Geist、数字・ID・コード・データテーブルは Geist Mono、和文は OS 同梱の游ゴシック。
-   * --font-geist に generic (sans-serif) を含めない（含めると合成スタックで和文フォールバックより前に generic が現れ、和文が游ゴシックに届かなくなる）。
-   * フォント実体の読み込みはプラットフォームごとに行う（web は woff2、native は expo-font で ttf）。
+   * Typefaces
+   * Geist for Latin text, Geist Mono for numbers, IDs, code and data tables, and the OS-bundled Yu Gothic for Japanese text.
+   * Do not put a generic family (sans-serif) in --font-geist: it would appear in the composed stack before the Japanese fallback, and Japanese text would never reach Yu Gothic.
+   * Load the font files per platform (woff2 on web, ttf via expo-font on native).
    */
   --font-geist: "Geist Variable", "Geist";
   --font-geist-mono: "Geist Mono Variable", "Geist Mono", ui-monospace, monospace;
@@ -70,35 +70,35 @@
   --font-mono: var(--font-geist-mono);
 
   /*
-   * セマンティックトークン（shadcn 互換のエイリアス）
-   * 生トークンを var() で参照するので、生トークンを差し替えるだけで体系全体（ダーク含む）が連動する。
+   * Semantic tokens (shadcn-compatible aliases)
+   * They reference the raw tokens with var(), so swapping only the raw tokens moves the whole system (dark included).
    */
-  --background: var(--paper); /* 本文パネル */
+  --background: var(--paper); /* Main content panel */
   --foreground: var(--ink-900);
-  --card: var(--raised); /* カードは raised 面 + 薄い枠（影なし） */
+  --card: var(--raised); /* Cards are a raised surface plus a thin border (no shadow) */
   --card-foreground: var(--ink-900);
-  --popover: var(--overlay); /* 浮くもの（ポップオーバー・メニュー・ダイアログ） */
+  --popover: var(--overlay); /* Floating things (popovers, menus, dialogs) */
   --popover-foreground: var(--ink-900);
-  --primary: var(--action); /* 主操作のインディゴ塗り（web・native 共通） */
+  --primary: var(--action); /* Indigo fill of the primary action (shared by web and native) */
   --primary-foreground: var(--action-foreground);
-  --secondary: var(--wash); /* secondary・accent・muted は wash */
+  --secondary: var(--wash); /* secondary, accent and muted are wash */
   --secondary-foreground: var(--ink-900);
   --muted: var(--wash);
   --muted-foreground: var(--ink-500);
   --accent: var(--wash);
   --accent-foreground: var(--ink-900);
-  --destructive: var(--state-error); /* native が使う（文字・枠の state-error）。web の破壊的操作の塗りは destructive-solid */
+  --destructive: var(--state-error); /* Used by native (state-error for text and borders). The fill of a destructive action on web is destructive-solid */
   --destructive-foreground: var(--paper);
   --border: var(--line);
   --input: var(--line-strong);
-  --ring: var(--action); /* フォーカスはインディゴのリング */
-  --chart-1: #5e6ad2; /* チャートは色を使う。ダークでも読める 5 色 */
+  --ring: var(--action); /* Focus is an indigo ring */
+  --chart-1: #5e6ad2; /* Charts use color. Five colors that stay readable in dark */
   --chart-2: #1f9d6a;
   --chart-3: #bd7100;
   --chart-4: #d6495c;
   --chart-5: #7a8194;
-  --section: var(--frame); /* ページ・ブロックのキャンバス */
-  --radius: 6px; /* shadcn 互換の基準の角丸。control（6px）と同じ値 */
+  --section: var(--frame); /* Canvas of pages and blocks */
+  --radius: 6px; /* The shadcn-compatible base radius. Same value as control (6px) */
   --sidebar: var(--frame);
   --sidebar-foreground: var(--ink-900);
   --sidebar-primary: var(--action);
@@ -110,27 +110,27 @@
 }
 
 .dark {
-  --ink-1000: #f7f8f8; /* 最も強い文字 */
-  --ink-900: #eceef0; /* 見出し・主要テキスト */
-  --ink-700: #cfd3da; /* 本文（副） */
-  --ink-500: #8a8f98; /* 補助・ミュート、プレースホルダ */
-  --ink-300: #5b5f67; /* 無効、薄いラベル */
-  --line: #25272c; /* 1px の極薄の枠・区切り線 */
-  --line-strong: #34363d; /* テキスト入力の枠・強めの枠（3:1 には届かない既知の例外。操作部品の枠は line-control） */
-  --line-control: #6b707a; /* 未選択の Checkbox / Radio / Switch の枠。どの面の上でも 3:1 以上（非テキストの AA） */
-  --frame: #0a0b0d; /* 外枠・サイドバー・ページのキャンバス */
-  --paper: #121316; /* 本文パネル（基本背景） */
-  --raised: #17181c; /* カード・入力・secondary ボタンの面 */
-  --overlay: #1d1e23; /* ポップオーバー・ダイアログ・メニュー */
-  --wash: #1b1c20; /* hover・zebra 用の淡い面 */
-  --scrim: rgba(0, 0, 0, 0.72); /* モーダルのスクリム。ブラー無し */
-  --shadow-color: rgba(0, 0, 0, 0.7); /* 影の色。shadow-xs〜2xl が参照する */
-  --action-ink: #98a2f5; /* 文字・リンクとして置くインディゴ */
+  --ink-1000: #f7f8f8; /* Strongest text */
+  --ink-900: #eceef0; /* Headings and primary text */
+  --ink-700: #cfd3da; /* Body text (secondary) */
+  --ink-500: #8a8f98; /* Tertiary, muted, placeholder */
+  --ink-300: #5b5f67; /* Disabled, faint labels */
+  --line: #25272c; /* 1px hairline border and divider */
+  --line-strong: #34363d; /* Border of text inputs and stronger borders (a known exception that does not reach 3:1; borders of interactive controls use line-control) */
+  --line-control: #6b707a; /* Border of unselected Checkbox / Radio / Switch. At least 3:1 on every surface (non-text AA) */
+  --frame: #0a0b0d; /* Outer frame, sidebar, page canvas */
+  --paper: #121316; /* Main content panel (base background) */
+  --raised: #17181c; /* Surface of cards, inputs and secondary buttons */
+  --overlay: #1d1e23; /* Popovers, dialogs, menus */
+  --wash: #1b1c20; /* Light surface for hover and zebra rows */
+  --scrim: rgba(0, 0, 0, 0.72); /* Modal scrim. No blur */
+  --shadow-color: rgba(0, 0, 0, 0.7); /* Shadow color. Referenced by shadow-xs to shadow-2xl */
+  --action-ink: #98a2f5; /* Indigo used as text or a link */
   --state-success: #4cc38a;
   --state-error: #f2707f;
   --state-warning: #e0a53a;
-  --destructive-solid: #cf3345; /* 破壊的操作の塗り（ソリッド）。上の文字は destructive-solid-foreground（白）。state-error は文字用で、暗い面では明るく、塗りには向かない */
-  --chart-1: #7c86e8; /* チャートは色を使う。ダークでも読める 5 色 */
+  --destructive-solid: #cf3345; /* Fill (solid) of a destructive action. Text on it is destructive-solid-foreground (white). state-error is for text: it is bright on dark surfaces and not suited to a fill */
+  --chart-1: #7c86e8; /* Charts use color. Five colors that stay readable in dark */
   --chart-2: #4cc38a;
   --chart-3: #e5a23f;
   --chart-4: #f2707f;
@@ -138,27 +138,27 @@
 }
 
 .theme-light {
-  --ink-1000: #0f1012; /* 最も強い文字 */
-  --ink-900: #1b1c20; /* 見出し・主要テキスト */
-  --ink-700: #40434a; /* 本文（副） */
-  --ink-500: #676b74; /* 補助・ミュート、プレースホルダ */
-  --ink-300: #a3a6ad; /* 無効、薄いラベル */
-  --line: #e6e7eb; /* 1px の極薄の枠・区切り線 */
-  --line-strong: #d5d7dd; /* テキスト入力の枠・強めの枠（3:1 には届かない既知の例外。操作部品の枠は line-control） */
-  --line-control: #80858f; /* 未選択の Checkbox / Radio / Switch の枠。どの面の上でも 3:1 以上（非テキストの AA） */
-  --frame: #f4f5f7; /* 外枠・サイドバー・ページのキャンバス */
-  --paper: #ffffff; /* 本文パネル（基本背景） */
-  --raised: #ffffff; /* カード・入力・secondary ボタンの面 */
-  --overlay: #ffffff; /* ポップオーバー・ダイアログ・メニュー */
-  --wash: #f1f2f4; /* hover・zebra 用の淡い面 */
-  --scrim: rgba(0, 0, 0, 0.32); /* モーダルのスクリム。ブラー無し */
-  --shadow-color: rgba(16, 24, 40, 0.1); /* 影の色。shadow-xs〜2xl が参照する */
-  --action-ink: #4a55c0; /* 文字・リンクとして置くインディゴ */
+  --ink-1000: #0f1012; /* Strongest text */
+  --ink-900: #1b1c20; /* Headings and primary text */
+  --ink-700: #40434a; /* Body text (secondary) */
+  --ink-500: #676b74; /* Tertiary, muted, placeholder */
+  --ink-300: #a3a6ad; /* Disabled, faint labels */
+  --line: #e6e7eb; /* 1px hairline border and divider */
+  --line-strong: #d5d7dd; /* Border of text inputs and stronger borders (a known exception that does not reach 3:1; borders of interactive controls use line-control) */
+  --line-control: #80858f; /* Border of unselected Checkbox / Radio / Switch. At least 3:1 on every surface (non-text AA) */
+  --frame: #f4f5f7; /* Outer frame, sidebar, page canvas */
+  --paper: #ffffff; /* Main content panel (base background) */
+  --raised: #ffffff; /* Surface of cards, inputs and secondary buttons */
+  --overlay: #ffffff; /* Popovers, dialogs, menus */
+  --wash: #f1f2f4; /* Light surface for hover and zebra rows */
+  --scrim: rgba(0, 0, 0, 0.32); /* Modal scrim. No blur */
+  --shadow-color: rgba(16, 24, 40, 0.1); /* Shadow color. Referenced by shadow-xs to shadow-2xl */
+  --action-ink: #4a55c0; /* Indigo used as text or a link */
   --state-success: #187548;
   --state-error: #c42b3a;
   --state-warning: #8f5f00;
-  --destructive-solid: #c42b3a; /* 破壊的操作の塗り（ソリッド）。上の文字は destructive-solid-foreground（白）。state-error は文字用で、暗い面では明るく、塗りには向かない */
-  --chart-1: #5e6ad2; /* チャートは色を使う。ダークでも読める 5 色 */
+  --destructive-solid: #c42b3a; /* Fill (solid) of a destructive action. Text on it is destructive-solid-foreground (white). state-error is for text: it is bright on dark surfaces and not suited to a fill */
+  --chart-1: #5e6ad2; /* Charts use color. Five colors that stay readable in dark */
   --chart-2: #1f9d6a;
   --chart-3: #bd7100;
   --chart-4: #d6495c;

package/dist/tokens/tokens.gen.d.ts

@@ -1,9 +1,9 @@
 //#region src/tokens/tokens.gen.d.ts
-/** love3 のトークン名（先頭の `--` を除いた CSS 変数名）。 */
+/** Token names of love3 (the CSS variable names without the leading `--`). */
 export declare const tokenNames: readonly ["ink-1000", "ink-900", "ink-700", "ink-500", "ink-300", "line", "line-strong", "line-control", "frame", "paper", "raised", "overlay", "wash", "scrim", "shadow-color", "action", "action-hover", "action-foreground", "action-ink", "lt-three", "lt-three-foreground", "state-success", "state-error", "state-warning", "destructive-solid", "destructive-solid-foreground", "font-geist", "font-geist-mono", "font-jp", "font-mono", "background", "foreground", "card", "card-foreground", "popover", "popover-foreground", "primary", "primary-foreground", "secondary", "secondary-foreground", "muted", "muted-foreground", "accent", "accent-foreground", "destructive", "destructive-foreground", "border", "input", "ring", "chart-1", "chart-2", "chart-3", "chart-4", "chart-5", "section", "radius", "sidebar", "sidebar-foreground", "sidebar-primary", "sidebar-primary-foreground", "sidebar-accent", "sidebar-accent-foreground", "sidebar-border", "sidebar-ring"];
 export type TokenName = (typeof tokenNames)[number];
 export type TokenValues = Readonly<Record<TokenName, string>>;
-/** `var()` を解決した実値。ダークは上書きを重ねた全トークン。 */
+/** Values with `var()` resolved. For dark, every token with the dark overrides layered on. */
 export declare const tokens: {
   readonly light: {
     readonly "ink-1000": "#0f1012";

package/dist/tokens/tokens.gen.js

@@ -1,5 +1,5 @@
 //#region src/tokens/tokens.gen.ts
-/** love3 のトークン名（先頭の `--` を除いた CSS 変数名）。 */
+/** Token names of love3 (the CSS variable names without the leading `--`). */
 const tokenNames = [
 	"ink-1000",
 	"ink-900",
@@ -66,7 +66,7 @@ const tokenNames = [
 	"sidebar-border",
 	"sidebar-ring"
 ];
-/** `var()` を解決した実値。ダークは上書きを重ねた全トークン。 */
+/** Values with `var()` resolved. For dark, every token with the dark overrides layered on. */
 const tokens = {
 	light: {
 		"ink-1000": "#0f1012",

package/dist/tuning/catalog.d.ts

@@ -1,14 +1,14 @@
 import { ColorToken, Mode, TuningCatalog } from "./types.js";
 //#region src/tuning/catalog.d.ts
 /**
- * 定義から、調整の対象を作る。
+ * Builds what can be tuned from the definition.
  *
- * - 色のトークン: 値が色のリテラル（`#…`・`rgba(…)`）のもの。名前の接頭辞でランプ・主操作・ブランド・状態・チャートに分ける
- * - セマンティックの既定の参照先: **生成された CSS の `:root`** から読む（`--background: var(--paper)`）。
- *   `tokens` は `var()` を解決した実値なので、参照先は残らない。CSS が実際に走る値なので、これを正にする
- * - 本文サイズ: CSS の `@theme` の `--text-body` / `--text-body--line-height`
+ * - Color tokens: those whose value is a color literal (`#…`, `rgba(…)`). Split into ramp, primary action, brand, state, and chart by name prefix
+ * - Default references of semantic tokens: read from **`:root` in the generated CSS** (`--background: var(--paper)`).
+ *   `tokens` holds actual values with `var()` resolved, so the targets are not preserved. The CSS holds the values that actually run, so it is the source of truth here
+ * - Body size: `--text-body` / `--text-body--line-height` in the CSS `@theme`
  *
- * 読めなければ投げる（既定の形が変わって、この読み取りが古くなったことを黙って見逃さない）。
+ * Throws if it cannot be read (so a change in the default shape that makes this reading stale is not silently missed).
  */
 export declare function buildCatalog({ tokens, tokenNames, css }: {
   tokens: Readonly<Record<Mode, Readonly<Record<string, string>>>>;
@@ -17,8 +17,8 @@ export declare function buildCatalog({ tokens, tokenNames, css }: {
 }): TuningCatalog;
 export declare function findColor(catalog: TuningCatalog, name: string): ColorToken | undefined;
 /**
- * `buildCatalog` を、失敗しても投げずに返す。生成 CSS の形が変わって読み取りが古くなったとき、**調整だけを無効にして**ほかの画面を動かす
- * （`error` に理由。調整の対象が空のカタログを返すので、調整は何も効かない）。呼ぶ側が `error` を表示・記録する。
+ * Runs `buildCatalog` and returns instead of throwing on failure. When the generated CSS changes shape and the reading goes stale, **only tuning is disabled** and the rest of the screens keep working
+ * (the reason is in `error`. An empty catalog is returned, so tuning has no effect). The caller shows and records `error`.
  */
 export declare function buildCatalogSafe(input: Parameters<typeof buildCatalog>[0]): {
   catalog: TuningCatalog;

package/dist/tuning/catalog.js

@@ -24,7 +24,7 @@ function groupOf(name) {
 	if (name.startsWith("chart-")) return "chart";
 	return "ramp";
 }
-/** 半透明の値か（`rgba(…, 0.45)`・`#rrggbbaa` など）。読めない値は半透明として扱わない。 */
+/** Whether it is a translucent value (`rgba(…, 0.45)`, `#rrggbbaa`, and so on). Unreadable values are not treated as translucent. */
 function hasAlpha(value) {
 	const text = value.trim();
 	if (/^#[0-9a-f]{8}$/i.test(text)) return Number.parseInt(text.slice(7), 16) < 255;
@@ -32,14 +32,14 @@ function hasAlpha(value) {
 	return alpha !== void 0 && Number(alpha) < 1;
 }
 /**
-* 定義から、調整の対象を作る。
+* Builds what can be tuned from the definition.
 *
-* - 色のトークン: 値が色のリテラル（`#…`・`rgba(…)`）のもの。名前の接頭辞でランプ・主操作・ブランド・状態・チャートに分ける
-* - セマンティックの既定の参照先: **生成された CSS の `:root`** から読む（`--background: var(--paper)`）。
-*   `tokens` は `var()` を解決した実値なので、参照先は残らない。CSS が実際に走る値なので、これを正にする
-* - 本文サイズ: CSS の `@theme` の `--text-body` / `--text-body--line-height`
+* - Color tokens: those whose value is a color literal (`#…`, `rgba(…)`). Split into ramp, primary action, brand, state, and chart by name prefix
+* - Default references of semantic tokens: read from **`:root` in the generated CSS** (`--background: var(--paper)`).
+*   `tokens` holds actual values with `var()` resolved, so the targets are not preserved. The CSS holds the values that actually run, so it is the source of truth here
+* - Body size: `--text-body` / `--text-body--line-height` in the CSS `@theme`
 *
-* 読めなければ投げる（既定の形が変わって、この読み取りが古くなったことを黙って見逃さない）。
+* Throws if it cannot be read (so a change in the default shape that makes this reading stale is not silently missed).
 */
 function buildCatalog({ tokens, tokenNames, css }) {
 	const root = /:root\s*\{([\s\S]*?)\n\}/.exec(css)?.[1];
@@ -94,8 +94,8 @@ function findColor(catalog, name) {
 	return catalog.colors.find((color) => color.name === name);
 }
 /**
-* `buildCatalog` を、失敗しても投げずに返す。生成 CSS の形が変わって読み取りが古くなったとき、**調整だけを無効にして**ほかの画面を動かす
-* （`error` に理由。調整の対象が空のカタログを返すので、調整は何も効かない）。呼ぶ側が `error` を表示・記録する。
+* Runs `buildCatalog` and returns instead of throwing on failure. When the generated CSS changes shape and the reading goes stale, **only tuning is disabled** and the rest of the screens keep working
+* (the reason is in `error`. An empty catalog is returned, so tuning has no effect). The caller shows and records `error`.
 */
 function buildCatalogSafe(input) {
 	try {

package/dist/tuning/color.d.ts

@@ -7,12 +7,12 @@ export type ColorResult = {
   reason: string;
 };
 /**
- * トークンの色の入力を読んで、正規の形にする。
+ * Reads a color token input and turns it into the canonical form.
  *
- * - 不透明な色（既定）: `#rgb` / `#rrggbb` を、小文字の `#rrggbb` にする（`<input type="color">` と同じ形）
- * - 半透明を許す色（scrim。`alpha: true`）: 上に加えて `#rrggbbaa` と `rgb()` / `rgba()`。`rgba(r, g, b, a)` の形にする
+ * - Opaque colors (the default): `#rgb` / `#rrggbb` becomes a lowercase `#rrggbb` (the same form as `<input type="color">`)
+ * - Colors that allow translucency (scrim; `alpha: true`): additionally `#rrggbbaa` and `rgb()` / `rgba()`, normalized to the `rgba(r, g, b, a)` form
  *
- * 読めない値と、範囲外の値（255 超・不透明度が 0〜1 の外）は理由つきで断る。
+ * Unreadable values and out-of-range values (above 255, or an opacity outside 0 to 1) are rejected with a reason.
  */
 export declare function parseTokenColor(input: string, options: {
   alpha: boolean;

package/dist/tuning/color.js

@@ -4,12 +4,12 @@ const HEX3 = /^#([0-9a-f]{3})$/i;
 const HEX8 = /^#([0-9a-f]{8})$/i;
 const RGBA = /^rgba?\(\s*(\d{1,3})\s*,\s*(\d{1,3})\s*,\s*(\d{1,3})\s*(?:,\s*(\d*\.?\d+)\s*)?\)$/i;
 /**
-* トークンの色の入力を読んで、正規の形にする。
+* Reads a color token input and turns it into the canonical form.
 *
-* - 不透明な色（既定）: `#rgb` / `#rrggbb` を、小文字の `#rrggbb` にする（`<input type="color">` と同じ形）
-* - 半透明を許す色（scrim。`alpha: true`）: 上に加えて `#rrggbbaa` と `rgb()` / `rgba()`。`rgba(r, g, b, a)` の形にする
+* - Opaque colors (the default): `#rgb` / `#rrggbb` becomes a lowercase `#rrggbb` (the same form as `<input type="color">`)
+* - Colors that allow translucency (scrim; `alpha: true`): additionally `#rrggbbaa` and `rgb()` / `rgba()`, normalized to the `rgba(r, g, b, a)` form
 *
-* 読めない値と、範囲外の値（255 超・不透明度が 0〜1 の外）は理由つきで断る。
+* Unreadable values and out-of-range values (above 255, or an opacity outside 0 to 1) are rejected with a reason.
 */
 function parseTokenColor(input, options) {
 	const text = input.trim();
@@ -71,7 +71,7 @@ function toRgba(rgb, alpha255) {
 	const channel = (offset) => Number.parseInt(rgb.slice(offset, offset + 2), 16);
 	return `rgba(${channel(0)}, ${channel(2)}, ${channel(4)}, ${trimNumber(alpha255 / 255)})`;
 }
-/** 小数を丸めて、末尾の 0 を落とす（0.45 → `0.45`、1 → `1`）。 */
+/** Rounds a decimal and drops trailing zeros (0.45 → `0.45`, 1 → `1`). */
 function trimNumber(value) {
 	return String(Math.round(value * 100) / 100);
 }

package/dist/tuning/css.d.ts

@@ -1,6 +1,6 @@
 import { Tuning, TuningCatalog } from "./types.js";
 //#region src/tuning/css.d.ts
-/** 影の preset（Tailwind の既定の影）。love3 の既定は `--shadow-color` を使う淡い影（`definition.ts` の `theme`）。 */
+/** The shadow preset (Tailwind's default shadows). The love3 default is a soft shadow using `--shadow-color` (the `theme` in `definition.ts`). */
 export declare const SHADOW_PRESET: {
   readonly "2xs": "0 1px rgb(0 0 0 / 0.05)";
   readonly xs: "0 1px 2px 0 rgb(0 0 0 / 0.05)";
@@ -11,25 +11,25 @@ export declare const SHADOW_PRESET: {
   readonly "2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)";
 };
 /**
- * **実行時に `<style id="love3-tuning">` へ差し込む CSS。** 既定どおりなら空文字（差し込まない）。
+ * **The CSS injected into `<style id="love3-tuning">` at runtime.** An empty string when everything is at the defaults (nothing is injected).
  *
- * love3 の生成 CSS と同じ形（`:root` がライト・`.dark` がダーク）で、後から読み込んで上書きする。
- * - 変えた色は、**ライトとダークの両方を書く**。生成 CSS は `:root` の後に `.dark` が来るので、ライトだけを上書きすると、
- *   後ろに置いた `:root` が生成の `.dark` に勝ってダークまで潰れる。`.dark` にも実効値を書いて、ダークは別に守る
- * - セマンティックの参照・角丸・書体・本文サイズは `:root` だけ（生成の `.dark` は色のトークンしか再定義しない）
- * - 角丸（`--radius-control` / `--radius-surface`）は Tailwind の `@theme` の変数だが実行時は `:root` の変数として効く。
- *   影は Tailwind がクラスに畳み込む（`.shadow-md { --tw-shadow: … }`）ので、クラスごとに `--tw-shadow` を上書きする
+ * It has the same shape as the generated CSS of love3 (`:root` for light, `.dark` for dark), and is loaded later to override it.
+ * - For a changed color, **write both light and dark**. In the generated CSS `.dark` comes after `:root`, so if only light were overridden,
+ *   the `:root` placed later would beat the generated `.dark` and flatten dark mode too. The effective value is also written to `.dark` to protect dark separately
+ * - Semantic references, radius, typeface, and body size go only in `:root` (the generated `.dark` redefines only color tokens)
+ * - The radius (`--radius-control` / `--radius-surface`) is a variable of Tailwind's `@theme`, but at runtime it takes effect as a `:root` variable.
+ *   Tailwind folds shadows into classes (`.shadow-md { --tw-shadow: … }`), so `--tw-shadow` is overridden per class
  */
 export declare function toRuntimeCss(tuning: Tuning, catalog: TuningCatalog): string;
 /**
- * **コピー用の CSS。** `styles.gen.css` と同じ書式で、既定との差分だけ（`:root` / `.dark` / `@theme`）。
- * `@theme` は Tailwind のビルド時の変数（角丸・影・本文サイズ）で、`styles.gen.css` では `definition.ts` の `theme` から出る。
- * 実行時に効かせる CSS（`toRuntimeCss`）とは別物（そちらは `@theme` を使えない）。
+ * **The CSS for copying.** The same format as `styles.gen.css`, with only the difference from the defaults (`:root` / `.dark` / `@theme`).
+ * `@theme` holds Tailwind build-time variables (radius, shadow, body size), which `styles.gen.css` emits from the `theme` in `definition.ts`.
+ * It is separate from the CSS applied at runtime (`toRuntimeCss`; that one cannot use `@theme`).
  */
 export declare function toExportCss(tuning: Tuning, catalog: TuningCatalog): string;
 /**
- * **`definition.ts` に取り込むための差分。** SSOT のトークンの行（`{ name, value, dark }`）と、`theme` の行の形で、
- * 変えた項目だけを出す。名前は変えず、値を差し替える（トークンの直し方）。取り込んだら `bun run generate`。
+ * **The diff to bring into `definition.ts`.** In the shape of the SSOT token lines (`{ name, value, dark }`) and the `theme` lines,
+ * it outputs only the changed items. Names stay the same and only values are swapped (how to edit tokens). Run `bun run generate` after bringing it in.
  */
 export declare function toDefinitionDiff(tuning: Tuning, catalog: TuningCatalog): string;
 //#endregion

package/dist/tuning/css.js

@@ -2,7 +2,7 @@ import { FONT_KEYS, FONT_TOKEN, RADIUS_ROLES } from "./types.js";
 import { bodyLineHeight, colorValue, normalize } from "./model.js";
 
 //#region src/tuning/css.ts
-/** 影の preset（Tailwind の既定の影）。love3 の既定は `--shadow-color` を使う淡い影（`definition.ts` の `theme`）。 */
+/** The shadow preset (Tailwind's default shadows). The love3 default is a soft shadow using `--shadow-color` (the `theme` in `definition.ts`). */
 const SHADOW_PRESET = {
 	"2xs": "0 1px rgb(0 0 0 / 0.05)",
 	xs: "0 1px 2px 0 rgb(0 0 0 / 0.05)",
@@ -12,7 +12,7 @@ const SHADOW_PRESET = {
 	xl: "0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1)",
 	"2xl": "0 25px 50px -12px rgb(0 0 0 / 0.25)"
 };
-/** 影を消す preset（`SHADOW_PRESET` と同じ段）。 */
+/** The preset that removes shadows (the same steps as `SHADOW_PRESET`). */
 const SHADOW_NONE = {
 	"2xs": "none",
 	xs: "none",
@@ -22,12 +22,12 @@ const SHADOW_NONE = {
 	xl: "none",
 	"2xl": "none"
 };
-/** 調整で差し替える影の値。既定（`default`）は差し替えない。 */
+/** The shadow values a tuning swaps in. The default (`default`) is not swapped. */
 function shadowValues(n) {
 	if (n.shadow === "default") return [];
 	return Object.entries(n.shadow === "none" ? SHADOW_NONE : SHADOW_PRESET);
 }
-/** 変えた色のトークン名（ライト・ダークのどちらかで変えたもの）。定義の順。 */
+/** The names of the color tokens that were changed (in either light or dark), in definition order. */
 function touchedColors(n, catalog) {
 	return catalog.colors.map((color) => color.name).filter((name) => n.tokens.light[name] !== void 0 || n.tokens.dark[name] !== void 0);
 }
@@ -37,7 +37,7 @@ function decl(name, value) {
 function block(selector, lines) {
 	return lines.length === 0 ? "" : `${selector} {\n${lines.join("\n")}\n}`;
 }
-/** 既定と違う役割（`normalize` 済みなので、`radius` に残っているのが差分）。 */
+/** The roles that differ from the defaults (already `normalize`d, so what remains in `radius` is the difference). */
 function radiusRoles(n) {
 	return RADIUS_ROLES.flatMap((role) => {
 		const px = n.radius[role];
@@ -45,14 +45,14 @@ function radiusRoles(n) {
 	});
 }
 /**
-* **実行時に `<style id="love3-tuning">` へ差し込む CSS。** 既定どおりなら空文字（差し込まない）。
+* **The CSS injected into `<style id="love3-tuning">` at runtime.** An empty string when everything is at the defaults (nothing is injected).
 *
-* love3 の生成 CSS と同じ形（`:root` がライト・`.dark` がダーク）で、後から読み込んで上書きする。
-* - 変えた色は、**ライトとダークの両方を書く**。生成 CSS は `:root` の後に `.dark` が来るので、ライトだけを上書きすると、
-*   後ろに置いた `:root` が生成の `.dark` に勝ってダークまで潰れる。`.dark` にも実効値を書いて、ダークは別に守る
-* - セマンティックの参照・角丸・書体・本文サイズは `:root` だけ（生成の `.dark` は色のトークンしか再定義しない）
-* - 角丸（`--radius-control` / `--radius-surface`）は Tailwind の `@theme` の変数だが実行時は `:root` の変数として効く。
-*   影は Tailwind がクラスに畳み込む（`.shadow-md { --tw-shadow: … }`）ので、クラスごとに `--tw-shadow` を上書きする
+* It has the same shape as the generated CSS of love3 (`:root` for light, `.dark` for dark), and is loaded later to override it.
+* - For a changed color, **write both light and dark**. In the generated CSS `.dark` comes after `:root`, so if only light were overridden,
+*   the `:root` placed later would beat the generated `.dark` and flatten dark mode too. The effective value is also written to `.dark` to protect dark separately
+* - Semantic references, radius, typeface, and body size go only in `:root` (the generated `.dark` redefines only color tokens)
+* - The radius (`--radius-control` / `--radius-surface`) is a variable of Tailwind's `@theme`, but at runtime it takes effect as a `:root` variable.
+*   Tailwind folds shadows into classes (`.shadow-md { --tw-shadow: … }`), so `--tw-shadow` is overridden per class
 */
 function toRuntimeCss(tuning, catalog) {
 	const n = normalize(tuning, catalog);
@@ -78,9 +78,9 @@ function toRuntimeCss(tuning, catalog) {
 	return parts.filter((part) => part !== "").join("\n");
 }
 /**
-* **コピー用の CSS。** `styles.gen.css` と同じ書式で、既定との差分だけ（`:root` / `.dark` / `@theme`）。
-* `@theme` は Tailwind のビルド時の変数（角丸・影・本文サイズ）で、`styles.gen.css` では `definition.ts` の `theme` から出る。
-* 実行時に効かせる CSS（`toRuntimeCss`）とは別物（そちらは `@theme` を使えない）。
+* **The CSS for copying.** The same format as `styles.gen.css`, with only the difference from the defaults (`:root` / `.dark` / `@theme`).
+* `@theme` holds Tailwind build-time variables (radius, shadow, body size), which `styles.gen.css` emits from the `theme` in `definition.ts`.
+* It is separate from the CSS applied at runtime (`toRuntimeCss`; that one cannot use `@theme`).
 */
 function toExportCss(tuning, catalog) {
 	const n = normalize(tuning, catalog);
@@ -110,8 +110,8 @@ function toExportCss(tuning, catalog) {
 	].filter((part) => part !== "").join("\n\n");
 }
 /**
-* **`definition.ts` に取り込むための差分。** SSOT のトークンの行（`{ name, value, dark }`）と、`theme` の行の形で、
-* 変えた項目だけを出す。名前は変えず、値を差し替える（トークンの直し方）。取り込んだら `bun run generate`。
+* **The diff to bring into `definition.ts`.** In the shape of the SSOT token lines (`{ name, value, dark }`) and the `theme` lines,
+* it outputs only the changed items. Names stay the same and only values are swapped (how to edit tokens). Run `bun run generate` after bringing it in.
 */
 function toDefinitionDiff(tuning, catalog) {
 	const n = normalize(tuning, catalog);

package/dist/tuning/model.d.ts

@@ -1,28 +1,28 @@
 import { FontKey, Mode, RadiusRole, ShadowPreset, Tuning, TuningCatalog } from "./types.js";
 //#region src/tuning/model.d.ts
-/** 色のトークンを実際に持つモード。ブランド色は共通なので、ダークの指定は `light` に寄せる。 */
+/** The mode that actually holds a color token. Brand colors are common to both, so a dark specification is folded into `light`. */
 export declare function modeOf(catalog: TuningCatalog, name: string, mode: Mode): Mode;
-/** 既定のフォント値。 */
+/** The default font value. */
 export declare function defaultFont(catalog: TuningCatalog, key: FontKey): string;
-/** 役割ごとの角丸（px）。指定が無ければ既定（control 6・surface 10）。 */
+/** The radius (px) per role. Falls back to the default (control 6, surface 10) when unspecified. */
 export declare function radiusPx(tuning: Tuning, catalog: TuningCatalog, role: RadiusRole): number;
-/** 本文の行の高さ（px）。サイズに比例させる（既定の 14px / 22px の比）。 */
+/** The body line height (px). Proportional to the size (the ratio of the default 14px / 22px). */
 export declare function bodyLineHeight(catalog: TuningCatalog, size: number): number;
 /**
- * 既定と同じ値の項目を落として、同じ内容が 1 通りの形になるようにする（保存・エクスポート・比較の前に通す）。
- * 色は正規の形（小文字の `#rrggbb`）にそろえる。読めない色は落とさずそのまま残す（検証は `parseTuning` の仕事）。
+ * Drops items equal to the defaults so that the same content has a single form (run before saving, exporting, and comparing).
+ * Colors are aligned to the canonical form (lowercase `#rrggbb`). Unreadable colors are kept as they are (validation is the job of `parseTuning`).
  */
 export declare function normalize(tuning: Tuning, catalog: TuningCatalog): Tuning;
-/** 既定と同じ（差分が無い）か。 */
+/** Whether it equals the defaults (has no difference). */
 export declare function isEmpty(tuning: Tuning, catalog: TuningCatalog): boolean;
-/** 既定との差分の数（色・参照先・角丸・書体・影の項目ごとに 1）。 */
+/** The number of differences from the defaults (1 per item of color, reference, radius, typeface, and shadow). */
 export declare function countChanges(tuning: Tuning, catalog: TuningCatalog): number;
 /**
- * トークンの実値。**参照（`var()`）をたどる**: セマンティックトークンは参照先（上書きがあればそれ、無ければ既定）の実値になる。
- * 参照先のランプを調整すれば、それを指すセマンティックトークンも変わる（実行時の CSS と同じ解決）。
+ * The actual value of a token. **It follows references (`var()`)**: a semantic token takes the actual value of its target (the override if there is one, the default otherwise).
+ * If you tune the ramp it refers to, the semantic tokens pointing at it change too (resolved the same way as the runtime CSS).
  */
 export declare function colorValue(tuning: Tuning, catalog: TuningCatalog, mode: Mode, name: string): string;
-/** 全トークン（色・書体・調整した角丸）の実値の表。調整を重ねた後の値で、`tokens` と同じ形。 */
+/** A table of the actual values of all tokens (color, typeface, tuned radius). The values after the tuning is applied, in the same shape as `tokens`. */
 export declare function effectiveTokens(tuning: Tuning, catalog: TuningCatalog): Record<Mode, Record<string, string>>;
 export declare function withColor(tuning: Tuning, catalog: TuningCatalog, mode: Mode, name: string, value: string | undefined): Tuning;
 export declare function withSemantic(tuning: Tuning, name: string, ref: string | undefined): Tuning;