aeon-ui-engine 1.0.1 → 1.0.3

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

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

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

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

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

@@ -1,37 +0,0 @@
-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((diagram) => (
-            <article key={diagram.id} className="panel diagram-card" data-aeon-scope="diagrams">
-              <header className="diagram-card__head">
-                <h3>{diagram.title}</h3>
-                <p>{diagram.caption}</p>
-              </header>
-              <MermaidDiagram source={diagram.source} title={diagram.title} />
-            </article>
-          ))}
-        </div>
-
-        <p className="diagrams__footnote">
-          Full machine definitions in{' '}
-          <a href={site.statesDocUrl} target="_blank" rel="noreferrer">
-            STATES.md
-          </a>
-          .
-        </p>
-      </div>
-    </section>
-  )
-}

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

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

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

@@ -1,13 +0,0 @@
-import { site } from '../site.js'
-
-export function HeroInstallLine() {
-  return (
-    <div className="hero-install" data-aeon-scope="hero" data-aeon-part="install">
-      <p className="hero-install__line">
-        <span className="hero-install__label">{site.heroInstallLabel}</span>
-        <code className="hero-install__command">{site.heroInstallCommand}</code>
-      </p>
-      <p className="hero-install__hint">{site.heroInstallHint}</p>
-    </div>
-  )
-}

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

@@ -1,29 +0,0 @@
-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>
-                {'example' in item && item.example ? <CodeExample code={item.example} /> : null}
-              </Accordion.ItemContent>
-            </Accordion.Item>
-          ))}
-        </Accordion.Root>
-      </div>
-    </section>
-  )
-}

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

@@ -1,30 +0,0 @@
-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 href={site.npmRegistryUrl} target="_blank" rel="noreferrer">
-            {site.npmPackage}
-          </a>
-          {' · '}
-          <a href={site.url} target="_blank" rel="noreferrer">
-            GitHub
-          </a>
-          {' · '}
-          A project by{' '}
-          <a href={site.studioUrl} target="_blank" rel="noreferrer">
-            {site.studio}
-          </a>
-          <span className="text-accent"> · spidercorp.xyz</span>
-        </p>
-      </div>
-    </footer>
-  )
-}

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="xs" 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>
-  )
-}