@panphora/bevel 0.2.0 → 0.3.0

package/dist/react/components/code-editor.d.ts

@@ -6,12 +6,15 @@ import { type ChangeDetails } from '../internal/controllable-state.js';
 import { Button } from './button.js';
 export declare const wrapCompartment: Compartment;
 export declare const darkCompartment: Compartment;
+export declare const readOnlyCompartment: Compartment;
 /** iOS zooms the page when a focused editable is under 16px, contenteditable included. */
 export declare function coarsePointer(): boolean;
 /** Wrapping is remembered per device. A blocked or absent store falls back to the pointer. */
 export declare function storedWrap(coarse: boolean): boolean;
 export declare function rememberWrap(on: boolean): boolean;
 export declare const wrapExtension: (on: boolean) => Extension;
+/** Read-only still takes focus, so the keyboard can move, select and search; only edits are refused. */
+export declare const readOnlyExtension: (on: boolean) => Extension;
 export declare const bevelHighlight: HighlightStyle;
 /** One theme serves both modes: the tokens are light-dark() and the dark flag is a facet. */
 export declare function bevelEditorTheme(coarse: boolean): Extension;
@@ -22,8 +25,10 @@ export interface CodeEditorExtensionOptions {
     onSave: () => void;
     onDocChange: () => void;
     onFindChange: (open: boolean) => void;
+    readOnly: boolean;
+    onFind: () => void;
 }
