aeon-ui-engine 1.3.5 → 1.5.1

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

@@ -272,11 +272,15 @@ export interface TooltipPositionerProps extends HTMLAttributes<HTMLDivElement> {
   /** Mount tooltip in document.body (default true). */
   portalled?: boolean
   placement?: AnchorPlacement
+  /** Gap between trigger and tip (default 4). */
+  gutter?: number
+  /** Stack level for the portalled surface (default 50). */
+  zIndex?: number
   children?: ReactNode
 }
 
 const Positioner = forwardRef<HTMLDivElement, TooltipPositionerProps>(function TooltipPositioner(
-  { portalled = true, placement = 'top-start', children, className, ...rest },
+  { portalled = true, placement = 'top-start', gutter, zIndex, children, className, ...rest },
   ref,
 ) {
   const { open, triggerRef, positionerRef } = useTooltipCtx()
@@ -291,6 +295,8 @@ const Positioner = forwardRef<HTMLDivElement, TooltipPositionerProps>(function T
       positionerRef={positionerRef}
       portalled={portalled}
       placement={placement}
+      gutter={gutter}
+      zIndex={zIndex}
       className={className}
       {...rest}
     >

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' })} />"
     ]
   }

package/packages/schemas/json/catalog.json

@@ -29,6 +29,8 @@
     "progress",
     "radioGroup",
     "slider",
+    "rangeSlider",
+    "fileUpload",
     "pinInput",
     "avatar",
     "content",
@@ -132,6 +134,10 @@
             },
             "disabled": {
               "type": "boolean"
+            },
+            "asChild": {
+              "type": "boolean",
+              "description": "Merge button attrs onto a single child element (Link, a)."
             }
           }
         },
@@ -187,6 +193,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' })} />"
           ]
         }
@@ -217,6 +224,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' })} />"
         ]
       }
@@ -2620,6 +2628,331 @@
         "examples": []
       }
     },
