aeon-ui-engine 1.5.1 → 1.9.0

package/packages/tree/dist/index.js

@@ -0,0 +1,107 @@
+// src/widget.ts
+var text = (value) => ({ type: "text", text: value });
+var host = (id) => ({ type: "host", id });
+
+// src/exclusive-action.ts
+var EXCLUSIVE_ACTION_STATES = ["idle", "confirming", "busy", "failure"];
+function exclusiveActionWidget(input) {
+  const children = [input.body];
+  if (input.error) {
+    children.push({
+      type: "el",
+      tag: "p",
+      part: "error",
+      className: "error",
+      role: "alert",
+      children: [text(input.error)]
+    });
+  }
+  const actions = [
+    {
+      type: "el",
+      tag: "button",
+      part: "primary",
+      buttonType: input.tag === "div" ? "button" : "submit",
+      disabled: input.busy || input.primaryDisabled,
+      className: input.primaryClassName,
+      onClick: input.tag === "div" ? () => input.onSubmit?.({ preventDefault() {
+      } }) : void 0,
+      children: [text(input.busy ? input.pendingLabel : input.idleLabel)]
+    }
+  ];
+  if (input.secondary) {
+    actions.push({
+      type: "el",
+      tag: "button",
+      part: "secondary",
+      buttonType: "button",
+      disabled: input.busy || input.secondary.disabled,
+      className: input.secondary.className,
+      onClick: input.secondary.onClick,
+      children: [text(input.secondary.label)]
+    });
+  }
+  children.push({
+    type: "el",
+    tag: "div",
+    part: "actions",
+    className: input.actionsClassName,
+    state: input.state,
+    children: actions
+  });
+  if (input.confirm) children.push(host("confirm"));
+  return {
+    type: "el",
+    tag: input.tag ?? "form",
+    scope: input.scope,
+    part: input.part,
+    state: input.state,
+    className: input.className,
+    onSubmit: input.tag === "div" ? void 0 : input.onSubmit,
+    children
+  };
+}
+
+// src/interpret.tsx
+import { partOnlyAttrs, scopeAttrs } from "@aeon-ui/core";
+import { createElement, Fragment } from "react";
+function interpret(widget, hosts) {
+  if (widget.type === "text") return widget.text;
+  if (widget.type === "host") return hosts[widget.id]?.() ?? null;
+  const attrs = widget.scope ? scopeAttrs(widget.scope, widget.part ?? "root", { state: widget.state }) : widget.part ? partOnlyAttrs(widget.part, { state: widget.state }) : widget.state ? { "data-aeon-state": widget.state } : {};
+  const props = {
+    ...attrs,
+    className: widget.className,
+    role: widget.role,
+    disabled: widget.disabled || void 0,
+    type: widget.tag === "button" ? widget.buttonType ?? "button" : void 0,
+    onSubmit: widget.tag === "form" && widget.onSubmit ? (event) => widget.onSubmit?.(event) : void 0,
+    onClick: widget.onClick
+  };
+  return createElement(
+    widget.tag,
+    props,
+    ...widget.children.map(
+      (child, index) => createElement(Fragment, { key: index }, interpret(child, hosts))
+    )
+  );
+}
+
+// src/totality.ts
+function widgetStates(widget) {
+  if (widget.type !== "el") return [];
+  const own = widget.state ? [widget.state] : [];
+  return [...own, ...widget.children.flatMap(widgetStates)];
+}
+function uncoveredStates(states, project) {
+  return states.filter((state) => !widgetStates(project(state)).includes(state));
+}
+export {
+  EXCLUSIVE_ACTION_STATES,
+  exclusiveActionWidget,
+  host,
+  interpret,
+  text,
+  uncoveredStates,
+  widgetStates
+};

package/packages/tree/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@aeon-ui/tree",
+  "version": "0.1.0",
+  "description": "Widget trees: UI as data projected from a statechart snapshot. Flutter's Widget layer, Aeon's anatomy, no local state.",
+  "license": "MIT",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/GenericCPU/aeon-ui.git",
+    "directory": "packages/tree"
+  },
+  "publishConfig": { "access": "public" },
+  "files": ["dist", "README.md"],
+  "keywords": ["aeon-ui", "statechart", "widget", "xstate"],
+  "type": "module",
+  "sideEffects": false,
+  "main": "./dist/index.js",
+  "types": "./dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "build": "tsup src/index.ts --format esm --dts --clean --external react",
+    "typecheck": "tsc --noEmit",
+    "test": "vitest run"
+  },
+  "dependencies": {
+    "@aeon-ui/core": "workspace:*"
+  },
+  "peerDependencies": {
+    "react": "^18 || ^19"
+  },
+  "devDependencies": {
+    "@types/react": "^19.1.2",
+    "react": "^19.1.0",
+    "tsup": "^8.4.0",
+    "typescript": "^5.8.3",
+    "vitest": "^4.1.8"
+  }
+}

