@mieweb/ui 0.11.0-dev.34 → 0.11.0-dev.36

package/dist/chunk-IALTKN3Y.js

@@ -0,0 +1,1017 @@
+import { RichEditor } from './chunk-NIE3WBJH.js';
+import { processDictation, MacroLibrary } from './chunk-EWPNM6OO.js';
+import { useMessages } from './chunk-5YOT4DVH.js';
+import { Dropdown, DropdownItem, DropdownSeparator, DropdownSubmenu, DropdownLabel } from './chunk-OYUIEJPN.js';
+import { useMediaQuery } from './chunk-HTZ27DGZ.js';
+import { usePrefersReducedMotion } from './chunk-XDU65GLW.js';
+import { useDirection } from './chunk-YVKBXNPK.js';
+import { Button } from './chunk-WX2XB6FP.js';
+import { AnimatedPresence, Animated } from './chunk-F4N67NAF.js';
+import { cn } from './chunk-TQONQSJO.js';
+import * as React2 from 'react';
+import { useRef, useEffect } from 'react';
+import { Extension, CoreEditor } from '@kerebron/editor';
+import { CodeEditorKit } from '@kerebron/editor-kits/CodeEditorKit';
+import { createAssetLoad } from '@kerebron/wasm/web';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
+import { TextSelection, Plugin } from 'prosemirror-state';
+import { MenuItem } from '@kerebron/extension-menu';
+import { Plus } from 'lucide-react';
+
+var CodeEditor = ({
+  value = "",
+  onChange,
+  lang = "typescript"
+}) => {
+  const editorRef = useRef(null);
+  const editorInstance = useRef(null);
+  const onChangeRef = useRef(onChange);
+  onChangeRef.current = onChange;
+  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();
+  }, []);
+  useEffect(() => {
+    if (!editorRef.current) return;
+    const editor = CoreEditor.create({
+      element: editorRef.current,
+      uri: "file:///untitled.ts",
+      assetLoad: createAssetLoad("/kerebron-wasm"),
+      editorKits: [new CodeEditorKit(lang)]
+    });
+    editorInstance.current = editor;
+    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.addEventListener("transaction", onTransaction);
+    if (value) {
+      editor.loadDocumentText("text/plain", value).catch((err) => console.error("Failed to load code:", err));
+    }
+    return () => {
+      editor.removeEventListener("transaction", onTransaction);
+      editor.destroy();
+    };
+  }, []);
+  return /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("div", { children: /* @__PURE__ */ jsx("div", { ref: editorRef, className: "kb-component" }) }) });
+};
+CodeEditor.displayName = "CodeEditor";
+
+// src/components/TextAreaRich/speech.ts
+function getSpeechRecognition() {
+  if (typeof window === "undefined") return void 0;
+  const w = window;
+  return w.SpeechRecognition || w.webkitSpeechRecognition;
+}
+var TextAreaRichExtension = class extends Extension {
+  constructor(onKeyDown) {
+    super({});
+    this.onKeyDown = onKeyDown;
+  }
+  onKeyDown;
+  name = "textAreaRichShortcuts";
+  getProseMirrorPlugins() {
+    return [new Plugin({ props: { handleKeyDown: this.onKeyDown } })];
+  }
+};
+var viewOf = (editor) => editor.view;
+var UNITLESS_STYLE_PROPS = /* @__PURE__ */ new Set([
+  "animationIterationCount",
+  "aspectRatio",
+  "borderImageOutset",
+  "borderImageSlice",
+  "borderImageWidth",
+  "boxFlex",
+  "boxFlexGroup",
+  "boxOrdinalGroup",
+  "columnCount",
+  "columns",
+  "flex",
+  "flexGrow",
+  "flexPositive",
+  "flexShrink",
+  "flexNegative",
+  "flexOrder",
+  "fontWeight",
+  "gridArea",
+  "gridRow",
+  "gridRowEnd",
+  "gridRowSpan",
+  "gridRowStart",
+  "gridColumn",
+  "gridColumnEnd",
+  "gridColumnSpan",
+  "gridColumnStart",
+  "lineClamp",
+  "lineHeight",
+  "opacity",
+  "order",
+  "orphans",
+  "tabSize",
+  "widows",
+  "zIndex",
+  "zoom",
+  // SVG-related
+  "fillOpacity",
+  "floodOpacity",
+  "stopOpacity",
+  "strokeDasharray",
+  "strokeDashoffset",
+  "strokeMiterlimit",
+  "strokeOpacity",
+  "strokeWidth"
+]);
+function insertPlainText(view, text, from = view.state.selection.from, to = view.state.selection.to) {
+  const { schema, selection, storedMarks } = view.state;
+  const marks = (from === selection.from && to === selection.to ? storedMarks : null) ?? view.state.doc.resolve(from).marks();
+  const br = schema.nodes.br ?? schema.nodes.hard_break;
+  const lines = text.replace(/\r\n?/g, "\n").split("\n");
+  const nodes = [];
+  lines.forEach((line, index) => {
+    if (index > 0) {
+      if (br) nodes.push(br.create(null, null, marks));
+      else if (line) nodes.push(schema.text(" ", marks));
+    }
+    if (line) nodes.push(schema.text(line, marks));
+  });
+  let tr = view.state.tr.replaceWith(from, to, nodes);
+  const end = Math.min(
+    from + nodes.reduce((size, node) => size + node.nodeSize, 0),
+    tr.doc.content.size
+  );
+  tr = tr.setSelection(TextSelection.near(tr.doc.resolve(end)));
+  view.dispatch(tr.scrollIntoView());
+}
+function docIsEmpty(view) {
+  const { doc } = view.state;
+  return doc.childCount === 1 && !!doc.firstChild && doc.firstChild.isTextblock && doc.firstChild.content.size === 0;
+}
+var BLOCK_FORMAT_ITEMS = [
+  { key: "text", label: "Text", command: "setParagraph" },
+  { key: "heading1", label: "Heading 1", command: "setHeading1" },
+  { key: "heading2", label: "Heading 2", command: "setHeading2" },
+  { key: "heading3", label: "Heading 3", command: "setHeading3" },
+  { key: "bulletList", label: "Bullet list", command: "toggleBulletList" },
+  { key: "numberedList", label: "Numbered list", command: "toggleOrderedList" },
+  { key: "quote", label: "Quote", command: "toggleBlockquote" }
+];
+var TextAreaRichKerebron = React2.forwardRef(
+  ({
+    value = "",
+    onChange,
+    placeholder,
+    className,
+    enableDictation = true,
+    onDictationError,
+    disabled = false,
+    macros,
+    defaultMacrosOpen = false,
+    macrosOnFocus = false,
+    compactMacros = false,
+    onMacroInsert,
+    macroLabels,
+    onCreateMacro,
+    toolbar,
+    defaultToolbar = "hidden",
+    onToolbarChange,
+    blockMenuLabels,
+    id,
+    readOnly = false,
+    editorClassName,
+    editorStyle,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledBy,
+    "aria-describedby": ariaDescribedBy,
+    "aria-invalid": ariaInvalid,
+    "aria-required": ariaRequired
+  }, ref) => {
+    const inert = disabled || readOnly;
+    const wrapperRef = React2.useRef(null);
+    const gutterWrapperRef = React2.useRef(null);
+    const editorHandleRef = React2.useRef(null);
+    const editorRef = React2.useRef(null);
+    const [ready, setReady] = React2.useState(false);
+    React2.useImperativeHandle(
+      ref,
+      () => ready && editorRef.current ? viewOf(editorRef.current).dom : wrapperRef.current,
+      [ready]
+    );
+    const [macrosOpen, setMacrosOpen] = React2.useState(
+      defaultMacrosOpen && !macrosOnFocus
+    );
+    const [uncontrolledToolbar, setUncontrolledToolbar] = React2.useState(defaultToolbar);
+    const toolbarVisible = (toolbar ?? uncontrolledToolbar) === "visible";
+    const [isListening, setIsListening] = React2.useState(false);
+    const [speechSupported, setSpeechSupported] = React2.useState(false);
+    const [isEmpty, setIsEmpty] = React2.useState(true);
+    const [editorTop, setEditorTop] = React2.useState(0);
+    const [blockMenuOpen, setBlockMenuOpen] = React2.useState(false);
+    const [gutterTop, setGutterTop] = React2.useState(4);
+    const recognitionRef = React2.useRef(null);
+    const isListeningRef = React2.useRef(false);
+    const shouldRestartRef = React2.useRef(false);
+    const dictationSessionRef = React2.useRef(0);
+    const hoverBlockRef = React2.useRef(null);
+    const blockTargetPosRef = React2.useRef(null);
+    const firstBlockItemRef = React2.useRef(null);
+    const macroPanelId = React2.useId();
+    const macroSidePanel = useMediaQuery("(min-width: 768px)");
+    const prefersReducedMotion = usePrefersReducedMotion();
+    const direction = useDirection(wrapperRef);
+    const hasMacros = Boolean(macros);
+    const hasMacroEntries = Boolean(
+      macros?.some((group) => group.macros.length > 0)
+    );
+    const gutterActive = !inert;
+    const macrosRef = React2.useRef(macros);
+    macrosRef.current = macros;
+    const hasMacrosRef = React2.useRef(hasMacros);
+    hasMacrosRef.current = hasMacros;
+    const onMacroInsertRef = React2.useRef(onMacroInsert);
+    onMacroInsertRef.current = onMacroInsert;
+    const onChangeRef = React2.useRef(onChange);
+    onChangeRef.current = onChange;
+    const inertRef = React2.useRef(inert);
+    inertRef.current = inert;
+    const macrosOpenRef = React2.useRef(macrosOpen);
+    macrosOpenRef.current = macrosOpen;
+    const toolbarVisibleRef = React2.useRef(toolbarVisible);
+    toolbarVisibleRef.current = toolbarVisible;
+    const dictationAvailableRef = React2.useRef(false);
+    dictationAvailableRef.current = enableDictation && speechSupported;
+    const onDictationErrorRef = React2.useRef(onDictationError);
+    onDictationErrorRef.current = onDictationError;
+    const m = useMessages();
+    const reportError = (message) => {
+      if (onDictationErrorRef.current) onDictationErrorRef.current(message);
+      else if (typeof console !== "undefined") console.warn(message);
+    };
+    const setToolbarVisibility = (next) => {
+      if (toolbar === void 0) setUncontrolledToolbar(next);
+      onToolbarChange?.(next);
+    };
+    const focusEditor = () => editorHandleRef.current?.focus();
+    const currentView = () => editorRef.current ? viewOf(editorRef.current) : null;
+    const changeWaitersRef = React2.useRef([]);
+    const publishedDocRef = React2.useRef(null);
+    const handleChange = (next) => {
+      publishedDocRef.current = currentView()?.state.doc ?? null;
+      onChangeRef.current?.(next);
+      const waiters = changeWaitersRef.current;
+      changeWaitersRef.current = [];
+      for (const resolve of waiters) resolve();
+    };
+    const afterNextChange = () => new Promise((resolve) => {
+      const timer = setTimeout(resolve, 250);
+      changeWaitersRef.current.push(() => {
+        clearTimeout(timer);
+        resolve();
+      });
+    });
+    const insertMacro = (macro) => {
+      if (inertRef.current) return;
+      if (!onMacroInsertRef.current) {
+        const view2 = currentView();
+        if (!view2) return;
+        view2.focus();
+        insertPlainText(view2, macro.content);
+        return;
+      }
+      const view = currentView();
+      const pending = view && view.state.doc !== publishedDocRef.current;
+      const invoke = () => {
+        if (inertRef.current) return;
+        const liveView = currentView();
+        if (!liveView) return;
+        liveView.focus();
+        if (onMacroInsertRef.current?.(macro) === true) return;
+        insertPlainText(liveView, macro.content);
+      };
+      if (pending) void afterNextChange().then(invoke);
+      else invoke();
+    };
+    const expandTypedShortcut = (view) => {
+      const groups = macrosRef.current;
+      if (!groups) return false;
+      const { selection } = view.state;
+      if (!selection.empty) return false;
+      const { $from } = selection;
+      const textBefore = $from.parent.textBetween(
+        0,
+        $from.parentOffset,
+        void 0,
+        "\n"
+      );
+      const match = /(\S+)$/.exec(textBefore);
+      if (!match) return false;
+      const lowered = match[1].toLowerCase();
+      const macro = groups.flatMap((group) => group.macros).find((candidate) => candidate.shortcut?.toLowerCase() === lowered);
+      if (!macro) return false;
+      const from = $from.pos - match[1].length;
+      if (!onMacroInsertRef.current) {
+        insertPlainText(view, macro.content, from, $from.pos);
+        return true;
+      }
+      const editor = editorRef.current;
+      view.dispatch(view.state.tr.delete(from, $from.pos));
+      if (!editor) return true;
+      let insertAt = from;
+      let targetValid = true;
+      const trackInsertionPoint = (event) => {
+        const tr = event.detail?.transaction;
+        if (!tr) return;
+        const mapped = tr.mapping.mapResult(insertAt);
+        if (mapped.deleted) targetValid = false;
+        insertAt = mapped.pos;
+      };
+      editor.addEventListener("transaction", trackInsertionPoint);
+      void afterNextChange().then(() => {
+        editor.removeEventListener("transaction", trackInsertionPoint);
+        if (inertRef.current || editorRef.current !== editor) return;
+        if (onMacroInsertRef.current?.(macro) === true) return;
+        if (!targetValid) return;
+        const liveView = viewOf(editor);
+        liveView.focus();
+        const at = Math.min(insertAt, liveView.state.doc.content.size);
+        insertPlainText(liveView, macro.content, at, at);
+      });
+      return true;
+    };
+    const resetGutter = () => {
+      hoverBlockRef.current = null;
+      setGutterTop(editorTop + 4);
+    };
+    const handleGutterMouseMove = (event) => {
+      if (blockMenuOpen) return;
+      const view = currentView();
+      const wrapper = gutterWrapperRef.current;
+      if (!view || !wrapper) return;
+      let target = null;
+      let top = null;
+      for (const child of Array.from(view.dom.children)) {
+        const rect = child.getBoundingClientRect();
+        if (rect.width === 0 && rect.height === 0) continue;
+        if (rect.top <= event.clientY) {
+          target = child;
+          top = rect.top;
+        }
+      }
+      if (!target || top === null) {
+        resetGutter();
+        return;
+      }
+      hoverBlockRef.current = target;
+      const wrapperTop = wrapper.getBoundingClientRect().top;
+      const next = Math.max(Math.round(top - wrapperTop), editorTop + 4);
+      setGutterTop((current) => current === next ? current : next);
+    };
+    const handleBlockMenuOpenChange = (open) => {
+      const view = currentView();
+      if (open) {
+        const block = hoverBlockRef.current;
+        blockTargetPosRef.current = view && block && view.dom.contains(block) ? view.posAtDOM(block, 0) : null;
+      } else if (view && document.activeElement?.closest('[role="menu"]')) {
+        view.focus();
+      }
+      setBlockMenuOpen(open);
+    };
+    const openBlockMenuAtCaret = () => {
+      const view = currentView();
+      const wrapper = gutterWrapperRef.current;
+      if (view && wrapper) {
+        const { from } = view.state.selection;
+        blockTargetPosRef.current = from;
+        try {
+          const coords = view.coordsAtPos(from);
+          const wrapperTop = wrapper.getBoundingClientRect().top;
+          setGutterTop(
+            Math.max(Math.round(coords.top - wrapperTop), editorTop + 4)
+          );
+        } catch {
+        }
+      }
+      setBlockMenuOpen(true);
+    };
+    const applyBlockTarget = (view) => {
+      const pos = blockTargetPosRef.current;
+      if (pos === null) return;
+      const clamped = Math.min(pos, view.state.doc.content.size);
+      view.dispatch(
+        view.state.tr.setSelection(
+          TextSelection.near(view.state.doc.resolve(clamped))
+        )
+      );
+    };
+    const applyBlockFormat = (command) => {
+      const editor = editorRef.current;
+      if (inert || !editor) return;
+      setBlockMenuOpen(false);
+      const view = viewOf(editor);
+      view.focus();
+      applyBlockTarget(view);
+      editor.run[command]?.();
+    };
+    React2.useEffect(() => {
+      if (!blockMenuOpen) return;
+      const frame = requestAnimationFrame(
+        () => firstBlockItemRef.current?.focus()
+      );
+      return () => cancelAnimationFrame(frame);
+    }, [blockMenuOpen]);
+    const toggleDictation = React2.useRef(async () => {
+      const SpeechRecognition = getSpeechRecognition();
+      if (!SpeechRecognition) return;
+      if (isListeningRef.current || recognitionRef.current) {
+        stopDictation();
+        return;
+      }
+      const session = ++dictationSessionRef.current;
+      try {
+        const stream = await navigator.mediaDevices.getUserMedia({
+          audio: true
+        });
+        stream.getTracks().forEach((track) => track.stop());
+      } catch {
+        reportError(
+          "Microphone access is required for dictation. Please allow microphone access in your browser settings and try again."
+        );
+        return;
+      }
+      if (session !== dictationSessionRef.current) return;
+      if (!toolbarVisibleRef.current || inertRef.current) return;
+      const recognition = new SpeechRecognition();
+      recognition.continuous = true;
+      recognition.interimResults = true;
+      recognition.lang = "en-US";
+      recognition.maxAlternatives = 1;
+      recognition.onstart = () => {
+        if (session !== dictationSessionRef.current) {
+          try {
+            recognition.stop();
+          } catch {
+          }
+          return;
+        }
+        setIsListening(true);
+        isListeningRef.current = true;
+        shouldRestartRef.current = true;
+      };
+      recognition.onresult = (event) => {
+        if (session !== dictationSessionRef.current || recognitionRef.current !== recognition) {
+          return;
+        }
+        if (inertRef.current) return;
+        let finalTranscript = "";
+        for (let i = event.resultIndex; i < event.results.length; i++) {
+          const result = event.results[i];
+          if (result.isFinal) finalTranscript += result[0].transcript;
+        }
+        const view = currentView();
+        if (finalTranscript && view) {
+          view.focus();
+          insertPlainText(view, processDictation(finalTranscript) + " ");
+        }
+      };
+      recognition.onerror = (event) => {
+        if (session !== dictationSessionRef.current || recognitionRef.current !== recognition) {
+          return;
+        }
+        if (event.error === "no-speech" || event.error === "aborted") return;
+        if (event.error === "not-allowed") {
+          reportError(
+            "Microphone access was denied. Please allow microphone access in your browser settings and try again."
+          );
+          shouldRestartRef.current = false;
+          isListeningRef.current = false;
+          setIsListening(false);
+          return;
+        }
+        if (event.error === "network") return;
+        shouldRestartRef.current = false;
+        isListeningRef.current = false;
+        setIsListening(false);
+      };
+      recognition.onend = () => {
+        if (session === dictationSessionRef.current && shouldRestartRef.current && isListeningRef.current && !inertRef.current) {
+          setTimeout(() => {
+            if (session === dictationSessionRef.current && shouldRestartRef.current && isListeningRef.current && !inertRef.current) {
+              try {
+                recognition.start();
+              } catch {
+                shouldRestartRef.current = false;
+                isListeningRef.current = false;
+                if (recognitionRef.current === recognition)
+                  recognitionRef.current = null;
+                setIsListening(false);
+              }
+            }
+          }, 100);
+        } else {
+          if (recognitionRef.current === recognition)
+            recognitionRef.current = null;
+          if (session === dictationSessionRef.current) setIsListening(false);
+        }
+      };
+      recognitionRef.current = recognition;
+      try {
+        recognition.start();
+      } catch {
+        recognitionRef.current = null;
+        reportError("Failed to start speech recognition. Please try again.");
+      }
+    }).current;
+    const stopDictation = React2.useCallback(() => {
+      dictationSessionRef.current += 1;
+      shouldRestartRef.current = false;
+      isListeningRef.current = false;
+      const recognition = recognitionRef.current;
+      recognitionRef.current = null;
+      try {
+        recognition?.stop();
+      } catch {
+      }
+      setIsListening(false);
+    }, []);
+    React2.useEffect(() => {
+      setSpeechSupported(Boolean(getSpeechRecognition()));
+    }, []);
+    React2.useEffect(() => {
+      if (!toolbarVisible || inert || !enableDictation) stopDictation();
+    }, [toolbarVisible, inert, enableDictation, stopDictation]);
+    React2.useEffect(() => stopDictation, [stopDictation]);
+    const openBlockMenuAtCaretRef = React2.useRef(openBlockMenuAtCaret);
+    openBlockMenuAtCaretRef.current = openBlockMenuAtCaret;
+    const expandTypedShortcutRef = React2.useRef(expandTypedShortcut);
+    expandTypedShortcutRef.current = expandTypedShortcut;
+    const [menuAddon] = React2.useState(() => {
+      const macrosItem = new MenuItem({
+        icon: {
+          width: 24,
+          height: 24,
+          // Material Symbols "text snippet" (Apache-2.0)
+          path: "M20.41 8.41l-4.83-4.83c-.37-.37-.88-.58-1.41-.58H5c-1.1 0-2 .9-2 2v14c0 1.1.9 2 2 2h14c1.1 0 2-.9 2-2V9.83c0-.53-.21-1.04-.59-1.42zM7 7h7v2H7V7zm10 10H7v-2h10v2zm0-4H7v-2h10v2z"
+        },
+        title: macroLabels?.showMacros ?? "Show macros",
+        class: "tar-menu-macros",
+        select: () => hasMacrosRef.current,
+        enable: () => !inertRef.current,
+        active: () => macrosOpenRef.current,
+        run: () => {
+          setMacrosOpen((open) => !open);
+          return true;
+        }
+      });
+      const dictateItem = new MenuItem({
+        icon: {
+          width: 24,
+          height: 24,
+          // Material Symbols "mic" (Apache-2.0)
+          path: "M12 14c1.66 0 2.99-1.34 2.99-3L15 5c0-1.66-1.34-3-3-3S9 3.34 9 5v6c0 1.66 1.34 3 3 3zm5.3-3c0 3-2.54 5.1-5.3 5.1S6.7 14 6.7 11H5c0 3.41 2.72 6.23 6 6.72V21h2v-3.28c3.28-.48 6-3.3 6-6.72h-1.7z"
+        },
+        title: m("Start dictation"),
+        class: "tar-menu-dictate",
+        select: () => dictationAvailableRef.current,
+        enable: () => !inertRef.current,
+        active: () => isListeningRef.current,
+        run: () => {
+          void toggleDictation();
+          return true;
+        }
+      });
+      const modifyMenu = (menus) => [
+        ...menus,
+        // The patched MenuItem types `render().dom` as nullable, which no
+        // longer satisfies MenuElement; our items always render a button.
+        [macrosItem, dictateItem]
+      ];
+      const kit = {
+        getExtensions: () => [
+          new TextAreaRichExtension((view, event) => {
+            if (inertRef.current) return false;
+            if (event.key === "/" && (event.ctrlKey || event.metaKey) && !event.altKey) {
+              openBlockMenuAtCaretRef.current();
+              return true;
+            }
+            if (event.key !== " " || event.isComposing || event.ctrlKey || event.metaKey || event.altKey) {
+              return false;
+            }
+            return expandTypedShortcutRef.current(view);
+          })
+        ]
+      };
+      return { modifyMenu, kits: [kit] };
+    });
+    React2.useEffect(() => {
+      const root = wrapperRef.current;
+      if (!root || !ready) return;
+      const sync = () => {
+        for (const toolbar2 of root.querySelectorAll(
+          ".kb-custom-menu, .kb-custom-menu__overflow-menu"
+        )) {
+          toolbar2.inert = inert;
+        }
+        for (const macrosButton of root.querySelectorAll(
+          ".tar-menu-macros"
+        )) {
+          macrosButton.style.display = hasMacros ? "" : "none";
+          macrosButton.classList.toggle("kb-menu__button--disabled", inert);
+          macrosButton.setAttribute("aria-disabled", String(inert));
+          macrosButton.classList.toggle("kb-menu__button--active", macrosOpen);
+          macrosButton.setAttribute("aria-pressed", String(macrosOpen));
+          const title = macrosOpen ? macroLabels?.hideMacros ?? "Hide macros" : macroLabels?.showMacros ?? "Show macros";
+          macrosButton.setAttribute("title", title);
+          macrosButton.setAttribute("aria-label", title);
+        }
+        for (const dictateButton of root.querySelectorAll(
+          ".tar-menu-dictate"
+        )) {
+          dictateButton.style.display = enableDictation && speechSupported ? "" : "none";
+          dictateButton.classList.toggle("kb-menu__button--disabled", inert);
+          dictateButton.setAttribute("aria-disabled", String(inert));
+          dictateButton.classList.toggle(
+            "kb-menu__button--active",
+            isListening
+          );
+          dictateButton.setAttribute("aria-pressed", String(isListening));
+          const title = isListening ? m("Stop dictation") : m("Start dictation");
+          dictateButton.setAttribute("title", title);
+          dictateButton.setAttribute("aria-label", title);
+        }
+      };
+      sync();
+      const observer = new MutationObserver((mutations) => {
+        if (mutations.some((mutation) => mutation.addedNodes.length > 0)) {
+          sync();
+        }
+      });
+      observer.observe(root, { childList: true, subtree: true });
+      return () => observer.disconnect();
+    }, [
+      ready,
+      inert,
+      hasMacros,
+      macrosOpen,
+      macroLabels,
+      enableDictation,
+      speechSupported,
+      isListening,
+      toolbarVisible,
+      m
+    ]);
+    const handleReady = (editor) => {
+      editorRef.current = editor;
+      publishedDocRef.current = viewOf(editor).state.doc;
+      setIsEmpty(docIsEmpty(viewOf(editor)));
+      editor.addEventListener("transaction", () => {
+        if (editorRef.current !== editor) return;
+        setIsEmpty(docIsEmpty(viewOf(editor)));
+      });
+      setReady(true);
+    };
+    React2.useEffect(() => {
+      const view = currentView();
+      if (!view || !ready) return;
+      view.setProps({
+        attributes: {
+          role: "textbox",
+          "aria-multiline": "true",
+          ...id ? { id } : {},
+          ...ariaLabel ?? placeholder ? { "aria-label": ariaLabel ?? placeholder } : {},
+          ...ariaLabelledBy ? { "aria-labelledby": ariaLabelledBy } : {},
+          ...ariaDescribedBy ? { "aria-describedby": ariaDescribedBy } : {},
+          ...ariaInvalid ? { "aria-invalid": String(ariaInvalid) } : {},
+          // Booleanish: the string "false" must not read as required.
+          ...ariaRequired !== void 0 ? { "aria-required": String(ariaRequired) } : {},
+          ...readOnly ? { "aria-readonly": "true" } : {},
+          ...disabled ? { "aria-disabled": "true" } : {},
+          // Read-only keeps keyboard focus and text selection available;
+          // ProseMirror drops natural tabbability once `editable` is false.
+          tabindex: disabled ? "-1" : "0",
+          // setProps replaces the create-time attributes, so the base
+          // kb-editor class must be restated alongside any custom class.
+          class: editorClassName ? `kb-editor ${editorClassName}` : "kb-editor"
+        }
+      });
+    }, [
+      ready,
+      id,
+      ariaLabel,
+      placeholder,
+      ariaLabelledBy,
+      ariaDescribedBy,
+      ariaInvalid,
+      ariaRequired,
+      readOnly,
+      disabled,
+      editorClassName
+    ]);
+    const appliedEditorStyle = React2.useRef([]);
+    React2.useEffect(() => {
+      const view = currentView();
+      const wrapper = wrapperRef.current;
+      if (!view || !wrapper || !ready) return;
+      const editableStyle = view.dom.style;
+      for (const [style, property] of appliedEditorStyle.current) {
+        style.removeProperty(property);
+      }
+      appliedEditorStyle.current = [];
+      if (!editorStyle) return;
+      for (const [key, raw] of Object.entries(editorStyle)) {
+        if (raw === null || raw === void 0) continue;
+        const isCustomProperty = key.startsWith("--");
+        const property = isCustomProperty ? key : key.replace(/[A-Z]/g, (char) => `-${char.toLowerCase()}`);
+        const value2 = typeof raw === "number" && !isCustomProperty && !UNITLESS_STYLE_PROPS.has(key) ? `${raw}px` : String(raw);
+        const style = isCustomProperty ? wrapper.style : editableStyle;
+        style.setProperty(property, value2);
+        appliedEditorStyle.current.push([style, property]);
+      }
+    }, [ready, editorStyle]);
+    React2.useEffect(() => {
+      const view = currentView();
+      const wrapper = gutterWrapperRef.current;
+      if (!view || !wrapper || !ready) return;
+      const measure = () => {
+        const top = Math.max(
+          Math.round(
+            view.dom.getBoundingClientRect().top - wrapper.getBoundingClientRect().top
+          ),
+          0
+        );
+        setEditorTop((current) => current === top ? current : top);
+        const hovered = hoverBlockRef.current;
+        if (hovered?.isConnected) {
+          const next = Math.max(
+            Math.round(
+              hovered.getBoundingClientRect().top - wrapper.getBoundingClientRect().top
+            ),
+            top + 4
+          );
+          setGutterTop((current) => current === next ? current : next);
+        } else {
+          hoverBlockRef.current = null;
+          setGutterTop(top + 4);
+        }
+      };
+      measure();
+      const observer = new ResizeObserver(measure);
+      observer.observe(wrapper);
+      return () => observer.disconnect();
+    }, [ready, toolbarVisible]);
+    return /* @__PURE__ */ jsx(
+      "div",
+      {
+        ref: wrapperRef,
+        "data-slot": "textarea-rich",
+        "data-toolbar": toolbarVisible ? "visible" : "hidden",
+        "data-inert": inert ? "" : void 0,
+        "data-macros-open": hasMacros && macrosOpen ? "" : void 0,
+        "data-compact-macros": compactMacros ? "" : void 0,
+        "data-gutter": gutterActive ? "" : void 0,
+        "data-block-menu": blockMenuOpen ? "" : void 0,
+        className: cn(
+          "border-input rounded-lg border",
+          "transition-colors duration-200",
+          "focus-within:ring-ring focus-within:border-transparent focus-within:ring-2",
+          "flex flex-col",
+          disabled && "bg-muted/20",
+          className
+        ),
+        onFocus: hasMacros && macrosOnFocus ? () => setMacrosOpen(true) : void 0,
+        onBlur: hasMacros && macrosOnFocus ? (event) => {
+          const related = event.relatedTarget;
+          if (related && event.currentTarget.contains(related)) return;
+          let menu = related?.closest('[role="menu"]');
+          while (menu && menu.id) {
+            const trigger = document.querySelector(
+              `[aria-controls="${globalThis.CSS.escape(menu.id)}"]`
+            );
+            if (!trigger) break;
+            if (event.currentTarget.contains(trigger)) return;
+            menu = trigger.closest('[role="menu"]');
+          }
+          setMacrosOpen(false);
+        } : void 0,
+        children: /* @__PURE__ */ jsxs("div", { className: "relative flex min-h-0 flex-1 flex-col", children: [
+          /* @__PURE__ */ jsxs(
+            "div",
+            {
+              ref: gutterWrapperRef,
+              "data-slot": "textarea-rich-body",
+              className: cn("relative flex-1", "group/tar-body"),
+              onMouseMove: gutterActive ? handleGutterMouseMove : void 0,
+              children: [
+                gutterActive && // eslint-disable-next-line jsx-a11y/no-static-element-interactions -- mousedown here only guards editor focus (preventDefault); the real controls inside are native buttons.
+                /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    "data-slot": "textarea-rich-block-gutter",
+                    className: "absolute start-1 z-10",
+                    style: { top: gutterTop },
+                    onMouseDown: (event) => event.preventDefault(),
+                    children: /* @__PURE__ */ jsxs(
+                      Dropdown,
+                      {
+                        open: blockMenuOpen,
+                        onOpenChange: handleBlockMenuOpenChange,
+                        placement: "bottom-start",
+                        trigger: /* @__PURE__ */ jsx(
+                          Button,
+                          {
+                            type: "button",
+                            variant: "ghost",
+                            size: "sm",
+                            className: cn(
+                              "h-6 w-6 p-0",
+                              "opacity-0 transition-opacity",
+                              "group-hover/tar-body:opacity-100",
+                              "focus-visible:opacity-100",
+                              "[@media(hover:none)]:opacity-100",
+                              blockMenuOpen && "opacity-100"
+                            ),
+                            "aria-label": blockMenuLabels?.blockMenu ?? "Block menu",
+                            title: blockMenuLabels?.blockMenu ?? "Block menu",
+                            children: /* @__PURE__ */ jsx(Plus, { className: "h-4 w-4" })
+                          }
+                        ),
+                        children: [
+                          BLOCK_FORMAT_ITEMS.map((item, index) => /* @__PURE__ */ jsx(
+                            DropdownItem,
+                            {
+                              ref: index === 0 ? firstBlockItemRef : void 0,
+                              onClick: () => applyBlockFormat(item.command),
+                              children: blockMenuLabels?.[item.key] ?? item.label
+                            },
+                            item.key
+                          )),
+                          /* @__PURE__ */ jsx(DropdownSeparator, {}),
+                          hasMacros && macros && /* @__PURE__ */ jsxs(Fragment, { children: [
+                            /* @__PURE__ */ jsx(
+                              DropdownSubmenu,
+                              {
+                                label: blockMenuLabels?.insertMacro ?? "Insert macro",
+                                disabled: !hasMacroEntries,
+                                children: blockMenuOpen && macros.flatMap((group) => [
+                                  ...macros.length > 1 ? [
+                                    /* @__PURE__ */ jsx(DropdownLabel, { children: group.label }, `h:${group.id}`)
+                                  ] : [],
+                                  ...group.macros.map((macro) => /* @__PURE__ */ jsx(
+                                    DropdownItem,
+                                    {
+                                      className: "[&>[data-slot=dropdown-item-label]]:min-w-0 [&>[data-slot=dropdown-item-label]]:flex-1",
+                                      onClick: () => {
+                                        setBlockMenuOpen(false);
+                                        const view = currentView();
+                                        if (view) {
+                                          view.focus();
+                                          applyBlockTarget(view);
+                                        }
+                                        insertMacro(macro);
+                                      },
+                                      children: /* @__PURE__ */ jsxs("span", { className: "flex min-w-0 items-center gap-2", children: [
+                                        macro.shortcut && /* @__PURE__ */ jsx(
+                                          "span",
+                                          {
+                                            dir: "ltr",
+                                            className: "border-border bg-background text-muted-foreground rounded border px-1 font-mono text-[11px]",
+                                            children: macro.shortcut
+                                          }
+                                        ),
+                                        /* @__PURE__ */ jsx("span", { className: "min-w-0 flex-1 truncate", children: macro.label })
+                                      ] })
+                                    },
+                                    `m:${JSON.stringify([group.id, macro.id])}`
+                                  ))
+                                ])
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(
+                              DropdownItem,
+                              {
+                                onClick: () => {
+                                  setBlockMenuOpen(false);
+                                  setMacrosOpen(true);
+                                  focusEditor();
+                                },
+                                children: blockMenuLabels?.showMacroLibrary ?? "Show macro library"
+                              }
+                            ),
+                            /* @__PURE__ */ jsx(DropdownSeparator, {})
+                          ] }),
+                          /* @__PURE__ */ jsx(
+                            DropdownItem,
+                            {
+                              onClick: () => {
+                                setBlockMenuOpen(false);
+                                setToolbarVisibility(
+                                  toolbarVisible ? "hidden" : "visible"
+                                );
+                                focusEditor();
+                              },
+                              children: toolbarVisible ? blockMenuLabels?.hideToolbar ?? "Hide toolbar" : blockMenuLabels?.showToolbar ?? "Show toolbar"
+                            }
+                          )
+                        ]
+                      }
+                    )
+                  }
+                ),
+                isEmpty && placeholder && /* @__PURE__ */ jsx(
+                  "div",
+                  {
+                    "aria-hidden": "true",
+                    className: cn(
+                      "text-muted-foreground pointer-events-none absolute start-0 end-0 z-[1]",
+                      "truncate px-3 py-[7px]",
+                      "transition-[padding] duration-200 motion-reduce:transition-none",
+                      // Mirrors the editable's sliding gutter indent (permanent
+                      // on touch devices, where the + trigger is always visible).
+                      gutterActive && "group-focus-within/tar-body:ps-10 group-hover/tar-body:ps-10 [@media(hover:none)]:ps-10",
+                      gutterActive && blockMenuOpen && "ps-10",
+                      hasMacros && macrosOpen && "md:me-72",
+                      editorClassName
+                    ),
+                    style: {
+                      top: editorTop,
+                      // Match the editable's metrics by construction: the same
+                      // variables (inherited from the wrapper) with the same
+                      // kerebron.css fallbacks that size the .kb-editor rule.
+                      fontSize: "var(--textarea-rich-font-size, 1rem)",
+                      lineHeight: "var(--textarea-rich-line-height, 1.5rem)"
+                    },
+                    children: placeholder
+                  }
+                ),
+                /* @__PURE__ */ jsx(
+                  RichEditor,
+                  {
+                    ref: editorHandleRef,
+                    value,
+                    onChange: handleChange,
+                    valueType: "text/html",
+                    strictValue: true,
+                    modifyMenu: menuAddon.modifyMenu,
+                    editorKits: menuAddon.kits,
+                    onReady: handleReady,
+                    disabled,
+                    readOnly
+                  }
+                )
+              ]
+            }
+          ),
+          hasMacros && /* @__PURE__ */ jsx(AnimatedPresence, { children: macrosOpen && /* @__PURE__ */ jsx(
+            Animated,
+            {
+              preset: macroSidePanel ? "menu" : "collapse",
+              enabled: macroSidePanel || !prefersReducedMotion,
+              mode: "presence",
+              custom: direction === "rtl" ? "left" : "right",
+              fallbackClassName: "animate-fade-in",
+              className: "border-border flex max-h-72 flex-col overflow-hidden border-t md:absolute md:end-0 md:bottom-0 md:max-h-none md:w-72 md:overflow-visible md:border-s md:border-t-0",
+              style: { top: editorTop },
+              children: /* @__PURE__ */ jsx(
+                MacroLibrary,
+                {
+                  id: macroPanelId,
+                  groups: macros,
+                  onSelect: insertMacro,
+                  targetLabel: ariaLabel ?? placeholder,
+                  onClose: macrosOnFocus ? void 0 : () => {
+                    setMacrosOpen(false);
+                    focusEditor();
+                  },
+                  onCreateMacro,
+                  labels: macroLabels,
+                  compact: compactMacros,
+                  className: "min-h-0 flex-1"
+                }
+              )
+            },
+            "macro-panel"
+          ) })
+        ] })
+      }
+    );
+  }
+);
+TextAreaRichKerebron.displayName = "TextAreaRichKerebron";
+
+export { CodeEditor, TextAreaRichKerebron };
+//# sourceMappingURL=chunk-IALTKN3Y.js.map
+//# sourceMappingURL=chunk-IALTKN3Y.js.map