zidane-ui 9.0.4 → 9.1.3

package/dist/extensions/ExtensionSettingsPage.d.ts

@@ -0,0 +1,19 @@
+import { CSSProperties } from "react";
+//#region src/extensions/ExtensionSettingsPage.d.ts
+/** Props for {@link ExtensionSettingsPage}. */
+interface ExtensionSettingsPageProps {
+  /** The page's full id (`<extension>/<id>`). */
+  id: string;
+  /** Extra classes on the root. */
+  className?: string;
+  /** Inline styles on the root. */
+  style?: CSSProperties;
+}
+/**
+ * Draws one extension settings page. Draws nothing when no extension offers `id`.
+ *
+ * @param props - The page id, `className` and `style`.
+ */
+declare function ExtensionSettingsPage({ id, className, style }: ExtensionSettingsPageProps): import("react").JSX.Element | null;
+//#endregion
+export { ExtensionSettingsPage, ExtensionSettingsPageProps };

package/dist/extensions/ExtensionSettingsPage.js

@@ -0,0 +1,116 @@
+import { constant, useReadable } from "../chat/headless/store.js";
+import { useExtensionsLabels } from "./useExtensionsLabels.js";
+import { ExtensionComponent } from "./ExtensionComponent.js";
+import { useExtensionItems, useExtensionsHost } from "./ExtensionsProvider.js";
+import { extensionsErrorOf } from "./headless/host.js";
+import { settingsValues } from "./headless/select.js";
+import { SettingsWireForm } from "./SettingsWireForm.js";
+import { jsx } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from "react";
+//#region src/extensions/ExtensionSettingsPage.tsx
+/**
+* An extension's page in Settings (`ctx.add(SettingsPage, …)`): its component
+* when it names one, else (and as the component's fallback) its settings rows.
+* Rows show the live values the host's settings hold for the extension (the
+* page's own starting values otherwise) and write through `settings.set` at
+* once; a refused write shows under its row. Action rows run through
+* `invoke('setting.action')`. Without `settings.set` the rows are read-only.
+*/
+const NO_SETTINGS = constant(null);
+const NOT_LIMITED = constant(null);
+/**
+* Draws one extension settings page. Draws nothing when no extension offers `id`.
+*
+* @param props - The page id, `className` and `style`.
+*/
+function ExtensionSettingsPage({ id, className, style }) {
+	const host = useExtensionsHost();
+	const labels = useExtensionsLabels();
+	const entry = useExtensionItems("settings-page").find((e) => e.item.id === id);
+	const live = useReadable(host?.settings?.wire ?? NO_SETTINGS);
+	const scope = useReadable(host?.scope ?? NOT_LIMITED);
+	const [errors, setErrors] = useState({});
+	const [actions, setActions] = useState({});
+	const schema = entry?.item.schema;
+	const extension = entry?.extension;
+	const values = useMemo(() => {
+		if (!schema || !extension) return {};
+		const own = settingsValues(schema);
+		const stored = live?.values[extension];
+		return stored ? settingsValues({
+			...schema,
+			values: {
+				...schema.values,
+				[extension]: {
+					...schema.values[extension],
+					...stored
+				}
+			}
+		}) : own;
+	}, [
+		schema,
+		extension,
+		live
+	]);
+	const set = host?.settings?.set;
+	const invoke = host?.invoke;
+	const onChange = useCallback((ext, key, value) => {
+		if (!set) return;
+		const at = `${ext}:${key}`;
+		setErrors(({ [at]: _drop, ...rest }) => rest);
+		set(ext, key, value).catch((err) => setErrors((prev) => ({
+			...prev,
+			[at]: labels.extensionError(extensionsErrorOf(err))
+		})));
+	}, [set, labels]);
+	const onRunAction = useCallback((ext, key) => {
+		if (!invoke) return;
+		const at = `${ext}:${key}`;
+		setActions((prev) => ({
+			...prev,
+			[at]: { state: "busy" }
+		}));
+		invoke("setting.action", {
+			pageId: id,
+			key
+		}).then((result) => setActions((prev) => ({
+			...prev,
+			[at]: {
+				state: "done",
+				...result?.message ? { text: result.message } : {}
+			}
+		})), (err) => setActions((prev) => ({
+			...prev,
+			[at]: {
+				state: "error",
+				text: labels.extensionError(extensionsErrorOf(err))
+			}
+		})));
+	}, [
+		invoke,
+		id,
+		labels
+	]);
+	if (!entry) return null;
+	const rows = schema ? /* @__PURE__ */ jsx(SettingsWireForm, {
+		settings: schema,
+		values,
+		onChange,
+		onRunAction: invoke ? onRunAction : void 0,
+		actionStates: actions,
+		errors,
+		scope
+	}) : null;
+	return /* @__PURE__ */ jsx("div", {
+		className,
+		style,
+		"data-extension-settings-page": id,
+		children: entry.item.component ? /* @__PURE__ */ jsx(ExtensionComponent, {
+			extension: entry.extension,
+			component: entry.item.component,
+			fallback: rows
+		}) : rows
+	});
+}
+//#endregion
+export { ExtensionSettingsPage };

