@matthesketh/utopia-compiler 0.0.1

package/dist/index.cjs

@@ -0,0 +1,834 @@
+"use strict";
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __export = (target, all) => {
+  for (var name in all)
+    __defProp(target, name, { get: all[name], enumerable: true });
+};
+var __copyProps = (to, from, except, desc) => {
+  if (from && typeof from === "object" || typeof from === "function") {
+    for (let key of __getOwnPropNames(from))
+      if (!__hasOwnProp.call(to, key) && key !== except)
+        __defProp(to, key, { get: () => from[key], enumerable: !(desc = __getOwnPropDesc(from, key)) || desc.enumerable });
+  }
+  return to;
+};
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/index.ts
+var index_exports = {};
+__export(index_exports, {
+  SFCParseError: () => SFCParseError,
+  compile: () => compile,
+  compileStyle: () => compileStyle,
+  compileTemplate: () => compileTemplate,
+  generateScopeId: () => generateScopeId,
+  parse: () => parse,
+  parseTemplate: () => parseTemplate
+});
+module.exports = __toCommonJS(index_exports);
+
+// src/parser.ts
+function parse(source, filename = "anonymous.utopia") {
+  const descriptor = {
+    template: null,
+    script: null,
+    style: null,
+    filename
+  };
+  const blockRe = /<(template|script|style)([\s][^>]*)?\s*>/g;
+  let match;
+  while ((match = blockRe.exec(source)) !== null) {
+    const tagName = match[1];
+    const attrString = match[2] || "";
+    const openTagStart = match.index;
+    const openTagEnd = openTagStart + match[0].length;
+    const attrs = parseAttributes(attrString);
+    const closeTag = `</${tagName}>`;
+    const closeIndex = source.indexOf(closeTag, openTagEnd);
+    if (closeIndex === -1) {
+      throw new SFCParseError(
+        `Unclosed <${tagName}> block \u2014 expected </${tagName}>`,
+        filename,
+        positionAt(source, openTagStart)
+      );
+    }
+    const content = source.slice(openTagEnd, closeIndex);
+    const blockEnd = closeIndex + closeTag.length;
+    const block = {
+      content,
+      attrs,
+      start: openTagStart,
+      end: blockEnd
+    };
+    if (descriptor[tagName] !== null) {
+      throw new SFCParseError(
+        `Duplicate <${tagName}> block \u2014 only one is allowed per component`,
+        filename,
+        positionAt(source, openTagStart)
+      );
+    }
+    descriptor[tagName] = block;
+    blockRe.lastIndex = blockEnd;
+  }
+  return descriptor;
+}
+var ATTR_RE = /([a-zA-Z_][\w-]*)\s*(?:=\s*(?:"([^"]*)"|'([^']*)'|(\S+)))?/g;
+function parseAttributes(raw) {
+  const attrs = {};
+  let m;
+  ATTR_RE.lastIndex = 0;
+  while ((m = ATTR_RE.exec(raw)) !== null) {
+    const name = m[1];
+    const value = m[2] ?? m[3] ?? m[4] ?? true;
+    attrs[name] = value;
+  }
+  return attrs;
+}
+function positionAt(source, offset) {
+  let line = 1;
+  let column = 0;
+  for (let i = 0; i < offset; i++) {
+    if (source[i] === "\n") {
+      line++;
+      column = 0;
+    } else {
+      column++;
+    }
+  }
+  return { line, column };
+}
+var SFCParseError = class extends Error {
+  filename;
+  position;
+  constructor(message, filename, position) {
+    super(`${filename}:${position.line}:${position.column} ${message}`);
+    this.name = "SFCParseError";
+    this.filename = filename;
+    this.position = position;
+  }
+};
+
+// src/template-compiler.ts
+function compileTemplate(template, options = {}) {
+  const ast = parseTemplate(template);
+  return generate(ast, options);
+}
+var VOID_ELEMENTS = /* @__PURE__ */ new Set([
+  "area",
+  "base",
+  "br",
+  "col",
+  "embed",
+  "hr",
+  "img",
+  "input",
+  "link",
+  "meta",
+  "param",
+  "source",
+  "track",
+  "wbr"
+]);
+var TemplateParser = class {
+  source;
+  pos;
+  constructor(source) {
+    this.source = source;
+    this.pos = 0;
+  }
+  parse() {
+    return this.parseChildren(null);
+  }
+  // ---- Children (text / interpolation / elements) -------------------------
+  parseChildren(parentTag) {
+    const nodes = [];
+    while (this.pos < this.source.length) {
+      if (parentTag !== null && this.lookingAt(`</${parentTag}`)) {
+        break;
+      }
+      if (this.lookingAt("<!--")) {
+        nodes.push(this.parseComment());
+        continue;
+      }
+      if (this.lookingAt("<") && this.peekTagStart()) {
+        nodes.push(this.parseElement());
+        continue;
+      }
+      const textOrInterp = this.parseTextOrInterpolation(parentTag);
+      if (textOrInterp.length > 0) {
+        nodes.push(...textOrInterp);
+      }
+    }
+    return nodes;
+  }
+  // ---- Comments -----------------------------------------------------------
+  parseComment() {
+    this.expect("<!--");
+    const endIdx = this.source.indexOf("-->", this.pos);
+    if (endIdx === -1) {
+      throw this.error("Unterminated comment");
+    }
+    const content = this.source.slice(this.pos, endIdx);
+    this.pos = endIdx + 3;
+    return { type: 4 /* Comment */, content: content.trim() };
+  }
+  // ---- Elements -----------------------------------------------------------
+  parseElement() {
+    this.expect("<");
+    const tag = this.readTagName();
+    const attrs = [];
+    const directives = [];
+    this.parseAttributeList(attrs, directives);
+    this.skipWhitespace();
+    let selfClosing = false;
+    if (this.lookingAt("/>")) {
+      this.pos += 2;
+      selfClosing = true;
+    } else {
+      this.expect(">");
+      if (VOID_ELEMENTS.has(tag.toLowerCase())) {
+        selfClosing = true;
+      }
+    }
+    let children = [];
+    if (!selfClosing) {
+      children = this.parseChildren(tag);
+      this.expect(`</${tag}`);
+      this.skipWhitespace();
+      this.expect(">");
+    }
+    return { type: 1 /* Element */, tag, attrs, directives, children, selfClosing };
+  }
+  // ---- Attributes & Directives --------------------------------------------
+  parseAttributeList(attrs, directives) {
+    while (true) {
+      this.skipWhitespace();
+      if (this.pos >= this.source.length) break;
+      if (this.lookingAt(">") || this.lookingAt("/>")) break;
+      const name = this.readAttributeName();
+      if (!name) break;
+      let value = null;
+      this.skipWhitespace();
+      if (this.lookingAt("=")) {
+        this.pos++;
+        this.skipWhitespace();
+        value = this.readAttributeValue();
+      }
+      const dir = classifyDirective(name, value);
+      if (dir) {
+        directives.push(dir);
+      } else {
+        attrs.push({ name, value });
+      }
+    }
+  }
+  // ---- Text & Interpolation -----------------------------------------------
+  parseTextOrInterpolation(parentTag) {
+    const nodes = [];
+    let textBuf = "";
+    const flush = () => {
+      if (textBuf) {
+        nodes.push({ type: 2 /* Text */, content: textBuf });
+        textBuf = "";
+      }
+    };
+    while (this.pos < this.source.length) {
+      if (this.lookingAt("<")) {
+        if (parentTag !== null && this.lookingAt(`</${parentTag}`)) break;
+        if (this.lookingAt("<!--") || this.peekTagStart()) break;
+        textBuf += this.source[this.pos++];
+        continue;
+      }
+      if (this.lookingAt("{{")) {
+        flush();
+        this.pos += 2;
+        const endIdx = this.source.indexOf("}}", this.pos);
+        if (endIdx === -1) throw this.error("Unterminated interpolation {{ }}");
+        const expression = this.source.slice(this.pos, endIdx).trim();
+        nodes.push({ type: 3 /* Interpolation */, expression });
+        this.pos = endIdx + 2;
+        continue;
+      }
+      textBuf += this.source[this.pos++];
+    }
+    flush();
+    return nodes;
+  }
+  // ---- Low-level helpers --------------------------------------------------
+  readTagName() {
+    const start = this.pos;
+    while (this.pos < this.source.length && /[a-zA-Z0-9\-_]/.test(this.source[this.pos])) {
+      this.pos++;
+    }
+    const name = this.source.slice(start, this.pos);
+    if (!name) throw this.error("Expected tag name");
+    return name;
+  }
+  readAttributeName() {
+    const start = this.pos;
+    while (this.pos < this.source.length && /[a-zA-Z0-9\-_:@.]/.test(this.source[this.pos])) {
+      this.pos++;
+    }
+    return this.source.slice(start, this.pos);
+  }
+  readAttributeValue() {
+    const quote = this.source[this.pos];
+    if (quote === '"' || quote === "'") {
+      this.pos++;
+      const start2 = this.pos;
+      const endIdx = this.source.indexOf(quote, this.pos);
+      if (endIdx === -1) throw this.error(`Unterminated attribute value (expected ${quote})`);
+      const value = this.source.slice(start2, endIdx);
+      this.pos = endIdx + 1;
+      return value;
+    }
+    const start = this.pos;
+    while (this.pos < this.source.length && !/[\s/>]/.test(this.source[this.pos])) {
+      this.pos++;
+    }
+    return this.source.slice(start, this.pos);
+  }
+  skipWhitespace() {
+    while (this.pos < this.source.length && /\s/.test(this.source[this.pos])) {
+      this.pos++;
+    }
+  }
+  lookingAt(str) {
+    return this.source.startsWith(str, this.pos);
+  }
+  /** Returns true when the char after `<` looks like the start of a tag name. */
+  peekTagStart() {
+    const next = this.source[this.pos + 1];
+    return next !== void 0 && /[a-zA-Z]/.test(next);
+  }
+  expect(str) {
+    if (!this.lookingAt(str)) {
+      throw this.error(`Expected "${str}" but found "${this.source.slice(this.pos, this.pos + 20)}"`);
+    }
+    this.pos += str.length;
+  }
+  error(message) {
+    let line = 1;
+    let col = 1;
+    for (let i = 0; i < this.pos && i < this.source.length; i++) {
+      if (this.source[i] === "\n") {
+        line++;
+        col = 1;
+      } else {
+        col++;
+      }
+    }
+    return new Error(`Template parse error at ${line}:${col} \u2014 ${message}`);
+  }
+};
+function parseTemplate(source) {
+  return new TemplateParser(source).parse();
+}
+function classifyDirective(name, value) {
+  const expression = value ?? "";
+  if (name.startsWith("@")) {
+    const parts = name.slice(1).split(".");
+    return {
+      kind: "on",
+      arg: parts[0],
+      expression,
+      modifiers: parts.slice(1)
+    };
+  }
+  if (name.startsWith(":")) {
+    const parts = name.slice(1).split(".");
+    return {
+      kind: "bind",
+      arg: parts[0],
+      expression,
+      modifiers: parts.slice(1)
+    };
+  }
+  if (name.startsWith("u-")) {
+    const withoutPrefix = name.slice(2);
+    const colonIdx = withoutPrefix.indexOf(":");
+    let kind;
+    let arg = null;
+    const modifiers = [];
+    if (colonIdx !== -1) {
+      kind = withoutPrefix.slice(0, colonIdx);
+      const rest = withoutPrefix.slice(colonIdx + 1);
+      const parts = rest.split(".");
+      arg = parts[0];
+      modifiers.push(...parts.slice(1));
+    } else {
+      const parts = withoutPrefix.split(".");
+      kind = parts[0];
+      modifiers.push(...parts.slice(1));
+    }
+    if (!isDirectiveKind(kind)) return null;
+    return { kind, arg, expression, modifiers };
+  }
+  return null;
+}
+function isDirectiveKind(s) {
+  return s === "on" || s === "bind" || s === "if" || s === "for" || s === "model";
+}
+var CodeGenerator = class {
+  constructor(options) {
+    this.options = options;
+    this.scopeId = options.scopeId;
+  }
+  code = [];
+  varCounter = 0;
+  helpers = /* @__PURE__ */ new Set();
+  scopeId;
+  generate(ast) {
+    const scope = /* @__PURE__ */ new Set();
+    const rootElements = ast.filter(
+      (n) => n.type === 1 /* Element */ || n.type === 3 /* Interpolation */ || n.type === 2 /* Text */ && n.content.trim() !== ""
+    );
+    if (rootElements.length === 0) {
+      this.helpers.add("createElement");
+      this.emit(`const _root = createElement('div')`);
+      this.emit(`return _root`);
+    } else if (rootElements.length === 1 && rootElements[0].type === 1 /* Element */) {
+      const rootVar = this.genNode(rootElements[0], scope);
+      this.emit(`return ${rootVar}`);
+    } else {
+      this.helpers.add("createElement");
+      const fragVar = this.freshVar();
+      this.emit(`const ${fragVar} = createElement('div')`);
+      if (this.scopeId) {
+        this.helpers.add("setAttr");
+        this.emit(`setAttr(${fragVar}, '${this.scopeId}', '')`);
+      }
+      for (const node of ast) {
+        const childVar = this.genNode(node, scope);
+        if (childVar) {
+          this.helpers.add("appendChild");
+          this.emit(`appendChild(${fragVar}, ${childVar})`);
+        }
+      }
+      this.emit(`return ${fragVar}`);
+    }
+    const helperList = Array.from(this.helpers).sort();
+    const importLine = helperList.length > 0 ? `import { ${helperList.join(", ")} } from '@matthesketh/utopia-runtime'
+
+` : "";
+    const fnBody = this.code.map((l) => `  ${l}`).join("\n");
+    const moduleCode = `${importLine}export default function render(_ctx) {
+${fnBody}
+}
+`;
+    return { code: moduleCode, helpers: this.helpers };
+  }
+  // ---- Node generation ----------------------------------------------------
+  genNode(node, scope) {
+    switch (node.type) {
+      case 1 /* Element */:
+        return this.genElement(node, scope);
+      case 2 /* Text */:
+        return this.genText(node);
+      case 3 /* Interpolation */:
+        return this.genInterpolation(node, scope);
+      case 4 /* Comment */:
+        return null;
+    }
+  }
+  // ---- Element generation -------------------------------------------------
+  genElement(node, scope) {
+    const ifDir = node.directives.find((d) => d.kind === "if");
+    if (ifDir) {
+      return this.genIf(node, ifDir, scope);
+    }
+    const forDir = node.directives.find((d) => d.kind === "for");
+    if (forDir) {
+      return this.genFor(node, forDir, scope);
+    }
+    if (isComponentTag(node.tag)) {
+      return this.genComponent(node, scope);
+    }
+    this.helpers.add("createElement");
+    const elVar = this.freshVar();
+    this.emit(`const ${elVar} = createElement('${node.tag}')`);
+    if (this.scopeId) {
+      this.helpers.add("setAttr");
+      this.emit(`setAttr(${elVar}, '${this.scopeId}', '')`);
+    }
+    for (const attr of node.attrs) {
+      this.helpers.add("setAttr");
+      if (attr.value === null) {
+        this.emit(`setAttr(${elVar}, '${escapeStr(attr.name)}', '')`);
+      } else {
+        this.emit(`setAttr(${elVar}, '${escapeStr(attr.name)}', '${escapeStr(attr.value)}')`);
+      }
+    }
+    for (const dir of node.directives) {
+      if (dir.kind === "if" || dir.kind === "for") continue;
+      this.genDirective(elVar, dir, scope);
+    }
+    for (const child of node.children) {
+      const childVar = this.genNode(child, scope);
+      if (childVar) {
+        this.helpers.add("appendChild");
+        this.emit(`appendChild(${elVar}, ${childVar})`);
+      }
+    }
+    return elVar;
+  }
+  // ---- Text & Interpolation -----------------------------------------------
+  genText(node) {
+    if (!node.content) return null;
+    this.helpers.add("createTextNode");
+    const v = this.freshVar();
+    this.emit(`const ${v} = createTextNode(${JSON.stringify(node.content)})`);
+    return v;
+  }
+  genInterpolation(node, scope) {
+    this.helpers.add("createTextNode");
+    this.helpers.add("createEffect");
+    this.helpers.add("setText");
+    const textVar = this.freshVar();
+    const expr = this.resolveExpression(node.expression, scope);
+    this.emit(`const ${textVar} = createTextNode('')`);
+    this.emit(`createEffect(() => setText(${textVar}, String(${expr})))`);
+    return textVar;
+  }
+  // ---- Directives ---------------------------------------------------------
+  genDirective(elVar, dir, scope) {
+    switch (dir.kind) {
+      case "on":
+        this.genOn(elVar, dir, scope);
+        break;
+      case "bind":
+        this.genBind(elVar, dir, scope);
+        break;
+      case "model":
+        this.genModel(elVar, dir, scope);
+        break;
+    }
+  }
+  genOn(elVar, dir, scope) {
+    this.helpers.add("addEventListener");
+    const event = dir.arg ?? "click";
+    const handler = this.resolveExpression(dir.expression, scope);
+    this.emit(`addEventListener(${elVar}, '${escapeStr(event)}', ${handler})`);
+  }
+  genBind(elVar, dir, scope) {
+    this.helpers.add("setAttr");
+    this.helpers.add("createEffect");
+    const attrName = dir.arg ?? "value";
+    const expr = this.resolveExpression(dir.expression, scope);
+    this.emit(`createEffect(() => setAttr(${elVar}, '${escapeStr(attrName)}', ${expr}))`);
+  }
+  genModel(elVar, dir, scope) {
+    this.helpers.add("setAttr");
+    this.helpers.add("addEventListener");
+    this.helpers.add("createEffect");
+    const signalRef = this.resolveExpression(dir.expression, scope);
+    this.emit(`createEffect(() => setAttr(${elVar}, 'value', ${signalRef}()))`);
+    this.emit(
+      `addEventListener(${elVar}, 'input', (e) => ${signalRef}.set(e.target.value))`
+    );
+  }
+  // ---- Structural: u-if ---------------------------------------------------
+  genIf(node, dir, scope) {
+    this.helpers.add("createIf");
+    const anchorVar = this.freshVar();
+    this.helpers.add("createComment");
+    this.emit(`const ${anchorVar} = createComment('u-if')`);
+    const condition = this.resolveExpression(dir.expression, scope);
+    const strippedNode = {
+      ...node,
+      directives: node.directives.filter((d) => d.kind !== "if")
+    };
+    const trueFnVar = this.freshVar();
+    const savedCode = this.code;
+    this.code = [];
+    const innerVar = this.genElement(strippedNode, scope);
+    const innerLines = [...this.code];
+    this.code = savedCode;
+    this.emit(`const ${trueFnVar} = () => {`);
+    for (const line of innerLines) {
+      this.emit(`  ${line}`);
+    }
+    this.emit(`  return ${innerVar}`);
+    this.emit(`}`);
+    this.emit(`createIf(${anchorVar}, () => Boolean(${condition}), ${trueFnVar})`);
+    return anchorVar;
+  }
+  // ---- Structural: u-for --------------------------------------------------
+  genFor(node, dir, scope) {
+    this.helpers.add("createFor");
+    const anchorVar = this.freshVar();
+    this.helpers.add("createComment");
+    this.emit(`const ${anchorVar} = createComment('u-for')`);
+    const forMatch = dir.expression.match(/^\s*(\w+)\s+in\s+(.+)$/);
+    if (!forMatch) {
+      throw new Error(`Invalid u-for expression: "${dir.expression}"`);
+    }
+    const itemName = forMatch[1];
+    const listExpr = this.resolveExpression(forMatch[2].trim(), scope);
+    const innerScope = new Set(scope);
+    innerScope.add(itemName);
+    const strippedNode = {
+      ...node,
+      directives: node.directives.filter((d) => d.kind !== "for")
+    };
+    const savedCode = this.code;
+    this.code = [];
+    const innerVar = this.genElement(strippedNode, innerScope);
+    const innerLines = [...this.code];
+    this.code = savedCode;
+    const renderFnVar = this.freshVar();
+    this.emit(`const ${renderFnVar} = (${itemName}, _index) => {`);
+    for (const line of innerLines) {
+      this.emit(`  ${line}`);
+    }
+    this.emit(`  return ${innerVar}`);
+    this.emit(`}`);
+    this.emit(`createFor(${anchorVar}, () => ${listExpr}, ${renderFnVar})`);
+    return anchorVar;
+  }
+  // ---- Component generation -----------------------------------------------
+  genComponent(node, scope) {
+    const compVar = this.freshVar();
+    const propEntries = [];
+    for (const a of node.attrs) {
+      if (a.value !== null) {
+        propEntries.push(`${a.name}: '${escapeStr(a.value)}'`);
+      } else {
+        propEntries.push(`${a.name}: true`);
+      }
+    }
+    for (const d of node.directives) {
+      if (d.kind === "bind" && d.arg) {
+        propEntries.push(`${d.arg}: ${this.resolveExpression(d.expression, scope)}`);
+      }
+    }
+    const propsStr = propEntries.length > 0 ? `{ ${propEntries.join(", ")} }` : "{}";
+    this.emit(`const ${compVar} = _ctx.${node.tag}(${propsStr})`);
+    return compVar;
+  }
+  // ---- Expression resolution ----------------------------------------------
+  /**
+   * Resolve a template expression to a JS expression.
+   *
+   * If the leading identifier is in `scope` (a u-for item variable), it is
+   * emitted as a bare variable reference.  Otherwise it is prefixed with
+   * `_ctx.` to access the component context.
+   */
+  resolveExpression(expr, scope) {
+    const trimmed = expr.trim();
+    if (!trimmed) return "''";
+    const leadIdMatch = trimmed.match(/^([a-zA-Z_$][\w$]*)/);
+    if (!leadIdMatch) {
+      return trimmed;
+    }
+    const leadId = leadIdMatch[1];
+    if (scope.has(leadId)) {
+      return trimmed;
+    }
+    if (trimmed.includes("=>")) {
+      return trimmed;
+    }
+    return `_ctx.${trimmed}`;
+  }
+  // ---- Utilities ----------------------------------------------------------
+  freshVar() {
+    return `_el${this.varCounter++}`;
+  }
+  emit(line) {
+    this.code.push(line);
+  }
+};
+function isComponentTag(tag) {
+  return /^[A-Z]/.test(tag);
+}
+function escapeStr(s) {
+  return s.replace(/\\/g, "\\\\").replace(/'/g, "\\'");
+}
+function generate(ast, options) {
+  const gen = new CodeGenerator(options);
+  return gen.generate(ast);
+}
+
+// src/style-compiler.ts
+function compileStyle(options) {
+  const { source, filename, scoped, scopeId: overrideScopeId } = options;
+  if (!scoped) {
+    return { css: source, scopeId: null };
+  }
+  const scopeId = overrideScopeId ?? generateScopeId(filename);
+  const css = scopeSelectors(source, scopeId);
+  return { css, scopeId };
+}
+function generateScopeId(filename) {
+  let hash = 5381;
+  for (let i = 0; i < filename.length; i++) {
+    hash = (hash << 5) + hash + filename.charCodeAt(i) >>> 0;
+  }
+  return `data-u-${hash.toString(16).padStart(8, "0")}`;
+}
+function scopeSelectors(css, scopeId) {
+  const result = [];
+  let pos = 0;
+  while (pos < css.length) {
+    if (/\s/.test(css[pos])) {
+      result.push(css[pos]);
+      pos++;
+      continue;
+    }
+    if (css[pos] === "/" && css[pos + 1] === "*") {
+      const endIdx = css.indexOf("*/", pos + 2);
+      if (endIdx === -1) {
+        result.push(css.slice(pos));
+        break;
+      }
+      result.push(css.slice(pos, endIdx + 2));
+      pos = endIdx + 2;
+      continue;
+    }
+    if (css[pos] === "@") {
+      const atResult = consumeAtRule(css, pos, scopeId);
+      result.push(atResult.text);
+      pos = atResult.end;
+      continue;
+    }
+    if (css[pos] === "}") {
+      result.push("}");
+      pos++;
+      continue;
+    }
+    const ruleResult = consumeRuleSet(css, pos, scopeId);
+    result.push(ruleResult.text);
+    pos = ruleResult.end;
+  }
+  return result.join("");
+}
+function consumeAtRule(css, pos, scopeId) {
+  const start = pos;
+  let depth = 0;
+  let headerEnd = -1;
+  for (let i = pos; i < css.length; i++) {
+    if (css[i] === "{") {
+      headerEnd = i;
+      break;
+    }
+    if (css[i] === ";") {
+      return { text: css.slice(start, i + 1), end: i + 1 };
+    }
+  }
+  if (headerEnd === -1) {
+    return { text: css.slice(start), end: css.length };
+  }
+  const header = css.slice(start, headerEnd);
+  const isKeyframes = /^@(?:-\w+-)?keyframes\b/.test(header.trim());
+  depth = 1;
+  let bodyStart = headerEnd + 1;
+  let bodyEnd = headerEnd + 1;
+  for (let i = bodyStart; i < css.length && depth > 0; i++) {
+    if (css[i] === "{") depth++;
+    else if (css[i] === "}") depth--;
+    bodyEnd = i;
+  }
+  const body = css.slice(bodyStart, bodyEnd);
+  let scopedBody;
+  if (isKeyframes) {
+    scopedBody = body;
+  } else {
+    scopedBody = scopeSelectors(body, scopeId);
+  }
+  return {
+    text: `${header}{${scopedBody}}`,
+    end: bodyEnd + 1
+  };
+}
+function consumeRuleSet(css, pos, scopeId) {
+  const braceIdx = css.indexOf("{", pos);
+  if (braceIdx === -1) {
+    return { text: css.slice(pos), end: css.length };
+  }
+  const selectorText = css.slice(pos, braceIdx);
+  let depth = 1;
+  let endIdx = braceIdx + 1;
+  for (; endIdx < css.length && depth > 0; endIdx++) {
+    if (css[endIdx] === "{") depth++;
+    else if (css[endIdx] === "}") depth--;
+  }
+  const declarations = css.slice(braceIdx + 1, endIdx - 1);
+  const scopedSelectors = selectorText.split(",").map((sel) => scopeSingleSelector(sel.trim(), scopeId)).join(", ");
+  return {
+    text: `${scopedSelectors} {${declarations}}`,
+    end: endIdx
+  };
+}
+function scopeSingleSelector(selector, scopeId) {
+  if (!selector) return selector;
+  const attr = `[${scopeId}]`;
+  const pseudoRe = /(?:::?[\w-]+(?:\([^)]*\))?)+$/;
+  const pseudoMatch = selector.match(pseudoRe);
+  if (pseudoMatch) {
+    const beforePseudo = selector.slice(0, pseudoMatch.index);
+    return `${beforePseudo}${attr}${pseudoMatch[0]}`;
+  }
+  return `${selector}${attr}`;
+}
+
+// src/index.ts
+function compile(source, options = {}) {
+  const filename = options.filename ?? "anonymous.utopia";
+  const descriptor = parse(source, filename);
+  let css = "";
+  let scopeId = null;
+  if (descriptor.style) {
+    const isScoped = "scoped" in descriptor.style.attrs;
+    const styleResult = compileStyle({
+      source: descriptor.style.content,
+      filename,
+      scoped: isScoped,
+      scopeId: options.scopeId
+    });
+    css = styleResult.css;
+    scopeId = styleResult.scopeId;
+  }
+  let renderModule = "";
+  if (descriptor.template) {
+    const templateResult = compileTemplate(descriptor.template.content, {
+      scopeId: scopeId ?? void 0
+    });
+    renderModule = templateResult.code;
+  }
+  const { imports, body } = splitModuleParts(renderModule);
+  const scriptContent = descriptor.script?.content ?? "";
+  const parts = [];
+  if (imports) {
+    parts.push(imports);
+  }
+  if (scriptContent.trim()) {
+    parts.push(scriptContent.trim());
+  }
+  if (body) {
+    parts.push(body);
+  }
+  const code = parts.join("\n\n") + "\n";
+  return { code, css };
+}
+function splitModuleParts(moduleCode) {
+  const idx = moduleCode.indexOf("\n\n");
+  if (idx === -1) {
+    return { imports: "", body: moduleCode };
+  }
+  const imports = moduleCode.slice(0, idx).trim();
+  const body = moduleCode.slice(idx).trim();
+  return { imports, body };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  SFCParseError,
+  compile,
+  compileStyle,
+  compileTemplate,
+  generateScopeId,
+  parse,
+  parseTemplate
+});