@kolkrabbi/kol-workshop 0.6.0 → 0.18.1

package/src/docs/DocumentationReader.jsx

@@ -1,152 +1,52 @@
 import { useContext, useEffect, useMemo, useState } from 'react'
 import { useParams, Link, useNavigate } from 'react-router-dom'
-import { CodeBlock, Divider, DocsToc, Icon, Table, Tag } from '@kolkrabbi/kol-component'
-import { ShellTocContext } from '../shell'
+import { CodeBlock, Divider, Icon, Table, useScrollSpy } from '@kolkrabbi/kol-component'
+import { ShellTocContext, RightRail } from '../shell'
 import { useTagMode } from '../tags'
-import { parseDocsMarkdown, isIndexFile, getTagColor } from '../engine'
+import TagPath from '../tags/TagPath.jsx'
+import { parseDocsMarkdown, isIndexFile } from '../engine'
+import { buildTagCounts } from '../engine/tags.js'
+import { fileLabel } from '../engine/doc-helpers.js'
 import DocsHeader from './DocsHeader.jsx'
 import DocsArticle from './DocsArticle.jsx'
 import DocsFrontmatter from './DocsFrontmatter.jsx'
 import { DocSection } from './DocKit.jsx'
 import { renderInlineTokens } from './render-tokens.jsx'
 
