windcraft-editor 0.0.0-stage → 0.1.0

package/design/editor/add-menu.js

@@ -0,0 +1,151 @@
+import { host } from "../host.js";
+import { config } from "../config.js";
+import { parseComponentSource } from "../../playground/component-source.js";
+import { $, S, data, esc, model } from "./base.js";
+import { cmd } from "./frame-messages.js";
+import { assemble, commit, loadFrame, updateChrome } from "./docs.js";
+import { renderInspector } from "./inspector.js";
+import { anyDirty, boardPayload, docs, pinBoard, remapKey, saveBoard } from "./designs.js";
+
+// ── Add menu: build from blocks ──────────────────────────────────────────────
+const BLOCKS = [
+    ["Section", '<section class="p-10"><h2 class="text-2xl font-bold">Section title</h2><p class="mt-2 text-gray-600">Describe this section.</p></section>'],
+    ["Container", '<div class="mx-auto max-w-5xl p-6"></div>'],
+    ["Columns (2)", '<div class="grid grid-cols-1 gap-6 md:grid-cols-2"><div class="p-6">Column one</div><div class="p-6">Column two</div></div>'],
+    ["Heading", '<h2 class="text-3xl font-bold">Heading</h2>'],
+    ["Text", '<p class="text-gray-600">Write something here.</p>'],
+    ["Button", '<a href="#" class="inline-block rounded-md bg-black px-5 py-2.5 text-sm font-medium text-white">Button</a>'],
+    ["Image", '<img src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?auto=format&fit=crop&w=800&q=60" alt="Image" class="rounded-lg">'],
+    ["Card", '<div class="rounded-xl border border-gray-200 bg-white p-6 shadow-sm"><h3 class="font-semibold">Card title</h3><p class="mt-1 text-sm text-gray-600">Card text.</p></div>'],
+    ["Input", '<input type="text" placeholder="Type here" class="w-full rounded-md border border-gray-300 px-3 py-2 text-sm">'],
+];
+const CONTAINERS = new Set(["body", "div", "section", "header", "footer", "main", "nav", "ul", "ol", "form", "article", "aside"]);
+function addToEmpty(html) {
+    model.markup = html;
+    commit(html);
+    loadFrame();
+}
+
+// ── An empty page: draft it with AI (the Page panel's Generate) ──────────────
+/** Drafts the whole (empty) page from a description. Returns { ok, message? } for the page panel to show. */
+export async function draftPage(prompt) {
+    try {
+        const html = await host.generate({ prompt, useLibrary: true });
+        if (!html.startsWith("<")) throw new Error("The AI didn't return HTML. Try rephrasing.");
+        S.parsed = parseComponentSource(html);
+        commit(S.parsed.markup);
+        loadFrame();
+        if (!data.title) data.title = prompt.slice(0, 60);
+        updateChrome();
+        renderInspector();
+        return { ok: true };
+    } catch (err) {
+        return { ok: false, message: err.message };
+    }
+}
+
+// ── Details dialog: name, category, tags, visibility ─────────────────────────
+const dlg = $("detailsDlg");
+
+function fillProjects() {
+    const cur = data.project ? data.project.id : "";
+    $("dProject").innerHTML = `<option value="" disabled>Choose a project</option>` + (data.projects || []).map((p) => `<option value="${p.id}">${esc(p.name)}</option>`).join("") + `<option value="__new__">New project...</option>`;
+    const first = (data.projects || [])[0];
+    $("dProject").value = cur || (first ? first.id : ""); // every design belongs to a project
+}
+
+/** What the details dialog shows now: the design's name, category, tags... (also what the app's own details form starts from). */
+export const detailsOf = () => ({
+    title: data.title || "", category: data.category || "", description: data.description || "", tags: (data.tags || []).join(", "),
+    isPublished: data.isPublished, useAsReference: data.useAsReference !== false, project: data.project ? data.project.id : "", isNew: S.isNew,
+});
+
+export function openDetails() {
+    if (S.mode !== "edit") return; // Interact uses the page as it is: name, category and the rest are not changed there
+    if (config.hooks.details) return config.hooks.details(detailsOf()); // the app shows its own form and answers with saveDetails()
+    fillProjects();
+    $("dTitle").value = data.title || "";
+    $("dCategory").value = data.category || "";
+    $("dDesc").value = data.description || "";
+    $("dTags").value = (data.tags || []).join(", ");
+    $("dVis").value = String(Boolean(data.isPublished)); // private unless it was made public
+    $("dRef").checked = data.useAsReference !== false;
+    $("dDesc").required = false; // optional: it defaults to the name
+    $("detailsTitle").textContent = S.isNew ? "Name and save your component" : "Component details";
+    $("detailsSave").textContent = S.isNew ? "Create component" : "Save details";
+    $("detailsError").classList.add("hidden");
+    dlg.showModal();
+}
+
+/** Saves the design's details (and, the first time, the design itself). Rejects with the reason when it can't. */
+export async function saveDetails(fields) {
+    const fromDraft = S.isNew && S.draftKey && S.draftKey === S.curKey; // a design opened from a Figma draft: its Figma data moves to the new page
+    const saved = S.isNew ? await host.createComponent({ ...fields, htmlCode: assemble(), ...(fromDraft ? { draftId: data.draftId } : {}) }) : await host.updateComponent(data.id, fields);
+    const movedProject = (data.project ? data.project.id : "") !== (fields.project || "");
+    data.project = (data.projects || []).find((p) => p.id === fields.project) || null;
+    Object.assign(data, { title: fields.title, category: fields.category, description: fields.description, tags: String(fields.tags || "").split(",").map((t) => t.trim()).filter(Boolean), isPublished: String(fields.isPublished) === "true", useAsReference: fields.useAsReference !== false && fields.useAsReference !== "false" });
+    if (S.isNew) {
+        data.id = saved._id;
+        data.version = saved.version || 1;
+        S.isNew = false;
+        S.savedMarkup = model.markup;
+        host.showDesign(data.id);
+        const d = docs.get(S.curKey);
+        if (data.project) pinBoard(S.curKey, false);
+        if (d.board && data.project) saveBoard([boardPayload([data.id, d.board])]);
+        remapKey(S.curKey, data.id);
+        if (fromDraft) { S.draftKey = null; if (saved.figmaSource) document.dispatchEvent(new CustomEvent("figma-source-ready", { detail: { info: saved.figmaSource, id: data.id } })); }
+    }
+    updateChrome();
+    // the plane belongs to a project, so a design that moved to another one reloads onto that project's plane
+    if (movedProject && !anyDirty()) host.openDesign(data.id);
+    return data;
+}
+
+/** Registers this part's listeners and does its first draw (called once, in order, by editor.js). */
+export function init() {
+$("addMenu").innerHTML = BLOCKS.map(([name], i) => `<button type="button" data-block="${i}" class="block w-full rounded px-3 py-1.5 text-left text-xs hover:bg-neutral-100">${name}</button>`).join("");
+    $("addBtn").addEventListener("click", (e) => { e.stopPropagation(); $("addMenu").classList.toggle("hidden"); });
+    document.addEventListener("click", () => $("addMenu").classList.add("hidden"));
+    $("addMenu").addEventListener("click", (e) => {
+        const b = e.target.closest("[data-block]");
+        if (!b) return;
+        const html = BLOCKS[Number(b.dataset.block)][1];
+        if (model.markup.trim() === "" || !S.selected) {
+            if (model.markup.trim() === "") { addToEmpty(html); return; }
+            return cmd({ cmd: "insert", path: [], html, position: "inside" });
+        }
+        cmd({ cmd: "insert", path: S.selected.path, html, position: CONTAINERS.has(S.selected.tag) ? "inside" : "after" });
+    });
+$("dCategory").innerHTML += (data.categories || []).map((g) => `<optgroup label="${esc(g.group)}">${g.items.map((i) => `<option value="${i.slug}">${esc(i.name)}</option>`).join("")}</optgroup>`).join("");
+    $("dProject").addEventListener("change", async (e) => {
+        if (e.target.value !== "__new__") return;
+        const name = prompt("Project name");
+        if (!name || !name.trim()) { fillProjects(); return; }
+        let project;
+        try { project = await host.createProject(name); } catch (err) { alert(err.message || "Could not create the project"); return fillProjects(); }
+        (data.projects ||= []).push(project);
+        fillProjects();
+        $("dProject").value = project.id;
+    });
+    $("detailsBtn").addEventListener("click", openDetails);
+    $("detailsCancel").addEventListener("click", () => dlg.close());
+
+    $("detailsForm").addEventListener("submit", async (e) => {
+        e.preventDefault();
+        const fields = { title: $("dTitle").value.trim(), category: $("dCategory").value, description: $("dDesc").value.trim(), tags: $("dTags").value, isPublished: $("dVis").value, useAsReference: $("dRef").checked, project: $("dProject").value };
+        if (!fields.description) fields.description = fields.title;
+        if (!fields.title || !fields.category || !fields.description) return;
+        const err = $("detailsError");
+        $("detailsSave").disabled = true;
+        try {
+            await saveDetails(fields);
+            dlg.close();
+        } catch (error) {
+            err.textContent = error.message || "Could not save";
+            err.classList.remove("hidden");
+        } finally {
+            $("detailsSave").disabled = false;
+        }
+    });
+}

