@mieweb/ui 0.11.0-dev.35 → 0.11.0-dev.37

package/dist/kerebron.cjs

@@ -1,73 +1,43 @@
 'use strict';
 
-var chunkQO4A6U73_cjs = require('./chunk-QO4A6U73.cjs');
+var chunkRCTIPBLU_cjs = require('./chunk-RCTIPBLU.cjs');
+var chunkNCG7NJAW_cjs = require('./chunk-NCG7NJAW.cjs');
+require('./chunk-S2CJ57BX.cjs');
+require('./chunk-FSLI5IKP.cjs');
+require('./chunk-YP5T6NZD.cjs');
+require('./chunk-ZNUMOJOI.cjs');
+require('./chunk-PINIBEIU.cjs');
+require('./chunk-I44YNYI6.cjs');
+require('./chunk-Z5S5JEJD.cjs');
 require('./chunk-NMBYU7D7.cjs');
+require('./chunk-PHYQSCP6.cjs');
+require('./chunk-FHY3K6PL.cjs');
+require('./chunk-FSGEDDF2.cjs');
+require('./chunk-AOHJILLU.cjs');
+require('./chunk-C7RVKV25.cjs');
+require('./chunk-L7L5S2HO.cjs');
+require('./chunk-YW2AKBLS.cjs');
+require('./chunk-Z3WMDVMR.cjs');
+require('./chunk-EACNRR3C.cjs');
+require('./chunk-FSARTLUE.cjs');
+require('./chunk-HGJHWI7W.cjs');
+require('./chunk-IEY3ZJIT.cjs');
+require('./chunk-S5RVSXDV.cjs');
 require('./chunk-EUAMEVVI.cjs');
-var react = require('react');
-var editor = require('@kerebron/editor');
-var CodeEditorKit = require('@kerebron/editor-kits/CodeEditorKit');
-var web = require('@kerebron/wasm/web');
-var jsxRuntime = require('react/jsx-runtime');
 
-var CodeEditor = ({
-  value = "",
-  onChange,
-  lang = "typescript"
-}) => {
-  const editorRef = react.useRef(null);
-  const editorInstance = react.useRef(null);
-  const onChangeRef = react.useRef(onChange);
-  onChangeRef.current = onChange;
-  react.useEffect(() => {
-    const root = editorRef.current;
-    if (!root) return;
-    const applySelectLabel = () => {
-      root.querySelectorAll("select.codejar-select").forEach((element) => {
-        if (!element.getAttribute("aria-label")) {
-          element.setAttribute("aria-label", "Code editor language");
-        }
-      });
-    };
-    applySelectLabel();
-    const observer = new MutationObserver(() => applySelectLabel());
-    observer.observe(root, { childList: true, subtree: true });
-    return () => observer.disconnect();
-  }, []);
-  react.useEffect(() => {
-    if (!editorRef.current) return;
-    const editor$1 = editor.CoreEditor.create({
-      element: editorRef.current,
-      uri: "file:///untitled.ts",
-      assetLoad: web.createAssetLoad("/kerebron-wasm"),
-      editorKits: [new CodeEditorKit.CodeEditorKit(lang)]
-    });
-    editorInstance.current = editor$1;
-    const onTransaction = async () => {
-      if (!editorInstance.current) return;
-      try {
-        const buffer = await editorInstance.current.saveDocument("text/plain");
-        onChangeRef.current?.(new globalThis.TextDecoder().decode(buffer));
-      } catch (err) {
-        console.error("Failed to read code:", err);
-      }
-    };
-    editor$1.addEventListener("transaction", onTransaction);
-    if (value) {
-      editor$1.loadDocumentText("text/plain", value).catch((err) => console.error("Failed to load code:", err));
-    }
-    return () => {
-      editor$1.removeEventListener("transaction", onTransaction);
-      editor$1.destroy();
-    };
-  }, []);
-  return /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("div", { children: /* @__PURE__ */ jsxRuntime.jsx("div", { ref: editorRef, className: "kb-component" }) }) });
-};
-CodeEditor.displayName = "CodeEditor";
 
