windcraft-editor 0.0.0-stage → 0.1.0

package/core/exporters.js

@@ -0,0 +1,156 @@
+import { parseDocument } from "./split-sections.js";
+
+const VOID_TAGS = new Set(["area", "base", "br", "col", "embed", "hr", "img", "input", "link", "meta", "source", "track", "wbr"]);
+
+const ATTR_MAP = {
+    class: "className", for: "htmlFor", tabindex: "tabIndex", readonly: "readOnly", maxlength: "maxLength",
+    minlength: "minLength", autocomplete: "autoComplete", autofocus: "autoFocus", colspan: "colSpan",
+    rowspan: "rowSpan", viewbox: "viewBox", "stroke-width": "strokeWidth", "stroke-linecap": "strokeLinecap",
+    "stroke-linejoin": "strokeLinejoin", "fill-rule": "fillRule", "clip-rule": "clipRule", "stroke-miterlimit": "strokeMiterlimit",
+    "stop-color": "stopColor", "stop-opacity": "stopOpacity", "fill-opacity": "fillOpacity", "stroke-opacity": "strokeOpacity",
+    "xlink:href": "xlinkHref", crossorigin: "crossOrigin", srcset: "srcSet", datetime: "dateTime", enctype: "encType",
+    contenteditable: "contentEditable", spellcheck: "spellCheck", "accept-charset": "acceptCharset",
+};
+
+const EVENT_RE = /^on[a-z]+$/;
+
+/** Splits pasted source into markup, css and js, mirroring the browser-side parser. */
+export function splitSource(code = "") {
+    const styles = [];
+    const scripts = [];
+    const markup = code
+        .replace(/<style\b[^>]*>([\s\S]*?)<\/style>/gi, (_, css) => (styles.push(css.trim()), ""))
+        .replace(/<script\b([^>]*)>([\s\S]*?)<\/script>/gi, (_, attrs, js) => {
+            if (!/\bsrc\s*=/.test(attrs)) scripts.push(js.trim());
+            return "";
+        })
+        .trim();
+    return { markup, css: styles.join("\n\n"), js: scripts.join("\n\n") };
+}
+
+const kebabToCamel = (s) => (s.startsWith("--") ? s : s.replace(/-([a-z])/g, (_, c) => c.toUpperCase()));
+
+function styleToObject(style) {
+    const entries = style
+        .split(";")
+        .map((d) => d.trim())
+        .filter(Boolean)
+        .map((d) => {
+            const i = d.indexOf(":");
+            const key = kebabToCamel(d.slice(0, i).trim());
+            const val = d.slice(i + 1).trim().replace(/'/g, "\\'");
+            return `${/^[a-zA-Z_$][\w$]*$/.test(key) ? key : `'${key}'`}: '${val}'`;
+        });
+    return `{{ ${entries.join(", ")} }}`;
+}
+
+const escapeText = (t) => t.replace(/[{}]/g, (c) => `{'${c}'}`);
+
+function tagToJsx(tag) {
+    const m = tag.match(/^<(\/?)([a-zA-Z][\w:-]*)([\s\S]*?)(\/?)>$/);
+    if (!m) return tag;
+    const [, closing, name, rest, selfClose] = m;
+    if (closing) return VOID_TAGS.has(name.toLowerCase()) ? "" : `</${name}>`;
+    const attrs = [];
+    const attrRe = /([^\s=/]+)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|([^\s"'>]+)))?/g;
+    let a;
+    while ((a = attrRe.exec(rest))) {
+        const raw = a[1];
+        const value = a[2] ?? a[3] ?? a[4];
+        const lower = raw.toLowerCase();
+        if (EVENT_RE.test(lower)) continue;
+        const key = ATTR_MAP[lower] || (raw.startsWith("data-") || raw.startsWith("aria-") ? raw : raw);
+        if (value === undefined) attrs.push(key);
+        else if (lower === "style") attrs.push(`style=${styleToObject(value)}`);
+        else attrs.push(`${key}="${value.replace(/"/g, "&quot;")}"`);
+    }
+    const open = `<${name}${attrs.length ? " " + attrs.join(" ") : ""}`;
+    return VOID_TAGS.has(name.toLowerCase()) || selfClose ? `${open} />` : `${open}>`;
+}
+
+function htmlToJsx(markup) {
+    return markup
+        .split(/(<!--[\s\S]*?-->|<[^>]+>)/g)
+        .map((part) => {
+            if (!part) return "";
+            if (part.startsWith("<!--")) return `{/*${part.slice(4, -3)}*/}`;
+            if (part.startsWith("<")) return tagToJsx(part);
+            return escapeText(part);
+        })
+        .join("");
+}
+
+const indent = (s, n = 2) => s.split("\n").map((l) => (l ? " ".repeat(n) + l : l)).join("\n");
+
+export function toReact(code, name = "Component") {
+    const { markup, css, js } = splitSource(code);
+    const jsx = htmlToJsx(markup) + (css ? `\n<style>{\`${css.replace(/`/g, "\\`")}\`}</style>` : "");
+    const imports = js ? "import { useEffect } from 'react';\n\n" : "";
+    const effect = js ? `  useEffect(() => {\n${indent(js, 4)}\n  }, []);\n\n` : "";
+    return `${imports}export default function ${name}() {\n${effect}  return (\n    <>\n${indent(jsx, 6)}\n    </>\n  );\n}\n`;
+}
+
+export function toVue(code) {
+    const { markup, css, js } = splitSource(code);
+    const parts = [`<template>\n${indent(markup)}\n</template>`];
+    if (js) parts.push(`<script setup>\nimport { onMounted } from 'vue';\n\nonMounted(() => {\n${indent(js)}\n});\n</script>`);
+    if (css) parts.push(`<style scoped>\n${css}\n</style>`);
+    return parts.join("\n\n") + "\n";
+}
+
+export function toSvelte(code) {
+    const { markup, css, js } = splitSource(code);
+    const parts = [];
+    if (js) parts.push(`<script>\n  import { onMount } from 'svelte';\n\n  onMount(() => {\n${indent(js, 4)}\n  });\n</script>`);
+    parts.push(escapeText(markup));
+    if (css) parts.push(`<style>\n${css}\n</style>`);
+    return parts.join("\n\n") + "\n";
+}
+
+const TAILWIND_CDN = '<script src="https://cdn.tailwindcss.com"></script>';
+const escHtml = (t) => String(t).replace(/[&<>"]/g, (c) => ({ "&": "&amp;", "<": "&lt;", ">": "&gt;", '"': "&quot;" }[c]));
+const mentionsTailwind = (list) => list.some((tag) => /\bsrc\s*=\s*["'][^"']*tailwind/i.test(tag));
+
+/**
+ * The component as a complete, openable .html file (doctype, head, Tailwind, its own CSS and JS),
+ * like the file Claude Design exports. Full documents are kept as they are, only adding Tailwind if missing.
+ */
+export function toStandaloneHtml(code, { title = "Page" } = {}) {
+    const src = String(code || "");
+    if (/<html[\s>]/i.test(src)) {
+        if (/<script\b[^>]*\bsrc\s*=\s*["'][^"']*tailwind/i.test(src)) return src;
+        if (/<\/head>/i.test(src)) return src.replace(/<\/head>/i, `${TAILWIND_CDN}\n</head>`);
+        return src.replace(/<html[^>]*>/i, (m) => `${m}<head>${TAILWIND_CDN}</head>`);
+    }
+    const d = parseDocument(src);
+    return `<!DOCTYPE html>
+<html lang="en">
+<head>
+<meta charset="utf-8">
+<meta name="viewport" content="width=device-width, initial-scale=1">
+<title>${escHtml(title)}</title>
+${mentionsTailwind(d.scripts) ? "" : TAILWIND_CDN}
+${d.links.join("\n")}
+${d.styles.join("\n")}
+</head>
+<body>
+${d.body}
+${d.scripts.join("\n")}
+</body>
+</html>
+`;
+}
+
+export const FORMATS = ["html", "standalone", "react", "vue", "svelte"];
+
+export function exportComponent(code, format = "html", name = "Component") {
+    const safeName = String(name).replace(/[^a-zA-Z0-9]+(.)?/g, (_, c) => (c ? c.toUpperCase() : "")).replace(/^[^a-zA-Z]+/, "") || "Component";
+    const cap = safeName[0].toUpperCase() + safeName.slice(1);
+    switch (format) {
+        case "react": return toReact(code, cap);
+        case "vue": return toVue(code);
+        case "svelte": return toSvelte(code);
+        case "standalone": return toStandaloneHtml(code, { title: name });
+        default: return code;
+    }
+}

package/core/pages.js

@@ -0,0 +1,39 @@
+// What saving several pages of one design needs, as plain functions: the head they share, their order, and their group.
+
+export const MAX_GROUP = 60;
+/** A page's group name ("Public site", "Customer area"): trimmed and kept short; empty means none. */
+export const normalizeGroup = (g) => String(g ?? "").trim().replace(/\s+/g, " ").slice(0, MAX_GROUP);
+
+/**
+ * Puts `shared` (fonts, the Tailwind script and config, a stylesheet...) at the top of a page's <head>, so every page is
+ * complete on its own. The head is made when the page has none (after <html>, else after a doctype, else before everything).
+ * A page that already contains it is left as it is, so saving a page again doesn't add it twice.
+ */
+export function withSharedHead(html, shared) {
+    const add = String(shared ?? "").trim();
+    const page = String(html ?? "");
+    if (!add || page.includes(add)) return page;
+    const insert = (at, text) => page.slice(0, at) + text + page.slice(at);
+    const head = /<head\b[^>]*>/i.exec(page);
+    if (head) return insert(head.index + head[0].length, `\n${add}`);
+    const root = /<html\b[^>]*>/i.exec(page);
+    if (root) return insert(root.index + root[0].length, `\n<head>\n${add}\n</head>`);
+    const doctype = /^\s*<!doctype[^>]*>/i.exec(page);
+    if (doctype) return insert(doctype[0].length, `\n${add}`);
+    return `${add}\n${page}`;
+}
+
+/**
+ * The project's pages in their new order. `sequence`: every page id in the order they are in now (pages new in this save last).
+ * `named`: the ids in the order they should come. The named pages take, in that order, the places the named pages hold now;
+ * the others do not move. So saving pages again in another order reorders just those, and saving a few of them cannot throw
+ * the rest out of place.
+ */
+export function placeInOrder(sequence, named) {
+    const wanted = [...new Set(named)].filter((id) => sequence.includes(id));
+    const set = new Set(wanted);
+    const out = [...sequence];
+    let n = 0;
+    sequence.forEach((id, i) => { if (set.has(id)) out[i] = wanted[n++]; });
+    return out;
+}

package/core/prop-tailwind.js

@@ -0,0 +1,158 @@
+// The Properties panel works in CSS properties (width, background-color...). When an edit goes to Tailwind, this turns the
+// property and the typed value into a class group of class-groups.js and the value to build it with. Anything without a
+// clean Tailwind form (a transform, a filter, a font stack) returns null, and the edit is written as CSS instead.
+import { GROUPS, parseToken, STEPS, getGroup } from "./class-groups.js";
+
+const same = (prefix) => (v) => `${prefix}${v}`;
+const pick = (map) => (v) => map[v] || null;
+
+// properties whose values are words: CSS value -> the whole Tailwind class
+const WORDS = {
+    display: ["display", pick({ block: "block", "inline-block": "inline-block", inline: "inline", flex: "flex", "inline-flex": "inline-flex", grid: "grid", "inline-grid": "inline-grid", contents: "contents", none: "hidden", table: "table", "flow-root": "flow-root" })],
+    position: ["position", pick({ static: "static", relative: "relative", absolute: "absolute", fixed: "fixed", sticky: "sticky" })],
+    overflow: ["overflow", same("overflow-")],
+    "flex-direction": ["flexDir", pick({ row: "flex-row", column: "flex-col", "row-reverse": "flex-row-reverse", "column-reverse": "flex-col-reverse" })],
+    "flex-wrap": ["flexWrap", same("flex-")],
+    "justify-content": ["justify", pick({ "flex-start": "justify-start", start: "justify-start", center: "justify-center", "flex-end": "justify-end", end: "justify-end", "space-between": "justify-between", "space-around": "justify-around", "space-evenly": "justify-evenly", stretch: "justify-stretch", normal: "justify-normal" })],
+    "align-items": ["items", pick({ "flex-start": "items-start", start: "items-start", center: "items-center", "flex-end": "items-end", end: "items-end", baseline: "items-baseline", stretch: "items-stretch" })],
+    "align-self": ["self", pick({ auto: "self-auto", "flex-start": "self-start", start: "self-start", center: "self-center", "flex-end": "self-end", end: "self-end", stretch: "self-stretch", baseline: "self-baseline" })],
+    "text-align": ["textAlign", same("text-")],
+    "flex-grow": ["grow", pick({ 0: "grow-0", 1: "grow" })],
+    "text-decoration-line": ["textDecoration", pick({ none: "no-underline", underline: "underline", "line-through": "line-through", overline: "overline" })],
+    "text-transform": ["textTransform", pick({ none: "normal-case", uppercase: "uppercase", lowercase: "lowercase", capitalize: "capitalize" })],
+    "font-style": ["fontStyle", pick({ italic: "italic", normal: "not-italic" })],
+    "white-space": ["whitespace", same("whitespace-")],
+    "font-weight": ["fontWeight", (v) => ({ 100: "font-thin", 200: "font-extralight", 300: "font-light", 400: "font-normal", 500: "font-medium", 600: "font-semibold", 700: "font-bold", 800: "font-extrabold", 900: "font-black" })[v] || (/^font-/.test(v) ? v : `font-${v}`)],
+    "font-family": ["fontFamily", pick({ "font-sans": "font-sans", sans: "font-sans", "sans-serif": "font-sans", serif: "font-serif", "font-serif": "font-serif", mono: "font-mono", monospace: "font-mono", "font-mono": "font-mono" })],
+    "background-size": ["bgSize", same("bg-")],
+    "background-repeat": ["bgRepeat", same("bg-")],
+    "border-top-style": ["borderStyle", same("border-")],
+    cursor: ["cursor", same("cursor-")],
+    "mix-blend-mode": ["mixBlend", same("mix-blend-")],
+    "pointer-events": ["pointerEvents", same("pointer-events-")],
+    "object-fit": ["objectFit", same("object-")],
+    visibility: ["visibility", pick({ visible: "visible", hidden: "invisible" })],
+    "user-select": ["userSelect", same("select-")],
+    "box-shadow": ["shadow", (v) => (/^(sm|md|lg|xl|2xl|inner|none)$/.test(v) ? v : v === "default" || v === "shadow" ? "default" : null)], // the shadow group takes the size, not the class
+};
+
+// properties whose values are sizes: the group, and whether a negative value is allowed
+const LENGTHS = {
+    width: "w", height: "h", "min-width": "minW", "max-width": "maxW", "min-height": "minH", "max-height": "maxH",
+    gap: "gap", "column-gap": "gapX", "row-gap": "gapY", top: "top", right: "right", bottom: "bottom", left: "left",
+    "padding-top": "pt", "padding-right": "pr", "padding-bottom": "pb", "padding-left": "pl",
+    "margin-top": "mt", "margin-right": "mr", "margin-bottom": "mb", "margin-left": "ml",
+    "font-size": "fontSize", "line-height": "leading", "letter-spacing": "tracking", "border-radius": "radius", "z-index": "z",
+};
+const COLORS = { color: "textColor", "background-color": "bgColor", "border-top-color": "borderColor" };
+const LENGTH_WORDS = /^(auto|full|screen|min|max|fit|px|none|xs|sm|md|lg|xl|[2-9]xl|base|prose|tight|snug|normal|relaxed|loose|tighter|wide|wider|widest|\d+\/\d+)$/;
+
+// groups on Tailwind's spacing scale: an exact pixel size becomes the scale step (16px -> p-4), anything else an arbitrary value
+const SCALED = new Set(["w", "h", "minW", "maxW", "minH", "maxH", "gap", "gapX", "gapY", "inset", "top", "right", "bottom", "left", "p", "px", "py", "pt", "pr", "pb", "pl", "m", "mx", "my", "mt", "mr", "mb", "ml", "spaceX", "spaceY", "translateX", "translateY"]);
+// sizes with a name, where the name means the same in Tailwind v3 and v4 (v3's rounded-sm is 2px, v4's 4px: left out)
+const RADIUS_NAMES = { 6: "md", 8: "lg", 12: "xl", 16: "2xl", 24: "3xl" };
+const FONT_NAMES = { 12: "xs", 14: "sm", 16: "base", 18: "lg", 20: "xl", 24: "2xl", 30: "3xl", 36: "4xl", 48: "5xl", 60: "6xl", 72: "7xl", 96: "8xl", 128: "9xl" };
+/** A pixel size as the value of a group: 16 -> "4", 1 -> "px", -88 -> "-88px", 13 -> "13px". */
+export function fromPx(key, n) {
+    const a = Math.abs(n), sign = n < 0 ? "-" : "";
+    if (SCALED.has(key)) return sign + (a === 1 ? "px" : STEPS.includes(String(a / 4)) ? String(a / 4) : `${a}px`);
+    if (key === "borderWidth") return [0, 1, 2, 4, 8].includes(a) ? String(a) : `${a}px`;
+    if (/^border[TRBL]$/.test(key)) return [0, 2, 4, 8].includes(a) ? String(a) : `${a}px`;
+    if (/^radius/.test(key)) return a === 0 ? "none" : a >= 9999 ? "full" : RADIUS_NAMES[a] || `${a}px`;
+    if (key === "fontSize") return FONT_NAMES[a] || `${a}px`;
+    return `${sign}${a}px`;
+}
+
+/** Whether a bare number is a step of the group's own scale (w-64, leading-6) rather than pixels (font size has no number scale). */
+export const hasScale = (key) => SCALED.has(key) || key === "leading" || key === "z" || key === "opacity";
+
+// the shorter classes that also set a property (px-8 sets padding-left, rounded-lg every corner), looked at after its own
+const SHORTER = { pl: ["px", "p"], pr: ["px", "p"], pt: ["py", "p"], pb: ["py", "p"], ml: ["mx", "m"], mr: ["mx", "m"], mt: ["my", "m"], mb: ["my", "m"],
+    top: ["inset"], right: ["inset"], bottom: ["inset"], left: ["inset"], gapX: ["gap"], gapY: ["gap"],
+    radiusTL: ["radius"], radiusTR: ["radius"], radiusBR: ["radius"], radiusBL: ["radius"], borderT: ["borderWidth"], borderR: ["borderWidth"], borderB: ["borderWidth"], borderL: ["borderWidth"] };
+// properties whose own group is a side or corner one (the general groupOf writes them with the all-sides class)
+const SIDE_GROUP = { "column-gap": "gapX", "row-gap": "gapY", "border-top-left-radius": "radiusTL", "border-top-right-radius": "radiusTR", "border-bottom-right-radius": "radiusBR",
+    "border-bottom-left-radius": "radiusBL", "border-top-width": "borderT", "border-right-width": "borderR", "border-bottom-width": "borderB", "border-left-width": "borderL" };
+/** The class in `classes` that gives `prop` at `variant` (md:, hover:), also through a shorter one (px-8 for padding-left), or null. */
+export function tokenFor(classes, prop, variant = "") {
+    const g = SIDE_GROUP[prop] || groupOf(prop);
+    if (!g) return null;
+    for (const k of [g, ...(SHORTER[g] || [])]) { const r = GROUPS[k] && getGroup(classes, k, variant); if (r) return { ...r, group: k }; }
+    return null;
+}
+
+/** The class group a property is written with in Tailwind, or null when it has none. */
+export function groupOf(prop) {
+    if (WORDS[prop]) return WORDS[prop][0];
+    if (LENGTHS[prop]) return LENGTHS[prop];
+    if (COLORS[prop]) return COLORS[prop];
+    if (prop === "border-top-width") return "borderWidth";
+    if (prop === "opacity") return "opacity";
+    if (prop === "rotate") return "rotate";
+    if (prop === "outline-offset") return "outlineOffset";
+    if (prop === "grid-template-columns") return "gridCols";
+    if (prop === "aspect-ratio") return "aspect";
+    return null;
+}
+
+/**
+ * The value to hand setGroup() for this property, or null to write CSS instead.
+ * `scale`: on a row a Tailwind class already drives, a bare number is Tailwind's scale (w-64); elsewhere it means pixels.
+ */
+export function twValue(prop, raw, scale) {
+    const v = String(raw).trim();
+    if (!v) return null;
+    if (prop === "outline-offset") { // Tailwind's steps are classes (outline-offset-2), any other size an arbitrary value
+        const m = /^(\d*\.?\d+)(px)?$/.exec(v);
+        return !m ? null : [0, 1, 2, 4, 8].includes(Number(m[1])) ? String(Number(m[1])) : `[${Number(m[1])}px]`;
+    }
+    if (prop === "rotate") { // degrees: Tailwind's own steps are classes (rotate-45), any other angle an arbitrary value (rotate-[15deg])
+        const m = /^(-?\d*\.?\d+)(deg)?$/.exec(v);
+        return !m ? null : [0, 1, 2, 3, 6, 12, 45, 90, 180].includes(Math.abs(Number(m[1]))) ? String(Number(m[1])) : `${Number(m[1])}deg`;
+    }
+    if (WORDS[prop]) return WORDS[prop][1](v);
+    // z-index: only 0-50 in steps of 10 are classes in every Tailwind version; any other whole number is an arbitrary value (z-[9999], -z-[1])
+    if (prop === "z-index" && /^-?\d+$/.test(v)) return /^(-?)(0|10|20|30|40|50)$/.test(v) ? v : `${v.startsWith("-") ? "-" : ""}[${Math.abs(Number(v))}]`;
+    if (LENGTHS[prop]) {
+        if (LENGTH_WORDS.test(v) || /^\[.*\]$/.test(v)) return v;
+        if (/^-?\d*\.?\d+$/.test(v)) return (scale && hasScale(LENGTHS[prop])) || prop === "z-index" ? v : fromPx(LENGTHS[prop], Number(v));
+        if (/^-?\d*\.?\d+px$/.test(v)) return fromPx(LENGTHS[prop], parseFloat(v));
+        if (/^-?\d*\.?\d+(px|rem|em|%|vh|vw|ch)$/.test(v) || /^(calc|var|min|max|clamp)\(/.test(v)) return v; // the group wraps it as [value]
+        return null;
+    }
+    if (COLORS[prop]) {
+        if (/^(#|rgba?\(|hsla?\()/.test(v)) return v;
+        if (/^(black|white|transparent|current|inherit)$/.test(v) || /^[a-z]+-\d{2,3}(\/\d+)?$/.test(v)) return v;
+        return null;
+    }
+    if (prop === "border-top-width") { const n = v.replace(/px$/, ""); return /^(0|1|2|4|8)$/.test(n) ? n : /^\d+(\.\d+)?(px)?$/.test(v) ? `${n}px` : null; }
+    if (prop === "opacity") { // Tailwind's own steps are classes (opacity-50), anything else an arbitrary fraction (opacity-[0.33])
+        const n = Number(v);
+        if (!Number.isFinite(n)) return null;
+        const pct = n <= 1 ? Math.round(n * 100) : Math.round(n);
+        return [0, 5, 10, 20, 25, 30, 40, 50, 60, 70, 75, 80, 90, 95, 100].includes(pct) ? String(pct) : `[${pct / 100}]`;
+    } // the panel sends a fraction (0.9), a typed class number is above 1
+    if (prop === "grid-template-columns") return /^\d+$/.test(v) || v === "none" ? v : null;
+    if (prop === "aspect-ratio") {
+        // 16 / 9 -> video, 1 / 1 -> square, any other two whole numbers -> [w/h]
+        const m = v.match(/^(\d+)\s*\/\s*(\d+)$/) || (/^\d+$/.test(v) ? [v, v, "1"] : null);
+        if (v === "auto") return "auto";
+        if (!m) return null;
+        const [w, h] = [Number(m[1]), Number(m[2])];
+        return w === h ? "square" : w * 9 === h * 16 ? "video" : `[${w}/${h}]`;
+    }
+    return null;
+}
+
+/** What a Tailwind-driven row shows: the class's own value (64, 1/2, red-500, 500px), not the computed pixels. */
+export function twShown(prop, token) {
+    const key = groupOf(prop);
+    if (!key || !token) return null;
+    const m = parseToken(token).base.match(GROUPS[key].re);
+    if (!m) return null;
+    const v = GROUPS[key].read(m);
+    return String(v).replace(/^\[(.*)\]$/, "$1").replace(/_/g, " ");
+}
+
+/** "md:hover:w-64" -> "md:hover:" */
+export const variantOf = (token) => (token ? parseToken(token).variant : "");

package/core/split-sections.js

@@ -0,0 +1,99 @@
+// Pure string logic (no DOM) so the same code runs on the server and in the browser.
+const VOID = new Set(["area", "base", "br", "col", "embed", "hr", "img", "input", "link", "meta", "source", "track", "wbr"]);
+const RAW = new Set(["script", "style"]);
+const SKIP_TOP = new Set(["script", "style", "link", "meta", "title", "noscript", "template"]);
+const TAG_RE = /<!--[\s\S]*?-->|<(\/?)([a-zA-Z][\w:-]*)((?:"[^"]*"|'[^']*'|[^'">])*)>/g;
+
+const stripTags = (s) => s.replace(/<[^>]*>/g, " ").replace(/&nbsp;/g, " ").replace(/\s+/g, " ").trim();
+
+/** Top-level elements of a markup string, as { tag, html, start, end }. */
+export function topLevelElements(markup) {
+    const out = [];
+    let depth = 0;
+    let current = null;
+    TAG_RE.lastIndex = 0;
+    let m;
+    while ((m = TAG_RE.exec(markup))) {
+        if (m[0].startsWith("<!--")) continue;
+        const closing = m[1] === "/";
+        const tag = m[2].toLowerCase();
+        const selfClosing = VOID.has(tag) || /\/\s*$/.test(m[3]);
+
+        if (!closing && RAW.has(tag)) {
+            const close = markup.toLowerCase().indexOf(`</${tag}`, TAG_RE.lastIndex);
+            const end = close === -1 ? markup.length : markup.indexOf(">", close) + 1;
+            if (depth === 0) out.push({ tag, html: markup.slice(m.index, end), start: m.index, end });
+            TAG_RE.lastIndex = end;
+            continue;
+        }
+
+        if (!closing) {
+            if (depth === 0) current = { tag, start: m.index };
+            if (selfClosing) {
+                if (depth === 0) out.push({ tag, html: m[0], start: m.index, end: TAG_RE.lastIndex });
+            } else depth++;
+        } else if (depth > 0) {
+            depth--;
+            if (depth === 0 && current) {
+                out.push({ tag: current.tag, html: markup.slice(current.start, TAG_RE.lastIndex), start: current.start, end: TAG_RE.lastIndex });
+                current = null;
+            }
+        }
+    }
+    return out;
+}
+
+function innerHtml(el) {
+    const open = el.html.indexOf(">") + 1;
+    const close = el.html.toLowerCase().lastIndexOf(`</${el.tag}`);
+    return close > open ? el.html.slice(open, close) : "";
+}
+
+/** Splits a page body into its main sections, or [] when it should stay one piece. */
+const SEMANTIC = new Set(["section", "header", "footer", "nav", "article"]);
+const SIDE_BY_SIDE = /\bclass\s*=\s*["'][^"']*\b(?:flex|inline-flex|grid)\b/;
+
+/**
+ * Splits a page body into its main sections, or [] when it should stay one piece.
+ * Only vertically stacked, semantic sections qualify. App shells (a sidebar next to a main area,
+ * flex or grid wrappers) and plain div soup are left whole.
+ */
+export function splitSections(markup, maxSections = 20) {
+    let els = topLevelElements(markup).filter((e) => !SKIP_TOP.has(e.tag));
+    for (let i = 0; i < 3 && els.length === 1; i++) {
+        const opening = els[0].html.slice(0, els[0].html.indexOf(">") + 1);
+        if (SIDE_BY_SIDE.test(opening) && !/\bflex-col\b/.test(opening)) return [];
+        const kids = topLevelElements(innerHtml(els[0])).filter((e) => !SKIP_TOP.has(e.tag));
+        if (!kids.length) break;
+        els = kids;
+    }
+    if (els.length < 2) return [];
+    if (els.some((e) => e.tag === "aside")) return [];
+    if (els.filter((e) => SEMANTIC.has(e.tag)).length < 2) return [];
+    return els.slice(0, maxSections).map((e, i) => {
+        const heading = stripTags((e.html.match(/<h[1-6]\b[^>]*>([\s\S]*?)<\/h[1-6]>/i) || [])[1] || "");
+        const aria = (e.html.match(/^<[^>]*\baria-label\s*=\s*"([^"]+)"/i) || [])[1];
+        const label = { header: "Header", nav: "Navigation", footer: "Footer", main: "Main", section: `Section ${i + 1}`, article: `Article ${i + 1}`, div: `Block ${i + 1}` }[e.tag] || `Block ${i + 1}`;
+        return { name: (heading || aria || label).slice(0, 60), kind: e.tag, html: e.html };
+    });
+}
+
+/** Separates a full document into title, assets (styles/links/scripts) and body markup. */
+export function parseDocument(html = "") {
+    const title = stripTags((html.match(/<title[^>]*>([\s\S]*?)<\/title>/i) || [])[1] || "");
+    const description = (html.match(/<meta[^>]+name=["']description["'][^>]*content=["']([^"']*)["']/i) || [])[1] || "";
+    const styles = [...html.matchAll(/<style\b[^>]*>[\s\S]*?<\/style>/gi)].map((m) => m[0]);
+    const links = [...html.matchAll(/<link\b[^>]*rel\s*=\s*["']stylesheet["'][^>]*>/gi)].map((m) => m[0]);
+    const scripts = [...html.matchAll(/<script\b[^>]*>[\s\S]*?<\/script>/gi)].map((m) => m[0]);
+
+    const bodyMatch = html.match(/<body\b[^>]*>([\s\S]*?)<\/body>/i);
+    let body = bodyMatch ? bodyMatch[1] : html.replace(/<head\b[\s\S]*?<\/head>/i, "").replace(/<\/?(?:html|body)\b[^>]*>/gi, "").replace(/<!doctype[^>]*>/i, "");
+    body = body
+        .replace(/<style\b[^>]*>[\s\S]*?<\/style>/gi, "")
+        .replace(/<script\b[^>]*>[\s\S]*?<\/script>/gi, "")
+        .replace(/<link\b[^>]*>/gi, "")
+        .trim();
+
+    const heading = stripTags((body.match(/<h[1-2]\b[^>]*>([\s\S]*?)<\/h[1-2]>/i) || [])[1] || "");
+    return { title, description, heading, styles, links, scripts, body };
+}

package/core/theme.js

@@ -0,0 +1,87 @@
+// A project's theme: a short list of choices that every part (the canvas, the previews, the catalog, the exports) reads.
+//   brand    one colour (hex); the 11 steps of its scale (brand-50 … brand-950) are made from it, with the colour itself as brand-600
+//   gray     which of Tailwind's neutral palettes `gray-*` means in this project (slate, gray, zinc, neutral, stone)
+//   font     the sans font (a Google Fonts family, or "System")
+//   radius   how round corners are (none, sm, md, lg, xl): the rounded-* sizes follow it
+// tailwindConfig() is the object for `tailwind.config` (the play CDN, or a project's own tailwind.config.js); themeHead() is the HTML
+// a preview document needs for it (the config, the font link). Pure functions: nothing here touches a page or a database.
+
+export const GRAYS = ["slate", "gray", "zinc", "neutral", "stone"];
+export const RADII = ["none", "sm", "md", "lg", "xl"];
+export const SYSTEM_FONT = "System";
+export const DEFAULT_THEME = Object.freeze({ brand: "#4f46e5", gray: "slate", font: "Inter", radius: "md" });
+
+const STEPS = ["50", "100", "200", "300", "400", "500", "600", "700", "800", "900", "950"];
+const PALETTES = {
+    slate: ["f8fafc", "f1f5f9", "e2e8f0", "cbd5e1", "94a3b8", "64748b", "475569", "334155", "1e293b", "0f172a", "020617"],
+    gray: ["f9fafb", "f3f4f6", "e5e7eb", "d1d5db", "9ca3af", "6b7280", "4b5563", "374151", "1f2937", "111827", "030712"],
+    zinc: ["fafafa", "f4f4f5", "e4e4e7", "d4d4d8", "a1a1aa", "71717a", "52525b", "3f3f46", "27272a", "18181b", "09090b"],
+    neutral: ["fafafa", "f5f5f5", "e5e5e5", "d4d4d4", "a3a3a3", "737373", "525252", "404040", "262626", "171717", "0a0a0a"],
+    stone: ["fafaf9", "f5f5f4", "e7e5e4", "d6d3d1", "a8a29e", "78716c", "57534e", "44403c", "292524", "1c1917", "0c0a09"],
+};
+const RADIUS_PX = { none: 0, sm: 3, md: 6, lg: 10, xl: 16 };
+const SYSTEM_STACK = ["ui-sans-serif", "system-ui", "-apple-system", "Segoe UI", "Roboto", "Helvetica Neue", "Arial", "sans-serif"];
+
+const HEX = /^#?([0-9a-f]{6})$/i;
+const FONT_NAME = /^[A-Za-z0-9][A-Za-z0-9 ]{0,39}$/;
+
+/** A theme from anything: every field checked, anything invalid replaced by the default. */
+export function normalizeTheme(input) {
+    const t = input && typeof input === "object" ? input : {};
+    const hex = HEX.exec(String(t.brand || ""));
+    return {
+        brand: hex ? `#${hex[1].toLowerCase()}` : DEFAULT_THEME.brand,
+        gray: GRAYS.includes(t.gray) ? t.gray : DEFAULT_THEME.gray,
+        font: typeof t.font === "string" && (t.font === SYSTEM_FONT || FONT_NAME.test(t.font.trim())) ? t.font.trim() : DEFAULT_THEME.font,
+        radius: RADII.includes(t.radius) ? t.radius : DEFAULT_THEME.radius,
+    };
+}
+
+const toRgb = (hex) => [1, 3, 5].map((i) => parseInt(hex.slice(i, i + 2), 16));
+const toHex = (rgb) => `#${rgb.map((v) => Math.round(Math.min(255, Math.max(0, v))).toString(16).padStart(2, "0")).join("")}`;
+const mix = (a, b, t) => a.map((v, i) => v + (b[i] - v) * t);
+
+/** The 11 steps of the brand colour: the colour is 600; lighter steps mix it with white, darker ones with black. */
+export function brandScale(hex) {
+    const base = toRgb(normalizeTheme({ brand: hex }).brand), white = [255, 255, 255], black = [0, 0, 0];
+    const mixes = { 50: [white, 0.92], 100: [white, 0.84], 200: [white, 0.68], 300: [white, 0.5], 400: [white, 0.28], 500: [white, 0.12], 700: [black, 0.18], 800: [black, 0.36], 900: [black, 0.52], 950: [black, 0.68] };
+    return Object.fromEntries(STEPS.map((s) => [s, s === "600" ? toHex(base) : toHex(mix(base, ...mixes[s]))]));
+}
+
+/** One of Tailwind's neutral palettes as { 50: "#…", … 950: "#…" }. */
+export const grayScale = (name) => Object.fromEntries(STEPS.map((s, i) => [s, `#${PALETTES[GRAYS.includes(name) ? name : DEFAULT_THEME.gray][i]}`]));
+
+/** The rounded-* sizes for a radius choice, in px. */
+export function radiusScale(radius) {
+    const r = RADIUS_PX[RADII.includes(radius) ? radius : DEFAULT_THEME.radius];
+    const px = (v) => `${Math.round(v * 100) / 100}px`;
+    return { none: "0px", sm: px(r * 0.5), DEFAULT: px(r * 0.66), md: px(r), lg: px(r * 1.5), xl: px(r * 2), "2xl": px(r * 2.67), "3xl": px(r * 4), full: "9999px" };
+}
+
+/** The `tailwind.config` object for a theme (dark mode follows a `dark` class, so a page can switch it). */
+export function tailwindConfig(theme) {
+    const t = normalizeTheme(theme);
+    return {
+        darkMode: "class",
+        theme: {
+            extend: {
+                colors: { brand: brandScale(t.brand), gray: grayScale(t.gray) },
+                fontFamily: { sans: t.font === SYSTEM_FONT ? SYSTEM_STACK : [t.font, ...SYSTEM_STACK] },
+                borderRadius: radiusScale(t.radius),
+            },
+        },
+    };
+}
+
+/** The Google Fonts stylesheet URL for the theme's font, or null for the system font. */
+export const fontUrl = (theme) => {
+    const f = normalizeTheme(theme).font;
+    return f === SYSTEM_FONT ? null : `https://fonts.googleapis.com/css2?family=${encodeURIComponent(f).replace(/%20/g, "+")}:wght@400;500;600;700&display=swap`;
+};
+
+/** What a preview document's <head> needs after the Tailwind script: the font and the config. */
+export function themeHead(theme) {
+    const url = fontUrl(theme);
+    const config = JSON.stringify(tailwindConfig(theme)).replace(/</g, "\\u003c");
+    return `${url ? `<link rel="stylesheet" href="${url}">\n` : ""}<script data-wc-theme>tailwind.config = ${config};<\/script>`;
+}