aeon-ui-engine 1.0.0

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

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

@@ -0,0 +1,76 @@
+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}
+        </Select.Trigger>
+        <Select.Content>
+          {AEON_THEMES.map((t) => (
+            <Select.Item key={t.id} value={t.id}>
+              {t.label}
+            </Select.Item>
+          ))}
+        </Select.Content>
+      </Select.Root>
+    </div>
+  )
+}

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

@@ -0,0 +1,264 @@
+/* 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;
+}
+
+/* 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);
+  }
+}