aeon-ui-engine 1.1.0 → 1.3.0

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

@@ -0,0 +1,250 @@
+/**
+ * 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;
+  margin: 16px 0;
+  padding: 14px 16px;
+  border-radius: var(--aeon-radius, 12px);
+  background: var(--colors-aeon-accent-dim);
+}
+
+[data-aeon-scope='prompt'][data-aeon-part='amount'] {
+  font-size: 1.35rem;
+  font-weight: 700;
+  color: var(--colors-aeon-text);
+}
+
+[data-aeon-scope='prompt'][data-aeon-part='actions'] {
+  display: flex;
+  justify-content: flex-end;
+  gap: 10px;
+  margin-top: 18px;
+}
+
+[data-aeon-scope='prompt'][data-aeon-part='primary'],
+[data-aeon-scope='prompt'][data-aeon-part='secondary'] {
+  font: inherit;
+  cursor: pointer;
+  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'] {
+  background: var(--colors-aeon-accent);
+  color: var(--colors-aeon-bg);
+  font-weight: 700;
+}
+
+[data-aeon-scope='prompt'][data-aeon-part='secondary'] {
+  background: transparent;
+  color: var(--colors-aeon-muted);
+  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;
+  gap: 12px;
+  padding: 10px 14px;
+  background: color-mix(in srgb, var(--colors-aeon-accent) 14%, var(--colors-aeon-bg));
+  border-bottom: 1px solid color-mix(in srgb, var(--colors-aeon-accent) 35%, transparent);
+}
+
+[data-aeon-scope='statusBanner'][data-aeon-part='copy'] {
+  display: grid;
+  gap: 2px;
+  min-width: 0;
+}
+
+[data-aeon-scope='statusBanner'][data-aeon-part='title'] {
+  font-size: 0.9rem;
+  color: var(--colors-aeon-text);
+}
+
+[data-aeon-scope='statusBanner'][data-aeon-part='body'] {
+  font-size: 0.78rem;
+  line-height: 1.35;
+  color: var(--colors-aeon-muted);
+}
+
+[data-aeon-scope='statusBanner'][data-aeon-part='actions'] {
+  flex-shrink: 0;
+}
+
+/* ── AppNav breadcrumb / back (dense 28px rail) ── */
+
+[data-aeon-scope='appNav'][data-aeon-part='breadcrumb'] {
+  display: flex;
+  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'] {
+  font: inherit;
+  background: transparent;
+  border: 0;
+  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: 700;
+  cursor: default;
+}
+
+[data-aeon-scope='appNav'][data-aeon-part='crumb']:not(:last-child)::after {
+  content: '/';
+  margin: 0 0.45em;
+  color: var(--colors-aeon-muted);
+  font-weight: 500;
+  pointer-events: none;
+}
+
+[data-aeon-scope='appNav'][data-aeon-part='back'] {
+  appearance: none;
+  flex-shrink: 0;
+  width: 28px;
+  height: 28px;
+  margin: 0;
+  padding: 0;
+  border: 0;
+  border-radius: var(--aeon-radius, 0.5rem);
+  background: transparent;
+  color: var(--colors-aeon-muted);
+  display: inline-grid;
+  place-items: center;
+  cursor: pointer;
+  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

@@ -0,0 +1,114 @@
+/**
+ * Optional Electron chrome helpers.
+ * Import only in desktop shells: import '@aeon-ui/panda/electron.css'
+ *
+ * Defaults aligned with dense wallet / Electron fill-height layouts.
+ */
+
+/* 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;
+  padding: 12px 20px;
+  border-bottom: 1px solid var(--colors-aeon-border);
+  background: color-mix(in srgb, var(--colors-aeon-bg) 88%, transparent);
+  backdrop-filter: blur(12px);
+  -webkit-app-region: drag;
+  app-region: drag;
+}
+
+.aeon-titlebar button,
+.aeon-titlebar a,
+.aeon-titlebar input,
+.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.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/packages/primitives/dist/chunk-4NOKRUSG.js

@@ -0,0 +1,81 @@
+// src/machines/app-nav.ts
+import { assign, setup } from "xstate";
+function appNavDepth(ctx) {
+  return ctx.stack.length;
+}
+function appNavChild(ctx) {
+  return ctx.stack.length ? ctx.stack[ctx.stack.length - 1] : null;
+}
+function appNavStateAttr(ctx) {
+  const child = appNavChild(ctx);
+  return child ? `${ctx.section}/${child.type}` : ctx.section;
+}
+var appNavMachine = setup({
+  types: {
+    context: {},
+    events: {},
+    input: {}
+  },
+  actions: {
+    setSection: assign({
+      section: ({ event }) => event.type === "SET_SECTION" ? event.section : "",
+      stack: []
+    }),
+    push: assign({
+      stack: ({ context, event }) => event.type === "PUSH" ? [...context.stack, event.child] : context.stack
+    }),
+    replace: assign({
+      stack: ({ context, event }) => {
+        if (event.type !== "REPLACE") return context.stack;
+        if (!context.stack.length) return [event.child];
+        return [...context.stack.slice(0, -1), event.child];
+      }
+    }),
+    pop: assign({
+      stack: ({ context }) => context.stack.slice(0, -1)
+    }),
+    popTo: assign({
+      stack: ({ context, event }) => {
+        if (event.type !== "POP_TO") return context.stack;
+        const idx = context.stack.findIndex((c) => c.id === event.id);
+        if (idx < 0) return context.stack;
+        return context.stack.slice(0, idx + 1);
+      }
+    }),
+    clear: assign({ stack: [] }),
+    reset: assign({
+      section: ({ event }) => event.type === "RESET" ? event.section : "",
+      stack: []
+    })
+  },
+  guards: {
+    canPop: ({ context }) => context.stack.length > 0
+  }
+}).createMachine({
+  id: "appNav",
+  context: ({ input }) => ({
+    section: input?.section ?? "home",
+    stack: input?.stack ?? []
+  }),
+  initial: "ready",
+  states: {
+    ready: {
+      on: {
+        SET_SECTION: { actions: "setSection" },
+        PUSH: { actions: "push" },
+        REPLACE: { actions: "replace" },
+        POP: { guard: "canPop", actions: "pop" },
+        POP_TO: { actions: "popTo" },
+        CLEAR: { actions: "clear" },
+        RESET: { actions: "reset" }
+      }
+    }
+  }
+});
+
+export {
+  appNavDepth,
+  appNavChild,
+  appNavStateAttr,
+  appNavMachine
+};

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

@@ -10,6 +10,7 @@ export { PopoverContext, PopoverEvent, popoverMachine } from './machines/popover
 export { ToastContext, ToastEvent, toastMachine } from './machines/toast.js';
 export { SliderContext, SliderEvent, clampSliderValue, sliderMachine, snapSliderValue } from './machines/slider.js';
 export { APP_SHELL_STATES, AppShellContext, AppShellEvent, AppShellState, appShellMachine } from './machines/app-shell.js';
+export { AppNavChild, AppNavContext, AppNavEvent, appNavChild, appNavDepth, appNavMachine, appNavStateAttr } from './machines/app-nav.js';
 export { STICKY_BAR_STATES, StickyBarContext, StickyBarEvent, StickyBarState, stickyBarMachine } from './machines/sticky-bar.js';
 export { CONTENT_REGION_STATES, ContentRegionContext, ContentRegionEvent, ContentRegionState, contentRegionMachine } from './machines/content-region.js';
 import 'xstate';

package/packages/primitives/dist/index.js

@@ -1,3 +1,9 @@
+import {
+  FIELD_INTERACTION_STATES,
+  FIELD_SUBMISSION_STATES,
+  FIELD_VALIDATION_STATES,
+  fieldMachine
+} from "./chunk-ZMGRX64G.js";
 import {
   panelMachine
 } from "./chunk-V5D7LS4J.js";
@@ -25,6 +31,12 @@ import {
 import {
   accordionMachine
 } from "./chunk-JBAG5E6W.js";
+import {
+  appNavChild,
+  appNavDepth,
+  appNavMachine,
+  appNavStateAttr
+} from "./chunk-4NOKRUSG.js";
 import {
   APP_SHELL_STATES,
   appShellMachine
@@ -46,12 +58,6 @@ import {
 import {
   dialogMachine
 } from "./chunk-SZV6KGXN.js";
-import {
-  FIELD_INTERACTION_STATES,
-  FIELD_SUBMISSION_STATES,
-  FIELD_VALIDATION_STATES,
-  fieldMachine
-} from "./chunk-ZMGRX64G.js";
 export {
   APP_SHELL_STATES,
   ASYNC_LIFECYCLE_STATES,
@@ -62,6 +68,10 @@ export {
   FIELD_VALIDATION_STATES,
   STICKY_BAR_STATES,
   accordionMachine,
+  appNavChild,
+  appNavDepth,
+  appNavMachine,
+  appNavStateAttr,
   appShellMachine,
   asyncMachine,
   buttonLifecycleMachine,

package/packages/primitives/dist/machines/app-nav.d.ts

@@ -0,0 +1,96 @@
+import * as xstate from 'xstate';
+
+/**
+ * Section + detail stack navigation — the pattern every multi-panel product
+ * reinvented (wallet sections, settings drill-in, list→detail).
+ *
+ * Not product-specific: `section` is a string id; `stack` is opaque child records.
+ */
+type AppNavChild = {
+    id: string;
+    /** Free-form type tag (e.g. "detail", "compose", "settings"). */
+    type: string;
+    /** Optional payload for the view layer. */
+    data?: unknown;
+};
+interface AppNavContext {
+    section: string;
+    stack: AppNavChild[];
+}
+type AppNavEvent = {
+    type: 'SET_SECTION';
+    section: string;
+} | {
+    type: 'PUSH';
+    child: AppNavChild;
+} | {
+    type: 'REPLACE';
+    child: AppNavChild;
+} | {
+    type: 'POP';
+} | {
+    type: 'POP_TO';
+    id: string;
+} | {
+    type: 'CLEAR';
+} | {
+    type: 'RESET';
+    section: string;
+};
+declare function appNavDepth(ctx: AppNavContext): number;
+declare function appNavChild(ctx: AppNavContext): AppNavChild | null;
+/** Projected state for data-aeon-state: `section` or `section/childType`. */
+declare function appNavStateAttr(ctx: AppNavContext): string;
+declare const appNavMachine: xstate.StateMachine<AppNavContext, {
+    type: "SET_SECTION";
+    section: string;
+} | {
+    type: "PUSH";
+    child: AppNavChild;
+} | {
+    type: "REPLACE";
+    child: AppNavChild;
+} | {
+    type: "POP";
+} | {
+    type: "POP_TO";
+    id: string;
+} | {
+    type: "CLEAR";
+} | {
+    type: "RESET";
+    section: string;
+}, {}, never, {
+    type: "replace";
+    params: xstate.NonReducibleUnknown;
+} | {
+    type: "pop";
+    params: xstate.NonReducibleUnknown;
+} | {
+    type: "push";
+    params: xstate.NonReducibleUnknown;
+} | {
+    type: "clear";
+    params: xstate.NonReducibleUnknown;
+} | {
+    type: "setSection";
+    params: xstate.NonReducibleUnknown;
+} | {
+    type: "popTo";
+    params: xstate.NonReducibleUnknown;
+} | {
+    type: "reset";
+    params: xstate.NonReducibleUnknown;
+}, {
+    type: "canPop";
+    params: unknown;
+}, never, "ready", string, Partial<AppNavContext> & {
+    section?: string;
+}, xstate.NonReducibleUnknown, xstate.EventObject, xstate.MetaObject, {
+    id: "appNav";
+    states: {
+        readonly ready: {};
+    };
+}>;
+
+export { type AppNavChild, type AppNavContext, type AppNavEvent, appNavChild, appNavDepth, appNavMachine, appNavStateAttr };

package/packages/primitives/dist/machines/app-nav.js

@@ -0,0 +1,12 @@
+import {
+  appNavChild,
+  appNavDepth,
+  appNavMachine,
+  appNavStateAttr
+} from "../chunk-4NOKRUSG.js";
+export {
+  appNavChild,
+  appNavDepth,
+  appNavMachine,
+  appNavStateAttr
+};

package/packages/primitives/node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/results.json

@@ -1 +1 @@
-{"version":"3.2.4","results":[[":src/machines/dialog.test.ts",{"duration":5.771292000000017,"failed":false}],[":src/machines/select.test.ts",{"duration":6.394416000000035,"failed":false}],[":src/__tests__/dialog.test.ts",{"duration":3.686000000000007,"failed":false}],[":src/__tests__/select.test.ts",{"duration":2.8540000000000134,"failed":false}],[":src/__tests__/floating-surface.test.ts",{"duration":4.650791999999996,"failed":false}]]}
+{"version":"3.2.4","results":[[":src/machines/dialog.test.ts",{"duration":5.771292000000017,"failed":false}],[":src/machines/select.test.ts",{"duration":6.394416000000035,"failed":false}],[":src/__tests__/dialog.test.ts",{"duration":3.686000000000007,"failed":false}],[":src/__tests__/select.test.ts",{"duration":2.8540000000000134,"failed":false}],[":src/__tests__/floating-surface.test.ts",{"duration":6.529208000000011,"failed":false}],[":src/__tests__/app-nav.test.ts",{"duration":7.017959000000019,"failed":false}]]}

package/packages/primitives/src/__tests__/app-nav.test.ts

@@ -0,0 +1,30 @@
+import { createActor } from 'xstate'
+import { describe, expect, it } from 'vitest'
+import {
+  appNavChild,
+  appNavMachine,
+  appNavStateAttr,
+} from '../machines/app-nav.js'
+
+describe('appNavMachine', () => {
+  it('switches section and clears stack', () => {
+    const actor = createActor(appNavMachine, { input: { section: 'home' } }).start()
+    actor.send({ type: 'PUSH', child: { id: '1', type: 'detail' } })
+    expect(appNavChild(actor.getSnapshot().context)?.id).toBe('1')
+    actor.send({ type: 'SET_SECTION', section: 'settings' })
+    const ctx = actor.getSnapshot().context
+    expect(ctx.section).toBe('settings')
+    expect(ctx.stack).toEqual([])
+  })
+
+  it('push / pop / popTo maintain stack', () => {
+    const actor = createActor(appNavMachine, { input: { section: 'apps' } }).start()
+    actor.send({ type: 'PUSH', child: { id: 'a', type: 'app' } })
+    actor.send({ type: 'PUSH', child: { id: 'p', type: 'permission' } })
+    expect(appNavStateAttr(actor.getSnapshot().context)).toBe('apps/permission')
+    actor.send({ type: 'POP_TO', id: 'a' })
+    expect(appNavChild(actor.getSnapshot().context)?.id).toBe('a')
+    actor.send({ type: 'POP' })
+    expect(appNavChild(actor.getSnapshot().context)).toBeNull()
+  })
+})

package/packages/primitives/src/index.ts

@@ -10,5 +10,6 @@ export * from './machines/popover.js'
 export * from './machines/toast.js'
 export * from './machines/slider.js'
 export * from './machines/app-shell.js'
+export * from './machines/app-nav.js'
 export * from './machines/sticky-bar.js'
 export * from './machines/content-region.js'