overtype 2.1.1 → 2.3.0

package/dist/overtype-webcomponent.esm.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
@@ -79,6 +79,7 @@ var MarkdownParser = class {
   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}>`;
     });
   }
@@ -110,6 +111,7 @@ var MarkdownParser = class {
    */
   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>`;
     });
   }
@@ -121,6 +123,7 @@ var MarkdownParser = class {
    */
   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>`;
@@ -136,6 +139,7 @@ var MarkdownParser = class {
    */
   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>`;
     });
   }
@@ -357,7 +361,9 @@ var MarkdownParser = class {
     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>";
     }
@@ -846,8 +852,24 @@ var solar = {
     // 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 = {
@@ -910,13 +932,30 @@ var cave = {
     // 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
@@ -928,20 +967,36 @@ function getTheme(theme) {
   }
   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
     }
   };
 }
@@ -968,7 +1023,7 @@ function generateStyles(options = {}) {
       }
     }
   ` : "";
-  const themeVars = theme && theme.colors ? themeToCSSVars(theme.colors) : "";
+  const themeVars = theme && theme.colors ? themeToCSSVars(theme.colors, theme.previewColors) : "";
   return `
     /* OverType Editor Styles */
     
@@ -1141,17 +1196,36 @@ function generateStyles(options = {}) {
       /* 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 */
@@ -1419,6 +1493,10 @@ function generateStyles(options = {}) {
     
 
     /* Toolbar Styles */
+    .overtype-toolbar.overtype-toolbar-hidden {
+      display: none !important;
+    }
+
     .overtype-toolbar {
       display: flex !important;
       align-items: center !important;
@@ -1617,27 +1695,29 @@ function generateStyles(options = {}) {
     }
 
     /* 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 */
@@ -1687,25 +1767,20 @@ function generateStyles(options = {}) {
     .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;
@@ -1728,7 +1803,8 @@ function generateStyles(options = {}) {
     /* 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;
@@ -1739,14 +1815,16 @@ function generateStyles(options = {}) {
       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;
     }
@@ -1754,32 +1832,33 @@ function generateStyles(options = {}) {
     /* 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;
@@ -1787,25 +1866,14 @@ function generateStyles(options = {}) {
       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}
@@ -2887,6 +2955,16 @@ var Toolbar = class {
     } 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
    */
@@ -2908,6 +2986,1203 @@ var Toolbar = class {
   }
 };
 
+// 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) {
@@ -2916,27 +4191,10 @@ var LinkTooltip = class {
     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) => {
@@ -2946,10 +4204,8 @@ var LinkTooltip = class {
     });
     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", () => {
@@ -3026,22 +4282,17 @@ var LinkTooltip = class {
     }
     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;
@@ -3051,26 +4302,26 @@ var LinkTooltip = class {
       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) {
@@ -3103,8 +4354,6 @@ var LinkTooltip = class {
     }
     this.tooltip = null;
     this.currentLink = null;
-    this.floatingUI = null;
-    this.useFloatingUI = false;
     this.isTooltipHovered = false;
   }
 };
@@ -3167,6 +4416,11 @@ var taskListIcon = `<svg viewBox="0 0 18 18">
   <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>
   <circle cx="12" cy="12" r="3" fill="none"></circle>
@@ -3290,6 +4544,33 @@ var toolbarButtons = {
       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,
@@ -3414,6 +4695,9 @@ var _OverType = class _OverType {
     } else {
       this._buildFromScratch();
     }
+    if (this.instanceTheme === "auto") {
+      this.setTheme("auto");
+    }
     this.shortcuts = new ShortcutsManager(this);
     this._rebuildActionsMap();
     this.linkTooltip = new LinkTooltip(this);
@@ -3471,8 +4755,10 @@ var _OverType = class _OverType {
       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 {
@@ -3607,8 +4893,13 @@ var _OverType = class _OverType {
     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");
@@ -3631,7 +4922,7 @@ var _OverType = class _OverType {
     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");
@@ -3641,7 +4932,17 @@ var _OverType = class _OverType {
    * @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 = () => {
@@ -3677,10 +4978,14 @@ var _OverType = class _OverType {
    * @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
@@ -3693,6 +4998,8 @@ var _OverType = class _OverType {
     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");
@@ -3704,8 +5011,119 @@ var _OverType = class _OverType {
       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
    */
@@ -3715,7 +5133,10 @@ var _OverType = class _OverType {
     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();
@@ -3898,7 +5319,7 @@ var _OverType = class _OverType {
     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;
@@ -3906,13 +5327,13 @@ var _OverType = class _OverType {
         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 }));
     }
@@ -4044,27 +5465,61 @@ var _OverType = class _OverType {
       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
@@ -4218,6 +5673,11 @@ var _OverType = class _OverType {
    * 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) {
@@ -4260,7 +5720,7 @@ var _OverType = class _OverType {
           options[key] = _OverType._parseDataValue(attr.value);
         }
       }
-      return new _OverType(el, options);
+      return new _OverType(el, options)[0];
     });
   }
   /**
@@ -4323,23 +5783,35 @@ var _OverType = class _OverType {
    * @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;
@@ -4347,7 +5819,6 @@ var _OverType = class _OverType {
         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);
@@ -4357,6 +5828,30 @@ var _OverType = class _OverType {
       }
     });
   }
+  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
@@ -4458,6 +5953,11 @@ __publicField(_OverType, "instances", /* @__PURE__ */ new WeakMap());
 __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;
@@ -4484,7 +5984,8 @@ var OBSERVED_ATTRIBUTES = [
   "autofocus",
   "show-stats",
   "smart-lists",
-  "readonly"
+  "readonly",
+  "spellcheck"
 ];
 var OverTypeEditor = class extends HTMLElement {
   constructor() {
@@ -4667,6 +6168,7 @@ var OverTypeEditor = class extends HTMLElement {
       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
     };
@@ -4722,8 +6224,14 @@ var OverTypeEditor = class extends HTMLElement {
         }
         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":
@@ -4773,6 +6281,15 @@ var OverTypeEditor = class extends HTMLElement {
         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;
     }
   }
   /**
@@ -5016,6 +6533,16 @@ var OverTypeEditor = class extends HTMLElement {
   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);