@bettercms-ai/kit 1.0.0 → 2.0.0

package/{controls → dist/controls}/rich-text/editor.js

@@ -5,21 +5,24 @@ import { shortcutHintsOn } from "../../ui/shortcut-hint.js";
 import { Menu, MenuContent, MenuItem, MenuSeparator, MenuSub, MenuSubContent, MenuSubTrigger, MenuTrigger, Popover, PopoverAnchor, PopoverContent, PopoverTrigger, Tooltip } from "../../ui/overlay.js";
 import { Textarea } from "../../ui/input.js";
 import { ExpandedEditorModal } from "../../ui/expanded-editor-modal.js";
-import { bodyCountLabel, closestBlock, countComponents, countWords, createIsland, defaultModel, editingHost, esc, hydrate, isEmptyHtml, placeCaret, rangeRect, rid, sanitize, serialize, textBeforeCaret, topBlock } from "./dom.js";
-import { ALL_FEATURES } from "./codec.js";
+import { COMPONENT_INSERT_TOAST } from "../component-services.js";
+import { eventKey } from "../../lib/key-event.js";
+import { closestBlock, createIsland, defaultModel, editingHost, esc, hydrate, isEmptyHtml, placeCaret, rangeRect, rid, sanitize, serialize, textBeforeCaret, topBlock } from "./dom.js";
 import { LinkForm } from "./link-form.js";
-import { Island } from "./blocks.js";
 import { CatalogComponentsProvider, InsertMenuContent, SlashMenuPanel, blockAllowed, catalogKey, noteRecent, useCatalog } from "./catalog.js";
+import { openComponentPanel } from "./component-panel.js";
+import { Island } from "./blocks.js";
+import { ALL_FEATURES } from "./codec.js";
 import { htmlToMarkdown, looksLikeMarkdown, markdownToHtml } from "./markdown.js";
 import { duplicateBlock, ensureLineAfter, insertBasic, insertIsland, liveInlineCode, liveMarkdown, moveBlock, restrictHtml, turnInto } from "./ops.js";
 import { EMPTY_FMT, FormatToolbar, MARK_FEATURE, stylesFor } from "./toolbar.js";
 import { SelectionBubble } from "./floating.js";
 import * as React from "react";
-import { IconArrowBarToDown, IconArrowBarToUp, IconCopy, IconGripVertical, IconPlus, IconTransform, IconTrash } from "@tabler/icons-react";
 import { Fragment, jsx, jsxs } from "react/jsx-runtime";
-import { AnimatePresence, motion } from "framer-motion";
+import { IconArrowBarToDown, IconArrowBarToUp, IconCopy, IconGripVertical, IconPlus, IconTransform, IconTrash } from "@tabler/icons-react";
+import { AnimatePresence, motion, useReducedMotion } from "framer-motion";
 import { createPortal, flushSync } from "react-dom";
-//#region src/kit/controls/rich-text/editor.tsx
+//#region src/controls/rich-text/editor.tsx
 /**
 * RICH TEXT — the boxed rich-text editor (V2 HEAD controls/rich-text-editor.tsx, Figma 60995-5431, CPO D49 / D54 / D55).
 *
@@ -38,9 +41,9 @@ import { createPortal, flushSync } from "react-dom";
 * Everything the editor offers is limited to what the field accepts (`features`): a toolbar button, a slash command, a
 * Markdown shortcut or pasted markup the field cannot hold is not offered, or is turned into what it can hold and said so.
 */
