smoodly 0.0.61 → 0.0.62

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

@@ -10,7 +10,7 @@ export type OverlaySelection = {
     /** Rendered by the site's layout, not placed in a zone: no tree gestures (spec 2026-09-13 §2). */
     layout?: boolean;
 };
-export declare function CanvasOverlay({ emptyZones, hoverRect, hoverGlobal, selection, plusButtons, fieldHover, editing, onPlus, onMove, onDuplicate, onCopy, onRemove, }: {
+export declare function CanvasOverlay({ emptyZones, hoverRect, hoverGlobal, selection, plusButtons, fieldHover, editing, dimOutside, onPlus, onMove, onDuplicate, onCopy, onRemove, }: {
     emptyZones: ZoneRect[];
     hoverRect: BridgeRect | undefined;
     /** The hovered block is a global item: the ring takes the global colour. */
@@ -21,6 +21,9 @@ export declare function CanvasOverlay({ emptyZones, hoverRect, hoverGlobal, sele
     fieldHover?: FieldRect;
     /** The field with an active inline session. */
     editing?: FieldRect;
+    /** The page above and below the selection is dimmed: the selection is the one subject (a global's own canvas,
+     *  spec 2026-11-14). A section is a full-width band, so two bands cover the rest. */
+    dimOutside?: boolean;
     /** A "+" was clicked, at these viewport coordinates. */
     onPlus(button: PlusButton, clientX: number, clientY: number): void;
     onMove(id: string, dir: -1 | 1): void;

package/dist/admin/editor/CanvasOverlay.js

@@ -1,5 +1,5 @@
 "use client";
-import { jsxs as _jsxs, jsx as _jsx, Fragment as _Fragment } from "react/jsx-runtime";
+import { jsx as _jsx, Fragment as _Fragment, jsxs as _jsxs } from "react/jsx-runtime";
 // The overlay layer above the canvas iframe — every pixel of chrome is
 // ours: empty-zone placeholders, the hover and selection outlines, the
 // selected block's tag and toolbar, and a "+" per insertable boundary.
@@ -9,9 +9,9 @@ import { useState } from "react";
 import { cx, IconButton } from "../ui/primitives.js";
 /** Pixels above a block the riding pill needs (half its height); less and it moves inside. */
 const TAG_CLEARANCE = 14;
-export function CanvasOverlay({ emptyZones, hoverRect, hoverGlobal, selection, plusButtons, fieldHover, editing, onPlus, onMove, onDuplicate, onCopy, onRemove, }) {
+export function CanvasOverlay({ emptyZones, hoverRect, hoverGlobal, selection, plusButtons, fieldHover, editing, dimOutside, onPlus, onMove, onDuplicate, onCopy, onRemove, }) {
     const [hoverPlus, setHoverPlus] = useState(null);
-    return (_jsxs("div", { style: { position: "absolute", inset: 0, pointerEvents: "none" }, children: [emptyZones.map((z) => (_jsxs("div", { className: "sm-dashed", style: {
+    return (_jsxs("div", { style: { position: "absolute", inset: 0, pointerEvents: "none" }, children: [dimOutside && selection && (_jsxs(_Fragment, { children: [_jsx("div", { "data-dim": "above", className: "sm-dim", style: { position: "absolute", left: 0, right: 0, top: 0, height: Math.max(0, selection.rect.y) } }), _jsx("div", { "data-dim": "below", className: "sm-dim", style: { position: "absolute", left: 0, right: 0, top: selection.rect.y + selection.rect.h, bottom: 0 } })] })), emptyZones.map((z) => (_jsxs("div", { className: "sm-dashed", style: {
                     position: "absolute", left: z.x + 12, top: z.y, width: Math.max(0, z.w - 24),
                     height: Math.max(56, z.h),
                 }, children: [z.zone, " \u00B7 empty"] }, `empty-${z.zone}`))), hoverRect && (_jsx("div", { style: {

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

@@ -0,0 +1,27 @@
+import { type ReactElement, type Ref } from "react";
+import type { AdminOps } from "../ops.ts";
+import type { AdminGlobal } from "../serialize.ts";
+export type GlobalCanvasHandle = {
+    /** A save of the item landed: the frame renders again (after an open inline session ends, as in the page editor). */
+    refresh(): void;
+    /** End an open inline session (the stale freeze, a reload of the item). */
+    endInline(): void;
+    /** A text value typed in the inspector, written into its marked element at once (the refresh follows the save). */
+    writeText(path: string, value: string): void;
+};
+export declare function GlobalCanvas({ ops, item, pageId, locale, fields, onPatch, onMissing, onInlinePath, ref }: {
+    ops: Pick<AdminOps, "pages" | "preview">;
+    /** A visual item. */
+    item: AdminGlobal;
+    pageId: string;
+    locale: string;
+    /** The form's draft fields: the canvas richtext editor reads its value here. */
+    fields: Record<string, unknown>;
+    /** A value typed in the frame, by dotted path inside the item's fields. */
+    onPatch(path: string, value: unknown): void;
+    /** The frame settled without drawing the item, or the page could not be loaded. Once per mount. */
+    onMissing(): void;
+    /** The content field with an open inline session, or null. */
+    onInlinePath?(path: string | null): void;
+    ref?: Ref<GlobalCanvasHandle>;
+}): ReactElement;

package/dist/admin/editor/GlobalCanvas.js

@@ -0,0 +1,159 @@
+"use client";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+// The canvas of one global item (spec 2026-11-14 sections and the global canvas §2): a real page of the site
+// that draws the item, in the page editor's frame, with the item selected for good and the rest of the page
+// dimmed. The site has no address that draws a global alone, and the admin holds none of the site's
+// components, so the picture is always a page. Composed from the page editor's pieces — the bridge, the
+// overlay, the inline session — and it owns nothing of the page: it reads the page's draft tree to find a
+// placement and never writes a page. The item's values, its save and its publish stay with the form
+// (shell/GlobalForm.tsx); this reports what was typed in the frame and is told when a save landed.
+import { useEffect, useImperativeHandle, useRef, useState } from "react";
+import { descriptorAt, getAtPath } from "../field-paths.js";
+import { MISS_QUIET_MS, globalNodeIn, missing, settled } from "../shell/global-canvas.js";
+import { canvasAddress, previewUrl } from "./canvas-address.js";
+import { CanvasOverlay } from "./CanvasOverlay.js";
+import { CanvasWarning } from "./CanvasWarning.js";
+import { InlineRichtext } from "./InlineRichtext.js";
+import { enableDraft } from "./preview-grant.js";
+import { useCanvasBridge } from "./useCanvasBridge.js";
+import { useCanvasDiagnosis } from "./useCanvasDiagnosis.js";
+import { useInlineSession } from "./useInlineSession.js";
+/** The gap kept above the item when the frame first scrolls to it. */
+const REVEAL_GAP = 24;
+const noop = () => { };
+export function GlobalCanvas({ ops, item, pageId, locale, fields, onPatch, onMissing, onInlinePath, ref }) {
+    const iframeRef = useRef(null);
+    const scrollerRef = useRef(null);
+    const [page, setPage] = useState(null);
+    const [hoverField, setHoverField] = useState(null);
+    const [seen, setSeen] = useState({ rendered: false, rectsAfterRendered: false });
+    const inlineRef = useRef(null);
+    const nodeRef = useRef(null);
+    const missed = useRef(false);
+    const followRef = useRef(true);
+    const latest = useRef({ onMissing, onPatch, onInlinePath });
+    latest.current = { onMissing, onPatch, onInlinePath };
+    const miss = () => { if (!missed.current) {
+        missed.current = true;
+        latest.current.onMissing();
+    } };
+    // Draft mode FIRST, then the page; only then the frame — a frame loaded before the cookie exists renders the
+    // published page (EditorView's order). A refusal, a folder or a page with no address here is "missing".
+    useEffect(() => {
+        let live = true;
+        (async () => {
+            const draft = await enableDraft(() => ops.preview.enable(), previewUrl());
+            if (!live)
+                return;
+            if (!draft.ok) {
+                miss();
+                return;
+            }
+            let got;
+            try {
+                got = await ops.pages.get(pageId, locale);
+            }
+            catch {
+                got = null;
+            }
+            if (!live)
+                return;
+            const url = got?.ok ? got.data.urls[locale] : undefined;
+            if (!got?.ok || !got.data.draft || !url) {
+                miss();
+                return;
+            }
+            setPage({ src: canvasAddress(url), tree: got.data.draft });
+        })();
+        return () => { live = false; };
+        // The form keys this component by page and locale: one mount, one page.
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, []);
+    const iframeSrc = page?.src ?? null;
+    const { rects, fields: fieldRects, docH, geometry, postToCanvas, onFrameLoad } = useCanvasBridge({
+        iframeRef, iframeSrc,
+        // Only the item answers a click: with a marked field under it, the inline session; anywhere else, nothing.
+        onSelect: (id, path, x, y) => {
+            if (id && id === nodeRef.current)
+                followRef.current = false;
+            if (!id || id !== nodeRef.current || !path)
+                return;
+            const descriptor = descriptorAt(item, path);
+            const kind = descriptor?.type === "text" ? "text" : descriptor?.type === "richtext" ? "richtext" : null;
+            const inline = inlineRef.current;
+            if (!kind || !inline)
+                return;
+            if (inline.session && inline.session.path === path)
+                return;
+            inline.start({ node: id, path, kind }, { x, y });
+        },
+        onHover: (id, path) => setHoverField(id && id === nodeRef.current ? path : null),
+        onRendered: () => {
+            inlineRef.current?.onRendered();
+            setSeen((s) => (s.rendered ? s : { rendered: true, rectsAfterRendered: false }));
+        },
+    });
+    // A geometry report after the first committed render: only then may "no node" be believed (global-canvas `settled`).
+    useEffect(() => {
+        setSeen((s) => (s.rendered && !s.rectsAfterRendered ? { rendered: true, rectsAfterRendered: true } : s));
+    }, [rects]);
+    const diagnosis = useCanvasDiagnosis(iframeSrc, geometry);
+    const nodeId = page ? globalNodeIn(item.name, rects, page.tree) : null;
+    nodeRef.current = nodeId;
+    const rect = nodeId ? rects.find((r) => r.id === nodeId) : undefined;
+    // "This page does not draw the item" is believed only once the frame's reports have gone quiet without it
+    // (global-canvas `missing`): every report restarts the wait, and the item arriving cancels it.
+    useEffect(() => {
+        if (!settled(seen) || nodeId !== null)
+            return;
+        const timer = setTimeout(() => { if (missing(seen, nodeRef.current, MISS_QUIET_MS))
+            miss(); }, MISS_QUIET_MS);
+        return () => clearTimeout(timer);
+        // eslint-disable-next-line react-hooks/exhaustive-deps
+    }, [seen, nodeId, rects]);
+    // The frame opens on the item and stays on it while the page settles: a footer's place moves as the images
+    // above it load and the document grows. The first scroll that is not this one — the editor's — ends it, and so
+    // does a click on the item: from then on the place under the editor is theirs.
+    const follow = followRef;
+    const lastTop = useRef(null);
+    const rectY = rect?.y;
+    useEffect(() => {
+        const scroller = scrollerRef.current;
+        if (!follow.current || rectY === undefined || !scroller)
+            return;
+        scroller.scrollTop = Math.max(0, rectY - REVEAL_GAP);
+        lastTop.current = scroller.scrollTop;
+    }, [rectY, docH]);
+    const onScroll = () => {
+        const scroller = scrollerRef.current;
+        if (scroller && lastTop.current !== null && Math.abs(scroller.scrollTop - lastTop.current) > 2)
+            follow.current = false;
+    };
+    const inline = useInlineSession({
+        iframeRef, postToCanvas,
+        patch: (node, path, value) => {
+            if (node !== nodeRef.current)
+                return;
+            latest.current.onPatch(path, value);
+            // A second element marked with the same field follows the one being typed in.
+            if (typeof value === "string")
+                inlineRef.current?.writeText(node, path, value);
+        },
+    });
+    inlineRef.current = inline;
+    const sessionPath = inline.session?.path ?? null;
+    useEffect(() => { latest.current.onInlinePath?.(sessionPath); }, [sessionPath]);
+    useImperativeHandle(ref, () => ({
+        refresh: () => inlineRef.current?.onSaved(),
+        endInline: () => inlineRef.current?.end(),
+        writeText: (path, value) => { if (nodeRef.current)
+            inlineRef.current?.writeText(nodeRef.current, path, value); },
+    }), []);
+    const fieldRectOf = (path) => (path && nodeId ? fieldRects.find((r) => r.node === nodeId && r.path === path) : undefined);
+    const selection = nodeId && rect
+        // `layout`: no tree gestures, whichever way the page draws the item — nothing here moves or removes a page's node.
+        ? { node: { id: nodeId, type: item.section ?? item.name, fields: {} }, rect, title: item.title, global: true, locked: false, layout: true }
+        : null;
+    const pageWidth = rects.reduce((w, r) => Math.max(w, r.x + r.w), 320);
+    return (_jsxs("div", { className: "sm-canvas", children: [diagnosis && (_jsx("div", { style: { display: "flex", flexDirection: "column", gap: 8, padding: "0 20px 10px" }, children: _jsx(CanvasWarning, { cause: diagnosis.cause, path: diagnosis.path }) })), _jsx("div", { className: "sm-canvas__scroll", ref: scrollerRef, onScroll: onScroll, children: _jsxs("div", { className: "sm-page", style: { overflow: "hidden" }, children: [iframeSrc ? (_jsx("iframe", { ref: iframeRef, src: iframeSrc, title: "Global 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: [], hoverRect: undefined, selection: selection, plusButtons: [], dimOutside: true, fieldHover: fieldRectOf(hoverField), editing: fieldRectOf(sessionPath), onPlus: noop, onMove: noop, onDuplicate: noop, onCopy: noop, onRemove: noop }), inline.richtext && (_jsx(InlineRichtext, { mount: inline.richtext, pageWidth: pageWidth, value: getAtPath(fields, inline.richtext.session.path), toolset: descriptorAt(item, inline.richtext.session.path)?.toolset, onChange: (doc) => { inline.markChanged(); onPatch(inline.richtext.session.path, doc); }, onEscape: inline.end }))] }) })] }));
+}

package/dist/admin/editor/InsertPicker.js

@@ -46,5 +46,5 @@ export function InsertPicker({ at, policy, registry, globalIds, paste, onInsert,
             return;
         setPlace(placePicker(at, el.scrollHeight + 2, { width: window.innerWidth, height: window.innerHeight }));
     }, [at]);
-    return (_jsx("div", { style: { position: "fixed", inset: 0, zIndex: 60 }, onClick: onClose, children: _jsxs("div", { ref: panel, className: "sm-picker", onClick: (e) => e.stopPropagation(), style: { position: "absolute", overflowY: "auto", ...place }, children: [_jsxs(SectionLabel, { caps: true, style: { padding: "6px 8px 8px" }, children: ["Add to ", at.zone] }), paste && (_jsxs("button", { type: "button", className: "sm-picker__item sm-picker__item--paste", disabled: !paste.check.ok, title: paste.check.ok ? undefined : paste.check.reason, onClick: paste.onPaste, children: [_jsx("span", { className: "sm-picker__icon", children: "\u2398" }), _jsxs("span", { style: { minWidth: 0 }, children: [_jsxs("span", { style: { display: "block", fontWeight: 600 }, children: ["Paste \"", paste.title, "\""] }), _jsx("span", { style: { display: "block", fontSize: "var(--text-sm)", color: "var(--text-muted)" }, children: paste.check.ok ? "From the clipboard" : paste.check.reason })] })] })), sections.map((section) => (_jsxs("button", { type: "button", className: "sm-picker__item", onClick: () => onInsert(section), children: [_jsx("span", { className: "sm-picker__icon", children: section.icon ?? "▤" }), _jsxs("span", { style: { minWidth: 0 }, children: [_jsx("span", { style: { display: "block", fontWeight: 600 }, children: section.title }), section.description && (_jsx("span", { style: { display: "block", fontSize: "var(--text-sm)", color: "var(--text-muted)" }, children: section.description }))] })] }, section.name))), custom && (_jsxs("button", { type: "button", className: "sm-picker__item", onClick: onInsertCustom, children: [_jsx("span", { className: "sm-picker__icon", children: "\u25A6" }), _jsxs("span", { style: { minWidth: 0 }, children: [_jsx("span", { style: { display: "block", fontWeight: 600 }, children: registry.custom.title }), _jsx("span", { style: { display: "block", fontSize: "var(--text-sm)", color: "var(--text-muted)" }, children: registry.custom.description })] })] })), globals.length > 0 && (_jsxs(_Fragment, { children: [_jsx(SectionLabel, { caps: true, style: { padding: "8px 8px 4px" }, children: "Site" }), globals.map((item) => (_jsxs("button", { type: "button", className: "sm-picker__item", onClick: () => onInsertGlobal(item), children: [_jsx("span", { className: "sm-picker__icon", children: "\u26D3" }), _jsxs("span", { style: { minWidth: 0 }, children: [_jsx("span", { style: { display: "block", fontWeight: 600 }, children: item.title }), _jsx("span", { style: { display: "block", fontSize: "var(--text-sm)", color: "var(--text-muted)" }, children: "Global \u00B7 edited in one place" })] })] }, `global-${item.name}`)))] })), sections.length === 0 && globals.length === 0 && !custom && (_jsx("p", { style: { color: "var(--text-muted)", padding: 10 }, children: "This zone doesn't accept insertions." }))] }) }));
+    return (_jsx("div", { style: { position: "fixed", inset: 0, zIndex: 60 }, onClick: onClose, children: _jsxs("div", { ref: panel, className: "sm-picker", onClick: (e) => e.stopPropagation(), style: { position: "absolute", overflowY: "auto", ...place }, children: [_jsxs(SectionLabel, { caps: true, style: { padding: "6px 8px 8px" }, children: ["Add to ", at.zone] }), paste && (_jsxs("button", { type: "button", className: "sm-picker__item sm-picker__item--paste", disabled: !paste.check.ok, title: paste.check.ok ? undefined : paste.check.reason, onClick: paste.onPaste, children: [_jsx("span", { className: "sm-picker__icon", children: "\u2398" }), _jsxs("span", { style: { minWidth: 0 }, children: [_jsxs("span", { style: { display: "block", fontWeight: 600 }, children: ["Paste \"", paste.title, "\""] }), _jsx("span", { style: { display: "block", fontSize: "var(--text-sm)", color: "var(--text-muted)" }, children: paste.check.ok ? "From the clipboard" : paste.check.reason })] })] })), sections.map((section) => (_jsxs("button", { type: "button", className: "sm-picker__item", onClick: () => onInsert(section), children: [_jsx("span", { className: "sm-picker__icon", children: section.icon ?? "▤" }), _jsxs("span", { style: { minWidth: 0 }, children: [_jsx("span", { style: { display: "block", fontWeight: 600 }, children: section.title }), section.description && (_jsx("span", { style: { display: "block", fontSize: "var(--text-sm)", color: "var(--text-muted)" }, children: section.description }))] })] }, section.name))), custom && (_jsxs("button", { type: "button", className: "sm-picker__item", onClick: onInsertCustom, children: [_jsx("span", { className: "sm-picker__icon", children: "\u25A6" }), _jsxs("span", { style: { minWidth: 0 }, children: [_jsx("span", { style: { display: "block", fontWeight: 600 }, children: registry.custom.title }), _jsx("span", { style: { display: "block", fontSize: "var(--text-sm)", color: "var(--text-muted)" }, children: registry.custom.description })] })] })), globals.length > 0 && (_jsxs(_Fragment, { children: [_jsx(SectionLabel, { caps: true, style: { padding: "8px 8px 4px" }, children: "Global" }), globals.map((item) => (_jsxs("button", { type: "button", className: "sm-picker__item", onClick: () => onInsertGlobal(item), children: [_jsx("span", { className: "sm-picker__icon", children: "\u26D3" }), _jsxs("span", { style: { minWidth: 0 }, children: [_jsx("span", { style: { display: "block", fontWeight: 600 }, children: item.title }), _jsx("span", { style: { display: "block", fontSize: "var(--text-sm)", color: "var(--text-muted)" }, children: "Global \u00B7 edited in one place" })] })] }, `global-${item.name}`)))] })), sections.length === 0 && globals.length === 0 && !custom && (_jsx("p", { style: { color: "var(--text-muted)", padding: 10 }, children: "This zone doesn't accept insertions." }))] }) }));
 }