@lt-three/love3 0.0.0 → 0.1.0

package/README.md

@@ -1,3 +1,87 @@
 # @lt-three/love3
 
-Placeholder. Real releases are published from CI.
+<3（Less Than Three）共通のデザインシステム。Linear（linear.app）に寄せた、背景の階層・極薄の枠・淡い影・インディゴの主操作。
+web（React + Tailwind CSS v4）と React Native（NativeWind v5）で同じ見た目になる。トークン（色・角丸・影・書体）の実値は TS オブジェクトとしても読める。
+
+ライセンスは MIT。
+
+## インストール
+
+```sh
+npm install @lt-three/love3
+```
+
+- **web**: `react` `react-dom`（`>=19.3.0 <20`）と `tailwindcss`（v4）を入れる。web の部品が使う依存（Radix・`@tanstack/charts` など）はこのパッケージの `dependencies` に入っているので、別に入れなくてよい。
+- **React Native**: `react` `react-native` `nativewind`（v5）`react-native-css` `tailwindcss` に加えて、使う部品が引く native 側の依存を入れる（`expo`・`expo-router`・`react-native-reanimated`・`react-native-svg` など）。
+  native 専用の依存は **optional な `peerDependencies`**。使わない部品の依存は入れなくてよい（どの部品がどれを引くかは `package.json` の `peerDependencies` と部品の import を見る）。
+
+公開物は `dist/`（ESM の `.js` と `.d.ts`）。ソースと同じ構造で、部品ごとに 1 ファイルずつ出る。使わない部品の依存は引かれない。
+
+## 使い方
+
+| import                                                                      | 中身                                                                                                                                                          |
+| --------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------- |
+| `@lt-three/love3/styles.css`                                                | Tailwind v4 の `@theme` とライト・ダーク。web と NativeWind で共通                                                                                            |
+| `@lt-three/love3/tokens`                                                    | トークンの実値の TS オブジェクト（`tokens.light` / `tokens.dark`）・`cssVar`・型。CSS が使えない RN のチャート・Reanimated 向け。`node:` の組み込みも引かない |
+| `@lt-three/love3/tokens/contrast`                                           | コントラストを検査する前景 / 背景の組（`CONTRAST_PAIRS`）と、理由つきの既知の例外（`KNOWN_CONTRAST_EXCEPTIONS`）。データだけ                                  |
+| `@lt-three/love3/tuning`                                                    | トークンを実行時に上書きする「調整」の形式・検証・適用（`zod` だけを引く）                                                                                    |
+| `@lt-three/love3/web` / `@lt-three/love3/native` / `@lt-three/love3/shared` | 各レイヤーの入口（`index.ts`）                                                                                                                                |
+| `@lt-three/love3/web/atom/button.tsx` のように **拡張子つき**               | web コンポーネント。`web/*.ts`（hook・util）と `web/*.tsx`                                                                                                    |
+| `@lt-three/love3/web/styles.css`                                            | web のアプリが CSS の入口で import する。Tailwind・フォント・トークン・ベーススタイル                                                                         |
+| `@lt-three/love3/native/atom/button.tsx` のように **拡張子つき**            | native コンポーネント                                                                                                                                         |
+| `@lt-three/love3/native/styles.css`                                         | **実機（Metro / NativeWind v5）の CSS の入口**。Tailwind・`nativewind/theme`・トークン・部品のクラスの検出と、`dark:` を `prefers-color-scheme` にする上書き  |
+| `@lt-three/love3/shared/…`（`.ts` / `.tsx`）                                | web / native 共通の props 型・variant 定義                                                                                                                    |
+
+**ワイルドカードの export は拡張子つきのキー**（`./web/*.tsx` / `./web/*.ts`）。exports は拡張子を探してくれないので、利用側も拡張子つきで import する
+（TypeScript では `allowImportingTsExtensions` を有効にする）。拡張子なし（`.../atom/button`）は解決できない。指定子が指す先は `dist/` の `.js` と型宣言の `.d.ts`。
+
+### web
+
+CSS の入口で 1 度だけ import する。
+
+```css
+@import "@lt-three/love3/web/styles.css";
+```
+
+```tsx
+import { Button } from "@lt-three/love3/web/atom/button.tsx";
+```
+
+部品が使う Tailwind のクラスは、この CSS の `@source` が `dist/` から拾う。アプリ自身のソースは、バンドラのプロジェクトルートを基準にした Tailwind の自動検出に任せる。
+ダークは `<html class="dark">` で切り替える。
+
+### React Native
+
+アプリの `global.css` で 1 度だけ import する（NativeWind v5 / react-native-css が Tailwind v4 としてコンパイルする）。
+
+```css
+@import "@lt-three/love3/native/styles.css";
+```
+
+native の `dark:` は**クラスではなく OS の配色設定**（`prefers-color-scheme`）で解決する。`.dark` を祖先セレクタに持つと、react-native-css がそのビューを container として扱い、
+子孫の ScrollView が pan を受け取れなくなるため。アプリ内のテーマ設定は `Appearance.setColorScheme()` で切り替える。
+
+iOS の SwiftUI Charts を使う部品（`line-chart.ios.tsx` / `pie-chart.ios.tsx`）は、iOS のアプリが拡張子つきで明示して import する。
+
+### トークン
+
+```ts
+import { cssVar, tokens } from "@lt-three/love3/tokens";
+
+tokens.light["ink-900"]; // 実値（"#1b1c20"）
+cssVar("ink-900"); // "var(--ink-900)"
+```
+
+変数名は shadcn 互換の名前（`--background` / `--primary` など）に、`--ink-*` / `--line*` / `--lt-three` などの生トークンを足したもの。
+
+## 注意: `.theme-light` はセマンティックなクラスを明るくしない
+
+`.theme-light`（ライト固定のスコープ）が再定義するのは**生トークンだけ**（`--ink-*` / `--line*` / `--frame` / `--paper` / `--raised` / `--overlay` / `--wash` / `--scrim` / `--shadow-color` / `--action-ink` / `--state-*` / `--chart-*`）。
+`--background` / `--foreground` / `--primary` などのセマンティックな変数は `:root` で `var(--paper)` のように宣言されていて、**宣言した要素で解決されてから子孫へ継承される**。
+そのため `<html class="dark">` の下に `.theme-light` を置いても、その子孫で `bg-background` / `text-foreground` / `bg-primary` などは**暗いまま**になる
+（`bg-paper` / `text-ink-900` のような生トークンのクラスなら明るくなる）。
+love3 の部品は `.theme-light` を使わない。常にライトにしたいページでは、`.theme-light` の中で生トークンのクラスを使うか、`.theme-light` にもセマンティックな変数の再宣言を足す。
+
+## ライセンス
+
+[MIT](./LICENSE)

