overtype 2.1.0 → 2.1.1

package/dist/overtype-webcomponent.esm.js

@@ -1,5 +1,5 @@
 /**
- * OverType v2.0.6
+ * OverType v2.1.0
  * A lightweight markdown editor library with perfect WYSIWYG alignment
  * @license MIT
  * @author David Miranda
@@ -733,1968 +733,1926 @@ __publicField(MarkdownParser, "LIST_PATTERNS", {
   checkbox: /^(\s*)-\s+\[([ x])\]\s+(.*)$/
 });
 
-// node_modules/markdown-actions/dist/markdown-actions.esm.js
-var __defProp2 = Object.defineProperty;
-var __getOwnPropSymbols = Object.getOwnPropertySymbols;
-var __hasOwnProp = Object.prototype.hasOwnProperty;
-var __propIsEnum = Object.prototype.propertyIsEnumerable;
-var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
-var __spreadValues = (a, b) => {
-  for (var prop in b || (b = {}))
-    if (__hasOwnProp.call(b, prop))
-      __defNormalProp2(a, prop, b[prop]);
-  if (__getOwnPropSymbols)
-    for (var prop of __getOwnPropSymbols(b)) {
-      if (__propIsEnum.call(b, prop))
-        __defNormalProp2(a, prop, b[prop]);
-    }
-  return a;
-};
-var FORMATS = {
-  bold: {
-    prefix: "**",
-    suffix: "**",
-    trimFirst: true
-  },
-  italic: {
-    prefix: "_",
-    suffix: "_",
-    trimFirst: true
-  },
-  code: {
-    prefix: "`",
-    suffix: "`",
-    blockPrefix: "```",
-    blockSuffix: "```"
-  },
-  link: {
-    prefix: "[",
-    suffix: "](url)",
-    replaceNext: "url",
-    scanFor: "https?://"
-  },
-  bulletList: {
-    prefix: "- ",
-    multiline: true,
-    unorderedList: true
-  },
-  numberedList: {
-    prefix: "1. ",
-    multiline: true,
-    orderedList: true
-  },
-  quote: {
-    prefix: "> ",
-    multiline: true,
-    surroundWithNewlines: true
-  },
-  taskList: {
-    prefix: "- [ ] ",
-    multiline: true,
-    surroundWithNewlines: true
-  },
-  header1: { prefix: "# " },
-  header2: { prefix: "## " },
-  header3: { prefix: "### " },
-  header4: { prefix: "#### " },
-  header5: { prefix: "##### " },
-  header6: { prefix: "###### " }
-};
-function getDefaultStyle() {
-  return {
-    prefix: "",
-    suffix: "",
-    blockPrefix: "",
-    blockSuffix: "",
-    multiline: false,
-    replaceNext: "",
-    prefixSpace: false,
-    scanFor: "",
-    surroundWithNewlines: false,
-    orderedList: false,
-    unorderedList: false,
-    trimFirst: false
-  };
-}
-function mergeWithDefaults(format) {
-  return __spreadValues(__spreadValues({}, getDefaultStyle()), format);
-}
-var debugMode = false;
-function getDebugMode() {
-  return debugMode;
-}
-function debugLog(funcName, message, data) {
-  if (!debugMode)
-    return;
-  console.group(`\u{1F50D} ${funcName}`);
-  console.log(message);
-  if (data) {
-    console.log("Data:", data);
-  }
-  console.groupEnd();
-}
-function debugSelection(textarea, label) {
-  if (!debugMode)
-    return;
-  const selected = textarea.value.slice(textarea.selectionStart, textarea.selectionEnd);
-  console.group(`\u{1F4CD} Selection: ${label}`);
-  console.log("Position:", `${textarea.selectionStart}-${textarea.selectionEnd}`);
-  console.log("Selected text:", JSON.stringify(selected));
-  console.log("Length:", selected.length);
-  const before = textarea.value.slice(Math.max(0, textarea.selectionStart - 10), textarea.selectionStart);
-  const after = textarea.value.slice(textarea.selectionEnd, Math.min(textarea.value.length, textarea.selectionEnd + 10));
-  console.log("Context:", JSON.stringify(before) + "[SELECTION]" + JSON.stringify(after));
-  console.groupEnd();
-}
-function debugResult(result) {
-  if (!debugMode)
-    return;
-  console.group("\u{1F4DD} Result");
-  console.log("Text to insert:", JSON.stringify(result.text));
-  console.log("New selection:", `${result.selectionStart}-${result.selectionEnd}`);
-  console.groupEnd();
-}
-var canInsertText = null;
-function insertText(textarea, { text, selectionStart, selectionEnd }) {
-  const debugMode2 = getDebugMode();
-  if (debugMode2) {
-    console.group("\u{1F527} insertText");
-    console.log("Current selection:", `${textarea.selectionStart}-${textarea.selectionEnd}`);
-    console.log("Text to insert:", JSON.stringify(text));
-    console.log("New selection to set:", selectionStart, "-", selectionEnd);
-  }
-  textarea.focus();
-  const originalSelectionStart = textarea.selectionStart;
-  const originalSelectionEnd = textarea.selectionEnd;
-  const before = textarea.value.slice(0, originalSelectionStart);
-  const after = textarea.value.slice(originalSelectionEnd);
-  if (debugMode2) {
-    console.log("Before text (last 20):", JSON.stringify(before.slice(-20)));
-    console.log("After text (first 20):", JSON.stringify(after.slice(0, 20)));
-    console.log("Selected text being replaced:", JSON.stringify(textarea.value.slice(originalSelectionStart, originalSelectionEnd)));
-  }
-  const originalValue = textarea.value;
-  const hasSelection = originalSelectionStart !== originalSelectionEnd;
-  if (canInsertText === null || canInsertText === true) {
-    textarea.contentEditable = "true";
-    try {
-      canInsertText = document.execCommand("insertText", false, text);
-      if (debugMode2)
-        console.log("execCommand returned:", canInsertText, "for text with", text.split("\n").length, "lines");
-    } catch (error) {
-      canInsertText = false;
-      if (debugMode2)
-        console.log("execCommand threw error:", error);
-    }
-    textarea.contentEditable = "false";
-  }
-  if (debugMode2) {
-    console.log("canInsertText before:", canInsertText);
-    console.log("execCommand result:", canInsertText);
+// src/shortcuts.js
+var ShortcutsManager = class {
+  constructor(editor) {
+    this.editor = editor;
   }
-  if (canInsertText) {
-    const expectedValue = before + text + after;
-    const actualValue = textarea.value;
-    if (debugMode2) {
-      console.log("Expected length:", expectedValue.length);
-      console.log("Actual length:", actualValue.length);
+  /**
+   * Handle keydown events - called by OverType
+   * @param {KeyboardEvent} event - The keyboard event
+   * @returns {boolean} Whether the event was handled
+   */
+  handleKeydown(event) {
+    const isMac = navigator.platform.toLowerCase().includes("mac");
+    const modKey = isMac ? event.metaKey : event.ctrlKey;
+    if (!modKey)
+      return false;
+    let actionId = null;
+    switch (event.key.toLowerCase()) {
+      case "b":
+        if (!event.shiftKey)
+          actionId = "toggleBold";
+        break;
+      case "i":
+        if (!event.shiftKey)
+          actionId = "toggleItalic";
+        break;
+      case "k":
+        if (!event.shiftKey)
+          actionId = "insertLink";
+        break;
+      case "7":
+        if (event.shiftKey)
+          actionId = "toggleNumberedList";
+        break;
+      case "8":
+        if (event.shiftKey)
+          actionId = "toggleBulletList";
+        break;
     }
-    if (actualValue !== expectedValue) {
-      if (debugMode2) {
-        console.log("execCommand changed the value but not as expected");
-        console.log("Expected:", JSON.stringify(expectedValue.slice(0, 100)));
-        console.log("Actual:", JSON.stringify(actualValue.slice(0, 100)));
-      }
+    if (actionId) {
+      event.preventDefault();
+      this.editor.performAction(actionId, event);
+      return true;
     }
+    return false;
   }
-  if (!canInsertText) {
-    if (debugMode2)
-      console.log("Using manual insertion");
-    if (textarea.value === originalValue) {
-      if (debugMode2)
-        console.log("Value unchanged, doing manual replacement");
-      try {
-        document.execCommand("ms-beginUndoUnit");
-      } catch (e) {
-      }
-      textarea.value = before + text + after;
-      try {
-        document.execCommand("ms-endUndoUnit");
-      } catch (e) {
-      }
-      textarea.dispatchEvent(new CustomEvent("input", { bubbles: true, cancelable: true }));
-    } else {
-      if (debugMode2)
-        console.log("Value was changed by execCommand, skipping manual insertion");
-    }
+  /**
+   * Cleanup
+   */
+  destroy() {
   }
-  if (debugMode2)
-    console.log("Setting selection range:", selectionStart, selectionEnd);
-  if (selectionStart != null && selectionEnd != null) {
-    textarea.setSelectionRange(selectionStart, selectionEnd);
-  } else {
-    textarea.setSelectionRange(originalSelectionStart, textarea.selectionEnd);
+};
+
+// src/themes.js
+var solar = {
+  name: "solar",
+  colors: {
+    bgPrimary: "#faf0ca",
+    // Lemon Chiffon - main background
+    bgSecondary: "#ffffff",
+    // White - editor background
+    text: "#0d3b66",
+    // Yale Blue - main text
+    textPrimary: "#0d3b66",
+    // Yale Blue - primary text (same as text)
+    textSecondary: "#5a7a9b",
+    // Muted blue - secondary text
+    h1: "#f95738",
+    // Tomato - h1 headers
+    h2: "#ee964b",
+    // Sandy Brown - h2 headers
+    h3: "#3d8a51",
+    // Forest green - h3 headers
+    strong: "#ee964b",
+    // Sandy Brown - bold text
+    em: "#f95738",
+    // Tomato - italic text
+    del: "#ee964b",
+    // Sandy Brown - deleted text (same as strong)
+    link: "#0d3b66",
+    // Yale Blue - links
+    code: "#0d3b66",
+    // Yale Blue - inline code
+    codeBg: "rgba(244, 211, 94, 0.4)",
+    // Naples Yellow with transparency
+    blockquote: "#5a7a9b",
+    // Muted blue - blockquotes
+    hr: "#5a7a9b",
+    // Muted blue - horizontal rules
+    syntaxMarker: "rgba(13, 59, 102, 0.52)",
+    // Yale Blue with transparency
+    syntax: "#999999",
+    // Gray - syntax highlighting fallback
+    cursor: "#f95738",
+    // Tomato - cursor
+    selection: "rgba(244, 211, 94, 0.4)",
+    // Naples Yellow with transparency
+    listMarker: "#ee964b",
+    // Sandy Brown - list markers
+    rawLine: "#5a7a9b",
+    // Muted blue - raw line indicators
+    border: "#e0e0e0",
+    // Light gray - borders
+    hoverBg: "#f0f0f0",
+    // Very light gray - hover backgrounds
+    primary: "#0d3b66",
+    // Yale Blue - primary accent
+    // Toolbar colors
+    toolbarBg: "#ffffff",
+    // White - toolbar background
+    toolbarIcon: "#0d3b66",
+    // Yale Blue - icon color
+    toolbarHover: "#f5f5f5",
+    // Light gray - hover background
+    toolbarActive: "#faf0ca"
+    // Lemon Chiffon - active button background
   }
-  if (debugMode2) {
-    console.log("Final value length:", textarea.value.length);
-    console.groupEnd();
+};
+var cave = {
+  name: "cave",
+  colors: {
+    bgPrimary: "#141E26",
+    // Deep ocean - main background
+    bgSecondary: "#1D2D3E",
+    // Darker charcoal - editor background
+    text: "#c5dde8",
+    // Light blue-gray - main text
+    textPrimary: "#c5dde8",
+    // Light blue-gray - primary text (same as text)
+    textSecondary: "#9fcfec",
+    // Brighter blue - secondary text
+    h1: "#d4a5ff",
+    // Rich lavender - h1 headers
+    h2: "#f6ae2d",
+    // Hunyadi Yellow - h2 headers
+    h3: "#9fcfec",
+    // Brighter blue - h3 headers
+    strong: "#f6ae2d",
+    // Hunyadi Yellow - bold text
+    em: "#9fcfec",
+    // Brighter blue - italic text
+    del: "#f6ae2d",
+    // Hunyadi Yellow - deleted text (same as strong)
+    link: "#9fcfec",
+    // Brighter blue - links
+    code: "#c5dde8",
+    // Light blue-gray - inline code
+    codeBg: "#1a232b",
+    // Very dark blue - code background
+    blockquote: "#9fcfec",
+    // Brighter blue - same as italic
+    hr: "#c5dde8",
+    // Light blue-gray - horizontal rules
+    syntaxMarker: "rgba(159, 207, 236, 0.73)",
+    // Brighter blue semi-transparent
+    syntax: "#7a8c98",
+    // Muted gray-blue - syntax highlighting fallback
+    cursor: "#f26419",
+    // Orange Pantone - cursor
+    selection: "rgba(51, 101, 138, 0.4)",
+    // Lapis Lazuli with transparency
+    listMarker: "#f6ae2d",
+    // Hunyadi Yellow - list markers
+    rawLine: "#9fcfec",
+    // Brighter blue - raw line indicators
+    border: "#2a3f52",
+    // Dark blue-gray - borders
+    hoverBg: "#243546",
+    // Slightly lighter charcoal - hover backgrounds
+    primary: "#9fcfec",
+    // Brighter blue - primary accent
+    // Toolbar colors for dark theme
+    toolbarBg: "#1D2D3E",
+    // Darker charcoal - toolbar background
+    toolbarIcon: "#c5dde8",
+    // Light blue-gray - icon color
+    toolbarHover: "#243546",
+    // Slightly lighter charcoal - hover background
+    toolbarActive: "#2a3f52"
+    // Even lighter - active button background
   }
-}
-function isMultipleLines(string) {
-  return string.trim().split("\n").length > 1;
-}
-function wordSelectionStart(text, i) {
-  let index = i;
-  while (text[index] && text[index - 1] != null && !text[index - 1].match(/\s/)) {
-    index--;
+};
+var themes = {
+  solar,
+  cave,
+  // Aliases for backward compatibility
+  light: solar,
+  dark: cave
+};
+function getTheme(theme) {
+  if (typeof theme === "string") {
+    const themeObj = themes[theme] || themes.solar;
+    return { ...themeObj, name: theme };
   }
-  return index;
+  return theme;
 }
-function wordSelectionEnd(text, i, multiline) {
-  let index = i;
-  const breakpoint = multiline ? /\n/ : /\s/;
-  while (text[index] && !text[index].match(breakpoint)) {
-    index++;
+function themeToCSSVars(colors) {
+  const vars = [];
+  for (const [key, value] of Object.entries(colors)) {
+    const varName = key.replace(/([A-Z])/g, "-$1").toLowerCase();
+    vars.push(`--${varName}: ${value};`);
   }
-  return index;
+  return vars.join("\n");
 }
-function expandSelectionToLine(textarea) {
-  const lines = textarea.value.split("\n");
-  let counter = 0;
-  for (let index = 0; index < lines.length; index++) {
-    const lineLength = lines[index].length + 1;
-    if (textarea.selectionStart >= counter && textarea.selectionStart < counter + lineLength) {
-      textarea.selectionStart = counter;
+function mergeTheme(baseTheme, customColors = {}) {
+  return {
+    ...baseTheme,
+    colors: {
+      ...baseTheme.colors,
+      ...customColors
     }
-    if (textarea.selectionEnd >= counter && textarea.selectionEnd < counter + lineLength) {
-      if (index === lines.length - 1) {
-        textarea.selectionEnd = Math.min(counter + lines[index].length, textarea.value.length);
-      } else {
-        textarea.selectionEnd = counter + lineLength - 1;
+  };
+}
+
+// src/styles.js
+function generateStyles(options = {}) {
+  const {
+    fontSize = "14px",
+    lineHeight = 1.6,
+    /* System-first, guaranteed monospaced; avoids Android 'ui-monospace' pitfalls */
+    fontFamily = '"SF Mono", SFMono-Regular, Menlo, Monaco, "Cascadia Code", Consolas, "Roboto Mono", "Noto Sans Mono", "Droid Sans Mono", "Ubuntu Mono", "DejaVu Sans Mono", "Liberation Mono", "Courier New", Courier, monospace',
+    padding = "20px",
+    theme = null,
+    mobile = {}
+  } = options;
+  const mobileStyles = Object.keys(mobile).length > 0 ? `
+    @media (max-width: 640px) {
+      .overtype-wrapper .overtype-input,
+      .overtype-wrapper .overtype-preview {
+        ${Object.entries(mobile).map(([prop, val]) => {
+    const cssProp = prop.replace(/([A-Z])/g, "-$1").toLowerCase();
+    return `${cssProp}: ${val} !important;`;
+  }).join("\n        ")}
       }
     }
-    counter += lineLength;
-  }
-}
-function expandSelectedText(textarea, prefixToUse, suffixToUse, multiline = false) {
-  if (textarea.selectionStart === textarea.selectionEnd) {
-    textarea.selectionStart = wordSelectionStart(textarea.value, textarea.selectionStart);
-    textarea.selectionEnd = wordSelectionEnd(textarea.value, textarea.selectionEnd, multiline);
-  } else {
-    const expandedSelectionStart = textarea.selectionStart - prefixToUse.length;
-    const expandedSelectionEnd = textarea.selectionEnd + suffixToUse.length;
-    const beginsWithPrefix = textarea.value.slice(expandedSelectionStart, textarea.selectionStart) === prefixToUse;
-    const endsWithSuffix = textarea.value.slice(textarea.selectionEnd, expandedSelectionEnd) === suffixToUse;
-    if (beginsWithPrefix && endsWithSuffix) {
-      textarea.selectionStart = expandedSelectionStart;
-      textarea.selectionEnd = expandedSelectionEnd;
+  ` : "";
+  const themeVars = theme && theme.colors ? themeToCSSVars(theme.colors) : "";
+  return `
+    /* OverType Editor Styles */
+    
+    /* Middle-ground CSS Reset - Prevent parent styles from leaking in */
+    .overtype-container * {
+      /* Box model - these commonly leak */
+      margin: 0 !important;
+      padding: 0 !important;
+      border: 0 !important;
+      
+      /* Layout - these can break our layout */
+      /* Don't reset position - it breaks dropdowns */
+      float: none !important;
+      clear: none !important;
+      
+      /* Typography - only reset decorative aspects */
+      text-decoration: none !important;
+      text-transform: none !important;
+      letter-spacing: normal !important;
+      
+      /* Visual effects that can interfere */
+      box-shadow: none !important;
+      text-shadow: none !important;
+      
+      /* Ensure box-sizing is consistent */
+      box-sizing: border-box !important;
+      
+      /* Keep inheritance for these */
+      /* font-family, color, line-height, font-size - inherit */
+    }
+    
+    /* Container base styles after reset */
+    .overtype-container {
+      display: flex !important;
+      flex-direction: column !important;
+      width: 100% !important;
+      height: 100% !important;
+      position: relative !important; /* Override reset - needed for absolute children */
+      overflow: visible !important; /* Allow dropdown to overflow container */
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
+      text-align: left !important;
+      ${themeVars ? `
+      /* Theme Variables */
+      ${themeVars}` : ""}
+    }
+    
+    /* Force left alignment for all elements in the editor */
+    .overtype-container .overtype-wrapper * {
+      text-align: left !important;
+    }
+    
+    /* Auto-resize mode styles */
+    .overtype-container.overtype-auto-resize {
+      height: auto !important;
+    }
+
+    .overtype-container.overtype-auto-resize .overtype-wrapper {
+      flex: 0 0 auto !important; /* Don't grow/shrink, use explicit height */
+      height: auto !important;
+      min-height: 60px !important;
+      overflow: visible !important;
+    }
+    
+    .overtype-wrapper {
+      position: relative !important; /* Override reset - needed for absolute children */
+      width: 100% !important;
+      flex: 1 1 0 !important; /* Grow to fill remaining space, with flex-basis: 0 */
+      min-height: 60px !important; /* Minimum usable height */
+      overflow: hidden !important;
+      background: var(--bg-secondary, #ffffff) !important;
+      z-index: 1; /* Below toolbar and dropdown */
+    }
+
+    /* Critical alignment styles - must be identical for both layers */
+    .overtype-wrapper .overtype-input,
+    .overtype-wrapper .overtype-preview {
+      /* Positioning - must be identical */
+      position: absolute !important; /* Override reset - required for overlay */
+      top: 0 !important;
+      left: 0 !important;
+      width: 100% !important;
+      height: 100% !important;
+      
+      /* Font properties - any difference breaks alignment */
+      font-family: ${fontFamily} !important;
+      font-variant-ligatures: none !important; /* keep metrics stable for code */
+      font-size: var(--instance-font-size, ${fontSize}) !important;
+      line-height: var(--instance-line-height, ${lineHeight}) !important;
+      font-weight: normal !important;
+      font-style: normal !important;
+      font-variant: normal !important;
+      font-stretch: normal !important;
+      font-kerning: none !important;
+      font-feature-settings: normal !important;
+      
+      /* Box model - must match exactly */
+      padding: var(--instance-padding, ${padding}) !important;
+      margin: 0 !important;
+      border: none !important;
+      outline: none !important;
+      box-sizing: border-box !important;
+      
+      /* Text layout - critical for character positioning */
+      white-space: pre-wrap !important;
+      word-wrap: break-word !important;
+      word-break: normal !important;
+      overflow-wrap: break-word !important;
+      tab-size: 2 !important;
+      -moz-tab-size: 2 !important;
+      text-align: left !important;
+      text-indent: 0 !important;
+      letter-spacing: normal !important;
+      word-spacing: normal !important;
+      
+      /* Text rendering */
+      text-transform: none !important;
+      text-rendering: auto !important;
+      -webkit-font-smoothing: auto !important;
+      -webkit-text-size-adjust: 100% !important;
+      
+      /* Direction and writing */
+      direction: ltr !important;
+      writing-mode: horizontal-tb !important;
+      unicode-bidi: normal !important;
+      text-orientation: mixed !important;
+      
+      /* Visual effects that could shift perception */
+      text-shadow: none !important;
+      filter: none !important;
+      transform: none !important;
+      zoom: 1 !important;
+      
+      /* Vertical alignment */
+      vertical-align: baseline !important;
+      
+      /* Size constraints */
+      min-width: 0 !important;
+      min-height: 0 !important;
+      max-width: none !important;
+      max-height: none !important;
+      
+      /* Overflow */
+      overflow-y: auto !important;
+      overflow-x: auto !important;
+      /* overscroll-behavior removed to allow scroll-through to parent */
+      scrollbar-width: auto !important;
+      scrollbar-gutter: auto !important;
+      
+      /* Animation/transition - disabled to prevent movement */
+      animation: none !important;
+      transition: none !important;
     }
-  }
-  return textarea.value.slice(textarea.selectionStart, textarea.selectionEnd);
-}
-function newlinesToSurroundSelectedText(textarea) {
-  const beforeSelection = textarea.value.slice(0, textarea.selectionStart);
-  const afterSelection = textarea.value.slice(textarea.selectionEnd);
-  const breaksBefore = beforeSelection.match(/\n*$/);
-  const breaksAfter = afterSelection.match(/^\n*/);
-  const newlinesBeforeSelection = breaksBefore ? breaksBefore[0].length : 0;
-  const newlinesAfterSelection = breaksAfter ? breaksAfter[0].length : 0;
-  let newlinesToAppend = "";
-  let newlinesToPrepend = "";
-  if (beforeSelection.match(/\S/) && newlinesBeforeSelection < 2) {
-    newlinesToAppend = "\n".repeat(2 - newlinesBeforeSelection);
-  }
-  if (afterSelection.match(/\S/) && newlinesAfterSelection < 2) {
-    newlinesToPrepend = "\n".repeat(2 - newlinesAfterSelection);
-  }
-  return { newlinesToAppend, newlinesToPrepend };
-}
-function applyLineOperation(textarea, operation, options = {}) {
-  const originalStart = textarea.selectionStart;
-  const originalEnd = textarea.selectionEnd;
-  const noInitialSelection = originalStart === originalEnd;
-  const value = textarea.value;
-  let lineStart = originalStart;
-  while (lineStart > 0 && value[lineStart - 1] !== "\n") {
-    lineStart--;
-  }
-  if (noInitialSelection) {
-    let lineEnd = originalStart;
-    while (lineEnd < value.length && value[lineEnd] !== "\n") {
-      lineEnd++;
+
+    /* Input layer styles */
+    .overtype-wrapper .overtype-input {
+      /* Layer positioning */
+      z-index: 1 !important;
+      
+      /* Text visibility */
+      color: transparent !important;
+      caret-color: var(--cursor, #f95738) !important;
+      background-color: transparent !important;
+      
+      /* Textarea-specific */
+      resize: none !important;
+      appearance: none !important;
+      -webkit-appearance: none !important;
+      -moz-appearance: none !important;
+      
+      /* Prevent mobile zoom on focus */
+      touch-action: manipulation !important;
+      
+      /* Disable autofill and spellcheck */
+      autocomplete: off !important;
+      autocorrect: off !important;
+      autocapitalize: off !important;
+      spellcheck: false !important;
     }
-    textarea.selectionStart = lineStart;
-    textarea.selectionEnd = lineEnd;
-  } else {
-    expandSelectionToLine(textarea);
-  }
-  const result = operation(textarea);
-  if (options.adjustSelection) {
-    const selectedText = textarea.value.slice(textarea.selectionStart, textarea.selectionEnd);
-    const isRemoving = selectedText.startsWith(options.prefix);
-    const adjusted = options.adjustSelection(isRemoving, originalStart, originalEnd, lineStart);
-    result.selectionStart = adjusted.start;
-    result.selectionEnd = adjusted.end;
-  } else if (options.prefix) {
-    const selectedText = textarea.value.slice(textarea.selectionStart, textarea.selectionEnd);
-    const isRemoving = selectedText.startsWith(options.prefix);
-    if (noInitialSelection) {
-      if (isRemoving) {
-        result.selectionStart = Math.max(originalStart - options.prefix.length, lineStart);
-        result.selectionEnd = result.selectionStart;
-      } else {
-        result.selectionStart = originalStart + options.prefix.length;
-        result.selectionEnd = result.selectionStart;
-      }
-    } else {
-      if (isRemoving) {
-        result.selectionStart = Math.max(originalStart - options.prefix.length, lineStart);
-        result.selectionEnd = Math.max(originalEnd - options.prefix.length, lineStart);
-      } else {
-        result.selectionStart = originalStart + options.prefix.length;
-        result.selectionEnd = originalEnd + options.prefix.length;
-      }
+
+    .overtype-wrapper .overtype-input::selection {
+      background-color: var(--selection, rgba(244, 211, 94, 0.4));
     }
-  }
-  return result;
-}
-function blockStyle(textarea, style) {
-  let newlinesToAppend;
-  let newlinesToPrepend;
-  const { prefix, suffix, blockPrefix, blockSuffix, replaceNext, prefixSpace, scanFor, surroundWithNewlines, trimFirst } = style;
-  const originalSelectionStart = textarea.selectionStart;
-  const originalSelectionEnd = textarea.selectionEnd;
-  let selectedText = textarea.value.slice(textarea.selectionStart, textarea.selectionEnd);
-  let prefixToUse = isMultipleLines(selectedText) && blockPrefix && blockPrefix.length > 0 ? `${blockPrefix}
-` : prefix;
-  let suffixToUse = isMultipleLines(selectedText) && blockSuffix && blockSuffix.length > 0 ? `
-${blockSuffix}` : suffix;
-  if (prefixSpace) {
-    const beforeSelection = textarea.value[textarea.selectionStart - 1];
-    if (textarea.selectionStart !== 0 && beforeSelection != null && !beforeSelection.match(/\s/)) {
-      prefixToUse = ` ${prefixToUse}`;
+
+    /* Preview layer styles */
+    .overtype-wrapper .overtype-preview {
+      /* Layer positioning */
+      z-index: 0 !important;
+      pointer-events: none !important;
+      color: var(--text, #0d3b66) !important;
+      background-color: transparent !important;
+      
+      /* Prevent text selection */
+      user-select: none !important;
+      -webkit-user-select: none !important;
+      -moz-user-select: none !important;
+      -ms-user-select: none !important;
     }
-  }
-  selectedText = expandSelectedText(textarea, prefixToUse, suffixToUse, style.multiline);
-  let selectionStart = textarea.selectionStart;
-  let selectionEnd = textarea.selectionEnd;
-  const hasReplaceNext = replaceNext && replaceNext.length > 0 && suffixToUse.indexOf(replaceNext) > -1 && selectedText.length > 0;
-  if (surroundWithNewlines) {
-    const ref = newlinesToSurroundSelectedText(textarea);
-    newlinesToAppend = ref.newlinesToAppend;
-    newlinesToPrepend = ref.newlinesToPrepend;
-    prefixToUse = newlinesToAppend + prefix;
-    suffixToUse += newlinesToPrepend;
-  }
-  if (selectedText.startsWith(prefixToUse) && selectedText.endsWith(suffixToUse)) {
-    const replacementText = selectedText.slice(prefixToUse.length, selectedText.length - suffixToUse.length);
-    if (originalSelectionStart === originalSelectionEnd) {
-      let position = originalSelectionStart - prefixToUse.length;
-      position = Math.max(position, selectionStart);
-      position = Math.min(position, selectionStart + replacementText.length);
-      selectionStart = selectionEnd = position;
-    } else {
-      selectionEnd = selectionStart + replacementText.length;
+
+    /* Defensive styles for preview child divs */
+    .overtype-wrapper .overtype-preview div {
+      /* Reset any inherited styles */
+      margin: 0 !important;
+      padding: 0 !important;
+      border: none !important;
+      text-align: left !important;
+      text-indent: 0 !important;
+      display: block !important;
+      position: static !important;
+      transform: none !important;
+      min-height: 0 !important;
+      max-height: none !important;
+      line-height: inherit !important;
+      font-size: inherit !important;
+      font-family: inherit !important;
     }
-    return { text: replacementText, selectionStart, selectionEnd };
-  } else if (!hasReplaceNext) {
-    let replacementText = prefixToUse + selectedText + suffixToUse;
-    selectionStart = originalSelectionStart + prefixToUse.length;
-    selectionEnd = originalSelectionEnd + prefixToUse.length;
-    const whitespaceEdges = selectedText.match(/^\s*|\s*$/g);
-    if (trimFirst && whitespaceEdges) {
-      const leadingWhitespace = whitespaceEdges[0] || "";
-      const trailingWhitespace = whitespaceEdges[1] || "";
-      replacementText = leadingWhitespace + prefixToUse + selectedText.trim() + suffixToUse + trailingWhitespace;
-      selectionStart += leadingWhitespace.length;
-      selectionEnd -= trailingWhitespace.length;
+
+    /* Markdown element styling - NO SIZE CHANGES */
+    .overtype-wrapper .overtype-preview .header {
+      font-weight: bold !important;
     }
-    return { text: replacementText, selectionStart, selectionEnd };
-  } else if (scanFor && scanFor.length > 0 && selectedText.match(scanFor)) {
-    suffixToUse = suffixToUse.replace(replaceNext, selectedText);
-    const replacementText = prefixToUse + suffixToUse;
-    selectionStart = selectionEnd = selectionStart + prefixToUse.length;
-    return { text: replacementText, selectionStart, selectionEnd };
-  } else {
-    const replacementText = prefixToUse + selectedText + suffixToUse;
-    selectionStart = selectionStart + prefixToUse.length + selectedText.length + suffixToUse.indexOf(replaceNext);
-    selectionEnd = selectionStart + replaceNext.length;
-    return { text: replacementText, selectionStart, selectionEnd };
-  }
-}
-function multilineStyle(textarea, style) {
-  const { prefix, suffix, surroundWithNewlines } = style;
-  let text = textarea.value.slice(textarea.selectionStart, textarea.selectionEnd);
-  let selectionStart = textarea.selectionStart;
-  let selectionEnd = textarea.selectionEnd;
-  const lines = text.split("\n");
-  const undoStyle = lines.every((line) => line.startsWith(prefix) && (!suffix || line.endsWith(suffix)));
-  if (undoStyle) {
-    text = lines.map((line) => {
-      let result = line.slice(prefix.length);
-      if (suffix) {
-        result = result.slice(0, result.length - suffix.length);
-      }
-      return result;
-    }).join("\n");
-    selectionEnd = selectionStart + text.length;
-  } else {
-    text = lines.map((line) => prefix + line + (suffix || "")).join("\n");
-    if (surroundWithNewlines) {
-      const { newlinesToAppend, newlinesToPrepend } = newlinesToSurroundSelectedText(textarea);
-      selectionStart += newlinesToAppend.length;
-      selectionEnd = selectionStart + text.length;
-      text = newlinesToAppend + text + newlinesToPrepend;
+
+    /* Header colors */
+    .overtype-wrapper .overtype-preview .h1 { 
+      color: var(--h1, #f95738) !important; 
     }
-  }
-  return { text, selectionStart, selectionEnd };
-}
-function undoOrderedListStyle(text) {
-  const lines = text.split("\n");
-  const orderedListRegex = /^\d+\.\s+/;
-  const shouldUndoOrderedList = lines.every((line) => orderedListRegex.test(line));
-  let result = lines;
-  if (shouldUndoOrderedList) {
-    result = lines.map((line) => line.replace(orderedListRegex, ""));
-  }
-  return {
-    text: result.join("\n"),
-    processed: shouldUndoOrderedList
-  };
-}
-function undoUnorderedListStyle(text) {
-  const lines = text.split("\n");
-  const unorderedListPrefix = "- ";
-  const shouldUndoUnorderedList = lines.every((line) => line.startsWith(unorderedListPrefix));
-  let result = lines;
-  if (shouldUndoUnorderedList) {
-    result = lines.map((line) => line.slice(unorderedListPrefix.length));
-  }
-  return {
-    text: result.join("\n"),
-    processed: shouldUndoUnorderedList
-  };
-}
-function makePrefix(index, unorderedList) {
-  if (unorderedList) {
-    return "- ";
-  } else {
-    return `${index + 1}. `;
-  }
-}
-function clearExistingListStyle(style, selectedText) {
-  let undoResult;
-  let undoResultOppositeList;
-  let pristineText;
-  if (style.orderedList) {
-    undoResult = undoOrderedListStyle(selectedText);
-    undoResultOppositeList = undoUnorderedListStyle(undoResult.text);
-    pristineText = undoResultOppositeList.text;
-  } else {
-    undoResult = undoUnorderedListStyle(selectedText);
-    undoResultOppositeList = undoOrderedListStyle(undoResult.text);
-    pristineText = undoResultOppositeList.text;
-  }
-  return [undoResult, undoResultOppositeList, pristineText];
-}
-function listStyle(textarea, style) {
-  const noInitialSelection = textarea.selectionStart === textarea.selectionEnd;
-  let selectionStart = textarea.selectionStart;
-  let selectionEnd = textarea.selectionEnd;
-  expandSelectionToLine(textarea);
-  const selectedText = textarea.value.slice(textarea.selectionStart, textarea.selectionEnd);
-  const [undoResult, undoResultOppositeList, pristineText] = clearExistingListStyle(style, selectedText);
-  const prefixedLines = pristineText.split("\n").map((value, index) => {
-    return `${makePrefix(index, style.unorderedList)}${value}`;
-  });
-  const totalPrefixLength = prefixedLines.reduce((previousValue, _currentValue, currentIndex) => {
-    return previousValue + makePrefix(currentIndex, style.unorderedList).length;
-  }, 0);
-  const totalPrefixLengthOppositeList = prefixedLines.reduce((previousValue, _currentValue, currentIndex) => {
-    return previousValue + makePrefix(currentIndex, !style.unorderedList).length;
-  }, 0);
-  if (undoResult.processed) {
-    if (noInitialSelection) {
-      selectionStart = Math.max(selectionStart - makePrefix(0, style.unorderedList).length, 0);
-      selectionEnd = selectionStart;
-    } else {
-      selectionStart = textarea.selectionStart;
-      selectionEnd = textarea.selectionEnd - totalPrefixLength;
+    .overtype-wrapper .overtype-preview .h2 { 
+      color: var(--h2, #ee964b) !important; 
     }
-    return { text: pristineText, selectionStart, selectionEnd };
-  }
-  const { newlinesToAppend, newlinesToPrepend } = newlinesToSurroundSelectedText(textarea);
-  const text = newlinesToAppend + prefixedLines.join("\n") + newlinesToPrepend;
-  if (noInitialSelection) {
-    selectionStart = Math.max(selectionStart + makePrefix(0, style.unorderedList).length + newlinesToAppend.length, 0);
-    selectionEnd = selectionStart;
-  } else {
-    if (undoResultOppositeList.processed) {
-      selectionStart = Math.max(textarea.selectionStart + newlinesToAppend.length, 0);
-      selectionEnd = textarea.selectionEnd + newlinesToAppend.length + totalPrefixLength - totalPrefixLengthOppositeList;
-    } else {
-      selectionStart = Math.max(textarea.selectionStart + newlinesToAppend.length, 0);
-      selectionEnd = textarea.selectionEnd + newlinesToAppend.length + totalPrefixLength;
+    .overtype-wrapper .overtype-preview .h3 { 
+      color: var(--h3, #3d8a51) !important; 
     }
-  }
-  return { text, selectionStart, selectionEnd };
-}
-function applyListStyle(textarea, style) {
-  const result = applyLineOperation(
-    textarea,
-    (ta) => listStyle(ta, style),
-    {
-      // Custom selection adjustment for lists
-      adjustSelection: (isRemoving, selStart, selEnd, lineStart) => {
-        const currentLine = textarea.value.slice(lineStart, textarea.selectionEnd);
-        const orderedListRegex = /^\d+\.\s+/;
-        const unorderedListRegex = /^- /;
-        const hasOrderedList = orderedListRegex.test(currentLine);
-        const hasUnorderedList = unorderedListRegex.test(currentLine);
-        const isRemovingCurrent = style.orderedList && hasOrderedList || style.unorderedList && hasUnorderedList;
-        if (selStart === selEnd) {
-          if (isRemovingCurrent) {
-            const prefixMatch = currentLine.match(style.orderedList ? orderedListRegex : unorderedListRegex);
-            const prefixLength = prefixMatch ? prefixMatch[0].length : 0;
-            return {
-              start: Math.max(selStart - prefixLength, lineStart),
-              end: Math.max(selStart - prefixLength, lineStart)
-            };
-          } else if (hasOrderedList || hasUnorderedList) {
-            const oldPrefixMatch = currentLine.match(hasOrderedList ? orderedListRegex : unorderedListRegex);
-            const oldPrefixLength = oldPrefixMatch ? oldPrefixMatch[0].length : 0;
-            const newPrefixLength = style.unorderedList ? 2 : 3;
-            const adjustment = newPrefixLength - oldPrefixLength;
-            return {
-              start: selStart + adjustment,
-              end: selStart + adjustment
-            };
-          } else {
-            const prefixLength = style.unorderedList ? 2 : 3;
-            return {
-              start: selStart + prefixLength,
-              end: selStart + prefixLength
-            };
-          }
-        } else {
-          if (isRemovingCurrent) {
-            const prefixMatch = currentLine.match(style.orderedList ? orderedListRegex : unorderedListRegex);
-            const prefixLength = prefixMatch ? prefixMatch[0].length : 0;
-            return {
-              start: Math.max(selStart - prefixLength, lineStart),
-              end: Math.max(selEnd - prefixLength, lineStart)
-            };
-          } else if (hasOrderedList || hasUnorderedList) {
-            const oldPrefixMatch = currentLine.match(hasOrderedList ? orderedListRegex : unorderedListRegex);
-            const oldPrefixLength = oldPrefixMatch ? oldPrefixMatch[0].length : 0;
-            const newPrefixLength = style.unorderedList ? 2 : 3;
-            const adjustment = newPrefixLength - oldPrefixLength;
-            return {
-              start: selStart + adjustment,
-              end: selEnd + adjustment
-            };
-          } else {
-            const prefixLength = style.unorderedList ? 2 : 3;
-            return {
-              start: selStart + prefixLength,
-              end: selEnd + prefixLength
-            };
-          }
-        }
-      }
+
+    /* Semantic headers - flatten in edit mode */
+    .overtype-wrapper .overtype-preview h1,
+    .overtype-wrapper .overtype-preview h2,
+    .overtype-wrapper .overtype-preview h3 {
+      font-size: inherit !important;
+      font-weight: bold !important;
+      margin: 0 !important;
+      padding: 0 !important;
+      display: inline !important;
+      line-height: inherit !important;
     }
-  );
-  insertText(textarea, result);
-}
-function getActiveFormats(textarea) {
-  if (!textarea)
-    return [];
-  const formats = [];
-  const { selectionStart, selectionEnd, value } = textarea;
-  const lines = value.split("\n");
-  let lineStart = 0;
-  let currentLine = "";
-  for (const line of lines) {
-    if (selectionStart >= lineStart && selectionStart <= lineStart + line.length) {
-      currentLine = line;
-      break;
+
+    /* Header colors for semantic headers */
+    .overtype-wrapper .overtype-preview h1 { 
+      color: var(--h1, #f95738) !important; 
     }
-    lineStart += line.length + 1;
-  }
-  if (currentLine.startsWith("- ")) {
-    if (currentLine.startsWith("- [ ] ") || currentLine.startsWith("- [x] ")) {
-      formats.push("task-list");
-    } else {
-      formats.push("bullet-list");
+    .overtype-wrapper .overtype-preview h2 { 
+      color: var(--h2, #ee964b) !important; 
     }
-  }
-  if (/^\d+\.\s/.test(currentLine)) {
-    formats.push("numbered-list");
-  }
-  if (currentLine.startsWith("> ")) {
-    formats.push("quote");
-  }
-  if (currentLine.startsWith("# "))
-    formats.push("header");
-  if (currentLine.startsWith("## "))
-    formats.push("header-2");
-  if (currentLine.startsWith("### "))
-    formats.push("header-3");
-  const lookBehind = Math.max(0, selectionStart - 10);
-  const lookAhead = Math.min(value.length, selectionEnd + 10);
-  const surrounding = value.slice(lookBehind, lookAhead);
-  if (surrounding.includes("**")) {
-    const beforeCursor = value.slice(Math.max(0, selectionStart - 100), selectionStart);
-    const afterCursor = value.slice(selectionEnd, Math.min(value.length, selectionEnd + 100));
-    const lastOpenBold = beforeCursor.lastIndexOf("**");
-    const nextCloseBold = afterCursor.indexOf("**");
-    if (lastOpenBold !== -1 && nextCloseBold !== -1) {
-      formats.push("bold");
+    .overtype-wrapper .overtype-preview h3 { 
+      color: var(--h3, #3d8a51) !important; 
     }
-  }
-  if (surrounding.includes("_")) {
-    const beforeCursor = value.slice(Math.max(0, selectionStart - 100), selectionStart);
-    const afterCursor = value.slice(selectionEnd, Math.min(value.length, selectionEnd + 100));
-    const lastOpenItalic = beforeCursor.lastIndexOf("_");
-    const nextCloseItalic = afterCursor.indexOf("_");
-    if (lastOpenItalic !== -1 && nextCloseItalic !== -1) {
-      formats.push("italic");
+
+    /* Lists - remove styling in edit mode */
+    .overtype-wrapper .overtype-preview ul,
+    .overtype-wrapper .overtype-preview ol {
+      list-style: none !important;
+      margin: 0 !important;
+      padding: 0 !important;
+      display: block !important; /* Lists need to be block for line breaks */
     }
-  }
-  if (surrounding.includes("`")) {
-    const beforeCursor = value.slice(Math.max(0, selectionStart - 100), selectionStart);
-    const afterCursor = value.slice(selectionEnd, Math.min(value.length, selectionEnd + 100));
-    if (beforeCursor.includes("`") && afterCursor.includes("`")) {
-      formats.push("code");
+
+    .overtype-wrapper .overtype-preview li {
+      display: block !important; /* Each item on its own line */
+      margin: 0 !important;
+      padding: 0 !important;
+      /* Don't set list-style here - let ul/ol control it */
     }
-  }
-  if (surrounding.includes("[") && surrounding.includes("]")) {
-    const beforeCursor = value.slice(Math.max(0, selectionStart - 100), selectionStart);
-    const afterCursor = value.slice(selectionEnd, Math.min(value.length, selectionEnd + 100));
-    const lastOpenBracket = beforeCursor.lastIndexOf("[");
-    const nextCloseBracket = afterCursor.indexOf("]");
-    if (lastOpenBracket !== -1 && nextCloseBracket !== -1) {
-      const afterBracket = value.slice(selectionEnd + nextCloseBracket + 1, selectionEnd + nextCloseBracket + 10);
-      if (afterBracket.startsWith("(")) {
-        formats.push("link");
-      }
+
+    /* Bold text */
+    .overtype-wrapper .overtype-preview strong {
+      color: var(--strong, #ee964b) !important;
+      font-weight: bold !important;
     }
-  }
-  return formats;
-}
-function toggleBold(textarea) {
-  if (!textarea || textarea.disabled || textarea.readOnly)
-    return;
-  debugLog("toggleBold", "Starting");
-  debugSelection(textarea, "Before");
-  const style = mergeWithDefaults(FORMATS.bold);
-  const result = blockStyle(textarea, style);
-  debugResult(result);
-  insertText(textarea, result);
-  debugSelection(textarea, "After");
-}
-function toggleItalic(textarea) {
-  if (!textarea || textarea.disabled || textarea.readOnly)
-    return;
-  const style = mergeWithDefaults(FORMATS.italic);
-  const result = blockStyle(textarea, style);
-  insertText(textarea, result);
-}
-function toggleCode(textarea) {
-  if (!textarea || textarea.disabled || textarea.readOnly)
-    return;
-  const style = mergeWithDefaults(FORMATS.code);
-  const result = blockStyle(textarea, style);
-  insertText(textarea, result);
-}
-function insertLink(textarea, options = {}) {
-  if (!textarea || textarea.disabled || textarea.readOnly)
-    return;
-  const selectedText = textarea.value.slice(textarea.selectionStart, textarea.selectionEnd);
-  let style = mergeWithDefaults(FORMATS.link);
-  const isURL = selectedText && selectedText.match(/^https?:\/\//);
-  if (isURL && !options.url) {
-    style.suffix = `](${selectedText})`;
-    style.replaceNext = "";
-  } else if (options.url) {
-    style.suffix = `](${options.url})`;
-    style.replaceNext = "";
-  }
-  if (options.text && !selectedText) {
-    const pos = textarea.selectionStart;
-    textarea.value = textarea.value.slice(0, pos) + options.text + textarea.value.slice(pos);
-    textarea.selectionStart = pos;
-    textarea.selectionEnd = pos + options.text.length;
-  }
-  const result = blockStyle(textarea, style);
-  insertText(textarea, result);
-}
-function toggleBulletList(textarea) {
-  if (!textarea || textarea.disabled || textarea.readOnly)
-    return;
-  const style = mergeWithDefaults(FORMATS.bulletList);
-  applyListStyle(textarea, style);
-}
-function toggleNumberedList(textarea) {
-  if (!textarea || textarea.disabled || textarea.readOnly)
-    return;
-  const style = mergeWithDefaults(FORMATS.numberedList);
-  applyListStyle(textarea, style);
-}
-function toggleQuote(textarea) {
-  if (!textarea || textarea.disabled || textarea.readOnly)
-    return;
-  debugLog("toggleQuote", "Starting");
-  debugSelection(textarea, "Initial");
-  const style = mergeWithDefaults(FORMATS.quote);
-  const result = applyLineOperation(
-    textarea,
-    (ta) => multilineStyle(ta, style),
-    { prefix: style.prefix }
-  );
-  debugResult(result);
-  insertText(textarea, result);
-  debugSelection(textarea, "Final");
-}
-function toggleTaskList(textarea) {
-  if (!textarea || textarea.disabled || textarea.readOnly)
-    return;
-  const style = mergeWithDefaults(FORMATS.taskList);
-  const result = applyLineOperation(
-    textarea,
-    (ta) => multilineStyle(ta, style),
-    { prefix: style.prefix }
-  );
-  insertText(textarea, result);
-}
-function insertHeader(textarea, level = 1, toggle = false) {
-  if (!textarea || textarea.disabled || textarea.readOnly)
-    return;
-  if (level < 1 || level > 6)
-    level = 1;
-  debugLog("insertHeader", `============ START ============`);
-  debugLog("insertHeader", `Level: ${level}, Toggle: ${toggle}`);
-  debugLog("insertHeader", `Initial cursor: ${textarea.selectionStart}-${textarea.selectionEnd}`);
-  const headerKey = `header${level === 1 ? "1" : level}`;
-  const style = mergeWithDefaults(FORMATS[headerKey] || FORMATS.header1);
-  debugLog("insertHeader", `Style prefix: "${style.prefix}"`);
-  const value = textarea.value;
-  const originalStart = textarea.selectionStart;
-  const originalEnd = textarea.selectionEnd;
-  let lineStart = originalStart;
-  while (lineStart > 0 && value[lineStart - 1] !== "\n") {
-    lineStart--;
-  }
-  let lineEnd = originalEnd;
-  while (lineEnd < value.length && value[lineEnd] !== "\n") {
-    lineEnd++;
-  }
-  const currentLineContent = value.slice(lineStart, lineEnd);
-  debugLog("insertHeader", `Current line (before): "${currentLineContent}"`);
-  const existingHeaderMatch = currentLineContent.match(/^(#{1,6})\s*/);
-  const existingLevel = existingHeaderMatch ? existingHeaderMatch[1].length : 0;
-  const existingPrefixLength = existingHeaderMatch ? existingHeaderMatch[0].length : 0;
-  debugLog("insertHeader", `Existing header check:`);
-  debugLog("insertHeader", `  - Match: ${existingHeaderMatch ? `"${existingHeaderMatch[0]}"` : "none"}`);
-  debugLog("insertHeader", `  - Existing level: ${existingLevel}`);
-  debugLog("insertHeader", `  - Existing prefix length: ${existingPrefixLength}`);
-  debugLog("insertHeader", `  - Target level: ${level}`);
-  const shouldToggleOff = toggle && existingLevel === level;
-  debugLog("insertHeader", `Should toggle OFF: ${shouldToggleOff} (toggle=${toggle}, existingLevel=${existingLevel}, level=${level})`);
-  const result = applyLineOperation(
-    textarea,
-    (ta) => {
-      const currentLine = ta.value.slice(ta.selectionStart, ta.selectionEnd);
-      debugLog("insertHeader", `Line in operation: "${currentLine}"`);
-      const cleanedLine = currentLine.replace(/^#{1,6}\s*/, "");
-      debugLog("insertHeader", `Cleaned line: "${cleanedLine}"`);
-      let newLine;
-      if (shouldToggleOff) {
-        debugLog("insertHeader", "ACTION: Toggling OFF - removing header");
-        newLine = cleanedLine;
-      } else if (existingLevel > 0) {
-        debugLog("insertHeader", `ACTION: Replacing H${existingLevel} with H${level}`);
-        newLine = style.prefix + cleanedLine;
-      } else {
-        debugLog("insertHeader", "ACTION: Adding new header");
-        newLine = style.prefix + cleanedLine;
-      }
-      debugLog("insertHeader", `New line: "${newLine}"`);
-      return {
-        text: newLine,
-        selectionStart: ta.selectionStart,
-        selectionEnd: ta.selectionEnd
-      };
-    },
-    {
-      prefix: style.prefix,
-      // Custom selection adjustment for headers
-      adjustSelection: (isRemoving, selStart, selEnd, lineStartPos) => {
-        debugLog("insertHeader", `Adjusting selection:`);
-        debugLog("insertHeader", `  - isRemoving param: ${isRemoving}`);
-        debugLog("insertHeader", `  - shouldToggleOff: ${shouldToggleOff}`);
-        debugLog("insertHeader", `  - selStart: ${selStart}, selEnd: ${selEnd}`);
-        debugLog("insertHeader", `  - lineStartPos: ${lineStartPos}`);
-        if (shouldToggleOff) {
-          const adjustment = Math.max(selStart - existingPrefixLength, lineStartPos);
-          debugLog("insertHeader", `  - Removing header, adjusting by -${existingPrefixLength}`);
-          return {
-            start: adjustment,
-            end: selStart === selEnd ? adjustment : Math.max(selEnd - existingPrefixLength, lineStartPos)
-          };
-        } else if (existingPrefixLength > 0) {
-          const prefixDiff = style.prefix.length - existingPrefixLength;
-          debugLog("insertHeader", `  - Replacing header, adjusting by ${prefixDiff}`);
-          return {
-            start: selStart + prefixDiff,
-            end: selEnd + prefixDiff
-          };
-        } else {
-          debugLog("insertHeader", `  - Adding header, adjusting by +${style.prefix.length}`);
-          return {
-            start: selStart + style.prefix.length,
-            end: selEnd + style.prefix.length
-          };
-        }
-      }
+
+    /* Italic text */
+    .overtype-wrapper .overtype-preview em {
+      color: var(--em, #f95738) !important;
+      text-decoration-color: var(--em, #f95738) !important;
+      text-decoration-thickness: 1px !important;
+      font-style: italic !important;
+    }
+
+    /* Strikethrough text */
+    .overtype-wrapper .overtype-preview del {
+      color: var(--del, #ee964b) !important;
+      text-decoration: line-through !important;
+      text-decoration-color: var(--del, #ee964b) !important;
+      text-decoration-thickness: 1px !important;
     }
-  );
-  debugLog("insertHeader", `Final result: text="${result.text}", cursor=${result.selectionStart}-${result.selectionEnd}`);
-  debugLog("insertHeader", `============ END ============`);
-  insertText(textarea, result);
-}
-function toggleH1(textarea) {
-  insertHeader(textarea, 1, true);
-}
-function toggleH2(textarea) {
-  insertHeader(textarea, 2, true);
-}
-function toggleH3(textarea) {
-  insertHeader(textarea, 3, true);
-}
-function getActiveFormats2(textarea) {
-  return getActiveFormats(textarea);
-}
 
-// src/shortcuts.js
-var ShortcutsManager = class {
-  constructor(editor) {
-    this.editor = editor;
-    this.textarea = editor.textarea;
-  }
-  /**
-   * Handle keydown events - called by OverType
-   * @param {KeyboardEvent} event - The keyboard event
-   * @returns {boolean} Whether the event was handled
-   */
-  handleKeydown(event) {
-    const isMac = navigator.platform.toLowerCase().includes("mac");
-    const modKey = isMac ? event.metaKey : event.ctrlKey;
-    if (!modKey)
-      return false;
-    let action = null;
-    switch (event.key.toLowerCase()) {
-      case "b":
-        if (!event.shiftKey) {
-          action = "toggleBold";
-        }
-        break;
-      case "i":
-        if (!event.shiftKey) {
-          action = "toggleItalic";
-        }
-        break;
-      case "k":
-        if (!event.shiftKey) {
-          action = "insertLink";
-        }
-        break;
-      case "7":
-        if (event.shiftKey) {
-          action = "toggleNumberedList";
-        }
-        break;
-      case "8":
-        if (event.shiftKey) {
-          action = "toggleBulletList";
-        }
-        break;
+    /* Inline code */
+    .overtype-wrapper .overtype-preview code {
+      background: var(--code-bg, rgba(244, 211, 94, 0.4)) !important;
+      color: var(--code, #0d3b66) !important;
+      padding: 0 !important;
+      border-radius: 2px !important;
+      font-family: inherit !important;
+      font-size: inherit !important;
+      line-height: inherit !important;
+      font-weight: normal !important;
     }
-    if (action) {
-      event.preventDefault();
-      if (this.editor.toolbar) {
-        this.editor.toolbar.handleAction(action);
-      } else {
-        this.handleAction(action);
-      }
-      return true;
+
+    /* Code blocks - consolidated pre blocks */
+    .overtype-wrapper .overtype-preview pre {
+      padding: 0 !important;
+      margin: 0 !important;
+      border-radius: 4px !important;
+      overflow-x: auto !important;
     }
-    return false;
-  }
-  /**
-   * Handle action - fallback when no toolbar exists
-   * This duplicates toolbar.handleAction for consistency
-   */
-  async handleAction(action) {
-    const textarea = this.textarea;
-    if (!textarea)
-      return;
-    textarea.focus();
-    try {
-      switch (action) {
-        case "toggleBold":
-          toggleBold(textarea);
-          break;
-        case "toggleItalic":
-          toggleItalic(textarea);
-          break;
-        case "insertLink":
-          insertLink(textarea);
-          break;
-        case "toggleBulletList":
-          toggleBulletList(textarea);
-          break;
-        case "toggleNumberedList":
-          toggleNumberedList(textarea);
-          break;
-      }
-      textarea.dispatchEvent(new Event("input", { bubbles: true }));
-    } catch (error) {
-      console.error("Error in markdown action:", error);
+    
+    /* Code block styling in normal mode - yellow background */
+    .overtype-wrapper .overtype-preview pre.code-block {
+      background: var(--code-bg, rgba(244, 211, 94, 0.4)) !important;
+      white-space: break-spaces !important; /* Prevent horizontal scrollbar that breaks alignment */
     }
-  }
-  /**
-   * Cleanup
-   */
-  destroy() {
-  }
-};
 
-// src/themes.js
-var solar = {
-  name: "solar",
-  colors: {
-    bgPrimary: "#faf0ca",
-    // Lemon Chiffon - main background
-    bgSecondary: "#ffffff",
-    // White - editor background
-    text: "#0d3b66",
-    // Yale Blue - main text
-    textPrimary: "#0d3b66",
-    // Yale Blue - primary text (same as text)
-    textSecondary: "#5a7a9b",
-    // Muted blue - secondary text
-    h1: "#f95738",
-    // Tomato - h1 headers
-    h2: "#ee964b",
-    // Sandy Brown - h2 headers
-    h3: "#3d8a51",
-    // Forest green - h3 headers
-    strong: "#ee964b",
-    // Sandy Brown - bold text
-    em: "#f95738",
-    // Tomato - italic text
-    del: "#ee964b",
-    // Sandy Brown - deleted text (same as strong)
-    link: "#0d3b66",
-    // Yale Blue - links
-    code: "#0d3b66",
-    // Yale Blue - inline code
-    codeBg: "rgba(244, 211, 94, 0.4)",
-    // Naples Yellow with transparency
-    blockquote: "#5a7a9b",
-    // Muted blue - blockquotes
-    hr: "#5a7a9b",
-    // Muted blue - horizontal rules
-    syntaxMarker: "rgba(13, 59, 102, 0.52)",
-    // Yale Blue with transparency
-    syntax: "#999999",
-    // Gray - syntax highlighting fallback
-    cursor: "#f95738",
-    // Tomato - cursor
-    selection: "rgba(244, 211, 94, 0.4)",
-    // Naples Yellow with transparency
-    listMarker: "#ee964b",
-    // Sandy Brown - list markers
-    rawLine: "#5a7a9b",
-    // Muted blue - raw line indicators
-    border: "#e0e0e0",
-    // Light gray - borders
-    hoverBg: "#f0f0f0",
-    // Very light gray - hover backgrounds
-    primary: "#0d3b66",
-    // Yale Blue - primary accent
-    // Toolbar colors
-    toolbarBg: "#ffffff",
-    // White - toolbar background
-    toolbarIcon: "#0d3b66",
-    // Yale Blue - icon color
-    toolbarHover: "#f5f5f5",
-    // Light gray - hover background
-    toolbarActive: "#faf0ca"
-    // Lemon Chiffon - active button background
-  }
-};
-var cave = {
-  name: "cave",
-  colors: {
-    bgPrimary: "#141E26",
-    // Deep ocean - main background
-    bgSecondary: "#1D2D3E",
-    // Darker charcoal - editor background
-    text: "#c5dde8",
-    // Light blue-gray - main text
-    textPrimary: "#c5dde8",
-    // Light blue-gray - primary text (same as text)
-    textSecondary: "#9fcfec",
-    // Brighter blue - secondary text
-    h1: "#d4a5ff",
-    // Rich lavender - h1 headers
-    h2: "#f6ae2d",
-    // Hunyadi Yellow - h2 headers
-    h3: "#9fcfec",
-    // Brighter blue - h3 headers
-    strong: "#f6ae2d",
-    // Hunyadi Yellow - bold text
-    em: "#9fcfec",
-    // Brighter blue - italic text
-    del: "#f6ae2d",
-    // Hunyadi Yellow - deleted text (same as strong)
-    link: "#9fcfec",
-    // Brighter blue - links
-    code: "#c5dde8",
-    // Light blue-gray - inline code
-    codeBg: "#1a232b",
-    // Very dark blue - code background
-    blockquote: "#9fcfec",
-    // Brighter blue - same as italic
-    hr: "#c5dde8",
-    // Light blue-gray - horizontal rules
-    syntaxMarker: "rgba(159, 207, 236, 0.73)",
-    // Brighter blue semi-transparent
-    syntax: "#7a8c98",
-    // Muted gray-blue - syntax highlighting fallback
-    cursor: "#f26419",
-    // Orange Pantone - cursor
-    selection: "rgba(51, 101, 138, 0.4)",
-    // Lapis Lazuli with transparency
-    listMarker: "#f6ae2d",
-    // Hunyadi Yellow - list markers
-    rawLine: "#9fcfec",
-    // Brighter blue - raw line indicators
-    border: "#2a3f52",
-    // Dark blue-gray - borders
-    hoverBg: "#243546",
-    // Slightly lighter charcoal - hover backgrounds
-    primary: "#9fcfec",
-    // Brighter blue - primary accent
-    // Toolbar colors for dark theme
-    toolbarBg: "#1D2D3E",
-    // Darker charcoal - toolbar background
-    toolbarIcon: "#c5dde8",
-    // Light blue-gray - icon color
-    toolbarHover: "#243546",
-    // Slightly lighter charcoal - hover background
-    toolbarActive: "#2a3f52"
-    // Even lighter - active button background
-  }
-};
-var themes = {
-  solar,
-  cave,
-  // Aliases for backward compatibility
-  light: solar,
-  dark: cave
-};
-function getTheme(theme) {
-  if (typeof theme === "string") {
-    const themeObj = themes[theme] || themes.solar;
-    return { ...themeObj, name: theme };
-  }
-  return theme;
-}
-function themeToCSSVars(colors) {
-  const vars = [];
-  for (const [key, value] of Object.entries(colors)) {
-    const varName = key.replace(/([A-Z])/g, "-$1").toLowerCase();
-    vars.push(`--${varName}: ${value};`);
-  }
-  return vars.join("\n");
-}
-function mergeTheme(baseTheme, customColors = {}) {
-  return {
-    ...baseTheme,
-    colors: {
-      ...baseTheme.colors,
-      ...customColors
+    /* Code inside pre blocks - remove background */
+    .overtype-wrapper .overtype-preview pre code {
+      background: transparent !important;
+      color: var(--code, #0d3b66) !important;
+      font-family: ${fontFamily} !important; /* Match textarea font exactly for alignment */
     }
-  };
-}
 
-// src/styles.js
-function generateStyles(options = {}) {
-  const {
-    fontSize = "14px",
-    lineHeight = 1.6,
-    /* System-first, guaranteed monospaced; avoids Android 'ui-monospace' pitfalls */
-    fontFamily = '"SF Mono", SFMono-Regular, Menlo, Monaco, "Cascadia Code", Consolas, "Roboto Mono", "Noto Sans Mono", "Droid Sans Mono", "Ubuntu Mono", "DejaVu Sans Mono", "Liberation Mono", "Courier New", Courier, monospace',
-    padding = "20px",
-    theme = null,
-    mobile = {}
-  } = options;
-  const mobileStyles = Object.keys(mobile).length > 0 ? `
-    @media (max-width: 640px) {
-      .overtype-wrapper .overtype-input,
-      .overtype-wrapper .overtype-preview {
-        ${Object.entries(mobile).map(([prop, val]) => {
-    const cssProp = prop.replace(/([A-Z])/g, "-$1").toLowerCase();
-    return `${cssProp}: ${val} !important;`;
-  }).join("\n        ")}
-      }
+    /* Blockquotes */
+    .overtype-wrapper .overtype-preview .blockquote {
+      color: var(--blockquote, #5a7a9b) !important;
+      padding: 0 !important;
+      margin: 0 !important;
+      border: none !important;
     }
-  ` : "";
-  const themeVars = theme && theme.colors ? themeToCSSVars(theme.colors) : "";
-  return `
-    /* OverType Editor Styles */
-    
-    /* Middle-ground CSS Reset - Prevent parent styles from leaking in */
-    .overtype-container * {
-      /* Box model - these commonly leak */
+
+    /* Links */
+    .overtype-wrapper .overtype-preview a {
+      color: var(--link, #0d3b66) !important;
+      text-decoration: underline !important;
+      font-weight: normal !important;
+    }
+
+    .overtype-wrapper .overtype-preview a:hover {
+      text-decoration: underline !important;
+      color: var(--link, #0d3b66) !important;
+    }
+
+    /* Lists - no list styling */
+    .overtype-wrapper .overtype-preview ul,
+    .overtype-wrapper .overtype-preview ol {
+      list-style: none !important;
       margin: 0 !important;
       padding: 0 !important;
-      border: 0 !important;
-      
-      /* Layout - these can break our layout */
-      /* Don't reset position - it breaks dropdowns */
-      float: none !important;
-      clear: none !important;
-      
-      /* Typography - only reset decorative aspects */
-      text-decoration: none !important;
-      text-transform: none !important;
-      letter-spacing: normal !important;
-      
-      /* Visual effects that can interfere */
-      box-shadow: none !important;
-      text-shadow: none !important;
-      
-      /* Ensure box-sizing is consistent */
-      box-sizing: border-box !important;
-      
-      /* Keep inheritance for these */
-      /* font-family, color, line-height, font-size - inherit */
     }
-    
-    /* Container base styles after reset */
-    .overtype-container {
-      display: flex !important;
-      flex-direction: column !important;
-      width: 100% !important;
-      height: 100% !important;
-      position: relative !important; /* Override reset - needed for absolute children */
-      overflow: visible !important; /* Allow dropdown to overflow container */
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
-      text-align: left !important;
-      ${themeVars ? `
-      /* Theme Variables */
-      ${themeVars}` : ""}
+
+
+    /* Horizontal rules */
+    .overtype-wrapper .overtype-preview hr {
+      border: none !important;
+      color: var(--hr, #5a7a9b) !important;
+      margin: 0 !important;
+      padding: 0 !important;
+    }
+
+    .overtype-wrapper .overtype-preview .hr-marker {
+      color: var(--hr, #5a7a9b) !important;
+      opacity: 0.6 !important;
+    }
+
+    /* Code fence markers - with background when not in code block */
+    .overtype-wrapper .overtype-preview .code-fence {
+      color: var(--code, #0d3b66) !important;
+      background: var(--code-bg, rgba(244, 211, 94, 0.4)) !important;
     }
     
-    /* Force left alignment for all elements in the editor */
-    .overtype-container .overtype-wrapper * {
-      text-align: left !important;
+    /* Code block lines - background for entire code block */
+    .overtype-wrapper .overtype-preview .code-block-line {
+      background: var(--code-bg, rgba(244, 211, 94, 0.4)) !important;
     }
     
-    /* Auto-resize mode styles */
-    .overtype-container.overtype-auto-resize {
-      height: auto !important;
+    /* Remove background from code fence when inside code block line */
+    .overtype-wrapper .overtype-preview .code-block-line .code-fence {
+      background: transparent !important;
     }
 
-    .overtype-container.overtype-auto-resize .overtype-wrapper {
-      flex: 0 0 auto !important; /* Don't grow/shrink, use explicit height */
-      height: auto !important;
-      min-height: 60px !important;
-      overflow: visible !important;
+    /* Raw markdown line */
+    .overtype-wrapper .overtype-preview .raw-line {
+      color: var(--raw-line, #5a7a9b) !important;
+      font-style: normal !important;
+      font-weight: normal !important;
     }
-    
-    .overtype-wrapper {
-      position: relative !important; /* Override reset - needed for absolute children */
-      width: 100% !important;
-      flex: 1 1 0 !important; /* Grow to fill remaining space, with flex-basis: 0 */
-      min-height: 60px !important; /* Minimum usable height */
-      overflow: hidden !important;
-      background: var(--bg-secondary, #ffffff) !important;
-      z-index: 1; /* Below toolbar and dropdown */
+
+    /* Syntax markers */
+    .overtype-wrapper .overtype-preview .syntax-marker {
+      color: var(--syntax-marker, rgba(13, 59, 102, 0.52)) !important;
+      opacity: 0.7 !important;
     }
 
-    /* Critical alignment styles - must be identical for both layers */
-    .overtype-wrapper .overtype-input,
-    .overtype-wrapper .overtype-preview {
-      /* Positioning - must be identical */
-      position: absolute !important; /* Override reset - required for overlay */
-      top: 0 !important;
-      left: 0 !important;
-      width: 100% !important;
-      height: 100% !important;
-      
-      /* Font properties - any difference breaks alignment */
-      font-family: ${fontFamily} !important;
-      font-variant-ligatures: none !important; /* keep metrics stable for code */
-      font-size: var(--instance-font-size, ${fontSize}) !important;
-      line-height: var(--instance-line-height, ${lineHeight}) !important;
-      font-weight: normal !important;
-      font-style: normal !important;
-      font-variant: normal !important;
-      font-stretch: normal !important;
-      font-kerning: none !important;
-      font-feature-settings: normal !important;
-      
-      /* Box model - must match exactly */
-      padding: var(--instance-padding, ${padding}) !important;
-      margin: 0 !important;
-      border: none !important;
-      outline: none !important;
-      box-sizing: border-box !important;
-      
-      /* Text layout - critical for character positioning */
-      white-space: pre-wrap !important;
-      word-wrap: break-word !important;
-      word-break: normal !important;
-      overflow-wrap: break-word !important;
-      tab-size: 2 !important;
-      -moz-tab-size: 2 !important;
-      text-align: left !important;
-      text-indent: 0 !important;
-      letter-spacing: normal !important;
-      word-spacing: normal !important;
-      
-      /* Text rendering */
-      text-transform: none !important;
-      text-rendering: auto !important;
-      -webkit-font-smoothing: auto !important;
-      -webkit-text-size-adjust: 100% !important;
-      
-      /* Direction and writing */
-      direction: ltr !important;
-      writing-mode: horizontal-tb !important;
-      unicode-bidi: normal !important;
-      text-orientation: mixed !important;
-      
-      /* Visual effects that could shift perception */
-      text-shadow: none !important;
-      filter: none !important;
-      transform: none !important;
-      zoom: 1 !important;
-      
-      /* Vertical alignment */
-      vertical-align: baseline !important;
-      
-      /* Size constraints */
-      min-width: 0 !important;
-      min-height: 0 !important;
-      max-width: none !important;
-      max-height: none !important;
-      
-      /* Overflow */
-      overflow-y: auto !important;
-      overflow-x: auto !important;
-      /* overscroll-behavior removed to allow scroll-through to parent */
-      scrollbar-width: auto !important;
-      scrollbar-gutter: auto !important;
-      
-      /* Animation/transition - disabled to prevent movement */
-      animation: none !important;
-      transition: none !important;
+    /* List markers */
+    .overtype-wrapper .overtype-preview .list-marker {
+      color: var(--list-marker, #ee964b) !important;
+    }
+
+    /* Stats bar */
+    
+    /* Stats bar - positioned by flexbox */
+    .overtype-stats {
+      height: 40px !important;
+      padding: 0 20px !important;
+      background: #f8f9fa !important;
+      border-top: 1px solid #e0e0e0 !important;
+      display: flex !important;
+      justify-content: space-between !important;
+      align-items: center !important;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
+      font-size: 0.85rem !important;
+      color: #666 !important;
+      flex-shrink: 0 !important; /* Don't shrink */
+      z-index: 10001 !important; /* Above link tooltip */
+      position: relative !important; /* Enable z-index */
+    }
+    
+    /* Dark theme stats bar */
+    .overtype-container[data-theme="cave"] .overtype-stats {
+      background: var(--bg-secondary, #1D2D3E) !important;
+      border-top: 1px solid rgba(197, 221, 232, 0.1) !important;
+      color: var(--text, #c5dde8) !important;
+    }
+    
+    .overtype-stats .overtype-stat {
+      display: flex !important;
+      align-items: center !important;
+      gap: 5px !important;
+      white-space: nowrap !important;
+    }
+    
+    .overtype-stats .live-dot {
+      width: 8px !important;
+      height: 8px !important;
+      background: #4caf50 !important;
+      border-radius: 50% !important;
+      animation: overtype-pulse 2s infinite !important;
+    }
+    
+    @keyframes overtype-pulse {
+      0%, 100% { opacity: 1; transform: scale(1); }
+      50% { opacity: 0.6; transform: scale(1.2); }
     }
+    
 
-    /* Input layer styles */
-    .overtype-wrapper .overtype-input {
-      /* Layer positioning */
-      z-index: 1 !important;
-      
-      /* Text visibility */
-      color: transparent !important;
-      caret-color: var(--cursor, #f95738) !important;
-      background-color: transparent !important;
-      
-      /* Textarea-specific */
-      resize: none !important;
-      appearance: none !important;
-      -webkit-appearance: none !important;
-      -moz-appearance: none !important;
-      
-      /* Prevent mobile zoom on focus */
-      touch-action: manipulation !important;
-      
-      /* Disable autofill and spellcheck */
-      autocomplete: off !important;
-      autocorrect: off !important;
-      autocapitalize: off !important;
-      spellcheck: false !important;
+    /* Toolbar Styles */
+    .overtype-toolbar {
+      display: flex !important;
+      align-items: center !important;
+      gap: 4px !important;
+      padding: 8px !important; /* Override reset */
+      background: var(--toolbar-bg, var(--bg-primary, #f8f9fa)) !important; /* Override reset */
+      border-bottom: 1px solid var(--toolbar-border, transparent) !important; /* Override reset */
+      overflow-x: auto !important; /* Allow horizontal scrolling */
+      overflow-y: hidden !important; /* Hide vertical overflow */
+      -webkit-overflow-scrolling: touch !important;
+      flex-shrink: 0 !important;
+      height: auto !important;
+      position: relative !important; /* Override reset */
+      z-index: 100 !important; /* Ensure toolbar is above wrapper */
+      scrollbar-width: thin; /* Thin scrollbar on Firefox */
+    }
+    
+    /* Thin scrollbar styling */
+    .overtype-toolbar::-webkit-scrollbar {
+      height: 4px;
+    }
+    
+    .overtype-toolbar::-webkit-scrollbar-track {
+      background: transparent;
+    }
+    
+    .overtype-toolbar::-webkit-scrollbar-thumb {
+      background: rgba(0, 0, 0, 0.2);
+      border-radius: 2px;
     }
 
-    .overtype-wrapper .overtype-input::selection {
-      background-color: var(--selection, rgba(244, 211, 94, 0.4));
+    .overtype-toolbar-button {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 32px;
+      height: 32px;
+      padding: 0;
+      border: none;
+      border-radius: 6px;
+      background: transparent;
+      color: var(--toolbar-icon, var(--text-secondary, #666));
+      cursor: pointer;
+      transition: all 0.2s ease;
+      flex-shrink: 0;
     }
 
-    /* Preview layer styles */
-    .overtype-wrapper .overtype-preview {
-      /* Layer positioning */
-      z-index: 0 !important;
-      pointer-events: none !important;
-      color: var(--text, #0d3b66) !important;
-      background-color: transparent !important;
-      
-      /* Prevent text selection */
-      user-select: none !important;
-      -webkit-user-select: none !important;
-      -moz-user-select: none !important;
-      -ms-user-select: none !important;
+    .overtype-toolbar-button svg {
+      width: 20px;
+      height: 20px;
+      fill: currentColor;
     }
 
-    /* Defensive styles for preview child divs */
-    .overtype-wrapper .overtype-preview div {
-      /* Reset any inherited styles */
-      margin: 0 !important;
-      padding: 0 !important;
-      border: none !important;
-      text-align: left !important;
-      text-indent: 0 !important;
-      display: block !important;
-      position: static !important;
-      transform: none !important;
-      min-height: 0 !important;
-      max-height: none !important;
-      line-height: inherit !important;
-      font-size: inherit !important;
-      font-family: inherit !important;
+    .overtype-toolbar-button:hover {
+      background: var(--toolbar-hover, var(--bg-secondary, #e9ecef));
+      color: var(--toolbar-icon, var(--text-primary, #333));
     }
 
-    /* Markdown element styling - NO SIZE CHANGES */
-    .overtype-wrapper .overtype-preview .header {
-      font-weight: bold !important;
+    .overtype-toolbar-button:active {
+      transform: scale(0.95);
     }
 
-    /* Header colors */
-    .overtype-wrapper .overtype-preview .h1 { 
-      color: var(--h1, #f95738) !important; 
+    .overtype-toolbar-button.active {
+      background: var(--toolbar-active, var(--primary, #007bff));
+      color: var(--toolbar-icon, var(--text-primary, #333));
     }
-    .overtype-wrapper .overtype-preview .h2 { 
-      color: var(--h2, #ee964b) !important; 
+
+    .overtype-toolbar-button:disabled {
+      opacity: 0.5;
+      cursor: not-allowed;
     }
-    .overtype-wrapper .overtype-preview .h3 { 
-      color: var(--h3, #3d8a51) !important; 
+
+    .overtype-toolbar-separator {
+      width: 1px;
+      height: 24px;
+      background: var(--border, #e0e0e0);
+      margin: 0 4px;
+      flex-shrink: 0;
     }
 
-    /* Semantic headers - flatten in edit mode */
-    .overtype-wrapper .overtype-preview h1,
-    .overtype-wrapper .overtype-preview h2,
-    .overtype-wrapper .overtype-preview h3 {
-      font-size: inherit !important;
-      font-weight: bold !important;
-      margin: 0 !important;
-      padding: 0 !important;
-      display: inline !important;
-      line-height: inherit !important;
+    /* Adjust wrapper when toolbar is present */
+    /* Mobile toolbar adjustments */
+    @media (max-width: 640px) {
+      .overtype-toolbar {
+        padding: 6px;
+        gap: 2px;
+      }
+
+      .overtype-toolbar-button {
+        width: 36px;
+        height: 36px;
+      }
+
+      .overtype-toolbar-separator {
+        margin: 0 2px;
+      }
+    }
+    
+    /* Plain mode - hide preview and show textarea text */
+    .overtype-container[data-mode="plain"] .overtype-preview {
+      display: none !important;
+    }
+    
+    .overtype-container[data-mode="plain"] .overtype-input {
+      color: var(--text, #0d3b66) !important;
+      /* Use system font stack for better plain text readability */
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 
+                   "Helvetica Neue", Arial, sans-serif !important;
+    }
+    
+    /* Ensure textarea remains transparent in overlay mode */
+    .overtype-container:not([data-mode="plain"]) .overtype-input {
+      color: transparent !important;
     }
 
-    /* Header colors for semantic headers */
-    .overtype-wrapper .overtype-preview h1 { 
-      color: var(--h1, #f95738) !important; 
+    /* Dropdown menu styles */
+    .overtype-toolbar-button {
+      position: relative !important; /* Override reset - needed for dropdown */
     }
-    .overtype-wrapper .overtype-preview h2 { 
-      color: var(--h2, #ee964b) !important; 
+
+    .overtype-toolbar-button.dropdown-active {
+      background: var(--toolbar-active, var(--hover-bg, #f0f0f0));
     }
-    .overtype-wrapper .overtype-preview h3 { 
-      color: var(--h3, #3d8a51) !important; 
+
+    .overtype-dropdown-menu {
+      position: fixed !important; /* Fixed positioning relative to viewport */
+      background: var(--bg-secondary, white) !important; /* Override reset */
+      border: 1px solid var(--border, #e0e0e0) !important; /* Override reset */
+      border-radius: 6px;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important; /* Override reset */
+      z-index: 10000; /* Very high z-index to ensure visibility */
+      min-width: 150px;
+      padding: 4px 0 !important; /* Override reset */
+      /* Position will be set via JavaScript based on button position */
     }
 
-    /* Lists - remove styling in edit mode */
-    .overtype-wrapper .overtype-preview ul,
-    .overtype-wrapper .overtype-preview ol {
-      list-style: none !important;
-      margin: 0 !important;
-      padding: 0 !important;
-      display: block !important; /* Lists need to be block for line breaks */
+    .overtype-dropdown-item {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      padding: 8px 12px;
+      border: none;
+      background: none;
+      text-align: left;
+      cursor: pointer;
+      font-size: 14px;
+      color: var(--text, #333);
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
     }
 
-    .overtype-wrapper .overtype-preview li {
-      display: block !important; /* Each item on its own line */
-      margin: 0 !important;
-      padding: 0 !important;
-      /* Don't set list-style here - let ul/ol control it */
+    .overtype-dropdown-item:hover {
+      background: var(--hover-bg, #f0f0f0);
     }
 
-    /* Bold text */
-    .overtype-wrapper .overtype-preview strong {
-      color: var(--strong, #ee964b) !important;
-      font-weight: bold !important;
+    .overtype-dropdown-item.active {
+      font-weight: 600;
+    }
+
+    .overtype-dropdown-check {
+      width: 16px;
+      margin-right: 8px;
+      color: var(--h1, #007bff);
     }
 
-    /* Italic text */
-    .overtype-wrapper .overtype-preview em {
-      color: var(--em, #f95738) !important;
-      text-decoration-color: var(--em, #f95738) !important;
-      text-decoration-thickness: 1px !important;
-      font-style: italic !important;
+    .overtype-dropdown-icon {
+      width: 20px;
+      margin-right: 8px;
+      text-align: center;
     }
 
-    /* Strikethrough text */
-    .overtype-wrapper .overtype-preview del {
-      color: var(--del, #ee964b) !important;
-      text-decoration: line-through !important;
-      text-decoration-color: var(--del, #ee964b) !important;
-      text-decoration-thickness: 1px !important;
+    /* Preview mode styles */
+    .overtype-container[data-mode="preview"] .overtype-input {
+      display: none !important;
     }
 
-    /* Inline code */
-    .overtype-wrapper .overtype-preview code {
-      background: var(--code-bg, rgba(244, 211, 94, 0.4)) !important;
-      color: var(--code, #0d3b66) !important;
-      padding: 0 !important;
-      border-radius: 2px !important;
-      font-family: inherit !important;
-      font-size: inherit !important;
-      line-height: inherit !important;
-      font-weight: normal !important;
+    .overtype-container[data-mode="preview"] .overtype-preview {
+      pointer-events: auto !important;
+      user-select: text !important;
+      cursor: text !important;
     }
 
-    /* Code blocks - consolidated pre blocks */
-    .overtype-wrapper .overtype-preview pre {
-      padding: 0 !important;
-      margin: 0 !important;
-      border-radius: 4px !important;
-      overflow-x: auto !important;
+    /* Hide syntax markers in preview mode */
+    .overtype-container[data-mode="preview"] .syntax-marker {
+      display: none !important;
     }
     
-    /* Code block styling in normal mode - yellow background */
-    .overtype-wrapper .overtype-preview pre.code-block {
-      background: var(--code-bg, rgba(244, 211, 94, 0.4)) !important;
-      white-space: break-spaces !important; /* Prevent horizontal scrollbar that breaks alignment */
+    /* Hide URL part of links in preview mode - extra specificity */
+    .overtype-container[data-mode="preview"] .syntax-marker.url-part,
+    .overtype-container[data-mode="preview"] .url-part {
+      display: none !important;
     }
-
-    /* Code inside pre blocks - remove background */
-    .overtype-wrapper .overtype-preview pre code {
-      background: transparent !important;
-      color: var(--code, #0d3b66) !important;
-      font-family: ${fontFamily} !important; /* Match textarea font exactly for alignment */
+    
+    /* Hide all syntax markers inside links too */
+    .overtype-container[data-mode="preview"] a .syntax-marker {
+      display: none !important;
     }
 
-    /* Blockquotes */
-    .overtype-wrapper .overtype-preview .blockquote {
-      color: var(--blockquote, #5a7a9b) !important;
-      padding: 0 !important;
+    /* Headers - restore proper sizing in preview mode */
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h1, 
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h2, 
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h3 {
+      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
+      font-weight: 600 !important;
       margin: 0 !important;
-      border: none !important;
+      display: block !important;
+      color: inherit !important; /* Use parent text color */
+      line-height: 1 !important; /* Tight line height for headings */
     }
-
-    /* Links */
-    .overtype-wrapper .overtype-preview a {
-      color: var(--link, #0d3b66) !important;
-      text-decoration: underline !important;
-      font-weight: normal !important;
+    
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h1 { 
+      font-size: 2em !important; 
     }
-
-    .overtype-wrapper .overtype-preview a:hover {
-      text-decoration: underline !important;
-      color: var(--link, #0d3b66) !important;
+    
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h2 { 
+      font-size: 1.5em !important; 
     }
-
-    /* Lists - no list styling */
-    .overtype-wrapper .overtype-preview ul,
-    .overtype-wrapper .overtype-preview ol {
-      list-style: none !important;
-      margin: 0 !important;
-      padding: 0 !important;
+    
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h3 { 
+      font-size: 1.17em !important; 
     }
 
+    /* Lists - restore list styling in preview mode */
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview ul {
+      display: block !important;
+      list-style: disc !important;
+      padding-left: 2em !important;
+      margin: 1em 0 !important;
+    }
 
-    /* Horizontal rules */
-    .overtype-wrapper .overtype-preview hr {
-      border: none !important;
-      color: var(--hr, #5a7a9b) !important;
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview ol {
+      display: block !important;
+      list-style: decimal !important;
+      padding-left: 2em !important;
+      margin: 1em 0 !important;
+    }
+    
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview li {
+      display: list-item !important;
       margin: 0 !important;
       padding: 0 !important;
     }
 
-    .overtype-wrapper .overtype-preview .hr-marker {
-      color: var(--hr, #5a7a9b) !important;
-      opacity: 0.6 !important;
+    /* Task list checkboxes - only in preview mode */
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview li.task-list {
+      list-style: none !important;
+      position: relative !important;
     }
 
-    /* Code fence markers - with background when not in code block */
-    .overtype-wrapper .overtype-preview .code-fence {
-      color: var(--code, #0d3b66) !important;
-      background: var(--code-bg, rgba(244, 211, 94, 0.4)) !important;
-    }
-    
-    /* Code block lines - background for entire code block */
-    .overtype-wrapper .overtype-preview .code-block-line {
-      background: var(--code-bg, rgba(244, 211, 94, 0.4)) !important;
-    }
-    
-    /* Remove background from code fence when inside code block line */
-    .overtype-wrapper .overtype-preview .code-block-line .code-fence {
-      background: transparent !important;
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview li.task-list input[type="checkbox"] {
+      margin-right: 0.5em !important;
+      cursor: default !important;
+      vertical-align: middle !important;
     }
 
-    /* Raw markdown line */
-    .overtype-wrapper .overtype-preview .raw-line {
-      color: var(--raw-line, #5a7a9b) !important;
-      font-style: normal !important;
-      font-weight: normal !important;
+    /* Task list in normal mode - keep syntax visible */
+    .overtype-container:not([data-mode="preview"]) .overtype-wrapper .overtype-preview li.task-list {
+      list-style: none !important;
     }
 
-    /* Syntax markers */
-    .overtype-wrapper .overtype-preview .syntax-marker {
-      color: var(--syntax-marker, rgba(13, 59, 102, 0.52)) !important;
-      opacity: 0.7 !important;
+    .overtype-container:not([data-mode="preview"]) .overtype-wrapper .overtype-preview li.task-list .syntax-marker {
+      color: var(--syntax, #999999) !important;
+      font-weight: normal !important;
     }
 
-    /* List markers */
-    .overtype-wrapper .overtype-preview .list-marker {
-      color: var(--list-marker, #ee964b) !important;
+    /* Links - make clickable in preview mode */
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview a {
+      pointer-events: auto !important;
+      cursor: pointer !important;
+      color: var(--link, #0066cc) !important;
+      text-decoration: underline !important;
     }
 
-    /* Stats bar */
-    
-    /* Stats bar - positioned by flexbox */
-    .overtype-stats {
-      height: 40px !important;
-      padding: 0 20px !important;
-      background: #f8f9fa !important;
-      border-top: 1px solid #e0e0e0 !important;
-      display: flex !important;
-      justify-content: space-between !important;
-      align-items: center !important;
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
-      font-size: 0.85rem !important;
-      color: #666 !important;
-      flex-shrink: 0 !important; /* Don't shrink */
-      z-index: 10001 !important; /* Above link tooltip */
-      position: relative !important; /* Enable z-index */
+    /* Code blocks - proper pre/code styling in preview mode */
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview pre.code-block {
+      background: #2d2d2d !important;
+      color: #f8f8f2 !important;
+      padding: 1.2em !important;
+      border-radius: 3px !important;
+      overflow-x: auto !important;
+      margin: 0 !important;
+      display: block !important;
     }
     
-    /* Dark theme stats bar */
-    .overtype-container[data-theme="cave"] .overtype-stats {
-      background: var(--bg-secondary, #1D2D3E) !important;
-      border-top: 1px solid rgba(197, 221, 232, 0.1) !important;
-      color: var(--text, #c5dde8) !important;
+    /* Cave theme code block background in preview mode */
+    .overtype-container[data-theme="cave"][data-mode="preview"] .overtype-wrapper .overtype-preview pre.code-block {
+      background: #11171F !important;
     }
-    
-    .overtype-stats .overtype-stat {
-      display: flex !important;
-      align-items: center !important;
-      gap: 5px !important;
-      white-space: nowrap !important;
+
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview pre.code-block code {
+      background: transparent !important;
+      color: inherit !important;
+      padding: 0 !important;
+      font-family: ${fontFamily} !important;
+      font-size: 0.9em !important;
+      line-height: 1.4 !important;
     }
-    
-    .overtype-stats .live-dot {
-      width: 8px !important;
-      height: 8px !important;
-      background: #4caf50 !important;
-      border-radius: 50% !important;
-      animation: overtype-pulse 2s infinite !important;
+
+    /* Hide old code block lines and fences in preview mode */
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview .code-block-line {
+      display: none !important;
     }
-    
-    @keyframes overtype-pulse {
-      0%, 100% { opacity: 1; transform: scale(1); }
-      50% { opacity: 0.6; transform: scale(1.2); }
+
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview .code-fence {
+      display: none !important;
     }
-    
 
-    /* Toolbar Styles */
-    .overtype-toolbar {
-      display: flex !important;
-      align-items: center !important;
-      gap: 4px !important;
-      padding: 8px !important; /* Override reset */
-      background: var(--toolbar-bg, var(--bg-primary, #f8f9fa)) !important; /* Override reset */
-      border-bottom: 1px solid var(--toolbar-border, transparent) !important; /* Override reset */
-      overflow-x: auto !important; /* Allow horizontal scrolling */
-      overflow-y: hidden !important; /* Hide vertical overflow */
-      -webkit-overflow-scrolling: touch !important;
-      flex-shrink: 0 !important;
-      height: auto !important;
-      position: relative !important; /* Override reset */
-      z-index: 100 !important; /* Ensure toolbar is above wrapper */
-      scrollbar-width: thin; /* Thin scrollbar on Firefox */
+    /* Blockquotes - enhanced styling in preview mode */
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview .blockquote {
+      display: block !important;
+      border-left: 4px solid var(--blockquote, #ddd) !important;
+      padding-left: 1em !important;
+      margin: 1em 0 !important;
+      font-style: italic !important;
     }
-    
-    /* Thin scrollbar styling */
-    .overtype-toolbar::-webkit-scrollbar {
-      height: 4px;
+
+    /* Typography improvements in preview mode */
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview {
+      font-family: Georgia, 'Times New Roman', serif !important;
+      font-size: 16px !important;
+      line-height: 1.8 !important;
+      color: var(--text, #333) !important; /* Consistent text color */
     }
-    
-    .overtype-toolbar::-webkit-scrollbar-track {
-      background: transparent;
+
+    /* Inline code in preview mode - keep monospace */
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview code {
+      font-family: ${fontFamily} !important;
+      font-size: 0.9em !important;
+      background: rgba(135, 131, 120, 0.15) !important;
+      padding: 0.2em 0.4em !important;
+      border-radius: 3px !important;
     }
-    
-    .overtype-toolbar::-webkit-scrollbar-thumb {
-      background: rgba(0, 0, 0, 0.2);
-      border-radius: 2px;
+
+    /* Strong and em elements in preview mode */
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview strong {
+      font-weight: 700 !important;
+      color: inherit !important; /* Use parent text color */
     }
 
-    .overtype-toolbar-button {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      width: 32px;
-      height: 32px;
-      padding: 0;
-      border: none;
-      border-radius: 6px;
-      background: transparent;
-      color: var(--toolbar-icon, var(--text-secondary, #666));
-      cursor: pointer;
-      transition: all 0.2s ease;
-      flex-shrink: 0;
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview em {
+      font-style: italic !important;
+      color: inherit !important; /* Use parent text color */
     }
 
-    .overtype-toolbar-button svg {
-      width: 20px;
-      height: 20px;
-      fill: currentColor;
+    /* HR in preview mode */
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview .hr-marker {
+      display: block !important;
+      border-top: 2px solid var(--hr, #ddd) !important;
+      text-indent: -9999px !important;
+      height: 2px !important;
     }
 
-    .overtype-toolbar-button:hover {
-      background: var(--toolbar-hover, var(--bg-secondary, #e9ecef));
-      color: var(--toolbar-icon, var(--text-primary, #333));
+    /* Link Tooltip - Base styles (all browsers) */
+    .overtype-link-tooltip {
+      /* Visual styles that work for both positioning methods */
+      background: #333 !important;
+      color: white !important;
+      padding: 6px 10px !important;
+      border-radius: 16px !important;
+      font-size: 12px !important;
+      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
+      display: none !important;
+      z-index: 10000 !important;
+      cursor: pointer !important;
+      box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
+      max-width: 300px !important;
+      white-space: nowrap !important;
+      overflow: hidden !important;
+      text-overflow: ellipsis !important;
+
+      /* Base positioning for Floating UI fallback */
+      position: absolute;
     }
 
-    .overtype-toolbar-button:active {
-      transform: scale(0.95);
+    .overtype-link-tooltip.visible {
+      display: flex !important;
     }
 
-    .overtype-toolbar-button.active {
-      background: var(--toolbar-active, var(--primary, #007bff));
-      color: var(--toolbar-icon, var(--text-primary, #333));
+    /* CSS Anchor Positioning (modern browsers only) */
+    @supports (position-anchor: --x) and (position-area: center) {
+      .overtype-link-tooltip {
+        /* Only anchor positioning specific properties */
+        position-anchor: var(--target-anchor, --link-0);
+        position-area: block-end center;
+        margin-top: 8px !important;
+        position-try: most-width block-end inline-end, flip-inline, block-start center;
+        position-visibility: anchors-visible;
+      }
     }
 
-    .overtype-toolbar-button:disabled {
-      opacity: 0.5;
-      cursor: not-allowed;
+    ${mobileStyles}
+  `;
+}
+
+// node_modules/markdown-actions/dist/markdown-actions.esm.js
+var __defProp2 = Object.defineProperty;
+var __getOwnPropSymbols = Object.getOwnPropertySymbols;
+var __hasOwnProp = Object.prototype.hasOwnProperty;
+var __propIsEnum = Object.prototype.propertyIsEnumerable;
+var __defNormalProp2 = (obj, key, value) => key in obj ? __defProp2(obj, key, { enumerable: true, configurable: true, writable: true, value }) : obj[key] = value;
+var __spreadValues = (a, b) => {
+  for (var prop in b || (b = {}))
+    if (__hasOwnProp.call(b, prop))
+      __defNormalProp2(a, prop, b[prop]);
+  if (__getOwnPropSymbols)
+    for (var prop of __getOwnPropSymbols(b)) {
+      if (__propIsEnum.call(b, prop))
+        __defNormalProp2(a, prop, b[prop]);
+    }
+  return a;
+};
+var FORMATS = {
+  bold: {
+    prefix: "**",
+    suffix: "**",
+    trimFirst: true
+  },
+  italic: {
+    prefix: "_",
+    suffix: "_",
+    trimFirst: true
+  },
+  code: {
+    prefix: "`",
+    suffix: "`",
+    blockPrefix: "```",
+    blockSuffix: "```"
+  },
+  link: {
+    prefix: "[",
+    suffix: "](url)",
+    replaceNext: "url",
+    scanFor: "https?://"
+  },
+  bulletList: {
+    prefix: "- ",
+    multiline: true,
+    unorderedList: true
+  },
+  numberedList: {
+    prefix: "1. ",
+    multiline: true,
+    orderedList: true
+  },
+  quote: {
+    prefix: "> ",
+    multiline: true,
+    surroundWithNewlines: true
+  },
+  taskList: {
+    prefix: "- [ ] ",
+    multiline: true,
+    surroundWithNewlines: true
+  },
+  header1: { prefix: "# " },
+  header2: { prefix: "## " },
+  header3: { prefix: "### " },
+  header4: { prefix: "#### " },
+  header5: { prefix: "##### " },
+  header6: { prefix: "###### " }
+};
+function getDefaultStyle() {
+  return {
+    prefix: "",
+    suffix: "",
+    blockPrefix: "",
+    blockSuffix: "",
+    multiline: false,
+    replaceNext: "",
+    prefixSpace: false,
+    scanFor: "",
+    surroundWithNewlines: false,
+    orderedList: false,
+    unorderedList: false,
+    trimFirst: false
+  };
+}
+function mergeWithDefaults(format) {
+  return __spreadValues(__spreadValues({}, getDefaultStyle()), format);
+}
+var debugMode = false;
+function getDebugMode() {
+  return debugMode;
+}
+function debugLog(funcName, message, data) {
+  if (!debugMode)
+    return;
+  console.group(`\u{1F50D} ${funcName}`);
+  console.log(message);
+  if (data) {
+    console.log("Data:", data);
+  }
+  console.groupEnd();
+}
+function debugSelection(textarea, label) {
+  if (!debugMode)
+    return;
+  const selected = textarea.value.slice(textarea.selectionStart, textarea.selectionEnd);
+  console.group(`\u{1F4CD} Selection: ${label}`);
+  console.log("Position:", `${textarea.selectionStart}-${textarea.selectionEnd}`);
+  console.log("Selected text:", JSON.stringify(selected));
+  console.log("Length:", selected.length);
+  const before = textarea.value.slice(Math.max(0, textarea.selectionStart - 10), textarea.selectionStart);
+  const after = textarea.value.slice(textarea.selectionEnd, Math.min(textarea.value.length, textarea.selectionEnd + 10));
+  console.log("Context:", JSON.stringify(before) + "[SELECTION]" + JSON.stringify(after));
+  console.groupEnd();
+}
+function debugResult(result) {
+  if (!debugMode)
+    return;
+  console.group("\u{1F4DD} Result");
+  console.log("Text to insert:", JSON.stringify(result.text));
+  console.log("New selection:", `${result.selectionStart}-${result.selectionEnd}`);
+  console.groupEnd();
+}
+var canInsertText = null;
+function insertText(textarea, { text, selectionStart, selectionEnd }) {
+  const debugMode2 = getDebugMode();
+  if (debugMode2) {
+    console.group("\u{1F527} insertText");
+    console.log("Current selection:", `${textarea.selectionStart}-${textarea.selectionEnd}`);
+    console.log("Text to insert:", JSON.stringify(text));
+    console.log("New selection to set:", selectionStart, "-", selectionEnd);
+  }
+  textarea.focus();
+  const originalSelectionStart = textarea.selectionStart;
+  const originalSelectionEnd = textarea.selectionEnd;
+  const before = textarea.value.slice(0, originalSelectionStart);
+  const after = textarea.value.slice(originalSelectionEnd);
+  if (debugMode2) {
+    console.log("Before text (last 20):", JSON.stringify(before.slice(-20)));
+    console.log("After text (first 20):", JSON.stringify(after.slice(0, 20)));
+    console.log("Selected text being replaced:", JSON.stringify(textarea.value.slice(originalSelectionStart, originalSelectionEnd)));
+  }
+  const originalValue = textarea.value;
+  const hasSelection = originalSelectionStart !== originalSelectionEnd;
+  if (canInsertText === null || canInsertText === true) {
+    textarea.contentEditable = "true";
+    try {
+      canInsertText = document.execCommand("insertText", false, text);
+      if (debugMode2)
+        console.log("execCommand returned:", canInsertText, "for text with", text.split("\n").length, "lines");
+    } catch (error) {
+      canInsertText = false;
+      if (debugMode2)
+        console.log("execCommand threw error:", error);
     }
-
-    .overtype-toolbar-separator {
-      width: 1px;
-      height: 24px;
-      background: var(--border, #e0e0e0);
-      margin: 0 4px;
-      flex-shrink: 0;
+    textarea.contentEditable = "false";
+  }
+  if (debugMode2) {
+    console.log("canInsertText before:", canInsertText);
+    console.log("execCommand result:", canInsertText);
+  }
+  if (canInsertText) {
+    const expectedValue = before + text + after;
+    const actualValue = textarea.value;
+    if (debugMode2) {
+      console.log("Expected length:", expectedValue.length);
+      console.log("Actual length:", actualValue.length);
     }
-
-    /* Adjust wrapper when toolbar is present */
-    /* Mobile toolbar adjustments */
-    @media (max-width: 640px) {
-      .overtype-toolbar {
-        padding: 6px;
-        gap: 2px;
+    if (actualValue !== expectedValue) {
+      if (debugMode2) {
+        console.log("execCommand changed the value but not as expected");
+        console.log("Expected:", JSON.stringify(expectedValue.slice(0, 100)));
+        console.log("Actual:", JSON.stringify(actualValue.slice(0, 100)));
       }
-
-      .overtype-toolbar-button {
-        width: 36px;
-        height: 36px;
+    }
+  }
+  if (!canInsertText) {
+    if (debugMode2)
+      console.log("Using manual insertion");
+    if (textarea.value === originalValue) {
+      if (debugMode2)
+        console.log("Value unchanged, doing manual replacement");
+      try {
+        document.execCommand("ms-beginUndoUnit");
+      } catch (e) {
       }
-
-      .overtype-toolbar-separator {
-        margin: 0 2px;
+      textarea.value = before + text + after;
+      try {
+        document.execCommand("ms-endUndoUnit");
+      } catch (e) {
       }
+      textarea.dispatchEvent(new CustomEvent("input", { bubbles: true, cancelable: true }));
+    } else {
+      if (debugMode2)
+        console.log("Value was changed by execCommand, skipping manual insertion");
     }
-    
-    /* Plain mode - hide preview and show textarea text */
-    .overtype-container[data-mode="plain"] .overtype-preview {
-      display: none !important;
-    }
-    
-    .overtype-container[data-mode="plain"] .overtype-input {
-      color: var(--text, #0d3b66) !important;
-      /* Use system font stack for better plain text readability */
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, 
-                   "Helvetica Neue", Arial, sans-serif !important;
-    }
-    
-    /* Ensure textarea remains transparent in overlay mode */
-    .overtype-container:not([data-mode="plain"]) .overtype-input {
-      color: transparent !important;
-    }
-
-    /* Dropdown menu styles */
-    .overtype-toolbar-button {
-      position: relative !important; /* Override reset - needed for dropdown */
-    }
-
-    .overtype-toolbar-button.dropdown-active {
-      background: var(--toolbar-active, var(--hover-bg, #f0f0f0));
-    }
-
-    .overtype-dropdown-menu {
-      position: fixed !important; /* Fixed positioning relative to viewport */
-      background: var(--bg-secondary, white) !important; /* Override reset */
-      border: 1px solid var(--border, #e0e0e0) !important; /* Override reset */
-      border-radius: 6px;
-      box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important; /* Override reset */
-      z-index: 10000; /* Very high z-index to ensure visibility */
-      min-width: 150px;
-      padding: 4px 0 !important; /* Override reset */
-      /* Position will be set via JavaScript based on button position */
-    }
-
-    .overtype-dropdown-item {
-      display: flex;
-      align-items: center;
-      width: 100%;
-      padding: 8px 12px;
-      border: none;
-      background: none;
-      text-align: left;
-      cursor: pointer;
-      font-size: 14px;
-      color: var(--text, #333);
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-    }
-
-    .overtype-dropdown-item:hover {
-      background: var(--hover-bg, #f0f0f0);
-    }
-
-    .overtype-dropdown-item.active {
-      font-weight: 600;
-    }
-
-    .overtype-dropdown-check {
-      width: 16px;
-      margin-right: 8px;
-      color: var(--h1, #007bff);
-    }
-
-    .overtype-dropdown-icon {
-      width: 20px;
-      margin-right: 8px;
-      text-align: center;
-    }
-
-    /* Preview mode styles */
-    .overtype-container[data-mode="preview"] .overtype-input {
-      display: none !important;
-    }
-
-    .overtype-container[data-mode="preview"] .overtype-preview {
-      pointer-events: auto !important;
-      user-select: text !important;
-      cursor: text !important;
-    }
-
-    /* Hide syntax markers in preview mode */
-    .overtype-container[data-mode="preview"] .syntax-marker {
-      display: none !important;
-    }
-    
-    /* Hide URL part of links in preview mode - extra specificity */
-    .overtype-container[data-mode="preview"] .syntax-marker.url-part,
-    .overtype-container[data-mode="preview"] .url-part {
-      display: none !important;
-    }
-    
-    /* Hide all syntax markers inside links too */
-    .overtype-container[data-mode="preview"] a .syntax-marker {
-      display: none !important;
-    }
-
-    /* Headers - restore proper sizing in preview mode */
-    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h1, 
-    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h2, 
-    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h3 {
-      font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
-      font-weight: 600 !important;
-      margin: 0 !important;
-      display: block !important;
-      color: inherit !important; /* Use parent text color */
-      line-height: 1 !important; /* Tight line height for headings */
-    }
-    
-    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h1 { 
-      font-size: 2em !important; 
-    }
-    
-    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h2 { 
-      font-size: 1.5em !important; 
-    }
-    
-    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h3 { 
-      font-size: 1.17em !important; 
-    }
-
-    /* Lists - restore list styling in preview mode */
-    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview ul {
-      display: block !important;
-      list-style: disc !important;
-      padding-left: 2em !important;
-      margin: 1em 0 !important;
-    }
-
-    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview ol {
-      display: block !important;
-      list-style: decimal !important;
-      padding-left: 2em !important;
-      margin: 1em 0 !important;
-    }
-    
-    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview li {
-      display: list-item !important;
-      margin: 0 !important;
-      padding: 0 !important;
-    }
-
-    /* Task list checkboxes - only in preview mode */
-    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview li.task-list {
-      list-style: none !important;
-      position: relative !important;
+  }
+  if (debugMode2)
+    console.log("Setting selection range:", selectionStart, selectionEnd);
+  if (selectionStart != null && selectionEnd != null) {
+    textarea.setSelectionRange(selectionStart, selectionEnd);
+  } else {
+    textarea.setSelectionRange(originalSelectionStart, textarea.selectionEnd);
+  }
+  if (debugMode2) {
+    console.log("Final value length:", textarea.value.length);
+    console.groupEnd();
+  }
+}
+function isMultipleLines(string) {
+  return string.trim().split("\n").length > 1;
+}
+function wordSelectionStart(text, i) {
+  let index = i;
+  while (text[index] && text[index - 1] != null && !text[index - 1].match(/\s/)) {
+    index--;
+  }
+  return index;
+}
+function wordSelectionEnd(text, i, multiline) {
+  let index = i;
+  const breakpoint = multiline ? /\n/ : /\s/;
+  while (text[index] && !text[index].match(breakpoint)) {
+    index++;
+  }
+  return index;
+}
+function expandSelectionToLine(textarea) {
+  const lines = textarea.value.split("\n");
+  let counter = 0;
+  for (let index = 0; index < lines.length; index++) {
+    const lineLength = lines[index].length + 1;
+    if (textarea.selectionStart >= counter && textarea.selectionStart < counter + lineLength) {
+      textarea.selectionStart = counter;
     }
-
-    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview li.task-list input[type="checkbox"] {
-      margin-right: 0.5em !important;
-      cursor: default !important;
-      vertical-align: middle !important;
+    if (textarea.selectionEnd >= counter && textarea.selectionEnd < counter + lineLength) {
+      if (index === lines.length - 1) {
+        textarea.selectionEnd = Math.min(counter + lines[index].length, textarea.value.length);
+      } else {
+        textarea.selectionEnd = counter + lineLength - 1;
+      }
     }
-
-    /* Task list in normal mode - keep syntax visible */
-    .overtype-container:not([data-mode="preview"]) .overtype-wrapper .overtype-preview li.task-list {
-      list-style: none !important;
+    counter += lineLength;
+  }
+}
+function expandSelectedText(textarea, prefixToUse, suffixToUse, multiline = false) {
+  if (textarea.selectionStart === textarea.selectionEnd) {
+    textarea.selectionStart = wordSelectionStart(textarea.value, textarea.selectionStart);
+    textarea.selectionEnd = wordSelectionEnd(textarea.value, textarea.selectionEnd, multiline);
+  } else {
+    const expandedSelectionStart = textarea.selectionStart - prefixToUse.length;
+    const expandedSelectionEnd = textarea.selectionEnd + suffixToUse.length;
+    const beginsWithPrefix = textarea.value.slice(expandedSelectionStart, textarea.selectionStart) === prefixToUse;
+    const endsWithSuffix = textarea.value.slice(textarea.selectionEnd, expandedSelectionEnd) === suffixToUse;
+    if (beginsWithPrefix && endsWithSuffix) {
+      textarea.selectionStart = expandedSelectionStart;
+      textarea.selectionEnd = expandedSelectionEnd;
     }
-
-    .overtype-container:not([data-mode="preview"]) .overtype-wrapper .overtype-preview li.task-list .syntax-marker {
-      color: var(--syntax, #999999) !important;
-      font-weight: normal !important;
+  }
+  return textarea.value.slice(textarea.selectionStart, textarea.selectionEnd);
+}
+function newlinesToSurroundSelectedText(textarea) {
+  const beforeSelection = textarea.value.slice(0, textarea.selectionStart);
+  const afterSelection = textarea.value.slice(textarea.selectionEnd);
+  const breaksBefore = beforeSelection.match(/\n*$/);
+  const breaksAfter = afterSelection.match(/^\n*/);
+  const newlinesBeforeSelection = breaksBefore ? breaksBefore[0].length : 0;
+  const newlinesAfterSelection = breaksAfter ? breaksAfter[0].length : 0;
+  let newlinesToAppend = "";
+  let newlinesToPrepend = "";
+  if (beforeSelection.match(/\S/) && newlinesBeforeSelection < 2) {
+    newlinesToAppend = "\n".repeat(2 - newlinesBeforeSelection);
+  }
+  if (afterSelection.match(/\S/) && newlinesAfterSelection < 2) {
+    newlinesToPrepend = "\n".repeat(2 - newlinesAfterSelection);
+  }
+  return { newlinesToAppend, newlinesToPrepend };
+}
+function applyLineOperation(textarea, operation, options = {}) {
+  const originalStart = textarea.selectionStart;
+  const originalEnd = textarea.selectionEnd;
+  const noInitialSelection = originalStart === originalEnd;
+  const value = textarea.value;
+  let lineStart = originalStart;
+  while (lineStart > 0 && value[lineStart - 1] !== "\n") {
+    lineStart--;
+  }
+  if (noInitialSelection) {
+    let lineEnd = originalStart;
+    while (lineEnd < value.length && value[lineEnd] !== "\n") {
+      lineEnd++;
     }
-
-    /* Links - make clickable in preview mode */
-    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview a {
-      pointer-events: auto !important;
-      cursor: pointer !important;
-      color: var(--link, #0066cc) !important;
-      text-decoration: underline !important;
+    textarea.selectionStart = lineStart;
+    textarea.selectionEnd = lineEnd;
+  } else {
+    expandSelectionToLine(textarea);
+  }
+  const result = operation(textarea);
+  if (options.adjustSelection) {
+    const selectedText = textarea.value.slice(textarea.selectionStart, textarea.selectionEnd);
+    const isRemoving = selectedText.startsWith(options.prefix);
+    const adjusted = options.adjustSelection(isRemoving, originalStart, originalEnd, lineStart);
+    result.selectionStart = adjusted.start;
+    result.selectionEnd = adjusted.end;
+  } else if (options.prefix) {
+    const selectedText = textarea.value.slice(textarea.selectionStart, textarea.selectionEnd);
+    const isRemoving = selectedText.startsWith(options.prefix);
+    if (noInitialSelection) {
+      if (isRemoving) {
+        result.selectionStart = Math.max(originalStart - options.prefix.length, lineStart);
+        result.selectionEnd = result.selectionStart;
+      } else {
+        result.selectionStart = originalStart + options.prefix.length;
+        result.selectionEnd = result.selectionStart;
+      }
+    } else {
+      if (isRemoving) {
+        result.selectionStart = Math.max(originalStart - options.prefix.length, lineStart);
+        result.selectionEnd = Math.max(originalEnd - options.prefix.length, lineStart);
+      } else {
+        result.selectionStart = originalStart + options.prefix.length;
+        result.selectionEnd = originalEnd + options.prefix.length;
+      }
     }
-
-    /* Code blocks - proper pre/code styling in preview mode */
-    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview pre.code-block {
-      background: #2d2d2d !important;
-      color: #f8f8f2 !important;
-      padding: 1.2em !important;
-      border-radius: 3px !important;
-      overflow-x: auto !important;
-      margin: 0 !important;
-      display: block !important;
+  }
+  return result;
+}
+function blockStyle(textarea, style) {
+  let newlinesToAppend;
+  let newlinesToPrepend;
+  const { prefix, suffix, blockPrefix, blockSuffix, replaceNext, prefixSpace, scanFor, surroundWithNewlines, trimFirst } = style;
+  const originalSelectionStart = textarea.selectionStart;
+  const originalSelectionEnd = textarea.selectionEnd;
+  let selectedText = textarea.value.slice(textarea.selectionStart, textarea.selectionEnd);
+  let prefixToUse = isMultipleLines(selectedText) && blockPrefix && blockPrefix.length > 0 ? `${blockPrefix}
+` : prefix;
+  let suffixToUse = isMultipleLines(selectedText) && blockSuffix && blockSuffix.length > 0 ? `
+${blockSuffix}` : suffix;
+  if (prefixSpace) {
+    const beforeSelection = textarea.value[textarea.selectionStart - 1];
+    if (textarea.selectionStart !== 0 && beforeSelection != null && !beforeSelection.match(/\s/)) {
+      prefixToUse = ` ${prefixToUse}`;
     }
-    
-    /* Cave theme code block background in preview mode */
-    .overtype-container[data-theme="cave"][data-mode="preview"] .overtype-wrapper .overtype-preview pre.code-block {
-      background: #11171F !important;
+  }
+  selectedText = expandSelectedText(textarea, prefixToUse, suffixToUse, style.multiline);
+  let selectionStart = textarea.selectionStart;
+  let selectionEnd = textarea.selectionEnd;
+  const hasReplaceNext = replaceNext && replaceNext.length > 0 && suffixToUse.indexOf(replaceNext) > -1 && selectedText.length > 0;
+  if (surroundWithNewlines) {
+    const ref = newlinesToSurroundSelectedText(textarea);
+    newlinesToAppend = ref.newlinesToAppend;
+    newlinesToPrepend = ref.newlinesToPrepend;
+    prefixToUse = newlinesToAppend + prefix;
+    suffixToUse += newlinesToPrepend;
+  }
+  if (selectedText.startsWith(prefixToUse) && selectedText.endsWith(suffixToUse)) {
+    const replacementText = selectedText.slice(prefixToUse.length, selectedText.length - suffixToUse.length);
+    if (originalSelectionStart === originalSelectionEnd) {
+      let position = originalSelectionStart - prefixToUse.length;
+      position = Math.max(position, selectionStart);
+      position = Math.min(position, selectionStart + replacementText.length);
+      selectionStart = selectionEnd = position;
+    } else {
+      selectionEnd = selectionStart + replacementText.length;
     }
-
-    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview pre.code-block code {
-      background: transparent !important;
-      color: inherit !important;
-      padding: 0 !important;
-      font-family: ${fontFamily} !important;
-      font-size: 0.9em !important;
-      line-height: 1.4 !important;
+    return { text: replacementText, selectionStart, selectionEnd };
+  } else if (!hasReplaceNext) {
+    let replacementText = prefixToUse + selectedText + suffixToUse;
+    selectionStart = originalSelectionStart + prefixToUse.length;
+    selectionEnd = originalSelectionEnd + prefixToUse.length;
+    const whitespaceEdges = selectedText.match(/^\s*|\s*$/g);
+    if (trimFirst && whitespaceEdges) {
+      const leadingWhitespace = whitespaceEdges[0] || "";
+      const trailingWhitespace = whitespaceEdges[1] || "";
+      replacementText = leadingWhitespace + prefixToUse + selectedText.trim() + suffixToUse + trailingWhitespace;
+      selectionStart += leadingWhitespace.length;
+      selectionEnd -= trailingWhitespace.length;
     }
-
-    /* Hide old code block lines and fences in preview mode */
-    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview .code-block-line {
-      display: none !important;
+    return { text: replacementText, selectionStart, selectionEnd };
+  } else if (scanFor && scanFor.length > 0 && selectedText.match(scanFor)) {
+    suffixToUse = suffixToUse.replace(replaceNext, selectedText);
+    const replacementText = prefixToUse + suffixToUse;
+    selectionStart = selectionEnd = selectionStart + prefixToUse.length;
+    return { text: replacementText, selectionStart, selectionEnd };
+  } else {
+    const replacementText = prefixToUse + selectedText + suffixToUse;
+    selectionStart = selectionStart + prefixToUse.length + selectedText.length + suffixToUse.indexOf(replaceNext);
+    selectionEnd = selectionStart + replaceNext.length;
+    return { text: replacementText, selectionStart, selectionEnd };
+  }
+}
+function multilineStyle(textarea, style) {
+  const { prefix, suffix, surroundWithNewlines } = style;
+  let text = textarea.value.slice(textarea.selectionStart, textarea.selectionEnd);
+  let selectionStart = textarea.selectionStart;
+  let selectionEnd = textarea.selectionEnd;
+  const lines = text.split("\n");
+  const undoStyle = lines.every((line) => line.startsWith(prefix) && (!suffix || line.endsWith(suffix)));
+  if (undoStyle) {
+    text = lines.map((line) => {
+      let result = line.slice(prefix.length);
+      if (suffix) {
+        result = result.slice(0, result.length - suffix.length);
+      }
+      return result;
+    }).join("\n");
+    selectionEnd = selectionStart + text.length;
+  } else {
+    text = lines.map((line) => prefix + line + (suffix || "")).join("\n");
+    if (surroundWithNewlines) {
+      const { newlinesToAppend, newlinesToPrepend } = newlinesToSurroundSelectedText(textarea);
+      selectionStart += newlinesToAppend.length;
+      selectionEnd = selectionStart + text.length;
+      text = newlinesToAppend + text + newlinesToPrepend;
     }
-
-    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview .code-fence {
-      display: none !important;
+  }
+  return { text, selectionStart, selectionEnd };
+}
+function undoOrderedListStyle(text) {
+  const lines = text.split("\n");
+  const orderedListRegex = /^\d+\.\s+/;
+  const shouldUndoOrderedList = lines.every((line) => orderedListRegex.test(line));
+  let result = lines;
+  if (shouldUndoOrderedList) {
+    result = lines.map((line) => line.replace(orderedListRegex, ""));
+  }
+  return {
+    text: result.join("\n"),
+    processed: shouldUndoOrderedList
+  };
+}
+function undoUnorderedListStyle(text) {
+  const lines = text.split("\n");
+  const unorderedListPrefix = "- ";
+  const shouldUndoUnorderedList = lines.every((line) => line.startsWith(unorderedListPrefix));
+  let result = lines;
+  if (shouldUndoUnorderedList) {
+    result = lines.map((line) => line.slice(unorderedListPrefix.length));
+  }
+  return {
+    text: result.join("\n"),
+    processed: shouldUndoUnorderedList
+  };
+}
+function makePrefix(index, unorderedList) {
+  if (unorderedList) {
+    return "- ";
+  } else {
+    return `${index + 1}. `;
+  }
+}
+function clearExistingListStyle(style, selectedText) {
+  let undoResult;
+  let undoResultOppositeList;
+  let pristineText;
+  if (style.orderedList) {
+    undoResult = undoOrderedListStyle(selectedText);
+    undoResultOppositeList = undoUnorderedListStyle(undoResult.text);
+    pristineText = undoResultOppositeList.text;
+  } else {
+    undoResult = undoUnorderedListStyle(selectedText);
+    undoResultOppositeList = undoOrderedListStyle(undoResult.text);
+    pristineText = undoResultOppositeList.text;
+  }
+  return [undoResult, undoResultOppositeList, pristineText];
+}
+function listStyle(textarea, style) {
+  const noInitialSelection = textarea.selectionStart === textarea.selectionEnd;
+  let selectionStart = textarea.selectionStart;
+  let selectionEnd = textarea.selectionEnd;
+  expandSelectionToLine(textarea);
+  const selectedText = textarea.value.slice(textarea.selectionStart, textarea.selectionEnd);
+  const [undoResult, undoResultOppositeList, pristineText] = clearExistingListStyle(style, selectedText);
+  const prefixedLines = pristineText.split("\n").map((value, index) => {
+    return `${makePrefix(index, style.unorderedList)}${value}`;
+  });
+  const totalPrefixLength = prefixedLines.reduce((previousValue, _currentValue, currentIndex) => {
+    return previousValue + makePrefix(currentIndex, style.unorderedList).length;
+  }, 0);
+  const totalPrefixLengthOppositeList = prefixedLines.reduce((previousValue, _currentValue, currentIndex) => {
+    return previousValue + makePrefix(currentIndex, !style.unorderedList).length;
+  }, 0);
+  if (undoResult.processed) {
+    if (noInitialSelection) {
+      selectionStart = Math.max(selectionStart - makePrefix(0, style.unorderedList).length, 0);
+      selectionEnd = selectionStart;
+    } else {
+      selectionStart = textarea.selectionStart;
+      selectionEnd = textarea.selectionEnd - totalPrefixLength;
     }
-
-    /* Blockquotes - enhanced styling in preview mode */
-    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview .blockquote {
-      display: block !important;
-      border-left: 4px solid var(--blockquote, #ddd) !important;
-      padding-left: 1em !important;
-      margin: 1em 0 !important;
-      font-style: italic !important;
+    return { text: pristineText, selectionStart, selectionEnd };
+  }
+  const { newlinesToAppend, newlinesToPrepend } = newlinesToSurroundSelectedText(textarea);
+  const text = newlinesToAppend + prefixedLines.join("\n") + newlinesToPrepend;
+  if (noInitialSelection) {
+    selectionStart = Math.max(selectionStart + makePrefix(0, style.unorderedList).length + newlinesToAppend.length, 0);
+    selectionEnd = selectionStart;
+  } else {
+    if (undoResultOppositeList.processed) {
+      selectionStart = Math.max(textarea.selectionStart + newlinesToAppend.length, 0);
+      selectionEnd = textarea.selectionEnd + newlinesToAppend.length + totalPrefixLength - totalPrefixLengthOppositeList;
+    } else {
+      selectionStart = Math.max(textarea.selectionStart + newlinesToAppend.length, 0);
+      selectionEnd = textarea.selectionEnd + newlinesToAppend.length + totalPrefixLength;
     }
-
-    /* Typography improvements in preview mode */
-    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview {
-      font-family: Georgia, 'Times New Roman', serif !important;
-      font-size: 16px !important;
-      line-height: 1.8 !important;
-      color: var(--text, #333) !important; /* Consistent text color */
+  }
+  return { text, selectionStart, selectionEnd };
+}
+function applyListStyle(textarea, style) {
+  const result = applyLineOperation(
+    textarea,
+    (ta) => listStyle(ta, style),
+    {
+      // Custom selection adjustment for lists
+      adjustSelection: (isRemoving, selStart, selEnd, lineStart) => {
+        const currentLine = textarea.value.slice(lineStart, textarea.selectionEnd);
+        const orderedListRegex = /^\d+\.\s+/;
+        const unorderedListRegex = /^- /;
+        const hasOrderedList = orderedListRegex.test(currentLine);
+        const hasUnorderedList = unorderedListRegex.test(currentLine);
+        const isRemovingCurrent = style.orderedList && hasOrderedList || style.unorderedList && hasUnorderedList;
+        if (selStart === selEnd) {
+          if (isRemovingCurrent) {
+            const prefixMatch = currentLine.match(style.orderedList ? orderedListRegex : unorderedListRegex);
+            const prefixLength = prefixMatch ? prefixMatch[0].length : 0;
+            return {
+              start: Math.max(selStart - prefixLength, lineStart),
+              end: Math.max(selStart - prefixLength, lineStart)
+            };
+          } else if (hasOrderedList || hasUnorderedList) {
+            const oldPrefixMatch = currentLine.match(hasOrderedList ? orderedListRegex : unorderedListRegex);
+            const oldPrefixLength = oldPrefixMatch ? oldPrefixMatch[0].length : 0;
+            const newPrefixLength = style.unorderedList ? 2 : 3;
+            const adjustment = newPrefixLength - oldPrefixLength;
+            return {
+              start: selStart + adjustment,
+              end: selStart + adjustment
+            };
+          } else {
+            const prefixLength = style.unorderedList ? 2 : 3;
+            return {
+              start: selStart + prefixLength,
+              end: selStart + prefixLength
+            };
+          }
+        } else {
+          if (isRemovingCurrent) {
+            const prefixMatch = currentLine.match(style.orderedList ? orderedListRegex : unorderedListRegex);
+            const prefixLength = prefixMatch ? prefixMatch[0].length : 0;
+            return {
+              start: Math.max(selStart - prefixLength, lineStart),
+              end: Math.max(selEnd - prefixLength, lineStart)
+            };
+          } else if (hasOrderedList || hasUnorderedList) {
+            const oldPrefixMatch = currentLine.match(hasOrderedList ? orderedListRegex : unorderedListRegex);
+            const oldPrefixLength = oldPrefixMatch ? oldPrefixMatch[0].length : 0;
+            const newPrefixLength = style.unorderedList ? 2 : 3;
+            const adjustment = newPrefixLength - oldPrefixLength;
+            return {
+              start: selStart + adjustment,
+              end: selEnd + adjustment
+            };
+          } else {
+            const prefixLength = style.unorderedList ? 2 : 3;
+            return {
+              start: selStart + prefixLength,
+              end: selEnd + prefixLength
+            };
+          }
+        }
+      }
     }
-
-    /* Inline code in preview mode - keep monospace */
-    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview code {
-      font-family: ${fontFamily} !important;
-      font-size: 0.9em !important;
-      background: rgba(135, 131, 120, 0.15) !important;
-      padding: 0.2em 0.4em !important;
-      border-radius: 3px !important;
+  );
+  insertText(textarea, result);
+}
+function getActiveFormats(textarea) {
+  if (!textarea)
+    return [];
+  const formats = [];
+  const { selectionStart, selectionEnd, value } = textarea;
+  const lines = value.split("\n");
+  let lineStart = 0;
+  let currentLine = "";
+  for (const line of lines) {
+    if (selectionStart >= lineStart && selectionStart <= lineStart + line.length) {
+      currentLine = line;
+      break;
     }
-
-    /* Strong and em elements in preview mode */
-    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview strong {
-      font-weight: 700 !important;
-      color: inherit !important; /* Use parent text color */
+    lineStart += line.length + 1;
+  }
+  if (currentLine.startsWith("- ")) {
+    if (currentLine.startsWith("- [ ] ") || currentLine.startsWith("- [x] ")) {
+      formats.push("task-list");
+    } else {
+      formats.push("bullet-list");
     }
-
-    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview em {
-      font-style: italic !important;
-      color: inherit !important; /* Use parent text color */
+  }
+  if (/^\d+\.\s/.test(currentLine)) {
+    formats.push("numbered-list");
+  }
+  if (currentLine.startsWith("> ")) {
+    formats.push("quote");
+  }
+  if (currentLine.startsWith("# "))
+    formats.push("header");
+  if (currentLine.startsWith("## "))
+    formats.push("header-2");
+  if (currentLine.startsWith("### "))
+    formats.push("header-3");
+  const lookBehind = Math.max(0, selectionStart - 10);
+  const lookAhead = Math.min(value.length, selectionEnd + 10);
+  const surrounding = value.slice(lookBehind, lookAhead);
+  if (surrounding.includes("**")) {
+    const beforeCursor = value.slice(Math.max(0, selectionStart - 100), selectionStart);
+    const afterCursor = value.slice(selectionEnd, Math.min(value.length, selectionEnd + 100));
+    const lastOpenBold = beforeCursor.lastIndexOf("**");
+    const nextCloseBold = afterCursor.indexOf("**");
+    if (lastOpenBold !== -1 && nextCloseBold !== -1) {
+      formats.push("bold");
     }
-
-    /* HR in preview mode */
-    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview .hr-marker {
-      display: block !important;
-      border-top: 2px solid var(--hr, #ddd) !important;
-      text-indent: -9999px !important;
-      height: 2px !important;
+  }
+  if (surrounding.includes("_")) {
+    const beforeCursor = value.slice(Math.max(0, selectionStart - 100), selectionStart);
+    const afterCursor = value.slice(selectionEnd, Math.min(value.length, selectionEnd + 100));
+    const lastOpenItalic = beforeCursor.lastIndexOf("_");
+    const nextCloseItalic = afterCursor.indexOf("_");
+    if (lastOpenItalic !== -1 && nextCloseItalic !== -1) {
+      formats.push("italic");
     }
-
-    /* Link Tooltip - Base styles (all browsers) */
-    .overtype-link-tooltip {
-      /* Visual styles that work for both positioning methods */
-      background: #333 !important;
-      color: white !important;
-      padding: 6px 10px !important;
-      border-radius: 16px !important;
-      font-size: 12px !important;
-      font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
-      display: none !important;
-      z-index: 10000 !important;
-      cursor: pointer !important;
-      box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
-      max-width: 300px !important;
-      white-space: nowrap !important;
-      overflow: hidden !important;
-      text-overflow: ellipsis !important;
-
-      /* Base positioning for Floating UI fallback */
-      position: absolute;
+  }
+  if (surrounding.includes("`")) {
+    const beforeCursor = value.slice(Math.max(0, selectionStart - 100), selectionStart);
+    const afterCursor = value.slice(selectionEnd, Math.min(value.length, selectionEnd + 100));
+    if (beforeCursor.includes("`") && afterCursor.includes("`")) {
+      formats.push("code");
     }
-
-    .overtype-link-tooltip.visible {
-      display: flex !important;
+  }
+  if (surrounding.includes("[") && surrounding.includes("]")) {
+    const beforeCursor = value.slice(Math.max(0, selectionStart - 100), selectionStart);
+    const afterCursor = value.slice(selectionEnd, Math.min(value.length, selectionEnd + 100));
+    const lastOpenBracket = beforeCursor.lastIndexOf("[");
+    const nextCloseBracket = afterCursor.indexOf("]");
+    if (lastOpenBracket !== -1 && nextCloseBracket !== -1) {
+      const afterBracket = value.slice(selectionEnd + nextCloseBracket + 1, selectionEnd + nextCloseBracket + 10);
+      if (afterBracket.startsWith("(")) {
+        formats.push("link");
+      }
     }
-
-    /* CSS Anchor Positioning (modern browsers only) */
-    @supports (position-anchor: --x) and (position-area: center) {
-      .overtype-link-tooltip {
-        /* Only anchor positioning specific properties */
-        position-anchor: var(--target-anchor, --link-0);
-        position-area: block-end center;
-        margin-top: 8px !important;
-        position-try: most-width block-end inline-end, flip-inline, block-start center;
-        position-visibility: anchors-visible;
+  }
+  return formats;
+}
+function toggleBold(textarea) {
+  if (!textarea || textarea.disabled || textarea.readOnly)
+    return;
+  debugLog("toggleBold", "Starting");
+  debugSelection(textarea, "Before");
+  const style = mergeWithDefaults(FORMATS.bold);
+  const result = blockStyle(textarea, style);
+  debugResult(result);
+  insertText(textarea, result);
+  debugSelection(textarea, "After");
+}
+function toggleItalic(textarea) {
+  if (!textarea || textarea.disabled || textarea.readOnly)
+    return;
+  const style = mergeWithDefaults(FORMATS.italic);
+  const result = blockStyle(textarea, style);
+  insertText(textarea, result);
+}
+function toggleCode(textarea) {
+  if (!textarea || textarea.disabled || textarea.readOnly)
+    return;
+  const style = mergeWithDefaults(FORMATS.code);
+  const result = blockStyle(textarea, style);
+  insertText(textarea, result);
+}
+function insertLink(textarea, options = {}) {
+  if (!textarea || textarea.disabled || textarea.readOnly)
+    return;
+  const selectedText = textarea.value.slice(textarea.selectionStart, textarea.selectionEnd);
+  let style = mergeWithDefaults(FORMATS.link);
+  const isURL = selectedText && selectedText.match(/^https?:\/\//);
+  if (isURL && !options.url) {
+    style.suffix = `](${selectedText})`;
+    style.replaceNext = "";
+  } else if (options.url) {
+    style.suffix = `](${options.url})`;
+    style.replaceNext = "";
+  }
+  if (options.text && !selectedText) {
+    const pos = textarea.selectionStart;
+    textarea.value = textarea.value.slice(0, pos) + options.text + textarea.value.slice(pos);
+    textarea.selectionStart = pos;
+    textarea.selectionEnd = pos + options.text.length;
+  }
+  const result = blockStyle(textarea, style);
+  insertText(textarea, result);
+}
+function toggleBulletList(textarea) {
+  if (!textarea || textarea.disabled || textarea.readOnly)
+    return;
+  const style = mergeWithDefaults(FORMATS.bulletList);
+  applyListStyle(textarea, style);
+}
+function toggleNumberedList(textarea) {
+  if (!textarea || textarea.disabled || textarea.readOnly)
+    return;
+  const style = mergeWithDefaults(FORMATS.numberedList);
+  applyListStyle(textarea, style);
+}
+function toggleQuote(textarea) {
+  if (!textarea || textarea.disabled || textarea.readOnly)
+    return;
+  debugLog("toggleQuote", "Starting");
+  debugSelection(textarea, "Initial");
+  const style = mergeWithDefaults(FORMATS.quote);
+  const result = applyLineOperation(
+    textarea,
+    (ta) => multilineStyle(ta, style),
+    { prefix: style.prefix }
+  );
+  debugResult(result);
+  insertText(textarea, result);
+  debugSelection(textarea, "Final");
+}
+function toggleTaskList(textarea) {
+  if (!textarea || textarea.disabled || textarea.readOnly)
+    return;
+  const style = mergeWithDefaults(FORMATS.taskList);
+  const result = applyLineOperation(
+    textarea,
+    (ta) => multilineStyle(ta, style),
+    { prefix: style.prefix }
+  );
+  insertText(textarea, result);
+}
+function insertHeader(textarea, level = 1, toggle = false) {
+  if (!textarea || textarea.disabled || textarea.readOnly)
+    return;
+  if (level < 1 || level > 6)
+    level = 1;
+  debugLog("insertHeader", `============ START ============`);
+  debugLog("insertHeader", `Level: ${level}, Toggle: ${toggle}`);
+  debugLog("insertHeader", `Initial cursor: ${textarea.selectionStart}-${textarea.selectionEnd}`);
+  const headerKey = `header${level === 1 ? "1" : level}`;
+  const style = mergeWithDefaults(FORMATS[headerKey] || FORMATS.header1);
+  debugLog("insertHeader", `Style prefix: "${style.prefix}"`);
+  const value = textarea.value;
+  const originalStart = textarea.selectionStart;
+  const originalEnd = textarea.selectionEnd;
+  let lineStart = originalStart;
+  while (lineStart > 0 && value[lineStart - 1] !== "\n") {
+    lineStart--;
+  }
+  let lineEnd = originalEnd;
+  while (lineEnd < value.length && value[lineEnd] !== "\n") {
+    lineEnd++;
+  }
+  const currentLineContent = value.slice(lineStart, lineEnd);
+  debugLog("insertHeader", `Current line (before): "${currentLineContent}"`);
+  const existingHeaderMatch = currentLineContent.match(/^(#{1,6})\s*/);
+  const existingLevel = existingHeaderMatch ? existingHeaderMatch[1].length : 0;
+  const existingPrefixLength = existingHeaderMatch ? existingHeaderMatch[0].length : 0;
+  debugLog("insertHeader", `Existing header check:`);
+  debugLog("insertHeader", `  - Match: ${existingHeaderMatch ? `"${existingHeaderMatch[0]}"` : "none"}`);
+  debugLog("insertHeader", `  - Existing level: ${existingLevel}`);
+  debugLog("insertHeader", `  - Existing prefix length: ${existingPrefixLength}`);
+  debugLog("insertHeader", `  - Target level: ${level}`);
+  const shouldToggleOff = toggle && existingLevel === level;
+  debugLog("insertHeader", `Should toggle OFF: ${shouldToggleOff} (toggle=${toggle}, existingLevel=${existingLevel}, level=${level})`);
+  const result = applyLineOperation(
+    textarea,
+    (ta) => {
+      const currentLine = ta.value.slice(ta.selectionStart, ta.selectionEnd);
+      debugLog("insertHeader", `Line in operation: "${currentLine}"`);
+      const cleanedLine = currentLine.replace(/^#{1,6}\s*/, "");
+      debugLog("insertHeader", `Cleaned line: "${cleanedLine}"`);
+      let newLine;
+      if (shouldToggleOff) {
+        debugLog("insertHeader", "ACTION: Toggling OFF - removing header");
+        newLine = cleanedLine;
+      } else if (existingLevel > 0) {
+        debugLog("insertHeader", `ACTION: Replacing H${existingLevel} with H${level}`);
+        newLine = style.prefix + cleanedLine;
+      } else {
+        debugLog("insertHeader", "ACTION: Adding new header");
+        newLine = style.prefix + cleanedLine;
+      }
+      debugLog("insertHeader", `New line: "${newLine}"`);
+      return {
+        text: newLine,
+        selectionStart: ta.selectionStart,
+        selectionEnd: ta.selectionEnd
+      };
+    },
+    {
+      prefix: style.prefix,
+      // Custom selection adjustment for headers
+      adjustSelection: (isRemoving, selStart, selEnd, lineStartPos) => {
+        debugLog("insertHeader", `Adjusting selection:`);
+        debugLog("insertHeader", `  - isRemoving param: ${isRemoving}`);
+        debugLog("insertHeader", `  - shouldToggleOff: ${shouldToggleOff}`);
+        debugLog("insertHeader", `  - selStart: ${selStart}, selEnd: ${selEnd}`);
+        debugLog("insertHeader", `  - lineStartPos: ${lineStartPos}`);
+        if (shouldToggleOff) {
+          const adjustment = Math.max(selStart - existingPrefixLength, lineStartPos);
+          debugLog("insertHeader", `  - Removing header, adjusting by -${existingPrefixLength}`);
+          return {
+            start: adjustment,
+            end: selStart === selEnd ? adjustment : Math.max(selEnd - existingPrefixLength, lineStartPos)
+          };
+        } else if (existingPrefixLength > 0) {
+          const prefixDiff = style.prefix.length - existingPrefixLength;
+          debugLog("insertHeader", `  - Replacing header, adjusting by ${prefixDiff}`);
+          return {
+            start: selStart + prefixDiff,
+            end: selEnd + prefixDiff
+          };
+        } else {
+          debugLog("insertHeader", `  - Adding header, adjusting by +${style.prefix.length}`);
+          return {
+            start: selStart + style.prefix.length,
+            end: selEnd + style.prefix.length
+          };
+        }
       }
     }
-
-    ${mobileStyles}
-  `;
+  );
+  debugLog("insertHeader", `Final result: text="${result.text}", cursor=${result.selectionStart}-${result.selectionEnd}`);
+  debugLog("insertHeader", `============ END ============`);
+  insertText(textarea, result);
+}
+function toggleH1(textarea) {
+  insertHeader(textarea, 1, true);
+}
+function toggleH2(textarea) {
+  insertHeader(textarea, 2, true);
+}
+function toggleH3(textarea) {
+  insertHeader(textarea, 3, true);
+}
+function getActiveFormats2(textarea) {
+  return getActiveFormats(textarea);
 }
 
 // src/toolbar.js
@@ -2754,55 +2712,43 @@ var Toolbar = class {
       });
       return button;
     }
-    button._clickHandler = async (e) => {
+    button._clickHandler = (e) => {
       e.preventDefault();
-      this.editor.textarea.focus();
-      try {
-        if (buttonConfig.action) {
-          await buttonConfig.action({
-            editor: this.editor,
-            getValue: () => this.editor.getValue(),
-            setValue: (value) => this.editor.setValue(value),
-            event: e
-          });
-        }
-      } catch (error) {
-        console.error(`Button "${buttonConfig.name}" error:`, error);
-        this.editor.wrapper.dispatchEvent(new CustomEvent("button-error", {
-          detail: { buttonName: buttonConfig.name, error }
-        }));
-        button.classList.add("button-error");
-        button.style.animation = "buttonError 0.3s";
-        setTimeout(() => {
-          button.classList.remove("button-error");
-          button.style.animation = "";
-        }, 300);
-      }
+      const actionId = buttonConfig.actionId || buttonConfig.name;
+      this.editor.performAction(actionId, e);
     };
     button.addEventListener("click", button._clickHandler);
     return button;
   }
   /**
-   * Handle button action programmatically (used by keyboard shortcuts)
-   * @param {Object} buttonConfig - Button configuration object with action function
+   * Handle button action programmatically
+   * Accepts either an actionId string or a buttonConfig object (backwards compatible)
+   * @param {string|Object} actionIdOrConfig - Action identifier string or button config object
+   * @returns {Promise<boolean>} Whether the action was executed
    */
-  async handleAction(buttonConfig) {
-    this.editor.textarea.focus();
-    try {
-      if (buttonConfig.action) {
-        await buttonConfig.action({
+  async handleAction(actionIdOrConfig) {
+    if (actionIdOrConfig && typeof actionIdOrConfig === "object" && typeof actionIdOrConfig.action === "function") {
+      this.editor.textarea.focus();
+      try {
+        await actionIdOrConfig.action({
           editor: this.editor,
           getValue: () => this.editor.getValue(),
           setValue: (value) => this.editor.setValue(value),
           event: null
         });
+        return true;
+      } catch (error) {
+        console.error(`Action "${actionIdOrConfig.name}" error:`, error);
+        this.editor.wrapper.dispatchEvent(new CustomEvent("button-error", {
+          detail: { buttonName: actionIdOrConfig.name, error }
+        }));
+        return false;
       }
-    } catch (error) {
-      console.error(`Action "${buttonConfig.name}" error:`, error);
-      this.editor.wrapper.dispatchEvent(new CustomEvent("button-error", {
-        detail: { buttonName: buttonConfig.name, error }
-      }));
     }
+    if (typeof actionIdOrConfig === "string") {
+      return this.editor.performAction(actionIdOrConfig, null);
+    }
+    return false;
   }
   /**
    * Sanitize SVG to prevent XSS
@@ -2972,6 +2918,7 @@ var LinkTooltip = class {
     this.visibilityChangeHandler = null;
     this.useFloatingUI = false;
     this.floatingUI = null;
+    this.isTooltipHovered = false;
     this.init();
   }
   async init() {
@@ -3005,14 +2952,25 @@ var LinkTooltip = class {
         this.hide();
       }
     });
-    this.editor.textarea.addEventListener("blur", () => this.hide());
+    this.editor.textarea.addEventListener("blur", () => {
+      if (!this.isTooltipHovered) {
+        this.hide();
+      }
+    });
     this.visibilityChangeHandler = () => {
       if (document.hidden) {
         this.hide();
       }
     };
     document.addEventListener("visibilitychange", this.visibilityChangeHandler);
-    this.tooltip.addEventListener("mouseenter", () => this.cancelHide());
+    this.tooltip.addEventListener("mouseenter", () => {
+      this.isTooltipHovered = true;
+      this.cancelHide();
+    });
+    this.tooltip.addEventListener("mouseleave", () => {
+      this.isTooltipHovered = false;
+      this.scheduleHide();
+    });
   }
   createTooltip() {
     this.tooltip = document.createElement("div");
@@ -3122,6 +3080,7 @@ var LinkTooltip = class {
   hide() {
     this.tooltip.classList.remove("visible");
     this.currentLink = null;
+    this.isTooltipHovered = false;
   }
   scheduleHide() {
     this.cancelHide();
@@ -3146,6 +3105,7 @@ var LinkTooltip = class {
     this.currentLink = null;
     this.floatingUI = null;
     this.useFloatingUI = false;
+    this.isTooltipHovered = false;
   }
 };
 
@@ -3216,27 +3176,30 @@ var eyeIcon = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke
 var toolbarButtons = {
   bold: {
     name: "bold",
+    actionId: "toggleBold",
     icon: boldIcon,
     title: "Bold (Ctrl+B)",
-    action: ({ editor, event }) => {
+    action: ({ editor }) => {
       toggleBold(editor.textarea);
       editor.textarea.dispatchEvent(new Event("input", { bubbles: true }));
     }
   },
   italic: {
     name: "italic",
+    actionId: "toggleItalic",
     icon: italicIcon,
     title: "Italic (Ctrl+I)",
-    action: ({ editor, event }) => {
+    action: ({ editor }) => {
       toggleItalic(editor.textarea);
       editor.textarea.dispatchEvent(new Event("input", { bubbles: true }));
     }
   },
   code: {
     name: "code",
+    actionId: "toggleCode",
     icon: codeIcon,
     title: "Inline Code",
-    action: ({ editor, event }) => {
+    action: ({ editor }) => {
       toggleCode(editor.textarea);
       editor.textarea.dispatchEvent(new Event("input", { bubbles: true }));
     }
@@ -3247,63 +3210,70 @@ var toolbarButtons = {
   },
   link: {
     name: "link",
+    actionId: "insertLink",
     icon: linkIcon,
     title: "Insert Link",
-    action: ({ editor, event }) => {
+    action: ({ editor }) => {
       insertLink(editor.textarea);
       editor.textarea.dispatchEvent(new Event("input", { bubbles: true }));
     }
   },
   h1: {
     name: "h1",
+    actionId: "toggleH1",
     icon: h1Icon,
     title: "Heading 1",
-    action: ({ editor, event }) => {
+    action: ({ editor }) => {
       toggleH1(editor.textarea);
       editor.textarea.dispatchEvent(new Event("input", { bubbles: true }));
     }
   },
   h2: {
     name: "h2",
+    actionId: "toggleH2",
     icon: h2Icon,
     title: "Heading 2",
-    action: ({ editor, event }) => {
+    action: ({ editor }) => {
       toggleH2(editor.textarea);
       editor.textarea.dispatchEvent(new Event("input", { bubbles: true }));
     }
   },
   h3: {
     name: "h3",
+    actionId: "toggleH3",
     icon: h3Icon,
     title: "Heading 3",
-    action: ({ editor, event }) => {
+    action: ({ editor }) => {
       toggleH3(editor.textarea);
       editor.textarea.dispatchEvent(new Event("input", { bubbles: true }));
     }
   },
   bulletList: {
     name: "bulletList",
+    actionId: "toggleBulletList",
     icon: bulletListIcon,
     title: "Bullet List",
-    action: ({ editor, event }) => {
+    action: ({ editor }) => {
       toggleBulletList(editor.textarea);
       editor.textarea.dispatchEvent(new Event("input", { bubbles: true }));
     }
   },
   orderedList: {
     name: "orderedList",
+    actionId: "toggleNumberedList",
     icon: orderedListIcon,
     title: "Numbered List",
-    action: ({ editor, event }) => {
+    action: ({ editor }) => {
       toggleNumberedList(editor.textarea);
       editor.textarea.dispatchEvent(new Event("input", { bubbles: true }));
     }
   },
   taskList: {
     name: "taskList",
+    actionId: "toggleTaskList",
     icon: taskListIcon,
     title: "Task List",
-    action: ({ editor, event }) => {
+    action: ({ editor }) => {
       if (toggleTaskList) {
         toggleTaskList(editor.textarea);
         editor.textarea.dispatchEvent(new Event("input", { bubbles: true }));
@@ -3312,9 +3282,10 @@ var toolbarButtons = {
   },
   quote: {
     name: "quote",
+    actionId: "toggleQuote",
     icon: quoteIcon,
     title: "Quote",
-    action: ({ editor, event }) => {
+    action: ({ editor }) => {
       toggleQuote(editor.textarea);
       editor.textarea.dispatchEvent(new Event("input", { bubbles: true }));
     }
@@ -3348,6 +3319,45 @@ var defaultToolbarButtons = [
 ];
 
 // src/overtype.js
+function buildActionsMap(buttons) {
+  const map = {};
+  (buttons || []).forEach((btn) => {
+    if (!btn || btn.name === "separator")
+      return;
+    const id = btn.actionId || btn.name;
+    if (btn.action) {
+      map[id] = btn.action;
+    }
+  });
+  return map;
+}
+function normalizeButtons(buttons) {
+  const list = buttons || defaultToolbarButtons;
+  if (!Array.isArray(list))
+    return null;
+  return list.map((btn) => ({
+    name: (btn == null ? void 0 : btn.name) || null,
+    actionId: (btn == null ? void 0 : btn.actionId) || (btn == null ? void 0 : btn.name) || null,
+    icon: (btn == null ? void 0 : btn.icon) || null,
+    title: (btn == null ? void 0 : btn.title) || null
+  }));
+}
+function toolbarButtonsChanged(prevButtons, nextButtons) {
+  const prev = normalizeButtons(prevButtons);
+  const next = normalizeButtons(nextButtons);
+  if (prev === null || next === null)
+    return prev !== next;
+  if (prev.length !== next.length)
+    return true;
+  for (let i = 0; i < prev.length; i++) {
+    const a = prev[i];
+    const b = next[i];
+    if (a.name !== b.name || a.actionId !== b.actionId || a.icon !== b.icon || a.title !== b.title) {
+      return true;
+    }
+  }
+  return false;
+}
 var _OverType = class _OverType {
   /**
    * Constructor - Always returns an array of instances
@@ -3405,6 +3415,7 @@ var _OverType = class _OverType {
       this._buildFromScratch();
     }
     this.shortcuts = new ShortcutsManager(this);
+    this._rebuildActionsMap();
     this.linkTooltip = new LinkTooltip(this);
     requestAnimationFrame(() => {
       requestAnimationFrame(() => {
@@ -3660,6 +3671,17 @@ var _OverType = class _OverType {
       this._toolbarInputListener = null;
     }
   }
+  /**
+   * Rebuild the action map from current toolbar button configuration
+   * Called during init and reinit to keep shortcuts in sync with toolbar buttons
+   * @private
+   */
+  _rebuildActionsMap() {
+    this.actionsById = buildActionsMap(defaultToolbarButtons);
+    if (this.options.toolbarButtons) {
+      Object.assign(this.actionsById, buildActionsMap(this.options.toolbarButtons));
+    }
+  }
   /**
    * Apply options to the editor
    * @private
@@ -3921,6 +3943,40 @@ var _OverType = class _OverType {
       this._updateAutoHeight();
     }
   }
+  /**
+   * Execute an action by ID
+   * Central dispatcher used by toolbar clicks, keyboard shortcuts, and programmatic calls
+   * @param {string} actionId - The action identifier (e.g., 'toggleBold', 'insertLink')
+   * @param {Event|null} event - Optional event that triggered the action
+   * @returns {Promise<boolean>} Whether the action was executed successfully
+   */
+  async performAction(actionId, event = null) {
+    var _a;
+    const textarea = this.textarea;
+    if (!textarea)
+      return false;
+    const action = (_a = this.actionsById) == null ? void 0 : _a[actionId];
+    if (!action) {
+      console.warn(`OverType: Unknown action "${actionId}"`);
+      return false;
+    }
+    textarea.focus();
+    try {
+      await action({
+        editor: this,
+        getValue: () => this.getValue(),
+        setValue: (value) => this.setValue(value),
+        event
+      });
+      return true;
+    } catch (error) {
+      console.error(`OverType: Action "${actionId}" error:`, error);
+      this.wrapper.dispatchEvent(new CustomEvent("button-error", {
+        detail: { actionId, error }
+      }));
+      return false;
+    }
+  }
   /**
    * Get the rendered HTML of the current content
    * @param {Object} options - Rendering options
@@ -3977,7 +4033,17 @@ var _OverType = class _OverType {
    * @param {Object} options - New options to apply
    */
   reinit(options = {}) {
+    var _a;
+    const prevToolbarButtons = (_a = this.options) == null ? void 0 : _a.toolbarButtons;
     this.options = this._mergeOptions({ ...this.options, ...options });
+    const toolbarNeedsRebuild = this.toolbar && this.options.toolbar && toolbarButtonsChanged(prevToolbarButtons, this.options.toolbarButtons);
+    this._rebuildActionsMap();
+    if (toolbarNeedsRebuild) {
+      this._cleanupToolbarListeners();
+      this.toolbar.destroy();
+      this.toolbar = null;
+      this._createToolbar();
+    }
     this._applyOptions();
     this.updatePreview();
   }