idml-ui 0.1.0

package/dist/index.js

@@ -0,0 +1,2380 @@
+"use client";
+
+// src/schema/config.schema.ts
+import { z as z6 } from "zod";
+
+// src/schema/tokens.schema.ts
+import { z } from "zod";
+var ColorTokenSchema = z.object({
+  name: z.string().min(1),
+  value: z.string().min(1),
+  darkValue: z.string().optional()
+}).strict();
+var TypographyTokenSchema = z.object({
+  name: z.string().min(1),
+  fontFamily: z.string().optional(),
+  fontSize: z.string().min(1),
+  fontWeight: z.union([z.number(), z.string()]).optional(),
+  lineHeight: z.string().optional(),
+  letterSpacing: z.string().optional()
+}).strict();
+var SpacingTokenSchema = z.object({
+  name: z.string().min(1),
+  value: z.string().min(1)
+}).strict();
+var TokensDefSchema = z.object({
+  colors: z.array(ColorTokenSchema),
+  typography: z.array(TypographyTokenSchema),
+  spacing: z.array(SpacingTokenSchema)
+}).strict();
+
+// src/schema/page.schema.ts
+import { z as z5 } from "zod";
+
+// src/schema/layout.schema.ts
+import { z as z2 } from "zod";
+var percentageString = z2.string().regex(/^\d+(\.\d+)?%$/, {
+  message: 'All size values must be expressed as percentages (e.g. "100%", "33.3%"). px, rem, em, vw, vh are not allowed.'
+});
+var SizeDefSchema = z2.object({
+  width: percentageString.optional(),
+  height: percentageString.optional(),
+  minWidth: percentageString.optional(),
+  minHeight: percentageString.optional(),
+  maxWidth: percentageString.optional(),
+  maxHeight: percentageString.optional()
+}).strict();
+var VisibilitySchema = z2.object({ ref: z2.string(), negate: z2.boolean().optional() }).strict();
+var ConditionalClassSchema = z2.object({ classes: z2.string(), ref: z2.string(), negate: z2.boolean().optional() }).strict();
+var DynamicDimSchema = z2.object({
+  ref: z2.string(),
+  whenTrue: z2.string().optional(),
+  whenFalse: z2.string().optional()
+}).strict();
+var DynamicSizeSchema = z2.object({ width: DynamicDimSchema.optional(), height: DynamicDimSchema.optional() }).strict();
+var LayoutDefSchema = z2.lazy(
+  () => z2.discriminatedUnion("type", [
+    z2.object({
+      type: z2.literal("flex"),
+      direction: z2.enum(["row", "column", "row-reverse", "column-reverse"]),
+      wrap: z2.enum(["nowrap", "wrap", "wrap-reverse"]).optional(),
+      justifyContent: z2.enum(["flex-start", "flex-end", "center", "space-between", "space-around", "space-evenly"]).optional(),
+      alignItems: z2.enum(["flex-start", "flex-end", "center", "stretch", "baseline"]).optional(),
+      gap: z2.string().optional(),
+      size: SizeDefSchema.optional(),
+      children: z2.array(LayoutDefSchema),
+      componentId: z2.string().optional(),
+      idmlStyle: z2.record(z2.string()).optional(),
+      className: z2.string().optional(),
+      classRefs: z2.array(z2.string()).optional(),
+      condClasses: z2.array(ConditionalClassSchema).optional(),
+      visibility: VisibilitySchema.optional(),
+      dynamicSize: DynamicSizeSchema.optional()
+    }).strict(),
+    z2.object({
+      type: z2.literal("grid"),
+      columns: z2.number().int().min(1).max(24),
+      rows: z2.number().int().min(1).optional(),
+      gap: z2.string().optional(),
+      size: SizeDefSchema.optional(),
+      children: z2.array(LayoutDefSchema),
+      componentId: z2.string().optional(),
+      idmlStyle: z2.record(z2.string()).optional(),
+      className: z2.string().optional(),
+      classRefs: z2.array(z2.string()).optional(),
+      condClasses: z2.array(ConditionalClassSchema).optional(),
+      visibility: VisibilitySchema.optional(),
+      dynamicSize: DynamicSizeSchema.optional()
+    }).strict()
+  ])
+);
+
+// src/schema/component.schema.ts
+import { z as z4 } from "zod";
+
+// src/schema/binding.schema.ts
+import { z as z3 } from "zod";
+var DataBindingDefSchema = z3.object({
+  prop: z3.string().min(1),
+  methodId: z3.string().min(1),
+  kind: z3.enum(["handler", "value", "model"]).optional()
+}).strict();
+var VisibilityDefSchema = z3.object({
+  methodId: z3.string().min(1),
+  negate: z3.boolean().optional()
+}).strict();
+
+// src/schema/component.schema.ts
+var ComponentDefSchema = z4.lazy(
+  () => z4.object({
+    id: z4.string().min(1),
+    type: z4.string().min(1),
+    props: z4.record(z4.unknown()).optional(),
+    tokenProps: z4.object({
+      color: z4.string().optional(),
+      background: z4.string().optional(),
+      typography: z4.string().optional(),
+      padding: z4.string().optional()
+    }).strict().optional(),
+    bindings: z4.array(DataBindingDefSchema).optional(),
+    visibility: VisibilityDefSchema.optional(),
+    children: z4.array(ComponentDefSchema).optional(),
+    idmlStyle: z4.record(z4.string()).optional(),
+    className: z4.string().optional()
+  }).strict()
+);
+
+// src/schema/page.schema.ts
+var PageDefSchema = z5.object({
+  route: z5.string().min(1),
+  title: z5.string().optional(),
+  layout: LayoutDefSchema,
+  components: z5.array(ComponentDefSchema),
+  meta: z5.object({
+    description: z5.string().optional(),
+    ogTitle: z5.string().optional()
+  }).strict().optional()
+}).strict();
+
+// src/schema/config.schema.ts
+var UIConfigSchema = z6.object({
+  version: z6.literal("1"),
+  tokens: TokensDefSchema,
+  pages: z6.array(PageDefSchema).min(1),
+  userComponents: z6.array(z6.string()).optional()
+}).strict();
+function validateConfig(raw) {
+  return UIConfigSchema.parse(raw);
+}
+function safeValidateConfig(raw) {
+  return UIConfigSchema.safeParse(raw);
+}
+
+// src/renderer/ConfigProvider.tsx
+import { createContext, useContext, useEffect, useState } from "react";
+
+// src/renderer/tokens/token-resolver.ts
+function injectTokenVars(tokens, darkMode) {
+  const vars = {};
+  for (const color of tokens.colors) {
+    const value = darkMode && color.darkValue ? color.darkValue : color.value;
+    vars[`--isd-color-${color.name}`] = value;
+  }
+  for (const spacing of tokens.spacing) {
+    vars[`--isd-spacing-${spacing.name}`] = spacing.value;
+  }
+  return vars;
+}
+function resolveTokenProps(tokenProps, tokens) {
+  if (!tokenProps) return {};
+  const style = {};
+  if (tokenProps.color) {
+    style.color = `var(--isd-color-${tokenProps.color})`;
+  }
+  if (tokenProps.background) {
+    style.backgroundColor = `var(--isd-color-${tokenProps.background})`;
+  }
+  if (tokenProps.typography) {
+    const token = tokens.typography.find((t) => t.name === tokenProps.typography);
+    if (token) {
+      style.fontSize = token.fontSize;
+      if (token.fontWeight) style.fontWeight = token.fontWeight;
+      if (token.lineHeight) style.lineHeight = token.lineHeight;
+      if (token.letterSpacing) style.letterSpacing = token.letterSpacing;
+      if (token.fontFamily) style.fontFamily = token.fontFamily;
+    }
+  }
+  if (tokenProps.padding) {
+    style.padding = `var(--isd-spacing-${tokenProps.padding})`;
+  }
+  return style;
+}
+
+// src/renderer/registry/method-registry.ts
+var registry = /* @__PURE__ */ new Map();
+function registerMethod(id, fn) {
+  if (registry.has(id)) {
+    console.warn(`[idml] registerMethod: overwriting existing method "${id}"`);
+  }
+  registry.set(id, fn);
+}
+function getMethod(id) {
+  return registry.get(id);
+}
+function clearRegistry() {
+  registry.clear();
+}
+
+// src/renderer/registry/component-registry.ts
+var registry2 = /* @__PURE__ */ new Map();
+function registerComponent(name, component) {
+  if (registry2.has(name)) {
+    console.warn(`[idml] registerComponent: overwriting existing component "${name}"`);
+  }
+  registry2.set(name, component);
+}
+function getComponent(name) {
+  return registry2.get(name);
+}
+function clearComponentRegistry() {
+  registry2.clear();
+}
+
+// src/renderer/ConfigProvider.tsx
+import { jsx } from "react/jsx-runtime";
+var ConfigContext = createContext(void 0);
+function useConfigContext() {
+  const ctx = useContext(ConfigContext);
+  if (!ctx) throw new Error("useConfigContext must be used inside <ConfigProvider>");
+  return ctx;
+}
+function ConfigProvider({
+  config: rawConfig,
+  methods = [],
+  components = [],
+  children,
+  onConfigInvalid,
+  debug = false
+}) {
+  const [validConfig, setValidConfig] = useState(null);
+  const [darkMode, setDarkMode] = useState(false);
+  useEffect(() => {
+    try {
+      const parsed = validateConfig(rawConfig);
+      setValidConfig(parsed);
+    } catch (err) {
+      const error = err instanceof Error ? err : new Error(String(err));
+      onConfigInvalid?.(error);
+    }
+  }, [rawConfig, onConfigInvalid]);
+  useEffect(() => {
+    clearRegistry();
+    for (const { id, fn } of methods) {
+      registerMethod(id, fn);
+    }
+  }, [methods]);
+  useEffect(() => {
+    clearComponentRegistry();
+    for (const { name, component } of components) {
+      registerComponent(name, component);
+    }
+  }, [components]);
+  useEffect(() => {
+    if (process.env.NODE_ENV !== "development") return;
+    const handler = (e) => {
+      const target = e.target.closest("[data-isd-id]");
+      if (target) {
+        const id = target.getAttribute("data-isd-id");
+        window.parent.postMessage({ type: "isd:select", componentId: id }, window.location.origin);
+      }
+    };
+    document.addEventListener("click", handler);
+    return () => document.removeEventListener("click", handler);
+  }, []);
+  if (!validConfig) return null;
+  const tokenVars = injectTokenVars(validConfig.tokens, darkMode);
+  return /* @__PURE__ */ jsx(ConfigContext.Provider, { value: { config: validConfig, darkMode, setDarkMode, tokenVars, debug }, children: /* @__PURE__ */ jsx("div", { style: tokenVars, children }) });
+}
+
+// src/renderer/LayoutRenderer.tsx
+import React5 from "react";
+
+// src/renderer/ComponentRenderer.tsx
+import React4 from "react";
+
+// src/renderer/hooks/useVisibility.ts
+function useVisibility(rule) {
+  if (!rule) return true;
+  const method = getMethod(rule.methodId);
+  if (!method) {
+    console.warn(
+      `[idml] Visibility method "${rule.methodId}" not registered \u2014 defaulting to visible`
+    );
+    return true;
+  }
+  const result = Boolean(method());
+  return rule.negate ? !result : result;
+}
+
+// src/renderer/builtins/index.ts
+import React3 from "react";
+import { createPortal } from "react-dom";
+import Link from "next/link";
+
+// src/renderer/repeat-context.ts
+import { createContext as createContext2 } from "react";
+var RepeatItemContext = createContext2(void 0);
+
+// src/renderer/form-context.tsx
+import { createContext as createContext3, useCallback as useCallback2, useContext as useContext2, useState as useState2 } from "react";
+import { jsx as jsx2 } from "react/jsx-runtime";
+var FormStateContext = createContext3(void 0);
+function FormStateProvider({
+  initial,
+  children
+}) {
+  const [values, setValues] = useState2(initial ?? {});
+  const setValue = useCallback2((name, value) => {
+    setValues((prev) => ({ ...prev, [name]: value }));
+  }, []);
+  return /* @__PURE__ */ jsx2(FormStateContext.Provider, { value: { values, setValue }, children });
+}
+
+// src/renderer/builtins/index.ts
+var Text = ({ text, children, ...props }) => React3.createElement("span", props, text || children);
+var Heading = ({ level = 1, text, children, ...props }) => {
+  const Tag = `h${level}`;
+  return React3.createElement(Tag, props, text || children);
+};
+var BUTTON_BASE = {
+  border: "none",
+  outline: "none",
+  textDecoration: "none",
+  cursor: "pointer",
+  fontFamily: "inherit",
+  fontSize: "inherit"
+};
+var Button = ({ text, children, onClick, href, style, type = "button", ...props }) => {
+  const merged = { ...BUTTON_BASE, ...style };
+  const content = [text, children];
+  return href ? React3.createElement(Link, { href, style: merged, ...props }, content) : React3.createElement("button", { type, onClick, style: merged, ...props }, content);
+};
+var Image = ({ src, alt, ...props }) => React3.createElement("img", { src, alt: alt || "", ...props });
+var List = ({ items = [], children, ...props }) => React3.createElement(
+  "ul",
+  props,
+  items.map(
+    (item, i) => React3.createElement("li", { key: i }, typeof item === "string" ? item : JSON.stringify(item))
+  ),
+  children
+);
+var Card = ({ children, ...props }) => React3.createElement("div", props, children);
+var Divider = (props) => React3.createElement("hr", props);
+var Spacer = (props) => React3.createElement("div", props);
+var Icon = ({ name, ...props }) => React3.createElement("span", props, name || "\u25CF");
+var Table = ({ children, ...props }) => React3.createElement("div", { "data-isd-table": "", ...props }, children ?? "Table");
+var Input = ({ type = "text", value, onChange, placeholder, name, disabled, style, ...props }) => React3.createElement("input", { type, value, onChange, placeholder, name, disabled, style, ...props });
+var Textarea = ({ value, onChange, placeholder, name, rows, style, ...props }) => React3.createElement("textarea", { value, onChange, placeholder, name, rows, style, ...props });
+var Option = ({ value, label, children, ...props }) => React3.createElement("option", { value, ...props }, label ?? children);
+var Select = ({ value, onChange, name, options, children, style, ...props }) => React3.createElement(
+  "select",
+  { value, onChange, name, style, ...props },
+  Array.isArray(options) ? options.map(
+    (opt, i) => React3.createElement("option", { key: i, value: opt.value }, opt.label)
+  ) : children
+);
+var Checkbox = ({ checked, onChange, name, disabled, style, ...props }) => React3.createElement("input", { type: "checkbox", checked, onChange, name, disabled, style, ...props });
+var Radio = ({ checked, value, name, onChange, style, ...props }) => React3.createElement("input", { type: "radio", checked, value, name, onChange, style, ...props });
+var Label = ({ htmlFor, text, children, style, ...props }) => React3.createElement("label", { htmlFor, style, ...props }, text ?? children);
+var Children = ({ slot, children, ...props }) => React3.createElement(React3.Fragment, null, slot ?? children);
+var Repeat = ({ data, children, style, ...props }) => {
+  const items = Array.isArray(data) ? data : [];
+  return React3.createElement(
+    "div",
+    { "data-isd-repeat": "", style, ...props },
+    items.map(
+      (item, i) => React3.createElement(RepeatItemContext.Provider, { key: i, value: item }, children)
+    )
+  );
+};
+var Form = ({ children, style, ...props }) => React3.createElement(
+  FormStateProvider,
+  null,
+  React3.createElement("form", { style, ...props }, children)
+);
+var MODAL_BACKDROP = {
+  position: "fixed",
+  inset: 0,
+  background: "rgba(0,0,0,0.5)",
+  display: "flex",
+  alignItems: "center",
+  justifyContent: "center",
+  zIndex: 1e3
+};
+var MODAL_PANEL = {
+  maxHeight: "90vh",
+  overflow: "auto"
+};
+var Modal = ({ open, onClose, children, style, ...props }) => {
+  if (!open) return null;
+  if (typeof document === "undefined") return null;
+  const panel = React3.createElement(
+    "div",
+    {
+      "data-isd-modal": "",
+      style: { ...MODAL_PANEL, ...style },
+      onClick: (e) => e.stopPropagation(),
+      ...props
+    },
+    children
+  );
+  return createPortal(
+    React3.createElement("div", { "data-isd-modal-backdrop": "", style: MODAL_BACKDROP, onClick: onClose }, panel),
+    document.body
+  );
+};
+var BUILTIN_COMPONENTS = {
+  Text,
+  Heading,
+  Button,
+  Image,
+  List,
+  Card,
+  Divider,
+  Spacer,
+  Icon,
+  Table,
+  Input,
+  Textarea,
+  Select,
+  Option,
+  Checkbox,
+  Radio,
+  Label,
+  Children,
+  Repeat,
+  Form,
+  Modal
+};
+
+// src/renderer/ComponentRenderer.tsx
+import { jsx as jsx3 } from "react/jsx-runtime";
+function ComponentRenderer({
+  component,
+  components,
+  slot
+}) {
+  const { config } = useConfigContext();
+  const isVisible = useVisibility(component.visibility);
+  const boundProps = useBoundProps(component.bindings ?? []);
+  if (!isVisible) return null;
+  const FILL_HEIGHT = /* @__PURE__ */ new Set(["Button", "Image", "Card", "Divider", "Spacer"]);
+  const tokenStyle = {
+    width: "100%",
+    ...FILL_HEIGHT.has(component.type) ? { height: "100%" } : {},
+    boxSizing: "border-box",
+    ...resolveTokenProps(component.tokenProps, config.tokens),
+    ...component.idmlStyle ?? {}
+  };
+  const childElements = (component.children ?? []).map((child) => /* @__PURE__ */ jsx3(ComponentRenderer, { component: child, components }, child.id));
+  const Component = getComponent(component.type) ?? BUILTIN_COMPONENTS[component.type];
+  if (!Component) {
+    console.warn(`[idml] Unknown component type "${component.type}"`);
+    return null;
+  }
+  const content = slot ?? childElements;
+  const hasContent = Array.isArray(content) ? content.length > 0 : content != null;
+  const props = {
+    ...component.props,
+    ...boundProps,
+    style: tokenStyle,
+    "data-isd-id": component.id
+  };
+  const mergedClass = [component.className, boundProps.className].filter(Boolean).join(" ");
+  if (mergedClass) props.className = mergedClass;
+  else delete props.className;
+  return hasContent ? /* @__PURE__ */ jsx3(Component, { ...props, children: content }) : /* @__PURE__ */ jsx3(Component, { ...props });
+}
+function useBoundProps(bindings) {
+  const item = React4.useContext(RepeatItemContext);
+  const formStore = React4.useContext(FormStateContext);
+  const props = {};
+  for (const binding of bindings) {
+    if (binding.kind === "value") {
+      const resolved = resolveValueRef(binding.methodId, item, formStore?.values);
+      if (binding.prop === "className") {
+        props.className = [props.className, resolved].filter(Boolean).join(" ");
+      } else {
+        props[binding.prop] = resolved;
+      }
+    } else if (binding.kind === "model") {
+      const name = binding.methodId;
+      const isChecked = binding.prop === "checked";
+      const current = formStore?.values[name];
+      props[binding.prop] = isChecked ? Boolean(current) : current ?? "";
+      props.onChange = (e) => formStore?.setValue(name, isChecked ? e?.target?.checked : e?.target?.value);
+    } else {
+      const method = getMethod(binding.methodId);
+      if (typeof method === "function") {
+        const fn = method;
+        props[binding.prop] = (event) => fn(formStore?.values ?? {}, {
+          set: (name, value) => formStore?.setValue(name, value),
+          event,
+          item
+        });
+      }
+    }
+  }
+  return props;
+}
+function resolveValueRef(ref, item, state) {
+  const segments = ref.split(".");
+  let base;
+  if (segments[0] === "item") {
+    base = item;
+  } else if (segments[0] === "state") {
+    base = state;
+  } else {
+    const method = getMethod(segments[0]);
+    base = typeof method === "function" ? method(item, state) : void 0;
+  }
+  for (let i = 1; i < segments.length; i++) {
+    if (base == null) return void 0;
+    base = base[segments[i]];
+  }
+  return base;
+}
+
+// src/renderer/LayoutRenderer.tsx
+import { jsx as jsx4 } from "react/jsx-runtime";
+var DIM_ANIM = { duration: 300, easing: "ease-in-out" };
+var toDimStr = (v) => v == null ? void 0 : typeof v === "number" ? `${v}%` : String(v);
+function LayoutRenderer({ layout, components }) {
+  const { config, debug } = useConfigContext();
+  const item = React5.useContext(RepeatItemContext);
+  const formStore = React5.useContext(FormStateContext);
+  const resolveDyn = (d) => {
+    const v = resolveValueRef(d.ref, item, formStore?.values);
+    if (d.whenTrue !== void 0) return v ? d.whenTrue : d.whenFalse;
+    return toDimStr(v);
+  };
+  const dynW = layout.dynamicSize?.width ? resolveDyn(layout.dynamicSize.width) : void 0;
+  const dynH = layout.dynamicSize?.height ? resolveDyn(layout.dynamicSize.height) : void 0;
+  const elRef = React5.useRef(null);
+  const prevDimsRef = React5.useRef({ w: dynW, h: dynH });
+  React5.useLayoutEffect(() => {
+    const el = elRef.current;
+    const prev = prevDimsRef.current;
+    if (el && layout.dynamicSize) {
+      if (dynW !== void 0 && prev.w !== void 0 && prev.w !== dynW) {
+        el.animate([{ width: prev.w }, { width: dynW }], DIM_ANIM);
+      }
+      if (dynH !== void 0 && prev.h !== void 0 && prev.h !== dynH) {
+        el.animate([{ height: prev.h }, { height: dynH }], DIM_ANIM);
+      }
+    }
+    prevDimsRef.current = { w: dynW, h: dynH };
+    if (process.env.NODE_ENV !== "production" && el) {
+      const cs = getComputedStyle(el);
+      if (cs.overflowY === "hidden" && el.scrollHeight - el.clientHeight > 1) {
+        console.error(
+          `[idml] content overflows its box and is clipped \u2014 ${el.scrollHeight - el.clientHeight}px taller than its height. Reduce the content or its spacing.`,
+          el
+        );
+      }
+    }
+  }, [dynW, dynH]);
+  if (layout.visibility) {
+    const value = resolveValueRef(layout.visibility.ref, item, formStore?.values);
+    const visible = layout.visibility.negate ? !value : Boolean(value);
+    if (!visible) return null;
+  }
+  const sizeStyle = resolveSizeStyle(layout.size);
+  const gapValue = layout.gap ? resolveGap(layout.gap, config.tokens.spacing) : void 0;
+  const containerStyle = {
+    ...sizeStyle,
+    // Debug aid (opt-in): show bounding boxes for structural Row/Col containers
+    // (not component-bound leaf cells). Off by default so pages render cleanly.
+    ...debug && !layout.componentId ? { outline: "1px solid rgba(100,100,100,0.35)" } : {},
+    // Apply .idml inline styles (can override sizeStyle values, e.g. height: '30vh' for scroll pages)
+    ...layout.idmlStyle ?? {},
+    // Prevent flex children from shrinking so percentage/vh heights are respected and scroll works
+    flexShrink: 0
+  };
+  let containerClass = "";
+  if (layout.type === "flex") {
+    containerClass = "flex";
+    containerStyle.flexDirection = layout.direction;
+    if (layout.wrap) containerStyle.flexWrap = layout.wrap;
+    if (layout.justifyContent) containerStyle.justifyContent = layout.justifyContent;
+    if (layout.alignItems) containerStyle.alignItems = layout.alignItems;
+    if (gapValue) containerStyle.gap = gapValue;
+  } else {
+    containerClass = "grid";
+    containerStyle.gridTemplateColumns = `repeat(${layout.columns}, minmax(0, 1fr))`;
+    if (layout.rows) containerStyle.gridTemplateRows = `repeat(${layout.rows}, minmax(0, 1fr))`;
+    if (gapValue) containerStyle.gap = gapValue;
+  }
+  if (layout.dynamicSize) {
+    if (dynW !== void 0) {
+      containerStyle.width = dynW;
+      containerStyle.minWidth = 0;
+    }
+    if (dynH !== void 0) {
+      containerStyle.height = dynH;
+      containerStyle.minHeight = 0;
+    }
+  }
+  if (layout.className) containerClass += ` ${layout.className}`;
+  if (layout.classRefs?.length) {
+    for (const ref of layout.classRefs) {
+      const cls = resolveValueRef(ref, item, formStore?.values);
+      if (cls) containerClass += ` ${cls}`;
+    }
+  }
+  if (layout.condClasses?.length) {
+    for (const c of layout.condClasses) {
+      const v = resolveValueRef(c.ref, item, formStore?.values);
+      if (c.negate ? !v : Boolean(v)) containerClass += ` ${c.classes}`;
+    }
+  }
+  const boundComponent = layout.componentId ? components.find((c) => c.id === layout.componentId) : void 0;
+  const children = layout.children.map((child, i) => /* @__PURE__ */ jsx4(LayoutRenderer, { layout: child, components }, i));
+  return /* @__PURE__ */ jsx4("div", { ref: elRef, className: containerClass, style: containerStyle, "data-isd-layout": true, children: boundComponent ? /* @__PURE__ */ jsx4(
+    ComponentRenderer,
+    {
+      component: boundComponent,
+      components,
+      slot: layout.children.length > 0 ? children : void 0
+    }
+  ) : children });
+}
+function resolveSizeStyle(size) {
+  if (!size) return {};
+  const s = {};
+  if (size.width) s.width = size.width;
+  if (size.height) s.height = size.height;
+  if (size.minWidth) s.minWidth = size.minWidth;
+  if (size.minHeight) s.minHeight = size.minHeight;
+  if (size.maxWidth) s.maxWidth = size.maxWidth;
+  if (size.maxHeight) s.maxHeight = size.maxHeight;
+  return s;
+}
+function resolveGap(tokenName, spacingTokens) {
+  return spacingTokens.find((t) => t.name === tokenName)?.value;
+}
+
+// src/renderer/ConfigRenderer.tsx
+import { jsx as jsx5 } from "react/jsx-runtime";
+function ConfigRenderer({ page }) {
+  const { config } = useConfigContext();
+  const pageDef = config.pages.find((p) => p.route === page);
+  if (!pageDef) {
+    console.warn(`[idml] No page found for route "${page}"`);
+    return null;
+  }
+  return /* @__PURE__ */ jsx5(FormStateProvider, { children: /* @__PURE__ */ jsx5(
+    "div",
+    {
+      "data-isd-page": page,
+      style: { width: "100%", height: "100vh", display: "flex", flexDirection: "column" },
+      children: /* @__PURE__ */ jsx5(LayoutRenderer, { layout: pageDef.layout, components: pageDef.components })
+    }
+  ) });
+}
+
+// src/renderer/hooks/useRegisteredMethod.ts
+function useRegisteredMethod(id) {
+  return getMethod(id);
+}
+
+// src/editor/EditorPage.tsx
+import { useEffect as useEffect4, useState as useState6 } from "react";
+
+// src/editor/hooks/useEditorState.ts
+import { useState as useState3, useCallback as useCallback3 } from "react";
+function useEditorState(initialConfig) {
+  const [state, setState] = useState3({
+    config: initialConfig,
+    selectedComponentId: null,
+    selectedPageRoute: initialConfig.pages[0]?.route ?? "/",
+    history: [],
+    future: []
+  });
+  const selectComponent = useCallback3((id) => {
+    setState((s) => ({ ...s, selectedComponentId: id }));
+  }, []);
+  const selectPage = useCallback3((route) => {
+    setState((s) => ({ ...s, selectedPageRoute: route, selectedComponentId: null }));
+  }, []);
+  const updateConfig = useCallback3((next) => {
+    setState((s) => ({
+      ...s,
+      config: next,
+      history: [...s.history, s.config].slice(-50),
+      future: []
+    }));
+  }, []);
+  const undo = useCallback3(() => {
+    setState((s) => {
+      if (s.history.length === 0) return s;
+      const prev = s.history[s.history.length - 1];
+      return {
+        ...s,
+        config: prev,
+        history: s.history.slice(0, -1),
+        future: [s.config, ...s.future]
+      };
+    });
+  }, []);
+  const redo = useCallback3(() => {
+    setState((s) => {
+      if (s.future.length === 0) return s;
+      const next = s.future[0];
+      return {
+        ...s,
+        config: next,
+        history: [...s.history, s.config],
+        future: s.future.slice(1)
+      };
+    });
+  }, []);
+  return { state, selectComponent, selectPage, updateConfig, undo, redo };
+}
+
+// src/editor/hooks/useSSEConfig.ts
+import { useEffect as useEffect2, useCallback as useCallback4 } from "react";
+function useSSEConfig(onConfigChange) {
+  const handleChange = useCallback4(() => {
+    fetch("/api/_isd/config").then((r) => r.json()).then((raw) => onConfigChange(raw)).catch((err) => console.error("[idml editor] Failed to reload config:", err));
+  }, [onConfigChange]);
+  useEffect2(() => {
+    const es = new EventSource("/api/_isd/events");
+    es.onmessage = (event) => {
+      try {
+        const data = JSON.parse(event.data);
+        if (data.type === "config:change") {
+          handleChange();
+        }
+      } catch {
+      }
+    };
+    es.onerror = () => {
+      console.warn("[idml editor] SSE connection lost, will retry automatically");
+    };
+    return () => es.close();
+  }, [handleChange]);
+}
+
+// src/editor/hooks/useSaveConfig.ts
+import { useCallback as useCallback5, useState as useState4 } from "react";
+function useSaveConfig() {
+  const [saving, setSaving] = useState4(false);
+  const [error, setError] = useState4(null);
+  const save = useCallback5(async (config) => {
+    setSaving(true);
+    setError(null);
+    try {
+      const res = await fetch("/api/_isd/config", {
+        method: "POST",
+        headers: { "Content-Type": "application/json" },
+        body: JSON.stringify(config)
+      });
+      if (!res.ok) {
+        const data = await res.json();
+        throw new Error(data.error || `Save failed: ${res.status}`);
+      }
+    } catch (err) {
+      setError(err instanceof Error ? err.message : "Unknown error");
+    } finally {
+      setSaving(false);
+    }
+  }, []);
+  return { save, saving, error };
+}
+
+// src/editor/panels/ComponentTree.tsx
+import { jsx as jsx6, jsxs } from "react/jsx-runtime";
+function ComponentTree({
+  pages,
+  selectedId,
+  onSelect,
+  onPageChange
+}) {
+  return /* @__PURE__ */ jsxs("div", { style: { padding: "12px", overflow: "auto", height: "100%" }, children: [
+    /* @__PURE__ */ jsx6("div", { style: { fontSize: "12px", fontWeight: 600, marginBottom: "8px" }, children: "Pages" }),
+    pages.map((page) => /* @__PURE__ */ jsxs("div", { style: { marginBottom: "12px" }, children: [
+      /* @__PURE__ */ jsx6(
+        "button",
+        {
+          onClick: () => onPageChange(page.route),
+          style: {
+            display: "block",
+            width: "100%",
+            padding: "6px 8px",
+            textAlign: "left",
+            border: "1px solid #d1d5db",
+            background: "#f9fafb",
+            cursor: "pointer",
+            fontSize: "12px",
+            fontWeight: 500
+          },
+          children: page.route
+        }
+      ),
+      /* @__PURE__ */ jsx6("div", { style: { paddingLeft: "8px", marginTop: "4px" }, children: page.components.map((comp) => /* @__PURE__ */ jsx6(
+        ComponentTreeItem,
+        {
+          component: comp,
+          selected: selectedId === comp.id,
+          onSelect
+        },
+        comp.id
+      )) })
+    ] }, page.route))
+  ] });
+}
+function ComponentTreeItem({
+  component,
+  selected,
+  onSelect
+}) {
+  return /* @__PURE__ */ jsxs("div", { children: [
+    /* @__PURE__ */ jsxs(
+      "button",
+      {
+        onClick: () => onSelect(component.id),
+        style: {
+          display: "block",
+          width: "100%",
+          padding: "4px 6px",
+          textAlign: "left",
+          border: selected ? "1px solid #1a56db" : "1px solid transparent",
+          background: selected ? "#eff6ff" : "transparent",
+          cursor: "pointer",
+          fontSize: "11px",
+          marginBottom: "2px"
+        },
+        children: [
+          /* @__PURE__ */ jsx6("span", { style: { fontFamily: "monospace" }, children: component.type }),
+          /* @__PURE__ */ jsxs("span", { style: { fontSize: "10px", color: "#6b7280" }, children: [
+            "#",
+            component.id
+          ] })
+        ]
+      }
+    ),
+    component.children?.map((child) => /* @__PURE__ */ jsx6("div", { style: { paddingLeft: "12px" }, children: /* @__PURE__ */ jsx6(ComponentTreeItem, { component: child, selected, onSelect }) }, child.id))
+  ] });
+}
+
+// src/editor/panels/LivePreview.tsx
+import { useRef, useEffect as useEffect3 } from "react";
+import { jsx as jsx7, jsxs as jsxs2 } from "react/jsx-runtime";
+function LivePreview({
+  pageRoute,
+  onComponentSelect
+}) {
+  const iframeRef = useRef(null);
+  useEffect3(() => {
+    const handler = (event) => {
+      if (event.data?.type === "isd:select" && typeof event.data.componentId === "string") {
+        onComponentSelect(event.data.componentId);
+      }
+    };
+    window.addEventListener("message", handler);
+    return () => window.removeEventListener("message", handler);
+  }, [onComponentSelect]);
+  return /* @__PURE__ */ jsxs2("div", { style: { height: "100%", display: "flex", flexDirection: "column", background: "#fff" }, children: [
+    /* @__PURE__ */ jsxs2("div", { style: { padding: "8px", borderBottom: "1px solid #e5e7eb", fontSize: "12px" }, children: [
+      "Preview: ",
+      pageRoute
+    ] }),
+    /* @__PURE__ */ jsx7(
+      "iframe",
+      {
+        ref: iframeRef,
+        src: pageRoute,
+        style: {
+          flex: 1,
+          border: "none",
+          width: "100%"
+        },
+        title: "Live preview"
+      }
+    )
+  ] });
+}
+
+// src/editor/panels/PropertyPanel.tsx
+import { useState as useState5 } from "react";
+import { Fragment, jsx as jsx8, jsxs as jsxs3 } from "react/jsx-runtime";
+function PropertyPanel({
+  component,
+  tokens,
+  onChange
+}) {
+  const [expandedSection, setExpandedSection] = useState5("props");
+  const updateComponent = (updates) => {
+    onChange({ ...component, ...updates });
+  };
+  return /* @__PURE__ */ jsxs3("div", { style: { padding: "12px", overflow: "auto", height: "100%", fontSize: "12px" }, children: [
+    /* @__PURE__ */ jsxs3("div", { style: { marginBottom: "16px" }, children: [
+      /* @__PURE__ */ jsx8("div", { style: { fontSize: "11px", color: "#6b7280", marginBottom: "4px" }, children: "ID" }),
+      /* @__PURE__ */ jsx8(
+        "div",
+        {
+          style: {
+            fontFamily: "monospace",
+            padding: "4px 6px",
+            background: "#f3f4f6",
+            borderRadius: "2px"
+          },
+          children: component.id
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsx8(
+      Section,
+      {
+        title: "Type",
+        expanded: expandedSection === "type",
+        onToggle: () => setExpandedSection(expandedSection === "type" ? null : "type"),
+        children: /* @__PURE__ */ jsx8(
+          "input",
+          {
+            type: "text",
+            value: component.type,
+            onChange: (e) => updateComponent({ type: e.target.value }),
+            style: { width: "100%", padding: "4px", fontSize: "12px" }
+          }
+        )
+      }
+    ),
+    /* @__PURE__ */ jsxs3(
+      Section,
+      {
+        title: "Token Props",
+        expanded: expandedSection === "tokenProps",
+        onToggle: () => setExpandedSection(expandedSection === "tokenProps" ? null : "tokenProps"),
+        children: [
+          /* @__PURE__ */ jsx8(
+            PropertyInput,
+            {
+              label: "Color",
+              value: component.tokenProps?.color ?? "",
+              onChange: (value) => updateComponent({
+                tokenProps: { ...component.tokenProps, color: value || void 0 }
+              }),
+              options: tokens.colors.map((c) => c.name)
+            }
+          ),
+          /* @__PURE__ */ jsx8(
+            PropertyInput,
+            {
+              label: "Background",
+              value: component.tokenProps?.background ?? "",
+              onChange: (value) => updateComponent({
+                tokenProps: { ...component.tokenProps, background: value || void 0 }
+              }),
+              options: tokens.colors.map((c) => c.name)
+            }
+          ),
+          /* @__PURE__ */ jsx8(
+            PropertyInput,
+            {
+              label: "Typography",
+              value: component.tokenProps?.typography ?? "",
+              onChange: (value) => updateComponent({
+                tokenProps: { ...component.tokenProps, typography: value || void 0 }
+              }),
+              options: tokens.typography.map((t) => t.name)
+            }
+          )
+        ]
+      }
+    ),
+    /* @__PURE__ */ jsx8(
+      Section,
+      {
+        title: "Visibility",
+        expanded: expandedSection === "visibility",
+        onToggle: () => setExpandedSection(expandedSection === "visibility" ? null : "visibility"),
+        children: component.visibility ? /* @__PURE__ */ jsxs3(Fragment, { children: [
+          /* @__PURE__ */ jsxs3("div", { style: { marginBottom: "8px" }, children: [
+            /* @__PURE__ */ jsx8("div", { style: { fontSize: "10px", color: "#6b7280" }, children: "Method" }),
+            /* @__PURE__ */ jsx8(
+              "input",
+              {
+                type: "text",
+                value: component.visibility.methodId,
+                onChange: (e) => updateComponent({
+                  visibility: { ...component.visibility, methodId: e.target.value }
+                }),
+                style: { width: "100%", padding: "4px", fontSize: "12px" }
+              }
+            )
+          ] }),
+          /* @__PURE__ */ jsxs3("label", { style: { display: "flex", alignItems: "center", gap: "4px", fontSize: "11px" }, children: [
+            /* @__PURE__ */ jsx8(
+              "input",
+              {
+                type: "checkbox",
+                checked: component.visibility.negate ?? false,
+                onChange: (e) => updateComponent({
+                  visibility: { ...component.visibility, negate: e.target.checked }
+                })
+              }
+            ),
+            "Negate (show when false)"
+          ] }),
+          /* @__PURE__ */ jsx8(
+            "button",
+            {
+              onClick: () => updateComponent({ visibility: void 0 }),
+              style: {
+                marginTop: "8px",
+                padding: "4px 8px",
+                fontSize: "11px",
+                background: "#fee2e2",
+                color: "#dc2626",
+                border: "none",
+                cursor: "pointer"
+              },
+              children: "Remove visibility"
+            }
+          )
+        ] }) : /* @__PURE__ */ jsx8(
+          "button",
+          {
+            onClick: () => updateComponent({ visibility: { methodId: "", negate: false } }),
+            style: {
+              padding: "4px 8px",
+              fontSize: "11px",
+              background: "#dbeafe",
+              color: "#1a56db",
+              border: "none",
+              cursor: "pointer"
+            },
+            children: "Add visibility rule"
+          }
+        )
+      }
+    )
+  ] });
+}
+function Section({
+  title,
+  expanded,
+  onToggle,
+  children
+}) {
+  return /* @__PURE__ */ jsxs3("div", { style: { marginBottom: "12px" }, children: [
+    /* @__PURE__ */ jsxs3(
+      "button",
+      {
+        onClick: onToggle,
+        style: {
+          width: "100%",
+          padding: "6px 8px",
+          textAlign: "left",
+          background: "#f3f4f6",
+          border: "1px solid #e5e7eb",
+          cursor: "pointer",
+          fontSize: "11px",
+          fontWeight: 600
+        },
+        children: [
+          expanded ? "\u25BC" : "\u25B6",
+          " ",
+          title
+        ]
+      }
+    ),
+    expanded && /* @__PURE__ */ jsx8("div", { style: { padding: "8px", background: "#fafafa" }, children })
+  ] });
+}
+function PropertyInput({
+  label,
+  value,
+  onChange,
+  options
+}) {
+  return /* @__PURE__ */ jsxs3("div", { style: { marginBottom: "8px" }, children: [
+    /* @__PURE__ */ jsx8("label", { style: { display: "block", fontSize: "10px", color: "#6b7280", marginBottom: "2px" }, children: label }),
+    options.length > 0 ? /* @__PURE__ */ jsxs3(
+      "select",
+      {
+        value,
+        onChange: (e) => onChange(e.target.value),
+        style: {
+          width: "100%",
+          padding: "4px",
+          fontSize: "12px",
+          border: "1px solid #d1d5db"
+        },
+        children: [
+          /* @__PURE__ */ jsx8("option", { value: "", children: "None" }),
+          options.map((opt) => /* @__PURE__ */ jsx8("option", { value: opt, children: opt }, opt))
+        ]
+      }
+    ) : /* @__PURE__ */ jsx8(
+      "input",
+      {
+        type: "text",
+        value,
+        onChange: (e) => onChange(e.target.value),
+        style: {
+          width: "100%",
+          padding: "4px",
+          fontSize: "12px",
+          border: "1px solid #d1d5db"
+        }
+      }
+    )
+  ] });
+}
+
+// src/editor/EditorPage.tsx
+import { jsx as jsx9, jsxs as jsxs4 } from "react/jsx-runtime";
+function EditorPage() {
+  const [initialConfig, setInitialConfig] = useState6(null);
+  const [loading, setLoading] = useState6(true);
+  useEffect4(() => {
+    fetch("/api/_isd/config").then((r) => r.json()).then((config) => {
+      setInitialConfig(config);
+      setLoading(false);
+    }).catch((err) => {
+      console.error("[idml editor] Failed to load config:", err);
+      setLoading(false);
+    });
+  }, []);
+  if (loading) {
+    return /* @__PURE__ */ jsx9("div", { style: { padding: "16px" }, children: "Loading editor..." });
+  }
+  if (!initialConfig) {
+    return /* @__PURE__ */ jsx9("div", { style: { padding: "16px", color: "#dc2626" }, children: "Failed to load configuration" });
+  }
+  return /* @__PURE__ */ jsx9(EditorShell, { initialConfig });
+}
+function EditorShell({ initialConfig }) {
+  const { state, selectComponent, selectPage, updateConfig, undo, redo } = useEditorState(initialConfig);
+  const { save, saving, error } = useSaveConfig();
+  useSSEConfig((fresh) => {
+    updateConfig(fresh);
+  });
+  const activePage = state.config.pages.find((p) => p.route === state.selectedPageRoute);
+  const selectedComponent = activePage?.components.find((c) => c.id === state.selectedComponentId);
+  return /* @__PURE__ */ jsxs4("div", { style: { display: "flex", width: "100vw", height: "100vh", fontFamily: "system-ui" }, children: [
+    /* @__PURE__ */ jsxs4("div", { style: { width: "20%", borderRight: "1px solid #e5e7eb", display: "flex", flexDirection: "column" }, children: [
+      /* @__PURE__ */ jsx9("div", { style: { padding: "8px", borderBottom: "1px solid #e5e7eb", fontSize: "12px", fontWeight: 600 }, children: "Structure" }),
+      /* @__PURE__ */ jsx9(
+        ComponentTree,
+        {
+          pages: state.config.pages,
+          selectedId: state.selectedComponentId,
+          onSelect: selectComponent,
+          onPageChange: selectPage
+        }
+      )
+    ] }),
+    /* @__PURE__ */ jsxs4("div", { style: { flex: 1, display: "flex", flexDirection: "column" }, children: [
+      /* @__PURE__ */ jsxs4(
+        "div",
+        {
+          style: {
+            padding: "8px",
+            borderBottom: "1px solid #e5e7eb",
+            display: "flex",
+            gap: "8px",
+            alignItems: "center",
+            fontSize: "12px"
+          },
+          children: [
+            /* @__PURE__ */ jsx9(
+              "button",
+              {
+                onClick: undo,
+                disabled: state.history.length === 0,
+                style: {
+                  padding: "4px 8px",
+                  fontSize: "11px",
+                  cursor: state.history.length === 0 ? "not-allowed" : "pointer",
+                  opacity: state.history.length === 0 ? 0.5 : 1
+                },
+                children: "\u21B6 Undo"
+              }
+            ),
+            /* @__PURE__ */ jsx9(
+              "button",
+              {
+                onClick: redo,
+                disabled: state.future.length === 0,
+                style: {
+                  padding: "4px 8px",
+                  fontSize: "11px",
+                  cursor: state.future.length === 0 ? "not-allowed" : "pointer",
+                  opacity: state.future.length === 0 ? 0.5 : 1
+                },
+                children: "\u21B7 Redo"
+              }
+            ),
+            /* @__PURE__ */ jsx9(
+              "button",
+              {
+                onClick: () => save(state.config),
+                disabled: saving,
+                style: {
+                  padding: "4px 8px",
+                  fontSize: "11px",
+                  background: "#dbeafe",
+                  color: "#1a56db",
+                  border: "none",
+                  cursor: saving ? "not-allowed" : "pointer",
+                  opacity: saving ? 0.7 : 1
+                },
+                children: saving ? "\u22EF Saving" : "\u{1F4BE} Save"
+              }
+            ),
+            error && /* @__PURE__ */ jsxs4("div", { style: { fontSize: "10px", color: "#dc2626", flex: 1 }, children: [
+              "Error: ",
+              error
+            ] })
+          ]
+        }
+      ),
+      activePage && /* @__PURE__ */ jsx9(LivePreview, { pageRoute: state.selectedPageRoute, onComponentSelect: selectComponent })
+    ] }),
+    /* @__PURE__ */ jsxs4("div", { style: { width: "25%", borderLeft: "1px solid #e5e7eb", display: "flex", flexDirection: "column" }, children: [
+      /* @__PURE__ */ jsx9("div", { style: { padding: "8px", borderBottom: "1px solid #e5e7eb", fontSize: "12px", fontWeight: 600 }, children: "Properties" }),
+      /* @__PURE__ */ jsx9("div", { style: { flex: 1, overflow: "auto" }, children: selectedComponent && activePage ? /* @__PURE__ */ jsx9(
+        PropertyPanel,
+        {
+          component: selectedComponent,
+          tokens: state.config.tokens,
+          onChange: (updated) => {
+            const newPages = state.config.pages.map(
+              (p) => p.route === state.selectedPageRoute ? {
+                ...p,
+                components: p.components.map(
+                  (c) => c.id === updated.id ? updated : c
+                )
+              } : p
+            );
+            updateConfig({ ...state.config, pages: newPages });
+          }
+        }
+      ) : /* @__PURE__ */ jsx9("div", { style: { padding: "12px", fontSize: "12px", color: "#6b7280" }, children: "Select a component to edit its properties" }) })
+    ] })
+  ] });
+}
+
+// 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 };
+}
+export {
+  BUILTIN_COMPONENTS,
+  ComponentRenderer,
+  ConfigProvider,
+  ConfigRenderer,
+  EditorPage,
+  LayoutRenderer,
+  UIConfigSchema,
+  clearComponentRegistry,
+  clearRegistry,
+  getComponent,
+  getMethod,
+  parseIdml,
+  registerComponent,
+  registerMethod,
+  safeValidateConfig,
+  useConfigContext,
+  useRegisteredMethod,
+  useVisibility,
+  validateConfig
+};
+//# sourceMappingURL=index.js.map