@ciderpress/ui 1.0.0-rc.1 → 1.0.0-rc.10

package/dist/theme/components/workspaces/card.tsx

@@ -2,7 +2,8 @@ import { match, P } from 'massaman/match'
 import type React from 'react'
 
 import { Card } from '../shared/card'
-import { Icon } from '../shared/icon'
+import { CardIcon } from '../shared/card-icon'
+import type { CardIconInput } from '../shared/resolve-card-icon'
 import { resolveCardIcon } from '../shared/resolve-card-icon'
 import { TechTag } from '../shared/tech-tag'
 
@@ -16,9 +17,10 @@ export interface WorkspaceCardProps {
    */
   readonly href: string
   /**
-   * Icon config — Iconify identifier string or `{ id, color }` object.
+   * Icon config — Iconify identifier string, `{ id, color }` object, or
+   * `{ kind: 'image', src, alt }` for a static image asset.
    */
-  readonly icon?: string | { readonly id: string; readonly color: string }
+  readonly icon?: CardIconInput
   /**
    * Scope prefix shown above the name (e.g. "apps/").
    */
@@ -67,13 +69,9 @@ export function WorkspaceCard({
   const resolved = resolveCardIcon(icon)
 
   const iconEl = match(resolved)
-    .with(P.nonNullable, (r) => <Icon icon={r.id} />)
+    .with(P.nonNullable, (r) => <CardIcon resolved={r} className="cp-card__icon" />)
     .otherwise(() => null)
 
-  const iconColor = match(resolved)
-    .with(P.nonNullable, (r) => r.color)
-    .otherwise(() => 'purple')
-
   const scopeEl = match(scope)
     .with(
       P.when((s): s is string => s !== undefined && s.length > 0),
@@ -117,7 +115,7 @@ export function WorkspaceCard({
     <Card href={href} className="cp-workspace-card">
       <div className="cp-workspace-card__header">
         <div className="cp-workspace-card__identity">
-          <span className={`cp-card__icon cp-card__icon--${iconColor}`}>{iconEl}</span>
+          {iconEl}
           <div className="cp-workspace-card__title">
             {scopeEl}
             <span

package/dist/theme/hooks/use-ciderpress.ts

@@ -1,17 +1,17 @@
-import type { FooterConfig, HomeConfig, SiteConfig } from '@ciderpress/config'
+import type { BadgeConfig, FooterConfig, HomeConfig, SerializedIcon } from '@ciderpress/config'
 import { useSite } from '@rspress/core/runtime'
 
 export interface CiderpressSidebarItem {
   readonly text?: string
   readonly link?: string
-  readonly icon?: string
+  readonly icon?: SerializedIcon
   readonly items?: readonly CiderpressSidebarItem[]
 }
 
 export interface CiderpressSidebarLink {
   readonly text: string
   readonly link: string
-  readonly icon?: string | { readonly id: string; readonly color: string }
+  readonly icon?: SerializedIcon
   readonly style?: 'brand' | 'alt' | 'ghost'
   readonly shape?: 'square' | 'rounded' | 'circle'
 }
@@ -19,7 +19,7 @@ export interface CiderpressSidebarLink {
 export interface WorkspaceCardData {
   readonly title: string
   readonly href: string
-  readonly icon: string | { readonly id: string; readonly color: string } | undefined
+  readonly icon: SerializedIcon | undefined
   readonly scope: string | undefined
   readonly description: string | undefined
   readonly tags: readonly string[]
@@ -33,6 +33,65 @@ export interface WorkspaceGroupData {
   readonly cards: readonly WorkspaceCardData[]
 }
 
+/**
+ * Serialised view of the unified `CiderpressConfig` that the runtime
+ * theme components still read through. The `site` field is rebuilt in
+ * `packages/ui/src/config.ts` (`buildSiteBlock`) from the new top-level
+ * `editLink` / `reportLink` / `topbar` / `sidebar` / `footer` / `version`
+ * config — kept under the legacy `site.*` name so theme components don't
+ * need to be rewired to look up each field individually.
+ */
+export interface CiderpressSiteBlock {
+  readonly version: string | undefined
+  readonly edit:
+    | {
+        readonly repo: string
+        readonly branch?: string
+        readonly directory?: string
+        readonly label?: string
+      }
+    | undefined
+  readonly report:
+    | {
+        readonly repo: string
+        readonly branch?: string
+        readonly directory?: string
+        readonly label?: string
+      }
+    | undefined
+  readonly topbarCta: { readonly text: string; readonly href: string } | undefined
+  readonly sidebarPromo:
+    | {
+        readonly title: string
+        readonly body: string
+        readonly cta: { readonly text: string; readonly href: string }
+      }
+    | undefined
+  readonly announcement:
+    | {
+        readonly id?: string
+        readonly lead?: string
+        readonly message: string
+        readonly cta?: { readonly href: string; readonly label: string }
+        readonly persistent?: boolean
+      }
+    | undefined
+  readonly footer:
+    | {
+        readonly columns?: readonly {
+          readonly heading: string
+          readonly links: readonly { readonly text: string; readonly href: string }[]
+        }[]
+        readonly tagline?: string
+        readonly brandMark?: string
+      }
+    | undefined
+  readonly feedback: {
+    readonly enabled: boolean
+    readonly question: string | undefined
+  }
+}
+
 interface CiderpressThemeConfig {
   readonly sidebar: Record<string, readonly CiderpressSidebarItem[]>
   readonly sidebarAbove: readonly CiderpressSidebarLink[] | undefined
@@ -41,7 +100,8 @@ interface CiderpressThemeConfig {
   readonly standaloneScopePaths: readonly string[] | undefined
   readonly home: HomeConfig | undefined
   readonly ciderpressFooter: FooterConfig | undefined
-  readonly site: SiteConfig | undefined
+  readonly site: CiderpressSiteBlock | undefined
+  readonly pageBadges: Record<string, readonly BadgeConfig[]> | undefined
 }
 
 /**

package/dist/theme/hooks/use-nav-items.ts

@@ -1,3 +1,4 @@
+import { removeBase } from '@rspress/core/runtime'
 import { useEffect, useState } from 'react'
 
 import type { CiderpressNavMenuItem } from '../components/nav/ciderpress-nav-menu'
@@ -41,34 +42,104 @@ export function useNavItems(): readonly CiderpressNavMenuItem[] {
 }
 
 /**
- * Read every anchor under Rspress's hidden `.rp-nav-menu` and project
- * it into a `{ text, link }` item. Anchors with empty text or `href`
- * are dropped so we never surface a placeholder entry.
+ * Reconstruct the primary nav from Rspress's hidden `.rp-nav-menu`,
+ * preserving dropdowns. Each top-level `.rp-nav-menu__item` is either a
+ * leaf (its container is an anchor) or a dropdown parent (it wraps a
+ * `.rp-hover-group` of child links). Items with empty text, or dropdown
+ * parents with no usable children, are dropped.
  *
  * @private
  * @returns Nav items currently in the DOM (empty array when not mounted).
  */
 function scrapeNavItems(): readonly CiderpressNavMenuItem[] {
-  const anchors = document.querySelectorAll<HTMLAnchorElement>('.rp-nav-menu .rp-nav-menu__item a')
+  return navMenuRoots()
+    .map(scrapeNavItem)
+    .filter((item): item is CiderpressNavMenuItem => item !== null)
+}
+
+/**
+ * Collect the top-level `.rp-nav-menu__item` `<li>`s to scrape. Rspress
+ * renders separate left and right nav `<ul>`s; the ciderpress topbar is
+ * right-aligned, so we read the right menu and only fall back to the
+ * unscoped selector when it isn't present.
+ *
+ * @private
+ * @returns Top-level nav item elements.
+ */
+function navMenuRoots(): readonly HTMLElement[] {
+  const right = document.querySelectorAll<HTMLElement>('.rp-nav-menu--right > .rp-nav-menu__item')
+  if (right.length > 0) {
+    return [...right]
+  }
+  return [...document.querySelectorAll<HTMLElement>('.rp-nav-menu > .rp-nav-menu__item')]
+}
+
+/**
+ * Project a single top-level `.rp-nav-menu__item` element into a nav
+ * item, recursing one level into its `.rp-hover-group` dropdown when
+ * present.
+ *
+ * @private
+ * @param root - Top-level nav `<li>` element.
+ * @returns Parsed nav item, or `null` when unusable.
+ */
+function scrapeNavItem(root: HTMLElement): CiderpressNavMenuItem | null {
+  const container = root.querySelector(':scope > .rp-nav-menu__item__container')
+  if (container === null) {
+    return null
+  }
+  const text = readElementText(container)
+  if (text === '') {
+    return null
+  }
+  const group = root.querySelector(':scope > .rp-hover-group')
+  if (group !== null) {
+    const items = scrapeGroupItems(group)
+    if (items.length === 0) {
+      return null
+    }
+    return { text, items }
+  }
+  const href = container.getAttribute('href')
+  if (href === null || href === '') {
+    return null
+  }
+  // Un-base the scraped href so `<Link>` re-applies the site `base` once
+  // rather than doubling the mount prefix on subpath deploys.
+  return { text, link: removeBase(href) }
+}
+
+/**
+ * Read the child links out of a Rspress `.rp-hover-group` dropdown.
+ *
+ * @private
+ * @param group - The `.rp-hover-group` element.
+ * @returns Child nav items with text + link (empties dropped).
+ */
+function scrapeGroupItems(group: Element): readonly CiderpressNavMenuItem[] {
+  const anchors = group.querySelectorAll<HTMLAnchorElement>('.rp-hover-group__item__link')
   return [...anchors]
     .map((anchor) => ({
-      text: readAnchorText(anchor),
-      link: anchor.getAttribute('href') ?? '',
+      text: readElementText(anchor),
+      // Rspress's rendered hrefs already include the site `base`; strip it so
+      // the consuming `<Link>` re-applies it once instead of doubling the mount
+      // prefix on subpath deploys (the `/examples/<slug>/examples/<slug>/…` 404).
+      link: removeBase(anchor.getAttribute('href') ?? ''),
     }))
     .filter((item) => item.text !== '' && item.link !== '')
 }
 
 /**
- * Pull the trimmed text content from an anchor. Returns an empty
+ * Pull the trimmed text content from an element. Returns an empty
  * string when `textContent` is missing — callers treat empty as "skip
- * this anchor".
+ * this element".
  *
  * @private
- * @param anchor - Anchor element to read.
+ * @param element - Element to read.
  * @returns Trimmed inner text, or empty string when absent.
  */
-function readAnchorText(anchor: HTMLAnchorElement): string {
-  const text = anchor.textContent
+function readElementText(element: Element): string {
+  const text = element.textContent
   if (text === null) {
     return ''
   }

package/dist/theme/index.tsx

@@ -19,7 +19,6 @@ import '@rspress/core/dist/theme/components/Sidebar/SidebarDivider.css'
 import '@rspress/core/dist/theme/components/Sidebar/SidebarGroup.css'
 import '@rspress/core/dist/theme/components/Sidebar/SidebarItem.css'
 import '@rspress/core/dist/theme/components/Sidebar/SidebarSectionHeader.css'
-
 import './styles/layers.css'
 import './styles/overrides/fonts.css'
 import './styles/overrides/tokens.css'
@@ -39,6 +38,8 @@ import './styles/themes/arcade.css'
 // (border trace, neon pulse, CRT scanlines, etc.) scoped to [data-cp-theme='arcade']
 import './styles/themes/arcade-fx.css'
 import './styles/overrides/details.css'
+import './styles/overrides/lists.css'
+import './styles/overrides/footnotes.css'
 import './styles/overrides/scrollbar.css'
 import './styles/overrides/rail.css'
 import './styles/overrides/sidebar.css'
@@ -54,6 +55,7 @@ import './components/content-footer/feedback.css'
 import './components/content-footer/meta-actions.css'
 import './components/content-footer/page-pager.css'
 import './components/sidebar/framework-picker.css'
+import './components/sidebar/sidebar-badge.css'
 import './components/sidebar/sidebar-promo.css'
 import './components/sidebar/sidebar-toggle.css'
 import './components/home/page-rail.css'
@@ -90,6 +92,8 @@ export { HomeFeature } from './components/home/feature'
 export { HomeLayout } from './components/home/layout'
 /** @internal Sidebar override — multi-scope filtering for standalone sections */
 export { Sidebar } from './components/sidebar/sidebar-scope'
+/** @internal Tag override — renders ciderpress sidebar badges, delegates other tags to Rspress */
+export { Tag } from './components/sidebar/sidebar-badge'
 
 export { FeatureCard, FeatureGrid } from './components/home/feature-card'
 export type { FeatureCardProps, FeatureItem } from './components/home/feature-card'
@@ -150,8 +154,6 @@ export type { StepsProps, StepProps } from './components/shared/steps'
 export { Field, FieldGroup } from './components/shared/field'
 export type { FieldProps, FieldGroupProps } from './components/shared/field'
 
-export { CopyMarkdownButton } from './components/openapi'
-export type { CopyMarkdownButtonProps } from './components/openapi'
 export { OpenAPIOperation } from './components/openapi'
 export type { OpenAPIOperationProps } from './components/openapi'
 export { OpenAPIOverview } from './components/openapi'

package/dist/theme/lib/read-social-links.ts

@@ -2,8 +2,9 @@ import type { CiderpressSocialLink } from '../components/nav/ciderpress-nav-soci
 
 /**
  * Pull social-link entries (GitHub, npm, etc) from Rspress's `site`
- * shape. Lives on `site.themeConfig.socialLinks` after Rspress
- * normalisation but isn't surfaced on the public typings.
+ * shape. Lives on `site.themeConfig.socialLinks` after the
+ * `packages/ui/src/config.ts` serialiser writes the unified `socials`
+ * config into the runtime theme config.
  *
  * @param site - Rspress site data (typically the result of `useSite().site`)
  * @returns Array of social-link entries (empty array when not configured)
@@ -22,6 +23,6 @@ export function readSocialLinks(site: unknown): readonly CiderpressSocialLink[]
       typeof item === 'object' &&
       item !== null &&
       typeof (item as { icon?: unknown }).icon === 'string' &&
-      typeof (item as { content?: unknown }).content === 'string'
+      typeof (item as { url?: unknown }).url === 'string'
   )
 }

package/dist/theme/lib/theme-favicon.ts

@@ -107,7 +107,7 @@ function buildIconDataUri(brand: string, shadow: string, surface: string): strin
 /**
  * Locate the existing `<link rel="icon">` element, creating one if the
  * document head doesn't have one yet (a defensive fallback — Rspress
- * normally renders one from `config.icon`).
+ * normally renders one from `brand.favicon`).
  *
  * @private
  * @returns Mutable link element

package/dist/theme/lib/with-mount-base.ts

@@ -0,0 +1,31 @@
+import { withBase } from '@rspress/core/runtime'
+
+/**
+ * Prefix `value` with the configured Rspress `base` only when it's an
+ * absolute path that would otherwise escape the mount. Pass-through for
+ * data URIs, fully-qualified URLs, hash anchors, and relative paths —
+ * applying `withBase()` to those produces broken results (the kitchen-
+ * sink data-URI logo regression that the examples e2e caught).
+ *
+ * Use this wrapper at every render site that takes a user-supplied asset
+ * URL from the ciderpress config (`logo`, `heroDemo.src`, brand chips
+ * etc.), instead of calling `withBase()` directly.
+ *
+ * @param value - Asset URL or path from user config (may be `undefined`)
+ * @returns The base-prefixed URL when applicable, otherwise `value` as-is
+ */
+export function withMountBase(value: string | undefined): string {
+  if (value === undefined) {
+    return ''
+  }
+  if (!value.startsWith('/')) {
+    return value
+  }
+  // Data URIs (`data:image/svg+xml;...`) and protocol-relative or
+  // explicit-protocol URLs are absolute in their own namespace — never
+  // prefix.
+  if (value.startsWith('//') || /^[a-z][a-z0-9+\-.]*:/i.test(value)) {
+    return value
+  }
+  return withBase(value)
+}

package/dist/theme/styles/overrides/footnotes.css

@@ -0,0 +1,54 @@
+/**
+ * GFM footnote section styling — deliberately UNLAYERED.
+ *
+ * `remark-gfm` appends a `<section class="footnotes">` with an `<ol>` of
+ * definitions and a `#footnote-label` heading. Rspress tags that heading
+ * `sr-only` (visually hidden, kept for a11y + the on-this-page nav), but the
+ * theme never defined `.sr-only`, so it rendered as a full 1.75rem section
+ * heading and the definitions sat at body size with no separation from the
+ * content above — nothing like how GitHub and most renderers present footnotes.
+ *
+ * These rules are NOT in `ciderpress.overrides`: Rspress sizes headings with an
+ * unlayered, low-specificity `.rp-doc :not(:where(...)):where(h2)` rule
+ * (specificity 0,1,0), and layer-scoped rules always lose to unlayered ones
+ * regardless of specificity. Match Rspress's approach — unlayered, class-scoped
+ * under `.rp-doc` (specificity 0,2,0+ > 0,1,0) — so the label restyle actually
+ * wins. Restores the expected treatment: a top-border separator, a small muted
+ * label, and compact muted definition text set apart from the body.
+ */
+
+.rp-doc .footnotes {
+  margin-block-start: 2.5rem;
+  padding-block-start: 1.25rem;
+  border-block-start: 1px solid var(--cp-c-border);
+  font-size: 0.85em;
+  color: var(--cp-c-text-2);
+}
+
+.rp-doc .footnotes > h2 {
+  margin: 0 0 0.75rem;
+  padding: 0;
+  border: 0;
+  font-size: 0.75rem;
+  font-weight: 600;
+  letter-spacing: 0.05em;
+  text-transform: uppercase;
+  color: var(--cp-c-text-3);
+}
+
+.rp-doc .footnotes ol {
+  margin: 0;
+}
+
+.rp-doc .footnotes li {
+  margin-block: 0.35rem;
+}
+
+.rp-doc .footnotes li p {
+  margin: 0.25rem 0;
+}
+
+.rp-doc .data-footnote-backref {
+  margin-inline-start: 0.35em;
+  text-decoration: none;
+}

package/dist/theme/styles/overrides/lists.css

@@ -0,0 +1,83 @@
+/**
+ * Content list markers — fixed-width marker gutter.
+ *
+ * Rspress renders list markers `outside`, which right-aligns them to the text
+ * edge: a wide decimal marker (`10.`, `99.`) hangs further left than a bullet,
+ * so the marker column differs between `ol` and `ul` and numbers drift into the
+ * body-text margin. Text lines up, but the markers do not.
+ *
+ * Replace the native markers with a fixed-width gutter shared by `ol` and `ul`,
+ * sized for two digits (`99.`). Every marker occupies the same column, decimal
+ * points align, and list text starts at the same offset regardless of marker
+ * width. `ol` numbering comes from the automatic `list-item` counter (still
+ * incremented under `list-style: none`), so nested lists and `start` offsets
+ * keep working. The marker is absolutely positioned in the `li` inline padding
+ * so it aligns to the first line whether the item holds inline text (tight
+ * lists) or a block `<p>` (loose lists, e.g. footnote definitions); wrapped and
+ * following lines hang under the text.
+ *
+ * Deliberately UNLAYERED: Rspress sets base list padding with an unlayered,
+ * low-specificity `.rp-doc :not(:where(...)):where(ol|ul)` rule (specificity
+ * 0,1,0). Layer-scoped rules always lose to unlayered ones regardless of
+ * specificity, so these match Rspress's approach — unlayered, class-scoped under
+ * `.rp-doc` (specificity 0,2,0+ > 0,1,0).
+ *
+ * Task lists (GFM `- [ ]`) are excluded — they render a checkbox instead of a
+ * marker; see the dedicated rules below.
+ */
+
+.rp-doc :where(ol, ul):not(.contains-task-list) {
+  list-style: none;
+  padding-inline-start: 0;
+}
+
+.rp-doc :where(ol, ul):not(.contains-task-list) > li {
+  position: relative;
+  padding-inline-start: 2.1em;
+  margin-block: 0.35rem;
+}
+
+.rp-doc :where(ol, ul):not(.contains-task-list) > li::before {
+  position: absolute;
+  inset-inline-start: 0;
+  width: 1.6em;
+  text-align: end;
+}
+
+.rp-doc ol:not(.contains-task-list) > li::before {
+  content: counter(list-item) '.';
+}
+
+.rp-doc ul:not(.contains-task-list) > li::before {
+  content: '•';
+  box-sizing: border-box;
+  padding-inline-end: 0.22em;
+}
+
+/*
+ * Task-list normalization — deliberately UNLAYERED (same specificity reasoning
+ * as above). GFM leaves a `disc` bullet on `- [ ]` items next to the checkbox;
+ * hide it, then seat the item in the SAME marker gutter as ordered/unordered
+ * lists so task text lines up with every other list. The checkbox is absolutely
+ * positioned in the gutter (right edge at the marker column, centered on the
+ * first line), so text starts at the shared 2.5em offset regardless of the
+ * checkbox's intrinsic size.
+ */
+.rp-doc .contains-task-list {
+  list-style: none;
+  padding-inline-start: 0;
+}
+
+.rp-doc .task-list-item {
+  position: relative;
+  list-style: none;
+  padding-inline-start: 2.1em;
+  margin-block: 0.35rem;
+}
+
+.rp-doc .task-list-item > input[type='checkbox'] {
+  position: absolute;
+  inset-inline-start: 0.8em;
+  inset-block-start: 0.45em;
+  margin: 0;
+}

package/dist/theme/styles/overrides/rail.css

@@ -145,18 +145,22 @@ html .rp-doc-layout__sidebar > :first-child:not(.cp-sidebar-top) {
 }
 
 html .cp-sidebar-bottom {
-  /* Grow to fill the remaining sidebar space so the nav tree stacks
-     from the top and this band occupies everything below it. When the
-     nav tree is short, the band is tall and its content (promo +
-     below-links) sits at its bottom via `justify-content: flex-end`. */
-  flex: 1 0 auto;
+  /* Size to content and sit directly under the nav tree. `flex: 0 0 auto`
+     (no grow) is deliberate: growing to fill (`1 0 auto`) stretched the
+     band across all leftover sidebar height, and a short nav tree left a
+     tall empty band with its content (promo + below-links) stranded at the
+     bottom. With no grow the band is exactly as tall as its content and
+     the promo/links hug the last nav item. */
+  flex: 0 0 auto;
   display: flex;
   flex-direction: column;
-  justify-content: flex-end;
-  /* When the sidebar scrolls (nav tree taller than viewport), this band
-     stays glued to the viewport bottom so the promo is always visible.
-     `z-index: 3` so the band paints above the thin overlay scrollbar
-     thumb so it doesn't appear to "go through" the band region. */
+  /* When the nav tree overflows the viewport the sidebar scrolls; this
+     band stays glued to the viewport bottom (`sticky bottom: 0`) so the
+     promo/links remain visible while the tree scrolls behind them. With a
+     short (non-scrolling) nav tree the sticky offset is never engaged, so
+     the band simply flows under the last nav item. `z-index: 3` paints it
+     above the thin overlay scrollbar thumb so it doesn't appear to "go
+     through" the band region. */
   position: sticky;
   bottom: 0;
   z-index: 3;
@@ -189,6 +193,19 @@ html .rp-outline__title {
   display: none;
 }
 
+/* "On this page" outline — truncate long headings to a single line with
+   an ellipsis instead of wrapping. Rspress already sets a native `title`
+   on each `.rp-toc-item` anchor, so hovering a truncated heading reveals
+   the full text. Targets `.rp-toc-item__text`, shared by the desktop
+   rail and the mobile outline dropdown. */
+html .rp-toc-item__text {
+  display: block;
+  min-width: 0;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
 html .rp-doc-layout__doc {
   background: var(--cp-c-bg);
 }

package/dist/theme/styles/overrides/section-card.css

@@ -31,6 +31,15 @@
   gap: 10px;
 }
 
+/* Page badges pinned to the right of the card title row. */
+.cp-section-card__badges {
+  margin-left: auto;
+  display: inline-flex;
+  align-items: center;
+  gap: 4px;
+  flex: 0 0 auto;
+}
+
 .cp-section-card:hover {
   border-color: var(--cp-c-brand-1);
   background: var(--cp-c-bg-elv);

package/dist/theme/styles/overrides/sidebar.css

@@ -24,6 +24,28 @@
     }
   }
 
+  /* ── Long titles — single-line ellipsis, badge stays pinned ──── */
+  /* The item's left slot holds the label; constrain it so the label
+     truncates instead of pushing the badge (right slot) out of view.
+     A `title` attribute is added by the Sidebar effect on overflow. */
+  html .rp-sidebar-item__left {
+    min-width: 0;
+    flex: 1 1 auto;
+    overflow: hidden;
+  }
+
+  html .rp-sidebar-item__left > .rp-doc {
+    min-width: 0;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+  }
+
+  html .rp-sidebar-item__right {
+    flex: 0 0 auto;
+    margin-left: 6px;
+  }
+
   /* ── Group section headers — mono ALL CAPS (mockup pattern) ──── */
   html .rp-sidebar-section-header {
     font-family: var(--cp-font-family-mono);