shelving 1.201.0 → 1.203.0

package/extract/DirectoryExtractor.d.ts

@@ -0,0 +1,29 @@
+import type { Element } from "../util/element.js";
+import { Extractor } from "./Extractor.js";
+import type { FileExtractor } from "./FileExtractor.js";
+/** Options for a directory extractor. */
+export interface DirectoryExtractorOptions {
+    /** Filenames to treat as the directory's index file (e.g. `["README.md", "INDEX.md"]`). */
+    readonly index: readonly string[];
+    /** Extractor to use for child files. */
+    readonly extractor: FileExtractor;
+}
+/**
+ * Extractor that processes a directory's files into a directory element.
+ * - Finds an index file and absorbs its content as the directory's own content.
+ * - Delegates remaining files to the child file extractor.
+ * - Errors if two child elements resolve to the same slug.
+ * - Preserves file system ordering.
+ */
+export declare class DirectoryExtractor extends Extractor<{
+    name: string;
+    files: File[];
+}> {
+    private readonly _index;
+    private readonly _extractor;
+    constructor({ index, extractor }: DirectoryExtractorOptions);
+    extract({ name, files }: {
+        name: string;
+        files: File[];
+    }): Promise<Element>;
+}

package/extract/DirectoryExtractor.js

@@ -0,0 +1,48 @@
+import { requireSlug } from "../util/string.js";
+import { Extractor } from "./Extractor.js";
+/**
+ * Extractor that processes a directory's files into a directory element.
+ * - Finds an index file and absorbs its content as the directory's own content.
+ * - Delegates remaining files to the child file extractor.
+ * - Errors if two child elements resolve to the same slug.
+ * - Preserves file system ordering.
+ */
+export class DirectoryExtractor extends Extractor {
+    _index;
+    _extractor;
+    constructor({ index, extractor }) {
+        super();
+        this._index = index;
+        this._extractor = extractor;
+    }
+    async extract({ name, files }) {
+        let indexElement;
+        const children = [];
+        const keys = new Set();
+        for (const file of files) {
+            if (!indexElement && this._index.includes(file.name)) {
+                indexElement = await this._extractor.extract(file);
+            }
+            else {
+                const element = await this._extractor.extract(file);
+                const { key } = element;
+                if (key) {
+                    if (keys.has(key))
+                        throw new Error(`Duplicate key "${key}" in directory "${name}"`);
+                    keys.add(key);
+                }
+                children.push(element);
+            }
+        }
+        return {
+            type: "tree-directory",
+            key: requireSlug(name),
+            props: {
+                title: indexElement?.props.title ?? name,
+                description: indexElement?.props.description,
+                content: indexElement?.props.content,
+                children,
+            },
+        };
+    }
+}

package/extract/Extractor.d.ts

@@ -0,0 +1,11 @@
+import type { Element } from "../util/element.js";
+/**
+ * Base class for an extractor that converts input into an element.
+ * - Extractors are composable: outer extractors delegate to inner extractors.
+ */
+export declare abstract class Extractor<I> {
+    /** Extract an element from the given input. */
+    abstract extract(input: I): Element | Promise<Element>;
+}
+/** Extractor that converts string content into an element. */
+export type ContentExtractor = Extractor<string>;

package/extract/Extractor.js

@@ -0,0 +1,6 @@
+/**
+ * Base class for an extractor that converts input into an element.
+ * - Extractors are composable: outer extractors delegate to inner extractors.
+ */
+export class Extractor {
+}

package/extract/FileExtractor.d.ts

@@ -0,0 +1,17 @@
+import type { Element } from "../util/element.js";
+import { type ContentExtractor, Extractor } from "./Extractor.js";
+/** Options for a file extractor. */
+export interface FileExtractorOptions {
+    /** Map of file extension (e.g. `".md"`, `".ts"`) to content extractor. */
+    readonly extractors: Readonly<Record<string, ContentExtractor>>;
+}
+/**
+ * Extractor that dispatches to a content extractor based on file extension.
+ * - Reads the file content and passes it to the matched extractor.
+ * - Sets the element `key` to the slugified filename (without extension).
+ */
+export declare class FileExtractor extends Extractor<File> {
+    private readonly _extractors;
+    constructor({ extractors }: FileExtractorOptions);
+    extract(file: File): Promise<Element>;
+}

