windcraft-editor 0.0.0-stage → 0.1.0

package/design/color-picker.js

@@ -0,0 +1,107 @@
+// The editor's own colour picker. The browser's picker opens wherever it likes, often on top of the element being coloured;
+// this one is placed beside the selection, so the change can be watched as it happens. It only reports colours: the caller
+// decides where they go (editor.js feeds them to the same colour fields, so live updates and undo work as before).
+
+const clamp = (n, a, b) => Math.min(b, Math.max(a, n));
+
+function hsvToHex(h, s, v) {
+    const f = (n) => { const k = (n + h / 60) % 6; return v - v * s * Math.max(0, Math.min(k, 4 - k, 1)); };
+    return "#" + [f(5), f(3), f(1)].map((x) => Math.round(x * 255).toString(16).padStart(2, "0")).join("");
+}
+function hexToHsv(hex) {
+    const m = /^#?([0-9a-f]{6})$/i.exec(String(hex || "").trim());
+    if (!m) return null;
+    const n = parseInt(m[1], 16), r = (n >> 16 & 255) / 255, g = (n >> 8 & 255) / 255, b = (n & 255) / 255;
+    const max = Math.max(r, g, b), d = max - Math.min(r, g, b);
+    let h = 0;
+    if (d) h = max === r ? ((g - b) / d) % 6 : max === g ? (b - r) / d + 2 : (r - g) / d + 4;
+    return { h: (h * 60 + 360) % 360, s: max ? d / max : 0, v: max };
+}
+
+const DEFAULT_W = 232, DEFAULT_H = 268, GAP = 12;
+let box = null, state = null;
+
+function build() {
+    box = document.createElement("div");
+    box.className = "cpick";
+    box.innerHTML = `<div class="cp-sv"><div class="cp-white"></div><div class="cp-black"></div><i class="cp-dot"></i></div>
+        <div class="cp-hue"><i class="cp-knob"></i></div>
+        <div class="cp-row"><span class="cp-prev"></span><input class="cp-hex" spellcheck="false" maxlength="7" aria-label="Hex colour">${window.EyeDropper ? '<button type="button" class="cp-drop" title="Pick a colour from the screen"><svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="1.8" stroke-linecap="round" stroke-linejoin="round"><path d="m2 22 1-1h3l9-9M3 21v-3l9-9m3-3 3-3 3 3-3 3 1 1-2 2-6-6 2-2Z"/></svg></button>' : ""}</div>`;
+    document.body.appendChild(box);
+    // presses inside keep focus where it is (the colour field it feeds stays the active one), except in the hex field
+    box.addEventListener("mousedown", (e) => { if (!e.target.closest(".cp-hex")) e.preventDefault(); });
+    const drag = (sel, move) => {
+        const area = box.querySelector(sel);
+        area.addEventListener("pointerdown", (e) => {
+            area.setPointerCapture(e.pointerId);
+            move(e, area.getBoundingClientRect());
+            const mv = (ev) => move(ev, area.getBoundingClientRect());
+            const up = () => { area.removeEventListener("pointermove", mv); area.removeEventListener("pointerup", up); };
+            area.addEventListener("pointermove", mv);
+            area.addEventListener("pointerup", up);
+        });
+    };
+    drag(".cp-sv", (e, r) => { state.s = clamp((e.clientX - r.left) / r.width, 0, 1); state.v = 1 - clamp((e.clientY - r.top) / r.height, 0, 1); emit(); });
+    drag(".cp-hue", (e, r) => { state.h = clamp((e.clientX - r.left) / r.width, 0, 1) * 359.9; emit(); });
+    const hex = box.querySelector(".cp-hex");
+    const typed = () => { const v = hexToHsv(hex.value.startsWith("#") ? hex.value : "#" + hex.value); if (v) { Object.assign(state, v); emit(); } else paint(); };
+    hex.addEventListener("keydown", (e) => { if (e.key === "Enter") { e.preventDefault(); typed(); close(); } if (e.key === "Escape") { e.preventDefault(); close(); } });
+    hex.addEventListener("change", typed);
+    const drop = box.querySelector(".cp-drop");
+    if (drop) drop.addEventListener("click", async () => { try { const r = await new window.EyeDropper().open(); const v = hexToHsv(r.sRGBHex); if (v) { Object.assign(state, v); emit(); } } catch { /* cancelled */ } });
+    // a press anywhere else, or Escape, closes it
+    document.addEventListener("pointerdown", (e) => { if (state && !box.contains(e.target) && !(state.opener && state.opener.contains(e.target))) close(); }, true);
+    document.addEventListener("keydown", (e) => { if (state && e.key === "Escape" && !box.contains(document.activeElement)) close(); }, true);
+    // a click inside the design happens in its own frame and never reaches this document: the frame taking focus closes it too
+    window.addEventListener("blur", () => setTimeout(() => { if (state && document.activeElement && document.activeElement.tagName === "IFRAME") close(); }, 0));
+}
+
+function paint() {
+    const { h, s, v } = state, hex = hsvToHex(h, s, v);
+    box.querySelector(".cp-sv").style.background = `hsl(${h} 100% 50%)`;
+    Object.assign(box.querySelector(".cp-dot").style, { left: `${s * 100}%`, top: `${(1 - v) * 100}%`, background: hex });
+    Object.assign(box.querySelector(".cp-knob").style, { left: `${(h / 360) * 100}%`, background: `hsl(${h} 100% 50%)` });
+    box.querySelector(".cp-prev").style.background = hex;
+    const field = box.querySelector(".cp-hex");
+    if (document.activeElement !== field) field.value = hex.toUpperCase();
+    return hex;
+}
+function emit() { const hex = paint(); if (hex !== state.last) { state.last = hex; state.onInput(hex); } }
+
+/** Beside `near` (the selection), on whichever side has room inside `bounds`; failing that, where it covers the least of it. */
+export function placeBeside(near, bounds, from, W = DEFAULT_W, H = DEFAULT_H) {
+    const fits = (x, y) => x >= bounds.left && y >= bounds.top && x + W <= bounds.right && y + H <= bounds.bottom;
+    const midY = clamp(near.top, bounds.top, bounds.bottom - H), midX = clamp(near.left, bounds.left, bounds.right - W);
+    const spots = [[near.right + GAP, midY], [near.left - GAP - W, midY], [midX, near.bottom + GAP], [midX, near.top - GAP - H]];
+    const ok = spots.find(([x, y]) => fits(x, y));
+    if (ok) return ok;
+    // the element fills the view: the corner of the view farthest from the swatch that opened it
+    const x = from && from.left > (bounds.left + bounds.right) / 2 ? bounds.left + GAP : bounds.right - W - GAP;
+    return [clamp(x, 0, innerWidth - W), clamp(bounds.top + GAP, 0, innerHeight - H)];
+}
+
+/**
+ * Opens the picker. value: "#rrggbb"; near: the selected element's rect on screen; bounds: the area to stay in; opener: the
+ * swatch pressed (pressing it again doesn't close it underneath); onInput(hex) while picking; onClose(hex) once it closes.
+ */
+export function openColorPicker({ value, near, bounds, opener, onInput, onClose }) {
+    if (!box) build();
+    if (state) close();
+    state = { ...(hexToHsv(value) || { h: 0, s: 0, v: 0 }), last: null, opener, onInput, onClose };
+    state.last = hsvToHex(state.h, state.s, state.v);
+    paint();
+    const [x, y] = placeBeside(near || opener.getBoundingClientRect(), bounds || { left: 0, top: 0, right: innerWidth, bottom: innerHeight }, opener && opener.getBoundingClientRect());
+    Object.assign(box.style, { left: `${x}px`, top: `${y}px`, display: "block" });
+}
+
+export function closeColorPicker() { if (state) close(); }
+
+function close() {
+    const s = state;
+    state = null;
+    box.style.display = "none";
+    s.onClose(s.last);
+}
+
+/** The swatch the open picker belongs to, or null. */
+export const colorPickerOpener = () => (state ? state.opener : null);

