@webround/editor 0.0.0-stage → 0.3.0

package/dist/bridge.js

@@ -0,0 +1,970 @@
+// packages/editor/src/bridge.ts
+import { wrBoxGaps } from './gaps';
+import { isWrInteractive, WR_INTERACTIVE_ATTR } from './interactive';
+import { scopeOfId, scopeOfAnchor, pageEdgeOf, WR_SCOPE_NAME_ATTR, scopeOfElement, getPageScope, setPageScope } from './scope';
+import { WR_STYLE_PREVIEW_CSS } from '@webround/core/style';
+import { getWrValue } from './registry';
+import { measurePage } from './measure';
+import { navigationTo, pathOf } from './nav';
+import { wrDropTargetAt } from './drop';
+import { wrOp, wrCreatePage, wrDeletePage, wrListPages, wrUpdatePage, wrSaveLangs, wrListLangs, wrRemoveThemeItem, wrSetThemeItem, wrGetTheme, wrSetThemeDark, wrGetSeo, wrSetSeo, wrSetSeoSite, wrSuggestSeo, wrCheckProject, wrPruneJson, wrMuteIssue, wrGetComments, wrAddComment, wrResolveComment, wrDeleteComment, } from './save';
+function getRect(el) {
+    const r = el.getBoundingClientRect();
+    return { top: r.top, left: r.left, width: r.width, height: r.height };
+}
+/** The room the parent leaves an element (its content box; none in a grid) and the size of 1rem: what a dragged width can snap to. */
+function getParentSize(el) {
+    const parent = el.parentElement;
+    if (!parent)
+        return null;
+    const style = getComputedStyle(parent);
+    const px = (value) => parseFloat(value) || 0;
+    // A percentage width of a grid item is a part of its grid area, not of the grid: no room is claimed there (0), so a width is never snapped to a fraction that would come out smaller
+    const inGrid = /grid/.test(style.display);
+    return {
+        width: inGrid ? 0 : Math.max(0, parent.clientWidth - px(style.paddingLeft) - px(style.paddingRight)),
+        height: Math.max(0, parent.clientHeight - px(style.paddingTop) - px(style.paddingBottom)),
+        rem: px(getComputedStyle(document.documentElement).fontSize) || 16,
+    };
+}
+/** The room an element has inside (padding) and around (margin), side by side, as the page shows it now (see `WrBoxSpace`): what the handles on the page start from. */
+function getBoxSpace(el) {
+    const style = getComputedStyle(el);
+    const px = (value) => parseFloat(value) || 0;
+    return {
+        padding: [px(style.paddingTop), px(style.paddingRight), px(style.paddingBottom), px(style.paddingLeft)],
+        margin: [px(style.marginTop), px(style.marginRight), px(style.marginBottom), px(style.marginLeft)],
+    };
+}
+/** Where the gap between the children of a flex or grid box is on the page (see `WrBoxGaps`): the box and its children are measured here, what is a band is `wrBoxGaps`'s. */
+function getBoxGaps(el) {
+    const style = getComputedStyle(el);
+    if (!/(flex|grid)/.test(style.display))
+        return null;
+    const px = (value) => parseFloat(value) || 0;
+    const box = el.getBoundingClientRect();
+    const padL = px(style.paddingLeft);
+    const padT = px(style.paddingTop);
+    const kids = Array.from(el.children).filter(k => { const c = getComputedStyle(k); return c.display !== 'none' && c.display !== 'contents' && c.position !== 'absolute' && c.position !== 'fixed'; }).map(getRect);
+    return wrBoxGaps({
+        display: style.display, columnGap: px(style.columnGap), rowGap: px(style.rowGap), kids,
+        content: { top: box.top + el.clientTop + padT, left: box.left + el.clientLeft + padL, width: Math.max(0, el.clientWidth - padL - px(style.paddingRight)), height: Math.max(0, el.clientHeight - padT - px(style.paddingBottom)) },
+    });
+}
+/** How the children of a box fill the room the box leaves them (see `WrBoxFit`): the children that take part in the layout, against the content box. */
+function getBoxFit(el) {
+    const style = getComputedStyle(el);
+    const px = (value) => parseFloat(value) || 0;
+    const padX = [px(style.paddingLeft), px(style.paddingRight)];
+    const padY = [px(style.paddingTop), px(style.paddingBottom)];
+    const kids = Array.from(el.children).filter(k => { const c = getComputedStyle(k); return c.display !== 'none' && c.position !== 'absolute' && c.position !== 'fixed'; }).map(k => k.getBoundingClientRect());
+    if (kids.length === 0)
+        return null;
+    const span = (low, high) => Math.max(...high) - Math.min(...low);
+    return {
+        contentWidth: Math.max(0, el.clientWidth - padX[0] - padX[1]), contentHeight: Math.max(0, el.clientHeight - padY[0] - padY[1]),
+        kidsWidth: span(kids.map(k => k.left), kids.map(k => k.right)), kidsHeight: span(kids.map(k => k.top), kids.map(k => k.bottom)), padX, padY,
+    };
+}
+/**
+ * The smallest the element can be (see `WrBoxFloor`), measured on the page itself: it is asked to be nothing for a moment and what it comes to is read. Nothing is drawn in between:
+ * the transitions are off while it happens and the element is given back, and the page is laid out once more, before they are back, so that none starts.
+ */
+function getBoxFloor(el) {
+    if (!(el instanceof HTMLElement))
+        return null;
+    const saved = (target, property) => [target.style.getPropertyValue(property), target.style.getPropertyPriority(property)];
+    const give = (target, property, [value, priority]) => { if (value)
+        target.style.setProperty(property, value, priority);
+    else
+        target.style.removeProperty(property); };
+    // The page keeps its size while the element is nothing: a shorter document would pull the scroll position with it (and cut a scroll that is going on)
+    const root = document.documentElement;
+    const hold = [saved(root, 'min-height'), saved(root, 'min-width')];
+    root.style.setProperty('min-height', `${root.scrollHeight}px`);
+    root.style.setProperty('min-width', `${root.scrollWidth}px`);
+    const transition = saved(el, 'transition');
+    el.style.setProperty('transition', 'none', 'important');
+    const floor = { width: 0, height: 0 };
+    for (const property of ['width', 'height']) {
+        const was = saved(el, property);
+        el.style.setProperty(property, '0px', 'important');
+        floor[property] = Math.ceil(el.getBoundingClientRect()[property]);
+        give(el, property, was);
+    }
+    el.getBoundingClientRect();
+    give(el, 'transition', transition);
+    give(root, 'min-height', hold[0]);
+    give(root, 'min-width', hold[1]);
+    return floor;
+}
+// The floor depends on the element and its size, not on where it is on the page: it is measured again when either changes, not on every scroll
+let floorOf = null;
+function boxFloor(el, rect) {
+    const size = rect ? `${Math.round(rect.width)}x${Math.round(rect.height)}` : '';
+    if (floorOf && floorOf.el === el && floorOf.size === size)
+        return floorOf.floor;
+    floorOf = { el, size, floor: getBoxFloor(el) };
+    return floorOf.floor;
+}
+function parseEl(el) {
+    const scope = scopeOfElement(el);
+    return {
+        ...(scope && scope.name !== getPageScope()?.name ? { scope: scope.name } : {}),
+        type: el.getAttribute('data-wr-type') ?? 'unknown',
+        id: el.getAttribute('data-wr-id'),
+        parentId: el.parentElement?.closest('[data-wr-id]')?.getAttribute('data-wr-id') ?? null,
+    };
+}
+let bridgeOrigin = null;
+let selectedEl = null;
+let wrNavigate = null;
+export function setWrNavigate(navigate) {
+    wrNavigate = navigate;
+}
+let wrUndo = null;
+let wrRedo = null;
+export function setWrHistory(undo, redo) {
+    wrUndo = undo;
+    wrRedo = redo;
+}
+// La pagina corrente: il suo file e il suo JSON. Gli elementi di header e footer hanno un ambito loro (vedi scope.ts).
+let wrPageFile = null;
+let wrPageName = null;
+const syncPageScope = () => { if (wrPageFile && wrPageName)
+    setPageScope({ file: wrPageFile, name: wrPageName }); };
+export function setWrPageFile(file) { wrPageFile = file; syncPageScope(); }
+export function setWrPageName(pageName) { wrPageName = pageName; syncPageScope(); }
+let wrAstHistoryPush = null;
+export function setWrAstHistoryPush(fn) {
+    wrAstHistoryPush = fn;
+}
+// Una modifica di stile: le classi di prima e di dopo, perché l'undo le rimette ESATTAMENTE così (cosa una modifica ha sostituito non si dice come un'altra modifica).
+let wrStyleHistoryPush = null;
+export function setWrStyleHistoryPush(fn) {
+    wrStyleHistoryPush = fn;
+}
+let wrMoveHistoryPush = null;
+export function setWrMoveHistoryPush(fn) {
+    wrMoveHistoryPush = fn;
+}
+let wrNodeHistoryPush = null;
+export function setWrNodeHistoryPush(fn) {
+    wrNodeHistoryPush = fn;
+}
+export async function fetchNode(elementId, scope = scopeOfId(elementId)) {
+    if (!scope)
+        return { fields: [], values: {} };
+    const result = await wrOp('node-get', { file: scope.file, id: elementId });
+    return result.ok && result.data ? { fields: result.data.fields, values: result.data.values } : { fields: [], values: {} };
+}
+/** Come è stilato un elemento (le sue classi, per proprietà e breakpoint), nella forma che l'editor mostra. */
+export async function fetchStyle(elementId, scope = scopeOfId(elementId)) {
+    const empty = { elementId, editable: false, className: null, styles: [], unmanaged: [] };
+    if (!scope)
+        return { ...empty, error: 'element not found' };
+    const result = await wrOp('style-get', { file: scope.file, id: elementId });
+    return result.ok && result.data ? { elementId, ...result.data } : { ...empty, error: result.error };
+}
+/** Rimette le classi di un elemento esattamente come dette (l'undo e il redo di una modifica di stile). */
+export async function restoreStyle(elementId, className, scope = scopeOfId(elementId)) {
+    if (!scope)
+        return false;
+    return (await wrOp('style-restore', { file: scope.file, id: elementId, className })).ok;
+}
+/** value === null rimuove l'attributo (usato solo internamente, dall'undo). */
+export async function putNode(elementId, key, value, scope = scopeOfId(elementId)) {
+    if (!scope)
+        return false;
+    return (await wrOp('node-set', { file: scope.file, id: elementId, key, value })).ok;
+}
+/**
+ * `{ error }` = l'operazione non l'ha cancellato e dice perché (es. la radice di un header); `null` = niente da fare (nessun file).
+ * Insieme al nodo se ne vanno i valori JSON suoi e dei discendenti: lo fa l'operazione, per tutti.
+ */
+export async function deleteNode(elementId, scope = scopeOfId(elementId)) {
+    if (!scope)
+        return null;
+    const result = await wrOp('node-delete', { file: scope.file, id: elementId });
+    if (result.ok && result.data)
+        return result.data;
+    return result.error ? { error: result.error } : null;
+}
+export async function moveNode(elementId, anchor, anchorMode, scope = scopeOfId(elementId)) {
+    if (!scope)
+        return { ok: false, error: 'no active file' };
+    const result = await wrOp('node-move', { file: scope.file, id: elementId, anchor, mode: anchorMode });
+    return result.ok && result.data ? { ok: true, from: result.data.from } : { ok: false, code: result.code, error: result.error ?? `HTTP ${result.status}` };
+}
+/**
+ * Inserisce markup JSX (un inserimento di sottoalbero, e l'undo di una delete). L'operazione lo valida e sceglie gli id; i valori JSON
+ * iniziali (`jsonSeed`) li scrive lei, con gli id che ha scelto.
+ */
+// A copy or a block is written in the code and the dev server redraws the page. Now and then a write is not taken (the server read the file while it was being written, or the
+// message to the browser was lost): the code has the element and the page does not, and the editor would show a page that is not the code. So the page checks that what was added is
+// there, and if it is not after a while it is loaded again from the code.
+const RENDER_WAIT_MS = 5000;
+const RENDER_CHECK_MS = 250;
+function ensureRendered(ids) {
+    if (ids.length === 0)
+        return;
+    const started = Date.now();
+    const check = () => {
+        if (ids.every(id => document.querySelector(`[data-wr-id="${CSS.escape(id)}"]`)))
+            return;
+        if (Date.now() - started > RENDER_WAIT_MS) {
+            window.location.reload();
+            return;
+        }
+        setTimeout(check, RENDER_CHECK_MS);
+    };
+    setTimeout(check, RENDER_CHECK_MS * 2);
+}
+/** An insert asked for by the editor: written, put in the history (when it can be undone by id) and answered. Shared by the blocks of the catalog and by duplicating. */
+function runInsert(data) {
+    const { jsx, jsonSeed, uniqueIds } = data;
+    const { anchor, mode: anchorMode } = pageEdgeOf(data.anchor, data.anchorMode);
+    const scope = scopeOfAnchor(anchor);
+    insertRawNode(anchor, anchorMode, jsx, uniqueIds !== false, scope, jsonSeed)
+        .then(async (result) => {
+        const { ok, ids, rootIds, undoable, idMap, code, error } = result;
+        if (!ok) {
+            post({ type: 'wr:node:insert:response', ok: false, ids: [], rootIds: [], undoable: false, idMap: {}, code, error });
+            return;
+        }
+        // I valori iniziali erano per gli id chiesti: l'operazione li ha scritti con gli id che ha scelto
+        const seed = jsonSeed ? Object.fromEntries(Object.entries(jsonSeed).map(([id, value]) => [idMap[id] ?? id, value])) : undefined;
+        // Solo ciò che si può rimuovere per id entra nella cronologia: un <div> di primo livello non ha id da cui annullarlo
+        if (undoable && scope)
+            wrNodeHistoryPush?.({ op: 'insert', scope, elementIds: rootIds, jsx: result.jsx, anchor, anchorMode, jsonSeed: seed });
+        post({ type: 'wr:node:insert:response', ok: true, ids, rootIds, undoable, idMap });
+        ensureRendered(rootIds);
+    })
+        .catch(err => post({ type: 'wr:node:insert:response', ok: false, ids: [], rootIds: [], undoable: false, idMap: {}, error: String(err) }));
+}
+export async function insertRawNode(anchor, anchorMode, rawJsx, uniqueIds = true, scope = scopeOfAnchor(anchor), jsonSeed) {
+    const failed = (error, code) => ({ ok: false, ids: [], rootIds: [], undoable: false, idMap: {}, jsx: rawJsx, error, code });
+    if (!scope)
+        return failed('no active file');
+    const result = await wrOp('node-insert', {
+        file: scope.file, anchor, mode: anchorMode, jsx: rawJsx, uniqueIds, ...(jsonSeed ? { jsonSeed } : {}),
+    });
+    if (!result.ok || !result.data)
+        return failed(result.error ?? `HTTP ${result.status}`, result.code);
+    const { ids, rootIds, undoable, idMap, jsx } = result.data;
+    return { ok: true, ids: ids ?? [], rootIds: rootIds ?? [], undoable: undoable === true, idMap: idMap ?? {}, jsx: jsx ?? rawJsx };
+}
+function post(msg) {
+    if (!bridgeOrigin)
+        return;
+    window.parent.postMessage(msg, bridgeOrigin);
+}
+/** The shared styles of the site, told to the editor. Said again after anything that can change them or where they are used. */
+function postStyleSets() {
+    wrOp('styleset-list', {})
+        .then(res => post({ type: 'wr:styleset:list:response', sets: res.ok && res.data ? res.data.sets : [], ...(res.ok ? {} : { error: res.error }) }))
+        .catch(err => post({ type: 'wr:styleset:list:response', sets: [], error: String(err) }));
+}
+/**
+ * Something that changes the classes of an ELEMENT (a value, a copy between screens, a shared style put on it or taken off): one operation, one answer (`wr:style:set:response`, with what
+ * the classes are now) and one step of undo (what they were and what they are). `action`: it is also a shared-styles action, so it says how it went and the list is told again.
+ */
+function runElementStyle(elementId, operation, params, action) {
+    const scope = scopeOfId(elementId);
+    if (!scope) {
+        post({ type: 'wr:style:set:response', elementId, ok: false, error: 'element not found' });
+        if (action)
+            post({ type: 'wr:styleset:result', ...action, ok: false, error: 'element not found' });
+        return;
+    }
+    wrOp(operation, { file: scope.file, id: elementId, ...params })
+        .then((res) => {
+        if (!res.ok || !res.data) {
+            post({ type: 'wr:style:set:response', elementId, ok: false, error: res.error, code: res.code });
+            if (action)
+                post({ type: 'wr:styleset:result', ...action, ok: false, error: res.error, code: res.code });
+            return;
+        }
+        const { changed, previous, className, styles, unmanaged, states, sets } = res.data;
+        if (changed)
+            wrStyleHistoryPush?.(elementId, previous, className, scope);
+        post({ type: 'wr:style:set:response', elementId, ok: true, changed, className, styles, unmanaged, ...(states ? { states } : {}), ...(sets ? { sets } : {}) });
+        if (action) {
+            post({ type: 'wr:styleset:result', ...action, ok: true });
+            postStyleSets();
+        }
+    })
+        .catch((err) => {
+        post({ type: 'wr:style:set:response', elementId, ok: false, error: String(err) });
+        if (action)
+            post({ type: 'wr:styleset:result', ...action, ok: false, error: String(err) });
+    });
+}
+/** An action on a shared style itself (make an empty one, take it off every element, rename it, delete it): it says how it went, then the list. Not in the undo history: it can touch many files. */
+function runStyleSetOp(action, operation, params, name) {
+    wrOp(operation, params)
+        .then((res) => {
+        post({ type: 'wr:styleset:result', action, name, ok: res.ok, ...(res.ok ? {} : { error: res.error, code: res.code }) });
+        postStyleSets();
+    })
+        .catch(err => post({ type: 'wr:styleset:result', action, name, ok: false, error: String(err) }));
+}
+/** How a shared style looks and what it holds, read or changed: the same operations as for an element, by its name. A change says how many elements move with it. Not in the undo history. */
+function runStyleSetStyle(name, operation, params) {
+    wrOp(operation, { set: name, ...params })
+        .then((res) => {
+        if (!res.ok || !res.data) {
+            post({ type: 'wr:styleset:style:response', name, ok: false, error: res.error, code: res.code });
+            return;
+        }
+        const { className, styles, unmanaged, states, usedBy } = res.data;
+        post({ type: 'wr:styleset:style:response', name, ok: true, className, styles, unmanaged, ...(states ? { states } : {}), usedBy });
+        if (operation !== 'style-get')
+            postStyleSets();
+    })
+        .catch(err => post({ type: 'wr:styleset:style:response', name, ok: false, error: String(err) }));
+}
+export function postToEditor(msg, transfer) {
+    const origin = bridgeOrigin ?? '*';
+    window.parent.postMessage(msg, origin, transfer);
+}
+function scan() {
+    const elements = Array.from(document.querySelectorAll('[data-wr-id]')).map(parseEl);
+    post({ type: 'wr:scan', elements });
+}
+// The page is measured (contrast, targets, text size…) a moment after the page stops changing, and again when its theme changes (the class on <html>): a burst of changes
+// measures once. What is measured is what the visitor sees now.
+const MEASURE_DELAY_MS = 900;
+let measureTimer;
+function scheduleMeasure() {
+    clearTimeout(measureTimer);
+    measureTimer = setTimeout(() => {
+        const pathname = pathOf(window.location.pathname);
+        post({ type: 'wr:measure:report', pathname, findings: measurePage(document) });
+    }, MEASURE_DELAY_MS);
+}
+let hoveredEl = null;
+function postSelect(el) {
+    const id = el.getAttribute('data-wr-id');
+    lastGeometry = '';
+    post({
+        type: 'wr:select',
+        element: parseEl(el),
+        rect: getRect(el),
+        parent: getParentSize(el),
+        fit: getBoxFit(el),
+        space: getBoxSpace(el),
+        gaps: getBoxGaps(el),
+        value: getWrValue(id ?? ''),
+    });
+}
+function postDeselect() {
+    post({ type: 'wr:select', element: null, rect: null, value: null });
+}
+function clearHighlight() {
+    document.querySelectorAll('[data-wr-highlighted]')
+        .forEach(el => el.removeAttribute('data-wr-highlighted'));
+}
+export function refreshSelection(id) {
+    if (selectedEl?.getAttribute('data-wr-id') === id) {
+        postSelect(selectedEl);
+    }
+}
+// Browsing as a visitor (the editor's preview mode): the page is not selected or hovered by clicking and pointing
+let browsing = false;
+function onClick(e) {
+    if (browsing)
+        return;
+    // A control the editor puts on the page itself (`data-wr-editor-ui`, e.g. "Back to the form" in a confirmation) is neither a selection nor a deselection
+    if (e.target.closest('[data-wr-editor-ui]'))
+        return;
+    const el = e.target.closest('[data-wr-id]');
+    // Un elemento interattivo non si seleziona cliccandolo (vedi interactive.ts): un click altrove deseleziona
+    if (!el || isWrInteractive(el)) {
+        if (selectedEl) {
+            selectedEl = null;
+            clearHighlight();
+            postDeselect();
+        }
+        return;
+    }
+    selectedEl = el;
+    postSelect(el);
+}
+// An element drawn INSIDE a link or a button (the text beside an icon, a picture in a button) is selected by clicking it, and the click must not also follow the link or press the button: the page
+// would go away (or a product would be added to the cart) while someone is only trying to change the text. The link or the button itself (its padding, its icon) still acts, and is selected by its
+// handle. This runs while the click goes down (capture), before the page's own handlers, and stops it there.
+//
+// An element inside a `<label>` (the text of a field) is another thing: it is edited where it is, so its own click must go on. Only what the label does with it is stopped: the label would send the
+// focus to its field, and the text being edited would lose it (and be closed).
+function onClickInsideInteractive(e) {
+    if (browsing)
+        return;
+    const target = e.target;
+    if (target.closest('[data-wr-editor-ui]'))
+        return;
+    const el = target.closest('[data-wr-id]');
+    // (A text being edited is drawn without its own `data-wr-id`, inside `data-wr-editing`: it counts as the text it is)
+    const label = target.closest('label');
+    if (label && !target.closest('input, select, textarea, button') && (target.closest('[data-wr-editing]') || (el && label.contains(el) && !isWrInteractive(el))))
+        e.preventDefault();
+    if (!el || isWrInteractive(el) || !el.parentElement?.closest(`[${WR_INTERACTIVE_ATTR}]`))
+        return;
+    e.preventDefault();
+    e.stopPropagation();
+    selectedEl = el;
+    postSelect(el);
+}
+const MOVE_KEYS = { ArrowUp: 'up', ArrowDown: 'down', ArrowLeft: 'out', ArrowRight: 'in' };
+/** Alt + frecce con un elemento selezionato: lo spostamento lo decide l'editor (conosce l'albero), qui si inoltra soltanto il tasto. */
+function onKeyDown(e) {
+    const direction = MOVE_KEYS[e.key];
+    if (!direction || !e.altKey || e.ctrlKey || e.metaKey || !selectedEl)
+        return;
+    const target = e.target;
+    if (target?.closest('input, textarea, select, [contenteditable="true"]'))
+        return; // lì le frecce sono del testo
+    e.preventDefault();
+    post({ type: 'wr:move:key', direction });
+}
+function onScroll() {
+    postCommentRects();
+    syncGeometry();
+}
+// Where the selected and the hovered element are. The editor draws their outlines over the preview, so it must be told whenever they move or change shape, whatever the reason
+// (scroll, resize, a change of style, an image that loads, an animation, the code being edited): rather than listening for each reason, the rectangles are compared at a
+// short interval and when the page scrolls, and said again only when they changed. An element that was replaced (the page redrew) is found again by its id.
+const GEOMETRY_EVERY_MS = 50;
+let lastGeometry = '';
+function stillThere(el) {
+    if (!el || el.isConnected)
+        return el;
+    const id = el.getAttribute('data-wr-id');
+    return id ? document.querySelector(`[data-wr-id="${CSS.escape(id)}"]`) : null;
+}
+function syncGeometry() {
+    if (!selectedEl && !hoveredEl)
+        return;
+    // An element that is not on the page right now (a text turns into its editor while it is written, and comes back) has no rectangle, and keeps being the selected one: it is
+    // found again by its id when it returns. Whether it was deleted is the editor's to say, not this loop's.
+    const selectedNow = stillThere(selectedEl);
+    if (selectedNow)
+        selectedEl = selectedNow;
+    const hoveredNow = stillThere(hoveredEl);
+    if (hoveredNow)
+        hoveredEl = hoveredNow;
+    const selected = selectedNow ? getRect(selectedNow) : null;
+    const hovered = hoveredNow ? getRect(hoveredNow) : null;
+    const parent = selectedNow ? getParentSize(selectedNow) : null;
+    const fit = selectedNow ? getBoxFit(selectedNow) : null;
+    const floor = selectedNow ? boxFloor(selectedNow, selected) : null;
+    const space = selectedNow ? getBoxSpace(selectedNow) : null;
+    const gaps = selectedNow ? getBoxGaps(selectedNow) : null;
+    const said = JSON.stringify([selected, hovered, parent, fit, floor, space, gaps]);
+    if (said === lastGeometry)
+        return;
+    lastGeometry = said;
+    post({ type: 'wr:rects', selected, hovered, parent, fit, floor, space, gaps });
+}
+// The elements the editor wants a dot on (they have an open comment): where they are now, said again when the page scrolls, resizes or changes
+const RECTS_DELAY_MS = 30;
+let commentMarks = [];
+let rectsTimer;
+function postCommentRects() {
+    if (commentMarks.length === 0 || rectsTimer)
+        return;
+    // A timer, not an animation frame: a page in a tab that is not shown gets no frames, and the dots would not follow it
+    rectsTimer = setTimeout(() => {
+        rectsTimer = undefined;
+        const rects = [];
+        for (const { scope, id } of commentMarks) {
+            const el = Array.from(document.querySelectorAll(`[data-wr-id="${CSS.escape(id)}"]`)).find(candidate => (scopeOfElement(candidate)?.name ?? getPageScope()?.name) === scope);
+            if (el)
+                rects.push({ scope, id, rect: getRect(el) });
+        }
+        post({ type: 'wr:comments:rects', rects });
+    }, RECTS_DELAY_MS);
+}
+/** Every comment, as the editor lists them (after a change too). */
+function postComments() {
+    wrGetComments().then((response) => post({ type: 'wr:comments:response', ...response }));
+}
+// The element the pointer is over now (to say a hover once), and the one the editor still has a handle on (`hoveredEl`): the handle is in the editor, outside the page, so the
+// pointer leaves the page to reach it and the editor keeps the outline until the pointer leaves the handle too. The outline follows its element all that time (scroll included).
+let pointerOverEl = null;
+function onPointerOver(e) {
+    if (browsing)
+        return;
+    const el = e.target.closest('[data-wr-id]');
+    // Solo gli elementi interattivi segnalano l'hover: la maniglia è il loro modo di essere selezionati
+    if (!el || !isWrInteractive(el))
+        return;
+    if (pointerOverEl === el)
+        return;
+    pointerOverEl = el;
+    hoveredEl = el;
+    lastGeometry = '';
+    post({ type: 'wr:hover', element: parseEl(el), rect: getRect(el) });
+}
+function onPointerOut(e) {
+    const el = e.target.closest('[data-wr-id]');
+    if (!el || el !== pointerOverEl)
+        return;
+    const related = e.relatedTarget?.closest('[data-wr-id]');
+    if (related === pointerOverEl)
+        return;
+    pointerOverEl = null;
+}
+// The path the editor was last told. Only another path is a navigation: the query and the hash change under a page that does not (a shop's filters), and then nothing is deselected
+let lastNavPath = null;
+function sendNav() {
+    const pathname = navigationTo(lastNavPath, window.location.pathname);
+    if (pathname === null)
+        return;
+    lastNavPath = pathname;
+    selectedEl = null;
+    hoveredEl = null;
+    pointerOverEl = null;
+    clearHighlight();
+    postDeselect();
+    post({ type: 'wr:navigate', pathname });
+}
+// An element shown at a value that is not written yet (dragging a handle, or a number): the CSS is applied for the moment, and what the element had is kept to give back. Only the
+// properties of `WR_STYLE_PREVIEW_CSS` are touched, whatever the editor asks.
+const PREVIEW_SETTLE_MS = 2000;
+/** How far the page scrolls with each probe of a drag held at its top or bottom edge. */
+const DROP_SCROLL_PX = 24;
+let preview = null;
+/** How often a written size that has not reached the page yet is looked for, and how much a rectangle may differ for the page to count as showing it. */
+const PREVIEW_CHECK_MS = 50;
+const PREVIEW_SAME_PX = 1;
+function endPreview(settle) {
+    const current = preview;
+    if (!current)
+        return;
+    const restore = () => {
+        current.stop?.();
+        if (preview === current)
+            preview = null;
+        for (const [property, value] of current.original)
+            current.el.style.setProperty(property, value);
+    };
+    if (!settle) {
+        restore();
+        return;
+    }
+    // What was just written reaches the page a moment later: the code is saved, the classes change, and the stylesheet that makes them mean something comes after (the CSS is
+    // generated from the classes). Until the page itself shows the size, what was shown stays: the classes changing is not enough, or the element would flash back to its old size.
+    const arrived = () => {
+        const { el } = current;
+        const was = el.getBoundingClientRect();
+        for (const [property, value] of current.original)
+            el.style.setProperty(property, value);
+        const now = el.getBoundingClientRect();
+        if (Math.abs(now.width - was.width) <= PREVIEW_SAME_PX && Math.abs(now.height - was.height) <= PREVIEW_SAME_PX)
+            return true;
+        for (const [property, value] of current.shown)
+            el.style.setProperty(property, value);
+        return false;
+    };
+    let written = false;
+    const check = () => { if (written && arrived()) {
+        current.stop?.();
+        if (preview === current)
+            preview = null;
+    } };
+    const observer = new MutationObserver(() => { written = true; check(); });
+    observer.observe(current.el, { attributes: true, attributeFilter: ['class'] });
+    const poll = setInterval(check, PREVIEW_CHECK_MS);
+    const timer = setTimeout(restore, PREVIEW_SETTLE_MS);
+    current.stop = () => { observer.disconnect(); clearInterval(poll); clearTimeout(timer); };
+}
+function showPreview(elementId, styles) {
+    const el = document.querySelector(`[data-wr-id="${CSS.escape(elementId)}"]`);
+    if (!el)
+        return;
+    if (preview && preview.el !== el)
+        endPreview(false);
+    if (preview) {
+        preview.stop?.();
+        preview.stop = undefined;
+    }
+    else
+        preview = { el, original: new Map(), shown: new Map() };
+    for (const [property, value] of Object.entries(styles)) {
+        if (!WR_STYLE_PREVIEW_CSS.has(property) || typeof value !== 'string')
+            continue;
+        if (!preview.original.has(property))
+            preview.original.set(property, el.style.getPropertyValue(property));
+        el.style.setProperty(property, value);
+        preview.shown.set(property, value);
+    }
+}
+function onMessage(e) {
+    if (bridgeOrigin !== '*' && e.origin !== bridgeOrigin)
+        return;
+    const data = e.data;
+    switch (data?.type) {
+        case 'wr:highlight': {
+            clearHighlight();
+            const target = document.querySelector(`[data-wr-id="${data.element.id}"]`);
+            if (target) {
+                selectedEl = target;
+                target.setAttribute('data-wr-highlighted', 'true');
+                // chi seleziona dall'editor (un nuovo blocco appena aggiunto, un elemento dall'elenco) deve vederlo
+                target.scrollIntoView({ block: 'nearest', inline: 'nearest', behavior: 'smooth' });
+                postSelect(target);
+            }
+            break;
+        }
+        case 'wr:drop:probe': {
+            const dragged = data.elementId ? document.querySelector(`[data-wr-id="${CSS.escape(data.elementId)}"]`) : null;
+            if (data.scroll)
+                window.scrollBy({ top: data.scroll * DROP_SCROLL_PX, behavior: 'instant' });
+            post({ type: 'wr:drop:target', target: data.elementId && !dragged ? null : wrDropTargetAt(dragged, data.x, data.y) });
+            break;
+        }
+        case 'wr:style:preview':
+            if (data.styles)
+                showPreview(data.elementId, data.styles);
+            else
+                endPreview(data.settle === true);
+            break;
+        case 'wr:browse':
+            browsing = data.on === true;
+            if (browsing) {
+                selectedEl = null;
+                hoveredEl = null;
+                pointerOverEl = null;
+                clearHighlight();
+                postDeselect();
+                post({ type: 'wr:hover:clear' });
+            }
+            break;
+        case 'wr:highlight:clear':
+            selectedEl = null;
+            clearHighlight();
+            break;
+        case 'wr:navigate:push':
+            if (wrNavigate) {
+                wrNavigate(data.pathname);
+            }
+            else {
+                history.pushState({}, '', data.pathname);
+            }
+            break;
+        case 'wr:undo':
+            wrUndo?.();
+            break;
+        case 'wr:redo':
+            wrRedo?.();
+            break;
+        case 'wr:page:create': {
+            const { pageName, component, lazy } = data;
+            wrCreatePage(pageName, component, lazy)
+                .then((res) => post(res.ok ? { type: 'wr:page:created', pageName } : { type: 'wr:page:created', pageName, error: res.error ?? `HTTP ${res.status}` }));
+            break;
+        }
+        case 'wr:page:list': {
+            wrListPages().then((res) => post({ type: 'wr:page:list:response', pages: res.ok ? res.data?.pages ?? [] : [] }));
+            break;
+        }
+        case 'wr:page:delete': {
+            const { pageName } = data;
+            wrDeletePage(pageName)
+                .then((res) => post(res.ok ? { type: 'wr:page:deleted', pageName } : { type: 'wr:page:deleted', pageName, error: res.error ?? `HTTP ${res.status}` }));
+            break;
+        }
+        case 'wr:page:update': {
+            const { pageName, newPageName, newComponent, lazy, header, footer } = data;
+            wrUpdatePage(pageName, { newPageName, newComponent, lazy, header, footer })
+                .then((res) => post(res.ok ? { type: 'wr:page:updated', pageName } : { type: 'wr:page:updated', pageName, error: res.error ?? `HTTP ${res.status}` }));
+            break;
+        }
+        case 'wr:seo:get': {
+            // The page asked for, or the one shown
+            wrGetSeo(data.pageName).then((response) => post({ type: 'wr:seo:get:response', ...response }));
+            break;
+        }
+        case 'wr:seo:suggest': {
+            wrSuggestSeo(data.pageName, data.lang).then((response) => post({ type: 'wr:seo:suggest:response', ...response }));
+            break;
+        }
+        case 'wr:check:run': {
+            wrCheckProject().then((response) => post({ type: 'wr:check:response', ...response }));
+            break;
+        }
+        case 'wr:issue:mute': {
+            wrMuteIssue(data.key, data.muted).then((res) => post(res.ok ? { type: 'wr:issue:muted' } : { type: 'wr:issue:muted', error: res.error ?? `HTTP ${res.status}` }));
+            break;
+        }
+        case 'wr:json:prune': {
+            wrPruneJson(data.page).then((response) => post({ type: 'wr:json:pruned', ...response }));
+            break;
+        }
+        case 'wr:comments:get': {
+            postComments();
+            break;
+        }
+        case 'wr:comment:add':
+        case 'wr:comment:resolve':
+        case 'wr:comment:delete': {
+            // One answer for all three: the list as it is now (or why it did not change)
+            const change = data.type === 'wr:comment:add' ? wrAddComment(data) : data.type === 'wr:comment:resolve' ? wrResolveComment(data.id, data.resolved) : wrDeleteComment(data.id);
+            change.then((res) => {
+                if (res.ok)
+                    postComments();
+                else
+                    post({ type: 'wr:comments:response', comments: [], open: 0, error: res.error ?? `HTTP ${res.status}` });
+            });
+            break;
+        }
+        case 'wr:comments:marks': {
+            commentMarks = data.marks;
+            postCommentRects();
+            break;
+        }
+        case 'wr:seo:set': {
+            const { type: _type, ...fields } = data;
+            wrSetSeo(fields).then((res) => post(res.ok ? { type: 'wr:seo:updated' } : { type: 'wr:seo:updated', error: res.error ?? `HTTP ${res.status}`, code: res.code }));
+            break;
+        }
+        case 'wr:seo:site:set': {
+            const { type: _type, ...fields } = data;
+            wrSetSeoSite(fields).then((res) => post(res.ok ? { type: 'wr:seo:updated' } : { type: 'wr:seo:updated', error: res.error ?? `HTTP ${res.status}`, code: res.code }));
+            break;
+        }
+        case 'wr:langs:list': {
+            wrListLangs()
+                .then((langs) => post({ type: 'wr:langs:list:response', langs }))
+                .catch(() => post({ type: 'wr:langs:list:response', langs: null }));
+            break;
+        }
+        case 'wr:langs:update': {
+            const { langs } = data;
+            wrSaveLangs(langs)
+                .then((res) => post(res.ok ? { type: 'wr:langs:updated' } : { type: 'wr:langs:updated', error: res.error ?? `HTTP ${res.status}` }));
+            break;
+        }
+        case 'wr:node:get': {
+            const { elementId } = data;
+            fetchNode(elementId).then(({ fields, values }) => post({ type: 'wr:node:get:response', elementId, fields, values }));
+            break;
+        }
+        case 'wr:node:set': {
+            const { elementId, key, value, prevValue } = data;
+            const scope = scopeOfId(elementId);
+            putNode(elementId, key, value, scope)
+                .then(ok => {
+                if (ok && scope)
+                    wrAstHistoryPush?.(elementId, key, prevValue, value, scope);
+                post({ type: 'wr:node:set:response', elementId, key, ok });
+            })
+                .catch(err => post({ type: 'wr:node:set:response', elementId, key, ok: false, error: String(err) }));
+            break;
+        }
+        case 'wr:style:catalog': {
+            wrOp('style-catalog', {})
+                .then(res => post({ type: 'wr:style:catalog:response', catalog: res.ok ? (res.data ?? null) : null, ...(res.ok ? {} : { error: res.error }) }))
+                .catch(err => post({ type: 'wr:style:catalog:response', catalog: null, error: String(err) }));
+            break;
+        }
+        case 'wr:style:get': {
+            fetchStyle(data.elementId).then(res => post({ type: 'wr:style:get:response', ...res }));
+            break;
+        }
+        case 'wr:style:set':
+            runElementStyle(data.elementId, 'style-set', { changes: data.changes, ...(data.everywhere ? { everywhere: true } : {}) });
+            break;
+        case 'wr:style:copy':
+            runElementStyle(data.elementId, 'style-copy', { from: data.from, to: data.to });
+            break;
+        case 'wr:styleset:list':
+            postStyleSets();
+            break;
+        case 'wr:styleset:create':
+            if (data.elementId)
+                runElementStyle(data.elementId, 'styleset-create', { name: data.name }, { action: 'create', name: data.name });
+            else
+                runStyleSetOp('create', 'styleset-create', { name: data.name }, data.name);
+            break;
+        case 'wr:styleset:apply':
+            runElementStyle(data.elementId, 'styleset-apply', { name: data.name }, { action: 'apply', name: data.name });
+            break;
+        case 'wr:styleset:detach':
+            runElementStyle(data.elementId, 'styleset-detach', {}, { action: 'detach' });
+            break;
+        case 'wr:styleset:detach-all':
+            runStyleSetOp('detach-all', 'styleset-detach-all', { name: data.name }, data.name);
+            break;
+        case 'wr:styleset:rename':
+            runStyleSetOp('rename', 'styleset-rename', { name: data.name, to: data.to }, data.to);
+            break;
+        case 'wr:styleset:delete':
+            runStyleSetOp('delete', 'styleset-delete', { name: data.name }, data.name);
+            break;
+        case 'wr:styleset:get':
+            runStyleSetStyle(data.name, 'style-get', {});
+            break;
+        case 'wr:styleset:set':
+            runStyleSetStyle(data.name, 'style-set', { changes: data.changes, ...(data.everywhere ? { everywhere: true } : {}) });
+            break;
+        case 'wr:styleset:copy':
+            runStyleSetStyle(data.name, 'style-copy', { from: data.from, to: data.to });
+            break;
+        case 'wr:node:delete': {
+            const { elementId } = data;
+            const scope = scopeOfId(elementId); // PRIMA: dopo la delete l'elemento non c'è più per chiederglielo
+            deleteNode(elementId, scope)
+                .then(async (result) => {
+                if (!result || !scope || 'error' in result) {
+                    post({ type: 'wr:node:delete:response', elementId, removedIds: [], ok: false, error: result && 'error' in result ? result.error : 'no active file' });
+                    return;
+                }
+                const { removedIds, removedJsx, anchor, anchorMode } = result;
+                // I valori JSON dei nodi cancellati li ha già tolti l'operazione; la cronologia li legge dal React state
+                // (chiuso sopra, non da qui). Senza un posto da cui reinserirlo l'undo non può esistere: nella cronologia non entra (non la blocca)
+                const undoable = anchor !== null;
+                if (undoable)
+                    wrNodeHistoryPush?.({ op: 'delete', scope, elementIds: [elementId], jsx: removedJsx, removedIds, anchor, anchorMode });
+                post({ type: 'wr:node:delete:response', elementId, removedIds, ok: true, undoable });
+            })
+                .catch(err => post({ type: 'wr:node:delete:response', elementId, removedIds: [], ok: false, error: String(err) }));
+            break;
+        }
+        case 'wr:node:insert': {
+            runInsert(data);
+            break;
+        }
+        case 'wr:node:duplicate': {
+            // The copy goes right after the original, with what it contains and the values it has: it is read from the code (node-source) and inserted like any block
+            const scope = scopeOfId(data.elementId);
+            const fail = (error, code) => post({ type: 'wr:node:insert:response', ok: false, ids: [], rootIds: [], undoable: false, idMap: {}, code, error });
+            if (!scope) {
+                fail('no active file');
+                break;
+            }
+            // The header and the footer are one element each (the root of their component): a copy of it would have nowhere to go
+            if (document.querySelector(`[data-wr-id="${CSS.escape(data.elementId)}"]`)?.parentElement?.hasAttribute(WR_SCOPE_NAME_ATTR)) {
+                fail('the root of the header or the footer cannot be duplicated', 'component-root');
+                break;
+            }
+            wrOp('node-source', { file: scope.file, id: data.elementId })
+                .then(source => {
+                if (!source.ok || !source.data) {
+                    fail(source.error ?? `HTTP ${source.status}`, source.code);
+                    return;
+                }
+                runInsert({ jsx: source.data.jsx, anchor: { id: data.elementId }, anchorMode: 'after', jsonSeed: source.data.json });
+            })
+                .catch(err => fail(String(err)));
+            break;
+        }
+        case 'wr:node:move': {
+            const { elementId, anchor, anchorMode } = data;
+            const scope = scopeOfId(elementId);
+            const target = scopeOfAnchor(anchor);
+            const reply = (ok, code, error) => post({ type: 'wr:node:move:response', elementId, ok, code, error });
+            // Un elemento non cambia file: uscire dall'header per entrare nella pagina vorrebbe dire spostare anche il suo JSON
+            if (!scope || !target || scope.name !== target.name) {
+                reply(false, 'other-scope', 'an element can only be moved inside its own page, header or footer');
+                break;
+            }
+            moveNode(elementId, anchor, anchorMode, scope)
+                .then(result => {
+                if (!result.ok) {
+                    reply(false, result.code, result.error);
+                    return;
+                }
+                wrMoveHistoryPush?.({ scope, elementId, from: result.from, to: { anchor, mode: anchorMode } });
+                reply(true);
+            })
+                .catch(err => reply(false, undefined, String(err)));
+            break;
+        }
+        case 'wr:theme:get': {
+            wrGetTheme()
+                .then(({ items, dark }) => post({ type: 'wr:theme:get:response', items, dark }))
+                .catch(err => post({ type: 'wr:theme:get:response', items: [], error: String(err) }));
+            break;
+        }
+        case 'wr:theme:set-item': {
+            const { item } = data;
+            wrSetThemeItem(item)
+                .then((res) => post({ type: 'wr:theme:set-item:response', kind: item.kind, key: item.key, ok: res.ok, ...(res.ok ? {} : { error: res.error ?? `HTTP ${res.status}` }) }));
+            break;
+        }
+        case 'wr:theme:dark': {
+            const { enabled } = data;
+            wrSetThemeDark(enabled)
+                .then((res) => post({ type: 'wr:theme:dark:response', enabled, ok: res.ok, ...(res.ok ? {} : { error: res.error ?? `HTTP ${res.status}` }) }));
+            break;
+        }
+        case 'wr:theme:remove-item': {
+            const { kind, key } = data;
+            wrRemoveThemeItem(kind, key)
+                .then((res) => post({ type: 'wr:theme:remove-item:response', kind, key, ok: res.ok, ...(res.ok ? {} : { error: res.error ?? `HTTP ${res.status}` }) }));
+            break;
+        }
+    }
+}
+export function postHistoryState(canUndo, canRedo) {
+    post({ type: 'wr:history:state', canUndo, canRedo });
+}
+export function initWrBridge(editorOrigin) {
+    bridgeOrigin = editorOrigin;
+    if (window === window.parent)
+        return () => { };
+    selectedEl = null;
+    clearHighlight();
+    postDeselect();
+    scan();
+    const observer = new MutationObserver(() => { scan(); scheduleMeasure(); postCommentRects(); });
+    observer.observe(document.body, { childList: true, subtree: true });
+    // The site's own theme (light/dark) is a class or an attribute on <html>
+    const themeObserver = new MutationObserver(scheduleMeasure);
+    themeObserver.observe(document.documentElement, { attributes: true, attributeFilter: ['class', 'data-theme', 'style'] });
+    // The site's theme can also follow the system (`prefers-color-scheme`), and colors that transition settle a little after the class changes
+    const colorScheme = window.matchMedia?.('(prefers-color-scheme: dark)');
+    colorScheme?.addEventListener('change', scheduleMeasure);
+    const onTransitionEnd = (e) => { if (/color/.test(e.propertyName))
+        scheduleMeasure(); };
+    document.documentElement.addEventListener('transitionend', onTransitionEnd);
+    scheduleMeasure();
+    document.addEventListener('click', onClickInsideInteractive, true);
+    document.addEventListener('click', onClick);
+    document.addEventListener('keydown', onKeyDown);
+    document.addEventListener('pointerover', onPointerOver);
+    document.addEventListener('pointerout', onPointerOut);
+    window.addEventListener('scroll', onScroll, { passive: true });
+    window.addEventListener('resize', postCommentRects);
+    window.addEventListener('message', onMessage);
+    const geometryTimer = setInterval(syncGeometry, GEOMETRY_EVERY_MS);
+    const _push = history.pushState.bind(history);
+    const _replace = history.replaceState.bind(history);
+    history.pushState = (...args) => { _push(...args); sendNav(); };
+    history.replaceState = (...args) => { _replace(...args); sendNav(); };
+    window.addEventListener('popstate', sendNav);
+    sendNav();
+    return () => {
+        observer.disconnect();
+        themeObserver.disconnect();
+        colorScheme?.removeEventListener('change', scheduleMeasure);
+        document.documentElement.removeEventListener('transitionend', onTransitionEnd);
+        clearTimeout(measureTimer);
+        clearInterval(geometryTimer);
+        document.removeEventListener('click', onClickInsideInteractive, true);
+        document.removeEventListener('click', onClick);
+        document.removeEventListener('keydown', onKeyDown);
+        document.removeEventListener('pointerover', onPointerOver);
+        document.removeEventListener('pointerout', onPointerOut);
+        window.removeEventListener('scroll', onScroll);
+        window.removeEventListener('resize', postCommentRects);
+        window.removeEventListener('message', onMessage);
+        window.removeEventListener('popstate', sendNav);
+        history.pushState = _push;
+        history.replaceState = _replace;
+        lastNavPath = null;
+    };
+}
+//# sourceMappingURL=bridge.js.map