@threadlabs/looma 0.1.11 → 0.1.12

package/editor.css

@@ -179,8 +179,10 @@
   pointer-events: none;
 }
 
-.looma-editor__drop-glyph {
-  font-size: var(--ui-font-size-2xl);
+.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 {
@@ -189,16 +191,10 @@
   --ui-icon-button-icon-size: var(--ui-editor-toolbar-icon-size, 1rem);
 }
 
-.looma-editor__toolbar-glyph {
-  display: inline-flex;
-  align-items: center;
-  justify-content: center;
-  min-width: 1em;
-  color: inherit;
-  font-family: var(--ui-font-family-sans);
-  font-size: var(--ui-editor-toolbar-glyph-size, 0.75rem);
-  font-weight: var(--ui-font-semibold);
-  line-height: 1;
+.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-anchor {
@@ -279,6 +275,10 @@
 }
 
 .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);
@@ -291,6 +291,12 @@
   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);
@@ -512,6 +518,12 @@ ui-editor-toolbar[floating] {
   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;
@@ -588,7 +600,9 @@ ui-editor-toolbar[floating] {
 }
 
 .ui-editor-table-context-menu button {
-  display: block;
+  display: flex;
+  align-items: center;
+  gap: var(--ui-space-2, 8px);
   width: 100%;
   text-align: left;
   min-height: 32px;
@@ -601,6 +615,13 @@ ui-editor-toolbar[floating] {
   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);
 }
@@ -685,10 +706,8 @@ ui-editor-toolbar[floating] {
 .ui-editor-table-toolbar__group {
   display: inline-flex;
   align-items: center;
-  gap: 0;
+  gap: 2px;
   overflow: hidden;
-  border: 1px solid var(--ui-border, #e5e7eb);
-  border-radius: var(--ui-radius-md, 6px);
 }
 
 .ui-editor-table-toolbar__sep {
@@ -705,6 +724,7 @@ ui-editor-toolbar[floating] {
   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);
@@ -728,26 +748,37 @@ ui-editor-toolbar[floating] {
 }
 
 .ui-editor-table-toolbar__group button {
-  border-radius: 0;
+  border-radius: var(--ui-radius-sm, 4px);
 }
 
 .ui-editor-table-toolbar__group button + button {
-  border-left: 1px solid var(--ui-border, #e5e7eb);
+  border-left: 0;
 }
 
 .ui-editor-table-toolbar__more {
-  border: 1px solid var(--ui-border, #e5e7eb) !important;
-  border-radius: var(--ui-radius-md, 6px) !important;
+  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__more::after {
-  content: "▾";
-  margin-left: var(--ui-space-1, 4px);
-  font-size: 0.75em;
+.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 {
@@ -782,7 +813,8 @@ ui-editor-toolbar[floating] {
 }
 
 .ui-editor-table-toolbar__menu button {
-  display: block;
+  display: flex;
+  justify-content: flex-start;
   width: 100%;
   text-align: left;
 }
@@ -834,8 +866,8 @@ ui-editor-toolbar[floating] {
 
 .ui-editor-insert-table-grid__grid {
   display: grid;
-  grid-template-columns: repeat(8, 1.25rem);
-  grid-template-rows: repeat(8, 1.25rem);
+  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);
 }
@@ -944,6 +976,12 @@ ui-editor-table-overlay {
   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 {
@@ -974,7 +1012,7 @@ ui-editor-table-overlay {
 
 .ui-editor-table-overlay__control--row .ui-editor-table-overlay__handle {
   top: -12px;
-  left: -36px;
+  left: -30px;
 }
 
 .ui-editor-table-overlay__control--col {
@@ -984,7 +1022,7 @@ ui-editor-table-overlay {
 }
 
 .ui-editor-table-overlay__control--col .ui-editor-table-overlay__handle {
-  top: -36px;
+  top: -30px;
   left: -12px;
 }
 
@@ -1074,60 +1112,62 @@ ui-editor-table-overlay {
   align-items: center;
   justify-content: center;
   padding: 0;
-  border: 1px solid var(--ui-border-strong, #c8c8c4);
-  background: var(--ui-surface-elevated, #fff);
+  border: 1px solid transparent;
+  background: transparent;
   color: var(--ui-text-secondary, #5c5c5c);
-  box-shadow: var(--ui-shadow-xs, 0 1px 2px rgb(0 0 0 / 0.05));
+  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 {
-  border-color: var(--ui-affordance-direct-color, var(--ui-accent-solid, #5b55d6));
-  color: var(--ui-affordance-direct-color, var(--ui-accent-solid, #5b55d6));
+  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 span {
+.ui-editor-table-overlay__selector .looma-icon {
   display: block;
-  border-radius: var(--ui-radius-round, 999px);
-  background: currentColor;
+  width: 14px;
+  height: 14px;
+  stroke-width: var(--ui-editor-table-affordance-icon-stroke-width, 2);
 }
 
 .ui-editor-table-overlay__selector--row {
-  left: -26px;
-  width: 14px;
-  height: 30px;
+  left: -9px;
+  width: 18px;
+  height: 32px;
   transform: translateY(-50%);
 }
 
-.ui-editor-table-overlay__selector--row span {
-  width: 4px;
-  height: 16px;
-}
-
 .ui-editor-table-overlay__selector--column {
-  top: -26px;
-  width: 30px;
-  height: 14px;
+  top: -9px;
+  width: 32px;
+  height: 18px;
   transform: translateX(-50%);
 }
 
-.ui-editor-table-overlay__selector--column span {
-  width: 16px;
-  height: 4px;
-}
-
 .ui-editor-table-overlay__cell-menu {
   width: 24px;
   height: 24px;
   border-radius: var(--ui-radius-1, 4px);
-  font-size: 16px;
-  line-height: 1;
+  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 {
@@ -1160,6 +1200,7 @@ ui-editor-table-overlay {
 
 .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;
@@ -1168,8 +1209,14 @@ ui-editor-table-overlay {
   overflow-wrap: anywhere;
 }
 
-.ProseMirror :is(th, td) > p:last-child {
-  margin-bottom: 0;
+.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 {
@@ -1216,8 +1263,8 @@ ui-editor-table-overlay {
   content: "Drag to resize column";
   position: absolute;
   z-index: 4;
-  top: -32px;
-  left: 50%;
+  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);
@@ -1226,7 +1273,7 @@ ui-editor-table-overlay {
   font-size: var(--ui-font-size-xs, 0.75rem);
   line-height: var(--ui-line-height-md, 1.4);
   opacity: 0;
-  transform: translateX(-50%);
+  transform: none;
   transition: opacity var(--ui-affordance-motion, var(--ui-motion-fast, 120ms)) var(--ui-motion-ease, ease);
   pointer-events: none;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@threadlabs/looma",
-  "version": "0.1.11",
+  "version": "0.1.12",
   "type": "module",
   "description": "Looma web components, responsive layout primitives, a complete editor, and supported Vue adapters.",
   "license": "MIT",
@@ -94,6 +94,7 @@
     "./*.css"
   ],
   "dependencies": {
+    "lucide": "~0.554.0",
     "lowlight": "^3.3.0"
   },
   "peerDependencies": {

package/vue/editor/index.js

@@ -125,7 +125,11 @@ import {
   resolveTableCellAt,
   shouldShowTextFormattingToolbar
 } from "@threadlabs/looma/editor";
-import { clampRectToViewport, getVisualViewportRect } from "@threadlabs/looma/core";
+import {
+  clampRectToViewport,
+  getVisualViewportRect,
+  LOOMA_ICONS
+} from "@threadlabs/looma/core";
 var EMPTY_DOCUMENT = { type: "doc", content: [] };
 var EMPTY_CAPABILITIES = {
   canAddRowBefore: false,
@@ -151,6 +155,20 @@ function selectedTableCellElement(editor) {
   const element = node instanceof HTMLElement ? node : node.parentElement;
   return element?.closest("td, th");
 }
+function loomaIcon(name) {
+  return h2("svg", {
+    class: "looma-icon",
+    "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"
+  }, LOOMA_ICONS[name].map(([tag, attributes]) => h2(tag, attributes)));
+}
 var LoomaEditor = defineComponent2({
   name: "LoomaEditor",
   inheritAttrs: false,
@@ -193,7 +211,7 @@ var LoomaEditor = defineComponent2({
     const tablePickerOpen = ref(false);
     const tablePickerStyle = ref({});
     const mobileToolbarStyle = ref({});
-    const mobile = ref(false);
+    const mobile = ref(typeof window !== "undefined" && window.innerWidth <= 767);
     const editorFocused = ref(false);
     const mobileToolbarMode = ref("formatting");
     let dragLeaveTimer = null;
@@ -201,6 +219,7 @@ var LoomaEditor = defineComponent2({
     let tableInteractionActive = false;
     let mobileTableControlsDismissed = false;
     let hoveredTableCell = null;
+    let overlayTableElement = null;
     let tablePointerFrame = null;
     const slash = reactive({
       active: false,
@@ -259,6 +278,7 @@ var LoomaEditor = defineComponent2({
       tableUi.background = null;
       tableUi.geometry = null;
       tableUi.capabilities = { ...EMPTY_CAPABILITIES };
+      overlayTableElement = null;
       mobileTableControlsDismissed = false;
       mobileToolbarMode.value = "formatting";
     };
@@ -280,32 +300,37 @@ var LoomaEditor = defineComponent2({
     };
     const updateTableUi = () => {
       const instance = editor.value;
-      if (!instance || !props.editable || !instance.isFocused && !tableInteractionActive) {
+      if (!instance || !props.editable || !instance.isFocused && !tableInteractionActive && !hoveredTableCell) {
         closeTableUi();
         return;
       }
       const state = getActiveTableUiState(instance);
-      const table = selectedTableElement(instance);
-      if (!state.active || !table) {
+      const selectedTable = selectedTableElement(instance);
+      const hoveredTable = hoveredTableCell?.closest("table") ?? null;
+      const table = hoveredTable ?? selectedTable;
+      if (!table) {
         closeTableUi();
         return;
       }
-      if (!mobileTableControlsDismissed) mobileToolbarMode.value = "table";
+      const selectedTableIsActive = state.active && selectedTable === table;
+      overlayTableElement = table;
+      if (selectedTableIsActive && !mobileTableControlsDismissed) mobileToolbarMode.value = "table";
       const rect = table.getBoundingClientRect();
       const maxToolbarWidth = Math.min(420, window.innerWidth - 24);
       const toolbarLeft = Math.min(
         Math.max(12, rect.left + (rect.width - maxToolbarWidth) / 2),
         Math.max(12, window.innerWidth - maxToolbarWidth - 12)
       );
-      tableUi.toolbarOpen = state.showToolbar && !mobile.value;
+      tableUi.toolbarOpen = selectedTableIsActive && state.showToolbar && !mobile.value;
       tableUi.overlayOpen = !mobile.value;
-      tableUi.alignment = state.cellAlignment;
-      tableUi.background = state.cellBackground;
-      tableUi.capabilities = state.capabilities;
-      const selectedCell = selectedTableCellElement(instance);
+      tableUi.alignment = selectedTableIsActive ? state.cellAlignment : "left";
+      tableUi.background = selectedTableIsActive ? state.cellBackground : null;
+      tableUi.capabilities = selectedTableIsActive ? state.capabilities : { ...EMPTY_CAPABILITIES };
+      const selectedCell = selectedTableIsActive ? selectedTableCellElement(instance) : null;
       const geometry = measureTableOverlayGeometry(
         table,
-        hoveredTableCell && table.contains(hoveredTableCell) ? hoveredTableCell : selectedCell
+        selectedCell,
+        hoveredTableCell && table.contains(hoveredTableCell) ? hoveredTableCell : null
       );
       tableUi.rows = Math.max(0, geometry.rowBoundaries.length - 1);
       tableUi.cols = Math.max(0, geometry.columnBoundaries.length - 1);
@@ -489,9 +514,18 @@ var LoomaEditor = defineComponent2({
     const runOverlayAction = (detail) => {
       const instance = editor.value;
       if (!instance) return;
+      const table = overlayTableElement ?? selectedTableElement(instance);
+      if (!table) return;
+      const targetCell = "rowIndex" in detail ? resolveTableCellAt(table, detail.rowIndex, detail.columnIndex) : resolveTableCellAt(
+        table,
+        detail.action.startsWith("add-row") ? Math.max(0, detail.boundaryIndex - 1) : 0,
+        detail.action.startsWith("add-column") ? Math.max(0, detail.boundaryIndex - 1) : 0
+      );
+      if (targetCell && selectedTableElement(instance) !== table) {
+        instance.chain().focus().setTextSelection(instance.view.posAtDOM(targetCell, 0) + 1).run();
+      }
       if (detail.action === "open-cell-menu") {
         const selectedCell = selectedTableCellElement(instance);
-        const table = selectedTableElement(instance);
         const cell = table ? resolveTableCellAt(table, detail.rowIndex, detail.columnIndex) ?? selectedCell : selectedCell;
         if (cell && selectedCell !== cell && !cell.classList.contains("selectedCell")) {
           instance.chain().focus().setTextSelection(instance.view.posAtDOM(cell, 0) + 1).run();
@@ -520,6 +554,15 @@ var LoomaEditor = defineComponent2({
         updateTableUi();
       });
     };
+    const onEditorPointerOut = (event) => {
+      const fromCell = event.target instanceof HTMLElement ? event.target.closest("td, th") : null;
+      if (!fromCell || fromCell !== hoveredTableCell) return;
+      const next = event.relatedTarget;
+      const toCell = next instanceof HTMLElement ? next.closest("td, th") : null;
+      if (toCell || next instanceof Node && tableOverlayShell.value?.contains(next)) return;
+      hoveredTableCell = null;
+      nextTick(updateTableUi);
+    };
     const onEditorPointerLeave = (event) => {
       const next = event.relatedTarget;
       if (next instanceof Node && (tableOverlayShell.value?.contains(next) || tableToolbarShell.value?.contains(next) || tableMenuShell.value?.contains(next))) return;
@@ -527,6 +570,13 @@ var LoomaEditor = defineComponent2({
       hoveredTableCell = null;
       nextTick(updateTableUi);
     };
+    const onTableOverlayPointerLeave = (event) => {
+      const next = event.relatedTarget;
+      if (next instanceof Node && (root.value?.contains(next) || tableToolbarShell.value?.contains(next) || tableMenuShell.value?.contains(next))) return;
+      if (!hoveredTableCell) return;
+      hoveredTableCell = null;
+      nextTick(updateTableUi);
+    };
     const commandButton = (label, icon, active, disabled, run) => h2(IconButton, {
       class: "looma-editor__toolbar-button",
       label,
@@ -536,36 +586,36 @@ var LoomaEditor = defineComponent2({
       disabled,
       "data-active": active ? "true" : "false",
       onClick: run
-    }, () => h2("span", { class: "looma-editor__toolbar-glyph", "aria-hidden": "true" }, icon));
+    }, () => loomaIcon(icon));
     const renderToolbar = (instance) => {
       const buttons = [
-        commandButton("Bold", "B", instance.isActive("bold"), !instance.can().toggleBold(), () => instance.chain().focus().toggleBold().run()),
-        commandButton("Italic", "I", instance.isActive("italic"), !instance.can().toggleItalic(), () => instance.chain().focus().toggleItalic().run()),
-        commandButton("Underline", "U", instance.isActive("underline"), !instance.can().toggleUnderline(), () => instance.chain().focus().toggleUnderline().run()),
-        commandButton("Strike", "S", instance.isActive("strike"), !instance.can().toggleStrike(), () => instance.chain().focus().toggleStrike().run()),
-        commandButton("Highlight", "\u25B0", instance.isActive("highlight"), !instance.can().toggleHighlight(), () => instance.chain().focus().toggleHighlight().run()),
-        commandButton("Inline code", "</>", instance.isActive("code"), !instance.can().toggleCode(), () => instance.chain().focus().toggleCode().run()),
+        commandButton("Bold", "bold", instance.isActive("bold"), !instance.can().toggleBold(), () => instance.chain().focus().toggleBold().run()),
+        commandButton("Italic", "italic", instance.isActive("italic"), !instance.can().toggleItalic(), () => instance.chain().focus().toggleItalic().run()),
+        commandButton("Underline", "underline", instance.isActive("underline"), !instance.can().toggleUnderline(), () => instance.chain().focus().toggleUnderline().run()),
+        commandButton("Strike", "strikethrough", instance.isActive("strike"), !instance.can().toggleStrike(), () => instance.chain().focus().toggleStrike().run()),
+        commandButton("Highlight", "highlighter", instance.isActive("highlight"), !instance.can().toggleHighlight(), () => instance.chain().focus().toggleHighlight().run()),
+        commandButton("Inline code", "code-xml", instance.isActive("code"), !instance.can().toggleCode(), () => instance.chain().focus().toggleCode().run()),
         h2("span", { class: "ui-editor-toolbar__divider", "aria-hidden": "true" }),
-        commandButton("Heading 1", "H1", instance.isActive("heading", { level: 1 }), false, () => instance.chain().focus().toggleHeading({ level: 1 }).run()),
-        commandButton("Heading 2", "H2", instance.isActive("heading", { level: 2 }), false, () => instance.chain().focus().toggleHeading({ level: 2 }).run()),
-        commandButton("Heading 3", "H3", instance.isActive("heading", { level: 3 }), false, () => instance.chain().focus().toggleHeading({ level: 3 }).run()),
-        commandButton("Bullet list", "\u2022", instance.isActive("bulletList"), false, () => instance.chain().focus().toggleBulletList().run()),
-        commandButton("Numbered list", "1.", instance.isActive("orderedList"), false, () => instance.chain().focus().toggleOrderedList().run()),
-        commandButton("Checklist", "\u2611", instance.isActive("taskList"), false, () => instance.chain().focus().toggleTaskList().run()),
-        commandButton("Blockquote", "\u275D", instance.isActive("blockquote"), !instance.can().toggleBlockquote(), () => instance.chain().focus().toggleBlockquote().run()),
-        commandButton("Code block", "{ }", instance.isActive("codeBlock"), !instance.can().toggleCodeBlock(), () => instance.chain().focus().toggleCodeBlock().run()),
-        commandButton("Divider", "\u2014", false, !instance.can().setHorizontalRule(), () => instance.chain().focus().setHorizontalRule().run()),
+        commandButton("Heading 1", "heading-1", instance.isActive("heading", { level: 1 }), false, () => instance.chain().focus().toggleHeading({ level: 1 }).run()),
+        commandButton("Heading 2", "heading-2", instance.isActive("heading", { level: 2 }), false, () => instance.chain().focus().toggleHeading({ level: 2 }).run()),
+        commandButton("Heading 3", "heading-3", instance.isActive("heading", { level: 3 }), false, () => instance.chain().focus().toggleHeading({ level: 3 }).run()),
+        commandButton("Bullet list", "list", instance.isActive("bulletList"), false, () => instance.chain().focus().toggleBulletList().run()),
+        commandButton("Numbered list", "list-ordered", instance.isActive("orderedList"), false, () => instance.chain().focus().toggleOrderedList().run()),
+        commandButton("Checklist", "list-todo", instance.isActive("taskList"), false, () => instance.chain().focus().toggleTaskList().run()),
+        commandButton("Blockquote", "quote", instance.isActive("blockquote"), !instance.can().toggleBlockquote(), () => instance.chain().focus().toggleBlockquote().run()),
+        commandButton("Code block", "braces", instance.isActive("codeBlock"), !instance.can().toggleCodeBlock(), () => instance.chain().focus().toggleCodeBlock().run()),
+        commandButton("Divider", "minus", false, !instance.can().setHorizontalRule(), () => instance.chain().focus().setHorizontalRule().run()),
         h2("span", { class: "ui-editor-toolbar__divider", "aria-hidden": "true" }),
         h2("span", { ref: tablePickerAnchor, class: "looma-editor__table-picker-anchor" }, [
-          commandButton("Insert table", "\u229E", false, false, () => {
+          commandButton("Insert table", "table", false, false, () => {
             tablePickerOpen.value = !tablePickerOpen.value;
             nextTick(updateTablePickerPosition);
           })
         ]),
-        commandButton(uploading.value ? "Uploading image" : "Insert image", "\u25A7", false, uploading.value || !props.uploadImage, () => fileInput.value?.click()),
+        commandButton(uploading.value ? "Uploading image" : "Insert image", "image", false, uploading.value || !props.uploadImage, () => fileInput.value?.click()),
         h2("span", { class: "ui-editor-toolbar__divider", "aria-hidden": "true" }),
-        commandButton("Undo", "\u21B6", false, !instance.can().undo(), () => instance.chain().focus().undo().run()),
-        commandButton("Redo", "\u21B7", false, !instance.can().redo(), () => instance.chain().focus().redo().run())
+        commandButton("Undo", "undo", false, !instance.can().undo(), () => instance.chain().focus().undo().run()),
+        commandButton("Redo", "redo", false, !instance.can().redo(), () => instance.chain().focus().redo().run())
       ];
       return h2(EditorToolbar, { floating: "" }, () => buttons);
     };
@@ -596,6 +646,7 @@ var LoomaEditor = defineComponent2({
         class: ["looma-editor", attrs.class, { "looma-editor--readonly": !props.editable, "looma-editor--drag-over": dragOver.value }],
         onContextmenu: onContextMenu,
         onPointerover: onEditorPointerOver,
+        onPointerout: onEditorPointerOut,
         onPointerleave: onEditorPointerLeave,
         onDragover: (event) => {
           event.preventDefault();
@@ -639,7 +690,7 @@ var LoomaEditor = defineComponent2({
               editor.value?.commands.focus();
               nextTick(updateMobileViewport);
             }
-          }, "\u2190 Formatting"),
+          }, [loomaIcon("chevron-left"), h2("span", "Formatting")]),
           h2(EditorTableToolbar, tableProps)
         ] : [renderToolbar(instance)]) : null,
         h2("input", {
@@ -653,7 +704,7 @@ var LoomaEditor = defineComponent2({
           onChange: onFileChange
         }),
         dragOver.value ? h2("div", { class: "looma-editor__drop-overlay", "aria-hidden": "true" }, [
-          h2("span", { class: "looma-editor__drop-glyph" }, "\u25A7"),
+          loomaIcon("image"),
           h2("span", "Drop image to upload")
         ]) : null,
         tablePickerOpen.value ? h2("div", {
@@ -688,7 +739,8 @@ var LoomaEditor = defineComponent2({
         tableUi.overlayOpen ? h2("div", {
           ref: tableOverlayShell,
           class: "looma-editor__table-overlay-shell",
-          style: tableUi.overlayStyle
+          style: tableUi.overlayStyle,
+          onPointerleave: onTableOverlayPointerLeave
         }, [h2(EditorTableOverlay, {
           open: true,
           rows: tableUi.rows,

package/dist/looma/p-95340a13.entry.js

@@ -1 +0,0 @@
-import{r as t,g as a,h as e,H as i}from"./p-CEeiinfk.js";function n(t,a){const e=Math.max(a.left-t.x,0,t.x-a.right),i=Math.max(a.top-t.y,0,t.y-a.bottom);return Math.hypot(e,i)}const o=class{constructor(a){t(this,a)}get host(){return a(this)}nearRadius=32;coordinator=null;componentDidLoad(){this.connectCoordinator()}disconnectedCallback(){this.coordinator?.destroy(),this.coordinator=null}connectCoordinator(){this.coordinator?.destroy(),this.coordinator=function(t,a={}){const e=t.ownerDocument.defaultView??window,i=a.pointerTarget??t,o=a.anchorSelector??"[data-ui-affordance]",r=a.nearRadius??32,s=Number.isFinite(r)?Math.max(0,r):32,c=new AbortController;let d=[],l=null,u=null,h=!1;const f=()=>{for(const{element:t}of d)t.hasAttribute("data-ui-proximity")&&t.removeAttribute("data-ui-proximity");t.hasAttribute("data-ui-interaction")&&t.removeAttribute("data-ui-interaction")},p=()=>{d=Array.from(t.querySelectorAll(o)).filter((t=>!t.hasAttribute("disabled")&&"true"!==t.getAttribute("aria-disabled"))).map((t=>({element:t,rect:t.getBoundingClientRect()}))),h=!1},g=()=>{if(l=null,h&&p(),!u)return void f();let a=!1;for(const t of d){const e=n(u,t.rect)<=s;e&&"near"!==t.element.getAttribute("data-ui-proximity")?t.element.setAttribute("data-ui-proximity","near"):!e&&t.element.hasAttribute("data-ui-proximity")&&t.element.removeAttribute("data-ui-proximity"),a||=e}a&&"engaged"!==t.getAttribute("data-ui-interaction")?t.setAttribute("data-ui-interaction","engaged"):!a&&t.hasAttribute("data-ui-interaction")&&t.removeAttribute("data-ui-interaction")},m=()=>{null===l&&(l=e.requestAnimationFrame(g))},y=()=>{h=!0,m()};return i.addEventListener("pointermove",(t=>{u="touch"===t.pointerType?null:{x:t.clientX,y:t.clientY},m()}),{passive:!0,signal:c.signal}),e.addEventListener("resize",y,{passive:!0,signal:c.signal}),e.addEventListener("scroll",y,{passive:!0,capture:!0,signal:c.signal}),e.visualViewport?.addEventListener("resize",y,{passive:!0,signal:c.signal}),e.visualViewport?.addEventListener("scroll",y,{passive:!0,signal:c.signal}),p(),{refresh:y,destroy(){c.abort(),null!==l&&e.cancelAnimationFrame(l),l=null,u=null,f(),d=[]}}}(this.host,{nearRadius:this.nearRadius})}onSlotChange=()=>{this.coordinator?.refresh()};render(){return e(i,{key:"2bc861652826e6227deaba6d1030ecf43753f575"},e("slot",{key:"5e0544939e6b20747f12023dbb45329eb3853715",onSlotchange:this.onSlotChange}))}static get watchers(){return{nearRadius:[{connectCoordinator:0}]}}};o.style=":host{display:contents;--ui-affordance-scope-engaged:0}:host([data-ui-interaction='engaged']){--ui-affordance-scope-engaged:1}";export{o as ui_affordance_scope}