aeon-ui-engine 1.1.0 → 1.3.0

package/packages/react/src/app-nav/index.tsx

@@ -0,0 +1,249 @@
+import {
+  appNavAnatomy,
+  partAttrs,
+  scopeAttrs,
+} from '@aeon-ui/core'
+import {
+  appNavChild,
+  appNavMachine,
+  appNavStateAttr,
+  type AppNavChild,
+  type AppNavContext,
+} from '@aeon-ui/primitives'
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useMemo,
+  type ButtonHTMLAttributes,
+  type HTMLAttributes,
+  type ReactNode,
+} from 'react'
+import { useAeonMachine } from '../hooks/use-aeon-machine.js'
+import { mergeProps } from '../utils/merge-props.js'
+
+export type { AppNavChild, AppNavContext }
+
+interface AppNavContextValue {
+  section: string
+  stack: AppNavChild[]
+  child: AppNavChild | null
+  stateAttr: string
+  send: ReturnType<typeof useAeonMachine<typeof appNavMachine>>[1]
+  setSection: (section: string) => void
+  push: (child: AppNavChild) => void
+  replace: (child: AppNavChild) => void
+  pop: () => void
+  popTo: (id: string) => void
+  clear: () => void
+}
+
+const AppNavCtx = createContext<AppNavContextValue | null>(null)
+
+export function useAppNav() {
+  const ctx = useContext(AppNavCtx)
+  if (!ctx) throw new Error('AppNav parts must be used within AppNav.Root')
+  return ctx
+}
+
+/** Use the machine without the compound tree. */
+export function useAppNavMachine(input?: { section?: string; stack?: AppNavChild[] }) {
+  const [snapshot, send] = useAeonMachine(appNavMachine, {
+    input: { section: input?.section ?? 'home', stack: input?.stack ?? [] },
+  })
+  const section = snapshot.context.section
+  const stack = snapshot.context.stack
+  const child = appNavChild(snapshot.context)
+  const stateAttr = appNavStateAttr(snapshot.context)
+
+  return useMemo(
+    () => ({
+      section,
+      stack,
+      child,
+      stateAttr,
+      send,
+      setSection: (next: string) => send({ type: 'SET_SECTION', section: next }),
+      push: (next: AppNavChild) => send({ type: 'PUSH', child: next }),
+      replace: (next: AppNavChild) => send({ type: 'REPLACE', child: next }),
+      pop: () => send({ type: 'POP' }),
+      popTo: (id: string) => send({ type: 'POP_TO', id }),
+      clear: () => send({ type: 'CLEAR' }),
+      reset: (next: string) => send({ type: 'RESET', section: next }),
+    }),
+    [section, stack, child, stateAttr, send],
+  )
+}
+
+export interface AppNavRootProps extends HTMLAttributes<HTMLDivElement> {
+  defaultSection?: string
+  children?: ReactNode
+}
+
+const Root = forwardRef<HTMLDivElement, AppNavRootProps>(function AppNavRoot(
+  { defaultSection = 'home', children, ...rest },
+  ref,
+) {
+  const nav = useAppNavMachine({ section: defaultSection })
+
+  return (
+    <AppNavCtx.Provider value={nav}>
+      <div
+        ref={ref}
+        {...mergeProps(
+          scopeAttrs(appNavAnatomy.scope, appNavAnatomy.root, { state: nav.stateAttr }),
+          rest,
+        )}
+      >
+        {children}
+      </div>
+    </AppNavCtx.Provider>
+  )
+})
+
+const Rail = forwardRef<HTMLElement, HTMLAttributes<HTMLElement>>(function AppNavRail(props, ref) {
+  const { stateAttr } = useAppNav()
+  return (
+    <nav
+      ref={ref as never}
+      {...mergeProps(partAttrs(appNavAnatomy.scope, appNavAnatomy.rail, { state: stateAttr }), props)}
+    />
+  )
+})
+
+export interface AppNavSectionProps extends ButtonHTMLAttributes<HTMLButtonElement> {
+  value: string
+}
+
+const Section = forwardRef<HTMLButtonElement, AppNavSectionProps>(function AppNavSection(
+  { value, onClick, ...rest },
+  ref,
+) {
+  const { section, child, setSection } = useAppNav()
+  const isActive = section === value && !child
+
+  return (
+    <button
+      ref={ref}
+      type="button"
+      aria-current={isActive ? 'page' : undefined}
+      data-aeon-value={value}
+      onClick={(e) => {
+        onClick?.(e)
+        if (e.defaultPrevented) return
+        setSection(value)
+      }}
+      {...mergeProps(
+        partAttrs(appNavAnatomy.scope, appNavAnatomy.section, {
+          state: section === value ? (child ? 'section-active' : 'active') : 'inactive',
+        }),
+        rest,
+      )}
+    />
+  )
+})
+
+const Stage = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function AppNavStage(
+  props,
+  ref,
+) {
+  const { stateAttr } = useAppNav()
+  return (
+    <div
+      ref={ref}
+      {...mergeProps(partAttrs(appNavAnatomy.scope, appNavAnatomy.stage, { state: stateAttr }), props)}
+    />
+  )
+})
+
+export interface AppNavBreadcrumbProps extends HTMLAttributes<HTMLElement> {
+  /** Labels for section + each stack entry (length = 1 + stack.length). */
+  labels?: string[]
+}
+
+const Breadcrumb = forwardRef<HTMLElement, AppNavBreadcrumbProps>(function AppNavBreadcrumb(
+  { labels, ...rest },
+  ref,
+) {
+  const { section, stack, setSection, popTo, clear, stateAttr } = useAppNav()
+  const crumbs = [
+    { id: section, label: labels?.[0] ?? section, kind: 'section' as const },
+    ...stack.map((entry, i) => ({
+      id: entry.id,
+      label: labels?.[i + 1] ?? entry.type,
+      kind: 'child' as const,
+    })),
+  ]
+
+  return (
+    <nav
+      ref={ref as never}
+      aria-label="Breadcrumb"
+      {...mergeProps(
+        partAttrs(appNavAnatomy.scope, appNavAnatomy.breadcrumb, { state: stateAttr }),
+        rest,
+      )}
+    >
+      {crumbs.map((crumb, index) => {
+        const last = index === crumbs.length - 1
+        return (
+          <button
+            key={`${crumb.kind}:${crumb.id}`}
+            type="button"
+            disabled={last}
+            {...partAttrs(appNavAnatomy.scope, appNavAnatomy.crumb, {
+              state: last ? 'current' : 'ancestor',
+            })}
+            onClick={() => {
+              if (crumb.kind === 'section') {
+                clear()
+                setSection(crumb.id)
+              } else {
+                popTo(crumb.id)
+              }
+            }}
+          >
+            {crumb.label}
+          </button>
+        )
+      })}
+    </nav>
+  )
+})
+
+const Back = forwardRef<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonElement>>(
+  function AppNavBack({ onClick, children = 'Back', ...rest }, ref) {
+    const { child, pop, stateAttr } = useAppNav()
+    if (!child) return null
+    return (
+      <button
+        ref={ref}
+        type="button"
+        onClick={(e) => {
+          onClick?.(e)
+          if (e.defaultPrevented) return
+          pop()
+        }}
+        {...mergeProps(
+          partAttrs(appNavAnatomy.scope, appNavAnatomy.back, { state: stateAttr }),
+          rest,
+        )}
+      >
+        {children}
+      </button>
+    )
+  },
+)
+
+/**
+ * AppNav — section rail + detail stack.
+ * Machine: SET_SECTION / PUSH / POP / CLEAR. UI = f(section, stack).
+ */
+export const AppNav = {
+  Root,
+  Rail,
+  Section,
+  Stage,
+  Breadcrumb,
+  Back,
+}

