aeon-ui-engine 1.0.0

package/packages/ui/src/scroll.tsx

@@ -0,0 +1,51 @@
+import { Scroll as Headless, useScrollContext } from '@aeon-ui/react'
+import { aeonScroll } from '@aeon-ui/panda/styled-system/recipes'
+import { createContext, useContext, type ComponentProps } from 'react'
+import { cn } from './cn.js'
+
+type Axis = 'y' | 'x' | 'both'
+type MaxH = 'sm' | 'md' | 'lg'
+
+type SlotClasses = ReturnType<typeof aeonScroll>
+
+const ScrollStyleCtx = createContext<SlotClasses | null>(null)
+
+function useScrollStyles(): SlotClasses {
+  const s = useContext(ScrollStyleCtx)
+  if (!s) throw new Error('Scroll parts must be used within <Scroll.Root>')
+  return s
+}
+
+type RootProps = ComponentProps<typeof Headless.Root> & {
+  axis?: Axis
+  maxH?: MaxH
+}
+
+export const Scroll = {
+  Root: ({ className, axis = 'both', maxH = 'md', children, ...props }: RootProps) => {
+    const s = aeonScroll({ axis, maxH })
+    return (
+      <ScrollStyleCtx.Provider value={s}>
+        <Headless.Root className={cn(s.root, className)} {...props}>
+          {children}
+        </Headless.Root>
+      </ScrollStyleCtx.Provider>
+    )
+  },
+  Viewport: ({ className, ...props }: ComponentProps<typeof Headless.Viewport>) => {
+    const s = useScrollStyles()
+    return <Headless.Viewport className={cn(s.viewport, className)} {...props} />
+  },
+  Content: ({ className, ...props }: ComponentProps<typeof Headless.Content>) => {
+    const s = useScrollStyles()
+    return <Headless.Content className={cn(s.content, className)} {...props} />
+  },
+  StateReadout: ({ className }: { className?: string }) => {
+    const { stateAttr } = useScrollContext()
+    return (
+      <code className={className} data-aeon-part="state-readout">
+        {stateAttr}
+      </code>
+    )
+  },
+}

package/packages/ui/src/select.tsx

@@ -0,0 +1,33 @@
+import { Select as Headless } from '@aeon-ui/react'
+import { aeonSelect } from '@aeon-ui/panda/styled-system/recipes'
+import type { ComponentProps } from 'react'
+import { cn } from './cn.js'
+
+const styles = () => aeonSelect()
+
+export const Select = {
+  Root: ({ className, ...props }: ComponentProps<typeof Headless.Root>) => {
+    const s = styles()
+    return <Headless.Root className={cn(s.root, className)} {...props} />
+  },
+  Trigger: ({ className, ...props }: ComponentProps<typeof Headless.Trigger>) => {
+    const s = styles()
+    return <Headless.Trigger className={cn(s.trigger, className)} {...props} />
+  },
+  Content: ({ className, ...props }: ComponentProps<typeof Headless.Content>) => {
+    const s = styles()
+    return <Headless.Content className={cn(s.content, className)} {...props} />
+  },
+  ValueText: ({ className, ...props }: ComponentProps<typeof Headless.ValueText>) => {
+    const s = styles()
+    return <Headless.ValueText className={cn(s.value, className)} {...props} />
+  },
+  Positioner: ({ className, ...props }: ComponentProps<typeof Headless.Positioner>) => {
+    const s = styles()
+    return <Headless.Positioner className={className} {...props} />
+  },
+  Item: ({ className, ...props }: ComponentProps<typeof Headless.Item>) => {
+    const s = styles()
+    return <Headless.Item className={cn(s.item, className)} {...props} />
+  },
+}

package/packages/ui/src/styles.css

@@ -0,0 +1,2 @@
+/* Re-export Panda global styles + tokens. Prefer @aeon-ui/panda/styles.css in apps. */
+@import '@aeon-ui/panda/styles.css';

package/packages/ui/src/switch.tsx