package/design/config.js

@@ -0,0 +1,5 @@
+// What mountEditor() hands the editor before its code loads: the design and what surrounds it (see index.js).
+//   data   the design to open
+//   ui     what of the editor is shown (see index.js): { panels, nav, tools }
+//   hooks  what the editor tells the app around it: { chrome() after every change, details(fields) when a first save needs a name }
+export const config = /** @type {{ data: any, ui: { panels?: boolean, nav?: boolean, tools?: string[] | null }, hooks: { chrome?: () => void, details?: (fields: object) => void }, leaving?: boolean }} */ ({ ui: {}, hooks: {} });

package/design/controls.js

@@ -0,0 +1,132 @@
+// @ts-check
+// The building blocks of the Properties panel (see panel.js for the shell): text fields, dropdowns, button groups, sections
+// and a colour field. Each keeps what is being typed in its own state and reports changes through callbacks; none reads the
+// page or the editor's state. Their classes are the ones canvas.handlebars styles.
+import { html, useState, useRef } from "../vendor/preact-htm.js";
+import { HUES, SHADES, SPECIAL_COLORS } from "@windcraft/core/class-groups.js";
+
+/**
+ * What a typed-in field needs: it shows `value` until it is focused, keeps what is typed in its own state (a redraw with the
+ * old value must not undo a keystroke), and hands the text over: `onInput(text)` on every keystroke, `onCommit(text)` on Enter
+ * (a single line) or when it is left. Esc gives up. Whether the value changes is up to the caller: a refused entry shows the
+ * old value again. Enter and Esc act at once rather than through blur, which a window without focus never sends. Leaving the
+ * field hands the text over too, unless `blurCommits` is false (a box that only means something on Enter).
+ */
+function useTyped(value, onCommit, onInput, multiline, blurCommits = true) {
+    const [draft, setDraft] = useState(/** @type {string | null} */ (null));
+    const typed = useRef(/** @type {string | null} */ (null)); // the same text as `draft`, readable at once (a key can arrive before the redraw)
+    const type = (/** @type {string} */ text, /** @type {boolean} */ live) => { typed.current = text; setDraft(text); if (live && onInput) onInput(text); };
+    const finish = (/** @type {boolean} */ commit) => {
+        const text = typed.current;
+        typed.current = null;
+        setDraft(null);
+        if (commit && text !== null && text !== String(value ?? "") && onCommit) onCommit(text);
+    };
+    return {
+        shown: draft ?? String(value ?? ""),
+        onFocus: (/** @type {any} */ e) => type(e.target.value, false),
+        onInput: (/** @type {any} */ e) => type(e.target.value, true),
+        onBlur: () => finish(blurCommits),
+        onKeyDown: (/** @type {any} */ e) => {
+            if (e.key === "Enter" && !multiline) { finish(true); e.target.blur(); }
+            else if (e.key === "Escape") { finish(false); e.target.blur(); }
+        },
+    };
+}
+
+/**
+ * A text input typed in freely (see useTyped).
+ * @param {{ value?: string | number | null, onCommit?: (text: string) => void, onInput?: (text: string) => void, placeholder?: string, list?: string, title?: string, disabled?: boolean, blurCommits?: boolean, class?: string }} props
+ */
+export function TextInput({ value, onCommit, onInput, placeholder, list, title, disabled, blurCommits, class: cls = "fi" }) {
+    const t = useTyped(value, onCommit, onInput, false, blurCommits !== false);
+    return html`<input class=${cls} value=${t.shown} placeholder=${placeholder || undefined} list=${list} title=${title} disabled=${disabled || undefined} autocomplete="off"
+        onFocus=${t.onFocus} onInput=${t.onInput} onBlur=${t.onBlur} onKeyDown=${t.onKeyDown} />`;
+}
+
+/**
+ * A multi-line text box typed in freely (see useTyped); Enter is a new line.
+ * @param {{ value?: string | null, onCommit?: (text: string) => void, onInput?: (text: string) => void, placeholder?: string, rows?: number, spellcheck?: boolean, class?: string }} props
+ */
+export function TextArea({ value, onCommit, onInput, placeholder, rows = 3, spellcheck, class: cls = "fi area" }) {
+    const t = useTyped(value, onCommit, onInput, true);
+    return html`<textarea class=${cls} rows=${rows} placeholder=${placeholder || undefined} spellcheck=${spellcheck} value=${t.shown}
+        onFocus=${t.onFocus} onInput=${t.onInput} onBlur=${t.onBlur} onKeyDown=${t.onKeyDown}></textarea>`;
+}
+
+/**
+ * A dropdown. `options` are [value, label]; `onChange(value)` when another is picked. A `blank` option ("-") comes first when
+ * given. `groups` ([label, options][]) instead of `options` draws <optgroup>s.
+ * @param {{ value?: string, options?: string[][], groups?: [string, string[][]][], onChange: (value: string) => void, blank?: string, title?: string, class?: string }} props
+ */
+export function SelectInput({ value, options, groups, onChange, blank, title, class: cls = "fi" }) {
+    const opt = (/** @type {string[]} */ [v, l]) => html`<option value=${v} selected=${value === v}>${l}</option>`;
+    return html`<select class=${cls} title=${title} onChange=${(e) => onChange(e.target.value)}>
+        ${blank !== undefined && html`<option value="" selected=${!value}>${blank}</option>`}
+        ${options && options.map(opt)}
+        ${groups && groups.map(([label, list]) => html`<optgroup label=${label}>${list.map(opt)}</optgroup>`)}
+    </select>`;
+}
+
+/**
+ * A row of buttons where one can be on. `items` are [value, label, title]; the title is the label when it is left out, and none
+ * when it is null. Clicking the one that is on sends "" (off), another sends its value.
+ * @param {{ value?: string, items: (string | null)[][], onPick: (value: string) => void, off?: boolean }} props `off`: clicking the one that is on sends its value again (a fixed choice, not a toggle)
+ */
+export function Segmented({ value, items, onPick, off }) {
+    return html`<div class="seg2">${items.map(([v, l, t]) => html`<button type="button" title=${t === null ? undefined : t || l} class=${value === v ? "on" : ""}
+        onClick=${() => onPick(value === v && !off ? "" : /** @type {string} */ (v))}>${l}</button>`)}</div>`;
+}
+
+/** A labelled row: <div class="row">. */
+export const Row = ({ label, title, children }) => html`<div class="row" title=${title}><span class="lbl">${label}</span>${children}</div>`;
+/** A labelled row whose control is an input, so the label is clickable: <label class="row"> (or a small <label class="cell">). `extra`: more classes (opacity-50 for a dimmed one). */
+export const Field = ({ label, title, cell, extra, children }) => html`<label class=${[cell ? "cell" : "row", extra].filter(Boolean).join(" ")} title=${title}><span class=${cell ? "clbl" : "lbl"}>${label}</span>${children}</label>`;
+/** Two or four controls side by side. */
+export const Two = ({ children }) => html`<div class="two">${children}</div>`;
+export const Four = ({ children }) => html`<div class="four">${children}</div>`;
+
+/**
+ * A collapsible section with a header; a dot shows that something in it is set. `open` is what is shown, `onToggle` flips it.
+ * (It has no data-sec: the editor's delegated handler for the sections still in HTML would toggle it a second time.)
+ * @param {{ title: string, open: boolean, set?: boolean, onToggle: () => void, children?: any }} props
+ */
+export function Section({ title, open, set, onToggle, children }) {
+    return html`<div class="sec"><button type="button" class="sech" onClick=${onToggle}>
+        <span class="car">${open ? "▾" : "▸"}</span><span class="t">${title}</span>${set && html`<i class="dot"></i>`}</button>
+        ${open && html`<div class="secb">${children}</div>`}</div>`;
+}
+
+/**
+ * A colour as a row: a swatch that opens the palette, the colour's name (typed), its opacity, and (when open) the palette:
+ * the special colours, a custom colour picker, None, and every hue and shade.
+ * @param {{ label: string, name: string, opacity: string, swatchClass?: string, swatchStyle?: string, customValue?: string, paletteOpen: boolean, onPalette: () => void, onName: (text: string) => void, onOpacity: (text: string) => void, onPick: (value: string) => void, onCustom: (hex: string, done: boolean, input: HTMLInputElement | null) => void, customKey?: string }} props
+ */
+export function ColorField({ label, name, opacity, swatchClass, swatchStyle, customValue, paletteOpen, onPalette, onName, onOpacity, onPick, onCustom, customKey }) {
+    const cell = (/** @type {string} */ v, /** @type {string} */ cls) => html`<button type="button" title=${v} class=${`sw2 ${cls} ${name === v ? "on" : ""}`} onClick=${() => onPick(v)}></button>`;
+    return html`
+        <div class="crow"><span class="lbl">${label}</span>
+            <button type="button" class=${`sw ${swatchClass || ""}`} style=${swatchStyle || undefined} title="Pick a color" onClick=${onPalette}></button>
+            <${TextInput} class="fi grow" list="dl-colors" value=${name} placeholder="none" onCommit=${onName} />
+            <${TextInput} class="fi op" value=${opacity} placeholder="100" title="Opacity %" onCommit=${onOpacity} /><span class="pct">%</span></div>
+        ${paletteOpen && html`<div class="pal">
+            <div class="palrow">${SPECIAL_COLORS.map((c) => cell(c, c === "black" ? "bg-black" : c === "white" ? "bg-white" : "swatch-t"))}
+                <label class="sw2 custom" title="Custom color"><${ColorInput} class="" value=${customValue || "#111"} hook=${{ "data-ccustom": customKey }}
+                    onLive=${(hex) => onCustom(hex, false, null)} onDone=${(hex, input) => onCustom(hex, true, input)} /></label>
+                <button type="button" class="clear" onClick=${() => onPick("")}>None</button></div>
+            ${HUES.filter((h) => h !== "brand").map((h) => html`<div class="palrow">${SHADES.map((s) => cell(`${h}-${s}`, `bg-${h}-${s}`))}</div>`)}
+        </div>`}`;
+}
+
+/**
+ * A colour input. While it is being dragged it shows what is picked (the redraws that follow each change carry the old value
+ * until the page reports the new one). `onLive(hex)` on every move, `onDone(hex, input)` when it is released or closed.
+ * `hook` is extra attributes, such as { "data-propcolor": prop }, which the editor's colour picker uses to find the field again.
+ * @param {{ value: string, title?: string, class?: string, hook?: Record<string, string>, onLive: (hex: string) => void, onDone: (hex: string, input: HTMLInputElement) => void }} props
+ */
+export function ColorInput({ value, title, class: cls = "cinp", hook, onLive, onDone }) {
+    const [draft, setDraft] = useState(/** @type {string | null} */ (null));
+    return html`<input type="color" class=${cls} value=${draft ?? value} title=${title} ...${hook || {}}
+        onInput=${(e) => { setDraft(e.target.value); onLive(e.target.value); }}
+        onChange=${(e) => { setDraft(null); onDone(e.target.value, e.target); }} />`;
+}

