aeon-ui-engine 1.0.2 → 1.1.0

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

@@ -0,0 +1,75 @@
+import { composerAnatomy, partAttrs, scopeAttrs } from '@aeon-ui/core'
+import {
+  forwardRef,
+  type FormHTMLAttributes,
+  type HTMLAttributes,
+  type ReactNode,
+  type TextareaHTMLAttributes,
+} from 'react'
+import { mergeProps } from '../utils/merge-props.js'
+
+export type ComposerState = 'idle' | 'sending' | 'disabled' | 'error'
+
+export interface ComposerRootProps extends FormHTMLAttributes<HTMLFormElement> {
+  state?: ComposerState
+  children?: ReactNode
+}
+
+/**
+ * Composer — bottom compose chrome for threads (input + send).
+ * Root state: idle | sending | disabled | error.
+ */
+const Root = forwardRef<HTMLFormElement, ComposerRootProps>(function ComposerRoot(
+  { state = 'idle', children, ...rest },
+  ref,
+) {
+  return (
+    <form
+      ref={ref}
+      {...mergeProps(scopeAttrs(composerAnatomy.scope, composerAnatomy.root, { state }), rest)}
+    >
+      {children}
+    </form>
+  )
+})
+
+const Input = forwardRef<HTMLTextAreaElement, TextareaHTMLAttributes<HTMLTextAreaElement>>(
+  function ComposerInput(props, ref) {
+    return (
+      <textarea
+        ref={ref}
+        rows={1}
+        {...mergeProps(partAttrs(composerAnatomy.scope, composerAnatomy.input), props)}
+      />
+    )
+  },
+)
+
+const Actions = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(
+  function ComposerActions(props, ref) {
+    return (
+      <div
+        ref={ref}
+        {...mergeProps(partAttrs(composerAnatomy.scope, composerAnatomy.actions), props)}
+      />
+    )
+  },
+)
+
+const Send = forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>(
+  function ComposerSend(props, ref) {
+    return (
+      <span
+        ref={ref}
+        {...mergeProps(partAttrs(composerAnatomy.scope, composerAnatomy.send), props)}
+      />
+    )
+  },
+)
+
+export const Composer = {
+  Root,
+  Input,
+  Actions,
+  Send,
+}

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

