@threadlabs/looma 0.2.5 → 0.2.7

package/editor/chunk-WI7ZA44X.js

@@ -0,0 +1,2558 @@
+import {
+  __export
+} from "./chunk-JK53ENSG.js";
+
+// src/ui.ts
+import { registerLoomaPackage } from "@threadlabs/looma/core/declarative";
+
+// ../../tools/migrate-html-next/generated/editor/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 withHeaderRow = true;
+  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 = () => {
+    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("looma-editor-insert-table", { 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);
+  };
+}
+
+// ../../tools/migrate-html-next/generated/editor/components/controllers/ui-editor-mention-menu.js
+var ui_editor_mention_menu_exports = {};
+__export(ui_editor_mention_menu_exports, {
+  default: () => controller2
+});
+
+// ../../tools/migrate-html-next/generated/editor/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 };
+}
+
+// ../../tools/migrate-html-next/generated/editor/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("looma-editor-mention-menu-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("looma-editor-mention-menu-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);
+  };
+}
+
+// ../../tools/migrate-html-next/generated/editor/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("looma-editor-slash-menu-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("looma-editor-slash-menu-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);
+  };
+}
+
+// ../../tools/migrate-html-next/generated/editor/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", "canAddRowBefore"],
+    ["add-row-after", "Add row below", "panel-bottom", "canAddRowAfter"],
+    ["add-column-before", "Add column left", "panel-left", "canAddColumnBefore"],
+    ["add-column-after", "Add column right", "panel-right", "canAddColumnAfter"]
+  ]],
+  ["Cells", [
+    ["clear-cells", "Clear selected cells", "eraser"],
+    ["merge-cells", "Merge cells", "merge", "canMergeCells"],
+    ["split-cell", "Split cell", "split", "canSplitCell"]
+  ]],
+  ["Table", [
+    ["delete-row", "Delete row", "trash", "canDeleteRow", "danger"],
+    ["delete-column", "Delete column", "trash", "canDeleteColumn", "danger"],
+    ["delete-table", "Delete table", "trash", "canDeleteTable", "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 background = String(host.state.cellBackground ?? "");
+    const rendered = [];
+    const swatches = backgrounds.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("");
+    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(([, , , capability]) => !capability || host.state[capability]);
+      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("looma-editor-table-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);
+  };
+}
+
+// ../../tools/migrate-html-next/generated/editor/components/controllers/ui-editor-table-overlay.js
+var ui_editor_table_overlay_exports = {};
+__export(ui_editor_table_overlay_exports, {
+  default: () => controller5
+});
+function bounded2(value, fallback) {
+  const parsed = Number.parseInt(String(value ?? fallback), 10);
+  return Number.isFinite(parsed) ? Math.min(100, Math.max(1, parsed)) : fallback;
+}
+function fallbackBoundaries(segments, length) {
+  return Array.from({ length: segments + 1 }, (_, index) => index * length / segments);
+}
+function numbers(value) {
+  const values = Array.isArray(value) ? value.map(Number) : typeof value === "string" ? value.split(/[\s,]+/).filter(Boolean).map(Number) : [];
+  return values.every(Number.isFinite) ? values : [];
+}
+function cellFrom(value) {
+  const values = numbers(value);
+  if (values.length !== 6) return null;
+  const [left, top, width, height, rowIndex, columnIndex] = values;
+  return { left, top, width, height, rowIndex, columnIndex };
+}
+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, segments) => {
+    const geometry = host.state.geometry;
+    const values = geometry?.[axis === "row" ? "rowBoundaries" : "columnBoundaries"] ?? host.state[axis === "row" ? "rowBoundaries" : "columnBoundaries"];
+    const parsed = numbers(values);
+    if (parsed.length === segments + 1) return parsed;
+    const rect = element.getBoundingClientRect();
+    return fallbackBoundaries(segments, 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 rows = bounded2(host.state.rows, 3);
+    const cols = bounded2(host.state.cols, 3);
+    const rowBoundaries = boundaries("row", rows);
+    const columnBoundaries = boundaries("column", cols);
+    const geometry = host.state.geometry;
+    const active = geometry?.activeCell ?? cellFrom(host.state.activeCell);
+    const hovered = geometry?.hoveredCell ?? cellFrom(host.state.hoveredCell);
+    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("looma-editor-table-overlay-action", { action, rowIndex: Number(button.dataset.rowIndex), columnIndex: Number(button.dataset.columnIndex) });
+      return;
+    }
+    if (action === "open-cell-menu") {
+      const rect = button.getBoundingClientRect();
+      host.dispatch("looma-editor-table-overlay-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("looma-editor-table-overlay-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);
+  };
+}
+
+// ../../tools/migrate-html-next/generated/editor/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", "canAddRowBefore"], ["add-column-before", "Add column left", "panel-left", "canAddColumnBefore"]]],
+  ["Cells", [["clear-cells", "Clear selected cells", "eraser"], ["merge-cells", "Merge selected cells", "merge", "canMergeCells"], ["split-cell", "Split merged cell", "split", "canSplitCell"]]],
+  ["Table", [["delete-row", "Delete row", "trash", "canDeleteRow", "danger"], ["delete-column", "Delete column", "trash", "canDeleteColumn", "danger"], ["delete-table", "Delete table", "trash", "canDeleteTable", "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 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"]];
+    const structure = [["add-row-after", "Add row", "rows", "canAddRowAfter"], ["add-column-after", "Add column", "columns", "canAddColumnAfter"]].filter(([, , , capability]) => host.state[capability]);
+    const background = String(host.state.cellBackground ?? "");
+    const menu = overflowOpen ? `<div class="ui-editor-table-toolbar__menu" role="menu" aria-label="More table actions"><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">${backgrounds.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>${overflowSections.map(([heading, actions]) => {
+      const available = actions.filter(([, , , capability]) => !capability || host.state[capability]);
+      return available.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>${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>` : "";
+    }).join("")}</div>` : "";
+    element.innerHTML = `<div class="ui-editor-table-toolbar" role="toolbar" aria-label="Table actions"><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>${structure.length ? '<div class="ui-editor-table-toolbar__sep" aria-hidden="true"></div><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>" : ""}<div class="ui-editor-table-toolbar__sep" aria-hidden="true"></div><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></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("looma-editor-table-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);
+  };
+}
+
+// ../../tools/migrate-html-next/generated/editor/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");
+}
+
+// ../../tools/migrate-html-next/generated/adoption/editor/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    <event name="looma-editor-insert-table" 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="looma-editor-mention-menu-highlight" type="object({ index: integer })"></event>\n    <event name="looma-editor-mention-menu-select" type="object({ index: integer })"></event>\n  </defs>\n  <div .items="items" .anchorRect="anchorRect"></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="looma-editor-slash-menu-highlight" type="object({ index: integer })"></event>\n    <event name="looma-editor-slash-menu-select" type="object({ index: integer })"></event>\n  </defs>\n  <div .items="items" .anchorRect="anchorRect"></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="Looma ui-editor-table-context-menu editor surface." controller="./controllers/ui-editor-table-context-menu.js">\n  <defs>\n    <prop name="open" type="boolean" default="false">open value.</prop>\n    <prop name="cellBackground" type="string" default="">cellBackground value.</prop>\n    <prop name="canAddRowBefore" type="boolean" default="false">canAddRowBefore value.</prop>\n    <prop name="canAddRowAfter" type="boolean" default="false">canAddRowAfter value.</prop>\n    <prop name="canAddColumnBefore" type="boolean" default="false">canAddColumnBefore value.</prop>\n    <prop name="canAddColumnAfter" type="boolean" default="false">canAddColumnAfter value.</prop>\n    <prop name="canDeleteRow" type="boolean" default="false">canDeleteRow value.</prop>\n    <prop name="canDeleteColumn" type="boolean" default="false">canDeleteColumn value.</prop>\n    <prop name="canDeleteTable" type="boolean" default="false">canDeleteTable value.</prop>\n    <prop name="canMergeCells" type="boolean" default="false">canMergeCells value.</prop>\n    <prop name="canSplitCell" type="boolean" default="false">canSplitCell value.</prop>\n    <event name="looma-editor-table-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="Looma ui-editor-table-overlay editor surface." controller="./controllers/ui-editor-table-overlay.js">\n  <defs>\n    <prop name="open" type="boolean" default="false">open value.</prop>\n    <prop name="rows" type="integer" default="3">rows value.</prop>\n    <prop name="cols" type="integer" default="3">cols value.</prop>\n    <prop name="rowBoundaries" type="string | list(number)">rowBoundaries value.</prop>\n    <prop name="columnBoundaries" type="string | list(number)">columnBoundaries value.</prop>\n    <prop name="activeCell" type="string | list(number)">activeCell value.</prop>\n    <prop name="hoveredCell" type="string | list(number)">hoveredCell value.</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">geometry value.</prop>\n    <event name="looma-editor-table-overlay-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 .geometry="geometry"></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="Looma ui-editor-table-toolbar editor surface." controller="./controllers/ui-editor-table-toolbar.js">\n  <defs>\n    <prop name="open" type="boolean" default="false">open value.</prop>\n    <prop name="cellAlignment" type="left | center | right" default="left">cellAlignment value.</prop>\n    <prop name="cellBackground" type="string" default="">cellBackground value.</prop>\n    <prop name="canAddRowBefore" type="boolean" default="false">canAddRowBefore value.</prop>\n    <prop name="canAddRowAfter" type="boolean" default="false">canAddRowAfter value.</prop>\n    <prop name="canAddColumnBefore" type="boolean" default="false">canAddColumnBefore value.</prop>\n    <prop name="canAddColumnAfter" type="boolean" default="false">canAddColumnAfter value.</prop>\n    <prop name="canDeleteRow" type="boolean" default="false">canDeleteRow value.</prop>\n    <prop name="canDeleteColumn" type="boolean" default="false">canDeleteColumn value.</prop>\n    <prop name="canDeleteTable" type="boolean" default="false">canDeleteTable value.</prop>\n    <prop name="canMergeCells" type="boolean" default="false">canMergeCells value.</prop>\n    <prop name="canSplitCell" type="boolean" default="false">canSplitCell value.</prop>\n    <event name="looma-editor-table-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__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("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("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(
+        "looma-editor-table-overlay-action",
+        { detail, bubbles: true, composed: true }
+      ));
+    }
+    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
+};