smoodly 0.0.12 → 0.0.14

package/dist/admin/forms/reveal.js

@@ -0,0 +1,47 @@
+// Revealing a field in the inspector from a canvas click (spec 2026-09-10
+// §8): scroll its widget into view, pulse it once, focus its first
+// control; a widget inside a collapsed list row is reached by expanding
+// the row first. The path grammar is FieldWidget's; the DOM hook is the
+// data-sm-path attribute Field and ListRow carry.
+export const REVEAL_CLASS = "sm-field--reveal";
+export const PATH_ATTR = "data-sm-path";
+/** The path, then each enclosing path, outermost last. */
+export function ancestorsOf(path) {
+    const segments = path.split(".").filter((s) => s !== "");
+    const out = [];
+    for (let n = segments.length; n >= 1; n--)
+        out.push(segments.slice(0, n).join("."));
+    return out;
+}
+export function revealField(root, path) {
+    const find = (p) => root.querySelector(`[${PATH_ATTR}="${CSS.escape(p)}"]`);
+    const target = find(path);
+    if (target) {
+        pulse(target);
+        return;
+    }
+    // Inside a collapsed row: expand the nearest rendered ancestor, then look again.
+    for (const p of ancestorsOf(path).slice(1)) {
+        const row = find(p);
+        if (!row)
+            continue;
+        const toggle = row.querySelector('[aria-expanded="false"]');
+        if (toggle) {
+            toggle.click();
+            requestAnimationFrame(() => revealField(root, path));
+        }
+        else
+            pulse(row);
+        return;
+    }
+}
+function pulse(el) {
+    el.scrollIntoView({ block: "center", behavior: "smooth" });
+    el.classList.remove(REVEAL_CLASS);
+    void el.offsetWidth; // restart the animation when the same field is revealed twice
+    el.classList.add(REVEAL_CLASS);
+    el.addEventListener("animationend", () => el.classList.remove(REVEAL_CLASS), { once: true });
+    // The value control first — an image's first control is its picker button, so Enter opens the library.
+    const control = el.querySelector("input,textarea,select,[contenteditable]") ?? el.querySelector("button");
+    control?.focus({ preventScroll: true });
+}

package/dist/admin/forms/richtext-extensions.d.ts

@@ -1,5 +1,13 @@
 import { type AnyExtension } from "@tiptap/core";
 import type { Allowed } from "../../toolset.ts";
+import type { AdminElement } from "../serialize.ts";
+import { type SlashOptions } from "./richtext-nodes.ts";
+/** The slash menu's wiring: the registry's elements (the toolset picks
+ *  from them) and the widget's state and key handlers. */
+export type SlashHooks = Omit<SlashOptions, "items"> & {
+    elements: AdminElement[];
+};
 export declare function richtextExtensions(allowed: Allowed, hooks: {
     onLink(): void;
+    slash?: SlashHooks;
 }): AnyExtension[];

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

@@ -13,6 +13,8 @@ import Italic from "@tiptap/extension-italic";
 import Link from "@tiptap/extension-link";
 import Blockquote from "@tiptap/extension-blockquote";
 import { BulletList, OrderedList } from "@tiptap/extension-list";
