@lt-three/love3 0.0.0 → 0.1.1

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
+/**
+* Switcher for top-level destinations placed at the bottom of the screen (3 to 5 items). Distinct from `layout/tabs` (underlined tabs that switch the body).
+* The selected item uses `text-action-ink` (AA even on dark surfaces), and the selected state is shown by weight (`font-semibold`) as well as color.
+* Each item's press target is at least 56px tall (above the 44pt real-device guideline). **The bottom safe area (home indicator) is the app's responsibility**
+* (pass `pb-*` in `className`, or place it inside an outer `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;
+  /** Controlled mode: specify it to manage the selected value from outside. */
+  value?: string;
+  onValueChange?: (value: string) => void;
+  /** Slot placed at the right end of the same row as the tab strip (used like a toolbar). */
+  trailing?: ReactNode;
+  className?: string;
+};
+/**
+ * Tabs with the same record-driven API as the web `layout/tabs`.
+ * Visually they are flush-left underlined tabs matching the web base/tabs:
+ * a 2px indigo underline for the active tab sits on a shared faint rule.
+ *
+ * They scroll horizontally so they never wrap as the tab count grows (instead of web's `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
+/**
+* Tabs with the same record-driven API as the web `layout/tabs`.
+* Visually they are flush-left underlined tabs matching the web base/tabs:
+* a 2px indigo underline for the active tab sits on a shared faint rule.
+*
+* They scroll horizontally so they never wrap as the tab count grows (instead of web's `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 = {
+  /** The tuning content (the difference from the defaults). Where it is stored is up to the app. */
+  tuning: Tuning;
+  onChange: (next: Tuning) => void;
+  /** What is tuned. Defaults to love3's generated output. */
+  catalog?: TuningCatalog;
+  /** Called on export (copying, sharing, etc. is up to the app). Receives the JSON string. */
+  onExport?: (json: string) => void;
+};
+/**
+ * The native tuning screen (minimal). Moves tokens and exports/imports them as `love3-tuning` JSON, the same format as web's `/tuning`.
+ *
+ * - Colors: edits the current theme's (light or dark) values in hex. An unreadable value keeps a red border and is not applied
+ * - Radius: px per role (fixed at build time on real devices, so it has no effect there; it remains in the JSON)
+ * - JSON: "書き出す" (Export) puts the current tuning in the field (and also passes it to `onExport`); "読み込む" (Import) validates the JSON in the field and applies it.
+ *   If even one entry is invalid, the whole input is rejected and the reasons are shown (no partial application)
+ * - For items that have no effect on real devices, the `nativeLimits` explanation is shown
+ *
+ * It is not polished (a verification screen built only from love3's native components).
+ */
+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
+/** Token groups shown in the color editor (ramp, primary action, state, chart; brand colors are shared, so they are separate). */
+const EDITABLE_GROUPS = /* @__PURE__ */ new Set([
+	"ramp",
+	"action",
+	"state",
+	"chart"
+]);
+/**
+* The native tuning screen (minimal). Moves tokens and exports/imports them as `love3-tuning` JSON, the same format as web's `/tuning`.
+*
+* - Colors: edits the current theme's (light or dark) values in hex. An unreadable value keeps a red border and is not applied
+* - Radius: px per role (fixed at build time on real devices, so it has no effect there; it remains in the JSON)
+* - JSON: "書き出す" (Export) puts the current tuning in the field (and also passes it to `onExport`); "読み込む" (Import) validates the JSON in the field and applies it.
+*   If even one entry is invalid, the whole input is rejected and the reasons are shown (no partial application)
+* - For items that have no effect on real devices, the `nativeLimits` explanation is shown
+*
+* It is not polished (a verification screen built only from love3's native components).
+*/
+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: "すべて既定に戻す"
+							})
+						]
+					})
+				]
+			})
+		]
+	});
+}
+/** The reason shown when the input is unreadable. Rendered under the row with `role="alert"` and linked from the input via `aria-describedby`. */
+function Reason({ id, text }) {
+	return /* @__PURE__ */ jsx(Text$1, {
+		id,
+		role: "alert",
+		className: "text-destructive text-xs",
+		children: text
+	});
+}
+/**
+* One color. **Keeps its own in-progress text (draft) and keeps showing it in the field until focus leaves** (`#abc` is a valid 3-digit form
+* but may also be partway through a 6-digit one; replacing the field with the applied value would make it impossible to finish typing 6 digits). Once the value is readable, it is applied on every keystroke
+* (the applied value takes the canonical form `#aabbcc`, but the field keeps the text as typed). On blur, the applied value (canonical form) is shown in the field.
+* An unreadable value shows a reason and is not applied.
+*/
+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
+		})]
+	});
+}
+/** The problem with a radius input (undefined if it is readable and within range). */
+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}）`;
+}
+/** One radius. As with colors, in-progress text (such as `6.`) keeps showing in the field until focus leaves. */
+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` if there is no corresponding word (leave it to the iOS default). */
+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` if there is no corresponding word (leave it to the iOS default). */
+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
+/** Same breakpoints (px) as web (Tailwind). */
+export declare const BREAKPOINT: {
+  readonly sm: 640;
+  readonly md: 768;
+  readonly lg: 1024;
+};
+export type Breakpoint = keyof typeof BREAKPOINT;
+/**
+ * Whether to show a `hideBelow` column at this screen width. A width exactly at the breakpoint **shows** it (Tailwind's `sm:` is 640px and up).
+ * If unspecified, always shown.
+ */
+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
+/** Same breakpoints (px) as web (Tailwind). */
+const BREAKPOINT = {
+	sm: 640,
+	md: 768,
+	lg: 1024
+};
+/**
+* Whether to show a `hideBelow` column at this screen width. A width exactly at the breakpoint **shows** it (Tailwind's `sm:` is 640px and up).
+* If unspecified, always shown.
+*/
+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
+/**
+ * Default chart colors, returned in the same order as the web `--chart-1` to `--chart-5` (five colors that separate series by hue; each has a distinct value that stays readable in dark mode).
+ *
+ * `--chart-*` are raw color tokens with separate light and dark values, so the actual values can be looked up directly. They also follow `.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
+/**
+* Default chart colors, returned in the same order as the web `--chart-1` to `--chart-5` (five colors that separate series by hue; each has a distinct value that stays readable in dark mode).
+*
+* `--chart-*` are raw color tokens with separate light and dark values, so the actual values can be looked up directly. They also follow `.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,48 @@
+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[];
+  /** When the outside is pressed. If unspecified, it does not close. Calling `close` closes it. */
+  onOutsideClick?: (close: () => void) => void;
+  /**
+   * Called by the renderer when it is dismissed without a button press (Escape, the Android back action, etc.).
+   * `confirm()` resolves false with it so that the waiting caller does not hang.
+   */
+  onDismiss?: () => void;
+};
+/** State read by `ConfirmDialog`. The imperative API (`confirm()`) writes here. */
+export declare const confirmDialogStore: ExternalStore<ConfirmDialogValue>;
+/** Closes the open confirm dialog (keeps its content, so the text does not vanish during the closing animation). */
+export declare function closeConfirmDialog(): void;
+/**
+ * Call only while a `ConfirmDialog` is mounted (`once/confirm` calls it in an effect). Returns an unsubscribe function.
+ * **When the last one detaches, a confirm left open is resolved with false and closed** (if it unmounted while open, the waiting caller would
+ * hang, and an old confirm would appear the next time one mounts).
+ */
+export declare function registerConfirmDialog(): () => void;
+export type ConfirmOptions = {
+  description?: string;
+  /** Label of the "yes" button (default "はい"). */
+  yes?: string;
+  /** Label of the "no" button (default "いいえ"). */
+  no?: string;
+  /** Pass `destructive` for confirming irreversible actions, so it also looks dangerous. */
+  yesVariant?: ButtonProps["variant"];
+};
+/**
+ * Opens a confirm dialog and resolves with the pressed button (yes = true; no, outside press, back action = false).
+ * Place one `ConfirmDialog` from `once/confirm` at the app root (**without it, it neither opens nor resolves**; a warning is logged in development.
+ * If placed later, it opens at that point).
+ * Takes no i18n argument: love3 does not depend on i18n, text is passed as `yes` / `no`, and the defaults are Japanese.
+ */
+export declare function confirm(message: string, options?: ConfirmOptions): Promise<boolean>;
+//#endregion

