shelving 1.205.0 → 1.206.1

package/api/endpoint/Endpoint.js

@@ -1,7 +1,7 @@
 import { RequiredError } from "../../error/RequiredError.js";
 import { UNDEFINED } from "../../schema/Schema.js";
 import { isData } from "../../util/data.js";
-import { getPlaceholders, matchTemplate, renderTemplate } from "../../util/template.js";
+import { getPlaceholders, matchPathTemplate, renderPathTemplate } from "../../util/template.js";
 /**
  * An abstract API resource definition, used to specify types for e.g. serverless functions.
  *
@@ -40,7 +40,7 @@ export class Endpoint {
         // Placeholders.
         if (this.placeholders.length) {
             assertPlaceholderPayload(payload, this, caller);
-            return renderTemplate(this.path, payload, caller);
+            return renderPathTemplate(this.path, payload, caller);
         }
         // No placeholders.
         return this.path;
@@ -51,7 +51,7 @@ export class Endpoint {
     match(method, path, caller = this.match) {
         if (method !== this.method)
             return undefined;
-        return matchTemplate(this.path, path, caller);
+        return matchPathTemplate(this.path, path, caller);
     }
     /**
      * Create an endpoint handler pairing for this endpoint.

package/extract/FileExtractor.d.ts

@@ -4,7 +4,8 @@ import { Extractor } from "./Extractor.js";
 /**
  * Base extractor for a file in a tree.
  * - Reads the file's content as text and stores it in `content`.
- * - Sets `key` to the slugified basename (without extension).
+ * - Sets `key` to the slugified basename without extension.
+ * - Sets `name` to the display-ready basename without extension (e.g. `"OptionalSchema"`, not `"OptionalSchema.ts"`).
  * - Does NOT set `title` — `title` is only set by subclasses that have a confident source for one
  *   (e.g. `MarkdownExtractor` uses the first `<h1>`). Renderers fall back to `name` when missing.
  * - Subclasses (e.g. `MarkdownExtractor`, `TypescriptExtractor`) override `extractProps()` to parse the content into richer elements.
@@ -13,8 +14,7 @@ export declare class FileExtractor extends Extractor<BunFile, FileElement> {
     extract(file: BunFile): Promise<FileElement>;
     /**
      * Build the file element props from the extracted content.
-     * - `name` is the basename including extension (e.g. `"array.ts"`).
-     * - `base` is the basename without extension (e.g. `"array"`) — useful as a title fallback.
+     * - `name` is the basename without extension (e.g. `"array"`) — display-ready, used by menus and cards.
      * - Override to parse `text` into richer elements (content/children/description) and to set
      *   `title` if a confident title is available.
      */

package/extract/FileExtractor.js

