@peripheries/renderer 0.22.0 → 0.23.1

package/dist/react.js

@@ -1,10 +1,10 @@
-import { T as rootCells, _ as failedLabels, a as projectSelections, d as resolveComponent, f as cellAttributes, g as assembleCellProps, h as pageContainerStyle, i as projectLive, m as documentProfile, n as attachViewStateSetters, o as projectViewState, p as cellPlacementStyle, s as shallowEqualBundle, t as attachSelectionSetters, u as resolveScopeId, v as projectCellData } from "./chunks/projection-yvYKzMOS.js";
-import { C as resolveReferences, S as passesConditions, _ as EACH_DEFAULT_AS, s as pageVariables, v as cellContext, w as settled, x as pageContext, y as cellResolutionContext } from "./chunks/query-BPuCJC1C.js";
-import { a as deriveSectionReferences, b as declaredActions, c as nodePrintStyle, d as referencesFor, f as sectionAnchor, g as usesStructureLayout, i as deriveSectionNumbering, l as normalizeStructure, m as structureIssues, o as isSectionNode, p as sortByOrder, r as deriveElementReferences, s as mergeSectionReferences, t as PAGE_DOCUMENT, u as numberingFor } from "./chunks/structure-o9pYoDjD.js";
+import { T as rootCells, _ as failedLabels, a as projectSelections, d as resolveComponent, f as cellAttributes, g as assembleCellProps, h as pageContainerStyle, i as projectLive, m as documentProfile, n as attachViewStateSetters, o as projectViewState, p as cellPlacementStyle, s as shallowEqualBundle, t as attachSelectionSetters, u as resolveScopeId, v as projectCellData } from "./chunks/projection-zhu32_KJ.js";
+import { C as passesConditions, S as pageContext, T as settled, b as cellResolutionContext, c as pageVariables, v as EACH_DEFAULT_AS, w as resolveReferences, y as cellContext } from "./chunks/query-D6xQbTFK.js";
+import { a as deriveSectionReferences, b as declaredActions, c as nodePrintStyle, d as referencesFor, f as sectionAnchor, g as usesStructureLayout, i as deriveSectionNumbering, l as normalizeStructure, m as structureIssues, o as isSectionNode, p as sortByOrder, r as deriveElementReferences, s as mergeSectionReferences, t as PAGE_DOCUMENT, u as numberingFor } from "./chunks/structure-CKBtQHJq.js";
+import { a as goToQuestion, c as missing, f as progress, g as visibleSteps, h as stepKind, i as goTo, l as move, m as settle, n as enterAdvances, o as isReadOnlyStatus, p as questionsOf, s as linkTo, t as defaultMode, u as positionFromLink } from "./chunks/forms-DxA9WzCt.js";
 import { Component, Fragment, Suspense, useCallback, useEffect, useMemo, useRef, useState } from "react";
 import { Fragment as Fragment$1, jsx, jsxs } from "react/jsx-runtime";
 import { useSelector } from "@tanstack/react-store";
-//#region packages/renderer/src/react/cell-states.tsx
 function CellPlaceholder({ state }) {
 	return jsx("div", {
 		className: "cell-placeholder",
@@ -42,8 +42,6 @@ var CellErrorBoundary = class extends Component {
 		}) : this.props.children;
 	}
 };
-//#endregion
-//#region packages/renderer/src/react/use-cell-store.ts
 function useCellStore(cell, scope, api) {
 	const selections = useSelector(api.store, (s) => projectSelections(cell.selections, s, scope), { compare: shallowEqualBundle });
 	const viewState = useSelector(api.store, (s) => projectViewState(cell.viewState, s, scope), { compare: shallowEqualBundle });
@@ -80,8 +78,6 @@ function useCellStore(cell, scope, api) {
 		scope.projectId
 	]);
 }
