@duro-app/ui 5.7.0 → 5.8.0

package/src/components/Prose/prose.css

@@ -0,0 +1,177 @@
+/*
+ * Prose — styles for HTML that Duro does not author: rendered Markdown, CMS
+ * output. StyleX cannot write descendant rules, so these ship as plain CSS in
+ * dist/index.css. Only var(--duro-*) tokens: the check in
+ * packages/ui/test/prose-css.test.ts fails on any raw length or colour.
+ *
+ * Two things keep it out of everyone's way:
+ *
+ * - The `duro-prose` layer sits after `reset` (so these margins beat the
+ *   reset's `margin: 0`) and before StyleX's own layers (strict.css declares
+ *   the order). A Duro component rendered inside Prose (a TextLink, a
+ *   CodeBlock) keeps its own styles, and any unlayered app CSS — a CSS
+ *   Module rule — wins over every rule here.
+ * - Every selector is wrapped in :where(), so the rules weigh nothing even
+ *   against an app's own layered CSS.
+ *
+ * Scoped to the Prose element: `data-duro-prose` (what the component renders;
+ * react-strict-dom elements take no className) or a `duro-prose` class.
+ */
+
+@layer reset, duro-prose;
+
+@layer duro-prose {
+  :where(.duro-prose, [data-duro-prose]) {
+    color: var(--duro-color-text);
+    font-family: var(--duro-typography-font-family);
+    font-size: var(--duro-type-scale-font-size4);
+    line-height: var(--duro-type-scale-line-height4);
+    overflow-wrap: break-word;
+  }
+
+  /* Flow: one gap between blocks, none before the first. */
+  :where(.duro-prose, [data-duro-prose]) > :where(* + *) {
+    margin-block-start: var(--duro-spacing-md);
+  }
+
+  /* Headings: the Heading presets, with more room above than below. */
+  :where(.duro-prose, [data-duro-prose]) :where(h1, h2, h3, h4, h5, h6) {
+    font-family: var(--duro-typography-font-family);
+    letter-spacing: var(--duro-type-scale-letter-spacing-tight);
+    margin-block-start: var(--duro-spacing-xl);
+    margin-block-end: var(--duro-spacing-sm);
+    /* A table-of-contents jump lands with room above the heading. */
+    scroll-margin-top: var(--duro-spacing-lg);
+  }
+  :where(.duro-prose, [data-duro-prose]) :where(h1) {
+    font-size: var(--duro-type-scale-font-size9);
+    line-height: var(--duro-type-scale-line-height9);
+    font-weight: var(--duro-typography-font-weight-bold);
+  }
+  /* h2 down follow the picked docs artboard (Reader.dc.html): a reading
+     column's sections are a step below the page title, not a second one. */
+  :where(.duro-prose, [data-duro-prose]) :where(h2) {
+    font-size: var(--duro-type-scale-font-size6);
+    line-height: var(--duro-type-scale-line-height6);
+    font-weight: var(--duro-typography-font-weight-semibold);
+    margin-block-start: var(--duro-spacing-lg);
+  }
+  :where(.duro-prose, [data-duro-prose]) :where(h3) {
+    font-size: var(--duro-type-scale-font-size5);
+    line-height: var(--duro-type-scale-line-height5);
+    font-weight: var(--duro-typography-font-weight-semibold);
+    margin-block-start: var(--duro-spacing-lg);
+  }
+  :where(.duro-prose, [data-duro-prose]) :where(h4, h5, h6) {
+    font-size: var(--duro-type-scale-font-size4);
+    line-height: var(--duro-type-scale-line-height4);
+    font-weight: var(--duro-typography-font-weight-semibold);
+    margin-block-start: var(--duro-spacing-md);
+  }
+  :where(.duro-prose, [data-duro-prose]) > :where(:first-child) {
+    margin-block-start: 0;
+  }
+
+  /* Lists: markers back (the reset removes the indent they hang in). */
+  :where(.duro-prose, [data-duro-prose]) :where(ul, ol) {
+    padding-inline-start: var(--duro-spacing-lg);
+  }
+  :where(.duro-prose, [data-duro-prose]) :where(ul) {
+    list-style-type: disc;
+  }
+  :where(.duro-prose, [data-duro-prose]) :where(ol) {
+    list-style-type: decimal;
+  }
+  :where(.duro-prose, [data-duro-prose]) :where(li + li, li > ul, li > ol) {
+    margin-block-start: var(--duro-spacing-xs);
+  }
+
+  /* Links: the accent, underlined so they read as links in running text. */
+  :where(.duro-prose, [data-duro-prose]) :where(a) {
+    color: var(--duro-color-accent);
+    text-decoration-line: underline;
+    text-underline-offset: var(--duro-micro-spacing-px2);
+  }
+  :where(.duro-prose, [data-duro-prose]) :where(a:hover) {
+    color: var(--duro-color-accent-hover);
+  }
+  :where(.duro-prose, [data-duro-prose]) :where(a:focus-visible) {
+    outline: var(--duro-border-focus-ring) solid var(--duro-color-accent);
+    outline-offset: var(--duro-border-focus-offset);
+    border-radius: var(--duro-radius-xs);
+  }
+
+  :where(.duro-prose, [data-duro-prose]) :where(strong, b) {
+    font-weight: var(--duro-typography-font-weight-semibold);
+  }
+
+  :where(.duro-prose, [data-duro-prose]) :where(blockquote) {
+    padding-inline-start: var(--duro-spacing-md);
+    border-inline-start: var(--duro-border-accent) solid var(--duro-color-border);
+    color: var(--duro-color-text-muted);
+  }
+
+  /* Inline code; a heading keeps its own size around it. */
+  :where(.duro-prose, [data-duro-prose]) :where(code) {
+    font-family: var(--duro-typography-font-family-mono);
+    font-size: var(--duro-type-scale-font-size3);
+    padding-inline: var(--duro-spacing-xs);
+    background-color: var(--duro-color-bg-card);
+    border: var(--duro-border-hairline) solid var(--duro-color-border);
+    border-radius: var(--duro-radius-xs);
+  }
+  :where(.duro-prose, [data-duro-prose]) :where(h1, h2, h3, h4, h5, h6) :where(code) {
+    font-size: inherit;
+  }
+
+  /* A code block outside CodeBlock (CodeBlock styles its own). */
+  :where(.duro-prose, [data-duro-prose]) :where(pre) {
+    font-family: var(--duro-typography-font-family-mono);
+    font-size: var(--duro-type-scale-font-size3);
+    line-height: var(--duro-type-scale-line-height3);
+    padding: var(--duro-spacing-md);
+    overflow-x: auto;
+    background-color: var(--duro-color-bg-card);
+    border: var(--duro-border-hairline) solid var(--duro-color-border);
+    border-radius: var(--duro-radius-md);
+  }
+  :where(.duro-prose, [data-duro-prose]) :where(pre code) {
+    padding: 0;
+    font-size: inherit;
+    background-color: transparent;
+    border: 0;
+  }
+
+  /* Tables as the docs artboard draws them: the column's full width,
+     horizontal rules only, a muted header. A long cell wraps rather than
+     widening the page (a full-width table cannot also scroll on its own). */
+  :where(.duro-prose, [data-duro-prose]) :where(table) {
+    width: 100%;
+    border-collapse: collapse;
+    font-size: var(--duro-type-scale-font-size3);
+    line-height: var(--duro-type-scale-line-height3);
+  }
+  :where(.duro-prose, [data-duro-prose]) :where(th, td) {
+    padding: var(--duro-spacing-xs) var(--duro-spacing-sm);
+    border-block-end: var(--duro-border-hairline) solid var(--duro-color-border);
+    text-align: start;
+    vertical-align: top;
+    overflow-wrap: anywhere;
+  }
+  :where(.duro-prose, [data-duro-prose]) :where(th) {
+    color: var(--duro-color-text-muted);
+    font-weight: var(--duro-typography-font-weight-medium);
+  }
+
+  :where(.duro-prose, [data-duro-prose]) :where(img) {
+    max-width: 100%;
+    height: auto;
+    border-radius: var(--duro-radius-sm);
+  }
+
+  :where(.duro-prose, [data-duro-prose]) :where(hr) {
+    border: 0;
+    border-block-start: var(--duro-border-hairline) solid var(--duro-color-border);
+    margin-block: var(--duro-spacing-xl);
+  }
+}