@@ -0,0 +1,149 @@
+import { contentAnatomy, partAttrs, scopeAttrs } from '@aeon-ui/core'
+import { contentRegionMachine, type ContentRegionState } from '@aeon-ui/primitives'
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useMemo,
+  type HTMLAttributes,
+  type ReactNode,
+} from 'react'
+import { useAeonMachine } from '../hooks/use-aeon-machine.js'
+import { mergeProps } from '../utils/merge-props.js'
+
+interface ContentContextValue {
+  state: ContentRegionState
+  error: string | null
+  send: ReturnType<typeof useAeonMachine<typeof contentRegionMachine>>[1]
+}
+
+const ContentCtx = createContext<ContentContextValue | null>(null)
+
+export function useContentContext() {
+  const ctx = useContext(ContentCtx)
+  if (!ctx) throw new Error('Content parts must be used within Content.Root')
+  return ctx
+}
+
+export interface ContentRootProps extends HTMLAttributes<HTMLDivElement> {
+  /**
+   * Controlled face — projects parent/app machine onto Content slots
+   * (same pattern as Button `status`). When set, slot visibility uses this
+   * value instead of the internal contentRegionMachine leaf.
+   */
+  state?: ContentRegionState
+  children?: ReactNode
+}
+
+const Root = forwardRef<HTMLDivElement, ContentRootProps>(function ContentRoot(
+  { state: stateProp, children, ...rest },
+  ref,
+) {
+  const [snapshot, send] = useAeonMachine(contentRegionMachine)
+  const machineState = snapshot.value as ContentRegionState
+  const state = stateProp ?? machineState
+  const value = useMemo(
+    () => ({ state, error: snapshot.context.error, send }),
+    [state, snapshot.context.error, send],
+  )
+
+  return (
+    <ContentCtx.Provider value={value}>
+      <div
+        ref={ref}
+        {...mergeProps(scopeAttrs(contentAnatomy.scope, contentAnatomy.root, { state }), rest)}
+      >
+        {children}
+      </div>
+    </ContentCtx.Provider>
+  )
+})
+
+const Toolbar = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function ContentToolbar(
+  props,
+  ref,
+) {
+  const { state } = useContentContext()
+  return (
+    <div
+      ref={ref}
+      {...mergeProps(partAttrs(contentAnatomy.scope, contentAnatomy.toolbar, { state }), props)}
+    />
+  )
+})
+
+/** Primary body — shown when state is ready | loadingMore | success (and optionally idle). */
+const Body = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function ContentBody(
+  { hidden, ...rest },
+  ref,
+) {
+  const { state } = useContentContext()
+  const show = state === 'ready' || state === 'loadingMore' || state === 'success' || state === 'idle'
+  if (!show) return null
+  return (
+    <div
+      ref={ref}
+      hidden={hidden}
+      {...mergeProps(partAttrs(contentAnatomy.scope, contentAnatomy.body, { state }), rest)}
+    />
+  )
+})
+
+function StatusSlot(
+  part: string,
+  match: ContentRegionState | ContentRegionState[],
+  displayName: string,
+) {
+  const matches = Array.isArray(match) ? match : [match]
+  const Comp = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function ContentStatusSlot(
+    props,
+    ref,
+  ) {
+    const { state } = useContentContext()
+    if (!matches.includes(state)) return null
+    return (
+      <div
+        ref={ref}
+        role="status"
+        {...mergeProps(partAttrs(contentAnatomy.scope, part, { state }), props)}
+      />
+    )
+  })
+  Comp.displayName = displayName
+  return Comp
+}
+
+const Pending = StatusSlot(contentAnatomy.pending, 'pending', 'Content.Pending')
+const Empty = StatusSlot(contentAnatomy.empty, 'empty', 'Content.Empty')
+const ErrorSlot = StatusSlot(contentAnatomy.error, 'error', 'Content.Error')
+const Success = StatusSlot(contentAnatomy.success, 'success', 'Content.Success')
+
+const Sentinel = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function ContentSentinel(
+  props,
+  ref,
+) {
+  const { state } = useContentContext()
+  if (state !== 'ready' && state !== 'loadingMore') return null
+  return (
+    <div
+      ref={ref}
+      {...mergeProps(partAttrs(contentAnatomy.scope, contentAnatomy.sentinel, { state }), props)}
+    />
+  )
+})
+
+/**
+ * Content — status-slotted region. Machine totality maps 1:1 onto parts.
+ * States: idle | pending | empty | error | ready | loadingMore | success
+ * Drive via contentRegionMachine events, or project with Root `state` prop.
+ */
+export const Content = {
+  Root,
+  Toolbar,
+  Body,
+  Pending,
+  Empty,
+  Error: ErrorSlot,
+  Success,
+  Sentinel,
+}

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

