aeon-ui-engine 1.0.0

package/apps/demo/public/favicon.svg

@@ -0,0 +1,16 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" role="img" aria-label="Aeon UI">
+  <rect width="32" height="32" rx="8" fill="#0a0c10"/>
+  <rect
+    x="6.5"
+    y="6.5"
+    width="15"
+    height="15"
+    rx="3.5"
+    fill="none"
+    stroke="#5eead4"
+    stroke-width="1.75"
+    opacity="0.9"
+  />
+  <rect x="10.5" y="10.5" width="15" height="15" rx="3.5" fill="#e8ecf4"/>
+  <circle cx="21" cy="21" r="2.5" fill="#5eead4"/>
+</svg>

package/apps/demo/public/og.svg

@@ -0,0 +1,35 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="1200" height="630" viewBox="0 0 1200 630" role="img" aria-label="Aeon UI - Future-proof UI infrastructure">
+  <defs>
+    <linearGradient id="bg" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="#121820"/>
+      <stop offset="55%" stop-color="#0c0e12"/>
+      <stop offset="100%" stop-color="#080a0e"/>
+    </linearGradient>
+    <linearGradient id="accent" x1="0%" y1="0%" x2="100%" y2="0%">
+      <stop offset="0%" stop-color="#2dd4bf" stop-opacity="0"/>
+      <stop offset="45%" stop-color="#5eead4"/>
+      <stop offset="100%" stop-color="#2dd4bf" stop-opacity="0"/>
+    </linearGradient>
+    <pattern id="grid" width="48" height="48" patternUnits="userSpaceOnUse">
+      <path d="M 48 0 L 0 0 0 48" fill="none" stroke="#5eead4" stroke-width="0.5" opacity="0.08"/>
+    </pattern>
+    <radialGradient id="glow" cx="72%" cy="28%" r="45%">
+      <stop offset="0%" stop-color="#5eead4" stop-opacity="0.14"/>
+      <stop offset="100%" stop-color="#5eead4" stop-opacity="0"/>
+    </radialGradient>
+  </defs>
+  <rect width="1200" height="630" fill="url(#bg)"/>
+  <rect width="1200" height="630" fill="url(#grid)"/>
+  <rect width="1200" height="630" fill="url(#glow)"/>
+
+  <text x="80" y="268" fill="#f0f4e8" font-family="Syne" font-size="88" font-weight="700" letter-spacing="-0.04em">Aeon UI</text>
+  <text x="80" y="340" fill="#94a3b8" font-family="Instrument Sans" font-size="36" font-weight="500">Future-proof UI infrastructure</text>
+  <text x="80" y="400" fill="#64748b" font-family="IBM Plex Mono" font-size="22" font-weight="400">Statecharts / Headless primitives / Panda CSS</text>
+
+  <rect x="80" y="430" width="220" height="36" rx="6" fill="rgba(94, 234, 212, 0.12)" stroke="rgba(94, 234, 212, 0.35)" stroke-width="1"/>
+  <text x="104" y="454" fill="#5eead4" font-family="IBM Plex Mono" font-size="15" font-weight="500">@aeon-ui/ui</text>
+
+  <text x="80" y="548" fill="#94a3b8" font-family="Instrument Sans" font-size="17" font-weight="500">A project by</text>
+  <text x="228" y="548" fill="#5eead4" font-family="Syne" font-size="22" font-weight="700">SpiderCorp</text>
+  <text x="80" y="578" fill="#64748b" font-family="IBM Plex Mono" font-size="14" font-weight="400">spidercorp.xyz</text>
+</svg>

package/apps/demo/scripts/generate-og-png.mjs

