windcraft-editor 0.0.0-stage → 0.1.0

package/design/editor/docs.js

@@ -0,0 +1,121 @@
+import { config } from "../config.js";
+import { agentMain } from "../agent.js";
+import { buildPreviewDocument, parseComponentSource, themeMarkup } from "../../playground/component-source.js";
+import { panelStore } from "../panel-state.js";
+import { $, S, data, esc, frame, isTailwindScript, model, send } from "./base.js";
+import { renderFloat, renderSel } from "./frame-handles.js";
+import { renderInspector } from "./inspector.js";
+import { curWidth } from "./plane.js";
+import { anyDirty, docs, refreshLabels, renderDesigns } from "./designs.js";
+import { codeFocused, syncCode } from "./code-panel.js";
+
+// ── Documents ────────────────────────────────────────────────────────────────
+const scriptTag = (s) =>
+    `<script${s.src ? ` src="${esc(s.src)}"` : ""}${s.type ? ` type="${esc(s.type)}"` : ""}${s.defer ? " defer" : ""}>${s.src ? "" : s.text.replace(/<\/script/gi, "<\\/script")}<\/script>`;
+const styleTag = (s) => `<style${s.type ? ` type="${esc(s.type)}"` : ""}>${s.text.replace(/<\/style/gi, "<\\/style")}</style>`;
+
+function editDocument() {
+    const head = ['<meta charset="utf-8">', '<meta name="viewport" content="width=device-width, initial-scale=1">'];
+    if (!S.parsed.hasTailwindScript) head.push('<script src="https://cdn.tailwindcss.com"><\/script>', themeMarkup());
+    else head.push(...S.parsed.scripts.filter(isTailwindScript).map(scriptTag));
+    // the design's own stylesheets are marked, so the panel can tell their rules from the ones Tailwind generates (agent.js sourcesOf)
+    const mark = (tag) => tag.replace(/^<(style|link)\b/i, "<$1 data-wc-design");
+    head.push(...S.parsed.links.map(mark), ...S.parsed.styles.map(styleTag).map(mark), "<style data-wc-editor>html,body{margin:0}</style>");
+    const attrs = Object.entries(S.parsed.bodyAttrs).map(([k, v]) => ` ${k}="${esc(v)}"`).join("");
+    return `<!DOCTYPE html><html><head>${head.join("\n")}</head><body${attrs}>${model.markup}<script data-wc-agent>window.__wcLoad=${S.loadSeq};(${agentMain.toString()})()<\/script></body></html>`;
+}
+
+/** Rebuilds the component source: original head assets and scripts around the edited markup. */
+export function assembleDoc(p, markup) {
+    const css = [...p.links, ...p.styles.map(styleTag)].join("\n");
+    const js = p.scripts.map(scriptTag).join("\n");
+    const bodyAttrs = Object.entries(p.bodyAttrs).map(([k, v]) => ` ${k}="${esc(v)}"`).join("");
+    if (bodyAttrs) return `<!DOCTYPE html>\n<html>\n<head>\n${css}\n</head>\n<body${bodyAttrs}>\n${markup}\n${js}\n</body>\n</html>\n`;
+    return [css, markup, js].filter(Boolean).join("\n") + "\n";
+}
+export const assemble = () => assembleDoc(S.parsed, model.markup);
+
+export function loadFrame() {
+    S.loadSeq++;
+    S.selected = null;
+    S.editingInfo = null;
+    S.gestureOn = false;
+    S.ftMenu = false;
+    S.ftPop = null;
+    S.ftSides = {};
+    S.selData = null;
+    renderSel();
+    renderInspector();
+    renderFloat();
+    frame.srcdoc = S.mode === "edit" ? editDocument() : previewDocument();
+}
+
+// The live page (Interact) has none of the editor's own script, so Ctrl/Cmd + scroll or a pinch over it zoomed the whole browser window.
+// This small script keeps those two for the canvas: it stops the browser's zoom and hands the gesture to the editor, which zooms the
+// design plane as it does everywhere else. Plain scrolling stays the page's own.
+// Interact's pointer: the same arrow-with-a-click as the Interact button in the toolbar; the page's own cursors (links, fields) still win.
+const INTERACT_CURSOR = 'url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%3E%3Cg%20stroke%3D%22%23fff%22%20stroke-width%3D%223.6%22%3E%3Cpath%20d%3D%22M9%209l11%204.5-4.6%201.4L14%2019.5z%22%2F%3E%3Cpath%20d%3D%22M6.5%203.5%207%206M3.5%206.5%206%207M4.5%2010.5l2-1.5M10.5%204.5%209%206.5%22%2F%3E%3C%2Fg%3E%3Cg%20stroke%3D%22%23111%22%20stroke-width%3D%221.6%22%3E%3Cpath%20d%3D%22M9%209l11%204.5-4.6%201.4L14%2019.5z%22%2F%3E%3Cpath%20d%3D%22M6.5%203.5%207%206M3.5%206.5%206%207M4.5%2010.5l2-1.5M10.5%204.5%209%206.5%22%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E") 9 9, default';
+const previewCursorStyle = `<style data-wc-cursor>html{cursor:${INTERACT_CURSOR}}</style>`;
+const previewWheelScript = (load) => `<script data-wc-wheel>(function(){var L=${load};addEventListener("wheel",function(e){if(!(e.ctrlKey||e.metaKey))return;e.preventDefault();parent.postMessage({type:"wheel",x:e.clientX,y:e.clientY,dx:e.deltaX,dy:e.deltaY,zoom:true,load:L},"*")},{passive:false});["gesturestart","gesturechange","gestureend"].forEach(function(t){addEventListener(t,function(e){e.preventDefault()})})})()<\/script>`;
+function previewDocument() {
+    const html = buildPreviewDocument(parseComponentSource(assemble()), { width: curWidth() });
+    const withCursor = /<\/head>/i.test(html) ? html.replace(/<\/head>/i, previewCursorStyle + "</head>") : previewCursorStyle + html;
+    const at = withCursor.lastIndexOf("</body>");
+    return at < 0 ? withCursor + previewWheelScript(S.loadSeq) : withCursor.slice(0, at) + previewWheelScript(S.loadSeq) + withCursor.slice(at);
+}
+
+// ── History, dirty state, layout ─────────────────────────────────────────────
+/** Does this design use Tailwind utility classes? Decides which style panel opens by default. */
+function refreshDocFlag() {
+    const tokens = [];
+    String(model.markup).replace(/\bclass\s*=\s*"([^"]*)"|\bclass\s*=\s*'([^']*)'/g, (_, a, b) => { tokens.push(...(a ?? b).split(/\s+/).filter(Boolean)); return ""; });
+    const hit = tokens.some((t) => /^(?:flex|grid|block|hidden|inline-flex|rounded)$/.test(t) || /^-?(?:p|m|px|py|pt|pr|pb|pl|mx|my|mt|mr|mb|ml|w|h|gap)-(?:\d|px|auto|full)/.test(t) || /^(?:text|bg|border)-(?:xs|sm|base|lg|xl|\d?xl|[a-z]+-\d{2,3}|black|white)$/.test(t));
+    panelStore.set({ docTailwind: Boolean(S.parsed.hasTailwindScript || hit) });
+}
+
+export function updateChrome() {
+    refreshDocFlag();
+    $("undoBtn").disabled = S.hIndex <= 0;
+    $("redoBtn").disabled = S.hIndex >= S.history.length - 1;
+    const dirty = anyDirty();
+    $("saveBtn").disabled = !dirty;
+    $("saveState").textContent = dirty ? (S.isNew && docs.size === 1 ? "Not saved yet" : "Unsaved changes") : S.isNew ? "" : "Saved";
+    $("versionBadge").textContent = S.isNew ? "new" : `v${data.version}`;
+    $("titleText").textContent = data.title || "Untitled component";
+    document.title = `${data.title || "New component"} | Windcraft design`;
+    const pl = $("projLink");
+    pl.classList.toggle("hidden", !data.project);
+    pl.classList.toggle("inline-flex", Boolean(data.project));
+    $("projSep").classList.toggle("hidden", !data.project);
+    if (data.project) { pl.innerHTML = `<span class="truncate">Project: ${esc(data.project.name)}</span><svg class="shrink-0 text-neutral-500" width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round"><path d="M4.5 2.5h5v5M9.5 2.5l-6 6"/></svg>`; pl.href = `/projects/${data.project.id}`; }
+    if (!codeFocused()) syncCode();
+    renderDesigns();
+    refreshLabels();
+    if (config.hooks.chrome) config.hooks.chrome();
+}
+
+export function commit(html, key) {
+    model.markup = html;
+    const now = Date.now();
+    if (html === S.history[S.hIndex]) { S.lastKey = key || ""; S.lastTime = now; return updateChrome(); } // nothing changed: no undo step
+    // the same key merges into the last step: within 800 ms, or for a "live:" key (a picker being dragged) for as long as it lasts
+    if (key && key === S.lastKey && (key.startsWith("live:") || now - S.lastTime < 800) && S.hIndex === S.history.length - 1) {
+        S.history[S.hIndex] = html;
+    } else {
+        S.history = S.history.slice(0, S.hIndex + 1);
+        S.history.push(html);
+        S.hIndex = S.history.length - 1;
+    }
+    S.lastKey = key || "";
+    S.lastTime = now;
+    updateChrome();
+}
+
+export function step(delta) {
+    const next = S.hIndex + delta;
+    if (next < 0 || next >= S.history.length) return;
+    S.hIndex = next;
+    model.markup = S.history[S.hIndex];
+    send({ cmd: "load", html: model.markup, selectPath: S.selected ? S.selected.path : null });
+    updateChrome();
+}

