aeon-ui-engine 1.5.1 → 1.9.0

package/packages/core/src/list-window.ts

@@ -0,0 +1,149 @@
+/**
+ * Windowed slice of a long list or grid: which items to mount and how much
+ * space stands in for the rest. Geometry, not lifecycle, so like Scroll it is
+ * a pure function over measurements, never a machine.
+ */
+
+export interface ListWindow {
+  /** First mounted item index. */
+  start: number
+  /** One past the last mounted item index. */
+  end: number
+  /** Pixels standing in for the rows above the window. */
+  padStart: number
+  /** Pixels standing in for the rows below the window. */
+  padEnd: number
+}
+
+/** The direction a list scrolls: rows down a column, or items along a strip. */
+export type ListWindowAxis = 'y' | 'x'
+
+export interface ListWindowInput {
+  total: number
+  /** Row pitch in pixels along the scroll axis, gap included. */
+  rowExtent: number
+  /** Items per row; 1 for a list. */
+  columns?: number
+  /** Rows mounted beyond each edge of the viewport. */
+  overscan?: number
+  /** How far the list's content has moved past the start of its viewport. */
+  scrolledPast: number
+  /** Viewport length along the scroll axis. */
+  viewportHeight: number
+  /** Below this many items the whole list mounts. */
+  minItems?: number
+}
+
+/**
+ * Below this, windowing costs more than it saves and a mis-measured row would
+ * visibly shift a short list.
+ */
+export const LIST_WINDOW_MIN_ITEMS = 60
+
+export function fullListWindow(total: number): ListWindow {
+  return { start: 0, end: Math.max(0, total), padStart: 0, padEnd: 0 }
+}
+
+export function sameListWindow(a: ListWindow, b: ListWindow): boolean {
+  return a.start === b.start && a.end === b.end && a.padStart === b.padStart && a.padEnd === b.padEnd
+}
+
+export function computeListWindow(input: ListWindowInput): ListWindow {
+  const total = Math.max(0, Math.floor(input.total))
+  const minItems = input.minItems ?? LIST_WINDOW_MIN_ITEMS
+  const rowExtent = input.rowExtent
+  if (total < minItems || !(rowExtent > 0)) return fullListWindow(total)
+  const columns = Math.max(1, Math.floor(input.columns ?? 1))
+  const overscan = Math.max(0, Math.floor(input.overscan ?? 8))
+  const rows = Math.ceil(total / columns)
+  const firstRow = Math.max(0, Math.floor(Math.max(0, input.scrolledPast) / rowExtent) - overscan)
+  const visibleRows = Math.ceil(Math.max(0, input.viewportHeight) / rowExtent) + overscan * 2
+  const startRow = Math.min(firstRow, Math.max(0, rows - visibleRows))
+  const endRow = Math.min(rows, startRow + visibleRows)
+  return {
+    start: startRow * columns,
+    end: Math.min(total, endRow * columns),
+    padStart: startRow * rowExtent,
+    padEnd: Math.max(0, (rows - endRow) * rowExtent),
+  }
+}
+
+/** Attribute that marks a spacer, so row measuring skips it. */
+export const LIST_WINDOW_PAD_ATTR = 'data-aeon-window-pad'
+
+export function listWindowPadAttrs(edge: 'start' | 'end'): Record<string, string | boolean> {
+  return { [LIST_WINDOW_PAD_ATTR]: edge, 'aria-hidden': true }
+}
+
+/** The element that actually scrolls a list: the nearest ancestor overflowing on the axis, else the window. */
+export function resolveScrollRoot(el: HTMLElement | null, axis: ListWindowAxis = 'y'): HTMLElement | Window {
+  let node: HTMLElement | null = el
+  while (node) {
+    const style = getComputedStyle(node)
+    const overflow = axis === 'x' ? style.overflowX : style.overflowY
+    if (overflow === 'auto' || overflow === 'scroll') return node
+    node = node.parentElement
+  }
+  return window
+}
+
+export function scrollRootHeight(root: HTMLElement | Window): number {
+  return root === window ? window.innerHeight : (root as HTMLElement).clientHeight
+}
+
+/** Viewport length along the axis. */
+export function scrollRootExtent(root: HTMLElement | Window, axis: ListWindowAxis = 'y'): number {
+  if (axis === 'y') return scrollRootHeight(root)
+  return root === window ? window.innerWidth : (root as HTMLElement).clientWidth
+}
+
+export function scrollRootTop(root: HTMLElement | Window): number {
+  return root === window ? 0 : (root as HTMLElement).getBoundingClientRect().top
+}
+
+/**
+ * How far the list's content has moved past the viewport. A list that is its
+ * own scroll root reports its scroll offset: subtracting its own edge from
+ * itself is always 0, which kept the first rows mounted while the scrollbar
+ * travelled through the end spacer.
+ */
+export function scrollRootScrolledPast(
+  root: HTMLElement | Window,
+  list: HTMLElement,
+  axis: ListWindowAxis = 'y',
+): number {
+  if (root === list) return axis === 'x' ? list.scrollLeft : list.scrollTop
+  if (axis === 'y') return Math.max(0, scrollRootTop(root) - list.getBoundingClientRect().top)
+  const rootLeft = root === window ? 0 : (root as HTMLElement).getBoundingClientRect().left
+  return Math.max(0, rootLeft - list.getBoundingClientRect().left)
+}
+
+/** Real column count for a grid; 1 for a list. The hint is only a fallback. */
+export function measureListColumns(style: CSSStyleDeclaration, hint = 1): number {
+  if (!style.display.includes('grid')) return 1
+  const tracks = style.gridTemplateColumns.trim()
+  if (!tracks || tracks === 'none') return Math.max(1, hint)
+  return Math.max(1, tracks.split(/\s+/).length)
+}
+
+/** Row pitch along the axis from a rendered row, so spacers match what is on screen. */
+export function measureListRowExtent(
+  list: HTMLElement,
+  style: CSSStyleDeclaration,
+  hint: number,
+  rowSelector?: string,
+  axis: ListWindowAxis = 'y',
+): number {
+  const row = Array.from(list.children).find(
+    (node): node is HTMLElement =>
+      node instanceof HTMLElement &&
+      !node.hasAttribute(LIST_WINDOW_PAD_ATTR) &&
+      (!rowSelector || node.matches(rowSelector)),
+  )
+  if (!row) return hint
+  const rect = row.getBoundingClientRect()
+  const size = axis === 'x' ? rect.width : rect.height
+  if (size <= 0) return hint
+  const gap = Number.parseFloat(axis === 'x' ? style.columnGap : style.rowGap)
+  return size + (Number.isFinite(gap) ? gap : 0)
+}

