@duro-app/ui 5.11.0 → 5.13.0

package/src/components/Toast/ToastProvider.tsx

@@ -14,83 +14,15 @@ import {html} from 'react-strict-dom'
 import {Icon, type IconName} from '../Icon'
 import {usePortalMount} from '../ThemeProvider/ThemeProvider'
 import {styles} from './styles.css'
+import {
+  createToastStore,
+  type ToastContextValue,
+  type ToastEntry,
+  type ToastStore,
+  type ToastVariant,
+} from './store'
 
-export type ToastVariant = 'success' | 'error' | 'info' | 'warning'
-
-export interface ToastAction {
-  label: string
-  onClick: () => void
-}
-
-export interface ToastOptions {
-  /** Visual + semantic tone. Errors announce assertively; errors and
-   *  warnings linger longer. */
-  variant?: ToastVariant
-  message: ReactNode
-  /** Optional single action, e.g. Undo. Runs, then dismisses the toast. */
-  action?: ToastAction
-  /** Auto-dismiss delay in ms. `0` (or negative) keeps it until dismissed.
-   *  The countdown pauses while the toast is hovered or holds focus. */
-  duration?: number
-}
-
-export interface ToastContextValue {
-  /** Show a toast; returns its id so it can be dismissed programmatically. */
-  toast: (opts: ToastOptions) => string
-  dismiss: (id: string) => void
-}
-
-interface ToastEntry {
-  id: string
-  variant: ToastVariant
-  message: ReactNode
-  action?: ToastAction
-  duration: number
-}
-
-interface ToastStore {
-  subscribe: (cb: () => void) => () => void
-  getSnapshot: () => readonly ToastEntry[]
-  add: (opts: ToastOptions) => string
-  remove: (id: string) => void
-}
-
-const DEFAULT_DURATION: Record<ToastVariant, number> = {
-  success: 5000,
-  info: 5000,
-  error: 8000,
-  warning: 8000,
-}
-
-function createToastStore(): ToastStore {
-  let entries: ToastEntry[] = []
-  let seq = 0
-  const listeners = new Set<() => void>()
-  const notify = () => listeners.forEach((l) => l())
-
-  return {
-    subscribe: (cb) => {
-      listeners.add(cb)
-      return () => listeners.delete(cb)
-    },
-    getSnapshot: () => entries,
-    add: (opts) => {
-      const variant = opts.variant ?? 'info'
-      const id = `toast-${++seq}`
-      const duration = opts.duration ?? DEFAULT_DURATION[variant]
-      entries = [...entries, {id, variant, message: opts.message, action: opts.action, duration}]
-      notify()
-      return id
-    },
-    remove: (id) => {
-      const next = entries.filter((e) => e.id !== id)
-      if (next.length !== entries.length) {
-        entries = next
-        notify()
-      }
-    },
-  }
-}
+export type {ToastAction, ToastContextValue, ToastOptions, ToastVariant} from './store'
 
 const variantIcon: Record<ToastVariant, IconName> = {
   success: 'check-circle-filled',
@@ -115,10 +47,12 @@ export function useToast(): ToastContextValue {
 
 function ToastItem({
   entry,
+  store,
   onDismiss,
   dismissLabel,
 }: {
   entry: ToastEntry
+  store: ToastStore
   onDismiss: (id: string) => void
   dismissLabel: string
 }) {
@@ -126,19 +60,17 @@ function ToastItem({
   const [hovered, setHovered] = useState(false)
   const [focused, setFocused] = useState(false)
   const paused = hovered || focused
-  // What is left of the countdown; a pause keeps it, a resume restarts the
-  // timer with what was left (WCAG 2.2.1: the reader controls the timing).
-  const remaining = useRef(duration)
-
+  // The store keeps what is left of the countdown; a pause keeps it, a resume
+  // restarts the timer with what was left (WCAG 2.2.1: the reader controls the timing).
   useEffect(() => {
     if (duration <= 0 || paused) return
     const started = Date.now()
-    const timer = setTimeout(() => onDismiss(id), Math.max(remaining.current, 0))
+    const timer = setTimeout(() => onDismiss(id), Math.max(store.remaining(id), 0))
     return () => {
       clearTimeout(timer)
-      remaining.current -= Date.now() - started
+      store.spend(id, Date.now() - started)
     }
-  }, [id, duration, paused, onDismiss])
+  }, [id, duration, paused, onDismiss, store])
 
   return (
     <html.div
@@ -213,7 +145,13 @@ export function ToastProvider({dismissLabel = 'Dismiss', children}: ToastProvide
   const region = (
     <html.div role="region" aria-label="Notifications" style={styles.region}>
       {entries.map((entry) => (
-        <ToastItem key={entry.id} entry={entry} onDismiss={dismiss} dismissLabel={dismissLabel} />
+        <ToastItem
+          key={entry.id}
+          entry={entry}
+          store={store}
+          onDismiss={dismiss}
+          dismissLabel={dismissLabel}
+        />
       ))}
     </html.div>
   )

package/src/components/Toast/native.css.ts

@@ -0,0 +1,78 @@
+import {css} from 'react-strict-dom'
+import {colors} from '@duro-app/tokens/tokens/colors.css'
+import {spacing, radii} from '@duro-app/tokens/tokens/spacing.css'
+import {typography} from '@duro-app/tokens/tokens/typography.css'
+import {shadows} from '@duro-app/tokens/tokens/shadows.css'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
+
+/**
+ * The native toast, the picked B0 direction (docs/mockups/native-toast/
+ * Tinted.dc.html): a card with a status-coloured edge, one row of message,
+ * action and close. Motion is Reanimated's.
+ */
+export const nativeStyles = css.create({
+  region: {
+    position: 'absolute',
+    left: 0,
+    right: 0,
+    display: 'flex',
+    flexDirection: 'column',
+    alignItems: 'center',
+    gap: spacing.sm,
+    paddingLeft: spacing.md,
+    paddingRight: spacing.md,
+  },
+  // The bottom safe-area inset and the keyboard, plus the edge spacing.
+  regionBottom: (bottom: number) => ({bottom}),
+  toast: {
+    boxSizing: 'border-box',
+    width: '100%',
+    maxWidth: sizes.toastMaxW,
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'center',
+    gap: spacing.sm,
+    paddingTop: spacing.sm,
+    paddingBottom: spacing.sm,
+    paddingRight: spacing.sm,
+    paddingLeft: spacing.md,
+    borderRadius: radii.md,
+    borderWidth: borders.hairline,
+    borderStyle: 'solid',
+    borderColor: colors.border,
+    borderLeftWidth: borders.accent,
+    backgroundColor: colors.bgCard,
+    boxShadow: shadows.md,
+  },
+  success: {borderLeftColor: colors.successBorder},
+  error: {borderLeftColor: colors.errorBorder},
+  info: {borderLeftColor: colors.infoBorder},
+  warning: {borderLeftColor: colors.warningBorder},
+  message: {
+    flexGrow: 1,
+    flexShrink: 1,
+    color: colors.text,
+    fontSize: typography.fontSizeSm,
+    lineHeight: typography.lineHeight,
+  },
+  action: {
+    display: 'flex',
+    padding: spacing.sm,
+    borderWidth: 0,
+    backgroundColor: 'transparent',
+    color: colors.accent,
+    fontSize: typography.fontSizeSm,
+    fontWeight: typography.fontWeightSemibold,
+  },
+  close: {
+    display: 'flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+    width: sizes.touchTarget,
+    height: sizes.touchTarget,
+    borderRadius: radii.sm,
+    borderWidth: 0,
+    backgroundColor: 'transparent',
+  },
+})

package/src/components/Toast/store.ts

@@ -0,0 +1,96 @@
+import type {ReactNode} from 'react'
+
+/** The toast queue both platforms' ToastProvider render (plan N0, Slice B). */
+
+export type ToastVariant = 'success' | 'error' | 'info' | 'warning'
+
+export interface ToastAction {
+  label: string
+  onClick: () => void
+}
+
+export interface ToastOptions {
+  /** Visual + semantic tone. Errors announce assertively; errors and
+   *  warnings linger longer. */
+  variant?: ToastVariant
+  message: ReactNode
+  /** Optional single action, e.g. Undo. Runs, then dismisses the toast. */
+  action?: ToastAction
+  /** Auto-dismiss delay in ms. `0` (or negative) keeps it until dismissed.
+   *  The countdown pauses while the toast is hovered or holds focus. */
+  duration?: number
+}
+
+export interface ToastContextValue {
+  /** Show a toast; returns its id so it can be dismissed programmatically. */
+  toast: (opts: ToastOptions) => string
+  dismiss: (id: string) => void
+}
+
+export interface ToastEntry {
+  id: string
+  variant: ToastVariant
+  message: ReactNode
+  action?: ToastAction
+  duration: number
+}
+
+export interface ToastStore {
+  subscribe: (cb: () => void) => () => void
+  getSnapshot: () => readonly ToastEntry[]
+  add: (opts: ToastOptions) => string
+  remove: (id: string) => void
+  /**
+   * What is left of a toast's countdown, in ms. Kept here, not in the toast's
+   * component: on native a toast re-renders into another host when a Dialog
+   * above it closes, and its countdown carries on.
+   */
+  remaining: (id: string) => number
+  /** Count `ms` of shown time against a toast's countdown. */
+  spend: (id: string, ms: number) => void
+}
+
+export const DEFAULT_DURATION: Record<ToastVariant, number> = {
+  success: 5000,
+  info: 5000,
+  error: 8000,
+  warning: 8000,
+}
+
+export function createToastStore(): ToastStore {
+  let entries: ToastEntry[] = []
+  let seq = 0
+  const left = new Map<string, number>()
+  const listeners = new Set<() => void>()
+  const notify = () => listeners.forEach((l) => l())
+
+  return {
+    subscribe: (cb) => {
+      listeners.add(cb)
+      return () => listeners.delete(cb)
+    },
+    getSnapshot: () => entries,
+    add: (opts) => {
+      const variant = opts.variant ?? 'info'
+      const id = `toast-${++seq}`
+      const duration = opts.duration ?? DEFAULT_DURATION[variant]
+      entries = [...entries, {id, variant, message: opts.message, action: opts.action, duration}]
+      left.set(id, duration)
+      notify()
+      return id
+    },
+    remove: (id) => {
+      left.delete(id)
+      const next = entries.filter((e) => e.id !== id)
+      if (next.length !== entries.length) {
+        entries = next
+        notify()
+      }
+    },
+    remaining: (id) => left.get(id) ?? 0,
+    spend: (id, ms) => {
+      const current = left.get(id)
+      if (current !== undefined) left.set(id, current - ms)
+    },
+  }
+}

package/src/components/Toggle/Toggle.tsx

@@ -1,10 +1,11 @@
 import {type ReactNode, useCallback, useLayoutEffect, useRef} from 'react'
-import {html} from 'react-strict-dom'
 import {useControllableValue} from '../../hooks/useControllableValue'
 import {useToggleGroup} from '../ToggleGroup/ToggleGroupContext'
 import {useGroupedControl} from '../ButtonGroup/useGroupedControl'
 import {mergeRefs} from '../../shared/mergeRefs'
+import {ButtonHost} from '../../shared/ButtonHost'
 import type {ControlSize} from '../../shared/types'
+import {isNative} from '../../platform'
 import {styles} from './styles.css'
 
 export type ToggleSize = ControlSize
@@ -83,7 +84,7 @@ export function Toggle({
   }, [disabled, isGrouped, value, group, pressed, setStandalonePressed])
 
   return (
-    <html.button
+    <ButtonHost
       ref={mergeRefs(ref, grouped.ref)}
       type="button"
       tabIndex={
@@ -103,6 +104,7 @@ export function Toggle({
       data-pressed={pressed ? '' : undefined}
       style={[
         styles.base,
+        isNative && styles.nativeFlex,
         sizeMap[size],
         pressed ? styles.pressed : styles.unpressed,
         wrap && wrappedSizeMap[size],
@@ -114,6 +116,6 @@ export function Toggle({
       ]}
     >
       {children}
-    </html.button>
+    </ButtonHost>
   )
 }

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

@@ -27,13 +27,20 @@ export const styles = css.create({
     minHeight: {default: null, '@media (pointer: coarse)': sizes.touchTarget},
   },
   sizeDefault: {
-    padding: `${spacing.sm} ${spacing.md}`,
+    // Longhands: RSD-native rejects a multi-value shorthand.
+    paddingTop: spacing.sm,
+    paddingBottom: spacing.sm,
+    paddingLeft: spacing.md,
+    paddingRight: spacing.md,
     fontSize: typography.fontSizeSm,
     borderRadius: radii.sm,
     gap: spacing.sm,
   },
   sizeSmall: {
-    padding: `${spacing.xs} ${spacing.sm}`,
+    paddingTop: spacing.xs,
+    paddingBottom: spacing.xs,
+    paddingLeft: spacing.sm,
+    paddingRight: spacing.sm,
     fontSize: typography.fontSizeXs,
     borderRadius: radii.sm,
     gap: spacing.xs,
@@ -87,4 +94,9 @@ export const styles = css.create({
     opacity: 0.5,
     cursor: 'not-allowed',
   },
+  // RSD-native only honors display:'flex' (not 'inline-flex'). Layered on
+  // native only.
+  nativeFlex: {
+    display: 'flex',
+  },
 })

package/src/components/Tooltip/Tooltip.meta.ts

@@ -2,7 +2,7 @@ import type {ComponentMeta} from '../component-meta'
 
 export const meta: ComponentMeta = {
   description:
-    'Hover/focus tooltip that shows supplementary content. Compound component — Root is required (throws without it).',
+    'Hover/focus tooltip that shows supplementary content. Compound component — Root is required (throws without it). On touch (React Native) no bubble is drawn: a string content becomes the accessibility hint of the Duro trigger inside (Button, Toggle, Menu.Trigger, Popover.Trigger), read after its name. Keep tooltip text non-essential, and keep aria-label on icon-only triggers.',
   whenToUse: [
     'Providing extra context on hover for icon-only buttons',
     'Explaining abbreviations or truncated text',

package/src/components/Tooltip/Tooltip.native.tsx

@@ -0,0 +1,36 @@
+import type {ReactNode} from 'react'
+import {TooltipHintContext} from './TooltipHint'
+
+type Placement = 'top' | 'bottom' | 'left' | 'right'
+
+interface RootProps {
+  children: ReactNode
+  /** On native, a string becomes the trigger's accessibility hint; anything else is dropped. */
+  content: ReactNode
+  /** Web only. */
+  placement?: Placement
+  /** Web only. */
+  delay?: number
+}
+
+/**
+ * Native Tooltip (plan N0, Decision 5): touch has no hover, so no bubble is
+ * drawn. A string `content` becomes the accessibility hint of the Duro
+ * trigger inside (Button, Toggle, Menu.Trigger, Popover.Trigger), read after
+ * its name. Keep tooltip text non-essential: sighted touch users never see
+ * it, and an icon-only trigger still needs its `aria-label`.
+ */
+function Root({children, content}: RootProps) {
+  const hint = typeof content === 'string' ? content : undefined
+  return <TooltipHintContext.Provider value={hint}>{children}</TooltipHintContext.Provider>
+}
+
+/** Renders its child in place; the hint reaches it through context. */
+function Trigger({children}: {children: ReactNode}) {
+  return children
+}
+
+export const Tooltip = {
+  Root,
+  Trigger,
+}

package/src/components/Tooltip/TooltipHint.ts

@@ -0,0 +1,13 @@
+import {createContext, useContext} from 'react'
+
+/**
+ * Native: a Tooltip's string content, read by the Duro trigger inside it
+ * (Button, Toggle, Menu.Trigger, Popover.Trigger) and set as that trigger's
+ * own accessibility hint (plan N0, Decision 5). Touch has no hover, so the
+ * text is never drawn; screen readers read it after the trigger's name.
+ */
+export const TooltipHintContext = createContext<string | undefined>(undefined)
+
+export function useTooltipHint(): string | undefined {
+  return useContext(TooltipHintContext)
+}

package/src/components/Tree/Tree.meta.ts

@@ -2,7 +2,7 @@ import type {ComponentMeta} from '../component-meta'
 
 export const meta: ComponentMeta = {
   description:
-    'Hierarchy of items with single selection and expandable branches (the WAI-ARIA tree pattern): one tab stop, arrow keys, Home/End, typeahead. An Item with href renders its row as a real link (cmd-click opens a tab) outside the tab order; Enter/Space follows it, through onNavigate(href, event) when given. Compound component — Root is required.',
+    'Hierarchy of items with single selection and expandable branches (the WAI-ARIA tree pattern): one tab stop, arrow keys, Home/End, typeahead. An Item with href renders its row as a real link (cmd-click opens a tab) outside the tab order; Enter/Space follows it, through onNavigate(href, event) when given. Compound component — Root is required. On React Native selection, expansion and aria-level are the same; the keyboard model (arrows, Home/End, typeahead) is web only.',
   whenToUse: [
     'Browsing data that nests to any depth — a file tree, zones › services › capabilities, namespace › resource',
     'Picking one node of a hierarchy to show its details beside the tree',

package/src/components/Tree/Tree.tsx

@@ -1,17 +1,10 @@
-import {
-  Children,
-  type ReactNode,
-  useCallback,
-  useContext,
-  useEffect,
-  useId,
-  useLayoutEffect,
-  useRef,
-  useState,
-} from 'react'
+import {Children, type ReactNode, useCallback, useContext, useId, useRef, useState} from 'react'
 import {html} from 'react-strict-dom'
+import {SPACING_PX} from '@duro-app/tokens/keys'
 import {styles} from './styles.css'
+import {isNative} from '../../platform'
 import {TreeContext, TreeLevelContext, useTree} from './TreeContext'
+import {useTreeKeyboard} from './useTreeKeyboard'
 import {isPlainClick, type LinkClickEvent, type OnNavigate} from '../../shared/navigate'
 
 /* Tree — a hierarchy of items (the WAI-ARIA tree pattern): single selection,
@@ -43,8 +36,6 @@ interface RootProps {
   onExpandedChange?: (expanded: string[]) => void
 }
 
-const TYPEAHEAD_RESET_MS = 500
-
 function Root({
   children,
   'aria-label': ariaLabel,
@@ -86,126 +77,16 @@ function Root({
   const isExpanded = useCallback((v: string) => open.includes(v), [open])
   const toggle = useCallback((v: string) => setExpanded(v, !open.includes(v)), [open, setExpanded])
 
-  // Exactly one item is tabbable: the focus holder, else the selection, else
-  // the first item — re-checked when an item appears, closes or goes away.
-  useLayoutEffect(() => {
-    const root = rootRef.current
-    if (!root) return
-    const tabbable = root.querySelector('[role="treeitem"][tabindex="0"]')
-    if (tabbable) return
-    const first = root.querySelector<HTMLElement>('[role="treeitem"]')
-    const next = first?.dataset.treeValue ?? null
-    if (next !== focusValue) setFocusValue(next)
-  }, [focusValue, open, children])
-
-  // Keyboard: DOM order over the rendered items IS the visible order (a
-  // closed branch renders no children), so navigation reads it directly.
-  const typeahead = useRef({text: '', at: 0})
-  useEffect(() => {
-    const root = rootRef.current
-    if (!root) return
-    const rootEl = root
-    const items = () => Array.from(rootEl.querySelectorAll<HTMLElement>('[role="treeitem"]'))
-    const focusItem = (el: HTMLElement | null | undefined) => {
-      if (!el) return
-      el.focus()
-    }
-    function onKeyDown(e: KeyboardEvent) {
-      const current = (e.target as HTMLElement).closest<HTMLElement>('[role="treeitem"]')
-      if (!current || !rootEl.contains(current)) return
-      const list = items()
-      const i = list.indexOf(current)
-      const val = current.dataset.treeValue ?? ''
-      const isOpen = current.getAttribute('aria-expanded')
-      switch (e.key) {
-        case 'ArrowDown':
-          e.preventDefault()
-          focusItem(list[i + 1])
-          return
-        case 'ArrowUp':
-          e.preventDefault()
-          focusItem(list[i - 1])
-          return
-        case 'ArrowRight':
-          e.preventDefault()
-          if (isOpen === 'false') setExpanded(val, true)
-          else if (isOpen === 'true') focusItem(list[i + 1])
-          return
-        case 'ArrowLeft': {
-          e.preventDefault()
-          if (isOpen === 'true') {
-            setExpanded(val, false)
-            return
-          }
-          const parent = current.parentElement?.closest<HTMLElement>('[role="treeitem"]')
-          if (parent && rootEl.contains(parent)) focusItem(parent)
-          return
-        }
-        case 'Home':
-          e.preventDefault()
-          focusItem(list[0])
-          return
-        case 'End':
-          e.preventDefault()
-          focusItem(list[list.length - 1])
-          return
-        case 'Enter':
-        case ' ': {
-          e.preventDefault()
-          // an item with href: follow its link (the click selects it and
-          // runs onNavigate, or the browser navigates)
-          const link = current.querySelector<HTMLElement>(':scope > [data-tree-link]')
-          if (link) link.click()
-          else onSelect(val)
-          return
-        }
-      }
-      // typeahead: a printable character, no modifier
-      if (e.key.length === 1 && !e.ctrlKey && !e.metaKey && !e.altKey) {
-        const now = Date.now()
-        const t = typeahead.current
-        t.text = now - t.at > TYPEAHEAD_RESET_MS ? e.key : t.text + e.key
-        t.at = now
-        // the same letter typed again cycles through the items it starts;
-        // a real prefix ("fi") narrows, and may match the current item
-        const typed = t.text.toLocaleLowerCase()
-        const repeat = [...typed].every((c) => c === typed[0])
-        const needle = repeat ? typed[0] : typed
-        const start = repeat ? i + 1 : i
-        for (let k = 0; k < list.length; k++) {
-          const el = list[(start + k) % list.length]
-          if ((el.dataset.treeText ?? '').toLocaleLowerCase().startsWith(needle)) {
-            focusItem(el)
-            break
-          }
-        }
-      }
-    }
-    // the roving tab stop follows focus, however it moved (keys or pointer)
-    function onFocusIn(e: FocusEvent) {
-      const item = (e.target as HTMLElement).closest<HTMLElement>('[role="treeitem"]')
-      const v = item?.dataset.treeValue
-      if (v) setFocusValue(v)
-      setKeyboardFocus(item?.matches(':focus-visible') ?? false)
-    }
-    function onFocusOut(e: FocusEvent) {
-      if (!rootEl.contains(e.relatedTarget as Node | null)) setKeyboardFocus(false)
-    }
-    const onPointerDown = () => setKeyboardFocus(false)
-    const onKey = () => setKeyboardFocus(true)
-    root.addEventListener('keydown', onKeyDown)
-    root.addEventListener('keydown', onKey)
-    root.addEventListener('focusin', onFocusIn)
-    root.addEventListener('focusout', onFocusOut)
-    root.addEventListener('pointerdown', onPointerDown)
-    return () => {
-      root.removeEventListener('keydown', onKeyDown)
-      root.removeEventListener('keydown', onKey)
-      root.removeEventListener('focusin', onFocusIn)
-      root.removeEventListener('focusout', onFocusOut)
-      root.removeEventListener('pointerdown', onPointerDown)
-    }
-  }, [onSelect, setExpanded])
+  useTreeKeyboard({
+    rootRef,
+    focusValue,
+    setFocusValue,
+    setKeyboardFocus,
+    open,
+    children,
+    onSelect,
+    setExpanded,
+  })
 
   return (
     <TreeContext.Provider
@@ -272,7 +153,9 @@ function Item({value, label, textValue, children, meta, href, onNavigate}: ItemP
   // and a name computed from content would read the whole subtree
   const labelId = useId()
   const rowStyles = [
-    styles.indent(level),
+    isNative
+      ? styles.indentPx(SPACING_PX.sm + Math.max(0, level - 1) * SPACING_PX.lg)
+      : styles.indent(level),
     selected && styles.rowSelected,
     keyboardFocus && focusValue === value && styles.rowFocused,
   ]
@@ -287,7 +170,12 @@ function Item({value, label, textValue, children, meta, href, onNavigate}: ItemP
           e.preventDefault()
           toggle(value)
         }}
-        style={[styles.chevron, open && styles.chevronOpen, !hasChildren && styles.chevronLeaf]}
+        style={[
+          styles.chevron,
+          isNative && styles.nativeFlex,
+          open && styles.chevronOpen,
+          !hasChildren && styles.chevronLeaf,
+        ]}
       >
         ▸
       </html.span>

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

@@ -56,6 +56,8 @@ export const styles = css.create({
     outlineWidth: 0,
     outlineStyle: 'none',
   },
+  // Native has no calc(): the same steps, in px from the spacing scale.
+  indentPx: (px: number) => ({paddingLeft: px}),
   // one indent step per level below the top
   indent: (level: number) => ({
     paddingLeft: `calc(${spacing.sm} + ${Math.max(0, level - 1)} * ${spacing.lg})`,
@@ -71,6 +73,10 @@ export const styles = css.create({
     fontWeight: typography.fontWeightMedium,
     backgroundColor: colors.bgCardHover,
   },
+  // RSD on native lays out only display: flex, not the web's inline-flex.
+  nativeFlex: {
+    display: 'flex',
+  },
   chevron: {
     display: 'inline-flex',
     alignItems: 'center',

package/src/components/Tree/useTreeKeyboard.native.ts

@@ -0,0 +1,5 @@
+/**
+ * Native has no hardware-keyboard tree navigation (plan N0, Decision 6):
+ * each item is a screen-reader stop with its role, level and expanded state.
+ */
+export function useTreeKeyboard(_input: unknown) {}