@bendyline/squisq-editor-react 2.11.18 → 2.11.19

package/dist/{chunk-GIXXD2O3.js → chunk-5EB3BGPE.js}

@@ -17,7 +17,7 @@ import {
   useDictationState,
   useEditorContext,
   useEditorContextOptional
-} from "./chunk-45NQUR62.js";
+} from "./chunk-TZX7RKZV.js";
 import {
   monacoLanguageRequestKey,
   monacoLanguagesForDocument,
@@ -25,14 +25,14 @@ import {
 } from "./chunk-V4NBQF5C.js";
 import {
   MarkdownEscape
-} from "./chunk-2XXBDECJ.js";
+} from "./chunk-OCQEWWHI.js";
 import {
   escapeLinkLabel,
   formatLinkDestination,
   markdownToTiptap,
   mediaEditNodeAttributes,
   tiptapToMarkdown
-} from "./chunk-DPAMJV6A.js";
+} from "./chunk-HSWWEWT4.js";
 import {
   ImageEditor,
   ImageViewer,
@@ -45,13 +45,13 @@ import {
   documentTitleFromFileName,
   resolveBlockVisual,
   useModalDialog
-} from "./chunk-U6NVT3BY.js";
+} from "./chunk-UFK47ZAI.js";
 import {
   Icon
 } from "./chunk-GS7QWYFT.js";
 import {
   TeleprompterView
-} from "./chunk-H7YTL6SL.js";
+} from "./chunk-DJS5I5NO.js";
 
 // src/useMonacoLoader.ts
 import { useEffect, useState } from "react";
