idml-ui 0.1.0

package/dist/server.cjs

@@ -0,0 +1,1236 @@
+"use strict";
+var __create = Object.create;
+var __defProp = Object.defineProperty;
+var __getOwnPropDesc = Object.getOwnPropertyDescriptor;
+var __getOwnPropNames = Object.getOwnPropertyNames;
+var __getProtoOf = Object.getPrototypeOf;
+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 __toESM = (mod, isNodeMode, target) => (target = mod != null ? __create(__getProtoOf(mod)) : {}, __copyProps(
+  // If the importer is in node compatibility mode or this is not an ESM
+  // file that has been converted to a CommonJS file using a Babel-
+  // compatible transform (i.e. "__esModule" has not been set), then set
+  // "default" to the CommonJS "module.exports" for node compatibility.
+  isNodeMode || !mod || !mod.__esModule ? __defProp(target, "default", { value: mod, enumerable: true }) : target,
+  mod
+));
+var __toCommonJS = (mod) => __copyProps(__defProp({}, "__esModule", { value: true }), mod);
+
+// src/server.ts
+var server_exports = {};
+__export(server_exports, {
+  addSSEWriter: () => addSSEWriter,
+  parseIdml: () => parseIdml,
+  startWatcher: () => startWatcher,
+  stopWatcher: () => stopWatcher,
+  withUIConfig: () => withUIConfig
+});
+module.exports = __toCommonJS(server_exports);
+
+// src/next-plugin/index.ts
+var import_node_path = __toESM(require("path"), 1);
+function withUIConfig(options = {}) {
+  const {
+    configPath = "./ui.config.json",
+    editorEnabled = process.env.NODE_ENV === "development"
+  } = options;
+  const resolvedConfigPath = import_node_path.default.resolve(process.cwd(), configPath);
+  return function(nextConfig) {
+    return {
+      ...nextConfig,
+      env: {
+        ...nextConfig.env,
+        ISD_UI_CONFIG_PATH: resolvedConfigPath,
+        ISD_UI_EDITOR_ENABLED: String(editorEnabled)
+      },
+      async rewrites() {
+        const existing = await nextConfig.rewrites?.();
+        const isdRewrites = editorEnabled ? [
+          {
+            source: "/_isd-editor",
+            destination: "/isd/editor"
+          },
+          {
+            source: "/_isd-editor/:path*",
+            destination: "/isd/editor/:path*"
+          }
+        ] : [];
+        if (Array.isArray(existing)) {
+          return [...existing, ...isdRewrites];
+        }
+        return {
+          beforeFiles: [...existing?.beforeFiles ?? []],
+          afterFiles: [...existing?.afterFiles ?? [], ...isdRewrites],
+          fallback: [...existing?.fallback ?? []]
+        };
+      }
+    };
+  };
+}
+
+// src/next-plugin/watcher.ts
+var import_chokidar = __toESM(require("chokidar"), 1);
+var writers = /* @__PURE__ */ new Set();
+var watcher = null;
+function startWatcher(configPath) {
+  if (watcher) return;
+  watcher = import_chokidar.default.watch(configPath, {
+    persistent: true,
+    ignoreInitial: true,
+    awaitWriteFinish: { stabilityThreshold: 150, pollInterval: 50 }
+  });
+  watcher.on("change", () => {
+    broadcastConfigChange();
+  });
+  watcher.on("error", (err) => {
+    console.error("[idml] Watcher error:", err);
+  });
+}
+async function stopWatcher() {
+  if (!watcher) return;
+  await watcher.close();
+  watcher = null;
+}
+function addSSEWriter(writer) {
+  writers.add(writer);
+  return () => writers.delete(writer);
+}
+function broadcastConfigChange() {
+  const encoder = new TextEncoder();
+  const message = encoder.encode(`data: ${JSON.stringify({ type: "config:change", ts: Date.now() })}
+
+`);
+  for (const writer of writers) {
+    writer.write(message).catch(() => {
+      writers.delete(writer);
+    });
+  }
+}
+
+// src/parser/idml-parser.ts
+var isDimRef = (d) => typeof d === "object" && d !== null && "ref" in d;
+var SINGLE_CHAR_TOKENS = {
+  "(": "LPAREN",
+  ")": "RPAREN",
+  "[": "LBRACKET",
+  "]": "RBRACKET",
+  "{": "LBRACE",
+  "}": "RBRACE",
+  ",": "COMMA",
+  ":": "COLON",
+  "?": "QUESTION",
+  "!": "BANG"
+};
+var MAX_LINE_WIDTH = 80;
+function validateSource(source) {
+  const lines = source.split("\n");
+  let codeStarted = false;
+  lines.forEach((line, idx) => {
+    const lineNo = idx + 1;
+    if (line.length > MAX_LINE_WIDTH) {
+      throw new Error(
+        `[idml] line ${lineNo} is ${line.length} columns; the limit is ${MAX_LINE_WIDTH}`
+      );
+    }
+    const trimmed = line.trim();
+    if (trimmed === "") return;
+    if (trimmed.startsWith("#")) {
+      if (codeStarted) {
+        throw new Error(
+          `[idml] line ${lineNo}: comments are only allowed in the header block at the very top of the file, before any code`
+        );
+      }
+      return;
+    }
+    codeStarted = true;
+  });
+}
+function tokenize(source) {
+  validateSource(source);
+  const stripped = source.split("\n").map((line) => line.trimStart().startsWith("#") ? "" : line).join("\n");
+  const tokens = [];
+  let i = 0;
+  while (i < stripped.length) {
+    if (/\s/.test(stripped[i])) {
+      i++;
+      continue;
+    }
+    if (stripped[i] === "." && stripped[i + 1] === "/") {
+      let j = i + 2;
+      while (j < stripped.length && /[\w/-]/.test(stripped[j])) j++;
+      tokens.push({ type: "ROUTE", value: "/" + stripped.slice(i + 2, j) });
+      i = j;
+      continue;
+    }
+    if (stripped[i] === "#" && /[0-9a-fA-F]/.test(stripped[i + 1] ?? "")) {
+      let j = i + 1;
+      while (j < stripped.length && /[0-9a-fA-F]/.test(stripped[j])) j++;
+      tokens.push({ type: "COLOR", value: stripped.slice(i, j) });
+      i = j;
+      continue;
+    }
+    if (stripped[i] === "@" && /[a-zA-Z_]/.test(stripped[i + 1] ?? "")) {
+      let j = i + 1;
+      while (j < stripped.length && /[\w.-]/.test(stripped[j])) j++;
+      tokens.push({ type: "VALUE_REF", value: stripped.slice(i + 1, j) });
+      i = j;
+      continue;
+    }
+    if (stripped[i] === "~" && /[a-zA-Z_]/.test(stripped[i + 1] ?? "")) {
+      let j = i + 1;
+      while (j < stripped.length && /[\w-]/.test(stripped[j])) j++;
+      tokens.push({ type: "MODEL_REF", value: stripped.slice(i + 1, j) });
+      i = j;
+      continue;
+    }
+    if (stripped[i] === "<") {
+      throw new Error(
+        "[idml] inline `<...>` style blocks are no longer supported; declare a styled variant (Name:BaseType) and apply it instead"
+      );
+    }
+    if (stripped[i] === "`") {
+      let j = i + 1;
+      while (j < stripped.length && stripped[j] !== "`") j++;
+      tokens.push({ type: "CLASS_BLOCK", value: stripped.slice(i + 1, j).trim() });
+      i = j + 1;
+      continue;
+    }
+    if (stripped[i] in SINGLE_CHAR_TOKENS) {
+      tokens.push({ type: SINGLE_CHAR_TOKENS[stripped[i]] });
+      i++;
+      continue;
+    }
+    if (stripped[i] === '"') {
+      let j = i + 1;
+      while (j < stripped.length && stripped[j] !== '"') {
+        if (stripped[j] === "\\") j++;
+        j++;
+      }
+      tokens.push({ type: "STRING", value: stripped.slice(i + 1, j) });
+      i = j + 1;
+      continue;
+    }
+    if (/\d/.test(stripped[i])) {
+      let j = i;
+      while (j < stripped.length && /[\d.]/.test(stripped[j])) j++;
+      tokens.push({ type: "NUMBER", value: parseFloat(stripped.slice(i, j)) });
+      i = j;
+      continue;
+    }
+    if (/[a-zA-Z_]/.test(stripped[i])) {
+      let j = i;
+      while (j < stripped.length && /[\w-]/.test(stripped[j])) j++;
+      tokens.push({ type: "IDENT", value: stripped.slice(i, j) });
+      i = j;
+      continue;
+    }
+    throw new Error(`[idml] Unexpected character '${stripped[i]}' at position ${i}`);
+  }
+  return tokens;
+}
+function applyStyleProp(key, val, result) {
+  switch (key) {
+    case "bg":
+      result.backgroundColor = val;
+      break;
+    case "fg":
+      result.color = val;
+      break;
+    case "size":
+      result.fontSize = val.endsWith("vw") ? val : `${val}vw`;
+      break;
+    case "font":
+      result.fontFamily = val;
+      break;
+    case "weight":
+      result.fontWeight = val;
+      break;
+    case "style":
+      if (val === "bold") result.fontWeight = "700";
+      else if (val === "italic") result.fontStyle = "italic";
+      break;
+    case "pad":
+      result.padding = val.endsWith("%") ? val : `${val}%`;
+      break;
+    case "radius":
+      result.borderRadius = val.endsWith("px") ? val : `${val}px`;
+      break;
+    case "gap":
+      result.gap = val.endsWith("vw") ? val : `${val}vw`;
+      break;
+    case "align":
+      result.textAlign = val;
+      break;
+    case "overflow":
+      result.overflowY = val;
+      break;
+    case "h":
+      result.height = val;
+      break;
+    case "w":
+      result.width = val;
+      break;
+    default:
+      result[key] = val;
+  }
+}
+var FN_REF_PREFIX = "\0fn:";
+var VALUE_REF_PREFIX = "\0val:";
+var MODEL_REF_PREFIX = "\0model:";
+var BUILTIN_NAMES = /* @__PURE__ */ new Set([
+  "Text",
+  "Heading",
+  "Button",
+  "Image",
+  "List",
+  "Card",
+  "Divider",
+  "Spacer",
+  "Icon",
+  "Table",
+  "Children",
+  "Row",
+  "Col",
+  "Repeat",
+  "Form",
+  "Modal",
+  "Column",
+  "Overlay",
+  "Input",
+  "Textarea",
+  "Select",
+  "Option",
+  "Checkbox",
+  "Radio",
+  "Label"
+]);
+var IdmlParser = class _IdmlParser {
+  constructor(tokens) {
+    this.pos = 0;
+    this.styleRegistry = /* @__PURE__ */ new Map();
+    // Reusable component definitions: name -> body template (item list). A `define`
+    // block registers one; using the name as an item expands the body (macro-style),
+    // substituting the call's children at the `Children` marker. See convertItem.
+    this.defRegistry = /* @__PURE__ */ new Map();
+    // Parameter names per definition (e.g. `define TopBar(title)` -> ['title']).
+    // At expansion the call's positional args are bound to these names and any
+    // matching references inside the body are substituted. See convertItem.
+    this.defParamRegistry = /* @__PURE__ */ new Map();
+    this.tokens = tokens;
+  }
+  peek(offset = 0) {
+    return this.tokens[this.pos + offset];
+  }
+  consume(type) {
+    const t = this.tokens[this.pos++];
+    if (!t) throw new Error("[idml] Unexpected end of input");
+    if (type && t.type !== type) {
+      throw new Error(`[idml] Expected ${type}, got ${t.type} ("${t.value}")`);
+    }
+    return t;
+  }
+  // Entry point. resolve() is called to load imported .idml files.
+  parseFile(resolve) {
+    this.parseImports(resolve);
+    this.parseTopDecls();
+    const pages = [];
+    while (this.peek()) {
+      const route = this.consume("ROUTE").value;
+      let scroll = false;
+      if (this.peek()?.type === "LBRACKET") {
+        this.consume("LBRACKET");
+        const flag = this.consume("IDENT").value;
+        if (flag === "scroll") scroll = true;
+        this.consume("RBRACKET");
+      }
+      const items = [];
+      while (this.peek() && this.peek()?.type !== "ROUTE") {
+        const t = this.peek();
+        if (t?.type === "IDENT" && t.value === "import") {
+          this.parseImports(resolve);
+          continue;
+        }
+        if (t?.type === "IDENT" && t.value === "define") {
+          this.parseDefinition();
+          continue;
+        }
+        if (t?.type === "IDENT" && this.peek(1)?.type === "COLON" && this.peek(2)?.type === "IDENT") {
+          this.parseStyleDefs();
+          continue;
+        }
+        items.push(this.parseItem());
+      }
+      pages.push({ route, scroll, items });
+    }
+    return pages;
+  }
+  // Consume import lines. Two forms:
+  //   import "path"                  (whole-file style/def import)
+  //   import Name, Name from "path"  (named component/def import)
+  // In both cases the referenced .idml file is parsed and its definitions +
+  // style-defs are registered into the shared registries.
+  parseImports(resolve) {
+    while (this.peek(0)?.type === "IDENT" && this.peek(0)?.value === "import") {
+      const next = this.peek(1);
+      if (next?.type === "STRING") {
+        this.pos++;
+        const importPath = this.consume("STRING").value;
+        this.resolveImport(importPath, [], resolve);
+        continue;
+      }
+      if (next?.type === "IDENT") {
+        this.pos++;
+        const names = [this.consume("IDENT").value];
+        while (this.peek()?.type === "COMMA") {
+          this.pos++;
+          names.push(this.consume("IDENT").value);
+        }
+        const fromTok = this.consume("IDENT");
+        if (fromTok.value !== "from") {
+          throw new Error(`[idml] Expected 'from' in import, got "${fromTok.value}"`);
+        }
+        const importPath = this.consume("STRING").value;
+        this.resolveImport(importPath, names, resolve);
+        continue;
+      }
+      break;
+    }
+  }
+  // Resolve and parse an imported .idml file into the shared registries.
+  // `names`, when non-empty, are validated against what the file actually defines.
+  resolveImport(importPath, names, resolve) {
+    const afterLastSlash = importPath.slice(importPath.lastIndexOf("/") + 1);
+    const dotIdx = afterLastSlash.lastIndexOf(".");
+    const ext = dotIdx >= 0 ? afterLastSlash.slice(dotIdx) : "";
+    if (ext !== ".idml" && ext !== "") return;
+    if (!resolve) return;
+    const src = resolve(importPath);
+    const sub = new _IdmlParser(tokenize(src));
+    sub.styleRegistry = this.styleRegistry;
+    sub.defRegistry = this.defRegistry;
+    sub.defParamRegistry = this.defParamRegistry;
+    sub.parseImports(resolve);
+    sub.parseTopDecls();
+    for (const name of names) {
+      if (!this.defRegistry.has(name) && !this.styleRegistry.has(name) && !BUILTIN_NAMES.has(name)) {
+        console.warn(`[idml] import: "${name}" is not defined in ${importPath}`);
+      }
+    }
+  }
+  // Parse the top-of-file declarations: `define` component definitions and
+  // `Name:BaseType` style-defs, in any order, until a page route or EOF.
+  parseTopDecls() {
+    for (; ; ) {
+      const t = this.peek();
+      if (t?.type === "IDENT" && t.value === "define") {
+        this.parseDefinition();
+        continue;
+      }
+      if (t?.type === "IDENT" && this.peek(1)?.type === "COLON" && this.peek(2)?.type === "IDENT") {
+        this.parseStyleDefs();
+        continue;
+      }
+      break;
+    }
+  }
+  // Consume `define Name(params?) { ...items including Children()... }`.
+  parseDefinition() {
+    this.pos++;
+    const name = this.consume("IDENT").value;
+    this.consume("LPAREN");
+    const params = [];
+    if (this.peek()?.type !== "RPAREN") {
+      params.push(this.consume("IDENT").value);
+      while (this.peek()?.type === "COMMA") {
+        this.pos++;
+        params.push(this.consume("IDENT").value);
+      }
+    }
+    this.consume("RPAREN");
+    this.consume("LBRACE");
+    const body = [];
+    while (this.peek()?.type !== "RBRACE") {
+      body.push(this.parseItem());
+    }
+    this.consume("RBRACE");
+    this.defRegistry.set(name, body);
+    this.defParamRegistry.set(name, params);
+  }
+  // Consume `Name:BaseType("arg"...) { prop: value }` definitions.
+  parseStyleDefs() {
+    while (this.peek(0)?.type === "IDENT" && this.peek(1)?.type === "COLON" && this.peek(2)?.type === "IDENT") {
+      const name = this.consume("IDENT").value;
+      this.consume("COLON");
+      const baseType = this.consume("IDENT").value;
+      const defaultArgs = [];
+      if (this.peek()?.type === "LPAREN") {
+        this.consume("LPAREN");
+        if (this.peek()?.type !== "RPAREN") defaultArgs.push(...this.parseArgList());
+        this.consume("RPAREN");
+      }
+      let className;
+      while (this.peek()?.type === "CLASS_BLOCK") {
+        const cls = this.consume("CLASS_BLOCK").value;
+        className = className ? `${className} ${cls}` : cls;
+      }
+      const style = this.peek()?.type === "LBRACE" ? this.parseStyleDefBody() : {};
+      this.styleRegistry.set(name, { baseType, defaultArgs, style, className });
+    }
+  }
+  // Parse `{ prop: value ... }` body of a style definition.
+  parseStyleDefBody() {
+    this.consume("LBRACE");
+    const result = {};
+    while (this.peek()?.type !== "RBRACE") {
+      const key = this.consume("IDENT").value;
+      this.consume("COLON");
+      const val = this.parseStyleValue();
+      applyStyleProp(key, val, result);
+    }
+    this.consume("RBRACE");
+    return result;
+  }
+  // Parse a value token inside a style def body.
+  parseStyleValue() {
+    const t = this.peek();
+    if (!t) throw new Error("[idml] Expected style value");
+    if (t.type === "COLOR") {
+      this.pos++;
+      return t.value;
+    }
+    if (t.type === "NUMBER") {
+      const n = this.consume("NUMBER").value;
+      const next = this.peek();
+      if (next?.type === "IDENT" && ["vh", "vw", "px", "rem", "em"].includes(next.value)) {
+        this.pos++;
+        return `${n}${next.value}`;
+      }
+      return String(n);
+    }
+    if (t.type === "IDENT") {
+      this.pos++;
+      return t.value;
+    }
+    throw new Error(`[idml] Unexpected token type ${t.type} as style value`);
+  }
+  parseItem() {
+    const rawName = this.consume("IDENT").value;
+    const regEntry = this.styleRegistry.get(rawName);
+    const name = regEntry ? regEntry.baseType : rawName;
+    const baseStyle = regEntry ? { ...regEntry.style } : {};
+    this.consume("LPAREN");
+    const parsedArgs = [];
+    if (this.peek()?.type !== "RPAREN") parsedArgs.push(...this.parseArgList());
+    this.consume("RPAREN");
+    const inlineChildren = [];
+    const valueArgs = [];
+    for (const a of parsedArgs) {
+      if (a && typeof a === "object" && Array.isArray(a.__idmlChildren)) {
+        inlineChildren.push(...a.__idmlChildren);
+      } else {
+        valueArgs.push(a);
+      }
+    }
+    const args = valueArgs.length > 0 ? valueArgs : regEntry?.defaultArgs ?? [];
+    if (this.peek()?.type !== "LBRACKET") {
+      throw new Error(
+        `[idml] "${rawName}" is missing its required [height,width,anchor] dimensions`
+      );
+    }
+    this.consume("LBRACKET");
+    const height = this.parseDimension();
+    this.consume("COMMA");
+    const width = this.parseDimension();
+    this.consume("COMMA");
+    const anchor = this.consume("IDENT").value;
+    let hug;
+    if (this.peek()?.type === "COMMA") {
+      this.consume("COMMA");
+      const kw = this.consume("IDENT").value;
+      if (kw === "hug") hug = { w: true, h: true };
+      else if (kw === "hug-w") hug = { w: true, h: false };
+      else if (kw === "hug-h") hug = { w: false, h: true };
+      else
+        throw new Error(
+          `[idml] unknown sizing keyword "${kw}" for "${rawName}"; expected hug, hug-w, or hug-h`
+        );
+    }
+    this.consume("RBRACKET");
+    let visibility;
+    if (this.peek()?.type === "QUESTION") {
+      this.consume("QUESTION");
+      let negate = false;
+      if (this.peek()?.type === "BANG") {
+        this.consume("BANG");
+        negate = true;
+      }
+      const ref = this.consume("VALUE_REF").value;
+      visibility = { ref, negate };
+    }
+    let className = regEntry?.className;
+    const condClasses = [];
+    while (this.peek()?.type === "CLASS_BLOCK") {
+      const cls = this.consume("CLASS_BLOCK").value;
+      if (this.peek()?.type === "QUESTION") {
+        this.consume("QUESTION");
+        let negate = false;
+        if (this.peek()?.type === "BANG") {
+          this.consume("BANG");
+          negate = true;
+        }
+        const ref = this.consume("VALUE_REF").value;
+        condClasses.push({ classes: cls, ref, negate });
+        continue;
+      }
+      for (const tok of cls.split(/\s+/).filter(Boolean)) {
+        if (!tok.startsWith("@")) {
+          throw new Error(
+            `[idml] literal class "${tok}" is not allowed at a use site; declare a styled variant (Name:BaseType) instead`
+          );
+        }
+      }
+      className = className ? `${className} ${cls}` : cls;
+    }
+    const style = { ...baseStyle };
+    const classRefs = [];
+    if (className) {
+      const statics = [];
+      for (const tok of className.split(/\s+/).filter(Boolean)) {
+        if (tok.startsWith("@")) classRefs.push(tok.slice(1));
+        else statics.push(tok);
+      }
+      className = statics.length ? statics.join(" ") : void 0;
+    }
+    this.consume("LBRACE");
+    const children = [...inlineChildren];
+    while (this.peek()?.type !== "RBRACE") {
+      children.push(this.parseItem());
+    }
+    this.consume("RBRACE");
+    return { name, args, height, width, anchor, children, style, className, classRefs, condClasses, hug, visibility };
+  }
+  parseDimension() {
+    if (this.peek()?.type === "IDENT" && this.peek()?.value === "auto") {
+      throw new Error(
+        "[idml] the `auto` dimension is no longer supported; give an explicit percentage (use a Spacer for any intentional empty space)"
+      );
+    }
+    if (this.peek()?.type === "VALUE_REF") {
+      const ref = this.consume("VALUE_REF").value;
+      if (this.peek()?.type === "QUESTION") {
+        this.consume("QUESTION");
+        const whenTrue = this.parseDimLiteral();
+        this.consume("COLON");
+        const whenFalse = this.parseDimLiteral();
+        return { ref, whenTrue, whenFalse };
+      }
+      return { ref };
+    }
+    return this.consume("NUMBER").value;
+  }
+  /** A literal dimension value inside a `@ref ? A : B`: a number (→ `%`) or a
+   *  number with a unit (`3.4vw`, `64px`). Returns the final CSS string. */
+  parseDimLiteral() {
+    const n = this.consume("NUMBER").value;
+    const next = this.peek();
+    if (next?.type === "IDENT" && ["vw", "vh", "px", "rem", "em"].includes(next.value)) {
+      this.pos++;
+      return `${n}${next.value}`;
+    }
+    return `${n}%`;
+  }
+  parseArgList() {
+    const args = [];
+    args.push(this.parseArg());
+    while (this.peek()?.type === "COMMA") {
+      this.pos++;
+      if (this.peek()?.type === "RPAREN") break;
+      args.push(this.parseArg());
+    }
+    return args;
+  }
+  parseArg() {
+    const t = this.peek();
+    if (!t) throw new Error("[idml] Expected argument");
+    if (t.type === "STRING") {
+      this.pos++;
+      return t.value;
+    }
+    if (t.type === "NUMBER") {
+      this.pos++;
+      return t.value;
+    }
+    if (t.type === "VALUE_REF") {
+      this.pos++;
+      return `${VALUE_REF_PREFIX}${t.value}`;
+    }
+    if (t.type === "MODEL_REF") {
+      this.pos++;
+      return `${MODEL_REF_PREFIX}${t.value}`;
+    }
+    if (t.type === "IDENT") {
+      this.pos++;
+      if (t.value === "null") return null;
+      if (t.value === "true") return true;
+      if (t.value === "false") return false;
+      return `${FN_REF_PREFIX}${t.value}`;
+    }
+    if (t.type === "LBRACE") {
+      this.pos++;
+      const childItems = [];
+      while (this.peek()?.type !== "RBRACE") {
+        childItems.push(this.parseItem());
+      }
+      this.consume("RBRACE");
+      return { __idmlChildren: childItems };
+    }
+    throw new Error(`[idml] Unexpected token type ${t.type} as argument`);
+  }
+};
+var LAYOUT_ITEMS = /* @__PURE__ */ new Set(["Row", "Col"]);
+var ANCHOR_V = { top: "flex-start", center: "center", bottom: "flex-end" };
+var ANCHOR_H = { left: "flex-start", center: "center", right: "flex-end" };
+function anchorToAbsoluteInsets(anchor) {
+  const parts = anchor.split("-");
+  const v = parts.length === 1 ? parts[0] : parts[0] ?? "top";
+  const h = parts.length === 1 ? parts[0] : parts[1] ?? "left";
+  const css = {};
+  if (v === "bottom") css.bottom = "0";
+  else if (v === "center") css.top = "50%";
+  else css.top = "0";
+  if (h === "right") css.right = "0";
+  else if (h === "center") css.left = "50%";
+  else css.left = "0";
+  if (v === "center" || h === "center") {
+    css.transform = `translate(${h === "center" ? "-50%" : "0"}, ${v === "center" ? "-50%" : "0"})`;
+  }
+  return css;
+}
+function anchorToFlexProps(anchor, direction) {
+  const parts = anchor.split("-");
+  if (parts.length === 1) {
+    const val = ANCHOR_V[parts[0]] ?? ANCHOR_H[parts[0]] ?? "flex-start";
+    return { justifyContent: val, alignItems: val };
+  }
+  const [v = "top", h = "left"] = parts;
+  const vVal = ANCHOR_V[v] ?? "flex-start";
+  const hVal = ANCHOR_H[h] ?? "flex-start";
+  if (direction === "row") {
+    return { justifyContent: hVal, alignItems: vVal };
+  }
+  return { justifyContent: vVal, alignItems: hVal };
+}
+function pct(n) {
+  return `${n}%`;
+}
+var _idCounter = 0;
+function genId(prefix) {
+  return `${prefix}-${++_idCounter}`;
+}
+function substituteParams(item, bindings) {
+  if (bindings.size === 0) return item;
+  const subArg = (a) => {
+    if (typeof a === "string") {
+      for (const prefix of [FN_REF_PREFIX, VALUE_REF_PREFIX, MODEL_REF_PREFIX]) {
+        if (a.startsWith(prefix)) {
+          const name = a.slice(prefix.length);
+          return bindings.has(name) ? bindings.get(name) : a;
+        }
+      }
+      return a;
+    }
+    if (a && typeof a === "object" && Array.isArray(a.__idmlChildren)) {
+      return {
+        __idmlChildren: a.__idmlChildren.map((c) => substituteParams(c, bindings))
+      };
+    }
+    return a;
+  };
+  return {
+    ...item,
+    args: item.args.map(subArg),
+    children: item.children.map((c) => substituteParams(c, bindings))
+  };
+}
+function containerDirection(name, defs) {
+  if (name === "Row") return "row";
+  if (name === "Col" || name === "Form") return "column";
+  if (defs.has(name)) return "column";
+  return null;
+}
+var OUT_OF_FLOW = /* @__PURE__ */ new Set(["Overlay", "Modal"]);
+function defIsOutOfFlow(name, defs, seen = /* @__PURE__ */ new Set()) {
+  const body = defs.get(name);
+  if (!body || seen.has(name)) return false;
+  seen.add(name);
+  return body.every(
+    (c) => OUT_OF_FLOW.has(c.name) || defs.has(c.name) && defIsOutOfFlow(c.name, defs, seen)
+  );
+}
+function makeOutOfFlowPredicate(defs) {
+  return (name) => OUT_OF_FLOW.has(name) || defs.has(name) && defIsOutOfFlow(name, defs);
+}
+function validateTiling(children, direction, where, isOutOfFlow, containerHug) {
+  children = children.filter((c) => !isOutOfFlow(c.name));
+  if (children.length === 0) return;
+  const main = direction === "row" ? "width" : "height";
+  const cross = direction === "row" ? "height" : "width";
+  const mainKey = direction === "row" ? "w" : "h";
+  const crossKey = direction === "row" ? "h" : "w";
+  const packsMain = !!containerHug?.[mainKey] || children.some((c) => c.hug?.[mainKey] || isDimRef(c[main]));
+  let sum = 0;
+  for (const c of children) {
+    if (typeof c[main] === "number") sum += c[main];
+    if (!c.hug?.[crossKey] && !isDimRef(c[cross]) && c[cross] !== 100) {
+      throw new Error(
+        `[idml] ${c.name} in ${where}: cross-axis ${cross} must be 100 (got ${c[cross]}); no vacant space is allowed`
+      );
+    }
+  }
+  if (!packsMain && sum !== 100) {
+    throw new Error(
+      `[idml] children of ${where} must tile to 100% along ${main}; got ${sum}. Add an explicit Spacer for any gap.`
+    );
+  }
+}
+function walkTiling(item, defs, isOutOfFlow) {
+  const dir = containerDirection(item.name, defs);
+  if (dir) validateTiling(item.children, dir, `<${item.name}>`, isOutOfFlow, item.hug);
+  for (const child of item.children) walkTiling(child, defs, isOutOfFlow);
+}
+function sizeOf(item) {
+  const size = {};
+  if (typeof item.height === "number") size.height = pct(item.height);
+  if (typeof item.width === "number") size.width = pct(item.width);
+  return size;
+}
+function dynSizeOf(item) {
+  const dyn = {};
+  if (isDimRef(item.height)) dyn.height = dimRefToDynamic(item.height);
+  if (isDimRef(item.width)) dyn.width = dimRefToDynamic(item.width);
+  return dyn.width || dyn.height ? dyn : void 0;
+}
+function dimRefToDynamic(d) {
+  return d.whenTrue !== void 0 ? { ref: d.ref, whenTrue: d.whenTrue, whenFalse: d.whenFalse } : { ref: d.ref };
+}
+function hugStyles(hug) {
+  const s = {};
+  if (hug.w) {
+    s.width = "fit-content";
+    s.maxWidth = "100%";
+    s.minWidth = "0";
+    s.overflow = "hidden";
+    s.textOverflow = "ellipsis";
+    s.whiteSpace = "nowrap";
+  }
+  if (hug.h) {
+    s.height = "fit-content";
+    s.maxHeight = "100%";
+  }
+  return s;
+}
+function hugContainerStyles(hug) {
+  const s = {};
+  if (hug.w) s.width = "fit-content";
+  if (hug.h) s.height = "fit-content";
+  return s;
+}
+var HUG_INVALID_ON = /* @__PURE__ */ new Set(["Overlay", "Modal", "Children"]);
+function assertHuggable(item, isDef) {
+  if (!item.hug) return;
+  if (HUG_INVALID_ON.has(item.name) || isDef) {
+    throw new Error(
+      `[idml] "${item.name}" cannot use hug \u2014 nothing to content-size here. hug applies to components (e.g. Button/Text) and layout containers (Row/Col/Form), not definitions, slots, tables, or out-of-flow layers.`
+    );
+  }
+}
+function mkItem(name, args, height, width, anchor, children, style = {}) {
+  return { name, args, height, width, anchor, children, style };
+}
+function expandTable(item, ctx) {
+  const dataArg = item.args.find(
+    (a) => typeof a === "string" && a.startsWith(VALUE_REF_PREFIX)
+  );
+  const columns = item.children.filter((c) => c.name === "Column");
+  const headerCells = columns.map((col) => {
+    const label = mkItem(
+      "Text",
+      [String(col.args[0] ?? "")],
+      "auto",
+      100,
+      col.anchor,
+      [],
+      { fontSize: "0.63vw" }
+    );
+    label.className = "font-medium text-gray-500 uppercase tracking-wider";
+    const cell = mkItem("Col", [], "auto", col.width, col.anchor, [label], {
+      paddingLeft: "1.6vw",
+      paddingRight: "1.6vw",
+      paddingTop: "0.8vw",
+      paddingBottom: "0.8vw"
+    });
+    return cell;
+  });
+  const headerRow = mkItem("Row", [], "auto", 100, "top-left", headerCells, {
+    borderBottom: "0.07vw solid #e5e7eb"
+  });
+  headerRow.className = "bg-gray-50";
+  const bodyCells = columns.map((col) => {
+    const cell = mkItem("Col", [], "auto", col.width, col.anchor, col.children, {
+      paddingLeft: "1.6vw",
+      paddingRight: "1.6vw",
+      paddingTop: "1vw",
+      paddingBottom: "1vw"
+    });
+    cell.className = "whitespace-nowrap";
+    return cell;
+  });
+  const bodyRowTemplate = mkItem("Row", [], "auto", 100, "top-left", bodyCells, {
+    borderBottom: "0.07vw solid #e5e7eb"
+  });
+  const repeat = mkItem("Repeat", dataArg ? [dataArg] : [], "auto", 100, "top-left", [bodyRowTemplate]);
+  const tableStyle = { ...item.style };
+  if (item.hug?.w) tableStyle.width = "fit-content";
+  const tableCol = mkItem(
+    "Col",
+    [],
+    item.hug?.h ? "auto" : item.height,
+    item.hug?.w ? "auto" : item.width,
+    item.anchor,
+    [headerRow, repeat],
+    tableStyle
+  );
+  tableCol.className = item.className;
+  return convertItem(tableCol, ctx);
+}
+function convertItem(item, ctx) {
+  const def = convertNode(item, ctx);
+  if (item.visibility) def.visibility = item.visibility;
+  const dyn = dynSizeOf(item);
+  if (dyn) def.dynamicSize = dyn;
+  if (item.classRefs?.length && !def.componentId) def.classRefs = item.classRefs;
+  if (item.condClasses?.length) def.condClasses = item.condClasses;
+  return def;
+}
+function convertNode(item, ctx) {
+  assertHuggable(item, ctx.defs.has(item.name));
+  const size = sizeOf(item);
+  const idmlStyle = Object.keys(item.style).length ? item.style : void 0;
+  const colAnchor = anchorToFlexProps(item.anchor, "column");
+  const outOfFlow = ctx.isOutOfFlow(item.name);
+  const cellStyle = outOfFlow ? { ...idmlStyle ?? {}, display: "contents" } : idmlStyle;
+  if (item.name === "Children") {
+    const slot = ctx.slotChildren ?? [];
+    const childCtx = { ...ctx, slotChildren: void 0 };
+    return {
+      type: "flex",
+      direction: "column",
+      ...colAnchor,
+      size,
+      children: slot.map((child) => convertItem(child, childCtx)),
+      idmlStyle
+    };
+  }
+  const defBody = ctx.defs.get(item.name);
+  if (defBody && !ctx.expanding.has(item.name)) {
+    const params = ctx.defParams.get(item.name) ?? [];
+    const bindings = /* @__PURE__ */ new Map();
+    params.forEach((p, i) => bindings.set(p, item.args[i] ?? ""));
+    const body = bindings.size ? defBody.map((t) => substituteParams(t, bindings)) : defBody;
+    const innerCtx = {
+      ...ctx,
+      slotChildren: item.children,
+      expanding: new Set(ctx.expanding).add(item.name)
+    };
+    return {
+      type: "flex",
+      direction: "column",
+      ...colAnchor,
+      size,
+      children: body.map((t) => convertItem(t, innerCtx)),
+      idmlStyle: cellStyle
+    };
+  }
+  if (item.name === "Overlay") {
+    const children2 = item.children.map((child) => {
+      const layout = convertItem(child, ctx);
+      const hugStyle = {};
+      if (child.hug?.w) {
+        hugStyle.width = "fit-content";
+        if (layout.size?.width) hugStyle.maxWidth = layout.size.width;
+      }
+      if (child.hug?.h) {
+        hugStyle.height = "fit-content";
+        if (layout.size?.height) hugStyle.maxHeight = layout.size.height;
+      }
+      return {
+        ...layout,
+        idmlStyle: {
+          ...layout.idmlStyle ?? {},
+          position: "absolute",
+          pointerEvents: "auto",
+          ...anchorToAbsoluteInsets(child.anchor),
+          ...hugStyle
+        }
+      };
+    });
+    return {
+      type: "flex",
+      direction: "column",
+      size: { width: "100%", height: "100%" },
+      children: children2,
+      idmlStyle: {
+        position: "fixed",
+        top: "0",
+        left: "0",
+        right: "0",
+        bottom: "0",
+        pointerEvents: "none",
+        outline: "none",
+        zIndex: "50",
+        ...idmlStyle ?? {}
+      },
+      ...item.className ? { className: item.className } : {}
+    };
+  }
+  if (item.name === "Table") {
+    return expandTable(item, ctx);
+  }
+  if (LAYOUT_ITEMS.has(item.name)) {
+    const direction = item.name === "Row" ? "row" : "column";
+    const { justifyContent, alignItems } = anchorToFlexProps(item.anchor, direction);
+    const children2 = item.children.map((child) => convertItem(child, ctx));
+    const mainHug = direction === "column" ? item.hug?.h : item.hug?.w;
+    if (mainHug) {
+      for (const ch of children2) {
+        if (!ch.size) continue;
+        if (direction === "column") delete ch.size.height;
+        else delete ch.size.width;
+      }
+    }
+    const crossHug = direction === "column" ? item.hug?.w : item.hug?.h;
+    const containerStyle = crossHug ? { ...idmlStyle ?? {}, ...hugContainerStyles({ w: direction === "column", h: direction === "row" }) } : idmlStyle;
+    return {
+      type: "flex",
+      direction,
+      justifyContent,
+      alignItems,
+      size,
+      children: children2,
+      idmlStyle: containerStyle,
+      ...item.className ? { className: item.className } : {}
+    };
+  }
+  if (item.name === "Select" && item.children.some((c) => c.name === "Option")) {
+    const id2 = genId("select");
+    const options = item.children.filter((c) => c.name === "Option").map((c) => ({ value: c.args[0] ?? "", label: c.args[1] ?? c.args[0] ?? "" }));
+    const def = buildComponentDef(item, id2);
+    def.props = { ...def.props, options };
+    ctx.components.push(def);
+    return { type: "flex", direction: "column", ...colAnchor, size, children: [], componentId: id2 };
+  }
+  const id = genId(item.name.toLowerCase());
+  ctx.components.push(buildComponentDef(item, id));
+  const children = item.children.map((child) => convertItem(child, ctx));
+  const hugCell = {};
+  if (item.hug?.w) {
+    hugCell.width = "fit-content";
+    if (typeof item.width === "number") hugCell.maxWidth = `${item.width}%`;
+  }
+  if (item.hug?.h) {
+    hugCell.height = "fit-content";
+    if (typeof item.height === "number") hugCell.maxHeight = `${item.height}%`;
+  }
+  const cellIdml = outOfFlow ? { ...cellStyle ?? {}, ...hugCell } : Object.keys(hugCell).length ? hugCell : void 0;
+  return {
+    type: "flex",
+    direction: "column",
+    ...colAnchor,
+    size,
+    children,
+    componentId: id,
+    ...cellIdml ? { idmlStyle: cellIdml } : {}
+  };
+}
+function anchorToComponentStyle(anchor, componentType) {
+  const parts = anchor.split("-");
+  const h = parts.length === 1 ? parts[0] : parts[1] ?? parts[0];
+  const v = parts.length === 1 ? parts[0] : parts[0];
+  const css = {};
+  if (componentType === "Text" || componentType === "Heading") {
+    if (h === "center") css.textAlign = "center";
+    else if (h === "right") css.textAlign = "right";
+  }
+  if (componentType === "Button") {
+    css.display = "flex";
+    css.justifyContent = h === "center" ? "center" : h === "right" ? "flex-end" : "flex-start";
+    css.alignItems = v === "center" ? "center" : v === "bottom" ? "flex-end" : "flex-start";
+  }
+  return css;
+}
+function buildComponentDef(item, id) {
+  const anchorStyle = anchorToComponentStyle(item.anchor, item.name);
+  const hug = item.hug ? hugStyles(item.hug) : {};
+  const merged = { ...anchorStyle, ...item.style, ...hug };
+  const idmlStyle = Object.keys(merged).length ? merged : void 0;
+  const valueRefs = [];
+  const modelRefs = [];
+  const handlerRefs = [];
+  const literals = [];
+  for (const a of item.args) {
+    if (typeof a === "string" && a.startsWith(VALUE_REF_PREFIX)) valueRefs.push(a.slice(VALUE_REF_PREFIX.length));
+    else if (typeof a === "string" && a.startsWith(MODEL_REF_PREFIX)) modelRefs.push(a.slice(MODEL_REF_PREFIX.length));
+    else if (typeof a === "string" && a.startsWith(FN_REF_PREFIX)) handlerRefs.push(a.slice(FN_REF_PREFIX.length));
+    else literals.push(a);
+  }
+  const primaryProp = PRIMARY_PROP[item.name] ?? "value";
+  const bindings = [
+    ...valueRefs.map((methodId) => ({ prop: primaryProp, methodId, kind: "value" })),
+    ...modelRefs.map((methodId) => ({ prop: primaryProp, methodId, kind: "model" })),
+    ...handlerRefs.map((methodId) => ({ prop: "onClick", methodId })),
+    // Dynamic classes (`@method` tokens in a class block) resolve to strings that
+    // are appended to className per render.
+    ...(item.classRefs ?? []).map((methodId) => ({ prop: "className", methodId, kind: "value" }))
+  ];
+  const withBindings = (def) => {
+    const withB = bindings.length ? { ...def, bindings } : def;
+    return item.className ? { ...withB, className: item.className } : withB;
+  };
+  const [first, second] = literals;
+  switch (item.name) {
+    case "Text":
+      return withBindings({ id, type: "Text", props: { text: String(first ?? "") }, idmlStyle });
+    case "Heading":
+      return withBindings({
+        id,
+        type: "Heading",
+        props: { text: String(first ?? ""), level: typeof second === "number" ? second : 1 },
+        idmlStyle
+      });
+    case "Button": {
+      const route = literals.find((a) => typeof a === "string" && a.startsWith("/"));
+      const label = literals.find((a) => typeof a === "string" && !a.startsWith("/"));
+      const props = { text: String(label ?? "") };
+      if (route) props.href = route;
+      return withBindings({ id, type: "Button", props, idmlStyle });
+    }
+    case "Image":
+      return withBindings({ id, type: "Image", props: { src: String(first ?? ""), alt: String(second ?? "") }, idmlStyle });
+    case "Label":
+      return withBindings({ id, type: "Label", props: { text: String(first ?? "") }, idmlStyle });
+    case "Icon": {
+      const props = { name: String(first ?? "") };
+      for (const rest of literals.slice(1)) {
+        if (typeof rest === "number") props.size = rest;
+        else if (typeof rest === "string") props.color = rest;
+      }
+      return withBindings({ id, type: "Icon", props, idmlStyle });
+    }
+    case "Option": {
+      const value = first ?? "";
+      const label = second ?? first ?? "";
+      return withBindings({ id, type: "Option", props: { value, label }, idmlStyle });
+    }
+    case "Input":
+    case "Textarea":
+      return withBindings({
+        id,
+        type: item.name,
+        props: first != null ? { placeholder: String(first) } : {},
+        idmlStyle
+      });
+    default:
+      return withBindings({
+        id,
+        type: item.name,
+        props: Object.fromEntries(literals.map((v, i) => [`arg${i}`, v])),
+        idmlStyle
+      });
+  }
+}
+var PRIMARY_PROP = {
+  Text: "text",
+  Heading: "text",
+  Button: "text",
+  Image: "src",
+  Input: "value",
+  Textarea: "value",
+  Select: "value",
+  Checkbox: "checked",
+  Table: "data",
+  Repeat: "data",
+  Modal: "open",
+  Icon: "name"
+};
+var DEFAULT_TOKENS = {
+  colors: [
+    { name: "primary", value: "#1a56db", darkValue: "#60a5fa" },
+    { name: "surface", value: "#ffffff", darkValue: "#1e1e2e" },
+    { name: "on-surface", value: "#111827", darkValue: "#f9fafb" },
+    { name: "danger", value: "#dc2626", darkValue: "#f87171" }
+  ],
+  typography: [
+    { name: "heading-xl", fontSize: "2.25rem", fontWeight: 700, lineHeight: "1.25" },
+    { name: "body-md", fontSize: "1rem", fontWeight: 400, lineHeight: "1.6" },
+    { name: "label-sm", fontSize: "0.75rem", fontWeight: 500, lineHeight: "1.4" }
+  ],
+  spacing: [
+    { name: "gap-sm", value: "0.5rem" },
+    { name: "gap-md", value: "1rem" },
+    { name: "gap-lg", value: "2rem" }
+  ]
+};
+function parseIdml(source, options) {
+  _idCounter = 0;
+  const parser = new IdmlParser(tokenize(source));
+  const parsedPages = parser.parseFile(options?.resolve);
+  const isOutOfFlow = makeOutOfFlowPredicate(parser.defRegistry);
+  for (const { route, items } of parsedPages) {
+    validateTiling(items, "column", `page ${route}`, isOutOfFlow);
+    items.forEach((it) => walkTiling(it, parser.defRegistry, isOutOfFlow));
+  }
+  for (const [name, body] of parser.defRegistry) {
+    validateTiling(body, "column", `define ${name}`, isOutOfFlow);
+    body.forEach((it) => walkTiling(it, parser.defRegistry, isOutOfFlow));
+  }
+  const pages = parsedPages.map(({ route, scroll, items }) => {
+    const components = [];
+    const ctx = {
+      components,
+      defs: parser.defRegistry,
+      defParams: parser.defParamRegistry,
+      expanding: /* @__PURE__ */ new Set(),
+      isOutOfFlow
+    };
+    const layoutChildren = items.map((item) => convertItem(item, ctx));
+    const rootLayout = {
+      type: "flex",
+      direction: "column",
+      size: { width: "100%", height: "100%" },
+      children: layoutChildren,
+      ...scroll ? { idmlStyle: { overflowY: "auto" } } : {}
+    };
+    return { route, layout: rootLayout, components };
+  });
+  return { version: "1", tokens: DEFAULT_TOKENS, pages };
+}
+// Annotate the CommonJS export names for ESM import in node:
+0 && (module.exports = {
+  addSSEWriter,
+  parseIdml,
+  startWatcher,
+  stopWatcher,
+  withUIConfig
+});
+//# sourceMappingURL=server.cjs.map