@luckydraw/blex 0.1.0

package/dist/esm/chunk-ZKSJGHJI.js

@@ -0,0 +1,1573 @@
+import { BaseRenderer } from './chunk-ODHF7VXV.js';
+import DOMPurify from 'dompurify';
+
+// src/registry.ts
+var registry = /* @__PURE__ */ new Map();
+var builtInTypes = /* @__PURE__ */ new Set();
+function registerBlockType(type, factory) {
+  registry.set(type, { factory });
+}
+function markBuiltIn(type) {
+  builtInTypes.add(type);
+}
+function isBuiltIn(type) {
+  return builtInTypes.has(type);
+}
+function unregisterBlockType(type, options) {
+  if (!registry.has(type)) return false;
+  if (builtInTypes.has(type) && !options?.force) {
+    throw new Error(`Cannot unregister built-in block type "${type}" without force: true`);
+  }
+  registry.delete(type);
+  builtInTypes.delete(type);
+  return true;
+}
+function registerLazyBlockType(type, loader) {
+  registry.set(type, { loader });
+}
+async function resolveRenderer(type) {
+  const entry = registry.get(type);
+  if (!entry) return null;
+  if (entry.factory) {
+    return entry.factory();
+  }
+  if (entry.loader) {
+    const factory = await entry.loader();
+    entry.factory = factory;
+    entry.loader = void 0;
+    return factory();
+  }
+  return null;
+}
+function hasBlockType(type) {
+  return registry.has(type);
+}
+function getRegisteredTypes() {
+  return Array.from(registry.keys());
+}
+
+// src/fallback.ts
+var FallbackRenderer = class extends BaseRenderer {
+  render(block, container) {
+    this.container = container;
+    const details = document.createElement("details");
+    details.setAttribute("data-testid", `blex-fallback-${block.id}`);
+    const summary = document.createElement("summary");
+    summary.textContent = `Unknown block type: ${block.type}`;
+    summary.setAttribute("data-testid", `blex-fallback-summary-${block.id}`);
+    details.appendChild(summary);
+    const pre = document.createElement("pre");
+    const code = document.createElement("code");
+    code.textContent = JSON.stringify(block.data, null, 2);
+    pre.appendChild(code);
+    details.appendChild(pre);
+    container.appendChild(details);
+    container.setAttribute("data-blex-ready", "true");
+  }
+  update(block) {
+    if (!this.container) return;
+    const code = this.container.querySelector("code");
+    if (code) {
+      code.textContent = JSON.stringify(block.data, null, 2);
+    }
+  }
+};
+
+// src/theme.ts
+var THEME_ID = "blex-theme-defaults";
+var DEFAULT_STYLES = `
+:root {
+  --blex-bg: #ffffff;
+  --blex-text: #1a1a1a;
+  --blex-border: #e5e5e5;
+  --blex-accent: #3b82f6;
+  --blex-success: #22c55e;
+  --blex-warning: #f59e0b;
+  --blex-error: #ef4444;
+  --blex-chart-bg: var(--blex-bg);
+  --blex-chart-text: var(--blex-text);
+  --blex-animation-duration: 200ms;
+  --blex-font-family: system-ui, -apple-system, sans-serif;
+  --blex-font-mono: ui-monospace, 'Cascadia Code', 'Source Code Pro', Menlo, monospace;
+}
+
+[data-theme="dark"] {
+  --blex-bg: #1a1a1a;
+  --blex-text: #e5e5e5;
+  --blex-border: #333333;
+  --blex-accent: #60a5fa;
+  --blex-success: #4ade80;
+  --blex-warning: #fbbf24;
+  --blex-error: #f87171;
+}
+
+[data-test-mode="true"] *,
+[data-test-mode="true"] *::before,
+[data-test-mode="true"] *::after {
+  animation-duration: 0.001ms !important;
+  transition-duration: 0.001ms !important;
+}
+
+.blex-placeholder {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  padding: 12px 16px;
+  border: 1px solid var(--blex-border);
+  border-radius: 6px;
+  background: var(--blex-bg);
+  color: var(--blex-text);
+  font-family: var(--blex-font-family);
+}
+
+.blex-placeholder__label {
+  font-size: 12px;
+  opacity: 0.6;
+  text-transform: uppercase;
+  letter-spacing: 0.05em;
+}
+
+.blex-placeholder__pulse {
+  width: 100%;
+  height: 20px;
+  background: linear-gradient(90deg, var(--blex-border) 25%, transparent 50%, var(--blex-border) 75%);
+  background-size: 200% 100%;
+  animation: blex-pulse var(--blex-animation-duration, 200ms) ease-in-out infinite;
+  animation-duration: 1.5s;
+  border-radius: 4px;
+}
+
+@keyframes blex-pulse {
+  0% { background-position: 200% 0; }
+  100% { background-position: -200% 0; }
+}
+`;
+var injected = false;
+function ensureTheme() {
+  if (injected) return;
+  if (typeof document === "undefined") return;
+  if (document.getElementById(THEME_ID)) {
+    injected = true;
+    return;
+  }
+  const style = document.createElement("style");
+  style.id = THEME_ID;
+  style.textContent = DEFAULT_STYLES;
+  document.head.appendChild(style);
+  injected = true;
+}
+
+// src/render.ts
+async function renderBlock(block, container, options) {
+  ensureTheme();
+  container.innerHTML = "";
+  container.setAttribute("data-blex-type", block.type);
+  container.setAttribute("data-blex-id", block.id);
+  let renderer = await resolveRenderer(block.type);
+  if (!renderer) {
+    renderer = new FallbackRenderer();
+  }
+  renderer.render(block, container);
+  container.setAttribute("data-blex-ready", "true");
+  if (options?.onReady) {
+    options.onReady();
+  }
+  const handle = {
+    update(updatedBlock) {
+      if (renderer?.update) {
+        renderer.update(updatedBlock);
+      }
+    },
+    onInteraction(callback) {
+      if (renderer?.onInteraction) {
+        renderer.onInteraction(callback);
+      }
+    },
+    destroy() {
+      renderer?.destroy();
+      renderer = null;
+      container.removeAttribute("data-blex-type");
+      container.removeAttribute("data-blex-id");
+      container.removeAttribute("data-blex-ready");
+    }
+  };
+  return handle;
+}
+
+// src/renderers/confirm.ts
+var DEFAULT_BUTTONS = ["Yes", "No", "Cancel"];
+var ConfirmRenderer = class extends BaseRenderer {
+  render(block, container) {
+    this.container = container;
+    this._build(block);
+    container.setAttribute("data-blex-ready", "true");
+  }
+  update(block) {
+    if (!this.container) return;
+    this.container.innerHTML = "";
+    this._build(block);
+  }
+  _build(block) {
+    const container = this.container;
+    const data = block.data;
+    const buttons = data.buttons ?? DEFAULT_BUTTONS;
+    const wrapper = document.createElement("div");
+    wrapper.className = "blex-confirm";
+    wrapper.setAttribute("data-testid", `blex-confirm-${block.id}`);
+    const msg = document.createElement("p");
+    msg.className = "blex-confirm__message";
+    msg.setAttribute("data-testid", `blex-confirm-message-${block.id}`);
+    msg.textContent = data.message;
+    wrapper.appendChild(msg);
+    const btnGroup = document.createElement("div");
+    btnGroup.className = "blex-confirm__buttons";
+    for (const label of buttons) {
+      const btn = document.createElement("button");
+      btn.className = "blex-confirm__button";
+      btn.textContent = label;
+      btn.setAttribute("data-testid", `blex-confirm-btn-${label.toLowerCase()}`);
+      this.addListener(btn, "click", () => {
+        this.emit({
+          blockId: block.id,
+          type: "click",
+          payload: { button: label },
+          serialized: `User confirmed: ${data.message} \u2192 ${label}`
+        });
+      });
+      btnGroup.appendChild(btn);
+    }
+    wrapper.appendChild(btnGroup);
+    container.appendChild(wrapper);
+  }
+};
+function createConfirmRenderer() {
+  return new ConfirmRenderer();
+}
+
+// src/renderers/poll.ts
+var PollRenderer = class extends BaseRenderer {
+  constructor() {
+    super(...arguments);
+    this.selected = /* @__PURE__ */ new Set();
+    this.writeInValue = "";
+  }
+  render(block, container) {
+    this.container = container;
+    this._build(block);
+    container.setAttribute("data-blex-ready", "true");
+  }
+  update(block) {
+    if (!this.container) return;
+    const newOptionCount = block.data.options.length;
+    for (const idx of Array.from(this.selected)) {
+      if (idx >= newOptionCount) this.selected.delete(idx);
+    }
+    this.container.innerHTML = "";
+    this._build(block);
+  }
+  _build(block) {
+    const container = this.container;
+    const { question, options, multiSelect, writeIn } = block.data;
+    const wrapper = document.createElement("div");
+    wrapper.className = "blex-poll";
+    wrapper.setAttribute("data-testid", `blex-poll-${block.id}`);
+    const q = document.createElement("p");
+    q.className = "blex-poll__question";
+    q.textContent = question;
+    wrapper.appendChild(q);
+    const optionsList = document.createElement("div");
+    optionsList.className = "blex-poll__options";
+    options.forEach((opt, i) => {
+      const btn = document.createElement("button");
+      btn.className = "blex-poll__option";
+      if (this.selected.has(i)) {
+        btn.classList.add("blex-poll__option--selected");
+      }
+      btn.setAttribute("data-testid", `blex-poll-option-${i}`);
+      btn.textContent = opt;
+      this.addListener(btn, "click", () => {
+        if (multiSelect) {
+          if (this.selected.has(i)) {
+            this.selected.delete(i);
+            btn.classList.remove("blex-poll__option--selected");
+          } else {
+            this.selected.add(i);
+            btn.classList.add("blex-poll__option--selected");
+          }
+        } else {
+          const allOptionBtns = optionsList.querySelectorAll(".blex-poll__option");
+          allOptionBtns.forEach((b) => b.classList.remove("blex-poll__option--selected"));
+          this.selected.clear();
+          this.selected.add(i);
+          btn.classList.add("blex-poll__option--selected");
+        }
+      });
+      optionsList.appendChild(btn);
+    });
+    wrapper.appendChild(optionsList);
+    if (writeIn) {
+      const writeInInput = document.createElement("input");
+      writeInInput.type = "text";
+      writeInInput.className = "blex-poll__writein";
+      writeInInput.placeholder = "Other...";
+      writeInInput.setAttribute("data-testid", `blex-poll-writein-${block.id}`);
+      writeInInput.value = this.writeInValue;
+      this.addListener(writeInInput, "input", () => {
+        this.writeInValue = writeInInput.value;
+      });
+      wrapper.appendChild(writeInInput);
+    }
+    const submitBtn = document.createElement("button");
+    submitBtn.className = "blex-poll__submit";
+    submitBtn.textContent = "Submit";
+    submitBtn.setAttribute("data-testid", `blex-poll-submit-${block.id}`);
+    this.addListener(submitBtn, "click", () => {
+      const selectedLabels = Array.from(this.selected).sort((a, b) => a - b).map((i) => options[i]);
+      const payload = {
+        selected: selectedLabels
+      };
+      let serialized = `Poll response: ${question}
+Selected: ${selectedLabels.join(", ")}`;
+      if (this.writeInValue) {
+        payload.writeIn = this.writeInValue;
+        serialized += `
+Write-in: ${this.writeInValue}`;
+      }
+      this.emit({
+        blockId: block.id,
+        type: "submit",
+        payload,
+        serialized
+      });
+    });
+    wrapper.appendChild(submitBtn);
+    container.appendChild(wrapper);
+  }
+};
+function createPollRenderer() {
+  return new PollRenderer();
+}
+
+// src/renderers/status.ts
+var StatusRenderer = class extends BaseRenderer {
+  render(block, container) {
+    this.container = container;
+    this.renderContent(block);
+  }
+  update(block) {
+    if (!this.container) return;
+    this.container.innerHTML = "";
+    this.renderContent(block);
+  }
+  renderContent(block) {
+    const container = this.container;
+    const { entries } = block.data;
+    const wrapper = document.createElement("div");
+    wrapper.className = "blex-status";
+    wrapper.setAttribute("data-testid", `blex-status-${block.id}`);
+    for (let i = 0; i < entries.length; i++) {
+      const entry = entries[i];
+      const row = document.createElement("div");
+      row.className = "blex-status__entry";
+      row.setAttribute("data-testid", `blex-status-entry-${i}`);
+      const keyEl = document.createElement("span");
+      keyEl.className = "blex-status__key";
+      keyEl.textContent = entry.key;
+      row.appendChild(keyEl);
+      const valueEl = document.createElement("span");
+      valueEl.className = "blex-status__value";
+      valueEl.textContent = entry.value;
+      row.appendChild(valueEl);
+      if (entry.status) {
+        const dot = document.createElement("span");
+        dot.className = `blex-status__indicator blex-status__indicator--${entry.status}`;
+        row.appendChild(dot);
+      }
+      wrapper.appendChild(row);
+    }
+    container.appendChild(wrapper);
+    container.setAttribute("data-blex-ready", "true");
+  }
+};
+function createStatusRenderer() {
+  return new StatusRenderer();
+}
+
+// src/renderers/metric.ts
+var TREND_ARROWS = {
+  up: "\u2191",
+  down: "\u2193",
+  flat: "\u2192"
+};
+var MetricRenderer = class extends BaseRenderer {
+  render(block, container) {
+    this.container = container;
+    this.renderContent(block);
+  }
+  update(block) {
+    if (!this.container) return;
+    this.container.innerHTML = "";
+    this.renderContent(block);
+  }
+  renderContent(block) {
+    const container = this.container;
+    const { value, label, trend, trendDirection } = block.data;
+    const wrapper = document.createElement("div");
+    wrapper.className = "blex-metric";
+    wrapper.setAttribute("data-testid", `blex-metric-${block.id}`);
+    const valueEl = document.createElement("div");
+    valueEl.className = "blex-metric__value";
+    valueEl.setAttribute("data-testid", `blex-metric-value-${block.id}`);
+    valueEl.textContent = value;
+    wrapper.appendChild(valueEl);
+    const labelEl = document.createElement("div");
+    labelEl.className = "blex-metric__label";
+    labelEl.setAttribute("data-testid", `blex-metric-label-${block.id}`);
+    labelEl.textContent = label;
+    wrapper.appendChild(labelEl);
+    if (trend !== void 0) {
+      const trendEl = document.createElement("div");
+      const arrow = trendDirection ? TREND_ARROWS[trendDirection] : "";
+      const directionClass = trendDirection ? ` blex-metric__trend--${trendDirection}` : "";
+      trendEl.className = `blex-metric__trend${directionClass}`;
+      trendEl.setAttribute("data-testid", `blex-metric-trend-${block.id}`);
+      trendEl.textContent = arrow ? `${arrow} ${trend}` : trend;
+      wrapper.appendChild(trendEl);
+    }
+    container.appendChild(wrapper);
+    container.setAttribute("data-blex-ready", "true");
+  }
+};
+function createMetricRenderer() {
+  return new MetricRenderer();
+}
+var ImageRenderer = class extends BaseRenderer {
+  render(block, container) {
+    this.container = container;
+    this._build(block);
+    container.setAttribute("data-blex-ready", "true");
+  }
+  update(block) {
+    if (!this.container) return;
+    this.container.innerHTML = "";
+    this._build(block);
+  }
+  _build(block) {
+    const container = this.container;
+    const { src, alt, caption, width, height } = block.data;
+    const wrapper = document.createElement("figure");
+    wrapper.className = "blex-image";
+    wrapper.setAttribute("data-testid", `blex-image-${block.id}`);
+    const img = document.createElement("img");
+    img.src = src;
+    img.alt = alt ?? "";
+    img.className = "blex-image__img";
+    img.setAttribute("data-testid", `blex-image-img-${block.id}`);
+    if (width !== void 0) img.width = width;
+    if (height !== void 0) img.height = height;
+    this.addListener(img, "click", () => this._openOverlay(src, alt));
+    wrapper.appendChild(img);
+    if (caption) {
+      const cap = document.createElement("figcaption");
+      cap.className = "blex-image__caption";
+      cap.setAttribute("data-testid", `blex-image-caption-${block.id}`);
+      cap.innerHTML = DOMPurify.sanitize(caption);
+      wrapper.appendChild(cap);
+    }
+    const actions = document.createElement("div");
+    actions.className = "blex-image__actions";
+    const zoomBtn = document.createElement("button");
+    zoomBtn.className = "blex-image__btn";
+    zoomBtn.textContent = "Zoom";
+    zoomBtn.setAttribute("data-testid", `blex-image-zoom-${block.id}`);
+    this.addListener(zoomBtn, "click", () => this._openOverlay(src, alt));
+    actions.appendChild(zoomBtn);
+    const downloadBtn = document.createElement("button");
+    downloadBtn.className = "blex-image__btn";
+    downloadBtn.textContent = "Download";
+    downloadBtn.setAttribute("data-testid", `blex-image-download-${block.id}`);
+    this.addListener(downloadBtn, "click", () => {
+      const a = document.createElement("a");
+      a.href = src;
+      a.download = alt ?? "image";
+      a.click();
+    });
+    actions.appendChild(downloadBtn);
+    wrapper.appendChild(actions);
+    container.appendChild(wrapper);
+  }
+  _openOverlay(src, alt) {
+    const overlay = document.createElement("div");
+    overlay.className = "blex-image__overlay";
+    const img = document.createElement("img");
+    img.src = src;
+    img.alt = alt ?? "";
+    overlay.appendChild(img);
+    const closeOverlay = () => {
+      overlay.remove();
+      document.removeEventListener("keydown", onKeyDown);
+    };
+    const onKeyDown = (e) => {
+      if (e.key === "Escape") closeOverlay();
+    };
+    this.addListener(overlay, "click", closeOverlay);
+    document.addEventListener("keydown", onKeyDown);
+    document.body.appendChild(overlay);
+  }
+};
+function createImageRenderer() {
+  return new ImageRenderer();
+}
+var SvgRenderer = class extends BaseRenderer {
+  render(block, container) {
+    this.container = container;
+    this.renderContent(block);
+  }
+  update(block) {
+    if (!this.container) return;
+    this.container.innerHTML = "";
+    this.renderContent(block);
+  }
+  renderContent(block) {
+    const container = this.container;
+    const { svg, title } = block.data;
+    const wrapper = document.createElement("div");
+    wrapper.className = "blex-svg";
+    wrapper.setAttribute("data-testid", `blex-svg-${block.id}`);
+    if (title) {
+      const titleEl = document.createElement("div");
+      titleEl.className = "blex-svg__title";
+      titleEl.textContent = title;
+      wrapper.appendChild(titleEl);
+    }
+    const svgContainer = document.createElement("div");
+    svgContainer.className = "blex-svg__content";
+    svgContainer.setAttribute("data-testid", `blex-svg-content-${block.id}`);
+    svgContainer.innerHTML = DOMPurify.sanitize(svg, { USE_PROFILES: { svg: true } });
+    wrapper.appendChild(svgContainer);
+    const actions = document.createElement("div");
+    actions.className = "blex-svg__actions";
+    const downloadBtn = document.createElement("button");
+    downloadBtn.className = "blex-svg__btn";
+    downloadBtn.textContent = "Download SVG";
+    downloadBtn.setAttribute("data-testid", `blex-svg-download-${block.id}`);
+    this.addListener(downloadBtn, "click", () => {
+      const blob = new Blob([svg], { type: "image/svg+xml" });
+      const url = URL.createObjectURL(blob);
+      const a = document.createElement("a");
+      a.href = url;
+      a.download = `${title ?? "image"}.svg`;
+      a.click();
+      URL.revokeObjectURL(url);
+      this.emit({
+        blockId: block.id,
+        type: "click",
+        payload: { action: "download" },
+        serialized: `Downloaded SVG${title ? `: ${title}` : ""}`
+      });
+    });
+    actions.appendChild(downloadBtn);
+    const copyBtn = document.createElement("button");
+    copyBtn.className = "blex-svg__btn";
+    copyBtn.textContent = "Copy SVG";
+    copyBtn.setAttribute("data-testid", `blex-svg-copy-${block.id}`);
+    this.addListener(copyBtn, "click", () => {
+      navigator.clipboard?.writeText(svg);
+      this.emit({
+        blockId: block.id,
+        type: "click",
+        payload: { action: "copy" },
+        serialized: `Copied SVG${title ? `: ${title}` : ""}`
+      });
+    });
+    actions.appendChild(copyBtn);
+    wrapper.appendChild(actions);
+    container.appendChild(wrapper);
+    container.setAttribute("data-blex-ready", "true");
+  }
+};
+function createSvgRenderer() {
+  return new SvgRenderer();
+}
+
+// src/renderers/table.ts
+var TableRenderer = class extends BaseRenderer {
+  constructor() {
+    super(...arguments);
+    this.selectedRows = /* @__PURE__ */ new Set();
+    this.sortColumn = null;
+    this.sortDirection = "asc";
+    this.currentBlock = null;
+  }
+  render(block, container) {
+    this.container = container;
+    this.currentBlock = block;
+    this._build(block);
+    container.setAttribute("data-blex-ready", "true");
+  }
+  update(block) {
+    if (!this.container) return;
+    this.currentBlock = block;
+    this.selectedRows.clear();
+    this.sortColumn = null;
+    this.sortDirection = "asc";
+    this.container.innerHTML = "";
+    this._build(block);
+  }
+  _getSortedRows(rows) {
+    const indexed = rows.map((row, i) => ({ row, originalIndex: i }));
+    if (!this.sortColumn) return indexed;
+    const col = this.sortColumn;
+    const dir = this.sortDirection;
+    return indexed.slice().sort((a, b) => {
+      const av = a.row[col] ?? "";
+      const bv = b.row[col] ?? "";
+      let cmp;
+      if (typeof av === "number" && typeof bv === "number") {
+        cmp = av - bv;
+      } else {
+        cmp = String(av).localeCompare(String(bv));
+      }
+      return dir === "asc" ? cmp : -cmp;
+    });
+  }
+  _build(block) {
+    const container = this.container;
+    const { columns, rows, sortable } = block.data;
+    const wrapper = document.createElement("div");
+    wrapper.className = "blex-table";
+    wrapper.setAttribute("data-testid", `blex-table-${block.id}`);
+    const table = document.createElement("table");
+    const thead = document.createElement("thead");
+    const headerRow = document.createElement("tr");
+    headerRow.className = "blex-table__header";
+    for (const col of columns) {
+      const th = document.createElement("th");
+      th.className = "blex-table__header-cell";
+      th.setAttribute("data-testid", `blex-table-header-${col}`);
+      th.textContent = col;
+      if (this.sortColumn === col) {
+        th.classList.add(
+          this.sortDirection === "asc" ? "blex-table__header-cell--sorted-asc" : "blex-table__header-cell--sorted-desc"
+        );
+      }
+      if (sortable) {
+        this.addListener(th, "click", () => {
+          if (this.sortColumn === col) {
+            this.sortDirection = this.sortDirection === "asc" ? "desc" : "asc";
+          } else {
+            this.sortColumn = col;
+            this.sortDirection = "asc";
+          }
+          container.innerHTML = "";
+          this._build(this.currentBlock);
+        });
+      }
+      headerRow.appendChild(th);
+    }
+    thead.appendChild(headerRow);
+    table.appendChild(thead);
+    const tbody = document.createElement("tbody");
+    const sortedRows = this._getSortedRows(rows);
+    for (const { row, originalIndex } of sortedRows) {
+      const tr = document.createElement("tr");
+      tr.className = "blex-table__row";
+      tr.setAttribute("data-testid", `blex-table-row-${originalIndex}`);
+      if (this.selectedRows.has(originalIndex)) {
+        tr.classList.add("blex-table__row--selected");
+      }
+      this.addListener(tr, "click", () => {
+        if (this.selectedRows.has(originalIndex)) {
+          this.selectedRows.delete(originalIndex);
+          tr.classList.remove("blex-table__row--selected");
+        } else {
+          this.selectedRows.add(originalIndex);
+          tr.classList.add("blex-table__row--selected");
+        }
+        this._emitSelection(block);
+      });
+      for (const col of columns) {
+        const td = document.createElement("td");
+        td.className = "blex-table__cell";
+        td.setAttribute("data-testid", `blex-table-cell-${originalIndex}-${col}`);
+        td.textContent = String(row[col] ?? "");
+        tr.appendChild(td);
+      }
+      tbody.appendChild(tr);
+    }
+    table.appendChild(tbody);
+    wrapper.appendChild(table);
+    container.appendChild(wrapper);
+  }
+  _emitSelection(block) {
+    const { columns, rows } = block.data;
+    const selectedIndices = Array.from(this.selectedRows).sort((a, b) => a - b);
+    const selectedRows = selectedIndices.map((i) => rows[i]);
+    const headerLine = `| ${columns.join(" | ")} |`;
+    const separatorLine = `| ${columns.map(() => "---").join(" | ")} |`;
+    const dataLines = selectedRows.map(
+      (row) => `| ${columns.map((col) => String(row[col] ?? "")).join(" | ")} |`
+    );
+    const serialized = [
+      "Selected from table:",
+      headerLine,
+      separatorLine,
+      ...dataLines
+    ].join("\n");
+    this.emit({
+      blockId: block.id,
+      type: "select",
+      payload: {
+        selectedRows: selectedIndices,
+        columns
+      },
+      serialized
+    });
+  }
+};
+function createTableRenderer() {
+  return new TableRenderer();
+}
+
+// src/renderers/code.ts
+var CodeRenderer = class extends BaseRenderer {
+  constructor() {
+    super(...arguments);
+    this.selectedLines = /* @__PURE__ */ new Set();
+    this.lastClickedLine = null;
+  }
+  render(block, container) {
+    this.container = container;
+    this._build(block);
+    container.setAttribute("data-blex-ready", "true");
+  }
+  update(block) {
+    if (!this.container) return;
+    const lines = block.data.code.split("\n");
+    for (const lineNum of Array.from(this.selectedLines)) {
+      if (lineNum > lines.length) this.selectedLines.delete(lineNum);
+    }
+    this.container.innerHTML = "";
+    this._build(block);
+  }
+  _build(block) {
+    const container = this.container;
+    const { code, language, highlightLines = [] } = block.data;
+    const lineNumbersEnabled = block.data.lineNumbers !== false;
+    const lines = code.split("\n");
+    const pre = document.createElement("pre");
+    pre.className = "blex-code";
+    if (language) pre.setAttribute("data-language", language);
+    pre.setAttribute("data-testid", `blex-code-${block.id}`);
+    const copyBtn = document.createElement("button");
+    copyBtn.className = "blex-code__copy";
+    copyBtn.setAttribute("data-testid", `blex-code-copy-${block.id}`);
+    copyBtn.textContent = "Copy";
+    this.addListener(copyBtn, "click", () => {
+      navigator.clipboard.writeText(code);
+    });
+    pre.appendChild(copyBtn);
+    let gutter = null;
+    if (lineNumbersEnabled) {
+      gutter = document.createElement("div");
+      gutter.className = "blex-code__gutter";
+      pre.appendChild(gutter);
+    }
+    const codeEl = document.createElement("code");
+    codeEl.className = "blex-code__content";
+    if (language) codeEl.className += ` language-${language}`;
+    lines.forEach((lineText, i) => {
+      const lineNum = i + 1;
+      if (lineNumbersEnabled && gutter) {
+        const lineNumberEl = document.createElement("span");
+        lineNumberEl.className = "blex-code__line-number";
+        lineNumberEl.textContent = String(lineNum);
+        this.addListener(lineNumberEl, "click", (e) => {
+          const mouseEvent = e;
+          if (mouseEvent.shiftKey && this.lastClickedLine !== null) {
+            const start = Math.min(this.lastClickedLine, lineNum);
+            const end = Math.max(this.lastClickedLine, lineNum);
+            for (let l = start; l <= end; l++) {
+              this.selectedLines.add(l);
+            }
+          } else {
+            if (this.selectedLines.has(lineNum)) {
+              this.selectedLines.delete(lineNum);
+            } else {
+              this.selectedLines.add(lineNum);
+            }
+            this.lastClickedLine = lineNum;
+          }
+          this._updateSelectionClasses(codeEl, lines.length);
+          this._emitSelection(block, lines);
+        });
+        gutter.appendChild(lineNumberEl);
+      }
+      const lineEl = document.createElement("div");
+      lineEl.className = "blex-code__line";
+      lineEl.setAttribute("data-testid", `blex-code-line-${lineNum}`);
+      lineEl.textContent = lineText;
+      if (highlightLines.includes(lineNum)) {
+        lineEl.classList.add("blex-code__line--highlighted");
+      }
+      if (this.selectedLines.has(lineNum)) {
+        lineEl.classList.add("blex-code__line--selected");
+      }
+      codeEl.appendChild(lineEl);
+    });
+    pre.appendChild(codeEl);
+    container.appendChild(pre);
+  }
+  _updateSelectionClasses(codeEl, totalLines) {
+    for (let lineNum = 1; lineNum <= totalLines; lineNum++) {
+      const lineEl = codeEl.querySelector(`[data-testid="blex-code-line-${lineNum}"]`);
+      if (!lineEl) continue;
+      if (this.selectedLines.has(lineNum)) {
+        lineEl.classList.add("blex-code__line--selected");
+      } else {
+        lineEl.classList.remove("blex-code__line--selected");
+      }
+    }
+  }
+  _emitSelection(block, lines) {
+    const { language } = block.data;
+    const sortedLines = Array.from(this.selectedLines).sort((a, b) => a - b);
+    const selectedCode = sortedLines.map((lineNum) => lines[lineNum - 1]).join("\n");
+    const langTag = language ?? "";
+    const serialized = `\`\`\`${langTag}
+${selectedCode}
+\`\`\``;
+    this.emit({
+      blockId: block.id,
+      type: "select",
+      payload: {
+        lines: sortedLines,
+        ...language !== void 0 && { language }
+      },
+      serialized
+    });
+  }
+};
+function createCodeRenderer() {
+  return new CodeRenderer();
+}
+
+// src/renderers/diff.ts
+var DiffRenderer = class extends BaseRenderer {
+  constructor() {
+    super(...arguments);
+    this.viewMode = "unified";
+    this.selectedHunks = /* @__PURE__ */ new Set();
+  }
+  render(block, container) {
+    this.container = container;
+    this._build(block);
+    container.setAttribute("data-blex-ready", "true");
+  }
+  update(block) {
+    if (!this.container) return;
+    this.container.innerHTML = "";
+    this._build(block);
+  }
+  _build(block) {
+    const container = this.container;
+    const { hunks, filename } = block.data;
+    const wrapper = document.createElement("div");
+    wrapper.className = `blex-diff blex-diff--${this.viewMode}`;
+    wrapper.setAttribute("data-testid", `blex-diff-${block.id}`);
+    const header = document.createElement("div");
+    header.className = "blex-diff__header";
+    if (filename) {
+      header.textContent = filename;
+    }
+    wrapper.appendChild(header);
+    const hunksContainer = document.createElement("div");
+    hunksContainer.className = "blex-diff__hunks";
+    hunks.forEach((hunk, index) => {
+      const hunkEl = document.createElement("div");
+      hunkEl.className = "blex-diff__hunk";
+      if (this.selectedHunks.has(index)) {
+        hunkEl.classList.add("blex-diff__hunk--selected");
+      }
+      const hunkHeader = document.createElement("div");
+      hunkHeader.className = "blex-diff__hunk-header";
+      hunkHeader.setAttribute("data-testid", `blex-diff-hunk-${index}`);
+      hunkHeader.textContent = hunk.header;
+      this.addListener(hunkHeader, "click", () => {
+        if (this.selectedHunks.has(index)) {
+          this.selectedHunks.delete(index);
+          hunkEl.classList.remove("blex-diff__hunk--selected");
+        } else {
+          this.selectedHunks.add(index);
+          hunkEl.classList.add("blex-diff__hunk--selected");
+        }
+      });
+      hunkEl.appendChild(hunkHeader);
+      for (const line of hunk.lines) {
+        const lineEl = document.createElement("div");
+        lineEl.className = `blex-diff__line blex-diff__line--${line.type}`;
+        lineEl.textContent = line.content;
+        hunkEl.appendChild(lineEl);
+      }
+      hunksContainer.appendChild(hunkEl);
+    });
+    wrapper.appendChild(hunksContainer);
+    const actions = document.createElement("div");
+    actions.className = "blex-diff__actions";
+    const toggleBtn = document.createElement("button");
+    toggleBtn.className = "blex-diff__toggle";
+    toggleBtn.setAttribute("data-testid", `blex-diff-toggle-${block.id}`);
+    toggleBtn.textContent = this.viewMode === "unified" ? "Side by side" : "Unified";
+    this.addListener(toggleBtn, "click", () => {
+      this.viewMode = this.viewMode === "unified" ? "side-by-side" : "unified";
+      wrapper.className = `blex-diff blex-diff--${this.viewMode}`;
+      toggleBtn.textContent = this.viewMode === "unified" ? "Side by side" : "Unified";
+    });
+    actions.appendChild(toggleBtn);
+    const applyBtn = document.createElement("button");
+    applyBtn.className = "blex-diff__apply";
+    applyBtn.setAttribute("data-testid", `blex-diff-apply-${block.id}`);
+    applyBtn.textContent = "Apply";
+    this.addListener(applyBtn, "click", () => {
+      this.emit({
+        blockId: block.id,
+        type: "apply",
+        payload: { hunks },
+        serialized: `Applied diff to ${filename ?? "file"}`
+      });
+    });
+    actions.appendChild(applyBtn);
+    const rejectBtn = document.createElement("button");
+    rejectBtn.className = "blex-diff__reject";
+    rejectBtn.setAttribute("data-testid", `blex-diff-reject-${block.id}`);
+    rejectBtn.textContent = "Reject";
+    this.addListener(rejectBtn, "click", () => {
+      this.emit({
+        blockId: block.id,
+        type: "reject",
+        payload: { hunks },
+        serialized: `Rejected diff to ${filename ?? "file"}`
+      });
+    });
+    actions.appendChild(rejectBtn);
+    wrapper.appendChild(actions);
+    container.appendChild(wrapper);
+  }
+};
+function createDiffRenderer() {
+  return new DiffRenderer();
+}
+
+// src/renderers/file-tree.ts
+var FileTreeRenderer = class extends BaseRenderer {
+  constructor() {
+    super(...arguments);
+    this.expandedPaths = /* @__PURE__ */ new Set();
+    this.selectedPaths = /* @__PURE__ */ new Set();
+  }
+  render(block, container) {
+    this.container = container;
+    if (block.data.expanded) {
+      for (const p of block.data.expanded) this.expandedPaths.add(p);
+    }
+    this.buildTree(block);
+    container.setAttribute("data-blex-ready", "true");
+  }
+  update(block) {
+    if (!this.container) return;
+    this.container.innerHTML = "";
+    this.buildTree(block);
+  }
+  buildTree(block) {
+    const container = this.container;
+    const wrapper = document.createElement("div");
+    wrapper.className = "blex-file-tree";
+    wrapper.setAttribute("data-testid", `blex-file-tree-${block.id}`);
+    const ul = this.buildNode(block.data.root, "", block);
+    wrapper.appendChild(ul);
+    container.appendChild(wrapper);
+  }
+  buildNode(node, parentPath, block) {
+    const path = parentPath ? `${parentPath}/${node.name}` : node.name;
+    const li = document.createElement("div");
+    li.className = `blex-file-tree__node blex-file-tree__node--${node.type}`;
+    li.setAttribute("data-testid", `blex-file-tree-node-${path.replace(/\//g, "-")}`);
+    if (this.selectedPaths.has(path)) {
+      li.classList.add("blex-file-tree__node--selected");
+    }
+    const label = document.createElement("span");
+    label.className = "blex-file-tree__label";
+    label.textContent = node.name;
+    if (node.type === "directory") {
+      const isExpanded = this.expandedPaths.has(path);
+      const toggle = document.createElement("span");
+      toggle.className = "blex-file-tree__toggle";
+      toggle.textContent = isExpanded ? "\u25BC" : "\u25B6";
+      this.addListener(toggle, "click", (e) => {
+        e.stopPropagation();
+        if (this.expandedPaths.has(path)) {
+          this.expandedPaths.delete(path);
+        } else {
+          this.expandedPaths.add(path);
+        }
+        this.container.innerHTML = "";
+        this.buildTree(block);
+      });
+      li.appendChild(toggle);
+      li.appendChild(label);
+      if (isExpanded && node.children) {
+        const childContainer = document.createElement("div");
+        childContainer.className = "blex-file-tree__children";
+        for (const child of node.children) {
+          childContainer.appendChild(this.buildNode(child, path, block));
+        }
+        li.appendChild(childContainer);
+      }
+    } else {
+      li.appendChild(label);
+      if (node.size !== void 0) {
+        const sizeEl = document.createElement("span");
+        sizeEl.className = "blex-file-tree__size";
+        sizeEl.textContent = this.formatSize(node.size);
+        li.appendChild(sizeEl);
+      }
+    }
+    this.addListener(label, "click", () => {
+      if (this.selectedPaths.has(path)) {
+        this.selectedPaths.delete(path);
+        li.classList.remove("blex-file-tree__node--selected");
+      } else {
+        this.selectedPaths.add(path);
+        li.classList.add("blex-file-tree__node--selected");
+      }
+      this.emitSelection(block);
+    });
+    return li;
+  }
+  emitSelection(block) {
+    const paths = Array.from(this.selectedPaths).sort();
+    this.emit({
+      blockId: block.id,
+      type: "select",
+      payload: { paths },
+      serialized: `Selected files:
+${paths.join("\n")}`
+    });
+  }
+  formatSize(bytes) {
+    if (bytes < 1024) return `${bytes}B`;
+    if (bytes < 1048576) return `${(bytes / 1024).toFixed(1)}KB`;
+    return `${(bytes / 1048576).toFixed(1)}MB`;
+  }
+};
+function createFileTreeRenderer() {
+  return new FileTreeRenderer();
+}
+
+// src/renderers/form.ts
+var FormRenderer = class extends BaseRenderer {
+  constructor() {
+    super(...arguments);
+    this.values = {};
+    this.errors = {};
+  }
+  render(block, container) {
+    this.container = container;
+    for (const field of block.data.fields) {
+      if (field.defaultValue !== void 0) {
+        this.values[field.name] = field.defaultValue;
+      }
+    }
+    this.buildForm(block);
+    container.setAttribute("data-blex-ready", "true");
+  }
+  update(block) {
+    if (!this.container) return;
+    this.container.innerHTML = "";
+    this.buildForm(block);
+  }
+  buildForm(block) {
+    const container = this.container;
+    const { title, fields, submitLabel } = block.data;
+    const form = document.createElement("form");
+    form.className = "blex-form";
+    form.setAttribute("data-testid", `blex-form-${block.id}`);
+    this.addListener(form, "submit", (e) => {
+      e.preventDefault();
+      if (this.validate(fields)) {
+        const serializedPairs = Object.entries(this.values).map(([k, v]) => `${k}: ${v}`).join("\n");
+        this.emit({
+          blockId: block.id,
+          type: "submit",
+          payload: { ...this.values },
+          serialized: `Form submission${title ? ` (${title})` : ""}:
+${serializedPairs}`
+        });
+      } else {
+        this.container.innerHTML = "";
+        this.buildForm(block);
+      }
+    });
+    if (title) {
+      const titleEl = document.createElement("div");
+      titleEl.className = "blex-form__title";
+      titleEl.textContent = title;
+      form.appendChild(titleEl);
+    }
+    for (const field of fields) {
+      const group = document.createElement("div");
+      group.className = "blex-form__field";
+      const label = document.createElement("label");
+      label.className = "blex-form__label";
+      label.textContent = field.label + (field.required ? " *" : "");
+      group.appendChild(label);
+      const input = this.createInput(field);
+      group.appendChild(input);
+      if (this.errors[field.name]) {
+        const error = document.createElement("span");
+        error.className = "blex-form__error";
+        error.textContent = this.errors[field.name];
+        group.appendChild(error);
+      }
+      form.appendChild(group);
+    }
+    const submit = document.createElement("button");
+    submit.type = "submit";
+    submit.className = "blex-form__submit";
+    submit.textContent = submitLabel ?? "Submit";
+    submit.setAttribute("data-testid", `blex-form-submit-${block.id}`);
+    form.appendChild(submit);
+    container.appendChild(form);
+  }
+  createInput(field) {
+    const testId = `blex-form-field-${field.name}`;
+    if (field.type === "textarea") {
+      const textarea = document.createElement("textarea");
+      textarea.className = "blex-form__input";
+      textarea.name = field.name;
+      textarea.placeholder = field.placeholder ?? "";
+      textarea.required = field.required ?? false;
+      textarea.value = String(this.values[field.name] ?? "");
+      textarea.setAttribute("data-testid", testId);
+      this.addListener(textarea, "input", () => {
+        this.values[field.name] = textarea.value;
+      });
+      return textarea;
+    }
+    if (field.type === "select") {
+      const select = document.createElement("select");
+      select.className = "blex-form__input";
+      select.name = field.name;
+      select.required = field.required ?? false;
+      select.setAttribute("data-testid", testId);
+      const emptyOpt = document.createElement("option");
+      emptyOpt.value = "";
+      emptyOpt.textContent = field.placeholder ?? "Select...";
+      select.appendChild(emptyOpt);
+      for (const opt of field.options ?? []) {
+        const optEl = document.createElement("option");
+        optEl.value = opt;
+        optEl.textContent = opt;
+        if (this.values[field.name] === opt) optEl.selected = true;
+        select.appendChild(optEl);
+      }
+      this.addListener(select, "change", () => {
+        this.values[field.name] = select.value;
+      });
+      return select;
+    }
+    if (field.type === "checkbox") {
+      const input2 = document.createElement("input");
+      input2.type = "checkbox";
+      input2.className = "blex-form__checkbox";
+      input2.name = field.name;
+      input2.checked = Boolean(this.values[field.name]);
+      input2.setAttribute("data-testid", testId);
+      this.addListener(input2, "change", () => {
+        this.values[field.name] = input2.checked;
+      });
+      return input2;
+    }
+    const input = document.createElement("input");
+    input.type = field.type;
+    input.className = "blex-form__input";
+    input.name = field.name;
+    input.placeholder = field.placeholder ?? "";
+    input.required = field.required ?? false;
+    input.value = String(this.values[field.name] ?? "");
+    input.setAttribute("data-testid", testId);
+    this.addListener(input, "input", () => {
+      this.values[field.name] = field.type === "number" ? Number(input.value) : input.value;
+    });
+    return input;
+  }
+  validate(fields) {
+    this.errors = {};
+    let valid = true;
+    for (const field of fields) {
+      if (field.required) {
+        const val = this.values[field.name];
+        if (val === void 0 || val === "" || val === null) {
+          this.errors[field.name] = `${field.label} is required`;
+          valid = false;
+        }
+      }
+    }
+    return valid;
+  }
+};
+function createFormRenderer() {
+  return new FormRenderer();
+}
+
+// src/renderers/progress.ts
+var ProgressRenderer = class extends BaseRenderer {
+  render(block, container) {
+    this.container = container;
+    this.renderContent(block);
+  }
+  update(block) {
+    if (!this.container) return;
+    this.container.innerHTML = "";
+    this.renderContent(block);
+  }
+  renderContent(block) {
+    const container = this.container;
+    const { title, steps } = block.data;
+    const wrapper = document.createElement("div");
+    wrapper.className = "blex-progress";
+    wrapper.setAttribute("data-testid", `blex-progress-${block.id}`);
+    if (title) {
+      const titleEl = document.createElement("div");
+      titleEl.className = "blex-progress__title";
+      titleEl.textContent = title;
+      wrapper.appendChild(titleEl);
+    }
+    const stepsEl = document.createElement("div");
+    stepsEl.className = "blex-progress__steps";
+    steps.forEach((step, i) => {
+      const stepEl = document.createElement("div");
+      stepEl.className = `blex-progress__step blex-progress__step--${step.status}`;
+      stepEl.setAttribute("data-testid", `blex-progress-step-${i}`);
+      const indicator = document.createElement("span");
+      indicator.className = "blex-progress__indicator";
+      if (step.status === "completed") {
+        indicator.textContent = "\u2713";
+      } else if (step.status === "active") {
+        indicator.textContent = "\u25CF";
+      } else {
+        indicator.textContent = "\u25CB";
+      }
+      stepEl.appendChild(indicator);
+      const content = document.createElement("div");
+      content.className = "blex-progress__content";
+      const labelEl = document.createElement("span");
+      labelEl.className = "blex-progress__label";
+      labelEl.textContent = step.label;
+      content.appendChild(labelEl);
+      if (step.description) {
+        const desc = document.createElement("span");
+        desc.className = "blex-progress__description";
+        desc.textContent = step.description;
+        content.appendChild(desc);
+      }
+      stepEl.appendChild(content);
+      stepsEl.appendChild(stepEl);
+    });
+    wrapper.appendChild(stepsEl);
+    container.appendChild(wrapper);
+    container.setAttribute("data-blex-ready", "true");
+  }
+};
+function createProgressRenderer() {
+  return new ProgressRenderer();
+}
+
+// src/renderers/terminal.ts
+var ANSI_COLORS = {
+  "30": "color: #1a1a1a",
+  "31": "color: #ef4444",
+  "32": "color: #22c55e",
+  "33": "color: #f59e0b",
+  "34": "color: #3b82f6",
+  "35": "color: #a855f7",
+  "36": "color: #06b6d4",
+  "37": "color: #e5e5e5",
+  "1": "font-weight: bold",
+  "0": ""
+};
+var TerminalRenderer = class extends BaseRenderer {
+  render(block, container) {
+    this.container = container;
+    this.renderContent(block);
+  }
+  update(block) {
+    if (!this.container) return;
+    this.container.innerHTML = "";
+    this.renderContent(block);
+  }
+  renderContent(block) {
+    const container = this.container;
+    const { command, output, exitCode, collapsed } = block.data;
+    const wrapper = document.createElement("div");
+    wrapper.className = "blex-terminal";
+    wrapper.setAttribute("data-testid", `blex-terminal-${block.id}`);
+    if (exitCode !== void 0) {
+      wrapper.setAttribute("data-exit-code", String(exitCode));
+    }
+    if (command) {
+      const cmdEl = document.createElement("div");
+      cmdEl.className = "blex-terminal__command";
+      cmdEl.setAttribute("data-testid", `blex-terminal-command-${block.id}`);
+      const prompt = document.createElement("span");
+      prompt.className = "blex-terminal__prompt";
+      prompt.textContent = "$ ";
+      cmdEl.appendChild(prompt);
+      const cmdText = document.createElement("span");
+      cmdText.textContent = command;
+      cmdEl.appendChild(cmdText);
+      wrapper.appendChild(cmdEl);
+    }
+    const outputEl = document.createElement("pre");
+    outputEl.className = "blex-terminal__output";
+    outputEl.setAttribute("data-testid", `blex-terminal-output-${block.id}`);
+    outputEl.innerHTML = this.parseAnsi(output);
+    if (collapsed) {
+      outputEl.style.display = "none";
+      const toggleBtn = document.createElement("button");
+      toggleBtn.className = "blex-terminal__toggle";
+      toggleBtn.textContent = "Show output";
+      toggleBtn.setAttribute("data-testid", `blex-terminal-toggle-${block.id}`);
+      this.addListener(toggleBtn, "click", () => {
+        const isHidden = outputEl.style.display === "none";
+        outputEl.style.display = isHidden ? "block" : "none";
+        toggleBtn.textContent = isHidden ? "Hide output" : "Show output";
+      });
+      wrapper.appendChild(toggleBtn);
+    }
+    wrapper.appendChild(outputEl);
+    if (exitCode !== void 0) {
+      const badge = document.createElement("span");
+      badge.className = `blex-terminal__exit-code blex-terminal__exit-code--${exitCode === 0 ? "success" : "error"}`;
+      badge.textContent = `exit ${exitCode}`;
+      badge.setAttribute("data-testid", `blex-terminal-exit-${block.id}`);
+      wrapper.appendChild(badge);
+    }
+    const copyBtn = document.createElement("button");
+    copyBtn.className = "blex-terminal__copy";
+    copyBtn.textContent = "Copy";
+    copyBtn.setAttribute("data-testid", `blex-terminal-copy-${block.id}`);
+    this.addListener(copyBtn, "click", () => {
+      navigator.clipboard?.writeText(output);
+      this.emit({
+        blockId: block.id,
+        type: "click",
+        payload: { action: "copy" },
+        serialized: `Copied terminal output${command ? ` from: ${command}` : ""}`
+      });
+    });
+    wrapper.appendChild(copyBtn);
+    container.appendChild(wrapper);
+    container.setAttribute("data-blex-ready", "true");
+  }
+  parseAnsi(text) {
+    return text.replace(/\x1b\[([0-9;]*)m/g, (_match, codes) => {
+      if (codes === "0" || codes === "") return "</span>";
+      const styles = codes.split(";").map((c) => ANSI_COLORS[c] || "").filter(Boolean).join("; ");
+      return styles ? `<span style="${styles}">` : "";
+    });
+  }
+};
+function createTerminalRenderer() {
+  return new TerminalRenderer();
+}
+
+// src/renderers/timeline.ts
+var TimelineRenderer = class extends BaseRenderer {
+  render(block, container) {
+    this.container = container;
+    this.renderContent(block);
+  }
+  update(block) {
+    if (!this.container) return;
+    this.container.innerHTML = "";
+    this.renderContent(block);
+  }
+  renderContent(block) {
+    const container = this.container;
+    const { events, title } = block.data;
+    const wrapper = document.createElement("div");
+    wrapper.className = "blex-timeline";
+    wrapper.setAttribute("data-testid", `blex-timeline-${block.id}`);
+    if (title) {
+      const titleEl = document.createElement("div");
+      titleEl.className = "blex-timeline__title";
+      titleEl.textContent = title;
+      wrapper.appendChild(titleEl);
+    }
+    const list = document.createElement("div");
+    list.className = "blex-timeline__list";
+    events.forEach((event, i) => {
+      const item = document.createElement("div");
+      item.className = "blex-timeline__item";
+      item.setAttribute("data-testid", `blex-timeline-item-${i}`);
+      const dot = document.createElement("span");
+      dot.className = "blex-timeline__dot";
+      if (event.color) {
+        dot.style.backgroundColor = event.color;
+      }
+      if (event.icon) {
+        dot.textContent = event.icon;
+      }
+      item.appendChild(dot);
+      const content = document.createElement("div");
+      content.className = "blex-timeline__content";
+      const time = document.createElement("time");
+      time.className = "blex-timeline__time";
+      time.textContent = event.timestamp;
+      content.appendChild(time);
+      const eventTitle = document.createElement("div");
+      eventTitle.className = "blex-timeline__event-title";
+      eventTitle.textContent = event.title;
+      content.appendChild(eventTitle);
+      if (event.description) {
+        const desc = document.createElement("div");
+        desc.className = "blex-timeline__description";
+        desc.textContent = event.description;
+        content.appendChild(desc);
+      }
+      item.appendChild(content);
+      list.appendChild(item);
+    });
+    wrapper.appendChild(list);
+    container.appendChild(wrapper);
+    container.setAttribute("data-blex-ready", "true");
+  }
+};
+function createTimelineRenderer() {
+  return new TimelineRenderer();
+}
+
+// src/renderers/layout.ts
+var LayoutRenderer = class extends BaseRenderer {
+  constructor() {
+    super(...arguments);
+    this.childHandles = [];
+  }
+  render(block, container) {
+    this.container = container;
+    this.buildLayout(block);
+  }
+  update(block) {
+    if (!this.container) return;
+    for (const handle of this.childHandles) {
+      handle.destroy();
+    }
+    this.childHandles = [];
+    this.container.innerHTML = "";
+    this.buildLayout(block);
+  }
+  async buildLayout(block) {
+    const container = this.container;
+    const { type, columns, gap, children } = block.data;
+    const wrapper = document.createElement("div");
+    wrapper.className = "blex-layout";
+    wrapper.setAttribute("data-testid", `blex-layout-${block.id}`);
+    if (type === "grid") {
+      wrapper.style.display = "grid";
+      wrapper.style.gridTemplateColumns = `repeat(${columns ?? 2}, 1fr)`;
+    } else {
+      wrapper.style.display = "flex";
+    }
+    if (gap) {
+      wrapper.style.gap = gap;
+    }
+    container.appendChild(wrapper);
+    for (const child of children) {
+      const childContainer = document.createElement("div");
+      childContainer.className = "blex-layout__child";
+      wrapper.appendChild(childContainer);
+      const handle = await renderBlock(child, childContainer);
+      this.childHandles.push(handle);
+    }
+    container.setAttribute("data-blex-ready", "true");
+  }
+  destroy() {
+    for (const handle of this.childHandles) {
+      handle.destroy();
+    }
+    this.childHandles = [];
+    super.destroy();
+  }
+};
+function createLayoutRenderer() {
+  return new LayoutRenderer();
+}
+
+// src/defaults.ts
+function registerDefaults() {
+  registerBlockType("confirm", createConfirmRenderer);
+  registerBlockType("poll", createPollRenderer);
+  registerBlockType("status", createStatusRenderer);
+  registerBlockType("metric", createMetricRenderer);
+  registerBlockType("image", createImageRenderer);
+  registerBlockType("svg", createSvgRenderer);
+  registerBlockType("table", createTableRenderer);
+  registerBlockType("code", createCodeRenderer);
+  registerBlockType("diff", createDiffRenderer);
+  registerBlockType("file-tree", createFileTreeRenderer);
+  registerBlockType("form", createFormRenderer);
+  registerBlockType("progress", createProgressRenderer);
+  registerBlockType("terminal", createTerminalRenderer);
+  registerBlockType("timeline", createTimelineRenderer);
+  registerBlockType("layout", createLayoutRenderer);
+  registerLazyBlockType("mermaid", async () => {
+    const { createMermaidRenderer } = await import('./mermaid-W3HX2CK2.js');
+    return createMermaidRenderer;
+  });
+  registerLazyBlockType("chart", async () => {
+    const { createChartRenderer } = await import('./chart-2QT47W6E.js');
+    return createChartRenderer;
+  });
+  registerLazyBlockType("kanban", async () => {
+    const { createKanbanRenderer } = await import('./kanban-XUXVTRX2.js');
+    return createKanbanRenderer;
+  });
+  registerLazyBlockType("calendar", async () => {
+    const { createCalendarRenderer } = await import('./calendar-HUZDQQN2.js');
+    return createCalendarRenderer;
+  });
+  registerLazyBlockType("gallery", async () => {
+    const { createGalleryRenderer } = await import('./gallery-ISM7FZA3.js');
+    return createGalleryRenderer;
+  });
+  const builtIns = [
+    "confirm",
+    "poll",
+    "status",
+    "metric",
+    "image",
+    "svg",
+    "table",
+    "code",
+    "diff",
+    "file-tree",
+    "form",
+    "progress",
+    "terminal",
+    "timeline",
+    "layout",
+    "mermaid",
+    "chart",
+    "kanban",
+    "calendar",
+    "gallery"
+  ];
+  for (const type of builtIns) {
+    markBuiltIn(type);
+  }
+}
+
+export { getRegisteredTypes, hasBlockType, isBuiltIn, registerBlockType, registerDefaults, registerLazyBlockType, renderBlock, unregisterBlockType };
+//# sourceMappingURL=chunk-ZKSJGHJI.js.map
+//# sourceMappingURL=chunk-ZKSJGHJI.js.map