package/dist/extensions/ExtensionSettingsPages.d.ts

@@ -0,0 +1,17 @@
+import { CSSProperties } from "react";
+//#region src/extensions/ExtensionSettingsPages.d.ts
+/** Props for {@link ExtensionSettingsPages}. */
+interface ExtensionSettingsPagesProps {
+  /** Extra classes on the root. */
+  className?: string;
+  /** Inline styles on the root. */
+  style?: CSSProperties;
+}
+/**
+ * Draws the extension settings pages and the `settings.section` slot.
+ *
+ * @param props - `className` and `style`.
+ */
+declare function ExtensionSettingsPages({ className, style }: ExtensionSettingsPagesProps): import("react").JSX.Element | null;
+//#endregion
+export { ExtensionSettingsPages, ExtensionSettingsPagesProps };

package/dist/extensions/ExtensionSettingsPages.js

@@ -0,0 +1,33 @@
+import { useExtensionItems } from "./ExtensionsProvider.js";
+import { slotItems } from "./headless/select.js";
+import { ExtensionSlot } from "./ExtensionSlot.js";
+import { ExtensionSettingsPage } from "./ExtensionSettingsPage.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+//#region src/extensions/ExtensionSettingsPages.tsx
+/**
+* Draws the extension settings pages and the `settings.section` slot.
+*
+* @param props - `className` and `style`.
+*/
+function ExtensionSettingsPages({ className, style }) {
+	const pages = useExtensionItems("settings-page");
+	const sectionItems = slotItems(useExtensionItems("slot"), "settings.section");
+	if (pages.length === 0 && sectionItems.length === 0) return null;
+	return /* @__PURE__ */ jsxs("div", {
+		className: ["flex flex-col gap-6", className].filter(Boolean).join(" "),
+		style,
+		children: [pages.map((page) => /* @__PURE__ */ jsxs("section", {
+			className: "flex flex-col gap-2",
+			"aria-label": page.item.title,
+			children: [/* @__PURE__ */ jsx("h3", {
+				className: "zg-section-label m-0",
+				children: page.item.title
+			}), /* @__PURE__ */ jsx(ExtensionSettingsPage, { id: page.item.id })]
+		}, page.key)), /* @__PURE__ */ jsx(ExtensionSlot, {
+			at: "settings.section",
+			className: "flex-wrap"
+		})]
+	});
+}
+//#endregion
+export { ExtensionSettingsPages };

package/dist/extensions/ExtensionSettingsSidebar.d.ts