package/design/editor/api.js

@@ -0,0 +1,47 @@
+// What an app can do with a mounted editor (the object mountEditor() resolves to):
+//   getHtml()          the component's source as it is now
+//   setHtml(html)      replaces it (one undo step); a change made this way is reported with source "host"
+//   onChange(fn)       fn({ html, dirty, status, source }) after every change; source says where it came from: "host" (your setHtml), "editor" (the markup changed there) or "status" (only the save state). Returns an unsubscribe
+//   isDirty()          whether there is anything unsaved
+//   save()             the editor's own save (a first save that needs a name asks the app through ui.onDetails, else shows its dialog)
+//   saveDetails(f)     finishes that first save with { title, category, description, tags, isPublished, useAsReference, project }; rejects with the reason
+//   details()          what the details form starts from
+//   release()          the app is leaving the page on purpose and has kept the work: no "Leave site?" question
+import { config } from "../config.js";
+import { parseComponentSource } from "../../playground/component-source.js";
+import { S, model } from "./base.js";
+import { assemble, commit, loadFrame } from "./docs.js";
+import { anyDirty } from "./designs.js";
+import { save } from "./toolbar.js";
+import { detailsOf, saveDetails } from "./add-menu.js";
+
+const listeners = new Set();
+let fromHost = false, last = "", lastMarkup = model.markup;
+const statusText = () => (document.getElementById("saveState") || {}).textContent || "";
+
+config.hooks.chrome = () => {
+    // "host": the app's own setHtml; "editor": the markup changed in the editor (canvas, undo, code); "status": only the save state moved
+    const source = fromHost ? "host" : model.markup !== lastMarkup ? "editor" : "status";
+    lastMarkup = model.markup;
+    const state = { html: assemble(), dirty: anyDirty(), status: statusText().trim(), source };
+    const key = JSON.stringify([state.html, state.dirty, state.status, state.source]);
+    if (key === last) return;
+    last = key;
+    listeners.forEach((fn) => fn(state));
+};
+
+export const api = {
+    getHtml: assemble,
+    setHtml(html) {
+        if (String(html) === assemble()) return;
+        fromHost = true;
+        try { S.parsed = parseComponentSource(String(html)); commit(S.parsed.markup, "code"); loadFrame(); } finally { fromHost = false; }
+    },
+    onChange(fn) { listeners.add(fn); return () => listeners.delete(fn); },
+    isDirty: anyDirty,
+    save,
+    saveDetails,
+    details: detailsOf,
+    /** The app is about to leave the page itself (and keeps the work): the browser's "leave site?" question is skipped. */
+    release() { config.leaving = true; },
+};

