aeon-ui-engine 1.3.1 → 1.4.0

package/packages/react/src/range-slider/index.tsx

@@ -0,0 +1,322 @@
+import { partAttrs, partOnlyAttrs, rangeSliderAnatomy } from '@aeon-ui/core'
+import {
+  rangeSliderMachine,
+  snapRangeSliderValue,
+} from '@aeon-ui/primitives'
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useEffect,
+  useMemo,
+  useRef,
+  type HTMLAttributes,
+  type KeyboardEvent,
+  type PointerEvent,
+  type ReactNode,
+} from 'react'
+import { useAeonMachine } from '../hooks/use-aeon-machine.js'
+import { mergeProps } from '../utils/merge-props.js'
+
+type ThumbIndex = 0 | 1
+
+interface RangeSliderContextValue {
+  values: [number, number]
+  min: number
+  max: number
+  step: number
+  disabled: boolean
+  dragging: boolean
+  activeThumb: ThumbIndex | null
+  send: ReturnType<typeof useAeonMachine<typeof rangeSliderMachine>>[1]
+  setThumbFromClientX: (thumb: ThumbIndex, clientX: number) => void
+  trackRef: React.RefObject<HTMLDivElement | null>
+}
+
+const RangeSliderCtx = createContext<RangeSliderContextValue | null>(null)
+
+function useRangeSliderCtx() {
+  const ctx = useContext(RangeSliderCtx)
+  if (!ctx) throw new Error('RangeSlider parts must be used within RangeSlider.Root')
+  return ctx
+}
+
+function percent(value: number, min: number, max: number) {
+  if (max <= min) return 0
+  return ((value - min) / (max - min)) * 100
+}
+
+export interface RangeSliderRootProps {
+  value?: [number, number]
+  defaultValue?: [number, number]
+  min?: number
+  max?: number
+  step?: number
+  minStepsBetween?: number
+  disabled?: boolean
+  onValueChange?: (value: [number, number]) => void
+  children?: ReactNode
+  className?: string
+}
+
+const Root = forwardRef<HTMLDivElement, RangeSliderRootProps>(function RangeSliderRoot(
+  {
+    value,
+    defaultValue,
+    min = 0,
+    max = 100,
+    step = 1,
+    minStepsBetween = 0,
+    disabled = false,
+    onValueChange,
+    children,
+    className,
+    ...rest
+  },
+  ref,
+) {
+  const trackRef = useRef<HTMLDivElement>(null)
+  const [snapshot, send] = useAeonMachine(rangeSliderMachine, {
+    input: {
+      values: defaultValue ?? [min, max],
+      min,
+      max,
+      step,
+      minStepsBetween,
+      disabled,
+    },
+  })
+
+  const resolvedValues = value ?? snapshot.context.values
+  const dragging = snapshot.matches({ interaction: 'dragging' })
+  const activeThumb = snapshot.context.activeThumb
+
+  useEffect(() => {
+    if (value !== undefined) send({ type: 'SET_VALUES', values: value })
+  }, [value, send])
+
+  useEffect(() => {
+    send({ type: 'SET_BOUNDS', min, max, step, minStepsBetween })
+  }, [min, max, step, minStepsBetween, send])
+
+  useEffect(() => {
+    send({ type: 'SET_DISABLED', disabled })
+  }, [disabled, send])
+
+  const setThumbFromClientX = useCallback(
+    (thumb: ThumbIndex, clientX: number) => {
+      const track = trackRef.current
+      if (!track || disabled) return
+      const rect = track.getBoundingClientRect()
+      if (rect.width <= 0) return
+      const ratio = Math.min(1, Math.max(0, (clientX - rect.left) / rect.width))
+      const next = snapRangeSliderValue(min + ratio * (max - min), min, max, step)
+      send({ type: 'POINTER_MOVE', value: next })
+      if (value === undefined) {
+        // Machine updates async via snapshot; notify after POINTER_MOVE by reading next tick
+        // Consumers in uncontrolled mode get onValueChange from effect below.
+      }
+      void thumb
+    },
+    [disabled, min, max, step, send, value],
+  )
+
+  const lastNotified = useRef<string>('')
+  useEffect(() => {
+    const key = resolvedValues.join(',')
+    if (key === lastNotified.current) return
+    lastNotified.current = key
+    onValueChange?.(resolvedValues)
+  }, [resolvedValues, onValueChange])
+
+  useEffect(() => {
+    if (!dragging) return
+    const onMove = (e: globalThis.PointerEvent) => {
+      if (activeThumb == null) return
+      setThumbFromClientX(activeThumb, e.clientX)
+    }
+    const onUp = () => send({ type: 'POINTER_UP' })
+    window.addEventListener('pointermove', onMove)
+    window.addEventListener('pointerup', onUp)
+    return () => {
+      window.removeEventListener('pointermove', onMove)
+      window.removeEventListener('pointerup', onUp)
+    }
+  }, [dragging, activeThumb, setThumbFromClientX, send])
+
+  const ctx = useMemo(
+    () => ({
+      values: resolvedValues,
+      min,
+      max,
+      step,
+      disabled,
+      dragging,
+      activeThumb,
+      send,
+      setThumbFromClientX,
+      trackRef,
+    }),
+    [
+      resolvedValues,
+      min,
+      max,
+      step,
+      disabled,
+      dragging,
+      activeThumb,
+      send,
+      setThumbFromClientX,
+    ],
+  )
+
+  return (
+    <RangeSliderCtx.Provider value={ctx}>
+      <div
+        ref={ref}
+        className={className}
+        {...mergeProps(
+          partAttrs(rangeSliderAnatomy.scope, rangeSliderAnatomy.root, {
+            state: dragging ? 'dragging' : 'idle',
+            disabled,
+          }),
+          rest as HTMLAttributes<HTMLDivElement>,
+        )}
+      >
+        {children}
+      </div>
+    </RangeSliderCtx.Provider>
+  )
+})
+
+const Track = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function RangeSliderTrack(
+  { onPointerDown, ...rest },
+  ref,
+) {
+  const { disabled, values, send, setThumbFromClientX, trackRef, min, max } = useRangeSliderCtx()
+
+  return (
+    <div
+      ref={(node) => {
+        trackRef.current = node
+        if (typeof ref === 'function') ref(node)
+        else if (ref) ref.current = node
+      }}
+      {...mergeProps(
+        partOnlyAttrs(rangeSliderAnatomy.track),
+        {
+          onPointerDown: (e: PointerEvent<HTMLDivElement>) => {
+            onPointerDown?.(e)
+            if (disabled || e.button !== 0) return
+            e.currentTarget.setPointerCapture(e.pointerId)
+            const rect = e.currentTarget.getBoundingClientRect()
+            const ratio = Math.min(1, Math.max(0, (e.clientX - rect.left) / rect.width))
+            const pointerValue = min + ratio * (max - min)
+            const dist0 = Math.abs(pointerValue - values[0])
+            const dist1 = Math.abs(pointerValue - values[1])
+            const thumb: ThumbIndex = dist0 <= dist1 ? 0 : 1
+            send({ type: 'POINTER_DOWN', thumb })
+            setThumbFromClientX(thumb, e.clientX)
+          },
+        },
+        rest,
+      )}
+    />
+  )
+})
+
+const Range = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function RangeSliderRange(
+  { style, ...rest },
+  ref,
+) {
+  const { values, min, max } = useRangeSliderCtx()
+  const left = percent(values[0], min, max)
+  const right = percent(values[1], min, max)
+  return (
+    <div
+      ref={ref}
+      aria-hidden
+      {...mergeProps(partOnlyAttrs(rangeSliderAnatomy.range), rest, {
+        style: { ...style, left: `${left}%`, width: `${Math.max(0, right - left)}%` },
+      })}
+    />
+  )
+})
+
+export interface RangeSliderThumbProps extends HTMLAttributes<HTMLSpanElement> {
+  index: ThumbIndex
+}
+
+const Thumb = forwardRef<HTMLSpanElement, RangeSliderThumbProps>(function RangeSliderThumb(
+  { index, onKeyDown, onPointerDown, style, ...rest },
+  ref,
+) {
+  const { values, min, max, step, disabled, dragging, activeThumb, send, setThumbFromClientX } =
+    useRangeSliderCtx()
+  const value = values[index]
+  const isActive = dragging && activeThumb === index
+
+  return (
+    <span
+      ref={ref}
+      role="slider"
+      tabIndex={disabled ? -1 : 0}
+      aria-valuemin={min}
+      aria-valuemax={max}
+      aria-valuenow={value}
+      aria-disabled={disabled || undefined}
+      data-aeon-index={index}
+      {...mergeProps(
+        partOnlyAttrs(rangeSliderAnatomy.thumb, {
+          state: isActive ? 'dragging' : disabled ? 'disabled' : 'idle',
+        }),
+        {
+          style: { ...style, left: `${percent(value, min, max)}%` },
+          onPointerDown: (e: PointerEvent<HTMLSpanElement>) => {
+            onPointerDown?.(e)
+            if (disabled || e.button !== 0) return
+            e.stopPropagation()
+            e.currentTarget.setPointerCapture(e.pointerId)
+            send({ type: 'POINTER_DOWN', thumb: index })
+            setThumbFromClientX(index, e.clientX)
+          },
+          onKeyDown: (e: KeyboardEvent<HTMLSpanElement>) => {
+            onKeyDown?.(e)
+            if (disabled || e.defaultPrevented) return
+            if (e.key === 'ArrowRight' || e.key === 'ArrowUp') {
+              e.preventDefault()
+              send({ type: 'STEP', thumb: index, delta: step })
+            }
+            if (e.key === 'ArrowLeft' || e.key === 'ArrowDown') {
+              e.preventDefault()
+              send({ type: 'STEP', thumb: index, delta: -step })
+            }
+            if (e.key === 'Home') {
+              e.preventDefault()
+              send({ type: 'HOME', thumb: index })
+            }
+            if (e.key === 'End') {
+              e.preventDefault()
+              send({ type: 'END', thumb: index })
+            }
+          },
+        },
+        rest,
+      )}
+    />
+  )
+})
+
+const ValueText = forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>(
+  function RangeSliderValueText(props, ref) {
+    const { values } = useRangeSliderCtx()
+    return (
+      <span ref={ref} {...mergeProps(partOnlyAttrs(rangeSliderAnatomy.valueText), props)}>
+        {props.children ?? `${values[0]} – ${values[1]}`}
+      </span>
+    )
+  },
+)
+
+export const RangeSlider = { Root, Track, Range, Thumb, ValueText }

