@lt-three/love3 0.0.0 → 0.1.0

package/dist/native/lib/tuning.js

@@ -0,0 +1,42 @@
+import { catalog } from "../../tuning/catalog.gen.js";
+import { effectiveTokens, normalize } from "../../tuning/model.js";
+import { toNativeVariables } from "../../tuning/native.js";
+import { useActiveScheme } from "./theme.js";
+import { TuningTokensContext } from "./tuning-context.js";
+import { useMemo } from "react";
+import { jsx } from "react/jsx-runtime";
+import { VariableContextProvider } from "react-native-css";
+
+//#region src/native/lib/tuning.tsx
+/**
+* 調整（トークンの実行時の上書き）を、子孫の部品に反映するルート。**`ThemeRoot` の内側**に置く（有効テーマと、ダークの変数を受け取るため）。
+*
+* - `react-native-css` の `VariableContextProvider` で、変えた色・角丸・書体を CSS 変数として配る。実機で効くのは、
+*   ライト・ダークで値が違う色のトークンを使うクラス（`bg-card` など）と書体。`bg-action` などビルド時にリテラルへ
+*   畳み込まれるクラス・角丸・本文サイズ・セマンティックの参照先は、**実機では効かない**（`nativeLimits` が説明を返す。
+*   react-native-web では CSS 変数なので全部効く）
+* - TS から色を引く部品（`useTokenColor`）は、実効値（参照を解決した値）を `TuningTokensContext` から引くので、**全部追従する**
+* - 調整が無い（既定と同じ）なら、何も変えない（`tuning` を空にすれば元の見た目）
+*
+* 実機（Expo）での確認は未実施。react-native-web の browser test で確かめた範囲を README に書いてある。
+*/
+function TuningRoot({ tuning, catalog: catalog$1 = catalog, children }) {
+	const scheme = useActiveScheme();
+	const normalized = useMemo(() => normalize(tuning, catalog$1), [tuning, catalog$1]);
+	const variables = useMemo(() => toNativeVariables(normalized, catalog$1, scheme), [
+		normalized,
+		catalog$1,
+		scheme
+	]);
+	const tokens = useMemo(() => effectiveTokens(normalized, catalog$1), [normalized, catalog$1]);
+	return /* @__PURE__ */ jsx(TuningTokensContext.Provider, {
+		value: tokens,
+		children: /* @__PURE__ */ jsx(VariableContextProvider, {
+			value: variables,
+			children
+		})
+	});
+}
+
+//#endregion
+export { TuningRoot };

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

@@ -0,0 +1,10 @@
+import { TextStyle } from "react-native";
+//#region src/native/lib/typography.d.ts
+/**
+ * 数字を等幅（タブラー）で揃えるスタイル。
+ *
+ * Tailwind の `tabular-nums`（`font-variant-numeric`）は react-native-css が
+ * 未対応のため className では表現できない。数値表示にはこれを `style` で渡す。
+ */
+export declare const tabularNums: TextStyle;
+//#endregion

package/dist/native/lib/typography.js

@@ -0,0 +1,11 @@
+//#region src/native/lib/typography.ts
+/**
+* 数字を等幅（タブラー）で揃えるスタイル。
+*
+* Tailwind の `tabular-nums`（`font-variant-numeric`）は react-native-css が
+* 未対応のため className では表現できない。数値表示にはこれを `style` で渡す。
+*/
+const tabularNums = { fontVariant: ["tabular-nums"] };
+
+//#endregion
+export { tabularNums };

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

@@ -0,0 +1,11 @@
+import { ReactNode } from "react";
+import { ClassValue } from "clsx";
+//#region src/native/lib/utils.d.ts
+export declare function cn(...inputs: ClassValue[]): string;
+/**
+ * 何も描かない `ReactNode`（`null`・`undefined`・真偽値・空文字・それだけを持つ配列や `<></>`）。
+ * 見出しやラベルが「ある」かの判定に使う（`""` や `<></>` のような空の見出しを、名前として指さない）。
+ * 要素（`<Text />` など）は、中身が空でも「ある」とする（描かれる）。Fragment だけは、中身で決める。
+ */
+export declare function isBlankNode(node: ReactNode): boolean;
+//#endregion

