@dreamlake/dockit 0.2.26 → 0.2.27

package/dist/components/Topbar.js

@@ -10,7 +10,7 @@ import { ThemeToggle } from "./ThemeToggle.js";
 import { VersionBadge } from "./VersionBadge.js";
 import { useMerge } from "../renderer/Layout.js";
 import { TabStrip } from "./TabStrip.js";
-import { internalTabs, tabForUrl } from "../lib/tabs.js";
+import { TABS, internalTabs, tabForUrl } from "../lib/tabs.js";
 function HiddenRevealChip() {
   const [show, setShow] = useHiddenToggle();
   if (!show) return null;
@@ -38,6 +38,7 @@ const SEARCH_INSET = `max(${SEARCH_GUTTER}px, calc((100vw - ${SEARCH_MAX_W}px) /
 function Topbar({ searchOpen, onOpenSearch, onCloseSearch, query, setQuery }) {
   const { urlPathname } = usePageContext();
   const current = findPage(urlPathname);
+  const hasTabs = TABS.length > 0;
   const activeTab = internalTabs().find((t) => t.id === tabForUrl(urlPathname));
   const versionChips = activeTab?.versionChips ?? siteConfig.versionChips ?? [];
   const inputRef = useRef(null);
@@ -154,11 +155,12 @@ 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 wordmarkRef = 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 [breadcrumbBounds, setBreadcrumbBounds] = useState({ left: 0, width: 0 });
   const [pinLeft, setPinLeft] = useState(0);
   const [searchPinLeft, setSearchPinLeft] = useState(null);
   useLayoutEffect(() => {
@@ -182,7 +184,10 @@ function Topbar({ searchOpen, onOpenSearch, onCloseSearch, query, setQuery }) {
       const packedSearchLeft = actionsLeft - 8 - closedWidth;
       const fits = (searchLeft) => w > 0 && brandClear && pin + w + 16 <= searchLeft;
       const fullPin = textRight + closedWidth + 16 <= actionsLeft && fits(pinnedSearchLeft);
-      setTabsW(w);
+      const pinned = isLgUp && (fullPin || fits(packedSearchLeft));
+      const breadcrumbLeft = (wordmarkRef.current?.getBoundingClientRect().right ?? brand?.right ?? 0) + 10;
+      const breadcrumbRight = pinned ? pin : tabsEl.getBoundingClientRect().left;
+      setBreadcrumbBounds({ left: breadcrumbLeft, width: Math.max(0, breadcrumbRight - breadcrumbLeft - 16) });
       setPinLeft(pin);
       setSearchPinLeft(fullPin ? pinnedSearchLeft : null);
       setTabsFit(fullPin || fits(packedSearchLeft));
@@ -198,7 +203,7 @@ function Topbar({ searchOpen, onOpenSearch, onCloseSearch, query, setQuery }) {
       ro.disconnect();
       window.removeEventListener("resize", measure);
     };
-  }, [closedWidth]);
+  }, [closedWidth, isLgUp, merged, urlPathname]);
   const edgePinned = isLgUp && !iconButtonMode && tabsFit;
   const searchStyle = iconButtonMode ? {
     // In-flow grid item — sits at the end of column 2 next to TabStrip.
@@ -298,7 +303,7 @@ function Topbar({ searchOpen, onOpenSearch, onCloseSearch, query, setQuery }) {
           {
             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",
+            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 whitespace-nowrap",
             style: {
               fontFamily: "var(--font-doc-template-ui)",
               fontSize: 14,
@@ -308,7 +313,7 @@ function Topbar({ searchOpen, onOpenSearch, onCloseSearch, query, setQuery }) {
               ...palFade(searchOpen)
             },
             children: [
-              /* @__PURE__ */ jsxs("span", { children: [
+              /* @__PURE__ */ jsxs("span", { ref: wordmarkRef, children: [
                 siteConfig.brand,
                 /* @__PURE__ */ jsx(
                   "span",
@@ -397,16 +402,14 @@ 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: {
-              // 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 ? {
+              // On tabbed sites the wordmark supplies the root crumb. Keep
+              // the remaining path in the measured gap before the tab strip.
+              ...hasTabs ? {
                 position: "fixed",
                 top: 0,
                 height: 40,
-                left: pinLeft + tabsW + 24,
+                left: breadcrumbBounds.left,
+                width: breadcrumbBounds.width,
                 gridArea: "auto",
                 placeSelf: "stretch"
               } : { gridColumn: 2, gridRow: 1, justifySelf: "start", marginLeft: 8 },
@@ -420,15 +423,16 @@ function Topbar({ searchOpen, onOpenSearch, onCloseSearch, query, setQuery }) {
               transition: `opacity 0.25s ease, transform 0.25s ${SPRING}`
             },
             children: [
-              siteConfig.breadcrumbRoot && /* @__PURE__ */ jsxs(Fragment, { children: [
+              hasTabs && /* @__PURE__ */ jsx("span", { "aria-hidden": true, style: { opacity: 0.5 }, children: "/" }),
+              !hasTabs && siteConfig.breadcrumbRoot && /* @__PURE__ */ jsxs(Fragment, { children: [
                 /* @__PURE__ */ jsx("span", { children: siteConfig.breadcrumbRoot }),
                 /* @__PURE__ */ jsx("span", { style: { opacity: 0.5 }, children: "/" })
               ] }),
               current.section && /* @__PURE__ */ jsxs(Fragment, { children: [
-                /* @__PURE__ */ jsx("span", { children: current.section }),
+                /* @__PURE__ */ jsx("span", { className: "shrink-0", children: current.section }),
                 /* @__PURE__ */ jsx("span", { style: { opacity: 0.5 }, children: "/" })
               ] }),
-              /* @__PURE__ */ jsx("span", { className: "text-doc-template-ink", children: current.title })
+              /* @__PURE__ */ jsx("span", { className: "text-doc-template-ink truncate", "aria-current": "page", title: current.title, children: current.title })
             ]
           }
         ),

package/package.json

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