shelving 1.201.0 → 1.203.0

package/ui/block/Video.tsx

@@ -63,7 +63,7 @@ export interface FullscreenVideoButtonProps {
 
 /** Button to make a video element go fullscreen. */
 export function FullscreenVideoButton(): ReactElement | null {
-	const [isFull, setFull] = useState(!!document.fullscreenElement);
+	const [isFull, setFull] = useState(() => typeof document !== "undefined" && !!document.fullscreenElement);
 
 	useEffect(() => {
 		const onChange = () => setFull(!!document.fullscreenElement);

package/ui/form/ButtonInput.d.ts

@@ -4,4 +4,4 @@ import { type InputProps } from "./Input.js";
 export interface ButtonInputProps extends InputProps, ClickableProps {
 }
 /** Return either a `<button>` or an `<a href="">` styled as an input, based on whether an `onClick` or `href` prop is provided. */
-export declare function ButtonInput({ title, placeholder, disabled, href, onClick, target, download, children }: ButtonInputProps): ReactElement;
+export declare function ButtonInput({ title, placeholder, disabled, href, onClick, target, download, children, }: ButtonInputProps): ReactElement;

package/ui/form/CheckboxInput.d.ts

@@ -4,4 +4,4 @@ export interface CheckboxProps extends ValueInputProps<boolean> {
     children?: ReactNode | undefined;
 }
 /** Checkbox element. */
-export declare function CheckboxInput({ name, title, placeholder, required, disabled, message, value, onValue, children }: CheckboxProps): ReactElement;
+export declare function CheckboxInput({ name, title, placeholder, required, disabled, message, value, onValue, children, }: CheckboxProps): ReactElement;

package/ui/form/DateInput.d.ts

@@ -9,4 +9,4 @@ export interface DateInputProps extends ValueInputProps<string, PossibleDate> {
     step?: number | undefined;
 }
 export declare function DateInput({ name, title, placeholder, // Placeholder must be defined or `:placeholder-shown` CSS rules won't show.
-required, disabled, message, value, onValue, min, max, input, step }: DateInputProps): ReactElement;
+required, disabled, message, value, onValue, min, max, input, step, }: DateInputProps): ReactElement;

package/ui/form/FileInput.d.ts

@@ -4,4 +4,4 @@ import { type ValueInputProps } from "./Input.js";
 export interface FileInputProps extends ValueInputProps<string | File> {
     types?: FileTypes | undefined;
 }
-export declare function FileInput({ name, title, placeholder, required, disabled, message, onValue, types }: FileInputProps): ReactElement;
+export declare function FileInput({ name, title, placeholder, required, disabled, message, onValue, types, }: FileInputProps): ReactElement;

package/ui/form/Input.d.ts

@@ -38,7 +38,7 @@ export interface ValueInputProps<O, I = never> extends InputProps {
     onValue(value: O | undefined): void;
 }
 /** Return either a `<button>` or an `<a href="">` styled as an input, based on whether an `onClick` or `href` prop is provided. */
-export declare function Input({ title, placeholder, disabled, href, onClick, target, download, children }: InputProps & ClickableProps): ReactElement;
+export declare function Input({ title, placeholder, disabled, href, onClick, target, download, children, }: InputProps & ClickableProps): ReactElement;
 /** Input that is loading. */
 export declare const LOADING_INPUT: import("react/jsx-runtime").JSX.Element;
 /** Wraps an input with support for absolutely-positioned `data-slot` icon elements on either side. */

package/ui/form/NumberInput.d.ts

@@ -8,5 +8,5 @@ export interface NumberInputProps extends ValueInputProps<number> {
     formatter?: NumberFormatter | undefined;
 }
 export declare function NumberInput({ name, title, placeholder, // Placeholder must be defined or `:placeholder-shown` CSS rules won't show.
-required, disabled, message, value, onValue, formatter }: NumberInputProps): ReactElement;
+required, disabled, message, value, onValue, formatter, }: NumberInputProps): ReactElement;
 export {};

package/ui/form/Popover.d.ts