-//#endregion
-//#region packages/renderer/src/react/use-container-size.ts
 function useContainerSize(ref, enabled) {
 	const [size, setSize] = useState();
 	useEffect(() => {
@@ -106,8 +102,6 @@ function useContainerSize(ref, enabled) {
 	}, [ref, enabled]);
 	return size;
 }
-//#endregion
-//#region packages/renderer/src/react/use-paging.ts
 var LABEL_REF = /@([A-Za-z0-9_$-]+)/g;
 function cellLabels(cell) {
 	const out = new Set(Object.keys(cell.data?.queries ?? {}));
@@ -207,8 +201,6 @@ function usePaging(cell, entries, loadPage) {
 		loadPage
 	]);
 }
-//#endregion
-//#region packages/renderer/src/react/cell-view.tsx
 var REPEAT_SLOT = "item";
 function useSoftNavigation(navigate) {
 	return useCallback((e) => {
@@ -399,7 +391,8 @@ function CellView({ cell, env, nested = false, injectedProps }) {
 			resolvedProps: {
 				...resolvedProps,
 				...slots,
-				...injectedProps
+				...injectedProps,
+				...env.cellProps?.(cell)
 			},
 			children,
 			baseProps: env.baseProps,
@@ -437,8 +430,6 @@ function CellView({ cell, env, nested = false, injectedProps }) {
 		children: body
 	});
 }
-//#endregion
-//#region packages/renderer/src/react/structure-view.tsx
 function useStructureFacts(structure, cells, env, documents) {
 	return useMemo(() => {
 		const numbering = deriveSectionNumbering(structure);
@@ -533,13 +524,11 @@ function StructureView({ nodes, env, facts, level = 0, documentId = PAGE_DOCUMEN
 		}, `${node.sectionId ?? ""}\u0000${node.cellId ?? index}`);
 	}) });
 }