package/design/css-props.js

@@ -0,0 +1,111 @@
+// Property-based style panel: works on ANY element, whatever styled it (Tailwind, a stylesheet,
+// Bootstrap, inline styles). It reads computed CSS and writes inline styles, which always win.
+const sel = (o) => ({ t: "select", o });
+const FLEX = ["flex-start", "center", "flex-end", "space-between", "space-around", "space-evenly"];
+
+export const CSS_SECTIONS = [
+    ["css-layout", "Layout", [
+        { p: "display", l: "Display", ...sel(["block", "inline", "inline-block", "flex", "inline-flex", "grid", "inline-grid", "none", "contents"]) },
+        { p: "position", l: "Position", ...sel(["static", "relative", "absolute", "fixed", "sticky"]) },
+        { p: "overflow", l: "Overflow", ...sel(["visible", "hidden", "auto", "scroll", "clip"]) },
+        { p: "z-index", l: "Z-index", t: "text" },
+        { p: "flex-direction", l: "Direction", ...sel(["row", "row-reverse", "column", "column-reverse"]) },
+        { p: "flex-wrap", l: "Wrap", ...sel(["nowrap", "wrap", "wrap-reverse"]) },
+        { p: "justify-content", l: "Justify", ...sel(["normal", ...FLEX, "stretch"]) },
+        { p: "align-items", l: "Align", ...sel(["normal", "stretch", "flex-start", "center", "flex-end", "baseline"]) },
+        { p: "gap", l: "Gap", t: "text" },
+        { p: "grid-template-columns", l: "Grid cols", t: "text" },
+    ]],
+    ["css-size", "Size", [
+        { p: "width", l: "Width", t: "text" }, { p: "height", l: "Height", t: "text" },
+        { p: "min-width", l: "Min W", t: "text" }, { p: "max-width", l: "Max W", t: "text" },
+        { p: "min-height", l: "Min H", t: "text" }, { p: "max-height", l: "Max H", t: "text" },
+        { p: "aspect-ratio", l: "Ratio", t: "text" },
+    ]],
+    ["css-spacing", "Spacing", "box"],
+    ["css-offsets", "Position offsets", [
+        { p: "top", l: "Top", t: "text" }, { p: "right", l: "Right", t: "text" }, { p: "bottom", l: "Bottom", t: "text" }, { p: "left", l: "Left", t: "text" },
+    ]],
+    ["css-type", "Typography", [
+        { p: "font-family", l: "Family", t: "text", list: "dl-fonts" },
+        { p: "font-size", l: "Size", t: "text" },
+        { p: "font-weight", l: "Weight", ...sel(["100", "200", "300", "400", "500", "600", "700", "800", "900"]) },
+        { p: "line-height", l: "Line", t: "text" },
+        { p: "letter-spacing", l: "Tracking", t: "text" },
+        { p: "text-align", l: "Align", t: "seg", o: ["left", "center", "right", "justify"] },
+        { p: "text-decoration-line", l: "Decor", ...sel(["none", "underline", "line-through", "overline"]) },
+        { p: "text-transform", l: "Case", ...sel(["none", "uppercase", "lowercase", "capitalize"]) },
+        { p: "font-style", l: "Style", ...sel(["normal", "italic"]) },
+        { p: "white-space", l: "Wrap", ...sel(["normal", "nowrap", "pre", "pre-wrap", "pre-line"]) },
+        { p: "color", l: "Color", t: "color" },
+    ]],
+    ["css-fill", "Fill", [
+        { p: "background-color", l: "Color", t: "color" },
+        { p: "background-image", l: "Image", t: "text" },
+        { p: "background-size", l: "Size", ...sel(["auto", "cover", "contain"]) },
+        { p: "background-position", l: "Position", t: "text" },
+        { p: "background-repeat", l: "Repeat", ...sel(["repeat", "no-repeat", "repeat-x", "repeat-y"]) },
+    ]],
+    ["css-border", "Border and radius", [
+        { p: "border-top-width", l: "Width", t: "text" },
+        { p: "border-top-style", l: "Style", ...sel(["none", "solid", "dashed", "dotted", "double"]) },
+        { p: "border-top-color", l: "Color", t: "color" },
+        { p: "border-radius", l: "Radius", t: "text" },
+        { p: "outline", l: "Outline", t: "text" },
+    ]],
+    ["css-effects", "Effects", [
+        { p: "box-shadow", l: "Shadow", t: "text" },
+        { p: "opacity", l: "Opacity", t: "text" },
+        { p: "filter", l: "Filter", t: "text" },
+        { p: "backdrop-filter", l: "Backdrop", t: "text" },
+        { p: "transform", l: "Transform", t: "text" },
+        { p: "transition", l: "Transition", t: "text" },
+        { p: "cursor", l: "Cursor", ...sel(["auto", "default", "pointer", "text", "move", "not-allowed", "grab", "crosshair"]) },
+        { p: "mix-blend-mode", l: "Blend", ...sel(["normal", "multiply", "screen", "overlay", "darken", "lighten", "difference"]) },
+        { p: "pointer-events", l: "Pointer", ...sel(["auto", "none"]) },
+        { p: "object-fit", l: "Object fit", ...sel(["fill", "contain", "cover", "none", "scale-down"]) },
+    ]],
+];
+
+export const BOX_PROPS = ["margin-top", "margin-right", "margin-bottom", "margin-left", "padding-top", "padding-right", "padding-bottom", "padding-left"];
+
+/** What the floating bar's Border, Radius and Spacing popovers read, side by side and corner by corner. */
+export const TOOLBAR_PROPS = [
+    ...["top", "right", "bottom", "left"].flatMap((d) => [`border-${d}-width`, `border-${d}-style`, `border-${d}-color`]),
+    "border-top-left-radius", "border-top-right-radius", "border-bottom-right-radius", "border-bottom-left-radius",
+];
+
+/** Every property the panel can show, sent to the in-frame agent so it can report computed values. */
+export const CSS_PROP_LIST = [...new Set([
+    "align-self", "flex-grow", "flex-shrink", "flex-basis", "column-gap", "row-gap", "scale", "justify-items", "grid-template-rows", // Position, Layout, item (figma-sections.js)
+    "outline-style", "outline-offset", "user-select", "visibility", "object-position", "text-overflow", "border-top-left-radius", // style-sections.js
+    ...CSS_SECTIONS.flatMap(([, , c]) => (c === "box" ? [] : c.map((x) => x.p))),
+    ...BOX_PROPS,
+    ...TOOLBAR_PROPS,
+])];
+
+const LENGTH = new Set(["width", "height", "min-width", "max-width", "min-height", "max-height", "top", "right", "bottom", "left", "gap", "font-size", "line-height", "letter-spacing", "border-top-width", "border-radius", ...BOX_PROPS]);
+
+/** A bare number means pixels for length properties (24 -> 24px). */
+export function normalizeValue(prop, value) {
+    const v = String(value).trim();
+    if (LENGTH.has(prop) && /^-?\d*\.?\d+$/.test(v) && Number(v) !== 0) return `${v}px`;
+    return v;
+}
+
+export function rgbToHex(value) {
+    const m = String(value).match(/^rgba?\(\s*(\d+)[,\s]+(\d+)[,\s]+(\d+)(?:[,\s/]+([\d.]+))?\s*\)$/);
+    if (!m) return /^#[0-9a-f]{6}$/i.test(value) ? value : "";
+    if (m[4] !== undefined && Number(m[4]) === 0) return "";
+    return "#" + [m[1], m[2], m[3]].map((n) => Number(n).toString(16).padStart(2, "0")).join("");
+}
+
+/** "color: red; padding: 4px" -> { color: "red", padding: "4px" } */
+export function parseInline(style) {
+    const out = {};
+    String(style || "").split(";").forEach((d) => {
+        const i = d.indexOf(":");
+        if (i > 0) out[d.slice(0, i).trim().toLowerCase()] = d.slice(i + 1).trim();
+    });
+    return out;
+}

