@dreamlake/dockit 0.2.7 → 0.2.9

package/dist/components/TabStrip.js

@@ -51,7 +51,22 @@ function TabStrip() {
       ref: containerRef,
       "aria-label": "Documentation sections",
       className: "flex items-stretch relative m-0 p-0 list-none",
-      style: { height: "100%" },
+      style: {
+        height: "100%",
+        // Labels never wrap. A second line would grow this row and push
+        // the topbar past its fixed 40px, so each tab keeps its
+        // intrinsic width (`shrink-0` on the <li>) and the strip clips
+        // whatever no longer fits rather than reflowing.
+        //
+        // `clip`, not `hidden`: the underbar below sits at bottom:-13px,
+        // deliberately outside this box. Setting `overflow-x: hidden`
+        // makes CSS compute the still-`visible` overflow-y to `auto`,
+        // which would clip that bar away (and risk a stray scrollbar).
+        // `clip` is the one overflow value that leaves the other axis
+        // genuinely visible.
+        overflowX: "clip",
+        overflowY: "visible"
+      },
       onMouseLeave: () => setHovered(null),
       children: [
         visibleTabs.map((tab) => {
@@ -59,7 +74,7 @@ function TabStrip() {
           return /* @__PURE__ */ jsx(
             "li",
             {
-              className: "flex items-stretch",
+              className: "flex items-stretch shrink-0",
               onMouseEnter: () => setHovered(tab.id),
               children: /* @__PURE__ */ jsx(
                 "a",
@@ -76,6 +91,7 @@ function TabStrip() {
                     fontWeight: 600,
                     letterSpacing: "0.12em",
                     textTransform: "uppercase",
+                    whiteSpace: "nowrap",
                     color: isActive || hovered === tab.id ? "var(--color-doc-template-ink)" : "var(--color-doc-template-muted)",
                     cursor: "pointer",
                     transition: "color 0.18s ease"

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