@lt-three/love3 0.0.0 → 0.1.0

package/dist/web/layout/simple-dialog.js

@@ -0,0 +1,24 @@
+import { Dialog, DialogContent, DialogHeader, DialogTitle } from "../base/dialog.js";
+import { ScrollArea } from "../base/scroll-area.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/web/layout/simple-dialog.tsx
+function SimpleDialog({ open, onOpenChange, title, children }) {
+	return /* @__PURE__ */ jsx(Dialog, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ jsxs(DialogContent, {
+			className: "max-h-[calc(100dvh-2rem)] grid-rows-[auto_minmax(0,1fr)]",
+			children: [/* @__PURE__ */ jsx(DialogHeader, { children: /* @__PURE__ */ jsx(DialogTitle, { children: title }) }), /* @__PURE__ */ jsx(ScrollArea, {
+				className: "h-full",
+				children: /* @__PURE__ */ jsx("div", {
+					className: "pr-3",
+					children
+				})
+			})]
+		})
+	});
+}
+
+//#endregion
+export { SimpleDialog };

package/dist/web/layout/simple-table.d.ts

@@ -0,0 +1,49 @@
+import { TableRow } from "../base/table.js";
+import React from "react";
+//#region src/web/layout/simple-table.d.ts
+/**
+ * 宣言的な薄い罫線のデータテーブル。columns / data を渡すだけで使える。
+ * ヘッダは frame の淡い面、行罫線は 1px の極薄の線（base/table を踏襲）。
+ * 数値列は mono + tabular-nums + 右寄せにする。
+ *
+ * TanStack ベースの DataTable（ページネーション/選択つき・layout/table）とは別物で、
+ * ソートやページングが不要な短い表（ダッシュボードのサマリ等）向けの軽量版。
+ */
+export type SimpleColumn<T> = {
+  /** 列キー（行内で一意）。 */
+  key: string;
+  header: React.ReactNode;
+  /** セル / ヘッダの揃え（既定 left）。 */
+  align?: "left" | "right" | "center";
+  /** 等幅 + tabular-nums（数値・ID 向け）。 */
+  mono?: boolean;
+  /** 強調（font-medium）。 */
+  strong?: boolean;
+  /** セルの追加クラス。 */
+  cellClassName?: string;
+  /** ヘッダの追加クラス。 */
+  headClassName?: string;
+  /** セルの描画。未指定時は row[key] を表示する。 */
+  render?: (row: T) => React.ReactNode;
+  /**
+   * この幅（Tailwind のブレークポイント）より狭いときは列ごと隠す。狭い幅で重要でない列（ID・補足など）を畳んで、
+   * 横スクロールを避けるために使う。未指定なら常に出す。
+   */
+  hideBelow?: "sm" | "md" | "lg";
+};
+export declare function SimpleTable<T extends object>({ columns, data, getRowKey, onRowClick, getRowProps, className, wrapperClassName }: {
+  columns: SimpleColumn<T>[];
+  data: T[];
+  /** 行キーの導出。未指定時は index を使う。 */
+  getRowKey?: (row: T, index: number) => string;
+  /**
+   * 行クリック（任意）。渡すと行にフォーカスでき（tabIndex=0）、Enter・Space でも押せる。
+   * 行の中のボタンやリンクのキー操作は奪わない（行そのものにフォーカスがあるときだけ反応する）。
+   */
+  onRowClick?: (row: T) => void;
+  /** 行ごとの追加属性（data-* / className 等）。行全体クリックや e2e セレクタ付与に使う。 */
+  getRowProps?: (row: T, index: number) => Omit<React.ComponentPropsWithoutRef<typeof TableRow>, "key">;
+  className?: string;
+  wrapperClassName?: string;
+}): React.JSX.Element;
+//#endregion

package/dist/web/layout/simple-table.js