@@ -0,0 +1,60 @@
+import { createRequire } from 'node:module'
+import { mkdtempSync, readFileSync, writeFileSync } from 'node:fs'
+import { tmpdir } from 'node:os'
+import { dirname, join } from 'node:path'
+import { fileURLToPath } from 'node:url'
+import { Resvg } from '@resvg/resvg-js'
+import wawoff2 from 'wawoff2'
+
+const require = createRequire(import.meta.url)
+const root = join(dirname(fileURLToPath(import.meta.url)), '..')
+const svgPath = join(root, 'public', 'og.svg')
+const outPath = join(root, 'public', 'og.png')
+
+/** @type {Array<[slug: string, pkg: string, file: string]>} */
+const FONT_SOURCES = [
+  ['Syne-700', '@fontsource/syne', 'syne-latin-700-normal.woff2'],
+  ['InstrumentSans-500', '@fontsource/instrument-sans', 'instrument-sans-latin-500-normal.woff2'],
+  ['InstrumentSans-400', '@fontsource/instrument-sans', 'instrument-sans-latin-400-normal.woff2'],
+  ['IBMPlexMono-500', '@fontsource/ibm-plex-mono', 'ibm-plex-mono-latin-500-normal.woff2'],
+  ['IBMPlexMono-400', '@fontsource/ibm-plex-mono', 'ibm-plex-mono-latin-400-normal.woff2'],
+]
+
+function woff2Path(pkg, filename) {
+  return join(dirname(require.resolve(`${pkg}/package.json`)), 'files', filename)
+}
+
+/** resvg `fontFiles` only loads SFNT/TTF — convert @fontsource WOFF2 first. */
+async function loadFontFiles() {
+  const dir = mkdtempSync(join(tmpdir(), 'aeon-og-fonts-'))
+  const fontFiles = []
+
+  for (const [slug, pkg, file] of FONT_SOURCES) {
+    const woff2 = readFileSync(woff2Path(pkg, file))
+    const sfnt = await wawoff2.decompress(woff2)
+    const ttfPath = join(dir, `${slug}.ttf`)
+    writeFileSync(ttfPath, Buffer.from(sfnt))
+    fontFiles.push(ttfPath)
+  }
+
+  return fontFiles
+}
+
+const svg = readFileSync(svgPath, 'utf8')
+const fontFiles = await loadFontFiles()
+
+const resvg = new Resvg(svg, {
+  fitTo: { mode: 'width', value: 1200 },
+  font: {
+    loadSystemFonts: false,
+    fontFiles,
+    defaultFontFamily: 'Instrument Sans',
+    sansSerifFamily: 'Instrument Sans',
+    serifFamily: 'Syne',
+    monospaceFamily: 'IBM Plex Mono',
+  },
+})
+
+const png = resvg.render().asPng()
+writeFileSync(outPath, png)
+console.log(`Wrote ${outPath} (${png.length} bytes)`)

package/apps/demo/src/App.tsx

@@ -0,0 +1,31 @@
+import { Toast } from '@aeon-ui/ui'
+import { GridMesh } from './components/GridMesh.js'
+import { LandingFaq } from './components/LandingFaq.js'
+import { LandingFooter } from './components/LandingFooter.js'
+import { LandingHeader } from './components/LandingHeader.js'
+import { LandingHero } from './components/LandingHero.js'
+import { DiagramsSection } from './components/DiagramsSection.js'
+import { LayersSection } from './components/LayersSection.js'
+import { PhilosophySection } from './components/PhilosophySection.js'
+import { PlaygroundSection } from './components/PlaygroundSection.js'
+
+export function App() {
+  return (
+    <Toast.Provider>
+      <GridMesh />
+      <div className="landing">
+        <LandingHeader />
+        <main>
+          <LandingHero />
+          <LayersSection />
+          <DiagramsSection />
+          <PlaygroundSection />
+          <PhilosophySection />
+          <LandingFaq />
+        </main>
+        <LandingFooter />
+      </div>
+      <Toast.Viewport placement="bottom-end" />
+    </Toast.Provider>
+  )
+}

package/apps/demo/src/aeonDiagrams.ts