package/packages/react/src/avatar/index.tsx

@@ -47,7 +47,10 @@ const Root = forwardRef<HTMLSpanElement, AvatarRootProps>(function AvatarRoot(
         ref={ref}
         className={className}
         {...mergeProps(
-          partAttrs(avatarAnatomy.scope, avatarAnatomy.root, { state: status }),
+          partAttrs(avatarAnatomy.scope, avatarAnatomy.root, {
+            // `ready` alias keeps product CSS friendly; `loaded` stays for existing recipes.
+            state: status === 'loaded' ? 'loaded ready' : status,
+          }),
           rest,
         )}
       >

package/packages/react/src/hooks/use-fit-text.ts

@@ -0,0 +1,59 @@
+import { useLayoutEffect, type RefObject } from 'react'
+
+export type FitTextOptions = {
+  maxPx?: number
+  minPx?: number
+  /** Re-run when this value changes (e.g. display string). */
+  watch?: unknown
+}
+
+/**
+ * Shrink font-size (then scale) so `contentRef` fits inside `slotRef`
+ * without expanding parent layout. Universal for balance rows, titles, tickers.
+ */
+export function useFitText(
+  slotRef: RefObject<HTMLElement | null>,
+  contentRef: RefObject<HTMLElement | null>,
+  opts: FitTextOptions = {},
+) {
+  const maxPx = opts.maxPx ?? 28
+  const minPx = opts.minPx ?? 8
+  const watch = opts.watch
+
+  useLayoutEffect(() => {
+    const slot = slotRef.current
+    const content = contentRef.current
+    if (!slot || !content) return
+
+    const fit = () => {
+      const available = slot.clientWidth
+      if (available <= 0) return
+
+      content.style.transform = ''
+      content.style.transformOrigin = ''
+      content.style.fontSize = `${maxPx}px`
+
+      let size = maxPx
+      while (size > minPx && content.scrollWidth > available + 0.5) {
+        size -= 0.5
+        content.style.fontSize = `${size}px`
+      }
+
+      if (content.scrollWidth > available + 0.5) {
+        const scale = Math.max(0.35, available / content.scrollWidth)
+        content.style.transformOrigin = 'center center'
+        content.style.transform = `scale(${scale})`
+      }
+    }
+
+    fit()
+    const ro = new ResizeObserver(fit)
+    ro.observe(slot)
+    return () => {
+      ro.disconnect()
+      content.style.fontSize = ''
+      content.style.transform = ''
+      content.style.transformOrigin = ''
+    }
+  }, [slotRef, contentRef, maxPx, minPx, watch])
+}

package/packages/react/src/index.ts

@@ -2,6 +2,8 @@ export * from './button/index.js'
 export * from './switch/index.js'
 export * from './checkbox/index.js'
 export * from './dialog/index.js'
+export * from './prompt/index.js'
+export * from './status-banner/index.js'
 export * from './tabs/index.js'
 export * from './separator/index.js'
 export * from './progress/index.js'
@@ -31,8 +33,10 @@ export * from './profile-header/index.js'
 export * from './bar/index.js'
 export * from './panel/index.js'
 export * from './app-shell/index.js'
+export * from './app-nav/index.js'
 export * from './content/index.js'
 export * from './nav/index.js'
 export * from './sticky-bar/index.js'
 export { useAeonMachine } from './hooks/use-aeon-machine.js'
 export { useLayoutMode } from './hooks/use-layout-mode.js'
+export { useFitText } from './hooks/use-fit-text.js'

package/packages/react/src/prompt/index.tsx

@@ -0,0 +1,161 @@
+import { partAttrs, promptAnatomy, scopeAttrs } from '@aeon-ui/core'
+import {
+  createContext,
+  forwardRef,
+  useContext,
+  useMemo,
+  type ButtonHTMLAttributes,
+  type HTMLAttributes,
+  type ReactNode,
+} from 'react'
+import { Dialog } from '../dialog/index.js'
+import { mergeProps } from '../utils/merge-props.js'
+
+export type PromptStatus = 'pending' | 'confirming' | 'dismissed' | 'confirmed'
+
+interface PromptContextValue {
+  status: PromptStatus
+}
+
+const PromptCtx = createContext<PromptContextValue | null>(null)
+
+function usePromptCtx() {
+  const ctx = useContext(PromptCtx)
+  if (!ctx) throw new Error('Prompt parts must be used within Prompt.Root')
+  return ctx
+}
+
+export interface PromptRootProps {
+  open?: boolean
+  defaultOpen?: boolean
+  onOpenChange?: (open: boolean) => void
+  /** Projected onto data-aeon-state (default: pending when open). */
+  status?: PromptStatus
+  children?: ReactNode
+  className?: string
+}
+
+/**
+ * Prompt — confirm / permission / “restart to update” dialog.
+ * Composes Dialog (portal, focus trap, escape) with product-facing parts.
+ */
+const Root = forwardRef<HTMLDivElement, PromptRootProps>(function PromptRoot(
+  { status = 'pending', children, className, ...dialogProps },
+  ref,
+) {
+  const value = useMemo(() => ({ status }), [status])
+  return (
+    <PromptCtx.Provider value={value}>
+      <Dialog.Root {...dialogProps}>
+        <div
+          ref={ref}
+          className={className}
+          {...scopeAttrs(promptAnatomy.scope, promptAnatomy.root, { state: status })}
+        >
+          {children}
+        </div>
+      </Dialog.Root>
+    </PromptCtx.Provider>
+  )
+})
+
+const Eyebrow = forwardRef<HTMLParagraphElement, HTMLAttributes<HTMLParagraphElement>>(
+  function PromptEyebrow(props, ref) {
+    const { status } = usePromptCtx()
+    return (
+      <p
+        ref={ref}
+        {...mergeProps(partAttrs(promptAnatomy.scope, promptAnatomy.eyebrow, { state: status }), props)}
+      />
+    )
+  },
+)
+
+const Meta = forwardRef<HTMLDListElement, HTMLAttributes<HTMLDListElement>>(function PromptMeta(
+  props,
+  ref,
+) {
+  const { status } = usePromptCtx()
+  return (
+    <dl
+      ref={ref}
+      {...mergeProps(partAttrs(promptAnatomy.scope, promptAnatomy.meta, { state: status }), props)}
+    />
+  )
+})
+
+const Amount = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function PromptAmount(
+  props,
+  ref,
+) {
+  const { status } = usePromptCtx()
+  return (
+    <div
+      ref={ref}
+      {...mergeProps(partAttrs(promptAnatomy.scope, promptAnatomy.amount, { state: status }), props)}
+    />
+  )
+})
+
+const Actions = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function PromptActions(
+  props,
+  ref,
+) {
+  const { status } = usePromptCtx()
+  return (
+    <div
+      ref={ref}
+      {...mergeProps(partAttrs(promptAnatomy.scope, promptAnatomy.actions, { state: status }), props)}
+    />
+  )
+})
+
+const Primary = forwardRef<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonElement>>(
+  function PromptPrimary(props, ref) {
+    const { status } = usePromptCtx()
+    return (
+      <button
+        ref={ref}
+        type="button"
+        {...mergeProps(
+          partAttrs(promptAnatomy.scope, promptAnatomy.primary, { state: status }),
+          props,
+        )}
+      />
+    )
+  },
+)
+
+const Secondary = forwardRef<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonElement>>(
+  function PromptSecondary(props, ref) {
+    const { status } = usePromptCtx()
+    return (
+      <button
+        ref={ref}
+        type="button"
+        {...mergeProps(
+          partAttrs(promptAnatomy.scope, promptAnatomy.secondary, { state: status }),
+          props,
+        )}
+      />
+    )
+  },
+)
+
+export const Prompt = {
+  Root,
+  Trigger: Dialog.Trigger,
+  Portal: Dialog.Portal,
+  Backdrop: Dialog.Backdrop,
+  Positioner: Dialog.Positioner,
+  Content: Dialog.Content,
+  Title: Dialog.Title,
+  Description: Dialog.Description,
+  CloseTrigger: Dialog.CloseTrigger,
+  Eyebrow,
+  Meta,
+  Amount,
+  Actions,
+  Primary,
+  Secondary,
+}