-export declare function codeEditorExtensions({ coarse, wrapped, dark, onSave, onDocChange, onFindChange }: CodeEditorExtensionOptions): Extension[];
+export declare function codeEditorExtensions({ coarse, wrapped, dark, onSave, onDocChange, onFindChange, readOnly, onFind }: CodeEditorExtensionOptions): Extension[];
 export type CodeEditorAction = 'undo' | 'redo' | 'find' | 'outdent' | 'indent' | 'wrap' | 'fold' | 'suggest';
 interface CodeEditorState {
     view: EditorView | null;
@@ -36,6 +41,8 @@ interface CodeEditorState {
     /** The host clears the flag through this once its own write has landed. `save()` never clears it. */
     setDirty: (next: boolean | ((previous: boolean) => boolean), details: ChangeDetails) => void;
     findOpen: boolean;
+    findRequest: number;
+    readOnly: boolean;
     extensions: Extension[];
     root: RefObject<HTMLDivElement | null>;
     save: () => void;
@@ -52,11 +59,13 @@ export interface CodeEditorProps extends Omit<ComponentProps<'div'>, 'onChange'>
     wrap?: boolean;
     defaultWrap?: boolean;
     onWrapChange?: (wrap: boolean, details: ChangeDetails) => void;
+    /** Keeps the editor focusable and selectable, and refuses edits. */
+    readOnly?: boolean;
     /** The mounted view, and null when it is torn down. The tab drives live sync through it. */
     onViewChange?: (view: EditorView | null) => void;
     extensions?: Extension[];
 }
-declare function Root({ doc, onSave, dirty, defaultDirty, onDirtyChange, wrap, defaultWrap, onWrapChange, onViewChange, extensions, ref, children, ...props }: CodeEditorProps): import("react").JSX.Element;
+declare function Root({ doc, onSave, dirty, defaultDirty, onDirtyChange, wrap, defaultWrap, onWrapChange, readOnly, onViewChange, extensions, ref, onKeyDown, children, ...props }: CodeEditorProps): import("react").JSX.Element;
 declare function Dirty({ children, hidden, ...props }: ComponentProps<'i'>): import("react").JSX.Element;
 export interface CodeEditorToolProps extends ComponentProps<'button'> {
     action?: CodeEditorAction;

package/dist/react/components/code-editor.js

@@ -64,6 +64,7 @@ const WRAP_STORAGE_KEY = "bevel.code-editor.wrap";
 const FONT = "var(--bevel-font-mono)";
 const wrapCompartment = new Compartment();
 const darkCompartment = new Compartment();
+const readOnlyCompartment = new Compartment();
 function coarsePointer() {
   if (typeof window === "undefined") return false;
   return window.matchMedia("(pointer: coarse)").matches || navigator.maxTouchPoints > 0;
@@ -122,6 +123,7 @@ const hangingIndent = ViewPlugin.fromClass(class {
   }
 }, { decorations: (plugin) => plugin.decorations });
 const wrapExtension = (on) => on ? [EditorView.lineWrapping, hangingIndent] : [];
+const readOnlyExtension = (on) => on ? [EditorState.readOnly.of(true), EditorView.contentAttributes.of({ inputmode: "none" })] : [];
 const bevelHighlight = HighlightStyle.define([
   { tag: [t.comment, t.lineComment, t.blockComment, t.docComment], color: "var(--bevel-syn-comment)", fontStyle: "italic" },
   { tag: [t.tagName, t.standard(t.tagName)], color: "var(--bevel-syn-tag)", fontWeight: "500" },
@@ -382,7 +384,7 @@ function findPanel(coarse) {
     };
   };
 }
-function codeEditorExtensions({ coarse, wrapped, dark, onSave, onDocChange, onFindChange }) {
+function codeEditorExtensions({ coarse, wrapped, dark, onSave, onDocChange, onFindChange, readOnly, onFind }) {
   return [
     lineNumbers(),
     highlightActiveLineGutter(),
@@ -415,6 +417,7 @@ function codeEditorExtensions({ coarse, wrapped, dark, onSave, onDocChange, onFi
     ...coarse ? [] : [rectangularSelection(), crosshairCursor()],
     wrapCompartment.of(wrapExtension(wrapped)),
     darkCompartment.of(EditorView.darkTheme.of(dark)),
+    readOnlyCompartment.of(readOnlyExtension(readOnly)),
     bevelEditorTheme(coarse),
     EditorView.contentAttributes.of({
       autocorrect: "off",
@@ -424,6 +427,7 @@ function codeEditorExtensions({ coarse, wrapped, dark, onSave, onDocChange, onFi
       "aria-label": "Source"
     }),
     Prec.highest(keymap.of([
+      { key: "Mod-f", preventDefault: true, run: () => (onFind(), true) },
       { key: "Mod-s", preventDefault: true, run: () => (onSave(), true) },
       { key: "Mod-Shift-s", preventDefault: true, run: () => (onSave(), true) },
       { key: "Mod-]", preventDefault: true, run: indentMore },
@@ -502,7 +506,7 @@ const StatusPart = nativePart("div", "bevel-r-code-editor__status");
 const MetaPart = nativePart("span", "bevel-r-code-editor__meta");
 const BarPart = nativePart("div", "bevel-r-code-editor__bar");
 const BarToolsPart = nativePart("div", "bevel-r-code-editor__bar-tools");
-function Root({ doc, onSave, dirty, defaultDirty = false, onDirtyChange, wrap, defaultWrap, onWrapChange, onViewChange, extensions, ref, children, ...props }) {
+function Root({ doc, onSave, dirty, defaultDirty = false, onDirtyChange, wrap, defaultWrap, onWrapChange, readOnly = false, onViewChange, extensions, ref, onKeyDown, children, ...props }) {
   const [view, setView] = useState(null);
   const viewRef = useRef(null);
   const root = useRef(null);
@@ -512,6 +516,7 @@ function Root({ doc, onSave, dirty, defaultDirty = false, onDirtyChange, wrap, d
   const [isDirty, setDirty] = useControllableState({ value: dirty, defaultValue: defaultDirty, onChange: onDirtyChange });
   const [wrapped, setWrap] = useControllableState({ value: wrap, defaultValue: initialWrap, onChange: onWrapChange });
   const [findOpen, setFindOpen] = useState(false);
+  const [findRequest, setFindRequest] = useState(0);
   const { mode } = useBevel();
   const dark = useResolvedDark(mode);
   const latest = useRef({ onSave, onViewChange, wrapped });
@@ -527,6 +532,12 @@ function Root({ doc, onSave, dirty, defaultDirty = false, onDirtyChange, wrap, d
     setView(next);
     latest.current.onViewChange?.(next);
   }, []);
+  const requestFind = useCallback(() => {
+    const current = viewRef.current;
+    if (!current) return;
+    openSearchPanel(current);
+    setFindRequest((count) => count + 1);
+  }, []);
   const run = useCallback((action) => {
     const current = viewRef.current;
     if (!current) return;
@@ -540,20 +551,22 @@ function Root({ doc, onSave, dirty, defaultDirty = false, onDirtyChange, wrap, d
       if (searchPanelOpen(current.state)) {
         closeSearchPanel(current);
         current.focus();
-      } else openSearchPanel(current);
+      } else requestFind();
       return;
     } else if (action === "wrap") {
       setWrap(!latest.current.wrapped, { reason: "toolbar" });
     }
     current.focus();
-  }, [setWrap]);
+  }, [setWrap, requestFind]);
   const mounted = useMemo(() => codeEditorExtensions({
     coarse,
     wrapped: initialWrap,
     dark,
+    readOnly,
     onSave: save,
     onDocChange: () => setDirty(true, { reason: "edit" }),
-    onFindChange: setFindOpen
+    onFindChange: setFindOpen,
+    onFind: requestFind
   }), []);
   useEffect(() => {
     view?.dispatch({ effects: wrapCompartment.reconfigure(wrapExtension(wrapped)) });
@@ -561,6 +574,9 @@ function Root({ doc, onSave, dirty, defaultDirty = false, onDirtyChange, wrap, d
   useEffect(() => {
     view?.dispatch({ effects: darkCompartment.reconfigure(EditorView.darkTheme.of(dark)) });
   }, [view, dark]);
+  useEffect(() => {
+    view?.dispatch({ effects: readOnlyCompartment.reconfigure(readOnlyExtension(readOnly)) });
+  }, [view, readOnly]);
   const settled = useRef(false);
   useEffect(() => {
     if (!settled.current) {
@@ -579,12 +595,20 @@ function Root({ doc, onSave, dirty, defaultDirty = false, onDirtyChange, wrap, d
     dirty: isDirty,
     setDirty,
     findOpen,
+    findRequest,
+    readOnly,
     extensions: extensions ? [...mounted, ...extensions] : mounted,
     root,
     save,
     run
-  }), [view, register, doc, coarse, dark, wrapped, isDirty, setDirty, findOpen, extensions, mounted, save, run]);
-  return /* @__PURE__ */ jsx(CodeEditorContext, { value: context, children: /* @__PURE__ */ jsx(RootPart, { ...props, ref: merged, children }) });
+  }), [view, register, doc, coarse, dark, wrapped, isDirty, setDirty, findOpen, findRequest, readOnly, extensions, mounted, save, run]);
+  return /* @__PURE__ */ jsx(CodeEditorContext, { value: context, children: /* @__PURE__ */ jsx(RootPart, { ...props, ref: merged, onKeyDown: (event) => {
+    onKeyDown?.(event);
+    if (event.defaultPrevented || event.altKey || event.shiftKey || !(event.metaKey || event.ctrlKey)) return;
+    if (event.key.toLowerCase() !== "f") return;
+    event.preventDefault();
+    requestFind();
+  }, children }) });
 }
 function Dirty({ children, hidden, ...props }) {
   const { dirty } = useCodeEditor();
@@ -687,6 +711,8 @@ export {
   coarsePointer,
   codeEditorExtensions,
   darkCompartment,
+  readOnlyCompartment,
+  readOnlyExtension,
   rememberWrap,
   storedWrap,
   useCodeEditor,

package/examples/setup-peers.mjs

@@ -7,7 +7,7 @@ const distributions = {
   richclay: ["richclay.js", "richclay.css", "LICENSE", "THIRD-PARTY-NOTICES.md", "vendor/squire.js", "vendor/squire.provenance.json", "vendor/SQUIRE-LICENSE", "vendor/purify.min.js", "vendor/DOMPURIFY-LICENSE", "vendor/DOMPURIFY-LICENSE-MPL"],
   quickcrop: ["quickcrop.js", "quickcrop.css", "LICENSE"],
   hypercms: ["dist/hypercms.min.js", "LICENSE"],
-  "clay-mutation": ["src/lib/mutation.js", "src/lib/extension-noise.js", "src/lib/region-policy.js", "src/lib/region-capabilities.js", "src/lib/root-attrs.js", "src/lib/user-gesture.js", "LICENSE"]
+  "clay-mutation": ["src/lib/mutation.js", "src/lib/extension-noise.js", "src/lib/region-policy.js", "src/lib/region-capabilities.js", "src/lib/root-attrs.js", "src/lib/user-gesture.js", "src/lib/ephemeral.js", "src/lib/derived.js", "src/vendor/sap-ownership.vendor.js", "src/core/boot-phase.js", "LICENSE"]
 };
 const packageNames = { hypercms: "@panphora/hyper-cms", "clay-mutation": "@panphora/clayjs" };
 const [name, source] = process.argv.slice(2);

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@panphora/bevel",
-  "version": "0.2.0",
+  "version": "0.3.0",
   "description": "Beveled controls in an editorial page. One stylesheet, one script, no build.",
   "license": "MIT-0",
   "author": "David Miranda",

package/react/README.md

@@ -225,7 +225,7 @@ Each row links to a real example compiled against the installed package. Each co
 | persistent-action-banner | `@panphora/bevel/react/persistent-action-banner` | ActionBanner (Root, Dismiss, Body, Icon, Actions, Observation, Meta, Head, Count, Progress, Status) | [Example](../tests/react/consumer/catalog-cases.tsx#L105) |
 | save-status-indicator | `@panphora/bevel/react/save-status-indicator` | SaveStatus; SavedNotification | [Example](../tests/react/consumer/catalog-cases.tsx#L106) |
 | code-block | `@panphora/bevel/react/code-block` | CodeBlock (Root, Code, Copy, Wrap, Feedback, Header, Name, Language, Meta) | [Example](../tests/react/consumer/catalog-cases.tsx#L108) |
-| code-editor | `@panphora/bevel/react/code-editor` | CodeEditor (Root, Tab, Name, Host, Dirty, Spacer, Toolbar, Tool, Save, Surface, Status, Meta, KeyboardBar, BarTools). CodeMirror 6 and its grammars are optional peers, so this entry is not re-exported from `@panphora/bevel/react` and a consumer that never opens it pays nothing. Give the root a definite height. | [Example](../tests/react/consumer/catalog-cases.tsx#L107) |
+| code-editor | `@panphora/bevel/react/code-editor` | CodeEditor (Root, Tab, Name, Host, Dirty, Spacer, Toolbar, Tool, Save, Surface, Status, Meta, KeyboardBar, BarTools). CodeMirror 6 and its grammars are optional peers, so this entry is not re-exported from `@panphora/bevel/react` and a consumer that never opens it pays nothing. Give the root a definite height. `readOnly` keeps the editor focusable and selectable; `findRequest` in `useCodeEditor()` increases on every find request, for hosts that draw their own find field. | [Example](../tests/react/consumer/catalog-cases.tsx#L107) |
 | diff-view | `@panphora/bevel/react/diff-view` | DiffView (Root, Body, Line, Count, Layout, Hunk, Header, Controls, Footer) | [Example](../tests/react/consumer/catalog-cases.tsx#L109) |
 | activity-feed | `@panphora/bevel/react/activity-feed` | ActivityFeed (Root, Groups, More, Day, List, Item, Head, Detail, Avatar) | [Example](../tests/react/consumer/catalog-cases.tsx#L110) |
 | stat-tiles | `@panphora/bevel/react/stat-tiles` | StatTile (Root, Label, Value, Delta, Spark, Description); StatTiles | [Example](../tests/react/consumer/catalog-cases.tsx#L111) |

package/vendor/richclay/provenance.json

@@ -1,9 +1,9 @@
 {
   "name": "richclay",
-  "version": "0.5.0",
+  "version": "0.7.0",
   "source": "Explicitly supplied local distribution; hashes identify the exact tested bytes, not a published release claim.",
   "files": {
-    "richclay.js": "c332abebbe33b8ef7d50130d3f0d433ccf28f73761c6f6225c7c78120212725e",
+    "richclay.js": "5434545ce62960fc27611edae1ef808f29dfe31f4e8bd8c8553c4eb118d83c0c",
     "richclay.css": "fc44ab9e71f8b66950fbda5a535774c7acb97d7e54aff2521ea4122d21422d47",
     "LICENSE": "5312a8ef6ff9a844697b8b112612467efd12957e8afba098ce600dec0f8396c4",
     "THIRD-PARTY-NOTICES.md": "3659529614b62297b8336ac7f6189ef9f67425911265bff1cde8d136df21562b",

package/vendor/richclay/richclay.js

@@ -1568,7 +1568,8 @@ var RichClayBundle = (() => {
     "no-undo",
     "no-data",
     "freeze",
-    "editor-ui"
+    "editor-ui",
+    "live"
   ]);
   function hasPolicyToken(element, token) {
     if (!element || element.nodeType !== 1) return false;
@@ -1609,9 +1610,6 @@ var RichClayBundle = (() => {
     if ("value" in source && "value" in copy && source.tagName !== "OPTION" && type !== "checkbox" && type !== "radio" && type !== "file") copy.value = source.value;
     if (source.tagName === "INPUT" && (type === "checkbox" || type === "radio")) copy.checked = source.checked;
     if (source.tagName === "OPTION") copy.selected = source.selected;
-    if (source.tagName === "SELECT") {
-      for (let i = 0; i < source.options.length; i++) copy.options[i].selected = source.options[i].selected;
-    }
     if ("indeterminate" in source && "indeterminate" in copy) copy.indeterminate = source.indeterminate;
   }
   function matchesWithin(node, selector, boundary, inherit) {
@@ -1624,40 +1622,60 @@ var RichClayBundle = (() => {
     }
     return false;
   }
-  function importTree(source, targetDocument, capability, capabilityMatch, exclude, boundary, inherit, maps) {
-    if (source.nodeType === 1 && ((inherit ? hasCapability(source, capability) : matchesWithin(source, capabilityMatch, boundary, false)) || exclude && (inherit && source !== boundary ? source.matches(exclude) : matchesWithin(source, exclude, boundary, inherit)))) return null;
-    const copy = targetDocument.importNode(source, false);
+  function excluded(source, capability, capabilityMatch, exclude, boundary, inherit) {
+    return (inherit ? hasCapability(source, capability) : matchesWithin(source, capabilityMatch, boundary, false)) || !!(exclude && (inherit && source !== boundary ? source.matches(exclude) : matchesWithin(source, exclude, boundary, inherit)));
+  }
+  function hasOwnCapability(element, capability) {
+    const definition = CAPABILITIES[capability];
+    return definition.tokens.some((token) => expandsTo(element, token)) || definition.bundles.some((bundle) => hasPolicyToken(element, bundle));
+  }
+  var CONTROL_TAGS = /* @__PURE__ */ new Set(["INPUT", "TEXTAREA", "SELECT", "OPTION"]);
+  function pairTree(source, copy, maps, drop) {
+    if (source.nodeType === 1 && drop(source)) {
+      maps.dropped.push(copy);
+      return;
+    }
     maps.cloneToLive.set(copy, source);
     maps.liveToClone.set(source, copy);
-    const sourceChildren = source.nodeType === 1 && source.tagName === "TEMPLATE" ? source.content : source;
-    const copyChildren = copy.nodeType === 1 && copy.tagName === "TEMPLATE" ? copy.content : copy;
-    if (sourceChildren !== source) {
-      maps.cloneToLive.set(copyChildren, sourceChildren);
-      maps.liveToClone.set(sourceChildren, copyChildren);
-    }
-    for (const child of sourceChildren.childNodes || []) {
-      const childCopy = importTree(child, targetDocument, capability, capabilityMatch, exclude, boundary, inherit, maps);
-      if (childCopy) {
-        copyChildren.appendChild(childCopy);
-        if (child.nodeType === 1) copyControlState(child, childCopy);
-      }
-    }
-    if (source.nodeType === 1) copyControlState(source, copy);
-    return copy;
-  }
-  function createContentView(context, { capability = "data", exclude = null, inherit = true } = {}) {
+    let sourceChildren = source;
+    let copyChildren = copy;
+    if (source.nodeType === 1) {
+      if (CONTROL_TAGS.has(source.tagName)) maps.controls.push(source, copy);
+      if (source.tagName === "TEMPLATE") {
+        while (copy.firstChild) copy.removeChild(copy.firstChild);
+        sourceChildren = source.content;
+        copyChildren = copy.content;
+        maps.cloneToLive.set(copyChildren, sourceChildren);
+        maps.liveToClone.set(sourceChildren, copyChildren);
+      }
+    } else if (source.nodeType !== 11) return;
+    let c = copyChildren.firstChild;
+    for (let s = sourceChildren.firstChild; s && c; s = s.nextSibling) {
+      pairTree(s, c, maps, drop);
+      c = c.nextSibling;
+    }
+  }
+  function createContentView(context, { capability = "data", exclude = null, inherit = true, provenance = null } = {}) {
     if (!context) throw new TypeError("createContentView requires a DOM context");
     const sourceDocument = context.nodeType === 9 ? context : context.ownerDocument;
     if (!sourceDocument?.implementation?.createHTMLDocument) {
       throw new TypeError("createContentView requires an HTML DOM implementation");
     }
     const inertDocument = sourceDocument.implementation.createHTMLDocument("");
-    const cloneToLive = /* @__PURE__ */ new WeakMap();
+    const cloneToLive = provenance || /* @__PURE__ */ new WeakMap();
     const liveToClone = /* @__PURE__ */ new WeakMap();
     const sourceRoot = context.nodeType === 9 ? context.documentElement : context;
     if (exclude) inertDocument.documentElement.matches(exclude);
     const capabilityMatch = capabilitySelector(capability);
-    const root = importTree(sourceRoot, inertDocument, capability, capabilityMatch, exclude, sourceRoot, inherit, { cloneToLive, liveToClone });
+    const drop = inherit ? (el) => hasOwnCapability(el, capability) || !!(exclude && el.matches(exclude)) : (el) => excluded(el, capability, capabilityMatch, exclude, sourceRoot, false);
+    let root = null;
+    if (sourceRoot.nodeType !== 1 || !excluded(sourceRoot, capability, capabilityMatch, exclude, sourceRoot, inherit)) {
+      root = inertDocument.importNode(sourceRoot, true);
+      const maps = { cloneToLive, liveToClone, dropped: [], controls: [] };
+      pairTree(sourceRoot, root, maps, drop);
+      for (const node of maps.dropped) node.remove();
+      for (let i = 0; i < maps.controls.length; i += 2) copyControlState(maps.controls[i], maps.controls[i + 1]);
+    }
     if (context.nodeType === 9 && root) {
       inertDocument.replaceChild(root, inertDocument.documentElement);
       liveToClone.set(context, inertDocument);
@@ -1768,13 +1786,16 @@ var RichClayBundle = (() => {
     return clone.innerHTML;
   }
   var instances = /* @__PURE__ */ new WeakMap();
-  var autoInitWindows = /* @__PURE__ */ new WeakSet();
-  var watchedWindows = /* @__PURE__ */ new WeakSet();
+  var autoInitWindows = /* @__PURE__ */ new WeakMap();
+  var watchedWindows = /* @__PURE__ */ new WeakMap();
   var globalRegistry = createDefaultRegistry();
   var KEEP_FOCUS = Symbol("richclay-keep-focus");
   var ROOT_TRANSFER_EVENTS = ["cut", "paste", "drop"];
   var MODIFIER_ORDER = ["Alt", "Ctrl", "Meta", "Shift"];
   var dialogSeq = 0;
+  function isManagedByClayJS(win) {
+    return typeof win.clay?.mode === "string";
+  }
   var defaultOptions = {
     toolbar: "standard",
     toolbarContainer: null,
@@ -1868,23 +1889,36 @@ var RichClayBundle = (() => {
       return elements.map((element) => new _RichClay(element, options));
     }
     static autoInit(win = typeof window !== "undefined" ? window : void 0) {
-      if (!win || !win.document || autoInitWindows.has(win)) return;
-      autoInitWindows.add(win);
+      if (!win || !win.document) return () => {
+      };
+      const existing = autoInitWindows.get(win);
+      if (existing) return existing;
+      let cancelled = false;
+      let stopWatching = null;
       const run = () => {
+        if (cancelled || isManagedByClayJS(win)) return;
         if (shouldUseHyperclay({}, win) && isHyperclayEditMode(win)) {
           _RichClay.init();
-          _RichClay.watch(win);
+          stopWatching = _RichClay.watch(win);
         }
       };
+      const stop = () => {
+        cancelled = true;
+        stopWatching?.();
+      };
+      autoInitWindows.set(win, stop);
       if (win.document.readyState === "loading") {
         win.document.addEventListener("DOMContentLoaded", run, { once: true });
       } else {
         run();
       }
+      return stop;
     }
     static watch(win = typeof window !== "undefined" ? window : void 0, options = {}) {
-      if (!win || !win.document || watchedWindows.has(win)) return;
-      watchedWindows.add(win);
+      if (!win || !win.document) return () => {
+      };
+      const existing = watchedWindows.get(win);
+      if (existing) return existing;
       const mount = (element) => {
         if (!isMountable(element)) return;
         if (!instances.has(element) && !conflictsWithExistingEditor(element)) new _RichClay(element, options);
@@ -1913,12 +1947,21 @@ var RichClayBundle = (() => {
           });
         });
       });
+      let stopped = false;
+      const stop = () => {
+        if (stopped) return;
+        stopped = true;
+        observer.disconnect();
+        if (watchedWindows.get(win) === stop) watchedWindows.delete(win);
+      };
       observer.observe(win.document.documentElement || win.document, {
         childList: true,
         subtree: true,
         attributes: true,
         attributeFilter: ["editable", "clay-editable", "data-richclay", "richclay"]
       });
+      watchedWindows.set(win, stop);
+      return stop;
     }
     static registerButton(def) {
       validateButton(def);
@@ -2001,18 +2044,18 @@ var RichClayBundle = (() => {
           editor._mutation?.takeRecords();
         },
         onMutations: (records, editor) => {
-          const excluded = (node, capability) => {
+          const excluded2 = (node, capability) => {
             const boundary = closestWithCapability(node, capability);
             return !!boundary && boundary !== this.element && this.element.contains(boundary);
           };
           let authored = false;
           let local = false;
           for (const record of records) {
-            if (excluded(record.target, "history")) continue;
+            if (excluded2(record.target, "history")) continue;
             const nodes = record.type === "childList" ? [...record.addedNodes, ...record.removedNodes] : [record.target];
             for (const node of nodes) {
-              if (excluded(node, "history")) continue;
-              if (excluded(record.target, "undo") || excluded(node, "undo")) local = true;
+              if (excluded2(node, "history")) continue;
+              if (excluded2(record.target, "undo") || excluded2(node, "undo")) local = true;
               else authored = true;
             }
           }