aeon-ui-engine 1.0.3 → 1.1.0

package/packages/react/node_modules/.bin/esbuild

@@ -0,0 +1,21 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/Users/brandoncryderman/AeonUI/node_modules/.pnpm/esbuild@0.28.0/node_modules/esbuild/bin/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/esbuild@0.28.0/node_modules/esbuild/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/esbuild@0.28.0/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/Users/brandoncryderman/AeonUI/node_modules/.pnpm/esbuild@0.28.0/node_modules/esbuild/bin/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/esbuild@0.28.0/node_modules/esbuild/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/esbuild@0.28.0/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../../../../node_modules/.pnpm/esbuild@0.28.0/node_modules/esbuild/bin/esbuild" "$@"
+else
+  exec node  "$basedir/../../../../node_modules/.pnpm/esbuild@0.28.0/node_modules/esbuild/bin/esbuild" "$@"
+fi

package/packages/react/node_modules/.bin/vite

@@ -0,0 +1,21 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/Users/brandoncryderman/AeonUI/node_modules/.pnpm/vite@8.0.16_@types+node@22.19.19_esbuild@0.28.0_jiti@2.7.0_tsx@4.22.3/node_modules/vite/bin/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/vite@8.0.16_@types+node@22.19.19_esbuild@0.28.0_jiti@2.7.0_tsx@4.22.3/node_modules/vite/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/vite@8.0.16_@types+node@22.19.19_esbuild@0.28.0_jiti@2.7.0_tsx@4.22.3/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/Users/brandoncryderman/AeonUI/node_modules/.pnpm/vite@8.0.16_@types+node@22.19.19_esbuild@0.28.0_jiti@2.7.0_tsx@4.22.3/node_modules/vite/bin/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/vite@8.0.16_@types+node@22.19.19_esbuild@0.28.0_jiti@2.7.0_tsx@4.22.3/node_modules/vite/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/vite@8.0.16_@types+node@22.19.19_esbuild@0.28.0_jiti@2.7.0_tsx@4.22.3/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../../../../node_modules/.pnpm/vite@8.0.16_@types+node@22.19.19_esbuild@0.28.0_jiti@2.7.0_tsx@4.22.3/node_modules/vite/bin/vite.js" "$@"
+else
+  exec node  "$basedir/../../../../node_modules/.pnpm/vite@8.0.16_@types+node@22.19.19_esbuild@0.28.0_jiti@2.7.0_tsx@4.22.3/node_modules/vite/bin/vite.js" "$@"
+fi

package/packages/react/node_modules/.bin/vitest

@@ -10,9 +10,9 @@ case `uname` in
 esac
 
 if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/Users/brandoncryderman/AeonUI/node_modules/.pnpm/vitest@3.2.4_@types+node@22.19.19_jiti@2.7.0_jsdom@26.1.0_lightningcss@1.32.0_tsx@4.22.3/node_modules/vitest/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/vitest@3.2.4_@types+node@22.19.19_jiti@2.7.0_jsdom@26.1.0_lightningcss@1.32.0_tsx@4.22.3/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/Users/brandoncryderman/AeonUI/node_modules/.pnpm/vitest@4.1.8_@types+node@22.19.19_jsdom@29.1.1_vite@8.0.16_@types+node@22.19.19_esbuild@0.28.0_jiti@2.7.0_tsx@4.22.3_/node_modules/vitest/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/vitest@4.1.8_@types+node@22.19.19_jsdom@29.1.1_vite@8.0.16_@types+node@22.19.19_esbuild@0.28.0_jiti@2.7.0_tsx@4.22.3_/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/node_modules"
 else
-  export NODE_PATH="/Users/brandoncryderman/AeonUI/node_modules/.pnpm/vitest@3.2.4_@types+node@22.19.19_jiti@2.7.0_jsdom@26.1.0_lightningcss@1.32.0_tsx@4.22.3/node_modules/vitest/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/vitest@3.2.4_@types+node@22.19.19_jiti@2.7.0_jsdom@26.1.0_lightningcss@1.32.0_tsx@4.22.3/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/node_modules:$NODE_PATH"
+  export NODE_PATH="/Users/brandoncryderman/AeonUI/node_modules/.pnpm/vitest@4.1.8_@types+node@22.19.19_jsdom@29.1.1_vite@8.0.16_@types+node@22.19.19_esbuild@0.28.0_jiti@2.7.0_tsx@4.22.3_/node_modules/vitest/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/vitest@4.1.8_@types+node@22.19.19_jsdom@29.1.1_vite@8.0.16_@types+node@22.19.19_esbuild@0.28.0_jiti@2.7.0_tsx@4.22.3_/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/node_modules:$NODE_PATH"
 fi
 if [ -x "$basedir/node" ]; then
   exec "$basedir/node"  "$basedir/../vitest/vitest.mjs" "$@"

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

