smoodly 0.0.12 → 0.0.13

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

@@ -0,0 +1,35 @@
+import { type CSSProperties, type KeyboardEvent, type MouseEvent, type PointerEvent as ReactPointerEvent, type RefObject } from "react";
+/** A tree surface's reading of a slot; `index` undefined = append (last child). */
+export type Projection = {
+    depth: number;
+    parentId: string | null;
+    index: number | undefined;
+};
+export type SortableOptions = {
+    /** How many rows the container's first children are. */
+    count: number;
+    /** `to` is the index in the RESULTING order. Return a promise to hold the rows in place until it settles. */
+    onDrop(from: number, to: number, projection: Projection | null): void | Promise<unknown>;
+    /** Tree surfaces: refine the slot from the pointer's x drift (px); null = invalid slot. */
+    project?(slot: number, from: number, xDrift: number): Projection | null;
+    /** Fires once when the threshold is crossed, BEFORE the rows are measured. */
+    onDragStart?(from: number): void;
+};
+export type SortableActive = {
+    from: number;
+    to: number;
+    projection: Projection | null;
+    valid: boolean;
+};
+export type Sortable = {
+    containerRef: RefObject<HTMLDivElement | null>;
+    handleProps(index: number): {
+        onPointerDown(e: ReactPointerEvent<HTMLElement>): void;
+        onKeyDown(e: KeyboardEvent<HTMLElement>): void;
+        onClick(e: MouseEvent<HTMLElement>): void;
+    };
+    rowStyle(index: number): CSSProperties;
+    rowClass(index: number): string | undefined;
+    active: SortableActive | null;
+};
+export declare function useSortable(options: SortableOptions): Sortable;

package/dist/admin/ui/useSortable.js

