quoin-editor 1.0.0 → 1.0.2

package/dist/{chunk-ZGZEJCRV.js → chunk-T43RZTUT.js}

@@ -11,6 +11,7 @@ import {
   drawnBlockCount,
   hostKey,
   isComposingKey,
+  listen,
   moveToNeighbour,
   onBlock,
   regionInline,
@@ -25,14 +26,15 @@ import {
   useToggleOpen,
   visibleBlockIndexes,
   wholeState
-} from "./chunk-ZS2WA357.js";
+} from "./chunk-EPARJI4V.js";
 import {
   blockByType,
   defineBlock,
   devWarn,
   highlightedLines,
-  paletteBlocks
-} from "./chunk-XEBWC7ZL.js";
+  paletteBlocks,
+  tokenColour
+} from "./chunk-O4Z2WMFF.js";
 import {
   HISTORY_GROUP,
   LINE_JOIN,
@@ -98,10 +100,10 @@ import {
   unsetLink,
   unsetMark,
   validateSelection
-} from "./chunk-HJIQT3S5.js";
+} from "./chunk-OBMBSU2S.js";
 import {
   sameValue
-} from "./chunk-NOKWNK2O.js";
+} from "./chunk-RJRX34BZ.js";
 import {
   PALETTE,
   SCHEME,
@@ -127,7 +129,7 @@ import {
   specFor,
   str,
   text
-} from "./chunk-LCQSG4M6.js";
+} from "./chunk-4XFXB37X.js";
 
 // src/canvas/BlockCanvas.tsx
 import { forwardRef as forwardRef8, useImperativeHandle as useImperativeHandle2, useMemo as useMemo17, useState as useState19 } from "react";
@@ -393,7 +395,7 @@ var captionText = (markdown) => inlineText(parseInline(markdown), () => "");
 import { Fragment, useMemo as useMemo2 } from "react";
 import { jsx as jsx2, jsxs } from "react/jsx-runtime";
 function Token({ text: text2, color, className }) {
-  return /* @__PURE__ */ jsx2("span", { style: { color }, className, children: text2 });
+  return /* @__PURE__ */ jsx2("span", { style: { color: tokenColour(color) }, className, children: text2 });
 }
 function HighlightOverlay({ code, language: language2, drawnRef, ...props }) {
   const { highlight } = useQuoin();
@@ -2852,12 +2854,7 @@ function useOutsidePress(element, ownerDocument, onPress) {
       if (touched !== null && !inside(event.target)) latest.current(touched);
       touched = null;
     };
-    doc.addEventListener("pointerdown", down, true);
-    doc.addEventListener("click", click, true);
-    return () => {
-      doc.removeEventListener("pointerdown", down, true);
-      doc.removeEventListener("click", click, true);
-    };
+    return listen(doc, { pointerdown: down, click }, true);
   }, [element, ownerDocument]);
 }
 
@@ -3339,37 +3336,30 @@ function ListMarker(props) {
   return /* @__PURE__ */ jsx36("span", { className: "quoin-marker", "aria-hidden": "true", children: text2 });
 }
 
-// src/blocks/text/TaskCheckbox.tsx
-import { jsx as jsx37 } from "react/jsx-runtime";
-function TaskCheckbox2({ block, controller, labelledBy }) {
-  const labels = useLabels();
-  return /* @__PURE__ */ jsx37(TaskCheckbox, { block, controller, label: labels.task, labelledBy });
-}
-
 // src/blocks/text/MarkdownBlock.tsx
