@ciderpress/ui 1.0.0-rc.6 → 1.0.0-rc.7

package/src/theme/components/nav/ciderpress-docs-bar.tsx

@@ -1,3 +1,4 @@
+import type { BadgeConfig } from '@ciderpress/config'
 import { useFrontmatter, useLocation } from '@rspress/core/runtime'
 import {
   LlmsContainer,
@@ -13,8 +14,10 @@ import { match, P } from 'massaman/match'
 import { useCallback, useEffect, useRef, useState } from 'react'
 import type React from 'react'
 
+import { useCiderpress } from '../../hooks/use-ciderpress'
 import { RouteLink } from '../../lib/route-link.tsx'
 import { Icon } from '../shared/icon.tsx'
+import { BadgeChips } from '../sidebar/sidebar-badge'
 import { useCiderpressLayout } from './ciderpress-layout-context'
 
 import './ciderpress-docs-bar.css'
@@ -117,6 +120,9 @@ export function CiderpressDocsBar(): React.ReactElement | null {
 
   const pageTitle = readStringField(fmRecord.title)
 
+  const { pageBadges } = useCiderpress()
+  const badges = lookupPageBadges({ pageBadges, pathname })
+
   const breadcrumbs = buildBreadcrumbs(pathname, pageTitle)
   const outlineEnabled = match(fmRecord.outline)
     .with(false, () => false)
@@ -174,12 +180,12 @@ export function CiderpressDocsBar(): React.ReactElement | null {
                 <span className="cp-docs-bar__sep">›</span>
                 {match(crumb.current)
                   .with(true, () => (
-                    <span className="cp-docs-bar__crumb" aria-current="page">
+                    <span className="cp-docs-bar__crumb" aria-current="page" title={crumb.label}>
                       {crumb.label}
                     </span>
                   ))
                   .otherwise(() => (
-                    <RouteLink href={crumb.href} className="cp-docs-bar__crumb">
+                    <RouteLink href={crumb.href} className="cp-docs-bar__crumb" title={crumb.label}>
                       {crumb.label}
                     </RouteLink>
                   ))}
@@ -187,6 +193,11 @@ export function CiderpressDocsBar(): React.ReactElement | null {
             ))}
           </nav>
         )}
+        {badges.length > 0 && (
+          <span className="cp-docs-bar__badges">
+            <BadgeChips badges={badges} />
+          </span>
+        )}
         <div className="cp-docs-bar__llms">
           <LlmsContainer>
             <LlmsCopyButton />
@@ -254,6 +265,26 @@ interface Crumb {
   readonly current: boolean
 }
 
