smoodly 0.0.11 → 0.0.13

package/dist/admin/forms/richtext-nodes.js

@@ -0,0 +1,85 @@
+// The two block node types (spec 2026-09-08 block nodes §2) and the slash
+// menu. Always in the schema; the toolset gates insertion elsewhere. Node
+// views are injected by the widget (`setNodeViews`), so this file has no
+// React component import and loads under bare node for the schema tests.
+import { Extension, Node, mergeAttributes } from "@tiptap/core";
+import { ReactNodeViewRenderer } from "@tiptap/react";
+import Suggestion from "@tiptap/suggestion";
+const views = { image: null, element: null };
+/** Bind the card components once, before the first editor mounts. */
+export function setNodeViews(next) { Object.assign(views, next); }
+const jsonAttr = (name, fallback) => ({
+    default: fallback,
+    parseHTML: (el) => { try {
+        return JSON.parse(el.getAttribute(`data-${name}`) ?? "");
+    }
+    catch {
+        return fallback;
+    } },
+    renderHTML: (attrs) => ({ [`data-${name}`]: JSON.stringify(attrs[name] ?? fallback) }),
+});
+export const ImageNode = Node.create({
+    name: "image",
+    group: "block",
+    atom: true,
+    draggable: true,
+    addAttributes() {
+        return { image: jsonAttr("image", null), caption: { default: "" } };
+    },
+    parseHTML() { return [{ tag: "div[data-smoodly-image]" }]; },
+    renderHTML({ HTMLAttributes }) { return ["div", mergeAttributes({ "data-smoodly-image": "" }, HTMLAttributes)]; },
+    addNodeView() { return views.image ? ReactNodeViewRenderer(views.image) : null; },
+});
+export const ElementNode = Node.create({
+    name: "element",
+    group: "block",
+    atom: true,
+    draggable: true,
+    addAttributes() {
+        return { name: { default: "" }, fields: jsonAttr("fields", {}), styles: jsonAttr("styles", {}) };
+    },
+    parseHTML() { return [{ tag: "div[data-smoodly-element]" }]; },
+    renderHTML({ HTMLAttributes }) { return ["div", mergeAttributes({ "data-smoodly-element": "" }, HTMLAttributes)]; },
+    addNodeView() { return views.element ? ReactNodeViewRenderer(views.element) : null; },
+});
+/** Insert a block at `at` (default: the selection's end — after a selected
+ *  card, never replacing it), followed by an empty paragraph so the caret
+ *  lands somewhere. The position is explicit because a menu or a picker
+ *  has taken focus in between, and a refocused contenteditable may place
+ *  its DOM caret at the first block before the editor's own selection is
+ *  restored; an empty paragraph at `at` is replaced, as TipTap does. */
+export function insertBlock(editor, node, at) {
+    const pos = at ?? editor.state.selection.to;
+    editor.chain().insertContentAt(pos, [node, { type: "paragraph" }]).focus().run();
+}
+/** `/` at the start of an empty paragraph opens the insert menu (spec §3). */
+export const SlashMenu = Extension.create({
+    name: "smoodlySlash",
+    addOptions() { return { items: () => [], onState: () => { }, onKeyDown: () => false, onPick: () => { } }; },
+    addProseMirrorPlugins() {
+        const { options } = this;
+        return [
+            Suggestion({
+                editor: this.editor,
+                char: "/",
+                startOfLine: true,
+                allow: ({ state, range }) => {
+                    const $from = state.doc.resolve(range.from);
+                    return $from.parent.type.name === "paragraph" && $from.parentOffset === 0;
+                },
+                items: ({ query }) => options.items(query),
+                command: ({ editor, range, props }) => {
+                    editor.chain().focus().deleteRange(range).run();
+                    options.onState(null);
+                    options.onPick(props);
+                },
+                render: () => ({
+                    onStart: (p) => options.onState({ items: p.items, rect: p.clientRect?.() ?? null, pick: (item) => p.command(item) }),
+                    onUpdate: (p) => options.onState({ items: p.items, rect: p.clientRect?.() ?? null, pick: (item) => p.command(item) }),
+                    onKeyDown: (p) => options.onKeyDown(p.event),
+                    onExit: () => options.onState(null),
+                }),
+            }),
+        ];
+    },
+});