package/design/design-tab.js

@@ -0,0 +1,120 @@
+// The top of the Design tab as components: where the element is (crumbs), what tag it is, what you can do with it, how edits
+// are written (legend, breakpoint and state), and what it says (content). They read the panel's state (breakpoint, state, the
+// frame's breakpoint) through useUi() and act through `actions`, which the editor provides:
+//   select(path) · move(dir) · duplicate() · remove() · setTag(tag) · setBreakpoint(bp) · setState(st) · setText(text) · setAttr(name, value)
+import { html, useState } from "../vendor/preact-htm.js";
+import { BREAKPOINT_WIDTH, parseToken } from "@windcraft/core/class-groups.js";
+import { TAG_KINDS, variant } from "./panel-model.js";
+import { useUi } from "./panel-state.js";
+import { TextInput, TextArea, SelectInput, Field } from "./controls.js";
+import { I, IconBtn } from "./figma-sections.js";
+
+const Crumbs = ({ s, actions }) => html`<div class="crumbs">${s.crumbs.map((c, i) => html`${i > 0 && html`<span class="sl">/</span>`}<button type="button" class=${i === s.crumbs.length - 1 ? "cur" : ""} onClick=${() => actions.select(c.path || [])}>${c.tag}</button>`)}</div>`;
+
+/**
+ * The element's tag (only tags that stay valid where it sits and for what it holds, grouped by kind) and what can be done with
+ * it: move earlier / later among its siblings, duplicate, delete. One compact row under the crumbs.
+ */
+const ElementBar = ({ s, actions }) => {
+    const opts = s.tagOptions || [];
+    const many = (s.count || 1) > 1;
+    const groups = TAG_KINDS.map(([label, re]) => [label, opts.filter((t) => re.test(t)).map((t) => [t, `<${t}>`])]).filter(([, list]) => list.length);
+    const canTag = opts.length > 1 && !many;
+    if (s.tag === "body") return null;
+    return html`<div class="ebar">
+        <label class=${`nf etag ${canTag ? "" : "off"}`} title=${canTag ? "Change the tag (only tags that stay valid here are listed)" : "This tag can't change here"}>
+            <span class="nfl">Tag</span>${canTag
+                ? html`<${SelectInput} class="nfs wide" value=${s.tag} groups=${groups} onChange=${actions.setTag} />`
+                : html`<span class="nfi etagv">${many ? `${s.count} selected` : `<${s.tag}>`}</span>`}</label>
+        <div class="ibg">
+            <${IconBtn} icon=${I.up} title="Move earlier (before the previous sibling)" onClick=${() => actions.move(-1)} />
+            <${IconBtn} icon=${I.down} title="Move later (after the next sibling)" onClick=${() => actions.move(1)} />
+            <${IconBtn} icon=${I.copy} title="Duplicate (Ctrl/Cmd+D)" onClick=${actions.duplicate} />
+            <button type="button" class="ib danger" title="Delete (Del)" onClick=${actions.remove}>${I.trash}</button>
+        </div></div>`;
+};
+
+/** A key to the edge on fields: blue for a Tailwind class, amber for CSS. */
+const Legend = () => html`<p class="legend"><span class="edge tw"></span>Tailwind <span class="edge css"></span>CSS</p>`;
+
+/**
+ * Where edits go, as a frontend developer thinks of it: Screen (all sizes, or from a breakpoint up: md:) and State (default, or
+ * hover:, focus:...). With All and Default an edit is a plain class. A dot marks a breakpoint or state this element already has
+ * classes for; picking a breakpoint also takes the frame to its width, so what is edited is what is seen.
+ */
+const SCREENS = [["", "All"], ["sm", "sm"], ["md", "md"], ["lg", "lg"], ["xl", "xl"], ["2xl", "2xl"]];
+const MAIN_STATES = [["", "Default"], ["hover", "Hover"], ["focus", "Focus"]]; // the rest in the + menu; any this element uses gets a chip
+/** Every state Tailwind has a prefix for, grouped as the + menu shows them: [prefix, label, when it applies]. */
+const STATE_GROUPS = [
+    ["Interaction", [["hover", "Hover", "on hover"], ["focus", "Focus", "when focused"], ["focus-visible", "Focus visible", "when focused from the keyboard"], ["focus-within", "Focus within", "when something inside is focused"], ["active", "Active", "while pressed"], ["visited", "Visited", "once the link was visited"]]],
+    ["Form", [["disabled", "Disabled", "when disabled"], ["checked", "Checked", "when checked"], ["required", "Required", "when required"], ["invalid", "Invalid", "when its value is invalid"], ["placeholder-shown", "Placeholder shown", "while the placeholder shows"], ["read-only", "Read only", "when read-only"]]],
+    ["Children", [["first", "First", "on the first child"], ["last", "Last", "on the last child"], ["odd", "Odd", "on odd children"], ["even", "Even", "on even children"], ["only", "Only", "on an only child"], ["empty", "Empty", "when it has nothing inside"]]],
+    ["Parent and sibling", [["group-hover", "Group hover", "when its .group parent is hovered"], ["group-focus", "Group focus", "when its .group parent is focused"], ["peer-hover", "Peer hover", "when the .peer before it is hovered"], ["peer-focus", "Peer focus", "when the .peer before it is focused"], ["peer-checked", "Peer checked", "when the .peer before it is checked"]]],
+    ["Parts", [["placeholder", "Placeholder", "its placeholder text"], ["before", "Before", "its ::before"], ["after", "After", "its ::after"], ["selection", "Selection", "selected text in it"], ["marker", "Marker", "its list markers"], ["file", "File button", "its file-input button"]]],
+    ["Theme and media", [["dark", "Dark", "in dark mode"], ["print", "Print", "when printed"], ["motion-reduce", "Reduced motion", "when motion is reduced"]]],
+];
+const STATE_INFO = Object.fromEntries(STATE_GROUPS.flatMap(([, list]) => list.map(([v, l, w]) => [v, { label: l, when: w }])));
+const STATE_WORDS = Object.fromEntries(Object.entries(STATE_INFO).map(([v, i]) => [v, i.when]));
+// the states the canvas can show on the selected element (the rest apply on their own: disabled, first, dark...)
+const SHOWABLE = new Set(["hover", "focus", "focus-visible", "focus-within", "active", "group-hover", "group-focus", "peer-hover", "peer-focus"]);
+
+/** The + menu: every state, grouped, the ones this element uses marked; picking one makes it the state edits go to. */
+function StateMenu({ used, current, onPick }) {
+    const [open, setOpen] = useState(false);
+    return html`<div class="vadd">
+        <button type="button" class=${`vchip vplus ${open ? "on" : ""}`} title="More states (disabled, first, dark, group-hover…)" onClick=${() => setOpen(!open)}>+</button>
+        ${open && html`<div class="vpop" onMouseLeave=${() => setOpen(false)}>
+            ${STATE_GROUPS.map(([g, list]) => html`<p class="vpg">${g}</p><div class="vpl">${list.map(([v, l, w]) => html`<button type="button"
+                class=${`vpi ${current === v ? "on" : ""}`} title=${`${w} (${v}:)`} onClick=${() => { setOpen(false); onPick(v); }}>${l}${used.has(v) && html`<i></i>`}</button>`)}</div>`)}
+        </div>`}</div>`;
+}
+
+const VariantBar = ({ s, actions }) => {
+    const ui = useUi(), prefix = variant(ui);
+    // the breakpoints and states this element has classes for
+    const used = { bp: new Set(), st: new Set() };
+    String(s.classes || "").split(/\s+/).filter(Boolean).forEach((t) => {
+        const v = parseToken(t).variant.split(":").filter(Boolean);
+        v.forEach((x) => (BREAKPOINT_WIDTH[x] !== undefined ? used.bp.add(x) : used.st.add(x)));
+    });
+    const chip = (on, dot, label, title, onClick) => html`<button type="button" class=${`vchip ${on ? "on" : ""}`} title=${title} onClick=${onClick}>${label}${dot && html`<i></i>`}</button>`;
+    // states beyond the four main ones that this element uses, or that is picked: a chip of their own, one click away
+    const others = [...new Set([...used.st, ui.st].filter((x) => x && !MAIN_STATES.some(([m]) => m === x)))];
+    const where = [ui.bp && `from ${BREAKPOINT_WIDTH[ui.bp]}px wide`, ui.st && STATE_WORDS[ui.st]].filter(Boolean).join(", ");
+    const hidden = ui.bp && ui.frameW && ui.frameW < BREAKPOINT_WIDTH[ui.bp]; // the frame is narrower: these classes don't show there
+    return html`<div class="vbar2">
+        <div class="vrow"><span class="vl">Screen</span><div class="vchips">${SCREENS.map(([v, l]) => chip(ui.bp === v, v && used.bp.has(v), l,
+            v ? `${l}: ${BREAKPOINT_WIDTH[v]}px and wider (${v}:)${used.bp.has(v) ? " · this element has classes here" : ""}` : "Every screen size (plain classes)",
+            () => actions.setBreakpoint(ui.bp === v ? "" : v)))}</div></div>
+        <div class="vrow vtop"><span class="vl">State</span><div class="vstates">
+            <div class="vchips">${MAIN_STATES.map(([v, l]) => chip(ui.st === v, v && used.st.has(v), l,
+                v ? `${STATE_WORDS[v]} (${v}:)${used.st.has(v) ? " · this element has classes here" : ""}` : "Its normal look (no state)", () => actions.setState(ui.st === v ? "" : v)))}
+                <${StateMenu} used=${used.st} current=${ui.st} onPick=${(v) => actions.setState(v)} /></div>
+            ${others.length > 0 && html`<div class="vchips vextra">${others.map((v) => chip(ui.st === v, used.st.has(v), (STATE_INFO[v] || {}).label || v,
+                `${STATE_WORDS[v] || v} (${v}:)${used.st.has(v) ? " · this element has classes here" : ""}`, () => actions.setState(ui.st === v ? "" : v)))}</div>`}
+        </div></div>
+        ${prefix && html`<p class="vnote on">Editing <code>${prefix}</code> styles: ${where}.${ui.st && SHOWABLE.has(ui.st) ? " The selected element shows this state on the canvas." : ""} Fields show this element's ${prefix} values; faint ones are inherited.
+            ${hidden ? html` The frame is narrower than ${BREAKPOINT_WIDTH[ui.bp]}px, so they don't show in it.` : null}
+            <button type="button" onClick=${() => { actions.setBreakpoint(""); actions.setState(""); }}>Back to all</button></p>`}
+    </div>`;
+};
+
+/** The element's text and the attributes that matter for its kind; each applies as you type. */
+const Content = ({ s, actions }) => {
+    const fields = [];
+    if (s.tag === "img") fields.push(["src", "Image URL"], ["alt", "Alt text"]);
+    if (s.tag === "a") fields.push(["href", "Link"], ["target", "Target"]);
+    if (["input", "textarea"].includes(s.tag)) fields.push(["placeholder", "Placeholder"], ["type", "Type"], ["value", "Value"]);
+    const text = s.leaf && !["img", "input", "hr", "br"].includes(s.tag);
+    if (!text && !fields.length) return null;
+    return html`<div class="sec"><div class="secb nopad"><p class="sub first">Content</p>
+        ${text && html`<${TextArea} value=${s.text} placeholder="Text" onInput=${actions.setText} />`}
+        ${fields.map(([a, l]) => html`<${Field} label=${l}><${TextInput} value=${s.attrs[a] || ""} onInput=${(v) => actions.setAttr(a, v)} /></${Field}>`)}
+    </div></div>`;
+};
+
+/** Everything above the Design tab's sections. */
+export function DesignTop({ s, actions }) {
+    return html`<${Crumbs} s=${s} actions=${actions} /><${ElementBar} s=${s} actions=${actions} /><${Legend} />
+        <${VariantBar} s=${s} actions=${actions} /><${Content} s=${s} actions=${actions} />`;
+}