package/src/components/SideNav/SideNav.stories.tsx

@@ -2,6 +2,7 @@ import type {Meta, StoryObj} from '@storybook/react'
 import {expect, fn} from 'storybook/test'
 import {SideNav} from './SideNav'
 import {Icon} from '../Icon/Icon'
+import {onThemeSurface} from '../../docs/themedSurface'
 
 const meta: Meta<typeof SideNav.Root> = {
   title: 'Components/SideNav',
@@ -200,3 +201,31 @@ export const FlatWithIcons: Story = {
     await expect(identities).toHaveAttribute('aria-current', 'page')
   },
 }
+
+/** `aria-label` names the landmark, so a page with a breadcrumb or a pager
+ *  beside it still lists the side navigation by name. */
+export const Named: Story = {
+  parameters: {
+    a11y: {
+      test: 'error',
+      // holds-until: https://github.com/fredericrous/duro-design-system/issues/79
+      // — the selected item's accent on bgCardHover is 6.76:1, under AAA's
+      // 7:1 (AA passes). Re-enable this rule when that pair reaches 7:1.
+      options: {rules: {'color-contrast-enhanced': {enabled: false}}},
+    },
+  },
+  decorators: [onThemeSurface],
+  render: (args) => (
+    <SideNav.Root {...args} aria-label="Settings" defaultValue="profile">
+      <SideNav.Section label="Account">
+        <SideNav.Item value="profile">Profile</SideNav.Item>
+        <SideNav.Item value="security">Security</SideNav.Item>
+      </SideNav.Section>
+    </SideNav.Root>
+  ),
+  play: async ({canvas}) => {
+    const nav = canvas.getByRole('navigation', {name: 'Settings'})
+    await expect(nav).toHaveAttribute('aria-label', 'Settings')
+    await expect(canvas.getByRole('button', {name: 'Profile'})).toBeInTheDocument()
+  },
+}