+
+Object.defineProperty(exports, "CodeEditor", {
+  enumerable: true,
+  get: function () { return chunkRCTIPBLU_cjs.CodeEditor; }
+});
+Object.defineProperty(exports, "TextAreaRich", {
+  enumerable: true,
+  get: function () { return chunkRCTIPBLU_cjs.TextAreaRichKerebron; }
+});
 Object.defineProperty(exports, "RichEditor", {
   enumerable: true,
-  get: function () { return chunkQO4A6U73_cjs.RichEditor; }
+  get: function () { return chunkNCG7NJAW_cjs.RichEditor; }
 });
-exports.CodeEditor = CodeEditor;
 //# sourceMappingURL=kerebron.cjs.map
 //# sourceMappingURL=kerebron.cjs.map

package/dist/kerebron.cjs.map

@@ -1 +1 @@
-{"version":3,"sources":["../src/components/RichEditor/CodeEditor.tsx"],"names":["useRef","useEffect","editor","CoreEditor","createAssetLoad","CodeEditorKit","jsx"],"mappings":"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","file":"kerebron.cjs","sourcesContent":["import React, { useEffect, useRef } from 'react';\n\nimport { CoreEditor } from '@kerebron/editor';\nimport { CodeEditorKit } from '@kerebron/editor-kits/CodeEditorKit';\nimport { createAssetLoad } from '@kerebron/wasm/web';\n\nexport interface CodeEditorProps {\n  /** Initial source code to load into the editor. */\n  value?: string;\n  /** Called with the editor's contents whenever they change. */\n  onChange?: (value: string) => void;\n  /** Language/grammar to use for syntax highlighting. Defaults to `typescript`. */\n  lang?: string;\n}\n\nconst CodeEditor: React.FC<CodeEditorProps> = ({\n  value = '',\n  onChange,\n  lang = 'typescript',\n}) => {\n  const editorRef = useRef<HTMLDivElement>(null);\n  const editorInstance = useRef<CoreEditor | null>(null);\n  const onChangeRef = useRef(onChange);\n  onChangeRef.current = onChange;\n\n  useEffect(() => {\n    const root = editorRef.current;\n    if (!root) return;\n\n    const applySelectLabel = () => {\n      root.querySelectorAll('select.codejar-select').forEach((element) => {\n        if (!element.getAttribute('aria-label')) {\n          element.setAttribute('aria-label', 'Code editor language');\n        }\n      });\n    };\n\n    applySelectLabel();\n    const observer = new MutationObserver(() => applySelectLabel());\n    observer.observe(root, { childList: true, subtree: true });\n    return () => observer.disconnect();\n  }, []);\n\n  useEffect(() => {\n    if (!editorRef.current) return;\n\n    // Initialize the editor\n    const editor = CoreEditor.create({\n      element: editorRef.current,\n      uri: 'file:///untitled.ts',\n      assetLoad: createAssetLoad('/kerebron-wasm'),\n      editorKits: [new CodeEditorKit(lang)],\n    });\n\n    editorInstance.current = editor;\n\n    // Surface edits to callers.\n    const onTransaction = async () => {\n      if (!editorInstance.current) return;\n\n      try {\n        const buffer = await editorInstance.current.saveDocument('text/plain');\n        onChangeRef.current?.(new globalThis.TextDecoder().decode(buffer));\n      } catch (err) {\n        console.error('Failed to read code:', err);\n      }\n    };\n\n    editor.addEventListener('transaction', onTransaction);\n\n    // Seed initial content on mount.\n    if (value) {\n      editor\n        .loadDocumentText('text/plain', value)\n        .catch((err) => console.error('Failed to load code:', err));\n    }\n\n    // Cleanup on unmount\n    return () => {\n      editor.removeEventListener('transaction', onTransaction);\n      editor.destroy();\n    };\n    // Initial `value`/`lang` are intentionally only applied on mount.\n    // eslint-disable-next-line react-hooks/exhaustive-deps\n  }, []);\n\n  return (\n    <div>\n      <div>\n        <div ref={editorRef} className=\"kb-component\" />\n      </div>\n    </div>\n  );\n};\n\nCodeEditor.displayName = 'CodeEditor';\n\nexport { CodeEditor };\n"]}
+{"version":3,"sources":[],"names":[],"mappings":"","file":"kerebron.cjs"}

