autumnnote 1.0.1 → 1.0.4

package/src/js/module/ContextMenu.js

@@ -418,11 +418,23 @@ export class ContextMenu {
       document.execCommand('hiliteColor', false, fmt.backgroundColor);
     }
 
+    // Font family — apply BEFORE font-size DOM manipulation so the selection is still intact.
+    if (fmt.fontFamily) {
+      document.execCommand('fontName', false, fmt.fontFamily);
+    }
+
     // Font size — use a unique data-marker to avoid touching pre-existing font[size="7"] nodes.
     if (fmt.fontSize) {
       const marker = `fs-${Date.now()}`;
+      // Snapshot pre-existing font[size="7"] BEFORE execCommand so we don't accidentally
+      // replace nodes that were already in the document (the comment below was aspirational
+      // but the original code never actually excluded them — this Set approach is the fix).
+      const preExisting = new Set(editable.querySelectorAll('font[size="7"]'));
       document.execCommand('fontSize', false, '7');
-      editable.querySelectorAll('font[size="7"]').forEach((el) => el.setAttribute('data-an-tmp', marker));
+      // Mark only the NEWLY created font[size="7"] elements.
+      editable.querySelectorAll('font[size="7"]').forEach((el) => {
+        if (!preExisting.has(el)) el.setAttribute('data-an-tmp', marker);
+      });
       editable.querySelectorAll(`[data-an-tmp="${marker}"]`).forEach((el) => {
         const span = document.createElement('span');
         span.style.fontSize = fmt.fontSize;
@@ -432,11 +444,6 @@ export class ContextMenu {
       });
     }
 
-    // Font family — only apply if it was explicitly set (not just inherited default).
-    if (fmt.fontFamily) {
-      document.execCommand('fontName', false, fmt.fontFamily);
-    }
-
     this.context.invoke('editor.afterCommand');
   }
 

package/src/js/module/Editor.js

@@ -77,12 +77,80 @@ export class Editor {
       }
     };
 
+    // Guard: when cursor lands at the <li> element node of a checklist item
+    // (before the checkbox), nudge it to the correct text position.
+    //
+    // mouseup: use caretRangeFromPoint / caretPositionFromPoint so the cursor
+    //          lands WHERE the user actually clicked (middle, end of text…).
+    // keyup  : arrow-key navigation may land at <li>[0]; move to start-of-text.
+    const fixChecklistCursor = (event) => {
+      const sel = window.getSelection();
+      if (!sel || !sel.rangeCount) return;
+      const r = sel.getRangeAt(0);
+      if (!r.collapsed) return;
+      const sc = r.startContainer;
+
+      // Only act when cursor is at the <li> element node itself (not inside
+      // a text node — the browser already placed it correctly in that case).
+      if (sc.nodeType !== Node.ELEMENT_NODE) return;
+      const li = sc.matches && sc.matches('.an-checklist li') ? sc : null;
+      if (!li) return;
+      const cb = li.querySelector('input[type="checkbox"]');
+      if (!cb) return;
+
+      // For mouse events: ask the browser where the pointer landed so the
+      // cursor respects the actual click position inside the text.
+      if (event && event.type === 'mouseup') {
+        let caret = null;
+        if (document.caretRangeFromPoint) {
+          caret = document.caretRangeFromPoint(event.clientX, event.clientY);
+        } else if (document.caretPositionFromPoint) {
+          const cp = document.caretPositionFromPoint(event.clientX, event.clientY);
+          if (cp) {
+            caret = document.createRange();
+            caret.setStart(cp.offsetNode, cp.offset);
+          }
+        }
+        // If the caret from point landed inside a text node of this li, use it
+        if (caret && editable.contains(caret.startContainer) &&
+            caret.startContainer !== li) {
+          caret.collapse(true);
+          sel.removeAllRanges();
+          sel.addRange(caret);
+          return;
+        }
+      }
+
+      // Fallback (keyboard nav, or caretRangeFromPoint not available / landed
+      // at li again): prefer the first text node after the checkbox so the
+      // cursor renders at the padding-left edge (after the visual checkbox)
+      // rather than at element-level where the browser may place it at x=0.
+      const nr = document.createRange();
+      let anchorNode = null;
+      for (const child of li.childNodes) {
+        if (child !== cb && child.nodeType === Node.TEXT_NODE) {
+          anchorNode = child;
+          break;
+        }
+      }
+      if (anchorNode) {
+        nr.setStart(anchorNode, 0);
+      } else {
+        nr.setStartAfter(cb);
+      }
+      nr.collapse(true);
+      sel.removeAllRanges();
+      sel.addRange(nr);
+    };
+
     this._disposers.push(
       on(editable, 'keydown', onKeydown),
       on(editable, 'beforeinput', onBeforeInput),
       on(editable, 'input', onInput),
       on(document, 'selectionchange', onSelChange),
       on(editable, 'click', onCheckboxClick),
+      on(editable, 'mouseup', fixChecklistCursor),
+      on(editable, 'keyup',   fixChecklistCursor),
     );
   }
 