@@ -28,4 +28,4 @@ export interface PopoverProps {
  * @todo DH: Would love to use new HTML `popover="auto"` functionality for this but the anchor positioning it needs is not supported everywhere yet.
  */
 export declare function Popover({ children: [trigger, ...popover], //
-onClose, open }: PopoverProps): ReactElement;
+onClose, open, }: PopoverProps): ReactElement;

package/ui/form/RadioInput.d.ts

@@ -4,4 +4,4 @@ export interface RadioInputProps extends ValueInputProps<boolean> {
     children?: ReactNode | undefined;
 }
 /** A single `<input type="radio">` in a `<label>` wrapper styled as an `<Input>` */
-export declare function RadioInput({ name, title, placeholder, required, disabled, message, value, onValue, children }: RadioInputProps): ReactElement;
+export declare function RadioInput({ name, title, placeholder, required, disabled, message, value, onValue, children, }: RadioInputProps): ReactElement;

package/ui/form/TextInput.d.ts

@@ -12,5 +12,5 @@ export interface TextInputProps extends ValueInputProps<string> {
     formatter?: TextFormatter | undefined;
 }
 export declare function TextInput({ name, title, placeholder, // Placeholder must be defined or `:placeholder-shown` CSS rules won't show.
-required, disabled, message, value, onValue, input, min, max, rows, formatter }: TextInputProps): ReactElement;
+required, disabled, message, value, onValue, input, min, max, rows, formatter, }: TextInputProps): ReactElement;
 export {};

package/ui/index.d.ts

@@ -9,4 +9,5 @@ export * from "./notice/index.js";
 export * from "./page/index.js";
 export * from "./router/index.js";
 export * from "./transition/index.js";
+export * from "./tree/index.js";
 export * from "./util/index.js";

package/ui/index.js

@@ -9,4 +9,5 @@ export * from "./notice/index.js";
 export * from "./page/index.js";
 export * from "./router/index.js";
 export * from "./transition/index.js";
+export * from "./tree/index.js";
 export * from "./util/index.js";

package/ui/index.ts

@@ -9,4 +9,5 @@ export * from "./notice/index.js";
 export * from "./page/index.js";
 export * from "./router/index.js";
 export * from "./transition/index.js";
+export * from "./tree/index.js";
 export * from "./util/index.js";

package/ui/layout/SidebarLayout.d.ts

@@ -0,0 +1,17 @@
+import type { ReactElement, ReactNode } from "react";
+import SIDEBAR_LAYOUT_CSS from "./SidebarLayout.module.css";
+export interface SidebarLayoutProps {
+    /** Content rendered in the fixed-width side column. */
+    sidebar: ReactNode;
+    /** Main content rendered in the scrollable content column. */
+    children?: ReactNode;
+    /** Render the sidebar on the right rather than the left. */
+    right?: boolean | undefined;
+}
+/**
+ * Layout with a fixed-width side column (typically navigation) next to a scrollable main content column.
+ * - The sidebar collapses above the main content on narrow viewports.
+ * - Use the `--sidebar-layout-width` and `--sidebar-layout-bg` custom properties to override defaults.
+ */
+export declare function SidebarLayout({ sidebar, children, right }: SidebarLayoutProps): ReactElement;
+export { SIDEBAR_LAYOUT_CSS };

package/ui/layout/SidebarLayout.js

@@ -0,0 +1,15 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { getClass } from "../util/css.js";
+import { LAYOUT_CSS } from "./Layout.js";
+import SIDEBAR_LAYOUT_CSS from "./SidebarLayout.module.css";
+/**
+ * Layout with a fixed-width side column (typically navigation) next to a scrollable main content column.
+ * - The sidebar collapses above the main content on narrow viewports.
+ * - Use the `--sidebar-layout-width` and `--sidebar-layout-bg` custom properties to override defaults.
+ */
+export function SidebarLayout({ sidebar, children, right = false }) {
+    const sidebarEl = (_jsx("aside", { className: SIDEBAR_LAYOUT_CSS.sidebar, children: sidebar }, "sidebar"));
+    const contentEl = (_jsx("div", { className: SIDEBAR_LAYOUT_CSS.content, children: _jsx("div", { className: SIDEBAR_LAYOUT_CSS.contentInner, children: children }) }, "content"));
+    return (_jsx("main", { className: getClass(SIDEBAR_LAYOUT_CSS.main, LAYOUT_CSS.layout), children: right ? [contentEl, sidebarEl] : [sidebarEl, contentEl] }));
+}
+export { SIDEBAR_LAYOUT_CSS };

