@lt-three/love3 0.0.0 → 0.1.1

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

@@ -0,0 +1,71 @@
+import { Button } from "../base/button.js";
+import { Dialog, DialogContent, DialogDescription, DialogTitle } from "../base/dialog.js";
+import { useModalOpenAutoFocus } from "../lib/modal-open-focus.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { TriangleAlertIcon } from "lucide-react";
+
+//#region src/web/layout/alert-modal.tsx
+/**
+* A small modal for confirmation (it has no ×).
+*
+* Overlay surface, p-5, width 400 (fitted to the viewport). A heading (16/24 semibold) and body text (13/20, muted), with right-aligned actions (gap-2, the default Button size).
+* With `danger`, a small state-error icon is added to the left of the heading and the primary action gets the destructive-solid fill.
+* No border and no ring (it floats on the shadow alone, like `DialogContent`). 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 AlertModal({ open, onOpenChange, tone = "default", title, description, actions, dismissible = true, "data-testid": testId }) {
+	const danger = tone === "danger";
+	const lastIndex = actions.length - 1;
+	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,
+			onInteractOutside: (e) => {
+				if (!dismissible) e.preventDefault();
+			},
+			onEscapeKeyDown: (e) => {
+				if (!dismissible) e.preventDefault();
+			},
+			className: "flex w-[400px] max-w-[calc(100%-2rem)] flex-col gap-4 outline-none sm:max-w-[400px]",
+			children: [/* @__PURE__ */ jsxs("div", {
+				className: "flex flex-col gap-1.5",
+				children: [/* @__PURE__ */ jsxs(DialogTitle, {
+					className: "flex items-center gap-2 text-base leading-6 font-semibold",
+					children: [danger && /* @__PURE__ */ jsx(TriangleAlertIcon, {
+						className: "size-4 shrink-0 text-state-error",
+						"aria-hidden": true
+					}), title]
+				}), description && /* @__PURE__ */ jsx(DialogDescription, {
+					className: "text-[13px] leading-5 whitespace-pre-line text-muted-foreground",
+					children: description
+				})]
+			}), /* @__PURE__ */ jsx("div", {
+				className: "flex items-center justify-end gap-2",
+				children: actions.map((action, i) => {
+					const primary = (action.emphasis ?? (i === lastIndex ? "primary" : "secondary")) === "primary";
+					return /* @__PURE__ */ jsx(Button, {
+						type: "button",
+						variant: primary ? danger ? "destructive" : "default" : "outline",
+						disabled: action.disabled,
+						"data-testid": action["data-testid"],
+						onClick: action.onClick,
+						children: action.label
+					}, action.label);
+				})
+			})]
+		})
+	});
+}
+
+//#endregion
+export { AlertModal };

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

@@ -0,0 +1,17 @@
+import { Card as Card$1, CardHeadingLevel } from "../base/card.js";
+import React from "react";
+//#region src/web/layout/card.d.ts
+export type CardProps = {
+  title?: React.ReactNode;
+  /** Make the title a heading (`<h2>` to `<h6>`). Pass it when you want it in the heading hierarchy (omitted means `<div>`). Native has the same name. */
+  headingLevel?: CardHeadingLevel;
+  description?: React.ReactNode;
+  action?: React.ReactNode;
+  actionOnClick?: () => void;
+  content: React.ReactNode;
+  footer?: React.ReactNode;
+  shadow?: boolean;
+  contentClassName?: string;
+} & Omit<React.ComponentProps<typeof Card$1>, "content" | "title">;
+export declare function Card({ title, headingLevel, description, action, shadow, className, actionOnClick, footer, content, contentClassName, ...props }: CardProps): React.JSX.Element;
+//#endregion

package/dist/web/layout/card.js

