@lt-three/love3 0.0.0 → 0.1.1

package/dist/tuning/css.js

@@ -0,0 +1,147 @@
+import { FONT_KEYS, FONT_TOKEN, RADIUS_ROLES } from "./types.js";
+import { bodyLineHeight, colorValue, normalize } from "./model.js";
+
+//#region src/tuning/css.ts
+/** 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)",
+	sm: "0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1)",
+	md: "0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1)",
+	lg: "0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1)",
+	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)"
+};
+/** The preset that removes shadows (the same steps as `SHADOW_PRESET`). */
+const SHADOW_NONE = {
+	"2xs": "none",
+	xs: "none",
+	sm: "none",
+	md: "none",
+	lg: "none",
+	xl: "none",
+	"2xl": "none"
+};
+/** 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);
+}
+function decl(name, value) {
+	return `  --${name}: ${value};`;
+}
+function block(selector, lines) {
+	return lines.length === 0 ? "" : `${selector} {\n${lines.join("\n")}\n}`;
+}
+/** 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];
+		return px === void 0 ? [] : [[`radius-${role}`, `${px}px`]];
+	});
+}
+/**
+* **The CSS injected into `<style id="love3-tuning">` at runtime.** An empty string when everything is at the defaults (nothing is injected).
+*
+* 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);
+	const touched = touchedColors(n, catalog);
+	const root = [];
+	const dark = [];
+	for (const name of touched) {
+		root.push(decl(name, colorValue(n, catalog, "light", name)));
+		if (catalog.colors.find((color) => color.name === name)?.hasDark === true) dark.push(decl(name, colorValue(n, catalog, "dark", name)));
+	}
+	for (const [name, ref] of Object.entries(n.semantic)) root.push(decl(name, `var(--${ref})`));
+	for (const [name, value] of radiusRoles(n)) root.push(decl(name, value));
+	for (const key of FONT_KEYS) {
+		const value = n.font[key];
+		if (value !== void 0) root.push(decl(FONT_TOKEN[key], value));
+	}
+	if (n.font.bodySize !== void 0) {
+		root.push(decl("text-body", `${n.font.bodySize}px`));
+		root.push(decl("text-body--line-height", `${bodyLineHeight(catalog, n.font.bodySize)}px`));
+	}
+	const parts = [block(":root", root), block(".dark", dark)];
+	for (const [step, value] of shadowValues(n)) parts.push(block(`.shadow-${step}`, [`  --tw-shadow: ${value};`]));
+	return parts.filter((part) => part !== "").join("\n");
+}
+/**
+* **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);
+	const root = [];
+	const dark = [];
+	for (const color of catalog.colors) {
+		const light = n.tokens.light[color.name];
+		if (light !== void 0) root.push(decl(color.name, light));
+		const night = n.tokens.dark[color.name];
+		if (night !== void 0) dark.push(decl(color.name, night));
+	}
+	for (const [name, ref] of Object.entries(n.semantic)) root.push(decl(name, `var(--${ref})`));
+	for (const key of FONT_KEYS) {
+		const value = n.font[key];
+		if (value !== void 0) root.push(decl(FONT_TOKEN[key], value));
+	}
+	const theme = radiusRoles(n).map(([name, value]) => decl(name, value));
+	for (const [step, value] of shadowValues(n)) theme.push(decl(`shadow-${step}`, value));
+	if (n.font.bodySize !== void 0) {
+		theme.push(decl("text-body", `${n.font.bodySize}px`));
+		theme.push(decl("text-body--line-height", `${bodyLineHeight(catalog, n.font.bodySize)}px`));
+	}
+	return [
+		block(":root", root),
+		block(".dark", dark),
+		block("@theme", theme)
+	].filter((part) => part !== "").join("\n\n");
+}
+/**
+* **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);
+	const lines = [];
+	const tokenLines = [];
+	for (const color of catalog.colors) {
+		if (n.tokens.light[color.name] === void 0 && n.tokens.dark[color.name] === void 0) continue;
+		const fields = [`name: ${JSON.stringify(color.name)}`, `value: ${JSON.stringify(colorValue(n, catalog, "light", color.name))}`];
+		if (color.hasDark) fields.push(`dark: ${JSON.stringify(colorValue(n, catalog, "dark", color.name))}`);
+		fields.push("color: true");
+		tokenLines.push(`{ ${fields.join(", ")} },`);
+	}
+	for (const [name, ref] of Object.entries(n.semantic)) tokenLines.push(`{ name: ${JSON.stringify(name)}, value: ${JSON.stringify(`var(--${ref})`)}, color: true },`);
+	for (const key of FONT_KEYS) {
+		const value = n.font[key];
+		if (value !== void 0) tokenLines.push(`{ name: ${JSON.stringify(FONT_TOKEN[key])}, value: ${JSON.stringify(value)} },`);
+	}
+	if (tokenLines.length > 0) lines.push("// groups[].tokens の該当する行を、次の値に差し替える", ...tokenLines);
+	const themeLines = radiusRoles(n).map(([name, value]) => `${JSON.stringify(name)}: ${JSON.stringify(value)},`);
+	for (const [step, value] of shadowValues(n)) themeLines.push(`${JSON.stringify(`shadow-${step}`)}: ${JSON.stringify(value)},`);
+	if (n.font.bodySize !== void 0) {
+		themeLines.push(`"text-body": ${JSON.stringify(`${n.font.bodySize}px`)},`);
+		themeLines.push(`"text-body--line-height": ${JSON.stringify(`${bodyLineHeight(catalog, n.font.bodySize)}px`)},`);
+	}
+	if (themeLines.length > 0) {
+		if (lines.length > 0) lines.push("");
+		lines.push("// theme の該当する行を、次の値に差し替える", ...themeLines);
+	}
+	return lines.join("\n");
+}
+
+//#endregion
+export { SHADOW_PRESET, toDefinitionDiff, toExportCss, toRuntimeCss };

package/dist/tuning/index.d.ts

@@ -0,0 +1,8 @@
+import { BODY_SIZE_MAX, BODY_SIZE_MIN, ColorGroup, ColorToken, FONT_KEYS, FONT_TOKEN, FontKey, MODES, Mode, RADIUS_MAX, RADIUS_ROLES, RadiusRole, ShadowPreset, Tuning, TuningCatalog, emptyTuning } from "./types.js";
+import { buildCatalog, buildCatalogSafe, findColor } from "./catalog.js";
+import { ColorResult, parseTokenColor } from "./color.js";
+import { SHADOW_PRESET, toDefinitionDiff, toExportCss, toRuntimeCss } from "./css.js";
+import { bodyLineHeight, colorValue, countChanges, defaultFont, effectiveTokens, isEmpty, modeOf, normalize, radiusPx, withBodySize, withColor, withFont, withRadius, withSemantic, withShadow } from "./model.js";
+import { NATIVE_BUILD_FIXED_BRAND_TOKENS, NATIVE_BUILD_FIXED_TOKENS, firstFontFamily, nativeLimits, toNativeVariables } from "./native.js";
+import { Envelope, FORMAT, MAX_ENTRIES, MAX_IMPORT_BYTES, MAX_REASONS, ParseResult, STORAGE_KEY, TOO_LARGE_REASON, VERSION, fontProblem, parseTuning, toExportObject, toJson, tooLarge } from "./schema.js";
+export { BODY_SIZE_MAX, BODY_SIZE_MIN, ColorGroup, ColorResult, ColorToken, type Envelope, FONT_KEYS, FONT_TOKEN, FORMAT, FontKey, MAX_ENTRIES, MAX_IMPORT_BYTES, MAX_REASONS, MODES, Mode, NATIVE_BUILD_FIXED_BRAND_TOKENS, NATIVE_BUILD_FIXED_TOKENS, ParseResult, RADIUS_MAX, RADIUS_ROLES, RadiusRole, SHADOW_PRESET, STORAGE_KEY, ShadowPreset, TOO_LARGE_REASON, Tuning, TuningCatalog, VERSION, bodyLineHeight, buildCatalog, buildCatalogSafe, colorValue, countChanges, defaultFont, effectiveTokens, emptyTuning, findColor, firstFontFamily, fontProblem, isEmpty, modeOf, nativeLimits, normalize, parseTokenColor, parseTuning, radiusPx, toDefinitionDiff, toExportCss, toExportObject, toJson, toNativeVariables, toRuntimeCss, tooLarge, withBodySize, withColor, withFont, withRadius, withSemantic, withShadow };

package/dist/tuning/index.js

@@ -0,0 +1,9 @@
+import { buildCatalog, buildCatalogSafe, findColor } from "./catalog.js";
+import { parseTokenColor } from "./color.js";
+import { BODY_SIZE_MAX, BODY_SIZE_MIN, FONT_KEYS, FONT_TOKEN, MODES, RADIUS_MAX, RADIUS_ROLES, emptyTuning } from "./types.js";
+import { bodyLineHeight, colorValue, countChanges, defaultFont, effectiveTokens, isEmpty, modeOf, normalize, radiusPx, withBodySize, withColor, withFont, withRadius, withSemantic, withShadow } from "./model.js";
+import { SHADOW_PRESET, toDefinitionDiff, toExportCss, toRuntimeCss } from "./css.js";
+import { NATIVE_BUILD_FIXED_BRAND_TOKENS, NATIVE_BUILD_FIXED_TOKENS, firstFontFamily, nativeLimits, toNativeVariables } from "./native.js";
+import { FORMAT, MAX_ENTRIES, MAX_IMPORT_BYTES, MAX_REASONS, STORAGE_KEY, TOO_LARGE_REASON, VERSION, fontProblem, parseTuning, toExportObject, toJson, tooLarge } from "./schema.js";
+
+export { BODY_SIZE_MAX, BODY_SIZE_MIN, FONT_KEYS, FONT_TOKEN, FORMAT, MAX_ENTRIES, MAX_IMPORT_BYTES, MAX_REASONS, MODES, NATIVE_BUILD_FIXED_BRAND_TOKENS, NATIVE_BUILD_FIXED_TOKENS, RADIUS_MAX, RADIUS_ROLES, SHADOW_PRESET, STORAGE_KEY, TOO_LARGE_REASON, VERSION, bodyLineHeight, buildCatalog, buildCatalogSafe, colorValue, countChanges, defaultFont, effectiveTokens, emptyTuning, findColor, firstFontFamily, fontProblem, isEmpty, modeOf, nativeLimits, normalize, parseTokenColor, parseTuning, radiusPx, toDefinitionDiff, toExportCss, toExportObject, toJson, toNativeVariables, toRuntimeCss, tooLarge, withBodySize, withColor, withFont, withRadius, withSemantic, withShadow };

package/dist/tuning/model.d.ts

@@ -0,0 +1,33 @@
+import { FontKey, Mode, RadiusRole, ShadowPreset, Tuning, TuningCatalog } from "./types.js";
+//#region src/tuning/model.d.ts
+/** 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;
+/** 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;
+/** 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;
+/**
+ * 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;
+/** 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;
+/**
+ * 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;
+/** 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;
+export declare function withRadius(tuning: Tuning, role: RadiusRole, px: number | undefined): Tuning;
+export declare function withFont(tuning: Tuning, key: FontKey, value: string | undefined): Tuning;
+export declare function withBodySize(tuning: Tuning, size: number | undefined): Tuning;
+export declare function withShadow(tuning: Tuning, shadow: ShadowPreset): Tuning;
+//#endregion

package/dist/tuning/model.js

@@ -0,0 +1,154 @@
+import { parseTokenColor } from "./color.js";
+import { FONT_KEYS, FONT_TOKEN, MODES, RADIUS_ROLES, emptyTuning } from "./types.js";
+
+//#region src/tuning/model.ts
+/** The mode that actually holds a color token. Brand colors are common to both, so a dark specification is folded into `light`. */
+function modeOf(catalog, name, mode) {
+	return mode === "dark" && catalog.colors.find((color) => color.name === name)?.hasDark === false ? "light" : mode;
+}
+/** The default font value. */
+function defaultFont(catalog, key) {
+	return catalog.defaults.light[FONT_TOKEN[key]] ?? "";
+}
+/** The radius (px) per role. Falls back to the default (control 6, surface 10) when unspecified. */
+function radiusPx(tuning, catalog, role) {
+	return tuning.radius[role] ?? catalog.radius[role];
+}
+/** The body line height (px). Proportional to the size (the ratio of the default 14px / 22px). */
+function bodyLineHeight(catalog, size) {
+	return Math.round(size * catalog.body.lineHeight / catalog.body.size);
+}
+/**
+* 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`).
+*/
+function normalize(tuning, catalog) {
+	const out = emptyTuning();
+	for (const mode of MODES) for (const color of catalog.colors) {
+		const raw = tuning.tokens[mode][color.name];
+		if (raw === void 0) continue;
+		if (mode === "dark" && !color.hasDark) continue;
+		const parsed = parseTokenColor(raw, { alpha: color.alpha });
+		const value = parsed.ok ? parsed.value : raw;
+		const fallback = catalog.defaults[mode][color.name];
+		if (value !== (fallback === void 0 ? void 0 : toCanonical(fallback, color.alpha))) out.tokens[mode][color.name] = value;
+	}
+	for (const [name, ref] of Object.entries(tuning.semantic)) if (Object.hasOwn(catalog.semantic, name) && ref !== catalog.semantic[name]) out.semantic[name] = ref;
+	for (const role of RADIUS_ROLES) {
+		const px = tuning.radius[role];
+		if (px !== void 0 && px !== catalog.radius[role]) out.radius[role] = px;
+	}
+	for (const key of FONT_KEYS) {
+		const value = tuning.font[key];
+		if (value !== void 0 && value !== defaultFont(catalog, key)) out.font[key] = value;
+	}
+	if (tuning.font.bodySize !== void 0 && tuning.font.bodySize !== catalog.body.size) out.font.bodySize = tuning.font.bodySize;
+	out.shadow = tuning.shadow;
+	return out;
+}
+function toCanonical(value, alpha) {
+	const parsed = parseTokenColor(value, { alpha });
+	return parsed.ok ? parsed.value : value;
+}
+/** Whether it equals the defaults (has no difference). */
+function isEmpty(tuning, catalog) {
+	return countChanges(tuning, catalog) === 0;
+}
+/** The number of differences from the defaults (1 per item of color, reference, radius, typeface, and shadow). */
+function countChanges(tuning, catalog) {
+	const n = normalize(tuning, catalog);
+	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);
+}
+/**
+* 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).
+*/
+function colorValue(tuning, catalog, mode, name) {
+	const ref = (Object.hasOwn(tuning.semantic, name) ? tuning.semantic[name] : void 0) ?? (Object.hasOwn(catalog.semantic, name) ? catalog.semantic[name] : void 0);
+	if (ref !== void 0) return colorValue(tuning, catalog, mode, ref);
+	const owner = modeOf(catalog, name, mode);
+	const override = Object.hasOwn(tuning.tokens[owner], name) ? tuning.tokens[owner][name] : void 0;
+	if (override !== void 0) return override;
+	const fallback = Object.hasOwn(catalog.defaults[mode], name) ? catalog.defaults[mode][name] : void 0;
+	if (fallback === void 0) throw new Error(`未定義のトークン: --${name}`);
+	return fallback;
+}
+/** 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`. */
+function effectiveTokens(tuning, catalog) {
+	const out = {
+		light: {},
+		dark: {}
+	};
+	for (const mode of MODES) {
+		for (const [name, value] of Object.entries(catalog.defaults[mode])) {
+			const isColor = catalog.colors.some((color) => color.name === name) || Object.hasOwn(catalog.semantic, name);
+			out[mode][name] = isColor ? colorValue(tuning, catalog, mode, name) : value;
+		}
+		for (const key of FONT_KEYS) out[mode][FONT_TOKEN[key]] = tuning.font[key] ?? defaultFont(catalog, key);
+		out[mode]["font-mono"] = out[mode]["font-geist-mono"] ?? "";
+		for (const role of RADIUS_ROLES) {
+			const px = tuning.radius[role];
+			if (px !== void 0) out[mode][`radius-${role}`] = `${px}px`;
+		}
+	}
+	return out;
+}
+function withColor(tuning, catalog, mode, name, value) {
+	const owner = modeOf(catalog, name, mode);
+	const table = { ...tuning.tokens[owner] };
+	if (value === void 0) delete table[name];
+	else table[name] = value;
+	return {
+		...tuning,
+		tokens: {
+			...tuning.tokens,
+			[owner]: table
+		}
+	};
+}
+function withSemantic(tuning, name, ref) {
+	const semantic = { ...tuning.semantic };
+	if (ref === void 0) delete semantic[name];
+	else semantic[name] = ref;
+	return {
+		...tuning,
+		semantic
+	};
+}
+function withRadius(tuning, role, px) {
+	const radius = { ...tuning.radius };
+	if (px === void 0) delete radius[role];
+	else radius[role] = px;
+	return {
+		...tuning,
+		radius
+	};
+}
+function withFont(tuning, key, value) {
+	const font = { ...tuning.font };
+	if (value === void 0) delete font[key];
+	else font[key] = value;
+	return {
+		...tuning,
+		font
+	};
+}
+function withBodySize(tuning, size) {
+	const { bodySize: _previous, ...rest } = tuning.font;
+	return {
+		...tuning,
+		font: size === void 0 ? rest : {
+			...rest,
+			bodySize: size
+		}
+	};
+}
+function withShadow(tuning, shadow) {
+	return {
+		...tuning,
+		shadow
+	};
+}
+
+//#endregion
+export { bodyLineHeight, colorValue, countChanges, defaultFont, effectiveTokens, isEmpty, modeOf, normalize, radiusPx, withBodySize, withColor, withFont, withRadius, withSemantic, withShadow };

