aeon-ui-engine 1.0.0

package/packages/panda/src/recipes/switch.ts

@@ -0,0 +1,51 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+import { fieldControlReset, fieldLabelBase, fieldRootBase } from './field-shared.js'
+
+const slots = ['root', 'control', 'thumb', 'label', 'hiddenInput'] as const
+
+export const switchRecipe = defineSlotRecipe({
+  className: 'aeonSwitch',
+  slots,
+  base: {
+    root: fieldRootBase,
+    control: {
+      ...fieldControlReset,
+      display: 'inline-flex',
+      alignItems: 'center',
+      width: '3rem',
+      height: '1.75rem',
+      padding: '3px',
+      flexShrink: 0,
+      borderRadius: 'full',
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderColor: 'border',
+      bg: 'surface',
+      cursor: 'pointer',
+      boxSizing: 'border-box',
+      transitionProperty: 'background-color, border-color',
+      transitionDuration: 'normal',
+      outline: 'none',
+      _focusVisible: { boxShadow: 'focusRing' },
+      _aeonChecked: {
+        bg: 'accentDim',
+        borderColor: 'accent',
+      },
+    },
+    thumb: {
+      width: '1.125rem',
+      height: '1.125rem',
+      flexShrink: 0,
+      borderRadius: 'full',
+      bg: 'fg',
+      pointerEvents: 'none',
+      transitionProperty: 'margin, background-color',
+      transitionDuration: 'normal',
+      _aeonChecked: {
+        marginLeft: 'auto',
+        bg: 'accent',
+      },
+    },
+    label: fieldLabelBase,
+  },
+})

package/packages/panda/src/recipes/tabs.ts

@@ -0,0 +1,50 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const slots = ['root', 'list', 'trigger', 'content', 'indicator'] as const
+
+export const tabsRecipe = defineSlotRecipe({
+  className: 'aeonTabs',
+  slots,
+  base: {
+    root: {
+      display: 'flex',
+      flexDirection: 'column',
+      gap: '4',
+      fontFamily: 'ui',
+    },
+    list: {
+      display: 'inline-flex',
+      borderRadius: 'md',
+      bg: 'surface',
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderColor: 'border',
+      p: 'insetYSm',
+      gap: 'insetYSm',
+    },
+    trigger: {
+      fontSize: 'sm',
+      borderRadius: '0.375rem',
+      color: 'muted',
+      py: 'insetY',
+      px: 'insetXSm',
+      minH: '2.5rem',
+      cursor: 'pointer',
+      transitionProperty: 'color, background-color',
+      transitionDuration: 'normal',
+      outline: 'none',
+      _focusVisible: { boxShadow: 'focusRing' },
+      _aeonSelected: {
+        bg: 'surfaceRaised',
+        color: 'accent',
+      },
+    },
+    content: {
+      fontSize: 'sm',
+      color: 'fg',
+      lineHeight: '1.65',
+      pt: 'padMd',
+      px: 'insetXSm',
+    },
+  },
+})

package/packages/panda/src/theme/catalog-types.ts

@@ -0,0 +1,24 @@
+export type AeonMode = 'light' | 'dark'
+
+export interface AeonPalette {
+  bg: string
+  surface: string
+  surfaceRaised: string
+  border: string
+  text: string
+  muted: string
+  accent: string
+  accentDim: string
+  danger: string
+  dangerDim: string
+  focusRing: string
+  gridLine: string
+}
+
+export interface AeonThemeDefinition {
+  id: string
+  label: string
+  description: string
+  light: AeonPalette
+  dark: AeonPalette
+}

package/packages/panda/src/theme/catalog.ts

