@framesquared/component 0.1.0

package/dist/index.js

@@ -0,0 +1,1644 @@
+// src/Component.ts
+import { Base, Observable, generateId } from "@framesquared/core";
+var ObservableMixin = Observable;
+function ensureObservable(instance) {
+  const proto = ObservableMixin.prototype;
+  for (const name of Object.getOwnPropertyNames(proto)) {
+    if (name === "constructor") continue;
+    if (name in instance) continue;
+    const desc = Object.getOwnPropertyDescriptor(proto, name);
+    if (desc && typeof desc.value === "function") {
+      instance[name] = desc.value.bind(instance);
+    }
+  }
+}
+function toCssValue(v) {
+  return typeof v === "number" ? `${v}px` : v;
+}
+function matchesCQSimple(cmp, selector) {
+  selector = selector.trim();
+  if (selector.startsWith("#")) {
+    return cmp.componentId === selector.slice(1);
+  }
+  if (selector.startsWith(".")) {
+    return cmp.el?.classList?.contains(selector.slice(1)) ?? false;
+  }
+  return cmp._config?.xtype === selector;
+}
+var Component = class extends Base {
+  static $className = "Ext.Component";
+  // -- Public state --
+  el = null;
+  rendered = false;
+  /** The Container that owns this Component (set by Container.add). */
+  ownerCt = null;
+  // -- Internal state --
+  _hidden = false;
+  _disabled = false;
+  _tpl = null;
+  _data = null;
+  _resizeObserver = null;
+  _lastWidth = 0;
+  _lastHeight = 0;
+  _config;
+  /** Unique component id */
+  componentId;
+  $destroyHooks = [];
+  // -----------------------------------------------------------------------
+  // Construction
+  // -----------------------------------------------------------------------
+  constructor(config = {}) {
+    super();
+    this._config = config;
+    this.componentId = generateId("ext-cmp");
+    ensureObservable(this);
+    if (config.listeners) {
+      for (const [event, handler] of Object.entries(config.listeners)) {
+        this.on(event, handler);
+      }
+    }
+    this._tpl = config.tpl ?? null;
+    this._data = config.data ?? null;
+    this._hidden = config.hidden ?? false;
+    this._disabled = config.disabled ?? false;
+    this.beforeInitialize();
+    this.initialize();
+    this.afterInitialize();
+    if (config.renderTo) {
+      this.render(config.renderTo);
+    }
+  }
+  // -----------------------------------------------------------------------
+  // Lifecycle hooks (override in subclasses)
+  // -----------------------------------------------------------------------
+  /** Called before initialize(). Override in subclasses. */
+  beforeInitialize() {
+  }
+  /** Main initialization. Override in subclasses. */
+  initialize() {
+  }
+  /** Called after initialize(). Override in subclasses. */
+  afterInitialize() {
+  }
+  /** Called before render(). Override in subclasses. */
+  beforeRender() {
+  }
+  /** Called after render(). Override in subclasses. */
+  afterRender() {
+  }
+  /** Called before destroy(). Override in subclasses. */
+  beforeDestroy() {
+  }
+  /** Called during destroy(). Override in subclasses. */
+  onDestroy() {
+  }
+  /** Called after destroy(). Override in subclasses. */
+  afterDestroy() {
+  }
+  // -----------------------------------------------------------------------
+  // Render
+  // -----------------------------------------------------------------------
+  render(container, position) {
+    if (this.rendered || this.isDestroyed) return;
+    this.fire("beforerender", this);
+    this.beforeRender();
+    this.el = document.createElement("div");
+    this.el.id = this.componentId;
+    this.el.classList.add("x-component");
+    this.applyConfigs();
+    const target = this.resolveElement(container);
+    if (target) {
+      if (typeof position === "number") {
+        const ref = target.children[position];
+        if (ref) {
+          target.insertBefore(this.el, ref);
+        } else {
+          target.appendChild(this.el);
+        }
+      } else if (position instanceof Element) {
+        target.insertBefore(this.el, position);
+      } else {
+        target.appendChild(this.el);
+      }
+    }
+    this.setupResizeObserver();
+    this.rendered = true;
+    this.fire("render", this);
+    this.afterRender();
+    this.fire("afterrender", this);
+  }
+  resolveElement(target) {
+    if (!target) return null;
+    if (typeof target === "string") {
+      return document.querySelector(target);
+    }
+    return target;
+  }
+  // -----------------------------------------------------------------------
+  // Config application to DOM
+  // -----------------------------------------------------------------------
+  applyConfigs() {
+    const el = this.el;
+    const cfg = this._config;
+    if (cfg.cls) {
+      const classes = Array.isArray(cfg.cls) ? cfg.cls : cfg.cls.split(/\s+/);
+      for (const c of classes) {
+        if (c) el.classList.add(c);
+      }
+    }
+    if (cfg.style) {
+      if (typeof cfg.style === "string") {
+        el.style.cssText += cfg.style;
+      } else {
+        const styleObj = cfg.style;
+        for (const [prop, value] of Object.entries(styleObj)) {
+          el.style[prop] = value;
+        }
+      }
+    }
+    if (cfg.width !== void 0) el.style.width = toCssValue(cfg.width);
+    if (cfg.height !== void 0) el.style.height = toCssValue(cfg.height);
+    if (cfg.minWidth !== void 0) el.style.minWidth = toCssValue(cfg.minWidth);
+    if (cfg.maxWidth !== void 0) el.style.maxWidth = toCssValue(cfg.maxWidth);
+    if (cfg.minHeight !== void 0) el.style.minHeight = toCssValue(cfg.minHeight);
+    if (cfg.maxHeight !== void 0) el.style.maxHeight = toCssValue(cfg.maxHeight);
+    if (cfg.margin !== void 0) el.style.margin = toCssValue(cfg.margin);
+    if (cfg.padding !== void 0) el.style.padding = toCssValue(cfg.padding);
+    if (this._tpl && this._data) {
+      el.innerHTML = this._tpl.apply(this._data);
+    } else if (cfg.html !== void 0) {
+      el.innerHTML = cfg.html;
+    }
+    if (this._hidden) {
+      el.style.display = "none";
+    }
+    if (this._disabled) {
+      el.classList.add("x-disabled");
+      el.setAttribute("aria-disabled", "true");
+    }
+    if (cfg.floating) {
+      el.style.position = "absolute";
+      el.classList.add("x-floating");
+    }
+  }
+  // -----------------------------------------------------------------------
+  // Visibility
+  // -----------------------------------------------------------------------
+  isVisible() {
+    return !this._hidden;
+  }
+  setVisible(visible) {
+    if (visible) this.show();
+    else this.hide();
+  }
+  show() {
+    if (this.isDestroyed) return;
+    this._hidden = false;
+    if (this.el) {
+      this.el.style.display = "";
+    }
+    this.fire("show", this);
+  }
+  hide() {
+    if (this.isDestroyed) return;
+    this._hidden = true;
+    if (this.el) {
+      this.el.style.display = "none";
+    }
+    this.fire("hide", this);
+  }
+  // -----------------------------------------------------------------------
+  // Enable / Disable
+  // -----------------------------------------------------------------------
+  isDisabled() {
+    return this._disabled;
+  }
+  enable() {
+    if (this.isDestroyed) return;
+    this._disabled = false;
+    if (this.el) {
+      this.el.classList.remove("x-disabled");
+      this.el.removeAttribute("aria-disabled");
+    }
+    this.fire("enable", this);
+  }
+  disable() {
+    if (this.isDestroyed) return;
+    this._disabled = true;
+    if (this.el) {
+      this.el.classList.add("x-disabled");
+      this.el.setAttribute("aria-disabled", "true");
+    }
+    this.fire("disable", this);
+  }
+  // -----------------------------------------------------------------------
+  // Size & Position
+  // -----------------------------------------------------------------------
+  getWidth() {
+    return this.el?.offsetWidth ?? 0;
+  }
+  getHeight() {
+    return this.el?.offsetHeight ?? 0;
+  }
+  getSize() {
+    return { width: this.getWidth(), height: this.getHeight() };
+  }
+  setWidth(width) {
+    if (this.el) this.el.style.width = toCssValue(width);
+  }
+  setHeight(height) {
+    if (this.el) this.el.style.height = toCssValue(height);
+  }
+  setSize(width, height) {
+    this.setWidth(width);
+    this.setHeight(height);
+  }
+  getX() {
+    return this.el?.offsetLeft ?? 0;
+  }
+  getY() {
+    return this.el?.offsetTop ?? 0;
+  }
+  setX(x) {
+    if (this.el) this.el.style.left = `${x}px`;
+  }
+  setY(y) {
+    if (this.el) this.el.style.top = `${y}px`;
+  }
+  setPosition(x, y) {
+    this.setX(x);
+    this.setY(y);
+  }
+  getBox() {
+    return {
+      x: this.getX(),
+      y: this.getY(),
+      width: this.getWidth(),
+      height: this.getHeight()
+    };
+  }
+  // -----------------------------------------------------------------------
+  // ResizeObserver
+  // -----------------------------------------------------------------------
+  setupResizeObserver() {
+    if (!this.el || typeof ResizeObserver === "undefined") return;
+    this._resizeObserver = new ResizeObserver((entries) => {
+      for (const entry of entries) {
+        const { width, height } = entry.contentRect;
+        const oldWidth = this._lastWidth;
+        const oldHeight = this._lastHeight;
+        this._lastWidth = width;
+        this._lastHeight = height;
+        this.fire("resize", this, width, height, oldWidth, oldHeight);
+      }
+    });
+    this._resizeObserver.observe(this.el);
+  }
+  // -----------------------------------------------------------------------
+  // CSS operations
+  // -----------------------------------------------------------------------
+  addCls(...classes) {
+    if (!this.el) return;
+    for (const c of classes) {
+      if (c) this.el.classList.add(c);
+    }
+  }
+  removeCls(...classes) {
+    if (!this.el) return;
+    for (const c of classes) {
+      if (c) this.el.classList.remove(c);
+    }
+  }
+  toggleCls(cls, state) {
+    if (!this.el) return;
+    if (state !== void 0) {
+      this.el.classList.toggle(cls, state);
+    } else {
+      this.el.classList.toggle(cls);
+    }
+  }
+  hasCls(cls) {
+    return this.el?.classList.contains(cls) ?? false;
+  }
+  setStyle(propOrObj, value) {
+    if (!this.el) return;
+    if (typeof propOrObj === "string") {
+      this.el.style[propOrObj] = value;
+    } else {
+      for (const [prop, val] of Object.entries(propOrObj)) {
+        this.el.style[prop] = val;
+      }
+    }
+  }
+  getStyle(prop) {
+    if (!this.el) return "";
+    return this.el.style[prop] ?? "";
+  }
+  // -----------------------------------------------------------------------
+  // Content update
+  // -----------------------------------------------------------------------
+  update(htmlOrData) {
+    if (typeof htmlOrData === "string") {
+      this.setHtml(htmlOrData);
+    } else {
+      this.setData(htmlOrData);
+    }
+  }
+  setHtml(html) {
+    if (this.el) {
+      this.el.innerHTML = html;
+    }
+  }
+  setData(data) {
+    this._data = data;
+    if (this.el && this._tpl) {
+      this.el.innerHTML = this._tpl.apply(data);
+    }
+  }
+  // -----------------------------------------------------------------------
+  // Element access
+  // -----------------------------------------------------------------------
+  getEl() {
+    return this.el;
+  }
+  getElement() {
+    return this.el;
+  }
+  // -----------------------------------------------------------------------
+  // Focus management
+  // -----------------------------------------------------------------------
+  focus() {
+    const target = this.getFocusEl();
+    if (target) target.focus();
+  }
+  blur() {
+    const target = this.getFocusEl();
+    if (target) target.blur();
+  }
+  isFocusable() {
+    if (this._disabled || this.isDestroyed || !this.rendered) return false;
+    const el = this.getFocusEl();
+    if (!el) return false;
+    return el.tabIndex >= 0;
+  }
+  /** Returns the element that receives focus. Override for inner focus targets. */
+  getFocusEl() {
+    return this.el;
+  }
+  // -----------------------------------------------------------------------
+  // Owner lifecycle hooks
+  // -----------------------------------------------------------------------
+  /** Called when added to a Container. */
+  onAdded(_owner, _index) {
+    this.fire("added", this, _owner, _index);
+  }
+  /** Called when removed from a Container. */
+  onRemoved(_destroying) {
+    this.fire("removed", this, _destroying);
+  }
+  // -----------------------------------------------------------------------
+  // Ancestor traversal
+  // -----------------------------------------------------------------------
+  /**
+   * Walks up the ownerCt chain and returns the first Component whose
+   * xtype matches the given selector string.
+   */
+  up(selector) {
+    let current = this.ownerCt;
+    while (current) {
+      if (matchesCQSimple(current, selector)) return current;
+      current = current.ownerCt;
+    }
+    return void 0;
+  }
+  // -----------------------------------------------------------------------
+  // Destroy
+  // -----------------------------------------------------------------------
+  destroy() {
+    if (this.isDestroyed) return;
+    this.fire("beforedestroy", this);
+    this.beforeDestroy();
+    if (this._resizeObserver) {
+      this._resizeObserver.disconnect();
+      this._resizeObserver = null;
+    }
+    if (this.el && this.el.parentNode) {
+      this.el.parentNode.removeChild(this.el);
+    }
+    this.onDestroy();
+    this.el = null;
+    this.isDestroyed = true;
+    this.afterDestroy();
+    this.fire("destroy", this);
+    for (const hook of this.$destroyHooks) {
+      hook();
+    }
+    if (typeof this.clearListeners === "function") {
+      this.clearListeners();
+    }
+  }
+  // -----------------------------------------------------------------------
+  // Event helper
+  // -----------------------------------------------------------------------
+  fire(eventName, ...args) {
+    if (typeof this.fireEvent === "function") {
+      return this.fireEvent(eventName, ...args) !== false;
+    }
+    return true;
+  }
+};
+
+// src/Template.ts
+var Template = class {
+  source;
+  constructor(source) {
+    this.source = source;
+  }
+  /**
+   * Applies data to the template and returns the resulting HTML string.
+   * Replaces `{key}` tokens with values from the data object.
+   * Supports nested keys via dot notation: `{user.name}`.
+   */
+  apply(data) {
+    return this.source.replace(/\{([^}]+)\}/g, (_match, key) => {
+      const value = this.resolve(data, key.trim());
+      return value !== void 0 && value !== null ? String(value) : "";
+    });
+  }
+  /**
+   * Alias for apply().
+   */
+  render(data) {
+    return this.apply(data);
+  }
+  resolve(data, path) {
+    const parts = path.split(".");
+    let current = data;
+    for (const part of parts) {
+      if (current === null || current === void 0 || typeof current !== "object") {
+        return void 0;
+      }
+      current = current[part];
+    }
+    return current;
+  }
+};
+
+// src/query/CQParser.ts
+function tokenize(input) {
+  const tokens = [];
+  let i = 0;
+  while (i < input.length) {
+    const ch = input[i];
+    if (ch === " " || ch === "	" || ch === "\n") {
+      while (i < input.length && /\s/.test(input[i])) i++;
+      if (tokens.length > 0 && i < input.length) {
+        tokens.push({ type: "whitespace", value: " " });
+      }
+      continue;
+    }
+    if (ch === ",") {
+      if (tokens.length > 0 && tokens[tokens.length - 1].type === "whitespace") {
+        tokens.pop();
+      }
+      tokens.push({ type: "comma", value: "," });
+      i++;
+      continue;
+    }
+    if (ch === ">" || ch === "~" || ch === "+") {
+      if (tokens.length > 0 && tokens[tokens.length - 1].type === "whitespace") {
+        tokens.pop();
+      }
+      tokens.push({ type: "combinator", value: ch });
+      i++;
+      while (i < input.length && /\s/.test(input[i])) i++;
+      continue;
+    }
+    if (ch === "#") {
+      i++;
+      let id = "";
+      while (i < input.length && /[\w-]/.test(input[i])) {
+        id += input[i++];
+      }
+      tokens.push({ type: "hash", value: id });
+      continue;
+    }
+    if (ch === ".") {
+      i++;
+      let cls = "";
+      while (i < input.length && /[\w-]/.test(input[i])) {
+        cls += input[i++];
+      }
+      tokens.push({ type: "dot", value: cls });
+      continue;
+    }
+    if (ch === "[") {
+      i++;
+      let content = "";
+      let depth = 1;
+      while (i < input.length && depth > 0) {
+        if (input[i] === "[") depth++;
+        else if (input[i] === "]") depth--;
+        if (depth > 0) content += input[i];
+        i++;
+      }
+      tokens.push({ type: "bracket", value: content });
+      continue;
+    }
+    if (ch === ":") {
+      i++;
+      let name = "";
+      while (i < input.length && /[\w-]/.test(input[i])) {
+        name += input[i++];
+      }
+      let arg = "";
+      if (i < input.length && input[i] === "(") {
+        i++;
+        let depth = 1;
+        while (i < input.length && depth > 0) {
+          if (input[i] === "(") depth++;
+          else if (input[i] === ")") depth--;
+          if (depth > 0) arg += input[i];
+          i++;
+        }
+      }
+      tokens.push({ type: "colon", value: name + (arg ? `(${arg})` : "") });
+      continue;
+    }
+    if (ch === "{") {
+      i++;
+      let name = "";
+      while (i < input.length && input[i] !== "}") {
+        name += input[i++];
+      }
+      if (i < input.length) i++;
+      tokens.push({ type: "brace", value: name });
+      continue;
+    }
+    if (/[\w-]/.test(ch)) {
+      let ident = "";
+      while (i < input.length && /[\w-]/.test(input[i])) {
+        ident += input[i++];
+      }
+      tokens.push({ type: "ident", value: ident });
+      continue;
+    }
+    i++;
+  }
+  if (tokens.length > 0 && tokens[tokens.length - 1].type === "whitespace") {
+    tokens.pop();
+  }
+  return tokens;
+}
+var CQParser = class _CQParser {
+  tokens;
+  pos;
+  constructor(tokens) {
+    this.tokens = tokens;
+    this.pos = 0;
+  }
+  static parse(selector) {
+    selector = selector.trim();
+    if (!selector) throw new Error("CQ: empty selector");
+    const tokens = tokenize(selector);
+    if (tokens.length === 0) throw new Error(`CQ: invalid selector "${selector}"`);
+    const parser = new _CQParser(tokens);
+    return parser.parseSelectorList();
+  }
+  peek() {
+    return this.tokens[this.pos];
+  }
+  advance() {
+    return this.tokens[this.pos++];
+  }
+  // selectorList = combinatorExpr ( ',' combinatorExpr )*
+  parseSelectorList() {
+    const first = this.parseCombinatorExpr();
+    if (!this.peek() || this.peek().type !== "comma") return first;
+    const items = [first];
+    while (this.peek()?.type === "comma") {
+      this.advance();
+      while (this.peek()?.type === "whitespace") this.advance();
+      items.push(this.parseCombinatorExpr());
+    }
+    return { type: "list", items };
+  }
+  // combinatorExpr = compound ( (combinator | whitespace) compound )*
+  parseCombinatorExpr() {
+    let left = this.parseCompound();
+    while (this.peek()) {
+      const tok = this.peek();
+      if (tok.type === "combinator") {
+        const combinator = this.advance().value;
+        const right = this.parseCompound();
+        left = { type: "combinator", combinator, left, right };
+      } else if (tok.type === "whitespace") {
+        this.advance();
+        const next = this.peek();
+        if (!next || next.type === "comma") break;
+        if (next.type === "combinator") continue;
+        const right = this.parseCompound();
+        left = { type: "combinator", combinator: " ", left, right };
+      } else {
+        break;
+      }
+    }
+    return left;
+  }
+  // compound = simpleSelector+
+  parseCompound() {
+    const selectors = [];
+    while (this.peek()) {
+      const tok = this.peek();
+      if (tok.type === "ident") {
+        selectors.push({ type: "type", value: this.advance().value });
+      } else if (tok.type === "hash") {
+        selectors.push({ type: "id", value: this.advance().value });
+      } else if (tok.type === "dot") {
+        selectors.push({ type: "class", value: this.advance().value });
+      } else if (tok.type === "bracket") {
+        selectors.push(this.parseAttribute(this.advance().value));
+      } else if (tok.type === "colon") {
+        selectors.push(this.parsePseudo(this.advance().value));
+      } else if (tok.type === "brace") {
+        selectors.push({ type: "method", value: this.advance().value });
+      } else {
+        break;
+      }
+    }
+    if (selectors.length === 0) {
+      throw new Error("CQ: expected selector");
+    }
+    return { type: "compound", selectors };
+  }
+  // [name], [name=value], [name>5], [name>=5], [name<5], [name<=5], [name!=v]
+  parseAttribute(content) {
+    const opMatch = content.match(/^([\w-]+)\s*(>=|<=|!=|>|<|=)\s*(.*)$/);
+    if (opMatch) {
+      let val = opMatch[3].trim();
+      if (val.startsWith('"') && val.endsWith('"') || val.startsWith("'") && val.endsWith("'")) {
+        val = val.slice(1, -1);
+      }
+      return { type: "attribute", name: opMatch[1], operator: opMatch[2], value: val };
+    }
+    return { type: "attribute", name: content.trim() };
+  }
+  // :name or :name(arg)
+  parsePseudo(raw) {
+    const parenIdx = raw.indexOf("(");
+    if (parenIdx === -1) {
+      return { type: "pseudo", name: raw };
+    }
+    const name = raw.slice(0, parenIdx);
+    const argStr = raw.slice(parenIdx + 1, -1);
+    if (name === "not") {
+      const inner = _CQParser.parse(argStr);
+      return { type: "pseudo", name: "not", argument: inner };
+    }
+    return { type: "pseudo", name, argument: argStr };
+  }
+};
+
+// src/query/CQMatcher.ts
+var CQMatcher = class {
+  /**
+   * Returns true if `component` matches the selector string.
+   */
+  static matches(component, selector) {
+    const ast = CQParser.parse(selector);
+    return matchesNode(component, ast);
+  }
+  /**
+   * Returns all descendants of `root` matching the selector string.
+   */
+  static query(root, selector) {
+    const ast = CQParser.parse(selector);
+    const all = collectDescendants(root);
+    return all.filter((c) => matchesInContext(c, ast, root));
+  }
+};
+function collectDescendants(container) {
+  const results = [];
+  const items = container.getItems?.() ?? [];
+  for (const child of items) {
+    results.push(child);
+    if (typeof child.getItems === "function") {
+      results.push(...collectDescendants(child));
+    }
+  }
+  return results;
+}
+function matchesInContext(component, ast, _root) {
+  if (ast.type === "list") {
+    return ast.items.some(
+      (item) => matchesInContext(component, item, _root)
+    );
+  }
+  if (ast.type === "compound") {
+    return matchesCompound(component, ast);
+  }
+  if (ast.type === "combinator") {
+    return matchesCombinator(component, ast);
+  }
+  return false;
+}
+function matchesCombinator(component, node) {
+  const { combinator, left, right } = node;
+  if (!matchesNode(component, right)) return false;
+  switch (combinator) {
+    case " ":
+      return hasAncestorMatching(component, left);
+    case ">":
+      return hasParentMatching(component, left);
+    case "~":
+      return hasPrecedingSiblingMatching(component, left);
+    case "+":
+      return hasAdjacentSiblingMatching(component, left);
+    default:
+      return false;
+  }
+}
+function hasAncestorMatching(component, ast) {
+  let current = component.ownerCt;
+  while (current) {
+    if (matchesNode(current, ast)) return true;
+    current = current.ownerCt;
+  }
+  return false;
+}
+function hasParentMatching(component, ast) {
+  const parent = component.ownerCt;
+  if (!parent) return false;
+  return matchesNode(parent, ast);
+}
+function hasPrecedingSiblingMatching(component, ast) {
+  const siblings = getSiblings(component);
+  if (!siblings) return false;
+  const myIndex = siblings.indexOf(component);
+  for (let i = 0; i < myIndex; i++) {
+    if (matchesNode(siblings[i], ast)) return true;
+  }
+  return false;
+}
+function hasAdjacentSiblingMatching(component, ast) {
+  const siblings = getSiblings(component);
+  if (!siblings) return false;
+  const myIndex = siblings.indexOf(component);
+  if (myIndex <= 0) return false;
+  return matchesNode(siblings[myIndex - 1], ast);
+}
+function getSiblings(component) {
+  const parent = component.ownerCt;
+  if (!parent || typeof parent.getItems !== "function") return null;
+  return parent.getItems();
+}
+function matchesNode(component, ast) {
+  if (ast.type === "compound") {
+    return matchesCompound(component, ast);
+  }
+  if (ast.type === "combinator") {
+    return matchesCombinator(component, ast);
+  }
+  if (ast.type === "list") {
+    return ast.items.some(
+      (item) => matchesNode(component, item)
+    );
+  }
+  return false;
+}
+function matchesCompound(component, node) {
+  return node.selectors.every((sel) => matchesSimple(component, sel));
+}
+function matchesSimple(component, sel) {
+  switch (sel.type) {
+    case "type":
+      return component._config?.xtype === sel.value;
+    case "id":
+      return component.componentId === sel.value;
+    case "class":
+      return component.el?.classList?.contains(sel.value) ?? false;
+    case "attribute":
+      return matchesAttribute(component, sel);
+    case "pseudo":
+      return matchesPseudo(component, sel);
+    case "method":
+      return matchesMethod(component, sel);
+    default:
+      return false;
+  }
+}
+function matchesAttribute(component, sel) {
+  const config = component._config ?? {};
+  const actual = config[sel.name];
+  if (!sel.operator) {
+    return actual !== void 0 && actual !== null && actual !== false && actual !== "";
+  }
+  const expected = sel.value;
+  switch (sel.operator) {
+    case "=": {
+      const exp = expected;
+      if (exp === "true") return actual === true;
+      if (exp === "false") return actual === false;
+      return String(actual) === exp;
+    }
+    case "!=": {
+      const exp = expected;
+      if (exp === "true") return actual !== true;
+      if (exp === "false") return actual !== false;
+      return String(actual) !== exp;
+    }
+    case ">":
+      return Number(actual) > Number(expected);
+    case ">=":
+      return Number(actual) >= Number(expected);
+    case "<":
+      return Number(actual) < Number(expected);
+    case "<=":
+      return Number(actual) <= Number(expected);
+    default:
+      return false;
+  }
+}
+function matchesPseudo(component, sel) {
+  switch (sel.name) {
+    case "not": {
+      if (!sel.argument) return true;
+      return !matchesNode(component, sel.argument);
+    }
+    case "visible":
+      return typeof component.isVisible === "function" && component.isVisible();
+    case "disabled":
+      return typeof component.isDisabled === "function" && component.isDisabled();
+    case "focusable":
+      return typeof component.isFocusable === "function" && component.isFocusable();
+    case "first-child":
+      return isNthChild(component, 0);
+    case "last-child":
+      return isLastChild(component);
+    // Positional aliases (ExtJS compat)
+    case "first":
+      return isNthChild(component, 0);
+    case "last":
+      return isLastChild(component);
+    case "nth-child": {
+      const n = parseInt(sel.argument, 10);
+      if (Number.isNaN(n)) return false;
+      return isNthChild(component, n - 1);
+    }
+    default:
+      return false;
+  }
+}
+function isNthChild(component, index) {
+  const siblings = getSiblings(component);
+  if (!siblings) return false;
+  return siblings[index] === component;
+}
+function isLastChild(component) {
+  const siblings = getSiblings(component);
+  if (!siblings || siblings.length === 0) return false;
+  return siblings[siblings.length - 1] === component;
+}
+function matchesMethod(component, sel) {
+  const methodName = sel.value;
+  const fn = component[methodName];
+  if (typeof fn !== "function") return false;
+  return !!fn.call(component);
+}
+
+// src/ComponentQuery.ts
+function matchesCQ(cmp, selector) {
+  try {
+    return CQMatcher.matches(cmp, selector);
+  } catch {
+    return false;
+  }
+}
+var ComponentQuery = class {
+  static query(root, selector) {
+    try {
+      selector = selector.trim();
+      if (selector.startsWith(">")) {
+        const innerSel = selector.slice(1).trim();
+        const items = root.getItems?.() ?? [];
+        return items.filter((child) => {
+          try {
+            return CQMatcher.matches(child, innerSel);
+          } catch {
+            return false;
+          }
+        });
+      }
+      return CQMatcher.query(root, selector);
+    } catch {
+      return [];
+    }
+  }
+};
+
+// src/Layout.ts
+var Layout = class {
+  type;
+  constructor(config = {}) {
+    this.type = config.type ?? "auto";
+  }
+  /**
+   * Performs layout calculation on the owner container.
+   * Override in subclasses.
+   */
+  doLayout(_owner) {
+  }
+};
+function resolveLayout(config) {
+  if (!config) return new Layout();
+  if (typeof config === "string") return new Layout({ type: config });
+  return new Layout(config);
+}
+
+// src/Container.ts
+import { ClassManager } from "@framesquared/core";
+var Container = class _Container extends Component {
+  static $className = "Ext.Container";
+  constructor(config = {}) {
+    super(config);
+  }
+  // -----------------------------------------------------------------------
+  // Lifecycle overrides
+  // -----------------------------------------------------------------------
+  initialize() {
+    super.initialize();
+    this._items = [];
+    this._layout = null;
+    this._bodyEl = null;
+  }
+  afterRender() {
+    super.afterRender();
+    this._bodyEl = document.createElement("div");
+    this._bodyEl.classList.add("x-container-body");
+    this.el.appendChild(this._bodyEl);
+    for (const child of this._items) {
+      if (!child.rendered) {
+        child.render(this._bodyEl);
+      }
+    }
+    const config = this._config;
+    if (config.items && config.items.length > 0) {
+      this.add(...config.items);
+    }
+  }
+  onDestroy() {
+    const items = [...this._items];
+    for (const child of items) {
+      child.destroy();
+    }
+    this._items.length = 0;
+    super.onDestroy();
+  }
+  // -----------------------------------------------------------------------
+  // Body element
+  // -----------------------------------------------------------------------
+  /**
+   * Returns the inner element where children are rendered.
+   * Falls back to el if body hasn't been created yet.
+   */
+  getBodyEl() {
+    return this._bodyEl ?? this.el;
+  }
+  // -----------------------------------------------------------------------
+  // Child management
+  // -----------------------------------------------------------------------
+  add(...items) {
+    const added = [];
+    for (const item of items) {
+      const child = this.resolveItem(item);
+      const index = this._items.length;
+      if (this.fireReturning("beforeadd", this, child, index) === false) continue;
+      this._items.push(child);
+      child.ownerCt = this;
+      if (this.rendered && this._bodyEl) {
+        child.render(this._bodyEl);
+      }
+      child.onAdded(this, index);
+      this.fire("add", this, child, index);
+      added.push(child);
+    }
+    return added;
+  }
+  insert(index, item) {
+    const child = this.resolveItem(item);
+    if (this.fireReturning("beforeadd", this, child, index) === false) {
+      return child;
+    }
+    const i = Math.max(0, Math.min(index, this._items.length));
+    this._items.splice(i, 0, child);
+    child.ownerCt = this;
+    if (this.rendered && this._bodyEl) {
+      const refEl = this._bodyEl.children[i];
+      if (refEl) {
+        child.render(this._bodyEl, refEl);
+      } else {
+        child.render(this._bodyEl);
+      }
+    }
+    child.onAdded(this, i);
+    this.fire("add", this, child, i);
+    return child;
+  }
+  remove(item, destroy = true) {
+    const index = this._items.indexOf(item);
+    if (index === -1) return item;
+    if (this.fireReturning("beforeremove", this, item, index) === false) {
+      return item;
+    }
+    this._items.splice(index, 1);
+    item.ownerCt = null;
+    if (item.el && item.el.parentNode) {
+      item.el.parentNode.removeChild(item.el);
+    }
+    item.onRemoved(destroy);
+    this.fire("remove", this, item, index);
+    if (destroy) {
+      item.destroy();
+    }
+    return item;
+  }
+  removeAll(destroy = true) {
+    const removed = [...this._items];
+    for (let i = removed.length - 1; i >= 0; i--) {
+      this.remove(removed[i], destroy);
+    }
+    return removed;
+  }
+  removeAt(index) {
+    const item = this._items[index];
+    if (!item) throw new Error(`No item at index ${index}`);
+    return this.remove(item, true);
+  }
+  // -----------------------------------------------------------------------
+  // Lookup
+  // -----------------------------------------------------------------------
+  getItems() {
+    return [...this._items];
+  }
+  getAt(index) {
+    return this._items[index];
+  }
+  getComponent(id) {
+    return this._items.find((c) => c.componentId === id);
+  }
+  indexOf(item) {
+    return this._items.indexOf(item);
+  }
+  contains(item, deep = false) {
+    if (this._items.includes(item)) return true;
+    if (deep) {
+      for (const child of this._items) {
+        if (child instanceof _Container && child.contains(item, true)) {
+          return true;
+        }
+      }
+    }
+    return false;
+  }
+  getCount() {
+    return this._items.length;
+  }
+  // -----------------------------------------------------------------------
+  // Layout
+  // -----------------------------------------------------------------------
+  getLayout() {
+    if (!this._layout) {
+      const config = this._config;
+      this._layout = resolveLayout(config.layout);
+    }
+    return this._layout;
+  }
+  doLayout() {
+    this.getLayout().doLayout(this);
+  }
+  // -----------------------------------------------------------------------
+  // Component Query
+  // -----------------------------------------------------------------------
+  query(selector) {
+    return ComponentQuery.query(this, selector);
+  }
+  down(selector) {
+    const results = this.query(selector);
+    return results.length > 0 ? results[0] : void 0;
+  }
+  child(selector) {
+    return this._items.find((c) => matchesCQ(c, selector));
+  }
+  queryById(id) {
+    return this.query(`#${id}`)[0];
+  }
+  queryBy(fn) {
+    const all = this.collectAllDescendants();
+    return all.filter(fn);
+  }
+  // -----------------------------------------------------------------------
+  // Reference
+  // -----------------------------------------------------------------------
+  lookupReference(ref) {
+    return this.query(`[reference=${ref}]`)[0];
+  }
+  // -----------------------------------------------------------------------
+  // Internal helpers
+  // -----------------------------------------------------------------------
+  resolveItem(item) {
+    if (item instanceof Component) return item;
+    const config = this._config;
+    const merged = config.defaults ? { ...config.defaults, ...item } : { ...item };
+    const xtype = merged.xtype;
+    if (xtype) {
+      const Ctor = ClassManager.getByAlias(`widget.${xtype}`);
+      if (Ctor) return new Ctor(merged);
+    }
+    return new Component(merged);
+  }
+  collectAllDescendants() {
+    const results = [];
+    for (const child of this._items) {
+      results.push(child);
+      if (child instanceof _Container) {
+        results.push(...child.collectAllDescendants());
+      }
+    }
+    return results;
+  }
+  /**
+   * Fires an event and returns false if any listener returned false.
+   */
+  fireReturning(eventName, ...args) {
+    if (typeof this.fireEvent === "function") {
+      return this.fireEvent(eventName, ...args);
+    }
+    return true;
+  }
+};
+
+// src/query/ComponentQuery.ts
+var CQ = class {
+  /**
+   * Finds all components matching the selector under the given root.
+   */
+  static query(selector, root) {
+    if (!root) return [];
+    return CQMatcher.query(root, selector);
+  }
+  /**
+   * Returns true if the component matches the selector.
+   */
+  static is(component, selector) {
+    return CQMatcher.matches(component, selector);
+  }
+};
+
+// src/template/XTemplate.ts
+var HTML_ENCODE_MAP = {
+  "&": "&amp;",
+  "<": "&lt;",
+  ">": "&gt;",
+  '"': "&quot;",
+  "'": "&#39;"
+};
+var HTML_DECODE_MAP = {
+  "&amp;": "&",
+  "&lt;": "<",
+  "&gt;": ">",
+  "&quot;": '"',
+  "&#39;": "'"
+};
+function htmlEncode(v) {
+  return String(v ?? "").replace(/[&<>"']/g, (ch) => HTML_ENCODE_MAP[ch] ?? ch);
+}
+function htmlDecode(v) {
+  return String(v ?? "").replace(/&amp;|&lt;|&gt;|&quot;|&#39;/g, (ent) => HTML_DECODE_MAP[ent] ?? ent);
+}
+var FORMAT_FNS = {
+  htmlEncode: (v) => htmlEncode(v),
+  htmlDecode: (v) => htmlDecode(v),
+  trim: (v) => String(v ?? "").trim(),
+  uppercase: (v) => String(v ?? "").toUpperCase(),
+  lowercase: (v) => String(v ?? "").toLowerCase(),
+  capitalize: (v) => {
+    const s = String(v ?? "");
+    return s.charAt(0).toUpperCase() + s.slice(1);
+  },
+  ellipsis: (v, arg) => {
+    const s = String(v ?? "");
+    const max = parseInt(arg ?? "0", 10);
+    if (max <= 0 || s.length <= max) return s;
+    return s.slice(0, max - 3) + "...";
+  },
+  round: (v, arg) => {
+    const n = Number(v);
+    const decimals = parseInt(arg ?? "0", 10);
+    return n.toFixed(decimals);
+  },
+  number: (v) => String(Number(v)),
+  currency: (v) => {
+    const n = Number(v);
+    return n.toFixed(2);
+  },
+  usMoney: (v) => {
+    const n = Number(v);
+    const formatted = n.toFixed(2).replace(/\B(?=(\d{3})+(?!\d))/g, ",");
+    return n < 0 ? `-$${formatted.slice(1)}` : `$${formatted}`;
+  },
+  fileSize: (v) => {
+    const n = Number(v);
+    if (n >= 1073741824) return `${(n / 1073741824).toFixed(1)} GB`;
+    if (n >= 1048576) return `${(n / 1048576).toFixed(0)} MB`;
+    if (n >= 1024) return `${(n / 1024).toFixed(0)} KB`;
+    return `${n} bytes`;
+  },
+  plural: (v, arg) => {
+    const n = Number(v);
+    const word = (arg ?? "").replace(/^["']|["']$/g, "");
+    return n === 1 ? `${n} ${word}` : `${n} ${word}s`;
+  },
+  date: (v) => {
+    const d = v instanceof Date ? v : new Date(String(v));
+    return isNaN(d.getTime()) ? String(v) : d.toLocaleDateString("en-US");
+  }
+};
+function parseTemplate(src) {
+  const nodes = [];
+  let pos = 0;
+  while (pos < src.length) {
+    const tplMatch = matchTplOpen(src, pos);
+    if (tplMatch) {
+      const { tag, end } = tplMatch;
+      if (tag.startsWith("if=")) {
+        const result = parseIf(src, tag, end);
+        nodes.push(result.node);
+        pos = result.pos;
+        continue;
+      }
+      if (tag.startsWith("for=")) {
+        const result = parseFor(src, tag, end);
+        nodes.push(result.node);
+        pos = result.pos;
+        continue;
+      }
+    }
+    if (src[pos] === "{" && pos + 1 < src.length && src[pos + 1] === "[") {
+      const closeIdx = src.indexOf("]}", pos + 2);
+      if (closeIdx !== -1) {
+        nodes.push({ type: "expr", code: src.slice(pos + 2, closeIdx) });
+        pos = closeIdx + 2;
+        continue;
+      }
+    }
+    if (src[pos] === "{") {
+      const closeIdx = findClosingBrace(src, pos);
+      if (closeIdx !== -1) {
+        const inner = src.slice(pos + 1, closeIdx);
+        nodes.push(parseInterp(inner));
+        pos = closeIdx + 1;
+        continue;
+      }
+    }
+    let textEnd = pos + 1;
+    while (textEnd < src.length) {
+      if (src[textEnd] === "{") break;
+      if (src[textEnd] === "<" && src.slice(textEnd, textEnd + 4) === "<tpl") break;
+      textEnd++;
+    }
+    nodes.push({ type: "text", value: src.slice(pos, textEnd) });
+    pos = textEnd;
+  }
+  return nodes;
+}
+function findClosingBrace(src, start) {
+  for (let i = start + 1; i < src.length; i++) {
+    if (src[i] === "}") return i;
+  }
+  return -1;
+}
+function parseInterp(inner) {
+  const colonIdx = inner.indexOf(":");
+  if (colonIdx === -1) {
+    return { type: "interp", path: inner.trim() };
+  }
+  const path = inner.slice(0, colonIdx).trim();
+  const rest = inner.slice(colonIdx + 1).trim();
+  const parenIdx = rest.indexOf("(");
+  if (parenIdx !== -1) {
+    const format = rest.slice(0, parenIdx);
+    const arg = rest.slice(parenIdx + 1, rest.lastIndexOf(")"));
+    return { type: "interp", path, format, formatArg: arg };
+  }
+  return { type: "interp", path, format: rest };
+}
+function matchTplOpen(src, pos) {
+  if (src.slice(pos, pos + 4) !== "<tpl") return null;
+  let i = pos + 4;
+  let inQuote = null;
+  while (i < src.length) {
+    const ch = src[i];
+    if (inQuote) {
+      if (ch === inQuote) inQuote = null;
+    } else {
+      if (ch === '"' || ch === "'") inQuote = ch;
+      else if (ch === ">") {
+        const tagContent = src.slice(pos + 5, i).trim();
+        return { tag: tagContent, end: i + 1 };
+      }
+    }
+    i++;
+  }
+  return null;
+}
+function findClosingTpl(src, pos) {
+  let depth = 1;
+  let i = pos;
+  while (i < src.length && depth > 0) {
+    if (src.slice(i, i + 6) === "</tpl>") {
+      depth--;
+      if (depth === 0) return i;
+      i += 6;
+      continue;
+    }
+    if (src.slice(i, i + 4) === "<tpl") {
+      const tagEnd = findTplTagEnd(src, i + 4);
+      if (tagEnd === -1) {
+        i++;
+        continue;
+      }
+      const tagContent = src.slice(i + 4, tagEnd).trim();
+      if (depth === 1 && (tagContent === "else" || tagContent.startsWith("elseif"))) {
+        i = tagEnd + 1;
+        continue;
+      }
+      depth++;
+      i = tagEnd + 1;
+      continue;
+    }
+    i++;
+  }
+  return src.length;
+}
+function findTplTagEnd(src, start) {
+  let i = start;
+  let inQuote = null;
+  while (i < src.length) {
+    const ch = src[i];
+    if (inQuote) {
+      if (ch === inQuote) inQuote = null;
+    } else {
+      if (ch === '"' || ch === "'") inQuote = ch;
+      else if (ch === ">") return i;
+    }
+    i++;
+  }
+  return -1;
+}
+function parseIf(src, tag, bodyStart) {
+  const condition = extractQuoted(tag.slice(3));
+  const closeTpl = findClosingTpl(src, bodyStart);
+  const innerSrc = src.slice(bodyStart, closeTpl);
+  const branches = splitBranches(innerSrc);
+  const node = {
+    type: "if",
+    condition,
+    body: parseTemplate(branches.ifBody),
+    elseifs: branches.elseifs.map((ei) => ({
+      condition: ei.condition,
+      body: parseTemplate(ei.body)
+    })),
+    elseBody: branches.elseBody ? parseTemplate(branches.elseBody) : []
+  };
+  return { node, pos: closeTpl + 6 };
+}
+function extractQuoted(s) {
+  s = s.trim();
+  if (s.startsWith('"') && s.endsWith('"') || s.startsWith("'") && s.endsWith("'")) {
+    return s.slice(1, -1);
+  }
+  return s;
+}
+function splitBranches(inner) {
+  const result = { ifBody: "", elseifs: [], elseBody: null };
+  const parts = [];
+  let i = 0;
+  let depth = 0;
+  while (i < inner.length) {
+    if (inner.slice(i, i + 6) === "</tpl>") {
+      depth--;
+      i += 6;
+      continue;
+    }
+    if (inner.slice(i, i + 4) === "<tpl") {
+      const tagEnd = findTplTagEnd(inner, i + 4);
+      if (tagEnd === -1) {
+        i++;
+        continue;
+      }
+      const tagContent = inner.slice(i + 4, tagEnd).trim();
+      if (depth === 0) {
+        if (tagContent.startsWith("elseif=")) {
+          parts.push({ type: "elseif", condition: extractQuoted(tagContent.slice(7)), start: tagEnd + 1 });
+          i = tagEnd + 1;
+          continue;
+        }
+        if (tagContent === "else") {
+          parts.push({ type: "else", start: tagEnd + 1 });
+          i = tagEnd + 1;
+          continue;
+        }
+      }
+      depth++;
+      i = tagEnd + 1;
+      continue;
+    }
+    i++;
+  }
+  if (parts.length === 0) {
+    result.ifBody = inner;
+  } else {
+    result.ifBody = inner.slice(0, findTplTagBefore(inner, parts[0].start));
+    for (let p = 0; p < parts.length; p++) {
+      const part = parts[p];
+      const bodyEnd = p + 1 < parts.length ? findTplTagBefore(inner, parts[p + 1].start) : inner.length;
+      const body = inner.slice(part.start, bodyEnd);
+      if (part.type === "elseif") {
+        result.elseifs.push({ condition: part.condition, body });
+      } else {
+        result.elseBody = body;
+      }
+    }
+  }
+  return result;
+}
+function findTplTagBefore(src, contentStart) {
+  let i = contentStart - 1;
+  while (i >= 0 && src[i] !== "<") i--;
+  return Math.max(0, i);
+}
+function parseFor(src, tag, bodyStart) {
+  const field = extractQuoted(tag.slice(4));
+  const closeTpl = findClosingTpl(src, bodyStart);
+  const body = parseTemplate(src.slice(bodyStart, closeTpl));
+  return { node: { type: "for", field, body }, pos: closeTpl + 6 };
+}
+function evaluate(nodes, data, parentData, xindex, xcount, memberFns) {
+  let result = "";
+  for (const node of nodes) {
+    switch (node.type) {
+      case "text":
+        result += node.value;
+        break;
+      case "interp":
+        result += evalInterp(node, data, parentData, xindex, xcount);
+        break;
+      case "expr":
+        result += evalExpr(node.code, data, parentData, xindex, xcount, memberFns);
+        break;
+      case "if":
+        result += evalIf(node, data, parentData, xindex, xcount, memberFns);
+        break;
+      case "for":
+        result += evalFor(node, data, parentData, xindex, xcount, memberFns);
+        break;
+    }
+  }
+  return result;
+}
+function evalInterp(node, data, _parentData, xindex, _xcount) {
+  let value;
+  if (node.path === ".") {
+    value = data instanceof PrimitiveScope ? data._value : data;
+  } else if (node.path === "#") {
+    value = xindex;
+  } else {
+    value = resolve(data, node.path);
+  }
+  if (value === void 0 || value === null) return "";
+  let str = String(value);
+  if (node.format && FORMAT_FNS[node.format]) {
+    str = FORMAT_FNS[node.format](value, node.formatArg);
+  }
+  return str;
+}
+function resolve(data, path) {
+  if (!data || !path) return void 0;
+  const parts = path.split(".");
+  let current = data;
+  for (const part of parts) {
+    if (current === null || current === void 0) return void 0;
+    if (typeof current !== "object" && typeof current !== "function") return void 0;
+    current = current[part];
+  }
+  return current;
+}
+function evalExpr(code, data, _parentData, xindex, xcount, memberFns) {
+  try {
+    const fn = new Function(
+      "values",
+      "xindex",
+      "xcount",
+      `"use strict"; return (${code});`
+    );
+    const result = fn.call(memberFns, data, xindex, xcount);
+    return result === void 0 || result === null ? "" : String(result);
+  } catch {
+    return "";
+  }
+}
+function evalIf(node, data, parentData, xindex, xcount, memberFns) {
+  if (evalCondition(node.condition, data)) {
+    return evaluate(node.body, data, parentData, xindex, xcount, memberFns);
+  }
+  for (const ei of node.elseifs) {
+    if (evalCondition(ei.condition, data)) {
+      return evaluate(ei.body, data, parentData, xindex, xcount, memberFns);
+    }
+  }
+  return evaluate(node.elseBody, data, parentData, xindex, xcount, memberFns);
+}
+function evalCondition(condition, data) {
+  try {
+    const keys = Object.keys(data ?? {});
+    const vals = keys.map((k) => data[k]);
+    const fn = new Function(...keys, `"use strict"; return !!(${condition});`);
+    return fn(...vals);
+  } catch {
+    return false;
+  }
+}
+function evalFor(node, data, _parentData, _xindex, _xcount, memberFns) {
+  let arr;
+  if (node.field === ".") {
+    arr = Array.isArray(data) ? data : [];
+  } else {
+    arr = resolve(data, node.field);
+    if (!Array.isArray(arr)) return "";
+  }
+  let result = "";
+  const count = arr.length;
+  for (let i = 0; i < count; i++) {
+    const item = arr[i];
+    let scope;
+    if (item !== null && typeof item === "object") {
+      scope = { ...item, parent: data };
+    } else {
+      scope = new PrimitiveScope(item, data);
+    }
+    result += evaluate(node.body, scope, data, i + 1, count, memberFns);
+  }
+  return result;
+}
+var PrimitiveScope = class {
+  _value;
+  parent;
+  constructor(value, parentData) {
+    this._value = value;
+    this.parent = parentData;
+  }
+};
+var XTemplate = class {
+  source;
+  memberFns;
+  ast = null;
+  constructor(source, memberFns) {
+    this.source = source;
+    this.memberFns = memberFns ?? {};
+  }
+  /**
+   * Pre-compiles the template. Called automatically on first apply().
+   */
+  compile() {
+    if (!this.ast) {
+      this.ast = parseTemplate(this.source);
+    }
+  }
+  /**
+   * Applies data to the template and returns the resulting HTML string.
+   */
+  apply(data) {
+    this.compile();
+    return evaluate(this.ast, data, null, 0, 0, this.memberFns);
+  }
+  /**
+   * Applies data and appends the resulting HTML to an element.
+   */
+  append(el, data) {
+    el.innerHTML += this.apply(data);
+  }
+};
+export {
+  CQ,
+  CQMatcher,
+  CQParser,
+  Component,
+  ComponentQuery,
+  Container,
+  Layout,
+  Template,
+  XTemplate,
+  matchesCQ,
+  resolveLayout
+};
+//# sourceMappingURL=index.js.map