package/packages/react/src/status-banner/index.tsx

@@ -0,0 +1,84 @@
+import { partAttrs, scopeAttrs, statusBannerAnatomy } from '@aeon-ui/core'
+import { forwardRef, type ButtonHTMLAttributes, type HTMLAttributes, type ReactNode } from 'react'
+import { mergeProps } from '../utils/merge-props.js'
+
+export type StatusBannerTone = 'info' | 'success' | 'warning' | 'danger'
+
+export interface StatusBannerRootProps extends HTMLAttributes<HTMLDivElement> {
+  tone?: StatusBannerTone
+  /** Machine-ish status string projected to data-aeon-state (e.g. ready, downloading). */
+  status?: string
+  children?: ReactNode
+}
+
+const Root = forwardRef<HTMLDivElement, StatusBannerRootProps>(function StatusBannerRoot(
+  { tone = 'info', status, children, ...rest },
+  ref,
+) {
+  const state = [tone, status].filter(Boolean).join(' ')
+  return (
+    <div
+      ref={ref}
+      role="status"
+      {...mergeProps(scopeAttrs(statusBannerAnatomy.scope, statusBannerAnatomy.root, { state }), rest)}
+    >
+      {children}
+    </div>
+  )
+})
+
+const Copy = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function StatusBannerCopy(
+  props,
+  ref,
+) {
+  return <div ref={ref} {...mergeProps(partAttrs(statusBannerAnatomy.scope, statusBannerAnatomy.copy), props)} />
+})
+
+const Title = forwardRef<HTMLElement, HTMLAttributes<HTMLElement>>(function StatusBannerTitle(
+  props,
+  ref,
+) {
+  return (
+    <strong
+      ref={ref as never}
+      {...mergeProps(partAttrs(statusBannerAnatomy.scope, statusBannerAnatomy.title), props)}
+    />
+  )
+})
+
+const Body = forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>(function StatusBannerBody(
+  props,
+  ref,
+) {
+  return (
+    <span ref={ref} {...mergeProps(partAttrs(statusBannerAnatomy.scope, statusBannerAnatomy.body), props)} />
+  )
+})
+
+const Actions = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(function StatusBannerActions(
+  props,
+  ref,
+) {
+  return (
+    <div
+      ref={ref}
+      {...mergeProps(partAttrs(statusBannerAnatomy.scope, statusBannerAnatomy.actions), props)}
+    />
+  )
+})
+
+const Action = forwardRef<HTMLButtonElement, ButtonHTMLAttributes<HTMLButtonElement>>(
+  function StatusBannerAction(props, ref) {
+    return <button ref={ref} type="button" {...props} />
+  },
+)
+
+/** Non-blocking top-of-app notice (updates, sync, offline). */
+export const StatusBanner = {
+  Root,
+  Copy,
+  Title,
+  Body,
+  Actions,
+  Action,
+}

