@duro-app/ui 5.21.0 → 5.23.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@duro-app/ui",
-  "version": "5.21.0",
+  "version": "5.23.0",
   "type": "module",
   "license": "MIT",
   "repository": {
@@ -92,7 +92,7 @@
   "dependencies": {
     "@tanstack/react-virtual": "^3.14.13",
     "qrcode": "^1.5.4",
-    "@duro-app/tokens": "^5.21.0"
+    "@duro-app/tokens": "^5.23.0"
   },
   "devDependencies": {
     "@babel/preset-typescript": "^7.28.0",

package/src/components/AppShell/AppShell.meta.ts

@@ -2,7 +2,7 @@ import type {ComponentMeta} from '../component-meta'
 
 export const meta: ComponentMeta = {
   description:
-    "An application's frame: a navigation rail (a labelled nav, the brand at its top, an optional footer at its foot) beside the main content (main), with an optional Header. Below collapseBelow (sm default, md or lg), measured on the shell's own width, the rail is hidden and one sticky bar (a banner, appBarH tall) holds a Menu button that opens the same navigation in a left Drawer, the brand, and the Header's content when there is one — a shell without a Header still has its navigation on a phone. Above it the Header is a row that scrolls with the page and the rail stays sticky. CSS makes the switch: the server renders one HTML for every width with the brand in both places, and display: none hides the inactive copy, so nothing moves after hydration. A skip link (the first tab stop) focuses Main; an Aside inside Main sticks below the bar. Labels come from props. Compound component — Root is required. On React Native it is always the narrow shape: the bar below the status bar, Main under it, and the Rail in a left Drawer; there is no skip link.",
+    "An application's frame: a navigation rail (a labelled nav, the brand at its top, an optional footer at its foot) beside the main content (main), with an optional Header. Below collapseBelow (sm default, md or lg), measured on the shell's own width, the rail is hidden and one sticky bar (a banner, appBarH tall) holds a Menu button that opens the same navigation in a left Drawer, the brand, and the Header's content when there is one — a shell without a Header still has its navigation on a phone. Above it the Header is a row that scrolls with the page and the rail stays sticky. CSS makes the switch: the server renders one HTML for every width with the brand in both places, and display: none hides the inactive copy, so nothing moves after hydration. A skip link (the first tab stop) focuses Main; an Aside inside Main sticks below the bar. Labels come from props. Compound component — Root is required. On React Native it is always the narrow shape: the bar below the status bar, Main under it, and the Rail in a left Drawer; there is no skip link. scroll=\"main\" makes it an app frame rather than a page: the shell is the viewport's height and Main scrolls on its own, so a SplitPane or VirtualList inside it fills Main and scrolls its own panes.",
   whenToUse: [
     'The frame of an app with a persistent navigation rail: an admin, a docs site, a dashboard',
     'A layout whose navigation must collapse into a drawer on a phone',

package/src/components/AppShell/AppShell.native.tsx

@@ -18,6 +18,7 @@ import {InLandmarkContext} from '../../shared/InLandmarkContext'
 import {nativeStyles} from './native.css'
 
 export type AppShellCollapse = 'sm' | 'md' | 'lg'
+export type AppShellScroll = 'page' | 'main'
 
 interface AppShellContextValue {
   open: boolean
@@ -47,6 +48,8 @@ interface RootProps {
   brand?: ReactNode
   /** Web only: a phone is below every breakpoint, so native always shows the bar and the drawer. */
   collapseBelow?: AppShellCollapse
+  /** Web only: native Main always fills the screen under the bar and its content scrolls itself. */
+  scroll?: AppShellScroll
   /** `AppShell.Rail`, `AppShell.Main` and an optional `AppShell.Header`, as direct children. */
   children: ReactNode
 }

package/src/components/AppShell/AppShell.stories.tsx

@@ -20,6 +20,8 @@ import {TextLink} from '../TextLink/TextLink'
 import {Aside} from '../Aside/Aside'
 import {Stack} from '../Stack/Stack'
 import {Prose} from '../Prose/Prose'
+import {SplitPane} from '../SplitPane/SplitPane'
+import {VirtualList} from '../VirtualList/VirtualList'
 
 // --- the story's frame -----------------------------------------------------
 
@@ -853,3 +855,69 @@ export const MenuButtonTouchTarget: Story = {
     })
   },
 }
+
+const ROWS = Array.from({length: 500}, (_, i) => ({id: i, text: `Message ${i + 1}`}))
+
+/**
+ * `scroll="main"`: an app, not a document. The shell is the viewport's height and Main scrolls on
+ * its own, so a SplitPane inside it fills Main and each pane scrolls by itself — here a 500-row
+ * VirtualList that mounts only the rows in view.
+ */
+export const ScrollMain: Story = {
+  render: () => (
+    <AppShell.Root
+      menuLabel="Menu"
+      closeLabel="Close navigation"
+      skipLabel="Skip to content"
+      brand={BRAND}
+      scroll="main"
+    >
+      <AppShell.Rail aria-label="Navigation">
+        <SideNav.Root value="/sessions">
+          <SideNav.Item value="/sessions">Sessions</SideNav.Item>
+        </SideNav.Root>
+      </AppShell.Rail>
+      <AppShell.Main>
+        <SplitPane.Root
+          aria-label="Resize the session list"
+          defaultSize="sidebarW"
+          minSize="sidebarW"
+          maxSize="panelLg"
+        >
+          <SplitPane.Pane>
+            <Text>Sessions</Text>
+          </SplitPane.Pane>
+          <SplitPane.Handle />
+          <SplitPane.Pane>
+            <VirtualList
+              aria-label="Transcript"
+              items={ROWS}
+              getKey={(row) => row.id}
+              estimateSize="controlLg"
+              anchor="end"
+              renderItem={(row) => <Text>{row.text}</Text>}
+            />
+          </SplitPane.Pane>
+        </SplitPane.Root>
+      </AppShell.Main>
+    </AppShell.Root>
+  ),
+}
+
+/** ScrollMain's checks: Main stays within the viewport and the list windows its rows. */
+export const ScrollMainBoundsMain: Story = {
+  ...ScrollMain,
+  tags: TEST_ONLY,
+  play: async () => {
+    const main = document.querySelector('main')!
+    const list = await waitFor(() => page().getByRole('list', {name: 'Transcript'}))
+    await waitFor(() =>
+      expect(list.querySelectorAll('[role="listitem"]').length).toBeGreaterThan(0),
+    )
+    await expect(main.getBoundingClientRect().bottom).toBeLessThanOrEqual(window.innerHeight)
+    await expect(list.querySelectorAll('[role="listitem"]').length).toBeLessThan(100)
+    await expect(list.scrollHeight).toBeGreaterThan(list.clientHeight)
+    // The document itself does not scroll: Main does.
+    await expect(document.documentElement.scrollHeight).toBeLessThanOrEqual(window.innerHeight)
+  },
+}

package/src/components/AppShell/AppShell.tsx

@@ -39,6 +39,8 @@ import {styles} from './styles.css'
  * stop) focuses. */
 
 export type AppShellCollapse = 'sm' | 'md' | 'lg'
+/** `page`: the document scrolls (a docs site). `main`: the shell is the viewport, Main scrolls (an app). */
+export type AppShellScroll = 'page' | 'main'
 
 interface AppShellContextValue {
   open: boolean
@@ -46,6 +48,7 @@ interface AppShellContextValue {
   closeLabel: string
   brand: ReactNode
   collapseBelow: AppShellCollapse
+  scroll: AppShellScroll
   mainId: string
   mainRef: RefObject<HTMLElement | null>
 }
@@ -109,6 +112,13 @@ interface RootProps {
    * becomes a Drawer behind the Menu button. Default `sm`.
    */
   collapseBelow?: AppShellCollapse
+  /**
+   * What scrolls. `page` (default): the document, a page that grows with its
+   * content. `main`: the shell is exactly the viewport's height and Main
+   * scrolls on its own, so a SplitPane or VirtualList inside it can fill Main
+   * and scroll its own panes (an app such as a chat or a mail client).
+   */
+  scroll?: AppShellScroll
   /**
    * `AppShell.Rail`, `AppShell.Main` and an optional `AppShell.Header`, as
    * direct children (Root places the Header's content in its bar).
@@ -122,6 +132,7 @@ function Root({
   skipLabel,
   brand,
   collapseBelow = 'sm',
+  scroll = 'page',
   children,
 }: RootProps) {
   const [open, setOpen] = useState(false)
@@ -165,8 +176,8 @@ function Root({
   }, [open])
 
   const value = useMemo(
-    () => ({open, setOpen, closeLabel, brand, collapseBelow, mainId, mainRef}),
-    [open, closeLabel, brand, collapseBelow, mainId],
+    () => ({open, setOpen, closeLabel, brand, collapseBelow, scroll, mainId, mainRef}),
+    [open, closeLabel, brand, collapseBelow, scroll, mainId],
   )
 
   // Focus Main itself (tabIndex -1), not just scroll to it, and leave the
@@ -179,7 +190,7 @@ function Root({
   return (
     <AppShellContext.Provider value={value}>
       <html.div ref={containerRef} style={styles.container}>
-        <html.div style={[styles.grid, variant.grid]}>
+        <html.div style={[styles.grid, variant.grid, scroll === 'main' && styles.gridViewport]}>
           <html.div style={styles.skip}>
             <TextLink href={`#${mainId}`} onNavigate={skip}>
               {skipLabel}
@@ -318,7 +329,7 @@ interface MainProps {
 }
 
 function Main({children, id, ref}: MainProps) {
-  const {mainId, mainRef, collapseBelow} = useAppShell()
+  const {mainId, mainRef, collapseBelow, scroll} = useAppShell()
   const setRef = useCallback(
     (node: HTMLElement | null) => {
       mainRef.current = node
@@ -332,7 +343,7 @@ function Main({children, id, ref}: MainProps) {
       ref={setRef}
       id={id ?? mainId}
       tabIndex={-1}
-      style={[styles.main, variants[collapseBelow].main]}
+      style={[styles.main, variants[collapseBelow].main, scroll === 'main' && styles.mainScrolls]}
     >
       {children}
     </html.main>

package/src/components/AppShell/styles.css.ts

@@ -47,6 +47,10 @@ export const styles = css.create({
     backgroundColor: colors.bg,
     gridTemplateRows: 'auto 1fr',
   },
+  // scroll="main": the shell is the viewport, so Main's row has a definite height.
+  gridViewport: {
+    height: '100dvh',
+  },
   gridSm: {
     gridTemplateColumns: {default: 'minmax(0, 1fr)', [WIDE_SM]: RAIL_COLUMNS},
     gridTemplateAreas: {default: NARROW_AREAS, [WIDE_SM]: WIDE_AREAS},
@@ -204,6 +208,12 @@ export const styles = css.create({
     // Focused by the skip link: no ring on a region that is not a control.
     outlineStyle: 'none',
   },
+  // scroll="main": Main is a bounded region that scrolls by itself, and a
+  // child that fills it (height 100%) gets that bound.
+  mainScrolls: {
+    minHeight: 0,
+    overflowY: 'auto',
+  },
   mainSm: {
     paddingLeft: {default: spacing.md, [WIDE_SM]: spacing.lg},
     paddingRight: {default: spacing.md, [WIDE_SM]: spacing.lg},

package/src/components/CodeBlock/CodeBlock.meta.ts

@@ -2,7 +2,7 @@ import type {ComponentMeta} from '../component-meta'
 
 export const meta: ComponentMeta = {
   description:
-    'A block of code with a copy button: a pre that scrolls sideways when a line is long, and a Button that copies its text, shows the copied label for copiedDuration ms and announces it through a polite LiveRegion. Labels come from props.',
+    'A block of code with a copy button: a pre that scrolls sideways when a line is long, and a Button that copies its text, shows the copied label for copiedDuration ms and announces it through a polite LiveRegion. Labels come from props. With language="diff", added, removed and hunk lines are coloured from tokens. On native the text is selectable and scrolls sideways; there is no copy button.',
   whenToUse: [
     'Code or a command the reader is likely to paste: a docs page, an install step',
     "A Markdown renderer's pre, inside Prose",

package/src/components/CodeBlock/CodeBlock.native.tsx

@@ -0,0 +1,33 @@
+import {ScrollView} from 'react-native'
+import {html} from 'react-strict-dom'
+import {typePresets} from '@duro-app/tokens/tokens/type-presets.css'
+import {DiffLines} from './DiffLines'
+import {textOf} from './diffRoles'
+import {styles} from './styles.css'
+import type {CodeBlockProps} from './types'
+
+export type {CodeBlockProps} from './types'
+
+/**
+ * Native CodeBlock: selectable monospace text that scrolls sideways, with the
+ * same diff line roles as the web. The copy button is web only: a phone
+ * copies by selecting the text, so the labels and `onCopyError` are unused.
+ */
+export function CodeBlock({children, language}: CodeBlockProps) {
+  const text = textOf(children)
+  return (
+    <html.div style={styles.root}>
+      <ScrollView horizontal>
+        <html.div style={styles.scroll}>
+          {language === 'diff' ? (
+            <html.div style={[typePresets.code, styles.text]}>
+              <DiffLines text={text} />
+            </html.div>
+          ) : (
+            <html.span style={[typePresets.code, styles.text]}>{text}</html.span>
+          )}
+        </html.div>
+      </ScrollView>
+    </html.div>
+  )
+}

package/src/components/CodeBlock/CodeBlock.stories.tsx

@@ -5,6 +5,7 @@ import {CodeBlock} from './CodeBlock'
 import {onThemeSurface} from '../../docs/themedSurface'
 import {withCoarsePointer, withFinePointer} from '../../docs/coarsePointer'
 import {SIZES_PX} from '@duro-app/tokens/keys'
+import {colors} from '@duro-app/tokens/tokens/colors.css'
 
 interface CodeBlockArgs {
   /** The code shown (and copied). */
@@ -51,6 +52,10 @@ const TEST_ONLY = ['!dev', '!autodocs']
 
 const styles = css.create({
   half: {maxWidth: '50%'},
+  // Probes: the token colours a diff line should resolve to, set independently of CodeBlock.
+  successProbe: {backgroundColor: colors.successBg},
+  errorProbe: {backgroundColor: colors.errorBg},
+  infoProbe: {backgroundColor: colors.infoBg},
 })
 
 /**
@@ -190,3 +195,52 @@ export const CopyRefusedWithoutHandler: Story = {
     }
   },
 }
+
+const DIFF = '@@ -1,3 +1,3 @@\n context\n-old line\n+new line\n'
+
+/** `language="diff"`: added, removed and hunk lines are tinted from the status tokens. */
+export const Diff: Story = {
+  args: {code: DIFF},
+  render: ({code, ...args}) => (
+    <CodeBlock {...args} language="diff">
+      <html.code>{code}</html.code>
+    </CodeBlock>
+  ),
+}
+
+/** Diff's checks: each line carries its role, the language is exposed, copy keeps the raw text. */
+export const DiffChecks: Story = {
+  ...Diff,
+  tags: TEST_ONLY,
+  render: ({code, ...args}) => (
+    <>
+      <CodeBlock {...args} language="diff">
+        <html.code>{code}</html.code>
+      </CodeBlock>
+      <html.div data-testid="success-probe" style={styles.successProbe} />
+      <html.div data-testid="error-probe" style={styles.errorProbe} />
+      <html.div data-testid="info-probe" style={styles.infoProbe} />
+    </>
+  ),
+  play: async ({args, canvasElement, canvas, userEvent}) => {
+    const role = (name: string) => canvasElement.querySelector(`[data-diff-line="${name}"]`)
+    await expect(canvasElement.querySelector('pre')).toHaveAttribute('data-language', 'diff')
+    await expect(role('hunk')).toHaveTextContent('@@ -1,3 +1,3 @@')
+    await expect(role('removed')).toHaveTextContent('-old line')
+    await expect(role('added')).toHaveTextContent('+new line')
+    const probe = (testId: string) =>
+      getComputedStyle(canvasElement.querySelector(`[data-testid="${testId}"]`)!).backgroundColor
+    const tint = (name: string) => getComputedStyle(role(name)!).backgroundColor
+    await expect(tint('added')).toBe(probe('success-probe'))
+    await expect(tint('removed')).toBe(probe('error-probe'))
+    await expect(tint('hunk')).toBe(probe('info-probe'))
+    await expect(tint('added')).not.toBe(tint('removed'))
+    const write = spyOn(navigator.clipboard, 'writeText').mockResolvedValue(undefined)
+    try {
+      await userEvent.click(canvas.getByRole('button', {name: args.copyLabel}))
+      await expect(write).toHaveBeenCalledWith(args.code)
+    } finally {
+      write.mockRestore()
+    }
+  },
+}

package/src/components/CodeBlock/CodeBlock.tsx

@@ -1,28 +1,14 @@
-import {useCallback, useEffect, useRef, useState, type ReactNode} from 'react'
+import {useCallback, useEffect, useRef, useState} from 'react'
 import {html} from 'react-strict-dom'
 import {Button} from '../Button/Button'
 import {LiveRegion} from '../LiveRegion/LiveRegion'
 import {typePresets} from '@duro-app/tokens/tokens/type-presets.css'
 import {styles} from './styles.css'
+import type {CodeBlockProps} from './types'
+import {DiffLines} from './DiffLines'
+import {textOf} from './diffRoles'
 
-interface CodeBlockProps {
-  /**
-   * The code: text, or the `<code>` element a Markdown renderer produced
-   * (highlighted spans included). What is copied is its text content.
-   */
-  children: ReactNode
-  /** The copy button's label ("Copy"), from your text catalog. */
-  copyLabel: string
-  /**
-   * The label while the copy is confirmed ("Copied"), also announced to
-   * screen readers.
-   */
-  copiedLabel: string
-  /** How long the confirmation stays, in milliseconds. Default 2000. */
-  copiedDuration?: number
-  /** Called when the clipboard refuses the write (an insecure context, a denied permission). */
-  onCopyError?: (error: unknown) => void
-}
+export type {CodeBlockProps} from './types'
 
 /**
  * CodeBlock — a block of code with a copy button: a `pre` that scrolls
@@ -33,6 +19,7 @@ interface CodeBlockProps {
  */
 export function CodeBlock({
   children,
+  language,
   copyLabel,
   copiedLabel,
   copiedDuration = 2000,
@@ -89,9 +76,10 @@ export function CodeBlock({
       <html.pre
         ref={preRef}
         tabIndex={scrollable ? 0 : undefined}
+        data-language={language}
         style={[typePresets.code, styles.pre]}
       >
-        {children}
+        {language === 'diff' ? <DiffLines text={textOf(children)} /> : children}
       </html.pre>
       <LiveRegion visuallyHidden>{copied ? copiedLabel : ''}</LiveRegion>
     </html.div>

package/src/components/CodeBlock/DiffLines.tsx

@@ -0,0 +1,32 @@
+import {Fragment} from 'react'
+import {html} from 'react-strict-dom'
+import {splitDiffLines, type DiffLineRole} from './diffRoles'
+import {styles} from './styles.css'
+
+const roleStyle = {
+  added: styles.added,
+  removed: styles.removed,
+  hunk: styles.hunk,
+  context: undefined,
+} as const satisfies Record<DiffLineRole, unknown>
+
+/**
+ * The lines of a unified diff, each tagged with its role (`data-diff-line`)
+ * and coloured from the success, error and info subtle tokens. The `+`/`-`
+ * characters stay in the text, so colour is never the only signal.
+ */
+export function DiffLines({text}: {text: string}) {
+  return (
+    <Fragment>
+      {splitDiffLines(text).map((line, index) => (
+        <html.span
+          key={index}
+          data-diff-line={line.role}
+          style={[styles.line, roleStyle[line.role]]}
+        >
+          {line.text}
+        </html.span>
+      ))}
+    </Fragment>
+  )
+}

package/src/components/CodeBlock/diffRoles.ts

@@ -0,0 +1,40 @@
+import {Children, isValidElement, type ReactNode} from 'react'
+
+/** What a line of a unified diff is, for its colour. */
+export type DiffLineRole = 'added' | 'removed' | 'hunk' | 'context'
+
+export interface DiffLine {
+  /** The line with its newline, so the lines joined are the raw text. */
+  text: string
+  role: DiffLineRole
+}
+
+/** `+++ b/file` and `--- a/file` are file headers, not changes. */
+export function diffLineRole(line: string): DiffLineRole {
+  if (line.startsWith('@@')) return 'hunk'
+  if (line.startsWith('+++') || line.startsWith('---')) return 'context'
+  if (line.startsWith('+')) return 'added'
+  if (line.startsWith('-')) return 'removed'
+  return 'context'
+}
+
+export function splitDiffLines(text: string): DiffLine[] {
+  const parts = text.split('\n')
+  const last = parts.length - 1
+  const lines: DiffLine[] = []
+  parts.forEach((part, index) => {
+    if (index === last && part === '') return
+    lines.push({text: index === last ? part : `${part}\n`, role: diffLineRole(part)})
+  })
+  return lines
+}
+
+/** The text content of a node: strings, numbers and the elements around them. */
+export function textOf(node: ReactNode): string {
+  if (typeof node === 'string' || typeof node === 'number') return String(node)
+  if (Array.isArray(node)) return node.map(textOf).join('')
+  if (isValidElement<{children?: ReactNode}>(node)) {
+    return Children.toArray(node.props.children).map(textOf).join('')
+  }
+  return ''
+}

package/src/components/CodeBlock/styles.css.ts

@@ -45,4 +45,21 @@ export const styles = css.create({
     outlineColor: {default: 'transparent', ':focus-visible': colors.accent},
     outlineOffset: {default: 0, ':focus-visible': borders.focusOffset},
   },
+  // A diff line fills the block's width, so its tint is a band, not a patch.
+  line: {display: 'block'},
+  added: {backgroundColor: colors.successBg},
+  removed: {backgroundColor: colors.errorBg},
+  hunk: {backgroundColor: colors.infoBg, color: colors.infoText},
+  // Native: the code scrolls sideways inside the block.
+  scroll: {
+    paddingTop: spacing.xs,
+    paddingBottom: spacing.md,
+    paddingLeft: spacing.md,
+    paddingRight: spacing.md,
+  },
+  text: {
+    color: colors.text,
+    userSelect: 'text',
+    whiteSpace: 'pre',
+  },
 })

package/src/components/CodeBlock/types.ts

@@ -0,0 +1,29 @@
+import type {ReactNode} from 'react'
+
+export interface CodeBlockProps {
+  /**
+   * The code: text, or the `<code>` element a Markdown renderer produced
+   * (highlighted spans included). What is copied is its text content.
+   */
+  children: ReactNode
+  /**
+   * The code's language ("diff", "ts"), exposed as `data-language` on the
+   * `pre`. `"diff"` also gives each added (`+`), removed (`-`) and hunk (`@@`)
+   * line its own colour; what is copied stays the raw text. Diff rendering
+   * works on the text content, so highlighted spans inside `children` are
+   * flattened to plain text. The language is a data attribute only: it is not
+   * announced to assistive technology.
+   */
+  language?: string
+  /** The copy button's label ("Copy"), from your text catalog. */
+  copyLabel: string
+  /**
+   * The label while the copy is confirmed ("Copied"), also announced to
+   * screen readers.
+   */
+  copiedLabel: string
+  /** How long the confirmation stays, in milliseconds. Default 2000. */
+  copiedDuration?: number
+  /** Called when the clipboard refuses the write (an insecure context, a denied permission). */
+  onCopyError?: (error: unknown) => void
+}

package/src/components/Drawer/touchInput.ts

@@ -18,9 +18,23 @@ export async function cdpSend(method: string, params: object) {
   return session.send(method, params)
 }
 
-/** Set the page's viewport (test runner only, like `cdpSend`). */
+/** The refusal `vitest/browser` throws when loaded outside the test runner. */
+const BROWSER_MODE_ONLY = 'can be imported only inside the Browser Mode'
+
+/**
+ * Set the page's viewport under the test runner. In dev Storybook `vitest/browser`
+ * refuses to load (that refusal only); there the story keeps the browser's own
+ * viewport instead of failing to render. Any other import failure is thrown.
+ */
 export async function setViewport(width: number, height: number) {
-  const {page} = await import('vitest/browser')
+  let page: {viewport: (w: number, h: number) => Promise<unknown>}
+  try {
+    ;({page} = await import('vitest/browser'))
+  } catch (error) {
+    // Only the dev-Storybook refusal is expected; anything else is a real failure.
+    if (error instanceof Error && error.message.includes(BROWSER_MODE_ONLY)) return
+    throw error
+  }
   await page.viewport(width, height)
 }
 

package/src/components/Prose/Prose.meta.ts

@@ -2,7 +2,7 @@ import type {ComponentMeta} from '../component-meta'
 
 export const meta: ComponentMeta = {
   description:
-    "The container for HTML Duro does not author — rendered Markdown, CMS output: headings, paragraphs, lists, tables, blockquotes, inline code, links and images are styled from tokens by descendant rules scoped to it (plain CSS in dist/index.css, :where() and its own cascade layer). Duro components inside it keep their styles, and an app's own CSS wins over every Prose rule. Web only.",
+    "The container for HTML Duro does not author — rendered Markdown, CMS output: headings, paragraphs, lists, tables, blockquotes, inline code, links and images are styled from tokens by descendant rules scoped to it (plain CSS in dist/index.css, :where() and its own cascade layer). Duro components inside it keep their styles, and an app's own CSS wins over every Prose rule. On native it is a reading-width column with a token gap; the renderer maps Markdown to Duro primitives.",
   whenToUse: [
     'The body of a docs page rendered from Markdown',
     'Any HTML produced by a renderer you do not write as JSX',

package/src/components/Prose/Prose.native.tsx

@@ -0,0 +1,23 @@
+import type {ReactNode, Ref} from 'react'
+import {html} from 'react-strict-dom'
+import {styles} from './styles.native.css'
+
+interface ProseProps {
+  /** Duro primitives (Heading, Text, TextLink, CodeBlock) a Markdown renderer produced. */
+  children: ReactNode
+  /** The container element. */
+  ref?: Ref<HTMLDivElement>
+}
+
+/**
+ * Native Prose: the reading container. Native has no descendant CSS, so it
+ * styles nothing inside it: a renderer maps Markdown to Duro primitives, and
+ * Prose gives them one column at reading width with a token gap between blocks.
+ */
+export function Prose({children, ref}: ProseProps) {
+  return (
+    <html.div ref={ref} style={styles.root}>
+      {children}
+    </html.div>
+  )
+}

package/src/components/Prose/Prose.tsx

@@ -14,7 +14,7 @@ interface ProseProps {
  * output): headings, paragraphs, lists, tables, blockquotes, inline code,
  * links and images are styled from tokens by descendant rules scoped to it.
  * Duro components inside it (a TextLink, a CodeBlock) keep their own styles,
- * and an app's own CSS wins over every Prose rule. Web only.
+ * and an app's own CSS wins over every Prose rule. Native: Prose.native.tsx.
  */
 export function Prose({children, ref}: ProseProps) {
   return (

package/src/components/Prose/styles.native.css.ts

@@ -0,0 +1,15 @@
+import {css} from 'react-strict-dom'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
+import {spacing} from '@duro-app/tokens/tokens/spacing.css'
+
+export const styles = css.create({
+  // One column at reading width, one gap between blocks.
+  root: {
+    display: 'flex',
+    flexDirection: 'column',
+    gap: spacing.md,
+    width: '100%',
+    maxWidth: sizes.panelLg,
+    minWidth: 0,
+  },
+})

package/src/components/SplitPane/SplitPane.meta.ts

@@ -2,7 +2,7 @@ import type {ComponentMeta} from '../component-meta'
 
 export const meta: ComponentMeta = {
   description:
-    'Two panes side by side with a resizable separator: the first Pane is sized by the Handle (pointer drag, arrow keys, Shift for larger steps, Home and End), the second takes the rest. Min, max and starting widths are size tokens. Below collapseBelow, measured on its own width, the panes stack in one column and the handle goes; on native they always stack. The Handle is a hairline that thickens to the accent on hover, keyboard focus or drag.',
+    'Two panes side by side with a resizable separator: the first Pane is sized by the Handle (pointer drag, arrow keys, Shift for larger steps, Home and End), the second takes the rest. Min, max and starting widths are size tokens. Below collapseBelow, measured on its own width, the panes stack in one column and the handle goes; on native they always stack. A controlled collapsed prop shrinks the first pane to a strip (the iconButton size) that shows collapsedContent, removes the Handle, and keeps the first pane’s own children mounted but inert and hidden (state kept, no tab stops, out of the accessibility tree); the prior width returns when it turns false. Native ignores both. The Handle is a hairline that thickens to the accent on hover, keyboard focus or drag.',
   whenToUse: [
     'A list beside its detail where people need more room on either side (a session list and its transcript)',
     'An editor beside its preview',

package/src/components/SplitPane/SplitPane.native.tsx

@@ -18,6 +18,10 @@ interface RootProps {
   maxSize?: SizeToken
   /** Web only: a phone is below every breakpoint, so native always stacks. */
   collapseBelow?: Breakpoint
+  /** Web only: native always stacks, so there is no strip to collapse to. */
+  collapsed?: boolean
+  /** Web only: shown in the collapsed strip. */
+  collapsedContent?: ReactNode
   /** The handle's accessible name (web only: native has no handle). */
   'aria-label': string
 }