aeon-ui-engine 1.5.1 → 1.8.0

package/CHANGELOG.md

@@ -1,5 +1,117 @@
 # Changelog
 
+## [1.8.0] - 2026-09-27
+
+### Added
+
+- **`Popover.Positioner` / `FloatingPositioner` `anchorRef` + `matchAnchorWidth`.** Position a surface against the region it belongs to instead of the small trigger pinned to its edge, so a wide panel lands where the eye already is rather than being clamped back from the viewport edge.
+- **Optional philosophy note:** [docs/ANALOGY.md](./docs/ANALOGY.md) — Aeon as metaphor for formless truth and sensory projection (not product doctrine). Linked from [PHILOSOPHY.md](./PHILOSOPHY.md) and the docs index.
+- `@aeon-ui/tree` — widget trees. A widget is immutable data describing one face
+  of a chart, interpreted into DOM with `data-aeon-scope|part|state`. Flutter's
+  Widget and Element layers only: no RenderObject (layout stays CSS), no
+  `StatefulWidget` (the chart is the only state).
+- `exclusiveActionWidget` — the shared face for "confirm, then await" regions
+  (`idle → confirming → busy → idle | failure`): pending label, disabled set,
+  failure copy and confirm slot are functions of the snapshot.
+- `uncoveredStates(states, project)` — totality as a test: every state the chart
+  names must appear on the tree projected for it.
+- `interpret(tree, hosts)` — element layer; hosts slot existing compounds
+  (`Prompt`, fields) into names the tree declares.
+- Vite aliases, optimizeDeps exclude and tsconfig paths include `@aeon-ui/tree`.
+
+## [1.7.7] - 2026-08-18
+
+### Added
+
+- **Three more primitives in the live section, chosen for chart complexity.** `Slider` is hierarchical — the snapshot reports `interaction.dragging`, so the chart lights the region *and* the leaf inside it while you drag, and an arrow key shows `SET_VALUE` writing context without leaving the state. `FileUpload` runs a real drag-and-drop lifecycle (`idle` / `dragging` / `rejected`), driveable by dragging a file or by sending the same events from buttons. `Toast` is the one chart that moves without you: `visible` carries a delayed `TIMEOUT` that retires it on the machine's own clock.
+- **`useSliderContext`** exported from `@aeon-ui/react`, so a slider's live machine state (including the nested `interaction` value) is readable from inside `Slider.Root` — matching `useAsyncContext` / `useFieldContext` / `useStickyBarContext`.
+
+### Fixed
+
+- **The live chart never highlighted a component's *initial* state.** A late SVG swap replaced the diagram after the highlight was painted, so the first snapshot silently went dark until you interacted. The explorer now repaints when the rendered chart changes.
+- **`valid` also lit up `invalid`.** Node matching compared id substrings, so any state whose name contained another's was highlighted too. Matching is now segment-aware, and a region's `[*]` marker no longer inherits its parent's highlight.
+- **Nested snapshot values are highlighted properly.** A dotted path such as `interaction.dragging` now lights every node on the path, since the ancestors are genuinely active.
+- **Live charts are readable.** The explorer box was short enough that parallel and nested diagrams auto-fit to ~30%; it now has room, and the slider's nested region lays out left-to-right.
+
+## [1.7.6] - 2026-08-18
+
+### Changed
+
+- **Hero video: resolved an apparent contradiction in the narration.** "Nothing else exists" (about the async machine) could read as conflicting with the later child-machine states (broadcasting, seen, mined). The closed-world line is now scoped — "that's this machine's entire world" — and the hierarchy scene opens with the bridge: "Need more states? Charts nest." Transcript re-aligned (61s).
+
+## [1.7.5] - 2026-08-18
+
+### Changed
+
+- **Hero video narration re-recorded for clarity.** "Statechart" is now fed to TTS as "state chart" so it isn't mispronounced (the on-screen subtitle keeps the correct spelling — `speak` overrides audio only, the same mechanism the closing URL already used). The parallel-regions explanation is rebuilt around three plain questions — "Has it been edited? Does it pass? Is it sending?" — and each chart lane now prints its question next to the region name, so the words and the diagram agree. Also clearer: "no in-between states" replaces "no half states", "your CSS targets that attribute" replaces "your styles key off it", and the child machine's middle state is spoken as "seen on the network" rather than a bare "seen". Transcript re-aligned (59s).
+
+## [1.7.4] - 2026-08-18
+
+### Changed
+
+- **Hero video intro now shows the pain, and the ending is de-branded.** The opening scene names the actual symptoms of boolean soup — a mystery spinner with no context, two buttons wired to the same job (`Retry` / `Reload`), and "state is a mess" — instead of an abstract truth count. The narration no longer says the word "dirty" (the state node still shows it, since that's the real machine state). The hierarchy scene presents the nested send flow as "a real example / wallet · send" without naming the product. Transcript re-aligned (57s).
+
+## [1.7.3] - 2026-08-18
+
+### Changed
+
+- **Hero video: plainer intro, glossed jargon, and a real hierarchical chart from a shipping product.** The intro now shows three plain `loading` / `empty` / `error` toggles with what each means in English, instead of prop-name jargon. The parallel-regions scene explains `dirty` outright ("dirty just means the user typed") and prints a plain-English gloss under the composite value. The machine catalog scene is replaced with the send flow from HandCash Desktop: the `sendPayment` chart (`editing → confirming → handoff`) with the `txLifecycle` child machine (`broadcasting → seenInMempool → mined`) nested inside `handoff` — the wallet surface and the breadcrumb (`handoff › broadcasting`) stay in lockstep with the chart. Also fixed a renderer bug where PIL ignored text alpha, so every text fade-in had been popping at full opacity (visible as floating state labels before their nodes appeared). Transcript re-aligned (55s).
+
+## [1.7.2] - 2026-08-18
+
+### Changed
+
+- **New hero video, built from scratch to teach statecharts — not one animated state.** Seven scenes: three booleans producing a screen with a spinner and an error at once; the async machine with every state named and every edge labelled with its event; an event with no matching edge blocked at the door; the field machine's three parallel regions all true at once beside the surface that projects them; `state → data-aeon-state → pixels`; and four components each running their own machine on their own clock. Real system typography (SF / SF Mono), a poster frame from the chart scene, faststart streaming, and re-aligned transcript cues (52s).
+
+## [1.7.1] - 2026-08-18
+
+### Changed
+
+- **Hero video now shows the actual thesis.** Previously the statechart node swept on its own float while the phone face animated separately, so the chart and the screen never agreed. The centrepiece is now one coupled demo: the component face and the highlighted chart node are the same state, driven by a single step timeline, with the causing event (`FETCH`, `RESOLVE`, `REJECT`, `REFRESH`) labelled on the transition edge — the same idea as the live section. The closing card points at "See it live" instead of the removed builder; transcript cues re-aligned.
+
+## [1.7.0] - 2026-08-18
+
+### Added
+
+- **Live section: real components beside the chart that tracks them.** Async, Button, Field, and Dialog run their shipped machines; the Mermaid chart highlights the state the component is actually in and names the event that caused the move. Field reports all three regions at once, because a field has no single state.
+- Machine-accurate diagrams for `buttonLifecycleMachine`, `dialogMachine`, and `fieldMachine`; the async chart now shows its `REFRESH` and re-fetch edges. `aeonDiagrams.test.ts` fails if a chart misses a machine state or invents one.
+
+### Fixed
+
+- **A controlled `Dialog`, `Popover`, or `Menu` could never be opened by its own trigger.** `onOpenChange` reported the resolved prop, so an owner holding `open` never heard the machine's intent — the trigger, escape key, and outside click were all dead. Each root now reports the machine's own transition (and no longer fires on mount).
+
+### Removed
+
+- **The generative app builder is gone** — sandbox, chart→schema compiler, live composer, model client, cost meter, and the `/api/aeon-generate` and `/api/aeon-scrape` endpoints, plus the OpenRouter proxy plugin and its env keys (~6,000 lines). Landing nav, hero, and header CTAs point at the live section.
+- The static "Determinism" diagram section, now that the live charts replace it. `expandActiveStates` lost its builder-specific token aliases.
+
+## [1.6.1] - 2026-08-18
+
+### Changed
+
+- **Builder previews read like designs, not state dumps.** The first screen now leads with the site's own hero headline and description (scraped, never invented); other screens are titled by their state once. Actions promote one primary button and group the rest instead of stacking equal buttons. The app bar no longer repeats the state label the dock already shows.
+- **Device selector is back** — phone / tablet / desktop toggle above the preview, with the desktop frame showing the scraped host in its address bar.
+
+## [1.6.0] - 2026-08-18
+
+### Added
+
+- **Redesign any site from its URL** — paste a domain into the builder and `/api/aeon-scrape` reads the page for its name, description, nav, actions, logo, and `theme-color`. The brand becomes chrome (logo in the app bar, accent palette scoped to the preview) and the page content becomes the prompt. Private and non-HTTP hosts are refused.
+- `builder/projectFaces.ts` — generic chart projection: states become screens, transitions become actions, `collect` demos add a field, `async` demos add an async region.
+- Demo tests now run in CI (`pnpm test`), covering projection, scraping, palette derivation, and a server render of the builder output.
+
+### Changed
+
+- **App builder rebuilt around one input.** Prompt or URL, Build, preview. The starter chips, engine bar, cost meter, inspector tabs, device picker, and build loader are gone.
+- **The model returns a chart and nothing else; the UI is projected from it.** Previously ~1,900 lines of prompt keyword matching decided that "match" meant a dating app, "faq" meant an accordion, and "pong" meant paddles, then filled screens with seeded catalogs, listings, and test stimuli. All of it is deleted, along with the preset app schemas it produced.
+- Empty nav tabs are dropped instead of being filled with placeholder screens, and the offline fallback chart is deliberately shapeless rather than a product guess.
+
+## [1.5.2] - 2026-08-18
+
+### Changed
+
+- **Landing page trimmed to essentials** — removed the pillars grid, the numbered setup box, and the full rule-file dump; the Cursor section is now one command plus a copy button. Hero shows a single install line, the why section keeps only the same-prompt contrast, specs show one chart, and the FAQ is four questions.
+
 ## [1.5.1] - 2026-08-18
 
 ### Added

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "aeon-ui-engine",
-  "version": "1.5.1",
+  "version": "1.8.0",
   "private": false,
   "type": "module",
   "bin": {
@@ -34,7 +34,7 @@
     "dev": "pnpm --filter @aeon-ui/demo dev",
     "examples": "pnpm --filter @aeon-ui/examples dev",
     "typecheck": "pnpm -r run typecheck",
-    "test": "pnpm run test:headless",
+    "test": "pnpm run test:headless && pnpm --filter @aeon-ui/demo run test",
     "test:headless": "pnpm run build:headless && pnpm --filter @aeon-ui/core --filter @aeon-ui/primitives --filter @aeon-ui/react run test",
     "changeset": "changeset",
     "version-packages": "changeset version",

package/packages/cli/node_modules/.bin/vitest

@@ -10,9 +10,9 @@ case `uname` in
 esac
 
 if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/Users/brandoncryderman/AeonUI/node_modules/.pnpm/vitest@4.1.8_@types+node@22.19.19_jsdom@29.1.1_vite@8.0.16_@types+node@22.19.19_esbuild@0.28.0_jiti@2.7.0_tsx@4.22.3_/node_modules/vitest/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/vitest@4.1.8_@types+node@22.19.19_jsdom@29.1.1_vite@8.0.16_@types+node@22.19.19_esbuild@0.28.0_jiti@2.7.0_tsx@4.22.3_/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/Users/brandoncryderman/AeonUI/node_modules/.pnpm/vitest@4.1.8_@types+node@22.19.19_jsdom@29.1.1_vite@8.0.16_@types+node@22.19.19_esbuild@0.27.7_jiti@2.7.0_tsx@4.22.3_/node_modules/vitest/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/vitest@4.1.8_@types+node@22.19.19_jsdom@29.1.1_vite@8.0.16_@types+node@22.19.19_esbuild@0.27.7_jiti@2.7.0_tsx@4.22.3_/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/node_modules"
 else
-  export NODE_PATH="/Users/brandoncryderman/AeonUI/node_modules/.pnpm/vitest@4.1.8_@types+node@22.19.19_jsdom@29.1.1_vite@8.0.16_@types+node@22.19.19_esbuild@0.28.0_jiti@2.7.0_tsx@4.22.3_/node_modules/vitest/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/vitest@4.1.8_@types+node@22.19.19_jsdom@29.1.1_vite@8.0.16_@types+node@22.19.19_esbuild@0.28.0_jiti@2.7.0_tsx@4.22.3_/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/node_modules:$NODE_PATH"
+  export NODE_PATH="/Users/brandoncryderman/AeonUI/node_modules/.pnpm/vitest@4.1.8_@types+node@22.19.19_jsdom@29.1.1_vite@8.0.16_@types+node@22.19.19_esbuild@0.27.7_jiti@2.7.0_tsx@4.22.3_/node_modules/vitest/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/vitest@4.1.8_@types+node@22.19.19_jsdom@29.1.1_vite@8.0.16_@types+node@22.19.19_esbuild@0.27.7_jiti@2.7.0_tsx@4.22.3_/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/node_modules:$NODE_PATH"
 fi
 if [ -x "$basedir/node" ]; then
   exec "$basedir/node"  "$basedir/../vitest/vitest.mjs" "$@"

package/packages/core/node_modules/.bin/vitest

@@ -10,9 +10,9 @@ case `uname` in
 esac
 
 if [ -z "$NODE_PATH" ]; then
-  export NODE_PATH="/Users/brandoncryderman/AeonUI/node_modules/.pnpm/vitest@4.1.8_@types+node@22.19.19_jsdom@29.1.1_vite@8.0.16_@types+node@22.19.19_esbuild@0.27.7_jiti@2.7.0_tsx@4.22.3_/node_modules/vitest/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/vitest@4.1.8_@types+node@22.19.19_jsdom@29.1.1_vite@8.0.16_@types+node@22.19.19_esbuild@0.27.7_jiti@2.7.0_tsx@4.22.3_/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/node_modules"
+  export NODE_PATH="/Users/brandoncryderman/AeonUI/node_modules/.pnpm/vitest@4.1.8_@types+node@22.19.19_jsdom@29.1.1_vite@8.0.16_@types+node@22.19.19_esbuild@0.28.0_jiti@2.7.0_tsx@4.22.3_/node_modules/vitest/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/vitest@4.1.8_@types+node@22.19.19_jsdom@29.1.1_vite@8.0.16_@types+node@22.19.19_esbuild@0.28.0_jiti@2.7.0_tsx@4.22.3_/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/node_modules"
 else
-  export NODE_PATH="/Users/brandoncryderman/AeonUI/node_modules/.pnpm/vitest@4.1.8_@types+node@22.19.19_jsdom@29.1.1_vite@8.0.16_@types+node@22.19.19_esbuild@0.27.7_jiti@2.7.0_tsx@4.22.3_/node_modules/vitest/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/vitest@4.1.8_@types+node@22.19.19_jsdom@29.1.1_vite@8.0.16_@types+node@22.19.19_esbuild@0.27.7_jiti@2.7.0_tsx@4.22.3_/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/node_modules:$NODE_PATH"
+  export NODE_PATH="/Users/brandoncryderman/AeonUI/node_modules/.pnpm/vitest@4.1.8_@types+node@22.19.19_jsdom@29.1.1_vite@8.0.16_@types+node@22.19.19_esbuild@0.28.0_jiti@2.7.0_tsx@4.22.3_/node_modules/vitest/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/vitest@4.1.8_@types+node@22.19.19_jsdom@29.1.1_vite@8.0.16_@types+node@22.19.19_esbuild@0.28.0_jiti@2.7.0_tsx@4.22.3_/node_modules:/Users/brandoncryderman/AeonUI/node_modules/.pnpm/node_modules:$NODE_PATH"
 fi
 if [ -x "$basedir/node" ]; then
   exec "$basedir/node"  "$basedir/../vitest/vitest.mjs" "$@"

package/packages/core/node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/results.json

@@ -1 +1 @@
-{"version":"3.2.4","results":[[":src/machine.test.ts",{"duration":7.0908339999999725,"failed":false}],[":src/theme.test.ts",{"duration":3.866333999999995,"failed":false}],[":../../apps/demo/src/aeonSchemaCompiler.test.ts",{"duration":7.737041999999974,"failed":false}],[":src/identicon.test.ts",{"duration":9.875333000000012,"failed":false}]]}
+{"version":"3.2.4","results":[[":src/machine.test.ts",{"duration":3.2387080000000026,"failed":false}],[":src/theme.test.ts",{"duration":3.8104999999999905,"failed":false}],[":../../apps/demo/src/aeonSchemaCompiler.test.ts",{"duration":7.737041999999974,"failed":false}],[":src/identicon.test.ts",{"duration":5.902916000000005,"failed":false}]]}

package/packages/panda/styled-system/styles.css

@@ -4475,10 +4475,6 @@
     flex: 1 1 0%;
 }
 
-  .columns_4 {
-    columns: 4;
-}
-
   .stk-w_2 {
     stroke-width: 2;
 }

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":13.601374999999962,"failed":false}],[":src/__tests__/app-nav.test.ts",{"duration":9.962167000000022,"failed":false}],[":src/__tests__/file-upload.test.ts",{"duration":13.053917000000013,"failed":false}],[":src/__tests__/range-slider.test.ts",{"duration":13.141374999999982,"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":13.199792000000002,"failed":false}],[":src/__tests__/app-nav.test.ts",{"duration":9.69079099999999,"failed":false}],[":src/__tests__/file-upload.test.ts",{"duration":7.872375000000005,"failed":false}],[":src/__tests__/range-slider.test.ts",{"duration":8.245833000000005,"failed":false}]]}

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

@@ -194,6 +194,30 @@ declare const RadioGroup: {
     ItemLabel: react.ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & react.RefAttributes<HTMLSpanElement>>;
 };
 
+/** Bridge executable statecharts to React — UI = f(snapshot). */
+declare function useAeonMachine<M extends AnyStateMachine>(machine: M, options?: Parameters<typeof useMachine<M>>[1]): [xstate.StateFrom<M>, (event: xstate.EventFromLogic<M>) => void, xstate.Actor<M>];
+
+interface SliderContextValue {
+    value: number;
+    min: number;
+    max: number;
+    step: number;
+    disabled: boolean;
+    dragging: boolean;
+    /** Nested region value from the machine: `interaction.idle` | `interaction.dragging`. */
+    interaction: 'idle' | 'dragging';
+    send: ReturnType<typeof useAeonMachine<typeof sliderMachine>>[1];
+    onValueChange?: (value: number) => void;
+    /** Snap, store and report a user-intended value. */
+    commit: (value: number) => void;
+    setValueFromClientX: (clientX: number) => void;
+    trackRef: React.RefObject<HTMLDivElement | null>;
+}
+/**
+ * Read the slider's live machine state from inside `Slider.Root`.
+ * `interaction` is the nested region value — the same thing the snapshot holds.
+ */
+declare function useSliderContext(): SliderContextValue;
 interface SliderRootProps {
     value?: number;
     defaultValue?: number;
@@ -237,9 +261,6 @@ declare const RangeSlider: {
     ValueText: react.ForwardRefExoticComponent<HTMLAttributes<HTMLSpanElement> & react.RefAttributes<HTMLSpanElement>>;
 };
 
-/** Bridge executable statecharts to React — UI = f(snapshot). */
-declare function useAeonMachine<M extends AnyStateMachine>(machine: M, options?: Parameters<typeof useMachine<M>>[1]): [xstate.StateFrom<M>, (event: xstate.EventFromLogic<M>) => void, xstate.Actor<M>];
-
 interface FileUploadContextValue {
     phase: 'idle' | 'dragging' | 'rejected';
     accept: string;
@@ -534,6 +555,10 @@ interface PopoverPositionerProps extends HTMLAttributes<HTMLDivElement> {
     /** Mount panel in document.body (default true). */
     portalled?: boolean;
     placement?: AnchorPlacement;
+    /** Align to this region rather than the trigger. See `FloatingPositioner`. */
+    anchorRef?: React.RefObject<HTMLElement | null>;
+    /** Size the panel to the anchor, so it spans the region it belongs to. */
+    matchAnchorWidth?: boolean;
     /** Gap between trigger and panel (default 4). */
     gutter?: number;
     /** Stack level for the portalled surface (default 50). */
@@ -1186,4 +1211,4 @@ declare const Slot: react.ForwardRefExoticComponent<HTMLAttributes<HTMLElement>
     children?: ReactNode;
 } & react.RefAttributes<HTMLElement>>;
 
-export { Accordion, type AccordionItemContentProps, type AccordionItemProps, type AccordionItemTriggerProps, type AccordionRootProps, AppNav, type AppNavBreadcrumbProps, type AppNavRootProps, type AppNavSectionProps, AppShell, type AppShellRootProps, Async, AsyncActions, AsyncProvider, AsyncReadout, AsyncRoot, AsyncTrack, Avatar, type AvatarRootProps, type AvatarStatus, Bar, type BarRootProps, Button, type ButtonRootProps, type ButtonStatus, Checkbox, type CheckboxRootProps, Combobox, type ComboboxItemProps, type ComboboxRootProps, Composer, type ComposerRootProps, type ComposerState, Content, type ContentRootProps, Conversation, type ConversationItemProps, type ConversationItemState, type ConversationRootProps, Dialog, type DialogPortalProps, type DialogRootProps, Entry, type EntryListProps, type EntryRootProps, type EntryState, Field, type FieldControlProps, type FieldRootProps, type FieldTextareaProps, FileUpload, type FileUploadRootProps, Identity, type IdentityRootProps, ListRow, type ListRowRootProps, Menu, type MenuItemProps, type MenuPositionerProps, type MenuRootProps, MetricStrip, type MetricStripRootProps, Nav, type NavItemProps, type NavRootProps, Panel, type PanelContentProps, type PanelGroupProps, type PanelLabelProps, type PanelRootProps, type PanelTriggerProps, PinInput, type PinInputInputProps, type PinInputRootProps, Popover, type PopoverPositionerProps, type PopoverRootProps, type PresenceState, ProfileHeader, type ProfileHeaderRootProps, Progress, type ProgressRootProps, Prompt, type PromptRootProps, type PromptStatus, RadioGroup, type RadioGroupItemProps, type RadioGroupRootProps, RangeSlider, type RangeSliderRootProps, type RangeSliderThumbProps, Scroll, type ScrollRootProps, type ScrollViewportProps, Select, type SelectContentProps, type SelectItemProps, type SelectPositionerProps, type SelectRootProps, Separator, type SeparatorRootProps, Slider, type SliderRootProps, Slot, StatusBanner, type StatusBannerRootProps, type StatusBannerTone, StickyBar, type StickyBarRootProps, Switch, type SwitchRootProps, Tabs, type TabsContentProps, type TabsRootProps, type TabsTriggerProps, ThemeSwitcher, type ThemeSwitcherModeBtnProps, type ThemeSwitcherModesProps, type ThemeSwitcherRootProps, type ThemeSwitcherThemeSelectProps, Thread, type ThreadItemFace, type ThreadItemProps, type ThreadMessageState, type ThreadRootProps, Toast, ToastItem, type ToastPlacement, type ToastProviderProps, type ToastPublishOptions, type ToastRecord, type ToastRootProps, type ToastStore, type ToastViewportProps, Tooltip, type TooltipPositionerProps, type TooltipRootProps, asyncStatusToContentState, useAeonMachine, useAppNav, useAppNavMachine, useAppShellContext, useAsyncContext, useContentContext, useFieldContext, useFileUploadCtx as useFileUpload, useFitText, useLayoutMode, useScrollContext, useScrollState, useStickyBarContext, useToast, useToastStore };
+export { Accordion, type AccordionItemContentProps, type AccordionItemProps, type AccordionItemTriggerProps, type AccordionRootProps, AppNav, type AppNavBreadcrumbProps, type AppNavRootProps, type AppNavSectionProps, AppShell, type AppShellRootProps, Async, AsyncActions, AsyncProvider, AsyncReadout, AsyncRoot, AsyncTrack, Avatar, type AvatarRootProps, type AvatarStatus, Bar, type BarRootProps, Button, type ButtonRootProps, type ButtonStatus, Checkbox, type CheckboxRootProps, Combobox, type ComboboxItemProps, type ComboboxRootProps, Composer, type ComposerRootProps, type ComposerState, Content, type ContentRootProps, Conversation, type ConversationItemProps, type ConversationItemState, type ConversationRootProps, Dialog, type DialogPortalProps, type DialogRootProps, Entry, type EntryListProps, type EntryRootProps, type EntryState, Field, type FieldControlProps, type FieldRootProps, type FieldTextareaProps, FileUpload, type FileUploadRootProps, Identity, type IdentityRootProps, ListRow, type ListRowRootProps, Menu, type MenuItemProps, type MenuPositionerProps, type MenuRootProps, MetricStrip, type MetricStripRootProps, Nav, type NavItemProps, type NavRootProps, Panel, type PanelContentProps, type PanelGroupProps, type PanelLabelProps, type PanelRootProps, type PanelTriggerProps, PinInput, type PinInputInputProps, type PinInputRootProps, Popover, type PopoverPositionerProps, type PopoverRootProps, type PresenceState, ProfileHeader, type ProfileHeaderRootProps, Progress, type ProgressRootProps, Prompt, type PromptRootProps, type PromptStatus, RadioGroup, type RadioGroupItemProps, type RadioGroupRootProps, RangeSlider, type RangeSliderRootProps, type RangeSliderThumbProps, Scroll, type ScrollRootProps, type ScrollViewportProps, Select, type SelectContentProps, type SelectItemProps, type SelectPositionerProps, type SelectRootProps, Separator, type SeparatorRootProps, Slider, type SliderContextValue, type SliderRootProps, Slot, StatusBanner, type StatusBannerRootProps, type StatusBannerTone, StickyBar, type StickyBarRootProps, Switch, type SwitchRootProps, Tabs, type TabsContentProps, type TabsRootProps, type TabsTriggerProps, ThemeSwitcher, type ThemeSwitcherModeBtnProps, type ThemeSwitcherModesProps, type ThemeSwitcherRootProps, type ThemeSwitcherThemeSelectProps, Thread, type ThreadItemFace, type ThreadItemProps, type ThreadMessageState, type ThreadRootProps, Toast, ToastItem, type ToastPlacement, type ToastProviderProps, type ToastPublishOptions, type ToastRecord, type ToastRootProps, type ToastStore, type ToastViewportProps, Tooltip, type TooltipPositionerProps, type TooltipRootProps, asyncStatusToContentState, useAeonMachine, useAppNav, useAppNavMachine, useAppShellContext, useAsyncContext, useContentContext, useFieldContext, useFileUploadCtx as useFileUpload, useFitText, useLayoutMode, useScrollContext, useScrollState, useSliderContext, useStickyBarContext, useToast, useToastStore };

package/packages/react/dist/index.js

@@ -519,11 +519,15 @@ var Root4 = forwardRef5(function DialogRoot({ open, defaultOpen = false, onOpenC
   const [snapshot, send] = useAeonMachine(dialogMachine, {
     input: { open: defaultOpen }
   });
-  const resolvedOpen = open ?? snapshot.context.open;
+  const machineOpen = snapshot.context.open;
+  const resolvedOpen = open ?? machineOpen;
   const contentRef = useRef(null);
+  const reportedOpen = useRef(machineOpen);
   useEffect6(() => {
-    onOpenChange?.(resolvedOpen);
-  }, [resolvedOpen, onOpenChange]);
+    if (reportedOpen.current === machineOpen) return;
+    reportedOpen.current = machineOpen;
+    onOpenChange?.(machineOpen);
+  }, [machineOpen, onOpenChange]);
   useEffect6(() => {
     if (open !== void 0) {
       send({ type: "SET_OPEN", open });
@@ -1247,7 +1251,7 @@ import {
 } from "react";
 import { jsx as jsx11 } from "react/jsx-runtime";
 var SliderCtx = createContext8(null);
-function useSliderCtx() {
+function useSliderContext() {
   const ctx = useContext8(SliderCtx);
   if (!ctx) throw new Error("Slider parts must be used within Slider.Root");
   return ctx;
@@ -1280,12 +1284,24 @@ var Root11 = forwardRef12(function SliderRoot({
   });
   const resolvedValue = value ?? snapshot.context.value;
   const dragging = snapshot.matches({ interaction: "dragging" });
-  useEffect9(() => {
-    onValueChange?.(resolvedValue);
-  }, [resolvedValue, onValueChange]);
   useEffect9(() => {
     if (value !== void 0) send({ type: "SET_VALUE", value });
   }, [value, send]);
+  useEffect9(() => {
+    send({ type: "SET_BOUNDS", min, max, step });
+  }, [min, max, step, send]);
+  useEffect9(() => {
+    send({ type: "SET_DISABLED", disabled });
+  }, [disabled, send]);
+  const commit = useCallback2(
+    (next) => {
+      if (disabled) return;
+      const snapped = snapSliderValue(next, min, max, step);
+      send({ type: "SET_VALUE", value: snapped });
+      onValueChange?.(snapped);
+    },
+    [disabled, min, max, step, send, onValueChange]
+  );
   const setValueFromClientX = useCallback2(
     (clientX) => {
       const track = trackRef.current;
@@ -1293,11 +1309,9 @@ var Root11 = forwardRef12(function SliderRoot({
       const rect = track.getBoundingClientRect();
       if (rect.width <= 0) return;
       const ratio = Math.min(1, Math.max(0, (clientX - rect.left) / rect.width));
-      const next = snapSliderValue(min + ratio * (max - min), min, max, step);
-      send({ type: "SET_VALUE", value: next });
-      if (value === void 0) onValueChange?.(next);
+      commit(min + ratio * (max - min));
     },
-    [disabled, min, max, step, send, value, onValueChange]
+    [commit, disabled, min, max]
   );
   useEffect9(() => {
     if (!dragging) return;
@@ -1318,12 +1332,25 @@ var Root11 = forwardRef12(function SliderRoot({
       step,
       disabled,
       dragging,
+      interaction: dragging ? "dragging" : "idle",
       send,
       onValueChange,
+      commit,
       setValueFromClientX,
       trackRef
     }),
-    [resolvedValue, min, max, step, disabled, dragging, send, onValueChange, setValueFromClientX]
+    [
+      resolvedValue,
+      min,
+      max,
+      step,
+      disabled,
+      dragging,
+      send,
+      onValueChange,
+      commit,
+      setValueFromClientX
+    ]
   );
   return /* @__PURE__ */ jsx11(SliderCtx.Provider, { value: ctx, children: /* @__PURE__ */ jsx11(
     "div",
@@ -1342,7 +1369,7 @@ var Root11 = forwardRef12(function SliderRoot({
   ) });
 });
 var Track2 = forwardRef12(function SliderTrack({ onPointerDown, ...rest }, ref) {
-  const { disabled, send, setValueFromClientX, trackRef } = useSliderCtx();
+  const { disabled, send, setValueFromClientX, trackRef } = useSliderContext();
   return /* @__PURE__ */ jsx11(
     "div",
     {
@@ -1368,7 +1395,7 @@ var Track2 = forwardRef12(function SliderTrack({ onPointerDown, ...rest }, ref)
   );
 });
 var Range2 = forwardRef12(function SliderRange({ style, ...rest }, ref) {
-  const { value, min, max } = useSliderCtx();
+  const { value, min, max } = useSliderContext();
   return /* @__PURE__ */ jsx11(
     "div",
     {
@@ -1380,7 +1407,7 @@ var Range2 = forwardRef12(function SliderRange({ style, ...rest }, ref) {
   );
 });
 var Thumb2 = forwardRef12(function SliderThumb({ onKeyDown, onPointerDown, style, ...rest }, ref) {
-  const { value, min, max, step, disabled, dragging, send, setValueFromClientX } = useSliderCtx();
+  const { value, min, max, step, disabled, dragging, send, commit, setValueFromClientX } = useSliderContext();
   return /* @__PURE__ */ jsx11(
     "span",
     {
@@ -1408,19 +1435,27 @@ var Thumb2 = forwardRef12(function SliderThumb({ onKeyDown, onPointerDown, style
             if (disabled || e.defaultPrevented) return;
             if (e.key === "ArrowRight" || e.key === "ArrowUp") {
               e.preventDefault();
-              send({ type: "STEP", delta: step });
+              commit(value + step);
             }
             if (e.key === "ArrowLeft" || e.key === "ArrowDown") {
               e.preventDefault();
-              send({ type: "STEP", delta: -step });
+              commit(value - step);
+            }
+            if (e.key === "PageUp") {
+              e.preventDefault();
+              commit(value + (max - min) / 10);
+            }
+            if (e.key === "PageDown") {
+              e.preventDefault();
+              commit(value - (max - min) / 10);
             }
             if (e.key === "Home") {
               e.preventDefault();
-              send({ type: "HOME" });
+              commit(min);
             }
             if (e.key === "End") {
               e.preventDefault();
-              send({ type: "END" });
+              commit(max);
             }
           }
         },
@@ -1430,7 +1465,7 @@ var Thumb2 = forwardRef12(function SliderThumb({ onKeyDown, onPointerDown, style
   );
 });
 var ValueText = forwardRef12(function SliderValueText(props, ref) {
-  const { value } = useSliderCtx();
+  const { value } = useSliderContext();
   return /* @__PURE__ */ jsx11("span", { ref, ...mergeProps(partOnlyAttrs3(sliderAnatomy.valueText), props), children: props.children ?? value });
 });
 var Slider = { Root: Root11, Track: Track2, Range: Range2, Thumb: Thumb2, ValueText };
@@ -2712,6 +2747,7 @@ var FloatingPositioner = forwardRef23(
     part,
     triggerRef,
     positionerRef,
+    anchorRef,
     portalled = true,
     placement = "bottom-start",
     matchAnchorWidth = false,
@@ -2722,7 +2758,7 @@ var FloatingPositioner = forwardRef23(
     ...rest
   }, ref) {
     const mounted = usePortalledMount();
-    useAnchorPosition(triggerRef, positionerRef, open && portalled, placement, {
+    useAnchorPosition(anchorRef ?? triggerRef, positionerRef, open && portalled, placement, {
       matchWidth: matchAnchorWidth,
       gutter,
       zIndex
@@ -3401,15 +3437,19 @@ var Root20 = forwardRef26(function PopoverRoot({ open, defaultOpen = false, onOp
   const [snapshot, send] = useAeonMachine(popoverMachine3, {
     input: { open: defaultOpen }
   });
-  const resolvedOpen = open ?? snapshot.context.open;
+  const machineOpen = snapshot.context.open;
+  const resolvedOpen = open ?? machineOpen;
   const rootRef = useRef9(null);
   const triggerRef = useRef9(null);
   const positionerRef = useRef9(null);
   const triggerId = useId5();
   const contentId = useId5();
+  const reportedOpen = useRef9(machineOpen);
   useEffect16(() => {
-    onOpenChange?.(resolvedOpen);
-  }, [resolvedOpen, onOpenChange]);
+    if (reportedOpen.current === machineOpen) return;
+    reportedOpen.current = machineOpen;
+    onOpenChange?.(machineOpen);
+  }, [machineOpen, onOpenChange]);
   useEffect16(() => {
     if (open !== void 0) send({ type: "SET_OPEN", open });
   }, [open, send]);
@@ -3465,7 +3505,17 @@ var Trigger4 = forwardRef26(function PopoverTrigger({ onClick, ...rest }, ref) {
     }
   );
 });
-var Positioner3 = forwardRef26(function PopoverPositioner({ portalled = true, placement = "bottom-start", gutter, zIndex, children, className, ...rest }, ref) {
+var Positioner3 = forwardRef26(function PopoverPositioner({
+  portalled = true,
+  placement = "bottom-start",
+  anchorRef,
+  matchAnchorWidth = false,
+  gutter,
+  zIndex,
+  children,
+  className,
+  ...rest
+}, ref) {
   const { open, triggerRef, positionerRef } = usePopoverCtx();
   return /* @__PURE__ */ jsx26(
     FloatingPositioner,
@@ -3476,6 +3526,8 @@ var Positioner3 = forwardRef26(function PopoverPositioner({ portalled = true, pl
       part: popoverAnatomy.positioner,
       triggerRef,
       positionerRef,
+      anchorRef,
+      matchAnchorWidth,
       portalled,
       placement,
       gutter,
@@ -3562,15 +3614,19 @@ function useMenuCtx() {
 }
 var Root21 = forwardRef27(function MenuRoot({ open, defaultOpen = false, onOpenChange, children, className, ...rest }, ref) {
   const [snapshot, send] = useAeonMachine(popoverMachine4, { input: { open: defaultOpen } });
-  const resolvedOpen = open ?? snapshot.context.open;
+  const machineOpen = snapshot.context.open;
+  const resolvedOpen = open ?? machineOpen;
   const rootRef = useRef10(null);
   const triggerRef = useRef10(null);
   const positionerRef = useRef10(null);
   const triggerId = useId6();
   const menuId = useId6();
+  const reportedOpen = useRef10(machineOpen);
   useEffect17(() => {
-    onOpenChange?.(resolvedOpen);
-  }, [resolvedOpen, onOpenChange]);
+    if (reportedOpen.current === machineOpen) return;
+    reportedOpen.current = machineOpen;
+    onOpenChange?.(machineOpen);
+  }, [machineOpen, onOpenChange]);
   useEffect17(() => {
     if (open !== void 0) send({ type: "SET_OPEN", open });
   }, [open, send]);
@@ -5932,6 +5988,7 @@ export {
   useLayoutMode,
   useScrollContext,
   useScrollState,
+  useSliderContext,
   useStickyBarContext,
   useToast,
   useToastStore

package/packages/react/node_modules/.vite/vitest/da39a3ee5e6b4b0d3255bfef95601890afd80709/results.json

@@ -1 +1 @@
-{"version":"3.2.4","results":[[":src/select/select.test.tsx",{"duration":374.59737499999983,"failed":false}],[":src/dialog/dialog.test.tsx",{"duration":302.22662500000024,"failed":false}],[":src/avatar/avatar.test.tsx",{"duration":222.467666,"failed":false}],[":src/tooltip/tooltip.test.tsx",{"duration":394.93274999999994,"failed":false}],[":src/toast/toast.test.tsx",{"duration":290.9687079999999,"failed":false}]]}
+{"version":"3.2.4","results":[[":src/select/select.test.tsx",{"duration":196.07670899999994,"failed":false}],[":src/dialog/dialog.test.tsx",{"duration":181.65270800000008,"failed":false}],[":src/avatar/avatar.test.tsx",{"duration":117.92833299999984,"failed":false}],[":src/tooltip/tooltip.test.tsx",{"duration":210.20837500000016,"failed":false}],[":src/toast/toast.test.tsx",{"duration":134.57233399999996,"failed":false}]]}

package/packages/react/src/dialog/dialog.test.tsx

@@ -1,5 +1,6 @@
 import { render, screen } from '@testing-library/react'
 import userEvent from '@testing-library/user-event'
+import { useState } from 'react'
 import { describe, expect, it, vi } from 'vitest'
 import { Dialog } from '../dialog/index.js'
 
@@ -47,4 +48,30 @@ describe('Dialog', () => {
     unmount()
     expect(document.body.style.overflow).not.toBe('hidden')
   })
+
+  it('reports the trigger to a controlled owner', async () => {
+    const user = userEvent.setup()
+
+    function Controlled() {
+      const [open, setOpen] = useState(false)
+      return (
+        <Dialog.Root open={open} onOpenChange={setOpen}>
+          <Dialog.Trigger>Open</Dialog.Trigger>
+          <Dialog.Portal portalled={false}>
+            <Dialog.Content>
+              <Dialog.Title>Title</Dialog.Title>
+              <Dialog.CloseTrigger>Close</Dialog.CloseTrigger>
+            </Dialog.Content>
+          </Dialog.Portal>
+        </Dialog.Root>
+      )
+    }
+
+    render(<Controlled />)
+    await user.click(screen.getByRole('button', { name: 'Open' }))
+    expect(screen.getByRole('dialog')).toBeInTheDocument()
+
+    await user.click(screen.getByRole('button', { name: 'Close dialog' }))
+    expect(screen.queryByRole('dialog')).not.toBeInTheDocument()
+  })
 })

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

@@ -52,12 +52,20 @@ const Root = forwardRef<HTMLDivElement, DialogRootProps>(function DialogRoot(
     input: { open: defaultOpen },
   })
 
-  const resolvedOpen = open ?? snapshot.context.open
+  const machineOpen = snapshot.context.open
+  const resolvedOpen = open ?? machineOpen
   const contentRef = useRef<HTMLDivElement>(null)
 
+  /**
+   * Report the machine's intent, not the resolved value: a controlled owner
+   * holding `open` would otherwise never hear about its own trigger or escape.
+   */
+  const reportedOpen = useRef(machineOpen)
   useEffect(() => {
-    onOpenChange?.(resolvedOpen)
-  }, [resolvedOpen, onOpenChange])
+    if (reportedOpen.current === machineOpen) return
+    reportedOpen.current = machineOpen
+    onOpenChange?.(machineOpen)
+  }, [machineOpen, onOpenChange])
 
   useEffect(() => {
     if (open !== undefined) {

package/packages/react/src/floating/FloatingPositioner.tsx

@@ -10,6 +10,15 @@ export interface FloatingPositionerProps extends HTMLAttributes<HTMLDivElement>
   part: string
   triggerRef: RefObject<HTMLElement | null>
   positionerRef: RefObject<HTMLDivElement | null>
+  /**
+   * Position against this element instead of the trigger.
+   *
+   * A trigger is often a small icon button pinned to one edge of a much larger
+   * region. Aligning to the button then throws a wide surface off-screen, and
+   * clamping only slides it back to the viewport edge. Anchoring to the region
+   * the surface belongs to puts it where the eye already is.
+   */
+  anchorRef?: RefObject<HTMLElement | null>
   portalled?: boolean
   placement?: AnchorPlacement
   matchAnchorWidth?: boolean
@@ -28,6 +37,7 @@ export const FloatingPositioner = forwardRef<HTMLDivElement, FloatingPositionerP
       part,
       triggerRef,
       positionerRef,
+      anchorRef,
       portalled = true,
       placement = 'bottom-start',
       matchAnchorWidth = false,
@@ -40,7 +50,7 @@ export const FloatingPositioner = forwardRef<HTMLDivElement, FloatingPositionerP
     ref,
   ) {
     const mounted = usePortalledMount()
-    useAnchorPosition(triggerRef, positionerRef, open && portalled, placement, {
+    useAnchorPosition(anchorRef ?? triggerRef, positionerRef, open && portalled, placement, {
       matchWidth: matchAnchorWidth,
       gutter,
       zIndex,