@@ -0,0 +1,63 @@
+import { WireSettingsPage } from "./headless/wire.js";
+import { SettingsSection } from "../settings/headless/registry.js";
+import { SettingsSearchHit } from "../settings/headless/search.js";
+import { CSSProperties } from "react";
+//#region src/extensions/ExtensionSettingsSidebar.d.ts
+/** Options of {@link useExtensionSettingsSections}. */
+interface ExtensionSettingsSectionsOptions {
+  /** The section the extensions' entries list under. Default: `'extensions'`. */
+  group?: string;
+}
+/** What {@link useExtensionSettingsSections} returns. */
+interface ExtensionSettingsSections {
+  /** One entry per extension without a category, by label, each grouped under `group`. */
+  entries: SettingsSection[];
+  /** Each extension's own group, then its pages under it, in load order. List them after the built-in sections. */
+  categories: SettingsSection[];
+  /** One search entry per page and per row, landing on the row. */
+  search: SettingsSearchHit[];
+}
+/**
+ * The section id of an extension's entry under the Extensions section.
+ *
+ * @param extensionId - The extension's id.
+ */
+declare const extensionSettingsEntryId: (extensionId: string) => string;
+/**
+ * The section id of an extension's own group.
+ *
+ * @param extensionId - The extension's id.
+ */
+declare const extensionSettingsGroupId: (extensionId: string) => string;
+/**
+ * The section id of one page of an extension's own group.
+ *
+ * @param extensionId - The extension's id.
+ * @param pageId - The page's id within that extension.
+ */
+declare const extensionSettingsPageId: (extensionId: string, pageId: string) => string;
+/**
+ * The extensions' settings entries, groups and search entries for `SettingsShell` (see the module comment).
+ * Empty without an extensions host, or one without `settings`.
+ *
+ * @param options - The Extensions section's id.
+ */
+declare function useExtensionSettingsSections(options?: ExtensionSettingsSectionsOptions): ExtensionSettingsSections;
+/** Props for {@link ExtensionSettingsWirePage}. */
+interface ExtensionSettingsWirePageProps {
+  /** The page, as the settings wire lists it. */
+  page: WireSettingsPage;
+  /** Extra classes on the root. */
+  className?: string;
+  /** Inline styles on the root. */
+  style?: CSSProperties;
+}
+/**
+ * One page of an extension's settings: a definition page's rows (its sections, in order), or a
+ * `SettingsPage` item (its component, else its own rows). Draws nothing without an extensions host.
+ *
+ * @param props - The page, `className` and `style`.
+ */
+declare function ExtensionSettingsWirePage({ page, className, style }: ExtensionSettingsWirePageProps): import("react").JSX.Element;
+//#endregion
+export { ExtensionSettingsSections, ExtensionSettingsSectionsOptions, ExtensionSettingsWirePage, ExtensionSettingsWirePageProps, extensionSettingsEntryId, extensionSettingsGroupId, extensionSettingsPageId, useExtensionSettingsSections };

package/dist/extensions/ExtensionSettingsSidebar.js

