@ohos-ports/stacksjs-stx 0.2.287-beta.0

package/dist/component-library.js

@@ -0,0 +1,994 @@
+import { mkdir, readFile, readdir, stat, writeFile } from "node:fs/promises";
+import path from "node:path";
+const RESERVED_METHODS = new Set([
+  "constructor",
+  "connectedCallback",
+  "disconnectedCallback",
+  "attributeChangedCallback",
+  "adoptedCallback"
+]);
+function toPascalCase(value) {
+  return value.replace(/\.stx$/i, "").split(/[^a-z0-9]+/i).filter(Boolean).map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join("");
+}
+function toKebabCase(value) {
+  return value.replace(/([a-z0-9])([A-Z])/g, "$1-$2").replace(/[^a-z0-9]+/gi, "-").replace(/^-+|-+$/g, "").toLowerCase();
+}
+function validCustomElementTag(tag) {
+  return /^[a-z][.0-9_a-z-]*-[.0-9_a-z-]*$/.test(tag) && !tag.startsWith("xml") && !/[A-Z]/.test(tag);
+}
+function normalizeShadowMode(value) {
+  if (value === !0)
+    return "open";
+  if (value === "open" || value === "closed")
+    return value;
+  return !1;
+}
+async function discoverStxFiles(inputDir) {
+  const files = [];
+  async function visit(directory) {
+    const entries = await readdir(directory, { withFileTypes: !0 });
+    entries.sort((a, b) => a.name.localeCompare(b.name));
+    for (const entry of entries) {
+      const entryPath = path.join(directory, entry.name);
+      if (entry.isDirectory()) {
+        if (!entry.name.startsWith(".") && entry.name !== "node_modules")
+          await visit(entryPath);
+      } else if (entry.isFile() && entry.name.endsWith(".stx") && !/\.(?:test|spec)\.stx$/i.test(entry.name))
+        files.push(entryPath);
+    }
+  }
+  await visit(inputDir);
+  return files;
+}
+function parseMetadata(source, file) {
+  const match = source.match(/<script\b(?=[^>]*(?:\bcomponent\b|\bstx:component\b))[^>]*>([\s\S]*?)<\/script>/i);
+  if (!match)
+    return {};
+  const raw = match[1].trim();
+  if (!raw)
+    return {};
+  try {
+    return JSON.parse(raw);
+  } catch (error) {
+    throw Error(`${file}: <script component> must contain JSON metadata (${error.message})`);
+  }
+}
+function extractClientMethods(source, file) {
+  const methods = {}, scripts = [...source.matchAll(/<script\b([^>]*)>([\s\S]*?)<\/script>/gi)];
+  for (const script of scripts) {
+    if (!/\bclient\b/i.test(script[1]) || /\bcomponent\b|\bstx:component\b/i.test(script[1]))
+      continue;
+    let code;
+    try {
+      code = new Bun.Transpiler({ loader: "ts" }).transformSync(script[2]);
+    } catch (error) {
+      throw Error(`${file}: failed to transpile <script client> (${error.message})`);
+    }
+    const functionPattern = /(?:export\s+)?(?:async\s+)?function\s+([A-Za-z_$][\w$]*)\s*\(([^)]*)\)\s*\{/g;
+    let match;
+    while (match = functionPattern.exec(code)) {
+      const name = match[1];
+      if (RESERVED_METHODS.has(name))
+        throw Error(`${file}: client method "${name}" is reserved`);
+      const bodyStart = functionPattern.lastIndex;
+      let depth = 1, quote = "", escaped = !1, cursor = bodyStart;
+      for (;cursor < code.length && depth > 0; cursor++) {
+        const char = code[cursor];
+        if (escaped) {
+          escaped = !1;
+          continue;
+        }
+        if (quote) {
+          if (char === "\\")
+            escaped = !0;
+          else if (char === quote)
+            quote = "";
+          continue;
+        }
+        if (char === '"' || char === "'" || char === "`")
+          quote = char;
+        else if (char === "{")
+          depth++;
+        else if (char === "}")
+          depth--;
+      }
+      if (depth !== 0)
+        throw Error(`${file}: unterminated client function "${name}"`);
+      const asyncPrefix = match[0].includes("async") ? "async " : "";
+      methods[name] = `${asyncPrefix}${name}(${match[2]}) {${code.slice(bodyStart, cursor - 1)}}`;
+      functionPattern.lastIndex = cursor;
+    }
+  }
+  return methods;
+}
+function extractTemplate(source) {
+  const templateMatch = source.match(/<template\b(?![^>]*\bshadowrootmode\b)[^>]*>([\s\S]*?)<\/template>/i);
+  return (templateMatch ? templateMatch[1] : source).replace(/<script\b[^>]*>[\s\S]*?<\/script>/gi, "").replace(/<style\b[^>]*>[\s\S]*?<\/style>/gi, "").trim();
+}
+function extractStyles(source) {
+  return [...source.matchAll(/<style\b[^>]*>([\s\S]*?)<\/style>/gi)].map((match) => match[1].trim()).filter(Boolean).join(`
+
+`);
+}
+function typeFromDeclaration(declaration) {
+  if (!declaration)
+    return null;
+  const type = declaration.replace(/\s*\|\s*(?:undefined|null)\b/g, "").trim();
+  if (/^string$/.test(type))
+    return "string";
+  if (/^number$/.test(type))
+    return "number";
+  if (/^boolean$/.test(type))
+    return "boolean";
+  if (/^(?:'[^']*'|"[^"]*")(?:\s*\|\s*(?:'[^']*'|"[^"]*"))*$/.test(type))
+    return "string";
+  return "object";
+}
+function inferPropertyType(fallback) {
+  if (fallback === void 0)
+    return "object";
+  if (fallback === "true" || fallback === "false")
+    return "boolean";
+  if (/^-?\d+(?:\.\d+)?$/.test(fallback))
+    return "number";
+  if (/^['"`]/.test(fallback))
+    return "string";
+  return "object";
+}
+function literalValue(fallback) {
+  if (fallback === "true")
+    return !0;
+  if (fallback === "false")
+    return !1;
+  if (/^-?\d+(?:\.\d+)?$/.test(fallback))
+    return Number(fallback);
+  if (/^['"`]/.test(fallback))
+    return fallback.slice(1, -1);
+  try {
+    return JSON.parse(fallback);
+  } catch {
+    return;
+  }
+}
+function compileTemplateToRender(template) {
+  const parts = [];
+  let cursor = 0;
+  const source = template.replace(/\{\{--[\s\S]*?--\}\}/g, ""), directive = /@(if|elseif|else|endif|foreach|endforeach)\s*/g;
+  let match;
+  const expressionAt = (open) => {
+    if (source[open] !== "(")
+      return null;
+    let depth = 0, quote = "";
+    for (let index = open;index < source.length; index++) {
+      const char = source[index];
+      if (quote !== "") {
+        if (char === "\\")
+          index++;
+        else if (char === quote)
+          quote = "";
+        continue;
+      }
+      if (char === "'" || char === '"' || char === "`") {
+        quote = char;
+        continue;
+      }
+      if (char === "(")
+        depth++;
+      else if (char === ")") {
+        depth--;
+        if (depth === 0)
+          return { expression: source.slice(open + 1, index), end: index + 1 };
+      }
+    }
+    return null;
+  }, text = (raw) => {
+    if (raw === "")
+      return;
+    let index = 0;
+    const interpolation = /\{!!\s*([\s\S]*?)\s*!!\}|\{\{\s*([\s\S]*?)\s*\}\}/g;
+    let hit;
+    while (hit = interpolation.exec(raw)) {
+      if (hit.index > index)
+        parts.push(`out += ${JSON.stringify(raw.slice(index, hit.index))};`);
+      parts.push(hit[1] !== void 0 ? `out += __raw(${hit[1]});` : `out += __escape(${hit[2]});`);
+      index = hit.index + hit[0].length;
+    }
+    if (index < raw.length)
+      parts.push(`out += ${JSON.stringify(raw.slice(index))};`);
+  };
+  while (match = directive.exec(source)) {
+    text(source.slice(cursor, match.index));
+    cursor = match.index + match[0].length;
+    const parsed = match[1] === "if" || match[1] === "elseif" || match[1] === "foreach" ? expressionAt(cursor) : null;
+    if (parsed) {
+      cursor = parsed.end;
+      directive.lastIndex = parsed.end;
+    }
+    const expression = parsed?.expression;
+    switch (match[1]) {
+      case "if":
+        parts.push(`if (${expression}) {`);
+        break;
+      case "elseif":
+        parts.push(`} else if (${expression}) {`);
+        break;
+      case "else":
+        parts.push("} else {");
+        break;
+      case "endif":
+      case "endforeach":
+        parts.push("}");
+        break;
+      case "foreach": {
+        const pair = /^([\s\S]+?)\s+as\s+(?:([A-Za-z_$][\w$]*)\s*=>\s*)?([A-Za-z_$][\w$]*)$/.exec((expression || "").trim());
+        if (!pair) {
+          parts.push(`out += ${JSON.stringify(match[0] + (parsed ? `(${expression})` : ""))};`);
+          break;
+        }
+        const [, iterable, key, value] = pair;
+        parts.push(key ? `for (const [${key}, ${value}] of __entries(${iterable})) {` : `for (const ${value} of __values(${iterable})) {`);
+        break;
+      }
+    }
+  }
+  text(source.slice(cursor));
+  return parts.join(`
+    `);
+}
+export function parseDefaults(object) {
+  const body = object.trim().replace(/^\{/, "").replace(/\}$/, ""), pairs = [];
+  let index = 0;
+  while (index < body.length) {
+    const key = /\s*([A-Za-z_$][\w$]*)\s*:/y;
+    key.lastIndex = index;
+    const match = key.exec(body);
+    if (!match)
+      break;
+    index = key.lastIndex;
+    let depth = 0, quote = "";
+    const start = index;
+    while (index < body.length) {
+      const char = body[index];
+      if (quote) {
+        if (char === "\\")
+          index++;
+        else if (char === quote)
+          quote = "";
+      } else if (char === "'" || char === '"' || char === "`")
+        quote = char;
+      else if (char === "{" || char === "[" || char === "(")
+        depth++;
+      else if (char === "}" || char === "]" || char === ")")
+        depth--;
+      else if (char === "," && depth === 0)
+        break;
+      index++;
+    }
+    const value = body.slice(start, index).trim();
+    if (value)
+      pairs.push([match[1], value]);
+    index++;
+  }
+  return pairs;
+}
+function compileScriptScope(source, file, outputDir) {
+  const block = [...source.matchAll(/<script\b([^>]*)>([\s\S]*?)<\/script>/gi)].find((script) => !/\bcomponent\b|\bstx:component\b|\bclient\b/i.test(script[1]));
+  if (!block)
+    return { imports: [], body: "", propNames: [], defaults: {}, declared: {} };
+  let code = block[2];
+  const imports = [], propNames = [], defaults = {}, declared = {};
+  code = code.replace(/^\s*import\s+[\s\S]*?from\s*['"][^'"]+['"];?\s*$/gm, (statement) => {
+    if (/from\s*['"]stx['"]/.test(statement))
+      return "";
+    imports.push(statement.trim().replace(/(from\s*['"])(\.[^'"]*)(['"])/, (_all, open, specifier, close) => {
+      const target = path.resolve(path.dirname(file), specifier), rewritten = path.relative(outputDir, target);
+      return `${open}${rewritten.startsWith(".") ? rewritten : `./${rewritten}`}${close}`;
+    }));
+    return "";
+  });
+  const propMatch = /const\s*\{([^}]*)\}\s*=\s*(?:withDefaults\s*\(\s*)?defineProps\s*<[^>]*>\s*\(\s*\)\s*(?:,\s*(\{[\s\S]*?\})\s*,?\s*\))?/.exec(code);
+  if (propMatch) {
+    for (const name of propMatch[1].split(",")) {
+      const clean = name.split(":")[0].trim();
+      if (clean)
+        propNames.push(clean);
+    }
+    for (const [name, value] of parseDefaults(propMatch[2] || ""))
+      defaults[name] = value;
+    code = code.replace(propMatch[0], "");
+  }
+  for (const block of code.matchAll(/(?:export\s+)?interface\s+[A-Za-z_$][\w$]*\s*\{([\s\S]*?)\n\}/g))
+    for (const member of block[1].matchAll(/^\s*(?:\/\*\*[\s\S]*?\*\/\s*)?([A-Za-z_$][\w$]*)\??\s*:\s*([^\n;]+)/gm))
+      declared[member[1]] = member[2].trim();
+  code = code.replace(/(?:export\s+)?interface\s+[A-Za-z_$][\w$]*\s*\{[\s\S]*?\n\}/g, "");
+  return { imports, body: code.trim(), propNames, defaults, declared };
+}
+function compileEventDirectives(template) {
+  const eventTypes = new Set;
+  return { template: template.replace(/\s@([a-z][\w:-]*)(\.[\w.-]+)?\s*=\s*(["'])([A-Za-z_$][\w$]*)\3/gi, (_match, eventName, modifiers, _quote, method) => {
+    const event = eventName.toLowerCase();
+    eventTypes.add(event);
+    const normalizedModifiers = (modifiers || "").split(".").filter(Boolean).join(" ");
+    return ` data-stx-on-${event}="${method}"${normalizedModifiers ? ` data-stx-mod-${event}="${normalizedModifiers}"` : ""}`;
+  }), eventTypes: [...eventTypes].sort() };
+}
+function compileDynamicBindings(template) {
+  const bindings = [];
+  return { template: template.replace(/\s:([a-z][\w:-]*)\s*=\s*(["'])([\w$.]+)\2/gi, (_match, name, _quote, expression) => {
+    const id = bindings.length;
+    bindings.push({ id, name, expression });
+    return ` data-stx-bind-${id}=""`;
+  }), bindings };
+}
+function extractSlots(template) {
+  const names = new Set;
+  for (const match of template.matchAll(/<slot\b([^>]*)>/gi))
+    names.add(match[1].match(/\bname\s*=\s*["']([^"']+)["']/i)?.[1] || "");
+  return [...names].map((name) => ({ name }));
+}
+function extractCssProperties(styles) {
+  return [...new Set([...styles.matchAll(/(--[a-z0-9_-]+)\s*:/gi)].map((match) => match[1]))].sort().map((name) => ({ name }));
+}
+function normalizeProperty(name, property) {
+  if (!property || !new Set(["string", "number", "boolean", "object", "array"]).has(property.type))
+    throw Error(`Property "${name}" must declare one of: string, number, boolean, object, array`);
+  return {
+    ...property,
+    reflect: property.reflect ?? property.attribute !== !1
+  };
+}
+async function compileComponent(inputDir, entry, defaults) {
+  const sourcePath = path.isAbsolute(entry.file) ? entry.file : path.resolve(inputDir, entry.file), source = await readFile(sourcePath, "utf8"), metadata = parseMetadata(source, sourcePath), baseName = path.basename(sourcePath, ".stx"), name = entry.name || metadata.name || toPascalCase(baseName), inferredTag = `${toKebabCase(defaults.prefix || "stx")}-${toKebabCase(baseName)}`, tag = entry.tag || metadata.tag || inferredTag;
+  if (!name || !/^[A-Za-z_$][\w$]*$/.test(name))
+    throw Error(`${sourcePath}: invalid component class name "${name}"`);
+  if (!validCustomElementTag(tag))
+    throw Error(`${sourcePath}: invalid custom-element tag "${tag}"; tags must be lowercase and contain a hyphen`);
+  const propertyInput = entry.properties || metadata.properties || metadata.props || {}, properties = Object.fromEntries(Object.entries(propertyInput).map(([propertyName, property]) => [propertyName, normalizeProperty(propertyName, property)])), eventCompilation = compileEventDirectives(extractTemplate(source)), bindingCompilation = compileDynamicBindings(eventCompilation.template), scope = compileScriptScope(source, sourcePath, path.resolve(defaults.outputDir)), render = compileTemplateToRender(bindingCompilation.template);
+  for (const propertyName of scope.propNames) {
+    if (properties[propertyName])
+      continue;
+    const fallback = scope.defaults[propertyName];
+    properties[propertyName] = normalizeProperty(propertyName, {
+      type: typeFromDeclaration(scope.declared[propertyName]) ?? inferPropertyType(fallback),
+      ...fallback === void 0 ? {} : { default: literalValue(fallback) }
+    });
+  }
+  const metadataMethods = metadata.methods || {}, configuredMethods = entry.methods || {}, extractedMethods = extractClientMethods(source, sourcePath);
+  return {
+    file: path.relative(inputDir, sourcePath),
+    sourcePath,
+    name,
+    tag,
+    description: entry.description || metadata.description || "",
+    template: bindingCompilation.template,
+    styles: extractStyles(source),
+    shadowMode: normalizeShadowMode(entry.shadowDOM ?? metadata.shadowDOM ?? defaults.shadowDOM),
+    progressive: entry.progressive ?? metadata.progressive ?? defaults.progressive ?? !0,
+    properties,
+    events: entry.events || metadata.events || {},
+    methods: { ...metadataMethods, ...configuredMethods, ...extractedMethods },
+    eventTypes: eventCompilation.eventTypes,
+    bindings: bindingCompilation.bindings,
+    slots: extractSlots(bindingCompilation.template),
+    cssProperties: extractCssProperties(extractStyles(source)),
+    scope,
+    render
+  };
+}
+function runtimeModule() {
+  const rawInterpolation = JSON.stringify("\\{!!\\s*([\\w$.]+)\\s*!!\\}"), escapedInterpolation = JSON.stringify("\\{\\{\\s*([\\w$.]+)\\s*\\}\\}");
+  return `const HTMLElementBase = globalThis.HTMLElement || class {};
+
+const escapeHTML = (value) => String(value ?? '')
+  .replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;')
+  .replaceAll('"', '&quot;').replaceAll("'", '&#039;');
+
+const valueAt = (host, path) => {
+  const parts = path.trim().split('.');
+  let value = host;
+  for (const part of parts) value = value?.[part];
+  return typeof value === 'function' ? value.call(host) : value;
+};
+
+const deserialize = (value, type, fallback) => {
+  if (value === null) return type === 'boolean' ? false : fallback;
+  if (type === 'boolean') return value !== 'false' && value !== '0';
+  if (type === 'number') return Number(value);
+  if (type === 'object' || type === 'array') {
+    try { return JSON.parse(value); }
+    catch { return fallback; }
+  }
+  return value;
+};
+
+const serialize = (value, type) => {
+  if (value == null || value === false) return null;
+  if (type === 'boolean') return '';
+  if (type === 'object' || type === 'array') return JSON.stringify(value);
+  return String(value);
+};
+
+const cloneDefault = (value, type) => {
+  if (value == null || (type !== 'object' && type !== 'array')) return value;
+  if (typeof structuredClone === 'function') return structuredClone(value);
+  return JSON.parse(JSON.stringify(value));
+};
+
+const defaultFor = property => cloneDefault(
+  property.default ?? ({ string: '', number: 0, boolean: false, object: {}, array: [] })[property.type],
+  property.type,
+);
+
+export class StxElement extends HTMLElementBase {
+  static definition = {};
+  static get observedAttributes() { return this.definition.observedAttributes || []; }
+
+  constructor() {
+    super();
+    this._values = Object.create(null);
+    this._reflecting = false;
+    this._connected = false;
+    this._hasConnected = false;
+    this._initializing = false;
+    this._updatePending = false;
+    this._listeners = new Map();
+    const definition = this.constructor.definition;
+    for (const [name, property] of Object.entries(definition.properties || {})) {
+      this._values[name] = defaultFor(property);
+    }
+    if (definition.shadowMode && this.attachShadow && !this.shadowRoot) {
+      this._closedRoot = this.attachShadow({ mode: definition.shadowMode });
+    }
+  }
+
+  get updateComplete() { return this._updateComplete || Promise.resolve(); }
+  get renderRoot() { return this._closedRoot || this.shadowRoot || this; }
+
+  connectedCallback() {
+    if (this._connected) return;
+    this._connected = true;
+    this._initializing = true;
+    const definition = this.constructor.definition;
+    for (const [name, property] of Object.entries(definition.properties || {})) {
+      const attribute = property.attribute === false ? null : (property.attribute || name.replace(/[A-Z]/g, letter => '-' + letter.toLowerCase()));
+      if (attribute && this.hasAttribute?.(attribute)) this._values[name] = deserialize(this.getAttribute(attribute), property.type, defaultFor(property));
+    }
+    // Properties assigned before customElements.define() become own properties.
+    // Upgrade them after attributes so imperative state wins, matching the
+    // platform's property-first custom-element initialization convention.
+    for (const name of Object.keys(definition.properties || {})) this._upgradeProperty(name);
+    this._initializing = false;
+    const root = this.renderRoot;
+    const hasMarkup = [...(root.childNodes || [])].some(node => node.nodeType !== 3 || node.textContent.trim());
+    const firstConnection = !this._hasConnected;
+    if (!(firstConnection && definition.progressive && hasMarkup)) this._render();
+    else this._upgradeDeclarativeEvents();
+    this._bindEvents();
+    if (firstConnection) {
+      this._hasConnected = true;
+      this.setAttribute?.('hydrated', '');
+      this.dispatchEvent?.(new CustomEvent('stx:hydrated', { bubbles: true, composed: true }));
+    }
+  }
+
+  disconnectedCallback() {
+    this._connected = false;
+    for (const [event, listener] of this._listeners) this.renderRoot.removeEventListener(event, listener);
+    this._listeners.clear();
+  }
+
+  attributeChangedCallback(attribute, oldValue, newValue) {
+    if (oldValue === newValue || this._reflecting) return;
+    const definition = this.constructor.definition;
+    const name = definition.attributeToProperty?.[attribute];
+    if (!name) return;
+    const property = definition.properties[name];
+    const value = deserialize(newValue, property.type, defaultFor(property));
+    if (!Object.is(this._values[name], value)) {
+      this._values[name] = value;
+      this.requestUpdate();
+    }
+  }
+
+  /**
+   * The props a compiled render reads.
+   *
+   * Its own method rather than _values directly, so a component that sets a
+   * property before upgrade still sees it, and so the generated code has one
+   * name to depend on rather than a private field's shape.
+   */
+  _props() {
+    return this._values;
+  }
+
+  requestUpdate() {
+    if (!this._connected || this._initializing || this._updatePending) return this.updateComplete;
+    this._updatePending = true;
+    this._updateComplete = new Promise((resolve) => {
+      queueMicrotask(() => {
+        this._updatePending = false;
+        if (this._connected) this._render();
+        resolve();
+      });
+    });
+    return this._updateComplete;
+  }
+
+  emit(name, detail, options = {}) {
+    return this.dispatchEvent(new CustomEvent(name, {
+      detail, bubbles: true, composed: true, ...options,
+    }));
+  }
+
+  _upgradeProperty(name) {
+    if (!Object.prototype.hasOwnProperty.call(this, name)) return;
+    const value = this[name];
+    delete this[name];
+    this[name] = value;
+  }
+
+  _upgradeDeclarativeEvents() {
+    for (const element of this.renderRoot.querySelectorAll?.('*') || []) {
+      const names = element.getAttributeNames?.() || [...(element.attributes || [])].filter(Boolean).map(attribute => attribute.name);
+      for (const attributeName of names) {
+        if (!attributeName?.startsWith('@')) continue;
+        const [event, ...modifiers] = attributeName.slice(1).split('.');
+        element.setAttribute('data-stx-on-' + event, element.getAttribute(attributeName));
+        if (modifiers.length) element.setAttribute('data-stx-mod-' + event, modifiers.join(' '));
+        element.removeAttribute(attributeName);
+      }
+    }
+  }
+
+  _bindEvents() {
+    for (const event of this.constructor.definition.eventTypes || []) {
+      if (this._listeners.has(event)) continue;
+      const listener = ($event) => {
+        const selector = '[data-stx-on-' + event + ']';
+        const target = $event.target?.closest?.(selector);
+        if (!target || !this.renderRoot.contains(target)) return;
+        const modifiers = (target.getAttribute('data-stx-mod-' + event) || '').split(' ');
+        if (modifiers.includes('prevent')) $event.preventDefault();
+        if (modifiers.includes('stop')) $event.stopPropagation();
+        const method = target.getAttribute('data-stx-on-' + event);
+        if (typeof this[method] === 'function') this[method]($event);
+      };
+      this.renderRoot.addEventListener(event, listener);
+      this._listeners.set(event, listener);
+    }
+  }
+
+  _render() {
+    const definition = this.constructor.definition;
+    const root = this.renderRoot;
+    const active = root.activeElement || (root.contains?.(globalThis.document?.activeElement) ? globalThis.document.activeElement : null);
+    const focusKey = active && (active.getAttribute?.('data-key') || active.id || active.getAttribute?.('name'));
+    const selection = active && 'selectionStart' in active ? [active.selectionStart, active.selectionEnd] : null;
+    // A compiled component renders itself: the control flow and the derived
+    // values were turned into JavaScript at build time, so there is nothing to
+    // interpret here and nothing that needs an eval the page's CSP forbids.
+    // The string template remains for components that carry no logic.
+    let html = typeof this.render === 'function'
+      ? this.render(RENDER_HELPERS)
+      : definition.template
+        .replace(new RegExp(${rawInterpolation}, 'g'), (_match, expression) => String(valueAt(this, expression) ?? ''))
+        .replace(new RegExp(${escapedInterpolation}, 'g'), (_match, expression) => escapeHTML(valueAt(this, expression)));
+    if (definition.shadowMode && definition.styles) html = '<style>' + definition.styles + '</style>' + html;
+    root.innerHTML = html;
+    this._applyBindings();
+    this._bindEvents();
+    if (focusKey) {
+      const escaped = globalThis.CSS?.escape ? globalThis.CSS.escape(focusKey) : focusKey.replace(/["\\\\]/g, '\\$&');
+      const next = root.querySelector('[data-key="' + escaped + '"],#' + escaped + ',[name="' + escaped + '"]');
+      next?.focus?.();
+      if (selection && next?.setSelectionRange) next.setSelectionRange(selection[0], selection[1]);
+    }
+    this.dispatchEvent?.(new CustomEvent('stx:updated', { bubbles: false }));
+  }
+
+  _applyBindings() {
+    for (const binding of this.constructor.definition.bindings || []) {
+      const element = this.renderRoot.querySelector('[data-stx-bind-' + binding.id + ']');
+      if (!element) continue;
+      const value = valueAt(this, binding.expression);
+      if (binding.name === 'class') element.className = value || '';
+      else if (binding.name === 'style' && typeof value === 'object') {
+        Object.assign(element.style, value);
+      }
+      else if (typeof value === 'boolean') {
+        element.toggleAttribute(binding.name, value);
+        if (binding.name in element) element[binding.name] = value;
+      }
+      else if (value == null || value === false) element.removeAttribute(binding.name);
+      else element.setAttribute(binding.name, String(value));
+    }
+  }
+}
+
+/**
+ * What a compiled render is handed.
+ *
+ * Passed in rather than closed over so the generated code names no globals, and
+ * a component module stays readable on its own: __escape is visibly a
+ * parameter, not something the bundler happened to leave in scope.
+ */
+const RENDER_HELPERS = {
+  escape: escapeHTML,
+  // The raw form is the author declaring the value is markup. Null becomes an
+  // empty string rather than the word "null", which is the only sensible
+  // reading of a missing fragment.
+  raw: (value) => String(value ?? ''),
+  // A loop over something absent runs zero times. Throwing here would fail a
+  // whole page over one empty list, which is never what the author meant.
+  values: (value) => value == null ? [] : (value[Symbol.iterator] ? value : Object.values(value)),
+  entries: (value) => value == null ? [] : (Array.isArray(value) ? value.entries() : Object.entries(value)),
+};
+
+export function defineComponent(Component, definition) {
+  const properties = definition.properties || {};
+  const attributeToProperty = {};
+  const observedAttributes = [];
+  for (const [name, property] of Object.entries(properties)) {
+    const attribute = property.attribute === false ? null : (property.attribute || name.replace(/[A-Z]/g, letter => '-' + letter.toLowerCase()));
+    if (attribute) {
+      attributeToProperty[attribute] = name;
+      observedAttributes.push(attribute);
+    }
+    Object.defineProperty(Component.prototype, name, {
+      configurable: true,
+      enumerable: true,
+      get() { return this._values[name]; },
+      set(value) {
+        const oldValue = this._values[name];
+        if (Object.is(oldValue, value)) return;
+        this._values[name] = value;
+        if (property.reflect && attribute && !this._reflecting) {
+          const serialized = serialize(value, property.type);
+          this._reflecting = true;
+          if (serialized === null) this.removeAttribute(attribute);
+          else this.setAttribute(attribute, serialized);
+          this._reflecting = false;
+        }
+        this.requestUpdate();
+        this.dispatchEvent?.(new CustomEvent(name + '-changed', {
+          detail: { value, oldValue }, bubbles: true, composed: true,
+        }));
+      },
+    });
+  }
+  Component.definition = { ...definition, attributeToProperty, observedAttributes };
+  const registry = globalThis.customElements || globalThis.window?.customElements;
+  if (registry && !registry.get(definition.tag)) {
+    registry.define(definition.tag, Component);
+  }
+  return Component;
+}
+`;
+}
+function componentModule(component) {
+  const definition = JSON.stringify({
+    tag: component.tag,
+    template: component.template,
+    styles: component.styles,
+    shadowMode: component.shadowMode,
+    progressive: component.progressive,
+    properties: component.properties,
+    eventTypes: component.eventTypes,
+    bindings: component.bindings
+  }, null, 2), methodCode = Object.entries(component.methods).map(([name, body]) => {
+    if (RESERVED_METHODS.has(name))
+      throw Error(`${component.sourcePath}: method "${name}" is reserved`);
+    if (/^(?:async\s+)?[A-Za-z_$][\w$]*\s*\(/.test(body.trim()))
+      return `  ${body.trim()}`;
+    return `  ${name}($event) {
+${body}
+  }`;
+  }).join(`
+
+`), scope = component.scope, destructured = [...new Set([...Object.keys(component.properties), ...scope.propNames])].map((name) => scope.defaults[name] === void 0 ? name : `${name} = ${scope.defaults[name]}`).join(", "), indent = (code) => code.split(`
+`).map((line) => line.trim() === "" ? line : `    ${line}`).join(`
+`);
+  let renderMethod = "";
+  if (component.render.trim() !== "" || scope.body !== "" || destructured !== "") {
+    const inner = [
+      destructured ? `const { ${destructured} } = this._props();` : "",
+      scope.body,
+      "let out = '';",
+      component.render,
+      "return out;"
+    ].filter(Boolean).join(`
+`);
+    let compiled;
+    try {
+      const wrapped = new Bun.Transpiler({ loader: "ts" }).transformSync(`export function __render(__helpers) {
+${inner}
+}`), opening = wrapped.indexOf("{"), closing = wrapped.lastIndexOf("}");
+      compiled = wrapped.slice(opening + 1, closing).trim();
+    } catch (error) {
+      throw Error(`${component.sourcePath}: failed to compile render (${error.message})`);
+    }
+    renderMethod = `
+  render(__helpers) {
+    const { escape: __escape, raw: __raw, values: __values, entries: __entries } = __helpers;
+${indent(compiled.trim())}
+  }
+`;
+  }
+  return `import { StxElement, defineComponent } from './runtime.js';
+${scope.imports.length ? `${scope.imports.join(`
+`)}
+` : ""}
+/** ${component.description || `${component.name} web component generated from ${component.file}.`} */
+export class ${component.name} extends StxElement {
+${methodCode}${renderMethod}
+}
+
+defineComponent(${component.name}, ${definition});
+export default ${component.name};
+`;
+}
+function typeForProperty(property) {
+  switch (property.type) {
+    case "boolean":
+      return "boolean";
+    case "number":
+      return "number";
+    case "array":
+      return "unknown[]";
+    case "object":
+      return "Record<string, unknown>";
+    default:
+      return "string";
+  }
+}
+function componentDeclaration(component) {
+  const props = Object.entries(component.properties).map(([name, property]) => `  ${name}${property.required ? "" : "?"}: ${typeForProperty(property)}`).join(`
+`), fields = Object.entries(component.properties).map(([name, property]) => `  ${name}: ${typeForProperty(property)}`).join(`
+`), events = Object.entries(component.events).map(([name, event]) => `  ${JSON.stringify(name)}: CustomEvent<${event.detailType || "unknown"}>`).join(`
+`), methods = Object.keys(component.methods).map((name) => `  ${name}($event?: Event): unknown`).join(`
+`);
+  return `export interface ${component.name}Props {
+${props}
+}
+
+export interface ${component.name}EventMap {
+${events}
+}
+
+export declare class ${component.name} extends HTMLElement {
+${fields}
+${methods}
+  readonly updateComplete: Promise<void>
+  requestUpdate(): Promise<void>
+  emit<T = unknown>(name: string, detail?: T, options?: CustomEventInit<T>): boolean
+}
+
+declare global {
+  interface HTMLElementTagNameMap {
+    ${JSON.stringify(component.tag)}: ${component.name}
+  }
+}
+
+export default ${component.name}
+`;
+}
+function customElementsDeclaration(components) {
+  return `declare global {
+  namespace JSX {
+    interface IntrinsicElements {
+${components.map((component) => {
+    const props = Object.entries(component.properties).map(([name, property]) => `      ${JSON.stringify(name)}?: ${typeForProperty(property)}`).join(`
+`), events = Object.keys(component.events).map((event) => {
+      return `      ${`on${event.split(/[-:]/).map((part) => part.charAt(0).toUpperCase() + part.slice(1)).join("")}`}?: (event: CustomEvent<${component.events[event].detailType || "unknown"}>) => void`;
+    }).join(`
+`);
+    return `    ${JSON.stringify(component.tag)}: {
+${props}
+${events}
+      children?: unknown
+      slot?: string
+      class?: string
+      className?: string
+    }`;
+  }).join(`
+`)}
+    }
+  }
+}
+
+export {}
+`;
+}
+function customElementsManifest(components) {
+  return {
+    schemaVersion: "1.0.0",
+    modules: components.map((component) => ({
+      kind: "javascript-module",
+      path: `./${component.tag}.js`,
+      declarations: [{
+        kind: "class",
+        name: component.name,
+        description: component.description || void 0,
+        customElement: !0,
+        tagName: component.tag,
+        members: Object.entries(component.properties).map(([name, property]) => ({
+          kind: "field",
+          name,
+          description: property.description,
+          type: { text: typeForProperty(property) },
+          default: property.default === void 0 ? void 0 : JSON.stringify(property.default),
+          attribute: property.attribute === !1 ? void 0 : property.attribute || toKebabCase(name),
+          reflects: property.reflect
+        })),
+        events: Object.entries(component.events).map(([name, event]) => ({
+          name,
+          description: event.description,
+          type: { text: `CustomEvent<${event.detailType || "unknown"}>` }
+        })),
+        slots: component.slots,
+        cssProperties: component.cssProperties
+      }],
+      exports: [{ kind: "js", name: component.name, declaration: { name: component.name, module: `./${component.tag}.js` } }]
+    }))
+  };
+}
+function scopeLightDomCss(component) {
+  if (!component.styles)
+    return "";
+  const lightDomStyles = component.styles.replace(/:host\b/g, ":scope");
+  if (/\@scope\s*\(/.test(lightDomStyles))
+    return lightDomStyles;
+  return `@scope (${component.tag}) {
+${lightDomStyles}
+}`;
+}
+function minifyCss(css) {
+  return css.replace(/\/\*[\s\S]*?\*\//g, "").replace(/\s+/g, " ").replace(/\s*([{}:;,])\s*/g, "$1").replace(/;}/g, "}").trim();
+}
+function ssrModule(components) {
+  const rawInterpolation = JSON.stringify("\\{!!\\s*([\\w$.]+)\\s*!!\\}"), escapedInterpolation = JSON.stringify("\\{\\{\\s*([\\w$.]+)\\s*\\}\\}"), slotPattern = JSON.stringify('<slot(?:\\s+name=["\\\']([^"\\\']+)["\\\'])?\\s*\\/?>(?:<\\/slot>)?'), definitions = Object.fromEntries(components.map((component) => [component.tag, {
+    template: component.template,
+    styles: component.styles,
+    shadowMode: component.shadowMode,
+    properties: component.properties
+  }])), renderers = components.map((component) => `export const render${component.name} = (props = {}, slots = {}) => renderComponent('${component.tag}', props, slots);`).join(`
+`);
+  return `const definitions = ${JSON.stringify(definitions, null, 2)};
+const escapeHTML = (value) => String(value ?? '')
+  .replaceAll('&', '&amp;').replaceAll('<', '&lt;').replaceAll('>', '&gt;')
+  .replaceAll('"', '&quot;').replaceAll("'", '&#039;');
+const valueAt = (values, path) => path.trim().split('.').reduce((value, part) => value?.[part], values);
+
+export function renderComponent(tag, props = {}, slots = {}) {
+  const definition = definitions[tag];
+  if (!definition) throw new Error('Unknown STX component: ' + tag);
+  const values = Object.fromEntries(Object.entries(definition.properties).map(([name, property]) => [name, property.default]));
+  Object.assign(values, props);
+  let template = definition.template
+    .replace(new RegExp(${rawInterpolation}, 'g'), (_match, expression) => String(valueAt(values, expression) ?? ''))
+    .replace(new RegExp(${escapedInterpolation}, 'g'), (_match, expression) => escapeHTML(valueAt(values, expression)))
+    .replace(new RegExp(${slotPattern}, 'gi'), (_match, name) => String(slots[name || 'default'] ?? ''));
+  const attributes = Object.entries(definition.properties).flatMap(([name, property]) => {
+    if (property.attribute === false || !(name in props)) return [];
+    const attribute = property.attribute || name.replace(/[A-Z]/g, letter => '-' + letter.toLowerCase());
+    const value = props[name];
+    if (value == null || value === false) return [];
+    if (value === true) return [attribute];
+    const serialized = typeof value === 'object' ? JSON.stringify(value) : value;
+    return [attribute + '=\\"' + escapeHTML(serialized) + '\\"'];
+  }).join(' ');
+  if (definition.shadowMode) {
+    template = '<template shadowrootmode="' + definition.shadowMode + '">' +
+      (definition.styles ? '<style>' + definition.styles + '</style>' : '') + template + '</template>' +
+      String(slots.default ?? '');
+  }
+  return '<' + tag + (attributes ? ' ' + attributes : '') + '>' + template + '</' + tag + '>';
+}
+
+${renderers}
+`;
+}
+export async function buildComponentLibrary(config) {
+  const inputDir = path.resolve(config.inputDir), outputDir = path.resolve(config.outputDir);
+  if (!(await stat(inputDir).catch(() => null))?.isDirectory())
+    throw Error(`Component-library input directory does not exist: ${inputDir}`);
+  const entries = config.components?.length ? config.components : (await discoverStxFiles(inputDir)).map((file) => ({ file }));
+  if (!entries.length)
+    throw Error(`No .stx components found in ${inputDir}`);
+  const components = await Promise.all(entries.map((entry) => compileComponent(inputDir, entry, config)));
+  components.sort((a, b) => a.tag.localeCompare(b.tag));
+  const duplicateTags = components.filter((component, index) => components.findIndex((item) => item.tag === component.tag) !== index);
+  if (duplicateTags.length)
+    throw Error(`Duplicate custom-element tag: ${duplicateTags[0].tag}`);
+  const duplicateNames = components.filter((component, index) => components.findIndex((item) => item.name === component.name) !== index);
+  if (duplicateNames.length)
+    throw Error(`Duplicate component class name: ${duplicateNames[0].name}`);
+  await mkdir(outputDir, { recursive: !0 });
+  const files = [], emit = async (filename, content) => {
+    const target = path.join(outputDir, filename);
+    await writeFile(target, content.endsWith(`
+`) ? content : `${content}
+`, "utf8");
+    files.push(target);
+    return target;
+  };
+  await emit("runtime.js", runtimeModule());
+  for (const component of components) {
+    await emit(`${component.tag}.js`, componentModule(component));
+    if (config.declarations !== !1)
+      await emit(`${component.tag}.d.ts`, componentDeclaration(component));
+    if (config.css !== !1 && component.styles) {
+      const css = component.shadowMode ? component.styles : scopeLightDomCss(component);
+      await emit(`${component.tag}.css`, config.minify ? minifyCss(css) : css);
+    }
+  }
+  const indexSource = components.map((component) => `export { ${component.name}, default as ${component.name}Element } from './${component.tag}.js';`).join(`
+`);
+  await emit("index.js", indexSource);
+  await emit("ssr.js", ssrModule(components));
+  if (config.declarations !== !1) {
+    await emit("index.d.ts", components.map((component) => `export * from './${component.tag}.js'`).join(`
+`));
+    await emit("custom-elements.d.ts", customElementsDeclaration(components));
+    await emit("ssr.d.ts", `${components.map((component) => `export declare const render${component.name}: (props?: ${component.name}Props, slots?: Record<string, string>) => string`).join(`
+`)}
+export declare function renderComponent(tag: string, props?: Record<string, unknown>, slots?: Record<string, string>): string
+${components.map((component) => `import type { ${component.name}Props } from './${component.tag}.js'`).join(`
+`)}`);
+  }
+  let manifest;
+  if (config.manifest !== !1)
+    manifest = await emit("custom-elements.json", JSON.stringify(customElementsManifest(components), null, 2));
+  let cssBundle;
+  if (config.css !== !1) {
+    const bundledCss = components.filter((component) => !component.shadowMode && component.styles).map(scopeLightDomCss).join(`
+
+`);
+    if (bundledCss)
+      cssBundle = await emit("bundle.css", config.minify ? minifyCss(bundledCss) : bundledCss);
+  }
+  let bundle;
+  if (config.bundle !== !1) {
+    bundle = path.join(outputDir, "bundle.js");
+    let result;
+    try {
+      result = await Bun.build({
+        entrypoints: [path.join(outputDir, "index.js")],
+        outdir: outputDir,
+        naming: "bundle.js",
+        target: "browser",
+        format: "esm",
+        minify: config.minify ?? !0,
+        sourcemap: config.sourcemap || "none"
+      });
+    } catch (error) {
+      const logs = error instanceof AggregateError ? error.errors : [error], details = logs.map((log) => String(log).trim()).filter(Boolean).join(`
+`);
+      throw AggregateError(logs, `Failed to bundle component library${details ? `
+${details}` : ""}`);
+    }
+    if (!result.success) {
+      const details = result.logs.map((log) => String(log).trim()).filter(Boolean).join(`
+`);
+      throw AggregateError(result.logs, `Failed to bundle component library${details ? `
+${details}` : ""}`);
+    }
+    files.push(bundle);
+    if (config.sourcemap === "external")
+      files.push(`${bundle}.map`);
+  }
+  const sizes = await Promise.all(files.map(async (file) => (await stat(file)).size));
+  return {
+    components: components.map((component) => ({
+      name: component.name,
+      tag: component.tag,
+      source: component.sourcePath,
+      module: path.join(outputDir, `${component.tag}.js`)
+    })),
+    files,
+    manifest,
+    bundle,
+    cssBundle,
+    totalBytes: sizes.reduce((total, size) => total + size, 0)
+  };
+}