+/**
+ * Look up the current page's badges from the route→badges map, tolerating
+ * a trailing slash on the pathname (map keys are stored without one).
+ *
+ * @private
+ * @param params - The route→badges map (if present) and current pathname.
+ * @returns The page's badges, or an empty array when none apply.
+ */
+function lookupPageBadges(params: {
+  readonly pageBadges: Record<string, readonly BadgeConfig[]> | undefined
+  readonly pathname: string
+}): readonly BadgeConfig[] {
+  const { pageBadges, pathname } = params
+  if (pageBadges === undefined) {
+    return []
+  }
+  const stripped = pathname.replace(/\/$/, '')
+  return pageBadges[pathname] ?? pageBadges[stripped] ?? []
+}
+
 /**
  * Build a 1- or 2-level breadcrumb trail from the current path and the
  * page's frontmatter title. The section label comes from titlecasing

package/src/theme/components/nav/ciderpress-nav-hamburger.css

@@ -141,6 +141,56 @@
   text-decoration: none;
 }
 
+.cp-nav-drawer__group {
+  display: flex;
+  flex-direction: column;
+}
+
+.cp-nav-drawer__group-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  width: 100%;
+  padding: 12px 16px;
+  background: transparent;
+  border: none;
+  border-radius: 8px;
+  color: var(--cp-c-text-1);
+  font-family: inherit;
+  font-size: 15px;
+  font-weight: 500;
+  text-align: left;
+  cursor: pointer;
+  transition:
+    background 0.12s ease,
+    color 0.12s ease;
+}
+
+.cp-nav-drawer__group-toggle:hover {
+  background: var(--cp-c-bg-soft);
+  color: var(--cp-c-brand-1);
+}
+
+.cp-nav-drawer__group-chevron {
+  flex-shrink: 0;
+  color: var(--cp-c-text-2);
+  transition: transform 0.18s ease;
+}
+
+.cp-nav-drawer__group-toggle[aria-expanded='true'] .cp-nav-drawer__group-chevron {
+  transform: rotate(180deg);
+}
+
+.cp-nav-drawer__group-items {
+  display: flex;
+  flex-direction: column;
+}
+
+.cp-nav-drawer__link--nested {
+  padding-left: 28px;
+  font-size: 14px;
+}
+
 .cp-nav-drawer__divider {
   height: 1px;
   margin: 4px 20px;

package/src/theme/components/nav/ciderpress-nav-hamburger.tsx

@@ -1,3 +1,4 @@
+import { match } from 'massaman/match'
 import { useState } from 'react'
 import type React from 'react'
 import { Dialog, Modal, ModalOverlay } from 'react-aria-components'
@@ -71,15 +72,12 @@ export function CiderpressNavHamburger(props: CiderpressNavHamburgerProps): Reac
             </header>
 
             <nav className="cp-nav-drawer__nav" aria-label="Primary">
-              {props.navItems.map((item) => (
-                <RouteLink
-                  key={item.link}
-                  href={item.link}
-                  className="cp-nav-drawer__link"
-                  onClick={() => setOpen(false)}
-                >
-                  {item.text}
-                </RouteLink>
+              {props.navItems.map((item, index) => (
+                <DrawerNavEntry
+                  key={`${drawerItemKey(item)}::${index}`}
+                  item={item}
+                  onNavigate={() => setOpen(false)}
+                />
               ))}
             </nav>
 
@@ -110,3 +108,91 @@ export function CiderpressNavHamburger(props: CiderpressNavHamburgerProps): Reac
 }
 
 export { CiderpressNavHamburger as default }
+
+/**
+ * Render one entry in the mobile drawer nav. Leaf items are a single
+ * link; dropdown parents become a collapsible {@link DrawerNavGroup}.
+ *
+ * @private
+ * @param props - The nav item and a callback to close the drawer.
+ * @returns The drawer entry element.
+ */
+function DrawerNavEntry(props: {
+  readonly item: CiderpressNavMenuItem
+  readonly onNavigate: () => void
+}): React.ReactElement {
+  const { item, onNavigate } = props
+  const children = item.items ?? []
+  return match(children.length > 0)
+    .with(true, () => <DrawerNavGroup item={item} onNavigate={onNavigate} />)
+    .otherwise(() => (
+      <RouteLink href={item.link ?? '#'} className="cp-nav-drawer__link" onClick={onNavigate}>
+        {item.text}
+      </RouteLink>
+    ))
+}
+
+/**
+ * A collapsible dropdown section in the mobile drawer: a tappable header
+ * that toggles its child links open/closed. Collapsed by default so a
+ * deep nav doesn't fill the drawer on open.
+ *
+ * @private
+ * @param props - The dropdown item and a callback to close the drawer.
+ * @returns The collapsible group element.
+ */
+function DrawerNavGroup(props: {
+  readonly item: CiderpressNavMenuItem
+  readonly onNavigate: () => void
+}): React.ReactElement {
+  const { item, onNavigate } = props
+  const [expanded, setExpanded] = useState(false)
+  const children = item.items ?? []
+  return (
+    <div className="cp-nav-drawer__group" role="group" aria-label={item.text}>
+      <button
+        type="button"
+        className="cp-nav-drawer__group-toggle"
+        onClick={() => setExpanded((current) => !current)}
+        aria-expanded={expanded}
+      >
+        <span>{item.text}</span>
+        <Icon
+          className="cp-nav-drawer__group-chevron"
+          icon="pixelarticons:chevron-down"
+          width={16}
+          height={16}
+        />
+      </button>
+      {expanded && (
+        <div className="cp-nav-drawer__group-items">
+          {children.map((child, index) => (
+            <RouteLink
+              key={`${drawerItemKey(child)}::${index}`}
+              href={child.link ?? '#'}
+              className="cp-nav-drawer__link cp-nav-drawer__link--nested"
+              onClick={onNavigate}
+            >
+              {child.text}
+            </RouteLink>
+          ))}
+        </div>
+      )}
+    </div>
+  )
+}
+
+/**
+ * Stable React key for a drawer nav item — its link when present,
+ * otherwise its label (dropdown parents may have no link of their own).
+ *
+ * @private
+ * @param item - Nav item to key.
+ * @returns Key string.
+ */
+function drawerItemKey(item: CiderpressNavMenuItem): string {
+  if (item.link !== undefined && item.link !== '') {
+    return item.link
+  }
+  return item.text
+}

