aeon-ui-engine 1.0.2 → 1.1.0

package/packages/geometry/dist/index.d.ts

@@ -0,0 +1,50 @@
+type SceneState = 'idle' | 'active' | 'paused';
+/** `data-aeon-scope="scene"` for ambient regions (backdrops, visualizers). */
+declare function sceneAttrs(part: string, state?: SceneState): Record<string, unknown>;
+
+type GridPatternOptions = {
+    cell?: number;
+    lineColor?: string;
+    lineWidth?: number;
+};
+/** CSS `background-image` for an orthogonal grid (no external assets). */
+declare function gridPatternStyle(options?: GridPatternOptions): {
+    backgroundImage: string;
+    backgroundSize: string;
+};
+type WavePatternOptions = {
+    wavelength?: number;
+    amplitude?: number;
+    stroke?: string;
+    strokeWidth?: number;
+};
+/** SVG path `d` for a horizontal sine wave across `width`. */
+declare function wavePath(width: number, height: number, options?: WavePatternOptions): string;
+/** Radial vignette as CSS gradient for scene overlays. */
+declare function vignetteStyle(options?: {
+    strength?: number;
+}): {
+    background: string;
+};
+
+type BarRect = {
+    x: number;
+    y: number;
+    w: number;
+    h: number;
+    fill: string;
+};
+type BarLayoutOptions = {
+    count: number;
+    viewWidth: number;
+    viewHeight: number;
+    barWidth?: number;
+    gap?: number;
+    fills?: readonly string[];
+};
+/** Evenly spaced vertical bars for spectrum-style SVG (Soundbase-style layout). */
+declare function barLayout(options: BarLayoutOptions): BarRect[];
+/** Centered Y scale transform for one bar (scale applied around bar center). */
+declare function barScaleTransform(bar: BarRect, scaleY: number): string;
+
+export { type BarLayoutOptions, type BarRect, type GridPatternOptions, type SceneState, type WavePatternOptions, barLayout, barScaleTransform, gridPatternStyle, sceneAttrs, vignetteStyle, wavePath };

package/packages/geometry/dist/index.js

@@ -0,0 +1,88 @@
+// src/scene-attrs.ts
+import { scopeAttrs } from "@aeon-ui/core";
+function sceneAttrs(part, state) {
+  return scopeAttrs("scene", part, state ? { state } : void 0);
+}
+
+// src/patterns.ts
+function gridPatternStyle(options) {
+  const cell = options?.cell ?? 32;
+  const color = options?.lineColor ?? "rgba(255, 255, 255, 0.06)";
+  const w = options?.lineWidth ?? 1;
+  const line = `${w}px ${color}`;
+  return {
+    backgroundImage: [
+      `linear-gradient(${line} 0 0)`,
+      `linear-gradient(90deg, ${line} 0 0)`
+    ].join(", "),
+    backgroundSize: `${cell}px ${cell}px`
+  };
+}
+function wavePath(width, height, options) {
+  const wavelength = options?.wavelength ?? 48;
+  const amplitude = options?.amplitude ?? height * 0.2;
+  const mid = height / 2;
+  const steps = Math.max(8, Math.ceil(width / (wavelength / 4)));
+  const points = [];
+  for (let i = 0; i <= steps; i++) {
+    const t = i / steps;
+    const x = t * width;
+    const y = mid + Math.sin(t * (width / wavelength) * Math.PI * 2) * amplitude;
+    points.push(`${i === 0 ? "M" : "L"}${x.toFixed(2)},${y.toFixed(2)}`);
+  }
+  return points.join(" ");
+}
+function vignetteStyle(options) {
+  const s = options?.strength ?? 0.55;
+  return {
+    background: `radial-gradient(ellipse 80% 70% at 50% 45%, transparent 0%, rgba(0,0,0,${s}) 100%)`
+  };
+}
+
+// src/svg.ts
+var DEFAULT_FILLS = [
+  "#8B5CF6",
+  "#6366F1",
+  "#4F8FF7",
+  "#38BDF8",
+  "#2DD4BF",
+  "#FBBF24",
+  "#F472B6"
+];
+function barLayout(options) {
+  const count = options.count;
+  const viewW = options.viewWidth;
+  const viewH = options.viewHeight;
+  const barW = options.barWidth ?? Math.min(10, (viewW - (count - 1) * (options.gap ?? 4)) / count);
+  const gap = options.gap ?? 4;
+  const fills = options.fills ?? DEFAULT_FILLS;
+  const totalW = count * barW + (count - 1) * gap;
+  const startX = (viewW - totalW) / 2;
+  const bars = [];
+  for (let i = 0; i < count; i++) {
+    const h = viewH * (0.42 + i / Math.max(1, count - 1) * 0.58);
+    const y = (viewH - h) / 2;
+    const x = startX + i * (barW + gap);
+    bars.push({
+      x,
+      y,
+      w: barW,
+      h,
+      fill: fills[i % fills.length]
+    });
+  }
+  return bars;
+}
+function barScaleTransform(bar, scaleY) {
+  const cx = bar.x + bar.w / 2;
+  const cy = bar.y + bar.h / 2;
+  return `translate(${cx} ${cy}) scale(1 ${scaleY}) translate(${-cx} ${-cy})`;
+}
+export {
+  barLayout,
+  barScaleTransform,
+  gridPatternStyle,
+  sceneAttrs,
+  vignetteStyle,
+  wavePath
+};