@@ -0,0 +1,22 @@
+import { Switch as Headless } from '@aeon-ui/react'
+import { aeonSwitch } from '@aeon-ui/panda/styled-system/recipes'
+import type { ComponentProps } from 'react'
+import { cn } from './cn.js'
+
+const switchStyles = aeonSwitch()
+
+export const Switch = {
+  Root: ({ className, ...props }: ComponentProps<typeof Headless.Root>) => (
+    <Headless.Root className={cn(switchStyles.root, className)} {...props} />
+  ),
+  Control: ({ className, ...props }: ComponentProps<typeof Headless.Control>) => (
+    <Headless.Control className={cn(switchStyles.control, className)} {...props} />
+  ),
+  Thumb: ({ className, ...props }: ComponentProps<typeof Headless.Thumb>) => (
+    <Headless.Thumb className={cn(switchStyles.thumb, className)} {...props} />
+  ),
+  Label: ({ className, ...props }: ComponentProps<typeof Headless.Label>) => (
+    <Headless.Label className={cn(switchStyles.label, className)} {...props} />
+  ),
+  HiddenInput: Headless.HiddenInput,
+}

package/packages/ui/src/tabs.tsx

@@ -0,0 +1,22 @@
+import { Tabs as Headless } from '@aeon-ui/react'
+import { aeonTabs } from '@aeon-ui/panda/styled-system/recipes'
+import type { ComponentProps } from 'react'
+import { cn } from './cn.js'
+
+const tabs = aeonTabs()
+
+export const Tabs = {
+  Root: ({ className, ...props }: ComponentProps<typeof Headless.Root>) => (
+    <Headless.Root className={cn(tabs.root, className)} {...props} />
+  ),
+  List: ({ className, ...props }: ComponentProps<typeof Headless.List>) => (
+    <Headless.List className={cn(tabs.list, className)} {...props} />
+  ),
+  Trigger: ({ className, ...props }: ComponentProps<typeof Headless.Trigger>) => (
+    <Headless.Trigger className={cn(tabs.trigger, className)} {...props} />
+  ),
+  Content: ({ className, ...props }: ComponentProps<typeof Headless.Content>) => (
+    <Headless.Content className={cn(tabs.content, className)} {...props} />
+  ),
+  Indicator: Headless.Indicator,
+}

package/packages/ui/src/toast.tsx

@@ -0,0 +1,36 @@
+import { Toast as Headless, useToast } from '@aeon-ui/react'
+import { aeonToast } from '@aeon-ui/panda/styled-system/recipes'
+import type { ComponentProps } from 'react'
+import { cn } from './cn.js'
+
+const toast = aeonToast()
+
+export const Toast = {
+  Provider: Headless.Provider,
+  Viewport: ({
+    className,
+    placement = 'bottom-end',
+    ...props
+  }: ComponentProps<typeof Headless.Viewport>) => (
+    <Headless.Viewport
+      className={cn(toast.viewport, className)}
+      placement={placement}
+      {...props}
+    />
+  ),
+  Root: ({ className, ...props }: ComponentProps<typeof Headless.Root>) => (
+    <Headless.Root className={cn(toast.root, className)} {...props} />
+  ),
+  Title: ({ className, ...props }: ComponentProps<typeof Headless.Title>) => (
+    <Headless.Title className={cn(toast.title, className)} {...props} />
+  ),
+  Description: ({ className, ...props }: ComponentProps<typeof Headless.Description>) => (
+    <Headless.Description className={cn(toast.description, className)} {...props} />
+  ),
+  CloseTrigger: ({ className, ...props }: ComponentProps<typeof Headless.CloseTrigger>) => (
+    <Headless.CloseTrigger className={cn(toast.closeTrigger, className)} {...props} />
+  ),
+  Show: Headless.Show,
+}
+
+export { useToast }

package/packages/ui/src/tooltip.tsx

@@ -0,0 +1,19 @@
+import { Tooltip as Headless } from '@aeon-ui/react'
+import { aeonTooltip } from '@aeon-ui/panda/styled-system/recipes'
+import type { ComponentProps } from 'react'
+import { cn } from './cn.js'
+
+const tooltip = aeonTooltip()
+
+export const Tooltip = {
+  Root: Headless.Root,
+  Trigger: ({ className, ...props }: ComponentProps<typeof Headless.Trigger>) => (
+    <Headless.Trigger className={cn(tooltip.trigger, className)} {...props} />
+  ),
+  Positioner: ({ className, ...props }: ComponentProps<typeof Headless.Positioner>) => (
+    <Headless.Positioner className={cn(tooltip.positioner, className)} {...props} />
+  ),
+  Content: ({ className, ...props }: ComponentProps<typeof Headless.Content>) => (
+    <Headless.Content className={cn(tooltip.content, className)} {...props} />
+  ),
+}

package/packages/ui/tsconfig.json

