aeon-ui-engine 1.0.2 → 1.1.0

package/packages/ui/node_modules/.bin/jiti

@@ -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/jiti@2.7.0/node_modules/jiti/lib/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/jiti@2.7.0/node_modules/jiti/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/jiti@2.7.0/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/Users/brandoncryderman/AeonUI/node_modules/.pnpm/jiti@2.7.0/node_modules/jiti/lib/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/jiti@2.7.0/node_modules/jiti/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/jiti@2.7.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/jiti@2.7.0/node_modules/jiti/lib/jiti-cli.mjs" "$@"
+else
+  exec node  "$basedir/../../../../node_modules/.pnpm/jiti@2.7.0/node_modules/jiti/lib/jiti-cli.mjs" "$@"
+fi

package/packages/ui/node_modules/.bin/tsc

@@ -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/typescript@5.9.3/node_modules/typescript/bin/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/typescript@5.9.3/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/Users/brandoncryderman/AeonUI/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/bin/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/typescript@5.9.3/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../typescript/bin/tsc" "$@"
+else
+  exec node  "$basedir/../typescript/bin/tsc" "$@"
+fi

package/packages/ui/node_modules/.bin/tsserver

@@ -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/typescript@5.9.3/node_modules/typescript/bin/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/typescript@5.9.3/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/Users/brandoncryderman/AeonUI/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/bin/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/typescript@5.9.3/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../typescript/bin/tsserver" "$@"
+else
+  exec node  "$basedir/../typescript/bin/tsserver" "$@"
+fi

package/packages/ui/node_modules/.bin/tsup

@@ -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/tsup@8.5.1_jiti@2.7.0_postcss@8.5.15_tsx@4.22.3_typescript@5.9.3/node_modules/tsup/dist/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/tsup@8.5.1_jiti@2.7.0_postcss@8.5.15_tsx@4.22.3_typescript@5.9.3/node_modules/tsup/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/tsup@8.5.1_jiti@2.7.0_postcss@8.5.15_tsx@4.22.3_typescript@5.9.3/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/Users/brandoncryderman/AeonUI/node_modules/.pnpm/tsup@8.5.1_jiti@2.7.0_postcss@8.5.15_tsx@4.22.3_typescript@5.9.3/node_modules/tsup/dist/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/tsup@8.5.1_jiti@2.7.0_postcss@8.5.15_tsx@4.22.3_typescript@5.9.3/node_modules/tsup/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/tsup@8.5.1_jiti@2.7.0_postcss@8.5.15_tsx@4.22.3_typescript@5.9.3/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../tsup/dist/cli-default.js" "$@"
+else
+  exec node  "$basedir/../tsup/dist/cli-default.js" "$@"
+fi

package/packages/ui/node_modules/.bin/tsup-node

@@ -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/tsup@8.5.1_jiti@2.7.0_postcss@8.5.15_tsx@4.22.3_typescript@5.9.3/node_modules/tsup/dist/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/tsup@8.5.1_jiti@2.7.0_postcss@8.5.15_tsx@4.22.3_typescript@5.9.3/node_modules/tsup/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/tsup@8.5.1_jiti@2.7.0_postcss@8.5.15_tsx@4.22.3_typescript@5.9.3/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/Users/brandoncryderman/AeonUI/node_modules/.pnpm/tsup@8.5.1_jiti@2.7.0_postcss@8.5.15_tsx@4.22.3_typescript@5.9.3/node_modules/tsup/dist/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/tsup@8.5.1_jiti@2.7.0_postcss@8.5.15_tsx@4.22.3_typescript@5.9.3/node_modules/tsup/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/tsup@8.5.1_jiti@2.7.0_postcss@8.5.15_tsx@4.22.3_typescript@5.9.3/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../tsup/dist/cli-node.js" "$@"
+else
+  exec node  "$basedir/../tsup/dist/cli-node.js" "$@"
+fi

package/packages/ui/node_modules/.bin/tsx

