windcraft-editor 0.0.0-stage → 0.1.0

package/design/panel.js

@@ -0,0 +1,212 @@
+// The Properties panel as components (Preact + htm, one vendored file, no build step): the shell and the parts that are
+// not a section of the Design tab. Everything is a component that keeps its own state (what is being typed, the cursor,
+// errors) across redraws, so the editor can redraw the panel whenever it likes. The panel's own state (tab, breakpoint, open
+// sections...) comes from panel-state.js through context; what to show comes from inspectorView (panel-model.js); what the
+// components ask of the editor goes through `actions` (editor.js panelActions).
+//   here: the head (tabs), the page panel, the AI tab, the Code tab's element code
+//   design-tab.js · figma-sections.js · style-sections.js · prop-sections.js: the Design tab
+//   classes-section.js: the Code tab below the element's code; controls.js, group-controls.js: the blocks they are made of
+import { html, render, useState, useEffect, useLayoutEffect, useRef } from "../vendor/preact-htm.js";
+import { UiContext } from "./panel-state.js";
+import { highlight, checkTags } from "./code-view.js";
+import { TextInput, Field } from "./controls.js";
+import { DesignTop } from "./design-tab.js";
+import { PositionSection, LayoutSection, SpacingSection, ItemSection } from "./figma-sections.js";
+import { TypographySection, BackgroundSection, BorderSection, EffectsSection, TransformSection, MotionSection, InteractionSection, AddBox } from "./style-sections.js";
+import { ClassesSection } from "./classes-section.js";
+
+/** A labelled text field of the page panel: typed freely, committed on Enter or leaving (controls.js TextInput). */
+const PageField = ({ label, value, placeholder, onCommit, row }) => html`<${Field} label=${label} cell=${!row}><${TextInput} value=${value} placeholder=${placeholder} onCommit=${onCommit} /></${Field}>`;
+
+
+/** Where the text at `offset` of an element's text is on screen, as { top, bottom } in the page's coordinates. */
+function caretRect(root, offset) {
+    const walker = document.createTreeWalker(root, NodeFilter.SHOW_TEXT);
+    let left = offset, node = null;
+    while (walker.nextNode()) {
+        node = walker.currentNode;
+        if (left <= node.length) break;
+        left -= node.length;
+    }
+    if (!node) return null;
+    const r = document.createRange();
+    r.setStart(node, Math.min(left, node.length));
+    r.collapse(true);
+    const rect = r.getBoundingClientRect();
+    return rect.height ? rect : (node.parentElement || root).getBoundingClientRect();
+}
+
+/**
+ * The selected element's own code, editable. Ctrl/Cmd+Enter or leaving the box applies it (one undo step); Esc puts back
+ * what was applied; anything typed is applied to *this* element when another is picked (the component is keyed by the
+ * element's path, so it unmounts then). `onApply(path, code, indent, original)` returns { ok, message? }.
+ */
+function CodeTab({ path, source, indent, s, actions }) {
+    const onApply = actions.applyElement;
+    const [draft, setDraft] = useState(source);
+    const [error, setError] = useState("");
+    const orig = useRef(source); // the code as last shown or applied
+    const ta = useRef(null), box = useRef(null), hl = useRef(null);
+    const live = useRef({});
+    live.current = { draft, path, indent, onApply, ta };
+
+    // the element's code changed from elsewhere (undo, the canvas, the code panel): show it, unless it is being typed in
+    useEffect(() => {
+        if (source === orig.current) return;
+        orig.current = source;
+        if (document.activeElement !== ta.current) { setDraft(source); setError(""); }
+    }, [source]);
+
+    // leaving (another element picked, another tab) applies what was typed
+    useEffect(() => () => {
+        const { draft: d, path: p, indent: i, onApply: apply, ta: t } = live.current;
+        const code = t.current ? t.current.value : d;
+        if (code.trim() !== orig.current.trim()) apply(p, code, i, orig.current);
+    }, []);
+
+    const dirty = draft.trim() !== orig.current.trim();
+    const problem = dirty ? checkTags(draft) : null;
+
+    // keep the cursor in view: this box scrolls, the textarea inside it does not
+    useLayoutEffect(() => {
+        const t = ta.current, b = box.current;
+        if (!t || document.activeElement !== t) return;
+        const r = caretRect(hl.current, t.selectionEnd), br = b.getBoundingClientRect();
+        if (!r) return;
+        if (r.top < br.top) b.scrollTop -= br.top - r.top + 8;
+        else if (r.bottom > br.bottom) b.scrollTop += r.bottom - br.bottom + 8;
+    }, [draft]);
+
+    const apply = () => {
+        const code = ta.current ? ta.current.value : draft; // what is in the box now, even if a redraw is still due
+        const res = live.current.onApply(path, code, indent, orig.current);
+        if (res.ok) { orig.current = code; setError(""); } else setError(res.message || "Not applied.");
+        return res.ok;
+    };
+    const onKeyDown = (e) => {
+        if (e.key === "Enter" && (e.metaKey || e.ctrlKey)) { e.preventDefault(); if (apply()) e.target.blur(); }
+        else if (e.key === "Escape") { e.preventDefault(); setDraft(orig.current); setError(""); e.target.blur(); }
+        else if (e.key === "Tab" && !e.shiftKey) { e.preventDefault(); document.execCommand("insertText", false, "  "); }
+    };
+    const copy = (e) => {
+        const btn = e.currentTarget, was = btn.textContent;
+        const done = (m) => { btn.textContent = m; setTimeout(() => { btn.textContent = was; }, 1200); };
+        navigator.clipboard.writeText(draft).then(() => done("Copied"), () => done("Copy failed"));
+    };
+
+    const note = error || (problem ? `Line ${problem.line}: ${problem.message}` : dirty ? "Ctrl/Cmd+Enter or click away to apply. Esc undoes your typing." : "Edit it, then Ctrl/Cmd+Enter or click away to apply.");
+    return html`
+        <div class="sec"><div class="secb nopad">
+            <div class="elhead"><p class="sub first">Element code</p><button type="button" title="Copy this element's HTML" onClick=${copy}>Copy</button></div>
+            <div class="codebox elcode" ref=${box}><div class="elin">
+                <pre class="code-layer ck" aria-hidden="true" ref=${hl} dangerouslySetInnerHTML=${{ __html: highlight(draft) }}></pre>
+                <textarea class="code-layer" spellcheck="false" autocomplete="off" rows="1" ref=${ta} value=${draft}
+                    onInput=${(e) => { setDraft(e.target.value); setError(""); }} onKeyDown=${onKeyDown} onBlur=${apply}></textarea>
+            </div></div>
+            <p class=${`muted ${error || problem ? "bad" : ""}`} data-elnote>${note}</p>
+        </div></div>
+        <${ClassesSection} s=${s} actions=${actions} />`;
+}
+
+/** A box for asking the AI something: its own text, status and busy state. `run(prompt)` returns { ok, message? }. */
+function AskBox({ title, placeholder, rows, button, help, empty, done, run }) {
+    const [prompt, setPrompt] = useState("");
+    const [note, setNote] = useState(null);
+    const [busy, setBusy] = useState(false);
+    const go = async () => {
+        if (!prompt.trim()) return setNote({ text: empty, bad: true });
+        setBusy(true);
+        setNote({ text: "Working..." });
+        const res = await run(prompt.trim());
+        setBusy(false);
+        if (res.ok) { setPrompt(""); setNote(done ? { text: done } : null); } else setNote({ text: res.message || "Something went wrong.", bad: true });
+    };
+    return html`
+        <div class="sec"><div class="secb nopad">
+            <p class="sub first">${title}</p>
+            <textarea class="fi area" rows=${rows} placeholder=${placeholder} value=${prompt} onInput=${(e) => setPrompt(e.target.value)}></textarea>
+            <button type="button" class="primary" disabled=${busy} onClick=${go}>${button}</button>
+            ${note && html`<p class=${`text-[11px] ${note.bad ? "text-red-700" : "text-neutral-500"}`}>${note.text}</p>`}
+            <p class="muted">${help}</p>
+        </div></div>`;
+}
+
+/** The AI tab: change the selected element. Keyed by the element, so a request still running applies to the one it was made for. */
+function AiTab({ path, outer, actions }) {
+    return html`<${AskBox} title="Ask AI about this element" placeholder="e.g. make this a dark card with a larger title" rows=${4}
+        button="Apply to this element" help="Changes only the selected element. Undo with Ctrl/Cmd+Z." empty="Describe the change first."
+        done="Applied. Undo with Ctrl/Cmd+Z." run=${(prompt) => actions.askAI(path, outer, prompt)} />`;
+}
+
+/** The page's own panel (no element selected): name, version, size, position, and a draft box while the page is empty. */
+function PagePanel({ page: pg, actions }) {
+    const dev = (w, l) => html`<button type="button" onClick=${() => actions.setDevice(w)}
+        class=${`flex-1 rounded border py-1 text-[10px] ${pg.w === w ? "border-neutral-900 bg-neutral-900 text-white" : "border-neutral-200 hover:bg-neutral-50"}`}>${l}</button>`;
+    const btn = (l, fn) => html`<button type="button" onClick=${fn} class="flex-1 rounded border border-neutral-200 py-1 text-[10px] hover:bg-neutral-50">${l}</button>`;
+    const set = (key) => (text) => actions.setPageField(key, text);
+    return html`
+        <div class="sec"><div class="secb nopad"><p class="sub first">Page</p>
+            <${PageField} row label="Name" value=${pg.name} onCommit=${set("name")} />
+            <${PageField} row label="Group" value=${pg.group} placeholder="none" onCommit=${set("group")} />
+            <div class="row"><span class="lbl">Version</span><span class="text-[11px] text-neutral-700">${pg.isNew ? "not saved yet" : `v${pg.version}`}${pg.project ? ` · ${pg.project}` : ""}</span></div>
+        </div></div>
+        ${pg.empty && actions.canAI && html`<${AskBox} title="Generate with AI" placeholder="e.g. a pricing section with three tiers and a highlighted middle plan" rows=${3}
+            button="Generate" help="Or draw with the tools, add blocks from +, or paste code in the code panel." empty="Describe what you want first."
+            run=${actions.draftPage} />`}
+        <div class="sec"><div class="secb nopad"><p class="sub first">Size</p>
+            <div class="flex gap-1">${dev(1280, "Desktop")}${dev(768, "Tablet")}${dev(390, "Mobile")}</div>
+            <div class="two"><${PageField} label="W" value=${pg.w} onCommit=${set("w")} /><${PageField} label="H" value=${pg.auto ? "" : pg.h} placeholder="auto" onCommit=${set("h")} /></div>
+            <p class="text-[10px] text-neutral-500">Leave the height empty and it follows the content.</p>
+        </div></div>
+        <div class="sec"><div class="secb nopad"><p class="sub first">Position on the canvas</p>
+            <div class="two"><${PageField} label="X" value=${pg.x} onCommit=${set("x")} /><${PageField} label="Y" value=${pg.y} onCommit=${set("y")} /></div>
+        </div></div>
+        <div class="sec"><div class="secb nopad"><div class="flex gap-1">${btn("Zoom to fit", actions.fit)}${btn("Details…", actions.details)}</div>
+            <p class="text-[10px] text-neutral-500">Click an element in the page to edit it.</p>
+        </div></div>`;
+}
+
+/**
+ * The style sections after Position and Layout, in the order a frontend developer reaches for them (style-sections.js). The page
+ * (its body) gets no Border, Effects, Transform or Interaction: those on a whole page are almost always a slip meant for an element,
+ * and a border on a page as tall as the screen makes it outgrow its frame.
+ */
+const Styles = ({ k, s, actions, page }) => html`<${TypographySection} key=${`t${k}`} s=${s} actions=${actions} /><${BackgroundSection} key=${`b${k}`} s=${s} actions=${actions} />
+    ${!page && html`<${BorderSection} key=${`r${k}`} s=${s} actions=${actions} /><${EffectsSection} key=${`e${k}`} s=${s} actions=${actions} />
+        <${TransformSection} key=${`x${k}`} s=${s} actions=${actions} /><${MotionSection} key=${`n${k}`} s=${s} actions=${actions} /><${InteractionSection} key=${`i${k}`} s=${s} actions=${actions} />`}
+    <${AddBox} key=${`c${k}`} actions=${actions} />`;
+
+const CLOSE = html`<svg class="h-4 w-4" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="1.8" stroke-linecap="round"><path d="M6 6l12 12M18 6 6 18" /></svg>`;
+const TABS = [["design", "Design"], ["classes", "Code"], ["ai", "AI"]];
+
+/** The row at the top: the tabs (or just "Page" when no element is selected) and the close button. */
+function Head({ page, tab, actions }) {
+    return html`<div class="itabs">
+        ${page ? html`<span class="px-1 text-[11px] font-medium text-neutral-800">Page</span>`
+        : TABS.filter(([k]) => k !== "ai" || actions.canAI).map(([k, label]) => html`<button type="button" class=${tab === k ? "on" : ""} onClick=${() => actions.setTab(k)}>${label}</button>`)}
+        <button type="button" title="Close" style="padding:0" class="ml-auto flex h-6 w-6 shrink-0 items-center justify-center rounded text-neutral-500 hover:bg-neutral-100" onClick=${actions.closePanel}>${CLOSE}</button>
+    </div>`;
+}
+
+/** The panel: its head, then what the view says to show. The Design tab's parts are keyed by the element: another one gets fresh fields, so nothing typed for one can land on the next. */
+function Panel({ view, tab, actions }) {
+    let body;
+    if (view.design) {
+        const { key, s } = view.design;
+        body = html`<${DesignTop} key=${key} s=${s} actions=${actions} />
+            ${s.tag !== "body" && html`<${PositionSection} key=${`p${key}`} s=${s} actions=${actions} />`}<${LayoutSection} key=${`l${key}`} s=${s} actions=${actions} />
+            <${SpacingSection} key=${`s${key}`} s=${s} actions=${actions} /><${ItemSection} key=${`f${key}`} s=${s} actions=${actions} /><${Styles} k=${key} s=${s} actions=${actions} page=${s.tag === "body"} />`;
+    }
+    else if (view.code) body = html`<${CodeTab} key=${view.code.key} path=${view.code.path} source=${view.code.source} indent=${view.code.indent} s=${view.code.s} actions=${actions} />`;
+    else if (view.classes) body = html`<${ClassesSection} key=${view.classes.key} s=${view.classes.s} actions=${actions} />`;
+    else if (view.ai) body = html`<${AiTab} key=${view.ai.key} path=${view.ai.path} outer=${view.ai.outer} actions=${actions} />`;
+    else if (view.page) body = html`<${PagePanel} page=${view.page} actions=${actions} />${view.pageBody && html`
+        <div class="pagehead"><b>Page styling</b><span>Applies to the whole page (its body), not an element. Click an element to style it.</span></div>
+        <${LayoutSection} key="page-l" s=${view.pageBody.s} actions=${view.pageBody.actions} /><${SpacingSection} key="page-s" s=${view.pageBody.s} actions=${view.pageBody.actions} /><${Styles} k="page" page s=${view.pageBody.s} actions=${view.pageBody.actions} />`}`;
+    return html`<${Head} page=${view.page} tab=${tab} actions=${actions} />${body}`;
+}
+
+/** Draws the panel into its element. `view` comes from inspectorView (panel-model.js), `ui` is the panel's state (panel-state.js) plus what is worked out at the time of drawing. */
+export function renderPanel(container, view, actions, ui) {
+    render(html`<${UiContext.Provider} value=${ui}><${Panel} view=${view} tab=${ui.tab} actions=${actions} /></${UiContext.Provider}>`, container);
+}

