@duro-app/ui 5.11.0 → 5.13.0

package/src/components/Spinner/ring.css.ts

@@ -0,0 +1,45 @@
+import {css} from 'react-strict-dom'
+import {colors} from '@duro-app/tokens/tokens/colors.css'
+import {sizes} from '@duro-app/tokens/tokens/sizes.css'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
+
+/** The ring both platforms draw; each turns it its own way. */
+export const ring = css.create({
+  root: {
+    display: 'inline-flex',
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  // RSD-native only honors display:'flex' (not 'inline-flex').
+  nativeRoot: {
+    display: 'flex',
+  },
+  ring: {
+    borderRadius: '50%',
+    borderStyle: 'solid',
+    borderColor: colors.border,
+    borderTopColor: colors.accent,
+  },
+  sm: {
+    width: sizes.spinnerSm,
+    height: sizes.spinnerSm,
+    borderWidth: borders.strong,
+  },
+  md: {
+    width: sizes.spinnerMd,
+    height: sizes.spinnerMd,
+    borderWidth: borders.strong,
+  },
+  lg: {
+    width: sizes.spinnerLg,
+    height: sizes.spinnerLg,
+    borderWidth: borders.accent,
+  },
+  // Layered on visuallyHidden.base.
+  srOnly: {
+    clip: 'rect(0, 0, 0, 0)',
+  },
+})
+
+/** One turn, in ms: the web animation's 0.6s. */
+export const TURN_MS = 600

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

@@ -1,8 +1,5 @@
 import {css} from 'react-strict-dom'
-import {colors} from '@duro-app/tokens/tokens/colors.css'
-import {sizes} from '@duro-app/tokens/tokens/sizes.css'
 import {easing} from '@duro-app/tokens/tokens/motion.css'
-import {borders} from '@duro-app/tokens/tokens/borders.css'
 
 const spin = css.keyframes({
   '0%': {transform: 'rotate(0deg)'},
@@ -10,38 +7,11 @@ const spin = css.keyframes({
 })
 
 export const styles = css.create({
-  root: {
-    display: 'inline-flex',
-    alignItems: 'center',
-    justifyContent: 'center',
-  },
-  spinner: {
-    borderRadius: '50%',
-    borderStyle: 'solid',
-    borderColor: colors.border,
-    borderTopColor: colors.accent,
+  // Web turns the ring with a CSS animation (one turn per TURN_MS).
+  spinning: {
     animationName: spin,
     animationDuration: '0.6s',
     animationTimingFunction: easing.linear,
     animationIterationCount: 'infinite',
   },
-  sm: {
-    width: sizes.spinnerSm,
-    height: sizes.spinnerSm,
-    borderWidth: borders.strong,
-  },
-  md: {
-    width: sizes.spinnerMd,
-    height: sizes.spinnerMd,
-    borderWidth: borders.strong,
-  },
-  lg: {
-    width: sizes.spinnerLg,
-    height: sizes.spinnerLg,
-    borderWidth: borders.accent,
-  },
-  // Layered on visuallyHidden.base.
-  srOnly: {
-    clip: 'rect(0, 0, 0, 0)',
-  },
 })

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

@@ -0,0 +1,40 @@
+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.',
+  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',
+  ],
+  whenNotToUse: [
+    'A fixed list/detail layout nobody resizes — use Grid layout="split"',
+    'Navigation beside content — use AppShell or the page-with-sidenav recipe',
+    'A short-lived inspection over a list — use DetailPanel',
+  ],
+  anatomy: {
+    required: ['Root', 'Pane'],
+    optional: ['Handle'],
+  },
+  relatedTo: [
+    {
+      component: 'Grid',
+      kind: 'contrast',
+      relationship: 'Grid layout="split" is a fixed split; SplitPane lets people resize it',
+    },
+    {
+      component: 'DetailPanel',
+      kind: 'contrast',
+      relationship: 'DetailPanel overlays the list; SplitPane keeps both side by side',
+    },
+  ],
+  example: `<SplitPane.Root aria-label="Resize the session list" minSize="sidebarW" maxSize="panelLg">
+  <SplitPane.Pane>
+    <List.Root aria-label="Sessions">…</List.Root>
+  </SplitPane.Pane>
+  <SplitPane.Handle />
+  <SplitPane.Pane>
+    <Panel.Root>…</Panel.Root>
+  </SplitPane.Pane>
+</SplitPane.Root>`,
+}

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

@@ -0,0 +1,47 @@
+import type {ReactNode} from 'react'
+import {html} from 'react-strict-dom'
+import type {SizeToken} from '@duro-app/tokens/keys'
+import type {Breakpoint} from '@duro-app/tokens/tokens/breakpoints.css'
+import {styles} from './styles.css'
+
+interface RootProps {
+  children: ReactNode
+  /** Web only: on a phone the panes stack. */
+  defaultSize?: SizeToken
+  /** Web only. */
+  size?: number
+  /** Web only. */
+  onSizeChange?: (px: number) => void
+  /** Web only. */
+  minSize?: SizeToken
+  /** Web only. */
+  maxSize?: SizeToken
+  /** Web only: a phone is below every breakpoint, so native always stacks. */
+  collapseBelow?: Breakpoint
+  /** The handle's accessible name (web only: native has no handle). */
+  'aria-label': string
+}
+
+/**
+ * Native SplitPane (plan N0, Slice B): a phone shows one pane at a time's
+ * worth of width, so the panes stack in one column and there is no handle —
+ * the shape the web takes below `collapseBelow`.
+ */
+function Root({children}: RootProps) {
+  return <html.div style={[styles.root, styles.rootStacked]}>{children}</html.div>
+}
+
+function Pane({children}: {children: ReactNode}) {
+  return <html.div style={styles.stackedPane}>{children}</html.div>
+}
+
+/** No handle on native. */
+function Handle() {
+  return null
+}
+
+export const SplitPane = {
+  Root,
+  Pane,
+  Handle,
+}

package/src/components/SplitPane/SplitPane.stories.tsx

@@ -0,0 +1,148 @@
+import type {Meta, StoryObj} from '@storybook/react'
+import {expect, fn, userEvent, waitFor} from 'storybook/test'
+import {css, html} from 'react-strict-dom'
+import {SIZES_PX, SPACING_PX, type SizeToken} from '@duro-app/tokens/keys'
+import type {Breakpoint} from '@duro-app/tokens/tokens/breakpoints.css'
+import {SplitPane} from './SplitPane'
+import {setViewport} from '../Drawer/touchInput'
+import {List} from '../List/List'
+import {Panel} from '../Panel/Panel'
+import {Heading} from '../Heading/Heading'
+import {Text} from '../Text/Text'
+
+const meta: Meta = {
+  title: 'Components/SplitPane',
+  parameters: {layout: 'fullscreen'},
+}
+
+export default meta
+type Story = StoryObj
+
+const SESSIONS = ['Refactor auth', 'Flaky e2e', 'Release notes', 'Docs pass', 'Perf trace']
+
+// A SplitPane fills its parent: the story gives it the viewport's height.
+const frame = css.create({fill: {height: '100vh'}})
+
+interface SplitArgs {
+  defaultSize: SizeToken
+  minSize: SizeToken
+  maxSize: SizeToken
+  collapseBelow: Breakpoint
+  onSizeChange?: (px: number) => void
+}
+
+const DEFAULT_ARGS: SplitArgs = {
+  defaultSize: 'sidebarW',
+  minSize: 'sidebarW',
+  maxSize: 'panelLg',
+  collapseBelow: 'sm',
+}
+
+// Width tokens that make sense for a pane, smallest first.
+const PANE_SIZES: SizeToken[] = ['sidebarW', 'panelSm', 'panelMd', 'panelLg']
+
+/** The picked B0 direction (docs/mockups/split-pane/Hairline.dc.html). */
+function Split(props: Partial<SplitArgs>) {
+  const {defaultSize, minSize, maxSize, collapseBelow, onSizeChange} = {...DEFAULT_ARGS, ...props}
+  return (
+    <html.div style={frame.fill}>
+      <SplitPane.Root
+        aria-label="Resize the session list"
+        defaultSize={defaultSize}
+        minSize={minSize}
+        maxSize={maxSize}
+        collapseBelow={collapseBelow}
+        onSizeChange={onSizeChange}
+      >
+        <SplitPane.Pane>
+          <List.Root aria-label="Sessions">
+            {SESSIONS.map((s) => (
+              <List.Item key={s}>
+                <List.Text>{s}</List.Text>
+              </List.Item>
+            ))}
+          </List.Root>
+        </SplitPane.Pane>
+        <SplitPane.Handle />
+        <SplitPane.Pane>
+          <Panel.Root>
+            <Panel.Header>
+              <Heading level={2}>Refactor auth</Heading>
+            </Panel.Header>
+            <Panel.Body>
+              <Text>The transcript of the selected session.</Text>
+            </Panel.Body>
+          </Panel.Root>
+        </SplitPane.Pane>
+      </SplitPane.Root>
+    </html.div>
+  )
+}
+
+export const Default: StoryObj<SplitArgs> = {
+  args: {...DEFAULT_ARGS, onSizeChange: fn()},
+  argTypes: {
+    defaultSize: {
+      control: 'select',
+      options: PANE_SIZES,
+      description: 'Starting width of the first pane',
+    },
+    minSize: {control: 'select', options: PANE_SIZES, description: 'Narrowest the first pane goes'},
+    maxSize: {control: 'select', options: PANE_SIZES, description: 'Widest the first pane goes'},
+    collapseBelow: {
+      control: 'select',
+      options: ['xs', 'sm', 'md', 'lg', 'xl'],
+      description: "Below this breakpoint (the split's own width) the panes stack",
+    },
+  },
+  // Keyed by the starting width: it seeds state on mount, so a change remounts the split.
+  render: (args) => <Split key={args.defaultSize} {...args} />,
+}
+
+const separator = () => document.querySelector<HTMLElement>('[role="separator"]')
+
+export const KeyboardMovesTheSeparator: Story = {
+  render: () => <Split />,
+  beforeEach: async () => {
+    await setViewport(1200, 800)
+  },
+  play: async () => {
+    await waitFor(() => expect(separator()).not.toBeNull())
+    const handle = separator()!
+    const primary = document.getElementById(handle.getAttribute('aria-controls')!)!
+    await expect(handle).toHaveAttribute('aria-valuenow', String(SIZES_PX.sidebarW))
+    await expect(handle).toHaveAttribute('aria-valuemin', String(SIZES_PX.sidebarW))
+    await expect(handle).toHaveAttribute('aria-valuemax', String(SIZES_PX.panelLg))
+
+    handle.focus()
+    await userEvent.keyboard('{ArrowRight}')
+    const after = SIZES_PX.sidebarW + SPACING_PX.md
+    await expect(handle).toHaveAttribute('aria-valuenow', String(after))
+    await waitFor(() => expect(primary.getBoundingClientRect().width).toBeCloseTo(after, 0))
+
+    await userEvent.keyboard('{End}')
+    await expect(handle).toHaveAttribute('aria-valuenow', String(SIZES_PX.panelLg))
+    // the bound holds
+    await userEvent.keyboard('{ArrowRight}')
+    await expect(handle).toHaveAttribute('aria-valuenow', String(SIZES_PX.panelLg))
+
+    await userEvent.keyboard('{Home}')
+    await expect(handle).toHaveAttribute('aria-valuenow', String(SIZES_PX.sidebarW))
+  },
+}
+
+export const NarrowStacksInOneColumn: Story = {
+  render: () => <Split />,
+  beforeEach: async () => {
+    await setViewport(390, 844)
+  },
+  play: async ({canvas}) => {
+    await waitFor(() => expect(separator()).toBeNull())
+    const list = canvas.getByRole('list', {name: 'Sessions'})
+    const heading = canvas.getByRole('heading', {name: 'Refactor auth'})
+    // one column: the detail sits below the list
+    await expect(heading.getBoundingClientRect().top).toBeGreaterThan(
+      list.getBoundingClientRect().bottom - 1,
+    )
+  },
+}

package/src/components/SplitPane/SplitPane.tsx

@@ -0,0 +1,218 @@
+import {
+  Children,
+  createContext,
+  isValidElement,
+  type ReactNode,
+  useCallback,
+  useContext,
+  useEffect,
+  useId,
+  useRef,
+  useState,
+} from 'react'
+import {html} from 'react-strict-dom'
+import {SIZES_PX, SPACING_PX, type SizeToken} from '@duro-app/tokens/keys'
+import type {Breakpoint} from '@duro-app/tokens/tokens/breakpoints.css'
+import {useContainerBelow} from '../../hooks/useContainerBelow'
+import {styles} from './styles.css'
+
+interface SplitPaneContextValue {
+  size: number
+  min: number
+  max: number
+  setSize: (px: number) => void
+  stacked: boolean
+  primaryId: string
+  label: string
+}
+
+const SplitPaneContext = createContext<SplitPaneContextValue | null>(null)
+
+function useSplitPane(part: string) {
+  const ctx = useContext(SplitPaneContext)
+  if (!ctx) throw new Error(`SplitPane.${part} must be used within SplitPane.Root`)
+  return ctx
+}
+
+/** Which Pane this is, in order: the first is the one the handle sizes. */
+const PaneIndexContext = createContext(0)
+
+/** One arrow press moves the handle this far; with Shift, `STEP_LARGE`. */
+const STEP = SPACING_PX.md
+const STEP_LARGE = SPACING_PX.xxl
+
+const clamp = (px: number, min: number, max: number) => Math.min(max, Math.max(min, px))
+
+interface RootProps {
+  children: ReactNode
+  /** The primary (first) pane's starting width, a size token. Default: `sidebarW` */
+  defaultSize?: SizeToken
+  /** Controlled width of the primary pane, in px (from `onSizeChange`) */
+  size?: number
+  /** Called with the primary pane's new width while the handle moves */
+  onSizeChange?: (px: number) => void
+  /** The primary pane's narrowest width, a size token. Default: `sidebarW` */
+  minSize?: SizeToken
+  /** The primary pane's widest width, a size token. Default: `panelLg` */
+  maxSize?: SizeToken
+  /** Below this breakpoint, measured on the split's own width, the panes stack. Default: `sm` */
+  collapseBelow?: Breakpoint
+  /** The handle's accessible name ("Resize list"). */
+  'aria-label': string
+}
+
+/**
+ * Two panes side by side with a resizable separator between them: a list
+ * and its detail, an editor and its preview. The first Pane is sized by the
+ * handle (pointer drag, arrow keys, Home and End); the second takes the rest.
+ * Below `collapseBelow` the panes stack in one column and the handle goes.
+ */
+function Root({
+  children,
+  defaultSize = 'sidebarW',
+  size: controlledSize,
+  onSizeChange,
+  minSize = 'sidebarW',
+  maxSize = 'panelLg',
+  collapseBelow = 'sm',
+  'aria-label': label,
+}: RootProps) {
+  const min = SIZES_PX[minSize]
+  const max = Math.max(min, SIZES_PX[maxSize])
+  const [inner, setInner] = useState(() => clamp(SIZES_PX[defaultSize], min, max))
+  const size = clamp(controlledSize ?? inner, min, max)
+  const setSize = useCallback(
+    (px: number) => {
+      const next = clamp(Math.round(px), min, max)
+      if (controlledSize === undefined) setInner(next)
+      onSizeChange?.(next)
+    },
+    [controlledSize, onSizeChange, min, max],
+  )
+  const rootRef = useRef<HTMLDivElement>(null)
+  const stacked = useContainerBelow(rootRef, collapseBelow)
+  const primaryId = useId()
+
+  let paneIndex = 0
+  const items = Children.map(children, (child) => {
+    if (isValidElement(child) && child.type === Pane) {
+      const index = paneIndex++
+      return <PaneIndexContext.Provider value={index}>{child}</PaneIndexContext.Provider>
+    }
+    return child
+  })
+
+  return (
+    <SplitPaneContext.Provider value={{size, min, max, setSize, stacked, primaryId, label}}>
+      <html.div ref={rootRef} style={[styles.root, stacked && styles.rootStacked]}>
+        {items}
+      </html.div>
+    </SplitPaneContext.Provider>
+  )
+}
+
+function Pane({children}: {children: ReactNode}) {
+  const {size, stacked, primaryId} = useSplitPane('Pane')
+  const primary = useContext(PaneIndexContext) === 0
+  return (
+    <html.div
+      id={primary ? primaryId : undefined}
+      style={[
+        primary ? [styles.primary, !stacked && styles.primarySize(size)] : styles.secondary,
+        stacked && styles.stackedPane,
+      ]}
+    >
+      {children}
+    </html.div>
+  )
+}
+
+function Handle() {
+  const {size, min, max, setSize, stacked, primaryId, label} = useSplitPane('Handle')
+  const [hovered, setHovered] = useState(false)
+  const [keyboardFocus, setKeyboardFocus] = useState(false)
+  const [dragging, setDragging] = useState(false)
+  const drag = useRef<{startX: number; startSize: number} | null>(null)
+  const handleRef = useRef<HTMLDivElement>(null)
+
+  // Arrow keys move the handle, Shift by larger steps; Home and End go to
+  // the bounds. A DOM listener, for the full KeyboardEvent.
+  useEffect(() => {
+    const el = handleRef.current
+    if (!el) return
+    function onKeyDown(e: KeyboardEvent) {
+      const step = e.shiftKey ? STEP_LARGE : STEP
+      const next =
+        e.key === 'ArrowLeft'
+          ? size - step
+          : e.key === 'ArrowRight'
+            ? size + step
+            : e.key === 'Home'
+              ? min
+              : e.key === 'End'
+                ? max
+                : null
+      if (next === null) return
+      e.preventDefault()
+      setSize(next)
+    }
+    el.addEventListener('keydown', onKeyDown)
+    return () => el.removeEventListener('keydown', onKeyDown)
+  }, [size, min, max, setSize, stacked])
+
+  if (stacked) return null
+  const active = hovered || keyboardFocus || dragging
+
+  return (
+    <html.div
+      ref={handleRef}
+      role="separator"
+      tabIndex={0}
+      aria-label={label}
+      aria-orientation="vertical"
+      aria-controls={primaryId}
+      aria-valuenow={size}
+      aria-valuemin={min}
+      aria-valuemax={max}
+      style={styles.handle}
+      onFocus={(e: {currentTarget: HTMLElement}) =>
+        setKeyboardFocus(e.currentTarget.matches(':focus-visible'))
+      }
+      onBlur={() => setKeyboardFocus(false)}
+      onPointerEnter={() => setHovered(true)}
+      onPointerLeave={() => setHovered(false)}
+      onPointerDown={(e: {
+        button: number
+        clientX: number
+        pointerId: number
+        currentTarget: HTMLElement
+      }) => {
+        if (e.button !== 0) return
+        e.currentTarget.setPointerCapture(e.pointerId)
+        drag.current = {startX: e.clientX, startSize: size}
+        setDragging(true)
+      }}
+      onPointerMove={(e: {clientX: number}) => {
+        if (!drag.current) return
+        setSize(drag.current.startSize + e.clientX - drag.current.startX)
+      }}
+      onPointerUp={() => {
+        drag.current = null
+        setDragging(false)
+      }}
+      onPointerCancel={() => {
+        drag.current = null
+        setDragging(false)
+      }}
+    >
+      <html.span aria-hidden style={[styles.line, active && styles.lineActive]} />
+      <html.span aria-hidden style={[styles.grip, active && styles.gripShown]} />
+    </html.div>
+  )
+}
+
+export const SplitPane = {
+  Root,
+  Pane,
+  Handle,
+}

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

@@ -0,0 +1,81 @@
+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 {duration, easing} from '@duro-app/tokens/tokens/motion.css'
+import {borders} from '@duro-app/tokens/tokens/borders.css'
+
+/**
+ * SplitPane, the picked B0 direction (docs/mockups/split-pane/Hairline.dc.html):
+ * a hairline between the panes inside a wider hit area; hover, keyboard
+ * focus or a drag thicken it to the accent and show a grip.
+ */
+export const styles = css.create({
+  root: {
+    display: 'flex',
+    flexDirection: 'row',
+    alignItems: 'stretch',
+    minWidth: 0,
+    minHeight: 0,
+    height: '100%',
+  },
+  // Below `collapseBelow`: one column, the panes stacked, no handle.
+  rootStacked: {
+    flexDirection: 'column',
+    height: 'auto',
+  },
+  primary: {
+    flexShrink: 0,
+    minWidth: 0,
+    overflow: 'auto',
+  },
+  primarySize: (px: number) => ({width: px}),
+  secondary: {
+    flexGrow: 1,
+    flexBasis: 0,
+    minWidth: 0,
+    overflow: 'auto',
+  },
+  stackedPane: {
+    width: '100%',
+    overflow: 'visible',
+  },
+  handle: {
+    position: 'relative',
+    flexShrink: 0,
+    display: 'flex',
+    justifyContent: 'center',
+    width: spacing.sm,
+    cursor: 'col-resize',
+    touchAction: 'none',
+    userSelect: 'none',
+    outlineStyle: 'none',
+  },
+  line: {
+    width: borders.hairline,
+    height: '100%',
+    backgroundColor: colors.border,
+    transitionProperty: 'background-color, width',
+    transitionDuration: duration.fast,
+    transitionTimingFunction: easing.standard,
+  },
+  lineActive: {
+    width: borders.strong,
+    backgroundColor: colors.accent,
+  },
+  grip: {
+    position: 'absolute',
+    top: '50%',
+    left: '50%',
+    transform: 'translate(-50%, -50%)',
+    width: spacing.xs,
+    height: spacing.xl,
+    borderRadius: radii.full,
+    backgroundColor: colors.textMuted,
+    opacity: 0,
+    transitionProperty: 'opacity',
+    transitionDuration: duration.fast,
+  },
+  gripShown: {
+    opacity: 1,
+  },
+})

package/src/components/StatusIcon/StatusIcon.tsx

@@ -1,6 +1,8 @@
 import {html} from 'react-strict-dom'
 import {Icon} from '../Icon'
 import type {IconName, IconSize} from '../Icon'
+import type {ColorToken} from '@duro-app/tokens/keys'
+import {isNative} from '../../platform'
 import {styles} from './styles.css'
 
 export type StatusIconName = Extract<
@@ -9,6 +11,15 @@ export type StatusIconName = Extract<
 >
 export type StatusIconVariant = 'error' | 'success' | 'warning' | 'info' | 'muted'
 
+// On native an Icon cannot inherit the variant's colour, so it is passed.
+const iconColor = {
+  error: 'error',
+  success: 'success',
+  warning: 'warning',
+  info: 'info',
+  muted: 'textMuted',
+} as const satisfies Record<StatusIconVariant, ColorToken>
+
 interface StatusIconProps {
   name: StatusIconName
   size?: IconSize
@@ -17,8 +28,8 @@ interface StatusIconProps {
 
 export function StatusIcon({name, size = 'xxl', variant = 'muted'}: StatusIconProps) {
   return (
-    <html.div style={[styles.root, styles[variant]]}>
-      <Icon name={name} size={size} />
+    <html.div style={[styles.root, isNative && styles.nativeFlex, styles[variant]]}>
+      <Icon name={name} size={size} color={isNative ? iconColor[variant] : undefined} />
     </html.div>
   )
 }

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

@@ -24,4 +24,9 @@ export const styles = css.create({
   muted: {
     color: colors.textMuted,
   },
+  // RSD-native only honors display:'flex' (not 'inline-flex'). Layered on
+  // native only.
+  nativeFlex: {
+    display: 'flex',
+  },
 })