@@ -0,0 +1,220 @@
+"use client";
+// One drag gesture for every ordered row list in the admin (spec
+// 2026-09-09 §2–§3, §5): the maths lives in ./sortable.ts; this hook
+// owns the pointer, the one-time row measurement, autoscroll, the
+// keyboard step and the pending hold. Rows are never reordered in React
+// state during a drag — only `onDrop` changes data.
+import { useEffect, useLayoutEffect, useRef, useState, } from "react";
+import { clampOffset, gapTransforms, restingOffset, slotAt, stepIndex } from "./sortable.js";
+const THRESHOLD = 4;
+const EDGE = 32;
+const MAX_SPEED = 14;
+const TRANSITION = "transform 120ms ease";
+const scrollParent = (el) => {
+    for (let node = el; node; node = node.parentElement) {
+        const overflow = window.getComputedStyle(node).overflowY;
+        if (overflow === "auto" || overflow === "scroll")
+            return node;
+    }
+    return null;
+};
+const sameProjection = (a, b) => a === b || (a !== null && b !== null && a.depth === b.depth && a.parentId === b.parentId && a.index === b.index);
+/** The click that follows a real drag lands on the row (or its table) and
+ *  would open it — eat exactly one click, and give up if none comes. */
+const suppressNextClick = () => {
+    const eat = (e) => { e.stopPropagation(); e.preventDefault(); };
+    window.addEventListener("click", eat, { capture: true, once: true });
+    window.setTimeout(() => window.removeEventListener("click", eat, { capture: true }), 0);
+};
+const measureRows = (container, count) => {
+    const top = container.getBoundingClientRect().top;
+    return Array.from(container.children).slice(0, count).map((child) => {
+        const r = child.getBoundingClientRect();
+        return { top: r.top - top, height: r.height };
+    });
+};
+export function useSortable(options) {
+    const containerRef = useRef(null);
+    const latest = useRef(options);
+    latest.current = options;
+    const pointer = useRef(null);
+    const [active, setActive] = useState(null);
+    const [hold, setHold] = useState(null);
+    const holdRef = useRef(null);
+    holdRef.current = hold;
+    // Measure once the threshold render has committed: onDragStart may have
+    // collapsed rows (the pages tree), and those must be gone first.
+    useLayoutEffect(() => {
+        const p = pointer.current;
+        const container = containerRef.current;
+        if (!active || !p || p.rects || !container)
+            return;
+        p.rects = measureRows(container, latest.current.count);
+        p.scroller = scrollParent(container);
+    }, [active !== null]);
+    useEffect(() => () => pointer.current?.detach(), []);
+    const commit = (from, to, projection, rects) => {
+        const result = latest.current.onDrop(from, to, projection);
+        if (result && typeof result.then === "function") {
+            const next = { from, to, rects };
+            setHold(next);
+            const clear = () => setHold((h) => (h === next ? null : h));
+            result.then(clear, clear);
+        }
+    };
+    const update = (clientX, clientY) => {
+        const p = pointer.current;
+        const container = containerRef.current;
+        if (!p || !p.started || !p.rects || !container)
+            return;
+        const { project } = latest.current;
+        const raw = clientY - container.getBoundingClientRect().top - p.startCY;
+        const own = p.rects[p.from];
+        // The slot follows the pointer; the row's transform is held inside the
+        // rows' extent, since past it the scroller grows and the edge
+        // autoscroll never reaches an end.
+        const to = slotAt(p.rects, p.from, own.top + raw + own.height / 2);
+        const dy = clampOffset(p.rects, p.from, raw);
+        const projection = project ? project(to, p.from, clientX - p.startX) : null;
+        const valid = !project || projection !== null;
+        p.dy = dy;
+        const row = container.children[p.from];
+        if (row)
+            row.style.transform = `translateY(${dy}px)`;
+        if (to !== p.to || valid !== p.valid || !sameProjection(projection, p.projection)) {
+            p.to = to;
+            p.valid = valid;
+            p.projection = projection;
+            setActive({ from: p.from, to, projection, valid });
+        }
+    };
+    const tick = () => {
+        const p = pointer.current;
+        if (!p || !p.started)
+            return;
+        const s = p.scroller;
+        if (s) {
+            const r = s.getBoundingClientRect();
+            let delta = 0;
+            if (p.lastY < r.top + EDGE)
+                delta = -Math.min(MAX_SPEED, (r.top + EDGE - p.lastY) / 2);
+            else if (p.lastY > r.bottom - EDGE)
+                delta = Math.min(MAX_SPEED, (p.lastY - (r.bottom - EDGE)) / 2);
+            if (delta !== 0) {
+                s.scrollTop += delta;
+                update(p.lastX, p.lastY);
+            }
+        }
+        p.raf = window.requestAnimationFrame(tick);
+    };
+    const finish = (drop) => {
+        const p = pointer.current;
+        if (!p)
+            return;
+        p.detach();
+        window.cancelAnimationFrame(p.raf);
+        document.body.style.userSelect = "";
+        pointer.current = null;
+        if (!p.started)
+            return;
+        suppressNextClick();
+        const changed = p.to !== p.from || (p.projection !== null);
+        if (drop && p.valid && p.rects && changed)
+            commit(p.from, p.to, p.projection, p.rects);
+        setActive(null);
+    };
+    const onPointerDown = (index) => (e) => {
+        if (e.button !== 0 || pointer.current || holdRef.current)
+            return;
+        const container = containerRef.current;
+        if (!container)
+            return;
+        e.preventDefault();
+        const move = (ev) => {
+            const p = pointer.current;
+            if (!p)
+                return;
+            p.lastX = ev.clientX;
+            p.lastY = ev.clientY;
+            if (!p.started) {
+                if (Math.abs(ev.clientX - p.startX) + Math.abs(ev.clientY - p.startY) < THRESHOLD)
+                    return;
+                p.started = true;
+                document.body.style.userSelect = "none";
+                latest.current.onDragStart?.(p.from);
+                setActive({ from: p.from, to: p.from, projection: null, valid: true });
+                p.raf = window.requestAnimationFrame(tick);
+                return; // measured in the layout effect; the next move positions the row
+            }
+            ev.preventDefault();
+            update(ev.clientX, ev.clientY);
+        };
+        const up = () => finish(true);
+        const cancel = () => finish(false);
+        const key = (ev) => { if (ev.key === "Escape")
+            finish(false); };
+        pointer.current = {
+            from: index, startX: e.clientX, startY: e.clientY,
+            startCY: e.clientY - container.getBoundingClientRect().top,
+            lastX: e.clientX, lastY: e.clientY, started: false,
+            rects: null, scroller: null, raf: 0,
+            to: index, dy: 0, projection: null, valid: true,
+            detach() {
+                window.removeEventListener("pointermove", move);
+                window.removeEventListener("pointerup", up);
+                window.removeEventListener("pointercancel", cancel);
+                window.removeEventListener("keydown", key);
+            },
+        };
+        window.addEventListener("pointermove", move);
+        window.addEventListener("pointerup", up);
+        window.addEventListener("pointercancel", cancel);
+        window.addEventListener("keydown", key);
+    };
+    const onKeyDown = (index) => (e) => {
+        e.stopPropagation(); // the row's own Enter/Space handler must not see the grip's keys
+        if (e.key !== "ArrowUp" && e.key !== "ArrowDown")
+            return;
+        e.preventDefault();
+        if (pointer.current || holdRef.current)
+            return;
+        const container = containerRef.current;
+        const { count, project } = latest.current;
+        const to = stepIndex(count, index, e.key === "ArrowUp" ? -1 : 1);
+        if (to === null || !container)
+            return;
+        const projection = project ? project(to, index, 0) : null;
+        if (project && projection === null)
+            return;
+        commit(index, to, projection, measureRows(container, count));
+    };
+    const onClick = (e) => { e.stopPropagation(); e.preventDefault(); };
+    const rowStyle = (index) => {
+        const p = pointer.current;
+        if (active && p?.rects) {
+            if (index === active.from)
+                return { transform: `translateY(${p.dy}px)`, transition: "none" };
+            const shift = gapTransforms(p.rects, active.from, active.to)[index] ?? 0;
+            return { transform: `translateY(${shift}px)`, transition: TRANSITION };
+        }
+        if (hold) {
+            const y = index === hold.from
+                ? restingOffset(hold.rects, hold.from, hold.to)
+                : gapTransforms(hold.rects, hold.from, hold.to)[index] ?? 0;
+            return { transform: `translateY(${y}px)`, transition: TRANSITION };
+        }
+        return {};
+    };
+    const rowClass = (index) => {
+        if (!active || index !== active.from)
+            return undefined;
+        return active.valid ? "sm-drag--lifted" : "sm-drag--lifted sm-drag--invalid";
+    };
+    return {
+        containerRef,
+        handleProps: (index) => ({ onPointerDown: onPointerDown(index), onKeyDown: onKeyDown(index), onClick }),
+        rowStyle,
+        rowClass,
+        active,
+    };
+}

