fastscript 0.1.1 → 2.0.0

package/node_modules/@fastscript/core-private/src/style-primitives.mjs

@@ -0,0 +1,538 @@
+const BLOCK_CONFIG = {
+  Box: { tag: "div", base: ["fs-box"] },
+  Stack: { tag: "div", base: ["fs-box", "fs-stack"] },
+  Row: { tag: "div", base: ["fs-box", "fs-row"] },
+  Grid: { tag: "div", base: ["fs-box", "fs-grid"] },
+  Section: { tag: "section", base: ["fs-box", "fs-section"] },
+  Container: { tag: "div", base: ["fs-box", "fs-container"] },
+  Screen: { tag: "main", base: ["fs-box", "fs-screen"] },
+  Card: { tag: "article", base: ["fs-box", "fs-card"] },
+  Panel: { tag: "section", base: ["fs-box", "fs-panel"] },
+  Text: { tag: "p", base: ["fs-text"] },
+  Heading: { tag: "h2", base: ["fs-heading"] },
+  Code: { tag: "code", base: ["fs-code"] },
+  Label: { tag: "label", base: ["fs-label"] },
+  Badge: { tag: "span", base: ["fs-badge"] },
+  Link: { tag: "a", base: ["fs-link"] },
+  Button: { tag: "button", base: ["fs-button"] },
+  Textarea: { tag: "textarea", base: ["fs-input", "fs-textarea"] },
+  Select: { tag: "select", base: ["fs-input", "fs-select"] },
+  Field: { tag: "div", base: ["fs-field"] },
+  Alert: { tag: "div", base: ["fs-alert"] },
+  Empty: { tag: "div", base: ["fs-empty"] },
+};
+
+const SELF_CLOSING_CONFIG = {
+  Input: { tag: "input", base: ["fs-input"] },
+  Image: { tag: "img", base: ["fs-image"] },
+  Spacer: { tag: "div", base: ["fs-spacer"], defaults: { "aria-hidden": "true" } },
+  Loader: { tag: "div", base: ["fs-loader"], defaults: { role: "status", "aria-live": "polite" } },
+  Checkbox: { tag: "input", base: ["fs-checkbox"], defaults: { type: "checkbox" } },
+  Radio: { tag: "input", base: ["fs-radio"], defaults: { type: "radio" } },
+  Switch: { tag: "input", base: ["fs-switch"], defaults: { type: "checkbox", role: "switch" } },
+};
+
+const PRIMITIVE_NAMES = [...Object.keys(BLOCK_CONFIG), ...Object.keys(SELF_CLOSING_CONFIG)];
+const PRIMITIVE_SET = new Set(PRIMITIVE_NAMES);
+const SURFACE_VALUES = new Set(["plain", "subtle", "panel", "card", "elevated", "inverted"]);
+const TONE_VALUES = new Set(["default", "muted", "primary", "secondary", "accent", "success", "warning", "error", "ghost", "inverse"]);
+const SIZE_VALUES = new Set(["xs", "sm", "md", "lg", "xl", "2xl", "3xl", "4xl", "5xl"]);
+const WEIGHT_VALUES = new Set(["thin", "light", "normal", "medium", "semibold", "bold", "extrabold", "black"]);
+const SHADOW_VALUES = new Set(["none", "soft", "md", "lg", "glow"]);
+const ALIGN_VALUES = new Set(["start", "center", "end", "stretch"]);
+const JUSTIFY_VALUES = new Set(["start", "center", "end", "between", "around"]);
+const ENTER_VALUES = new Set(["fade", "fade-up", "scale-in", "slide"]);
+const HOVER_VALUES = new Set(["lift", "pulse"]);
+const SEMANTIC_KEYS = new Set(["pad", "gap", "radius", "shadow", "surface", "tone", "size", "weight", "align", "justify", "cols", "enter", "hover", "level", "as"]);
+const ATTR_RE = /([:@A-Za-z_][\w:.-]*)(?:\s*=\s*(?:"([^"]*)"|'([^']*)'|`([^`]*)`|([^\s"'`=<>]+)))?/g;
+const INNER_PRIMITIVE_PATTERN = new RegExp(`<\\/?(?:${PRIMITIVE_NAMES.join("|")})\\b`);
+const SELF_CLOSING_PATTERN = new RegExp(`<(${Object.keys(SELF_CLOSING_CONFIG).join("|")})\\b([^>]*)\\/?>`, "g");
+const BLOCK_PATTERN = new RegExp(
+  `<(${Object.keys(BLOCK_CONFIG).join("|")})\\b([^>]*)>` +
+    `((?:(?!<\\/?(?:${PRIMITIVE_NAMES.join("|")})\\b)[\\s\\S])*)` +
+    `<\\/\\1>`,
+  "g",
+);
+
+function escapeAttr(value) {
+  return String(value)
+    .replace(/&/g, "&amp;")
+    .replace(/"/g, "&quot;");
+}
+
+function parseAttributes(raw = "") {
+  const attrs = [];
+  let match = null;
+  while ((match = ATTR_RE.exec(raw)) !== null) {
+    attrs.push({
+      name: match[1],
+      value: match[2] ?? match[3] ?? match[4] ?? match[5] ?? null,
+    });
+  }
+  return attrs;
+}
+
+function attrsToMap(attrs) {
+  const map = Object.create(null);
+  for (const attr of attrs) map[attr.name] = attr.value;
+  return map;
+}
+
+function headingTagFromAttrs(attrMap) {
+  const level = Number(attrMap.level || "");
+  if (Number.isInteger(level) && level >= 1 && level <= 6) return `h${level}`;
+  if (/^h[1-6]$/i.test(String(attrMap.as || ""))) return String(attrMap.as).toLowerCase();
+  const size = String(attrMap.size || "md");
+  if (size === "5xl" || size === "4xl") return "h1";
+  if (size === "3xl" || size === "2xl") return "h2";
+  if (size === "xl" || size === "lg") return "h3";
+  return "h4";
+}
+
+function resolveTag(name, attrMap, config) {
+  if (name === "Heading") return headingTagFromAttrs(attrMap);
+  if (name === "Button") {
+    if (attrMap.as) return String(attrMap.as).toLowerCase();
+    if (attrMap.href) return "a";
+  }
+  if (attrMap.as) return String(attrMap.as).toLowerCase();
+  return config.tag;
+}
+
+function buildClasses(name, attrMap, config) {
+  const classes = [...(config.base || [])];
+  if (attrMap.class) classes.push(...String(attrMap.class).split(/\s+/g).filter(Boolean));
+
+  if (attrMap.pad) classes.push(`fs-pad-${attrMap.pad}`);
+  if (attrMap.gap) classes.push(`fs-gap-${attrMap.gap}`);
+  if (attrMap.radius) classes.push(`fs-radius-${attrMap.radius}`);
+
+  const shadow = attrMap.shadow === "lg" ? "glow" : attrMap.shadow === "md" ? "soft" : attrMap.shadow;
+  if (shadow) classes.push(`fs-shadow-${shadow}`);
+  if (attrMap.surface) classes.push(`fs-surface-${attrMap.surface}`);
+
+  if (attrMap.align) classes.push(`fs-align-${attrMap.align}`);
+  if (attrMap.justify) classes.push(`fs-justify-${attrMap.justify}`);
+  if (attrMap.cols) classes.push(`fs-grid-cols-${attrMap.cols}`);
+  if (attrMap.enter) classes.push(`fs-enter-${attrMap.enter}`);
+  if (attrMap.hover) classes.push(`fs-hover-${attrMap.hover}`);
+
+  if (name === "Heading") {
+    classes.push(`fs-heading-size-${attrMap.size || "md"}`);
+    if (attrMap.tone) classes.push(`fs-tone-${attrMap.tone}`);
+    if (attrMap.weight) classes.push(`fs-weight-${attrMap.weight}`);
+  } else if (name === "Text" || name === "Code" || name === "Label" || name === "Badge" || name === "Link") {
+    if (attrMap.size) classes.push(`fs-text-size-${attrMap.size}`);
+    if (attrMap.tone) classes.push(`fs-tone-${attrMap.tone}`);
+    if (attrMap.weight) classes.push(`fs-weight-${attrMap.weight}`);
+  } else if (name === "Button") {
+    classes.push(`fs-button-tone-${attrMap.tone || "primary"}`);
+    classes.push(`fs-button-size-${attrMap.size || "md"}`);
+  } else {
+    if (attrMap.tone) classes.push(`fs-tone-${attrMap.tone}`);
+    if (attrMap.size) classes.push(`fs-text-size-${attrMap.size}`);
+    if (attrMap.weight) classes.push(`fs-weight-${attrMap.weight}`);
+  }
+
+  return [...new Set(classes.filter(Boolean))];
+}
+
+function passThroughAttribute(attr) {
+  if (!attr || !attr.name) return false;
+  if (SEMANTIC_KEYS.has(attr.name)) return false;
+  if (attr.name === "class") return false;
+  return true;
+}
+
+function serializeOpenTag(tagName, attrs, classes) {
+  const parts = [`<${tagName}`];
+  if (classes.length) parts.push(` class="${escapeAttr(classes.join(" "))}"`);
+  for (const attr of attrs) {
+    if (!passThroughAttribute(attr)) continue;
+    if (attr.value === null) parts.push(` ${attr.name}`);
+    else parts.push(` ${attr.name}="${escapeAttr(attr.value)}"`);
+  }
+  parts.push(">");
+  return parts.join("");
+}
+
+function serializeSelfClosingTag(tagName, attrs, classes) {
+  const parts = [`<${tagName}`];
+  if (classes.length) parts.push(` class="${escapeAttr(classes.join(" "))}"`);
+  for (const attr of attrs) {
+    if (!passThroughAttribute(attr)) continue;
+    if (attr.value === null) parts.push(` ${attr.name}`);
+    else parts.push(` ${attr.name}="${escapeAttr(attr.value)}"`);
+  }
+  parts.push(" />");
+  return parts.join("");
+}
+
+function normalizeAttributes(name, attrs, config) {
+  const out = [...attrs];
+  const map = attrsToMap(out);
+  for (const [key, value] of Object.entries(config.defaults || {})) {
+    if (!(key in map)) out.push({ name: key, value });
+  }
+  if (name === "Button") {
+    const tag = resolveTag(name, attrsToMap(out), config);
+    const hasType = out.some((attr) => attr.name === "type");
+    if (tag === "button" && !hasType) out.push({ name: "type", value: "button" });
+  }
+  if (name === "Heading") {
+    out.push({ name: "data-fs-heading", value: "true" });
+  }
+  return out;
+}
+
+function renderPrimitiveNode(name, rawAttrs, innerHtml = "") {
+  const config = BLOCK_CONFIG[name] || SELF_CLOSING_CONFIG[name];
+  if (!config) return "";
+  const attrs = normalizeAttributes(name, parseAttributes(rawAttrs), config);
+  const attrMap = attrsToMap(attrs);
+  const tag = resolveTag(name, attrMap, config);
+  const classes = buildClasses(name, attrMap, config);
+  if (SELF_CLOSING_CONFIG[name]) {
+    return serializeSelfClosingTag(tag, attrs, classes);
+  }
+  return `${serializeOpenTag(tag, attrs, classes)}${innerHtml}</${tag}>`;
+}
+
+export function transformStylePrimitives(html = "") {
+  let out = String(html || "");
+  if (!INNER_PRIMITIVE_PATTERN.test(out)) return out;
+
+  let guard = 0;
+  while (guard < 200) {
+    let changed = false;
+
+    out = out.replace(SELF_CLOSING_PATTERN, (full, name, attrs) => {
+      changed = true;
+      return renderPrimitiveNode(name, attrs || "", "");
+    });
+
+    out = out.replace(BLOCK_PATTERN, (full, name, attrs, inner) => {
+      changed = true;
+      return renderPrimitiveNode(name, attrs || "", inner || "");
+    });
+
+    if (!changed) break;
+    guard += 1;
+  }
+
+  return out;
+}
+
+export function buildStylePrimitiveRuntimeSource() {
+  return `
+const FS_BLOCK_CONFIG = ${JSON.stringify(BLOCK_CONFIG)};
+const FS_SELF_CLOSING_CONFIG = ${JSON.stringify(SELF_CLOSING_CONFIG)};
+const FS_SEMANTIC_KEYS = new Set(${JSON.stringify([...SEMANTIC_KEYS])});
+
+function fsAttrMap(el) {
+  const out = Object.create(null);
+  for (const attr of Array.from(el.attributes || [])) out[attr.name] = attr.value;
+  return out;
+}
+
+function fsHeadingTag(attrMap) {
+  const level = Number(attrMap.level || "");
+  if (Number.isInteger(level) && level >= 1 && level <= 6) return "h" + level;
+  if (/^h[1-6]$/i.test(String(attrMap.as || ""))) return String(attrMap.as).toLowerCase();
+  const size = String(attrMap.size || "md");
+  if (size === "5xl" || size === "4xl") return "h1";
+  if (size === "3xl" || size === "2xl") return "h2";
+  if (size === "xl" || size === "lg") return "h3";
+  return "h4";
+}
+
+function fsResolveTag(name, attrMap, config) {
+  if (name === "Heading") return fsHeadingTag(attrMap);
+  if (name === "Button") {
+    if (attrMap.as) return String(attrMap.as).toLowerCase();
+    if (attrMap.href) return "a";
+  }
+  if (attrMap.as) return String(attrMap.as).toLowerCase();
+  return config.tag;
+}
+
+function fsClasses(name, attrMap, config) {
+  const classes = [...(config.base || [])];
+  if (attrMap.class) classes.push(...String(attrMap.class).split(/\\s+/g).filter(Boolean));
+  if (attrMap.pad) classes.push("fs-pad-" + attrMap.pad);
+  if (attrMap.gap) classes.push("fs-gap-" + attrMap.gap);
+  if (attrMap.radius) classes.push("fs-radius-" + attrMap.radius);
+  const shadow = attrMap.shadow === "lg" ? "glow" : attrMap.shadow === "md" ? "soft" : attrMap.shadow;
+  if (shadow) classes.push("fs-shadow-" + shadow);
+  if (attrMap.surface) classes.push("fs-surface-" + attrMap.surface);
+  if (attrMap.align) classes.push("fs-align-" + attrMap.align);
+  if (attrMap.justify) classes.push("fs-justify-" + attrMap.justify);
+  if (attrMap.cols) classes.push("fs-grid-cols-" + attrMap.cols);
+  if (attrMap.enter) classes.push("fs-enter-" + attrMap.enter);
+  if (attrMap.hover) classes.push("fs-hover-" + attrMap.hover);
+  if (name === "Heading") {
+    classes.push("fs-heading-size-" + (attrMap.size || "md"));
+    if (attrMap.tone) classes.push("fs-tone-" + attrMap.tone);
+    if (attrMap.weight) classes.push("fs-weight-" + attrMap.weight);
+  } else if (name === "Text" || name === "Code" || name === "Label" || name === "Badge" || name === "Link") {
+    if (attrMap.size) classes.push("fs-text-size-" + attrMap.size);
+    if (attrMap.tone) classes.push("fs-tone-" + attrMap.tone);
+    if (attrMap.weight) classes.push("fs-weight-" + attrMap.weight);
+  } else if (name === "Button") {
+    classes.push("fs-button-tone-" + (attrMap.tone || "primary"));
+    classes.push("fs-button-size-" + (attrMap.size || "md"));
+  } else {
+    if (attrMap.tone) classes.push("fs-tone-" + attrMap.tone);
+    if (attrMap.size) classes.push("fs-text-size-" + attrMap.size);
+    if (attrMap.weight) classes.push("fs-weight-" + attrMap.weight);
+  }
+  return [...new Set(classes.filter(Boolean))];
+}
+
+function upgradePrimitiveElement(el) {
+  const name = el.tagName && (el.tagName[0] + el.tagName.slice(1).toLowerCase());
+  const config = FS_BLOCK_CONFIG[name] || FS_SELF_CLOSING_CONFIG[name];
+  if (!config) return el;
+  const attrMap = fsAttrMap(el);
+  const tag = fsResolveTag(name, attrMap, config);
+  const next = document.createElement(tag);
+  const classes = fsClasses(name, attrMap, config);
+  if (classes.length) next.className = classes.join(" ");
+  for (const [key, value] of Object.entries(config.defaults || {})) {
+    if (!el.hasAttribute(key)) next.setAttribute(key, value);
+  }
+  for (const attr of Array.from(el.attributes || [])) {
+    if (attr.name === "class" || FS_SEMANTIC_KEYS.has(attr.name)) continue;
+    next.setAttribute(attr.name, attr.value);
+  }
+  if (name === "Button" && tag === "button" && !next.hasAttribute("type")) {
+    next.setAttribute("type", "button");
+  }
+  if (name === "Heading") next.setAttribute("data-fs-heading", "true");
+  while (el.firstChild) next.appendChild(el.firstChild);
+  el.replaceWith(next);
+  return next;
+}
+
+function primitiveSelector() {
+  return Object.keys(FS_BLOCK_CONFIG).concat(Object.keys(FS_SELF_CLOSING_CONFIG)).map((name) => name.toLowerCase()).join(",");
+}
+
+export function upgradeStylePrimitivesInDom(root) {
+  if (!root || typeof root.querySelectorAll !== "function") return;
+  let guard = 0;
+  while (guard < 25) {
+    const nodes = Array.from(root.querySelectorAll(primitiveSelector()));
+    if (!nodes.length) break;
+    for (const node of nodes) {
+      if (node && node.isConnected) upgradePrimitiveElement(node);
+    }
+    guard += 1;
+  }
+}
+`;
+}
+
+export function buildStylePrimitiveServerSource() {
+  return `
+const FS_BLOCK_CONFIG = ${JSON.stringify(BLOCK_CONFIG)};
+const FS_SELF_CLOSING_CONFIG = ${JSON.stringify(SELF_CLOSING_CONFIG)};
+const FS_SEMANTIC_KEYS = new Set(${JSON.stringify([...SEMANTIC_KEYS])});
+const FS_PRIMITIVE_NAMES = ${JSON.stringify(PRIMITIVE_NAMES)};
+const FS_ATTR_RE = /([:@A-Za-z_][\\w:.-]*)(?:\\s*=\\s*(?:\\"([^\\"]*)\\"|'([^']*)'|\`([^\`]*)\`|([^\\s\\"'\`=<>]+)))?/g;
+const FS_INNER_PRIMITIVE_PATTERN = new RegExp("<\\\\/?(?:" + FS_PRIMITIVE_NAMES.join("|") + ")\\\\b");
+const FS_SELF_CLOSING_PATTERN = new RegExp("<(" + Object.keys(FS_SELF_CLOSING_CONFIG).join("|") + ")\\\\b([^>]*)\\\\/?>", "g");
+const FS_BLOCK_PATTERN = new RegExp(
+  "<(" + Object.keys(FS_BLOCK_CONFIG).join("|") + ")\\\\b([^>]*)>" +
+    "((?:(?!<\\\\/?(?:" + FS_PRIMITIVE_NAMES.join("|") + ")\\\\b)[\\\\s\\\\S])*)" +
+    "<\\\\/\\\\1>",
+  "g",
+);
+
+function fsEscapeAttr(value) {
+  return String(value).replace(/&/g, "&amp;").replace(/\\"/g, "&quot;");
+}
+
+function fsParseAttributes(raw = "") {
+  const attrs = [];
+  let match = null;
+  FS_ATTR_RE.lastIndex = 0;
+  while ((match = FS_ATTR_RE.exec(raw)) !== null) {
+    attrs.push({ name: match[1], value: match[2] ?? match[3] ?? match[4] ?? match[5] ?? null });
+  }
+  return attrs;
+}
+
+function fsAttrsToMap(attrs) {
+  const map = Object.create(null);
+  for (const attr of attrs) map[attr.name] = attr.value;
+  return map;
+}
+
+function fsHeadingTag(attrMap) {
+  const level = Number(attrMap.level || "");
+  if (Number.isInteger(level) && level >= 1 && level <= 6) return "h" + level;
+  if (/^h[1-6]$/i.test(String(attrMap.as || ""))) return String(attrMap.as).toLowerCase();
+  const size = String(attrMap.size || "md");
+  if (size === "5xl" || size === "4xl") return "h1";
+  if (size === "3xl" || size === "2xl") return "h2";
+  if (size === "xl" || size === "lg") return "h3";
+  return "h4";
+}
+
+function fsResolveTag(name, attrMap, config) {
+  if (name === "Heading") return fsHeadingTag(attrMap);
+  if (name === "Button") {
+    if (attrMap.as) return String(attrMap.as).toLowerCase();
+    if (attrMap.href) return "a";
+  }
+  if (attrMap.as) return String(attrMap.as).toLowerCase();
+  return config.tag;
+}
+
+function fsClasses(name, attrMap, config) {
+  const classes = [...(config.base || [])];
+  if (attrMap.class) classes.push(...String(attrMap.class).split(/\\s+/g).filter(Boolean));
+  if (attrMap.pad) classes.push("fs-pad-" + attrMap.pad);
+  if (attrMap.gap) classes.push("fs-gap-" + attrMap.gap);
+  if (attrMap.radius) classes.push("fs-radius-" + attrMap.radius);
+  const shadow = attrMap.shadow === "lg" ? "glow" : attrMap.shadow === "md" ? "soft" : attrMap.shadow;
+  if (shadow) classes.push("fs-shadow-" + shadow);
+  if (attrMap.surface) classes.push("fs-surface-" + attrMap.surface);
+  if (attrMap.align) classes.push("fs-align-" + attrMap.align);
+  if (attrMap.justify) classes.push("fs-justify-" + attrMap.justify);
+  if (attrMap.cols) classes.push("fs-grid-cols-" + attrMap.cols);
+  if (attrMap.enter) classes.push("fs-enter-" + attrMap.enter);
+  if (attrMap.hover) classes.push("fs-hover-" + attrMap.hover);
+  if (name === "Heading") {
+    classes.push("fs-heading-size-" + (attrMap.size || "md"));
+    if (attrMap.tone) classes.push("fs-tone-" + attrMap.tone);
+    if (attrMap.weight) classes.push("fs-weight-" + attrMap.weight);
+  } else if (name === "Text" || name === "Code" || name === "Label" || name === "Badge" || name === "Link") {
+    if (attrMap.size) classes.push("fs-text-size-" + attrMap.size);
+    if (attrMap.tone) classes.push("fs-tone-" + attrMap.tone);
+    if (attrMap.weight) classes.push("fs-weight-" + attrMap.weight);
+  } else if (name === "Button") {
+    classes.push("fs-button-tone-" + (attrMap.tone || "primary"));
+    classes.push("fs-button-size-" + (attrMap.size || "md"));
+  } else {
+    if (attrMap.tone) classes.push("fs-tone-" + attrMap.tone);
+    if (attrMap.size) classes.push("fs-text-size-" + attrMap.size);
+    if (attrMap.weight) classes.push("fs-weight-" + attrMap.weight);
+  }
+  return [...new Set(classes.filter(Boolean))];
+}
+
+function fsPassThroughAttribute(attr) {
+  if (!attr || !attr.name) return false;
+  if (FS_SEMANTIC_KEYS.has(attr.name)) return false;
+  if (attr.name === "class") return false;
+  return true;
+}
+
+function fsNormalizeAttributes(name, attrs, config) {
+  const out = [...attrs];
+  const map = fsAttrsToMap(out);
+  for (const [key, value] of Object.entries(config.defaults || {})) {
+    if (!(key in map)) out.push({ name: key, value });
+  }
+  if (name === "Button") {
+    const tag = fsResolveTag(name, fsAttrsToMap(out), config);
+    const hasType = out.some((attr) => attr.name === "type");
+    if (tag === "button" && !hasType) out.push({ name: "type", value: "button" });
+  }
+  if (name === "Heading") out.push({ name: "data-fs-heading", value: "true" });
+  return out;
+}
+
+function fsSerializeOpenTag(tagName, attrs, classes) {
+  const parts = ["<" + tagName];
+  if (classes.length) parts.push(" class=\\"" + fsEscapeAttr(classes.join(" ")) + "\\"");
+  for (const attr of attrs) {
+    if (!fsPassThroughAttribute(attr)) continue;
+    if (attr.value === null) parts.push(" " + attr.name);
+    else parts.push(" " + attr.name + "=\\"" + fsEscapeAttr(attr.value) + "\\"");
+  }
+  parts.push(">");
+  return parts.join("");
+}
+
+function fsSerializeSelfClosingTag(tagName, attrs, classes) {
+  const parts = ["<" + tagName];
+  if (classes.length) parts.push(" class=\\"" + fsEscapeAttr(classes.join(" ")) + "\\"");
+  for (const attr of attrs) {
+    if (!fsPassThroughAttribute(attr)) continue;
+    if (attr.value === null) parts.push(" " + attr.name);
+    else parts.push(" " + attr.name + "=\\"" + fsEscapeAttr(attr.value) + "\\"");
+  }
+  parts.push(" />");
+  return parts.join("");
+}
+
+function fsRenderPrimitiveNode(name, rawAttrs, innerHtml = "") {
+  const config = FS_BLOCK_CONFIG[name] || FS_SELF_CLOSING_CONFIG[name];
+  if (!config) return "";
+  const attrs = fsNormalizeAttributes(name, fsParseAttributes(rawAttrs), config);
+  const attrMap = fsAttrsToMap(attrs);
+  const tag = fsResolveTag(name, attrMap, config);
+  const classes = fsClasses(name, attrMap, config);
+  if (FS_SELF_CLOSING_CONFIG[name]) return fsSerializeSelfClosingTag(tag, attrs, classes);
+  return fsSerializeOpenTag(tag, attrs, classes) + innerHtml + "</" + tag + ">";
+}
+
+function transformStylePrimitives(html = "") {
+  let out = String(html || "");
+  if (!FS_INNER_PRIMITIVE_PATTERN.test(out)) return out;
+  let guard = 0;
+  while (guard < 200) {
+    let changed = false;
+    out = out.replace(FS_SELF_CLOSING_PATTERN, (full, name, attrs) => {
+      changed = true;
+      return fsRenderPrimitiveNode(name, attrs || "", "");
+    });
+    out = out.replace(FS_BLOCK_PATTERN, (full, name, attrs, inner) => {
+      changed = true;
+      return fsRenderPrimitiveNode(name, attrs || "", inner || "");
+    });
+    if (!changed) break;
+    guard += 1;
+  }
+  return out;
+}
+`;
+}
+
+export function validatePrimitiveSemanticValue(name, value, tokens = {}) {
+  const raw = String(value || "").trim();
+  if (name === "pad" || name === "gap") return Boolean(tokens.space && Object.prototype.hasOwnProperty.call(tokens.space, raw));
+  if (name === "radius") return Boolean(tokens.radius && Object.prototype.hasOwnProperty.call(tokens.radius, raw));
+  if (name === "shadow") return SHADOW_VALUES.has(raw);
+  if (name === "surface") return SURFACE_VALUES.has(raw);
+  if (name === "tone") return TONE_VALUES.has(raw);
+  if (name === "size") return SIZE_VALUES.has(raw);
+  if (name === "weight") return WEIGHT_VALUES.has(raw);
+  if (name === "align") return ALIGN_VALUES.has(raw);
+  if (name === "justify") return JUSTIFY_VALUES.has(raw);
+  if (name === "enter") return ENTER_VALUES.has(raw);
+  if (name === "hover") return HOVER_VALUES.has(raw);
+  if (name === "cols") return /^\d+$/.test(raw) && Number(raw) >= 1 && Number(raw) <= 12;
+  if (name === "level") return /^[1-6]$/.test(raw);
+  if (name === "as") return true;
+  return true;
+}
+
+export function validatePrimitiveMarkup(source = "", file = "", tokens = {}, errors = []) {
+  const TAG_RE = new RegExp(`<(${PRIMITIVE_NAMES.join("|")})\\b([^>]*)\\/?>`, "g");
+  let match = null;
+  while ((match = TAG_RE.exec(String(source || ""))) !== null) {
+    const tagName = match[1];
+    const attrs = parseAttributes(match[2] || "");
+    for (const attr of attrs) {
+      if (!SEMANTIC_KEYS.has(attr.name) || attr.value === null) continue;
+      if (!validatePrimitiveSemanticValue(attr.name, attr.value, tokens)) {
+        errors.push(`${file}: primitive <${tagName}> has invalid ${attr.name}="${attr.value}"`);
+      }
+    }
+  }
+  return errors;
+}