package/packages/geometry/node_modules/.bin/esbuild

@@ -0,0 +1,21 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/Users/brandoncryderman/AeonUI/node_modules/.pnpm/esbuild@0.27.7/node_modules/esbuild/bin/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/esbuild@0.27.7/node_modules/esbuild/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/esbuild@0.27.7/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/Users/brandoncryderman/AeonUI/node_modules/.pnpm/esbuild@0.27.7/node_modules/esbuild/bin/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/esbuild@0.27.7/node_modules/esbuild/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/esbuild@0.27.7/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../../../../node_modules/.pnpm/esbuild@0.27.7/node_modules/esbuild/bin/esbuild" "$@"
+else
+  exec node  "$basedir/../../../../node_modules/.pnpm/esbuild@0.27.7/node_modules/esbuild/bin/esbuild" "$@"
+fi

package/packages/geometry/node_modules/.bin/jiti

@@ -0,0 +1,21 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/Users/brandoncryderman/AeonUI/node_modules/.pnpm/jiti@2.7.0/node_modules/jiti/lib/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/jiti@2.7.0/node_modules/jiti/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/jiti@2.7.0/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/Users/brandoncryderman/AeonUI/node_modules/.pnpm/jiti@2.7.0/node_modules/jiti/lib/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/jiti@2.7.0/node_modules/jiti/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/jiti@2.7.0/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../../../../node_modules/.pnpm/jiti@2.7.0/node_modules/jiti/lib/jiti-cli.mjs" "$@"
+else
+  exec node  "$basedir/../../../../node_modules/.pnpm/jiti@2.7.0/node_modules/jiti/lib/jiti-cli.mjs" "$@"
+fi

package/packages/geometry/node_modules/.bin/tsc

@@ -0,0 +1,21 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/Users/brandoncryderman/AeonUI/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/bin/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/typescript@5.9.3/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/Users/brandoncryderman/AeonUI/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/bin/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/typescript@5.9.3/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../typescript/bin/tsc" "$@"
+else
+  exec node  "$basedir/../typescript/bin/tsc" "$@"
+fi

package/packages/geometry/node_modules/.bin/tsserver

@@ -0,0 +1,21 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/Users/brandoncryderman/AeonUI/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/bin/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/typescript@5.9.3/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/Users/brandoncryderman/AeonUI/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/bin/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/typescript@5.9.3/node_modules/typescript/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/typescript@5.9.3/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../typescript/bin/tsserver" "$@"
+else
+  exec node  "$basedir/../typescript/bin/tsserver" "$@"
+fi

package/packages/geometry/node_modules/.bin/tsup

@@ -0,0 +1,21 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/Users/brandoncryderman/AeonUI/node_modules/.pnpm/tsup@8.5.1_jiti@2.7.0_postcss@8.5.15_tsx@4.22.3_typescript@5.9.3/node_modules/tsup/dist/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/tsup@8.5.1_jiti@2.7.0_postcss@8.5.15_tsx@4.22.3_typescript@5.9.3/node_modules/tsup/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/tsup@8.5.1_jiti@2.7.0_postcss@8.5.15_tsx@4.22.3_typescript@5.9.3/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/Users/brandoncryderman/AeonUI/node_modules/.pnpm/tsup@8.5.1_jiti@2.7.0_postcss@8.5.15_tsx@4.22.3_typescript@5.9.3/node_modules/tsup/dist/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/tsup@8.5.1_jiti@2.7.0_postcss@8.5.15_tsx@4.22.3_typescript@5.9.3/node_modules/tsup/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/tsup@8.5.1_jiti@2.7.0_postcss@8.5.15_tsx@4.22.3_typescript@5.9.3/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../tsup/dist/cli-default.js" "$@"
+else
+  exec node  "$basedir/../tsup/dist/cli-default.js" "$@"
+fi

