quoin-editor 0.3.0 → 0.4.1

package/dist/index.js

@@ -1,7 +1,7 @@
 'use client';
 
 // src/canvas/BlockCanvas.tsx
-import * as React11 from "react";
+import * as React15 from "react";
 import {
   DndContext,
   KeyboardSensor,
@@ -68,12 +68,13 @@ function paletteBlocks(definitions) {
 import { Code as Code2, FileText, MessageSquare, Image, Paperclip } from "lucide-react";
 
 // src/blocks/MarkdownBlockEditor.tsx
-import * as React5 from "react";
+import * as React7 from "react";
 
 // src/upload/FilePickerButton.tsx
 import { Upload } from "lucide-react";
 
 // src/ui/button.tsx
+import * as React2 from "react";
 import { Slot } from "@radix-ui/react-slot";
 import { cva } from "class-variance-authority";
 
@@ -84,6 +85,15 @@ function cn(...inputs) {
   return twMerge(clsx(inputs));
 }
 
+// src/ui/focus.ts
+var FOCUS_RING = [
+  "outline-hidden",
+  "focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-solid",
+  "focus-visible:outline-[var(--quoin-ring)]"
+].join(" ");
+var HIGHLIGHT_BAR = "data-[highlighted]:shadow-[inset_2px_0_0_var(--quoin-foreground)]";
+var SELECTED_BAR = "data-[selected=true]:shadow-[inset_2px_0_0_var(--quoin-foreground)]";
+
 // src/ui/touch-target.ts
 var TAP_TARGET_FLOOR = "pointer-coarse:min-h-11";
 var SQUARE_TAP_TARGET_FLOOR = `${TAP_TARGET_FLOOR} pointer-coarse:min-w-11`;
@@ -96,7 +106,10 @@ var ICON_TAP_TARGET_FLOOR = [
 // src/ui/button.tsx
 import { jsx as jsx2 } from "react/jsx-runtime";
 var buttonVariants = cva(
-  "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,background-color,border-color,box-shadow,opacity] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 shrink-0 outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50",
+  [
+    "inline-flex cursor-pointer items-center justify-center gap-2 whitespace-nowrap rounded-md text-sm font-medium transition-[color,background-color,border-color,box-shadow,opacity] disabled:pointer-events-none disabled:opacity-50 aria-disabled:pointer-events-none aria-disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 shrink-0",
+    FOCUS_RING
+  ],
   {
     variants: {
       variant: {
@@ -121,17 +134,12 @@ var buttonVariants = cva(
     defaultVariants: { variant: "default", size: "default" }
   }
 );
-function Button({
-  className,
-  variant = "default",
-  size = "default",
-  asChild = false,
-  ...props
-}) {
+var Button = React2.forwardRef(function Button2({ className, variant = "default", size = "default", asChild = false, ...props }, ref) {
   const Comp = asChild ? Slot : "button";
   return /* @__PURE__ */ jsx2(
     Comp,
     {
+      ref,
       "data-slot": "button",
       "data-variant": variant,
       "data-size": size,
@@ -139,12 +147,12 @@ function Button({
       ...props
     }
   );
-}
+});
 
 // src/upload/FilePickerButton.tsx
 import { jsx as jsx3, jsxs } from "react/jsx-runtime";
 function FilePickerButton({ label, accept, disabled, onPick }) {
-  return /* @__PURE__ */ jsxs("span", { className: "relative inline-flex rounded-md has-[:focus-visible]:ring-[3px] has-[:focus-visible]:ring-ring/50", children: [
+  return /* @__PURE__ */ jsxs("span", { className: "relative inline-flex rounded-md has-[:focus-visible]:outline-2 has-[:focus-visible]:outline-offset-2 has-[:focus-visible]:outline-[var(--quoin-ring)]", children: [
     /* @__PURE__ */ jsx3(Button, { asChild: true, variant: "outline", size: "sm", children: /* @__PURE__ */ jsxs("span", { "aria-hidden": "true", className: disabled ? "pointer-events-none opacity-50" : void 0, children: [
       /* @__PURE__ */ jsx3(Upload, { "aria-hidden": "true" }),
       label
@@ -235,15 +243,18 @@ function insertCommand(command, value, caret) {
   };
 }
 
+// src/markdown/platform.ts
+function isMac() {
+  if (typeof navigator === "undefined") return false;
+  const { userAgentData, platform } = navigator;
+  return /mac|iphone|ipad/i.test(userAgentData?.platform || platform || "");
+}
+
 // src/markdown/shortcut-label.ts
 var MAC_LABEL = { mod: "\u2318", alt: "\u2325", shift: "\u21E7" };
 var OTHER_LABEL = { mod: "Ctrl", alt: "Alt", shift: "Shift" };
-function onMac() {
-  if (typeof navigator === "undefined") return false;
-  return /Mac|iPhone|iPad/.test(navigator.userAgent);
-}
 function formatShortcut(hint) {
-  const mac = onMac();
+  const mac = isMac();
   const labels = mac ? MAC_LABEL : OTHER_LABEL;
   const parts = hint.split("+").map((part) => labels[part] ?? part.toUpperCase());
   return parts.join(mac ? "" : "+");
@@ -297,7 +308,8 @@ function DialogContent({
             DialogPrimitive.Close,
             {
               className: cn(
-                "ring-offset-background focus:ring-ring absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100 focus:ring-2 focus:ring-offset-2 focus:outline-none",
+                "absolute top-4 right-4 rounded-xs opacity-70 transition-opacity hover:opacity-100",
+                FOCUS_RING,
                 ICON_TAP_TARGET_FLOOR
               ),
               children: [
@@ -597,6 +609,7 @@ function CommandItem({
       "data-slot": "command-item",
       className: cn(
         "relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[disabled=true]:pointer-events-none data-[disabled=true]:opacity-50 data-[selected=true]:bg-accent data-[selected=true]:text-accent-foreground [&_svg]:pointer-events-none [&_svg]:shrink-0 [&_svg:not([class*='size-'])]:size-4 [&_svg:not([class*='text-'])]:text-muted-foreground",
+        SELECTED_BAR,
         className
       ),
       ...props
@@ -713,7 +726,7 @@ function SlashPalette({
 }
 
 // src/markdown/useMarkdownKeymap.ts
-import * as React2 from "react";
+import * as React3 from "react";
 
 // src/markdown/list-continuation.ts
 var LIST_MARKER = /^(\s*)((?:[-*+] \[[ xX]\] )|(?:[-*+] )|(?:\d+[.)] )|(?:> ))(.*)$/;
@@ -937,11 +950,12 @@ function useMarkdownKeymap({
   commit,
   onOpenPalette
 }) {
-  const onKeyDown = React2.useCallback(
+  const onKeyDown = React3.useCallback(
     (event) => {
+      if (event.nativeEvent.isComposing || event.keyCode === 229) return;
       const el = event.currentTarget;
       const { value, selectionStart, selectionEnd } = el;
-      const mod = event.metaKey || event.ctrlKey;
+      const mod = isMac() ? event.metaKey : event.ctrlKey;
       const run = (edit) => {
         if (!edit) return;
         event.preventDefault();
@@ -982,7 +996,7 @@ function useMarkdownKeymap({
     },
     [commit, onOpenPalette]
   );
-  const onPaste = React2.useCallback(
+  const onPaste = React3.useCallback(
     (event) => {
       const el = event.currentTarget;
       const edit = linkPaste(
@@ -1001,7 +1015,7 @@ function useMarkdownKeymap({
 }
 
 // src/markdown/useSlashPalette.ts
-import * as React3 from "react";
+import * as React4 from "react";
 
 // src/markdown/caret-coordinates.ts
 var COPIED = [
@@ -1052,10 +1066,10 @@ function caretRect(el) {
 
 // src/markdown/useSlashPalette.ts
 function useSlashPalette(ref) {
-  const [open, setOpen] = React3.useState(false);
-  const [caret, setCaret] = React3.useState(null);
-  const offsetRef = React3.useRef(0);
-  const openAtCaret = React3.useCallback(() => {
+  const [open, setOpen] = React4.useState(false);
+  const [caret, setCaret] = React4.useState(null);
+  const offsetRef = React4.useRef(0);
+  const openAtCaret = React4.useCallback(() => {
     const el = ref.current;
     if (!el) return;
     offsetRef.current = el.selectionStart;
@@ -1066,11 +1080,17 @@ function useSlashPalette(ref) {
 }
 
 // src/hooks/useAutoGrow.ts
-import * as React4 from "react";
+import * as React6 from "react";
+
+// src/hooks/use-isomorphic-layout-effect.ts
+import * as React5 from "react";
+var useIsomorphicLayoutEffect = typeof document === "undefined" ? React5.useEffect : React5.useLayoutEffect;
+
+// src/hooks/useAutoGrow.ts
 function useAutoGrow(value) {
-  const ref = React4.useRef(null);
-  const lastWidth = React4.useRef(null);
-  const fit = React4.useCallback(() => {
+  const ref = React6.useRef(null);
+  const lastWidth = React6.useRef(null);
+  const fit = React6.useCallback(() => {
     const el = ref.current;
     if (!el) return;
     const scroller = document.scrollingElement ?? document.documentElement;
@@ -1079,8 +1099,8 @@ function useAutoGrow(value) {
     if (el.scrollHeight > 0) el.style.height = `${el.scrollHeight}px`;
     if (scroller.scrollTop !== scrollTop) scroller.scrollTop = scrollTop;
   }, []);
-  React4.useLayoutEffect(fit, [fit, value]);
-  React4.useEffect(() => {
+  useIsomorphicLayoutEffect(fit, [fit, value]);
+  React6.useEffect(() => {
     const el = ref.current;
     if (!el || typeof ResizeObserver === "undefined") return;
     const observer = new ResizeObserver(([entry]) => {
@@ -1102,17 +1122,18 @@ var str = (v) => typeof v === "string" ? v : "";
 import { jsx as jsx9, jsxs as jsxs6 } from "react/jsx-runtime";
 var BOX = [
   "-mx-2 min-h-7 w-[calc(100%+1rem)] resize-none rounded-md border-0 bg-transparent px-2 py-0",
-  "text-base leading-7 outline-none placeholder:text-muted-foreground",
-  "transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:ring-ring/50"
+  "text-base leading-7 placeholder:text-muted-foreground",
+  "transition-[color,box-shadow]",
+  FOCUS_RING
 ].join(" ");
 function MarkdownBlockEditor({ data, onChange, onInsertBlock, onDone }) {
   const { onError } = useQuoin();
   const markdown = str(data.markdown);
   const ref = useAutoGrow(markdown);
   const palette = useSlashPalette(ref);
-  const [shortcutsOpen, setShortcutsOpen] = React5.useState(false);
+  const [shortcutsOpen, setShortcutsOpen] = React7.useState(false);
   const set = (patch) => onChange({ ...data, ...patch });
-  const commit = React5.useCallback(
+  const commit = React7.useCallback(
     (next) => onChange({ ...data, markdown: next }),
     [data, onChange]
   );
@@ -1178,6 +1199,7 @@ function MarkdownBlockEditor({ data, onChange, onInsertBlock, onDone }) {
         onBlockCommand: (type) => {
           palette.setOpen(false);
           onInsertBlock?.(type);
+          onDone?.();
         },
         onShortcuts: () => {
           palette.setOpen(false);
@@ -1214,7 +1236,8 @@ function SelectTrigger({ className, children, ...props }) {
     {
       "data-slot": "select-trigger",
       className: cn(
-        "border-input data-[placeholder]:text-muted-foreground flex h-9 w-full cursor-pointer items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs outline-none focus-visible:ring-[3px] focus-visible:ring-ring/50 disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+        "border-input data-[placeholder]:text-muted-foreground flex h-9 w-full cursor-pointer items-center justify-between gap-2 rounded-md border bg-transparent px-3 py-2 text-sm shadow-xs disabled:cursor-not-allowed disabled:opacity-50 [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+        FOCUS_RING,
         TAP_TARGET_FLOOR,
         className
       ),
@@ -1253,6 +1276,7 @@ function SelectItem({ className, children, ...props }) {
       "data-slot": "select-item",
       className: cn(
         "focus:bg-accent focus:text-accent-foreground relative flex w-full cursor-default items-center gap-2 rounded-sm py-1.5 pr-8 pl-2 text-sm outline-hidden select-none data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+        HIGHLIGHT_BAR,
         TAP_TARGET_FLOOR,
         className
       ),
@@ -1266,22 +1290,25 @@ function SelectItem({ className, children, ...props }) {
 }
 
 // src/ui/textarea.tsx
+import * as React8 from "react";
 import { jsx as jsx11 } from "react/jsx-runtime";
-function Textarea({ className, ...props }) {
+var Textarea = React8.forwardRef(function Textarea2({ className, ...props }, ref) {
   return /* @__PURE__ */ jsx11(
     "textarea",
     {
+      ref,
       "data-slot": "textarea",
       className: cn(
-        "border-input placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] outline-none disabled:pointer-events-none disabled:opacity-50 md:text-sm",
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-        "aria-invalid:ring-destructive/20 aria-invalid:border-destructive",
+        "border-input placeholder:text-muted-foreground flex field-sizing-content min-h-16 w-full rounded-md border bg-transparent px-3 py-2 text-base shadow-xs transition-[color,box-shadow] disabled:pointer-events-none disabled:opacity-50 md:text-sm",
+        FOCUS_RING,
+        "focus-visible:border-ring",
+        "aria-invalid:border-destructive",
         className
       ),
       ...props
     }
   );
-}
+});
 
 // src/blocks/CalloutBlockEditor.tsx
 import { jsx as jsx12, jsxs as jsxs8 } from "react/jsx-runtime";
@@ -1304,24 +1331,27 @@ function CalloutBlockEditor({ data, onChange }) {
 }
 
 // src/ui/input.tsx
+import * as React9 from "react";
 import { jsx as jsx13 } from "react/jsx-runtime";
-function Input({ className, type, ...props }) {
+var Input = React9.forwardRef(function Input2({ className, type, ...props }, ref) {
   return /* @__PURE__ */ jsx13(
     "input",
     {
+      ref,
       type,
       "data-slot": "input",
       className: cn(
-        "border-input placeholder:text-muted-foreground flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] outline-none file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:opacity-50 md:text-sm",
-        "focus-visible:border-ring focus-visible:ring-ring/50 focus-visible:ring-[3px]",
-        "aria-invalid:ring-destructive/20 aria-invalid:border-destructive",
+        "border-input placeholder:text-muted-foreground flex h-9 w-full min-w-0 rounded-md border bg-transparent px-3 py-1 text-base shadow-xs transition-[color,box-shadow] file:inline-flex file:h-7 file:border-0 file:bg-transparent file:text-sm file:font-medium disabled:pointer-events-none disabled:opacity-50 md:text-sm",
+        FOCUS_RING,
+        "focus-visible:border-ring",
+        "aria-invalid:border-destructive",
         TAP_TARGET_FLOOR,
         className
       ),
       ...props
     }
   );
-}
+});
 
 // src/blocks/CodeBlockEditor.tsx
 import { jsx as jsx14, jsxs as jsxs9 } from "react/jsx-runtime";
@@ -1356,15 +1386,15 @@ function CodeBlockEditor({ data, onChange }) {
 }
 
 // src/blocks/ImageBlockEditor.tsx
-import { useEffect as useEffect2, useRef as useRef3 } from "react";
+import { useEffect as useEffect3, useRef as useRef3 } from "react";
 
 // src/upload/UploadField.tsx
-import * as React6 from "react";
+import * as React10 from "react";
 import { jsx as jsx15, jsxs as jsxs10 } from "react/jsx-runtime";
 function UploadField({ category, label, accept, onUploaded }) {
   const { upload, onError } = useQuoin();
-  const [busy, setBusy] = React6.useState(false);
-  const [error, setError] = React6.useState(null);
+  const [busy, setBusy] = React10.useState(false);
+  const [error, setError] = React10.useState(null);
   async function run(file) {
     if (!upload) return;
     setBusy(true);
@@ -1377,11 +1407,12 @@ function UploadField({ category, label, accept, onUploaded }) {
       setBusy(false);
       return;
     }
-    setBusy(false);
     try {
-      onUploaded(result);
+      await onUploaded(result);
     } catch (cause) {
       onError(cause instanceof Error ? cause : new Error(String(cause)));
+    } finally {
+      setBusy(false);
     }
   }
   return /* @__PURE__ */ jsxs10("div", { className: "flex flex-col items-start gap-1.5", children: [
@@ -1416,14 +1447,18 @@ import { jsx as jsx16, jsxs as jsxs11 } from "react/jsx-runtime";
 function ImageBlockEditor({ data, onChange }) {
   const { resolveAssetUrl } = useQuoin();
   const latest = useRef3(data);
-  useEffect2(() => {
+  useEffect3(() => {
     latest.current = data;
   });
   const set = (patch) => onChange({ ...latest.current, ...patch });
-  const onUploaded = async (r) => {
-    const src = resolveAssetUrl(r.storageKey);
+  const newestKey = useRef3("");
+  const onUploaded = async ({ storageKey }) => {
+    newestKey.current = storageKey;
+    const { width: _width, height: _height, ...unsized } = latest.current;
+    onChange({ ...unsized, storageKey });
+    const src = resolveAssetUrl(storageKey);
     const size = src ? await intrinsicSize(src) : null;
-    set({ storageKey: r.storageKey, ...size });
+    if (size && newestKey.current === storageKey) set({ storageKey, ...size });
   };
   return /* @__PURE__ */ jsxs11("div", { className: "flex flex-col gap-2", children: [
     /* @__PURE__ */ jsx16(UploadField, { category: "image", label: "Upload image", onUploaded }),
@@ -1451,7 +1486,7 @@ function ImageBlockEditor({ data, onChange }) {
         }
       )
     ] }),
-    str(data.storageKey) && /* @__PURE__ */ jsx16("span", { className: "text-xs text-muted-foreground", children: "Image attached \u2713" })
+    str(data.storageKey) && /* @__PURE__ */ jsx16("span", { className: "text-xs text-muted-foreground", children: "Image attached" })
   ] });
 }
 
@@ -1478,12 +1513,12 @@ function FileBlockEditor({ data, onChange }) {
 // src/blocks/previews.tsx
 import { jsx as jsx18 } from "react/jsx-runtime";
 var HINT = "text-sm text-muted-foreground";
-var TONE_BORDER = {
-  info: "border-primary",
-  tip: "border-accent-foreground",
-  warning: "border-muted-foreground",
-  success: "border-secondary-foreground",
-  danger: "border-destructive"
+var TONE = {
+  info: "border-info bg-info/15",
+  tip: "border-primary bg-primary/15",
+  warning: "border-warning bg-warning/15",
+  success: "border-success bg-success/15",
+  danger: "border-destructive bg-destructive/15"
 };
 function MarkdownPreview({ data }) {
   const markdown = str(data.markdown);
@@ -1510,8 +1545,8 @@ function CalloutPreview({ data }) {
   const body = str(data.body);
   if (body.trim() === "") return /* @__PURE__ */ jsx18("p", { className: HINT, children: "Empty callout" });
   const tone = str(data.tone) || "info";
-  const border = TONE_BORDER[tone] ?? "border-border";
-  return /* @__PURE__ */ jsx18("div", { "data-tone": tone, className: `rounded-md border-l-4 ${border} bg-muted/50 p-3 text-sm`, children: body });
+  const paint = TONE[tone] ?? "border-border bg-muted/50";
+  return /* @__PURE__ */ jsx18("div", { "data-tone": tone, className: `rounded-md border-l-4 ${paint} p-3 text-sm`, children: body });
 }
 
 // src/blocks/core.ts
@@ -1559,7 +1594,7 @@ var coreBlocks = [
 ];
 
 // src/hooks/useBlockList.ts
-import * as React7 from "react";
+import * as React11 from "react";
 
 // src/hooks/new-block-id.ts
 function newBlockId() {
@@ -1626,8 +1661,8 @@ function reducer(state, action) {
   }
 }
 function useBlockList(initial) {
-  const [state, dispatch] = React7.useReducer(reducer, { blocks: initial, removals: /* @__PURE__ */ new Map() });
-  const insertAt = React7.useCallback(
+  const [state, dispatch] = React11.useReducer(reducer, { blocks: initial, removals: /* @__PURE__ */ new Map() });
+  const insertAt = React11.useCallback(
     (index, type, data = {}) => {
       const id = newBlockId();
       dispatch({ type: "insertAt", index, block: { id, type, data } });
@@ -1635,25 +1670,25 @@ function useBlockList(initial) {
     },
     []
   );
-  const update = React7.useCallback((id, data) => {
+  const update = React11.useCallback((id, data) => {
     dispatch({ type: "update", id, data });
   }, []);
-  const remove = React7.useCallback((id) => {
+  const remove = React11.useCallback((id) => {
     removalSeq += 1;
     const token = removalSeq;
     dispatch({ type: "remove", id, token });
     return token;
   }, []);
-  const undo = React7.useCallback((token) => {
+  const undo = React11.useCallback((token) => {
     dispatch({ type: "undo", token });
   }, []);
-  const move = React7.useCallback((index, dir) => {
+  const move = React11.useCallback((index, dir) => {
     dispatch({ type: "move", index, dir });
   }, []);
-  const reorder = React7.useCallback((from, to) => {
+  const reorder = React11.useCallback((from, to) => {
     dispatch({ type: "reorder", from, to });
   }, []);
-  const reset = React7.useCallback((blocks) => {
+  const reset = React11.useCallback((blocks) => {
     dispatch({ type: "reset", blocks });
   }, []);
   return { blocks: state.blocks, insertAt, update, remove, undo, move, reorder, reset };
@@ -1735,7 +1770,8 @@ function DropdownMenuItem({
       "data-slot": "dropdown-menu-item",
       "data-inset": inset,
       className: cn(
-        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-none select-none data-[inset]:pl-8 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4",
+        "focus:bg-accent focus:text-accent-foreground relative flex cursor-default items-center gap-2 rounded-sm px-2 py-1.5 text-sm outline-hidden select-none data-[inset]:pl-8 data-[disabled]:pointer-events-none data-[disabled]:opacity-50 [&_svg:not([class*='size-'])]:size-4",
+        HIGHLIGHT_BAR,
         TAP_TARGET_FLOOR,
         className
       ),
@@ -1812,7 +1848,7 @@ function BlockActionsMenu({
 }
 
 // src/canvas/BlockCard.tsx
-import * as React8 from "react";
+import * as React12 from "react";
 import { Pencil } from "lucide-react";
 
 // src/canvas/BlockEditor.tsx
@@ -1906,32 +1942,36 @@ function BlockCardImpl({
   const definition = blockByType(blockTypes, block.type);
   const Preview = definition?.preview;
   const editable = Boolean(definition?.editor) && !readOnly;
-  const [editing, setEditing] = React8.useState(editingByDefault && editable);
-  const editButtonRef = React8.useRef(null);
-  const editorContainerRef = React8.useRef(null);
-  const returnFocusOnClose = React8.useRef(false);
-  const clickedRef = React8.useRef(null);
-  const scrollTopRef = React8.useRef(null);
-  const handleInsertBlock = React8.useCallback(
+  const [editing, setEditing] = React12.useState(editingByDefault && editable);
+  const editButtonRef = React12.useRef(null);
+  const editorContainerRef = React12.useRef(null);
+  const returnFocusOnClose = React12.useRef(false);
+  const clickedRef = React12.useRef(null);
+  const scrollTopRef = React12.useRef(null);
+  const seedRef = React12.useRef(initialSelection);
+  React12.useEffect(() => {
+    seedRef.current = initialSelection;
+  });
+  const handleInsertBlock = React12.useCallback(
     (type) => onInsertBlock?.(index + 1, type),
     [onInsertBlock, index]
   );
-  const leaveEditing = React8.useCallback(() => {
+  const leaveEditing = React12.useCallback(() => {
     returnFocusOnClose.current = true;
     setEditing(false);
   }, []);
-  const settleRef = React8.useRef(null);
+  const settleRef = React12.useRef(null);
   const clearSettle = () => {
     if (settleRef.current === null) return;
     window.clearTimeout(settleRef.current);
     settleRef.current = null;
   };
-  React8.useEffect(() => clearSettle, []);
+  React12.useEffect(() => clearSettle, []);
   function stillInside(node) {
     if (!node) return false;
     return Boolean(editorContainerRef.current?.contains(node)) || Boolean(node.closest(PORTALLED_OVERLAY));
   }
-  React8.useEffect(() => {
+  React12.useEffect(() => {
     if (!editing) return;
     function onPointerDown(e) {
       if (stillInside(e.target)) return;
@@ -1948,7 +1988,7 @@ function BlockCardImpl({
       setEditing(false);
     }, 0);
   }
-  React8.useEffect(() => {
+  React12.useEffect(() => {
     if (!editing) return;
     const field = editorContainerRef.current?.querySelector(
       'textarea, input, [role="combobox"]'
@@ -1959,7 +1999,7 @@ function BlockCardImpl({
     if (clicked === null || !(field instanceof HTMLTextAreaElement)) {
       field.focus();
       if (field instanceof HTMLTextAreaElement) {
-        const at = initialSelection ?? { start: field.value.length, end: field.value.length };
+        const at = seedRef.current ?? { start: field.value.length, end: field.value.length };
         field.setSelectionRange(at.start, at.end);
       }
       return;
@@ -1967,26 +2007,26 @@ function BlockCardImpl({
     const offset = sourceOffsetFor(field.value, clicked);
     field.focus({ preventScroll: true });
     field.setSelectionRange(offset, offset);
-  }, [editing, initialSelection]);
-  React8.useLayoutEffect(() => {
+  }, [editing]);
+  useIsomorphicLayoutEffect(() => {
     const scrollTop = scrollTopRef.current;
     scrollTopRef.current = null;
     if (!editing || scrollTop === null) return;
     const scroller = document.scrollingElement ?? document.documentElement;
     if (scroller.scrollTop !== scrollTop) scroller.scrollTop = scrollTop;
   }, [editing]);
-  React8.useEffect(() => {
+  React12.useEffect(() => {
     if (editing || !returnFocusOnClose.current) return;
     returnFocusOnClose.current = false;
     editButtonRef.current?.focus();
   }, [editing]);
-  const reportedType = React8.useRef(null);
-  React8.useEffect(() => {
+  const reportedType = React12.useRef(null);
+  React12.useEffect(() => {
     if (definition || reportedType.current === block.type) return;
     reportedType.current = block.type;
     onError(new Error(`No block type is registered for "${block.type}".`));
   }, [definition, block.type, onError]);
-  React8.useEffect(() => {
+  React12.useEffect(() => {
     if (!readOnly || !definition || definition.preview) return;
     devWarn(
       `the block type "${block.type}" has no \`preview\`, so a read-only canvas can draw only its label. Give its definition a \`preview\` to render the block itself.`
@@ -2067,20 +2107,21 @@ function BlockCardImpl({
     )
   ] });
 }
-var BlockCard = React8.memo(BlockCardImpl);
+var BlockCard = React12.memo(BlockCardImpl);
 
 // src/canvas/BlockInserter.tsx
-import * as React9 from "react";
+import * as React13 from "react";
 import { Plus } from "lucide-react";
 import { jsx as jsx23, jsxs as jsxs16 } from "react/jsx-runtime";
 function BlockInserter({
   index,
   onInsert,
-  label
+  label,
+  canvasRef
 }) {
   const { blockTypes } = useQuoin();
   const options = paletteBlocks(blockTypes);
-  const insertedAtRef = React9.useRef(null);
+  const insertedAtRef = React13.useRef(null);
   function handleSelect(type) {
     insertedAtRef.current = index;
     onInsert(index, type);
@@ -2090,7 +2131,7 @@ function BlockInserter({
     insertedAtRef.current = null;
     if (insertedAt === null) return;
     event.preventDefault();
-    const card = document.querySelector(`[data-block-index="${insertedAt}"]`);
+    const card = canvasRef.current?.querySelector(`[data-block-index="${insertedAt}"]`);
     if (!card) return;
     if (typeof card.scrollIntoView === "function") {
       card.scrollIntoView({ block: "center", behavior: "smooth" });
@@ -2126,21 +2167,22 @@ function BlockInserter({
 }
 
 // src/canvas/DocumentStarter.tsx
-import * as React10 from "react";
+import * as React14 from "react";
 import { jsx as jsx24, jsxs as jsxs17 } from "react/jsx-runtime";
 var LINE = [
-  "w-full resize-none rounded-md border-0 bg-transparent px-2 py-1 outline-none",
+  "w-full resize-none rounded-md border-0 bg-transparent px-2 py-1",
   "text-base leading-7 placeholder:text-muted-foreground",
-  "transition-[color,box-shadow] focus-visible:ring-[3px] focus-visible:ring-ring/50"
+  "transition-[color,box-shadow]",
+  FOCUS_RING
 ].join(" ");
 function DocumentStarter({
   autoFocus = false,
   onStart,
   onInsertBlock
 }) {
-  const ref = React10.useRef(null);
+  const ref = React14.useRef(null);
   const palette = useSlashPalette(ref);
-  const [shortcutsOpen, setShortcutsOpen] = React10.useState(false);
+  const [shortcutsOpen, setShortcutsOpen] = React14.useState(false);
   function handleChange(e) {
     const value = e.target.value;
     e.target.value = "";
@@ -2162,6 +2204,7 @@ function DocumentStarter({
         defaultValue: "",
         onChange: handleChange,
         onKeyDown: (e) => {
+          if (e.nativeEvent.isComposing || e.keyCode === 229) return;
           if (e.key !== "/") return;
           e.preventDefault();
           palette.openAtCaret();
@@ -2288,14 +2331,36 @@ function SortableBlock({
 }
 
 // src/canvas/unacknowledged.ts
-var UNACKNOWLEDGED_LIMIT = 64;
+var STRUCTURAL_ECHO_LIMIT = 64;
+function createUnacknowledged() {
+  return { sequences: /* @__PURE__ */ new WeakMap(), emitted: 0, acknowledged: 0, newest: [] };
+}
+function keepNewest(outstanding) {
+  const kept = Math.min(STRUCTURAL_ECHO_LIMIT, outstanding.emitted - outstanding.acknowledged);
+  outstanding.newest.splice(0, outstanding.newest.length - kept);
+}
 function remember(outstanding, blocks) {
-  outstanding.add(blocks);
-  while (outstanding.size > UNACKNOWLEDGED_LIMIT) {
-    const oldest = outstanding.values().next();
-    if (oldest.done) return;
-    outstanding.delete(oldest.value);
+  outstanding.emitted += 1;
+  outstanding.sequences.set(blocks, outstanding.emitted);
+  outstanding.newest.push(blocks);
+  keepNewest(outstanding);
+}
+function copiedSequence(outstanding, blocks) {
+  for (const emitted of outstanding.newest) {
+    if (sameBlocks(emitted, blocks)) return outstanding.sequences.get(emitted);
   }
+  return void 0;
+}
+function acknowledge(outstanding, blocks) {
+  const echoed = outstanding.sequences.get(blocks) ?? copiedSequence(outstanding, blocks);
+  if (echoed === void 0 || echoed <= outstanding.acknowledged) return false;
+  outstanding.acknowledged = echoed;
+  keepNewest(outstanding);
+  return true;
+}
+function forgetAll(outstanding) {
+  outstanding.acknowledged = outstanding.emitted;
+  keepNewest(outstanding);
 }
 
 // src/canvas/BlockCanvas.tsx
@@ -2316,20 +2381,20 @@ function Canvas({
     useSensor(PointerSensor, { activationConstraint: { distance: 4 } }),
     useSensor(KeyboardSensor, { coordinateGetter: sortableKeyboardCoordinates })
   );
-  const dndId = React11.useId();
-  const [newBlockId2, setNewBlockId] = React11.useState(null);
-  const [seedSelection, setSeedSelection] = React11.useState(null);
-  const listRef = React11.useRef(null);
-  const pendingDeleteIndexRef = React11.useRef(null);
-  const removedRef = React11.useRef(null);
-  const announcements = React11.useMemo(
+  const dndId = React15.useId();
+  const [newBlockId2, setNewBlockId] = React15.useState(null);
+  const [seedSelection, setSeedSelection] = React15.useState(null);
+  const listRef = React15.useRef(null);
+  const pendingDeleteIndexRef = React15.useRef(null);
+  const removedRef = React15.useRef(null);
+  const announcements = React15.useMemo(
     () => buildAnnouncements(list.blocks, blockTypes),
     [list.blocks, blockTypes]
   );
-  const lastEmitted = React11.useRef(blocks);
-  const lastSupplied = React11.useRef(blocks);
-  const unacknowledged = React11.useRef(/* @__PURE__ */ new Set());
-  React11.useEffect(() => {
+  const lastEmitted = React15.useRef(blocks);
+  const lastSupplied = React15.useRef(blocks);
+  const unacknowledged = React15.useRef(createUnacknowledged());
+  React15.useEffect(() => {
     if (list.blocks === lastEmitted.current) return;
     lastEmitted.current = list.blocks;
     remember(unacknowledged.current, list.blocks);
@@ -2338,21 +2403,22 @@ function Canvas({
     removedRef.current = null;
     if (removed) onDelete?.(removed.block, removed.index);
   }, [list.blocks, onChange, onDelete]);
-  React11.useEffect(() => {
+  React15.useEffect(() => {
     const previous = lastSupplied.current;
     lastSupplied.current = blocks;
-    if (unacknowledged.current.has(blocks)) {
-      if (blocks === lastEmitted.current) unacknowledged.current.clear();
-      return;
-    }
+    if (acknowledge(unacknowledged.current, blocks)) return;
     if (sameBlocks(blocks, previous) || sameBlocks(blocks, list.blocks)) return;
-    unacknowledged.current.clear();
+    forgetAll(unacknowledged.current);
     lastEmitted.current = blocks;
     reset(blocks);
   }, [blocks, reset]);
-  const insertPlain = React11.useCallback(
+  React15.useEffect(() => {
+    if (newBlockId2 === null) return;
+    setNewBlockId(null);
+    setSeedSelection(null);
+  }, [newBlockId2]);
+  const insertPlain = React15.useCallback(
     (index, type, data) => {
-      setSeedSelection(null);
       const seed = data ?? blockByType(blockTypes, type)?.initialData?.() ?? {};
       setNewBlockId(insertAt(index, type, seed));
     },
@@ -2362,10 +2428,9 @@ function Canvas({
     const block = list.blocks[index];
     pendingDeleteIndexRef.current = index;
     if (block) removedRef.current = { block, index };
-    setNewBlockId((current) => current === id2 ? null : current);
     remove(id2);
   }
-  React11.useEffect(() => {
+  React15.useEffect(() => {
     const index = pendingDeleteIndexRef.current;
     pendingDeleteIndexRef.current = null;
     if (index === null || !listRef.current) return;
@@ -2391,7 +2456,7 @@ function Canvas({
   };
   if (readOnly) return /* @__PURE__ */ jsx27(ReadOnlyCanvas, { blocks: list.blocks, onUpdate: update, root: rootProps });
   return /* @__PURE__ */ jsxs19("div", { ...rootProps, children: [
-    /* @__PURE__ */ jsx27(BlockInserter, { index: 0, onInsert: insertPlain, label: "Insert a block at the start" }),
+    /* @__PURE__ */ jsx27(BlockInserter, { index: 0, onInsert: insertPlain, label: "Insert a block at the start", canvasRef: listRef }),
     /* @__PURE__ */ jsx27(
       DndContext,
       {
@@ -2435,7 +2500,8 @@ function Canvas({
             {
               index: i + 1,
               onInsert: insertPlain,
-              label: `Insert a block after block ${i + 1}`
+              label: `Insert a block after block ${i + 1}`,
+              canvasRef: listRef
             }
           )
         ] }, b.id)) }) })
@@ -2467,7 +2533,7 @@ function BlockCanvas({
   id,
   "aria-label": ariaLabel
 }) {
-  const config = React11.useMemo(
+  const config = React15.useMemo(
     () => ({ blockTypes, upload, resolveAssetUrl, onError }),
     [blockTypes, upload, resolveAssetUrl, onError]
   );
@@ -2487,71 +2553,134 @@ function BlockCanvas({
 }
 
 // src/hooks/useAutosave.ts
-import * as React12 from "react";
+import * as React16 from "react";
+
+// src/hooks/autosave-backoff.ts
+function clearTimer(ref) {
+  if (ref.current !== null) clearTimeout(ref.current);
+  ref.current = null;
+}
+var alwaysRetry = () => true;
 function reportedFailure(result) {
   return typeof result === "object" && result !== null && "ok" in result && result.ok === false;
 }
+async function attemptSave(run) {
+  try {
+    const result = await run();
+    return reportedFailure(result) ? { error: result } : null;
+  } catch (error) {
+    return { error };
+  }
+}
+function nextRetryDelay(error, retriesSoFar, { debounceMs, maxBackoffMs, maxRetries, isRetryable }) {
+  if (retriesSoFar >= maxRetries || !isRetryable(error)) return null;
+  return Math.min(debounceMs * 2 ** (retriesSoFar + 1), maxBackoffMs);
+}
+
+// src/hooks/useAutosave.ts
 function useAutosave({
   deps,
   build,
   save,
   debounceMs = 2e3,
-  maxBackoffMs = 3e4
+  maxBackoffMs = 3e4,
+  maxRetries = 8,
+  isRetryable = alwaysRetry,
+  flushOnHide = true
 }) {
-  const [status, setStatus] = React12.useState("idle");
-  const dirtyRef = React12.useRef(false);
-  const retryRef = React12.useRef(0);
-  const backoffRef = React12.useRef(null);
-  const buildRef = React12.useRef(build);
-  const saveRef = React12.useRef(save);
-  const runRef = React12.useRef(() => {
+  const [status, setStatus] = React16.useState("idle");
+  const [error, setError] = React16.useState(null);
+  const dirtyRef = React16.useRef(false);
+  const inFlightRef = React16.useRef(false);
+  const disposedRef = React16.useRef(false);
+  const retriesRef = React16.useRef(0);
+  const debounceRef = React16.useRef(null);
+  const backoffRef = React16.useRef(null);
+  const buildRef = React16.useRef(build);
+  const saveRef = React16.useRef(save);
+  const runRef = React16.useRef(() => {
   });
-  React12.useEffect(() => {
+  React16.useEffect(() => {
     buildRef.current = build;
     saveRef.current = save;
+    const policy = { debounceMs, maxBackoffMs, maxRetries, isRetryable };
     runRef.current = () => {
+      clearTimer(debounceRef);
+      clearTimer(backoffRef);
+      if (inFlightRef.current) return;
+      inFlightRef.current = true;
+      dirtyRef.current = false;
+      if (!disposedRef.current) setStatus("saving");
       void (async () => {
-        setStatus("saving");
-        try {
-          const res = await saveRef.current(buildRef.current());
-          if (reportedFailure(res)) throw new Error("save rejected");
-          retryRef.current = 0;
-          dirtyRef.current = false;
-          setStatus("saved");
-        } catch {
-          setStatus("retrying");
-          retryRef.current += 1;
-          const delay = Math.min(debounceMs * 2 ** retryRef.current, maxBackoffMs);
-          if (backoffRef.current) clearTimeout(backoffRef.current);
-          backoffRef.current = setTimeout(() => runRef.current(), delay);
+        const failure = await attemptSave(() => saveRef.current(buildRef.current()));
+        inFlightRef.current = false;
+        if (disposedRef.current) {
+          if (dirtyRef.current) runRef.current();
+          return;
+        }
+        if (!failure) {
+          retriesRef.current = 0;
+          setError(null);
+          if (dirtyRef.current) runRef.current();
+          else setStatus("saved");
+          return;
+        }
+        dirtyRef.current = true;
+        setError(failure.error);
+        const delay = nextRetryDelay(failure.error, retriesRef.current, policy);
+        if (delay === null) {
+          setStatus("failed");
+          return;
         }
+        retriesRef.current += 1;
+        setStatus("retrying");
+        backoffRef.current = setTimeout(() => runRef.current(), delay);
       })();
     };
   });
-  const seenRef = React12.useRef(null);
-  React12.useEffect(() => {
+  const seenRef = React16.useRef(null);
+  React16.useEffect(() => {
     const seen2 = seenRef.current;
     seenRef.current = deps;
     if (seen2 === null) return;
     const unchanged = seen2.length === deps.length && seen2.every((v, i) => v === deps[i]);
     if (!unchanged) dirtyRef.current = true;
   }, deps);
-  React12.useEffect(() => {
+  React16.useEffect(() => {
     if (!dirtyRef.current) return;
-    const handle = setTimeout(() => runRef.current(), debounceMs);
-    return () => clearTimeout(handle);
+    clearTimer(debounceRef);
+    debounceRef.current = setTimeout(() => runRef.current(), debounceMs);
+    return () => clearTimer(debounceRef);
   }, deps);
-  React12.useEffect(
-    () => () => {
-      if (backoffRef.current) clearTimeout(backoffRef.current);
-    },
-    []
-  );
-  const retry = React12.useCallback(() => {
-    if (backoffRef.current) clearTimeout(backoffRef.current);
+  React16.useEffect(() => {
+    disposedRef.current = false;
+    return () => {
+      disposedRef.current = true;
+      clearTimer(debounceRef);
+      clearTimer(backoffRef);
+      if (dirtyRef.current) runRef.current();
+    };
+  }, []);
+  const retry = React16.useCallback(() => {
+    retriesRef.current = 0;
     runRef.current();
   }, []);
-  return { status, retry };
+  const flush = React16.useCallback(() => {
+    if (dirtyRef.current) retry();
+  }, [retry]);
+  React16.useEffect(() => {
+    if (!flushOnHide) return;
+    const onVisibility = () => {
+      if (document.visibilityState === "hidden") flush();
+    };
+    window.addEventListener("pagehide", flush);
+    document.addEventListener("visibilitychange", onVisibility);
+    return () => {
+      window.removeEventListener("pagehide", flush);
+      document.removeEventListener("visibilitychange", onVisibility);
+    };
+  }, [flushOnHide, flush]);
+  return { status, error, retry, flush };
 }
 export {
   BlockCanvas,