package/packages/tree/src/exclusive-action.ts

@@ -0,0 +1,104 @@
+import { host, text, type Widget } from './widget.js'
+
+/**
+ * The chart every "click, maybe confirm, await, succeed or fail" region
+ * shares. One region, four faces — not a `busy` boolean beside the markup.
+ */
+export const EXCLUSIVE_ACTION_STATES = ['idle', 'confirming', 'busy', 'failure'] as const
+
+export type ExclusiveActionState = (typeof EXCLUSIVE_ACTION_STATES)[number]
+
+export 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.
+ */
+export function exclusiveActionWidget(input: ExclusiveActionInput): Widget {
+  const children: Widget[] = [input.body]
+
+  if (input.error) {
+    children.push({
+      type: 'el',
+      tag: 'p',
+      part: 'error',
+      className: 'error',
+      role: 'alert',
+      children: [text(input.error)],
+    })
+  }
+
+  const actions: Widget[] = [
+    {
+      type: 'el',
+      tag: 'button',
+      part: 'primary',
+      buttonType: input.tag === 'div' ? 'button' : 'submit',
+      disabled: input.busy || input.primaryDisabled,
+      className: input.primaryClassName,
+      onClick: input.tag === 'div' ? () => input.onSubmit?.({ preventDefault() {} }) : undefined,
+      children: [text(input.busy ? input.pendingLabel : input.idleLabel)],
+    },
+  ]
+
+  if (input.secondary) {
+    actions.push({
+      type: 'el',
+      tag: 'button',
+      part: 'secondary',
+      buttonType: 'button',
+      disabled: input.busy || input.secondary.disabled,
+      className: input.secondary.className,
+      onClick: input.secondary.onClick,
+      children: [text(input.secondary.label)],
+    })
+  }
+
+  children.push({
+    type: 'el',
+    tag: 'div',
+    part: 'actions',
+    className: input.actionsClassName,
+    state: input.state,
+    children: actions,
+  })
+
+  if (input.confirm) children.push(host('confirm'))
+
+  return {
+    type: 'el',
+    tag: input.tag ?? 'form',
+    scope: input.scope,
+    part: input.part,
+    state: input.state,
+    className: input.className,
+    onSubmit: input.tag === 'div' ? undefined : input.onSubmit,
+    children,
+  }
+}

package/packages/tree/src/index.ts

@@ -0,0 +1,7 @@
+export { exclusiveActionWidget, EXCLUSIVE_ACTION_STATES } from './exclusive-action.js'
+export type { ExclusiveActionInput, ExclusiveActionState } from './exclusive-action.js'
+export { interpret } from './interpret.js'
+export type { WidgetHosts } from './interpret.js'
+export { uncoveredStates, widgetStates } from './totality.js'
+export { host, text } from './widget.js'
+export type { Widget } from './widget.js'

package/packages/tree/src/interpret.tsx

@@ -0,0 +1,45 @@
+import { partOnlyAttrs, scopeAttrs } from '@aeon-ui/core'
+import { createElement, Fragment, type ReactNode } from 'react'
+import type { Widget } from './widget.js'
+
+export 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.
+ */
+export function interpret(widget: Widget, hosts: WidgetHosts): ReactNode {
+  if (widget.type === 'text') return widget.text
+  if (widget.type === 'host') return hosts[widget.id]?.() ?? null
+
+  const attrs = widget.scope
+    ? scopeAttrs(widget.scope, widget.part ?? 'root', { state: widget.state })
+    : widget.part
+      ? partOnlyAttrs(widget.part, { state: widget.state })
+      : widget.state
+        ? { 'data-aeon-state': widget.state }
+        : {}
+
+  const props: Record<string, unknown> = {
+    ...attrs,
+    className: widget.className,
+    role: widget.role,
+    disabled: widget.disabled || undefined,
+    type: widget.tag === 'button' ? widget.buttonType ?? 'button' : undefined,
+    onSubmit:
+      widget.tag === 'form' && widget.onSubmit
+        ? (event: { preventDefault(): void }) => widget.onSubmit?.(event)
+        : undefined,
+    onClick: widget.onClick,
+  }
+
+  return createElement(
+    widget.tag,
+    props,
+    ...widget.children.map((child, index) =>
+      createElement(Fragment, { key: index }, interpret(child, hosts)),
+    ),
+  )
+}

package/packages/tree/src/totality.ts

@@ -0,0 +1,20 @@
+import type { Widget } from './widget.js'
+
+/** Every `data-aeon-state` token a tree would project. */
+export function widgetStates(widget: Widget): string[] {
+  if (widget.type !== 'el') return []
+  const own = widget.state ? [widget.state] : []
+  return [...own, ...widget.children.flatMap(widgetStates)]
+}
+
+/**
+ * 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.
+ */
+export function uncoveredStates(
+  states: readonly string[],
+  project: (state: string) => Widget,
+): string[] {
+  return states.filter((state) => !widgetStates(project(state)).includes(state))
+}