package/packages/core/src/sound.ts

@@ -0,0 +1,154 @@
+/**
+ * Short UI sounds synthesized with Web Audio: no files to ship or license.
+ * Silent until an app calls `configureSounds({ enabled: true })`.
+ */
+
+export type SoundName = 'tap' | 'copy' | 'send' | 'success' | 'attention' | 'error' | 'ready'
+
+export interface Tone {
+  /** Start frequency in Hz. */
+  freq: number
+  /** End frequency in Hz; glides from `freq` over the tone. */
+  to?: number
+  /** Offset from the sound's start, in seconds. */
+  at: number
+  /** Time to fade out, in seconds. */
+  duration: number
+  type?: OscillatorType
+  /** Peak gain before the master volume, 0 to 1. */
+  gain: number
+}
+
+/** A soft mallet note with a faint metal-bar shimmer: quiet inharmonic partials (2.76x, 5.4x) over the fundamental. */
+const pluck = (freq: number, at: number, duration: number, gain: number): Tone[] => [
+  { freq, at, duration, type: 'sine', gain },
+  { freq: freq * 2.76, at, duration: duration * 0.4, type: 'sine', gain: gain * 0.05 },
+  { freq: freq * 5.4, at, duration: Math.min(0.03, duration * 0.2), type: 'sine', gain: gain * 0.02 },
+]
+
+export const soundPresets: Record<SoundName, readonly Tone[]> = {
+  tap: pluck(880, 0, 0.07, 0.28),
+  copy: [...pluck(784, 0, 0.09, 0.3), ...pluck(1175, 0.06, 0.16, 0.26)],
+  send: [...pluck(587, 0, 0.1, 0.3), ...pluck(880, 0.05, 0.18, 0.26)],
+  success: [...pluck(523, 0, 0.22, 0.28), ...pluck(659, 0.08, 0.24, 0.25), ...pluck(784, 0.16, 0.42, 0.24)],
+  attention: [...pluck(988, 0, 0.16, 0.24), ...pluck(988, 0.15, 0.3, 0.18)],
+  error: [
+    { freq: 392, at: 0, duration: 0.14, type: 'triangle', gain: 0.3 },
+    { freq: 311, at: 0.12, duration: 0.24, type: 'triangle', gain: 0.28 },
+  ],
+  ready: [...pluck(659, 0, 0.16, 0.22), ...pluck(784, 0.07, 0.18, 0.22), ...pluck(988, 0.14, 0.2, 0.22), ...pluck(1319, 0.21, 0.5, 0.2)],
+}
+
+export interface SoundSettings {
+  enabled: boolean
+  /** Master volume, 0 to 1. */
+  volume: number
+}
+
+/** The slice of `AudioContext` the player uses; tests pass a fake. */
+export type SoundContext = Pick<AudioContext, 'currentTime' | 'state' | 'resume' | 'createOscillator' | 'createGain' | 'createBiquadFilter' | 'destination'>
+
+export interface SoundPlayer {
+  play(name: SoundName): void
+  configure(settings: Partial<SoundSettings>): void
+  settings(): SoundSettings
+}
+
+const ATTACK = 0.004
+/** Rounds off the top end so no preset sounds harsh on laptop speakers. */
+const LOWPASS_HZ = 4600
+const FLOOR = 0.0001
+/** The same sound fired again within this many seconds is dropped. */
+const REPEAT_GAP = 0.06
+
+const clamp01 = (n: number) => (Number.isFinite(n) ? Math.min(1, Math.max(0, n)) : 0)
+
+function browserContext(): SoundContext | null {
+  const Ctor =
+    typeof window === 'undefined'
+      ? undefined
+      : (window.AudioContext ?? (window as unknown as { webkitAudioContext?: typeof AudioContext }).webkitAudioContext)
+  return Ctor ? new Ctor() : null
+}
+
+function resumeOnGesture(ctx: SoundContext) {
+  if (typeof window === 'undefined') return
+  const resume = () => {
+    void ctx.resume().catch(() => {})
+    window.removeEventListener('pointerdown', resume, true)
+    window.removeEventListener('keydown', resume, true)
+  }
+  window.addEventListener('pointerdown', resume, true)
+  window.addEventListener('keydown', resume, true)
+}
+
+export function createSoundPlayer(
+  createContext: () => SoundContext | null = browserContext,
+  initial: Partial<SoundSettings> = {},
+): SoundPlayer {
+  let current: SoundSettings = { enabled: false, volume: 0.5, ...initial }
+  current.volume = clamp01(current.volume)
+  let ctx: SoundContext | null | undefined
+  let output: AudioNode | null = null
+  const lastPlayed = new Map<SoundName, number>()
+
+  const context = () => {
+    if (ctx === undefined) {
+      try {
+        ctx = createContext()
+      } catch {
+        ctx = null
+      }
+      if (ctx) {
+        const filter = ctx.createBiquadFilter()
+        filter.type = 'lowpass'
+        filter.frequency.value = LOWPASS_HZ
+        filter.connect(ctx.destination)
+        output = filter
+        if (ctx.state === 'suspended') resumeOnGesture(ctx)
+      }
+    }
+    return ctx
+  }
+
+  return {
+    play(name) {
+      if (!current.enabled || current.volume === 0) return
+      const audio = context()
+      if (!audio || !output || audio.state === 'closed') return
+      const now = audio.currentTime
+      const last = lastPlayed.get(name)
+      if (last !== undefined && now - last < REPEAT_GAP) return
+      lastPlayed.set(name, now)
+      for (const tone of soundPresets[name]) {
+        const start = now + tone.at
+        const end = start + tone.duration
+        const osc = audio.createOscillator()
+        const gain = audio.createGain()
+        osc.type = tone.type ?? 'sine'
+        osc.frequency.setValueAtTime(tone.freq, start)
+        if (tone.to !== undefined) osc.frequency.exponentialRampToValueAtTime(tone.to, end)
+        gain.gain.setValueAtTime(FLOOR, start)
+        gain.gain.linearRampToValueAtTime(Math.max(FLOOR, tone.gain * current.volume), start + ATTACK)
+        gain.gain.exponentialRampToValueAtTime(FLOOR, end)
+        osc.connect(gain)
+        gain.connect(output)
+        osc.start(start)
+        osc.stop(end + 0.02)
+      }
+    },
+    configure(settings) {
+      current = { ...current, ...settings }
+      current.volume = clamp01(current.volume)
+    },
+    settings: () => ({ ...current }),
+  }
+}
+
+const shared = createSoundPlayer()
+
+/** Play a preset through the shared player; a no-op while sounds are off. */
+export const playSound = (name: SoundName) => shared.play(name)
+/** Turn the shared player on or off and set its volume. */
+export const configureSounds = (settings: Partial<SoundSettings>) => shared.configure(settings)
+export const soundSettings = () => shared.settings()

