@ai-matrx/rich-editor 0.1.3 → 0.2.1

package/dist/in-place/InPlaceEditor.js

@@ -0,0 +1,169 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { Maximize2, Minimize2 } from "lucide-react";
+import { useIsMobile } from "@ai-matrx/design-system";
+import { Button } from "@ai-matrx/design-system/controls";
+import { cn } from "@ai-matrx/design-system";
+import { ConfirmDialog } from "@ai-matrx/rich-content/host/app-bindings";
+import RichEditor from "../editor/RichEditor.js";
+import { createInPlaceSession } from "./in-place-session.js";
+function InPlaceEditor({
+  value,
+  mode = "explicit",
+  write,
+  close,
+  caret,
+  minHeight,
+  expandable = false,
+  startExpanded = false,
+  discardDescription = "What you typed here is dropped; the saved text stays as it was.",
+  editor,
+  className,
+  id,
+  toolbarExtras,
+  actions
+}) {
+  const isMobile = useIsMobile();
+  const [openedOn] = useState(value);
+  const writeRef = useRef(write);
+  useEffect(() => {
+    writeRef.current = write;
+  });
+  const [session] = useState(() => createInPlaceSession({ openedOn: value, mode, write: (text) => writeRef.current(text) }));
+  const [draft, setDraft] = useState(openedOn);
+  const [expandedChoice, setExpandedChoice] = useState(startExpanded ? true : null);
+  const expanded = expandable && (expandedChoice ?? isMobile);
+  const [confirmDiscard, setConfirmDiscard] = useState(false);
+  const shellRef = useRef(null);
+  const controller = useRef(null);
+  const dirty = draft !== openedOn;
+  useEffect(() => {
+    let tries = 0;
+    let frame = 0;
+    const place = () => {
+      const c = controller.current;
+      if (c && (caret ? c.placeCaret(caret) : (c.focus(), true))) return;
+      if (++tries > 90) {
+        controller.current?.focus();
+        return;
+      }
+      frame = requestAnimationFrame(place);
+    };
+    frame = requestAnimationFrame(place);
+    return () => cancelAnimationFrame(frame);
+  }, [caret]);
+  const inputSinceReport = useRef(false);
+  const onDraft = (text) => {
+    inputSinceReport.current = false;
+    setDraft(text);
+    void session.draft(text);
+  };
+  const markDocumentInput = (event) => {
+    if (event.target instanceof Element && event.target.closest(".ProseMirror, .cm-content")) {
+      inputSinceReport.current = true;
+    }
+  };
+  const cancel = () => {
+    if (dirty || inputSinceReport.current) setConfirmDiscard(true);
+    else close();
+  };
+  const discard = async () => {
+    await session.cancel();
+    close();
+  };
+  const onSave = async (text) => {
+    const result = await session.save(text);
+    window.setTimeout(close, 0);
+    return result.wrote ? result.stored : void 0;
+  };
+  const [running, setRunning] = useState(null);
+  const runAction = async (action) => {
+    const text = controller.current?.flush() ?? draft;
+    setRunning(action.id);
+    try {
+      await action.run(text);
+      close();
+    } catch {
+    } finally {
+      setRunning(null);
+    }
+  };
+  const escapeOwnedByChild = useRef(false);
+  const onKeyDownCapture = (event) => {
+    if (event.key !== "Escape") return;
+    const target = event.target instanceof Element ? event.target : null;
+    escapeOwnedByChild.current = !!document.querySelector('.react-renderer > [role="listbox"]') || !!target?.closest(".ProseMirror .cm-editor") || !shellRef.current?.querySelector('[role="tablist"][aria-label="View"]') || target instanceof HTMLInputElement || target instanceof HTMLTextAreaElement;
+  };
+  const onKeyDown = (event) => {
+    if (event.key !== "Escape" || escapeOwnedByChild.current) return;
+    if (!(event.target instanceof Node) || !shellRef.current?.contains(event.target)) return;
+    event.preventDefault();
+    cancel();
+  };
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      ref: shellRef,
+      onKeyDownCapture,
+      onInputCapture: markDocumentInput,
+      onBeforeInputCapture: markDocumentInput,
+      onKeyDown,
+      "data-in-place-editor": id ?? "",
+      style: expanded || !minHeight ? void 0 : { minHeight },
+      className: cn(
+        "flex w-full flex-col overflow-hidden",
+        expanded ? "fixed inset-0 z-50 h-dvh bg-background pt-safe" : "max-h-[min(80dvh,56rem)] min-h-40 rounded-lg border border-border",
+        !expanded && className
+      ),
+      children: [
+        /* @__PURE__ */ jsx(
+          RichEditor,
+          {
+            defaultView: "visual",
+            defaultOutlineOpen: false,
+            ...editor,
+            controllerRef: controller,
+            value: openedOn,
+            onChange: onDraft,
+            onSave,
+            className: cn(expanded ? "h-full" : "h-auto min-h-0", editor?.className),
+            onCancel: cancel,
+            cancelLabel: dirty ? "Cancel" : "Close",
+            onNothingToSave: close,
+            toolbarExtras: /* @__PURE__ */ jsxs(Fragment, { children: [
+              editor?.toolbarExtras,
+              toolbarExtras,
+              actions?.map((action) => /* @__PURE__ */ jsx(
+                Button,
+                {
+                  variant: "outline",
+                  disabled: running !== null,
+                  onClick: () => void runAction(action),
+                  children: action.label
+                },
+                action.id
+              )),
+              expandable && /* @__PURE__ */ jsx(Button, { variant: "quiet", icon: expanded ? /* @__PURE__ */ jsx(Minimize2, {}) : /* @__PURE__ */ jsx(Maximize2, {}), onClick: () => setExpandedChoice(!expanded), title: expanded ? "Back into place" : "Expand to full screen", "aria-label": expanded ? "Back into place" : "Expand to full screen" })
+            ] })
+          }
+        ),
+        /* @__PURE__ */ jsx(
+          ConfirmDialog,
+          {
+            open: confirmDiscard,
+            onOpenChange: setConfirmDiscard,
+            title: "Discard your edit?",
+            description: discardDescription,
+            confirmLabel: "Discard edit",
+            cancelLabel: "Keep editing",
+            onConfirm: () => void discard()
+          }
+        )
+      ]
+    }
+  );
+}
+export {
+  InPlaceEditor
+};