+import { filterItems, insertItems } from "./richtext-insert.js";
+import { ElementNode, ImageNode, SlashMenu } from "./richtext-nodes.js";
 /** Keep the mark in the schema; add no way to create it when `on` is false. */
 function gateMarkConfig(on) {
     return {
@@ -32,6 +34,8 @@ const ALL_LEVELS = [1, 2, 3, 4, 5, 6];
 export function richtextExtensions(allowed, hooks) {
     const link = allowed.marks.has("link");
     const levels = allowed.headingLevels;
+    const items = hooks.slash ? insertItems(allowed, hooks.slash.elements) : [];
+    const slash = hooks.slash;
     return [
         StarterKit.configure({
             heading: false, bold: false, italic: false, link: false, blockquote: false,
@@ -70,5 +74,12 @@ export function richtextExtensions(allowed, hooks) {
                 return link ? { "Mod-k": () => { hooks.onLink(); return true; } } : {};
             },
         }),
+        // Block nodes (spec 2026-09-08 block nodes §2): always in the schema; the
+        // toolset gates the insert menu, the slash menu and paste.
+        ImageNode,
+        ElementNode,
+        ...(slash && items.length > 0
+            ? [SlashMenu.configure({ items: (q) => filterItems(items, q), onState: slash.onState, onKeyDown: slash.onKeyDown, onPick: slash.onPick })]
+            : []),
     ];
 }

package/dist/admin/forms/richtext-form-context.d.ts

@@ -0,0 +1,16 @@
+import { type ReactElement, type ReactNode } from "react";
+export type RichtextFormInfo = {
+    errors?: Record<string, string>;
+    path: string;
+    /** Mounted in the canvas: cards carry the admin's classes and the light theme (spec 2026-09-10 §5). */
+    canvas?: boolean;
+};
+export declare function RichtextFormProvider({ value, children }: {
+    value: RichtextFormInfo;
+    children: ReactNode;
+}): ReactElement;
+export declare function useRichtextForm(): RichtextFormInfo;
+/** A card's classes: inside the canvas it scopes the admin tokens to itself
+ *  (`sm-admin`, light — the page stays light) and opts out of Tailwind
+ *  typography (`not-prose`), which would otherwise style its internals. */
+export declare function cardClass(selected: boolean, canvas: boolean | undefined): string;

package/dist/admin/forms/richtext-form-context.js

@@ -0,0 +1,18 @@
+"use client";
+import { jsx as _jsx } from "react/jsx-runtime";
+// What a card inside a richtext editor needs from the enclosing form: the
+// error map and its own dotted path, so an element card can show
+// `body.elements.2.heading` under the right input — and whether the
+// editor is mounted in the canvas, where a card is admin UI on the page.
+import { createContext, useContext } from "react";
+const Ctx = createContext({ path: "" });
+export function RichtextFormProvider({ value, children }) {
+    return _jsx(Ctx.Provider, { value: value, children: children });
+}
+export function useRichtextForm() { return useContext(Ctx); }
+/** A card's classes: inside the canvas it scopes the admin tokens to itself
+ *  (`sm-admin`, light — the page stays light) and opts out of Tailwind
+ *  typography (`not-prose`), which would otherwise style its internals. */
+export function cardClass(selected, canvas) {
+    return ["sm-rtcard", selected && "sm-rtcard--selected", canvas && "sm-admin not-prose"].filter(Boolean).join(" ");
+}

package/dist/admin/forms/richtext-insert.d.ts

@@ -0,0 +1,38 @@
+import type { Node as PmNode } from "@tiptap/pm/model";
+import type { Allowed } from "../../toolset.ts";
+import type { AdminElement } from "../serialize.ts";
+export type InsertItem = {
+    kind: "image";
+    title: "Image";
+    icon: string;
+} | {
+    kind: "element";
+    title: string;
+    icon: string;
+    element: AdminElement;
+};
+export declare function insertItems(allowed: Allowed, elements: AdminElement[]): InsertItem[];
+export declare function filterItems(items: InsertItem[], query: string): InsertItem[];
+export type ElementNodeJSON = {
+    type: "element";
+    attrs: {
+        name: string;
+        fields: Record<string, unknown>;
+        styles: Record<string, unknown>;
+    };
+};
+export type ImageNodeJSON = {
+    type: "image";
+    attrs: {
+        image: {
+            asset: string;
+            alt?: string;
+        };
+        caption: string;
+    };
+};
+/** A fresh element: sample first, then the empties, styles from their defaults — as a section insertion does. */
+export declare function elementNode(element: AdminElement): ElementNodeJSON;
+export declare function imageNode(assetId: string): ImageNodeJSON;
+/** How many element nodes precede `pos` — the validator's `elements.<i>` index. */
+export declare function elementIndexAt(doc: PmNode, pos: number): number;

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

@@ -0,0 +1,37 @@
+import { nodeFromSample } from "../tree-ops.js";
+export function insertItems(allowed, elements) {
+    const byName = new Map(elements.map((e) => [e.name, e]));
+    const out = [];
+    if (allowed.image)
+        out.push({ kind: "image", title: "Image", icon: "▣" });
+    for (const name of allowed.elements) {
+        const element = byName.get(name);
+        if (element)
+            out.push({ kind: "element", title: element.title, icon: element.icon ?? "▤", element });
+    }
+    return out;
+}
+export function filterItems(items, query) {
+    const q = query.trim().toLowerCase();
+    return q === "" ? items : items.filter((i) => i.title.toLowerCase().includes(q));
+}
+/** A fresh element: sample first, then the empties, styles from their defaults — as a section insertion does. */
+export function elementNode(element) {
+    const { fields, styles } = nodeFromSample(element, "");
+    return { type: "element", attrs: { name: element.name, fields, styles: styles ?? {} } };
+}
+export function imageNode(assetId) {
+    return { type: "image", attrs: { image: { asset: assetId }, caption: "" } };
+}
+/** How many element nodes precede `pos` — the validator's `elements.<i>` index. */
+export function elementIndexAt(doc, pos) {
+    let i = 0;
+    doc.descendants((n, p) => {
+        if (p >= pos)
+            return false;
+        if (n.type.name === "element")
+            i++;
+        return true;
+    });
+    return i;
+}

package/dist/admin/forms/richtext-nodes.d.ts

@@ -0,0 +1,37 @@
+import { Extension, Node, type Editor } from "@tiptap/core";
+import { type ReactNodeViewProps } from "@tiptap/react";
+import type { ComponentType } from "react";
+import type { InsertItem, ElementNodeJSON, ImageNodeJSON } from "./richtext-insert.ts";
+type Views = {
+    image: ComponentType<ReactNodeViewProps> | null;
+    element: ComponentType<ReactNodeViewProps> | null;
+};
+/** Bind the card components once, before the first editor mounts. */
+export declare function setNodeViews(next: Views): void;
+export declare const ImageNode: Node<any, any>;
+export declare const ElementNode: Node<any, any>;
+/** 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 declare function insertBlock(editor: Editor, node: ElementNodeJSON | ImageNodeJSON, at?: number): void;
+export type SlashState = {
+    items: InsertItem[];
+    rect: DOMRect | null;
+    pick(item: InsertItem): void;
+};
+export type SlashOptions = {
+    items(query: string): InsertItem[];
+    onState(state: SlashState | null): void;
+    /** Arrow, Enter and Escape while the menu is open; true when handled. */
+    onKeyDown(event: KeyboardEvent): boolean;
+    /** The pick: this editor's widget inserts (an image needs the picker first).
+     *  Per editor, never a shared slot — a nested richtext editor inside an
+     *  element card has its own widget and must not receive the outer pick. */
+    onPick(item: InsertItem): void;
+};
+/** `/` at the start of an empty paragraph opens the insert menu (spec §3). */
+export declare const SlashMenu: Extension<SlashOptions, any>;
+export {};

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;