@dreamlake/dockit 0.2.11 → 0.2.12

package/dist/components/TabStrip.js

@@ -5,6 +5,7 @@ import { tabForUrl, TABS, urlInTab } from "../lib/tabs.js";
 import { pages } from "../lib/navigation.js";
 import { useHiddenToggle } from "../lib/use-hidden-toggle.js";
 const SPRING = "cubic-bezier(0.4, 0.7, 0.3, 1)";
+const SSR_BAR_BOTTOM = -13;
 function TabStrip() {
   const { urlPathname } = usePageContext();
   const activeTab = tabForUrl(urlPathname);
@@ -21,28 +22,31 @@ function TabStrip() {
   const [bar, setBar] = useState({
     left: 0,
     width: 0,
+    bottom: SSR_BAR_BOTTOM,
     ready: false
   });
   const targetTab = hovered ?? activeTab;
-  useLayoutEffect(() => {
+  function measure() {
     const container = containerRef.current;
     const target = linkRefs.current[targetTab];
     if (!container || !target) return;
     const cR = container.getBoundingClientRect();
     const tR = target.getBoundingClientRect();
-    setBar({ left: tR.left - cR.left, width: tR.width, ready: true });
-  }, [targetTab, urlPathname]);
+    const hR = container.closest("header")?.getBoundingClientRect();
+    const next = {
+      left: tR.left - cR.left,
+      width: tR.width,
+      bottom: hR ? cR.bottom - hR.bottom : SSR_BAR_BOTTOM,
+      ready: true
+    };
+    setBar(
+      (prev) => prev.ready && prev.left === next.left && prev.width === next.width && prev.bottom === next.bottom ? prev : next
+    );
+  }
+  useLayoutEffect(measure);
   useLayoutEffect(() => {
-    function onResize() {
-      const container = containerRef.current;
-      const target = linkRefs.current[targetTab];
-      if (!container || !target) return;
-      const cR = container.getBoundingClientRect();
-      const tR = target.getBoundingClientRect();
-      setBar((b) => ({ ...b, left: tR.left - cR.left, width: tR.width }));
-    }
-    window.addEventListener("resize", onResize);
-    return () => window.removeEventListener("resize", onResize);
+    window.addEventListener("resize", measure);
+    return () => window.removeEventListener("resize", measure);
   }, [targetTab]);
   if (visibleTabs.length === 0) return null;
   return /* @__PURE__ */ jsxs(
@@ -58,8 +62,9 @@ function TabStrip() {
         // intrinsic width (`shrink-0` on the <li>) and the strip clips
         // whatever no longer fits rather than reflowing.
         //
-        // `clip`, not `hidden`: the underbar below sits at bottom:-13px,
-        // deliberately outside this box. Setting `overflow-x: hidden`
+        // `clip`, not `hidden`: the underbar below sits at a negative
+        // bottom offset, deliberately outside this box (whenever the strip
+        // is shorter than the topbar). Setting `overflow-x: hidden`
         // makes CSS compute the still-`visible` overflow-y to `auto`,
         // which would clip that bar away (and risk a stray scrollbar).
         // `clip` is the one overflow value that leaves the other axis
@@ -109,7 +114,7 @@ function TabStrip() {
             "aria-hidden": true,
             style: {
               position: "absolute",
-              bottom: -13,
+              bottom: bar.bottom,
               left: 0,
               height: 3,
               background: "var(--color-doc-template-ink)",

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dreamlake/dockit",
-  "version": "0.2.11",
+  "version": "0.2.12",
   "description": "The DreamLake documentation shell — Vike + React + Tailwind v4 + MDX docs framework with sidebar, TOC, search, and theming",
   "license": "MIT",
   "type": "module",