-var RT_PROSE = "text-kit-base leading-[1.6] text-kit-fg [&>*+*]:mt-3 [&_h1]:text-[28px] [&_h1]:font-semibold [&_h1]:leading-9 [&_h1]:tracking-[-0.01em] [&_h2]:text-[22px] [&_h2]:font-semibold [&_h2]:leading-8 [&_h2]:tracking-[-0.01em] [&_h3]:text-kit-lg [&_h3]:font-semibold [&_h4]:text-kit-md [&_h4]:font-semibold [&_h5]:text-kit-base [&_h5]:font-semibold [&_h6]:text-kit-sm [&_h6]:font-semibold [&_h6]:uppercase [&_h6]:tracking-wide [&_h6]:text-kit-fg-2 [&>h1]:mt-6 [&>h2]:mt-6 [&>h3]:mt-5 [&>*:first-child]:mt-0 [&_ul:not([data-rt-isolate]_*)]:list-disc [&_ul:not([data-rt-isolate]_*)]:pl-5 [&_ol:not([data-rt-isolate]_*)]:list-decimal [&_ol:not([data-rt-isolate]_*)]:pl-5 [&_li:not([data-rt-isolate]_*)]:pl-1 [&_li+li:not([data-rt-isolate]_*)]:mt-1 [&_li:not([data-rt-isolate]_*)]:marker:text-kit-fg-3 [&_blockquote]:border-l-2 [&_blockquote]:border-kit-line-strong [&_blockquote]:pl-4 [&_blockquote]:text-kit-fg-2 [&_blockquote]:italic [&_a]:text-kit-accent-fg [&_a]:underline [&_a]:decoration-kit-accent-line [&_a]:underline-offset-2 [&_abbr]:cursor-help [&_abbr]:underline [&_abbr]:decoration-dotted [&_abbr]:underline-offset-2 [&_sup]:text-[0.7em] [&_sup]:leading-none [&_code]:rounded-kit-md [&_code]:bg-kit-muted [&_code]:px-1 [&_code]:py-px [&_code]:font-kit-mono [&_code]:text-[0.9em] [&_pre]:overflow-x-auto [&_pre]:whitespace-pre-wrap [&_pre]:rounded-kit-lg [&_pre]:border [&_pre]:border-kit-line [&_pre]:bg-kit-code [&_pre]:p-3 [&_pre]:font-kit-mono [&_pre]:text-kit-sm [&_pre_code]:rounded-none [&_pre_code]:bg-transparent [&_pre_code]:p-0 [&_pre_code]:text-[1em] [&_hr]:my-6 [&_hr]:border-kit-line [&_table]:w-full [&_table]:border-collapse [&_table]:text-kit-sm [&_td]:border [&_td]:border-kit-line [&_td]:px-2.5 [&_td]:py-1.5 [&_td]:align-top [&_th]:border [&_th]:border-kit-line [&_th]:bg-kit-subtle [&_th]:px-2.5 [&_th]:py-1.5 [&_th]:text-left [&_th]:align-top [&_th]:font-medium";
+var RT_PROSE = "text-kit-base leading-[1.6] text-kit-fg [&>*+*]:mt-3 [&_span[class]:not([data-rt-isolate]_*)]:!text-inherit [&_span[class]:not([data-rt-isolate]_*)]:![-webkit-text-fill-color:currentColor] [&_span[class]:not([data-rt-isolate]_*)]:!bg-none [&_span[class]:not([data-rt-isolate]_*)]:!opacity-100 [&_span[class]:not([data-rt-isolate]_*)]:!visible [&_h1:not([data-rt-isolate]_*)]:text-[28px] [&_h1:not([data-rt-isolate]_*)]:font-semibold [&_h1:not([data-rt-isolate]_*)]:leading-9 [&_h1:not([data-rt-isolate]_*)]:tracking-[-0.01em] [&_h2:not([data-rt-isolate]_*)]:text-[22px] [&_h2:not([data-rt-isolate]_*)]:font-semibold [&_h2:not([data-rt-isolate]_*)]:leading-8 [&_h2:not([data-rt-isolate]_*)]:tracking-[-0.01em] [&_h3:not([data-rt-isolate]_*)]:text-kit-lg [&_h3:not([data-rt-isolate]_*)]:font-semibold [&_h4:not([data-rt-isolate]_*)]:text-kit-md [&_h4:not([data-rt-isolate]_*)]:font-semibold [&_h5:not([data-rt-isolate]_*)]:text-kit-base [&_h5:not([data-rt-isolate]_*)]:font-semibold [&_h6:not([data-rt-isolate]_*)]:text-kit-sm [&_h6:not([data-rt-isolate]_*)]:font-semibold [&_h6:not([data-rt-isolate]_*)]:uppercase [&_h6:not([data-rt-isolate]_*)]:tracking-wide [&_h6:not([data-rt-isolate]_*)]:text-kit-fg-2 [&>h1]:mt-6 [&>h2]:mt-6 [&>h3]:mt-5 [&>*:first-child]:mt-0 [&_ul:not([data-rt-isolate]_*)]:list-disc [&_ul:not([data-rt-isolate]_*)]:pl-5 [&_ol:not([data-rt-isolate]_*)]:list-decimal [&_ol:not([data-rt-isolate]_*)]:pl-5 [&_li:not([data-rt-isolate]_*)]:pl-1 [&_li+li:not([data-rt-isolate]_*)]:mt-1 [&_li:not([data-rt-isolate]_*)]:marker:text-kit-fg-3 [&_ul[data-task]:not([data-rt-isolate]_*)]:list-none [&_ul[data-task]:not([data-rt-isolate]_*)]:pl-0 [&_ul[data-task]>li:not([data-rt-isolate]_*)]:relative [&_ul[data-task]>li:not([data-rt-isolate]_*)]:pl-7 [&_ul[data-task]>li:not([data-rt-isolate]_*)]:before:absolute [&_ul[data-task]>li:not([data-rt-isolate]_*)]:before:left-0 [&_ul[data-task]>li:not([data-rt-isolate]_*)]:before:top-[0.2em] [&_ul[data-task]>li:not([data-rt-isolate]_*)]:before:flex [&_ul[data-task]>li:not([data-rt-isolate]_*)]:before:size-4 [&_ul[data-task]>li:not([data-rt-isolate]_*)]:before:items-center [&_ul[data-task]>li:not([data-rt-isolate]_*)]:before:justify-center [&_ul[data-task]>li:not([data-rt-isolate]_*)]:before:rounded-kit-md [&_ul[data-task]>li:not([data-rt-isolate]_*)]:before:border [&_ul[data-task]>li:not([data-rt-isolate]_*)]:before:border-kit-line-strong [&_ul[data-task]>li:not([data-rt-isolate]_*)]:before:bg-kit-surface [&_ul[data-task]>li:not([data-rt-isolate]_*)]:before:text-[11px] [&_ul[data-task]>li:not([data-rt-isolate]_*)]:before:font-semibold [&_ul[data-task]>li:not([data-rt-isolate]_*)]:before:leading-none [&_ul[data-task]>li:not([data-rt-isolate]_*)]:before:content-[''] [&_ul[data-task]>li[data-checked=true]:not([data-rt-isolate]_*)]:text-kit-fg-3 [&_ul[data-task]>li[data-checked=true]:not([data-rt-isolate]_*)]:line-through [&_ul[data-task]>li[data-checked=true]:not([data-rt-isolate]_*)]:before:border-kit-inverse [&_ul[data-task]>li[data-checked=true]:not([data-rt-isolate]_*)]:before:bg-kit-inverse [&_ul[data-task]>li[data-checked=true]:not([data-rt-isolate]_*)]:before:text-kit-fg-inverse [&_ul[data-task]>li[data-checked=true]:not([data-rt-isolate]_*)]:before:content-['✓'] [&_blockquote:not([data-rt-isolate]_*)]:border-l-2 [&_blockquote:not([data-rt-isolate]_*)]:border-kit-line-strong [&_blockquote:not([data-rt-isolate]_*)]:pl-4 [&_blockquote:not([data-rt-isolate]_*)]:text-kit-fg-2 [&_blockquote:not([data-rt-isolate]_*)]:italic [&_a:not([data-rt-isolate]_*)]:text-kit-accent-fg [&_a:not([data-rt-isolate]_*)]:underline [&_a:not([data-rt-isolate]_*)]:decoration-kit-accent-line [&_a:not([data-rt-isolate]_*)]:underline-offset-2 [&_a[data-button]:not([data-rt-isolate]_*)]:inline-flex [&_a[data-button]:not([data-rt-isolate]_*)]:h-9 [&_a[data-button]:not([data-rt-isolate]_*)]:items-center [&_a[data-button]:not([data-rt-isolate]_*)]:rounded-kit-md [&_a[data-button]:not([data-rt-isolate]_*)]:bg-kit-inverse [&_a[data-button]:not([data-rt-isolate]_*)]:px-3.5 [&_a[data-button]:not([data-rt-isolate]_*)]:text-kit-sm [&_a[data-button]:not([data-rt-isolate]_*)]:font-medium [&_a[data-button]:not([data-rt-isolate]_*)]:text-kit-fg-inverse [&_a[data-button]:not([data-rt-isolate]_*)]:no-underline [&_abbr:not([data-rt-isolate]_*)]:cursor-help [&_abbr:not([data-rt-isolate]_*)]:underline [&_abbr:not([data-rt-isolate]_*)]:decoration-dotted [&_abbr:not([data-rt-isolate]_*)]:underline-offset-2 [&_sup:not([data-rt-isolate]_*)]:text-[0.7em] [&_sup:not([data-rt-isolate]_*)]:leading-none [&_code:not([data-rt-isolate]_*)]:rounded-kit-md [&_code:not([data-rt-isolate]_*)]:bg-kit-muted [&_code:not([data-rt-isolate]_*)]:px-1 [&_code:not([data-rt-isolate]_*)]:py-px [&_code:not([data-rt-isolate]_*)]:font-kit-mono [&_code:not([data-rt-isolate]_*)]:text-[0.9em] [&_pre:not([data-rt-isolate]_*)]:overflow-x-auto [&_pre:not([data-rt-isolate]_*)]:whitespace-pre-wrap [&_pre:not([data-rt-isolate]_*)]:rounded-kit-lg [&_pre:not([data-rt-isolate]_*)]:bg-kit-code [&_pre:not([data-rt-isolate]_*)]:text-kit-code-fg [&_pre:not([data-rt-isolate]_*)]:p-3 [&_pre:not([data-rt-isolate]_*)]:font-kit-mono [&_pre:not([data-rt-isolate]_*)]:text-kit-sm [&_pre:not([data-rt-isolate]_*)]:border [&_pre:not([data-rt-isolate]_*)]:border-kit-line [&_pre_code:not([data-rt-isolate]_*)]:rounded-none [&_pre_code:not([data-rt-isolate]_*)]:bg-transparent [&_pre_code:not([data-rt-isolate]_*)]:p-0 [&_pre_code:not([data-rt-isolate]_*)]:text-[1em] [&_hr:not([data-rt-isolate]_*)]:my-6 [&_hr:not([data-rt-isolate]_*)]:border-kit-line [&_figure:not([data-rt-isolate]_*)]:my-4 [&_img:not([data-rt-isolate]_*)]:rounded-kit-lg [&_img:not([data-rt-isolate]_*)]:border [&_img:not([data-rt-isolate]_*)]:border-kit-line [&_figcaption:not([data-rt-isolate]_*)]:mt-1.5 [&_figcaption:not([data-rt-isolate]_*)]:text-center [&_figcaption:not([data-rt-isolate]_*)]:text-kit-sm [&_figcaption:not([data-rt-isolate]_*)]:text-kit-fg-3 [&_figure_img:not([data-rt-isolate]_*)]:block [&_figure[data-size=s]_img:not([data-rt-isolate]_*)]:w-1/3 [&_figure[data-size=m]_img:not([data-rt-isolate]_*)]:w-1/2 [&_figure[data-size=l]_img:not([data-rt-isolate]_*)]:w-3/4 [&_figure[data-align=center]_img:not([data-rt-isolate]_*)]:mx-auto [&_figure[data-align=right]_img:not([data-rt-isolate]_*)]:ml-auto [&_figure[data-align=full]_img:not([data-rt-isolate]_*)]:w-full [&_div[data-callout]:not([data-rt-isolate]_*)]:rounded-kit-lg [&_div[data-callout]:not([data-rt-isolate]_*)]:border [&_div[data-callout]:not([data-rt-isolate]_*)]:border-kit-info-line [&_div[data-callout]:not([data-rt-isolate]_*)]:bg-kit-info-soft [&_div[data-callout]:not([data-rt-isolate]_*)]:px-4 [&_div[data-callout]:not([data-rt-isolate]_*)]:py-3 [&_div[data-callout]:not([data-rt-isolate]_*)]:text-kit-fg [&_div[data-callout=tip]:not([data-rt-isolate]_*)]:border-kit-success-line [&_div[data-callout=tip]:not([data-rt-isolate]_*)]:bg-kit-success-soft [&_div[data-callout=warning]:not([data-rt-isolate]_*)]:border-kit-warning-line [&_div[data-callout=warning]:not([data-rt-isolate]_*)]:bg-kit-warning-soft [&_div[data-callout]>p[data-title]:not([data-rt-isolate]_*)]:font-medium [&_details:not([data-rt-isolate]_*)]:rounded-kit-md [&_summary:not([data-rt-isolate]_*)]:cursor-pointer [&_summary:not([data-rt-isolate]_*)]:font-medium [&_details>div:not([data-rt-isolate]_*)]:mt-1 [&_details>div:not([data-rt-isolate]_*)]:border-l [&_details>div:not([data-rt-isolate]_*)]:border-kit-line [&_details>div:not([data-rt-isolate]_*)]:pl-4 [&_details>div:not([data-rt-isolate]_*)]:ml-1 [&_div[data-rt=columns]:not([data-rt-isolate]_*)]:grid [&_div[data-rt=columns]:not([data-rt-isolate]_*)]:gap-4 [&_div[data-cols='2']:not([data-rt-isolate]_*)]:grid-cols-2 [&_div[data-cols='3']:not([data-rt-isolate]_*)]:grid-cols-3 [&_div[data-cols='4']:not([data-rt-isolate]_*)]:grid-cols-4 [&_div[data-gap=s]:not([data-rt-isolate]_*)]:gap-2 [&_div[data-gap=l]:not([data-rt-isolate]_*)]:gap-7 [&_div[data-rt=file]:not([data-rt-isolate]_*)]:rounded-kit-lg [&_div[data-rt=file]:not([data-rt-isolate]_*)]:border [&_div[data-rt=file]:not([data-rt-isolate]_*)]:border-kit-line [&_div[data-rt=file]:not([data-rt-isolate]_*)]:px-3 [&_div[data-rt=file]:not([data-rt-isolate]_*)]:py-2.5 [&_div[data-rt=file]:not([data-rt-isolate]_*)]:text-kit-sm [&_div[data-embed]:not([data-rt-isolate]_*)]:flex [&_div[data-embed]:not([data-rt-isolate]_*)]:aspect-video [&_div[data-embed]:not([data-rt-isolate]_*)]:items-center [&_div[data-embed]:not([data-rt-isolate]_*)]:justify-center [&_div[data-embed]:not([data-rt-isolate]_*)]:rounded-kit-lg [&_div[data-embed]:not([data-rt-isolate]_*)]:border [&_div[data-embed]:not([data-rt-isolate]_*)]:border-kit-line [&_div[data-embed]:not([data-rt-isolate]_*)]:bg-kit-subtle [&_div[data-embed]:not([data-rt-isolate]_*)]:text-kit-sm [&_div[data-embed]:not([data-rt-isolate]_*)]:text-kit-fg-3 [&_div[data-block]:not([data-rt-isolate]_*)]:flex [&_div[data-block]:not([data-rt-isolate]_*)]:items-center [&_div[data-block]:not([data-rt-isolate]_*)]:gap-2 [&_div[data-block]:not([data-rt-isolate]_*)]:rounded-kit-lg [&_div[data-block]:not([data-rt-isolate]_*)]:border [&_div[data-block]:not([data-rt-isolate]_*)]:border-dashed [&_div[data-block]:not([data-rt-isolate]_*)]:border-kit-accent-line [&_div[data-block]:not([data-rt-isolate]_*)]:bg-kit-accent-softer [&_div[data-block]:not([data-rt-isolate]_*)]:px-3 [&_div[data-block]:not([data-rt-isolate]_*)]:py-3 [&_div[data-block]:not([data-rt-isolate]_*)]:text-kit-sm [&_div[data-block]:not([data-rt-isolate]_*)]:text-kit-accent-fg [&_table:not([data-rt-isolate]_*)]:w-full [&_table:not([data-rt-isolate]_*)]:border-collapse [&_table:not([data-rt-isolate]_*)]:text-kit-sm [&_td:not([data-rt-isolate]_*)]:border [&_td:not([data-rt-isolate]_*)]:border-kit-line [&_td:not([data-rt-isolate]_*)]:px-2.5 [&_td:not([data-rt-isolate]_*)]:py-1.5 [&_td:not([data-rt-isolate]_*)]:align-top [&_th:not([data-rt-isolate]_*)]:border [&_th:not([data-rt-isolate]_*)]:border-kit-line [&_th:not([data-rt-isolate]_*)]:bg-kit-subtle [&_th:not([data-rt-isolate]_*)]:px-2.5 [&_th:not([data-rt-isolate]_*)]:py-1.5 [&_th:not([data-rt-isolate]_*)]:text-left [&_th:not([data-rt-isolate]_*)]:align-top [&_th:not([data-rt-isolate]_*)]:font-medium";
 /** Panel density (≈340px inspector): 13px text, smaller headings. */