package/extract/FileExtractor.js

@@ -0,0 +1,25 @@
+import { splitFileExtension } from "../util/file.js";
+import { requireSlug } from "../util/string.js";
+import { Extractor } from "./Extractor.js";
+/**
+ * Extractor that dispatches to a content extractor based on file extension.
+ * - Reads the file content and passes it to the matched extractor.
+ * - Sets the element `key` to the slugified filename (without extension).
+ */
+export class FileExtractor extends Extractor {
+    _extractors;
+    constructor({ extractors }) {
+        super();
+        this._extractors = extractors;
+    }
+    async extract(file) {
+        const [base, ext] = splitFileExtension(file.name);
+        const key = requireSlug(base ?? file.name);
+        const extractor = ext ? this._extractors[ext] : undefined;
+        if (!extractor)
+            return { type: "tree-file", key, props: {} };
+        const content = await file.text();
+        const element = await extractor.extract(content);
+        return { ...element, key };
+    }
+}

package/extract/MarkdownExtractor.d.ts

@@ -0,0 +1,13 @@
+import type { MarkupOptions } from "../markup/util/options.js";
+import type { Element } from "../util/element.js";
+import { type ContentExtractor, Extractor } from "./Extractor.js";
+/**
+ * Extractor that converts a Markdown string into a file element.
+ * - Parses the markdown using the markup module.
+ * - Extracts the first `<h1>` heading as the element title.
+ */
+export declare class MarkdownExtractor extends Extractor<string> implements ContentExtractor {
+    private readonly _options;
+    constructor(options?: MarkupOptions);
+    extract(content: string): Element;
+}

package/extract/MarkdownExtractor.js

@@ -0,0 +1,32 @@
+import { renderMarkup } from "../markup/render.js";
+import { MARKUP_RULES } from "../markup/rule/index.js";
+import { getElements, getElementText } from "../util/element.js";
+import { Extractor } from "./Extractor.js";
+/**
+ * Extractor that converts a Markdown string into a file element.
+ * - Parses the markdown using the markup module.
+ * - Extracts the first `<h1>` heading as the element title.
+ */
+export class MarkdownExtractor extends Extractor {
+    _options;
+    constructor(options = { rules: MARKUP_RULES }) {
+        super();
+        this._options = options;
+    }
+    extract(content) {
+        const elements = renderMarkup(content, this._options);
+        const title = _getFirstHeadingText(elements);
+        return {
+            type: "tree-file",
+            key: null,
+            props: { title, content: elements },
+        };
+    }
+}
+/** Find the first `h1` element and extract its text content. */
+function _getFirstHeadingText(elements) {
+    for (const el of getElements(elements)) {
+        if (el.type === "h1")
+            return getElementText(el.props.children) || undefined;
+    }
+}

package/extract/TypescriptExtractor.d.ts

@@ -0,0 +1,11 @@
+import type { Element } from "../util/element.js";
+import { type ContentExtractor, Extractor } from "./Extractor.js";
+/**
+ * Extractor that converts a TypeScript source string into a file element.
+ * - Uses the TypeScript compiler API to parse the AST.
+ * - Extracts exported, public, non-`_`-prefixed declarations with their JSDoc and type signatures.
+ * - Top-of-file JSDoc comment becomes the file's description.
+ */
+export declare class TypescriptExtractor extends Extractor<string> implements ContentExtractor {
+    extract(content: string): Element;
+}

package/extract/TypescriptExtractor.js

