@dreamlake/dockit 0.2.11 → 0.2.13

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/dist/components/Topbar.js

@@ -160,7 +160,7 @@ function Topbar({ searchOpen, onOpenSearch, onCloseSearch, query, setQuery }) {
   const [tabsFit, setTabsFit] = useState(false);
   const [tabsW, setTabsW] = useState(0);
   const [pinLeft, setPinLeft] = useState(0);
-  const [searchPinRight, setSearchPinRight] = useState(null);
+  const [searchPinLeft, setSearchPinLeft] = useState(null);
   useLayoutEffect(() => {
     const tabsEl = tabsRef.current;
     if (!tabsEl) return;
@@ -178,13 +178,13 @@ function Topbar({ searchOpen, onOpenSearch, onCloseSearch, query, setQuery }) {
       const brandClear = brandMaxRight.current + 16 <= pin;
       const actions = actionsRef.current?.getBoundingClientRect();
       const actionsLeft = actions ? actions.left : window.innerWidth;
-      const pinnedSearchLeft = textRight - closedWidth;
+      const pinnedSearchLeft = textRight;
       const packedSearchLeft = actionsLeft - 8 - closedWidth;
       const fits = (searchLeft) => w > 0 && brandClear && pin + w + 16 <= searchLeft;
-      const fullPin = textRight + 16 <= actionsLeft && fits(pinnedSearchLeft);
+      const fullPin = textRight + closedWidth + 16 <= actionsLeft && fits(pinnedSearchLeft);
       setTabsW(w);
       setPinLeft(pin);
-      setSearchPinRight(fullPin ? window.innerWidth - textRight : null);
+      setSearchPinLeft(fullPin ? pinnedSearchLeft : null);
       setTabsFit(fullPin || fits(packedSearchLeft));
     };
     measure();
@@ -244,14 +244,17 @@ function Topbar({ searchOpen, onOpenSearch, onCloseSearch, query, setQuery }) {
     placeSelf: "stretch",
     boxShadow: "0 4px 14px rgb(0 0 0 / 0.06)",
     transition: `left ${EXPAND_MS}ms ${EXPAND_EASE}, right ${EXPAND_MS}ms ${EXPAND_EASE}, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease`
-  } : searchPinRight != null ? {
-    // Closed, right-aligned to the content column's right
-    // edge (mirrors the pinned tab strip on the left edge).
+  } : searchPinLeft != null ? {
+    // Closed, sitting just outside the content column with
+    // its left edge on the column's right border (mirrors
+    // the tab strip pinned to the left edge). Left-anchored,
+    // so breakpoint width changes grow it away from the
+    // column and the shared border never moves.
     // (gridArea/placeSelf: see the note above about
     // fixed-positioned grid items.)
     position: "fixed",
     top: 6,
-    right: searchPinRight,
+    left: searchPinLeft,
     width: closedWidth,
     maxWidth: closedWidth,
     height: 28,

package/dist/components/mdx-components.js

@@ -180,6 +180,7 @@ const H1 = ({ id, children, style, ...rest }) => /* @__PURE__ */ jsxs(
       fontWeight: 700,
       letterSpacing: "-0.025em",
       margin: "18px 0 10px",
+      paddingBottom: 24,
       lineHeight: 1.1,
       gap: 8,
       ...style

package/package.json

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