@lt-three/love3 0.1.0 → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (271) hide show
  1. package/README.md +40 -40
  2. package/dist/native/analytics/animation.d.ts +1 -1
  3. package/dist/native/analytics/animation.js +1 -1
  4. package/dist/native/analytics/chart.types.d.ts +3 -3
  5. package/dist/native/analytics/metric-card.d.ts +3 -3
  6. package/dist/native/analytics/metric-card.js +3 -3
  7. package/dist/native/analytics/multi-line-chart.d.ts +9 -8
  8. package/dist/native/analytics/multi-line-chart.js +14 -13
  9. package/dist/native/analytics/pie-chart.d.ts +7 -7
  10. package/dist/native/analytics/pie-chart.js +8 -8
  11. package/dist/native/analytics/single-number.d.ts +4 -4
  12. package/dist/native/analytics/single-number.js +2 -2
  13. package/dist/native/atom/avatar.d.ts +6 -6
  14. package/dist/native/atom/avatar.js +2 -2
  15. package/dist/native/atom/badge.d.ts +5 -5
  16. package/dist/native/atom/button.d.ts +12 -12
  17. package/dist/native/atom/button.js +8 -8
  18. package/dist/native/atom/checkbox.d.ts +4 -4
  19. package/dist/native/atom/checkbox.js +2 -2
  20. package/dist/native/atom/colored-value.d.ts +4 -4
  21. package/dist/native/atom/colored-value.js +4 -4
  22. package/dist/native/atom/image.d.ts +7 -7
  23. package/dist/native/atom/image.js +2 -2
  24. package/dist/native/atom/label.d.ts +5 -5
  25. package/dist/native/atom/label.js +2 -2
  26. package/dist/native/atom/link.d.ts +5 -5
  27. package/dist/native/atom/link.js +5 -5
  28. package/dist/native/atom/readout.d.ts +7 -7
  29. package/dist/native/atom/readout.js +3 -3
  30. package/dist/native/atom/search-input.d.ts +2 -2
  31. package/dist/native/atom/search-input.js +2 -2
  32. package/dist/native/atom/select.d.ts +14 -14
  33. package/dist/native/atom/select.js +8 -8
  34. package/dist/native/atom/separator.d.ts +2 -3
  35. package/dist/native/atom/separator.js +2 -3
  36. package/dist/native/atom/skeleton.d.ts +3 -3
  37. package/dist/native/atom/skeleton.js +3 -3
  38. package/dist/native/atom/slider.d.ts +6 -6
  39. package/dist/native/atom/slider.js +3 -3
  40. package/dist/native/atom/spinner.d.ts +4 -4
  41. package/dist/native/atom/spinner.js +2 -2
  42. package/dist/native/atom/switch.d.ts +4 -4
  43. package/dist/native/atom/switch.js +3 -3
  44. package/dist/native/atom/symbol.d.ts +7 -7
  45. package/dist/native/atom/symbol.js +7 -7
  46. package/dist/native/atom/symbol.types.d.ts +8 -8
  47. package/dist/native/atom/symbol.types.js +7 -7
  48. package/dist/native/atom/text-field.d.ts +15 -15
  49. package/dist/native/atom/text-field.js +5 -5
  50. package/dist/native/atom/theme-toggle.d.ts +7 -7
  51. package/dist/native/atom/theme-toggle.js +4 -4
  52. package/dist/native/atom/timezone-select.d.ts +5 -5
  53. package/dist/native/atom/timezone-select.js +4 -4
  54. package/dist/native/atom/typography.d.ts +2 -2
  55. package/dist/native/atom/typography.js +2 -2
  56. package/dist/native/base/button.d.ts +13 -13
  57. package/dist/native/base/button.js +4 -4
  58. package/dist/native/base/form.d.ts +15 -15
  59. package/dist/native/base/form.js +11 -11
  60. package/dist/native/base/glass-card.d.ts +3 -3
  61. package/dist/native/base/glass-card.js +3 -3
  62. package/dist/native/base/input.d.ts +8 -8
  63. package/dist/native/base/input.js +7 -7
  64. package/dist/native/base/sheet.d.ts +27 -27
  65. package/dist/native/base/sheet.js +15 -15
  66. package/dist/native/form/checkbox.d.ts +3 -3
  67. package/dist/native/form/checkbox.js +2 -2
  68. package/dist/native/form/date-picker.d.ts +9 -9
  69. package/dist/native/form/date-picker.js +9 -9
  70. package/dist/native/form/form.d.ts +5 -6
  71. package/dist/native/form/form.js +4 -5
  72. package/dist/native/form/radio-group.d.ts +5 -5
  73. package/dist/native/form/radio-group.js +4 -4
  74. package/dist/native/form/select.d.ts +2 -2
  75. package/dist/native/form/select.js +2 -2
  76. package/dist/native/form/slider.d.ts +2 -2
  77. package/dist/native/form/slider.js +2 -2
  78. package/dist/native/form/switch.d.ts +2 -2
  79. package/dist/native/form/switch.js +2 -2
  80. package/dist/native/form/text-area.d.ts +2 -2
  81. package/dist/native/form/text-area.js +1 -1
  82. package/dist/native/form/text-input.d.ts +5 -5
  83. package/dist/native/form/text-input.js +8 -8
  84. package/dist/native/layout/accordion.d.ts +5 -5
  85. package/dist/native/layout/accordion.js +2 -2
  86. package/dist/native/layout/card.d.ts +8 -8
  87. package/dist/native/layout/card.js +3 -3
  88. package/dist/native/layout/description.d.ts +2 -2
  89. package/dist/native/layout/description.js +2 -2
  90. package/dist/native/layout/error.d.ts +5 -5
  91. package/dist/native/layout/error.js +2 -2
  92. package/dist/native/layout/information.d.ts +4 -4
  93. package/dist/native/layout/information.js +3 -3
  94. package/dist/native/layout/locked.d.ts +15 -15
  95. package/dist/native/layout/locked.js +7 -7
  96. package/dist/native/layout/modal.d.ts +8 -8
  97. package/dist/native/layout/modal.js +5 -5
  98. package/dist/native/layout/not-found.d.ts +4 -4
  99. package/dist/native/layout/not-found.js +3 -3
  100. package/dist/native/layout/page-frame.d.ts +8 -8
  101. package/dist/native/layout/page-frame.js +3 -3
  102. package/dist/native/layout/panel.d.ts +5 -5
  103. package/dist/native/layout/panel.js +5 -5
  104. package/dist/native/layout/reorderable-list.d.ts +14 -14
  105. package/dist/native/layout/reorderable-list.js +10 -10
  106. package/dist/native/layout/sheet.d.ts +10 -10
  107. package/dist/native/layout/sheet.js +4 -4
  108. package/dist/native/layout/simple-dialog.d.ts +3 -3
  109. package/dist/native/layout/simple-dialog.js +2 -2
  110. package/dist/native/layout/simple-table.d.ts +18 -18
  111. package/dist/native/layout/simple-table.js +1 -1
  112. package/dist/native/layout/tab-bar.d.ts +10 -10
  113. package/dist/native/layout/tab-bar.js +4 -4
  114. package/dist/native/layout/tabs.d.ts +6 -6
  115. package/dist/native/layout/tabs.js +4 -4
  116. package/dist/native/layout/tuning-panel.d.ts +10 -10
  117. package/dist/native/layout/tuning-panel.js +15 -15
  118. package/dist/native/lib/autocomplete.d.ts +1 -1
  119. package/dist/native/lib/autocomplete.js +1 -1
  120. package/dist/native/lib/breakpoints.d.ts +3 -3
  121. package/dist/native/lib/breakpoints.js +3 -3
  122. package/dist/native/lib/chart-palette.d.ts +2 -2
  123. package/dist/native/lib/chart-palette.js +2 -2
  124. package/dist/native/lib/confirm.d.ts +15 -16
  125. package/dist/native/lib/confirm.js +9 -10
  126. package/dist/native/lib/control.d.ts +9 -9
  127. package/dist/native/lib/external-store.d.ts +4 -5
  128. package/dist/native/lib/keyboard.d.ts +7 -7
  129. package/dist/native/lib/keyboard.js +7 -7
  130. package/dist/native/lib/labels.d.ts +6 -6
  131. package/dist/native/lib/labels.js +6 -6
  132. package/dist/native/lib/loading.d.ts +3 -3
  133. package/dist/native/lib/loading.js +3 -3
  134. package/dist/native/lib/network.d.ts +5 -6
  135. package/dist/native/lib/network.js +5 -6
  136. package/dist/native/lib/scheme.d.ts +7 -7
  137. package/dist/native/lib/scheme.js +3 -3
  138. package/dist/native/lib/snackbar.d.ts +12 -13
  139. package/dist/native/lib/snackbar.js +7 -8
  140. package/dist/native/lib/theme.d.ts +15 -15
  141. package/dist/native/lib/theme.js +15 -15
  142. package/dist/native/lib/timezone.d.ts +13 -13
  143. package/dist/native/lib/timezone.js +13 -13
  144. package/dist/native/lib/token-color.d.ts +1 -1
  145. package/dist/native/lib/token-color.js +1 -1
  146. package/dist/native/lib/tuning-context.d.ts +2 -2
  147. package/dist/native/lib/tuning.d.ts +10 -10
  148. package/dist/native/lib/tuning.js +8 -8
  149. package/dist/native/lib/typography.d.ts +3 -3
  150. package/dist/native/lib/typography.js +3 -3
  151. package/dist/native/lib/utils.d.ts +3 -3
  152. package/dist/native/lib/utils.js +3 -3
  153. package/dist/native/once/confirm.d.ts +2 -2
  154. package/dist/native/once/confirm.js +2 -2
  155. package/dist/native/once/error-boundary.d.ts +3 -3
  156. package/dist/native/once/error-boundary.js +2 -2
  157. package/dist/native/once/loading-lock.d.ts +3 -3
  158. package/dist/native/once/loading-lock.js +3 -3
  159. package/dist/native/once/offline-banner.d.ts +6 -6
  160. package/dist/native/once/offline-banner.js +5 -5
  161. package/dist/native/once/snackbar.d.ts +7 -7
  162. package/dist/native/once/snackbar.js +5 -5
  163. package/dist/native/styles.css +21 -21
  164. package/dist/shared/analytics.d.ts +23 -23
  165. package/dist/shared/button.d.ts +1 -1
  166. package/dist/shared/form.d.ts +7 -7
  167. package/dist/shared/form.js +2 -2
  168. package/dist/tokens/contrast-pairs.d.ts +9 -9
  169. package/dist/tokens/contrast-pairs.js +10 -10
  170. package/dist/tokens/index.d.ts +1 -1
  171. package/dist/tokens/index.js +1 -1
  172. package/dist/tokens/styles.gen.css +87 -87
  173. package/dist/tokens/tokens.gen.d.ts +2 -2
  174. package/dist/tokens/tokens.gen.js +2 -2
  175. package/dist/tuning/catalog.d.ts +8 -8
  176. package/dist/tuning/catalog.js +9 -9
  177. package/dist/tuning/color.d.ts +4 -4
  178. package/dist/tuning/color.js +5 -5
  179. package/dist/tuning/css.d.ts +13 -13
  180. package/dist/tuning/css.js +17 -17
  181. package/dist/tuning/model.d.ts +11 -11
  182. package/dist/tuning/model.js +11 -11
  183. package/dist/tuning/native.d.ts +18 -18
  184. package/dist/tuning/native.js +18 -18
  185. package/dist/tuning/schema.d.ts +15 -15
  186. package/dist/tuning/schema.js +22 -22
  187. package/dist/tuning/types.d.ts +25 -25
  188. package/dist/tuning/types.js +6 -6
  189. package/dist/web/analytics/line-chart.d.ts +6 -6
  190. package/dist/web/analytics/line-chart.js +3 -3
  191. package/dist/web/analytics/metric-card.d.ts +6 -6
  192. package/dist/web/analytics/metric-card.js +5 -5
  193. package/dist/web/analytics/multi-line-chart.d.ts +23 -23
  194. package/dist/web/analytics/multi-line-chart.js +33 -33
  195. package/dist/web/atom/avatar.d.ts +1 -1
  196. package/dist/web/atom/checkbox.d.ts +6 -6
  197. package/dist/web/atom/checkbox.js +2 -2
  198. package/dist/web/atom/colored-value.d.ts +4 -4
  199. package/dist/web/atom/colored-value.js +4 -4
  200. package/dist/web/atom/help.d.ts +1 -1
  201. package/dist/web/atom/segmented-control.d.ts +13 -14
  202. package/dist/web/atom/segmented-control.js +6 -7
  203. package/dist/web/atom/select.d.ts +7 -7
  204. package/dist/web/atom/select.js +5 -5
  205. package/dist/web/atom/slider.d.ts +3 -3
  206. package/dist/web/atom/slider.js +2 -2
  207. package/dist/web/atom/switch.d.ts +3 -3
  208. package/dist/web/atom/text-area.d.ts +9 -8
  209. package/dist/web/atom/text-area.js +9 -8
  210. package/dist/web/atom/text-field.d.ts +5 -4
  211. package/dist/web/atom/text-field.js +5 -4
  212. package/dist/web/atom/toggle-chip.d.ts +6 -6
  213. package/dist/web/atom/toggle-chip.js +4 -4
  214. package/dist/web/atom/tooltip.d.ts +6 -6
  215. package/dist/web/atom/tooltip.js +2 -2
  216. package/dist/web/base/accordion.js +1 -1
  217. package/dist/web/base/breadcrumb.d.ts +1 -1
  218. package/dist/web/base/breadcrumb.js +1 -1
  219. package/dist/web/base/card.d.ts +3 -3
  220. package/dist/web/base/card.js +2 -2
  221. package/dist/web/base/dialog.d.ts +1 -1
  222. package/dist/web/base/dialog.js +1 -1
  223. package/dist/web/base/form.d.ts +7 -7
  224. package/dist/web/base/form.js +5 -5
  225. package/dist/web/base/pagination.d.ts +5 -5
  226. package/dist/web/base/pagination.js +1 -1
  227. package/dist/web/base/sheet.d.ts +1 -1
  228. package/dist/web/base/sheet.js +1 -1
  229. package/dist/web/base/slider.d.ts +1 -1
  230. package/dist/web/base/sonner.d.ts +2 -2
  231. package/dist/web/base/sonner.js +2 -2
  232. package/dist/web/base/spinner.js +1 -1
  233. package/dist/web/form/checkbox.d.ts +8 -8
  234. package/dist/web/form/checkbox.js +3 -3
  235. package/dist/web/form/radio-group.js +3 -3
  236. package/dist/web/form/select.js +1 -1
  237. package/dist/web/form/slider.d.ts +3 -3
  238. package/dist/web/form/slider.js +3 -3
  239. package/dist/web/form/switch.d.ts +3 -3
  240. package/dist/web/form/switch.js +4 -4
  241. package/dist/web/form/text-area.js +1 -1
  242. package/dist/web/form/text-input.d.ts +1 -1
  243. package/dist/web/form/text-input.js +1 -1
  244. package/dist/web/layout/accordion.d.ts +5 -5
  245. package/dist/web/layout/accordion.js +2 -2
  246. package/dist/web/layout/alert-modal.d.ts +11 -11
  247. package/dist/web/layout/alert-modal.js +7 -7
  248. package/dist/web/layout/card.d.ts +1 -1
  249. package/dist/web/layout/information.d.ts +9 -9
  250. package/dist/web/layout/information.js +7 -7
  251. package/dist/web/layout/modal.d.ts +1 -1
  252. package/dist/web/layout/page-frame.d.ts +14 -14
  253. package/dist/web/layout/page-frame.js +7 -7
  254. package/dist/web/layout/scroll-area.d.ts +1 -1
  255. package/dist/web/layout/sheet.d.ts +4 -4
  256. package/dist/web/layout/simple-table.d.ts +18 -18
  257. package/dist/web/layout/simple-table.js +2 -2
  258. package/dist/web/layout/tabs.d.ts +4 -4
  259. package/dist/web/layout/titled-modal.d.ts +10 -11
  260. package/dist/web/layout/titled-modal.js +7 -8
  261. package/dist/web/lib/css-vars.d.ts +6 -6
  262. package/dist/web/lib/css-vars.js +5 -5
  263. package/dist/web/lib/dialog.d.ts +4 -4
  264. package/dist/web/lib/labels.d.ts +8 -8
  265. package/dist/web/lib/labels.js +8 -8
  266. package/dist/web/lib/modal-open-focus.d.ts +7 -7
  267. package/dist/web/lib/modal-open-focus.js +9 -9
  268. package/dist/web/lib/restore-focus.d.ts +4 -4
  269. package/dist/web/lib/restore-focus.js +4 -4
  270. package/dist/web/styles.css +33 -33
  271. package/package.json +2 -2