package/design/editor/base.js

@@ -0,0 +1,55 @@
+import { config } from "../config.js";
+import { parseComponentSource } from "../../playground/component-source.js";
+
+export const $ = (id) => document.getElementById(id);
+export const esc = (s) => String(s ?? "").replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c]));
+
+export const data = config.data;
+
+// A two-finger swipe across the editor must never be taken for the browser's Back gesture (it leaves the design behind): the page
+// does not chain a scroll that ran out to the browser's own navigation.
+document.documentElement.style.overscrollBehavior = "none";
+if (document.body) document.body.style.overscrollBehavior = "none";
+
+export const S = {};
+S.parsed = parseComponentSource(data.htmlCode);
+S.mode = "edit";
+S.frameHeight = 600;
+S.selected = null;
+S.tree = null;
+S.history = [];
+S.hIndex = -1;
+S.isNew = !data.id;
+S.savedMarkup = S.isNew ? "" : S.parsed.markup;
+S.lastKey = "";
+S.lastTime = 0;
+S.loadSeq = 0;
+S.viewTouched = false;
+S.sentZoom = 0;
+S.tool = "move";
+S.curKey = data.id || "draft-0";
+S.draftKey = data.draftId ? S.curKey : null; // a design opened from a Figma draft: its first save sends the draft's id, so its Figma data moves to the new page
+S.switching = false;
+S.switchToken = 0;
+S.frameAt = null;
+S.handingOver = false;
+S.lastCustom = null;
+S.editingInfo = null;
+S.gestureOn = false;
+S.frameSel = null;
+S.ftMenu = false;
+S.ftPop = null;
+S.ftSides = {};
+S.selData = null;
+S.leftOpen = false;
+
+export const model = { markup: S.parsed.markup };
+export const isTailwindScript = (s) => s.src && /tailwindcss/i.test(s.src);
+
+// ── State ────────────────────────────────────────────────────────────────────
+
+export const DEFAULT_W = 1280;
+export const collapsed = new Set();
+
+export const frame = $("frame");
+export const send = (msg) => frame.contentWindow && frame.contentWindow.postMessage(msg, "*");