package/ui/layout/SidebarLayout.module.css

@@ -0,0 +1,47 @@
+/*
+ * Sidebar layout: a fixed-width column on the left, scrollable main content on the right.
+ *
+ * The outer `.layout` class (from Layout.module.css) owns the overall page scroll,
+ * but here we override that: the sidebar and the main column each scroll independently.
+ */
+
+.main {
+	display: grid;
+	grid-template-columns: var(--sidebar-layout-width, 17.5rem) 1fr;
+	gap: 0;
+	padding: 0;
+	overflow: hidden;
+}
+
+.sidebar {
+	overflow-y: auto;
+	overscroll-behavior: contain;
+	padding: var(--spacing-block);
+	background: var(--sidebar-layout-bg, var(--color-surface));
+	border-right: 1px solid var(--color-border);
+}
+
+.content {
+	overflow-y: auto;
+	overscroll-behavior: contain;
+	padding: var(--spacing-block) var(--spacing-spacious);
+	min-width: 0;
+}
+
+.contentInner {
+	width: 100%;
+	max-width: var(--width-wide);
+	margin: 0 auto;
+}
+
+/* On narrow viewports collapse to a single column with the sidebar above. */
+@media (max-width: 48rem) {
+	.main {
+		grid-template-columns: 1fr;
+	}
+	.sidebar {
+		border-right: none;
+		border-bottom: 1px solid var(--color-border);
+		max-height: 50vh;
+	}
+}

package/ui/layout/SidebarLayout.tsx

@@ -0,0 +1,36 @@
+import type { ReactElement, ReactNode } from "react";
+import { getClass } from "../util/css.js";
+import { LAYOUT_CSS } from "./Layout.js";
+import SIDEBAR_LAYOUT_CSS from "./SidebarLayout.module.css";
+
+export interface SidebarLayoutProps {
+	/** Content rendered in the fixed-width side column. */
+	sidebar: ReactNode;
+	/** Main content rendered in the scrollable content column. */
+	children?: ReactNode;
+	/** Render the sidebar on the right rather than the left. */
+	right?: boolean | undefined;
+}
+
+/**
+ * Layout with a fixed-width side column (typically navigation) next to a scrollable main content column.
+ * - The sidebar collapses above the main content on narrow viewports.
+ * - Use the `--sidebar-layout-width` and `--sidebar-layout-bg` custom properties to override defaults.
+ */
+export function SidebarLayout({ sidebar, children, right = false }: SidebarLayoutProps): ReactElement {
+	const sidebarEl = (
+		<aside key="sidebar" className={SIDEBAR_LAYOUT_CSS.sidebar}>
+			{sidebar}
+		</aside>
+	);
+	const contentEl = (
+		<div key="content" className={SIDEBAR_LAYOUT_CSS.content}>
+			<div className={SIDEBAR_LAYOUT_CSS.contentInner}>{children}</div>
+		</div>
+	);
+	return (
+		<main className={getClass(SIDEBAR_LAYOUT_CSS.main, LAYOUT_CSS.layout)}>{right ? [contentEl, sidebarEl] : [sidebarEl, contentEl]}</main>
+	);
+}
+
+export { SIDEBAR_LAYOUT_CSS };

package/ui/layout/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./CenteredLayout.js";
 export * from "./Layout.js";
+export * from "./SidebarLayout.js";

package/ui/layout/index.js

@@ -1,2 +1,3 @@
 export * from "./CenteredLayout.js";
 export * from "./Layout.js";
+export * from "./SidebarLayout.js";

package/ui/layout/index.tsx

@@ -1,2 +1,3 @@
 export * from "./CenteredLayout.js";
 export * from "./Layout.js";
+export * from "./SidebarLayout.js";

package/ui/misc/Mapper.d.ts