@@ -0,0 +1,35 @@
+import { cn } from "../lib/utils.js";
+import { Card as Card$1, CardAction, CardContent, CardDescription, CardFooter, CardHeader, CardTitle } from "../base/card.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/web/layout/card.tsx
+function Card({ title, headingLevel, description, action, shadow = true, className, actionOnClick, footer, content, contentClassName, ...props }) {
+	return /* @__PURE__ */ jsxs(Card$1, {
+		className: cn("gap-2", !shadow && "shadow-none", className),
+		...props,
+		children: [
+			(title || action || description) && /* @__PURE__ */ jsxs(CardHeader, { children: [
+				title && /* @__PURE__ */ jsx(CardTitle, {
+					headingLevel,
+					children: title
+				}),
+				description && /* @__PURE__ */ jsx(CardDescription, { children: description }),
+				/* @__PURE__ */ jsx(CardAction, {
+					onClick: actionOnClick,
+					children: action
+				})
+			] }),
+			/* @__PURE__ */ jsx(CardContent, {
+				className: cn("grow flex flex-col gap-4", contentClassName),
+				children: content
+			}),
+			footer && /* @__PURE__ */ jsx(CardFooter, {
+				className: "flex justify-end gap-4 mt-2",
+				children: footer
+			})
+		]
+	});
+}
+
+//#endregion
+export { Card };

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

@@ -0,0 +1,12 @@
+import React from "react";
+//#region src/web/layout/description.d.ts
+type DescriptionProps = {
+  sections: {
+    title: string;
+    titleIcon?: React.ReactNode;
+    description: React.ReactNode;
+  }[];
+};
+export declare function Description(props: DescriptionProps): React.JSX.Element;
+//#endregion
+export {};

package/dist/web/layout/description.js

@@ -0,0 +1,20 @@
+import { Separator } from "../base/separator.js";
+import { Fragment } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/web/layout/description.tsx
+function Description(props) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "flex flex-col gap-8 mx-auto",
+		children: props.sections.map((section, index) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsxs("div", { children: [/* @__PURE__ */ jsxs("h2", {
+			className: "flex items-center gap-2 font-bold mb-2",
+			children: [section.titleIcon, section.title]
+		}), /* @__PURE__ */ jsx("div", {
+			className: "flex flex-col gap-4 whitespace-pre-wrap",
+			children: section.description
+		})] }), index < props.sections.length - 1 && /* @__PURE__ */ jsx(Separator, {})] }, section.title))
+	});
+}
+
+//#endregion
+export { Description };

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

@@ -0,0 +1,36 @@
+import React from "react";
+//#region src/web/layout/information.d.ts
+export type InformationField = {
+  label: string;
+  value: React.ReactNode;
+  separator?: never;
+} | {
+  label?: never;
+  value?: never;
+  separator: true;
+};
+type InformationProps = {
+  displayType?: "half" | "fitContent";
+  highlighted?: boolean;
+  fields: InformationField[][];
+  wrap?: "no-wrap" | "pre-wrap";
+  /**
+   * The class of the inner element (a flex container) that lays out the columns. `className` goes on the outer container (`@container`),
+   * so use this one when changing the column spacing (`gap-*`) or direction (`flex-*`).
+   */
+  columnsClassName?: string;
+} & React.HTMLAttributes<HTMLDivElement>;
+/**
+ * A read-only detail view that lays out pairs of a label and a value.
+ *
+ * **It assumes the parent has a width.** Whether columns stack vertically or sit side by side is decided by the outer element's container query (`@container`, `@xl:`).
+ * A container query cannot measure the outer width from the content (inline-size containment), so inside a **parent whose width is determined by its content**
+ * (a `flex` child, `inline-block`, `inline-flex`, a table cell, `grid-cols-[auto_…]`) it collapses to width 0.
+ * In such parents, give `className` a concrete width (such as `w-96`; `flex-1` also works for a `flex` child).
+ * `w-full` does not work (the parent's width is decided by the content, so there is no basis for the percentage).
+ *
+ * `className` and the remaining attributes go on the **outer container**.
+ */
+export declare const Information: ({ displayType, highlighted, fields, className, columnsClassName, wrap, ...remain }: InformationProps) => React.JSX.Element;
+//#endregion
+export {};