package/dist/native/analytics/animation.d.ts

@@ -0,0 +1,4 @@
+//#region src/native/analytics/animation.d.ts
+/** チャートのアニメーション時間（ms）。web の analytics/animation と同じ値に揃える。 */
+export declare const animationDuration = 250;
+//#endregion

package/dist/native/analytics/animation.js

@@ -0,0 +1,6 @@
+//#region src/native/analytics/animation.ts
+/** チャートのアニメーション時間（ms）。web の analytics/animation と同じ値に揃える。 */
+const animationDuration = 250;
+
+//#endregion
+export { animationDuration };

package/dist/native/analytics/chart.types.d.ts

@@ -0,0 +1,25 @@
+import { ChartCommonProps as ChartCommonProps$1, LineChartSharedProps, LinePoint, LineSeries, MultiLineChartSharedProps } from "../../shared/analytics.js";
+import { ViewStyle } from "react-native";
+//#region src/native/analytics/chart.types.d.ts
+export type PieSlice = {
+  label: string;
+  value: number;
+  color?: string;
+};
+type ChartCommonProps = ChartCommonProps$1 & {
+  style?: ViewStyle;
+  /**
+   * ネイティブチャート非対応プラットフォームで出す文言。
+   * 共有パッケージなので既定値のみ持ち、翻訳は使用側が渡す。
+   */
+  fallbackText?: string;
+};
+export type LineChartProps = ChartCommonProps & LineChartSharedProps;
+export type PieChartProps = ChartCommonProps & {
+  data: PieSlice[];
+  /** 中心を空けたドーナツ表示にする。 */
+  donut?: boolean;
+};
+export type MultiLineChartProps = ChartCommonProps & MultiLineChartSharedProps;
+//#endregion
+export type { LinePoint, LineSeries };