package/src/components/SideNav/SideNav.tsx

@@ -34,12 +34,24 @@ import {SideNavContext, useSideNav} from './SideNavContext'
 
 interface RootProps {
   children: ReactNode
+  /**
+   * Names the navigation landmark ("Main", "Settings"). Give one whenever
+   * the page has another nav (a breadcrumb, a pager): screen readers list
+   * landmarks by name.
+   */
+  'aria-label'?: string
   value?: string
   defaultValue?: string
   onValueChange?: (value: string) => void
 }
 
-function Root({children, value: controlledValue, defaultValue, onValueChange}: RootProps) {
+function Root({
+  children,
+  'aria-label': ariaLabel,
+  value: controlledValue,
+  defaultValue,
+  onValueChange,
+}: RootProps) {
   const [activeValue, onSelect] = useControllableValue<string | null>(
     controlledValue,
     defaultValue ?? null,
@@ -98,7 +110,7 @@ function Root({children, value: controlledValue, defaultValue, onValueChange}: R
         orderRef,
       }}
     >
-      <html.nav role="navigation" style={styles.root}>
+      <html.nav role="navigation" aria-label={ariaLabel} style={styles.root}>
         {children}
       </html.nav>
     </SideNavContext.Provider>

package/src/components/Time/Time.meta.ts

@@ -0,0 +1,17 @@
+import type {ComponentMeta} from '../component-meta'
+
+export const meta: ComponentMeta = {
+  description:
+    'A date or time in running text as a <time> element: the visible text comes from you, the exact instant goes in dateTime (an ISO string) and title. relative(date, {now, locale}) gives the text on Intl.RelativeTimeFormat ("3 days ago", "il y a 3 jours"); now is required, so the server and the client render the same string. Web only.',
+  whenToUse: [
+    'When something happened: "Updated 3 days ago", a commit date, a last-indexed time',
+    'Any date shown as relative text whose exact value should stay available',
+  ],
+  whenNotToUse: [
+    'A date the person edits — use an Input',
+    'A live countdown or a clock — Time renders once from the now you pass',
+  ],
+  example: `<Time dateTime={doc.lastCommitAt} title={formatFull(doc.lastCommitAt, locale)}>
+  {relative(doc.lastCommitAt, {now: loaderNow, locale})}
+</Time>`,
+}

package/src/components/Time/Time.stories.tsx

@@ -0,0 +1,173 @@
+import type {Meta, StoryObj} from '@storybook/react'
+import {expect, waitFor} from 'storybook/test'
+import {html} from 'react-strict-dom'
+import {renderToString} from 'react-dom/server'
+import {hydrateRoot} from 'react-dom/client'
+import {Time} from './Time'
+import {relative} from './relative'
+import {Stack} from '../Stack/Stack'
+import {Text} from '../Text/Text'
+import {onThemeSurface} from '../../docs/themedSurface'
+
+// A fixed instant, as a loader would pass it: never the clock during render.
+const NOW = Date.UTC(2026, 9, 8, 12, 0, 0)
+const COMMIT = '2026-10-05T09:30:00.000Z'
+const DAY_MS = 24 * 60 * 60 * 1000
+
+type Locale = 'en' | 'fr' | 'de'
+
+interface TimeArgs {
+  /** The instant shown, in days from `now` (negative: in the past). */
+  offsetDays: number
+  /** The locale `relative` and the title use. */
+  locale: Locale
+  /** `auto` says "yesterday" where the locale has a word; `always` keeps the number. */
+  numeric: 'auto' | 'always'
+  /** The text before the date. */
+  label: string
+}
+
+const meta = {
+  title: 'Components/Time',
+  args: {offsetDays: -3, locale: 'en', numeric: 'auto', label: 'Updated'},
+  argTypes: {
+    offsetDays: {control: {type: 'range', min: -400, max: 400, step: 1}},
+    locale: {
+      control: {type: 'select', labels: {en: 'English', fr: 'Français', de: 'Deutsch'}},
+      options: ['en', 'fr', 'de'],
+    },
+    numeric: {control: 'radio', options: ['auto', 'always']},
+    label: {control: 'text'},
+  },
+  parameters: {a11y: {test: 'error'}},
+  decorators: [onThemeSurface],
+  render: ({offsetDays, locale, numeric, label}) => {
+    const iso = new Date(NOW + offsetDays * DAY_MS).toISOString()
+    return (
+      <Text variant="bodySm" color="muted">
+        {label}{' '}
+        <Time dateTime={iso} title={full(iso, locale)}>
+          {relative(iso, {now: NOW, locale, numeric})}
+        </Time>
+      </Text>
+    )
+  },
+} satisfies Meta<TimeArgs>
+
+export default meta
+type Story = StoryObj<typeof meta>
+
+const TEST_ONLY = ['!dev', '!autodocs']
+
+function full(iso: string, locale: string) {
+  return new Intl.DateTimeFormat(locale, {
+    dateStyle: 'long',
+    timeStyle: 'short',
+    timeZone: 'UTC',
+  }).format(new Date(iso))
+}
+
+function Updated({locale, label}: {locale: string; label: string}) {
+  return (
+    <Text variant="bodySm" color="muted">
+      {label}{' '}
+      <Time dateTime={COMMIT} title={full(COMMIT, locale)}>
+        {relative(COMMIT, {now: NOW, locale})}
+      </Time>
+    </Text>
+  )
+}
+
+/**
+ * A date relative to a fixed `now` (2026-10-08 12:00 UTC). Move `offsetDays`
+ * to walk through the units (days, weeks, months, years), switch `locale`, and
+ * `numeric` to always for "1 day ago" instead of "yesterday". Hover the date
+ * for the exact instant (title).
+ */
+export const Playground: Story = {}
+
+/** Playground's checks, kept off the visible story so a Control change cannot fail them. */
+export const PlaygroundChecks: Story = {
+  ...Playground,
+  tags: TEST_ONLY,
+  play: async ({args, canvasElement}) => {
+    const time = canvasElement.querySelector('time')!
+    const iso = new Date(NOW + args.offsetDays * DAY_MS).toISOString()
+    await expect(time).toHaveAttribute('datetime', iso)
+    await expect(time).toHaveAttribute('title', full(iso, args.locale))
+  },
+}
+
+/** The words come from the locale; the exact instant stays in dateTime and title. */
+export const TwoLocales: Story = {
+  render: () => (
+    <Stack gap="sm">
+      <Updated locale="en" label="Updated" />
+      <Updated locale="fr" label="Mis à jour" />
+    </Stack>
+  ),
+}
+
+/** TwoLocales' checks, kept off the visible story so a Control change cannot fail them. */
+export const TwoLocalesChecks: Story = {
+  ...TwoLocales,
+  tags: TEST_ONLY,
+  play: async ({canvasElement}) => {
+    const times = [...canvasElement.querySelectorAll('time')]
+    await expect(times).toHaveLength(2)
+    await expect(times[0]).toHaveTextContent('3 days ago')
+    await expect(times[1]).toHaveTextContent('il y a 3 jours')
+    for (const time of times) {
+      await expect(time).toHaveAttribute('datetime', COMMIT)
+    }
+    await expect(times[0]).toHaveAttribute('title', full(COMMIT, 'en'))
+    await expect(times[1]).toHaveAttribute('title', full(COMMIT, 'fr'))
+  },
+}
+
+/** A Date is written as its ISO string. */
+export const FromDate: Story = {
+  tags: TEST_ONLY,
+  render: () => (
+    <Text>
+      <Time dateTime={new Date(NOW)}>{relative(NOW, {now: NOW, locale: 'en'})}</Time>
+    </Text>
+  ),
+  play: async ({canvasElement}) => {
+    const time = canvasElement.querySelector('time')!
+    await expect(time).toHaveAttribute('datetime', new Date(NOW).toISOString())
+    await expect(time).toHaveTextContent('now')
+  },
+}
+
+/** Server and client render the same text from the same `now`: hydration
+ *  reports nothing. It replaces the canvas's content, so it runs as a test only. */
+export const ServerRender: Story = {
+  tags: TEST_ONLY,
+  render: () => <html.div data-ssr-host="" />,
+  play: async ({canvasElement}) => {
+    const host = canvasElement.querySelector('[data-ssr-host]') as HTMLElement
+    const tree = <Updated locale="en" label="Updated" />
+    host.innerHTML = renderToString(tree)
+    const serverText = host.textContent
+    await expect(host.querySelector('time')).toHaveTextContent('3 days ago')
+
+    const errors: unknown[] = []
+    const consoleError = console.error
+    console.error = (...args: unknown[]) => {
+      errors.push(args)
+      consoleError(...args)
+    }
+    const root = hydrateRoot(host, tree, {onRecoverableError: (error) => errors.push(error)})
+    try {
+      // let React finish hydrating before reading the result
+      await waitFor(() => expect(host.querySelector('time')).toHaveTextContent('3 days ago'))
+      await new Promise((resolve) => setTimeout(resolve, 50))
+      await expect(host.textContent).toBe(serverText)
+      await expect(errors).toEqual([])
+    } finally {
+      console.error = consoleError
+      root.unmount()
+    }
+  },
+}

package/src/components/Time/Time.tsx

@@ -0,0 +1,33 @@
+import type {ReactNode} from 'react'
+
+interface TimeProps {
+  /**
+   * The instant, machine-readable: a `Date` (written as its ISO string) or an
+   * ISO 8601 string, which is passed through unchanged.
+   */
+  dateTime: Date | string
+  /**
+   * The exact date and time, shown on hover ("8 October 2026, 14:03 UTC"),
+   * formatted by you in the reader's locale.
+   */
+  title?: string
+  /** What the reader sees: a relative label from `relative()`, or a date. */
+  children: ReactNode
+}
+
+/**
+ * Time — a date or time in running text as a `<time>` element: the visible
+ * text is yours (often `relative(date, {now, locale})`), the exact instant
+ * goes in `dateTime` for machines and `title` for people.
+ *
+ * Web only. A raw `<time>`: react-strict-dom has no `html.time`, and the
+ * element carries no style of its own (it inherits the text around it).
+ */
+export function Time({dateTime, title, children}: TimeProps) {
+  const iso = typeof dateTime === 'string' ? dateTime : dateTime.toISOString()
+  return (
+    <time dateTime={iso} title={title}>
+      {children}
+    </time>
+  )
+}

package/src/components/Time/relative.ts

@@ -0,0 +1,89 @@
+// Pure date arithmetic behind Time: no React, no react-strict-dom, so the
+// unit project tests it in Node.
+
+export interface RelativeOptions {
+  /**
+   * The instant to measure from. Required: read the clock once where the data
+   * is loaded (a route loader) and pass the same value to the server and the
+   * client render, so both produce the same text. Never `Date.now()` during a
+   * render — the client would hydrate a different string.
+   */
+  now: Date | number
+  /** BCP 47 locale(s) for the words ("3 days ago", "il y a 3 jours"). */
+  locale: string | readonly string[]
+  /**
+   * `auto` (default) says "yesterday" / "tomorrow" / "now" where the locale has
+   * a word for it; `always` keeps the number ("1 day ago").
+   */
+  numeric?: 'auto' | 'always'
+}
+
+type Step = readonly [Intl.RelativeTimeFormatUnit, number]
+
+// Each unit is used while |difference| stays below the next one. Months and
+// years are average lengths: a relative label is a rounded reading, the
+// exact instant goes in the dateTime attribute.
+const SECOND = 1000
+const MINUTE = 60 * SECOND
+const HOUR = 60 * MINUTE
+const DAY = 24 * HOUR
+const WEEK = 7 * DAY
+const MONTH = 30.436875 * DAY
+const YEAR = 365.2425 * DAY
+
+const STEPS: readonly Step[] = [
+  ['second', SECOND],
+  ['minute', MINUTE],
+  ['hour', HOUR],
+  ['day', DAY],
+  ['week', WEEK],
+  ['month', MONTH],
+  ['year', YEAR],
+]
+
+const LIMITS: Record<Intl.RelativeTimeFormatUnit, number> = {
+  second: MINUTE,
+  seconds: MINUTE,
+  minute: HOUR,
+  minutes: HOUR,
+  hour: DAY,
+  hours: DAY,
+  day: WEEK,
+  days: WEEK,
+  week: MONTH,
+  weeks: MONTH,
+  month: YEAR,
+  months: YEAR,
+  quarter: Infinity,
+  quarters: Infinity,
+  year: Infinity,
+  years: Infinity,
+}
+
+function toTime(value: Date | number | string): number {
+  return typeof value === 'number' ? value : new Date(value).getTime()
+}
+
+/**
+ * How far `date` is from `now`, in words, in the caller's locale:
+ * `relative(lastCommit, {now, locale: 'en'})` → "3 days ago". Built on
+ * `Intl.RelativeTimeFormat`; the largest unit that keeps the count at least 1
+ * is used, rounded to the nearest whole unit.
+ *
+ * An unparseable date throws a `RangeError` (as `Intl` does): check the data
+ * before rendering it.
+ */
+export function relative(date: Date | number | string, options: RelativeOptions): string {
+  const {now, locale, numeric = 'auto'} = options
+  const target = toTime(date)
+  const from = toTime(now)
+  if (!Number.isFinite(target) || !Number.isFinite(from)) {
+    throw new RangeError(`relative: invalid date ${String(date)}`)
+  }
+  const diff = target - from
+  const [unit, size] =
+    STEPS.find(([unit]) => Math.abs(diff) < LIMITS[unit]) ?? STEPS[STEPS.length - 1]
+  // `+ 0` turns a -0 into 0, so "now" is not "0 seconds ago" in `always` mode.
+  const value = Math.round(diff / size) + 0
+  return new Intl.RelativeTimeFormat(locale as string | string[], {numeric}).format(value, unit)
+}

package/src/hooks/useContainerBelow.ts

@@ -0,0 +1,39 @@
+import {useEffect, useState, type RefObject} from 'react'
+import {breakpointsPx, type Breakpoint} from '@duro-app/tokens/tokens/breakpoints.css'
+
+/**
+ * Whether the element behind `ref` is narrower than a Duro breakpoint — its
+ * own width, as a container query sees it, not the window's. For the choices
+ * CSS cannot make (a table of contents as a list or a menu, a row of buttons
+ * or an overflow `Menu`).
+ *
+ * `false` on the server and until the first measurement, so the server and
+ * the first client render agree on the wide layout; a ResizeObserver then
+ * follows the element. A width of 0 (the element is not laid out, e.g.
+ * `display: none`) keeps the last answer.
+ *
+ * Narrower than means `width < breakpoint`: at exactly 768px an element is not
+ * below `md`, the same line `Grid`'s named layouts collapse on.
+ */
+export function useContainerBelow(
+  ref: RefObject<HTMLElement | null>,
+  breakpoint: Breakpoint,
+): boolean {
+  const [below, setBelow] = useState(false)
+  const limit = breakpointsPx[breakpoint]
+
+  useEffect(() => {
+    const element = ref.current
+    if (!element || typeof ResizeObserver === 'undefined') return
+    const observer = new ResizeObserver((entries) => {
+      const entry = entries[0]
+      if (!entry) return
+      const width = entry.contentBoxSize?.[0]?.inlineSize ?? entry.contentRect.width
+      if (width > 0) setBelow(width < limit)
+    })
+    observer.observe(element)
+    return () => observer.disconnect()
+  }, [ref, limit])
+
+  return below
+}

package/src/index.ts

@@ -10,6 +10,12 @@ import './strict.css'
 export {ActionBar, type ActionBarProps} from './components/ActionBar/ActionBar'
 export {ActionBarProvider} from './components/ActionBar/ActionBarProvider'
 export {Alert, type AlertVariant} from './components/Alert/Alert'
+export {
+  AppShell,
+  type AppShellCollapse,
+  type AppShellRailState,
+} from './components/AppShell/AppShell'
+export {Aside} from './components/Aside/Aside'
 export {Icon, type IconName} from './components/Icon'
 export {Badge, type BadgeVariant, type BadgeSize} from './components/Badge/Badge'
 export {Breadcrumb} from './components/Breadcrumb/Breadcrumb'
@@ -19,6 +25,7 @@ export {ButtonGroup, type ButtonGroupProps} from './components/ButtonGroup/Butto
 export {Callout, type CalloutVariant} from './components/Callout/Callout'
 export {Card, type CardVariant, type CardSize} from './components/Card/Card'
 export {Checkbox} from './components/Checkbox/Checkbox'
+export {CodeBlock} from './components/CodeBlock/CodeBlock'
 export {CheckboxGroup} from './components/CheckboxGroup/CheckboxGroup'
 export {ColorInput} from './components/ColorInput/ColorInput'
 export {ConfirmDialog} from './components/ConfirmDialog/ConfirmDialog'
@@ -41,6 +48,7 @@ export {Drawer, type DrawerAnchor, type DrawerSize} from './components/Drawer/Dr
 export {EmptyState} from './components/EmptyState/EmptyState'
 export {Heading, type HeadingVariant} from './components/Heading/Heading'
 export {List, type ListSelectionMode} from './components/List/List'
+export {LiveRegion, type LiveRegionPoliteness} from './components/LiveRegion/LiveRegion'
 export {Field} from './components/Field/Field'
 export type {LabelPosition, NecessityIndicator} from './components/Form/FormContext'
 export {Fieldset, type FieldsetGap} from './components/Fieldset/Fieldset'
@@ -55,6 +63,7 @@ export {Menu} from './components/Menu/Menu'
 export {Meter, type MeterProps, type MeterTone} from './components/Meter/Meter'
 export {PageNav} from './components/PageNav/PageNav'
 export {Panel} from './components/Panel/Panel'
+export {Prose} from './components/Prose/Prose'
 export {RadioGroup} from './components/RadioGroup/RadioGroup'
 export {ScrollArea} from './components/ScrollArea/ScrollArea'
 export {Combobox} from './components/Combobox/Combobox'
@@ -114,6 +123,8 @@ export {
   type ColorModePreference,
 } from './components/ColorMode'
 export {Text, type TextVariant, type TextColor} from './components/Text/Text'
+export {Time} from './components/Time/Time'
+export {relative, type RelativeOptions} from './components/Time/relative'
 export {Toggle, type ToggleSize} from './components/Toggle/Toggle'
 export {ToggleGroup} from './components/ToggleGroup/ToggleGroup'
 export {Tooltip} from './components/Tooltip/Tooltip'
@@ -127,7 +138,7 @@ export {Switch} from './components/Switch/Switch'
 export {Stack, type SpacingKey} from './components/Stack/Stack'
 export {Inline} from './components/Inline/Inline'
 export {Cluster} from './components/Cluster/Cluster'
-export {Grid} from './components/Grid/Grid'
+export {Grid, type GridLayout} from './components/Grid/Grid'
 export type {GridTrack} from './shared/length'
 export {PageShell, type PageShellMaxWidth, type PageShellPadding} from './components/PageShell'
 
@@ -136,6 +147,7 @@ export type {LinkClickEvent, OnNavigate} from './shared/navigate'
 
 // Hooks
 export {useContainerQuery, type ContainerSize} from './hooks/useContainerQuery'
+export {useContainerBelow} from './hooks/useContainerBelow'
 
 // Tokens — import directly from @duro-app/tokens with deep imports:
 //   import { colors } from '@duro-app/tokens/tokens/colors.css'

package/src/strict.css

@@ -1,4 +1,7 @@
-@layer reset;
+/* Layer order for the whole page: the reset, then Prose's descendant rules
+ * (above the reset's margins, below every component style), then StyleX's
+ * priority layers, which @react-strict-dom declares. */
+@layer reset, duro-prose;
 @react-strict-dom;
 
 /* Table: reveal sort indicator on header cell hover */