@veluai/velu 0.2.11 → 0.2.12

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@veluai/velu",
-  "version": "0.2.11",
+  "version": "0.2.12",
   "type": "module",
   "bin": "./dist/cli.js",
   "publishConfig": {

package/src/runtime/App.jsx

@@ -913,15 +913,24 @@ function DocsPage() {
     if (!header) return;
     const root = document.documentElement;
     const remPx = parseFloat(getComputedStyle(root).fontSize) || 16;
+    // Skip same-value writes: these CSS vars affect layout, and an
+    // unconditional write on every ResizeObserver fire can feed back into
+    // layout (scrollbar appear/disappear flutter at narrow widths — observed
+    // as a permanent relayout storm inside the instant-preview iframe).
+    let lastHeaderH = -1;
+    let lastTocBarH = -1;
     const apply = () => {
-      const headerH = header.getBoundingClientRect().height;
+      const headerH = Math.round(header.getBoundingClientRect().height);
       // Re-query each apply — the TocBar toggle button is mounted
       // after first paint and its parent may also remount on
       // theme/viewport changes.
       const tocBarToggle = document.querySelector('.velu-toc-bar__toggle');
       const tocBarH = tocBarToggle
-        ? tocBarToggle.getBoundingClientRect().height
+        ? Math.round(tocBarToggle.getBoundingClientRect().height)
         : 0;
+      if (headerH === lastHeaderH && tocBarH === lastTocBarH) return;
+      lastHeaderH = headerH;
+      lastTocBarH = tocBarH;
       if (headerH > 0)
         root.style.setProperty('--velu-header-height', `${headerH}px`);
       root.style.setProperty('--velu-tocbar-height', `${tocBarH}px`);