aeon-ui-engine 1.3.5 → 1.5.1

package/packages/react/node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/results.json

@@ -1 +1 @@
-{"version":"3.2.4","results":[[":src/select/select.test.tsx",{"duration":226.72845800000005,"failed":false}],[":src/dialog/dialog.test.tsx",{"duration":181.9869580000002,"failed":false}],[":src/avatar/avatar.test.tsx",{"duration":144.93595800000003,"failed":false}],[":src/tooltip/tooltip.test.tsx",{"duration":226.42358300000024,"failed":false}],[":src/toast/toast.test.tsx",{"duration":126.48416699999984,"failed":false}]]}
+{"version":"3.2.4","results":[[":src/select/select.test.tsx",{"duration":374.59737499999983,"failed":false}],[":src/dialog/dialog.test.tsx",{"duration":302.22662500000024,"failed":false}],[":src/avatar/avatar.test.tsx",{"duration":222.467666,"failed":false}],[":src/tooltip/tooltip.test.tsx",{"duration":394.93274999999994,"failed":false}],[":src/toast/toast.test.tsx",{"duration":290.9687079999999,"failed":false}]]}

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

@@ -1,6 +1,12 @@
 import { buttonAnatomy, partAttrs } from '@aeon-ui/core'
-import { forwardRef, type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from 'react'
+import {
+  forwardRef,
+  type ButtonHTMLAttributes,
+  type HTMLAttributes,
+  type ReactNode,
+} from 'react'
 import { mergeProps } from '../utils/merge-props.js'
+import { Slot } from '../utils/slot.js'
 
 /** Action button lifecycle — see STATES.md and `buttonLifecycleMachine`. */
 export type ButtonStatus = 'idle' | 'pending' | 'success' | 'failure' | 'disabled'
@@ -10,34 +16,63 @@ export interface ButtonRootProps extends ButtonHTMLAttributes<HTMLButtonElement>
   size?: 'xs' | 'sm' | 'md' | 'lg'
   /** Machine-aligned lifecycle; `disabled` prop overrides to `disabled`. */
   status?: ButtonStatus
+  /**
+   * Merge button attrs onto a single child (e.g. Next.js `<Link>` / `<a>`).
+   * Child must be one React element.
+   */
+  asChild?: boolean
   children?: ReactNode
 }
 
 const Root = forwardRef<HTMLButtonElement, ButtonRootProps>(function ButtonRoot(
-  { variant = 'solid', size = 'md', disabled, status = 'idle', children, className, ...rest },
+  {
+    variant = 'solid',
+    size = 'md',
+    disabled,
+    status = 'idle',
+    asChild = false,
+    children,
+    className,
+    type,
+    ...rest
+  },
   ref,
 ) {
   const resolvedStatus: ButtonStatus = disabled ? 'disabled' : status
   const isBusy = resolvedStatus === 'pending'
   // Success is terminal until RESET — keep data-aeon-state="success" but block input.
   const isLocked = resolvedStatus === 'success'
+  const isDisabled = Boolean(disabled || isBusy || isLocked || resolvedStatus === 'disabled')
+
+  const aeonProps = {
+    className,
+    'data-aeon-variant': variant,
+    'data-aeon-size': size,
+    'aria-busy': isBusy || undefined,
+    'aria-disabled': asChild && isDisabled ? true : undefined,
+    ...mergeProps(
+      partAttrs(buttonAnatomy.scope, buttonAnatomy.root, {
+        state: resolvedStatus,
+        disabled: isDisabled,
+      }),
+      rest,
+    ),
+  }
+
+  if (asChild) {
+    return (
+      <Slot ref={ref as never} {...aeonProps}>
+        {children}
+      </Slot>
+    )
+  }
 
   return (
     <button
       ref={ref}
-      type="button"
-      disabled={disabled || isBusy || isLocked || resolvedStatus === 'disabled'}
-      aria-busy={isBusy || undefined}
-      className={className}
-      data-aeon-variant={variant}
-      data-aeon-size={size}
-      {...mergeProps(
-        partAttrs(buttonAnatomy.scope, buttonAnatomy.root, {
-          state: resolvedStatus,
-          disabled: Boolean(disabled || resolvedStatus === 'disabled' || isLocked),
-        }),
-        rest,
-      )}
+      type={type ?? 'button'}
+      disabled={isDisabled}
+      {...aeonProps}
     >
       {children}
     </button>

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

@@ -1,6 +1,7 @@
 import { composerAnatomy, partAttrs, scopeAttrs } from '@aeon-ui/core'
 import {
   forwardRef,
+  type ButtonHTMLAttributes,
   type FormHTMLAttributes,
   type HTMLAttributes,
   type ReactNode,
@@ -8,7 +9,21 @@ import {
 } from 'react'
 import { mergeProps } from '../utils/merge-props.js'
 
-export type ComposerState = 'idle' | 'sending' | 'disabled' | 'error'
+/**
+ * Composer root states.
+ * - chat: plain message compose
+ * - command: local slash input (BRC-218) — never from received text
+ * - lookup: non-confirming verbs (/whois, /help)
+ * - idle | sending | disabled | error: transport chrome
+ */
+export type ComposerState =
+  | 'idle'
+  | 'sending'
+  | 'disabled'
+  | 'error'
+  | 'chat'
+  | 'command'
+  | 'lookup'
 
 export interface ComposerRootProps extends FormHTMLAttributes<HTMLFormElement> {
   state?: ComposerState
@@ -16,8 +31,8 @@ export interface ComposerRootProps extends FormHTMLAttributes<HTMLFormElement> {
 }
 
 /**
- * Composer — bottom compose chrome for threads (input + send).
- * Root state: idle | sending | disabled | error.
+ * Composer — bottom compose chrome for threads (input + send + command palette).
+ * Only local user input is command-eligible (BRC-218 §2.4).
  */
 const Root = forwardRef<HTMLFormElement, ComposerRootProps>(function ComposerRoot(
   { state = 'idle', children, ...rest },
@@ -67,9 +82,49 @@ const Send = forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>(
   },
 )
 
+const Toolbar = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  function ComposerToolbar(props, ref) {
+    return (
+      <div
+        ref={ref}
+        role="toolbar"
+        {...mergeProps(partAttrs(composerAnatomy.scope, composerAnatomy.toolbar), props)}
+      />
+    )
+  },
+)
+
+const Suggestions = forwardRef<HTMLUListElement, HTMLAttributes<HTMLUListElement>>(
+  function ComposerSuggestions(props, ref) {
+    return (
+      <ul
+        ref={ref}
+        role="listbox"
+        {...mergeProps(partAttrs(composerAnatomy.scope, composerAnatomy.suggestions), props)}
+      />
+    )
+  },
+)
+
+const Suggestion = forwardRef<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonElement>>(
+  function ComposerSuggestion(props, ref) {
+    return (
+      <button
+        ref={ref}
+        type="button"
+        role="option"
+        {...mergeProps(partAttrs(composerAnatomy.scope, composerAnatomy.suggestion), props)}
+      />
+    )
+  },
+)
+
 export const Composer = {
   Root,
   Input,
   Actions,
   Send,
+  Toolbar,
+  Suggestions,
+  Suggestion,
 }

package/packages/react/src/file-upload/index.tsx

@@ -0,0 +1,322 @@
+import { fileUploadAnatomy, partAttrs, partOnlyAttrs } from '@aeon-ui/core'
+import { fileUploadMachine, getFileUploadPhase } from '@aeon-ui/primitives'
+import {
+  createContext,
+  forwardRef,
+  useCallback,
+  useContext,
+  useId,
+  useMemo,
+  useRef,
+  useState,
+  type ChangeEvent,
+  type DragEvent,
+  type HTMLAttributes,
+  type InputHTMLAttributes,
+  type MouseEvent,
+  type ReactNode,
+} from 'react'
+import { useAeonMachine } from '../hooks/use-aeon-machine.js'
+import { mergeProps } from '../utils/merge-props.js'
+
+function isFileTypeAccepted(file: File, acceptString: string) {
+  if (!acceptString || acceptString === '*') return true
+  const acceptedTypes = acceptString.split(',').map((type) => type.trim()).filter(Boolean)
+  if (acceptedTypes.length === 0) return true
+  return acceptedTypes.some((acceptedType) => {
+    if (acceptedType.startsWith('.')) {
+      return file.name.toLowerCase().endsWith(acceptedType.toLowerCase())
+    }
+    if (acceptedType.includes('*')) {
+      const baseType = acceptedType.split('/')[0]
+      return file.type.startsWith(`${baseType}/`)
+    }
+    return file.type === acceptedType
+  })
+}
+
+interface FileUploadContextValue {
+  phase: 'idle' | 'dragging' | 'rejected'
+  accept: string
+  disabled: boolean
+  file: File | null
+  inputId: string
+  inputRef: React.RefObject<HTMLInputElement | null>
+  send: ReturnType<typeof useAeonMachine<typeof fileUploadMachine>>[1]
+  selectFile: (file: File | null) => void
+  clear: () => void
+  openPicker: () => void
+}
+
+const FileUploadCtx = createContext<FileUploadContextValue | null>(null)
+
+function useFileUploadCtx() {
+  const ctx = useContext(FileUploadCtx)
+  if (!ctx) throw new Error('FileUpload parts must be used within FileUpload.Root')
+  return ctx
+}
+
+export interface FileUploadRootProps {
+  accept?: string
+  disabled?: boolean
+  /** Controlled selected file (bytes stay outside the machine). */
+  file?: File | null
+  defaultFile?: File | null
+  onFileSelect?: (file: File | null) => void
+  children?: ReactNode
+  className?: string
+}
+
+const Root = forwardRef<HTMLDivElement, FileUploadRootProps>(function FileUploadRoot(
+  {
+    accept = '*',
+    disabled = false,
+    file: fileProp,
+    defaultFile = null,
+    onFileSelect,
+    children,
+    className,
+    ...rest
+  },
+  ref,
+) {
+  const inputId = useId()
+  const inputRef = useRef<HTMLInputElement>(null)
+  const [snapshot, send] = useAeonMachine(fileUploadMachine)
+  const [uncontrolledFile, setUncontrolledFile] = useState<File | null>(defaultFile)
+  const file = fileProp !== undefined ? fileProp : uncontrolledFile
+  const phase = getFileUploadPhase(snapshot.value)
+
+  const selectFile = useCallback(
+    (next: File | null) => {
+      if (fileProp === undefined) setUncontrolledFile(next)
+      onFileSelect?.(next)
+    },
+    [fileProp, onFileSelect],
+  )
+
+  const clear = useCallback(() => {
+    send({ type: 'RESET' })
+    selectFile(null)
+    if (inputRef.current) inputRef.current.value = ''
+  }, [send, selectFile])
+
+  const openPicker = useCallback(() => {
+    if (disabled) return
+    inputRef.current?.click()
+  }, [disabled])
+
+  const ctx = useMemo(
+    () => ({
+      phase,
+      accept,
+      disabled,
+      file,
+      inputId,
+      inputRef,
+      send,
+      selectFile,
+      clear,
+      openPicker,
+    }),
+    [phase, accept, disabled, file, inputId, send, selectFile, clear, openPicker],
+  )
+
+  return (
+    <FileUploadCtx.Provider value={ctx}>
+      <div
+        ref={ref}
+        className={className}
+        {...mergeProps(
+          partAttrs(fileUploadAnatomy.scope, fileUploadAnatomy.root, {
+            state: phase,
+            disabled,
+          }),
+          rest as HTMLAttributes<HTMLDivElement>,
+        )}
+      >
+        {children}
+      </div>
+    </FileUploadCtx.Provider>
+  )
+})
+
+const Label = forwardRef<HTMLLabelElement, HTMLAttributes<HTMLLabelElement>>(function FileUploadLabel(
+  props,
+  ref,
+) {
+  const { inputId } = useFileUploadCtx()
+  return (
+    <label
+      ref={ref}
+      htmlFor={inputId}
+      {...mergeProps(partOnlyAttrs(fileUploadAnatomy.label), props)}
+    />
+  )
+})
+
+const Dropzone = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function FileUploadDropzone(
+  { onClick, onDragOver, onDragLeave, onDrop, ...rest },
+  ref,
+) {
+  const { accept, disabled, send, selectFile, openPicker, phase } = useFileUploadCtx()
+
+  return (
+    <div
+      ref={ref}
+      role="button"
+      tabIndex={disabled ? -1 : 0}
+      aria-disabled={disabled || undefined}
+      onKeyDown={(e) => {
+        if (disabled) return
+        if (e.key === 'Enter' || e.key === ' ') {
+          e.preventDefault()
+          openPicker()
+        }
+      }}
+      {...mergeProps(
+        partOnlyAttrs(fileUploadAnatomy.dropzone, {
+          state: phase,
+          disabled,
+        }),
+        {
+          onClick: (e: MouseEvent<HTMLDivElement>) => {
+            onClick?.(e)
+            if (disabled || e.defaultPrevented) return
+            openPicker()
+          },
+          onDragOver: (e: DragEvent<HTMLDivElement>) => {
+            onDragOver?.(e)
+            e.preventDefault()
+            if (disabled) return
+            send({ type: 'DRAG_OVER' })
+          },
+          onDragLeave: (e: DragEvent<HTMLDivElement>) => {
+            onDragLeave?.(e)
+            e.preventDefault()
+            if (disabled) return
+            send({ type: 'DRAG_LEAVE' })
+          },
+          onDrop: (e: DragEvent<HTMLDivElement>) => {
+            onDrop?.(e)
+            e.preventDefault()
+            if (disabled) return
+            const next = Array.from(e.dataTransfer.files)[0]
+            if (next && isFileTypeAccepted(next, accept)) {
+              send({ type: 'DROP_ACCEPT' })
+              selectFile(next)
+            } else {
+              send({ type: 'DROP_REJECT' })
+            }
+          },
+        },
+        rest,
+      )}
+    />
+  )
+})
+
+const Input = forwardRef<HTMLInputElement, InputHTMLAttributes<HTMLInputElement>>(
+  function FileUploadInput({ onChange, ...rest }, ref) {
+    const { accept, disabled, inputId, inputRef, selectFile, send } = useFileUploadCtx()
+
+    return (
+      <input
+        ref={(node) => {
+          inputRef.current = node
+          if (typeof ref === 'function') ref(node)
+          else if (ref) ref.current = node
+        }}
+        id={inputId}
+        type="file"
+        accept={accept}
+        disabled={disabled}
+        {...mergeProps(
+          partOnlyAttrs(fileUploadAnatomy.input),
+          {
+            onChange: (e: ChangeEvent<HTMLInputElement>) => {
+              onChange?.(e)
+              const next = e.target.files?.[0] ?? null
+              if (next) {
+                send({ type: 'RESET' })
+                selectFile(next)
+              }
+            },
+          },
+          rest,
+        )}
+      />
+    )
+  },
+)
+
+const Hint = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(
+  function FileUploadHint(props, ref) {
+    return <p ref={ref} {...mergeProps(partOnlyAttrs(fileUploadAnatomy.hint), props)} />
+  },
+)
+
+const Preview = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function FileUploadPreview(
+  { children, ...rest },
+  ref,
+) {
+  const { file } = useFileUploadCtx()
+  if (!file && !children) return null
+  return (
+    <div ref={ref} {...mergeProps(partOnlyAttrs(fileUploadAnatomy.preview), rest)}>
+      {children ?? file?.name}
+    </div>
+  )
+})
+
+const ClearTrigger = forwardRef<HTMLButtonElement, HTMLAttributes<HTMLButtonElement>>(
+  function FileUploadClearTrigger({ onClick, ...rest }, ref) {
+    const { clear, disabled, file } = useFileUploadCtx()
+    if (!file) return null
+    return (
+      <button
+        ref={ref}
+        type="button"
+        disabled={disabled}
+        {...mergeProps(
+          partOnlyAttrs(fileUploadAnatomy.clearTrigger),
+          {
+            onClick: (e: MouseEvent<HTMLButtonElement>) => {
+              onClick?.(e)
+              if (e.defaultPrevented) return
+              clear()
+            },
+          },
+          rest,
+        )}
+      />
+    )
+  },
+)
+
+const RejectionMessage = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(
+  function FileUploadRejectionMessage(props, ref) {
+    const { phase } = useFileUploadCtx()
+    if (phase !== 'rejected') return null
+    return (
+      <p
+        ref={ref}
+        role="alert"
+        {...mergeProps(partOnlyAttrs(fileUploadAnatomy.rejectionMessage), props)}
+      />
+    )
+  },
+)
+
+export const FileUpload = {
+  Root,
+  Label,
+  Dropzone,
+  Input,
+  Hint,
+  Preview,
+  ClearTrigger,
+  RejectionMessage,
+}
+
+export { useFileUploadCtx as useFileUpload }

package/packages/react/src/floating/FloatingPositioner.tsx

@@ -13,6 +13,10 @@ export interface FloatingPositionerProps extends HTMLAttributes<HTMLDivElement>
   portalled?: boolean
   placement?: AnchorPlacement
   matchAnchorWidth?: boolean
+  /** Gap between trigger and surface. */
+  gutter?: number
+  /** Stack level for the portalled surface. */
+  zIndex?: number
   children?: ReactNode
 }
 
@@ -27,6 +31,8 @@ export const FloatingPositioner = forwardRef<HTMLDivElement, FloatingPositionerP
       portalled = true,
       placement = 'bottom-start',
       matchAnchorWidth = false,
+      gutter,
+      zIndex,
       children,
       className,
       ...rest
@@ -36,6 +42,8 @@ export const FloatingPositioner = forwardRef<HTMLDivElement, FloatingPositionerP
     const mounted = usePortalledMount()
     useAnchorPosition(triggerRef, positionerRef, open && portalled, placement, {
       matchWidth: matchAnchorWidth,
+      gutter,
+      zIndex,
     })
 
     if (!open) return null

package/packages/react/src/hooks/use-anchor-position.ts

@@ -1,13 +1,38 @@
 import { useEffect, type RefObject } from 'react'
 
-export type AnchorPlacement = 'bottom-start' | 'top-start'
+export type AnchorSide = 'top' | 'bottom'
+export type AnchorAlign = 'start' | 'end' | 'center'
+export type AnchorPlacement = `${AnchorSide}-${AnchorAlign}`
 
 export interface AnchorPositionOptions {
   /** Match floating width to anchor (select listboxes). */
   matchWidth?: boolean
+  /** Gap between anchor and floating surface. */
+  gutter?: number
+  /** Stack level written to the floating surface. */
+  zIndex?: number
+  /** Viewport padding kept clear when flipping and clamping. */
+  padding?: number
 }
 
-/** Pin floating surface to trigger rect (for portalled overlays). */
+const DEFAULT_GUTTER = 4
+const DEFAULT_Z_INDEX = 50
+const DEFAULT_PADDING = 8
+
+function splitPlacement(placement: AnchorPlacement): [AnchorSide, AnchorAlign] {
+  const [side, align] = placement.split('-') as [AnchorSide, AnchorAlign]
+  return [side, align]
+}
+
+/**
+ * Pin floating surface to trigger rect (for portalled overlays).
+ *
+ * Collision aware: the preferred side flips when it has no room, and the
+ * surface is clamped inside the viewport so an end-aligned trigger near an edge
+ * never renders offscreen. The resolved geometry is published as
+ * `data-side` / `data-align` plus `--aeon-available-height` and
+ * `--aeon-anchor-width` so recipes can cap their own scroll area.
+ */
 export function useAnchorPosition(
   anchorRef: RefObject<HTMLElement | null>,
   floatingRef: RefObject<HTMLElement | null>,
@@ -15,22 +40,32 @@ export function useAnchorPosition(
   placement: AnchorPlacement = 'bottom-start',
   options: AnchorPositionOptions = {},
 ) {
-  const { matchWidth = false } = options
+  const {
+    matchWidth = false,
+    gutter = DEFAULT_GUTTER,
+    zIndex = DEFAULT_Z_INDEX,
+    padding = DEFAULT_PADDING,
+  } = options
 
   useEffect(() => {
     if (!active || !anchorRef.current || !floatingRef.current) return
 
+    let frame = 0
+
     const update = () => {
       const anchor = anchorRef.current
       const floating = floatingRef.current
       if (!anchor || !floating) return
 
+      const [preferredSide, align] = splitPlacement(placement)
       const rect = anchor.getBoundingClientRect()
+      const viewportWidth = window.innerWidth
+      const viewportHeight = window.innerHeight
+
       floating.style.position = 'fixed'
-      floating.style.left = `${rect.left}px`
       floating.style.bottom = ''
       floating.style.right = ''
-      floating.style.zIndex = '50'
+      floating.style.zIndex = String(zIndex)
 
       if (matchWidth) {
         floating.style.width = `${rect.width}px`
@@ -40,22 +75,58 @@ export function useAnchorPosition(
         floating.style.minWidth = ''
       }
 
-      if (placement === 'top-start') {
-        const height = floating.offsetHeight || floating.getBoundingClientRect().height
-        floating.style.top = `${rect.top - height - 4}px`
-      } else {
-        floating.style.top = `${rect.bottom + 4}px`
-      }
+      const width = floating.offsetWidth || floating.getBoundingClientRect().width
+      const height = floating.offsetHeight || floating.getBoundingClientRect().height
+
+      const roomBelow = viewportHeight - rect.bottom - gutter - padding
+      const roomAbove = rect.top - gutter - padding
+      const room = preferredSide === 'top' ? roomAbove : roomBelow
+      const side =
+        room >= height
+          ? preferredSide
+          : roomAbove > roomBelow
+            ? 'top'
+            : 'bottom'
+      const available = side === 'top' ? roomAbove : roomBelow
+
+      let left = rect.left
+      if (align === 'end') left = rect.right - width
+      else if (align === 'center') left = rect.left + rect.width / 2 - width / 2
+
+      const maxLeft = Math.max(padding, viewportWidth - width - padding)
+      left = Math.min(Math.max(padding, left), maxLeft)
+
+      const top =
+        side === 'top'
+          ? Math.max(padding, rect.top - gutter - Math.min(height, Math.max(available, 0)))
+          : Math.min(
+              rect.bottom + gutter,
+              Math.max(padding, viewportHeight - height - padding),
+            )
+
+      floating.style.left = `${Math.round(left)}px`
+      floating.style.top = `${Math.round(top)}px`
+      floating.style.setProperty('--aeon-available-height', `${Math.round(Math.max(available, 0))}px`)
+      floating.style.setProperty('--aeon-anchor-width', `${Math.round(rect.width)}px`)
+      floating.dataset.side = side
+      floating.dataset.align = align
+    }
+
+    const schedule = () => {
+      cancelAnimationFrame(frame)
+      frame = requestAnimationFrame(update)
     }
 
     update()
-    requestAnimationFrame(update)
+    // Measure again once the surface has laid out (flip/clamp need real height).
+    schedule()
 
-    window.addEventListener('resize', update)
-    window.addEventListener('scroll', update, true)
+    window.addEventListener('resize', schedule)
+    window.addEventListener('scroll', schedule, true)
     return () => {
-      window.removeEventListener('resize', update)
-      window.removeEventListener('scroll', update, true)
+      cancelAnimationFrame(frame)
+      window.removeEventListener('resize', schedule)
+      window.removeEventListener('scroll', schedule, true)
     }
-  }, [active, anchorRef, floatingRef, placement, matchWidth])
+  }, [active, anchorRef, floatingRef, placement, matchWidth, gutter, zIndex, padding])
 }

package/packages/react/src/index.ts

@@ -9,6 +9,8 @@ export * from './separator/index.js'
 export * from './progress/index.js'
 export * from './radio-group/index.js'
 export * from './slider/index.js'
+export * from './range-slider/index.js'
+export * from './file-upload/index.js'
 export * from './pin-input/index.js'
 export * from './accordion/index.js'
 export * from './async/index.js'
@@ -40,3 +42,4 @@ export * from './sticky-bar/index.js'
 export { useAeonMachine } from './hooks/use-aeon-machine.js'
 export { useLayoutMode } from './hooks/use-layout-mode.js'
 export { useFitText } from './hooks/use-fit-text.js'
+export { Slot } from './utils/slot.js'