aeon-ui-engine 1.1.0 → 1.2.0

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

@@ -0,0 +1,129 @@
+/**
+ * Consumer shell recipes — baseline look for Prompt, StatusBanner, AppNav chrome.
+ * Opt into brand color via applyBrandPalette(); these rules only use Aeon CSS vars.
+ * Intentionally restrained — products still own marketing atmosphere.
+ */
+
+[data-aeon-scope='prompt'][data-aeon-part='root'] {
+  display: contents;
+}
+
+[data-aeon-scope='prompt'][data-aeon-part='eyebrow'] {
+  margin: 0 0 8px;
+  color: var(--colors-aeon-accent);
+  font-size: 0.72rem;
+  letter-spacing: 0.14em;
+  text-transform: uppercase;
+}
+
+[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;
+}
+
+[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);
+}
+
+[data-aeon-scope='statusBanner'][data-aeon-part='root'] {
+  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;
+}
+
+[data-aeon-scope='appNav'][data-aeon-part='breadcrumb'] {
+  display: flex;
+  flex-wrap: wrap;
+  gap: 6px;
+  align-items: center;
+}
+
+[data-aeon-scope='appNav'][data-aeon-part='crumb'] {
+  font: inherit;
+  background: transparent;
+  border: 0;
+  color: var(--colors-aeon-muted);
+  cursor: pointer;
+  padding: 0;
+}
+
+[data-aeon-scope='appNav'][data-aeon-part='crumb'][data-aeon-state~='current'] {
+  color: var(--colors-aeon-text);
+  font-weight: 600;
+  cursor: default;
+}
+
+[data-aeon-scope='appNav'][data-aeon-part='crumb']:not(:last-child)::after {
+  content: '/';
+  margin-left: 6px;
+  color: var(--colors-aeon-border);
+  pointer-events: none;
+}
+
+[data-aeon-scope='appNav'][data-aeon-part='back'] {
+  font: inherit;
+  background: transparent;
+  border: 0;
+  color: var(--colors-aeon-accent);
+  cursor: pointer;
+  padding: 0;
+}

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

@@ -0,0 +1,30 @@
+/**
+ * Optional Electron chrome helpers.
+ * Import only in desktop shells: import '@aeon-ui/panda/electron.css'
+ */
+
+.aeon-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] {
+  -webkit-app-region: no-drag;
+  app-region: no-drag;
+}
+
+html.platform-darwin .aeon-titlebar,
+html[data-aeon-platform='darwin'] .aeon-titlebar {
+  /* hiddenInset traffic lights */
+  padding-top: 36px;
+}

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'

package/packages/primitives/src/machines/app-nav.ts

@@ -0,0 +1,107 @@
+import { assign, setup } 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.
+ */
+export type AppNavChild = {
+  id: string
+  /** Free-form type tag (e.g. "detail", "compose", "settings"). */
+  type: string
+  /** Optional payload for the view layer. */
+  data?: unknown
+}
+
+export interface AppNavContext {
+  section: string
+  stack: AppNavChild[]
+}
+
+export 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 }
+
+export function appNavDepth(ctx: AppNavContext): number {
+  return ctx.stack.length
+}
+
+export function appNavChild(ctx: AppNavContext): AppNavChild | null {
+  return ctx.stack.length ? ctx.stack[ctx.stack.length - 1]! : null
+}
+
+/** Projected state for data-aeon-state: `section` or `section/childType`. */
+export function appNavStateAttr(ctx: AppNavContext): string {
+  const child = appNavChild(ctx)
+  return child ? `${ctx.section}/${child.type}` : ctx.section
+}
+
+export const appNavMachine = setup({
+  types: {
+    context: {} as AppNavContext,
+    events: {} as AppNavEvent,
+    input: {} as Partial<AppNavContext> & { section?: string },
+  },
+  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' },
+      },
+    },
+  },
+})