@@ -2,25 +2,25 @@ import { parseTokenColor } from "./color.js";
2
2
  import { FONT_KEYS, FONT_TOKEN, MODES, RADIUS_ROLES, emptyTuning } from "./types.js";
3
3
 
4
4
  //#region src/tuning/model.ts
5
- /** 色のトークンを実際に持つモード。ブランド色は共通なので、ダークの指定は `light` に寄せる。 */
5
+ /** The mode that actually holds a color token. Brand colors are common to both, so a dark specification is folded into `light`. */
6
6
  function modeOf(catalog, name, mode) {
7
7
  return mode === "dark" && catalog.colors.find((color) => color.name === name)?.hasDark === false ? "light" : mode;
8
8
  }
9
- /** 既定のフォント値。 */
9
+ /** The default font value. */
10
10
  function defaultFont(catalog, key) {
11
11
  return catalog.defaults.light[FONT_TOKEN[key]] ?? "";
12
12
  }
13
- /** 役割ごとの角丸(px)。指定が無ければ既定(control 6・surface 10)。 */
13
+ /** The radius (px) per role. Falls back to the default (control 6, surface 10) when unspecified. */
14
14
  function radiusPx(tuning, catalog, role) {
15
15
  return tuning.radius[role] ?? catalog.radius[role];
16
16
  }