@@ -114,8 +182,8 @@ export class Editor {
       return; // let the native paste event fire
     }
 
-    // Show keyboard shortcuts dialog: Shift+?
-    if (event.key === '?' && event.shiftKey && !event.ctrlKey && !event.metaKey) {
+    // Show keyboard shortcuts dialog: Ctrl+Shift+/
+    if (event.key === '/' && event.shiftKey && event.ctrlKey && !event.metaKey) {
       event.preventDefault();
       this.context.invoke('shortcutsDialog.show');
       return;

package/src/js/module/IconDialog.js

@@ -318,6 +318,9 @@ export class IconDialog {
     this._selectedIcon = null;
     this._activeCat = 'all';
     this._searchInput.value = '';
+    // Clear previously selected icon highlight and disable Insert button
+    this._grid.querySelectorAll('.an-icon-cell.active').forEach((c) => c.classList.remove('active'));
+    this._insertBtn.setAttribute('disabled', '');
     this._updateCatTabs();
     this._filterIcons('', 'all');
     this._updatePreview(null);
@@ -551,6 +554,7 @@ export class IconDialog {
     const iconEl = document.createElement('i');
     iconEl.className = `${cls} fa-${this._selectedIcon}`;
     iconEl.setAttribute('aria-hidden', 'true');
+    iconEl.setAttribute('contenteditable', 'false');
     if (styleParts.length) iconEl.setAttribute('style', styleParts.join(';'));
 
     const savedRange = this._savedRange;
@@ -574,21 +578,26 @@ export class IconDialog {
     range.deleteContents();
     range.insertNode(iconEl);
 
-    // 4. Insert a zero-width space text node immediately after the icon.
-    //    This is essential when the icon lands at the END of a paragraph:
-    //    browsers cannot place the caret after an inline element that is the
-    //    last child of a block — there is no text node to anchor into.
-    //    The ZWS gives the caret a real text node to sit in, so typing after
-    //    the icon works correctly. It is invisible to the reader.
-    const zwsNode = document.createTextNode('\u200B');
-    iconEl.parentNode.insertBefore(zwsNode, iconEl.nextSibling);
-
-    // 5. Place caret inside the ZWS text node (offset 1 = after the ZWS char).
-    range.setStart(zwsNode, 1);
-    range.collapse(true);
+    // 4. Place cursor after the icon.
+    //    Keep a text anchor (\u200B) after the icon so ArrowLeft/ArrowRight and
+    //    caret placement at end-of-line stay stable across browsers.
+    let caretTextNode = iconEl.nextSibling;
+    if (!caretTextNode || caretTextNode.nodeType !== Node.TEXT_NODE) {
+      caretTextNode = document.createTextNode('\u200B');
+      iconEl.parentNode.insertBefore(caretTextNode, iconEl.nextSibling);
+    } else if (!caretTextNode.textContent) {
+      // Split text-node insertions can leave an empty text node after icon.
+      // Fill it with ZWS so caret-after-icon remains stable at end-of-line.
+      caretTextNode.textContent = '\u200B';
+    }
+
+    const caretOffset = ((caretTextNode.textContent || '').startsWith('\u200B')) ? 1 : 0;
+    const caretRange = document.createRange();
+    caretRange.setStart(caretTextNode, Math.min(caretOffset, caretTextNode.textContent.length));
+    caretRange.collapse(true);
     if (sel) {
       sel.removeAllRanges();
-      sel.addRange(range);
+      sel.addRange(caretRange);
     }
 
     // 5. Close dialog last — same as ImageDialog
@@ -596,6 +605,11 @@ export class IconDialog {
 
     // 6. Restore editor focus (needed for toolbar refresh via afterCommand)
     editable.focus();
+    if (sel) {
+      // Some browsers reset selection when refocusing editable after closing dialog.
+      sel.removeAllRanges();
+      sel.addRange(caretRange);
+    }
     this.context.invoke('editor.afterCommand');
   }
 

package/src/js/module/ImageResizer.js

@@ -27,14 +27,25 @@ export class ImageResizer {
     this._activeImg = null;
     this._overlay = null;
     this._disposers = [];
+    this._positionRaf = null;
   }
 
   initialize() {
     this._overlay = this._buildOverlay();
-    document.body.appendChild(this._overlay);
+    const container = this.context.layoutInfo.editable.closest('.an-container') || document.body;
+    container.appendChild(this._overlay);
+    this._container = container;
 
     const editable = this.context.layoutInfo.editable;
 
+    // Debounce window resize — _updateOverlayPosition already has rAF gating but
+    // every call cancels + re-schedules it; a debounce reduces that churn.
+    let _resizeDebounce = null;
+    const onWindowResize = () => {
+      clearTimeout(_resizeDebounce);
+      _resizeDebounce = setTimeout(() => this._updateOverlayPosition(), 100);
+    };
+
     this._disposers.push(
       on(editable, 'click', (e) => this._onEditorClick(e)),
       // Also select on right-click so the highlight shows before the context menu
@@ -44,7 +55,7 @@ export class ImageResizer {
       }),
       on(document, 'click', (e) => this._onDocClick(e)),
       on(window, 'scroll', () => this._updateOverlayPosition(), { passive: true }),
-      on(window, 'resize', () => this._updateOverlayPosition()),
+      on(window, 'resize', onWindowResize),
       on(editable, 'scroll', () => this._updateOverlayPosition(), { passive: true }),
     );
 
@@ -58,6 +69,10 @@ export class ImageResizer {
       this._dragDisposers.forEach((d) => d());
       this._dragDisposers = null;
     }
+    if (this._positionRaf) {
+      cancelAnimationFrame(this._positionRaf);
+      this._positionRaf = null;
+    }
     this._deselect();
     if (this._overlay && this._overlay.parentNode) {
       this._overlay.parentNode.removeChild(this._overlay);
@@ -148,10 +163,22 @@ export class ImageResizer {
   }
 
   _updateOverlayPosition() {
+    if (this._positionRaf) cancelAnimationFrame(this._positionRaf);
+    this._positionRaf = requestAnimationFrame(() => {
+      this._positionRaf = null;
+      this._updateOverlayPositionNow();
+    });
+  }
+
+  _updateOverlayPositionNow() {
     if (!this._activeImg || !this._overlay) return;
+    const offsetParent = this._overlay.offsetParent || this._container;
+    const containerRect = offsetParent.getBoundingClientRect();
     const rect = this._activeImg.getBoundingClientRect();
-    this._overlay.style.left   = `${rect.left}px`;
-    this._overlay.style.top    = `${rect.top}px`;
+    const left = rect.left - containerRect.left + offsetParent.scrollLeft;
+    const top = rect.top - containerRect.top + offsetParent.scrollTop;
+    this._overlay.style.left   = `${left}px`;
+    this._overlay.style.top    = `${top}px`;
     this._overlay.style.width  = `${rect.width}px`;
     this._overlay.style.height = `${rect.height}px`;
   }
@@ -168,37 +195,44 @@ export class ImageResizer {
     const isCorner = pos.length === 2; // 'nw','ne','se','sw'
 
     const editable = this.context.layoutInfo.editable;
+    let _raf = null; // rAF handle — ensures at most one write per paint frame
+
     const onMove = (me) => {
-      const dx = me.clientX - startX;
-      const dy = me.clientY - startY;
-      const maxW = editable.clientWidth || Infinity;
-      let newW = startW;
-      let newH = startH;
-
-      if (pos.includes('e')) newW = Math.max(20, startW + dx);
-      if (pos.includes('w')) newW = Math.max(20, startW - dx);
-      if (pos.includes('s')) newH = Math.max(20, startH + dy);
-      if (pos.includes('n')) newH = Math.max(20, startH - dy);
-
-      // Clamp to container width
-      newW = Math.min(newW, maxW);
-
-      if (isCorner) {
-        // Lock aspect ratio: use larger absolute delta to drive both dimensions
-        if (Math.abs(dx) >= Math.abs(dy)) {
-          newH = Math.max(20, Math.round(newW / aspectRatio));
-        } else {
-          newW = Math.min(Math.max(20, Math.round(newH * aspectRatio)), maxW);
-          newH = Math.max(20, Math.round(newW / aspectRatio));
+      if (_raf !== null) return; // frame already pending, discard this event
+      const clientX = me.clientX;
+      const clientY = me.clientY;
+      _raf = requestAnimationFrame(() => {
+        _raf = null;
+        const dx = clientX - startX;
+        const dy = clientY - startY;
+        const maxW = editable.clientWidth || Infinity;
+        let newW = startW;
+        let newH = startH;
+
+        if (pos.includes('e')) newW = Math.max(20, startW + dx);
+        if (pos.includes('w')) newW = Math.max(20, startW - dx);
+        if (pos.includes('s')) newH = Math.max(20, startH + dy);
+        if (pos.includes('n')) newH = Math.max(20, startH - dy);
+
+        newW = Math.min(newW, maxW);
+
+        if (isCorner) {
+          if (Math.abs(dx) >= Math.abs(dy)) {
+            newH = Math.max(20, Math.round(newW / aspectRatio));
+          } else {
+            newW = Math.min(Math.max(20, Math.round(newH * aspectRatio)), maxW);
+            newH = Math.max(20, Math.round(newW / aspectRatio));
+          }
         }
-      }
 
-      img.style.width  = `${newW}px`;
-      img.style.height = `${newH}px`;
-      this._updateOverlayPosition();
+        img.style.width  = `${newW}px`;
+        img.style.height = `${newH}px`;
+        this._updateOverlayPosition();
+      });
     };
 
     const onUp = () => {
+      if (_raf !== null) { cancelAnimationFrame(_raf); _raf = null; }
       document.removeEventListener('mousemove', onMove);
       document.removeEventListener('mouseup', onUp);
       this._dragDisposers = null;

package/src/js/module/ImageTooltip.js

@@ -11,6 +11,8 @@ const ICONS = {
   originalSize:`<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="15 3 21 3 21 9"/><polyline points="9 21 3 21 3 15"/><line x1="21" y1="3" x2="14" y2="10"/><line x1="3" y1="21" x2="10" y2="14"/></svg>`,
   deleteImg:   `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"/><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a1 1 0 0 1 1-1h4a1 1 0 0 1 1 1v2"/></svg>`,
   caption:     `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect x="3" y="3" width="18" height="11" rx="2"/><line x1="6" y1="18" x2="18" y2="18"/><line x1="9" y1="21" x2="15" y2="21"/></svg>`,
+  rotateLeft:  `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><polyline points="3 3 3 8 8 8"/></svg>`,
+  rotateRight: `<svg xmlns="http://www.w3.org/2000/svg" width="13" height="13" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 1 1-9-9 9.75 9.75 0 0 1 6.74 2.74L21 8"/><polyline points="21 3 21 8 16 8"/></svg>`,
 };
 
 const SHOW_DELAY = 100;
@@ -36,16 +38,17 @@ export class ImageTooltip {
     this._disposers.push(
       on(editable, 'mouseover', (e) => {
         const img = e.target.closest('img');
-        if (img && editable.contains(img)) {
+        // Skip when the image is inside a link — LinkTooltip takes priority there
+        if (img && editable.contains(img) && !img.closest('a[href]')) {
           this._scheduleShow(img);
         }
-      }),
+      }, { passive: true }),
       on(editable, 'mouseout', (e) => {
         const to = e.relatedTarget;
         if (!to || (!editable.contains(to) && !this._el.contains(to))) {
           this._scheduleHide();
         }
-      }),
+      }, { passive: true }),
       // Hide when image is deselected by clicking elsewhere
       on(document, 'click', (e) => {
         if (this._activeImg && !this._activeImg.contains(e.target) && !this._el.contains(e.target)) {
@@ -102,6 +105,11 @@ export class ImageTooltip {
 
     el.appendChild(createElement('div', { class: 'an-link-tooltip-sep' }));
 
+    el.appendChild(this._makeBtn(ICONS.rotateLeft,  'Rotate Left',  () => this._rotate(-90)));
+    el.appendChild(this._makeBtn(ICONS.rotateRight, 'Rotate Right', () => this._rotate(90)));
+
+    el.appendChild(createElement('div', { class: 'an-link-tooltip-sep' }));
+
     this._captionBtn = this._makeBtn(ICONS.caption, 'Add / Edit Caption', () => this._toggleCaption());
     el.appendChild(this._captionBtn);
 
@@ -165,7 +173,10 @@ export class ImageTooltip {
 
   _show(img) {
     this._el.style.display = 'flex';
-    this._positionNear(img);
+    // Defer positioning: offsetWidth on a newly-visible element forces layout
+    requestAnimationFrame(() => {
+      if (this._activeImg) this._positionNear(this._activeImg);
+    });
   }
 
   _hide() {
@@ -205,25 +216,27 @@ export class ImageTooltip {
   _setFloat(value) {
     const img = this._activeImg;
     if (!img) return;
-    img.style.float = value;
-    img.style.display = '';
-    img.style.marginLeft  = value === 'right' ? '12px' : '';
-    img.style.marginRight = value === 'left'  ? '12px' : '';
+    const target = img.closest('figure.an-figure') || img;
+    target.style.float = value;
+    target.style.display = '';
+    target.style.marginLeft  = value === 'right' ? '12px' : '';
+    target.style.marginRight = value === 'left'  ? '12px' : '';
     this.context.invoke('editor.afterCommand');
     this.context.invoke('imageResizer.updateOverlay');
-    this._positionNear(img);
+    requestAnimationFrame(() => { if (this._activeImg) this._positionNear(this._activeImg); });
   }
 
   _setCenter() {
     const img = this._activeImg;
     if (!img) return;
-    img.style.float        = '';
-    img.style.display      = 'block';
-    img.style.marginLeft   = 'auto';
-    img.style.marginRight  = 'auto';
+    const target = img.closest('figure.an-figure') || img;
+    target.style.float        = '';
+    target.style.display      = 'block';
+    target.style.marginLeft   = 'auto';
+    target.style.marginRight  = 'auto';
     this.context.invoke('editor.afterCommand');
     this.context.invoke('imageResizer.updateOverlay');
-    this._positionNear(img);
+    requestAnimationFrame(() => { if (this._activeImg) this._positionNear(this._activeImg); });
   }
 
   _resetSize() {
@@ -233,7 +246,31 @@ export class ImageTooltip {
     img.style.height = '';
     this.context.invoke('editor.afterCommand');
     this.context.invoke('imageResizer.updateOverlay');
-    this._positionNear(img);
+    requestAnimationFrame(() => { if (this._activeImg) this._positionNear(this._activeImg); });
+  }
+
+  /**
+   * Rotate the active image by `delta` degrees (±90).
+   * Reads the existing rotate() value from the transform style so
+   * repeated clicks accumulate correctly.
+   * @param {number} delta
+   */
+  _rotate(delta) {
+    const img = this._activeImg;
+    if (!img) return;
+    // Parse current rotation angle from inline transform
+    const current = img.style.transform || '';
+    const match   = current.match(/rotate\((-?[\d.]+)deg\)/);
+    const prev    = match ? parseFloat(match[1]) : 0;
+    const next    = (prev + delta + 360) % 360; // normalise to [0, 360)
+    // Preserve any other transform functions (e.g. scale), replace only rotate()
+    const cleaned = current.replace(/rotate\(-?[\d.]+deg\)/, '').trim();
+    img.style.transform = cleaned
+      ? `${cleaned} rotate(${next}deg)`
+      : next === 0 ? '' : `rotate(${next}deg)`;
+    this.context.invoke('editor.afterCommand');
+    this.context.invoke('imageResizer.updateOverlay');
+    requestAnimationFrame(() => { if (this._activeImg) this._positionNear(this._activeImg); });
   }
 
   _delete() {
@@ -241,7 +278,12 @@ export class ImageTooltip {
     if (!img) return;
     this._hide();
     this.context.invoke('imageResizer.deselect');
-    if (img.parentNode) img.parentNode.removeChild(img);
+    const figure = img.closest('figure.an-figure');
+    if (figure && figure.parentNode) {
+      figure.parentNode.removeChild(figure);
+    } else if (img.parentNode) {
+      img.parentNode.removeChild(img);
+    }
     this.context.invoke('editor.afterCommand');
   }
 
@@ -266,6 +308,23 @@ export class ImageTooltip {
     // Wrap image in <figure><figcaption>
     const figure = document.createElement('figure');
     figure.className = 'an-figure';
+
+    // Transfer existing alignment from <img> to <figure> (C4 fix)
+    if (img.style.float) {
+      figure.style.float       = img.style.float;
+      figure.style.marginLeft  = img.style.marginLeft;
+      figure.style.marginRight = img.style.marginRight;
+      img.style.float       = '';
+      img.style.marginLeft  = '';
+      img.style.marginRight = '';
+    } else if (img.style.display === 'block' && img.style.marginLeft === 'auto') {
+      figure.style.display      = 'block';
+      figure.style.marginLeft   = 'auto';
+      figure.style.marginRight  = 'auto';
+      img.style.display     = '';
+      img.style.marginLeft  = '';
+      img.style.marginRight = '';
+    }
     const figcaption = document.createElement('figcaption');
     figcaption.className = 'an-figcaption';
     figcaption.textContent = 'Caption';
@@ -281,6 +340,8 @@ export class ImageTooltip {
     if (sel) { sel.removeAllRanges(); sel.addRange(range); }
 
     this.context.invoke('editor.afterCommand');
+    // Re-sync the resize overlay: wrapping img in <figure> changes its layout position.
+    this.context.invoke('imageResizer.updateOverlay');
     this._hide();
   }
 }

package/src/js/module/Placeholder.js

@@ -38,7 +38,8 @@ export class Placeholder {
 
   _update() {
     const editable = this.context.layoutInfo.editable;
+    const isFocused = document.activeElement === editable;
     const isEmpty = !editable.textContent.trim() && !editable.querySelector('img, table, hr');
-    editable.classList.toggle('an-placeholder', isEmpty);
+    editable.classList.toggle('an-placeholder', isEmpty && !isFocused);
   }
 }

package/src/js/module/Statusbar.js

@@ -130,8 +130,15 @@ export class Statusbar {
 
     const applyDelta = (clientY) => {
       const delta = clientY - startY;
-      const minH = this.options.minHeight || 100;
-      containerEl.style.height = `${Math.max(minH, startH + delta)}px`;
+      // Compute the true minimum: fixed elements (toolbar + statusbar) must fit
+      // inside the container. Sum the offsetHeight of every child that is NOT
+      // the editable area, then add a small floor so the editable stays visible.
+      const MIN_EDITABLE = 40;
+      const fixedH = Array.from(containerEl.children)
+        .filter(child => !child.classList.contains('an-editable'))
+        .reduce((sum, child) => sum + child.offsetHeight, 0);
+      const trueMin = Math.max(this.options.minHeight || 100, fixedH + MIN_EDITABLE);
+      containerEl.style.height = `${Math.max(trueMin, startH + delta)}px`;
     };
 
     // Mouse drag
@@ -146,6 +153,11 @@ export class Statusbar {
     const onMouseDown = (event) => {
       startY = event.clientY;
       startH = containerEl.offsetHeight;
+      // Clear the editable's inline min-height so the flex layout can compress
+      // it freely once the container has a fixed height. Without this, the
+      // editable's min-height (set from options.height) overflows the container
+      // when the user drags the handle to a size smaller than that value.
+      this.context.layoutInfo.editable.style.minHeight = '';
       document.addEventListener('mousemove', onMouseMove);
       document.addEventListener('mouseup', onMouseUp);
       // Track drag-phase listeners so destroy() can remove them mid-drag
@@ -173,6 +185,8 @@ export class Statusbar {
       if (!touch) return;
       startY = touch.clientY;
       startH = containerEl.offsetHeight;
+      // Same as onMouseDown: clear editable min-height so flex can compress it
+      this.context.layoutInfo.editable.style.minHeight = '';
       document.addEventListener('touchmove', onTouchMove, { passive: false });
       document.addEventListener('touchend', onTouchEnd);
       this._dragDisposers = [