aeon-ui-engine 1.3.5 → 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/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>)
+})

package/packages/schemas/dist/index.d.ts

@@ -37,6 +37,8 @@ declare const componentSchemas: {
     readonly progress: JsonSchema;
     readonly radioGroup: JsonSchema;
     readonly slider: JsonSchema;
+    readonly rangeSlider: JsonSchema;
+    readonly fileUpload: JsonSchema;
     readonly pinInput: JsonSchema;
     readonly avatar: JsonSchema;
     readonly content: JsonSchema;
@@ -87,6 +89,8 @@ declare const catalog: {
         readonly progress: JsonSchema;
         readonly radioGroup: JsonSchema;
         readonly slider: JsonSchema;
+        readonly rangeSlider: JsonSchema;
+        readonly fileUpload: JsonSchema;
         readonly pinInput: JsonSchema;
         readonly avatar: JsonSchema;
         readonly content: JsonSchema;

package/packages/schemas/dist/index.js

@@ -89,11 +89,16 @@ var componentSchemas = {
       },
       variant: { type: "string", enum: ["solid", "outline", "ghost", "link"] },
       size: { type: "string", enum: ["sm", "md", "lg"] },
-      disabled: { type: "boolean" }
+      disabled: { type: "boolean" },
+      asChild: {
+        type: "boolean",
+        description: "Merge button attrs onto a single child element (Link, a)."
+      }
     },
     slots: { Root: "button.root", Group: "button.group", Label: "button.label", Icon: "button.icon" },
     examples: [
       '<Button.Root status="pending" aria-busy>Saving\u2026</Button.Root>',
+      '<Button.Root asChild variant="solid"><a href="/upload">Upload</a></Button.Root>',
       "const [snap, send] = useAeonMachine(buttonLifecycleMachine)\n<Button.Root status={snap.value as ButtonStatus} onClick={() => send({ type: 'PRESS' })} />"
     ]
   }),
@@ -378,6 +383,67 @@ var componentSchemas = {
       ValueText: "slider.valueText"
     }
   }),
+  rangeSlider: componentSchema({
+    id: "https://aeon-ui.com/schemas/rangeSlider.json",
+    title: "RangeSlider",
+    description: "Two-thumb range via rangeSliderMachine \u2014 idle | dragging with values pair and minStepsBetween gap.",
+    scope: "rangeSlider",
+    parts: ["root", "track", "range", "thumb", "valueText"],
+    states: ["idle", "dragging"],
+    machine: "rangeSliderMachine",
+    runtime: "useAeonMachine",
+    events: [
+      "SET_VALUES",
+      "SET_BOUNDS",
+      "SET_DISABLED",
+      "POINTER_DOWN",
+      "POINTER_MOVE",
+      "POINTER_UP",
+      "STEP",
+      "HOME",
+      "END"
+    ],
+    slots: {
+      Root: "rangeSlider.root",
+      Track: "rangeSlider.track",
+      Range: "rangeSlider.range",
+      Thumb: "rangeSlider.thumb",
+      ValueText: "rangeSlider.valueText"
+    },
+    examples: [
+      "<RangeSlider.Root defaultValue={[20, 80]} minStepsBetween={1}>\n  <RangeSlider.Track /><RangeSlider.Range />\n  <RangeSlider.Thumb index={0} /><RangeSlider.Thumb index={1} />\n</RangeSlider.Root>"
+    ]
+  }),
+  fileUpload: componentSchema({
+    id: "https://aeon-ui.com/schemas/fileUpload.json",
+    title: "FileUpload",
+    description: "Drag-drop surface via fileUploadMachine \u2014 idle | dragging | rejected. File bytes stay in React callbacks.",
+    scope: "fileUpload",
+    parts: [
+      "root",
+      "dropzone",
+      "input",
+      "label",
+      "hint",
+      "preview",
+      "clearTrigger",
+      "rejectionMessage"
+    ],
+    states: ["idle", "dragging", "rejected"],
+    machine: "fileUploadMachine",
+    runtime: "useAeonMachine",
+    events: ["DRAG_OVER", "DRAG_LEAVE", "DROP_ACCEPT", "DROP_REJECT", "RESET"],
+    slots: {
+      Root: "fileUpload.root",
+      Dropzone: "fileUpload.dropzone",
+      Input: "fileUpload.input",
+      Label: "fileUpload.label",
+      Hint: "fileUpload.hint",
+      Preview: "fileUpload.preview",
+      ClearTrigger: "fileUpload.clearTrigger",
+      RejectionMessage: "fileUpload.rejectionMessage"
+    }
+  }),
   pinInput: componentSchema({
     id: "https://aeon-ui.com/schemas/pinInput.json",
     title: "PinInput",

package/packages/schemas/json/button.json

@@ -79,6 +79,10 @@
         },
         "disabled": {
           "type": "boolean"
+        },
+        "asChild": {
+          "type": "boolean",
+          "description": "Merge button attrs onto a single child element (Link, a)."
         }
       }
     },
@@ -134,6 +138,7 @@
       },
       "default": [
         "<Button.Root status=\"pending\" aria-busy>Saving…</Button.Root>",
+        "<Button.Root asChild variant=\"solid\"><a href=\"/upload\">Upload</a></Button.Root>",
         "const [snap, send] = useAeonMachine(buttonLifecycleMachine)\n<Button.Root status={snap.value as ButtonStatus} onClick={() => send({ type: 'PRESS' })} />"
       ]
     }
@@ -164,6 +169,7 @@
     },
     "examples": [
       "<Button.Root status=\"pending\" aria-busy>Saving…</Button.Root>",
+      "<Button.Root asChild variant=\"solid\"><a href=\"/upload\">Upload</a></Button.Root>",
       "const [snap, send] = useAeonMachine(buttonLifecycleMachine)\n<Button.Root status={snap.value as ButtonStatus} onClick={() => send({ type: 'PRESS' })} />"
     ]
   }