@@ -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/tsx@4.22.3/node_modules/tsx/dist/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/tsx@4.22.3/node_modules/tsx/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/tsx@4.22.3/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/Users/brandoncryderman/AeonUI/node_modules/.pnpm/tsx@4.22.3/node_modules/tsx/dist/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/tsx@4.22.3/node_modules/tsx/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/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/tsx@4.22.3/node_modules/tsx/dist/cli.mjs" "$@"
+else
+  exec node  "$basedir/../../../../node_modules/.pnpm/tsx@4.22.3/node_modules/tsx/dist/cli.mjs" "$@"
+fi

package/packages/ui/src/app-shell.tsx

@@ -0,0 +1,44 @@
+import { AppShell as Headless } from '@aeon-ui/react'
+import { aeonAppShell } from '@aeon-ui/panda/styled-system/recipes'
+import type { ComponentProps } from 'react'
+import { cn } from './cn.js'
+
+type ContentAlign = 'start' | 'center'
+type RootProps = ComponentProps<typeof Headless.Root>
+type PartProps = ComponentProps<typeof Headless.Content>
+type ContentProps = PartProps & { contentAlign?: ContentAlign }
+
+export const AppShell = {
+  Root: ({ className, ...props }: RootProps) => {
+    const styles = aeonAppShell()
+    return <Headless.Root className={cn(styles.root, className)} {...props} />
+  },
+  Header: ({ className, ...props }: PartProps) => {
+    const styles = aeonAppShell()
+    return <Headless.Header className={cn(styles.header, className)} {...props} />
+  },
+  Subheader: ({ className, ...props }: PartProps) => {
+    const styles = aeonAppShell()
+    return <Headless.Subheader className={cn(styles.subheader, className)} {...props} />
+  },
+  Content: ({ className, contentAlign = 'start', ...props }: ContentProps) => {
+    const styles = aeonAppShell({ contentAlign })
+    return <Headless.Content className={cn(styles.content, className)} {...props} />
+  },
+  Aside: ({ className, ...props }: PartProps) => {
+    const styles = aeonAppShell()
+    return <Headless.Aside className={cn(styles.aside, className)} {...props} />
+  },
+  Footer: ({ className, ...props }: PartProps) => {
+    const styles = aeonAppShell()
+    return <Headless.Footer className={cn(styles.footer, className)} {...props} />
+  },
+  Dock: ({ className, ...props }: PartProps) => {
+    const styles = aeonAppShell()
+    return <Headless.Dock className={cn(styles.dock, className)} {...props} />
+  },
+  Scrim: ({ className, ...props }: PartProps) => {
+    const styles = aeonAppShell()
+    return <Headless.Scrim className={cn(styles.scrim, className)} {...props} />
+  },
+}

package/packages/ui/src/async.tsx