package/packages/geometry/node_modules/.bin/tsup-node

@@ -0,0 +1,21 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/Users/brandoncryderman/AeonUI/node_modules/.pnpm/tsup@8.5.1_jiti@2.7.0_postcss@8.5.15_tsx@4.22.3_typescript@5.9.3/node_modules/tsup/dist/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/tsup@8.5.1_jiti@2.7.0_postcss@8.5.15_tsx@4.22.3_typescript@5.9.3/node_modules/tsup/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/tsup@8.5.1_jiti@2.7.0_postcss@8.5.15_tsx@4.22.3_typescript@5.9.3/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/Users/brandoncryderman/AeonUI/node_modules/.pnpm/tsup@8.5.1_jiti@2.7.0_postcss@8.5.15_tsx@4.22.3_typescript@5.9.3/node_modules/tsup/dist/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/tsup@8.5.1_jiti@2.7.0_postcss@8.5.15_tsx@4.22.3_typescript@5.9.3/node_modules/tsup/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/tsup@8.5.1_jiti@2.7.0_postcss@8.5.15_tsx@4.22.3_typescript@5.9.3/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../tsup/dist/cli-node.js" "$@"
+else
+  exec node  "$basedir/../tsup/dist/cli-node.js" "$@"
+fi

package/packages/geometry/node_modules/.bin/tsx

@@ -0,0 +1,21 @@
+#!/bin/sh
+basedir=$(dirname "$(echo "$0" | sed -e 's,\\,/,g')")
+
+case `uname` in
+    *CYGWIN*|*MINGW*|*MSYS*)
+        if command -v cygpath > /dev/null 2>&1; then
+            basedir=`cygpath -w "$basedir"`
+        fi
+    ;;
+esac
+
+if [ -z "$NODE_PATH" ]; then
+  export NODE_PATH="/Users/brandoncryderman/AeonUI/node_modules/.pnpm/tsx@4.22.3/node_modules/tsx/dist/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/tsx@4.22.3/node_modules/tsx/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/tsx@4.22.3/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/node_modules"
+else
+  export NODE_PATH="/Users/brandoncryderman/AeonUI/node_modules/.pnpm/tsx@4.22.3/node_modules/tsx/dist/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/tsx@4.22.3/node_modules/tsx/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/tsx@4.22.3/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/node_modules:$NODE_PATH"
+fi
+if [ -x "$basedir/node" ]; then
+  exec "$basedir/node"  "$basedir/../../../../node_modules/.pnpm/tsx@4.22.3/node_modules/tsx/dist/cli.mjs" "$@"
+else
+  exec node  "$basedir/../../../../node_modules/.pnpm/tsx@4.22.3/node_modules/tsx/dist/cli.mjs" "$@"
+fi

package/packages/panda/aeon.css

@@ -0,0 +1,7 @@
+/* aeon-ui-engine — single CSS entry point */
+/* Import this one file in your app: import 'aeon-ui-engine/aeon.css' */
+
+@import './styled-system/styles.css';
+@import './theme-runtime.css';
+@import './src/theme/scrollbars.css';
+@import './src/theme/chrome.css';

package/packages/panda/package.json

@@ -33,7 +33,7 @@
     "scripts"
   ],
   "devDependencies": {
-    "@pandacss/dev": "^0.53.4",
+    "@pandacss/dev": "^1.11.2",
     "tsx": "^4.19.4",
     "typescript": "^5.8.3"
   }

package/packages/panda/panda.config.ts

