@lt-three/love3 0.0.0 → 0.1.1

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 picks up class names statically, so they are kept in a table rather than assembled from strings. */
+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"
+};
+/** The default rendering of a column with no `render`. It shows the row's `key` value only when it is a string, a number or an element. */
+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;
+  /** Controlled mode: specify when the value is managed from outside */
+  value?: string;
+  onValueChange?: (value: string) => void;
+  /** A slot on the right, laid out side by side at the same height as TabsList (used like a toolbar) */
+  trailing?: React.ReactNode;
+  /**
+   * DEV-E2E: adds a data-testid of `${testIdPrefix}-${value}` to each trigger.
+   * When omitted, no data-testid is output.
+   */
+  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,32 @@
+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;
+  /** A description placed at the top of the body. It also serves as the description for assistive technology. */
+  description?: React$1.ReactNode;
+  children?: React$1.ReactNode;
+  /** Actions laid out right-aligned. When present, a 1px divider is added above them. */
+  footer?: React$1.ReactNode;
+  /** Accessible name of the close button. */
+  closeLabel?: string;
+  /** The content of the × (lucide's X when omitted). */
+  closeIcon?: React$1.ReactNode;
+  className?: string;
+  "data-testid"?: string;
+};
+/**
+ * A larger modal with a heading and a ×.
+ *
+ * Overlay surface (no border or ring, shadow only), width 560. A thin 1px divider under the heading (16/24 semibold) and ×, the body is p-5,
+ * and if there is a footer, a divider is drawn above it and the actions are laid out right-aligned. The caller holds the open state (controlled only).
+ *
+ * While shown it carries `data-modal-open`, so floating persistent UI can be hidden with CSS
+ *
+ * The initial focus on open goes to the first action only when it was opened by keyboard, and otherwise to the modal body
+ * (so that no ring appears on the first button when opened with the mouse; `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,58 @@
+import { cn } from "../lib/utils.js";
+import { CLOSE_LABEL } from "../lib/labels.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
+/**
+* A larger modal with a heading and a ×.
+*
+* Overlay surface (no border or ring, shadow only), width 560. A thin 1px divider under the heading (16/24 semibold) and ×, the body is p-5,
+* and if there is a footer, a divider is drawn above it and the actions are laid out right-aligned. The caller holds the open state (controlled only).
+*
+* While shown it carries `data-modal-open`, so floating persistent UI can be hidden with CSS
+*
+* The initial focus on open goes to the first action only when it was opened by keyboard, and otherwise to the modal body
+* (so that no ring appears on the first button when opened with the mouse; `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
+/** A style part that holds only CSS custom properties (`--foo`). */
+export type CssVars = Record<`--${string}`, string | number>;
+/**
+ * Turns CSS custom properties into something that can be passed to `style`.
+ *
+ * `CSSProperties` does not know about `--foo`, so passing an object literal directly makes tsc
+ * reject it as an excess property. Silencing it with `as CSSProperties` removes the type check, so
+ * it is received with template-literal-type keys and returned as `CSSProperties`.
+ * `overrides` wins (a `style` passed by the caller can override the default variables).
+ */
+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
+/**
+* Turns CSS custom properties into something that can be passed to `style`.
+*
+* `CSSProperties` does not know about `--foo`, so passing an object literal directly makes tsc
+* reject it as an excess property. Silencing it with `as CSSProperties` removes the type check, so
+* it is received with template-literal-type keys and returned as `CSSProperties`.
+* `overrides` wins (a `style` passed by the caller can override the default variables).
+*/
+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
+/**
+ * The shape (a structural type) in which `Modal` / `Sheet` receive the open/close state.
+ * You can build it yourself with `useState`, or pass the return value of an app-side hook with an unsaved-changes guard as is
+ * (love3 depends on neither i18n nor forms, so it does not include the hook itself).
+ */
+export type DialogController = {
+  isOpen: boolean;
+  close: () => void;
+  /** Decides whether a click outside may close it. When you want to insert a confirmation, handle it here (by default it is treated the same as `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
+/** Close button (Dialog, Sheet, TitledModal) */
+export declare const CLOSE_LABEL = "閉じる";
+/** Help trigger (atom/help, FormLabel of base/form) */
+export declare const HELP_LABEL = "ヘルプ";
+/** Loading indicator (Spinner) */
+export declare const LOADING_LABEL = "読み込み中";
+/** The pagination nav and the buttons inside it */
+export declare const PAGINATION_LABEL = "ページネーション";
+export declare const PREVIOUS_PAGE_LABEL = "前のページへ";
+export declare const NEXT_PAGE_LABEL = "次のページへ";
+/** Page numbers that are omitted in the middle */
+export declare const MORE_PAGES_LABEL = "他のページ";
+/** The breadcrumb nav and the omitted levels in the middle */
+export declare const BREADCRUMB_LABEL = "パンくずリスト";
+export declare const MORE_LEVELS_LABEL = "他の階層";
+/** Column names of the line chart's table alternative (a table hidden for screen readers), and the default name */
+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 = "データがありません";
+/** Notes added to the table for screen readers (when non-numeric points were dropped, or when many points were sampled) */
+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
+/** Close button (Dialog, Sheet, TitledModal) */
+const CLOSE_LABEL = "閉じる";
+/** Help trigger (atom/help, FormLabel of base/form) */
+const HELP_LABEL = "ヘルプ";
+/** Loading indicator (Spinner) */
+const LOADING_LABEL = "読み込み中";
+/** The pagination nav and the buttons inside it */
+const PAGINATION_LABEL = "ページネーション";
+const PREVIOUS_PAGE_LABEL = "前のページへ";
+const NEXT_PAGE_LABEL = "次のページへ";
+/** Page numbers that are omitted in the middle */
+const MORE_PAGES_LABEL = "他のページ";
+/** The breadcrumb nav and the omitted levels in the middle */
+const BREADCRUMB_LABEL = "パンくずリスト";
+const MORE_LEVELS_LABEL = "他の階層";
+/** Column names of the line chart's table alternative (a table hidden for screen readers), and the default name */
+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 = "データがありません";
+/** Notes added to the table for screen readers (when non-numeric points were dropped, or when many points were sampled) */
+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
+/**
+ * Changes where the initial focus goes when a modal opens, depending on how it was opened.
+ *
+ * - Opened by keyboard: put it on the first action (a button), as Radix does by default. The focus ring also shows
+ * - Opened by pointer / opened with no interaction (something shown at start-up, etc.): put it on the modal body.
+ *   No ring appears on the first button (WebKit applies `:focus-visible` even to script-driven focus,
+ *   so putting it on the button would show a ring). Focus is inside the modal, so Tab moves to the first action,
+ *   Esc closes it, and assistive technology announces it as a dialog
+ *
+ * Pass the returned `contentRef` and `onOpenAutoFocus` to DialogContent. Give the body `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;
+/**
+* Remembers whether the previous action was by keyboard or by pointer (attached to the document only once).
+* It listens in the capture phase, so it is not missed even if stopPropagation is called along the way.
+*/
+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);
+}
+/**
+* Changes where the initial focus goes when a modal opens, depending on how it was opened.
+*
+* - Opened by keyboard: put it on the first action (a button), as Radix does by default. The focus ring also shows
+* - Opened by pointer / opened with no interaction (something shown at start-up, etc.): put it on the modal body.
+*   No ring appears on the first button (WebKit applies `:focus-visible` even to script-driven focus,
+*   so putting it on the button would show a ring). Focus is inside the modal, so Tab moves to the first action,
+*   Esc closes it, and assistive technology announces it as a dialog
+*
+* Pass the returned `contentRef` and `onOpenAutoFocus` to DialogContent. Give the body `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's Dialog returns focus after closing only to `DialogTrigger`. love3's Modal, Sheet and AlertModal keep `open` in state
+ * (there is no trigger), so as is, focus falls to `body` (keyboard and assistive-technology users lose track of where they opened it).
+ * It remembers the element that had focus when the dialog opened and returns focus there on close. When there is no remembered element, such as when it was opened with `DialogTrigger`, or
+ * when the caller called `preventDefault`, it does nothing (it leaves it to Radix's default behaviour).
+ */
+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's Dialog returns focus after closing only to `DialogTrigger`. love3's Modal, Sheet and AlertModal keep `open` in state
+* (there is no trigger), so as is, focus falls to `body` (keyboard and assistive-technology users lose track of where they opened it).
+* It remembers the element that had focus when the dialog opened and returns focus there on close. When there is no remembered element, such as when it was opened with `DialogTrigger`, or
+* when the caller called `preventDefault`, it does nothing (it leaves it to Radix's default behaviour).
+*/
+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 };