@@ -1 +1 @@
-{"version":"3.2.4","results":[[":src/select/select.test.tsx",{"duration":129.68645800000002,"failed":false}],[":src/dialog/dialog.test.tsx",{"duration":85.993334,"failed":false}],[":src/avatar/avatar.test.tsx",{"duration":55.48012499999993,"failed":false}],[":src/tooltip/tooltip.test.tsx",{"duration":139.61970800000006,"failed":false}],[":src/toast/toast.test.tsx",{"duration":78.39379199999996,"failed":false}]]}
+{"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}]]}

package/packages/react/package.json

@@ -8,9 +8,20 @@
     "url": "https://github.com/GenericCPU/aeon-ui.git",
     "directory": "packages/react"
   },
-  "publishConfig": { "access": "public" },
-  "files": ["dist", "README.md"],
-  "keywords": ["aeon-ui", "react", "headless", "xstate", "statechart"],
+  "publishConfig": {
+    "access": "public"
+  },
+  "files": [
+    "dist",
+    "README.md"
+  ],
+  "keywords": [
+    "aeon-ui",
+    "react",
+    "headless",
+    "xstate",
+    "statechart"
+  ],
   "type": "module",
   "sideEffects": false,
   "main": "./dist/index.js",
@@ -29,8 +40,8 @@
   "dependencies": {
     "@aeon-ui/core": "workspace:*",
     "@aeon-ui/primitives": "workspace:*",
-    "@xstate/react": "^5.0.3",
-    "xstate": "^5.19.2"
+    "@xstate/react": "^6.1.0",
+    "xstate": "^5.32.0"
   },
   "peerDependencies": {
     "react": "^18 || ^19",
@@ -42,11 +53,11 @@
     "@testing-library/user-event": "^14.6.1",
     "@types/react": "^19.1.2",
     "@types/react-dom": "^19.1.2",
-    "jsdom": "^26.1.0",
+    "jsdom": "^29.1.1",
     "react": "^19.1.0",
     "react-dom": "^19.1.0",
     "tsup": "^8.4.0",
     "typescript": "^5.8.3",
-    "vitest": "^3.2.4"
+    "vitest": "^4.1.8"
   }
 }

package/packages/react/src/app-shell/index.tsx

@@ -0,0 +1,154 @@
+import { appShellAnatomy, partAttrs, scopeAttrs } from '@aeon-ui/core'
+import { appShellMachine } from '@aeon-ui/primitives'
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useEffect,
+  useMemo,
+  type HTMLAttributes,
+  type ReactNode,
+} from 'react'
+import { useAeonMachine } from '../hooks/use-aeon-machine.js'
+import { mergeProps } from '../utils/merge-props.js'
+
+type AppShellChrome = 'idle' | 'overlayOpen'
+
+interface AppShellContextValue {
+  chrome: AppShellChrome
+  dockVisible: boolean
+  overlayOpen: boolean
+  send: ReturnType<typeof useAeonMachine<typeof appShellMachine>>[1]
+}
+
+const AppShellCtx = createContext<AppShellContextValue | null>(null)
+
+export function useAppShellContext() {
+  const ctx = useContext(AppShellCtx)
+  if (!ctx) throw new Error('AppShell parts must be used within AppShell.Root')
+  return ctx
+}
+
+export interface AppShellRootProps extends HTMLAttributes<HTMLDivElement> {
+  /** Initial dock visibility when uncontrolled. */
+  defaultDockVisible?: boolean
+  /** Controlled dock visibility — syncs into the shell machine. */
+  dockVisible?: boolean
+  children?: ReactNode
+}
+
+const Root = forwardRef<HTMLDivElement, AppShellRootProps>(function AppShellRoot(
+  { defaultDockVisible = true, dockVisible: dockVisibleProp, children, ...rest },
+  ref,
+) {
+  const [snapshot, send] = useAeonMachine(appShellMachine, {
+    input: { dockVisible: dockVisibleProp ?? defaultDockVisible },
+  })
+  const chrome = snapshot.value as AppShellChrome
+  const dockVisible = dockVisibleProp ?? snapshot.context.dockVisible
+
+  useEffect(() => {
+    if (dockVisibleProp === undefined) return
+    if (snapshot.context.dockVisible !== dockVisibleProp) {
+      send({ type: 'SET_DOCK', visible: dockVisibleProp })
+    }
+  }, [dockVisibleProp, snapshot.context.dockVisible, send])
+
+  const value = useMemo(
+    () => ({
+      chrome,
+      dockVisible,
+      overlayOpen: chrome === 'overlayOpen',
+      send,
+    }),
+    [chrome, dockVisible, send],
+  )
+
+  return (
+    <AppShellCtx.Provider value={value}>
+      <div
+        ref={ref}
+        data-aeon-dock={dockVisible ? 'visible' : 'hidden'}
+        {...mergeProps(
+          scopeAttrs(appShellAnatomy.scope, appShellAnatomy.root, { state: chrome }),
+          rest,
+        )}
+      >
+        {children}
+      </div>
+    </AppShellCtx.Provider>
+  )
+})
+
+function ShellPart(
+  part: string,
+  displayName: string,
+  defaultTag: 'div' | 'header' | 'footer' | 'aside' | 'main' = 'div',
+) {
+  const Comp = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement> & { as?: typeof defaultTag }>(
+    function AeonShellPart({ as: Tag = defaultTag, ...rest }, ref) {
+      const { chrome } = useAppShellContext()
+      return (
+        <Tag
+          ref={ref as never}
+          {...mergeProps(partAttrs(appShellAnatomy.scope, part, { state: chrome }), rest)}
+        />
+      )
+    },
+  )
+  Comp.displayName = displayName
+  return Comp
+}
+
+const Header = ShellPart(appShellAnatomy.header, 'AppShell.Header', 'header')
+const Subheader = ShellPart(appShellAnatomy.subheader, 'AppShell.Subheader')
+const Content = ShellPart(appShellAnatomy.content, 'AppShell.Content', 'main')
+const Aside = ShellPart(appShellAnatomy.aside, 'AppShell.Aside', 'aside')
+const Footer = ShellPart(appShellAnatomy.footer, 'AppShell.Footer', 'footer')
+
+const Dock = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function AppShellDock(
+  { hidden, ...rest },
+  ref,
+) {
+  const { chrome, dockVisible } = useAppShellContext()
+  if (!dockVisible) return null
+  return (
+    <div
+      ref={ref}
+      hidden={hidden}
+      {...mergeProps(partAttrs(appShellAnatomy.scope, appShellAnatomy.dock, { state: chrome }), rest)}
+    />
+  )
+})
+
+const Scrim = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function AppShellScrim(
+  props,
+  ref,
+) {
+  const { chrome, overlayOpen, send } = useAppShellContext()
+  if (!overlayOpen) return null
+  return (
+    <div
+      ref={ref}
+      role="presentation"
+      onClick={() => send({ type: 'CLOSE_OVERLAY' })}
+      {...mergeProps(partAttrs(appShellAnatomy.scope, appShellAnatomy.scrim, { state: chrome }), props)}
+    />
+  )
+})
+
+/**
+ * AppShell — application chrome frame.
+ * Machine: idle | overlayOpen (+ dockVisible context).
+ * UI = f(snapshot): content dims / scrim when overlayOpen; dock hides when dockVisible=false.
+ */
+export const AppShell = {
+  Root,
+  Header,
+  Subheader,
+  Content,
+  Aside,
+  Footer,
+  Dock,
+  Scrim,
+}

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