package/dist/web/layout/information.js

@@ -0,0 +1,53 @@
+import { cn } from "../lib/utils.js";
+import { Separator } from "../base/separator.js";
+import { Fragment } from "react";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/web/layout/information.tsx
+/**
+* A read-only detail view that lays out pairs of a label and a value.
+*
+* **It assumes the parent has a width.** Whether columns stack vertically or sit side by side is decided by the outer element's container query (`@container`, `@xl:`).
+* A container query cannot measure the outer width from the content (inline-size containment), so inside a **parent whose width is determined by its content**
+* (a `flex` child, `inline-block`, `inline-flex`, a table cell, `grid-cols-[auto_…]`) it collapses to width 0.
+* In such parents, give `className` a concrete width (such as `w-96`; `flex-1` also works for a `flex` child).
+* `w-full` does not work (the parent's width is decided by the content, so there is no basis for the percentage).
+*
+* `className` and the remaining attributes go on the **outer container**.
+*/
+const Information = ({ displayType = "fitContent", highlighted, fields, className, columnsClassName, wrap = "pre-wrap", ...remain }) => {
+	return /* @__PURE__ */ jsx("div", {
+		"data-slot": "information",
+		className: cn("@container", className),
+		...remain,
+		children: /* @__PURE__ */ jsx("div", {
+			"data-slot": "information-columns",
+			className: cn("flex flex-col @xl:flex-row gap-2 @xl:gap-4", columnsClassName),
+			children: fields.map((innerFields, index) => /* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
+				style: { gridTemplateRows: `repeat(${innerFields.length}, min-content)` },
+				className: cn("flex-[1] grid gap-y-3 gap-x-2", displayType === "fitContent" ? "grid-cols-[min-content_min-content_1fr]" : "grid-cols-[minmax(max-content,100px)_min-content_2fr]", highlighted && "gap-x-4"),
+				children: innerFields.map(({ label, value, separator }, innerIndex) => separator ? /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsx(Separator, { orientation: "horizontal" }),
+					/* @__PURE__ */ jsx(Separator, { orientation: "horizontal" }),
+					/* @__PURE__ */ jsx(Separator, { orientation: "horizontal" })
+				] }, `${index}-${innerIndex.toString()}-separator`) : /* @__PURE__ */ jsxs(Fragment, { children: [
+					/* @__PURE__ */ jsx("div", {
+						className: cn("self-center text-xs text-muted-foreground font-semibold whitespace-nowrap underline decoration-border underline-offset-4"),
+						children: label
+					}),
+					/* @__PURE__ */ jsx(Separator, { orientation: "vertical" }),
+					/* @__PURE__ */ jsx("div", {
+						className: cn("flex justify-between items-center gap-2 text-sm min-h-7", wrap === "no-wrap" && "whitespace-nowrap", wrap === "pre-wrap" && "whitespace-pre-wrap", highlighted && "text-lg py-1"),
+						children: value
+					})
+				] }, label))
+			}), index < fields.length - 1 && /* @__PURE__ */ jsx(Separator, {
+				orientation: "vertical",
+				className: cn("hidden @xl:block")
+			})] }, `${innerFields[0]?.label}`))
+		})
+	});
+};
+
+//#endregion
+export { Information };

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

@@ -0,0 +1,16 @@
+import { DialogController } from "../lib/dialog.js";
+import React from "react";
+//#region src/web/layout/modal.d.ts
+type Props = {
+  title: React.ReactNode;
+  description?: React.ReactNode;
+  dialog: DialogController;
+  content: React.ReactNode;
+  footer: React.ReactNode;
+  size?: "md" | "flexible";
+  /** Accessible name of the close button (defaults to the Japanese "Close" label) */
+  closeLabel?: string;
+};
+export declare function Modal({ title, description, dialog, content, footer, size, closeLabel }: Props): React.JSX.Element;
+//#endregion
+export {};

