@dreamlake/dockit 0.2.10 → 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/dist/components/Topbar.js

@@ -160,6 +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);
   useLayoutEffect(() => {
     const tabsEl = tabsRef.current;
     if (!tabsEl) return;
@@ -167,16 +168,24 @@ function Topbar({ searchOpen, onOpenSearch, onCloseSearch, query, setQuery }) {
     const measure = () => {
       const w = tabsEl.getBoundingClientRect().width;
       const rect = content?.getBoundingClientRect();
-      const textLeft = rect ? rect.left + parseFloat(getComputedStyle(content).paddingLeft) : Math.max(SEARCH_GUTTER, (window.innerWidth - SEARCH_MAX_W) / 2);
+      const cs = content ? getComputedStyle(content) : null;
+      const fallbackInset = Math.max(SEARCH_GUTTER, (window.innerWidth - SEARCH_MAX_W) / 2);
+      const textLeft = rect ? rect.left + parseFloat(cs.paddingLeft) : fallbackInset;
+      const textRight = rect ? rect.right - parseFloat(cs.paddingRight) : window.innerWidth - fallbackInset;
       const pin = textLeft - 10;
       const brand = brandRef.current?.getBoundingClientRect();
       if (brand) brandMaxRight.current = Math.max(brandMaxRight.current, brand.right);
       const brandClear = brandMaxRight.current + 16 <= pin;
       const actions = actionsRef.current?.getBoundingClientRect();
-      const searchLeft = (actions ? actions.left : window.innerWidth) - 8 - closedWidth;
+      const actionsLeft = actions ? actions.left : window.innerWidth;
+      const pinnedSearchLeft = textRight - closedWidth;
+      const packedSearchLeft = actionsLeft - 8 - closedWidth;
+      const fits = (searchLeft) => w > 0 && brandClear && pin + w + 16 <= searchLeft;
+      const fullPin = textRight + 16 <= actionsLeft && fits(pinnedSearchLeft);
       setTabsW(w);
       setPinLeft(pin);
-      setTabsFit(w > 0 && brandClear && pin + w + 16 <= searchLeft);
+      setSearchPinRight(fullPin ? window.innerWidth - textRight : null);
+      setTabsFit(fullPin || fits(packedSearchLeft));
     };
     measure();
     const ro = new ResizeObserver(measure);
@@ -235,6 +244,22 @@ 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).
+    // (gridArea/placeSelf: see the note above about
+    // fixed-positioned grid items.)
+    position: "fixed",
+    top: 6,
+    right: searchPinRight,
+    width: closedWidth,
+    maxWidth: closedWidth,
+    height: 28,
+    padding: "6px 10px",
+    borderRadius: 12,
+    gridArea: "auto",
+    placeSelf: "stretch",
+    transition: `width ${EXPAND_MS}ms ${EXPAND_EASE}, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease`
   } : {
     gridColumn: 2,
     gridRow: 1,

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dreamlake/dockit",
-  "version": "0.2.10",
+  "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",