aeon-ui-engine 1.2.0 → 1.3.0

package/CHANGELOG.md

@@ -5,6 +5,22 @@ All notable changes to **aeon-ui-engine** are documented here.
 Format follows [Keep a Changelog](https://keepachangelog.com/en/1.1.0/).
 Versioning follows [Semantic Versioning](https://semver.org/spec/v2.0.0.html).
 
+## [1.3.0] - 2026-07-30
+
+### Changed
+
+- **Consumer shell defaults** aligned with dense Electron wallet chrome:
+  - Headless Dialog backdrop / positioner / content (so Prompt works without `@aeon-ui/ui` recipe classes)
+  - Prompt title + description typography (`--aeon-font-display`)
+  - StatusBanner sticky top placement
+  - AppNav dense 28px breadcrumb / back rail
+- **`applyBrandPalette` fonts** also set `--fonts-ui`, `--fonts-body`, `--fonts-display` so recipes pick up brand typefaces
+- **Electron CSS** — fill-height `.app-shell` / `.stage`, `.titlebar` alias, compact 3px scrollbars, hover-reveal scroll helper
+
+### Docs
+
+- [PRODUCT_SHELL.md](./docs/PRODUCT_SHELL.md) — headless Prompt requires consumer-shell; do not re-copy shell CSS into products
+
 ## [1.2.0] - 2026-07-30
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aeon-ui-engine",
-  "version": "1.2.0",
+  "version": "1.3.0",
   "private": false,
   "type": "module",
   "bin": {

package/packages/core/dist/index.js

@@ -623,9 +623,19 @@ function brandPaletteToCssVars(palette) {
     "--shadows-focus-ring": palette.focusRing,
     "--aeon-grid-line": palette.gridLine
   };
-  if (palette.font) vars["--aeon-font"] = palette.font;
-  if (palette.fontDisplay) vars["--aeon-font-display"] = palette.fontDisplay;
-  if (palette.radius) vars["--aeon-radius"] = palette.radius;
+  if (palette.font) {
+    vars["--aeon-font"] = palette.font;
+    vars["--fonts-ui"] = palette.font;
+    vars["--fonts-body"] = palette.font;
+  }
+  if (palette.fontDisplay) {
+    vars["--aeon-font-display"] = palette.fontDisplay;
+    vars["--fonts-display"] = palette.fontDisplay;
+  }
+  if (palette.radius) {
+    vars["--aeon-radius"] = palette.radius;
+    vars["--radii-aeon"] = palette.radius;
+  }
   return vars;
 }
 function applyBrandPalette(input, options = {}) {

package/packages/core/src/brand-theme.ts

@@ -97,9 +97,20 @@ export function brandPaletteToCssVars(palette: BrandPalette): Record<string, str
     '--shadows-focus-ring': palette.focusRing,
     '--aeon-grid-line': palette.gridLine,
   }
-  if (palette.font) vars['--aeon-font'] = palette.font
-  if (palette.fontDisplay) vars['--aeon-font-display'] = palette.fontDisplay
-  if (palette.radius) vars['--aeon-radius'] = palette.radius
+  if (palette.font) {
+    // Recipes read --fonts-ui / --fonts-body; also expose --aeon-font for shells.
+    vars['--aeon-font'] = palette.font
+    vars['--fonts-ui'] = palette.font
+    vars['--fonts-body'] = palette.font
+  }
+  if (palette.fontDisplay) {
+    vars['--aeon-font-display'] = palette.fontDisplay
+    vars['--fonts-display'] = palette.fontDisplay
+  }
+  if (palette.radius) {
+    vars['--aeon-radius'] = palette.radius
+    vars['--radii-aeon'] = palette.radius
+  }
   return vars
 }
 

package/packages/panda/src/theme/consumer-shell.css

@@ -1,21 +1,93 @@
 /**
- * Consumer shell recipes — baseline look for Prompt, StatusBanner, AppNav chrome.
+ * Consumer shell recipes — baseline look for Prompt, StatusBanner, AppNav,
+ * and headless Dialog chrome.
  * Opt into brand color via applyBrandPalette(); these rules only use Aeon CSS vars.
  * Intentionally restrained — products still own marketing atmosphere.
  */
 
+/* ── Headless Dialog (Prompt composes Dialog without recipe class names) ── */
+
+[data-aeon-scope='dialog'][data-aeon-part='backdrop'] {
+  position: fixed;
+  inset: 0;
+  z-index: 1000;
+  background: color-mix(in srgb, #000 72%, transparent);
+  animation: aeon-shell-rise 200ms ease both;
+}
+
+[data-aeon-scope='dialog'][data-aeon-part='positioner'] {
+  position: fixed;
+  inset: 0;
+  z-index: 1001;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  padding: 16px;
+  overflow-y: auto;
+  overscroll-behavior: contain;
+}
+
+[data-aeon-scope='dialog'][data-aeon-part='content'] {
+  position: relative;
+  width: min(440px, 100%);
+  margin: auto;
+  flex-shrink: 0;
+  max-height: calc(100vh - 32px);
+  overflow-y: auto;
+  border-radius: calc(var(--aeon-radius, 0.5rem) + 4px);
+  border: 1px solid var(--colors-aeon-border);
+  background: var(--colors-aeon-surface, var(--colors-aeon-bg));
+  color: var(--colors-aeon-text);
+  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.55);
+  padding: 20px 22px;
+}
+
+@keyframes aeon-shell-rise {
+  from {
+    opacity: 0;
+    transform: translateY(6px);
+  }
+  to {
+    opacity: 1;
+    transform: none;
+  }
+}
+
+/* ── Prompt ── */
+
 [data-aeon-scope='prompt'][data-aeon-part='root'] {
   display: contents;
 }
 
+[data-aeon-scope='dialog'][data-aeon-part='title'],
+[data-aeon-scope='prompt'][data-aeon-part='title'] {
+  margin: 0;
+  font-family: var(--aeon-font-display, var(--fonts-display, inherit));
+  font-size: 1.05rem;
+  font-weight: 700;
+  letter-spacing: 0.06em;
+  text-transform: uppercase;
+  color: var(--colors-aeon-text);
+  line-height: 1.25;
+}
+
 [data-aeon-scope='prompt'][data-aeon-part='eyebrow'] {
   margin: 0 0 8px;
   color: var(--colors-aeon-accent);
+  font-family: var(--aeon-font-display, var(--fonts-display, inherit));
   font-size: 0.72rem;
   letter-spacing: 0.14em;
   text-transform: uppercase;
 }
 
+[data-aeon-scope='prompt'][data-aeon-part='description'],
+[data-aeon-scope='dialog'][data-aeon-part='description'] {
+  margin: 8px 0 0;
+  color: var(--colors-aeon-muted);
+  font-size: 0.9rem;
+  line-height: 1.45;
+}
+
 [data-aeon-scope='prompt'][data-aeon-part='meta'] {
   display: grid;
   gap: 10px;
@@ -45,6 +117,8 @@
   border-radius: var(--aeon-radius, 10px);
   padding: 10px 14px;
   border: 1px solid transparent;
+  letter-spacing: 0.02em;
+  text-transform: none;
 }
 
 [data-aeon-scope='prompt'][data-aeon-part='primary'] {
@@ -59,7 +133,19 @@
   border-color: var(--colors-aeon-border);
 }
 
+/* Product `.btn` inside Prompt / StatusBanner — sentence case, not all-caps CTAs */
+[data-aeon-scope='statusBanner'] button.btn,
+[data-aeon-scope='prompt'] button.btn {
+  text-transform: none;
+  letter-spacing: 0.02em;
+}
+
+/* ── StatusBanner (sticky top chrome) ── */
+
 [data-aeon-scope='statusBanner'][data-aeon-part='root'] {
+  position: sticky;
+  top: 0;
+  z-index: 40;
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -90,11 +176,24 @@
   flex-shrink: 0;
 }
 
+/* ── AppNav breadcrumb / back (dense 28px rail) ── */
+
 [data-aeon-scope='appNav'][data-aeon-part='breadcrumb'] {
   display: flex;
-  flex-wrap: wrap;
-  gap: 6px;
+  flex-wrap: nowrap;
   align-items: center;
+  gap: 0;
+  min-width: 0;
+  overflow: hidden;
+  margin: 0;
+  height: 28px;
+  font-family: var(--aeon-font-display, var(--fonts-display, inherit));
+  font-size: 0.78rem;
+  font-weight: 700;
+  letter-spacing: 0.1em;
+  text-transform: uppercase;
+  line-height: 28px;
+  color: var(--colors-aeon-text);
 }
 
 [data-aeon-scope='appNav'][data-aeon-part='crumb'] {
@@ -104,26 +203,48 @@
   color: var(--colors-aeon-muted);
   cursor: pointer;
   padding: 0;
+  height: 28px;
+  line-height: 28px;
+  letter-spacing: inherit;
+  text-transform: inherit;
+}
+
+[data-aeon-scope='appNav'][data-aeon-part='crumb']:hover {
+  color: var(--colors-aeon-accent);
 }
 
 [data-aeon-scope='appNav'][data-aeon-part='crumb'][data-aeon-state~='current'] {
   color: var(--colors-aeon-text);
-  font-weight: 600;
+  font-weight: 700;
   cursor: default;
 }
 
 [data-aeon-scope='appNav'][data-aeon-part='crumb']:not(:last-child)::after {
   content: '/';
-  margin-left: 6px;
-  color: var(--colors-aeon-border);
+  margin: 0 0.45em;
+  color: var(--colors-aeon-muted);
+  font-weight: 500;
   pointer-events: none;
 }
 
 [data-aeon-scope='appNav'][data-aeon-part='back'] {
-  font: inherit;
-  background: transparent;
+  appearance: none;
+  flex-shrink: 0;
+  width: 28px;
+  height: 28px;
+  margin: 0;
+  padding: 0;
   border: 0;
-  color: var(--colors-aeon-accent);
+  border-radius: var(--aeon-radius, 0.5rem);
+  background: transparent;
+  color: var(--colors-aeon-muted);
+  display: inline-grid;
+  place-items: center;
   cursor: pointer;
-  padding: 0;
+  transition: color 140ms ease, background 140ms ease;
+}
+
+[data-aeon-scope='appNav'][data-aeon-part='back']:hover {
+  color: var(--colors-aeon-accent);
+  background: color-mix(in srgb, var(--colors-aeon-accent) 10%, transparent);
 }

package/packages/panda/src/theme/electron.css

@@ -1,9 +1,66 @@
 /**
  * Optional Electron chrome helpers.
  * Import only in desktop shells: import '@aeon-ui/panda/electron.css'
+ *
+ * Defaults aligned with dense wallet / Electron fill-height layouts.
  */
 
-.aeon-titlebar {
+/* Compact scrollbars on Electron platforms */
+html[data-aeon-platform],
+html.platform-darwin {
+  --aeon-scrollbar-size: 3px;
+  --aeon-scrollbar-track: transparent;
+  --aeon-scrollbar-thumb: color-mix(in srgb, var(--colors-aeon-muted, #a1a1aa) 35%, transparent);
+  --aeon-scrollbar-thumb-hover: color-mix(in srgb, var(--colors-aeon-muted, #a1a1aa) 55%, transparent);
+  --aeon-scrollbar-corner: transparent;
+}
+
+html[data-aeon-platform],
+html[data-aeon-platform] body,
+html[data-aeon-platform] #root,
+html.platform-darwin,
+html.platform-darwin body,
+html.platform-darwin #root {
+  height: 100%;
+  min-height: 100%;
+}
+
+html[data-aeon-platform] body,
+html.platform-darwin body {
+  margin: 0;
+  overflow: hidden;
+  font-family: var(--aeon-font, var(--fonts-ui, system-ui, sans-serif));
+  color: var(--colors-aeon-text);
+  background: var(--colors-aeon-bg);
+  -webkit-font-smoothing: antialiased;
+  letter-spacing: 0.01em;
+}
+
+.aeon-app-shell,
+.app-shell {
+  height: 100%;
+  display: grid;
+  grid-template-rows: auto 1fr;
+  min-height: 0;
+}
+
+.aeon-stage,
+.stage {
+  height: 100%;
+  min-height: 0;
+  overflow: auto;
+  padding: 20px clamp(14px, 3vw, 28px) 28px;
+}
+
+@media (max-width: 640px) {
+  .aeon-stage,
+  .stage {
+    padding: 16px 12px 24px;
+  }
+}
+
+.aeon-titlebar,
+.titlebar {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -18,13 +75,40 @@
 .aeon-titlebar button,
 .aeon-titlebar a,
 .aeon-titlebar input,
-.aeon-titlebar [data-aeon-no-drag] {
+.aeon-titlebar [data-aeon-no-drag],
+.titlebar button,
+.titlebar a,
+.titlebar input,
+.titlebar [data-aeon-no-drag] {
   -webkit-app-region: no-drag;
   app-region: no-drag;
 }
 
 html.platform-darwin .aeon-titlebar,
-html[data-aeon-platform='darwin'] .aeon-titlebar {
+html.platform-darwin .titlebar,
+html[data-aeon-platform='darwin'] .aeon-titlebar,
+html[data-aeon-platform='darwin'] .titlebar {
   /* hiddenInset traffic lights */
   padding-top: 36px;
 }
+
+/* Hover-reveal scrollbars for dense nav stages */
+.aeon-scroll-hover,
+[data-aeon-scroll='hover'] {
+  scrollbar-color: transparent transparent;
+}
+
+.aeon-scroll-hover::-webkit-scrollbar-thumb,
+[data-aeon-scroll='hover']::-webkit-scrollbar-thumb {
+  background: transparent;
+}
+
+.aeon-scroll-hover:hover,
+[data-aeon-scroll='hover']:hover {
+  scrollbar-color: var(--aeon-scrollbar-thumb) transparent;
+}
+
+.aeon-scroll-hover:hover::-webkit-scrollbar-thumb,
+[data-aeon-scroll='hover']:hover::-webkit-scrollbar-thumb {
+  background: var(--aeon-scrollbar-thumb);
+}