aeon-ui-engine 1.0.1 → 1.0.3

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

package/apps/demo/src/demo-layout.css

@@ -1,293 +0,0 @@
-/* App shell layout — explicit CSS (do not rely on removed Tailwind utilities). */
-
-.demo-row {
-  display: flex;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--aeon-gap-sm);
-}
-
-.demo-row--loose {
-  gap: var(--aeon-gap);
-}
-
-.demo-stack {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: var(--aeon-gap);
-}
-
-.demo-stack--tight {
-  gap: var(--aeon-gap-sm);
-}
-
-.demo-combobox {
-  width: 100%;
-  max-width: 16rem;
-}
-
-.demo-overlay-row {
-  flex-direction: row;
-  flex-wrap: wrap;
-  align-items: center;
-  gap: var(--aeon-gap-lg);
-}
-
-.demo-tooltip-anchor {
-  text-decoration: underline dotted;
-  text-underline-offset: 3px;
-  cursor: help;
-}
-
-.demo-spaced-top {
-  margin-top: var(--aeon-gap);
-}
-
-.demo-spaced-bottom {
-  margin-bottom: var(--aeon-pad-md);
-}
-
-/* Machine console — track, readout, and actions as one rhythm */
-.machine-console {
-  display: flex;
-  flex-direction: column;
-  gap: var(--aeon-gap-lg);
-}
-
-.machine-console__actions {
-  align-self: flex-start;
-}
-
-/* Status readout — aliases for aeon-async readout parts (demo + hero) */
-.live-status,
-.aeon-async-readout {
-  width: 100%;
-}
-
-.live-status__rail,
-.aeon-async-readout__rail {
-  flex: 0 0 4px;
-}
-
-.live-status__body,
-.aeon-async-readout__body {
-  flex: 1 1 auto;
-  min-width: 0;
-  display: flex;
-  align-items: center;
-  padding: var(--aeon-pad-md);
-}
-
-.live-status__text {
-  margin: 0;
-  max-width: 100%;
-  font-size: 0.875rem;
-  line-height: 1.5;
-  color: var(--aeon-muted);
-}
-
-.live-status--idle .live-status__rail,
-.live-status--idle .aeon-async-readout__rail {
-  background: color-mix(in srgb, var(--aeon-muted) 55%, var(--aeon-border));
-}
-
-.live-status--loading .live-status__rail,
-.live-status--loading .aeon-async-readout__rail {
-  background: linear-gradient(
-    180deg,
-    var(--aeon-accent),
-    color-mix(in srgb, var(--aeon-accent) 40%, var(--aeon-surface))
-  );
-  background-size: 100% 200%;
-  animation: live-status-rail 1.8s ease-in-out infinite;
-}
-
-.live-status--loading .live-status__text {
-  color: var(--aeon-accent);
-}
-
-.live-status--success .live-status__rail,
-.live-status--success .aeon-async-readout__rail {
-  background: var(--aeon-accent);
-}
-
-.live-status--success .live-status__text {
-  color: var(--aeon-text);
-}
-
-.live-status--failure .live-status__rail,
-.live-status--failure .aeon-async-readout__rail {
-  background: var(--aeon-danger);
-}
-
-.live-status--failure .live-status__text {
-  color: var(--aeon-danger);
-}
-
-.live-status--empty .live-status__rail,
-.live-status--empty .aeon-async-readout__rail {
-  background: color-mix(in srgb, var(--aeon-muted) 45%, var(--aeon-border));
-}
-
-.live-status--empty .live-status__text {
-  color: var(--aeon-muted);
-}
-
-@keyframes live-status-rail {
-  0%,
-  100% {
-    background-position: 0% 0%;
-  }
-  50% {
-    background-position: 0% 100%;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .live-status--loading .live-status__rail {
-    animation: none;
-    background: var(--aeon-accent);
-  }
-}
-
-.playground-button-row {
-  display: inline-flex;
-  align-items: center;
-  max-width: 24rem;
-}
-
-.playground-controls {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: var(--aeon-gap-lg);
-}
-
-.playground-controls__toggles {
-  display: flex;
-  flex-direction: column;
-  align-items: flex-start;
-  gap: var(--aeon-gap);
-  width: 100%;
-  max-width: 20rem;
-}
-
-.playground-controls__radio {
-  display: flex;
-  flex-direction: column;
-  gap: var(--aeon-gap-sm);
-  width: 100%;
-  max-width: 20rem;
-}
-
-.playground-controls__slider {
-  width: 100%;
-  max-width: 20rem;
-}
-
-/* State track — equal columns; scales type to container (no clipped labels) */
-.state-track {
-  --aeon-state-track-count: 5;
-  container-type: inline-size;
-  display: grid;
-  grid-template-columns: repeat(var(--aeon-state-track-count), minmax(0, 1fr));
-  align-items: stretch;
-  width: 100%;
-  max-width: 100%;
-  border: 1px solid var(--aeon-border);
-  border-radius: var(--aeon-radius-lg);
-  overflow: hidden;
-  background: var(--aeon-bg);
-  font-family: var(--aeon-mono);
-  font-size: clamp(0.5rem, 3cqi, 0.6875rem);
-  font-weight: 600;
-  letter-spacing: clamp(0.02em, 0.12cqi, 0.06em);
-  text-transform: uppercase;
-  line-height: 1.2;
-  box-shadow: inset 0 1px 0 color-mix(in srgb, var(--aeon-text) 4%, transparent);
-}
-
-.state-track__seg {
-  min-width: 0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0.65rem clamp(0.15rem, 2.5cqi, 0.85rem);
-  color: var(--aeon-muted);
-  background: var(--aeon-surface);
-  border-right: 1px solid var(--aeon-border);
-  white-space: nowrap;
-  transition:
-    background 0.22s ease,
-    color 0.22s ease,
-    box-shadow 0.22s ease;
-}
-
-.state-track__seg:last-child {
-  border-right: none;
-}
-
-/* Completed steps — subtle lift, still on the rail */
-.state-track__seg--past {
-  color: color-mix(in srgb, var(--aeon-text) 72%, var(--aeon-muted));
-  background: var(--aeon-surface-raised);
-}
-
-.state-track__seg--past.state-track__seg--success {
-  color: color-mix(in srgb, var(--aeon-accent) 55%, var(--aeon-text));
-}
-
-/* Upcoming */
-.state-track__seg--future {
-  color: color-mix(in srgb, var(--aeon-muted) 85%, transparent);
-  background: var(--aeon-bg);
-}
-
-/* Active — fills the segment, flat joins to neighbors */
-.state-track__seg--active {
-  color: var(--aeon-bg);
-  background: var(--aeon-accent);
-  box-shadow:
-    inset 0 1px 0 color-mix(in srgb, white 22%, transparent),
-    inset 0 -1px 0 color-mix(in srgb, black 12%, transparent);
-}
-
-.state-track__seg--active.state-track__seg--loading {
-  background: linear-gradient(
-    110deg,
-    var(--aeon-accent) 0%,
-    color-mix(in srgb, var(--aeon-accent) 65%, var(--aeon-surface-raised)) 48%,
-    var(--aeon-accent) 100%
-  );
-  background-size: 200% 100%;
-  animation: state-track-flow 2.4s ease-in-out infinite;
-}
-
-.state-track__seg--active.state-track__seg--success {
-  background: var(--aeon-accent);
-}
-
-.state-track__seg--active.state-track__seg--failure {
-  background: var(--aeon-danger);
-  box-shadow:
-    inset 0 1px 0 color-mix(in srgb, white 18%, transparent),
-    inset 0 -1px 0 color-mix(in srgb, black 18%, transparent);
-}
-
-@keyframes state-track-flow {
-  0%,
-  100% {
-    background-position: 100% 0;
-  }
-  50% {
-    background-position: 0% 0;
-  }
-}
-
-@media (prefers-reduced-motion: reduce) {
-  .state-track__seg--active.state-track__seg--loading {
-    animation: none;
-    background: var(--aeon-accent);
-  }
-}