aeon-ui-engine 1.8.0 → 1.9.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[];

package/packages/panda/styled-system/css/conditions.js

@@ -0,0 +1,32 @@
+import { withoutSpace } from '../helpers';
+
+const conditions = /* @__PURE__ */ new Set(/* @__PURE__ */ "2xl,2xlDown,2xlOnly,@/2xl,@/2xlDown,@/2xlOnly,@/2xlTo3xl,@/2xlTo4xl,@/2xlTo5xl,@/2xlTo6xl,@/2xlTo7xl,@/2xlTo8xl,@/2xs,@/2xsDown,@/2xsOnly,@/2xsTo2xl,@/2xsTo3xl,@/2xsTo4xl,@/2xsTo5xl,@/2xsTo6xl,@/2xsTo7xl,@/2xsTo8xl,@/2xsToLg,@/2xsToMd,@/2xsToSm,@/2xsToXl,@/2xsToXs,@/3xl,@/3xlDown,@/3xlOnly,@/3xlTo4xl,@/3xlTo5xl,@/3xlTo6xl,@/3xlTo7xl,@/3xlTo8xl,@/3xs,@/3xsDown,@/3xsOnly,@/3xsTo2xl,@/3xsTo2xs,@/3xsTo3xl,@/3xsTo4xl,@/3xsTo5xl,@/3xsTo6xl,@/3xsTo7xl,@/3xsTo8xl,@/3xsToLg,@/3xsToMd,@/3xsToSm,@/3xsToXl,@/3xsToXs,@/4xl,@/4xlDown,@/4xlOnly,@/4xlTo5xl,@/4xlTo6xl,@/4xlTo7xl,@/4xlTo8xl,@/5xl,@/5xlDown,@/5xlOnly,@/5xlTo6xl,@/5xlTo7xl,@/5xlTo8xl,@/6xl,@/6xlDown,@/6xlOnly,@/6xlTo7xl,@/6xlTo8xl,@/7xl,@/7xlDown,@/7xlOnly,@/7xlTo8xl,@/8xl,@/8xlDown,@/8xlOnly,@/lg,@/lgDown,@/lgOnly,@/lgTo2xl,@/lgTo3xl,@/lgTo4xl,@/lgTo5xl,@/lgTo6xl,@/lgTo7xl,@/lgTo8xl,@/lgToXl,@/md,@/mdDown,@/mdOnly,@/mdTo2xl,@/mdTo3xl,@/mdTo4xl,@/mdTo5xl,@/mdTo6xl,@/mdTo7xl,@/mdTo8xl,@/mdToLg,@/mdToXl,@/sm,@/smDown,@/smOnly,@/smTo2xl,@/smTo3xl,@/smTo4xl,@/smTo5xl,@/smTo6xl,@/smTo7xl,@/smTo8xl,@/smToLg,@/smToMd,@/smToXl,@/xl,@/xlDown,@/xlOnly,@/xlTo2xl,@/xlTo3xl,@/xlTo4xl,@/xlTo5xl,@/xlTo6xl,@/xlTo7xl,@/xlTo8xl,@/xs,@/xsDown,@/xsOnly,@/xsTo2xl,@/xsTo3xl,@/xsTo4xl,@/xsTo5xl,@/xsTo6xl,@/xsTo7xl,@/xsTo8xl,@/xsToLg,@/xsToMd,@/xsToSm,@/xsToXl,_active,_aeonActive,_aeonChecked,_aeonClosed,_aeonCollapsed,_aeonDocked,_aeonEmpty,_aeonExpanded,_aeonFailure,_aeonFloating,_aeonHidden,_aeonInactive,_aeonInvalid,_aeonOpen,_aeonOverlayOpen,_aeonPending,_aeonReady,_aeonSelected,_aeonSuccess,_after,_anyPointerCoarse,_anyPointerFine,_anyPointerNone,_atValue,_autofill,_backdrop,_before,_checked,_closed,_complete,_current,_currentPage,_currentStep,_dark,_default,_disabled,_dragging,_empty,_enabled,_even,_expanded,_file,_first,_firstLetter,_firstLine,_firstOfType,_focus,_focusVisible,_focusWithin,_fullscreen,_grabbed,_groupActive,_groupChecked,_groupDisabled,_groupExpanded,_groupFocus,_groupFocusVisible,_groupFocusWithin,_groupHover,_groupInvalid,_hidden,_highContrast,_highlighted,_horizontal,_hover,_icon,_inRange,_incomplete,_indeterminate,_inert,_invalid,_invertedColors,_landscape,_last,_lastOfType,_lessContrast,_light,_loading,_ltr,_marker,_moreContrast,_motionReduce,_motionSafe,_noscript,_now,_odd,_only,_onlyOfType,_open,_optional,_osDark,_osLight,_outOfRange,_overValue,_peerActive,_peerChecked,_peerDisabled,_peerExpanded,_peerFocus,_peerFocusVisible,_peerFocusWithin,_peerHover,_peerInvalid,_peerPlaceholderShown,_placeholder,_placeholderShown,_pointerCoarse,_pointerFine,_pointerNone,_portrait,_pressed,_print,_rangeEnd,_rangeStart,_readOnly,_readWrite,_required,_rtl,_scrollbar,_scrollbarThumb,_scrollbarTrack,_selected,_selection,_starting,_target,_today,_topmost,_unavailable,_underValue,_userInvalid,_userValid,_valid,_vertical,_visited,base,lg,lgDown,lgOnly,lgTo2xl,lgToXl,md,mdDown,mdOnly,mdTo2xl,mdToLg,mdToXl,sm,smDown,smOnly,smTo2xl,smToLg,smToMd,smToXl,xl,xlDown,xlOnly,xlTo2xl".split(','))
+const conditionRe = /^@|&/
+const underscoreRe = /^_/
+const selectorRe = /&|@/
+
+export const breakpointKeys = ["base","sm","md","lg","xl","2xl"]
+
+export function isCondition(v) {
+  return conditions.has(v) || conditionRe.test(v)
+}
+
+export function finalizeConditions(paths) {
+  return paths.map((p) => {
+    if (conditions.has(p)) {
+      return p.replace(underscoreRe, '')
+    }
+    if (selectorRe.test(p)) {
+      return `[${withoutSpace(p.trim())}]`
+    }
+    return p
+  })
+}
+
+export function sortConditions(paths) {
+  return [...paths].sort((a, b) => {
+    const aa = isCondition(a)
+    const bb = isCondition(b)
+    return aa && !bb ? 1 : !aa && bb ? -1 : 0
+  })
+}

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

