@dreamlake/dockit 0.2.9 → 0.2.11

package/dist/components/Topbar.js

@@ -35,7 +35,6 @@ const ICON_BUTTON_SIZE = 28;
 const SEARCH_MAX_W = 860;
 const SEARCH_GUTTER = 24;
 const SEARCH_INSET = `max(${SEARCH_GUTTER}px, calc((100vw - ${SEARCH_MAX_W}px) / 2))`;
-const TABS_EDGE_MAX_W = 420;
 function Topbar({ searchOpen, onOpenSearch, onCloseSearch, query, setQuery }) {
   const { urlPathname } = usePageContext();
   const current = findPage(urlPathname);
@@ -153,32 +152,54 @@ function Topbar({ searchOpen, onOpenSearch, onCloseSearch, query, setQuery }) {
     transition: "opacity 0.25s ease"
   });
   const iconButtonMode = isBelowLg && !searchOpen;
-  const clusterRef = useRef(null);
+  const closedWidth = isXlUp ? CLOSED_WIDTH_XL : isLgUp ? CLOSED_WIDTH_LG : CLOSED_WIDTH_MD;
+  const brandRef = useRef(null);
+  const brandMaxRight = useRef(0);
   const tabsRef = useRef(null);
   const actionsRef = useRef(null);
   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;
+    const content = document.querySelector("main.doc-content");
     const measure = () => {
-      const tabsW = tabsEl.getBoundingClientRect().width;
-      const inset = Math.max(SEARCH_GUTTER, (window.innerWidth - SEARCH_MAX_W) / 2);
+      const w = tabsEl.getBoundingClientRect().width;
+      const rect = content?.getBoundingClientRect();
+      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 actionsW = actions ? window.innerWidth - actions.left : 0;
-      setTabsFit(tabsW > 0 && tabsW <= TABS_EDGE_MAX_W && inset >= actionsW + 16);
+      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);
+      setSearchPinRight(fullPin ? window.innerWidth - textRight : null);
+      setTabsFit(fullPin || fits(packedSearchLeft));
     };
     measure();
     const ro = new ResizeObserver(measure);
     ro.observe(tabsEl);
+    if (content) ro.observe(content);
+    if (brandRef.current) ro.observe(brandRef.current);
     if (actionsRef.current) ro.observe(actionsRef.current);
     window.addEventListener("resize", measure);
     return () => {
       ro.disconnect();
       window.removeEventListener("resize", measure);
     };
-  }, []);
-  const edgeAligned = isLgUp && !iconButtonMode && !searchOpen && tabsFit;
-  const closedWidth = isXlUp ? CLOSED_WIDTH_XL : isLgUp ? CLOSED_WIDTH_LG : CLOSED_WIDTH_MD;
+  }, [closedWidth]);
+  const edgePinned = isLgUp && !iconButtonMode && tabsFit;
   const searchStyle = iconButtonMode ? {
     // In-flow grid item — sits at the end of column 2 next to TabStrip.
     // Square footprint, icon-only, click opens the palette directly.
@@ -223,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,
@@ -256,6 +293,7 @@ function Topbar({ searchOpen, onOpenSearch, onCloseSearch, query, setQuery }) {
         /* @__PURE__ */ jsxs(
           "a",
           {
+            ref: brandRef,
             href: "/",
             className: "flex items-center gap-2.5 pl-[14px] md:pl-[18px] no-underline text-doc-template-ink hover:opacity-80 min-w-[72px] shrink-0",
             style: {
@@ -354,10 +392,19 @@ function Topbar({ searchOpen, onOpenSearch, onCloseSearch, query, setQuery }) {
             "aria-label": "Breadcrumb",
             className: "hidden md:flex items-center gap-1.5 text-doc-template-muted uppercase pointer-events-none overflow-hidden",
             style: {
-              gridColumn: 2,
-              gridRow: 1,
-              justifySelf: "start",
-              marginLeft: 8,
+              // With the tab strip pinned to the content column's left
+              // edge, the breadcrumb moves out of the grid too and starts
+              // just right of the strip — otherwise it would fade in
+              // underneath the tabs. (gridArea/placeSelf: see the note on
+              // `searchStyle` about fixed-positioned grid items.)
+              ...edgePinned ? {
+                position: "fixed",
+                top: 0,
+                height: 40,
+                left: pinLeft + tabsW + 24,
+                gridArea: "auto",
+                placeSelf: "stretch"
+              } : { gridColumn: 2, gridRow: 1, justifySelf: "start", marginLeft: 8 },
               fontFamily: "var(--font-doc-template-mono)",
               fontSize: 10,
               fontWeight: 500,
@@ -383,16 +430,9 @@ function Topbar({ searchOpen, onOpenSearch, onCloseSearch, query, setQuery }) {
         /* @__PURE__ */ jsxs(
           "div",
           {
-            ref: clusterRef,
             style: {
-              ...edgeAligned ? {
-                position: "fixed",
-                top: 0,
-                right: SEARCH_INSET,
-                height: 40,
-                gridArea: "auto",
-                placeSelf: "stretch"
-              } : { gridColumn: 2, gridRow: 1 },
+              gridColumn: 2,
+              gridRow: 1,
               display: "flex",
               alignItems: "center",
               justifyContent: "flex-end",
@@ -405,7 +445,10 @@ function Topbar({ searchOpen, onOpenSearch, onCloseSearch, query, setQuery }) {
                 {
                   ref: tabsRef,
                   className: "flex items-stretch",
-                  style: { ...palFade(searchOpen), order: edgeAligned ? 1 : 0 },
+                  style: {
+                    ...palFade(searchOpen),
+                    ...edgePinned ? { position: "fixed", top: 0, left: pinLeft, height: 40 } : {}
+                  },
                   children: /* @__PURE__ */ jsx(TabStrip, {})
                 }
               ),

package/package.json

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