package/packages/panda/package.json

@@ -16,11 +16,11 @@
     "./themes/config": "./src/theme/themes.config.ts",
     "./styled-system/css": {
       "types": "./styled-system/css/index.d.ts",
-      "import": "./styled-system/css/index.mjs"
+      "import": "./styled-system/css/index.js"
     },
     "./styled-system/recipes": {
       "types": "./styled-system/recipes/index.d.ts",
-      "import": "./styled-system/recipes/index.mjs"
+      "import": "./styled-system/recipes/index.js"
     },
     "./preset": "./panda.config.ts",
     "./themes": "./src/theme/index.ts"
@@ -33,7 +33,10 @@
     "scripts"
   ],
   "devDependencies": {
-    "@pandacss/dev": "^1.11.2",
+    "@pandacss/dev": "^2.3.0",
+    "@pandacss/preset-base": "^2.3.0",
+    "@pandacss/preset-panda": "^2.3.0",
+    "@pandacss/types": "^2.3.0",
     "tsx": "^4.19.4",
     "typescript": "^5.8.3"
   }

package/packages/panda/panda.config.ts

@@ -28,6 +28,10 @@ import {
   switchRecipe,
   tabsRecipe,
   separatorRecipe,
+  proseRecipe,
+  textareaRecipe,
+  segmentGroupRecipe,
+  clipboardRecipe,
   progressRecipe,
   radioGroupRecipe,
   sliderRecipe,
@@ -44,6 +48,8 @@ import { semanticTokens } from './src/theme/semantic-tokens.js'
 import { tokens } from './src/theme/tokens.js'
 
 export default defineConfig({
+  // v2 adds no presets by itself; v1 added both of these when none were listed.
+  presets: ['@pandacss/preset-base', '@pandacss/preset-panda'],
   preflight: true,
   include: [
     '../ui/src/**/*.{ts,tsx}',
@@ -68,6 +74,8 @@ export default defineConfig({
       aeonProfileHeader: [{ align: ['*'] }],
       aeonEntry: [{ density: ['*'], layout: ['*'] }],
       aeonThemeSwitcher: [{ size: ['*'] }],
+      aeonTextarea: [{ variant: ['*'] }],
+      aeonSegmentGroup: [{ size: ['*'] }],
     },
   },
   conditions: {
@@ -120,6 +128,10 @@ export default defineConfig({
         aeonDialog: dialogRecipe,
         aeonTabs: tabsRecipe,
         aeonSeparator: separatorRecipe,
+        aeonProse: proseRecipe,
+        aeonTextarea: textareaRecipe,
+        aeonSegmentGroup: segmentGroupRecipe,
+        aeonClipboard: clipboardRecipe,
         aeonProgress: progressRecipe,
         aeonRadioGroup: radioGroupRecipe,
         aeonSlider: sliderRecipe,

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

@@ -0,0 +1,40 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const slots = ['root', 'trigger', 'indicator', 'status'] as const
+
+export const clipboardRecipe = defineSlotRecipe({
+  className: 'aeonClipboard',
+  description: 'Copy a value with one click; the trigger confirms copied or failed',
+  slots,
+  base: {
+    root: {},
+    trigger: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: '0.35em',
+      minW: '1.75rem',
+      h: '1.75rem',
+      px: '0.4rem',
+      border: '0',
+      borderRadius: 'md',
+      bg: 'transparent',
+      color: 'muted',
+      fontFamily: 'ui',
+      fontSize: 'xs',
+      cursor: 'pointer',
+      outline: 'none',
+      transitionProperty: 'color, background-color',
+      transitionDuration: 'normal',
+      _hover: { bg: 'surfaceRaised', color: 'fg' },
+      _focusVisible: { boxShadow: 'focusRing' },
+      '&[data-aeon-state=copied]': { color: 'accent' },
+      '&[data-aeon-state=failed]': { color: 'danger' },
+    },
+    indicator: {
+      display: 'inline-flex',
+      '& svg': { width: '0.875rem', height: '0.875rem' },
+    },
+    status: {},
+  },
+})

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

@@ -46,9 +46,10 @@ export const composerRecipe = defineSlotRecipe({
     },
     input: {
       width: '100%',
-      minH: 'controlMinHSm',
-      h: 'controlMinHSm',
-      maxH: '5.5rem',
+      /* Grows with its content; rows come from Composer.Input's minRows / maxRows. */
+      fieldSizing: 'content',
+      minH: 'max(token(spacing.controlMinHSm), calc(var(--aeon-textarea-min-rows, 1) * 1lh + 0.7rem + 2px))',
+      maxH: 'calc(var(--aeon-textarea-max-rows, 4) * 1lh + 0.7rem + 2px)',
       resize: 'none',
       overflowY: 'auto',
       boxSizing: 'border-box',

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

@@ -27,6 +27,10 @@ export { switchRecipe } from './switch.js'
 export { themeSwitcherRecipe } from './theme-switcher.js'
 export { tabsRecipe } from './tabs.js'
 export { separatorRecipe } from './separator.js'
+export { proseRecipe } from './prose.js'
+export { textareaRecipe } from './textarea.js'
+export { segmentGroupRecipe } from './segment-group.js'
+export { clipboardRecipe } from './clipboard.js'
 export { progressRecipe } from './progress.js'
 export { radioGroupRecipe } from './radio-group.js'
 export { sliderRecipe } from './slider.js'

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

@@ -0,0 +1,110 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const slots = ['root'] as const
+
+const blocks = ':is(p, ul, ol, pre, blockquote, table)'
+
+/** Sizes are in em so prose follows the font size it is placed in. */
+export const proseRecipe = defineSlotRecipe({
+  className: 'aeonProse',
+  description: 'Long-form rich text: markdown output, docs, agent answers',
+  slots,
+  base: {
+    root: {
+      minW: '0',
+      color: 'fg',
+      fontFamily: 'ui',
+      lineHeight: '1.6',
+      overflowWrap: 'anywhere',
+      [`& ${blocks}`]: { m: '0', mb: '0.75em' },
+      '& > :first-child': { mt: '0' },
+      '& > :last-child': { mb: '0' },
+      '& :is(h1, h2, h3, h4, h5, h6)': {
+        mt: '1.1em',
+        mb: '0.4em',
+        color: 'fg',
+        fontWeight: 'semibold',
+        lineHeight: '1.3',
+      },
+      '& h1': { fontSize: '1.4em' },
+      '& h2': { fontSize: '1.2em' },
+      '& h3': { fontSize: '1.08em' },
+      '& :is(h4, h5, h6)': { fontSize: '1em' },
+      '& strong': { fontWeight: 'semibold' },
+      /* The Aeon reset strips list-style, so markers are drawn. list-item honours <ol start>. */
+      '& :is(ul, ol)': { pl: '1.3em', listStyle: 'none' },
+      '& li': { position: 'relative' },
+      '& li + li': { mt: '0.3em' },
+      [`& li > ${blocks}`]: { mt: '0.3em', mb: '0' },
+      '& li > p:first-child': { mt: '0' },
+      '& ul > li::before': {
+        content: '""',
+        position: 'absolute',
+        left: '-0.9em',
+        top: '0.68em',
+        width: '0.3em',
+        height: '0.3em',
+        borderRadius: 'full',
+        bg: 'muted',
+      },
+      '& ol > li::before': {
+        content: 'counter(list-item) "."',
+        position: 'absolute',
+        right: 'calc(100% + 0.45em)',
+        color: 'muted',
+        fontVariantNumeric: 'tabular-nums',
+      },
+      '& blockquote': {
+        pl: '0.8em',
+        borderLeftWidth: '2px',
+        borderLeftStyle: 'solid',
+        borderLeftColor: 'border',
+        color: 'muted',
+      },
+      '& hr': {
+        my: '1em',
+        border: '0',
+        borderTopWidth: '1px',
+        borderTopStyle: 'solid',
+        borderTopColor: 'border',
+      },
+      '& a': {
+        color: 'accent',
+        textDecoration: 'none',
+        borderRadius: 'sm',
+        outline: 'none',
+        _hover: { textDecoration: 'underline' },
+        _focusVisible: { boxShadow: 'focusRing' },
+      },
+      '& :not(pre) > code': {
+        px: '0.35em',
+        py: '0.1em',
+        borderRadius: 'sm',
+        bg: 'surfaceRaised',
+        fontFamily: 'mono',
+        fontSize: '0.9em',
+      },
+      '& pre': {
+        p: '0.75em',
+        borderRadius: 'md',
+        bg: 'bg',
+        overflow: 'auto',
+        fontFamily: 'mono',
+        fontSize: '0.9em',
+        lineHeight: '1.5',
+      },
+      '& pre code': { fontFamily: 'inherit', fontSize: 'inherit' },
+      '& table': { width: '100%', borderCollapse: 'collapse', fontSize: '0.95em' },
+      '& :is(th, td)': {
+        px: '0.6em',
+        py: '0.35em',
+        borderBottomWidth: '1px',
+        borderBottomStyle: 'solid',
+        borderBottomColor: 'border',
+        textAlign: 'start',
+      },
+      '& th': { fontWeight: 'semibold' },
+      '& img': { maxW: '100%', borderRadius: 'md' },
+    },
+  },
+})

package/packages/panda/src/recipes/segment-group.ts

@@ -0,0 +1,50 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const slots = ['root', 'item'] as const
+
+export const segmentGroupRecipe = defineSlotRecipe({
+  className: 'aeonSegmentGroup',
+  description: 'Compact single choice: adjacent buttons on a shared track',
+  slots,
+  base: {
+    root: {
+      display: 'inline-flex',
+      flexShrink: 0,
+      alignItems: 'stretch',
+      gap: '2px',
+      p: '2px',
+      borderRadius: 'md',
+      bg: 'surfaceRaised',
+      fontFamily: 'ui',
+      '&[data-orientation=vertical]': { flexDirection: 'column' },
+      _disabled: { opacity: 0.6 },
+    },
+    item: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: '0.35em',
+      border: '0',
+      borderRadius: 'calc(token(radii.md) - 2px)',
+      bg: 'transparent',
+      color: 'muted',
+      fontWeight: 'semibold',
+      whiteSpace: 'nowrap',
+      cursor: 'pointer',
+      outline: 'none',
+      transitionProperty: 'color, background-color',
+      transitionDuration: 'normal',
+      _hover: { color: 'fg' },
+      _focusVisible: { boxShadow: 'focusRing' },
+      _aeonSelected: { bg: 'bg', color: 'fg' },
+      _disabled: { cursor: 'not-allowed', _hover: { color: 'muted' } },
+    },
+  },
+  variants: {
+    size: {
+      sm: { item: { fontSize: 'xs', px: '0.6rem', py: '0.2rem' } },
+      md: { item: { fontSize: 'sm', px: 'insetXSm', py: 'insetYSm' } },
+    },
+  },
+  defaultVariants: { size: 'md' },
+})

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

@@ -0,0 +1,60 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const slots = ['root'] as const
+
+const pad = 'var(--aeon-textarea-pad)'
+
+export const textareaRecipe = defineSlotRecipe({
+  className: 'aeonTextarea',
+  description: 'Multi-line input that grows with content between min and max rows',
+  slots,
+  base: {
+    root: {
+      '--aeon-textarea-pad': 'token(spacing.insetYSm)',
+      display: 'block',
+      width: '100%',
+      boxSizing: 'border-box',
+      /* Rows are set by the headless part; 1lh is one line at the current line height. */
+      fieldSizing: 'content',
+      minH: `calc(var(--aeon-textarea-min-rows, 2) * 1lh + 2 * ${pad} + 2px)`,
+      maxH: `calc(var(--aeon-textarea-max-rows, 1e4) * 1lh + 2 * ${pad} + 2px)`,
+      overflowY: 'auto',
+      resize: 'none',
+      m: '0',
+      px: 'insetX',
+      py: pad,
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderColor: 'border',
+      borderRadius: 'md',
+      bg: 'surface',
+      color: 'fg',
+      fontFamily: 'ui',
+      fontSize: 'sm',
+      lineHeight: '1.5',
+      outline: 'none',
+      transitionProperty: 'border-color',
+      transitionDuration: 'normal',
+      _placeholder: { color: 'muted' },
+      _focusVisible: { borderColor: 'accent' },
+      '&[aria-invalid=true]': { borderColor: 'danger' },
+      _disabled: { opacity: 0.6, cursor: 'not-allowed' },
+    },
+  },
+  variants: {
+    variant: {
+      outline: {},
+      /* Bare text inside a container that draws its own chrome (composers, inline editors). */
+      ghost: {
+        root: {
+          '--aeon-textarea-pad': '0px',
+          px: '0',
+          borderColor: 'transparent',
+          bg: 'transparent',
+          _focusVisible: { borderColor: 'transparent' },
+        },
+      },
+    },
+  },
+  defaultVariants: { variant: 'outline' },
+})

package/packages/panda/styled-system/css/conditions.d.ts

@@ -0,0 +1,7 @@
+export declare const breakpointKeys: string[];
+
+export declare function isCondition(v: string): boolean;
+
+export declare function finalizeConditions(paths: string[]): string[];
+
+export declare function sortConditions(paths: string[]): string[];