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

package/src/theme/lib/rich-text.test.tsx

@@ -0,0 +1,342 @@
+import { renderToStaticMarkup } from 'react-dom/server'
+import { describe, it, expect, vi } from 'vitest'
+
+import { hasAccentMarker, isPlainText, renderRichText, toPlainText } from './rich-text.tsx'
+
+// `RouteLink` pulls in Rspress's router, which resolves the
+// `virtual-routes` module only inside a real build. Stand in a plain
+// anchor so link output is assertable.
+vi.mock('@rspress/core/runtime', async () => {
+  const react = await import('react')
+  return {
+    Link: (props: { readonly to: string; readonly children?: React.ReactNode }) =>
+      react.createElement('a', { href: props.to }, props.children),
+  }
+})
+
+describe('renderRichText()', () => {
+  it('should render plain copy unchanged', () => {
+    expect(html('Beautiful docs')).toBe('Beautiful docs')
+  })
+
+  it('should render emphasis markers as a branded strong', () => {
+    expect(html('Ship **fast**')).toContain('<strong class="cp-accent">fast</strong>')
+  })
+
+  it('should render html strong as plain bold, without the accent', () => {
+    const out = html('Ship <strong>fast</strong>')
+    expect(out).toContain('<strong>fast</strong>')
+    expect(out).not.toContain('cp-accent')
+  })
+
+  it('should render italic markers as em', () => {
+    expect(html('Ship *fast*')).toContain('<em>fast</em>')
+  })
+
+  it('should accent only the marked words', () => {
+    const out = html('Docs, **Zero Effort**')
+    expect(out).toContain('Docs, ')
+    expect(out).toContain('<strong class="cp-accent">Zero Effort</strong>')
+  })
+
+  it('should render highlight markers as a tinted mark', () => {
+    expect(html('Now with ==OpenAPI==')).toContain('<mark class="cp-mark">OpenAPI</mark>')
+  })
+
+  it('should keep highlight and accent distinct', () => {
+    const out = html('**accent** and ==highlight==')
+    expect(out).toContain('<strong class="cp-accent">accent</strong>')
+    expect(out).toContain('<mark class="cp-mark">highlight</mark>')
+  })
+
+  it('should render code spans literally', () => {
+    expect(html('Run `ciderpress dev`')).toContain('<code>ciderpress dev</code>')
+  })
+
+  it('should not parse markers inside a code span', () => {
+    expect(html('`**not accented**`')).toContain('<code>**not accented**</code>')
+  })
+
+  it('should render an external markdown link as an anchor', () => {
+    const out = html('See [the site](https://example.com)')
+    expect(out).toContain('href="https://example.com"')
+    expect(out).toContain('the site')
+  })
+
+  it('should render an internal markdown link', () => {
+    expect(html('See [the guide](/guides)')).toContain('href="/guides"')
+  })
+
+  it('should render a whitelisted anchor tag', () => {
+    expect(html('<a href="/guides">docs</a>')).toContain('href="/guides"')
+  })
+
+  it('should drop an anchor tag with an unsafe scheme but keep its text', () => {
+    const out = html('<a href="javascript:alert(1)">click</a>')
+    expect(out).not.toContain('javascript')
+    expect(out).toContain('click')
+  })
+
+  it('should drop a markdown link with an unsafe scheme but keep its text', () => {
+    const out = html('[click](javascript:alert(1))')
+    expect(out).not.toContain('javascript')
+    expect(out).not.toContain('<a')
+    expect(out).toContain('click')
+  })
+
+  it('should keep the class attribute on a whitelisted tag', () => {
+    expect(html('<span class="x">hi</span>')).toContain('<span class="x">hi</span>')
+  })
+
+  it('should drop event handler attributes', () => {
+    const out = html('<span onclick="alert(1)">hi</span>')
+    expect(out).not.toContain('onclick')
+    expect(out).toContain('hi')
+  })
+
+  it('should drop script tags and their contents', () => {
+    const out = html('safe<script>alert(1)</script>after')
+    expect(out).not.toContain('alert')
+    expect(out).toContain('safe')
+    expect(out).toContain('after')
+  })
+
+  it('should drop an unterminated script tag and everything after it', () => {
+    const out = html('safe<script>alert(1)')
+    expect(out).not.toContain('alert')
+    expect(out).toContain('safe')
+  })
+
+  it('should unwrap unknown tags but keep their text', () => {
+    const out = html('<div>kept</div>')
+    expect(out).not.toContain('<div>')
+    expect(out).toContain('kept')
+  })
+
+  it('should drop an img tag but keep surrounding copy', () => {
+    const out = html('<img src="x" onerror="alert(1)">shown')
+    expect(out).not.toContain('onerror')
+    expect(out).not.toContain('<img')
+    expect(out).toContain('shown')
+  })
+
+  it('should render br as a line break', () => {
+    expect(html('a<br>b')).toContain('<br/>')
+  })
+
+  it('should render a self-closed br', () => {
+    expect(html('a<br />b')).toContain('<br/>')
+  })
+
+  it('should render a self-closed whitelisted tag as empty', () => {
+    expect(html('a<span class="x" />b')).toContain('<span class="x"></span>')
+  })
+
+  it('should keep attributes on a tag with extra whitespace', () => {
+    expect(html('<span   class="x"   >hi</span>')).toContain('<span class="x">hi</span>')
+  })
+
+  it('should nest markup inside an accent', () => {
+    expect(html('**Zero `dev` Effort**')).toContain('<code>dev</code>')
+  })
+
+  it('should leave a stray closing tag out of the output', () => {
+    const out = html('text</span>')
+    expect(out).not.toContain('</span>')
+    expect(out).toContain('text')
+  })
+
+  it('should return null for empty copy', () => {
+    expect(renderRichText('')).toBeNull()
+  })
+})
+
+describe('toPlainText()', () => {
+  it('should strip accent markers', () => {
+    expect(toPlainText('Docs, **Zero Effort**')).toBe('Docs, Zero Effort')
+  })
+
+  it('should strip highlight markers', () => {
+    expect(toPlainText('Now with ==OpenAPI== support')).toBe('Now with OpenAPI support')
+  })
+
+  it('should strip emphasis and italic markers', () => {
+    expect(toPlainText('Ship **fast** and *typed*')).toBe('Ship fast and typed')
+  })
+
+  it('should keep code span contents', () => {
+    expect(toPlainText('Run `ciderpress dev`')).toBe('Run ciderpress dev')
+  })
+
+  it('should reduce a link to its label', () => {
+    expect(toPlainText('See [the guide](/guides)')).toBe('See the guide')
+  })
+
+  it('should strip html tags but keep their text', () => {
+    expect(toPlainText('Ship <strong>fast</strong>')).toBe('Ship fast')
+  })
+
+  it('should drop script contents', () => {
+    expect(toPlainText('safe<script>alert(1)</script>')).toBe('safe')
+  })
+
+  it('should return an empty string for empty copy', () => {
+    expect(toPlainText('')).toBe('')
+  })
+})
+
+describe('hasAccentMarker()', () => {
+  it('should detect an accent marker', () => {
+    expect(hasAccentMarker('Docs, **Zero Effort**')).toBe(true)
+  })
+
+  it('should return false without a marker', () => {
+    expect(hasAccentMarker('Docs, Zero Effort')).toBe(false)
+  })
+
+  it('should return false for a lone marker', () => {
+    expect(hasAccentMarker('a ** b')).toBe(false)
+  })
+
+  it('should not treat html strong as an explicit accent', () => {
+    expect(hasAccentMarker('Docs, <strong>Zero Effort</strong>')).toBe(false)
+  })
+
+  it('should not treat a highlight marker as an accent', () => {
+    expect(hasAccentMarker('Docs, ==Zero Effort==')).toBe(false)
+  })
+
+  it('should not treat a marker inside a code span as an accent', () => {
+    expect(hasAccentMarker('Write `**bold**` for the accent')).toBe(false)
+  })
+
+  it('should detect an accent nested inside a link', () => {
+    expect(hasAccentMarker('[**Docs**](/docs)')).toBe(true)
+  })
+})
+
+describe('isPlainText()', () => {
+  it('should return true for unmarked copy', () => {
+    expect(isPlainText('Beautiful Docs, Zero Effort')).toBe(true)
+  })
+
+  it('should return false for copy carrying a link', () => {
+    expect(isPlainText('See [the guide](/guides)')).toBe(false)
+  })
+
+  it('should return false for copy carrying a code span', () => {
+    expect(isPlainText('Run `ciderpress dev`')).toBe(false)
+  })
+
+  it('should return false for copy carrying html', () => {
+    expect(isPlainText('Ship <strong>fast</strong>')).toBe(false)
+  })
+})
+
+describe('tag nesting', () => {
+  // `indexOf('</' + tag)` matched `</span>` when closing `</s`, so the inner
+  // element vanished and the outer one ended early, letting trailing copy
+  // escape its styling. Every whitelisted tag that prefixes another hit it.
+  it('should not close a tag on a longer tag that shares its prefix', () => {
+    expect(html('<s>a <span>b</span> c</s>')).toBe('<s>a <span>b</span> c</s>')
+  })
+
+  it('should nest strong inside s', () => {
+    expect(html('<s>strike <strong>x</strong> tail</s>')).toBe(
+      '<s>strike <strong>x</strong> tail</s>'
+    )
+  })
+
+  it('should nest ins inside i', () => {
+    expect(html('<i>a <ins>b</ins> c</i>')).toBe('<i>a <ins>b</ins> c</i>')
+  })
+
+  it('should keep an attribute value containing a closing bracket', () => {
+    expect(html('<span title="a > b">hi</span>')).toBe('<span title="a &gt; b">hi</span>')
+  })
+
+  it('should still strip a script nested inside another tag', () => {
+    expect(html('<s>a<script>alert(1)</script>b</s>')).toBe('<s>ab</s>')
+  })
+})
+
+describe('escaping', () => {
+  // A docs framework has to be able to name a glob in its own copy.
+  it('should leave glob syntax alone', () => {
+    expect(html('Glob patterns like *.md and **/*.ts')).toBe('Glob patterns like *.md and **/*.ts')
+  })
+
+  it('should not italicise a spaced asterisk', () => {
+    expect(html('2 * 3 * 4')).toBe('2 * 3 * 4')
+  })
+
+  it('should render an escaped marker literally', () => {
+    expect(html('literal \\*not italic\\*')).toBe('literal *not italic*')
+  })
+
+  it('should strip markers out of plain text without eating the glob', () => {
+    expect(toPlainText('Glob **/*.ts')).toBe('Glob **/*.ts')
+  })
+
+  it('should still italicise a properly flanked marker', () => {
+    expect(html('*café*')).toBe('<em>café</em>')
+  })
+
+  it('should not let a stray asterisk swallow a later accent', () => {
+    expect(html('**Fast** builds * **typed** config')).toBe(
+      '<strong class="cp-accent">Fast</strong> builds * <strong class="cp-accent">typed</strong> config'
+    )
+  })
+})
+
+describe('links', () => {
+  it('should keep balanced parens in a destination', () => {
+    expect(html('[wiki](https://en.wikipedia.org/wiki/Foo_(bar))')).toContain(
+      'href="https://en.wikipedia.org/wiki/Foo_(bar)"'
+    )
+  })
+
+  it('should not leave a stray bracket after a parenthesised destination', () => {
+    expect(html('[wiki](https://en.wikipedia.org/wiki/Foo_(bar))')).not.toContain('</a>)')
+  })
+
+  // An anchor with no accessible name announces as a bare "link".
+  it('should drop a link with an empty label', () => {
+    expect(html('[](/x)')).toBe('')
+  })
+
+  // Nested anchors are invalid DOM — React warns and browsers split the tree.
+  it('should not nest an anchor inside an anchor', () => {
+    expect(html('<a href="/a">see [b](/c)</a>')).toBe('<a href="/a">see b</a>')
+  })
+
+  it('should still reject a javascript destination', () => {
+    expect(html('<a href="javascript:alert(1)">x</a>')).toBe('x')
+  })
+})
+
+describe('long input', () => {
+  // Self-recursion added a frame per token, so long copy overflowed the
+  // stack with an unattributed RangeError that failed the whole build.
+  it('should parse many tokens without exhausting the stack', () => {
+    expect(() => renderRichText('*a* '.repeat(9000))).not.toThrow()
+  })
+
+  // Closing-tag lookup had the same shape: it recursed once per `</tag`
+  // occurrence in the remainder rather than per nesting level, so a run of
+  // prefix hits overflowed the stack on markup only one level deep.
+  it('should scan past many close-tag prefixes without exhausting the stack', () => {
+    expect(() => renderRichText(`<s>${'</should'.repeat(30000)}`)).not.toThrow()
+  })
+})
+
+/**
+ * Render copy to static markup for assertions.
+ *
+ * @private
+ * @param text - Raw copy to render
+ * @returns Rendered HTML string
+ */
+function html(text: string): string {
+  return renderToStaticMarkup(<>{renderRichText(text)}</>)
+}