@@ -0,0 +1,100 @@
+/** Mermaid sources — kept in sync with @aeon-ui/primitives machines (STATES.md). */
+
+export type AeonDiagram = {
+  id: string
+  title: string
+  caption: string
+  source: string
+  packageRef: string
+}
+
+export const aeonNorthStarDiagram = `flowchart LR
+  chart["Statechart\\n(XState)"]
+  snap["Snapshot"]
+  attr["data-aeon-state"]
+  ui["UI = f(state)"]
+  chart --> snap --> attr --> ui`
+
+export const asyncLifecycleDiagram = `stateDiagram-v2
+  direction LR
+  [*] --> idle
+  idle --> loading: FETCH
+  idle --> idle: RESET / clear
+  loading --> success: RESOLVE
+  loading --> empty: RESOLVE (empty)
+  loading --> failure: REJECT
+  success --> loading: FETCH
+  empty --> loading: FETCH
+  failure --> loading: FETCH
+  success --> idle: RESET
+  empty --> idle: RESET
+  failure --> idle: RESET`
+
+export const buttonLifecycleDiagram = `stateDiagram-v2
+  direction LR
+  [*] --> idle
+  idle --> pending: PRESS
+  idle --> disabled: DISABLE
+  pending --> success: SUCCEED
+  pending --> failure: FAIL
+  pending --> disabled: DISABLE
+  success --> idle: RESET
+  success --> pending: PRESS
+  failure --> idle: RESET
+  failure --> pending: PRESS
+  disabled --> idle: ENABLE`
+
+export const fieldOrthogonalDiagram = `stateDiagram-v2
+  direction TB
+  state "interaction region" as interaction {
+    direction LR
+    [*] --> pristine
+    pristine --> dirty: INPUT / BLUR
+    dirty --> pristine: RESET
+  }
+  state "validation region" as validation {
+    direction LR
+    [*] --> valid
+    valid --> invalid: VALIDATE invalid
+    invalid --> valid: VALIDATE valid
+    invalid --> valid: RESET
+  }
+  state "submission region" as submission {
+    direction LR
+    [*] --> idle
+    idle --> pending: SUBMIT
+    pending --> idle: SUBMIT_DONE / SUBMIT_FAIL
+  }`
+
+export const aeonDiagrams: AeonDiagram[] = [
+  {
+    id: 'north-star',
+    title: 'North star',
+    caption: 'Behavior is modeled first; the DOM expresses the snapshot — never the other way around.',
+    source: aeonNorthStarDiagram,
+    packageRef: 'PHILOSOPHY.md',
+  },
+  {
+    id: 'async',
+    title: 'Async data region',
+    caption:
+      'Sequential lifecycle from createAsyncMachine(): idle · loading · success · failure · empty, plus stale on success.',
+    source: asyncLifecycleDiagram,
+    packageRef: '@aeon-ui/primitives — createAsyncMachine()',
+  },
+  {
+    id: 'button',
+    title: 'Button lifecycle',
+    caption: 'Submit controls: pending, success, and failure are real states — not overloaded disabled.',
+    source: buttonLifecycleDiagram,
+    packageRef: '@aeon-ui/primitives — buttonLifecycleMachine',
+  },
+  {
+    id: 'field',
+    title: 'Field (orthogonal regions)',
+    caption:
+      'Parallel regions flatten to one attribute: interaction:dirty validation:invalid submission:idle',
+    source: fieldOrthogonalDiagram,
+    packageRef: '@aeon-ui/primitives — fieldMachine',
+  },
+]

package/apps/demo/src/app.css

@@ -0,0 +1,16 @@
+@import './landing.css';
+@import './demo-layout.css';
+
+html {
+  scroll-behavior: smooth;
+}
+
+@media (prefers-reduced-motion: reduce) {
+  html {
+    scroll-behavior: auto;
+  }
+}
+
+a {
+  color: inherit;
+}

package/apps/demo/src/components/ActionCluster.tsx

@@ -0,0 +1,20 @@
+import { Button, cn } from '@aeon-ui/ui'
+import type { ReactNode } from 'react'
+
+export interface ActionClusterProps {
+  children: ReactNode
+  className?: string
+}
+
+/** Machine console actions — spaced buttons by default. */
+export function ActionCluster({ children, className }: ActionClusterProps) {
+  return (
+    <Button.Group
+      className={cn('machine-console__actions', className)}
+      data-aeon-scope="machine"
+      data-aeon-part="actions"
+    >
+      {children}
+    </Button.Group>
+  )
+}

package/apps/demo/src/components/AsyncMachineDemo.tsx