@@ -1,19 +1,19 @@
-/* eslint-disable */
-import type { SystemStyleObject } from '../types/index';
+import type { SystemStyleObject } from '../types/system';
 
 type Styles = SystemStyleObject | undefined | null | false
+type StyleList = Styles | StyleList[]
 
 interface CssRawFunction {
   (styles: Styles): SystemStyleObject
-  (styles: Styles[]): SystemStyleObject
-  (...styles: Array<Styles | Styles[]>): SystemStyleObject
+  (styles: StyleList[]): SystemStyleObject
+  (...styles: StyleList[]): SystemStyleObject
   (styles: Styles): SystemStyleObject
 }
 
 interface CssFunction {
   (styles: Styles): string
-  (styles: Styles[]): string
-  (...styles: Array<Styles | Styles[]>): string
+  (styles: StyleList[]): string
+  (...styles: StyleList[]): string
   (styles: Styles): string
 
   raw: CssRawFunction

package/packages/panda/styled-system/css/css.js

@@ -0,0 +1,63 @@
+import { createAssignCss, createMergeCss, createSerializeCss, createSerializeCssArgs, hypenateProperty, isObject, withoutSpace } from '../helpers';
+import { breakpointKeys, finalizeConditions, sortConditions } from './conditions';
+
+const utilities = "WebkitTextFillColor:wktf-c,accentColor:ac-c,alignContent:ac,alignItems:ai,alignSelf:as,animation:anim,animationComposition:anim-comp,animationDelay:anim-dly,animationDirection:anim-dir,animationDuration:anim-dur,animationFillMode:anim-fm,animationIterationCount:anim-ic,animationName:anim-n,animationPlayState:anim-ps,animationRange:anim-r,animationRangeEnd:anim-re,animationRangeStart:anim-rs,animationState:anim-s,animationTimeline:anim-tl,animationTimingFunction:anim-tmf,appearance:ap,aspectRatio:asp,backdropBlur:bkdp-blur,backdropBrightness:bkdp-brightness,backdropContrast:bkdp-contrast,backdropFilter:bkdp,backdropGrayscale:bkdp-grayscale,backdropHueRotate:bkdp-hue-rotate,backdropInvert:bkdp-invert,backdropOpacity:bkdp-opacity,backdropSaturate:bkdp-saturate,backdropSepia:bkdp-sepia,backfaceVisibility:bfv,background:bg/1,backgroundAttachment:bg-a/bgAttachment,backgroundBlendMode:bg-bm/bgBlendMode,backgroundClip:bg-cp/bgClip,backgroundColor:bg-c/bgColor,backgroundConic:bg-conic/bgConic,backgroundGradient:bg-grad/bgGradient,backgroundImage:bg-i/bgImage,backgroundLinear:bg-linear/bgLinear,backgroundOrigin:bg-o/bgOrigin,backgroundPosition:bg-p/bgPosition,backgroundPositionX:bg-p-x/bgPositionX,backgroundPositionY:bg-p-y/bgPositionY,backgroundRadial:bg-radial/bgRadial,backgroundRepeat:bg-r/bgRepeat,backgroundSize:bg-s/bgSize,blockSize:h-bs,border:bd,borderBlock:bd-y/borderY,borderBlockColor:bd-y-c/borderYColor,borderBlockEnd:bd-be,borderBlockEndColor:bd-be-c,borderBlockEndWidth:bd-be-w,borderBlockStart:bd-bs,borderBlockStartColor:bd-bs-c,borderBlockStartWidth:bd-bs-w,borderBlockWidth:bd-y-w/borderYWidth,borderBottom:bd-b,borderBottomColor:bd-b-c,borderBottomLeftRadius:bdr-bl/roundedBottomLeft,borderBottomRadius:bdr-b/roundedBottom,borderBottomRightRadius:bdr-br/roundedBottomRight,borderBottomWidth:bd-b-w,borderCollapse:bd-cl,borderColor:bd-c,borderEndEndRadius:bdr-ee/roundedEndEnd,borderEndRadius:bdr-e/roundedEnd,borderEndStartRadius:bdr-es/roundedEndStart,borderInline:bd-x/borderX,borderInlineColor:bd-x-c/borderXColor,borderInlineEnd:bd-e/borderEnd,borderInlineEndColor:bd-e-c/borderEndColor,borderInlineEndWidth:bd-e-w/borderEndWidth,borderInlineStart:bd-s/borderStart,borderInlineStartColor:bd-s-c/borderStartColor,borderInlineStartWidth:bd-s-w/borderStartWidth,borderInlineWidth:bd-x-w/borderXWidth,borderLeft:bd-l,borderLeftColor:bd-l-c,borderLeftRadius:bdr-l/roundedLeft,borderLeftWidth:bd-l-w,borderRadius:bdr/rounded,borderRight:bd-r,borderRightColor:bd-r-c,borderRightRadius:bdr-r/roundedRight,borderRightWidth:bd-r-w,borderSpacing:bd-sp,borderSpacingX:bd-sx,borderSpacingY:bd-sy,borderStartEndRadius:bdr-se/roundedStartEnd,borderStartRadius:bdr-s/roundedStart,borderStartStartRadius:bdr-ss/roundedStartStart,borderTop:bd-t,borderTopColor:bd-t-c,borderTopLeftRadius:bdr-tl/roundedTopLeft,borderTopRadius:bdr-t/roundedTop,borderTopRightRadius:bdr-tr/roundedTopRight,borderTopWidth:bd-t-w,borderWidth:bd-w,boxDecorationBreak:bx-db,boxShadow:bx-sh/shadow,boxShadowColor:bx-sh-c/shadowColor,boxSize:size,boxSizing:bx-s,caretColor:ca-c,clipPath:cp-path,color:c,columnGap:cg,container:cq,containerName:cq-n,containerType:cq-t,display:d,divideColor:dvd-c,divideStyle:dvd-s,divideX:dvd-x,divideY:dvd-y,flexBasis:flex-b,flexDirection:flex-d/flexDir,flexGrow:flex-g,flexShrink:flex-sh,focusRingColor:focus-ring-c,focusRingOffset:focus-ring-o,focusRingStyle:focus-ring-s,focusRingWidth:focus-ring-w,focusVisibleRing:focus-v-ring,fontFamily:ff,fontFeatureSettings:ff-s,fontKerning:fk,fontPalette:fp,fontSize:fs,fontSizeAdjust:fs-a,fontSmoothing:fsmt,fontVariant:fv,fontVariantAlternates:fv-alt,fontVariantCaps:fv-caps,fontVariantNumeric:fv-num,fontVariationSettings:fv-s,fontWeight:fw,gradientFrom:grad-from,gradientFromPosition:grad-from-pos,gradientTo:grad-to,gradientToPosition:grad-to-pos,gradientVia:grad-via,gradientViaPosition:grad-via-pos,gridAutoColumns:grid-ac,gridAutoFlow:grid-af,gridAutoRows:grid-ar,gridColumn:grid-c,gridColumnEnd:grid-ce,gridColumnGap:grid-cg,gridColumnStart:grid-cs,gridGap:grid-g,gridRow:grid-r,gridRowGap:grid-rg,gridTemplateColumns:grid-tc,gridTemplateRows:grid-tr,height:h/1,hideBelow:show,hideFrom:hide,hyphens:hy,inlineSize:w-is,insetBlock:inset-y/insetY,insetBlockEnd:inset-be,insetBlockStart:inset-bs,insetInline:inset-x/insetX,insetInlineEnd:inset-e/end/insetEnd,insetInlineStart:inset-s/insetStart/start,justifyContent:jc,letterSpacing:ls,lineClamp:lc,lineHeight:lh,listStyle:li-s,listStyleImage:li-img,listStylePosition:li-pos,listStyleType:li-t,margin:m/1,marginBlock:my/marginY/1,marginBlockEnd:mbe,marginBlockStart:mbs,marginBottom:mb/1,marginInline:mx/marginX/1,marginInlineEnd:me/marginEnd/1,marginInlineStart:ms/marginStart/1,marginLeft:ml/1,marginRight:mr/1,marginTop:mt/1,mask:msk,maskBottomFrom:msk-b-from,maskBottomFromColor:msk-b-from-c,maskBottomTo:msk-b-to,maskBottomToColor:msk-b-to-c,maskClip:msk-cp,maskComposite:msk-cmp,maskConic:msk-conic,maskConicFrom:msk-conic-from,maskConicFromColor:msk-conic-from-c,maskConicTo:msk-conic-to,maskConicToColor:msk-conic-to-c,maskImage:msk-i,maskLeftFrom:msk-l-from,maskLeftFromColor:msk-l-from-c,maskLeftTo:msk-l-to,maskLeftToColor:msk-l-to-c,maskLinear:msk-linear,maskLinearFrom:msk-linear-from,maskLinearFromColor:msk-linear-from-c,maskLinearTo:msk-linear-to,maskLinearToColor:msk-linear-to-c,maskMode:msk-md,maskOrigin:msk-o,maskPosition:msk-p,maskRadial:msk-radial,maskRadialAt:msk-radial-at,maskRadialFrom:msk-radial-from,maskRadialFromColor:msk-radial-from-c,maskRadialShape:msk-radial-shape,maskRadialSize:msk-radial-sz,maskRadialTo:msk-radial-to,maskRadialToColor:msk-radial-to-c,maskRepeat:msk-r,maskRightFrom:msk-r-from,maskRightFromColor:msk-r-from-c,maskRightTo:msk-r-to,maskRightToColor:msk-r-to-c,maskSize:msk-s,maskTopFrom:msk-t-from,maskTopFromColor:msk-t-from-c,maskTopTo:msk-t-to,maskTopToColor:msk-t-to-c,maskType:msk-t,maskXFrom:msk-x-from,maskXFromColor:msk-x-from-c,maskXTo:msk-x-to,maskXToColor:msk-x-to-c,maskYFrom:msk-y-from,maskYFromColor:msk-y-from-c,maskYTo:msk-y-to,maskYToColor:msk-y-to-c,maxBlockSize:max-b,maxHeight:max-h/maxH,maxInlineSize:max-w-is,maxWidth:max-w/maxW,minBlockSize:min-h-bs,minHeight:min-h/minH,minInlineSize:min-w-is,minWidth:min-w/minW,mixBlendMode:mix-bm,objectFit:obj-f,objectPosition:obj-p,opacity:op,outline:ring/1,outlineColor:ring-c/ringColor,outlineOffset:ring-o/ringOffset,outlineWidth:ring-w/ringWidth,overflow:ov,overflowAnchor:ov-a,overflowBlock:ov-b,overflowClipBox:ovcp-bx,overflowClipMargin:ovcp-m,overflowInline:ov-i,overflowWrap:ov-wrap,overflowX:ov-x,overflowY:ov-y,overscrollBehavior:ovs-b,overscrollBehaviorBlock:ovs-bb,overscrollBehaviorInline:ovs-bi,overscrollBehaviorX:ovs-bx,overscrollBehaviorY:ovs-by,padding:p/1,paddingBlock:py/paddingY/1,paddingBlockEnd:pbe,paddingBlockStart:pbs,paddingBottom:pb/1,paddingInline:px/paddingX/1,paddingInlineEnd:pe/paddingEnd/1,paddingInlineStart:ps/paddingStart/1,paddingLeft:pl/1,paddingRight:pr/1,paddingTop:pt/1,position:pos/1,rowGap:rg,scrollBehavior:scr-bhv,scrollMargin:scr-m,scrollMarginBlock:scr-my/scrollMarginY,scrollMarginBlockEnd:scr-mbe,scrollMarginBlockStart:scr-mbt,scrollMarginBottom:scr-mb,scrollMarginInline:scr-mx/scrollMarginX,scrollMarginInlineEnd:scr-me,scrollMarginInlineStart:scr-ms,scrollMarginLeft:scr-ml,scrollMarginRight:scr-mr,scrollMarginTop:scr-mt,scrollPadding:scr-p,scrollPaddingBlock:scr-py/scrollPaddingY,scrollPaddingBlockEnd:scr-pbe,scrollPaddingBlockStart:scr-pbs,scrollPaddingBottom:scr-pb,scrollPaddingInline:scr-px/scrollPaddingX,scrollPaddingInlineEnd:scr-pe,scrollPaddingInlineStart:scr-ps,scrollPaddingLeft:scr-pl,scrollPaddingRight:scr-pr,scrollPaddingTop:scr-pt,scrollSnapAlign:scr-sa,scrollSnapCoordinate:scrs-c,scrollSnapDestination:scrs-d,scrollSnapMargin:scrs-m,scrollSnapMarginBottom:scrs-mb,scrollSnapMarginLeft:scrs-ml,scrollSnapMarginRight:scrs-mr,scrollSnapMarginTop:scrs-mt,scrollSnapPointsX:scrs-px,scrollSnapPointsY:scrs-py,scrollSnapStop:scrs-s,scrollSnapStrictness:scrs-strt,scrollSnapType:scrs-t,scrollSnapTypeX:scrs-tx,scrollSnapTypeY:scrs-ty,scrollTimeline:scrtl,scrollTimelineAxis:scrtl-a,scrollTimelineName:scrtl-n,scrollbar:scr-bar,scrollbarColor:scr-bar-c,scrollbarGutter:scr-bar-g,scrollbarThumb:scr-bar-th,scrollbarTrack:scr-bar-tk,scrollbarWidth:scr-bar-w,spaceX:sx,spaceY:sy,srOnly:sr,stroke:stk,strokeDasharray:stk-dsh,strokeDashoffset:stk-do,strokeLinecap:stk-lc,strokeLinejoin:stk-lj,strokeMiterlimit:stk-ml,strokeOpacity:stk-op,strokeWidth:stk-w,tableLayout:tbl,textAlign:ta,textDecoration:td,textDecorationColor:td-c,textDecorationStyle:td-s,textDecorationThickness:td-t,textEmphasisColor:te-c,textGradient:txt-grad,textIndent:ti,textOverflow:tov,textShadow:tsh,textShadowColor:tsh-c/textShadowColor,textSizeAdjust:txt-adj,textStyle:textStyle,textTransform:tt,textUnderlineOffset:tu-o,textWrap:tw,touchAction:tch-a,transform:trf,transformBox:trf-b,transformOrigin:trf-o,transformStyle:trf-s,transition:trs,transitionDelay:trs-dly,transitionDuration:trs-dur,transitionProperty:trs-prop,transitionTimingFunction:trs-tmf,translateX:/x,translateY:/y,translateZ:/z,truncate:trunc,userSelect:us,verticalAlign:va,visibility:vis,width:w/1,wordBreak:wb,zIndex:z"
+
+function createCssContext() {
+  const classNameByProp = new Map()
+  const shorthands = new Map()
+  if (utilities) {
+    utilities.split(",").forEach((utility) => {
+      const [prop, meta] = utility.split(":")
+      const [className, ...shorthandList] = meta.split("/")
+      if (className) classNameByProp.set(prop, className)
+      shorthandList.forEach((shorthand) => {
+        const key = shorthand === "1" ? className : shorthand
+        shorthands.set(key, prop)
+      })
+    })
+  }
+
+  const resolveShorthand = (prop) => shorthands.get(prop) || prop
+
+  return {
+    hash: false,
+    conditions: {
+      shift: sortConditions,
+      finalize: finalizeConditions,
+      breakpoints: { keys: breakpointKeys },
+    },
+    utility: {
+      prefix: null,
+      hasShorthand: true,
+      toHash(path, hashFn) {
+        return hashFn(path.join(":"))
+      },
+      transform(prop, value) {
+        const key = resolveShorthand(prop)
+        const propKey = classNameByProp.get(key) || hypenateProperty(key)
+        return { className: `${propKey}_${withoutSpace(value)}` }
+      },
+      resolveShorthand,
+    },
+  }
+}
+
+const cssContext = /* @__PURE__ */ createCssContext()
+const serializeCss = /* @__PURE__ */ createSerializeCss(cssContext)
+export const mergeCss = /* @__PURE__ */ createMergeCss(cssContext)
+const serializeCssArgs = /* @__PURE__ */ createSerializeCssArgs(serializeCss, mergeCss)
+
+export const css = /* @__PURE__ */ Object.assign(
+  function css(...styles) {
+    if (styles.length === 1 && isObject(styles[0])) return serializeCss(styles[0])
+    return serializeCssArgs(...styles)
+  },
+  {
+    raw: function cssRaw(...styles) {
+      return mergeCss(...styles)
+    },
+  },
+)
+
+export const assignCss = /* @__PURE__ */ createAssignCss(cssContext)