package/dist/web/layout/modal.js

@@ -0,0 +1,37 @@
+import { cn } from "../lib/utils.js";
+import { Dialog, DialogContent, DialogDescription, DialogFooter, DialogHeader, DialogTitle } from "../base/dialog.js";
+import { ScrollArea } from "../base/scroll-area.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/web/layout/modal.tsx
+function Modal({ title, description, dialog, content, footer, size, closeLabel }) {
+	return /* @__PURE__ */ jsx(Dialog, {
+		open: dialog.isOpen,
+		modal: true,
+		onOpenChange: (next) => !next && dialog.close(),
+		children: /* @__PURE__ */ jsxs(DialogContent, {
+			className: cn("max-h-3/4 flex flex-col", size === "flexible" && "!max-w-[80vw] min-w-lg w-max"),
+			onInteractOutside: (e) => {
+				e.preventDefault();
+				dialog.onOutsideClick();
+			},
+			closeLabel,
+			children: [
+				/* @__PURE__ */ jsxs(DialogHeader, { children: [/* @__PURE__ */ jsx(DialogTitle, { children: title }), description && /* @__PURE__ */ jsx(DialogDescription, { children: description })] }),
+				/* @__PURE__ */ jsx(ScrollArea, {
+					className: "flex-1 -mx-2",
+					viewPortClassName: "w-full",
+					innerViewPortClassName: "px-2",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "flex flex-col gap-4 wrap-break-word",
+						children: content
+					})
+				}),
+				/* @__PURE__ */ jsx(DialogFooter, { children: footer })
+			]
+		})
+	});
+}
+
+//#endregion
+export { Modal };

package/dist/web/layout/page-frame.d.ts

@@ -0,0 +1,37 @@
+import React from "react";
+//#region src/web/layout/page-frame.d.ts
+export type PageFrameNavItem = {
+  label: string;
+  /** The current screen. It gets `aria-current="page"`. */
+  current?: boolean;
+  /** A link (`<a>`) when present, otherwise a button (`<button>`; pressing it calls `onSelect`). */
+  href?: string;
+  onSelect?: () => void;
+};
+export type PageFrameProps = {
+  /** The brand at the left end of the header (text or an element). */
+  brand: React.ReactNode;
+  nav?: readonly PageFrameNavItem[];
+  /** Accessible name of the nav (to tell landmarks apart when there are several). */
+  navLabel?: string;
+  /** The right end of the header (theme toggle, user and so on). */
+  trailing?: React.ReactNode;
+  children: React.ReactNode;
+  /** The content of the footer. When omitted, a copyright notice with no year (the year is decided by the consumer). */
+  footer?: React.ReactNode;
+  /** The maximum width of the header, body and footer content (a Tailwind class). */
+  maxWidthClassName?: string;
+  className?: string;
+};
+/**
+ * The skeleton of a page. It has `header` (banner), `nav`, `main` and `footer` (contentinfo), so the landmarks are complete.
+ * Assembling each screen by hand leads to forgetting `main`, a nav with no name, and breaking at narrow widths, so it is placed here once.
+ *
+ * - The DOM order of the header (brand, nav, right end) matches the visual order (one row at a time at narrow widths). Swapping only the look with `order`
+ *   would make the Tab order differ from the visual order
+ * - The body is `flex-1` (the footer sticks to the bottom even on a short screen). The `id` of `main` is `main` (the target a consumer can jump to when placing a skip link.
+ *   PageFrame itself places no skip link. The `main` landmark satisfies axe's bypass (skipping blocks))
+ * - Colours are only `border-border` / `text-muted-foreground`. The tokens switch them for dark
+ */
+export declare function PageFrame({ brand, nav, navLabel, trailing, children, footer, maxWidthClassName, className }: PageFrameProps): React.JSX.Element;
+//#endregion

package/dist/web/layout/page-frame.js