package/design/presenter.js

@@ -0,0 +1,312 @@
+import { buildPreviewDocument, parseComponentSource } from "../playground/component-source.js";
+import { DEVICES, deviceParts } from "./device-frame.js";
+
+// ── The prototype viewer: pages shown one at a time, full screen, as a visitor would see them ───────────────────────────────
+// No editor state in here: the editor's Preview (a fallback when the app has no prototype page) and the /prototype page both use it.
+// A toolbar at the top right (like the editor's own): previous / next page with a count, Share, how the page is scaled to the
+// screen, and Share. Hide UI hides it again; ⌘\ or the top right corner brings it back.
+
+const SCALES = [
+    ["actual", "Actual size (100%)", "", '<rect x="3" y="5" width="18" height="14" rx="2"/><path d="M9.5 10.5 11 9.5v5"/><path d="M13.5 11.2v.1M13.5 13.1v.1"/>'],
+    ["responsive", "Responsive", "Z", '<rect x="3" y="5" width="18" height="14" rx="2"/><path d="M12 5v14M8.5 10.5 7 12l1.5 1.5M15.5 10.5 17 12l-1.5 1.5"/>'],
+    ["desktop", "Desktop", "1280", '<rect x="3" y="4" width="18" height="12" rx="2"/><path d="M8 20h8M12 16v4"/>'],
+    ["tablet", "Tablet", "768", '<rect x="5" y="3" width="14" height="18" rx="2"/><path d="M11 18h2"/>'],
+    ["mobile", "Mobile", "390", '<rect x="7" y="3" width="10" height="18" rx="2"/><path d="M11 18h2"/>'],
+    ["fitw", "Fit width", "", '<rect x="3" y="5" width="18" height="14" rx="2"/><path d="M7.5 12h9M10 9.5 7.5 12l2.5 2.5M14 9.5l2.5 2.5-2.5 2.5"/>'],
+    ["fitwh", "Fit width and height", "", '<rect x="3" y="5" width="18" height="14" rx="2"/><path d="M12 8v8M8 12h8M10.5 9.5 12 8l1.5 1.5M10.5 14.5 12 16l1.5-1.5M9.5 10.5 8 12l1.5 1.5M14.5 10.5 16 12l-1.5 1.5"/>'],
+    ["fill", "Fill screen", "", '<rect x="3" y="5" width="18" height="14" rx="2"/><path d="M8 9.5V8h1.5M14.5 8H16v1.5M16 14.5V16h-1.5M9.5 16H8v-1.5"/>'],
+];
+export const SCALE_NAMES = SCALES.map((s) => s[0]);
+// (The phone and tablet frames are drawn by device-frame.js, shared with the gallery.)
+const DEVICE_W = { desktop: 1280, tablet: 768, mobile: 390 }; // the page is built at that width (its own responsive styles apply), as the editor's page sizes
+const ICON = {
+    close: '<path d="M6 6l12 12M18 6 6 18"/>',
+    prev: '<path d="m15 6-6 6 6 6"/>',
+    next: '<path d="m9 6 6 6-6 6"/>',
+    down: '<path d="m6 9 6 6 6-6"/>',
+    check: '<path d="m5 12 5 5L20 7"/>',
+    hide: '<rect x="3" y="4" width="18" height="6" rx="1.5"/><path d="M3 15h18M3 19h12"/>',
+    grip: '<circle cx="9" cy="6" r="1.3"/><circle cx="15" cy="6" r="1.3"/><circle cx="9" cy="12" r="1.3"/><circle cx="15" cy="12" r="1.3"/><circle cx="9" cy="18" r="1.3"/><circle cx="15" cy="18" r="1.3"/>',
+    minimize: '<path d="M6 12h12"/>',
+    expand: '<path d="M4 8V5a1 1 0 0 1 1-1h3M16 4h3a1 1 0 0 1 1 1v3M20 16v3a1 1 0 0 1-1 1h-3M8 20H5a1 1 0 0 1-1-1v-3"/>',
+    share: '<path d="M12 3v12M8 7l4-4 4 4"/><path d="M5 12v7a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2v-7"/>',
+};
+const svg = (paths, size = 18, w = 1.6) => `<svg width="${size}" height="${size}" fill="none" viewBox="0 0 24 24" stroke="currentColor" stroke-width="${w}" stroke-linecap="round" stroke-linejoin="round" aria-hidden="true">${paths}</svg>`;
+const GRIP = `<svg width="14" height="16" viewBox="6 3 12 18" fill="currentColor" aria-hidden="true">${ICON.grip}</svg>`;
+const esc = (s) => String(s ?? "").replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" }[c]));
+
+// Our own styles, so the viewer looks the same inside the editor and on its own page (which has none of the editor's stylesheet).
+const STYLE = `
+.pvr{position:fixed;inset:0;z-index:200;background:#1c1c1e;display:flex;flex-direction:column;font-family:Inter,ui-sans-serif,system-ui,-apple-system,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased}
+.pvr *{box-sizing:border-box}
+.pvr button{font:inherit;cursor:pointer;background:none;border:0;padding:0;color:inherit}
+.pvr .pv-pill{background:#fff;border:1px solid #e5e5e5;border-radius:12px;box-shadow:0 4px 16px rgba(0,0,0,.18)}
+.pvr .pv-grip{display:inline-flex;align-items:center;justify-content:center;width:20px;height:32px;color:#a3a3a3;cursor:grab;touch-action:none}
+.pvr .pv-grip:active{cursor:grabbing}
+.pvr .pv-dock{position:absolute;z-index:206;display:flex;align-items:center;gap:8px;transition:opacity .15s}
+.pvr .pv-b{display:inline-flex;align-items:center;justify-content:center;gap:6px;height:32px;min-width:32px;padding:0;border-radius:8px;color:#404040;font-size:13px}
+.pvr .pv-b:hover{background:#f0f0f0}
+.pvr .pv-b:disabled{opacity:.3;cursor:default;background:none}
+.pvr .pv-sep{width:1px;height:20px;background:#e5e5e5;margin:0 4px}
+.pvr .pv-share{background:#111;color:#fff;padding:0 12px;border-radius:8px}
+.pvr .pv-share:hover{background:#000}
+.pvr .pv-pop{position:absolute;z-index:210;background:#fff;border:1px solid #e5e5e5;border-radius:12px;box-shadow:0 8px 28px rgba(0,0,0,.28);color:#171717}
+.pvr .pv-item{display:flex;align-items:center;gap:10px;width:100%;height:34px;padding:0 10px;border-radius:8px;font-size:13px;color:#171717;text-align:left}
+.pvr .pv-item:hover{background:#f0f0f0}
+`;
+let styled = false;
+function addStyle() {
+    if (styled) return;
+    styled = true;
+    const s = document.createElement("style");
+    s.dataset.wcPresenter = "";
+    s.textContent = STYLE;
+    document.head.appendChild(s);
+}
+
+/**
+ * @param {object} o
+ * @param {{ key: string, title: string, width?: number, height?: number, source: object | string | (() => object | string) }[]} o.pages
+ * @param {number} [o.start]       the page to begin on
+ * @param {string} [o.scaling]     one of SCALE_NAMES
+ * @param {() => void} [o.onClose] when given, the toolbar has a close button (and Esc closes)
+ * @param {{ label?: string, open: (anchor: HTMLElement) => void } | null} [o.share]   a Share button
+ * @param {string} [o.name]        a project name, shown at the top left
+ * @param {(state: { key: string, index: number, scaling: string }) => void} [o.onChange]
+ */
+export function createPresenter(o) {
+    addStyle();
+    const pages = o.pages;
+    let at = Math.min(Math.max(0, o.start || 0), pages.length - 1);
+    let scaleMode = SCALE_NAMES.includes(o.scaling) ? o.scaling : "", uiHidden = false, menu = null; // "": the page decides (a page as wide as a tablet or more fills the width; a phone-sized one keeps its own size)
+    const widthFor = (p) => { const m = modeOf(p); return DEVICE_W[m] || (m === "responsive" ? stage.clientWidth : p.width || 1280); };
+    const modeOf = (p) => scaleMode || ((p.width || 1280) >= 768 ? "fitw" : "actual");
+
+    const box = document.createElement("div");
+    box.className = "pvr";
+    box.setAttribute("role", "dialog");
+    box.setAttribute("aria-label", "Prototype");
+    const name = esc(o.name || "");
+    box.innerHTML = `<div data-stage style="position:absolute;inset:0;overflow:hidden"><div data-wrap><div data-shell><div data-screen><iframe data-frame title="Prototype" sandbox="allow-scripts allow-forms allow-popups"></iframe></div>
+        <span data-notch style="display:none"></span><span data-cam style="display:none"></span><span data-side style="display:none"></span></div></div></div>
+    <div data-hot style="position:absolute;left:0;right:0;top:0;height:20px;z-index:205"></div>
+    <div data-dock class="pv-dock" style="right:12px;top:12px">
+        <div data-full style="display:flex;align-items:center;gap:8px">
+            <div class="pv-pill" style="display:flex;align-items:center;gap:2px;padding:4px">
+                <span data-grip class="pv-grip" title="Drag to move the toolbar">${GRIP}</span>
+                ${o.onClose ? `<button type="button" data-close class="pv-b" style="width:32px" title="Close (Esc)" aria-label="Close preview">${svg(ICON.close)}</button><span class="pv-sep"></span>` : ""}
+                <button type="button" data-prev class="pv-b" style="width:32px" title="Previous page (Left arrow)" aria-label="Previous page">${svg(ICON.prev)}</button>
+                <span style="display:inline-flex;align-items:baseline;gap:8px;padding:0 6px;min-width:60px;justify-content:center" ${name ? `title="${name}"` : ""}>
+                    <span data-title style="font-size:13px;font-weight:600;color:#171717;max-width:200px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap"></span>
+                    <span data-count style="font-size:12px;color:#737373"></span>
+                </span>
+                <button type="button" data-next class="pv-b" style="width:32px" title="Next page (Right arrow)" aria-label="Next page">${svg(ICON.next)}</button>
+                <span class="pv-sep"></span>
+                ${o.share ? `<button type="button" data-share class="pv-b pv-share" style="padding:0 14px;gap:6px;font-weight:600;margin-right:2px" title="Get a link to this prototype">${svg(ICON.share, 16)}<span>${esc(o.share.label || "Share")}</span></button>` : ""}
+                <button type="button" data-scale class="pv-b" style="padding:0 8px 0 10px;gap:4px;font-weight:500;color:#171717" title="How the page fits the screen" aria-haspopup="menu"><span>100%</span>${svg(ICON.down, 14, 1.8)}</button>
+                <span class="pv-sep"></span>
+                <button type="button" data-min class="pv-b" style="width:32px" title="Minimize the toolbar" aria-label="Minimize the toolbar">${svg(ICON.minimize)}</button>
+            </div>
+        </div>
+        <div data-mini class="pv-pill" style="display:none;align-items:center;gap:2px;padding:4px">
+            <span data-grip class="pv-grip" title="Drag to move the toolbar">${GRIP}</span>
+            <span data-count2 style="font-size:12px;color:#525252;padding:0 4px;min-width:34px;text-align:center"></span>
+            <button type="button" data-expand class="pv-b" style="width:32px" title="Show the toolbar" aria-label="Show the toolbar">${svg(ICON.expand, 16)}</button>
+        </div>
+    </div>`;
+    document.body.appendChild(box);
+    const q = (s) => box.querySelector(s);
+    const stage = q("[data-stage]"), wrap = q("[data-wrap]"), shell = q("[data-shell]"), screen = q("[data-screen]"), notch = q("[data-notch]"), cam = q("[data-cam]"), side = q("[data-side]"), frame = q("[data-frame]"), dock = q("[data-dock]"), full = q("[data-full]"), mini = q("[data-mini]");
+
+    // A page of its own has none of the editor's script: keys and Ctrl/Cmd + scroll (the browser's zoom) are handed to this window.
+    const pageScript = (id) => `<script data-wc-present>(function(){var I=${JSON.stringify(id)};function name(e){var m=e.metaKey||e.ctrlKey;if(m&&e.key==="\\\\")return"hideui";if(m||e.altKey)return"";if(e.key==="ArrowLeft"||e.key==="ArrowRight"||e.key==="Escape")return e.key;if(e.key==="z"||e.key==="Z")return"responsive";return""}addEventListener("keydown",function(e){var k=name(e);if(!k)return;var t=e.target;if(k!=="Escape"&&k!=="hideui"&&t&&(/^(input|textarea|select)$/i.test(t.tagName)||t.isContentEditable))return;e.preventDefault();parent.postMessage({wcPresent:I,key:k},"*")},true);addEventListener("wheel",function(e){if(e.ctrlKey||e.metaKey)e.preventDefault()},{passive:false});["gesturestart","gesturechange","gestureend"].forEach(function(t){addEventListener(t,function(e){e.preventDefault()})})})()<\/script>`;
+
+    const sourceOf = (p) => {
+        const s = typeof p.source === "function" ? p.source() : p.source;
+        return typeof s === "string" ? parseComponentSource(s) : s;
+    };
+
+    /** Sizes the page for the screen: it keeps its own width (Actual size), takes the window's (Responsive), or is scaled. */
+    function layout() {
+        const p = pages[at], mode = modeOf(p);
+        const availW = stage.clientWidth, availH = stage.clientHeight;
+        const dev = DEVICES[mode];
+        if (dev) { // a phone or a tablet in its frame, centred, scaled down only when the window is smaller than it
+            const d = deviceParts(dev), k = Math.min(1, (availW - 24) / d.w, (availH - 24) / d.h), W = d.w * k, H = d.h * k;
+            shell.style.cssText = d.shell + `transform:scale(${k});`;
+            screen.style.cssText = d.screen;
+            frame.style.cssText = d.frame;
+            notch.style.cssText = d.notch;
+            cam.style.cssText = d.cam;
+            side.style.cssText = d.side;
+            wrap.style.cssText = `position:relative;flex:none;width:${W}px;height:${H}px;margin:${(availH - H) / 2}px 0 0 ${(availW - W) / 2}px;`;
+            stage.style.overflowX = "hidden";
+            q("[data-scale] span").textContent = `${Math.round(k * 100)}%`;
+            return;
+        }
+        shell.style.cssText = "position:absolute;inset:0;";
+        screen.style.cssText = "position:absolute;inset:0;overflow:hidden;";
+        notch.style.display = cam.style.display = side.style.display = "none";
+        const w = p.width || 1280, h = p.height || availH;
+        let k = 1, fw = w, fh = availH;
+        if (mode === "desktop") { fw = DEVICE_W.desktop; k = Math.min(1, availW / fw); fh = availH / k; } // the desktop width, centred; smaller only when the window is narrower
+        else if (mode === "responsive") fw = availW;
+        else if (mode === "fitw") { k = availW / w; fh = availH / k; }
+        else if (mode === "fitwh") { k = Math.min(availW / w, availH / h); fh = h; }
+        else if (mode === "fill") { k = Math.max(availW / w, availH / h); fh = h; }
+        const W = fw * k, H = fh * k;
+        frame.style.cssText = `position:absolute;left:0;top:0;width:${fw}px;height:${fh}px;transform:scale(${k});transform-origin:0 0;border:0;background:#fff;`;
+        wrap.style.cssText = `position:relative;flex:none;width:${W}px;height:${H}px;margin:${Math.max(0, (availH - H) / 2)}px 0 0 ${W <= availW || mode === "fill" ? (availW - W) / 2 : 0}px;${W < availW - 1 || H < availH - 1 ? "box-shadow:0 12px 48px rgba(0,0,0,.45);" : ""}overflow:hidden;`;
+        stage.style.overflowX = mode === "actual" ? "auto" : "hidden";
+        q("[data-scale] span").textContent = `${Math.round(k * 100)}%`;
+    }
+
+    function show(i) {
+        at = (i + pages.length) % pages.length;
+        const p = pages[at];
+        const html = buildPreviewDocument(sourceOf(p), { width: widthFor(p) });
+        const cut = html.lastIndexOf("</body>");
+        const id = `p${Date.now()}${at}`;
+        box.dataset.id = id;
+        frame.srcdoc = cut < 0 ? html + pageScript(id) : html.slice(0, cut) + pageScript(id) + html.slice(cut);
+        q("[data-title]").textContent = p.title || "Untitled page";
+        q("[data-count]").textContent = pages.length > 1 ? `${at + 1} / ${pages.length}` : "";
+        q("[data-count2]").textContent = pages.length > 1 ? `${at + 1}/${pages.length}` : "";
+        q("[data-prev]").disabled = q("[data-next]").disabled = pages.length < 2;
+        layout();
+        if (o.onChange) o.onChange({ key: p.key, index: at, scaling: scaleMode });
+    }
+
+    function setScale(mode) { scaleMode = mode; closeMenu(); show(at); } // Responsive changes the page's own width, so it is built again
+
+    function setUi(hidden) {
+        uiHidden = hidden;
+        closeMenu();
+        dock.style.opacity = hidden ? "0" : "1";
+        dock.style.pointerEvents = hidden ? "none" : "auto";
+        layout();
+    }
+
+    function closeScale() { if (menu) { menu.remove(); menu = null; } }
+    function closeMenu() { closeScale(); if (o.share && o.share.close) o.share.close(); }
+
+    // ── The toolbar floats over the page: drag it by its grip, minimize it to a small chip ──────────────────
+    const DOCK_KEY = "wc:presenterDock";
+    let saved = {};
+    try { saved = JSON.parse(localStorage.getItem(DOCK_KEY) || "{}") || {}; } catch { /* storage is optional */ }
+    let minimized = Boolean(saved.min);
+    const place = (right, top) => {
+        right = Math.min(Math.max(8, right), Math.max(8, innerWidth - dock.offsetWidth - 8));
+        top = Math.min(Math.max(8, top), Math.max(8, innerHeight - dock.offsetHeight - 8));
+        dock.style.right = `${right}px`;
+        dock.style.top = `${top}px`;
+    };
+    const keepDock = () => { try { localStorage.setItem(DOCK_KEY, JSON.stringify({ right: parseFloat(dock.style.right), top: parseFloat(dock.style.top), min: minimized })); } catch { /* storage is optional */ } };
+    function setMin(m) {
+        minimized = m;
+        closeMenu();
+        full.style.display = m ? "none" : "flex";
+        mini.style.display = m ? "flex" : "none";
+        place(parseFloat(dock.style.right), parseFloat(dock.style.top)); // it grows and shrinks towards the left: keep it on screen
+        keepDock();
+    }
+    box.querySelectorAll("[data-grip]").forEach((grip) => {
+        grip.addEventListener("pointerdown", (e) => {
+            if (e.button !== 0) return;
+            closeMenu();
+            e.preventDefault();
+            const from = { x: e.clientX, y: e.clientY, right: parseFloat(dock.style.right), top: parseFloat(dock.style.top) };
+            // the page under the pointer is a separate document that would take the moves: a see-through cover keeps them here
+            const cover = document.createElement("div");
+            cover.style.cssText = "position:absolute;inset:0;z-index:300;cursor:grabbing;touch-action:none";
+            box.appendChild(cover);
+            const move = (ev) => place(from.right - (ev.clientX - from.x), from.top + (ev.clientY - from.y));
+            const end = () => {
+                cover.removeEventListener("pointermove", move);
+                cover.removeEventListener("pointerup", end);
+                cover.removeEventListener("pointercancel", end);
+                cover.remove();
+                keepDock();
+            };
+            cover.addEventListener("pointermove", move);
+            cover.addEventListener("pointerup", end);
+            cover.addEventListener("pointercancel", end);
+            cover.setPointerCapture(e.pointerId);
+        });
+    });
+    function openMenu() {
+        closeMenu();
+        const r = q("[data-scale]").getBoundingClientRect();
+        const item = (icon, label, hint, on, act) => `<button type="button" role="menuitem" data-act="${act}" class="pv-item"><span style="width:16px;display:inline-flex;justify-content:center">${on ? svg(ICON.check, 14, 2) : ""}</span><span style="display:inline-flex;color:#525252">${icon}</span><span style="flex:1">${label}</span><span style="font-size:12px;color:#737373">${hint}</span></button>`;
+        const head = (t) => `<div style="padding:8px 10px 4px;font-size:11px;color:#737373">${t}</div>`;
+        const sep = '<div style="height:1px;background:#e5e5e5;margin:6px 4px"></div>';
+        const one = (s) => item(svg(s[3], 16), s[1], s[2], modeOf(pages[at]) === s[0], s[0]);
+        menu = document.createElement("div");
+        menu.className = "pv-pop";
+        menu.setAttribute("role", "menu");
+        menu.style.cssText = `top:${r.bottom + 6}px;left:${Math.max(8, Math.min(innerWidth - 288, r.right - 280))}px;width:280px;padding:6px;`;
+        menu.innerHTML = head("Recommended") + one(SCALES[0]) + one(SCALES[1]) + sep + head("Device") + SCALES.slice(2, 5).map(one).join("") + sep + head("Other scaling options") + SCALES.slice(5).map(one).join("") + sep + item(svg(ICON.hide, 16), "Hide UI", "&#8984;\\", false, "hideui");
+        box.appendChild(menu);
+        menu.addEventListener("click", (e) => {
+            const b = e.target.closest("[data-act]");
+            if (!b) return;
+            b.dataset.act === "hideui" ? setUi(true) : setScale(b.dataset.act);
+        });
+    }
+
+    function key(k) {
+        if (k === "Escape") return menu ? closeMenu() : o.onClose && o.onClose();
+        if (k === "ArrowRight") return show(at + 1);
+        if (k === "ArrowLeft") return show(at - 1);
+        if (k === "responsive") return setScale("responsive");
+        if (k === "hideui") return setUi(!uiHidden);
+    }
+    const onMessage = (e) => {
+        if (e.source !== frame.contentWindow || !e.data || e.data.wcPresent !== box.dataset.id) return;
+        key(e.data.key);
+    };
+    const onKey = (e) => {
+        const typing = /^(input|textarea|select)$/i.test(e.target.tagName || "") || e.target.isContentEditable;
+        const mod = e.metaKey || e.ctrlKey;
+        let k = "";
+        if (e.key === "Escape" || e.key === "ArrowRight" || e.key === "ArrowLeft") k = typing && e.key !== "Escape" ? "" : e.key;
+        else if (mod && e.key === "\\") k = "hideui";
+        else if (!mod && !e.altKey && !typing && /^[zZ]$/.test(e.key)) k = "responsive";
+        if (k) { e.preventDefault(); e.stopImmediatePropagation(); key(k); return; }
+        if (!mod && !typing) e.stopImmediatePropagation(); // the editor's own shortcuts stay off
+    };
+    const onResize = () => { layout(); place(parseFloat(dock.style.right), parseFloat(dock.style.top)); };
+    const onDown = (e) => { if (menu && !menu.contains(e.target) && !q("[data-scale]").contains(e.target)) closeMenu(); };
+
+    q("[data-prev]").onclick = () => show(at - 1);
+    q("[data-next]").onclick = () => show(at + 1);
+    q("[data-scale]").onclick = () => (menu ? closeMenu() : openMenu());
+    if (o.onClose) q("[data-close]").onclick = () => o.onClose();
+    if (o.share) q("[data-share]").onclick = (e) => { closeScale(); o.share.open(e.currentTarget, box); };
+    // with the UI hidden, the bar comes back while the pointer is at the top edge
+    q("[data-hot]").addEventListener("mouseenter", () => { if (uiHidden) { dock.style.opacity = "1"; dock.style.pointerEvents = "auto"; } });
+    dock.addEventListener("mouseleave", () => { if (uiHidden && !menu) { dock.style.opacity = "0"; dock.style.pointerEvents = "none"; } });
+    box.addEventListener("wheel", (e) => { if (e.ctrlKey || e.metaKey) e.preventDefault(); }, { passive: false });
+    box.addEventListener("pointerdown", onDown, true);
+    window.addEventListener("message", onMessage);
+    window.addEventListener("keydown", onKey, true);
+    window.addEventListener("resize", onResize);
+
+    q("[data-min]").onclick = () => setMin(true);
+    q("[data-expand]").onclick = () => setMin(false);
+    place(saved.right ?? 12, saved.top ?? 12);
+    if (minimized) setMin(true);
+    show(at);
+
+    return {
+        root: box,
+        go: (i) => show(i),
+        destroy() {
+            closeMenu();
+            window.removeEventListener("message", onMessage);
+            window.removeEventListener("keydown", onKey, true);
+            window.removeEventListener("resize", onResize);
+            box.remove();
+        },
+    };
+}

