aeon-ui-engine 1.3.5 → 1.4.0

package/packages/ui/src/composer.tsx

@@ -5,23 +5,49 @@ import { cn } from './cn.js'
 
 type RootProps = ComponentProps<typeof Headless.Root>
 type InputProps = ComponentProps<typeof Headless.Input>
-type PartProps = ComponentProps<typeof Headless.Actions>
+type ActionsProps = ComponentProps<typeof Headless.Actions>
+type SendProps = ComponentProps<typeof Headless.Send>
+type ToolbarProps = ComponentProps<typeof Headless.Toolbar>
+type SuggestionsProps = ComponentProps<typeof Headless.Suggestions>
+type SuggestionProps = ComponentProps<typeof Headless.Suggestion>
+
+type Styles = ReturnType<typeof aeonComposer> & {
+  toolbar?: string
+  suggestions?: string
+  suggestion?: string
+}
+
+function styles(): Styles {
+  return aeonComposer() as Styles
+}
 
 export const Composer = {
   Root: ({ className, ...props }: RootProps) => {
-    const styles = aeonComposer()
-    return <Headless.Root className={cn(styles.root, className)} {...props} />
+    const s = styles()
+    return <Headless.Root className={cn(s.root, className)} {...props} />
   },
   Input: ({ className, ...props }: InputProps) => {
-    const styles = aeonComposer()
-    return <Headless.Input className={cn(styles.input, className)} {...props} />
+    const s = styles()
+    return <Headless.Input className={cn(s.input, className)} {...props} />
+  },
+  Actions: ({ className, ...props }: ActionsProps) => {
+    const s = styles()
+    return <Headless.Actions className={cn(s.actions, className)} {...props} />
+  },
+  Send: ({ className, ...props }: SendProps) => {
+    const s = styles()
+    return <Headless.Send className={cn(s.send, className)} {...props} />
+  },
+  Toolbar: ({ className, ...props }: ToolbarProps) => {
+    const s = styles()
+    return <Headless.Toolbar className={cn(s.toolbar ?? s.actions, className)} {...props} />
   },
-  Actions: ({ className, ...props }: PartProps) => {
-    const styles = aeonComposer()
-    return <Headless.Actions className={cn(styles.actions, className)} {...props} />
+  Suggestions: ({ className, ...props }: SuggestionsProps) => {
+    const s = styles()
+    return <Headless.Suggestions className={cn(s.suggestions, className)} {...props} />
   },
-  Send: ({ className, ...props }: PartProps) => {
-    const styles = aeonComposer()
-    return <Headless.Send className={cn(styles.send, className)} {...props} />
+  Suggestion: ({ className, ...props }: SuggestionProps) => {
+    const s = styles()
+    return <Headless.Suggestion className={cn(s.suggestion, className)} {...props} />
   },
 }

package/packages/ui/src/file-upload.tsx

@@ -0,0 +1,36 @@
+import { FileUpload as Headless } from '@aeon-ui/react'
+import { aeonFileUpload } from '@aeon-ui/panda/styled-system/recipes'
+import type { ComponentProps } from 'react'
+import { cn } from './cn.js'
+
+const recipe = aeonFileUpload()
+
+export const FileUpload = {
+  Root: ({ className, ...props }: ComponentProps<typeof Headless.Root>) => (
+    <Headless.Root className={cn(recipe.root, className)} {...props} />
+  ),
+  Label: ({ className, ...props }: ComponentProps<typeof Headless.Label>) => (
+    <Headless.Label className={cn(recipe.label, className)} {...props} />
+  ),
+  Dropzone: ({ className, ...props }: ComponentProps<typeof Headless.Dropzone>) => (
+    <Headless.Dropzone className={cn(recipe.dropzone, className)} {...props} />
+  ),
+  Input: ({ className, ...props }: ComponentProps<typeof Headless.Input>) => (
+    <Headless.Input className={cn(recipe.input, className)} {...props} />
+  ),
+  Hint: ({ className, ...props }: ComponentProps<typeof Headless.Hint>) => (
+    <Headless.Hint className={cn(recipe.hint, className)} {...props} />
+  ),
+  Preview: ({ className, ...props }: ComponentProps<typeof Headless.Preview>) => (
+    <Headless.Preview className={cn(recipe.preview, className)} {...props} />
+  ),
+  ClearTrigger: ({ className, ...props }: ComponentProps<typeof Headless.ClearTrigger>) => (
+    <Headless.ClearTrigger className={cn(recipe.clearTrigger, className)} {...props} />
+  ),
+  RejectionMessage: ({
+    className,
+    ...props
+  }: ComponentProps<typeof Headless.RejectionMessage>) => (
+    <Headless.RejectionMessage className={cn(recipe.rejectionMessage, className)} {...props} />
+  ),
+}

package/packages/ui/src/index.ts

@@ -22,6 +22,8 @@ export { Separator } from './separator.js'
 export { Progress } from './progress.js'
 export { RadioGroup } from './radio-group.js'
 export { Slider } from './slider.js'
+export { RangeSlider } from './range-slider.js'
+export { FileUpload } from './file-upload.js'
 export { PinInput } from './pin-input.js'
 export { Accordion } from './accordion.js'
 export { Badge } from './badge.js'

package/packages/ui/src/prompt.tsx

@@ -19,6 +19,9 @@ export const Prompt = {
   ),
   Meta: Headless.Meta,
   Amount: Headless.Amount,
+  Verb: Headless.Verb,
+  Recipient: Headless.Recipient,
+  Effect: Headless.Effect,
   Actions: Headless.Actions,
   Primary: ({ className, ...props }: ComponentProps<typeof Headless.Primary>) => (
     <Headless.Primary className={cn(className)} {...props} />

package/packages/ui/src/range-slider.tsx

@@ -0,0 +1,24 @@
+import { RangeSlider as Headless } from '@aeon-ui/react'
+import { aeonRangeSlider } from '@aeon-ui/panda/styled-system/recipes'
+import type { ComponentProps } from 'react'
+import { cn } from './cn.js'
+
+const recipe = aeonRangeSlider()
+
+export const RangeSlider = {
+  Root: ({ className, ...props }: ComponentProps<typeof Headless.Root>) => (
+    <Headless.Root className={cn(recipe.root, className)} {...props} />
+  ),
+  Track: ({ className, ...props }: ComponentProps<typeof Headless.Track>) => (
+    <Headless.Track className={cn(recipe.track, className)} {...props} />
+  ),
+  Range: ({ className, ...props }: ComponentProps<typeof Headless.Range>) => (
+    <Headless.Range className={cn(recipe.range, className)} {...props} />
+  ),
+  Thumb: ({ className, ...props }: ComponentProps<typeof Headless.Thumb>) => (
+    <Headless.Thumb className={cn(recipe.thumb, className)} {...props} />
+  ),
+  ValueText: ({ className, ...props }: ComponentProps<typeof Headless.ValueText>) => (
+    <Headless.ValueText className={cn(recipe.valueText, className)} {...props} />
+  ),
+}

package/packages/ui/src/thread.tsx

@@ -6,6 +6,7 @@ import { cn } from './cn.js'
 type RootProps = ComponentProps<typeof Headless.Root>
 type ItemProps = ComponentProps<typeof Headless.Item>
 type PartProps = ComponentProps<typeof Headless.Bubble>
+type BindProps = ComponentProps<typeof Headless.Bind>
 
 export const Thread = {
   Root: ({ className, ...props }: RootProps) => {
@@ -32,4 +33,43 @@ export const Thread = {
     const styles = aeonThread()
     return <Headless.Day className={cn(styles.day, className)} {...props} />
   },
+  Bind: ({ className, ...props }: BindProps) => {
+    const styles = aeonThread()
+    return (
+      <Headless.Bind className={cn((styles as { bind?: string }).bind, className)} {...props} />
+    )
+  },
+  Card: ({ className, ...props }: PartProps) => {
+    const styles = aeonThread()
+    return (
+      <Headless.Card className={cn((styles as { card?: string }).card ?? styles.bubble, className)} {...props} />
+    )
+  },
+  CardTitle: ({ className, ...props }: PartProps) => {
+    const styles = aeonThread()
+    return (
+      <Headless.CardTitle
+        className={cn((styles as { cardTitle?: string }).cardTitle, className)}
+        {...props}
+      />
+    )
+  },
+  CardBody: ({ className, ...props }: PartProps) => {
+    const styles = aeonThread()
+    return (
+      <Headless.CardBody
+        className={cn((styles as { cardBody?: string }).cardBody, className)}
+        {...props}
+      />
+    )
+  },
+  CardActions: ({ className, ...props }: PartProps) => {
+    const styles = aeonThread()
+    return (
+      <Headless.CardActions
+        className={cn((styles as { cardActions?: string }).cardActions, className)}
+        {...props}
+      />
+    )
+  },
 }

package/packages/cli/dist/chunk-IW5NT2Z2.js

@@ -1,103 +0,0 @@
-// src/init.ts
-import { mkdirSync, writeFileSync, existsSync } from "fs";
-import { join } from "path";
-import {
-  CURSOR_RULES_SNIPPET,
-  AEON_SYSTEM_PROMPT,
-  catalog,
-  componentSchemas
-} from "@aeon-ui/schemas";
-var STARTER = `/**
- * Aeon UI starter \u2014 generated by \`npx aeon-ui init\`
- * Headless: @aeon-ui/react \xB7 Styled: @aeon-ui/ui \xB7 Schemas: @aeon-ui/schemas
- */
-import { Button, Field } from '@aeon-ui/ui'
-
-export function AeonStarter() {
-  return (
-    <div>
-      <Field.Root>
-        <Field.Label>Email</Field.Label>
-        <Field.Control type="email" placeholder="you@example.com" />
-        <Field.Message />
-      </Field.Root>
-      <Button.Root status="idle">Continue</Button.Root>
-    </div>
-  )
-}
-`;
-function initAeon(options = {}) {
-  const cwd = options.cwd ?? process.cwd();
-  const force = options.force ?? false;
-  const written = [];
-  const write = (rel, body) => {
-    const path = join(cwd, rel);
-    if (existsSync(path) && !force) {
-      written.push(`skip ${rel} (exists)`);
-      return;
-    }
-    mkdirSync(join(path, ".."), { recursive: true });
-    writeFileSync(path, body.endsWith("\n") ? body : `${body}
-`);
-    written.push(`write ${rel}`);
-  };
-  write(".cursor/rules/aeon-ui.mdc", `---
-description: Aeon UI \u2014 statechart-driven components for AI agents
-globs: **/*.{tsx,ts,jsx,js}
-alwaysApply: true
----
-
-${CURSOR_RULES_SNIPPET.trim()}
-`);
-  write("aeon.cursorrules.md", `${CURSOR_RULES_SNIPPET.trim()}
-`);
-  write("aeon.system-prompt.md", `${AEON_SYSTEM_PROMPT.trim()}
-`);
-  write(
-    "aeon.schemas/catalog.json",
-    `${JSON.stringify(
-      {
-        $id: catalog.$id,
-        title: catalog.title,
-        description: catalog.description,
-        version: catalog.version,
-        principle: catalog.principle,
-        attributes: catalog.attributes,
-        components: catalog.components,
-        note: "Full schemas live under aeon.schemas/components/*.json"
-      },
-      null,
-      2
-    )}
-`
-  );
-  for (const [id, schema] of Object.entries(componentSchemas)) {
-    write(`aeon.schemas/components/${id}.json`, `${JSON.stringify(schema, null, 2)}
-`);
-  }
-  write("src/components/AeonStarter.tsx", STARTER);
-  write(
-    "AEON_AI.md",
-    `# Aeon UI \u2014 AI agent setup
-
-Generated by \`npx aeon-ui init\`.
-
-## Next steps
-
-1. Install: \`npm install aeon-ui-engine react react-dom xstate @xstate/react\`
-2. CSS: \`import 'aeon-ui-engine/aeon.css'\`
-3. Vite: add \`aeonUiVitePlugin()\` from \`aeon-ui-engine/vite\`
-4. Paste \`aeon.cursorrules.md\` into Cursor rules / system prompt (already mirrored to \`.cursor/rules/aeon-ui.mdc\`)
-5. Constrain generation with JSON under \`aeon.schemas/\`
-
-## Principle
-
-**UI = f(state)** \u2014 never invent boolean combinations for states the schema does not list.
-`
-  );
-  return { cwd, written };
-}
-
-export {
-  initAeon
-};