@netfoundry/docusaurus-theme 0.6.0 → 0.8.0

package/css/layout.css

@@ -7,8 +7,12 @@ body,
     flex-direction: column;
 }
 
+html {
+    scrollbar-gutter: stable;
+}
+
 .main-wrapper > div {
     /* work around issue from docusaurus doc grow/shrinking based on content */
     width: 100%;
     max-width: var(--ziti-max-width);
-}
+}

package/css/product-picker.css

@@ -0,0 +1,210 @@
+/* =========================================================================
+   PRODUCT PICKER
+   Styles for the Products product-picker dropdown in the navbar.
+
+   Import in docusaurus.config.ts customCss:
+     require.resolve('@netfoundry/docusaurus-theme/css/product-picker.css')
+   ========================================================================= */
+
+/* ── Product / resource icons inside the picker ─────────────────────────── */
+.picker-logo { width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; margin-right: 0.8rem; }
+.picker-icon { width: 20px; height: 20px; margin-right: 0.8rem; background-color: var(--ifm-color-primary); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; display: inline-block; }
+
+/* Light/dark logo switching */
+.picker-logo--dark              { display: none; }
+[data-theme='dark'] .picker-logo--light { display: none; }
+[data-theme='dark'] .picker-logo--dark  { display: block; }
+
+/* zrok logo needs a subtle shadow in light mode (white logo on white bg) */
+[data-theme='light'] img[src*="zrok-logo"] { filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.55)); }
+
+/* ── Dropdown trigger button in the navbar ──────────────────────────────── */
+.nf-picker-trigger,
+.nf-resources-dropdown {
+    color: var(--ifm-font-color-base);
+    position: relative;
+    padding-right: 1.2rem;
+    transition: color 0.3s ease;
+}
+
+.nf-picker-trigger:hover,
+.nf-resources-dropdown:hover,
+.navbar__item.dropdown--show .nf-picker-trigger,
+.navbar__item.dropdown--show .nf-resources-dropdown {
+    color: var(--ifm-color-primary);
+    text-decoration: none;
+}
+
+/* Animated chevron */
+.nf-picker-trigger::after,
+.nf-resources-dropdown::after {
+    content: '';
+    position: absolute;
+    right: 0.2rem;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 0;
+    height: 0;
+    border-left: 4px solid transparent;
+    border-right: 4px solid transparent;
+    border-top: 5px solid currentColor;
+    transition: all 0.3s ease;
+    opacity: 0.6;
+}
+
+/* Hover: chevron drops slightly */
+.navbar__link.nf-picker-trigger:hover::after,
+.navbar__link.nf-resources-dropdown:hover::after {
+    transform: translateY(-20%);
+    opacity: 1;
+}
+
+/* Open: chevron rotates 180° */
+.nf-picker--open .nf-picker-trigger::after,
+.navbar__item.dropdown--show .nf-resources-dropdown::after {
+    transform: translateY(-50%) rotate(180deg);
+    opacity: 1;
+}
+
+/* Dark mode: cyan accent on hover */
+[data-theme='dark'] .nf-picker-trigger:hover,
+[data-theme='dark'] .nf-resources-dropdown:hover,
+[data-theme='dark'] .nf-picker--open .nf-picker-trigger,
+[data-theme='dark'] .navbar__item.dropdown--show .nf-resources-dropdown {
+    color: #22d3ee;
+}
+
+/* ── ProductPicker panel (custom navbar item) ───────────────────────────── */
+.nf-picker-panel {
+    position: fixed;
+    top: 3.75rem;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 85vw;
+    max-width: 1000px;
+    padding: 1.5rem 2rem;
+    border-radius: 12px;
+    border: 1px solid rgba(0, 118, 255, 0.12);
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
+    background: var(--ifm-card-background-color);
+    z-index: 1000;
+}
+
+/* CSS bridge: transparent strip above the panel eats the gap */
+.nf-picker-panel::before {
+    content: '';
+    display: block;
+    position: absolute;
+    top: -20px;
+    left: 0;
+    right: 0;
+    height: 20px;
+}
+
+/* ── Legacy html-type dropdown panel ────────────────────────────────────── */
+
+/*
+ * CSS bridge: an invisible pseudo-element that extends the panel's hit area
+ * upward by 20 px.  When the cursor moves from the trigger button down into
+ * this transparent strip, mouseenter fires on the panel (ul) immediately —
+ * cancelling the hide timer before it expires — so the menu never flickers
+ * during diagonal movement across the gap between navbar and panel.
+ */
+.dropdown__menu:has(.picker-content)::before {
+    content: '';
+    display: block;
+    position: absolute;
+    top: -20px;
+    left: 0;
+    right: 0;
+    height: 20px;
+}
+
+/* :has() raises specificity above plain .dropdown__menu — no !important needed */
+.dropdown__menu:has(.picker-content) {
+    position: fixed;
+    top: 3.75rem;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 85vw;
+    max-width: 1000px;
+    padding: 1.5rem 2rem;
+    border-radius: 12px;
+    border: 1px solid rgba(0, 118, 255, 0.12);
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
+    background: var(--ifm-card-background-color);
+    z-index: 1000;
+}
+
+/* Narrower panel for the 2-column Resources menu */
+.dropdown__menu:has(.picker-resources) { max-width: 700px; }
+
+/* Ensure visibility when open */
+.dropdown--show > .dropdown__menu,
+.dropdown:hover > .dropdown__menu {
+    display: block;
+    visibility: visible;
+    opacity: 1;
+}
+
+/* ── Grid layout ────────────────────────────────────────────────────────── */
+.picker-content { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2rem; }
+.picker-resources { grid-template-columns: 1fr 1fr; }
+
+/* ── Column headers ─────────────────────────────────────────────────────── */
+.picker-header {
+    font-size: 0.7rem;
+    font-weight: 900;
+    color: #94a3b8;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    border-bottom: 2px solid rgba(148, 163, 184, 0.2);
+    display: block;
+    padding-bottom: 0.5rem;
+    margin-bottom: 0.75rem;
+}
+.picker-header--nf-primary   { color: var(--nf-primary);   border-bottom-color: rgba(var(--nf-color-primary),   0.3); }
+.picker-header--nf-secondary { color: var(--nf-secondary); border-bottom-color: rgba(var(--nf-color-secondary), 0.3); }
+.picker-header--nf-tertiary  { color: var(--nf-tertiary);  border-bottom-color: rgba(var(--nf-color-tertiary),  0.3); }
+[data-theme='light'] .picker-header { filter: brightness(0.6); }
+[data-theme='dark']  .picker-header--nf-tertiary { filter: brightness(1.6); }
+
+/* ── Product / resource links ───────────────────────────────────────────── */
+.picker-link {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.75rem;
+    padding: 0.55rem 0.65rem;
+    text-decoration: none;
+    transition: all 0.2s ease;
+    border-radius: 8px;
+}
+.picker-link:hover  { background: rgba(0, 118, 255, 0.06); transform: translateX(3px); }
+.picker-link strong { color: var(--ifm-font-color-base); font-size: 0.95rem; font-weight: 900; letter-spacing: -0.02em; display: block; }
+.picker-link span   { color: #64748b; font-size: 0.82rem; display: block; margin-top: 2px; line-height: 1.35; }
+
+/* ── Mobile (<= 996 px) ─────────────────────────────────────────────────── */
+@media (max-width: 996px) {
+    /* Fixed grid makes no sense in the narrow sidebar — hide the raw HTML blob */
+    .menu__list .menu__list-item:has(> .picker-content) { display: none; }
+
+    /* Docusaurus already renders a chevron; hide ours to avoid doubles */
+    .nf-picker-trigger::after,
+    .nf-resources-dropdown::after { display: none; }
+
+    .nf-picker-trigger,
+    .nf-resources-dropdown { padding-right: 0.5rem; }
+}
+
+/* ── Desktop (>= 997 px) ────────────────────────────────────────────────── */
+@media (min-width: 997px) {
+    /* Hide mobile-only fallback links when product picker is active */
+    .dropdown__menu .mobile-nav-link { display: none; }
+
+    /* Force panel visible when JS sets dropdown--show (swizzled component) */
+    .navbar__item.dropdown--show .dropdown__menu:has(.picker-content) {
+        display: block;
+        visibility: visible;
+        opacity: 1;
+    }
+}

package/css/vars.css

@@ -1,6 +1,14 @@
 :root {
     --ifm-navbar-height: 50px;
     --nf-docs-max-width: 1400px;
+
+    --nf-color-primary:   119, 194, 252;
+    --nf-color-secondary: 78, 219, 63;
+    --nf-color-tertiary:  3, 92, 230;
+
+    --nf-primary:   rgb(var(--nf-color-primary));
+    --nf-secondary: rgb(var(--nf-color-secondary));
+    --nf-tertiary:  rgb(var(--nf-color-tertiary));
     /*--nf-docs-main-color: purple;*/
     .container {
         /*background: sandybrown;*/

package/dist/css/layout.css

@@ -7,8 +7,12 @@ body,
     flex-direction: column;
 }
 
+html {
+    scrollbar-gutter: stable;
+}
+
 .main-wrapper > div {
     /* work around issue from docusaurus doc grow/shrinking based on content */
     width: 100%;
     max-width: var(--ziti-max-width);
-}
+}

package/dist/css/product-picker.css

@@ -0,0 +1,210 @@
+/* =========================================================================
+   PRODUCT PICKER
+   Styles for the Products product-picker dropdown in the navbar.
+
+   Import in docusaurus.config.ts customCss:
+     require.resolve('@netfoundry/docusaurus-theme/css/product-picker.css')
+   ========================================================================= */
+
+/* ── Product / resource icons inside the picker ─────────────────────────── */
+.picker-logo { width: 32px; height: 32px; object-fit: contain; flex-shrink: 0; margin-right: 0.8rem; }
+.picker-icon { width: 20px; height: 20px; margin-right: 0.8rem; background-color: var(--ifm-color-primary); -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; display: inline-block; }
+
+/* Light/dark logo switching */
+.picker-logo--dark              { display: none; }
+[data-theme='dark'] .picker-logo--light { display: none; }
+[data-theme='dark'] .picker-logo--dark  { display: block; }
+
+/* zrok logo needs a subtle shadow in light mode (white logo on white bg) */
+[data-theme='light'] img[src*="zrok-logo"] { filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.55)); }
+
+/* ── Dropdown trigger button in the navbar ──────────────────────────────── */
+.nf-picker-trigger,
+.nf-resources-dropdown {
+    color: var(--ifm-font-color-base);
+    position: relative;
+    padding-right: 1.2rem;
+    transition: color 0.3s ease;
+}
+
+.nf-picker-trigger:hover,
+.nf-resources-dropdown:hover,
+.navbar__item.dropdown--show .nf-picker-trigger,
+.navbar__item.dropdown--show .nf-resources-dropdown {
+    color: var(--ifm-color-primary);
+    text-decoration: none;
+}
+
+/* Animated chevron */
+.nf-picker-trigger::after,
+.nf-resources-dropdown::after {
+    content: '';
+    position: absolute;
+    right: 0.2rem;
+    top: 50%;
+    transform: translateY(-50%);
+    width: 0;
+    height: 0;
+    border-left: 4px solid transparent;
+    border-right: 4px solid transparent;
+    border-top: 5px solid currentColor;
+    transition: all 0.3s ease;
+    opacity: 0.6;
+}
+
+/* Hover: chevron drops slightly */
+.navbar__link.nf-picker-trigger:hover::after,
+.navbar__link.nf-resources-dropdown:hover::after {
+    transform: translateY(-20%);
+    opacity: 1;
+}
+
+/* Open: chevron rotates 180° */
+.nf-picker--open .nf-picker-trigger::after,
+.navbar__item.dropdown--show .nf-resources-dropdown::after {
+    transform: translateY(-50%) rotate(180deg);
+    opacity: 1;
+}
+
+/* Dark mode: cyan accent on hover */
+[data-theme='dark'] .nf-picker-trigger:hover,
+[data-theme='dark'] .nf-resources-dropdown:hover,
+[data-theme='dark'] .nf-picker--open .nf-picker-trigger,
+[data-theme='dark'] .navbar__item.dropdown--show .nf-resources-dropdown {
+    color: #22d3ee;
+}
+
+/* ── ProductPicker panel (custom navbar item) ───────────────────────────── */
+.nf-picker-panel {
+    position: fixed;
+    top: 3.75rem;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 85vw;
+    max-width: 1000px;
+    padding: 1.5rem 2rem;
+    border-radius: 12px;
+    border: 1px solid rgba(0, 118, 255, 0.12);
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
+    background: var(--ifm-card-background-color);
+    z-index: 1000;
+}
+
+/* CSS bridge: transparent strip above the panel eats the gap */
+.nf-picker-panel::before {
+    content: '';
+    display: block;
+    position: absolute;
+    top: -20px;
+    left: 0;
+    right: 0;
+    height: 20px;
+}
+
+/* ── Legacy html-type dropdown panel ────────────────────────────────────── */
+
+/*
+ * CSS bridge: an invisible pseudo-element that extends the panel's hit area
+ * upward by 20 px.  When the cursor moves from the trigger button down into
+ * this transparent strip, mouseenter fires on the panel (ul) immediately —
+ * cancelling the hide timer before it expires — so the menu never flickers
+ * during diagonal movement across the gap between navbar and panel.
+ */
+.dropdown__menu:has(.picker-content)::before {
+    content: '';
+    display: block;
+    position: absolute;
+    top: -20px;
+    left: 0;
+    right: 0;
+    height: 20px;
+}
+
+/* :has() raises specificity above plain .dropdown__menu — no !important needed */
+.dropdown__menu:has(.picker-content) {
+    position: fixed;
+    top: 3.75rem;
+    left: 50%;
+    transform: translateX(-50%);
+    width: 85vw;
+    max-width: 1000px;
+    padding: 1.5rem 2rem;
+    border-radius: 12px;
+    border: 1px solid rgba(0, 118, 255, 0.12);
+    box-shadow: 0 20px 50px rgba(0, 0, 0, 0.15);
+    background: var(--ifm-card-background-color);
+    z-index: 1000;
+}
+
+/* Narrower panel for the 2-column Resources menu */
+.dropdown__menu:has(.picker-resources) { max-width: 700px; }
+
+/* Ensure visibility when open */
+.dropdown--show > .dropdown__menu,
+.dropdown:hover > .dropdown__menu {
+    display: block;
+    visibility: visible;
+    opacity: 1;
+}
+
+/* ── Grid layout ────────────────────────────────────────────────────────── */
+.picker-content { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 2rem; }
+.picker-resources { grid-template-columns: 1fr 1fr; }
+
+/* ── Column headers ─────────────────────────────────────────────────────── */
+.picker-header {
+    font-size: 0.7rem;
+    font-weight: 900;
+    color: #94a3b8;
+    text-transform: uppercase;
+    letter-spacing: 0.1em;
+    border-bottom: 2px solid rgba(148, 163, 184, 0.2);
+    display: block;
+    padding-bottom: 0.5rem;
+    margin-bottom: 0.75rem;
+}
+.picker-header--nf-primary   { color: var(--nf-primary);   border-bottom-color: rgba(var(--nf-color-primary),   0.3); }
+.picker-header--nf-secondary { color: var(--nf-secondary); border-bottom-color: rgba(var(--nf-color-secondary), 0.3); }
+.picker-header--nf-tertiary  { color: var(--nf-tertiary);  border-bottom-color: rgba(var(--nf-color-tertiary),  0.3); }
+[data-theme='light'] .picker-header { filter: brightness(0.6); }
+[data-theme='dark']  .picker-header--nf-tertiary { filter: brightness(1.6); }
+
+/* ── Product / resource links ───────────────────────────────────────────── */
+.picker-link {
+    display: flex;
+    align-items: flex-start;
+    gap: 0.75rem;
+    padding: 0.55rem 0.65rem;
+    text-decoration: none;
+    transition: all 0.2s ease;
+    border-radius: 8px;
+}
+.picker-link:hover  { background: rgba(0, 118, 255, 0.06); transform: translateX(3px); }
+.picker-link strong { color: var(--ifm-font-color-base); font-size: 0.95rem; font-weight: 900; letter-spacing: -0.02em; display: block; }
+.picker-link span   { color: #64748b; font-size: 0.82rem; display: block; margin-top: 2px; line-height: 1.35; }
+
+/* ── Mobile (<= 996 px) ─────────────────────────────────────────────────── */
+@media (max-width: 996px) {
+    /* Fixed grid makes no sense in the narrow sidebar — hide the raw HTML blob */
+    .menu__list .menu__list-item:has(> .picker-content) { display: none; }
+
+    /* Docusaurus already renders a chevron; hide ours to avoid doubles */
+    .nf-picker-trigger::after,
+    .nf-resources-dropdown::after { display: none; }
+
+    .nf-picker-trigger,
+    .nf-resources-dropdown { padding-right: 0.5rem; }
+}
+
+/* ── Desktop (>= 997 px) ────────────────────────────────────────────────── */
+@media (min-width: 997px) {
+    /* Hide mobile-only fallback links when product picker is active */
+    .dropdown__menu .mobile-nav-link { display: none; }
+
+    /* Force panel visible when JS sets dropdown--show (swizzled component) */
+    .navbar__item.dropdown--show .dropdown__menu:has(.picker-content) {
+        display: block;
+        visibility: visible;
+        opacity: 1;
+    }
+}

package/dist/css/vars.css

@@ -1,6 +1,14 @@
 :root {
     --ifm-navbar-height: 50px;
     --nf-docs-max-width: 1400px;
+
+    --nf-color-primary:   119, 194, 252;
+    --nf-color-secondary: 78, 219, 63;
+    --nf-color-tertiary:  3, 92, 230;
+
+    --nf-primary:   rgb(var(--nf-color-primary));
+    --nf-secondary: rgb(var(--nf-color-secondary));
+    --nf-tertiary:  rgb(var(--nf-color-tertiary));
     /*--nf-docs-main-color: purple;*/
     .container {
         /*background: sandybrown;*/

package/dist/src/options.d.ts

@@ -33,6 +33,32 @@ export interface StarBannerConfig {
     repoUrl: string;
     /** Label text for the star button */
     label: string;
+    /** Only show banner when the current path starts with this prefix (e.g. '/docs/openziti') */
+    pathPrefix?: string;
+}
+/**
+ * A single link entry in the product picker
+ */
+export interface ProductPickerLink {
+    /** Display name */
+    label: string;
+    /** Route or URL */
+    to: string;
+    /** Logo shown in light mode (and dark mode if logoDark is absent) */
+    logo?: string;
+    /** Logo shown only in dark mode */
+    logoDark?: string;
+    /** Short description shown beneath the label */
+    description?: string;
+}
+/**
+ * A column in the product picker dropdown.
+ * Header color is assigned automatically by column index (primary → secondary → tertiary).
+ */
+export interface ProductPickerColumn {
+    /** Column heading text */
+    header: string;
+    links: ProductPickerLink[];
 }
 /**
  * Options passed to the theme plugin in docusaurus.config.ts
@@ -75,10 +101,12 @@ export interface NetFoundryThemeOptions {
 export interface NetFoundryThemeConfig {
     /** Footer configuration */
     footer?: FooterConfig;
-    /** Star banner configuration */
-    starBanner?: StarBannerConfig;
-    /** Whether to show the star banner (default: false) */
-    showStarBanner?: boolean;
+    /** Path-aware star banners — each entry shows only when the current path starts with pathPrefix (omit pathPrefix to show everywhere) */
+    starBanners?: StarBannerConfig[];
+    /** Product picker columns. If omitted, the theme falls back to built-in NetFoundry defaults. */
+    productPickerColumns?: ProductPickerColumn[];
+    /** Logo URL for the NetFoundry Console link in the product picker (overrides the default NetFoundry branding icon) */
+    consoleLogo?: string;
 }
 /**
  * Extended Docusaurus ThemeConfig with NetFoundry configuration

package/dist/src/options.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"options.d.ts","sourceRoot":"","sources":["../../src/options.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,2CAA2C;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yBAAyB;IACzB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,iEAAiE;IACjE,kBAAkB,CAAC,EAAE,SAAS,EAAE,CAAC;IACjC,8BAA8B;IAC9B,cAAc,CAAC,EAAE,SAAS,EAAE,CAAC;IAC7B,8BAA8B;IAC9B,aAAa,CAAC,EAAE,SAAS,EAAE,CAAC;CAC7B;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,4BAA4B;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAC;CACf;AAED;;;;;;;;;;;GAWG;AACH,MAAM,WAAW,sBAAsB;IACrC,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;CAC/B;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,WAAW,qBAAqB;IACpC,2BAA2B;IAC3B,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,gCAAgC;IAChC,UAAU,CAAC,EAAE,gBAAgB,CAAC;IAC9B,uDAAuD;IACvD,cAAc,CAAC,EAAE,OAAO,CAAC;CAC1B;AAED;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB"}
+{"version":3,"file":"options.d.ts","sourceRoot":"","sources":["../../src/options.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,SAAS,EAAE,MAAM,OAAO,CAAC;AAEvC;;GAEG;AACH,MAAM,WAAW,WAAW;IAC1B,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,YAAY,CAAC,EAAE,MAAM,CAAC;CACvB;AAED;;GAEG;AACH,MAAM,WAAW,YAAY;IAC3B,2CAA2C;IAC3C,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,yBAAyB;IACzB,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,iEAAiE;IACjE,kBAAkB,CAAC,EAAE,SAAS,EAAE,CAAC;IACjC,8BAA8B;IAC9B,cAAc,CAAC,EAAE,SAAS,EAAE,CAAC;IAC7B,8BAA8B;IAC9B,aAAa,CAAC,EAAE,SAAS,EAAE,CAAC;CAC7B;AAED;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,4BAA4B;IAC5B,OAAO,EAAE,MAAM,CAAC;IAChB,qCAAqC;IACrC,KAAK,EAAE,MAAM,CAAC;IACd,6FAA6F;IAC7F,UAAU,CAAC,EAAE,MAAM,CAAC;CACrB;AAED;;GAEG;AACH,MAAM,WAAW,iBAAiB;IAChC,mBAAmB;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,mBAAmB;IACnB,EAAE,EAAE,MAAM,CAAC;IACX,qEAAqE;IACrE,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,mCAAmC;IACnC,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,gDAAgD;IAChD,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;GAGG;AACH,MAAM,WAAW,mBAAmB;IAClC,0BAA0B;IAC1B,MAAM,EAAE,MAAM,CAAC;IACf,KAAK,EAAE,iBAAiB,EAAE,CAAC;CAC5B;AAED;;;;;;;;;;;GAWG;AACH,MAAM,WAAW,sBAAsB;IACrC,yCAAyC;IACzC,SAAS,CAAC,EAAE,MAAM,GAAG,MAAM,EAAE,CAAC;CAC/B;AAED;;;;;;;;;;;;;;;;;;;;;GAqBG;AACH,MAAM,WAAW,qBAAqB;IACpC,2BAA2B;IAC3B,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,wIAAwI;IACxI,WAAW,CAAC,EAAE,gBAAgB,EAAE,CAAC;IACjC,gGAAgG;IAChG,oBAAoB,CAAC,EAAE,mBAAmB,EAAE,CAAC;IAC7C,sHAAsH;IACtH,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;GAEG;AACH,MAAM,WAAW,yBAAyB;IACxC,UAAU,CAAC,EAAE,qBAAqB,CAAC;IACnC,CAAC,GAAG,EAAE,MAAM,GAAG,OAAO,CAAC;CACxB"}

package/dist/theme/Layout/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../theme/Layout/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAS9C,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,QAAQ,EACR,QAAQ,EACR,gBAAgB,EAChB,KAAK,EACL,WAAW,GACZ,EAAE,WAAW,GAAG,SAAS,CAyCzB"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../theme/Layout/index.tsx"],"names":[],"mappings":"AAAA,OAAc,EAAE,KAAK,SAAS,EAAE,MAAM,OAAO,CAAC;AAU9C,MAAM,WAAW,WAAW;IAC1B,QAAQ,EAAE,SAAS,CAAC;IACpB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,gBAAgB,CAAC,EAAE,MAAM,CAAC;IAC1B,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAED;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,QAAQ,EACR,QAAQ,EACR,gBAAgB,EAChB,KAAK,EACL,WAAW,GACZ,EAAE,WAAW,GAAG,SAAS,CAyCzB"}

package/dist/theme/Layout/index.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx } from "react/jsx-runtime";
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import { useLocation } from 'react-router-dom';
 import { NetFoundryLayout, defaultNetFoundryFooterProps, defaultSocialProps, } from '../../src/ui';
 /**
  * NetFoundry theme Layout component.
@@ -12,6 +13,7 @@ import { NetFoundryLayout, defaultNetFoundryFooterProps, defaultSocialProps, } f
  */
 export default function Layout({ children, noFooter, wrapperClassName, title, description, }) {
     const { siteConfig } = useDocusaurusContext();
+    const { pathname } = useLocation();
     const themeConfig = siteConfig.themeConfig;
     const nfConfig = themeConfig.netfoundry ?? {};
     // Build footer props from config, falling back to defaults
@@ -25,12 +27,10 @@ export default function Layout({ children, noFooter, wrapperClassName, title, de
                 ...nfConfig.footer?.socialProps,
             },
         };
-    // Build star props if enabled
-    const starProps = nfConfig.showStarBanner && nfConfig.starBanner
-        ? {
-            repoUrl: nfConfig.starBanner.repoUrl,
-            label: nfConfig.starBanner.label,
-        }
+    // Pick the first banner whose pathPrefix matches (or has no prefix)
+    const matchedBanner = nfConfig.starBanners?.find(b => !b.pathPrefix || pathname.startsWith(b.pathPrefix));
+    const starProps = matchedBanner
+        ? { repoUrl: matchedBanner.repoUrl, label: matchedBanner.label }
         : undefined;
     return (_jsx(NetFoundryLayout, { title: title, description: description, className: wrapperClassName, noFooter: noFooter, footerProps: footerProps, starProps: starProps, meta: {
             siteName: siteConfig.title,

package/dist/theme/Layout/index.js.map

@@ -1 +1 @@
-{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../theme/Layout/index.tsx"],"names":[],"mappings":";AACA,OAAO,oBAAoB,MAAM,kCAAkC,CAAC;AACpE,OAAO,EACL,gBAAgB,EAChB,4BAA4B,EAC5B,kBAAkB,GACnB,MAAM,cAAc,CAAC;AAWtB;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,QAAQ,EACR,QAAQ,EACR,gBAAgB,EAChB,KAAK,EACL,WAAW,GACC;IACZ,MAAM,EAAE,UAAU,EAAE,GAAG,oBAAoB,EAAE,CAAC;IAC9C,MAAM,WAAW,GAAG,UAAU,CAAC,WAAwC,CAAC;IACxE,MAAM,QAAQ,GAAG,WAAW,CAAC,UAAU,IAAI,EAAE,CAAC;IAE9C,2DAA2D;IAC3D,MAAM,WAAW,GAAG,QAAQ;QAC1B,CAAC,CAAC,SAAS;QACX,CAAC,CAAC;YACE,GAAG,4BAA4B,EAAE;YACjC,GAAG,QAAQ,CAAC,MAAM;YAClB,WAAW,EAAE;gBACX,GAAG,kBAAkB;gBACrB,GAAG,QAAQ,CAAC,MAAM,EAAE,WAAW;aAChC;SACF,CAAC;IAEN,8BAA8B;IAC9B,MAAM,SAAS,GACb,QAAQ,CAAC,cAAc,IAAI,QAAQ,CAAC,UAAU;QAC5C,CAAC,CAAC;YACE,OAAO,EAAE,QAAQ,CAAC,UAAU,CAAC,OAAO;YACpC,KAAK,EAAE,QAAQ,CAAC,UAAU,CAAC,KAAK;SACjC;QACH,CAAC,CAAC,SAAS,CAAC;IAEhB,OAAO,CACL,KAAC,gBAAgB,IACf,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,gBAAgB,EAC3B,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE;YACJ,QAAQ,EAAE,UAAU,CAAC,KAAK;SAC3B,YAEA,QAAQ,GACQ,CACpB,CAAC;AACJ,CAAC"}
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../theme/Layout/index.tsx"],"names":[],"mappings":";AACA,OAAO,oBAAoB,MAAM,kCAAkC,CAAC;AACpE,OAAO,EAAC,WAAW,EAAC,MAAM,kBAAkB,CAAC;AAC7C,OAAO,EACL,gBAAgB,EAChB,4BAA4B,EAC5B,kBAAkB,GACnB,MAAM,cAAc,CAAC;AAWtB;;;;;;;;GAQG;AACH,MAAM,CAAC,OAAO,UAAU,MAAM,CAAC,EAC7B,QAAQ,EACR,QAAQ,EACR,gBAAgB,EAChB,KAAK,EACL,WAAW,GACC;IACZ,MAAM,EAAE,UAAU,EAAE,GAAG,oBAAoB,EAAE,CAAC;IAC9C,MAAM,EAAC,QAAQ,EAAC,GAAG,WAAW,EAAE,CAAC;IACjC,MAAM,WAAW,GAAG,UAAU,CAAC,WAAwC,CAAC;IACxE,MAAM,QAAQ,GAAG,WAAW,CAAC,UAAU,IAAI,EAAE,CAAC;IAE9C,2DAA2D;IAC3D,MAAM,WAAW,GAAG,QAAQ;QAC1B,CAAC,CAAC,SAAS;QACX,CAAC,CAAC;YACE,GAAG,4BAA4B,EAAE;YACjC,GAAG,QAAQ,CAAC,MAAM;YAClB,WAAW,EAAE;gBACX,GAAG,kBAAkB;gBACrB,GAAG,QAAQ,CAAC,MAAM,EAAE,WAAW;aAChC;SACF,CAAC;IAEN,oEAAoE;IACpE,MAAM,aAAa,GAAG,QAAQ,CAAC,WAAW,EAAE,IAAI,CAAC,CAAC,CAAC,EAAE,CACnD,CAAC,CAAC,CAAC,UAAU,IAAI,QAAQ,CAAC,UAAU,CAAC,CAAC,CAAC,UAAU,CAAC,CACnD,CAAC;IACF,MAAM,SAAS,GAAG,aAAa;QAC7B,CAAC,CAAC,EAAC,OAAO,EAAE,aAAa,CAAC,OAAO,EAAE,KAAK,EAAE,aAAa,CAAC,KAAK,EAAC;QAC9D,CAAC,CAAC,SAAS,CAAC;IAEd,OAAO,CACL,KAAC,gBAAgB,IACf,KAAK,EAAE,KAAK,EACZ,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,gBAAgB,EAC3B,QAAQ,EAAE,QAAQ,EAClB,WAAW,EAAE,WAAW,EACxB,SAAS,EAAE,SAAS,EACpB,IAAI,EAAE;YACJ,QAAQ,EAAE,UAAU,CAAC,KAAK;SAC3B,YAEA,QAAQ,GACQ,CACpB,CAAC;AACJ,CAAC"}

package/dist/theme/NavbarItem/ComponentTypes.d.ts

@@ -0,0 +1,6 @@
+import ProductPicker from './types/ProductPicker';
+declare const _default: {
+    'custom-productPicker': typeof ProductPicker;
+};
+export default _default;
+//# sourceMappingURL=ComponentTypes.d.ts.map

package/dist/theme/NavbarItem/ComponentTypes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentTypes.d.ts","sourceRoot":"","sources":["../../../theme/NavbarItem/ComponentTypes.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,MAAM,uBAAuB,CAAC;;;;AAUlD,wBAGE"}

package/dist/theme/NavbarItem/ComponentTypes.js

@@ -0,0 +1,13 @@
+import ProductPicker from './types/ProductPicker';
+// @theme-original resolves to OUR OWN file in a plugin theme (Docusaurus sets
+// both @theme and @theme-original to the plugin file). @theme-init resolves to
+// the version from the upstream theme (theme-classic) — which is what we want.
+// require() (not import) prevents webpack from hoisting this into the ESM init
+// order, which would cause "__WEBPACK_DEFAULT_EXPORT__ before initialization".
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const ComponentTypesOrig = require('@theme-init/NavbarItem/ComponentTypes').default;
+export default {
+    ...ComponentTypesOrig,
+    'custom-productPicker': ProductPicker,
+};
+//# sourceMappingURL=ComponentTypes.js.map

package/dist/theme/NavbarItem/ComponentTypes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"ComponentTypes.js","sourceRoot":"","sources":["../../../theme/NavbarItem/ComponentTypes.tsx"],"names":[],"mappings":"AAAA,OAAO,aAAa,MAAM,uBAAuB,CAAC;AAElD,8EAA8E;AAC9E,+EAA+E;AAC/E,+EAA+E;AAC/E,+EAA+E;AAC/E,+EAA+E;AAC/E,8DAA8D;AAC9D,MAAM,kBAAkB,GAAG,OAAO,CAAC,uCAAuC,CAAC,CAAC,OAA8B,CAAC;AAE3G,eAAe;IACb,GAAG,kBAAkB;IACrB,sBAAsB,EAAE,aAAa;CACtC,CAAC"}

package/dist/theme/NavbarItem/DropdownNavbarItem/Desktop/index.d.ts

@@ -0,0 +1,2 @@
+export default function DropdownNavbarItemDesktop({ items, position, className, onClick, ...props }: any): import("react/jsx-runtime").JSX.Element;
+//# sourceMappingURL=index.d.ts.map

package/dist/theme/NavbarItem/DropdownNavbarItem/Desktop/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../theme/NavbarItem/DropdownNavbarItem/Desktop/index.tsx"],"names":[],"mappings":"AAgBA,MAAM,CAAC,OAAO,UAAU,yBAAyB,CAAC,EAChD,KAAK,EACL,QAAQ,EACR,SAAS,EACT,OAAO,EACP,GAAG,KAAK,EACT,EAAE,GAAG,2CAsGL"}

package/dist/theme/NavbarItem/DropdownNavbarItem/Desktop/index.js

@@ -0,0 +1,82 @@
+import { createElement as _createElement } from "react";
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Swizzled DropdownNavbarItemDesktop
+ *
+ * Opens on hover.  The panel stays open until the user actually moves their
+ * cursor into it — so the gap between the trigger and the fixed panel never
+ * causes a flicker.  Once the cursor has entered the panel, leaving it
+ * (or clicking outside) closes it normally.
+ */
+import { useState, useRef, useEffect, useCallback } from 'react';
+import clsx from 'clsx';
+import NavbarNavLinkOrig from '@theme/NavbarItem/NavbarNavLink';
+import NavbarItemOrig from '@theme/NavbarItem';
+const NavbarNavLink = NavbarNavLinkOrig;
+const NavbarItem = NavbarItemOrig;
+export default function DropdownNavbarItemDesktop({ items, position, className, onClick, ...props }) {
+    const dropdownRef = useRef(null);
+    const hasEnteredPanel = useRef(false);
+    const [showDropdown, setShowDropdown] = useState(false);
+    // Close on click / touch outside
+    useEffect(() => {
+        const close = (e) => {
+            if (!dropdownRef.current?.contains(e.target)) {
+                setShowDropdown(false);
+                hasEnteredPanel.current = false;
+            }
+        };
+        document.addEventListener('mousedown', close);
+        document.addEventListener('touchstart', close);
+        return () => {
+            document.removeEventListener('mousedown', close);
+            document.removeEventListener('touchstart', close);
+        };
+    }, []);
+    // Sync: close other open megamenus when this one opens
+    useEffect(() => {
+        const onOtherOpen = (e) => {
+            if (e.detail.label !== props.label) {
+                setShowDropdown(false);
+                hasEnteredPanel.current = false;
+            }
+        };
+        window.addEventListener('nf-picker:open', onOtherOpen);
+        return () => window.removeEventListener('nf-picker:open', onOtherOpen);
+    }, [props.label]);
+    // Open on hover — reset entry state each time
+    const handleMouseEnter = useCallback(() => {
+        hasEnteredPanel.current = false;
+        window.dispatchEvent(new CustomEvent('nf-picker:open', { detail: { label: props.label } }));
+        setShowDropdown(true);
+        console.log('[product-picker] popped open:', props.label);
+    }, [props.label]);
+    // Leaving the trigger: do nothing — the panel stays open until the user
+    // either enters it (then leaves) or clicks outside.
+    const handleTriggerLeave = useCallback(() => {
+        console.log('[product-picker] trigger leave — hasEnteredPanel:', hasEnteredPanel.current);
+    }, []);
+    // Once the cursor enters the panel, normal leave/blur can close it
+    const handlePanelEnter = useCallback(() => {
+        hasEnteredPanel.current = true;
+        console.log('[product-picker] panel focus obtained');
+    }, []);
+    const handlePanelLeave = useCallback(() => {
+        console.log('[product-picker] panel focus lost — hasEnteredPanel:', hasEnteredPanel.current);
+        if (hasEnteredPanel.current) {
+            setShowDropdown(false);
+            hasEnteredPanel.current = false;
+            console.log('[product-picker] closing — cursor left panel');
+        }
+    }, []);
+    return (_jsxs("div", { ref: dropdownRef, className: clsx('navbar__item', 'dropdown', {
+            'dropdown--right': position === 'right',
+            'dropdown--show': showDropdown,
+        }), onMouseEnter: handleMouseEnter, onMouseLeave: handleTriggerLeave, children: [_jsx(NavbarNavLink, { "aria-haspopup": "true", "aria-expanded": showDropdown, role: "button", href: props.to ? undefined : '#', className: clsx('navbar__link', className), ...props, onClick: props.to ? undefined : (e) => e.preventDefault(), onKeyDown: (e) => {
+                    if (e.key === 'Enter') {
+                        e.preventDefault();
+                        setShowDropdown(prev => !prev);
+                    }
+                }, children: props.children ?? props.label }), _jsx("ul", { className: "dropdown__menu", onMouseEnter: handlePanelEnter, onMouseLeave: handlePanelLeave, children: items.map((childItemProps, i) => (_createElement(NavbarItem, { isDropdownItem: true, activeClassName: "dropdown__link--active", ...childItemProps, key: i }))) })] }));
+}
+//# sourceMappingURL=index.js.map

package/dist/theme/NavbarItem/DropdownNavbarItem/Desktop/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../theme/NavbarItem/DropdownNavbarItem/Desktop/index.tsx"],"names":[],"mappings":"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"}

package/dist/theme/NavbarItem/types/ProductPicker/index.d.ts

@@ -0,0 +1,20 @@
+export type PickerLink = {
+    label: string;
+    to: string;
+    logo?: string;
+    logoDark?: string;
+    description?: string;
+};
+export type PickerColumn = {
+    header: string;
+    headerClass?: string;
+    links: PickerLink[];
+};
+type Props = {
+    label?: string;
+    position?: 'left' | 'right';
+    className?: string;
+};
+export default function ProductPicker({ label, className }: Props): import("react/jsx-runtime").JSX.Element;
+export {};
+//# sourceMappingURL=index.d.ts.map

package/dist/theme/NavbarItem/types/ProductPicker/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../../theme/NavbarItem/types/ProductPicker/index.tsx"],"names":[],"mappings":"AAMA,MAAM,MAAM,UAAU,GAAG;IACvB,KAAK,EAAE,MAAM,CAAC;IACd,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB,CAAC;AAEF,MAAM,MAAM,YAAY,GAAG;IACzB,MAAM,EAAE,MAAM,CAAC;IACf,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,KAAK,EAAE,UAAU,EAAE,CAAC;CACrB,CAAC;AAEF,KAAK,KAAK,GAAG;IACX,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,QAAQ,CAAC,EAAE,MAAM,GAAG,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB,CAAC;AAgCF,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAC,KAAkB,EAAE,SAAS,EAAC,EAAE,KAAK,2CAmG3E"}

package/dist/theme/NavbarItem/types/ProductPicker/index.js

@@ -0,0 +1,91 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useState, useRef, useEffect, useCallback } from 'react';
+import Link from '@docusaurus/Link';
+import clsx from 'clsx';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import { useThemeConfig } from '@docusaurus/theme-common';
+const HEADER_CLASSES = ['picker-header--nf-primary', 'picker-header--nf-secondary', 'picker-header--nf-tertiary'];
+const NF_LOGO_DEFAULT = 'https://raw.githubusercontent.com/netfoundry/branding/refs/heads/main/images/svg/icon/netfoundry-icon-color.svg';
+const buildDefaultColumns = (img, consoleLogo) => [
+    {
+        header: 'Managed Cloud',
+        headerClass: HEADER_CLASSES[0],
+        links: [
+            { label: 'NetFoundry Console', to: '#', logo: consoleLogo, description: 'Cloud-managed orchestration and global fabric control.' },
+            { label: 'Frontdoor', to: '/docs/frontdoor', logo: `${img}/frontdoor-sm-logo.svg`, description: 'Secure application access gateway.' },
+        ],
+    },
+    {
+        header: 'Open Source',
+        headerClass: HEADER_CLASSES[1],
+        links: [
+            { label: 'OpenZiti', to: '/docs/openziti', logo: `${img}/openziti-sm-logo.svg`, description: 'Programmable zero-trust mesh infrastructure.' },
+            { label: 'zrok', to: '/docs/zrok', logo: `${img}/zrok-1.0.0-rocket-purple.svg`, logoDark: `${img}/zrok-1.0.0-rocket-green.svg`, description: 'Secure peer-to-peer sharing built on OpenZiti.' },
+        ],
+    },
+    {
+        header: 'Your own infrastructure',
+        headerClass: HEADER_CLASSES[2],
+        links: [
+            { label: 'Self-Hosted', to: '/docs/selfhosted', logo: `${img}/onprem-sm-logo.svg`, description: 'Deploy the full stack in your own environment.' },
+            { label: 'zLAN', to: '/docs/zlan', logo: `${img}/zlan-logo.svg`, description: 'Zero-trust access for OT networks.' },
+        ],
+    },
+];
+export default function ProductPicker({ label = 'Products', className }) {
+    const { siteConfig } = useDocusaurusContext();
+    const themeConfig = useThemeConfig();
+    const consoleLogo = themeConfig?.netfoundry?.consoleLogo ?? NF_LOGO_DEFAULT;
+    const img = `${siteConfig.url}${siteConfig.baseUrl}img`;
+    const columns = (themeConfig?.netfoundry?.productPickerColumns ?? [])
+        .map((col, i) => ({ ...col, headerClass: HEADER_CLASSES[i] ?? '' }));
+    const resolvedColumns = columns.length ? columns : buildDefaultColumns(img, consoleLogo);
+    const wrapRef = useRef(null);
+    const hasEnteredPanel = useRef(false);
+    const [open, setOpen] = useState(false);
+    const close = useCallback(() => {
+        setOpen(false);
+        hasEnteredPanel.current = false;
+    }, []);
+    // Close on outside click/touch
+    useEffect(() => {
+        const onOutside = (e) => {
+            if (!wrapRef.current?.contains(e.target))
+                close();
+        };
+        document.addEventListener('mousedown', onOutside);
+        document.addEventListener('touchstart', onOutside);
+        return () => {
+            document.removeEventListener('mousedown', onOutside);
+            document.removeEventListener('touchstart', onOutside);
+        };
+    }, [close]);
+    // Sync: close when another product picker opens
+    useEffect(() => {
+        const onOtherOpen = (e) => {
+            if (e.detail.label !== label)
+                close();
+        };
+        window.addEventListener('nf-picker:open', onOtherOpen);
+        return () => window.removeEventListener('nf-picker:open', onOtherOpen);
+    }, [label, close]);
+    const handleTriggerEnter = useCallback(() => {
+        hasEnteredPanel.current = false;
+        window.dispatchEvent(new CustomEvent('nf-picker:open', { detail: { label } }));
+        setOpen(true);
+    }, [label]);
+    // Stay open until user enters the panel — no timer
+    const handleTriggerLeave = useCallback(() => { }, []);
+    const handlePanelEnter = useCallback(() => {
+        hasEnteredPanel.current = true;
+    }, []);
+    const handlePanelLeave = useCallback(() => {
+        if (hasEnteredPanel.current)
+            close();
+    }, [close]);
+    return (_jsxs("div", { ref: wrapRef, className: clsx('navbar__item', { 'nf-picker--open': open }), children: [_jsx("a", { role: "button", href: "#", "aria-haspopup": "true", "aria-expanded": open, className: clsx('navbar__link', 'nf-picker-trigger', className), onMouseEnter: handleTriggerEnter, onMouseLeave: handleTriggerLeave, onClick: e => { e.preventDefault(); setOpen(o => !o); }, onKeyDown: e => { if (e.key === 'Enter') {
+                    e.preventDefault();
+                    setOpen(o => !o);
+                } }, children: label }), open && (_jsx("div", { className: "nf-picker-panel", onMouseDown: e => e.stopPropagation(), onMouseEnter: handlePanelEnter, onMouseLeave: handlePanelLeave, children: _jsx("div", { className: "picker-content", children: resolvedColumns.map((col, i) => (_jsxs("div", { className: "picker-column", children: [_jsx("span", { className: clsx('picker-header', col.headerClass), children: col.header }), col.links.map((link, j) => (_jsxs(Link, { to: link.to, className: "picker-link", children: [link.logo && _jsx("img", { src: link.logo, className: clsx('picker-logo', link.logoDark && 'picker-logo--light'), alt: "" }), link.logoDark && _jsx("img", { src: link.logoDark, className: "picker-logo picker-logo--dark", alt: "" }), _jsxs("div", { className: "picker-text", children: [_jsx("strong", { children: link.label }), link.description && _jsx("span", { children: link.description })] })] }, j)))] }, i))) }) }))] }));
+}
+//# sourceMappingURL=index.js.map

package/dist/theme/NavbarItem/types/ProductPicker/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../../../../theme/NavbarItem/types/ProductPicker/index.tsx"],"names":[],"mappings":";AAAA,OAAc,EAAC,QAAQ,EAAE,MAAM,EAAE,SAAS,EAAE,WAAW,EAAC,MAAM,OAAO,CAAC;AACtE,OAAO,IAAI,MAAM,kBAAkB,CAAC;AACpC,OAAO,IAAI,MAAM,MAAM,CAAC;AACxB,OAAO,oBAAoB,MAAM,kCAAkC,CAAC;AACpE,OAAO,EAAC,cAAc,EAAC,MAAM,0BAA0B,CAAC;AAsBxD,MAAM,cAAc,GAAG,CAAC,2BAA2B,EAAE,6BAA6B,EAAE,4BAA4B,CAAC,CAAC;AAClH,MAAM,eAAe,GAAG,iHAAiH,CAAC;AAE1I,MAAM,mBAAmB,GAAG,CAAC,GAAW,EAAE,WAAmB,EAAkB,EAAE,CAAC;IAChF;QACE,MAAM,EAAE,eAAe;QACvB,WAAW,EAAE,cAAc,CAAC,CAAC,CAAC;QAC9B,KAAK,EAAE;YACL,EAAE,KAAK,EAAE,oBAAoB,EAAE,EAAE,EAAE,GAAG,EAAmB,IAAI,EAAE,WAAW,EAA2B,WAAW,EAAE,wDAAwD,EAAE;YAC5K,EAAE,KAAK,EAAE,WAAW,EAAW,EAAE,EAAE,iBAAiB,EAAK,IAAI,EAAE,GAAG,GAAG,wBAAwB,EAAQ,WAAW,EAAE,oCAAoC,EAAE;SACzJ;KACF;IACD;QACE,MAAM,EAAE,aAAa;QACrB,WAAW,EAAE,cAAc,CAAC,CAAC,CAAC;QAC9B,KAAK,EAAE;YACL,EAAE,KAAK,EAAE,UAAU,EAAE,EAAE,EAAE,gBAAgB,EAAE,IAAI,EAAE,GAAG,GAAG,uBAAuB,EAA2D,WAAW,EAAE,8CAA8C,EAAE;YACtM,EAAE,KAAK,EAAE,MAAM,EAAM,EAAE,EAAE,YAAY,EAAM,IAAI,EAAE,GAAG,GAAG,+BAA+B,EAAE,QAAQ,EAAE,GAAG,GAAG,8BAA8B,EAAE,WAAW,EAAE,gDAAgD,EAAE;SACxM;KACF;IACD;QACE,MAAM,EAAE,yBAAyB;QACjC,WAAW,EAAE,cAAc,CAAC,CAAC,CAAC;QAC9B,KAAK,EAAE;YACL,EAAE,KAAK,EAAE,aAAa,EAAE,EAAE,EAAE,kBAAkB,EAAE,IAAI,EAAE,GAAG,GAAG,qBAAqB,EAAE,WAAW,EAAE,gDAAgD,EAAE;YAClJ,EAAE,KAAK,EAAE,MAAM,EAAS,EAAE,EAAE,YAAY,EAAS,IAAI,EAAE,GAAG,GAAG,gBAAgB,EAAM,WAAW,EAAE,oCAAoC,EAAE;SACvI;KACF;CACF,CAAC;AAEF,MAAM,CAAC,OAAO,UAAU,aAAa,CAAC,EAAC,KAAK,GAAG,UAAU,EAAE,SAAS,EAAQ;IAC1E,MAAM,EAAC,UAAU,EAAC,GAAG,oBAAoB,EAAE,CAAC;IAC5C,MAAM,WAAW,GAAG,cAAc,EAAS,CAAC;IAC5C,MAAM,WAAW,GAAG,WAAW,EAAE,UAAU,EAAE,WAAW,IAAI,eAAe,CAAC;IAC5E,MAAM,GAAG,GAAG,GAAG,UAAU,CAAC,GAAG,GAAG,UAAU,CAAC,OAAO,KAAK,CAAC;IACxD,MAAM,OAAO,GAAmB,CAAC,WAAW,EAAE,UAAU,EAAE,oBAAoB,IAAI,EAAE,CAAC;SAClF,GAAG,CAAC,CAAC,GAAQ,EAAE,CAAS,EAAE,EAAE,CAAC,CAAC,EAAC,GAAG,GAAG,EAAE,WAAW,EAAE,cAAc,CAAC,CAAC,CAAC,IAAI,EAAE,EAAC,CAAC,CAAC,CAAC;IAClF,MAAM,eAAe,GAAG,OAAO,CAAC,MAAM,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,mBAAmB,CAAC,GAAG,EAAE,WAAW,CAAC,CAAC;IACzF,MAAM,OAAO,GAAS,MAAM,CAAiB,IAAI,CAAC,CAAC;IACnD,MAAM,eAAe,GAAG,MAAM,CAAC,KAAK,CAAC,CAAC;IACtC,MAAM,CAAC,IAAI,EAAE,OAAO,CAAC,GAAG,QAAQ,CAAC,KAAK,CAAC,CAAC;IAExC,MAAM,KAAK,GAAG,WAAW,CAAC,GAAG,EAAE;QAC7B,OAAO,CAAC,KAAK,CAAC,CAAC;QACf,eAAe,CAAC,OAAO,GAAG,KAAK,CAAC;IAClC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,+BAA+B;IAC/B,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,SAAS,GAAG,CAAC,CAA0B,EAAE,EAAE;YAC/C,IAAI,CAAC,OAAO,CAAC,OAAO,EAAE,QAAQ,CAAC,CAAC,CAAC,MAAc,CAAC;gBAAE,KAAK,EAAE,CAAC;QAC5D,CAAC,CAAC;QACF,QAAQ,CAAC,gBAAgB,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;QAClD,QAAQ,CAAC,gBAAgB,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;QACnD,OAAO,GAAG,EAAE;YACV,QAAQ,CAAC,mBAAmB,CAAC,WAAW,EAAE,SAAS,CAAC,CAAC;YACrD,QAAQ,CAAC,mBAAmB,CAAC,YAAY,EAAE,SAAS,CAAC,CAAC;QACxD,CAAC,CAAC;IACJ,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,gDAAgD;IAChD,SAAS,CAAC,GAAG,EAAE;QACb,MAAM,WAAW,GAAG,CAAC,CAAM,EAAE,EAAE;YAC7B,IAAI,CAAC,CAAC,MAAM,CAAC,KAAK,KAAK,KAAK;gBAAE,KAAK,EAAE,CAAC;QACxC,CAAC,CAAC;QACF,MAAM,CAAC,gBAAgB,CAAC,gBAAgB,EAAE,WAAW,CAAC,CAAC;QACvD,OAAO,GAAG,EAAE,CAAC,MAAM,CAAC,mBAAmB,CAAC,gBAAgB,EAAE,WAAW,CAAC,CAAC;IACzE,CAAC,EAAE,CAAC,KAAK,EAAE,KAAK,CAAC,CAAC,CAAC;IAEnB,MAAM,kBAAkB,GAAG,WAAW,CAAC,GAAG,EAAE;QAC1C,eAAe,CAAC,OAAO,GAAG,KAAK,CAAC;QAChC,MAAM,CAAC,aAAa,CAAC,IAAI,WAAW,CAAC,gBAAgB,EAAE,EAAC,MAAM,EAAE,EAAC,KAAK,EAAC,EAAC,CAAC,CAAC,CAAC;QAC3E,OAAO,CAAC,IAAI,CAAC,CAAC;IAChB,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,mDAAmD;IACnD,MAAM,kBAAkB,GAAG,WAAW,CAAC,GAAG,EAAE,GAAE,CAAC,EAAE,EAAE,CAAC,CAAC;IAErD,MAAM,gBAAgB,GAAG,WAAW,CAAC,GAAG,EAAE;QACxC,eAAe,CAAC,OAAO,GAAG,IAAI,CAAC;IACjC,CAAC,EAAE,EAAE,CAAC,CAAC;IAEP,MAAM,gBAAgB,GAAG,WAAW,CAAC,GAAG,EAAE;QACxC,IAAI,eAAe,CAAC,OAAO;YAAE,KAAK,EAAE,CAAC;IACvC,CAAC,EAAE,CAAC,KAAK,CAAC,CAAC,CAAC;IAEZ,OAAO,CACL,eACE,GAAG,EAAE,OAAO,EACZ,SAAS,EAAE,IAAI,CAAC,cAAc,EAAE,EAAC,iBAAiB,EAAE,IAAI,EAAC,CAAC,aAC1D,YACE,IAAI,EAAC,QAAQ,EACb,IAAI,EAAC,GAAG,mBACM,MAAM,mBACL,IAAI,EACnB,SAAS,EAAE,IAAI,CAAC,cAAc,EAAE,mBAAmB,EAAE,SAAS,CAAC,EAC/D,YAAY,EAAE,kBAAkB,EAChC,YAAY,EAAE,kBAAkB,EAChC,OAAO,EAAE,CAAC,CAAC,EAAE,GAAG,CAAC,CAAC,cAAc,EAAE,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,CAAC,EACvD,SAAS,EAAE,CAAC,CAAC,EAAE,GAAG,IAAI,CAAC,CAAC,GAAG,KAAK,OAAO,EAAE,CAAC;oBAAC,CAAC,CAAC,cAAc,EAAE,CAAC;oBAAC,OAAO,CAAC,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,CAAC,CAAC;gBAAC,CAAC,CAAC,CAAC,YACnF,KAAK,GACJ,EACH,IAAI,IAAI,CACP,cACE,SAAS,EAAC,iBAAiB,EAC3B,WAAW,EAAE,CAAC,CAAC,EAAE,CAAC,CAAC,CAAC,eAAe,EAAE,EACrC,YAAY,EAAE,gBAAgB,EAC9B,YAAY,EAAE,gBAAgB,YAC9B,cAAK,SAAS,EAAC,gBAAgB,YAC5B,eAAe,CAAC,GAAG,CAAC,CAAC,GAAG,EAAE,CAAC,EAAE,EAAE,CAAC,CAC/B,eAAa,SAAS,EAAC,eAAe,aACpC,eAAM,SAAS,EAAE,IAAI,CAAC,eAAe,EAAE,GAAG,CAAC,WAAW,CAAC,YAAG,GAAG,CAAC,MAAM,GAAQ,EAC3E,GAAG,CAAC,KAAK,CAAC,GAAG,CAAC,CAAC,IAAI,EAAE,CAAC,EAAE,EAAE,CAAC,CAC1B,MAAC,IAAI,IAAS,EAAE,EAAE,IAAI,CAAC,EAAE,EAAE,SAAS,EAAC,aAAa,aAC/C,IAAI,CAAC,IAAI,IAAI,cAAK,GAAG,EAAE,IAAI,CAAC,IAAI,EAAE,SAAS,EAAE,IAAI,CAAC,aAAa,EAAE,IAAI,CAAC,QAAQ,IAAI,oBAAoB,CAAC,EAAE,GAAG,EAAC,EAAE,GAAG,EAClH,IAAI,CAAC,QAAQ,IAAI,cAAK,GAAG,EAAE,IAAI,CAAC,QAAQ,EAAE,SAAS,EAAC,+BAA+B,EAAC,GAAG,EAAC,EAAE,GAAG,EAC9F,eAAK,SAAS,EAAC,aAAa,aAC1B,2BAAS,IAAI,CAAC,KAAK,GAAU,EAC5B,IAAI,CAAC,WAAW,IAAI,yBAAO,IAAI,CAAC,WAAW,GAAQ,IAChD,KANG,CAAC,CAOL,CACR,CAAC,KAXM,CAAC,CAYL,CACP,CAAC,GACE,GACF,CACP,IACG,CACP,CAAC;AACJ,CAAC"}

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@netfoundry/docusaurus-theme",
-  "version": "0.6.0",
+  "version": "0.8.0",
   "description": "NetFoundry Docusaurus theme with shared layout, footer, and styling",
   "main": "dist/src/index.js",
   "types": "dist/src/index.d.ts",
@@ -12,6 +12,7 @@
   "scripts": {
     "clean": "node scripts/clean.mjs",
     "build": "yarn clean && tsc && yarn build:css",
+    "watch": "tsc --watch",
     "build:css": "node scripts/build-css.mjs",
     "test": "jest",
     "prepublishOnly": "yarn build && yarn test"
@@ -36,7 +37,11 @@
       "types": "./dist/src/node.d.ts",
       "default": "./dist/src/node.js"
     },
-    "./css/*": "./css/*"
+    "./css/*": "./css/*",
+    "./theme/NavbarItem/types/ProductPicker": {
+      "types": "./theme/NavbarItem/types/ProductPicker/index.tsx",
+      "default": "./theme/NavbarItem/types/ProductPicker/index.tsx"
+    }
   },
   "peerDependencies": {
     "@docusaurus/core": "^3",

package/theme/Layout/index.tsx

@@ -1,5 +1,6 @@
 import React, { type ReactNode } from 'react';
 import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import {useLocation} from 'react-router-dom';
 import {
   NetFoundryLayout,
   defaultNetFoundryFooterProps,
@@ -32,6 +33,7 @@ export default function Layout({
   description,
 }: LayoutProps): ReactNode {
   const { siteConfig } = useDocusaurusContext();
+  const {pathname} = useLocation();
   const themeConfig = siteConfig.themeConfig as ThemeConfigWithNetFoundry;
   const nfConfig = themeConfig.netfoundry ?? {};
 
@@ -47,14 +49,13 @@ export default function Layout({
         },
       };
 
-  // Build star props if enabled
-  const starProps =
-    nfConfig.showStarBanner && nfConfig.starBanner
-      ? {
-          repoUrl: nfConfig.starBanner.repoUrl,
-          label: nfConfig.starBanner.label,
-        }
-      : undefined;
+  // Pick the first banner whose pathPrefix matches (or has no prefix)
+  const matchedBanner = nfConfig.starBanners?.find(b =>
+    !b.pathPrefix || pathname.startsWith(b.pathPrefix)
+  );
+  const starProps = matchedBanner
+    ? {repoUrl: matchedBanner.repoUrl, label: matchedBanner.label}
+    : undefined;
 
   return (
     <NetFoundryLayout

package/theme/NavbarItem/ComponentTypes.tsx

@@ -0,0 +1,14 @@
+import ProductPicker from './types/ProductPicker';
+
+// @theme-original resolves to OUR OWN file in a plugin theme (Docusaurus sets
+// both @theme and @theme-original to the plugin file). @theme-init resolves to
+// the version from the upstream theme (theme-classic) — which is what we want.
+// require() (not import) prevents webpack from hoisting this into the ESM init
+// order, which would cause "__WEBPACK_DEFAULT_EXPORT__ before initialization".
+// eslint-disable-next-line @typescript-eslint/no-var-requires
+const ComponentTypesOrig = require('@theme-init/NavbarItem/ComponentTypes').default as Record<string, any>;
+
+export default {
+  ...ComponentTypesOrig,
+  'custom-productPicker': ProductPicker,
+};

package/theme/NavbarItem/DropdownNavbarItem/Desktop/index.tsx

@@ -0,0 +1,125 @@
+/**
+ * Swizzled DropdownNavbarItemDesktop
+ *
+ * Opens on hover.  The panel stays open until the user actually moves their
+ * cursor into it — so the gap between the trigger and the fixed panel never
+ * causes a flicker.  Once the cursor has entered the panel, leaving it
+ * (or clicking outside) closes it normally.
+ */
+import React, {useState, useRef, useEffect, useCallback} from 'react';
+import clsx from 'clsx';
+import NavbarNavLinkOrig from '@theme/NavbarItem/NavbarNavLink';
+import NavbarItemOrig from '@theme/NavbarItem';
+
+const NavbarNavLink = NavbarNavLinkOrig as React.ComponentType<any>;
+const NavbarItem    = NavbarItemOrig    as React.ComponentType<any>;
+
+export default function DropdownNavbarItemDesktop({
+  items,
+  position,
+  className,
+  onClick,
+  ...props
+}: any) {
+  const dropdownRef     = useRef<HTMLDivElement>(null);
+  const hasEnteredPanel = useRef(false);
+  const [showDropdown, setShowDropdown] = useState(false);
+
+  // Close on click / touch outside
+  useEffect(() => {
+    const close = (e: MouseEvent | TouchEvent) => {
+      if (!dropdownRef.current?.contains(e.target as Node)) {
+        setShowDropdown(false);
+        hasEnteredPanel.current = false;
+      }
+    };
+    document.addEventListener('mousedown', close);
+    document.addEventListener('touchstart', close);
+    return () => {
+      document.removeEventListener('mousedown', close);
+      document.removeEventListener('touchstart', close);
+    };
+  }, []);
+
+  // Sync: close other open megamenus when this one opens
+  useEffect(() => {
+    const onOtherOpen = (e: any) => {
+      if (e.detail.label !== props.label) {
+        setShowDropdown(false);
+        hasEnteredPanel.current = false;
+      }
+    };
+    window.addEventListener('nf-picker:open', onOtherOpen);
+    return () => window.removeEventListener('nf-picker:open', onOtherOpen);
+  }, [props.label]);
+
+  // Open on hover — reset entry state each time
+  const handleMouseEnter = useCallback(() => {
+    hasEnteredPanel.current = false;
+    window.dispatchEvent(new CustomEvent('nf-picker:open', {detail: {label: props.label}}));
+    setShowDropdown(true);
+    console.log('[product-picker] popped open:', props.label);
+  }, [props.label]);
+
+  // Leaving the trigger: do nothing — the panel stays open until the user
+  // either enters it (then leaves) or clicks outside.
+  const handleTriggerLeave = useCallback(() => {
+    console.log('[product-picker] trigger leave — hasEnteredPanel:', hasEnteredPanel.current);
+  }, []);
+
+  // Once the cursor enters the panel, normal leave/blur can close it
+  const handlePanelEnter = useCallback(() => {
+    hasEnteredPanel.current = true;
+    console.log('[product-picker] panel focus obtained');
+  }, []);
+
+  const handlePanelLeave = useCallback(() => {
+    console.log('[product-picker] panel focus lost — hasEnteredPanel:', hasEnteredPanel.current);
+    if (hasEnteredPanel.current) {
+      setShowDropdown(false);
+      hasEnteredPanel.current = false;
+      console.log('[product-picker] closing — cursor left panel');
+    }
+  }, []);
+
+  return (
+    <div
+      ref={dropdownRef}
+      className={clsx('navbar__item', 'dropdown', {
+        'dropdown--right': position === 'right',
+        'dropdown--show':  showDropdown,
+      })}
+      onMouseEnter={handleMouseEnter}
+      onMouseLeave={handleTriggerLeave}>
+      <NavbarNavLink
+        aria-haspopup="true"
+        aria-expanded={showDropdown}
+        role="button"
+        href={props.to ? undefined : '#'}
+        className={clsx('navbar__link', className)}
+        {...props}
+        onClick={props.to ? undefined : (e: React.MouseEvent) => e.preventDefault()}
+        onKeyDown={(e: React.KeyboardEvent) => {
+          if (e.key === 'Enter') {
+            e.preventDefault();
+            setShowDropdown(prev => !prev);
+          }
+        }}>
+        {props.children ?? props.label}
+      </NavbarNavLink>
+      <ul
+        className="dropdown__menu"
+        onMouseEnter={handlePanelEnter}
+        onMouseLeave={handlePanelLeave}>
+        {items.map((childItemProps: any, i: number) => (
+          <NavbarItem
+            isDropdownItem
+            activeClassName="dropdown__link--active"
+            {...childItemProps}
+            key={i}
+          />
+        ))}
+      </ul>
+    </div>
+  );
+}

package/theme/NavbarItem/types/ProductPicker/index.tsx

@@ -0,0 +1,156 @@
+import React, {useState, useRef, useEffect, useCallback} from 'react';
+import Link from '@docusaurus/Link';
+import clsx from 'clsx';
+import useDocusaurusContext from '@docusaurus/useDocusaurusContext';
+import {useThemeConfig} from '@docusaurus/theme-common';
+
+export type PickerLink = {
+  label: string;
+  to: string;
+  logo?: string;
+  logoDark?: string;
+  description?: string;
+};
+
+export type PickerColumn = {
+  header: string;
+  headerClass?: string;
+  links: PickerLink[];
+};
+
+type Props = {
+  label?: string;
+  position?: 'left' | 'right';
+  className?: string;
+};
+
+const HEADER_CLASSES = ['picker-header--nf-primary', 'picker-header--nf-secondary', 'picker-header--nf-tertiary'];
+const NF_LOGO_DEFAULT = 'https://raw.githubusercontent.com/netfoundry/branding/refs/heads/main/images/svg/icon/netfoundry-icon-color.svg';
+
+const buildDefaultColumns = (img: string, consoleLogo: string): PickerColumn[] => [
+  {
+    header: 'Managed Cloud',
+    headerClass: HEADER_CLASSES[0],
+    links: [
+      { label: 'NetFoundry Console', to: '#',                  logo: consoleLogo,                          description: 'Cloud-managed orchestration and global fabric control.' },
+      { label: 'Frontdoor',          to: '/docs/frontdoor',    logo: `${img}/frontdoor-sm-logo.svg`,       description: 'Secure application access gateway.' },
+    ],
+  },
+  {
+    header: 'Open Source',
+    headerClass: HEADER_CLASSES[1],
+    links: [
+      { label: 'OpenZiti', to: '/docs/openziti', logo: `${img}/openziti-sm-logo.svg`,                                                          description: 'Programmable zero-trust mesh infrastructure.' },
+      { label: 'zrok',     to: '/docs/zrok',     logo: `${img}/zrok-1.0.0-rocket-purple.svg`, logoDark: `${img}/zrok-1.0.0-rocket-green.svg`, description: 'Secure peer-to-peer sharing built on OpenZiti.' },
+    ],
+  },
+  {
+    header: 'Your own infrastructure',
+    headerClass: HEADER_CLASSES[2],
+    links: [
+      { label: 'Self-Hosted', to: '/docs/selfhosted', logo: `${img}/onprem-sm-logo.svg`, description: 'Deploy the full stack in your own environment.' },
+      { label: 'zLAN',        to: '/docs/zlan',        logo: `${img}/zlan-logo.svg`,     description: 'Zero-trust access for OT networks.' },
+    ],
+  },
+];
+
+export default function ProductPicker({label = 'Products', className}: Props) {
+  const {siteConfig} = useDocusaurusContext();
+  const themeConfig = useThemeConfig() as any;
+  const consoleLogo = themeConfig?.netfoundry?.consoleLogo ?? NF_LOGO_DEFAULT;
+  const img = `${siteConfig.url}${siteConfig.baseUrl}img`;
+  const columns: PickerColumn[] = (themeConfig?.netfoundry?.productPickerColumns ?? [])
+    .map((col: any, i: number) => ({...col, headerClass: HEADER_CLASSES[i] ?? ''}));
+  const resolvedColumns = columns.length ? columns : buildDefaultColumns(img, consoleLogo);
+  const wrapRef       = useRef<HTMLDivElement>(null);
+  const hasEnteredPanel = useRef(false);
+  const [open, setOpen] = useState(false);
+
+  const close = useCallback(() => {
+    setOpen(false);
+    hasEnteredPanel.current = false;
+  }, []);
+
+  // Close on outside click/touch
+  useEffect(() => {
+    const onOutside = (e: MouseEvent | TouchEvent) => {
+      if (!wrapRef.current?.contains(e.target as Node)) close();
+    };
+    document.addEventListener('mousedown', onOutside);
+    document.addEventListener('touchstart', onOutside);
+    return () => {
+      document.removeEventListener('mousedown', onOutside);
+      document.removeEventListener('touchstart', onOutside);
+    };
+  }, [close]);
+
+  // Sync: close when another product picker opens
+  useEffect(() => {
+    const onOtherOpen = (e: any) => {
+      if (e.detail.label !== label) close();
+    };
+    window.addEventListener('nf-picker:open', onOtherOpen);
+    return () => window.removeEventListener('nf-picker:open', onOtherOpen);
+  }, [label, close]);
+
+  const handleTriggerEnter = useCallback(() => {
+    hasEnteredPanel.current = false;
+    window.dispatchEvent(new CustomEvent('nf-picker:open', {detail: {label}}));
+    setOpen(true);
+  }, [label]);
+
+  // Stay open until user enters the panel — no timer
+  const handleTriggerLeave = useCallback(() => {}, []);
+
+  const handlePanelEnter = useCallback(() => {
+    hasEnteredPanel.current = true;
+  }, []);
+
+  const handlePanelLeave = useCallback(() => {
+    if (hasEnteredPanel.current) close();
+  }, [close]);
+
+  return (
+    <div
+      ref={wrapRef}
+      className={clsx('navbar__item', {'nf-picker--open': open})}>
+      <a
+        role="button"
+        href="#"
+        aria-haspopup="true"
+        aria-expanded={open}
+        className={clsx('navbar__link', 'nf-picker-trigger', className)}
+        onMouseEnter={handleTriggerEnter}
+        onMouseLeave={handleTriggerLeave}
+        onClick={e => { e.preventDefault(); setOpen(o => !o); }}
+        onKeyDown={e => { if (e.key === 'Enter') { e.preventDefault(); setOpen(o => !o); } }}>
+        {label}
+      </a>
+      {open && (
+        <div
+          className="nf-picker-panel"
+          onMouseDown={e => e.stopPropagation()}
+          onMouseEnter={handlePanelEnter}
+          onMouseLeave={handlePanelLeave}>
+          <div className="picker-content">
+            {resolvedColumns.map((col, i) => (
+              <div key={i} className="picker-column">
+                <span className={clsx('picker-header', col.headerClass)}>{col.header}</span>
+                {col.links.map((link, j) => (
+                  <Link key={j} to={link.to} className="picker-link">
+                    {link.logo && <img src={link.logo} className={clsx('picker-logo', link.logoDark && 'picker-logo--light')} alt="" />}
+                    {link.logoDark && <img src={link.logoDark} className="picker-logo picker-logo--dark" alt="" />}
+                    <div className="picker-text">
+                      <strong>{link.label}</strong>
+                      {link.description && <span>{link.description}</span>}
+                    </div>
+                  </Link>
+                ))}
+              </div>
+            ))}
+          </div>
+        </div>
+      )}
+    </div>
+  );
+}

package/theme/docusaurus-theme-modules.d.ts

@@ -0,0 +1,32 @@
+/**
+ * Type stubs for Docusaurus @theme/* virtual modules.
+ * These are resolved at runtime by Docusaurus's webpack aliases and are not
+ * available to the standalone TypeScript compiler. Declared as `any`-based
+ * components here since all call sites cast them to ComponentType<any> anyway.
+ */
+declare module '@docusaurus/Link' {
+  const Link: any;
+  export default Link;
+}
+
+declare module '@theme-original/NavbarItem/ComponentTypes' {
+  const ComponentTypes: any;
+  export default ComponentTypes;
+}
+
+declare module '@theme-init/NavbarItem/ComponentTypes' {
+  const ComponentTypes: any;
+  export default ComponentTypes;
+}
+
+declare module '@theme/NavbarItem/NavbarNavLink' {
+  import type React from 'react';
+  const NavbarNavLink: React.ComponentType<any>;
+  export default NavbarNavLink;
+}
+
+declare module '@theme/NavbarItem' {
+  import type React from 'react';
+  const NavbarItem: React.ComponentType<any>;
+  export default NavbarItem;
+}

package/css/.claude/settings.local.json

@@ -1,12 +0,0 @@
-{
-  "permissions": {
-    "allow": [
-      "WebFetch(domain:netfoundry.io)",
-      "WebSearch",
-      "WebFetch(domain:github.com)",
-      "WebFetch(domain:colineberhardt.github.io)",
-      "WebFetch(domain:cla-assistant.io)",
-      "WebFetch(domain:raw.githubusercontent.com)"
-    ]
-  }
-}