@@ -0,0 +1,97 @@
+import { useAsyncContext } from '@aeon-ui/react'
+import { Async, Button } from '@aeon-ui/ui'
+import { ActionCluster } from './ActionCluster.js'
+
+export interface AsyncMachineDemoProps {
+  /** Playground shows failure and empty paths; hero always succeeds for a crisp preview. */
+  variant?: 'hero' | 'playground'
+}
+
+const readouts: Record<string, Record<'hero' | 'playground', string>> = {
+  idle: {
+    hero: 'Idle — ready to fetch',
+    playground: 'Idle — press Simulate fetch when ready',
+  },
+  loading: {
+    hero: 'Loading…',
+    playground: 'Loading…',
+  },
+  success: {
+    hero: 'Success',
+    playground: 'Success — data on context',
+  },
+  failure: {
+    hero: 'Failure',
+    playground: 'Failure — error on context',
+  },
+  empty: {
+    hero: 'Empty',
+    playground: 'Empty — resolved with no rows',
+  },
+}
+
+function AsyncMachineControls({ variant }: { variant: 'hero' | 'playground' }) {
+  const { status, send } = useAsyncContext()
+  const runFetch = () => {
+    send({ type: 'FETCH' })
+    const delay = variant === 'hero' ? 700 : 900
+    setTimeout(() => {
+      if (variant === 'hero') {
+        send({ type: 'RESOLVE', data: 'Payload OK' })
+        return
+      }
+      const roll = Math.random()
+      if (roll < 0.25) {
+        send({ type: 'REJECT', error: 'Network unreachable' })
+      } else if (roll < 0.4) {
+        send({ type: 'RESOLVE', data: [] })
+      } else {
+        send({ type: 'RESOLVE', data: 'Aeon payload received' })
+      }
+    }, delay)
+  }
+
+  return (
+    <ActionCluster className="machine-console__actions">
+      <Button.Root size="sm" onClick={runFetch} disabled={status === 'loading'}>
+        {variant === 'hero' ? 'Run' : 'Simulate fetch'}
+      </Button.Root>
+      <Button.Root size="sm" variant="outline" onClick={() => send({ type: 'RESET' })}>
+        Reset
+      </Button.Root>
+      {variant === 'playground' && status === 'success' && (
+        <Button.Root size="sm" variant="ghost" onClick={() => send({ type: 'STALE' })}>
+          Mark stale
+        </Button.Root>
+      )}
+    </ActionCluster>
+  )
+}
+
+function AsyncMachineReadout({ variant }: { variant: 'hero' | 'playground' }) {
+  const { status, data, error, stale } = useAsyncContext()
+  const readout =
+    status === 'success'
+      ? String(data ?? (variant === 'hero' ? 'Payload OK' : 'Aeon payload received'))
+      : status === 'failure'
+        ? String(error ?? 'Network unreachable')
+        : (readouts[status]?.[variant] ?? readouts.idle[variant])
+
+  return (
+    <p className="live-status__text">
+      {stale && status === 'success' ? `${readout} (stale — refresh recommended)` : readout}
+    </p>
+  )
+}
+
+export function AsyncMachineDemo({ variant = 'playground' }: AsyncMachineDemoProps) {
+  return (
+    <Async.Root data-aeon-scope="machine" data-aeon-part="console">
+      <Async.Track />
+      <Async.Readout>
+        <AsyncMachineReadout variant={variant} />
+      </Async.Readout>
+      <AsyncMachineControls variant={variant} />
+    </Async.Root>
+  )
+}

package/apps/demo/src/components/ButtonLifecycleDemo.tsx