@@ -0,0 +1,73 @@
+import type { AeonMode, AeonThemeDefinition } from './catalog-types.js'
+import { themesFromConfig } from './palette.js'
+import { aeonThemesConfig } from './themes.config.js'
+
+export type { AeonMode, AeonPalette, AeonThemeDefinition } from './catalog-types.js'
+export type { AeonPaletteInput, AeonThemeConfigEntry } from './palette.js'
+export { definePalette, themesFromConfig } from './palette.js'
+export { aeonThemesConfig } from './themes.config.js'
+
+export const AEON_THEMES: AeonThemeDefinition[] = themesFromConfig(aeonThemesConfig)
+
+export type AeonThemeId = (typeof aeonThemesConfig)[number]['id']
+
+export const AEON_THEME_MAP = Object.fromEntries(
+  AEON_THEMES.map((t) => [t.id, t]),
+) as Record<AeonThemeId, AeonThemeDefinition>
+
+export const AEON_THEME_IDS = aeonThemesConfig.map((t) => t.id) as AeonThemeId[]
+
+export const DEFAULT_THEME_ID: AeonThemeId = 'default'
+export const DEFAULT_MODE: AeonMode = 'dark'
+
+const STORAGE_THEME = 'aeon-theme'
+const STORAGE_MODE = 'aeon-mode'
+
+export function isAeonThemeId(value: string): value is AeonThemeId {
+  return value in AEON_THEME_MAP
+}
+
+export function isAeonMode(value: string): value is AeonMode {
+  return value === 'light' || value === 'dark'
+}
+
+export function applyAeonTheme(themeId: AeonThemeId, mode: AeonMode) {
+  const root = document.documentElement
+  root.dataset.aeonTheme = themeId
+  root.dataset.aeonMode = mode
+  root.style.colorScheme = mode
+
+  const meta = document.querySelector('meta[name="theme-color"]')
+  if (meta) {
+    meta.setAttribute('content', AEON_THEME_MAP[themeId][mode].bg)
+  }
+
+  try {
+    localStorage.setItem(STORAGE_THEME, themeId)
+    localStorage.setItem(STORAGE_MODE, mode)
+  } catch {
+    /* private mode */
+  }
+}
+
+/** Read saved prefs or system preference, then apply to `<html>`. */
+export function initAeonTheme(): { themeId: AeonThemeId; mode: AeonMode } {
+  let themeId: AeonThemeId = DEFAULT_THEME_ID
+  let mode: AeonMode = DEFAULT_MODE
+
+  try {
+    const storedTheme = localStorage.getItem(STORAGE_THEME)
+    const storedMode = localStorage.getItem(STORAGE_MODE)
+    if (storedTheme && isAeonThemeId(storedTheme)) themeId = storedTheme
+    if (storedMode && isAeonMode(storedMode)) {
+      mode = storedMode
+    } else if (!storedMode && window.matchMedia('(prefers-color-scheme: light)').matches) {
+      mode = 'light'
+    }
+  } catch {
+    if (window.matchMedia('(prefers-color-scheme: light)').matches) mode = 'light'
+  }
+
+  applyAeonTheme(themeId, mode)
+  return { themeId, mode }
+}

package/packages/panda/src/theme/chrome.css

@@ -0,0 +1,75 @@
+/* Aeon chrome — focus, selection, native controls. Import after theme-runtime.css */
+
+/* Keyboard-only focus rings; no “circle” on click-selected controls */
+:where([data-aeon-scope], [data-aeon-part]) {
+  -webkit-tap-highlight-color: transparent;
+}
+
+:where(
+  [data-aeon-scope] button,
+  [data-aeon-scope] a,
+  [data-aeon-part='trigger'],
+  [data-aeon-part='control'],
+  [data-aeon-part='item']
+):focus {
+  outline: none;
+}
+
+:where(
+  [data-aeon-scope] button,
+  [data-aeon-part='trigger'],
+  [data-aeon-part='control'],
+  [data-aeon-part='item']
+):focus:not(:focus-visible) {
+  box-shadow: none;
+}
+
+/* Selected ≠ focused — tabs, mode toggles, list items use surface tint only */
+[data-aeon-state*='selected']:not(:focus-visible),
+[data-aeon-state='open']:not(:focus-visible),
+[aria-pressed='true']:not(:focus-visible) {
+  outline: none;
+}
+
+::selection {
+  background: color-mix(in srgb, var(--colors-aeon-accent) 24%, transparent);
+  color: inherit;
+}
+
+/* Native controls — hidden when using Aeon Select; fallback styling otherwise */
+select:not([data-aeon-native-select]),
+textarea,
+input[type='text'],
+input[type='email'],
+input[type='search'],
+input[type='password'],
+input[type='number'] {
+  font-family: inherit;
+  font-size: 0.8125rem;
+  color: var(--colors-aeon-text);
+  background: var(--colors-aeon-surface);
+  border: 1px solid var(--colors-aeon-border);
+  border-radius: var(--radii-md, 0.5rem);
+  outline: none;
+}
+
+select:not([data-aeon-native-select]):focus-visible,
+textarea:focus-visible,
+input:focus-visible {
+  box-shadow: var(--shadows-focus-ring);
+}
+
+select:not([data-aeon-native-select]) {
+  appearance: none;
+  padding: 0.5rem 2rem 0.5rem 0.75rem;
+  cursor: pointer;
+  background-image: linear-gradient(45deg, transparent 50%, var(--colors-aeon-muted) 50%),
+    linear-gradient(135deg, var(--colors-aeon-muted) 50%, transparent 50%);
+  background-position:
+    calc(100% - 14px) calc(50% + 2px),
+    calc(100% - 9px) calc(50% + 2px);
+  background-size:
+    5px 5px,
+    5px 5px;
+  background-repeat: no-repeat;
+}