@@ -13,8 +13,9 @@ type ActionsProps = ComponentProps<typeof Headless.Actions>
 export const Async = {
   Root: ({ className, ...props }: RootProps) => {
     const s = styles()
-    return <Headless.Root className={cn(s.root, 'machine-console', className)} {...props} />
+    return <Headless.Root className={cn(s.root, className)} {...props} />
   },
+  /** Totality / diagram rail — prefer Content faces in product Instant UIs. */
   Track: ({ className, ...props }: TrackProps) => {
     const s = styles()
     return <Headless.Track className={cn(s.track, 'state-track', className)} {...props} />

package/packages/ui/src/avatar.tsx

@@ -0,0 +1,35 @@
+import { Avatar as Headless } from '@aeon-ui/react'
+import { aeonAvatar } from '@aeon-ui/panda/styled-system/recipes'
+import type { ComponentProps } from 'react'
+import { cn } from './cn.js'
+
+type AvatarSize = 'xs' | 'sm' | 'md' | 'lg' | 'xl'
+
+type RootProps = ComponentProps<typeof Headless.Root> & {
+  size?: AvatarSize
+}
+
+export const Avatar = {
+  Root: ({ className, size = 'md', ...props }: RootProps) => {
+    const styles = aeonAvatar({ size })
+    return (
+      <Headless.Root
+        className={cn(styles.root, className)}
+        data-aeon-size={size}
+        {...props}
+      />
+    )
+  },
+  Image: ({ className, ...props }: ComponentProps<typeof Headless.Image>) => {
+    const styles = aeonAvatar()
+    return <Headless.Image className={cn(styles.image, className)} {...props} />
+  },
+  Fallback: ({ className, ...props }: ComponentProps<typeof Headless.Fallback>) => {
+    const styles = aeonAvatar()
+    return <Headless.Fallback className={cn(styles.fallback, className)} {...props} />
+  },
+  Badge: ({ className, ...props }: ComponentProps<typeof Headless.Badge>) => {
+    const styles = aeonAvatar()
+    return <Headless.Badge className={cn(styles.badge, className)} {...props} />
+  },
+}

package/packages/ui/src/bar.tsx

@@ -0,0 +1,34 @@
+import { Bar as Headless } from '@aeon-ui/react'
+import { aeonBar } from '@aeon-ui/panda/styled-system/recipes'
+import type { ComponentProps } from 'react'
+import { cn } from './cn.js'
+
+type BarSize = 'xs' | 'sm' | 'md' | 'lg'
+type BarCollapse = 'shrink' | 'wrap' | 'collapse-center'
+
+type RootProps = ComponentProps<typeof Headless.Root> & {
+  size?: BarSize
+  sticky?: boolean
+  collapse?: BarCollapse
+}
+
+type ZoneProps = ComponentProps<typeof Headless.Leading>
+
+export const Bar = {
+  Root: ({ className, size, sticky, collapse, ...props }: RootProps) => {
+    const styles = aeonBar({ size, sticky, collapse })
+    return <Headless.Root className={cn(styles.root, className)} {...props} />
+  },
+  Leading: ({ className, ...props }: ZoneProps) => {
+    const styles = aeonBar({})
+    return <Headless.Leading className={cn(styles.leading, className)} {...props} />
+  },
+  Center: ({ className, ...props }: ZoneProps) => {
+    const styles = aeonBar({})
+    return <Headless.Center className={cn(styles.center, className)} {...props} />
+  },
+  Trailing: ({ className, ...props }: ZoneProps) => {
+    const styles = aeonBar({})
+    return <Headless.Trailing className={cn(styles.trailing, className)} {...props} />
+  },
+}

package/packages/ui/src/composer.tsx

@@ -0,0 +1,27 @@
+import { Composer as Headless } from '@aeon-ui/react'
+import { aeonComposer } from '@aeon-ui/panda/styled-system/recipes'
+import type { ComponentProps } from 'react'
+import { cn } from './cn.js'
+
+type RootProps = ComponentProps<typeof Headless.Root>
+type InputProps = ComponentProps<typeof Headless.Input>
+type PartProps = ComponentProps<typeof Headless.Actions>
+
+export const Composer = {
+  Root: ({ className, ...props }: RootProps) => {
+    const styles = aeonComposer()
+    return <Headless.Root className={cn(styles.root, className)} {...props} />
+  },
+  Input: ({ className, ...props }: InputProps) => {
+    const styles = aeonComposer()
+    return <Headless.Input className={cn(styles.input, className)} {...props} />
+  },
+  Actions: ({ className, ...props }: PartProps) => {
+    const styles = aeonComposer()
+    return <Headless.Actions className={cn(styles.actions, className)} {...props} />
+  },
+  Send: ({ className, ...props }: PartProps) => {
+    const styles = aeonComposer()
+    return <Headless.Send className={cn(styles.send, className)} {...props} />
+  },
+}

package/packages/ui/src/content.tsx

@@ -0,0 +1,43 @@
+import { Content as Headless } from '@aeon-ui/react'
+import { aeonContent } from '@aeon-ui/panda/styled-system/recipes'
+import type { ComponentProps } from 'react'
+import { cn } from './cn.js'
+
+type Align = 'start' | 'center'
+type RootProps = ComponentProps<typeof Headless.Root> & { align?: Align }
+type PartProps = ComponentProps<typeof Headless.Body>
+
+export const Content = {
+  Root: ({ className, align = 'start', ...props }: RootProps) => {
+    const styles = aeonContent({ align })
+    return <Headless.Root className={cn(styles.root, className)} {...props} />
+  },
+  Toolbar: ({ className, ...props }: PartProps) => {
+    const styles = aeonContent()
+    return <Headless.Toolbar className={cn(styles.toolbar, className)} {...props} />
+  },
+  Body: ({ className, ...props }: PartProps) => {
+    const styles = aeonContent()
+    return <Headless.Body className={cn(styles.body, className)} {...props} />
+  },
+  Pending: ({ className, ...props }: PartProps) => {
+    const styles = aeonContent()
+    return <Headless.Pending className={cn(styles.pending, className)} {...props} />
+  },
+  Empty: ({ className, ...props }: PartProps) => {
+    const styles = aeonContent()
+    return <Headless.Empty className={cn(styles.empty, className)} {...props} />
+  },
+  Error: ({ className, ...props }: PartProps) => {
+    const styles = aeonContent()
+    return <Headless.Error className={cn(styles.error, className)} {...props} />
+  },
+  Success: ({ className, ...props }: PartProps) => {
+    const styles = aeonContent()
+    return <Headless.Success className={cn(styles.success, className)} {...props} />
+  },
+  Sentinel: ({ className, ...props }: PartProps) => {
+    const styles = aeonContent()
+    return <Headless.Sentinel className={cn(styles.sentinel, className)} {...props} />
+  },
+}

package/packages/ui/src/conversation.tsx

@@ -0,0 +1,43 @@
+import { Conversation as Headless } from '@aeon-ui/react'
+import { aeonConversation } from '@aeon-ui/panda/styled-system/recipes'
+import type { ComponentProps } from 'react'
+import { cn } from './cn.js'
+
+type RootProps = ComponentProps<typeof Headless.Root>
+type ItemProps = ComponentProps<typeof Headless.Item>
+type PartProps = ComponentProps<typeof Headless.Title>
+
+export const Conversation = {
+  Root: ({ className, ...props }: RootProps) => {
+    const styles = aeonConversation()
+    return <Headless.Root className={cn(styles.root, className)} {...props} />
+  },
+  Item: ({ className, ...props }: ItemProps) => {
+    const styles = aeonConversation()
+    return <Headless.Item className={cn(styles.item, className)} {...props} />
+  },
+  Leading: ({ className, ...props }: PartProps) => {
+    const styles = aeonConversation()
+    return <Headless.Leading className={cn(styles.leading, className)} {...props} />
+  },
+  Body: ({ className, ...props }: PartProps) => {
+    const styles = aeonConversation()
+    return <Headless.Body className={cn(styles.body, className)} {...props} />
+  },
+  Title: ({ className, ...props }: PartProps) => {
+    const styles = aeonConversation()
+    return <Headless.Title className={cn(styles.title, className)} {...props} />
+  },
+  Preview: ({ className, ...props }: PartProps) => {
+    const styles = aeonConversation()
+    return <Headless.Preview className={cn(styles.preview, className)} {...props} />
+  },
+  Meta: ({ className, ...props }: PartProps) => {
+    const styles = aeonConversation()
+    return <Headless.Meta className={cn(styles.meta, className)} {...props} />
+  },
+  Badge: ({ className, ...props }: PartProps) => {
+    const styles = aeonConversation()
+    return <Headless.Badge className={cn(styles.badge, className)} {...props} />
+  },
+}

package/packages/ui/src/entry.tsx

@@ -0,0 +1,76 @@
+import { Entry as Headless } from '@aeon-ui/react'
+import { aeonEntry } from '@aeon-ui/panda/styled-system/recipes'
+import type { ComponentProps } from 'react'
+import { cn } from './cn.js'
+
+type Density = 'compact' | 'cozy'
+type Layout = 'stack' | 'split'
+
+type ListProps = ComponentProps<typeof Headless.List> & {
+  density?: Density
+  layout?: Layout
+}
+type RootProps = ComponentProps<typeof Headless.Root> & {
+  density?: Density
+  layout?: Layout
+}
+type PartProps = ComponentProps<typeof Headless.Title>
+
+export const Entry = {
+  List: ({ className, density = 'compact', layout = 'stack', ...props }: ListProps) => {
+    const styles = aeonEntry({ density, layout })
+    return <Headless.List className={cn(styles.list, className)} {...props} />
+  },
+  Root: ({ className, density = 'compact', layout = 'stack', ...props }: RootProps) => {
+    const styles = aeonEntry({ density, layout })
+    return <Headless.Root className={cn(styles.root, className)} {...props} />
+  },
+  Header: ({ className, ...props }: PartProps) => {
+    const styles = aeonEntry()
+    return <Headless.Header className={cn(styles.header, className)} {...props} />
+  },
+  Leading: ({ className, ...props }: PartProps) => {
+    const styles = aeonEntry()
+    return <Headless.Leading className={cn(styles.leading, className)} {...props} />
+  },
+  Heading: ({ className, ...props }: PartProps) => {
+    const styles = aeonEntry()
+    return <Headless.Heading className={cn(styles.heading, className)} {...props} />
+  },
+  Title: ({ className, ...props }: PartProps) => {
+    const styles = aeonEntry()
+    return <Headless.Title className={cn(styles.title, className)} {...props} />
+  },
+  Subtitle: ({ className, ...props }: PartProps) => {
+    const styles = aeonEntry()
+    return <Headless.Subtitle className={cn(styles.subtitle, className)} {...props} />
+  },
+  Meta: ({ className, ...props }: PartProps) => {
+    const styles = aeonEntry()
+    return <Headless.Meta className={cn(styles.meta, className)} {...props} />
+  },
+  Media: ({ className, ...props }: PartProps) => {
+    const styles = aeonEntry()
+    return <Headless.Media className={cn(styles.media, className)} {...props} />
+  },
+  Body: ({ className, ...props }: PartProps) => {
+    const styles = aeonEntry()
+    return <Headless.Body className={cn(styles.body, className)} {...props} />
+  },
+  Values: ({ className, ...props }: PartProps) => {
+    const styles = aeonEntry()
+    return <Headless.Values className={cn(styles.values, className)} {...props} />
+  },
+  Value: ({ className, ...props }: PartProps) => {
+    const styles = aeonEntry()
+    return <Headless.Value className={cn(styles.value, className)} {...props} />
+  },
+  Actions: ({ className, ...props }: PartProps) => {
+    const styles = aeonEntry()
+    return <Headless.Actions className={cn(styles.actions, className)} {...props} />
+  },
+  Footer: ({ className, ...props }: PartProps) => {
+    const styles = aeonEntry()
+    return <Headless.Footer className={cn(styles.footer, className)} {...props} />
+  },
+}

package/packages/ui/src/field.tsx

@@ -18,6 +18,11 @@ export const Field = {
     const s = styles()
     return <Headless.Control className={cn(s.control, className)} {...props} />
   },
+  /** Alias for Control — preferred name in app forms. */
+  Input: ({ className, ...props }: ComponentProps<typeof Headless.Control>) => {
+    const s = styles()
+    return <Headless.Control className={cn(s.control, className)} {...props} />
+  },
   Textarea: ({ className, ...props }: ComponentProps<typeof Headless.Textarea>) => {
     const s = styles()
     return <Headless.Textarea className={cn(s.textarea, className)} {...props} />

package/packages/ui/src/identity.tsx

@@ -0,0 +1,35 @@
+import { Identity as Headless } from '@aeon-ui/react'
+import { aeonIdentity } from '@aeon-ui/panda/styled-system/recipes'
+import type { ComponentProps } from 'react'
+import { cn } from './cn.js'
+
+type Size = 'sm' | 'md' | 'lg'
+type RootProps = ComponentProps<typeof Headless.Root> & { size?: Size }
+type PartProps = ComponentProps<typeof Headless.Title>
+
+export const Identity = {
+  Root: ({ className, size = 'md', ...props }: RootProps) => {
+    const styles = aeonIdentity({ size })
+    return <Headless.Root className={cn(styles.root, className)} size={size} {...props} />
+  },
+  Avatar: ({ className, ...props }: PartProps) => {
+    const styles = aeonIdentity({})
+    return <Headless.Avatar className={cn(styles.avatar, className)} {...props} />
+  },
+  Title: ({ className, ...props }: PartProps) => {
+    const styles = aeonIdentity({})
+    return <Headless.Title className={cn(styles.title, className)} {...props} />
+  },
+  Subtitle: ({ className, ...props }: PartProps) => {
+    const styles = aeonIdentity({})
+    return <Headless.Subtitle className={cn(styles.subtitle, className)} {...props} />
+  },
+  Meta: ({ className, ...props }: PartProps) => {
+    const styles = aeonIdentity({})
+    return <Headless.Meta className={cn(styles.meta, className)} {...props} />
+  },
+  Trailing: ({ className, ...props }: PartProps) => {
+    const styles = aeonIdentity({})
+    return <Headless.Trailing className={cn(styles.trailing, className)} {...props} />
+  },
+}

package/packages/ui/src/index.ts

@@ -1,4 +1,13 @@
 export { Button } from './button.js'
+export { Avatar } from './avatar.js'
+export { Identity } from './identity.js'
+export { MetricStrip } from './metric-strip.js'
+export { ListRow } from './list-row.js'
+export { Entry } from './entry.js'
+export { Conversation } from './conversation.js'
+export { Thread } from './thread.js'
+export { Composer } from './composer.js'
+export { ProfileHeader } from './profile-header.js'
 export { Async } from './async.js'
 export { Field } from './field.js'
 export { Switch } from './switch.js'
@@ -12,6 +21,12 @@ export { Slider } from './slider.js'
 export { PinInput } from './pin-input.js'
 export { Accordion } from './accordion.js'
 export { Badge } from './badge.js'
+export { Bar } from './bar.js'
+export { Panel } from './panel.js'
+export { AppShell } from './app-shell.js'
+export { Content } from './content.js'
+export { Nav } from './nav.js'
+export { StickyBar } from './sticky-bar.js'
 export { Scroll } from './scroll.js'
 export { Select } from './select.js'
 export { Combobox } from './combobox.js'
@@ -19,4 +34,5 @@ export { Menu } from './menu.js'
 export { Popover } from './popover.js'
 export { Tooltip } from './tooltip.js'
 export { Toast, useToast } from './toast.js'
+export { ThemeSwitcher } from './theme-switcher.js'
 export { cn } from './cn.js'

package/packages/ui/src/list-row.tsx

@@ -0,0 +1,30 @@
+import { ListRow as Headless } from '@aeon-ui/react'
+import { aeonListRow } from '@aeon-ui/panda/styled-system/recipes'
+import type { ComponentProps } from 'react'
+import { cn } from './cn.js'
+
+type RootProps = ComponentProps<typeof Headless.Root>
+type PartProps = ComponentProps<typeof Headless.Label>
+
+export const ListRow = {
+  Root: ({ className, ...props }: RootProps) => {
+    const styles = aeonListRow()
+    return <Headless.Root className={cn(styles.root, className)} {...props} />
+  },
+  Leading: ({ className, ...props }: PartProps) => {
+    const styles = aeonListRow()
+    return <Headless.Leading className={cn(styles.leading, className)} {...props} />
+  },
+  Label: ({ className, ...props }: PartProps) => {
+    const styles = aeonListRow()
+    return <Headless.Label className={cn(styles.label, className)} {...props} />
+  },
+  Description: ({ className, ...props }: PartProps) => {
+    const styles = aeonListRow()
+    return <Headless.Description className={cn(styles.description, className)} {...props} />
+  },
+  Trailing: ({ className, ...props }: PartProps) => {
+    const styles = aeonListRow()
+    return <Headless.Trailing className={cn(styles.trailing, className)} {...props} />
+  },
+}

package/packages/ui/src/metric-strip.tsx

@@ -0,0 +1,29 @@
+import { MetricStrip as Headless } from '@aeon-ui/react'
+import { aeonMetricStrip } from '@aeon-ui/panda/styled-system/recipes'
+import type { ComponentProps } from 'react'
+import { cn } from './cn.js'
+
+type Density = 'cluster' | 'loose'
+type RootProps = ComponentProps<typeof Headless.Root> & { density?: Density }
+type PartProps = ComponentProps<typeof Headless.Chip>
+
+export const MetricStrip = {
+  Root: ({ className, density = 'cluster', ...props }: RootProps) => {
+    const styles = aeonMetricStrip({ density })
+    return (
+      <Headless.Root className={cn(styles.root, className)} density={density} {...props} />
+    )
+  },
+  Chip: ({ className, ...props }: PartProps) => {
+    const styles = aeonMetricStrip({})
+    return <Headless.Chip className={cn(styles.chip, className)} {...props} />
+  },
+  Value: ({ className, ...props }: PartProps) => {
+    const styles = aeonMetricStrip({})
+    return <Headless.Value className={cn(styles.value, className)} {...props} />
+  },
+  Label: ({ className, ...props }: PartProps) => {
+    const styles = aeonMetricStrip({})
+    return <Headless.Label className={cn(styles.label, className)} {...props} />
+  },
+}

package/packages/ui/src/nav.tsx

@@ -0,0 +1,46 @@
+import { Nav as Headless } from '@aeon-ui/react'
+import { aeonNav } from '@aeon-ui/panda/styled-system/recipes'
+import type { ComponentProps } from 'react'
+import { cn } from './cn.js'
+
+type NavSize = 'sm' | 'md' | 'lg'
+type NavLayout = 'inline' | 'dock'
+type RootProps = ComponentProps<typeof Headless.Root> & {
+  size?: NavSize
+  layout?: NavLayout
+}
+type ItemProps = ComponentProps<typeof Headless.Item>
+type PartProps = ComponentProps<typeof Headless.Label>
+
+export const Nav = {
+  Root: ({ className, size, layout = 'inline', ...props }: RootProps) => {
+    const styles = aeonNav({ size, layout })
+    return (
+      <Headless.Root
+        className={cn(styles.root, className)}
+        data-aeon-layout={layout}
+        {...props}
+      />
+    )
+  },
+  Item: ({ className, ...props }: ItemProps) => {
+    const styles = aeonNav({})
+    return <Headless.Item className={cn(styles.item, className)} {...props} />
+  },
+  Indicator: ({ className, ...props }: PartProps) => {
+    const styles = aeonNav({})
+    return <Headless.Indicator className={cn(styles.indicator, className)} {...props} />
+  },
+  Label: ({ className, ...props }: PartProps) => {
+    const styles = aeonNav({})
+    return <Headless.Label className={cn(styles.label, className)} {...props} />
+  },
+  Icon: ({ className, ...props }: PartProps) => {
+    const styles = aeonNav({})
+    return <Headless.Icon className={cn(styles.icon, className)} {...props} />
+  },
+  Badge: ({ className, ...props }: PartProps) => {
+    const styles = aeonNav({})
+    return <Headless.Badge className={cn(styles.badge, className)} {...props} />
+  },
+}