@ai-matrx/rich-editor 0.1.3 → 0.2.1

package/dist/editor/caretInsert.d.ts

@@ -0,0 +1,11 @@
+/**
+ * THE context menu's insert-at-the-caret for a host that drives a RichEditor.
+ *
+ * `inline` text replaces the selection where it is. A `block` (a reference
+ * fence) goes through `insertText(…, "after")`, which places it on its own
+ * paragraph at the END of the caret's block — never inside a word (G5 review,
+ * 2026-10-02: "of" became "o" + block + "f"). One helper so the three note
+ * hosts (desktop, content editor, mobile) cannot drift.
+ */
+import type { RichEditorController } from "./RichEditorImpl.js";
+export declare function insertAtRichCaret(rich: RichEditorController | null, text: string, placement?: "inline" | "block"): boolean;

package/dist/editor/caretInsert.js

@@ -0,0 +1,9 @@
+function insertAtRichCaret(rich, text, placement = "inline") {
+  if (!rich) return false;
+  if (placement === "block") return rich.insertText(text, "after");
+  rich.replaceSelection(text);
+  return true;
+}
+export {
+  insertAtRichCaret
+};

package/dist/editor/rich-editor.css

@@ -0,0 +1,181 @@
+/* components/rich-editor/rich-editor.css — the one editor's look (visual + source).
+   Semantic tokens only; light and dark follow the app. */
+
+/* ── Visual (Tiptap) ─────────────────────────────────────────────────────── */
+.rich-editor-prose {
+  caret-color: hsl(var(--foreground));
+  word-break: break-word;
+  color: hsl(var(--foreground));
+  /* Typography tokens follow the app theme in light AND dark (no prose-invert dependency). */
+  --tw-prose-body: hsl(var(--foreground));
+  --tw-prose-headings: hsl(var(--foreground));
+  --tw-prose-lead: hsl(var(--muted-foreground));
+  --tw-prose-links: hsl(var(--primary));
+  --tw-prose-bold: hsl(var(--foreground));
+  --tw-prose-counters: hsl(var(--muted-foreground));
+  --tw-prose-bullets: hsl(var(--muted-foreground));
+  --tw-prose-hr: hsl(var(--border));
+  --tw-prose-quotes: hsl(var(--foreground));
+  --tw-prose-quote-borders: hsl(var(--border));
+  --tw-prose-captions: hsl(var(--muted-foreground));
+  --tw-prose-code: hsl(var(--foreground));
+  --tw-prose-th-borders: hsl(var(--border));
+  --tw-prose-td-borders: hsl(var(--border));
+}
+.rich-editor-prose > * + * { margin-top: 0.6em; }
+.rich-editor-prose .rich-editor-source-block > :first-child { margin-top: 0; }
+.rich-editor-prose .rich-editor-source-block + .rich-editor-source-block { margin-top: 1em; }
+.rich-editor-prose p.is-editor-empty:first-child::before,
+.rich-editor-prose .is-empty.is-editor-empty::before {
+  content: attr(data-placeholder);
+  float: left;
+  height: 0;
+  pointer-events: none;
+  color: hsl(var(--muted-foreground));
+}
+.rich-editor-prose code {
+  border-radius: 0.3rem;
+  background: hsl(var(--muted));
+  padding: 0.1em 0.35em;
+  font-size: 0.88em;
+}
+.rich-editor-prose code::before,
+.rich-editor-prose code::after { content: none; }
+.rich-editor-prose a { color: hsl(var(--primary)); text-decoration: underline; cursor: text; }
+.rich-editor-prose blockquote { border-left: 3px solid hsl(var(--border)); padding-left: 1em; font-style: normal; }
+/* Typography's quote marks on a quote's first paragraph landed in every table cell of a quoted table (“Zone”); Preview draws none. */
+.rich-editor-prose blockquote p::before,
+.rich-editor-prose blockquote p::after { content: none; }
+.rich-editor-prose .rich-editor-callout blockquote,
+.rich-editor-prose .rich-editor-callout p { margin: 0.25em 0; }
+.rich-editor-prose table { border-collapse: collapse; width: 100%; margin: 0.75em 0; }
+.rich-editor-prose th,
+.rich-editor-prose td { border: 1px solid hsl(var(--border)); padding: 0.35em 0.6em; vertical-align: top; }
+.rich-editor-prose th { background: hsl(var(--muted) / 0.6); font-weight: 600; }
+.rich-editor-prose th p,
+.rich-editor-prose td p { margin: 0; }
+.rich-editor-prose .selectedCell { background: hsl(var(--primary) / 0.12); }
+.rich-editor-prose .ProseMirror-selectednode { outline: 2px solid hsl(var(--primary) / 0.5); outline-offset: 2px; border-radius: 6px; }
+.rich-editor-prose .ProseMirror-gapcursor::after { border-top-color: hsl(var(--foreground)); }
+
+/* GFM task items: a real checkbox drawn by a decoration */
+.rich-editor-prose li.rich-editor-task-item { list-style: none; position: relative; }
+.rich-editor-prose li.rich-editor-task-item > .rich-editor-task-box {
+  position: absolute;
+  left: -1.5em;
+  top: 0.35em;
+  width: 1rem;
+  height: 1rem;
+  accent-color: hsl(var(--primary));
+  cursor: pointer;
+}
+.rich-editor-prose li.rich-editor-task-item.is-checked > p {
+  color: hsl(var(--muted-foreground));
+  text-decoration: line-through;
+  text-decoration-color: hsl(var(--muted-foreground) / 0.6);
+}
+
+/* Footnotes */
+.rich-editor-prose .rich-editor-footnote-ref {
+  font-size: 0.72em;
+  vertical-align: super;
+  color: hsl(var(--primary));
+  font-weight: 600;
+}
+.rich-editor-prose .rich-editor-footnote-def { color: hsl(var(--muted-foreground)); font-weight: 600; }
+
+/* Find & replace */
+.rich-editor-find-match { background: hsl(48 96% 60% / 0.45); border-radius: 2px; }
+.rich-editor-find-current { background: hsl(24 95% 55% / 0.65); border-radius: 2px; }
+
+/* Heading anchors land below the sticky chrome */
+.rich-editor-prose [data-heading-slug] { scroll-margin-top: 4rem; }
+
+/* Focus mode: everything but the block you are in fades */
+.rich-editor-focus .rich-editor-prose > * { transition: opacity 180ms ease; opacity: 0.28; }
+.rich-editor-focus .rich-editor-prose > .has-focus,
+.rich-editor-focus .rich-editor-prose > *:has(.has-focus) { opacity: 1; }
+.rich-editor-focus .cm-line { transition: opacity 180ms ease; opacity: 0.35; }
+.rich-editor-focus .cm-activeLine { opacity: 1; }
+
+/* ── Source (CodeMirror live preview) ────────────────────────────────────── */
+.rich-editor-source .cm-editor { min-height: 60dvh; }
+.rich-editor-source .cm-content { padding: 24px 0; }
+.rich-editor-source .cm-line { padding: 0 32px; }
+@media (max-width: 639px) {
+  .rich-editor-source .cm-line { padding: 0 16px; }
+}
+.cm-rich-mark { color: hsl(var(--muted-foreground) / 0.7); }
+.cm-rich-h1 { font-size: 1.6em; font-weight: 700; line-height: 1.3; }
+.cm-rich-h2 { font-size: 1.35em; font-weight: 700; line-height: 1.35; }
+.cm-rich-h3 { font-size: 1.15em; font-weight: 650; }
+.cm-rich-h4, .cm-rich-h5, .cm-rich-h6 { font-weight: 650; }
+.cm-rich-quote { border-left: 3px solid hsl(var(--border)); color: hsl(var(--muted-foreground)); }
+.cm-rich-island-line { background: hsl(var(--muted) / 0.45); font-family: var(--font-mono, ui-monospace, monospace); font-size: 0.85em; }
+.cm-rich-island {
+  margin: 6px 32px;
+  border: 1px solid hsl(var(--border));
+  border-radius: 8px;
+  background: hsl(var(--card) / 0.6);
+  padding: 6px 12px;
+  cursor: text;
+  overflow: auto;
+  max-height: 32rem;
+}
+.cm-rich-island:hover { border-color: hsl(var(--primary) / 0.5); }
+.cm-rich-var { border-radius: 5px; padding: 0 2px; border: 1px solid; font-weight: 500; }
+.cm-rich-var-declared { background: hsl(142 70% 45% / 0.14); color: hsl(142 60% 32%); border-color: hsl(142 60% 45% / 0.35); }
+.cm-rich-var-undeclared { background: hsl(0 80% 60% / 0.14); color: hsl(0 70% 45%); border-color: hsl(0 70% 55% / 0.35); }
+.cm-rich-var-literal { background: hsl(var(--muted)); color: hsl(var(--muted-foreground)); border-color: hsl(var(--border)); }
+.cm-rich-var-unbound { background: hsl(var(--primary) / 0.1); color: hsl(var(--primary)); border-color: hsl(var(--primary) / 0.3); }
+.dark .cm-rich-var-declared { color: hsl(142 60% 70%); }
+.dark .cm-rich-var-undeclared { color: hsl(0 80% 75%); }
+.cm-rich-find { background: hsl(48 96% 60% / 0.45); }
+.cm-rich-find-current { background: hsl(24 95% 55% / 0.65); }
+
+/* A code fence inside the editor already has ONE frame — the island's, with its
+   language picker, copy, edit and remove. The shared renderer's own snippet
+   frame and "bash" header inside it were a box in a box with the language
+   named twice (page-pass /notes, 2026-09-27): inside an island the snippet is
+   bare code. */
+.rich-editor-island[data-island-type="fence"] .rich-editor-island-render [data-code-snippet] {
+  margin: 0;
+  border: 0;
+  border-radius: 0;
+  background: transparent;
+}
+.rich-editor-island[data-island-type="fence"] .rich-editor-island-render [data-code-snippet-header] {
+  display: none;
+}
+
+.rich-editor-visual .ProseMirror .placeholder {
+  color: hsl(var(--muted-foreground));
+}
+
+/* ONE TYPOGRAPHY for a document, written or read (page-pass /notes,
+   2026-09-28): headings and lists in the editor match the shared renderer
+   (components/rich-content/prose/prose-block-elements.tsx — h1 text-xl bold,
+   h2 text-lg semibold, h3 text-base semibold, all blue-500 in the heading
+   font; lists pl-6, mb-3, relaxed, no gap between items). */
+.rich-editor-prose h1,
+.rich-editor-prose h2,
+.rich-editor-prose h3 {
+  font-family: var(--font-heading);
+  color: var(--color-blue-500);
+  line-height: 1.4;
+}
+.rich-editor-prose h1 { font-size: 1.25rem; font-weight: 700; margin: 1rem 0 0.5rem; }
+.rich-editor-prose h2 { font-size: 1.125rem; font-weight: 600; margin: 0.75rem 0 0.375rem; }
+.rich-editor-prose h3 { font-size: 1rem; font-weight: 600; margin: 0.5rem 0 0.25rem; }
+.rich-editor-prose > h1:first-child,
+.rich-editor-prose > h2:first-child { margin-top: 0; }
+.rich-editor-prose ul,
+.rich-editor-prose ol { padding-left: 1.5rem; margin: 0 0 0.75rem; line-height: 1.625; }
+.rich-editor-prose li { margin: 0; }
+.rich-editor-prose li p { margin: 0; }
+
+/* Inside that one frame the code itself sits flat — no second rounded band. */
+.rich-editor-island[data-island-type="fence"] .rich-editor-island-render [data-code-snippet] pre,
+.rich-editor-island[data-island-type="fence"] .rich-editor-island-render [data-code-snippet] code {
+  background: transparent;
+}

