aeon-ui-engine 1.3.1 → 1.4.0

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":233.12287500000002,"failed":false}],[":src/dialog/dialog.test.tsx",{"duration":197.85458300000005,"failed":false}],[":src/avatar/avatar.test.tsx",{"duration":175.06837500000006,"failed":false}],[":src/tooltip/tooltip.test.tsx",{"duration":236.69991700000014,"failed":false}],[":src/toast/toast.test.tsx",{"duration":174.01087499999994,"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/combobox/index.tsx

@@ -1,4 +1,5 @@
 import { comboboxAnatomy, partAttrs, partOnlyAttrs } from '@aeon-ui/core'
+import { popoverMachine } from '@aeon-ui/primitives'
 import {
   createContext,
   forwardRef,
@@ -18,6 +19,7 @@ import {
   type MouseEvent,
   type ReactNode,
 } from 'react'
+import { useAeonMachine } from '../hooks/use-aeon-machine.js'
 import { mergeProps } from '../utils/merge-props.js'
 
 interface RegisteredItem {
@@ -73,23 +75,27 @@ const Root = forwardRef<HTMLDivElement, ComboboxRootProps>(function ComboboxRoot
   { value, onValueChange, children, className, disabled },
   ref,
 ) {
-  const [open, setOpenState] = useState(false)
+  const [snapshot, send] = useAeonMachine(popoverMachine, { input: { open: false } })
   const [query, setQuery] = useState('')
   const [highlightedValue, setHighlightedValue] = useState<string | null>(null)
   const [itemsVersion, setItemsVersion] = useState(0)
   const itemsRef = useRef<RegisteredItem[]>([])
   const listboxId = useId()
 
+  const open = disabled ? false : snapshot.matches('open')
+
   const setOpen = useCallback(
     (next: boolean) => {
       if (disabled) return
-      setOpenState(next)
-      if (!next) {
-        setQuery('')
-        setHighlightedValue(null)
+      if (next) {
+        send({ type: 'OPEN' })
+        return
       }
+      send({ type: 'CLOSE' })
+      setQuery('')
+      setHighlightedValue(null)
     },
-    [disabled],
+    [disabled, send],
   )
 
   const registerItem = useCallback((item: RegisteredItem) => {
@@ -107,7 +113,7 @@ const Root = forwardRef<HTMLDivElement, ComboboxRootProps>(function ComboboxRoot
   const ctx = useMemo(
     () => ({
       value,
-      open: disabled ? false : open,
+      open,
       query,
       listboxId,
       highlightedValue,
@@ -132,7 +138,6 @@ const Root = forwardRef<HTMLDivElement, ComboboxRootProps>(function ComboboxRoot
       registerItem,
       unregisterItem,
       getItems,
-      disabled,
     ],
   )
 

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/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'

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

@@ -97,6 +97,48 @@ const Amount = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(functi
   )
 })
 
+/** Command verb face — e.g. `/pay` (BRC-218 §4 confirmation). */
+const Verb = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(
+  function PromptVerb(props, ref) {
+    const { status } = usePromptCtx()
+    return (
+      <p
+        ref={ref}
+        {...mergeProps(partAttrs(promptAnatomy.scope, promptAnatomy.verb, { state: status }), props)}
+      />
+    )
+  },
+)
+
+/** Fully-qualified recipient `@handle@domain` — never alias alone. */
+const Recipient = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(
+  function PromptRecipient(props, ref) {
+    const { status } = usePromptCtx()
+    return (
+      <p
+        ref={ref}
+        {...mergeProps(
+          partAttrs(promptAnatomy.scope, promptAnatomy.recipient, { state: status }),
+          props,
+        )}
+      />
+    )
+  },
+)
+
+/** Plain-language effect statement for the confirmation sheet. */
+const Effect = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(
+  function PromptEffect(props, ref) {
+    const { status } = usePromptCtx()
+    return (
+      <p
+        ref={ref}
+        {...mergeProps(partAttrs(promptAnatomy.scope, promptAnatomy.effect, { state: status }), props)}
+      />
+    )
+  },
+)
+
 const Actions = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function PromptActions(
   props,
   ref,
@@ -155,6 +197,9 @@ export const Prompt = {
   Eyebrow,
   Meta,
   Amount,
+  Verb,
+  Recipient,
+  Effect,
   Actions,
   Primary,
   Secondary,