windcraft-editor 0.0.0-stage → 0.1.0

package/design/float-toolbar.js

@@ -0,0 +1,163 @@
+// The small toolbar that floats next to whatever is selected (text, a shape, or a whole frame).
+// It only renders markup; editor.js places it and turns its clicks into edits.
+import { rgbToHex } from "./css-props.js";
+
+const esc = (s) => String(s ?? "").replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c]));
+const icon = (d) => `<svg width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round">${d}</svg>`;
+
+const ICONS = {
+    bold: icon('<path d="M7 5h6a3.5 3.5 0 0 1 0 7H7zM7 12h7a3.5 3.5 0 0 1 0 7H7z"/>'),
+    italic: icon('<path d="M10 5h8M6 19h8M15 5 9 19"/>'),
+    underline: icon('<path d="M7 4v7a5 5 0 0 0 10 0V4M5 20h14"/>'),
+    link: icon('<path d="M10 14a4 4 0 0 0 5.7 0l3-3a4 4 0 0 0-5.7-5.7l-1 1M14 10a4 4 0 0 0-5.7 0l-3 3a4 4 0 0 0 5.7 5.7l1-1"/>'),
+    left: icon('<path d="M4 6h16M4 10h10M4 14h16M4 18h10"/>'),
+    center: icon('<path d="M4 6h16M7 10h10M4 14h16M7 18h10"/>'),
+    right: icon('<path d="M4 6h16M10 10h10M4 14h16M10 18h10"/>'),
+    justify: icon('<path d="M4 6h16M4 10h16M4 14h16M4 18h16"/>'),
+    radius: icon('<path d="M5 19v-7a7 7 0 0 1 7-7h7"/>'),
+    border: '<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><rect x="4" y="4.5" width="16" height="3.4" rx="1.2"/><rect x="4" y="10.3" width="16" height="2.4" rx="1.1"/><rect x="4" y="15.6" width="16" height="1.4" rx=".7"/></svg>',
+    spacing: icon('<rect x="3.5" y="3.5" width="17" height="17" rx="3.5" stroke-dasharray="3 2.6"/><rect x="8.5" y="8.5" width="7" height="7" rx="1.6"/>'),
+    sides: icon('<rect x="4" y="4" width="16" height="16" rx="3.5" stroke-dasharray="3.4 3"/>'),
+    corners: icon('<path d="M4 9V7a3 3 0 0 1 3-3h2M15 4h2a3 3 0 0 1 3 3v2M20 15v2a3 3 0 0 1-3 3h-2M9 20H7a3 3 0 0 1-3-3v-2"/>'),
+    none: icon('<circle cx="12" cy="12" r="8"/><path d="M6.3 6.3l11.4 11.4"/>'),
+    solid: icon('<path d="M4 12h16"/>'),
+    dashed: icon('<path d="M3 12h4M10 12h4M17 12h4"/>'),
+    dotted: icon('<path d="M4 12h.01M8 12h.01M12 12h.01M16 12h.01M20 12h.01" stroke-width="2.4"/>'),
+    more: '<svg width="16" height="16" viewBox="0 0 24 24" fill="currentColor"><circle cx="12" cy="5" r="1.7"/><circle cx="12" cy="12" r="1.7"/><circle cx="12" cy="19" r="1.7"/></svg>',
+};
+
+export const TEXT_TAGS = new Set(["h1", "h2", "h3", "h4", "h5", "h6", "p", "span", "a", "button", "label", "li", "strong", "em", "small", "blockquote", "td", "th", "figcaption"]);
+const SIZES = [10, 11, 12, 13, 14, 15, 16, 18, 20, 24, 28, 32, 36, 40, 48, 56, 64, 72, 96];
+
+const num = (v) => { const n = parseFloat(v); return Number.isFinite(n) ? Math.round(n * 10) / 10 : ""; };
+const familyOf = (css) => {
+    const first = String(css || "").split(",")[0].replace(/["']/g, "").trim().toLowerCase();
+    if (/mono|courier|consolas|menlo/.test(first)) return "mono";
+    if (/^(georgia|times|garamond|palatino|serif|ui-serif|cambria)/.test(first)) return "serif";
+    return "sans";
+};
+
+const btn = (act, svg, title, on) => `<button type="button" class="tbtn ${on ? "on" : ""}" data-ft="${act}" title="${title}">${svg}</button>`;
+const swatch = (kind, value, title) => `<label class="swatch" title="${title}" style="background:${value || "#fff"}${value ? "" : ";background-image:linear-gradient(135deg,transparent 46%,#e5484d 46%,#e5484d 54%,transparent 54%)"}"><input type="color" data-ftcol="${kind}" value="${value || "#000000"}"></label>`;
+
+function moreMenu(st) {
+    const abs = st.sel && st.sel.geom && st.sel.geom.abs;
+    const item = (act, label, hint = "") => `<button type="button" data-ft="${act}" class="flex h-8 w-full items-center justify-between rounded-lg px-2.5 text-left text-[12px] hover:bg-neutral-100"><span>${label}</span><span class="text-neutral-400">${hint}</span></button>`;
+    return `<div class="pop absolute right-0 top-9 z-40 w-52 p-1">
+        ${item("dup", "Duplicate", "Ctrl+D")}${item("up", "Move earlier")}${item("down", "Move later")}
+        ${item("front", "Bring to front", "Ctrl+Shift+]")}${item("back", "Send to back", "Ctrl+Shift+[")}
+        ${item("free", abs ? "Back to page flow" : "Free position")}
+        ${st.sel && st.sel.count > 1 ? item("group", "Group", "Ctrl+G") : ""}${st.sel && (st.sel.group || (abs && st.sel.leaf === false)) ? item("ungroup", "Ungroup", "Ctrl+Shift+G") : ""}
+        ${item("props", "All properties")}
+        <div class="my-1 h-px bg-neutral-100"></div>${item("del", "Delete", "Del")}
+    </div>`;
+}
+
+const more = (st) => `<span class="sep"></span><div class="relative">${btn("more", ICONS.more, "More", st.menu)}${st.menu ? moreMenu(st) : ""}</div>`;
+
+function textBar(st) {
+    const cs = (st.sel && st.sel.computed) || {};
+    const size = num(cs["font-size"]);
+    const fam = familyOf(cs["font-family"]);
+    const color = rgbToHex(cs.color || "") || "#000000";
+    const fill = rgbToHex(cs["background-color"] || "");
+    const fmt = st.editing && st.fmt ? st.fmt : { bold: parseInt(cs["font-weight"], 10) >= 600, italic: cs["font-style"] === "italic", underline: /underline/.test(cs["text-decoration-line"] || "") };
+    const align = ["center", "right", "justify"].includes(cs["text-align"]) ? cs["text-align"] : "left";
+    const hasFill = st.sel && ["button", "a"].includes(st.sel.tag);
+    return `<select data-ftsel="family" title="Font">${[["sans", "Sans"], ["serif", "Serif"], ["mono", "Mono"]].map(([v, l]) => `<option value="${v}" ${fam === v ? "selected" : ""}>${l}</option>`).join("")}</select>
+        <input type="number" min="1" max="400" data-ftin="size" value="${size}" list="ft-sizes" title="Size">
+        <datalist id="ft-sizes">${SIZES.map((n) => `<option value="${n}"></option>`).join("")}</datalist>
+        <span class="sep"></span>${swatch("text", color, "Text color")}${hasFill ? swatch("fill", fill, "Fill color") : ""}
+        <span class="sep"></span>${btn("bold", ICONS.bold, "Bold", fmt.bold)}${btn("italic", ICONS.italic, "Italic", fmt.italic)}${btn("underline", ICONS.underline, "Underline", fmt.underline)}${btn("link", ICONS.link, "Link")}
+        <span class="sep"></span>${btn("align", ICONS[align], `Align ${align}`)}${st.editing ? "" : boxButtons(st)}${more(st)}`;
+}
+
+// Border, Radius and Spacing: three buttons, each opening a small panel above the bar (see popHtml)
+const popBtn = (st, key, svg, title) => `<button type="button" class="tbtn ${st.pop === key ? "on" : ""}" data-ft="pop" data-arg="${key}" title="${title}">${svg}</button>`;
+const boxButtons = (st) => `<span class="sep"></span>${popBtn(st, "border", ICONS.border, "Border")}${popBtn(st, "radius", ICONS.radius, "Corner radius")}${popBtn(st, "spacing", ICONS.spacing, "Padding and margin")}`;
+
+function shapeBar(st) {
+    const cs = (st.sel && st.sel.computed) || {};
+    const fill = rgbToHex(cs["background-color"] || "");
+    const hasText = st.sel && st.sel.leaf === false ? false : true;
+    return `<span class="lbl2">Fill</span>${swatch("fill", fill, "Fill color")}${hasText ? `<span class="lbl2">Text</span>${swatch("text", rgbToHex(cs.color || "") || "#000000", "Text color")}` : ""}
+        ${boxButtons(st)}${more(st)}`;
+}
+
+// ── The panels ───────────────────────────────────────────────────────────────
+const px = (v) => { const n = parseFloat(v); return Number.isFinite(n) ? Math.round(n * 10) / 10 : 0; };
+const field = (label, prop, value, min = 0) => `<label class="ffield"><span class="fl">${label}</span><input type="number" ${min === null ? "" : `min="${min}"`} step="1" data-ftp="${prop}" value="${value}"><span class="fu">px</span></label>`;
+const sidesBtn = (key, open, svg = ICONS.sides) => `<button type="button" class="tbtn sidebtn ${open ? "on" : ""}" data-ft="side" data-arg="${key}" title="${open ? "Same on all sides" : "Each side on its own"}">${svg}</button>`;
+/** Whether a group shows one field per side: your last choice, or automatically when the sides differ. */
+const isOpen = (st, key, differs) => (st.sides && st.sides[key] !== undefined ? st.sides[key] : differs);
+const same = (a) => a.every((v) => v === a[0]);
+/** Four per-side fields in two rows, with the switch back to "all sides" at the end of the first row. */
+const grid4 = (f, btn) => `<div class="fgrid">${f[0]}${f[1]}${btn}${f[2]}${f[3]}</div>`;
+
+function borderPanel(st, cs) {
+    const sides = ["top", "right", "bottom", "left"];
+    const w = sides.map((d) => px(cs[`border-${d}-width`]));
+    const seen = sides.find((d, i) => w[i] > 0) || "top";
+    const kind = w.every((v) => v === 0) ? "none" : ["dashed", "dotted"].includes(cs[`border-${seen}-style`]) ? cs[`border-${seen}-style`] : "solid";
+    const hex = (rgbToHex(cs[`border-${seen}-color`] || "") || "#000000").toUpperCase();
+    const open = isOpen(st, "border", !same(w));
+    const seg = ["none", "solid", "dashed", "dotted"].map((k) => `<button type="button" data-ft="bstyle" data-arg="${k}" title="${k[0].toUpperCase() + k.slice(1)}" class="${kind === k ? "on" : ""}">${ICONS[k]}</button>`).join("");
+    const widths = open
+        ? grid4(["top", "right", "bottom", "left"].map((d, i) => field(d[0].toUpperCase(), `bw-${d}`, w[i])), sidesBtn("border", true))
+        : `<div class="frow">${field(ICONS.border, "bw-all", w[0])}${sidesBtn("border", false)}</div>`;
+    return `<div class="fseg">${seg}</div>
+        <div class="frow"><label class="swatch big" style="background:${hex}"><input type="color" data-ftp="border-color" value="${hex}"></label><input type="text" class="fhex" data-ftp="border-color-hex" value="${hex}" spellcheck="false"></div>
+        ${widths}`;
+}
+
+function radiusPanel(st, cs) {
+    const r = ["top-left", "top-right", "bottom-left", "bottom-right"].map((c) => px(cs[`border-${c}-radius`]));
+    const open = isOpen(st, "radius", !same(r));
+    return open
+        ? grid4([["TL", "tl", 0], ["TR", "tr", 1], ["BL", "bl", 2], ["BR", "br", 3]].map(([l, k, i]) => field(l, `r-${k}`, r[i])), sidesBtn("radius", true, ICONS.corners))
+        : `<div class="frow">${field("", "r-all", r[0])}${sidesBtn("radius", false, ICONS.corners)}</div>`;
+}
+
+function spacingPanel(st, cs) {
+    const group = (key, title, prefix, min) => {
+        const v = ["top", "right", "bottom", "left"].map((d) => px(cs[`${prefix}-${d}`]));
+        const open = isOpen(st, key, v[0] !== v[2] || v[1] !== v[3]);
+        const body = open
+            ? grid4([["T", "top", 0], ["R", "right", 1], ["B", "bottom", 2], ["L", "left", 3]].map(([l, d, i]) => field(l, `${key}-${d}`, v[i], min)), sidesBtn(key, true))
+            : `<div class="frow">${field("H", `${key}-h`, v[1], min)}${field("V", `${key}-v`, v[0], min)}${sidesBtn(key, false)}</div>`;
+        return `<div class="fttl">${title}</div>${body}`;
+    };
+    return `${group("padding", "Padding", "padding", 0)}${group("margin", "Margin", "margin", null)}`;
+}
+
+/** The open panel, if any; placed by CSS above the bar (or below it when the bar is near the top). */
+function popHtml(st) {
+    if (!st.pop || !st.sel) return "";
+    const cs = st.sel.computed || {};
+    const body = st.pop === "border" ? borderPanel(st, cs) : st.pop === "radius" ? radiusPanel(st, cs) : spacingPanel(st, cs);
+    return `<div class="ftpop">${body}</div>`;
+}
+
+export const DEVICES = [[1280, "Desktop"], [768, "Tablet"], [390, "Mobile"]];
+function frameBar(st) {
+    const f = st.frame;
+    const preset = DEVICES.some(([w]) => w === f.w);
+    // a Custom button appears once the frame has a size that isn't a preset, and keeps your last manual size within reach
+    const custom = f.custom || (!preset ? { w: f.w, h: f.auto ? null : f.h } : null);
+    const customBtn = custom
+        ? `<button type="button" data-ftdev="custom" title="${custom.w} × ${custom.h || "auto"}" class="h-7 rounded-lg px-2 text-[12px] font-medium hover:bg-neutral-100 ${!preset ? "bg-neutral-100" : ""}">Custom</button>`
+        : "";
+    return `${DEVICES.map(([w, l]) => `<button type="button" data-ftdev="${w}" class="h-7 rounded-lg px-2 text-[12px] font-medium hover:bg-neutral-100 ${f.w === w ? "bg-neutral-100" : ""}">${l}</button>`).join("")}${customBtn}
+        <span class="sep"></span><span class="lbl2">W</span><input type="number" min="120" max="8000" data-ftin="fw" value="${f.w}"><span class="lbl2">H</span><input type="number" min="120" max="20000" data-ftin="fh" value="${f.auto ? "" : f.h}" placeholder="auto" title="Leave empty to grow with the content">`;
+}
+
+export function toolbarHtml(st) {
+    if (st.kind === "frame") return frameBar(st);
+    return (st.kind === "text" ? textBar(st) : shapeBar(st)) + popHtml(st);
+}
+
+export const FAMILY_STACKS = {
+    sans: 'ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif',
+    serif: 'ui-serif, Georgia, Cambria, "Times New Roman", serif',
+    mono: 'ui-monospace, SFMono-Regular, Menlo, Consolas, monospace',
+};

package/design/group-controls.js

@@ -0,0 +1,52 @@
+// The Design tab's controls for Tailwind class groups (a size, a colour, a choice, a few buttons), drawn from controls.js.
+// What they show comes from the selection's classes at the panel's breakpoint and state (val, useUi); what they do goes
+// through `actions`, which the editor provides:
+//   applyValue(key, value)                    set a group (empty clears it)
+//   applyColor(key, name, opacity?, undoKey?) set a colour group
+//   togglePalette(key)                        open or close a colour's palette
+//   customColor(key, hex, done, input)        the custom colour picker moved (done: it was released or closed)
+//   redraw()                                  show the stored values again
+import { html } from "../vendor/preact-htm.js";
+import { val, PRESETS, OPTS, splitOpacity } from "./panel-model.js";
+import { useUi } from "./panel-state.js";
+import { TextInput, SelectInput, Segmented, Row, Field, ColorField } from "./controls.js";
+
+/** A free-typed value with suggestions (a size, a spacing...). `cell`: the small labelled cell instead of a full row. */
+export function GroupCombo({ s, k, label, cell, actions }) {
+    const ui = useUi();
+    return html`<${Field} label=${label} title=${k} cell=${cell}>
+        <${TextInput} list=${`dl-${PRESETS[k] ? k : "spacing"}`} value=${val(s, k, ui)} placeholder="-" onCommit=${(text) => actions.applyValue(k, text.trim())} />
+    </${Field}>`;
+}
+
+/** One of a fixed set of values, or "-" for none. */
+export function GroupSelect({ s, k, label, actions }) {
+    const ui = useUi();
+    return html`<${Field} label=${label}>
+        <${SelectInput} blank="-" value=${val(s, k, ui)} options=${OPTS[k]} onChange=${(v) => actions.applyValue(k, v.trim())} />
+    </${Field}>`;
+}
+
+/** Buttons for a few values; the one that is on turns the group off when clicked again. `items`: [value, label, title]. */
+export function GroupSeg({ s, k, label, items, actions }) {
+    const ui = useUi();
+    return html`<${Row} label=${label}><${Segmented} value=${val(s, k, ui)} items=${items} onPick=${(v) => actions.applyValue(k, v)} /></${Row}>`;
+}
+
+/** A colour: swatch, name, opacity, and the palette while it is open (the panel state's palette). */
+export function GroupColor({ s, k, label, actions }) {
+    const ui = useUi();
+    const [name, op] = splitOpacity(val(s, k, ui));
+    const named = /^(?:black|white|transparent|current|inherit)$/.test(name) || /^[a-z]+-\d{2,3}$/.test(name);
+    const arb = name.match(/^\[(.*)\]$/);
+    return html`<${ColorField} label=${label} name=${name} opacity=${op} customKey=${k}
+        swatchStyle=${name && arb ? `background:${arb[1].replace(/_/g, " ")}` : ""}
+        swatchClass=${name && named ? (/^(?:transparent|current|inherit)$/.test(name) ? "swatch-t" : `bg-${name}`) : ""}
+        customValue=${arb && /^#[0-9a-f]{6}$/i.test(arb[1]) ? arb[1] : "#111"}
+        paletteOpen=${ui.palette === k}
+        onPalette=${() => actions.togglePalette(k)}
+        onName=${(text) => actions.applyColor(k, text.trim())}
+        onOpacity=${(text) => { const base = val(s, k, ui).replace(/\/\d+$/, ""); if (base) actions.applyColor(k, base, text.trim()); else actions.redraw(); }}
+        onPick=${(v) => actions.applyColor(k, v)}
+        onCustom=${(hex, done, input) => actions.customColor(k, hex, done, input)} />`;
+}

package/design/host.js

@@ -0,0 +1,22 @@
+// @ts-check
+// Everything the editor needs from the app around it: saving, projects, board positions, the AI and the page address.
+// The editor only calls `host`; the page that mounts it fills it in with setHost() before loading editor.js (the app's own
+// version is app-host.js). An editor used elsewhere supplies its own.
+/**
+ * @typedef {object} Host
+ * @property {(fields: object) => Promise<any>} createComponent    saves a new design (a design opened from a Figma draft sends `draftId`, and the answer may carry `figmaSource`); resolves to the saved record ({ _id, version, ... }), rejects with the reason
+ * @property {(id: string, fields: object) => Promise<any>} updateComponent   changes a saved design (a new version when its code changes)
+ * @property {(id: string) => Promise<void>} [deleteComponent]   deletes a saved design (a page takes its sections with it); rejects with the reason. Omit it and the editor shows no Delete page
+ * @property {(name: string) => Promise<{ id: string, name: string }>} createProject   a project is the canvas that designs share
+ * @property {(projectId: string, positions: object[]) => Promise<void>} saveLayout   where each design sits on the project's canvas
+ * @property {(projectId: string, positions: object[]) => void} saveLayoutOnExit   the same, while the page is closing
+ * @property {(body: object, onText?: (text: string) => void) => Promise<string>} [generate]   the AI drafts a page; resolves to its HTML. Omit it and the editor shows no AI box or AI tab
+ * @property {(id: string | null) => void} showDesign   the address now shows this saved design (null: an unsaved one)
+ * @property {(projectId: string) => string} [projectUrl]   where a project's own page is (the project name links there); omit for none
+ * @property {(where: { projectId: string, designId: string }) => string} [previewUrl]   the address of the prototype page for a saved design (the play button opens it in its own tab); omit it and Preview opens over the editor instead
+ * @property {(id: string) => void} openDesign   go to this design (loads the page again)
+ * @property {(id: string) => Promise<{ changed?: boolean }>} [updateFromFigma]   converts a design again from the Figma data kept with it (a new version when the code changed); omit for no such button
+ */
+export const host = /** @type {Host} */ ({});
+/** @param {Host} h */
+export const setHost = (h) => { Object.assign(host, h); };

package/design/panel-model.js

@@ -0,0 +1,130 @@
+// What the Properties panel draws from: the data tables behind its controls (suggestions, options, tags), small selectors
+// that read the selection and the panel's state (panel-state.js), and inspectorView, which says what the panel shows. The
+// components themselves are in panel.js, design-tab.js, figma-sections.js, style-sections.js, prop-sections.js and classes-section.js.
+import { HUES, SHADES, SPECIAL_COLORS, STEPS, SIZES, MAX_W, GROUPS, getGroup, parseToken } from "@windcraft/core/class-groups.js";
+import { twShown } from "@windcraft/core/prop-tailwind.js";
+import { panelStore } from "./panel-state.js";
+
+const esc = (s) => String(s ?? "").replace(/[&<>"']/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;", "'": "&#39;" }[c]));
+
+const TEXT_SIZES = ["xs", "sm", "base", "lg", "xl", "2xl", "3xl", "4xl", "5xl", "6xl", "7xl", "8xl", "9xl"];
+const RADII = ["none", "sm", "md", "lg", "xl", "2xl", "3xl", "full"];
+const PCT = ["0", "5", "10", "20", "25", "30", "40", "50", "60", "70", "75", "80", "90", "95", "100"];
+const DEGS = ["0", "1", "2", "3", "6", "12", "45", "90", "180"];
+const MS = ["0", "75", "100", "150", "200", "300", "500", "700", "1000"];
+
+// suggestions for the free-type inputs (any value, including [arbitrary], is accepted)
+export const PRESETS = {
+    w: SIZES, h: SIZES, minW: ["0", "full", "min", "max", "fit"], minH: ["0", "full", "screen", "min", "max", "fit"], maxW: MAX_W, maxH: ["none", "full", "screen", "min", "max", "fit"],
+    gap: STEPS, gapX: STEPS, gapY: STEPS, spaceX: STEPS, spaceY: STEPS, z: ["0", "10", "20", "30", "40", "50", "auto"], order: ["first", "last", "none", "1", "2", "3"],
+    gridCols: ["1", "2", "3", "4", "5", "6", "12", "none"], gridRows: ["1", "2", "3", "4", "5", "6", "none"], colSpan: ["1", "2", "3", "4", "6", "full"], rowSpan: ["1", "2", "3", "full"],
+    inset: [...STEPS, "auto", "full"], top: [...STEPS, "auto", "full"], right: [...STEPS, "auto", "full"], bottom: [...STEPS, "auto", "full"], left: [...STEPS, "auto", "full"],
+    fontSize: TEXT_SIZES, leading: ["none", "tight", "snug", "normal", "relaxed", "loose", "4", "5", "6", "7", "8", "9", "10"], tracking: ["tighter", "tight", "normal", "wide", "wider", "widest"], lineClamp: ["1", "2", "3", "4", "5", "6", "none"],
+    borderWidth: ["0", "1", "2", "4", "8"], borderT: ["0", "2", "4", "8"], borderR: ["0", "2", "4", "8"], borderB: ["0", "2", "4", "8"], borderL: ["0", "2", "4", "8"],
+    radius: ["default", ...RADII], radiusTL: RADII, radiusTR: RADII, radiusBR: RADII, radiusBL: RADII, ring: ["0", "1", "2", "4", "8"],
+    opacity: PCT, brightness: ["0", "50", "75", "90", "95", "100", "105", "110", "125", "150", "200"], rotate: DEGS, scale: ["0", "50", "75", "90", "95", "100", "105", "110", "125", "150"],
+    translateX: [...STEPS, "full", "1/2"], translateY: [...STEPS, "full", "1/2"], duration: MS, delay: MS,
+    spacing: STEPS,
+};
+for (const k of ["p", "px", "py", "pt", "pr", "pb", "pl"]) PRESETS[k] = STEPS;
+for (const k of ["m", "mx", "my", "mt", "mr", "mb", "ml"]) PRESETS[k] = [...STEPS, "auto"];
+
+const en = (prefix, list) => list.map((v) => [`${prefix}${v}`, v]);
+export const OPTS = {
+    display: ["block", "inline-block", "inline", "flex", "inline-flex", "grid", "inline-grid", "contents", "hidden"].map((v) => [v, v]),
+    position: ["static", "relative", "absolute", "fixed", "sticky"].map((v) => [v, v]),
+    overflow: en("overflow-", ["auto", "hidden", "visible", "scroll", "clip"]),
+    overflowX: en("overflow-x-", ["auto", "hidden", "visible", "scroll", "clip"]),
+    overflowY: en("overflow-y-", ["auto", "hidden", "visible", "scroll", "clip"]),
+    visibility: [["visible", "visible"], ["invisible", "invisible"]],
+    flexWrap: en("flex-", ["wrap", "nowrap", "wrap-reverse"]),
+    justify: en("justify-", ["start", "center", "end", "between", "around", "evenly", "stretch"]),
+    items: en("items-", ["start", "center", "end", "stretch", "baseline"]),
+    content: en("content-", ["start", "center", "end", "between", "around", "evenly", "stretch"]),
+    self: en("self-", ["auto", "start", "center", "end", "stretch", "baseline"]),
+    flexNum: en("flex-", ["1", "auto", "initial", "none"]),
+    objectFit: en("object-", ["contain", "cover", "fill", "none", "scale-down"]),
+    fontFamily: en("font-", ["sans", "serif", "mono"]),
+    fontWeight: en("font-", ["thin", "extralight", "light", "normal", "medium", "semibold", "bold", "extrabold", "black"]),
+    textOverflow: [["truncate", "truncate"], ["text-ellipsis", "ellipsis"], ["text-clip", "clip"]],
+    whitespace: en("whitespace-", ["normal", "nowrap", "pre", "pre-line", "pre-wrap"]),
+    bgImage: [...en("bg-gradient-to-", ["t", "tr", "r", "br", "b", "bl", "l", "tl"]).map(([v, l]) => [v, "gradient " + l]), ["bg-none", "none"]],
+    bgSize: en("bg-", ["auto", "cover", "contain"]),
+    bgPosition: en("bg-", ["center", "top", "right", "bottom", "left", "left-top", "left-bottom", "right-top", "right-bottom"]),
+    bgRepeat: en("bg-", ["repeat", "no-repeat", "repeat-x", "repeat-y"]),
+    borderStyle: en("border-", ["solid", "dashed", "dotted", "double", "none"]),
+    shadow: [["default", "default"], ...["sm", "md", "lg", "xl", "2xl", "inner", "none"].map((v) => [v, v])],
+    blur: [["default", "default"], ...["none", "sm", "md", "lg", "xl", "2xl", "3xl"].map((v) => [v, v])],
+    backdropBlur: [["default", "default"], ...["none", "sm", "md", "lg", "xl", "2xl", "3xl"].map((v) => [v, v])],
+    grayscale: [["100", "full"], ["0", "off"]],
+    mixBlend: en("mix-blend-", ["normal", "multiply", "screen", "overlay", "darken", "lighten", "difference"]),
+    transition: [["default", "default"], ...["none", "all", "colors", "opacity", "shadow", "transform"].map((v) => [v, v])],
+    ease: en("ease-", ["linear", "in", "out", "in-out"]),
+    cursor: en("cursor-", ["pointer", "default", "text", "move", "not-allowed", "wait", "grab", "grabbing", "crosshair", "help"]),
+    pointerEvents: en("pointer-events-", ["none", "auto"]),
+    userSelect: en("select-", ["none", "text", "all", "auto"]),
+    textTransform: [["uppercase", "UPPER"], ["lowercase", "lower"], ["capitalize", "Title"], ["normal-case", "Normal"]],
+};
+
+const CSS_PROPS = ["background", "background-image", "background-color", "border", "border-radius", "box-shadow", "color", "cursor", "display", "filter", "font-family", "font-size", "font-weight", "gap", "grid-template-columns", "height", "justify-content", "letter-spacing", "line-height", "margin", "max-width", "min-height", "mix-blend-mode", "object-fit", "opacity", "outline", "overflow", "padding", "position", "text-align", "text-shadow", "transform", "transition", "width", "z-index", "backdrop-filter", "clip-path", "aspect-ratio", "animation", "-webkit-text-stroke", "scroll-snap-type"];
+
+const DATALISTS = Object.entries(PRESETS).map(([k, list]) => `<datalist id="dl-${k}">${list.map((v) => `<option value="${esc(v)}"></option>`).join("")}</datalist>`).join("") +
+    `<datalist id="dl-colors">${[...SPECIAL_COLORS, ...HUES.flatMap((h) => SHADES.map((s) => `${h}-${s}`))].map((v) => `<option value="${v}"></option>`).join("")}</datalist>` +
+    `<datalist id="dl-fonts">${["sans", "serif", "mono", "system-ui", "Inter", "Arial", "Helvetica", "Georgia", "Times New Roman", "Courier New", "monospace", "sans-serif", "serif"].map((v) => `<option value="${v}"></option>`).join("")}</datalist>` + `<datalist id="dl-cssprops">${CSS_PROPS.map((v) => `<option value="${v}"></option>`).join("")}</datalist>`;
+
+export function mountDatalists() {
+    const d = document.createElement("div");
+    d.hidden = true;
+    d.innerHTML = DATALISTS;
+    document.body.appendChild(d);
+}
+
+// ── Selectors: what the selection looks like at the panel's breakpoint and state ──────────────────────────────────────────
+// `ui` is the panel's state; left out, it is the store's current one (the editor), components pass the one they were drawn from.
+/** The prefix new Tailwind classes get: "md:hover:", or "" for none. */
+export const variant = (ui = panelStore.get()) => `${ui.bp ? ui.bp + ":" : ""}${ui.st ? ui.st + ":" : ""}`;
+/** The value of a class group on the selection at that breakpoint and state, or "". */
+export const val = (sel, k, ui = panelStore.get()) => { const r = getGroup(sel.classes, k, variant(ui)); return r ? r.value : ""; };
+export const splitOpacity = (v) => { const m = String(v).match(/^(.*?)(?:\/(\d+))?$/); return [m[1], m[2] || ""]; };
+
+const tokensOf = (s) => String(s.classes || "").split(/\s+/).filter(Boolean);
+const isUtility = (tok) => { const base = parseToken(tok).base; return Object.keys(GROUPS).some((k) => GROUPS[k].re.test(base)); };
+
+/** Whether a property nothing sets yet is written as a Tailwind class or as CSS: Tailwind, except on elements styled only by their design's own CSS. */
+export function modeFor(s, ui = panelStore.get()) {
+    if (s.added) return "tailwind";
+    const toks = tokensOf(s);
+    if (toks.length) return toks.some(isUtility) ? "tailwind" : "css";
+    return ui.docTailwind ? "tailwind" : "css";
+}
+
+export const srcOf = (s, p) => ((s && s.sources) || {})[p] || { source: "default" };
+export const ownsValue = (src) => src.source === "tailwind" || src.source === "inline";
+/** Whether the element's own styling gives the value (a class, its style attribute, the design's CSS): drawn solid; else faint. */
+export const styled = (src) => ["tailwind", "inline", "design"].includes(src.source) || (src.source === "tie" && Boolean(src.token));
+/** What a row shows: the class's own value on a Tailwind row (64, 1/2, red-500), the computed value otherwise. */
+export const shownOf = (s, p, src) => (src.source === "tailwind" && twShown(p, src.token)) || (s.computed || {})[p] || "";
+
+
+// the tags the element can validly become (the frame works them out from where it sits and what it holds), grouped by kind
+export const TAG_KINDS = [["Layout", /^(div|section|article|aside|header|footer|nav|main|form|figure|blockquote)$/], ["Text", /^(p|h[1-6]|span|label|strong|em|small|b|i|u|s|code|mark|pre)$/], ["Action", /^(a|button)$/], ["List", /^(ul|ol|li|menu)$/], ["Table", /^(td|th|thead|tbody|tfoot)$/], ["Definition", /^(dt|dd)$/]];
+export const EXTRA_KEYS = ["bgImage", "gradFrom", "gradVia", "gradTo", "ring", "ringColor", "spaceX", "spaceY", "gridRows", "colSpan", "rowSpan", "order", "self", "flexNum", "grow", "lineClamp", "rotate", "scale", "translateX", "translateY", "transition", "duration", "delay", "ease", "blur", "backdropBlur", "brightness", "grayscale", "userSelect"];
+
+/**
+ * What the panel shows, for panel.js: one of
+ *  - page: the page's info (pageInfo() in editor.js), when no element is selected;
+ *  - design: { key, s }, the Design tab;
+ *  - code: { key, path, source, indent, s }, the Code tab: the element's own code, then its classes, inline CSS and attributes;
+ *  - classes: { key, s }, the same without the element's own code (the page body has none);
+ *  - ai: { key, path, outer }, the AI tab.
+ * `key` is the element's path: the panel gives each element fresh fields. `elementCode` ({ source, indent }) is the selected
+ * element's code, worked out by the editor when the Code tab is open.
+ */
+export function inspectorView(s, page, elementCode) {
+    if (!s) return { page };
+    const key = s.path.join(".");
+    const tab = panelStore.get().tab;
+    if (tab === "design") return { design: { key, s } };
+    if (tab === "ai") return { ai: { key, path: s.path, outer: s.outer } };
+    return elementCode ? { code: { key, path: s.path, source: elementCode.source, indent: elementCode.indent, s } } : { classes: { key, s } };
+}

package/design/panel-state.js

@@ -0,0 +1,40 @@
+// What the Properties panel remembers: its tab, the breakpoint and state new classes are written for, which sections are
+// open, which colour palette is open, and whether the open design uses Tailwind. One store; the editor changes it through
+// the functions below and redraws the panel when it changes (editor.js), and the components read it through useUi().
+import { createContext, useContext } from "../vendor/preact-htm.js";
+import { createStore } from "./store.js";
+
+/** Sections that start open (the rest start closed). */
+const OPEN_AT_START = ["geom", "css-layout", "css-size", "css-spacing", "css-type", "css-fill", "css-border", "layout", "size", "spacing", "typography", "fill", "border"];
+
+/**
+ * tab: "design" | "classes" (the Code tab) | "ai". bp, st: the breakpoint and state ("" is none) new classes are written for.
+ * open, closed: section ids as the panel remembers them (a section can also open by itself). palette: the colour group whose
+ * palette is open. docTailwind: whether the open design uses Tailwind (what a value nothing sets yet is written as).
+ */
+export const panelStore = createStore({
+    tab: "design",
+    bp: "",
+    all: false, // the All chip was clicked: edits are plain classes (bp is "" for that and for nothing picked)
+    st: "",
+    open: new Set(OPEN_AT_START),
+    closed: /** @type {Set<string>} */ (new Set()),
+    palette: /** @type {string | null} */ (null),
+    docTailwind: true,
+});
+
+/** The state the panel is drawn from: the store's, plus what is worked out at the time of drawing (the frame's width). */
+export const UiContext = createContext({ ...panelStore.get(), frameW: 0 });
+export const useUi = () => useContext(UiContext);
+
+/** Opens or closes a section: `wasOpen` is what was shown (a section can open by itself), so a click always flips what you see. */
+export function toggleSection(id, wasOpen) {
+    panelStore.set(({ open, closed }) => {
+        const nextOpen = new Set(open), nextClosed = new Set(closed);
+        if (wasOpen) { nextOpen.delete(id); nextClosed.add(id); } else { nextOpen.add(id); nextClosed.delete(id); }
+        return { open: nextOpen, closed: nextClosed };
+    });
+}
+
+/** Opens a colour group's palette, or closes it when it is the one open. */
+export const togglePalette = (key) => panelStore.set(({ palette }) => ({ palette: palette === key ? null : key }));