package/dist/native/lib/utils.js

@@ -0,0 +1,21 @@
+import { Fragment, isValidElement } from "react";
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+//#region src/native/lib/utils.ts
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+/**
+* 何も描かない `ReactNode`（`null`・`undefined`・真偽値・空文字・それだけを持つ配列や `<></>`）。
+* 見出しやラベルが「ある」かの判定に使う（`""` や `<></>` のような空の見出しを、名前として指さない）。
+* 要素（`<Text />` など）は、中身が空でも「ある」とする（描かれる）。Fragment だけは、中身で決める。
+*/
+function isBlankNode(node) {
+	if (node === null || node === void 0 || typeof node === "boolean" || node === "") return true;
+	if (Array.isArray(node)) return node.every(isBlankNode);
+	return isValidElement(node) && node.type === Fragment && isBlankNode(node.props.children);
+}
+
+//#endregion
+export { cn, isBlankNode };

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

@@ -0,0 +1,7 @@
+//#region src/native/once/confirm.d.ts
+/**
+ * `confirm()`（`lib/confirm.ts`）から呼ばれる確認ダイアログ。アプリのルートに 1 つだけ置く。
+ * 移植元は jotai の `confirmDialogAtom` を読んでいたが、love3 は外部ストア（`confirmDialogStore`）を読む。
+ */
+export declare function ConfirmDialog(): import("react").JSX.Element;
+//#endregion

package/dist/native/once/confirm.js

