npm - windcraft-editor - Versions diffs - 0.0.0-stage → 0.1.1 - Mend

windcraft-editor 0.0.0-stage → 0.1.1

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (61) hide show

package/LICENSE +23 -0
package/README.md +53 -2
package/core/board-layout.js +71 -0
package/core/class-groups.js +210 -0
package/core/design-spec.js +303 -0
package/core/exporters.js +156 -0
package/core/pages.js +39 -0
package/core/prop-tailwind.js +158 -0
package/core/split-sections.js +99 -0
package/core/theme.js +87 -0
package/editor/design/agent.js +2118 -0
package/editor/design/classes-section.js +103 -0
package/editor/design/code-editor.js +293 -0
package/editor/design/code-view.js +158 -0
package/editor/design/color-picker.js +107 -0
package/editor/design/config.js +5 -0
package/editor/design/controls.js +132 -0
package/editor/design/css-props.js +111 -0
package/editor/design/design-tab.js +120 -0
package/editor/design/device-frame.js +40 -0
package/editor/design/editor/add-menu.js +151 -0
package/editor/design/editor/api.js +47 -0
package/editor/design/editor/base.js +55 -0
package/editor/design/editor/code-panel.js +206 -0
package/editor/design/editor/color-ui.js +135 -0
package/editor/design/editor/designs.js +606 -0
package/editor/design/editor/docs.js +121 -0
package/editor/design/editor/frame-handles.js +223 -0
package/editor/design/editor/frame-messages.js +195 -0
package/editor/design/editor/inspector.js +461 -0
package/editor/design/editor/layers.js +61 -0
package/editor/design/editor/pages-panel.js +161 -0
package/editor/design/editor/panel-resize.js +47 -0
package/editor/design/editor/plane.js +132 -0
package/editor/design/editor/present.js +52 -0
package/editor/design/editor/toolbar.js +267 -0
package/editor/design/editor.js +47 -0
package/editor/design/figma-sections.js +440 -0
package/editor/design/float-toolbar.js +163 -0
package/editor/design/group-controls.js +52 -0
package/editor/design/host.js +22 -0
package/editor/design/panel-model.js +130 -0
package/editor/design/panel-state.js +40 -0
package/editor/design/panel.js +212 -0
package/editor/design/presenter.js +312 -0
package/editor/design/prop-sections.js +18 -0
package/editor/design/selection-overlay.js +93 -0
package/editor/design/store.js +29 -0
package/editor/design/style-sections.js +315 -0
package/editor/design/tailwind-classes.js +65 -0
package/editor/embed-frame.js +43 -0
package/editor/embed.html +15 -0
package/editor/embed.js +60 -0
package/editor/index.js +62 -0
package/editor/playground/component-source.js +124 -0
package/editor/styles.css +402 -0
package/editor/template.js +247 -0
package/editor/vendor/codemirror.js +24 -0
package/editor/vendor/preact-htm.js +1 -0
package/editor/vendor/prettier.js +171 -0
package/package.json +39 -5

package/core/design-spec.js ADDED Viewed