@@ -0,0 +1,360 @@
+import { Tray } from "../components/Surface.js";
+import { ROW_BUTTON_CLASS, RowText } from "../components/Form.js";
+import { constant, useReadable } from "../chat/headless/store.js";
+import { useExtensionsLabels } from "./useExtensionsLabels.js";
+import { useExtensionsHost } from "./ExtensionsProvider.js";
+import { extensionsErrorOf } from "./headless/host.js";
+import { settingsValues } from "./headless/select.js";
+import { SettingsPanel, SettingsPanelBody, useSettingsSection } from "../settings/section.js";
+import { SettingsWireForm } from "./SettingsWireForm.js";
+import { ExtensionSettingsPage } from "./ExtensionSettingsPage.js";
+import { ExtensionMark as ExtensionMark$1 } from "../onboarding/marks.js";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useCallback, useMemo, useState } from "react";
+import { extensionMark, settingsSearchIndex, settingsSidebar } from "zidane/chat/pure";
+//#region src/extensions/ExtensionSettingsSidebar.tsx
+/**
+* The extensions' settings as entries of the settings nav (`SettingsShell`),
+* built from the settings wire's pages with zidane's `settingsSidebar` and
+* `settingsSearchIndex`:
+*
+*   - every extension with settings gets one entry under the Extensions
+*     section (`group`), drawing its pages one after the other, titled with
+*     its display name (the wire's `extensions`);
+*   - an extension that declares `settings.category` gets a top-level group
+*     of its own instead (the app lists them after its built-in sections), in
+*     load order: the group lists its pages, each page an entry under it;
+*   - a definition page draws its rows (`page.sections[].keys`), a
+*     `SettingsPage` item its component, else its own rows;
+*   - the search covers every row of every page, and lands on it;
+*   - each entry's glyph: an extension's entry, the mark its Extensions row
+*     draws (`extensionMark`: its own icon, else the native catalog's logo
+*     (`mark`) or icon), else its single page's icon, else a letter badge of
+*     its name (`monogram`); a category's head, the category's icon, else the
+*     extension's mark, else a badge of the category's label; a category's
+*     page, its icon, else a badge of its label;
+*   - an extension's entry and its category's head open under its mark (`ExtensionMark`, the one its
+*     Extensions row draws; a category's icon wins) and its description (the wire's `extensions`; an
+*     entry without one, its single page's).
+*
+*   const ext = useExtensionSettingsSections();
+*   <SettingsShell sections={[...builtins, ...ext.entries, ...ext.categories]} extraSearch={ext.search} />
+*
+* Rows write through the host's `settings.set` and actions run through
+* `invoke('setting.action')`; an action above the token's scope
+* (`ExtensionsHost.scope`) shows disabled, with why.
+*/
+const EMPTY = constant(null);
+const NOT_LIMITED = constant(null);
+/** A section's glyph: the first icon given, else a letter badge of `monogram`. */
+function glyph(monogram, ...icons) {
+	const icon = icons.find((candidate) => candidate?.trim());
+	return icon ? { icon } : { monogram };
+}
+/**
+* An extension's glyph, the mark its Extensions row draws (`extensionMark`): its own icon, else the
+* native catalog's logo or icon, else `fallbackIcon` (its single page's), else a letter badge of `label`.
+*/
+function extensionGlyph(id, label, ownIcon, fallbackIcon) {
+	const mark = extensionMark({
+		id,
+		name: label,
+		...ownIcon?.trim() ? { icon: { gui: ownIcon } } : {}
+	});
+	if (mark.kind === "icon") return { icon: mark.gui };
+	if (mark.kind === "brand") return {
+		mark: { brand: mark.brand },
+		monogram: label
+	};
+	return glyph(label, fallbackIcon);
+}
+/**
+* The section id of an extension's entry under the Extensions section.
+*
+* @param extensionId - The extension's id.
+*/
+const extensionSettingsEntryId = (extensionId) => `extension:${extensionId}`;
+/**
+* The section id of an extension's own group.
+*
+* @param extensionId - The extension's id.
+*/
+const extensionSettingsGroupId = (extensionId) => `extension-group:${extensionId}`;
+/**
+* The section id of one page of an extension's own group.
+*
+* @param extensionId - The extension's id.
+* @param pageId - The page's id within that extension.
+*/
+const extensionSettingsPageId = (extensionId, pageId) => `extension-page:${extensionId}:${pageId}`;
+/**
+* Each extension that has pages, in the wire's (load) order, with its display name: the wire's
+* `extensions`, else its implicit page's label.
+*/
+function extensionsOf(wire) {
+	const seen = /* @__PURE__ */ new Map();
+	for (const page of wire.pages ?? []) {
+		const known = seen.get(page.extension);
+		const named = wire.extensions?.[page.extension]?.name ?? (page.implicit ? page.label : void 0);
+		if (!known) seen.set(page.extension, {
+			id: page.extension,
+			wire,
+			...named ? { displayName: named } : {}
+		});
+		else if (named && !known.displayName) known.displayName = named;
+	}
+	return [...seen.values()];
+}
+/**
+* The extensions' settings entries, groups and search entries for `SettingsShell` (see the module comment).
+* Empty without an extensions host, or one without `settings`.
+*
+* @param options - The Extensions section's id.
+*/
+function useExtensionSettingsSections(options = {}) {
+	const { group = "extensions" } = options;
+	const host = useExtensionsHost();
+	const wire = useReadable(host?.settings?.wire ?? EMPTY);
+	return useMemo(() => {
+		if (!wire) return {
+			entries: [],
+			categories: [],
+			search: []
+		};
+		const exts = extensionsOf(wire);
+		const order = new Map(exts.map((e, i) => [e.id, i]));
+		const sidebar = settingsSidebar(exts);
+		const iconOf = (extensionId) => wire.extensions?.[extensionId]?.icon?.gui;
+		const descriptionOf = (extensionId) => wire.extensions?.[extensionId]?.description;
+		const leadOf = (extensionId, label, icon = iconOf(extensionId)) => /* @__PURE__ */ jsx(ExtensionMark$1, { entry: {
+			name: extensionId,
+			label,
+			...icon?.trim() ? { icon: { gui: icon } } : {}
+		} });
+		const sectionOf = /* @__PURE__ */ new Map();
+		const entries = sidebar.extensionsGroup.map((entry) => {
+			const id = extensionSettingsEntryId(entry.extensionId);
+			for (const page of entry.pages) sectionOf.set(`${entry.extensionId}\u0000${page.id}`, id);
+			const only = entry.pages.length === 1 ? entry.pages[0] : void 0;
+			const description = descriptionOf(entry.extensionId) ?? only?.description;
+			return {
+				id,
+				title: entry.label,
+				...extensionGlyph(entry.extensionId, entry.label, iconOf(entry.extensionId), only?.icon?.gui),
+				group,
+				...description ? { description } : {},
+				lead: leadOf(entry.extensionId, entry.label),
+				render: () => /* @__PURE__ */ jsx(ExtensionPagePanel, { children: /* @__PURE__ */ jsx(ExtensionSettingsPages, { pages: entry.pages }) })
+			};
+		});
+		const categories = [...sidebar.categories].sort((a, b) => (order.get(a.extensionId) ?? 0) - (order.get(b.extensionId) ?? 0)).flatMap((cat) => {
+			const groupId = extensionSettingsGroupId(cat.extensionId);
+			const pages = cat.pages.map((page) => {
+				const id = extensionSettingsPageId(cat.extensionId, page.id);
+				sectionOf.set(`${cat.extensionId}\u0000${page.id}`, id);
+				return {
+					id,
+					title: page.label,
+					...glyph(page.label, page.icon?.gui),
+					group: groupId,
+					...page.description ? { description: page.description } : {},
+					render: () => /* @__PURE__ */ jsx(ExtensionPagePanel, { children: /* @__PURE__ */ jsx(ExtensionSettingsWirePage, { page }) })
+				};
+			});
+			const ownIcon = cat.category.icon?.gui?.trim() ? cat.category.icon.gui : void 0;
+			const description = descriptionOf(cat.extensionId);
+			return [{
+				id: groupId,
+				title: cat.category.label,
+				...ownIcon ? { icon: ownIcon } : extensionGlyph(cat.extensionId, cat.category.label, iconOf(cat.extensionId)),
+				...description ? { description } : {},
+				lead: leadOf(cat.extensionId, cat.category.label, ownIcon ?? iconOf(cat.extensionId)),
+				search: [],
+				render: () => /* @__PURE__ */ jsx(ExtensionPagePanel, { children: /* @__PURE__ */ jsx(ExtensionSettingsGroupPages, { pages }) })
+			}, ...pages];
+		});
+		const labelOf = new Map(exts.map((e) => [e.id, e.displayName ?? e.id]));
+		const pageHits = [];
+		for (const ext of exts) for (const page of ext.wire.pages ?? []) {
+			if (page.extension !== ext.id) continue;
+			const section = sectionOf.get(`${ext.id}\u0000${page.id}`);
+			if (section) pageHits.push({
+				section,
+				label: page.implicit ? labelOf.get(ext.id) ?? page.label : page.label,
+				description: page.description ?? "",
+				keywords: [ext.id, labelOf.get(ext.id) ?? ext.id]
+			});
+		}
+		const rowHits = settingsSearchIndex(exts).flatMap((row) => {
+			const section = sectionOf.get(`${row.extensionId}\u0000${row.page}`);
+			if (!section) return [];
+			return [{
+				section,
+				label: row.label,
+				description: row.description ?? "",
+				key: `${row.extensionId}:${row.key}`,
+				keywords: [
+					labelOf.get(row.extensionId) ?? row.extensionId,
+					row.pageLabel,
+					...row.sectionLabel ? [row.sectionLabel] : []
+				]
+			}];
+		});
+		return {
+			entries,
+			categories,
+			search: [...pageHits, ...rowHits]
+		};
+	}, [wire, group]);
+}
+/**
+* One page of an extension's settings: a definition page's rows (its sections, in order), or a
+* `SettingsPage` item (its component, else its own rows). Draws nothing without an extensions host.
+*
+* @param props - The page, `className` and `style`.
+*/
+function ExtensionSettingsWirePage({ page, className, style }) {
+	if (page.kind === "ui") return /* @__PURE__ */ jsx(ExtensionSettingsPage, {
+		id: page.id,
+		className,
+		style
+	});
+	return /* @__PURE__ */ jsx(SchemaPage, {
+		page,
+		className,
+		style
+	});
+}
+/** A definition page's rows over the host's live settings. */
+function SchemaPage({ page, className, style }) {
+	const host = useExtensionsHost();
+	const labels = useExtensionsLabels();
+	const wire = useReadable(host?.settings?.wire ?? EMPTY);
+	const scope = useReadable(host?.scope ?? NOT_LIMITED);
+	const [errors, setErrors] = useState({});
+	const [actions, setActions] = useState({});
+	const parts = useMemo(() => wire ? pageWires(wire, page) : null, [wire, page]);
+	const values = useMemo(() => wire ? settingsValues(wire) : {}, [wire]);
+	const set = host?.settings?.set;
+	const invoke = host?.invoke;
+	const onChange = useCallback((ext, key, value) => {
+		if (!set) return;
+		const at = `${ext}:${key}`;
+		setErrors(({ [at]: _drop, ...rest }) => rest);
+		set(ext, key, value).catch((err) => setErrors((prev) => ({
+			...prev,
+			[at]: labels.extensionError(extensionsErrorOf(err))
+		})));
+	}, [set, labels]);
+	const onRunAction = useCallback((ext, key) => {
+		if (!invoke) return;
+		const at = `${ext}:${key}`;
+		setActions((prev) => ({
+			...prev,
+			[at]: { state: "busy" }
+		}));
+		invoke("setting.action", {
+			pageId: ext,
+			key
+		}).then((result) => setActions((prev) => ({
+			...prev,
+			[at]: {
+				state: "done",
+				...result?.message ? { text: result.message } : {}
+			}
+		})), (err) => setActions((prev) => ({
+			...prev,
+			[at]: {
+				state: "error",
+				text: labels.extensionError(extensionsErrorOf(err))
+			}
+		})));
+	}, [invoke, labels]);
+	if (!parts) return null;
+	const form = (settings, key) => /* @__PURE__ */ jsx(SettingsWireForm, {
+		settings,
+		values,
+		onChange,
+		onRunAction: invoke ? onRunAction : void 0,
+		actionStates: actions,
+		errors,
+		scope
+	}, key);
+	return /* @__PURE__ */ jsx("div", {
+		className: ["space-y-5", className].filter(Boolean).join(" "),
+		style,
+		children: parts.rows.length === 0 ? form(parts.empty) : parts.rows.map((part, i) => form(part, String(i)))
+	});
+}
+/**
+* `page`'s rows as one wire per section that has any, in the page's order (ungrouped first, then its
+* sections as declared), and the empty wire a page without rows draws.
+*/
+function pageWires(wire, page) {
+	const empty = {
+		...wire,
+		schema: {
+			...wire.schema,
+			items: []
+		},
+		actions: []
+	};
+	return {
+		rows: page.sections.flatMap((section) => {
+			const items = wire.schema.items.filter((i) => i.extension === page.extension && section.keys.includes(i.key));
+			const actions = wire.actions.filter((a) => a.extension === page.extension && section.keys.includes(a.key));
+			const order = (key) => section.keys.indexOf(key);
+			items.sort((a, b) => order(a.key) - order(b.key));
+			actions.sort((a, b) => order(a.key) - order(b.key));
+			return items.length + actions.length > 0 ? [{
+				...empty,
+				schema: {
+					...wire.schema,
+					items
+				},
+				actions
+			}] : [];
+		}),
+		empty
+	};
+}
+/**
+* An extension's entry under the Extensions section: its pages, one after the other, each under its
+* title (the implicit page, named after the extension like the entry, untitled).
+*/
+function ExtensionSettingsPages({ pages }) {
+	return /* @__PURE__ */ jsx("div", {
+		className: "space-y-5",
+		children: pages.map((page) => page.implicit ? /* @__PURE__ */ jsx(ExtensionSettingsWirePage, { page }, page.id) : /* @__PURE__ */ jsxs("section", {
+			className: "flex flex-col gap-2",
+			"aria-label": page.label,
+			children: [/* @__PURE__ */ jsx("h3", {
+				className: "zg-section-label m-0",
+				children: page.label
+			}), /* @__PURE__ */ jsx(ExtensionSettingsWirePage, { page })]
+		}, page.id))
+	});
+}
+/** A page's frame, as every built-in section draws it: the screen's reading column, its only scrolling region. */
+function ExtensionPagePanel({ children }) {
+	return /* @__PURE__ */ jsx(SettingsPanel, { children: /* @__PURE__ */ jsx(SettingsPanelBody, { children }) });
+}
+/** An extension's own group: its pages, each opening its entry. */
+function ExtensionSettingsGroupPages({ pages }) {
+	const { select } = useSettingsSection();
+	return /* @__PURE__ */ jsx(Tray, {
+		radius: "lg",
+		className: "p-1 flex flex-col",
+		children: pages.map((page) => /* @__PURE__ */ jsx("button", {
+			type: "button",
+			onClick: () => select(page.id),
+			className: ROW_BUTTON_CLASS,
+			children: /* @__PURE__ */ jsx(RowText, {
+				label: page.title,
+				description: page.description
+			})
+		}, page.id))
+	});
+}
+//#endregion
+export { ExtensionSettingsWirePage, extensionSettingsEntryId, extensionSettingsGroupId, extensionSettingsPageId, useExtensionSettingsSections };