package/packages/panda/src/theme/global-theme-css.ts

@@ -0,0 +1,42 @@
+import { AEON_THEMES, type AeonMode, type AeonPalette } from './catalog.js'
+
+type ThemeCssVars = Record<string, string>
+
+function paletteVars(p: AeonPalette): ThemeCssVars {
+  return {
+    '--colors-aeon-bg': p.bg,
+    '--colors-aeon-surface': p.surface,
+    '--colors-aeon-surface-raised': p.surfaceRaised,
+    '--colors-aeon-border': p.border,
+    '--colors-aeon-text': p.text,
+    '--colors-aeon-muted': p.muted,
+    '--colors-aeon-accent': p.accent,
+    '--colors-aeon-accent-dim': p.accentDim,
+    '--colors-aeon-danger': p.danger,
+    '--colors-aeon-danger-dim': p.dangerDim,
+    '--shadows-focus-ring': p.focusRing,
+    '--aeon-grid-line': p.gridLine,
+    '--aeon-scrollbar-size': '10px',
+    '--aeon-scrollbar-track': p.surface,
+    '--aeon-scrollbar-thumb': p.border,
+    '--aeon-scrollbar-thumb-hover': p.muted,
+    '--aeon-scrollbar-corner': p.surfaceRaised,
+  }
+}
+
+/** Runtime theme × mode overrides — one source for Panda + landing CSS. */
+export function buildThemeGlobalCss(): Record<string, ThemeCssVars & { colorScheme?: AeonMode }> {
+  const rules: Record<string, ThemeCssVars & { colorScheme?: AeonMode }> = {}
+
+  for (const theme of AEON_THEMES) {
+    for (const mode of ['light', 'dark'] as const satisfies AeonMode[]) {
+      const selector = `html[data-aeon-theme="${theme.id}"][data-aeon-mode="${mode}"]`
+      rules[selector] = {
+        colorScheme: mode,
+        ...paletteVars(theme[mode]),
+      }
+    }
+  }
+
+  return rules
+}

package/packages/panda/src/theme/index.ts

@@ -0,0 +1,5 @@
+export * from './catalog.js'
+export { buildThemeGlobalCss } from './global-theme-css.js'
+export type { AeonPaletteInput, AeonThemeConfigEntry } from './palette.js'
+export { definePalette, themesFromConfig } from './palette.js'
+export { aeonThemesConfig } from './themes.config.js'

package/packages/panda/src/theme/palette.ts