package/dist/format/format-actions.d.ts

@@ -0,0 +1,10 @@
+import type { ActionProvider, ClickTarget } from "@ai-matrx/alchemy/actions";
+import { type FormatTarget } from "./format-target.js";
+type VisualResolver = (target: ClickTarget) => FormatTarget | null;
+/** The visual editor registers how its zone half becomes a FormatTarget (on load). */
+export declare function registerVisualFormatResolver(resolver: VisualResolver): void;
+/** THE active editor as a FormatTarget, whatever its engine. */
+export declare function formatTargetOf(target: ClickTarget): FormatTarget | null;
+/** The formatting provider (declared on import; the toolbar root imports this module). */
+export declare const formatProvider: ActionProvider;
+export {};

package/dist/format/format-actions.js

@@ -0,0 +1,78 @@
+import {
+  Bold,
+  Code,
+  Heading1,
+  Heading2,
+  Heading3,
+  Italic,
+  Link2,
+  List,
+  ListChecks,
+  ListOrdered,
+  Quote,
+  SquareCode,
+  Strikethrough
+} from "lucide-react";
+import { registerAlchemyIcon } from "@ai-matrx/rich-content/utils/alchemy-icon-keys";
+import { declareSelectionProvider, hostHalf, placeSelectionActions, shownInSelectionMode } from "@ai-matrx/rich-content/selection-toolbar/selection-actions";
+import { MARKDOWN_FORMAT_HOST_KEY } from "./format-target.js";
+let visualResolver = null;
+function registerVisualFormatResolver(resolver) {
+  visualResolver = resolver;
+}
+function formatTargetOf(target) {
+  const visual = visualResolver?.(target) ?? null;
+  if (visual) return visual;
+  const text = hostHalf(target, MARKDOWN_FORMAT_HOST_KEY);
+  return text?.kind === "markdown-format" ? text.target : null;
+}
+const FORMATS = [
+  { id: "bold", command: "bold", label: "Bold (\u2318B)", icon: Bold },
+  { id: "italic", command: "italic", label: "Italic (\u2318I)", icon: Italic },
+  { id: "strike", command: "strike", label: "Strikethrough (\u2318\u21E7X)", icon: Strikethrough },
+  { id: "code", command: "code", label: "Inline code (\u2318E)", icon: Code },
+  { id: "link", command: "link", label: "Link (\u2318K)", icon: Link2 },
+  { id: "h1", command: "heading1", label: "Heading 1", icon: Heading1 },
+  { id: "h2", command: "heading2", label: "Heading 2", icon: Heading2 },
+  { id: "h3", command: "heading3", label: "Heading 3", icon: Heading3, more: true },
+  { id: "quote", command: "quote", label: "Quote", icon: Quote },
+  { id: "list", command: "bulletList", label: "Bulleted list (\u2318\u21E78)", icon: List },
+  { id: "numbered", command: "orderedList", label: "Numbered list (\u2318\u21E77)", icon: ListOrdered, more: true },
+  { id: "tasks", command: "taskList", label: "Checklist (\u2318\u21E79)", icon: ListChecks, more: true },
+  { id: "codeblock", command: "codeBlock", label: "Code block", icon: SquareCode, more: true }
+];
+const ACTIONS = FORMATS.map((spec, index) => {
+  const id = `selection:format-${spec.id}`;
+  return {
+    id,
+    label: spec.label,
+    icon: registerAlchemyIcon(spec.icon),
+    category: "edit",
+    order: index,
+    placement: spec.more ? "overflow" : "primary",
+    preserveSelection: true,
+    eligible: (t) => {
+      const fmt = formatTargetOf(t);
+      if (!fmt || !shownInSelectionMode(id, t) || !fmt.canFormat()) return { status: "absent" };
+      return { status: "available" };
+    },
+    pressed: (t) => formatTargetOf(t)?.isActive(spec.command) ?? false,
+    // The pressed state follows the editor (a toggle, a caret move).
+    subscribe: (onChange, t) => formatTargetOf(t)?.subscribe?.(onChange) ?? (() => void 0),
+    run: (t) => {
+      formatTargetOf(t)?.run(spec.command);
+    }
+  };
+});
+const formatProvider = {
+  id: "format-commands",
+  tier: "T0",
+  declaredIds: () => ACTIONS.map((a) => a.id),
+  actions: (target) => formatTargetOf(target) ? placeSelectionActions(ACTIONS, target) : []
+};
+declareSelectionProvider(formatProvider);
+export {
+  formatProvider,
+  formatTargetOf,
+  registerVisualFormatResolver
+};

