aeon-ui-engine 1.0.2 → 1.1.0

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

@@ -1,62 +0,0 @@
-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="sm" aria-label={site.heroCtaPrimary}>
-              <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" aria-hidden="true">
-                {site.headerCtaShort}
-              </span>
-            </Button.Root>
-          </a>
-        </div>
-      </div>
-    </header>
-  )
-}

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

@@ -1,55 +0,0 @@
-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

@@ -1,47 +0,0 @@
-import { commitments, layers, site } from '../site.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((layer, index) => (
-            <article
-              key={layer.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>{layer.title}</h3>
-              <p>{layer.description}</p>
-              <ul>
-                {layer.highlights.map((highlight) => (
-                  <li key={highlight}>{highlight}</li>
-                ))}
-              </ul>
-            </article>
-          ))}
-        </div>
-      </div>
-    </section>
-  )
-}

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

@@ -1,86 +0,0 @@
-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: 64,
-      rankSpacing: 72,
-      fontSize: 15,
-    },
-    flowchart: {
-      curve: 'basis',
-      padding: 16,
-      htmlLabels: true,
-    },
-  })
-  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

@@ -1,31 +0,0 @@
-import { Button } from '@aeon-ui/ui'
-import { philosophyTenets, site } from '../site.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>
-            </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

@@ -1,18 +0,0 @@
-import type { ReactNode } from 'react'
-
-export interface PlaygroundBlockProps {
-  title: string
-  description: string
-  children: ReactNode
-  last?: boolean
-}
-
-export function PlaygroundBlock({ title, description, 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>
-      <div className="playground__block-demo">{children}</div>
-    </section>
-  )
-}

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

@@ -1,63 +0,0 @@
-import { Button, Checkbox, PinInput, RadioGroup, Slider, Switch } from '@aeon-ui/ui'
-import { useState } from 'react'
-
-export function PlaygroundControlsDemo() {
-  const [notifications, setNotifications] = useState(true)
-  const [emailDigest, setEmailDigest] = useState(false)
-  const [plan, setPlan] = useState('standard')
-  const [volume, setVolume] = useState(40)
-  const [pin, setPin] = useState('')
-
-  return (
-    <div className="playground-controls">
-      <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>
-
-      <div className="playground-controls__toggles">
-        <Switch.Root checked={notifications} onCheckedChange={setNotifications}>
-          <Switch.Control>
-            <Switch.Thumb />
-          </Switch.Control>
-          <Switch.Label>Notifications</Switch.Label>
-        </Switch.Root>
-
-        <Checkbox.Root checked={emailDigest} onCheckedChange={setEmailDigest}>
-          <Checkbox.Control>
-            <Checkbox.Indicator />
-          </Checkbox.Control>
-          <Checkbox.Label>Email digest</Checkbox.Label>
-        </Checkbox.Root>
-      </div>
-
-      <RadioGroup.Root value={plan} onValueChange={setPlan} className="playground-controls__radio">
-        <RadioGroup.Item value="standard">
-          <RadioGroup.ItemControl>
-            <RadioGroup.ItemIndicator />
-          </RadioGroup.ItemControl>
-          <RadioGroup.ItemLabel>Standard</RadioGroup.ItemLabel>
-        </RadioGroup.Item>
-        <RadioGroup.Item value="pro">
-          <RadioGroup.ItemControl>
-            <RadioGroup.ItemIndicator />
-          </RadioGroup.ItemControl>
-          <RadioGroup.ItemLabel>Pro</RadioGroup.ItemLabel>
-        </RadioGroup.Item>
-      </RadioGroup.Root>
-
-      <Slider.Root value={volume} onValueChange={setVolume} className="playground-controls__slider">
-        <Slider.Track>
-          <Slider.Range />
-          <Slider.Thumb />
-        </Slider.Track>
-        <Slider.ValueText>{volume}%</Slider.ValueText>
-      </Slider.Root>
-
-      <PinInput.Root length={4} value={pin} onValueChange={setPin}>
-        <PinInput.Group />
-      </PinInput.Root>
-    </div>
-  )
-}

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

@@ -1,120 +0,0 @@
-import {
-  Button,
-  Dialog,
-  Menu,
-  Popover,
-  Tooltip,
-  useToast,
-} from '@aeon-ui/ui'
-import { playgroundBlocks, site } from '../site.js'
-import { AsyncMachineDemo } from './AsyncMachineDemo.js'
-import { ButtonLifecycleDemo } from './ButtonLifecycleDemo.js'
-import { FieldStateDemo } from './FieldStateDemo.js'
-import { PlaygroundBlock } from './PlaygroundBlock.js'
-import { PlaygroundControlsDemo } from './PlaygroundControlsDemo.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 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.controls}>
-            <PlaygroundControlsDemo />
-          </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>
-                    Escape and backdrop clicks close via defined transitions.
-                  </Dialog.Description>
-                  <Dialog.CloseTrigger>Close</Dialog.CloseTrigger>
-                </Dialog.Content>
-              </Dialog.Positioner>
-            </Dialog.Root>
-          </PlaygroundBlock>
-
-          <PlaygroundBlock {...b.overlay} last>
-            <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 with explicit open/closed states.</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>
-        </div>
-      </div>
-    </section>
-  )
-}

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

