@dreamlake/dockit 0.2.26 → 0.2.28

package/dist/components/ContentRow.d.ts

@@ -0,0 +1,7 @@
+import { HTMLAttributes } from 'react';
+export interface ContentRowProps extends HTMLAttributes<HTMLDivElement> {
+    /** Expand into the prose gutters, staying inside the content column. */
+    width?: "wide" | "text";
+}
+/** A responsive row for diagrams, examples and comparisons wider than prose. */
+export declare function ContentRow({ width, className, ...props }: ContentRowProps): import("react").JSX.Element;

package/dist/components/ContentRow.js

@@ -0,0 +1,18 @@
+import { jsx } from "react/jsx-runtime";
+function ContentRow({
+  width = "wide",
+  className = "",
+  ...props
+}) {
+  return /* @__PURE__ */ jsx(
+    "div",
+    {
+      ...props,
+      className: `doc-content-row ${className}`,
+      "data-width": width
+    }
+  );
+}
+export {
+  ContentRow
+};

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/dist/components/mdx-components.d.ts

@@ -2,6 +2,7 @@ import { ComponentPropsWithoutRef } from 'react';
 import { Table } from './Table';
 import { Callout } from './Callout';
 import { Chip } from './Chip';
+import { ContentRow } from './ContentRow';
 import { Preview } from './Preview';
 import { StatusTable, TestStatus } from './StatusTable';
 /**
@@ -27,6 +28,7 @@ export declare const mdxComponents: {
     Callout: typeof Callout;
     Chip: typeof Chip;
     Preview: typeof Preview;
+    ContentRow: typeof ContentRow;
     StatusTable: typeof StatusTable;
     TestStatus: typeof TestStatus;
 };

package/dist/components/mdx-components.js

@@ -4,6 +4,7 @@ import { CodeBlock } from "./CodeBlock.js";
 import { Table } from "./Table.js";
 import { Callout } from "./Callout.js";
 import { Chip } from "./Chip.js";
+import { ContentRow } from "./ContentRow.js";
 import { Preview } from "./Preview.js";
 import { TestStatus, StatusTable } from "./StatusTable.js";
 const InsidePreContext = createContext(false);
@@ -341,6 +342,7 @@ const mdxComponents = {
   Callout,
   Chip,
   Preview,
+  ContentRow,
   StatusTable,
   TestStatus
 };

package/dist/index.d.ts

@@ -73,3 +73,4 @@ export interface InitDocsOptions {
 }
 /** One call wires the whole shell: site config, navigation, search, tabs. */
 export declare function initDocs(opts: InitDocsOptions): void;
+export { ContentRow, type ContentRowProps } from './components/ContentRow';

package/dist/index.js

@@ -30,6 +30,7 @@ import { TOC } from "./components/TOC.js";
 import { Topbar } from "./components/Topbar.js";
 import { VersionBadge } from "./components/VersionBadge.js";
 import { Layout, useMerge } from "./renderer/Layout.js";
+import { ContentRow } from "./components/ContentRow.js";
 function initDocs(opts) {
   if (opts.pages && opts.pageMetadata) {
     throw new Error("initDocs: provide pageMetadata or pages, not both");
@@ -48,6 +49,7 @@ export {
   CodeBlock,
   CodeExample,
   CodeTabs,
+  ContentRow,
   DOC_PREFIX,
   DocFooter,
   Layout,

package/dist/renderer/Layout.js

@@ -145,6 +145,7 @@ function Layout({ children }) {
           /* @__PURE__ */ jsxs(
             "main",
             {
+              "data-doc-fullscreen": isFullscreen || void 0,
               ...current?.noindex ? {} : { "data-pagefind-body": true },
               ...current?.hidden ? { "data-pagefind-meta": "hidden:true" } : {},
               className: isFullscreen ? "doc-content w-full min-w-0 h-full overflow-auto p-4" : "doc-content w-full min-w-0 px-[18px] pb-20 lg:px-[56px] lg:pb-[120px] lg:max-w-[760px]",

package/dist/styles.css

@@ -427,3 +427,11 @@
 }
 .dockit-code-tabs[data-first-active='true'] [role='tabpanel'] { border-top-left-radius: 0; }
 .dockit-code-tabs [role='tabpanel'][hidden] { display: none; }
+
+/* ContentRow borrows only the main column gutters, never the sidebar/TOC. */
+.doc-content { --doc-row-bleed: 6px; }
+.doc-content-row { min-width: 0; margin-block: 24px; }
+.doc-content-row[data-width="wide"] { width: calc(100% + 2 * var(--doc-row-bleed, 0px)); margin-inline: calc(-1 * var(--doc-row-bleed, 0px)); }
+.doc-content-row > * { min-width: 0; }
+@media (min-width: 1024px) { .doc-content { --doc-row-bleed: 40px; } }
+.doc-content[data-doc-fullscreen] { --doc-row-bleed: 0px; }

package/package.json

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