-//#endregion
-//#region packages/renderer/src/react/page-renderer.tsx
 var warn = (d) => console.warn(`[render] ${d.code}${d.cellId ? ` (cell ${d.cellId})` : ""}: ${d.message}`);
 function PageRenderer({ runtime, bundles, params, baseProps, context, viewer, environment }) {
 	const { page, cells } = runtime;
 	const declared = useMemo(() => new Set(runtime.declared), [runtime.declared]);
-	const { core, navigate, store, onDiagnostic = warn, actionsFor, runAction, loadPage, onCellError, onUnresolvedReference, onPropSources, frameProps, retry } = environment;
+	const { core, navigate, store, onDiagnostic = warn, actionsFor, runAction, loadPage, onCellError, onUnresolvedReference, onPropSources, frameProps, cellProps, retry } = environment;
 	useEffect(() => {
 		for (const d of runtime.diagnostics) onDiagnostic(d);
 	}, [runtime.diagnostics, onDiagnostic]);
@@ -566,6 +555,7 @@ function PageRenderer({ runtime, bundles, params, baseProps, context, viewer, en
 			onPropSources,
 			onDiagnostic,
 			frameProps,
+			cellProps,
 			renderEmbed: (cellId) => {
 				const embedded = runtime.embeds?.[cellId];
 				if (!embedded) return jsx(CellNotice, {
@@ -615,6 +605,7 @@ function PageRenderer({ runtime, bundles, params, baseProps, context, viewer, en
 		onPropSources,
 		onDiagnostic,
 		frameProps,
+		cellProps,
 		retry,
 		environment
 	]);
@@ -647,7 +638,346 @@ function PageRenderer({ runtime, bundles, params, baseProps, context, viewer, en
 		}, cell.id))
 	});
 }
-//#endregion
-export { CellErrorBoundary, CellNotice, CellPlaceholder, CellView, PageRenderer, StructureView, cellLabels, useCellStore, useContainerSize, usePaging, useStructureFacts };
-
-//# sourceMappingURL=react.js.map
+var FORM_SAVE_DEBOUNCE_MS = 3e3;
+var answerInputId = (key) => `form-answer-${key.replace(/[^\w-]/g, "_")}`;
+var reviewOf = (notes) => {
+	const last = [...notes ?? []].reverse().find((n) => n.status);
+	return last ? {
+		status: last.status,
+		note: last.text,
+		at: last.at,
+		by: last.by ?? null
+	} : null;
+};
+var answeredOf = (v) => Object.fromEntries(Object.entries(v).map(([k, a]) => [k, a.value]));
+function useFormsRuntime(o) {
+	const [values, setValues] = useState(() => answeredOf(o.initial));
+	const [mode, setMode] = useState(() => o.link?.mode === "question" ? "question" : defaultMode(!!o.phone));
+	const [status, setStatus] = useState(o.status);
+	const [visited, setVisited] = useState(() => new Set(o.visited ?? []));
+	const [save, setSave] = useState({ state: "idle" });
+	const [refusals, setRefusals] = useState({});
+	const [submitTried, setSubmitTried] = useState(false);
+	const focusKey = useRef(null);
+	const steps = useMemo(() => visibleSteps(o.model, values), [o.model, values]);
+	const [at, setAt] = useState(() => positionFromLink(visibleSteps(o.model, answeredOf(o.initial)), mode, o.link ?? {}));
+	const here = settle(steps, mode, at);
+	const readOnly = isReadOnlyStatus(status);
+	const opts = useRef(o);
+	opts.current = o;
+	const expected = useRef(new Map(Object.entries(o.initial).map(([k, a]) => [k, a.stateId ?? null])));
+	const pending = useRef(new Map());
+	const timer = useRef(null);
+	const chain = useRef(Promise.resolve());
+	const words = (code, message) => opts.current.describe?.(code) ?? message ?? code;
+	const flush = useCallback(() => {
+		if (timer.current) clearTimeout(timer.current);
+		timer.current = null;
+		const batch = [...pending.current];
+		pending.current.clear();
+		if (!batch.length) return chain.current;
+		chain.current = chain.current.then(async () => {
+			setSave({ state: "saving" });
+			for (const [key, value] of batch) {
+				const q = opts.current.model.steps.flatMap(questionsOf).find((x) => x.key === key);
+				const r = await opts.current.port.save({
+					key,
+					value,
+					expectedStateId: expected.current.get(key) ?? null,
+					...q?.node ? { node: q.node } : {}
+				}).catch(() => ({
+					ok: false,
+					code: "NETWORK"
+				}));
+				if (!r.ok) {
+					if (!pending.current.has(key)) pending.current.set(key, value);
+					const said = words(r.code, "message" in r ? r.message : void 0);
+					setRefusals((x) => ({
+						...x,
+						[key]: said
+					}));
+					setSave({
+						state: "error",
+						error: said
+					});
+					return;
+				}
+				expected.current.set(key, r.stateId ?? null);
+				setRefusals((x) => key in x ? Object.fromEntries(Object.entries(x).filter(([k]) => k !== key)) : x);
+			}
+			setSave({
+				state: "saved",
+				at: new Date().toISOString()
+			});
+		});
+		return chain.current;
+	}, []);
+	const change = useCallback((key, value) => {
+		if (isReadOnlyStatus(status)) return;
+		setValues((v) => ({
+			...v,
+			[key]: value
+		}));
+		pending.current.set(key, value);
+		if (timer.current) clearTimeout(timer.current);
+		timer.current = setTimeout(() => void flush(), FORM_SAVE_DEBOUNCE_MS);
+	}, [flush, status]);
+	useEffect(() => {
+		const onLeave = () => void flush();
+		window.addEventListener("pagehide", onLeave);
+		return () => {
+			window.removeEventListener("pagehide", onLeave);
+			flush();
+		};
+	}, [flush]);
+	const headingRef = useRef(null);
+	const contentRef = useRef(null);
+	const go = useCallback((to) => {
+		if (!to) return;
+		flush();
+		const stepChanged = to.step !== here?.step;
+		setAt(to);
+		opts.current.onNavigate?.(linkTo(steps, mode, to), { replace: !stepChanged });
+	}, [
+		flush,
+		here?.step,
+		steps,
+		mode
+	]);
+	useEffect(() => {
+		if (!here) return;
+		contentRef.current?.scrollTo?.({ top: 0 });
+		headingRef.current?.focus({ preventScroll: true });
+		if (!visited.has(here.step)) {
+			setVisited((v) => new Set(v).add(here.step));
+			opts.current.port.visit(here.step).catch(() => void 0);
+		}
+	}, [here?.step]);
+	useEffect(() => {
+		const key = focusKey.current;
+		if (!key) return;
+		const el = typeof document === "undefined" ? null : document.getElementById(answerInputId(key));
+		if (el) {
+			focusKey.current = null;
+			el.focus({ preventScroll: false });
+		}
+	});
+	const index = here ? steps.findIndex((s) => s.id === here.step) : -1;
+	const step = steps[index];
+	const isLast = index === steps.length - 1;
+	const nextPos = here ? move(steps, mode, here, 1) : null;
+	const p = progress(steps, values, visited);
+	const allMissing = missing(steps, values);
+	const advance = useCallback(() => go(nextPos), [go, nextPos]);
+	const back = useCallback(() => here && go(move(steps, mode, here, -1)), [
+		go,
+		here,
+		steps,
+		mode
+	]);
+	const runSubmit = useCallback(async () => {
+		setSubmitTried(true);
+		if (o.model.submitRequired === "block" && allMissing.length) return;
+		await flush();
+		const r = await opts.current.port.submit({ missing: allMissing.map((q) => q.key) }).catch(() => ({
+			ok: false,
+			code: "NETWORK"
+		}));
+		if (r.ok) setStatus("submitted");
+		else setSave({
+			state: "error",
+			error: words(r.code, "message" in r ? r.message : void 0)
+		});
+	}, [
+		o.model.submitRequired,
+		allMissing,
+		flush
+	]);
+	const runReopen = useCallback(async () => {
+		const r = await opts.current.port.reopen().catch(() => ({
+			ok: false,
+			code: "NETWORK"
+		}));
+		if (r.ok) setStatus("in_progress");
+		else setSave({
+			state: "error",
+			error: words(r.code, "message" in r ? r.message : void 0)
+		});
+	}, []);
+	const onKeyDown = useCallback((e) => {
+		if (e.key !== "Enter" || e.shiftKey || e.nativeEvent.isComposing || !step) return;
+		if (e.target.tagName === "TEXTAREA") return;
+		if (!enterAdvances(step, mode, here?.question)) return;
+		e.preventDefault();
+		advance();
+	}, [
+		step,
+		mode,
+		here?.question,
+		advance
+	]);
+	const nextStep = nextPos && nextPos.step !== here?.step ? steps.find((s) => s.id === nextPos.step) : null;
+	const stepQuestions = step ? questionsOf(step) : [];
+	const qIndex = mode === "question" && here?.question ? stepQuestions.findIndex((q) => q.key === here.question) : -1;
+	const questionHere = qIndex >= 0 ? {
+		index: qIndex,
+		count: stepQuestions.length,
+		key: stepQuestions[qIndex].key,
+		next: stepQuestions[qIndex + 1] ? { label: stepQuestions[qIndex + 1].label } : null
+	} : null;
+	const passed = new Set(steps.slice(0, Math.max(index, 0)).map((s) => s.id).filter((id) => visited.has(id)));
+	const missingKeys = new Set(allMissing.map((q) => q.key));
+	const answerOf = (q, stepId) => {
+		const port = o.port;
+		return {
+			key: q.key,
+			label: q.label,
+			question: q.definition ?? null,
+			value: values[q.key],
+			change: (v) => change(q.key, v),
+			readOnly,
+			required: q.required,
+			missing: missingKeys.has(q.key) && (submitTried || passed.has(stepId)),
+			refusal: refusals[q.key] ?? null,
+			inputId: answerInputId(q.key),
+			...port.upload ? { upload: async (file) => {
+				if (isReadOnlyStatus(status)) return {
+					ok: false,
+					refusal: words("FORM_NOT_OPEN")
+				};
+				const r = await port.upload({
+					key: q.key,
+					file,
+					...q.node ? { node: q.node } : {}
+				}).catch(() => ({
+					ok: false,
+					code: "NETWORK"
+				}));
+				if (!r.ok) return {
+					ok: false,
+					refusal: words(r.code, "message" in r ? r.message : void 0)
+				};
+				change(q.key, r.answer);
+				await flush();
+				return { ok: true };
+			} } : {},
+			...port.openFile ? { openFile: async () => {
+				const v = values[q.key];
+				if (!v?.file) return null;
+				const r = await port.openFile(v.file).catch(() => null);
+				return r && r.ok ? r.url : null;
+			} } : {}
+		};
+	};
+	const questionAnswer = questionHere && step ? stepQuestions.find((q) => q.key === questionHere.key) : void 0;
+	const stable = useStableSlots(step ? {
+		title: o.model.title,
+		chapter: step.chapter && o.model.chapters.find((c) => c.id === step.chapter) || null,
+		step: {
+			id: step.id,
+			title: step.title,
+			index,
+			count: steps.length,
+			kind: stepKind(step, isLast),
+			...step.label ? { label: step.label } : {}
+		},
+		sections: steps.map((s, i) => ({
+			id: s.id,
+			title: s.title,
+			...s.chapter ? { chapter: s.chapter } : {},
+			kind: stepKind(s, i === steps.length - 1),
+			...s.label ? { label: s.label } : {},
+			...p.perStep[s.id],
+			current: s.id === step.id
+		})),
+		progress: {
+			answered: p.answered,
+			required: p.required,
+			ratio: p.ratio,
+			total: p.total
+		},
+		question: questionHere && questionAnswer ? {
+			...questionHere,
+			answer: answerOf(questionAnswer, step.id)
+		} : questionHere,
+		goToQuestion: (key) => {
+			focusKey.current = key;
+			go(goToQuestion(steps, mode, key));
+		},
+		displayMode: mode,
+		setDisplayMode: (m) => {
+			setMode(m);
+			if (here) setAt(settle(steps, m, here));
+		},
+		goToSection: (id) => go(goTo(steps, mode, id, values)),
+		advance,
+		back,
+		canBack: o.model.allowBack && index > 0,
+		next: nextStep ? { title: nextStep.title } : null,
+		submit: isLast && !readOnly && o.model.submittable !== false ? {
+			label: "Submit",
+			run: () => void runSubmit(),
+			blocked: o.model.submitRequired === "block" && allMissing.length > 0
+		} : null,
+		reopen: status === "submitted" && o.model.submittable !== false ? {
+			label: "Edit answers",
+			run: () => void runReopen()
+		} : null,
+		save,
+		missing: missing(steps, values, step.id).map((q) => ({
+			key: q.key,
+			label: q.label
+		})),
+		chapters: o.model.chapters.map((c) => ({
+			id: c.id,
+			title: c.title
+		})),
+		status,
+		readOnly,
+		review: reviewOf(o.notes)
+	} : null);
+	const cellProps = (cell) => {
+		for (const s of steps) {
+			const item = s.items.find((i) => i.id === cell.id);
+			if (!item) continue;
+			const answers = Object.fromEntries(item.questions.map((q) => [q.key, answerOf(q, s.id)]));
+			const list = Object.values(answers);
+			return {
+				form: stable,
+				answers,
+				...list.length === 1 ? { answer: list[0] } : {}
+			};
+		}
+	};
+	return {
+		slots: stable,
+		cellProps,
+		steps,
+		step: step ?? null,
+		position: here,
+		values,
+		change,
+		flush,
+		readOnly,
+		status,
+		headingRef,
+		contentRef,
+		onKeyDown
+	};
+}
+function useStableSlots(slots) {
+	const latest = useRef(slots);
+	latest.current = slots;
+	const shown = JSON.stringify(slots);
+	return useMemo(() => slots ? bindActions(slots, [], latest) : null, [shown]);
+}
+function bindActions(v, path, latest) {
+	if (typeof v === "function") return (...args) => {
+		const fn = path.reduce((o, k) => o?.[k], latest.current);
+		return typeof fn === "function" ? fn(...args) : void 0;
+	};
+	if (Array.isArray(v)) return v.map((x, i) => bindActions(x, [...path, String(i)], latest));
+	if (v && typeof v === "object") return Object.fromEntries(Object.entries(v).map(([k, x]) => [k, bindActions(x, [...path, k], latest)]));
+	return v;
+}
+export { CellErrorBoundary, CellNotice, CellPlaceholder, CellView, FORM_SAVE_DEBOUNCE_MS, PageRenderer, StructureView, answerInputId, cellLabels, useCellStore, useContainerSize, useFormsRuntime, usePaging, useStructureFacts };

package/dist/runtime.js

@@ -1,5 +1,5 @@
-import { s as runtimeReady } from "./chunks/load-CjPvISzH.js";
-import { a as createStackStore, t as clearAllScopes } from "./chunks/persistence-DCMakM9H.js";
+import { s as runtimeReady } from "./chunks/load-b38vUiZM.js";
+import { a as createStackStore, t as clearAllScopes } from "./chunks/persistence-hurkUUQ0.js";
 import { PINNED_RUNTIMES, READY_GLOBAL, RESOLVE_GLOBAL, RUNTIME_GLOBAL, buildImportMap } from "@peripheries/runtime";
 import * as React from "react";
 import * as JsxRuntime from "react/jsx-runtime";
@@ -8,7 +8,6 @@ import * as ReactDOM from "react-dom";
 import * as ReactDOMClient from "react-dom/client";
 import * as JsxDevRuntime from "react/jsx-dev-runtime";
 import * as zustand from "zustand";
-//#region packages/renderer/src/runtime/boot.ts
 var RUNTIME_BOOT_SCRIPT = `(function(g){if(g.${READY_GLOBAL})return;g.${READY_GLOBAL}=new Promise(function(r){g.${RESOLVE_GLOBAL}=r;});})(globalThis);`;
 function importMapFor(shared = []) {
 	return { imports: buildImportMap(shared).imports };
@@ -17,8 +16,6 @@ function importMapJson(shared = []) {
 	return JSON.stringify(importMapFor(shared)).replace(/</g, "\\u003c");
 }
 var IMPORT_MAP_JSON = importMapJson();
-//#endregion
-//#region packages/renderer/src/runtime/store-export.ts
 var singleton = null;
 function getStackStore() {
 	return singleton ??= createStackStore();
@@ -43,8 +40,6 @@ function buildStoreRuntime() {
 		selectors
 	};
 }
-//#endregion
-//#region packages/renderer/src/runtime/install.ts
 function buildRuntime(extra = {}) {
 	return {
 		react: React,
@@ -68,8 +63,6 @@ function installRuntime(g = globalThis, extra = {}) {
 	g[RESOLVE_GLOBAL]?.();
 	return runtime;
 }
-//#endregion
-//#region packages/renderer/src/runtime/shims.ts
 function shimFileName(specifier) {
 	const base = PINNED_RUNTIMES[specifier].url.split("/").pop();
 	if (!base?.endsWith(".js")) throw new Error(`[runtime] ${specifier}: url is not a .js file`);
@@ -92,7 +85,4 @@ function renderShim(specifier, names, hasDefault) {
 	}
 	return lines.join("\n") + "\n";
 }
-//#endregion
 export { IMPORT_MAP_JSON, RUNTIME_BOOT_SCRIPT, buildRuntime, getStackStore, importMapFor, importMapJson, installRuntime, renderShim, resetStackStore, runtimeReady, selectors, shimFileName, useStackStore };
-
-//# sourceMappingURL=runtime.js.map

package/dist/styles.css

@@ -1,23 +1,17 @@
-/* @peripheries/renderer/styles.css: what the renderer's markup needs (design/renderer.md §2).
-   Import it once per app. Everything is in the `renderer` layer (design/core-and-tokens.md §7.2):
-   above the reset and the tokens, below every bundle and the org's theme. */
+
 
 @layer renderer {
-  /* ── Page cells (design/core.md §3–4) ─────────────────────────────────────
-     The page and every cell are size containers, so layout responds to the
-     space a component actually has, not the viewport. */
+  
   :root {
     --cell-placeholder-bg: var(--color-surface-sunken, #f1f1f1);
     --cell-notice-bg: var(--color-warning-surface, #fff4d6);
     --cell-notice-fg: var(--color-warning, #6b4e00);
   }
-  /* A page reads the theme's body font and ink, so a cell that sets neither still matches it. */
+  
   [data-page-container] { font-family: var(--font-body, system-ui, sans-serif); color: var(--color-text, inherit); }
   [data-page-container] { container: page / inline-size; }
   .cell { container: cell / inline-size; min-width: 0; }
-  /* A child cell sizes to what it holds: inside its parent's flex or grid parts (a Card's header, an
-     Inline) an inline-size container would have no width of its own and collapse to nothing. Its
-     `@container cell` queries read the parent cell's width instead. */
+  
   .cell[data-nested] { container: none; }
   .cell-placeholder { min-height: 6rem; border-radius: 0.5rem; background: var(--cell-placeholder-bg); }
   .cell-placeholder[aria-busy='true'] { animation: cell-pulse 1.5s ease-in-out infinite; }
@@ -25,24 +19,24 @@
   @media (prefers-reduced-motion: reduce) { .cell-placeholder[aria-busy='true'] { animation: none; } }
   .cell-notice { padding: 0.75rem 1rem; border-radius: 0.5rem; background: var(--cell-notice-bg); color: var(--cell-notice-fg); }
 
-  /* Responsive buckets: each fires at or below its width (narrow 480, compact 720, wide 1024). */
+  
   [data-show-when] { display: none; }
   @container page (max-width: 1024px) {
     [data-hide-when='wide'] { display: none; }
     [data-show-when='wide'] { display: revert; }
-    [data-stack-when='wide'] { grid-column: 1 / -1 !important; } /* over the inline span */
+    [data-stack-when='wide'] { grid-column: 1 / -1 !important; } 
     [data-truncate-when='wide'] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   }
   @container page (max-width: 720px) {
     [data-hide-when='compact'] { display: none; }
     [data-show-when='compact'] { display: revert; }
-    [data-stack-when='compact'] { grid-column: 1 / -1 !important; } /* over the inline span */
+    [data-stack-when='compact'] { grid-column: 1 / -1 !important; } 
     [data-truncate-when='compact'] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   }
   @container page (max-width: 480px) {
     [data-hide-when='narrow'] { display: none; }
     [data-show-when='narrow'] { display: revert; }
-    [data-stack-when='narrow'] { grid-column: 1 / -1 !important; } /* over the inline span */
+    [data-stack-when='narrow'] { grid-column: 1 / -1 !important; } 
     [data-truncate-when='narrow'] { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
   }
 
@@ -54,6 +48,6 @@
     }
   }
 
-  /* Document structure: sections span a grid page; inside, content stacks. */
+  
   .structure-section { grid-column: 1 / -1; display: flex; flex-direction: column; gap: inherit; }
 }