@@ -1,74 +0,0 @@
-import type { ReactNode } from 'react'
-import { Scroll } from '@aeon-ui/ui'
-
-const verticalItems = Array.from({ length: 10 }, (_, i) => `Item ${i + 1}`)
-const horizontalItems = Array.from({ length: 12 }, (_, i) => `Col ${i + 1}`)
-const matrixCols = 5
-const matrixRows = 4
-const matrixItems = Array.from({ length: matrixCols * matrixRows }, (_, i) => {
-  const r = Math.floor(i / matrixCols) + 1
-  const c = (i % matrixCols) + 1
-  return `${r}·${c}`
-})
-
-function ScrollDemo({
-  label,
-  axis,
-  children,
-}: {
-  label: string
-  axis: 'y' | 'x' | 'both'
-  children: ReactNode
-}) {
-  return (
-    <div className="scroll-demo-cell">
-      <p className="scroll-demo-label">{label}</p>
-      <Scroll.Root axis={axis} maxH="sm" className="scroll-demo-scroll">
-        <Scroll.Viewport>
-          <Scroll.Content>{children}</Scroll.Content>
-        </Scroll.Viewport>
-        <div className="scroll-demo-meta">
-          <span className="scroll-demo-meta-label">data-aeon-state</span>
-          <Scroll.StateReadout className="scroll-demo-state" />
-        </div>
-      </Scroll.Root>
-    </div>
-  )
-}
-
-export function ScrollRegionDemo() {
-  return (
-    <div className="scroll-demo">
-      <p className="scroll-demo-hint">Scroll inside each box — the state line updates at the edges.</p>
-      <div className="scroll-demo-grid">
-        <ScrollDemo label="Vertical" axis="y">
-          <ul className="scroll-demo-list">
-            {verticalItems.map((item) => (
-              <li key={item}>{item}</li>
-            ))}
-          </ul>
-        </ScrollDemo>
-
-        <ScrollDemo label="Horizontal" axis="x">
-          <div className="scroll-demo-row">
-            {horizontalItems.map((cell) => (
-              <span key={cell} className="scroll-demo-chip">
-                {cell}
-              </span>
-            ))}
-          </div>
-        </ScrollDemo>
-
-        <ScrollDemo label="Both axes" axis="both">
-          <div className="scroll-demo-matrix">
-            {matrixItems.map((cell) => (
-              <span key={cell} className="scroll-demo-chip">
-                {cell}
-              </span>
-            ))}
-          </div>
-        </ScrollDemo>
-      </div>
-    </div>
-  )
-}

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

@@ -1,79 +0,0 @@
-import {
-  AEON_THEME_MAP,
-  AEON_THEMES,
-  applyAeonTheme,
-  initAeonTheme,
-  isAeonThemeId,
-  type AeonMode,
-  type AeonThemeId,
-} from '@aeon-ui/panda/themes'
-import { Button, Select } from '@aeon-ui/ui'
-import { useLayoutEffect, useState } from 'react'
-
-export function ThemeSwitcher() {
-  const [themeId, setThemeId] = useState<AeonThemeId>('default')
-  const [mode, setMode] = useState<AeonMode>('dark')
-
-  useLayoutEffect(() => {
-    const { themeId: t, mode: m } = initAeonTheme()
-    setThemeId(t)
-    setMode(m)
-  }, [])
-
-  const setTheme = (nextTheme: AeonThemeId) => {
-    setThemeId(nextTheme)
-    applyAeonTheme(nextTheme, mode)
-  }
-
-  const setModeOnly = (nextMode: AeonMode) => {
-    setMode(nextMode)
-    applyAeonTheme(themeId, nextMode)
-  }
-
-  return (
-    <div
-      className="theme-switcher"
-      data-aeon-scope="site"
-      data-aeon-part="theme"
-      aria-label="Site theme"
-    >
-      <div className="theme-switcher__modes" role="group" aria-label="Color mode">
-        {(['light', 'dark'] as const).map((m) => (
-          <Button.Root
-            key={m}
-            type="button"
-            size="sm"
-            variant={mode === m ? 'solid' : 'ghost'}
-            aria-pressed={mode === m}
-            className="theme-switcher__mode-btn"
-            onClick={() => setModeOnly(m)}
-          >
-            {m === 'light' ? 'Light' : 'Dark'}
-          </Button.Root>
-        ))}
-      </div>
-
-      <Select.Root
-        className="theme-switcher__theme-select"
-        value={themeId}
-        onValueChange={(v) => {
-          if (isAeonThemeId(v)) setTheme(v)
-        }}
-      >
-        <Select.Trigger aria-label={`Theme preset: ${AEON_THEME_MAP[themeId].label}`}>
-          <span className="theme-switcher__trigger-prefix">Theme</span>
-          <span className="theme-switcher__trigger-value">{AEON_THEME_MAP[themeId].label}</span>
-        </Select.Trigger>
-        <Select.Positioner>
-          <Select.Content>
-            {AEON_THEMES.map((t) => (
-              <Select.Item key={t.id} value={t.id}>
-                {t.label}
-              </Select.Item>
-            ))}
-          </Select.Content>
-        </Select.Positioner>
-      </Select.Root>
-    </div>
-  )
-}