package/dist/native/analytics/line-chart.d.ts

@@ -0,0 +1,4 @@
+import { LineChartProps } from "./chart.types.js";
+//#region src/native/analytics/line-chart.d.ts
+export declare function LineChart(props: LineChartProps): import("react").JSX.Element;
+//#endregion

package/dist/native/analytics/line-chart.ios.d.ts

@@ -0,0 +1,4 @@
+import { LineChartProps } from "./chart.types.js";
+//#region src/native/analytics/line-chart.ios.d.ts
+export declare function LineChart({ data, color, height, style }: LineChartProps): import("react").JSX.Element;
+//#endregion

package/dist/native/analytics/line-chart.ios.js

@@ -0,0 +1,24 @@
+import { useChartPalette } from "../lib/chart-palette.js";
+import { Chart, Host } from "@expo/ui/swift-ui";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/native/analytics/line-chart.ios.tsx
+function LineChart({ data, color, height = 220, style }) {
+	const palette = useChartPalette();
+	return /* @__PURE__ */ jsx(Host, {
+		style: [{ height }, style],
+		children: /* @__PURE__ */ jsx(Chart, {
+			data: data.map((point) => ({
+				x: point.x,
+				y: point.y
+			})),
+			type: "line",
+			showGrid: true,
+			animate: true,
+			lineStyle: { color: color ?? palette[0] }
+		})
+	});
+}
+
+//#endregion
+export { LineChart };

package/dist/native/analytics/line-chart.js