@@ -0,0 +1,58 @@
+import { cn } from "../lib/utils.js";
+import { Table, TableBody, TableCell, TableHead, TableHeader, TableRow } from "../base/table.js";
+import { isValidElement } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/web/layout/simple-table.tsx
+/** Tailwind はクラス名を静的に拾うので、文字列を組み立てず表にしておく。 */
+const hideBelowClass = {
+	sm: "hidden sm:table-cell",
+	md: "hidden md:table-cell",
+	lg: "hidden lg:table-cell"
+};
+const alignClass = {
+	left: "text-left",
+	right: "text-right",
+	center: "text-center"
+};
+/** `render` が無い列の既定の描画。行の `key` の値が、文字・数値・要素のときだけ表示する。 */
+function cellValue(row, key) {
+	const value = Reflect.get(row, key);
+	if (typeof value === "string" || typeof value === "number" || isValidElement(value)) return value;
+	return null;
+}
+function SimpleTable({ columns, data, getRowKey, onRowClick, getRowProps, className, wrapperClassName }) {
+	return /* @__PURE__ */ jsxs(Table, {
+		className,
+		wrapperClassName,
+		children: [/* @__PURE__ */ jsx(TableHeader, { children: /* @__PURE__ */ jsx(TableRow, { children: columns.map((col) => /* @__PURE__ */ jsx(TableHead, {
+			className: cn(col.hideBelow && hideBelowClass[col.hideBelow], col.align && alignClass[col.align], col.headClassName),
+			children: col.header
+		}, col.key)) }) }), /* @__PURE__ */ jsx(TableBody, { children: data.map((row, index) => {
+			const { onClick, onKeyDown, tabIndex, className: rowClassName, ...rest } = getRowProps?.(row, index) ?? {};
+			return /* @__PURE__ */ jsx(TableRow, {
+				...rest,
+				tabIndex: tabIndex ?? (onRowClick ? 0 : void 0),
+				onClick: (event) => {
+					onRowClick?.(row);
+					onClick?.(event);
+				},
+				onKeyDown: (event) => {
+					if (onRowClick && event.target === event.currentTarget && (event.key === "Enter" || event.key === " ")) {
+						event.preventDefault();
+						onRowClick(row);
+					}
+					onKeyDown?.(event);
+				},
+				className: cn(onRowClick && "focus-visible:outline-ring cursor-pointer focus-visible:outline-2 focus-visible:-outline-offset-2", rowClassName),
+				children: columns.map((col) => /* @__PURE__ */ jsx(TableCell, {
+					className: cn(col.hideBelow && hideBelowClass[col.hideBelow], col.align && alignClass[col.align], col.mono && "font-mono tabular-nums", col.strong && "text-foreground font-medium", col.cellClassName),
+					children: col.render ? col.render(row) : cellValue(row, col.key)
+				}, col.key))
+			}, getRowKey ? getRowKey(row, index) : index);
+		}) })]
+	});
+}
+
+//#endregion
+export { SimpleTable };

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

@@ -0,0 +1,26 @@
+import React from "react";
+//#region src/web/layout/tabs.d.ts
+export type TabType = {
+  [value: string]: {
+    name: string;
+    render?: () => React.ReactNode;
+    onSelect?: () => void;
+  };
+};
+export type TabsProps = {
+  tabs: TabType;
+  full?: boolean;
+  defaultValue?: string;
+  /** 制御モード: 外部から値を管理する場合に指定 */
+  value?: string;
+  onValueChange?: (value: string) => void;
+  /** TabsList と同じ高さで横並びに配置する右側のスロット（ツールバー的に利用する） */
+  trailing?: React.ReactNode;
+  /**
+   * DEV-E2E: 各トリガーに `${testIdPrefix}-${value}` の data-testid を付与する。
+   * 省略時は data-testid を出力しない。
+   */
+  testIdPrefix?: string;
+};
+export declare function Tabs(props: TabsProps): React.JSX.Element;
+//#endregion

package/dist/web/layout/tabs.js