@@ -0,0 +1,244 @@
+import ts from "typescript";
+import { Extractor } from "./Extractor.js";
+/**
+ * Extractor that converts a TypeScript source string into a file element.
+ * - Uses the TypeScript compiler API to parse the AST.
+ * - Extracts exported, public, non-`_`-prefixed declarations with their JSDoc and type signatures.
+ * - Top-of-file JSDoc comment becomes the file's description.
+ */
+export class TypescriptExtractor extends Extractor {
+    extract(content) {
+        const source = ts.createSourceFile("source.ts", content, ts.ScriptTarget.Latest, true);
+        const children = [];
+        const description = _getFileDocComment(source);
+        for (const statement of source.statements) {
+            const element = _extractStatement(statement, source);
+            if (element)
+                children.push(element);
+        }
+        return {
+            type: "tree-file",
+            key: null,
+            props: { description, children },
+        };
+    }
+}
+/** Get the leading JSDoc comment of the file (before the first statement). */
+function _getFileDocComment(source) {
+    const { statements } = source;
+    if (!statements.length)
+        return;
+    const first = statements[0];
+    if (!first)
+        return;
+    const ranges = ts.getLeadingCommentRanges(source.text, first.pos);
+    if (!ranges?.length)
+        return;
+    const range = ranges[0];
+    if (!range || range.kind !== ts.SyntaxKind.MultiLineCommentTrivia)
+        return;
+    const text = source.text.slice(range.pos, range.end);
+    return _parseJSDocComment(text);
+}
+/** Extract an element from a top-level statement, or return undefined if it should be skipped. */
+function _extractStatement(statement, source) {
+    // Skip non-exported statements.
+    if (!_isExported(statement))
+        return;
+    // Skip statements without a name.
+    const name = _getStatementName(statement);
+    if (!name)
+        return;
+    // Skip private/internal names.
+    if (name.startsWith("_"))
+        return;
+    const jsDoc = _getJSDoc(statement, source);
+    const kind = _getElementType(statement);
+    if (!kind)
+        return;
+    const signature = _getSignature(statement, source);
+    const params = _getParams(statement, source);
+    const returns = _getReturnType(statement, source);
+    const examples = jsDoc?.examples;
+    const children = _getClassMembers(statement, source);
+    const props = {
+        title: name,
+        description: jsDoc?.description,
+        signature,
+    };
+    if (params?.length)
+        props.params = params;
+    if (returns)
+        props.returns = returns;
+    if (examples?.length)
+        props.examples = examples;
+    if (children?.length)
+        props.children = children;
+    return { type: kind, key: null, props };
+}
+/** Check if a statement has an `export` modifier. */
+function _isExported(statement) {
+    const modifiers = ts.canHaveModifiers(statement) ? ts.getModifiers(statement) : undefined;
+    return !!modifiers?.some(m => m.kind === ts.SyntaxKind.ExportKeyword);
+}
+/** Get the declared name of a statement. */
+function _getStatementName(statement) {
+    if (ts.isFunctionDeclaration(statement) ||
+        ts.isClassDeclaration(statement) ||
+        ts.isInterfaceDeclaration(statement) ||
+        ts.isTypeAliasDeclaration(statement) ||
+        ts.isEnumDeclaration(statement)) {
+        return statement.name?.text;
+    }
+    if (ts.isVariableStatement(statement)) {
+        const declaration = statement.declarationList.declarations[0];
+        if (declaration && ts.isIdentifier(declaration.name))
+            return declaration.name.text;
+    }
+}
+/** Map a statement to its tree element type. */
+function _getElementType(statement) {
+    if (ts.isFunctionDeclaration(statement))
+        return "tree-function";
+    if (ts.isClassDeclaration(statement))
+        return "tree-class";
+    if (ts.isInterfaceDeclaration(statement))
+        return "tree-interface";
+    if (ts.isTypeAliasDeclaration(statement))
+        return "tree-type";
+    if (ts.isVariableStatement(statement))
+        return "tree-constant";
+}
+/** Get the text signature of a statement. */
+function _getSignature(statement, source) {
+    if (ts.isFunctionDeclaration(statement)) {
+        const params = statement.parameters.map(p => p.getText(source)).join(", ");
+        const ret = statement.type ? statement.type.getText(source) : "void";
+        return `(${params}) => ${ret}`;
+    }
+    if (ts.isTypeAliasDeclaration(statement)) {
+        return statement.type.getText(source);
+    }
+    if (ts.isVariableStatement(statement)) {
+        const declaration = statement.declarationList.declarations[0];
+        if (declaration?.type)
+            return declaration.type.getText(source);
+    }
+}
+/** Extract parameters from a function or method declaration. */
+function _getParams(statement, source) {
+    if (!ts.isFunctionDeclaration(statement))
+        return;
+    const jsDocParams = _getJSDoc(statement, source)?.params;
+    const params = statement.parameters.map(p => {
+        const name = p.name.getText(source);
+        const type = p.type?.getText(source);
+        const optional = !!p.questionToken || !!p.initializer;
+        const description = jsDocParams?.find(d => d.name === name)?.description;
+        return { name, type, description, optional };
+    });
+    return params.length ? params : undefined;
+}
+/** Get the return type of a function declaration. */
+function _getReturnType(statement, source) {
+    if (ts.isFunctionDeclaration(statement) && statement.type)
+        return statement.type.getText(source);
+}
+/** Extract class or interface members as child elements. */
+function _getClassMembers(statement, source) {
+    if (!ts.isClassDeclaration(statement) && !ts.isInterfaceDeclaration(statement))
+        return;
+    const members = [];
+    for (const member of statement.members) {
+        // Skip private, protected, and _-prefixed members.
+        const name = member.name && ts.isIdentifier(member.name) ? member.name.text : undefined;
+        if (!name || name.startsWith("_"))
+            continue;
+        if (ts.canHaveModifiers(member)) {
+            const modifiers = ts.getModifiers(member);
+            if (modifiers?.some(m => m.kind === ts.SyntaxKind.PrivateKeyword || m.kind === ts.SyntaxKind.ProtectedKeyword))
+                continue;
+        }
+        const jsDoc = _getJSDoc(member, source);
+        const props = {
+            title: name,
+            description: jsDoc?.description,
+        };
+        if (ts.isMethodDeclaration(member) || ts.isMethodSignature(member)) {
+            const params = member.parameters.map(p => p.getText(source)).join(", ");
+            const ret = member.type ? member.type.getText(source) : "void";
+            props.signature = `(${params}) => ${ret}`;
+            members.push({ type: "tree-method", key: null, props });
+        }
+        else if (ts.isPropertyDeclaration(member) || ts.isPropertySignature(member)) {
+            if (member.type)
+                props.signature = member.type.getText(source);
+            members.push({ type: "tree-property", key: null, props });
+        }
+    }
+    return members.length ? members : undefined;
+}
+/** Extract JSDoc from a node. */
+function _getJSDoc(node, source) {
+    const ranges = ts.getLeadingCommentRanges(source.text, node.pos);
+    if (!ranges?.length)
+        return;
+    // Find the last JSDoc-style comment (/** ... */).
+    for (let i = ranges.length - 1; i >= 0; i--) {
+        const range = ranges[i];
+        if (!range || range.kind !== ts.SyntaxKind.MultiLineCommentTrivia)
+            continue;
+        const text = source.text.slice(range.pos, range.end);
+        if (!text.startsWith("/**"))
+            continue;
+        const description = _parseJSDocComment(text);
+        const params = _parseJSDocParams(text);
+        const examples = _parseJSDocExamples(text);
+        return {
+            description: description || undefined,
+            params: params.length ? params : undefined,
+            examples: examples.length ? examples : undefined,
+        };
+    }
+}
+/** Parse a JSDoc comment block into its description text. */
+function _parseJSDocComment(text) {
+    const lines = text
+        .replace(/^\/\*\*\s*/, "")
+        .replace(/\s*\*\/$/, "")
+        .split("\n")
+        .map(l => l.replace(/^\s*\*\s?/, ""));
+    // Collect lines until we hit a @tag.
+    const description = [];
+    for (const line of lines) {
+        if (line.startsWith("@"))
+            break;
+        description.push(line);
+    }
+    const result = description.join("\n").trim();
+    return result || undefined;
+}
+/** Parse `@param` tags from a JSDoc comment. */
+function _parseJSDocParams(text) {
+    const results = [];
+    const regexp = /@param\s+(?:\{[^}]*\}\s+)?(\w+)\s+(.*)/g;
+    let match;
+    while ((match = regexp.exec(text))) {
+        const name = match[1];
+        const description = match[2];
+        if (name && description)
+            results.push({ name, description: description.trim() });
+    }
+    return results;
+}
+/** Parse `@example` tags from a JSDoc comment. */
+function _parseJSDocExamples(text) {
+    const results = [];
+    const regexp = /@example\s+(.*)/g;
+    let match;
+    while ((match = regexp.exec(text))) {
+        if (match[1])
+            results.push(match[1].trim());
+    }
+    return results;
+}

