smoodly 0.0.29 → 0.0.31

package/README.md

@@ -252,7 +252,7 @@ Implemented:
   is stored as entries, spec 2026-09-07), not only through the generated
   views.
 
-- Admin login: `supabaseAdminAuth` + `gateAdminOp` around the ops seam;
+- Admin login: `supabaseAdminAuth` (from `smoodly/admin`) + `gateAdminOp` around the ops seam;
   `LoginView` + `useAdminSession` in the shell; `createSmoodlyAdmin({ auth })`.
   Env: `smoodlyEnv()` / `createSmoodlyClient()`.
 
@@ -477,6 +477,26 @@ Implemented:
   what (a lock in the lists, a line under the top bar) and announces
   saves so a clean view refreshes and a dirty one freezes early. Schema
   version 2 adds the draft-pointer foreign keys and the channel policies.
+  Only the editor's own edits freeze a view (2026-09-27): two editors
+  opening a fresh page at once both fill its locked hero, and the fill
+  that lands second used to freeze its view under "Your unsaved changes
+  here will be discarded" with nothing changed; now that view loads the
+  other's quietly, on the refusal or the `saved` broadcast. This was the
+  local-only timeout of "the guard alone" (CI's slower sign-in let the
+  first fill land first). Tests: `concurrency.spec.ts` ("two editors
+  opening a new page at once", with the channel cut and on; the fill
+  save is held so the race is deterministic).
+- ActionMenu near the screen's edge (2026-09-27): a row menu close to
+  the bottom opened below the viewport, where a fixed element cannot be
+  scrolled to, and the scroll event from bringing a row into view
+  arrived a frame after the click and closed the menu it had opened.
+  It now opens upward by the Combobox's `opensUp`, and closes only on a
+  scroll that moved its button. This was the Members test's flake (about
+  1 in 8 runs; the list was long because every concurrency run left
+  its second member behind — `concurrency.spec.ts` removes it in
+  `afterAll` since 2026-09-28, and `members.spec.ts` its invited Auth
+  user, which Remove member leaves in place). Tests: `admin-action-menu`, `members.spec.ts` (a
+  late scroll event, a real move, a row at the bottom of the screen).
 - The security pass over the database boundary (spec 2026-09-26 security
   pass): the presence channel admits a signed-in member of the topic's
   space (`smoodly_presence_member()`, the socket carries the session
@@ -522,6 +542,50 @@ Implemented:
   `admin-unknown-node`, the store contracts (`scanTrees`,
   `scanEntries`, the pinning tests), `entry-store.supabase` (the
   localized fix across two schemas), `examples/site/e2e/health.spec.ts`.
+- Shadowed-page detector (spec 2026-09-27 shadowed-page detector): a
+  canvas whose bridge never speaks within 4 s of the frame's load is
+  diagnosed — the editor fetches the canvas URL once and
+  `admin/editor/canvas-diagnosis.ts` names another route, a route file
+  that drops `searchParams`, a crash, a 404, a redirect, a refusal, a
+  framing header or a script error, as an editor sentence and a "For
+  your developer" line (`editor/CanvasWarning.tsx`, in place of
+  "Selection unavailable"). The renderer writes
+  `<meta name="smoodly-draft">` in draft mode only. No reserved-path
+  list (OQ 23 closed). Tests: `admin-canvas-diagnosis`,
+  `admin-canvas-warning`, `next-page-renderer` (the marker),
+  `admin-bridge`, `examples/site/e2e/editor.spec.ts`.
+- cacheComponents unsupported (spec 2026-09-27 cache components): under
+  Next's Cache Components the catch-all is served from a fallback shell
+  that commits 200, so 404s and 308s are lost; the renderer warns once
+  per renderer when `process.env.__NEXT_CACHE_COMPONENTS` is on, and the
+  Next.js guide says why. OQ 19 closed. Tests: `next-page-renderer`
+  ("cacheComponents").
+- Section guard (spec 2026-09-27 section guard): `Zone` calls a
+  plain-function section view inside try/catch (an async one through
+  `SectionGuard`, in place), so a throw in a section's own code leaves it
+  out and the page renders — nothing live, a placeholder in the canvas
+  and under `next dev`; the adapter's `rethrow` (Next: `unstable_rethrow`)
+  lets control flow through. In editor mode the Next adapter also wraps
+  each section in `<Suspense>` + the client `CanvasBoundary`, the bridge
+  reports crashed sections, the page editor lists them, and Publish asks
+  first. A healthy page's HTML is unchanged. Tests: `section-crash`,
+  `render` ("the section guard"), `next-canvas-boundary`,
+  `next-page-renderer`, `admin-crash-copy`, `admin-canvas-diagnosis`,
+  `examples/site/e2e/sections.spec.ts`.
+- No admin on the live site (2026-09-27): `supabaseAdminAuth` moved from
+  `smoodly/admin/next` to `smoodly/admin` (its `AuthConfig` type too).
+  `smoodly/server.ts`, which every site route imports, took it from the
+  `admin/next` barrel beside `createSmoodlyAdmin`, so the admin shell was
+  a client module of every site route. Confirmed by removing the import
+  and rebuilding; the starter's home page, production build, went from
+  1,616,602 to 628,849 bytes of JavaScript (8 chunks either way, the
+  1,050,601-byte chunk holding `AdminApp` gone). The rest of the page's
+  JavaScript is the site's own: of a 62,848-byte chunk, next-intl is
+  ~34 KB, `next/link` and `next/image` most of the rest, and the
+  editor-only modules ~3.4 KB (`EditorBridge` ~2.5 KB, the canvas net
+  ~0.9 KB) — too little to lazy-load. Tests: `site-entries` (every entry
+  but `smoodly/admin/next` reaches no client module except those two),
+  `examples/site/e2e/site-bundle.spec.ts` (CI only: production chunks).
 
 Not yet: canvas drag-and-drop (list fields, the outline, manual
 collections and the pages tree drag since 2026-09-09 — spec
@@ -549,6 +613,16 @@ after both are on the registry. From the repo root:
 `prepublishOnly` rebuilds each package. The Claude Code skill
 `.claude/skills/releasing-smoodly` carries the same order with its checks.
 
+## Follow-ups (logged 2026-09-27, shadowed-page detector spec)
+
+- A section's crash on a live page after data changed outside the page
+  editor (an entry or a global item edited in its form): the guard
+  catches a throw in the section's own view, but one inside a component
+  it renders, in a richtext element's view or in a `'use client'`
+  section still fails the page, and no canvas previews those forms.
+  Catching it live needs `<Suspense>` (spec 2026-09-27 section guard,
+  measured). Revisit if a real site hits it.
+
 ## Follow-ups (logged 2026-09-27, editor safety spec)
 
 - Scan paging: `health.scan` makes one bulk read per table (versions by
@@ -1329,14 +1403,6 @@ the toolbar instead of pushing the content.
   the vocabulary once instead of per field, dedupe there.
 - The entry form's column is narrower than the inspector, so the default
   toolbar wraps to two rows there; the inspector shows it on one.
-- The example site's production bundle loads one shared chunk (~750 KB)
-  on every site page holding the package's admin client modules — the
-  shell, the Supabase client and now the TipTap widget — because
-  `next/page-renderer.tsx` imports the editor bridge from
-  `admin/next/bridge.tsx` and Turbopack bundles the package's client
-  modules together. Measured on the 2026-09-08 build; whether the shell
-  was already there before the widget is unverified. The fix is to give
-  the bridge its own entry outside the admin tree and re-measure.
 
 ## Follow-ups (logged 2026-09-07, starter)
 

package/dist/admin/editor/CanvasWarning.d.ts

@@ -0,0 +1,5 @@
+import { type CanvasCause } from "./canvas-diagnosis.ts";
+export declare function CanvasWarning({ cause, path }: {
+    cause: CanvasCause;
+    path: string;
+}): import("react").JSX.Element;

package/dist/admin/editor/CanvasWarning.js

@@ -0,0 +1,10 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The warning above a canvas Smoodly could not show (spec 2026-09-27
+// shadowed-page detector §5): the editor's sentence, then the line for
+// whoever fixes it, so the editor can forward it as is.
+import { Banner } from "../ui/primitives.js";
+import { canvasMessage } from "./canvas-diagnosis.js";
+export function CanvasWarning({ cause, path }) {
+    const { editor, developer } = canvasMessage(cause, path);
+    return (_jsxs(Banner, { tone: "warn", children: [_jsx("p", { children: editor }), _jsxs("p", { children: [_jsx("strong", { children: "For your developer:" }), " ", developer] })] }));
+}

package/dist/admin/editor/EditorView.js

@@ -50,6 +50,9 @@ import { GlobalInspector } from "./GlobalInspector.js";
 import { localeFromUrl } from "./locale-url.js";
 import { plusButtonsFor } from "./overlay-geometry.js";
 import { useCanvasBridge } from "./useCanvasBridge.js";
+import { useCanvasDiagnosis } from "./useCanvasDiagnosis.js";
+import { CanvasWarning } from "./CanvasWarning.js";
+import { crashLines, publishCrashConfirm } from "./crash-copy.js";
 import { useInlineSession } from "./useInlineSession.js";
 import { usePageLocale } from "./usePageLocale.js";
 import { useGlobalEdit } from "./useGlobalEdit.js";
@@ -118,6 +121,10 @@ export function EditorView({ ops, registry, id }) {
     /** A global edit since the item's last save ack; and any global edit on this canvas yet. */
     const [globalDirty, setGlobalDirty] = useState(false);
     const [globalTouched, setGlobalTouched] = useState(false);
+    /** The editor changed something on this canvas. The locked-zone fill on load is not such a change: when
+     *  another editor's fill landed first, the refusal and their saved broadcast load their version quietly. */
+    const editedRef = useRef(false);
+    editedRef.current = touched || globalTouched;
     // Global item name → row id, loaded once per editor mount: the picker's
     // Global group and a bound locked zone need the id to place a node.
     const [globalIds, setGlobalIds] = useState(null);
@@ -149,8 +156,8 @@ export function EditorView({ ops, registry, id }) {
                 setDirty(false);
                 presence?.announce(pageTarget(target), r.data.draft?.savedAt ?? null);
             }
-            else if (isStale(r))
-                setStale(staleInfoOf(r));
+            else if (isStale(r) && editedRef.current)
+                setStale(staleInfoOf(r)); // untouched: the effect below reloads quietly
             return r;
         },
         onSaved: () => inlineRef.current?.onSaved(),
@@ -188,7 +195,7 @@ export function EditorView({ ops, registry, id }) {
     // Canvas-originated selection: the node is under the cursor already, so
     // this path deliberately skips the scroll every other selection does.
     // (`onCanvasSelect` is declared further down; the handler runs at event time.)
-    const { rects, emptyZones, fields: fieldRects, docH, geometry, postToCanvas } = useCanvasBridge({
+    const { rects, emptyZones, fields: fieldRects, docH, geometry, postToCanvas, onFrameLoad, crashed } = useCanvasBridge({
         iframeRef, iframeSrc,
         onSelect: (id, path, x, y) => onCanvasSelect(id, path, x, y),
         onHover: (id, path) => {
@@ -197,6 +204,8 @@ export function EditorView({ ops, registry, id }) {
         },
         onRendered: () => inlineRef.current?.onRendered(),
     });
+    // A canvas the bridge never spoke from is diagnosed and named (spec 2026-09-27 shadowed-page detector).
+    const diagnosis = useCanvasDiagnosis(iframeSrc, geometry);
     // ── load: draft mode FIRST, then the record; only then point the iframe
     // at the site route (an iframe loaded before the cookie exists would
     // render the published tree).
@@ -334,6 +343,15 @@ export function EditorView({ ops, registry, id }) {
         const name = globalNameOf(id);
         return name ? registryRef.current.globals.find((s) => s.name === name) ?? null : null;
     }, [globalOf]);
+    // The crashed sections' banner lines (spec 2026-09-27 section guard §6): the section's title from the
+    // registry, a placed global's item title, the node type when the registry has no name for it.
+    const crashTitleOf = (id) => {
+        const node = treeRef.current ? findNode(treeRef.current, id) : null;
+        if (!node)
+            return "Section";
+        return globalItemOf(id)?.title ?? sectionOf(node.type)?.title ?? node.type;
+    };
+    const crashedLines = crashLines(crashed, crashTitleOf);
     // ── ref fields inside sections: same option loading as EntryForm ──────
     const refTargets = useMemo(() => {
         const out = {};
@@ -398,16 +416,26 @@ export function EditorView({ ops, registry, id }) {
     }, [globalEdit.stale]);
     /** Load their version (§4): drop the frozen state; the load effect resets the tree, the globals and the flags. */
     const loadTheirs = () => { setStale(null); reset(); setReloadKey((k) => k + 1); };
-    // Someone else saved this page (§5): clean → their version silently; unsaved edits anywhere → the freeze at once.
+    /** Their version without the freeze: for a view with nothing of the editor's own to lose. */
+    const loadTheirsQuietly = useCallback(() => { reset(); keepSelectionRef.current = true; setReloadKey((k) => k + 1); }, [reset]);
+    // A refused save the editor never made — the locked-zone fill, when another editor's fill landed first.
+    // Decided by editedRef, not by `stale`: the refusal's setStale and the autosave's state can render apart.
+    useEffect(() => {
+        if (saveState === "stale" && !editedRef.current)
+            loadTheirsQuietly();
+    }, [saveState, loadTheirsQuietly]);
+    // Someone else saved this page (§5): clean or untouched → their version silently; the editor's own unsaved edits → the freeze at once.
     useSavedElsewhere(target, (event) => {
         if (stale)
             return;
-        if (dirty || globalDirty || saveState !== "saved" || globalEdit.saveState !== "saved")
-            setStale({ by: event.email, at: Date.now() });
-        else {
+        if (!(dirty || globalDirty || saveState !== "saved" || globalEdit.saveState !== "saved")) {
             keepSelectionRef.current = true;
             setReloadKey((k) => k + 1);
         }
+        else if (editedRef.current)
+            setStale({ by: event.email, at: Date.now() });
+        else
+            loadTheirsQuietly(); // only the fill is pending: drop it
     });
     // Selecting from the outline must reveal the block. The canvas column is
     // the scroller now (the iframe has no scrollbar of its own — it is sized to
@@ -512,12 +540,16 @@ export function EditorView({ ops, registry, id }) {
             return;
         const template = registryRef.current.pages.find((p) => p.name === record.template);
         const filled = fillLockedZones(tree, template?.zones ?? {}, registryRef.current.sections, globalIds);
-        if (filled !== tree)
-            mutate(() => filled);
+        // Saved like the fill on load, and like it not an edit of the editor's (editedRef).
+        if (filled !== tree) {
+            setTree(filled);
+            treeRef.current = filled;
+            mark();
+        }
         // `tree` is deliberately not a dependency: this runs when the ids land
         // or a new draft loads, not on every keystroke.
         // eslint-disable-next-line react-hooks/exhaustive-deps
-    }, [globalIds, record, mutate, tree === null]);
+    }, [globalIds, record, mark, tree === null]);
     // ── tree gestures ────────────────────────────────────────────────────
     const nodesIn = useCallback((zone) => tree?.zones[zone] ?? [], [tree]);
     const zoneCanTake = useCallback((zone) => canInsert(policyOf(zone), nodesIn(zone).length), [policyOf, nodesIn]);
@@ -602,6 +634,9 @@ export function EditorView({ ops, registry, id }) {
     const doPatchPage = (ns, key, value) => mutate((t) => patchPage(t, ns, key, value));
     // ── publish ──────────────────────────────────────────────────────────
     const doPublish = async () => {
+        // A section the preview shows as crashed (spec 2026-09-27 section guard §6): ask before it goes live.
+        if (crashedLines.length > 0 && !(await confirm(publishCrashConfirm(crashedLines))))
+            return;
         setBanner(null);
         setPageBusy("publish");
         // Never publish behind a pending debounce.
@@ -856,8 +891,8 @@ export function EditorView({ ops, registry, id }) {
                                 trailing: registry.locales.supported.length > 1 && (_jsx(LocaleSwitcher, { registry: registry, present: record ? registry.locales.supported.filter((l) => record.locales[l]) : [locale], parentLocales: parentLocales, value: locale, adding: adding, onSwitch: (l) => { void switchLocale(l); }, onAdd: (l) => { void doAddLocale(l); } })),
                             },
                             { label },
-                        ] }) }), right: _jsxs(_Fragment, { children: [(touched || saveState === "error") && _jsx(SaveIndicator, { state: saveState, pending: dirty }), ready && (_jsx(LinkButton, { icon: true, href: siteUrl, target: "_blank", rel: "noreferrer", "aria-label": "View live", title: "View live \u2014 opens the site route. While the admin's draft-mode cookie is on, this shows the DRAFT \u2014 open it in a private window to see what visitors see.", children: _jsx(Eye, { size: 16, strokeWidth: 1.5, "aria-hidden": "true" }) })), _jsx(PublishControl, { status: record?.locales[locale] ? localeStatusOf(record.locales[locale]) : null, pending: dirty || saveState !== "saved", busy: pageBusy, flash: published, onPublish: () => { void doPublish(); }, onDiscard: () => { void doDiscard(); }, onUnpublish: () => { void doUnpublish(); }, onHistory: () => { void doHistory(); } })] }) }), target && _jsx(PresenceLine, { names: editorsOf(others, target), noun: "page" }), stale && _jsx(StaleBanner, { info: stale, onReload: loadTheirs }), _jsx(DriftNotice, { draft: findings, live: liveFindings }), history && record?.locales[locale] && (_jsx(HistoryModal, { rows: history, draftId: record.locales[locale].draftVersionId, onClose: () => setHistory(null), onRestore: doRestore, render: (versionId) => _jsx("iframe", { className: "sm-history__frame", title: "Version preview", src: withVersionParam(siteUrl, versionId) }) })), _jsxs("div", { className: "sm-editor", inert: stale ? true : undefined, children: [_jsxs("div", { className: "sm-canvas", children: [(banner || geometry === "missing") && (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8, padding: "0 20px 10px" }, children: [banner && (_jsxs(BannerBox, { tone: banner.fields && banner.fields.length > 0 ? "warn" : "error", onDismiss: () => setBanner(null), children: [_jsx("p", { children: banner.text }), _jsx(FieldErrorList, { fields: banner.fields ?? [] })] })), geometry === "missing" && (_jsx(BannerBox, { tone: "warn", children: "Selection unavailable \u2014 the page didn't report geometry. The outline still works." }))] })), _jsx("div", { className: "sm-canvas__scroll", ref: scrollerRef, onClick: (e) => { if (e.target === e.currentTarget)
-                                    setSelectedId(null); }, children: _jsxs("div", { className: "sm-page", style: { overflow: "hidden" }, children: [iframeSrc ? (_jsx("iframe", { ref: iframeRef, src: iframeSrc, title: "Page canvas", style: { width: "100%", height: docH, border: 0, display: "block" } })) : (_jsx("div", { className: "sm-canvas__loading", children: "Loading canvas\u2026" })), _jsx(CanvasOverlay, { emptyZones: emptyZones, hoverRect: hoverRect, hoverGlobal: hoverGlobal, selection: selection, fieldHover: fieldHover, editing: editing, plusButtons: plusButtons, onPlus: (p, x, y) => setPicker({ zone: p.zone, index: p.index, x: x - 150, y: y + 12 }), onMove: doMove, onDuplicate: doDuplicate, onRemove: doRemove }), inline.richtext && (() => {
+                        ] }) }), right: _jsxs(_Fragment, { children: [(touched || saveState === "error") && _jsx(SaveIndicator, { state: saveState, pending: dirty }), ready && (_jsx(LinkButton, { icon: true, href: siteUrl, target: "_blank", rel: "noreferrer", "aria-label": "View live", title: "View live \u2014 opens the site route. While the admin's draft-mode cookie is on, this shows the DRAFT \u2014 open it in a private window to see what visitors see.", children: _jsx(Eye, { size: 16, strokeWidth: 1.5, "aria-hidden": "true" }) })), _jsx(PublishControl, { status: record?.locales[locale] ? localeStatusOf(record.locales[locale]) : null, pending: dirty || saveState !== "saved", busy: pageBusy, flash: published, onPublish: () => { void doPublish(); }, onDiscard: () => { void doDiscard(); }, onUnpublish: () => { void doUnpublish(); }, onHistory: () => { void doHistory(); } })] }) }), target && _jsx(PresenceLine, { names: editorsOf(others, target), noun: "page" }), stale && _jsx(StaleBanner, { info: stale, onReload: loadTheirs }), _jsx(DriftNotice, { draft: findings, live: liveFindings }), history && record?.locales[locale] && (_jsx(HistoryModal, { rows: history, draftId: record.locales[locale].draftVersionId, onClose: () => setHistory(null), onRestore: doRestore, render: (versionId) => _jsx("iframe", { className: "sm-history__frame", title: "Version preview", src: withVersionParam(siteUrl, versionId) }) })), _jsxs("div", { className: "sm-editor", inert: stale ? true : undefined, children: [_jsxs("div", { className: "sm-canvas", children: [(banner || diagnosis || crashedLines.length > 0) && (_jsxs("div", { style: { display: "flex", flexDirection: "column", gap: 8, padding: "0 20px 10px" }, children: [banner && (_jsxs(BannerBox, { tone: banner.fields && banner.fields.length > 0 ? "warn" : "error", onDismiss: () => setBanner(null), children: [_jsx("p", { children: banner.text }), _jsx(FieldErrorList, { fields: banner.fields ?? [] })] })), diagnosis && _jsx(CanvasWarning, { cause: diagnosis.cause, path: diagnosis.path }), crashedLines.length > 0 && (_jsx(BannerBox, { tone: "warn", children: crashedLines.map((line, i) => _jsx("p", { children: line }, i)) }))] })), _jsx("div", { className: "sm-canvas__scroll", ref: scrollerRef, onClick: (e) => { if (e.target === e.currentTarget)
+                                    setSelectedId(null); }, children: _jsxs("div", { className: "sm-page", style: { overflow: "hidden" }, children: [iframeSrc ? (_jsx("iframe", { ref: iframeRef, src: iframeSrc, title: "Page canvas", onLoad: onFrameLoad, style: { width: "100%", height: docH, border: 0, display: "block" } })) : (_jsx("div", { className: "sm-canvas__loading", children: "Loading canvas\u2026" })), _jsx(CanvasOverlay, { emptyZones: emptyZones, hoverRect: hoverRect, hoverGlobal: hoverGlobal, selection: selection, fieldHover: fieldHover, editing: editing, plusButtons: plusButtons, onPlus: (p, x, y) => setPicker({ zone: p.zone, index: p.index, x: x - 150, y: y + 12 }), onMove: doMove, onDuplicate: doDuplicate, onRemove: doRemove }), inline.richtext && (() => {
                                             const { session } = inline.richtext;
                                             const item = globalItemOf(session.node);
                                             const node = !item && tree ? findNode(tree, session.node) : null;

package/dist/admin/editor/canvas-diagnosis.d.ts

@@ -0,0 +1,49 @@
+/** The meta Smoodly's page renderer writes in draft mode (§3). */
+export declare const DRAFT_META_NAME = "smoodly-draft";
+/** The attribute on the <style> the editor bridge server-renders. */
+export declare const BRIDGE_ATTR = "data-smoodly-bridge";
+export type CanvasProbe = {
+    kind: "failed";
+} | {
+    kind: "response";
+    requested: string;
+    url: string;
+    status: number;
+    redirected: boolean;
+    html: string;
+    frameOptions: string | null;
+    csp: string | null;
+};
+export type CanvasCause = {
+    kind: "unreachable";
+} | {
+    kind: "redirect";
+    to: string;
+} | {
+    kind: "notFound";
+} | {
+    kind: "crashed";
+    status: number;
+} | {
+    kind: "refused";
+    status: number;
+} | {
+    kind: "shadowed";
+} | {
+    kind: "noSearchParams";
+} | {
+    kind: "framing";
+    header: string;
+    value: string;
+} | {
+    kind: "script";
+};
+/** Read a fetch Response into a probe. A constructed Response has no url; the requested one stands in. */
+export declare function probeOf(requested: string, res: Response): Promise<CanvasProbe>;
+/** The first matching cause, in the spec's order (§4). */
+export declare function diagnoseCanvas(probe: CanvasProbe): CanvasCause;
+/** The warning's two lines for a cause (§5, verbatim). */
+export declare function canvasMessage(cause: CanvasCause, path: string): {
+    editor: string;
+    developer: string;
+};

package/dist/admin/editor/canvas-diagnosis.js

@@ -0,0 +1,106 @@
+// Why the page editor's canvas stayed silent (spec 2026-09-27
+// shadowed-page detector §3–§5). When the bridge never speaks, the editor
+// fetches the canvas URL once; this module names the cause from the
+// response and words it twice — a sentence for the editor, a line for
+// whoever fixes it. Pure: no React, no store.
+/** The meta Smoodly's page renderer writes in draft mode (§3). */
+export const DRAFT_META_NAME = "smoodly-draft";
+/** The attribute on the <style> the editor bridge server-renders. */
+export const BRIDGE_ATTR = "data-smoodly-bridge";
+/** Read a fetch Response into a probe. A constructed Response has no url; the requested one stands in. */
+export async function probeOf(requested, res) {
+    return {
+        kind: "response", requested, url: res.url || requested, status: res.status, redirected: res.redirected,
+        html: await res.text(),
+        frameOptions: res.headers.get("x-frame-options"),
+        csp: res.headers.get("content-security-policy"),
+    };
+}
+/** The first matching cause, in the spec's order (§4). */
+export function diagnoseCanvas(probe) {
+    if (probe.kind === "failed")
+        return { kind: "unreachable" };
+    if (probe.redirected)
+        return { kind: "redirect", to: redirectTarget(probe.url, probe.requested) };
+    if (probe.status === 404)
+        return { kind: "notFound" };
+    if (probe.status >= 500)
+        return { kind: "crashed", status: probe.status };
+    if (probe.status < 200 || probe.status > 299)
+        return { kind: "refused", status: probe.status };
+    if (!probe.html.includes(`name="${DRAFT_META_NAME}"`))
+        return { kind: "shadowed" };
+    if (!probe.html.includes(`${BRIDGE_ATTR}=`))
+        return { kind: "noSearchParams" };
+    const framing = framingHeader(probe.frameOptions, probe.csp, new URL(probe.requested).origin);
+    if (framing)
+        return { kind: "framing", ...framing };
+    return { kind: "script" };
+}
+/** The redirect's end as a visitor would read it: path + search without the editor parameter, the full URL off-origin. */
+function redirectTarget(url, requested) {
+    const u = new URL(url);
+    u.searchParams.delete("smoodly-editor");
+    return u.origin === new URL(requested).origin ? u.pathname + u.search : u.href;
+}
+/** The header that keeps the canvas iframe out, if any: X-Frame-Options DENY, or a frame-ancestors without the site's own origin. */
+function framingHeader(frameOptions, csp, origin) {
+    if (frameOptions?.trim().toLowerCase() === "deny")
+        return { header: "X-Frame-Options", value: frameOptions };
+    const directive = csp?.split(";").map((d) => d.trim()).find((d) => /^frame-ancestors(\s|$)/i.test(d));
+    if (!directive)
+        return null;
+    const sources = directive.split(/\s+/).slice(1);
+    const allows = sources.some((s) => s.toLowerCase() === "'self'" || s === "*" || s.replace(/\/$/, "") === origin);
+    return allows ? null : { header: "Content-Security-Policy", value: directive };
+}
+/** The warning's two lines for a cause (§5, verbatim). */
+export function canvasMessage(cause, path) {
+    switch (cause.kind) {
+        case "shadowed":
+            return {
+                editor: `This page can't be shown here — another route in the site's code answers ${path}.`,
+                developer: `A route other than Smoodly's catch-all answers ${path} (the response has no Smoodly draft marker). Rename the page, or move or remove that route.`,
+            };
+        case "noSearchParams":
+            return {
+                editor: "This page can't be shown in the editor — its route is missing a setting.",
+                developer: `Smoodly rendered ${path} without the editor bridge. The route file must pass searchParams: renderSmoodlyPath(path, { searchParams }).`,
+            };
+        case "crashed":
+            return {
+                editor: "This page failed to render.",
+                developer: `${path} answered ${cause.status}. The server log has the error — often the page shape, or a component inside a section, throwing.`,
+            };
+        case "notFound":
+            return {
+                editor: `Nothing on the site answers ${path}.`,
+                developer: `${path} answered 404. Check that the locale is in the app's routing and that the catch-all route file is in place.`,
+            };
+        case "redirect":
+            return {
+                editor: `${path} sends visitors to another address, so this page can't be shown.`,
+                developer: `${path} redirects to ${cause.to}. Check middleware and the i18n routing.`,
+            };
+        case "refused":
+            return {
+                editor: `The site refused to show ${path}.`,
+                developer: `${path} answered ${cause.status}. Middleware or the host refused the request; the draft-mode cookie must reach the page.`,
+            };
+        case "framing":
+            return {
+                editor: "The site doesn't allow its pages to be shown inside the editor.",
+                developer: `${path} sends ${cause.header}: ${cause.value}, which blocks the canvas iframe. Allow the site's own origin (SAMEORIGIN, frame-ancestors 'self').`,
+            };
+        case "script":
+            return {
+                editor: "The page loaded but didn't connect to the editor.",
+                developer: `${path} rendered with the editor bridge, but its script never reached the editor. Look for an error in the canvas's browser console.`,
+            };
+        case "unreachable":
+            return {
+                editor: "The site didn't answer.",
+                developer: `The request for ${path} failed before any response — is the site running? A redirect to another origin fails this way too.`,
+            };
+    }
+}

package/dist/admin/editor/crash-copy.d.ts

@@ -0,0 +1,7 @@
+import type { CrashedSection } from "../../marks.ts";
+export declare function crashLines(crashed: CrashedSection[], titleOf: (id: string) => string): string[];
+export declare function publishCrashConfirm(lines: string[]): {
+    title: string;
+    body: string;
+    confirmLabel: string;
+};

package/dist/admin/editor/crash-copy.js

@@ -0,0 +1,13 @@
+export function crashLines(crashed, titleOf) {
+    return crashed.map(({ id, live }) => live === "left-out"
+        ? `“${titleOf(id)}” failed to render in the preview — on the live site it is left out.`
+        : `“${titleOf(id)}” failed to render in the preview — on the live site the whole page would fail to load.`);
+}
+export function publishCrashConfirm(lines) {
+    const n = lines.length;
+    return {
+        title: n === 1 ? "Publish with 1 broken section?" : `Publish with ${n} broken sections?`,
+        body: [...lines, `Fix or remove ${n === 1 ? "it" : "them"} in the editor, or publish anyway.`].join(" "),
+        confirmLabel: "Publish anyway",
+    };
+}

package/dist/admin/editor/protocol.d.ts

@@ -1,3 +1,4 @@
+import type { CrashedSection } from "../../marks.ts";
 export type BridgeRect = {
     id: string;
     x: number;
@@ -28,6 +29,7 @@ export type FromBridge = {
     emptyZones: ZoneRect[];
     fields: FieldRect[];
     docH: number;
+    crashed: CrashedSection[];
 }
 /** A click: the node under it, the marked field under it, and where (iframe client coordinates). */
  | {

package/dist/admin/editor/useCanvasBridge.d.ts

@@ -1,5 +1,6 @@
 import { type RefObject } from "react";
 import type { BridgeRect, FieldRect, ToBridge, ZoneRect } from "./protocol.ts";
+import type { CrashedSection } from "../../marks.ts";
 export type Geometry = "waiting" | "ok" | "missing";
 export declare function useCanvasBridge({ iframeRef, iframeSrc, onSelect, onHover, onRendered }: {
     iframeRef: RefObject<HTMLIFrameElement | null>;
@@ -16,4 +17,6 @@ export declare function useCanvasBridge({ iframeRef, iframeSrc, onSelect, onHove
     docH: number;
     geometry: Geometry;
     postToCanvas: (m: ToBridge) => void;
+    onFrameLoad: () => void;
+    crashed: CrashedSection[];
 };

package/dist/admin/editor/useCanvasBridge.js

@@ -1,23 +1,28 @@
 // The admin side of the editor⇄canvas protocol: the geometry the bridge
 // reports (node rects, empty zones, document height), select/hover
 // forwarded from the iframe, and `postToCanvas` for refresh/scroll.
-// Geometry silence is survivable — after GEOMETRY_TIMEOUT_MS the overlay
-// goes dark, the iframe and the outline keep working.
+// Silence is survivable — GEOMETRY_TIMEOUT_MS after the frame's load
+// with no bridge message, `geometry` turns "missing" and the page editor
+// diagnoses why (spec 2026-09-27 shadowed-page detector §2); the iframe
+// and the outline keep working.
 import { useCallback, useEffect, useRef, useState } from "react";
 const GEOMETRY_TIMEOUT_MS = 4000;
 export function useCanvasBridge({ iframeRef, iframeSrc, onSelect, onHover, onRendered }) {
     const [rects, setRects] = useState([]);
     const [emptyZones, setEmptyZones] = useState([]);
     const [fields, setFields] = useState([]);
+    const [crashed, setCrashed] = useState([]);
     const [docH, setDocH] = useState(900);
     const [geometry, setGeometry] = useState("waiting");
+    // The wait starts at the frame's load, not its src: a slow first compile in `next dev` is not silence.
+    const [loaded, setLoaded] = useState(false);
     // The listener registers once; the handlers are read through refs.
     const handlers = useRef({ onSelect, onHover, onRendered });
     handlers.current = { onSelect, onHover, onRendered };
     // A new canvas URL (a locale switch, a rename) means new geometry — the
     // previous page's rects are stale the instant the iframe starts loading
     // a different route, so clear them alongside resetting geometry.
-    useEffect(() => { setGeometry("waiting"); setRects([]); setEmptyZones([]); setFields([]); }, [iframeSrc]);
+    useEffect(() => { setGeometry("waiting"); setLoaded(false); setRects([]); setEmptyZones([]); setFields([]); setCrashed([]); }, [iframeSrc]);
     const postToCanvas = useCallback((m) => {
         iframeRef.current?.contentWindow?.postMessage(m, "*");
     }, [iframeRef]);
@@ -28,12 +33,13 @@ export function useCanvasBridge({ iframeRef, iframeSrc, onSelect, onHover, onRen
                 return;
             if (e.source !== iframeRef.current?.contentWindow)
                 return;
+            setGeometry("ok"); // any bridge message: Smoodly rendered the canvas with its bridge
             if (m.kind === "rects") {
                 setRects(m.nodes);
                 setEmptyZones(m.emptyZones);
                 setFields(m.fields);
                 setDocH(m.docH);
-                setGeometry("ok");
+                setCrashed(m.crashed ?? []);
             }
             else if (m.kind === "select") {
                 handlers.current.onSelect(m.id, m.path, m.x, m.y);
@@ -49,10 +55,11 @@ export function useCanvasBridge({ iframeRef, iframeSrc, onSelect, onHover, onRen
         return () => window.removeEventListener("message", onMessage);
     }, [iframeRef]);
     useEffect(() => {
-        if (!iframeSrc || geometry !== "waiting")
+        if (!iframeSrc || !loaded || geometry !== "waiting")
             return;
         const t = setTimeout(() => setGeometry((g) => (g === "waiting" ? "missing" : g)), GEOMETRY_TIMEOUT_MS);
         return () => clearTimeout(t);
-    }, [iframeSrc, geometry]);
-    return { rects, emptyZones, fields, docH, geometry, postToCanvas };
+    }, [iframeSrc, loaded, geometry]);
+    const onFrameLoad = useCallback(() => setLoaded(true), []);
+    return { rects, emptyZones, fields, docH, geometry, postToCanvas, onFrameLoad, crashed };
 }

package/dist/admin/editor/useCanvasDiagnosis.d.ts

@@ -0,0 +1,7 @@
+import { type CanvasCause } from "./canvas-diagnosis.ts";
+import type { Geometry } from "./useCanvasBridge.ts";
+export type CanvasDiagnosis = {
+    cause: CanvasCause;
+    path: string;
+};
+export declare function useCanvasDiagnosis(iframeSrc: string | null, geometry: Geometry): CanvasDiagnosis | null;

package/dist/admin/editor/useCanvasDiagnosis.js

@@ -0,0 +1,24 @@
+// The page editor's diagnosis of a silent canvas (spec 2026-09-27
+// shadowed-page detector §4): once the bridge's wait ends in "missing",
+// fetch the canvas URL once — same origin, so the draft-mode cookie rides
+// along and the server renders what the frame got — and name the cause.
+// A new src, or the bridge speaking after all, drops the answer.
+import { useEffect, useState } from "react";
+import { diagnoseCanvas, probeOf } from "./canvas-diagnosis.js";
+export function useCanvasDiagnosis(iframeSrc, geometry) {
+    const [diagnosis, setDiagnosis] = useState(null);
+    useEffect(() => {
+        setDiagnosis(null);
+        if (!iframeSrc || geometry !== "missing")
+            return;
+        let live = true;
+        const requested = new URL(iframeSrc, window.location.href);
+        fetch(requested.href, { cache: "no-store" })
+            .then((res) => probeOf(requested.href, res))
+            .catch(() => ({ kind: "failed" }))
+            .then((probe) => { if (live)
+            setDiagnosis({ cause: diagnoseCanvas(probe), path: requested.pathname }); });
+        return () => { live = false; };
+    }, [iframeSrc, geometry]);
+    return diagnosis;
+}

package/dist/admin/index.d.ts

@@ -7,6 +7,7 @@ export { ensureGlobalItems, initialGlobalFields } from "./global-items.ts";
 export { makeClientOps } from "./client-ops.ts";
 export { gateAdminOp, type AdminAuth } from "./auth.ts";
 export { supabaseAdminAuth } from "./supabase-auth.ts";
+export type { AuthConfig } from "./shell/session.ts";
 export { serializeAdminConfig } from "./serialize.ts";
 export type { AdminRegistry, AdminSection, AdminCollection, AdminPageTemplate, AdminGlobal, AdminField } from "./serialize.ts";
 export * from "./tree-ops.ts";

package/dist/admin/next/bridge.js

@@ -14,7 +14,7 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // offsets map 1:1 onto the overlay.
 import { useEffect } from "react";
 import { useRouter } from "next/navigation";
-import { BLANK_ATTR, EDITOR_ATTR, FIELD_ATTR, NODE_ATTR, ZONE_ATTR, resolveMarkPath } from "../../marks.js";
+import { BLANK_ATTR, CRASHED_ATTR, EDITOR_ATTR, FIELD_ATTR, NODE_ATTR, ZONE_ATTR, crashedOf, resolveMarkPath } from "../../marks.js";
 const post = (m) => window.parent.postMessage(m, "*");
 /** The height of an md-spaced section with nothing inside (3.5rem + 3.5rem). */
 // The editor sizes the iframe to the reported height; the document's own
@@ -69,7 +69,9 @@ export function EditorBridge() {
             }
             // Rounded up from the fractional box, so the frame is never a hair too short.
             const docH = Math.ceil(Math.max(document.documentElement.scrollHeight, document.documentElement.getBoundingClientRect().height));
-            post({ source: "smoodly", kind: "rects", nodes, emptyZones, fields, docH });
+            // Crashed sections (spec 2026-09-27 section guard §6): the placeholders the guard and the canvas net left.
+            const crashed = crashedOf(all(`[${CRASHED_ATTR}]`));
+            post({ source: "smoodly", kind: "rects", nodes, emptyZones, fields, docH, crashed });
         };
         const raf = () => requestAnimationFrame(report);
         const ro = new ResizeObserver(raf);

package/dist/admin/next/index.d.ts

@@ -6,4 +6,3 @@ export type { MemberRole } from "../../permissions.ts";
 export type { AuthConfig } from "../shell/session.ts";
 export type { ContentConfig } from "../../env.ts";
 export type { AdminAuth } from "../auth.ts";
-export { supabaseAdminAuth } from "../supabase-auth.ts";

package/dist/admin/next/index.js

@@ -1,3 +1,8 @@
+// The admin route group's entry. createSmoodlyAdmin imports the "use
+// client" shell, so any module that imports a value from here puts the
+// whole admin in its route's JavaScript — whether it renders or not.
+// Never import it from code the site's routes reach (smoodly/server.ts
+// included); the auth glue lives in `smoodly/admin`, which has no client
+// code.
 export { createAdminOpHandler } from "./op-handler.js";
 export { createSmoodlyAdmin } from "./create-admin.js";
-export { supabaseAdminAuth } from "../supabase-auth.js";

package/dist/admin/ui/ActionMenu.d.ts

@@ -4,6 +4,25 @@ export type ActionMenuItem = {
     disabled?: boolean;
     danger?: boolean;
 };
+/** The button's box in viewport pixels, `right` measured from the viewport's right edge. */
+type Anchor = {
+    top: number;
+    bottom: number;
+    right: number;
+};
+export declare const anchorOf: (button: {
+    top: number;
+    bottom: number;
+    right: number;
+}, viewportWidth: number) => Anchor;
+/** Whether a scroll moved the button since the menu opened. */
+export declare const anchorMoved: (open: Anchor, now: Anchor) => boolean;
+/** 6px under the button from its right edge, or above it when it does not fit below and there is more room above. */
+export declare function menuPlacement(anchor: Anchor, viewportHeight: number, height: number): {
+    right: number;
+    top?: number;
+    bottom?: number;
+};
 export declare function ActionMenu({ label, items, disabled, small }: {
     label: string;
     items: ActionMenuItem[];
@@ -11,3 +30,4 @@ export declare function ActionMenu({ label, items, disabled, small }: {
     /** The smaller round button, next to a small Publish. */
     small?: boolean;
 }): import("react").JSX.Element;
+export {};

package/dist/admin/ui/ActionMenu.js

@@ -8,14 +8,35 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 // right edge (every control sits at its bar's or card's right). It is
 // position:fixed from the button's rect (2026-09-26): inside a table cell
 // an absolute child was clipped by the cell's overflow, so the Members
-// row menu opened invisibly. A scroll closes it rather than leaving it behind.
-import { useEffect, useRef, useState } from "react";
+// row menu opened invisibly. Near the bottom of the screen it opens upward,
+// the Combobox's rule (2026-09-27: a fixed menu cut off by the viewport
+// cannot be scrolled into view). A scroll that moves the button closes it
+// rather than leaving it behind — only one that moves it: scroll events
+// arrive a frame late, so the one from bringing the row into view could
+// land after the click and close the menu it had just opened.
+import { useEffect, useLayoutEffect, useRef, useState } from "react";
+import { opensUp } from "./combo-box.js";
 import { cx } from "./primitives.js";
+export const anchorOf = (button, viewportWidth) => ({ top: button.top, bottom: button.bottom, right: viewportWidth - button.right });
+/** Whether a scroll moved the button since the menu opened. */
+export const anchorMoved = (open, now) => open.top !== now.top || open.bottom !== now.bottom || open.right !== now.right;
+/** 6px under the button from its right edge, or above it when it does not fit below and there is more room above. */
+export function menuPlacement(anchor, viewportHeight, height) {
+    return opensUp({ below: viewportHeight - anchor.bottom - 6, above: anchor.top - 6, height })
+        ? { right: anchor.right, bottom: viewportHeight - anchor.top + 6 }
+        : { right: anchor.right, top: anchor.bottom + 6 };
+}
 export function ActionMenu({ label, items, disabled, small = false }) {
-    /** Open: the popover's viewport position, under the button's right edge. */
+    /** Open: the button's box when it opened; the popover is placed from it. */
     const [open, setOpen] = useState(null);
+    const [place, setPlace] = useState(null);
     const ref = useRef(null);
     const button = useRef(null);
+    const menu = useRef(null);
+    // Measured before paint, so an upward menu never flashes below first.
+    useLayoutEffect(() => {
+        setPlace(open && menu.current ? menuPlacement(open, window.innerHeight, menu.current.offsetHeight) : null);
+    }, [open]);
     const toggle = () => {
         if (open) {
             setOpen(null);
@@ -23,7 +44,7 @@ export function ActionMenu({ label, items, disabled, small = false }) {
         }
         const r = button.current?.getBoundingClientRect();
         if (r)
-            setOpen({ top: r.bottom + 6, right: window.innerWidth - r.right });
+            setOpen(anchorOf(r, window.innerWidth));
     };
     useEffect(() => {
         if (!open)
@@ -33,14 +54,19 @@ export function ActionMenu({ label, items, disabled, small = false }) {
             close(); };
         const onKey = (e) => { if (e.key === "Escape")
             close(); };
+        const onScroll = () => {
+            const r = button.current?.getBoundingClientRect();
+            if (!r || anchorMoved(open, anchorOf(r, window.innerWidth)))
+                close();
+        };
         document.addEventListener("pointerdown", onDown);
         document.addEventListener("keydown", onKey);
-        document.addEventListener("scroll", close, true);
+        document.addEventListener("scroll", onScroll, true);
         return () => {
             document.removeEventListener("pointerdown", onDown);
             document.removeEventListener("keydown", onKey);
-            document.removeEventListener("scroll", close, true);
+            document.removeEventListener("scroll", onScroll, true);
         };
     }, [open]);
-    return (_jsxs("div", { ref: ref, style: { position: "relative", flex: "none" }, children: [_jsx("button", { ref: button, type: "button", className: cx("sm-dotmenu", small && "sm-dotmenu--sm"), "aria-label": label, title: label, "aria-haspopup": "menu", "aria-expanded": open !== null, disabled: disabled, onClick: toggle, children: "\u00B7\u00B7\u00B7" }), open && (_jsx("div", { role: "menu", className: "sm-picker sm-picker--menu", style: { top: open.top, right: open.right }, children: items.map((item) => (_jsx("button", { type: "button", role: "menuitem", className: cx("sm-picker__item", item.danger && "sm-picker__item--danger"), disabled: item.disabled, onClick: () => { setOpen(null); item.run(); }, children: item.label }, item.label))) }))] }));
+    return (_jsxs("div", { ref: ref, style: { position: "relative", flex: "none" }, children: [_jsx("button", { ref: button, type: "button", className: cx("sm-dotmenu", small && "sm-dotmenu--sm"), "aria-label": label, title: label, "aria-haspopup": "menu", "aria-expanded": open !== null, disabled: disabled, onClick: toggle, children: "\u00B7\u00B7\u00B7" }), open && (_jsx("div", { ref: menu, role: "menu", className: "sm-picker sm-picker--menu", style: place ?? { top: open.bottom + 6, right: open.right, visibility: "hidden" }, children: items.map((item) => (_jsx("button", { type: "button", role: "menuitem", className: cx("sm-picker__item", item.danger && "sm-picker__item--danger"), disabled: item.disabled, onClick: () => { setOpen(null); item.run(); }, children: item.label }, item.label))) }))] }));
 }

package/dist/custom/CustomSection.d.ts

@@ -19,6 +19,7 @@ export type CustomSectionProps = {
 export type CustomSectionComponent = ((props: CustomSectionProps) => ReactElement) & {
     schema: {
         name: string;
+        title: string;
     };
 };
 export declare function createCustomSection({ RichText: Bound, breakpoint, elements }: CustomOptions & {

package/dist/custom/CustomSection.js

@@ -4,6 +4,7 @@ import { RichText } from "../richtext-render.js";
 import { FIELD_ATTR, ITEM_ATTR } from "../marks.js";
 import { CUSTOM_NODE_TYPE, DEFAULT_BREAKPOINT } from "./schema.js";
 import { customCss } from "./css.js";
+import { RENDER_VIEW } from "../section-guard.js";
 const isRow = (r) => typeof r === "object" && r !== null && Array.isArray(r.columns);
 export function createCustomSection({ RichText: Bound, breakpoint = DEFAULT_BREAKPOINT, elements = [] }) {
     const Body = Bound ?? (({ doc }) => _jsx(RichText, { doc: doc, elements: elements }));
@@ -15,6 +16,8 @@ export function createCustomSection({ RichText: Bound, breakpoint = DEFAULT_BREA
             : styles;
         return (_jsx(Section, { styles: withLayout, "data-custom": "", children: list.map((row, i) => (_jsx("div", { className: row.reverse ? "smd-row smd-row--reverse" : "smd-row", "data-row": i, [ITEM_ATTR]: `rows.${i}`, children: row.columns.map((doc, j) => (_jsx("div", { className: "smd-col", [FIELD_ATTR]: `columns.${j}`, children: _jsx(Body, { doc: doc }) }, j))) }, i))) }));
     }
-    CustomSection.schema = { name: CUSTOM_NODE_TYPE };
+    CustomSection.schema = { name: CUSTOM_NODE_TYPE, title: "Custom section" };
+    // Smoodly's own plain view: the guard may call it (spec 2026-09-27 section guard §1).
+    CustomSection[RENDER_VIEW] = CustomSection;
     return CustomSection;
 }

package/dist/marks.d.ts

@@ -53,4 +53,16 @@ export type Scope<T> = Marks<T> & {
 export declare function marks<S extends {
     __f?: BuilderMap;
 }>(_schema: S): Marks<NamespaceValues<NonNullable<S["__f"]>>>;
+/** A crashed section's placeholder (spec 2026-09-27 section guard §5): `section` — the guard caught
+ *  it and the live site leaves it out; `page` — only the canvas net caught it, the live page would fail. */
+export declare const CRASHED_ATTR = "data-smd-crashed";
+/** One crashed section as the bridge reports it. */
+export type CrashedSection = {
+    id: string;
+    live: "left-out" | "page-fails";
+};
+/** The crashed sections among the marked elements, in document order — what the bridge posts. */
+export declare function crashedOf(els: ReadonlyArray<{
+    getAttribute(name: string): string | null;
+}>): CrashedSection[];
 export {};

package/dist/marks.js

@@ -44,3 +44,17 @@ function level() {
 export function marks(_schema) {
     return level();
 }
+/** A crashed section's placeholder (spec 2026-09-27 section guard §5): `section` — the guard caught
+ *  it and the live site leaves it out; `page` — only the canvas net caught it, the live page would fail. */
+export const CRASHED_ATTR = "data-smd-crashed";
+/** The crashed sections among the marked elements, in document order — what the bridge posts. */
+export function crashedOf(els) {
+    const out = [];
+    for (const el of els) {
+        const id = el.getAttribute(NODE_ATTR);
+        const mark = el.getAttribute(CRASHED_ATTR);
+        if (id && (mark === "section" || mark === "page"))
+            out.push({ id, live: mark === "section" ? "left-out" : "page-fails" });
+    }
+    return out;
+}

package/dist/next/canvas-boundary.d.ts

@@ -0,0 +1,16 @@
+import { Component, type ReactNode } from "react";
+type Props = {
+    id: string;
+    title: string;
+    children?: ReactNode;
+};
+type State = {
+    failed: boolean;
+    error: unknown;
+};
+export declare class CanvasBoundary extends Component<Props, State> {
+    state: State;
+    static getDerivedStateFromError(error: unknown): State;
+    render(): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | import("react").ReactPortal | import("react").ReactElement<unknown, string | import("react").JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | import("react").JSX.Element | null | undefined;
+}
+export {};

package/dist/next/canvas-boundary.js

@@ -0,0 +1,25 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+// The Next adapter's canvas net (spec 2026-09-27 section guard §5): in
+// editor mode each section sits in <Suspense> and this boundary, so a
+// throw the guard cannot catch — in a component the section renders, or
+// in a 'use client' section — fails only that section: Server Components
+// hand it to the browser to retry, and this catches it there. Never
+// rendered outside editor mode. Imports nothing from `next`, but it is
+// Next's mechanism, so it lives with the adapter.
+import { Component } from "react";
+import { CrashPlaceholder } from "../section-crash.js";
+export class CanvasBoundary extends Component {
+    constructor() {
+        super(...arguments);
+        this.state = { failed: false, error: undefined };
+    }
+    static getDerivedStateFromError(error) {
+        return { failed: true, error };
+    }
+    render() {
+        return this.state.failed
+            ? _jsx(CrashPlaceholder, { id: this.props.id, title: this.props.title, error: this.state.error, live: "page" })
+            : this.props.children;
+    }
+}

package/dist/next/page-renderer.d.ts

@@ -1,9 +1,11 @@
-import type { ComponentType, ReactElement } from "react";
+import { type ComponentType, type ReactElement } from "react";
 import type { Metadata } from "next";
 import type { Descriptor } from "../fields.ts";
 import { type PairedPage } from "../render.tsx";
 import type { GlobalSchema } from "../global.ts";
 import { type SmoodlySite } from "../site.ts";
+/** Logged once per renderer when Next's cacheComponents is on (spec 2026-09-27 cache components §2). */
+export declare const CACHE_COMPONENTS_WARNING = "smoodly: Next's cacheComponents is on, and Smoodly does not support it \u2014 a missing page answers 200 with noindex instead of 404, and a redirect answers 200 instead of 308. Turn cacheComponents off in next.config.ts; the Next.js guide's \"Cache Components\" section says why (https://smoodly.io/docs/frameworks/nextjs).";
 /** A registered section, as renderPage's registry needs it. */
 type SectionEntry = ComponentType<any> & {
     schema: {

package/dist/next/page-renderer.js

@@ -1,15 +1,29 @@
 import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
+// The site-route seam (spec 2026-09-05 §5): the two route files call
+// renderSmoodlyPath; everything else — request gating, draft mode, the
+// cache keyed by (locale, path) and tagged by id, 404s, the editor
+// bridge — lives here, over the framework-free site layer. Bound once by
+// the app, exactly like createAdminOpHandler.
+import { Suspense } from "react";
 import { unstable_cache } from "next/cache";
 import { draftMode } from "next/headers";
-import { notFound, permanentRedirect } from "next/navigation";
+import { notFound, permanentRedirect, unstable_rethrow } from "next/navigation";
 import { connection } from "next/server";
 import { EditorBridge } from "../admin/next/bridge.js";
+import { CanvasBoundary } from "./canvas-boundary.js";
+import { DRAFT_META_NAME } from "../admin/editor/canvas-diagnosis.js";
 import { fixedPathFor } from "../localize.js";
 import { joinPath } from "../paths.js";
 import { renderPage } from "../render.js";
 import { entryTag, pageTag, globalTag } from "../revalidate.js";
 import { pageContextOf } from "../site.js";
 import { metadataFrom } from "./meta.js";
+/** Logged once per renderer when Next's cacheComponents is on (spec 2026-09-27 cache components §2). */
+export const CACHE_COMPONENTS_WARNING = "smoodly: Next's cacheComponents is on, and Smoodly does not support it — a missing page answers 200 with noindex instead of 404, and a redirect answers 200 instead of 308. Turn cacheComponents off in next.config.ts; the Next.js guide's \"Cache Components\" section says why (https://smoodly.io/docs/frameworks/nextjs).";
+/** The canvas net (spec 2026-09-27 section guard §5): Server Components hand a section that failed to the
+ *  browser, where CanvasBoundary catches it. Defined here, not in the client file: a function exported
+ *  from a "use client" module is a reference on the server and cannot be called. */
+const canvasWrap = (child, section) => (_jsx(Suspense, { fallback: null, children: _jsx(CanvasBoundary, { id: section.id, title: section.title, children: child }) }));
 export function createPageRenderer(options) {
     const { site } = options;
     const href = options.href ?? ((path) => path);
@@ -48,7 +62,7 @@ export function createPageRenderer(options) {
                 notFound();
             }
             const page = pageContextOf(hit, href);
-            return renderPage(Page, hit.tree, { sections: options.sections, elements: options.elements, styles: site.styles, custom: site.custom }, { editor, page });
+            return renderPage(Page, hit.tree, { sections: options.sections, elements: options.elements, styles: site.styles, custom: site.custom }, { editor, page, rethrow: unstable_rethrow, editorWrap: canvasWrap });
         }
         const View = entryPages.get(hit.collection);
         if (!View) {
@@ -67,10 +81,22 @@ export function createPageRenderer(options) {
                 languages[locale] = href(alt.path, locale);
         return { alternates: { languages } };
     }
+    // Next's cacheComponents serves the catch-all from a fallback shell that
+    // commits 200 before the page renders, so 404s and 308s are lost (spec
+    // 2026-09-27 cache components). The variable is Next's own, inlined at
+    // build: a warning, never an error, and once per renderer.
+    let cacheComponentsWarned = false;
+    function warnCacheComponents() {
+        if (cacheComponentsWarned || String(process.env.__NEXT_CACHE_COMPONENTS) !== "true")
+            return;
+        cacheComponentsWarned = true;
+        console.warn(CACHE_COMPONENTS_WARNING);
+    }
     async function page(pathFor, opts, accept) {
+        warnCacheComponents(); // before connection(), so a build's prerender prints it too
         // A CMS route is request-rendered by construction: without this a
         // route with no dynamic segment would be prerendered against the
-        // database at build time (DESIGN.md §3, OQ #19).
+        // database at build time (DESIGN.md §3).
         await connection();
         const locale = opts?.locale ?? site.locales.default;
         const path = pathFor(locale);
@@ -86,7 +112,10 @@ export function createPageRenderer(options) {
         const hit = target ? await load(target, locale, path, draft, version) : null;
         if (!hit || !accept(hit))
             notFound();
-        return (_jsxs(_Fragment, { children: [editor ? _jsx(EditorBridge, {}) : null, render(hit, editor, locale)] }));
+        // The draft marker tells the page editor's canvas diagnosis that Smoodly
+        // rendered this response (spec 2026-09-27 shadowed-page detector §3);
+        // React hoists the meta into the head. Never outside draft mode.
+        return (_jsxs(_Fragment, { children: [draft ? _jsx("meta", { name: DRAFT_META_NAME }) : null, editor ? _jsx(EditorBridge, {}) : null, render(hit, editor, locale)] }));
     }
     async function metadata(pathFor, opts, accept) {
         // generateMetadata runs alongside the page render, so it gates too.

package/dist/pairing.js

@@ -1,14 +1,21 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import { defaultsOf } from "./field-defaults.js";
+import { isPlainView, RENDER_VIEW } from "./section-guard.js";
 function pair(schema, View) {
     const defaults = defaultsOf(schema.settings);
-    const Component = (props) => {
+    const viewProps = (props) => {
         const { settings: overrides, styles, ...fields } = props ?? {};
-        const settings = { ...defaults, ...overrides };
+        return { ...fields, settings: { ...defaults, ...overrides }, styles: styles ?? {} };
+    };
+    const Component = (props) => {
         const V = View;
-        return _jsx(V, { ...fields, settings: settings, styles: styles ?? {} });
+        return _jsx(V, { ...viewProps(props) });
     };
     Component.schema = schema;
+    // The guard's direct call (spec 2026-09-27 section guard §1): only a plain-function view may be called.
+    if (isPlainView(View)) {
+        Component[RENDER_VIEW] = (props) => View(viewProps(props));
+    }
     return Component;
 }
 export function section(schema, View) {

package/dist/render.d.ts

@@ -1,4 +1,4 @@
-import type { ComponentType, ReactElement } from "react";
+import { type ComponentType, type ReactElement, type ReactNode } from "react";
 import type { PageAlternate } from "./paths.ts";
 import type { PageSchema } from "./page.ts";
 import type { BuilderMap, NamespaceValues } from "./schema.ts";
@@ -70,8 +70,14 @@ export declare const EMPTY_PAGE_CONTEXT: PageContext;
 type AnyPaired = ComponentType<any> & {
     schema: {
         name: string;
+        title?: string;
     };
 };
+/** The adapter's canvas net (spec 2026-09-27 section guard §5): called per section, in editor mode only. */
+export type EditorWrap = (child: ReactNode, section: {
+    id: string;
+    title: string;
+}) => ReactNode;
 export type ZoneContent = {
     readonly name: string;
     readonly nodes: TreeNode[];
@@ -79,6 +85,9 @@ export type ZoneContent = {
     /** The config's CSS values behind the styles set (spec 2026-09-14 §2). */
     readonly styleValues: StyleValues;
     readonly editor: boolean;
+    /** Control flow the guard must let through — the adapter's (Next: unstable_rethrow; spec 2026-09-27 section guard §2). */
+    readonly rethrow?: (error: unknown) => void;
+    readonly editorWrap?: EditorWrap;
 };
 export declare function Zone({ of: content }: {
     of: ZoneContent;
@@ -102,5 +111,7 @@ export type Registry = {
 export declare function renderPage<Zones extends Record<string, unknown>>(Page: PairedPage<Zones>, tree: PageTree, registry: Registry, options?: {
     editor?: boolean;
     page?: PageContext;
+    rethrow?: (error: unknown) => void;
+    editorWrap?: EditorWrap;
 }): ReactElement;
 export {};

package/dist/render.js

@@ -1,8 +1,11 @@
 import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Fragment } from "react";
 import { EMPTY_ATTR, NODE_ATTR, ZONE_ATTR } from "./marks.js";
 import { SMD_KEY } from "./section-wrapper.js";
 import { DEFAULT_STYLE_VALUES } from "./styles.js";
 import { CUSTOM_NODE_TYPE, createCustomSection } from "./custom/index.js";
+import { renderGuarded } from "./section-guard.js";
+import { PLACEHOLDER_STYLE } from "./section-crash.js";
 /** The `page` prop of a view rendered outside the site (a test, a preview
  *  of a shape): a real object, so a view never guards an optional prop, but
  *  no position in the tree. Frozen: one singleton shared by every such
@@ -26,14 +29,17 @@ export function Zone({ of: content }) {
                 // Editor mode draws a box the bridge can measure, so the node is selectable in place
                 // (spec 2026-09-27 editor safety §5); the site renders nothing, as before.
                 if (content.editor) {
-                    return (_jsxs("div", { [NODE_ATTR]: node.id, style: { padding: "24px 16px", border: "1px dashed #b54708", color: "#b54708", font: "500 14px/1.4 system-ui, sans-serif", textAlign: "center" }, children: ["Unknown section `", node.type, "`"] }, node.id));
+                    return (_jsxs("div", { [NODE_ATTR]: node.id, style: PLACEHOLDER_STYLE, children: ["Unknown section `", node.type, "`"] }, node.id));
                 }
                 console.warn(`smoodly: no registered component for node type "${node.type}" — skipping.`);
                 return null;
             }
             // The node id, the css and the values ride the styles under one reserved key; the wrapper reads and strips it.
             const styles = { ...(node.styles ?? {}), [SMD_KEY]: { node: node.id, css: typeof node.css === "string" ? node.css : undefined, values: content.styleValues } };
-            return _jsx(Component, { ...node.fields, settings: node.settings ?? {}, styles: styles }, node.id);
+            // Through the guard (spec 2026-09-27 section guard): a throw in the section's own code leaves it out, not the page.
+            const title = Component.schema.title ?? node.type;
+            const section = renderGuarded(Component, { ...node.fields, settings: node.settings ?? {}, styles }, { id: node.id, type: node.type, title, editor: content.editor, rethrow: content.rethrow });
+            return (_jsx(Fragment, { children: content.editor && content.editorWrap ? content.editorWrap(section, { id: node.id, title }) : section }, node.id));
         }) }));
 }
 export function page(schema, View) {
@@ -54,7 +60,7 @@ export function renderPage(Page, tree, registry, options) {
     const styleValues = registry.styles ?? DEFAULT_STYLE_VALUES;
     const zones = Object.fromEntries(Object.keys(Page.schema.zones).map((zone) => [
         zone,
-        { name: zone, nodes: tree.zones?.[zone] ?? [], components, styleValues, editor: options?.editor ?? false },
+        { name: zone, nodes: tree.zones?.[zone] ?? [], components, styleValues, editor: options?.editor ?? false, rethrow: options?.rethrow, editorWrap: options?.editorWrap },
     ]));
     return _jsx(Page, { zones: zones, page: (options?.page ?? EMPTY_PAGE_CONTEXT) });
 }

package/dist/section-crash.d.ts

@@ -0,0 +1,11 @@
+import type { CSSProperties } from "react";
+/** The canvas placeholders' look — the unknown section's too (spec 2026-09-27 editor safety §5). */
+export declare const PLACEHOLDER_STYLE: CSSProperties;
+/** Why it crashed, for the placeholder: the message, or the digest when a production build stripped the message. */
+export declare function crashMessage(error: unknown): string;
+export declare function CrashPlaceholder({ id, title, error, live }: {
+    id: string;
+    title: string;
+    error: unknown;
+    live: "section" | "page";
+}): import("react").JSX.Element;

package/dist/section-crash.js

@@ -0,0 +1,16 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CRASHED_ATTR, NODE_ATTR } from "./marks.js";
+/** The canvas placeholders' look — the unknown section's too (spec 2026-09-27 editor safety §5). */
+export const PLACEHOLDER_STYLE = {
+    padding: "24px 16px", border: "1px dashed #b54708", color: "#b54708", font: "500 14px/1.4 system-ui, sans-serif", textAlign: "center",
+};
+/** Why it crashed, for the placeholder: the message, or the digest when a production build stripped the message. */
+export function crashMessage(error) {
+    const digest = typeof error === "object" && error !== null ? error.digest : undefined;
+    if (typeof digest === "string")
+        return `the server log has the error (digest ${digest})`;
+    return error instanceof Error ? error.message : String(error);
+}
+export function CrashPlaceholder({ id, title, error, live }) {
+    return (_jsx("div", { [NODE_ATTR]: id, [CRASHED_ATTR]: live, style: PLACEHOLDER_STYLE, children: `Section “${title}” failed to render — ${crashMessage(error)}` }));
+}

package/dist/section-guard.d.ts

@@ -0,0 +1,27 @@
+import type { ComponentType, ReactNode } from "react";
+/** The paired component's own view call, set by pair() and the custom section — only for a plain-function view. */
+export declare const RENDER_VIEW: unique symbol;
+/** A view the guard may call: a plain function — not a client reference or memo/forwardRef ($$typeof), not a class. */
+export declare function isPlainView(View: unknown): boolean;
+export type GuardContext = {
+    id: string;
+    type: string;
+    title: string;
+    editor: boolean;
+    rethrow?: (error: unknown) => void;
+};
+type Settled = {
+    ok: true;
+    value: unknown;
+} | {
+    ok: false;
+    error: unknown;
+};
+/** A section through the guard when its component offers the view call; any other component as an element, unguarded. */
+export declare function renderGuarded(Component: ComponentType<any>, props: Record<string, unknown>, ctx: GuardContext): ReactNode;
+/** An async section, awaited in place — no <Suspense>, so it renders where it always did. */
+export declare function SectionGuard({ settled, ctx }: {
+    settled: Promise<Settled>;
+    ctx: GuardContext;
+}): Promise<ReactNode>;
+export {};

package/dist/section-guard.js

@@ -0,0 +1,41 @@
+import { jsx as _jsx } from "react/jsx-runtime";
+import { CrashPlaceholder } from "./section-crash.js";
+/** The paired component's own view call, set by pair() and the custom section — only for a plain-function view. */
+export const RENDER_VIEW = Symbol("smoodly.renderView");
+/** A view the guard may call: a plain function — not a client reference or memo/forwardRef ($$typeof), not a class. */
+export function isPlainView(View) {
+    if (typeof View !== "function")
+        return false;
+    const v = View;
+    return v.$$typeof === undefined && !v.prototype?.isReactComponent;
+}
+/** The placeholder shows in the canvas, and under `next dev` so a developer never misses their own crash. */
+const placeholderShown = (editor) => editor || process.env.NODE_ENV === "development";
+function failed(error, ctx) {
+    ctx.rethrow?.(error); // notFound(), redirects and bailouts are control flow, not crashes
+    console.error(`smoodly: section "${ctx.type}" (node ${ctx.id}) failed to render and is left out of the page.`, error);
+    return placeholderShown(ctx.editor) ? _jsx(CrashPlaceholder, { id: ctx.id, title: ctx.title, error: error, live: "section" }) : null;
+}
+const isThenable = (v) => typeof v === "object" && v !== null && typeof v.then === "function";
+/** A section through the guard when its component offers the view call; any other component as an element, unguarded. */
+export function renderGuarded(Component, props, ctx) {
+    const render = Component[RENDER_VIEW];
+    if (!render)
+        return _jsx(Component, { ...props });
+    try {
+        const out = render(props);
+        if (!isThenable(out))
+            return out;
+        // Settled up front, so a rejection is never unhandled while React gets to the guard.
+        const settled = Promise.resolve(out).then((value) => ({ ok: true, value }), (error) => ({ ok: false, error }));
+        return _jsx(SectionGuard, { settled: settled, ctx: ctx });
+    }
+    catch (error) {
+        return failed(error, ctx);
+    }
+}
+/** An async section, awaited in place — no <Suspense>, so it renders where it always did. */
+export async function SectionGuard({ settled, ctx }) {
+    const result = await settled;
+    return result.ok ? result.value : failed(result.error, ctx);
+}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "smoodly",
-  "version": "0.0.29",
+  "version": "0.0.31",
   "description": "Open-source, code-first CMS for Next.js on Supabase: define a component once, it becomes a typed, editable building block.",
   "license": "MIT",
   "repository": {