package/packages/react/src/thread/index.tsx

@@ -1,15 +1,26 @@
 import { partAttrs, scopeAttrs, threadAnatomy } from '@aeon-ui/core'
-import { forwardRef, type HTMLAttributes, type ReactNode } from 'react'
+import {
+  forwardRef,
+  type ButtonHTMLAttributes,
+  type HTMLAttributes,
+  type ReactNode,
+} from 'react'
 import { mergeProps } from '../utils/merge-props.js'
 
+/** Base alignment / delivery states. */
 export type ThreadMessageState = 'mine' | 'theirs' | 'pending' | 'failed'
 
+/** Structured in-thread faces (space-combinable with mine/theirs). */
+export type ThreadItemFace = 'command-result' | 'payment-card' | 'request-card'
+
 export interface ThreadRootProps extends HTMLAttributes<HTMLElement> {
   children?: ReactNode
 }
 
 /**
- * Thread — message stream. Item `state` projects mine | theirs | pending | failed.
+ * Thread — message stream.
+ * Item `state` projects mine | theirs | pending | failed, optionally plus
+ * command-result | payment-card | request-card (e.g. `mine payment-card`).
  */
 const Root = forwardRef<HTMLElement, ThreadRootProps>(function ThreadRoot(
   { children, ...rest },
@@ -40,7 +51,7 @@ const List = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function
 })
 
 export interface ThreadItemProps extends HTMLAttributes<HTMLDivElement> {
-  state?: ThreadMessageState | `${ThreadMessageState} ${string}`
+  state?: ThreadMessageState | ThreadItemFace | `${ThreadMessageState} ${ThreadItemFace}` | string
 }
 
 const Item = forwardRef<HTMLDivElement, ThreadItemProps>(function ThreadItem(
@@ -85,6 +96,61 @@ const Day = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function
   )
 })
 