@@ -0,0 +1,32 @@
+import { type ComponentType, type JSX, type ReactNode } from "react";
+/**
+ * Element mapping — maps intrinsic element type strings to React components.
+ * - Keys are element type names from `JSX.IntrinsicElements` (e.g. `"tree-file"`, `"tree-directory"`).
+ * - Each component must accept the props declared in `JSX.IntrinsicElements` for that element type.
+ */
+export type Mapping = {
+    [K in keyof JSX.IntrinsicElements]?: ComponentType<JSX.IntrinsicElements[K]>;
+};
+/** Props for the `Mapping` component returned by `createElementMapper()`. */
+export interface MappingProps {
+    /** Mapping entries that override the defaults (and any parent `Mapping` entries). */
+    mapping: Mapping;
+    children: ReactNode;
+}
+/** Props for the `Mapper` component returned by `createElementMapper()`. */
+export interface MapperProps {
+    children?: ReactNode;
+}
+/**
+ * Create an element mapper — a `[Mapping, Mapper]` pair of React components.
+ *
+ * - `Mapping` — wraps a subtree to override or extend the element mapping for this mapper.
+ * - `Mapper` — maps children, replacing element types with registered components.
+ *
+ * Each mapper has its own React context, so different mappers (e.g. `TreeMenu`, `TreePage`)
+ * can have independent mappings without interfering with each other.
+ *
+ * @param defaults Default mapping entries (lowest priority — overridden by any `Mapping` wrapper).
+ * @returns A `[Mapping, Mapper]` tuple of React components.
+ */
+export declare function createMapper(defaults?: Mapping): [Mapping: React.FunctionComponent<MappingProps>, Mapper: React.FunctionComponent<MapperProps>];

package/ui/misc/Mapper.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { createContext, use } from "react";
+import { isElement } from "../../util/element.js";
+import { isProp } from "../../util/index.js";
+import { isIterable } from "../../util/iterate.js";
+/**
+ * Create an element mapper — a `[Mapping, Mapper]` pair of React components.
+ *
+ * - `Mapping` — wraps a subtree to override or extend the element mapping for this mapper.
+ * - `Mapper` — maps children, replacing element types with registered components.
+ *
+ * Each mapper has its own React context, so different mappers (e.g. `TreeMenu`, `TreePage`)
+ * can have independent mappings without interfering with each other.
+ *
+ * @param defaults Default mapping entries (lowest priority — overridden by any `Mapping` wrapper).
+ * @returns A `[Mapping, Mapper]` tuple of React components.
+ */
+export function createMapper(defaults = {}) {
+    const Context = createContext(defaults);
+    /** Override or extend the element mapping for this mapper's context. */
+    function Mapping({ mapping, children }) {
+        const existing = use(Context);
+        return _jsx(Context, { value: { ...existing, ...mapping }, children: children });
+    }
+    /** Map children, replacing element types with components from this mapper's context. */
+    function Mapper({ children }) {
+        const entries = use(Context);
+        return _mapNode(children, entries);
+    }
+    return [Mapping, Mapper];
+}
+/** Recursively map a ReactNode, replacing element types with registered components. */
+function _mapNode(node, entries) {
+    if (!node)
+        return node;
+    if (isElement(node))
+        return _mapElement(node, entries);
+    if (isIterable(node))
+        return Array.from(node, el => _mapNode(el, entries));
+    return node;
+}
+/** Map a single element, replacing its type with a registered component if found. */
+function _mapElement(element, entries) {
+    const found = typeof element.type === "string" && isProp(entries, element.type) ? entries[element.type] : undefined;
+    return found ? { ...element, type: found } : element;
+}

package/ui/misc/Mapper.tsx