@@ -0,0 +1,42 @@
+import { cn } from "../lib/utils.js";
+import { Tabs as Tabs$1, TabsContent, TabsList, TabsTrigger } from "../base/tabs.js";
+import { useState } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/web/layout/tabs.tsx
+function Tabs(props) {
+	const [internalValue, setInternalValue] = useState(props.defaultValue ?? Object.keys(props.tabs)[0] ?? "");
+	const tabValue = props.value ?? internalValue;
+	const setTabValue = (value) => {
+		props.onValueChange?.(value);
+		if (props.value === void 0) setInternalValue(value);
+	};
+	const hasContent = Object.values(props.tabs).some((tab) => tab.render);
+	return /* @__PURE__ */ jsxs(Tabs$1, {
+		value: tabValue,
+		onValueChange: (value) => {
+			props.tabs[value]?.onSelect?.();
+			setTabValue(value);
+		},
+		className: hasContent ? "gap-4" : void 0,
+		children: [/* @__PURE__ */ jsxs("div", {
+			className: cn("flex items-center gap-2", props.trailing && "justify-between"),
+			children: [/* @__PURE__ */ jsx(TabsList, {
+				className: cn(props.full && "w-full"),
+				children: Object.keys(props.tabs).map((tab) => /* @__PURE__ */ jsx(TabsTrigger, {
+					value: tab,
+					className: "cursor-pointer",
+					...hasContent ? {} : { "aria-controls": void 0 },
+					"data-testid": props.testIdPrefix ? `${props.testIdPrefix}-${tab}` : void 0,
+					children: props.tabs[tab]?.name
+				}, tab))
+			}), props.trailing]
+		}), hasContent && /* @__PURE__ */ jsx(TabsContent, {
+			value: tabValue,
+			children: props.tabs[tabValue]?.render?.()
+		}, tabValue)]
+	});
+}
+
+//#endregion
+export { Tabs };

package/dist/web/layout/titled-modal.d.ts

@@ -0,0 +1,33 @@
+import * as React$1 from "react";
+//#region src/web/layout/titled-modal.d.ts
+type TitledModalProps = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: React$1.ReactNode;
+  /** 本文の先頭に置く説明。支援技術向けの description も兼ねる。 */
+  description?: React$1.ReactNode;
+  children?: React$1.ReactNode;
+  /** 右寄せで並べる操作。あると上に 1px の区切り線が入る。 */
+  footer?: React$1.ReactNode;
+  /** 閉じるボタンの読み上げ名。 */
+  closeLabel?: string;
+  /** × の中身（省略時は lucide の X）。 */
+  closeIcon?: React$1.ReactNode;
+  className?: string;
+  "data-testid"?: string;
+};
+/**
+ * 見出しと × を持つ大きめのモーダル。
+ *
+ * overlay 面（枠もリングも無し・影だけ）・幅 560。見出し（16/24 semibold）と × の下に 1px の薄い区切り線、本文は p-5、
+ * フッターがあれば上に区切り線を引いて右寄せで操作を並べる。開閉状態は呼び出し側が持つ（制御専用）。
+ *
+ * 表示中は `data-modal-open` を持つので、浮いている常駐 UI を CSS で隠せる
+ * （`body:has([data-modal-open])`）。
+ *
+ * 開いたときの初期フォーカスは、キーボードで開いたときだけ最初の操作に置き、それ以外はモーダルの本体に置く
+ * （マウスで開いて最初のボタンに枠が出ないように。`useModalOpenAutoFocus`）。
+ */
+export declare function TitledModal({ open, onOpenChange, title, description, children, footer, closeLabel, closeIcon, className, "data-testid": testId }: TitledModalProps): React$1.JSX.Element;
+//#endregion
+export {};

package/dist/web/layout/titled-modal.js