package/dist/kerebron.css

@@ -92,15 +92,25 @@
   color: var(--kb-color-icon);
 }
 
+/* The "…" overflow popup is deliberately NOT in the dropdown group below:
+ * it holds the same buttons that didn't fit in the bar, so it keeps the
+ * toolbar's own surface (stock Kerebron already paints both with
+ * --kb-color-surface-elevated) instead of the floating-menu card color.
+ * Stock also flips it to the dropdown color under an OS-level
+ * `prefers-color-scheme: dark` — but our themes are class-driven, so on a
+ * dark OS with a light app theme that turned the popup card-white.
+ * Re-assert the toolbar surface unconditionally (same specificity, later
+ * in the cascade, and media queries add none). */
+.kb-custom-menu__overflow-menu {
+  background: var(--kb-color-surface-elevated);
+}
+
 [data-theme='light'] .kb-dropdown__menu,
 [data-theme='light'] .kb-submenu__content,
-[data-theme='light'] .kb-custom-menu__overflow-menu,
 [data-theme='dark'] .kb-dropdown__menu,
 [data-theme='dark'] .kb-submenu__content,
-[data-theme='dark'] .kb-custom-menu__overflow-menu,
 .dark .kb-dropdown__menu,
-.dark .kb-submenu__content,
-.dark .kb-custom-menu__overflow-menu {
+.dark .kb-submenu__content {
   background: var(--kb-menu-dropdown-bg) !important;
   border-color: var(--kb-menu-dropdown-border) !important;
   color: var(--kb-menu-dropdown-text) !important;
@@ -108,13 +118,10 @@
 
 [data-theme='light'] .kb-custom-menu .kb-dropdown__item .kb-menu__button:hover,
 [data-theme='light'] .kb-custom-menu .kb-submenu__label:hover,
-[data-theme='light'] .kb-custom-menu__overflow-item:hover,
 [data-theme='dark'] .kb-custom-menu .kb-dropdown__item .kb-menu__button:hover,
 [data-theme='dark'] .kb-custom-menu .kb-submenu__label:hover,
-[data-theme='dark'] .kb-custom-menu__overflow-item:hover,
 .dark .kb-custom-menu .kb-dropdown__item .kb-menu__button:hover,
-.dark .kb-custom-menu .kb-submenu__label:hover,
-.dark .kb-custom-menu__overflow-item:hover {
+.dark .kb-custom-menu .kb-submenu__label:hover {
   background: var(--kb-menu-dropdown-hover) !important;
   color: var(--kb-menu-dropdown-text) !important;
 }
@@ -254,6 +261,16 @@
   line-height: 1;
 }
 
+/* The toolbar collapses extras into its “…” overflow, but that width math
+ * can lag injected buttons and window resizes. It lays out nowrap with
+ * overflow visible, so without a wrap fallback the tail buttons spill out
+ * of the bar and paint (it is z-index 1000) over the editable and the
+ * docked macro panel below. Wrapping lets the bar grow a row instead;
+ * content reflows under it. */
+.kb-custom-menu {
+  flex-wrap: wrap;
+}
+
 /*
  * RTL (#319) — Kerebron's content.css/prosemirror.css use physical-direction
  * properties, so these parts don't mirror under dir="rtl". Restate them as
@@ -295,3 +312,123 @@
 .kb-editor .codecrock-root {
   direction: ltr;
 }
+
+/*
+ * TextAreaRich (Kerebron surface) — the component wrapper supplies the
+ * Textarea chrome (border, radius, focus ring), so the stock kb-component
+ * frame is neutralized and the editable is resized to Textarea metrics:
+ * one Input row tall (24px line + 7px padding + the wrapper's 1px borders
+ * = h-10), auto-growing with content.
+ */
+[data-slot='textarea-rich'] .kb-component {
+  border: 0;
+  border-radius: inherit;
+  background: transparent;
+  padding: 0;
+}
+
+[data-slot='textarea-rich'] .kb-editor {
+  min-height: 38px;
+  padding: 7px 12px;
+  /* Unlayered package CSS (this rule, Kerebron's base.css) outranks
+     Tailwind utilities on the editable, so sized hosts (Textarea `size`)
+     override through the variables instead. The 1rem/1.5rem defaults make
+     a one-line editable 24px + 14px padding = the 38px md Input row. */
+  font-size: var(--textarea-rich-font-size, 1rem);
+  line-height: var(--textarea-rich-line-height, 1.5rem);
+  overflow-y: auto;
+  transition:
+    min-height 0.2s ease-out,
+    padding 0.2s ease-out;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  [data-slot='textarea-rich'] .kb-editor {
+    transition: none;
+  }
+}
+
+/* Kerebron's stock mobile toolbar is fixed to the bottom of the viewport, so
+ * menu.css clears it with `padding-bottom: 60px !important` on every editable
+ * under 768px. TextAreaRich replaces that toolbar with its own top-anchored
+ * kb-custom-menu, so on phones the clearance is just a dead band under the
+ * text — restore the Textarea metrics (!important to beat the library's). */
+@media (max-width: 767px) {
+  [data-slot='textarea-rich'] .kb-component {
+    padding-bottom: 0 !important;
+  }
+  [data-slot='textarea-rich'] .kb-editor {
+    padding-bottom: 7px !important;
+  }
+}
+
+/* Indent past the block gutter's floating + trigger only while the writer
+ * is engaged (hovering, focused, or using the + menu) — at rest the text
+ * slides back flush with the Textarea padding. */
+[data-slot='textarea-rich'][data-gutter]
+  [data-slot='textarea-rich-body']:hover
+  .kb-editor,
+[data-slot='textarea-rich'][data-gutter]:focus-within .kb-editor,
+[data-slot='textarea-rich'][data-gutter][data-block-menu] .kb-editor {
+  padding-inline-start: 2.5rem;
+}
+
+/* On touch devices the + trigger is always visible (no hover to reveal it),
+ * so the indent must be permanent — otherwise an unfocused field starts its
+ * text under the trigger. */
+@media (hover: none) {
+  [data-slot='textarea-rich'][data-gutter] .kb-editor {
+    padding-inline-start: 2.5rem;
+  }
+}
+
+/* The toolbar stays mounted (its buttons carry live editor state) but is
+ * chrome the field reveals on demand. Only the menu bar itself is hidden —
+ * its wrapper also contains the editable surface. */
+[data-slot='textarea-rich'][data-toolbar='hidden'] .kb-custom-menu,
+[data-slot='textarea-rich'][data-toolbar='hidden']
+  .kb-custom-menu__overflow-menu {
+  display: none;
+}
+
+/* Disabled/readOnly: the toolbar is made `inert` (see TextAreaRichKerebron);
+ * dim it so it also reads as unavailable. */
+[data-slot='textarea-rich'][data-inert] .kb-custom-menu {
+  opacity: 0.5;
+}
+
+/* Working space while the docked macro panel is open. The panel docks
+ * below the toolbar (which keeps its full width), so only the editable
+ * sidesteps it; tall enough for search plus a few rows, far less when the
+ * compact panel is just rows. */
+@media (min-width: 768px) {
+  [data-slot='textarea-rich'][data-macros-open] .kb-editor {
+    min-height: 250px;
+    margin-inline-end: 18rem;
+  }
+  [data-slot='textarea-rich'][data-macros-open][data-compact-macros]
+    .kb-editor {
+    min-height: 140px;
+  }
+}
+
+/* RichEditor isolates `.kb-component` (inline style) so the toolbar's
+ * z-index:1000 can't escape into the page — but the docked macro panel is
+ * a later sibling OUTSIDE that boundary, so it painted over the toolbar's
+ * dropdowns and its "…" overflow popup. Move the isolation boundary up to
+ * the field root: the toolbar and its popups now rise above the docked
+ * panel (and the panel stays above the editable by DOM order), while
+ * their z-index still can't leak past the field. */
+[data-slot='textarea-rich'] {
+  isolation: isolate;
+}
+[data-slot='textarea-rich'] .kb-component {
+  isolation: auto !important;
+}
+
+/* Kerebron caps the "…" overflow popup at 320px, which wraps the grid onto
+ * a second row once our Macros/Dictate items join it. Let it grow with its
+ * content, up to the field's width (minus its inset on both sides). */
+[data-slot='textarea-rich'] .kb-custom-menu__overflow-menu {
+  max-width: calc(100% - 2 * var(--kb-space-xs, 4px));
+}

package/dist/kerebron.d.cts

@@ -1,6 +1,8 @@
 import * as React from 'react';
 import React__default from 'react';
 import { CoreEditor, AssetLoad, EditorKit } from '@kerebron/editor';
+import { MenuElement } from '@kerebron/extension-menu';
+export { MenuElement } from '@kerebron/extension-menu';
 import { MediaUploadOptions } from '@kerebron/extension-basic-editor/ExtensionMediaUpload';
 
 /**
@@ -16,6 +18,12 @@ import { MediaUploadOptions } from '@kerebron/extension-basic-editor/ExtensionMe
  * peers — plain-mode consumers never load them.
  */
 
+/**
+ * Reshape the toolbar menu before it renders: receives the stock menu's
+ * item groups and returns the groups to render. Append custom
+ * {@link MenuElement}s (e.g. a Macros toggle) or drop stock groups.
+ */
+type ModifyMenu = (menus: MenuElement[][]) => MenuElement[][];
 interface CollabConfig {
     /** Room id — one shared document per room (e.g. a post id). */
     room: string;
@@ -81,6 +89,12 @@ interface RichEditorProps {
     collab?: CollabConfig;
     /** Read-only surface: no typing, and the content dims. */
     disabled?: boolean;
+    /**
+     * Lock edits while keeping the surface focusable and selectable, without
+     * the dimmed `disabled` styling. Applied from creation, so the document
+     * cannot be edited even while the initial load is still in flight.
+     */
+    readOnly?: boolean;
     /**
      * Id for the editor host element — an `aria-labelledby`/`aria-describedby`
      * anchor. The host is a `div`, not a labelable control, so a
@@ -120,6 +134,28 @@ interface RichEditorProps {
     mediaUpload?: MediaUploadOptions;
     /** Additional editor kits, installed once when the editor mounts. */
     editorKits?: EditorKit[];
+    /**
+     * Reshape the stock toolbar before it renders: receives the menu's item
+     * groups and returns the groups to render — append custom controls (a
+     * macros toggle, dictation) or drop stock ones. Read once, when the editor
+     * mounts — like {@link collab}, remount via `key` to change it.
+     */
+    modifyMenu?: ModifyMenu;
+    /**
+     * MIME type of the `value`/`onChange` contract (`'text/x-markdown'` by
+     * default; pass `'text/html'` for an HTML-valued surface). Governs both
+     * how `value` is parsed and what `onChange`/`getContent()` emit.
+     */
+    valueType?: string;
+    /**
+     * Converge the document to `value` on every render, not only when the
+     * prop changes — native controlled-input semantics: when a host's
+     * `onChange` does not echo an edit back into `value`, the edit reverts.
+     * A rejected edit leaves the prop identity unchanged while the document
+     * moved on, which a change-gated reload can never see. Off by default,
+     * which tolerates read-once hosts that call `getContent()` on submit.
+     */
+    strictValue?: boolean;
 }
 interface RichEditorHandle {
     /**
@@ -150,4 +186,266 @@ interface CodeEditorProps {
 }
 declare const CodeEditor: React__default.FC<CodeEditorProps>;
 
-export { CodeEditor, type CodeEditorProps, type CollabConfig, RichEditor, type RichEditorHandle, type RichEditorProps };
+interface Macro {
+    /** Stable identifier. */
+    id: string;
+    /** Human-readable name shown in the list. */
+    label: string;
+    /** Plain text inserted into the editor. `\n` is preserved. */
+    content: string;
+    /** Optional shortcut identifier shown as a badge (e.g. `.b`). */
+    shortcut?: string;
+    /** Extra search terms that are not displayed. */
+    keywords?: string[];
+}
+interface MacroGroup {
+    /** Stable identifier. */
+    id: string;
+    /** Group heading (e.g. "Default library"). */
+    label: string;
+    /**
+     * `previous` renders the group visually distinct from library macros
+     * (history icon, muted header) so prior values are never mistaken for
+     * predefined content. Defaults to `library`.
+     */
+    kind?: 'library' | 'previous';
+    /** Macros belonging to the group. */
+    macros: Macro[];
+}
+interface MacroLibraryProps {
+    /** Grouped macros supplied by the application. */
+    groups: MacroGroup[];
+    /** Called with the chosen macro. The caller performs the insertion. */
+    onSelect: (macro: Macro) => void;
+    /** Id for the panel root (e.g. the target of a toggle's aria-controls). */
+    id?: string;
+    /**
+     * Name of the insertion target shown in the header (e.g. the editor's
+     * label), rendered as "Insert into <target>".
+     */
+    targetLabel?: string;
+    /** When provided, renders a close button and enables Escape-to-close. */
+    onClose?: () => void;
+    /** When provided, renders a "Save as macro" action in the footer. */
+    onCreateMacro?: () => void;
+    /** Autofocus the search input on mount. Defaults to false. */
+    autoFocusSearch?: boolean;
+    /**
+     * Minimal chrome for short, space-constrained lists: hides the header,
+     * the search input, and library group headings so the panel is just the
+     * macro rows. Previous-value groups keep their heading so prior answers
+     * stay visually distinct. Escape-to-close still works when `onClose` is
+     * provided. Defaults to false.
+     */
+    compact?: boolean;
+    /** Additional class for the panel root. */
+    className?: string;
+    /** Overridable labels for i18n. */
+    labels?: Partial<typeof DEFAULT_LABELS>;
+}
+declare const DEFAULT_LABELS: {
+    insertInto: string;
+    macros: string;
+    searchPlaceholder: string;
+    searchLabel: string;
+    close: string;
+    createMacro: string;
+    empty: string;
+    emptyHint: string;
+    noResults: string;
+    clearSearch: string;
+    showMore: string;
+};
+
+interface RichTextVariable {
+    /** Human-readable label shown in the variable menu. */
+    label: string;
+    /** The token displayed for the variable (e.g. `{{employee.name}}`). */
+    value: string;
+    /** Optional text inserted instead of `value` (e.g. an expanded group). */
+    insertValue?: string;
+}
+interface RichTextVariableGroup {
+    /** Group heading shown in the variable menu. */
+    label: string;
+    /** Variables belonging to the group. */
+    variables: RichTextVariable[];
+}
+interface RichTextEditorBlockMenuLabels {
+    /** Accessible label for the gutter `+` button. Defaults to "Block menu". */
+    blockMenu?: string;
+    /** "Text" (normal paragraph) menu item. */
+    text?: string;
+    /** "Heading 1" menu item. */
+    heading1?: string;
+    /** "Heading 2" menu item. */
+    heading2?: string;
+    /** "Heading 3" menu item. */
+    heading3?: string;
+    /** "Bullet list" menu item. */
+    bulletList?: string;
+    /** "Numbered list" menu item. */
+    numberedList?: string;
+    /** "Quote" menu item. */
+    quote?: string;
+    /** "Insert macro" submenu parent (shown when `macros` is provided). */
+    insertMacro?: string;
+    /** "Show macro library" menu item (shown when `macros` is provided). */
+    showMacroLibrary?: string;
+    /** Toolbar toggle item while the toolbar is hidden. */
+    showToolbar?: string;
+    /** Toolbar toggle item while the toolbar is visible. */
+    hideToolbar?: string;
+}
+interface RichTextEditorProps {
+    /** Current HTML value of the editor. */
+    value: string;
+    /** Called with the updated HTML whenever the content changes. */
+    onChange: (value: string) => void;
+    /** Placeholder shown when the editor is empty. */
+    placeholder?: string;
+    /** Additional class for the editor wrapper. */
+    className?: string;
+    /**
+     * Variable groups for the "Insert variable" menu. When omitted the variable
+     * menu and the `<< >>` → `{{ }}` convert button are hidden.
+     */
+    variableGroups?: RichTextVariableGroup[];
+    /** Enable the speech-to-text dictation button. Defaults to true. */
+    enableDictation?: boolean;
+    /** Called when dictation cannot start (replaces native alerts). */
+    onDictationError?: (message: string) => void;
+    /** Disable editing and toolbar actions. */
+    disabled?: boolean;
+    /**
+     * Sanitises HTML introduced by paste or drop before it reaches the editable
+     * DOM. Without it, pasted markup is inserted as the browser provides it.
+     */
+    sanitizeHtml?: (html: string) => string;
+    /**
+     * Grouped macros for the optional macro addon. When omitted the editor is
+     * unchanged. When provided, a "Macros" toolbar toggle docks a searchable
+     * macro panel inside the editor; selecting a macro inserts its content at
+     * the retained caret position. Typing a macro shortcut (e.g. `.b`)
+     * followed by a space expands it in place, panel open or not.
+     */
+    macros?: MacroGroup[];
+    /** Open the macro panel initially. Defaults to false. */
+    defaultMacrosOpen?: boolean;
+    /**
+     * Focus-driven macro panel: the field rests as a plain input, the panel
+     * animates in while focus is anywhere inside the editor frame (editable,
+     * toolbar, gutter or the panel itself) and animates away when focus
+     * leaves. Overrides `defaultMacrosOpen`; Escape-to-close is disabled since
+     * visibility follows focus. Pairs well with `compactMacros`. Defaults to
+     * false.
+     */
+    macrosOnFocus?: boolean;
+    /**
+     * Dock the macro panel in `MacroLibrary`'s compact mode (no header,
+     * search, or library group headings) and shrink the macros-open working
+     * space to match — for short lists in dense forms. Defaults to false.
+     */
+    compactMacros?: boolean;
+    /**
+     * Called on any explicit macro invocation: a pick from the macro panel or
+     * the block gutter flyout, or a typed `.shortcut` expansion. Return `true`
+     * to take over the insertion: the editor skips its caret insertion and the
+     * host applies the content through its own value update (e.g. appending a
+     * coded finding as its own line). For typed shortcuts the editor removes
+     * the typed token (and publishes that edit) before consulting the
+     * callback, so a host that takes over computes from a token-free value.
+     */
+    onMacroInsert?: (macro: Macro) => boolean | void;
+    /**
+     * Overridable labels for the macro addon (i18n). Panel labels are
+     * forwarded to the docked `MacroLibrary`; `macros` doubles as the toolbar
+     * toggle text, and `showMacros`/`hideMacros` set the toggle's title.
+     */
+    macroLabels?: MacroLibraryProps['labels'] & {
+        /** Toggle title while the panel is closed. Defaults to "Show macros". */
+        showMacros?: string;
+        /** Toggle title while the panel is open. Defaults to "Hide macros". */
+        hideMacros?: string;
+    };
+    /** Forwarded to the macro panel's "Save as macro" action. */
+    onCreateMacro?: () => void;
+    /**
+     * Controlled toolbar visibility. `'hidden'` removes the toolbar entirely
+     * for chromeless surfaces (typed shortcuts keep working; pair with
+     * `markdownShortcuts` or `blockMenu` so formatting stays reachable). When
+     * omitted the editor manages visibility itself, starting from
+     * `defaultToolbar` — existing consumers are unchanged.
+     */
+    toolbar?: 'visible' | 'hidden';
+    /**
+     * Initial toolbar visibility when `toolbar` is uncontrolled. Defaults to
+     * `'visible'`.
+     */
+    defaultToolbar?: 'visible' | 'hidden';
+    /**
+     * Called when the block gutter menu toggles the toolbar ("Show toolbar" /
+     * "Hide toolbar"), so hosts can persist the preference or drive the
+     * controlled `toolbar` prop.
+     */
+    onToolbarChange?: (toolbar: 'visible' | 'hidden') => void;
+    /**
+     * Notion-style block gutter menu. Hovering a text row reveals a `+`
+     * button in the start gutter whose menu applies block formats to that
+     * row, opens the macro panel (when `macros` is provided) and toggles the
+     * toolbar. Also reachable from the keyboard with Ctrl/Cmd+/ on the
+     * caret's block. Defaults to false.
+     */
+    blockMenu?: boolean;
+    /** Overridable labels for the block gutter menu (i18n). */
+    blockMenuLabels?: RichTextEditorBlockMenuLabels;
+    /**
+     * Expand markdown-style block shortcuts typed at the start of a line and
+     * followed by a space: `#`/`##`/`###` → headings, `-`/`*` → bullet list,
+     * `1.` → numbered list, `>` → block quote. Inline rules (`**bold**`) are
+     * not interpreted. Defaults to false.
+     */
+    markdownShortcuts?: boolean;
+    /**
+     * Textarea-like surface: removes the wrapper border/radius and starts the
+     * editable at a single Input-row height that auto-grows with content
+     * (matching `Textarea`'s `md` metrics). The host supplies the chrome —
+     * `TextAreaRich` is the packaged pairing. Defaults to false.
+     */
+    chromeless?: boolean;
+    /** Id applied to the editable region (deep links, `aria-labelledby`). */
+    id?: string;
+    /**
+     * Prevent editing and formatting while keeping the region focusable and
+     * its text selectable — the contenteditable analogue of a native
+     * textarea's `readOnly`. The block gutter menu is hidden.
+     */
+    readOnly?: boolean;
+    /** Extra class for the editable region itself (fonts, whitespace). */
+    editorClassName?: string;
+    /** Inline style for the editable region (e.g. a row-derived min-height). */
+    editorStyle?: React.CSSProperties;
+    /** Accessible label for the editable region. */
+    'aria-label'?: string;
+    /** Id(s) of element(s) labelling the editable region. */
+    'aria-labelledby'?: string;
+    /** Ids of elements describing the editable region (errors, helper text). */
+    'aria-describedby'?: string;
+    /** Marks the editable region invalid for assistive technology. */
+    'aria-invalid'?: React.AriaAttributes['aria-invalid'];
+    /** Marks the editable region required for assistive technology. */
+    'aria-required'?: React.AriaAttributes['aria-required'];
+}
+
+interface TextAreaRichProps extends Omit<RichTextEditorProps, 'chromeless' | 'blockMenu' | 'defaultToolbar'> {
+    /**
+     * Initial toolbar visibility when `toolbar` is uncontrolled. TextAreaRich
+     * is chromeless, so this defaults to `'hidden'`; the block gutter menu's
+     * "Show toolbar" reveals it on demand.
+     */
+    defaultToolbar?: 'visible' | 'hidden';
+}
+
+declare const TextAreaRichKerebron: React.ForwardRefExoticComponent<TextAreaRichProps & React.RefAttributes<HTMLDivElement>>;
+
+export { CodeEditor, type CodeEditorProps, type CollabConfig, type ModifyMenu, RichEditor, type RichEditorHandle, type RichEditorProps, TextAreaRichKerebron as TextAreaRich, type TextAreaRichProps };