@threadlabs/looma 0.2.19 → 0.3.0

package/dist/loader.js

@@ -1,10 +1,10 @@
 import {
   records,
   styles
-} from "./chunk-A5MSXQ7Y.js";
+} from "./chunk-3NVMCHGR.js";
 import {
   registerLoomaPackage
-} from "./chunk-ECJQ4YGC.js";
+} from "./chunk-XDNZIKNI.js";
 import "./chunk-MLKGABMK.js";
 
 // src/loader.ts

package/editor/{chunk-WI7ZA44X.js → chunk-U36XNFJN.js}

@@ -5,7 +5,7 @@ import {
 // src/ui.ts
 import { registerLoomaPackage } from "@threadlabs/looma/core/declarative";
 
-// ../../tools/migrate-html-next/generated/editor/components/controllers/ui-editor-insert-table-grid.js
+// src/declarative/components/controllers/ui-editor-insert-table-grid.js
 var ui_editor_insert_table_grid_exports = {};
 __export(ui_editor_insert_table_grid_exports, {
   default: () => controller
@@ -20,7 +20,8 @@ function controller(host) {
   let selectedCols = 3;
   let previewRows = null;
   let previewCols = null;
-  let withHeaderRow = true;
+  let lastHeaderRow = Boolean(host.state.headerRow);
+  let withHeaderRow = lastHeaderRow;
   let selectionCommitted = false;
   const updateSelection = () => {
     const activeRows = previewRows ?? selectedRows;
@@ -34,6 +35,11 @@ function controller(host) {
     }
   };
   const render = () => {
+    const configuredHeaderRow = Boolean(host.state.headerRow);
+    if (configuredHeaderRow !== lastHeaderRow) {
+      lastHeaderRow = configuredHeaderRow;
+      withHeaderRow = configuredHeaderRow;
+    }
     element.hidden = !host.state.open;
     if (!host.state.open) return;
     const maxRows = bounded(host.state.maxRows, 8);
@@ -65,7 +71,7 @@ function controller(host) {
       return;
     }
     if (event.target.closest?.("[data-insert-table]")) {
-      host.dispatch("looma-editor-insert-table", { rows: selectedRows, cols: selectedCols, withHeaderRow });
+      host.dispatch("insert", { rows: selectedRows, cols: selectedCols, withHeaderRow });
     }
   };
   const onMouseover = (event) => {
@@ -98,13 +104,13 @@ function controller(host) {
   };
 }
 
-// ../../tools/migrate-html-next/generated/editor/components/controllers/ui-editor-mention-menu.js
+// src/declarative/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
+// src/declarative/components/controllers/shared/editor.js
 var backgrounds = [
   ["background-none", "Default", ""],
   ["background-gray", "Gray", "#f3f4f6"],
@@ -168,7 +174,7 @@ function viewport() {
   return { left, top, width, height, right: left + width, bottom: top + height };
 }
 
-// ../../tools/migrate-html-next/generated/editor/components/controllers/ui-editor-mention-menu.js
+// src/declarative/components/controllers/ui-editor-mention-menu.js
 function controller2(host) {
   const element = host.element;
   let selectedIndex = Number(host.state.selectedIndex ?? 0);
@@ -220,7 +226,7 @@ function controller2(host) {
   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) });
+    if (option) host.dispatch("select", { index: Number(option.dataset.index) });
   };
   const onMouseover = (event) => {
     const option = event.target.closest?.("[data-index]");
@@ -228,7 +234,7 @@ function controller2(host) {
     if (!Number.isFinite(index) || index === selectedIndex) return;
     selectedIndex = index;
     syncSelection();
-    host.dispatch("looma-editor-mention-menu-highlight", { index });
+    host.dispatch("highlight", { index });
   };
   const onViewport = () => {
     if (host.state.open) position();
@@ -256,7 +262,7 @@ function controller2(host) {
   };
 }
 
-// ../../tools/migrate-html-next/generated/editor/components/controllers/ui-editor-slash-menu.js
+// src/declarative/components/controllers/ui-editor-slash-menu.js
 var ui_editor_slash_menu_exports = {};
 __export(ui_editor_slash_menu_exports, {
   default: () => controller3
@@ -308,7 +314,7 @@ function controller3(host) {
   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) });
+    if (option) host.dispatch("select", { index: Number(option.dataset.index) });
   };
   const onMouseover = (event) => {
     const option = event.target.closest?.("[data-index]");
@@ -316,7 +322,7 @@ function controller3(host) {
     if (!Number.isFinite(index) || index === selectedIndex) return;
     selectedIndex = index;
     syncSelection();
-    host.dispatch("looma-editor-slash-menu-highlight", { index });
+    host.dispatch("highlight", { index });
   };
   const onViewport = () => {
     if (host.state.open) position();
@@ -344,27 +350,27 @@ function controller3(host) {
   };
 }
 
-// ../../tools/migrate-html-next/generated/editor/components/controllers/ui-editor-table-context-menu.js
+// src/declarative/components/controllers/ui-editor-table-context-menu.js
 var ui_editor_table_context_menu_exports = {};
 __export(ui_editor_table_context_menu_exports, {
   default: () => controller4
 });
 var sections = [
   ["Structure", [
-    ["add-row-before", "Add row above", "panel-top", "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"]
+    ["add-row-before", "Add row above", "panel-top"],
+    ["add-row-after", "Add row below", "panel-bottom"],
+    ["add-column-before", "Add column left", "panel-left"],
+    ["add-column-after", "Add column right", "panel-right"]
   ]],
   ["Cells", [
     ["clear-cells", "Clear selected cells", "eraser"],
-    ["merge-cells", "Merge cells", "merge", "canMergeCells"],
-    ["split-cell", "Split cell", "split", "canSplitCell"]
+    ["merge-cells", "Merge cells", "merge"],
+    ["split-cell", "Split cell", "split"]
   ]],
   ["Table", [
-    ["delete-row", "Delete row", "trash", "canDeleteRow", "danger"],
-    ["delete-column", "Delete column", "trash", "canDeleteColumn", "danger"],
-    ["delete-table", "Delete table", "trash", "canDeleteTable", "danger"]
+    ["delete-row", "Delete row", "trash", "danger"],
+    ["delete-column", "Delete column", "trash", "danger"],
+    ["delete-table", "Delete table", "trash", "danger"]
   ]]
 ];
 function controller4(host) {
@@ -393,24 +399,25 @@ function controller4(host) {
   const render = () => {
     element.hidden = !host.state.open;
     if (!host.state.open) return;
+    const enabled = new Set(Array.isArray(host.state.actions) ? host.state.actions : []);
     const background = String(host.state.cellBackground ?? "");
     const rendered = [];
-    const swatches = backgrounds.map(([action, label, swatch]) => {
+    const swatches = backgrounds.filter(([action]) => enabled.has(action)).map(([action, label, swatch]) => {
       const selected = swatch === background;
       return `<button type="button" class="ui-editor-table-context-menu__swatch-button" role="menuitemradio" aria-checked="${selected}" data-action="${action}"${selected ? ' data-selected="true"' : ""}><span class="ui-editor-table-context-menu__swatch${swatch ? "" : " ui-editor-table-context-menu__swatch--default"}"${swatch ? ` style="--ui-editor-table-context-swatch:${swatch}"` : ""}></span><span class="ui-editor-table-context-menu__swatch-label">${label}</span></button>`;
     }).join("");
-    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>`);
+    if (swatches) rendered.push(`<div class="ui-editor-table-context-menu__section" role="none"><div class="ui-editor-table-context-menu__heading" role="presentation">Cell background</div><div class="ui-editor-table-context-menu__swatches" role="group" aria-label="Cell background">${swatches}</div></div>`);
     for (const [heading, actions] of sections) {
-      const available = actions.filter(([, , , capability]) => !capability || host.state[capability]);
+      const available = actions.filter(([action]) => enabled.has(action));
       if (!available.length) continue;
-      rendered.push(`<div class="ui-editor-table-context-menu__sep"></div><div class="ui-editor-table-context-menu__section" role="none"><div class="ui-editor-table-context-menu__heading" role="presentation">${heading}</div>${available.map(([action, label, iconName, , tone]) => `<button type="button" role="menuitem" data-action="${action}"${tone ? ` data-tone="${tone}"` : ""}>${icon(iconName)}<span>${label}</span></button>`).join("")}</div>`);
+      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 });
+    if (action) host.dispatch("action", { action });
   };
   element.addEventListener("click", onClick);
   window.addEventListener("resize", schedule);
@@ -428,28 +435,14 @@ function controller4(host) {
   };
 }
 
-// ../../tools/migrate-html-next/generated/editor/components/controllers/ui-editor-table-overlay.js
+// src/declarative/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;
@@ -517,13 +510,12 @@ function controller5(host) {
   const element = host.element;
   let activeControlKey = null;
   const proximity = createProximity(element);
-  const boundaries = (axis, segments) => {
+  const boundaries = (axis) => {
     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 values = geometry?.[axis === "row" ? "rowBoundaries" : "columnBoundaries"];
+    if (Array.isArray(values) && values.length >= 2 && values.every(Number.isFinite)) return values;
     const rect = element.getBoundingClientRect();
-    return fallbackBoundaries(segments, axis === "row" ? rect.height : rect.width);
+    return fallbackBoundaries(3, axis === "row" ? rect.height : rect.width);
   };
   const insertion = (axis, index, position) => {
     const first = index === 0;
@@ -545,13 +537,11 @@ function controller5(host) {
       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 rowBoundaries = boundaries("row");
+    const columnBoundaries = boundaries("column");
     const geometry = host.state.geometry;
-    const active = geometry?.activeCell ?? cellFrom(host.state.activeCell);
-    const hovered = geometry?.hoveredCell ?? cellFrom(host.state.hoveredCell);
+    const active = geometry?.activeCell ?? null;
+    const hovered = geometry?.hoveredCell ?? null;
     element.innerHTML = `<div class="ui-editor-table-overlay" aria-label="Table controls"><div class="ui-editor-table-overlay__rows">${rowBoundaries.map((position, index) => insertion("row", index, position)).join("")}</div><div class="ui-editor-table-overlay__cols">${columnBoundaries.map((position, index) => insertion("col", index, position)).join("")}</div>${hovered ? selectors(hovered) : ""}${active ? menu(active) : ""}</div>`;
     proximity.refresh();
   };
@@ -565,15 +555,15 @@ function controller5(host) {
     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) });
+      host.dispatch("action", { action, rowIndex: Number(button.dataset.rowIndex), columnIndex: Number(button.dataset.columnIndex) });
       return;
     }
     if (action === "open-cell-menu") {
       const rect = button.getBoundingClientRect();
-      host.dispatch("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 } });
+      host.dispatch("action", { action, rowIndex: Number(button.dataset.rowIndex), columnIndex: Number(button.dataset.columnIndex), anchor: { left: rect.left, top: rect.top, right: rect.right, bottom: rect.bottom } });
       return;
     }
-    host.dispatch("looma-editor-table-overlay-action", { action, boundaryIndex: Number(button.dataset.boundaryIndex) });
+    host.dispatch("action", { action, boundaryIndex: Number(button.dataset.boundaryIndex) });
   };
   const enter = (event) => setActive(event.target.closest?.("[data-control-key]")?.dataset.controlKey ?? null);
   const leave = (event) => setActive(event.relatedTarget instanceof Element ? event.relatedTarget.closest?.("[data-control-key]")?.dataset.controlKey ?? null : null);
@@ -595,15 +585,15 @@ function controller5(host) {
   };
 }
 
-// ../../tools/migrate-html-next/generated/editor/components/controllers/ui-editor-table-toolbar.js
+// src/declarative/components/controllers/ui-editor-table-toolbar.js
 var ui_editor_table_toolbar_exports = {};
 __export(ui_editor_table_toolbar_exports, {
   default: () => controller6
 });
 var overflowSections = [
-  ["Structure", [["add-row-before", "Add row above", "panel-top", "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"]]]
+  ["Structure", [["add-row-before", "Add row above", "panel-top"], ["add-column-before", "Add column left", "panel-left"]]],
+  ["Cells", [["clear-cells", "Clear selected cells", "eraser"], ["merge-cells", "Merge selected cells", "merge"], ["split-cell", "Split merged cell", "split"]]],
+  ["Table", [["delete-row", "Delete row", "trash", "danger"], ["delete-column", "Delete column", "trash", "danger"], ["delete-table", "Delete table", "trash", "danger"]]]
 ];
 function controller6(host) {
   const element = host.element;
@@ -614,18 +604,24 @@ function controller6(host) {
       overflowOpen = false;
       return;
     }
+    const enabled = new Set(Array.isArray(host.state.actions) ? host.state.actions : []);
     const active = `align-${host.state.cellAlignment === "center" || host.state.cellAlignment === "right" ? host.state.cellAlignment : "left"}`;
-    const alignments = [["align-left", "Align left"], ["align-center", "Align center"], ["align-right", "Align right"]];
-    const structure = [["add-row-after", "Add row", "rows", "canAddRowAfter"], ["add-column-after", "Add column", "columns", "canAddColumnAfter"]].filter(([, , , capability]) => host.state[capability]);
+    const alignments = [["align-left", "Align left"], ["align-center", "Align center"], ["align-right", "Align right"]].filter(([action]) => enabled.has(action));
+    const structure = [["add-row-after", "Add row", "rows"], ["add-column-after", "Add column", "columns"]].filter(([action]) => enabled.has(action));
     const background = String(host.state.cellBackground ?? "");
-    const 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 backgroundActions = backgrounds.filter(([action]) => enabled.has(action));
+    const overflowGroups = overflowSections.map(([heading, actions]) => [heading, actions.filter(([action]) => enabled.has(action))]);
+    const hasOverflow = backgroundActions.length > 0 || overflowGroups.some(([, actions]) => actions.length > 0);
+    if (!hasOverflow) overflowOpen = false;
+    const menu = overflowOpen ? `<div class="ui-editor-table-toolbar__menu" role="menu" aria-label="More table actions">${backgroundActions.length ? `<div class="ui-editor-table-toolbar__menu-section" role="none"><div class="ui-editor-table-toolbar__menu-heading" role="presentation">Background</div><div class="ui-editor-table-toolbar__swatches" role="group" aria-label="Cell background">${backgroundActions.map(([action, label, swatch]) => {
       const selected = swatch === background;
       return `<button type="button" class="ui-editor-table-toolbar__swatch-button" role="menuitemradio" aria-checked="${selected}" data-action="${action}"${selected ? ' data-selected="true"' : ""}><span class="ui-editor-table-toolbar__swatch${swatch ? "" : " ui-editor-table-toolbar__swatch--default"}"${swatch ? ` style="--ui-editor-table-toolbar-swatch:${swatch}"` : ""}></span><span>${label}</span></button>`;
-    }).join("")}</div></div>${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>`;
+    }).join("")}</div></div>` : ""}${overflowGroups.map(([heading, actions]) => actions.length ? `<div class="ui-editor-table-toolbar__menu-section ui-editor-table-toolbar__menu-section--divided" role="none"><div class="ui-editor-table-toolbar__menu-heading" role="presentation">${heading}</div>${actions.map(([action, label, iconName, tone]) => `<button type="button" role="menuitem" data-action="${action}"${tone ? ` data-tone="${tone}"` : ""}>${icon(iconName)}<span>${label}</span></button>`).join("")}</div>` : "").join("")}</div>` : "";
+    const groups = [];
+    if (alignments.length) groups.push(`<div class="ui-editor-table-toolbar__group" role="group" aria-label="Cell alignment">${alignments.map(([action, label]) => `<button type="button" class="ui-editor-table-toolbar__icon-button" data-action="${action}" aria-label="${label}" title="${label}" aria-pressed="${action === active}" data-active="${action === active}">${icon(action)}</button>`).join("")}</div>`);
+    if (structure.length) groups.push(`<div class="ui-editor-table-toolbar__group" role="group" aria-label="Table structure">${structure.map(([action, label, iconName]) => `<button type="button" data-action="${action}">${icon(iconName)}<span>${label}</span></button>`).join("")}</div>`);
+    if (hasOverflow) groups.push(`<div class="ui-editor-table-toolbar__overflow"><button type="button" class="ui-editor-table-toolbar__more" data-action="toggle-overflow" aria-haspopup="menu" aria-expanded="${overflowOpen}">${icon("table")}<span>Table options</span>${icon("chevron-down", "looma-icon looma-icon--chevron")}</button>${menu}</div>`);
+    element.innerHTML = `<div class="ui-editor-table-toolbar" role="toolbar" aria-label="Table actions">${groups.join('<div class="ui-editor-table-toolbar__sep" aria-hidden="true"></div>')}</div>`;
   };
   const onClick = (event) => {
     const action = event.target.closest?.("[data-action]")?.dataset.action;
@@ -637,7 +633,7 @@ function controller6(host) {
     }
     overflowOpen = false;
     render();
-    host.dispatch("looma-editor-table-action", { action });
+    host.dispatch("action", { action });
   };
   const onOutside = (event) => {
     if (!overflowOpen || event.composedPath().includes(element)) return;
@@ -655,7 +651,7 @@ function controller6(host) {
   };
 }
 
-// ../../tools/migrate-html-next/generated/editor/components/controllers/ui-editor-toolbar.js
+// src/declarative/components/controllers/ui-editor-toolbar.js
 var ui_editor_toolbar_exports = {};
 __export(ui_editor_toolbar_exports, {
   default: () => controller7
@@ -666,14 +662,14 @@ function controller7(host) {
   if (!element.hasAttribute("aria-label")) element.setAttribute("aria-label", "Editor toolbar");
 }
 
-// ../../tools/migrate-html-next/generated/adoption/editor/registry.js
+// src/declarative/registry.js
 var records = [
-  { tag: "ui-editor-insert-table-grid", source: '<template component="ui-editor-insert-table-grid" status="early" summary="Looma ui-editor-insert-table-grid editor surface." controller="./controllers/ui-editor-insert-table-grid.js">\n  <defs>\n    <prop name="open" type="boolean" default="false">open value.</prop>\n    <prop name="maxRows" type="integer" default="8">maxRows value.</prop>\n    <prop name="maxCols" type="integer" default="8">maxCols value.</prop>\n    <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-insert-table-grid", source: '<template component="ui-editor-insert-table-grid" status="early" summary="Looma ui-editor-insert-table-grid editor surface." controller="./controllers/ui-editor-insert-table-grid.js">\n  <defs>\n    <prop name="open" type="boolean" default="false">open value.</prop>\n    <prop name="maxRows" type="integer" default="8">maxRows value.</prop>\n    <prop name="maxCols" type="integer" default="8">maxCols value.</prop>\n    <prop name="headerRow" type="boolean" default="false">Whether table insertion initially includes a header row.</prop>\n    <event name="insert" type="object({ rows: integer, cols: integer, withHeaderRow: boolean })"></event>\n  </defs>\n  <div></div>\n</template>\n', controller: ui_editor_insert_table_grid_exports },
+  { tag: "ui-editor-mention-menu", source: '<template component="ui-editor-mention-menu" status="early" summary="Looma ui-editor-mention-menu editor surface." controller="./controllers/ui-editor-mention-menu.js">\n  <defs>\n    <prop name="open" type="boolean" default="false">open value.</prop>\n    <prop name="query" type="string" default="">query value.</prop>\n    <prop name="items" type="list(object({ id: string, label: string, detail?: string, initials?: string }))">items value.</prop>\n    <prop name="selectedIndex" type="integer" default="0">selectedIndex value.</prop>\n    <prop name="loading" type="boolean" default="false">loading value.</prop>\n    <prop name="anchorRect" type="object({ left?: number, top?: number, right?: number, bottom?: number, x?: number, y?: number, width?: number, height?: number }) | null">anchorRect value.</prop>\n    <event name="highlight" type="object({ index: integer })"></event>\n    <event name="select" type="object({ index: integer })"></event>\n  </defs>\n  <div></div>\n</template>\n', controller: ui_editor_mention_menu_exports },
+  { tag: "ui-editor-slash-menu", source: '<template component="ui-editor-slash-menu" status="early" summary="Looma ui-editor-slash-menu editor surface." controller="./controllers/ui-editor-slash-menu.js">\n  <defs>\n    <prop name="open" type="boolean" default="false">open value.</prop>\n    <prop name="query" type="string" default="">query value.</prop>\n    <prop name="items" type="list(object({ title: string, description: string, icon: string }))">items value.</prop>\n    <prop name="selectedIndex" type="integer" default="0">selectedIndex value.</prop>\n    <prop name="anchorRect" type="object({ left?: number, top?: number, right?: number, bottom?: number, x?: number, y?: number, width?: number, height?: number }) | null">anchorRect value.</prop>\n    <event name="highlight" type="object({ index: integer })"></event>\n    <event name="select" type="object({ index: integer })"></event>\n  </defs>\n  <div></div>\n</template>\n', controller: ui_editor_slash_menu_exports },
+  { tag: "ui-editor-table-context-menu", source: '<template component="ui-editor-table-context-menu" status="early" summary="Presents the table commands an editor explicitly enables for the current cell selection." controller="./controllers/ui-editor-table-context-menu.js">\n  <defs>\n    <prop name="open" type="boolean" default="false">Shows the menu at the position owned by the editor integration.</prop>\n    <prop name="cellBackground" type="string" default="">Identifies the background choice that is active for the current cell.</prop>\n    <prop name="actions" type="list(align-left | align-center | align-right | background-none | background-gray | background-yellow | background-blue | background-green | background-red | add-row-before | add-row-after | add-column-before | add-column-after | clear-cells | merge-cells | split-cell | delete-row | delete-column | delete-table)">The complete set of commands the current selection permits; omitted commands are not rendered.</prop>\n    <event name="action" type="object({ action: string })"></event>\n  </defs>\n  <div></div>\n</template>\n', controller: ui_editor_table_context_menu_exports },
+  { tag: "ui-editor-table-overlay", source: '<template component="ui-editor-table-overlay" status="early" summary="Projects editor-measured table geometry into insertion, selection, and cell-action controls without owning document mutations." controller="./controllers/ui-editor-table-overlay.js">\n  <defs>\n    <prop name="open" type="boolean" default="false">Shows the controls after the editor has supplied current geometry.</prop>\n    <prop name="geometry" type="object({ rowBoundaries: list(number), columnBoundaries: list(number), activeCell: object({ left: number, top: number, width: number, height: number, rowIndex: integer, columnIndex: integer }) | null, hoveredCell?: object({ left: number, top: number, width: number, height: number, rowIndex: integer, columnIndex: integer }) | null }) | null">The authoritative editor-measured table boundaries and active or hovered cell rectangles.</prop>\n    <event name="action" type="object({ action: string, boundaryIndex?: integer, rowIndex?: integer, columnIndex?: integer, anchor?: object({ left: number, top: number, right: number, bottom: number }) })"></event>\n  </defs>\n  <div></div>\n</template>\n', controller: ui_editor_table_overlay_exports },
+  { tag: "ui-editor-table-toolbar", source: '<template component="ui-editor-table-toolbar" status="early" summary="Offers selection-aware table commands without deciding which mutations the editor performs." controller="./controllers/ui-editor-table-toolbar.js">\n  <defs>\n    <prop name="open" type="boolean" default="false">Shows the toolbar while a table selection is active.</prop>\n    <prop name="cellAlignment" type="left | center | right" default="left">Marks the alignment command that is active for the current cell.</prop>\n    <prop name="cellBackground" type="string" default="">Identifies the background choice that is active for the current cell.</prop>\n    <prop name="actions" type="list(align-left | align-center | align-right | background-none | background-gray | background-yellow | background-blue | background-green | background-red | add-row-before | add-row-after | add-column-before | add-column-after | clear-cells | merge-cells | split-cell | delete-row | delete-column | delete-table)">The complete set of commands the current selection permits; omitted commands are not rendered.</prop>\n    <event name="action" type="object({ action: string })"></event>\n  </defs>\n  <div></div>\n</template>\n', controller: ui_editor_table_toolbar_exports },
   { tag: "ui-editor-toolbar", source: '<template component="ui-editor-toolbar" status="early" summary="Looma ui-editor-toolbar editor surface." controller="./controllers/ui-editor-toolbar.js">\n  <defs>\n\n  </defs>\n  <div><slot></slot></div>\n</template>\n', controller: ui_editor_toolbar_exports }
 ];
 var styles = `/**
@@ -983,6 +979,38 @@ var styles = `/**
   stroke-width: var(--ui-editor-toolbar-icon-stroke-width, 1.75);
 }
 
+.looma-editor__sticky-toolbar-shell {
+  position: sticky;
+  top: var(--ui-editor-sticky-toolbar-top, 0);
+  z-index: var(--ui-editor-toolbar-z-index, 10);
+  min-width: 0;
+  background: var(--ui-editor-toolbar-bg, var(--ui-surface, #fff));
+  border-bottom: 1px solid var(--ui-editor-toolbar-border, var(--ui-border, #e5e7eb));
+}
+
+.looma-editor__sticky-toolbar-shell [data-component-root~="ui-editor-toolbar"] {
+  display: flex;
+  align-items: center;
+  justify-content: flex-start;
+  gap: var(--ui-editor-toolbar-gap, 2px);
+  min-height: var(--ui-editor-toolbar-min-height, 48px);
+  padding:
+    var(--ui-editor-toolbar-padding-block, 6px)
+    var(--ui-editor-toolbar-padding-inline, 12px);
+  overflow-x: auto;
+  overscroll-behavior-inline: contain;
+  scrollbar-width: none;
+  white-space: nowrap;
+}
+
+.looma-editor__sticky-toolbar-shell [data-component-root~="ui-editor-toolbar"]::-webkit-scrollbar {
+  display: none;
+}
+
+.looma-editor__sticky-toolbar-shell [data-component-root~="ui-editor-toolbar"] > * {
+  flex: 0 0 auto;
+}
+
 .looma-editor__table-picker-popover,
 .looma-editor__table-toolbar-shell,
 .looma-editor__table-menu-shell {
@@ -2360,6 +2388,7 @@ if (typeof HTMLElement !== "undefined") {
       this.#rows = this.#readBoundedNumber("rows", DEFAULT_ROWS);
       this.#cols = this.#readBoundedNumber("cols", DEFAULT_COLS);
       this.render();
+      this.addEventListener("mousedown", this.onMouseDown);
       this.addEventListener("click", this.onClick);
       this.addEventListener("pointerover", this.onPointerOver);
       this.addEventListener("pointerout", this.onPointerOut);
@@ -2371,6 +2400,7 @@ if (typeof HTMLElement !== "undefined") {
       });
     }
     disconnectedCallback() {
+      this.removeEventListener("mousedown", this.onMouseDown);
       this.removeEventListener("click", this.onClick);
       this.removeEventListener("pointerover", this.onPointerOver);
       this.removeEventListener("pointerout", this.onPointerOut);
@@ -2423,10 +2453,14 @@ if (typeof HTMLElement !== "undefined") {
     }
     dispatch(detail) {
       this.dispatchEvent(new CustomEvent(
-        "looma-editor-table-overlay-action",
+        "action",
         { detail, bubbles: true, composed: true }
       ));
     }
+    onMouseDown = (event) => {
+      const target = event.target instanceof Element ? event.target.closest("button[data-action]") : null;
+      if (target) event.preventDefault();
+    };
     onClick = (event) => {
       const target = event.target.closest("button[data-action]");
       if (!target) return;