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

package/dist/node.mjs

@@ -17469,6 +17469,11 @@ function createRspressConfig(options) {
         name: 'scopes.json',
         fallback: []
     });
+    const pageBadges = loadGenerated({
+        contentDir: paths.contentDir,
+        name: 'badges.json',
+        fallback: {}
+    });
     const gitBranch = detectGitBranch();
     const brand = config.brand;
     const home = config.home;
@@ -17528,6 +17533,7 @@ function createRspressConfig(options) {
         config,
         editLink,
         reportLink,
+        feedback: config.feedback,
         topbar,
         sidebar,
         footer
@@ -17636,7 +17642,8 @@ function createRspressConfig(options) {
             },
             ...{
                 workspaces,
-                standaloneScopePaths
+                standaloneScopePaths,
+                pageBadges
             },
             ...{
                 socialLinks: serializeSocials(config.socials),
@@ -17831,6 +17838,16 @@ function buildSiteBlock(params) {
             tagline: f.tagline,
             brandMark: f.brandMark
         }));
+    const feedbackBlock = match_match(params.feedback).with(true, ()=>({
+            enabled: true,
+            question: void 0
+        })).with(P.union(false, void 0), ()=>({
+            enabled: false,
+            question: void 0
+        })).otherwise((f)=>({
+            enabled: true,
+            question: f.question
+        }));
     return {
         version: params.config.version,
         edit: editBlock,
@@ -17838,7 +17855,8 @@ function buildSiteBlock(params) {
         topbarCta,
         sidebarPromo,
         announcement,
-        footer: footerBlock
+        footer: footerBlock,
+        feedback: feedbackBlock
     };
 }
 function resolveHomeConfig(home) {

package/dist/plugins/mermaid/MermaidRenderer.tsx

@@ -4,10 +4,14 @@
 // workspace dependencies here — they will cause "factory is undefined" runtime
 // errors. See packages/ui/AGENTS.md for details.
 //
-// IMPORTANT: mermaid must stay on v10.x. Mermaid v11 uses langium for its parser,
-// which depends on vscode-languageserver-types and has broken ESM exports that
-// Rspack cannot resolve. It also lazy-loads every diagram type via dynamic
-// import() — incompatible with Rspress's webpack compilation of global components.
+// MERMAID v11: works fine here — no pin needed. The earlier v10 pin blamed
+// langium/lazy-loading, but mermaid.render() actually resolves correctly. The
+// real bug was local: `config` defaults to a fresh {} each render, so keying
+// renderMermaid on it re-created the callback every render and re-fired the
+// render effect in a loop. Each loop iteration called mermaid.render() into the
+// same element id, clobbering the just-injected SVG — the diagram went blank
+// until an unrelated re-render happened to run last. Fixed by keying on a stable
+// serialized config value (see configKey below).
 
 // oxlint-disable no-ternary
 
@@ -214,6 +218,11 @@ function MermaidRenderer(props: MermaidRendererProps): React.ReactElement | null
 
   const [svg, setSvg] = useState('')
   const [renderError, setRenderError] = useState(false)
+  // Monotonic counter for per-render element ids. mermaid.render() renders into a
+  // node keyed by the id we pass; reusing one id across calls (React StrictMode
+  // double-invokes the mount effect) lets a later call clobber the SVG an earlier
+  // call already injected. A fresh id per call makes every render self-contained.
+  const renderSeq = useRef(0)
   const [transform, setTransform] = useState<Transform>(INITIAL_TRANSFORM)
   const transformRef = useRef<Transform>(INITIAL_TRANSFORM)
   const [fullscreen, setFullscreen] = useState(false)
@@ -221,6 +230,14 @@ function MermaidRenderer(props: MermaidRendererProps): React.ReactElement | null
 
   const highlightedCode = useMemo(() => highlightMermaid(code), [code])
 
+  // Stable value-key for the config object. `config` defaults to a fresh {} on
+  // every render, so depending on it directly re-creates renderMermaid each
+  // render, which re-fires the render effect in a loop. Each re-render calls
+  // mermaid.render() into the same element id — which clobbers the SVG we just
+  // injected, leaving the diagram blank until an unrelated re-render happens to
+  // land last. Keying on the serialized value keeps renderMermaid stable.
+  const configKey = JSON.stringify(config)
+
   transformRef.current = transform
 
   const isPreview = tab === 'preview'
@@ -235,14 +252,15 @@ function MermaidRenderer(props: MermaidRendererProps): React.ReactElement | null
       ...config,
     }
 
+    const renderId = `${id.replaceAll(':', '')}-${(renderSeq.current += 1)}`
     try {
       mermaid.initialize(mermaidConfig)
-      const result = await mermaid.render(id.replaceAll(':', ''), code as string)
+      const result = await mermaid.render(renderId, code as string)
       setSvg(result.svg)
     } catch {
       setRenderError(true)
     }
-  }, [code, config, id])
+  }, [code, configKey, id])
 
   useEffect(() => {
     renderMermaid()

package/dist/theme/components/nav/ciderpress-docs-bar.css

@@ -90,11 +90,21 @@
   display: flex;
   align-items: center;
   gap: 6px;
-  flex: 1 1 auto;
+  /* Shrink-to-content (not grow) so page badges sit snug to the right of
+     the trail; long trails still truncate via `overflow: hidden`. */
+  flex: 0 1 auto;
   min-width: 0;
   overflow: hidden;
 }
 
+/* Page badges (ALPHA / WIP …) immediately right of the breadcrumb trail. */
+.cp-docs-bar__badges {
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  flex: 0 0 auto;
+}
+
 .cp-docs-bar__crumb-wrap {
   display: inline-flex;
   align-items: center;
@@ -358,6 +368,8 @@ html[data-cp-outline-collapsed='true'] .cp-docs-bar__chev {
    `styles/overrides/rspress.css`. ──────────────────────────────── */
 .cp-docs-bar__llms {
   flex-shrink: 0;
+  /* Crumbs no longer grow, so push the LLMs cluster to the far right. */
+  margin-left: auto;
 }
 
 .cp-docs-bar__llms .rp-llms-container {

package/dist/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/dist/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/dist/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/dist/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;
+}