windcraft-editor 0.0.0-stage → 0.1.0

package/design/editor/inspector.js

@@ -0,0 +1,461 @@
+import { panelStore, togglePalette, toggleSection } from "../panel-state.js";
+import { BREAKPOINT_WIDTH, setGroup, getGroup, GROUPS, parseToken } from "@windcraft/core/class-groups.js";
+import { renderPanel } from "../panel.js";
+import { inspectorView, variant, val, srcOf, modeFor } from "../panel-model.js";
+import { checkTags } from "../code-view.js";
+import { groupOf, variantOf, twShown, hasScale, twValue, fromPx, tokenFor } from "@windcraft/core/prop-tailwind.js";
+import { normalizeValue } from "../css-props.js";
+import { host } from "../host.js";
+import { $, S, data, model, send } from "./base.js";
+import { clampSize, docs, queueBoardSave, rememberCustom, renameFrame, setFrameSize, setPageGroup } from "./designs.js";
+import { curWidth, fitTo, heightOfDoc, layout, positions, widthOf } from "./plane.js";
+import { draftPage } from "./add-menu.js";
+import { cmd } from "./frame-messages.js";
+import { setPanel } from "./color-ui.js";
+import { elementRange } from "./code-panel.js";
+import { loadFrame } from "./docs.js";
+
+// ── Inspector (the panel is components: see panel.js; what it shows, panel-model.js; its state, panel-state.js) ──
+export const insp = $("inspector");
+
+/** The selected page's own properties, for the panel. */
+function pageInfo() {
+    const d = docs.get(S.curKey), p = positions()[S.curKey] || { x: 0, y: 0 };
+    return { name: data.title || "", group: data.group || "", w: widthOf(d), h: heightOfDoc(d), auto: !(d.board && d.board.h), empty: model.markup.trim() === "", x: Math.round(p.x), y: Math.round(p.y), version: data.version, isNew: S.isNew, project: data.project && data.project.name };
+}
+/** A page panel field (name, size, position) typed by the user: applied if it makes sense, otherwise the panel shows the old value again. */
+function setPageField(key, text) {
+    const v = text.trim();
+    if (key === "group") return setPageGroup(S.curKey, v);
+    if (key === "name") {
+        const prev = data.title;
+        if (v && v !== prev) renameFrame(S.curKey, v, prev); else renderInspector();
+        return;
+    }
+    if (key === "h" && v === "") {
+        const d = docs.get(S.curKey), b = { ...(d.board || {}) };
+        delete b.h;
+        d.board = { x: positions()[S.curKey].x, y: positions()[S.curKey].y, ...b };
+        queueBoardSave(S.curKey);
+        layout();
+        return renderInspector();
+    }
+    const n = Number(v);
+    if (v === "" || !Number.isFinite(n)) return renderInspector();
+    setPageBox({ [key]: key === "w" ? clampSize(n, 8000) : key === "h" ? clampSize(n, 20000) : Math.round(n) });
+    renderInspector();
+}
+function setPageBox(patch) {
+    const d = docs.get(S.curKey), p = positions()[S.curKey];
+    d.board = { x: p.x, y: p.y, ...(d.board || {}), ...patch };
+    rememberCustom(d);
+    queueBoardSave(S.curKey);
+    layout();
+}
+/** What the panel's components ask of the editor (panel.js). */
+const panelActions = {
+    applyElement: applyElementCode,
+    get canAI() { return typeof host.generate === "function"; }, // an app with no AI behind it gets no AI box and no AI tab
+    askAI: (path, outer, prompt) => askAI(path, outer, prompt),
+    draftPage: (prompt) => draftPage(prompt),
+    setPageField,
+    setDevice: (w) => setDevice(w),
+    fit: () => { S.viewTouched = true; fitTo([S.curKey]); },
+    details: () => $("detailsBtn").click(),
+    // the top of the Design tab (design-tab.js)
+    select: (path) => send({ cmd: "select", path }),
+    move: (dir) => { if (S.selected) cmd({ cmd: "move", path: S.selected.path, dir }); },
+    duplicate: () => { if (S.selected) cmd({ cmd: "duplicate", path: S.selected.path }); },
+    remove: () => { if (S.selected) cmd({ cmd: "remove", path: S.selected.path }); },
+    setTag: (tag) => { if (S.selected) cmd({ cmd: "setTag", path: S.selected.path, tag }); },
+    setTab: (tab) => panelStore.set({ tab }),
+    closePanel: () => setPanel(false),
+    // a breakpoint picked: the frame goes to its width, so what is edited is what is seen; All sizes leaves the frame as it is
+    setBreakpoint: (bp) => { panelStore.set({ bp, all: bp === "" }); if (bp) setDevice(BREAKPOINT_WIDTH[bp]); },
+    // the state picked: classes are written for it, and the selected element shows it on the canvas (its hover look...)
+    setState: (st) => { panelStore.set({ st }); send({ cmd: "previewState", state: st }); },
+    setText: (text) => { if (S.selected) cmd({ cmd: "setText", path: S.selected.path, text }, "text"); },
+    // position and layout (figma-sections.js)
+    setRotation: (deg) => setRotation(deg),
+    setGeom: (key, text) => {
+        if (!S.selected) return;
+        const n = Number(text);
+        if (text.trim() === "" || !Number.isFinite(n)) return renderInspector(); // not a number: show the old value again
+        const prop = { w: "width", h: "height", x: "left", y: "top" }[key];
+        if (prop) setProp(prop, `${Math.round(prop === "width" || prop === "height" ? Math.max(1, n) : n)}px`);
+        else cmd({ cmd: "setGeom", path: S.selected.path, [key]: n });
+    },
+    setProps: (props, value, group, clear) => { if (S.selected) setProps(props, value, group, clear); },
+    freePosition: (on) => { if (S.selected) cmd({ cmd: "freePosition", path: S.selected.path, on }); },
+    align: (mode) => send({ cmd: "align", mode }),
+    group: () => { if (S.selected) send({ cmd: "group" }); },
+    ungroup: () => { if (S.selected) send({ cmd: "ungroup" }); },
+    autoLayout: () => { if (S.selected) send({ cmd: "autoLayout" }); },
+    sizeItMyself: () => { if (S.selected) sizeItMyself(); },
+    // the class-group controls (group-controls.js): the Tailwind extras
+    applyValue: (key, value) => { if (S.selected) applyValue(key, value); },
+    applyColor: (key, name, op, undoKey) => { if (S.selected) applyColor(key, name, op, undoKey); },
+    togglePalette,
+    customColor: (key, hex, done, input) => {
+        if (!S.selected) return;
+        applyColor(key, hex, undefined, liveKey(`c-${key}`));
+        if (done) pickerClosed(input);
+    },
+    redraw: () => renderInspector(),
+    // the property sections (prop-sections.js)
+    setProp: (prop, value, css, key) => { if (S.selected) setProp(prop, value, css, key); }, // css: what to write when it goes to CSS (fit -> fit-content)
+    setPropLive: (prop, hex) => { if (S.selected) setProp(prop, hex, undefined, liveKey(`p-${prop}`)); },
+    setPropDone: (prop, hex, input) => { if (S.selected) setProp(prop, hex, undefined, liveKey(`p-${prop}`)); pickerClosed(input); },
+    // one colour on several properties at once (a stroke's four sides), dragged in the picker as one undo step
+    setPropsLive: (props, hex, group) => { if (S.selected) setProps(props, hex, group, [], undefined, liveKey(`ps-${group}`)); },
+    setPropsDone: (props, hex, group, input) => { if (S.selected) setProps(props, hex, group, [], undefined, liveKey(`ps-${group}`)); pickerClosed(input); },
+    resetProp: (prop) => { if (S.selected) setProp(prop, ""); },
+    arrange: (kind) => { if (S.selected) arrange(kind); },
+    toggleSection,
+    setAttr: (name, value) => { if (S.selected) cmd({ cmd: "setAttr", path: S.selected.path, name, value: value === "" ? null : value }, `attr-${name}`); },
+    // the classes, inline CSS and attributes below the element's code (classes-section.js)
+    addClasses: (text) => {
+        if (!S.selected) return;
+        const add = text.split(/\s+/).filter(Boolean);
+        if (!add.length) return;
+        const cur = S.selected.classes.split(/\s+/).filter(Boolean);
+        setClassString([...cur, ...add.filter((c) => !cur.includes(c))].join(" "));
+    },
+    setClassesText: (text) => { if (S.selected) { S.selected.classes = text.trim(); cmd({ cmd: "setClasses", path: S.selected.path, value: S.selected.classes }, "classes"); } },
+    setStyle: (css) => { if (S.selected) cmd({ cmd: "setAttr", path: S.selected.path, name: "style", value: css }); },
+    setAttribute: (name, value) => { if (S.selected) cmd({ cmd: "setAttr", path: S.selected.path, name, value }); },
+};
+/**
+ * The page panel's styling sections edit the page's body. They use the same actions as an element's sections, run with the body
+ * standing in as the selection for that one call, so every property works the same way on the page (classes or CSS, at its source).
+ */
+const bodyActions = Object.fromEntries(Object.entries(panelActions).map(([k, f]) => [k, typeof f !== "function" ? f : (...a) => {
+    if (S.selected || !S.pageBody) return undefined;
+    S.selected = S.pageBody;
+    try { return f(...a); } finally { S.selected = null; }
+}]));
+/** Draws the panel. Every part is a component that keeps its own typed text, so it can be redrawn at any time, whatever has focus. */
+export function renderInspector() {
+    const ui = { ...panelStore.get(), frameW: curWidth() }; // the panel's state, and the frame's width (for the Screen chips)
+    const sel = S.selected && S.selected === S.pageBody ? null : S.selected; // drawn while a body action runs: still the page
+    const elementCode = sel && ui.tab === "classes" ? sourceOf(sel.path) : null;
+    const top = insp.scrollTop;
+    const view = inspectorView(sel, sel ? null : pageInfo(), elementCode);
+    if (view.page && S.pageBody) view.pageBody = { s: S.pageBody, actions: bodyActions };
+    renderPanel(insp, view, panelActions, ui);
+    insp.scrollTop = top;
+}
+// a change to the panel's own state (its tab, the breakpoint, an open section...) redraws it, once however many changed
+let panelDrawQueued = false;
+
+// ── The Code tab's element code (panel.js): the element's source, editable in place ──
+/** The element at `path` as written in the design: its code with its lines' common indentation taken off, and that indentation. */
+function sourceOf(path) {
+    if (!path || !path.length) return null;
+    const r = elementRange(model.markup, path);
+    if (!r) return null;
+    const lines = model.markup.slice(r.start, r.end).split("\n");
+    const indents = lines.slice(1).filter((l) => l.trim()).map((l) => l.match(/^[ \t]*/)[0]);
+    const indent = indents.length ? indents.reduce((a, b) => { let i = 0; while (i < a.length && a[i] === b[i]) i++; return a.slice(0, i); }) : "";
+    return { source: [lines[0], ...lines.slice(1).map((l) => (l.startsWith(indent) ? l.slice(indent.length) : l))].join("\n"), indent };
+}
+/**
+ * Puts the code typed for the element at `path` in its place (one undo step), if it is exactly one element with matching
+ * tags, and that element is still the one the code came from (`original`). Returns { ok, message }.
+ */
+function applyElementCode(path, code, indent, original) {
+    const v = code.trim();
+    if (v === original.trim()) return { ok: true };
+    const now = sourceOf(path);
+    if (!now || now.source !== original) return { ok: false, message: "That element changed since, so what you typed was not applied." };
+    const bad = checkTags(v);
+    if (bad) return { ok: false, message: `Not applied. Line ${bad.line}: ${bad.message}` };
+    const tpl = document.createElement("template");
+    tpl.innerHTML = v;
+    const nodes = [...tpl.content.childNodes].filter((n) => n.nodeType === 1 || (n.nodeType === 3 && n.textContent.trim()));
+    if (nodes.length !== 1 || nodes[0].nodeType !== 1) return { ok: false, message: "Not applied: the code must be exactly one element (wrap several in one)." };
+    cmd({ cmd: "replaceOuter", path, html: v.split("\n").map((l, i) => (i && l ? indent + l : l)).join("\n") });
+    return { ok: true };
+}
+
+function applyValue(key, value, undoKey = "") {
+    if (!S.selected) return;
+    const next = setGroup(S.selected.classes, key, value, variant());
+    if (next === null) return renderInspector();
+    if (next === S.selected.classes) return; // nothing to change (a class it doesn't have, taken off): no empty undo step
+    S.selected.classes = next;
+    if (onAll([key], next, variant(), undoKey)) return;
+    cmd({ cmd: "setClasses", path: S.selected.path, value: next }, undoKey);
+}
+
+function applyColor(key, name, op, undoKey = "") {
+    const o = op === undefined ? (val(S.selected, key).match(/\/(\d+)$/) || [])[1] || "" : op;
+    const base = /^(#|rgb|hsl)/.test(name) ? `[${name.replace(/\s+/g, "_")}]` : name;
+    applyValue(key, base ? base + (o && o !== "100" ? `/${o}` : "") : "", undoKey);
+}
+
+// ── Colour pickers apply as they are dragged ─────────────────────────────────
+// Every pick, from opening a picker to closing it, is one undo step: a "live:" key (merged by commit without the time limit)
+// that moves on once the picker closes. The picker field is blurred then, so the bar and panel show the final value.
+let liveSession = 0;
+export const liveKey = (field) => `live:${field}:${liveSession}`;
+export const pickerClosed = (t) => { liveSession++; t.blur(); };
+
+// ── Which breakpoint and state a class gets ──────────────────────────────────
+// Only the ones picked in the panel (the Screen and State chips): with none picked, an edit changes the class that gives the
+// value where it is (md:p-6 stays md:), and anything new is a plain class for every size, as a frontend developer writes it.
+/** The variant picked in the panel ("md:hover:"), or "" for none. */
+const picked = () => (panelStore.get().bp || panelStore.get().st ? variant() : "");
+function newVariant() { return picked(); }
+/**
+ * A multiple selection: the same class change goes to every element selected, in one undo step. `groups` are the class groups the
+ * edit touched and `next` the primary element's classes after it (where the new class is read from). True when it handled the edit.
+ */
+function onAll(groups, next, vp, key) {
+    const s = S.selected;
+    if (!s || !s.others || !s.others.length || next === null) return false;
+    const ops = groups.filter((g) => GROUPS[g]).map((g) => { const r = getGroup(next, g, vp); return { re: GROUPS[g].re.source, token: r ? parseToken(r.token).base : "" }; });
+    cmd({ cmd: "groupOn", paths: [s.path, ...s.others], ops, vp, key }, key);
+    return true;
+}
+/** The same edit written with an arbitrary value (rounded-[8px]), for when the design's theme gives the scale class another size. */
+function altFor(classes, group, css, vp, clear = []) {
+    const m = /^(-?\d*\.?\d+)px$/.exec(css || "");
+    if (!m || !GROUPS[group]) return null;
+    const tv = `[${Number(m[1])}px]`, built = GROUPS[group].build(tv);
+    if (!GROUPS[group].re.test(built)) return null;
+    let c = classes;
+    for (const k of clear) { const n = setGroup(c, k, "", vp); if (n !== null) c = n; }
+    const next = setGroup(c, group, tv, vp);
+    return next === null ? null : { classes: everySize(next, group), token: vp + built };
+}
+/** "All" clicked on purpose: edits are plain classes for every size, not the md:/xl: class that gives the value at this width. */
+const allPlain = () => Boolean(panelStore.get().all) && !picked();
+/** One value for every size: the breakpoint classes of the group (sm:opacity-50, md:p-6) come off, so the plain one is what shows at every width. States (hover:) stay. */
+const everySize = (classes, group) => (!allPlain() || classes === null ? classes : classes.split(/\s+/).filter((t) => {
+    const v = parseToken(t).variant.split(":").filter(Boolean);
+    return !(v.length && v.every((x) => BREAKPOINT_WIDTH[x] !== undefined) && GROUPS[group].re.test(parseToken(t).base));
+}).join(" "));
+
+/**
+ * A property edited in the panel is written where its value comes from: a Tailwind class is replaced (at the same md: / hover:
+ * variant), an inline style or the design's own CSS gets an inline style. A property nothing sets yet becomes a Tailwind class,
+ * unless the element is styled only by its design's CSS. The frame checks the result and falls back to CSS when a class can't win.
+ */
+/**
+ * The outline shorthand ("2px solid blue-500", "3px dashed #f00", "none") as the classes that make it on a Tailwind element:
+ * outline (style), outline-2 (width), outline-blue-500 (colour). Returns false when the value is not one it can read.
+ */
+function setOutline(v, key) {
+    const s = S.selected, vp = picked();
+    let classes = s.classes;
+    const put = (g, tv) => { const n = setGroup(classes, g, tv, vp); if (n !== null) classes = n; };
+    if (v === "" || v === "none") { ["outlineStyle", "outlineW", "outlineColor"].forEach((g) => put(g, "")); }
+    else {
+        let width = null, style = "solid", color = null;
+        for (const t of v.replace(/\s*,\s*/g, ",").match(/(?:rgba?|hsla?)\([^)]*\)|\S+/g) || []) {
+            if (/^\d*\.?\d+(px)?$/.test(t)) width = parseFloat(t);
+            else if (/^(solid|dashed|dotted|double)$/.test(t)) style = t;
+            else color = t;
+        }
+        if (width === null && !color && style === "solid" && !/solid/.test(v)) return false;
+        const wv = width === null ? "2" : [0, 1, 2, 4, 8].includes(width) ? String(width) : `[${width}px]`;
+        put("outlineStyle", style === "solid" ? "outline" : `outline-${style}`);
+        put("outlineW", wv);
+        if (color) put("outlineColor", /^(#|rgb|hsl)/.test(color) ? color : color);
+    }
+    if (classes === s.classes) return true;
+    s.classes = classes;
+    cmd({ cmd: "setClasses", path: s.path, value: classes }, key);
+    return true;
+}
+
+export function setProp(prop, raw, cssOverride, key) {
+    if (!S.selected) return;
+    if (prop === "outline" && modeFor(S.selected) === "tailwind" && setOutline(String(raw ?? "").trim(), key)) return;
+    const s = S.selected, src = srcOf(s, prop), v = String(raw ?? "").trim();
+    const group = groupOf(prop);
+    const onTw = src.source === "tailwind";
+    const winning = onTw ? variantOf(src.token) : "";
+    // a breakpoint or state picked in the panel is where the edit goes; else the md:/xl: class that gives the value, where it is
+    const vp = picked() || (allPlain() ? "" : winning);
+    const send = (m) => cmd({ cmd: "setProp", path: s.path, prop, key, ...m }, key);
+    if (v === "") {
+        // the exact class that gives the value comes off (px-4 for padding-left), at the picked breakpoint / state if one is picked
+        let tok = picked() || allPlain() ? tokenFor(s.classes, prop, vp) : onTw ? { token: src.token } : null;
+        if (!tok || !tok.token) tok = tokenFor(s.classes, prop, vp); // a property whose source isn't found by its name (rotate) still has its class
+        if (tok && tok.token) { const next = s.classes.split(/\s+/).filter((t) => t && t !== tok.token).join(" "); s.classes = next; if (group && onAll([group], next, vp, key)) return; return send({ route: "tw", classes: next }); }
+        if (src.source === "inline") return send({ route: "css", css: null });
+        return renderInspector();
+    }
+    // "500" means 500px, except on a row showing a Tailwind value (64 from w-64), where a bare number is Tailwind's scale
+    const scale = onTw && twShown(prop, src.token) !== null && hasScale(group);
+    const candidate = scale && /^-?\d*\.?\d+$/.test(v) ? v : normalizeValue(prop, v);
+    const css = cssOverride !== undefined ? cssOverride : CSS.supports(prop, candidate) ? candidate : null;
+    const tv = group ? twValue(prop, v, scale) : null;
+    let token = null;
+    if (tv !== null) { const built = GROUPS[group].build(tv); if (GROUPS[group].re.test(built)) token = built; }
+    // a md: or hover: value can only be a class (a style attribute has no breakpoints or states)
+    const toTw = Boolean(picked()) || onTw || src.source === "tie" || (src.source !== "inline" && src.source !== "design" && modeFor(s) === "tailwind");
+    if (toTw && token) {
+        const next = everySize(setGroup(s.classes, group, tv, vp), group);
+        const alt = /\[/.test(token) ? null : altFor(s.classes, group, css, vp);
+        // kept here at once, so an edit sent right after this one (a line style, then a width) builds on it
+        if (next !== null) { s.classes = next; if (onAll([group], next, vp, key)) return; return send({ route: "tw", classes: next, token: vp + token, css, alt }); }
+    }
+    if (css === null && !token) return renderInspector(); // neither valid CSS nor a Tailwind value: put the old value back
+    send({ route: "css", css, token }); // a Tailwind value on a CSS row (red-500): the frame measures what it means
+}
+
+/**
+ * One value for several properties at once (all four paddings, the two sides of padding-h, every border width or corner), written
+ * like setProp: as the `group` class when they are Tailwind's or unset on a Tailwind element (clearing the per-side classes in
+ * `clear`, which would otherwise win), and as inline CSS on every one of them when any comes from CSS.
+ */
+export function setProps(props, raw, group, clear = [], cssOverride, key) {
+    if (!S.selected) return;
+    const s = S.selected, srcs = props.map((p) => srcOf(s, p));
+    const v = String(raw ?? "").trim();
+    const px = /^-?\d*\.?\d+(px)?$/.test(v);
+    const n = parseFloat(v);
+    const css = cssOverride !== undefined ? cssOverride : px ? `${n}px` : CSS.supports(props[0], v) ? v : null;
+    const own = srcs.find((x) => x.source === "tailwind");
+    const vp = picked() || (allPlain() ? "" : (own && variantOf(own.token)) || "");
+    const fromCss = srcs.some((x) => x.source === "inline" || x.source === "design");
+    const tv = group ? (px ? fromPx(group, n) : twValue(props[0], v, false) ?? v) : null;
+    let token = null;
+    if (tv !== null) { const built = GROUPS[group].build(tv); if (GROUPS[group].re.test(built)) token = built; }
+    if ((!fromCss || picked()) && token && (own || picked() || modeFor(s) === "tailwind")) {
+        let classes = s.classes;
+        for (const k of clear) { const next = setGroup(classes, k, "", vp); if (next !== null) classes = next; }
+        const next = everySize(setGroup(classes, group, tv, vp), group);
+        const alt = /\[/.test(token) ? null : altFor(s.classes, group, css, vp, clear);
+        if (next !== null) { s.classes = next; if (onAll([...clear, group], next, vp, key)) return; return cmd({ cmd: "setProp", path: s.path, props, route: "tw", classes: next, token: vp + token, css, alt, key }, key); }
+    }
+    cmd({ cmd: "setProp", path: s.path, props, route: "css", css, token, key }, key);
+}
+
+/**
+ * A drag, resize or new shape has ended and its pixels are inline. Each value becomes a Tailwind class (at its own md: / hover:
+ * variant if a class set it before) when the element is Tailwind's: made here, or the value came from a class, or nothing set it
+ * on an element that uses Tailwind. A value that came from CSS stays CSS, and so does everything on an element styled only by its
+ * design's CSS. The frame puts the classes on, checks them and saves the result as one undo step (agent.js applyGesture).
+ */
+export function convertGesture(items) {
+    const blocked = items.find((it) => it.blocked);
+    if (blocked) flashHint(`This element's ${blocked.blocked} is set by its flex layout. Use "Size it myself" in the panel to size it by hand.`);
+    send({ cmd: "applyGesture", items: items.map((it) => {
+        const tw = it.made || modeFor({ classes: it.classes }) === "tailwind";
+        let classes = it.classes;
+        const tokens = {};
+        Object.entries(it.values).forEach(([prop, value]) => {
+            const pre = it.pre[prop] || { source: "default" };
+            if (!it.made && (pre.source === "inline" || pre.source === "design")) return; // it was CSS: it stays CSS
+            if (!tw && pre.source !== "tailwind") return;
+            const group = groupOf(prop);
+            if (!group) return;
+            const tv = /^-?[\d.]+px$/.test(value) ? fromPx(group, Math.round(parseFloat(value))) : twValue(prop, value, false); // a size, or a word (flex, column, absolute)
+            if (tv === null) return;
+            const built = GROUPS[group].build(tv);
+            if (!GROUPS[group].re.test(built)) return;
+            // judged on the classes from before this gesture: a left-[..] written a moment ago must not make top an xl: class
+            const vp = (pre.source === "tailwind" && variantOf(pre.token)) || newVariant();
+            const next = setGroup(classes, group, tv, vp);
+            if (next === null) return;
+            classes = next;
+            tokens[prop] = vp + built;
+        });
+        // class groups the element's old place gave it (margins, alignment) come off
+        let cleared = false;
+        if (tw || it.made) (it.clear || []).forEach((group) => { const next = setGroup(classes, group, "", ""); if (next !== null && next !== classes) { classes = next; cleared = true; } });
+        return { path: it.path, classes, tokens, cleared };
+    }) });
+}
+
+/** A flex child that grows to fill its row: stop flex from sizing it (flex-none, or flex: none in CSS), so a width or height set on it applies. */
+function sizeItMyself() {
+    if (!S.selected) return;
+    if (modeFor(S.selected) !== "tailwind") return cmd({ cmd: "setStyleProps", path: S.selected.path, props: { flex: "none" } });
+    let classes = setGroup(S.selected.classes, "grow", "", variant()) ?? S.selected.classes;
+    classes = setGroup(classes, "flexNum", "flex-none", variant()) ?? classes;
+    setClassString(classes);
+}
+/** A short note in the hint under the canvas, back to the usual text after a few seconds. */
+let hintTimer = 0;
+function flashHint(text) {
+    const h = $("canvasHint");
+    clearTimeout(hintTimer);
+    h.textContent = text;
+    hintTimer = setTimeout(() => { h.textContent = S.mode === "edit" ? "Click to select. Double-click text to edit it. Alt-drag to place freely. Scroll to pan, Ctrl/Cmd + scroll to zoom." : h.textContent; }, 4000);
+}
+
+/**
+ * Row / Column / Grid for a box whose children are stacked in the flow, in one undo step: Tailwind classes (flex, flex-col,
+ * grid grid-cols-N, gap-*) unless its display comes from CSS or it is a CSS-only element, then the same as inline CSS. The gap
+ * keeps the children's current spacing (agent.js arrangeOf).
+ */
+function arrange(kind) {
+    const a = S.selected && S.selected.arrange;
+    if (!a) return;
+    const gap = kind === "row" ? a.rowGap : a.colGap;
+    const cols = Math.min(a.count, 3);
+    const src = srcOf(S.selected, "display").source;
+    if (src === "inline" || src === "design" || modeFor(S.selected) !== "tailwind") {
+        return cmd({ cmd: "setStyleProps", path: S.selected.path, props: {
+            display: kind === "grid" ? "grid" : "flex",
+            "flex-direction": kind === "col" ? "column" : null,
+            "grid-template-columns": kind === "grid" ? `repeat(${cols}, minmax(0, 1fr))` : null,
+            gap: kind === "grid" ? `${a.colGap}px ${a.rowGap}px` : `${gap}px`, // row-gap column-gap
+        } });
+    }
+    let c = S.selected.classes;
+    const set = (k, v) => { const next = setGroup(c, k, v, ""); if (next !== null) c = next; };
+    set("display", kind === "grid" ? "grid" : "flex");
+    set("flexDir", kind === "col" ? "flex-col" : "");
+    set("gridCols", kind === "grid" ? String(cols) : "");
+    // a grid's columns get the spacing as gap-x; down the columns the children's own margins still space them (gap-y)
+    if (kind === "grid") { set("gap", ""); set("gapX", a.rowGap ? fromPx("gapX", a.rowGap) : ""); set("gapY", a.colGap ? fromPx("gapY", a.colGap) : ""); } else set("gap", gap ? fromPx("gap", gap) : "");
+    setClassString(c);
+}
+
+/** The turn of the selected element, in degrees: a class (rotate-45, rotate-[15deg]) where it is Tailwind's, a rotate style otherwise; 0 takes it off. */
+export function setRotation(deg) {
+    if (!S.selected) return;
+    const n = Math.round(Number(deg) * 10) / 10;
+    if (!Number.isFinite(n)) return renderInspector();
+    setProp("rotate", n % 360 === 0 ? "" : `${n}deg`);
+}
+
+export function setDevice(w) {
+    // a preset is a whole size: its width, with the height following the content (a hand-set height belongs to Custom)
+    setFrameSize({ w, h: null });
+    if (S.mode === "preview") loadFrame();
+}
+
+const setClassString = (next) => { S.selected.classes = next; cmd({ cmd: "setClasses", path: S.selected.path, value: next }); };
+
+// ── Ask AI about the selected element (the AI tab) ───────────────────────────
+/** Changes the element at `path` (whose code is `outer`) as asked. Returns { ok, message? } for the AI tab to show. */
+async function askAI(path, outer, prompt) {
+    try {
+        const html = await host.generate({
+            prompt: `${prompt}\n\nReturn ONLY the full modified HTML of this single element, keeping the same root tag. No explanation and no code fences.`,
+            currentHtml: outer,
+            useLibrary: false,
+        });
+        if (!html.startsWith("<")) throw new Error("The AI didn't return HTML. Try rephrasing.");
+        cmd({ cmd: "replaceOuter", path, html });
+        return { ok: true };
+    } catch (err) {
+        return { ok: false, message: err.message };
+    }
+}
+
+/** Registers this part's listeners and does its first draw (called once, in order, by editor.js). */
+export function init() {
+    panelStore.subscribe(() => {
+        if (panelDrawQueued) return;
+        panelDrawQueued = true;
+        queueMicrotask(() => { panelDrawQueued = false; renderInspector(); });
+    });
+}

package/design/editor/layers.js

@@ -0,0 +1,61 @@
+import { $, S, collapsed, esc } from "./base.js";
+
+// ── Layers ───────────────────────────────────────────────────────────────────
+export const pathKey = (p) => (p || []).join(".");
+// A small page icon: the Pages section and the page rows use it instead of repeating the word "page"
+export const PAGE_ICON = '<svg class="shrink-0 text-neutral-500" width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linejoin="round"><rect x="3" y="2" width="10" height="12" rx="1.5"/></svg>';
+// Figma-style chevron: points right when closed, down when open
+const chevron = (open) => `<svg width="12" height="12" viewBox="0 0 12 12" fill="none" stroke="currentColor" stroke-width="1.6" stroke-linecap="round" stroke-linejoin="round" style="${open ? "transform:rotate(90deg);" : ""}"><path d="M4.5 2.5 8 6 4.5 9.5"/></svg>`;
+
+// the eye and the lock of a row: faint until the row is pointed at, solid while on (hidden or locked)
+const EYE = '<svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="M1.5 8S4 3.5 8 3.5 14.5 8 14.5 8 12 12.5 8 12.5 1.5 8 1.5 8z"/><circle cx="8" cy="8" r="2"/></svg>';
+const EYE_OFF = '<svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><path d="M2 2l12 12M6.6 3.8A6 6 0 018 3.5c4 0 6.5 4.5 6.5 4.5a10 10 0 01-2 2.4M4.2 5.2A10 10 0 001.5 8S4 12.5 8 12.5a6 6 0 002.6-.6"/></svg>';
+const LOCK = '<svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="7" width="9" height="6.5" rx="1.2"/><path d="M5.5 7V5a2.5 2.5 0 015 0v2"/></svg>';
+const UNLOCK = '<svg width="13" height="13" viewBox="0 0 16 16" fill="none" stroke="currentColor" stroke-width="1.4" stroke-linecap="round" stroke-linejoin="round"><rect x="3.5" y="7" width="9" height="6.5" rx="1.2"/><path d="M5.5 7V5a2.5 2.5 0 014.8-1"/></svg>';
+
+function layerNode(n, depth) {
+    const key = pathKey(n.path);
+    const has = n.children.length > 0;
+    const isCollapsed = collapsed.has(key);
+    const isSel = S.selected && pathKey(S.selected.path) === key;
+    const acts = n.tag === "body" ? "" : `<span class="layer-acts"><span data-eye="${key}" class="layer-act ${n.hidden ? "on" : ""}" title="${n.hidden ? "Show" : "Hide"} (Ctrl/Cmd+Shift+H)">${n.hidden ? EYE_OFF : EYE}</span><span data-lock="${key}" class="layer-act ${n.locked ? "on" : ""}" title="${n.locked ? "Unlock" : "Lock"} (Ctrl/Cmd+Shift+L)">${n.locked ? LOCK : UNLOCK}</span></span>`;
+    const row = `<div class="layer-row cursor-pointer gap-1 px-1 ${isSel ? "is-selected" : ""} ${n.hidden ? "layer-hidden" : ""}" style="padding-left:${depth * 12 + 4}px" data-path="${key}" ${n.tag === "body" ? "" : 'draggable="true"'}>
+        <span data-caret="${key}" class="inline-flex h-5 w-5 shrink-0 items-center justify-center rounded text-neutral-500 hover:bg-neutral-200">${has ? chevron(!isCollapsed) : ""}</span>
+        <span class="shrink-0 font-mono text-[11px] text-neutral-500">${n.tag}</span>
+        <span class="truncate text-neutral-800">${esc(n.label)}</span>${acts}</div>`;
+    return row + (has && !isCollapsed ? n.children.map((c) => layerNode(c, depth + 1)).join("") : "");
+}
+
+let revealedKey = null;
+/** Scrolls the Layers panel to the selected row (opening its collapsed parents first). Only when the selection changed, so scrolling by hand isn't undone. */
+export function revealLayer(force) {
+    const key = S.selected ? pathKey(S.selected.path) : null;
+    if (!key && key !== "") { revealedKey = null; return; }
+    if (!force && key === revealedKey) return;
+    if (!S.leftOpen) return;
+    const pane = $("leftBody");
+    const row = $("layers").querySelector(".layer-row.is-selected");
+    if (!row) return;
+    revealedKey = key;
+    const pr = pane.getBoundingClientRect(), rr = row.getBoundingClientRect();
+    if (rr.top < pr.top + 8 || rr.bottom > pr.bottom - 8) pane.scrollTop += (rr.top + rr.height / 2) - (pr.top + pr.height / 2);
+}
+
+let expandedFor = null;
+export function renderLayers() {
+    // a new selection must be visible in the tree: open every parent of the selected element (once per selection, so you can still collapse one afterwards)
+    const selKey = S.selected ? pathKey(S.selected.path) : null;
+    if (selKey !== expandedFor) {
+        expandedFor = selKey;
+        if (S.selected && S.selected.path && S.selected.path.length) {
+            let opened = false;
+            for (let i = 0; i < S.selected.path.length; i++) { if (collapsed.delete(pathKey(S.selected.path.slice(0, i)))) opened = true; }
+            if (opened) revealedKey = null;
+        }
+    }
+    // Pages are their own section above, so Layers is just the current page's element tree.
+    $("layers").innerHTML = S.tree ? layerNode(S.tree, 0) : '<div class="px-2 py-2 text-[11px] text-neutral-500">Loading…</div>';
+    revealLayer();
+}
+
+export const parsePath = (s) => (s === "" ? [] : s.split(".").map(Number));