package/design/device-frame.js

@@ -0,0 +1,40 @@
+// A phone and a tablet drawn around a page at the device's real screen size: bezel, notch or camera, side buttons. Used by the
+// prototype viewer and the gallery's device switch. Desktop has no frame.
+export const DEVICES = {
+    mobile: { w: 390, h: 844, bz: 14, r: 56, screenR: 44, ring: "#cdbfd8", notch: true },
+    tablet: { w: 768, h: 1024, bz: 22, r: 42, screenR: 22, ring: "#d4d4d8", notch: false },
+};
+
+/**
+ * The CSS of each part, at full size (the caller scales the shell, e.g. `transform: scale(k)`). Positions are inside the shell,
+ * whose size is `w` by `h`; the screen is `dev.w` by `dev.h`.
+ */
+export function deviceParts(dev, opts = {}) {
+    const w = dev.w + 2 * dev.bz, h = dev.h + 2 * dev.bz;
+    return {
+        w, h,
+        shell: `position:absolute;left:0;top:0;width:${w}px;height:${h}px;transform-origin:0 0;background:#161618;border-radius:${dev.r}px;box-shadow:0 0 0 3px ${dev.ring},inset 0 0 0 2px #2b2b2f,${opts.shadow || "0 28px 70px rgba(0,0,0,.55)"};`,
+        screen: `position:absolute;left:${dev.bz}px;top:${dev.bz}px;width:${dev.w}px;height:${dev.h}px;border-radius:${dev.screenR}px;overflow:hidden;background:#fff;`,
+        frame: `position:absolute;left:0;top:0;width:${dev.w}px;height:${dev.h}px;border:0;background:#fff;`,
+        notch: dev.notch ? `display:block;position:absolute;z-index:2;pointer-events:none;top:${dev.bz}px;left:${w / 2 - 63}px;width:126px;height:30px;background:#161618;border-radius:0 0 20px 20px;box-shadow:inset 0 -1px 0 #2b2b2f;` : "display:none",
+        cam: dev.notch
+            ? `display:block;position:absolute;z-index:3;pointer-events:none;top:${dev.bz + 9}px;left:${w / 2 + 30}px;width:11px;height:11px;border-radius:50%;background:#0b1220;box-shadow:inset 0 0 0 2px #2a3344;`
+            : `display:block;position:absolute;pointer-events:none;top:${dev.bz / 2 - 3}px;left:${w / 2 - 3}px;width:6px;height:6px;border-radius:50%;background:#2a3344;`,
+        // a mute switch and two volume keys on the left, power on the right (a phone only); the strip is a little wider than the shell
+        side: dev.notch
+            ? `display:block;position:absolute;left:-8px;right:-8px;top:0;bottom:0;pointer-events:none;background:linear-gradient(${dev.ring},${dev.ring}) 0 100px/4px 26px no-repeat,linear-gradient(${dev.ring},${dev.ring}) 0 160px/4px 52px no-repeat,linear-gradient(${dev.ring},${dev.ring}) 0 226px/4px 52px no-repeat,linear-gradient(${dev.ring},${dev.ring}) ${w + 11}px 190px/4px 88px no-repeat;`
+            : "display:none",
+    };
+}
+
+/** The frame as elements (`opts.shadow`: its drop shadow), for a page that is not the prototype viewer: `{ root, screen }` — put an iframe (or anything) in `screen`. */
+export function buildDeviceFrame(kind, scale = 1, opts = {}) {
+    const dev = DEVICES[kind], p = deviceParts(dev, opts);
+    const make = (css) => { const e = document.createElement("div"); e.style.cssText = css; return e; };
+    const root = make(`position:relative;width:${p.w * scale}px;height:${p.h * scale}px;margin:16px auto;`);
+    const shell = make(p.shell + `transform:scale(${scale});`);
+    const screen = make(p.screen);
+    shell.append(screen, make(p.notch), make(p.cam), make(p.side));
+    root.appendChild(shell);
+    return { root, screen, dev, parts: p };
+}