+    "rangeSlider": {
+      "$schema": "https://json-schema.org/draft/2020-12/schema",
+      "$id": "https://aeon-ui.com/schemas/rangeSlider.json",
+      "title": "RangeSlider",
+      "description": "Two-thumb range via rangeSliderMachine — idle | dragging with values pair and minStepsBetween gap.",
+      "type": "object",
+      "additionalProperties": false,
+      "required": [
+        "component",
+        "scope"
+      ],
+      "properties": {
+        "component": {
+          "const": "RangeSlider"
+        },
+        "scope": {
+          "const": "rangeSlider"
+        },
+        "parts": {
+          "type": "array",
+          "description": "Anatomy part keys — map to data-aeon-part",
+          "items": {
+            "type": "string",
+            "enum": [
+              "root",
+              "track",
+              "range",
+              "thumb",
+              "valueText"
+            ]
+          },
+          "uniqueItems": true
+        },
+        "states": {
+          "type": "array",
+          "description": "Allowed data-aeon-state values (stable states only)",
+          "items": {
+            "type": "string",
+            "enum": [
+              "idle",
+              "dragging"
+            ]
+          },
+          "uniqueItems": true
+        },
+        "props": {
+          "type": "object",
+          "additionalProperties": false,
+          "properties": {}
+        },
+        "slots": {
+          "type": "object",
+          "description": "Named composition slots / compound parts",
+          "additionalProperties": {
+            "type": "string"
+          },
+          "properties": {
+            "Root": {
+              "const": "rangeSlider.root",
+              "description": "rangeSlider.root"
+            },
+            "Track": {
+              "const": "rangeSlider.track",
+              "description": "rangeSlider.track"
+            },
+            "Range": {
+              "const": "rangeSlider.range",
+              "description": "rangeSlider.range"
+            },
+            "Thumb": {
+              "const": "rangeSlider.thumb",
+              "description": "rangeSlider.thumb"
+            },
+            "ValueText": {
+              "const": "rangeSlider.valueText",
+              "description": "rangeSlider.valueText"
+            }
+          }
+        },
+        "machine": {
+          "type": [
+            "string",
+            "null"
+          ],
+          "description": "XState machine export from @aeon-ui/primitives, or null if prop/React driven",
+          "const": "rangeSliderMachine"
+        },
+        "runtime": {
+          "type": "string",
+          "description": "How headless state is driven at runtime",
+          "const": "useAeonMachine"
+        },
+        "events": {
+          "type": "array",
+          "items": {
+            "type": "string",
+            "enum": [
+              "SET_VALUES",
+              "SET_BOUNDS",
+              "SET_DISABLED",
+              "POINTER_DOWN",
+              "POINTER_MOVE",
+              "POINTER_UP",
+              "STEP",
+              "HOME",
+              "END"
+            ]
+          }
+        },
+        "examples": {
+          "type": "array",
+          "items": {
+            "type": "string"
+          },
+          "default": [
+            "<RangeSlider.Root defaultValue={[20, 80]} minStepsBetween={1}>\n  <RangeSlider.Track /><RangeSlider.Range />\n  <RangeSlider.Thumb index={0} /><RangeSlider.Thumb index={1} />\n</RangeSlider.Root>"
+          ]
+        }
+      },
+      "x-aeon": {
+        "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": {
+      "$schema": "https://json-schema.org/draft/2020-12/schema",
+      "$id": "https://aeon-ui.com/schemas/fileUpload.json",
+      "title": "FileUpload",
+      "description": "Drag-drop surface via fileUploadMachine — idle | dragging | rejected. File bytes stay in React callbacks.",
+      "type": "object",
+      "additionalProperties": false,
+      "required": [
+        "component",
+        "scope"
+      ],
+      "properties": {
+        "component": {
+          "const": "FileUpload"
+        },
+        "scope": {
+          "const": "fileUpload"
+        },
+        "parts": {
+          "type": "array",
+          "description": "Anatomy part keys — map to data-aeon-part",
+          "items": {
+            "type": "string",
+            "enum": [
+              "root",
+              "dropzone",
+              "input",
+              "label",
+              "hint",
+              "preview",
+              "clearTrigger",
+              "rejectionMessage"
+            ]
+          },
+          "uniqueItems": true
+        },
+        "states": {
+          "type": "array",
+          "description": "Allowed data-aeon-state values (stable states only)",
+          "items": {
+            "type": "string",
+            "enum": [
+              "idle",
+              "dragging",
+              "rejected"
+            ]
+          },
+          "uniqueItems": true
+        },
+        "props": {
+          "type": "object",
+          "additionalProperties": false,
+          "properties": {}
+        },
+        "slots": {
+          "type": "object",
+          "description": "Named composition slots / compound parts",
+          "additionalProperties": {
+            "type": "string"
+          },
+          "properties": {
+            "Root": {
+              "const": "fileUpload.root",
+              "description": "fileUpload.root"
+            },
+            "Dropzone": {
+              "const": "fileUpload.dropzone",
+              "description": "fileUpload.dropzone"
+            },
+            "Input": {
+              "const": "fileUpload.input",
+              "description": "fileUpload.input"
+            },
+            "Label": {
+              "const": "fileUpload.label",
+              "description": "fileUpload.label"
+            },
+            "Hint": {
+              "const": "fileUpload.hint",
+              "description": "fileUpload.hint"
+            },
+            "Preview": {
+              "const": "fileUpload.preview",
+              "description": "fileUpload.preview"
+            },
+            "ClearTrigger": {
+              "const": "fileUpload.clearTrigger",
+              "description": "fileUpload.clearTrigger"
+            },
+            "RejectionMessage": {
+              "const": "fileUpload.rejectionMessage",
+              "description": "fileUpload.rejectionMessage"
+            }
+          }
+        },
+        "machine": {
+          "type": [
+            "string",
+            "null"
+          ],
+          "description": "XState machine export from @aeon-ui/primitives, or null if prop/React driven",
+          "const": "fileUploadMachine"
+        },
+        "runtime": {
+          "type": "string",
+          "description": "How headless state is driven at runtime",
+          "const": "useAeonMachine"
+        },
+        "events": {
+          "type": "array",
+          "items": {
+            "type": "string",
+            "enum": [
+              "DRAG_OVER",
+              "DRAG_LEAVE",
+              "DROP_ACCEPT",
+              "DROP_REJECT",
+              "RESET"
+            ]
+          }
+        },
+        "examples": {
+          "type": "array",
+          "items": {
+            "type": "string"
+          },
+          "default": []
+        }
+      },
+      "x-aeon": {
+        "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"
+        },
+        "examples": []
+      }
+    },
     "pinInput": {
       "$schema": "https://json-schema.org/draft/2020-12/schema",
       "$id": "https://aeon-ui.com/schemas/pinInput.json",