@@ -0,0 +1,33 @@
+import { Text as Text$1 } from "../base/text.js";
+import { Suspense, lazy } from "react";
+import { Platform, View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/native/analytics/line-chart.tsx
+const SwiftUILineChart = lazy(() => import("./line-chart.ios.js").then((module) => ({ default: module.LineChart })));
+const DEFAULT_FALLBACK_TEXT = "チャートは現在 iOS でのみ表示できます";
+const DEFAULT_HEIGHT = 220;
+function LineChart(props) {
+	const height = props.height ?? DEFAULT_HEIGHT;
+	if (Platform.OS !== "ios") return /* @__PURE__ */ jsx(LineChartFallback, {
+		height,
+		text: props.fallbackText
+	});
+	return /* @__PURE__ */ jsx(Suspense, {
+		fallback: /* @__PURE__ */ jsx(View, { style: { height } }),
+		children: /* @__PURE__ */ jsx(SwiftUILineChart, { ...props })
+	});
+}
+function LineChartFallback({ height, text }) {
+	return /* @__PURE__ */ jsx(View, {
+		style: { height },
+		className: "items-center justify-center",
+		children: /* @__PURE__ */ jsx(Text$1, {
+			className: "text-muted-foreground text-sm",
+			children: text ?? DEFAULT_FALLBACK_TEXT
+		})
+	});
+}
+
+//#endregion
+export { LineChart };

package/dist/native/analytics/metric-card.d.ts

@@ -0,0 +1,10 @@
+import { MetricCardSharedProps } from "../../shared/analytics.js";
+//#region src/native/analytics/metric-card.d.ts
+export type MetricCardProps = MetricCardSharedProps;
+/**
+ * 面付きの単一指標。`@lt-three/web` の analytics/metric-card に対応する。
+ * 中身（ラベル + 大型の等幅数値 + 補助）は `atom/readout` が持ち、
+ * ここは web と同じく Card 外装を着せる役だけを担う。
+ */
+export declare function MetricCard({ label, value, subValue, trend, className }: MetricCardProps): import("react").JSX.Element;
+//#endregion

package/dist/native/analytics/metric-card.js

@@ -0,0 +1,29 @@
+import { useTokenColor } from "../lib/token-color.js";
+import { cn } from "../lib/utils.js";
+import { Readout } from "../atom/readout.js";
+import { Panel } from "../layout/panel.js";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/native/analytics/metric-card.tsx
+/**
+* 面付きの単一指標。`@lt-three/web` の analytics/metric-card に対応する。
+* 中身（ラベル + 大型の等幅数値 + 補助）は `atom/readout` が持ち、
+* ここは web と同じく Card 外装を着せる役だけを担う。
+*/
+function MetricCard({ label, value, subValue, trend, className }) {
+	const up = useTokenColor("--state-success");
+	const down = useTokenColor("--state-error");
+	const valueColor = trend === void 0 || trend === 0 ? void 0 : trend > 0 ? up : down;
+	return /* @__PURE__ */ jsx(Panel, {
+		className: cn("p-4", className),
+		children: /* @__PURE__ */ jsx(Readout, {
+			label,
+			value,
+			sub: subValue,
+			valueColor
+		})
+	});
+}
+
+//#endregion
+export { MetricCard };

package/dist/native/analytics/multi-line-chart.d.ts

@@ -0,0 +1,17 @@
+import { MultiLineChartProps } from "./chart.types.js";
+//#region src/native/analytics/multi-line-chart.d.ts
+/**
+ * 複数系列の折れ線。移植元は `@lt-three/web` の analytics/line-chart（Recharts・複数キー）で、web の love3 では
+ * `analytics/multi-line-chart`（`@tanstack/charts`）が対応する（props は `shared/analytics.ts` で同じ）。
+ *
+ * **`@expo/ui` の Chart は 1 系列しか描けない**（型定義にも line/area は single-series と
+ * 明記されている）ので、同じ軸に 2 本以上載せたいものはこちらを使う。残高とエクイティの
+ * ように単位も軸も同じ系列を 2 枚のカードに分けると、上下を見比べないと関係が読めない。
+ *
+ * 描画は react-native-svg。SwiftUI Charts と違って外枠は描かず、目盛りの罫線だけを敷く
+ * （使用側が `Panel` で囲うと枠が二重になるため）。
+ *
+ * タップすると、その位置の各系列の値を読み出す。折れ線は目盛りだけだと概形しか読めない。
+ */
+export declare function MultiLineChart({ series, height, formatValue, emptyText, style, accessibilityLabel }: MultiLineChartProps): import("react").JSX.Element;
+//#endregion

package/dist/native/analytics/multi-line-chart.js

@@ -0,0 +1,215 @@
+import { useTokenColor } from "../lib/token-color.js";
+import { Text as Text$2 } from "../base/text.js";
+import { tabularNums } from "../lib/typography.js";
+import { useState } from "react";
+import { Pressable, View } from "react-native";
+import { jsx, jsxs } from "react/jsx-runtime";
+import Svg, { Circle, Line, Path, Text as Text$1 } from "react-native-svg";
+
+//#region src/native/analytics/multi-line-chart.tsx
+/**
+* 複数系列の折れ線。移植元は `@lt-three/web` の analytics/line-chart（Recharts・複数キー）で、web の love3 では
+* `analytics/multi-line-chart`（`@tanstack/charts`）が対応する（props は `shared/analytics.ts` で同じ）。
+*
+* **`@expo/ui` の Chart は 1 系列しか描けない**（型定義にも line/area は single-series と
+* 明記されている）ので、同じ軸に 2 本以上載せたいものはこちらを使う。残高とエクイティの
+* ように単位も軸も同じ系列を 2 枚のカードに分けると、上下を見比べないと関係が読めない。
+*
+* 描画は react-native-svg。SwiftUI Charts と違って外枠は描かず、目盛りの罫線だけを敷く
+* （使用側が `Panel` で囲うと枠が二重になるため）。
+*
+* タップすると、その位置の各系列の値を読み出す。折れ線は目盛りだけだと概形しか読めない。
+*/
+function MultiLineChart({ series, height = 220, formatValue = (value) => String(Math.round(value)), emptyText = "データがありません", style, accessibilityLabel }) {
+	const line = useTokenColor("--line");
+	const mutedInk = useTokenColor("--ink-500");
+	const [width, setWidth] = useState(0);
+	const [pickedX, setPickedX] = useState(null);
+	const withData = series.filter((entry) => entry.points.length > 0);
+	const values = withData.flatMap((entry) => entry.points.map((point) => point.y));
+	if (withData.length === 0) return /* @__PURE__ */ jsx(View, {
+		style: [{ height }, style],
+		className: "items-center justify-center",
+		children: /* @__PURE__ */ jsx(Text$2, {
+			className: "text-muted-foreground text-sm",
+			children: emptyText
+		})
+	});
+	const padding = {
+		top: 8,
+		right: 8,
+		bottom: 8,
+		left: 72
+	};
+	const plotWidth = Math.max(width - padding.left - padding.right, 0);
+	const plotHeight = height - padding.top - padding.bottom;
+	const min = Math.min(...values);
+	const max = Math.max(...values);
+	const span = max - min || Math.max(Math.abs(max), 1);
+	const low = max === min ? min - span / 2 : min;
+	const high = max === min ? max + span / 2 : max;
+	const toY = (value) => padding.top + (1 - (value - low) / (high - low)) * plotHeight;
+	const times = withData.flatMap((entry) => entry.points.map((point) => point.t));
+	const timed = times.every((time) => time !== void 0) && times.length > 0;
+	const tMin = timed ? Math.min(...times) : 0;
+	const tSpan = (timed ? Math.max(...times) : 0) - tMin;
+	const toX = (index, count, time) => {
+		if (timed && time !== void 0) return padding.left + (tSpan === 0 ? plotWidth / 2 : (time - tMin) / tSpan * plotWidth);
+		return padding.left + (count === 1 ? plotWidth / 2 : index / (count - 1) * plotWidth);
+	};
+	const ticks = [
+		high,
+		(high + low) / 2,
+		low
+	];
+	const picked = pickedX === null ? [] : withData.map((entry) => ({
+		entry,
+		hit: nearestPoint(entry, pickedX, toX)
+	})).filter((row) => row.hit !== null);
+	const marker = picked[0];
+	return /* @__PURE__ */ jsxs(View, {
+		style,
+		...accessibilityLabel === void 0 ? {} : {
+			accessible: true,
+			accessibilityRole: "image",
+			accessibilityLabel
+		},
+		children: [
+			/* @__PURE__ */ jsx(Pressable, {
+				focusable: false,
+				tabIndex: -1,
+				onLayout: (event) => setWidth(event.nativeEvent.layout.width),
+				onPress: (event) => {
+					const x = pressX(event);
+					if (x === null) return;
+					setPickedX(x < padding.left || x > padding.left + plotWidth ? null : x);
+				},
+				children: /* @__PURE__ */ jsxs(Svg, {
+					width,
+					height,
+					children: [
+						ticks.map((tick) => /* @__PURE__ */ jsx(Line, {
+							x1: padding.left,
+							x2: padding.left + plotWidth,
+							y1: toY(tick),
+							y2: toY(tick),
+							stroke: line,
+							strokeWidth: 1
+						}, `grid-${tick}`)),
+						ticks.map((tick) => /* @__PURE__ */ jsx(Text$1, {
+							x: padding.left - 8,
+							y: toY(tick) + 4,
+							fontSize: 10,
+							fill: mutedInk,
+							textAnchor: "end",
+							children: formatValue(tick)
+						}, `label-${tick}`)),
+						withData.map((entry) => /* @__PURE__ */ jsx(Path, {
+							d: pathOf(entry, toX, toY),
+							stroke: entry.color,
+							strokeWidth: entry.dashed === true ? 1 : 1.5,
+							strokeDasharray: entry.dashed === true ? "4 3" : void 0,
+							fill: "none"
+						}, entry.key)),
+						marker !== void 0 && /* @__PURE__ */ jsx(Line, {
+							x1: marker.hit.x,
+							x2: marker.hit.x,
+							y1: padding.top,
+							y2: padding.top + plotHeight,
+							stroke: mutedInk,
+							strokeWidth: 1,
+							strokeDasharray: "2 2"
+						}),
+						picked.map((row) => /* @__PURE__ */ jsx(Circle, {
+							cx: row.hit.x,
+							cy: toY(row.hit.value.y),
+							r: 3,
+							fill: row.entry.color
+						}, `dot-${row.entry.key}`))
+					]
+				})
+			}),
+			marker !== void 0 && /* @__PURE__ */ jsxs(View, {
+				className: "border-line bg-popover rounded-control mt-2 gap-1 border p-2.5 shadow-md",
+				children: [/* @__PURE__ */ jsx(Text$2, {
+					style: tabularNums,
+					className: "text-muted-foreground font-mono text-[11px]",
+					children: String(marker.hit.value.x)
+				}), picked.map((row) => /* @__PURE__ */ jsxs(View, {
+					className: "flex-row items-center justify-between gap-3",
+					children: [/* @__PURE__ */ jsxs(View, {
+						className: "flex-row items-center gap-1.5",
+						children: [/* @__PURE__ */ jsx(View, { style: {
+							width: 10,
+							height: 2,
+							backgroundColor: row.entry.color
+						} }), /* @__PURE__ */ jsx(Text$2, {
+							className: "text-muted-foreground text-[11px]",
+							children: row.entry.label
+						})]
+					}), /* @__PURE__ */ jsx(Text$2, {
+						style: tabularNums,
+						className: "text-foreground font-mono text-[13px] font-semibold",
+						children: formatValue(row.hit.value.y)
+					})]
+				}, `read-${row.entry.key}`))]
+			}),
+			/* @__PURE__ */ jsx(View, {
+				className: "flex-row flex-wrap gap-x-4 gap-y-1 px-1 pt-2",
+				children: series.map((entry) => /* @__PURE__ */ jsxs(View, {
+					className: "flex-row items-center gap-1.5",
+					children: [/* @__PURE__ */ jsx(View, { style: {
+						width: 10,
+						height: 2,
+						backgroundColor: entry.color,
+						opacity: entry.points.length > 0 ? 1 : .4
+					} }), /* @__PURE__ */ jsx(Text$2, {
+						className: "text-muted-foreground text-[11px]",
+						children: entry.label
+					})]
+				}, `legend-${entry.key}`))
+			})
+		]
+	});
+}
+/**
+* 押した位置（押した要素の左端からの x）。実機は `locationX`。
+* react-native-web の `onPress` は DOM の click を渡す（`locationX` が無い）ので、そのときは要素の左端との差で求める。
+* 位置の無い click（キーボード等）は null。
+*/
+function pressX(event) {
+	const { locationX } = event.nativeEvent;
+	if (typeof locationX === "number" && Number.isFinite(locationX)) return locationX;
+	const dom = event.nativeEvent;
+	if (dom.detail === 0) return null;
+	const target = event.currentTarget;
+	return dom.clientX - target.getBoundingClientRect().left;
+}
+/** 系列を 1 本の SVG パスにする。 */
+function pathOf(entry, toX, toY) {
+	const count = entry.points.length;
+	return entry.points.map((point, index) => `${index === 0 ? "M" : "L"}${toX(index, count, point.t)},${toY(point.y)}`).join(" ");
+}
+/** 押した x にいちばん近い点を、その描画位置ごと返す。 */
+function nearestPoint(entry, pickedX, toX) {
+	const count = entry.points.length;
+	let best;
+	let bestX = 0;
+	let bestDistance = Number.POSITIVE_INFINITY;
+	for (let index = 0; index < count; index++) {
+		const x = toX(index, count, entry.points[index]?.t);
+		const distance = Math.abs(x - pickedX);
+		if (distance < bestDistance) {
+			bestDistance = distance;
+			bestX = x;
+			best = entry.points[index];
+		}
+	}
+	return best === void 0 ? null : {
+		x: bestX,
+		value: best
+	};
+}
+
+//#endregion
+export { MultiLineChart };

package/dist/native/analytics/pie-chart.d.ts

@@ -0,0 +1,15 @@
+import { PieChartProps } from "./chart.types.js";
+//#region src/native/analytics/pie-chart.d.ts
+/**
+ * 円グラフ（react-native-svg）。移植元の既定（Android / web）実装。iOS の SwiftUI Charts 版（`pie-chart.ios.tsx`）は
+ * `@expo/ui` が要るので、placeholder の仕組み（G5）と一緒に足す。足すまでは iOS もこの実装で描く。
+ *
+ * 描画は `multi-line-chart` と同じ react-native-svg。**「iOS のみ」のプレースホルダに
+ * しない**のは、勝敗比率・ロング / ショート・銘柄内訳がこのコンポーネントだけで出ており、
+ * Android では画面の主役が丸ごと文言に置き換わってしまうため。
+ *
+ * **凡例はここで持たない。** 使用側（口座のチャート）が色付きの内訳リストを円の下に
+ * 必ず並べるので、ここで凡例を出すと同じものが 2 段になる。円の高さもそのぶん削れる。
+ */
+export declare function PieChart({ data, donut, height, style, accessibilityLabel }: PieChartProps): import("react").JSX.Element;
+//#endregion

package/dist/native/analytics/pie-chart.ios.d.ts

@@ -0,0 +1,4 @@
+import { PieChartProps } from "./chart.types.js";
+//#region src/native/analytics/pie-chart.ios.d.ts
+export declare function PieChart({ data, donut, height, style }: PieChartProps): import("react").JSX.Element;
+//#endregion

package/dist/native/analytics/pie-chart.ios.js

@@ -0,0 +1,24 @@
+import { useChartPalette } from "../lib/chart-palette.js";
+import { Chart, Host } from "@expo/ui/swift-ui";
+import { jsx } from "react/jsx-runtime";
+
+//#region src/native/analytics/pie-chart.ios.tsx
+function PieChart({ data, donut, height = 220, style }) {
+	const palette = useChartPalette();
+	return /* @__PURE__ */ jsx(Host, {
+		style: [{ height }, style],
+		children: /* @__PURE__ */ jsx(Chart, {
+			data: data.map((slice, index) => ({
+				x: slice.label,
+				y: slice.value,
+				color: slice.color ?? palette[index % palette.length]
+			})),
+			type: "pie",
+			animate: true,
+			pieStyle: donut ? { innerRadius: .6 } : void 0
+		})
+	});
+}
+
+//#endregion
+export { PieChart };

package/dist/native/analytics/pie-chart.js

@@ -0,0 +1,92 @@
+import { useTokenColor } from "../lib/token-color.js";
+import { useChartPalette } from "../lib/chart-palette.js";
+import { Text as Text$2 } from "../base/text.js";
+import { View } from "react-native";
+import { jsx } from "react/jsx-runtime";
+import Svg, { Circle, Path } from "react-native-svg";
+
+//#region src/native/analytics/pie-chart.tsx
+/**
+* 円グラフ（react-native-svg）。移植元の既定（Android / web）実装。iOS の SwiftUI Charts 版（`pie-chart.ios.tsx`）は
+* `@expo/ui` が要るので、placeholder の仕組み（G5）と一緒に足す。足すまでは iOS もこの実装で描く。
+*
+* 描画は `multi-line-chart` と同じ react-native-svg。**「iOS のみ」のプレースホルダに
+* しない**のは、勝敗比率・ロング / ショート・銘柄内訳がこのコンポーネントだけで出ており、
+* Android では画面の主役が丸ごと文言に置き換わってしまうため。
+*
+* **凡例はここで持たない。** 使用側（口座のチャート）が色付きの内訳リストを円の下に
+* 必ず並べるので、ここで凡例を出すと同じものが 2 段になる。円の高さもそのぶん削れる。
+*/
+function PieChart({ data, donut, height = 220, style, accessibilityLabel }) {
+	const palette = useChartPalette();
+	const fallbackColor = useTokenColor("--chart-1");
+	const total = data.reduce((sum, slice) => sum + Math.max(slice.value, 0), 0);
+	const colorOf = (slice, index) => slice.color ?? palette[index % palette.length] ?? fallbackColor;
+	const size = height;
+	const radius = size / 2;
+	const inner = donut ? radius * .6 : 0;
+	return /* @__PURE__ */ jsx(View, {
+		style,
+		...accessibilityLabel === void 0 ? {} : {
+			accessible: true,
+			accessibilityRole: "image",
+			accessibilityLabel
+		},
+		children: /* @__PURE__ */ jsx(View, {
+			style: { height: size },
+			className: "items-center justify-center",
+			children: total > 0 ? /* @__PURE__ */ jsx(Svg, {
+				width: size,
+				height: size,
+				viewBox: `0 0 ${size} ${size}`,
+				children: data.length === 1 && data[0] ? /* @__PURE__ */ jsx(Circle, {
+					cx: radius,
+					cy: radius,
+					r: (radius + inner) / 2,
+					stroke: colorOf(data[0], 0),
+					strokeWidth: radius - inner,
+					fill: "none"
+				}) : slicePaths(data, total, radius, inner).map(({ slice, d }, index) => /* @__PURE__ */ jsx(Path, {
+					d,
+					fill: colorOf(slice, index)
+				}, slice.label))
+			}) : /* @__PURE__ */ jsx(Text$2, {
+				className: "text-muted-foreground text-sm",
+				children: "–"
+			})
+		})
+	});
+}
+/** 各スライスを SVG のパスにする。12 時から時計回りに並べる（SwiftUI Charts と同じ向き）。 */
+function slicePaths(data, total, radius, inner) {
+	let angle = -Math.PI / 2;
+	return data.map((slice) => {
+		const sweep = Math.max(slice.value, 0) / total * Math.PI * 2;
+		const end = angle + sweep;
+		const large = sweep > Math.PI ? 1 : 0;
+		const outerStart = point(radius, radius, radius, angle);
+		const outerEnd = point(radius, radius, radius, end);
+		const innerEnd = point(radius, radius, inner, end);
+		const innerStart = point(radius, radius, inner, angle);
+		angle = end;
+		return {
+			slice,
+			d: [
+				`M ${outerStart.x} ${outerStart.y}`,
+				`A ${radius} ${radius} 0 ${large} 1 ${outerEnd.x} ${outerEnd.y}`,
+				`L ${innerEnd.x} ${innerEnd.y}`,
+				inner > 0 ? `A ${inner} ${inner} 0 ${large} 0 ${innerStart.x} ${innerStart.y}` : "",
+				"Z"
+			].filter(Boolean).join(" ")
+		};
+	});
+}
+function point(cx, cy, r, angle) {
+	return {
+		x: cx + r * Math.cos(angle),
+		y: cy + r * Math.sin(angle)
+	};
+}
+
+//#endregion
+export { PieChart };

package/dist/native/analytics/single-number.d.ts

@@ -0,0 +1,19 @@
+//#region src/native/analytics/single-number.d.ts
+export type SingleNumberProps = {
+  title: string;
+  subTitle?: string;
+  value: number | null;
+  unit?: string;
+  /** 比較対象の値。渡すと差分と増減率を併記する。 */
+  compareValue?: number;
+  compareTitle?: string;
+  /** 増が悪い指標（コスト等）で色を反転する。 */
+  reverseColor?: boolean;
+  className?: string;
+};
+/**
+ * raised 面（surface 角丸・1px の極薄の罫線）に大きな数値を載せる指標。
+ * `@lt-three/web` の analytics/single-number に対応する。増減は state の色（面が反転しないので、同じテーマの値でよい）。
+ */
+export declare function SingleNumber({ title, subTitle, value, unit, compareValue, compareTitle, reverseColor, className }: SingleNumberProps): import("react").JSX.Element;
+//#endregion