aeon-ui-engine 1.3.1 → 1.3.5

package/packages/schemas/dist/index.js

@@ -278,23 +278,25 @@ var componentSchemas = {
   combobox: componentSchema({
     id: "https://aeon-ui.com/schemas/combobox.json",
     title: "Combobox",
-    description: "Typeahead \u2014 React useState for open/query/highlight today. Do not add a duplicate floating machine without COMPONENT_CHECKLIST.",
+    description: "Open/closed via popoverMachine (same family as Select/Menu/Popover). Query, highlight, and item registry stay React-local for typeahead.",
     scope: "combobox",
     parts: ["root", "input", "icon", "content", "item", "empty"],
     states: ["open", "closed"],
-    machine: null,
-    runtime: "useState",
+    machine: "popoverMachine",
+    runtime: "useAeonMachine",
+    events: ["OPEN", "CLOSE", "TOGGLE", "ESCAPE", "POINTER_DOWN_OUTSIDE"],
     slots: { Root: "combobox.root", Input: "combobox.input", Content: "combobox.content", Item: "combobox.item" }
   }),
   tooltip: componentSchema({
     id: "https://aeon-ui.com/schemas/tooltip.json",
     title: "Tooltip",
-    description: "Open via React useState. Touch tap toggles.",
+    description: "Open/closed via popoverMachine (same family as Popover/Select/Combobox). openDelay / closeDelay / touchDuration stay React-local.",
     scope: "tooltip",
     parts: ["root", "trigger", "positioner", "content", "arrow"],
     states: ["open", "closed"],
-    machine: null,
-    runtime: "useState",
+    machine: "popoverMachine",
+    runtime: "useAeonMachine",
+    events: ["OPEN", "CLOSE", "TOGGLE", "SET_OPEN", "ESCAPE", "POINTER_DOWN_OUTSIDE"],
     slots: { Root: "tooltip.root", Trigger: "tooltip.trigger", Content: "tooltip.content" }
   }),
   toast: componentSchema({
@@ -340,6 +342,398 @@ var componentSchemas = {
       indeterminate: { type: "boolean" }
     },
     slots: { Root: "progress.root", Track: "progress.track", Range: "progress.range", Label: "progress.label" }
+  }),
+  radioGroup: componentSchema({
+    id: "https://aeon-ui.com/schemas/radioGroup.json",
+    title: "RadioGroup",
+    description: "Single selection via tabsMachine (same chart family as Tabs/Nav).",
+    scope: "radioGroup",
+    parts: ["root", "item", "itemControl", "itemIndicator", "itemLabel"],
+    states: ["selected"],
+    machine: "tabsMachine",
+    runtime: "useAeonMachine",
+    events: ["SELECT"],
+    slots: {
+      Root: "radioGroup.root",
+      Item: "radioGroup.item",
+      ItemControl: "radioGroup.itemControl",
+      ItemLabel: "radioGroup.itemLabel"
+    }
+  }),
+  slider: componentSchema({
+    id: "https://aeon-ui.com/schemas/slider.json",
+    title: "Slider",
+    description: "Range control via sliderMachine \u2014 idle | dragging plus numeric value in context.",
+    scope: "slider",
+    parts: ["root", "track", "range", "thumb", "valueText"],
+    states: ["idle", "dragging"],
+    machine: "sliderMachine",
+    runtime: "useAeonMachine",
+    events: ["SET_VALUE", "STEP", "POINTER_DOWN", "POINTER_UP", "HOME", "END"],
+    slots: {
+      Root: "slider.root",
+      Track: "slider.track",
+      Range: "slider.range",
+      Thumb: "slider.thumb",
+      ValueText: "slider.valueText"
+    }
+  }),
+  pinInput: componentSchema({
+    id: "https://aeon-ui.com/schemas/pinInput.json",
+    title: "PinInput",
+    description: "OTP / PIN cells \u2014 React state for digit buffer; projects idle | complete on root.",
+    scope: "pinInput",
+    parts: ["root", "input"],
+    states: ["idle", "complete"],
+    machine: null,
+    runtime: "useState",
+    slots: { Root: "pinInput.root", Input: "pinInput.input" }
+  }),
+  avatar: componentSchema({
+    id: "https://aeon-ui.com/schemas/avatar.json",
+    title: "Avatar",
+    description: "Image load lifecycle in React; badge presence is a prop projection.",
+    scope: "avatar",
+    parts: ["root", "image", "fallback", "badge"],
+    states: ["idle", "loading", "loaded", "error"],
+    machine: null,
+    runtime: "useState",
+    slots: {
+      Root: "avatar.root",
+      Image: "avatar.image",
+      Fallback: "avatar.fallback",
+      Badge: "avatar.badge"
+    }
+  }),
+  content: componentSchema({
+    id: "https://aeon-ui.com/schemas/content.json",
+    title: "Content",
+    description: "Status-slotted body via contentRegionMachine (or Root state prop projection). Pair with Async for fetch.",
+    scope: "content",
+    parts: ["root", "toolbar", "body", "pending", "empty", "error", "success", "sentinel"],
+    states: ["idle", "pending", "empty", "error", "ready", "loadingMore", "success"],
+    machine: "contentRegionMachine",
+    runtime: "useAeonMachine",
+    events: ["LOAD", "RESOLVE", "REJECT", "RETRY", "LOAD_MORE", "MORE_DONE", "SUCCEED", "RESET"],
+    slots: {
+      Root: "content.root",
+      Pending: "content.pending",
+      Empty: "content.empty",
+      Error: "content.error",
+      Success: "content.success"
+    }
+  }),
+  panel: componentSchema({
+    id: "https://aeon-ui.com/schemas/panel.json",
+    title: "Panel",
+    description: "Collapsible layout region via panelMachine \u2014 expanded | collapsed.",
+    scope: "panel",
+    parts: ["group", "root", "trigger", "label", "content"],
+    states: ["expanded", "collapsed"],
+    machine: "panelMachine",
+    runtime: "useAeonMachine",
+    events: ["EXPAND", "COLLAPSE", "TOGGLE", "SET_EXPANDED"],
+    slots: {
+      Group: "panel.group",
+      Root: "panel.root",
+      Trigger: "panel.trigger",
+      Label: "panel.label",
+      Content: "panel.content"
+    }
+  }),
+  appShell: componentSchema({
+    id: "https://aeon-ui.com/schemas/appShell.json",
+    title: "AppShell",
+    description: "Application chrome frame via appShellMachine \u2014 idle | overlayOpen (+ dockVisible).",
+    scope: "appShell",
+    parts: ["root", "header", "subheader", "content", "aside", "footer", "dock", "scrim"],
+    states: ["idle", "overlayOpen"],
+    machine: "appShellMachine",
+    runtime: "useAeonMachine",
+    events: ["OPEN_OVERLAY", "CLOSE_OVERLAY", "SHOW_DOCK", "HIDE_DOCK", "SET_DOCK"],
+    slots: {
+      Root: "appShell.root",
+      Header: "appShell.header",
+      Content: "appShell.content",
+      Dock: "appShell.dock",
+      Scrim: "appShell.scrim"
+    }
+  }),
+  stickyBar: componentSchema({
+    id: "https://aeon-ui.com/schemas/stickyBar.json",
+    title: "StickyBar",
+    description: "Sticky/fixed chrome band via stickyBarMachine. DOM scope is bar (reuses bar anatomy zones).",
+    scope: "bar",
+    parts: ["root", "leading", "center", "trailing", "seam"],
+    states: ["floating", "docked", "collapsed", "hidden"],
+    machine: "stickyBarMachine",
+    runtime: "useAeonMachine",
+    events: ["DOCK", "FLOAT", "COLLAPSE", "EXPAND", "HIDE", "SHOW", "SET_OFFSET"],
+    slots: {
+      Root: "bar.root",
+      Leading: "bar.leading",
+      Center: "bar.center",
+      Trailing: "bar.trailing",
+      Seam: "bar.seam"
+    }
+  }),
+  bar: componentSchema({
+    id: "https://aeon-ui.com/schemas/bar.json",
+    title: "Bar",
+    description: "Three-zone toolbar layout (leading / center / trailing / seam). Sticky lifecycle uses StickyBar + stickyBarMachine.",
+    scope: "bar",
+    parts: ["root", "leading", "center", "trailing", "seam"],
+    states: ["idle"],
+    machine: null,
+    runtime: "layout",
+    slots: {
+      Root: "bar.root",
+      Leading: "bar.leading",
+      Center: "bar.center",
+      Trailing: "bar.trailing"
+    }
+  }),
+  nav: componentSchema({
+    id: "https://aeon-ui.com/schemas/nav.json",
+    title: "Nav",
+    description: "Navigational collection via tabsMachine; items project inactive | active | disabled.",
+    scope: "nav",
+    parts: ["root", "item", "indicator", "label", "icon", "badge"],
+    states: ["inactive", "active", "disabled"],
+    machine: "tabsMachine",
+    runtime: "useAeonMachine",
+    events: ["SELECT"],
+    slots: { Root: "nav.root", Item: "nav.item", Label: "nav.label", Icon: "nav.icon" }
+  }),
+  appNav: componentSchema({
+    id: "https://aeon-ui.com/schemas/appNav.json",
+    title: "AppNav",
+    description: "Section + detail stack via appNavMachine \u2014 list\u2192detail, settings drill-in.",
+    scope: "appNav",
+    parts: ["root", "rail", "section", "stage", "breadcrumb", "crumb", "back"],
+    states: ["section"],
+    machine: "appNavMachine",
+    runtime: "useAeonMachine",
+    events: ["SET_SECTION", "PUSH", "REPLACE", "POP", "POP_TO", "CLEAR", "RESET"],
+    slots: {
+      Root: "appNav.root",
+      Rail: "appNav.rail",
+      Stage: "appNav.stage",
+      Back: "appNav.back"
+    }
+  }),
+  prompt: componentSchema({
+    id: "https://aeon-ui.com/schemas/prompt.json",
+    title: "Prompt",
+    description: "Confirm / permission dialog composed on Dialog. Open/closed via dialogMachine; face via status prop.",
+    scope: "prompt",
+    parts: ["root", "eyebrow", "meta", "amount", "actions", "primary", "secondary"],
+    states: ["pending", "confirming", "dismissed", "confirmed"],
+    machine: "dialogMachine",
+    runtime: "status prop",
+    events: ["OPEN", "CLOSE", "TOGGLE"],
+    props: {
+      status: {
+        type: "string",
+        enum: ["pending", "confirming", "dismissed", "confirmed"],
+        default: "pending"
+      }
+    },
+    slots: {
+      Root: "prompt.root",
+      Primary: "prompt.primary",
+      Secondary: "prompt.secondary",
+      Actions: "prompt.actions"
+    }
+  }),
+  statusBanner: componentSchema({
+    id: "https://aeon-ui.com/schemas/statusBanner.json",
+    title: "StatusBanner",
+    description: "Non-blocking top-of-app notice \u2014 tone + optional status props project to data-aeon-state.",
+    scope: "statusBanner",
+    parts: ["root", "copy", "title", "body", "actions"],
+    states: ["info", "success", "warning", "danger", "neutral"],
+    machine: null,
+    runtime: "props",
+    props: {
+      tone: { type: "string", enum: ["info", "success", "warning", "danger", "neutral"] },
+      status: { type: "string", description: "Optional secondary token appended to data-aeon-state" }
+    },
+    slots: {
+      Root: "statusBanner.root",
+      Title: "statusBanner.title",
+      Body: "statusBanner.body",
+      Actions: "statusBanner.actions"
+    }
+  }),
+  separator: componentSchema({
+    id: "https://aeon-ui.com/schemas/separator.json",
+    title: "Separator",
+    description: "Static divider \u2014 orientation prop only.",
+    scope: "separator",
+    parts: ["root"],
+    states: ["horizontal", "vertical"],
+    machine: null,
+    runtime: "props",
+    slots: { Root: "separator.root" }
+  }),
+  composer: componentSchema({
+    id: "https://aeon-ui.com/schemas/composer.json",
+    title: "Composer",
+    description: "Compose chrome \u2014 root state prop idle | sending | disabled | error.",
+    scope: "composer",
+    parts: ["root", "input", "actions", "send"],
+    states: ["idle", "sending", "disabled", "error"],
+    machine: null,
+    runtime: "props",
+    slots: { Root: "composer.root", Input: "composer.input", Send: "composer.send" }
+  }),
+  thread: componentSchema({
+    id: "https://aeon-ui.com/schemas/thread.json",
+    title: "Thread",
+    description: "Message stream \u2014 item state prop mine | theirs | pending | failed.",
+    scope: "thread",
+    parts: ["root", "list", "item", "bubble", "meta", "day"],
+    states: ["mine", "theirs", "pending", "failed"],
+    machine: null,
+    runtime: "props",
+    slots: { Root: "thread.root", Item: "thread.item", Bubble: "thread.bubble" }
+  }),
+  identity: componentSchema({
+    id: "https://aeon-ui.com/schemas/identity.json",
+    title: "Identity",
+    description: "Avatar + title + subtitle strip \u2014 presentational layout, not a niche product scope.",
+    scope: "identity",
+    parts: ["root", "avatar", "title", "subtitle", "meta", "trailing"],
+    states: ["idle"],
+    machine: null,
+    runtime: "layout",
+    props: {
+      size: { type: "string", enum: ["sm", "md", "lg"] }
+    },
+    slots: {
+      Root: "identity.root",
+      Avatar: "identity.avatar",
+      Title: "identity.title",
+      Subtitle: "identity.subtitle",
+      Meta: "identity.meta",
+      Trailing: "identity.trailing"
+    }
+  }),
+  profileHeader: componentSchema({
+    id: "https://aeon-ui.com/schemas/profileHeader.json",
+    title: "ProfileHeader",
+    description: "Dense account header \u2014 identity \xB7 metrics \xB7 actions. Universal people chrome.",
+    scope: "profileHeader",
+    parts: ["root", "media", "identity", "metrics", "actions", "body"],
+    states: ["idle"],
+    machine: null,
+    runtime: "layout",
+    slots: {
+      Root: "profileHeader.root",
+      Media: "profileHeader.media",
+      Identity: "profileHeader.identity",
+      Metrics: "profileHeader.metrics",
+      Actions: "profileHeader.actions",
+      Body: "profileHeader.body"
+    }
+  }),
+  metricStrip: componentSchema({
+    id: "https://aeon-ui.com/schemas/metricStrip.json",
+    title: "MetricStrip",
+    description: "Dense value|label chips \u2014 cluster or loose density. Generic stats only.",
+    scope: "metricStrip",
+    parts: ["root", "chip", "value", "label"],
+    states: ["idle"],
+    machine: null,
+    runtime: "layout",
+    props: {
+      density: { type: "string", enum: ["cluster", "loose"] }
+    },
+    slots: {
+      Root: "metricStrip.root",
+      Chip: "metricStrip.chip",
+      Value: "metricStrip.value",
+      Label: "metricStrip.label"
+    }
+  }),
+  listRow: componentSchema({
+    id: "https://aeon-ui.com/schemas/listRow.json",
+    title: "ListRow",
+    description: "Settings / menu row \u2014 leading \xB7 label \xB7 trailing. Layout only.",
+    scope: "listRow",
+    parts: ["root", "leading", "label", "description", "trailing"],
+    states: ["idle"],
+    machine: null,
+    runtime: "layout",
+    slots: {
+      Root: "listRow.root",
+      Leading: "listRow.leading",
+      Label: "listRow.label",
+      Description: "listRow.description",
+      Trailing: "listRow.trailing"
+    }
+  }),
+  entry: componentSchema({
+    id: "https://aeon-ui.com/schemas/entry.json",
+    title: "Entry",
+    description: "Universal multi-value card (feed stack or listing split). Root state idle | selected | muted \u2014 never invent niche scopes.",
+    scope: "entry",
+    parts: [
+      "list",
+      "root",
+      "header",
+      "leading",
+      "heading",
+      "title",
+      "subtitle",
+      "meta",
+      "media",
+      "body",
+      "values",
+      "value",
+      "actions",
+      "footer"
+    ],
+    states: ["idle", "selected", "muted"],
+    machine: null,
+    runtime: "props",
+    props: {
+      state: { type: "string", enum: ["idle", "selected", "muted"], default: "idle" },
+      density: { type: "string", enum: ["compact", "cozy"] },
+      layout: { type: "string", enum: ["stack", "split"] }
+    },
+    slots: {
+      List: "entry.list",
+      Root: "entry.root",
+      Header: "entry.header",
+      Body: "entry.body",
+      Actions: "entry.actions",
+      Footer: "entry.footer"
+    }
+  }),
+  conversation: componentSchema({
+    id: "https://aeon-ui.com/schemas/conversation.json",
+    title: "Conversation",
+    description: "Inbox / DM list \u2014 item state prop idle | unread | selected. Universal messaging chrome.",
+    scope: "conversation",
+    parts: ["root", "item", "leading", "body", "title", "preview", "meta", "badge"],
+    states: ["idle", "unread", "selected"],
+    machine: null,
+    runtime: "props",
+    props: {
+      state: { type: "string", enum: ["idle", "unread", "selected"], default: "idle" }
+    },
+    slots: {
+      Root: "conversation.root",
+      Item: "conversation.item",
+      Leading: "conversation.leading",
+      Body: "conversation.body",
+      Title: "conversation.title",
+      Preview: "conversation.preview",
+      Meta: "conversation.meta",
+      Badge: "conversation.badge"
+    }
   })
 };
 var catalog = {
@@ -367,8 +761,8 @@ You are building UI with **Aeon UI**, a React component library powered by finit
 ## Non-negotiable rules
 1. Do not duplicate open/checked/lifecycle in \`useState\` when a machine exists in \`@aeon-ui/primitives\`.
 2. **Button \`status\` is a prop** (\`idle|pending|success|failure|disabled\`). Optional: drive it from \`buttonLifecycleMachine\` via \`useAeonMachine\` in app code.
-3. **Select / Menu / Popover** share \`popoverMachine\` \u2014 never fork another open/closed chart.
-4. **Combobox** and **Tooltip** use React state today \u2014 do not add floating machines without the component checklist.
+3. **Select / Menu / Popover / Combobox / Tooltip** share \`popoverMachine\` for open/closed \u2014 never fork another open/closed chart. Combobox keeps query/highlight in React; Tooltip keeps openDelay/closeDelay/touchDuration in React.
+4. **PinInput** digit buffer is React-local today \u2014 do not invent a pin machine without the component checklist.
 5. **Scroll** uses \`getScrollSnapshot()\` \u2014 no XState machine.
 6. If a machine lists N stable states, the UI must represent all N (totality).
 7. Prefer \`@aeon-ui/react\` (headless) or \`@aeon-ui/ui\` (styled). Relative TS imports use \`.js\` extensions inside the Aeon monorepo only.
@@ -405,12 +799,29 @@ Rule: Pending must set aria-busy. Do not use disabled alone to mean "saving".`,
   dialog: `## Dialog statechart
 States: open | closed. Events: OPEN, CLOSE, TOGGLE.
 Rule: Backdrop click and Escape are CLOSE transitions. Title/Description are required for a11y when open.`,
-  popoverFamily: `## Popover family (Popover, Menu, Select open state)
+  popoverFamily: `## Popover family (Popover, Menu, Select, Combobox, Tooltip open state)
 Machine: popoverMachine \u2014 states open | closed.
-Rule: Reuse this chart. Never create selectOpenMachine / menuOpenMachine forks.`,
+Rule: Reuse this chart. Never create selectOpenMachine / menuOpenMachine / comboboxOpenMachine / tooltipOpenMachine forks.
+Combobox: query + highlight stay React-local; open/closed must still be popoverMachine.
+Tooltip: openDelay / closeDelay / touchDuration stay React-local; open/closed must still be popoverMachine.`,
   toggle: `## Switch / Checkbox
 Machine: toggleMachine \u2014 checked | unchecked. Events: TOGGLE, CHECK, UNCHECK.
-Rule: Hidden input stays in sync with snapshot for forms.`
+Rule: Hidden input stays in sync with snapshot for forms.`,
+  slider: `## Slider statechart
+Machine: sliderMachine \u2014 idle | dragging; value/min/max/step in context.
+Events: SET_VALUE, STEP, POINTER_DOWN, POINTER_UP, HOME, END.
+Rule: Disabled blocks SET_VALUE / drag; project idle vs dragging on data-aeon-state.`,
+  contentRegion: `## Content region statechart
+Machine: contentRegionMachine \u2014 idle \u2192 pending \u2192 (empty | error | ready) \u2192 loadingMore | success.
+Events: LOAD, RESOLVE, REJECT, RETRY, LOAD_MORE, MORE_DONE, SUCCEED, RESET.
+Rule: Every stable state has a slot. Pair with Async for fetch; do not hide empty/error behind a spinner.`,
+  toast: `## Toast item statechart
+Machine: toastMachine \u2014 hidden | visible. Events: SHOW, HIDE, DISMISS.
+Rule: Provider list orchestration may use React; each toast item uses the machine.`,
+  stickyBar: `## StickyBar statechart
+Machine: stickyBarMachine \u2014 floating | docked | collapsed | hidden.
+Events: DOCK, FLOAT, COLLAPSE, EXPAND, HIDE, SHOW, SET_OFFSET.
+Rule: DOM scope is bar (bar anatomy zones). Do not invent a parallel sticky useState.`
 };
 var GENERATIVE_UI_EXAMPLE = {
   prompt: "Create a multi-step checkout form with error handling.",
@@ -627,8 +1038,29 @@ function createAgentEventBridge(actor, options) {
   };
 }
 
+// src/machine-id.ts
+function machineRegistryId(machine) {
+  if (machine == null) return void 0;
+  if (machine === "createAsyncMachine") return "async";
+  if (machine.endsWith("Machine")) return machine.slice(0, -"Machine".length);
+  return machine;
+}
+
 // src/registry.ts
 var REGISTRY_BASE = "https://aeon-ui.com/registry";
+function entryFromSchema(id, schema) {
+  const x = schema["x-aeon"];
+  const mid = machineRegistryId(x.machine);
+  return {
+    id,
+    title: String(schema.title ?? id),
+    scope: x.scope,
+    schemaUrl: `${REGISTRY_BASE}/components/${id}.json`,
+    ...mid ? { machineUrl: `${REGISTRY_BASE}/machines/${mid}.json` } : {},
+    runtime: x.runtime,
+    description: String(schema.description ?? "")
+  };
+}
 var registryCatalog = {
   $id: `${REGISTRY_BASE}/catalog.json`,
   version: "0.1.0",
@@ -639,44 +1071,9 @@ var registryCatalog = {
     component: `${REGISTRY_BASE}/components/{id}.json`,
     machine: `${REGISTRY_BASE}/machines/{id}.json`
   },
-  components: [
-    {
-      id: "button",
-      title: "Button",
-      scope: "button",
-      schemaUrl: `${REGISTRY_BASE}/components/button.json`,
-      machineUrl: `${REGISTRY_BASE}/machines/buttonLifecycle.json`,
-      runtime: "status prop",
-      description: "Action control with idle|pending|success|failure|disabled"
-    },
-    {
-      id: "async",
-      title: "Async",
-      scope: "async",
-      schemaUrl: `${REGISTRY_BASE}/components/async.json`,
-      machineUrl: `${REGISTRY_BASE}/machines/async.json`,
-      runtime: "useAeonMachine",
-      description: "Fetch lifecycle region with full totality"
-    },
-    {
-      id: "field",
-      title: "Field",
-      scope: "field",
-      schemaUrl: `${REGISTRY_BASE}/components/field.json`,
-      machineUrl: `${REGISTRY_BASE}/machines/field.json`,
-      runtime: "useAeonMachine",
-      description: "Parallel interaction \xD7 validation \xD7 submission"
-    },
-    {
-      id: "dialog",
-      title: "Dialog",
-      scope: "dialog",
-      schemaUrl: `${REGISTRY_BASE}/components/dialog.json`,
-      machineUrl: `${REGISTRY_BASE}/machines/dialog.json`,
-      runtime: "useAeonMachine",
-      description: "Modal open/closed"
-    }
-  ],
+  components: Object.entries(componentSchemas).map(
+    ([id, schema]) => entryFromSchema(id, schema)
+  ),
   client: {
     fetchCatalog: `fetch('${REGISTRY_BASE}/catalog.json').then(r => r.json())`,
     fetchComponent: `id => fetch(\`${REGISTRY_BASE}/components/\${id}.json\`).then(r => r.json())`,
@@ -697,5 +1094,6 @@ export {
   componentSchema,
   componentSchemas,
   createAgentEventBridge,
+  machineRegistryId,
   registryCatalog
 };