package/dist/admin/forms/richtext-paste.js

@@ -21,6 +21,11 @@ function gateNode(n, allowed) {
         const { marks: _drop, ...rest } = n;
         return [marks.length > 0 ? { ...rest, marks } : rest];
     }
+    // Block nodes (spec 2026-09-08 block nodes §2): nothing to demote to, so a forbidden one is dropped.
+    if (n.type === "image")
+        return allowed.image ? [n] : [];
+    if (n.type === "element")
+        return allowed.elements.includes(String(n.attrs?.name)) ? [n] : [];
     const content = n.content ? gateNodes(n.content, allowed) : undefined;
     const withContent = (node) => (content ? { ...node, content } : node);
     if (n.type === "heading") {

package/dist/admin/forms/tabs.d.ts

@@ -9,3 +9,6 @@ export declare function tabsFor(section: AdminSection): {
     tab: TabName;
     entries: TabEntry[];
 }[];
+/** The tab holding a content field, by its dotted path's top-level key — a canvas
+ *  click on a marked image reveals it on Media, where the projection put it. */
+export declare function tabOf(section: AdminSection, path: string): TabName | undefined;

package/dist/admin/forms/tabs.js

@@ -18,3 +18,9 @@ export function tabsFor(section) {
         .filter((tab) => buckets[tab].length > 0)
         .map((tab) => ({ tab, entries: buckets[tab] }));
 }
+/** The tab holding a content field, by its dotted path's top-level key — a canvas
+ *  click on a marked image reveals it on Media, where the projection put it. */
+export function tabOf(section, path) {
+    const key = path.split(".")[0];
+    return tabsFor(section).find((t) => t.entries.some((e) => e.ns === "fields" && e.key === key))?.tab;
+}

package/dist/admin/forms/useRichtextEditor.d.ts

@@ -0,0 +1,51 @@
+import { type FocusEvent, type KeyboardEvent } from "react";
+import { type Editor } from "@tiptap/react";
+import type { AssetRecord } from "../../media.ts";
+import { type Allowed } from "../../toolset.ts";
+import { type ActiveState, type ToolbarCommand } from "./RichtextToolbar.tsx";
+import { type InsertItem } from "./richtext-insert.ts";
+import { type SlashState } from "./richtext-nodes.ts";
+export type RichtextApi = {
+    editor: Editor | null;
+    allowed: Allowed;
+    active: ActiveState;
+    canInsert: boolean;
+    run(command: ToolbarCommand): void;
+    link: {
+        open: boolean;
+        href: string;
+        setHref(href: string): void;
+        apply(): void;
+        remove(): void;
+        close(): void;
+    };
+    menu: {
+        open: boolean;
+        query: string;
+        active: number;
+        items: InsertItem[];
+        setQuery(query: string): void;
+        onKeyDown(e: KeyboardEvent<HTMLInputElement>): void;
+        pick(item: InsertItem): void;
+        close(): void;
+        dismiss(e: FocusEvent<HTMLDivElement>): void;
+    };
+    slash: {
+        state: SlashState;
+        active: number;
+    } | null;
+    picker: {
+        open: boolean;
+        pick(record: AssetRecord): void;
+        close(): void;
+    };
+};
+export declare function useRichtextEditor({ value, toolset, onChange, contentClass, onEscape }: {
+    value: unknown;
+    toolset: unknown;
+    onChange(doc: unknown): void;
+    /** The class on the ProseMirror root: the widget's content box, or the canvas editor's marker. */
+    contentClass: string;
+    /** Escape in the content with no slash menu open — the canvas editor ends its session. */
+    onEscape?(): void;
+}): RichtextApi;

package/dist/admin/forms/useRichtextEditor.js

@@ -0,0 +1,281 @@
+"use client";
+// The richtext editor behind both mounts (widget spec 2026-09-08 §3;
+// inline editing spec 2026-09-10 §5): the TipTap instance over the full
+// schema with the toolset gating creation, the toolbar's active state,
+// the link popover, the "+" menu, the slash menu and the image picker.
+// The sidebar widget and the canvas editor render this state in their own
+// layouts. The editor owns its document and emits TipTap JSON on every
+// change; the parent stores the emitted document by reference, so a value
+// that is not the last emitted document is a change from outside and
+// re-seeds the editor. Block nodes render as cards, bound once through
+// setNodeViews.
+import { useEffect, useMemo, useRef, useState } from "react";
+import { useEditor, useEditorState } from "@tiptap/react";
+import { Slice } from "@tiptap/pm/model";
+import { allowedOf } from "../../toolset.js";
+import { plainDoc } from "../richtext-doc.js";
+import { richtextExtensions } from "./richtext-extensions.js";
+import { gatePastedSlice } from "./richtext-paste.js";
+import { INACTIVE } from "./RichtextToolbar.js";
+import { elementNode, filterItems, imageNode, insertItems } from "./richtext-insert.js";
+import { insertBlock, setNodeViews } from "./richtext-nodes.js";
+import { RichtextImageCard } from "./RichtextImageCard.js";
+import { RichtextElementCard } from "./RichtextElementCard.js";
+import { useElements } from "./elements-context.js";
+import { useAssets } from "./assets-context.js";
+setNodeViews({ image: RichtextImageCard, element: RichtextElementCard });
+const EMPTY = { type: "doc", content: [{ type: "paragraph" }] };
+const LEVELS = [1, 2, 3, 4, 5, 6];
+const isDoc = (v) => !!v && typeof v === "object" && v.type === "doc";
+export function useRichtextEditor({ value, toolset, onChange, contentClass, onEscape }) {
+    const allowed = useMemo(() => allowedOf(toolset), [toolset]);
+    const elements = useElements();
+    const assets = useAssets();
+    const items = useMemo(() => insertItems(allowed, elements), [allowed, elements]);
+    // The parent's callbacks close over its render; the editor's handlers are
+    // created once, so read the latest through refs.
+    const onChangeRef = useRef(onChange);
+    onChangeRef.current = onChange;
+    const onEscapeRef = useRef(onEscape);
+    onEscapeRef.current = onEscape;
+    // The last document this editor emitted — anything else arriving as
+    // `value` came from outside and re-seeds the editor.
+    const emitted = useRef(value);
+    const [link, setLink] = useState({ open: false, href: "" });
+    const openLinkRef = useRef(() => { });
+    // The "+" popover, the slash menu and the image picker.
+    const [menu, setMenu] = useState({ open: false, query: "", active: 0 });
+    const [slash, setSlash] = useState(null);
+    const [slashActive, setSlashActive] = useState(0);
+    const slashRef = useRef({ state: null, active: 0, dismissed: false });
+    const [picker, setPicker] = useState(false);
+    // The slash extension is created once; it reaches this render's insert through the ref.
+    const insertRef = useRef(() => { });
+    // Where the next insert goes: recorded when the "+" menu opens (the menu
+    // and the picker take focus), read back at pick time. Null = the caret.
+    const anchorRef = useRef(null);
+    const editor = useEditor({
+        immediatelyRender: false,
+        extensions: richtextExtensions(allowed, {
+            onLink: () => openLinkRef.current(),
+            slash: {
+                elements,
+                onState: (state) => {
+                    const r = slashRef.current;
+                    if (state === null) {
+                        r.dismissed = false;
+                        r.state = null;
+                        setSlash(null);
+                        return;
+                    }
+                    if (r.state === null) {
+                        r.dismissed = false;
+                        r.active = 0;
+                    }
+                    r.state = state;
+                    r.active = Math.min(r.active, Math.max(0, state.items.length - 1));
+                    setSlashActive(r.active);
+                    setSlash(r.dismissed ? null : state);
+                },
+                onKeyDown: (event) => {
+                    const r = slashRef.current;
+                    if (!r.state || r.dismissed)
+                        return false;
+                    const n = Math.max(1, r.state.items.length);
+                    if (event.key === "Escape") {
+                        r.dismissed = true;
+                        setSlash(null);
+                        return true;
+                    }
+                    if (event.key === "ArrowDown") {
+                        r.active = (r.active + 1) % n;
+                        setSlashActive(r.active);
+                        return true;
+                    }
+                    if (event.key === "ArrowUp") {
+                        r.active = (r.active - 1 + n) % n;
+                        setSlashActive(r.active);
+                        return true;
+                    }
+                    if (event.key === "Enter") {
+                        const item = r.state.items[r.active];
+                        if (item)
+                            r.state.pick(item);
+                        return true;
+                    }
+                    return false;
+                },
+                onPick: (item) => insertRef.current(item),
+            },
+        }),
+        content: isDoc(value) ? value : EMPTY,
+        editorProps: {
+            attributes: { class: contentClass },
+            transformPasted: (slice, view) => Slice.fromJSON(view.state.schema, gatePastedSlice(slice.toJSON(), allowed)),
+            // Direct editor props run before plugin props, so leave Escape to
+            // the slash plugin while its menu is up; otherwise the canvas editor
+            // ends its session on it.
+            handleKeyDown: (_view, event) => {
+                if (event.key !== "Escape" || !onEscapeRef.current)
+                    return false;
+                const r = slashRef.current;
+                if (r.state && !r.dismissed)
+                    return false;
+                onEscapeRef.current();
+                return true;
+            },
+        },
+        onUpdate: ({ editor }) => {
+            const doc = plainDoc(editor.getJSON());
+            emitted.current = doc;
+            onChangeRef.current(doc);
+        },
+    }, [allowed, elements]);
+    useEffect(() => {
+        if (!editor || value === emitted.current)
+            return;
+        emitted.current = value;
+        editor.commands.setContent(isDoc(value) ? value : EMPTY, { emitUpdate: false });
+    }, [editor, value]);
+    const active = useEditorState({
+        editor,
+        selector: ({ editor }) => editor
+            ? {
+                bold: editor.isActive("bold"),
+                italic: editor.isActive("italic"),
+                link: editor.isActive("link"),
+                bulletList: editor.isActive("bulletList"),
+                orderedList: editor.isActive("orderedList"),
+                blockquote: editor.isActive("blockquote"),
+                heading: LEVELS.find((level) => editor.isActive("heading", { level })) ?? null,
+            }
+            : INACTIVE,
+    });
+    /** One insert path for the "+" menu and the slash menu. An image needs the picker first. */
+    const insert = (item) => {
+        setMenu({ open: false, query: "", active: 0 });
+        if (!editor)
+            return;
+        // The "+" menu recorded its anchor; the slash command runs at the caret (its "/" just deleted).
+        const at = anchorRef.current ?? editor.state.selection.to;
+        if (item.kind === "image") {
+            anchorRef.current = at;
+            setPicker(true);
+            return;
+        }
+        anchorRef.current = null;
+        insertBlock(editor, elementNode(item.element), at);
+    };
+    insertRef.current = insert;
+    const pickImage = (record) => {
+        assets.remember(record);
+        setPicker(false);
+        const at = anchorRef.current ?? undefined;
+        anchorRef.current = null;
+        if (editor)
+            insertBlock(editor, imageNode(record.id), at);
+    };
+    const closePicker = () => {
+        setPicker(false);
+        const at = anchorRef.current ?? undefined;
+        anchorRef.current = null;
+        editor?.commands.focus(at);
+    };
+    // Read the caret's link from the editor at open time, not from the last
+    // render: a selection change and the press can land in the same tick.
+    const openLink = () => setLink({ open: true, href: editor?.getAttributes("link").href ?? "" });
+    openLinkRef.current = openLink;
+    const closeLink = () => {
+        setLink({ open: false, href: "" });
+        editor?.commands.focus();
+    };
+    const applyLink = () => {
+        if (!editor)
+            return;
+        const href = link.href.trim();
+        const chain = editor.chain().focus().extendMarkRange("link");
+        if (href === "")
+            chain.unsetLink().run();
+        else
+            chain.setLink({ href }).run();
+        setLink({ open: false, href: "" });
+    };
+    const removeLink = () => {
+        editor?.chain().focus().extendMarkRange("link").unsetLink().run();
+        setLink({ open: false, href: "" });
+    };
+    const run = (command) => {
+        if (!editor)
+            return;
+        if (command === "link") {
+            openLink();
+            return;
+        }
+        if (command === "insert") {
+            anchorRef.current = menu.open ? null : editor.state.selection.to;
+            setMenu((m) => ({ open: !m.open, query: "", active: 0 }));
+            return;
+        }
+        const chain = editor.chain().focus();
+        if (typeof command === "object")
+            chain.toggleHeading({ level: command.heading }).run();
+        else if (command === "bold")
+            chain.toggleBold().run();
+        else if (command === "italic")
+            chain.toggleItalic().run();
+        else if (command === "bulletList")
+            chain.toggleBulletList().run();
+        else if (command === "orderedList")
+            chain.toggleOrderedList().run();
+        else if (command === "blockquote")
+            chain.toggleBlockquote().run();
+    };
+    const menuItems = filterItems(items, menu.query);
+    const closeMenu = () => {
+        setMenu({ open: false, query: "", active: 0 });
+        const at = anchorRef.current ?? undefined;
+        anchorRef.current = null;
+        editor?.commands.focus(at);
+    };
+    // The menu floats over the content, so focus leaving it (a click
+    // anywhere else) closes it — without stealing focus back to the editor.
+    const dismissMenu = (e) => {
+        if (e.currentTarget.contains(e.relatedTarget))
+            return;
+        setMenu({ open: false, query: "", active: 0 });
+        anchorRef.current = null;
+    };
+    const onMenuKeyDown = (e) => {
+        const n = Math.max(1, menuItems.length);
+        if (e.key === "Escape") {
+            e.preventDefault();
+            e.stopPropagation();
+            closeMenu();
+        }
+        if (e.key === "ArrowDown") {
+            e.preventDefault();
+            setMenu((m) => ({ ...m, active: (m.active + 1) % n }));
+        }
+        if (e.key === "ArrowUp") {
+            e.preventDefault();
+            setMenu((m) => ({ ...m, active: (m.active - 1 + n) % n }));
+        }
+        if (e.key === "Enter") {
+            e.preventDefault();
+            const item = menuItems[menu.active];
+            if (item)
+                insert(item);
+        }
+    };
+    return {
+        editor, allowed, active: active ?? INACTIVE, canInsert: items.length > 0, run,
+        link: { open: link.open, href: link.href, setHref: (href) => setLink({ open: true, href }), apply: applyLink, remove: removeLink, close: closeLink },
+        menu: {
+            open: menu.open, query: menu.query, active: menu.active, items: menuItems,
+            setQuery: (query) => setMenu({ open: true, query, active: 0 }), onKeyDown: onMenuKeyDown,
+            pick: insert, close: closeMenu, dismiss: dismissMenu,
+        },
+        slash: slash ? { state: slash, active: slashActive } : null,
+        picker: { open: picker, pick: pickImage, close: closePicker },
+    };
+}

package/dist/admin/next/bridge.js

@@ -1,41 +1,72 @@
 "use client";
 // Runs INSIDE the draft-route iframe (glue adds it only when draft mode +
-// the editor param are on). Reports geometry, forwards select/hover,
-// executes refresh/scroll — the admin overlay draws all chrome. Rects are
-// in document coordinates: the iframe is sized to the full document height
-// by the editor, so client rects + scroll offsets map 1:1 onto the overlay.
+// the editor param are on). Reports geometry — section nodes, empty zones
+// and, since spec 2026-09-10, every marked field with its resolved path —
+// forwards select/hover with the field under the pointer, executes
+// refresh/scroll, and says when a render has committed. The admin overlay
+// draws all chrome. Rects are in document coordinates: the iframe is sized
+// to the full document height by the editor, so client rects + scroll
+// offsets map 1:1 onto the overlay.
 import { useEffect } from "react";
 import { useRouter } from "next/navigation";
+import { EDITOR_ATTR, FIELD_ATTR, NODE_ATTR, ZONE_ATTR, resolveMarkPath } from "../../marks.js";
+const post = (m) => window.parent.postMessage(m, "*");
 export function EditorBridge() {
     const router = useRouter();
+    // Every commit of this component — the mount, then each RSC refresh,
+    // which re-renders the route — tells the editor the new markup is in
+    // the DOM (spec 2026-09-10 §5: the inline richtext editor lets go of
+    // its container only then).
+    useEffect(() => { post({ source: "smoodly", kind: "rendered" }); });
     useEffect(() => {
-        const post = (m) => window.parent.postMessage(m, "*");
+        const docRect = (el) => {
+            const r = el.getBoundingClientRect();
+            return { x: r.left + window.scrollX, y: r.top + window.scrollY, w: r.width, h: r.height };
+        };
+        const all = (selector) => Array.from(document.querySelectorAll(selector));
+        const inEditor = (el) => Boolean(el?.closest?.(`[${EDITOR_ATTR}]`));
         const report = () => {
             // Array.from, not spread: the package's lib set is ES2020 + DOM
             // (no DOM.Iterable), so a NodeList isn't statically iterable here.
-            const nodes = Array.from(document.querySelectorAll("[data-smoodly-node]")).map((el) => {
-                const r = el.getBoundingClientRect();
-                return { id: el.dataset.smoodlyNode, x: r.left + window.scrollX, y: r.top + window.scrollY, w: r.width, h: r.height };
-            });
-            const emptyZones = Array.from(document.querySelectorAll("[data-smoodly-zone]")).map((el) => {
-                const r = el.getBoundingClientRect();
-                return { zone: el.dataset.smoodlyZone, x: r.left + window.scrollX, y: r.top + window.scrollY, w: r.width, h: r.height };
-            });
-            post({ source: "smoodly", kind: "rects", nodes, emptyZones, docH: document.documentElement.scrollHeight });
+            const nodes = all(`[${NODE_ATTR}]`).map((el) => ({ id: el.getAttribute(NODE_ATTR), ...docRect(el) }));
+            const emptyZones = all(`[${ZONE_ATTR}]`).map((el) => ({ zone: el.getAttribute(ZONE_ATTR), ...docRect(el) }));
+            const fields = [];
+            for (const el of all(`[${FIELD_ATTR}]`)) {
+                // A mark inside the admin's own editor root (a nested element card) is not the page's.
+                if (inEditor(el))
+                    continue;
+                const mark = resolveMarkPath(el);
+                if (mark)
+                    fields.push({ ...mark, ...docRect(el) });
+            }
+            post({ source: "smoodly", kind: "rects", nodes, emptyZones, fields, docH: document.documentElement.scrollHeight });
         };
         const raf = () => requestAnimationFrame(report);
         const ro = new ResizeObserver(raf);
         ro.observe(document.documentElement);
+        // characterData too: a text session edits a text node in place, and the outline must follow.
         const mo = new MutationObserver(raf);
-        mo.observe(document.body, { subtree: true, childList: true, attributes: true });
-        const nodeIdAt = (target) => target?.closest?.("[data-smoodly-node]")?.dataset.smoodlyNode ?? null;
+        mo.observe(document.body, { subtree: true, childList: true, attributes: true, characterData: true });
+        const elementOf = (target) => target;
+        const nodeIdAt = (target) => elementOf(target)?.closest?.(`[${NODE_ATTR}]`)?.getAttribute(NODE_ATTR) ?? null;
+        const pathAt = (target) => {
+            const el = elementOf(target)?.closest?.(`[${FIELD_ATTR}]`);
+            return el ? resolveMarkPath(el)?.path ?? null : null;
+        };
         const onClick = (e) => {
             // The canvas must never navigate away from under the editor.
-            if (e.target?.closest?.("a"))
+            if (elementOf(e.target)?.closest?.("a"))
                 e.preventDefault();
-            post({ source: "smoodly", kind: "select", id: nodeIdAt(e.target) });
+            // Inside its own editor root the admin owns every click.
+            if (inEditor(elementOf(e.target)))
+                return;
+            post({ source: "smoodly", kind: "select", id: nodeIdAt(e.target), path: pathAt(e.target), x: e.clientX, y: e.clientY });
+        };
+        const onMove = (e) => {
+            if (inEditor(elementOf(e.target)))
+                return;
+            post({ source: "smoodly", kind: "hover", id: nodeIdAt(e.target), path: pathAt(e.target) });
         };
-        const onMove = (e) => post({ source: "smoodly", kind: "hover", id: nodeIdAt(e.target) });
         const onMessage = (e) => {
             const m = e.data;
             if (m?.source !== "smoodly")
@@ -44,7 +75,7 @@ export function EditorBridge() {
                 router.refresh();
             if (m.kind === "scroll") {
                 document
-                    .querySelector(`[data-smoodly-node="${CSS.escape(m.id)}"]`)
+                    .querySelector(`[${NODE_ATTR}="${CSS.escape(m.id)}"]`)
                     ?.scrollIntoView({ behavior: "smooth", block: "center" });
             }
         };

package/dist/admin/ops-impl.js

@@ -5,6 +5,7 @@ import { affectedTargets, entryTag, pageTag, sharedTag } from "../revalidate.js"
 import { ensureFixedNodes, fixedNodeOf } from "./fixed-nodes.js";
 import { ensureSharedItems } from "./shared-items.js";
 import { validateFields } from "./validate.js";
+import { elementSchemas } from "../richtext-walk.js";
 const ok = (data) => ({ ok: true, data });
 const err = (code, message, fields) => ({ ok: false, code, message, ...(fields ? { fields } : {}) });
 /** Own-property, non-array plain object — same shape guard the tree checks
@@ -88,6 +89,8 @@ export function createAdminOps(deps) {
     const { config, pages, entries, effects } = deps;
     const href = deps.href ?? ((path) => path);
     const collectionFields = (name) => config.registry.collections?.find((c) => c.name === name)?.fields ?? null;
+    // Element nodes inside richtext validate against these (spec 2026-09-08 block nodes §2).
+    const elementDescs = elementSchemas((config.registry.elements ?? []).map((e) => ({ name: e.schema.name, fields: e.schema.fields ?? {}, styles: e.schema.styles })));
     const sectionFields = (type) => config.registry.sections?.find((s) => s.schema.name === type)?.schema;
     const sharedItem = (name) => config.registry.shared?.find((s) => s.name === name) ?? null;
     /** One row per registration; null when materialization could not create it. */
@@ -278,7 +281,7 @@ export function createAdminOps(deps) {
                         const schema = sectionFields(node.type);
                         if (!schema?.fields)
                             continue;
-                        for (const fe of validateFields(node.fields ?? {}, schema.fields)) {
+                        for (const fe of validateFields(node.fields ?? {}, schema.fields, elementDescs)) {
                             fieldErrors.push({ field: `${node.id}.${fe.field}`, message: fe.message });
                         }
                     }
@@ -328,11 +331,13 @@ export function createAdminOps(deps) {
                 const record = await pages.getPage(id);
                 if (!record)
                     return err("not_found", `smoodly: no page "${id}".`);
-                if (fixedNodeOf(record, config))
-                    return owned(record, "it stays at the root");
-                if (isHomeNode(record))
-                    return err("blocked", `smoodly: "${nameOf(record)}" is the site root — it stays at the root.`);
                 if (to.parentId !== null) {
+                    // Code owns a fixed node's URL, never the root's listing order:
+                    // reparenting is refused, reordering among the root siblings is not.
+                    if (fixedNodeOf(record, config))
+                        return owned(record, "it stays at the root");
+                    if (isHomeNode(record))
+                        return err("blocked", `smoodly: "${nameOf(record)}" is the site root — it stays at the root.`);
                     const parent = await pages.getPage(to.parentId);
                     if (!parent)
                         return err("not_found", `smoodly: no page "${to.parentId}".`);
@@ -409,7 +414,7 @@ export function createAdminOps(deps) {
                 const descriptors = collectionFields(collection);
                 if (!descriptors)
                     return err("not_found", `smoodly: no collection named "${collection}".`);
-                const fieldErrors = validateFields(input.fields, descriptors);
+                const fieldErrors = validateFields(input.fields, descriptors, elementDescs);
                 if (fieldErrors.length > 0)
                     return err("validation", "Some fields need attention.", fieldErrors);
                 return ok(await entries.create(collection, input.fields, { locale: input.locale, parentId: input.parentId ?? null }));
@@ -421,7 +426,7 @@ export function createAdminOps(deps) {
                 const descriptors = collectionFields(collection);
                 if (!descriptors)
                     return err("not_found", `smoodly: no collection named "${collection}".`);
-                const fieldErrors = validateFields(fields, descriptors);
+                const fieldErrors = validateFields(fields, descriptors, elementDescs);
                 if (fieldErrors.length > 0)
                     return err("validation", "Some fields need attention.", fieldErrors);
                 const entry = await entries.update(collection, id, locale, fields);
@@ -488,7 +493,7 @@ export function createAdminOps(deps) {
                 const item = sharedItem(name);
                 if (!item)
                     return err("not_found", `smoodly: no shared item named "${name}".`);
-                const fieldErrors = validateFields(fields, item.fields);
+                const fieldErrors = validateFields(fields, item.fields, elementDescs);
                 if (fieldErrors.length > 0)
                     return err("validation", "Some fields need attention.", fieldErrors);
                 const record = await sharedRecord(name);

package/dist/admin/richtext-doc.d.ts

@@ -1,5 +1,8 @@
 /** True when any text node in the tree has non-whitespace text. */
 export declare function hasText(doc: unknown): boolean;
+/** True when the document has text, or an image or element block (spec
+ *  2026-09-08 block nodes §2): a picture alone is content. */
+export declare function hasContent(doc: unknown): boolean;
 /** The document as plain JSON. ProseMirror builds node attrs with a null
  *  prototype, which React's server-action encoding refuses to serialize
  *  (it becomes a temporary reference and the server's structuredClone

package/dist/admin/richtext-doc.js

@@ -9,6 +9,18 @@ export function hasText(doc) {
         return true;
     return Array.isArray(n.content) && n.content.some(hasText);
 }
+/** True when the document has text, or an image or element block (spec
+ *  2026-09-08 block nodes §2): a picture alone is content. */
+export function hasContent(doc) {
+    if (!doc || typeof doc !== "object")
+        return false;
+    const n = doc;
+    if (n.type === "image" || n.type === "element")
+        return true;
+    if (typeof n.text === "string" && n.text.trim() !== "")
+        return true;
+    return Array.isArray(n.content) && n.content.some(hasContent);
+}
 /** The document as plain JSON. ProseMirror builds node attrs with a null
  *  prototype, which React's server-action encoding refuses to serialize
  *  (it becomes a temporary reference and the server's structuredClone