@@ -0,0 +1,78 @@
+import { conversationAnatomy, partAttrs, scopeAttrs } from '@aeon-ui/core'
+import { forwardRef, type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from 'react'
+import { mergeProps } from '../utils/merge-props.js'
+
+export type ConversationItemState = 'idle' | 'unread' | 'selected'
+
+export interface ConversationRootProps extends HTMLAttributes<HTMLElement> {
+  children?: ReactNode
+}
+
+/**
+ * Conversation — inbox / DM list (universal messaging chrome).
+ * Item states: idle | unread | selected.
+ */
+const Root = forwardRef<HTMLElement, ConversationRootProps>(function ConversationRoot(
+  { children, ...rest },
+  ref,
+) {
+  return (
+    <div
+      ref={ref as never}
+      {...mergeProps(scopeAttrs(conversationAnatomy.scope, conversationAnatomy.root), rest)}
+    >
+      {children}
+    </div>
+  )
+})
+
+export interface ConversationItemProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  state?: ConversationItemState
+  as?: 'button' | 'div' | 'a'
+}
+
+const Item = forwardRef<HTMLElement, ConversationItemProps>(function ConversationItem(
+  { state = 'idle', as: Tag = 'button', type, children, ...rest },
+  ref,
+) {
+  const buttonType = Tag === 'button' ? (type ?? 'button') : undefined
+  return (
+    <Tag
+      ref={ref as never}
+      type={buttonType as never}
+      {...mergeProps(
+        partAttrs(conversationAnatomy.scope, conversationAnatomy.item, { state }),
+        rest,
+      )}
+    >
+      {children}
+    </Tag>
+  )
+})
+
+function Part(part: string, displayName: string) {
+  const Comp = forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>(function ConversationPart(
+    props,
+    ref,
+  ) {
+    return (
+      <span
+        ref={ref}
+        {...mergeProps(partAttrs(conversationAnatomy.scope, part), props)}
+      />
+    )
+  })
+  Comp.displayName = displayName
+  return Comp
+}
+
+export const Conversation = {
+  Root,
+  Item,
+  Leading: Part(conversationAnatomy.leading, 'Conversation.Leading'),
+  Body: Part(conversationAnatomy.body, 'Conversation.Body'),
+  Title: Part(conversationAnatomy.title, 'Conversation.Title'),
+  Preview: Part(conversationAnatomy.preview, 'Conversation.Preview'),
+  Meta: Part(conversationAnatomy.meta, 'Conversation.Meta'),
+  Badge: Part(conversationAnatomy.badge, 'Conversation.Badge'),
+}

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

@@ -0,0 +1,85 @@
+import { entryAnatomy, partAttrs, scopeAttrs } from '@aeon-ui/core'
+import { forwardRef, type HTMLAttributes, type ReactNode } from 'react'
+import { mergeProps } from '../utils/merge-props.js'
+
+/** Card face — idle resting · selected highlight · muted de-emphasized. */
+export type EntryState = 'idle' | 'selected' | 'muted'
+
+export interface EntryListProps extends HTMLAttributes<HTMLDivElement> {
+  children?: ReactNode
+}
+
+/**
+ * Entry — compact multi-value content card.
+ * Compose feed posts, listings, and activity rows from the same zones.
+ * Machine: none (layout). Root projects idle | selected | muted.
+ */
+const List = forwardRef<HTMLDivElement, EntryListProps>(function EntryList(
+  { children, ...rest },
+  ref,
+) {
+  return (
+    <div
+      ref={ref}
+      {...mergeProps(scopeAttrs(entryAnatomy.scope, entryAnatomy.list), rest)}
+    >
+      {children}
+    </div>
+  )
+})
+
+export interface EntryRootProps extends HTMLAttributes<HTMLElement> {
+  as?: 'article' | 'div' | 'li' | 'section'
+  state?: EntryState
+  children?: ReactNode
+}
+
+const Root = forwardRef<HTMLElement, EntryRootProps>(function EntryRoot(
+  { as: Tag = 'article', state = 'idle', children, ...rest },
+  ref,
+) {
+  return (
+    <Tag
+      ref={ref as never}
+      {...mergeProps(scopeAttrs(entryAnatomy.scope, entryAnatomy.root, { state }), rest)}
+    >
+      {children}
+    </Tag>
+  )
+})
+
+function Part(
+  part: string,
+  displayName: string,
+  defaultTag: 'div' | 'span' | 'header' | 'footer' | 'p' = 'div',
+) {
+  const Comp = forwardRef<HTMLElement, HTMLAttributes<HTMLElement> & { as?: typeof defaultTag }>(
+    function EntryPart({ as: Tag = defaultTag, ...props }, ref) {
+      return (
+        <Tag
+          ref={ref as never}
+          {...mergeProps(partAttrs(entryAnatomy.scope, part), props)}
+        />
+      )
+    },
+  )
+  Comp.displayName = displayName
+  return Comp
+}
+
+export const Entry = {
+  List,
+  Root,
+  Header: Part(entryAnatomy.header, 'Entry.Header', 'header'),
+  Leading: Part(entryAnatomy.leading, 'Entry.Leading', 'div'),
+  Heading: Part(entryAnatomy.heading, 'Entry.Heading', 'div'),
+  Title: Part(entryAnatomy.title, 'Entry.Title', 'div'),
+  Subtitle: Part(entryAnatomy.subtitle, 'Entry.Subtitle', 'div'),
+  Meta: Part(entryAnatomy.meta, 'Entry.Meta', 'span'),
+  Media: Part(entryAnatomy.media, 'Entry.Media', 'div'),
+  Body: Part(entryAnatomy.body, 'Entry.Body', 'div'),
+  Values: Part(entryAnatomy.values, 'Entry.Values', 'div'),
+  Value: Part(entryAnatomy.value, 'Entry.Value', 'span'),
+  Actions: Part(entryAnatomy.actions, 'Entry.Actions', 'div'),
+  Footer: Part(entryAnatomy.footer, 'Entry.Footer', 'footer'),
+}

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