@@ -0,0 +1,59 @@
+import { CLOSE_LABEL } from "../lib/labels.js";
+import { cn } from "../lib/utils.js";
+import { Dialog, DialogClose, DialogContent, DialogDescription, DialogTitle } from "../base/dialog.js";
+import { useModalOpenAutoFocus } from "../lib/modal-open-focus.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { XIcon } from "lucide-react";
+
+//#region src/web/layout/titled-modal.tsx
+/**
+* 見出しと × を持つ大きめのモーダル。
+*
+* overlay 面（枠もリングも無し・影だけ）・幅 560。見出し（16/24 semibold）と × の下に 1px の薄い区切り線、本文は p-5、
+* フッターがあれば上に区切り線を引いて右寄せで操作を並べる。開閉状態は呼び出し側が持つ（制御専用）。
+*
+* 表示中は `data-modal-open` を持つので、浮いている常駐 UI を CSS で隠せる
+* （`body:has([data-modal-open])`）。
+*
+* 開いたときの初期フォーカスは、キーボードで開いたときだけ最初の操作に置き、それ以外はモーダルの本体に置く
+* （マウスで開いて最初のボタンに枠が出ないように。`useModalOpenAutoFocus`）。
+*/
+function TitledModal({ open, onOpenChange, title, description, children, footer, closeLabel = CLOSE_LABEL, closeIcon, className, "data-testid": testId }) {
+	const { contentRef, onOpenAutoFocus } = useModalOpenAutoFocus();
+	return /* @__PURE__ */ jsx(Dialog, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ jsxs(DialogContent, {
+			ref: contentRef,
+			onOpenAutoFocus,
+			showCloseButton: false,
+			"data-modal-open": "",
+			"data-testid": testId,
+			className: cn("flex max-h-[calc(100vh-4rem)] w-[560px] outline-none max-w-[calc(100%-2rem)] flex-col gap-0 p-0 sm:max-w-[560px]", className),
+			children: [
+				/* @__PURE__ */ jsxs("header", {
+					className: "flex shrink-0 items-center justify-between gap-4 border-b border-border px-5 py-3.5",
+					children: [/* @__PURE__ */ jsx(DialogTitle, { children: title }), /* @__PURE__ */ jsx(DialogClose, {
+						"aria-label": closeLabel,
+						className: "text-muted-foreground hover:bg-accent hover:text-foreground  grid size-7 shrink-0 cursor-pointer place-items-center rounded-control outline-none transition-colors focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-popover [&_svg]:size-4",
+						children: closeIcon ?? /* @__PURE__ */ jsx(XIcon, {})
+					})]
+				}),
+				/* @__PURE__ */ jsxs("div", {
+					className: "min-h-0 flex-1 overflow-y-auto p-5",
+					children: [description && /* @__PURE__ */ jsx(DialogDescription, {
+						className: "mb-4",
+						children: description
+					}), children]
+				}),
+				footer && /* @__PURE__ */ jsx("footer", {
+					className: "flex shrink-0 items-center justify-end gap-2 border-t border-border px-5 py-3.5",
+					children: footer
+				})
+			]
+		})
+	});
+}
+
+//#endregion
+export { TitledModal };

package/dist/web/lib/css-vars.d.ts

@@ -0,0 +1,14 @@
+import { CSSProperties } from "react";
+//#region src/web/lib/css-vars.d.ts
+/** CSS カスタムプロパティ（`--foo`）だけを持つ style の部品。 */
+export type CssVars = Record<`--${string}`, string | number>;
+/**
+ * CSS カスタムプロパティを `style` に渡せる形にする。
+ *
+ * `CSSProperties` は `--foo` を知らないので、オブジェクトリテラルを直に渡すと tsc が
+ * 余剰プロパティとして落とす。`as CSSProperties` で黙らせると型の検査が消えるため、
+ * テンプレートリテラル型のキーで受けて `CSSProperties` として返す。
+ * `overrides` が後勝ち（呼び出し側から渡された `style` が既定の変数を上書きできる）。
+ */
+export declare function cssVars(vars: CssVars, overrides?: CSSProperties): CSSProperties;
+//#endregion

package/dist/web/lib/css-vars.js

@@ -0,0 +1,18 @@
+//#region src/web/lib/css-vars.ts
+/**
+* CSS カスタムプロパティを `style` に渡せる形にする。
+*
+* `CSSProperties` は `--foo` を知らないので、オブジェクトリテラルを直に渡すと tsc が
+* 余剰プロパティとして落とす。`as CSSProperties` で黙らせると型の検査が消えるため、
+* テンプレートリテラル型のキーで受けて `CSSProperties` として返す。
+* `overrides` が後勝ち（呼び出し側から渡された `style` が既定の変数を上書きできる）。
+*/
+function cssVars(vars, overrides) {
+	return {
+		...vars,
+		...overrides
+	};
+}
+
+//#endregion
+export { cssVars };

package/dist/web/lib/dialog.d.ts