@@ -0,0 +1,71 @@
+import { type ComponentType, createContext, type JSX, type ReactElement, type ReactNode, use } from "react";
+import { isElement } from "../../util/element.js";
+import { isProp } from "../../util/index.js";
+import { isIterable } from "../../util/iterate.js";
+
+/**
+ * Element mapping — maps intrinsic element type strings to React components.
+ * - Keys are element type names from `JSX.IntrinsicElements` (e.g. `"tree-file"`, `"tree-directory"`).
+ * - Each component must accept the props declared in `JSX.IntrinsicElements` for that element type.
+ */
+export type Mapping = {
+	[K in keyof JSX.IntrinsicElements]?: ComponentType<JSX.IntrinsicElements[K]>;
+};
+
+/** Props for the `Mapping` component returned by `createElementMapper()`. */
+export interface MappingProps {
+	/** Mapping entries that override the defaults (and any parent `Mapping` entries). */
+	mapping: Mapping;
+	children: ReactNode;
+}
+
+/** Props for the `Mapper` component returned by `createElementMapper()`. */
+export interface MapperProps {
+	children?: ReactNode;
+}
+
+/**
+ * Create an element mapper — a `[Mapping, Mapper]` pair of React components.
+ *
+ * - `Mapping` — wraps a subtree to override or extend the element mapping for this mapper.
+ * - `Mapper` — maps children, replacing element types with registered components.
+ *
+ * Each mapper has its own React context, so different mappers (e.g. `TreeMenu`, `TreePage`)
+ * can have independent mappings without interfering with each other.
+ *
+ * @param defaults Default mapping entries (lowest priority — overridden by any `Mapping` wrapper).
+ * @returns A `[Mapping, Mapper]` tuple of React components.
+ */
+export function createMapper(
+	defaults: Mapping = {},
+): [Mapping: React.FunctionComponent<MappingProps>, Mapper: React.FunctionComponent<MapperProps>] {
+	const Context = createContext<Mapping>(defaults);
+
+	/** Override or extend the element mapping for this mapper's context. */
+	function Mapping({ mapping, children }: MappingProps): ReactNode {
+		const existing = use(Context);
+		return <Context value={{ ...existing, ...mapping }}>{children}</Context>;
+	}
+
+	/** Map children, replacing element types with components from this mapper's context. */
+	function Mapper({ children }: MapperProps): ReactNode {
+		const entries = use(Context);
+		return _mapNode(children, entries);
+	}
+
+	return [Mapping, Mapper];
+}
+
+/** Recursively map a ReactNode, replacing element types with registered components. */
+function _mapNode(node: ReactNode, entries: Mapping): ReactNode {
+	if (!node) return node;
+	if (isElement(node)) return _mapElement(node, entries);
+	if (isIterable(node)) return Array.from(node, el => _mapNode(el, entries));
+	return node;
+}
+
+/** Map a single element, replacing its type with a registered component if found. */
+function _mapElement(element: ReactElement, entries: Mapping): ReactElement {
+	const found = typeof element.type === "string" && isProp(entries, element.type) ? entries[element.type] : undefined;
+	return found ? { ...element, type: found } : element;
+}

package/ui/misc/Meta.d.ts

@@ -1,6 +1,6 @@
 import { type ReactNode } from "react";
