aeon-ui-engine 1.0.0

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

@@ -0,0 +1,60 @@
+import { useEffect, useState } from 'react'
+import { navLinks } from '../nav.js'
+import { site } from '../site.js'
+import { Button } from '@aeon-ui/ui'
+import { ThemeSwitcher } from './ThemeSwitcher.js'
+
+export function LandingHeader() {
+  const [scrolled, setScrolled] = useState(false)
+  const [active, setActive] = useState('')
+
+  useEffect(() => {
+    const onScroll = () => {
+      setScrolled(window.scrollY > 4)
+      const offset = 120
+      for (const link of [...navLinks].reverse()) {
+        const el = document.getElementById(link.sectionId)
+        if (el && el.getBoundingClientRect().top <= offset) {
+          setActive(link.href)
+          return
+        }
+      }
+      setActive('')
+    }
+    onScroll()
+    window.addEventListener('scroll', onScroll, { passive: true })
+    return () => window.removeEventListener('scroll', onScroll)
+  }, [])
+
+  return (
+    <header className={`landing-header${scrolled ? ' landing-header--scrolled' : ''}`}>
+      <div className="landing-header__shell">
+        <a href="#" className="landing-header__brand" onClick={(e) => e.preventDefault()}>
+          {site.brand}
+        </a>
+        <nav className="landing-header__nav" aria-label="Primary">
+          {navLinks.map((l) => (
+            <a
+              key={l.href}
+              href={l.href}
+              className={active === l.href ? 'is-active' : undefined}
+            >
+              {l.label}
+            </a>
+          ))}
+        </nav>
+        <div className="landing-header__utilities">
+          <ThemeSwitcher />
+          <a href="#playground" className="landing-header__cta">
+            <Button.Root size="xs">
+              <span className="landing-header__cta-label landing-header__cta-label--long">
+                {site.heroCtaPrimary}
+              </span>
+              <span className="landing-header__cta-label landing-header__cta-label--short">Demo</span>
+            </Button.Root>
+          </a>
+        </div>
+      </div>
+    </header>
+  )
+}

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

