@panphora/bevel 0.2.1 → 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", "src/lib/ephemeral.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.1",
+  "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.6.1",
+  "version": "0.7.0",
   "source": "Explicitly supplied local distribution; hashes identify the exact tested bytes, not a published release claim.",
   "files": {
-    "richclay.js": "3efdc37689e640e0c3fddcef41617243dca186679a8f799cde16db7aa245f2c7",
+    "richclay.js": "5434545ce62960fc27611edae1ef808f29dfe31f4e8bd8c8553c4eb118d83c0c",
     "richclay.css": "fc44ab9e71f8b66950fbda5a535774c7acb97d7e54aff2521ea4122d21422d47",
     "LICENSE": "5312a8ef6ff9a844697b8b112612467efd12957e8afba098ce600dec0f8396c4",
     "THIRD-PARTY-NOTICES.md": "3659529614b62297b8336ac7f6189ef9f67425911265bff1cde8d136df21562b",

package/vendor/richclay/richclay.js

@@ -1786,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,
@@ -1886,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);
@@ -1931,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);