@dreamlake/dockit 0.2.8 → 0.2.9

package/dist/components/Topbar.js

@@ -35,6 +35,7 @@ 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);
@@ -152,6 +153,31 @@ function Topbar({ searchOpen, onOpenSearch, onCloseSearch, query, setQuery }) {
     transition: "opacity 0.25s ease"
   });
   const iconButtonMode = isBelowLg && !searchOpen;
+  const clusterRef = useRef(null);
+  const tabsRef = useRef(null);
+  const actionsRef = useRef(null);
+  const [tabsFit, setTabsFit] = useState(false);
+  useLayoutEffect(() => {
+    const tabsEl = tabsRef.current;
+    if (!tabsEl) return;
+    const measure = () => {
+      const tabsW = tabsEl.getBoundingClientRect().width;
+      const inset = Math.max(SEARCH_GUTTER, (window.innerWidth - SEARCH_MAX_W) / 2);
+      const actions = actionsRef.current?.getBoundingClientRect();
+      const actionsW = actions ? window.innerWidth - actions.left : 0;
+      setTabsFit(tabsW > 0 && tabsW <= TABS_EDGE_MAX_W && inset >= actionsW + 16);
+    };
+    measure();
+    const ro = new ResizeObserver(measure);
+    ro.observe(tabsEl);
+    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;
   const searchStyle = iconButtonMode ? {
     // In-flow grid item — sits at the end of column 2 next to TabStrip.
@@ -357,9 +383,16 @@ function Topbar({ searchOpen, onOpenSearch, onCloseSearch, query, setQuery }) {
         /* @__PURE__ */ jsxs(
           "div",
           {
+            ref: clusterRef,
             style: {
-              gridColumn: 2,
-              gridRow: 1,
+              ...edgeAligned ? {
+                position: "fixed",
+                top: 0,
+                right: SEARCH_INSET,
+                height: 40,
+                gridArea: "auto",
+                placeSelf: "stretch"
+              } : { gridColumn: 2, gridRow: 1 },
               display: "flex",
               alignItems: "center",
               justifyContent: "flex-end",
@@ -367,7 +400,15 @@ 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), order: edgeAligned ? 1 : 0 },
+                  children: /* @__PURE__ */ jsx(TabStrip, {})
+                }
+              ),
               /* @__PURE__ */ jsxs(
                 "label",
                 {
@@ -456,6 +497,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.9",
+  "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"
   }
-}
+}