package/dist/admin/validate.d.ts

@@ -11,5 +11,10 @@ type Desc = {
     fields?: unknown;
     item?: unknown;
 };
-export declare function validateFields(values: Record<string, unknown>, descriptors: Record<string, Desc>): FieldError[];
+/** The element schemas an element node is validated against (spec 2026-09-08 block nodes §2). */
+export type ElementDescs = Record<string, {
+    fields: Record<string, Desc>;
+    styles?: Record<string, Desc>;
+}>;
+export declare function validateFields(values: Record<string, unknown>, descriptors: Record<string, Desc>, elements?: ElementDescs): FieldError[];
 export {};

package/dist/admin/validate.js

@@ -2,7 +2,8 @@
 // lives admin/server-side). Entry saves validate; page drafts do NOT
 // (drafts must save freely) — publish validates every node. Objects and
 // lists recurse; error paths are dotted (`cta.href`, `points.2.heading`).
-import { hasText } from "./richtext-doc.js";
+import { hasContent } from "./richtext-doc.js";
+import { ELEMENT_NODE, richtextBlocks } from "../richtext-walk.js";
 const subfields = (d) => d.fields && typeof d.fields === "object" ? d.fields : {};
 const itemOf = (d) => d.item && typeof d.item === "object" ? d.item : undefined;
 const isEmpty = (v) => v === undefined || v === null || v === "" || (Array.isArray(v) && v.length === 0);