package/dist/in-place/caret-handoff.js

@@ -1,4 +1,5 @@
-const pending = /* @__PURE__ */ new Map();
+const PENDING_KEY = /* @__PURE__ */ Symbol.for("ai-matrx.rich-editor.in-place-caret-handoff");
+const pending = globalThis[PENDING_KEY] ??= /* @__PURE__ */ new Map();
 function handInPlaceCaret(key, caret) {
   if (caret) pending.set(key, caret);
   else pending.delete(key);

package/dist/islands/IslandCodeEditor.d.ts

@@ -0,0 +1,12 @@
+import type { IslandEditorLanguage } from "./island-meta.js";
+export interface IslandCodeEditorProps {
+    value: string;
+    onChange: (value: string) => void;
+    language: IslandEditorLanguage;
+    /** Leave the island editor (Escape, ⌘/Ctrl+Enter). */
+    onExit?: () => void;
+    autoFocus?: boolean;
+    ariaLabel: string;
+    className?: string;
+}
+export declare function IslandCodeEditor({ value, onChange, language, onExit, autoFocus, ariaLabel, className, }: IslandCodeEditorProps): import("react").JSX.Element;

package/dist/islands/IslandCodeEditor.js

@@ -0,0 +1,82 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useEffect, useEffectEvent, useRef } from "react";
+import { EditorState } from "@codemirror/state";
+import { EditorView, keymap } from "@codemirror/view";
+import { defaultKeymap, history, historyKeymap, indentWithTab } from "@codemirror/commands";
+import { json } from "@codemirror/lang-json";
+import { cn } from "@ai-matrx/design-system";
+import { monoTheme, richEditorTheme, richHighlight } from "../source/cm-theme.js";
+import { markdownSourceLanguage } from "../source/markdown-language.js";
+function IslandCodeEditor({
+  value,
+  onChange,
+  language,
+  onExit,
+  autoFocus,
+  ariaLabel,
+  className
+}) {
+  const host = useRef(null);
+  const view = useRef(null);
+  const emitChange = useEffectEvent((next) => onChange(next));
+  const emitExit = useEffectEvent(() => {
+    onExit?.();
+    return Boolean(onExit);
+  });
+  const initialValue = useEffectEvent(() => value);
+  useEffect(() => {
+    if (!host.current) return;
+    const exit = () => emitExit();
+    const instance = new EditorView({
+      parent: host.current,
+      state: EditorState.create({
+        doc: initialValue(),
+        extensions: [
+          history(),
+          keymap.of([
+            { key: "Escape", run: exit },
+            { key: "Mod-Enter", run: exit },
+            indentWithTab,
+            ...defaultKeymap,
+            ...historyKeymap
+          ]),
+          language === "json" ? json() : markdownSourceLanguage,
+          richHighlight,
+          richEditorTheme,
+          monoTheme,
+          EditorView.lineWrapping,
+          EditorView.contentAttributes.of({ "aria-label": ariaLabel }),
+          EditorView.updateListener.of((update) => {
+            if (update.docChanged) emitChange(update.state.doc.toString());
+          })
+        ]
+      })
+    });
+    view.current = instance;
+    if (autoFocus) instance.focus();
+    return () => {
+      instance.destroy();
+      view.current = null;
+    };
+  }, [language, autoFocus, ariaLabel]);
+  useEffect(() => {
+    const instance = view.current;
+    if (!instance) return;
+    const current = instance.state.doc.toString();
+    if (current !== value) {
+      instance.dispatch({ changes: { from: 0, to: current.length, insert: value } });
+    }
+  }, [value]);
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ref: host,
+      className: cn("rounded-md border border-border bg-background/60 text-sm", className),
+      onKeyDown: (event) => event.stopPropagation()
+    }
+  );
+}
+export {
+  IslandCodeEditor
+};