package/packages/ui/src/app-nav.tsx

@@ -0,0 +1,2 @@
+export { AppNav, useAppNav, useAppNavMachine } from '@aeon-ui/react'
+export type { AppNavChild, AppNavContext } from '@aeon-ui/react'

package/packages/ui/src/index.ts

@@ -13,6 +13,10 @@ export { Field } from './field.js'
 export { Switch } from './switch.js'
 export { Checkbox } from './checkbox.js'
 export { Dialog } from './dialog.js'
+export { Prompt } from './prompt.js'
+export { StatusBanner } from './status-banner.js'
+export { AppNav, useAppNav, useAppNavMachine } from './app-nav.js'
+export type { AppNavChild, AppNavContext } from './app-nav.js'
 export { Tabs } from './tabs.js'
 export { Separator } from './separator.js'
 export { Progress } from './progress.js'

package/packages/ui/src/prompt.tsx

@@ -0,0 +1,29 @@
+import { Prompt as Headless } from '@aeon-ui/react'
+import type { ComponentProps } from 'react'
+import { Dialog } from './dialog.js'
+import { cn } from './cn.js'
+
+/** Styled Prompt — Dialog recipes + prompt action parts. */
+export const Prompt = {
+  Root: Headless.Root,
+  Trigger: Dialog.Trigger,
+  Portal: Dialog.Portal,
+  Backdrop: Dialog.Backdrop,
+  Positioner: Dialog.Positioner,
+  Content: Dialog.Content,
+  Title: Dialog.Title,
+  Description: Dialog.Description,
+  CloseTrigger: Dialog.CloseTrigger,
+  Eyebrow: ({ className, ...props }: ComponentProps<typeof Headless.Eyebrow>) => (
+    <Headless.Eyebrow className={cn(className)} {...props} />
+  ),
+  Meta: Headless.Meta,
+  Amount: Headless.Amount,
+  Actions: Headless.Actions,
+  Primary: ({ className, ...props }: ComponentProps<typeof Headless.Primary>) => (
+    <Headless.Primary className={cn(className)} {...props} />
+  ),
+  Secondary: ({ className, ...props }: ComponentProps<typeof Headless.Secondary>) => (
+    <Headless.Secondary className={cn(className)} {...props} />
+  ),
+}

package/packages/ui/src/status-banner.tsx

@@ -0,0 +1 @@
+export { StatusBanner } from '@aeon-ui/react'

package/scripts/vite-aliases.mjs

@@ -63,6 +63,14 @@ export function aeonUiViteAliases(opts = {}) {
       find: '@aeon-ui/panda/chrome.css',
       replacement: path.join(packages, 'panda/src/theme/chrome.css'),
     },
+    {
+      find: '@aeon-ui/panda/consumer-shell.css',
+      replacement: path.join(packages, 'panda/src/theme/consumer-shell.css'),
+    },
+    {
+      find: '@aeon-ui/panda/electron.css',
+      replacement: path.join(packages, 'panda/src/theme/electron.css'),
+    },
     {
       find: '@aeon-ui/panda/styled-system/css',
       replacement: path.join(packages, 'panda/styled-system/css/index.mjs'),