@@ -5,7 +5,8 @@ import { Extractor } from "./Extractor.js";
 /**
  * Base extractor for a file in a tree.
  * - Reads the file's content as text and stores it in `content`.
- * - Sets `key` to the slugified basename (without extension).
+ * - Sets `key` to the slugified basename without extension.
+ * - Sets `name` to the display-ready basename without extension (e.g. `"OptionalSchema"`, not `"OptionalSchema.ts"`).
  * - Does NOT set `title` — `title` is only set by subclasses that have a confident source for one
  *   (e.g. `MarkdownExtractor` uses the first `<h1>`). Renderers fall back to `name` when missing.
  * - Subclasses (e.g. `MarkdownExtractor`, `TypescriptExtractor`) override `extractProps()` to parse the content into richer elements.
@@ -13,18 +14,17 @@ import { Extractor } from "./Extractor.js";
 export class FileExtractor extends Extractor {
     async extract(file) {
         const path = file.name ?? "unnamed";
-        const name = isAbsolutePath(path) ? (splitAbsolutePath(path).at(-1) ?? "unnamed") : path;
-        const [base = name] = splitFileExtension(name);
+        const filename = isAbsolutePath(path) ? (splitAbsolutePath(path).at(-1) ?? "unnamed") : path;
+        const [base = filename] = splitFileExtension(filename);
         return {
             type: "tree-file",
             key: requireSlug(base),
-            props: this.extractProps(name, await file.text()),
+            props: this.extractProps(base, await file.text()),
         };
     }
     /**
      * Build the file element props from the extracted content.
-     * - `name` is the basename including extension (e.g. `"array.ts"`).
-     * - `base` is the basename without extension (e.g. `"array"`) — useful as a title fallback.
+     * - `name` is the basename without extension (e.g. `"array"`) — display-ready, used by menus and cards.
      * - Override to parse `text` into richer elements (content/children/description) and to set
      *   `title` if a confident title is available.
      */

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "shelving",
-	"version": "1.205.0",
+	"version": "1.206.1",
 	"author": "Dave Houlbrooke <dave@shax.com>",
 	"repository": {
 		"type": "git",
@@ -10,22 +10,23 @@
 	"module": "./index.js",
 	"devDependencies": {
 		"@biomejs/biome": "^2.4.15",
-		"@google-cloud/firestore": "^8.5.0",
+		"@google-cloud/firestore": "^8.6.0",
 		"@heroicons/react": "^2.2.0",
-		"@types/bun": "^1.3.13",
+		"@types/bun": "^1.3.14",
 		"@types/react": "^19.2.14",
 		"@types/react-dom": "^19.2.3",
-		"@typescript/native-preview": "^7.0.0-dev.20260509.2",
+		"@typescript/native-preview": "^7.0.0-dev.20260514.1",
 		"firebase": "^12.13.0",
-		"react": "^19.3.0-canary-d5736f09-20260507",
-		"react-dom": "canary",
+		"react": "^19.3.0-canary-fef12a01-20260413",
+		"react-dom": "^19.3.0-canary-fef12a01-20260413",
 		"typescript": "^5.9.3"
 	},
 	"peerDependencies": {
 		"@google-cloud/firestore": ">=7.0.0",
 		"@heroicons/react": ">=2.0.0",
 		"firebase": ">=11.0.0",
-		"react": ">=19.0.0"
+		"react": ">=19.0.0",
+		"react-dom": ">=19.0.0"
 	},
 	"exports": {
 		".": "./index.js",

package/react/index.d.ts

@@ -3,7 +3,6 @@ export * from "./createDBContext.js";
 export * from "./useInstance.js";
 export * from "./useLazy.js";
 export * from "./useMap.js";
-export * from "./useProps.js";
 export * from "./useReduce.js";
 export * from "./useSequence.js";
 export * from "./useStore.js";

package/react/index.js

@@ -3,7 +3,6 @@ export * from "./createDBContext.js";
 export * from "./useInstance.js";
 export * from "./useLazy.js";
 export * from "./useMap.js";
-export * from "./useProps.js";
 export * from "./useReduce.js";
 export * from "./useSequence.js";
 export * from "./useStore.js";

package/react/useInstance.js

@@ -1,16 +1,19 @@
+import { useRef } from "react";
 import { isArrayEqual } from "../util/equal.js";
-import { useProps } from "./useProps.js";
 /**
  * Use a memoised class instance.
  * - Creates a new instance of `Constructor` using `args`
  * - Returns same instance for as long as `args` is equal to previous `args`.
  */
 export function useInstance(Constructor, ...args) {
-    const internals = useProps();
-    // Update `internals` if `args` changes or `instance` is not set.
-    if (!internals.args || !internals.instance || !isArrayEqual(args, internals.args)) {
-        internals.instance = new Constructor(...args);
-        internals.args = args;
+    const _internals = (useRef(undefined).current ??= {
+        instance: new Constructor(...args),
+        args,
+    });
+    // Update `_internals` if `args` changes.
+    if (!isArrayEqual(args, _internals.args)) {
+        _internals.instance = new Constructor(...args);
+        _internals.args = args;
     }
-    return internals.instance;
+    return _internals.instance;
 }

package/react/useLazy.js

@@ -1,12 +1,15 @@
+import { useRef } from "react";
 import { isArrayEqual } from "../util/equal.js";
 import { getLazy } from "../util/lazy.js";
-import { useProps } from "./useProps.js";
 export function useLazy(value, ...args) {
-    const internals = useProps();
-    // Update `internals` if `args` changes.
-    if (!internals.args || !isArrayEqual(args, internals.args)) {
-        internals.value = getLazy(value, ...args);
-        internals.args = args;
+    const _internals = (useRef(undefined).current ??= {
+        value: getLazy(value, ...args),
+        args,
+    });
+    // Update `_internals` if `args` changes.
+    if (!isArrayEqual(args, _internals.args)) {
+        _internals.value = getLazy(value, ...args);
+        _internals.args = args;
     }
-    return internals.value;
+    return _internals.value;
 }

package/react/useMap.d.ts

@@ -1,2 +1,2 @@
-/** Create a mutable Map that persist for the lifetime of the component. */
+/** Create a mutable Map that persists for the lifetime of the component. */
 export declare function useMap<K, V>(): Map<K, V>;

package/react/useMap.js

@@ -1,8 +1,5 @@
 import { useRef } from "react";
-/** Create a mutable Map that persist for the lifetime of the component. */
+/** Create a mutable Map that persists for the lifetime of the component. */
 export function useMap() {
-    const ref = useRef(undefined);
-    if (!ref.current)
-        ref.current = new Map();
-    return ref.current;
+    return (useRef(undefined).current ??= new Map());
 }

package/react/useReduce.js

@@ -1,6 +1,6 @@
 import { useRef } from "react";
 export function useReduce(reduce, ...args) {
-    const ref = useRef(undefined);
-    ref.current = reduce(ref.current, ...args);
-    return ref.current;
+    const _ref = useRef(undefined);
+    _ref.current = reduce(_ref.current, ...args);
+    return _ref.current;
 }

package/react/useStore.js

@@ -1,16 +1,19 @@
 import { useSyncExternalStore } from "react";
 import { BLACKHOLE } from "../util/function.js";
-import { runSequence } from "../util/sequence.js";
-import { useProps } from "./useProps.js";
+import { STOPHOLE } from "../util/index.js";
+// We add an `[EXTERNAL_STORE]` symbol key to the `Store` instance to cache the subscribe and getSnapshot functions for `useSyncExternalStore()`.
+const EXTERNAL_STORE = Symbol();
+const EXTERNAL_BLACKHOLE = {
+    subscribe: STOPHOLE,
+    getSnapshot: BLACKHOLE,
+};
 export function useStore(store) {
-    // Store memoized versions of `subscribe()` and `getSnapshot()` so `useSyncExternalStore()` doesn't re-subscribe on every render.
-    const internals = useProps();
-    // Update `internals` if `store` changes.
-    if (store !== internals.store || !internals.subscribe || !internals.getSnapshot) {
-        internals.subscribe = onStoreChange => (store ? runSequence(store, onStoreChange, onStoreChange) : BLACKHOLE);
-        internals.getSnapshot = () => store?.snapshot;
-        internals.store = store;
-    }
-    useSyncExternalStore(internals.subscribe, internals.getSnapshot);
+    const { subscribe, getSnapshot } = !store
+        ? EXTERNAL_BLACKHOLE
+        : (store[EXTERNAL_STORE] ??= {
+            subscribe: c => store.subscribe(c, c),
+            getSnapshot: () => store.snapshot,
+        });
+    useSyncExternalStore(subscribe, getSnapshot, getSnapshot);
     return store;
 }

package/store/Store.d.ts

@@ -1,7 +1,7 @@
 import { DeferredSequence } from "../sequence/DeferredSequence.js";
 import { NONE, SKIP } from "../util/constants.js";
-import type { AnyCaller, Arguments } from "../util/function.js";
-import { type PossibleStarter } from "../util/start.js";
+import type { AnyCaller, Arguments, Callback, ErrorCallback, ValueCallback } from "../util/function.js";
+import { type PossibleStarter, type StopCallback } from "../util/start.js";
 /** Any `Store` instance. */
 export type AnyStore = Store<any, any>;
 /** Values that a store natively knows how to process as inputs. */
@@ -166,4 +166,9 @@ export declare class Store<T, TT = T> implements AsyncIterable<T, void, void>, A
     [Symbol.asyncIterator](): AsyncIterator<T, void, void>;
     private _iterating;
     [Symbol.asyncDispose](): Promise<void>;
+    /**
+     * Subscribe to this store with handlers.
+     * - Returns a `StopCallback` to stop the subscription.
+     */
+    subscribe(onNext?: ValueCallback<T>, onError?: ErrorCallback, onReturn?: Callback): StopCallback;
 }

package/store/Store.js

@@ -3,6 +3,7 @@ import { isAsync } from "../util/async.js";
 import { NONE, SKIP } from "../util/constants.js";
 import { awaitDispose } from "../util/dispose.js";
 import { isDeepEqual } from "../util/equal.js";
+import { runSequence } from "../util/index.js";
 import { getStarter } from "../util/start.js";
 /**
  * Store that retains its most recent value and is async-iterable to allow values to be observed.
@@ -289,6 +290,13 @@ export class Store {
         await awaitDispose(this._starter, // Stop the starter.
         this.next);
     }
+    /**
+     * Subscribe to this store with handlers.
+     * - Returns a `StopCallback` to stop the subscription.
+     */
+    subscribe(onNext, onError, onReturn) {
+        return runSequence(this, onNext, onError, onReturn);
+    }
 }
 /** Call a callback but always return or resolve to `SKIP` */
 function _callSkipped(callback, ...args) {

package/ui/app/App.d.ts

@@ -1,5 +1,5 @@
 import { type ReactElement, type ReactNode } from "react";
-import type { PossibleMeta } from "../util/meta.js";
+import type { PossibleMeta } from "../util/index.js";
 export interface AppProps extends PossibleMeta {
     children: ReactNode;
 }
@@ -8,4 +8,4 @@ export interface AppProps extends PossibleMeta {
  * - Adds the theme CSS class (which sets CSS token variables on `:root`) to `document.body` on mount and removes it on unmount.
  * - Provides a `Meta` context to its children so descendants can read or update metadata.
  */
-export declare function App({ children, ...metadata }: AppProps): ReactElement;
+export declare function App({ children, ...meta }: AppProps): ReactElement;

package/ui/app/App.js

@@ -1,6 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect } from "react";
-import { Meta } from "../misc/Meta.js";
+import { MetaContext, requireMeta } from "../misc/MetaContext.js";
 import APP_CSS from "./App.module.css";
 const APP_CLASS = APP_CSS.app;
 /**
@@ -8,12 +8,13 @@ const APP_CLASS = APP_CSS.app;
  * - Adds the theme CSS class (which sets CSS token variables on `:root`) to `document.body` on mount and removes it on unmount.
  * - Provides a `Meta` context to its children so descendants can read or update metadata.
  */
-export function App({ children, ...metadata }) {
+export function App({ children, ...meta }) {
+    const merged = requireMeta(meta);
     useEffect(() => {
         if (!APP_CLASS)
             return;
         document.body.classList.add(APP_CLASS);
         return () => document.body.classList.remove(APP_CLASS);
     }, []);
-    return _jsx(Meta, { ...metadata, children: children });
+    return _jsx(MetaContext, { value: merged, children: children });
 }

package/ui/app/App.tsx

@@ -1,6 +1,6 @@
 import { type ReactElement, type ReactNode, useEffect } from "react";
-import { Meta } from "../misc/Meta.js";
-import type { PossibleMeta } from "../util/meta.js";
+import { MetaContext, requireMeta } from "../misc/MetaContext.js";
+import type { PossibleMeta } from "../util/index.js";
 import APP_CSS from "./App.module.css";
 
 export interface AppProps extends PossibleMeta {
@@ -14,11 +14,12 @@ const APP_CLASS = APP_CSS.app;
  * - Adds the theme CSS class (which sets CSS token variables on `:root`) to `document.body` on mount and removes it on unmount.
  * - Provides a `Meta` context to its children so descendants can read or update metadata.
  */
-export function App({ children, ...metadata }: AppProps): ReactElement {
+export function App({ children, ...meta }: AppProps): ReactElement {
+	const merged = requireMeta(meta);
 	useEffect(() => {
 		if (!APP_CLASS) return;
 		document.body.classList.add(APP_CLASS);
 		return () => document.body.classList.remove(APP_CLASS);
 	}, []);
-	return <Meta {...metadata}>{children}</Meta>;
+	return <MetaContext value={merged}>{children}</MetaContext>;
 }

package/ui/block/Section.d.ts

@@ -14,10 +14,10 @@ export interface HeaderProps extends SectionProps {
 export declare function Header(props: HeaderProps): ReactElement;
 /** A single HTML `<section>` with correct spacing. */
 export declare function Section(props: SectionProps): ReactElement;
-export interface NavigationProps extends SectionProps {
+export interface NavProps extends SectionProps {
 }
 /** A single HTML `<nav>` with correct spacing. */
-export declare function Navigation(props: NavigationProps): ReactElement;
+export declare function Nav(props: NavProps): ReactElement;
 export interface AsideProps extends SectionProps {
 }
 /** A single HTML `<aside>` with correct spacing. */

package/ui/block/Section.js

@@ -13,7 +13,7 @@ export function Section(props) {
     return renderSection("section", props);
 }
 /** A single HTML `<nav>` with correct spacing. */
-export function Navigation(props) {
+export function Nav(props) {
     return renderSection("nav", props);
 }
 /** A single HTML `<aside>` with correct spacing. */

package/ui/block/Section.tsx

@@ -31,10 +31,10 @@ export function Section(props: SectionProps): ReactElement {
 	return renderSection("section", props);
 }
 
-export interface NavigationProps extends SectionProps {}
+export interface NavProps extends SectionProps {}
 
 /** A single HTML `<nav>` with correct spacing. */
-export function Navigation(props: NavigationProps): ReactElement {
+export function Nav(props: NavProps): ReactElement {
 	return renderSection("nav", props);
 }
 

package/ui/misc/MetaContext.d.ts

@@ -0,0 +1,12 @@
+import { type ReactNode } from "react";
+import { type URIParams } from "../../util/uri.js";
+import { type Meta, type PossibleMeta } from "../util/meta.js";
+/** Context to store the `Config` object. */
+export declare const MetaContext: import("react").Context<Meta>;
+export interface MetaProps extends PossibleMeta {
+    children: ReactNode;
+}
+/** Require the current meta context in a component. */
+export declare function requireMeta(meta?: PossibleMeta): Meta;
+/** Get all URI/route params from the current meta context's URL. */
+export declare function requireMetaParams(): URIParams;

package/ui/misc/MetaContext.js

@@ -0,0 +1,15 @@
+import { createContext, use } from "react";
+import { getURIParams } from "../../util/uri.js";
+import { mergeMeta } from "../util/meta.js";
+/** Context to store the `Config` object. */
+export const MetaContext = createContext({});
+MetaContext.displayName = "MetaContext";
+/** Require the current meta context in a component. */
+export function requireMeta(meta) {
+    const current = use(MetaContext);
+    return meta ? mergeMeta(current, meta) : current;
+}
+/** Get all URI/route params from the current meta context's URL. */
+export function requireMetaParams() {
+    return getURIParams(requireMeta().url ?? {}, requireMetaParams);
+}

package/ui/misc/MetaContext.tsx

@@ -0,0 +1,22 @@
+import { createContext, type ReactNode, use } from "react";
+import { getURIParams, type URIParams } from "../../util/uri.js";
+import { type Meta, mergeMeta, type PossibleMeta } from "../util/meta.js";
+
+/** Context to store the `Config` object. */
+export const MetaContext = createContext<Meta>({});
+MetaContext.displayName = "MetaContext";
+
+export interface MetaProps extends PossibleMeta {
+	children: ReactNode;
+}
+
+/** Require the current meta context in a component. */
+export function requireMeta(meta?: PossibleMeta): Meta {
+	const current = use(MetaContext);
+	return meta ? mergeMeta(current, meta) : current;
+}
+
+/** Get all URI/route params from the current meta context's URL. */
+export function requireMetaParams(): URIParams {
+	return getURIParams(requireMeta().url ?? {}, requireMetaParams);
+}

package/ui/misc/index.d.ts

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

package/ui/misc/index.js

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

package/ui/misc/index.tsx

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

package/ui/page/HTML.d.ts

@@ -1,10 +1,10 @@
 import type { ReactElement, ReactNode } from "react";
-export interface HTMLProps {
+import type { PossibleMeta } from "../util/index.js";
+export interface HTMLProps extends PossibleMeta {
     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.
+ * Output a `<html>` element wrapping `<head>` (via `<Head>`) and `<body id="root">`.
+ * - `<Head>` renders the literal `<head>` with `<base>` and other shell-level metadata; per-page hoistable elements (title, meta, links, stylesheets, scripts) come from `<PageHead>` inside `<Page>` and are hoisted into this `<head>` by React 19.
  */
-export declare function HTML({ children }: HTMLProps): ReactElement;
+export declare function HTML({ children, ...meta }: HTMLProps): ReactElement;

package/ui/page/HTML.js

@@ -1,11 +1,11 @@
-import { jsx as _jsx } from "react/jsx-runtime";
-import { requireMeta } from "../misc/Meta.js";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { MetaContext, requireMeta } from "../misc/MetaContext.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.
+ * Output a `<html>` element wrapping `<head>` (via `<Head>`) and `<body id="root">`.
+ * - `<Head>` renders the literal `<head>` with `<base>` and other shell-level metadata; per-page hoistable elements (title, meta, links, stylesheets, scripts) come from `<PageHead>` inside `<Page>` and are hoisted into this `<head>` by React 19.
  */
-export function HTML({ children }) {
-    const { language } = requireMeta();
-    return (_jsx("html", { lang: language, children: _jsx("body", { id: "root", children: children }) }));
+export function HTML({ children, ...meta }) {
+    const merged = requireMeta(meta);
+    const { language, base, app } = merged;
+    return (_jsxs("html", { lang: language, children: [_jsxs("head", { children: [_jsx("meta", { charSet: "utf-8" }), base && _jsx("base", { href: base.href }), app && _jsx("title", { children: app })] }), _jsx("body", { id: "root", children: _jsx(MetaContext, { value: merged, children: children }) })] }));
 }

package/ui/page/HTML.tsx

@@ -1,20 +1,28 @@
 import type { ReactElement, ReactNode } from "react";
-import { requireMeta } from "../misc/Meta.js";
+import { MetaContext, requireMeta } from "../misc/MetaContext.js";
+import type { PossibleMeta } from "../util/index.js";
 
-export interface HTMLProps {
+export interface HTMLProps extends PossibleMeta {
 	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.
+ * Output a `<html>` element wrapping `<head>` (via `<Head>`) and `<body id="root">`.
+ * - `<Head>` renders the literal `<head>` with `<base>` and other shell-level metadata; per-page hoistable elements (title, meta, links, stylesheets, scripts) come from `<PageHead>` inside `<Page>` and are hoisted into this `<head>` by React 19.
  */
-export function HTML({ children }: HTMLProps): ReactElement {
-	const { language } = requireMeta();
+export function HTML({ children, ...meta }: HTMLProps): ReactElement {
+	const merged = requireMeta(meta);
+	const { language, base, app } = merged;
 	return (
 		<html lang={language}>
-			<body id="root">{children}</body>
+			<head>
+				<meta charSet="utf-8" />
+				{base && <base href={base.href} />}
+				{app && <title>{app}</title>}
+			</head>
+			<body id="root">
+				<MetaContext value={merged}>{children}</MetaContext>
+			</body>
 		</html>
 	);
 }

package/ui/page/Head.d.ts

@@ -1,3 +1,8 @@
 import { type ReactElement } from "react";
-/** Use the details from the current page data context to set the document `<title>`, meta tags, and history state. */
+/**
+ * Per-page meta tags plus history navigation.
+ * - Emits hoistable head elements (title, meta, links, stylesheets, scripts) inline; React 19 hoists each one into the document `<head>`.
+ * - Does not render `<base>` (not hoistable — that lives in `<Head>` in the `<HTML>` shell component).
+ * - Updates `window.history` to match the page URL.
+ */
 export declare function Head(): ReactElement;

package/ui/page/Head.js

@@ -1,23 +1,30 @@
-import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Fragment as _Fragment, jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { useEffect } from "react";
 import { isNullish, notNullish } from "../../util/null.js";
 import { getProps } from "../../util/object.js";
-import { requireMeta } from "../misc/Meta.js";
+import { requireMeta } from "../misc/MetaContext.js";
 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]*)*$/;
-/** Use the details from the current page data context to set the document `<title>`, meta tags, and history state. */
+/**
+ * Per-page meta tags plus history navigation.
+ * - Emits hoistable head elements (title, meta, links, stylesheets, scripts) inline; React 19 hoists each one into the document `<head>`.
+ * - Does not render `<base>` (not hoistable — that lives in `<Head>` in the `<HTML>` shell component).
+ * - Updates `window.history` to match the page URL.
+ */
 export function Head() {
-    const { url, title, base, app, links, tags, stylesheets, modules, scripts } = requireMeta();
+    const meta = requireMeta();
+    const { url, title, app, links, tags, stylesheets, modules, scripts } = meta;
     useEffect(() => {
         if (typeof window === "undefined")
             return;
         if (url)
             window.history.replaceState(null, "", url);
     }, [url]);
-    return (_jsxs("head", { children: [_jsx("title", { children: joinTitles(title, app) }), base && _jsx("base", { href: base.href }), tags && getProps(tags).map(_renderTags), links && getProps(links).map(_renderLinks), stylesheets?.map(_renderStylesheets), modules?.map(_renderModules), scripts?.map(_renderScripts)] }));
+    const fullTitle = joinTitles(title, app);
+    return (_jsxs(_Fragment, { children: [fullTitle && _jsx("title", { children: fullTitle }), tags && getProps(tags).map(_renderTag), links && getProps(links).map(_renderLink), stylesheets?.map(_renderStylesheet), modules?.map(_renderModule), scripts?.map(_renderScript)] }));
 }
-function _renderTags([k, x]) {
+function _renderTag([k, x]) {
     if (notNullish(x)) {
         const y = x === true ? "yes" : x === false ? "no" : x;
         if (k.startsWith("og:"))
@@ -28,19 +35,19 @@ function _renderTags([k, x]) {
     }
     return null;
 }
-function _renderLinks([k, v]) {
+function _renderLink([k, v]) {
     if (notNullish(v)) {
         const type = k.endsWith("icon") ? "image/x-icon" : "text/css";
         return _jsx("link", { rel: k, href: v, type: type }, k);
     }
     return null;
 }
-function _renderStylesheets(v) {
-    return isNullish(v) ? null : _jsx("link", { rel: "stylesheet", type: "text/css", href: v }, v);
+function _renderStylesheet(v) {
+    return isNullish(v) ? null : _jsx("link", { rel: "stylesheet", type: "text/css", href: v, precedence: "default" }, v);
 }
-function _renderModules(v) {
-    return isNullish(v) ? null : _jsx("script", { type: "module", src: v, defer: true }, v);
+function _renderModule(v) {
+    return isNullish(v) ? null : _jsx("script", { type: "module", src: v, async: true }, v);
 }
-function _renderScripts(v) {
-    return isNullish(v) ? null : _jsx("script", { type: "text/javascript", src: v, defer: true }, v);
+function _renderScript(v) {
+    return isNullish(v) ? null : _jsx("script", { type: "text/javascript", src: v, async: true }, v);
 }