@@ -5,13 +5,18 @@ import { AsyncRoot } from './root.js'
 import { AsyncTrack } from './track.js'
 
 export { AsyncProvider, useAsyncContext } from './context.js'
+export { asyncStatusToContentState } from './map-content-state.js'
 export { AsyncTrack } from './track.js'
 export { AsyncReadout } from './readout.js'
 export { AsyncActions } from './actions.js'
 export { AsyncRoot } from './root.js'
-export { AsyncRegion } from './legacy-region.js'
 export { createAsyncMachine } from '@aeon-ui/primitives'
 
+/**
+ * Async — fetch lifecycle driver (`createAsyncMachine`).
+ * Product UI: project status with Content slots via `asyncStatusToContentState`.
+ * `Track` is a totality/debug rail — not Instant default (see docs/PRIMITIVE_COVERAGE.md).
+ */
 export const Async = {
   Root: AsyncRoot,
   Provider: AsyncProvider,

package/packages/react/src/async/map-content-state.ts

@@ -0,0 +1,18 @@
+import type { ContentRegionState } from '@aeon-ui/primitives'
+
+/** Map async machine leaf → Content face (product UI — not Track). */
+export function asyncStatusToContentState(status: string): ContentRegionState {
+  switch (status) {
+    case 'loading':
+      return 'pending'
+    case 'empty':
+      return 'empty'
+    case 'failure':
+      return 'error'
+    case 'success':
+      return 'success'
+    case 'idle':
+    default:
+      return 'idle'
+  }
+}

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

@@ -115,8 +115,27 @@ const Fallback = forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>(fu
   )
 })
 
+export type PresenceState = 'idle' | 'active' | 'away' | 'busy' | 'offline'
+
+const Badge = forwardRef<
+  HTMLSpanElement,
+  HTMLAttributes<HTMLSpanElement> & { presence?: PresenceState }
+>(function AvatarBadge({ presence = 'idle', className, ...rest }, ref) {
+  useAvatarCtx()
+  return (
+    <span
+      ref={ref}
+      data-aeon-presence={presence}
+      {...partAttrs(avatarAnatomy.scope, avatarAnatomy.badge, { state: presence })}
+      className={className}
+      {...rest}
+    />
+  )
+})
+
 export const Avatar = {
   Root,
   Image,
   Fallback,
+  Badge,
 }

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,
+}