@@ -0,0 +1,13 @@
+//#region src/web/lib/dialog.d.ts
+/**
+ * `Modal` / `Sheet` が開閉の状態を受け取る形（構造的な型）。
+ * `useState` で自前に作ってもよいし、アプリ側の未保存ガードつきの hook の戻り値をそのまま渡してもよい
+ * （love3 は i18n や form に依存しないので、hook そのものは持たない）。
+ */
+export type DialogController = {
+  isOpen: boolean;
+  close: () => void;
+  /** 外側のクリックで閉じてよいか決める。確認を挟みたいときはここで処理する（既定は `close` と同じ扱いにする） */
+  onOutsideClick: () => void;
+};
+//#endregion

package/dist/web/lib/form.d.ts

@@ -0,0 +1,2 @@
+import { BaseInputProps, FieldInputProps, fieldContext, formContext, useFieldContext, useFieldValue, useFormContext, useOptionalFieldContext } from "../../shared/form.js";
+export { type BaseInputProps, type FieldInputProps, fieldContext, formContext, useFieldContext, useFieldValue, useFormContext, useOptionalFieldContext };

package/dist/web/lib/form.js

@@ -0,0 +1,3 @@
+import { fieldContext, formContext, useFieldContext, useFieldValue, useFormContext, useOptionalFieldContext } from "../../shared/form.js";
+
+export { fieldContext, formContext, useFieldContext, useFieldValue, useFormContext, useOptionalFieldContext };

package/dist/web/lib/labels.d.ts

@@ -0,0 +1,27 @@
+//#region src/web/lib/labels.d.ts
+/** 閉じるボタン（Dialog・Sheet・TitledModal） */
+export declare const CLOSE_LABEL = "閉じる";
+/** ヘルプのトリガー（atom/help・base/form の FormLabel） */
+export declare const HELP_LABEL = "ヘルプ";
+/** 読み込み中の表示（Spinner） */
+export declare const LOADING_LABEL = "読み込み中";
+/** ページネーションの nav と、その中のボタン */
+export declare const PAGINATION_LABEL = "ページネーション";
+export declare const PREVIOUS_PAGE_LABEL = "前のページへ";
+export declare const NEXT_PAGE_LABEL = "次のページへ";
+/** 途中が省略されているページ番号 */
+export declare const MORE_PAGES_LABEL = "他のページ";
+/** パンくずリストの nav と、省略されている途中の階層 */
+export declare const BREADCRUMB_LABEL = "パンくずリスト";
+export declare const MORE_LEVELS_LABEL = "他の階層";
+/** 折れ線の表の代替（読み上げ用に隠す表）の列名と、名前の既定 */
+export declare const LINE_CHART_TABLE_SERIES_LABEL = "系列";
+export declare const LINE_CHART_TABLE_POINT_LABEL = "見出し";
+export declare const LINE_CHART_TABLE_VALUE_LABEL = "値";
+export declare const LINE_CHART_DEFAULT_LABEL = "折れ線チャート";
+export declare const LINE_CHART_SINGLE_SERIES_LABEL = "値";
+export declare const LINE_CHART_EMPTY_TEXT = "データがありません";
+/** 読み上げ用の表に添える注記（数でない点を除いたとき・点が多くて抜き出したとき） */
+export declare const lineChartTableDropped: (count: number) => string;
+export declare const lineChartTableThinned: (shown: number, total: number) => string;
+//#endregion

package/dist/web/lib/labels.js

