@threadlabs/looma 0.4.0 → 0.5.0

package/editor/chunk-U36XNFJN.js

@@ -1,2592 +0,0 @@
-import {
-  __export
-} from "./chunk-JK53ENSG.js";
-
-// src/ui.ts
-import { registerLoomaPackage } from "@threadlabs/looma/core/declarative";
-
-// src/declarative/components/controllers/ui-editor-insert-table-grid.js
-var ui_editor_insert_table_grid_exports = {};
-__export(ui_editor_insert_table_grid_exports, {
-  default: () => controller
-});
-function bounded(value, fallback) {
-  const parsed = Number.parseInt(String(value ?? fallback), 10);
-  return Math.min(10, Math.max(1, Number.isFinite(parsed) ? parsed : fallback));
-}
-function controller(host) {
-  const element = host.element;
-  let selectedRows = 3;
-  let selectedCols = 3;
-  let previewRows = null;
-  let previewCols = null;
-  let lastHeaderRow = Boolean(host.state.headerRow);
-  let withHeaderRow = lastHeaderRow;
-  let selectionCommitted = false;
-  const updateSelection = () => {
-    const activeRows = previewRows ?? selectedRows;
-    const activeCols = previewCols ?? selectedCols;
-    const hint = element.querySelector(".ui-editor-insert-table-grid__hint");
-    if (hint) hint.textContent = previewRows !== null && previewCols !== null ? `${activeRows} \xD7 ${activeCols}` : `${selectedRows} \xD7 ${selectedCols}${selectionCommitted ? " selected" : ""}`;
-    for (const cell of element.querySelectorAll("[data-row][data-col]")) {
-      const selected = Number(cell.dataset.row) <= activeRows && Number(cell.dataset.col) <= activeCols;
-      cell.classList.toggle("ui-editor-insert-table-grid__cell--selected", selected);
-      cell.setAttribute("aria-pressed", String(selected));
-    }
-  };
-  const render = () => {
-    const configuredHeaderRow = Boolean(host.state.headerRow);
-    if (configuredHeaderRow !== lastHeaderRow) {
-      lastHeaderRow = configuredHeaderRow;
-      withHeaderRow = configuredHeaderRow;
-    }
-    element.hidden = !host.state.open;
-    if (!host.state.open) return;
-    const maxRows = bounded(host.state.maxRows, 8);
-    const maxCols = bounded(host.state.maxCols, 8);
-    const cells = [];
-    for (let row = 1; row <= maxRows; row += 1) for (let col = 1; col <= maxCols; col += 1) {
-      const selected = row <= selectedRows && col <= selectedCols;
-      cells.push(`<button type="button" data-row="${row}" data-col="${col}" aria-label="${row} rows by ${col} columns" aria-pressed="${selected}" class="ui-editor-insert-table-grid__cell${selected ? " ui-editor-insert-table-grid__cell--selected" : ""}"></button>`);
-    }
-    element.innerHTML = `<div class="ui-editor-insert-table-grid"><p class="ui-editor-insert-table-grid__hint">${selectedRows} \xD7 ${selectedCols}</p><div class="ui-editor-insert-table-grid__grid" role="group" aria-label="Table dimensions" style="--ui-editor-table-grid-rows:${maxRows};--ui-editor-table-grid-cols:${maxCols}">${cells.join("")}</div><label class="ui-editor-insert-table-grid__header"><input type="checkbox" checked> Header row</label><button type="button" data-insert-table>Insert table</button></div>`;
-    const checkbox = element.querySelector('input[type="checkbox"]');
-    if (checkbox) {
-      checkbox.checked = withHeaderRow;
-      checkbox.addEventListener("change", () => {
-        withHeaderRow = checkbox.checked;
-      });
-    }
-    updateSelection();
-  };
-  const onClick = (event) => {
-    const cell = event.target.closest?.("[data-row][data-col]");
-    if (cell) {
-      selectedRows = Number(cell.dataset.row);
-      selectedCols = Number(cell.dataset.col);
-      previewRows = null;
-      previewCols = null;
-      selectionCommitted = true;
-      updateSelection();
-      return;
-    }
-    if (event.target.closest?.("[data-insert-table]")) {
-      host.dispatch("insert", { rows: selectedRows, cols: selectedCols, withHeaderRow });
-    }
-  };
-  const onMouseover = (event) => {
-    const cell = event.target.closest?.("[data-row][data-col]");
-    if (!cell) {
-      previewRows = null;
-      previewCols = null;
-      updateSelection();
-      return;
-    }
-    previewRows = Number(cell.dataset.row);
-    previewCols = Number(cell.dataset.col);
-    updateSelection();
-  };
-  const onMouseleave = () => {
-    previewRows = null;
-    previewCols = null;
-    updateSelection();
-  };
-  element.addEventListener("click", onClick);
-  element.addEventListener("mouseover", onMouseover);
-  element.addEventListener("mouseleave", onMouseleave);
-  const stop = host.effect(render);
-  render();
-  return () => {
-    stop();
-    element.removeEventListener("click", onClick);
-    element.removeEventListener("mouseover", onMouseover);
-    element.removeEventListener("mouseleave", onMouseleave);
-  };
-}
-
-// src/declarative/components/controllers/ui-editor-mention-menu.js
-var ui_editor_mention_menu_exports = {};
-__export(ui_editor_mention_menu_exports, {
-  default: () => controller2
-});
-
-// src/declarative/components/controllers/shared/editor.js
-var backgrounds = [
-  ["background-none", "Default", ""],
-  ["background-gray", "Gray", "#f3f4f6"],
-  ["background-yellow", "Yellow", "#fef3c7"],
-  ["background-blue", "Blue", "#dbeafe"],
-  ["background-green", "Green", "#dcfce7"],
-  ["background-red", "Red", "#fee2e2"]
-];
-function escapeHtml(value) {
-  return String(value).replaceAll("&", "&amp;").replaceAll("<", "&lt;").replaceAll(">", "&gt;").replaceAll('"', "&quot;").replaceAll("'", "&#39;");
-}
-var icons = {
-  "align-left": [["path", { d: "M21 5H3" }], ["path", { d: "M15 12H3" }], ["path", { d: "M17 19H3" }]],
-  "align-center": [["path", { d: "M21 5H3" }], ["path", { d: "M17 12H7" }], ["path", { d: "M19 19H5" }]],
-  "align-right": [["path", { d: "M21 5H3" }], ["path", { d: "M21 12H9" }], ["path", { d: "M21 19H7" }]],
-  rows: [["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }], ["path", { d: "M21 9H3" }], ["path", { d: "M21 15H3" }]],
-  columns: [["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }], ["path", { d: "M9 3v18" }], ["path", { d: "M15 3v18" }]],
-  table: [["path", { d: "M9 3H5a2 2 0 0 0-2 2v4m6-6h10a2 2 0 0 1 2 2v4M9 3v18m0 0h10a2 2 0 0 0 2-2V9M9 21H5a2 2 0 0 1-2-2V9m0 0h18" }]],
-  "chevron-down": [["path", { d: "m6 9 6 6 6-6" }]],
-  "panel-top": [["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }], ["path", { d: "M3 9h18" }]],
-  "panel-bottom": [["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }], ["path", { d: "M3 15h18" }]],
-  "panel-left": [["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }], ["path", { d: "M9 3v18" }]],
-  "panel-right": [["rect", { width: "18", height: "18", x: "3", y: "3", rx: "2" }], ["path", { d: "M15 3v18" }]],
-  eraser: [["path", { d: "M21 21H8a2 2 0 0 1-1.42-.587l-3.994-3.999a2 2 0 0 1 0-2.828l10-10a2 2 0 0 1 2.829 0l5.999 6a2 2 0 0 1 0 2.828L12.834 21" }], ["path", { d: "m5.082 11.09 8.828 8.828" }]],
-  merge: [["path", { d: "m8 6 4-4 4 4" }], ["path", { d: "M12 2v10.3a4 4 0 0 1-1.172 2.872L4 22" }], ["path", { d: "m20 22-5-5" }]],
-  split: [["path", { d: "M16 3h5v5" }], ["path", { d: "M8 3H3v5" }], ["path", { d: "M12 22v-8.3a4 4 0 0 0-1.172-2.872L3 3" }], ["path", { d: "m15 9 6-6" }]],
-  trash: [["path", { d: "M10 11v6" }], ["path", { d: "M14 11v6" }], ["path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6" }], ["path", { d: "M3 6h18" }], ["path", { d: "M8 6V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" }]],
-  plus: [["path", { d: "M5 12h14" }], ["path", { d: "M12 5v14" }]],
-  "grip-vertical": [["circle", { cx: "9", cy: "12", r: "1" }], ["circle", { cx: "9", cy: "5", r: "1" }], ["circle", { cx: "9", cy: "19", r: "1" }], ["circle", { cx: "15", cy: "12", r: "1" }], ["circle", { cx: "15", cy: "5", r: "1" }], ["circle", { cx: "15", cy: "19", r: "1" }]],
-  "grip-horizontal": [["circle", { cx: "12", cy: "9", r: "1" }], ["circle", { cx: "19", cy: "9", r: "1" }], ["circle", { cx: "5", cy: "9", r: "1" }], ["circle", { cx: "12", cy: "15", r: "1" }], ["circle", { cx: "19", cy: "15", r: "1" }], ["circle", { cx: "5", cy: "15", r: "1" }]],
-  "heading-1": [["path", { d: "M4 12h8" }], ["path", { d: "M4 18V6" }], ["path", { d: "M12 18V6" }], ["path", { d: "m17 12 3-2v8" }]],
-  pilcrow: [["path", { d: "M13 4v16" }], ["path", { d: "M17 4v16" }], ["path", { d: "M19 4H9.5a4.5 4.5 0 0 0 0 9H13" }]],
-  quote: [["path", { d: "M16 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z" }], ["path", { d: "M5 3a2 2 0 0 0-2 2v6a2 2 0 0 0 2 2 1 1 0 0 1 1 1v1a2 2 0 0 1-2 2 1 1 0 0 0-1 1v2a1 1 0 0 0 1 1 6 6 0 0 0 6-6V5a2 2 0 0 0-2-2z" }]]
-};
-function icon(name, className = "looma-icon") {
-  const nodes = (icons[name] ?? []).map(([tag, attributes]) => {
-    const serialized = Object.entries(attributes).map(([key, value]) => ` ${key}="${value}"`).join("");
-    return `<${tag}${serialized}></${tag}>`;
-  }).join("");
-  return `<svg class="${className}" data-looma-icon="${name}" aria-hidden="true" focusable="false" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">${nodes}</svg>`;
-}
-function normalizeAnchor(value) {
-  if (!value || typeof value !== "object") return null;
-  const finite = (candidate) => typeof candidate === "number" && Number.isFinite(candidate) ? candidate : null;
-  const x = finite(value.x);
-  const y = finite(value.y);
-  const width = finite(value.width);
-  const height = finite(value.height);
-  const left = finite(value.left) ?? x;
-  const top = finite(value.top) ?? y;
-  const right = finite(value.right) ?? (left !== null && width !== null ? left + width : null);
-  const bottom = finite(value.bottom) ?? (top !== null && height !== null ? top + height : null);
-  return left === null || top === null || right === null || bottom === null ? null : { left, top, right, bottom };
-}
-function viewport() {
-  const visual = window.visualViewport;
-  const left = visual?.offsetLeft ?? 0;
-  const top = visual?.offsetTop ?? 0;
-  const width = visual?.width ?? window.innerWidth;
-  const height = visual?.height ?? window.innerHeight;
-  return { left, top, width, height, right: left + width, bottom: top + height };
-}
-
-// src/declarative/components/controllers/ui-editor-mention-menu.js
-function controller2(host) {
-  const element = host.element;
-  let selectedIndex = Number(host.state.selectedIndex ?? 0);
-  const syncSelection = () => {
-    const prefix = element.id || "ui-editor-mention-menu";
-    for (const option of element.querySelectorAll("[data-index]")) {
-      const active = Number(option.dataset.index) === selectedIndex;
-      option.classList.toggle("ui-editor-mention-menu__item--active", active);
-      option.setAttribute("aria-selected", String(active));
-    }
-    if (element.querySelector("[data-index]")) element.setAttribute("aria-activedescendant", `${prefix}-option-${selectedIndex}`);
-  };
-  const position = () => {
-    const rect = normalizeAnchor(host.state.anchorRect);
-    if (!rect) {
-      element.style.display = "none";
-      return;
-    }
-    const view = viewport();
-    element.style.display = "block";
-    element.style.position = "fixed";
-    element.style.zIndex = "500";
-    if (window.innerWidth < 768) {
-      const height = Math.min(320, Math.max(0, view.height - 56));
-      Object.assign(element.style, { left: `${view.left}px`, top: `${view.top + view.height - height - 56}px`, right: "", bottom: "", width: `${view.width}px`, maxHeight: `${height}px` });
-      return;
-    }
-    const below = view.bottom - rect.bottom - 8;
-    const above = rect.top - view.top - 8;
-    const top = below >= 320 || below >= above ? rect.bottom + 8 : rect.top - 328;
-    const left = Math.max(view.left + 8, Math.min(rect.left, view.right - 328));
-    Object.assign(element.style, { top: `${Math.max(view.top + 8, top)}px`, left: `${left}px`, right: "", bottom: "", width: "320px", maxHeight: "" });
-  };
-  const render = () => {
-    const items = (Array.isArray(host.state.items) ? host.state.items : []).slice(0, 20);
-    selectedIndex = Math.min(Number(host.state.selectedIndex ?? selectedIndex), Math.max(0, items.length - 1));
-    const visible = host.state.open && (host.state.loading || items.length > 0) && normalizeAnchor(host.state.anchorRect);
-    element.hidden = !visible;
-    if (!visible) return;
-    position();
-    const prefix = element.id || "ui-editor-mention-menu";
-    const selectedId = `${prefix}-option-${selectedIndex}`;
-    element.setAttribute("aria-busy", String(Boolean(host.state.loading)));
-    if (items.length) element.setAttribute("aria-activedescendant", selectedId);
-    else element.removeAttribute("aria-activedescendant");
-    const rows = items.map((item, index) => `<li id="${prefix}-option-${index}" class="ui-editor-mention-menu__item${index === selectedIndex ? " ui-editor-mention-menu__item--active" : ""}" role="option" aria-selected="${index === selectedIndex}" data-index="${index}"><span class="ui-editor-mention-menu__avatar" aria-hidden="true">${escapeHtml(item.initials ?? String(item.label).slice(0, 2).toUpperCase())}</span><span class="ui-editor-mention-menu__body"><span class="ui-editor-mention-menu__label">${escapeHtml(item.label)}</span>${item.detail ? `<span class="ui-editor-mention-menu__detail">${escapeHtml(item.detail)}</span>` : ""}</span></li>`).join("");
-    element.innerHTML = `<div class="ui-editor-mention-menu"><div class="ui-editor-mention-menu__header"><span>People</span><span class="ui-editor-mention-menu__hint">Type after @ to search</span></div>${host.state.loading && !items.length ? '<div class="ui-editor-mention-menu__loading" role="status">Searching\u2026</div>' : `<ul class="ui-editor-mention-menu__list" role="presentation">${rows}</ul>`}</div>`;
-  };
-  const onMousedown = (event) => event.preventDefault();
-  const onClick = (event) => {
-    const option = event.target.closest?.("[data-index]");
-    if (option) host.dispatch("select", { index: Number(option.dataset.index) });
-  };
-  const onMouseover = (event) => {
-    const option = event.target.closest?.("[data-index]");
-    const index = Number(option?.dataset.index);
-    if (!Number.isFinite(index) || index === selectedIndex) return;
-    selectedIndex = index;
-    syncSelection();
-    host.dispatch("highlight", { index });
-  };
-  const onViewport = () => {
-    if (host.state.open) position();
-  };
-  element.setAttribute("role", "listbox");
-  element.setAttribute("aria-label", "Mention a person");
-  element.addEventListener("mousedown", onMousedown);
-  element.addEventListener("click", onClick);
-  element.addEventListener("mouseover", onMouseover);
-  window.addEventListener("resize", onViewport);
-  window.addEventListener("scroll", onViewport, true);
-  window.visualViewport?.addEventListener("resize", onViewport);
-  window.visualViewport?.addEventListener("scroll", onViewport);
-  const stop = host.effect(render);
-  render();
-  return () => {
-    stop();
-    element.removeEventListener("mousedown", onMousedown);
-    element.removeEventListener("click", onClick);
-    element.removeEventListener("mouseover", onMouseover);
-    window.removeEventListener("resize", onViewport);
-    window.removeEventListener("scroll", onViewport, true);
-    window.visualViewport?.removeEventListener("resize", onViewport);
-    window.visualViewport?.removeEventListener("scroll", onViewport);
-  };
-}
-
-// src/declarative/components/controllers/ui-editor-slash-menu.js
-var ui_editor_slash_menu_exports = {};
-__export(ui_editor_slash_menu_exports, {
-  default: () => controller3
-});
-function controller3(host) {
-  const element = host.element;
-  let selectedIndex = Number(host.state.selectedIndex ?? 0);
-  const position = () => {
-    const rect = normalizeAnchor(host.state.anchorRect);
-    if (!rect) {
-      element.style.display = "none";
-      return;
-    }
-    const view = viewport();
-    element.style.display = "block";
-    element.style.position = "fixed";
-    element.style.zIndex = "500";
-    if (window.innerWidth < 768) {
-      const height = Math.min(320, Math.max(0, view.height - 56));
-      Object.assign(element.style, { left: `${view.left}px`, right: "", bottom: "", top: `${view.top + view.height - height - 56}px`, width: `${view.width}px`, maxHeight: `${height}px` });
-      return;
-    }
-    const below = view.bottom - rect.bottom - 8;
-    const above = rect.top - view.top - 8;
-    const top = below >= 320 || below >= above ? rect.bottom + 8 : rect.top - 328;
-    const left = Math.max(view.left + 8, Math.min(rect.left, view.right - 288));
-    Object.assign(element.style, { top: `${Math.max(view.top + 8, top)}px`, left: `${left}px`, right: "", bottom: "", width: "280px", maxHeight: "" });
-  };
-  const syncSelection = (ensureVisible = false) => {
-    let selected;
-    for (const option of element.querySelectorAll("[data-index]")) {
-      const active = Number(option.dataset.index) === selectedIndex;
-      option.classList.toggle("ui-editor-slash-menu__item--active", active);
-      option.setAttribute("aria-selected", String(active));
-      if (active) selected = option;
-    }
-    if (ensureVisible) selected?.scrollIntoView?.({ block: "nearest" });
-  };
-  const render = () => {
-    selectedIndex = Number(host.state.selectedIndex ?? selectedIndex);
-    const items = Array.isArray(host.state.items) ? host.state.items : [];
-    const visible = host.state.open && items.length > 0 && normalizeAnchor(host.state.anchorRect);
-    element.hidden = !visible;
-    if (!visible) return;
-    position();
-    const query = String(host.state.query ?? "").trim();
-    element.innerHTML = `<div class="ui-editor-slash-menu"><div class="ui-editor-slash-menu__header" aria-hidden="true"><span class="ui-editor-slash-menu__header-label">Insert</span>${query ? `<span class="ui-editor-slash-menu__header-query">${escapeHtml(query)}</span>` : ""}</div><ul class="ui-editor-slash-menu__list" role="presentation">${items.map((item, index) => `<li class="ui-editor-slash-menu__item${index === selectedIndex ? " ui-editor-slash-menu__item--active" : ""}" role="option" aria-selected="${index === selectedIndex}" data-index="${index}"><span class="ui-editor-slash-menu__icon" aria-hidden="true">${icon(item.icon)}</span><span class="ui-editor-slash-menu__body"><span class="ui-editor-slash-menu__title">${escapeHtml(item.title)}</span><span class="ui-editor-slash-menu__description">${escapeHtml(item.description)}</span></span></li>`).join("")}</ul><div class="ui-editor-slash-menu__footer" aria-hidden="true"><kbd>\u2191\u2193</kbd> navigate &nbsp;\xB7&nbsp; <kbd>\u21B5</kbd> insert &nbsp;\xB7&nbsp; <kbd>Esc</kbd> close</div></div>`;
-  };
-  const onMousedown = (event) => event.preventDefault();
-  const onClick = (event) => {
-    const option = event.target.closest?.("[data-index]");
-    if (option) host.dispatch("select", { index: Number(option.dataset.index) });
-  };
-  const onMouseover = (event) => {
-    const option = event.target.closest?.("[data-index]");
-    const index = Number(option?.dataset.index);
-    if (!Number.isFinite(index) || index === selectedIndex) return;
-    selectedIndex = index;
-    syncSelection();
-    host.dispatch("highlight", { index });
-  };
-  const onViewport = () => {
-    if (host.state.open) position();
-  };
-  element.setAttribute("role", "listbox");
-  element.setAttribute("aria-label", "Insert block");
-  element.addEventListener("mousedown", onMousedown);
-  element.addEventListener("click", onClick);
-  element.addEventListener("mouseover", onMouseover);
-  window.addEventListener("resize", onViewport);
-  window.addEventListener("scroll", onViewport, true);
-  window.visualViewport?.addEventListener("resize", onViewport);
-  window.visualViewport?.addEventListener("scroll", onViewport);
-  const stop = host.effect(render);
-  render();
-  return () => {
-    stop();
-    element.removeEventListener("mousedown", onMousedown);
-    element.removeEventListener("click", onClick);
-    element.removeEventListener("mouseover", onMouseover);
-    window.removeEventListener("resize", onViewport);
-    window.removeEventListener("scroll", onViewport, true);
-    window.visualViewport?.removeEventListener("resize", onViewport);
-    window.visualViewport?.removeEventListener("scroll", onViewport);
-  };
-}
-
-// src/declarative/components/controllers/ui-editor-table-context-menu.js
-var ui_editor_table_context_menu_exports = {};
-__export(ui_editor_table_context_menu_exports, {
-  default: () => controller4
-});
-var sections = [
-  ["Structure", [
-    ["add-row-before", "Add row above", "panel-top"],
-    ["add-row-after", "Add row below", "panel-bottom"],
-    ["add-column-before", "Add column left", "panel-left"],
-    ["add-column-after", "Add column right", "panel-right"]
-  ]],
-  ["Cells", [
-    ["clear-cells", "Clear selected cells", "eraser"],
-    ["merge-cells", "Merge cells", "merge"],
-    ["split-cell", "Split cell", "split"]
-  ]],
-  ["Table", [
-    ["delete-row", "Delete row", "trash", "danger"],
-    ["delete-column", "Delete column", "trash", "danger"],
-    ["delete-table", "Delete table", "trash", "danger"]
-  ]]
-];
-function controller4(host) {
-  const element = host.element;
-  let positionFrame;
-  const position = () => {
-    positionFrame = void 0;
-    const menu = element.querySelector(".ui-editor-table-context-menu");
-    if (!menu) return;
-    menu.style.translate = "";
-    const rect = menu.getBoundingClientRect();
-    const view = viewport();
-    const inset = 12;
-    let x = 0;
-    let y = 0;
-    if (rect.left < view.left + inset) x = view.left + inset - rect.left;
-    else if (rect.right > view.right - inset) x = view.right - inset - rect.right;
-    if (rect.top < view.top + inset) y = view.top + inset - rect.top;
-    else if (rect.bottom > view.bottom - inset) y = view.bottom - inset - rect.bottom;
-    if (x || y) menu.style.translate = `${x}px ${y}px`;
-  };
-  const schedule = () => {
-    if (positionFrame) cancelAnimationFrame(positionFrame);
-    positionFrame = requestAnimationFrame(position);
-  };
-  const render = () => {
-    element.hidden = !host.state.open;
-    if (!host.state.open) return;
-    const enabled = new Set(Array.isArray(host.state.actions) ? host.state.actions : []);
-    const background = String(host.state.cellBackground ?? "");
-    const rendered = [];
-    const swatches = backgrounds.filter(([action]) => enabled.has(action)).map(([action, label, swatch]) => {
-      const selected = swatch === background;
-      return `<button type="button" class="ui-editor-table-context-menu__swatch-button" role="menuitemradio" aria-checked="${selected}" data-action="${action}"${selected ? ' data-selected="true"' : ""}><span class="ui-editor-table-context-menu__swatch${swatch ? "" : " ui-editor-table-context-menu__swatch--default"}"${swatch ? ` style="--ui-editor-table-context-swatch:${swatch}"` : ""}></span><span class="ui-editor-table-context-menu__swatch-label">${label}</span></button>`;
-    }).join("");
-    if (swatches) rendered.push(`<div class="ui-editor-table-context-menu__section" role="none"><div class="ui-editor-table-context-menu__heading" role="presentation">Cell background</div><div class="ui-editor-table-context-menu__swatches" role="group" aria-label="Cell background">${swatches}</div></div>`);
-    for (const [heading, actions] of sections) {
-      const available = actions.filter(([action]) => enabled.has(action));
-      if (!available.length) continue;
-      rendered.push(`<div class="ui-editor-table-context-menu__sep"></div><div class="ui-editor-table-context-menu__section" role="none"><div class="ui-editor-table-context-menu__heading" role="presentation">${heading}</div>${available.map(([action, label, iconName, tone]) => `<button type="button" role="menuitem" data-action="${action}"${tone ? ` data-tone="${tone}"` : ""}>${icon(iconName)}<span>${label}</span></button>`).join("")}</div>`);
-    }
-    element.innerHTML = `<div class="ui-editor-table-context-menu" role="menu">${rendered.join("")}</div>`;
-    schedule();
-  };
-  const onClick = (event) => {
-    const action = event.target.closest?.("[data-action]")?.dataset.action;
-    if (action) host.dispatch("action", { action });
-  };
-  element.addEventListener("click", onClick);
-  window.addEventListener("resize", schedule);
-  window.visualViewport?.addEventListener("resize", schedule);
-  window.visualViewport?.addEventListener("scroll", schedule);
-  const stop = host.effect(render);
-  render();
-  return () => {
-    stop();
-    element.removeEventListener("click", onClick);
-    window.removeEventListener("resize", schedule);
-    window.visualViewport?.removeEventListener("resize", schedule);
-    window.visualViewport?.removeEventListener("scroll", schedule);
-    if (positionFrame) cancelAnimationFrame(positionFrame);
-  };
-}
-
-// src/declarative/components/controllers/ui-editor-table-overlay.js
-var ui_editor_table_overlay_exports = {};
-__export(ui_editor_table_overlay_exports, {
-  default: () => controller5
-});
-function fallbackBoundaries(segments, length) {
-  return Array.from({ length: segments + 1 }, (_, index) => index * length / segments);
-}
-function createProximity(scope, selector = ".ui-editor-table-overlay__handle[data-ui-affordance]", radius = 16) {
-  const owner = scope.ownerDocument.defaultView;
-  const pointerTarget = scope.ownerDocument;
-  let anchors = [];
-  let frame = null;
-  let point = null;
-  let dirty = false;
-  const distance = (position, rect) => Math.hypot(
-    Math.max(rect.left - position.x, 0, position.x - rect.right),
-    Math.max(rect.top - position.y, 0, position.y - rect.bottom)
-  );
-  const clear = () => {
-    for (const anchor of anchors) anchor.element.removeAttribute("data-ui-proximity");
-    scope.removeAttribute("data-ui-interaction");
-  };
-  const measure = () => {
-    anchors = Array.from(scope.querySelectorAll(selector)).filter((element) => !element.disabled && element.getAttribute("aria-disabled") !== "true").map((element) => ({ element, rect: element.getBoundingClientRect() }));
-    dirty = false;
-  };
-  const update = () => {
-    frame = null;
-    if (dirty) measure();
-    if (!point) {
-      clear();
-      return;
-    }
-    let engaged = false;
-    for (const anchor of anchors) {
-      const near = distance(point, anchor.rect) <= radius;
-      if (near) anchor.element.setAttribute("data-ui-proximity", "near");
-      else anchor.element.removeAttribute("data-ui-proximity");
-      engaged ||= near;
-    }
-    if (engaged) scope.setAttribute("data-ui-interaction", "engaged");
-    else scope.removeAttribute("data-ui-interaction");
-  };
-  const schedule = () => {
-    if (frame === null) frame = owner.requestAnimationFrame(update);
-  };
-  const refresh = () => {
-    dirty = true;
-    schedule();
-  };
-  const onPointermove = (event) => {
-    point = event.pointerType === "touch" ? null : { x: event.clientX, y: event.clientY };
-    schedule();
-  };
-  pointerTarget.addEventListener("pointermove", onPointermove, { passive: true });
-  owner.addEventListener("resize", refresh, { passive: true });
-  owner.addEventListener("scroll", refresh, { passive: true, capture: true });
-  owner.visualViewport?.addEventListener("resize", refresh, { passive: true });
-  owner.visualViewport?.addEventListener("scroll", refresh, { passive: true });
-  measure();
-  return { refresh, destroy() {
-    pointerTarget.removeEventListener("pointermove", onPointermove);
-    owner.removeEventListener("resize", refresh);
-    owner.removeEventListener("scroll", refresh, true);
-    owner.visualViewport?.removeEventListener("resize", refresh);
-    owner.visualViewport?.removeEventListener("scroll", refresh);
-    if (frame !== null) owner.cancelAnimationFrame(frame);
-    clear();
-  } };
-}
-function controller5(host) {
-  const element = host.element;
-  let activeControlKey = null;
-  const proximity = createProximity(element);
-  const boundaries = (axis) => {
-    const geometry = host.state.geometry;
-    const values = geometry?.[axis === "row" ? "rowBoundaries" : "columnBoundaries"];
-    if (Array.isArray(values) && values.length >= 2 && values.every(Number.isFinite)) return values;
-    const rect = element.getBoundingClientRect();
-    return fallbackBoundaries(3, axis === "row" ? rect.height : rect.width);
-  };
-  const insertion = (axis, index, position) => {
-    const first = index === 0;
-    const noun = axis === "row" ? "row" : "column";
-    const action = axis === "row" ? first ? "add-row-before" : "add-row-after" : first ? "add-column-before" : "add-column-after";
-    const relation = first ? axis === "row" ? "above" : "left" : axis === "row" ? "below" : "right";
-    const label = `Insert ${noun} ${relation}`;
-    const key = `${axis}:${index}`;
-    return `<div class="ui-editor-table-overlay__control ui-editor-table-overlay__control--${axis}" style="${axis === "row" ? "top" : "left"}:${position}px" data-control-key="${key}" data-active="${activeControlKey === key}"><span class="ui-editor-table-overlay__line" aria-hidden="true"></span><span class="ui-editor-table-overlay__guide" data-ui-guide aria-hidden="true"></span><button type="button" class="ui-editor-table-overlay__handle" data-ui-affordance="insert-${noun}" data-action="${action}" data-boundary-index="${index}" aria-label="${label}">${icon("plus")}<span class="ui-editor-table-overlay__tooltip" role="tooltip">${label}</span></button></div>`;
-  };
-  const selectors = (cell) => {
-    const indexes = `data-row-index="${cell.rowIndex}" data-column-index="${cell.columnIndex}"`;
-    return `<button type="button" class="ui-editor-table-overlay__selector ui-editor-table-overlay__selector--row" style="top:${cell.top + cell.height / 2}px" data-action="select-row" ${indexes} title="Select row" aria-label="Select row">${icon("grip-vertical")}</button><button type="button" class="ui-editor-table-overlay__selector ui-editor-table-overlay__selector--column" style="left:${cell.left + cell.width / 2}px" data-action="select-column" ${indexes} title="Select column" aria-label="Select column">${icon("grip-horizontal")}</button>`;
-  };
-  const menu = (cell) => `<button type="button" class="ui-editor-table-overlay__cell-menu" style="left:${cell.left + cell.width - 30}px;top:${cell.top + 6}px" data-action="open-cell-menu" data-row-index="${cell.rowIndex}" data-column-index="${cell.columnIndex}" title="Cell actions" aria-label="Cell actions">${icon("chevron-down")}</button>`;
-  const render = () => {
-    element.hidden = !host.state.open;
-    if (!host.state.open) {
-      activeControlKey = null;
-      return;
-    }
-    const rowBoundaries = boundaries("row");
-    const columnBoundaries = boundaries("column");
-    const geometry = host.state.geometry;
-    const active = geometry?.activeCell ?? null;
-    const hovered = geometry?.hoveredCell ?? null;
-    element.innerHTML = `<div class="ui-editor-table-overlay" aria-label="Table controls"><div class="ui-editor-table-overlay__rows">${rowBoundaries.map((position, index) => insertion("row", index, position)).join("")}</div><div class="ui-editor-table-overlay__cols">${columnBoundaries.map((position, index) => insertion("col", index, position)).join("")}</div>${hovered ? selectors(hovered) : ""}${active ? menu(active) : ""}</div>`;
-    proximity.refresh();
-  };
-  const setActive = (key) => {
-    if (activeControlKey === key) return;
-    activeControlKey = key;
-    for (const control of element.querySelectorAll("[data-control-key]")) control.dataset.active = String(control.dataset.controlKey === key);
-  };
-  const onClick = (event) => {
-    const button = event.target.closest?.("button[data-action]");
-    if (!button) return;
-    const action = button.dataset.action;
-    if (action === "select-row" || action === "select-column") {
-      host.dispatch("action", { action, rowIndex: Number(button.dataset.rowIndex), columnIndex: Number(button.dataset.columnIndex) });
-      return;
-    }
-    if (action === "open-cell-menu") {
-      const rect = button.getBoundingClientRect();
-      host.dispatch("action", { action, rowIndex: Number(button.dataset.rowIndex), columnIndex: Number(button.dataset.columnIndex), anchor: { left: rect.left, top: rect.top, right: rect.right, bottom: rect.bottom } });
-      return;
-    }
-    host.dispatch("action", { action, boundaryIndex: Number(button.dataset.boundaryIndex) });
-  };
-  const enter = (event) => setActive(event.target.closest?.("[data-control-key]")?.dataset.controlKey ?? null);
-  const leave = (event) => setActive(event.relatedTarget instanceof Element ? event.relatedTarget.closest?.("[data-control-key]")?.dataset.controlKey ?? null : null);
-  element.addEventListener("click", onClick);
-  element.addEventListener("pointerover", enter);
-  element.addEventListener("pointerout", leave);
-  element.addEventListener("focusin", enter);
-  element.addEventListener("focusout", leave);
-  const stop = host.effect(render);
-  render();
-  return () => {
-    stop();
-    proximity.destroy();
-    element.removeEventListener("click", onClick);
-    element.removeEventListener("pointerover", enter);
-    element.removeEventListener("pointerout", leave);
-    element.removeEventListener("focusin", enter);
-    element.removeEventListener("focusout", leave);
-  };
-}
-
-// src/declarative/components/controllers/ui-editor-table-toolbar.js
-var ui_editor_table_toolbar_exports = {};
-__export(ui_editor_table_toolbar_exports, {
-  default: () => controller6
-});
-var overflowSections = [
-  ["Structure", [["add-row-before", "Add row above", "panel-top"], ["add-column-before", "Add column left", "panel-left"]]],
-  ["Cells", [["clear-cells", "Clear selected cells", "eraser"], ["merge-cells", "Merge selected cells", "merge"], ["split-cell", "Split merged cell", "split"]]],
-  ["Table", [["delete-row", "Delete row", "trash", "danger"], ["delete-column", "Delete column", "trash", "danger"], ["delete-table", "Delete table", "trash", "danger"]]]
-];
-function controller6(host) {
-  const element = host.element;
-  let overflowOpen = false;
-  const render = () => {
-    element.hidden = !host.state.open;
-    if (!host.state.open) {
-      overflowOpen = false;
-      return;
-    }
-    const enabled = new Set(Array.isArray(host.state.actions) ? host.state.actions : []);
-    const active = `align-${host.state.cellAlignment === "center" || host.state.cellAlignment === "right" ? host.state.cellAlignment : "left"}`;
-    const alignments = [["align-left", "Align left"], ["align-center", "Align center"], ["align-right", "Align right"]].filter(([action]) => enabled.has(action));
-    const structure = [["add-row-after", "Add row", "rows"], ["add-column-after", "Add column", "columns"]].filter(([action]) => enabled.has(action));
-    const background = String(host.state.cellBackground ?? "");
-    const backgroundActions = backgrounds.filter(([action]) => enabled.has(action));
-    const overflowGroups = overflowSections.map(([heading, actions]) => [heading, actions.filter(([action]) => enabled.has(action))]);
-    const hasOverflow = backgroundActions.length > 0 || overflowGroups.some(([, actions]) => actions.length > 0);
-    if (!hasOverflow) overflowOpen = false;
-    const menu = overflowOpen ? `<div class="ui-editor-table-toolbar__menu" role="menu" aria-label="More table actions">${backgroundActions.length ? `<div class="ui-editor-table-toolbar__menu-section" role="none"><div class="ui-editor-table-toolbar__menu-heading" role="presentation">Background</div><div class="ui-editor-table-toolbar__swatches" role="group" aria-label="Cell background">${backgroundActions.map(([action, label, swatch]) => {
-      const selected = swatch === background;
-      return `<button type="button" class="ui-editor-table-toolbar__swatch-button" role="menuitemradio" aria-checked="${selected}" data-action="${action}"${selected ? ' data-selected="true"' : ""}><span class="ui-editor-table-toolbar__swatch${swatch ? "" : " ui-editor-table-toolbar__swatch--default"}"${swatch ? ` style="--ui-editor-table-toolbar-swatch:${swatch}"` : ""}></span><span>${label}</span></button>`;
-    }).join("")}</div></div>` : ""}${overflowGroups.map(([heading, actions]) => actions.length ? `<div class="ui-editor-table-toolbar__menu-section ui-editor-table-toolbar__menu-section--divided" role="none"><div class="ui-editor-table-toolbar__menu-heading" role="presentation">${heading}</div>${actions.map(([action, label, iconName, tone]) => `<button type="button" role="menuitem" data-action="${action}"${tone ? ` data-tone="${tone}"` : ""}>${icon(iconName)}<span>${label}</span></button>`).join("")}</div>` : "").join("")}</div>` : "";
-    const groups = [];
-    if (alignments.length) groups.push(`<div class="ui-editor-table-toolbar__group" role="group" aria-label="Cell alignment">${alignments.map(([action, label]) => `<button type="button" class="ui-editor-table-toolbar__icon-button" data-action="${action}" aria-label="${label}" title="${label}" aria-pressed="${action === active}" data-active="${action === active}">${icon(action)}</button>`).join("")}</div>`);
-    if (structure.length) groups.push(`<div class="ui-editor-table-toolbar__group" role="group" aria-label="Table structure">${structure.map(([action, label, iconName]) => `<button type="button" data-action="${action}">${icon(iconName)}<span>${label}</span></button>`).join("")}</div>`);
-    if (hasOverflow) groups.push(`<div class="ui-editor-table-toolbar__overflow"><button type="button" class="ui-editor-table-toolbar__more" data-action="toggle-overflow" aria-haspopup="menu" aria-expanded="${overflowOpen}">${icon("table")}<span>Table options</span>${icon("chevron-down", "looma-icon looma-icon--chevron")}</button>${menu}</div>`);
-    element.innerHTML = `<div class="ui-editor-table-toolbar" role="toolbar" aria-label="Table actions">${groups.join('<div class="ui-editor-table-toolbar__sep" aria-hidden="true"></div>')}</div>`;
-  };
-  const onClick = (event) => {
-    const action = event.target.closest?.("[data-action]")?.dataset.action;
-    if (!action) return;
-    if (action === "toggle-overflow") {
-      overflowOpen = !overflowOpen;
-      render();
-      return;
-    }
-    overflowOpen = false;
-    render();
-    host.dispatch("action", { action });
-  };
-  const onOutside = (event) => {
-    if (!overflowOpen || event.composedPath().includes(element)) return;
-    overflowOpen = false;
-    render();
-  };
-  element.addEventListener("click", onClick);
-  document.addEventListener("pointerdown", onOutside, true);
-  const stop = host.effect(render);
-  render();
-  return () => {
-    stop();
-    element.removeEventListener("click", onClick);
-    document.removeEventListener("pointerdown", onOutside, true);
-  };
-}
-
-// src/declarative/components/controllers/ui-editor-toolbar.js
-var ui_editor_toolbar_exports = {};
-__export(ui_editor_toolbar_exports, {
-  default: () => controller7
-});
-function controller7(host) {
-  const element = host.element;
-  if (!element.hasAttribute("role")) element.setAttribute("role", "toolbar");
-  if (!element.hasAttribute("aria-label")) element.setAttribute("aria-label", "Editor toolbar");
-}
-
-// src/declarative/registry.js
-var records = [
-  { tag: "ui-editor-insert-table-grid", source: '<template component="ui-editor-insert-table-grid" status="early" summary="Looma ui-editor-insert-table-grid editor surface." controller="./controllers/ui-editor-insert-table-grid.js">\n  <defs>\n    <prop name="open" type="boolean" default="false">open value.</prop>\n    <prop name="maxRows" type="integer" default="8">maxRows value.</prop>\n    <prop name="maxCols" type="integer" default="8">maxCols value.</prop>\n    <prop name="headerRow" type="boolean" default="false">Whether table insertion initially includes a header row.</prop>\n    <event name="insert" type="object({ rows: integer, cols: integer, withHeaderRow: boolean })"></event>\n  </defs>\n  <div></div>\n</template>\n', controller: ui_editor_insert_table_grid_exports },
-  { tag: "ui-editor-mention-menu", source: '<template component="ui-editor-mention-menu" status="early" summary="Looma ui-editor-mention-menu editor surface." controller="./controllers/ui-editor-mention-menu.js">\n  <defs>\n    <prop name="open" type="boolean" default="false">open value.</prop>\n    <prop name="query" type="string" default="">query value.</prop>\n    <prop name="items" type="list(object({ id: string, label: string, detail?: string, initials?: string }))">items value.</prop>\n    <prop name="selectedIndex" type="integer" default="0">selectedIndex value.</prop>\n    <prop name="loading" type="boolean" default="false">loading value.</prop>\n    <prop name="anchorRect" type="object({ left?: number, top?: number, right?: number, bottom?: number, x?: number, y?: number, width?: number, height?: number }) | null">anchorRect value.</prop>\n    <event name="highlight" type="object({ index: integer })"></event>\n    <event name="select" type="object({ index: integer })"></event>\n  </defs>\n  <div></div>\n</template>\n', controller: ui_editor_mention_menu_exports },
-  { tag: "ui-editor-slash-menu", source: '<template component="ui-editor-slash-menu" status="early" summary="Looma ui-editor-slash-menu editor surface." controller="./controllers/ui-editor-slash-menu.js">\n  <defs>\n    <prop name="open" type="boolean" default="false">open value.</prop>\n    <prop name="query" type="string" default="">query value.</prop>\n    <prop name="items" type="list(object({ title: string, description: string, icon: string }))">items value.</prop>\n    <prop name="selectedIndex" type="integer" default="0">selectedIndex value.</prop>\n    <prop name="anchorRect" type="object({ left?: number, top?: number, right?: number, bottom?: number, x?: number, y?: number, width?: number, height?: number }) | null">anchorRect value.</prop>\n    <event name="highlight" type="object({ index: integer })"></event>\n    <event name="select" type="object({ index: integer })"></event>\n  </defs>\n  <div></div>\n</template>\n', controller: ui_editor_slash_menu_exports },
-  { tag: "ui-editor-table-context-menu", source: '<template component="ui-editor-table-context-menu" status="early" summary="Presents the table commands an editor explicitly enables for the current cell selection." controller="./controllers/ui-editor-table-context-menu.js">\n  <defs>\n    <prop name="open" type="boolean" default="false">Shows the menu at the position owned by the editor integration.</prop>\n    <prop name="cellBackground" type="string" default="">Identifies the background choice that is active for the current cell.</prop>\n    <prop name="actions" type="list(align-left | align-center | align-right | background-none | background-gray | background-yellow | background-blue | background-green | background-red | add-row-before | add-row-after | add-column-before | add-column-after | clear-cells | merge-cells | split-cell | delete-row | delete-column | delete-table)">The complete set of commands the current selection permits; omitted commands are not rendered.</prop>\n    <event name="action" type="object({ action: string })"></event>\n  </defs>\n  <div></div>\n</template>\n', controller: ui_editor_table_context_menu_exports },
-  { tag: "ui-editor-table-overlay", source: '<template component="ui-editor-table-overlay" status="early" summary="Projects editor-measured table geometry into insertion, selection, and cell-action controls without owning document mutations." controller="./controllers/ui-editor-table-overlay.js">\n  <defs>\n    <prop name="open" type="boolean" default="false">Shows the controls after the editor has supplied current geometry.</prop>\n    <prop name="geometry" type="object({ rowBoundaries: list(number), columnBoundaries: list(number), activeCell: object({ left: number, top: number, width: number, height: number, rowIndex: integer, columnIndex: integer }) | null, hoveredCell?: object({ left: number, top: number, width: number, height: number, rowIndex: integer, columnIndex: integer }) | null }) | null">The authoritative editor-measured table boundaries and active or hovered cell rectangles.</prop>\n    <event name="action" type="object({ action: string, boundaryIndex?: integer, rowIndex?: integer, columnIndex?: integer, anchor?: object({ left: number, top: number, right: number, bottom: number }) })"></event>\n  </defs>\n  <div></div>\n</template>\n', controller: ui_editor_table_overlay_exports },
-  { tag: "ui-editor-table-toolbar", source: '<template component="ui-editor-table-toolbar" status="early" summary="Offers selection-aware table commands without deciding which mutations the editor performs." controller="./controllers/ui-editor-table-toolbar.js">\n  <defs>\n    <prop name="open" type="boolean" default="false">Shows the toolbar while a table selection is active.</prop>\n    <prop name="cellAlignment" type="left | center | right" default="left">Marks the alignment command that is active for the current cell.</prop>\n    <prop name="cellBackground" type="string" default="">Identifies the background choice that is active for the current cell.</prop>\n    <prop name="actions" type="list(align-left | align-center | align-right | background-none | background-gray | background-yellow | background-blue | background-green | background-red | add-row-before | add-row-after | add-column-before | add-column-after | clear-cells | merge-cells | split-cell | delete-row | delete-column | delete-table)">The complete set of commands the current selection permits; omitted commands are not rendered.</prop>\n    <event name="action" type="object({ action: string })"></event>\n  </defs>\n  <div></div>\n</template>\n', controller: ui_editor_table_toolbar_exports },
-  { tag: "ui-editor-toolbar", source: '<template component="ui-editor-toolbar" status="early" summary="Looma ui-editor-toolbar editor surface." controller="./controllers/ui-editor-toolbar.js">\n  <defs>\n\n  </defs>\n  <div><slot></slot></div>\n</template>\n', controller: ui_editor_toolbar_exports }
-];
-var styles = `/**
- * Looma editor styles (tokens-based).
- * Tables, context menu, insert-table grid, slash menu. Use with ProseMirror/Tiptap content.
- */
-
-/* Turnkey editor */
-.looma-editor {
-  position: relative;
-  min-width: 0;
-  color: var(--ui-text-primary);
-  font-family: var(--ui-font-family-sans);
-}
-
-.looma-editor .ProseMirror {
-  min-height: var(--ui-editor-content-min-height, 300px);
-  padding:
-    var(--ui-editor-content-padding-block, var(--ui-space-4))
-    var(--ui-editor-content-padding-inline, var(--ui-space-6));
-  outline: none;
-  color: var(--ui-editor-content-color, var(--ui-text-primary));
-  caret-color: var(--ui-editor-caret-color, var(--ui-accent-solid));
-  font-family: var(--ui-editor-font-family, var(--ui-font-family-sans));
-  font-size: var(--ui-editor-font-size, var(--ui-font-size-md));
-  line-height: var(--ui-editor-line-height, var(--ui-line-height-relaxed));
-}
-
-@media (max-width: 767px) {
-  .looma-editor .ProseMirror {
-    padding-bottom: var(--ui-editor-mobile-bottom-space, 80px);
-  }
-}
-
-.looma-editor .ProseMirror p {
-  margin: 0 0 var(--ui-editor-paragraph-gap, var(--ui-space-3));
-}
-
-.looma-editor .ProseMirror h1,
-.looma-editor .ProseMirror h2,
-.looma-editor .ProseMirror h3 {
-  color: inherit;
-  line-height: var(--ui-line-height-tight);
-}
-
-.looma-editor .ProseMirror h1 {
-  margin: var(--ui-space-6) 0 var(--ui-space-3);
-  font-size: var(--ui-font-size-2xl);
-  font-weight: var(--ui-font-bold);
-}
-
-.looma-editor .ProseMirror h2 {
-  margin: var(--ui-space-5) 0 var(--ui-space-2);
-  font-size: var(--ui-font-size-xl);
-  font-weight: var(--ui-font-semibold);
-}
-
-.looma-editor .ProseMirror h3 {
-  margin: var(--ui-space-4) 0 var(--ui-space-2);
-  font-size: var(--ui-font-size-lg);
-  font-weight: var(--ui-font-semibold);
-}
-
-.looma-editor .ProseMirror ul,
-.looma-editor .ProseMirror ol {
-  margin: 0 0 var(--ui-space-3);
-  /* Nested lists retain the browser's hierarchy; this is only the root inset. */
-  padding-inline-start: var(--ui-editor-list-inset, var(--ui-space-5));
-}
-
-.looma-editor .ProseMirror li {
-  margin-bottom: var(--ui-space-1);
-}
-
-.looma-editor .ProseMirror blockquote {
-  margin: var(--ui-space-4) 0;
-  padding-left: var(--ui-space-4);
-  border-left: 3px solid var(--ui-accent-solid);
-  color: var(--ui-text-secondary);
-  font-style: italic;
-}
-
-.looma-editor .ProseMirror aside[data-looma-callout][data-tone] {
-  --ui-callout-padding-block: var(--ui-space-2);
-  --ui-callout-padding-inline: var(--ui-space-3);
-  --ui-callout-icon-column: 1rem;
-  --ui-callout-gap: var(--ui-space-2);
-  --ui-callout-icon-size: 1rem;
-  --ui-callout-border-width: 1px;
-  --ui-callout-leading-border-width: 4px;
-  --ui-callout-surface: var(--ui-accent-soft);
-  --ui-callout-text: var(--ui-text-primary);
-  --ui-callout-border: var(--ui-accent-solid);
-  --ui-callout-icon: var(--ui-accent-solid);
-  --ui-editor-callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M13.4 2H6a2 2 0 0 0-2 2v16a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2v-7.4'/%3E%3Cpath d='M2 6h4'/%3E%3Cpath d='M2 10h4'/%3E%3Cpath d='M2 14h4'/%3E%3Cpath d='M2 18h4'/%3E%3Cpath d='M21.378 5.626a1 1 0 1 0-3.004-3.004l-5.01 5.012a2 2 0 0 0-.506.854l-.837 2.87a.5.5 0 0 0 .62.62l2.87-.837a2 2 0 0 0 .854-.506z'/%3E%3C/svg%3E");
-
-  display: grid;
-  grid-template-columns: var(--ui-callout-icon-column) minmax(0, 1fr);
-  align-items: start;
-  column-gap: var(--ui-callout-gap);
-  margin: var(--ui-space-4) 0;
-  padding: var(--ui-callout-padding-block) var(--ui-callout-padding-inline);
-  border: var(--ui-callout-border-width) solid color-mix(in srgb, var(--ui-callout-border) 35%, transparent);
-  border-inline-start: var(--ui-callout-leading-border-width) solid var(--ui-callout-border);
-  border-radius: var(--ui-radius-2);
-  background: var(--ui-callout-surface);
-  color: var(--ui-callout-text);
-}
-
-.looma-editor .ProseMirror aside[data-looma-callout][data-tone]::before {
-  width: var(--ui-callout-icon-size);
-  height: var(--ui-callout-icon-size);
-  margin-top: 0.2em;
-  background: var(--ui-callout-icon);
-  content: "";
-  mask: var(--ui-editor-callout-icon) center / contain no-repeat;
-  -webkit-mask: var(--ui-editor-callout-icon) center / contain no-repeat;
-}
-
-.looma-editor .ProseMirror aside[data-looma-callout][data-tone] > * {
-  grid-column: 2;
-}
-
-.looma-editor .ProseMirror aside[data-looma-callout][data-tone] > :last-child {
-  margin-bottom: 0;
-}
-
-.looma-editor .ProseMirror aside[data-looma-callout][data-tone="info"] {
-  --ui-callout-surface: var(--ui-info-soft);
-  --ui-callout-border: var(--ui-info-solid);
-  --ui-callout-icon: var(--ui-info-solid);
-  --ui-editor-callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'/%3E%3Cpath d='M12 16v-4'/%3E%3Cpath d='M12 8h.01'/%3E%3C/svg%3E");
-}
-
-.looma-editor .ProseMirror aside[data-looma-callout][data-tone="note"] {
-  --ui-callout-surface: var(--ui-accent-soft);
-  --ui-callout-border: var(--ui-accent-solid);
-  --ui-callout-icon: var(--ui-accent-solid);
-}
-
-.looma-editor .ProseMirror aside[data-looma-callout][data-tone="warning"] {
-  --ui-callout-surface: var(--ui-warning-soft);
-  --ui-callout-border: var(--ui-warning-solid);
-  --ui-callout-icon: var(--ui-warning-solid);
-  --ui-editor-callout-icon: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m21.73 18-8-14a2 2 0 0 0-3.46 0l-8 14A2 2 0 0 0 4 21h16a2 2 0 0 0 1.73-3'/%3E%3Cpath d='M12 9v4'/%3E%3Cpath d='M12 17h.01'/%3E%3C/svg%3E");
-}
-
-.looma-editor .ProseMirror pre {
-  margin: var(--ui-space-4) 0;
-  padding: var(--ui-space-4);
-  overflow-x: auto;
-  border: 1px solid var(--ui-border-default);
-  border-radius: var(--ui-radius-2);
-  background: var(--ui-surface-muted);
-  font-family: var(--ui-font-family-mono, ui-monospace, monospace);
-  font-size: var(--ui-font-size-sm);
-}
-
-.looma-editor .ProseMirror code {
-  padding: 0.1em 0.3em;
-  border-radius: var(--ui-radius-1);
-  background: var(--ui-surface-subtle);
-  font-family: var(--ui-font-family-mono, ui-monospace, monospace);
-  font-size: 0.9em;
-}
-
-.looma-editor .ProseMirror pre code {
-  padding: 0;
-  background: none;
-}
-
-.looma-editor .ProseMirror hr {
-  margin: var(--ui-space-6) 0;
-  border: 0;
-  border-top: 1px solid var(--ui-border-default);
-}
-
-.looma-editor .ProseMirror mark {
-  border-radius: var(--ui-radius-1);
-  background: var(--ui-editor-highlight-bg, var(--ui-warning-soft));
-}
-
-.looma-editor .ProseMirror a {
-  color: var(--ui-editor-link-color, var(--ui-accent-solid));
-  text-decoration: underline;
-}
-
-.looma-editor .ProseMirror ul[data-type="taskList"] {
-  padding-left: var(--ui-space-2);
-  list-style: none;
-}
-
-.looma-editor .ProseMirror ul[data-type="taskList"] li {
-  display: flex;
-  align-items: flex-start;
-  gap: var(--ui-space-2);
-}
-
-.looma-editor .ProseMirror ul[data-type="taskList"] li > label {
-  margin-top: 3px;
-}
-
-.looma-editor .ProseMirror ul[data-type="taskList"] input[type="checkbox"] {
-  width: 16px;
-  height: 16px;
-  accent-color: var(--ui-accent-solid);
-  cursor: pointer;
-}
-
-.looma-editor .ProseMirror .is-editor-empty:first-child::before {
-  float: left;
-  height: 0;
-  color: var(--ui-text-muted);
-  content: attr(data-placeholder);
-  pointer-events: none;
-}
-
-.looma-editor .ProseMirror img {
-  max-width: 100%;
-  height: auto;
-  margin: var(--ui-space-3) 0;
-  border-radius: var(--ui-radius-2);
-}
-
-.looma-editor .ProseMirror img[data-looma-image]:focus-visible {
-  outline: 2px solid var(--ui-focus-ring);
-  outline-offset: 3px;
-}
-
-.looma-editor__file-input {
-  position: absolute;
-  width: 0;
-  height: 0;
-  opacity: 0;
-  pointer-events: none;
-}
-
-.looma-editor__upload-error {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--ui-space-3);
-  margin-top: var(--ui-space-3);
-  padding: var(--ui-space-2) var(--ui-space-3);
-  border: 1px solid var(--ui-danger-solid);
-  border-radius: var(--ui-radius-2);
-  background: var(--ui-danger-soft);
-  color: var(--ui-text);
-  font-size: var(--ui-font-size-sm);
-}
-
-.looma-editor__upload-error button {
-  min-height: 2rem;
-  padding: 0 var(--ui-space-3);
-  border: 0;
-  border-radius: var(--ui-radius-1);
-  background: var(--ui-danger-solid);
-  color: var(--ui-text-on-accent);
-  cursor: pointer;
-  font: inherit;
-  font-weight: var(--ui-font-semibold);
-}
-
-.looma-editor__upload-error button:focus-visible {
-  outline: 2px solid var(--ui-focus-ring);
-  outline-offset: 2px;
-}
-
-.looma-editor__upload-error button:disabled {
-  cursor: wait;
-  opacity: 0.65;
-}
-
-.looma-editor__drop-overlay {
-  position: absolute;
-  z-index: var(--ui-editor-drop-overlay-z-index, 10);
-  inset: 0;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  justify-content: center;
-  gap: var(--ui-space-3);
-  border: 2px dashed var(--ui-accent-solid);
-  border-radius: var(--ui-radius-2);
-  background: color-mix(in srgb, var(--ui-accent-soft) 92%, transparent);
-  color: var(--ui-accent-active);
-  font-size: var(--ui-font-size-sm);
-  font-weight: var(--ui-font-semibold);
-  pointer-events: none;
-}
-
-.looma-editor__drop-overlay > .looma-icon {
-  width: var(--ui-font-size-2xl);
-  height: var(--ui-font-size-2xl);
-  stroke-width: var(--ui-editor-toolbar-icon-stroke-width, 1.75);
-}
-
-.looma-editor__toolbar-button {
-  --ui-icon-button-size-sm: var(--ui-editor-toolbar-button-size, 2rem);
-  --ui-icon-button-radius: var(--ui-editor-toolbar-button-radius, var(--ui-radius-1));
-  --ui-icon-button-icon-size: var(--ui-editor-toolbar-icon-size, 1rem);
-}
-
-.looma-editor__toolbar-button > .looma-icon {
-  width: var(--ui-editor-toolbar-icon-size, 1rem);
-  height: var(--ui-editor-toolbar-icon-size, 1rem);
-  stroke-width: var(--ui-editor-toolbar-icon-stroke-width, 1.75);
-}
-
-.looma-editor__sticky-toolbar-shell {
-  position: sticky;
-  top: var(--ui-editor-sticky-toolbar-top, 0);
-  z-index: var(--ui-editor-toolbar-z-index, 10);
-  min-width: 0;
-  background: var(--ui-editor-toolbar-bg, var(--ui-surface, #fff));
-  border-bottom: 1px solid var(--ui-editor-toolbar-border, var(--ui-border, #e5e7eb));
-}
-
-.looma-editor__sticky-toolbar-shell [data-component-root~="ui-editor-toolbar"] {
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  gap: var(--ui-editor-toolbar-gap, 2px);
-  min-height: var(--ui-editor-toolbar-min-height, 48px);
-  padding:
-    var(--ui-editor-toolbar-padding-block, 6px)
-    var(--ui-editor-toolbar-padding-inline, 12px);
-  overflow-x: auto;
-  overscroll-behavior-inline: contain;
-  scrollbar-width: none;
-  white-space: nowrap;
-}
-
-.looma-editor__sticky-toolbar-shell [data-component-root~="ui-editor-toolbar"]::-webkit-scrollbar {
-  display: none;
-}
-
-.looma-editor__sticky-toolbar-shell [data-component-root~="ui-editor-toolbar"] > * {
-  flex: 0 0 auto;
-}
-
-.looma-editor__table-picker-popover,
-.looma-editor__table-toolbar-shell,
-.looma-editor__table-menu-shell {
-  z-index: var(--ui-editor-popover-z-index, 300);
-}
-
-.looma-editor__table-picker-popover {
-  min-width: 220px;
-  padding: 0;
-  border: 0;
-  background: transparent;
-}
-
-.looma-editor__table-toolbar-shell,
-.looma-editor__table-menu-shell,
-.looma-editor__table-overlay-shell {
-  position: fixed;
-}
-
-.looma-editor__mobile-toolbar-shell {
-  position: fixed;
-  z-index: var(--ui-editor-mobile-toolbar-z-index, var(--ui-editor-popover-z-index, 300));
-  display: flex;
-  align-items: stretch;
-  min-height: var(--ui-editor-toolbar-mobile-min-height, 56px);
-  padding:
-    var(--ui-editor-mobile-toolbar-padding-block, 4px)
-    max(var(--ui-editor-mobile-toolbar-padding-inline, 8px), env(safe-area-inset-left));
-  overflow-x: auto;
-  overflow-y: hidden;
-  overscroll-behavior-inline: contain;
-  -webkit-overflow-scrolling: touch;
-  scroll-snap-type: x mandatory;
-  scrollbar-width: none;
-  background: var(--ui-editor-toolbar-bg, var(--ui-surface, #fff));
-  border-top: 1px solid var(--ui-editor-toolbar-border, var(--ui-border, #e5e7eb));
-  box-shadow: var(--ui-editor-toolbar-mobile-shadow, 0 -2px 8px rgb(0 0 0 / 0.06));
-}
-
-.looma-editor__mobile-toolbar-shell::-webkit-scrollbar {
-  display: none;
-}
-
-.looma-editor__mobile-toolbar-shell > *,
-.looma-editor__mobile-toolbar-shell button,
-.looma-editor__mobile-toolbar-shell [data-component-root~="ui-icon-button"] {
-  flex: 0 0 auto;
-  scroll-snap-align: start;
-}
-
-.looma-editor__mobile-toolbar-shell [data-component-root~="ui-editor-toolbar"][floating] {
-  width: 100%;
-  max-width: none;
-  min-height: 100%;
-  padding: 0;
-  overflow-x: auto;
-  overflow-y: hidden;
-  overscroll-behavior-inline: contain;
-  -webkit-overflow-scrolling: touch;
-  scroll-snap-type: x mandatory;
-  scrollbar-width: none;
-  background: transparent;
-  border: 0;
-  border-radius: 0;
-  box-shadow: none;
-  backdrop-filter: none;
-}
-
-.looma-editor__mobile-toolbar-shell [data-component-root~="ui-editor-toolbar"][floating]::-webkit-scrollbar {
-  display: none;
-}
-
-.looma-editor__mobile-toolbar-shell .looma-editor__toolbar-button {
-  --ui-icon-button-size-sm: var(--ui-editor-toolbar-mobile-button-size, 44px);
-}
-
-.looma-editor__mobile-toolbar-back {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--ui-space-1-5, 6px);
-  min-width: 44px;
-  min-height: 44px;
-  padding: 0 var(--ui-space-3, 12px);
-  border: 0;
-  border-radius: var(--ui-radius-md, 6px);
-  background: transparent;
-  color: var(--ui-text-secondary, #4b5563);
-  cursor: pointer;
-  font: inherit;
-  white-space: nowrap;
-}
-
-.looma-editor__mobile-toolbar-back .looma-icon {
-  width: 1rem;
-  height: 1rem;
-  stroke-width: var(--ui-editor-toolbar-icon-stroke-width, 1.75);
-}
-
-.looma-editor__mobile-toolbar-back:is(:hover, :focus-visible) {
-  background: var(--ui-surface-hover, #f3f4f6);
-  color: var(--ui-text-primary, #111827);
-}
-
-.looma-editor__mobile-toolbar-shell .ui-editor-table-toolbar {
-  min-width: max-content;
-  min-height: 100%;
-  padding: 0;
-  background: transparent;
-  border: 0;
-  border-radius: 0;
-  box-shadow: none;
-  backdrop-filter: none;
-}
-
-.looma-editor__mobile-toolbar-shell .ui-editor-table-toolbar button {
-  min-height: 44px;
-  background: transparent;
-}
-
-.looma-editor__mobile-toolbar-shell .ui-editor-table-toolbar button[data-active="true"],
-.looma-editor__mobile-toolbar-shell .ui-editor-table-toolbar button[data-selected="true"] {
-  background: var(--ui-accent-soft, var(--ui-accent-subtle, #e8f0fb));
-}
-
-.looma-editor__mobile-toolbar-shell .ui-editor-table-toolbar__menu {
-  top: auto;
-  right: 0;
-  bottom: calc(100% + var(--ui-space-2, 8px));
-  max-height: min(50dvh, 22rem);
-  overflow-y: auto;
-  overscroll-behavior: contain;
-}
-
-.looma-editor__table-overlay-shell {
-  z-index: var(--ui-editor-overlay-z-index, 299);
-  overflow: visible;
-  pointer-events: none;
-}
-
-/* Slash menu */
-[data-component-root~="ui-editor-slash-menu"] {
-  user-select: none;
-}
-
-/* Mention menu */
-[data-component-root~="ui-editor-mention-menu"] {
-  user-select: none;
-}
-
-.ui-editor-mention-menu {
-  display: flex;
-  overflow: hidden;
-  flex-direction: column;
-  background: var(--ui-surface, #fff);
-  border: 1px solid var(--ui-border, #e5e7eb);
-  border-radius: var(--ui-radius-xl, 1rem);
-  box-shadow: var(--ui-shadow-lg, 0 8px 24px rgb(0 0 0 / 0.12));
-}
-
-.ui-editor-mention-menu__header {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--ui-space-3, 12px);
-  padding: var(--ui-space-2, 8px) var(--ui-space-3, 12px);
-  color: var(--ui-text-secondary, #4b5563);
-  border-bottom: 1px solid var(--ui-border, #e5e7eb);
-  font-size: var(--ui-font-size-xs, 0.75rem);
-  font-weight: var(--ui-font-semibold, 600);
-}
-
-.ui-editor-mention-menu__hint {
-  overflow: hidden;
-  color: var(--ui-text-muted, #6b7280);
-  font-weight: var(--ui-font-normal, 400);
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.ui-editor-mention-menu__list {
-  max-height: 280px;
-  padding: var(--ui-space-1, 4px) 0;
-  margin: 0;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  list-style: none;
-}
-
-.ui-editor-mention-menu__item {
-  display: flex;
-  align-items: center;
-  min-height: 44px;
-  padding: var(--ui-space-1-5, 6px) var(--ui-space-3, 12px);
-  gap: var(--ui-space-3, 12px);
-  cursor: pointer;
-}
-
-.ui-editor-mention-menu__item--active {
-  background: var(--ui-accent-subtle, rgb(59 130 246 / 0.1));
-}
-
-.ui-editor-mention-menu__avatar {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  flex: 0 0 auto;
-  color: var(--ui-accent-active, var(--ui-accent-solid, #2563eb));
-  background: var(--ui-accent-soft, var(--ui-accent-subtle, #eff6ff));
-  border-radius: 999px;
-  font-size: var(--ui-font-size-xs, 0.75rem);
-  font-weight: var(--ui-font-semibold, 600);
-}
-
-.ui-editor-mention-menu__body {
-  display: flex;
-  min-width: 0;
-  flex-direction: column;
-}
-
-.ui-editor-mention-menu__label,
-.ui-editor-mention-menu__detail {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
-}
-
-.ui-editor-mention-menu__label {
-  color: var(--ui-text-primary, #111827);
-  font-size: var(--ui-font-size-sm, 0.875rem);
-  font-weight: var(--ui-font-medium, 500);
-}
-
-.ui-editor-mention-menu__detail,
-.ui-editor-mention-menu__loading {
-  color: var(--ui-text-muted, #6b7280);
-  font-size: var(--ui-font-size-xs, 0.75rem);
-}
-
-.ui-editor-mention-menu__loading {
-  min-height: 44px;
-  padding: var(--ui-space-3, 12px);
-}
-
-.looma-editor .ProseMirror .looma-mention {
-  padding: 0.08em 0.28em;
-  color: var(--ui-editor-mention-color, var(--ui-accent-active, var(--ui-accent-solid)));
-  background: var(--ui-editor-mention-bg, var(--ui-accent-soft, var(--ui-accent-subtle)));
-  border-radius: var(--ui-radius-sm, 4px);
-  font-weight: var(--ui-font-medium, 500);
-  white-space: nowrap;
-}
-
-@media (max-width: 767px) {
-  .ui-editor-mention-menu {
-    border-bottom: 0;
-    border-radius: var(--ui-radius-xl, 1rem) var(--ui-radius-xl, 1rem) 0 0;
-  }
-
-  .ui-editor-mention-menu__list {
-    max-height: calc(60dvh - 48px);
-  }
-}
-
-/* Toolbar shell */
-[data-component-root~="ui-editor-toolbar"] {
-  position: sticky;
-  top: 0;
-  z-index: var(--ui-editor-toolbar-z-index, 10);
-  display: flex;
-  align-items: center;
-  justify-content: flex-start;
-  gap: var(--ui-editor-toolbar-gap, 2px);
-  padding:
-    var(--ui-editor-toolbar-padding-block, 6px)
-    var(--ui-editor-toolbar-padding-inline, 12px);
-  min-height: var(--ui-editor-toolbar-min-height, 48px);
-  overflow-x: auto;
-  -webkit-overflow-scrolling: touch;
-  scrollbar-width: none;
-  white-space: nowrap;
-  background: var(--ui-editor-toolbar-bg, var(--ui-surface, #fff));
-  border-bottom: 1px solid var(--ui-editor-toolbar-border, var(--ui-border, #e5e7eb));
-}
-
-[data-component-root~="ui-editor-toolbar"] > * {
-  flex: 0 0 auto;
-}
-
-[data-component-root~="ui-editor-toolbar"]::-webkit-scrollbar {
-  display: none;
-}
-
-[data-component-root~="ui-editor-toolbar"][floating] {
-  position: static;
-  top: auto;
-  width: max-content;
-  max-width: min(calc(100vw - 24px), 100%);
-  min-height: auto;
-  padding: var(--ui-editor-toolbar-floating-padding, 4px);
-  overflow-x: visible;
-  background: color-mix(in srgb, var(--ui-editor-toolbar-bg, var(--ui-surface, #fff)) 96%, transparent);
-  border: 1px solid var(--ui-editor-toolbar-border, var(--ui-border, #e5e7eb));
-  border-radius: var(--ui-editor-toolbar-floating-radius, var(--ui-radius-lg, 10px));
-  box-shadow: var(--ui-editor-toolbar-floating-shadow, var(--ui-shadow-lg, 0 10px 24px rgb(0 0 0 / 0.12)));
-  backdrop-filter: blur(10px);
-}
-
-@media (max-width: 767px) {
-  [data-component-root~="ui-editor-toolbar"] {
-    position: fixed;
-    top: auto;
-    bottom: env(safe-area-inset-bottom);
-    left: 0;
-    right: 0;
-    min-height: var(--ui-editor-toolbar-mobile-min-height, 56px);
-    border-top: 1px solid var(--ui-editor-toolbar-border, var(--ui-border, #e5e7eb));
-    border-bottom: none;
-    box-shadow: var(--ui-editor-toolbar-mobile-shadow, 0 -2px 8px rgb(0 0 0 / 0.06));
-  }
-
-  [data-component-root~="ui-editor-toolbar"][floating] {
-    position: static;
-    inset: auto;
-    min-height: auto;
-    border: 1px solid var(--ui-editor-toolbar-border, var(--ui-border, #e5e7eb));
-    border-radius: var(--ui-editor-toolbar-floating-radius, var(--ui-radius-lg, 10px));
-    box-shadow: var(--ui-editor-toolbar-floating-shadow, var(--ui-shadow-lg, 0 10px 24px rgb(0 0 0 / 0.12)));
-  }
-}
-
-.ui-editor-toolbar__divider {
-  width: 1px;
-  height: 20px;
-  background: var(--ui-editor-toolbar-divider, var(--ui-border, #e5e7eb));
-  flex-shrink: 0;
-  margin: 0 var(--ui-editor-toolbar-divider-margin, 4px);
-}
-
-.ui-editor-slash-menu {
-  background: var(--ui-surface, #fff);
-  border: 1px solid var(--ui-border, #e5e7eb);
-  border-radius: var(--ui-radius-xl, 1rem);
-  box-shadow: var(--ui-shadow-lg, 0 8px 24px rgb(0 0 0 / 0.12));
-  overflow: hidden;
-  display: flex;
-  flex-direction: column;
-}
-
-@media (max-width: 767px) {
-  .ui-editor-slash-menu {
-    border-radius: var(--ui-radius-xl, 1rem) var(--ui-radius-xl, 1rem) 0 0;
-    border-bottom: none;
-  }
-}
-
-.ui-editor-slash-menu__header {
-  display: none;
-  align-items: center;
-  gap: var(--ui-space-2, 8px);
-  padding: var(--ui-space-3, 12px) var(--ui-space-4, 16px);
-  border-bottom: 1px solid var(--ui-border, #e5e7eb);
-  font-size: var(--ui-font-size-xs, 0.75rem);
-  color: var(--ui-text-muted, #6b7280);
-  font-weight: var(--ui-font-semibold, 600);
-  text-transform: uppercase;
-  letter-spacing: 0.05em;
-}
-
-@media (max-width: 767px) {
-  .ui-editor-slash-menu__header {
-    display: flex;
-  }
-}
-
-.ui-editor-slash-menu__header-query {
-  background: var(--ui-surface-hover, #f3f4f6);
-  border-radius: var(--ui-radius-sm, 4px);
-  padding: 0.1em 0.4em;
-  font-family: var(--ui-font-family-mono, ui-monospace, monospace);
-  font-size: var(--ui-font-size-xs, 0.75rem);
-  color: var(--ui-accent, #3b82f6);
-  text-transform: none;
-  letter-spacing: 0;
-}
-
-.ui-editor-slash-menu__list {
-  list-style: none;
-  margin: 0;
-  padding: var(--ui-space-1, 4px) 0;
-  overflow-y: auto;
-  max-height: 280px;
-  overscroll-behavior: contain;
-}
-
-@media (max-width: 767px) {
-  .ui-editor-slash-menu__list {
-    max-height: calc(60dvh - 80px);
-    padding: var(--ui-space-1, 4px) 0 var(--ui-space-2, 8px);
-  }
-}
-
-.ui-editor-slash-menu__item {
-  display: flex;
-  align-items: center;
-  gap: var(--ui-space-3, 12px);
-  padding: var(--ui-space-2, 8px) var(--ui-space-3, 12px);
-  min-height: 44px;
-  cursor: pointer;
-  transition: background-color 120ms ease;
-}
-
-.ui-editor-slash-menu__item--active {
-  background: var(--ui-accent-subtle, rgb(59 130 246 / 0.1));
-}
-
-.ui-editor-slash-menu__icon {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  width: 32px;
-  height: 32px;
-  background: var(--ui-surface-hover, #f3f4f6);
-  border: 1px solid var(--ui-border, #e5e7eb);
-  border-radius: var(--ui-radius-md, 6px);
-  font-size: var(--ui-font-size-sm, 0.875rem);
-  font-weight: var(--ui-font-bold, 700);
-  color: var(--ui-text-secondary, #4b5563);
-  font-family: var(--ui-font-family-mono, ui-monospace, monospace);
-  flex-shrink: 0;
-  line-height: 1;
-}
-
-.ui-editor-slash-menu__item--active .ui-editor-slash-menu__icon {
-  background: var(--ui-accent, #3b82f6);
-  border-color: var(--ui-accent, #3b82f6);
-  color: var(--ui-accent-contrast, #fff);
-}
-
-.ui-editor-slash-menu__icon .looma-icon {
-  width: 1rem;
-  height: 1rem;
-  stroke-width: var(--ui-editor-toolbar-icon-stroke-width, 1.75);
-}
-
-.ui-editor-slash-menu__body {
-  display: flex;
-  min-width: 0;
-  flex-direction: column;
-  gap: 1px;
-}
-
-.ui-editor-slash-menu__title {
-  font-size: var(--ui-font-size-sm, 0.875rem);
-  font-weight: var(--ui-font-medium, 500);
-  color: var(--ui-text, #111827);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.ui-editor-slash-menu__description {
-  font-size: var(--ui-font-size-xs, 0.75rem);
-  color: var(--ui-text-muted, #6b7280);
-  white-space: nowrap;
-  overflow: hidden;
-  text-overflow: ellipsis;
-}
-
-.ui-editor-slash-menu__footer {
-  display: none;
-  padding: var(--ui-space-2, 8px) var(--ui-space-3, 12px);
-  border-top: 1px solid var(--ui-border, #e5e7eb);
-  font-size: var(--ui-font-size-xs, 0.75rem);
-  color: var(--ui-text-muted, #6b7280);
-}
-
-@media (min-width: 768px) {
-  .ui-editor-slash-menu__footer {
-    display: block;
-  }
-}
-
-.ui-editor-slash-menu kbd {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  font-family: var(--ui-font-family-mono, ui-monospace, monospace);
-  font-size: 10px;
-  background: var(--ui-surface-hover, #f3f4f6);
-  border: 1px solid var(--ui-border, #e5e7eb);
-  border-radius: 3px;
-  padding: 0 3px;
-  color: var(--ui-text-secondary, #4b5563);
-}
-
-/* Table context menu */
-.ui-editor-table-context-menu {
-  min-width: 14rem;
-  max-width: min(17rem, calc(100vw - 24px));
-  max-height: min(28rem, calc(100vh - 24px));
-  padding: var(--ui-space-1-5, 6px);
-  background: var(--ui-surface, #fff);
-  border: 1px solid var(--ui-border, #e5e7eb);
-  border-radius: var(--ui-radius-lg, 10px);
-  box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  overflow-y: auto;
-  overscroll-behavior: contain;
-  scrollbar-width: thin;
-}
-
-.ui-editor-table-context-menu__section {
-  display: flex;
-  flex-direction: column;
-  gap: 3px;
-}
-
-.ui-editor-table-context-menu button {
-  display: flex;
-  align-items: center;
-  gap: var(--ui-space-2, 8px);
-  width: 100%;
-  text-align: left;
-  min-height: 32px;
-  padding: var(--ui-space-1-5, 6px) var(--ui-space-2, 8px);
-  border: none;
-  border-radius: var(--ui-radius-sm, 4px);
-  background: none;
-  font-size: var(--ui-font-size-sm, 0.875rem);
-  cursor: pointer;
-  color: var(--ui-text, #111);
-}
-
-.ui-editor-table-context-menu button > .looma-icon {
-  width: 1rem;
-  height: 1rem;
-  flex: 0 0 auto;
-  stroke-width: var(--ui-editor-toolbar-icon-stroke-width, 1.75);
-}
-
-.ui-editor-table-context-menu button:hover:not(:disabled) {
-  background: var(--ui-surface-hover, #f3f4f6);
-}
-
-.ui-editor-table-context-menu button[data-selected="true"] {
-  background: var(--ui-accent-subtle, rgb(59 130 246 / 0.1));
-}
-
-.ui-editor-table-context-menu button[data-tone="danger"] {
-  color: var(--ui-danger, #dc2626);
-}
-
-.ui-editor-table-context-menu__swatches {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 3px;
-}
-
-.ui-editor-table-context-menu__swatch-button {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--ui-space-2, 8px);
-}
-
-.ui-editor-table-context-menu__swatch {
-  display: inline-flex;
-  width: 1rem;
-  height: 1rem;
-  border-radius: 999px;
-  border: 1px solid var(--ui-border, #d1d5db);
-  background: var(--ui-editor-table-context-swatch, #fff);
-  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.35);
-  flex-shrink: 0;
-}
-
-.ui-editor-table-context-menu__swatch--default {
-  position: relative;
-  background:
-    linear-gradient(
-      135deg,
-      transparent calc(50% - 1px),
-      var(--ui-text-muted, #6b7280) calc(50% - 1px),
-      var(--ui-text-muted, #6b7280) calc(50% + 1px),
-      transparent calc(50% + 1px)
-    ),
-    var(--ui-surface, #fff);
-}
-
-.ui-editor-table-context-menu__swatch-label {
-  min-width: 0;
-  white-space: nowrap;
-}
-
-.ui-editor-table-context-menu__heading {
-  padding: var(--ui-space-1, 4px) var(--ui-space-2, 8px);
-  font-size: 0.6875rem;
-  font-weight: 700;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-  color: var(--ui-text-muted, #6b7280);
-}
-
-.ui-editor-table-context-menu__sep {
-  height: 1px;
-  background: var(--ui-border, #e5e7eb);
-  margin: var(--ui-space-1, 4px) 0;
-}
-
-/* Table toolbar */
-.ui-editor-table-toolbar {
-  display: inline-flex;
-  align-items: center;
-  gap: var(--ui-space-1, 4px);
-  padding: var(--ui-space-1, 4px);
-  background: color-mix(in srgb, var(--ui-surface, #fff) 94%, transparent);
-  border: 1px solid var(--ui-border, #e5e7eb);
-  border-radius: calc(var(--ui-radius-md, 6px) + 2px);
-  box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
-  backdrop-filter: blur(10px);
-}
-
-.ui-editor-table-toolbar__group {
-  display: inline-flex;
-  align-items: center;
-  gap: 2px;
-  overflow: hidden;
-}
-
-.ui-editor-table-toolbar__sep {
-  width: 1px;
-  align-self: stretch;
-  background: var(--ui-border, #e5e7eb);
-}
-
-.ui-editor-table-toolbar__overflow {
-  position: relative;
-}
-
-.ui-editor-table-toolbar button {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  gap: var(--ui-space-1-5, 6px);
-  min-height: 32px;
-  border: 0;
-  border-radius: var(--ui-radius-sm, 4px);
-  background: transparent;
-  color: var(--ui-text-primary, #111827);
-  cursor: pointer;
-  font-size: var(--ui-text-sm, 0.875rem);
-  font-weight: 500;
-  line-height: 1;
-  padding: var(--ui-space-1-5, 6px) var(--ui-space-2, 8px);
-  white-space: nowrap;
-}
-
-.ui-editor-table-toolbar button:hover {
-  background: var(--ui-surface-hover, #f3f4f6);
-}
-
-.ui-editor-table-toolbar button[data-active="true"] {
-  background: var(--ui-accent-soft, var(--ui-accent-subtle, #e8f0fb));
-  color: var(--ui-accent-active, #003d7a);
-}
-
-.ui-editor-table-toolbar__group button {
-  border-radius: var(--ui-radius-sm, 4px);
-}
-
-.ui-editor-table-toolbar__group button + button {
-  border-left: 0;
-}
-
-.ui-editor-table-toolbar__more {
-  border: 0 !important;
-  border-radius: var(--ui-radius-sm, 4px) !important;
-}
-
-.ui-editor-table-toolbar button[data-tone="danger"] {
-  color: var(--ui-danger, #dc2626);
-}
-
-.ui-editor-table-toolbar .looma-icon {
-  width: var(--ui-editor-toolbar-icon-size, 1rem);
-  height: var(--ui-editor-toolbar-icon-size, 1rem);
-  flex: 0 0 auto;
-  stroke-width: var(--ui-editor-toolbar-icon-stroke-width, 1.75);
-}
-
-.ui-editor-table-toolbar .looma-icon--chevron {
-  width: 0.875rem;
-  height: 0.875rem;
-}
-
-.ui-editor-table-toolbar__icon-button {
-  width: 32px;
-  padding-inline: 0 !important;
-}
-
-.ui-editor-table-toolbar__menu {
-  position: absolute;
-  top: calc(100% + var(--ui-space-2, 8px));
-  right: 0;
-  min-width: 12rem;
-  padding: var(--ui-space-1, 4px);
-  background: var(--ui-surface, #fff);
-  border: 1px solid var(--ui-border, #e5e7eb);
-  border-radius: var(--ui-radius-md, 6px);
-  box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
-  display: flex;
-  flex-direction: column;
-  gap: 2px;
-  z-index: 2;
-}
-
-.ui-editor-table-toolbar__menu-section + .ui-editor-table-toolbar__menu-section {
-  margin-top: var(--ui-space-1, 4px);
-  padding-top: var(--ui-space-1, 4px);
-  border-top: 1px solid color-mix(in srgb, var(--ui-border, #e5e7eb) 80%, transparent);
-}
-
-.ui-editor-table-toolbar__menu-heading {
-  padding: var(--ui-space-1, 4px) var(--ui-space-2, 8px);
-  font-size: 0.6875rem;
-  font-weight: 700;
-  letter-spacing: 0.05em;
-  text-transform: uppercase;
-  color: var(--ui-text-muted, #6b7280);
-}
-
-.ui-editor-table-toolbar__menu button {
-  display: flex;
-  justify-content: flex-start;
-  width: 100%;
-  text-align: left;
-}
-
-.ui-editor-table-toolbar__swatches {
-  display: grid;
-  grid-template-columns: repeat(3, minmax(0, 1fr));
-  gap: 2px;
-}
-
-.ui-editor-table-toolbar__swatch-button {
-  gap: var(--ui-space-1, 4px);
-  justify-content: flex-start !important;
-}
-
-.ui-editor-table-toolbar__swatch {
-  width: 14px;
-  height: 14px;
-  flex: 0 0 14px;
-  border: 1px solid color-mix(in srgb, var(--ui-border, #e5e7eb) 80%, #000);
-  border-radius: 3px;
-  background: var(--ui-editor-table-toolbar-swatch);
-}
-
-.ui-editor-table-toolbar__swatch--default {
-  background:
-    linear-gradient(135deg, transparent 44%, var(--ui-danger, #dc2626) 46% 54%, transparent 56%),
-    var(--ui-surface, #fff);
-}
-
-.ui-editor-table-toolbar__swatch-button[data-selected="true"] {
-  background: var(--ui-accent-soft, var(--ui-accent-subtle, #e8f0fb));
-}
-
-/* Insert table grid */
-.ui-editor-insert-table-grid {
-  padding: var(--ui-space-3, 12px);
-  background: var(--ui-surface, #fff);
-  border: 1px solid var(--ui-border, #e5e7eb);
-  border-radius: var(--ui-radius-md, 6px);
-  box-shadow: var(--ui-shadow-lg, 0 10px 15px -3px rgb(0 0 0 / 0.1));
-}
-
-.ui-editor-insert-table-grid__hint {
-  margin: 0 0 var(--ui-space-2, 8px);
-  font-size: var(--ui-text-sm, 0.875rem);
-  color: var(--ui-text-muted, #6b7280);
-}
-
-.ui-editor-insert-table-grid__grid {
-  display: grid;
-  grid-template-columns: repeat(var(--ui-editor-table-grid-cols, 8), 1.25rem);
-  grid-template-rows: repeat(var(--ui-editor-table-grid-rows, 8), 1.25rem);
-  gap: 2px;
-  margin-bottom: var(--ui-space-2, 8px);
-}
-
-.ui-editor-insert-table-grid__cell {
-  width: 1.25rem;
-  height: 1.25rem;
-  padding: 0;
-  border: 1px solid var(--ui-border, #e5e7eb);
-  border-radius: 2px;
-  background: var(--ui-surface, #fff);
-  cursor: pointer;
-}
-
-.ui-editor-insert-table-grid__cell--selected {
-  background: var(--ui-accent-solid, var(--ui-accent, #0066cc));
-  border-color: var(--ui-accent-solid, var(--ui-accent, #0066cc));
-}
-
-.ui-editor-insert-table-grid__header {
-  display: block;
-  margin-bottom: var(--ui-space-2, 8px);
-  font-size: var(--ui-text-sm, 0.875rem);
-  cursor: pointer;
-}
-
-.ui-editor-insert-table-grid [data-insert-table] {
-  width: 100%;
-  padding: var(--ui-space-2, 8px) var(--ui-space-3, 12px);
-  border: 1px solid var(--ui-border, #e5e7eb);
-  border-radius: var(--ui-radius-sm, 4px);
-  background: var(--ui-accent-solid, var(--ui-accent, #0066cc));
-  color: var(--ui-accent-contrast, #fff);
-  font-size: var(--ui-text-sm, 0.875rem);
-  cursor: pointer;
-}
-
-.ui-editor-insert-table-grid [data-insert-table]:hover {
-  filter: brightness(1.05);
-}
-
-/* Table overlay controls */
-[data-component-root~="ui-editor-table-overlay"] {
-  display: block;
-  width: 100%;
-  height: 100%;
-  overflow: visible;
-  pointer-events: none;
-}
-
-.ui-editor-table-overlay {
-  position: relative;
-  width: 100%;
-  height: 100%;
-  overflow: visible;
-  pointer-events: none;
-}
-
-.ui-editor-table-overlay__rows,
-.ui-editor-table-overlay__cols {
-  pointer-events: none;
-  position: absolute;
-}
-
-.ui-editor-table-overlay__rows {
-  inset: 0;
-  width: 100%;
-}
-
-.ui-editor-table-overlay__cols {
-  inset: 0;
-  height: 100%;
-}
-
-.ui-editor-table-overlay__control {
-  position: absolute;
-  z-index: 1;
-  pointer-events: none;
-}
-
-.ui-editor-table-overlay__handle {
-  position: absolute;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  width: 24px;
-  height: 24px;
-  padding: 0;
-  border: 1px solid var(--ui-affordance-near-color, var(--ui-border-strong, #c8c8c4));
-  border-radius: var(--ui-radius-round, 999px);
-  background: color-mix(in srgb, var(--ui-surface-elevated, #fff) 96%, transparent);
-  color: var(--ui-affordance-near-color, var(--ui-text-secondary, #5c5c5c));
-  font: inherit;
-  font-size: 16px;
-  line-height: 1;
-  box-shadow: var(--ui-shadow-xs, 0 1px 2px rgb(0 0 0 / 0.05));
-  opacity: 0;
-  scale: 0.72;
-  transition:
-    opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease),
-    scale var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease),
-    color var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease),
-    background-color var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease),
-    border-color var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease);
-  pointer-events: auto;
-  cursor: pointer;
-}
-
-.ui-editor-table-overlay__handle > .looma-icon {
-  width: 14px;
-  height: 14px;
-  stroke-width: var(--ui-editor-table-affordance-icon-stroke-width, 2);
-}
-
-.ui-editor-table-overlay__handle[data-ui-proximity="near"],
-.ui-editor-table-overlay__control[data-active="true"] .ui-editor-table-overlay__handle,
-.ui-editor-table-overlay__handle:focus-visible {
-  opacity: 1;
-  scale: 1;
-}
-
-.ui-editor-table-overlay__control[data-active="true"] .ui-editor-table-overlay__handle,
-.ui-editor-table-overlay__handle:focus-visible {
-  border-color: var(--ui-affordance-direct-color, var(--ui-accent-solid, #5b55d6));
-  background: var(--ui-affordance-direct-color, var(--ui-accent-solid, #5b55d6));
-  color: var(--ui-text-on-accent, #fff);
-  box-shadow: var(--ui-shadow-sm, 0 1px 3px rgb(0 0 0 / 0.1));
-}
-
-.ui-editor-table-overlay__handle:focus-visible,
-.ui-editor-table-overlay__selector:focus-visible,
-.ui-editor-table-overlay__cell-menu:focus-visible {
-  outline: 2px solid var(--ui-focus-ring, #5b55d6);
-  outline-offset: 2px;
-}
-
-.ui-editor-table-overlay__control--row {
-  left: 0;
-  width: 100%;
-  height: 0;
-}
-
-.ui-editor-table-overlay__control--row .ui-editor-table-overlay__handle {
-  top: -12px;
-  left: -30px;
-}
-
-.ui-editor-table-overlay__control--col {
-  top: 0;
-  width: 0;
-  height: 100%;
-}
-
-.ui-editor-table-overlay__control--col .ui-editor-table-overlay__handle {
-  top: -30px;
-  left: -12px;
-}
-
-.ui-editor-table-overlay__line {
-  position: absolute;
-  background: var(--ui-affordance-direct-color, var(--ui-accent-solid, #5b55d6));
-  opacity: 0;
-  transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease);
-}
-
-.ui-editor-table-overlay__control--row .ui-editor-table-overlay__line {
-  inset: -1px 0 auto;
-  height: 2px;
-}
-
-.ui-editor-table-overlay__control--col .ui-editor-table-overlay__line {
-  inset: 0 auto 0 -1px;
-  width: 2px;
-}
-
-.ui-editor-table-overlay__control[data-active="true"] .ui-editor-table-overlay__line {
-  opacity: 0.8;
-}
-
-.ui-editor-table-overlay__guide {
-  position: absolute;
-  width: var(--ui-affordance-guide-size, 4px);
-  height: var(--ui-affordance-guide-size, 4px);
-  border-radius: var(--ui-radius-round, 999px);
-  background: var(--ui-affordance-guide-color, var(--ui-border-strong, #c8c8c4));
-  opacity: var(--ui-affordance-guide-opacity, 0.42);
-  transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease);
-}
-
-.ui-editor-table-overlay__control--row .ui-editor-table-overlay__guide {
-  left: -10px;
-  top: -2px;
-}
-
-.ui-editor-table-overlay__control--col .ui-editor-table-overlay__guide {
-  left: -2px;
-  top: -10px;
-}
-
-.ui-editor-table-overlay__control:has(.ui-editor-table-overlay__handle[data-ui-proximity="near"]) .ui-editor-table-overlay__guide,
-.ui-editor-table-overlay__control[data-active="true"] .ui-editor-table-overlay__guide {
-  opacity: 0;
-}
-
-.ui-editor-table-overlay__tooltip {
-  position: absolute;
-  z-index: 2;
-  top: calc(100% + 6px);
-  left: 50%;
-  width: max-content;
-  max-width: 14rem;
-  padding: var(--ui-space-1, 4px) var(--ui-space-2, 8px);
-  border-radius: var(--ui-radius-1, 4px);
-  background: var(--ui-text-primary, #1a1a1a);
-  color: var(--ui-surface-elevated, #fff);
-  font-size: var(--ui-font-size-xs, 0.75rem);
-  font-weight: var(--ui-font-medium, 500);
-  line-height: var(--ui-line-height-md, 1.4);
-  opacity: 0;
-  transform: translateX(-50%);
-  transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease);
-  pointer-events: none;
-}
-
-.ui-editor-table-overlay__control--row .ui-editor-table-overlay__tooltip {
-  top: 50%;
-  left: auto;
-  right: calc(100% + 8px);
-  transform: translateY(-50%);
-}
-
-.ui-editor-table-overlay__control[data-active="true"] .ui-editor-table-overlay__tooltip,
-.ui-editor-table-overlay__handle:focus-visible .ui-editor-table-overlay__tooltip {
-  opacity: 1;
-}
-
-.ui-editor-table-overlay__selector,
-.ui-editor-table-overlay__cell-menu {
-  position: absolute;
-  z-index: 2;
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0;
-  border: 1px solid transparent;
-  background: transparent;
-  color: var(--ui-text-secondary, #5c5c5c);
-  box-shadow: none;
-  pointer-events: auto;
-  cursor: pointer;
-  transition:
-    color var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease),
-    background-color var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease),
-    border-color var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease),
-    box-shadow var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease);
-}
-
-.ui-editor-table-overlay__selector:hover,
-.ui-editor-table-overlay__cell-menu:hover {
-  background: var(--ui-icon-button-hover-bg, var(--ui-surface-muted, #f3f4f6));
-  color: var(--ui-icon-button-hover-color, var(--ui-text-primary, #1a1a1a));
-  box-shadow: var(--ui-shadow-xs, 0 1px 2px rgb(0 0 0 / 0.05));
-}
-
-.ui-editor-table-overlay__selector {
-  border-radius: var(--ui-radius-round, 999px);
-}
-
-.ui-editor-table-overlay__selector::before {
-  content: "";
-  position: absolute;
-  inset: 50% auto auto 50%;
-  border-radius: var(--ui-radius-round, 999px);
-  background: var(--ui-affordance-guide-color, var(--ui-border-strong, #c8c8c4));
-  opacity: var(--ui-affordance-guide-opacity, 0.42);
-  transform: translate(-50%, -50%);
-  transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease);
-  pointer-events: none;
-}
-
-.ui-editor-table-overlay__selector .looma-icon {
-  display: block;
-  width: 14px;
-  height: 14px;
-  stroke-width: var(--ui-editor-table-affordance-icon-stroke-width, 2);
-  opacity: 0;
-  transform: scale(0.72);
-  transition:
-    opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease),
-    transform var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease);
-}
-
-.ui-editor-table-overlay__selector:hover::before,
-.ui-editor-table-overlay__selector:focus-visible::before {
-  opacity: 0;
-}
-
-.ui-editor-table-overlay__selector:hover .looma-icon,
-.ui-editor-table-overlay__selector:focus-visible .looma-icon {
-  opacity: 1;
-  transform: scale(1);
-}
-
-.ui-editor-table-overlay__selector--row {
-  left: -9px;
-  width: 18px;
-  height: 32px;
-  transform: translateY(-50%);
-}
-
-.ui-editor-table-overlay__selector--row::before {
-  width: 2px;
-  height: 16px;
-}
-
-.ui-editor-table-overlay__selector--column {
-  top: -9px;
-  width: 32px;
-  height: 18px;
-  transform: translateX(-50%);
-}
-
-.ui-editor-table-overlay__selector--column::before {
-  width: 16px;
-  height: 2px;
-}
-
-@media (hover: none), (pointer: coarse) {
-  .ui-editor-table-overlay__selector::before {
-    opacity: 0;
-  }
-
-  .ui-editor-table-overlay__selector .looma-icon {
-    opacity: 1;
-    transform: none;
-  }
-}
-
-.ui-editor-table-overlay__cell-menu {
-  width: 24px;
-  height: 24px;
-  border-radius: var(--ui-radius-1, 4px);
-  background: color-mix(in srgb, var(--ui-surface-muted, #f3f4f6) 78%, transparent);
-}
-
-.ui-editor-table-overlay__cell-menu .looma-icon {
-  width: 15px;
-  height: 15px;
-  stroke-width: var(--ui-editor-table-affordance-icon-stroke-width, 2);
-}
-
-.ProseMirror .tableWrapper {
-  max-width: 100%;
-  overflow-x: auto;
-  overflow-y: visible;
-  overscroll-behavior-inline: contain;
-  -webkit-overflow-scrolling: touch;
-}
-
-/* ProseMirror table (for when Looma editor content is rendered) */
-.ProseMirror:focus-visible {
-  outline: none;
-  box-shadow: none;
-}
-
-.ProseMirror table {
-  border-collapse: collapse;
-  margin: 0;
-  width: max-content !important;
-  min-width: 100%;
-  max-width: none !important;
-  table-layout: fixed;
-}
-
-.ProseMirror table.ProseMirror-selectednode,
-.ProseMirror .tableWrapper.ProseMirror-selectednode {
-  outline: none;
-}
-
-.ProseMirror th,
-.ProseMirror td {
-  position: relative;
-  border: 1px solid var(--ui-border, #e5e7eb);
-  padding: var(--ui-space-2, 8px) var(--ui-space-3, 12px);
-  vertical-align: top;
-  min-width: var(--ui-editor-table-cell-min-width, 112px);
-  text-align: left;
-  overflow-wrap: anywhere;
-}
-
-.ProseMirror :is(th, td) > p,
-.looma-editor .ProseMirror :is(th, td) > p {
-  margin: 0;
-}
-
-.ProseMirror :is(th, td) > p + p,
-.looma-editor .ProseMirror :is(th, td) > p + p {
-  margin-top: var(--ui-editor-table-paragraph-gap, var(--ui-space-2, 8px));
-}
-
-.ProseMirror th {
-  font-weight: 600;
-  background: var(--ui-surface-hover, #f3f4f6);
-}
-
-.ProseMirror .selectedCell {
-  background: var(--ui-accent-subtle, rgba(59, 130, 246, 0.1));
-}
-
-.ProseMirror .column-resize-handle {
-  position: absolute;
-  z-index: 3;
-  right: -5px;
-  top: 0;
-  bottom: 0;
-  width: 10px;
-  cursor: col-resize;
-  background: transparent;
-  touch-action: none;
-}
-
-.ProseMirror .column-resize-handle::after {
-  content: "";
-  position: absolute;
-  inset-block: 0;
-  inset-inline-start: 4px;
-  width: 2px;
-  border-radius: var(--ui-radius-round, 999px);
-  background: color-mix(in srgb, var(--ui-affordance-near-color, var(--ui-border-strong, #c8c8c4)) 72%, transparent);
-  transition:
-    width var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease),
-    background-color var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease);
-}
-
-.ProseMirror .column-resize-handle:hover::after,
-.ProseMirror.resize-cursor .column-resize-handle::after {
-  width: 3px;
-  background: var(--ui-affordance-direct-color, var(--ui-accent-solid, #5b55d6));
-}
-
-.ProseMirror .column-resize-handle::before {
-  content: "Drag to resize column";
-  position: absolute;
-  z-index: 4;
-  top: 4px;
-  left: calc(100% + 6px);
-  width: max-content;
-  padding: var(--ui-space-1, 4px) var(--ui-space-2, 8px);
-  border-radius: var(--ui-radius-1, 4px);
-  background: var(--ui-text-primary, #1a1a1a);
-  color: var(--ui-surface-elevated, #fff);
-  font-size: var(--ui-font-size-xs, 0.75rem);
-  line-height: var(--ui-line-height-md, 1.4);
-  opacity: 0;
-  transform: none;
-  transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease);
-  pointer-events: none;
-}
-
-.ProseMirror .column-resize-handle:hover::before {
-  opacity: 1;
-}
-`;
-
-// src/table-overlay.ts
-import {
-  createProximityCoordinator,
-  loomaIconMarkup
-} from "@threadlabs/looma/core";
-var DEFAULT_ROWS = 3;
-var DEFAULT_COLS = 3;
-function sameNumbers(left, right) {
-  return left.length === right.length && left.every((value, index) => value === right[index]);
-}
-function sameActiveCell(left, right) {
-  if (left === right) return true;
-  if (!left || !right) return false;
-  return left.left === right.left && left.top === right.top && left.width === right.width && left.height === right.height && left.rowIndex === right.rowIndex && left.columnIndex === right.columnIndex;
-}
-function sameGeometry(left, right) {
-  if (left === right) return true;
-  if (!left || !right) return false;
-  return sameNumbers(left.rowBoundaries, right.rowBoundaries) && sameNumbers(left.columnBoundaries, right.columnBoundaries) && sameActiveCell(left.activeCell, right.activeCell) && sameActiveCell(left.hoveredCell ?? null, right.hoveredCell ?? null);
-}
-function mapTableCells(table) {
-  const rows = Array.from(table.rows);
-  const grid = [];
-  const coordinates = /* @__PURE__ */ new Map();
-  rows.forEach((row, rowIndex) => {
-    grid[rowIndex] ??= [];
-    let columnIndex = 0;
-    for (const cell of Array.from(row.cells)) {
-      while (grid[rowIndex]?.[columnIndex]) columnIndex += 1;
-      coordinates.set(cell, { rowIndex, columnIndex });
-      const rowSpan = cell.rowSpan === 0 ? rows.length - rowIndex : Math.max(1, cell.rowSpan);
-      const columnSpan = Math.max(1, cell.colSpan);
-      for (let rowOffset = 0; rowOffset < rowSpan; rowOffset += 1) {
-        const gridRow = grid[rowIndex + rowOffset] ??= [];
-        for (let columnOffset = 0; columnOffset < columnSpan; columnOffset += 1) {
-          gridRow[columnIndex + columnOffset] = cell;
-        }
-      }
-      columnIndex += columnSpan;
-    }
-  });
-  return { grid, coordinates };
-}
-function resolveTableCellAt(table, rowIndex, columnIndex) {
-  return mapTableCells(table).grid[rowIndex]?.[columnIndex] ?? null;
-}
-function uniqueSorted(values) {
-  return values.sort((left, right) => left - right).filter((value, index, all) => index === 0 || Math.abs(value - (all[index - 1] ?? value)) >= 0.5).map((value) => Math.round(value * 100) / 100);
-}
-function measureTableOverlayGeometry(table, activeCell, hoveredCell = null) {
-  const tableRect = table.getBoundingClientRect();
-  const rows = Array.from(table.rows);
-  const cells = rows.flatMap((row) => Array.from(row.cells));
-  const { coordinates } = mapTableCells(table);
-  const rowBoundaries = uniqueSorted(rows.flatMap((row) => {
-    const rect = row.getBoundingClientRect();
-    return [rect.top - tableRect.top, rect.bottom - tableRect.top];
-  }));
-  const columnBoundaries = uniqueSorted(cells.flatMap((cell) => {
-    const rect = cell.getBoundingClientRect();
-    return [rect.left - tableRect.left, rect.right - tableRect.left];
-  }));
-  if (!activeCell || !table.contains(activeCell)) {
-    return {
-      rowBoundaries,
-      columnBoundaries,
-      activeCell: null,
-      hoveredCell: measureCellRect(table, hoveredCell, coordinates)
-    };
-  }
-  return {
-    rowBoundaries,
-    columnBoundaries,
-    activeCell: measureCellRect(table, activeCell, coordinates),
-    hoveredCell: measureCellRect(table, hoveredCell, coordinates)
-  };
-}
-function measureCellRect(table, cell, coordinates) {
-  if (!cell || !table.contains(cell)) return null;
-  const tableRect = table.getBoundingClientRect();
-  const cellRect = cell.getBoundingClientRect();
-  const coordinate = coordinates.get(cell);
-  return {
-    left: Math.round((cellRect.left - tableRect.left) * 100) / 100,
-    top: Math.round((cellRect.top - tableRect.top) * 100) / 100,
-    width: Math.round(cellRect.width * 100) / 100,
-    height: Math.round(cellRect.height * 100) / 100,
-    rowIndex: coordinate?.rowIndex ?? 0,
-    columnIndex: coordinate?.columnIndex ?? 0
-  };
-}
-function finiteNumbers(value) {
-  if (!value) return [];
-  const values = value.split(",").map((part) => Number(part.trim()));
-  return values.every(Number.isFinite) ? values : [];
-}
-function fallbackBoundaries2(segments, length) {
-  return Array.from({ length: segments + 1 }, (_, index) => index * length / segments);
-}
-if (typeof HTMLElement !== "undefined") {
-  class UIEditorTableOverlayElement extends HTMLElement {
-    static get observedAttributes() {
-      return ["open", "rows", "cols", "row-boundaries", "column-boundaries", "active-cell", "hovered-cell"];
-    }
-    #rows = DEFAULT_ROWS;
-    #cols = DEFAULT_COLS;
-    #activeControlKey = null;
-    #proximity = null;
-    #geometry = null;
-    #renderPending = false;
-    get geometry() {
-      return this.#geometry;
-    }
-    set geometry(value) {
-      if (sameGeometry(this.#geometry, value)) return;
-      this.#geometry = value;
-      this.#scheduleRender();
-    }
-    connectedCallback() {
-      this.#rows = this.#readBoundedNumber("rows", DEFAULT_ROWS);
-      this.#cols = this.#readBoundedNumber("cols", DEFAULT_COLS);
-      this.render();
-      this.addEventListener("mousedown", this.onMouseDown);
-      this.addEventListener("click", this.onClick);
-      this.addEventListener("pointerover", this.onPointerOver);
-      this.addEventListener("pointerout", this.onPointerOut);
-      this.addEventListener("focusin", this.onFocusIn);
-      this.addEventListener("focusout", this.onFocusOut);
-      this.#proximity = createProximityCoordinator(this, {
-        pointerTarget: this.ownerDocument,
-        anchorSelector: ".ui-editor-table-overlay__handle[data-ui-affordance]"
-      });
-    }
-    disconnectedCallback() {
-      this.removeEventListener("mousedown", this.onMouseDown);
-      this.removeEventListener("click", this.onClick);
-      this.removeEventListener("pointerover", this.onPointerOver);
-      this.removeEventListener("pointerout", this.onPointerOut);
-      this.removeEventListener("focusin", this.onFocusIn);
-      this.removeEventListener("focusout", this.onFocusOut);
-      this.#proximity?.destroy();
-      this.#proximity = null;
-    }
-    attributeChangedCallback(name) {
-      if (name === "rows") this.#rows = this.#readBoundedNumber("rows", DEFAULT_ROWS);
-      if (name === "cols") this.#cols = this.#readBoundedNumber("cols", DEFAULT_COLS);
-      this.#scheduleRender();
-    }
-    #scheduleRender() {
-      if (!this.isConnected || this.#renderPending) return;
-      this.#renderPending = true;
-      queueMicrotask(() => {
-        this.#renderPending = false;
-        if (this.isConnected) this.render();
-      });
-    }
-    #readBoundedNumber(name, fallback) {
-      const parsed = Number.parseInt(this.getAttribute(name) ?? String(fallback), 10);
-      return Number.isFinite(parsed) ? Math.min(100, Math.max(1, parsed)) : fallback;
-    }
-    #boundaries(name, segments) {
-      if (this.#geometry) {
-        return name === "row-boundaries" ? this.#geometry.rowBoundaries : this.#geometry.columnBoundaries;
-      }
-      const explicit = finiteNumbers(this.getAttribute(name));
-      if (explicit.length === segments + 1) return explicit;
-      const length = name === "row-boundaries" ? this.getBoundingClientRect().height : this.getBoundingClientRect().width;
-      return fallbackBoundaries2(segments, length);
-    }
-    #activeCell() {
-      if (this.#geometry) return this.#geometry.activeCell;
-      const values = finiteNumbers(this.getAttribute("active-cell"));
-      if (values.length !== 6) return null;
-      const [left, top, width, height, rowIndex, columnIndex] = values;
-      if (left === void 0 || top === void 0 || width === void 0 || height === void 0 || rowIndex === void 0 || columnIndex === void 0) return null;
-      return { left, top, width, height, rowIndex, columnIndex };
-    }
-    #hoveredCell() {
-      if (this.#geometry) return this.#geometry.hoveredCell ?? null;
-      const values = finiteNumbers(this.getAttribute("hovered-cell"));
-      if (values.length !== 6) return null;
-      const [left, top, width, height, rowIndex, columnIndex] = values;
-      if (left === void 0 || top === void 0 || width === void 0 || height === void 0 || rowIndex === void 0 || columnIndex === void 0) return null;
-      return { left, top, width, height, rowIndex, columnIndex };
-    }
-    dispatch(detail) {
-      this.dispatchEvent(new CustomEvent(
-        "action",
-        { detail, bubbles: true, composed: true }
-      ));
-    }
-    onMouseDown = (event) => {
-      const target = event.target instanceof Element ? event.target.closest("button[data-action]") : null;
-      if (target) event.preventDefault();
-    };
-    onClick = (event) => {
-      const target = event.target.closest("button[data-action]");
-      if (!target) return;
-      const action = target.dataset.action;
-      if (!action) return;
-      if (action === "select-row" || action === "select-column") {
-        const rowIndex = Number.parseInt(target.dataset.rowIndex ?? "", 10);
-        const columnIndex = Number.parseInt(target.dataset.columnIndex ?? "", 10);
-        if (Number.isFinite(rowIndex) && Number.isFinite(columnIndex)) {
-          this.dispatch({ action, rowIndex, columnIndex });
-        }
-        return;
-      }
-      if (action === "open-cell-menu") {
-        const rowIndex = Number.parseInt(target.dataset.rowIndex ?? "", 10);
-        const columnIndex = Number.parseInt(target.dataset.columnIndex ?? "", 10);
-        if (!Number.isFinite(rowIndex) || !Number.isFinite(columnIndex)) return;
-        const rect = target.getBoundingClientRect();
-        this.dispatch({
-          action,
-          rowIndex,
-          columnIndex,
-          anchor: { left: rect.left, top: rect.top, right: rect.right, bottom: rect.bottom }
-        });
-        return;
-      }
-      const boundaryIndex = Number.parseInt(target.dataset.boundaryIndex ?? "", 10);
-      if (!Number.isFinite(boundaryIndex) || boundaryIndex < 0) return;
-      this.dispatch({ action, boundaryIndex });
-    };
-    onPointerOver = (event) => {
-      const control = event.target.closest("[data-control-key]");
-      this.#setActiveControl(control?.dataset.controlKey ?? null);
-    };
-    onPointerOut = (event) => {
-      const related = event.relatedTarget;
-      const next = related instanceof Element ? related.closest("[data-control-key]") : null;
-      this.#setActiveControl(next?.dataset.controlKey ?? null);
-    };
-    onFocusIn = (event) => {
-      const control = event.target.closest("[data-control-key]");
-      this.#setActiveControl(control?.dataset.controlKey ?? null);
-    };
-    onFocusOut = (event) => {
-      const related = event.relatedTarget;
-      const next = related instanceof Element ? related.closest("[data-control-key]") : null;
-      this.#setActiveControl(next?.dataset.controlKey ?? null);
-    };
-    #setActiveControl(controlKey) {
-      if (this.#activeControlKey === controlKey) return;
-      this.#activeControlKey = controlKey;
-      this.#syncActiveControl();
-    }
-    #syncActiveControl() {
-      this.querySelectorAll("[data-control-key]").forEach((control) => {
-        control.dataset.active = this.#activeControlKey === control.dataset.controlKey ? "true" : "false";
-      });
-    }
-    #insertionControl(axis, index, position) {
-      const first = index === 0;
-      const action = axis === "row" ? first ? "add-row-before" : "add-row-after" : first ? "add-column-before" : "add-column-after";
-      const noun = axis === "row" ? "row" : "column";
-      const relation = first ? axis === "row" ? "above" : "left" : axis === "row" ? "below" : "right";
-      const label = `Insert ${noun} ${relation}`;
-      const controlKey = `${axis}:${index}`;
-      const positionStyle = axis === "row" ? `top:${position}px;` : `left:${position}px;`;
-      return [
-        `<div class="ui-editor-table-overlay__control ui-editor-table-overlay__control--${axis}"`,
-        ` style="${positionStyle}" data-control-key="${controlKey}"`,
-        ` data-active="${this.#activeControlKey === controlKey ? "true" : "false"}">`,
-        '<span class="ui-editor-table-overlay__line" aria-hidden="true"></span>',
-        '<span class="ui-editor-table-overlay__guide" data-ui-guide aria-hidden="true"></span>',
-        `<button type="button" class="ui-editor-table-overlay__handle" data-ui-affordance="insert-${noun}"`,
-        ` data-action="${action}" data-boundary-index="${index}" aria-label="${label}">`,
-        loomaIconMarkup("plus"),
-        `<span class="ui-editor-table-overlay__tooltip" role="tooltip">${label}</span>`,
-        "</button>",
-        "</div>"
-      ].join("");
-    }
-    #cellSelectors(cell) {
-      const centerX = cell.left + cell.width / 2;
-      const centerY = cell.top + cell.height / 2;
-      const indexes = `data-row-index="${cell.rowIndex}" data-column-index="${cell.columnIndex}"`;
-      return [
-        `<button type="button" class="ui-editor-table-overlay__selector ui-editor-table-overlay__selector--row" style="top:${centerY}px" data-action="select-row" ${indexes} title="Select row" aria-label="Select row">${loomaIconMarkup("grip-vertical")}</button>`,
-        `<button type="button" class="ui-editor-table-overlay__selector ui-editor-table-overlay__selector--column" style="left:${centerX}px" data-action="select-column" ${indexes} title="Select column" aria-label="Select column">${loomaIconMarkup("grip-horizontal")}</button>`
-      ].join("");
-    }
-    #cellMenu(cell) {
-      const indexes = `data-row-index="${cell.rowIndex}" data-column-index="${cell.columnIndex}"`;
-      return `<button type="button" class="ui-editor-table-overlay__cell-menu" style="left:${cell.left + cell.width - 30}px;top:${cell.top + 6}px" data-action="open-cell-menu" ${indexes} title="Cell actions" aria-label="Cell actions">${loomaIconMarkup("chevron-down")}</button>`;
-    }
-    render() {
-      const open = this.hasAttribute("open") && this.getAttribute("open") !== "false";
-      this.hidden = !open;
-      if (!open) {
-        this.#setActiveControl(null);
-        return;
-      }
-      const rows = this.#boundaries("row-boundaries", this.#rows);
-      const columns = this.#boundaries("column-boundaries", this.#cols);
-      const activeCell = this.#activeCell();
-      const hoveredCell = this.#hoveredCell();
-      this.innerHTML = [
-        '<div class="ui-editor-table-overlay" aria-label="Table controls">',
-        '<div class="ui-editor-table-overlay__rows">',
-        rows.map((position, index) => this.#insertionControl("row", index, position)).join(""),
-        "</div>",
-        '<div class="ui-editor-table-overlay__cols">',
-        columns.map((position, index) => this.#insertionControl("col", index, position)).join(""),
-        "</div>",
-        hoveredCell ? this.#cellSelectors(hoveredCell) : "",
-        activeCell ? this.#cellMenu(activeCell) : "",
-        "</div>"
-      ].join("");
-      this.#syncActiveControl();
-      this.#proximity?.refresh();
-    }
-  }
-}
-
-// src/ui.ts
-registerLoomaPackage("editor", records, styles);
-
-export {
-  resolveTableCellAt,
-  measureTableOverlayGeometry
-};