@@ -10,15 +11,33 @@ const isEmpty = (v) => v === undefined || v === null || v === "" || (Array.isArr
  *  may be absent — may be absent altogether. */
 const mayBeAbsent = (d) => d.optional === true || (d.type === "object" && Object.values(subfields(d)).every(mayBeAbsent));
 const plural = (n, word) => `${n} ${word}${n === 1 ? "" : "s"}`;
-function validateValue(path, value, d, errors) {
+function validateValue(path, value, d, errors, elements) {
     if (isEmpty(value)) {
         if (!mayBeAbsent(d))
             errors.push({ field: path, message: "Required." });
         return;
     }
-    if (d.type === "richtext" && !hasText(value)) {
-        if (!mayBeAbsent(d))
-            errors.push({ field: path, message: "Required." });
+    if (d.type === "richtext") {
+        if (!hasContent(value)) {
+            if (!mayBeAbsent(d))
+                errors.push({ field: path, message: "Required." });
+            return;
+        }
+        // Element nodes (spec 2026-09-08 block nodes §2): fields validated against
+        // the element's descriptors, indexed among the document's element nodes.
+        let i = 0;
+        for (const node of richtextBlocks(value)) {
+            if (node.type !== ELEMENT_NODE)
+                continue;
+            const a = node.attrs;
+            const el = typeof a.name === "string" ? elements[a.name] : undefined;
+            if (el) {
+                const fields = (a.fields && typeof a.fields === "object" ? a.fields : {});
+                for (const [k, sub] of Object.entries(el.fields))
+                    validateValue(`${path}.elements.${i}.${k}`, fields[k], sub, errors, elements);
+            }
+            i++;
+        }
         return;
     }
     if (d.type === "image" || d.type === "video" || d.type === "file") {
@@ -38,7 +57,7 @@ function validateValue(path, value, d, errors) {
             errors.push({ field: path, message: `At most ${plural(d.max, "item")}.` });
         const item = itemOf(d);
         if (item)
-            value.forEach((v, i) => validateValue(`${path}.${i}`, v, item, errors));
+            value.forEach((v, i) => validateValue(`${path}.${i}`, v, item, errors, elements));
         return;
     }
     if (d.type === "object") {
@@ -47,7 +66,7 @@ function validateValue(path, value, d, errors) {
             return;
         }
         for (const [k, sub] of Object.entries(subfields(d)))
-            validateValue(`${path}.${k}`, value[k], sub, errors);
+            validateValue(`${path}.${k}`, value[k], sub, errors, elements);
         return;
     }
     if (d.type === "select" && Array.isArray(d.options) && !d.options.includes(value)) {
@@ -57,9 +76,9 @@ function validateValue(path, value, d, errors) {
         errors.push({ field: path, message: `Must be at most ${d.max} characters.` });
     }
 }
-export function validateFields(values, descriptors) {
+export function validateFields(values, descriptors, elements = {}) {
     const errors = [];
     for (const [field, d] of Object.entries(descriptors))
-        validateValue(field, values[field], d, errors);
+        validateValue(field, values[field], d, errors, elements);
     return errors;
 }

package/dist/config.d.ts

@@ -7,6 +7,7 @@ type Registered = {
         name: string;
         slug?: string | Record<string, string>;
         collection?: string;
+        fields?: Record<string, Descriptor>;
         styles?: Record<string, Descriptor>;
         styleDefaults?: false | {
             omit: string[];

package/dist/config.js

@@ -125,10 +125,46 @@ function assertLocales(config) {
     if (!supported.includes(def))
         throw new Error(`smoodly: the default locale "${def}" is not in the supported list.`);
 }
+/** Every element name a richtext toolset embeds, walking objects and lists. */
+function toolsetElementNames(descriptors, out) {
+    for (const d of Object.values(descriptors ?? {})) {
+        if (d.type === "richtext") {
+            const t = d.toolset;
+            if (Array.isArray(t?.elements))
+                for (const n of t.elements)
+                    if (typeof n === "string")
+                        out.add(n);
+        }
+        else if (d.type === "object") {
+            toolsetElementNames(d.fields, out);
+        }
+        else if (d.type === "list") {
+            toolsetElementNames({ item: d.item }, out);
+        }
+    }
+}
+/** A field can never offer an element the admin cannot serialize (spec 2026-09-08 block nodes §1). */
+function assertToolsetElements(config) {
+    const registered = new Set((config.registry.elements ?? []).map((e) => e.schema.name));
+    const wanted = new Set();
+    for (const s of config.registry.sections ?? [])
+        toolsetElementNames(s.schema.fields, wanted);
+    for (const e of config.registry.elements ?? [])
+        toolsetElementNames(e.schema.fields, wanted);
+    for (const c of config.registry.collections ?? [])
+        toolsetElementNames(c.fields, wanted);
+    for (const s of config.registry.shared ?? [])
+        toolsetElementNames(s.fields, wanted);
+    for (const name of wanted) {
+        if (!registered.has(name))
+            throw new Error(`smoodly: a toolset embeds element "${name}", which is not in registry.elements.`);
+    }
+}
 export function defineConfig(config) {
     assertLocales(config);
     assertUniqueNames(config);
     assertSharedSections(config);
+    assertToolsetElements(config);
     assertRootSegments(config);
     const depth = config.pages?.tree?.depth ?? 1;
     if (!Number.isInteger(depth) || depth < 1)

package/dist/entry-store.d.ts

@@ -1,6 +1,6 @@
 import type { CollectionSchema, EntryOrder } from "./collections.ts";
 import type { SharedSchema } from "./shared.ts";
-import { type RefEdge } from "./refs.ts";
+import { type RefEdge, type SectionLike } from "./refs.ts";
 import { MemoryRefIndex } from "./ref-index.ts";
 import { type PathIndex } from "./path-index.ts";
 import { type LocaleSet, type PathTarget } from "./paths.ts";
@@ -63,6 +63,8 @@ export type EntryStoreOptions = {
     paths?: PathIndex;
     locales?: LocaleSet;
     shared?: SharedSchema[];
+    /** Registered Elements a richtext document may embed (spec 2026-09-08 block nodes §2). */
+    elements?: SectionLike[];
 };
 export interface EntryStore {
     /** Creates the node and ONE locale row from the merged `fields`: shared
@@ -166,7 +168,7 @@ export declare function entryFieldsIn(record: EntryRecord, locale: string): Reco
  *  moved past. Safe-delete must hold while ANY of them shows the target,
  *  since the published site still renders it (DESIGN.md §3 "Page edges
  *  in refs", the same stance). */
-export declare function entryRefEdges(fieldSets: Record<string, unknown>[], schema: CollectionSchema<any>): RefEdge[];
+export declare function entryRefEdges(fieldSets: Record<string, unknown>[], schema: CollectionSchema<any>, elements?: SectionLike[]): RefEdge[];
 /** What a message calls an entry: its title field in that locale, else its id. */
 export declare function entryTitleIn(record: EntryRecord, locale: string, schema: CollectionSchema<any>): string;
 /**
@@ -192,6 +194,7 @@ export declare class MemoryEntryStore implements EntryStore {
     private paths;
     private locales;
     private schemas;
+    private elements;
     constructor(collections: CollectionSchema<any>[], refs?: MemoryRefIndex, options?: EntryStoreOptions);
     private schema;
     private row;

package/dist/entry-store.js

@@ -92,10 +92,10 @@ export function entryFieldsIn(record, locale) {
  *  moved past. Safe-delete must hold while ANY of them shows the target,
  *  since the published site still renders it (DESIGN.md §3 "Page edges
  *  in refs", the same stance). */
-export function entryRefEdges(fieldSets, schema) {
+export function entryRefEdges(fieldSets, schema, elements) {
     const edges = [];
     for (const fields of fieldSets)
-        edges.push(...collectEntryRefs(fields, schema));
+        edges.push(...collectEntryRefs(fields, schema, elements));
     return edges;
 }
 /** What a message calls an entry: its title field in that locale, else its id. */
@@ -148,6 +148,7 @@ export class MemoryEntryStore {
         this.paths = options.paths ?? new MemoryPathIndex();
         this.locales = options.locales ?? DEFAULT_ENTRY_LOCALES;
         this.schemas = [...collections, ...(options.shared ?? [])];
+        this.elements = options.elements;
     }
     schema(collection) {
         return schemaOf(this.schemas, collection);
@@ -223,7 +224,7 @@ export class MemoryEntryStore {
         await this.paths.rewrite(nodes.map((n) => ({ kind: "entry", id: n.id })), entryPathRows(nodes, this.byId, this.schema(collection), this.locales));
     }
     writeRefs(entry) {
-        this.refs.rewrite({ sourceKind: "entry", sourceId: entry.id }, entryRefEdges(this.liveFieldSets(entry), this.schema(entry.collection)));
+        this.refs.rewrite({ sourceKind: "entry", sourceId: entry.id }, entryRefEdges(this.liveFieldSets(entry), this.schema(entry.collection), this.elements));
     }
     siblings(collection, parentId, except) {
         return [...this.entries.values()]

package/dist/fields.d.ts

@@ -42,6 +42,10 @@ type NotLocalized<B> = B extends {
 } ? Fl extends {
     localized: true;
 } ? never : B : B;
+export declare const describePath: (path: string) => string;
+/** First path at which `matches` is true of the descriptor, walking into
+ *  object subfields and a list's item, or null. */
+export declare function findMatch(d: Descriptor, matches: (d: Descriptor) => boolean, path?: string): string | null;
 export declare const f: {
     text: () => FieldBuilder<string, {}>;
     link: () => FieldBuilder<string, {}>;

package/dist/fields.js

@@ -22,10 +22,10 @@ function builder(descriptor) {
         tab: (tab) => chain({ tab }),
     };
 }
-const describePath = (path) => (path === "" ? "the item" : `"${path}"`);
+export const describePath = (path) => (path === "" ? "the item" : `"${path}"`);
 /** First path at which `matches` is true of the descriptor, walking into
  *  object subfields and a list's item, or null. */
-function findMatch(d, matches, path = "") {
+export function findMatch(d, matches, path = "") {
     if (matches(d))
         return path;
     if (d.type === "object") {

package/dist/image/SmoodlyImage.d.ts

@@ -14,5 +14,8 @@ export type SmoodlyImageProps = {
     alt?: string;
     loader?: ImageLoader;
     unoptimized?: boolean;
+} & {
+    /** Data attributes land on the wrapper box — a section's field mark (spec 2026-09-10 §1). */
+    [attr: `data-${string}`]: string | undefined;
 };
-export declare function SmoodlyImage({ image, aspect, sizes, priority, loading, className, style, alt, loader, unoptimized }: SmoodlyImageProps): ReactElement;
+export declare function SmoodlyImage({ image, aspect, sizes, priority, loading, className, style, alt, loader, unoptimized, ...data }: SmoodlyImageProps): ReactElement;

package/dist/image/SmoodlyImage.js

@@ -5,11 +5,11 @@ import { jsx as _jsx } from "react/jsx-runtime";
 // site imports from the media layer. Server-safe — no "use client".
 import Image from "next/image";
 import { boxAspectOf, frameFor } from "./crop-math.js";
-export function SmoodlyImage({ image, aspect, sizes, priority, loading, className, style, alt, loader, unoptimized }) {
+export function SmoodlyImage({ image, aspect, sizes, priority, loading, className, style, alt, loader, unoptimized, ...data }) {
     const box = boxAspectOf(image, aspect);
     const frame = loader?.handlesCrop ? { left: 0, top: 0, width: 100, height: 100 } : frameFor(image, box);
     const svg = image.mime === "image/svg+xml";
-    return (_jsx("span", { className: className, style: { display: "block", position: "relative", overflow: "hidden", aspectRatio: String(box), ...style }, children: _jsx(Image, { src: image.url, alt: alt ?? image.alt, width: image.width, height: image.height, sizes: sizes, priority: priority, loading: loading, unoptimized: unoptimized ?? svg, ...(loader ? { loader: ({ width, quality }) => loader.url(image, { width, quality }) } : {}), style: {
+    return (_jsx("span", { className: className, ...data, style: { display: "block", position: "relative", overflow: "hidden", aspectRatio: String(box), ...style }, children: _jsx(Image, { src: image.url, alt: alt ?? image.alt, width: image.width, height: image.height, sizes: sizes, priority: priority, loading: loading, unoptimized: unoptimized ?? svg, ...(loader ? { loader: ({ width, quality }) => loader.url(image, { width, quality }) } : {}), style: {
                 position: "absolute", left: `${frame.left}%`, top: `${frame.top}%`,
                 width: `${frame.width}%`, height: `${frame.height}%`, maxWidth: "none",
             } }) }));

package/dist/index.d.ts

@@ -5,9 +5,11 @@ import { Section } from "./section-wrapper.tsx";
 import { page } from "./render.tsx";
 import { entryPage } from "./entry-page.tsx";
 import { shared } from "./shared.ts";
+import { marks } from "./marks.ts";
 export { Zone, renderPage, EMPTY_PAGE_CONTEXT } from "./render.tsx";
 export type { PageTree, TreeNode, ZoneContent, PairedPage, Registry, PageContext, PageContextLink, PageLink, PageViewProps } from "./render.tsx";
-export { RichText } from "./richtext-render.tsx";
+export { RichText, defaultRichTextImage } from "./richtext-render.tsx";
+export type { RichTextProps, RichTextElement, RichTextImageProps } from "./richtext-render.tsx";
 export type { PageSchema } from "./page.ts";
 export { fixedSlug } from "./page.ts";
 export type { EntryPageSchema, PairedEntryPage, EntryPageProps } from "./entry-page.tsx";
@@ -25,6 +27,8 @@ export { SupabasePageStore } from "./supabase-store.ts";
 export { SupabaseAssetStore } from "./supabase-asset-store.ts";
 export { collectEntryRefs, collectTreeRefs } from "./refs.ts";
 export type { RefEdge, SectionLike } from "./refs.ts";
+export { richtextBlocks, elementSchemas, IMAGE_NODE, ELEMENT_NODE } from "./richtext-walk.ts";
+export type { BlockNode, ElementSchemas, ImageNodeAttrs, ElementNodeAttrs } from "./richtext-walk.ts";
 export { MemoryRefIndex } from "./ref-index.ts";
 export { MemoryPathIndex } from "./path-index.ts";
 export type { PathIndex } from "./path-index.ts";
@@ -126,7 +130,10 @@ export declare const smoodly: {
     toolset: typeof toolset;
     shared: typeof shared;
     Section: typeof Section;
+    marks: typeof marks;
 };
+export { NODE_ATTR, ZONE_ATTR, EMPTY_ATTR, FIELD_ATTR, ITEM_ATTR, EDITOR_ATTR, resolveMarkPath } from "./marks.ts";
+export type { MarkNode, MarkPath, Marks, Scope } from "./marks.ts";
 export { resolveSmoodlyEnv, smoodlyEnv } from "./env.ts";
 export type { SmoodlyEnv } from "./env.ts";
 export { clientOptions, createSmoodlyClient } from "./client.ts";

package/dist/index.js

@@ -6,8 +6,9 @@ import { Section } from "./section-wrapper.js";
 import { page } from "./render.js";
 import { entryPage } from "./entry-page.js";
 import { shared } from "./shared.js";
+import { marks } from "./marks.js";
 export { Zone, renderPage, EMPTY_PAGE_CONTEXT } from "./render.js";
-export { RichText } from "./richtext-render.js";
+export { RichText, defaultRichTextImage } from "./richtext-render.js";
 export { fixedSlug } from "./page.js";
 export { f } from "./fields.js";
 export { ASSET_COLLECTION, DEFAULT_MEDIA, MEDIA_TYPES, FULL_CROP, CENTER_HOTSPOT, parseAspect, cropAspect, clamp01, isMediaValue, collectAssetIds, applyAssets, } from "./media.js";
@@ -20,6 +21,7 @@ export { imageDimensions } from "./image-dimensions.js";
 export { SupabasePageStore } from "./supabase-store.js";
 export { SupabaseAssetStore } from "./supabase-asset-store.js";
 export { collectEntryRefs, collectTreeRefs } from "./refs.js";
+export { richtextBlocks, elementSchemas, IMAGE_NODE, ELEMENT_NODE } from "./richtext-walk.js";
 export { MemoryRefIndex } from "./ref-index.js";
 export { MemoryPathIndex } from "./path-index.js";
 export { MemoryEntryStore } from "./entry-store.js";
@@ -46,7 +48,9 @@ export const smoodly = {
     toolset,
     shared,
     Section,
+    marks,
 };
+export { NODE_ATTR, ZONE_ATTR, EMPTY_ATTR, FIELD_ATTR, ITEM_ATTR, EDITOR_ATTR, resolveMarkPath } from "./marks.js";
 export { resolveSmoodlyEnv, smoodlyEnv } from "./env.js";
 export { clientOptions, createSmoodlyClient } from "./client.js";
 export { createSmoodlySite, pageContextOf } from "./site.js";

package/dist/marks.d.ts

@@ -0,0 +1,53 @@
+import type { BuilderMap, NamespaceValues } from "./schema.ts";
+/** A section's root, from `<smoodly.Section>` in editor mode. */
+export declare const NODE_ATTR = "data-smd-node";
+/** An empty zone's placeholder box, from `<Zone>` in editor mode. */
+export declare const ZONE_ATTR = "data-smd-zone";
+export declare const EMPTY_ATTR = "data-smd-empty";
+/** The element that renders a field's value verbatim. */
+export declare const FIELD_ATTR = "data-smd-field";
+/** A list item's or object field's root: scopes the field names inside it. */
+export declare const ITEM_ATTR = "data-smd-item";
+/** The root of an inline editing session inside the canvas; the bridge
+ *  forwards nothing from inside it, and reports no marks under it. */
+export declare const EDITOR_ATTR = "data-smd-editor";
+/** What the resolver needs from an element — a DOM Element satisfies it. */
+export type MarkNode = {
+    getAttribute(name: string): string | null;
+    parentElement: MarkNode | null;
+};
+export type MarkPath = {
+    node: string;
+    path: string;
+};
+/** The section node and dotted field path of a marked element: its own
+ *  field name, prefixed by every item scope from the element itself up to
+ *  the section root. Null when the element carries no field mark or sits
+ *  outside a section node. */
+export declare function resolveMarkPath(el: MarkNode): MarkPath | null;
+type Keys<T> = Extract<keyof T, string>;
+type ElementOf<T> = NonNullable<T> extends readonly (infer E)[] ? E : never;
+/** The helpers for one level of a section's values: the section itself,
+ *  a list item, or an object field. Item attributes are relative to the
+ *  parent scope — the resolver joins them — so the helpers carry no path. */
+export type Marks<T> = {
+    /** Spread on the element that renders `key` verbatim. */
+    field<K extends Keys<T>>(key: K): {
+        "data-smd-field": K;
+    };
+    /** List item `index` of `key`: spread `.attrs` on the item's root and mark the fields inside with the returned helpers. */
+    item<K extends Keys<T>>(key: K, index: number): Scope<ElementOf<T[K]>>;
+    /** The object field `key`: spread `.attrs` on its root and mark the fields inside. */
+    object<K extends Keys<T>>(key: K): Scope<NonNullable<T[K]>>;
+};
+export type Scope<T> = Marks<T> & {
+    attrs: {
+        "data-smd-item": string;
+    };
+};
+/** Typed marks for a section or element schema: `const m = smoodly.marks(heroSchema)`,
+ *  then `<h1 {...m.field("heading")}>`. The raw attributes stay the contract. */
+export declare function marks<S extends {
+    __f?: BuilderMap;
+}>(_schema: S): Marks<NamespaceValues<NonNullable<S["__f"]>>>;
+export {};