@@ -0,0 +1,60 @@
+import { Text as Text$1 } from "../base/text.js";
+import { Button } from "../atom/button.js";
+import { closeConfirmDialog, confirmDialogStore, registerConfirmDialog } from "../lib/confirm.js";
+import { useEffect } from "react";
+import { Modal, Pressable, View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/native/once/confirm.tsx
+/**
+* `confirm()`（`lib/confirm.ts`）から呼ばれる確認ダイアログ。アプリのルートに 1 つだけ置く。
+* 移植元は jotai の `confirmDialogAtom` を読んでいたが、love3 は外部ストア（`confirmDialogStore`）を読む。
+*/
+function ConfirmDialog() {
+	const dialog = confirmDialogStore.use();
+	useEffect(() => registerConfirmDialog(), []);
+	const dismiss = () => {
+		dialog.onDismiss?.();
+		closeConfirmDialog();
+	};
+	return /* @__PURE__ */ jsx(Modal, {
+		visible: dialog.isOpen,
+		transparent: true,
+		animationType: "fade",
+		onRequestClose: dismiss,
+		"aria-label": dialog.title,
+		children: /* @__PURE__ */ jsx(Pressable, {
+			accessible: false,
+			className: "flex-1 items-center justify-center bg-scrim p-6",
+			onPress: dialog.onOutsideClick ? () => dialog.onOutsideClick?.(closeConfirmDialog) : void 0,
+			children: /* @__PURE__ */ jsxs(Pressable, {
+				accessible: false,
+				className: "w-full max-w-[400px] self-center rounded-surface bg-popover p-5 shadow-lg",
+				onPress: () => {},
+				children: [/* @__PURE__ */ jsxs(View, {
+					className: "gap-1.5",
+					children: [dialog.title ? /* @__PURE__ */ jsx(Text$1, {
+						className: "text-base leading-6 font-semibold",
+						children: dialog.title
+					}) : null, dialog.description ? /* @__PURE__ */ jsx(Text$1, {
+						className: "text-muted-foreground text-[13px] leading-5",
+						children: dialog.description
+					}) : null]
+				}), /* @__PURE__ */ jsx(View, {
+					className: "mt-4 flex-row justify-end gap-2",
+					children: dialog.buttons?.map(({ text, onClick, variant }) => /* @__PURE__ */ jsx(Button, {
+						variant,
+						onPress: () => {
+							onClick();
+							closeConfirmDialog();
+						},
+						children: text
+					}, text))
+				})]
+			})
+		})
+	});
+}
+
+//#endregion
+export { ConfirmDialog };

package/dist/native/once/error-boundary.d.ts

@@ -0,0 +1,28 @@
+import { Component, ReactNode } from "react";
+//#region src/native/once/error-boundary.d.ts
+export type ErrorBoundaryLabels = {
+  title: string;
+  description: string;
+  retry: string;
+};
+export type ErrorBoundaryProps = {
+  children: ReactNode;
+  /** フォールバック画面の文言。i18n はアプリ側で解決して渡す。 */
+  labels: ErrorBoundaryLabels;
+};
+type State = {
+  hasError: boolean;
+};
+/**
+ * アプリ全体を包むエラーバウンダリ。子ツリーのレンダリング例外を捕捉し、
+ * 白画面クラッシュの代わりに復帰導線付きのフォールバックを表示する。
+ */
+export declare class ErrorBoundary extends Component<ErrorBoundaryProps, State> {
+  state: State;
+  static getDerivedStateFromError(): State;
+  componentDidCatch(error: unknown): void;
+  reset: () => void;
+  render(): string | number | bigint | boolean | import("react").JSX.Element | Iterable<ReactNode> | Promise<string | number | bigint | boolean | Iterable<ReactNode> | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | import("react").ReactPortal | null | undefined> | null | undefined;
+}
+//#endregion
+export {};

package/dist/native/once/error-boundary.js

@@ -0,0 +1,55 @@
+import { Text as Text$1 } from "../base/text.js";
+import { Button } from "../atom/button.js";
+import { Component } from "react";
+import { View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/native/once/error-boundary.tsx
+function ErrorFallback({ title, description, retry, onRetry }) {
+	return /* @__PURE__ */ jsxs(View, {
+		role: "alert",
+		className: "flex-1 items-center justify-center gap-4 bg-background p-8",
+		children: [
+			/* @__PURE__ */ jsx(Text$1, {
+				className: "text-lg font-bold text-foreground",
+				children: title
+			}),
+			/* @__PURE__ */ jsx(Text$1, {
+				variant: "muted",
+				className: "text-center leading-5",
+				children: description
+			}),
+			/* @__PURE__ */ jsx(Button, {
+				onPress: onRetry,
+				children: retry
+			})
+		]
+	});
+}
+/**
+* アプリ全体を包むエラーバウンダリ。子ツリーのレンダリング例外を捕捉し、
+* 白画面クラッシュの代わりに復帰導線付きのフォールバックを表示する。
+*/
+var ErrorBoundary = class extends Component {
+	constructor(..._args) {
+		super(..._args);
+		this.state = { hasError: false };
+		this.reset = () => this.setState({ hasError: false });
+	}
+	static getDerivedStateFromError() {
+		return { hasError: true };
+	}
+	componentDidCatch(error) {
+		console.error("Uncaught render error:", error);
+	}
+	render() {
+		if (this.state.hasError) return /* @__PURE__ */ jsx(ErrorFallback, {
+			...this.props.labels,
+			onRetry: this.reset
+		});
+		return this.props.children;
+	}
+};
+
+//#endregion
+export { ErrorBoundary };

package/dist/native/once/loading-lock.d.ts

@@ -0,0 +1,8 @@
+//#region src/native/once/loading-lock.d.ts
+/**
+ * グローバルローディング中に操作を塞ぐオーバーレイ。アプリのルートに 1 つだけ置く。
+ * `globalLoading(true)`（`lib/loading.ts`）で出て、`false` で消える。
+ * 移植元は jotai の `loadingAtom` を読んでいたが、love3 は外部ストア（`loadingStore`）を読む。
+ */
+export declare function LoadingLock(): import("react").JSX.Element;
+//#endregion

package/dist/native/once/loading-lock.js

@@ -0,0 +1,28 @@
+import { LOADING_LABEL } from "../lib/labels.js";
+import { Spinner } from "../atom/spinner.js";
+import { loadingStore } from "../lib/loading.js";
+import { Modal, View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/native/once/loading-lock.tsx
+/**
+* グローバルローディング中に操作を塞ぐオーバーレイ。アプリのルートに 1 つだけ置く。
+* `globalLoading(true)`（`lib/loading.ts`）で出て、`false` で消える。
+* 移植元は jotai の `loadingAtom` を読んでいたが、love3 は外部ストア（`loadingStore`）を読む。
+*/
+function LoadingLock() {
+	const loading = loadingStore.use();
+	return /* @__PURE__ */ jsx(Modal, {
+		visible: loading,
+		transparent: true,
+		animationType: "fade",
+		"aria-label": LOADING_LABEL,
+		children: /* @__PURE__ */ jsx(View, {
+			className: "flex-1 items-center justify-center bg-scrim",
+			children: /* @__PURE__ */ jsx(Spinner, { size: "large" })
+		})
+	});
+}
+
+//#endregion
+export { LoadingLock };

package/dist/native/once/offline-banner.d.ts

@@ -0,0 +1,15 @@
+//#region src/native/once/offline-banner.d.ts
+export type OfflineBannerProps = {
+  /** 表示する文言。love3 は i18n に依存しないので、アプリ側で解決して渡す。 */
+  message: string;
+};
+/**
+ * 通信断中に画面最上部へ常設表示するバナー。復帰すると自動的に消える。
+ * ルートには `react-native-safe-area-context` の `SafeAreaProvider` が要る（Expo Router は標準で入れる）。
+ *
+ * 配色は `destructive` の面と、その上の文字（`paper`。`atom/button` の destructive と同じ組）。
+ * 移植元は色リテラル（赤の `#B91C1C` と白）でテーマ非依存に固定していたが、love3 は色リテラルを持たない（トークンを使う）。
+ * 状態は `lib/network.ts` の `useIsOnline`（NetInfo。web は `navigator.onLine`）。切れると `role="alert"` で読み上げる。
+ */
+export declare function OfflineBanner({ message }: OfflineBannerProps): import("react").JSX.Element | null;
+//#endregion

package/dist/native/once/offline-banner.js

@@ -0,0 +1,35 @@
+import { Text as Text$1 } from "../base/text.js";
+import { useIsOnline } from "../lib/network.js";
+import { View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+//#region src/native/once/offline-banner.tsx
+/**
+* 通信断中に画面最上部へ常設表示するバナー。復帰すると自動的に消える。
+* ルートには `react-native-safe-area-context` の `SafeAreaProvider` が要る（Expo Router は標準で入れる）。
+*
+* 配色は `destructive` の面と、その上の文字（`paper`。`atom/button` の destructive と同じ組）。
+* 移植元は色リテラル（赤の `#B91C1C` と白）でテーマ非依存に固定していたが、love3 は色リテラルを持たない（トークンを使う）。
+* 状態は `lib/network.ts` の `useIsOnline`（NetInfo。web は `navigator.onLine`）。切れると `role="alert"` で読み上げる。
+*/
+function OfflineBanner({ message }) {
+	const online = useIsOnline();
+	const insets = useSafeAreaInsets();
+	if (online) return null;
+	return /* @__PURE__ */ jsx(View, {
+		role: "alert",
+		className: "bg-destructive",
+		style: { paddingTop: insets.top },
+		children: /* @__PURE__ */ jsx(View, {
+			className: "items-center py-1.5",
+			children: /* @__PURE__ */ jsx(Text$1, {
+				className: "text-paper text-[13px] font-semibold",
+				children: message
+			})
+		})
+	});
+}
+
+//#endregion
+export { OfflineBanner };

package/dist/native/once/snackbar.d.ts

@@ -0,0 +1,17 @@
+//#region src/native/once/snackbar.d.ts
+export type SnackbarProps = {
+  /** 上端から出す（既定）か下端から出すか。 */
+  position?: "top" | "bottom";
+  /** 各トーストの閉じるボタンの読み上げ名（既定は「閉じる」）。 */
+  closeLabel?: string;
+};
+/**
+ * トーストの置き場。アプリのルートに 1 つだけ置く（親は画面いっぱいの View にする。位置はその親の上端・下端）。
+ * `@lt-three/web` の once/snackbar（sonner の Toaster）に対応する。
+ * ルートには `react-native-safe-area-context` の `SafeAreaProvider` が要る（Expo Router は標準で入れる）。
+ *
+ * 表示は `lib/snackbar.ts` の `snackbar()` から行う。**置いていないと出ない**（開発時は `snackbar()` が警告を出す）。
+ * エラーは `role="alert"`、ほかは `role="status"`（支援技術が読み上げる）。iOS は live region が無いので、出たとき `announceForAccessibility` で読ませる。
+ */
+export declare function Snackbar({ position, closeLabel }: SnackbarProps): import("react").JSX.Element | null;
+//#endregion

package/dist/native/once/snackbar.js

@@ -0,0 +1,106 @@
+import { useTokenColor } from "../lib/token-color.js";
+import { Text as Text$1 } from "../base/text.js";
+import { CLOSE_LABEL } from "../lib/labels.js";
+import { dismissSnackbar, registerSnackbarHost, snackbarStore } from "../lib/snackbar.js";
+import { useEffect } from "react";
+import { AccessibilityInfo, Platform, Pressable, View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Feather from "@expo/vector-icons/Feather";
+import { useSafeAreaInsets } from "react-native-safe-area-context";
+
+//#region src/native/once/snackbar.tsx
+const ICON = {
+	success: "check-circle",
+	error: "alert-octagon",
+	info: "info",
+	warning: "alert-triangle"
+};
+/**
+* トーストの置き場。アプリのルートに 1 つだけ置く（親は画面いっぱいの View にする。位置はその親の上端・下端）。
+* `@lt-three/web` の once/snackbar（sonner の Toaster）に対応する。
+* ルートには `react-native-safe-area-context` の `SafeAreaProvider` が要る（Expo Router は標準で入れる）。
+*
+* 表示は `lib/snackbar.ts` の `snackbar()` から行う。**置いていないと出ない**（開発時は `snackbar()` が警告を出す）。
+* エラーは `role="alert"`、ほかは `role="status"`（支援技術が読み上げる）。iOS は live region が無いので、出たとき `announceForAccessibility` で読ませる。
+*/
+function Snackbar({ position = "top", closeLabel = CLOSE_LABEL }) {
+	const items = snackbarStore.use();
+	const insets = useSafeAreaInsets();
+	useEffect(() => registerSnackbarHost(), []);
+	if (items.length === 0) return null;
+	return /* @__PURE__ */ jsx(View, {
+		pointerEvents: "box-none",
+		style: {
+			position: "absolute",
+			left: 0,
+			right: 0,
+			...position === "top" ? { top: insets.top } : { bottom: insets.bottom }
+		},
+		className: "gap-2 p-4",
+		children: items.map((item) => /* @__PURE__ */ jsx(Toast, {
+			item,
+			closeLabel
+		}, item.id))
+	});
+}
+function Toast({ item, closeLabel }) {
+	const ink = useTokenColor("--ink-1000");
+	const iconColor = {
+		success: useTokenColor("--state-success"),
+		error: useTokenColor("--state-error"),
+		warning: useTokenColor("--state-warning"),
+		info: ink
+	}[item.icon];
+	const { id, title, description, action } = item;
+	useEffect(() => {
+		if (Platform.OS === "ios") AccessibilityInfo.announceForAccessibility(description ? `${title}。${description}` : title);
+	}, [title, description]);
+	return /* @__PURE__ */ jsxs(View, {
+		role: item.icon === "error" ? "alert" : "status",
+		"aria-live": item.icon === "error" ? "assertive" : "polite",
+		className: "flex-row items-start gap-3 rounded-surface border border-line bg-popover p-3 shadow-md",
+		children: [
+			/* @__PURE__ */ jsx(Feather, {
+				name: ICON[item.icon],
+				size: 16,
+				color: iconColor
+			}),
+			/* @__PURE__ */ jsxs(View, {
+				className: "shrink grow gap-1",
+				children: [/* @__PURE__ */ jsx(Text$1, {
+					className: "text-sm font-medium",
+					children: title
+				}), description ? /* @__PURE__ */ jsx(Text$1, {
+					className: "text-muted-foreground text-xs",
+					children: description
+				}) : null]
+			}),
+			action ? /* @__PURE__ */ jsx(Pressable, {
+				accessibilityRole: "button",
+				hitSlop: 8,
+				onPress: () => {
+					dismissSnackbar(id);
+					action.onPress();
+				},
+				children: /* @__PURE__ */ jsx(Text$1, {
+					className: "text-action-ink text-xs font-medium underline",
+					children: action.label
+				})
+			}) : null,
+			/* @__PURE__ */ jsx(Pressable, {
+				accessibilityRole: "button",
+				accessibilityLabel: closeLabel,
+				hitSlop: 8,
+				onPress: () => dismissSnackbar(id),
+				children: /* @__PURE__ */ jsx(Feather, {
+					name: "x",
+					size: 14,
+					color: ink
+				})
+			})
+		]
+	});
+}
+
+//#endregion
+export { Snackbar };

package/dist/native/styles.css

@@ -0,0 +1,46 @@
+/*
+ * love3 の native 用スタイル（`@lt-three/love3/native/styles.css`）。**Metro（実機）の CSS の入口**。
+ * アプリの `global.css` で 1 度だけ import する（NativeWind v5 / react-native-css が Tailwind v4 としてコンパイルする）。
+ *
+ *   @import "@lt-three/love3/native/styles.css";
+ *
+ * **`native/web/styles.css` とは別物。** あちらは preview・vitest が react-native-web で描くときの入口
+ * （web の Tailwind に乗るので `nativewind/theme` も要らず、ダークは `<html class="dark">`）。実機では使わない。
+ *
+ * 中身は、Tailwind v4 の本体・NativeWind のテーマ・トークン（`@lt-three/love3/styles.css`）・部品のクラスの検出。
+ * トークンの値は `src/tokens/definition.ts`（SSOT）が持つ。ここにはトークンを書かない。
+ */
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/preflight.css" layer(base);
+@import "tailwindcss/utilities.css";
+
+@import "nativewind/theme";
+
+/* トークン本体（@theme・ライト・ダーク）。生成物なので、値を変えるときは definition.ts を直す */
+@import "@lt-three/love3/styles.css";
+
+/*
+ * love3 の native の部品が使う Tailwind のクラスを拾う。node_modules（workspace の symlink 越し）は
+ * 自動検出の対象外なので、ここで明示する。`@source` のパスは、この CSS ファイルの位置が基準。
+ * 公開物（`dist/`）では部品が `*.js` になるので、`tsx` と `js` の両方を拾う（同じファイルを src と dist の両方に置く）。
+ * `web/` は react-native-web 用の補助（クラスを持たない）なので除く。
+ */
+@source "./**/*.{tsx,js}";
+@source not "./**/*.test.tsx";
+@source not "./web/**";
+
+/*
+ * native の `dark:` は **クラスではなく OS の配色設定**で解決する。
+ *
+ * `@lt-three/love3/styles.css` の既定は `&:is(.dark *)`（web の `<html class="dark">` 前提）。
+ * これを native でも使うと、`dark:` を持つ規則の祖先セレクタとして `.dark` が現れるため
+ * react-native-css が `.dark` の付いたビューを **container** として扱い、
+ * hover/active/focus の追跡ハンドラを載せる。すると**そのビューの子孫にある
+ * ScrollView が pan を受け取れなくなり、アプリ全体がスクロール不能になる**
+ * （タップは通るので気づきにくい。実機で確認）。
+ *
+ * OS の配色は `Appearance.setColorScheme()` で切り替えられる（`ThemeRoot` がやっている）ので、
+ * アプリ内のテーマ設定はこれまで通り効く。`.dark` は**変数を配るだけ**のクラスに戻る。
+ * `lib/tokens-check.ts`（`tokens.test.ts`）が、container を作るクラスが無いことを守る。
+ */
+@custom-variant dark (@media (prefers-color-scheme: dark));

package/dist/shared/analytics.d.ts

@@ -0,0 +1,71 @@
+//#region src/shared/analytics.d.ts
+export type LinePoint = {
+  /** 読み出しに出す見出し（日付など）。 */
+  x: string | number;
+  y: number;
+  /**
+   * 横位置に使う値（Unix 秒などの連続量）。
+   *
+   * **複数系列を重ねるときは必ず入れる。** 省略すると並び順で等間隔に置くので、
+   * 刻みの違う系列（日次の残高と不定間隔のエクイティ）を重ねたときに
+   * 同じ横位置が別の時刻を指してしまう。
+   */
+  t?: number;
+};
+/** 複数系列の折れ線 1 本ぶん。 */
+export type LineSeries = {
+  /** React の key と系列の識別子。 */
+  key: string;
+  /** 凡例に出す名前。 */
+  label: string;
+  points: LinePoint[];
+  /** 線の色。CSS の色（`var(--chart-1)` などトークンの参照を推奨）。 */
+  color: string;
+  /** 破線にする（副系列を主系列と見分けるため）。 */
+  dashed?: boolean;
+};
+/** 折れ線の props のうち、見た目の寸法と読み上げの要約（web と native で共通）。 */
+export type ChartCommonProps = {
+  height?: number;
+  /**
+   * チャートの要約（読み上げ用。例: 「残高は 1 月 1 日の $1,000 から 7 日の $1,210 へ上がった」）。渡すと `role="img"` の
+   * 名前になる。**図形（svg）そのものは名前を持たない**ので、値が読めないユーザー（スクリーンリーダー・キーボード）へは
+   * これで伝える。共有パッケージなので文言は使用側が持つ。
+   */
+  accessibilityLabel?: string;
+};
+/** 単一系列の折れ線（`LineChart`）。 */
+export type LineChartSharedProps = {
+  data: LinePoint[];
+  color?: string;
+};
+/** 複数系列の折れ線（`MultiLineChart`）。 */
+export type MultiLineChartSharedProps = {
+  series: LineSeries[];
+  /** 縦軸の目盛りの整形。通貨記号などは使用側が決める。 */
+  formatValue?: (value: number) => string;
+  /** 全系列が空のときに出す文言。 */
+  emptyText?: string;
+};
+/** 面付きの単一指標（`MetricCard`）。 */
+export type MetricCardSharedProps = {
+  label: string;
+  value: string;
+  subValue?: string;
+  /** 増減の符号。正なら state-success・負なら state-error で値を塗る（トークンの色。ダークにも追従する）。 */
+  trend?: number;
+  className?: string;
+};
+/** 符号で色が変わる数値（`ColoredValue`）。 */
+export interface ColoredValueSharedProps<TValue> {
+  value: TValue;
+  format?: (value: TValue) => string;
+  isPositive?: (value: TValue) => boolean;
+  isNegative?: (value: TValue) => boolean;
+  /** 増を表すクラス。既定は `text-state-success`（トークン。ダークに追従する）。 */
+  positiveColor?: string;
+  /** 減を表すクラス。既定は `text-state-error`。 */
+  negativeColor?: string;
+  className?: string;
+}
+//#endregion

package/dist/shared/button.d.ts

@@ -0,0 +1,7 @@
+//#region src/shared/button.d.ts
+export declare const BUTTON_VARIANTS: readonly ["default", "destructive", "outline", "secondary", "ghost", "link", "plate", "<3"];
+/** `"<3"` は Less Than Three のブランド色（ピンク塗り）。画面に 1 つだけ置く想定の確定操作用 */
+export type ButtonVariant = (typeof BUTTON_VARIANTS)[number];
+export declare const BUTTON_SIZES: readonly ["default", "xs", "sm", "lg", "xl", "icon", "icon-xs"];
+export type ButtonSize = (typeof BUTTON_SIZES)[number];
+//#endregion

package/dist/shared/button.js

@@ -0,0 +1,23 @@
+//#region src/shared/button.ts
+const BUTTON_VARIANTS = [
+	"default",
+	"destructive",
+	"outline",
+	"secondary",
+	"ghost",
+	"link",
+	"plate",
+	"<3"
+];
+const BUTTON_SIZES = [
+	"default",
+	"xs",
+	"sm",
+	"lg",
+	"xl",
+	"icon",
+	"icon-xs"
+];
+
+//#endregion
+export { BUTTON_SIZES, BUTTON_VARIANTS };