@framesquared/layout 0.1.0

package/dist/index.js

@@ -0,0 +1,962 @@
+// src/Layout.ts
+var Layout = class {
+  type;
+  owner = null;
+  isRunning = false;
+  needsLayout = true;
+  constructor(config = {}) {
+    this.type = config.type ?? "auto";
+  }
+  /**
+   * Sets the Container that owns this layout.
+   */
+  setOwner(owner) {
+    this.owner = owner;
+  }
+  // -----------------------------------------------------------------------
+  // Lifecycle
+  // -----------------------------------------------------------------------
+  /**
+   * Called at the start of a layout run.  Sets isRunning flag.
+   * Override to gather initial measurements.
+   */
+  beginLayout(_context) {
+    this.isRunning = true;
+  }
+  /**
+   * Main calculation phase.  Override in subclasses to compute
+   * child sizes and positions.
+   */
+  calculate(_context) {
+  }
+  /**
+   * Called after calculation is complete.  Clears flags.
+   * Override to finalize DOM writes.
+   */
+  completeLayout(_context) {
+    this.isRunning = false;
+    this.needsLayout = false;
+  }
+  /**
+   * Called after the entire layout pass is done.
+   * Override for post-layout work (e.g., firing events).
+   */
+  afterLayout() {
+  }
+  // -----------------------------------------------------------------------
+  // Size policy
+  // -----------------------------------------------------------------------
+  /**
+   * Returns the size policy for a child item.
+   * 'configured' = the item has an explicit width/height config.
+   * 'natural' = the item uses its natural content size.
+   * 'shrinkWrap' = the item wraps its content.
+   */
+  getItemSizePolicy(item) {
+    const cfg = item._config ?? {};
+    return {
+      width: cfg.width !== void 0 ? "configured" : "natural",
+      height: cfg.height !== void 0 ? "configured" : "natural"
+    };
+  }
+  // -----------------------------------------------------------------------
+  // Rendering
+  // -----------------------------------------------------------------------
+  /**
+   * Renders child components into the target element.
+   * Base implementation renders each item sequentially.
+   */
+  renderItems(items, target) {
+    for (const item of items) {
+      if (!item.rendered) {
+        item.render(target);
+      }
+    }
+  }
+};
+
+// src/AutoLayout.ts
+var AutoLayout = class extends Layout {
+  constructor(config = {}) {
+    super({ ...config, type: "auto" });
+  }
+  /**
+   * Auto layout: no calculation needed — items use natural CSS flow.
+   */
+  calculate(_context) {
+  }
+  /**
+   * All items use natural sizing in auto layout.
+   */
+  getItemSizePolicy(_item) {
+    return { width: "natural", height: "natural" };
+  }
+};
+
+// src/LayoutContext.ts
+var LayoutContext = class {
+  /** Generic property cache (layout-level state). */
+  props = /* @__PURE__ */ new Map();
+  /** Per-element DOM measurement cache: element → (propName → value). */
+  domCache = /* @__PURE__ */ new WeakMap();
+  // -----------------------------------------------------------------------
+  // Generic props
+  // -----------------------------------------------------------------------
+  /**
+   * Gets a layout-level property value.
+   */
+  getProp(name) {
+    return this.props.get(name);
+  }
+  /**
+   * Sets a layout-level property value.
+   */
+  setProp(name, value) {
+    this.props.set(name, value);
+  }
+  // -----------------------------------------------------------------------
+  // DOM measurement caching
+  // -----------------------------------------------------------------------
+  /**
+   * Gets a cached DOM measurement, or reads it via `readFn` and caches the result.
+   * This prevents repeated layout-triggering reads on the same element.
+   */
+  getDomProp(name, element, readFn) {
+    let cache = this.domCache.get(element);
+    if (!cache) {
+      cache = /* @__PURE__ */ new Map();
+      this.domCache.set(element, cache);
+    }
+    if (cache.has(name)) {
+      return cache.get(name);
+    }
+    const value = readFn();
+    cache.set(name, value);
+    return value;
+  }
+  /**
+   * Returns true if a DOM measurement has been cached for the given element+prop.
+   */
+  hasDomProp(name, element) {
+    const cache = this.domCache.get(element);
+    return cache?.has(name) ?? false;
+  }
+  // -----------------------------------------------------------------------
+  // Flush
+  // -----------------------------------------------------------------------
+  /**
+   * Clears all cached data.  Called at the start of a new layout run.
+   */
+  flush() {
+    this.props.clear();
+    this.domCache = /* @__PURE__ */ new WeakMap();
+  }
+};
+
+// src/LayoutRunner.ts
+var MAX_ITERATIONS = 10;
+var LayoutRunner = class _LayoutRunner {
+  static instance = null;
+  /** Set of components that need a layout pass. */
+  pending = /* @__PURE__ */ new Set();
+  /** Whether a run is currently scheduled. */
+  scheduled = false;
+  /** Map of element → { observer, component } for ResizeObserver tracking. */
+  observed = /* @__PURE__ */ new Map();
+  /** Component → ResizeObserver for cleanup. */
+  componentObservers = /* @__PURE__ */ new Map();
+  constructor() {
+  }
+  static getInstance() {
+    if (!_LayoutRunner.instance) {
+      _LayoutRunner.instance = new _LayoutRunner();
+    }
+    return _LayoutRunner.instance;
+  }
+  // -----------------------------------------------------------------------
+  // Public API
+  // -----------------------------------------------------------------------
+  /**
+   * Marks a component for re-layout.
+   */
+  invalidate(component) {
+    this.pending.add(component);
+  }
+  /**
+   * Returns true if the component is in the pending queue.
+   */
+  isPending(component) {
+    return this.pending.has(component);
+  }
+  /**
+   * Performs a complete layout pass on all pending components.
+   * Uses iterative processing with cycle detection.
+   */
+  run() {
+    let iteration = 0;
+    while (this.pending.size > 0 && iteration < MAX_ITERATIONS) {
+      iteration++;
+      const batch = [...this.pending];
+      this.pending.clear();
+      const ctx = new LayoutContext();
+      for (const component of batch) {
+        const layout = this.getLayout(component);
+        if (!layout || !layout.needsLayout) continue;
+        layout.beginLayout(ctx);
+        layout.calculate(ctx);
+        layout.completeLayout(ctx);
+        layout.afterLayout();
+      }
+    }
+    this.pending.clear();
+    this.scheduled = false;
+  }
+  /**
+   * Schedules a layout run on the next animation frame.
+   * Multiple calls before the frame coalesce into a single run.
+   */
+  scheduleRun() {
+    if (this.scheduled) return;
+    this.scheduled = true;
+    if (typeof requestAnimationFrame !== "undefined") {
+      requestAnimationFrame(() => this.run());
+    } else {
+      Promise.resolve().then(() => this.run());
+    }
+  }
+  /**
+   * Clears all pending items without running them.
+   */
+  clear() {
+    this.pending.clear();
+    this.scheduled = false;
+  }
+  // -----------------------------------------------------------------------
+  // ResizeObserver integration
+  // -----------------------------------------------------------------------
+  /**
+   * Starts watching an element for size changes.
+   * When the element resizes, the associated component is invalidated.
+   */
+  observe(component, element) {
+    if (typeof ResizeObserver === "undefined") return;
+    const existing = this.componentObservers.get(component);
+    if (existing && existing.element === element) return;
+    const observer = new ResizeObserver((_entries) => {
+      this.invalidate(component);
+    });
+    observer.observe(element);
+    this.observed.set(element, { observer, component });
+    this.componentObservers.set(component, { observer, element });
+  }
+  /**
+   * Stops watching an element for size changes.
+   */
+  unobserve(component, element) {
+    const entry = this.observed.get(element);
+    if (entry && entry.component === component) {
+      entry.observer.unobserve(element);
+      entry.observer.disconnect();
+      this.observed.delete(element);
+      this.componentObservers.delete(component);
+    }
+  }
+  // -----------------------------------------------------------------------
+  // Internal
+  // -----------------------------------------------------------------------
+  getLayout(component) {
+    const layout = component._layoutInstance;
+    if (layout instanceof Layout) return layout;
+    return null;
+  }
+};
+
+// src/box/BoxLayout.ts
+var ALIGN_MAP = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  stretch: "stretch",
+  stretchmax: "stretch"
+};
+var PACK_MAP = {
+  start: "flex-start",
+  center: "center",
+  end: "flex-end",
+  "space-between": "space-between",
+  "space-around": "space-around",
+  "space-evenly": "space-evenly"
+};
+var BoxLayout = class extends Layout {
+  align;
+  pack;
+  gap;
+  overflow;
+  reverse;
+  constructor(config = {}) {
+    super(config);
+    this.align = config.align ?? "stretch";
+    this.pack = config.pack ?? "start";
+    this.gap = config.gap ?? 0;
+    this.overflow = config.overflow ?? "visible";
+    this.reverse = config.reverse ?? false;
+  }
+  // -----------------------------------------------------------------------
+  // Container configuration
+  // -----------------------------------------------------------------------
+  /**
+   * Applies CSS Flexbox properties to the container element.
+   */
+  configureContainer(el) {
+    el.style.display = "flex";
+    const dir = this.getDirection();
+    el.style.flexDirection = this.reverse ? `${dir}-reverse` : dir;
+    el.style.alignItems = ALIGN_MAP[this.align];
+    el.style.justifyContent = PACK_MAP[this.pack];
+    if (this.gap > 0) {
+      el.style.gap = `${this.gap}px`;
+    }
+    switch (this.overflow) {
+      case "wrap":
+        el.style.flexWrap = "wrap";
+        break;
+      case "hidden":
+        el.style.overflow = "hidden";
+        break;
+      case "scroll":
+        el.style.overflow = "auto";
+        break;
+    }
+  }
+  // -----------------------------------------------------------------------
+  // Item styles
+  // -----------------------------------------------------------------------
+  /**
+   * Applies flex CSS properties to each child item based on its config.
+   */
+  applyItemStyles(items, _target) {
+    const primaryProp = this.getPrimaryAxisProp();
+    for (const item of items) {
+      const el = item.el;
+      if (!el) continue;
+      const cfg = item._config ?? {};
+      const flex = cfg.flex;
+      if (flex !== void 0 && flex > 0) {
+        el.style.flexGrow = String(flex);
+        el.style.flexShrink = "1";
+        el.style.flexBasis = "0px";
+      } else if (cfg[primaryProp] !== void 0) {
+        el.style.flexShrink = "0";
+      }
+      if (cfg.minWidth !== void 0) el.style.minWidth = `${cfg.minWidth}px`;
+      if (cfg.maxWidth !== void 0) el.style.maxWidth = `${cfg.maxWidth}px`;
+      if (cfg.minHeight !== void 0) el.style.minHeight = `${cfg.minHeight}px`;
+      if (cfg.maxHeight !== void 0) el.style.maxHeight = `${cfg.maxHeight}px`;
+    }
+  }
+  // -----------------------------------------------------------------------
+  // Layout lifecycle overrides
+  // -----------------------------------------------------------------------
+  renderItems(items, target) {
+    this.configureContainer(target);
+    super.renderItems(items, target);
+    this.applyItemStyles(items, target);
+  }
+  calculate(_context) {
+  }
+  // -----------------------------------------------------------------------
+  // Size policy
+  // -----------------------------------------------------------------------
+  getItemSizePolicy(item) {
+    const cfg = item._config ?? {};
+    const primaryProp = this.getPrimaryAxisProp();
+    const primaryPolicy = cfg.flex !== void 0 ? "shrinkWrap" : cfg[primaryProp] !== void 0 ? "configured" : "natural";
+    const crossProp = primaryProp === "width" ? "height" : "width";
+    const crossPolicy = cfg[crossProp] !== void 0 ? "configured" : "natural";
+    if (primaryProp === "width") {
+      return { width: primaryPolicy, height: crossPolicy };
+    }
+    return { width: crossPolicy, height: primaryPolicy };
+  }
+};
+
+// src/box/HBoxLayout.ts
+var HBoxLayout = class extends BoxLayout {
+  constructor(config = {}) {
+    super({ ...config, type: "hbox" });
+  }
+  getDirection() {
+    return "row";
+  }
+  getPrimaryAxisProp() {
+    return "width";
+  }
+};
+
+// src/box/VBoxLayout.ts
+var VBoxLayout = class extends BoxLayout {
+  constructor(config = {}) {
+    super({ ...config, type: "vbox" });
+  }
+  getDirection() {
+    return "column";
+  }
+  getPrimaryAxisProp() {
+    return "height";
+  }
+};
+
+// src/FitLayout.ts
+var FitLayout = class extends Layout {
+  constructor(config = {}) {
+    super({ ...config, type: "fit" });
+  }
+  configureContainer(el) {
+    el.style.position = "relative";
+    el.style.overflow = "hidden";
+  }
+  applyItemStyles(items, _target) {
+    for (let i = 0; i < items.length; i++) {
+      const el = items[i].el;
+      if (!el) continue;
+      if (i === 0) {
+        el.style.width = "100%";
+        el.style.height = "100%";
+        el.style.boxSizing = "border-box";
+      } else {
+        el.style.display = "none";
+      }
+    }
+  }
+  renderItems(items, target) {
+    this.configureContainer(target);
+    super.renderItems(items, target);
+    this.applyItemStyles(items, target);
+  }
+};
+
+// src/CardLayout.ts
+var CardLayout = class extends Layout {
+  activeIndex = 0;
+  listeners = /* @__PURE__ */ new Map();
+  constructor(config = {}) {
+    super({ ...config, type: "card" });
+    this.activeIndex = config.activeItem ?? 0;
+  }
+  /** Subscribe to events. */
+  on(event, fn) {
+    let set = this.listeners.get(event);
+    if (!set) {
+      set = /* @__PURE__ */ new Set();
+      this.listeners.set(event, set);
+    }
+    set.add(fn);
+  }
+  /** Unsubscribe. */
+  un(event, fn) {
+    this.listeners.get(event)?.delete(fn);
+  }
+  fire(name, ...args) {
+    const fns = this.listeners.get(name);
+    if (fns) for (const fn of fns) fn(...args);
+  }
+  configureContainer(el) {
+    el.style.position = "relative";
+    el.style.overflow = "hidden";
+  }
+  applyItemStyles(items, _target) {
+    for (let i = 0; i < items.length; i++) {
+      const el = items[i].el;
+      if (!el) continue;
+      el.style.width = "100%";
+      el.style.height = "100%";
+      el.style.boxSizing = "border-box";
+      el.style.display = i === this.activeIndex ? "" : "none";
+    }
+  }
+  renderItems(items, target) {
+    this.configureContainer(target);
+    super.renderItems(items, target);
+    this.applyItemStyles(items, target);
+  }
+  // -- Navigation --
+  getActiveItem() {
+    return this.getOwnerItems()[this.activeIndex];
+  }
+  setActiveItem(item) {
+    const items = this.getOwnerItems();
+    const newIndex = typeof item === "number" ? item : items.indexOf(item);
+    if (newIndex < 0 || newIndex >= items.length || newIndex === this.activeIndex) return;
+    const oldItem = items[this.activeIndex];
+    const newItem = items[newIndex];
+    this.fire("deactivate", oldItem, this);
+    if (oldItem.el) oldItem.el.style.display = "none";
+    this.activeIndex = newIndex;
+    if (newItem.el) newItem.el.style.display = "";
+    this.fire("activate", newItem, this);
+  }
+  next() {
+    const items = this.getOwnerItems();
+    const next = (this.activeIndex + 1) % items.length;
+    this.setActiveItem(next);
+    return items[next];
+  }
+  prev() {
+    const items = this.getOwnerItems();
+    const prev = (this.activeIndex - 1 + items.length) % items.length;
+    this.setActiveItem(prev);
+    return items[prev];
+  }
+  getOwnerItems() {
+    return this.owner?.getItems?.() ?? [];
+  }
+};
+
+// src/AnchorLayout.ts
+var AnchorLayout = class extends Layout {
+  constructor(config = {}) {
+    super({ ...config, type: "anchor" });
+  }
+  configureContainer(el) {
+    el.style.position = "relative";
+  }
+  applyItemStyles(items, _target) {
+    for (const item of items) {
+      const el = item.el;
+      if (!el) continue;
+      const anchor = item._config?.anchor;
+      if (!anchor) continue;
+      const parts = anchor.trim().split(/\s+/);
+      const w = parts[0];
+      const h = parts[1];
+      if (w) el.style.width = parseAnchorValue(w);
+      if (h) el.style.height = parseAnchorValue(h);
+    }
+  }
+  renderItems(items, target) {
+    this.configureContainer(target);
+    super.renderItems(items, target);
+    this.applyItemStyles(items, target);
+  }
+};
+function parseAnchorValue(val) {
+  if (val.endsWith("%")) return val;
+  const n = parseInt(val, 10);
+  if (!isNaN(n) && n < 0) return `calc(100% - ${Math.abs(n)}px)`;
+  if (!isNaN(n) && n > 0) return `${n}px`;
+  return val;
+}
+
+// src/BorderLayout.ts
+var BorderLayout = class extends Layout {
+  constructor(config = {}) {
+    super({ ...config, type: "border" });
+  }
+  configureContainer(el) {
+    el.style.display = "grid";
+    el.style.width = "100%";
+    el.style.height = "100%";
+  }
+  applyItemStyles(items, target) {
+    const regions = /* @__PURE__ */ new Map();
+    for (const item of items) {
+      const region = item._config?.region;
+      if (region) regions.set(region, item);
+    }
+    const rows = [];
+    const areas = [];
+    const hasNorth = regions.has("north");
+    const hasSouth = regions.has("south");
+    const hasWest = regions.has("west");
+    const hasEast = regions.has("east");
+    const colSizes = [];
+    if (hasWest) {
+      const w = regions.get("west")?._config?.width;
+      colSizes.push(w ? `${w}px` : "200px");
+    }
+    colSizes.push("1fr");
+    if (hasEast) {
+      const w = regions.get("east")?._config?.width;
+      colSizes.push(w ? `${w}px` : "200px");
+    }
+    const cols = colSizes.length;
+    if (hasNorth) {
+      const h = regions.get("north")?._config?.height;
+      rows.push(h ? `${h}px` : "auto");
+      areas.push(Array(cols).fill("north"));
+    }
+    rows.push("1fr");
+    const middleRow = [];
+    if (hasWest) middleRow.push("west");
+    middleRow.push("center");
+    if (hasEast) middleRow.push("east");
+    areas.push(middleRow);
+    if (hasSouth) {
+      const h = regions.get("south")?._config?.height;
+      rows.push(h ? `${h}px` : "auto");
+      areas.push(Array(cols).fill("south"));
+    }
+    const el = target;
+    el.style.gridTemplateRows = rows.join(" ");
+    el.style.gridTemplateColumns = colSizes.join(" ");
+    el.style.gridTemplateAreas = areas.map((r) => `"${r.join(" ")}"`).join(" ");
+    for (const item of items) {
+      const itemEl = item.el;
+      if (!itemEl) continue;
+      const region = item._config?.region;
+      if (region) {
+        itemEl.style.gridArea = region;
+      }
+    }
+  }
+  renderItems(items, target) {
+    this.configureContainer(target);
+    super.renderItems(items, target);
+    this.applyItemStyles(items, target);
+  }
+};
+
+// src/ColumnLayout.ts
+var ColumnLayout = class extends Layout {
+  constructor(config = {}) {
+    super({ ...config, type: "column" });
+  }
+  configureContainer(el) {
+    el.style.display = "flex";
+    el.style.flexWrap = "wrap";
+    el.style.alignItems = "flex-start";
+  }
+  applyItemStyles(items, _target) {
+    for (const item of items) {
+      const el = item.el;
+      if (!el) continue;
+      const cfg = item._config ?? {};
+      const cw = cfg.columnWidth;
+      if (cw !== void 0 && cw > 0 && cw <= 1) {
+        el.style.width = `${cw * 100}%`;
+        el.style.boxSizing = "border-box";
+      } else if (cfg.width !== void 0) {
+        el.style.flexShrink = "0";
+      }
+    }
+  }
+  renderItems(items, target) {
+    this.configureContainer(target);
+    super.renderItems(items, target);
+    this.applyItemStyles(items, target);
+  }
+};
+
+// src/TableLayout.ts
+var TableLayout = class extends Layout {
+  columns;
+  constructor(config = {}) {
+    super({ ...config, type: "table" });
+    this.columns = config.columns ?? 1;
+  }
+  configureContainer(el) {
+    el.style.display = "grid";
+    el.style.gridTemplateColumns = `repeat(${this.columns}, 1fr)`;
+  }
+  applyItemStyles(items, _target) {
+    for (const item of items) {
+      const el = item.el;
+      if (!el) continue;
+      const cfg = item._config ?? {};
+      if (cfg.colspan && cfg.colspan > 1) {
+        el.style.gridColumn = `span ${cfg.colspan}`;
+      }
+      if (cfg.rowspan && cfg.rowspan > 1) {
+        el.style.gridRow = `span ${cfg.rowspan}`;
+      }
+    }
+  }
+  renderItems(items, target) {
+    this.configureContainer(target);
+    super.renderItems(items, target);
+    this.applyItemStyles(items, target);
+  }
+};
+
+// src/AbsoluteLayout.ts
+var AbsoluteLayout = class extends Layout {
+  constructor(config = {}) {
+    super({ ...config, type: "absolute" });
+  }
+  configureContainer(el) {
+    el.style.position = "relative";
+  }
+  applyItemStyles(items, _target) {
+    for (const item of items) {
+      const el = item.el;
+      if (!el) continue;
+      const cfg = item._config ?? {};
+      el.style.position = "absolute";
+      el.style.left = `${cfg.x ?? 0}px`;
+      el.style.top = `${cfg.y ?? 0}px`;
+    }
+  }
+  renderItems(items, target) {
+    this.configureContainer(target);
+    super.renderItems(items, target);
+    this.applyItemStyles(items, target);
+  }
+};
+
+// src/AccordionLayout.ts
+var AccordionLayout = class extends Layout {
+  multi;
+  fill;
+  expandedSet = /* @__PURE__ */ new WeakSet();
+  constructor(config = {}) {
+    super({ ...config, type: "accordion" });
+    this.multi = config.multi ?? false;
+    this.fill = config.fill ?? true;
+  }
+  configureContainer(el) {
+    el.style.display = "flex";
+    el.style.flexDirection = "column";
+    el.style.overflow = "hidden";
+  }
+  applyItemStyles(items, _target) {
+    if (items.length > 0 && !items.some((i) => this.expandedSet.has(i))) {
+      this.expandedSet.add(items[0]);
+    }
+    for (const item of items) {
+      this.applyExpansionState(item);
+    }
+  }
+  renderItems(items, target) {
+    this.configureContainer(target);
+    super.renderItems(items, target);
+    this.applyItemStyles(items, target);
+  }
+  // -- Public API --
+  isExpanded(item) {
+    return this.expandedSet.has(item);
+  }
+  expand(item) {
+    if (!this.multi) {
+      for (const other of this.getOwnerItems()) {
+        if (other !== item) {
+          this.expandedSet.delete(other);
+          this.applyExpansionState(other);
+        }
+      }
+    }
+    this.expandedSet.add(item);
+    this.applyExpansionState(item);
+  }
+  collapse(item) {
+    this.expandedSet.delete(item);
+    this.applyExpansionState(item);
+  }
+  toggle(item) {
+    if (this.isExpanded(item)) {
+      this.collapse(item);
+    } else {
+      this.expand(item);
+    }
+  }
+  // -- Internal --
+  applyExpansionState(item) {
+    const el = item.el;
+    if (!el) return;
+    const expanded = this.expandedSet.has(item);
+    if (expanded) {
+      el.style.flexGrow = this.fill ? "1" : "0";
+      el.style.flexShrink = "0";
+      el.style.overflow = "";
+      el.classList.remove("x-accordion-collapsed");
+      el.classList.add("x-accordion-expanded");
+    } else {
+      el.style.flexGrow = "0";
+      el.style.flexShrink = "0";
+      el.style.overflow = "hidden";
+      el.classList.remove("x-accordion-expanded");
+      el.classList.add("x-accordion-collapsed");
+    }
+  }
+  getOwnerItems() {
+    return this.owner?.getItems?.() ?? [];
+  }
+};
+
+// src/ResponsivePlugin.ts
+function toMediaQuery(expr) {
+  if (expr.startsWith("(") || expr.startsWith("@media")) return expr;
+  const parts = expr.split("&&").map((s) => s.trim());
+  const conditions = [];
+  for (const part of parts) {
+    const m = part.match(/^width\s*(>=?|<=?|==)\s*(\d+)$/);
+    if (!m) {
+      conditions.push(`(${part})`);
+      continue;
+    }
+    const op = m[1];
+    const val = parseInt(m[2], 10);
+    switch (op) {
+      case "<":
+        conditions.push(`(max-width: ${val - 1}px)`);
+        break;
+      case "<=":
+        conditions.push(`(max-width: ${val}px)`);
+        break;
+      case ">":
+        conditions.push(`(min-width: ${val + 1}px)`);
+        break;
+      case ">=":
+        conditions.push(`(min-width: ${val}px)`);
+        break;
+      case "==":
+        conditions.push(`(width: ${val}px)`);
+        break;
+    }
+  }
+  return conditions.join(" and ");
+}
+function applyConfig(owner, config) {
+  for (const [key, value] of Object.entries(config)) {
+    switch (key) {
+      case "cls":
+        if (typeof value === "string") owner.addCls(value);
+        break;
+      case "hidden":
+        if (value) owner.hide();
+        else owner.show();
+        break;
+      case "disabled":
+        if (value) owner.disable();
+        else owner.enable();
+        break;
+      case "width":
+        if (typeof value === "number" || typeof value === "string") owner.setWidth(value);
+        break;
+      case "height":
+        if (typeof value === "number" || typeof value === "string") owner.setHeight(value);
+        break;
+      default:
+        owner._config[key] = value;
+        break;
+    }
+  }
+}
+function removeClsConfig(owner, config) {
+  if (config.cls && typeof config.cls === "string") {
+    owner.removeCls(config.cls);
+  }
+}
+var ResponsivePlugin = class {
+  config;
+  owner = null;
+  entries = [];
+  activeConfigs = /* @__PURE__ */ new Set();
+  constructor(config) {
+    this.config = config;
+  }
+  getOwner() {
+    return this.owner;
+  }
+  /**
+   * Initialise the plugin with its owner component.
+   * Sets up matchMedia listeners and applies initial state.
+   */
+  init(owner) {
+    this.owner = owner;
+    for (const [expr, cfg] of Object.entries(this.config.responsiveConfig)) {
+      const query = toMediaQuery(expr);
+      const mql = window.matchMedia(query);
+      const handler = (e) => {
+        if (e.matches) {
+          applyConfig(owner, cfg);
+          this.activeConfigs.add(cfg);
+        } else {
+          removeClsConfig(owner, cfg);
+          this.activeConfigs.delete(cfg);
+        }
+      };
+      this.entries.push({ query, mql, config: cfg, handler });
+      mql.addEventListener("change", handler);
+      if (mql.matches) {
+        applyConfig(owner, cfg);
+        this.activeConfigs.add(cfg);
+      }
+    }
+  }
+  /**
+   * Clean up all media query listeners.
+   */
+  destroy() {
+    for (const entry of this.entries) {
+      entry.mql.removeEventListener("change", entry.handler);
+    }
+    this.entries.length = 0;
+    this.activeConfigs.clear();
+    this.owner = null;
+  }
+};
+
+// src/ResponsiveColumnLayout.ts
+var ResponsiveColumnLayout = class extends Layout {
+  minColumnWidth;
+  gap;
+  maxColumns;
+  constructor(config) {
+    super({ ...config, type: "responsivecolumn" });
+    this.minColumnWidth = config.minColumnWidth;
+    this.gap = config.gap ?? 0;
+    this.maxColumns = config.maxColumns;
+  }
+  /**
+   * Configures the container element with CSS Grid responsive columns.
+   */
+  configureContainer(el) {
+    el.style.display = "grid";
+    if (this.maxColumns) {
+      el.style.gridTemplateColumns = `repeat(auto-fill, minmax(min(${this.minColumnWidth}px, 100%), ${Math.floor(100 / this.maxColumns)}%))`;
+    } else {
+      el.style.gridTemplateColumns = `repeat(auto-fill, minmax(${this.minColumnWidth}px, 1fr))`;
+    }
+    if (this.gap > 0) {
+      el.style.gap = `${this.gap}px`;
+    }
+  }
+  /**
+   * Applies columnSpan to items that need to span multiple columns.
+   */
+  applyItemStyles(items, _target) {
+    for (const item of items) {
+      const el = item.el;
+      if (!el) continue;
+      const span = item._config?.columnSpan;
+      if (span && span > 1) {
+        el.style.gridColumn = `span ${span}`;
+      }
+    }
+  }
+  renderItems(items, target) {
+    this.configureContainer(target);
+    super.renderItems(items, target);
+    this.applyItemStyles(items, target);
+  }
+};
+export {
+  AbsoluteLayout,
+  AccordionLayout,
+  AnchorLayout,
+  AutoLayout,
+  BorderLayout,
+  BoxLayout,
+  CardLayout,
+  ColumnLayout,
+  FitLayout,
+  HBoxLayout,
+  Layout,
+  LayoutContext,
+  LayoutRunner,
+  ResponsiveColumnLayout,
+  ResponsivePlugin,
+  TableLayout,
+  VBoxLayout
+};
+//# sourceMappingURL=index.js.map