package/dist/web/styles.css

@@ -0,0 +1,162 @@
+/*
+ * Web styles for love3 (`@lt-three/love3/web/styles.css`). Import it once, at the entry of your app's CSS.
+ *
+ *   @import "@lt-three/love3/web/styles.css";
+ *
+ * It contains Tailwind v4 itself, the fonts, the animations, the tokens (`@lt-three/love3/styles.css`) and the base styles.
+ * The token values live in `src/tokens/definition.ts` (the SSOT). No tokens are written here.
+ * `.theme-light` only lightens the raw tokens (such as `bg-paper` / `text-ink-900`).
+ * Semantic classes (such as `bg-background` / `bg-primary`) do not get lighter, so components do not use them
+ * (to keep a public page always light, use raw-token classes or redeclare the variables on the consuming side).
+ */
+@import "tailwindcss/theme.css" layer(theme);
+@import "tailwindcss/preflight.css" layer(base);
+@import "tailwindcss/utilities.css";
+
+/* Latin text uses self-hosted Geist (Latin only, so it is light). Japanese text uses the Yu Gothic fonts that ship with the OS, and falls back to sans-serif where they are not installed */
+@import "@fontsource-variable/geist";
+/* Numbers, IDs, code and data tables use Geist Mono */
+@import "@fontsource-variable/geist-mono";
+
+@import "tw-animate-css";
+
+/* The token definitions (@theme, light, dark). It is generated, so to change a value edit definition.ts */
+@import "@lt-three/love3/styles.css";
+
+/*
+ * Picks up the Tailwind classes used by love3's components (components are *.tsx; the *.ts files in lib have no classes).
+ * node_modules (through a workspace symlink) is outside automatic detection, so it is stated explicitly here.
+ * The `@source` path is relative to the location of this CSS file.
+ * In the published build (`dist/`) the components are `*.js`, so both `tsx` and `js` are picked up (the same file is placed in both src and dist).
+ * The consuming app's own sources are left to automatic detection based on the bundler's project root
+ * (the Vite root, or the cwd for PostCSS); the location of this CSS file does not matter.
+ */
+@source "./**/*.{tsx,js}";
+@source not "./**/*.test.tsx";
+
+/*
+ * Notifications (sonner): overlay surface + thin 1px border + soft shadow (shadow-md). Corner radius is the surface step.
+ * The state is shown by the icon colour, not by a left border (the text stays in the normal colour).
+ * sonner injects its styles at runtime (at the same specificity as the default `[data-sonner-toast][data-styled=true]`, load order would make us lose), so
+ * `[data-sonner-toaster]` and `[data-styled="true"]` are added to raise the specificity by one step and win reliably (!important is not used).
+ */
+[data-sonner-toaster] [data-sonner-toast][data-styled="true"] {
+  box-shadow: var(--shadow-md);
+  font-size: 13px;
+}
+[data-sonner-toaster] [data-sonner-toast][data-styled="true"][data-type="success"] [data-icon] {
+  color: var(--state-success);
+}
+[data-sonner-toaster] [data-sonner-toast][data-styled="true"][data-type="error"] [data-icon] {
+  color: var(--state-error);
+}
+[data-sonner-toaster] [data-sonner-toast][data-styled="true"][data-type="warning"] [data-icon] {
+  color: var(--state-warning);
+}
+
+@layer base {
+  html {
+    font-family: var(--font-primary), sans-serif;
+  }
+
+  input[type="number"]::-webkit-outer-spin-button,
+  input[type="number"]::-webkit-inner-spin-button,
+  input[type="number"] {
+    -webkit-appearance: none;
+    -moz-appearance: textfield !important;
+  }
+
+  * {
+    @apply border-border outline-ring/50;
+  }
+  body {
+    @apply bg-background text-foreground;
+    /* Japanese breaks lines at bunsetsu (phrase) boundaries and does not wrap in the middle of a word */
+    word-break: auto-phrase;
+  }
+
+  /* Headings use the same Geist as the body. Flush left, with slightly tightened letter spacing. */
+  h1,
+  h2,
+  h3,
+  h4,
+  h5,
+  h6 {
+    font-family: var(--font-sans, "Geist Variable", sans-serif);
+    font-weight: 700;
+    letter-spacing: -0.01em;
+    /* Headings also break at phrase boundaries. Intentional line breaks are controlled in the copy itself (a \n in the text) */
+    word-break: auto-phrase;
+  }
+  h1 {
+    @apply text-3xl my-2;
+    letter-spacing: -0.02em;
+  }
+  h2 {
+    @apply text-2xl my-2;
+    font-weight: 500;
+  }
+  h3 {
+    @apply text-xl my-2;
+    font-weight: 500;
+  }
+  h4 {
+    @apply text-lg my-2;
+    font-weight: 500;
+  }
+  h5 {
+    @apply text-base my-2;
+    font-weight: 500;
+  }
+  h6 {
+    @apply text-sm my-1;
+    font-weight: 500;
+    color: var(--muted-foreground);
+  }
+
+  /* Numbers / IDs / code / data use tabular (monospaced) figures */
+  code,
+  kbd,
+  samp,
+  pre,
+  [data-mono] {
+    font-variant-numeric: tabular-nums;
+  }
+
+  /* Text selection is a pale indigo surface. The text colour is unchanged */
+  ::selection {
+    background: color-mix(in srgb, var(--action) 30%, transparent);
+  }
+}
+
+/*
+ * States of a text link.
+ *   default: text only
+ *   hover:   a 1px underline
+ *   active:  knock out the text fill and draw a 1px outline on the outside + an underline (while pressed)
+ * The colour follows currentColor, so it works the same way when the text colour changes, such as white text on top of a wallpaper.
+ * hover switches instantly (no transition).
+ *
+ * An "outside-only outline" cannot be made with -webkit-text-stroke (it is drawn centred on the glyph edge), so
+ * it is made with the SVG filter #text-outside-stroke (grow the text by 1px and knock out the original text).
+ * The consuming app places the filter definition in the DOM once.
+ */
+@utility text-outline {
+  filter: url(#text-outside-stroke);
+}
+
+@utility text-link {
+  text-underline-position: from-font;
+  text-decoration-thickness: 1px;
+
+  @media (hover: hover) {
+    &:hover {
+      text-decoration-line: underline;
+    }
+  }
+
+  &:active {
+    text-decoration-line: underline;
+    filter: url(#text-outside-stroke);
+  }
+}