@dreamlake/dockit 0.2.10 → 0.2.11

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.11",
   "description": "The DreamLake documentation shell — Vike + React + Tailwind v4 + MDX docs framework with sidebar, TOC, search, and theming",
   "license": "MIT",
   "type": "module",