17
- /** 本文の行の高さ(px)。サイズに比例させる(既定の 14px / 22px の比)。 */
17
+ /** The body line height (px). Proportional to the size (the ratio of the default 14px / 22px). */
18
18
  function bodyLineHeight(catalog, size) {
19
19
  return Math.round(size * catalog.body.lineHeight / catalog.body.size);
20
20
  }
21
21
  /**
22
- * 既定と同じ値の項目を落として、同じ内容が 1 通りの形になるようにする(保存・エクスポート・比較の前に通す)。
23
- * 色は正規の形(小文字の `#rrggbb`)にそろえる。読めない色は落とさずそのまま残す(検証は `parseTuning` の仕事)。
22
+ * Drops items equal to the defaults so that the same content has a single form (run before saving, exporting, and comparing).
23
+ * Colors are aligned to the canonical form (lowercase `#rrggbb`). Unreadable colors are kept as they are (validation is the job of `parseTuning`).
24
24
  */
25
25
  function normalize(tuning, catalog) {
26
26
  const out = emptyTuning();
@@ -50,18 +50,18 @@ function toCanonical(value, alpha) {
50
50
  const parsed = parseTokenColor(value, { alpha });
51
51
  return parsed.ok ? parsed.value : value;
52
52
  }
53
- /** 既定と同じ(差分が無い)か。 */
53
+ /** Whether it equals the defaults (has no difference). */
54
54
  function isEmpty(tuning, catalog) {
55
55
  return countChanges(tuning, catalog) === 0;
56
56
  }
57
- /** 既定との差分の数(色・参照先・角丸・書体・影の項目ごとに 1)。 */
57
+ /** The number of differences from the defaults (1 per item of color, reference, radius, typeface, and shadow). */
58
58
  function countChanges(tuning, catalog) {
59
59
  const n = normalize(tuning, catalog);
60
60
  return Object.keys(n.tokens.light).length + Object.keys(n.tokens.dark).length + Object.keys(n.semantic).length + Object.keys(n.radius).length + Object.keys(n.font).length + (n.shadow === "default" ? 0 : 1);
61
61
  }
62
62
  /**
63
- * トークンの実値。**参照(`var()`)をたどる**: セマンティックトークンは参照先(上書きがあればそれ、無ければ既定)の実値になる。
64
- * 参照先のランプを調整すれば、それを指すセマンティックトークンも変わる(実行時の CSS と同じ解決)。
63
+ * 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).
64
+ * If you tune the ramp it refers to, the semantic tokens pointing at it change too (resolved the same way as the runtime CSS).
65
65
  */
66
66
  function colorValue(tuning, catalog, mode, name) {
67
67
  const ref = (Object.hasOwn(tuning.semantic, name) ? tuning.semantic[name] : void 0) ?? (Object.hasOwn(catalog.semantic, name) ? catalog.semantic[name] : void 0);
@@ -73,7 +73,7 @@ function colorValue(tuning, catalog, mode, name) {
73
73
  if (fallback === void 0) throw new Error(`未定義のトークン: --${name}`);
74
74
  return fallback;
75
75
  }
76
- /** 全トークン(色・書体・調整した角丸)の実値の表。調整を重ねた後の値で、`tokens` と同じ形。 */
76
+ /** 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`. */
77
77
  function effectiveTokens(tuning, catalog) {
78
78
  const out = {
79
79
  light: {},
@@ -1,35 +1,35 @@
1
1
  import { Mode, Tuning, TuningCatalog } from "./types.js";
2
2
  //#region src/tuning/native.d.ts
3
3
  /**
4
- * ライト・ダークで**同じ値**のトークン(`.dark` で再定義しない)と、それを指すエイリアス。
5
- * react-native-css は、1 度しか宣言されない変数を**ビルド時にリテラルへ畳み込む**ので、`bg-action` などのクラスは
6
- * 実機で CSS 変数を引かず、**実行時の上書き(`toNativeVariables`)に追従しない**。TS から色を引く `useTokenColor` は追従する。
7
- * 一覧が `definition.ts` と食い違わないことは、`native/lib/tokens.test.ts` が見る。
4
+ * Tokens with the **same value** in light and dark (not redefined in `.dark`), and the aliases pointing at them.
5
+ * react-native-css **folds a variable declared only once into a literal at build time**, so classes such as `bg-action`
6
+ * do not read a CSS variable on a real device and **do not follow runtime overrides (`toNativeVariables`)**. `useTokenColor`, which reads colors from TS, does follow them.
7
+ * `native/lib/tokens.test.ts` checks that the list does not drift from `definition.ts`.
8
8
  */
9
9
  export declare const NATIVE_BUILD_FIXED_TOKENS: readonly ["action", "action-hover", "action-foreground", "primary", "primary-foreground", "ring", "sidebar-primary", "sidebar-primary-foreground", "sidebar-ring", "destructive-solid-foreground"];
10
10
  /**
11
- * ブランド色(`lt-three`・`lt-three-foreground`)。ライト・ダーク共通でビルド時に固定され、`bg-lt-three` などのクラスは
12
- * 実行時の上書きに追従しない(テーマで反転させないための仕様)。`NATIVE_BUILD_FIXED_TOKENS` とは別に持つのは、
13
- * `native/lib/tokens-check.ts` の畳み込み検査がブランド色を別扱いしているため(一覧の検査と食い違わせない)。
11
+ * The brand colors (`lt-three`, `lt-three-foreground`). They are common to light and dark and fixed at build time, so classes such as `bg-lt-three`
12
+ * do not follow runtime overrides (by design, so that they do not invert with the theme). They are kept apart from `NATIVE_BUILD_FIXED_TOKENS`
13
+ * because the folding check in `native/lib/tokens-check.ts` treats brand colors separately (so the list check does not drift).
14
14
  */
15
15
  export declare const NATIVE_BUILD_FIXED_BRAND_TOKENS: readonly ["lt-three", "lt-three-foreground"];
16
- /** 書体の値(CSS の font-family の並び)の先頭の名前。RN の `fontFamily` は 1 つの名前しか取らない。`var()` なら undefined。 */
16
+ /** The first name in a typeface value (a CSS font-family list). RN's `fontFamily` takes only one name. undefined for `var()`. */
17
17
  export declare function firstFontFamily(value: string): string | undefined;
18
18
  /**
19
- * native に配る CSS 変数(react-native-css の `VariableContextProvider` の `value`)。指定したモードの、**既定と違うものだけ**。
20
- * - 色のトークン: 実効値(セマンティックの参照も解決した値)。ランプの変更に依存するセマンティックトークンも、同じ変更の下で
21
- * 別のリテラルとして載せる(react-native-web では `--card: var(--raised)` が `:root` で解決済みで、ランプの上書きだけでは追従しないため)
22
- * - 角丸(`--radius-control` / `--radius-surface`): px
23
- * - 書体(`--font-geist` など): 先頭の名前だけ
19
+ * The CSS variables handed to native (the `value` of react-native-css's `VariableContextProvider`). For the given mode, **only those that differ from the defaults**.
20
+ * - Color tokens: effective values (with semantic references resolved). Semantic tokens that depend on a changed ramp are also emitted
21
+ * as separate literals under the same change (in react-native-web, `--card: var(--raised)` is already resolved at `:root` and does not follow an override of the ramp alone)
22
+ * - Radius (`--radius-control` / `--radius-surface`): px
23
+ * - Typeface (`--font-geist` and so on): only the first name
24
24
  *
25
- * **実機で効くのは、ライト・ダークで値が違う色のトークンを使うクラス(`bg-card` など。実機ではランプへの参照になる)と書体**。
26
- * 角丸・本文サイズはビルド時にリテラルへ畳み込まれ、`NATIVE_BUILD_FIXED_TOKENS` の色のクラスも畳み込まれるので、実機では効かない
27
- * (react-native-web では CSS 変数なので効く)。何が効かないかは `nativeLimits` が返す。
25
+ * **What takes effect on a real device is classes that use color tokens with different values in light and dark (such as `bg-card`; on a real device they become references to the ramp) and the typeface**.
26
+ * Radius and body size are folded into literals at build time, and the color classes of `NATIVE_BUILD_FIXED_TOKENS` are folded too, so they have no effect on a real device
27
+ * (in react-native-web they are CSS variables and do take effect). `nativeLimits` returns what has no effect.
28
28
  */
29
29
  export declare function toNativeVariables(tuning: Tuning, catalog: TuningCatalog, mode: Mode): Record<`--${string}`, string>;
30
30
  /**
31
- * 調整のうち、**native の実機では実行時に効かない項目**の説明(日本語)。空なら全部効く(react-native-web では全部効く)。
32
- * 調整の画面に出して、「効かないのは仕様」と分かるようにする。値は JSON に残るので、web で読めば効く。
31
+ * Descriptions (in Japanese) of the tuning items that **have no effect at runtime on a real native device**. Empty means everything takes effect (everything does in react-native-web).
32
+ * They are shown on the tuning screen so that it is clear the lack of effect is by design. The values stay in the JSON, so they take effect when read on web.
33
33
  */
34
34
  export declare function nativeLimits(tuning: Tuning, catalog: TuningCatalog): string[];
35
35
  //#endregion
@@ -3,10 +3,10 @@ import { effectiveTokens, normalize } from "./model.js";
3
3
 
4
4
  //#region src/tuning/native.ts
5
5
  /**
6
- * ライト・ダークで**同じ値**のトークン(`.dark` で再定義しない)と、それを指すエイリアス。
7
- * react-native-css は、1 度しか宣言されない変数を**ビルド時にリテラルへ畳み込む**ので、`bg-action` などのクラスは
8
- * 実機で CSS 変数を引かず、**実行時の上書き(`toNativeVariables`)に追従しない**。TS から色を引く `useTokenColor` は追従する。
9
- * 一覧が `definition.ts` と食い違わないことは、`native/lib/tokens.test.ts` が見る。
6
+ * Tokens with the **same value** in light and dark (not redefined in `.dark`), and the aliases pointing at them.
7
+ * react-native-css **folds a variable declared only once into a literal at build time**, so classes such as `bg-action`
8
+ * do not read a CSS variable on a real device and **do not follow runtime overrides (`toNativeVariables`)**. `useTokenColor`, which reads colors from TS, does follow them.
9
+ * `native/lib/tokens.test.ts` checks that the list does not drift from `definition.ts`.
10
10
  */
11
11
  const NATIVE_BUILD_FIXED_TOKENS = [
12
12
  "action",
@@ -21,27 +21,27 @@ const NATIVE_BUILD_FIXED_TOKENS = [
21
21
  "destructive-solid-foreground"
22
22
  ];
23
23
  /**
24
- * ブランド色(`lt-three`・`lt-three-foreground`)。ライト・ダーク共通でビルド時に固定され、`bg-lt-three` などのクラスは
25
- * 実行時の上書きに追従しない(テーマで反転させないための仕様)。`NATIVE_BUILD_FIXED_TOKENS` とは別に持つのは、
26
- * `native/lib/tokens-check.ts` の畳み込み検査がブランド色を別扱いしているため(一覧の検査と食い違わせない)。
24
+ * The brand colors (`lt-three`, `lt-three-foreground`). They are common to light and dark and fixed at build time, so classes such as `bg-lt-three`
25
+ * do not follow runtime overrides (by design, so that they do not invert with the theme). They are kept apart from `NATIVE_BUILD_FIXED_TOKENS`
26
+ * because the folding check in `native/lib/tokens-check.ts` treats brand colors separately (so the list check does not drift).
27
27
  */
28
28
  const NATIVE_BUILD_FIXED_BRAND_TOKENS = ["lt-three", "lt-three-foreground"];
29
- /** 書体の値(CSS の font-family の並び)の先頭の名前。RN の `fontFamily` は 1 つの名前しか取らない。`var()` なら undefined。 */
29
+ /** The first name in a typeface value (a CSS font-family list). RN's `fontFamily` takes only one name. undefined for `var()`. */
30
30
  function firstFontFamily(value) {
31
31
  const first = value.split(",")[0]?.trim() ?? "";
32
32
  if (first === "" || first.startsWith("var(")) return void 0;
33
33
  return first.replace(/^["']|["']$/g, "");
34
34
  }
35
35
  /**
36
- * native に配る CSS 変数(react-native-css の `VariableContextProvider` の `value`)。指定したモードの、**既定と違うものだけ**。
37
- * - 色のトークン: 実効値(セマンティックの参照も解決した値)。ランプの変更に依存するセマンティックトークンも、同じ変更の下で
38
- * 別のリテラルとして載せる(react-native-web では `--card: var(--raised)` が `:root` で解決済みで、ランプの上書きだけでは追従しないため)
39
- * - 角丸(`--radius-control` / `--radius-surface`): px
40
- * - 書体(`--font-geist` など): 先頭の名前だけ
36
+ * The CSS variables handed to native (the `value` of react-native-css's `VariableContextProvider`). For the given mode, **only those that differ from the defaults**.
37
+ * - Color tokens: effective values (with semantic references resolved). Semantic tokens that depend on a changed ramp are also emitted
38
+ * as separate literals under the same change (in react-native-web, `--card: var(--raised)` is already resolved at `:root` and does not follow an override of the ramp alone)
39
+ * - Radius (`--radius-control` / `--radius-surface`): px
40
+ * - Typeface (`--font-geist` and so on): only the first name
41
41
  *
42
- * **実機で効くのは、ライト・ダークで値が違う色のトークンを使うクラス(`bg-card` など。実機ではランプへの参照になる)と書体**。
43
- * 角丸・本文サイズはビルド時にリテラルへ畳み込まれ、`NATIVE_BUILD_FIXED_TOKENS` の色のクラスも畳み込まれるので、実機では効かない
44
- * (react-native-web では CSS 変数なので効く)。何が効かないかは `nativeLimits` が返す。
42
+ * **What takes effect on a real device is classes that use color tokens with different values in light and dark (such as `bg-card`; on a real device they become references to the ramp) and the typeface**.
43
+ * Radius and body size are folded into literals at build time, and the color classes of `NATIVE_BUILD_FIXED_TOKENS` are folded too, so they have no effect on a real device
44
+ * (in react-native-web they are CSS variables and do take effect). `nativeLimits` returns what has no effect.
45
45
  */
46
46
  function toNativeVariables(tuning, catalog, mode) {
47
47
  const n = normalize(tuning, catalog);
@@ -60,8 +60,8 @@ function toNativeVariables(tuning, catalog, mode) {
60
60
  return out;
61
61
  }
62
62
  /**
63
- * 調整のうち、**native の実機では実行時に効かない項目**の説明(日本語)。空なら全部効く(react-native-web では全部効く)。
64
- * 調整の画面に出して、「効かないのは仕様」と分かるようにする。値は JSON に残るので、web で読めば効く。
63
+ * Descriptions (in Japanese) of the tuning items that **have no effect at runtime on a real native device**. Empty means everything takes effect (everything does in react-native-web).
64
+ * They are shown on the tuning screen so that it is clear the lack of effect is by design. The values stay in the JSON, so they take effect when read on web.
65
65
  */
66
66
  function nativeLimits(tuning, catalog) {
67
67
  const n = normalize(tuning, catalog);
@@ -1,14 +1,14 @@
1
1
  import { Tuning, TuningCatalog } from "./types.js";
2
2
  import { z } from "zod";
3
3
  //#region src/tuning/schema.d.ts
4
- /** エクスポート・保存の形式の名前とバージョン。形を変えたら `VERSION` を上げる。 */
4
+ /** The name and version of the export and save format. Bump `VERSION` when the shape changes. */
5
5
  export declare const FORMAT = "love3-tuning";
6
6
  export declare const VERSION = 1;
7
- /** 保存先(localStorage)のキー。 */
7
+ /** The key of the storage location (localStorage). */
8
8
  export declare const STORAGE_KEY = "love3-preview:tuning";
9
9
  /**
10
- * 形式の骨組み。**知らない項目は断る**(`strictObject`)。トークン名・色の中身など、DS に依存する検査は `parseTuning` が足す。
11
- * 全部省略できる(既定との差分だけを書く)。
10
+ * The skeleton of the format. **Unknown fields are rejected** (`strictObject`). Checks that depend on the design system, such as token names and color contents, are added by `parseTuning`.
11
+ * Every field can be omitted (write only the difference from the defaults).
12
12
  */
13
13
  declare const envelope: z.ZodObject<{
14
14
  format: z.ZodLiteral<"love3-tuning">;
@@ -35,13 +35,13 @@ declare const envelope: z.ZodObject<{
35
35
  }>>;
36
36
  }, z.core.$strict>;
37
37
  type Envelope = z.output<typeof envelope>;
38
- /** 取り込む JSON の大きさの上限(バイト)。貼り付け・ファイルとも。 */
38
+ /** The upper limit of the size of an imported JSON (bytes), for both pasting and files. */
39
39
  export declare const MAX_IMPORT_BYTES: number;
40
- /** 1 つの表(`tokens.light` / `tokens.dark` / `semantic`)の項目数の上限。調整できる名前は 50 に満たない。 */
40
+ /** The upper limit of the number of entries in one table (`tokens.light` / `tokens.dark` / `semantic`). There are fewer than 50 names that can be tuned. */
41
41
  export declare const MAX_ENTRIES = 200;
42
- /** 断る理由を、ここまで並べる(残りは「ほか N 件」)。 */
42
+ /** Lists rejection reasons up to this many (the rest become "N more"). */
43
43
  export declare const MAX_REASONS = 20;
44
- /** 取り込もうとしている文字が、上限(`MAX_IMPORT_BYTES`)を超えるか。 */
44
+ /** Whether the text being imported exceeds the limit (`MAX_IMPORT_BYTES`). */
45
45
  export declare function tooLarge(text: string): boolean;
46
46
  export declare const TOO_LARGE_REASON = "大きすぎます(256 KB まで)";
47
47
  export declare function fontProblem(value: string): string | undefined;
@@ -53,17 +53,17 @@ export type ParseResult = {
53
53
  reasons: string[];
54
54
  };
55
55
  /**
56
- * エクスポートの JSON(文字列)を読んで検証する。**1 つでも不正なら全体を断る(部分適用しない)**。
57
- * 断る理由は、見つけたものを全部、項目の場所つきの日本語で返す。
56
+ * Reads and validates an exported JSON (a string). **If anything is invalid, the whole input is rejected (no partial application).**
57
+ * The rejection reasons are all the problems found, in Japanese, each with the location of the item.
58
58
  *
59
- * 断るもの: JSON として読めない・`format` / `version` が違う・知らない項目・未知のトークン名(`--名前`)・
60
- * 不正な色・ライト・ダーク共通のトークン(ブランド色)のダークの指定・未知のセマンティックトークン・選べない参照先・
61
- * 範囲外の角丸と本文サイズ・差し込めない書体。成功したら、既定と同じ項目を落とした形(`normalize`)で返す。
59
+ * What is rejected: unreadable JSON, a wrong `format` / `version`, unknown fields, unknown token names (`--name`),
60
+ * invalid colors, a dark specification for a token common to light and dark (brand colors), unknown semantic tokens, unselectable reference targets,
61
+ * out-of-range radius and body size, and typefaces that cannot be injected. On success, it returns the form with items equal to the defaults dropped (`normalize`).
62
62
  */
63
63
  export declare function parseTuning(text: string, catalog: TuningCatalog): ParseResult;
64
- /** 差分だけのエクスポート用オブジェクト(空の節は省く)。 */
64
+ /** The object for export containing only the difference (empty sections are omitted). */
65
65
  export declare function toExportObject(tuning: Tuning, catalog: TuningCatalog): Record<string, unknown>;
66
- /** エクスポート・保存の JSON(既定との差分だけ。整形つき)。 */
66
+ /** The JSON for export and saving (only the difference from the defaults; pretty-printed). */
67
67
  export declare function toJson(tuning: Tuning, catalog: TuningCatalog): string;
68
68
  //#endregion
69
69
  export type { Envelope };
@@ -5,17 +5,17 @@ import { normalize } from "./model.js";
5
5
  import { z } from "zod";
6
6
 
7
7
  //#region src/tuning/schema.ts
8
- /** エクスポート・保存の形式の名前とバージョン。形を変えたら `VERSION` を上げる。 */
8
+ /** The name and version of the export and save format. Bump `VERSION` when the shape changes. */
9
9
  const FORMAT = "love3-tuning";
10
10
  const VERSION = 1;
11
- /** 保存先(localStorage)のキー。 */
11
+ /** The key of the storage location (localStorage). */
12
12
  const STORAGE_KEY = "love3-preview:tuning";
13
13
  const colorMap = z.record(z.string(), z.string());
14
14
  const radiusPx = z.number().min(0, { error: "角丸は 0 以上です" }).max(64, { error: `角丸は ${64}px 以下です` });
15
15
  const fontValue = z.string();
16
16
  /**
17
- * 形式の骨組み。**知らない項目は断る**(`strictObject`)。トークン名・色の中身など、DS に依存する検査は `parseTuning` が足す。
18
- * 全部省略できる(既定との差分だけを書く)。
17
+ * The skeleton of the format. **Unknown fields are rejected** (`strictObject`). Checks that depend on the design system, such as token names and color contents, are added by `parseTuning`.
18
+ * Every field can be omitted (write only the difference from the defaults).
19
19
  */
20
20
  const envelope = z.strictObject({
21
21
  format: z.literal(FORMAT, { error: (issue) => `format は "${FORMAT}" にしてください(実際: ${show(issue.input)})` }),
@@ -44,26 +44,26 @@ const envelope = z.strictObject({
44
44
  function show(value) {
45
45
  return typeof value === "string" ? `"${value}"` : JSON.stringify(value) ?? String(value);
46
46
  }
47
- /** 取り込む JSON の大きさの上限(バイト)。貼り付け・ファイルとも。 */
47
+ /** The upper limit of the size of an imported JSON (bytes), for both pasting and files. */
48
48
  const MAX_IMPORT_BYTES = 262144;
49
- /** 1 つの表(`tokens.light` / `tokens.dark` / `semantic`)の項目数の上限。調整できる名前は 50 に満たない。 */
49
+ /** The upper limit of the number of entries in one table (`tokens.light` / `tokens.dark` / `semantic`). There are fewer than 50 names that can be tuned. */
50
50
  const MAX_ENTRIES = 200;
51
- /** 断る理由を、ここまで並べる(残りは「ほか N 件」)。 */
51
+ /** Lists rejection reasons up to this many (the rest become "N more"). */
52
52
  const MAX_REASONS = 20;
53
53
  const BYTE_ENCODER = new TextEncoder();
54
- /** 取り込もうとしている文字が、上限(`MAX_IMPORT_BYTES`)を超えるか。 */
54
+ /** Whether the text being imported exceeds the limit (`MAX_IMPORT_BYTES`). */
55
55
  function tooLarge(text) {
56
56
  return text.length > 262144 || BYTE_ENCODER.encode(text).length > 262144;
57
57
  }
58
58
  const TOO_LARGE_REASON = `大きすぎます(${MAX_IMPORT_BYTES / 1024} KB まで)`;
59
59
  /**
60
- * 書体の値(CSS の font-family)の**許可リスト**。次の部品を、カンマ区切りに並べたものだけを通す:
61
- * - 閉じたクォート付きの名前(`"Geist Variable"` / `'Yu Gothic'`)。中に `\` `;` `{` `}` `<` `>` と改行は置かない
62
- * - 素の名前(文字・数字・`-`・`_`・空白。非 ASCII も可。`sans-serif` `ui-monospace` など)
63
- * - `var(--font-…)` の参照(`--font-mono: var(--font-geist-mono)` のような既定の形)
60
+ * An **allowlist** for typeface values (CSS font-family). Only comma-separated lists of the following parts pass:
61
+ * - Names with closed quotes (`"Geist Variable"` / `'Yu Gothic'`). `\`, `;`, `{`, `}`, `<`, `>`, and newlines are not allowed inside
62
+ * - Bare names (letters, digits, `-`, `_`, and spaces; non-ASCII is allowed too; `sans-serif`, `ui-monospace`, and so on)
63
+ * - `var(--font-…)` references (the default form such as `--font-mono: var(--font-geist-mono)`)
64
64
  *
65
- * **クォートの外の括弧(`(` `)` `[` `]`)と閉じていないクォートは断る**。通すと、`;` や `}` が括弧・引用符に飲まれて、
66
- * 後ろの宣言や `.dark {}` のブロック全体が消える(`Arial(` の再現)。理由を返す(安全なら undefined)。
65
+ * **Brackets outside quotes (`(` `)` `[` `]`) and unclosed quotes are rejected.** If they were let through, a `;` or `}` would be swallowed by the bracket or quote,
66
+ * and the following declarations or the whole `.dark {}` block would disappear (reproduced with `Arial(`). Returns the reason (undefined if safe).
67
67
  */
68
68
  function unreadable(value, index) {
69
69
  return `書体の「${value.slice(index, index + 12).trim()}」から先を読めません。使えるのは、閉じたクォート付きの名前・素の名前(英数字・-・_・空白)・カンマ・var(--font-…) だけです(括弧 ( ) [ ] ; や閉じていない引用符は使えません)`;
@@ -86,12 +86,12 @@ function fontProblem(value) {
86
86
  }
87
87
  }
88
88
  /**
89
- * エクスポートの JSON(文字列)を読んで検証する。**1 つでも不正なら全体を断る(部分適用しない)**。
90
- * 断る理由は、見つけたものを全部、項目の場所つきの日本語で返す。
89
+ * Reads and validates an exported JSON (a string). **If anything is invalid, the whole input is rejected (no partial application).**
90
+ * The rejection reasons are all the problems found, in Japanese, each with the location of the item.
91
91
  *
92
- * 断るもの: JSON として読めない・`format` / `version` が違う・知らない項目・未知のトークン名(`--名前`)・
93
- * 不正な色・ライト・ダーク共通のトークン(ブランド色)のダークの指定・未知のセマンティックトークン・選べない参照先・
94
- * 範囲外の角丸と本文サイズ・差し込めない書体。成功したら、既定と同じ項目を落とした形(`normalize`)で返す。
92
+ * What is rejected: unreadable JSON, a wrong `format` / `version`, unknown fields, unknown token names (`--name`),
93
+ * invalid colors, a dark specification for a token common to light and dark (brand colors), unknown semantic tokens, unselectable reference targets,
94
+ * out-of-range radius and body size, and typefaces that cannot be injected. On success, it returns the form with items equal to the defaults dropped (`normalize`).
95
95
  */
96
96
  function parseTuning(text, catalog) {
97
97
  if (tooLarge(text)) return {
@@ -194,7 +194,7 @@ function parseTuning(text, catalog) {
194
194
  tuning: normalize(tuning, catalog)
195
195
  };
196
196
  }
197
- /** 差分だけのエクスポート用オブジェクト(空の節は省く)。 */
197
+ /** The object for export containing only the difference (empty sections are omitted). */
198
198
  function toExportObject(tuning, catalog) {
199
199
  const n = normalize(tuning, catalog);
200
200
  const out = {
@@ -211,11 +211,11 @@ function toExportObject(tuning, catalog) {
211
211
  if (n.shadow !== "default") out.shadow = n.shadow;
212
212
  return out;
213
213
  }
214
- /** エクスポート・保存の JSON(既定との差分だけ。整形つき)。 */
214
+ /** The JSON for export and saving (only the difference from the defaults; pretty-printed). */
215
215
  function toJson(tuning, catalog) {
216
216
  return JSON.stringify(toExportObject(tuning, catalog), null, 2);
217
217
  }
218
- /** 読んだ JSON の、決まった道筋にある表(オブジェクト)。無ければ undefined。 */
218
+ /** The table (object) at a given path in the parsed JSON. undefined if absent. */
219
219
  function rawTable(json, path) {
220
220
  let current = json;
221
221
  for (const key of path) {
@@ -1,36 +1,36 @@
1
1
  //#region src/tuning/types.d.ts
2
- /** ライト・ダーク。 */
2
+ /** Light and dark. */
3
3
  export type Mode = "light" | "dark";
4
4
  export declare const MODES: readonly Mode[];
5
5
  /**
6
- * 角丸の役割(`--radius-control` / `--radius-surface`。部品は `rounded-control` / `rounded-surface` を使う)。
7
- * - `control`: 操作する小さな要素(Button・入力・Select のトリガー・Checkbox・Badge・メニューの項目ほか)
8
- * - `surface`: 面・入れ物(Card・Dialog・Sheet・Popover・Alert・Tooltip・メニューの入れ物ほか)
6
+ * Radius roles (`--radius-control` / `--radius-surface`; components use `rounded-control` / `rounded-surface`).
7
+ * - `control`: small interactive elements (Button, inputs, the Select trigger, Checkbox, Badge, menu items, and so on)
8
+ * - `surface`: surfaces and containers (Card, Dialog, Sheet, Popover, Alert, Tooltip, menu containers, and so on)
9
9
  */
10
10
  export declare const RADIUS_ROLES: readonly ["control", "surface"];
11
11
  export type RadiusRole = (typeof RADIUS_ROLES)[number];
12
- /** 角丸(px)の上限。スライダも数値の入力も、ここまで。 */
12
+ /** The upper limit of the radius (px). Both the slider and numeric input stop here. */
13
13
  export declare const RADIUS_MAX = 64;
14
- /** 書体のキー(`--font-geist` / `--font-geist-mono` / `--font-jp`)。 */
14
+ /** Typeface keys (`--font-geist` / `--font-geist-mono` / `--font-jp`). */
15
15
  export declare const FONT_KEYS: readonly ["geist", "geistMono", "jp"];
16
16
  export type FontKey = (typeof FONT_KEYS)[number];
17
17
  export declare const FONT_TOKEN: Readonly<Record<FontKey, string>>;
18
- /** 本文サイズ(px)の範囲。 */
18
+ /** The range of the body size (px). */
19
19
  export declare const BODY_SIZE_MIN = 8;
20
20
  export declare const BODY_SIZE_MAX = 32;
21
21
  /**
22
- * 影の preset。`default` は love3 の既定(`--shadow-color` を使う淡い影)。`none` は全ての影を消す。
23
- * `preset` は Tailwind の既定の影に差し替える。
22
+ * Shadow presets. `default` is the love3 default (soft shadows using `--shadow-color`). `none` removes all shadows.
23
+ * `preset` swaps in Tailwind's default shadows.
24
24
  */
25
25
  export type ShadowPreset = "default" | "none" | "preset";
26
26
  /**
27
- * 調整の内容。**既定との差分だけ**を持つ(空 = 既定どおり)。保存・エクスポートの正本と同じ形。
27
+ * The content of a tuning. It holds **only the difference from the defaults** (empty = the defaults as they are). The same shape as the canonical form for saving and exporting.
28
28
  *
29
- * - `tokens`: 色のトークンの上書き。ライト・ダーク別。ブランド色(`lt-three*`)は共通なので `light` にだけ持つ
30
- * - `radius`: 役割ごとの角丸(px)。`control`(操作する小さな要素)と `surface`(面・入れ物)。無ければ既定(`TuningCatalog.radius`)
31
- * - `semantic`: セマンティックトークン(`background` など)の参照先(ランプ・状態・ブランドの名前)
32
- * - `font`: 書体(CSS の font-family の値)と本文サイズ(px)
33
- * - `shadow`: 影の preset(既定は `default` = love3 の淡い影)
29
+ * - `tokens`: overrides of color tokens, per light and dark. Brand colors (`lt-three*`) are common to both, so they are held only in `light`
30
+ * - `radius`: the radius (px) per role. `control` (small interactive elements) and `surface` (surfaces and containers). Falls back to the default (`TuningCatalog.radius`) when absent
31
+ * - `semantic`: what the semantic tokens (`background` and so on) refer to (names of ramp, state, and brand tokens)
32
+ * - `font`: the typeface (a CSS font-family value) and the body size (px)
33
+ * - `shadow`: the shadow preset (the default is `default` = the love3 soft shadows)
34
34
  */
35
35
  export interface Tuning {
36
36
  tokens: Record<Mode, Record<string, string>>;
@@ -42,31 +42,31 @@ export interface Tuning {
42
42
  shadow: ShadowPreset;
43
43
  }
44
44
  export declare function emptyTuning(): Tuning;
45
- /** 色のトークンの区分。 */
45
+ /** The groups of color tokens. */
46
46
  export type ColorGroup = "ramp" | "action" | "brand" | "state" | "chart";
47
47
  export interface ColorToken {
48
48
  name: string;
49
49
  group: ColorGroup;
50
- /** ダークで別の値を持てるか。ブランド色は共通なので持たない。 */
50
+ /** Whether it can have a separate value in dark. Brand colors are common to both, so they do not. */
51
51
  hasDark: boolean;
52
- /** 半透明を許すか(scrim)。それ以外は不透明な `#rrggbb` だけ。 */
52
+ /** Whether translucency is allowed (scrim). Everything else is an opaque `#rrggbb` only. */
53
53
  alpha: boolean;
54
54
  }
55
55
  /**
56
- * 調整の対象と既定値。DS から作る(`buildCatalog`)。ロジックはこの形だけを見るので、DS に依存せず Node でテストできる。
56
+ * What can be tuned, and the defaults. Built from the design system (`buildCatalog`). The logic looks only at this shape, so it does not depend on the design system and can be tested in Node.
57
57
  */
58
58
  export interface TuningCatalog {
59
- /** 既定の実値(`var()` を解決したもの。love3 の `tokens`)。 */
59
+ /** The default actual values (with `var()` resolved; the love3 `tokens`). */
60
60
  defaults: Readonly<Record<Mode, Readonly<Record<string, string>>>>;
61
- /** 色のトークン(生のランプ・主操作・ブランド・状態・チャート)。定義の順。 */
61
+ /** The color tokens (raw ramp, primary action, brand, state, chart), in definition order. */
62
62
  colors: readonly ColorToken[];
63
- /** セマンティックトークン名 → 既定の参照先(`background` → `paper`)。定義の順。 */
63
+ /** Semantic token name → default reference (`background` → `paper`), in definition order. */
64
64
  semantic: Readonly<Record<string, string>>;
65
- /** セマンティックの参照先に選べる名前(不透明な色のトークン)。 */
65
+ /** The names that can be chosen as the target of a semantic reference (opaque color tokens). */
66
66
  refOptions: readonly string[];
67
- /** 役割ごとの角丸の既定(px)。CSS の `@theme`(`--radius-control` / `--radius-surface`)から読む。 */
67
+ /** The default radius (px) per role. Read from the CSS `@theme` (`--radius-control` / `--radius-surface`). */
68
68
  radius: Readonly<Record<RadiusRole, number>>;
69
- /** 本文サイズの既定(px)と行の高さ(px)。 */
69
+ /** The default body size (px) and line height (px). */
70
70
  body: {
71
71
  size: number;
72
72
  lineHeight: number;
@@ -1,14 +1,14 @@
1
1
  //#region src/tuning/types.ts
2
2
  const MODES = ["light", "dark"];
3
3
  /**
4
- * 角丸の役割(`--radius-control` / `--radius-surface`。部品は `rounded-control` / `rounded-surface` を使う)。
5
- * - `control`: 操作する小さな要素(Button・入力・Select のトリガー・Checkbox・Badge・メニューの項目ほか)
6
- * - `surface`: 面・入れ物(Card・Dialog・Sheet・Popover・Alert・Tooltip・メニューの入れ物ほか)
4
+ * Radius roles (`--radius-control` / `--radius-surface`; components use `rounded-control` / `rounded-surface`).
5
+ * - `control`: small interactive elements (Button, inputs, the Select trigger, Checkbox, Badge, menu items, and so on)
6
+ * - `surface`: surfaces and containers (Card, Dialog, Sheet, Popover, Alert, Tooltip, menu containers, and so on)
7
7
  */
8
8
  const RADIUS_ROLES = ["control", "surface"];
9
- /** 角丸(px)の上限。スライダも数値の入力も、ここまで。 */
9
+ /** The upper limit of the radius (px). Both the slider and numeric input stop here. */
10
10
  const RADIUS_MAX = 64;
11
- /** 書体のキー(`--font-geist` / `--font-geist-mono` / `--font-jp`)。 */
11
+ /** Typeface keys (`--font-geist` / `--font-geist-mono` / `--font-jp`). */
12
12
  const FONT_KEYS = [
13
13
  "geist",
14
14
  "geistMono",
@@ -19,7 +19,7 @@ const FONT_TOKEN = {
19
19
  geistMono: "font-geist-mono",
20
20
  jp: "font-jp"
21
21
  };
22
- /** 本文サイズ(px)の範囲。 */
22
+ /** The range of the body size (px). */
23
23
  const BODY_SIZE_MIN = 8;
24
24
  const BODY_SIZE_MAX = 32;
25
25
  function emptyTuning() {
@@ -2,19 +2,19 @@ import { ChartCommonProps, LineChartSharedProps } from "../../shared/analytics.j
2
2
  import { CSSProperties } from "react";
3
3
  //#region src/web/analytics/line-chart.d.ts
4
4
  export type LineChartProps = ChartCommonProps & LineChartSharedProps & {
5
- /** 外側の要素に渡す style(native の `style: ViewStyle` に当たる)。 */
5
+ /** Style passed to the outer element (corresponds to native's `style: ViewStyle`). */
6
6
  style?: CSSProperties;
7
7
  className?: string;
8
- /** 縦軸の目盛りとツールチップの値の整形(web の追加。native の `LineChart` は OS のチャートが整形する)。 */
8
+ /** Formatting of the y-axis ticks and the tooltip values (a web addition. Native's `LineChart` is formatted by the OS chart). */
9
9
  formatValue?: (value: number) => string;
10
- /** データが空のときの文言(web の追加)。 */
10
+ /** Text shown when there is no data (a web addition). */
11
11
  emptyText?: string;
12
12
  };
13
13
  /**
14
- * 単一系列の折れ線。native の `analytics/line-chart` と同じ API(`shared/analytics.ts`)。**`data` と `formatValue` は参照を安定させて渡す**(`MultiLineChart` と同じ)。
15
- * 中身は 1 本の系列の `MultiLineChart`(凡例は出さない)。複数の系列を重ねるなら `MultiLineChart`。
14
+ * A single-series line chart. Same API as native's `analytics/line-chart` (`shared/analytics.ts`). **Pass `data` and `formatValue` with stable references** (same as `MultiLineChart`).
15
+ * Inside it is a `MultiLineChart` with one series (no legend). To overlay several series, use `MultiLineChart`.
16
16
  *
17
- * native の `LineChart` は iOS の SwiftUI Charts で、iOS 以外では `fallbackText` を出す。web は常に描くので `fallbackText` を持たない。
17
+ * Native's `LineChart` is iOS SwiftUI Charts, and shows `fallbackText` on anything other than iOS. Web always draws, so it has no `fallbackText`.
18
18
  */
19
19
  export declare function LineChart({ data, color, ...rest }: LineChartProps): import("react").JSX.Element;
20
20
  //#endregion
@@ -5,10 +5,10 @@ import { jsx } from "react/jsx-runtime";
5
5
 
6
6
  //#region src/web/analytics/line-chart.tsx
7
7
  /**
8
- * 単一系列の折れ線。native の `analytics/line-chart` と同じ API(`shared/analytics.ts`)。**`data` と `formatValue` は参照を安定させて渡す**(`MultiLineChart` と同じ)。
9
- * 中身は 1 本の系列の `MultiLineChart`(凡例は出さない)。複数の系列を重ねるなら `MultiLineChart`。
8
+ * A single-series line chart. Same API as native's `analytics/line-chart` (`shared/analytics.ts`). **Pass `data` and `formatValue` with stable references** (same as `MultiLineChart`).
9
+ * Inside it is a `MultiLineChart` with one series (no legend). To overlay several series, use `MultiLineChart`.
10
10
  *
11
- * native の `LineChart` は iOS の SwiftUI Charts で、iOS 以外では `fallbackText` を出す。web は常に描くので `fallbackText` を持たない。
11
+ * Native's `LineChart` is iOS SwiftUI Charts, and shows `fallbackText` on anything other than iOS. Web always draws, so it has no `fallbackText`.
12
12
  */
13
13
  function LineChart({ data, color = "var(--chart-1)", ...rest }) {
14
14
  const series = useMemo(() => [{
@@ -2,17 +2,17 @@ import { MetricCardSharedProps } from "../../shared/analytics.js";
2
2
  import { ReactNode } from "react";
3
3
  //#region src/web/analytics/metric-card.d.ts
4
4
  export type MetricCardProps = Omit<MetricCardSharedProps, "label"> & {
5
- /** 指標の名前。文字列のほか、ヘルプのトリガー付きの見出しなど要素も渡せる(native は文字列)。 */
5
+ /** Name of the metric. Besides a string you can pass an element, such as a heading with a help trigger (native takes a string). */
6
6
  label: ReactNode;
7
7
  };
8
8
  /**
9
- * 面付きの単一指標(ラベル + 大型の等幅数値 + 補助)。native の `analytics/metric-card` と同じ API(`shared/analytics.ts`)。
10
- * raised 面 + 1px の薄い枠 + surface 角丸で、影は付けない。
9
+ * A single metric on a surface (label + a large monospaced number + supporting text). Same API as native's `analytics/metric-card` (`shared/analytics.ts`).
10
+ * A raised surface + a thin 1px border + the surface corner radius, with no shadow.
11
11
  *
12
- * 中身は `<dl>`(ラベルが dt・値と補助が dd)で、それ自体で成り立つ(グリッドの親は `<div>` でよい)。
13
- * 値は 1 行に収め、入りきらないときは省略する(折り返さない)。
12
+ * Inside it is a `<dl>` (the label is a dt; the value and the supporting text are dd), and it stands on its own (a grid parent can be a `<div>`).
13
+ * The value stays on one line and is truncated when it does not fit (it does not wrap).
14
14
  *
15
- * `trend` が正なら値を `state-success`、負なら `state-error` で塗る。**色だけで伝えない**ので、増減は `value` に符号を含める。
15
+ * When `trend` is positive the value is coloured `state-success`; when negative, `state-error`. **Meaning is not conveyed by colour alone**, so put the sign in `value`.
16
16
  */
17
17
  export declare function MetricCard({ label, value, subValue, trend, className }: MetricCardProps): import("react").JSX.Element;
18
18
  //#endregion
@@ -3,13 +3,13 @@ import { jsx, jsxs } from "react/jsx-runtime";
3
3
 
4
4
  //#region src/web/analytics/metric-card.tsx
5
5
  /**
6
- * 面付きの単一指標(ラベル + 大型の等幅数値 + 補助)。native の `analytics/metric-card` と同じ API(`shared/analytics.ts`)。
7
- * raised 面 + 1px の薄い枠 + surface 角丸で、影は付けない。
6
+ * A single metric on a surface (label + a large monospaced number + supporting text). Same API as native's `analytics/metric-card` (`shared/analytics.ts`).
7
+ * A raised surface + a thin 1px border + the surface corner radius, with no shadow.
8
8
  *
9
- * 中身は `<dl>`(ラベルが dt・値と補助が dd)で、それ自体で成り立つ(グリッドの親は `<div>` でよい)。
10
- * 値は 1 行に収め、入りきらないときは省略する(折り返さない)。
9
+ * Inside it is a `<dl>` (the label is a dt; the value and the supporting text are dd), and it stands on its own (a grid parent can be a `<div>`).
10
+ * The value stays on one line and is truncated when it does not fit (it does not wrap).
11
11
  *
12
- * `trend` が正なら値を `state-success`、負なら `state-error` で塗る。**色だけで伝えない**ので、増減は `value` に符号を含める。
12
+ * When `trend` is positive the value is coloured `state-success`; when negative, `state-error`. **Meaning is not conveyed by colour alone**, so put the sign in `value`.
13
13
  */
14
14
  function MetricCard({ label, value, subValue, trend, className }) {
15
15
  const tone = trend === void 0 || trend === 0 ? void 0 : trend > 0 ? "up" : "down";