package/dist/tuning/native.d.ts

@@ -0,0 +1,35 @@
+import { Mode, Tuning, TuningCatalog } from "./types.js";
+//#region src/tuning/native.d.ts
+/**
+ * Tokens with the **same value** in light and dark (not redefined in `.dark`), and the aliases pointing at them.
+ * react-native-css **folds a variable declared only once into a literal at build time**, so classes such as `bg-action`
+ * 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.
+ * `native/lib/tokens.test.ts` checks that the list does not drift from `definition.ts`.
+ */
+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"];
+/**
+ * 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`
+ * 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`
+ * because the folding check in `native/lib/tokens-check.ts` treats brand colors separately (so the list check does not drift).
+ */
+export declare const NATIVE_BUILD_FIXED_BRAND_TOKENS: readonly ["lt-three", "lt-three-foreground"];
+/** The first name in a typeface value (a CSS font-family list). RN's `fontFamily` takes only one name. undefined for `var()`. */
+export declare function firstFontFamily(value: string): string | undefined;
+/**
+ * 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**.
+ * - Color tokens: effective values (with semantic references resolved). Semantic tokens that depend on a changed ramp are also emitted
+ *   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)
+ * - Radius (`--radius-control` / `--radius-surface`): px
+ * - Typeface (`--font-geist` and so on): only the first name
+ *
+ * **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**.
+ * 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
+ * (in react-native-web they are CSS variables and do take effect). `nativeLimits` returns what has no effect.
+ */
+export declare function toNativeVariables(tuning: Tuning, catalog: TuningCatalog, mode: Mode): Record<`--${string}`, string>;
+/**
+ * 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).
+ * 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.
+ */
+export declare function nativeLimits(tuning: Tuning, catalog: TuningCatalog): string[];
+//#endregion