@@ -1,7 +1,21 @@
 import { defineConfig } from '@pandacss/dev'
 import {
   accordionRecipe,
+  avatarRecipe,
+  identityRecipe,
+  metricStripRecipe,
+  listRowRecipe,
+  entryRecipe,
+  conversationRecipe,
+  threadRecipe,
+  composerRecipe,
+  profileHeaderRecipe,
   badgeRecipe,
+  barRecipe,
+  panelRecipe,
+  appShellRecipe,
+  contentRecipe,
+  navRecipe,
   buttonRecipe,
   buttonGroupRecipe,
   asyncRegionRecipe,
@@ -22,6 +36,7 @@ import {
   popoverRecipe,
   tooltipRecipe,
   toastRecipe,
+  themeSwitcherRecipe,
 } from './src/recipes/index.js'
 import { semanticTokens } from './src/theme/semantic-tokens.js'
 import { tokens } from './src/theme/tokens.js'
@@ -42,6 +57,15 @@ export default defineConfig({
     recipes: {
       aeonButton: [{ size: ['*'], variant: ['*'] }],
       aeonBadge: [{ variant: ['*'] }],
+      aeonAvatar: [{ size: ['*'] }],
+      aeonBar: [{ size: ['*'], collapse: ['*'], placement: ['*'] }],
+      aeonPanel: [{ size: ['*'] }],
+      aeonAppShell: [{ contentAlign: ['*'] }],
+      aeonContent: [{ align: ['*'] }],
+      aeonNav: [{ size: ['*'], layout: ['*'] }],
+      aeonProfileHeader: [{ align: ['*'] }],
+      aeonEntry: [{ density: ['*'], layout: ['*'] }],
+      aeonThemeSwitcher: [{ size: ['*'] }],
     },
   },
   conditions: {
@@ -50,6 +74,16 @@ export default defineConfig({
       aeonChecked: '&[data-aeon-state~="checked"]',
       aeonOpen: '&[data-aeon-state=open]',
       aeonClosed: '&[data-aeon-state=closed]',
+      aeonExpanded: '&[data-aeon-state=expanded]',
+      aeonCollapsed: '&[data-aeon-state=collapsed]',
+      aeonOverlayOpen: '&[data-aeon-state=overlayOpen]',
+      aeonFloating: '&[data-aeon-state=floating]',
+      aeonDocked: '&[data-aeon-state=docked]',
+      aeonHidden: '&[data-aeon-state=hidden]',
+      aeonReady: '&[data-aeon-state=ready]',
+      aeonEmpty: '&[data-aeon-state=empty]',
+      aeonActive: '&[data-aeon-state=active]',
+      aeonInactive: '&[data-aeon-state=inactive]',
       aeonPending: '&[data-aeon-state=pending]',
       aeonSuccess: '&[data-aeon-state=success]',
       aeonFailure: '&[data-aeon-state=failure]',
@@ -66,6 +100,20 @@ export default defineConfig({
         aeonBadge: badgeRecipe,
       },
       slotRecipes: {
+        aeonAvatar: avatarRecipe,
+        aeonIdentity: identityRecipe,
+        aeonMetricStrip: metricStripRecipe,
+        aeonListRow: listRowRecipe,
+        aeonEntry: entryRecipe,
+        aeonConversation: conversationRecipe,
+        aeonThread: threadRecipe,
+        aeonComposer: composerRecipe,
+        aeonProfileHeader: profileHeaderRecipe,
+        aeonBar: barRecipe,
+        aeonPanel: panelRecipe,
+        aeonAppShell: appShellRecipe,
+        aeonContent: contentRecipe,
+        aeonNav: navRecipe,
         aeonAccordion: accordionRecipe,
         aeonDialog: dialogRecipe,
         aeonTabs: tabsRecipe,
@@ -85,6 +133,7 @@ export default defineConfig({
         aeonPopover: popoverRecipe,
         aeonTooltip: tooltipRecipe,
         aeonToast: toastRecipe,
+        aeonThemeSwitcher: themeSwitcherRecipe,
       },
     },
   },
@@ -231,14 +280,22 @@ export default defineConfig({
     '[data-aeon-scope="field"] [data-aeon-part="control"][aria-invalid="true"]': {
       borderColor: 'danger',
     },
-    '[data-aeon-scope="field"][data-aeon-state*="submission:pending"] [data-aeon-part="control"]': {
+    '[data-aeon-scope="field"][data-aeon-state="pending"] [data-aeon-part="control"], [data-aeon-scope="field"][data-aeon-submission="pending"] [data-aeon-part="control"]': {
       opacity: '0.7',
       pointerEvents: 'none',
     },
+    '[data-aeon-scope="field"][data-aeon-state="invalid"] [data-aeon-part="control"], [data-aeon-scope="field"][data-aeon-validation="invalid"] [data-aeon-part="control"]':
+      {
+        borderColor: 'danger',
+      },
     '@keyframes aeonProgressIndeterminate': {
       '0%': { transform: 'translateX(-100%)' },
       '100%': { transform: 'translateX(250%)' },
     },
+    '@keyframes aeonToastIn': {
+      '0%': { opacity: '0', transform: 'translateY(0.5rem) scale(0.96)' },
+      '100%': { opacity: '1', transform: 'translateY(0) scale(1)' },
+    },
     '[data-aeon-scope="radioGroup"] [data-aeon-part="item"]': {
       display: 'inline-flex',
       alignItems: 'center',

package/packages/panda/src/recipes/app-shell.ts

@@ -0,0 +1,137 @@
+import { defineSlotRecipe } from '@pandacss/dev'
+
+/**
+ * App shell — layered chrome (header / content / dock / scrim).
+ * Z-index ladder mirrors items-market: content < sticky < header < dock < overlay.
+ */
+const slots = [
+  'root',
+  'header',
+  'subheader',
+  'content',
+  'aside',
+  'footer',
+  'dock',
+  'scrim',
+] as const
+
+export const appShellRecipe = defineSlotRecipe({
+  className: 'aeonAppShell',
+  slots,
+  base: {
+    root: {
+      display: 'flex',
+      flexDir: 'column',
+      minH: '100dvh',
+      width: '100%',
+      position: 'relative',
+      bg: 'bg',
+      color: 'fg',
+      '&[data-aeon-state=overlayOpen] [data-aeon-part=content]': {
+        pointerEvents: 'none',
+        filter: 'blur(2px)',
+        opacity: 0.92,
+      },
+    },
+    header: {
+      /* In-flow chrome band — flex-shrink 0 so shell content never slides underneath. */
+      position: 'relative',
+      flexShrink: 0,
+      zIndex: 50,
+      width: '100%',
+      bg: 'surface',
+      color: 'fg',
+      /* Seam on Bar/StickyBar owns the edge when nested — avoid double rule.
+         StickyBar reuses bar anatomy (data-aeon-scope=bar), not a stickyBar scope. */
+      borderBottomWidth: '1px',
+      borderBottomColor: 'border',
+      '&:has([data-aeon-scope=bar] [data-aeon-part=seam])': {
+        borderBottomWidth: 0,
+      },
+      /* Nested top bar stays in flow; transparent so header surface is the only fill. */
+      '& [data-aeon-scope=bar]': {
+        position: 'relative',
+        top: 'auto',
+        left: 'auto',
+        right: 'auto',
+        bg: 'transparent',
+      },
+    },
+    subheader: {
+      position: 'sticky',
+      top: 'var(--aeon-bar-offset, 4rem)',
+      zIndex: 36,
+      width: '100%',
+    },
+    content: {
+      flex: '1 1 auto',
+      minW: 0,
+      minH: 0,
+      display: 'flex',
+      flexDir: 'column',
+      px: '0.85rem',
+      py: '0.85rem',
+      transitionProperty: 'filter, opacity',
+      transitionDuration: '0.2s',
+    },
+    aside: {
+      position: 'sticky',
+      top: 'var(--aeon-bar-offset, 4rem)',
+      zIndex: 34,
+      alignSelf: 'start',
+      maxH: 'calc(100dvh - var(--aeon-bar-offset, 4rem))',
+      overflow: 'auto',
+    },
+    footer: {
+      width: '100%',
+    },
+    dock: {
+      position: 'fixed',
+      left: 0,
+      right: 0,
+      bottom: 0,
+      zIndex: 55,
+      display: 'flex',
+      alignItems: 'center',
+      justifyContent: 'center',
+      px: '0.55rem',
+      pt: '0.4rem',
+      paddingBottom: 'calc(0.4rem + env(safe-area-inset-bottom, 0px))',
+      bg: 'surface',
+      color: 'fg',
+      borderTopWidth: '1px',
+      borderTopColor: 'border',
+      /* Nested nav fills the dock track */
+      '& > [data-aeon-scope=nav], & > [data-aeon-part=root]': {
+        width: '100%',
+        maxW: '22rem',
+      },
+    },
+    scrim: {
+      position: 'fixed',
+      inset: 0,
+      zIndex: 45,
+      bg: 'black/40',
+      backdropFilter: 'blur(2px)',
+    },
+  },
+  variants: {
+    /** Content column alignment — projects from screen intent (form vs feed). */
+    contentAlign: {
+      start: {
+        content: { alignItems: 'stretch' },
+      },
+      center: {
+        content: {
+          alignItems: 'center',
+          /* safe center — tall content stays scrollable from the top, never under the header */
+          justifyContent: 'safe center',
+          textAlign: 'center',
+        },
+      },
+    },
+  },
+  defaultVariants: {
+    contentAlign: 'start',
+  },
+})