@@ -0,0 +1,12 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src",
+    "paths": {
+      "@aeon-ui/panda/styled-system/css": ["../panda/styled-system/css/index.d.ts"],
+      "@aeon-ui/panda/styled-system/recipes": ["../panda/styled-system/recipes/index.d.ts"]
+    }
+  },
+  "include": ["src"]
+}

package/packages/vue/README.md

@@ -0,0 +1,40 @@
+# @aeon-ui/vue
+
+Headless **Vue 3** bindings for [Aeon UI](https://github.com/GenericCPU/aeon-ui). Behavior lives in `@aeon-ui/primitives` (XState); this package wires snapshots to Vue and applies `@aeon-ui/core` anatomy attributes.
+
+## Install
+
+```bash
+pnpm add @aeon-ui/vue @aeon-ui/core @aeon-ui/primitives xstate
+```
+
+Peer: `vue` ^3.4.
+
+## Usage
+
+```vue
+<script setup lang="ts">
+import { Switch } from '@aeon-ui/vue'
+import { ref } from 'vue'
+
+const on = ref(true)
+</script>
+
+<template>
+  <Switch.Root :checked="on" @update:checked="(v) => (on = v)">
+    <Switch.Control>
+      <Switch.Thumb />
+    </Switch.Control>
+    <Switch.Label>Notifications</Switch.Label>
+  </Switch.Root>
+</template>
+```
+
+Use `checked` + `@update:checked` or `onCheckedChange` for controlled mode (see `SwitchRoot` props).
+
+## v0.1 scope
+
+- `useAeonMachine` — `@xstate/vue` wrapper
+- `Switch` — full compound port (reference adapter)
+
+More components follow the same pattern as React stabilizes. See [FRAMEWORKS.md](../../FRAMEWORKS.md).

package/packages/vue/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@aeon-ui/vue",
+  "version": "0.1.0",
+  "description": "Headless Vue 3 components backed by Aeon XState machines",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/GenericCPU/aeon-ui.git",
+    "directory": "packages/vue"
+  },
+  "publishConfig": { "access": "public" },
+  "files": ["dist", "src/**/*.svelte", "README.md"],
+  "keywords": ["aeon-ui", "vue", "headless", "xstate", "statechart"],
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format esm --dts --clean --external vue --external xstate --external @xstate/vue --external @aeon-ui/core --external @aeon-ui/primitives",
+    "typecheck": "tsc --noEmit"
+  },
+  "dependencies": {
+    "@aeon-ui/core": "workspace:*",
+    "@aeon-ui/primitives": "workspace:*",
+    "@xstate/vue": "^5.0.0",
+    "xstate": "^5.19.2"
+  },
+  "peerDependencies": {
+    "vue": "^3.4.0"
+  },
+  "devDependencies": {
+    "tsup": "^8.4.0",
+    "typescript": "^5.8.3",
+    "vue": "^3.5.13"
+  }
+}

package/packages/vue/src/hooks/use-aeon-machine.ts

@@ -0,0 +1,10 @@
+import { useMachine } from '@xstate/vue'
+import type { AnyStateMachine } from 'xstate'
+
+/** Bridge executable statecharts to Vue — UI = f(snapshot). */
+export function useAeonMachine<M extends AnyStateMachine>(
+  machine: M,
+  options?: Parameters<typeof useMachine<M>>[1],
+) {
+  return useMachine(machine, options)
+}

package/packages/vue/src/index.ts

@@ -0,0 +1,2 @@
+export { useAeonMachine } from './hooks/use-aeon-machine.js'
+export { Switch } from './switch/index.js'

package/packages/vue/src/switch/index.ts