package/dist/extensions/ExtensionSlot.d.ts

@@ -0,0 +1,44 @@
+import { ExtensionItem, SlotName } from "./headless/wire.js";
+import { CSSProperties } from "react";
+//#region src/extensions/ExtensionSlot.d.ts
+/** Props for {@link ExtensionSlot}. */
+interface ExtensionSlotProps {
+  /** The place. */
+  at: SlotName;
+  /** The session the place belongs to: its session-scoped items show too. */
+  sessionId?: string;
+  /**
+   * `transcript.turn-end`: the turn this place follows; only the items naming it show. Absent: the items
+   * naming no turn (the end of the transcript).
+   */
+  turnId?: string;
+  /**
+   * Opens a panel when an item asks for it: the full id (`<extension>/<id>`) or a built-in tab.
+   * Default: focuses that tab in the `WorkspaceProvider` above; without one, items that only open a
+   * panel are not buttons.
+   */
+  onOpenPanel?(panelId: string, item: ExtensionItem<'slot'>): void;
+  /** Extra classes on the root. */
+  className?: string;
+  /** Inline styles on the root. */
+  style?: CSSProperties;
+}
+/**
+ * Draws the extension items of one slot. Draws nothing when there are none.
+ *
+ * @param props - The place, the session, the turn, the panel opener, `className` and `style`.
+ */
+declare function ExtensionSlot({ at, sessionId, turnId, onOpenPanel, className, style }: ExtensionSlotProps): import("react").JSX.Element | null;
+/** Props for {@link ExtensionTitlebar}. */
+type ExtensionTitlebarProps = Omit<ExtensionSlotProps, 'at' | 'turnId'>;
+/**
+ * The extensions' `app.titlebar` items: small chips, lowest `order` first, at most eight per extension.
+ * The desktop app puts it in its title bar right of the window controls and the sidebar toggle, the web
+ * app in its header. Each item takes clicks inside a window drag region (`zg-no-drag`), so the bar
+ * around it still moves the window. Draws nothing when there are none.
+ *
+ * @param props - The session on screen, the panel opener, `className` and `style`.
+ */
+declare function ExtensionTitlebar({ className, ...props }: ExtensionTitlebarProps): import("react").JSX.Element;
+//#endregion
+export { ExtensionSlot, ExtensionSlotProps, ExtensionTitlebar, ExtensionTitlebarProps };