@expcat/tigercat-vue 1.0.7 → 1.1.0

package/dist/{chunk-LFV3KYO2.js → chunk-GDKYQ7U6.js}

@@ -1,7 +1,7 @@
 'use strict';
 
 var chunk6FXYRDYH_js = require('./chunk-6FXYRDYH.js');
-var chunkU7CCKZAG_js = require('./chunk-U7CCKZAG.js');
+var chunk5436FG3B_js = require('./chunk-5436FG3B.js');
 var chunk2KDSHEZT_js = require('./chunk-2KDSHEZT.js');
 var chunkDUQ7Q2GO_js = require('./chunk-DUQ7Q2GO.js');
 var chunkWPIDP6IG_js = require('./chunk-WPIDP6IG.js');
@@ -151,7 +151,7 @@ var CommentThread = vue.defineComponent({
     const ACTION_BTN = `${BTN_BASE} text-gray-400 hover:text-gray-600 font-normal hover:bg-gray-50`;
     const PRIMARY_BTN = `${BTN_BASE} text-[var(--tiger-primary,#2563eb)] hover:text-[var(--tiger-primary-hover,#1d4ed8)] font-medium hover:bg-[var(--tiger-primary,#2563eb)]/5`;
     const renderActionButton = (label, key, onClick, active) => vue.h(
-      chunkU7CCKZAG_js.Button,
+      chunk5436FG3B_js.Button,
       {
         key,
         size: "sm",
@@ -201,7 +201,7 @@ var CommentThread = vue.defineComponent({
           const actionKey = action.key ?? `${node.id}-action-${index}`;
           actions.push(
             vue.h(
-              chunkU7CCKZAG_js.Button,
+              chunk5436FG3B_js.Button,
               {
                 key: actionKey,
                 size: "sm",
@@ -281,7 +281,7 @@ var CommentThread = vue.defineComponent({
               replyingTo.value === node.id ? vue.h(
                 "div",
                 {
-                  class: "mt-3 space-y-2 bg-[var(--tiger-surface-muted,#f9fafb)] p-3 rounded-lg"
+                  class: "mt-3 space-y-2 bg-[var(--tiger-surface-muted,#f9fafb)] p-3 rounded-[var(--tiger-radius-md,0.5rem)]"
                 },
                 [
                   vue.h(chunk6FXYRDYH_js.Textarea, {
@@ -295,7 +295,7 @@ var CommentThread = vue.defineComponent({
                   }),
                   vue.h("div", { class: "flex items-center gap-2 justify-end" }, [
                     vue.h(
-                      chunkU7CCKZAG_js.Button,
+                      chunk5436FG3B_js.Button,
                       {
                         size: "sm",
                         variant: "ghost",
@@ -307,7 +307,7 @@ var CommentThread = vue.defineComponent({
                       { default: () => props.cancelReplyText }
                     ),
                     vue.h(
-                      chunkU7CCKZAG_js.Button,
+                      chunk5436FG3B_js.Button,
                       {
                         size: "sm",
                         variant: "primary",
@@ -319,7 +319,7 @@ var CommentThread = vue.defineComponent({
                 ]
               ) : null,
               hasChildren ? vue.h(
-                chunkU7CCKZAG_js.Button,
+                chunk5436FG3B_js.Button,
                 {
                   size: "sm",
                   variant: "ghost",
@@ -343,7 +343,7 @@ var CommentThread = vue.defineComponent({
                     (child, index) => renderNode(child, depth + 1, index === visibleChildren.length - 1)
                   ),
                   showLoadMore ? vue.h(
-                    chunkU7CCKZAG_js.Button,
+                    chunk5436FG3B_js.Button,
                     {
                       size: "sm",
                       variant: "ghost",
@@ -376,6 +376,7 @@ var CommentThread = vue.defineComponent({
           ...attrs,
           class: wrapperClasses.value,
           style: wrapperStyle.value,
+          role: attrs.role ?? "feed",
           "data-tiger-comment-thread": true,
           "aria-label": ariaLabel
         },

package/dist/{chunk-O2Q4UYDA.js → chunk-GEPFTYKC.js}

@@ -1,6 +1,6 @@
 'use strict';
 
-var chunkV4PBWEAU_js = require('./chunk-V4PBWEAU.js');
+var chunkBZBQUUXF_js = require('./chunk-BZBQUUXF.js');
 var vue = require('vue');
 var tigercatCore = require('@expcat/tigercat-core');
 
@@ -63,7 +63,7 @@ var TaskBoard = vue.defineComponent({
   },
   emits: ["card-move", "column-move", "card-add", "column-add", "update:columns"],
   setup(props, { slots, attrs, emit }) {
-    const config = chunkV4PBWEAU_js.useTigerConfig();
+    const config = chunkBZBQUUXF_js.useTigerConfig();
     const mergedLocale = vue.computed(() => tigercatCore.mergeTigerLocale(config.value.locale, props.locale));
     const labels = vue.computed(() => tigercatCore.getTaskBoardLabels(mergedLocale.value));
     const innerColumns = vue.ref(props.columns ?? props.defaultColumns ?? []);
@@ -93,13 +93,8 @@ var TaskBoard = vue.defineComponent({
       innerColumns.value = next;
       emit("update:columns", next);
     };
-    const dragState = vue.ref(null);
-    const dropTargetColumnId = vue.ref(null);
-    const dropIndex = vue.ref(-1);
+    const dragSnap = vue.ref(tigercatCore.createDefaultDragSnapshot());
     const boardRef = vue.ref(null);
-    let touchTracker = null;
-    let touchRaf = 0;
-    const isTouchDevice = () => typeof window !== "undefined" && ("ontouchstart" in window || navigator.maxTouchPoints > 0);
     const applyCardMove = async (cardId, fromColumnId, toColumnId, toIdx) => {
       const result = tigercatCore.moveCard(currentColumns.value, cardId, fromColumnId, toColumnId, toIdx, {
         enforceWipLimit: props.enforceWipLimit
@@ -126,166 +121,27 @@ var TaskBoard = vue.defineComponent({
       updateColumns(result.columns);
       emit("column-move", result.event);
     };
-    const handleCardDragStart = (e, card, column) => {
-      if (!props.draggable || !e.dataTransfer) return;
-      const idx = column.cards.findIndex((c) => c.id === card.id);
-      tigercatCore.setDragData(e.dataTransfer, tigercatCore.createCardDragData(card.id, column.id, idx));
-      dragState.value = { type: "card", id: card.id, fromColumnId: column.id, fromIndex: idx };
-    };
-    const handleCardDragOver = (e, column) => {
-      e.preventDefault();
-      if (!dragState.value || dragState.value.type !== "card") return;
-      dropTargetColumnId.value = column.id;
-      const target = e.currentTarget;
-      const cardEls = target.querySelectorAll("[data-tiger-taskboard-card]");
-      const rects = [];
-      cardEls.forEach((el) => rects.push(el.getBoundingClientRect()));
-      dropIndex.value = tigercatCore.getDropIndex(e.clientY, rects);
-    };
-    const handleCardDrop = (e, column) => {
-      e.preventDefault();
-      if (!e.dataTransfer) return;
-      const data = tigercatCore.parseDragData(e.dataTransfer);
-      if (!data || data.type !== "card") return;
-      applyCardMove(
-        data.cardId,
-        data.columnId,
-        column.id,
-        dropIndex.value >= 0 ? dropIndex.value : column.cards.length
-      );
-      resetDragState();
-    };
-    const handleColumnDragStart = (e, column, index) => {
-      if (!props.columnDraggable || !e.dataTransfer) return;
-      tigercatCore.setDragData(e.dataTransfer, tigercatCore.createColumnDragData(column.id, index));
-      dragState.value = { type: "column", id: column.id, fromIndex: index };
-    };
-    const handleColumnDragOver = (e) => {
-      if (!dragState.value || dragState.value.type !== "column") return;
-      e.preventDefault();
-    };
-    const handleColumnDrop = (e) => {
-      e.preventDefault();
-      if (!e.dataTransfer) return;
-      const data = tigercatCore.parseDragData(e.dataTransfer);
-      if (!data || data.type !== "column") return;
-      const colEls = boardRef.value?.querySelectorAll("[data-tiger-taskboard-column]");
-      if (!colEls) return;
-      const rects = [];
-      colEls.forEach((el) => rects.push(el.getBoundingClientRect()));
-      const toIdx = tigercatCore.getColumnDropIndex(e.clientX, rects);
-      applyColumnMove(data.index, toIdx);
-      resetDragState();
-    };
-    const handleDragEnd = () => {
-      resetDragState();
-    };
-    const handleDragLeave = (e) => {
-      const related = e.relatedTarget;
-      if (!related || !e.currentTarget.contains(related)) {
-        if (dragState.value?.type === "card") {
-          dropTargetColumnId.value = null;
-          dropIndex.value = -1;
-        }
-      }
-    };
-    const resetDragState = () => {
-      dragState.value = null;
-      dropTargetColumnId.value = null;
-      dropIndex.value = -1;
-    };
-    const setupTouch = () => {
-      if (!isTouchDevice()) return;
-      touchTracker = tigercatCore.createTouchDragTracker();
-    };
-    const handleTouchStart = (e, card, column) => {
-      if (!props.draggable || !touchTracker) return;
-      const idx = column.cards.findIndex((c) => c.id === card.id);
-      touchTracker.onTouchStart(e, e.currentTarget);
-      dragState.value = { type: "card", id: card.id, fromColumnId: column.id, fromIndex: idx };
-    };
-    const handleTouchMove = (e) => {
-      if (!touchTracker || !dragState.value) return;
-      touchTracker.onTouchMove(e);
-      cancelAnimationFrame(touchRaf);
-      touchRaf = requestAnimationFrame(() => {
-        const st = touchTracker.getState();
-        if (dragState.value?.type === "card") {
-          const colEl = tigercatCore.findColumnFromPoint(st.currentX, st.currentY, boardRef.value);
-          if (colEl) {
-            const colId = colEl.getAttribute("data-tiger-taskboard-column-id");
-            dropTargetColumnId.value = colId ?? null;
-            const cardEls = colEl.querySelectorAll("[data-tiger-taskboard-card]");
-            const rects = [];
-            cardEls.forEach((el) => rects.push(el.getBoundingClientRect()));
-            dropIndex.value = tigercatCore.getDropIndex(st.currentY, rects);
-          }
-        }
-      });
-    };
-    const handleTouchEnd = () => {
-      if (!touchTracker || !dragState.value) return;
-      touchTracker.onTouchEnd();
-      if (dragState.value.type === "card" && dropTargetColumnId.value != null) {
-        applyCardMove(
-          dragState.value.id,
-          dragState.value.fromColumnId,
-          dropTargetColumnId.value,
-          dropIndex.value >= 0 ? dropIndex.value : 0
-        );
-      }
-      resetDragState();
-    };
-    const handleColumnTouchStart = (e, column, index) => {
-      if (!props.columnDraggable || !touchTracker) return;
-      touchTracker.onTouchStart(e, e.currentTarget);
-      dragState.value = { type: "column", id: column.id, fromIndex: index };
-    };
-    const handleColumnTouchMove = (e) => {
-      if (!touchTracker || !dragState.value || dragState.value.type !== "column") return;
-      touchTracker.onTouchMove(e);
-    };
-    const handleColumnTouchEnd = () => {
-      if (!touchTracker || !dragState.value || dragState.value.type !== "column") return;
-      const st = touchTracker.onTouchEnd();
-      const colEls = boardRef.value?.querySelectorAll("[data-tiger-taskboard-column]");
-      if (!colEls) {
-        resetDragState();
-        return;
-      }
-      const rects = [];
-      colEls.forEach((el) => rects.push(el.getBoundingClientRect()));
-      const toIdx = tigercatCore.getColumnDropIndex(st.currentX, rects);
-      applyColumnMove(dragState.value.fromIndex, Math.min(toIdx, currentColumns.value.length - 1));
-      resetDragState();
-    };
-    const kbDragState = vue.ref(null);
-    const handleCardKeyDown = (e, card, column) => {
-      if (!props.draggable) return;
-      if (e.key === "Enter" || e.key === " ") {
-        e.preventDefault();
-        if (!kbDragState.value) {
-          const idx = column.cards.findIndex((c) => c.id === card.id);
-          kbDragState.value = { type: "card", id: card.id, fromColumnId: column.id, fromIndex: idx };
-        } else {
-          const cardIdx = column.cards.findIndex((c) => c.id === card.id);
-          if (kbDragState.value.fromColumnId !== void 0) {
-            applyCardMove(kbDragState.value.id, kbDragState.value.fromColumnId, column.id, cardIdx);
-          }
-          kbDragState.value = null;
-        }
-        return;
-      }
-      if (e.key === "Escape" && kbDragState.value) {
-        e.preventDefault();
-        kbDragState.value = null;
-      }
-    };
+    const dragCtrl = tigercatCore.createTaskBoardDragController(
+      {
+        onStateChange: (s) => {
+          dragSnap.value = s;
+        },
+        applyCardMove,
+        applyColumnMove,
+        getBoardEl: () => boardRef.value,
+        getColumnCount: () => currentColumns.value.length
+      },
+      { draggable: props.draggable, columnDraggable: props.columnDraggable }
+    );
+    vue.watch(
+      () => [props.draggable, props.columnDraggable],
+      () => dragCtrl.setOptions({ draggable: props.draggable, columnDraggable: props.columnDraggable })
+    );
     vue.onMounted(() => {
-      setupTouch();
+      dragCtrl.init();
     });
     vue.onBeforeUnmount(() => {
-      cancelAnimationFrame(touchRaf);
+      dragCtrl.dispose();
     });
     const wrapperClasses = vue.computed(
       () => tigercatCore.classNames(
@@ -298,8 +154,8 @@ var TaskBoard = vue.defineComponent({
       () => tigercatCore.mergeStyleValues(attrs.style, props.style)
     );
     const renderCard = (card, column) => {
-      const isDragging = dragState.value?.type === "card" && dragState.value.id === card.id;
-      const isKbGrabbed = kbDragState.value?.id === card.id;
+      const isDragging = dragSnap.value.drag?.type === "card" && dragSnap.value.drag.id === card.id;
+      const isKbGrabbed = dragSnap.value.kbDrag?.id === card.id;
       const cardClasses = tigercatCore.classNames(
         tigercatCore.taskBoardCardClasses,
         isDragging && tigercatCore.taskBoardCardDraggingClasses,
@@ -315,12 +171,16 @@ var TaskBoard = vue.defineComponent({
         "aria-grabbed": isKbGrabbed ? "true" : void 0,
         "data-tiger-taskboard-card": "",
         "data-tiger-taskboard-card-id": String(card.id),
-        onDragstart: (e) => handleCardDragStart(e, card, column),
-        onDragend: handleDragEnd,
-        onTouchstart: (e) => handleTouchStart(e, card, column),
-        onTouchmove: handleTouchMove,
-        onTouchend: handleTouchEnd,
-        onKeydown: (e) => handleCardKeyDown(e, card, column)
+        onDragstart: (e) => {
+          if (e.dataTransfer) dragCtrl.cardDragStart(e.dataTransfer, card, column);
+        },
+        onDragend: () => dragCtrl.dragEnd(),
+        onTouchstart: (e) => dragCtrl.cardTouchStart(e, e.currentTarget, card, column),
+        onTouchmove: (e) => dragCtrl.cardTouchMove(e),
+        onTouchend: () => dragCtrl.cardTouchEnd(),
+        onKeydown: (e) => {
+          if (dragCtrl.cardKeyDown(e.key, card, column)) e.preventDefault();
+        }
       };
       if (slots.card) {
         return vue.h("div", cardAttrs, slots.card({ card, column, isDragging }));
@@ -335,8 +195,8 @@ var TaskBoard = vue.defineComponent({
       ]);
     };
     const renderColumnNode = (column, colIndex) => {
-      const isDropTarget = dragState.value?.type === "card" && dropTargetColumnId.value === column.id;
-      const isColDragging = dragState.value?.type === "column" && dragState.value.id === column.id;
+      const isDropTarget = dragSnap.value.drag?.type === "card" && dragSnap.value.dropTargetColumnId === column.id;
+      const isColDragging = dragSnap.value.drag?.type === "column" && dragSnap.value.drag.id === column.id;
       const wipOver = tigercatCore.isWipExceeded(column);
       const cardCount = props.showCardCount ? tigercatCore.getColumnCardCount(column) : null;
       const colClasses = tigercatCore.classNames(
@@ -387,24 +247,26 @@ var TaskBoard = vue.defineComponent({
         {
           class: tigercatCore.taskBoardColumnHeaderClasses,
           draggable: props.columnDraggable,
-          onDragstart: (e) => handleColumnDragStart(e, column, colIndex),
-          onDragend: handleDragEnd,
-          onTouchstart: (e) => handleColumnTouchStart(e, column, colIndex),
-          onTouchmove: handleColumnTouchMove,
-          onTouchend: handleColumnTouchEnd,
+          onDragstart: (e) => {
+            if (e.dataTransfer) dragCtrl.columnDragStart(e.dataTransfer, column, colIndex);
+          },
+          onDragend: () => dragCtrl.dragEnd(),
+          onTouchstart: (e) => dragCtrl.columnTouchStart(e, e.currentTarget, column, colIndex),
+          onTouchmove: (e) => dragCtrl.columnTouchMove(e),
+          onTouchend: () => dragCtrl.columnTouchEnd(),
           style: props.columnDraggable ? "cursor: grab" : void 0
         },
         headerContent
       );
       const cards = column.cards.length > 0 ? column.cards.flatMap((card, i) => {
         const nodes = [];
-        if (isDropTarget && dropIndex.value === i) {
+        if (isDropTarget && dragSnap.value.dropIndex === i) {
           nodes.push(vue.h("div", { key: `drop-${i}`, class: tigercatCore.taskBoardDropIndicatorClasses }));
         }
         nodes.push(renderCard(card, column));
         return nodes;
       }).concat(
-        isDropTarget && dropIndex.value >= column.cards.length ? [vue.h("div", { key: "drop-end", class: tigercatCore.taskBoardDropIndicatorClasses })] : []
+        isDropTarget && dragSnap.value.dropIndex >= column.cards.length ? [vue.h("div", { key: "drop-end", class: tigercatCore.taskBoardDropIndicatorClasses })] : []
       ) : [
         isDropTarget ? vue.h("div", { key: "drop-empty", class: tigercatCore.taskBoardDropIndicatorClasses }) : slots["empty-column"] ? slots["empty-column"]({ column }) : vue.h(
           "div",
@@ -418,9 +280,15 @@ var TaskBoard = vue.defineComponent({
           class: tigercatCore.taskBoardColumnBodyClasses,
           role: "list",
           "aria-label": column.title,
-          onDragover: (e) => handleCardDragOver(e, column),
-          onDrop: (e) => handleCardDrop(e, column),
-          onDragleave: handleDragLeave
+          onDragover: (e) => {
+            e.preventDefault();
+            dragCtrl.cardDragOver(e.clientY, e.currentTarget, column);
+          },
+          onDrop: (e) => {
+            e.preventDefault();
+            if (e.dataTransfer) dragCtrl.cardDrop(e.dataTransfer, column);
+          },
+          onDragleave: (e) => dragCtrl.dragLeave(e.currentTarget, e.relatedTarget)
         },
         cards
       );
@@ -453,8 +321,14 @@ var TaskBoard = vue.defineComponent({
           class: colClasses,
           "data-tiger-taskboard-column": "",
           "data-tiger-taskboard-column-id": String(column.id),
-          onDragover: dragState.value?.type === "column" ? handleColumnDragOver : void 0,
-          onDrop: dragState.value?.type === "column" ? handleColumnDrop : void 0
+          onDragover: dragSnap.value.drag?.type === "column" ? (e) => {
+            e.preventDefault();
+            dragCtrl.columnDragOver();
+          } : void 0,
+          onDrop: dragSnap.value.drag?.type === "column" ? (e) => {
+            e.preventDefault();
+            if (e.dataTransfer) dragCtrl.columnDrop(e.dataTransfer, e.clientX);
+          } : void 0
         },
         [header, body, footer]
       );

package/dist/{chunk-W6TMZ7ZT.js → chunk-GOBWUEHV.js}

@@ -24,107 +24,75 @@ var RichTextEditor = vue.defineComponent({
     },
     readOnly: { type: Boolean, default: false },
     disabled: { type: Boolean, default: false },
-    className: { type: String, default: void 0 }
+    className: { type: String, default: void 0 },
+    engine: {
+      type: Object,
+      default: void 0
+    }
   },
   emits: ["update:value", "change"],
   setup(props, { emit, attrs }) {
     const editorRef = vue.ref(null);
     const internalValue = vue.ref(props.defaultValue || "");
     const activeFormats = vue.ref(/* @__PURE__ */ new Set());
+    let engineInstance = null;
     const isControlled = vue.computed(() => props.value !== void 0);
     const currentContent = vue.computed(() => isControlled.value ? props.value : internalValue.value);
-    const toolbarButtons = vue.computed(() => props.toolbar ?? tigercatCore.defaultToolbar);
+    const toolbarItems = vue.computed(() => props.toolbar ?? tigercatCore.defaultToolbar);
     const isEmpty = vue.computed(() => tigercatCore.isContentEmpty(currentContent.value));
     vue.watch(
       () => props.value,
       (newVal) => {
-        if (newVal !== void 0 && editorRef.value) {
-          const sanitized = tigercatCore.sanitizeHtml(newVal);
-          if (editorRef.value.innerHTML !== sanitized) {
-            editorRef.value.innerHTML = sanitized;
-          }
+        if (newVal !== void 0 && engineInstance) {
+          engineInstance.setValue(newVal);
         }
       }
     );
+    vue.watch(
+      () => [props.readOnly, props.disabled],
+      ([ro, dis]) => {
+        engineInstance?.setReadOnly(ro, dis);
+      }
+    );
     vue.onMounted(() => {
-      if (editorRef.value) {
-        const initial = tigercatCore.sanitizeHtml(currentContent.value);
-        if (initial) {
-          editorRef.value.innerHTML = initial;
+      if (!editorRef.value) return;
+      const engine = props.engine ?? tigercatCore.builtinRichTextEngine;
+      engineInstance = engine.create({
+        element: editorRef.value,
+        initialValue: currentContent.value,
+        readOnly: props.readOnly,
+        disabled: props.disabled,
+        placeholder: props.placeholder,
+        toolbar: toolbarItems.value,
+        notifyChange(html) {
+          if (!isControlled.value) internalValue.value = html;
+          emit("update:value", html);
+          emit("change", html);
+        },
+        notifyActiveFormats(next) {
+          activeFormats.value = next;
         }
-      }
+      });
     });
-    function updateActiveFormats() {
-      if (typeof document === "undefined") return;
-      const next = /* @__PURE__ */ new Set();
-      if (document.queryCommandState("bold")) next.add("bold");
-      if (document.queryCommandState("italic")) next.add("italic");
-      if (document.queryCommandState("underline")) next.add("underline");
-      if (document.queryCommandState("strikeThrough")) next.add("strikethrough");
-      if (document.queryCommandState("insertUnorderedList")) next.add("bulletList");
-      if (document.queryCommandState("insertOrderedList")) next.add("orderedList");
-      activeFormats.value = next;
-    }
-    function execAction(actionName) {
+    vue.onBeforeUnmount(() => {
+      engineInstance?.destroy();
+      engineInstance = null;
+    });
+    function execButtonAction(btn) {
       if (props.readOnly || props.disabled) return;
-      editorRef.value?.focus();
-      const mapping = tigercatCore.mapToolbarAction(actionName);
-      if (mapping) {
-        document.execCommand(mapping.command, false, mapping.argument);
-        handleInput();
-        updateActiveFormats();
-        return;
-      }
-      if (actionName === "codeBlock") {
-        document.execCommand("formatBlock", false, "PRE");
-        handleInput();
+      if (btn.action && editorRef.value) {
+        btn.action(editorRef.value);
         return;
       }
-      if (actionName === "link") {
-        const url = typeof window !== "undefined" ? window.prompt("Enter URL:") : null;
-        if (url && tigercatCore.isValidUrl(url)) {
-          document.execCommand("createLink", false, url);
-          handleInput();
-        }
-        return;
-      }
-      if (actionName === "image") {
-        const url = typeof window !== "undefined" ? window.prompt("Enter image URL:") : null;
-        if (url && tigercatCore.isValidUrl(url)) {
-          document.execCommand("insertImage", false, url);
-          handleInput();
-        }
-      }
-    }
-    function handleInput() {
-      if (!editorRef.value) return;
-      const html = editorRef.value.innerHTML;
-      const sanitized = tigercatCore.sanitizeHtml(html);
-      if (!isControlled.value) {
-        internalValue.value = sanitized;
-      }
-      emit("update:value", sanitized);
-      emit("change", sanitized);
+      engineInstance?.exec(btn.name);
     }
     function handleKeydown(e) {
-      const match = tigercatCore.findHotkeyMatch(toolbarButtons.value, e);
+      const match = tigercatCore.findHotkeyMatch(toolbarItems.value, e);
       if (match) {
         e.preventDefault();
-        execAction(match);
+        execButtonAction(match);
       }
     }
-    let selectionHandler = null;
-    vue.onMounted(() => {
-      if (typeof document !== "undefined") {
-        selectionHandler = updateActiveFormats;
-        document.addEventListener("selectionchange", selectionHandler);
-      }
-    });
-    vue.onBeforeUnmount(() => {
-      if (selectionHandler && typeof document !== "undefined") {
-        document.removeEventListener("selectionchange", selectionHandler);
-      }
-    });
     const containerClasses = vue.computed(
       () => tigercatCore.classNames(
         tigercatCore.getRichTextContainerClasses(props.disabled, props.className),
@@ -145,8 +113,17 @@ var RichTextEditor = vue.defineComponent({
           role: "toolbar",
           "aria-label": "Text formatting"
         },
-        toolbarButtons.value.map(
-          (btn) => vue.h(
+        toolbarItems.value.map((item, idx) => {
+          if (tigercatCore.isToolbarSeparator(item)) {
+            return vue.h("div", {
+              key: `sep-${idx}`,
+              class: tigercatCore.richTextToolbarSeparatorClasses,
+              role: "separator",
+              "aria-orientation": "vertical"
+            });
+          }
+          const btn = item;
+          return vue.h(
             "button",
             {
               key: btn.name,
@@ -158,24 +135,22 @@ var RichTextEditor = vue.defineComponent({
               disabled: props.disabled || props.readOnly,
               onClick: (e) => {
                 e.preventDefault();
-                execAction(btn.name);
+                execButtonAction(btn);
               }
             },
-            btn.label
-          )
-        )
+            btn.icon ? vue.h("span", { innerHTML: btn.icon }) : btn.label
+          );
+        })
       );
       const editorEl = vue.h("div", {
         ref: editorRef,
         class: editorAreaClasses.value,
-        contenteditable: !(props.readOnly || props.disabled),
         role: "textbox",
         "aria-multiline": true,
         "aria-readonly": props.readOnly || void 0,
         "aria-disabled": props.disabled || void 0,
         "aria-placeholder": props.placeholder,
         "data-placeholder": props.placeholder,
-        onInput: handleInput,
         onKeydown: handleKeydown
       });
       const placeholderEl = isEmpty.value && props.placeholder ? vue.h(

package/dist/{chunk-IOBJYUUO.mjs → chunk-GVZRR2WP.mjs}

@@ -1,4 +1,5 @@
-import { useFloatingPopup } from './chunk-6A57RY3H.mjs';
+import { useFloatingPopup } from './chunk-DBTS5QBX.mjs';
+import { renderVueBodyTeleport } from './chunk-7RIWAO2A.mjs';
 import { defineComponent, computed, h } from 'vue';
 import { createFloatingIdFactory, classNames, getPopoverContainerClasses, coerceClassValue, getPopoverTriggerClasses, getPopoverContentClasses, POPOVER_TITLE_CLASSES, POPOVER_TEXT_CLASSES } from '@expcat/tigercat-core';
 
@@ -80,31 +81,33 @@ var Popover = defineComponent({
             defaultSlot
           ),
           // Floating content
-          currentVisible.value ? h("div", { ref: floatingRef, style: floatingStyles.value, "aria-hidden": false }, [
-            h(
-              "div",
-              {
-                id: popoverId,
-                role: "dialog",
-                "aria-modal": "false",
-                "aria-labelledby": hasTitle ? titleId : void 0,
-                "aria-describedby": hasContent ? contentId : void 0,
-                class: contentClasses.value
-              },
-              [
-                hasTitle && h(
-                  "div",
-                  { id: titleId, class: POPOVER_TITLE_CLASSES },
-                  slots.title ? slots.title() : props.title
-                ),
-                hasContent && h(
-                  "div",
-                  { id: contentId, class: POPOVER_TEXT_CLASSES },
-                  slots.content ? slots.content() : props.content
-                )
-              ].filter(Boolean)
-            )
-          ]) : null
+          currentVisible.value ? renderVueBodyTeleport(
+            h("div", { ref: floatingRef, style: floatingStyles.value, "aria-hidden": false }, [
+              h(
+                "div",
+                {
+                  id: popoverId,
+                  role: "dialog",
+                  "aria-modal": "false",
+                  "aria-labelledby": hasTitle ? titleId : void 0,
+                  "aria-describedby": hasContent ? contentId : void 0,
+                  class: contentClasses.value
+                },
+                [
+                  hasTitle && h(
+                    "div",
+                    { id: titleId, class: POPOVER_TITLE_CLASSES },
+                    slots.title ? slots.title() : props.title
+                  ),
+                  hasContent && h(
+                    "div",
+                    { id: contentId, class: POPOVER_TEXT_CLASSES },
+                    slots.content ? slots.content() : props.content
+                  )
+                ].filter(Boolean)
+              )
+            ])
+          ) : null
         ]
       );
     };