Ui/Slider

/** Escape was pressed during a drag. Restores the value from the drag origin. */
type CancelledDrag = CallableTaggedStruct<"CancelledDrag", {}>

/** Configuration for creating a slider model with `init`. */
type InitConfig = Readonly<{
  id: string
  initialValue: number
  max: number
  min: number
  step: number
}>

/**
 * The pointer moved during a drag, producing a new snapped value from the
 *  cursor position within the track.
 */
type MovedDragPointer = CallableTaggedStruct<"MovedDragPointer", {
  value: Number
}>

/** The user pressed a keyboard navigation key on the focused thumb. */
type PressedKeyboardNavigation = CallableTaggedStruct<"PressedKeyboardNavigation", {
  direction: Literals<readonly ["StepDecrement", "StepIncrement", "PageDecrement", "PageIncrement", "Min", "Max"]>
}>

/**
 * The user pressed the track. Starts a drag and snaps the value to the
 *  cursor position. Ignored while already dragging, which absorbs the bubble
 *  from a thumb press so the value is not shifted.
 */
type PressedPointer = CallableTaggedStruct<"PressedPointer", {
  value: Number
}>

/** The user pressed the thumb. Starts a drag without changing the value. */
type PressedThumb = CallableTaggedStruct<"PressedThumb", {}>

/** The pointer was released during a drag. Commits the current value. */
type ReleasedDragPointer = CallableTaggedStruct<"ReleasedDragPointer", {}>

/**
 * Attribute groups the slider component provides to the consumer's `toView`
 *  callback. Each bundle carries the boundary's captured dispatch, so the
 *  consumer can spread it directly into element attributes without manual
 *  Message wrapping.
 */
type SliderAttributes = Readonly<{
  filledTrack: ReadonlyArray<ChildAttribute>
  hiddenInput: ReadonlyArray<ChildAttribute>
  label: ReadonlyArray<ChildAttribute>
  root: ReadonlyArray<ChildAttribute>
  thumb: ReadonlyArray<ChildAttribute>
  track: ReadonlyArray<ChildAttribute>
}>

/** Per-render view inputs passed to `view` via `h.submodel`'s `viewInputs` field. */
type ViewInputs = Readonly<{
  ariaLabel: string
  ariaLabelledBy: string
  formatValue: (value: number) => string
  getTrackRoot: () => Document | ShadowRoot
  isDisabled: boolean
  name: string
  toView: (attributes: SliderAttributes) => Html
}>

/** Union of all messages the slider component can produce. */
const Message: S.Union<[typeof PressedThumb, typeof PressedPointer, typeof MovedDragPointer, typeof ReleasedDragPointer, typeof CancelledDrag, typeof PressedKeyboardNavigation]>

/**
 * Schema for the slider component's state. Tracks the current value, the
 *  range (min/max/step), and the active drag phase.
 */
const Model: Struct<{
  dragState: Union<readonly [
    CallableTaggedStruct<"Idle", {}>,
    CallableTaggedStruct<"Dragging", {
      originValue: Number
    }>
  ]>
  id: String
  max: Number
  min: Number
  step: Number
  value: Number
}>

/** Union of all out-messages the slider component can emit to its parent. */
const OutMessage: Union<readonly [
  CallableTaggedStruct<"ChangedValue", {
    value: Number
  }>
]>

/**
 * Reflects an externally-driven range onto the slider. Snaps and clamps the
 *  current value into the new range. Use this when min/max derive from
 *  external state (e.g. a bounded buffer whose first/last index shifts over
 *  time). Unlike `reflectValue`, this runs even while the user is Dragging: a
 *  structural range change cannot leave the value out of bounds.
 */
const reflectRange: Reflect<Model, Readonly<{
  max: number
  min: number
}>>

/**
 * Reflects an externally-driven value onto the slider, snapped and clamped
 *  into range; a no-op while the user is dragging, since drag state owns the
 *  value. Does not emit `ChangedValue`; use when the value is being driven by
 *  external state rather than user input.
 */
const reflectValue: Reflect<Model, number>

/** Default drag subscriptions, with the track looked up via `document`. */
const subscriptions: {
  dragEscape: EntryWithoutKeepAlive<Slider.Model, {
    _tag: "PressedThumb"
  } | {
    _tag: "PressedPointer"
    value: number
  } | {
    _tag: "MovedDragPointer"
    value: number
  } | {
    _tag: "ReleasedDragPointer"
  } | {
    _tag: "CancelledDrag"
  } | {
    _tag: "PressedKeyboardNavigation"
    direction: "Max" | "Min" | "StepDecrement" | "StepIncrement" | "PageDecrement" | "PageIncrement"
  }, {
    dragActivity: "Idle" | "Active"
  }, never> & SubscriptionBrand
  dragPointer: EntryWithoutKeepAlive<Slider.Model, {
    _tag: "PressedThumb"
  } | {
    _tag: "PressedPointer"
    value: number
  } | {
    _tag: "MovedDragPointer"
    value: number
  } | {
    _tag: "ReleasedDragPointer"
  } | {
    _tag: "CancelledDrag"
  } | {
    _tag: "PressedKeyboardNavigation"
    direction: "Max" | "Min" | "StepDecrement" | "StepIncrement" | "PageDecrement" | "PageIncrement"
  }, {
    dragActivity: "Idle" | "Active"
    id: string
    max: number
    min: number
  }, never> & SubscriptionBrand
}

/**
 * Renders an accessible slider by building ARIA attribute groups and
 *  delegating layout to the consumer's `toView` callback. Follows the
 *  WAI-ARIA slider pattern: role="slider" on the thumb, aria-valuemin /
 *  aria-valuemax / aria-valuenow, keyboard navigation by step / page / home /
 *  end. Pointer drag is handled by the component's drag subscriptions.
 */
const view: SubmodelView<Slider.Model, {
  _tag: "PressedThumb"
} | {
  _tag: "PressedPointer"
  value: number
} | {
  _tag: "MovedDragPointer"
  value: number
} | {
  _tag: "ReleasedDragPointer"
} | {
  _tag: "CancelledDrag"
} | {
  _tag: "PressedKeyboardNavigation"
  direction: "Max" | "Min" | "StepDecrement" | "StepIncrement" | "PageDecrement" | "PageIncrement"
}, Readonly<{
  ariaLabel: string
  ariaLabelledBy: string
  formatValue: (value: number) => string
  getTrackRoot: () => Document | ShadowRoot
  isDisabled: boolean
  name: string
  toView: (attributes: SliderAttributes) => Html
}>>