@@ -0,0 +1,65 @@
+import type { AeonPalette, AeonThemeDefinition } from './catalog-types.js'
+
+/** Minimal palette fields — edit this shape in themes.config.ts */
+export interface AeonPaletteInput {
+  bg: string
+  surface: string
+  surfaceRaised?: string
+  border: string
+  text: string
+  muted: string
+  accent: string
+  accentDim?: string
+  danger?: string
+  dangerDim?: string
+  gridLine?: string
+}
+
+export interface AeonThemeConfigEntry {
+  id: string
+  label: string
+  description: string
+  light: AeonPaletteInput
+  dark: AeonPaletteInput
+}
+
+const focusRing = (bg: string, accent: string) =>
+  `0 0 0 2px ${bg}, 0 0 0 4px ${accent}`
+
+const DEFAULT_DANGER = { light: '#dc2626', dark: '#f87171' } as const
+
+/** Turn a short config entry into a full runtime palette (focus ring, dims, etc.). */
+export function definePalette(mode: 'light' | 'dark', input: AeonPaletteInput): AeonPalette {
+  const danger = input.danger ?? DEFAULT_DANGER[mode]
+  const accentDim = input.accentDim ?? `${input.accent}2e`
+  const dangerDim = input.dangerDim ?? `${danger}18`
+  const surfaceRaised = input.surfaceRaised ?? input.surface
+
+  return {
+    bg: input.bg,
+    surface: input.surface,
+    surfaceRaised,
+    border: input.border,
+    text: input.text,
+    muted: input.muted,
+    accent: input.accent,
+    accentDim,
+    danger,
+    dangerDim,
+    focusRing: focusRing(input.bg, input.accent),
+    gridLine:
+      input.gridLine ??
+      (mode === 'light' ? 'rgba(15, 23, 42, 0.07)' : 'rgba(255, 255, 255, 0.05)'),
+  }
+}
+
+/** Build theme definitions from themes.config.ts entries. */
+export function themesFromConfig(entries: readonly AeonThemeConfigEntry[]): AeonThemeDefinition[] {
+  return entries.map((entry) => ({
+    id: entry.id,
+    label: entry.label,
+    description: entry.description,
+    light: definePalette('light', entry.light),
+    dark: definePalette('dark', entry.dark),
+  }))
+}

package/packages/panda/src/theme/scrollbars.css

