aeon-ui-engine 1.3.5 → 1.5.1

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/scripts/link-scoped-packages.mjs

@@ -0,0 +1,206 @@
+/**
+ * Materialize `node_modules/@aeon-ui/*` → `aeon-ui-engine/packages/*`
+ * so Next.js / Vite / Node can resolve scoped imports without bundler aliases.
+ *
+ * Runs as `aeon-ui-engine` postinstall (uses INIT_CWD) or via `npx aeon-ui link`.
+ *
+ * @example
+ * node ./scripts/link-scoped-packages.mjs
+ * node ./scripts/link-scoped-packages.mjs --cwd /path/to/app
+ */
+
+import { createRequire } from 'node:module'
+import {
+  existsSync,
+  lstatSync,
+  mkdirSync,
+  readlinkSync,
+  realpathSync,
+  rmSync,
+  symlinkSync,
+} from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const scriptDir = path.dirname(fileURLToPath(import.meta.url))
+
+/** Packages exposed under `@aeon-ui/<name>` for consumers. */
+export const SCOPED_PACKAGES = [
+  'core',
+  'primitives',
+  'react',
+  'ui',
+  'panda',
+  'schemas',
+  'surface',
+  'vue',
+  'solid',
+  'svelte',
+]
+
+/**
+ * Absolute path to the `aeon-ui-engine` package root (npm install or monorepo).
+ */
+export function resolveEngineRoot(opts = {}) {
+  if (opts.engineRoot) return path.resolve(opts.engineRoot)
+  if (process.env.AEON_UI_ROOT) return path.resolve(process.env.AEON_UI_ROOT)
+
+  try {
+    const require = createRequire(import.meta.url)
+    return path.dirname(require.resolve('aeon-ui-engine/package.json'))
+  } catch {
+    // Running from the monorepo checkout (this file lives in scripts/).
+    return path.resolve(scriptDir, '..')
+  }
+}
+
+/**
+ * Consumer `node_modules` where `@aeon-ui/*` should appear.
+ * Prefer INIT_CWD (npm/pnpm/yarn set this to the install project).
+ */
+export function resolveTargetNodeModules(opts = {}) {
+  if (opts.nodeModules) return path.resolve(opts.nodeModules)
+  if (opts.cwd) return path.join(path.resolve(opts.cwd), 'node_modules')
+
+  // Prefer INIT_CWD (npm/pnpm/yarn set this to the install project).
+  // Skip when postinstall runs inside the engine package itself during a
+  // monorepo install — workspace already provides @aeon-ui/*.
+  if (process.env.INIT_CWD) {
+    const initCwd = path.resolve(process.env.INIT_CWD)
+    const engineRoot = resolveEngineRoot(opts)
+    if (initCwd === engineRoot) {
+      return path.join(engineRoot, 'node_modules')
+    }
+    return path.join(initCwd, 'node_modules')
+  }
+
+  const engineRoot = resolveEngineRoot(opts)
+  // Installed as dependency: …/node_modules/aeon-ui-engine
+  const parent = path.dirname(engineRoot)
+  if (path.basename(parent) === 'node_modules') {
+    return parent
+  }
+
+  // Monorepo / direct run: link into engine's own node_modules
+  return path.join(engineRoot, 'node_modules')
+}
+
+function isSymlink(p) {
+  try {
+    return lstatSync(p).isSymbolicLink()
+  } catch {
+    return false
+  }
+}
+
+function sameTarget(linkPath, absTarget) {
+  try {
+    const current = readlinkSync(linkPath)
+    const resolved = path.isAbsolute(current)
+      ? path.normalize(current)
+      : path.resolve(path.dirname(linkPath), current)
+    if (resolved === absTarget) return true
+  } catch {
+    /* not a symlink or unreadable */
+  }
+  try {
+    return realpathSync(linkPath) === realpathSync(absTarget)
+  } catch {
+    return false
+  }
+}
+
+/**
+ * @param {{ cwd?: string, engineRoot?: string, nodeModules?: string, quiet?: boolean, force?: boolean }} [opts]
+ * @returns {{ linked: string[], skipped: string[], missing: string[], targetNodeModules: string, engineRoot: string }}
+ */
+export function linkScopedPackages(opts = {}) {
+  const quiet = opts.quiet ?? false
+  const force = opts.force ?? false
+  const engineRoot = resolveEngineRoot(opts)
+  const targetNodeModules = resolveTargetNodeModules({ ...opts, engineRoot })
+  const scopeDir = path.join(targetNodeModules, '@aeon-ui')
+  const packagesRoot = path.join(engineRoot, 'packages')
+
+  const linked = []
+  const skipped = []
+  const missing = []
+
+  mkdirSync(scopeDir, { recursive: true })
+
+  for (const name of SCOPED_PACKAGES) {
+    const absTarget = path.join(packagesRoot, name)
+    if (!existsSync(absTarget)) {
+      missing.push(name)
+      continue
+    }
+
+    const linkPath = path.join(scopeDir, name)
+
+    if (existsSync(linkPath) || isSymlink(linkPath)) {
+      if (sameTarget(linkPath, absTarget)) {
+        skipped.push(name)
+        continue
+      }
+      // Do not clobber pnpm/npm workspace links unless --force
+      if (!force) {
+        skipped.push(name)
+        continue
+      }
+      rmSync(linkPath, { recursive: true, force: true })
+    }
+
+    const type = process.platform === 'win32' ? 'junction' : 'dir'
+    symlinkSync(absTarget, linkPath, type)
+    linked.push(name)
+  }
+
+  if (!quiet) {
+    const rel = (n) => `@aeon-ui/${n}`
+    for (const n of linked) console.log(`  link ${rel(n)} → packages/${n}`)
+    for (const n of skipped) console.log(`  skip ${rel(n)} (already present)`)
+    for (const n of missing) console.log(`  miss ${rel(n)} (not in engine)`)
+    if (linked.length === 0 && skipped.length > 0) {
+      console.log(`aeon-ui link: ${skipped.length} package(s) already present in ${targetNodeModules}`)
+    } else if (linked.length > 0) {
+      console.log(`aeon-ui link: linked ${linked.length} package(s) into ${targetNodeModules}`)
+    }
+  }
+
+  return { linked, skipped, missing, targetNodeModules, engineRoot }
+}
+
+function parseArgs(argv) {
+  const opts = {}
+  for (let i = 0; i < argv.length; i++) {
+    const a = argv[i]
+    if (a === '--cwd' && argv[i + 1]) {
+      opts.cwd = argv[++i]
+    } else if (a === '--engine-root' && argv[i + 1]) {
+      opts.engineRoot = argv[++i]
+    } else if (a === '--quiet' || a === '-q') {
+      opts.quiet = true
+    } else if (a === '--force' || a === '-f') {
+      opts.force = true
+    }
+  }
+  return opts
+}
+
+const isMain = (() => {
+  if (!process.argv[1]) return false
+  try {
+    return realpathSync(fileURLToPath(import.meta.url)) === realpathSync(process.argv[1])
+  } catch {
+    return path.resolve(fileURLToPath(import.meta.url)) === path.resolve(process.argv[1])
+  }
+})()
+
+if (isMain) {
+  try {
+    linkScopedPackages(parseArgs(process.argv.slice(2)))
+  } catch (err) {
+    console.error('aeon-ui link failed:', err instanceof Error ? err.message : err)
+    process.exitCode = 1
+  }
+}

package/scripts/vite-aliases.mjs

@@ -1,19 +1,17 @@
 /**
- * Vite + TypeScript wiring for apps that install `aeon-ui-engine` from npm.
+ * Vite helpers for apps that install `aeon-ui-engine` from npm.
+ *
+ * Scoped `@aeon-ui/*` imports resolve via postinstall linking
+ * (`aeon-ui-engine/link` / `npx aeon-ui link`). This plugin is optional —
+ * it still helps with optimizeDeps and monorepo `packagesRoot`.
  *
  * @example
- * // vite.config.ts — one call, done
+ * // vite.config.ts — optional
  * import { aeonUiVitePlugin } from 'aeon-ui-engine/vite'
  *
  * export default defineConfig({
  *   plugins: [react(), aeonUiVitePlugin()],
  * })
- *
- * // tsconfig.json — spread the base config
- * {
- *   "extends": "aeon-ui-engine/tsconfig",
- *   "compilerOptions": { "jsx": "react-jsx" }
- * }
  */
 import { createRequire } from 'node:module'
 import path from 'node:path'

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
-};