@@ -0,0 +1,303 @@
+// @ts-check
+// The design spec: a design as JSON an AI can read and target reliably, and back to HTML. It replaces the old element
+// description (element-description/index.js), which only ran in the browser and lost spaces, comments and most SVG.
+//
+// It works on a tree the HTML was already read into: the browser's own (DOMParser) or the server's (node-html-parser).
+// Both are read through the few helpers below, so the browser and the server number elements the same way.
+//
+// Elements are numbered in document order (n1, n2...) every time a spec is made. The ids belong to that version of the
+// design: a patch says which version it was read from (design-spec.service.js), so an id never lands on the wrong element.
+import { GROUPS, parseToken } from "./class-groups.js";
+/**
+ * Class properties by variant: { base: { p: "6" }, md: { p: "8" }, "md:hover": { bgColor: "blue-600" } }.
+ * The keys inside are class groups (class-groups.js), the values what the group reads and builds.
+ * @typedef {Record<string, Record<string, string>>} Props
+ */
+/**
+ * One element of a spec, or a run of text between elements ({ text } alone).
+ * @typedef {object} SpecNode
+ * @property {string} [id] n1, n2... in document order; only for elements
+ * @property {string} [tag]
+ * @property {string} [role] title, button, card... (simple rules)
+ * @property {Props} [props] classes read as properties
+ * @property {string[]} [raw] classes no group reads back exactly
+ * @property {string} [css] the style attribute
+ * @property {Record<string, string>} [attrs]
+ * @property {string} [text]
+ * @property {SpecNode[]} [children]
+ * @property {string} [svg] an <svg>'s inner markup
+ * @property {number} [svgChars] its length, when the drawing is left out
+ */
+/**
+ * @typedef {object} Assets
+ * @property {string} [css]
+ * @property {string} [js]
+ * @property {string[]} [stylesheets]
+ * @property {string[]} [scripts]
+ */
+/**
+ * @typedef {object} Spec
+ * @property {Record<string, string[]>} tokens
+ * @property {Assets} assets
+ * @property {SpecNode[]} tree
+ * @property {string} [id]
+ * @property {string} [title]
+ * @property {number} [version]
+ * @property {string} [kind]
+ * @property {string} [warning]
+ */
+// ── Reading either tree ──────────────────────────────────────────────────────
+const tagOf = (n) => String(n.localName || n.rawTagName || "").toLowerCase();
+const attrsOf = (n) => {
+    const a = n.attributes;
+    if (!a) return {};
+    if (typeof a.length === "number") return Object.fromEntries(Array.from(a, (x) => [x.name, x.value])); // the browser's NamedNodeMap
+    return { ...a }; // node-html-parser: already { name: value }
+};
+const textOf = (n) => (n.data !== undefined ? n.data : n.text); // a text node's decoded text
+const rawOf = (n) => (n.rawText !== undefined ? n.rawText : n.textContent); // <style>/<script> content, as written
+const innerOf = (n) => n.innerHTML;
+const kidsOf = (n) => Array.from(n.childNodes || []);
+const ELEMENT = 1, TEXT = 3;
+/** Head-only and asset elements: never part of the tree (their content goes to `assets`). */
+const SKIP = new Set(["head", "style", "script", "link", "meta", "title", "base", "noscript", "template"]);
+const VOID = new Set(["area", "base", "br", "col", "embed", "hr", "img", "input", "link", "meta", "source", "track", "wbr"]);
+/** Elements whose text is kept exactly as written (spaces and line breaks matter). */
+const EXACT = new Set(["pre", "textarea", "code"]);
+const INLINE = new Set(["a", "abbr", "b", "br", "button", "code", "em", "i", "img", "input", "kbd", "label", "mark", "q", "s", "select", "small", "span", "strong", "sub", "sup", "svg", "time", "u", "textarea"]);
+/** The nodes a design's content starts at: the <body>'s children, or the top level for a fragment. */
+export function contentRoots(root) {
+    const body = root.body || (root.querySelector && root.querySelector("body"));
+    return kidsOf(body || root);
+}
+/**
+ * Visits every element of the tree in document order with its id (n1, n2...). An <svg> is one element: what's inside it
+ * has no ids. The spec builder and the patch engine both number elements with this, so their ids always agree.
+ */
+export function walkElements(roots, visit) {
+    let count = 0;
+    const go = (n, parentId) => {
+        if (n.nodeType !== ELEMENT || SKIP.has(tagOf(n))) return;
+        const id = `n${++count}`;
+        const into = visit(n, id, parentId) !== false;
+        if (into && tagOf(n) !== "svg") kidsOf(n).forEach((k) => go(k, id));
+    };
+    roots.forEach((r) => go(r, null));
+}
+// ── Classes as properties ────────────────────────────────────────────────────
+const GROUP_KEYS = Object.keys(GROUPS);
+/** "md:hover:" -> "md:hover", "" -> "base" */
+const atOf = (variant) => (variant ? variant.slice(0, -1) : "base");
+/**
+ * Splits a class list into properties by class group and variant ({ base: { p: "6" }, md: { p: "8" } }) and the classes
+ * no group reads back exactly (`raw`). Nothing is lost: every class is in one or the other.
+ */
+/** @param {string | null | undefined} classes @returns {{ props: Props, raw: string[] }} */
+export function readClasses(classes) {
+    /** @type {Props} */
+    const props = {};
+    /** @type {string[]} */
+    const raw = [];
+    for (const tok of String(classes || "").split(/\s+/).filter(Boolean)) {
+        const { variant, base } = parseToken(tok);
+        let placed = false;
+        for (const key of GROUP_KEYS) {
+            const m = base.match(GROUPS[key].re);
+            if (!m) continue;
+            const value = GROUPS[key].read(m);
+            const at = atOf(variant);
+            // only when writing it back gives the same class, and the variant doesn't already have one from this group
+            if (GROUPS[key].build(value) === base && !(props[at] && key in props[at])) {
+                (props[at] = props[at] || {})[key] = value;
+                placed = true;
+            }
+            break;
+        }
+        if (!placed) raw.push(tok);
+    }
+    return { props, raw };
+}
+/** The class list for properties and raw classes: the reverse of readClasses. */
+/** @param {Props} [props] @param {string[]} [raw] @returns {string} */
+export function writeClasses(props = {}, raw = []) {
+    const out = [];
+    const ats = Object.keys(props).sort((a, b) => (a === "base" ? -1 : b === "base" ? 1 : 0));
+    for (const at of ats) {
+        const variant = at === "base" ? "" : `${at}:`;
+        for (const [key, value] of Object.entries(props[at] || {})) {
+            if (!GROUPS[key]) throw new Error(`Unknown property "${key}"`);
+            const built = GROUPS[key].build(value);
+            if (!GROUPS[key].re.test(built)) throw new Error(`"${value}" is not a valid ${key}`);
+            out.push(variant + built);
+        }
+    }
+    return [...out, ...raw].join(" ");
+}
+// ── Roles: what an element is for, by simple rules ───────────────────────────
+const hasAny = (props, keys) => Object.values(props).some((p) => keys.some((k) => k in p));
+function roleOf(tag, attrs, props) {
+    if (/^h[1-6]$/.test(tag)) return "title";
+    if (tag === "svg") return "icon";
+    if (tag === "img" || tag === "picture" || tag === "video") return "media";
+    if (tag === "button" || (tag === "input" && /^(submit|button|reset)$/i.test(attrs.type || ""))) return "button";
+    if (tag === "a") return hasAny(props, ["bgColor", "borderWidth"]) && hasAny(props, ["px", "py", "p"]) ? "button" : "link";
+    if (tag === "input" || tag === "select" || tag === "textarea") return "field";
+    if (tag === "p" || tag === "blockquote") return "text";
+    if (tag === "ul" || tag === "ol") return "list";
+    if (tag === "li") return "item";
+    if (["nav", "header", "footer", "main", "form", "section", "article", "aside", "label", "table"].includes(tag)) return tag;
+    if (tag === "div") {
+        if (hasAny(props, ["radius", "borderWidth", "shadow"]) && hasAny(props, ["p", "px", "py"])) return "card";
+        if (props.base && props.base.mx === "auto" && "maxW" in props.base) return "container";
+        if (hasAny(props, ["display"]) && Object.values(props).some((p) => /flex|grid/.test(p.display || ""))) return "layout";
+    }
+    return undefined;
+}
+// ── HTML -> spec ─────────────────────────────────────────────────────────────
+const squash = (s) => s.replace(/\s+/g, " ");
+function describe(el, id, nextId, opts) {
+    const tag = tagOf(el);
+    const attrs = attrsOf(el);
+    const { props, raw } = readClasses(attrs.class);
+    const node = { id, tag };
+    const role = roleOf(tag, attrs, props);
+    if (role) node.role = role;
+    delete attrs.class;
+    if (attrs.style !== undefined) { node.css = attrs.style; delete attrs.style; }
+    if (Object.keys(attrs).length) node.attrs = attrs;
+    if (Object.keys(props).length) node.props = props;
+    if (raw.length) node.raw = raw;
+    if (tag === "svg") {
+        // an icon's drawing: in full, or (for reading only) just its size, since nothing targets what's inside it
+        if (opts.svg === false) node.svgChars = innerOf(el).length;
+        else node.svg = innerOf(el);
+        return node;
+    }
+    if (VOID.has(tag)) return node;
+    const kids = kidsOf(el).filter((k) => k.nodeType === ELEMENT || k.nodeType === TEXT);
+    const exact = EXACT.has(tag);
+    if (kids.every((k) => k.nodeType === TEXT)) {
+        const t = kids.map(textOf).join("");
+        const shown = exact ? t : squash(t).trim();
+        if (shown) node.text = shown;
+        return node;
+    }
+    const children = [];
+    kids.forEach((k, i) => {
+        if (k.nodeType === ELEMENT) {
+            if (!SKIP.has(tagOf(k))) children.push(describe(k, nextId(), nextId, opts));
+            return;
+        }
+        const t = exact ? textOf(k) : squash(textOf(k));
+        if (t.trim()) children.push({ text: t }); // its edge spaces stay: "Hello <b>you</b>" needs the one before <b>
+        else {
+            // a space between two inline elements shows on the page ("<b>Hello</b> <i>world</i>"): keep it
+            const prev = kids[i - 1], next = kids[i + 1];
+            if (prev && next && prev.nodeType === ELEMENT && next.nodeType === ELEMENT && INLINE.has(tagOf(prev)) && INLINE.has(tagOf(next))) children.push({ text: " " });
+        }
+    });
+    if (children.length) node.children = children;
+    return node;
+}
+/** The design tokens it uses: the values that recur, most used first. */
+function tokensOf(tree) {
+    const buckets = { colors: new Map(), fontSizes: new Map(), radius: new Map(), spacing: new Map(), shadows: new Map() };
+    const add = (b, v) => buckets[b].set(v, (buckets[b].get(v) || 0) + 1);
+    const visit = (n) => {
+        for (const p of Object.values(n.props || {})) {
+            for (const [k, v] of Object.entries(p)) {
+                if (/Color$|^grad(From|Via|To)$|^fill$|^stroke$/.test(k)) add("colors", v);
+                else if (k === "fontSize") add("fontSizes", v);
+                else if (/^radius/.test(k)) add("radius", v);
+                else if (/^(p|px|py|pt|pr|pb|pl|m|mx|my|mt|mr|mb|ml|gap|gapX|gapY|spaceX|spaceY)$/.test(k)) add("spacing", v);
+                else if (k === "shadow") add("shadows", v);
+            }
+        }
+        (n.children || []).forEach(visit);
+    };
+    tree.forEach(visit);
+    /** @type {Record<string, string[]>} */
+    const out = {};
+    for (const [k, m] of Object.entries(buckets)) {
+        const top = [...m.entries()].sort((a, b) => b[1] - a[1]).slice(0, 12).map(([v]) => v);
+        if (top.length) out[k] = top;
+    }
+    return out;
+}
+/** <style>, inline <script>, and the stylesheets and scripts it loads, as written. */
+function assetsOf(root) {
+    const all = (sel) => Array.from(root.querySelectorAll(sel));
+    const css = all("style").map(rawOf).map((s) => s.trim()).filter(Boolean).join("\n\n");
+    const js = all("script").filter((s) => !attrsOf(s).src).map(rawOf).map((s) => s.trim()).filter(Boolean).join("\n\n");
+    const stylesheets = all("link[href]").filter((l) => /stylesheet/i.test(attrsOf(l).rel || "")).map((l) => attrsOf(l).href);
+    const scripts = all("script[src]").map((s) => attrsOf(s).src);
+    /** @type {Assets} */
+    const out = {};
+    if (css) out.css = css;
+    if (js) out.js = js;
+    if (stylesheets.length) out.stylesheets = stylesheets;
+    if (scripts.length) out.scripts = scripts;
+    return out;
+}
+/** In the browser: HTML text read by the browser's own parser, ready for toSpec. (The server uses node-html-parser.) */
+export const readHtmlInBrowser = (html) => new DOMParser().parseFromString(String(html || ""), "text/html");
+/**
+ * A design (already read into a tree) as a spec: { tokens, assets, tree }. With { svg: false }, icons carry only their
+ * size (svgChars) instead of their drawing: smaller to read, but toHtml can't rebuild the icons from it.
+ */
+/** @param {any} root a read tree @param {{ svg?: boolean }} [opts] @returns {Spec} */
+export function toSpec(root, opts = {}) {
+    let count = 0;
+    const nextId = () => `n${++count}`;
+    const tree = contentRoots(root).filter((n) => n.nodeType === ELEMENT && !SKIP.has(tagOf(n))).map((n) => describe(n, nextId(), nextId, opts));
+    return { tokens: tokensOf(tree), assets: assetsOf(root), tree };
+}
+// ── spec -> HTML ─────────────────────────────────────────────────────────────
+const escText = (s) => String(s).replace(/&/g, "&amp;").replace(/</g, "&lt;").replace(/>/g, "&gt;");
+const escAttr = (s) => String(s).replace(/&/g, "&amp;").replace(/"/g, "&quot;");
+const TAG_RE = /^[a-z][a-z0-9-]*$/;
+function nodeHtml(n) {
+    if (n.text !== undefined && !n.tag) return escText(n.text);
+    if (!TAG_RE.test(n.tag || "")) throw new Error(`Invalid tag "${n.tag}"`);
+    const cls = writeClasses(n.props, n.raw);
+    const attrs = { ...(n.attrs || {}) };
+    if (cls) attrs.class = cls;
+    if (n.css) attrs.style = n.css;
+    const open = `<${n.tag}${Object.entries(attrs).map(([k, v]) => (v === "" ? ` ${k}` : ` ${k}="${escAttr(v)}"`)).join("")}>`;
+    if (VOID.has(n.tag)) return open;
+    const inner = n.tag === "svg" ? n.svg || "" : n.text !== undefined ? escText(n.text) : (n.children || []).map(nodeHtml).join("");
+    return `${open}${inner}</${n.tag}>`;
+}
+/** A spec (or a list of spec nodes) as HTML, with its <style> and <script> when it has them. */
+/** @param {Spec | SpecNode[]} spec @returns {string} */
+export function toHtml(spec) {
+    const tree = Array.isArray(spec) ? spec : spec.tree || [];
+    const body = tree.map(nodeHtml).join("\n");
+    const a = Array.isArray(spec) ? {} : spec.assets || {};
+    return [
+        ...(a.stylesheets || []).map((h) => `<link rel="stylesheet" href="${escAttr(h)}">`),
+        a.css ? `<style>\n${a.css}\n</style>` : "",
+        body,
+        ...(a.scripts || []).map((s) => `<script src="${escAttr(s)}"></script>`),
+        a.js ? `<script>\n${a.js}\n</script>` : "",
+    ].filter(Boolean).join("\n");
+}

package/core/exporters.js ADDED Viewed

@@ -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 ADDED Viewed

@@ -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;
+}