aeon-ui-engine 1.0.2 → 1.1.0

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

@@ -0,0 +1,131 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const slots = ['root', 'image', 'fallback', 'badge'] as const
+
+/** Circle clip — always round, regardless of consumer border-radius overrides. */
+const circle = {
+  borderRadius: '9999px',
+} as const
+
+export const avatarRecipe = defineSlotRecipe({
+  className: 'aeonAvatar',
+  description: 'Aeon avatar — always-round profile image with initials fallback + presence',
+  slots,
+  base: {
+    root: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      verticalAlign: 'middle',
+      position: 'relative',
+      flexShrink: 0,
+      aspectRatio: '1 / 1',
+      ...circle,
+      fontFamily: 'ui',
+      /* Badge sits on the rim — keep root visible; clip faces on image/fallback. */
+      overflow: 'visible',
+      boxSizing: 'border-box',
+    },
+    image: {
+      display: 'block',
+      width: '100%',
+      height: '100%',
+      objectFit: 'cover',
+      ...circle,
+      overflow: 'hidden',
+    },
+    fallback: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      width: '100%',
+      height: '100%',
+      boxSizing: 'border-box',
+      ...circle,
+      overflow: 'hidden',
+      fontWeight: 'semibold',
+      letterSpacing: '-0.04em',
+      lineHeight: '1',
+      textTransform: 'uppercase',
+      color: 'fg',
+      bg: 'surfaceRaised',
+      /* Fit 1–2 initials without clipping */
+      px: '0.15rem',
+      userSelect: 'none',
+    },
+    badge: {
+      position: 'absolute',
+      bottom: 0,
+      right: 0,
+      ...circle,
+      borderWidth: '2px',
+      borderColor: 'bg',
+      bg: 'muted',
+      '&[data-aeon-state=active]': { bg: 'accent' },
+      '&[data-aeon-state=away]': {
+        bg: 'accentDim',
+        outlineWidth: '1px',
+        outlineStyle: 'solid',
+        outlineColor: 'accent',
+      },
+      '&[data-aeon-state=busy]': { bg: 'danger' },
+      '&[data-aeon-state=offline]': { bg: 'border' },
+      '&[data-aeon-state=idle]': { bg: 'muted' },
+    },
+  },
+  variants: {
+    size: {
+      /**
+       * Size styles nest under root so Image/Fallback get the right type even when
+       * styled slots are created without the size variant (ui Avatar pattern).
+       */
+      xs: {
+        root: {
+          width: '1.75rem',
+          height: '1.75rem',
+          '& [data-aeon-part=fallback]': { fontSize: '0.625rem' },
+          '& [data-aeon-part=badge]': {
+            width: '0.45rem',
+            height: '0.45rem',
+            borderWidth: '1px',
+          },
+        },
+      },
+      sm: {
+        root: {
+          width: '2.25rem',
+          height: '2.25rem',
+          '& [data-aeon-part=fallback]': { fontSize: '0.7rem' },
+          '& [data-aeon-part=badge]': { width: '0.55rem', height: '0.55rem' },
+        },
+      },
+      md: {
+        root: {
+          width: '2.75rem',
+          height: '2.75rem',
+          '& [data-aeon-part=fallback]': { fontSize: '0.8125rem' },
+          '& [data-aeon-part=badge]': { width: '0.7rem', height: '0.7rem' },
+        },
+      },
+      lg: {
+        root: {
+          width: '3.25rem',
+          height: '3.25rem',
+          '& [data-aeon-part=fallback]': { fontSize: '0.9375rem' },
+          '& [data-aeon-part=badge]': { width: '0.8rem', height: '0.8rem' },
+        },
+      },
+      xl: {
+        root: {
+          width: '4.25rem',
+          height: '4.25rem',
+          '& [data-aeon-part=fallback]': { fontSize: '1.125rem' },
+          '& [data-aeon-part=badge]': { width: '0.95rem', height: '0.95rem' },
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+})

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

@@ -0,0 +1,206 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+/**
+ * Bar — horizontal layout primitive for toolbars, headers, footers.
+ *
+ * Three-zone flex contract that makes overlap structurally impossible:
+ * - root:   flex row, nowrap, overflow hidden — children cannot escape.
+ * - leading:   flex 0 1 auto — shrinks before overflowing.
+ * - center:    flex 1 1 0% — absorbs space, truncates content.
+ * - trailing:  flex 0 1 auto — shrinks before overflowing.
+ *
+ * Responsive behavior is baked into the recipe via breakpoints,
+ * so consumers never need ad-hoc media queries for bar layout.
+ */
+const slots = ['root', 'leading', 'center', 'trailing', 'seam'] as const
+
+export const barRecipe = defineSlotRecipe({
+  className: 'aeonBar',
+  slots,
+  base: {
+    root: {
+      /* 1fr | auto | 1fr — title stays optically centered even when sides are asymmetric. */
+      display: 'grid',
+      gridTemplateColumns: 'minmax(0, 1fr) auto minmax(0, 1fr)',
+      alignItems: 'center',
+      columnGap: '0.5rem',
+      overflow: 'hidden',
+      width: '100%',
+      minWidth: 0,
+      minH: '2.75rem',
+      position: 'relative',
+      bg: 'surface',
+      color: 'fg',
+    },
+    leading: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'flex-start',
+      gap: '0.5rem',
+      minWidth: 0,
+      overflow: 'hidden',
+      justifySelf: 'start',
+    },
+    center: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: '0.5rem',
+      minWidth: 0,
+      maxWidth: '100%',
+      overflow: 'hidden',
+      justifySelf: 'center',
+      textAlign: 'center',
+      fontWeight: 'semibold',
+      fontSize: '0.95rem',
+      letterSpacing: '-0.02em',
+      whiteSpace: 'nowrap',
+      textOverflow: 'ellipsis',
+    },
+    trailing: {
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'flex-end',
+      gap: '0.5rem',
+      minWidth: 0,
+      overflow: 'hidden',
+      justifySelf: 'end',
+    },
+    seam: {
+      position: 'absolute',
+      left: 0,
+      right: 0,
+      bottom: 0,
+      height: '1px',
+      bg: 'border',
+      pointerEvents: 'none',
+      '&[data-aeon-state=docked]': { opacity: 1 },
+      '&[data-aeon-state=floating]': { opacity: 0.4 },
+    },
+  },
+  variants: {
+    /**
+     * Size preset — controls padding and gap.
+     * - xs: compact toolbars, status bars
+     * - sm: standard app bars (default)
+     * - md: page headers with more breathing room
+     * - lg: marketing / hero bars
+     */
+    size: {
+      xs: {
+        root: { px: '0.5rem', py: '0.25rem', gap: '0.25rem' },
+        leading: { gap: '0.25rem' },
+        center: { gap: '0.25rem' },
+        trailing: { gap: '0.25rem' },
+      },
+      sm: {
+        root: { px: '0.75rem', py: '0.375rem', gap: '0.5rem' },
+        leading: { gap: '0.375rem' },
+        center: { gap: '0.375rem' },
+        trailing: { gap: '0.375rem' },
+      },
+      md: {
+        root: { px: '1rem', py: '0.5rem', gap: '0.75rem' },
+        leading: { gap: '0.5rem' },
+        center: { gap: '0.5rem' },
+        trailing: { gap: '0.5rem' },
+      },
+      lg: {
+        root: { px: '1.5rem', py: '0.75rem', gap: '1rem' },
+        leading: { gap: '0.75rem' },
+        center: { gap: '0.75rem' },
+        trailing: { gap: '0.75rem' },
+      },
+    },
+    /**
+     * Sticky behavior — makes the bar stick to viewport edge.
+     */
+    sticky: {
+      true: {
+        root: {
+          position: 'sticky',
+          top: 'var(--aeon-bar-offset, 0px)',
+          zIndex: 40,
+        },
+      },
+    },
+    /**
+     * Machine-driven placement for StickyBar (top | bottom | inline).
+     * Top stays relative/in-flow by default so AppShell.Header keeps height.
+     * Opt into page stickiness with the `sticky` variant — never fixed on top
+     * (fixed collapses parent chrome and covers content).
+     */
+    placement: {
+      top: {
+        root: {
+          position: 'relative',
+          zIndex: 50,
+          width: '100%',
+          '&[data-aeon-state=collapsed]': { py: '0.25rem', minH: '2.5rem' },
+        },
+      },
+      bottom: {
+        root: {
+          position: 'fixed',
+          left: 0,
+          right: 0,
+          bottom: 0,
+          zIndex: 55,
+          paddingBottom: 'env(safe-area-inset-bottom, 0px)',
+        },
+      },
+      inline: {
+        root: {
+          position: 'relative',
+          zIndex: 1,
+        },
+      },
+    },
+    /**
+     * Responsive collapse mode — what happens when space runs out.
+     * - shrink: zones shrink proportionally (default)
+     * - wrap: root wraps at sm breakpoint, zones stack
+     * - collapse-center: center zone hides on mobile, leading/trailing remain
+     */
+    collapse: {
+      shrink: {},
+      wrap: {
+        root: {
+          '@media (max-width: 640px)': {
+            flexWrap: 'wrap',
+          },
+        },
+        leading: {
+          '@media (max-width: 640px)': {
+            flex: '1 1 100%',
+            order: 1,
+          },
+        },
+        center: {
+          '@media (max-width: 640px)': {
+            flex: '1 1 100%',
+            order: 2,
+          },
+        },
+        trailing: {
+          '@media (max-width: 640px)': {
+            flex: '1 1 100%',
+            order: 3,
+            justifyContent: 'flex-end',
+          },
+        },
+      },
+      'collapse-center': {
+        center: {
+          '@media (max-width: 640px)': {
+            display: 'none',
+          },
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    size: 'sm',
+    collapse: 'shrink',
+  },
+})

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

@@ -1,6 +1,6 @@
 import { defineRecipe } from '@pandacss/dev'
 
-/** Layout wrapper for multiple buttons — default gap between controls. */
+/** Layout wrapper for multiple buttons — wrap + gap so controls never overlap. */
 export const buttonGroupRecipe = defineRecipe({
   className: 'aeonButtonGroup',
   description: 'Horizontal or vertical stack of buttons with consistent spacing',
@@ -11,6 +11,13 @@ export const buttonGroupRecipe = defineRecipe({
     justifyContent: 'flex-start',
     gap: '0.5rem',
     verticalAlign: 'middle',
+    minW: 0,
+    maxW: '100%',
+    /* Children keep intrinsic width — wrap to next line instead of stacking. */
+    '& > *': {
+      flexShrink: 0,
+      minW: 0,
+    },
   },
   variants: {
     orientation: {
@@ -18,12 +25,13 @@ export const buttonGroupRecipe = defineRecipe({
       vertical: {
         flexDirection: 'column',
         alignItems: 'flex-start',
+        flexWrap: 'nowrap',
       },
     },
     gap: {
-      sm: { gap: 'gapSm' },
-      md: { gap: 'gap' },
-      lg: { gap: 'gapLg' },
+      sm: { gap: '0.5rem' },
+      md: { gap: '0.75rem' },
+      lg: { gap: '1rem' },
     },
   },
   defaultVariants: {

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

@@ -17,6 +17,7 @@ export const buttonRecipe = defineRecipe({
     cursor: 'pointer',
     outline: 'none',
     whiteSpace: 'nowrap',
+    flexShrink: 0,
     _focusVisible: {
       boxShadow: 'focusRing',
     },

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

@@ -37,7 +37,8 @@ export const comboboxRecipe = defineSlotRecipe({
         borderColor: 'accent',
       },
       _focusVisible: {
-        boxShadow: 'focusRing',
+        borderColor: 'accent',
+        boxShadow: 'none',
       },
       _placeholder: {
         color: 'muted',

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

@@ -0,0 +1,81 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const slots = ['root', 'input', 'actions', 'send'] as const
+
+/**
+ * Composer — bottom compose chrome for threads.
+ * Hierarchy: input and send share controlMinHSm — input must never dwarf the action.
+ */
+export const composerRecipe = defineSlotRecipe({
+  className: 'aeonComposer',
+  slots,
+  base: {
+    root: {
+      display: 'grid',
+      gridTemplateColumns: 'minmax(0, 1fr) auto',
+      alignItems: 'end',
+      columnGap: '0.4rem',
+      width: '100%',
+      pt: '0.45rem',
+      px: '0.1rem',
+      /* Clearance above dock / home indicator — input must not sit flush on chrome. */
+      pb: '0.75rem',
+      borderTopWidth: '1px',
+      borderTopColor: 'border',
+      bg: 'bg',
+      '&[data-aeon-state=disabled]': { opacity: 0.55, pointerEvents: 'none' },
+      '&[data-aeon-state=sending]': { opacity: 0.85 },
+      '&[data-aeon-state=error]': {
+        borderTopColor: 'danger',
+      },
+    },
+    input: {
+      width: '100%',
+      /* Locked to Button sm — input must never dwarf the send action. */
+      minH: 'controlMinHSm',
+      h: 'controlMinHSm',
+      maxH: '5.5rem',
+      resize: 'none',
+      overflowY: 'auto',
+      boxSizing: 'border-box',
+      px: '0.75rem',
+      py: '0.35rem',
+      borderRadius: 'lg',
+      borderWidth: '1px',
+      borderColor: 'border',
+      bg: 'surface',
+      color: 'fg',
+      font: 'inherit',
+      fontSize: 'sm',
+      lineHeight: '1.25',
+      outline: 'none',
+      _focus: {
+        borderColor: 'accent',
+        boxShadow: 'none',
+      },
+      _focusVisible: {
+        borderColor: 'accent',
+        boxShadow: 'none',
+      },
+    },
+    actions: {
+      display: 'flex',
+      alignItems: 'center',
+      alignSelf: 'end',
+      gap: '0.35rem',
+      minH: 'controlMinHSm',
+    },
+    send: {
+      display: 'inline-flex',
+      alignItems: 'stretch',
+      justifyContent: 'center',
+      minH: 'controlMinHSm',
+      /* Nested Button inherits the same control height — hierarchy stays honest. */
+      '& > [data-aeon-scope=button], & > button': {
+        minH: 'controlMinHSm',
+        h: 'controlMinHSm',
+        alignSelf: 'center',
+      },
+    },
+  },
+})

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

@@ -0,0 +1,104 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+/** Content region — every machine state has a visible slot. */
+const slots = [
+  'root',
+  'toolbar',
+  'body',
+  'pending',
+  'empty',
+  'error',
+  'success',
+  'sentinel',
+] as const
+
+export const contentRecipe = defineSlotRecipe({
+  className: 'aeonContent',
+  slots,
+  base: {
+    root: {
+      display: 'flex',
+      flexDir: 'column',
+      gap: '1rem',
+      width: '100%',
+      minW: 0,
+      flex: '1 1 auto',
+    },
+    toolbar: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '0.5rem',
+      width: '100%',
+    },
+    body: {
+      flex: '1 1 auto',
+      minW: 0,
+      display: 'flex',
+      flexDir: 'column',
+      gap: '0.85rem',
+    },
+    pending: {
+      display: 'grid',
+      placeItems: 'center',
+      minH: '8rem',
+      color: 'muted',
+      textAlign: 'center',
+    },
+    empty: {
+      display: 'grid',
+      placeItems: 'center',
+      gap: '0.75rem',
+      minH: '8rem',
+      textAlign: 'center',
+      color: 'muted',
+    },
+    error: {
+      display: 'grid',
+      placeItems: 'center',
+      gap: '0.75rem',
+      minH: '8rem',
+      textAlign: 'center',
+      color: 'danger',
+    },
+    success: {
+      display: 'grid',
+      placeItems: 'center',
+      gap: '0.75rem',
+      minH: '4rem',
+      textAlign: 'center',
+    },
+    sentinel: {
+      height: '1px',
+      width: '100%',
+      '&[data-aeon-state=loadingMore]': {
+        height: '3rem',
+        display: 'grid',
+        placeItems: 'center',
+      },
+    },
+  },
+  variants: {
+    align: {
+      start: {},
+      center: {
+        root: {
+          alignItems: 'center',
+          justifyContent: 'safe center',
+          textAlign: 'center',
+          minH: 0,
+          '& [data-aeon-part=body]': {
+            alignItems: 'center',
+            width: '100%',
+            maxW: '20rem',
+          },
+          '& [data-aeon-part=toolbar]': {
+            justifyContent: 'center',
+          },
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    align: 'start',
+  },
+})

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

@@ -0,0 +1,106 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const slots = [
+  'root',
+  'item',
+  'leading',
+  'body',
+  'title',
+  'preview',
+  'meta',
+  'badge',
+] as const
+
+/** Conversation list — inbox / DM rows (universal messaging, not dating). */
+export const conversationRecipe = defineSlotRecipe({
+  className: 'aeonConversation',
+  slots,
+  base: {
+    root: {
+      display: 'flex',
+      flexDir: 'column',
+      gap: '0.15rem',
+      width: '100%',
+      minW: 0,
+    },
+    item: {
+      display: 'grid',
+      gridTemplateColumns: 'auto minmax(0, 1fr) auto',
+      alignItems: 'center',
+      columnGap: '0.75rem',
+      width: '100%',
+      minH: '3.5rem',
+      px: '0.65rem',
+      py: '0.55rem',
+      borderRadius: 'xl',
+      border: 'none',
+      bg: 'transparent',
+      color: 'fg',
+      font: 'inherit',
+      textAlign: 'left',
+      cursor: 'pointer',
+      transitionProperty: 'background',
+      transitionDuration: '0.15s',
+      _hover: { bg: 'surface' },
+      '&[data-aeon-state=selected]': {
+        bg: 'accentDim',
+      },
+      '&[data-aeon-state=unread]': {
+        '& [data-aeon-part=title]': { fontWeight: 'semibold' },
+        '& [data-aeon-part=preview]': { color: 'fg' },
+      },
+    },
+    leading: {
+      flexShrink: 0,
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+    },
+    body: {
+      display: 'flex',
+      flexDir: 'column',
+      gap: '0.15rem',
+      minW: 0,
+    },
+    title: {
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      fontSize: 'sm',
+      fontWeight: 'medium',
+      color: 'fg',
+    },
+    preview: {
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      fontSize: 'xs',
+      color: 'muted',
+      lineHeight: '1.35',
+    },
+    meta: {
+      display: 'flex',
+      flexDir: 'column',
+      alignItems: 'flex-end',
+      gap: '0.35rem',
+      flexShrink: 0,
+      fontSize: '0.65rem',
+      color: 'muted',
+      whiteSpace: 'nowrap',
+    },
+    badge: {
+      display: 'inline-grid',
+      placeItems: 'center',
+      minW: '1.15rem',
+      h: '1.15rem',
+      px: '0.3rem',
+      borderRadius: 'full',
+      bg: 'accent',
+      color: 'bg',
+      fontSize: '0.65rem',
+      fontWeight: 'bold',
+      lineHeight: '1',
+      '&:empty': { display: 'none' },
+    },
+  },
+})