package/dist/tuning/native.js

@@ -0,0 +1,80 @@
+import { FONT_KEYS, FONT_TOKEN, RADIUS_ROLES } from "./types.js";
+import { effectiveTokens, normalize } from "./model.js";
+
+//#region src/tuning/native.ts
+/**
+* Tokens with the **same value** in light and dark (not redefined in `.dark`), and the aliases pointing at them.
+* react-native-css **folds a variable declared only once into a literal at build time**, so classes such as `bg-action`
+* 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.
+* `native/lib/tokens.test.ts` checks that the list does not drift from `definition.ts`.
+*/
+const NATIVE_BUILD_FIXED_TOKENS = [
+	"action",
+	"action-hover",
+	"action-foreground",
+	"primary",
+	"primary-foreground",
+	"ring",
+	"sidebar-primary",
+	"sidebar-primary-foreground",
+	"sidebar-ring",
+	"destructive-solid-foreground"
+];
+/**
+* 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`
+* 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`
+* because the folding check in `native/lib/tokens-check.ts` treats brand colors separately (so the list check does not drift).
+*/
+const NATIVE_BUILD_FIXED_BRAND_TOKENS = ["lt-three", "lt-three-foreground"];
+/** The first name in a typeface value (a CSS font-family list). RN's `fontFamily` takes only one name. undefined for `var()`. */
+function firstFontFamily(value) {
+	const first = value.split(",")[0]?.trim() ?? "";
+	if (first === "" || first.startsWith("var(")) return void 0;
+	return first.replace(/^["']|["']$/g, "");
+}
+/**
+* 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**.
+* - Color tokens: effective values (with semantic references resolved). Semantic tokens that depend on a changed ramp are also emitted
+*   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)
+* - Radius (`--radius-control` / `--radius-surface`): px
+* - Typeface (`--font-geist` and so on): only the first name
+*
+* **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**.
+* 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
+* (in react-native-web they are CSS variables and do take effect). `nativeLimits` returns what has no effect.
+*/
+function toNativeVariables(tuning, catalog, mode) {
+	const n = normalize(tuning, catalog);
+	const effective = effectiveTokens(n, catalog)[mode];
+	const out = {};
+	const isColor = (name) => catalog.colors.some((color) => color.name === name) || Object.hasOwn(catalog.semantic, name);
+	for (const [name, value] of Object.entries(effective)) if (isColor(name) && value !== catalog.defaults[mode][name]) out[`--${name}`] = value;
+	for (const role of RADIUS_ROLES) {
+		const px = n.radius[role];
+		if (px !== void 0) out[`--radius-${role}`] = `${px}px`;
+	}
+	for (const key of FONT_KEYS) {
+		const family = n.font[key] === void 0 ? void 0 : firstFontFamily(n.font[key]);
+		if (family !== void 0) out[`--${FONT_TOKEN[key]}`] = family;
+	}
+	return out;
+}
+/**
+* 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).
+* 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.
+*/
+function nativeLimits(tuning, catalog) {
+	const n = normalize(tuning, catalog);
+	const notes = [];
+	const fixed = /* @__PURE__ */ new Set([...NATIVE_BUILD_FIXED_TOKENS, ...NATIVE_BUILD_FIXED_BRAND_TOKENS]);
+	const touched = [.../* @__PURE__ */ new Set([...Object.keys(n.tokens.light), ...Object.keys(n.tokens.dark)])].filter((name) => fixed.has(name));
+	if (touched.length > 0) notes.push(`${touched.map((name) => `--${name}`).join("・")} は、実機ではビルド時に固定されるクラス（bg-action など）に効きません（TS から色を引く部品には効きます）`);
+	if (Object.keys(n.semantic).length > 0) notes.push("セマンティックトークンの参照先の変更は、実機ではクラスに効きません（ビルド時にランプへ解決されるため）");
+	if (Object.keys(n.radius).length > 0) notes.push("角丸は、実機ではビルド時に固定されるので効きません");
+	if (n.font.bodySize !== void 0) notes.push("本文サイズは、実機ではビルド時に固定されるので効きません");
+	if (n.shadow !== "default") notes.push("影の preset は native には適用しません");
+	return notes;
+}
+
+//#endregion
+export { NATIVE_BUILD_FIXED_BRAND_TOKENS, NATIVE_BUILD_FIXED_TOKENS, firstFontFamily, nativeLimits, toNativeVariables };

package/dist/tuning/schema.d.ts

@@ -0,0 +1,69 @@
+import { Tuning, TuningCatalog } from "./types.js";
+import { z } from "zod";
+//#region src/tuning/schema.d.ts
+/** The name and version of the export and save format. Bump `VERSION` when the shape changes. */
+export declare const FORMAT = "love3-tuning";
+export declare const VERSION = 1;
+/** The key of the storage location (localStorage). */
+export declare const STORAGE_KEY = "love3-preview:tuning";
+/**
+ * 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`.
+ * Every field can be omitted (write only the difference from the defaults).
+ */
+declare const envelope: z.ZodObject<{
+  format: z.ZodLiteral<"love3-tuning">;
+  version: z.ZodLiteral<1>;
+  tokens: z.ZodOptional<z.ZodObject<{
+    light: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodString>>;
+    dark: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodString>>;
+  }, z.core.$strict>>;
+  radius: z.ZodOptional<z.ZodObject<{
+    control: z.ZodOptional<z.ZodNumber>;
+    surface: z.ZodOptional<z.ZodNumber>;
+  }, z.core.$strict>>;
+  semantic: z.ZodOptional<z.ZodRecord<z.ZodString, z.ZodString>>;
+  font: z.ZodOptional<z.ZodObject<{
+    geist: z.ZodOptional<z.ZodString>;
+    geistMono: z.ZodOptional<z.ZodString>;
+    jp: z.ZodOptional<z.ZodString>;
+    bodySize: z.ZodOptional<z.ZodNumber>;
+  }, z.core.$strict>>;
+  shadow: z.ZodOptional<z.ZodEnum<{
+    default: "default";
+    none: "none";
+    preset: "preset";
+  }>>;
+}, z.core.$strict>;
+type Envelope = z.output<typeof envelope>;
+/** The upper limit of the size of an imported JSON (bytes), for both pasting and files. */
+export declare const MAX_IMPORT_BYTES: number;
+/** 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. */
+export declare const MAX_ENTRIES = 200;
+/** Lists rejection reasons up to this many (the rest become "N more"). */
+export declare const MAX_REASONS = 20;
+/** Whether the text being imported exceeds the limit (`MAX_IMPORT_BYTES`). */
+export declare function tooLarge(text: string): boolean;
+export declare const TOO_LARGE_REASON = "大きすぎます（256 KB まで）";
+export declare function fontProblem(value: string): string | undefined;
+export type ParseResult = {
+  ok: true;
+  tuning: Tuning;
+} | {
+  ok: false;
+  reasons: string[];
+};
+/**
+ * Reads and validates an exported JSON (a string). **If anything is invalid, the whole input is rejected (no partial application).**
+ * The rejection reasons are all the problems found, in Japanese, each with the location of the item.
+ *
+ * What is rejected: unreadable JSON, a wrong `format` / `version`, unknown fields, unknown token names (`--name`),
+ * invalid colors, a dark specification for a token common to light and dark (brand colors), unknown semantic tokens, unselectable reference targets,
+ * 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`).
+ */
+export declare function parseTuning(text: string, catalog: TuningCatalog): ParseResult;
+/** The object for export containing only the difference (empty sections are omitted). */
+export declare function toExportObject(tuning: Tuning, catalog: TuningCatalog): Record<string, unknown>;
+/** The JSON for export and saving (only the difference from the defaults; pretty-printed). */
+export declare function toJson(tuning: Tuning, catalog: TuningCatalog): string;
+//#endregion
+export type { Envelope };