aeon-ui-engine 1.5.1 → 1.9.0

package/packages/schemas/registry/components/segmentGroup.json

@@ -0,0 +1,131 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://aeon-ui.com/schemas/segmentGroup.json",
+  "title": "SegmentGroup",
+  "description": "Compact single choice as adjacent buttons via tabsMachine (same chart family as Tabs / RadioGroup).",
+  "type": "object",
+  "additionalProperties": false,
+  "required": [
+    "component",
+    "scope"
+  ],
+  "properties": {
+    "component": {
+      "const": "SegmentGroup"
+    },
+    "scope": {
+      "const": "segmentGroup"
+    },
+    "parts": {
+      "type": "array",
+      "description": "Anatomy part keys — map to data-aeon-part",
+      "items": {
+        "type": "string",
+        "enum": [
+          "root",
+          "item"
+        ]
+      },
+      "uniqueItems": true
+    },
+    "states": {
+      "type": "array",
+      "description": "Allowed data-aeon-state values (stable states only)",
+      "items": {
+        "type": "string",
+        "enum": [
+          "selected",
+          "unselected"
+        ]
+      },
+      "uniqueItems": true
+    },
+    "props": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "size": {
+          "type": "string",
+          "enum": [
+            "sm",
+            "md"
+          ]
+        },
+        "orientation": {
+          "type": "string",
+          "enum": [
+            "horizontal",
+            "vertical"
+          ]
+        }
+      }
+    },
+    "slots": {
+      "type": "object",
+      "description": "Named composition slots / compound parts",
+      "additionalProperties": {
+        "type": "string"
+      },
+      "properties": {
+        "Root": {
+          "const": "segmentGroup.root",
+          "description": "segmentGroup.root"
+        },
+        "Item": {
+          "const": "segmentGroup.item",
+          "description": "segmentGroup.item"
+        }
+      }
+    },
+    "machine": {
+      "type": [
+        "string",
+        "null"
+      ],
+      "description": "XState machine export from @aeon-ui/primitives, or null if prop/React driven",
+      "const": "tabsMachine"
+    },
+    "runtime": {
+      "type": "string",
+      "description": "How headless state is driven at runtime",
+      "const": "useAeonMachine"
+    },
+    "events": {
+      "type": "array",
+      "items": {
+        "type": "string",
+        "enum": [
+          "SELECT"
+        ]
+      }
+    },
+    "examples": {
+      "type": "array",
+      "items": {
+        "type": "string"
+      },
+      "default": []
+    }
+  },
+  "x-aeon": {
+    "scope": "segmentGroup",
+    "parts": [
+      "root",
+      "item"
+    ],
+    "states": [
+      "selected",
+      "unselected"
+    ],
+    "machine": "tabsMachine",
+    "runtime": "useAeonMachine",
+    "events": [
+      "SELECT"
+    ],
+    "slots": {
+      "Root": "segmentGroup.root",
+      "Item": "segmentGroup.item"
+    },
+    "examples": []
+  }
+}

package/packages/schemas/registry/components/textarea.json

@@ -0,0 +1,119 @@
+{
+  "$schema": "https://json-schema.org/draft/2020-12/schema",
+  "$id": "https://aeon-ui.com/schemas/textarea.json",
+  "title": "Textarea",
+  "description": "Multi-line input that grows with content between minRows and maxRows (CSS field-sizing).",
+  "type": "object",
+  "additionalProperties": false,
+  "required": [
+    "component",
+    "scope"
+  ],
+  "properties": {
+    "component": {
+      "const": "Textarea"
+    },
+    "scope": {
+      "const": "textarea"
+    },
+    "parts": {
+      "type": "array",
+      "description": "Anatomy part keys — map to data-aeon-part",
+      "items": {
+        "type": "string",
+        "enum": [
+          "root"
+        ]
+      },
+      "uniqueItems": true
+    },
+    "states": {
+      "type": "array",
+      "description": "Allowed data-aeon-state values (stable states only)",
+      "items": {
+        "type": "string",
+        "enum": [
+          "idle",
+          "disabled"
+        ]
+      },
+      "uniqueItems": true
+    },
+    "props": {
+      "type": "object",
+      "additionalProperties": false,
+      "properties": {
+        "minRows": {
+          "type": "number"
+        },
+        "maxRows": {
+          "type": "number"
+        },
+        "variant": {
+          "type": "string",
+          "enum": [
+            "outline",
+            "ghost"
+          ]
+        }
+      }
+    },
+    "slots": {
+      "type": "object",
+      "description": "Named composition slots / compound parts",
+      "additionalProperties": {
+        "type": "string"
+      },
+      "properties": {
+        "Root": {
+          "const": "textarea.root",
+          "description": "textarea.root"
+        }
+      }
+    },
+    "machine": {
+      "type": [
+        "string",
+        "null"
+      ],
+      "description": "XState machine export from @aeon-ui/primitives, or null if prop/React driven",
+      "const": null
+    },
+    "runtime": {
+      "type": "string",
+      "description": "How headless state is driven at runtime",
+      "const": "props"
+    },
+    "events": {
+      "type": "array",
+      "items": {
+        "type": "string",
+        "enum": []
+      }
+    },
+    "examples": {
+      "type": "array",
+      "items": {
+        "type": "string"
+      },
+      "default": []
+    }
+  },
+  "x-aeon": {
+    "scope": "textarea",
+    "parts": [
+      "root"
+    ],
+    "states": [
+      "idle",
+      "disabled"
+    ],
+    "machine": null,
+    "runtime": "props",
+    "events": [],
+    "slots": {
+      "Root": "textarea.root"
+    },
+    "examples": []
+  }
+}