package/design/editor/code-panel.js

@@ -0,0 +1,206 @@
+import { checkTags } from "../code-view.js";
+import { parseComponentSource } from "../../playground/component-source.js";
+import { createCodeEditor, tagProblems } from "../code-editor.js";
+import { $, S, data, model } from "./base.js";
+import { pref } from "./color-ui.js";
+import { assemble, commit, loadFrame } from "./docs.js";
+import { layout } from "./plane.js";
+
+// ── Code panel (two-way with the canvas) ─────────────────────────────────────
+// The editor itself is design/code-editor.js (CodeMirror); this part keeps it and the canvas in step.
+let ed = null;          // the code editor, once the panel has been opened
+let starting = false;
+const codeOpen = () => !$("codePanel").classList.contains("hidden");
+export const codeFocused = () => Boolean(ed && ed.hasFocus());
+const codeValue = () => (ed ? ed.getValue() : "");
+/** Copies text and says so on the button for a moment. */
+function copyText(text, btn) {
+    const done = (msg) => { if (!btn) return; const was = btn.textContent; btn.textContent = msg; setTimeout(() => { btn.textContent = was; }, 1200); };
+    navigator.clipboard.writeText(text).then(() => done("Copied"), () => done("Copy failed"));
+}
+
+// ── The selected element, highlighted in the code ───────────────────────────
+const VOID_TAGS = new Set(["area", "base", "br", "col", "embed", "hr", "img", "input", "link", "meta", "param", "source", "track", "wbr"]);
+/** Where the element at `path` (element indices from the body down) sits in the markup text: its whole source, and just its opening tag. */
+export function elementRange(markup, path) {
+    const re = /<!--[\s\S]*?-->|<(\/?)([a-zA-Z][\w:-]*)((?:"[^"]*"|'[^']*'|[^>"'])*)>/g;
+    const key = path.join(".");
+    const root = { kids: 0, path: [] }, stack = [];
+    let m;
+    while ((m = re.exec(markup))) {
+        if (m[0].startsWith("<!--")) continue;
+        const tag = m[2].toLowerCase();
+        const end = m.index + m[0].length;
+        if (m[1]) {
+            const i = stack.map((n) => n.tag).lastIndexOf(tag);
+            if (i < 0) continue;
+            const node = stack[i];
+            stack.length = i;
+            if (node.path.join(".") === key) return { start: node.start, openEnd: node.openEnd, end };
+            continue;
+        }
+        const parent = stack[stack.length - 1] || root;
+        const node = { tag, start: m.index, openEnd: end, kids: 0, path: [...parent.path, parent.kids++] };
+        const lone = VOID_TAGS.has(tag) || m[3].trim().endsWith("/");
+        if (lone) { if (node.path.join(".") === key) return { start: node.start, openEnd: end, end }; continue; }
+        if (["script", "style", "textarea", "title"].includes(tag)) { const close = markup.toLowerCase().indexOf(`</${tag}`, end); if (close >= 0) re.lastIndex = close; }
+        stack.push(node);
+    }
+    return null;
+}
+/** Paints the selected element's source in the code (its opening tag darker), and when the selection just changed, scrolls to it. */
+export function updateCodeHighlight(reveal) {
+    if (!codeOpen() || !ed) return;
+    const text = ed.getValue();
+    const base = model.markup ? text.indexOf(model.markup) : -1;
+    const r = S.selected && S.selected.path && S.selected.path.length && base >= 0 ? elementRange(model.markup, S.selected.path) : null;
+    ed.setMarks(r ? [[base + r.start, base + r.end, "sel"], [base + r.start, base + r.openEnd, "selt"]] : []);
+    const n = ed.lineCount();
+    $("codeLines").textContent = `${n} line${n === 1 ? "" : "s"}`;
+    if (reveal && r) ed.reveal(base + r.start);
+}
+
+export function syncCode() {
+    if (!codeOpen() || !ed) return;
+    const next = model.markup.trim() ? assemble() : "";
+    const prev = ed.getValue();
+    if (prev === next) return updateCodeHighlight(false);
+    ed.setValue(next); // keeps the scroll position and the cursor
+    // show what changed: the first place the new code differs from the old
+    let i = 0;
+    while (i < prev.length && i < next.length && prev[i] === next[i]) i++;
+    if (prev) ed.reveal(i);
+    updateCodeHighlight(false);
+}
+async function setCodePanel(open) {
+    $("codePanel").classList.toggle("hidden", !open);
+    $("codePanel").classList.toggle("flex", open);
+    $("codeBtn").classList.toggle("on", open);
+    if (open && !ed && !starting) {
+        starting = true;
+        try {
+            ed = await createCodeEditor($("codeMount"), {
+                value: model.markup.trim() ? assemble() : "", onChange: onCodeInput, problems: tagProblems, onSave: () => $("saveBtn").click(),
+                wrap: true, // long class lists wrap instead of scrolling sideways (a narrow panel beside the design would cut off the start of the line)
+            });
+        } finally { starting = false; }
+    }
+    if (open && ed) { syncCode(); updateCodeHighlight(true); ed.focus(); }
+    layout();
+}
+let codeTimer = null;
+/** Shows the first place the tags don't match up (and returns it), or hides the warning. */
+function showCodeProblem() {
+    const bad = checkTags(codeValue());
+    const w = $("codeWarn");
+    w.classList.toggle("hidden", !bad);
+    if (bad) { w.textContent = `Line ${bad.line}: ${bad.message}. Not applied until fixed.`; w.dataset.line = String(bad.line); }
+    return bad;
+}
+/** Applies the code to the design now (it waits half a second after typing), unless its tags don't match up. */
+function applyCode() {
+    clearTimeout(codeTimer);
+    codeTimer = null;
+    if (showCodeProblem()) return false;
+    S.parsed = parseComponentSource(codeValue());
+    commit(S.parsed.markup, "code");
+    loadFrame();
+    return true;
+}
+/** Typing in the code: the squiggles and the warning show at once; the canvas follows once typing pauses (broken tags are never sent to it, where the browser would "repair" them its own way). */
+function onCodeInput() {
+    const n = ed.lineCount();
+    $("codeLines").textContent = `${n} line${n === 1 ? "" : "s"}`;
+    showCodeProblem();
+    clearTimeout(codeTimer);
+    codeTimer = setTimeout(applyCode, 500);
+}
+const copyFlash = (btn, msg) => { const was = btn.textContent; btn.textContent = msg; setTimeout(() => { btn.textContent = was; }, 1200); };
+
+/** Registers this part's listeners and does its first draw (called once, in order, by editor.js). */
+export function init() {
+    $("codeBtn").addEventListener("click", () => setCodePanel(!codeOpen()));
+    $("codeClose").addEventListener("click", () => setCodePanel(false));
+    $("codeWarn").addEventListener("click", () => {
+        if (!ed) return;
+        const [from, to] = ed.lineRange(Number($("codeWarn").dataset.line) || 1);
+        ed.select(from, to);
+    });
+    $("codeCopy").addEventListener("click", (e) => copyText(codeValue(), e.currentTarget));
+    $("codeFind").addEventListener("click", () => ed && ed.openSearch());
+    // Format: Prettier tidies the whole code (markup, <style> and <script>), as one undo step
+    $("codeFormat").addEventListener("click", async (e) => {
+        const btn = e.currentTarget;
+        if (!ed) return;
+        const r = await ed.format();
+        if (!r.ok) { copyFlash(btn, "Fix the errors first"); return; }
+        if (!r.changed) { copyFlash(btn, "Already tidy"); return; }
+        applyCode();
+        syncCode();
+    });
+// ── Where the code sits: below the design, or to its left (side by side) ──────────────────────────────────────────────────────────────────
+// Below the design by default. The choice is remembered; a design opened with `codeDock` starts there.
+let dock = "bottom";
+const sectionEl = () => $("canvas").parentElement; // the column that holds the design (and the code, when it is below)
+const DOCK_ICON = {
+    left: '<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M10 4v16"/></svg>',
+    bottom: '<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="4" width="18" height="16" rx="2"/><path d="M3 14h18"/></svg>',
+};
+function setDock(side, remember = true) {
+    const panel = $("codePanel"), handle = $("codeResize");
+    dock = side;
+    if (side === "left") {
+        sectionEl().parentElement.insertBefore(panel, sectionEl());
+        panel.classList.remove("border-t");
+        panel.classList.add("border-r");
+        panel.style.height = "";
+        panel.style.width = `${Number(pref("wc:codeW")) || 440}px`;
+        handle.className = "absolute inset-y-0 -right-1 z-10 w-2 cursor-col-resize";
+    } else {
+        sectionEl().append(panel);
+        panel.classList.add("border-t");
+        panel.classList.remove("border-r");
+        panel.style.width = "";
+        panel.style.height = `${Number(pref("wc:codeH")) || 256}px`;
+        handle.className = "absolute inset-x-0 -top-1 z-10 h-2 cursor-row-resize";
+    }
+    // the button shows where the code would go next
+    $("codeDock").innerHTML = DOCK_ICON[side === "left" ? "bottom" : "left"];
+    $("codeDock").title = side === "left" ? "Dock the code below the design" : "Dock the code beside the design (left)";
+    if (remember) pref("wc:codeDock", side);
+    layout();
+}
+
+// Resize: drag the panel's edge (top when below, right when beside); the size is remembered. The handle keeps the pointer
+// (setPointerCapture) so the drag follows it over the design's iframe too, which would otherwise take the pointer and leave it stuck.
+(() => {
+    const panel = $("codePanel"), handle = $("codeResize");
+    let drag = null;
+    handle.addEventListener("pointerdown", (e) => {
+        e.preventDefault();
+        drag = { x: e.clientX, y: e.clientY, w: panel.offsetWidth, h: panel.offsetHeight, side: dock };
+        handle.setPointerCapture(e.pointerId);
+        document.body.style.cursor = dock === "left" ? "col-resize" : "row-resize";
+    });
+    handle.addEventListener("pointermove", (e) => {
+        if (!drag) return;
+        if (drag.side === "left") panel.style.width = `${Math.round(Math.min(innerWidth * 0.7, Math.max(260, drag.w + e.clientX - drag.x)))}px`;
+        else panel.style.height = `${Math.round(Math.min(innerHeight * 0.8, Math.max(120, drag.h + drag.y - e.clientY)))}px`;
+        layout();
+    });
+    const end = (e) => {
+        if (!drag) return;
+        const side = drag.side;
+        drag = null;
+        document.body.style.cursor = "";
+        try { handle.releasePointerCapture(e.pointerId); } catch { /* already released */ }
+        pref(side === "left" ? "wc:codeW" : "wc:codeH", String(side === "left" ? panel.offsetWidth : panel.offsetHeight));
+    };
+    handle.addEventListener("pointerup", end);
+    handle.addEventListener("pointercancel", end);
+    handle.addEventListener("lostpointercapture", end);
+    $("codeDock").addEventListener("click", () => setDock(dock === "left" ? "bottom" : "left"));
+    setDock(data.codeDock || pref("wc:codeDock") || "bottom", false);
+    if (data.codeOpen) setCodePanel(true); // a new component starts with its code open
+})();
+}

package/design/editor/color-ui.js

@@ -0,0 +1,135 @@
+import { colorPickerOpener, closeColorPicker, openColorPicker } from "../color-picker.js";
+import { FAMILY_STACKS } from "../float-toolbar.js";
+import { FLOAT_ACTIONS, SIDES4, applyPanel, ftb, renderFloat } from "./frame-handles.js";
+import { $, S } from "./base.js";
+import { insp, liveKey, pickerClosed, setProp, setProps } from "./inspector.js";
+import { canvas, curWidth } from "./plane.js";
+import { scheduleLayout, setFrameSize } from "./designs.js";
+import { renderPagesList } from "./pages-panel.js";
+import { renderLayers, revealLayer } from "./layers.js";
+
+// The border colour follows the picker while it is dragged, not only once it closes. Everything from opening the picker to
+// closing it is one undo step, however slowly it is dragged: a "live:" key, merged without the time limit (commit).
+// ── Our colour picker instead of the browser's ───────────────────────────────
+// The browser's picker opens on top of the element being coloured; ours opens beside the selection. A press on any colour
+// field in the bar or the panel opens it and feeds that field as if it were being dragged: "input" while picking, "change" once
+// it closes, so live updates and one undo step per pick work exactly as before. The field is found again each time, since the
+// bar or panel may have been rebuilt meanwhile.
+const COLOR_FIELDS = ["ftcol", "ftp", "propcolor", "ccustom"];
+function fieldSelector(t) {
+    const k = COLOR_FIELDS.find((d) => t.dataset[d] !== undefined);
+    return k ? `${ftb.contains(t) ? "#ftb" : "#inspector"} input[type="color"][data-${k}="${CSS.escape(t.dataset[k])}"]` : null;
+}
+/** The selected element on screen: the outline drawn around it. */
+function selectionRect() {
+    const rs = [...$("sel").children].map((n) => n.getBoundingClientRect()).filter((r) => r.width > 8 && r.height > 8);
+    if (!rs.length) return null;
+    return { left: Math.min(...rs.map((r) => r.left)), top: Math.min(...rs.map((r) => r.top)), right: Math.max(...rs.map((r) => r.right)), bottom: Math.max(...rs.map((r) => r.bottom)) };
+}
+
+const FT_COLOR = { text: "color", fill: "background-color" };
+const toggleDesignsMenu = (e) => { e.stopPropagation(); $("addMenu").classList.add("hidden"); $("designsMenu").classList.toggle("hidden"); };
+
+// Layers live in the left panel, opened from the toggle in the tools.
+
+export function setLeft(open) {
+    S.leftOpen = open;
+    $("leftPanel").classList.toggle("hidden", !open);
+    $("leftPanel").classList.toggle("flex", open);
+    $("leftBtn").classList.toggle("on", open);
+    // Back, the toggle and the page menu move into the panel's header while it is open, and back to the floating tools when it closes
+    if (open) $("leftHead").appendChild($("navGroup")); else $("pillL").insertBefore($("navGroup"), $("navSep"));
+    $("navSep").classList.toggle("hidden", open);
+    renderPagesList();
+    renderLayers();
+    pref("wc:left", open ? "1" : "0");
+    if (open) revealLayer(true);
+    scheduleLayout();
+}
+
+// side panel: closed until you want every property or the layer tree
+let panelTab = "props";
+export const pref = (k, v) => { try { if (v === undefined) return localStorage.getItem(k); localStorage.setItem(k, v); } catch { /* storage is optional */ } return null; };
+export function setPanelTab(t) {
+    panelTab = t;
+    document.querySelectorAll("#panelTabs .ptab").forEach((b) => b.classList.toggle("is-on", b.dataset.ptab === t));
+    $("inspector").classList.toggle("hidden", t !== "props");
+    revealLayer(true);
+}
+export function setPanel(open) {
+    $("panel").classList.toggle("hidden", !open);
+    $("panel").classList.toggle("flex", open);
+    $("panelBtn").classList.toggle("on", open);
+    pref("wc:panel", open ? "1" : "0");
+    if (open) revealLayer(true);
+    scheduleLayout();
+}
+
+/** Registers this part's listeners and does its first draw (called once, in order, by editor.js). */
+export function init() {
+    document.addEventListener("click", (e) => {
+        let t = e.target.closest && e.target.closest('input[type="color"]');
+        if (!t || !(ftb.contains(t) || insp.contains(t)) || !S.selected) return;
+        const sel = fieldSelector(t);
+        if (!sel) return;
+        e.preventDefault(); // not the browser's picker
+        let opener = t.closest("label") || t;
+        if (colorPickerOpener() === opener) return closeColorPicker(); // the same swatch again: done
+        // one panel at a time: the bar's padding / radius panel (or its menu) closes when a colour is picked
+        if (ftb.contains(t) && (S.ftPop || S.ftMenu)) {
+            S.ftPop = null; S.ftMenu = false; renderFloat(true);
+            const again = document.querySelector(sel);
+            if (!again) return;
+            t = again; opener = t.closest("label") || t;
+        }
+        const feed = (type, hex) => { const f = document.querySelector(sel); if (f) { f.value = hex; f.dispatchEvent(new Event(type, { bubbles: true })); } };
+        // from the Properties panel: just left of the panel, level with the swatch; from the floating bar: beside the selection
+        const fromPanel = insp.contains(t);
+        const p = insp.getBoundingClientRect(), o = opener.getBoundingClientRect();
+        const near = fromPanel ? { left: p.left, right: p.right, top: o.top, bottom: o.bottom } : selectionRect();
+        const bounds = fromPanel ? { left: 0, top: 0, right: innerWidth, bottom: innerHeight } : canvas.getBoundingClientRect();
+        openColorPicker({ value: t.value, near, bounds, opener, onInput: (hex) => feed("input", hex), onClose: (hex) => feed("change", hex) });
+    }, true);
+ftb.addEventListener("input", (e) => {
+    const t = e.target;
+    if (!S.selected) return;
+    const label = t.closest(".swatch");
+    if (t.dataset.ftcol && FT_COLOR[t.dataset.ftcol]) {
+        if (label) { label.style.background = t.value; label.style.backgroundImage = "none"; }
+        return setProp(FT_COLOR[t.dataset.ftcol], t.value, undefined, liveKey(`ft-${t.dataset.ftcol}`));
+    }
+    if (t.dataset.ftp !== "border-color") return;
+    const hex = ftb.querySelector('[data-ftp="border-color-hex"]');
+    if (label) label.style.background = t.value;
+    if (hex) hex.value = t.value.toUpperCase();
+    setProps(SIDES4.map((d) => `border-${d}-color`), t.value, "borderColor", [], undefined, liveKey("ft-border"));
+});
+ftb.addEventListener("change", (e) => {
+    const t = e.target;
+    if (t.dataset.ftin === "fw") return setFrameSize({ w: Number(t.value) || curWidth() });
+    if (t.dataset.ftin === "fh") return setFrameSize({ h: t.value.trim() === "" ? null : Number(t.value) || null });
+    if (!S.selected) return;
+    if (t.dataset.ftsel === "family") return setProp("font-family", t.value, FAMILY_STACKS[t.value]);
+    if (t.dataset.ftin === "size") { const n = Number(t.value); return n > 0 ? setProp("font-size", `${n}px`) : renderFloat(); }
+    if (t.dataset.ftp === "border-color") { // the picker closed: its last value joins the drag's undo step, and the next pick starts a new one
+        if (S.selected) setProps(SIDES4.map((d) => `border-${d}-color`), t.value, "borderColor", [], undefined, liveKey("ft-border"));
+        return pickerClosed(t);
+    }
+    if (t.dataset.ftp) return applyPanel(t.dataset.ftp, t.value);
+    if (t.dataset.ftin === "radius") return FLOAT_ACTIONS.radius(Math.max(0, Number(t.value) || 0));
+    if (t.dataset.ftcol && FT_COLOR[t.dataset.ftcol]) { setProp(FT_COLOR[t.dataset.ftcol], t.value, undefined, liveKey(`ft-${t.dataset.ftcol}`)); return pickerClosed(t); }
+});
+
+    document.addEventListener("click", (e) => {
+        $("designsMenu").classList.add("hidden");
+        if ((S.ftMenu || S.ftPop) && !e.target.closest("#ftb")) { S.ftMenu = false; S.ftPop = null; renderFloat(true); }
+    });
+    $("designsBtn").addEventListener("click", toggleDesignsMenu);
+    $("navMoreBtn").addEventListener("click", toggleDesignsMenu);
+    $("designsMenu").addEventListener("click", (e) => e.stopPropagation());
+    $("leftBtn").addEventListener("click", () => setLeft(!S.leftOpen));
+    $("panelBtn").addEventListener("click", () => setPanel($("panel").classList.contains("hidden")));
+    $("panelClose").addEventListener("click", () => setPanel(false));
+    $("panelTabs").addEventListener("click", (e) => { const b = e.target.closest("[data-ptab]"); if (b) setPanelTab(b.dataset.ptab); });
+    new ResizeObserver(() => scheduleLayout()).observe(canvas);
+}