@@ -0,0 +1,55 @@
+import { Button } from '@aeon-ui/ui'
+import { HeroInstallLine } from './HeroInstall.js'
+import { site } from '../site.js'
+import { AsyncMachineDemo } from './AsyncMachineDemo.js'
+
+export function LandingHero() {
+  return (
+    <section className="hero">
+      <div className="container hero__grid">
+        <div className="hero__copy">
+          <p className="hero__eyebrow">{site.heroEyebrow}</p>
+          <h1 className="hero__title">
+            {site.heroTitle}
+            <br />
+            <span className="text-accent">{site.heroAccent}</span>
+          </h1>
+          <p className="hero__lead">{site.heroLead}</p>
+          <p className="hero__sub">{site.heroSub}</p>
+          <HeroInstallLine />
+          <Button.Group className="hero__actions">
+            <a href="#playground">
+              <Button.Root>{site.heroCtaPrimary}</Button.Root>
+            </a>
+            <a href="#layers">
+              <Button.Root variant="outline">{site.heroCtaSecondary}</Button.Root>
+            </a>
+          </Button.Group>
+          <div className="hero__stats panel" role="list">
+            {site.heroStats.map((s, i) => (
+              <div
+                key={s.label}
+                className="hero__stat"
+                role="listitem"
+                data-aeon-scope="hero"
+                data-aeon-part="stat"
+                data-aeon-state={i === 0 ? 'active' : 'inactive'}
+              >
+                <span className="hero__stat-label">{s.label}</span>
+                <span className="hero__stat-detail">{s.detail}</span>
+                <code className="hero__stat-example">{s.example}</code>
+              </div>
+            ))}
+          </div>
+        </div>
+        <div className="hero__visual">
+          <div className="panel state-card" data-aeon-scope="hero" data-aeon-part="preview">
+            <p className="state-card__label">{site.stateCardLabel}</p>
+            <p className="state-card__hint">{site.stateCardHint}</p>
+            <AsyncMachineDemo variant="hero" />
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}

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

@@ -0,0 +1,51 @@
+import { commitments, layers, site } from '../site.js'
+import { CodeExample } from './CodeExample.js'
+
+export function LayersSection() {
+  return (
+    <section id="layers" className="section">
+      <div className="container">
+        <header className="section-header">
+          <p className="section-label">{site.layersLabel}</p>
+          <h2 className="section-title">{site.layersTitle}</h2>
+          <p className="section-lead">{site.layersLead}</p>
+        </header>
+
+        <div className="layers__commitments panel" role="list">
+          {commitments.map((c) => (
+            <div key={c.id} className="layers__commitment" role="listitem">
+              <h3>{c.title}</h3>
+              <p>{c.description}</p>
+            </div>
+          ))}
+        </div>
+
+        <div className="layers__grid" role="list">
+          {layers.map((l, index) => (
+            <article
+              key={l.id}
+              className="panel layer-card"
+              role="listitem"
+              data-aeon-scope="layers"
+              data-aeon-part="card"
+            >
+              <span className="layer-card__index" aria-hidden>
+                {String(index + 1).padStart(2, '0')}
+              </span>
+              <h3>{l.title}</h3>
+              <p>{l.description}</p>
+              <ul>
+                {l.highlights.map((h) => (
+                  <li key={h}>{h}</li>
+                ))}
+              </ul>
+              <div className="layer-card__example">
+                <CodeExample code={l.example} />
+              </div>
+            </article>
+          ))}
+        </div>
+      </div>
+    </section>
+  )
+}

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

@@ -0,0 +1,84 @@
+import { useEffect, useId, useState } from 'react'
+
+let mermaidReady = false
+
+function ensureMermaid(mermaid: typeof import('mermaid').default) {
+  if (mermaidReady) return
+  mermaid.initialize({
+    startOnLoad: false,
+    theme: 'base',
+    themeVariables: {
+      fontFamily: 'Instrument Sans, system-ui, sans-serif',
+      fontSize: '14px',
+      primaryColor: '#1a1f2e',
+      primaryTextColor: '#e8ecf4',
+      primaryBorderColor: '#5eead4',
+      lineColor: '#8b95a8',
+      secondaryColor: '#12161f',
+      tertiaryColor: '#0e1118',
+      noteBkgColor: '#12161f',
+      noteTextColor: '#b8c0d0',
+      noteBorderColor: '#3d4556',
+    },
+    state: {
+      nodeSpacing: 48,
+      rankSpacing: 56,
+    },
+    flowchart: {
+      curve: 'basis',
+      padding: 12,
+    },
+  })
+  mermaidReady = true
+}
+
+export interface MermaidDiagramProps {
+  source: string
+  title?: string
+}
+
+export function MermaidDiagram({ source, title }: MermaidDiagramProps) {
+  const reactId = useId().replace(/:/g, '')
+  const [svg, setSvg] = useState<string | null>(null)
+  const [error, setError] = useState<string | null>(null)
+
+  useEffect(() => {
+    let cancelled = false
+    const run = async () => {
+      try {
+        const mermaid = (await import('mermaid')).default
+        ensureMermaid(mermaid)
+        const { svg: rendered } = await mermaid.render(`aeon-mmd-${reactId}`, source)
+        if (!cancelled) {
+          setSvg(rendered)
+          setError(null)
+        }
+      } catch (e) {
+        if (!cancelled) {
+          setError(e instanceof Error ? e.message : 'Diagram failed to render')
+          setSvg(null)
+        }
+      }
+    }
+
+    void run()
+    return () => {
+      cancelled = true
+    }
+  }, [source, reactId])
+
+  return (
+    <figure className="diagram-card__figure">
+      {title ? <figcaption className="sr-only">{title}</figcaption> : null}
+      <div className="diagram-card__mermaid" aria-hidden={!!error}>
+        {error ? (
+          <pre className="diagram-card__error">{error}</pre>
+        ) : svg ? (
+          <div dangerouslySetInnerHTML={{ __html: svg }} />
+        ) : (
+          <p className="diagram-card__loading">Rendering diagram…</p>
+        )}
+      </div>
+    </figure>
+  )
+}

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

@@ -0,0 +1,33 @@
+import { Button } from '@aeon-ui/ui'
+import { philosophyTenets, site } from '../site.js'
+import { CodeExample } from './CodeExample.js'
+
+export function PhilosophySection() {
+  return (
+    <section id="philosophy" className="section">
+      <div className="container">
+        <header className="section-header">
+          <p className="section-label">{site.philosophyLabel}</p>
+          <h2 className="section-title">{site.philosophyTitle}</h2>
+          <p className="section-lead">{site.philosophyLead}</p>
+        </header>
+
+        <div className="panel thesis__grid">
+          {philosophyTenets.map((t) => (
+            <article key={t.title} className="thesis__card">
+              <h3>{t.title}</h3>
+              <p>{t.body}</p>
+              <CodeExample code={t.example} />
+            </article>
+          ))}
+        </div>
+
+        <div className="thesis__cta">
+          <a href={site.thesisUrl} target="_blank" rel="noreferrer">
+            <Button.Root variant="outline">{site.thesisCta}</Button.Root>
+          </a>
+        </div>
+      </div>
+    </section>
+  )
+}

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

@@ -0,0 +1,23 @@
+import type { ReactNode } from 'react'
+import { CodeExample } from './CodeExample.js'
+
+export interface PlaygroundBlockProps {
+  title: string
+  description: string
+  example: string
+  children: ReactNode
+  last?: boolean
+}
+
+export function PlaygroundBlock({ title, description, example, children, last }: PlaygroundBlockProps) {
+  return (
+    <section
+      className={`playground__block${last ? ' playground__block--last' : ''}`}
+    >
+      <h3 className="playground__block-title">{title}</h3>
+      <p className="playground__block-sub">{description}</p>
+      <CodeExample code={example} />
+      {children}
+    </section>
+  )
+}

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

@@ -0,0 +1,204 @@
+import {
+  Accordion,
+  Button,
+  Checkbox,
+  Dialog,
+  Menu,
+  Popover,
+  Switch,
+  Tabs,
+  Tooltip,
+  useToast,
+} from '@aeon-ui/ui'
+import { ComboboxDemo } from './ComboboxDemo.js'
+import { useState } from 'react'
+import {
+  accordionExamples,
+  playgroundBlocks,
+  site,
+  tabsExamples,
+} from '../site.js'
+import { AsyncMachineDemo } from './AsyncMachineDemo.js'
+import { ButtonLifecycleDemo } from './ButtonLifecycleDemo.js'
+import { CodeExample } from './CodeExample.js'
+import { FieldStateDemo } from './FieldStateDemo.js'
+import { ScrollRegionDemo } from './ScrollRegionDemo.js'
+import { PlaygroundBlock } from './PlaygroundBlock.js'
+
+function ToastDemo() {
+  const { publish } = useToast()
+  return (
+    <Button.Root
+      size="sm"
+      variant="outline"
+      onClick={() =>
+        publish({
+          title: 'Saved',
+          description: 'Your preferences were updated.',
+          durationMs: 4000,
+        })
+      }
+    >
+      Show toast
+    </Button.Root>
+  )
+}
+
+export function PlaygroundSection() {
+  const [notifications, setNotifications] = useState(true)
+  const b = playgroundBlocks
+
+  return (
+    <section id="playground" className="section">
+      <div className="container">
+        <header className="section-header">
+          <p className="section-label">{site.playgroundLabel}</p>
+          <h2 className="section-title">{site.playgroundTitle}</h2>
+          <p className="section-lead">{site.playgroundLead}</p>
+        </header>
+
+        <div className="panel playground">
+          <PlaygroundBlock {...b.async}>
+            <AsyncMachineDemo />
+          </PlaygroundBlock>
+
+          <PlaygroundBlock {...b.buttonLifecycle}>
+            <ButtonLifecycleDemo />
+          </PlaygroundBlock>
+
+          <PlaygroundBlock {...b.field}>
+            <FieldStateDemo />
+          </PlaygroundBlock>
+
+          <PlaygroundBlock {...b.scroll}>
+            <ScrollRegionDemo />
+          </PlaygroundBlock>
+
+          <PlaygroundBlock {...b.buttons}>
+            <Button.Group className="playground-button-row">
+              <Button.Root>Primary</Button.Root>
+              <Button.Root variant="outline">Outline</Button.Root>
+              <Button.Root variant="ghost">Ghost</Button.Root>
+            </Button.Group>
+          </PlaygroundBlock>
+
+          <PlaygroundBlock {...b.toggle}>
+            <div className="demo-stack">
+              <Switch.Root checked={notifications} onCheckedChange={setNotifications}>
+                <Switch.Control>
+                  <Switch.Thumb />
+                </Switch.Control>
+                <Switch.Label>Enable notifications</Switch.Label>
+              </Switch.Root>
+              <Checkbox.Root checked={notifications} onCheckedChange={setNotifications}>
+                <Checkbox.Control>
+                  <Checkbox.Indicator />
+                </Checkbox.Control>
+                <Checkbox.Label>Email digest</Checkbox.Label>
+              </Checkbox.Root>
+            </div>
+          </PlaygroundBlock>
+
+          <PlaygroundBlock {...b.combobox}>
+            <ComboboxDemo />
+          </PlaygroundBlock>
+
+          <PlaygroundBlock {...b.dialog}>
+            <Dialog.Root>
+              <Dialog.Trigger>Open dialog</Dialog.Trigger>
+              <Dialog.Backdrop />
+              <Dialog.Positioner>
+                <Dialog.Content>
+                  <Dialog.Title>Example modal</Dialog.Title>
+                  <Dialog.Description>
+                    Press Escape or click outside — both close via the dialog machine.
+                  </Dialog.Description>
+                  <Dialog.CloseTrigger>Close</Dialog.CloseTrigger>
+                </Dialog.Content>
+              </Dialog.Positioner>
+            </Dialog.Root>
+          </PlaygroundBlock>
+
+          <PlaygroundBlock {...b.overlay}>
+            <div className="demo-stack demo-overlay-row">
+              <Menu.Root>
+                <Menu.Trigger>Menu</Menu.Trigger>
+                <Menu.Positioner>
+                  <Menu.Content>
+                    <Menu.Item>Save draft</Menu.Item>
+                    <Menu.Item>Duplicate</Menu.Item>
+                    <Menu.Separator />
+                    <Menu.Item>Delete</Menu.Item>
+                  </Menu.Content>
+                </Menu.Positioner>
+              </Menu.Root>
+
+              <Popover.Root>
+                <Popover.Trigger>Popover</Popover.Trigger>
+                <Popover.Positioner>
+                  <Popover.Content>
+                    <p style={{ margin: 0 }}>Anchored panel — open/closed is explicit on the machine.</p>
+                    <Popover.CloseTrigger>Close</Popover.CloseTrigger>
+                  </Popover.Content>
+                </Popover.Positioner>
+              </Popover.Root>
+
+              <Tooltip.Root>
+                <Tooltip.Trigger>
+                  <span className="demo-tooltip-anchor">Tooltip</span>
+                </Tooltip.Trigger>
+                <Tooltip.Positioner>
+                  <Tooltip.Content>State-first floating copy</Tooltip.Content>
+                </Tooltip.Positioner>
+              </Tooltip.Root>
+
+              <ToastDemo />
+            </div>
+          </PlaygroundBlock>
+
+          <PlaygroundBlock {...b.tabsAccordion} last>
+            <Tabs.Root defaultValue="philosophy" className="demo-spaced-bottom">
+              <Tabs.List>
+                <Tabs.Trigger value="philosophy">{tabsExamples.philosophy.label}</Tabs.Trigger>
+                <Tabs.Trigger value="machines">{tabsExamples.machines.label}</Tabs.Trigger>
+                <Tabs.Trigger value="anatomy">{tabsExamples.anatomy.label}</Tabs.Trigger>
+              </Tabs.List>
+              <Tabs.Content value="philosophy">
+                <p>{tabsExamples.philosophy.content}</p>
+                <CodeExample code={tabsExamples.philosophy.example} />
+              </Tabs.Content>
+              <Tabs.Content value="machines">
+                <p>{tabsExamples.machines.content}</p>
+                <CodeExample code={tabsExamples.machines.example} />
+              </Tabs.Content>
+              <Tabs.Content value="anatomy">
+                <p>{tabsExamples.anatomy.content}</p>
+                <CodeExample code={tabsExamples.anatomy.example} />
+              </Tabs.Content>
+            </Tabs.Root>
+            <Accordion.Root defaultValue={['what']}>
+              <Accordion.Item value="what">
+                <Accordion.ItemTrigger value="what">
+                  {accordionExamples.what.trigger}
+                </Accordion.ItemTrigger>
+                <Accordion.ItemContent value="what">
+                  <p>{accordionExamples.what.content}</p>
+                  <CodeExample code={accordionExamples.what.example} />
+                </Accordion.ItemContent>
+              </Accordion.Item>
+              <Accordion.Item value="why">
+                <Accordion.ItemTrigger value="why">
+                  {accordionExamples.why.trigger}
+                </Accordion.ItemTrigger>
+                <Accordion.ItemContent value="why">
+                  <p>{accordionExamples.why.content}</p>
+                  <CodeExample code={accordionExamples.why.example} />
+                </Accordion.ItemContent>
+              </Accordion.Item>
+            </Accordion.Root>
+          </PlaygroundBlock>
+        </div>
+      </div>
+    </section>
+  )
+}

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

@@ -0,0 +1,157 @@
+import { useEffect, useState } from 'react'
+import { Button } from '@aeon-ui/ui'
+import { createDemoSignal, type DemoSignal } from '@aeon-ui/signal'
+import { surfaceMaterials } from '@aeon-ui/surface'
+import {
+  ProceduralGrid,
+  SceneLayer,
+  ScenePlane,
+  SceneRoot,
+  SceneSlot,
+  SceneStage,
+  SceneSurface,
+  SignalBars,
+} from '@aeon-ui/react-scene'
+import { site } from '../site.js'
+
+export function SceneSection() {
+  const [demo, setDemo] = useState<DemoSignal | null>(null)
+  const playing = demo !== null
+
+  useEffect(() => {
+    return () => {
+      demo?.stop()
+    }
+  }, [demo])
+
+  const toggleDemo = () => {
+    if (demo) {
+      demo.stop()
+      setDemo(null)
+      return
+    }
+    const next = createDemoSignal({ frequency: 92 })
+    next.start()
+    setDemo(next)
+  }
+
+  return (
+    <section id="scene" className="section">
+      <div className="container">
+        <header className="section-header">
+          <p className="section-label">{site.sceneLabel}</p>
+          <h2 className="section-title">{site.sceneTitle}</h2>
+          <p className="section-lead">{site.sceneLead}</p>
+        </header>
+
+        <div className="scene-demo panel">
+          <SceneRoot className="scene-demo__stage" state={playing ? 'active' : 'idle'}>
+            <ProceduralGrid cell={28} lineColor="rgba(94, 234, 212, 0.08)" />
+            <div className="scene-demo__swatches" role="list" aria-label="Surface materials">
+              {surfaceMaterials.map((material) => (
+                <SceneSurface
+                  key={material}
+                  material={material}
+                  role="listitem"
+                  className="scene-demo__swatch"
+                  title={material}
+                />
+              ))}
+            </div>
+            <div className="scene-demo__viz">
+              <SignalBars
+                barCount={7}
+                active={playing}
+                analyser={demo?.analyser ?? null}
+                className="scene-demo__bars"
+              />
+              <Button.Root size="sm" variant={playing ? 'outline' : 'solid'} onClick={toggleDemo}>
+                {playing ? 'Stop demo signal' : 'Start demo signal'}
+              </Button.Root>
+            </div>
+          </SceneRoot>
+
+          <div className="scene-demo__code">
+            <pre>
+              <code>{`import '@aeon-ui/surface/surface.css'
+import { SignalBars, SceneSurface } from '@aeon-ui/react-scene'
+import { attachMediaAnalyser } from '@aeon-ui/signal'`}</code>
+            </pre>
+          </div>
+        </div>
+
+        <div className="scene-demo panel scene-demo--3d">
+          <header className="scene-demo__3d-header">
+            <h3 className="scene-demo__3d-title">{site.scene3dTitle}</h3>
+            <p className="scene-demo__3d-lead">{site.scene3dLead}</p>
+          </header>
+
+          <SceneStage className="scene-3d-demo" minHeight={340} perspective={{ distance: 980, origin: '50% 36%' }}>
+            <SceneLayer part="sky" transform={{ z: -130 }}>
+              <ScenePlane
+                part="sky"
+                style={{
+                  background: 'linear-gradient(180deg, #243044 0%, #121820 55%, #0a0e14 100%)',
+                }}
+              />
+            </SceneLayer>
+
+            <SceneLayer part="back-wall" transform={{ z: -85 }}>
+              <ScenePlane part="back-wall" material="stone" style={{ opacity: 0.85 }} />
+            </SceneLayer>
+
+            <SceneLayer part="wall-left" transform={{ z: -55, rotateY: 42 }} origin="0% 100%">
+              <ScenePlane
+                part="wall-left"
+                wall="left"
+                material="brick"
+                fill={false}
+                style={{ width: '54%', height: '78%', bottom: 0, left: 0 }}
+              />
+            </SceneLayer>
+
+            <SceneLayer part="wall-right" transform={{ z: -55, rotateY: -42 }} origin="100% 100%">
+              <ScenePlane
+                part="wall-right"
+                wall="right"
+                material="brick"
+                fill={false}
+                style={{ width: '54%', height: '78%', bottom: 0, right: 0 }}
+              />
+            </SceneLayer>
+
+            <SceneLayer part="ground" transform={{ z: 0, rotateX: 56 }} origin="50% 0%">
+              <ScenePlane part="ground" material="gravel">
+                <SceneSlot
+                  part="board"
+                  transform={{ z: 28 }}
+                  style={{
+                    left: '14%',
+                    right: '14%',
+                    top: '22%',
+                    padding: '1rem 1.25rem',
+                    borderRadius: 8,
+                    background: 'rgba(18, 22, 28, 0.72)',
+                    border: '1px dashed rgba(94, 234, 212, 0.35)',
+                    color: 'var(--text-muted)',
+                    fontSize: '0.8rem',
+                    textAlign: 'center',
+                  }}
+                >
+                  Your UI mounts here — tables, HUD, controls
+                </SceneSlot>
+              </ScenePlane>
+            </SceneLayer>
+          </SceneStage>
+
+          <div className="scene-demo__code">
+            <pre>
+              <code>{`import '@aeon-ui/react-scene/scene-3d.css'
+import { SceneStage, SceneLayer, ScenePlane, SceneSlot } from '@aeon-ui/react-scene'`}</code>
+            </pre>
+          </div>
+        </div>
+      </div>
+    </section>
+  )
+}