package/dist/islands/IslandPreview.d.ts

@@ -0,0 +1,6 @@
+export interface IslandPreviewProps {
+    raw: string;
+    islandType: string;
+    className?: string;
+}
+export declare function IslandPreview({ raw, islandType, className }: IslandPreviewProps): import("react").JSX.Element;

package/dist/islands/IslandPreview.js

@@ -0,0 +1,31 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { RichContent } from "@ai-matrx/rich-content/levels/RichContent";
+import { PAGE_BREAK_CLASS, PAGE_BREAK_LABEL, isPageBreakLine } from "@ai-matrx/print/directives";
+import { cn } from "@ai-matrx/design-system";
+import { islandMeta } from "./island-meta.js";
+function IslandPreview({ raw, islandType, className }) {
+  if (isPageBreakLine(raw.trim())) {
+    return /* @__PURE__ */ jsxs(
+      "div",
+      {
+        className: cn(PAGE_BREAK_CLASS, "my-1 flex items-center gap-3 text-xs text-muted-foreground", className),
+        role: "separator",
+        "aria-label": PAGE_BREAK_LABEL,
+        children: [
+          /* @__PURE__ */ jsx("span", { className: "h-px flex-1 border-t border-dashed border-border" }),
+          PAGE_BREAK_LABEL,
+          /* @__PURE__ */ jsx("span", { className: "h-px flex-1 border-t border-dashed border-border" })
+        ]
+      }
+    );
+  }
+  const meta = islandMeta(islandType, raw);
+  if (!meta.renders || !raw.trim()) {
+    return /* @__PURE__ */ jsx("pre", { className: cn("whitespace-pre-wrap break-words font-mono text-xs text-muted-foreground", className), children: raw || "(empty)" });
+  }
+  return /* @__PURE__ */ jsx("div", { className: cn("rich-editor-island-render min-w-0", className), children: /* @__PURE__ */ jsx(RichContent, { level: "full", imagePolicy: "inherit", source: raw, hideCopyButton: true, allowFullScreenEditor: false }) });
+}
+export {
+  IslandPreview
+};

package/dist/islands/island-meta.d.ts