@@ -0,0 +1,63 @@
+import { buttonLifecycleMachine } from '@aeon-ui/primitives'
+import { useAeonMachine } from '@aeon-ui/react'
+import { Button } from '@aeon-ui/ui'
+import { useEffect } from 'react'
+
+export function ButtonLifecycleDemo() {
+  const [snapshot, send] = useAeonMachine(buttonLifecycleMachine)
+  const status = snapshot.value as string
+
+  useEffect(() => {
+    if (status !== 'success') return
+    const t = setTimeout(() => send({ type: 'RESET' }), 1400)
+    return () => clearTimeout(t)
+  }, [status, send])
+
+  const label =
+    status === 'pending'
+      ? 'Submitting…'
+      : status === 'success'
+        ? 'Saved'
+        : status === 'failure'
+          ? 'Try again'
+          : 'Submit'
+
+  return (
+    <div className="demo-stack demo-stack--tight" data-aeon-scope="demo" data-aeon-part="button-lifecycle">
+      <Button.Group>
+        <Button.Root
+          status={
+            status === 'disabled'
+              ? 'disabled'
+              : (status as 'idle' | 'pending' | 'success' | 'failure')
+          }
+          disabled={status === 'disabled'}
+          onClick={() => {
+            if (status === 'failure') {
+              send({ type: 'RESET' })
+              return
+            }
+            if (status === 'idle') {
+              send({ type: 'PRESS' })
+              setTimeout(() => {
+                if (Math.random() > 0.3) send({ type: 'SUCCEED' })
+                else send({ type: 'FAIL' })
+              }, 900)
+            }
+          }}
+        >
+          {label}
+        </Button.Root>
+        <Button.Root
+          variant="outline"
+          onClick={() => send({ type: status === 'disabled' ? 'ENABLE' : 'DISABLE' })}
+        >
+          {status === 'disabled' ? 'Enable' : 'Disable'}
+        </Button.Root>
+      </Button.Group>
+      <p className="playground__block-sub" style={{ marginBottom: 0 }}>
+        Active state: <strong>{status}</strong>
+      </p>
+    </div>
+  )
+}

package/apps/demo/src/components/CodeExample.tsx

@@ -0,0 +1,7 @@
+export function CodeExample({ code }: { code: string }) {
+  return (
+    <pre className="code-example">
+      <code>{code.trim()}</code>
+    </pre>
+  )
+}

package/apps/demo/src/components/ComboboxDemo.tsx

@@ -0,0 +1,30 @@
+import { Combobox } from '@aeon-ui/ui'
+import { useState } from 'react'
+
+const FRUITS = [
+  { value: 'apple', label: 'Apple' },
+  { value: 'banana', label: 'Banana' },
+  { value: 'cherry', label: 'Cherry' },
+  { value: 'durian', label: 'Durian' },
+  { value: 'elderberry', label: 'Elderberry' },
+  { value: 'fig', label: 'Fig' },
+  { value: 'grape', label: 'Grape' },
+] as const
+
+export function ComboboxDemo() {
+  const [value, setValue] = useState<string>('apple')
+
+  return (
+    <Combobox.Root value={value} onValueChange={setValue} className="demo-combobox">
+      <Combobox.Input placeholder="Search fruit…" aria-label="Fruit" />
+      <Combobox.Content>
+        {FRUITS.map((f) => (
+          <Combobox.Item key={f.value} value={f.value} textValue={f.label}>
+            {f.label}
+          </Combobox.Item>
+        ))}
+        <Combobox.Empty>No matching fruit</Combobox.Empty>
+      </Combobox.Content>
+    </Combobox.Root>
+  )
+}

package/apps/demo/src/components/DiagramsSection.tsx

@@ -0,0 +1,38 @@
+import { aeonDiagrams } from '../aeonDiagrams.js'
+import { site } from '../site.js'
+import { MermaidDiagram } from './MermaidDiagram.js'
+
+export function DiagramsSection() {
+  return (
+    <section id="diagrams" className="section">
+      <div className="container">
+        <header className="section-header">
+          <p className="section-label">{site.diagramsLabel}</p>
+          <h2 className="section-title">{site.diagramsTitle}</h2>
+          <p className="section-lead">{site.diagramsLead}</p>
+        </header>
+
+        <div className="diagrams__grid">
+          {aeonDiagrams.map((d) => (
+            <article key={d.id} className="panel diagram-card" data-aeon-scope="diagrams">
+              <header className="diagram-card__head">
+                <h3>{d.title}</h3>
+                <p>{d.caption}</p>
+                <code className="diagram-card__ref">{d.packageRef}</code>
+              </header>
+              <MermaidDiagram source={d.source} title={d.title} />
+            </article>
+          ))}
+        </div>
+
+        <p className="diagrams__footnote">
+          Charts match executable machines in the repo — see{' '}
+          <a href={site.statesDocUrl} target="_blank" rel="noreferrer">
+            STATES.md
+          </a>{' '}
+          and the playground for live snapshots.
+        </p>
+      </div>
+    </section>
+  )
+}

package/apps/demo/src/components/FieldStateDemo.tsx

