@dreamlake/dockit 0.2.8 → 0.2.10

package/dist/components/Topbar.js

@@ -153,6 +153,44 @@ function Topbar({ searchOpen, onOpenSearch, onCloseSearch, query, setQuery }) {
   });
   const iconButtonMode = isBelowLg && !searchOpen;
   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);
+  useLayoutEffect(() => {
+    const tabsEl = tabsRef.current;
+    if (!tabsEl) return;
+    const content = document.querySelector("main.doc-content");
+    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 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;
+      setTabsW(w);
+      setPinLeft(pin);
+      setTabsFit(w > 0 && brandClear && pin + w + 16 <= searchLeft);
+    };
+    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);
+    };
+  }, [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.
@@ -230,6 +268,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: {
@@ -328,10 +367,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,
@@ -367,7 +415,18 @@ function Topbar({ searchOpen, onOpenSearch, onCloseSearch, query, setQuery }) {
               minWidth: 0
             },
             children: [
-              /* @__PURE__ */ jsx("div", { className: "flex items-stretch", style: palFade(searchOpen), children: /* @__PURE__ */ jsx(TabStrip, {}) }),
+              /* @__PURE__ */ jsx(
+                "div",
+                {
+                  ref: tabsRef,
+                  className: "flex items-stretch",
+                  style: {
+                    ...palFade(searchOpen),
+                    ...edgePinned ? { position: "fixed", top: 0, left: pinLeft, height: 40 } : {}
+                  },
+                  children: /* @__PURE__ */ jsx(TabStrip, {})
+                }
+              ),
               /* @__PURE__ */ jsxs(
                 "label",
                 {
@@ -456,6 +515,7 @@ function Topbar({ searchOpen, onOpenSearch, onCloseSearch, query, setQuery }) {
         /* @__PURE__ */ jsx(
           "div",
           {
+            ref: actionsRef,
             className: "flex items-stretch gap-2.5 md:gap-3.5 pr-[14px] md:pr-[22px]",
             style: { gridColumn: 3, gridRow: 1, justifySelf: "end", ...palFade(searchOpen) },
             children: /* @__PURE__ */ jsxs("div", { className: "flex items-center gap-3.5", children: [

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@dreamlake/dockit",
-  "version": "0.2.8",
-  "description": "The DreamLake documentation shell \u2014 Vike + React + Tailwind v4 + MDX docs framework with sidebar, TOC, search, and theming",
+  "version": "0.2.10",
+  "description": "The DreamLake documentation shell — Vike + React + Tailwind v4 + MDX docs framework with sidebar, TOC, search, and theming",
   "license": "MIT",
   "type": "module",
   "files": [
@@ -37,10 +37,6 @@
     },
     "./styles.css": "./dist/styles.css"
   },
-  "scripts": {
-    "build": "vite build",
-    "typecheck": "tsc --noEmit"
-  },
   "peerDependencies": {
     "@mdx-js/react": ">=3.0.0",
     "react": ">=19.0.0",
@@ -79,5 +75,9 @@
     "vite": "^7.0.0",
     "vite-plugin-dts": "^4.3.0",
     "tailwindcss": "^4.0.0"
+  },
+  "scripts": {
+    "build": "vite build",
+    "typecheck": "tsc --noEmit"
   }
-}
+}