@@ -0,0 +1,208 @@
+import { partAttrs, switchAnatomy } from '@aeon-ui/core'
+import { toggleMachine } from '@aeon-ui/primitives'
+import {
+  defineComponent,
+  h,
+  inject,
+  provide,
+  watch,
+  type HTMLAttributes,
+  type InjectionKey,
+  type PropType,
+} from 'vue'
+import { useAeonMachine } from '../hooks/use-aeon-machine.js'
+import { partProps } from '../utils/part-props.js'
+
+interface SwitchContext {
+  checked: boolean
+  disabled: boolean
+  controlled: boolean
+  onCheckedChange?: (checked: boolean) => void
+  send: ReturnType<typeof useAeonMachine<typeof toggleMachine>>['send']
+  pressState: string
+}
+
+const SwitchKey: InjectionKey<SwitchContext> = Symbol('aeon-switch')
+
+export const SwitchRoot = defineComponent({
+  name: 'AeonSwitchRoot',
+  props: {
+    checked: { type: Boolean as PropType<boolean | undefined>, default: undefined },
+    defaultChecked: { type: Boolean, default: false },
+    disabled: { type: Boolean, default: false },
+    onCheckedChange: { type: Function as PropType<(checked: boolean) => void>, default: undefined },
+  },
+  setup(props, { slots, attrs }) {
+    const { snapshot, send } = useAeonMachine(toggleMachine, {
+      input: { checked: props.defaultChecked, disabled: props.disabled },
+    })
+
+    const controlled = props.checked !== undefined
+    const resolvedChecked = () => props.checked ?? snapshot.value.context.checked
+    const pressState = () => (snapshot.value.matches({ interaction: 'pressed' }) ? 'pressed' : 'idle')
+
+    watch(
+      () => props.checked,
+      (v) => {
+        if (v !== undefined) send({ type: 'SET_CHECKED', checked: v })
+      },
+    )
+
+    watch(
+      () => resolvedChecked(),
+      (v) => {
+        if (!controlled) props.onCheckedChange?.(v)
+      },
+    )
+
+    const toggle = () => {
+      if (props.disabled) return
+      const next = !resolvedChecked()
+      if (controlled) props.onCheckedChange?.(next)
+      else send({ type: 'TOGGLE' })
+    }
+
+    provide(SwitchKey, {
+      get checked() {
+        return resolvedChecked()
+      },
+      get disabled() {
+        return props.disabled
+      },
+      get controlled() {
+        return controlled
+      },
+      onCheckedChange: props.onCheckedChange,
+      send,
+      get pressState() {
+        return pressState()
+      },
+    })
+
+    return () =>
+      h(
+        'label',
+        partProps(
+          partAttrs(switchAnatomy.scope, switchAnatomy.root, {
+            state: `${resolvedChecked() ? 'checked' : 'unchecked'} ${pressState()}`,
+            disabled: props.disabled,
+          }) as Record<string, unknown>,
+          {
+            ...attrs,
+            onClick: (e: MouseEvent) => {
+              const target = e.target as HTMLElement
+              if (target.closest(`[data-aeon-part="${switchAnatomy.control}"]`)) return
+              toggle()
+            },
+          } as HTMLAttributes,
+        ),
+        slots.default?.() ?? undefined,
+      )
+  },
+})
+
+function useSwitchCtx(): SwitchContext {
+  const ctx = inject(SwitchKey)
+  if (!ctx) throw new Error('Switch parts must be used within SwitchRoot')
+  return ctx
+}
+
+export const SwitchControl = defineComponent({
+  name: 'AeonSwitchControl',
+  setup(_, { attrs }) {
+    const ctx = useSwitchCtx()
+    const toggle = () => {
+      if (ctx.disabled) return
+      const next = !ctx.checked
+      if (ctx.controlled) ctx.onCheckedChange?.(next)
+      else ctx.send({ type: 'TOGGLE' })
+    }
+    return () =>
+      h('span', {
+        role: 'switch',
+        'aria-checked': ctx.checked,
+        tabindex: ctx.disabled ? -1 : 0,
+        ...partProps(
+          partAttrs(switchAnatomy.scope, switchAnatomy.control, {
+            state: `${ctx.checked ? 'checked' : 'unchecked'} ${ctx.pressState}`,
+            disabled: ctx.disabled,
+          }) as Record<string, unknown>,
+          attrs as HTMLAttributes,
+        ),
+        onClick: (e: MouseEvent) => {
+          toggle()
+          e.stopPropagation()
+        },
+        onPointerdown: () => {
+          if (!ctx.disabled) ctx.send({ type: 'POINTER_DOWN' })
+        },
+        onPointerup: () => ctx.send({ type: 'POINTER_UP' }),
+        onPointerleave: () => ctx.send({ type: 'POINTER_LEAVE' }),
+        onKeydown: (e: KeyboardEvent) => {
+          if (e.key === ' ' || e.key === 'Enter') {
+            e.preventDefault()
+            toggle()
+          }
+        },
+      })
+  },
+})
+
+export const SwitchThumb = defineComponent({
+  name: 'AeonSwitchThumb',
+  setup(_, { attrs }) {
+    const ctx = useSwitchCtx()
+    return () =>
+      h(
+        'span',
+        partProps(
+          partAttrs(switchAnatomy.scope, switchAnatomy.thumb, {
+            state: `${ctx.checked ? 'checked' : 'unchecked'} ${ctx.pressState}`,
+          }) as Record<string, unknown>,
+          attrs as HTMLAttributes,
+        ),
+      )
+  },
+})
+
+export const SwitchLabel = defineComponent({
+  name: 'AeonSwitchLabel',
+  setup(_, { slots, attrs }) {
+    return () =>
+      h(
+        'span',
+        partProps(
+          partAttrs(switchAnatomy.scope, switchAnatomy.label) as Record<string, unknown>,
+          attrs as HTMLAttributes,
+        ),
+        slots.default?.(),
+      )
+  },
+})
+
+export const SwitchHiddenInput = defineComponent({
+  name: 'AeonSwitchHiddenInput',
+  setup(_, { attrs }) {
+    const ctx = useSwitchCtx()
+    return () =>
+      h('input', {
+        type: 'checkbox',
+        checked: ctx.checked,
+        readonly: true,
+        tabindex: -1,
+        'aria-hidden': true,
+        ...partProps(
+          partAttrs(switchAnatomy.scope, switchAnatomy.hiddenInput) as Record<string, unknown>,
+          attrs as HTMLAttributes,
+        ),
+      })
+  },
+})
+
+export const Switch = {
+  Root: SwitchRoot,
+  Control: SwitchControl,
+  Thumb: SwitchThumb,
+  Label: SwitchLabel,
+  HiddenInput: SwitchHiddenInput,
+}