package/packages/schemas/registry/machines/clipboard.json

@@ -0,0 +1,110 @@
+{
+  "id": "clipboard",
+  "initial": "idle",
+  "events": [
+    "COPY"
+  ],
+  "tree": {
+    "key": "clipboard",
+    "id": "clipboard",
+    "type": "compound",
+    "events": [
+      "COPY"
+    ],
+    "transitions": [],
+    "children": [
+      {
+        "key": "idle",
+        "id": "clipboard.idle",
+        "type": "atomic",
+        "events": [
+          "COPY"
+        ],
+        "transitions": [
+          {
+            "event": "COPY",
+            "target": [
+              "copying"
+            ],
+            "guarded": false
+          }
+        ],
+        "children": []
+      },
+      {
+        "key": "copying",
+        "id": "clipboard.copying",
+        "type": "atomic",
+        "events": [],
+        "transitions": [],
+        "children": []
+      },
+      {
+        "key": "copied",
+        "id": "clipboard.copied",
+        "type": "atomic",
+        "events": [
+          "COPY"
+        ],
+        "transitions": [
+          {
+            "event": "COPY",
+            "target": [
+              "copying"
+            ],
+            "guarded": false
+          }
+        ],
+        "children": []
+      },
+      {
+        "key": "failed",
+        "id": "clipboard.failed",
+        "type": "atomic",
+        "events": [
+          "COPY"
+        ],
+        "transitions": [
+          {
+            "event": "COPY",
+            "target": [
+              "copying"
+            ],
+            "guarded": false
+          }
+        ],
+        "children": []
+      }
+    ]
+  },
+  "states": {
+    "clipboard": {
+      "events": [
+        "COPY"
+      ],
+      "type": "compound"
+    },
+    "clipboard.idle": {
+      "events": [
+        "COPY"
+      ],
+      "type": "atomic"
+    },
+    "clipboard.copying": {
+      "events": [],
+      "type": "atomic"
+    },
+    "clipboard.copied": {
+      "events": [
+        "COPY"
+      ],
+      "type": "atomic"
+    },
+    "clipboard.failed": {
+      "events": [
+        "COPY"
+      ],
+      "type": "atomic"
+    }
+  }
+}

package/packages/schemas/registry/machines/slider.json