@@ -0,0 +1,79 @@
+import { cn } from "../lib/utils.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/web/layout/page-frame.tsx
+/**
+* The skeleton of a page. It has `header` (banner), `nav`, `main` and `footer` (contentinfo), so the landmarks are complete.
+* Assembling each screen by hand leads to forgetting `main`, a nav with no name, and breaking at narrow widths, so it is placed here once.
+*
+* - The DOM order of the header (brand, nav, right end) matches the visual order (one row at a time at narrow widths). Swapping only the look with `order`
+*   would make the Tab order differ from the visual order
+* - The body is `flex-1` (the footer sticks to the bottom even on a short screen). The `id` of `main` is `main` (the target a consumer can jump to when placing a skip link.
+*   PageFrame itself places no skip link. The `main` landmark satisfies axe's bypass (skipping blocks))
+* - Colours are only `border-border` / `text-muted-foreground`. The tokens switch them for dark
+*/
+function PageFrame({ brand, nav = [], navLabel = "メイン", trailing, children, footer, maxWidthClassName = "max-w-[1280px]", className }) {
+	return /* @__PURE__ */ jsxs("div", {
+		"data-slot": "page-frame",
+		className: cn("flex min-h-dvh flex-col", className),
+		children: [
+			/* @__PURE__ */ jsx("header", {
+				className: "border-border border-b",
+				children: /* @__PURE__ */ jsxs("div", {
+					className: cn("mx-auto flex w-full flex-wrap items-center gap-x-6 gap-y-2 px-4 py-3 sm:px-6", maxWidthClassName),
+					children: [
+						/* @__PURE__ */ jsx("p", {
+							className: "basis-full font-mono text-base font-semibold tracking-tight sm:basis-auto",
+							children: brand
+						}),
+						nav.length > 0 ? /* @__PURE__ */ jsx("nav", {
+							"aria-label": navLabel,
+							className: "min-w-0 basis-full sm:basis-0 sm:flex-1",
+							children: /* @__PURE__ */ jsx("ul", {
+								className: "flex flex-wrap items-center gap-x-4 gap-y-1",
+								children: nav.map((item) => {
+									const select = () => {
+										if (!item.current) item.onSelect?.();
+									};
+									const itemClass = cn("focus-visible:ring-ring cursor-pointer rounded-control py-1 text-sm underline-offset-8 outline-none hover:underline focus-visible:ring-2", item.current ? "text-foreground font-medium underline" : "text-muted-foreground");
+									return /* @__PURE__ */ jsx("li", { children: item.href !== void 0 ? /* @__PURE__ */ jsx("a", {
+										href: item.href,
+										"aria-current": item.current ? "page" : void 0,
+										onClick: select,
+										className: itemClass,
+										children: item.label
+									}) : /* @__PURE__ */ jsx("button", {
+										type: "button",
+										"aria-current": item.current ? "page" : void 0,
+										onClick: select,
+										className: itemClass,
+										children: item.label
+									}) }, item.label);
+								})
+							})
+						}) : null,
+						trailing ? /* @__PURE__ */ jsx("div", {
+							className: "ml-auto flex items-center gap-2",
+							children: trailing
+						}) : null
+					]
+				})
+			}),
+			/* @__PURE__ */ jsx("main", {
+				id: "main",
+				className: cn("mx-auto flex w-full flex-1 flex-col gap-6 px-4 py-6 sm:px-6", maxWidthClassName),
+				children
+			}),
+			/* @__PURE__ */ jsx("footer", {
+				className: "border-border text-muted-foreground border-t",
+				children: /* @__PURE__ */ jsx("div", {
+					className: cn("mx-auto w-full px-4 py-4 text-xs sm:px-6", maxWidthClassName),
+					children: footer ?? /* @__PURE__ */ jsx("p", { children: "© <3（Less Than Three）" })
+				})
+			})
+		]
+	});
+}
+
+//#endregion
+export { PageFrame };