+/** Reply / message-binding control — must be touch-reachable (BRC-218 §4.10). */
+const Bind = forwardRef<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonElement>>(
+  function ThreadBind(props, ref) {
+    return (
+      <button
+        ref={ref}
+        type="button"
+        {...mergeProps(partAttrs(threadAnatomy.scope, threadAnatomy.bind), props)}
+      />
+    )
+  },
+)
+
+const Card = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function ThreadCard(
+  props,
+  ref,
+) {
+  return (
+    <div ref={ref} {...mergeProps(partAttrs(threadAnatomy.scope, threadAnatomy.card), props)} />
+  )
+})
+
+const CardTitle = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  function ThreadCardTitle(props, ref) {
+    return (
+      <div
+        ref={ref}
+        {...mergeProps(partAttrs(threadAnatomy.scope, threadAnatomy.cardTitle), props)}
+      />
+    )
+  },
+)
+
+const CardBody = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  function ThreadCardBody(props, ref) {
+    return (
+      <div
+        ref={ref}
+        {...mergeProps(partAttrs(threadAnatomy.scope, threadAnatomy.cardBody), props)}
+      />
+    )
+  },
+)
+
+const CardActions = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  function ThreadCardActions(props, ref) {
+    return (
+      <div
+        ref={ref}
+        {...mergeProps(partAttrs(threadAnatomy.scope, threadAnatomy.cardActions), props)}
+      />
+    )
+  },
+)
+
 export const Thread = {
   Root,
   List,
@@ -92,4 +158,9 @@ export const Thread = {
   Bubble,
   Meta,
   Day,
+  Bind,
+  Card,
+  CardTitle,
+  CardBody,
+  CardActions,
 }

package/packages/react/src/tooltip/index.tsx

@@ -1,7 +1,9 @@
 import { tooltipAnatomy, partAttrs } from '@aeon-ui/core'
+import { popoverMachine } from '@aeon-ui/primitives'
 import {
   createContext,
   forwardRef,
+  useCallback,
   useContext,
   useEffect,
   useId,
@@ -15,6 +17,7 @@ import {
   type ReactNode,
 } from 'react'
 import { FloatingPositioner } from '../floating/FloatingPositioner.js'
+import { useAeonMachine } from '../hooks/use-aeon-machine.js'
 import { useOutsideClick } from '../hooks/use-outside-click.js'
 import { usePrefersHover } from '../hooks/use-prefers-hover.js'
 import { mergeProps } from '../utils/merge-props.js'
@@ -76,8 +79,10 @@ const Root = forwardRef<HTMLDivElement, TooltipRootProps>(function TooltipRoot(
   },
   ref,
 ) {
-  const [uncontrolled, setUncontrolled] = useState(defaultOpen)
-  const resolvedOpen = open ?? uncontrolled
+  const [snapshot, send] = useAeonMachine(popoverMachine, {
+    input: { open: defaultOpen },
+  })
+  const resolvedOpen = open ?? snapshot.matches('open')
   const showTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
   const hideTimer = useRef<ReturnType<typeof setTimeout> | undefined>(undefined)
   const triggerRef = useRef<HTMLSpanElement>(null)
@@ -87,6 +92,10 @@ const Root = forwardRef<HTMLDivElement, TooltipRootProps>(function TooltipRoot(
   const prefersHover = usePrefersHover()
   const [outsideClickEnabled, setOutsideClickEnabled] = useState(false)
 
+  useEffect(() => {
+    if (open !== undefined) send({ type: 'SET_OPEN', open })
+  }, [open, send])
+
   useEffect(() => {
     if (!resolvedOpen || prefersHover) {
       setOutsideClickEnabled(false)
@@ -97,52 +106,57 @@ const Root = forwardRef<HTMLDivElement, TooltipRootProps>(function TooltipRoot(
     return () => window.clearTimeout(id)
   }, [resolvedOpen, prefersHover, touchOutsideGraceMs])
 
-  const setOpen = (next: boolean) => {
-    if (open === undefined) setUncontrolled(next)
-    onOpenChange?.(next)
-  }
+  const setOpen = useCallback(
+    (next: boolean) => {
+      if (open === undefined) send({ type: next ? 'OPEN' : 'CLOSE' })
+      onOpenChange?.(next)
+    },
+    [open, send, onOpenChange],
+  )
 
   useEffect(() => {
     onOpenChange?.(resolvedOpen)
   }, [resolvedOpen, onOpenChange])
 
-  const hideNow = () => {
+  const hideNow = useCallback(() => {
     if (showTimer.current !== undefined) clearTimeout(showTimer.current)
     if (hideTimer.current !== undefined) clearTimeout(hideTimer.current)
     setOpen(false)
-  }
+  }, [setOpen])
 
-  const showImmediately = () => {
+  const showImmediately = useCallback(() => {
     if (showTimer.current !== undefined) clearTimeout(showTimer.current)
     if (hideTimer.current !== undefined) clearTimeout(hideTimer.current)
     setOpen(true)
-    if (!prefersHover) {
-      if (touchDurationMs > 0) {
-        hideTimer.current = setTimeout(() => hideNow(), touchDurationMs)
-      }
+    if (!prefersHover && touchDurationMs > 0) {
+      hideTimer.current = setTimeout(() => hideNow(), touchDurationMs)
     }
-  }
+  }, [setOpen, prefersHover, touchDurationMs, hideNow])
 
-  const scheduleShow = () => {
+  const scheduleShow = useCallback(() => {
     if (hideTimer.current !== undefined) clearTimeout(hideTimer.current)
     showTimer.current = setTimeout(() => setOpen(true), openDelay)
-  }
+  }, [setOpen, openDelay])
 
-  const scheduleHide = () => {
+  const scheduleHide = useCallback(() => {
     if (showTimer.current !== undefined) clearTimeout(showTimer.current)
     if (closeDelay <= 0) {
       setOpen(false)
       return
     }
     hideTimer.current = setTimeout(() => setOpen(false), closeDelay)
-  }
+  }, [setOpen, closeDelay])
 
-  const toggleTouch = () => {
+  const toggleTouch = useCallback(() => {
     if (resolvedOpen) hideNow()
     else showImmediately()
-  }
+  }, [resolvedOpen, hideNow, showImmediately])
 
-  useOutsideClick([triggerRef, positionerRef], resolvedOpen && !prefersHover && outsideClickEnabled, hideNow)
+  useOutsideClick(
+    [triggerRef, positionerRef],
+    resolvedOpen && !prefersHover && outsideClickEnabled,
+    hideNow,
+  )
 
   const value = useMemo(
     () => ({
@@ -160,7 +174,19 @@ const Root = forwardRef<HTMLDivElement, TooltipRootProps>(function TooltipRoot(
       showOnFocus,
       prefersHover,
     }),
-    [resolvedOpen, triggerId, contentId, openDelay, closeDelay, touchDurationMs, touchOutsideGraceMs, showOnFocus, prefersHover],
+    [
+      resolvedOpen,
+      setOpen,
+      triggerId,
+      contentId,
+      scheduleShow,
+      scheduleHide,
+      showImmediately,
+      hideNow,
+      toggleTouch,
+      showOnFocus,
+      prefersHover,
+    ],
   )
 
   return (

package/packages/react/src/utils/slot.tsx

@@ -0,0 +1,47 @@
+import {
+  Children,
+  cloneElement,
+  forwardRef,
+  isValidElement,
+  type HTMLAttributes,
+  type ReactElement,
+  type ReactNode,
+  type Ref,
+} from 'react'
+import { mergeProps } from './merge-props.js'
+
+function mergeRefs<T>(...refs: Array<Ref<T> | undefined>) {
+  return (node: T) => {
+    for (const ref of refs) {
+      if (!ref) continue
+      if (typeof ref === 'function') ref(node)
+      else (ref as { current: T }).current = node
+    }
+  }
+}
+
+export type SlotProps = HTMLAttributes<HTMLElement> & {
+  children?: ReactNode
+}
+
+/**
+ * Radix-style Slot — merges Aeon attrs onto a single child element
+ * (e.g. Next.js Link) instead of rendering a wrapper.
+ */
+export const Slot = forwardRef<HTMLElement, SlotProps>(function Slot(
+  { children, ...props },
+  forwardedRef,
+) {
+  const child = Children.only(children)
+  if (!isValidElement(child)) {
+    throw new Error('Slot expects a single React element child')
+  }
+
+  const childElement = child as ReactElement<HTMLAttributes<HTMLElement> & { ref?: Ref<HTMLElement> }>
+  const childProps = childElement.props
+
+  return cloneElement(childElement, {
+    ...mergeProps(props, childProps),
+    ref: mergeRefs(forwardedRef, childProps.ref),
+  } as HTMLAttributes<HTMLElement>)
+})