@threadlabs/looma 0.1.11 → 0.1.12

package/editor/{chunk-F4AYF33M.js → chunk-OHD4OS32.js}

@@ -6010,7 +6010,7 @@ function getDefaultSlashCommands(onOpenImagePicker) {
     {
       title: "Text",
       description: "Plain paragraph",
-      icon: "\xB6",
+      icon: "pilcrow",
       keywords: ["text", "paragraph", "plain", "p"],
       command: ({ editor, range }) => {
         editor.chain().focus().deleteRange(range).setParagraph().run();
@@ -6019,7 +6019,7 @@ function getDefaultSlashCommands(onOpenImagePicker) {
     ...[1, 2, 3].map((level) => ({
       title: `Heading ${level}`,
       description: level === 1 ? "Big section title" : level === 2 ? "Medium section title" : "Small section title",
-      icon: `H${level}`,
+      icon: `heading-${level}`,
       keywords: [`h${level}`, "heading", "title"],
       command: ({ editor, range }) => {
         editor.chain().focus().deleteRange(range).setHeading({ level }).run();
@@ -6028,7 +6028,7 @@ function getDefaultSlashCommands(onOpenImagePicker) {
     {
       title: "Bullet list",
       description: "Unordered list",
-      icon: "\u2022",
+      icon: "list",
       keywords: ["bullet", "list", "ul", "unordered"],
       command: ({ editor, range }) => {
         editor.chain().focus().deleteRange(range).toggleBulletList().run();
@@ -6037,7 +6037,7 @@ function getDefaultSlashCommands(onOpenImagePicker) {
     {
       title: "Numbered list",
       description: "Ordered list",
-      icon: "1.",
+      icon: "list-ordered",
       keywords: ["numbered", "ordered", "list", "ol"],
       command: ({ editor, range }) => {
         editor.chain().focus().deleteRange(range).toggleOrderedList().run();
@@ -6046,7 +6046,7 @@ function getDefaultSlashCommands(onOpenImagePicker) {
     {
       title: "Checklist",
       description: "Interactive to-do items",
-      icon: "\u2611",
+      icon: "list-todo",
       keywords: ["check", "task", "todo", "checklist"],
       command: ({ editor, range }) => {
         editor.chain().focus().deleteRange(range).toggleTaskList().run();
@@ -6055,7 +6055,7 @@ function getDefaultSlashCommands(onOpenImagePicker) {
     {
       title: "Blockquote",
       description: "Highlighted quote",
-      icon: '"',
+      icon: "quote",
       keywords: ["quote", "blockquote", "callout"],
       command: ({ editor, range }) => {
         editor.chain().focus().deleteRange(range).toggleBlockquote().run();
@@ -6064,7 +6064,7 @@ function getDefaultSlashCommands(onOpenImagePicker) {
     {
       title: "Inline code",
       description: "Monospace code span",
-      icon: "`",
+      icon: "code-xml",
       keywords: ["code", "inline", "monospace"],
       command: ({ editor, range }) => {
         editor.chain().focus().deleteRange(range).toggleCode().run();
@@ -6073,7 +6073,7 @@ function getDefaultSlashCommands(onOpenImagePicker) {
     {
       title: "Code block",
       description: "Formatted code block",
-      icon: "<>",
+      icon: "braces",
       keywords: ["codeblock", "pre", "syntax", "snippet"],
       command: ({ editor, range }) => {
         editor.chain().focus().deleteRange(range).toggleCodeBlock().run();
@@ -6082,7 +6082,7 @@ function getDefaultSlashCommands(onOpenImagePicker) {
     {
       title: "Table",
       description: "Insert a table",
-      icon: "\u229E",
+      icon: "table",
       keywords: ["table", "grid", "rows", "columns"],
       command: ({ editor, range }) => {
         insertTableAtRange(editor, range);
@@ -6091,7 +6091,7 @@ function getDefaultSlashCommands(onOpenImagePicker) {
     {
       title: "Divider",
       description: "Horizontal rule",
-      icon: "\u2014",
+      icon: "minus",
       keywords: ["divider", "hr", "rule", "line"],
       command: ({ editor, range }) => {
         editor.chain().focus().deleteRange(range).setHorizontalRule().run();
@@ -6100,7 +6100,7 @@ function getDefaultSlashCommands(onOpenImagePicker) {
     {
       title: "Image",
       description: "Upload an image",
-      icon: "\u25A7",
+      icon: "image",
       keywords: ["image", "photo", "picture", "upload"],
       command: ({ editor, range }) => {
         editor.chain().focus().deleteRange(range).run();

package/editor/{chunk-4VGVEHU2.js → chunk-RTHHTPWK.js}

@@ -3,7 +3,11 @@ import {
 } from "./chunk-CX4QDKSV.js";
 
 // src/table-context-menu.ts
-import { clampRectToViewport, getVisualViewportRect } from "@threadlabs/looma/core";
+import {
+  clampRectToViewport,
+  getVisualViewportRect,
+  loomaIconMarkup
+} from "@threadlabs/looma/core";
 var TAG = "ui-editor-table-context-menu";
 function dispatchTableAction(element, action) {
   element.dispatchEvent(
@@ -96,26 +100,26 @@ if (typeof HTMLElement !== "undefined") {
         {
           heading: "Structure",
           actions: [
-            { action: "add-row-before", label: "Add row above", can: "can-add-row-before" },
-            { action: "add-row-after", label: "Add row below", can: "can-add-row-after" },
-            { action: "add-column-before", label: "Add column left", can: "can-add-column-before" },
-            { action: "add-column-after", label: "Add column right", can: "can-add-column-after" }
+            { action: "add-row-before", label: "Add row above", icon: "panel-top", can: "can-add-row-before" },
+            { action: "add-row-after", label: "Add row below", icon: "panel-bottom", can: "can-add-row-after" },
+            { action: "add-column-before", label: "Add column left", icon: "panel-left", can: "can-add-column-before" },
+            { action: "add-column-after", label: "Add column right", icon: "panel-right", can: "can-add-column-after" }
           ]
         },
         {
           heading: "Cells",
           actions: [
-            { action: "clear-cells", label: "Clear selected cells" },
-            { action: "merge-cells", label: "Merge cells", can: "can-merge-cells" },
-            { action: "split-cell", label: "Split cell", can: "can-split-cell" }
+            { action: "clear-cells", label: "Clear selected cells", icon: "eraser" },
+            { action: "merge-cells", label: "Merge cells", icon: "merge", can: "can-merge-cells" },
+            { action: "split-cell", label: "Split cell", icon: "split", can: "can-split-cell" }
           ]
         },
         {
           heading: "Table",
           actions: [
-            { action: "delete-row", label: "Delete row", can: "can-delete-row", tone: "danger" },
-            { action: "delete-column", label: "Delete column", can: "can-delete-column", tone: "danger" },
-            { action: "delete-table", label: "Delete table", can: "can-delete-table", tone: "danger" }
+            { action: "delete-row", label: "Delete row", icon: "trash", can: "can-delete-row", tone: "danger" },
+            { action: "delete-column", label: "Delete column", icon: "trash", can: "can-delete-column", tone: "danger" },
+            { action: "delete-table", label: "Delete table", icon: "trash", can: "can-delete-table", tone: "danger" }
           ]
         }
       ];
@@ -145,7 +149,7 @@ if (typeof HTMLElement !== "undefined") {
         } else {
           section.actions.forEach((action) => {
             const tone = "tone" in action ? action.tone : void 0;
-            html += `<button type="button" role="menuitem" data-action="${action.action}"${tone ? ` data-tone="${tone}"` : ""}>${action.label}</button>`;
+            html += `<button type="button" role="menuitem" data-action="${action.action}"${tone ? ` data-tone="${tone}"` : ""}>${loomaIconMarkup(action.icon)}<span>${action.label}</span></button>`;
           });
         }
         html += "</div>";
@@ -161,6 +165,7 @@ if (typeof HTMLElement !== "undefined") {
 }
 
 // src/table-toolbar.ts
+import { loomaIconMarkup as loomaIconMarkup2 } from "@threadlabs/looma/core";
 var TAG2 = "ui-editor-table-toolbar";
 function dispatchTableAction2(element, action) {
   element.dispatchEvent(
@@ -257,36 +262,36 @@ if (typeof HTMLElement !== "undefined") {
       const activeAlignment = this.getAlignmentAttr();
       const currentBackground = this.getAttribute("cell-background");
       const alignmentActions = [
-        { action: "align-left", label: "Left" },
-        { action: "align-center", label: "Center" },
-        { action: "align-right", label: "Right" }
+        { action: "align-left", label: "Align left", icon: "align-left" },
+        { action: "align-center", label: "Align center", icon: "align-center" },
+        { action: "align-right", label: "Align right", icon: "align-right" }
       ];
       const structuralActions = [
-        { action: "add-row-after", label: "Add row", can: "can-add-row-after" },
-        { action: "add-column-after", label: "Add column", can: "can-add-column-after" }
+        { action: "add-row-after", label: "Add row", icon: "rows", can: "can-add-row-after" },
+        { action: "add-column-after", label: "Add column", icon: "columns", can: "can-add-column-after" }
       ].filter((action) => this.getBoolAttr(action.can));
       const overflowSections = [
         {
           heading: "Structure",
           actions: [
-            { action: "add-row-before", label: "Add row above", can: "can-add-row-before" },
-            { action: "add-column-before", label: "Add column left", can: "can-add-column-before" }
+            { action: "add-row-before", label: "Add row above", icon: "panel-top", can: "can-add-row-before" },
+            { action: "add-column-before", label: "Add column left", icon: "panel-left", can: "can-add-column-before" }
           ]
         },
         {
           heading: "Cells",
           actions: [
-            { action: "clear-cells", label: "Clear selected cells" },
-            { action: "merge-cells", label: "Merge selected cells", can: "can-merge-cells" },
-            { action: "split-cell", label: "Split merged cell", can: "can-split-cell" }
+            { action: "clear-cells", label: "Clear selected cells", icon: "eraser" },
+            { action: "merge-cells", label: "Merge selected cells", icon: "merge", can: "can-merge-cells" },
+            { action: "split-cell", label: "Split merged cell", icon: "split", can: "can-split-cell" }
           ]
         },
         {
           heading: "Table",
           actions: [
-            { action: "delete-row", label: "Delete row", can: "can-delete-row", tone: "danger" },
-            { action: "delete-column", label: "Delete column", can: "can-delete-column", tone: "danger" },
-            { action: "delete-table", label: "Delete table", can: "can-delete-table", tone: "danger" }
+            { action: "delete-row", label: "Delete row", icon: "trash", can: "can-delete-row", tone: "danger" },
+            { action: "delete-column", label: "Delete column", icon: "trash", can: "can-delete-column", tone: "danger" },
+            { action: "delete-table", label: "Delete table", icon: "trash", can: "can-delete-table", tone: "danger" }
           ]
         }
       ];
@@ -298,18 +303,18 @@ if (typeof HTMLElement !== "undefined") {
         '<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">',
         alignmentActions.map(
-          (action) => `<button type="button" data-action="${action.action}" aria-pressed="${action.action === activeAlignment ? "true" : "false"}" data-active="${action.action === activeAlignment ? "true" : "false"}">${action.label}</button>`
+          (action) => `<button type="button" class="ui-editor-table-toolbar__icon-button" data-action="${action.action}" aria-label="${action.label}" title="${action.label}" aria-pressed="${action.action === activeAlignment ? "true" : "false"}" data-active="${action.action === activeAlignment ? "true" : "false"}">${loomaIconMarkup2(action.icon)}</button>`
         ).join(""),
         "</div>",
         structuralActions.length > 0 ? '<div class="ui-editor-table-toolbar__sep" aria-hidden="true"></div>' : "",
         structuralActions.length > 0 ? '<div class="ui-editor-table-toolbar__group" role="group" aria-label="Table structure">' : "",
         structuralActions.map(
-          (action) => `<button type="button" data-action="${action.action}">${action.label}</button>`
+          (action) => `<button type="button" data-action="${action.action}">${loomaIconMarkup2(action.icon)}<span>${action.label}</span></button>`
         ).join(""),
         structuralActions.length > 0 ? "</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="${this.#overflowOpen ? "true" : "false"}">Table options</button>`,
+        `<button type="button" class="ui-editor-table-toolbar__more" data-action="toggle-overflow" aria-haspopup="menu" aria-expanded="${this.#overflowOpen ? "true" : "false"}">${loomaIconMarkup2("table")}<span>Table options</span>${loomaIconMarkup2("chevron-down", "looma-icon looma-icon--chevron")}</button>`,
         this.#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">',
@@ -327,7 +332,7 @@ if (typeof HTMLElement !== "undefined") {
               `<div class="ui-editor-table-toolbar__menu-heading" role="presentation">${section.heading}</div>`,
               section.actions.map((action) => {
                 const tone = "tone" in action ? action.tone : void 0;
-                return `<button type="button" role="menuitem" data-action="${action.action}"${tone ? ` data-tone="${tone}"` : ""}>${action.label}</button>`;
+                return `<button type="button" role="menuitem" data-action="${action.action}"${tone ? ` data-tone="${tone}"` : ""}>${loomaIconMarkup2(action.icon)}<span>${action.label}</span></button>`;
               }).join(""),
               "</div>"
             ].join("")
@@ -360,17 +365,19 @@ if (typeof HTMLElement !== "undefined") {
     #previewRows = null;
     #previewCols = null;
     #withHeaderRow = true;
-    #selectionPinned = false;
+    #selectionCommitted = false;
     connectedCallback() {
       this.#maxRows = Math.min(10, Math.max(1, parseInt(this.getAttribute("max-rows") ?? String(DEFAULT_MAX_ROWS), 10) || DEFAULT_MAX_ROWS));
       this.#maxCols = Math.min(10, Math.max(1, parseInt(this.getAttribute("max-cols") ?? String(DEFAULT_MAX_COLS), 10) || DEFAULT_MAX_COLS));
       this.render();
       this.addEventListener("click", this.onClick);
       this.addEventListener("mouseover", this.onMouseOver);
+      this.addEventListener("mouseleave", this.onMouseLeave);
     }
     disconnectedCallback() {
       this.removeEventListener("click", this.onClick);
       this.removeEventListener("mouseover", this.onMouseOver);
+      this.removeEventListener("mouseleave", this.onMouseLeave);
     }
     attributeChangedCallback(name) {
       if (name === "max-rows") this.#maxRows = Math.min(10, Math.max(1, parseInt(this.getAttribute("max-rows") ?? String(DEFAULT_MAX_ROWS), 10) || DEFAULT_MAX_ROWS));
@@ -384,7 +391,7 @@ if (typeof HTMLElement !== "undefined") {
         this.#selectedCols = parseInt(cell.getAttribute("data-col") ?? "1", 10);
         this.#previewRows = null;
         this.#previewCols = null;
-        this.#selectionPinned = true;
+        this.#selectionCommitted = true;
         this.updateSelectionPreview();
         return;
       }
@@ -402,27 +409,33 @@ if (typeof HTMLElement !== "undefined") {
       }
     }
     onMouseOver(e) {
-      if (this.#selectionPinned) {
-        return;
-      }
       const cell = e.target.closest("[data-row][data-col]");
-      if (cell) {
-        const nextRows = parseInt(cell.getAttribute("data-row") ?? "1", 10);
-        const nextCols = parseInt(cell.getAttribute("data-col") ?? "1", 10);
-        if (nextRows === this.#previewRows && nextCols === this.#previewCols) {
-          return;
-        }
-        this.#previewRows = nextRows;
-        this.#previewCols = nextCols;
-        this.updateSelectionPreview();
+      if (!cell) {
+        this.#clearPreview();
+        return;
       }
+      const nextRows = parseInt(cell.getAttribute("data-row") ?? "1", 10);
+      const nextCols = parseInt(cell.getAttribute("data-col") ?? "1", 10);
+      if (nextRows === this.#previewRows && nextCols === this.#previewCols) return;
+      this.#previewRows = nextRows;
+      this.#previewCols = nextCols;
+      this.updateSelectionPreview();
+    }
+    onMouseLeave = () => {
+      this.#clearPreview();
+    };
+    #clearPreview() {
+      if (this.#previewRows === null && this.#previewCols === null) return;
+      this.#previewRows = null;
+      this.#previewCols = null;
+      this.updateSelectionPreview();
     }
     updateSelectionPreview() {
       const activeRows = this.#previewRows ?? this.#selectedRows;
       const activeCols = this.#previewCols ?? this.#selectedCols;
       const hint = this.querySelector(".ui-editor-insert-table-grid__hint");
       if (hint) {
-        hint.textContent = this.#selectionPinned ? `${this.#selectedRows} \xD7 ${this.#selectedCols} selected` : `${activeRows} \xD7 ${activeCols}`;
+        hint.textContent = this.#previewRows !== null && this.#previewCols !== null ? `${activeRows} \xD7 ${activeCols}` : `${this.#selectedRows} \xD7 ${this.#selectedCols}${this.#selectionCommitted ? " selected" : ""}`;
       }
       const cells = this.querySelectorAll("[data-row][data-col]");
       for (const cell of cells) {
@@ -439,7 +452,7 @@ if (typeof HTMLElement !== "undefined") {
       if (!open) return;
       let html = '<div class="ui-editor-insert-table-grid">';
       html += `<p class="ui-editor-insert-table-grid__hint">${this.#selectedRows} \xD7 ${this.#selectedCols}</p>`;
-      html += '<div class="ui-editor-insert-table-grid__grid" role="group" aria-label="Table dimensions">';
+      html += `<div class="ui-editor-insert-table-grid__grid" role="group" aria-label="Table dimensions" style="--ui-editor-table-grid-rows:${this.#maxRows};--ui-editor-table-grid-cols:${this.#maxCols}">`;
       for (let r = 1; r <= this.#maxRows; r++) {
         for (let c = 1; c <= this.#maxCols; c++) {
           const selected = r <= this.#selectedRows && c <= this.#selectedCols;
@@ -468,7 +481,8 @@ if (typeof HTMLElement !== "undefined") {
 
 // src/table-overlay.ts
 import {
-  createProximityCoordinator
+  createProximityCoordinator,
+  loomaIconMarkup as loomaIconMarkup3
 } from "@threadlabs/looma/core";
 var TAG4 = "ui-editor-table-overlay";
 var DEFAULT_ROWS = 3;
@@ -484,7 +498,7 @@ function sameActiveCell(left, right) {
 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);
+  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);
@@ -515,7 +529,7 @@ function resolveTableCellAt(table, rowIndex, columnIndex) {
 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) {
+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));
@@ -529,21 +543,32 @@ function measureTableOverlayGeometry(table, activeCell) {
     return [rect.left - tableRect.left, rect.right - tableRect.left];
   }));
   if (!activeCell || !table.contains(activeCell)) {
-    return { rowBoundaries, columnBoundaries, activeCell: null };
+    return {
+      rowBoundaries,
+      columnBoundaries,
+      activeCell: null,
+      hoveredCell: measureCellRect(table, hoveredCell, coordinates)
+    };
   }
-  const cellRect = activeCell.getBoundingClientRect();
-  const coordinate = coordinates.get(activeCell);
   return {
     rowBoundaries,
     columnBoundaries,
-    activeCell: {
-      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
-    }
+    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) {
@@ -557,7 +582,7 @@ function fallbackBoundaries(segments, length) {
 if (typeof HTMLElement !== "undefined") {
   class UIEditorTableOverlayElement extends HTMLElement {
     static get observedAttributes() {
-      return ["open", "rows", "cols", "row-boundaries", "column-boundaries", "active-cell"];
+      return ["open", "rows", "cols", "row-boundaries", "column-boundaries", "active-cell", "hovered-cell"];
     }
     #rows = DEFAULT_ROWS;
     #cols = DEFAULT_COLS;
@@ -630,6 +655,14 @@ if (typeof HTMLElement !== "undefined") {
       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",
@@ -710,22 +743,25 @@ if (typeof HTMLElement !== "undefined") {
         '<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}">`,
-        '<span aria-hidden="true">+</span>',
+        loomaIconMarkup3("plus"),
         `<span class="ui-editor-table-overlay__tooltip" role="tooltip">${label}</span>`,
         "</button>",
         "</div>"
       ].join("");
     }
-    #activeCellControls(cell) {
+    #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"><span aria-hidden="true"></span></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"><span aria-hidden="true"></span></button>`,
-        `<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"><span aria-hidden="true">\u2304</span></button>`
+        `<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">${loomaIconMarkup3("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">${loomaIconMarkup3("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">${loomaIconMarkup3("chevron-down")}</button>`;
+    }
     render() {
       const open = this.hasAttribute("open") && this.getAttribute("open") !== "false";
       this.hidden = !open;
@@ -735,7 +771,8 @@ if (typeof HTMLElement !== "undefined") {
       }
       const rows = this.#boundaries("row-boundaries", this.#rows);
       const columns = this.#boundaries("column-boundaries", this.#cols);
-      const cell = this.#activeCell();
+      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">',
@@ -744,7 +781,8 @@ if (typeof HTMLElement !== "undefined") {
         '<div class="ui-editor-table-overlay__cols">',
         columns.map((position, index) => this.#insertionControl("col", index, position)).join(""),
         "</div>",
-        cell ? this.#activeCellControls(cell) : "",
+        hoveredCell ? this.#cellSelectors(hoveredCell) : "",
+        activeCell ? this.#cellMenu(activeCell) : "",
         "</div>"
       ].join("");
       this.#syncActiveControl();
@@ -757,7 +795,10 @@ if (typeof HTMLElement !== "undefined") {
 }
 
 // src/slash-menu.ts
-import { getVisualViewportRect as getVisualViewportRect2 } from "@threadlabs/looma/core";
+import {
+  getVisualViewportRect as getVisualViewportRect2,
+  loomaIconMarkup as loomaIconMarkup4
+} from "@threadlabs/looma/core";
 var TAG5 = "ui-editor-slash-menu";
 var MOBILE_BREAKPOINT = 768;
 var MENU_HEIGHT_ESTIMATE = 320;
@@ -965,7 +1006,7 @@ if (typeof HTMLElement !== "undefined") {
           ` aria-selected="${index === this.#selectedIndex ? "true" : "false"}"`,
           ` data-index="${index}"`,
           `>`,
-          `<span class="ui-editor-slash-menu__icon" aria-hidden="true">${escapeHtml(item.icon)}</span>`,
+          `<span class="ui-editor-slash-menu__icon" aria-hidden="true">${loomaIconMarkup4(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>`,

package/editor/extensions/index.d.ts

@@ -1,6 +1,7 @@
 import { AnyExtension, Editor, Range, Extension } from '@tiptap/core';
-import { d as TableContextMenuActionEventDetail, g as TableOverlayActionEventDetail } from '../table-overlay-jjvdARTJ.js';
-export { a as TABLE_CELL_BACKGROUND_PRESETS } from '../table-overlay-jjvdARTJ.js';
+import { d as TableContextMenuActionEventDetail, g as TableOverlayActionEventDetail } from '../table-overlay-DoiLie4h.js';
+export { a as TABLE_CELL_BACKGROUND_PRESETS } from '../table-overlay-DoiLie4h.js';
+import { LoomaIconName } from '@threadlabs/looma/core';
 
 /**
  * Default Tiptap extension preset for Looma editor.
@@ -113,7 +114,7 @@ declare function getDefaultSlashCommands(onOpenImagePicker?: () => void): LoomaS
 interface LoomaSlashCommand {
     title: string;
     description: string;
-    icon: string;
+    icon: LoomaIconName;
     keywords: string[];
     command: (context: LoomaSlashCommandContext) => void;
 }

package/editor/extensions/index.js

@@ -18,7 +18,7 @@ import {
   setActiveTableCellAlignment,
   setActiveTableCellBackground,
   shouldShowTextFormattingToolbar
-} from "../chunk-F4AYF33M.js";
+} from "../chunk-OHD4OS32.js";
 import {
   TABLE_CELL_BACKGROUND_PRESETS
 } from "../chunk-CX4QDKSV.js";

package/editor/index.d.ts

@@ -1,4 +1,5 @@
-export { A as ActiveCellRect, T as TABLE_CELL_BACKGROUND_OPTIONS, a as TABLE_CELL_BACKGROUND_PRESETS, b as TableCellBackgroundAction, c as TableContextMenuAction, d as TableContextMenuActionEventDetail, e as TableInsertionAction, f as TableOverlayAction, g as TableOverlayActionEventDetail, h as TableOverlayGeometry, d as TableToolbarActionEventDetail, m as measureTableOverlayGeometry, r as resolveTableCellAt } from './table-overlay-jjvdARTJ.js';
+export { A as ActiveCellRect, T as TABLE_CELL_BACKGROUND_OPTIONS, a as TABLE_CELL_BACKGROUND_PRESETS, b as TableCellBackgroundAction, c as TableContextMenuAction, d as TableContextMenuActionEventDetail, e as TableInsertionAction, f as TableOverlayAction, g as TableOverlayActionEventDetail, h as TableOverlayGeometry, d as TableToolbarActionEventDetail, m as measureTableOverlayGeometry, r as resolveTableCellAt } from './table-overlay-DoiLie4h.js';
 export { InsertTableEventDetail, SlashMenuAnchorRect, SlashMenuHighlightEventDetail, SlashMenuItem, SlashMenuSelectEventDetail } from './ui.js';
 export { ActiveTableUiState, DefaultEditorExtensionsOptions, InsertTableAtRangeOptions, LoomaSlashCommand, LoomaSlashCommandContext, LoomaSlashCommand as LoomaSlashCommandItem, LoomaSlashCommandOptions, LoomaSlashMenuSnapshot, LoomaTable, LoomaTableCell, LoomaTableHeader, LoomaTableKit, TableActionCapabilities, TableCellAlignment, TableCellBackground, createLoomaSlashCommandExtension, getActiveTableCellAlignment, getActiveTableCellBackground, getActiveTableUiState, getDefaultEditorExtensions, getDefaultSlashCommands, getLoomaTableExtensions, handleTableAction, handleTableOverlayAction, insertTableAtRange, normalizeActiveTableColumnWidths, setActiveTableCellAlignment, setActiveTableCellBackground, shouldShowTextFormattingToolbar } from './extensions/index.js';
+import '@threadlabs/looma/core';
 import '@tiptap/core';

package/editor/index.js

@@ -1,7 +1,7 @@
 import {
   measureTableOverlayGeometry,
   resolveTableCellAt
-} from "./chunk-4VGVEHU2.js";
+} from "./chunk-RTHHTPWK.js";
 import {
   LoomaSlashCommand,
   LoomaTable,
@@ -22,7 +22,7 @@ import {
   setActiveTableCellAlignment,
   setActiveTableCellBackground,
   shouldShowTextFormattingToolbar
-} from "./chunk-F4AYF33M.js";
+} from "./chunk-OHD4OS32.js";
 import {
   TABLE_CELL_BACKGROUND_OPTIONS,
   TABLE_CELL_BACKGROUND_PRESETS

package/editor/{table-overlay-jjvdARTJ.d.ts → table-overlay-DoiLie4h.d.ts}

@@ -86,10 +86,11 @@ interface TableOverlayGeometry {
     rowBoundaries: number[];
     columnBoundaries: number[];
     activeCell: ActiveCellRect | null;
+    hoveredCell?: ActiveCellRect | null;
 }
 /** Resolves a logical table coordinate, including cells that span rows or columns. */
 declare function resolveTableCellAt(table: HTMLTableElement, rowIndex: number, columnIndex: number): HTMLTableCellElement | null;
 /** Measures real rendered boundaries, including non-uniform and merged cells. */
-declare function measureTableOverlayGeometry(table: HTMLTableElement, activeCell: HTMLTableCellElement | null): TableOverlayGeometry;
+declare function measureTableOverlayGeometry(table: HTMLTableElement, activeCell: HTMLTableCellElement | null, hoveredCell?: HTMLTableCellElement | null): TableOverlayGeometry;
 
 export { type ActiveCellRect as A, TABLE_CELL_BACKGROUND_OPTIONS as T, TABLE_CELL_BACKGROUND_PRESETS as a, type TableCellBackgroundAction as b, type TableContextMenuAction as c, type TableContextMenuActionEventDetail as d, type TableInsertionAction as e, type TableOverlayAction as f, type TableOverlayActionEventDetail as g, type TableOverlayGeometry as h, measureTableOverlayGeometry as m, resolveTableCellAt as r };

package/editor/ui.d.ts

@@ -1,4 +1,5 @@
-export { A as ActiveCellRect, T as TABLE_CELL_BACKGROUND_OPTIONS, a as TABLE_CELL_BACKGROUND_PRESETS, b as TableCellBackgroundAction, c as TableContextMenuAction, d as TableContextMenuActionEventDetail, e as TableInsertionAction, f as TableOverlayAction, g as TableOverlayActionEventDetail, h as TableOverlayGeometry, d as TableToolbarActionEventDetail, m as measureTableOverlayGeometry, r as resolveTableCellAt } from './table-overlay-jjvdARTJ.js';
+export { A as ActiveCellRect, T as TABLE_CELL_BACKGROUND_OPTIONS, a as TABLE_CELL_BACKGROUND_PRESETS, b as TableCellBackgroundAction, c as TableContextMenuAction, d as TableContextMenuActionEventDetail, e as TableInsertionAction, f as TableOverlayAction, g as TableOverlayActionEventDetail, h as TableOverlayGeometry, d as TableToolbarActionEventDetail, m as measureTableOverlayGeometry, r as resolveTableCellAt } from './table-overlay-DoiLie4h.js';
+import { LoomaIconName } from '@threadlabs/looma/core';
 
 /**
  * ui-editor-insert-table-grid — web component for picking table dimensions.
@@ -15,10 +16,11 @@ interface InsertTableEventDetail {
  * ui-editor-slash-menu — floating slash-command menu.
  * Apps own the command list and suggestion state; Looma owns the chrome.
  */
+
 interface SlashMenuItem {
     title: string;
     description: string;
-    icon: string;
+    icon: LoomaIconName;
 }
 interface SlashMenuHighlightEventDetail {
     index: number;

package/editor/ui.js

@@ -1,7 +1,7 @@
 import {
   measureTableOverlayGeometry,
   resolveTableCellAt
-} from "./chunk-4VGVEHU2.js";
+} from "./chunk-RTHHTPWK.js";
 import {
   TABLE_CELL_BACKGROUND_OPTIONS,
   TABLE_CELL_BACKGROUND_PRESETS