@@ -0,0 +1,29 @@
+//#region src/web/lib/labels.ts
+/** 閉じるボタン（Dialog・Sheet・TitledModal） */
+const CLOSE_LABEL = "閉じる";
+/** ヘルプのトリガー（atom/help・base/form の FormLabel） */
+const HELP_LABEL = "ヘルプ";
+/** 読み込み中の表示（Spinner） */
+const LOADING_LABEL = "読み込み中";
+/** ページネーションの nav と、その中のボタン */
+const PAGINATION_LABEL = "ページネーション";
+const PREVIOUS_PAGE_LABEL = "前のページへ";
+const NEXT_PAGE_LABEL = "次のページへ";
+/** 途中が省略されているページ番号 */
+const MORE_PAGES_LABEL = "他のページ";
+/** パンくずリストの nav と、省略されている途中の階層 */
+const BREADCRUMB_LABEL = "パンくずリスト";
+const MORE_LEVELS_LABEL = "他の階層";
+/** 折れ線の表の代替（読み上げ用に隠す表）の列名と、名前の既定 */
+const LINE_CHART_TABLE_SERIES_LABEL = "系列";
+const LINE_CHART_TABLE_POINT_LABEL = "見出し";
+const LINE_CHART_TABLE_VALUE_LABEL = "値";
+const LINE_CHART_DEFAULT_LABEL = "折れ線チャート";
+const LINE_CHART_SINGLE_SERIES_LABEL = "値";
+const LINE_CHART_EMPTY_TEXT = "データがありません";
+/** 読み上げ用の表に添える注記（数でない点を除いたとき・点が多くて抜き出したとき） */
+const lineChartTableDropped = (count) => `数でない値の点 ${count.toString()} 件は除いています。`;
+const lineChartTableThinned = (shown, total) => `点が多いので、${total.toString()} 点のうち ${shown.toString()} 点を等間隔に抜き出しています。`;
+
+//#endregion
+export { BREADCRUMB_LABEL, CLOSE_LABEL, HELP_LABEL, LINE_CHART_DEFAULT_LABEL, LINE_CHART_EMPTY_TEXT, LINE_CHART_SINGLE_SERIES_LABEL, LINE_CHART_TABLE_POINT_LABEL, LINE_CHART_TABLE_SERIES_LABEL, LINE_CHART_TABLE_VALUE_LABEL, LOADING_LABEL, MORE_LEVELS_LABEL, MORE_PAGES_LABEL, NEXT_PAGE_LABEL, PAGINATION_LABEL, PREVIOUS_PAGE_LABEL, lineChartTableDropped, lineChartTableThinned };

package/dist/web/lib/modal-open-focus.d.ts

@@ -0,0 +1,17 @@
+//#region src/web/lib/modal-open-focus.d.ts
+/**
+ * モーダルを開いたときの初期フォーカスの置き先を、開いた手段で変える。
+ *
+ * - キーボードで開いた: Radix の既定どおり最初の操作（ボタン）に置く。フォーカスの枠も出る
+ * - ポインターで開いた / 操作なしで開いた（起動時に出るもの等）: モーダルの本体に置く。
+ *   最初のボタンに枠が出ない（WebKit はスクリプトによるフォーカスにも `:focus-visible` を当てるため、
+ *   ボタンに置くと枠が出てしまう）。フォーカスはモーダルの中にあるので、Tab で最初の操作へ進め、
+ *   Esc で閉じられ、支援技術はダイアログとして読み上げる
+ *
+ * 返す `contentRef` と `onOpenAutoFocus` を DialogContent に渡す。本体には `outline-none` を付けること。
+ */
+export declare function useModalOpenAutoFocus(): {
+  contentRef: import("react").RefObject<HTMLDivElement | null>;
+  onOpenAutoFocus: (event: Event) => void;
+};
+//#endregion

package/dist/web/lib/modal-open-focus.js

@@ -0,0 +1,44 @@
+import { useCallback, useRef } from "react";
+
+//#region src/web/lib/modal-open-focus.ts
+let lastModality = "unknown";
+let listening = false;
+/**
+* 直前の操作がキーボードかポインターかを覚える（document に 1 度だけ張る）。
+* capture で拾うので、途中で stopPropagation されても取りこぼさない。
+*/
+function listenModality() {
+	if (listening || typeof document === "undefined") return;
+	listening = true;
+	document.addEventListener("keydown", (e) => {
+		if (e.metaKey || e.altKey || e.ctrlKey) return;
+		lastModality = "keyboard";
+	}, true);
+	document.addEventListener("pointerdown", () => lastModality = "pointer", true);
+}
+/**
+* モーダルを開いたときの初期フォーカスの置き先を、開いた手段で変える。
+*
+* - キーボードで開いた: Radix の既定どおり最初の操作（ボタン）に置く。フォーカスの枠も出る
+* - ポインターで開いた / 操作なしで開いた（起動時に出るもの等）: モーダルの本体に置く。
+*   最初のボタンに枠が出ない（WebKit はスクリプトによるフォーカスにも `:focus-visible` を当てるため、
+*   ボタンに置くと枠が出てしまう）。フォーカスはモーダルの中にあるので、Tab で最初の操作へ進め、
+*   Esc で閉じられ、支援技術はダイアログとして読み上げる
+*
+* 返す `contentRef` と `onOpenAutoFocus` を DialogContent に渡す。本体には `outline-none` を付けること。
+*/
+function useModalOpenAutoFocus() {
+	listenModality();
+	const contentRef = useRef(null);
+	return {
+		contentRef,
+		onOpenAutoFocus: useCallback((event) => {
+			if (lastModality === "keyboard") return;
+			event.preventDefault();
+			contentRef.current?.focus({ preventScroll: true });
+		}, [])
+	};
+}
+
+//#endregion
+export { useModalOpenAutoFocus };