package/packages/vue/src/utils/part-props.ts

@@ -0,0 +1,8 @@
+import type { HTMLAttributes } from 'vue'
+
+export function partProps(
+  attrs: Record<string, unknown>,
+  extra?: HTMLAttributes,
+): HTMLAttributes {
+  return { ...attrs, ...extra } as HTMLAttributes
+}

package/packages/vue/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src"
+  },
+  "include": ["src"]
+}

package/pnpm-workspace.yaml

@@ -0,0 +1,3 @@
+packages:
+  - 'packages/*'
+  - 'apps/*'

package/scripts/ensure-headless-built.mjs

@@ -0,0 +1,25 @@
+#!/usr/bin/env node
+/**
+ * Build @aeon-ui/core, primitives, and react when dist/ is missing.
+ * Consumers: add to prebuild — `node path/to/AeonUI/scripts/ensure-headless-built.mjs`
+ * Override repo root: AEON_UI_ROOT=/path/to/AeonUI
+ */
+import { execSync } from 'node:child_process'
+import { existsSync } from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const scriptDir = path.dirname(fileURLToPath(import.meta.url))
+const aeonRoot = process.env.AEON_UI_ROOT
+  ? path.resolve(process.env.AEON_UI_ROOT)
+  : path.resolve(scriptDir, '..')
+
+const marker = path.join(aeonRoot, 'packages/react/dist/index.js')
+
+if (existsSync(marker)) {
+  console.log('[aeon-ui] headless packages already built')
+  process.exit(0)
+}
+
+console.log('[aeon-ui] building core, primitives, react…')
+execSync('pnpm run build:headless', { cwd: aeonRoot, stdio: 'inherit' })

package/tsconfig.base.json

@@ -0,0 +1,21 @@
+{
+  "compilerOptions": {
+    "target": "ES2022",
+    "lib": ["ES2022", "DOM", "DOM.Iterable"],
+    "module": "ESNext",
+    "moduleResolution": "bundler",
+    "jsx": "react-jsx",
+    "strict": true,
+    "skipLibCheck": true,
+    "declaration": true,
+    "declarationMap": true,
+    "sourceMap": true,
+    "noUnusedLocals": true,
+    "noUnusedParameters": true,
+    "noFallthroughCasesInSwitch": true,
+    "isolatedModules": true,
+    "verbatimModuleSyntax": true,
+    "esModuleInterop": true,
+    "resolveJsonModule": true
+  }
+}

package/vercel.json

@@ -0,0 +1,12 @@
+{
+  "$schema": "https://openapi.vercel.sh/vercel.json",
+  "installCommand": "pnpm install",
+  "buildCommand": "pnpm --filter @aeon-ui/demo build",
+  "outputDirectory": "apps/demo/dist",
+  "framework": null,
+  "build": {
+    "env": {
+      "VITE_SITE_ORIGIN": "https://aeon-ui.com"
+    }
+  }
+}