-var RT_PANEL = "text-kit-sm leading-[1.6] [&_h1]:text-kit-xl [&_h1]:leading-7 [&_h2]:text-kit-lg [&_h2]:leading-7 [&_h3]:text-kit-md [&_h4]:text-kit-base [&_h5]:text-kit-sm [&_h6]:text-kit-xs";
+var RT_PANEL = "text-kit-sm leading-[1.6] [&_h1:not([data-rt-isolate]_*)]:text-kit-xl [&_h1:not([data-rt-isolate]_*)]:leading-7 [&_h2:not([data-rt-isolate]_*)]:text-kit-lg [&_h2:not([data-rt-isolate]_*)]:leading-7 [&_h3:not([data-rt-isolate]_*)]:text-kit-md [&_h4:not([data-rt-isolate]_*)]:text-kit-base [&_h5:not([data-rt-isolate]_*)]:text-kit-sm [&_h6:not([data-rt-isolate]_*)]:text-kit-xs";
 /** execCommand, where the engine has it (it returns false where it does not). */
 var exec = (cmd, arg) => {
 	try {
@@ -49,6 +52,41 @@ var exec = (cmd, arg) => {
 		return false;
 	}
 };
+/** A footnote marker (`<sup data-footnote>`, or the table's `<sup><a href="#…-fn-n">`): never an x² mark. */
+var FOOTNOTE_SUP = "sup[data-footnote], sup:has(> a[href*='-fn-'])";
+/** x² / x₂ (V2): on inside the same mark takes it off (unwrap, keeping the words selected); inside the other one swaps;
+*  otherwise the browser wraps the selection. Footnote markers are never touched. */
+function toggleScript(root, tag) {
+	const s = window.getSelection();
+	if (!s || !s.rangeCount) return;
+	const at = (n) => n?.nodeType === 1 ? n : n?.parentElement ?? null;
+	const find = (t) => {
+		const el = at(s.anchorNode)?.closest(t === "sup" ? `sup:not(${FOOTNOTE_SUP})` : "sub");
+		return el && root.contains(el) ? el : null;
+	};
+	const unwrap = (el) => {
+		const first = el.firstChild;
+		const last = el.lastChild;
+		el.replaceWith(...Array.from(el.childNodes));
+		if (first && last) {
+			const r = document.createRange();
+			r.setStartBefore(first);
+			r.setEndAfter(last);
+			s.removeAllRanges();
+			s.addRange(r);
+		}
+	};
+	const same = find(tag);
+	if (same) return unwrap(same);
+	const other = find(tag === "sup" ? "sub" : "sup");
+	if (other) unwrap(other);
+	exec(tag === "sup" ? "superscript" : "subscript");
+}
+/** Focus is in another text field (the comment composer, a link input) while the page's selection stays in this editor. */
+var typingElsewhere = (el) => {
+	const ae = document.activeElement;
+	return !!el && !!ae && ae !== el && !el.contains(ae) && ae.matches("input, textarea, [contenteditable='true']");
+};
 var queryState = (c) => {
 	try {
 		return typeof document.queryCommandState === "function" && document.queryCommandState(c);
@@ -74,6 +112,24 @@ function insertHtmlAtCaret(html) {
 		s.addRange(r);
 	}
 }
+var NOT_COUNTED = "[data-rt=component],[data-rt=pullquote],[data-rt=takeaways],[data-rt=embed],[data-rt=video],[data-rt=file]";
+var WORDS = (s) => s.replace(/\u200b/g, "").trim().split(/\s+/).filter(Boolean).length;
+function countWords(html) {
+	if (!html) return 0;
+	if (!/data-rt="(?:component|pullquote|takeaways|embed|video|file)"/.test(html) || typeof DOMParser === "undefined") return WORDS(html.replace(/<\/(p|li|h[1-6]|blockquote|pre|figcaption|td|th|summary|div)>|<br\s*\/?>/g, " ").replace(/<[^>]+>/g, "").replace(/&nbsp;|&[a-z]+;/g, " "));
+	const doc = new DOMParser().parseFromString(`<body>${html}</body>`, "text/html");
+	doc.body.querySelectorAll(NOT_COUNTED).forEach((n) => n.remove());
+	doc.body.querySelectorAll("p,li,h1,h2,h3,h4,h5,h6,td,th,figcaption,summary,pre,blockquote,div").forEach((n) => n.append(" "));
+	return WORDS(doc.body.textContent ?? "");
+}
+/** Linked component instances in the body. */
+var countComponents = (html) => (html.match(/data-rt="component"/g) ?? []).length;
+/** "1,840 words · 3 components" */
+var bodyCountLabel = (html) => {
+	const w = countWords(html);
+	const c = countComponents(html);
+	return `${w.toLocaleString("en-US")} ${w === 1 ? "word" : "words"}${c ? ` · ${c} ${c === 1 ? "block" : "blocks"}` : ""}`;
+};
 function insertTextAtCaret(text) {
 	if (exec("insertText", text)) return;
 	const s = window.getSelection();
@@ -135,7 +191,21 @@ function RichTextEditor({ value, onChange, readOnly, placeholder, docKey, featur
 	const setModalOpen = (o) => onExpandedOpenChange ? onExpandedOpenChange(o) : setModalOwn(o);
 	const [md, setMd] = React.useState(null);
 	const [mdConfirm, setMdConfirm] = React.useState(false);
+	const reduceMotion = useReducedMotion();
 	const [bubble, setBubble] = React.useState(null);
+	/** Comment was picked: the toolbar stays away until the next click or key inside this editor */
+	const [quiet, setQuiet] = React.useState(false);
+	React.useEffect(() => {
+		const el = ref.current;
+		if (!quiet || !el) return;
+		const wake = () => setQuiet(false);
+		el.addEventListener("mousedown", wake);
+		el.addEventListener("keydown", wake);
+		return () => {
+			el.removeEventListener("mousedown", wake);
+			el.removeEventListener("keydown", wake);
+		};
+	}, [quiet]);
 	const [slash, setSlash] = React.useState(null);
 	const [gutter, setGutter] = React.useState(null);
 	const [blockMenu, setBlockMenu] = React.useState(false);
@@ -269,7 +339,8 @@ function RichTextEditor({ value, onChange, readOnly, placeholder, docKey, featur
 				if (cs.overflowX !== "visible" || cs.overflowY !== "visible") break;
 				a = a.parentElement;
 			}
-			setGutterRoom(w.getBoundingClientRect().left - (a ? a.getBoundingClientRect().left : 0) >= 48);
+			const left = w.getBoundingClientRect().left - (a ? a.getBoundingClientRect().left : 0);
+			setGutterRoom(left >= 48);
 		};
 		const ro = new ResizeObserver(([e]) => {
 			setWidth(Math.round(e.contentRect.width));
@@ -325,13 +396,17 @@ function RichTextEditor({ value, onChange, readOnly, placeholder, docKey, featur
 			cancelAnimationFrame(raf);
 			raf = requestAnimationFrame(() => {
 				const s = window.getSelection();
-				setBubble(s && s.rangeCount && !s.isCollapsed && ref.current?.contains(s.anchorNode) ? rangeRect(s.getRangeAt(0), ref.current) : null);
+				const ok = s && s.rangeCount && !s.isCollapsed && ref.current?.contains(s.anchorNode) && !typingElsewhere(ref.current);
+				setBubble(ok ? rangeRect(s.getRangeAt(0), ref.current) : null);
 			});
 		};
 		window.addEventListener("scroll", on, true);
 		window.addEventListener("resize", on);
+		const box = new ResizeObserver(on);
+		if (wrap.current) box.observe(wrap.current);
 		return () => {
 			cancelAnimationFrame(raf);
+			box.disconnect();
 			window.removeEventListener("scroll", on, true);
 			window.removeEventListener("resize", on);
 		};
@@ -358,6 +433,10 @@ function RichTextEditor({ value, onChange, readOnly, placeholder, docKey, featur
 		const el = ref.current;
 		const s = window.getSelection();
 		if (!el || !s || !s.rangeCount || !el.contains(s.anchorNode)) return;
+		if (typingElsewhere(el)) {
+			setBubble(null);
+			return;
+		}
 		saved.current = s.getRangeAt(0).cloneRange();
 		const anchorEl = s.anchorNode?.nodeType === 1 ? s.anchorNode : s.anchorNode?.parentElement;
 		const inIsland = !!anchorEl?.closest("[data-rt-island]");
@@ -369,6 +448,8 @@ function RichTextEditor({ value, onChange, readOnly, placeholder, docKey, featur
 			italic: queryState("italic"),
 			underline: queryState("underline"),
 			strike: queryState("strikeThrough"),
+			sup: !!anchorEl?.closest(`sup:not(${FOOTNOTE_SUP})`),
+			sub: !!anchorEl?.closest("sub"),
 			ul: !inIsland && tb?.tagName === "UL",
 			ol: !inIsland && tb?.tagName === "OL",
 			block: inIsland ? "island" : tb?.tagName.toLowerCase() ?? "p",
@@ -382,8 +463,13 @@ function RichTextEditor({ value, onChange, readOnly, placeholder, docKey, featur
 	}, []);
 	React.useEffect(() => {
 		const on = () => refresh();
+		const away = () => typingElsewhere(ref.current) && setBubble(null);
 		document.addEventListener("selectionchange", on);
-		return () => document.removeEventListener("selectionchange", on);
+		document.addEventListener("focusin", away);
+		return () => {
+			document.removeEventListener("selectionchange", on);
+			document.removeEventListener("focusin", away);
+		};
 	}, [refresh]);
 	const run = (fn) => {
 		restoreSel();
@@ -465,8 +551,9 @@ function RichTextEditor({ value, onChange, readOnly, placeholder, docKey, featur
 		if (it.kind === "component" && it.component) {
 			const c = it.component;
 			noteRecent(it);
+			const made = { el: null };
 			oneStep(`Insert ${c.name}`, () => {
-				const isl = insertIsland(el, "component", {
+				const isl = made.el = insertIsland(el, "component", {
 					...defaultModel("component"),
 					ref: c.id,
 					name: c.name
@@ -475,6 +562,8 @@ function RichTextEditor({ value, onChange, readOnly, placeholder, docKey, featur
 				return isl;
 			});
 			refresh();
+			if (made.el && services.useComponentInfo) openComponentPanel(made.el);
+			services.toast?.(`${c.name} added`, { description: COMPONENT_INSERT_TOAST });
 			return;
 		}
 		if (!it.id || !blockAllowed(it.id, allows)) return;
@@ -555,7 +644,7 @@ function RichTextEditor({ value, onChange, readOnly, placeholder, docKey, featur
 			}
 		}
 		const mod = e.metaKey || e.ctrlKey;
-		const k = e.key.toLowerCase();
+		const k = eventKey(e);
 		if (mod && !e.altKey && k === "k") {
 			e.preventDefault();
 			saveSel();
@@ -621,7 +710,8 @@ function RichTextEditor({ value, onChange, readOnly, placeholder, docKey, featur
 				rest.setStart(s.anchorNode, s.anchorOffset);
 				if (!rest.toString().trim()) {
 					e.preventDefault();
-					placeCaret(ensureLineAfter(b), false);
+					const p = ensureLineAfter(b);
+					placeCaret(p, false);
 					emit();
 				}
 			}
@@ -641,7 +731,7 @@ function RichTextEditor({ value, onChange, readOnly, placeholder, docKey, featur
 		if (!ref.current?.contains(t) || t.tagName === "INPUT" || t.tagName === "TEXTAREA") return;
 		if (undoKey(e)) return;
 		if (single) return;
-		if (mod && !e.shiftKey && !e.altKey && e.key.toLowerCase() === "d") {
+		if (mod && !e.shiftKey && !e.altKey && eventKey(e) === "d") {
 			e.preventDefault();
 			const b = currentBlock();
 			if (b) duplicateBlock$1(b);
@@ -811,7 +901,8 @@ function RichTextEditor({ value, onChange, readOnly, placeholder, docKey, featur
 	};
 	const toggleMarkdown = () => {
 		if (!md) {
-			const text = htmlToMarkdown(ref.current ? serialize(ref.current) : value);
+			const html = ref.current ? serialize(ref.current) : value;
+			const text = htmlToMarkdown(html);
 			setMd({
 				text,
 				original: text
@@ -950,7 +1041,7 @@ function RichTextEditor({ value, onChange, readOnly, placeholder, docKey, featur
 		h.future = [];
 	};
 	const undoKey = (e) => {
-		if (!(e.metaKey || e.ctrlKey) || e.altKey || e.key.toLowerCase() !== "z") return false;
+		if (!(e.metaKey || e.ctrlKey) || e.altKey || eventKey(e) !== "z") return false;
 		if (e.shiftKey) {
 			if (!islandRedo()) return false;
 			e.preventDefault();
@@ -980,7 +1071,8 @@ function RichTextEditor({ value, onChange, readOnly, placeholder, docKey, featur
 		duplicateBlock: duplicateBlock$1,
 		moveBlock: moveBlock$1,
 		islandUndo,
-		islandRedo
+		islandRedo,
+		startDrag
 	});
 	api.current = {
 		emit,
@@ -992,7 +1084,8 @@ function RichTextEditor({ value, onChange, readOnly, placeholder, docKey, featur
 		duplicateBlock: duplicateBlock$1,
 		moveBlock: moveBlock$1,
 		islandUndo,
-		islandRedo
+		islandRedo,
+		startDrag
 	};
 	const islandCtx = React.useMemo(() => ({
 		readOnly,
@@ -1006,14 +1099,17 @@ function RichTextEditor({ value, onChange, readOnly, placeholder, docKey, featur
 		duplicate: (x) => api.current.duplicateBlock(x),
 		move: (x, dir) => api.current.moveBlock(x, dir),
 		undo: () => api.current.islandUndo(),
-		redo: () => api.current.islandRedo()
+		redo: () => api.current.islandRedo(),
+		drag: (x, e) => api.current.startDrag(x, e)
 	}), [readOnly, dense]);
 	const commentSel = onComment ? () => {
 		restoreSel();
 		const q = window.getSelection()?.toString().trim();
+		setBubble(null);
+		setQuiet(true);
 		if (q) onComment(q);
 	} : void 0;
-	const onMark = (cmd) => allows(MARK_FEATURE[cmd]) && run(() => exec(cmd));
+	const onMark = (cmd) => allows(MARK_FEATURE[cmd]) && run(() => cmd === "superscript" || cmd === "subscript" ? ref.current && toggleScript(ref.current, cmd === "superscript" ? "sup" : "sub") : exec(cmd));
 	const onStyle = (tag) => {
 		restoreSel();
 		turnInto$1(currentBlock(), tag);
@@ -1025,7 +1121,7 @@ function RichTextEditor({ value, onChange, readOnly, placeholder, docKey, featur
 	};
 	const gBlock = gutter?.el;
 	const gIsText = !!gBlock && !gBlock.hasAttribute("data-rt-island") && gBlock.tagName !== "HR";
-	const btn = dense ? "size-5 [&_svg]:size-3.5" : "size-[22px] [&_svg]:size-3.5";
+	const btn = dense ? "size-5 [&_svg:not([data-rt-isolate]_*)]:size-3.5" : "size-[22px] [&_svg:not([data-rt-isolate]_*)]:size-3.5";
 	const gutterMode = readOnly || dense || single ? "none" : gutterRoom ? "outside" : "inset";
 	const showGutter = gutterMode !== "none";
 	const minH = expanded ? "min-h-[60vh]" : single ? "min-h-9" : dense ? "min-h-[120px]" : "min-h-[190px]";
@@ -1041,7 +1137,7 @@ function RichTextEditor({ value, onChange, readOnly, placeholder, docKey, featur
 		children: /* @__PURE__ */ jsxs("div", {
 			ref: wrap,
 			"data-rt-editor": "",
-			className: cn("relative rounded-kit-lg border transition-colors duration-150 [--rt-toolbar-h:2rem] pointer-coarse:[--rt-toolbar-h:2.75rem]", expanded ? "bg-[var(--kit-surface-raised)]" : "bg-kit-surface", invalid ? "border-[var(--kit-field-invalid)]" : toolbarOpen ? "border-kit-line-strong" : "border-kit-line"),
+			className: cn("relative [--rt-toolbar-h:2rem] pointer-coarse:[--rt-toolbar-h:2.75rem]", "rounded-kit-lg border transition-colors duration-150", expanded ? "bg-[var(--kit-surface-raised)]" : "bg-kit-surface", invalid ? "border-[var(--kit-field-invalid)]" : toolbarOpen ? "border-kit-line-strong" : "border-kit-line"),
 			style: { "--rt-sticky-top": toolbarOpen && !dense ? `calc(${stickyTop}px + var(--rt-toolbar-h))` : "var(--kit-sticky-top, 0px)" },
 			onMouseLeave: () => !blockMenu && !gutterInsert && !drag && setGutter(null),
 			onKeyDown: onWrapKeyDown,
@@ -1143,7 +1239,7 @@ function RichTextEditor({ value, onChange, readOnly, placeholder, docKey, featur
 							children: mdConfirm ? /* @__PURE__ */ jsxs(motion.div, {
 								initial: {
 									opacity: 0,
-									y: 4
+									y: reduceMotion ? 0 : 4
 								},
 								animate: {
 									opacity: 1,
@@ -1151,7 +1247,7 @@ function RichTextEditor({ value, onChange, readOnly, placeholder, docKey, featur
 								},
 								exit: {
 									opacity: 0,
-									y: 4
+									y: reduceMotion ? 0 : 4
 								},
 								transition: { duration: .15 },
 								role: "alertdialog",
@@ -1187,7 +1283,8 @@ function RichTextEditor({ value, onChange, readOnly, placeholder, docKey, featur
 						if (drag || blockMenu || gutterInsert || !showGutter) return;
 						const t = e.target;
 						if (t.closest("[data-rt-gutter]")) return;
-						placeGutter(topBlock(ref.current, t));
+						const b = topBlock(ref.current, t);
+						placeGutter(b?.getAttribute("data-rt-island") === "component" ? null : b);
 					},
 					children: [
 						/* @__PURE__ */ jsx("div", {
@@ -1196,7 +1293,7 @@ function RichTextEditor({ value, onChange, readOnly, placeholder, docKey, featur
 							role: "textbox",
 							"aria-multiline": !single,
 							"aria-labelledby": !inModal && id ? `${id}-label` : void 0,
-							"aria-label": inModal || !id ? expandCrumbs?.[expandCrumbs.length - 1] ?? "Rich text" : void 0,
+							"aria-label": "Rich text",
 							"aria-placeholder": ph,
 							"aria-readonly": readOnly || void 0,
 							"aria-invalid": invalid || void 0,
@@ -1255,11 +1352,11 @@ function RichTextEditor({ value, onChange, readOnly, placeholder, docKey, featur
 									notify("That drop is not an image from the media library");
 								}
 							},
-							className: cn(RT_PROSE, dense && RT_PANEL, "peer relative outline-none [&_*]:outline-none", "[&>p[data-hint]]:before:pointer-events-none [&>p[data-hint]]:before:float-left [&>p[data-hint]]:before:h-0 [&>p[data-hint]]:before:text-kit-fg-4 [&>p[data-hint]]:before:content-[attr(data-hint)]", dense ? "px-2.5 py-2" : "px-4 py-3.5", minH)
+							className: cn(RT_PROSE, dense && "text-kit-sm leading-[1.6] [&_h1:not([data-rt-isolate]_*)]:text-kit-xl [&_h1:not([data-rt-isolate]_*)]:leading-7 [&_h2:not([data-rt-isolate]_*)]:text-kit-lg [&_h2:not([data-rt-isolate]_*)]:leading-7 [&_h3:not([data-rt-isolate]_*)]:text-kit-md [&_h4:not([data-rt-isolate]_*)]:text-kit-base [&_h5:not([data-rt-isolate]_*)]:text-kit-sm [&_h6:not([data-rt-isolate]_*)]:text-kit-xs", "peer relative outline-none focus-visible:shadow-none [&_*:not([data-rt-isolate]_*)]:outline-none", "[&>p[data-hint]]:before:pointer-events-none [&>p[data-hint]]:before:float-left [&>p[data-hint]]:before:h-0 [&>p[data-hint]]:before:text-kit-fg-4 [&>p[data-hint]]:before:content-[attr(data-hint)]", "[&_a[data-button]:not([data-rt-isolate]_*)]:cursor-pointer [&_ul[data-task]>li:not([data-rt-isolate]_*)]:before:cursor-pointer", "[&_sup[data-rt=fn]]:mx-px [&_sup[data-rt=fn]]:cursor-pointer [&_sup[data-rt=fn]]:rounded-kit-sm [&_sup[data-rt=fn]]:px-0.5 [&_sup[data-rt=fn]]:text-[0.72em] [&_sup[data-rt=fn]]:font-semibold [&_sup[data-rt=fn]]:text-kit-accent-fg [&_sup[data-rt=fn]:hover]:bg-kit-accent-soft", dense ? "px-2.5 py-2" : "px-4 py-3.5", minH)
 						}),
 						empty ? /* @__PURE__ */ jsx("div", {
 							"aria-hidden": true,
-							className: cn("pointer-events-none absolute text-kit-fg-4 peer-focus:hidden", dense ? "left-2.5 top-2 text-kit-sm" : "left-4 top-3.5 text-kit-base"),
+							className: cn("pointer-events-none absolute text-kit-fg-4 peer-focus:hidden", dense ? "text-kit-sm" : "text-kit-base", dense ? "left-2.5 top-2" : "left-4 top-3.5"),
 							children: ph
 						}) : null,
 						gutter && showGutter ? /* @__PURE__ */ jsxs("div", {
@@ -1320,7 +1417,7 @@ function RichTextEditor({ value, onChange, readOnly, placeholder, docKey, featur
 												setBlockMenu(true);
 											}
 										},
-										className: cn("flex cursor-grab items-center justify-center rounded-kit-md text-kit-fg-3 hover:bg-kit-hover hover:text-kit-fg active:cursor-grabbing", gutterMode === "inset" ? "h-[22px] w-4 rounded-kit-sm [&_svg]:size-3.5" : btn, (blockMenu || drag) && "bg-kit-hover text-kit-fg"),
+										className: cn("flex cursor-grab items-center justify-center rounded-kit-md text-kit-fg-3 hover:bg-kit-hover hover:text-kit-fg active:cursor-grabbing", gutterMode === "inset" ? "h-[22px] w-4 rounded-kit-sm [&_svg:not([data-rt-isolate]_*)]:size-3.5" : btn, (blockMenu || drag) && "bg-kit-hover text-kit-fg"),
 										children: /* @__PURE__ */ jsx(IconGripVertical, {
 											stroke: 1.5,
 											"aria-hidden": true
@@ -1385,7 +1482,7 @@ function RichTextEditor({ value, onChange, readOnly, placeholder, docKey, featur
 					]
 				}),
 				/* @__PURE__ */ jsxs("div", {
-					className: "flex min-h-7 items-center justify-end gap-3 rounded-b-kit-lg border-t border-kit-line-subtle px-3 text-kit-2xs text-kit-fg-3",
+					className: "flex h-7 items-center justify-end gap-3 rounded-b-kit-lg border-t border-kit-line-subtle px-3 text-kit-2xs text-kit-fg-3",
 					children: [notice ? /* @__PURE__ */ jsxs("span", {
 						role: "status",
 						"aria-live": "polite",
@@ -1404,19 +1501,19 @@ function RichTextEditor({ value, onChange, readOnly, placeholder, docKey, featur
 							}) : null
 						]
 					}) : null, /* @__PURE__ */ jsxs("span", {
-						className: "shrink-0 tabular-nums",
+						className: "tabular-nums",
 						children: [
 							words.toLocaleString("en-US"),
 							" ",
 							words === 1 ? "word" : "words",
-							comps ? ` · ${comps} ${comps === 1 ? "component" : "components"}` : "",
+							comps ? ` · ${comps} ${comps === 1 ? "block" : "blocks"}` : "",
 							" · ",
 							Math.max(1, Math.round(words / 220)),
 							" min read"
 						]
 					})]
 				}),
-				bubble && !readOnly && !slash && !link && !md && !menus.style && !menus.more && !insertOpen ? /* @__PURE__ */ jsx(SelectionBubble, {
+				bubble && !quiet && !readOnly && !slash && !link && !md && !menus.style && !menus.more && !insertOpen ? /* @__PURE__ */ jsx(SelectionBubble, {
 					rect: bubble,
 					avoid: toolbarOpen ? wrap.current?.querySelector("[role=\"toolbar\"][aria-label=\"Text formatting\"]")?.getBoundingClientRect() : null,
 					fmt,
@@ -1434,7 +1531,7 @@ function RichTextEditor({ value, onChange, readOnly, placeholder, docKey, featur
 				}) : null,
 				slash && !md ? createPortal(/* @__PURE__ */ jsxs(Fragment, { children: [/* @__PURE__ */ jsx("div", {
 					"data-floating-layer": "",
-					className: "pointer-events-auto fixed inset-0 z-[84]",
+					className: "pointer-events-auto fixed inset-0 z-[var(--kit-z-popover,84)]",
 					onMouseDown: () => setSlash(null)
 				}), /* @__PURE__ */ jsx(motion.div, {
 					initial: {
@@ -1451,7 +1548,7 @@ function RichTextEditor({ value, onChange, readOnly, placeholder, docKey, featur
 						...flipUp ? { bottom: window.innerHeight - slash.rect.top + 6 } : { top: slash.rect.bottom + 6 }
 					},
 					"data-floating-layer": "",
-					className: "pointer-events-auto fixed z-[85]",
+					className: "pointer-events-auto fixed z-[calc(var(--kit-z-popover,84)_+_1)]",
 					children: /* @__PURE__ */ jsx(SlashMenuPanel, {
 						query: slash.query,
 						folder: slash.folder,
@@ -1482,17 +1579,20 @@ function RichTextEditor({ value, onChange, readOnly, placeholder, docKey, featur
 					}) }), /* @__PURE__ */ jsx(PopoverContent, {
 						className: "w-[340px] rounded-kit-lg p-3",
 						finalFocus: false,
-						children: link ? /* @__PURE__ */ jsx(LinkForm, {
-							initial: link.initial,
-							allowNewTab,
-							onSave: saveLink,
-							onCancel: () => setLink(null),
-							onDetach: link.existing ? () => {
-								const a = link.existing;
-								a.replaceWith(...Array.from(a.childNodes));
-								setLink(null);
-								emit();
-							} : void 0
+						children: link ? /* @__PURE__ */ jsx("div", {
+							className: "flex flex-col gap-2",
+							children: /* @__PURE__ */ jsx(LinkForm, {
+								initial: link.initial,
+								allowNewTab,
+								onSave: saveLink,
+								onCancel: () => setLink(null),
+								onDetach: link.existing ? () => {
+									const a = link.existing;
+									a.replaceWith(...Array.from(a.childNodes));
+									setLink(null);
+									emit();
+								} : void 0
+							})
 						}) : null
 					})]
 				}),
@@ -1525,6 +1625,6 @@ function RichTextEditor({ value, onChange, readOnly, placeholder, docKey, featur
 	});
 }
 //#endregion
-export { RichTextEditor };
+export { RT_PANEL, RT_PROSE, RichTextEditor, bodyCountLabel, countComponents, countWords, slashPlacement };
 
 //# sourceMappingURL=editor.js.map