package/extract/index.d.ts

@@ -0,0 +1,5 @@
+export * from "./DirectoryExtractor.js";
+export * from "./Extractor.js";
+export * from "./FileExtractor.js";
+export * from "./MarkdownExtractor.js";
+export * from "./TypescriptExtractor.js";

package/extract/index.js

@@ -0,0 +1,5 @@
+export * from "./DirectoryExtractor.js";
+export * from "./Extractor.js";
+export * from "./FileExtractor.js";
+export * from "./MarkdownExtractor.js";
+export * from "./TypescriptExtractor.js";

package/markup/render.d.ts

@@ -1,13 +1,13 @@
-import type { JSXNode } from "../util/jsx.js";
+import type { Elements } from "../util/element.js";
 import type { MarkupOptions } from "./util/options.js";
 /**
- * Parse a text string as Markdownish syntax and render it as a JSX node.
+ * Parse a text string as Markdownish syntax and render it as elements.
  * - Syntax is not defined by this code, but by the rules supplied to it.
  *
  * @param input The string content possibly containing markup syntax, e.g. "This is a *bold* string.
  * @param options An options object for the render.
  * @param context The context to render in (defaults to `"block"`).
  *
- * @returns JSXNode, i.e. either a complete `JSXElement`, `null`, `undefined`, `string`, or an array of zero or more of those.
+ * @returns Elements, i.e. either a complete `Element`, `null`, `undefined`, `string`, or an array of zero or more of those.
  */
