aeon-ui-engine 1.0.3 → 1.2.0

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

@@ -0,0 +1,101 @@
+import { barAnatomy, partAttrs, scopeAttrs } from '@aeon-ui/core'
+import { createContext, forwardRef, type HTMLAttributes } from 'react'
+import { mergeProps } from '../utils/merge-props.js'
+
+/* ------------------------------------------------------------------ */
+/*  Context                                                            */
+/* ------------------------------------------------------------------ */
+
+interface BarContextValue {
+  gap?: string
+}
+
+const BarContext = createContext<BarContextValue>({})
+
+/* ------------------------------------------------------------------ */
+/*  Root                                                               */
+/* ------------------------------------------------------------------ */
+
+export interface BarRootProps extends HTMLAttributes<HTMLDivElement> {
+  /** HTML element to render — defaults to `'header'`. */
+  as?: 'header' | 'nav' | 'footer' | 'div'
+  /** Flex gap between zones. */
+  gap?: string
+}
+
+const Root = forwardRef<HTMLDivElement, BarRootProps>(function BarRoot(
+  { as: Tag = 'header', gap, children, ...rest },
+  ref,
+) {
+  return (
+    <BarContext.Provider value={{ gap }}>
+      <Tag
+        ref={ref as never}
+        {...mergeProps(scopeAttrs(barAnatomy.scope, barAnatomy.root), rest)}
+      >
+        {children}
+      </Tag>
+    </BarContext.Provider>
+  )
+})
+
+/* ------------------------------------------------------------------ */
+/*  Zone (Leading / Center / Trailing)                                 */
+/* ------------------------------------------------------------------ */
+
+type Zone = 'leading' | 'center' | 'trailing'
+
+interface ZoneProps extends HTMLAttributes<HTMLDivElement> {
+  /** Which zone — controls flex behavior. */
+  zone: Zone
+}
+
+const Zone = forwardRef<HTMLDivElement, ZoneProps>(function BarZone(
+  { zone, children, ...rest },
+  ref,
+) {
+  return (
+    <div
+      ref={ref}
+      {...mergeProps(partAttrs(barAnatomy.scope, zone), rest)}
+    >
+      {children}
+    </div>
+  )
+})
+
+/* ------------------------------------------------------------------ */
+/*  Public API                                                         */
+/* ------------------------------------------------------------------ */
+
+/**
+ * Bar — horizontal layout primitive for toolbars, headers, footers.
+ *
+ * Guarantees no overlap by enforcing a three-zone flex contract:
+ * - **Leading** — `flex: 0 1 auto`, shrinks before overflowing.
+ * - **Center** — `flex: 1 1 0`, absorbs available space, truncates.
+ * - **Trailing** — `flex: 0 1 auto`, shrinks before overflowing.
+ *
+ * The root is always `display: flex; flex-wrap: nowrap` with
+ * `overflow: hidden` so children can never escape the bar boundary.
+ * Responsive collapse is handled by the Panda recipe (min-widths, wrap
+ * at breakpoints) — never by ad-hoc CSS.
+ */
+export const Bar = {
+  Root,
+  Leading: forwardRef<HTMLDivElement, Omit<ZoneProps, 'zone'>>(
+    function BarLeading(props, ref) {
+      return <Zone ref={ref} zone="leading" {...props} />
+    },
+  ),
+  Center: forwardRef<HTMLDivElement, Omit<ZoneProps, 'zone'>>(
+    function BarCenter(props, ref) {
+      return <Zone ref={ref} zone="center" {...props} />
+    },
+  ),
+  Trailing: forwardRef<HTMLDivElement, Omit<ZoneProps, 'zone'>>(
+    function BarTrailing(props, ref) {
+      return <Zone ref={ref} zone="trailing" {...props} />
+    },
+  ),
+}

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

@@ -19,12 +19,14 @@ const Root = forwardRef<HTMLButtonElement, ButtonRootProps>(function ButtonRoot(
 ) {
   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'
 
   return (
     <button
       ref={ref}
       type="button"
-      disabled={disabled || isBusy || resolvedStatus === 'disabled'}
+      disabled={disabled || isBusy || isLocked || resolvedStatus === 'disabled'}
       aria-busy={isBusy || undefined}
       className={className}
       data-aeon-variant={variant}
@@ -32,7 +34,7 @@ const Root = forwardRef<HTMLButtonElement, ButtonRootProps>(function ButtonRoot(
       {...mergeProps(
         partAttrs(buttonAnatomy.scope, buttonAnatomy.root, {
           state: resolvedStatus,
-          disabled: Boolean(disabled || resolvedStatus === 'disabled'),
+          disabled: Boolean(disabled || resolvedStatus === 'disabled' || isLocked),
         }),
         rest,
       )}

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/hooks/use-fit-text.ts

@@ -0,0 +1,59 @@
+import { useLayoutEffect, type RefObject } from 'react'
+
+export type FitTextOptions = {
+  maxPx?: number
+  minPx?: number
+  /** Re-run when this value changes (e.g. display string). */
+  watch?: unknown
+}
+
+/**
+ * Shrink font-size (then scale) so `contentRef` fits inside `slotRef`
+ * without expanding parent layout. Universal for balance rows, titles, tickers.
+ */
+export function useFitText(
+  slotRef: RefObject<HTMLElement | null>,
+  contentRef: RefObject<HTMLElement | null>,
+  opts: FitTextOptions = {},
+) {
+  const maxPx = opts.maxPx ?? 28
+  const minPx = opts.minPx ?? 8
+  const watch = opts.watch
+
+  useLayoutEffect(() => {
+    const slot = slotRef.current
+    const content = contentRef.current
+    if (!slot || !content) return
+
+    const fit = () => {
+      const available = slot.clientWidth
+      if (available <= 0) return
+
+      content.style.transform = ''
+      content.style.transformOrigin = ''
+      content.style.fontSize = `${maxPx}px`
+
+      let size = maxPx
+      while (size > minPx && content.scrollWidth > available + 0.5) {
+        size -= 0.5
+        content.style.fontSize = `${size}px`
+      }
+
+      if (content.scrollWidth > available + 0.5) {
+        const scale = Math.max(0.35, available / content.scrollWidth)
+        content.style.transformOrigin = 'center center'
+        content.style.transform = `scale(${scale})`
+      }
+    }
+
+    fit()
+    const ro = new ResizeObserver(fit)
+    ro.observe(slot)
+    return () => {
+      ro.disconnect()
+      content.style.fontSize = ''
+      content.style.transform = ''
+      content.style.transformOrigin = ''
+    }
+  }, [slotRef, contentRef, maxPx, minPx, watch])
+}