aeon-ui-engine 1.0.2 → 1.1.0

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

@@ -0,0 +1,155 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+/** Nav — top links, bottom tabs, side rail. */
+const slots = ['root', 'item', 'indicator', 'label', 'icon', 'badge'] as const
+
+export const navRecipe = defineSlotRecipe({
+  className: 'aeonNav',
+  slots,
+  base: {
+    root: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '0.25rem',
+      minW: 0,
+      width: '100%',
+      color: 'fg',
+      '&[data-aeon-orientation=vertical]': {
+        flexDir: 'column',
+        alignItems: 'stretch',
+      },
+    },
+    item: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      gap: '0.375rem',
+      position: 'relative',
+      px: '0.75rem',
+      py: '0.5rem',
+      borderRadius: 'xl',
+      cursor: 'pointer',
+      bg: 'transparent',
+      color: 'muted',
+      border: 'none',
+      font: 'inherit',
+      transitionProperty: 'color, background, opacity, transform',
+      transitionDuration: '0.15s',
+      _hover: {
+        color: 'fg',
+        bg: 'surfaceRaised',
+      },
+      '&[data-aeon-state=active]': {
+        color: 'accent',
+        bg: 'accentDim',
+        fontWeight: 'medium',
+      },
+      '&[data-aeon-state=inactive]': {
+        color: 'muted',
+      },
+      '&[data-aeon-state=disabled], &:disabled': {
+        opacity: 0.45,
+        cursor: 'not-allowed',
+      },
+    },
+    indicator: {
+      position: 'absolute',
+      bottom: 0,
+      left: '0.75rem',
+      right: '0.75rem',
+      height: '2px',
+      borderRadius: 'full',
+      bg: 'accent',
+      opacity: 0,
+      transitionProperty: 'opacity',
+      transitionDuration: '0.15s',
+      '[data-aeon-state=active] > &': { opacity: 1 },
+    },
+    label: {
+      fontSize: 'xs',
+      fontWeight: 'medium',
+      letterSpacing: '-0.01em',
+      lineHeight: '1',
+      color: 'currentColor',
+    },
+    icon: {
+      display: 'inline-flex',
+      w: '1.35rem',
+      h: '1.35rem',
+      alignItems: 'center',
+      justifyContent: 'center',
+      flexShrink: 0,
+      color: 'currentColor',
+      '& svg': { width: '100%', height: '100%' },
+    },
+    badge: {
+      fontSize: 'xs',
+      px: '0.35rem',
+      borderRadius: 'full',
+      bg: 'accent',
+      color: 'bg',
+    },
+  },
+  variants: {
+    size: {
+      sm: {
+        item: { px: '0.5rem', py: '0.375rem' },
+        label: { fontSize: 'xs' },
+        icon: { w: '1.2rem', h: '1.2rem' },
+      },
+      md: {},
+      lg: {
+        item: { px: '1rem', py: '0.625rem' },
+        label: { fontSize: 'md' },
+        icon: { w: '1.5rem', h: '1.5rem' },
+      },
+    },
+    /**
+     * layout — structural contract for how items fill space.
+     * - inline: compact row (top links)
+     * - dock: equal-width bottom tabs — icon above label (styles cascade from root)
+     */
+    layout: {
+      inline: {},
+      dock: {
+        root: {
+          display: 'flex',
+          alignItems: 'stretch',
+          justifyContent: 'space-between',
+          gap: '0.1rem',
+          width: '100%',
+          minH: '2.75rem',
+          '& [data-aeon-part=item]': {
+            flex: '1 1 0%',
+            flexDirection: 'column',
+            alignItems: 'center',
+            justifyContent: 'center',
+            gap: '0.12rem',
+            minW: 0,
+            px: '0.12rem',
+            py: '0.22rem',
+            borderRadius: 'md',
+          },
+          '& [data-aeon-part=indicator]': {
+            display: 'none',
+          },
+          '& [data-aeon-part=label]': {
+            fontSize: '0.62rem',
+            maxW: '100%',
+            overflow: 'hidden',
+            textOverflow: 'ellipsis',
+            whiteSpace: 'nowrap',
+          },
+          '& [data-aeon-part=icon]': {
+            w: '1.25rem',
+            h: '1.25rem',
+          },
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+    layout: 'inline',
+  },
+})

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

@@ -0,0 +1,156 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+/**
+ * Panel — collapsible split-view region.
+ * Expanded: content visible, label + trigger in a header row.
+ * Collapsed: content hidden; label becomes a vertical upright rail (C\nO\nM…).
+ */
+const slots = ['group', 'root', 'trigger', 'label', 'content'] as const
+
+export const panelRecipe = defineSlotRecipe({
+  className: 'aeonPanel',
+  slots,
+  base: {
+    group: {
+      display: 'flex',
+      alignItems: 'stretch',
+      gap: '0.85rem',
+      minWidth: 0,
+      minHeight: 0,
+      width: '100%',
+      '&[data-aeon-orientation=horizontal]': {
+        flexDirection: 'row',
+      },
+      '&[data-aeon-orientation=vertical]': {
+        flexDirection: 'column',
+      },
+    },
+    root: {
+      display: 'grid',
+      gridTemplateColumns: 'minmax(0, 1fr) auto',
+      gridTemplateRows: 'auto minmax(0, 1fr)',
+      minWidth: 0,
+      minHeight: 0,
+      overflow: 'hidden',
+      borderWidth: '1px',
+      borderStyle: 'solid',
+      borderColor: 'var(--border)',
+      borderRadius: '8px',
+      background: 'color-mix(in srgb, var(--aeon-bg) 60%, transparent)',
+      transition: 'flex-basis 0.2s ease, width 0.2s ease, min-width 0.2s ease',
+      '&[data-aeon-state=expanded]': {
+        flex: '1 1 0%',
+      },
+      '&[data-aeon-state=collapsed]': {
+        display: 'flex',
+        flexDirection: 'column',
+        flex: '0 0 2.75rem',
+        width: '2.75rem',
+        minWidth: '2.75rem',
+        maxWidth: '2.75rem',
+        alignItems: 'center',
+        paddingBlock: '0.65rem',
+        paddingInline: '0.2rem',
+        cursor: 'pointer',
+      },
+    },
+    trigger: {
+      appearance: 'none',
+      border: 'none',
+      background: 'transparent',
+      color: 'var(--text-muted)',
+      fontSize: '0.7rem',
+      fontWeight: '700',
+      letterSpacing: '0.04em',
+      cursor: 'pointer',
+      padding: '0.85rem 0.65rem 0.35rem 0.25rem',
+      borderRadius: '4px',
+      alignSelf: 'start',
+      lineHeight: 1,
+      '&:hover': {
+        color: 'var(--aeon-accent)',
+      },
+      '&:disabled': {
+        opacity: 0.4,
+        cursor: 'default',
+      },
+      '&[data-aeon-state=collapsed]': {
+        display: 'none',
+      },
+    },
+    label: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: '0.05rem',
+      fontSize: '0.65rem',
+      fontWeight: '700',
+      letterSpacing: '0.12em',
+      textTransform: 'uppercase',
+      color: 'var(--text-muted)',
+      userSelect: 'none',
+      minWidth: 0,
+      '&[data-aeon-state=expanded]': {
+        padding: '0.85rem 0.25rem 0.5rem 0.95rem',
+        borderBottomWidth: '1px',
+        borderBottomStyle: 'solid',
+        borderBottomColor: 'var(--border)',
+        overflow: 'hidden',
+        textOverflow: 'ellipsis',
+        whiteSpace: 'nowrap',
+      },
+      '&[data-aeon-state=collapsed]': {
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'flex-start',
+        gap: '0.08rem',
+        flex: '1 1 auto',
+        height: '100%',
+        writingMode: 'horizontal-tb',
+        cursor: 'pointer',
+        color: 'var(--aeon-accent)',
+        padding: 0,
+        borderBottom: 'none',
+        '& [data-aeon-part=label-char]': {
+          display: 'block',
+          lineHeight: 1.15,
+          fontSize: '0.72rem',
+        },
+        '& [data-aeon-part=label-gap]': {
+          display: 'block',
+          height: '0.55rem',
+        },
+      },
+    },
+    content: {
+      gridColumn: '1 / -1',
+      display: 'flex',
+      flexDirection: 'column',
+      flex: '1 1 auto',
+      minHeight: 0,
+      minWidth: 0,
+      overflow: 'auto',
+      padding: '0.75rem 0.95rem 1rem',
+      '&[hidden]': {
+        display: 'none',
+      },
+    },
+  },
+  variants: {
+    size: {
+      md: {},
+      lg: {
+        root: {
+          '&[data-aeon-state=collapsed]': {
+            flexBasis: '3rem',
+            width: '3rem',
+            minWidth: '3rem',
+            maxWidth: '3rem',
+          },
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    size: 'md',
+  },
+})

package/packages/panda/src/recipes/pin-input.ts

@@ -6,7 +6,7 @@ export const pinInputRecipe = defineSlotRecipe({
   base: {
     root: {
       display: 'inline-flex',
-      gap: 'gapSm',
+      gap: 'gapLg',
     },
     input: {
       width: '2.5rem',
@@ -22,7 +22,8 @@ export const pinInputRecipe = defineSlotRecipe({
       bg: 'surface',
       color: 'fg',
       outline: 'none',
-      _focusVisible: { boxShadow: 'focusRing', borderColor: 'accent' },
+      boxSizing: 'border-box',
+      _focusVisible: { borderColor: 'accent', boxShadow: 'none' },
       '&[data-aeon-state=filled]': { borderColor: 'accent' },
     },
   },

package/packages/panda/src/recipes/profile-header.ts

@@ -0,0 +1,120 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const slots = ['root', 'media', 'identity', 'metrics', 'actions', 'body'] as const
+
+export const profileHeaderRecipe = defineSlotRecipe({
+  className: 'aeonProfileHeader',
+  description: 'Dense profile / account header — maximize horizontal real estate',
+  slots,
+  base: {
+    root: {
+      display: 'flex',
+      flexDir: 'column',
+      gap: '0.65rem',
+      width: '100%',
+      minW: 0,
+      p: '0.75rem 0.85rem',
+      borderRadius: 'xl',
+      borderWidth: '1px',
+      borderColor: 'border',
+      bg: 'surface',
+    },
+    media: {
+      display: 'none',
+      width: '100%',
+      aspectRatio: '3 / 1',
+      borderRadius: 'lg',
+      overflow: 'hidden',
+      bg: 'surfaceRaised',
+      '&:not(:empty)': { display: 'grid', placeItems: 'center' },
+    },
+    identity: {
+      display: 'flex',
+      alignItems: 'center',
+      gap: '0.75rem',
+      minW: 0,
+      width: '100%',
+    },
+    metrics: {
+      display: 'flex',
+      alignItems: 'center',
+      minW: 0,
+      width: '100%',
+      '&:empty': { display: 'none' },
+    },
+    actions: {
+      display: 'flex',
+      flexWrap: 'wrap',
+      alignItems: 'stretch',
+      justifyContent: 'flex-start',
+      gap: '0.5rem',
+      width: '100%',
+      minW: 0,
+      '&:empty': { display: 'none' },
+      '& > *': { flexShrink: 1, minW: 0, maxW: '100%' },
+      '& > [data-aeon-scope=button]': {
+        flex: '1 1 5.5rem',
+      },
+      '& > [data-aeon-part=group]': {
+        width: '100%',
+        display: 'flex',
+        flexWrap: 'wrap',
+        gap: '0.5rem',
+        minW: 0,
+        '& > *': { flexShrink: 1, minW: 0 },
+        '& > [data-aeon-scope=button]': {
+          flex: '1 1 5.5rem',
+          minW: 0,
+          maxW: '100%',
+        },
+      },
+    },
+    body: {
+      display: 'flex',
+      flexDir: 'column',
+      gap: '0.45rem',
+      minW: 0,
+      fontSize: 'sm',
+      color: 'muted',
+      lineHeight: '1.45',
+      '&:empty': { display: 'none' },
+      '& > p': {
+        margin: 0,
+        color: 'muted',
+      },
+    },
+  },
+  variants: {
+    align: {
+      start: {},
+      center: {
+        root: {
+          alignItems: 'center',
+          textAlign: 'center',
+          '& [data-aeon-part=media]': {
+            aspectRatio: '1',
+            maxW: '7.5rem',
+            borderRadius: 'full',
+          },
+          '& [data-aeon-part=identity]': {
+            flexDirection: 'column',
+            justifyContent: 'center',
+          },
+          '& [data-aeon-part=metrics]': {
+            justifyContent: 'center',
+          },
+          '& [data-aeon-part=actions]': {
+            justifyContent: 'center',
+          },
+          '& [data-aeon-part=body]': {
+            alignItems: 'center',
+            textAlign: 'center',
+          },
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    align: 'start',
+  },
+})

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

@@ -38,7 +38,8 @@ export const selectRecipe = defineSlotRecipe({
         borderColor: 'accent',
       },
       _focusVisible: {
-        boxShadow: 'focusRing',
+        borderColor: 'accent',
+        boxShadow: 'none',
       },
       _aeonOpen: {
         borderColor: 'accent',

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

@@ -8,13 +8,14 @@ export const sliderRecipe = defineSlotRecipe({
       position: 'relative',
       display: 'flex',
       flexDirection: 'column',
-      gap: 'gapSm',
+      gap: 'gapXs',
       width: '100%',
       minW: '8rem',
     },
     track: {
       position: 'relative',
-      height: '0.35rem',
+      width: '100%',
+      height: '0.5rem',
       borderRadius: 'full',
       bg: 'surface',
       borderWidth: '1px',
@@ -35,8 +36,8 @@ export const sliderRecipe = defineSlotRecipe({
     thumb: {
       position: 'absolute',
       top: '50%',
-      width: '1rem',
-      height: '1rem',
+      width: '1.125rem',
+      height: '1.125rem',
       borderRadius: 'full',
       bg: 'accent',
       borderWidth: '2px',
@@ -52,6 +53,7 @@ export const sliderRecipe = defineSlotRecipe({
       fontSize: 'xs',
       fontFamily: 'ui',
       color: 'muted',
+      textAlign: 'center',
     },
   },
 })

package/packages/panda/src/recipes/theme-switcher.ts

@@ -0,0 +1,110 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+/**
+ * ThemeSwitcher — mode toggle + theme preset selector.
+ *
+ * Layout is a single-row flex container that never wraps or overflows.
+ * The modes group and theme select sit side-by-side with consistent sizing.
+ */
+const slots = ['root', 'modes', 'modeBtn', 'themeSelect', 'themeTrigger'] as const
+
+export const themeSwitcherRecipe = defineSlotRecipe({
+  className: 'aeonThemeSwitcher',
+  slots,
+  base: {
+    root: {
+      display: 'flex',
+      flexWrap: 'nowrap',
+      alignItems: 'center',
+      gap: '0.375rem',
+      minWidth: 0,
+      overflow: 'hidden',
+    },
+    modes: {
+      display: 'inline-flex',
+      alignItems: 'stretch',
+      gap: '0.125rem',
+      flexShrink: 0,
+      padding: '2px',
+      border: '1px solid {colors.border}',
+      borderRadius: '{radii.md}',
+      background: 'color-mix(in srgb, {colors.surface} 92%, {colors.bg})',
+    },
+    modeBtn: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      minWidth: '2.25rem',
+      height: 'auto',
+      paddingInline: '0.4rem',
+      border: 'none',
+      borderRadius: '{radii.sm}',
+      background: 'transparent',
+      cursor: 'pointer',
+      fontFamily: '{fonts.ui}',
+      fontSize: '{fontSizes.xs}',
+      fontWeight: '{fontWeights.medium}',
+      color: 'muted',
+      transition: 'background 0.15s, color 0.15s, box-shadow 0.15s',
+      _hover: {
+        color: 'text',
+        background: 'surfaceRaised',
+      },
+    },
+    themeSelect: {
+      flex: '0 1 auto',
+      minWidth: 0,
+      maxWidth: '6rem',
+      overflow: 'hidden',
+    },
+    themeTrigger: {
+      display: 'inline-flex',
+      alignItems: 'center',
+      gap: '0.25rem',
+      width: '100%',
+      maxWidth: '100%',
+      minWidth: 0,
+      paddingInline: '0.4rem 1.25rem',
+      border: '1px solid {colors.border}',
+      borderRadius: '{radii.md}',
+      background: 'color-mix(in srgb, {colors.surface} 92%, {colors.bg})',
+      cursor: 'pointer',
+      fontFamily: '{fonts.ui}',
+      fontSize: '{fontSizes.xs}',
+      fontWeight: '{fontWeights.medium}',
+      color: 'text',
+      overflow: 'hidden',
+      textOverflow: 'ellipsis',
+      whiteSpace: 'nowrap',
+      transition: 'background 0.15s',
+      _hover: {
+        background: 'surfaceRaised',
+      },
+    },
+  },
+  variants: {
+    size: {
+      xs: {
+        root: { gap: '0.25rem' },
+        modeBtn: { minWidth: '2rem', minH: '2rem', fontSize: '{fontSizes.xs}', paddingInline: '0.3rem' },
+        themeTrigger: { fontSize: '{fontSizes.xs}', paddingInline: '0.3rem 1rem', minH: '2rem' },
+        themeSelect: { maxWidth: '4.5rem' },
+      },
+      sm: {
+        root: { gap: '0.375rem' },
+        modeBtn: { minWidth: '2.25rem', fontSize: '{fontSizes.xs}', paddingInline: '0.4rem' },
+        themeTrigger: { fontSize: '{fontSizes.xs}', paddingInline: '0.4rem 1.25rem' },
+        themeSelect: { maxWidth: '6rem' },
+      },
+      md: {
+        root: { gap: '0.5rem' },
+        modeBtn: { minWidth: '2.75rem', fontSize: '{fontSizes.sm}', paddingInline: '0.5rem' },
+        themeTrigger: { fontSize: '{fontSizes.sm}', paddingInline: '0.5rem 1.5rem' },
+        themeSelect: { maxWidth: '7.5rem' },
+      },
+    },
+  },
+  defaultVariants: {
+    size: 'sm',
+  },
+})

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

@@ -0,0 +1,88 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+const slots = ['root', 'list', 'item', 'bubble', 'meta', 'day'] as const
+
+/** Thread — message stream. Item state: mine | theirs | pending | failed. */
+export const threadRecipe = defineSlotRecipe({
+  className: 'aeonThread',
+  slots,
+  base: {
+    root: {
+      display: 'flex',
+      flexDir: 'column',
+      flex: '1 1 auto',
+      minH: 0,
+      minW: 0,
+      width: '100%',
+    },
+    list: {
+      display: 'flex',
+      flexDir: 'column',
+      gap: '0.55rem',
+      flex: '1 1 auto',
+      minH: 0,
+      overflow: 'auto',
+      px: '0.15rem',
+      py: '0.35rem',
+    },
+    item: {
+      display: 'flex',
+      flexDir: 'column',
+      gap: '0.2rem',
+      maxW: '85%',
+      '&[data-aeon-state=mine], &[data-aeon-state~=mine]': {
+        alignSelf: 'flex-end',
+        alignItems: 'flex-end',
+      },
+      '&[data-aeon-state=theirs], &[data-aeon-state~=theirs]': {
+        alignSelf: 'flex-start',
+        alignItems: 'flex-start',
+      },
+      '&[data-aeon-state~=pending]': {
+        opacity: 0.7,
+      },
+      '&[data-aeon-state~=failed]': {
+        opacity: 0.9,
+      },
+    },
+    bubble: {
+      px: '0.85rem',
+      py: '0.55rem',
+      borderRadius: 'xl',
+      fontSize: 'sm',
+      lineHeight: '1.45',
+      color: 'fg',
+      bg: 'surfaceRaised',
+      maxW: '100%',
+      wordBreak: 'break-word',
+      '[data-aeon-state=mine] > &, [data-aeon-state~=mine] > &': {
+        bg: 'accentDim',
+        color: 'fg',
+        borderBottomRightRadius: 'sm',
+      },
+      '[data-aeon-state=theirs] > &, [data-aeon-state~=theirs] > &': {
+        bg: 'surface',
+        borderWidth: '1px',
+        borderColor: 'border',
+        borderBottomLeftRadius: 'sm',
+      },
+      '[data-aeon-state~=failed] > &': {
+        borderWidth: '1px',
+        borderColor: 'danger',
+      },
+    },
+    meta: {
+      fontSize: '0.65rem',
+      color: 'muted',
+      px: '0.2rem',
+    },
+    day: {
+      alignSelf: 'center',
+      fontSize: '0.65rem',
+      letterSpacing: '0.06em',
+      textTransform: 'uppercase',
+      color: 'muted',
+      py: '0.5rem',
+    },
+  },
+})