package/design/prop-sections.js

@@ -0,0 +1,18 @@
+// One CSS property as a row of the Properties panel, for the settings that have no field of their own (cursor, object fit,
+// text decoration...). It is drawn like every other field: the label inside, a blue edge when a Tailwind class gives the value
+// and amber when CSS does (the tooltip names the class or rule), faint when it is a default. Beside it, as for every style in
+// the panel: − takes a set value off; − (onCancel) also closes a row that was just added and has no value yet.
+// It edits the property where it comes from, through `actions`: setProp(prop, value) · resetProp(prop)
+import { html } from "../vendor/preact-htm.js";
+import { I, IconBtn, PropField, PropSelect, owns, has } from "./figma-sections.js";
+
+/** `c`: { p: the CSS property, l: its label, t: "select" with `o` (its values) or "text" }. */
+export function PropRow({ s, c, actions, onCancel }) {
+    return html`<div class="frow">${c.t === "select"
+        ? html`<${PropSelect} s=${s} actions=${actions} p=${c.p} label=${c.l} options=${c.o.map((o) => [o, o])} />`
+        : html`<${PropField} s=${s} actions=${actions} p=${c.p} label=${c.l} list=${c.list} />`}
+        ${owns(s, c.p) ? html`<${IconBtn} icon=${I.minus} title=${`Remove ${c.l.toLowerCase()}`} onClick=${() => { actions.resetProp(c.p); if (onCancel) onCancel(); }} />`
+            // given by the design's own CSS rule: it can't be taken off, so it is switched off with the property's initial value
+            : has(s, c.p) ? html`<${IconBtn} icon=${I.minus} title=${`Remove ${c.l.toLowerCase()} (overrides the design's CSS)`} onClick=${() => { actions.setProp(c.p, "initial"); if (onCancel) onCancel(); }} />`
+            : onCancel ? html`<${IconBtn} icon=${I.minus} title="Remove" onClick=${onCancel} />` : null}</div>`;
+}