@@ -0,0 +1,51 @@
+import { useFieldContext } from '@aeon-ui/react'
+import { Button, Field } from '@aeon-ui/ui'
+
+function FieldSnapshot() {
+  const { stateAttr } = useFieldContext()
+  return (
+    <p className="playground__block-sub" style={{ marginBottom: 0 }}>
+      <code>{stateAttr}</code>
+    </p>
+  )
+}
+
+function FieldActions() {
+  const { send } = useFieldContext()
+
+  return (
+    <Button.Group>
+      <Button.Root variant="outline" onClick={() => send({ type: 'RESET' })}>
+        Reset
+      </Button.Root>
+      <Button.Root
+        onClick={() => {
+          send({ type: 'SUBMIT' })
+          setTimeout(() => send({ type: 'SUBMIT_DONE' }), 800)
+        }}
+      >
+        Simulate submit
+      </Button.Root>
+    </Button.Group>
+  )
+}
+
+export function FieldStateDemo() {
+  return (
+    <div className="demo-stack" data-aeon-scope="demo" data-aeon-part="field-states">
+      <Field.Root>
+        <Field.Label htmlFor="aeon-field-email">Work email</Field.Label>
+        <Field.Control
+          id="aeon-field-email"
+          type="email"
+          placeholder="you@studio.com"
+          validate={(v) => /^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(v)}
+        />
+        <Field.Message>Enter a valid email address.</Field.Message>
+        <Field.Hint>Type or blur to mark dirty. Invalid email marks validation:invalid.</Field.Hint>
+        <FieldActions />
+        <FieldSnapshot />
+      </Field.Root>
+    </div>
+  )
+}

package/apps/demo/src/components/GridMesh.tsx

@@ -0,0 +1,8 @@
+export function GridMesh() {
+  return (
+    <div className="grid-mesh" aria-hidden>
+      <div className="grid-mesh__lines" />
+      <div className="grid-mesh__vignette" />
+    </div>
+  )
+}

package/apps/demo/src/components/HeroInstall.tsx

@@ -0,0 +1,10 @@
+import { site } from '../site.js'
+
+export function HeroInstallLine() {
+  return (
+    <p className="hero-install__line" data-aeon-scope="hero" data-aeon-part="install">
+      <span className="hero-install__label">{site.heroInstallLabel}</span>
+      <span className="hero-install__access">{site.heroInstallAccess}</span>
+    </p>
+  )
+}

package/apps/demo/src/components/LandingFaq.tsx

@@ -0,0 +1,29 @@
+import { Accordion } from '@aeon-ui/ui'
+import { faq, site } from '../site.js'
+import { CodeExample } from './CodeExample.js'
+
+export function LandingFaq() {
+  return (
+    <section id="faq" className="section">
+      <div className="container">
+        <header className="section-header">
+          <p className="section-label">{site.faqLabel}</p>
+          <h2 className="section-title">{site.faqTitle}</h2>
+          <p className="section-lead">{site.faqLead}</p>
+        </header>
+
+        <Accordion.Root defaultValue={[faq[0].id]}>
+          {faq.map((item) => (
+            <Accordion.Item key={item.id} value={item.id}>
+              <Accordion.ItemTrigger value={item.id}>{item.question}</Accordion.ItemTrigger>
+              <Accordion.ItemContent value={item.id}>
+                <p>{item.answer}</p>
+                <CodeExample code={item.example} />
+              </Accordion.ItemContent>
+            </Accordion.Item>
+          ))}
+        </Accordion.Root>
+      </div>
+    </section>
+  )
+}

package/apps/demo/src/components/LandingFooter.tsx

@@ -0,0 +1,22 @@
+import { site } from '../site.js'
+
+export function LandingFooter() {
+  const year = new Date().getFullYear()
+
+  return (
+    <footer className="landing-footer">
+      <div className="container landing-footer__inner">
+        <p>
+          © {year} {site.brand} · {site.tagline}
+        </p>
+        <p className="landing-footer__tag">
+          A project by{' '}
+          <a href={site.studioUrl} target="_blank" rel="noreferrer">
+            {site.studio}
+          </a>
+          <span className="text-accent"> · spidercorp.xyz</span>
+        </p>
+      </div>
+    </footer>
+  )
+}