@duro-app/ui 5.12.0 → 5.14.0

package/src/components/Drawer/useSwipeDismiss.ts

@@ -1,14 +1,14 @@
 import {useRef, useCallback, useEffect} from 'react'
-import type {DrawerAnchor} from './Drawer'
-
-/** Threshold: fraction of panel size the user must drag to dismiss */
-const DISMISS_THRESHOLD = 0.3
-
-/** Minimum velocity (px/ms) to dismiss even below threshold */
-const VELOCITY_THRESHOLD = 0.5
-
-/** Duration for the dismiss slide-out animation (ms) */
-const DISMISS_DURATION = 160
+import type {DrawerAnchor} from './parts'
+import {
+  DISMISS_DURATION,
+  DRAG_SLOP,
+  SNAP_DURATION,
+  SNAP_MAX_OVERSHOOT,
+  rubberBand,
+  settleDetent,
+  shouldDismissEdge,
+} from './sheetPhysics'
 
 /**
  * Max pixels the panel visually "grows" when dragged in the opposite direction.
@@ -17,6 +17,16 @@ const DISMISS_DURATION = 160
  */
 const OPPOSITE_MAX_OVERSCROLL = 12
 
+/** A bottom sheet's detents: the drag moves between them before it dismisses. */
+export interface SwipeSnap {
+  /** Each detent's height in px, ascending */
+  heights: readonly number[]
+  /** The detent the sheet rests at */
+  index: number
+  /** A drag settled on another detent */
+  onSnap: (index: number) => void
+}
+
 interface UseSwipeDismissOptions {
   anchor: DrawerAnchor
   enabled: boolean
@@ -27,6 +37,8 @@ interface UseSwipeDismissOptions {
    * exists, and listeners must follow the element that is actually shown.
    */
   panel: HTMLDivElement | null
+  /** Bottom anchor with snapPoints: drag between detents, dismiss below the lowest */
+  snap?: SwipeSnap | null
 }
 
 interface SwipeState {
@@ -39,6 +51,8 @@ interface SwipeState {
   panelSize: number
   /** Inner Duro scroll viewport the gesture started in; capture is deferred until the axis is decided */
   deferredScroll: HTMLElement | null
+  /** Started on a snap sheet's grabber: a tap stays its click, a drag moves the sheet */
+  fromGrabber: boolean
   pointerId: number
 }
 
@@ -49,7 +63,13 @@ interface SwipeState {
  * Opposite direction: iOS-style — panel stays anchored, shows subtle
  * overscroll feedback (box-shadow intensifies), then snaps back.
  */
-export function useSwipeDismiss({anchor, enabled, onDismiss, panel}: UseSwipeDismissOptions) {
+export function useSwipeDismiss({
+  anchor,
+  enabled,
+  onDismiss,
+  panel,
+  snap = null,
+}: UseSwipeDismissOptions) {
   const stateRef = useRef<SwipeState>({
     startX: 0,
     startY: 0,
@@ -59,8 +79,13 @@ export function useSwipeDismiss({anchor, enabled, onDismiss, panel}: UseSwipeDis
     swiping: false,
     panelSize: 0,
     deferredScroll: null,
+    fromGrabber: false,
     pointerId: 0,
   })
+  // Read at event time, so a settle that re-renders mid-gesture is never stale.
+  const snapRef = useRef(snap)
+  snapRef.current = snap
+  const snapping = snap !== null
 
   const isHorizontal = anchor === 'left' || anchor === 'right'
 
@@ -117,6 +142,8 @@ export function useSwipeDismiss({anchor, enabled, onDismiss, panel}: UseSwipeDis
   const resetStyles = useCallback((panelEl: HTMLDivElement) => {
     panelEl.style.transform = ''
     panelEl.style.boxShadow = ''
+    panelEl.style.height = ''
+    panelEl.style.transition = ''
 
     const backdrop = panelEl.closest('[data-drawer-viewport]')
       ?.previousElementSibling as HTMLElement | null
@@ -178,19 +205,79 @@ export function useSwipeDismiss({anchor, enabled, onDismiss, panel}: UseSwipeDis
     setTimeout(cleanup, 250)
   }, [])
 
+  /**
+   * Snap sheet drag: the visible height follows the finger. Between the lowest
+   * and the largest detent the panel resizes; past the largest it resists;
+   * below the lowest it slides down and the backdrop fades.
+   */
+  const applySnapDrag = useCallback((movement: number, panelEl: HTMLDivElement) => {
+    const current = snapRef.current
+    if (!current) return
+    const {heights, index} = current
+    const low = heights[0]
+    const high = heights[heights.length - 1]
+    const visible = heights[index] - movement
+    const backdrop = backdropOf(panelEl)
+    if (visible > high) {
+      panelEl.style.height = `${high + rubberBand(visible - high, SNAP_MAX_OVERSHOOT)}px`
+      panelEl.style.transform = ''
+    } else if (visible >= low) {
+      panelEl.style.height = `${visible}px`
+      panelEl.style.transform = ''
+    } else {
+      panelEl.style.height = `${low}px`
+      panelEl.style.transform = `translateY(${low - visible}px)`
+    }
+    if (backdrop) backdrop.style.opacity = String(Math.min(1, Math.max(0, visible / low)))
+  }, [])
+
+  /** Settle a snap sheet on a detent, then hand the height back to React */
+  const animateToDetent = useCallback((panelEl: HTMLDivElement, target: number) => {
+    const current = snapRef.current
+    if (!current) return
+    const ease = `${SNAP_DURATION}ms cubic-bezier(0.25, 1, 0.5, 1)`
+    panelEl.style.transition = `height ${ease}, transform ${ease}`
+    panelEl.style.height = `${current.heights[target]}px`
+    panelEl.style.transform = ''
+    const backdrop = backdropOf(panelEl)
+    if (backdrop) {
+      backdrop.style.transition = `opacity ${ease}`
+      backdrop.style.opacity = ''
+    }
+    let settled = false
+    const done = () => {
+      if (settled) return
+      settled = true
+      current.onSnap(target)
+      // React now sizes the panel at this detent: drop the inline copy.
+      requestAnimationFrame(() => {
+        panelEl.style.transition = ''
+        panelEl.style.height = ''
+        if (backdrop) backdrop.style.transition = ''
+      })
+    }
+    panelEl.addEventListener('transitionend', done, {once: true})
+    setTimeout(done, SNAP_DURATION + 50)
+  }, [])
+
   useEffect(() => {
     if (!enabled || !panel) return
 
     function handlePointerDown(e: PointerEvent) {
       if (e.button !== 0) return
       const target = e.target as HTMLElement
-      const scrollEl = target.closest<HTMLElement>('[data-duro-scroll]')
+      const fromGrabber = snapping && target.closest('[data-drawer-grabber]') !== null
+      const scrollEl = fromGrabber ? null : target.closest<HTMLElement>('[data-duro-scroll]')
       // Outside a ScrollArea a control keeps its press. Inside one the gesture
       // is decided on the first move even from a control: a list of toggles is
       // all buttons, and touch adjustment snaps a finger onto one. A tap
       // (under the 8px slop) still presses it; a drag never captures before
       // the decision, so the release lands on the panel, not the control.
-      if (!scrollEl && target.closest('button, a, input, textarea, select, [role="button"]')) {
+      if (
+        !fromGrabber &&
+        !scrollEl &&
+        target.closest('button, a, input, textarea, select, [role="button"]')
+      ) {
         return
       }
 
@@ -206,11 +293,13 @@ export function useSwipeDismiss({anchor, enabled, onDismiss, panel}: UseSwipeDis
 
       state.pointerId = e.pointerId
       state.deferredScroll = scrollEl
+      state.fromGrabber = fromGrabber
 
       panel!.dataset.panelSize = String(state.panelSize)
 
-      // Inside a Duro ScrollArea the scroll may own the gesture: wait for the first move.
-      if (!state.deferredScroll) beginCapture(e.pointerId)
+      // Inside a Duro ScrollArea the scroll may own the gesture, and a press on
+      // the grabber may be a tap: wait for the first move.
+      if (!state.deferredScroll && !fromGrabber) beginCapture(e.pointerId)
     }
 
     function beginCapture(pointerId: number) {
@@ -219,6 +308,14 @@ export function useSwipeDismiss({anchor, enabled, onDismiss, panel}: UseSwipeDis
       // Freeze CSS animation — we take over positioning.
       // Never restore it; the panel is already at its final resting position.
       panel!.style.animation = 'none'
+      // A snap sheet animates its height between detents; the finger drives it now.
+      if (snapping) panel!.style.transition = 'none'
+    }
+
+    /** A snap sheet below its largest detent grows when dragged up from its content */
+    function canGrow() {
+      const current = snapRef.current
+      return current !== null && current.index < current.heights.length - 1
     }
 
     /** True when the viewport can't scroll further against the dismiss direction */
@@ -240,7 +337,7 @@ export function useSwipeDismiss({anchor, enabled, onDismiss, panel}: UseSwipeDis
 
       if (!state.swiping) {
         const totalMovement = Math.sqrt(dx * dx + dy * dy)
-        if (totalMovement < 8) return
+        if (totalMovement < DRAG_SLOP) return
 
         if (isHorizontal && dx > dy) {
           state.swiping = true
@@ -250,13 +347,19 @@ export function useSwipeDismiss({anchor, enabled, onDismiss, panel}: UseSwipeDis
           // Wrong axis — abort gesture
           state.startTime = 0
           state.deferredScroll = null
+          state.fromGrabber = false
           return
         }
 
         const scrollEl = state.deferredScroll
-        if (scrollEl) {
+        if (state.fromGrabber) {
+          beginCapture(state.pointerId)
+        } else if (scrollEl) {
           state.deferredScroll = null
-          if (getMovement(state) <= 0 || !isAtDismissEdge(scrollEl)) {
+          const movement = getMovement(state)
+          const sheetOwns =
+            movement > 0 ? isAtDismissEdge(scrollEl) : snapping && movement < 0 && canGrow()
+          if (!sheetOwns) {
             // The scroll owns this gesture: no swiping, no capture, no preventDefault
             state.swiping = false
             state.startTime = 0
@@ -269,7 +372,8 @@ export function useSwipeDismiss({anchor, enabled, onDismiss, panel}: UseSwipeDis
       if (state.swiping) {
         e.preventDefault()
         const movement = getMovement(state)
-        applyTransform(movement, panel!)
+        if (snapping) applySnapDrag(movement, panel!)
+        else applyTransform(movement, panel!)
       }
     }
 
@@ -283,6 +387,7 @@ export function useSwipeDismiss({anchor, enabled, onDismiss, panel}: UseSwipeDis
 
       state.startTime = 0
       state.deferredScroll = null
+      state.fromGrabber = false
 
       if (!state.swiping) {
         return
@@ -290,16 +395,26 @@ export function useSwipeDismiss({anchor, enabled, onDismiss, panel}: UseSwipeDis
 
       state.swiping = false
 
+      const current = snapRef.current
+      if (current) {
+        const settled = settleDetent({
+          heights: current.heights,
+          from: current.index,
+          height: current.heights[current.index] - movement,
+          velocity,
+        })
+        if (settled === 'dismiss') animateDismiss(panel!)
+        else animateToDetent(panel!, settled)
+        return
+      }
+
       if (movement <= 0) {
         // Was dragging in opposite direction — just reset (no translate was applied)
         resetStyles(panel!)
         return
       }
 
-      const fraction = movement / state.panelSize
-      const shouldDismiss = fraction > DISMISS_THRESHOLD || velocity > VELOCITY_THRESHOLD
-
-      if (shouldDismiss) {
+      if (shouldDismissEdge(movement, state.panelSize, velocity)) {
         animateDismiss(panel!)
       } else {
         animateSnapBack(panel!)
@@ -311,6 +426,7 @@ export function useSwipeDismiss({anchor, enabled, onDismiss, panel}: UseSwipeDis
       state.startTime = 0
       state.swiping = false
       state.deferredScroll = null
+      state.fromGrabber = false
       resetStyles(panel!)
     }
 
@@ -340,8 +456,15 @@ export function useSwipeDismiss({anchor, enabled, onDismiss, panel}: UseSwipeDis
     isHorizontal,
     getMovement,
     applyTransform,
+    applySnapDrag,
+    animateToDetent,
     resetStyles,
     animateSnapBack,
     animateDismiss,
+    snapping,
   ])
 }
+
+function backdropOf(panelEl: HTMLDivElement) {
+  return panelEl.closest('[data-drawer-viewport]')?.previousElementSibling as HTMLElement | null
+}

package/src/components/Form/Form.meta.ts

@@ -2,7 +2,7 @@ import type {ComponentMeta} from '../component-meta'
 
 export const meta: ComponentMeta = {
   description:
-    'Form wrapper with Effect Schema validation and react-hook-form integration. Provides FormContext to child Field components.',
+    'Form wrapper with Effect Schema validation and react-hook-form integration. Provides FormContext to child Field components. On React Native, @duro-app/ui/form resolves to a native Form (a view, not a <form>): a Button type="submit" inside it runs the validated submit, since there is no DOM submit event.',
   whenToUse: ['Any form that needs validation', 'Multi-field forms with submit handling'],
   whenNotToUse: [
     'Single standalone field without validation — use Field.Root directly',

package/src/components/Form/Form.native.tsx

@@ -0,0 +1,120 @@
+import {type ReactNode, useCallback, useEffect, useMemo, useRef} from 'react'
+import {css, html} from 'react-strict-dom'
+import {
+  useForm,
+  FormProvider,
+  type UseFormReturn,
+  type DefaultValues,
+  type FieldValues,
+  type FieldErrors,
+  type Path,
+} from 'react-hook-form'
+import {effectTsResolver} from '@hookform/resolvers/effect-ts'
+import type {Schema} from 'effect'
+import {FormContext, type LabelPosition, type NecessityIndicator} from './FormContext'
+import {FormSubmitContext} from './FormSubmitContext'
+
+export interface FormProps<T extends FieldValues> {
+  schema: Schema.Schema<T>
+  defaultValues: DefaultValues<T>
+  onSubmit: (data: T) => void | Promise<void>
+  disabled?: boolean
+  labelPosition?: LabelPosition
+  necessityIndicator?: NecessityIndicator
+  validationErrors?: Partial<Record<Path<T>, string>>
+  children: ReactNode | ((methods: UseFormReturn<T>) => ReactNode)
+}
+
+const formStyles = css.create({
+  disabled: {
+    opacity: 0.5,
+    pointerEvents: 'none',
+  },
+})
+
+/**
+ * Native Form (plan N0, Slice C): the web Form's validation and server-error
+ * sync, in a view rather than a <form>. A `type="submit"` Button inside it
+ * submits through FormSubmitContext.
+ */
+export function Form<T extends FieldValues>({
+  schema,
+  defaultValues,
+  onSubmit,
+  disabled = false,
+  labelPosition = 'top',
+  necessityIndicator = false,
+  validationErrors,
+  children,
+}: FormProps<T>) {
+  const methods = useForm<T>({
+    resolver: effectTsResolver(schema),
+    defaultValues,
+    mode: 'onTouched',
+    reValidateMode: 'onChange',
+  })
+
+  // Sync server-side validation errors into RHF
+  const prevErrorKeysRef = useRef<string[]>([])
+  useEffect(() => {
+    const prevKeys = prevErrorKeysRef.current
+    const nextKeys = validationErrors ? Object.keys(validationErrors) : []
+
+    // Clear errors that were removed
+    for (const key of prevKeys) {
+      if (!nextKeys.includes(key)) {
+        methods.clearErrors(key as Path<T>)
+      }
+    }
+
+    // Set new errors
+    if (validationErrors) {
+      for (const [key, message] of Object.entries(validationErrors)) {
+        if (message) {
+          methods.setError(key as Path<T>, {type: 'server', message: message as string})
+        }
+      }
+    }
+
+    prevErrorKeysRef.current = nextKeys
+  }, [validationErrors, methods])
+
+  const onInvalid = useCallback(
+    (errors: FieldErrors<T>) => {
+      const firstField = Object.keys(errors)[0]
+      if (firstField) {
+        methods.setFocus(firstField as Path<T>)
+      }
+    },
+    [methods],
+  )
+
+  // Native has no submit event: a type="submit" Button calls this instead.
+  const submit = useCallback(() => {
+    // A rejected onSubmit reaches the app's global error handler, not silence.
+    methods
+      .handleSubmit(onSubmit, onInvalid)()
+      .catch((error: unknown) => {
+        setTimeout(() => {
+          throw error
+        })
+      })
+  }, [methods, onSubmit, onInvalid])
+
+  const formCtx = useMemo(
+    () => ({disabled, labelPosition, necessityIndicator}),
+    [disabled, labelPosition, necessityIndicator],
+  )
+
+  return (
+    <FormProvider {...methods}>
+      <FormContext.Provider value={formCtx}>
+        <FormSubmitContext.Provider value={disabled ? null : submit}>
+          <html.div aria-disabled={disabled || undefined} style={disabled && formStyles.disabled}>
+            {typeof children === 'function' ? children(methods) : children}
+          </html.div>
+        </FormSubmitContext.Provider>
+      </FormContext.Provider>
+    </FormProvider>
+  )
+}

package/src/components/Form/FormSubmitContext.ts

@@ -0,0 +1,12 @@
+import {createContext, useContext} from 'react'
+
+/**
+ * How a `type="submit"` Button submits its Form where there is no DOM submit
+ * event: on native, Form provides its validated submit here. The web Form
+ * provides nothing; the browser's form submission does it.
+ */
+export const FormSubmitContext = createContext<(() => void) | null>(null)
+
+export function useFormSubmit() {
+  return useContext(FormSubmitContext)
+}

package/src/components/Listbox/Listbox.meta.ts

@@ -2,7 +2,7 @@ import type {ComponentMeta} from '../component-meta'
 
 export const meta: ComponentMeta = {
   description:
-    'Popup list of options for an input that keeps focus — an editor typeahead (mentions, slash commands) or a custom combobox. The anchor owns focus and the keyboard: it sets the controlled highlightedId and spreads Listbox.getAnchorProps() for aria-controls / aria-expanded / aria-activedescendant. A press on an option never takes focus from the anchor. Portalled and placed against anchor() (an input rect or a caret rect), capped at a size-token maxHeight (default listMaxH).',
+    'Popup list of options for an input that keeps focus — an editor typeahead (mentions, slash commands) or a custom combobox. The anchor owns focus and the keyboard: it sets the controlled highlightedId and spreads Listbox.getAnchorProps() for aria-controls / aria-expanded / aria-activedescendant. A press on an option never takes focus from the anchor. Portalled and placed against anchor() (an input rect or a caret rect), capped at a size-token maxHeight (default listMaxH). On React Native it is a plain list laid out where it is rendered (inside a Select or Combobox sheet): nothing is anchored or highlighted, the selected option is filled with a trailing check, and a press calls onSelect.',
   whenToUse: [
     'Typeahead inside a rich-text editor, where focus must stay in the editor',
     'A custom combobox whose input is not Combobox.Input',

package/src/components/Listbox/Listbox.native.tsx

@@ -0,0 +1,153 @@
+import {createContext, type ReactNode, type Ref, useContext} from 'react'
+import {View} from 'react-native'
+import {Pressable} from 'react-native-gesture-handler'
+import {html} from 'react-strict-dom'
+import {sheetStyles} from './native.css'
+import {textOf} from '../../shared/textOf'
+
+/**
+ * Native Listbox (plan N0, Slice C): a plain list of options, laid out where
+ * it is rendered — inside a Select or Combobox sheet. Nothing is anchored and
+ * nothing is highlighted: native has no arrow keys (Decision 6), so each option
+ * is its own screen-reader stop and a press chooses it.
+ */
+
+export type ListboxMaxHeight = 'listMaxH' | 'listMaxHSm'
+
+/** Default option id: the listbox id plus the value, made safe for an id. */
+export function defaultOptionId(listboxId: string, value: string): string {
+  return `${listboxId}-option-${value.replace(/[^\w-]/g, (ch) => `_${ch.charCodeAt(0).toString(16)}`)}`
+}
+
+export interface ListboxAnchorProps {
+  role?: 'combobox'
+  'aria-controls': string | undefined
+  'aria-expanded': boolean
+  'aria-activedescendant': string | undefined
+  'aria-autocomplete': 'list'
+  'aria-haspopup': 'listbox'
+}
+
+/** The web's anchor ARIA, kept for one API: RSD drops these props on native. */
+export function getAnchorProps({
+  id,
+  open,
+  highlightedId,
+}: {
+  id: string
+  open: boolean
+  highlightedId: string | null | undefined
+}): ListboxAnchorProps {
+  return {
+    'aria-controls': open ? id : undefined,
+    'aria-expanded': open,
+    'aria-activedescendant': open && highlightedId ? highlightedId : undefined,
+    'aria-autocomplete': 'list',
+    'aria-haspopup': 'listbox',
+  }
+}
+
+interface ListboxContextValue {
+  onSelect?: (value: string) => void
+}
+
+const ListboxContext = createContext<ListboxContextValue | null>(null)
+
+function useListbox(part: string) {
+  const ctx = useContext(ListboxContext)
+  if (!ctx) throw new Error(`Listbox.${part} must be used within Listbox.Root`)
+  return ctx
+}
+
+interface RootProps {
+  id: string
+  open: boolean
+  /** A press on an option. */
+  onSelect?: (value: string) => void
+  /** Accessible name of the list. */
+  'aria-label'?: string
+  children: ReactNode
+  // The web's placement and keyboard props; a native list flows in place.
+  anchor?: () => unknown
+  matchAnchorWidth?: boolean
+  highlightedId?: string | null
+  onHighlight?: (id: string | null) => void
+  getOptionId?: (value: string) => string
+  maxHeight?: ListboxMaxHeight
+}
+
+function Root({id, open, onSelect, 'aria-label': ariaLabel, children}: RootProps) {
+  if (!open) return null
+  return (
+    <ListboxContext.Provider value={{onSelect}}>
+      <html.div id={id} role="listbox" aria-label={ariaLabel} style={sheetStyles.list}>
+        {children}
+      </html.div>
+    </ListboxContext.Provider>
+  )
+}
+
+interface OptionProps {
+  value: string
+  id?: string
+  /** The committed choice: filled, with a trailing check. */
+  selected?: boolean
+  disabled?: boolean
+  children: ReactNode
+  ref?: Ref<unknown>
+}
+
+function Option({value, selected = false, disabled = false, children, ref}: OptionProps) {
+  const {onSelect} = useListbox('Option')
+  const choose = () => {
+    if (!disabled) onSelect?.(value)
+  }
+  // Two hosts, one job each. The View is what a screen reader reads: a
+  // selected button named by its text alone, activated by a double-tap.
+  // Gesture Handler's Pressable takes the touch natively, since an RN
+  // Pressable loses the first tap with the keyboard up to any ScrollView
+  // above the sheet's Modal (keyboardShouldPersistTaps 'never', the default);
+  // its native button does not expose a role or state, so it is hidden.
+  return (
+    <View
+      ref={ref as Ref<never>}
+      accessible
+      accessibilityRole="button"
+      accessibilityLabel={textOf(children) || undefined}
+      accessibilityState={{selected, disabled}}
+      accessibilityActions={ACTIVATE}
+      onAccessibilityAction={(e) => {
+        if (e.nativeEvent.actionName === 'activate') choose()
+      }}
+    >
+      <Pressable accessible={false} disabled={disabled} onPress={choose}>
+        {({pressed}) => (
+          <html.div style={[sheetStyles.option, (selected || pressed) && sheetStyles.optionFilled]}>
+            <html.span style={[sheetStyles.label, disabled && sheetStyles.labelDisabled]}>
+              {children}
+            </html.span>
+            {selected && (
+              <html.span aria-hidden style={sheetStyles.check}>
+                ✓
+              </html.span>
+            )}
+          </html.div>
+        )}
+      </Pressable>
+    </View>
+  )
+}
+
+const ACTIVATE = [{name: 'activate'}] as const
+
+/** Shown in place of options when there are none, or none match. */
+function Empty({children}: {children: ReactNode}) {
+  return <html.div style={sheetStyles.empty}>{children}</html.div>
+}
+
+export const Listbox = {
+  Root,
+  Option,
+  Empty,
+  getAnchorProps,
+}