package/dist/format/useTextareaFormatting.d.ts

@@ -0,0 +1,4 @@
+export declare function isApplePlatform(): boolean;
+/** Run the chord's command on this element; true when the chord was a formatting command. */
+export declare function handleFormatChord(el: HTMLTextAreaElement, event: KeyboardEvent): boolean;
+export declare function useTextareaFormatting(element: HTMLTextAreaElement | null, enabled?: boolean): void;

package/dist/format/useTextareaFormatting.js

@@ -0,0 +1,37 @@
+"use client";
+import { useEffect } from "react";
+import { useSelectionZone } from "@ai-matrx/rich-content/selection-toolbar/selection-zones";
+import { formatCommandForKey, keyNameOf } from "../core/markdown-format.js";
+import { markdownFormatHost, textareaFormatTarget } from "./format-target.js";
+function isApplePlatform() {
+  if (typeof navigator === "undefined") return false;
+  const platform = navigator.userAgentData?.platform ?? navigator.platform ?? "";
+  return /mac|iphone|ipad|ipod/i.test(platform);
+}
+function handleFormatChord(el, event) {
+  const command = formatCommandForKey(keyNameOf(event, isApplePlatform()));
+  if (!command || el.readOnly || el.disabled) return false;
+  event.preventDefault();
+  textareaFormatTarget(el).run(command);
+  return true;
+}
+function useTextareaFormatting(element, enabled = true) {
+  useEffect(() => {
+    if (!element || !enabled) return;
+    const onKeyDown = (event) => {
+      if (event.defaultPrevented || event.isComposing) return;
+      handleFormatChord(element, event);
+    };
+    element.addEventListener("keydown", onKeyDown);
+    return () => element.removeEventListener("keydown", onKeyDown);
+  }, [element, enabled]);
+  useSelectionZone(
+    element,
+    element && enabled ? { editable: true, host: markdownFormatHost(textareaFormatTarget(element)) } : null
+  );
+}
+export {
+  handleFormatChord,
+  isApplePlatform,
+  useTextareaFormatting
+};