package/dist/web/lib/restore-focus.d.ts

@@ -0,0 +1,12 @@
+//#region src/web/lib/restore-focus.d.ts
+/**
+ * Radix の Dialog は、閉じたあとのフォーカスを `DialogTrigger` にしか戻さない。love3 の Modal・Sheet・AlertModal は `open` を状態で持つ
+ * （トリガーが無い）ので、そのままだとフォーカスが `body` に落ちる（キーボード・支援技術の利用者が、開いた場所を見失う）。
+ * 開いた時点でフォーカスのあった要素を覚えて、閉じたときにそこへ戻す。`DialogTrigger` で開いた場合など、覚えた要素が無いとき・
+ * 呼び出し側が `preventDefault` したときは、何もしない（Radix の既定の動きに任せる）。
+ */
+export declare function useRestoreFocus(onOpenAutoFocus: ((event: Event) => void) | undefined, onCloseAutoFocus: ((event: Event) => void) | undefined): {
+  onOpenAutoFocus: (event: Event) => void;
+  onCloseAutoFocus: (event: Event) => void;
+};
+//#endregion

package/dist/web/lib/restore-focus.js

@@ -0,0 +1,32 @@
+import { useRef } from "react";
+
+//#region src/web/lib/restore-focus.ts
+/**
+* Radix の Dialog は、閉じたあとのフォーカスを `DialogTrigger` にしか戻さない。love3 の Modal・Sheet・AlertModal は `open` を状態で持つ
+* （トリガーが無い）ので、そのままだとフォーカスが `body` に落ちる（キーボード・支援技術の利用者が、開いた場所を見失う）。
+* 開いた時点でフォーカスのあった要素を覚えて、閉じたときにそこへ戻す。`DialogTrigger` で開いた場合など、覚えた要素が無いとき・
+* 呼び出し側が `preventDefault` したときは、何もしない（Radix の既定の動きに任せる）。
+*/
+function useRestoreFocus(onOpenAutoFocus, onCloseAutoFocus) {
+	const previous = useRef(null);
+	return {
+		onOpenAutoFocus: (event) => {
+			const active = document.activeElement;
+			previous.current = active instanceof HTMLElement && active !== document.body ? active : null;
+			onOpenAutoFocus?.(event);
+		},
+		onCloseAutoFocus: (event) => {
+			onCloseAutoFocus?.(event);
+			if (event.defaultPrevented) return;
+			const target = previous.current;
+			previous.current = null;
+			if (target?.isConnected) {
+				event.preventDefault();
+				target.focus();
+			}
+		}
+	};
+}
+
+//#endregion
+export { useRestoreFocus };

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

@@ -0,0 +1,4 @@
+import { ClassValue } from "clsx";
+//#region src/web/lib/utils.d.ts
+export declare function cn(...inputs: ClassValue[]): string;
+//#endregion

package/dist/web/lib/utils.js

@@ -0,0 +1,10 @@
+import { clsx } from "clsx";
+import { twMerge } from "tailwind-merge";
+
+//#region src/web/lib/utils.ts
+function cn(...inputs) {
+	return twMerge(clsx(inputs));
+}
+
+//#endregion
+export { cn };