package/dist/web/layout/scroll-area.d.ts

@@ -0,0 +1,10 @@
+import { ScrollArea as ScrollArea$1 } from "../base/scroll-area.js";
+import { ComponentProps } from "react";
+//#region src/web/layout/scroll-area.d.ts
+type ScrollAreaProps = ComponentProps<typeof ScrollArea$1> & {
+  /** Show the horizontal scrollbar */
+  horizontal?: boolean;
+};
+export declare function ScrollArea({ horizontal, children, ...props }: ScrollAreaProps): import("react").JSX.Element;
+//#endregion
+export {};

package/dist/web/layout/scroll-area.js

@@ -0,0 +1,13 @@
+import { ScrollArea as ScrollArea$1, ScrollBar } from "../base/scroll-area.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/web/layout/scroll-area.tsx
+function ScrollArea({ horizontal, children, ...props }) {
+	return /* @__PURE__ */ jsxs(ScrollArea$1, {
+		...props,
+		children: [children, horizontal && /* @__PURE__ */ jsx(ScrollBar, { orientation: "horizontal" })]
+	});
+}
+
+//#endregion
+export { ScrollArea };

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

@@ -0,0 +1,32 @@
+import { SheetContent } from "../base/sheet.js";
+import { DialogController } from "../lib/dialog.js";
+import React, { ComponentProps } from "react";
+//#region src/web/layout/sheet.d.ts
+type BaseProps = {
+  title: React.ReactNode;
+  description?: string;
+  content: React.ReactNode;
+  footer?: React.ReactNode;
+  /** The direction the sheet appears from */
+  side?: ComponentProps<typeof SheetContent>["side"];
+  /** Class name passed to SheetContent */
+  contentClassName?: string;
+  /** Class name passed to SheetTitle */
+  titleClassName?: string;
+  /** Accessible name of the close button (defaults to the Japanese "Close" label) */
+  closeLabel?: string;
+};
+type DialogModeProps = BaseProps & {
+  dialog: DialogController;
+  open?: never;
+  onOpenChange?: never;
+};
+type ControlledModeProps = BaseProps & {
+  dialog?: never;
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+};
+type Props = DialogModeProps | ControlledModeProps;
+export declare function Sheet(props: Props): React.JSX.Element;
+//#endregion
+export {};

package/dist/web/layout/sheet.js

@@ -0,0 +1,68 @@
+import { cn } from "../lib/utils.js";
+import { ScrollArea } from "../base/scroll-area.js";
+import { Sheet as Sheet$1, SheetContent, SheetDescription, SheetFooter, SheetHeader, SheetTitle } from "../base/sheet.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+
+//#region src/web/layout/sheet.tsx
+function Sheet(props) {
+	const { title, description, content, footer, side, contentClassName, titleClassName, closeLabel } = props;
+	if (props.dialog) {
+		const { dialog } = props;
+		return /* @__PURE__ */ jsx(Sheet$1, {
+			open: dialog.isOpen,
+			onOpenChange: (next) => !next && dialog.close(),
+			children: /* @__PURE__ */ jsxs(SheetContent, {
+				side,
+				className: cn("flex flex-col", contentClassName),
+				onInteractOutside: (e) => {
+					e.preventDefault();
+					dialog.onOutsideClick();
+				},
+				closeLabel,
+				children: [
+					/* @__PURE__ */ jsxs(SheetHeader, { children: [/* @__PURE__ */ jsx(SheetTitle, {
+						className: titleClassName,
+						children: title
+					}), description && /* @__PURE__ */ jsx(SheetDescription, { children: description })] }),
+					/* @__PURE__ */ jsx(ScrollArea, {
+						className: "flex-1",
+						viewPortClassName: "w-full",
+						children: /* @__PURE__ */ jsx("div", {
+							className: "flex flex-col gap-4 px-5 pb-5 wrap-break-word",
+							children: content
+						})
+					}),
+					footer && /* @__PURE__ */ jsx(SheetFooter, { children: footer })
+				]
+			})
+		});
+	}
+	const { open, onOpenChange } = props;
+	return /* @__PURE__ */ jsx(Sheet$1, {
+		open,
+		onOpenChange,
+		children: /* @__PURE__ */ jsxs(SheetContent, {
+			side,
+			className: cn("flex flex-col", contentClassName),
+			closeLabel,
+			children: [
+				/* @__PURE__ */ jsxs(SheetHeader, { children: [/* @__PURE__ */ jsx(SheetTitle, {
+					className: titleClassName,
+					children: title
+				}), description && /* @__PURE__ */ jsx(SheetDescription, { children: description })] }),
+				/* @__PURE__ */ jsx(ScrollArea, {
+					className: "flex-1",
+					viewPortClassName: "w-full",
+					children: /* @__PURE__ */ jsx("div", {
+						className: "flex flex-col gap-4 px-5 pb-5 wrap-break-word",
+						children: content
+					})
+				}),
+				footer && /* @__PURE__ */ jsx(SheetFooter, { children: footer })
+			]
+		})
+	});
+}
+
+//#endregion
+export { Sheet };

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