@@ -863,7 +863,7 @@ function formatBytes(n) {
   return `${(n / (1024 * 1024)).toFixed(1)} MB`;
 }
 function VersionHistoryPanel() {
-  const { versioning, saveVersion, replaceAll, markdownSource, colorScheme } = useEditorContext();
+  const { versioning, versioningAutoSaves, saveVersion, replaceAll, markdownSource, colorScheme } = useEditorContext();
   const [open, setOpen] = useState2(false);
   const [state, setState3] = useState2(initialState);
   const containerRef = useRef2(null);
@@ -1006,7 +1006,7 @@ function VersionHistoryPanel() {
           /* @__PURE__ */ jsxs("div", { className: "squisq-version-history-list-pane", children: [
             /* @__PURE__ */ jsx("div", { className: "squisq-version-history-header", children: /* @__PURE__ */ jsx("span", { className: "squisq-version-history-title", children: "Version history" }) }),
             state.error && /* @__PURE__ */ jsx("div", { className: "squisq-version-history-error", children: state.error }),
-            state.loading ? /* @__PURE__ */ jsx("div", { className: "squisq-version-history-empty", children: "Loading\u2026" }) : visibleVersions.length === 0 ? /* @__PURE__ */ jsx("div", { className: "squisq-version-history-empty", children: "No versions yet. Versions are saved automatically as you edit." }) : /* @__PURE__ */ jsxs("ul", { className: "squisq-version-history-list", children: [
+            state.loading ? /* @__PURE__ */ jsx("div", { className: "squisq-version-history-empty", children: "Loading\u2026" }) : state.versions.length === 0 ? /* @__PURE__ */ jsx("div", { className: "squisq-version-history-empty", children: versioningAutoSaves ? "No versions yet. One is saved automatically a few seconds after you stop typing." : "No versions yet." }) : /* @__PURE__ */ jsxs("ul", { className: "squisq-version-history-list", children: [
               /* @__PURE__ */ jsx(
                 "li",
                 {
@@ -1085,7 +1085,8 @@ function VersionHistoryPanel() {
                   },
                   v2.path
                 );
-              })
+              }),
+              visibleVersions.length === 0 && /* @__PURE__ */ jsx("li", { className: "squisq-version-history-note", children: "Your current draft is saved as a version. Earlier versions will appear here as you keep editing." })
             ] })
           ] })
         ]
@@ -4431,6 +4432,9 @@ function proofSuggestionLabel(suggestion) {
   if (suggestion.kind === "insertAfter") return `Insert \u201C${suggestion.text}\u201D after`;
   return suggestion.text;
 }
+function proofMessageText(finding) {
+  return finding.message.replace(/`([^`]+)`/g, "\u201C$1\u201D");
+}
 function proofSuggestionLabels(finding, limit) {
   return finding.suggestions.slice(0, limit).map(proofSuggestionLabel);
 }
@@ -4438,7 +4442,7 @@ function proofHoverMarkdown(finding, suggestionLimit = 3) {
   const lines2 = [
     `**${PROOF_CATEGORY_LABELS[finding.category]}**`,
     "",
-    escapeMarkdown(finding.message)
+    escapeMarkdown(proofMessageText(finding))
   ];
   const labels = proofSuggestionLabels(finding, suggestionLimit);
   if (labels.length > 0) {
@@ -4775,6 +4779,12 @@ function useProofing() {
       schedule("immediate");
     }
   }, [monacoEditor]);
+  useEffect8(() => {
+    lastWriteDecorationsRef.current = [];
+    if (status === "ready" && enabled && activeView === "wysiwyg" && tiptapEditor) {
+      schedule("immediate");
+    }
+  }, [tiptapEditor]);
   const dictionaryKey = settings.dictionary.join("\n");
   const syncedDictionaryRef = useRef7(dictionaryKey);
   useEffect8(() => {
@@ -5374,7 +5384,7 @@ function ProofingMenu({
         children: [
           /* @__PURE__ */ jsxs7("div", { className: "squisq-proof-menu-header", children: [
             /* @__PURE__ */ jsx8("span", { className: `squisq-proof-dot squisq-proof-dot--${finding.category}`, "aria-hidden": true }),
-            /* @__PURE__ */ jsx8("span", { className: "squisq-proof-menu-message", children: finding.message })
+            /* @__PURE__ */ jsx8("span", { className: "squisq-proof-menu-message", children: proofMessageText(finding) })
           ] }),
           actions.map((action, index2) => /* @__PURE__ */ jsx8(
             "button",
@@ -5458,7 +5468,7 @@ function ProofingTooltip({
             /* @__PURE__ */ jsx9("span", { className: `squisq-proof-dot squisq-proof-dot--${finding.category}`, "aria-hidden": true }),
             /* @__PURE__ */ jsx9("span", { className: "squisq-proof-tooltip-category", children: PROOF_CATEGORY_LABELS[finding.category] })
           ] }),
-          /* @__PURE__ */ jsx9("div", { className: "squisq-proof-tooltip-message", children: finding.message }),
+          /* @__PURE__ */ jsx9("div", { className: "squisq-proof-tooltip-message", children: proofMessageText(finding) }),
           suggestions.length > 0 && /* @__PURE__ */ jsxs8("div", { className: "squisq-proof-tooltip-suggestions", children: [
             suggestions.map((suggestion, index2) => /* @__PURE__ */ jsx9(
               "button",
@@ -17942,7 +17952,6 @@ var BUTTONS = [
     faIcon: "fa-solid fa-face-smile"
   }
 ];
-var FIRST_MEDIA_INDEX = BUTTONS.findIndex((b) => b.group === "media");
 var MEDIA_BUTTONS = BUTTONS.filter((b) => b.group === "media");
 var FILE_STORING_BUTTONS = /* @__PURE__ */ new Set(["image", "file"]);
 var CONVERT_BUTTONS = MEDIA_BUTTONS.filter((b) => b.id === "table" || b.id === "tasklist");
@@ -17952,7 +17961,6 @@ var MERMAID_TYPE_MENU_WIDTH = 520;
 var CHART_TYPE_MENU_WIDTH = 360;
 var TASK_LIST_ITEMS = ["Task 1", "Task 2", "Task 3"];
 var TASK_LIST_MARKDOWN = TASK_LIST_ITEMS.map((item) => `- [ ] ${item}`).join("\n");
-var BUTTON_INDEX_BY_ID = new Map(BUTTONS.map((b, i) => [b.id, i]));
 function buttonIcon(btn) {
   return btn.faIcon ? /* @__PURE__ */ jsx42(Icon, { icon: btn.faIcon }) : /* @__PURE__ */ jsx42("span", { className: "squisq-toolbar-text-glyph", "aria-hidden": "true", children: btn.icon });
 }
@@ -17963,6 +17971,66 @@ function fileCountBadge(count) {
   return count > 99 ? "99+" : String(count);
 }
 
+// src/toolbar/toolbarCollapse.ts
+var TOOLBAR_COLLAPSE_ORDER = [
+  "contextual:table",
+  "contextual:transition",
+  "contextual:template",
+  "subscript",
+  "superscript",
+  "layouts",
+  "h6",
+  "h5",
+  "h4",
+  "code",
+  "hr",
+  "docSettings",
+  "files",
+  "strikethrough",
+  "quote",
+  "h3",
+  "ol",
+  "h2",
+  "h1",
+  "ul",
+  "italic",
+  "bold",
+  "insert"
+];
+var COLLAPSE_RANK = new Map(TOOLBAR_COLLAPSE_ORDER.map((id, rank) => [id, rank]));
+function collapseRank(id) {
+  return COLLAPSE_RANK.get(id) ?? -1;
+}
+var FIT_TOLERANCE = 0.5;
+function requiredRowWidth(layout, collapsed) {
+  let width = 0;
+  let shownGroups = 0;
+  for (const group of layout.groups) {
+    const shown = group.items.filter((id) => !collapsed.has(id));
+    if (shown.length === 0) continue;
+    if (group.separated && shownGroups > 0) width += layout.separatorWidth + layout.groupGap;
+    for (const id of shown) width += layout.widthOf(id);
+    width += (shown.length - 1) * layout.groupGap;
+    shownGroups++;
+  }
+  width += Math.max(0, shownGroups - 1) * layout.laneGap;
+  for (const id of layout.chrome) {
+    if (!collapsed.has(id)) width += layout.widthOf(id) + layout.rowGap;
+  }
+  if (collapsed.size > 0) width += layout.triggerWidth + layout.rowGap;
+  return width;
+}
+function chooseCollapsedItems(layout) {
+  const present = [...layout.groups.flatMap((group) => group.items), ...layout.chrome];
+  const order = [...present].sort((a, b) => collapseRank(a) - collapseRank(b));
+  const collapsed = /* @__PURE__ */ new Set();
+  for (const id of order) {
+    if (requiredRowWidth(layout, collapsed) <= layout.budget + FIT_TOLERANCE) break;
+    collapsed.add(id);
+  }
+  return collapsed;
+}
+
 // src/toolbar/tiptapToolbar.ts
 function paragraphContent(text) {
   return text ? { type: "paragraph", content: [{ type: "text", text }] } : { type: "paragraph" };
@@ -18610,8 +18678,11 @@ function Toolbar({
     setChartTypeMenuAnchor(null);
   }, []);
   const actionsRef = useRef31(null);
-  const [measuredOverflowIndex, setMeasuredOverflowIndex] = useState33(null);
+  const [collapsedKey, setCollapsedKey] = useState33("");
   const [clippedContextualKey, setClippedContextualKey] = useState33("");
+  const itemWidthsRef = useRef31(/* @__PURE__ */ new Map());
+  const chromeOnLaneRowRef = useRef31(/* @__PURE__ */ new Map());
+  const collapsedCountRef = useRef31(0);
   const [showOverflow, setShowOverflow] = useState33(false);
   const overflowRef = useRef31(null);
   useEscapeDismissal(showOverflow, () => setShowOverflow(false), overflowTriggerRef);
@@ -18624,32 +18695,95 @@ function Toolbar({
     closeInsertMenu();
     closeEmojiPicker();
   }, [closeEmojiPicker, closeInsertMenu, findMode]);
-  const overflowIndex = measuredOverflowIndex;
-  const clippedContextual = new Set(clippedContextualKey ? clippedContextualKey.split("|") : []);
+  const actionsLaneShown = !findMode && activeView !== "preview" && !isCodeMode && (showFormattingControls || showInsertControls);
+  const collapsed = new Set(actionsLaneShown && collapsedKey ? collapsedKey.split("|") : []);
+  const clippedContextual = new Set(
+    actionsLaneShown && clippedContextualKey ? clippedContextualKey.split("|") : []
+  );
   useEffect26(() => {
     const container = actionsRef.current;
     if (!container) return;
+    const toolbar = container.parentElement;
+    const widths = itemWidthsRef.current;
+    const onLaneRow = chromeOnLaneRowRef.current;
+    const gapOf = (element) => element ? Number.parseFloat(getComputedStyle(element).columnGap) || 0 : 0;
+    const isDisplayed = (element) => !element.classList.contains("squisq-toolbar-button--overflowed") && !element.closest(".squisq-toolbar-group--collapsed");
+    const remember = (id, element) => {
+      const rect = element.getBoundingClientRect();
+      if (rect.width > 0) widths.set(id, rect.width);
+      return rect;
+    };
     const measure = () => {
-      const containerRight = container.getBoundingClientRect().right;
-      const children = container.querySelectorAll(
-        ":scope > .squisq-toolbar-group:not(.squisq-toolbar-contextual) > .squisq-toolbar-button"
-      );
-      let firstHidden = null;
-      children.forEach((child) => {
-        if (firstHidden !== null) return;
-        if (child.getBoundingClientRect().right > containerRight + 2) {
-          const index2 = Number(child.dataset.btnIndex);
-          firstHidden = Number.isNaN(index2) ? null : index2;
+      const laneRect = container.getBoundingClientRect();
+      const groups2 = [];
+      container.querySelectorAll(":scope > .squisq-toolbar-group").forEach((group) => {
+        const contextual = group.dataset.contextual;
+        if (contextual) {
+          remember(`contextual:${contextual}`, group);
+          groups2.push({ items: [`contextual:${contextual}`], separated: false });
+          return;
         }
+        const items = [];
+        group.querySelectorAll(":scope > [data-toolbar-item]").forEach((item) => {
+          const id = item.dataset.toolbarItem;
+          items.push(id);
+          if (isDisplayed(item)) remember(id, item);
+        });
+        if (items.length > 0) groups2.push({ items, separated: true });
       });
-      setMeasuredOverflowIndex(firstHidden);
-      const clipped = [];
-      container.querySelectorAll(":scope > .squisq-toolbar-contextual").forEach((group) => {
-        if (group.getBoundingClientRect().right > containerRight + 2) {
-          clipped.push(group.dataset.contextual ?? "");
+      const separator = container.querySelector(
+        ":scope > .squisq-toolbar-group:not(.squisq-toolbar-contextual):not(.squisq-toolbar-group--collapsed) > .squisq-toolbar-separator"
+      );
+      if (separator) {
+        const style = getComputedStyle(separator);
+        const width = separator.getBoundingClientRect().width + (Number.parseFloat(style.marginLeft) || 0) + (Number.parseFloat(style.marginRight) || 0);
+        if (width > 0) widths.set("separator", width);
+      }
+      const rowGap = gapOf(toolbar);
+      let budget = laneRect.width;
+      const chrome = [];
+      toolbar?.querySelectorAll(":scope > [data-toolbar-item]").forEach((item) => {
+        const id = item.dataset.toolbarItem;
+        if (isDisplayed(item)) {
+          const rect = remember(id, item);
+          if (rect.width > 0 && rect.height > 0) {
+            onLaneRow.set(id, rect.top < laneRect.bottom && rect.bottom > laneRect.top);
+          }
+          if (onLaneRow.get(id)) budget += (widths.get(id) ?? 0) + rowGap;
         }
+        if (onLaneRow.get(id)) chrome.push(id);
       });
-      setClippedContextualKey(clipped.join("|"));
+      const trigger = toolbar?.querySelector(":scope > .squisq-toolbar-overflow");
+      const triggerWidth = trigger?.getBoundingClientRect().width ?? 0;
+      if (triggerWidth > 0) {
+        widths.set("trigger", triggerWidth);
+        budget += triggerWidth + rowGap;
+      }
+      const known = [...widths.values()];
+      const fallbackWidth = known.length > 0 ? Math.min(...known) : 32;
+      const layout = {
+        groups: groups2,
+        chrome,
+        widthOf: (id) => widths.get(id) ?? fallbackWidth,
+        separatorWidth: widths.get("separator") ?? 0,
+        groupGap: gapOf(container.querySelector(":scope > .squisq-toolbar-group")),
+        laneGap: gapOf(container),
+        rowGap,
+        triggerWidth: widths.get("trigger") ?? fallbackWidth,
+        budget
+      };
+      let next = chooseCollapsedItems(layout);
+      if (next.size < collapsedCountRef.current) {
+        next = chooseCollapsedItems({ ...layout, budget: budget - 4 });
+      }
+      collapsedCountRef.current = next.size;
+      const ordered = [...groups2.flatMap((group) => group.items), ...chrome].filter(
+        (id) => next.has(id)
+      );
+      setCollapsedKey(ordered.filter((id) => !id.startsWith("contextual:")).join("|"));
+      setClippedContextualKey(
+        ordered.filter((id) => id.startsWith("contextual:")).map((id) => id.slice("contextual:".length)).join("|")
+      );
     };
     const ro = typeof ResizeObserver === "undefined" ? null : new ResizeObserver(measure);
     const observeAll = () => {
@@ -18670,7 +18804,7 @@ function Toolbar({
       if (!ro) window.removeEventListener("resize", measure);
       mo.disconnect();
     };
-  }, [activeView]);
+  }, [activeView, actionsLaneShown]);
   useEffect26(() => {
     if (!showOverflow) return;
     const handleClick = (e2) => {
@@ -19479,7 +19613,14 @@ ${TASK_LIST_MARKDOWN}
     return Number(m[1]) <= visibleHeadingMax;
   };
   const hasVisibleMediaButtons = MEDIA_BUTTONS.some((b) => isButtonVisible(b.id));
-  const showInsertInOverflow = showInsertControls && overflowIndex !== null && overflowIndex <= FIRST_MEDIA_INDEX && hasVisibleMediaButtons;
+  const showInsertInOverflow = showInsertControls && collapsed.has("insert") && hasVisibleMediaButtons;
+  const collapsedFormatButtons = showFormattingControls ? BUTTONS.filter((b) => b.group !== "media" && isButtonVisible(b.id) && collapsed.has(b.id)) : [];
+  const collapsedChrome = ["layouts", "docSettings", "files"].filter(
+    (id) => collapsed.has(id)
+  );
+  const shownFormatGroups = showFormattingControls ? groups.filter(
+    (group) => BUTTONS.some((b) => b.group === group && isButtonVisible(b.id) && !collapsed.has(b.id))
+  ) : [];
   const isInTable = isWysiwyg ? tiptapEditor.isActive("table") : false;
   const wysiwygTemplate = isWysiwyg ? tiptapEditor.isActive("heading") ? tiptapEditor.getAttributes("heading")?.dataTemplate ?? "" : null : null;
   const isRawView = activeView === "raw";
@@ -19703,7 +19844,7 @@ ${TASK_LIST_MARKDOWN}
   const showTransitionInOverflow = showFormattingControls && currentTransition !== null && clippedContextual.has("transition");
   const showBlockSectionInOverflow = showTemplateInOverflow || showTransitionInOverflow;
   const overflowBlockLabel = currentTemplate ? templateLabel(currentTemplate) : "Heading";
-  const showToolbarOverflow = !findMode && !isPreview && !isCodeMode && (showFormattingControls && (overflowIndex !== null || clippedContextual.size > 0) || showInsertInOverflow);
+  const showToolbarOverflow = actionsLaneShown && (collapsedFormatButtons.length > 0 || showFormattingControls && clippedContextual.size > 0 || showInsertInOverflow || collapsedChrome.length > 0);
   return /* @__PURE__ */ jsxs34(
     "div",
     {
@@ -19793,49 +19934,61 @@ ${TASK_LIST_MARKDOWN}
           );
         }) }),
         findMode ? /* @__PURE__ */ jsx44(FindToolbar, { onClose: () => setFindMode(false) }) : slotAfterTabs,
-        !findMode && !isPreview && !isCodeMode && (showFormattingControls || showInsertControls) && /* @__PURE__ */ jsxs34("div", { className: "squisq-toolbar-actions", ref: actionsRef, children: [
-          showFormattingControls && groups.map((group, gi) => /* @__PURE__ */ jsxs34("div", { className: "squisq-toolbar-group", children: [
-            gi > 0 && /* @__PURE__ */ jsx44("div", { className: "squisq-toolbar-separator" }),
-            BUTTONS.filter((b) => b.group === group && isButtonVisible(b.id)).map((btn) => {
-              const active = btn.id === "emoji" ? emojiPickerAnchor !== null : formatActive && formattingEditor ? isTiptapActive(formattingEditor, btn.id) : false;
-              const disabled = FILE_STORING_BUTTONS.has(btn.id) && !mediaProvider || !buttonAllowed(btn.id);
-              const btnIndex = BUTTON_INDEX_BY_ID.get(btn.id);
-              const overflowed = overflowIndex !== null && btnIndex !== void 0 && btnIndex >= overflowIndex;
-              return /* @__PURE__ */ jsx44(
-                "button",
-                {
-                  ref: btn.id === "emoji" ? emojiButtonRef : void 0,
-                  className: `squisq-toolbar-button${active ? " squisq-toolbar-button--active" : ""}${overflowed ? " squisq-toolbar-button--overflowed" : ""}`,
-                  "data-btn-index": btnIndex,
-                  "data-tooltip": dataCardFocused ? "Formatting applies to document text \u2014 click into the prose first" : FILE_STORING_BUTTONS.has(btn.id) && !mediaProvider ? `${btn.title} (requires media provider)` : btn.title,
-                  onClick: () => handleAction(btn.id),
-                  "aria-label": btn.title,
-                  "aria-pressed": active,
-                  disabled,
-                  children: buttonIcon(btn)
-                },
-                btn.id
-              );
-            })
-          ] }, group)),
-          showInsertControls && /* @__PURE__ */ jsxs34("div", { className: "squisq-toolbar-group", children: [
-            showFormattingControls && /* @__PURE__ */ jsx44("div", { className: "squisq-toolbar-separator" }),
-            /* @__PURE__ */ jsx44(
-              "button",
-              {
-                ref: insertMenuButtonRef,
-                className: `squisq-toolbar-button${insertMenuAnchor ? " squisq-toolbar-button--active" : ""}${showInsertInOverflow ? " squisq-toolbar-button--overflowed" : ""}`,
-                "data-btn-index": FIRST_MEDIA_INDEX,
-                "data-tooltip": dataCardFocused ? "Inserts land in document text \u2014 click into the prose first" : "Insert...",
-                onClick: () => insertMenuAnchor ? closeInsertMenu() : openInsertMenu(),
-                "aria-label": "Insert",
-                "aria-expanded": insertMenuAnchor !== null,
-                "aria-haspopup": "menu",
-                disabled: dataCardFocused,
-                children: /* @__PURE__ */ jsx44(Icon, { icon: "fa-solid fa-plus" })
-              }
-            )
-          ] }),
+        actionsLaneShown && /* @__PURE__ */ jsxs34("div", { className: "squisq-toolbar-actions", ref: actionsRef, children: [
+          showFormattingControls && groups.map((group) => /* @__PURE__ */ jsxs34(
+            "div",
+            {
+              className: `squisq-toolbar-group${shownFormatGroups.includes(group) ? "" : " squisq-toolbar-group--collapsed"}`,
+              children: [
+                shownFormatGroups.indexOf(group) > 0 && /* @__PURE__ */ jsx44("div", { className: "squisq-toolbar-separator" }),
+                BUTTONS.filter((b) => b.group === group && isButtonVisible(b.id)).map((btn) => {
+                  const active = btn.id === "emoji" ? emojiPickerAnchor !== null : formatActive && formattingEditor ? isTiptapActive(formattingEditor, btn.id) : false;
+                  const disabled = FILE_STORING_BUTTONS.has(btn.id) && !mediaProvider || !buttonAllowed(btn.id);
+                  const overflowed = collapsed.has(btn.id);
+                  return /* @__PURE__ */ jsx44(
+                    "button",
+                    {
+                      ref: btn.id === "emoji" ? emojiButtonRef : void 0,
+                      className: `squisq-toolbar-button${active ? " squisq-toolbar-button--active" : ""}${overflowed ? " squisq-toolbar-button--overflowed" : ""}`,
+                      "data-toolbar-item": btn.id,
+                      "data-tooltip": dataCardFocused ? "Formatting applies to document text \u2014 click into the prose first" : FILE_STORING_BUTTONS.has(btn.id) && !mediaProvider ? `${btn.title} (requires media provider)` : btn.title,
+                      onClick: () => handleAction(btn.id),
+                      "aria-label": btn.title,
+                      "aria-pressed": active,
+                      disabled,
+                      children: buttonIcon(btn)
+                    },
+                    btn.id
+                  );
+                })
+              ]
+            },
+            group
+          )),
+          showInsertControls && /* @__PURE__ */ jsxs34(
+            "div",
+            {
+              className: `squisq-toolbar-group${collapsed.has("insert") ? " squisq-toolbar-group--collapsed" : ""}`,
+              children: [
+                shownFormatGroups.length > 0 && /* @__PURE__ */ jsx44("div", { className: "squisq-toolbar-separator" }),
+                /* @__PURE__ */ jsx44(
+                  "button",
+                  {
+                    ref: insertMenuButtonRef,
+                    className: `squisq-toolbar-button${insertMenuAnchor ? " squisq-toolbar-button--active" : ""}${collapsed.has("insert") ? " squisq-toolbar-button--overflowed" : ""}`,
+                    "data-toolbar-item": "insert",
+                    "data-tooltip": dataCardFocused ? "Inserts land in document text \u2014 click into the prose first" : "Insert...",
+                    onClick: () => insertMenuAnchor ? closeInsertMenu() : openInsertMenu(),
+                    "aria-label": "Insert",
+                    "aria-expanded": insertMenuAnchor !== null,
+                    "aria-haspopup": "menu",
+                    disabled: dataCardFocused,
+                    children: /* @__PURE__ */ jsx44(Icon, { icon: "fa-solid fa-plus" })
+                  }
+                )
+              ]
+            }
+          ),
           showFormattingControls && currentTemplate !== null && /* @__PURE__ */ jsxs34(
             "div",
             {
@@ -20094,7 +20247,7 @@ ${TASK_LIST_MARKDOWN}
             {
               className: `squisq-toolbar-overflow-menu squisq-toolbar-overflow-menu--${overflowPlacement}`,
               children: [
-                showFormattingControls && BUTTONS.slice(overflowIndex ?? BUTTONS.length).filter((b) => isButtonVisible(b.id)).filter((b) => b.group !== "media").map((btn) => {
+                collapsedFormatButtons.map((btn) => {
                   const active = btn.id === "emoji" ? emojiPickerAnchor !== null : formatActive && formattingEditor ? isTiptapActive(formattingEditor, btn.id) : false;
                   const disabled = FILE_STORING_BUTTONS.has(btn.id) && !mediaProvider || !buttonAllowed(btn.id);
                   return /* @__PURE__ */ jsxs34(
@@ -20135,6 +20288,60 @@ ${TASK_LIST_MARKDOWN}
                     ]
                   }
                 ),
+                collapsedChrome.length > 0 && (collapsedFormatButtons.length > 0 || showInsertInOverflow) && /* @__PURE__ */ jsx44(
+                  "div",
+                  {
+                    className: "squisq-toolbar-separator",
+                    style: { margin: "4px 0", width: "100%", height: 1 }
+                  }
+                ),
+                collapsedChrome.includes("layouts") && /* @__PURE__ */ jsxs34(
+                  "button",
+                  {
+                    className: "squisq-toolbar-overflow-item",
+                    onClick: () => {
+                      setShowLayoutManager(true);
+                      setShowOverflow(false);
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx44("span", { className: "squisq-toolbar-overflow-icon", children: /* @__PURE__ */ jsx44(Icon, { icon: "fa-solid fa-shapes" }) }),
+                      /* @__PURE__ */ jsx44("span", { children: "Custom layouts" })
+                    ]
+                  }
+                ),
+                collapsedChrome.includes("docSettings") && /* @__PURE__ */ jsxs34(
+                  "button",
+                  {
+                    className: "squisq-toolbar-overflow-item",
+                    onClick: () => {
+                      setShowDocSettings(true);
+                      setShowOverflow(false);
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx44("span", { className: "squisq-toolbar-overflow-icon", children: /* @__PURE__ */ jsx44(Icon, { icon: "fa-solid fa-file-lines" }) }),
+                      /* @__PURE__ */ jsx44("span", { children: "Document settings" })
+                    ]
+                  }
+                ),
+                collapsedChrome.includes("files") && onToggleFiles && /* @__PURE__ */ jsxs34(
+                  "button",
+                  {
+                    className: `squisq-toolbar-overflow-item${showFiles ? " squisq-toolbar-overflow-item--active" : ""}`,
+                    "aria-pressed": showFiles,
+                    onClick: () => {
+                      onToggleFiles();
+                      setShowOverflow(false);
+                    },
+                    children: [
+                      /* @__PURE__ */ jsx44("span", { className: "squisq-toolbar-overflow-icon", children: /* @__PURE__ */ jsx44(Icon, { icon: "fa-solid fa-paperclip" }) }),
+                      /* @__PURE__ */ jsxs34("span", { children: [
+                        showFiles ? "Hide" : "Show",
+                        " Files panel",
+                        resolvedFileCount > 0 ? ` (${fileCountLabel(resolvedFileCount)})` : ""
+                      ] })
+                    ]
+                  }
+                ),
                 showBlockSectionInOverflow && /* @__PURE__ */ jsxs34(Fragment14, { children: [
                   /* @__PURE__ */ jsx44(
                     "div",
@@ -20244,7 +20451,8 @@ ${TASK_LIST_MARKDOWN}
           "button",
           {
             type: "button",
-            className: `squisq-toolbar-button${showLayoutManager ? " squisq-toolbar-button--active" : ""}`,
+            className: `squisq-toolbar-button${showLayoutManager ? " squisq-toolbar-button--active" : ""}${collapsed.has("layouts") ? " squisq-toolbar-button--overflowed" : ""}`,
+            "data-toolbar-item": "layouts",
             onClick: () => setShowLayoutManager(true),
             "data-tooltip": "Custom layouts",
             "aria-label": "Custom layouts",
@@ -20257,7 +20465,8 @@ ${TASK_LIST_MARKDOWN}
           "button",
           {
             type: "button",
-            className: "squisq-toolbar-button",
+            className: `squisq-toolbar-button${collapsed.has("docSettings") ? " squisq-toolbar-button--overflowed" : ""}`,
+            "data-toolbar-item": "docSettings",
             onClick: () => setShowDocSettings(true),
             "data-tooltip": "Document settings",
             "aria-label": "Document settings",
@@ -20267,7 +20476,8 @@ ${TASK_LIST_MARKDOWN}
         onToggleFiles && /* @__PURE__ */ jsxs34(
           "button",
           {
-            className: `squisq-toolbar-button squisq-toolbar-files-toggle${showFiles ? " squisq-toolbar-button--active" : ""}`,
+            className: `squisq-toolbar-button squisq-toolbar-files-toggle${showFiles ? " squisq-toolbar-button--active" : ""}${collapsed.has("files") ? " squisq-toolbar-button--overflowed" : ""}`,
+            "data-toolbar-item": "files",
             onClick: onToggleFiles,
             "data-tooltip": `${showFiles ? "Hide" : "Show"} Files panel${resolvedFileCount > 0 ? ` (${fileCountLabel(resolvedFileCount)})` : ""}`,
             "aria-pressed": showFiles,
@@ -20621,6 +20831,9 @@ import { useEffect as useEffect27, useMemo as useMemo24, useState as useState34
 import { countBlocks } from "@bendyline/squisq/doc";
 import { jsx as jsx45, jsxs as jsxs35 } from "react/jsx-runtime";
 var STATS_DEBOUNCE_MS = 150;
+function countLabel(count, noun) {
+  return `${count} ${count === 1 ? noun : `${noun}s`}`;
+}
 function StatusBar({ className, slotRight }) {
   const { markdownSource, doc, parseError } = useEditorContext();
   const proofingState = useProofingState();
@@ -20638,23 +20851,10 @@ function StatusBar({ className, slotRight }) {
   }, [statsSource]);
   const blocks = useMemo24(() => doc ? countBlocks(doc.blocks) : 0, [doc]);
   return /* @__PURE__ */ jsxs35("div", { className: `squisq-status-bar ${className || ""}`, children: [
-    /* @__PURE__ */ jsxs35("span", { className: "squisq-status-item", children: [
-      stats.words,
-      " words"
-    ] }),
-    /* @__PURE__ */ jsxs35("span", { className: "squisq-status-item", children: [
-      stats.chars,
-      " chars"
-    ] }),
-    /* @__PURE__ */ jsxs35("span", { className: "squisq-status-item", children: [
-      stats.lines,
-      " lines"
-    ] }),
-    /* @__PURE__ */ jsxs35("span", { className: "squisq-status-item", children: [
-      blocks,
-      " ",
-      blocks === 1 ? "block" : "blocks"
-    ] }),
+    /* @__PURE__ */ jsx45("span", { className: "squisq-status-item squisq-status-words", children: countLabel(stats.words, "word") }),
+    /* @__PURE__ */ jsx45("span", { className: "squisq-status-item squisq-status-chars", children: countLabel(stats.chars, "char") }),
+    /* @__PURE__ */ jsx45("span", { className: "squisq-status-item squisq-status-lines", children: countLabel(stats.lines, "line") }),
+    /* @__PURE__ */ jsx45("span", { className: "squisq-status-item squisq-status-blocks", children: countLabel(blocks, "block") }),
     proofingState && proofingState.enabled && /* @__PURE__ */ jsxs35(
       "button",
       {
@@ -39536,6 +39736,8 @@ function TooltipLayer() {
   const timerRef = useRef60(null);
   const currentTargetRef = useRef60(null);
   const visibleRef = useRef60(false);
+  const pressedTargetRef = useRef60(null);
+  const lastPointerWasTouchRef = useRef60(false);
   useLayoutEffect12(() => {
     if (!state) return;
     const node2 = tooltipRef.current;
@@ -39569,10 +39771,20 @@ function TooltipLayer() {
         anchorX: rect.left + rect.width / 2
       });
     };
+    const handlePointer = (e2) => {
+      lastPointerWasTouchRef.current = e2.pointerType === "touch";
+    };
+    const handlePress = (e2) => {
+      handlePointer(e2);
+      pressedTargetRef.current = e2.target?.closest?.("[data-tooltip]") ?? null;
+      hide();
+    };
     const handleOver = (e2) => {
+      if (lastPointerWasTouchRef.current) return;
       const el = e2.target?.closest?.("[data-tooltip]");
       if (!el) return;
       if (el === currentTargetRef.current) return;
+      if (el === pressedTargetRef.current) return;
       const label = el.getAttribute("data-tooltip");
       if (!label) return;
       const wasVisible = visibleRef.current;
@@ -39589,9 +39801,11 @@ function TooltipLayer() {
       }
     };
     const handleOut = (e2) => {
+      const related = e2.relatedTarget;
+      const pressed = pressedTargetRef.current;
+      if (pressed && !(related && pressed.contains(related))) pressedTargetRef.current = null;
       const target = currentTargetRef.current;
       if (!target) return;
-      const related = e2.relatedTarget;
       if (related && target.contains(related)) return;
       const relatedTooltip = related?.closest?.("[data-tooltip]");
       if (relatedTooltip) return;
@@ -39599,12 +39813,16 @@ function TooltipLayer() {
     };
     const handleScroll = () => hide();
     const handleBlur = () => hide();
+    document.addEventListener("pointerover", handlePointer, true);
+    document.addEventListener("pointerdown", handlePress, true);
     document.addEventListener("mouseover", handleOver);
     document.addEventListener("mouseout", handleOut);
     document.addEventListener("scroll", handleScroll, true);
     window.addEventListener("blur", handleBlur);
     return () => {
       clearTimer();
+      document.removeEventListener("pointerover", handlePointer, true);
+      document.removeEventListener("pointerdown", handlePress, true);
       document.removeEventListener("mouseover", handleOver);
       document.removeEventListener("mouseout", handleOut);
       document.removeEventListener("scroll", handleScroll, true);
@@ -39754,7 +39972,7 @@ function ProofingPanel() {
           ),
           /* @__PURE__ */ jsxs67("span", { className: "squisq-proof-panel-row-body", children: [
             /* @__PURE__ */ jsx84("span", { className: "squisq-proof-panel-excerpt", children: finding.originalText }),
-            /* @__PURE__ */ jsx84("span", { className: "squisq-proof-panel-message", children: finding.message })
+            /* @__PURE__ */ jsx84("span", { className: "squisq-proof-panel-message", children: proofMessageText(finding) })
           ] })
         ]
       }