package/src/theme/components/nav/ciderpress-nav-menu.css

@@ -50,6 +50,13 @@
   color: var(--cp-nav-menu-item-color-active, var(--cp-c-brand-1, currentColor));
 }
 
+/* Measurement-only: dropdown items render a label→chevron gap in the
+   live toggle, so the hidden measure span must include it to size
+   correctly. Applied only in the measure row. */
+.cp-nav-menu__item--measured-dropdown {
+  gap: 4px;
+}
+
 /* ── Hidden measurement layer ──────────────────────────────────────────
    Renders every item at full natural width so the JS layer always has
    a stable per-item measurement no matter how narrow the live menu
@@ -128,3 +135,84 @@
 .cp-nav-menu__overflow-item--active {
   color: var(--cp-nav-menu-item-color-active, var(--cp-c-brand-1, currentColor));
 }
+
+/* ── Inline dropdown (nav item with children) ──────────────────────── */
+.cp-nav-menu__dropdown {
+  position: relative;
+  display: inline-flex;
+  align-items: center;
+}
+
+.cp-nav-menu__dropdown-toggle {
+  gap: 4px;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  font-family: inherit;
+}
+
+.cp-nav-menu__dropdown-popover {
+  position: absolute;
+  /* Sit below the toggle with breathing room. The visual gap is bridged
+     by the transparent `::before` band below, so the whole toggle→menu
+     path stays inside the hover region and moving toward the menu never
+     crosses empty space that would trigger a close. */
+  top: calc(100% + 12px);
+  /* Anchor to the toggle's right edge. The primary nav is right-aligned
+     in the topbar, so opening leftward keeps the popover on-screen
+     instead of overflowing the viewport's right edge. */
+  right: 0;
+  z-index: 60;
+  min-width: 200px;
+  margin: 0;
+  padding: 6px;
+  list-style: none;
+  background: var(--cp-nav-menu-overflow-bg, var(--cp-c-bg, #1e1e2e));
+  border: 1px solid var(--cp-nav-menu-overflow-border, var(--cp-c-border, #313244));
+  border-radius: 8px;
+  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.24);
+}
+
+/* Invisible bridge: a transparent band spanning the visual gap between
+   the toggle and the popover surface (and a little to each side), so the
+   pointer stays within the dropdown's hover region the whole way down.
+   Without it, the 6px gap is dead space and mouse-leave fires mid-move. */
+.cp-nav-menu__dropdown-popover::before {
+  content: '';
+  position: absolute;
+  bottom: 100%;
+  left: -12px;
+  right: -12px;
+  /* Taller than the 12px offset so the band overlaps both the toggle and
+     the popover surface — no hairline seam for the pointer to slip through. */
+  height: 16px;
+}
+
+/* ── Dropdown parents collapsed into the "More" popover ────────────── */
+.cp-nav-menu__overflow-group {
+  padding: 4px 0;
+}
+
+.cp-nav-menu__overflow-group + .cp-nav-menu__overflow-group,
+.cp-nav-menu__overflow-item + .cp-nav-menu__overflow-group {
+  margin-top: 4px;
+  border-top: 1px solid var(--cp-nav-menu-overflow-border, var(--cp-c-border, #313244));
+}
+
+.cp-nav-menu__overflow-group-label {
+  display: block;
+  padding: 6px 12px 2px;
+  /* text-2 (not text-3): these small uppercase labels need AA contrast,
+     and text-3's low alpha fails 4.5:1 on the light themes. */
+  color: var(--cp-c-text-2, #9399b2);
+  font-size: 11px;
+  font-weight: 600;
+  letter-spacing: 0.04em;
+  text-transform: uppercase;
+}
+
+.cp-nav-menu__overflow-sublist {
+  margin: 0;
+  padding: 0;
+  list-style: none;
+}