package/dist/native/lib/confirm.js

@@ -0,0 +1,69 @@
+import { NO_LABEL, YES_LABEL } from "./labels.js";
+import { createExternalStore } from "./external-store.js";
+
+//#region src/native/lib/confirm.ts
+/** State read by `ConfirmDialog`. The imperative API (`confirm()`) writes here. */
+const confirmDialogStore = createExternalStore({ isOpen: false });
+/** Closes the open confirm dialog (keeps its content, so the text does not vanish during the closing animation). */
+function closeConfirmDialog() {
+	confirmDialogStore.update((prev) => ({
+		...prev,
+		isOpen: false
+	}));
+}
+let mountedDialogs = 0;
+/**
+* Call only while a `ConfirmDialog` is mounted (`once/confirm` calls it in an effect). Returns an unsubscribe function.
+* **When the last one detaches, a confirm left open is resolved with false and closed** (if it unmounted while open, the waiting caller would
+* hang, and an old confirm would appear the next time one mounts).
+*/
+function registerConfirmDialog() {
+	mountedDialogs += 1;
+	return () => {
+		mountedDialogs -= 1;
+		if (mountedDialogs > 0 || !confirmDialogStore.get().isOpen) return;
+		confirmDialogStore.get().onDismiss?.();
+		closeConfirmDialog();
+	};
+}
+let pendingResolve = null;
+/**
+* Opens a confirm dialog and resolves with the pressed button (yes = true; no, outside press, back action = false).
+* Place one `ConfirmDialog` from `once/confirm` at the app root (**without it, it neither opens nor resolves**; a warning is logged in development.
+* If placed later, it opens at that point).
+* Takes no i18n argument: love3 does not depend on i18n, text is passed as `yes` / `no`, and the defaults are Japanese.
+*/
+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
+/**
+ * The accessibility props that input components (`atom/text-field`, `checkbox`, `switch`, `slider`) receive from the form wrapper (`FormControl` in `base/form`).
+ * Corresponds to the web `FormControl` (Radix's Slot passes `id` / `aria-*` to the direct child input).
+ *
+ * - `id` / `aria-labelledby` / `aria-describedby` / `aria-invalid`: react-native-web emits them to the DOM (association with the label and description works).
+ *   Real-device React Native honors `aria-labelledby` on Android only and does not read `aria-describedby`,
+ *   so for real-device screen readers, pass `accessibilityLabel` and `accessibilityHint` (passed when the form's parts are strings)
+ * - `accessibilityHint`: supplementary text (`description`). Real-device VoiceOver / TalkBack reads it after the name
+ */
+export type ControlA11yProps = {
+  id?: string;
+  "aria-labelledby"?: string;
+  "aria-describedby"?: string;
+  "aria-invalid"?: boolean;
+  accessibilityHint?: string;
+};
+/**
+ * Props received by inputs that carry their own name (`atom/checkbox` = the label on the right, `atom/slider` = its own `label`).
+ * `aria-labelledby` is **not included in the type** (no silently dropping what has nowhere to go). Only inputs that want the form wrapper's label as their name
+ * (`text-field`, `switch`) accept all of `ControlA11yProps`.
+ */
+export type NamedControlA11yProps = Omit<ControlA11yProps, "aria-labelledby">;
+//#endregion