@dreamlake/dockit 0.2.12 → 0.2.14

package/dist/components/SearchPalette.js

@@ -4,6 +4,17 @@ import { defaultResults, searchPages } from "../lib/pagefind-search.js";
 import { useMediaQuery } from "../lib/use-media-query.js";
 import { useSearchResize, SearchResizeHandles } from "./SearchResize.js";
 import { useHiddenToggle } from "../lib/use-hidden-toggle.js";
+import { Chip } from "./Chip.js";
+function SourceBadge({ label }) {
+  return /* @__PURE__ */ jsx(
+    Chip,
+    {
+      variant: "accent",
+      style: { fontSize: 8.5, padding: "0px 5px", letterSpacing: "0.06em", flexShrink: 0 },
+      children: label
+    }
+  );
+}
 const PAL_MAX_W = 860;
 const PAL_GUTTER = 24;
 const PAL_INSET = `max(${PAL_GUTTER}px, calc((100vw - ${PAL_MAX_W}px) / 2))`;
@@ -66,7 +77,7 @@ function SearchPalette({ open, onClose, query }) {
   const pageCacheRef = useRef(/* @__PURE__ */ new Map());
   const activePath = hits[active]?.path;
   useEffect(() => {
-    if (!activePath || isSingleCol) {
+    if (!activePath || isSingleCol || /^https?:\/\//.test(activePath)) {
       setPageHtml("");
       return;
     }
@@ -341,6 +352,7 @@ function SearchPalette({ open, onClose, query }) {
                                 textOverflow: "ellipsis"
                               },
                               children: [
+                                hit.sourceLabel && /* @__PURE__ */ jsx("span", { style: { marginRight: 5 }, children: /* @__PURE__ */ jsx(SourceBadge, { label: hit.sourceLabel }) }),
                                 hit.section && /* @__PURE__ */ jsxs(
                                   "span",
                                   {
@@ -379,19 +391,23 @@ function SearchPalette({ open, onClose, query }) {
                             }
                           )
                         ] }) : /* @__PURE__ */ jsxs(Fragment, { children: [
-                          /* @__PURE__ */ jsx(
-                            "span",
-                            {
-                              className: "text-doc-template-ink",
-                              style: {
-                                fontWeight: 500,
-                                whiteSpace: "nowrap",
-                                overflow: "hidden",
-                                textOverflow: "ellipsis"
-                              },
-                              children: highlight(hit.title, query)
-                            }
-                          ),
+                          /* @__PURE__ */ jsxs("span", { className: "flex items-center", style: { gap: 6, minWidth: 0 }, children: [
+                            /* @__PURE__ */ jsx(
+                              "span",
+                              {
+                                className: "text-doc-template-ink",
+                                style: {
+                                  fontWeight: 500,
+                                  whiteSpace: "nowrap",
+                                  overflow: "hidden",
+                                  textOverflow: "ellipsis",
+                                  minWidth: 0
+                                },
+                                children: highlight(hit.title, query)
+                              }
+                            ),
+                            hit.sourceLabel && /* @__PURE__ */ jsx(SourceBadge, { label: hit.sourceLabel })
+                          ] }),
                           hit.section && /* @__PURE__ */ jsx(
                             "span",
                             {
@@ -497,7 +513,7 @@ function SearchPalette({ open, onClose, query }) {
                           letterSpacing: "0.05em",
                           marginBottom: 6
                         },
-                        children: previewHit.section || "—"
+                        children: previewHit.section || previewHit.sourceLabel || "—"
                       }
                     ),
                     /* @__PURE__ */ jsx(

package/dist/components/TabStrip.js

@@ -1,11 +1,14 @@
 import { jsxs, jsx } from "react/jsx-runtime";
 import { useMemo, useRef, useState, useLayoutEffect } from "react";
 import { usePageContext } from "vike-react/usePageContext";
-import { tabForUrl, TABS, urlInTab } from "../lib/tabs.js";
+import { tabForUrl, TABS, isExternalTab, urlInTab } from "../lib/tabs.js";
 import { pages } from "../lib/navigation.js";
 import { useHiddenToggle } from "../lib/use-hidden-toggle.js";
 const SPRING = "cubic-bezier(0.4, 0.7, 0.3, 1)";
 const SSR_BAR_BOTTOM = -13;
+function tabKey(tab) {
+  return isExternalTab(tab) ? `ext:${tab.href}` : tab.id;
+}
 function TabStrip() {
   const { urlPathname } = usePageContext();
   const activeTab = tabForUrl(urlPathname);
@@ -13,7 +16,7 @@ function TabStrip() {
   const visibleTabs = useMemo(() => {
     if (showHidden) return TABS;
     return TABS.filter(
-      (tab) => tab.id === activeTab || pages.some((p) => !p.hidden && urlInTab(p.path, tab.id))
+      (tab) => isExternalTab(tab) || tab.id === activeTab || pages.some((p) => !p.hidden && urlInTab(p.path, tab.id))
     );
   }, [showHidden, activeTab]);
   const containerRef = useRef(null);
@@ -75,19 +78,22 @@ function TabStrip() {
       onMouseLeave: () => setHovered(null),
       children: [
         visibleTabs.map((tab) => {
-          const isActive = tab.id === activeTab;
+          const key = tabKey(tab);
+          const external = isExternalTab(tab);
+          const isActive = !external && tab.id === activeTab;
           return /* @__PURE__ */ jsx(
             "li",
             {
               className: "flex items-stretch shrink-0",
-              onMouseEnter: () => setHovered(tab.id),
-              children: /* @__PURE__ */ jsx(
+              onMouseEnter: () => setHovered(key),
+              children: /* @__PURE__ */ jsxs(
                 "a",
                 {
                   ref: (el) => {
-                    linkRefs.current[tab.id] = el;
+                    linkRefs.current[key] = el;
                   },
-                  href: tab.landing,
+                  href: external ? tab.href : tab.landing,
+                  ...external ? { target: "_blank", rel: "noreferrer" } : {},
                   "aria-current": isActive ? "page" : void 0,
                   className: "flex items-center no-underline px-1.5 md:px-2.5",
                   style: {
@@ -97,15 +103,36 @@ function TabStrip() {
                     letterSpacing: "0.12em",
                     textTransform: "uppercase",
                     whiteSpace: "nowrap",
-                    color: isActive || hovered === tab.id ? "var(--color-doc-template-ink)" : "var(--color-doc-template-muted)",
+                    color: isActive || hovered === key ? "var(--color-doc-template-ink)" : "var(--color-doc-template-muted)",
                     cursor: "pointer",
                     transition: "color 0.18s ease"
                   },
-                  children: tab.label
+                  children: [
+                    tab.label,
+                    external && // ↗ affordance — drawn, not the glyph, so its weight and
+                    // optical size stay consistent across the mono font stack.
+                    /* @__PURE__ */ jsxs(
+                      "svg",
+                      {
+                        viewBox: "0 0 24 24",
+                        fill: "none",
+                        stroke: "currentColor",
+                        strokeWidth: "2.5",
+                        strokeLinecap: "round",
+                        strokeLinejoin: "round",
+                        "aria-hidden": true,
+                        style: { width: 9, height: 9, marginLeft: 4, opacity: 0.8, flexShrink: 0 },
+                        children: [
+                          /* @__PURE__ */ jsx("path", { d: "M7 17L17 7" }),
+                          /* @__PURE__ */ jsx("path", { d: "M8 7h9v9" })
+                        ]
+                      }
+                    )
+                  ]
                 }
               )
             },
-            tab.id
+            key
           );
         }),
         /* @__PURE__ */ jsx(

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 { TABS, tabForUrl } from "../lib/tabs.js";
+import { internalTabs, tabForUrl } from "../lib/tabs.js";
 function HiddenRevealChip() {
   const [show, setShow] = useHiddenToggle();
   if (!show) return null;
@@ -38,7 +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 activeTab = TABS.find((t) => t.id === tabForUrl(urlPathname));
+  const activeTab = internalTabs().find((t) => t.id === tabForUrl(urlPathname));
   const versionChips = activeTab?.versionChips ?? siteConfig.versionChips ?? [];
   const inputRef = useRef(null);
   const labelRef = useRef(null);
@@ -160,7 +160,7 @@ function Topbar({ searchOpen, onOpenSearch, onCloseSearch, query, setQuery }) {
   const [tabsFit, setTabsFit] = useState(false);
   const [tabsW, setTabsW] = useState(0);
   const [pinLeft, setPinLeft] = useState(0);
-  const [searchPinRight, setSearchPinRight] = useState(null);
+  const [searchPinLeft, setSearchPinLeft] = useState(null);
   useLayoutEffect(() => {
     const tabsEl = tabsRef.current;
     if (!tabsEl) return;
@@ -178,13 +178,13 @@ function Topbar({ searchOpen, onOpenSearch, onCloseSearch, query, setQuery }) {
       const brandClear = brandMaxRight.current + 16 <= pin;
       const actions = actionsRef.current?.getBoundingClientRect();
       const actionsLeft = actions ? actions.left : window.innerWidth;
-      const pinnedSearchLeft = textRight - closedWidth;
+      const pinnedSearchLeft = textRight;
       const packedSearchLeft = actionsLeft - 8 - closedWidth;
       const fits = (searchLeft) => w > 0 && brandClear && pin + w + 16 <= searchLeft;
-      const fullPin = textRight + 16 <= actionsLeft && fits(pinnedSearchLeft);
+      const fullPin = textRight + closedWidth + 16 <= actionsLeft && fits(pinnedSearchLeft);
       setTabsW(w);
       setPinLeft(pin);
-      setSearchPinRight(fullPin ? window.innerWidth - textRight : null);
+      setSearchPinLeft(fullPin ? pinnedSearchLeft : null);
       setTabsFit(fullPin || fits(packedSearchLeft));
     };
     measure();
@@ -244,14 +244,17 @@ function Topbar({ searchOpen, onOpenSearch, onCloseSearch, query, setQuery }) {
     placeSelf: "stretch",
     boxShadow: "0 4px 14px rgb(0 0 0 / 0.06)",
     transition: `left ${EXPAND_MS}ms ${EXPAND_EASE}, right ${EXPAND_MS}ms ${EXPAND_EASE}, background 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease`
-  } : searchPinRight != null ? {
-    // Closed, right-aligned to the content column's right
-    // edge (mirrors the pinned tab strip on the left edge).
+  } : searchPinLeft != null ? {
+    // Closed, sitting just outside the content column with
+    // its left edge on the column's right border (mirrors
+    // the tab strip pinned to the left edge). Left-anchored,
+    // so breakpoint width changes grow it away from the
+    // column and the shared border never moves.
     // (gridArea/placeSelf: see the note above about
     // fixed-positioned grid items.)
     position: "fixed",
     top: 6,
-    right: searchPinRight,
+    left: searchPinLeft,
     width: closedWidth,
     maxWidth: closedWidth,
     height: 28,

package/dist/components/mdx-components.js

@@ -180,6 +180,7 @@ const H1 = ({ id, children, style, ...rest }) => /* @__PURE__ */ jsxs(
       fontWeight: 700,
       letterSpacing: "-0.025em",
       margin: "18px 0 10px",
+      paddingBottom: 24,
       lineHeight: 1.1,
       gap: 8,
       ...style

package/dist/index.d.ts

@@ -1,6 +1,6 @@
-import { SiteConfig as _SiteConfig } from './site-config';
+import { SiteConfig as _SiteConfig, SearchConfig as _SearchConfig } from './site-config';
 import { PageFrontmatter as _PageFrontmatter } from './lib/navigation';
-import { TabDef as _TabDef } from './lib/tabs';
+import { TabEntry as _TabEntry } from './lib/tabs';
 /**
  * @dreamlake/dockit — the DreamLake documentation shell as a library.
  *
@@ -17,11 +17,11 @@ import { TabDef as _TabDef } from './lib/tabs';
  *     tabs: [{ id: 'overview', label: 'Get Started', numeral: 'I', landing: '/', urlPrefix: '/get-started' }],
  *   })
  */
-export { siteConfig, defineSiteConfig, type SiteConfig, type VersionChip, } from './site-config';
+export { siteConfig, defineSiteConfig, type SiteConfig, type VersionChip, type SearchConfig, type MergeIndexDef, } from './site-config';
 export { pages, groupedPages, groupedVisiblePages, initNavigation, getAdjacentPages, normalizePath, findPage, type PageMeta, type PageFrontmatter, type PageModule, type NavGroup, } from './lib/navigation';
 export { searchIndex, rawMarkdown, initSearchIndex, search, type SearchEntry, type SearchHit, } from './lib/search-index';
 export { searchPages, defaultResults, type SearchResult, type SubResult, } from './lib/pagefind-search';
-export { TABS, initTabs, tabForUrl, urlInTab, type TabDef } from './lib/tabs';
+export { TABS, initTabs, tabForUrl, urlInTab, isExternalTab, internalTabs, type TabDef, type ExternalTabDef, type TabEntry, } from './lib/tabs';
 export { useHiddenToggle } from './lib/use-hidden-toggle';
 export { useLineNumbers } from './lib/use-line-numbers';
 export { useLocalStorage, DOC_PREFIX, docKey } from './lib/use-local-storage';
@@ -56,8 +56,14 @@ export interface InitDocsOptions {
     rawPages?: Record<string, string>;
     /** Authored sidebar section order; unknown sections fall to the end. */
     sectionOrder?: string[];
-    /** Topbar tab lenses. Omit (or pass []) for a tabless site. */
-    tabs?: _TabDef[];
+    /** Topbar tab lenses, plus optional external-link entries
+     *  (`{ label, href, external: true }`). Omit (or pass []) for a
+     *  tabless site. */
+    tabs?: _TabEntry[];
+    /** Search-layer options — e.g. `mergeIndexes` to merge remote Pagefind
+     *  indexes into the palette. Equivalent to `site.search`; this
+     *  top-level key wins when both are given. */
+    search?: _SearchConfig;
 }
 /** One call wires the whole shell: site config, navigation, search, tabs. */
 export declare function initDocs(opts: InitDocsOptions): void;

package/dist/index.js

@@ -6,7 +6,7 @@ import { initSearchIndex } from "./lib/search-index.js";
 import { rawMarkdown, search, searchIndex } from "./lib/search-index.js";
 import { defaultResults, searchPages } from "./lib/pagefind-search.js";
 import { initTabs } from "./lib/tabs.js";
-import { TABS, tabForUrl, urlInTab } from "./lib/tabs.js";
+import { TABS, internalTabs, isExternalTab, tabForUrl, urlInTab } from "./lib/tabs.js";
 import { useHiddenToggle } from "./lib/use-hidden-toggle.js";
 import { useLineNumbers } from "./lib/use-line-numbers.js";
 import { DOC_PREFIX, docKey, useLocalStorage } from "./lib/use-local-storage.js";
@@ -30,7 +30,7 @@ import { Topbar } from "./components/Topbar.js";
 import { VersionBadge } from "./components/VersionBadge.js";
 import { Layout, useMerge } from "./renderer/Layout.js";
 function initDocs(opts) {
-  defineSiteConfig(opts.site);
+  defineSiteConfig(opts.search ? { ...opts.site, search: opts.search } : opts.site);
   initNavigation(opts.pages, opts.sectionOrder ?? []);
   initSearchIndex(opts.rawPages ?? {});
   initTabs(opts.tabs ?? []);
@@ -67,6 +67,8 @@ export {
   initNavigation,
   initSearchIndex,
   initTabs,
+  internalTabs,
+  isExternalTab,
   mdxComponents,
   normalizePath,
   pages,

package/dist/lib/pagefind-search.d.ts

@@ -13,6 +13,10 @@ export interface SearchResult {
     excerptHtml: string;
     subResults: SubResult[];
     score: number;
+    /** Label of the merged remote index this result came from (see
+     *  `search.mergeIndexes` in the site config). Unset for local results.
+     *  Remote results carry absolute `path`/sub-result URLs on that site. */
+    sourceLabel?: string;
 }
 /** Default (empty-query) results — computed lazily because the
  *  `searchIndex` singleton is only populated once the consuming site's

package/dist/lib/pagefind-search.js

@@ -1,7 +1,9 @@
 import { searchIndex, search } from "./search-index.js";
 import { pages } from "./navigation.js";
+import { siteConfig } from "../site-config.js";
 let pagefind = null;
 let initPromise = null;
+const mergedOriginLabels = /* @__PURE__ */ new Map();
 async function getPagefind() {
   if (pagefind) return pagefind;
   if (initPromise) return initPromise;
@@ -13,6 +15,14 @@ async function getPagefind() {
         path
       );
       await pf.options({ excerptLength: 200 });
+      for (const idx of siteConfig.search?.mergeIndexes ?? []) {
+        try {
+          const origin = new URL(idx.url).origin;
+          await pf.mergeIndex(idx.url, { baseUrl: `${origin}/` });
+          mergedOriginLabels.set(origin, idx.label);
+        } catch {
+        }
+      }
       pagefind = pf;
       return pf;
     } catch {
@@ -21,6 +31,14 @@ async function getPagefind() {
   })();
   return initPromise;
 }
+function sourceLabelFor(url) {
+  if (!/^https?:\/\//.test(url)) return void 0;
+  try {
+    return mergedOriginLabels.get(new URL(url).origin);
+  } catch {
+    return void 0;
+  }
+}
 const STOP_WORDS = /* @__PURE__ */ new Set([
   "a",
   "an",
@@ -189,7 +207,8 @@ async function searchPages(query, limit = 30, showHidden = false) {
       snippet: r.excerpt?.replace(/<[^>]+>/g, "").trim() ?? "",
       excerptHtml: r.excerpt ?? "",
       subResults,
-      score
+      score,
+      sourceLabel: sourceLabelFor(path)
     };
   });
   mapped.sort((a, b) => b.score - a.score);

package/dist/lib/tabs.d.ts

@@ -13,11 +13,26 @@ export interface TabDef {
      *  chips; set to `[]` to show none on this tab. */
     versionChips?: VersionChip[];
 }
+/** An external-link entry in the tab strip — renders alongside the tab
+ *  lenses with an ↗ affordance, but is a plain link out to another site
+ *  (e.g. a sibling docs property). It scopes no pages, is never "active",
+ *  and does not participate in `tabForUrl`. */
+export interface ExternalTabDef {
+    label: string;
+    /** Absolute URL the tab links out to (e.g. "https://cli.dreamlake.ai"). */
+    href: string;
+    external: true;
+}
+export type TabEntry = TabDef | ExternalTabDef;
+export declare function isExternalTab(tab: TabEntry): tab is ExternalTabDef;
 /** Module-level singleton, populated by `initTabs()`. Mutated in place —
  *  never reassigned — so importing components keep a live reference. */
-export declare const TABS: TabDef[];
+export declare const TABS: TabEntry[];
 /** Populate the tab singleton from the consuming site. */
-export declare function initTabs(tabs: TabDef[]): void;
+export declare function initTabs(tabs: TabEntry[]): void;
+/** The page-scoping (non-external) tabs, in order. All URL→tab logic
+ *  runs over this list — external entries are chrome, not lenses. */
+export declare function internalTabs(): TabDef[];
 /** Derive active tab from a page URL. The site root `/` resolves to the
  *  first tab. Unknown prefixes also fall back to the first tab so orphan
  *  pages never leave the sidebar empty. With no tabs registered, always

package/dist/lib/tabs.js

@@ -1,8 +1,14 @@
+function isExternalTab(tab) {
+  return tab.external === true;
+}
 const TABS = [];
 function initTabs(tabs) {
   TABS.length = 0;
   TABS.push(...tabs);
 }
+function internalTabs() {
+  return TABS.filter((t) => !isExternalTab(t));
+}
 function firstSegment(url) {
   const path = url.split(/[?#]/)[0];
   const trimmed = path.replace(/^\/+/, "").replace(/\/+$/, "");
@@ -10,14 +16,15 @@ function firstSegment(url) {
   return trimmed.split("/")[0];
 }
 function tabForUrl(url) {
-  if (TABS.length === 0) return "";
-  if (!url) return TABS[0].id;
+  const tabs = internalTabs();
+  if (tabs.length === 0) return "";
+  if (!url) return tabs[0].id;
   const seg = firstSegment(url);
-  if (!seg) return TABS[0].id;
-  for (const tab of TABS) {
+  if (!seg) return tabs[0].id;
+  for (const tab of tabs) {
     if (tab.urlPrefix === `/${seg}`) return tab.id;
   }
-  return TABS[0].id;
+  return tabs[0].id;
 }
 function urlInTab(url, tabId) {
   return tabForUrl(url) === tabId;
@@ -25,6 +32,8 @@ function urlInTab(url, tabId) {
 export {
   TABS,
   initTabs,
+  internalTabs,
+  isExternalTab,
   tabForUrl,
   urlInTab
 };

package/dist/site-config.d.ts

@@ -17,6 +17,24 @@ export interface VersionChip {
     version: string;
     dropdown?: boolean;
 }
+/** One remote Pagefind index merged into the site's own search via
+ *  `pagefind.mergeIndex()` — Pagefind's first-class multisite API. The
+ *  remote site must serve its `/pagefind/` bundle with CORS
+ *  (`Access-Control-Allow-Origin`) and a compatible index format (same
+ *  Pagefind 1.x major). An index that fails to load degrades silently to
+ *  local-only search. */
+export interface MergeIndexDef {
+    /** Absolute URL of the remote bundle directory, e.g.
+     *  "https://cli.dreamlake.ai/pagefind/". */
+    url: string;
+    /** Badge label shown on results from this index (e.g. "CLI"). */
+    label: string;
+}
+/** Search-layer options (runtime Pagefind behavior). */
+export interface SearchConfig {
+    /** Remote Pagefind indexes to merge into the palette's results. */
+    mergeIndexes?: MergeIndexDef[];
+}
 export interface SiteConfig {
     /** Brand name in the top-left of the shell (e.g. "DreamLake"). */
     brand: string;
@@ -72,6 +90,10 @@ export interface SiteConfig {
      *  — http(s), protocol-relative, or absolute-path; anything else is
      *  silently dropped. */
     headScripts?: string[];
+    /** Runtime search options — e.g. remote Pagefind indexes to merge into
+     *  the palette (`search.mergeIndexes`). Also settable via the top-level
+     *  `search` key of `initDocs()`. */
+    search?: SearchConfig;
     /** Search-engine visibility. DEFAULT FALSE per org policy: every page
      *  gets `<meta name="robots" content="noindex, nofollow">` unless a site
      *  explicitly opts in with `indexable: true`. Page-level `noindex`

package/package.json

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