package/dist/in-place/EditInPlace.d.ts

@@ -0,0 +1,38 @@
+import { type MouseEvent, type ReactNode } from "react";
+import { type CaretContext } from "../core/caret-context.js";
+import { type InPlaceEditorProps } from "./InPlaceEditor.js";
+export interface InPlaceOpening {
+    caret: CaretContext | null;
+    /** The rendered view's height when it was swapped out. */
+    height: number;
+}
+/**
+ * The double-click half, for hosts that keep their own swap (the AI answer).
+ * Spread `readProps` on the element that holds the rendered text.
+ */
+export declare function useInPlaceTrigger({ canEdit, onOpen }: {
+    canEdit: boolean;
+    onOpen: (opening: InPlaceOpening) => void;
+}): {
+    readProps: {
+        ref: import("react").RefObject<HTMLDivElement | null>;
+        onDoubleClick: (event: MouseEvent<HTMLDivElement>) => void;
+        "data-edit-in-place": "read";
+    } | {
+        ref: import("react").RefObject<HTMLDivElement | null>;
+        "data-edit-in-place": "off";
+    };
+};
+export interface EditInPlaceProps extends Omit<InPlaceEditorProps, "value" | "close" | "caret" | "minHeight"> {
+    /** The stored text. */
+    value: string;
+    /** False for content the person cannot edit: the children render as they are. */
+    canEdit: boolean;
+    /** The rendered view. */
+    children: ReactNode;
+    /** Controlled editing (the host's Edit button). Omit to let double-click own it. */
+    editing?: boolean;
+    onEditingChange?: (editing: boolean) => void;
+    readClassName?: string;
+}
+export declare function EditInPlace({ value, canEdit, children, editing: editingProp, onEditingChange, readClassName, ...editorProps }: EditInPlaceProps): import("react").JSX.Element;