-export declare function renderMarkup(input: string, options: MarkupOptions, context?: string): JSXNode;
+export declare function renderMarkup(input: string, options: MarkupOptions, context?: string): Elements;

package/markup/render.js

@@ -1,20 +1,20 @@
 /**
- * Parse a text string as Markdownish syntax and render it as a JSX node.
+ * Parse a text string as Markdownish syntax and render it as elements.
  * - Syntax is not defined by this code, but by the rules supplied to it.
  *
  * @param input The string content possibly containing markup syntax, e.g. "This is a *bold* string.
  * @param options An options object for the render.
  * @param context The context to render in (defaults to `"block"`).
  *
- * @returns JSXNode, i.e. either a complete `JSXElement`, `null`, `undefined`, `string`, or an array of zero or more of those.
+ * @returns Elements, i.e. either a complete `Element`, `null`, `undefined`, `string`, or an array of zero or more of those.
  */
 export function renderMarkup(input, options, context = "block") {
     const arr = Array.from(_parseString(input, options, context));
     return !arr.length ? null : arr.length === 1 ? arr[0] : arr;
 }
 /**
- * Parse a string to its corresponding JSX nodes in a given context.
- * - This code is heavily inspired by `simple-markdown`, but intends to be even simpler (and faster) by always producing JSX elements.
+ * Parse a string to its corresponding elements in a given context.
+ * - This code is heavily inspired by `simple-markdown`, but intends to be even simpler (and faster) by always producing elements.
  */
 function* _parseString(
 /** The input string. */

package/markup/rule/unordered.d.ts

@@ -1,4 +1,4 @@
-import type { JSXElement } from "../../util/jsx.js";
+import type { Element } from "../../util/element.js";
 import type { MarkupOptions } from "../util/options.js";
 export declare const UNORDERED_REGEXP: import("../../index.js").NamedRegExp<{
     list?: string;
@@ -13,4 +13,4 @@ export declare const UNORDERED_REGEXP: import("../../index.js").NamedRegExp<{
  */
 export declare const UNORDERED_RULE: import("../util/rule.js").MarkupRule;
 /** Parse a markdown list into a set of items elements. */
-export declare function _getItems(list: string, options: MarkupOptions): Iterable<JSXElement>;
+export declare function _getItems(list: string, options: MarkupOptions): Iterable<Element>;

package/markup/util/rule.d.ts

@@ -1,12 +1,12 @@
-import type { JSXElement } from "../../util/jsx.js";
+import type { Element } from "../../util/element.js";
 import type { NamedRegExp, NamedRegExpExecArray } from "../../util/regexp.js";
 import type { MarkupOptions } from "./options.js";
 export type MarkupContexts = [string, ...string[]];
 export interface MarkupRule {
     /** Regular expression used for matching the rule. */
     regexp: RegExp;
-    /** Use the matched data to render a JSX element. */
-    render(match: RegExpExecArray, options: MarkupOptions, key: string): JSXElement;
+    /** Use the matched data to render an element. */
+    render(match: RegExpExecArray, options: MarkupOptions, key: string): Element;
     /** One or more contexts this rule should render in. */
     contexts: MarkupContexts;
     /** Priority for this rule (higher priority rules override lower priority rules). */
@@ -14,4 +14,4 @@ export interface MarkupRule {
 }
 export type MarkupRules = readonly MarkupRule[];
 /** Helper to make it easier to create typed `MarkupRule` instances using `NamedRegExp` regular expressions. */
-export declare function getMarkupRule<T extends NamedRegExp | RegExp>(regexp: T, render: T extends NamedRegExp<infer X> ? (match: NamedRegExpExecArray<X>, options: MarkupOptions, key: string) => JSXElement : (match: RegExpExecArray, options: MarkupOptions, key: string) => JSXElement, contexts: MarkupContexts, priority?: number): MarkupRule;
+export declare function getMarkupRule<T extends NamedRegExp | RegExp>(regexp: T, render: T extends NamedRegExp<infer X> ? (match: NamedRegExpExecArray<X>, options: MarkupOptions, key: string) => Element : (match: RegExpExecArray, options: MarkupOptions, key: string) => Element, contexts: MarkupContexts, priority?: number): MarkupRule;

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "shelving",
-	"version": "1.201.0",
+	"version": "1.203.0",
 	"author": "Dave Houlbrooke <dave@shax.com>",
 	"repository": {
 		"type": "git",
@@ -9,16 +9,17 @@
 	"main": "./index.js",
 	"module": "./index.js",
 	"devDependencies": {
-		"@biomejs/biome": "^2.4.14",
+		"@biomejs/biome": "^2.4.15",
 		"@google-cloud/firestore": "^8.5.0",
 		"@heroicons/react": "^2.2.0",
 		"@types/bun": "^1.3.13",
 		"@types/react": "^19.2.14",
 		"@types/react-dom": "^19.2.3",
-		"@typescript/native-preview": "^7.0.0-dev.20260502.1",
-		"firebase": "^12.12.1",
-		"react": "canary",
-		"react-dom": "canary"
+		"@typescript/native-preview": "^7.0.0-dev.20260509.2",
+		"firebase": "^12.13.0",
+		"react": "^19.3.0-canary-d5736f09-20260507",
+		"react-dom": "canary",
+		"typescript": "^5.9.3"
 	},
 	"peerDependencies": {
 		"@google-cloud/firestore": ">=7.0.0",
@@ -69,6 +70,7 @@
 		"test:unit": "bun test --concurrent --only-failures",
 		"fix": "bun run --sequential fix:*",
 		"fix:0:lint": "biome check --write .",
+		"docs": "bun ./scripts/docs.tsx",
 		"build": "bun run --sequential build:*",
 		"build:0:setup": "rm -rf ./dist && mkdir -p ./dist",
 		"build:1:copy": "cp package.json dist/package.json && cp LICENSE.md dist/LICENSE.md && cp README.md dist/README.md && cp .npmignore dist/.npmignore && cp -r modules/ui dist/ui",

package/ui/app/App.d.ts

@@ -1,6 +1,6 @@
 import { type ReactElement, type ReactNode } from "react";
-import type { PossibleMetaData } from "../util/meta.js";
-export interface AppProps extends PossibleMetaData {
+import type { PossibleMeta } from "../util/meta.js";
+export interface AppProps extends PossibleMeta {
     children: ReactNode;
 }
 /**

package/ui/app/App.js

@@ -2,7 +2,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 import { useEffect } from "react";
 import { Meta } from "../misc/Meta.js";
 import APP_CSS from "./App.module.css";
-const _appClass = APP_CSS.app;
+const APP_CLASS = APP_CSS.app;
 /**
  * Root component for an application.
  * - Adds the theme CSS class (which sets CSS token variables on `:root`) to `document.body` on mount and removes it on unmount.
@@ -10,12 +10,10 @@ const _appClass = APP_CSS.app;
  */
 export function App({ children, ...metadata }) {
     useEffect(() => {
-        if (!_appClass)
+        if (!APP_CLASS)
             return;
-        document.body.classList.add(_appClass);
-        return () => {
-            document.body.classList.remove(_appClass);
-        };
+        document.body.classList.add(APP_CLASS);
+        return () => document.body.classList.remove(APP_CLASS);
     }, []);
     return _jsx(Meta, { ...metadata, children: children });
 }

package/ui/app/App.tsx

@@ -1,13 +1,13 @@
 import { type ReactElement, type ReactNode, useEffect } from "react";
 import { Meta } from "../misc/Meta.js";
-import type { PossibleMetaData } from "../util/meta.js";
+import type { PossibleMeta } from "../util/meta.js";
 import APP_CSS from "./App.module.css";
 
-export interface AppProps extends PossibleMetaData {
+export interface AppProps extends PossibleMeta {
 	children: ReactNode;
 }
 
-const _appClass = APP_CSS.app;
+const APP_CLASS = APP_CSS.app;
 
 /**
  * Root component for an application.
@@ -16,11 +16,9 @@ const _appClass = APP_CSS.app;
  */
 export function App({ children, ...metadata }: AppProps): ReactElement {
 	useEffect(() => {
-		if (!_appClass) return;
-		document.body.classList.add(_appClass);
-		return () => {
-			document.body.classList.remove(_appClass);
-		};
+		if (!APP_CLASS) return;
+		document.body.classList.add(APP_CLASS);
+		return () => document.body.classList.remove(APP_CLASS);
 	}, []);
 	return <Meta {...metadata}>{children}</Meta>;
 }

package/ui/block/Video.js

@@ -22,7 +22,7 @@ export function VideoButton({ children, title, onClick, disabled, ...variants })
 }
 /** Button to make a video element go fullscreen. */
 export function FullscreenVideoButton() {
-    const [isFull, setFull] = useState(!!document.fullscreenElement);
+    const [isFull, setFull] = useState(() => typeof document !== "undefined" && !!document.fullscreenElement);
     useEffect(() => {
         const onChange = () => setFull(!!document.fullscreenElement);
         document.addEventListener("fullscreenchange", onChange);