package/src/theme/lib/rich-text.tsx

@@ -0,0 +1,86 @@
+import { match } from 'massaman/match'
+import type React from 'react'
+import { createElement } from 'react'
+
+import type { InlineNode } from './rich-text-parse.ts'
+import { parseRichText } from './rich-text-parse.ts'
+import { RouteLink } from './route-link.tsx'
+
+export { hasAccentMarker, isPlainText, toPlainText } from './rich-text-parse.ts'
+
+/**
+ * Render config copy as React nodes, applying an inline-only markdown
+ * subset plus a whitelist of inline HTML.
+ *
+ * Supported: `**accent**`, `*italic*`, `` `code` ``, `[text](/href)`,
+ * `<br>`, and a whitelist of inline tags. Parsing and
+ * sanitizing happen in `rich-text-parse`; this renders the resulting
+ * nodes as React elements, so `dangerouslySetInnerHTML` is never
+ * involved and unknown markup cannot execute.
+ *
+ * @param text - Raw string from config or frontmatter
+ * @returns React nodes ready to render inline
+ *
+ * @example
+ * renderRichText('Beautiful Docs, **Zero Effort**')
+ * renderRichText('Runs on `ciderpress dev` — see [the guide](/guides).')
+ */
+export function renderRichText(text: string): React.ReactNode {
+  const nodes = parseRichText(text)
+  if (nodes.length === 0) {
+    return null
+  }
+  return renderNodes(nodes)
+}
+
+interface RichTextProps {
+  /**
+   * Raw copy to render.
+   */
+  readonly text: string
+}
+
+/**
+ * Component form of {@link renderRichText}, for call sites that read
+ * better as an element than a function call.
+ *
+ * @param props - Raw copy to render
+ * @returns Rendered inline nodes
+ */
+export function RichText(props: RichTextProps): React.ReactElement {
+  return <>{renderRichText(props.text)}</>
+}
+
+/**
+ * Render parsed nodes to React, keyed by position.
+ *
+ * @private
+ * @param nodes - Parsed inline nodes
+ * @returns React nodes
+ */
+function renderNodes(nodes: readonly InlineNode[]): React.ReactNode {
+  return nodes.map((node, index) => <RichNode key={index} node={node} />)
+}
+
+interface RichNodeProps {
+  readonly node: InlineNode
+}
+
+/**
+ * Render one parsed node.
+ *
+ * @private
+ * @param props - The node to render
+ * @returns React element
+ */
+function RichNode(props: RichNodeProps): React.ReactElement {
+  return match(props.node)
+    .with({ kind: 'text' }, (n) => <>{n.value}</>)
+    .with({ kind: 'code' }, (n) => <code>{n.value}</code>)
+    .with({ kind: 'break' }, () => <br />)
+    .with({ kind: 'link' }, (n) => <RouteLink href={n.href}>{renderNodes(n.children)}</RouteLink>)
+    .with({ kind: 'element' }, (n) =>
+      createElement(n.tag, { className: n.className, title: n.title }, renderNodes(n.children))
+    )
+    .exhaustive()
+}

