@lt-three/love3 0.0.0-stage → 0.1.0

package/dist/native/layout/tab-bar.js

@@ -0,0 +1,48 @@
+import { useTokenColor } from "../lib/token-color.js";
+import { cn } from "../lib/utils.js";
+import { Text as Text$1 } from "../base/text.js";
+import { Pressable, View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/native/layout/tab-bar.tsx
+/**
+* 画面の下に置く、トップレベルの行き先の切り替え（3〜5 件）。`layout/tabs`（本文を切り替える下線タブ）とは別物。
+* 選択中は `text-action-ink`（暗い面でも AA）で、選択状態は色だけにせず太さ（`font-semibold`）でも示す。
+* 1 件の押す範囲は高さ 56px 以上（実機の 44pt 基準を上回る）。**下端の安全領域（ホームインジケータ）はアプリが持つ**
+* （`className` に `pb-*` を渡すか、外側の `SafeAreaView` に置く）。
+*/
+function TabBar({ items, value, onValueChange, accessibilityLabel = "メイン", className }) {
+	const activeColor = useTokenColor("--action-ink");
+	const inactiveColor = useTokenColor("--muted-foreground");
+	return /* @__PURE__ */ jsx(View, {
+		role: "navigation",
+		"aria-label": accessibilityLabel,
+		className: cn("border-line bg-card border-t", className),
+		children: /* @__PURE__ */ jsx(View, {
+			role: "tablist",
+			className: "flex-row",
+			children: items.map((item) => {
+				const active = item.value === value;
+				const color = active ? activeColor : inactiveColor;
+				return /* @__PURE__ */ jsxs(Pressable, {
+					role: "tab",
+					"aria-selected": active,
+					"aria-label": item.label,
+					onPress: () => onValueChange(item.value),
+					className: "min-h-14 flex-1 items-center justify-center gap-1 px-2 py-2",
+					children: [item.icon ? item.icon({
+						active,
+						color
+					}) : null, /* @__PURE__ */ jsx(Text$1, {
+						numberOfLines: 1,
+						className: cn("text-xs", active ? "text-action-ink font-semibold" : "text-muted-foreground font-normal"),
+						children: item.label
+					})]
+				}, item.value);
+			})
+		})
+	});
+}
+
+//#endregion
+export { TabBar };

package/dist/native/layout/tabs.d.ts

@@ -0,0 +1,28 @@
+import { ReactNode } from "react";
+//#region src/native/layout/tabs.d.ts
+export type TabType = {
+  [value: string]: {
+    name: string;
+    render?: () => ReactNode;
+    onSelect?: () => void;
+  };
+};
+export type TabsProps = {
+  tabs: TabType;
+  defaultValue?: string;
+  /** 制御モード: 外部から選択値を管理する場合に指定する。 */
+  value?: string;
+  onValueChange?: (value: string) => void;
+  /** タブ列と同じ行の右端に置くスロット（ツールバー的に使う）。 */
+  trailing?: ReactNode;
+  className?: string;
+};
+/**
+ * `@lt-three/web` の layout/tabs と同じレコード駆動の API を持つタブ。
+ * 見た目は web の base/tabs に揃えたフラッシュレフトの下線タブで、
+ * 共有の薄い罫線の上にアクティブの 2px インディゴ下線が乗る。
+ *
+ * タブ数が増えても折り返さないよう横スクロールする（web の `flex-wrap` の代わり）。
+ */
+export declare function Tabs({ tabs, defaultValue, value, onValueChange, trailing, className }: TabsProps): import("react").JSX.Element;
+//#endregion

package/dist/native/layout/tabs.js

@@ -0,0 +1,54 @@
+import { cn } from "../lib/utils.js";
+import { Text as Text$1 } from "../base/text.js";
+import { useState } from "react";
+import { Pressable, ScrollView, View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/native/layout/tabs.tsx
+/**
+* `@lt-three/web` の layout/tabs と同じレコード駆動の API を持つタブ。
+* 見た目は web の base/tabs に揃えたフラッシュレフトの下線タブで、
+* 共有の薄い罫線の上にアクティブの 2px インディゴ下線が乗る。
+*
+* タブ数が増えても折り返さないよう横スクロールする（web の `flex-wrap` の代わり）。
+*/
+function Tabs({ tabs, defaultValue, value, onValueChange, trailing, className }) {
+	const keys = Object.keys(tabs);
+	const [internalValue, setInternalValue] = useState(defaultValue ?? keys[0] ?? "");
+	const active = value ?? internalValue;
+	const select = (next) => {
+		tabs[next]?.onSelect?.();
+		onValueChange?.(next);
+		if (value === void 0) setInternalValue(next);
+	};
+	const hasContent = Object.values(tabs).some((tab) => tab.render);
+	return /* @__PURE__ */ jsxs(View, {
+		className: cn(hasContent && "gap-4", className),
+		children: [/* @__PURE__ */ jsxs(View, {
+			role: "tablist",
+			className: "flex-row items-center border-b border-line",
+			children: [/* @__PURE__ */ jsx(ScrollView, {
+				horizontal: true,
+				showsHorizontalScrollIndicator: false,
+				contentContainerStyle: { gap: 24 },
+				children: keys.map((key) => {
+					const on = key === active;
+					return /* @__PURE__ */ jsxs(Pressable, {
+						role: "tab",
+						"aria-selected": on,
+						onPress: () => select(key),
+						className: "-mb-px pb-2.5",
+						hitSlop: 12,
+						children: [/* @__PURE__ */ jsx(Text$1, {
+							className: cn("text-sm", on ? "text-foreground font-medium" : "text-muted-foreground font-normal"),
+							children: tabs[key]?.name
+						}), on ? /* @__PURE__ */ jsx(View, { className: "absolute inset-x-0 bottom-0 h-0.5 bg-action" }) : null]
+					}, key);
+				})
+			}), trailing]
+		}), hasContent ? tabs[active]?.render?.() : null]
+	});
+}
+
+//#endregion
+export { Tabs };

package/dist/native/layout/tuning-panel.d.ts

@@ -0,0 +1,24 @@
+import { Tuning, TuningCatalog } from "../../tuning/types.js";
+//#region src/native/layout/tuning-panel.d.ts
+export type TuningPanelProps = {
+  /** 調整の内容（既定との差分）。保存先はアプリが持つ。 */
+  tuning: Tuning;
+  onChange: (next: Tuning) => void;
+  /** 調整の対象。既定は love3 の生成物。 */
+  catalog?: TuningCatalog;
+  /** 書き出したとき（コピー・共有などはアプリが決める）。JSON の文字列が渡る。 */
+  onExport?: (json: string) => void;
+};
+/**
+ * native の調整の画面（最小限）。トークンを動かし、`love3-tuning` の JSON で書き出し・読み込みする。web の `/tuning` と同じ形式。
+ *
+ * - 色: 今のテーマ（ライト・ダーク）の値を 16 進で編集する。読めない値は赤い枠のままで、適用しない
+ * - 角丸: 役割ごとに px（実機ではビルド時に固定されるので効かない。JSON には残る）
+ * - JSON: 「書き出す」で今の調整を欄に出し（`onExport` にも渡す）、「読み込む」で欄の JSON を検証して適用する。
+ *   1 つでも不正なら全体を断り、理由を出す（部分適用しない）
+ * - 実機で効かない項目は、`nativeLimits` の説明を出す
+ *
+ * 作り込みはしない（love3 の native 部品だけで組んだ検証用）。
+ */
+export declare function TuningPanel({ tuning, onChange, catalog, onExport }: TuningPanelProps): import("react").JSX.Element;
+//#endregion

package/dist/native/layout/tuning-panel.js

@@ -0,0 +1,246 @@
+import { catalog } from "../../tuning/catalog.gen.js";
+import { parseTokenColor } from "../../tuning/color.js";
+import { RADIUS_MAX, RADIUS_ROLES, emptyTuning } from "../../tuning/types.js";
+import { colorValue, countChanges, normalize, withColor, withRadius } from "../../tuning/model.js";
+import { nativeLimits } from "../../tuning/native.js";
+import { parseTuning, toJson } from "../../tuning/schema.js";
+import { useActiveScheme } from "../lib/theme.js";
+import { Text as Text$1 } from "../base/text.js";
+import { Panel } from "./panel.js";
+import { Button } from "../atom/button.js";
+import { Label } from "../atom/label.js";
+import { TextField } from "../atom/text-field.js";
+import { useId, useMemo, useState } from "react";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/native/layout/tuning-panel.tsx
+/** 色の編集に出すトークンの区分（ランプ・主操作・状態・チャート。ブランド色は共通なので別）。 */
+const EDITABLE_GROUPS = /* @__PURE__ */ new Set([
+	"ramp",
+	"action",
+	"state",
+	"chart"
+]);
+/**
+* native の調整の画面（最小限）。トークンを動かし、`love3-tuning` の JSON で書き出し・読み込みする。web の `/tuning` と同じ形式。
+*
+* - 色: 今のテーマ（ライト・ダーク）の値を 16 進で編集する。読めない値は赤い枠のままで、適用しない
+* - 角丸: 役割ごとに px（実機ではビルド時に固定されるので効かない。JSON には残る）
+* - JSON: 「書き出す」で今の調整を欄に出し（`onExport` にも渡す）、「読み込む」で欄の JSON を検証して適用する。
+*   1 つでも不正なら全体を断り、理由を出す（部分適用しない）
+* - 実機で効かない項目は、`nativeLimits` の説明を出す
+*
+* 作り込みはしない（love3 の native 部品だけで組んだ検証用）。
+*/
+function TuningPanel({ tuning, onChange, catalog: catalog$1 = catalog, onExport }) {
+	const scheme = useActiveScheme();
+	const normalized = useMemo(() => normalize(tuning, catalog$1), [tuning, catalog$1]);
+	const limits = useMemo(() => nativeLimits(tuning, catalog$1), [tuning, catalog$1]);
+	const [json, setJson] = useState("");
+	const [reasons, setReasons] = useState([]);
+	const [epoch, setEpoch] = useState(0);
+	const importJson = () => {
+		const result = parseTuning(json, catalog$1);
+		if (result.ok) {
+			setReasons([]);
+			setEpoch((value) => value + 1);
+			onChange(result.tuning);
+		} else setReasons(result.reasons);
+	};
+	const exportJson = () => {
+		const text = toJson(tuning, catalog$1);
+		setJson(text);
+		setReasons([]);
+		onExport?.(text);
+	};
+	return /* @__PURE__ */ jsxs(Panel, {
+		className: "gap-4 p-4",
+		children: [
+			/* @__PURE__ */ jsxs(View, {
+				className: "gap-1",
+				children: [/* @__PURE__ */ jsxs(Text$1, {
+					role: "heading",
+					"aria-level": "2",
+					className: "text-base font-semibold",
+					children: [
+						"調整（",
+						scheme === "dark" ? "ダーク" : "ライト",
+						"）"
+					]
+				}), /* @__PURE__ */ jsxs(Text$1, {
+					className: "text-muted-foreground text-sm",
+					children: [
+						"変えた項目は ",
+						countChanges(tuning, catalog$1),
+						" 件。書き出した JSON は web の調整ページでも読めます。"
+					]
+				})]
+			}),
+			/* @__PURE__ */ jsxs(View, {
+				className: "gap-2",
+				children: [/* @__PURE__ */ jsx(Label, { children: "色" }), catalog$1.colors.filter((color) => EDITABLE_GROUPS.has(color.group)).map((color) => /* @__PURE__ */ jsx(ColorRow, {
+					name: color.name,
+					value: colorValue(normalized, catalog$1, scheme, color.name),
+					alpha: color.alpha,
+					onCommit: (value) => onChange(withColor(tuning, catalog$1, scheme, color.name, value))
+				}, `${color.name}-${epoch}`))]
+			}),
+			/* @__PURE__ */ jsxs(View, {
+				className: "gap-2",
+				children: [/* @__PURE__ */ jsx(Label, { children: "角丸（px）" }), RADIUS_ROLES.map((role) => /* @__PURE__ */ jsx(RadiusRow, {
+					role,
+					value: normalized.radius[role] ?? catalog$1.radius[role],
+					onCommit: (px) => onChange(withRadius(tuning, role, px))
+				}, `${role}-${epoch}`))]
+			}),
+			limits.length > 0 ? /* @__PURE__ */ jsx(View, {
+				className: "gap-1",
+				accessibilityRole: "summary",
+				children: limits.map((note) => /* @__PURE__ */ jsx(Text$1, {
+					className: "text-muted-foreground text-xs",
+					children: note
+				}, note))
+			}) : null,
+			/* @__PURE__ */ jsxs(View, {
+				className: "gap-2",
+				children: [
+					/* @__PURE__ */ jsx(Label, { children: "JSON（love3-tuning）" }),
+					/* @__PURE__ */ jsx(TextField, {
+						value: json,
+						onChangeText: setJson,
+						multiline: true,
+						numberOfLines: 6,
+						autoCapitalize: "none",
+						autoCorrect: false,
+						accessibilityLabel: "調整の JSON",
+						placeholder: "{ \"format\": \"love3-tuning\", \"version\": 1 }",
+						invalid: reasons.length > 0
+					}),
+					reasons.map((reason) => /* @__PURE__ */ jsx(Text$1, {
+						role: "alert",
+						className: "text-destructive text-xs",
+						children: reason
+					}, reason)),
+					/* @__PURE__ */ jsxs(View, {
+						className: "flex-row flex-wrap gap-2",
+						children: [
+							/* @__PURE__ */ jsx(Button, {
+								size: "sm",
+								variant: "outline",
+								onPress: exportJson,
+								children: "書き出す"
+							}),
+							/* @__PURE__ */ jsx(Button, {
+								size: "sm",
+								onPress: importJson,
+								children: "読み込む"
+							}),
+							/* @__PURE__ */ jsx(Button, {
+								size: "sm",
+								variant: "ghost",
+								onPress: () => {
+									setEpoch((value) => value + 1);
+									onChange(emptyTuning());
+								},
+								children: "すべて既定に戻す"
+							})
+						]
+					})
+				]
+			})
+		]
+	});
+}
+/** 入力が読めないときの理由。行の下に `role="alert"` で出し、入力欄から `aria-describedby` で結ぶ。 */
+function Reason({ id, text }) {
+	return /* @__PURE__ */ jsx(Text$1, {
+		id,
+		role: "alert",
+		className: "text-destructive text-xs",
+		children: text
+	});
+}
+/**
+* 色 1 件。**入力中の文字（draft）を自分で持ち、フォーカスが外れるまで欄に出し続ける**（`#abc` は有効な 3 桁の形だが、
+* 6 桁の途中でもある。反映した値で欄を置き換えると、6 桁を打ち切れない）。読める値になったら、打つたびに反映する
+* （反映した値は正規の形 `#aabbcc` になるが、欄には打った文字のまま）。外れたら、反映した値（正規の形）を欄に出す。
+* 読めない値は理由を出し、反映しない。
+*/
+function ColorRow({ name, value, alpha, onCommit }) {
+	const reasonId = useId();
+	const [draft, setDraft] = useState(null);
+	const parsed = draft === null ? null : parseTokenColor(draft, { alpha });
+	const reason = parsed !== null && !parsed.ok ? parsed.reason : void 0;
+	return /* @__PURE__ */ jsxs(View, {
+		className: "gap-1",
+		children: [/* @__PURE__ */ jsxs(View, {
+			className: "flex-row items-center gap-2",
+			children: [/* @__PURE__ */ jsxs(Text$1, {
+				className: "w-32 font-mono text-xs",
+				children: ["--", name]
+			}), /* @__PURE__ */ jsx(View, {
+				className: "flex-1",
+				children: /* @__PURE__ */ jsx(TextField, {
+					value: draft ?? value,
+					onChangeText: (text) => {
+						setDraft(text);
+						const next = parseTokenColor(text, { alpha });
+						if (next.ok) onCommit(next.value);
+					},
+					onBlur: () => setDraft(null),
+					accessibilityLabel: `--${name}`,
+					autoCapitalize: "none",
+					autoCorrect: false,
+					invalid: reason !== void 0,
+					"aria-describedby": reason === void 0 ? void 0 : reasonId
+				})
+			})]
+		}), reason === void 0 ? null : /* @__PURE__ */ jsx(Reason, {
+			id: reasonId,
+			text: reason
+		})]
+	});
+}
+/** 角丸の入力の問題（読めて、範囲内なら undefined）。 */
+function radiusProblem(text) {
+	const number = Number(text);
+	if (text.trim() === "" || !Number.isFinite(number)) return `角丸は数で入力してください（0〜${64}）`;
+	if (number < 0 || number > 64) return `角丸は 0〜${64} の数で入力してください（実際: ${text}）`;
+}
+/** 角丸 1 件。色と同じく、入力中の文字（`6.` など）は外れるまで欄に出し続ける。 */
+function RadiusRow({ role, value, onCommit }) {
+	const reasonId = useId();
+	const [draft, setDraft] = useState(null);
+	const reason = draft === null ? void 0 : radiusProblem(draft);
+	return /* @__PURE__ */ jsxs(View, {
+		className: "gap-1",
+		children: [/* @__PURE__ */ jsxs(View, {
+			className: "flex-row items-center gap-2",
+			children: [/* @__PURE__ */ jsxs(Text$1, {
+				className: "w-32 font-mono text-xs",
+				children: ["radius-", role]
+			}), /* @__PURE__ */ jsx(View, {
+				className: "flex-1",
+				children: /* @__PURE__ */ jsx(TextField, {
+					value: draft ?? String(value),
+					onChangeText: (text) => {
+						setDraft(text);
+						if (radiusProblem(text) === void 0) onCommit(Number(text));
+					},
+					onBlur: () => setDraft(null),
+					type: "number",
+					accessibilityLabel: `radius-${role}`,
+					invalid: reason !== void 0,
+					"aria-describedby": reason === void 0 ? void 0 : reasonId
+				})
+			})]
+		}), reason === void 0 ? null : /* @__PURE__ */ jsx(Reason, {
+			id: reasonId,
+			text: reason
+		})]
+	});
+}
+
+//#endregion
+export { TuningPanel };

package/dist/native/lib/autocomplete.d.ts

@@ -0,0 +1,7 @@
+import { TextInputProps } from "react-native";
+//#region src/native/lib/autocomplete.d.ts
+export type AutoComplete = NonNullable<TextInputProps["autoComplete"]>;
+export type TextContentType = NonNullable<TextInputProps["textContentType"]>;
+/** iOS の `textContentType`。対応する語が無ければ `undefined`（iOS の既定に任せる）。 */
+export declare function textContentTypeOf(autoComplete: AutoComplete | undefined): TextContentType | undefined;
+//#endregion

package/dist/native/lib/autocomplete.js

@@ -0,0 +1,34 @@
+//#region src/native/lib/autocomplete.ts
+const CONTENT_TYPE = {
+	email: "emailAddress",
+	username: "username",
+	"username-new": "username",
+	"current-password": "password",
+	password: "password",
+	"new-password": "newPassword",
+	"password-new": "newPassword",
+	"one-time-code": "oneTimeCode",
+	"sms-otp": "oneTimeCode",
+	"email-otp": "oneTimeCode",
+	tel: "telephoneNumber",
+	name: "name",
+	"given-name": "givenName",
+	"name-given": "givenName",
+	"family-name": "familyName",
+	"name-family": "familyName",
+	"postal-code": "postalCode",
+	"street-address": "fullStreetAddress",
+	"address-line1": "streetAddressLine1",
+	"address-line2": "streetAddressLine2",
+	organization: "organizationName",
+	url: "URL",
+	"cc-number": "creditCardNumber",
+	off: "none"
+};
+/** iOS の `textContentType`。対応する語が無ければ `undefined`（iOS の既定に任せる）。 */
+function textContentTypeOf(autoComplete) {
+	return autoComplete === void 0 ? void 0 : CONTENT_TYPE[autoComplete];
+}
+
+//#endregion
+export { textContentTypeOf };

package/dist/native/lib/breakpoints.d.ts

@@ -0,0 +1,14 @@
+//#region src/native/lib/breakpoints.d.ts
+/** web（Tailwind）と同じブレークポイント（px）。 */
+export declare const BREAKPOINT: {
+  readonly sm: 640;
+  readonly md: 768;
+  readonly lg: 1024;
+};
+export type Breakpoint = keyof typeof BREAKPOINT;
+/**
+ * `hideBelow` の列を、この画面の幅で出すか。ブレークポイントちょうどの幅は**出す**（Tailwind の `sm:` は 640px 以上）。
+ * 指定が無ければ常に出す。
+ */
+export declare function isShownAtWidth(hideBelow: Breakpoint | undefined, width: number): boolean;
+//#endregion

package/dist/native/lib/breakpoints.js

@@ -0,0 +1,17 @@
+//#region src/native/lib/breakpoints.ts
+/** web（Tailwind）と同じブレークポイント（px）。 */
+const BREAKPOINT = {
+	sm: 640,
+	md: 768,
+	lg: 1024
+};
+/**
+* `hideBelow` の列を、この画面の幅で出すか。ブレークポイントちょうどの幅は**出す**（Tailwind の `sm:` は 640px 以上）。
+* 指定が無ければ常に出す。
+*/
+function isShownAtWidth(hideBelow, width) {
+	return hideBelow === void 0 || width >= BREAKPOINT[hideBelow];
+}
+
+//#endregion
+export { BREAKPOINT, isShownAtWidth };

package/dist/native/lib/chart-palette.d.ts

@@ -0,0 +1,8 @@
+//#region src/native/lib/chart-palette.d.ts
+/**
+ * チャートの既定配色。web の `--chart-1` 〜 `--chart-5`（色で系列を分ける 5 色。ダークでも読める別の値を持つ）と同じ順序で返す。
+ *
+ * `--chart-*` は、ライト・ダークで別の値を持つ生の色のトークンなので、そのまま実値を引ける。`.dark` にも追従する。
+ */
+export declare function useChartPalette(): string[];
+//#endregion

package/dist/native/lib/chart-palette.js

@@ -0,0 +1,20 @@
+import { useTokenColor } from "./token-color.js";
+
+//#region src/native/lib/chart-palette.ts
+/**
+* チャートの既定配色。web の `--chart-1` 〜 `--chart-5`（色で系列を分ける 5 色。ダークでも読める別の値を持つ）と同じ順序で返す。
+*
+* `--chart-*` は、ライト・ダークで別の値を持つ生の色のトークンなので、そのまま実値を引ける。`.dark` にも追従する。
+*/
+function useChartPalette() {
+	return [
+		useTokenColor("--chart-1"),
+		useTokenColor("--chart-2"),
+		useTokenColor("--chart-3"),
+		useTokenColor("--chart-4"),
+		useTokenColor("--chart-5")
+	].filter((color) => typeof color === "string");
+}
+
+//#endregion
+export { useChartPalette };

package/dist/native/lib/confirm.d.ts

@@ -0,0 +1,49 @@
+import { ButtonProps } from "../atom/button.js";
+import { ExternalStore } from "./external-store.js";
+//#region src/native/lib/confirm.d.ts
+export type ConfirmDialogButton = {
+  text: string;
+  onClick: () => void;
+  variant?: ButtonProps["variant"];
+};
+export type ConfirmDialogValue = {
+  isOpen: boolean;
+  title?: string;
+  description?: string;
+  buttons?: ConfirmDialogButton[];
+  /** 外側を押したとき。未指定なら閉じない。`close` を呼ぶと閉じる。 */
+  onOutsideClick?: (close: () => void) => void;
+  /**
+   * ボタンを押さずに閉じられたとき（Escape・Android の戻る操作など）に描画側が呼ぶ。
+   * `confirm()` はこれで false を解決し、待っている呼び出し側が固まらないようにする。
+   */
+  onDismiss?: () => void;
+};
+/** `ConfirmDialog` が読む状態。命令的な API（`confirm()`）がここへ書く。 */
+export declare const confirmDialogStore: ExternalStore<ConfirmDialogValue>;
+/** 開いている確認ダイアログを閉じる（内容は残す。閉じるアニメーションの間、文字が消えないように）。 */
+export declare function closeConfirmDialog(): void;
+/**
+ * `ConfirmDialog` がマウントされている間だけ呼ぶ（`once/confirm` が effect で呼ぶ）。戻り値は解除。
+ * **最後の 1 つが外れたとき、開いたままの確認は false で解決して閉じる**（開いたまま unmount すると、待っている呼び出し側が
+ * 固まり、次にマウントしたときに古い確認が出てしまう）。
+ */
+export declare function registerConfirmDialog(): () => void;
+export type ConfirmOptions = {
+  description?: string;
+  /** 「はい」側のボタンの文言（既定「はい」）。 */
+  yes?: string;
+  /** 「いいえ」側のボタンの文言（既定「いいえ」）。 */
+  no?: string;
+  /** 取り消せない操作の確認では `destructive` を渡し、見た目でも危険だと分かるようにする。 */
+  yesVariant?: ButtonProps["variant"];
+};
+/**
+ * 確認ダイアログを開き、押されたボタンで解決する（はい = true、いいえ・外側・戻る操作 = false）。
+ * アプリのルートに `once/confirm` の `ConfirmDialog` を 1 つ置いておく（**置いていないと、開かず、解決もしない**。開発時は警告を出す。
+ * 後から置くと、その時点で開く）。
+ * 移植元の `@lt-three/core` の `confirm(i18n, message, options)` から、i18n の引数を外した
+ * （love3 は i18n に依存しない。文言は `yes` / `no` で渡し、既定は日本語）。
+ */
+export declare function confirm(message: string, options?: ConfirmOptions): Promise<boolean>;
+//#endregion

package/dist/native/lib/confirm.js

@@ -0,0 +1,70 @@
+import { NO_LABEL, YES_LABEL } from "./labels.js";
+import { createExternalStore } from "./external-store.js";
+
+//#region src/native/lib/confirm.ts
+/** `ConfirmDialog` が読む状態。命令的な API（`confirm()`）がここへ書く。 */
+const confirmDialogStore = createExternalStore({ isOpen: false });
+/** 開いている確認ダイアログを閉じる（内容は残す。閉じるアニメーションの間、文字が消えないように）。 */
+function closeConfirmDialog() {
+	confirmDialogStore.update((prev) => ({
+		...prev,
+		isOpen: false
+	}));
+}
+let mountedDialogs = 0;
+/**
+* `ConfirmDialog` がマウントされている間だけ呼ぶ（`once/confirm` が effect で呼ぶ）。戻り値は解除。
+* **最後の 1 つが外れたとき、開いたままの確認は false で解決して閉じる**（開いたまま unmount すると、待っている呼び出し側が
+* 固まり、次にマウントしたときに古い確認が出てしまう）。
+*/
+function registerConfirmDialog() {
+	mountedDialogs += 1;
+	return () => {
+		mountedDialogs -= 1;
+		if (mountedDialogs > 0 || !confirmDialogStore.get().isOpen) return;
+		confirmDialogStore.get().onDismiss?.();
+		closeConfirmDialog();
+	};
+}
+let pendingResolve = null;
+/**
+* 確認ダイアログを開き、押されたボタンで解決する（はい = true、いいえ・外側・戻る操作 = false）。
+* アプリのルートに `once/confirm` の `ConfirmDialog` を 1 つ置いておく（**置いていないと、開かず、解決もしない**。開発時は警告を出す。
+* 後から置くと、その時点で開く）。
+* 移植元の `@lt-three/core` の `confirm(i18n, message, options)` から、i18n の引数を外した
+* （love3 は i18n に依存しない。文言は `yes` / `no` で渡し、既定は日本語）。
+*/
+function confirm(message, options) {
+	const { description, yes, no, yesVariant } = options ?? {};
+	if (__DEV__ && mountedDialogs === 0) console.warn("confirm(): ConfirmDialog がマウントされていない。アプリのルートに <ConfirmDialog /> を 1 つ置くまで、この確認は開かず、解決もしない。");
+	return new Promise((resolvePromise) => {
+		pendingResolve?.(false);
+		const resolve = (value) => {
+			if (pendingResolve === resolve) pendingResolve = null;
+			resolvePromise(value);
+		};
+		pendingResolve = resolve;
+		confirmDialogStore.set({
+			isOpen: true,
+			title: message,
+			description,
+			buttons: [{
+				text: no ?? "いいえ",
+				onClick: () => resolve(false),
+				variant: "outline"
+			}, {
+				text: yes ?? "はい",
+				onClick: () => resolve(true),
+				variant: yesVariant
+			}],
+			onOutsideClick: (close) => {
+				resolve(false);
+				close();
+			},
+			onDismiss: () => resolve(false)
+		});
+	});
+}
+
+//#endregion
+export { closeConfirmDialog, confirm, confirmDialogStore, registerConfirmDialog };

package/dist/native/lib/control.d.ts

@@ -0,0 +1,24 @@
+//#region src/native/lib/control.d.ts
+/**
+ * 入力の部品（`atom/text-field` `checkbox` `switch` `slider`）が、フォームの外装（`base/form` の `FormControl`）から受け取る
+ * アクセシビリティの props。web の `FormControl`（Radix の Slot が直下の入力に `id` / `aria-*` を渡す）に対応する。
+ *
+ * - `id` / `aria-labelledby` / `aria-describedby` / `aria-invalid`: react-native-web は DOM に出す（ラベルや説明との紐付けが効く）。
+ *   実機の React Native は `aria-labelledby` を Android だけ、`aria-describedby` は読まないので、
+ *   実機の読み上げには `accessibilityLabel` と `accessibilityHint` を渡す（フォームの部品が文字列のときに渡す）
+ * - `accessibilityHint`: 補足（`description`）。実機の VoiceOver / TalkBack が名前のあとに読む
+ */
+export type ControlA11yProps = {
+  id?: string;
+  "aria-labelledby"?: string;
+  "aria-describedby"?: string;
+  "aria-invalid"?: boolean;
+  accessibilityHint?: string;
+};
+/**
+ * 名前を自分で持つ入力（`atom/checkbox`＝右のラベル、`atom/slider`＝自分の `label`）が受ける props。
+ * `aria-labelledby` は**型に含めない**（受け口が無いのに受けて黙って捨てない）。フォームの外装のラベルを名前にしたい入力
+ * （`text-field`・`switch`）だけが `ControlA11yProps` の全部を受ける。
+ */
+export type NamedControlA11yProps = Omit<ControlA11yProps, "aria-labelledby">;
+//#endregion