@lapismd/mira-react 0.0.1

package/dist/index.js

@@ -0,0 +1,2169 @@
+// src/mira.tsx
+import {
+  createMiraCodeMirrorExtensions,
+  createMiraEditorController,
+  openImageFilePicker
+} from "@lapismd/mira/core";
+import {
+  executeMiraCommand,
+  isMiraCommandEnabled,
+  mountMiraExtensionStyles,
+  resolveMiraExtensions
+} from "@lapismd/mira/extensions";
+import {
+  forwardRef,
+  useCallback,
+  useEffect as useEffect2,
+  useImperativeHandle,
+  useMemo,
+  useRef as useRef3,
+  useState
+} from "react";
+
+// src/hooks.ts
+import { useLayoutEffect, useRef } from "react";
+function useLatestRef(value) {
+  const ref = useRef(value);
+  useLayoutEffect(() => {
+    ref.current = value;
+  });
+  return ref;
+}
+function cx(...values) {
+  return values.filter(Boolean).join(" ");
+}
+
+// src/appearance.ts
+function normalizeMiraTheme(theme) {
+  return theme?.trim() ? theme : void 0;
+}
+function miraColorModeAttribute(colorMode) {
+  return colorMode === "inherit" ? void 0 : colorMode;
+}
+function miraColorModeClassName(colorMode) {
+  if (colorMode === "dark") return "dark theme-dark";
+  if (colorMode === "light") return "light theme-light";
+  return void 0;
+}
+
+// src/preview-host.tsx
+import { useEffect, useRef as useRef2 } from "react";
+import { mount, unmount } from "svelte";
+import { MarkdownOutline, MarkdownPreview } from "@lapismd/mira/preview";
+import { jsx, jsxs } from "react/jsx-runtime";
+function MarkdownPreviewHost({
+  assetResolver,
+  extensions = [],
+  fileAdapter,
+  frontmatterConfig,
+  frontmatterOpen = true,
+  headingIds = false,
+  headingIdPrefix = "",
+  htmlPolicy = "trusted",
+  emoji = false,
+  outline = false,
+  outlineVariant = "floating",
+  linkResolver,
+  onChange,
+  onFrontmatterChange,
+  sourcePath,
+  value
+}) {
+  const hostRef = useRef2(null);
+  const outlineRef = useRef2(null);
+  useEffect(() => {
+    if (!hostRef.current) {
+      return;
+    }
+    const component = mount(MarkdownPreview, {
+      target: hostRef.current,
+      props: {
+        assetResolver,
+        class: "markdown-reading-view",
+        extensions,
+        fileAdapter,
+        frontmatterConfig,
+        frontmatterOpen,
+        headingIds,
+        headingIdPrefix,
+        htmlPolicy,
+        emoji,
+        linkResolver,
+        onChange,
+        onFrontmatterChange,
+        sourcePath,
+        value
+      }
+    });
+    return () => {
+      unmount(component);
+    };
+  }, [
+    assetResolver,
+    extensions,
+    fileAdapter,
+    frontmatterConfig,
+    frontmatterOpen,
+    headingIds,
+    headingIdPrefix,
+    htmlPolicy,
+    emoji,
+    linkResolver,
+    onChange,
+    onFrontmatterChange,
+    sourcePath,
+    value
+  ]);
+  useEffect(() => {
+    if (!outline || !outlineRef.current) {
+      return;
+    }
+    const component = mount(MarkdownOutline, {
+      target: outlineRef.current,
+      props: {
+        headingIdPrefix,
+        root: hostRef.current,
+        variant: outlineVariant,
+        value
+      }
+    });
+    return () => {
+      unmount(component);
+    };
+  }, [headingIdPrefix, outline, outlineVariant, value]);
+  return /* @__PURE__ */ jsxs(
+    "div",
+    {
+      className: `mira-react-preview-host ${outline ? `mira-react-preview-host--outline-${outlineVariant}` : ""}`.trim(),
+      children: [
+        /* @__PURE__ */ jsx("div", { className: "mira-react-preview-host__preview", ref: hostRef }),
+        outline ? /* @__PURE__ */ jsx("div", { className: "mira-react-preview-host__outline", ref: outlineRef }) : null
+      ]
+    }
+  );
+}
+
+// src/mira.tsx
+import { jsx as jsx2, jsxs as jsxs2 } from "react/jsx-runtime";
+var defaultMode = "live-preview";
+var Mira = forwardRef(function Mira2({
+  assetResolver,
+  authoring,
+  className,
+  defaultMode: defaultModeProp = defaultMode,
+  defaultReadonly = false,
+  defaultValue = "",
+  extensions = [],
+  fileAdapter,
+  imageConfig,
+  frontmatterOpen = true,
+  frontmatterConfig,
+  headingIds = false,
+  headingIdPrefix = "",
+  htmlPolicy = "trusted",
+  emoji = false,
+  outline = false,
+  outlineVariant = "floating",
+  blockControls = false,
+  indentGuides = true,
+  indentWithTabs = true,
+  indentWidth = 4,
+  lineWrapping = true,
+  linkResolver,
+  mode: modeProp,
+  onChange,
+  onFrontmatterChange,
+  onModeChange,
+  onReadonlyChange,
+  placeholder = "Start writing Markdown...",
+  readonly: readonlyProp,
+  sourcePath,
+  spellcheck = true,
+  theme,
+  colorMode = "inherit",
+  toolbar = true,
+  value: valueProp
+}, ref) {
+  const editorHostRef = useRef3(null);
+  const previewPaneRef = useRef3(null);
+  const rootRef = useRef3(null);
+  const controllerRef = useRef3(null);
+  const cleanupExtensionMountsRef = useRef3([]);
+  const [uncontrolledValue, setUncontrolledValue] = useState(defaultValue);
+  const [uncontrolledMode, setUncontrolledMode] = useState(defaultModeProp);
+  const [uncontrolledReadonly, setUncontrolledReadonly] = useState(defaultReadonly);
+  const value = valueProp ?? uncontrolledValue;
+  const mode = modeProp ?? uncontrolledMode;
+  const readonly = readonlyProp ?? uncontrolledReadonly;
+  const valueRef = useLatestRef(value);
+  const modeRef = useLatestRef(mode);
+  const readonlyRef = useLatestRef(readonly);
+  const onChangeRef = useLatestRef(onChange);
+  const onModeChangeRef = useLatestRef(onModeChange);
+  const onReadonlyChangeRef = useLatestRef(onReadonlyChange);
+  const onFrontmatterChangeRef = useLatestRef(onFrontmatterChange);
+  const resolvedExtensions = useMemo(
+    () => resolveMiraExtensions(extensions, {
+      mode,
+      readonly,
+      sourcePath
+    }),
+    [extensions, mode, readonly, sourcePath]
+  );
+  const commitValue = useCallback(
+    (nextValue) => {
+      if (valueProp === void 0) {
+        setUncontrolledValue(nextValue);
+      }
+      onChangeRef.current?.(nextValue);
+    },
+    [onChangeRef, valueProp]
+  );
+  const setMode = useCallback(
+    (nextMode) => {
+      if (modeProp === void 0) {
+        setUncontrolledMode(nextMode);
+      }
+      onModeChangeRef.current?.(nextMode);
+    },
+    [modeProp, onModeChangeRef]
+  );
+  const setReadonly = useCallback(
+    (nextReadonly) => {
+      if (readonlyProp === void 0) {
+        setUncontrolledReadonly(nextReadonly);
+      }
+      onReadonlyChangeRef.current?.(nextReadonly);
+    },
+    [onReadonlyChangeRef, readonlyProp]
+  );
+  const handleInsertMarkdown = useCallback(
+    (markdown, selection) => {
+      const controller = controllerRef.current;
+      controller?.replaceSelection(markdown, selection);
+      controller?.focus();
+    },
+    []
+  );
+  const handleInsertImage = useCallback(() => {
+    const controller = controllerRef.current;
+    if (controller) {
+      openImageFilePicker(controller.view, imageConfig);
+    }
+  }, [imageConfig]);
+  const handleApplyMarkdownAction = useCallback(
+    (action) => {
+      if (readonlyRef.current || modeRef.current === "preview") {
+        return false;
+      }
+      return controllerRef.current?.applyMarkdownAction(action) ?? false;
+    },
+    [modeRef, readonlyRef]
+  );
+  const createExtensionRuntimeContext = useCallback(
+    (activeController = controllerRef.current, view = activeController?.view) => ({
+      view,
+      mode: modeRef.current,
+      readonly: readonlyRef.current,
+      sourcePath,
+      focus: () => activeController?.focus(),
+      getValue: () => activeController?.getValue() ?? valueRef.current,
+      insertImage: handleInsertImage,
+      insertMarkdown: handleInsertMarkdown,
+      setValue(nextValue) {
+        if (valueProp === void 0) {
+          setUncontrolledValue(nextValue);
+        }
+        activeController?.setValue(nextValue);
+      }
+    }),
+    [
+      handleInsertImage,
+      handleInsertMarkdown,
+      modeRef,
+      readonlyRef,
+      sourcePath,
+      valueProp,
+      valueRef
+    ]
+  );
+  const buildCodeMirrorExtensions = useCallback(() => {
+    return createMiraCodeMirrorExtensions({
+      mode: modeRef.current,
+      readonly: readonlyRef.current,
+      placeholder,
+      lineWrapping,
+      spellcheck,
+      blockControls,
+      indentGuides,
+      indentWithTabs,
+      indentWidth,
+      extensions,
+      sourcePath,
+      linkResolver,
+      assetResolver,
+      fileAdapter,
+      imageConfig,
+      authoring,
+      frontmatterOpen,
+      frontmatterConfig,
+      runtimeContext: (view) => createExtensionRuntimeContext(controllerRef.current, view),
+      onChange(replacement, from, to, nextValue) {
+        const controller = controllerRef.current;
+        if (controller) {
+          controller.view.dispatch({
+            changes: { from, insert: replacement, to }
+          });
+        } else {
+          commitValue(nextValue);
+        }
+      },
+      onFrontmatterChange: (...args) => onFrontmatterChangeRef.current?.(...args)
+    });
+  }, [
+    assetResolver,
+    authoring,
+    blockControls,
+    commitValue,
+    createExtensionRuntimeContext,
+    extensions,
+    fileAdapter,
+    frontmatterOpen,
+    frontmatterConfig,
+    indentGuides,
+    indentWithTabs,
+    indentWidth,
+    imageConfig,
+    lineWrapping,
+    linkResolver,
+    modeRef,
+    onFrontmatterChangeRef,
+    placeholder,
+    readonlyRef,
+    sourcePath,
+    spellcheck
+  ]);
+  const runExtensionMounts = useCallback(
+    (activeController) => {
+      for (const cleanup of cleanupExtensionMountsRef.current) {
+        cleanup();
+      }
+      cleanupExtensionMountsRef.current = [];
+      for (const mountExtension of resolvedExtensions.onMount) {
+        const cleanup = mountExtension(
+          createExtensionRuntimeContext(
+            activeController,
+            activeController.view
+          )
+        );
+        if (typeof cleanup === "function") {
+          cleanupExtensionMountsRef.current.push(cleanup);
+        }
+      }
+    },
+    [createExtensionRuntimeContext, resolvedExtensions.onMount]
+  );
+  const findCommand = useCallback(
+    (commandId) => {
+      for (let index = resolvedExtensions.commands.length - 1; index >= 0; index -= 1) {
+        const command = resolvedExtensions.commands[index];
+        if (command?.id === commandId) {
+          return command;
+        }
+      }
+      return void 0;
+    },
+    [resolvedExtensions.commands]
+  );
+  const isCommandEnabled = useCallback(
+    (commandId) => {
+      const command = findCommand(commandId);
+      return Boolean(
+        command && isMiraCommandEnabled(command, createExtensionRuntimeContext())
+      );
+    },
+    [createExtensionRuntimeContext, findCommand]
+  );
+  const executeCommand = useCallback(
+    (commandId) => executeMiraCommand(
+      resolvedExtensions.commands,
+      commandId,
+      createExtensionRuntimeContext()
+    ),
+    [createExtensionRuntimeContext, resolvedExtensions.commands]
+  );
+  useEffect2(() => {
+    if (!editorHostRef.current) {
+      return;
+    }
+    const activeController = createMiraEditorController({
+      codeMirrorExtensions: buildCodeMirrorExtensions(),
+      onChange(nextValue) {
+        commitValue(nextValue);
+      },
+      value
+    });
+    activeController.mount(editorHostRef.current);
+    controllerRef.current = activeController;
+    runExtensionMounts(activeController);
+    return () => {
+      for (const cleanup of cleanupExtensionMountsRef.current) {
+        cleanup();
+      }
+      cleanupExtensionMountsRef.current = [];
+      activeController.destroy();
+      controllerRef.current = null;
+    };
+  }, []);
+  useEffect2(() => {
+    const controller = controllerRef.current;
+    if (controller && value !== controller.getValue()) {
+      controller.setValue(value);
+    }
+  }, [value]);
+  useEffect2(
+    () => mountMiraExtensionStyles(resolvedExtensions.styles),
+    [resolvedExtensions.styles]
+  );
+  useEffect2(() => {
+    const controller = controllerRef.current;
+    if (!controller) {
+      return;
+    }
+    controller.update({
+      codeMirrorExtensions: buildCodeMirrorExtensions()
+    });
+    runExtensionMounts(controller);
+  }, [buildCodeMirrorExtensions, runExtensionMounts]);
+  const handlePreviewChange = useCallback(
+    (replacement, from, to) => {
+      const currentValue = valueRef.current;
+      const nextValue = `${currentValue.slice(0, from)}${replacement}${currentValue.slice(to)}`;
+      commitValue(nextValue);
+    },
+    [commitValue, valueRef]
+  );
+  useImperativeHandle(
+    ref,
+    () => ({
+      applyMarkdownAction: handleApplyMarkdownAction,
+      executeCommand,
+      focus() {
+        controllerRef.current?.focus();
+      },
+      getMarkdown() {
+        return controllerRef.current?.getValue() ?? valueRef.current;
+      },
+      getCommands() {
+        return resolvedExtensions.commands;
+      },
+      getMode() {
+        return modeRef.current;
+      },
+      getSelection() {
+        return controllerRef.current?.getSelection() ?? null;
+      },
+      insertMarkdown: handleInsertMarkdown,
+      insertImage: handleInsertImage,
+      isCommandEnabled,
+      setMarkdown(markdown) {
+        if (valueProp === void 0) {
+          setUncontrolledValue(markdown);
+        }
+        controllerRef.current?.setValue(markdown);
+      },
+      setMode,
+      setReadonly,
+      setSelection(selection) {
+        controllerRef.current?.setSelection(selection);
+      }
+    }),
+    [
+      handleInsertImage,
+      handleApplyMarkdownAction,
+      handleInsertMarkdown,
+      executeCommand,
+      isCommandEnabled,
+      modeRef,
+      resolvedExtensions.commands,
+      setMode,
+      setReadonly,
+      valueProp,
+      valueRef
+    ]
+  );
+  const showEditor = mode !== "preview";
+  const showPreview = mode === "preview" || mode === "split";
+  const themeAttribute = normalizeMiraTheme(theme);
+  const colorModeAttribute = miraColorModeAttribute(colorMode);
+  const colorModeClass = miraColorModeClassName(colorMode);
+  useEffect2(() => {
+    const controller = controllerRef.current;
+    const previewPane = previewPaneRef.current;
+    if (mode !== "split" || !controller || !previewPane) {
+      return;
+    }
+    return syncSplitScroll(controller.view.scrollDOM, previewPane);
+  }, [mode, showPreview]);
+  return /* @__PURE__ */ jsxs2(
+    "div",
+    {
+      className: cx("mira", colorModeClass, className),
+      "data-mira-theme": themeAttribute,
+      "data-mira-color-mode": colorModeAttribute,
+      "data-mode": mode,
+      "data-readonly": readonly,
+      ref: rootRef,
+      children: [
+        toolbar ? /* @__PURE__ */ jsxs2("div", { className: "mira__toolbar", "aria-label": "Markdown editor toolbar", children: [
+          /* @__PURE__ */ jsx2("div", { className: "mira-toggle-group", "aria-label": "Editor mode", children: ["source", "live-preview", "preview", "split"].map(
+            (modeOption) => /* @__PURE__ */ jsx2(
+              "button",
+              {
+                className: "mira-toggle-group__item",
+                "data-state": mode === modeOption ? "on" : "off",
+                onClick: () => setMode(modeOption),
+                type: "button",
+                children: modeOption === "live-preview" ? "Live" : modeOption
+              },
+              modeOption
+            )
+          ) }),
+          /* @__PURE__ */ jsx2("div", { className: "mira-separator--vertical mira__toolbar-separator" }),
+          /* @__PURE__ */ jsxs2("div", { className: "mira__actions", children: [
+            /* @__PURE__ */ jsx2(
+              "button",
+              {
+                className: "mira-ui-button mira-ui-button--ghost mira-ui-button--sm",
+                "aria-label": "Bold",
+                disabled: readonly || mode === "preview",
+                onClick: () => handleApplyMarkdownAction("bold"),
+                type: "button",
+                children: "B"
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              "button",
+              {
+                className: "mira-ui-button mira-ui-button--ghost mira-ui-button--sm",
+                "aria-label": "Italic",
+                disabled: readonly || mode === "preview",
+                onClick: () => handleApplyMarkdownAction("italic"),
+                type: "button",
+                children: "I"
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              "button",
+              {
+                className: "mira-ui-button mira-ui-button--ghost mira-ui-button--sm",
+                "aria-label": "Link",
+                disabled: readonly || mode === "preview",
+                onClick: () => handleApplyMarkdownAction("link"),
+                type: "button",
+                children: "Link"
+              }
+            ),
+            /* @__PURE__ */ jsx2(
+              "button",
+              {
+                className: "mira-ui-button mira-ui-button--ghost mira-ui-button--sm",
+                disabled: readonly || mode === "preview",
+                onClick: handleInsertImage,
+                type: "button",
+                children: "Image"
+              }
+            )
+          ] })
+        ] }) : null,
+        /* @__PURE__ */ jsxs2("div", { className: "mira__body", children: [
+          /* @__PURE__ */ jsx2(
+            "section",
+            {
+              "aria-hidden": showEditor ? "false" : "true",
+              className: cx(
+                "mira__pane mira__pane--editor markdown-editor-surface",
+                mode === "source" ? "markdown-view__editor--source markdown-source-mode" : "markdown-view__editor--live-preview markdown-live-preview-mode"
+              ),
+              "data-visible": showEditor,
+              children: /* @__PURE__ */ jsx2("div", { className: "mira__editor-host", ref: editorHostRef })
+            }
+          ),
+          showPreview ? /* @__PURE__ */ jsx2(
+            "section",
+            {
+              className: cx(
+                "mira__pane mira__pane--preview",
+                outline && outlineVariant === "floating" ? "mira__pane--outline-floating" : void 0
+              ),
+              ref: previewPaneRef,
+              children: /* @__PURE__ */ jsx2(
+                MarkdownPreviewHost,
+                {
+                  assetResolver,
+                  extensions,
+                  fileAdapter,
+                  frontmatterConfig,
+                  frontmatterOpen,
+                  headingIds: headingIds || outline,
+                  headingIdPrefix,
+                  htmlPolicy,
+                  emoji,
+                  outline,
+                  outlineVariant,
+                  linkResolver,
+                  onChange: handlePreviewChange,
+                  onFrontmatterChange,
+                  sourcePath,
+                  value
+                }
+              )
+            }
+          ) : null
+        ] })
+      ]
+    }
+  );
+});
+Mira.displayName = "Mira";
+function syncSplitScroll(editorScroller, previewPane) {
+  const previewScroller = previewPane.querySelector(".mira-markdown-preview") ?? previewPane;
+  let activeSource = null;
+  let releaseFrame = 0;
+  const sync = (source, target) => {
+    if (activeSource && activeSource !== source) {
+      return;
+    }
+    const sourceMax = source.scrollHeight - source.clientHeight;
+    const targetMax = target.scrollHeight - target.clientHeight;
+    if (sourceMax <= 0 || targetMax <= 0) {
+      return;
+    }
+    activeSource = source;
+    target.scrollTop = source.scrollTop / sourceMax * targetMax;
+    cancelAnimationFrame(releaseFrame);
+    releaseFrame = requestAnimationFrame(() => {
+      activeSource = null;
+    });
+  };
+  const syncPreview = () => sync(editorScroller, previewScroller);
+  const syncEditor = () => sync(previewScroller, editorScroller);
+  editorScroller.addEventListener("scroll", syncPreview, { passive: true });
+  previewScroller.addEventListener("scroll", syncEditor, { passive: true });
+  return () => {
+    cancelAnimationFrame(releaseFrame);
+    editorScroller.removeEventListener("scroll", syncPreview);
+    previewScroller.removeEventListener("scroll", syncEditor);
+  };
+}
+
+// src/mira-editor.tsx
+import {
+  forwardRef as forwardRef2,
+  useCallback as useCallback3,
+  useImperativeHandle as useImperativeHandle2,
+  useMemo as useMemo3,
+  useRef as useRef5,
+  useState as useState3
+} from "react";
+import { createRoot } from "react-dom/client";
+import {
+  Check as Check2,
+  Code as Code2,
+  Command,
+  Image as Image2,
+  Link as Link2,
+  Play,
+  RotateCcw,
+  Save,
+  Sparkles,
+  Table2 as Table22,
+  WandSparkles
+} from "lucide-react";
+import {
+  defineMiraExtension,
+  resolveMiraExtensions as resolveMiraExtensions2
+} from "@lapismd/mira/extensions";
+
+// src/mira-editor-toolbar.tsx
+import {
+  Bold,
+  BookOpen,
+  Braces,
+  Check,
+  Code,
+  CodeXml,
+  Columns2,
+  Ellipsis,
+  FileCode,
+  Heading1,
+  Image,
+  Italic,
+  Link,
+  List,
+  ListChecks,
+  ListOrdered,
+  PencilLine,
+  Quote,
+  Strikethrough,
+  Table2,
+  TableCellsSplit,
+  Workflow
+} from "lucide-react";
+import {
+  useCallback as useCallback2,
+  useEffect as useEffect3,
+  useMemo as useMemo2,
+  useRef as useRef4,
+  useState as useState2
+} from "react";
+import {
+  isMiraEditMode,
+  markdownActionForMiraToolbarItem,
+  miraEditorToolbarItemLabels,
+  miraViewOptionsLabel,
+  miraViewToggleLabel,
+  resolveMiraModeAfterSplit,
+  resolveMiraViewModeMenuItems,
+  resolveMiraViewToggleMode,
+  templateForMiraToolbarItem
+} from "@lapismd/mira-editor";
+
+// src/features.ts
+import { mermaidExtension } from "@lapismd/mira-plugin-mermaid";
+import {
+  resolveMiraEditorBlockControls as resolveBaseMiraEditorBlockControls,
+  resolveMiraEditorSlashCommands as resolveBaseMiraEditorSlashCommands
+} from "@lapismd/mira-editor";
+var MiraFeature = {
+  Toolbar: "toolbar",
+  ModeSwitch: "mode-switch",
+  Formatting: "formatting",
+  Headings: "headings",
+  Lists: "lists",
+  Links: "links",
+  Tables: "tables",
+  GridTables: "grid-tables",
+  Mermaid: "mermaid",
+  Code: "code",
+  Math: "math",
+  Frontmatter: "frontmatter",
+  Images: "images",
+  Embeds: "embeds",
+  Wikilinks: "wikilinks",
+  Tags: "tags",
+  SlashCommands: "slash-commands",
+  BlockControls: "block-controls",
+  SourceMode: "source-mode",
+  LivePreviewMode: "live-preview-mode",
+  PreviewMode: "preview-mode",
+  SplitMode: "split-mode"
+};
+var defaultMiraEditorFeatures = {
+  [MiraFeature.Toolbar]: true,
+  [MiraFeature.ModeSwitch]: true,
+  [MiraFeature.Formatting]: true,
+  [MiraFeature.Headings]: true,
+  [MiraFeature.Lists]: true,
+  [MiraFeature.Links]: true,
+  [MiraFeature.Tables]: true,
+  [MiraFeature.GridTables]: true,
+  [MiraFeature.Mermaid]: true,
+  [MiraFeature.Code]: true,
+  [MiraFeature.Math]: true,
+  [MiraFeature.Frontmatter]: true,
+  [MiraFeature.Images]: true,
+  [MiraFeature.Embeds]: true,
+  [MiraFeature.Wikilinks]: true,
+  [MiraFeature.Tags]: true,
+  [MiraFeature.SlashCommands]: true,
+  [MiraFeature.BlockControls]: true,
+  [MiraFeature.SourceMode]: true,
+  [MiraFeature.LivePreviewMode]: true,
+  [MiraFeature.PreviewMode]: true,
+  [MiraFeature.SplitMode]: true
+};
+var defaultMiraEditorEditMode = "live-preview";
+var defaultToolbarItems = [
+  "heading",
+  "bold",
+  "italic",
+  "strikethrough",
+  "inlineCode",
+  "quote",
+  "bulletList",
+  "numberedList",
+  "taskList",
+  "link",
+  "image",
+  "table",
+  "gridTable",
+  "code",
+  "math",
+  "mermaid"
+];
+function resolveMiraEditorFeatures(features = {}) {
+  return {
+    ...defaultMiraEditorFeatures,
+    ...features
+  };
+}
+function resolveMiraEditorBlockControls(options = {}) {
+  const blockConfig = options.featureConfigs?.[MiraFeature.BlockControls];
+  return resolveBaseMiraEditorBlockControls({
+    features: options.features,
+    featureConfigs: blockConfig ? {
+      [MiraFeature.BlockControls]: blockConfig
+    } : void 0
+  });
+}
+function createMiraEditorExtensions({
+  featureConfigs = {},
+  features = {}
+} = {}) {
+  const resolvedFeatures = resolveMiraEditorFeatures(features);
+  const extensions = [];
+  if (resolvedFeatures[MiraFeature.Mermaid] && featureConfigs[MiraFeature.Mermaid]?.enabled !== false) {
+    extensions.push(mermaidExtension());
+  }
+  if (resolvedFeatures[MiraFeature.SlashCommands]) {
+    const slashCommands = resolveMiraEditorSlashCommands({
+      featureConfigs,
+      features
+    });
+    if (slashCommands.length > 0) {
+      extensions.push({
+        name: "default-slash-commands",
+        slashCommands
+      });
+    }
+  }
+  return extensions;
+}
+function resolveMiraEditorSlashCommands({
+  featureConfigs = {},
+  features = {}
+} = {}) {
+  return resolveBaseMiraEditorSlashCommands({
+    featureConfigs,
+    features
+  });
+}
+function resolveMiraEditorToolbarItems({
+  featureConfigs = {},
+  features = {}
+} = {}) {
+  const resolvedFeatures = resolveMiraEditorFeatures(features);
+  const configuredItems = featureConfigs[MiraFeature.Toolbar]?.items ?? defaultToolbarItems;
+  return configuredItems.filter(
+    (item) => isToolbarItemAvailable(item, resolvedFeatures)
+  );
+}
+function resolveMiraEditorToolbarActions({
+  featureConfigs = {},
+  toolbarActions = []
+} = {}) {
+  return [
+    ...featureConfigs[MiraFeature.Toolbar]?.actions ?? [],
+    ...toolbarActions
+  ];
+}
+function resolveMiraEditorToolbarDefinitions({
+  featureConfigs = {},
+  toolbars = []
+} = {}) {
+  return [
+    ...featureConfigs[MiraFeature.Toolbar]?.toolbars ?? [],
+    ...toolbars
+  ];
+}
+function resolveMiraEditorModes(features = {}) {
+  const resolvedFeatures = resolveMiraEditorFeatures(features);
+  const modes = [];
+  if (resolvedFeatures[MiraFeature.SourceMode]) {
+    modes.push("source");
+  }
+  if (resolvedFeatures[MiraFeature.LivePreviewMode]) {
+    modes.push("live-preview");
+  }
+  if (resolvedFeatures[MiraFeature.PreviewMode]) {
+    modes.push("preview");
+  }
+  if (resolvedFeatures[MiraFeature.SplitMode]) {
+    modes.push("split");
+  }
+  return modes;
+}
+function resolveMiraEditorEditMode(defaultEditMode = defaultMiraEditorEditMode, modeOptions = resolveMiraEditorModes()) {
+  if (modeOptions.includes(defaultEditMode)) {
+    return defaultEditMode;
+  }
+  if (modeOptions.includes(defaultMiraEditorEditMode)) {
+    return defaultMiraEditorEditMode;
+  }
+  if (modeOptions.includes("source")) {
+    return "source";
+  }
+  return defaultMiraEditorEditMode;
+}
+function isToolbarItemAvailable(item, features) {
+  switch (item) {
+    case "bold":
+    case "italic":
+    case "strikethrough":
+      return features[MiraFeature.Formatting];
+    case "heading":
+      return features[MiraFeature.Headings];
+    case "quote":
+    case "bulletList":
+    case "numberedList":
+    case "taskList":
+      return features[MiraFeature.Lists];
+    case "link":
+      return features[MiraFeature.Links];
+    case "image":
+      return features[MiraFeature.Images];
+    case "table":
+      return features[MiraFeature.Tables];
+    case "gridTable":
+      return features[MiraFeature.GridTables];
+    case "mermaid":
+      return features[MiraFeature.Mermaid];
+    case "inlineCode":
+    case "code":
+      return features[MiraFeature.Code];
+    case "math":
+      return features[MiraFeature.Math];
+  }
+}
+
+// src/mira-editor-toolbar.tsx
+import { Fragment, jsx as jsx3, jsxs as jsxs3 } from "react/jsx-runtime";
+var modeIcons = {
+  source: FileCode,
+  "live-preview": PencilLine,
+  preview: BookOpen,
+  split: Columns2
+};
+var toolbarItemIcons = {
+  heading: Heading1,
+  bold: Bold,
+  italic: Italic,
+  strikethrough: Strikethrough,
+  inlineCode: CodeXml,
+  quote: Quote,
+  bulletList: List,
+  numberedList: ListOrdered,
+  taskList: ListChecks,
+  link: Link,
+  image: Image,
+  table: Table2,
+  gridTable: TableCellsSplit,
+  code: Code,
+  math: Braces,
+  mermaid: Workflow
+};
+function MiraEditorToolbar({
+  className,
+  context,
+  defaultEditMode = defaultMiraEditorEditMode,
+  featureConfigs = {},
+  features = {},
+  indentGuides = true,
+  indentWithTabs = true,
+  indentWidth = 4,
+  mode = "live-preview",
+  modeOptions: modeOptionsProp,
+  onIndentGuidesChange,
+  onIndentWidthChange,
+  onIndentWithTabsChange,
+  onInsertMarkdown,
+  onInsertImage,
+  onModeChange,
+  readonly = false,
+  showModeSwitch = true,
+  toolbarActions = [],
+  toolbars = [],
+  value = ""
+}) {
+  const rootRef = useRef4(null);
+  const [openMenu, setOpenMenu] = useState2(null);
+  const [lastNonSplitMode, setLastNonSplitMode] = useState2(defaultEditMode);
+  const [localIndentGuides, setLocalIndentGuides] = useState2(indentGuides);
+  const [localIndentWithTabs, setLocalIndentWithTabs] = useState2(indentWithTabs);
+  const [localIndentWidth, setLocalIndentWidth] = useState2(indentWidth);
+  const resolvedFeatures = useMemo2(
+    () => resolveMiraEditorFeatures(features),
+    [features]
+  );
+  const modeOptions = useMemo2(
+    () => modeOptionsProp ?? resolveMiraEditorModes(features),
+    [features, modeOptionsProp]
+  );
+  const toolbarItems = useMemo2(
+    () => resolveMiraEditorToolbarItems({ featureConfigs, features }),
+    [featureConfigs, features]
+  );
+  const customToolbarActions = useMemo2(
+    () => resolveMiraEditorToolbarActions({
+      featureConfigs,
+      toolbarActions
+    }).filter(hasTopToolbarPlacement),
+    [featureConfigs, toolbarActions]
+  );
+  const customToolbars = useMemo2(
+    () => resolveMiraEditorToolbarDefinitions({
+      featureConfigs,
+      toolbars
+    }).map((toolbar) => ({
+      ...toolbar,
+      items: toolbar.items.filter(hasTopToolbarPlacement)
+    })),
+    [featureConfigs, toolbars]
+  );
+  function hasTopToolbarPlacement(action) {
+    return action.type === "dropdown" || !action.placements || action.placements.includes("toolbar");
+  }
+  const startToolbars = useMemo2(
+    () => customToolbars.filter((toolbar) => toolbar.align !== "end"),
+    [customToolbars]
+  );
+  const endToolbars = useMemo2(
+    () => customToolbars.filter((toolbar) => toolbar.align === "end"),
+    [customToolbars]
+  );
+  const modeSwitchVisible = showModeSwitch && resolvedFeatures[MiraFeature.ModeSwitch] && modeOptions.length > 1;
+  const resolvedDefaultEditMode = useMemo2(
+    () => resolveMiraEditorEditMode(defaultEditMode, modeOptions),
+    [defaultEditMode, modeOptions]
+  );
+  const editModeOptions = useMemo2(
+    () => modeOptions.filter((modeOption) => isMiraEditMode(modeOption)),
+    [modeOptions]
+  );
+  const viewModeMenuItems = useMemo2(
+    () => resolveMiraViewModeMenuItems({
+      mode,
+      modeOptions,
+      resolvedDefaultEditMode
+    }).map((item) => ({
+      ...item,
+      icon: modeIcons[item.mode]
+    })),
+    [mode, modeOptions, resolvedDefaultEditMode]
+  );
+  const viewModeToggleVisible = modeSwitchVisible && modeOptions.includes("preview") && editModeOptions.length > 0;
+  const splitModeVisible = modeSwitchVisible && modeOptions.includes("split");
+  const editorSettingsMenuVisible = true;
+  const viewModeOverflowVisible = modeSwitchVisible && viewModeMenuItems.length > 0 || editorSettingsMenuVisible;
+  const toolbarHasStartContent = startToolbars.length > 0 || toolbarItems.length > 0 || customToolbarActions.length > 0;
+  const fallbackContext = useCallback2(
+    () => ({
+      focus: () => void 0,
+      getIndentGuides: () => localIndentGuides,
+      getIndentWidth: () => localIndentWidth,
+      getIndentWithTabs: () => localIndentWithTabs,
+      getMarkdown: () => value,
+      getMode: () => mode,
+      getSelection: () => null,
+      insertMarkdown(markdown) {
+        onInsertMarkdown?.(markdown);
+      },
+      insertImage() {
+        onInsertImage?.();
+      },
+      setIndentGuides(nextEnabled) {
+        setLocalIndentGuides(nextEnabled);
+        onIndentGuidesChange?.(nextEnabled);
+      },
+      setIndentWidth(nextWidth) {
+        setLocalIndentWidth(nextWidth);
+        onIndentWidthChange?.(nextWidth);
+      },
+      setIndentWithTabs(nextEnabled) {
+        setLocalIndentWithTabs(nextEnabled);
+        onIndentWithTabsChange?.(nextEnabled);
+      },
+      mode,
+      readonly,
+      setMarkdown: () => void 0,
+      setMode(nextMode) {
+        onModeChange?.(nextMode);
+      },
+      setReadonly: () => void 0,
+      setSelection: () => void 0,
+      value
+    }),
+    [
+      localIndentGuides,
+      localIndentWidth,
+      localIndentWithTabs,
+      mode,
+      onIndentGuidesChange,
+      onIndentWidthChange,
+      onIndentWithTabsChange,
+      onInsertImage,
+      onInsertMarkdown,
+      onModeChange,
+      readonly,
+      value
+    ]
+  );
+  const actionContext = useCallback2(
+    () => context ?? fallbackContext(),
+    [context, fallbackContext]
+  );
+  const runToolbarItem = useCallback2(
+    (item) => {
+      const activeContext = actionContext();
+      if (item === "image" && activeContext.insertImage) {
+        activeContext.insertImage();
+        return;
+      }
+      const action = markdownActionForMiraToolbarItem(item);
+      if (action && activeContext.applyMarkdownAction) {
+        activeContext.applyMarkdownAction(action);
+        return;
+      }
+      activeContext.insertMarkdown(templateForMiraToolbarItem(item));
+    },
+    [actionContext]
+  );
+  const dynamicBoolean = useCallback2(
+    (value2) => {
+      if (typeof value2 === "function") {
+        return value2(actionContext());
+      }
+      return value2 ?? false;
+    },
+    [actionContext]
+  );
+  const applyMode = useCallback2(
+    (nextMode) => {
+      if (!modeOptions.includes(nextMode)) {
+        return;
+      }
+      context?.setMode(nextMode);
+      onModeChange?.(nextMode);
+      setOpenMenu(null);
+    },
+    [context, modeOptions, onModeChange]
+  );
+  const getIndentGuidesSetting = useCallback2(
+    () => actionContext().getIndentGuides?.() ?? localIndentGuides,
+    [actionContext, localIndentGuides]
+  );
+  const getIndentWidthSetting = useCallback2(
+    () => actionContext().getIndentWidth?.() ?? localIndentWidth,
+    [actionContext, localIndentWidth]
+  );
+  const getIndentWithTabsSetting = useCallback2(
+    () => actionContext().getIndentWithTabs?.() ?? localIndentWithTabs,
+    [actionContext, localIndentWithTabs]
+  );
+  const setIndentGuidesSetting = useCallback2(
+    (nextEnabled) => {
+      const ctx = actionContext();
+      if (ctx.setIndentGuides) {
+        ctx.setIndentGuides(nextEnabled);
+      } else {
+        setLocalIndentGuides(nextEnabled);
+        onIndentGuidesChange?.(nextEnabled);
+      }
+    },
+    [actionContext, onIndentGuidesChange]
+  );
+  const setIndentWidthSetting = useCallback2(
+    (nextWidth) => {
+      const ctx = actionContext();
+      if (ctx.setIndentWidth) {
+        ctx.setIndentWidth(nextWidth);
+      } else {
+        setLocalIndentWidth(nextWidth);
+        onIndentWidthChange?.(nextWidth);
+      }
+    },
+    [actionContext, onIndentWidthChange]
+  );
+  const setIndentWithTabsSetting = useCallback2(
+    (nextEnabled) => {
+      const ctx = actionContext();
+      if (ctx.setIndentWithTabs) {
+        ctx.setIndentWithTabs(nextEnabled);
+      } else {
+        setLocalIndentWithTabs(nextEnabled);
+        onIndentWithTabsChange?.(nextEnabled);
+      }
+    },
+    [actionContext, onIndentWithTabsChange]
+  );
+  useEffect3(() => {
+    setLocalIndentGuides(indentGuides);
+  }, [indentGuides]);
+  useEffect3(() => {
+    setLocalIndentWithTabs(indentWithTabs);
+  }, [indentWithTabs]);
+  useEffect3(() => {
+    setLocalIndentWidth(indentWidth);
+  }, [indentWidth]);
+  const modeAfterSplit = useCallback2(() => {
+    return resolveMiraModeAfterSplit({
+      lastNonSplitMode,
+      modeOptions,
+      resolvedDefaultEditMode
+    });
+  }, [lastNonSplitMode, modeOptions, resolvedDefaultEditMode]);
+  const handleSplitMode = useCallback2(() => {
+    applyMode(mode === "split" ? modeAfterSplit() : "split");
+  }, [applyMode, mode, modeAfterSplit]);
+  useEffect3(() => {
+    if (mode !== "split" && modeOptions.includes(mode)) {
+      setLastNonSplitMode(mode);
+    }
+  }, [mode, modeOptions]);
+  useEffect3(() => {
+    if (!openMenu) {
+      return;
+    }
+    function handlePointerDown(event) {
+      if (!rootRef.current?.contains(event.target)) {
+        setOpenMenu(null);
+      }
+    }
+    function handleKeyDown(event) {
+      if (event.key === "Escape") {
+        setOpenMenu(null);
+      }
+    }
+    document.addEventListener("pointerdown", handlePointerDown);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", handlePointerDown);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [openMenu]);
+  const renderAction = useCallback2(
+    (action, align = "start") => {
+      if (isDropdownAction(action)) {
+        return /* @__PURE__ */ jsx3(
+          DropdownAction,
+          {
+            action,
+            align,
+            dynamicBoolean,
+            isOpen: openMenu === action.id,
+            menuItemIcon: (item) => menuItemIcon(item, dynamicBoolean),
+            onMenuItemRun: (item) => {
+              runMenuItem(item, actionContext, dynamicBoolean);
+              setOpenMenu(null);
+            },
+            onToggle: () => setOpenMenu(
+              (current) => current === action.id ? null : action.id
+            )
+          },
+          action.id
+        );
+      }
+      const Icon = action.icon;
+      return /* @__PURE__ */ jsx3(
+        "button",
+        {
+          "aria-label": action.label,
+          "aria-pressed": dynamicBoolean(action.pressed) ? "true" : void 0,
+          className: "mira-toolbar__button",
+          disabled: dynamicBoolean(action.disabled),
+          onClick: () => action.run(actionContext()),
+          title: action.tooltip ?? action.label,
+          type: "button",
+          children: /* @__PURE__ */ jsx3(Icon, { "aria-hidden": "true", className: "mira-editor__icon" })
+        },
+        action.id
+      );
+    },
+    [actionContext, dynamicBoolean, openMenu]
+  );
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      className: "mira-editor-toolbar__event-root",
+      ref: rootRef,
+      role: "presentation",
+      children: /* @__PURE__ */ jsxs3(
+        "div",
+        {
+          "aria-label": "Markdown editor toolbar",
+          className: cx(
+            "mira-toolbar mira-editor-toolbar mira-editor__toolbar",
+            className
+          ),
+          role: "toolbar",
+          children: [
+            startToolbars.map((toolbar) => /* @__PURE__ */ jsx3(ToolbarSection, { toolbar, children: toolbar.items.map((action) => renderAction(action)) }, toolbar.id)),
+            startToolbars.length > 0 ? /* @__PURE__ */ jsx3(Separator, {}) : null,
+            toolbarItems.length > 0 ? /* @__PURE__ */ jsx3(
+              "div",
+              {
+                "aria-label": "Insert",
+                className: "mira-editor__toolbar-section",
+                role: "group",
+                children: toolbarItems.map((item) => {
+                  const Icon = toolbarItemIcons[item];
+                  return /* @__PURE__ */ jsx3(
+                    "button",
+                    {
+                      "aria-label": miraEditorToolbarItemLabels[item],
+                      className: "mira-toolbar__button",
+                      disabled: readonly || mode === "preview",
+                      onClick: () => runToolbarItem(item),
+                      title: miraEditorToolbarItemLabels[item],
+                      type: "button",
+                      children: /* @__PURE__ */ jsx3(Icon, { "aria-hidden": "true", className: "mira-editor__icon" })
+                    },
+                    item
+                  );
+                })
+              }
+            ) : null,
+            customToolbarActions.length > 0 ? /* @__PURE__ */ jsxs3(Fragment, { children: [
+              toolbarItems.length > 0 ? /* @__PURE__ */ jsx3(Separator, {}) : null,
+              /* @__PURE__ */ jsx3(
+                "div",
+                {
+                  "aria-label": "Custom actions",
+                  className: "mira-editor__toolbar-section",
+                  role: "group",
+                  children: customToolbarActions.map((action) => renderAction(action))
+                }
+              )
+            ] }) : null,
+            /* @__PURE__ */ jsx3("div", { className: "mira-editor-toolbar__spacer" }),
+            endToolbars.map((toolbar) => /* @__PURE__ */ jsx3(ToolbarSection, { toolbar, children: toolbar.items.map((action) => renderAction(action, "end")) }, toolbar.id)),
+            viewModeToggleVisible || splitModeVisible || viewModeOverflowVisible ? /* @__PURE__ */ jsxs3(Fragment, { children: [
+              toolbarHasStartContent || endToolbars.length > 0 ? /* @__PURE__ */ jsx3(Separator, {}) : null,
+              /* @__PURE__ */ jsxs3(
+                "div",
+                {
+                  "aria-label": "View controls",
+                  className: "mira-editor__toolbar-section",
+                  role: "group",
+                  children: [
+                    viewModeToggleVisible ? /* @__PURE__ */ jsx3(
+                      ViewModeToggle,
+                      {
+                        mode,
+                        onApplyMode: applyMode,
+                        resolvedDefaultEditMode
+                      }
+                    ) : null,
+                    splitModeVisible ? /* @__PURE__ */ jsx3(
+                      "button",
+                      {
+                        "aria-label": "Split",
+                        "aria-pressed": mode === "split" ? "true" : void 0,
+                        className: "mira-toolbar__button",
+                        onClick: handleSplitMode,
+                        title: "Split",
+                        type: "button",
+                        children: /* @__PURE__ */ jsx3(Columns2, { "aria-hidden": "true", className: "mira-editor__icon" })
+                      }
+                    ) : null,
+                    viewModeOverflowVisible ? /* @__PURE__ */ jsx3(
+                      ViewModeDropdown,
+                      {
+                        getIndentGuides: getIndentGuidesSetting,
+                        getIndentWidth: getIndentWidthSetting,
+                        getIndentWithTabs: getIndentWithTabsSetting,
+                        items: viewModeMenuItems,
+                        isOpen: openMenu === "view-mode",
+                        onApplyMode: applyMode,
+                        onSetIndentGuides: setIndentGuidesSetting,
+                        onSetIndentWidth: setIndentWidthSetting,
+                        onSetIndentWithTabs: setIndentWithTabsSetting,
+                        onToggle: () => setOpenMenu(
+                          (current) => current === "view-mode" ? null : "view-mode"
+                        )
+                      }
+                    ) : null
+                  ]
+                }
+              )
+            ] }) : null
+          ]
+        }
+      )
+    }
+  );
+}
+function ToolbarSection({
+  children,
+  toolbar
+}) {
+  return /* @__PURE__ */ jsx3(
+    "div",
+    {
+      "aria-label": toolbar.label ?? toolbar.id,
+      className: "mira-editor__toolbar-section",
+      role: "group",
+      children
+    }
+  );
+}
+function Separator() {
+  return /* @__PURE__ */ jsx3("div", { className: "mira-separator--vertical mira-editor__separator" });
+}
+function DropdownAction({
+  action,
+  align,
+  dynamicBoolean,
+  isOpen,
+  menuItemIcon: resolveMenuItemIcon,
+  onMenuItemRun,
+  onToggle
+}) {
+  const Icon = action.icon;
+  return /* @__PURE__ */ jsxs3("div", { className: "mira-react-dropdown", children: [
+    /* @__PURE__ */ jsx3(
+      "button",
+      {
+        "aria-expanded": isOpen,
+        "aria-haspopup": "menu",
+        "aria-label": action.label,
+        className: "mira-toolbar__button",
+        disabled: dynamicBoolean(action.disabled),
+        onClick: onToggle,
+        title: action.tooltip ?? action.label,
+        type: "button",
+        children: /* @__PURE__ */ jsx3(Icon, { "aria-hidden": "true", className: "mira-editor__icon" })
+      }
+    ),
+    isOpen ? /* @__PURE__ */ jsx3(
+      "div",
+      {
+        className: cx(
+          "mira-react-dropdown__content",
+          align === "end" && "mira-react-dropdown__content--end"
+        ),
+        "data-slot": "dropdown-menu-content",
+        role: "menu",
+        children: action.items.map((item, index) => /* @__PURE__ */ jsx3(
+          MenuItem,
+          {
+            disabled: isMenuItemDisabled(item, dynamicBoolean),
+            icon: resolveMenuItemIcon(item),
+            item,
+            onRun: onMenuItemRun
+          },
+          menuItemKey(item, index)
+        ))
+      }
+    ) : null
+  ] });
+}
+function ViewModeToggle({
+  mode,
+  onApplyMode,
+  resolvedDefaultEditMode
+}) {
+  const isPreview = mode === "preview";
+  const Icon = isPreview ? PencilLine : BookOpen;
+  const label = miraViewToggleLabel(mode);
+  return /* @__PURE__ */ jsx3(
+    "button",
+    {
+      "aria-label": label,
+      className: "mira-toolbar__button",
+      onClick: () => onApplyMode(resolveMiraViewToggleMode(mode, resolvedDefaultEditMode)),
+      title: label,
+      type: "button",
+      children: /* @__PURE__ */ jsx3(Icon, { "aria-hidden": "true", className: "mira-editor__icon" })
+    }
+  );
+}
+function ViewModeDropdown({
+  getIndentGuides,
+  getIndentWidth,
+  getIndentWithTabs,
+  isOpen,
+  items,
+  onApplyMode,
+  onSetIndentGuides,
+  onSetIndentWidth,
+  onSetIndentWithTabs,
+  onToggle
+}) {
+  const tabSizeOptions = [2, 4, 8];
+  return /* @__PURE__ */ jsxs3("div", { className: "mira-react-dropdown", children: [
+    /* @__PURE__ */ jsx3(
+      "button",
+      {
+        "aria-expanded": isOpen,
+        "aria-haspopup": "menu",
+        "aria-label": miraViewOptionsLabel,
+        className: "mira-toolbar__button",
+        onClick: onToggle,
+        title: miraViewOptionsLabel,
+        type: "button",
+        children: /* @__PURE__ */ jsx3(Ellipsis, { "aria-hidden": "true", className: "mira-editor__icon" })
+      }
+    ),
+    isOpen ? /* @__PURE__ */ jsxs3(
+      "div",
+      {
+        className: "mira-react-dropdown__content mira-react-dropdown__content--end",
+        "data-slot": "dropdown-menu-content",
+        role: "menu",
+        children: [
+          items.map((item) => {
+            const Icon = item.icon;
+            return /* @__PURE__ */ jsxs3(
+              "button",
+              {
+                className: "mira-react-menu-button",
+                "data-slot": "dropdown-menu-item",
+                onClick: () => onApplyMode(item.mode),
+                role: "menuitem",
+                type: "button",
+                children: [
+                  /* @__PURE__ */ jsx3(
+                    Icon,
+                    {
+                      "aria-hidden": "true",
+                      className: "mira-editor-toolbar__menu-icon"
+                    }
+                  ),
+                  /* @__PURE__ */ jsx3("span", { children: item.label }),
+                  item.checked ? /* @__PURE__ */ jsx3(
+                    Check,
+                    {
+                      "aria-hidden": "true",
+                      className: "mira-editor-toolbar__menu-check"
+                    }
+                  ) : null
+                ]
+              },
+              item.mode
+            );
+          }),
+          items.length > 0 ? /* @__PURE__ */ jsx3("div", { "data-slot": "dropdown-menu-separator", role: "separator" }) : null,
+          /* @__PURE__ */ jsx3("div", { "data-slot": "dropdown-menu-label", children: "Editor" }),
+          /* @__PURE__ */ jsxs3(
+            "button",
+            {
+              className: "mira-react-menu-button",
+              "data-slot": "dropdown-menu-item",
+              onClick: () => onSetIndentGuides(!getIndentGuides()),
+              role: "menuitem",
+              type: "button",
+              children: [
+                getIndentGuides() ? /* @__PURE__ */ jsx3(
+                  Check,
+                  {
+                    "aria-hidden": "true",
+                    className: "mira-editor-toolbar__menu-icon"
+                  }
+                ) : null,
+                /* @__PURE__ */ jsx3("span", { children: "Indentation guides" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsxs3(
+            "button",
+            {
+              className: "mira-react-menu-button",
+              "data-slot": "dropdown-menu-item",
+              onClick: () => onSetIndentWithTabs(!getIndentWithTabs()),
+              role: "menuitem",
+              type: "button",
+              children: [
+                getIndentWithTabs() ? /* @__PURE__ */ jsx3(
+                  Check,
+                  {
+                    "aria-hidden": "true",
+                    className: "mira-editor-toolbar__menu-icon"
+                  }
+                ) : null,
+                /* @__PURE__ */ jsx3("span", { children: "Use tabs for indentation" })
+              ]
+            }
+          ),
+          /* @__PURE__ */ jsx3("div", { "data-slot": "dropdown-menu-separator", role: "separator" }),
+          /* @__PURE__ */ jsx3("div", { "data-slot": "dropdown-menu-label", children: "Tab size" }),
+          tabSizeOptions.map((size) => /* @__PURE__ */ jsxs3(
+            "button",
+            {
+              className: "mira-react-menu-button",
+              "data-slot": "dropdown-menu-item",
+              onClick: () => onSetIndentWidth(size),
+              role: "menuitem",
+              type: "button",
+              children: [
+                getIndentWidth() === size ? /* @__PURE__ */ jsx3(
+                  Check,
+                  {
+                    "aria-hidden": "true",
+                    className: "mira-editor-toolbar__menu-icon"
+                  }
+                ) : null,
+                /* @__PURE__ */ jsxs3("span", { children: [
+                  size,
+                  " spaces"
+                ] })
+              ]
+            },
+            size
+          ))
+        ]
+      }
+    ) : null
+  ] });
+}
+function MenuItem({
+  disabled,
+  icon: Icon,
+  item,
+  onRun
+}) {
+  if (item.type === "separator") {
+    return /* @__PURE__ */ jsx3("div", { "data-slot": "dropdown-menu-separator", role: "separator" });
+  }
+  if (item.type === "label") {
+    return /* @__PURE__ */ jsx3("div", { "data-slot": "dropdown-menu-label", children: item.label });
+  }
+  return /* @__PURE__ */ jsxs3(
+    "button",
+    {
+      className: "mira-react-menu-button",
+      "data-disabled": disabled ? "" : void 0,
+      "data-slot": "dropdown-menu-item",
+      disabled,
+      onClick: () => onRun(item),
+      role: "menuitem",
+      type: "button",
+      children: [
+        Icon ? /* @__PURE__ */ jsx3(Icon, { "aria-hidden": "true", className: "mira-editor-toolbar__menu-icon" }) : null,
+        /* @__PURE__ */ jsx3("span", { children: item.label }),
+        item.shortcut ? /* @__PURE__ */ jsx3("span", { "data-slot": "dropdown-menu-shortcut", children: item.shortcut }) : null
+      ]
+    }
+  );
+}
+function isDropdownAction(action) {
+  return action.type === "dropdown";
+}
+function menuItemKey(item, index) {
+  const fallback = item.type === "separator" ? index : item.label;
+  return `${item.type ?? "item"}-${item.id ?? fallback}`;
+}
+function isMenuItemDisabled(item, dynamicBoolean) {
+  return item.type !== "label" && item.type !== "separator" && dynamicBoolean(item.disabled);
+}
+function isMenuItemChecked(item, dynamicBoolean) {
+  return item.type !== "label" && item.type !== "separator" && dynamicBoolean(item.checked);
+}
+function menuItemIcon(item, dynamicBoolean) {
+  if (item.type === "label" || item.type === "separator") {
+    return void 0;
+  }
+  return item.icon ?? (isMenuItemChecked(item, dynamicBoolean) ? Check : void 0);
+}
+function runMenuItem(item, actionContext, dynamicBoolean) {
+  if (item.type === "label" || item.type === "separator" || isMenuItemDisabled(item, dynamicBoolean)) {
+    return;
+  }
+  item.run(actionContext());
+}
+
+// src/mira-editor.tsx
+import { jsx as jsx4, jsxs as jsxs4 } from "react/jsx-runtime";
+var extensionToolbarIcons = {
+  check: Check2,
+  code: Code2,
+  command: Command,
+  image: Image2,
+  link: Link2,
+  play: Play,
+  "rotate-ccw": RotateCcw,
+  save: Save,
+  sparkles: Sparkles,
+  table: Table22,
+  "wand-sparkles": WandSparkles
+};
+function isBlockMenuButton(action) {
+  return action.type !== "dropdown" && action.placements?.includes("block-menu") === true;
+}
+var MiraEditor = forwardRef2(
+  function MiraEditor2({
+    assetResolver,
+    authoring,
+    className,
+    defaultEditMode = defaultMiraEditorEditMode,
+    defaultMode: defaultMode2 = defaultEditMode,
+    defaultReadonly = false,
+    defaultValue = "",
+    editorClassName,
+    extensions = [],
+    fileAdapter,
+    imageConfig,
+    featureConfigs = {},
+    features = {},
+    frontmatterConfig,
+    frontmatterOpen = true,
+    headingIds = false,
+    headingIdPrefix = "",
+    htmlPolicy = "trusted",
+    emoji = false,
+    outline = false,
+    outlineVariant = "floating",
+    indentGuides: indentGuidesProp,
+    indentWithTabs: indentWithTabsProp,
+    indentWidth: indentWidthProp,
+    lineWrapping = true,
+    linkResolver,
+    mode: modeProp,
+    onChange,
+    onFrontmatterChange,
+    onIndentGuidesChange,
+    onIndentWidthChange,
+    onIndentWithTabsChange,
+    onModeChange,
+    onReadonlyChange,
+    placeholder = "Start writing Markdown...",
+    readonly: readonlyProp,
+    sourcePath,
+    spellcheck = true,
+    theme,
+    colorMode = "inherit",
+    toolbarActions = [],
+    toolbars = [],
+    value: valueProp
+  }, ref) {
+    const editorRef = useRef5(null);
+    const toolbarContextRef = useRef5(
+      null
+    );
+    const [uncontrolledValue, setUncontrolledValue] = useState3(defaultValue);
+    const [uncontrolledMode, setUncontrolledMode] = useState3(defaultMode2);
+    const [uncontrolledReadonly, setUncontrolledReadonly] = useState3(defaultReadonly);
+    const [uncontrolledIndentGuides, setUncontrolledIndentGuides] = useState3(true);
+    const [uncontrolledIndentWithTabs, setUncontrolledIndentWithTabs] = useState3(true);
+    const [uncontrolledIndentWidth, setUncontrolledIndentWidth] = useState3(4);
+    const value = valueProp ?? uncontrolledValue;
+    const mode = modeProp ?? uncontrolledMode;
+    const readonly = readonlyProp ?? uncontrolledReadonly;
+    const indentGuides = indentGuidesProp ?? uncontrolledIndentGuides;
+    const indentWithTabs = indentWithTabsProp ?? uncontrolledIndentWithTabs;
+    const indentWidth = indentWidthProp ?? uncontrolledIndentWidth;
+    const resolvedFeatures = useMemo3(
+      () => resolveMiraEditorFeatures(features),
+      [features]
+    );
+    const modeOptions = useMemo3(
+      () => resolveMiraEditorModes(features),
+      [features]
+    );
+    const resolvedDefaultEditMode = useMemo3(
+      () => resolveMiraEditorEditMode(defaultEditMode, modeOptions),
+      [defaultEditMode, modeOptions]
+    );
+    const frameworkBlockMenuActions = useMemo3(
+      () => [
+        ...resolveMiraEditorToolbarActions({
+          featureConfigs,
+          toolbarActions
+        }).filter(isBlockMenuButton).map((action) => ({ action, group: action.group ?? "Actions" })),
+        ...resolveMiraEditorToolbarDefinitions({
+          featureConfigs,
+          toolbars
+        }).flatMap(
+          (toolbar) => toolbar.items.filter(isBlockMenuButton).map((action) => ({
+            action,
+            group: action.group ?? toolbar.label ?? "Actions"
+          }))
+        )
+      ],
+      [featureConfigs, toolbarActions, toolbars]
+    );
+    const frameworkBlockMenuExtension = useMemo3(
+      () => frameworkBlockMenuActions.length > 0 ? defineMiraExtension({
+        name: "mira-editor-react-block-menu-actions",
+        blockActions: frameworkBlockMenuActions.map(
+          ({ action, group }) => ({
+            id: `mira-editor-${action.id}`,
+            label: action.label,
+            group,
+            placements: ["block-menu"],
+            shortcut: action.shortcut,
+            disabled(context) {
+              const base = toolbarContextRef.current;
+              if (!base) {
+                return true;
+              }
+              const disabled = action.disabled;
+              const actionContext = createBlockToolbarActionContext(
+                base,
+                context
+              );
+              return typeof disabled === "function" ? disabled(actionContext) : disabled ?? false;
+            },
+            renderIcon(target) {
+              const root = createRoot(target);
+              const Icon = action.icon;
+              root.render(
+                /* @__PURE__ */ jsx4(Icon, { "aria-hidden": "true", className: "mira-editor__icon" })
+              );
+              return () => root.unmount();
+            },
+            run(context) {
+              const base = toolbarContextRef.current;
+              if (base) {
+                action.run(
+                  createBlockToolbarActionContext(base, context)
+                );
+              }
+            }
+          })
+        )
+      }) : null,
+      [frameworkBlockMenuActions]
+    );
+    const activeExtensions = useMemo3(
+      () => [
+        ...createMiraEditorExtensions({ featureConfigs, features }),
+        ...frameworkBlockMenuExtension ? [frameworkBlockMenuExtension] : [],
+        ...extensions
+      ],
+      [extensions, featureConfigs, features, frameworkBlockMenuExtension]
+    );
+    const blockControls = useMemo3(
+      () => resolveMiraEditorBlockControls({ featureConfigs, features }),
+      [featureConfigs, features]
+    );
+    const resolvedExtensionContributions = useMemo3(
+      () => resolveMiraExtensions2(activeExtensions, {
+        mode,
+        readonly,
+        sourcePath
+      }),
+      [activeExtensions, mode, readonly, sourcePath]
+    );
+    const extensionToolbars = useMemo3(() => {
+      const groups = /* @__PURE__ */ new Map();
+      for (const item of resolvedExtensionContributions.toolbarItems) {
+        if (item.placements && !item.placements.includes("toolbar")) {
+          continue;
+        }
+        const align = item.align ?? "start";
+        const label = item.group ?? "Extensions";
+        const key = `${align}:${label}`;
+        let group = groups.get(key);
+        if (!group) {
+          group = {
+            id: `extension-${slugify(label)}-${align}`,
+            label,
+            align,
+            items: []
+          };
+          groups.set(key, group);
+        }
+        const Icon = extensionToolbarIcons[item.icon ?? "command"] ?? Command;
+        group.items.push({
+          id: `extension-${item.id}`,
+          label: item.label,
+          tooltip: item.tooltip,
+          icon: Icon,
+          disabled: () => editorRef.current ? !editorRef.current.isCommandEnabled(item.command) : false,
+          run: () => {
+            editorRef.current?.executeCommand(item.command);
+          }
+        });
+      }
+      return [...groups.values()];
+    }, [resolvedExtensionContributions.toolbarItems]);
+    const handleChange = useCallback3(
+      (nextValue) => {
+        if (valueProp === void 0) {
+          setUncontrolledValue(nextValue);
+        }
+        onChange?.(nextValue);
+      },
+      [onChange, valueProp]
+    );
+    const applyMode = useCallback3(
+      (nextMode) => {
+        if (!modeOptions.includes(nextMode)) {
+          return;
+        }
+        if (modeProp === void 0) {
+          setUncontrolledMode(nextMode);
+        }
+        onModeChange?.(nextMode);
+      },
+      [modeOptions, modeProp, onModeChange]
+    );
+    const applyReadonly = useCallback3(
+      (nextReadonly) => {
+        if (readonlyProp === void 0) {
+          setUncontrolledReadonly(nextReadonly);
+        }
+        onReadonlyChange?.(nextReadonly);
+      },
+      [onReadonlyChange, readonlyProp]
+    );
+    const applyIndentGuides = useCallback3(
+      (nextEnabled) => {
+        if (indentGuidesProp === void 0) {
+          setUncontrolledIndentGuides(nextEnabled);
+        }
+        onIndentGuidesChange?.(nextEnabled);
+      },
+      [indentGuidesProp, onIndentGuidesChange]
+    );
+    const applyIndentWithTabs = useCallback3(
+      (nextEnabled) => {
+        if (indentWithTabsProp === void 0) {
+          setUncontrolledIndentWithTabs(nextEnabled);
+        }
+        onIndentWithTabsChange?.(nextEnabled);
+      },
+      [indentWithTabsProp, onIndentWithTabsChange]
+    );
+    const applyIndentWidth = useCallback3(
+      (nextWidth) => {
+        if (indentWidthProp === void 0) {
+          setUncontrolledIndentWidth(nextWidth);
+        }
+        onIndentWidthChange?.(nextWidth);
+      },
+      [indentWidthProp, onIndentWidthChange]
+    );
+    const handleSetMarkdown = useCallback3(
+      (markdown) => {
+        if (valueProp === void 0) {
+          setUncontrolledValue(markdown);
+        }
+        editorRef.current?.setMarkdown(markdown);
+      },
+      [valueProp]
+    );
+    const handleSetMode = useCallback3(
+      (nextMode) => {
+        applyMode(nextMode);
+        editorRef.current?.setMode(nextMode);
+      },
+      [applyMode]
+    );
+    const handleSetReadonly = useCallback3(
+      (nextReadonly) => {
+        applyReadonly(nextReadonly);
+        editorRef.current?.setReadonly(nextReadonly);
+      },
+      [applyReadonly]
+    );
+    const toolbarContext = useMemo3(
+      () => ({
+        applyMarkdownAction: (action) => editorRef.current?.applyMarkdownAction(action) ?? false,
+        focus: () => editorRef.current?.focus(),
+        getIndentGuides: () => indentGuides,
+        getIndentWidth: () => indentWidth,
+        getIndentWithTabs: () => indentWithTabs,
+        getMarkdown: () => editorRef.current?.getMarkdown() ?? value,
+        getMode: () => editorRef.current?.getMode() ?? mode,
+        getSelection: () => editorRef.current?.getSelection() ?? null,
+        insertImage: () => editorRef.current?.insertImage(),
+        insertMarkdown: (markdown) => editorRef.current?.insertMarkdown(markdown),
+        mode,
+        readonly,
+        setIndentGuides: applyIndentGuides,
+        setIndentWidth: applyIndentWidth,
+        setIndentWithTabs: applyIndentWithTabs,
+        setMarkdown: handleSetMarkdown,
+        setMode: handleSetMode,
+        setReadonly: handleSetReadonly,
+        setSelection: (selection) => editorRef.current?.setSelection(selection),
+        value
+      }),
+      [
+        handleSetMarkdown,
+        handleSetMode,
+        handleSetReadonly,
+        applyIndentGuides,
+        applyIndentWidth,
+        applyIndentWithTabs,
+        indentGuides,
+        indentWidth,
+        indentWithTabs,
+        mode,
+        readonly,
+        value
+      ]
+    );
+    toolbarContextRef.current = toolbarContext;
+    useImperativeHandle2(
+      ref,
+      () => ({
+        applyMarkdownAction(action) {
+          if (readonly || mode === "preview") {
+            return false;
+          }
+          return editorRef.current?.applyMarkdownAction(action) ?? false;
+        },
+        executeCommand(commandId) {
+          return editorRef.current?.executeCommand(commandId) ?? false;
+        },
+        focus() {
+          editorRef.current?.focus();
+        },
+        getMarkdown() {
+          return editorRef.current?.getMarkdown() ?? value;
+        },
+        getCommands() {
+          return editorRef.current?.getCommands() ?? resolvedExtensionContributions.commands;
+        },
+        getMode() {
+          return editorRef.current?.getMode() ?? mode;
+        },
+        getSelection() {
+          return editorRef.current?.getSelection() ?? null;
+        },
+        insertMarkdown(markdown) {
+          editorRef.current?.insertMarkdown(markdown);
+        },
+        insertImage() {
+          editorRef.current?.insertImage();
+        },
+        isCommandEnabled(commandId) {
+          return editorRef.current?.isCommandEnabled(commandId) ?? false;
+        },
+        setMarkdown: handleSetMarkdown,
+        setMode: handleSetMode,
+        setReadonly: handleSetReadonly,
+        setSelection(selection) {
+          editorRef.current?.setSelection(selection);
+        }
+      }),
+      [
+        handleSetMarkdown,
+        handleSetMode,
+        handleSetReadonly,
+        mode,
+        readonly,
+        resolvedExtensionContributions.commands,
+        value
+      ]
+    );
+    return /* @__PURE__ */ jsxs4(
+      "div",
+      {
+        className: cx(
+          "mira-editor",
+          miraColorModeClassName(colorMode),
+          className
+        ),
+        "data-mira-theme": normalizeMiraTheme(theme),
+        "data-mira-color-mode": miraColorModeAttribute(colorMode),
+        "data-mode": mode,
+        "data-readonly": readonly,
+        children: [
+          resolvedFeatures[MiraFeature.Toolbar] ? /* @__PURE__ */ jsx4(
+            MiraEditorToolbar,
+            {
+              context: toolbarContext,
+              defaultEditMode: resolvedDefaultEditMode,
+              featureConfigs,
+              features,
+              indentGuides,
+              indentWidth,
+              indentWithTabs,
+              mode,
+              modeOptions,
+              onIndentGuidesChange: applyIndentGuides,
+              onIndentWidthChange: applyIndentWidth,
+              onIndentWithTabsChange: applyIndentWithTabs,
+              readonly,
+              toolbarActions,
+              toolbars: [...extensionToolbars, ...toolbars],
+              value
+            }
+          ) : null,
+          /* @__PURE__ */ jsx4("div", { className: "mira-editor__editor", children: /* @__PURE__ */ jsx4(
+            Mira,
+            {
+              assetResolver,
+              authoring,
+              blockControls,
+              className: editorClassName,
+              defaultMode: defaultMode2,
+              defaultReadonly,
+              defaultValue,
+              extensions: activeExtensions,
+              fileAdapter,
+              imageConfig,
+              frontmatterConfig,
+              frontmatterOpen: resolvedFeatures[MiraFeature.Frontmatter] && frontmatterOpen,
+              headingIds,
+              headingIdPrefix,
+              htmlPolicy,
+              emoji,
+              outline,
+              outlineVariant,
+              indentGuides,
+              indentWidth,
+              indentWithTabs,
+              lineWrapping,
+              linkResolver,
+              mode,
+              onChange: handleChange,
+              onFrontmatterChange,
+              onModeChange: applyMode,
+              onReadonlyChange: applyReadonly,
+              placeholder,
+              readonly,
+              ref: editorRef,
+              sourcePath,
+              spellcheck,
+              theme,
+              colorMode,
+              toolbar: false,
+              value
+            }
+          ) })
+        ]
+      }
+    );
+  }
+);
+MiraEditor.displayName = "MiraEditor";
+function createBlockToolbarActionContext(base, context) {
+  return {
+    ...base,
+    block: context.block,
+    blocks: context.blocks,
+    handle: context.handle,
+    affectedRange: context.affectedRange,
+    replaceRange: context.replaceRange
+  };
+}
+function slugify(value) {
+  return value.toLowerCase().replace(/[^a-z0-9]+/g, "-").replace(/(^-|-$)/g, "") || "extensions";
+}
+
+// src/index.ts
+var index_default = Mira;
+export {
+  Mira,
+  MiraEditor,
+  MiraEditorToolbar,
+  MiraFeature,
+  createMiraEditorExtensions,
+  index_default as default,
+  defaultMiraEditorEditMode,
+  defaultMiraEditorFeatures,
+  resolveMiraEditorBlockControls,
+  resolveMiraEditorEditMode,
+  resolveMiraEditorFeatures,
+  resolveMiraEditorModes,
+  resolveMiraEditorSlashCommands,
+  resolveMiraEditorToolbarActions,
+  resolveMiraEditorToolbarDefinitions,
+  resolveMiraEditorToolbarItems
+};