-import { type MetaData, type PossibleMetaData } from "../util/meta.js";
-export interface MetaProps extends PossibleMetaData {
+import { type MetaData, type PossibleMeta } from "../util/meta.js";
+export interface MetaProps extends PossibleMeta {
     children: ReactNode;
 }
 /** Create or update the current meta context. */

package/ui/misc/Meta.tsx

@@ -1,11 +1,11 @@
 import { createContext, type ReactNode, use } from "react";
-import { type MetaData, mergeMeta, type PossibleMetaData } from "../util/meta.js";
+import { type MetaData, mergeMeta, type PossibleMeta } from "../util/meta.js";
 
 /** Context to store the `Config` object. */
 const _MetaContext = createContext<MetaData>({});
 _MetaContext.displayName = "MetaContext";
 
-export interface MetaProps extends PossibleMetaData {
+export interface MetaProps extends PossibleMeta {
 	children: ReactNode;
 }
 

package/ui/misc/index.d.ts

@@ -1,3 +1,4 @@
 export * from "./Catcher.js";
 export * from "./Loading.js";
+export * from "./Mapper.js";
 export * from "./Meta.js";

package/ui/misc/index.js

@@ -1,3 +1,4 @@
 export * from "./Catcher.js";
 export * from "./Loading.js";
+export * from "./Mapper.js";
 export * from "./Meta.js";

package/ui/misc/index.tsx

@@ -1,3 +1,4 @@
 export * from "./Catcher.js";
 export * from "./Loading.js";
+export * from "./Mapper.js";
 export * from "./Meta.js";

package/ui/page/HTML.d.ts

@@ -0,0 +1,10 @@
+import type { ReactElement, ReactNode } from "react";
+export interface HTMLProps {
+    children: ReactNode;
+}
+/**
+ * Output a `<html>` element wrapping `<body id="root">`.
+ * - No `<head>` element is rendered. Head tags (`<title>`, `<meta>`, `<link>`, `<script>`) are emitted inline by `<Page>` / `<Head>` lower in the tree, and React 19 hoists them automatically — to the document `<head>` on the client, and to a generated `<head>` element during `renderToString` SSR.
+ * - This means the same component tree works for both modes without any shell-aware logic.
+ */
+export declare function HTML({ children }: HTMLProps): ReactElement;

package/ui/page/HTML.js

@@ -0,0 +1,11 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { requireMeta } from "../misc/Meta.js";
+/**
+ * Output a `<html>` element wrapping `<body id="root">`.
+ * - No `<head>` element is rendered. Head tags (`<title>`, `<meta>`, `<link>`, `<script>`) are emitted inline by `<Page>` / `<Head>` lower in the tree, and React 19 hoists them automatically — to the document `<head>` on the client, and to a generated `<head>` element during `renderToString` SSR.
+ * - This means the same component tree works for both modes without any shell-aware logic.
+ */
+export function HTML({ children }) {
+    const { language } = requireMeta();
+    return (_jsx("html", { lang: language, children: _jsx("body", { id: "root", children: children }) }));
+}

package/ui/page/HTML.tsx

@@ -0,0 +1,20 @@
+import type { ReactElement, ReactNode } from "react";
+import { requireMeta } from "../misc/Meta.js";
+
+export interface HTMLProps {
+	children: ReactNode;
+}
+
+/**
+ * Output a `<html>` element wrapping `<body id="root">`.
+ * - No `<head>` element is rendered. Head tags (`<title>`, `<meta>`, `<link>`, `<script>`) are emitted inline by `<Page>` / `<Head>` lower in the tree, and React 19 hoists them automatically — to the document `<head>` on the client, and to a generated `<head>` element during `renderToString` SSR.
+ * - This means the same component tree works for both modes without any shell-aware logic.
+ */
+export function HTML({ children }: HTMLProps): ReactElement {
+	const { language } = requireMeta();
+	return (
+		<html lang={language}>
+			<body id="root">{children}</body>
+		</html>
+	);
+}

package/ui/page/Head.d.ts

@@ -1,8 +1,3 @@
 import { type ReactElement } from "react";
-declare const _componentProps: unique symbol;
-export interface HeadProps {
-    readonly [_componentProps]?: never;
-}
 /** Use the details from the current page data context to set the document `<title>`, meta tags, and history state. */
 export declare function Head(): ReactElement;
-export {};

package/ui/page/Head.js

@@ -1,4 +1,4 @@
-import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect } from "react";
 import { notNullish } from "../../util/null.js";
 import { getProps } from "../../util/object.js";
@@ -11,10 +11,12 @@ const R_HTTP_EQUIV = /^[A-Z][a-zA-Z0-9]*(-[A-Z][a-zA-Z0-9]*)*$/;
 export function Head() {
     const { url, title, base, app, links, tags } = requireMeta();
     useEffect(() => {
+        if (typeof window === "undefined")
+            return;
         if (url)
             window.history.replaceState(null, "", url);
     }, [url]);
-    return (_jsxs(_Fragment, { children: [_jsx("title", { children: joinTitles(title, app) }), base && _jsx("base", { href: base.href }), tags &&
+    return (_jsxs("head", { children: [_jsx("title", { children: joinTitles(title, app) }), base && _jsx("base", { href: base.href }), tags &&
                 getProps(tags)
                     .map(([k, x]) => {
                     if (notNullish(x)) {

package/ui/page/Head.tsx

@@ -8,22 +8,17 @@ import { joinTitles } from "../util/meta.js";
 /** Meta tags with a capital first letter and hyphens, e.g. `Content-Security-Policy` or `Accept`, are `http-equiv=""` tags. */
 const R_HTTP_EQUIV = /^[A-Z][a-zA-Z0-9]*(-[A-Z][a-zA-Z0-9]*)*$/;
 
-declare const _componentProps: unique symbol;
-
-export interface HeadProps {
-	readonly [_componentProps]?: never;
-}
-
 /** Use the details from the current page data context to set the document `<title>`, meta tags, and history state. */
 export function Head(): ReactElement {
 	const { url, title, base, app, links, tags } = requireMeta();
 
 	useEffect(() => {
+		if (typeof window === "undefined") return;
 		if (url) window.history.replaceState(null, "", url);
 	}, [url]);
 
 	return (
-		<>
+		<head>
 			<title>{joinTitles(title, app)}</title>
 			{base && <base href={base.href} />}
 			{tags &&
@@ -44,6 +39,6 @@ export function Head(): ReactElement {
 						<link key={k} rel={k} href={v} type={v.endsWith(".png") ? "image/png" : v.endsWith(".ico") ? "image/x-icon" : undefined} />
 					) : null,
 				)}
-		</>
+		</head>
 	);
 }

package/ui/page/Page.d.ts

@@ -1,10 +1,11 @@
 import type { ReactElement, ReactNode } from "react";
-import type { PossibleMetaData } from "../util/meta.js";
-export interface PageProps extends PossibleMetaData {
+import type { PossibleMeta } from "../util/meta.js";
+export interface PageProps extends PossibleMeta {
     children: ReactNode;
 }
 /**
  * Component for a single page (or screen) within an app.
- * - Changes the document title (that appears in the page tab) on render.
+ * - Sets the document title and other head metadata.
+ * - `<Head />` renders `<title>` / `<meta>` / `<link>` tags inline; React 19 hoists them automatically to the document `<head>` (or to `document.head` on the client). Works for both client-mounted SPAs and `renderToString` SSR.
  */
 export declare function Page({ children, ...metadata }: PageProps): ReactElement;

package/ui/page/Page.js

@@ -3,7 +3,8 @@ import { Meta } from "../misc/Meta.js";
 import { Head } from "./Head.js";
 /**
  * Component for a single page (or screen) within an app.
- * - Changes the document title (that appears in the page tab) on render.
+ * - Sets the document title and other head metadata.
+ * - `<Head />` renders `<title>` / `<meta>` / `<link>` tags inline; React 19 hoists them automatically to the document `<head>` (or to `document.head` on the client). Works for both client-mounted SPAs and `renderToString` SSR.
  */
 export function Page({ children, ...metadata }) {
     return (_jsxs(Meta, { ...metadata, children: [_jsx(Head, {}), children] }));

package/ui/page/Page.tsx

@@ -1,15 +1,16 @@
 import type { ReactElement, ReactNode } from "react";
 import { Meta } from "../misc/Meta.js";
-import type { PossibleMetaData } from "../util/meta.js";
+import type { PossibleMeta } from "../util/meta.js";
 import { Head } from "./Head.js";
 
-export interface PageProps extends PossibleMetaData {
+export interface PageProps extends PossibleMeta {
 	children: ReactNode;
 }
 
 /**
  * Component for a single page (or screen) within an app.
- * - Changes the document title (that appears in the page tab) on render.
+ * - Sets the document title and other head metadata.
+ * - `<Head />` renders `<title>` / `<meta>` / `<link>` tags inline; React 19 hoists them automatically to the document `<head>` (or to `document.head` on the client). Works for both client-mounted SPAs and `renderToString` SSR.
  */
 export function Page({ children, ...metadata }: PageProps): ReactElement {
 	return (

package/ui/page/index.d.ts

@@ -1,2 +1,3 @@
 export * from "./Head.js";
+export * from "./HTML.js";
 export * from "./Page.js";

package/ui/page/index.js

@@ -1,2 +1,3 @@
 export * from "./Head.js";
+export * from "./HTML.js";
 export * from "./Page.js";

package/ui/page/index.ts

@@ -1,2 +1,3 @@
 export * from "./Head.js";
+export * from "./HTML.js";
 export * from "./Page.js";