overtype 2.1.1 → 2.3.0

package/dist/overtype-webcomponent.js

@@ -1,5 +1,5 @@
 /**
- * OverType v2.1.0
+ * OverType v2.3.0
  * A lightweight markdown editor library with perfect WYSIWYG alignment
  * @license MIT
  * @author David Miranda
@@ -102,6 +102,7 @@ var OverTypeEditor = (() => {
     static parseHeader(html) {
       return html.replace(/^(#{1,3})\s(.+)$/, (match, hashes, content) => {
         const level = hashes.length;
+        content = this.parseInlineElements(content);
         return `<h${level}><span class="syntax-marker">${hashes} </span>${content}</h${level}>`;
       });
     }
@@ -133,6 +134,7 @@ var OverTypeEditor = (() => {
      */
     static parseBulletList(html) {
       return html.replace(/^((?:&nbsp;)*)([-*+])\s(.+)$/, (match, indent, marker, content) => {
+        content = this.parseInlineElements(content);
         return `${indent}<li class="bullet-list"><span class="syntax-marker">${marker} </span>${content}</li>`;
       });
     }
@@ -144,6 +146,7 @@ var OverTypeEditor = (() => {
      */
     static parseTaskList(html, isPreviewMode = false) {
       return html.replace(/^((?:&nbsp;)*)-\s+\[([ xX])\]\s+(.+)$/, (match, indent, checked, content) => {
+        content = this.parseInlineElements(content);
         if (isPreviewMode) {
           const isChecked = checked.toLowerCase() === "x";
           return `${indent}<li class="task-list"><input type="checkbox" ${isChecked ? "checked" : ""}> ${content}</li>`;
@@ -159,6 +162,7 @@ var OverTypeEditor = (() => {
      */
     static parseNumberedList(html) {
       return html.replace(/^((?:&nbsp;)*)(\d+\.)\s(.+)$/, (match, indent, marker, content) => {
+        content = this.parseInlineElements(content);
         return `${indent}<li class="ordered-list"><span class="syntax-marker">${marker} </span>${content}</li>`;
       });
     }
@@ -380,7 +384,9 @@ var OverTypeEditor = (() => {
       html = this.parseTaskList(html, isPreviewMode);
       html = this.parseBulletList(html);
       html = this.parseNumberedList(html);
-      html = this.parseInlineElements(html);
+      if (!html.includes("<li") && !html.includes("<h")) {
+        html = this.parseInlineElements(html);
+      }
       if (html.trim() === "") {
         return "<div>&nbsp;</div>";
       }
@@ -869,8 +875,24 @@ var OverTypeEditor = (() => {
       // Yale Blue - icon color
       toolbarHover: "#f5f5f5",
       // Light gray - hover background
-      toolbarActive: "#faf0ca"
+      toolbarActive: "#faf0ca",
       // Lemon Chiffon - active button background
+      placeholder: "#999999"
+      // Gray - placeholder text
+    },
+    previewColors: {
+      text: "#1a1a1a",
+      h1: "#1a1a1a",
+      h2: "#2a2a2a",
+      h3: "#3a3a3a",
+      strong: "inherit",
+      em: "inherit",
+      link: "#0066cc",
+      code: "#1a1a1a",
+      codeBg: "rgba(135, 131, 120, 0.15)",
+      blockquote: "#555",
+      hr: "#ddd",
+      bg: "transparent"
     }
   };
   var cave = {
@@ -933,13 +955,30 @@ var OverTypeEditor = (() => {
       // Light blue-gray - icon color
       toolbarHover: "#243546",
       // Slightly lighter charcoal - hover background
-      toolbarActive: "#2a3f52"
+      toolbarActive: "#2a3f52",
       // Even lighter - active button background
+      placeholder: "#6a7a88"
+      // Muted blue-gray - placeholder text
+    },
+    previewColors: {
+      text: "#c5dde8",
+      h1: "#e0e0e0",
+      h2: "#d0d0d0",
+      h3: "#c0c0c0",
+      strong: "inherit",
+      em: "inherit",
+      link: "#6cb6e0",
+      code: "#c5dde8",
+      codeBg: "rgba(255, 255, 255, 0.08)",
+      blockquote: "#9aa8b4",
+      hr: "rgba(255, 255, 255, 0.15)",
+      bg: "transparent"
     }
   };
   var themes = {
     solar,
     cave,
+    auto: solar,
     // Aliases for backward compatibility
     light: solar,
     dark: cave
@@ -951,20 +990,36 @@ var OverTypeEditor = (() => {
     }
     return theme;
   }
-  function themeToCSSVars(colors) {
+  function resolveAutoTheme(themeName) {
+    if (themeName !== "auto")
+      return themeName;
+    const mq = window.matchMedia && window.matchMedia("(prefers-color-scheme: dark)");
+    return (mq == null ? void 0 : mq.matches) ? "cave" : "solar";
+  }
+  function themeToCSSVars(colors, previewColors) {
     const vars = [];
     for (const [key, value] of Object.entries(colors)) {
       const varName = key.replace(/([A-Z])/g, "-$1").toLowerCase();
       vars.push(`--${varName}: ${value};`);
     }
+    if (previewColors) {
+      for (const [key, value] of Object.entries(previewColors)) {
+        const varName = key.replace(/([A-Z])/g, "-$1").toLowerCase();
+        vars.push(`--preview-${varName}: ${value};`);
+      }
+    }
     return vars.join("\n");
   }
-  function mergeTheme(baseTheme, customColors = {}) {
+  function mergeTheme(baseTheme, customColors = {}, customPreviewColors = {}) {
     return {
       ...baseTheme,
       colors: {
         ...baseTheme.colors,
         ...customColors
+      },
+      previewColors: {
+        ...baseTheme.previewColors,
+        ...customPreviewColors
       }
     };
   }
@@ -991,7 +1046,7 @@ var OverTypeEditor = (() => {
       }
     }
   ` : "";
-    const themeVars = theme && theme.colors ? themeToCSSVars(theme.colors) : "";
+    const themeVars = theme && theme.colors ? themeToCSSVars(theme.colors, theme.previewColors) : "";
     return `
     /* OverType Editor Styles */
     
@@ -1164,17 +1219,36 @@ var OverTypeEditor = (() => {
       /* Prevent mobile zoom on focus */
       touch-action: manipulation !important;
       
-      /* Disable autofill and spellcheck */
+      /* Disable autofill */
       autocomplete: off !important;
       autocorrect: off !important;
       autocapitalize: off !important;
-      spellcheck: false !important;
     }
 
     .overtype-wrapper .overtype-input::selection {
       background-color: var(--selection, rgba(244, 211, 94, 0.4));
     }
 
+    /* Placeholder shim - visible when textarea is empty */
+    .overtype-wrapper .overtype-placeholder {
+      position: absolute !important;
+      top: 0 !important;
+      left: 0 !important;
+      width: 100% !important;
+      z-index: 0 !important;
+      pointer-events: none !important;
+      user-select: none !important;
+      font-family: ${fontFamily} !important;
+      font-size: var(--instance-font-size, ${fontSize}) !important;
+      line-height: var(--instance-line-height, ${lineHeight}) !important;
+      padding: var(--instance-padding, ${padding}) !important;
+      box-sizing: border-box !important;
+      color: var(--placeholder, #999) !important;
+      overflow: hidden !important;
+      white-space: nowrap !important;
+      text-overflow: ellipsis !important;
+    }
+
     /* Preview layer styles */
     .overtype-wrapper .overtype-preview {
       /* Layer positioning */
@@ -1442,6 +1516,10 @@ var OverTypeEditor = (() => {
     
 
     /* Toolbar Styles */
+    .overtype-toolbar.overtype-toolbar-hidden {
+      display: none !important;
+    }
+
     .overtype-toolbar {
       display: flex !important;
       align-items: center !important;
@@ -1640,27 +1718,29 @@ var OverTypeEditor = (() => {
     }
 
     /* 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 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 */
+      line-height: 1 !important;
     }
-    
-    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h1 { 
-      font-size: 2em !important; 
+
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h1 {
+      font-size: 2em !important;
+      color: var(--preview-h1, #222) !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 h2 {
+      font-size: 1.5em !important;
+      color: var(--preview-h2, #333) !important;
     }
-    
-    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h3 { 
-      font-size: 1.17em !important; 
+
+    .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview h3 {
+      font-size: 1.17em !important;
+      color: var(--preview-h3, #444) !important;
     }
 
     /* Lists - restore list styling in preview mode */
@@ -1710,25 +1790,20 @@ var OverTypeEditor = (() => {
     .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview a {
       pointer-events: auto !important;
       cursor: pointer !important;
-      color: var(--link, #0066cc) !important;
+      color: var(--preview-link, #0066cc) !important;
       text-decoration: underline !important;
     }
 
     /* 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;
+      background: var(--preview-code-bg, rgba(135, 131, 120, 0.15)) !important;
+      color: var(--preview-code, #333) !important;
       padding: 1.2em !important;
       border-radius: 3px !important;
       overflow-x: auto !important;
       margin: 0 !important;
       display: block !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-container[data-mode="preview"] .overtype-wrapper .overtype-preview pre.code-block code {
       background: transparent !important;
@@ -1751,7 +1826,8 @@ var OverTypeEditor = (() => {
     /* 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;
+      border-left: 4px solid var(--preview-blockquote, #666) !important;
+      color: var(--preview-blockquote, #666) !important;
       padding-left: 1em !important;
       margin: 1em 0 !important;
       font-style: italic !important;
@@ -1762,14 +1838,16 @@ var OverTypeEditor = (() => {
       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 */
+      color: var(--preview-text, #333) !important;
+      background: var(--preview-bg, transparent) !important;
     }
 
     /* 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;
+      background: var(--preview-code-bg, rgba(135, 131, 120, 0.15)) !important;
+      color: var(--preview-code, #333) !important;
       padding: 0.2em 0.4em !important;
       border-radius: 3px !important;
     }
@@ -1777,32 +1855,33 @@ var OverTypeEditor = (() => {
     /* 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 */
+      color: var(--preview-strong, inherit) !important;
     }
 
     .overtype-container[data-mode="preview"] .overtype-wrapper .overtype-preview em {
       font-style: italic !important;
-      color: inherit !important; /* Use parent text color */
+      color: var(--preview-em, inherit) !important;
     }
 
     /* 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;
+      border-top: 2px solid var(--preview-hr, #ddd) !important;
       text-indent: -9999px !important;
       height: 2px !important;
     }
 
-    /* Link Tooltip - Base styles (all browsers) */
+    /* Link Tooltip */
     .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;
+      display: flex !important;
+      visibility: hidden !important;
+      pointer-events: none !important;
       z-index: 10000 !important;
       cursor: pointer !important;
       box-shadow: 0 2px 8px rgba(0,0,0,0.3) !important;
@@ -1810,25 +1889,14 @@ var OverTypeEditor = (() => {
       white-space: nowrap !important;
       overflow: hidden !important;
       text-overflow: ellipsis !important;
-
-      /* Base positioning for Floating UI fallback */
-      position: absolute;
+      position: fixed;
+      top: 0;
+      left: 0;
     }
 
     .overtype-link-tooltip.visible {
-      display: flex !important;
-    }
-
-    /* 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;
-      }
+      visibility: visible !important;
+      pointer-events: auto !important;
     }
 
     ${mobileStyles}
@@ -2910,6 +2978,16 @@ ${blockSuffix}` : suffix;
       } catch (error) {
       }
     }
+    show() {
+      if (this.container) {
+        this.container.classList.remove("overtype-toolbar-hidden");
+      }
+    }
+    hide() {
+      if (this.container) {
+        this.container.classList.add("overtype-toolbar-hidden");
+      }
+    }
     /**
      * Destroy toolbar and cleanup
      */
@@ -2931,6 +3009,1203 @@ ${blockSuffix}` : suffix;
     }
   };
 
+  // node_modules/@floating-ui/utils/dist/floating-ui.utils.mjs
+  var min = Math.min;
+  var max = Math.max;
+  var round = Math.round;
+  var createCoords = (v) => ({
+    x: v,
+    y: v
+  });
+  var oppositeSideMap = {
+    left: "right",
+    right: "left",
+    bottom: "top",
+    top: "bottom"
+  };
+  var oppositeAlignmentMap = {
+    start: "end",
+    end: "start"
+  };
+  function clamp(start, value, end) {
+    return max(start, min(value, end));
+  }
+  function evaluate(value, param) {
+    return typeof value === "function" ? value(param) : value;
+  }
+  function getSide(placement) {
+    return placement.split("-")[0];
+  }
+  function getAlignment(placement) {
+    return placement.split("-")[1];
+  }
+  function getOppositeAxis(axis) {
+    return axis === "x" ? "y" : "x";
+  }
+  function getAxisLength(axis) {
+    return axis === "y" ? "height" : "width";
+  }
+  var yAxisSides = /* @__PURE__ */ new Set(["top", "bottom"]);
+  function getSideAxis(placement) {
+    return yAxisSides.has(getSide(placement)) ? "y" : "x";
+  }
+  function getAlignmentAxis(placement) {
+    return getOppositeAxis(getSideAxis(placement));
+  }
+  function getAlignmentSides(placement, rects, rtl) {
+    if (rtl === void 0) {
+      rtl = false;
+    }
+    const alignment = getAlignment(placement);
+    const alignmentAxis = getAlignmentAxis(placement);
+    const length = getAxisLength(alignmentAxis);
+    let mainAlignmentSide = alignmentAxis === "x" ? alignment === (rtl ? "end" : "start") ? "right" : "left" : alignment === "start" ? "bottom" : "top";
+    if (rects.reference[length] > rects.floating[length]) {
+      mainAlignmentSide = getOppositePlacement(mainAlignmentSide);
+    }
+    return [mainAlignmentSide, getOppositePlacement(mainAlignmentSide)];
+  }
+  function getExpandedPlacements(placement) {
+    const oppositePlacement = getOppositePlacement(placement);
+    return [getOppositeAlignmentPlacement(placement), oppositePlacement, getOppositeAlignmentPlacement(oppositePlacement)];
+  }
+  function getOppositeAlignmentPlacement(placement) {
+    return placement.replace(/start|end/g, (alignment) => oppositeAlignmentMap[alignment]);
+  }
+  var lrPlacement = ["left", "right"];
+  var rlPlacement = ["right", "left"];
+  var tbPlacement = ["top", "bottom"];
+  var btPlacement = ["bottom", "top"];
+  function getSideList(side, isStart, rtl) {
+    switch (side) {
+      case "top":
+      case "bottom":
+        if (rtl)
+          return isStart ? rlPlacement : lrPlacement;
+        return isStart ? lrPlacement : rlPlacement;
+      case "left":
+      case "right":
+        return isStart ? tbPlacement : btPlacement;
+      default:
+        return [];
+    }
+  }
+  function getOppositeAxisPlacements(placement, flipAlignment, direction, rtl) {
+    const alignment = getAlignment(placement);
+    let list = getSideList(getSide(placement), direction === "start", rtl);
+    if (alignment) {
+      list = list.map((side) => side + "-" + alignment);
+      if (flipAlignment) {
+        list = list.concat(list.map(getOppositeAlignmentPlacement));
+      }
+    }
+    return list;
+  }
+  function getOppositePlacement(placement) {
+    return placement.replace(/left|right|bottom|top/g, (side) => oppositeSideMap[side]);
+  }
+  function expandPaddingObject(padding) {
+    return {
+      top: 0,
+      right: 0,
+      bottom: 0,
+      left: 0,
+      ...padding
+    };
+  }
+  function getPaddingObject(padding) {
+    return typeof padding !== "number" ? expandPaddingObject(padding) : {
+      top: padding,
+      right: padding,
+      bottom: padding,
+      left: padding
+    };
+  }
+  function rectToClientRect(rect) {
+    const {
+      x,
+      y,
+      width,
+      height
+    } = rect;
+    return {
+      width,
+      height,
+      top: y,
+      left: x,
+      right: x + width,
+      bottom: y + height,
+      x,
+      y
+    };
+  }
+
+  // node_modules/@floating-ui/core/dist/floating-ui.core.mjs
+  function computeCoordsFromPlacement(_ref, placement, rtl) {
+    let {
+      reference,
+      floating
+    } = _ref;
+    const sideAxis = getSideAxis(placement);
+    const alignmentAxis = getAlignmentAxis(placement);
+    const alignLength = getAxisLength(alignmentAxis);
+    const side = getSide(placement);
+    const isVertical = sideAxis === "y";
+    const commonX = reference.x + reference.width / 2 - floating.width / 2;
+    const commonY = reference.y + reference.height / 2 - floating.height / 2;
+    const commonAlign = reference[alignLength] / 2 - floating[alignLength] / 2;
+    let coords;
+    switch (side) {
+      case "top":
+        coords = {
+          x: commonX,
+          y: reference.y - floating.height
+        };
+        break;
+      case "bottom":
+        coords = {
+          x: commonX,
+          y: reference.y + reference.height
+        };
+        break;
+      case "right":
+        coords = {
+          x: reference.x + reference.width,
+          y: commonY
+        };
+        break;
+      case "left":
+        coords = {
+          x: reference.x - floating.width,
+          y: commonY
+        };
+        break;
+      default:
+        coords = {
+          x: reference.x,
+          y: reference.y
+        };
+    }
+    switch (getAlignment(placement)) {
+      case "start":
+        coords[alignmentAxis] -= commonAlign * (rtl && isVertical ? -1 : 1);
+        break;
+      case "end":
+        coords[alignmentAxis] += commonAlign * (rtl && isVertical ? -1 : 1);
+        break;
+    }
+    return coords;
+  }
+  async function detectOverflow(state, options) {
+    var _await$platform$isEle;
+    if (options === void 0) {
+      options = {};
+    }
+    const {
+      x,
+      y,
+      platform: platform2,
+      rects,
+      elements,
+      strategy
+    } = state;
+    const {
+      boundary = "clippingAncestors",
+      rootBoundary = "viewport",
+      elementContext = "floating",
+      altBoundary = false,
+      padding = 0
+    } = evaluate(options, state);
+    const paddingObject = getPaddingObject(padding);
+    const altContext = elementContext === "floating" ? "reference" : "floating";
+    const element = elements[altBoundary ? altContext : elementContext];
+    const clippingClientRect = rectToClientRect(await platform2.getClippingRect({
+      element: ((_await$platform$isEle = await (platform2.isElement == null ? void 0 : platform2.isElement(element))) != null ? _await$platform$isEle : true) ? element : element.contextElement || await (platform2.getDocumentElement == null ? void 0 : platform2.getDocumentElement(elements.floating)),
+      boundary,
+      rootBoundary,
+      strategy
+    }));
+    const rect = elementContext === "floating" ? {
+      x,
+      y,
+      width: rects.floating.width,
+      height: rects.floating.height
+    } : rects.reference;
+    const offsetParent = await (platform2.getOffsetParent == null ? void 0 : platform2.getOffsetParent(elements.floating));
+    const offsetScale = await (platform2.isElement == null ? void 0 : platform2.isElement(offsetParent)) ? await (platform2.getScale == null ? void 0 : platform2.getScale(offsetParent)) || {
+      x: 1,
+      y: 1
+    } : {
+      x: 1,
+      y: 1
+    };
+    const elementClientRect = rectToClientRect(platform2.convertOffsetParentRelativeRectToViewportRelativeRect ? await platform2.convertOffsetParentRelativeRectToViewportRelativeRect({
+      elements,
+      rect,
+      offsetParent,
+      strategy
+    }) : rect);
+    return {
+      top: (clippingClientRect.top - elementClientRect.top + paddingObject.top) / offsetScale.y,
+      bottom: (elementClientRect.bottom - clippingClientRect.bottom + paddingObject.bottom) / offsetScale.y,
+      left: (clippingClientRect.left - elementClientRect.left + paddingObject.left) / offsetScale.x,
+      right: (elementClientRect.right - clippingClientRect.right + paddingObject.right) / offsetScale.x
+    };
+  }
+  var computePosition = async (reference, floating, config) => {
+    const {
+      placement = "bottom",
+      strategy = "absolute",
+      middleware = [],
+      platform: platform2
+    } = config;
+    const validMiddleware = middleware.filter(Boolean);
+    const rtl = await (platform2.isRTL == null ? void 0 : platform2.isRTL(floating));
+    let rects = await platform2.getElementRects({
+      reference,
+      floating,
+      strategy
+    });
+    let {
+      x,
+      y
+    } = computeCoordsFromPlacement(rects, placement, rtl);
+    let statefulPlacement = placement;
+    let middlewareData = {};
+    let resetCount = 0;
+    for (let i = 0; i < validMiddleware.length; i++) {
+      var _platform$detectOverf;
+      const {
+        name,
+        fn
+      } = validMiddleware[i];
+      const {
+        x: nextX,
+        y: nextY,
+        data,
+        reset
+      } = await fn({
+        x,
+        y,
+        initialPlacement: placement,
+        placement: statefulPlacement,
+        strategy,
+        middlewareData,
+        rects,
+        platform: {
+          ...platform2,
+          detectOverflow: (_platform$detectOverf = platform2.detectOverflow) != null ? _platform$detectOverf : detectOverflow
+        },
+        elements: {
+          reference,
+          floating
+        }
+      });
+      x = nextX != null ? nextX : x;
+      y = nextY != null ? nextY : y;
+      middlewareData = {
+        ...middlewareData,
+        [name]: {
+          ...middlewareData[name],
+          ...data
+        }
+      };
+      if (reset && resetCount <= 50) {
+        resetCount++;
+        if (typeof reset === "object") {
+          if (reset.placement) {
+            statefulPlacement = reset.placement;
+          }
+          if (reset.rects) {
+            rects = reset.rects === true ? await platform2.getElementRects({
+              reference,
+              floating,
+              strategy
+            }) : reset.rects;
+          }
+          ({
+            x,
+            y
+          } = computeCoordsFromPlacement(rects, statefulPlacement, rtl));
+        }
+        i = -1;
+      }
+    }
+    return {
+      x,
+      y,
+      placement: statefulPlacement,
+      strategy,
+      middlewareData
+    };
+  };
+  var flip = function(options) {
+    if (options === void 0) {
+      options = {};
+    }
+    return {
+      name: "flip",
+      options,
+      async fn(state) {
+        var _middlewareData$arrow, _middlewareData$flip;
+        const {
+          placement,
+          middlewareData,
+          rects,
+          initialPlacement,
+          platform: platform2,
+          elements
+        } = state;
+        const {
+          mainAxis: checkMainAxis = true,
+          crossAxis: checkCrossAxis = true,
+          fallbackPlacements: specifiedFallbackPlacements,
+          fallbackStrategy = "bestFit",
+          fallbackAxisSideDirection = "none",
+          flipAlignment = true,
+          ...detectOverflowOptions
+        } = evaluate(options, state);
+        if ((_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
+          return {};
+        }
+        const side = getSide(placement);
+        const initialSideAxis = getSideAxis(initialPlacement);
+        const isBasePlacement = getSide(initialPlacement) === initialPlacement;
+        const rtl = await (platform2.isRTL == null ? void 0 : platform2.isRTL(elements.floating));
+        const fallbackPlacements = specifiedFallbackPlacements || (isBasePlacement || !flipAlignment ? [getOppositePlacement(initialPlacement)] : getExpandedPlacements(initialPlacement));
+        const hasFallbackAxisSideDirection = fallbackAxisSideDirection !== "none";
+        if (!specifiedFallbackPlacements && hasFallbackAxisSideDirection) {
+          fallbackPlacements.push(...getOppositeAxisPlacements(initialPlacement, flipAlignment, fallbackAxisSideDirection, rtl));
+        }
+        const placements2 = [initialPlacement, ...fallbackPlacements];
+        const overflow = await platform2.detectOverflow(state, detectOverflowOptions);
+        const overflows = [];
+        let overflowsData = ((_middlewareData$flip = middlewareData.flip) == null ? void 0 : _middlewareData$flip.overflows) || [];
+        if (checkMainAxis) {
+          overflows.push(overflow[side]);
+        }
+        if (checkCrossAxis) {
+          const sides2 = getAlignmentSides(placement, rects, rtl);
+          overflows.push(overflow[sides2[0]], overflow[sides2[1]]);
+        }
+        overflowsData = [...overflowsData, {
+          placement,
+          overflows
+        }];
+        if (!overflows.every((side2) => side2 <= 0)) {
+          var _middlewareData$flip2, _overflowsData$filter;
+          const nextIndex = (((_middlewareData$flip2 = middlewareData.flip) == null ? void 0 : _middlewareData$flip2.index) || 0) + 1;
+          const nextPlacement = placements2[nextIndex];
+          if (nextPlacement) {
+            const ignoreCrossAxisOverflow = checkCrossAxis === "alignment" ? initialSideAxis !== getSideAxis(nextPlacement) : false;
+            if (!ignoreCrossAxisOverflow || // We leave the current main axis only if every placement on that axis
+            // overflows the main axis.
+            overflowsData.every((d) => getSideAxis(d.placement) === initialSideAxis ? d.overflows[0] > 0 : true)) {
+              return {
+                data: {
+                  index: nextIndex,
+                  overflows: overflowsData
+                },
+                reset: {
+                  placement: nextPlacement
+                }
+              };
+            }
+          }
+          let resetPlacement = (_overflowsData$filter = overflowsData.filter((d) => d.overflows[0] <= 0).sort((a, b) => a.overflows[1] - b.overflows[1])[0]) == null ? void 0 : _overflowsData$filter.placement;
+          if (!resetPlacement) {
+            switch (fallbackStrategy) {
+              case "bestFit": {
+                var _overflowsData$filter2;
+                const placement2 = (_overflowsData$filter2 = overflowsData.filter((d) => {
+                  if (hasFallbackAxisSideDirection) {
+                    const currentSideAxis = getSideAxis(d.placement);
+                    return currentSideAxis === initialSideAxis || // Create a bias to the `y` side axis due to horizontal
+                    // reading directions favoring greater width.
+                    currentSideAxis === "y";
+                  }
+                  return true;
+                }).map((d) => [d.placement, d.overflows.filter((overflow2) => overflow2 > 0).reduce((acc, overflow2) => acc + overflow2, 0)]).sort((a, b) => a[1] - b[1])[0]) == null ? void 0 : _overflowsData$filter2[0];
+                if (placement2) {
+                  resetPlacement = placement2;
+                }
+                break;
+              }
+              case "initialPlacement":
+                resetPlacement = initialPlacement;
+                break;
+            }
+          }
+          if (placement !== resetPlacement) {
+            return {
+              reset: {
+                placement: resetPlacement
+              }
+            };
+          }
+        }
+        return {};
+      }
+    };
+  };
+  var originSides = /* @__PURE__ */ new Set(["left", "top"]);
+  async function convertValueToCoords(state, options) {
+    const {
+      placement,
+      platform: platform2,
+      elements
+    } = state;
+    const rtl = await (platform2.isRTL == null ? void 0 : platform2.isRTL(elements.floating));
+    const side = getSide(placement);
+    const alignment = getAlignment(placement);
+    const isVertical = getSideAxis(placement) === "y";
+    const mainAxisMulti = originSides.has(side) ? -1 : 1;
+    const crossAxisMulti = rtl && isVertical ? -1 : 1;
+    const rawValue = evaluate(options, state);
+    let {
+      mainAxis,
+      crossAxis,
+      alignmentAxis
+    } = typeof rawValue === "number" ? {
+      mainAxis: rawValue,
+      crossAxis: 0,
+      alignmentAxis: null
+    } : {
+      mainAxis: rawValue.mainAxis || 0,
+      crossAxis: rawValue.crossAxis || 0,
+      alignmentAxis: rawValue.alignmentAxis
+    };
+    if (alignment && typeof alignmentAxis === "number") {
+      crossAxis = alignment === "end" ? alignmentAxis * -1 : alignmentAxis;
+    }
+    return isVertical ? {
+      x: crossAxis * crossAxisMulti,
+      y: mainAxis * mainAxisMulti
+    } : {
+      x: mainAxis * mainAxisMulti,
+      y: crossAxis * crossAxisMulti
+    };
+  }
+  var offset = function(options) {
+    if (options === void 0) {
+      options = 0;
+    }
+    return {
+      name: "offset",
+      options,
+      async fn(state) {
+        var _middlewareData$offse, _middlewareData$arrow;
+        const {
+          x,
+          y,
+          placement,
+          middlewareData
+        } = state;
+        const diffCoords = await convertValueToCoords(state, options);
+        if (placement === ((_middlewareData$offse = middlewareData.offset) == null ? void 0 : _middlewareData$offse.placement) && (_middlewareData$arrow = middlewareData.arrow) != null && _middlewareData$arrow.alignmentOffset) {
+          return {};
+        }
+        return {
+          x: x + diffCoords.x,
+          y: y + diffCoords.y,
+          data: {
+            ...diffCoords,
+            placement
+          }
+        };
+      }
+    };
+  };
+  var shift = function(options) {
+    if (options === void 0) {
+      options = {};
+    }
+    return {
+      name: "shift",
+      options,
+      async fn(state) {
+        const {
+          x,
+          y,
+          placement,
+          platform: platform2
+        } = state;
+        const {
+          mainAxis: checkMainAxis = true,
+          crossAxis: checkCrossAxis = false,
+          limiter = {
+            fn: (_ref) => {
+              let {
+                x: x2,
+                y: y2
+              } = _ref;
+              return {
+                x: x2,
+                y: y2
+              };
+            }
+          },
+          ...detectOverflowOptions
+        } = evaluate(options, state);
+        const coords = {
+          x,
+          y
+        };
+        const overflow = await platform2.detectOverflow(state, detectOverflowOptions);
+        const crossAxis = getSideAxis(getSide(placement));
+        const mainAxis = getOppositeAxis(crossAxis);
+        let mainAxisCoord = coords[mainAxis];
+        let crossAxisCoord = coords[crossAxis];
+        if (checkMainAxis) {
+          const minSide = mainAxis === "y" ? "top" : "left";
+          const maxSide = mainAxis === "y" ? "bottom" : "right";
+          const min2 = mainAxisCoord + overflow[minSide];
+          const max2 = mainAxisCoord - overflow[maxSide];
+          mainAxisCoord = clamp(min2, mainAxisCoord, max2);
+        }
+        if (checkCrossAxis) {
+          const minSide = crossAxis === "y" ? "top" : "left";
+          const maxSide = crossAxis === "y" ? "bottom" : "right";
+          const min2 = crossAxisCoord + overflow[minSide];
+          const max2 = crossAxisCoord - overflow[maxSide];
+          crossAxisCoord = clamp(min2, crossAxisCoord, max2);
+        }
+        const limitedCoords = limiter.fn({
+          ...state,
+          [mainAxis]: mainAxisCoord,
+          [crossAxis]: crossAxisCoord
+        });
+        return {
+          ...limitedCoords,
+          data: {
+            x: limitedCoords.x - x,
+            y: limitedCoords.y - y,
+            enabled: {
+              [mainAxis]: checkMainAxis,
+              [crossAxis]: checkCrossAxis
+            }
+          }
+        };
+      }
+    };
+  };
+
+  // node_modules/@floating-ui/utils/dist/floating-ui.utils.dom.mjs
+  function hasWindow() {
+    return typeof window !== "undefined";
+  }
+  function getNodeName(node) {
+    if (isNode(node)) {
+      return (node.nodeName || "").toLowerCase();
+    }
+    return "#document";
+  }
+  function getWindow(node) {
+    var _node$ownerDocument;
+    return (node == null || (_node$ownerDocument = node.ownerDocument) == null ? void 0 : _node$ownerDocument.defaultView) || window;
+  }
+  function getDocumentElement(node) {
+    var _ref;
+    return (_ref = (isNode(node) ? node.ownerDocument : node.document) || window.document) == null ? void 0 : _ref.documentElement;
+  }
+  function isNode(value) {
+    if (!hasWindow()) {
+      return false;
+    }
+    return value instanceof Node || value instanceof getWindow(value).Node;
+  }
+  function isElement(value) {
+    if (!hasWindow()) {
+      return false;
+    }
+    return value instanceof Element || value instanceof getWindow(value).Element;
+  }
+  function isHTMLElement(value) {
+    if (!hasWindow()) {
+      return false;
+    }
+    return value instanceof HTMLElement || value instanceof getWindow(value).HTMLElement;
+  }
+  function isShadowRoot(value) {
+    if (!hasWindow() || typeof ShadowRoot === "undefined") {
+      return false;
+    }
+    return value instanceof ShadowRoot || value instanceof getWindow(value).ShadowRoot;
+  }
+  var invalidOverflowDisplayValues = /* @__PURE__ */ new Set(["inline", "contents"]);
+  function isOverflowElement(element) {
+    const {
+      overflow,
+      overflowX,
+      overflowY,
+      display
+    } = getComputedStyle2(element);
+    return /auto|scroll|overlay|hidden|clip/.test(overflow + overflowY + overflowX) && !invalidOverflowDisplayValues.has(display);
+  }
+  var tableElements = /* @__PURE__ */ new Set(["table", "td", "th"]);
+  function isTableElement(element) {
+    return tableElements.has(getNodeName(element));
+  }
+  var topLayerSelectors = [":popover-open", ":modal"];
+  function isTopLayer(element) {
+    return topLayerSelectors.some((selector) => {
+      try {
+        return element.matches(selector);
+      } catch (_e) {
+        return false;
+      }
+    });
+  }
+  var transformProperties = ["transform", "translate", "scale", "rotate", "perspective"];
+  var willChangeValues = ["transform", "translate", "scale", "rotate", "perspective", "filter"];
+  var containValues = ["paint", "layout", "strict", "content"];
+  function isContainingBlock(elementOrCss) {
+    const webkit = isWebKit();
+    const css = isElement(elementOrCss) ? getComputedStyle2(elementOrCss) : elementOrCss;
+    return transformProperties.some((value) => css[value] ? css[value] !== "none" : false) || (css.containerType ? css.containerType !== "normal" : false) || !webkit && (css.backdropFilter ? css.backdropFilter !== "none" : false) || !webkit && (css.filter ? css.filter !== "none" : false) || willChangeValues.some((value) => (css.willChange || "").includes(value)) || containValues.some((value) => (css.contain || "").includes(value));
+  }
+  function getContainingBlock(element) {
+    let currentNode = getParentNode(element);
+    while (isHTMLElement(currentNode) && !isLastTraversableNode(currentNode)) {
+      if (isContainingBlock(currentNode)) {
+        return currentNode;
+      } else if (isTopLayer(currentNode)) {
+        return null;
+      }
+      currentNode = getParentNode(currentNode);
+    }
+    return null;
+  }
+  function isWebKit() {
+    if (typeof CSS === "undefined" || !CSS.supports)
+      return false;
+    return CSS.supports("-webkit-backdrop-filter", "none");
+  }
+  var lastTraversableNodeNames = /* @__PURE__ */ new Set(["html", "body", "#document"]);
+  function isLastTraversableNode(node) {
+    return lastTraversableNodeNames.has(getNodeName(node));
+  }
+  function getComputedStyle2(element) {
+    return getWindow(element).getComputedStyle(element);
+  }
+  function getNodeScroll(element) {
+    if (isElement(element)) {
+      return {
+        scrollLeft: element.scrollLeft,
+        scrollTop: element.scrollTop
+      };
+    }
+    return {
+      scrollLeft: element.scrollX,
+      scrollTop: element.scrollY
+    };
+  }
+  function getParentNode(node) {
+    if (getNodeName(node) === "html") {
+      return node;
+    }
+    const result = (
+      // Step into the shadow DOM of the parent of a slotted node.
+      node.assignedSlot || // DOM Element detected.
+      node.parentNode || // ShadowRoot detected.
+      isShadowRoot(node) && node.host || // Fallback.
+      getDocumentElement(node)
+    );
+    return isShadowRoot(result) ? result.host : result;
+  }
+  function getNearestOverflowAncestor(node) {
+    const parentNode = getParentNode(node);
+    if (isLastTraversableNode(parentNode)) {
+      return node.ownerDocument ? node.ownerDocument.body : node.body;
+    }
+    if (isHTMLElement(parentNode) && isOverflowElement(parentNode)) {
+      return parentNode;
+    }
+    return getNearestOverflowAncestor(parentNode);
+  }
+  function getOverflowAncestors(node, list, traverseIframes) {
+    var _node$ownerDocument2;
+    if (list === void 0) {
+      list = [];
+    }
+    if (traverseIframes === void 0) {
+      traverseIframes = true;
+    }
+    const scrollableAncestor = getNearestOverflowAncestor(node);
+    const isBody = scrollableAncestor === ((_node$ownerDocument2 = node.ownerDocument) == null ? void 0 : _node$ownerDocument2.body);
+    const win = getWindow(scrollableAncestor);
+    if (isBody) {
+      const frameElement = getFrameElement(win);
+      return list.concat(win, win.visualViewport || [], isOverflowElement(scrollableAncestor) ? scrollableAncestor : [], frameElement && traverseIframes ? getOverflowAncestors(frameElement) : []);
+    }
+    return list.concat(scrollableAncestor, getOverflowAncestors(scrollableAncestor, [], traverseIframes));
+  }
+  function getFrameElement(win) {
+    return win.parent && Object.getPrototypeOf(win.parent) ? win.frameElement : null;
+  }
+
+  // node_modules/@floating-ui/dom/dist/floating-ui.dom.mjs
+  function getCssDimensions(element) {
+    const css = getComputedStyle2(element);
+    let width = parseFloat(css.width) || 0;
+    let height = parseFloat(css.height) || 0;
+    const hasOffset = isHTMLElement(element);
+    const offsetWidth = hasOffset ? element.offsetWidth : width;
+    const offsetHeight = hasOffset ? element.offsetHeight : height;
+    const shouldFallback = round(width) !== offsetWidth || round(height) !== offsetHeight;
+    if (shouldFallback) {
+      width = offsetWidth;
+      height = offsetHeight;
+    }
+    return {
+      width,
+      height,
+      $: shouldFallback
+    };
+  }
+  function unwrapElement(element) {
+    return !isElement(element) ? element.contextElement : element;
+  }
+  function getScale(element) {
+    const domElement = unwrapElement(element);
+    if (!isHTMLElement(domElement)) {
+      return createCoords(1);
+    }
+    const rect = domElement.getBoundingClientRect();
+    const {
+      width,
+      height,
+      $
+    } = getCssDimensions(domElement);
+    let x = ($ ? round(rect.width) : rect.width) / width;
+    let y = ($ ? round(rect.height) : rect.height) / height;
+    if (!x || !Number.isFinite(x)) {
+      x = 1;
+    }
+    if (!y || !Number.isFinite(y)) {
+      y = 1;
+    }
+    return {
+      x,
+      y
+    };
+  }
+  var noOffsets = /* @__PURE__ */ createCoords(0);
+  function getVisualOffsets(element) {
+    const win = getWindow(element);
+    if (!isWebKit() || !win.visualViewport) {
+      return noOffsets;
+    }
+    return {
+      x: win.visualViewport.offsetLeft,
+      y: win.visualViewport.offsetTop
+    };
+  }
+  function shouldAddVisualOffsets(element, isFixed, floatingOffsetParent) {
+    if (isFixed === void 0) {
+      isFixed = false;
+    }
+    if (!floatingOffsetParent || isFixed && floatingOffsetParent !== getWindow(element)) {
+      return false;
+    }
+    return isFixed;
+  }
+  function getBoundingClientRect(element, includeScale, isFixedStrategy, offsetParent) {
+    if (includeScale === void 0) {
+      includeScale = false;
+    }
+    if (isFixedStrategy === void 0) {
+      isFixedStrategy = false;
+    }
+    const clientRect = element.getBoundingClientRect();
+    const domElement = unwrapElement(element);
+    let scale = createCoords(1);
+    if (includeScale) {
+      if (offsetParent) {
+        if (isElement(offsetParent)) {
+          scale = getScale(offsetParent);
+        }
+      } else {
+        scale = getScale(element);
+      }
+    }
+    const visualOffsets = shouldAddVisualOffsets(domElement, isFixedStrategy, offsetParent) ? getVisualOffsets(domElement) : createCoords(0);
+    let x = (clientRect.left + visualOffsets.x) / scale.x;
+    let y = (clientRect.top + visualOffsets.y) / scale.y;
+    let width = clientRect.width / scale.x;
+    let height = clientRect.height / scale.y;
+    if (domElement) {
+      const win = getWindow(domElement);
+      const offsetWin = offsetParent && isElement(offsetParent) ? getWindow(offsetParent) : offsetParent;
+      let currentWin = win;
+      let currentIFrame = getFrameElement(currentWin);
+      while (currentIFrame && offsetParent && offsetWin !== currentWin) {
+        const iframeScale = getScale(currentIFrame);
+        const iframeRect = currentIFrame.getBoundingClientRect();
+        const css = getComputedStyle2(currentIFrame);
+        const left = iframeRect.left + (currentIFrame.clientLeft + parseFloat(css.paddingLeft)) * iframeScale.x;
+        const top = iframeRect.top + (currentIFrame.clientTop + parseFloat(css.paddingTop)) * iframeScale.y;
+        x *= iframeScale.x;
+        y *= iframeScale.y;
+        width *= iframeScale.x;
+        height *= iframeScale.y;
+        x += left;
+        y += top;
+        currentWin = getWindow(currentIFrame);
+        currentIFrame = getFrameElement(currentWin);
+      }
+    }
+    return rectToClientRect({
+      width,
+      height,
+      x,
+      y
+    });
+  }
+  function getWindowScrollBarX(element, rect) {
+    const leftScroll = getNodeScroll(element).scrollLeft;
+    if (!rect) {
+      return getBoundingClientRect(getDocumentElement(element)).left + leftScroll;
+    }
+    return rect.left + leftScroll;
+  }
+  function getHTMLOffset(documentElement, scroll) {
+    const htmlRect = documentElement.getBoundingClientRect();
+    const x = htmlRect.left + scroll.scrollLeft - getWindowScrollBarX(documentElement, htmlRect);
+    const y = htmlRect.top + scroll.scrollTop;
+    return {
+      x,
+      y
+    };
+  }
+  function convertOffsetParentRelativeRectToViewportRelativeRect(_ref) {
+    let {
+      elements,
+      rect,
+      offsetParent,
+      strategy
+    } = _ref;
+    const isFixed = strategy === "fixed";
+    const documentElement = getDocumentElement(offsetParent);
+    const topLayer = elements ? isTopLayer(elements.floating) : false;
+    if (offsetParent === documentElement || topLayer && isFixed) {
+      return rect;
+    }
+    let scroll = {
+      scrollLeft: 0,
+      scrollTop: 0
+    };
+    let scale = createCoords(1);
+    const offsets = createCoords(0);
+    const isOffsetParentAnElement = isHTMLElement(offsetParent);
+    if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
+      if (getNodeName(offsetParent) !== "body" || isOverflowElement(documentElement)) {
+        scroll = getNodeScroll(offsetParent);
+      }
+      if (isHTMLElement(offsetParent)) {
+        const offsetRect = getBoundingClientRect(offsetParent);
+        scale = getScale(offsetParent);
+        offsets.x = offsetRect.x + offsetParent.clientLeft;
+        offsets.y = offsetRect.y + offsetParent.clientTop;
+      }
+    }
+    const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
+    return {
+      width: rect.width * scale.x,
+      height: rect.height * scale.y,
+      x: rect.x * scale.x - scroll.scrollLeft * scale.x + offsets.x + htmlOffset.x,
+      y: rect.y * scale.y - scroll.scrollTop * scale.y + offsets.y + htmlOffset.y
+    };
+  }
+  function getClientRects(element) {
+    return Array.from(element.getClientRects());
+  }
+  function getDocumentRect(element) {
+    const html = getDocumentElement(element);
+    const scroll = getNodeScroll(element);
+    const body = element.ownerDocument.body;
+    const width = max(html.scrollWidth, html.clientWidth, body.scrollWidth, body.clientWidth);
+    const height = max(html.scrollHeight, html.clientHeight, body.scrollHeight, body.clientHeight);
+    let x = -scroll.scrollLeft + getWindowScrollBarX(element);
+    const y = -scroll.scrollTop;
+    if (getComputedStyle2(body).direction === "rtl") {
+      x += max(html.clientWidth, body.clientWidth) - width;
+    }
+    return {
+      width,
+      height,
+      x,
+      y
+    };
+  }
+  var SCROLLBAR_MAX = 25;
+  function getViewportRect(element, strategy) {
+    const win = getWindow(element);
+    const html = getDocumentElement(element);
+    const visualViewport = win.visualViewport;
+    let width = html.clientWidth;
+    let height = html.clientHeight;
+    let x = 0;
+    let y = 0;
+    if (visualViewport) {
+      width = visualViewport.width;
+      height = visualViewport.height;
+      const visualViewportBased = isWebKit();
+      if (!visualViewportBased || visualViewportBased && strategy === "fixed") {
+        x = visualViewport.offsetLeft;
+        y = visualViewport.offsetTop;
+      }
+    }
+    const windowScrollbarX = getWindowScrollBarX(html);
+    if (windowScrollbarX <= 0) {
+      const doc = html.ownerDocument;
+      const body = doc.body;
+      const bodyStyles = getComputedStyle(body);
+      const bodyMarginInline = doc.compatMode === "CSS1Compat" ? parseFloat(bodyStyles.marginLeft) + parseFloat(bodyStyles.marginRight) || 0 : 0;
+      const clippingStableScrollbarWidth = Math.abs(html.clientWidth - body.clientWidth - bodyMarginInline);
+      if (clippingStableScrollbarWidth <= SCROLLBAR_MAX) {
+        width -= clippingStableScrollbarWidth;
+      }
+    } else if (windowScrollbarX <= SCROLLBAR_MAX) {
+      width += windowScrollbarX;
+    }
+    return {
+      width,
+      height,
+      x,
+      y
+    };
+  }
+  var absoluteOrFixed = /* @__PURE__ */ new Set(["absolute", "fixed"]);
+  function getInnerBoundingClientRect(element, strategy) {
+    const clientRect = getBoundingClientRect(element, true, strategy === "fixed");
+    const top = clientRect.top + element.clientTop;
+    const left = clientRect.left + element.clientLeft;
+    const scale = isHTMLElement(element) ? getScale(element) : createCoords(1);
+    const width = element.clientWidth * scale.x;
+    const height = element.clientHeight * scale.y;
+    const x = left * scale.x;
+    const y = top * scale.y;
+    return {
+      width,
+      height,
+      x,
+      y
+    };
+  }
+  function getClientRectFromClippingAncestor(element, clippingAncestor, strategy) {
+    let rect;
+    if (clippingAncestor === "viewport") {
+      rect = getViewportRect(element, strategy);
+    } else if (clippingAncestor === "document") {
+      rect = getDocumentRect(getDocumentElement(element));
+    } else if (isElement(clippingAncestor)) {
+      rect = getInnerBoundingClientRect(clippingAncestor, strategy);
+    } else {
+      const visualOffsets = getVisualOffsets(element);
+      rect = {
+        x: clippingAncestor.x - visualOffsets.x,
+        y: clippingAncestor.y - visualOffsets.y,
+        width: clippingAncestor.width,
+        height: clippingAncestor.height
+      };
+    }
+    return rectToClientRect(rect);
+  }
+  function hasFixedPositionAncestor(element, stopNode) {
+    const parentNode = getParentNode(element);
+    if (parentNode === stopNode || !isElement(parentNode) || isLastTraversableNode(parentNode)) {
+      return false;
+    }
+    return getComputedStyle2(parentNode).position === "fixed" || hasFixedPositionAncestor(parentNode, stopNode);
+  }
+  function getClippingElementAncestors(element, cache) {
+    const cachedResult = cache.get(element);
+    if (cachedResult) {
+      return cachedResult;
+    }
+    let result = getOverflowAncestors(element, [], false).filter((el) => isElement(el) && getNodeName(el) !== "body");
+    let currentContainingBlockComputedStyle = null;
+    const elementIsFixed = getComputedStyle2(element).position === "fixed";
+    let currentNode = elementIsFixed ? getParentNode(element) : element;
+    while (isElement(currentNode) && !isLastTraversableNode(currentNode)) {
+      const computedStyle = getComputedStyle2(currentNode);
+      const currentNodeIsContaining = isContainingBlock(currentNode);
+      if (!currentNodeIsContaining && computedStyle.position === "fixed") {
+        currentContainingBlockComputedStyle = null;
+      }
+      const shouldDropCurrentNode = elementIsFixed ? !currentNodeIsContaining && !currentContainingBlockComputedStyle : !currentNodeIsContaining && computedStyle.position === "static" && !!currentContainingBlockComputedStyle && absoluteOrFixed.has(currentContainingBlockComputedStyle.position) || isOverflowElement(currentNode) && !currentNodeIsContaining && hasFixedPositionAncestor(element, currentNode);
+      if (shouldDropCurrentNode) {
+        result = result.filter((ancestor) => ancestor !== currentNode);
+      } else {
+        currentContainingBlockComputedStyle = computedStyle;
+      }
+      currentNode = getParentNode(currentNode);
+    }
+    cache.set(element, result);
+    return result;
+  }
+  function getClippingRect(_ref) {
+    let {
+      element,
+      boundary,
+      rootBoundary,
+      strategy
+    } = _ref;
+    const elementClippingAncestors = boundary === "clippingAncestors" ? isTopLayer(element) ? [] : getClippingElementAncestors(element, this._c) : [].concat(boundary);
+    const clippingAncestors = [...elementClippingAncestors, rootBoundary];
+    const firstClippingAncestor = clippingAncestors[0];
+    const clippingRect = clippingAncestors.reduce((accRect, clippingAncestor) => {
+      const rect = getClientRectFromClippingAncestor(element, clippingAncestor, strategy);
+      accRect.top = max(rect.top, accRect.top);
+      accRect.right = min(rect.right, accRect.right);
+      accRect.bottom = min(rect.bottom, accRect.bottom);
+      accRect.left = max(rect.left, accRect.left);
+      return accRect;
+    }, getClientRectFromClippingAncestor(element, firstClippingAncestor, strategy));
+    return {
+      width: clippingRect.right - clippingRect.left,
+      height: clippingRect.bottom - clippingRect.top,
+      x: clippingRect.left,
+      y: clippingRect.top
+    };
+  }
+  function getDimensions(element) {
+    const {
+      width,
+      height
+    } = getCssDimensions(element);
+    return {
+      width,
+      height
+    };
+  }
+  function getRectRelativeToOffsetParent(element, offsetParent, strategy) {
+    const isOffsetParentAnElement = isHTMLElement(offsetParent);
+    const documentElement = getDocumentElement(offsetParent);
+    const isFixed = strategy === "fixed";
+    const rect = getBoundingClientRect(element, true, isFixed, offsetParent);
+    let scroll = {
+      scrollLeft: 0,
+      scrollTop: 0
+    };
+    const offsets = createCoords(0);
+    function setLeftRTLScrollbarOffset() {
+      offsets.x = getWindowScrollBarX(documentElement);
+    }
+    if (isOffsetParentAnElement || !isOffsetParentAnElement && !isFixed) {
+      if (getNodeName(offsetParent) !== "body" || isOverflowElement(documentElement)) {
+        scroll = getNodeScroll(offsetParent);
+      }
+      if (isOffsetParentAnElement) {
+        const offsetRect = getBoundingClientRect(offsetParent, true, isFixed, offsetParent);
+        offsets.x = offsetRect.x + offsetParent.clientLeft;
+        offsets.y = offsetRect.y + offsetParent.clientTop;
+      } else if (documentElement) {
+        setLeftRTLScrollbarOffset();
+      }
+    }
+    if (isFixed && !isOffsetParentAnElement && documentElement) {
+      setLeftRTLScrollbarOffset();
+    }
+    const htmlOffset = documentElement && !isOffsetParentAnElement && !isFixed ? getHTMLOffset(documentElement, scroll) : createCoords(0);
+    const x = rect.left + scroll.scrollLeft - offsets.x - htmlOffset.x;
+    const y = rect.top + scroll.scrollTop - offsets.y - htmlOffset.y;
+    return {
+      x,
+      y,
+      width: rect.width,
+      height: rect.height
+    };
+  }
+  function isStaticPositioned(element) {
+    return getComputedStyle2(element).position === "static";
+  }
+  function getTrueOffsetParent(element, polyfill) {
+    if (!isHTMLElement(element) || getComputedStyle2(element).position === "fixed") {
+      return null;
+    }
+    if (polyfill) {
+      return polyfill(element);
+    }
+    let rawOffsetParent = element.offsetParent;
+    if (getDocumentElement(element) === rawOffsetParent) {
+      rawOffsetParent = rawOffsetParent.ownerDocument.body;
+    }
+    return rawOffsetParent;
+  }
+  function getOffsetParent(element, polyfill) {
+    const win = getWindow(element);
+    if (isTopLayer(element)) {
+      return win;
+    }
+    if (!isHTMLElement(element)) {
+      let svgOffsetParent = getParentNode(element);
+      while (svgOffsetParent && !isLastTraversableNode(svgOffsetParent)) {
+        if (isElement(svgOffsetParent) && !isStaticPositioned(svgOffsetParent)) {
+          return svgOffsetParent;
+        }
+        svgOffsetParent = getParentNode(svgOffsetParent);
+      }
+      return win;
+    }
+    let offsetParent = getTrueOffsetParent(element, polyfill);
+    while (offsetParent && isTableElement(offsetParent) && isStaticPositioned(offsetParent)) {
+      offsetParent = getTrueOffsetParent(offsetParent, polyfill);
+    }
+    if (offsetParent && isLastTraversableNode(offsetParent) && isStaticPositioned(offsetParent) && !isContainingBlock(offsetParent)) {
+      return win;
+    }
+    return offsetParent || getContainingBlock(element) || win;
+  }
+  var getElementRects = async function(data) {
+    const getOffsetParentFn = this.getOffsetParent || getOffsetParent;
+    const getDimensionsFn = this.getDimensions;
+    const floatingDimensions = await getDimensionsFn(data.floating);
+    return {
+      reference: getRectRelativeToOffsetParent(data.reference, await getOffsetParentFn(data.floating), data.strategy),
+      floating: {
+        x: 0,
+        y: 0,
+        width: floatingDimensions.width,
+        height: floatingDimensions.height
+      }
+    };
+  };
+  function isRTL(element) {
+    return getComputedStyle2(element).direction === "rtl";
+  }
+  var platform = {
+    convertOffsetParentRelativeRectToViewportRelativeRect,
+    getDocumentElement,
+    getClippingRect,
+    getOffsetParent,
+    getElementRects,
+    getClientRects,
+    getDimensions,
+    getScale,
+    isElement,
+    isRTL
+  };
+  var offset2 = offset;
+  var shift2 = shift;
+  var flip2 = flip;
+  var computePosition2 = (reference, floating, options) => {
+    const cache = /* @__PURE__ */ new Map();
+    const mergedOptions = {
+      platform,
+      ...options
+    };
+    const platformWithCache = {
+      ...mergedOptions.platform,
+      _c: cache
+    };
+    return computePosition(reference, floating, {
+      ...mergedOptions,
+      platform: platformWithCache
+    });
+  };
+
   // src/link-tooltip.js
   var LinkTooltip = class {
     constructor(editor) {
@@ -2939,27 +4214,10 @@ ${blockSuffix}` : suffix;
       this.currentLink = null;
       this.hideTimeout = null;
       this.visibilityChangeHandler = null;
-      this.useFloatingUI = false;
-      this.floatingUI = null;
       this.isTooltipHovered = false;
       this.init();
     }
-    async init() {
-      const supportsAnchorPositioning = CSS.supports("position-anchor: --x") && CSS.supports("position-area: center");
-      if (!supportsAnchorPositioning) {
-        try {
-          const importFn = new Function("url", "return import(url)");
-          const { computePosition, offset, shift, flip } = await importFn(
-            "https://cdn.jsdelivr.net/npm/@floating-ui/dom@1.7.4/+esm"
-          );
-          this.floatingUI = { computePosition, offset, shift, flip };
-          this.useFloatingUI = true;
-        } catch (error) {
-          console.warn("Failed to load Floating UI fallback:", error);
-          this.floatingUI = null;
-          this.useFloatingUI = false;
-        }
-      }
+    init() {
       this.createTooltip();
       this.editor.textarea.addEventListener("selectionchange", () => this.checkCursorPosition());
       this.editor.textarea.addEventListener("keyup", (e) => {
@@ -2969,10 +4227,8 @@ ${blockSuffix}` : suffix;
       });
       this.editor.textarea.addEventListener("input", () => this.hide());
       this.editor.textarea.addEventListener("scroll", () => {
-        if (this.useFloatingUI && this.currentLink) {
-          this.showWithFloatingUI(this.currentLink);
-        } else {
-          this.hide();
+        if (this.currentLink) {
+          this.positionTooltip(this.currentLink);
         }
       });
       this.editor.textarea.addEventListener("blur", () => {
@@ -3049,22 +4305,17 @@ ${blockSuffix}` : suffix;
       }
       return null;
     }
-    show(linkInfo) {
+    async show(linkInfo) {
       this.currentLink = linkInfo;
       this.cancelHide();
       const urlSpan = this.tooltip.querySelector(".overtype-link-tooltip-url");
       urlSpan.textContent = linkInfo.url;
-      if (this.useFloatingUI) {
-        this.showWithFloatingUI(linkInfo);
-      } else {
-        this.showWithAnchorPositioning(linkInfo);
+      await this.positionTooltip(linkInfo);
+      if (this.currentLink === linkInfo) {
+        this.tooltip.classList.add("visible");
       }
-      this.tooltip.classList.add("visible");
-    }
-    showWithAnchorPositioning(linkInfo) {
-      this.tooltip.style.setProperty("--target-anchor", `--link-${linkInfo.index}`);
     }
-    async showWithFloatingUI(linkInfo) {
+    async positionTooltip(linkInfo) {
       const anchorElement = this.findAnchorElement(linkInfo.index);
       if (!anchorElement) {
         return;
@@ -3074,26 +4325,26 @@ ${blockSuffix}` : suffix;
         return;
       }
       try {
-        const { x, y } = await this.floatingUI.computePosition(
+        const { x, y } = await computePosition2(
           anchorElement,
           this.tooltip,
           {
+            strategy: "fixed",
             placement: "bottom",
             middleware: [
-              this.floatingUI.offset(8),
-              this.floatingUI.shift({ padding: 8 }),
-              this.floatingUI.flip()
+              offset2(8),
+              shift2({ padding: 8 }),
+              flip2()
             ]
           }
         );
         Object.assign(this.tooltip.style, {
           left: `${x}px`,
           top: `${y}px`,
-          position: "absolute"
+          position: "fixed"
         });
       } catch (error) {
         console.warn("Floating UI positioning failed:", error);
-        return;
       }
     }
     findAnchorElement(linkIndex) {
@@ -3126,8 +4377,6 @@ ${blockSuffix}` : suffix;
       }
       this.tooltip = null;
       this.currentLink = null;
-      this.floatingUI = null;
-      this.useFloatingUI = false;
       this.isTooltipHovered = false;
     }
   };
@@ -3189,6 +4438,11 @@ ${blockSuffix}` : suffix;
   <rect stroke="currentColor" fill="none" stroke-width="1.5" x="2" y="3" width="3" height="3" rx="0.5"></rect>
   <rect stroke="currentColor" fill="none" stroke-width="1.5" x="2" y="13" width="3" height="3" rx="0.5"></rect>
   <polyline stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="1.5" points="2.65 9.5 3.5 10.5 5 8.5"></polyline>
+</svg>`;
+  var uploadIcon = `<svg viewBox="0 0 18 18">
+  <path stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M2.25 12.375v1.688A1.688 1.688 0 0 0 3.938 15.75h10.124a1.688 1.688 0 0 0 1.688-1.688V12.375"></path>
+  <path stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M5.063 6.188L9 2.25l3.938 3.938"></path>
+  <path stroke="currentColor" fill="none" stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9 2.25v10.125"></path>
 </svg>`;
   var eyeIcon = `<svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round">
   <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z" fill="none"></path>
@@ -3313,6 +4567,33 @@ ${blockSuffix}` : suffix;
         editor.textarea.dispatchEvent(new Event("input", { bubbles: true }));
       }
     },
+    upload: {
+      name: "upload",
+      actionId: "uploadFile",
+      icon: uploadIcon,
+      title: "Upload File",
+      action: ({ editor }) => {
+        var _a, _b;
+        if (!((_a = editor.options.fileUpload) == null ? void 0 : _a.enabled))
+          return;
+        const input = document.createElement("input");
+        input.type = "file";
+        input.multiple = true;
+        if (((_b = editor.options.fileUpload.mimeTypes) == null ? void 0 : _b.length) > 0) {
+          input.accept = editor.options.fileUpload.mimeTypes.join(",");
+        }
+        input.onchange = () => {
+          var _a2;
+          if (!((_a2 = input.files) == null ? void 0 : _a2.length))
+            return;
+          const dt = new DataTransfer();
+          for (const f of input.files)
+            dt.items.add(f);
+          editor._handleDataTransfer(dt);
+        };
+        input.click();
+      }
+    },
     viewMode: {
       name: "viewMode",
       icon: eyeIcon,
@@ -3437,6 +4718,9 @@ ${blockSuffix}` : suffix;
       } else {
         this._buildFromScratch();
       }
+      if (this.instanceTheme === "auto") {
+        this.setTheme("auto");
+      }
       this.shortcuts = new ShortcutsManager(this);
       this._rebuildActionsMap();
       this.linkTooltip = new LinkTooltip(this);
@@ -3494,8 +4778,10 @@ ${blockSuffix}` : suffix;
         statsFormatter: null,
         smartLists: true,
         // Enable smart list continuation
-        codeHighlighter: null
+        codeHighlighter: null,
         // Per-instance code highlighter
+        spellcheck: false
+        // Browser spellcheck (disabled by default)
       };
       const { theme, colors, ...cleanOptions } = options;
       return {
@@ -3630,8 +4916,13 @@ ${blockSuffix}` : suffix;
       this.preview = document.createElement("div");
       this.preview.className = "overtype-preview";
       this.preview.setAttribute("aria-hidden", "true");
+      this.placeholderEl = document.createElement("div");
+      this.placeholderEl.className = "overtype-placeholder";
+      this.placeholderEl.setAttribute("aria-hidden", "true");
+      this.placeholderEl.textContent = this.options.placeholder;
       this.wrapper.appendChild(this.textarea);
       this.wrapper.appendChild(this.preview);
+      this.wrapper.appendChild(this.placeholderEl);
       this.container.appendChild(this.wrapper);
       if (this.options.showStats) {
         this.statsBar = document.createElement("div");
@@ -3654,7 +4945,7 @@ ${blockSuffix}` : suffix;
       this.textarea.setAttribute("autocomplete", "off");
       this.textarea.setAttribute("autocorrect", "off");
       this.textarea.setAttribute("autocapitalize", "off");
-      this.textarea.setAttribute("spellcheck", "false");
+      this.textarea.setAttribute("spellcheck", String(this.options.spellcheck));
       this.textarea.setAttribute("data-gramm", "false");
       this.textarea.setAttribute("data-gramm_editor", "false");
       this.textarea.setAttribute("data-enable-grammarly", "false");
@@ -3664,7 +4955,17 @@ ${blockSuffix}` : suffix;
      * @private
      */
     _createToolbar() {
-      const toolbarButtons2 = this.options.toolbarButtons || defaultToolbarButtons;
+      var _a;
+      let toolbarButtons2 = this.options.toolbarButtons || defaultToolbarButtons;
+      if (((_a = this.options.fileUpload) == null ? void 0 : _a.enabled) && !toolbarButtons2.some((b) => (b == null ? void 0 : b.name) === "upload")) {
+        const viewModeIdx = toolbarButtons2.findIndex((b) => (b == null ? void 0 : b.name) === "viewMode");
+        if (viewModeIdx !== -1) {
+          toolbarButtons2 = [...toolbarButtons2];
+          toolbarButtons2.splice(viewModeIdx, 0, toolbarButtons.separator, toolbarButtons.upload);
+        } else {
+          toolbarButtons2 = [...toolbarButtons2, toolbarButtons.separator, toolbarButtons.upload];
+        }
+      }
       this.toolbar = new Toolbar(this, { toolbarButtons: toolbarButtons2 });
       this.toolbar.create();
       this._toolbarSelectionListener = () => {
@@ -3700,10 +5001,14 @@ ${blockSuffix}` : suffix;
      * @private
      */
     _rebuildActionsMap() {
+      var _a;
       this.actionsById = buildActionsMap(defaultToolbarButtons);
       if (this.options.toolbarButtons) {
         Object.assign(this.actionsById, buildActionsMap(this.options.toolbarButtons));
       }
+      if ((_a = this.options.fileUpload) == null ? void 0 : _a.enabled) {
+        Object.assign(this.actionsById, buildActionsMap([toolbarButtons.upload]));
+      }
     }
     /**
      * Apply options to the editor
@@ -3716,6 +5021,8 @@ ${blockSuffix}` : suffix;
       if (this.options.autoResize) {
         if (!this.container.classList.contains("overtype-auto-resize")) {
           this._setupAutoResize();
+        } else {
+          this._updateAutoHeight();
         }
       } else {
         this.container.classList.remove("overtype-auto-resize");
@@ -3727,8 +5034,119 @@ ${blockSuffix}` : suffix;
         this.toolbar.destroy();
         this.toolbar = null;
       }
+      if (this.placeholderEl) {
+        this.placeholderEl.textContent = this.options.placeholder;
+      }
+      if (this.options.fileUpload && !this.fileUploadInitialized) {
+        this._initFileUpload();
+      } else if (!this.options.fileUpload && this.fileUploadInitialized) {
+        this._destroyFileUpload();
+      }
       this.updatePreview();
     }
+    _initFileUpload() {
+      const options = this.options.fileUpload;
+      if (!options || !options.enabled)
+        return;
+      options.maxSize = options.maxSize || 10 * 1024 * 1024;
+      options.mimeTypes = options.mimeTypes || [];
+      options.batch = options.batch || false;
+      if (!options.onInsertFile || typeof options.onInsertFile !== "function") {
+        console.warn("OverType: fileUpload.onInsertFile callback is required for file uploads.");
+        return;
+      }
+      this._fileUploadCounter = 0;
+      this._boundHandleFilePaste = this._handleFilePaste.bind(this);
+      this._boundHandleFileDrop = this._handleFileDrop.bind(this);
+      this._boundHandleDragOver = this._handleDragOver.bind(this);
+      this.textarea.addEventListener("paste", this._boundHandleFilePaste);
+      this.textarea.addEventListener("drop", this._boundHandleFileDrop);
+      this.textarea.addEventListener("dragover", this._boundHandleDragOver);
+      this.fileUploadInitialized = true;
+    }
+    _handleFilePaste(e) {
+      var _a, _b;
+      if (!((_b = (_a = e == null ? void 0 : e.clipboardData) == null ? void 0 : _a.files) == null ? void 0 : _b.length))
+        return;
+      e.preventDefault();
+      this._handleDataTransfer(e.clipboardData);
+    }
+    _handleFileDrop(e) {
+      var _a, _b;
+      if (!((_b = (_a = e == null ? void 0 : e.dataTransfer) == null ? void 0 : _a.files) == null ? void 0 : _b.length))
+        return;
+      e.preventDefault();
+      this._handleDataTransfer(e.dataTransfer);
+    }
+    _handleDataTransfer(dataTransfer) {
+      const files = [];
+      for (const file of dataTransfer.files) {
+        if (file.size > this.options.fileUpload.maxSize)
+          continue;
+        if (this.options.fileUpload.mimeTypes.length > 0 && !this.options.fileUpload.mimeTypes.includes(file.type))
+          continue;
+        const id = ++this._fileUploadCounter;
+        const prefix = file.type.startsWith("image/") ? "!" : "";
+        const placeholder = `${prefix}[Uploading ${file.name} (#${id})...]()`;
+        this.insertAtCursor(`${placeholder}
+`);
+        if (this.options.fileUpload.batch) {
+          files.push({ file, placeholder });
+          continue;
+        }
+        this.options.fileUpload.onInsertFile(file).then((text) => {
+          this.textarea.value = this.textarea.value.replace(placeholder, text);
+          this.textarea.dispatchEvent(new Event("input", { bubbles: true }));
+        }, (error) => {
+          console.error("OverType: File upload failed", error);
+          this.textarea.value = this.textarea.value.replace(placeholder, "[Upload failed]()");
+          this.textarea.dispatchEvent(new Event("input", { bubbles: true }));
+        });
+      }
+      if (this.options.fileUpload.batch && files.length > 0) {
+        this.options.fileUpload.onInsertFile(files.map((f) => f.file)).then((result) => {
+          const texts = Array.isArray(result) ? result : [result];
+          texts.forEach((text, index) => {
+            this.textarea.value = this.textarea.value.replace(files[index].placeholder, text);
+          });
+          this.textarea.dispatchEvent(new Event("input", { bubbles: true }));
+        }, (error) => {
+          console.error("OverType: File upload failed", error);
+          files.forEach(({ placeholder }) => {
+            this.textarea.value = this.textarea.value.replace(placeholder, "[Upload failed]()");
+          });
+          this.textarea.dispatchEvent(new Event("input", { bubbles: true }));
+        });
+      }
+    }
+    _handleDragOver(e) {
+      e.preventDefault();
+    }
+    _destroyFileUpload() {
+      this.textarea.removeEventListener("paste", this._boundHandleFilePaste);
+      this.textarea.removeEventListener("drop", this._boundHandleFileDrop);
+      this.textarea.removeEventListener("dragover", this._boundHandleDragOver);
+      this._boundHandleFilePaste = null;
+      this._boundHandleFileDrop = null;
+      this._boundHandleDragOver = null;
+      this.fileUploadInitialized = false;
+    }
+    insertAtCursor(text) {
+      const start = this.textarea.selectionStart;
+      const end = this.textarea.selectionEnd;
+      let inserted = false;
+      try {
+        inserted = document.execCommand("insertText", false, text);
+      } catch (_) {
+      }
+      if (!inserted) {
+        const before = this.textarea.value.slice(0, start);
+        const after = this.textarea.value.slice(end);
+        this.textarea.value = before + text + after;
+        this.textarea.setSelectionRange(start + text.length, start + text.length);
+      }
+      this.textarea.dispatchEvent(new Event("input", { bubbles: true }));
+    }
     /**
      * Update preview with parsed markdown
      */
@@ -3738,7 +5156,10 @@ ${blockSuffix}` : suffix;
       const activeLine = this._getCurrentLine(text, cursorPos);
       const isPreviewMode = this.container.dataset.mode === "preview";
       const html = MarkdownParser.parse(text, activeLine, this.options.showActiveLineRaw, this.options.codeHighlighter, isPreviewMode);
-      this.preview.innerHTML = html || '<span style="color: #808080;">Start typing...</span>';
+      this.preview.innerHTML = html;
+      if (this.placeholderEl) {
+        this.placeholderEl.style.display = text ? "none" : "";
+      }
       this._applyCodeBlockBackgrounds();
       if (this.options.showStats && this.statsBar) {
         this._updateStats();
@@ -3921,7 +5342,7 @@ ${blockSuffix}` : suffix;
       const cursorPos = this.textarea.selectionStart;
       const newValue = MarkdownParser.renumberLists(value);
       if (newValue !== value) {
-        let offset = 0;
+        let offset3 = 0;
         const oldLines = value.split("\n");
         const newLines = newValue.split("\n");
         let charCount = 0;
@@ -3929,13 +5350,13 @@ ${blockSuffix}` : suffix;
           if (oldLines[i] !== newLines[i]) {
             const diff = newLines[i].length - oldLines[i].length;
             if (charCount + oldLines[i].length < cursorPos) {
-              offset += diff;
+              offset3 += diff;
             }
           }
           charCount += oldLines[i].length + 1;
         }
         this.textarea.value = newValue;
-        const newCursorPos = cursorPos + offset;
+        const newCursorPos = cursorPos + offset3;
         this.textarea.setSelectionRange(newCursorPos, newCursorPos);
         this.textarea.dispatchEvent(new Event("input", { bubbles: true }));
       }
@@ -4067,27 +5488,61 @@ ${blockSuffix}` : suffix;
         this.toolbar = null;
         this._createToolbar();
       }
+      if (this.fileUploadInitialized) {
+        this._destroyFileUpload();
+      }
+      if (this.options.fileUpload) {
+        this._initFileUpload();
+      }
       this._applyOptions();
       this.updatePreview();
     }
+    showToolbar() {
+      if (this.toolbar) {
+        this.toolbar.show();
+      } else {
+        this._createToolbar();
+      }
+    }
+    hideToolbar() {
+      if (this.toolbar) {
+        this.toolbar.hide();
+      }
+    }
     /**
      * Set theme for this instance
      * @param {string|Object} theme - Theme name or custom theme object
      * @returns {this} Returns this for chaining
      */
     setTheme(theme) {
+      _OverType._autoInstances.delete(this);
       this.instanceTheme = theme;
-      const themeObj = typeof theme === "string" ? getTheme(theme) : theme;
-      const themeName = typeof themeObj === "string" ? themeObj : themeObj.name;
-      if (themeName) {
-        this.container.setAttribute("data-theme", themeName);
+      if (theme === "auto") {
+        _OverType._autoInstances.add(this);
+        _OverType._startAutoListener();
+        this._applyResolvedTheme(resolveAutoTheme("auto"));
+      } else {
+        const themeObj = typeof theme === "string" ? getTheme(theme) : theme;
+        const themeName = typeof themeObj === "string" ? themeObj : themeObj.name;
+        if (themeName) {
+          this.container.setAttribute("data-theme", themeName);
+        }
+        if (themeObj && themeObj.colors) {
+          const cssVars = themeToCSSVars(themeObj.colors, themeObj.previewColors);
+          this.container.style.cssText += cssVars;
+        }
+        this.updatePreview();
       }
+      _OverType._stopAutoListener();
+      return this;
+    }
+    _applyResolvedTheme(themeName) {
+      const themeObj = getTheme(themeName);
+      this.container.setAttribute("data-theme", themeName);
       if (themeObj && themeObj.colors) {
-        const cssVars = themeToCSSVars(themeObj.colors);
-        this.container.style.cssText += cssVars;
+        this.container.style.cssText = themeToCSSVars(themeObj.colors, themeObj.previewColors);
       }
       this.updatePreview();
-      return this;
     }
     /**
      * Set instance-specific code highlighter
@@ -4241,6 +5696,11 @@ ${blockSuffix}` : suffix;
      * Destroy the editor instance
      */
     destroy() {
+      _OverType._autoInstances.delete(this);
+      _OverType._stopAutoListener();
+      if (this.fileUploadInitialized) {
+        this._destroyFileUpload();
+      }
       this.element.overTypeInstance = null;
       _OverType.instances.delete(this.element);
       if (this.shortcuts) {
@@ -4283,7 +5743,7 @@ ${blockSuffix}` : suffix;
             options[key] = _OverType._parseDataValue(attr.value);
           }
         }
-        return new _OverType(el, options);
+        return new _OverType(el, options)[0];
       });
     }
     /**
@@ -4346,23 +5806,35 @@ ${blockSuffix}` : suffix;
      * @param {Object} customColors - Optional color overrides
      */
     static setTheme(theme, customColors = null) {
+      _OverType._globalAutoTheme = false;
+      _OverType._globalAutoCustomColors = null;
+      if (theme === "auto") {
+        _OverType._globalAutoTheme = true;
+        _OverType._globalAutoCustomColors = customColors;
+        _OverType._startAutoListener();
+        _OverType._applyGlobalTheme(resolveAutoTheme("auto"), customColors);
+        return;
+      }
+      _OverType._stopAutoListener();
+      _OverType._applyGlobalTheme(theme, customColors);
+    }
+    static _applyGlobalTheme(theme, customColors = null) {
       let themeObj = typeof theme === "string" ? getTheme(theme) : theme;
       if (customColors) {
         themeObj = mergeTheme(themeObj, customColors);
       }
       _OverType.currentTheme = themeObj;
       _OverType.injectStyles(true);
+      const themeName = typeof themeObj === "string" ? themeObj : themeObj.name;
       document.querySelectorAll(".overtype-container").forEach((container) => {
-        const themeName2 = typeof themeObj === "string" ? themeObj : themeObj.name;
-        if (themeName2) {
-          container.setAttribute("data-theme", themeName2);
+        if (themeName) {
+          container.setAttribute("data-theme", themeName);
         }
       });
       document.querySelectorAll(".overtype-wrapper").forEach((wrapper) => {
         if (!wrapper.closest(".overtype-container")) {
-          const themeName2 = typeof themeObj === "string" ? themeObj : themeObj.name;
-          if (themeName2) {
-            wrapper.setAttribute("data-theme", themeName2);
+          if (themeName) {
+            wrapper.setAttribute("data-theme", themeName);
           }
         }
         const instance = wrapper._instance;
@@ -4370,7 +5842,6 @@ ${blockSuffix}` : suffix;
           instance.updatePreview();
         }
       });
-      const themeName = typeof themeObj === "string" ? themeObj : themeObj.name;
       document.querySelectorAll("overtype-editor").forEach((webComponent) => {
         if (themeName && typeof webComponent.setAttribute === "function") {
           webComponent.setAttribute("theme", themeName);
@@ -4380,6 +5851,30 @@ ${blockSuffix}` : suffix;
         }
       });
     }
+    static _startAutoListener() {
+      if (_OverType._autoMediaQuery)
+        return;
+      if (!window.matchMedia)
+        return;
+      _OverType._autoMediaQuery = window.matchMedia("(prefers-color-scheme: dark)");
+      _OverType._autoMediaListener = (e) => {
+        const resolved = e.matches ? "cave" : "solar";
+        if (_OverType._globalAutoTheme) {
+          _OverType._applyGlobalTheme(resolved, _OverType._globalAutoCustomColors);
+        }
+        _OverType._autoInstances.forEach((inst) => inst._applyResolvedTheme(resolved));
+      };
+      _OverType._autoMediaQuery.addEventListener("change", _OverType._autoMediaListener);
+    }
+    static _stopAutoListener() {
+      if (_OverType._autoInstances.size > 0 || _OverType._globalAutoTheme)
+        return;
+      if (!_OverType._autoMediaQuery)
+        return;
+      _OverType._autoMediaQuery.removeEventListener("change", _OverType._autoMediaListener);
+      _OverType._autoMediaQuery = null;
+      _OverType._autoMediaListener = null;
+    }
     /**
      * Set global code highlighter for all OverType instances
      * @param {Function|null} highlighter - Function that takes (code, language) and returns highlighted HTML
@@ -4481,6 +5976,11 @@ ${blockSuffix}` : suffix;
   __publicField(_OverType, "stylesInjected", false);
   __publicField(_OverType, "globalListenersInitialized", false);
   __publicField(_OverType, "instanceCount", 0);
+  __publicField(_OverType, "_autoMediaQuery", null);
+  __publicField(_OverType, "_autoMediaListener", null);
+  __publicField(_OverType, "_autoInstances", /* @__PURE__ */ new Set());
+  __publicField(_OverType, "_globalAutoTheme", false);
+  __publicField(_OverType, "_globalAutoCustomColors", null);
   var OverType = _OverType;
   OverType.MarkdownParser = MarkdownParser;
   OverType.ShortcutsManager = ShortcutsManager;
@@ -4507,7 +6007,8 @@ ${blockSuffix}` : suffix;
     "autofocus",
     "show-stats",
     "smart-lists",
-    "readonly"
+    "readonly",
+    "spellcheck"
   ];
   var OverTypeEditor = class extends HTMLElement {
     constructor() {
@@ -4690,6 +6191,7 @@ ${blockSuffix}` : suffix;
         autoResize: this.hasAttribute("auto-resize"),
         showStats: this.hasAttribute("show-stats"),
         smartLists: !this.hasAttribute("smart-lists") || this.getAttribute("smart-lists") !== "false",
+        spellcheck: this.hasAttribute("spellcheck") && this.getAttribute("spellcheck") !== "false",
         onChange: this._handleChange,
         onKeydown: this._handleKeydown
       };
@@ -4745,8 +6247,14 @@ ${blockSuffix}` : suffix;
           }
           break;
         case "placeholder":
-          if (this._editor.textarea) {
-            this._editor.textarea.placeholder = value || "";
+          if (this._editor) {
+            this._editor.options.placeholder = value || "";
+            if (this._editor.textarea) {
+              this._editor.textarea.placeholder = value || "";
+            }
+            if (this._editor.placeholderEl) {
+              this._editor.placeholderEl.textContent = value || "";
+            }
           }
           break;
         case "readonly":
@@ -4796,6 +6304,15 @@ ${blockSuffix}` : suffix;
           this._reinitializeEditor();
           break;
         }
+        case "spellcheck":
+          if (this._editor) {
+            const enabled = this.hasAttribute("spellcheck") && this.getAttribute("spellcheck") !== "false";
+            this._editor.options.spellcheck = enabled;
+            if (this._editor.textarea) {
+              this._editor.textarea.setAttribute("spellcheck", String(enabled));
+            }
+          }
+          break;
       }
     }
     /**
@@ -5039,6 +6556,16 @@ ${blockSuffix}` : suffix;
     getEditor() {
       return this._editor;
     }
+    showToolbar() {
+      if (this._editor) {
+        this._editor.showToolbar();
+      }
+    }
+    hideToolbar() {
+      if (this._editor) {
+        this._editor.hideToolbar();
+      }
+    }
   };
   if (!customElements.get("overtype-editor")) {
     customElements.define("overtype-editor", OverTypeEditor);