aeon-ui-engine 1.0.3 → 1.2.0

package/packages/ui/src/sticky-bar.tsx

@@ -0,0 +1,42 @@
+import { StickyBar 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 Placement = 'top' | 'bottom' | 'inline'
+
+type RootProps = ComponentProps<typeof Headless.Root> & {
+  size?: BarSize
+  placement?: Placement
+}
+type ZoneProps = ComponentProps<typeof Headless.Leading>
+
+export const StickyBar = {
+  Root: ({ className, size, placement = 'top', ...props }: RootProps) => {
+    const styles = aeonBar({ size, placement })
+    return (
+      <Headless.Root
+        className={cn(styles.root, className)}
+        placement={placement}
+        {...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} />
+  },
+  Seam: ({ className, ...props }: ZoneProps) => {
+    const styles = aeonBar({})
+    return <Headless.Seam className={cn(styles.seam, className)} {...props} />
+  },
+}

package/packages/ui/src/switch.tsx

@@ -1,14 +1,27 @@
 import { Switch as Headless } from '@aeon-ui/react'
 import { aeonSwitch } from '@aeon-ui/panda/styled-system/recipes'
-import type { ComponentProps } from 'react'
+import type { ComponentProps, ReactNode } from 'react'
 import { cn } from './cn.js'
 
 const switchStyles = aeonSwitch()
 
+type RootProps = ComponentProps<typeof Headless.Root>
+
 export const Switch = {
-  Root: ({ className, ...props }: ComponentProps<typeof Headless.Root>) => (
-    <Headless.Root className={cn(switchStyles.root, className)} {...props} />
-  ),
+  Root: ({ className, children, ...props }: RootProps) => {
+    const styles = switchStyles
+    const body: ReactNode =
+      children ?? (
+        <Headless.Control className={styles.control}>
+          <Headless.Thumb className={styles.thumb} />
+        </Headless.Control>
+      )
+    return (
+      <Headless.Root className={cn(styles.root, className)} {...props}>
+        {body}
+      </Headless.Root>
+    )
+  },
   Control: ({ className, ...props }: ComponentProps<typeof Headless.Control>) => (
     <Headless.Control className={cn(switchStyles.control, className)} {...props} />
   ),

package/packages/ui/src/theme-switcher.tsx

@@ -0,0 +1,41 @@
+import { ThemeSwitcher as Headless } from '@aeon-ui/react'
+import { aeonThemeSwitcher } from '@aeon-ui/panda/styled-system/recipes'
+import type { ComponentProps } from 'react'
+import { cn } from './cn.js'
+
+type ThemeSwitcherSize = 'xs' | 'sm' | 'md'
+
+type RootProps = ComponentProps<typeof Headless.Root> & {
+  size?: ThemeSwitcherSize
+}
+
+type ModesProps = ComponentProps<typeof Headless.Modes>
+
+type ModeBtnProps = ComponentProps<typeof Headless.ModeBtn>
+
+type ThemeSelectProps = ComponentProps<typeof Headless.ThemeSelect>
+
+type ThemeTriggerProps = ComponentProps<typeof Headless.ThemeTrigger>
+
+export const ThemeSwitcher = {
+  Root: ({ className, size, ...props }: RootProps) => {
+    const styles = aeonThemeSwitcher({ size })
+    return <Headless.Root className={cn(styles.root, className)} {...props} />
+  },
+  Modes: ({ className, ...props }: ModesProps) => {
+    const styles = aeonThemeSwitcher({})
+    return <Headless.Modes className={cn(styles.modes, className)} {...props} />
+  },
+  ModeBtn: ({ className, ...props }: ModeBtnProps) => {
+    const styles = aeonThemeSwitcher({})
+    return <Headless.ModeBtn className={cn(styles.modeBtn, className)} {...props} />
+  },
+  ThemeSelect: ({ className, ...props }: ThemeSelectProps) => {
+    const styles = aeonThemeSwitcher({})
+    return <Headless.ThemeSelect className={cn(styles.themeSelect, className)} {...props} />
+  },
+  ThemeTrigger: ({ className, ...props }: ThemeTriggerProps) => {
+    const styles = aeonThemeSwitcher({})
+    return <Headless.ThemeTrigger className={cn(styles.themeTrigger, className)} {...props} />
+  },
+}

package/packages/ui/src/thread.tsx

@@ -0,0 +1,35 @@
+import { Thread as Headless } from '@aeon-ui/react'
+import { aeonThread } 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.Bubble>
+
+export const Thread = {
+  Root: ({ className, ...props }: RootProps) => {
+    const styles = aeonThread()
+    return <Headless.Root className={cn(styles.root, className)} {...props} />
+  },
+  List: ({ className, ...props }: PartProps) => {
+    const styles = aeonThread()
+    return <Headless.List className={cn(styles.list, className)} {...props} />
+  },
+  Item: ({ className, ...props }: ItemProps) => {
+    const styles = aeonThread()
+    return <Headless.Item className={cn(styles.item, className)} {...props} />
+  },
+  Bubble: ({ className, ...props }: PartProps) => {
+    const styles = aeonThread()
+    return <Headless.Bubble className={cn(styles.bubble, className)} {...props} />
+  },
+  Meta: ({ className, ...props }: PartProps) => {
+    const styles = aeonThread()
+    return <Headless.Meta className={cn(styles.meta, className)} {...props} />
+  },
+  Day: ({ className, ...props }: PartProps) => {
+    const styles = aeonThread()
+    return <Headless.Day className={cn(styles.day, className)} {...props} />
+  },
+}

package/packages/vue/package.json

@@ -8,8 +8,8 @@
     "url": "https://github.com/GenericCPU/aeon-ui.git",
     "directory": "packages/vue"
   },
-  "publishConfig": { "access": "public" },
-  "files": ["dist", "src/**/*.svelte", "README.md"],
+  "private": true,
+  "files": ["dist", "README.md"],
   "keywords": ["aeon-ui", "vue", "headless", "xstate", "statechart"],
   "type": "module",
   "sideEffects": false,
@@ -29,7 +29,7 @@
     "@aeon-ui/core": "workspace:*",
     "@aeon-ui/primitives": "workspace:*",
     "@xstate/vue": "^5.0.0",
-    "xstate": "^5.19.2"
+    "xstate": "^5.32.0"
   },
   "peerDependencies": {
     "vue": "^3.4.0"

package/scripts/vite-aliases.mjs

@@ -2,12 +2,18 @@
  * Vite + TypeScript wiring for apps that install `aeon-ui-engine` from npm.
  *
  * @example
- * import { aeonUiViteAliases, aeonUiOptimizeDeps } from 'aeon-ui-engine/vite'
+ * // vite.config.ts — one call, done
+ * import { aeonUiVitePlugin } from 'aeon-ui-engine/vite'
  *
  * export default defineConfig({
- *   resolve: { alias: aeonUiViteAliases() },
- *   optimizeDeps: aeonUiOptimizeDeps(),
+ *   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'
@@ -37,6 +43,10 @@ export function aeonUiViteAliases(opts = {}) {
 
   return [
     ...extra,
+    {
+      find: 'aeon-ui-engine/aeon.css',
+      replacement: path.join(packages, 'panda/aeon.css'),
+    },
     {
       find: '@aeon-ui/panda/styles.css',
       replacement: path.join(packages, 'panda/styled-system/styles.css'),
@@ -53,6 +63,14 @@ export function aeonUiViteAliases(opts = {}) {
       find: '@aeon-ui/panda/chrome.css',
       replacement: path.join(packages, 'panda/src/theme/chrome.css'),
     },
+    {
+      find: '@aeon-ui/panda/consumer-shell.css',
+      replacement: path.join(packages, 'panda/src/theme/consumer-shell.css'),
+    },
+    {
+      find: '@aeon-ui/panda/electron.css',
+      replacement: path.join(packages, 'panda/src/theme/electron.css'),
+    },
     {
       find: '@aeon-ui/panda/styled-system/css',
       replacement: path.join(packages, 'panda/styled-system/css/index.mjs'),
@@ -73,11 +91,16 @@ export function aeonUiViteAliases(opts = {}) {
       find: '@aeon-ui/surface/surface.css',
       replacement: path.join(packages, 'surface/surface.css'),
     },
+    {
+      find: '@aeon-ui/core/theme-transition.css',
+      replacement: path.join(packages, 'core/theme-transition.css'),
+    },
     { find: '@aeon-ui/surface', replacement: path.join(packages, 'surface/src/index.ts') },
     { find: '@aeon-ui/core', replacement: path.join(packages, 'core/src/index.ts') },
     { find: '@aeon-ui/primitives', replacement: path.join(packages, 'primitives/src/index.ts') },
     { find: '@aeon-ui/react', replacement: path.join(packages, 'react/src/index.ts') },
     { find: '@aeon-ui/ui', replacement: path.join(packages, 'ui/src/index.ts') },
+    { find: '@aeon-ui/schemas', replacement: path.join(packages, 'schemas/src/index.ts') },
     { find: '@aeon-ui/panda', replacement: path.join(packages, 'panda') },
   ]
 }
@@ -123,3 +146,42 @@ export function aeonUiTsconfigPaths(opts = {}) {
     '@aeon-ui/panda/styled-system/recipes': [`${prefix}/panda/styled-system/recipes/index.d.ts`],
   }
 }
+
+/**
+ * All-in-one Vite plugin — aliases + optimizeDeps in one call.
+ *
+ * @example
+ * import { aeonUiVitePlugin } from 'aeon-ui-engine/vite'
+ *
+ * export default defineConfig({
+ *   plugins: [react(), aeonUiVitePlugin()],
+ * })
+ */
+export function aeonUiVitePlugin(opts = {}) {
+  const alias = aeonUiViteAliases(opts)
+  const optimizeDeps = aeonUiOptimizeDeps(opts)
+
+  return {
+    name: 'aeon-ui',
+    enforce: 'pre',
+    config(userConfig) {
+      return {
+        resolve: {
+          alias: [...(userConfig.resolve?.alias ?? []), ...alias],
+        },
+        optimizeDeps: {
+          ...userConfig.optimizeDeps,
+          ...optimizeDeps,
+          include: [
+            ...(optimizeDeps.include ?? []),
+            ...(userConfig.optimizeDeps?.include ?? []),
+          ],
+          exclude: [
+            ...(optimizeDeps.exclude ?? []),
+            ...(userConfig.optimizeDeps?.exclude ?? []),
+          ],
+        },
+      }
+    },
+  }
+}

package/scripts/xstate-introspect.mjs

@@ -0,0 +1,68 @@
+import { asyncMachine } from '../packages/primitives/dist/index.js';
+import { createActor, getStateNodes } from 'xstate';
+import { getStateNodes as graphGetStateNodes } from 'xstate/graph';
+
+const machine = asyncMachine;
+
+console.log('=== machine keys ===');
+console.log(Object.keys(machine).sort().join(', '));
+
+console.log('\n=== machine.states keys ===');
+console.log(Object.keys(machine.states));
+
+const idle = machine.states.idle;
+console.log('\n=== idle state node keys ===');
+console.log(Object.keys(idle).sort().join(', '));
+
+console.log('\n=== idle.events ===');
+console.log(idle.events);
+
+console.log('\n=== idle.config.on ===');
+console.log(idle.config?.on ?? idle.config);
+
+const actor = createActor(machine);
+actor.start();
+const snap = actor.getSnapshot();
+
+console.log('\n=== snapshot.value ===');
+console.log(snap.value);
+
+console.log("\n=== snapshot.can({ type: 'FETCH' }) ===");
+console.log(snap.can({ type: 'FETCH' }));
+
+console.log('\n=== snapshot keys (sorted) ===');
+console.log(Object.keys(snap).sort().join(', '));
+
+if (typeof snap.getNextEvents === 'function') {
+  console.log('\n=== snap.getNextEvents() ===');
+  console.log(snap.getNextEvents());
+}
+
+// _nodes internal?
+if (snap._nodes) {
+  console.log('\n=== snap._nodes ids ===');
+  console.log([...snap._nodes].map((n) => n.id));
+}
+
+const nodes = getStateNodes(machine.root, snap.value);
+console.log('\n=== getStateNodes(root, value) ===');
+console.log(nodes.map((n) => n.id));
+console.log('active node .events:', nodes.map((n) => ({ id: n.id, events: n.events })));
+
+const allNodes = graphGetStateNodes(machine);
+console.log('\n=== graph.getStateNodes(machine) ===');
+for (const n of allNodes) {
+  console.log({ id: n.id, events: n.events, on: n.config?.on ? Object.keys(n.config.on) : [] });
+}
+
+const eventTypes = ['FETCH', 'RESOLVE', 'REJECT', 'RESET', 'STALE', 'REFRESH'];
+console.log('\n=== idle snapshot: can() per event ===');
+for (const type of eventTypes) {
+  const ev =
+    type === 'RESOLVE'
+      ? { type, data: { x: 1 } }
+      : type === 'REJECT'
+        ? { type, error: 'e' }
+        : { type };
+  console.log(type, snap.can(ev));
+}

package/packages/react/src/async/legacy-region.tsx

@@ -1,38 +0,0 @@
-import { partAttrs } from '@aeon-ui/core'
-import { createAsyncMachine } from '@aeon-ui/primitives'
-import { useMemo, type ReactNode } from 'react'
-import { useAeonMachine } from '../hooks/use-aeon-machine.js'
-import { mergeProps } from '../utils/merge-props.js'
-
-export interface AsyncRegionProps<T = unknown> {
-  children?: ReactNode | ((state: { status: string; data: T | null; error: string | null }) => ReactNode)
-  className?: string
-}
-
-/** @deprecated Prefer `<Async.Root>` with Track, Readout, and Actions. */
-export function AsyncRegion<T = unknown>({ children, className }: AsyncRegionProps<T>) {
-  const machine = useMemo(() => createAsyncMachine<T>(), [])
-  const [snapshot] = useAeonMachine(machine)
-  const status = snapshot.value as string
-  const { data, error } = snapshot.context
-
-  const content =
-    typeof children === 'function' ? children({ status, data: data as T | null, error }) : children
-
-  return (
-    <div
-      className={className}
-      {...mergeProps(partAttrs('async', 'root', { state: status }))}
-    >
-      {content ?? (
-        <>
-          {status === 'idle' && <span data-aeon-part="idle">Ready</span>}
-          {status === 'loading' && <span data-aeon-part="loading">Loading…</span>}
-          {status === 'success' && <span data-aeon-part="success">{String(data)}</span>}
-          {status === 'failure' && <span data-aeon-part="failure">{error}</span>}
-          {status === 'empty' && <span data-aeon-part="empty">No results</span>}
-        </>
-      )}
-    </div>
-  )
-}