aeon-ui-engine 1.0.0 → 1.0.2

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

@@ -1,29 +1,17 @@
 import {
-  Accordion,
   Button,
-  Checkbox,
   Dialog,
   Menu,
   Popover,
-  Switch,
-  Tabs,
   Tooltip,
   useToast,
 } from '@aeon-ui/ui'
-import { ComboboxDemo } from './ComboboxDemo.js'
-import { useState } from 'react'
-import {
-  accordionExamples,
-  playgroundBlocks,
-  site,
-  tabsExamples,
-} from '../site.js'
+import { playgroundBlocks, site } from '../site.js'
 import { AsyncMachineDemo } from './AsyncMachineDemo.js'
 import { ButtonLifecycleDemo } from './ButtonLifecycleDemo.js'
-import { CodeExample } from './CodeExample.js'
 import { FieldStateDemo } from './FieldStateDemo.js'
-import { ScrollRegionDemo } from './ScrollRegionDemo.js'
 import { PlaygroundBlock } from './PlaygroundBlock.js'
+import { PlaygroundControlsDemo } from './PlaygroundControlsDemo.js'
 
 function ToastDemo() {
   const { publish } = useToast()
@@ -45,7 +33,6 @@ function ToastDemo() {
 }
 
 export function PlaygroundSection() {
-  const [notifications, setNotifications] = useState(true)
   const b = playgroundBlocks
 
   return (
@@ -70,37 +57,8 @@ export function PlaygroundSection() {
             <FieldStateDemo />
           </PlaygroundBlock>
 
-          <PlaygroundBlock {...b.scroll}>
-            <ScrollRegionDemo />
-          </PlaygroundBlock>
-
-          <PlaygroundBlock {...b.buttons}>
-            <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>
-          </PlaygroundBlock>
-
-          <PlaygroundBlock {...b.toggle}>
-            <div className="demo-stack">
-              <Switch.Root checked={notifications} onCheckedChange={setNotifications}>
-                <Switch.Control>
-                  <Switch.Thumb />
-                </Switch.Control>
-                <Switch.Label>Enable notifications</Switch.Label>
-              </Switch.Root>
-              <Checkbox.Root checked={notifications} onCheckedChange={setNotifications}>
-                <Checkbox.Control>
-                  <Checkbox.Indicator />
-                </Checkbox.Control>
-                <Checkbox.Label>Email digest</Checkbox.Label>
-              </Checkbox.Root>
-            </div>
-          </PlaygroundBlock>
-
-          <PlaygroundBlock {...b.combobox}>
-            <ComboboxDemo />
+          <PlaygroundBlock {...b.controls}>
+            <PlaygroundControlsDemo />
           </PlaygroundBlock>
 
           <PlaygroundBlock {...b.dialog}>
@@ -111,7 +69,7 @@ export function PlaygroundSection() {
                 <Dialog.Content>
                   <Dialog.Title>Example modal</Dialog.Title>
                   <Dialog.Description>
-                    Press Escape or click outside — both close via the dialog machine.
+                    Escape and backdrop clicks close via defined transitions.
                   </Dialog.Description>
                   <Dialog.CloseTrigger>Close</Dialog.CloseTrigger>
                 </Dialog.Content>
@@ -119,7 +77,7 @@ export function PlaygroundSection() {
             </Dialog.Root>
           </PlaygroundBlock>
 
-          <PlaygroundBlock {...b.overlay}>
+          <PlaygroundBlock {...b.overlay} last>
             <div className="demo-stack demo-overlay-row">
               <Menu.Root>
                 <Menu.Trigger>Menu</Menu.Trigger>
@@ -137,7 +95,7 @@ export function PlaygroundSection() {
                 <Popover.Trigger>Popover</Popover.Trigger>
                 <Popover.Positioner>
                   <Popover.Content>
-                    <p style={{ margin: 0 }}>Anchored panel — open/closed is explicit on the machine.</p>
+                    <p style={{ margin: 0 }}>Anchored panel with explicit open/closed states.</p>
                     <Popover.CloseTrigger>Close</Popover.CloseTrigger>
                   </Popover.Content>
                 </Popover.Positioner>
@@ -155,48 +113,6 @@ export function PlaygroundSection() {
               <ToastDemo />
             </div>
           </PlaygroundBlock>
-
-          <PlaygroundBlock {...b.tabsAccordion} last>
-            <Tabs.Root defaultValue="philosophy" className="demo-spaced-bottom">
-              <Tabs.List>
-                <Tabs.Trigger value="philosophy">{tabsExamples.philosophy.label}</Tabs.Trigger>
-                <Tabs.Trigger value="machines">{tabsExamples.machines.label}</Tabs.Trigger>
-                <Tabs.Trigger value="anatomy">{tabsExamples.anatomy.label}</Tabs.Trigger>
-              </Tabs.List>
-              <Tabs.Content value="philosophy">
-                <p>{tabsExamples.philosophy.content}</p>
-                <CodeExample code={tabsExamples.philosophy.example} />
-              </Tabs.Content>
-              <Tabs.Content value="machines">
-                <p>{tabsExamples.machines.content}</p>
-                <CodeExample code={tabsExamples.machines.example} />
-              </Tabs.Content>
-              <Tabs.Content value="anatomy">
-                <p>{tabsExamples.anatomy.content}</p>
-                <CodeExample code={tabsExamples.anatomy.example} />
-              </Tabs.Content>
-            </Tabs.Root>
-            <Accordion.Root defaultValue={['what']}>
-              <Accordion.Item value="what">
-                <Accordion.ItemTrigger value="what">
-                  {accordionExamples.what.trigger}
-                </Accordion.ItemTrigger>
-                <Accordion.ItemContent value="what">
-                  <p>{accordionExamples.what.content}</p>
-                  <CodeExample code={accordionExamples.what.example} />
-                </Accordion.ItemContent>
-              </Accordion.Item>
-              <Accordion.Item value="why">
-                <Accordion.ItemTrigger value="why">
-                  {accordionExamples.why.trigger}
-                </Accordion.ItemTrigger>
-                <Accordion.ItemContent value="why">
-                  <p>{accordionExamples.why.content}</p>
-                  <CodeExample code={accordionExamples.why.example} />
-                </Accordion.ItemContent>
-              </Accordion.Item>
-            </Accordion.Root>
-          </PlaygroundBlock>
         </div>
       </div>
     </section>

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

@@ -42,7 +42,7 @@ export function ThemeSwitcher() {
           <Button.Root
             key={m}
             type="button"
-            size="xs"
+            size="sm"
             variant={mode === m ? 'solid' : 'ghost'}
             aria-pressed={mode === m}
             className="theme-switcher__mode-btn"
@@ -60,16 +60,19 @@ export function ThemeSwitcher() {
           if (isAeonThemeId(v)) setTheme(v)
         }}
       >
-        <Select.Trigger aria-label="Theme preset">
-          {AEON_THEME_MAP[themeId].label}
+        <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.Content>
-          {AEON_THEMES.map((t) => (
-            <Select.Item key={t.id} value={t.id}>
-              {t.label}
-            </Select.Item>
-          ))}
-        </Select.Content>
+        <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

@@ -157,6 +157,35 @@
   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;

package/apps/demo/src/landing.css

@@ -14,8 +14,6 @@
   --border-strong: color-mix(in srgb, var(--aeon-border) 70%, var(--aeon-text));
   --text-muted: var(--aeon-muted);
   --site-header-offset: var(--header-h);
-  /* Header chrome — mode toggles, theme select, CTA share one height */
-  --header-control-h: 2.25rem;
 }
 
 .landing {
@@ -58,11 +56,11 @@
 }
 
 .section-lead {
-  font-size: 1.05rem;
+  font-size: 1rem;
   color: var(--text-muted);
-  max-width: 40rem;
+  max-width: 42ch;
   margin: 0;
-  line-height: 1.65;
+  line-height: 1.6;
 }
 
 .text-accent {
@@ -211,12 +209,19 @@
 
 .landing-header__cta {
   display: inline-flex;
-  align-items: center;
   flex-shrink: 0;
-  align-self: center;
   text-decoration: none;
 }
 
+.landing-header__cta [data-aeon-scope='button'][data-aeon-part='root'] {
+  letter-spacing: 0.04em;
+  white-space: nowrap;
+}
+
+.landing-header__cta-label--short {
+  display: none;
+}
+
 /* Theme switcher — segmented light/dark + preset select */
 .theme-switcher {
   display: flex;
@@ -228,10 +233,12 @@
 
 .theme-switcher__modes {
   display: inline-flex;
-  align-items: center;
+  align-items: stretch;
   gap: 0.125rem;
   flex-shrink: 0;
-  padding: 0.15rem;
+  box-sizing: border-box;
+  height: var(--spacing-control-min-h-sm);
+  padding: 2px;
   border: 1px solid var(--aeon-border);
   border-radius: var(--aeon-radius);
   background: color-mix(in srgb, var(--aeon-surface) 92%, var(--aeon-bg));
@@ -239,6 +246,8 @@
 
 .theme-switcher__mode-btn {
   min-width: 2.75rem;
+  height: auto;
+  align-self: stretch;
   margin: 0 !important;
 }
 
@@ -251,25 +260,56 @@
   max-width: 24vw;
   min-width: 0;
   flex-shrink: 1;
-  height: var(--header-control-h);
 }
 
-.theme-switcher__theme-select [data-aeon-part='trigger'] {
-  min-height: var(--header-control-h);
-  height: 100%;
-  max-width: 100%;
+.theme-switcher__trigger-prefix {
+  display: none;
+  flex-shrink: 0;
+  font-weight: 600;
+}
+
+.theme-switcher__trigger-value {
+  min-width: 0;
   overflow: hidden;
   text-overflow: ellipsis;
   white-space: nowrap;
+}
+
+.theme-switcher__theme-select [data-aeon-part='trigger'] {
+  max-width: 100%;
+  overflow: hidden;
   padding-inline: 0.5rem 1.75rem;
   font-size: 0.7rem;
 }
 
+@media (max-width: 719px) {
+  .theme-switcher__trigger-prefix {
+    display: inline;
+  }
+}
+
+@media (max-width: 640px) {
+  .landing-header__cta [data-aeon-scope='button'][data-aeon-part='root'] {
+    padding-inline: 0.55rem !important;
+    font-size: 0.6875rem;
+  }
+
+  .landing-header__cta-label--long {
+    display: none;
+  }
+
+  .landing-header__cta-label--short {
+    display: inline;
+  }
+}
+
 @media (max-width: 420px) {
-  :root {
-    --header-control-h: 2rem;
+  .theme-switcher__trigger-value {
+    display: none;
   }
+}
 
+@media (max-width: 420px) {
   .landing-header__shell {
     gap: 0.35rem;
   }
@@ -294,29 +334,15 @@
   }
 
   .theme-switcher__theme-select {
-    width: 4.75rem;
-    max-width: 20vw;
+    width: auto;
+    min-width: 4.35rem;
+    max-width: none;
   }
 
   .theme-switcher__theme-select [data-aeon-part='trigger'] {
-    padding-inline: 0.4rem 1.5rem;
+    padding-inline: 0.45rem 1.5rem;
     font-size: 0.625rem;
   }
-
-  .landing-header__cta [data-aeon-scope='button'][data-aeon-part='root'] {
-    min-height: var(--header-control-h);
-    padding-inline: 0.45rem !important;
-    font-size: 0.625rem;
-    letter-spacing: 0.04em;
-  }
-
-  .landing-header__cta-label--long {
-    display: none;
-  }
-
-  .landing-header__cta-label--short {
-    display: inline;
-  }
 }
 
 .sr-only {
@@ -331,26 +357,14 @@
   border: 0;
 }
 
-/* Header CTA — same vertical rhythm as mode toggles + select */
-.landing-header__cta [data-aeon-scope='button'][data-aeon-part='root'] {
-  min-height: var(--header-control-h);
-  letter-spacing: 0.06em;
-  text-transform: uppercase;
-  font-size: 0.75rem;
-}
-
-.landing-header__cta-label--short {
-  display: none;
-}
-
 /* Hero */
 .hero {
   padding-top: clamp(2.5rem, 6vw, 4rem);
   padding-bottom: clamp(1.25rem, 3vw, 2rem);
 }
 
-/* One-line install — above hero CTAs */
-.hero__copy .hero-install__line {
+/* Install line — above hero CTAs */
+.hero__copy .hero-install {
   margin: 0 0 1rem;
 }
 
@@ -369,6 +383,14 @@
   scrollbar-width: thin;
 }
 
+.hero-install__hint {
+  margin: 0.4rem 0 0;
+  font-size: 0.75rem;
+  line-height: 1.45;
+  color: var(--text-muted);
+  max-width: 36ch;
+}
+
 .hero-install__label {
   flex-shrink: 0;
   font-size: 0.65rem;
@@ -378,18 +400,19 @@
   color: var(--aeon-accent);
 }
 
-.hero-install__access {
+.hero-install__command {
   flex: 1 1 auto;
   min-width: 0;
   margin: 0;
   padding: 0;
-  font-family: var(--font-display);
-  font-size: clamp(0.85rem, 3.2vw, 1.05rem);
-  font-weight: 700;
-  letter-spacing: 0.12em;
+  font-family: var(--font-mono, 'IBM Plex Mono', ui-monospace, monospace);
+  font-size: clamp(0.78rem, 2.8vw, 0.92rem);
+  font-weight: 500;
+  letter-spacing: 0.02em;
   line-height: 1.3;
   white-space: nowrap;
   color: var(--aeon-text);
+  background: transparent;
 }
 
 .hero__eyebrow {
@@ -412,7 +435,7 @@
 }
 
 .hero__lead {
-  margin: 0 0 0.35rem;
+  margin: 0 0 0.75rem;
   font-size: 1.0625rem;
   font-weight: 500;
   color: var(--text-muted);
@@ -421,14 +444,16 @@
 }
 
 .hero__sub {
-  margin: 0 0 1.5rem;
-  font-size: 0.98rem;
-  color: color-mix(in srgb, var(--text-muted) 82%, transparent);
-  max-width: 42ch;
+  margin: 0 0 1.25rem;
+  font-size: 0.9375rem;
+  line-height: 1.55;
+  color: var(--text-muted);
+  max-width: 46ch;
+  opacity: 0.92;
 }
 
 .hero__actions {
-  margin-bottom: 2rem;
+  margin-bottom: 1.5rem;
 }
 
 .hero__actions a {
@@ -493,6 +518,39 @@
   }
 }
 
+.hero__pillars {
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  display: flex;
+  flex-direction: column;
+}
+
+.hero__pillar {
+  display: flex;
+  flex-direction: column;
+  gap: 0.2rem;
+  padding: 0.85rem 1rem;
+  border-bottom: 1px solid var(--border);
+}
+
+.hero__pillar:last-child {
+  border-bottom: none;
+}
+
+.hero__pillar strong {
+  font-family: var(--font-display);
+  font-size: 0.8125rem;
+  font-weight: 600;
+  color: var(--aeon-text);
+}
+
+.hero__pillar span {
+  font-size: 0.8125rem;
+  line-height: 1.45;
+  color: var(--text-muted);
+}
+
 .hero__visual {
   margin-top: 2.5rem;
 }
@@ -665,11 +723,15 @@
 }
 
 .playground__block-sub {
-  margin: 0 0 0.75rem;
+  margin: 0 0 0.85rem;
   font-size: 0.875rem;
   line-height: 1.55;
   color: var(--text-muted);
-  max-width: 52ch;
+  max-width: 48ch;
+}
+
+.playground__block-demo {
+  margin: 0;
 }
 
 .code-example {
@@ -1013,55 +1075,42 @@
 .diagrams__grid {
   display: grid;
   gap: clamp(1.25rem, 3vw, 1.75rem);
-}
-
-@media (min-width: 52rem) {
-  .diagrams__grid {
-    grid-template-columns: repeat(2, minmax(0, 1fr));
-  }
-
-  .diagram-card:first-child {
-    grid-column: 1 / -1;
-  }
+  max-width: 40rem;
 }
 
 .diagram-card__head {
-  padding: 1.25rem 1.25rem 0;
+  padding: 1.15rem 1.15rem 0;
 }
 
 .diagram-card__head h3 {
-  margin: 0 0 0.5rem;
+  margin: 0 0 0.35rem;
   font-family: var(--font-display);
-  font-size: 1.15rem;
+  font-size: 1.05rem;
   font-weight: 600;
 }
 
 .diagram-card__head p {
-  margin: 0 0 0.65rem;
-  font-size: 0.9rem;
+  margin: 0;
+  font-size: 0.875rem;
   color: var(--text-muted);
-  line-height: 1.55;
-}
-
-.diagram-card__ref {
-  display: inline-block;
-  font-size: 0.72rem;
-  padding: 0.2rem 0.5rem;
-  border-radius: 4px;
-  background: var(--bg-elevated);
-  border: 1px solid var(--border);
-  color: var(--aeon-accent);
+  line-height: 1.5;
+  max-width: 40ch;
 }
 
 .diagram-card__figure {
   margin: 0;
-  padding: 0.75rem 1rem 1.25rem;
+  padding: 1rem 1.15rem 1.15rem;
   overflow-x: auto;
 }
 
+.diagram-card__mermaid {
+  min-height: 5rem;
+}
+
 .diagram-card__mermaid svg {
   display: block;
-  max-width: 100%;
+  width: 100%;
+  max-width: 36rem;
   height: auto;
   margin-inline: auto;
 }

package/apps/demo/src/nav.ts

@@ -1,8 +1,8 @@
 export const navLinks = [
-  { href: '#layers', label: 'Architecture', sectionId: 'layers' },
-  { href: '#diagrams', label: 'Diagrams', sectionId: 'diagrams' },
-  { href: '#playground', label: 'Components', sectionId: 'playground' },
   { href: '#philosophy', label: 'Foundation', sectionId: 'philosophy' },
+  { href: '#playground', label: 'Components', sectionId: 'playground' },
+  { href: '#layers', label: 'Shape', sectionId: 'layers' },
+  { href: '#diagrams', label: 'Statecharts', sectionId: 'diagrams' },
   { href: '#faq', label: 'FAQ', sectionId: 'faq' },
 ] as const