aeon-ui-engine 1.2.0 → 1.3.1

package/CHANGELOG.md

@@ -1,10 +1,32 @@
 # Changelog
 
+## [1.3.1] - 2026-07-30
+
+### Changed
+
+- Describe this release.
+
 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.1",
   "private": false,
   "type": "module",
   "bin": {
@@ -35,7 +35,12 @@
     "test:headless": "pnpm run build:headless && pnpm --filter @aeon-ui/core --filter @aeon-ui/primitives --filter @aeon-ui/react run test",
     "changeset": "changeset",
     "version-packages": "changeset version",
-    "release": "pnpm build && changeset publish"
+    "release": "pnpm build && changeset publish",
+    "version:patch": "node scripts/bump-version.mjs patch",
+    "version:minor": "node scripts/bump-version.mjs minor",
+    "version:major": "node scripts/bump-version.mjs major",
+    "version:push": "node scripts/bump-version.mjs patch --push",
+    "version:check": "node scripts/require-version-bump.mjs"
   },
   "devDependencies": {
     "@changesets/cli": "^2.29.0",

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);
+}

package/scripts/bump-version.mjs

@@ -0,0 +1,93 @@
+#!/usr/bin/env node
+/**
+ * Bump aeon-ui-engine semver, changelog, tag, optionally push + npm publish.
+ *
+ *   node scripts/bump-version.mjs patch|minor|major [--push] [--publish] [--no-commit]
+ */
+import { execSync } from 'node:child_process'
+import fs from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const root = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..')
+const pkgPath = path.join(root, 'package.json')
+const changelogPath = path.join(root, 'CHANGELOG.md')
+
+const args = process.argv.slice(2)
+const bump = args.find((a) => a === 'patch' || a === 'minor' || a === 'major')
+const noCommit = args.includes('--no-commit')
+const doPush = args.includes('--push')
+const doPublish = args.includes('--publish')
+
+if (!bump) {
+  console.error('Usage: bump-version.mjs patch|minor|major [--push] [--publish] [--no-commit]')
+  process.exit(1)
+}
+
+function parseSemver(v) {
+  const m = /^(\d+)\.(\d+)\.(\d+)/.exec(v.trim())
+  if (!m) throw new Error(`Invalid semver: ${v}`)
+  return { major: Number(m[1]), minor: Number(m[2]), patch: Number(m[3]) }
+}
+
+function format({ major, minor, patch }) {
+  return `${major}.${minor}.${patch}`
+}
+
+function bumpSemver(v, kind) {
+  const s = parseSemver(v)
+  if (kind === 'major') return format({ major: s.major + 1, minor: 0, patch: 0 })
+  if (kind === 'minor') return format({ major: s.major, minor: s.minor + 1, patch: 0 })
+  return format({ major: s.major, minor: s.minor, patch: s.patch + 1 })
+}
+
+function today() {
+  return new Date().toISOString().slice(0, 10)
+}
+
+function prependChangelog(version) {
+  const entry = `## [${version}] - ${today()}\n\n### Changed\n\n- Describe this release.\n\n`
+  if (!fs.existsSync(changelogPath)) {
+    fs.writeFileSync(changelogPath, `# Changelog\n\n${entry}`)
+    return
+  }
+  const existing = fs.readFileSync(changelogPath, 'utf8')
+  if (existing.includes(`## [${version}]`)) return
+  if (existing.startsWith('# Changelog')) {
+    fs.writeFileSync(changelogPath, existing.replace('# Changelog\n\n', `# Changelog\n\n${entry}`))
+  } else {
+    fs.writeFileSync(changelogPath, `# Changelog\n\n${entry}${existing}`)
+  }
+}
+
+const pkg = JSON.parse(fs.readFileSync(pkgPath, 'utf8'))
+const prev = pkg.version
+const next = bumpSemver(prev, bump)
+pkg.version = next
+fs.writeFileSync(pkgPath, `${JSON.stringify(pkg, null, 2)}\n`)
+prependChangelog(next)
+console.log(`aeon-ui-engine ${prev} → ${next}`)
+
+if (!noCommit) {
+  execSync('git add package.json CHANGELOG.md', { cwd: root, stdio: 'inherit' })
+  execSync(`git commit -m "Release aeon-ui-engine v${next}"`, { cwd: root, stdio: 'inherit' })
+  try {
+    execSync(`git tag v${next}`, { cwd: root, stdio: 'inherit' })
+  } catch {
+    console.warn(`Tag v${next} already exists`)
+  }
+}
+
+if (doPush) {
+  execSync('git push origin HEAD', { cwd: root, stdio: 'inherit' })
+  execSync(`git push origin v${next}`, { cwd: root, stdio: 'inherit' })
+}
+
+if (doPublish) {
+  execSync('npm publish --access public', { cwd: root, stdio: 'inherit' })
+}
+
+if (!doPush) {
+  console.log(`Tagged v${next}. Push: git push && git push origin v${next}`)
+  console.log('Or: npm run version:push')
+}

package/scripts/require-version-bump.mjs

@@ -0,0 +1,70 @@
+#!/usr/bin/env node
+/**
+ * Fail if package.json version is not strictly newer than the latest remote tag (v*).
+ */
+import { execSync } from 'node:child_process'
+import fs from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const root = path.resolve(path.dirname(fileURLToPath(import.meta.url)), '..')
+const pkg = JSON.parse(fs.readFileSync(path.join(root, 'package.json'), 'utf8'))
+const local = pkg.version
+
+function parse(v) {
+  const m = /^(\d+)\.(\d+)\.(\d+)/.exec(String(v).replace(/^v/, ''))
+  if (!m) return null
+  return [Number(m[1]), Number(m[2]), Number(m[3])]
+}
+
+function gt(a, b) {
+  for (let i = 0; i < 3; i++) {
+    if (a[i] > b[i]) return true
+    if (a[i] < b[i]) return false
+  }
+  return false
+}
+
+try {
+  execSync('git fetch --tags --quiet', { cwd: root, stdio: 'ignore' })
+} catch {
+  /* offline */
+}
+
+let remoteTag = ''
+try {
+  remoteTag = execSync(
+    'git describe --tags --abbrev=0 origin/main 2>/dev/null || git describe --tags --abbrev=0',
+    { cwd: root, encoding: 'utf8' },
+  ).trim()
+} catch {
+  remoteTag = ''
+}
+
+const localP = parse(local)
+if (!localP) {
+  console.error(`Invalid package.json version: ${local}`)
+  process.exit(1)
+}
+
+if (!remoteTag) {
+  console.log(`No remote tag yet — allowing push of v${local}`)
+  process.exit(0)
+}
+
+const remoteP = parse(remoteTag)
+if (!remoteP) {
+  console.log(`Unparsed remote tag ${remoteTag} — allowing push`)
+  process.exit(0)
+}
+
+if (!gt(localP, remoteP)) {
+  console.error(`
+Refusing push: aeon-ui-engine ${local} is not newer than remote tag ${remoteTag}.
+
+  npm run version:push
+`)
+  process.exit(1)
+}
+
+console.log(`Version OK: ${local} > ${remoteTag.replace(/^v/, '')}`)