@@ -0,0 +1,28 @@
+import { type LucideIcon } from "lucide-react";
+export type IslandEditorLanguage = "markdown" | "json" | "xml" | "code" | "math";
+export interface IslandMeta {
+    label: string;
+    icon: LucideIcon;
+    language: IslandEditorLanguage;
+    /** Rendered through the shared renderer (false: shown as its source). */
+    renders: boolean;
+    /** True when the type has no name of its own ("Protected block"). */
+    generic?: boolean;
+}
+/** The kind an island's source names, in any realistic spelling of the key (L-3, round 9). */
+export declare function kindOf(raw: string): string | null;
+/** The info string of a fence that carries one Matrx Envelope (a directive). */
+export declare const MATRX_FENCE_LANGUAGE = "matrx";
+/** A ```matrx fence: a reference chip or an action card, never a code block. */
+export declare function isMatrxFence(islandType: string, raw: string): boolean;
+/** A fence island's language — THE one code-range rule's opener parse. */
+export declare function fenceLanguage(raw: string): string;
+export declare function islandMeta(islandType: string, raw: string): IslandMeta;
+/** Inline islands: short label for a chip. */
+export declare function inlineIslandLabel(islandType: string): string;
+/** Common fence languages for the picker, most used first. */
+export declare const CODE_LANGUAGES: readonly ["", "python", "typescript", "javascript", "tsx", "json", "sql", "bash", "html", "css", "markdown", "yaml", "mermaid", "go", "rust", "java", "csharp", "php", "ruby", "swift", "kotlin", "xml", "text"];
+/** Rewrite a fence's info string, keeping its fence characters and body bytes. */
+export declare function withFenceLanguage(raw: string, language: string): string;
+/** The TeX inside `$$…$$` / `\[…\]` / `$…$`. */
+export declare function texOf(raw: string): string;

package/dist/islands/island-meta.js