@@ -1,4 +1,4 @@
-import { fieldAnatomy, partAttrs, partOnlyAttrs, stateToAttr } from '@aeon-ui/core'
+import { fieldAnatomy, fieldFace, fieldRegions, partAttrs, partOnlyAttrs } from '@aeon-ui/core'
 import { fieldMachine } from '@aeon-ui/primitives'
 import {
   createContext,
@@ -16,7 +16,13 @@ import { useAeonMachine } from '../hooks/use-aeon-machine.js'
 import { mergeProps } from '../utils/merge-props.js'
 
 interface FieldContextValue {
+  /** Primary visual face — idle | dirty | invalid | pending (same hierarchy as Button). */
+  face: ReturnType<typeof fieldFace>
+  /** @deprecated Use `face` — kept as an alias for older callers. */
   stateAttr: string
+  interaction: string
+  validation: string
+  submission: string
   send: ReturnType<typeof useAeonMachine<typeof fieldMachine>>[1]
   invalid: boolean
   pending: boolean
@@ -41,21 +47,23 @@ const Root = forwardRef<HTMLDivElement, FieldRootProps>(function FieldRoot(
   ref,
 ) {
   const [snapshot, send] = useAeonMachine(fieldMachine)
-  const stateAttr = stateToAttr(snapshot.value)
-  const invalid =
-    typeof snapshot.value === 'object' &&
-    snapshot.value !== null &&
-    'validation' in snapshot.value &&
-    (snapshot.value as { validation: string }).validation === 'invalid'
-  const pending =
-    typeof snapshot.value === 'object' &&
-    snapshot.value !== null &&
-    'submission' in snapshot.value &&
-    (snapshot.value as { submission: string }).submission === 'pending'
+  const face = fieldFace(snapshot.value)
+  const regions = fieldRegions(snapshot.value)
+  const invalid = regions.validation === 'invalid'
+  const pending = regions.submission === 'pending'
 
   const value = useMemo(
-    () => ({ stateAttr, send, invalid, pending }),
-    [stateAttr, send, invalid, pending],
+    () => ({
+      face,
+      stateAttr: face,
+      interaction: regions.interaction,
+      validation: regions.validation,
+      submission: regions.submission,
+      send,
+      invalid,
+      pending,
+    }),
+    [face, regions.interaction, regions.validation, regions.submission, send, invalid, pending],
   )
 
   return (
@@ -64,7 +72,10 @@ const Root = forwardRef<HTMLDivElement, FieldRootProps>(function FieldRoot(
         ref={ref}
         id={id}
         className={className}
-        {...partAttrs(fieldAnatomy.scope, fieldAnatomy.root, { state: stateAttr })}
+        data-aeon-interaction={regions.interaction}
+        data-aeon-validation={regions.validation}
+        data-aeon-submission={regions.submission}
+        {...partAttrs(fieldAnatomy.scope, fieldAnatomy.root, { state: face })}
       >
         {children}
       </div>
@@ -148,7 +159,7 @@ const Textarea = forwardRef<HTMLTextAreaElement, FieldTextareaProps>(function Fi
 })
 
 const Message = forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraphElement>>(
-  function FieldMessage(props, ref) {
+  function FieldMessage({ children, ...props }, ref) {
     const { invalid } = useFieldContext()
     if (!invalid) return null
     return (
@@ -157,7 +168,9 @@ const Message = forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagr
         role="alert"
         {...partOnlyAttrs(fieldAnatomy.message, { state: 'invalid' })}
         {...props}
-      />
+      >
+        {children ?? 'Check this field.'}
+      </p>
     )
   },
 )
@@ -168,5 +181,5 @@ const Hint = forwardRef<HTMLParagraphElement, React.HTMLAttributes<HTMLParagraph
   },
 )
 
-export const Field = { Root, Label, Control, Textarea, Message, Hint }
+export const Field = { Root, Label, Control, Input: Control, Textarea, Message, Hint }
 export { fieldMachine }

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

@@ -0,0 +1,110 @@
+import { identityAnatomy, partAttrs, scopeAttrs } from '@aeon-ui/core'
+import { createContext, forwardRef, useContext, type HTMLAttributes, type ReactNode } from 'react'
+import { mergeProps } from '../utils/merge-props.js'
+
+interface IdentityContextValue {
+  size: 'sm' | 'md' | 'lg'
+}
+
+const IdentityCtx = createContext<IdentityContextValue | null>(null)
+
+function useIdentityCtx() {
+  const ctx = useContext(IdentityCtx)
+  if (!ctx) throw new Error('Identity parts must be used within Identity.Root')
+  return ctx
+}
+
+export interface IdentityRootProps extends HTMLAttributes<HTMLElement> {
+  as?: 'div' | 'a' | 'button'
+  size?: 'sm' | 'md' | 'lg'
+  children?: ReactNode
+}
+
+/**
+ * Identity — avatar + title + subtitle strip.
+ * Presentational compound; maximize width via truncate (`min-w-0`).
+ */
+const Root = forwardRef<HTMLElement, IdentityRootProps>(function IdentityRoot(
+  { as: Tag = 'div', size = 'md', children, ...rest },
+  ref,
+) {
+  return (
+    <IdentityCtx.Provider value={{ size }}>
+      <Tag
+        ref={ref as never}
+        data-aeon-size={size}
+        {...mergeProps(scopeAttrs(identityAnatomy.scope, identityAnatomy.root), rest)}
+      >
+        {children}
+      </Tag>
+    </IdentityCtx.Provider>
+  )
+})
+
+const AvatarSlot = forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>(
+  function IdentityAvatar(props, ref) {
+    useIdentityCtx()
+    return (
+      <span
+        ref={ref}
+        {...mergeProps(partAttrs(identityAnatomy.scope, identityAnatomy.avatar), props)}
+      />
+    )
+  },
+)
+
+const Title = forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>(function IdentityTitle(
+  props,
+  ref,
+) {
+  useIdentityCtx()
+  return (
+    <span
+      ref={ref}
+      {...mergeProps(partAttrs(identityAnatomy.scope, identityAnatomy.title), props)}
+    />
+  )
+})
+
+const Subtitle = forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>(
+  function IdentitySubtitle(props, ref) {
+    useIdentityCtx()
+    return (
+      <span
+        ref={ref}
+        {...mergeProps(partAttrs(identityAnatomy.scope, identityAnatomy.subtitle), props)}
+      />
+    )
+  },
+)
+
+const Meta = forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>(function IdentityMeta(
+  props,
+  ref,
+) {
+  useIdentityCtx()
+  return (
+    <span ref={ref} {...mergeProps(partAttrs(identityAnatomy.scope, identityAnatomy.meta), props)} />
+  )
+})
+
+const Trailing = forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>(
+  function IdentityTrailing(props, ref) {
+    useIdentityCtx()
+    return (
+      <span
+        ref={ref}
+        {...mergeProps(partAttrs(identityAnatomy.scope, identityAnatomy.trailing), props)}
+      />
+    )
+  },
+)
+
+export const Identity = {
+  Root,
+  Avatar: AvatarSlot,
+  Title,
+  Subtitle,
+  Meta,
+  Trailing,
+}

package/packages/react/src/index.ts

@@ -18,6 +18,21 @@ export * from './popover/index.js'
 export * from './menu/index.js'
 export * from './tooltip/index.js'
 export * from './toast/index.js'
+export * from './theme-switcher/index.js'
 export * from './avatar/index.js'
+export * from './identity/index.js'
+export * from './metric-strip/index.js'
+export * from './list-row/index.js'
+export * from './entry/index.js'
+export * from './conversation/index.js'
+export * from './thread/index.js'
+export * from './composer/index.js'
+export * from './profile-header/index.js'
+export * from './bar/index.js'
+export * from './panel/index.js'
+export * from './app-shell/index.js'
+export * from './content/index.js'
+export * from './nav/index.js'
+export * from './sticky-bar/index.js'
 export { useAeonMachine } from './hooks/use-aeon-machine.js'
 export { useLayoutMode } from './hooks/use-layout-mode.js'

package/packages/react/src/list-row/index.tsx

@@ -0,0 +1,80 @@
+import { listRowAnatomy, partAttrs, scopeAttrs } from '@aeon-ui/core'
+import { forwardRef, type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from 'react'
+import { mergeProps } from '../utils/merge-props.js'
+
+export interface ListRowRootProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  as?: 'button' | 'div' | 'a'
+  children?: ReactNode
+}
+
+/**
+ * ListRow — settings / account menu row.
+ * Leading icon · label · optional description · trailing control.
+ * Full-width hit target (~h-12).
+ */
+const Root = forwardRef<HTMLElement, ListRowRootProps>(function ListRowRoot(
+  { as: Tag = 'button', type, children, ...rest },
+  ref,
+) {
+  const buttonType = Tag === 'button' ? (type ?? 'button') : undefined
+  return (
+    <Tag
+      ref={ref as never}
+      type={buttonType as never}
+      {...mergeProps(scopeAttrs(listRowAnatomy.scope, listRowAnatomy.root), rest)}
+    >
+      {children}
+    </Tag>
+  )
+})
+
+const Leading = forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>(function ListRowLeading(
+  props,
+  ref,
+) {
+  return (
+    <span
+      ref={ref}
+      {...mergeProps(partAttrs(listRowAnatomy.scope, listRowAnatomy.leading), props)}
+    />
+  )
+})
+
+const Label = forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>(function ListRowLabel(
+  props,
+  ref,
+) {
+  return (
+    <span ref={ref} {...mergeProps(partAttrs(listRowAnatomy.scope, listRowAnatomy.label), props)} />
+  )
+})
+
+const Description = forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>(
+  function ListRowDescription(props, ref) {
+    return (
+      <span
+        ref={ref}
+        {...mergeProps(partAttrs(listRowAnatomy.scope, listRowAnatomy.description), props)}
+      />
+    )
+  },
+)
+
+const Trailing = forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>(
+  function ListRowTrailing(props, ref) {
+    return (
+      <span
+        ref={ref}
+        {...mergeProps(partAttrs(listRowAnatomy.scope, listRowAnatomy.trailing), props)}
+      />
+    )
+  },
+)
+
+export const ListRow = {
+  Root,
+  Leading,
+  Label,
+  Description,
+  Trailing,
+}