package/src/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/src/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/src/theme/styles/overrides/fonts.css

@@ -1,10 +1,13 @@
 /**
  * Self-hosted Geist fonts (vercel/geist-font).
  *
- * `Geist` is the base sans-serif (used everywhere by default).
- * `Geist Pixel Square` is a decorative pixel font kept available via
- * `--cp-font-family-pixel` for the brand mark and any opt-in surfaces.
- * `Geist Mono` is used for code, eyebrow labels, status pills, etc.
+ * These `@font-face` rules only make the faces *available*. Which face a
+ * surface actually uses is decided by the active theme's `fonts.family`
+ * tokens — see `styles/overrides/tokens.css`. The built-in themes map
+ * `mono` to `Geist Mono` and `display` to `Geist Pixel Square`, and leave
+ * `sans` proportional (the Inter stack) so body, nav, sidebar and hero copy
+ * stay readable; `Geist` is shipped for custom themes that want a
+ * proportional face from this family instead.
  */
 
 @font-face {

package/src/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/src/theme/styles/overrides/home.css

@@ -158,10 +158,18 @@
     font-size: 11px;
     text-transform: uppercase;
     letter-spacing: 0.1em;
-    color: var(--cp-c-brand-1);
+    /* Eyebrows are 11px, so the 4.5:1 bar applies. `--cp-c-brand-1` is a fill
+       colour and misses it in four theme/variant pairs (2.38:1 on mulled dark,
+       4.10:1 on honeycrisp dark, ~3.1:1 on amber and grannysmith light), so
+       take the same shade pair `.cp-accent` uses — see styles/rich-text.css. */
+    color: var(--cp-c-brand-2, var(--cp-c-brand-1));
     margin-bottom: 12px;
   }
 
+  html[data-cp-variant='dark'] .cp-feature-section-head__eyebrow {
+    color: var(--cp-c-brand-light, var(--cp-c-brand-1));
+  }
+
   .cp-feature-section-head__title {
     font-size: clamp(28px, 4vw, 44px);
     font-weight: 600;
@@ -183,7 +191,8 @@
    through as hairlines between cells. Each cell paints its own panel bg. */
   .cp-feature-grid {
     display: grid;
-    grid-template-columns: repeat(3, 1fr);
+    /* `--cp-feature-cols` is set inline from the block's `columns` key. */
+    grid-template-columns: repeat(var(--cp-feature-cols, 3), 1fr);
     gap: 1px;
     background: var(--cp-c-border);
     border: 1px solid var(--cp-c-border);

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