@@ -0,0 +1,176 @@
+import { isPageBreakLine } from "@ai-matrx/print/directives";
+import {
+  Braces,
+  Code,
+  Hash,
+  Info,
+  LayoutPanelTop,
+  Link2,
+  MousePointerClick,
+  CodeXml,
+  EyeOff,
+  FileCog,
+  FileText,
+  FolderTree,
+  Lock,
+  Pin,
+  SeparatorHorizontal,
+  Shapes,
+  Sigma,
+  Tags,
+  Workflow
+} from "lucide-react";
+import { fenceOpenerOf } from "@ai-matrx/content-ir/source";
+import { ALL_KIND_SPELLINGS, firstKindSlug } from "@ai-matrx/content-ir/surfaces";
+function kindOf(raw) {
+  return firstKindSlug(raw, ALL_KIND_SPELLINGS);
+}
+const MATRX_FENCE_LANGUAGE = "matrx";
+function isMatrxFence(islandType, raw) {
+  return islandType === "fence" && fenceLanguage(raw) === MATRX_FENCE_LANGUAGE;
+}
+function fenceLanguage(raw) {
+  return fenceOpenerOf(raw.split("\n", 1)[0] ?? "")?.lang ?? "";
+}
+function xmlTag(raw) {
+  return /^\s*<([A-Za-z][\w:-]*)/.exec(raw)?.[1] ?? "section";
+}
+function islandMeta(islandType, raw) {
+  if (isPageBreakLine(raw.trim())) {
+    return { label: "Page break", icon: SeparatorHorizontal, language: "markdown", renders: false };
+  }
+  switch (islandType) {
+    case "fence": {
+      const language = fenceLanguage(raw);
+      const kind = kindOf(raw);
+      if (language === MATRX_FENCE_LANGUAGE) {
+        const action = !/^directive_v1_(reference|secret)_/.test(kind ?? "");
+        return { label: action ? "Action" : "Reference", icon: action ? MousePointerClick : Link2, language: "json", renders: true };
+      }
+      if (kind) return { label: `Kind \xB7 ${kind}`, icon: Shapes, language: "json", renders: true };
+      if (language === "mermaid") return { label: "Diagram", icon: Workflow, language: "code", renders: true };
+      if (language === "markdown" || language === "md") {
+        return { label: "Markdown block", icon: FileText, language: "markdown", renders: true };
+      }
+      return { label: language ? `Code \xB7 ${language}` : "Code", icon: Code, language: "code", renders: true };
+    }
+    case "json": {
+      const kind = kindOf(raw);
+      return {
+        label: kind ? `Kind \xB7 ${kind}` : "Structured data",
+        icon: kind ? Shapes : Braces,
+        language: "json",
+        renders: true
+      };
+    }
+    case "xml_region":
+    case "xml_attr":
+    case "xml_container":
+      return { label: `Section \xB7 ${xmlTag(raw)}`, icon: Tags, language: "xml", renders: true };
+    case "html_block":
+      return { label: "HTML", icon: CodeXml, language: "xml", renders: true };
+    case "html_comment":
+      return { label: "Hidden comment", icon: EyeOff, language: "xml", renders: false };
+    case "anchor":
+      return { label: "Pinned anchor", icon: Pin, language: "xml", renders: false };
+    case "math_block":
+      return { label: "Equation", icon: Sigma, language: "math", renders: true };
+    case "front_matter":
+      return { label: "Front matter", icon: FileCog, language: "code", renders: false };
+    case "tree":
+      return { label: "File tree", icon: FolderTree, language: "code", renders: true };
+    case "callout": {
+      const name = /^\s*>\s*\[!([\w-]+)\]/.exec(raw)?.[1];
+      return { label: name ? `Callout \xB7 ${name.toLowerCase()}` : "Callout", icon: Info, language: "markdown", renders: true };
+    }
+    case "directive": {
+      const name = /^\s*(?::{2,}|!!!|\?{3}\+?)\s*([\w-]+)/.exec(raw)?.[1];
+      return { label: name ? `Block \xB7 ${name}` : "Block", icon: LayoutPanelTop, language: "markdown", renders: true };
+    }
+    case "footnote_def": {
+      const id = /^\s*\[\^([^\]]+)\]:/.exec(raw)?.[1];
+      return { label: id ? `Footnote ${id}` : "Footnote", icon: Hash, language: "markdown", renders: true };
+    }
+    default:
+      return { label: "Protected block", icon: Lock, language: "markdown", renders: true, generic: true };
+  }
+}
+function inlineIslandLabel(islandType) {
+  switch (islandType) {
+    case "variable":
+      return "Variable";
+    case "math_inline":
+      return "Equation";
+    case "cite":
+      return "Citation";
+    case "md_image":
+      return "Image";
+    case "anchor":
+      return "Pinned anchor";
+    case "kind_json":
+      return "Kind";
+    case "media_ref":
+      return "Media";
+    case "wikilink":
+      return "Page link";
+    case "html_tag":
+      return "HTML tag";
+    case "xml_inline":
+    case "xml_tag":
+      return "Inline tag";
+    default:
+      return "Protected text";
+  }
+}
+const CODE_LANGUAGES = [
+  "",
+  "python",
+  "typescript",
+  "javascript",
+  "tsx",
+  "json",
+  "sql",
+  "bash",
+  "html",
+  "css",
+  "markdown",
+  "yaml",
+  "mermaid",
+  "go",
+  "rust",
+  "java",
+  "csharp",
+  "php",
+  "ruby",
+  "swift",
+  "kotlin",
+  "xml",
+  "text"
+];
+function withFenceLanguage(raw, language) {
+  const newline = raw.indexOf("\n");
+  const first = newline === -1 ? raw : raw.slice(0, newline);
+  const opener = fenceOpenerOf(first);
+  if (!opener) return raw;
+  const indent = first.slice(0, first.length - first.trimStart().length);
+  return `${indent}${opener.char.repeat(opener.ticks)}${language}${newline === -1 ? "" : raw.slice(newline)}`;
+}
+function texOf(raw) {
+  const block = /^\$\$\s*\n?([\s\S]*?)\n?\s*\$\$$/.exec(raw.trim());
+  if (block) return block[1] ?? "";
+  const bracket = /^\\\[([\s\S]*?)\\\]$/.exec(raw.trim());
+  if (bracket) return (bracket[1] ?? "").trim();
+  const inline = /^\$([\s\S]*?)\$$/.exec(raw.trim()) ?? /^\\\(([\s\S]*?)\\\)$/.exec(raw.trim());
+  return inline?.[1] ?? raw;
+}
+export {
+  CODE_LANGUAGES,
+  MATRX_FENCE_LANGUAGE,
+  fenceLanguage,
+  inlineIslandLabel,
+  isMatrxFence,
+  islandMeta,
+  kindOf,
+  texOf,
+  withFenceLanguage
+};