-import { jsx as jsx38, jsxs as jsxs22 } from "react/jsx-runtime";
+import { jsx as jsx37, jsxs as jsxs22 } from "react/jsx-runtime";
 var REGION = "text";
 var HEADING_LEVELS = ["mt-6 text-3xl", "mt-5 text-2xl", "mt-4 text-xl", "mt-3 text-lg", "mt-3 text-base", "mt-3 text-sm"];
 var headingStyles = (level) => `quoin-heading mb-1 font-semibold leading-tight in-[[data-quoin-block]:first-child]:mt-0 ${HEADING_LEVELS[level - 1]}`;
 function Heading({ block }) {
   const labels = useLabels();
   const level = headingLevel(block.attrs.level);
-  return /* @__PURE__ */ jsx38("div", { role: "heading", "aria-level": level, className: headingStyles(level), children: /* @__PURE__ */ jsx38(EditableRegion, { block: block.id, region: REGION, label: labels.heading(level) }) });
+  return /* @__PURE__ */ jsx37("div", { role: "heading", "aria-level": level, className: headingStyles(level), children: /* @__PURE__ */ jsx37(EditableRegion, { block: block.id, region: REGION, label: labels.heading(level) }) });
 }
 function NumberedItem({ block, controller }) {
   const labels = useLabels();
   const number = useOrderedNumber(controller, block.id);
   return /* @__PURE__ */ jsxs22("div", { className: "quoin-list-item", "data-list": "ordered", children: [
-    /* @__PURE__ */ jsx38(ListMarker, { list: "ordered", number, depth: block.indent }),
-    /* @__PURE__ */ jsx38(EditableRegion, { block: block.id, region: REGION, label: labels.numberedItem(number) })
+    /* @__PURE__ */ jsx37(ListMarker, { list: "ordered", number, depth: block.indent }),
+    /* @__PURE__ */ jsx37(EditableRegion, { block: block.id, region: REGION, label: labels.numberedItem(number) })
   ] });
 }
 function TaskItem({ block, controller }) {
   const labels = useLabels();
   const hostId = useRegionDomId(block.id, REGION);
   return /* @__PURE__ */ jsxs22("div", { className: "quoin-task", "data-checked": block.attrs.checked === true, children: [
-    /* @__PURE__ */ jsx38(TaskCheckbox2, { block, controller, labelledBy: hostId }),
-    /* @__PURE__ */ jsx38(EditableRegion, { id: hostId, block: block.id, region: REGION, label: labels.task })
+    /* @__PURE__ */ jsx37(TaskCheckbox, { block, controller, label: labels.task, labelledBy: hostId }),
+    /* @__PURE__ */ jsx37(EditableRegion, { id: hostId, block: block.id, region: REGION, label: labels.task })
   ] });
 }
 var MarkdownBlock = (props) => {
@@ -3377,20 +3367,20 @@ var MarkdownBlock = (props) => {
   const labels = useLabels();
   switch (block.attrs.kind) {
     case "heading":
-      return /* @__PURE__ */ jsx38(Heading, { block });
+      return /* @__PURE__ */ jsx37(Heading, { block });
     case "bullet":
       return /* @__PURE__ */ jsxs22("div", { className: "quoin-list-item", "data-list": "bullet", children: [
-        /* @__PURE__ */ jsx38(ListMarker, { list: "bullet", depth: block.indent }),
-        /* @__PURE__ */ jsx38(EditableRegion, { block: block.id, region: REGION, label: labels.bulletItem })
+        /* @__PURE__ */ jsx37(ListMarker, { list: "bullet", depth: block.indent }),
+        /* @__PURE__ */ jsx37(EditableRegion, { block: block.id, region: REGION, label: labels.bulletItem })
       ] });
     case "ordered":
-      return /* @__PURE__ */ jsx38(NumberedItem, { ...props });
+      return /* @__PURE__ */ jsx37(NumberedItem, { ...props });
     case "task":
-      return /* @__PURE__ */ jsx38(TaskItem, { ...props });
+      return /* @__PURE__ */ jsx37(TaskItem, { ...props });
     case "quote":
-      return /* @__PURE__ */ jsx38("div", { className: "quoin-quote", children: /* @__PURE__ */ jsx38(EditableRegion, { block: block.id, region: REGION, label: labels.quote }) });
+      return /* @__PURE__ */ jsx37("div", { className: "quoin-quote", children: /* @__PURE__ */ jsx37(EditableRegion, { block: block.id, region: REGION, label: labels.quote }) });
     default:
-      return /* @__PURE__ */ jsx38(EditableRegion, { block: block.id, region: REGION, label: labels.paragraph });
+      return /* @__PURE__ */ jsx37(EditableRegion, { block: block.id, region: REGION, label: labels.paragraph });
   }
 };
 
@@ -3405,14 +3395,14 @@ function useNestedBlocks(controller, blockId) {
 }
 
 // src/blocks/text/ToggleBlock.tsx
-import { jsx as jsx39, jsxs as jsxs23 } from "react/jsx-runtime";
+import { jsx as jsx38, jsxs as jsxs23 } from "react/jsx-runtime";
 var ToggleBlock = ({ block, controller }) => {
   const labels = useLabels();
   const domId = useBlockDomId();
   const nested = useNestedBlocks(controller, block.id);
   const open = useToggleOpen(controller, block);
   return /* @__PURE__ */ jsxs23("div", { className: "quoin-toggle", "data-open": open, children: [
-    /* @__PURE__ */ jsx39(
+    /* @__PURE__ */ jsx38(
       ToggleChevron,
       {
         block,
@@ -3421,7 +3411,7 @@ var ToggleBlock = ({ block, controller }) => {
         controls: nested.length === 0 ? void 0 : nested.map(domId).join(" ")
       }
     ),
-    /* @__PURE__ */ jsx39(EditableRegion, { block: block.id, region: "text", label: labels.toggle })
+    /* @__PURE__ */ jsx38(EditableRegion, { block: block.id, region: "text", label: labels.toggle })
   ] });
 };
 
@@ -3494,12 +3484,12 @@ function turnIntoTargets(labels) {
 }
 
 // src/gutter/TurnIntoMenu.tsx
-import { jsx as jsx40, jsxs as jsxs24 } from "react/jsx-runtime";
+import { jsx as jsx39, jsxs as jsxs24 } from "react/jsx-runtime";
 function TurnIntoItems({ kit, controller, blockIds }) {
   const { blockTypes, labels } = useQuoin();
   const targets = turnIntoTargets(labels).filter((target) => drawsType(blockTypes, target.type));
   return targets.map((target) => /* @__PURE__ */ jsxs24(kit.Item, { onSelect: () => runOnBlocks(controller, blockIds, setBlockType(target.type, target.attrs)), children: [
-    /* @__PURE__ */ jsx40(MenuIcon, { icon: target.icon }),
+    /* @__PURE__ */ jsx39(MenuIcon, { icon: target.icon }),
     target.label
   ] }, target.id));
 }
@@ -3508,15 +3498,15 @@ function TurnIntoMenu(props) {
   const labels = useLabels();
   return /* @__PURE__ */ jsxs24(kit.Sub, { children: [
     /* @__PURE__ */ jsxs24(kit.SubTrigger, { children: [
-      /* @__PURE__ */ jsx40(MenuIcon, { icon: Repeat2 }),
+      /* @__PURE__ */ jsx39(MenuIcon, { icon: Repeat2 }),
       labels.turnInto
     ] }),
-    /* @__PURE__ */ jsx40(kit.SubContent, { children: /* @__PURE__ */ jsx40(TurnIntoItems, { ...props }) })
+    /* @__PURE__ */ jsx39(kit.SubContent, { children: /* @__PURE__ */ jsx39(TurnIntoItems, { ...props }) })
   ] });
 }
 
 // src/gutter/BlockMenuItems.tsx
-import { Fragment as Fragment7, jsx as jsx41, jsxs as jsxs25 } from "react/jsx-runtime";
+import { Fragment as Fragment7, jsx as jsx40, jsxs as jsxs25 } from "react/jsx-runtime";
 var DESTRUCTIVE = "text-destructive focus:text-destructive";
 function ActionItem({ kit, controller, action, blockIds }) {
   const labels = useLabels();
@@ -3528,9 +3518,9 @@ function ActionItem({ kit, controller, action, blockIds }) {
       "aria-keyshortcuts": hint?.aria,
       onSelect: () => action.run(controller, blockIds),
       children: [
-        /* @__PURE__ */ jsx41(MenuIcon, { icon: action.icon }),
+        /* @__PURE__ */ jsx40(MenuIcon, { icon: action.icon }),
         action.label,
-        hint !== null && /* @__PURE__ */ jsx41(kit.Shortcut, { "aria-hidden": "true", children: hint.text })
+        hint !== null && /* @__PURE__ */ jsx40(kit.Shortcut, { "aria-hidden": "true", children: hint.text })
       ]
     }
   );
@@ -3543,14 +3533,14 @@ function BlockMenuItems({ kit, controller, blocks, styled, title, actions }) {
   const anyMarkdown = styled.some((block) => block.type === "MARKDOWN");
   const allCallouts = styled.length > 0 && styled.every((block) => block.type === "CALLOUT");
   return /* @__PURE__ */ jsxs25(Fragment7, { children: [
-    /* @__PURE__ */ jsx41(kit.Label, { className: "text-muted-foreground text-xs", children: title }),
-    anyText && /* @__PURE__ */ jsx41(TurnIntoMenu, { kit, controller, blockIds: styled.map((block) => block.id) }),
-    anyMarkdown && /* @__PURE__ */ jsx41(ColorMenu, { kit, controller, blocks: styled }),
-    allCallouts && /* @__PURE__ */ jsx41(CalloutMenus, { kit, controller, blocks: styled }),
-    (anyText || anyMarkdown || allCallouts) && /* @__PURE__ */ jsx41(kit.Separator, {}),
+    /* @__PURE__ */ jsx40(kit.Label, { className: "text-muted-foreground text-xs", children: title }),
+    anyText && /* @__PURE__ */ jsx40(TurnIntoMenu, { kit, controller, blockIds: styled.map((block) => block.id) }),
+    anyMarkdown && /* @__PURE__ */ jsx40(ColorMenu, { kit, controller, blocks: styled }),
+    allCallouts && /* @__PURE__ */ jsx40(CalloutMenus, { kit, controller, blocks: styled }),
+    (anyText || anyMarkdown || allCallouts) && /* @__PURE__ */ jsx40(kit.Separator, {}),
     shown.map((action) => /* @__PURE__ */ jsxs25(Fragment6, { children: [
-      action.destructive && /* @__PURE__ */ jsx41(kit.Separator, {}),
-      /* @__PURE__ */ jsx41(ActionItem, { kit, controller, action, blockIds })
+      action.destructive && /* @__PURE__ */ jsx40(kit.Separator, {}),
+      /* @__PURE__ */ jsx40(ActionItem, { kit, controller, action, blockIds })
     ] }, action.id))
   ] });
 }
@@ -3613,12 +3603,7 @@ function useContextMenuOpener(controller, store, trigger) {
       openBlockMenuAt(store, controller.editor.state, block, clientX, clientY);
       hidden.dispatchEvent(new MouseEvent("contextmenu", { bubbles: true, cancelable: true, clientX, clientY }));
     };
-    root.addEventListener("mousedown", onMouseDown);
-    root.addEventListener("contextmenu", onContextMenu);
-    return () => {
-      root.removeEventListener("mousedown", onMouseDown);
-      root.removeEventListener("contextmenu", onContextMenu);
-    };
+    return listen(root, { mousedown: onMouseDown, contextmenu: onContextMenu });
   }, [controller, store, trigger]);
 }
 
@@ -3676,12 +3661,12 @@ function useMenuBlocks(controller, store, menu) {
 }
 
 // src/gutter/BlockContextMenu.tsx