-/**
- * A rail section header. Same anatomy as the LEFT tree's group header — a
- * rotating chevron, the label, and the item count pushed right — because the
- * two rails are one system and a reader shouldn't have to learn each side
- * separately.
- *
- * These were bare text. They collapsed on click with no chevron, no count and
- * no hover, so the only way to discover they were interactive was to click
- * something that looked inert and watch the panel vanish. An affordance that
- * only announces itself after you've used it isn't one.
- */
-const SidebarSection = ({ sectionKey, label, count, collapsedSections, toggleSection, children }) => {
-  const isOpen = !collapsedSections[sectionKey]
-  return (
-    <div>
-      <button
-        type="button"
-        className="shell-nav-group-header w-full text-left shell-sidebar-label kol-doc-eyebrow"
-        onClick={() => toggleSection(sectionKey)}
-        aria-expanded={isOpen}
-      >
-        <span className="flex items-center gap-2">
-          <Icon
-            name="chevron-right"
-            size={12}
-            className={`transition-transform ${isOpen ? 'rotate-90' : ''}`}
-          />
-          {label}
-        </span>
-        {count > 0 && <span className="kol-mono-14 text-subtle">({count})</span>}
-      </button>
-      {isOpen && children}
-    </div>
-  )
-}
-
-const DocReaderSidebar = ({ toc, allTags, related, docId, docsIndexHref, componentsHref, docFilePath }) => {
+/* THE RIGHT RAIL IS ONE COMPONENT (user ruling 2026-08-01). This file used to
+ * carry its own — `DocReaderSidebar`, with its own section set, its own collapse
+ * state and its own JSX — while the showcase's ShellChrome carried a second one.
+ * They disagreed about which sections exist, so sections appeared and vanished,
+ * and `SidebarSection` here was a third spelling of a rung `RailSection` already
+ * owned. All of it is `RightRail` now; this is an adapter that hands it data. */
+const DocReaderSidebar = ({ toc, allTags, related, docId, docsIndexHref, componentsHref, docFilePath, topTags = [] }) => {
   const navigate = useNavigate()
   const { openTagMode } = useTagMode()
-  const [collapsedSections, setCollapsedSections] = useState({})
-  const toggleSection = (key) => setCollapsedSections(prev => ({ ...prev, [key]: !prev[key] }))
+  /* `#main` is the scroll container — the shell is `fixed inset-0` with its own
+   * scroll regions, so a viewport-rooted observer never fires. Same call the
+   * other rail makes; the rail is handed the answer, never a second observer. */
+  const activeId = useScrollSpy((toc ?? []).map((h) => h.id), { root: '#main' })
 
-  return (
-    <div className="space-y-6">
-      <SidebarSection
-        sectionKey="toc"
-        label="On this page"
-        count={toc?.length}
-        collapsedSections={collapsedSections}
-        toggleSection={toggleSection}
-      >
-        <DocsToc toc={toc} />
-      </SidebarSection>
+  const actions = [
+    { id: 'back', label: 'Back', icon: <Icon name="arrow-left" size={14} />, onClick: () => navigate(-1) },
+    { id: 'docs', label: 'All documentation', icon: <Icon name="book-open" size={14} />, to: docsIndexHref },
+    { id: 'components', label: 'View components', icon: <Icon name="grid" size={14} />, to: componentsHref },
+    { id: 'copy', label: 'Copy path', icon: <Icon name="copy" size={14} />, onClick: () => navigator.clipboard.writeText(docFilePath(docId)) },
+    { id: 'graph', label: 'Graph view', icon: <Icon name="polygon" size={14} />, onClick: () => openTagMode(null, { view: 'graph' }) },
+  ]
 
-      {related.length > 0 && (
-        <SidebarSection
-          sectionKey="related"
-          label="Related"
-          count={related.length}
-          collapsedSections={collapsedSections}
-          toggleSection={toggleSection}
-        >
-          {/* ONE rail voice (user law): rows = the shell-nav-item idiom. */}
-          <nav className="flex flex-col">
-            {related.map((r) => (
-              <Link key={r.id} to={r.href} className="shell-nav-item block kol-mono-14 text-body transition-colors hover:text-emphasis">
-                {r.label}
-              </Link>
-            ))}
-          </nav>
-        </SidebarSection>
-      )}
-
-      <SidebarSection
-        sectionKey="actions"
-        label="Quick actions"
-        collapsedSections={collapsedSections}
-        toggleSection={toggleSection}
-      >
-        {/* Quick actions wear the SAME row as On-this-page and Related. They
-          * were `.shell-sidebar-action`, a third geometry with no left indent,
-          * so this rail carried three different row idioms — under the
-          * "ONE rail voice" comment above. */}
-        <div>
-          <button
-            type="button"
-            className="shell-nav-item flex items-center gap-2 kol-mono-14 text-body transition-colors hover:text-emphasis"
-            onClick={() => navigate(-1)}
-          >
-            <Icon name="arrow-left" size={14} />
-            Back
-          </button>
-          <Link to={docsIndexHref} className="shell-nav-item flex items-center gap-2 kol-mono-14 text-body transition-colors hover:text-emphasis">
-            <Icon name="book-open" size={14} />
-            All documentation
-          </Link>
-          <Link to={componentsHref} className="shell-nav-item flex items-center gap-2 kol-mono-14 text-body transition-colors hover:text-emphasis">
-            <Icon name="grid" size={14} />
-            View components
-          </Link>
-          <button
-            type="button"
-            className="shell-nav-item flex items-center gap-2 kol-mono-14 text-body transition-colors hover:text-emphasis"
-            onClick={() => navigator.clipboard.writeText(docFilePath(docId))}
-            title="Copy file path to clipboard"
-          >
-            <Icon name="copy" size={14} />
-            Copy path
-          </button>
-        </div>
-      </SidebarSection>
-
-      {allTags.length > 0 && (
-        <SidebarSection
-          sectionKey="tags"
-          count={allTags?.length}
-          label="Tags"
-          collapsedSections={collapsedSections}
-          toggleSection={toggleSection}
-        >
-          <div className="flex flex-col gap-1.5 items-start min-w-0 w-full">
-            {allTags.map((tag) => (
-              <Tag
-                key={tag}
-                variant="naked"
-                size="lg"
-                color={getTagColor(tag)}
-                onClick={() => openTagMode(tag)}
-                className="max-w-full overflow-hidden text-ellipsis"
-              >
-                {tag}
-              </Tag>
-            ))}
-          </div>
-        </SidebarSection>
-      )}
-    </div>
+  return (
+    <RightRail
+      toc={toc}
+      activeId={activeId}
+      related={related}
+      actions={actions}
+      topTags={topTags}
+      tags={allTags}
+      renderTag={(tag) => <TagPath tag={tag} />}
+      onTagClick={(tag) => openTagMode(tag)}
+      icon={Icon}
+    />
   )
 }
 
@@ -344,6 +244,11 @@ const DocumentationReader = ({
   }, [rawMarkdown])
 
   // Combine frontmatter tags with inline hashtags
+  /* THE SAME Top tags THE OTHER RAIL SHOWS (user ruling 2026-08-01). The rail
+   * is standardised, so this section cannot exist on one route and not another;
+   * the inventory is already a prop here, so there is nothing to fetch. */
+  const topTags = useMemo(() => buildTagCounts(inventory).slice(0, 12), [inventory])
+
   const allTags = useMemo(() => {
     const frontmatterTags = doc?.metadata?.tags || []
     return [...new Set([...frontmatterTags, ...inlineTags])]
@@ -379,7 +284,15 @@ const DocumentationReader = ({
           inventory.find((d) => d.file.replace(/\.md$/, '') === full) ??
           inventory.find((d) => d.file.replace(/\.md$/, '').toLowerCase() === `${full}/index`.toLowerCase()) ??
           inventory.find((d) => d.id === basename)
-        return hit ? { id: hit.id, href: docHref(hit.id), label: display } : null
+        /* `fileLabel`, THE rail-label rule — the same one the left tree uses
+         * (user rulings 2026-08-01). Three spellings have been tried on this
+         * row: the wikilink's display text (`[[02-color|color]]` → lowercase
+         * `color`), then the doc's frontmatter title (which carried a subtitle
+         * after an em dash, so the row read `Color — anchors and ramps` and
+         * truncated). A rail row is a NAME: one or two words, from the
+         * filename, identical to how the same doc appears in the left tree.
+         * The display text stays the fallback for an unresolvable target. */
+        return hit ? { id: hit.id, href: docHref(hit.id), label: fileLabel(hit.file) || display } : null
       })
       .filter(Boolean)
   }, [doc, inventory, docHref])
@@ -394,6 +307,7 @@ const DocumentationReader = ({
         key={docId}
         toc={toc}
         allTags={allTags}
+        topTags={topTags}
         related={related}
         docId={docId}
         docsIndexHref={docsIndex}
@@ -402,13 +316,15 @@ const DocumentationReader = ({
       />
     )
     return () => setTocContent(null)
-  }, [setTocContent, docId, toc, allTags, related, docsIndex, components, docFilePath])
+  }, [setTocContent, docId, toc, allTags, topTags, related, docsIndex, components, docFilePath])
 
   if (!doc) {
     return (
-      /* framed to a 1400px tier that was removed from the scale at theme
-       * 0.11.22 and left behind here — a width nothing else still uses */
-      <div className="mx-auto max-w-[var(--kol-content-panel)] py-16">
+      /* framed to a tier that was removed from the scale at theme 0.11.22 and
+       * left behind here — a width nothing else still uses; now on the panel
+       * token. Left-anchored, not centred (2026-08-01): the frame centres in
+       * the viewport, the content does not centre in the frame. */
+      <div className="max-w-[var(--kol-content-panel)] py-16">
         <DocsHeader title="Document Not Found" subtitle={`Could not find document: ${docId}`} />
         <p className="kol-mono-12 mt-6">
           <Link to={docsIndex} className="text-accent-primary">

package/src/engine/doc-helpers.js

@@ -9,6 +9,28 @@
 export const capitalise = (value) =>
   value ? value.charAt(0).toUpperCase() + value.slice(1) : value
 
+/**
+ * fileLabel — a rail row's name, taken from the FILENAME (user ruling
+ * 2026-08-01).
+ *
+ * The tree used to label rows from the doc's H1, so `01-tokens.md` (opening
+ * `# Foundations — the token system`) rendered as "Foundations" — a row whose
+ * name appears nowhere in the folder, and two files whose H1s both began
+ * "Foundations" collapsed into two identical rows. A tree that mirrors a
+ * folder has to read the folder: what Finder shows is what the sidebar shows.
+ *
+ *   01-tokens.md             → Tokens
+ *   04-layout-breakpoints.md → Layout breakpoints
+ *
+ * Titles still drive SEARCH and the page header; this is the tree label only.
+ */
+export const fileLabel = (file = '') => {
+  const base = file.split('/').pop()?.replace(/\.md$/i, '') ?? ''
+  const named = base.replace(/^\d+(\.\d+)*[-.]?\s*/, '')
+  if (!named) return capitalise(base)
+  return capitalise(named.replace(/[-_]+/g, ' ').trim())
+}
+
 // Index.md files (e.g. "00-metadata-index", "foundry-index") have no version dots
 export const isIndexFile = (id) => id.endsWith('-index') && !id.includes('.')
 
@@ -60,6 +82,15 @@ export const cleanTitle = (title, id) => {
 
   let cleaned = title.replace(/^\d+\.\d+\.\d+\s*/, '')
   cleaned = cleaned.replace(/^[A-Za-z\s]+:\s*/, '')
+  /* SUBTITLE OFF (user ruling 2026-08-01): "dont Foundtation - the token
+   * system, just 'foundation'". A doc's `title` is written for the document —
+   * "Type classes — the two families and when to use which" — and a rail row
+   * is not the place to read a sentence: three of eight rows wrapped to two
+   * and three lines. Everything from the em/en dash on is the subtitle, so the
+   * row keeps the name and drops the explanation. The DOC's own title is
+   * untouched; this is the rail's label only.
+   * Spaced dash only — an unspaced one is a compound word, not a separator. */
+  cleaned = cleaned.replace(/\s+[—–]\s+.*$/, '')
   cleaned = cleaned.trim() || title
 
   const versionMatch = id.match(/^(\d+\.\d+)\.(\d+)/)

package/src/engine/index.js

@@ -2,7 +2,7 @@
  * The pure docs engine — zero dependencies, no React, no Vite.
  * Everything here is a plain function over strings/data.
  */
-export { parseDocsMarkdown, extractHashtags } from './parse-markdown.js'
+export { parseDocsMarkdown, extractHashtags, processInlineMarkdown } from './parse-markdown.js'
 export { parseFrontmatter } from './frontmatter.js'
 export { buildInventory, buildInventoryCounts } from './build-inventory.js'
 export { matchSearchItems } from './search.js'
@@ -15,6 +15,7 @@ export {
   subsectionPrefixes,
   categoryLabels,
   cleanTitle,
+  fileLabel,
   getTagColor,
   groupDocsByMajor,
 } from './doc-helpers.js'

package/src/engine/parse-markdown.js

@@ -21,7 +21,11 @@ export const extractHashtags = (content) => {
  * Supports: bold, italic, inline code, links, images, color swatches, hashtags.
  * Returns a token array; the render layer turns tokens into elements.
  */
-const processInlineMarkdown = (text) => {
+/* EXPORTED 2026-08-01. The props table needs the token producer so its cells
+ * can render `backticked` code as a chip instead of printing the backticks.
+ * It was module-private, which is why the table had no way to do it and the
+ * gap read as "the table is bad" rather than "the parser was unreachable". */
+export const processInlineMarkdown = (text) => {
   if (!text) return []
 
   const tokens = []

package/src/shell/RailRow.jsx

@@ -0,0 +1,85 @@
+import { NavLink } from 'react-router-dom'
+
+/**
+ * RailRow — THE L3 rail row. The ladder's bottom rung, owned like the other two.
+ *
+ * WHY IT EXISTS (user ruling 2026-08-01). `.shell-nav-item` was a shared class
+ * name and nothing more: every call site hand-wrote its own utility stack
+ * around it, so ONE row idiom shipped as NINE different strings across five
+ * files —
+ *
+ *   left tree      `shell-nav-item kol-mono-14 ${active ? … }`
+ *   toc rows       `shell-nav-item block kol-mono-14 text-body transition-colors
+ *                   focus-visible:ring-focus hover:text-emphasis`
+ *   related rows   the same minus the focus ring
+ *   quick actions  `shell-nav-item flex items-center gap-2 …`
+ *
+ * — and their containers disagreed too (`space-y-0` against `space-y-4` for the
+ * same list). R1/R2 lock the TYPE class; nothing locked the stack. That is the
+ * eyebrow-box failure exactly, one rung further down, which is why the rails
+ * kept drifting after RailSection fixed L1 and L2.
+ *
+ * The look now lives in `.shell-nav-item` (layout, colour, hover, focus,
+ * active); this component owns the markup. `validate:rails` R4 fails a
+ * hand-written `shell-nav-item` anywhere but here.
+ *
+ * ACTIVE IS BOTH RAILS' (user ruling 2026-08-01). The left tree highlighted the
+ * current page and the right rail highlighted nothing — same rung, one state.
+ * `NavLink` drives it for routes; `active` drives it for hash links and
+ * buttons, which react-router cannot resolve.
+ *
+ * @param {string}   [to]       route → NavLink, active resolved by the router
+ * @param {string}   [href]     plain anchor (hash links: on-this-page)
+ * @param {Function} [onClick]  no `to`/`href` → a <button>
+ * @param {boolean}  [active]   forced active state (hash links, buttons)
+ * @param {node}     [icon]     leading glyph
+ * @param {node}     [trailing] pushed right — a count, a doc number
+ * @param {boolean}  [sub]      nested depth (h3 under h2)
+ */
+export default function RailRow({
+  to,
+  href,
+  onClick,
+  active = false,
+  icon,
+  trailing,
+  sub = false,
+  onNavigate,
+  children,
+  className = '',
+}) {
+  /* ONE string. It is assembled here and nowhere else — that is the entire
+   * point of the component. `kol-mono-14` is the rail's row ramp (R1). */
+  const cls = (isActive) =>
+    ['shell-nav-item', 'kol-mono-14', sub ? 'shell-nav-item-sub' : '', isActive ? 'is-active' : '', className]
+      .filter(Boolean)
+      .join(' ')
+
+  const inner = (
+    <>
+      {icon}
+      <span className="truncate">{children}</span>
+      {trailing != null && <span className="shell-nav-item-trailing kol-mono-14">{trailing}</span>}
+    </>
+  )
+
+  if (to) {
+    return (
+      <NavLink to={to} end className={({ isActive }) => cls(isActive || active)} onClick={onNavigate}>
+        {inner}
+      </NavLink>
+    )
+  }
+  if (href) {
+    return (
+      <a href={href} className={cls(active)} onClick={onNavigate}>
+        {inner}
+      </a>
+    )
+  }
+  return (
+    <button type="button" className={cls(active)} onClick={onClick}>
+      {inner}
+    </button>
+  )
+}

package/src/shell/RailSection.jsx

@@ -0,0 +1,183 @@
+import { useState } from 'react'
+import { Link } from 'react-router-dom'
+
+/**
+ * RailSection — THE rail ladder. One component owns every rail header, at
+ * every rung, in both rails.
+ *
+ * WHY IT EXISTS (user ruling 2026-08-01). The rails already had a class per
+ * rung — `.shell-sidebar-toggle` (L1), `.shell-nav-group-header` (L2),
+ * `.shell-nav-item` (L3) — and drifted anyway, because a class is vocabulary
+ * and not grammar. Nothing declared the three a LADDER, and every affordance
+ * that hangs off a rung (the count, the collapse, the chevron) was hand-typed
+ * at each call site. So the right rail put its count on L1 and the left rail
+ * put its count on L2, and the user had to catch it in a screenshot.
+ *
+ * L3 is the proof of the fix: it is the only rung a component already owned
+ * (`DocsToc`), and it is the only rung that never drifted.
+ *
+ * THE LADDER
+ *
+ *   L1  section  `.shell-sidebar-toggle` + kol-doc-eyebrow    quiet, no chevron
+ *   L2  group    `.shell-nav-group-header` + kol-mono-14      louder, chevron
+ *
+ * L2 carries NO colour class: `.shell-nav-group-header` owns weight 500 and
+ * `--kol-fg-shout` itself (user ruling 2026-08-01). It used to carry
+ * `text-body` — a utility that resolved to nothing at the time, and would now
+ * fight the rule for the same property. One owner.
+ *   L3  row      `.shell-nav-item` + kol-mono-14              leaf, DocsToc/links
+ *
+ * THE RULES THIS COMPONENT ENFORCES BY CONSTRUCTION
+ *
+ *   - A rung's class is chosen here, never at the call site. Same rung in
+ *     either rail is literally the same string.
+ *   - The COUNT is placed by the rung, not by the caller. You cannot put it in
+ *     the wrong place because you never write the span.
+ *   - No chevron at L1 (user ruling 2026-08-01) — the section still collapses
+ *     and expands on click, the glyph is simply not drawn. L2 keeps its
+ *     chevron: it is the rung where a caret means "there is a subtree here".
+ *   - The box (padding + margin) belongs to the rung class alone. Nothing here
+ *     sets y-spacing inline; see the eyebrow-box law in kol-components-workshop.css.
+ *
+ * `pnpm validate:rails` R4 asserts that rail headers come from here.
+ *
+ * @param {1|2}      level        which rung. L3 rows are links, not sections.
+ * @param {string}   label        header text, rendered verbatim (casing is authored)
+ * @param {number}   [count]      leaf rows this section contains — L1 counts the
+ *                                whole subtree, L2 counts its own children
+ * @param {string}   [to]         make the LABEL a link; the rest of the row still toggles
+ * @param {boolean}  [collapsible=true]  false → a static header, no toggle, no aria
+ * @param {boolean}  [collapsed]  controlled state; omit for uncontrolled
+ * @param {Function} [onToggle]   required when `collapsed` is passed
+ * @param {boolean}  [defaultCollapsed=false]  uncontrolled initial state
+ * @param {Function} [onNavigate] click hook on the label link (close a drawer, etc.)
+ * @param {Icon}     [icon]       the chevron renderer, injected — the shell package
+ *                                must not reach into kol-component from here
+ */
+export default function RailSection({
+  level = 1,
+  label,
+  count,
+  to,
+  collapsible = true,
+  collapsed,
+  onToggle,
+  defaultCollapsed = false,
+  onNavigate,
+  icon: IconComponent,
+  children,
+}) {
+  const [internal, setInternal] = useState(defaultCollapsed)
+  const isControlled = collapsed !== undefined
+  const isCollapsed = isControlled ? collapsed : internal
+  const toggle = isControlled ? onToggle : () => setInternal((c) => !c)
+
+  /* The rung decides the class. This is the single line that used to live at
+   * four call sites in two rails, spelled differently at each. */
+  const headerClass = level === 1
+    ? 'shell-sidebar-toggle kol-doc-eyebrow'
+    : 'shell-nav-group-header kol-mono-14'
+
+  /* A static header is not a button and must not claim to be one. It still
+   * wears the same box — `.shell-sidebar-label` shares L1's rule. */
+  const staticClass = level === 1
+    ? 'shell-sidebar-label kol-doc-eyebrow'
+    : 'shell-nav-group-header kol-mono-14'
+
+  /* L2 only. At L1 the caret is not drawn (user ruling) — the row is still the
+   * toggle, so the affordance exists, it just isn't a glyph. */
+  const chevron = level === 2 && collapsible && IconComponent ? (
+    <IconComponent
+      name="chevron-right"
+      size={12}
+      className={`transition-transform ${isCollapsed ? '' : 'rotate-90'}`}
+    />
+  ) : null
+
+  /* THE COUNT IS AN L2 AFFORDANCE (user ruling 2026-08-01): "dont list counter
+   * next to eyebrow category, just inside". A category eyebrow names a body of
+   * material; the tally belongs to the groups inside it, not to the label over
+   * them. So L1 drops a `count` on the floor rather than rendering it — the
+   * rung refuses it, so no call site can put one back. */
+  const countNode = level === 2 && count !== undefined && count !== null
+    ? <span className="kol-mono-14 text-subtle">({count})</span>
+    : null
+
+  const labelNode = to ? (
+    /* The label navigates; the rest of the row toggles. stopPropagation keeps
+     * one click from doing both. */
+    <Link
+      to={to}
+      className={level === 1 ? 'kol-doc-eyebrow' : undefined}
+      onClick={(e) => {
+        e.stopPropagation()
+        if (isCollapsed && toggle) toggle()
+        if (onNavigate) onNavigate(e)
+      }}
+    >
+      {label}
+    </Link>
+  ) : (
+    <span>{label}</span>
+  )
+
+  const inner = (
+    <>
+      <span className="flex items-center gap-2">
+        {chevron}
+        {/* L2 rows without a caret keep the caret's width as space, so an
+          * expandable row and a childless one share a left edge. */}
+        {level === 2 && !chevron && <span aria-hidden="true" style={{ width: 12 }} />}
+        {labelNode}
+      </span>
+      {countNode}
+    </>
+  )
+
+  if (!collapsible) {
+    /* A rung with nothing to expand is not a section — it is a row that goes
+     * somewhere. It used to render as a header anyway: a chevron rotating over
+     * an empty body that never navigated, so "Icons" and "Components" did
+     * nothing when clicked. With `to` the WHOLE row is the link (the label
+     * alone would leave the rest of the row dead), and `inner` keeps the caret
+     * column as space so it shares a left edge with its expandable siblings. */
+    if (to) {
+      return (
+        <Link to={to} className={staticClass} onClick={onNavigate}>
+          <span className="flex items-center gap-2">
+            {level === 2 && <span aria-hidden="true" style={{ width: 12 }} />}
+            {label}
+          </span>
+          {countNode}
+        </Link>
+      )
+    }
+    return (
+      <div>
+        <div className={staticClass}>{inner}</div>
+        {children}
+      </div>
+    )
+  }
+
+  /* A div with role=button, not a <button>, because the label may be a Link —
+   * an anchor inside a button is invalid markup. The keyboard handler restores
+   * what the removed chevron button used to provide. */
+  return (
+    <div>
+      <div
+        className={headerClass}
+        role="button"
+        tabIndex={0}
+        aria-expanded={!isCollapsed}
+        onClick={toggle}
+        onKeyDown={(e) => {
+          if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); if (toggle) toggle() }
+        }}
+      >
+        {inner}
+      </div>
+      {!isCollapsed && children}
+    </div>
+  )
+}