aeon-ui-engine 1.0.2 → 1.1.0

package/apps/demo/package.json

@@ -1,41 +0,0 @@
-{
-  "name": "@aeon-ui/demo",
-  "private": true,
-  "type": "module",
-  "scripts": {
-    "dev": "vite",
-    "generate:og": "node scripts/generate-og-png.mjs",
-    "build": "pnpm --filter @aeon-ui/panda codegen && pnpm --filter @aeon-ui/site build && node scripts/generate-og-png.mjs && vite build",
-    "preview": "vite preview",
-    "typecheck": "tsc --noEmit"
-  },
-  "dependencies": {
-    "@aeon-ui/geometry": "workspace:*",
-    "@aeon-ui/panda": "workspace:*",
-    "@aeon-ui/primitives": "workspace:*",
-    "@aeon-ui/react": "workspace:*",
-    "@aeon-ui/react-scene": "workspace:*",
-    "@aeon-ui/signal": "workspace:*",
-    "@aeon-ui/surface": "workspace:*",
-    "@aeon-ui/ui": "workspace:*",
-    "@xstate/react": "^5.0.3",
-    "mermaid": "^11.15.0",
-    "react": "^19.1.0",
-    "react-dom": "^19.1.0",
-    "xstate": "^5.19.2"
-  },
-  "devDependencies": {
-    "@aeon-ui/site": "workspace:*",
-    "@fontsource/ibm-plex-mono": "^5.2.7",
-    "@fontsource/instrument-sans": "^5.2.8",
-    "@fontsource/syne": "^5.2.7",
-    "@resvg/resvg-js": "^2.6.2",
-    "@types/node": "^22.15.3",
-    "@types/react": "^19.1.2",
-    "@types/react-dom": "^19.1.2",
-    "@vitejs/plugin-react": "^4.4.1",
-    "typescript": "^5.8.3",
-    "vite": "^6.3.5",
-    "wawoff2": "^2.0.1"
-  }
-}

package/apps/demo/public/favicon.svg

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

@@ -1,35 +0,0 @@
-<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="428" width="404" height="40" 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="14" font-weight="500">{{NPM_INSTALL_COMMAND}}</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

@@ -1,62 +0,0 @@
-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'
-import { og } from '../og.config.mjs'
-
-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.imagePath.replace(/^\//, ''))
-
-/** @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 svgTemplate = readFileSync(svgPath, 'utf8')
-const svg = svgTemplate.replaceAll('{{NPM_INSTALL_COMMAND}}', og.npmInstallCommand)
-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

@@ -1,31 +0,0 @@
-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 />
-          <PhilosophySection />
-          <PlaygroundSection />
-          <LayersSection />
-          <DiagramsSection />
-          <LandingFaq />
-        </main>
-        <LandingFooter />
-      </div>
-      <Toast.Viewport placement="bottom-end" />
-    </Toast.Provider>
-  )
-}

package/apps/demo/src/aeonDiagrams.ts

@@ -1,42 +0,0 @@
-/** Mermaid sources — kept in sync with aeon-ui-engine machines (STATES.md). */
-
-export type AeonDiagram = {
-  id: string
-  title: string
-  caption: string
-  source: string
-}
-
-/** Model → snapshot → DOM. The north-star flow. */
-export const aeonNorthStarDiagram = `flowchart LR
-  chart["Statechart"]
-  snap["Snapshot"]
-  ui["UI"]
-  chart --> snap --> ui`
-
-/** Main async path — full machine has reset/re-fetch edges in STATES.md. */
-export const asyncLifecycleDiagram = `stateDiagram-v2
-  direction LR
-  [*] --> idle
-  idle --> loading: fetch
-  loading --> success: ok
-  loading --> failure: err
-  loading --> empty: empty
-  success --> idle: reset
-  failure --> idle: reset
-  empty --> idle: reset`
-
-export const aeonDiagrams: AeonDiagram[] = [
-  {
-    id: 'north-star',
-    title: 'Model → UI',
-    caption: 'Behavior is defined once; the interface is its projection — structure, copy, and state attributes in agreement.',
-    source: aeonNorthStarDiagram,
-  },
-  {
-    id: 'async',
-    title: 'Async region',
-    caption: 'A named lifecycle teams can reason about together — not an unnamed spinner behind a boolean.',
-    source: asyncLifecycleDiagram,
-  },
-]

package/apps/demo/src/app.css

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

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

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

@@ -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>
-  )
-}