@@ -2,6 +2,8 @@
   "id": "slider",
   "initial": "interaction",
   "events": [
+    "SET_BOUNDS",
+    "SET_DISABLED",
     "SET_VALUE",
     "STEP",
     "HOME",
@@ -14,6 +16,8 @@
     "id": "slider",
     "type": "compound",
     "events": [
+      "SET_BOUNDS",
+      "SET_DISABLED",
       "SET_VALUE",
       "STEP",
       "HOME",
@@ -21,7 +25,18 @@
       "POINTER_DOWN",
       "POINTER_UP"
     ],
-    "transitions": [],
+    "transitions": [
+      {
+        "event": "SET_BOUNDS",
+        "target": [],
+        "guarded": false
+      },
+      {
+        "event": "SET_DISABLED",
+        "target": [],
+        "guarded": false
+      }
+    ],
     "children": [
       {
         "key": "interaction",
@@ -110,6 +125,8 @@
   "states": {
     "slider": {
       "events": [
+        "SET_BOUNDS",
+        "SET_DISABLED",
         "SET_VALUE",
         "STEP",
         "HOME",

package/packages/schemas/scripts/emit.ts

@@ -7,6 +7,7 @@ import {
   appShellMachine,
   asyncMachine,
   buttonLifecycleMachine,
+  clipboardMachine,
   contentRegionMachine,
   dialogMachine,
   fieldMachine,
@@ -47,6 +48,7 @@ for (const [id, schema] of Object.entries(componentSchemas)) {
 const machines = {
   async: asyncMachine,
   buttonLifecycle: buttonLifecycleMachine,
+  clipboard: clipboardMachine,
   dialog: dialogMachine,
   field: fieldMachine,
   popover: popoverMachine,

package/packages/schemas/src/components.ts

@@ -615,6 +615,69 @@ export const componentSchemas = {
     slots: { Root: 'separator.root' },
   }),
 
+  prose: componentSchema({
+    id: 'https://aeon-ui.com/schemas/prose.json',
+    title: 'Prose',
+    description: 'Long-form rich text (rendered markdown); styles descendants in em, draws list markers.',
+    scope: 'prose',
+    parts: ['root'],
+    states: ['idle'],
+    machine: null,
+    runtime: 'layout',
+    slots: { Root: 'prose.root' },
+  }),
+
+  textarea: componentSchema({
+    id: 'https://aeon-ui.com/schemas/textarea.json',
+    title: 'Textarea',
+    description: 'Multi-line input that grows with content between minRows and maxRows (CSS field-sizing).',
+    scope: 'textarea',
+    parts: ['root'],
+    states: ['idle', 'disabled'],
+    machine: null,
+    runtime: 'props',
+    props: {
+      minRows: { type: 'number' },
+      maxRows: { type: 'number' },
+      variant: { type: 'string', enum: ['outline', 'ghost'] },
+    },
+    slots: { Root: 'textarea.root' },
+  }),
+
+  clipboard: componentSchema({
+    id: 'https://aeon-ui.com/schemas/clipboard.json',
+    title: 'Clipboard',
+    description: 'One-click copy of a value; trigger and root carry idle | copying | copied | failed.',
+    scope: 'clipboard',
+    parts: ['root', 'trigger', 'indicator', 'status'],
+    states: ['idle', 'copying', 'copied', 'failed'],
+    machine: 'clipboardMachine',
+    runtime: 'useAeonMachine',
+    events: ['COPY'],
+    props: {
+      value: { type: 'string' },
+      timeout: { type: 'number' },
+    },
+    slots: { Root: 'clipboard.root', Trigger: 'clipboard.trigger', Indicator: 'clipboard.indicator' },
+  }),
+
+  segmentGroup: componentSchema({
+    id: 'https://aeon-ui.com/schemas/segmentGroup.json',
+    title: 'SegmentGroup',
+    description: 'Compact single choice as adjacent buttons via tabsMachine (same chart family as Tabs / RadioGroup).',
+    scope: 'segmentGroup',
+    parts: ['root', 'item'],
+    states: ['selected', 'unselected'],
+    machine: 'tabsMachine',
+    runtime: 'useAeonMachine',
+    events: ['SELECT'],
+    props: {
+      size: { type: 'string', enum: ['sm', 'md'] },
+      orientation: { type: 'string', enum: ['horizontal', 'vertical'] },
+    },
+    slots: { Root: 'segmentGroup.root', Item: 'segmentGroup.item' },
+  }),
+
   composer: componentSchema({
     id: 'https://aeon-ui.com/schemas/composer.json',
     title: 'Composer',

package/packages/tree/README.md

@@ -0,0 +1,29 @@
+# @aeon-ui/tree
+
+Widget trees for Aeon. A widget is configuration — immutable data describing one face of a chart — interpreted into DOM that carries `data-aeon-scope`, `data-aeon-part`, and `data-aeon-state`.
+
+This is Flutter's Widget and Element layers only. There is no RenderObject (layout stays CSS) and no `StatefulWidget` (the chart is the only state). A tree that stored `busy` itself would be the boolean twin the philosophy rules out.
+
+```ts
+import { exclusiveActionWidget, interpret, uncoveredStates, EXCLUSIVE_ACTION_STATES } from '@aeon-ui/tree'
+
+const tree = exclusiveActionWidget({
+  scope: 'settings-change-password',
+  part: 'change-password-form',
+  state,            // snapshot token
+  busy,
+  error,
+  body: { type: 'host', id: 'body' },
+  idleLabel: 'Update password',
+  pendingLabel: 'Updating…',
+  onSubmit,
+  confirm: confirm !== null,
+})
+
+uncoveredStates(EXCLUSIVE_ACTION_STATES, (s) => exclusiveActionWidget({ ...args, state: s }))
+// [] — every state of the chart has a face
+```
+
+`interpret(tree, hosts)` is the element layer. Hosts are where an existing compound (a field, a `Prompt`) fills a slot the tree names. Product CSS restyles the anatomy attributes; class names are passed in by the app, not invented here.
+
+`exclusiveActionWidget` is the one face shared by every "confirm, then await" region: `idle → confirming → busy → idle | failure`.

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

@@ -0,0 +1,97 @@
+import { ReactNode } from 'react';
+
+/**
+ * A widget is configuration, the way a Flutter `Widget` is: immutable data
+ * describing one face of a chart. It holds no lifecycle. The only state it
+ * may name is a snapshot already produced by a machine (`data-aeon-state`).
+ *
+ * Callbacks are event bindings (what to send), not state. There is no
+ * equivalent of `StatefulWidget` or `setState` — a second copy of the chart
+ * living in the tree would be the boolean twin this layer exists to remove.
+ */
+type Widget = {
+    type: 'text';
+    text: string;
+} | {
+    type: 'host';
+    id: string;
+} | {
+    type: 'el';
+    tag: 'div' | 'form' | 'button' | 'p' | 'span';
+    scope?: string;
+    part?: string;
+    /** Chart snapshot token. Projected onto `data-aeon-state`. */
+    state?: string;
+    className?: string;
+    buttonType?: 'button' | 'submit';
+    disabled?: boolean;
+    role?: string;
+    onSubmit?: (event: {
+        preventDefault(): void;
+    }) => void;
+    onClick?: () => void;
+    children: Widget[];
+};
+declare const text: (value: string) => Widget;
+declare const host: (id: string) => Widget;
+
+/**
+ * The chart every "click, maybe confirm, await, succeed or fail" region
+ * shares. One region, four faces — not a `busy` boolean beside the markup.
+ */
+declare const EXCLUSIVE_ACTION_STATES: readonly ["idle", "confirming", "busy", "failure"];
+type ExclusiveActionState = (typeof EXCLUSIVE_ACTION_STATES)[number];
+type ExclusiveActionInput = {
+    scope: string;
+    part: string;
+    /** Active snapshot token, usually `stateToAttr(snapshot.value)`. */
+    state: string;
+    busy: boolean;
+    error: string | null;
+    className?: string;
+    tag?: 'form' | 'div';
+    /** Panel-specific fields. A host, so the tree stays generic. */
+    body: Widget;
+    idleLabel: string;
+    pendingLabel: string;
+    primaryClassName?: string;
+    primaryDisabled?: boolean;
+    onSubmit?: (event: {
+        preventDefault(): void;
+    }) => void;
+    secondary?: {
+        label: string;
+        className?: string;
+        disabled?: boolean;
+        onClick: () => void;
+    };
+    actionsClassName?: string;
+    /** When set, the `confirm` host is mounted. The app renders its Prompt there. */
+    confirm?: boolean;
+};
+/**
+ * One widget for an exclusive mutation. The root carries the chart state;
+ * the primary label and the disabled set are functions of `busy`, and the
+ * failure copy is a child that exists only when `error` is set.
+ */
+declare function exclusiveActionWidget(input: ExclusiveActionInput): Widget;
+
+type WidgetHosts = Record<string, () => ReactNode>;
+/**
+ * Element layer: turn a widget tree into DOM. Anatomy comes from
+ * `@aeon-ui/core`, so product CSS restyles `data-aeon-*` and nothing else
+ * is introduced. Hosts are the escape for existing compounds (Prompt, a
+ * password field) — the tree names the slot, the app supplies the compound.
+ */
+declare function interpret(widget: Widget, hosts: WidgetHosts): ReactNode;
+
+/** Every `data-aeon-state` token a tree would project. */
+declare function widgetStates(widget: Widget): string[];
+/**
+ * States the chart names that the projection never puts on the tree.
+ * Totality (PHILOSOPHY.md §2): if the machine has the state, the face for
+ * that state must carry it. A missing name is a face the UI forgot.
+ */
+declare function uncoveredStates(states: readonly string[], project: (state: string) => Widget): string[];
+
+export { EXCLUSIVE_ACTION_STATES, type ExclusiveActionInput, type ExclusiveActionState, type Widget, type WidgetHosts, exclusiveActionWidget, host, interpret, text, uncoveredStates, widgetStates };