package/dist/in-place/EditInPlace.js

@@ -0,0 +1,72 @@
+"use client";
+import { jsx } from "react/jsx-runtime";
+import { useLayoutEffect, useRef, useState } from "react";
+import { cn } from "@ai-matrx/design-system";
+import { caretContextAt, domPointAt } from "../core/caret-context.js";
+import { InPlaceEditor } from "./InPlaceEditor.js";
+const INTERACTIVE = "a, button, input, textarea, select, label, summary, [role='button'], [contenteditable], [data-edit-in-place-ignore]";
+function useInPlaceTrigger({ canEdit, onOpen }) {
+  const ref = useRef(null);
+  const onDoubleClick = (event) => {
+    if (!canEdit || event.defaultPrevented) return;
+    const target = event.target instanceof Element ? event.target : null;
+    if (target?.closest(INTERACTIVE)) return;
+    const root = ref.current;
+    if (!root) return;
+    const point = domPointAt(document, event.clientX, event.clientY);
+    const caret = point ? caretContextAt(root, point.node, point.offset) : null;
+    window.getSelection()?.removeAllRanges();
+    onOpen({ caret, height: root.getBoundingClientRect().height });
+  };
+  return {
+    readProps: canEdit ? { ref, onDoubleClick, "data-edit-in-place": "read" } : { ref, "data-edit-in-place": "off" }
+  };
+}
+function EditInPlace({
+  value,
+  canEdit,
+  children,
+  editing: editingProp,
+  onEditingChange,
+  readClassName,
+  ...editorProps
+}) {
+  const [editingState, setEditingState] = useState(false);
+  const editing = canEdit && (editingProp ?? editingState);
+  const [opening, setOpening] = useState(null);
+  const setEditing = (next) => {
+    if (editingProp === void 0) setEditingState(next);
+    onEditingChange?.(next);
+  };
+  const { readProps } = useInPlaceTrigger({
+    canEdit,
+    onOpen: (o) => {
+      setOpening(o);
+      setEditing(true);
+    }
+  });
+  const lastHeight = useRef(void 0);
+  useLayoutEffect(() => {
+    if (!editing && readProps.ref.current) lastHeight.current = readProps.ref.current.getBoundingClientRect().height;
+  });
+  if (editing) {
+    return /* @__PURE__ */ jsx(
+      InPlaceEditor,
+      {
+        ...editorProps,
+        value,
+        caret: opening?.caret ?? null,
+        minHeight: opening?.height ?? lastHeight.current,
+        close: () => {
+          setOpening(null);
+          setEditing(false);
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx("div", { ...readProps, className: cn(canEdit && "cursor-text", readClassName), children });
+}
+export {
+  EditInPlace,
+  useInPlaceTrigger
+};

package/dist/in-place/EditInPlaceText.d.ts

@@ -0,0 +1,18 @@
+import { type ReactNode } from "react";
+export interface EditInPlaceTextProps {
+    /** The stored text. */
+    value: string;
+    canEdit: boolean;
+    /** The host's write — called only with changed, non-empty text. */
+    write: (text: string) => Promise<unknown> | unknown;
+    /** The rendered text (a heading, a label). */
+    children: ReactNode;
+    editing?: boolean;
+    onEditingChange?: (editing: boolean) => void;
+    /** Field label for assistive tech ("Study guide title"). */
+    label: string;
+    /** Classes for the field — match the rendered text's size so nothing jumps. */
+    inputClassName?: string;
+    className?: string;
+}
+export declare function EditInPlaceText({ value, canEdit, write, children, editing: editingProp, onEditingChange, label, inputClassName, className, }: EditInPlaceTextProps): import("react").JSX.Element;

package/dist/in-place/EditInPlaceText.js

@@ -0,0 +1,159 @@
+"use client";
+import { Fragment, jsx, jsxs } from "react/jsx-runtime";
+import { useEffect, useRef, useState } from "react";
+import { cn } from "@ai-matrx/design-system";
+import { ConfirmDialog } from "@ai-matrx/rich-content/host/app-bindings";
+import { createInPlaceSession } from "./in-place-session.js";
+function EditInPlaceText({
+  value,
+  canEdit,
+  write,
+  children,
+  editing: editingProp,
+  onEditingChange,
+  label,
+  inputClassName,
+  className
+}) {
+  const [editingState, setEditingState] = useState(false);
+  const editing = canEdit && (editingProp ?? editingState);
+  const setEditing = (next) => {
+    if (editingProp === void 0) setEditingState(next);
+    onEditingChange?.(next);
+  };
+  const [caretAt, setCaretAt] = useState(null);
+  const onDoubleClick = (event) => {
+    if (!canEdit) return;
+    const sel = window.getSelection();
+    const at = sel && sel.anchorNode && event.currentTarget.contains(sel.anchorNode) ? textOffset(event.currentTarget, sel.anchorNode, sel.anchorOffset) : null;
+    sel?.removeAllRanges();
+    setCaretAt(at);
+    setEditing(true);
+  };
+  if (editing) {
+    return /* @__PURE__ */ jsx(
+      InlineField,
+      {
+        value,
+        write,
+        label,
+        caretAt,
+        className: cn(inputClassName, className),
+        close: () => {
+          setCaretAt(null);
+          setEditing(false);
+        }
+      }
+    );
+  }
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      "data-edit-in-place": canEdit ? "read" : "off",
+      onDoubleClick: canEdit ? onDoubleClick : void 0,
+      className: cn(canEdit && "cursor-text", className),
+      children
+    }
+  );
+}
+function textOffset(root, node, offset) {
+  const range = document.createRange();
+  range.selectNodeContents(root);
+  range.setEnd(node, offset);
+  return range.toString().length;
+}
+function InlineField({
+  value,
+  write,
+  label,
+  caretAt,
+  className,
+  close
+}) {
+  const [draft, setDraft] = useState(value);
+  const [session] = useState(() => createInPlaceSession({ openedOn: value, mode: "explicit", write: async (t) => void await write(t) }));
+  const [saving, setSaving] = useState(false);
+  const [confirmDiscard, setConfirmDiscard] = useState(false);
+  const input = useRef(null);
+  const done = useRef(false);
+  const confirming = useRef(false);
+  useEffect(() => {
+    const el = input.current;
+    if (!el) return;
+    el.focus();
+    const at = caretAt ?? el.value.length;
+    el.setSelectionRange(at, at);
+  }, [caretAt]);
+  const save = async () => {
+    if (done.current || saving) return;
+    const text = draft.trim() === "" ? value : draft;
+    setSaving(true);
+    try {
+      await session.save(text);
+      done.current = true;
+      close();
+    } finally {
+      setSaving(false);
+    }
+  };
+  const cancel = () => {
+    if (draft !== value) {
+      confirming.current = true;
+      setConfirmDiscard(true);
+    } else {
+      done.current = true;
+      close();
+    }
+  };
+  const onKeyDown = (event) => {
+    if (event.key === "Enter") {
+      event.preventDefault();
+      void save();
+    } else if (event.key === "Escape") {
+      event.preventDefault();
+      event.stopPropagation();
+      cancel();
+    }
+  };
+  return /* @__PURE__ */ jsxs(Fragment, { children: [
+    /* @__PURE__ */ jsx(
+      "input",
+      {
+        ref: input,
+        "aria-label": label,
+        value: draft,
+        disabled: saving,
+        onChange: (event) => setDraft(event.target.value),
+        onKeyDown,
+        onBlur: () => {
+          if (!confirming.current) void save();
+        },
+        className: cn("w-full rounded-sm bg-transparent outline-none ring-1 ring-ring", className)
+      }
+    ),
+    /* @__PURE__ */ jsx(
+      ConfirmDialog,
+      {
+        open: confirmDiscard,
+        onOpenChange: (open) => {
+          setConfirmDiscard(open);
+          if (!open && !done.current) {
+            confirming.current = false;
+            input.current?.focus();
+          }
+        },
+        title: "Discard your edit?",
+        description: "The text stays exactly as it was saved.",
+        confirmLabel: "Discard edit",
+        cancelLabel: "Keep editing",
+        onConfirm: () => {
+          done.current = true;
+          close();
+        }
+      }
+    )
+  ] });
+}
+export {
+  EditInPlaceText
+};

package/dist/in-place/InPlaceEditor.d.ts

@@ -0,0 +1,41 @@
+import { type ReactNode } from "react";
+import { type RichEditorProps } from "../editor/RichEditor.js";
+import type { CaretContext } from "../core/caret-context.js";
+import { type InPlaceSaveMode } from "./in-place-session.js";
+export type InPlaceEditorPassThrough = Omit<RichEditorProps, "value" | "onSave" | "onChange" | "onCancel" | "onNothingToSave" | "cancelLabel" | "controllerRef">;
+export interface InPlaceEditorProps {
+    /** The stored text the editor opens on. */
+    value: string;
+    mode?: InPlaceSaveMode;
+    /** The host's write — called only with changed text (see in-place-session). */
+    write: (text: string) => Promise<string | void> | string | void;
+    /** Back to the rendered view. */
+    close: () => void;
+    /** Where the person double-clicked (the caret goes there). */
+    caret?: CaretContext | null;
+    /** The rendered view's height: the editor never opens shorter (no jump). */
+    minHeight?: number;
+    /** Offer Expand (the same editor instance full screen). Phones open expanded. */
+    expandable?: boolean;
+    startExpanded?: boolean;
+    /** Words for the discard dialog ("The note stays exactly as it was saved…"). */
+    discardDescription?: string;
+    /** RichEditor props the host sets (surfaceName, contentSource, toolbarExtras…). */
+    editor?: InPlaceEditorPassThrough;
+    className?: string;
+    /** Data attribute value for tests and page shortcuts. */
+    id?: string;
+    /** Extra toolbar content (before Expand). */
+    toolbarExtras?: ReactNode;
+    /**
+     * More outcomes beside Save, each run with the current text and then the
+     * editor closes (a chat message: Save & resubmit, Fork & resubmit).
+     */
+    actions?: readonly InPlaceAction[];
+}
+export interface InPlaceAction {
+    id: string;
+    label: string;
+    run: (text: string) => Promise<void>;
+}
+export declare function InPlaceEditor({ value, mode, write, close, caret, minHeight, expandable, startExpanded, discardDescription, editor, className, id, toolbarExtras, actions, }: InPlaceEditorProps): import("react").JSX.Element;