@@ -0,0 +1,96 @@
+/* Aeon scrollbars — vertical, horizontal, and both. Uses theme runtime vars. */
+
+html,
+[data-aeon-scroll],
+[data-aeon-scope='scroll'] [data-aeon-part='viewport'],
+[data-aeon-scope='select'] [data-aeon-part='content'],
+.aeon-scroll,
+.code-example {
+  scrollbar-width: thin;
+  scrollbar-color: var(--aeon-scrollbar-thumb) var(--aeon-scrollbar-track);
+}
+
+html::-webkit-scrollbar,
+[data-aeon-scroll]::-webkit-scrollbar,
+[data-aeon-scope='scroll'] [data-aeon-part='viewport']::-webkit-scrollbar,
+[data-aeon-scope='select'] [data-aeon-part='content']::-webkit-scrollbar,
+.aeon-scroll::-webkit-scrollbar,
+.code-example::-webkit-scrollbar {
+  width: var(--aeon-scrollbar-size);
+  height: var(--aeon-scrollbar-size);
+}
+
+html::-webkit-scrollbar-track,
+[data-aeon-scroll]::-webkit-scrollbar-track,
+[data-aeon-scope='scroll'] [data-aeon-part='viewport']::-webkit-scrollbar-track,
+[data-aeon-scope='select'] [data-aeon-part='content']::-webkit-scrollbar-track,
+.aeon-scroll::-webkit-scrollbar-track,
+.code-example::-webkit-scrollbar-track {
+  background: var(--aeon-scrollbar-track);
+}
+
+html::-webkit-scrollbar-thumb,
+[data-aeon-scroll]::-webkit-scrollbar-thumb,
+[data-aeon-scope='scroll'] [data-aeon-part='viewport']::-webkit-scrollbar-thumb,
+[data-aeon-scope='select'] [data-aeon-part='content']::-webkit-scrollbar-thumb,
+.aeon-scroll::-webkit-scrollbar-thumb,
+.code-example::-webkit-scrollbar-thumb {
+  background: var(--aeon-scrollbar-thumb);
+  border-radius: 999px;
+  border: 2px solid var(--aeon-scrollbar-track);
+}
+
+html::-webkit-scrollbar-thumb:hover,
+[data-aeon-scroll]::-webkit-scrollbar-thumb:hover,
+[data-aeon-scope='scroll'] [data-aeon-part='viewport']::-webkit-scrollbar-thumb:hover,
+[data-aeon-scope='select'] [data-aeon-part='content']::-webkit-scrollbar-thumb:hover,
+.aeon-scroll::-webkit-scrollbar-thumb:hover,
+.code-example::-webkit-scrollbar-thumb:hover {
+  background: var(--aeon-scrollbar-thumb-hover);
+}
+
+html::-webkit-scrollbar-corner,
+[data-aeon-scroll]::-webkit-scrollbar-corner,
+[data-aeon-scope='scroll'] [data-aeon-part='viewport']::-webkit-scrollbar-corner,
+[data-aeon-scope='select'] [data-aeon-part='content']::-webkit-scrollbar-corner,
+.aeon-scroll::-webkit-scrollbar-corner,
+.code-example::-webkit-scrollbar-corner {
+  background: var(--aeon-scrollbar-corner);
+}
+
+/* Edge fade when content extends beyond viewport (state from ScrollRegion) */
+[data-aeon-scope='scroll'][data-aeon-part='viewport'][data-aeon-state*='between-y'] {
+  box-shadow:
+    inset 0 10px 10px -10px color-mix(in srgb, var(--colors-aeon-bg) 85%, transparent),
+    inset 0 -10px 10px -10px color-mix(in srgb, var(--colors-aeon-bg) 85%, transparent);
+}
+
+[data-aeon-scope='scroll'][data-aeon-part='viewport'][data-aeon-state*='between-x'] {
+  box-shadow:
+    inset 10px 0 10px -10px color-mix(in srgb, var(--colors-aeon-bg) 85%, transparent),
+    inset -10px 0 10px -10px color-mix(in srgb, var(--colors-aeon-bg) 85%, transparent);
+}
+
+[data-aeon-scope='scroll'][data-aeon-part='viewport'][data-aeon-state*='overflow-both'][data-aeon-state*='between-y'][data-aeon-state*='between-x'] {
+  box-shadow:
+    inset 0 10px 10px -10px color-mix(in srgb, var(--colors-aeon-bg) 85%, transparent),
+    inset 0 -10px 10px -10px color-mix(in srgb, var(--colors-aeon-bg) 85%, transparent),
+    inset 10px 0 10px -10px color-mix(in srgb, var(--colors-aeon-bg) 85%, transparent),
+    inset -10px 0 10px -10px color-mix(in srgb, var(--colors-aeon-bg) 85%, transparent);
+}
+
+[data-aeon-scope='scroll'][data-aeon-part='viewport'][data-aeon-state*='at-start-y'] {
+  box-shadow: inset 0 -10px 10px -10px color-mix(in srgb, var(--colors-aeon-bg) 80%, transparent);
+}
+
+[data-aeon-scope='scroll'][data-aeon-part='viewport'][data-aeon-state*='at-end-y'] {
+  box-shadow: inset 0 10px 10px -10px color-mix(in srgb, var(--colors-aeon-bg) 80%, transparent);
+}
+
+[data-aeon-scope='scroll'][data-aeon-part='viewport'][data-aeon-state*='at-start-x'] {
+  box-shadow: inset -10px 0 10px -10px color-mix(in srgb, var(--colors-aeon-bg) 80%, transparent);
+}
+
+[data-aeon-scope='scroll'][data-aeon-part='viewport'][data-aeon-state*='at-end-x'] {
+  box-shadow: inset 10px 0 10px -10px color-mix(in srgb, var(--colors-aeon-bg) 80%, transparent);
+}

package/packages/panda/src/theme/semantic-tokens.ts

@@ -0,0 +1,17 @@
+import { defineSemanticTokens } from '@pandacss/dev'
+
+/** Color semantics only — font/radius/shadow tokens use direct keys to avoid circular refs. */
+export const semanticTokens = defineSemanticTokens({
+  colors: {
+    bg: { value: 'var(--colors-aeon-bg)' },
+    surface: { value: 'var(--colors-aeon-surface)' },
+    surfaceRaised: { value: 'var(--colors-aeon-surface-raised)' },
+    border: { value: 'var(--colors-aeon-border)' },
+    fg: { value: 'var(--colors-aeon-text)' },
+    muted: { value: 'var(--colors-aeon-muted)' },
+    accent: { value: 'var(--colors-aeon-accent)' },
+    accentDim: { value: 'var(--colors-aeon-accent-dim)' },
+    danger: { value: 'var(--colors-aeon-danger)' },
+    dangerDim: { value: 'var(--colors-aeon-danger-dim)' },
+  },
+})