package/dist/panels/FindReplacePanel.d.ts

@@ -0,0 +1,10 @@
+import type { FindOptions } from "../core/find-replace.js";
+import type { ViewFindState } from "../visual/VisualEditor.js";
+export interface FindReplacePanelProps {
+    showReplace: boolean;
+    onFind: (query: string, options: FindOptions, step?: 1 | -1) => ViewFindState;
+    onReplace: (query: string, replacement: string, options: FindOptions) => void;
+    onReplaceAll: (query: string, replacement: string, options: FindOptions) => number;
+    onClose: () => void;
+}
+export declare function FindReplacePanel({ showReplace, onFind, onReplace, onReplaceAll, onClose }: FindReplacePanelProps): import("react").JSX.Element;

package/dist/panels/FindReplacePanel.js

@@ -0,0 +1,118 @@
+"use client";
+import { jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { CaseSensitive, ChevronDown, ChevronUp, Regex, ShieldAlert, WholeWord, X } from "lucide-react";
+import { cn } from "@ai-matrx/design-system";
+import { Toggle } from "@ai-matrx/design-system";
+const OPTION_TOGGLE = "h-7 w-7 min-w-7 px-0 text-muted-foreground data-[state=on]:bg-primary/15 data-[state=on]:text-primary-ink";
+function FindReplacePanel({ showReplace, onFind, onReplace, onReplaceAll, onClose }) {
+  const [query, setQuery] = useState("");
+  const [replacement, setReplacement] = useState("");
+  const [options, setOptions] = useState({});
+  const [state, setState] = useState({ count: 0, current: -1, skippedProtected: 0, error: null });
+  const [replacing, setReplacing] = useState(showReplace);
+  const [notice, setNotice] = useState(null);
+  const input = useRef(null);
+  useEffect(() => setReplacing((value) => value || showReplace), [showReplace]);
+  useEffect(() => input.current?.focus(), []);
+  useEffect(() => {
+    setState(onFind(query, options));
+    setNotice(null);
+  }, [query, options, onFind]);
+  const step = (direction) => setState(onFind(query, options, direction));
+  const toggle = (key) => setOptions((current) => ({ ...current, [key]: !current[key] }));
+  const summary = state.error ? state.error : !query ? "Type to find" : state.count === 0 ? "No matches" : `${state.current + 1} of ${state.count}`;
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: "matrx-touch-targets absolute inset-x-2 top-full z-30 mt-1 flex flex-col gap-1.5 rounded-lg border border-border bg-popover/95 px-2 py-1.5 text-sm shadow-lg backdrop-blur sm:left-auto sm:w-[34rem] sm:max-w-[calc(100%-1rem)]",
+      role: "search",
+      onKeyDown: (event) => {
+        if (event.key === "Escape") onClose();
+      },
+      children: [
+        /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              ref: input,
+              value: query,
+              onChange: (event) => setQuery(event.target.value),
+              onKeyDown: (event) => {
+                if (event.key === "Enter") step(event.shiftKey ? -1 : 1);
+              },
+              placeholder: "Find",
+              "aria-label": "Find",
+              className: "h-8 w-full min-w-0 rounded-md border border-border bg-background px-2 text-base sm:w-auto sm:flex-1 sm:text-sm"
+            }
+          ),
+          /* @__PURE__ */ jsx("span", { className: cn("shrink-0 text-xs text-muted-foreground sm:w-24", state.error && "text-destructive"), "aria-live": "polite", children: summary }),
+          /* @__PURE__ */ jsx(Toggle, { size: "sm", className: OPTION_TOGGLE, pressed: Boolean(options.caseSensitive), onPressedChange: () => toggle("caseSensitive"), title: "Match case", "aria-label": "Match case", children: /* @__PURE__ */ jsx(CaseSensitive, { className: "h-4 w-4" }) }),
+          /* @__PURE__ */ jsx(Toggle, { size: "sm", className: OPTION_TOGGLE, pressed: Boolean(options.wholeWord), onPressedChange: () => toggle("wholeWord"), title: "Whole words", "aria-label": "Whole words", children: /* @__PURE__ */ jsx(WholeWord, { className: "h-4 w-4" }) }),
+          /* @__PURE__ */ jsx(Toggle, { size: "sm", className: OPTION_TOGGLE, pressed: Boolean(options.regex), onPressedChange: () => toggle("regex"), title: "Regular expression", "aria-label": "Regular expression", children: /* @__PURE__ */ jsx(Regex, { className: "h-4 w-4" }) }),
+          /* @__PURE__ */ jsx(Toggle, { size: "sm", className: OPTION_TOGGLE, pressed: Boolean(options.includeProtected), onPressedChange: () => toggle("includeProtected"), title: "Include protected content (kinds, code, variables\u2026)", "aria-label": "Include protected content (kinds, code, variables\u2026)", children: /* @__PURE__ */ jsx(ShieldAlert, { className: "h-4 w-4" }) }),
+          /* @__PURE__ */ jsx("button", { type: "button", className: "flex h-7 w-7 items-center justify-center rounded hover:bg-muted", onClick: () => step(-1), "aria-label": "Previous match", children: /* @__PURE__ */ jsx(ChevronUp, { className: "h-4 w-4" }) }),
+          /* @__PURE__ */ jsx("button", { type: "button", className: "flex h-7 w-7 items-center justify-center rounded hover:bg-muted", onClick: () => step(1), "aria-label": "Next match", children: /* @__PURE__ */ jsx(ChevronDown, { className: "h-4 w-4" }) }),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              className: "h-7 rounded px-2 text-xs text-muted-foreground hover:bg-muted",
+              onClick: () => setReplacing((value) => !value),
+              "aria-expanded": replacing,
+              children: "Replace"
+            }
+          ),
+          /* @__PURE__ */ jsx("button", { type: "button", className: "flex h-7 w-7 items-center justify-center rounded hover:bg-muted", onClick: onClose, "aria-label": "Close find", children: /* @__PURE__ */ jsx(X, { className: "h-4 w-4" }) })
+        ] }),
+        replacing && /* @__PURE__ */ jsxs("div", { className: "flex flex-wrap items-center gap-1.5", children: [
+          /* @__PURE__ */ jsx(
+            "input",
+            {
+              value: replacement,
+              onChange: (event) => setReplacement(event.target.value),
+              placeholder: options.regex ? "Replace with ($1 for groups)" : "Replace with",
+              "aria-label": "Replace with",
+              className: "h-8 min-w-0 flex-1 rounded-md border border-border bg-background px-2 text-base sm:text-sm"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              disabled: state.count === 0,
+              className: "h-8 rounded-md border border-border px-3 text-xs hover:bg-muted disabled:opacity-50",
+              onClick: () => {
+                onReplace(query, replacement, options);
+                setState(onFind(query, options));
+              },
+              children: "Replace"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            "button",
+            {
+              type: "button",
+              disabled: state.count === 0,
+              className: "h-8 rounded-md border border-border px-3 text-xs hover:bg-muted disabled:opacity-50",
+              onClick: () => {
+                const replaced = onReplaceAll(query, replacement, options);
+                setNotice(`Replaced ${replaced} ${replaced === 1 ? "match" : "matches"}.`);
+                setState(onFind(query, options));
+              },
+              children: "Replace all"
+            }
+          )
+        ] }),
+        (state.skippedProtected > 0 || notice) && /* @__PURE__ */ jsxs("p", { className: "text-xs text-muted-foreground", children: [
+          notice,
+          notice && state.skippedProtected > 0 ? " " : "",
+          state.skippedProtected > 0 && `${state.skippedProtected} more ${state.skippedProtected === 1 ? "match is" : "matches are"} inside protected content and left alone \u2014 turn on the shield to include them.`
+        ] })
+      ]
+    }
+  );
+}
+export {
+  FindReplacePanel
+};

package/dist/panels/KindPicker.d.ts

@@ -0,0 +1,4 @@
+export declare function KindPicker({ open, onResolve, }: {
+    open: boolean;
+    onResolve: (markdown: string | null) => void;
+}): import("react").JSX.Element;