package/design/editor/frame-handles.js

@@ -0,0 +1,223 @@
+import { TEXT_TAGS, toolbarHtml } from "../float-toolbar.js";
+import { selectionHtml } from "../selection-overlay.js";
+import { $, S, send } from "./base.js";
+import { docs, setFrameSize, wraps } from "./designs.js";
+import { canvas, heightOfDoc, positions, view, widthOf } from "./plane.js";
+import { setDevice, setProp, setProps } from "./inspector.js";
+import { cmd } from "./frame-messages.js";
+import { setPanel, setPanelTab } from "./color-ui.js";
+import { closeColorPicker, placeBeside } from "../color-picker.js";
+
+// ── The floating toolbar, frame handles and the side panel ───────────────────
+ // which of the bar's panels is open: border, radius or spacing
+ // per group: true when its fields are shown one per side (your choice; unset means automatic)
+export const ftb = $("ftb");
+
+function toolbarState() {
+    if (S.mode !== "edit" || S.gestureOn || S.tool !== "move") return null;
+    if (S.frameSel === S.curKey) {
+        const d = docs.get(S.curKey);
+        return { kind: "frame", frame: { w: widthOf(d), h: heightOfDoc(d), auto: !(d.board && d.board.h), custom: S.lastCustom } };
+    }
+    if (!S.selected || S.selected.tag === "body" || !S.selected.rect) return null;
+    const editing = Boolean(S.editingInfo && S.editingInfo.on);
+    const text = editing || TEXT_TAGS.has(S.selected.tag) || (S.selected.leaf && String(S.selected.text || "").trim() !== "");
+    return { kind: text ? "text" : "shape", sel: S.selected, editing, fmt: editing ? S.editingInfo.fmt : null, menu: S.ftMenu, pop: S.ftPop, sides: S.ftSides };
+}
+
+/** Where the thing the toolbar belongs to sits inside the canvas element. */
+function anchorRect(st) {
+    const d = docs.get(S.curKey);
+    const p = positions()[S.curKey];
+    if (!p) return null;
+    if (st.kind === "frame") return { x: view.x + p.x * view.z, y: view.y + p.y * view.z, w: widthOf(d) * view.z, h: heightOfDoc(d) * view.z, gap: 38 };
+    const r = st.editing && S.editingInfo.rect ? S.editingInfo.rect : st.sel.rect;
+    return { x: view.x + (p.x + r.x) * view.z, y: view.y + (p.y + r.y) * view.z, w: r.w * view.z, h: r.h * view.z, gap: 10 };
+}
+
+export function placeFloat() {
+    if (ftb.classList.contains("hidden")) return;
+    const st = toolbarState();
+    const a = st && anchorRect(st);
+    if (!a) return;
+    const cw = canvas.clientWidth, ch = canvas.clientHeight;
+    const w = ftb.offsetWidth, h = ftb.offsetHeight;
+    const left = Math.min(Math.max(8, a.x), Math.max(8, cw - w - 8));
+    let top = a.y - h - a.gap;
+    if (top < 56) top = a.y + a.h + 10;
+    top = Math.min(Math.max(56, top), Math.max(56, ch - h - 8));
+    ftb.classList.toggle("popdown", top < 270); // a panel opens upward, unless the bar is too close to the top of the canvas
+    ftb.style.left = `${Math.round(left)}px`;
+    ftb.style.top = `${Math.round(top)}px`;
+    // a panel of the bar (padding, margin, radius, border) opens beside the element, as the colour picker does, not over the design
+    const pop = ftb.querySelector(".ftpop");
+    if (pop && st.kind !== "frame") {
+        const cr = canvas.getBoundingClientRect(), fr = ftb.getBoundingClientRect();
+        const near = { left: cr.left + a.x, top: cr.top + a.y, right: cr.left + a.x + a.w, bottom: cr.top + a.y + a.h };
+        const [x, y] = placeBeside(near, cr, null, pop.offsetWidth, pop.offsetHeight);
+        pop.style.left = `${Math.round(x - fr.left)}px`;
+        pop.style.top = `${Math.round(y - fr.top)}px`;
+        pop.style.bottom = "auto";
+    }
+}
+
+// the frame's handles, in screen pixels like the element selection (a handle must be 9px at any zoom)
+const FRAME_HANDLES = [
+    ["n", "left:0;top:0;width:100%;height:10px;transform:translateY(-50%);cursor:ns-resize;"], ["s", "left:0;top:100%;width:100%;height:10px;transform:translateY(-50%);cursor:ns-resize;"],
+    ["w", "left:0;top:0;height:100%;width:10px;transform:translateX(-50%);cursor:ew-resize;"], ["e", "left:100%;top:0;height:100%;width:10px;transform:translateX(-50%);cursor:ew-resize;"],
+];
+const FRAME_CORNERS = [["nw", "left:0;top:0;cursor:nwse-resize;"], ["ne", "left:100%;top:0;cursor:nesw-resize;"], ["se", "left:100%;top:100%;cursor:nwse-resize;"], ["sw", "left:0;top:100%;cursor:nesw-resize;"]];
+
+export function renderFrameSel() {
+    renderSel();
+    // a frame's name is blue only while the frame, or something inside it, is selected
+    wraps.forEach((en, key) => en.wrap.classList.toggle("sel", key === S.curKey && (S.frameSel === S.curKey || Boolean(S.selected && S.selected.tag !== "body"))));
+    const el = $("fsel");
+    const d = docs.get(S.curKey);
+    const p = positions()[S.curKey];
+    if (S.frameSel !== S.curKey || S.mode !== "edit" || !p) { el.innerHTML = ""; linesFrame = ""; paintLines(); return; }
+    const z = view.z;
+    const box = `left:${Math.round((view.x + p.x * z) * 100) / 100}px;top:${Math.round((view.y + p.y * z) * 100) / 100}px;width:${Math.round(widthOf(d) * z * 100) / 100}px;height:${Math.round(heightOfDoc(d) * z * 100) / 100}px;`;
+    const fx = view.x + p.x * z, fy = view.y + p.y * z;
+    const outline = `<svg class="sout"><rect x="${fx - 0.75}" y="${fy - 0.75}" width="${widthOf(d) * z + 1.5}" height="${heightOfDoc(d) * z + 1.5}" fill="none" stroke="#fff" stroke-width="1.5"/></svg>`;
+    linesFrame = outline;
+    paintLines();
+    el.innerHTML = `<div class="fbox" style="${box}">` + FRAME_HANDLES.map(([n, css]) => `<div class="fh" data-fh="${n}" style="${css}"></div>`).join("") + FRAME_CORNERS.map(([n, css]) => `<div class="fh fc" data-fh="${n}" style="${css}transform:translate(-50%,-50%);"></div>`).join("") + "</div>";
+}
+
+/** The selection box and its handles, above the frame (see selection-overlay.js). */
+
+// the outlines of the selection and of the selected frame share one layer that inverts what is under it; handles and labels sit above it
+let linesSel = "", linesFrame = "";
+const paintLines = () => { $("lines").innerHTML = linesSel + linesFrame; };
+export function renderSel() {
+    const el = $("sel");
+    const p = positions()[S.curKey];
+    if (S.mode !== "edit" || S.frameSel === S.curKey || !S.selData || !p) { el.innerHTML = ""; $("slbl").innerHTML = ""; linesSel = ""; paintLines(); return; }
+    const parts = selectionHtml(S.selData, { zoom: view.z, ox: view.x + p.x * view.z, oy: view.y + p.y * view.z });
+    linesSel = parts.lines;
+    paintLines();
+    el.innerHTML = parts.html;
+    $("slbl").innerHTML = parts.label; // the size label keeps its own colours, so it sits outside the inverting layers
+}
+
+export function renderFloat(force) {
+    renderFrameSel();
+    const st = toolbarState();
+    if (!st) { ftb.classList.add("hidden"); ftb.classList.remove("flex"); return; }
+    // don't rebuild the bar under a number field someone is typing in, unless a button asked for it
+    const typing = !force && document.activeElement && ftb.contains(document.activeElement) && document.activeElement.matches("input");
+    if (!typing) ftb.innerHTML = toolbarHtml(st);
+    ftb.classList.remove("hidden");
+    ftb.classList.add("flex");
+    placeFloat();
+}
+
+export const SIDES4 = ["top", "right", "bottom", "left"];
+const CORNER = { tl: "top-left", tr: "top-right", bl: "bottom-left", br: "bottom-right" };
+const SIDE_KEY = { top: "T", right: "R", bottom: "B", left: "L" };
+const CORNER_KEY = { tl: "radiusTL", tr: "radiusTR", bl: "radiusBL", br: "radiusBR" };
+const allSides = (f) => SIDES4.map(f);
+/** A value typed into one of the bar's panels (a border width, a corner, a padding or margin side), written where that value lives (setProps). */
+export function applyPanel(key, raw) {
+    const colors = allSides((d) => `border-${d}-color`);
+    if (key === "border-color-hex") { const h = raw.trim().replace(/^#?/, "#"); return /^#[0-9a-f]{6}$/i.test(h) ? setProps(colors, h, "borderColor") : renderFloat(true); }
+    if (key === "border-color") return setProps(colors, raw, "borderColor");
+    const n = Number(raw);
+    if (raw.trim() === "" || !Number.isFinite(n)) return renderFloat(true);
+    const v = Math.round(n * 10) / 10; // margins may be negative
+    const nn = Math.max(0, v); // everything else may not
+    const c = S.selected.computed || {};
+    const borderless = SIDES4.every((d) => !parseFloat(c[`border-${d}-width`]));
+    // a border width on a box with no border style shows nothing: give it a solid one first (its own undo step)
+    const one = `border-${Date.now()}`; // the style and the width below share it: one undo step
+    const solid = () => { if (borderless && n > 0) setProps(allSides((d) => `border-${d}-style`), "solid", "borderStyle", [], undefined, one); };
+    if (key === "bw-all") { solid(); return setProps(allSides((d) => `border-${d}-width`), nn, "borderWidth", ["borderT", "borderR", "borderB", "borderL"], undefined, one); }
+    if (key.startsWith("bw-")) { solid(); const d = key.slice(3); return setProps([`border-${d}-width`], nn, `border${SIDE_KEY[d]}`, [], undefined, one); }
+    if (key === "r-all") return FLOAT_ACTIONS.radius(nn);
+    if (key.startsWith("r-")) return setProps([`border-${CORNER[key.slice(2)]}-radius`], nn, CORNER_KEY[key.slice(2)]);
+    const [kind, side] = key.split("-"); // padding-h, margin-top ...
+    const k = kind === "padding" ? "p" : "m";
+    const val = kind === "padding" ? nn : v;
+    if (side === "h") return setProps([`${kind}-left`, `${kind}-right`], val, `${k}x`, [`${k}l`, `${k}r`]);
+    if (side === "v") return setProps([`${kind}-top`, `${kind}-bottom`], val, `${k}y`, [`${k}t`, `${k}b`]);
+    return setProps([`${kind}-${side}`], val, `${k}${side[0]}`);
+}
+export const FLOAT_ACTIONS = {
+    bold() {
+        if (S.editingInfo && S.editingInfo.on) return send({ cmd: "exec", name: "bold" });
+        const on = parseInt(S.selected.computed["font-weight"], 10) >= 600;
+        setProp("font-weight", on ? "400" : "700");
+    },
+    italic() {
+        if (S.editingInfo && S.editingInfo.on) return send({ cmd: "exec", name: "italic" });
+        const on = S.selected.computed["font-style"] === "italic";
+        setProp("font-style", on ? "normal" : "italic");
+    },
+    underline() {
+        if (S.editingInfo && S.editingInfo.on) return send({ cmd: "exec", name: "underline" });
+        const on = /underline/.test(S.selected.computed["text-decoration-line"] || "");
+        setProp("text-decoration-line", on ? "none" : "underline");
+    },
+    link() {
+        const url = prompt("Link address", "https://");
+        if (!url) return;
+        if (S.editingInfo && S.editingInfo.on) send({ cmd: "exec", name: "createLink", arg: url });
+        else if (S.selected.tag === "a") cmd({ cmd: "setAttr", path: S.selected.path, name: "href", value: url });
+        else alert("Select some text while editing it (double-click), then add the link.");
+    },
+    align() {
+        const cur = S.selected.computed["text-align"];
+        const next = { left: "center", start: "center", center: "right", right: "left", justify: "left" }[cur] || "center";
+        setProp("text-align", next);
+    },
+    radius(n) {
+        // every corner: one rounded-* class, or inline radius where a corner comes from CSS
+        setProps(["border-top-left-radius", "border-top-right-radius", "border-bottom-right-radius", "border-bottom-left-radius"], n, "radius", ["radiusTL", "radiusTR", "radiusBR", "radiusBL"]);
+    },
+    more() { closeColorPicker(); S.ftMenu = !S.ftMenu; S.ftPop = null; renderFloat(true); },
+    pop(key) { closeColorPicker(); S.ftPop = S.ftPop === key ? null : key; S.ftMenu = false; renderFloat(true); },
+    side(key, btn) { S.ftSides[key] = !btn.classList.contains("on"); renderFloat(true); },
+    bstyle(kind) {
+        const c = S.selected.computed || {};
+        const none = ["top", "right", "bottom", "left"].every((d) => !parseFloat(c[`border-${d}-width`]));
+        const one = `border-${Date.now()}`; // style and width: one undo step
+        setProps(SIDES4.map((d) => `border-${d}-style`), kind, "borderStyle", [], undefined, one);
+        if (kind !== "none" && none) setProps(SIDES4.map((d) => `border-${d}-width`), 1, "borderWidth", ["borderT", "borderR", "borderB", "borderL"], undefined, one); // a line style on a borderless box: make it visible
+    },
+    dup() { S.ftMenu = false; cmd({ cmd: "duplicate", path: S.selected.path }); },
+    del() { S.ftMenu = false; cmd({ cmd: "remove", path: S.selected.path }); },
+    up() { S.ftMenu = false; cmd({ cmd: "move", path: S.selected.path, dir: -1 }); },
+    down() { S.ftMenu = false; cmd({ cmd: "move", path: S.selected.path, dir: 1 }); },
+    free() { S.ftMenu = false; cmd({ cmd: "freePosition", path: S.selected.path, on: !S.selected.geom.abs }); },
+    group() { S.ftMenu = false; send({ cmd: "group" }); },
+    ungroup() { S.ftMenu = false; send({ cmd: "ungroup" }); },
+    front() { S.ftMenu = false; send({ cmd: "order", mode: "front" }); },
+    back() { S.ftMenu = false; send({ cmd: "order", mode: "back" }); },
+    props() { S.ftMenu = false; setPanel(true); setPanelTab("props"); renderFloat(true); },
+};
+
+/** Registers this part's listeners and does its first draw (called once, in order, by editor.js). */
+export function init() {
+
+    // The bar's buttons act on press, not on click: a value that was just typed makes the bar rebuild itself,
+    // which would swallow the click. Pressing also must not take focus from text being edited.
+    ftb.addEventListener("mousedown", (e) => {
+        if (e.target.closest("select, input, label")) return;
+        e.preventDefault();
+        // a number field in the bar commits first
+        const a = document.activeElement;
+        if (a && ftb.contains(a) && a.matches("input")) a.blur();
+        const dev = e.target.closest("[data-ftdev]");
+        if (dev && dev.dataset.ftdev === "custom") return S.lastCustom && setFrameSize({ w: S.lastCustom.w, h: S.lastCustom.h });
+        if (dev) return setDevice(Number(dev.dataset.ftdev));
+        const b = e.target.closest("[data-ft]");
+        if (b && FLOAT_ACTIONS[b.dataset.ft] && S.selected) FLOAT_ACTIONS[b.dataset.ft](b.dataset.arg, b);
+    });
+
+    // pressing anywhere else in the editor (the canvas, a layer) also lets a focused bar field commit first
+    document.addEventListener("pointerdown", (e) => {
+        const a = document.activeElement;
+        if (a && ftb.contains(a) && a.matches("input, select") && !e.target.closest("#ftb")) a.blur();
+    }, true);
+}

package/design/editor/frame-messages.js

@@ -0,0 +1,195 @@
+import { closeColorPicker } from "../color-picker.js";
+import { CSS_PROP_LIST } from "../css-props.js";
+import { panelStore } from "../panel-state.js";
+import { S, data, frame, model, send } from "./base.js";
+import { docs, scheduleLayout, selectFrame, wraps } from "./designs.js";
+import { pathKey, renderLayers } from "./layers.js";
+import { FLOAT_ACTIONS, ftb, renderFloat, renderSel } from "./frame-handles.js";
+import { handleKey, keyZoom, setSpace, setTool } from "./toolbar.js";
+import { applyView, fitTo, handleWheel, layout, positions, view } from "./plane.js";
+import { commit, updateChrome } from "./docs.js";
+import { convertGesture, renderInspector, setRotation } from "./inspector.js";
+import { updateCodeHighlight } from "./code-panel.js";
+
+let pendingKey = "";
+
+// A drag that starts in the page and leaves the frame: the frame gets no more pointer events outside itself (it is a separate
+// document), so a shape drawn up to the edge never finished. While a gesture runs, this window passes the pointer on, in the page's own units.
+let following = null;
+function followOutside() {
+    if (following) return;
+    const forward = (ev) => (e) => {
+        const r = frame.getBoundingClientRect(), k = r.width / (frame.offsetWidth || r.width);
+        send({ cmd: "extPointer", ev, x: (e.clientX - r.left) / k, y: (e.clientY - r.top) / k, shift: e.shiftKey, alt: e.altKey, meta: e.metaKey, ctrl: e.ctrlKey });
+    };
+    const move = forward("move"), up = (e) => { forward("up")(e); stopFollowing(); };
+    window.addEventListener("pointermove", move, true);
+    window.addEventListener("pointerup", up, true);
+    following = { move, up };
+}
+function stopFollowing() {
+    if (!following) return;
+    window.removeEventListener("pointermove", following.move, true);
+    window.removeEventListener("pointerup", following.up, true);
+    following = null;
+}
+export const cmd = (msg, key = "") => { pendingKey = key; send(key ? { key, ...msg } : msg); };
+
+// A design takes a moment to load into the canvas (its Tailwind styling, its pictures): until it does, the canvas shows a loading
+// message instead of an empty frame in a corner. It goes at the first "ready" from the frame, or after 15 seconds whatever happens.
+let announced = false;
+function hideBoot() {
+    const b = document.getElementById("boot");
+    if (b) { b.classList.add("hidden"); b.classList.remove("flex"); }
+    // the first design is painted: whoever opened the editor (a page, the embedding dialog) can take its own loading message away
+    if (!announced) { announced = true; document.dispatchEvent(new CustomEvent("wc-editor-ready")); }
+}
+
+/** Registers this part's listeners and does its first draw (called once, in order, by editor.js). */
+/**
+ * A frame that follows its content's height can't follow content sized by the screen (min-h-screen, h-screen, 100vh) plus
+ * anything more (a border, padding, a second section): each time the frame grows to fit, the screen grows with it and the content
+ * outgrows it again, without end. Growth that repeats by the same amount, quickly, is that loop: the frame stops following it
+ * and keeps the height it has. A height that is smaller starts over.
+ */
+const growth = [];
+function viewportLoop(h) {
+    const now = performance.now(), prev = S.frameHeight || 0;
+    if (h <= prev) { growth.length = 0; return false; }
+    growth.push({ t: now, d: h - prev });
+    while (growth.length && now - growth[0].t > 2000) growth.shift();
+    const last = growth.slice(-4);
+    return last.length >= 4 && last.every((g) => Math.abs(g.d - last[0].d) <= 1);
+}
+
+export function init() {
+    const boot = document.getElementById("boot");
+    if (boot && (data.htmlCode || data.id)) { boot.classList.remove("hidden"); boot.classList.add("flex"); setTimeout(hideBoot, 15000); }
+
+    // ── Messages from the frame ──────────────────────────────────────────────────
+    window.addEventListener("message", (e) => {
+        const m = e.data || {};
+        if (m.type === "preview-height" && e.source !== frame.contentWindow) {
+            for (const [key, en] of wraps) {
+                if (en.ghost && en.ghost.contentWindow === e.source) { docs.get(key).height = Math.max(120, Math.min(6000, m.height)); scheduleLayout(); return; }
+            }
+            return;
+        }
+        if (e.source !== frame.contentWindow) return;
+        // a document that was replaced (switching designs reloads the frame) can still have messages in flight
+        if (m.load !== undefined && m.load !== S.loadSeq) return;
+        if (S.handingOver) return; // the page being left, still in the frame for a moment (activate)
+        // Pressing inside the page doesn't take focus from a field in the bar. Let that field commit (to the element it was showing)
+        // before the selection moves on, so the bar then rebuilds for the new element instead of keeping a stale field.
+        // An edit reports the same element back: that must not blur a field still in use (a colour picker being dragged).
+        const otherElement = m.type === "selected" && !(S.selected && m.info && pathKey(S.selected.path) === pathKey(m.info.path));
+        if (otherElement || (m.type === "gesture" && m.on)) {
+            closeColorPicker(); // its colours belong to the element it was opened for
+            const a = document.activeElement;
+            if (a && ftb.contains(a) && a.matches("input, select")) a.blur();
+        }
+        if (m.type === "zoomKey") return keyZoom(m.key);
+        if (m.type === "wheel") {
+            const pos = positions()[S.curKey] || { x: 0, y: 0 };
+            return handleWheel({ dx: m.dx, dy: m.dy, zoomKey: m.zoom, cx: view.x + (pos.x + m.x) * view.z, cy: view.y + (pos.y + m.y) * view.z });
+        }
+        if (m.type === "ready") {
+            if (S.switching) {
+                S.switching = false;
+                // the frame moves over now (layout below) but shows a moment later, once Tailwind has styled the new design; the
+                // snapshot is right in the meantime
+                const key = S.curKey, token = S.switchToken;
+                setTimeout(() => {
+                    if (token !== S.switchToken || key !== S.curKey) return;
+                    const en = wraps.get(key);
+                    if (en && en.ghost) { en.ghost.remove(); en.ghost = null; }
+                    frame.style.visibility = "";
+                }, 120);
+            }
+            if (!S.history.length) { S.history = [m.html]; S.hIndex = 0; model.markup = m.html; if (!S.isNew) S.savedMarkup = m.html; }
+            S.tree = m.tree;
+            renderLayers();
+            updateChrome();
+            layout();
+            if (!S.viewTouched) fitTo([S.curKey]);
+            S.sentZoom = 0;
+            applyView();
+            setTimeout(hideBoot, 150); // the first paint of the fitted design, then the loading message goes
+            send({ cmd: "tool", tool: S.tool });
+            send({ cmd: "cssProps", props: CSS_PROP_LIST });
+            send({ cmd: "previewState", state: panelStore.get().st }); // a reloaded frame shows the picked state again
+            renderFloat();
+        } else if (m.type === "height" || m.type === "preview-height") {
+            if (viewportLoop(m.height)) return;
+            S.frameHeight = m.height;
+            layout();
+            if (!S.viewTouched) fitTo([S.curKey]);
+        } else if (m.type === "changed") {
+            S.tree = m.tree;
+            if (m.silent) model.markup = m.html;
+            else commit(m.html, m.key || pendingKey);
+            pendingKey = "";
+            if (m.info) S.selected = m.info;
+            if (m.body) S.pageBody = m.body;
+            renderLayers();
+            renderInspector();
+            renderFloat();
+        } else if (m.type === "rotate") {
+            // the rotate handle was let go: the angle is written like the panel's rotation field does
+            if (S.selected && pathKey(S.selected.path) === pathKey(m.path)) setRotation(m.value);
+        } else if (m.type === "radius") {
+            // a corner dot was dragged: apply the radius the same way the toolbar does (class in Tailwind mode, style otherwise)
+            if (S.selected && pathKey(S.selected.path) === pathKey(m.path)) FLOAT_ACTIONS.radius(m.value);
+        } else if (m.type === "info") {
+            // the same element with fresh numbers (styles finished loading): update quietly
+            if (S.selected && m.info && pathKey(S.selected.path) === pathKey(m.info.path)) {
+                S.selected = m.info;
+                renderInspector();
+                renderFloat();
+            }
+        } else if (m.type === "typing") {
+            model.markup = m.html;
+            updateChrome();
+        } else if (m.type === "overlay") {
+            S.selData = m;
+            renderSel();
+        } else if (m.type === "editing") {
+            S.editingInfo = m;
+            renderFloat();
+        } else if (m.type === "gesture") {
+            S.gestureOn = m.on;
+            m.on ? followOutside() : stopFollowing();
+            renderFloat();
+        } else if (m.type === "tool") {
+            setTool(m.tool, true);
+        } else if (m.type === "space") {
+            setSpace(m.down);
+        } else if (m.type === "selected") {
+            // the same element reporting again (after an edit) keeps its open menu; a different one starts fresh
+            const newSelection = !(S.selected && m.info && pathKey(S.selected.path) === pathKey(m.info.path));
+            if (newSelection) {
+                S.ftMenu = false; S.ftPop = null; S.ftSides = {};
+                // a state (Hover, Focus...) belongs to the element it was picked for: the next one starts at its normal look. The screen size stays (it is the frame's).
+                if (panelStore.get().st) { panelStore.set({ st: "" }); send({ cmd: "previewState", state: "" }); }
+            }
+            S.selected = m.info;
+            S.frameSel = null;
+            updateCodeHighlight(newSelection); // find it in the code, and scroll there when it is a different element
+            renderLayers();
+            renderInspector();
+            renderFloat();
+        } else if (m.type === "body") {
+            S.pageBody = m.info; // the page's styling (its body), shown under the page panel
+            if (!S.selected) renderInspector();
+        } else if (m.type === "frameClick") {
+            selectFrame(); // the empty part of the design was clicked: the frame, with its handles and the page panel
+        } else if (m.type === "hoverFrame") {
+            const en = wraps.get(S.curKey);
+            if (en) en.wrap.classList.toggle("bodyhover", Boolean(m.on));
+        } else if (m.type === "convert") {
+            convertGesture(m.items || []);
+        } else if (m.type === "key") {
+            handleKey(m);
+        }
+    });
+}