@@ -0,0 +1,11 @@
+import React from "react";
+//#region src/web/layout/simple-dialog.d.ts
+type Props = {
+  open: boolean;
+  onOpenChange: (open: boolean) => void;
+  title: React.ReactNode;
+  children: React.ReactNode;
+};
+export declare function SimpleDialog({ open, onOpenChange, title, children }: Props): React.JSX.Element;
+//#endregion
+export {};

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
+/**
+ * A declarative data table with thin rules. Just pass columns / data.
+ * The header is a pale frame surface and the row rules are an ultra-thin 1px line (following base/table).
+ * Numeric columns are mono + tabular-nums + right-aligned.
+ *
+ * It is a different thing from a TanStack-based DataTable (with pagination and selection),
+ * and is a lightweight version for short tables that need no sorting or paging (dashboard summaries and the like).
+ */
+export type SimpleColumn<T> = {
+  /** Column key (unique within a row). */
+  key: string;
+  header: React.ReactNode;
+  /** Alignment of the cell / header (default left). */
+  align?: "left" | "right" | "center";
+  /** Monospace + tabular-nums (for numbers and IDs). */
+  mono?: boolean;
+  /** Emphasis (font-medium). */
+  strong?: boolean;
+  /** Extra class for the cell. */
+  cellClassName?: string;
+  /** Extra class for the header. */
+  headClassName?: string;
+  /** Cell rendering. When not given, row[key] is shown. */
+  render?: (row: T) => React.ReactNode;
+  /**
+   * Hide the column when narrower than this width (a Tailwind breakpoint). Used to fold away columns that are not important at narrow widths (IDs, supplements and so on)
+   * and avoid horizontal scrolling. When not given, the column is always shown.
+   */
+  hideBelow?: "sm" | "md" | "lg";
+};
+export declare function SimpleTable<T extends object>({ columns, data, getRowKey, onRowClick, getRowProps, className, wrapperClassName }: {
+  columns: SimpleColumn<T>[];
+  data: T[];
+  /** Derives the row key. When not given, the index is used. */
+  getRowKey?: (row: T, index: number) => string;
+  /**
+   * Row click (optional). When passed, a row can take focus (tabIndex=0) and can also be pressed with Enter and Space.
+   * It does not steal key handling from buttons or links inside the row (it reacts only when the row itself has focus).
+   */
+  onRowClick?: (row: T) => void;
+  /** Extra attributes per row (data-* / className and so on). Used for whole-row clicks and for attaching e2e selectors. */
+  getRowProps?: (row: T, index: number) => Omit<React.ComponentPropsWithoutRef<typeof TableRow>, "key">;
+  className?: string;
+  wrapperClassName?: string;
+}): React.JSX.Element;
+//#endregion