package/packages/tree/src/widget.ts

@@ -0,0 +1,31 @@
+/**
+ * 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.
+ */
+export 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[]
+    }
+
+export const text = (value: string): Widget => ({ type: 'text', text: value })
+
+export const host = (id: string): Widget => ({ type: 'host', id })

package/packages/tree/tsconfig.json

@@ -0,0 +1,8 @@
+{
+  "extends": "../../tsconfig.base.json",
+  "compilerOptions": {
+    "outDir": "dist",
+    "rootDir": "src"
+  },
+  "include": ["src"]
+}

package/packages/tree/vitest.config.ts

@@ -0,0 +1,8 @@
+import { defineConfig } from 'vitest/config'
+
+export default defineConfig({
+  test: {
+    environment: 'node',
+    include: ['src/**/*.test.ts'],
+  },
+})

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

@@ -31,9 +31,9 @@ declare const Avatar: {
     Badge: ({ className, ...props }: ComponentProps<typeof Avatar$1.Badge>) => react_jsx_runtime.JSX.Element;
 };
 
-type Size = 'sm' | 'md' | 'lg';
+type Size$1 = 'sm' | 'md' | 'lg';
 type RootProps$i = ComponentProps<typeof Identity$1.Root> & {
-    size?: Size;
+    size?: Size$1;
 };
 type PartProps$9 = ComponentProps<typeof Identity$1.Title>;
 declare const Identity: {
@@ -249,6 +249,30 @@ declare const Separator: {
     Root: ({ className, orientation, ...props }: RootProps$8) => react_jsx_runtime.JSX.Element;
 };
 
+declare const Prose: {
+    Root: react.ForwardRefExoticComponent<Omit<_aeon_ui_react.ProseRootProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+};
+
+declare const Textarea: {
+    Root: react.ForwardRefExoticComponent<Omit<_aeon_ui_react.TextareaRootProps & react.RefAttributes<HTMLTextAreaElement>, "ref"> & {
+        variant?: "outline" | "ghost";
+    } & react.RefAttributes<HTMLTextAreaElement>>;
+};
+
+type Size = 'sm' | 'md';
+declare const SegmentGroup: {
+    Root: react.ForwardRefExoticComponent<Omit<_aeon_ui_react.SegmentGroupRootProps & react.RefAttributes<HTMLDivElement>, "ref"> & {
+        size?: Size;
+    } & react.RefAttributes<HTMLDivElement>>;
+    Item: react.ForwardRefExoticComponent<Omit<_aeon_ui_react.SegmentGroupItemProps & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+};
+
+declare const Clipboard: {
+    Root: react.ForwardRefExoticComponent<Omit<_aeon_ui_react.ClipboardRootProps & react.RefAttributes<HTMLDivElement>, "ref"> & react.RefAttributes<HTMLDivElement>>;
+    Trigger: react.ForwardRefExoticComponent<Omit<react.ButtonHTMLAttributes<HTMLButtonElement> & react.RefAttributes<HTMLButtonElement>, "ref"> & react.RefAttributes<HTMLButtonElement>>;
+    Indicator: react.ForwardRefExoticComponent<Omit<_aeon_ui_react.ClipboardIndicatorProps & react.RefAttributes<HTMLSpanElement>, "ref"> & react.RefAttributes<HTMLSpanElement>>;
+};
+
 declare const Progress: {
     Root: ({ className, ...props }: ComponentProps<typeof Progress$1.Root>) => react_jsx_runtime.JSX.Element;
     Track: ({ className, ...props }: ComponentProps<typeof Progress$1.Track>) => react_jsx_runtime.JSX.Element;
@@ -496,4 +520,4 @@ declare const ThemeSwitcher: {
     ThemeTrigger: ({ className, ...props }: ThemeTriggerProps) => react_jsx_runtime.JSX.Element;
 };
 
-export { Accordion, AppShell, Async, Avatar, Badge, Bar, Button, Checkbox, Combobox, Composer, Content, Conversation, Dialog, Entry, Field, FileUpload, Identity, ListRow, Menu, MetricStrip, Nav, Panel, PinInput, Popover, ProfileHeader, Progress, Prompt, RadioGroup, RangeSlider, Scroll, Select, Separator, Slider, StickyBar, Switch, Tabs, ThemeSwitcher, Thread, Toast, Tooltip };
+export { Accordion, AppShell, Async, Avatar, Badge, Bar, Button, Checkbox, Clipboard, Combobox, Composer, Content, Conversation, Dialog, Entry, Field, FileUpload, Identity, ListRow, Menu, MetricStrip, Nav, Panel, PinInput, Popover, ProfileHeader, Progress, Prompt, Prose, RadioGroup, RangeSlider, Scroll, SegmentGroup, Select, Separator, Slider, StickyBar, Switch, Tabs, Textarea, ThemeSwitcher, Thread, Toast, Tooltip };