-import { jsx as jsx42, jsxs as jsxs26 } from "react/jsx-runtime";
+import { jsx as jsx41, jsxs as jsxs26 } from "react/jsx-runtime";
 function BlockContextMenuContent({ controller, store, actions, menu }) {
   const labels = useLabels();
   const { blocks, styled, title } = useMenuBlocks(controller, store, menu);
   if (blocks.length === 0) return null;
-  return /* @__PURE__ */ jsx42(ContextMenuContent, { "aria-label": labels.blockMenu(title), onCloseAutoFocus: returnFocusToText(controller), children: /* @__PURE__ */ jsx42(
+  return /* @__PURE__ */ jsx41(ContextMenuContent, { "aria-label": labels.blockMenu(title), onCloseAutoFocus: returnFocusToText(controller), children: /* @__PURE__ */ jsx41(
     BlockMenuItems,
     {
       kit: CONTEXT_KIT,
@@ -3706,8 +3691,8 @@ function BlockContextMenu({ controller, store, actions }) {
         if (!next) closeBlockMenu(store);
       },
       children: [
-        /* @__PURE__ */ jsx42(ContextMenuTrigger, { ref: trigger, hidden: true }),
-        open && /* @__PURE__ */ jsx42(BlockContextMenuContent, { controller, store, actions, menu })
+        /* @__PURE__ */ jsx41(ContextMenuTrigger, { ref: trigger, hidden: true }),
+        open && /* @__PURE__ */ jsx41(BlockContextMenuContent, { controller, store, actions, menu })
       ]
     }
   );
@@ -3730,7 +3715,7 @@ import { GripVertical, Plus } from "lucide-react";
 
 // src/drag/DragOverlay.tsx
 import { forwardRef as forwardRef6, useImperativeHandle, useRef as useRef18 } from "react";
-import { Fragment as Fragment8, jsx as jsx43, jsxs as jsxs27 } from "react/jsx-runtime";
+import { Fragment as Fragment8, jsx as jsx42, jsxs as jsxs27 } from "react/jsx-runtime";
 var UNIQUE_OR_FOCUSABLE = ["id", "data-block-id", "contenteditable", "tabindex"];
 function copyOf(shell) {
   const copy = shell.cloneNode(true);
@@ -3771,7 +3756,7 @@ var DragOverlay = forwardRef6(function DragOverlay2(_props, ref) {
     }
   }));
   return /* @__PURE__ */ jsxs27(Fragment8, { children: [
-    /* @__PURE__ */ jsx43(
+    /* @__PURE__ */ jsx42(
       "div",
       {
         ref: ghost,
@@ -3781,7 +3766,7 @@ var DragOverlay = forwardRef6(function DragOverlay2(_props, ref) {
         className: "pointer-events-none fixed z-20 opacity-50"
       }
     ),
-    /* @__PURE__ */ jsx43(
+    /* @__PURE__ */ jsx42(
       "div",
       {
         ref: line,
@@ -3971,11 +3956,9 @@ function followPress(press, root, view) {
   function finish() {
     if (done) return;
     done = true;
-    doc.removeEventListener("pointermove", onPointerMove);
-    doc.removeEventListener("pointerup", onPointerUp);
-    doc.removeEventListener("pointercancel", finish);
-    view.removeEventListener("blur", finish);
-    view.removeEventListener("keydown", onKeyDown, true);
+    unlistenDocument();
+    unlistenBlur();
+    unlistenKeys();
     scroll.stop();
     unsubscribe();
     if (active === null) return;
@@ -4011,11 +3994,9 @@ function followPress(press, root, view) {
     event.stopPropagation();
     finish();
   }
-  doc.addEventListener("pointermove", onPointerMove);
-  doc.addEventListener("pointerup", onPointerUp);
-  doc.addEventListener("pointercancel", finish);
-  view.addEventListener("blur", finish);
-  view.addEventListener("keydown", onKeyDown, true);
+  const unlistenDocument = listen(doc, { pointermove: onPointerMove, pointerup: onPointerUp, pointercancel: finish });
+  const unlistenBlur = listen(view, { blur: finish });
+  const unlistenKeys = listen(view, { keydown: onKeyDown }, true);
   return finish;
 }
 function pressDragHandle(press) {
@@ -4079,19 +4060,19 @@ function addBlockBelow(controller, blockId) {
 }
 
 // src/gutter/BlockMenu.tsx
-import { jsx as jsx44, jsxs as jsxs28 } from "react/jsx-runtime";
+import { jsx as jsx43, jsxs as jsxs28 } from "react/jsx-runtime";
 function BlockMenuContent({ controller, store, actions, menu }) {
   const labels = useLabels();
   const { blocks, styled, title } = useMenuBlocks(controller, store, menu);
   if (blocks.length === 0) return null;
-  return /* @__PURE__ */ jsx44(
+  return /* @__PURE__ */ jsx43(
     DropdownMenuContent,
     {
       align: "start",
       "aria-label": labels.blockMenu(title),
       "aria-labelledby": void 0,
       onCloseAutoFocus: returnFocusToText(controller),
-      children: /* @__PURE__ */ jsx44(
+      children: /* @__PURE__ */ jsx43(
         BlockMenuItems,
         {
           kit: DROPDOWN_KIT,
@@ -4117,8 +4098,8 @@ function BlockMenu({ controller, store, actions, onOpen, children }) {
         else closeBlockMenu(store);
       },
       children: [
-        /* @__PURE__ */ jsx44(DropdownMenuTrigger, { asChild: true, children }),
-        open && /* @__PURE__ */ jsx44(BlockMenuContent, { controller, store, actions, menu })
+        /* @__PURE__ */ jsx43(DropdownMenuTrigger, { asChild: true, children }),
+        open && /* @__PURE__ */ jsx43(BlockMenuContent, { controller, store, actions, menu })
       ]
     }
   );
@@ -4206,16 +4187,7 @@ function useGutterTarget(controller, store, gutter) {
     const onFocusIn = () => setFocusWithin(true);
     const onFocusOut = (event) => setFocusWithin(root.contains(event.relatedTarget));
     setFocusWithin(root.contains(root.ownerDocument.activeElement));
-    root.addEventListener("pointermove", onPointerMove);
-    root.addEventListener("pointerleave", onPointerLeave);
-    root.addEventListener("focusin", onFocusIn);
-    root.addEventListener("focusout", onFocusOut);
-    return () => {
-      root.removeEventListener("pointermove", onPointerMove);
-      root.removeEventListener("pointerleave", onPointerLeave);
-      root.removeEventListener("focusin", onFocusIn);
-      root.removeEventListener("focusout", onFocusOut);
-    };
+    return listen(root, { pointermove: onPointerMove, pointerleave: onPointerLeave, focusin: onFocusIn, focusout: onFocusOut });
   }, [controller, store, gutter]);
   const fallback = focusWithin ? head : null;
   const target = hovered ?? fallback;
@@ -4223,7 +4195,7 @@ function useGutterTarget(controller, store, gutter) {
 }
 
 // src/gutter/Gutter.tsx
-import { Fragment as Fragment9, jsx as jsx45, jsxs as jsxs29 } from "react/jsx-runtime";
+import { Fragment as Fragment9, jsx as jsx44, jsxs as jsxs29 } from "react/jsx-runtime";
 var GUTTER = "absolute top-0 left-0 z-10 flex items-center gap-0.5 pointer-coarse:not-data-current:hidden";
 var ADD_BELOW = "text-muted-foreground pointer-coarse:hidden";
 function Gutter({ controller, store, actions }) {
@@ -4252,7 +4224,7 @@ function Gutter({ controller, store, actions }) {
         "data-current": focused || menuOpen ? "" : void 0,
         ...{ [GUTTER_BLOCK]: target ?? void 0 },
         children: [
-          /* @__PURE__ */ jsx45(
+          /* @__PURE__ */ jsx44(
             Button,
             {
               type: "button",
@@ -4263,10 +4235,10 @@ function Gutter({ controller, store, actions }) {
               className: ADD_BELOW,
               onPointerDown: keepFocus,
               onClick: addBelow,
-              children: /* @__PURE__ */ jsx45(Plus, {})
+              children: /* @__PURE__ */ jsx44(Plus, {})
             }
           ),
-          /* @__PURE__ */ jsx45(BlockMenu, { controller, store, actions, onOpen: openMenu, children: /* @__PURE__ */ jsx45(
+          /* @__PURE__ */ jsx44(BlockMenu, { controller, store, actions, onOpen: openMenu, children: /* @__PURE__ */ jsx44(
             Button,
             {
               type: "button",
@@ -4285,13 +4257,13 @@ function Gutter({ controller, store, actions }) {
                 menuOpenAtPress.current = false;
                 if (!drag.takeClick(event) && !closing) openMenu();
               },
-              children: /* @__PURE__ */ jsx45(GripVertical, {})
+              children: /* @__PURE__ */ jsx44(GripVertical, {})
             }
           ) })
         ]
       }
     ),
-    /* @__PURE__ */ jsx45(DragOverlay, { ref: overlay })
+    /* @__PURE__ */ jsx44(DragOverlay, { ref: overlay })
   ] });
 }
 
@@ -4390,7 +4362,7 @@ import { AlignCenter as AlignCenter2, AlignJustify, AlignLeft as AlignLeft2, Ali
 
 // src/menus/bubble/ToolbarMenu.tsx
 import { useRef as useRef21 } from "react";
-import { jsx as jsx46, jsxs as jsxs30 } from "react/jsx-runtime";
+import { jsx as jsx45, jsxs as jsxs30 } from "react/jsx-runtime";
 function ToolbarMenu({ controller, trigger, children }) {
   const fromToolbar = useRef21(false);
   return /* @__PURE__ */ jsxs30(
@@ -4400,8 +4372,8 @@ function ToolbarMenu({ controller, trigger, children }) {
         if (open) fromToolbar.current = isBubblePart(document.activeElement, controller);
       },
       children: [
-        /* @__PURE__ */ jsx46(DropdownMenuTrigger, { asChild: true, children: trigger }),
-        /* @__PURE__ */ jsx46(
+        /* @__PURE__ */ jsx45(DropdownMenuTrigger, { asChild: true, children: trigger }),
+        /* @__PURE__ */ jsx45(
           DropdownMenuContent,
           {
             align: "start",
@@ -4418,7 +4390,7 @@ function ToolbarMenu({ controller, trigger, children }) {
 }
 
 // src/menus/bubble/AlignDropdown.tsx
-import { jsx as jsx47, jsxs as jsxs31 } from "react/jsx-runtime";
+import { jsx as jsx46, jsxs as jsxs31 } from "react/jsx-runtime";
 var ICONS = { left: AlignLeft2, center: AlignCenter2, right: AlignRight2, justify: AlignJustify };
 var ALIGNS2 = Object.keys(ICONS);
 var LABEL_KEYS = { left: "alignLeft", center: "alignCenter", right: "alignRight", justify: "alignJustify" };
@@ -4433,16 +4405,16 @@ function AlignDropdown({ controller, state }) {
   const value = sharedAlign(state);
   if (value === null) return null;
   const Icon = value === "" ? AlignLeft2 : ICONS[value];
-  const trigger = /* @__PURE__ */ jsx47(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": labels.align, children: /* @__PURE__ */ jsx47(Icon, {}) });
-  return /* @__PURE__ */ jsx47(ToolbarMenu, { controller, trigger, children: /* @__PURE__ */ jsx47(DropdownMenuRadioGroup, { value, onValueChange: (align) => controller.run(setTextAlign(align)), children: ALIGNS2.map((align) => /* @__PURE__ */ jsxs31(DropdownMenuRadioItem, { value: align, indicator: /* @__PURE__ */ jsx47(CheckIcon5, { className: "size-4" }), children: [
-    /* @__PURE__ */ jsx47(MenuIcon, { icon: ICONS[align] }),
+  const trigger = /* @__PURE__ */ jsx46(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": labels.align, children: /* @__PURE__ */ jsx46(Icon, {}) });
+  return /* @__PURE__ */ jsx46(ToolbarMenu, { controller, trigger, children: /* @__PURE__ */ jsx46(DropdownMenuRadioGroup, { value, onValueChange: (align) => controller.run(setTextAlign(align)), children: ALIGNS2.map((align) => /* @__PURE__ */ jsxs31(DropdownMenuRadioItem, { value: align, indicator: /* @__PURE__ */ jsx46(CheckIcon5, { className: "size-4" }), children: [
+    /* @__PURE__ */ jsx46(MenuIcon, { icon: ICONS[align] }),
     labels[LABEL_KEYS[align]]
   ] }, align)) }) });
 }
 
 // src/menus/bubble/ColorPopover.tsx
 import { Baseline } from "lucide-react";
-import { jsx as jsx48 } from "react/jsx-runtime";
+import { jsx as jsx47 } from "react/jsx-runtime";
 var MARKS = { color: "color", background: "highlight" };
 function selectionColor(state, mark) {
   const names = /* @__PURE__ */ new Set();
@@ -4461,24 +4433,24 @@ function colorCommand(key, name) {
 function ColorPopover({ controller, state }) {
   const labels = useLabels();
   const value = { color: selectionColor(state, MARKS.color), background: selectionColor(state, MARKS.background) };
-  const trigger = /* @__PURE__ */ jsx48(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": labels.color, children: /* @__PURE__ */ jsx48(Baseline, {}) });
-  return /* @__PURE__ */ jsx48(ToolbarMenu, { controller, trigger, children: /* @__PURE__ */ jsx48(ColorGroups, { kit: DROPDOWN_KIT, value, onPick: (key, name) => controller.run(colorCommand(key, name)) }) });
+  const trigger = /* @__PURE__ */ jsx47(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": labels.color, children: /* @__PURE__ */ jsx47(Baseline, {}) });
+  return /* @__PURE__ */ jsx47(ToolbarMenu, { controller, trigger, children: /* @__PURE__ */ jsx47(ColorGroups, { kit: DROPDOWN_KIT, value, onPick: (key, name) => controller.run(colorCommand(key, name)) }) });
 }
 
 // src/menus/bubble/TurnIntoDropdown.tsx
 import { ChevronDown } from "lucide-react";
-import { jsx as jsx49, jsxs as jsxs32 } from "react/jsx-runtime";
+import { jsx as jsx48, jsxs as jsxs32 } from "react/jsx-runtime";
 function TurnIntoDropdown({ controller, state }) {
   const labels = useLabels();
   const trigger = /* @__PURE__ */ jsxs32(Button, { type: "button", variant: "ghost", size: "sm", className: "gap-1 px-2 has-[>svg]:px-2", children: [
     labels.turnInto,
-    /* @__PURE__ */ jsx49(ChevronDown, {})
+    /* @__PURE__ */ jsx48(ChevronDown, {})
   ] });
-  return /* @__PURE__ */ jsx49(ToolbarMenu, { controller, trigger, children: /* @__PURE__ */ jsx49(TurnIntoItems, { kit: DROPDOWN_KIT, controller, blockIds: selectedBlockIds(state.doc, state.selection) }) });
+  return /* @__PURE__ */ jsx48(ToolbarMenu, { controller, trigger, children: /* @__PURE__ */ jsx48(TurnIntoItems, { kit: DROPDOWN_KIT, controller, blockIds: selectedBlockIds(state.doc, state.selection) }) });
 }
 
 // src/menus/bubble/BubbleToolbar.tsx
-import { jsx as jsx50, jsxs as jsxs33 } from "react/jsx-runtime";
+import { jsx as jsx49, jsxs as jsxs33 } from "react/jsx-runtime";
 var DIVIDER = "mx-0.5 h-5 w-px shrink-0 bg-border";
 function BubbleToolbar({ controller, labels, store, extraItems }) {
   const state = useEditorState(controller, wholeState);
@@ -4493,9 +4465,9 @@ function BubbleToolbar({ controller, labels, store, extraItems }) {
       controller.focus();
     } else roving.onKeyDown(event);
   };
-  const button = (item) => /* @__PURE__ */ jsx50(ToolbarButton, { item, state, controller }, item.id);
+  const button = (item) => /* @__PURE__ */ jsx49(ToolbarButton, { item, state, controller }, item.id);
   return /* @__PURE__ */ jsxs33(Popover, { open: true, modal: false, children: [
-    /* @__PURE__ */ jsx50(PopoverAnchor, { virtualRef: anchor }),
+    /* @__PURE__ */ jsx49(PopoverAnchor, { virtualRef: anchor }),
     /* @__PURE__ */ jsxs33(
       PopoverContent,
       {
@@ -4512,11 +4484,11 @@ function BubbleToolbar({ controller, labels, store, extraItems }) {
         onKeyDown,
         ...bubblePart(controller),
         children: [
-          /* @__PURE__ */ jsx50(TurnIntoDropdown, { controller, state }),
-          /* @__PURE__ */ jsx50("span", { "aria-hidden": "true", className: DIVIDER }),
+          /* @__PURE__ */ jsx49(TurnIntoDropdown, { controller, state }),
+          /* @__PURE__ */ jsx49("span", { "aria-hidden": "true", className: DIVIDER }),
           items.inline.map(button),
-          /* @__PURE__ */ jsx50(ColorPopover, { controller, state }),
-          /* @__PURE__ */ jsx50(AlignDropdown, { controller, state }),
+          /* @__PURE__ */ jsx49(ColorPopover, { controller, state }),
+          /* @__PURE__ */ jsx49(AlignDropdown, { controller, state }),
           items.scripts.map(button),
           extraItems.map(button)
         ]
@@ -4556,7 +4528,7 @@ function useBubbleVisibility(controller) {
 }
 
 // src/menus/bubble/bubble-extension.tsx
-import { jsx as jsx51 } from "react/jsx-runtime";
+import { jsx as jsx50 } from "react/jsx-runtime";
 var NO_ITEMS = [];
 var BubbleItemsContext = createContext5(NO_ITEMS);
 var BubbleItemsProvider = BubbleItemsContext.Provider;
@@ -4566,7 +4538,7 @@ function BubbleOverlay({ controller }) {
   const store = useCanvasUiStore();
   const extraItems = useContext5(BubbleItemsContext);
   if (!visible) return null;
-  return /* @__PURE__ */ jsx51(BubbleToolbar, { controller, labels, store, extraItems });
+  return /* @__PURE__ */ jsx50(BubbleToolbar, { controller, labels, store, extraItems });
 }
 function bubbleExtension() {
   return defineExtension({ name: "bubble", ui: { overlays: [BubbleOverlay] } });
@@ -4695,7 +4667,7 @@ function usePointerLink(controller, card, delay) {
 }
 
 // src/menus/link/LinkHoverCard.tsx
-import { jsx as jsx52, jsxs as jsxs34 } from "react/jsx-runtime";
+import { jsx as jsx51, jsxs as jsxs34 } from "react/jsx-runtime";
 var REST_MS = 300;
 var URL_LENGTH = 48;
 var CARD = "flex w-auto items-center gap-0.5 py-1 ps-3 pe-1 shadow-md";
@@ -4728,7 +4700,7 @@ function LinkCard({ controller, labels, store, cardRef, element, onUnlinked }) {
     onUnlinked();
   };
   return /* @__PURE__ */ jsxs34(Popover, { open: true, modal: false, children: [
-    /* @__PURE__ */ jsx52(PopoverAnchor, { virtualRef: anchor }),
+    /* @__PURE__ */ jsx51(PopoverAnchor, { virtualRef: anchor }),
     /* @__PURE__ */ jsxs34(
       PopoverContent,
       {
@@ -4742,10 +4714,10 @@ function LinkCard({ controller, labels, store, cardRef, element, onUnlinked }) {
         onPointerDown: keepFocus,
         onMouseDown: keepFocus,
         children: [
-          /* @__PURE__ */ jsx52("span", { className: ADDRESS, title: address === link.href ? void 0 : link.href, children: address }),
-          href !== null && /* @__PURE__ */ jsx52(Button, { asChild: true, variant: "ghost", size: "icon-sm", children: /* @__PURE__ */ jsx52("a", { href, target: "_blank", rel: "noopener noreferrer", "aria-label": labels.linkOpen, children: /* @__PURE__ */ jsx52(ExternalLink, {}) }) }),
-          /* @__PURE__ */ jsx52(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": labels.linkEdit, onClick: edit2, children: /* @__PURE__ */ jsx52(Pencil2, {}) }),
-          /* @__PURE__ */ jsx52(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": labels.linkRemove, onClick: unlink, children: /* @__PURE__ */ jsx52(Unlink, {}) })
+          /* @__PURE__ */ jsx51("span", { className: ADDRESS, title: address === link.href ? void 0 : link.href, children: address }),
+          href !== null && /* @__PURE__ */ jsx51(Button, { asChild: true, variant: "ghost", size: "icon-sm", children: /* @__PURE__ */ jsx51("a", { href, target: "_blank", rel: "noopener noreferrer", "aria-label": labels.linkOpen, children: /* @__PURE__ */ jsx51(ExternalLink, {}) }) }),
+          /* @__PURE__ */ jsx51(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": labels.linkEdit, onClick: edit2, children: /* @__PURE__ */ jsx51(Pencil2, {}) }),
+          /* @__PURE__ */ jsx51(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": labels.linkRemove, onClick: unlink, children: /* @__PURE__ */ jsx51(Unlink, {}) })
         ]
       }
     )
@@ -4756,7 +4728,7 @@ function LinkHoverCard(props) {
   const pointer = usePointerLink(props.controller, cardRef, REST_MS);
   const caretInLink = useCaretInLink(props.controller, REST_MS);
   if (pointer.element === null && !caretInLink) return null;
-  return /* @__PURE__ */ jsx52(LinkCard, { ...props, cardRef, element: pointer.element, onUnlinked: pointer.dismiss });
+  return /* @__PURE__ */ jsx51(LinkCard, { ...props, cardRef, element: pointer.element, onUnlinked: pointer.dismiss });
 }
 
 // src/menus/link/LinkPopover.tsx
@@ -4787,7 +4759,7 @@ function applyLink(href, value) {
 }
 
 // src/menus/link/LinkPopover.tsx
-import { jsx as jsx53, jsxs as jsxs35 } from "react/jsx-runtime";
+import { jsx as jsx52, jsxs as jsxs35 } from "react/jsx-runtime";
 var CONTENT2 = "w-80 p-2 shadow-md";
 var FIELD2 = "h-8";
 var MESSAGE = "mt-1.5 px-1 text-sm text-destructive";
@@ -4837,7 +4809,7 @@ function LinkPopover({ controller, labels, onClose }) {
         if (!open) onClose();
       },
       children: [
-        /* @__PURE__ */ jsx53(PopoverAnchor, { virtualRef: anchor }),
+        /* @__PURE__ */ jsx52(PopoverAnchor, { virtualRef: anchor }),
         /* @__PURE__ */ jsxs35(
           PopoverContent,
           {
@@ -4852,7 +4824,7 @@ function LinkPopover({ controller, labels, onClose }) {
             },
             children: [
               /* @__PURE__ */ jsxs35("form", { noValidate: true, className: "flex items-center gap-0.5", onSubmit: apply, children: [
-                /* @__PURE__ */ jsx53(
+                /* @__PURE__ */ jsx52(
                   Input,
                   {
                     type: "url",
@@ -4864,11 +4836,11 @@ function LinkPopover({ controller, labels, onClose }) {
                     onChange
                   }
                 ),
-                /* @__PURE__ */ jsx53(Button, { type: "submit", variant: "ghost", size: "icon-sm", "aria-label": labels.linkApply, children: /* @__PURE__ */ jsx53(Check3, {}) }),
-                openHref && /* @__PURE__ */ jsx53(Button, { asChild: true, variant: "ghost", size: "icon-sm", children: /* @__PURE__ */ jsx53("a", { href: openHref, target: "_blank", rel: "noopener noreferrer", "aria-label": labels.linkOpen, children: /* @__PURE__ */ jsx53(ExternalLink2, {}) }) }),
-                link !== null && /* @__PURE__ */ jsx53(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": labels.linkRemove, onClick: remove, children: /* @__PURE__ */ jsx53(Unlink2, {}) })
+                /* @__PURE__ */ jsx52(Button, { type: "submit", variant: "ghost", size: "icon-sm", "aria-label": labels.linkApply, children: /* @__PURE__ */ jsx52(Check3, {}) }),
+                openHref && /* @__PURE__ */ jsx52(Button, { asChild: true, variant: "ghost", size: "icon-sm", children: /* @__PURE__ */ jsx52("a", { href: openHref, target: "_blank", rel: "noopener noreferrer", "aria-label": labels.linkOpen, children: /* @__PURE__ */ jsx52(ExternalLink2, {}) }) }),
+                link !== null && /* @__PURE__ */ jsx52(Button, { type: "button", variant: "ghost", size: "icon-sm", "aria-label": labels.linkRemove, onClick: remove, children: /* @__PURE__ */ jsx52(Unlink2, {}) })
               ] }),
-              invalid && /* @__PURE__ */ jsx53("p", { id: messageId, role: "alert", className: MESSAGE, children: labels.invalidLink })
+              invalid && /* @__PURE__ */ jsx52("p", { id: messageId, role: "alert", className: MESSAGE, children: labels.invalidLink })
             ]
           }
         )
@@ -4893,7 +4865,7 @@ function useLinkClicks(controller) {
 }
 
 // src/menus/link/link-extension.tsx
-import { jsx as jsx54 } from "react/jsx-runtime";
+import { jsx as jsx53 } from "react/jsx-runtime";
 var isPopoverOpen = (state) => state.linkPopover.open;
 function LinkOverlay({ controller }) {
   const labels = useLabels();
@@ -4905,8 +4877,8 @@ function LinkOverlay({ controller }) {
     if (readOnly && store.get().linkPopover.open) store.set({ linkPopover: { open: false } });
   }, [readOnly, store]);
   if (readOnly) return null;
-  if (!popoverOpen) return /* @__PURE__ */ jsx54(LinkHoverCard, { controller, labels, store });
-  return /* @__PURE__ */ jsx54(LinkPopover, { controller, labels, onClose: () => store.set({ linkPopover: { open: false } }) });
+  if (!popoverOpen) return /* @__PURE__ */ jsx53(LinkHoverCard, { controller, labels, store });
+  return /* @__PURE__ */ jsx53(LinkPopover, { controller, labels, onClose: () => store.set({ linkPopover: { open: false } }) });
 }
 function linkExtension(store) {
   const openPopover = (state, dispatch) => {
@@ -5292,7 +5264,7 @@ function useSuggestion({
 }
 
 // src/menus/suggestion/SuggestionMenu.tsx
-import { Fragment as Fragment10, jsx as jsx55, jsxs as jsxs36 } from "react/jsx-runtime";
+import { Fragment as Fragment10, jsx as jsx54, jsxs as jsxs36 } from "react/jsx-runtime";
 var CONTENT3 = cn(
   MENU_CONTENT,
   "flex w-72 max-h-[min(22rem,var(--radix-popper-available-height))] flex-col overflow-y-hidden"
@@ -5300,7 +5272,7 @@ var CONTENT3 = cn(
 var LISTBOX = "min-h-0 overflow-y-auto";
 var GROUP_LABEL = "px-2 pt-2 pb-1 text-xs font-medium text-muted-foreground";
 function SuggestionGroup({ section, labelId, activeIndex, optionId, renderItem, highlight, select }) {
-  const options = section.entries.map(({ item, index }) => /* @__PURE__ */ jsx55(
+  const options = section.entries.map(({ item, index }) => /* @__PURE__ */ jsx54(
     SuggestionOption,
     {
       id: optionId(item),
@@ -5311,9 +5283,9 @@ function SuggestionGroup({ section, labelId, activeIndex, optionId, renderItem,
     },
     optionId(item)
   ));
-  if (section.label === null) return /* @__PURE__ */ jsx55(Fragment10, { children: options });
+  if (section.label === null) return /* @__PURE__ */ jsx54(Fragment10, { children: options });
   return /* @__PURE__ */ jsxs36("div", { role: "group", "aria-labelledby": labelId, children: [
-    /* @__PURE__ */ jsx55("div", { role: "presentation", id: labelId, className: GROUP_LABEL, children: section.label }),
+    /* @__PURE__ */ jsx54("div", { role: "presentation", id: labelId, className: GROUP_LABEL, children: section.label }),
     options
   ] });
 }
@@ -5343,7 +5315,7 @@ function SuggestionMenu(props) {
         if (!open) queueMicrotask(suggestion.dismiss);
       },
       children: [
-        /* @__PURE__ */ jsx55(PopoverAnchor, { virtualRef: anchor }),
+        /* @__PURE__ */ jsx54(PopoverAnchor, { virtualRef: anchor }),
         /* @__PURE__ */ jsxs36(
           PopoverContent,
           {
@@ -5357,7 +5329,7 @@ function SuggestionMenu(props) {
             onPointerDownOutside: insideEditor,
             onFocusOutside: insideEditor,
             children: [
-              /* @__PURE__ */ jsx55("div", { ref: listbox, role: "listbox", id: listboxId, "aria-label": label, className: LISTBOX, children: sections.map((section, index) => /* @__PURE__ */ jsx55(
+              /* @__PURE__ */ jsx54("div", { ref: listbox, role: "listbox", id: listboxId, "aria-label": label, className: LISTBOX, children: sections.map((section, index) => /* @__PURE__ */ jsx54(
                 SuggestionGroup,
                 {
                   section,
@@ -5370,7 +5342,7 @@ function SuggestionMenu(props) {
                 },
                 section.label ?? ""
               )) }),
-              status && /* @__PURE__ */ jsx55("p", { className: "px-2 py-1.5 text-sm text-muted-foreground", children: status })
+              status && /* @__PURE__ */ jsx54("p", { className: "px-2 py-1.5 text-sm text-muted-foreground", children: status })
             ]
           }
         )
@@ -5450,17 +5422,17 @@ function fuzzyFilter(items, query) {
 }
 
 // src/menus/slash/SlashMenu.tsx
-import { Fragment as Fragment11, jsx as jsx56, jsxs as jsxs37 } from "react/jsx-runtime";
+import { Fragment as Fragment11, jsx as jsx55, jsxs as jsxs37 } from "react/jsx-runtime";
 var itemKey = (item) => item.id;
 function SlashRow({ item, isMac, labels }) {
   const hint = item.shortcut === void 0 ? null : shortcutHint(item.shortcut, isMac, labels);
   return /* @__PURE__ */ jsxs37(Fragment11, { children: [
-    item.icon !== void 0 && /* @__PURE__ */ jsx56(MenuIcon, { icon: item.icon }),
+    item.icon !== void 0 && /* @__PURE__ */ jsx55(MenuIcon, { icon: item.icon }),
     /* @__PURE__ */ jsxs37("span", { className: "flex min-w-0 flex-col", children: [
-      /* @__PURE__ */ jsx56("span", { className: "truncate", children: item.title }),
-      item.description !== void 0 && /* @__PURE__ */ jsx56("span", { className: "truncate text-xs text-muted-foreground", children: item.description })
+      /* @__PURE__ */ jsx55("span", { className: "truncate", children: item.title }),
+      item.description !== void 0 && /* @__PURE__ */ jsx55("span", { className: "truncate text-xs text-muted-foreground", children: item.description })
     ] }),
-    hint !== null && /* @__PURE__ */ jsx56("kbd", { "aria-hidden": "true", className: "ml-auto font-sans text-xs tracking-widest text-muted-foreground pointer-coarse:hidden", children: hint.text })
+    hint !== null && /* @__PURE__ */ jsx55("kbd", { "aria-hidden": "true", className: "ml-auto font-sans text-xs tracking-widest text-muted-foreground pointer-coarse:hidden", children: hint.text })
   ] });
 }
 function SlashMenu({ controller, labels, items }) {
@@ -5476,14 +5448,14 @@ function SlashMenu({ controller, labels, items }) {
   );
   const groupOf2 = useCallback10((item) => labels.groups[item.group], [labels]);
   const renderItem = useCallback10(
-    (item) => /* @__PURE__ */ jsx56(SlashRow, { item, isMac: controller.isMac, labels }),
+    (item) => /* @__PURE__ */ jsx55(SlashRow, { item, isMac: controller.isMac, labels }),
     [controller, labels]
   );
   const choose = useCallback10(
     (item, range) => chooseSlashItem(controller, item, range),
     [controller]
   );
-  return /* @__PURE__ */ jsx56(
+  return /* @__PURE__ */ jsx55(
     SuggestionMenu,
     {
       controller,
@@ -5500,7 +5472,7 @@ function SlashMenu({ controller, labels, items }) {
 }
 
 // src/menus/slash/slash-extension.tsx
-import { jsx as jsx57 } from "react/jsx-runtime";
+import { jsx as jsx56 } from "react/jsx-runtime";
 var NO_ITEMS2 = [];
 var SlashItemsContext = createContext6(NO_ITEMS2);
 var SlashItemsProvider = SlashItemsContext.Provider;
@@ -5512,7 +5484,7 @@ function SlashOverlay({ controller }) {
     () => [...builtInSlashItems(labels, blockTypes), ...extraItems],
     [labels, blockTypes, extraItems]
   );
-  return /* @__PURE__ */ jsx57(SlashMenu, { controller, labels, items });
+  return /* @__PURE__ */ jsx56(SlashMenu, { controller, labels, items });
 }
 function slashExtension() {
   return defineExtension({
@@ -5608,7 +5580,7 @@ function useVisualViewport() {
 }
 
 // src/mobile/MobileToolbar.tsx
-import { jsx as jsx58, jsxs as jsxs38 } from "react/jsx-runtime";
+import { jsx as jsx57, jsxs as jsxs38 } from "react/jsx-runtime";
 var TOOLBAR = [
   "quoin bg-popover text-popover-foreground fixed inset-x-0 z-40 flex items-center gap-0.5 overflow-x-auto",
   "border-t p-1 shadow-md"
@@ -5630,7 +5602,7 @@ function EditingTools({ controller }) {
       controller.focus();
     } else roving.onKeyDown(event);
   };
-  const button = (item) => /* @__PURE__ */ jsx58(ToolbarButton, { item, state, controller }, item.id);
+  const button = (item) => /* @__PURE__ */ jsx57(ToolbarButton, { item, state, controller }, item.id);
   return createPortal(
     /* @__PURE__ */ jsxs38(
       "div",
@@ -5647,7 +5619,7 @@ function EditingTools({ controller }) {
         ...bubblePart(controller),
         children: [
           button(items.addBlock),
-          /* @__PURE__ */ jsx58(TurnIntoDropdown, { controller, state }),
+          /* @__PURE__ */ jsx57(TurnIntoDropdown, { controller, state }),
           items.editing.map(button)
         ]
       }
@@ -5659,7 +5631,7 @@ function MobileToolbar({ controller }) {
   const coarse = useCoarsePointer();
   const focused = useEditorFocus(controller);
   if (!coarse || !focused) return null;
-  return /* @__PURE__ */ jsx58(EditingTools, { controller });
+  return /* @__PURE__ */ jsx57(EditingTools, { controller });
 }
 
 // src/shortcuts/shortcuts-extension.tsx
@@ -5672,15 +5644,15 @@ import { useId as useId7, useMemo as useMemo15 } from "react";
 import * as React8 from "react";
 import * as DialogPrimitive from "@radix-ui/react-dialog";
 import { XIcon } from "lucide-react";
-import { jsx as jsx59, jsxs as jsxs39 } from "react/jsx-runtime";
+import { jsx as jsx58, jsxs as jsxs39 } from "react/jsx-runtime";
 function Dialog(props) {
-  return /* @__PURE__ */ jsx59(DialogPrimitive.Root, { ...props });
+  return /* @__PURE__ */ jsx58(DialogPrimitive.Root, { ...props });
 }
 function DialogPortal(props) {
-  return /* @__PURE__ */ jsx59(DialogPrimitive.Portal, { ...props });
+  return /* @__PURE__ */ jsx58(DialogPrimitive.Portal, { ...props });
 }
 var DialogOverlay = /* @__PURE__ */ React8.forwardRef(function DialogOverlay2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx59(
+  return /* @__PURE__ */ jsx58(
     DialogPrimitive.Overlay,
     {
       ref,
@@ -5695,7 +5667,7 @@ var DialogOverlay = /* @__PURE__ */ React8.forwardRef(function DialogOverlay2({
 });
 var DialogContent = /* @__PURE__ */ React8.forwardRef(function DialogContent2({ className, children, closeLabel = "Close", ...props }, ref) {
   return /* @__PURE__ */ jsxs39(DialogPortal, { children: [
-    /* @__PURE__ */ jsx59(DialogOverlay, {}),
+    /* @__PURE__ */ jsx58(DialogOverlay, {}),
     /* @__PURE__ */ jsxs39(
       DialogPrimitive.Content,
       {
@@ -5717,8 +5689,8 @@ var DialogContent = /* @__PURE__ */ React8.forwardRef(function DialogContent2({
                 ICON_TAP_TARGET_FLOOR
               ),
               children: [
-                /* @__PURE__ */ jsx59(XIcon, {}),
-                /* @__PURE__ */ jsx59("span", { className: "sr-only", children: closeLabel })
+                /* @__PURE__ */ jsx58(XIcon, {}),
+                /* @__PURE__ */ jsx58("span", { className: "sr-only", children: closeLabel })
               ]
             }
           )
@@ -5728,7 +5700,7 @@ var DialogContent = /* @__PURE__ */ React8.forwardRef(function DialogContent2({
   ] });
 });
 var DialogHeader = /* @__PURE__ */ React8.forwardRef(function DialogHeader2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx59(
+  return /* @__PURE__ */ jsx58(
     "div",
     {
       ref,
@@ -5739,7 +5711,7 @@ var DialogHeader = /* @__PURE__ */ React8.forwardRef(function DialogHeader2({ cl
   );
 });
 var DialogTitle = /* @__PURE__ */ React8.forwardRef(function DialogTitle2({ className, ...props }, ref) {
-  return /* @__PURE__ */ jsx59(
+  return /* @__PURE__ */ jsx58(
     DialogPrimitive.Title,
     {
       ref,
@@ -5831,21 +5803,21 @@ function shortcutGroups(labels, isMac) {
 }
 
 // src/shortcuts/ShortcutsDialog.tsx
-import { jsx as jsx60, jsxs as jsxs40 } from "react/jsx-runtime";
+import { jsx as jsx59, jsxs as jsxs40 } from "react/jsx-runtime";
 var KEYS3 = "rounded border bg-muted px-1.5 py-0.5 font-sans text-xs whitespace-nowrap";
 function ShortcutSection({ group }) {
   const titleId = useId7();
   return /* @__PURE__ */ jsxs40("section", { "aria-labelledby": titleId, children: [
-    /* @__PURE__ */ jsx60("h3", { id: titleId, className: "mb-2 text-sm font-semibold", children: group.title }),
-    /* @__PURE__ */ jsx60("dl", { className: "grid gap-1.5 text-sm", children: group.items.map(({ label, keys }) => /* @__PURE__ */ jsxs40("div", { className: "flex items-center justify-between gap-4", children: [
-      /* @__PURE__ */ jsx60("dt", { children: label }),
-      /* @__PURE__ */ jsx60("dd", { children: /* @__PURE__ */ jsx60("kbd", { className: KEYS3, children: keys }) })
+    /* @__PURE__ */ jsx59("h3", { id: titleId, className: "mb-2 text-sm font-semibold", children: group.title }),
+    /* @__PURE__ */ jsx59("dl", { className: "grid gap-1.5 text-sm", children: group.items.map(({ label, keys }) => /* @__PURE__ */ jsxs40("div", { className: "flex items-center justify-between gap-4", children: [
+      /* @__PURE__ */ jsx59("dt", { children: label }),
+      /* @__PURE__ */ jsx59("dd", { children: /* @__PURE__ */ jsx59("kbd", { className: KEYS3, children: keys }) })
     ] }, `${label} ${keys}`)) })
   ] });
 }
 function ShortcutsDialog({ open, onOpenChange, labels, isMac, onCloseAutoFocus }) {
   const groups = useMemo15(() => shortcutGroups(labels, isMac), [labels, isMac]);
-  return /* @__PURE__ */ jsx60(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs40(
+  return /* @__PURE__ */ jsx59(Dialog, { open, onOpenChange, children: /* @__PURE__ */ jsxs40(
     DialogContent,
     {
       closeLabel: labels.close,
@@ -5853,22 +5825,22 @@ function ShortcutsDialog({ open, onOpenChange, labels, isMac, onCloseAutoFocus }
       onCloseAutoFocus,
       className: "max-h-[85vh] overflow-y-auto sm:max-w-2xl",
       children: [
-        /* @__PURE__ */ jsx60(DialogHeader, { children: /* @__PURE__ */ jsx60(DialogTitle, { children: labels.shortcuts }) }),
-        /* @__PURE__ */ jsx60("div", { className: "grid gap-6 sm:grid-cols-2", children: groups.map((group) => /* @__PURE__ */ jsx60(ShortcutSection, { group }, group.name)) })
+        /* @__PURE__ */ jsx59(DialogHeader, { children: /* @__PURE__ */ jsx59(DialogTitle, { children: labels.shortcuts }) }),
+        /* @__PURE__ */ jsx59("div", { className: "grid gap-6 sm:grid-cols-2", children: groups.map((group) => /* @__PURE__ */ jsx59(ShortcutSection, { group }, group.name)) })
       ]
     }
   ) });
 }
 
 // src/shortcuts/shortcuts-extension.tsx
-import { jsx as jsx61 } from "react/jsx-runtime";
+import { jsx as jsx60 } from "react/jsx-runtime";
 var SHORTCUT = "Mod-Shift-/";
 var isOpen = (state) => state.shortcutsOpen;
 function ShortcutsOverlay({ controller }) {
   const labels = useLabels();
   const store = useCanvasUiStore();
   const open = useCanvasUi(store, isOpen);
-  return /* @__PURE__ */ jsx61(
+  return /* @__PURE__ */ jsx60(
     ShortcutsDialog,
     {
       open,
@@ -5975,13 +5947,11 @@ function useEditingFocus(root, editing, stop) {
     const leaveUnlessInside = (event) => {
       if (!inside.current.has(event)) stop();
     };
-    doc.addEventListener("pointerdown", leaveForCanvas, true);
-    doc.addEventListener("pointerdown", leaveUnlessInside);
-    doc.addEventListener("focusin", leaveUnlessInside);
+    const unlistenCapture = listen(doc, { pointerdown: leaveForCanvas }, true);
+    const unlisten = listen(doc, { pointerdown: leaveUnlessInside, focusin: leaveUnlessInside });
     return () => {
-      doc.removeEventListener("pointerdown", leaveForCanvas, true);
-      doc.removeEventListener("pointerdown", leaveUnlessInside);
-      doc.removeEventListener("focusin", leaveUnlessInside);
+      unlistenCapture();
+      unlisten();
     };
   }, [root, editing, stop]);
   return useMemo16(() => {
@@ -5991,7 +5961,7 @@ function useEditingFocus(root, editing, stop) {
 }
 
 // src/blocks/void/VoidBlock.tsx
-import { jsx as jsx62, jsxs as jsxs41 } from "react/jsx-runtime";
+import { jsx as jsx61, jsxs as jsxs41 } from "react/jsx-runtime";
 function useMissingPreviewWarning(readOnly, { type, preview }) {
   useEffect22(() => {
     if (!readOnly || preview !== void 0) return;
@@ -6001,8 +5971,8 @@ function useMissingPreviewWarning(readOnly, { type, preview }) {
   }, [readOnly, type, preview]);
 }
 function VoidPreview({ definition: { preview: Preview }, name, ...props }) {
-  if (Preview === void 0) return /* @__PURE__ */ jsx62("p", { className: "py-1 text-sm text-muted-foreground", children: name });
-  return /* @__PURE__ */ jsx62(Preview, { ...props });
+  if (Preview === void 0) return /* @__PURE__ */ jsx61("p", { className: "py-1 text-sm text-muted-foreground", children: name });
+  return /* @__PURE__ */ jsx61(Preview, { ...props });
 }
 function VoidBlock({ block, controller, definition }) {
   const { blockTypes, labels } = useQuoin();
@@ -6060,8 +6030,8 @@ function VoidBlock({ block, controller, definition }) {
       onClick,
       onDoubleClick,
       children: [
-        editorShown && Editor ? /* @__PURE__ */ jsx62(Editor, { data, onChange, onInsertBlock, onDone: leave }) : /* @__PURE__ */ jsx62(VoidPreview, { definition, name, data, blockId }),
-        editable && !editorShown && /* @__PURE__ */ jsx62(
+        editorShown && Editor ? /* @__PURE__ */ jsx61(Editor, { data, onChange, onInsertBlock, onDone: leave }) : /* @__PURE__ */ jsx61(VoidPreview, { definition, name, data, blockId }),
+        editable && !editorShown && /* @__PURE__ */ jsx61(
           Button,
           {
             type: "button",
@@ -6071,7 +6041,7 @@ function VoidBlock({ block, controller, definition }) {
             "aria-label": labels.editBlock(name),
             onClick: () => start(),
             className: "absolute right-0 top-0 bg-background/90 opacity-0 group-hover/void:opacity-100 in-data-[selected=true]:opacity-100 pointer-coarse:opacity-100 focus-visible:opacity-100",
-            children: /* @__PURE__ */ jsx62(Pencil3, { "aria-hidden": "true" })
+            children: /* @__PURE__ */ jsx61(Pencil3, { "aria-hidden": "true" })
           }
         )
       ]
@@ -6297,7 +6267,7 @@ function useTypedInPlaceWarning(definitions, readOnly) {
 }
 
 // src/canvas/BlockCanvas.tsx
-import { jsx as jsx63, jsxs as jsxs42 } from "react/jsx-runtime";
+import { jsx as jsx62, jsxs as jsxs42 } from "react/jsx-runtime";
 var GUTTER_ROOM = "ps-12";
 var BlockCanvas = forwardRef8(function BlockCanvas2({
   blocks,
@@ -6377,7 +6347,7 @@ var BlockCanvas = forwardRef8(function BlockCanvas2({
     }),
     [controller, resolveAssetUrl]
   );
-  return /* @__PURE__ */ jsx63(QuoinProvider, { value: { blockTypes, upload, resolveAssetUrl, onError, highlight, controller, labels }, children: /* @__PURE__ */ jsx63(VoidEditingContext.Provider, { value: voidEditing, children: /* @__PURE__ */ jsx63(SlashItemsProvider, { value: slashItems, children: /* @__PURE__ */ jsx63(BubbleItemsProvider, { value: ui.bubbleItems, children: /* @__PURE__ */ jsx63(CanvasUiProvider, { value: uiStore, children: /* @__PURE__ */ jsxs42(
+  return /* @__PURE__ */ jsx62(QuoinProvider, { value: { blockTypes, upload, resolveAssetUrl, onError, highlight, controller, labels }, children: /* @__PURE__ */ jsx62(VoidEditingContext.Provider, { value: voidEditing, children: /* @__PURE__ */ jsx62(SlashItemsProvider, { value: slashItems, children: /* @__PURE__ */ jsx62(BubbleItemsProvider, { value: ui.bubbleItems, children: /* @__PURE__ */ jsx62(CanvasUiProvider, { value: uiStore, children: /* @__PURE__ */ jsxs42(
     EditorView,
     {
       controller,
@@ -6395,11 +6365,11 @@ var BlockCanvas = forwardRef8(function BlockCanvas2({
       blocksSelectedLabel: labels.blocksSelected,
       children: [
         !readOnly && /* @__PURE__ */ jsxs42(ExtensionBlockNames.Provider, { value: ui.blockNames, children: [
-          /* @__PURE__ */ jsx63(Gutter, { controller, store: uiStore, actions }),
-          /* @__PURE__ */ jsx63(BlockContextMenu, { controller, store: uiStore, actions }),
-          /* @__PURE__ */ jsx63(MobileToolbar, { controller })
+          /* @__PURE__ */ jsx62(Gutter, { controller, store: uiStore, actions }),
+          /* @__PURE__ */ jsx62(BlockContextMenu, { controller, store: uiStore, actions }),
+          /* @__PURE__ */ jsx62(MobileToolbar, { controller })
         ] }),
-        ui.overlays.map((Overlay2, index) => /* @__PURE__ */ jsx63(Overlay2, { controller }, index))
+        ui.overlays.map((Overlay2, index) => /* @__PURE__ */ jsx62(Overlay2, { controller }, index))
       ]
     }
   ) }) }) }) }) });
@@ -6407,7 +6377,7 @@ var BlockCanvas = forwardRef8(function BlockCanvas2({
 
 // src/upload/UploadField.tsx
 import * as React9 from "react";
-import { jsx as jsx64, jsxs as jsxs43 } from "react/jsx-runtime";
+import { jsx as jsx63, jsxs as jsxs43 } from "react/jsx-runtime";
 function progressText(state, labels) {
   if (state.phase === "busy") return labels.uploading;
   if (state.phase === "uploaded") return labels.uploaded(state.name);
@@ -6437,7 +6407,7 @@ function UploadField({ category, label, accept, onUploaded }) {
   }
   const progress = progressText(state, labels);
   return /* @__PURE__ */ jsxs43("div", { className: "flex flex-col items-start gap-1.5", children: [
-    /* @__PURE__ */ jsx64(
+    /* @__PURE__ */ jsx63(
       FilePickerButton,
       {
         label,
@@ -6447,9 +6417,9 @@ function UploadField({ category, label, accept, onUploaded }) {
         onPick: (file) => void run(file)
       }
     ),
-    !upload && /* @__PURE__ */ jsx64("span", { role: "note", className: "text-xs text-muted-foreground", children: labels.uploadsUnavailable }),
-    /* @__PURE__ */ jsx64("span", { role: "status", className: progress === "" ? "sr-only" : "text-xs text-muted-foreground", children: progress }),
-    state.phase === "failed" && /* @__PURE__ */ jsx64("span", { role: "alert", className: "text-xs text-destructive", children: state.message })
+    !upload && /* @__PURE__ */ jsx63("span", { role: "note", className: "text-xs text-muted-foreground", children: labels.uploadsUnavailable }),
+    /* @__PURE__ */ jsx63("span", { role: "status", className: progress === "" ? "sr-only" : "text-xs text-muted-foreground", children: progress }),
+    state.phase === "failed" && /* @__PURE__ */ jsx63("span", { role: "alert", className: "text-xs text-destructive", children: state.message })
   ] });
 }
 
@@ -6663,4 +6633,4 @@ export {
   UploadField,
   useAutosave
 };
-//# sourceMappingURL=chunk-ZGZEJCRV.js.map
+//# sourceMappingURL=chunk-T43RZTUT.js.map