aeon-ui-engine 1.4.0 → 1.5.1

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

@@ -25,6 +25,8 @@ interface SliderContextValue {
   dragging: boolean
   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>
 }
@@ -83,14 +85,33 @@ const Root = forwardRef<HTMLDivElement, SliderRootProps>(function SliderRoot(
   const resolvedValue = value ?? snapshot.context.value
   const dragging = snapshot.matches({ interaction: 'dragging' })
 
-  useEffect(() => {
-    onValueChange?.(resolvedValue)
-  }, [resolvedValue, onValueChange])
-
   useEffect(() => {
     if (value !== undefined) send({ type: 'SET_VALUE', value })
   }, [value, send])
 
+  useEffect(() => {
+    send({ type: 'SET_BOUNDS', min, max, step })
+  }, [min, max, step, send])
+
+  useEffect(() => {
+    send({ type: 'SET_DISABLED', disabled })
+  }, [disabled, send])
+
+  /**
+   * Interaction is emitted here, never echoed from the resolved value. A
+   * controlled slider therefore reports what the user did (Aeon ≤1.4.0 stayed
+   * silent while `value` was set) and never fires on mount.
+   */
+  const commit = useCallback(
+    (next: number) => {
+      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 = useCallback(
     (clientX: number) => {
       const track = trackRef.current
@@ -98,11 +119,9 @@ const Root = forwardRef<HTMLDivElement, SliderRootProps>(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 === undefined) onValueChange?.(next)
+      commit(min + ratio * (max - min))
     },
-    [disabled, min, max, step, send, value, onValueChange],
+    [commit, disabled, min, max],
   )
 
   useEffect(() => {
@@ -127,10 +146,22 @@ const Root = forwardRef<HTMLDivElement, SliderRootProps>(function SliderRoot(
       dragging,
       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 (
@@ -201,7 +232,8 @@ const Thumb = forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>(funct
   { 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 } =
+    useSliderCtx()
 
   return (
     <span
@@ -229,19 +261,27 @@ const Thumb = forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>(funct
             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)
             }
           },
         },

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

@@ -272,11 +272,15 @@ export interface TooltipPositionerProps extends HTMLAttributes<HTMLDivElement> {
   /** Mount tooltip in document.body (default true). */
   portalled?: boolean
   placement?: AnchorPlacement
+  /** Gap between trigger and tip (default 4). */
+  gutter?: number
+  /** Stack level for the portalled surface (default 50). */
+  zIndex?: number
   children?: ReactNode
 }
 
 const Positioner = forwardRef<HTMLDivElement, TooltipPositionerProps>(function TooltipPositioner(
-  { portalled = true, placement = 'top-start', children, className, ...rest },
+  { portalled = true, placement = 'top-start', gutter, zIndex, children, className, ...rest },
   ref,
 ) {
   const { open, triggerRef, positionerRef } = useTooltipCtx()
@@ -291,6 +295,8 @@ const Positioner = forwardRef<HTMLDivElement, TooltipPositionerProps>(function T
       positionerRef={positionerRef}
       portalled={portalled}
       placement={placement}
+      gutter={gutter}
+      zIndex={zIndex}
       className={className}
       {...rest}
     >

package/packages/schemas/prompts/cursorrules.md

@@ -35,7 +35,9 @@ When generating Aeon UI, constrain props/parts/states to @aeon-ui/schemas catalo
 Import headless from @aeon-ui/react or styled from @aeon-ui/ui.
 Install: npm install aeon-ui-engine react react-dom xstate @xstate/react
 CSS: import 'aeon-ui-engine/aeon.css'
-Vite: aeonUiVitePlugin() from aeon-ui-engine/vite
+Link: postinstall + npx aeon-ui link (node_modules/@aeon-ui/*)
+Next.js: transpilePackages for @aeon-ui/* + "use client"; Vite plugin optional
+Vue/Solid/Svelte: thin adapters only — React is the full catalog
 
 ## Async region statechart
 States: idle → loading → (success | empty | failure); REFRESH from success/empty/failure; STALE flag while success.

package/packages/schemas/prompts/statecharts.md

@@ -34,7 +34,7 @@ Rule: Hidden input stays in sync with snapshot for forms.
 
 ## Slider statechart
 Machine: sliderMachine — idle | dragging; value/min/max/step in context.
-Events: SET_VALUE, STEP, POINTER_DOWN, POINTER_UP, HOME, END.
+Events: SET_VALUE, STEP, POINTER_DOWN, POINTER_UP, HOME, END, SET_BOUNDS, SET_DISABLED.
 Rule: Disabled blocks SET_VALUE / drag; project idle vs dragging on data-aeon-state.
 
 ## Content region statechart

package/packages/schemas/src/prompts.ts

@@ -128,7 +128,9 @@ When generating Aeon UI, constrain props/parts/states to @aeon-ui/schemas catalo
 Import headless from @aeon-ui/react or styled from @aeon-ui/ui.
 Install: npm install aeon-ui-engine react react-dom xstate @xstate/react
 CSS: import 'aeon-ui-engine/aeon.css'
-Vite: aeonUiVitePlugin() from aeon-ui-engine/vite
+Link: postinstall + npx aeon-ui link (node_modules/@aeon-ui/*)
+Next.js: transpilePackages for @aeon-ui/* + "use client"; Vite plugin optional
+Vue/Solid/Svelte: thin adapters only — React is the full catalog
 
 ${STATECHART_PROMPTS.async}
 

package/scripts/link-scoped-packages.mjs

@@ -0,0 +1,206 @@
+/**
+ * Materialize `node_modules/@aeon-ui/*` → `aeon-ui-engine/packages/*`
+ * so Next.js / Vite / Node can resolve scoped imports without bundler aliases.
+ *
+ * Runs as `aeon-ui-engine` postinstall (uses INIT_CWD) or via `npx aeon-ui link`.
+ *
+ * @example
+ * node ./scripts/link-scoped-packages.mjs
+ * node ./scripts/link-scoped-packages.mjs --cwd /path/to/app
+ */
+
+import { createRequire } from 'node:module'
+import {
+  existsSync,
+  lstatSync,
+  mkdirSync,
+  readlinkSync,
+  realpathSync,
+  rmSync,
+  symlinkSync,
+} from 'node:fs'
+import path from 'node:path'
+import { fileURLToPath } from 'node:url'
+
+const scriptDir = path.dirname(fileURLToPath(import.meta.url))
+
+/** Packages exposed under `@aeon-ui/<name>` for consumers. */
+export const SCOPED_PACKAGES = [
+  'core',
+  'primitives',
+  'react',
+  'ui',
+  'panda',
+  'schemas',
+  'surface',
+  'vue',
+  'solid',
+  'svelte',
+]
+
+/**
+ * Absolute path to the `aeon-ui-engine` package root (npm install or monorepo).
+ */
+export function resolveEngineRoot(opts = {}) {
+  if (opts.engineRoot) return path.resolve(opts.engineRoot)
+  if (process.env.AEON_UI_ROOT) return path.resolve(process.env.AEON_UI_ROOT)
+
+  try {
+    const require = createRequire(import.meta.url)
+    return path.dirname(require.resolve('aeon-ui-engine/package.json'))
+  } catch {
+    // Running from the monorepo checkout (this file lives in scripts/).
+    return path.resolve(scriptDir, '..')
+  }
+}
+
+/**
+ * Consumer `node_modules` where `@aeon-ui/*` should appear.
+ * Prefer INIT_CWD (npm/pnpm/yarn set this to the install project).
+ */
+export function resolveTargetNodeModules(opts = {}) {
+  if (opts.nodeModules) return path.resolve(opts.nodeModules)
+  if (opts.cwd) return path.join(path.resolve(opts.cwd), 'node_modules')
+
+  // Prefer INIT_CWD (npm/pnpm/yarn set this to the install project).
+  // Skip when postinstall runs inside the engine package itself during a
+  // monorepo install — workspace already provides @aeon-ui/*.
+  if (process.env.INIT_CWD) {
+    const initCwd = path.resolve(process.env.INIT_CWD)
+    const engineRoot = resolveEngineRoot(opts)
+    if (initCwd === engineRoot) {
+      return path.join(engineRoot, 'node_modules')
+    }
+    return path.join(initCwd, 'node_modules')
+  }
+
+  const engineRoot = resolveEngineRoot(opts)
+  // Installed as dependency: …/node_modules/aeon-ui-engine
+  const parent = path.dirname(engineRoot)
+  if (path.basename(parent) === 'node_modules') {
+    return parent
+  }
+
+  // Monorepo / direct run: link into engine's own node_modules
+  return path.join(engineRoot, 'node_modules')
+}
+
+function isSymlink(p) {
+  try {
+    return lstatSync(p).isSymbolicLink()
+  } catch {
+    return false
+  }
+}
+
+function sameTarget(linkPath, absTarget) {
+  try {
+    const current = readlinkSync(linkPath)
+    const resolved = path.isAbsolute(current)
+      ? path.normalize(current)
+      : path.resolve(path.dirname(linkPath), current)
+    if (resolved === absTarget) return true
+  } catch {
+    /* not a symlink or unreadable */
+  }
+  try {
+    return realpathSync(linkPath) === realpathSync(absTarget)
+  } catch {
+    return false
+  }
+}
+
+/**
+ * @param {{ cwd?: string, engineRoot?: string, nodeModules?: string, quiet?: boolean, force?: boolean }} [opts]
+ * @returns {{ linked: string[], skipped: string[], missing: string[], targetNodeModules: string, engineRoot: string }}
+ */
+export function linkScopedPackages(opts = {}) {
+  const quiet = opts.quiet ?? false
+  const force = opts.force ?? false
+  const engineRoot = resolveEngineRoot(opts)
+  const targetNodeModules = resolveTargetNodeModules({ ...opts, engineRoot })
+  const scopeDir = path.join(targetNodeModules, '@aeon-ui')
+  const packagesRoot = path.join(engineRoot, 'packages')
+
+  const linked = []
+  const skipped = []
+  const missing = []
+
+  mkdirSync(scopeDir, { recursive: true })
+
+  for (const name of SCOPED_PACKAGES) {
+    const absTarget = path.join(packagesRoot, name)
+    if (!existsSync(absTarget)) {
+      missing.push(name)
+      continue
+    }
+
+    const linkPath = path.join(scopeDir, name)
+
+    if (existsSync(linkPath) || isSymlink(linkPath)) {
+      if (sameTarget(linkPath, absTarget)) {
+        skipped.push(name)
+        continue
+      }
+      // Do not clobber pnpm/npm workspace links unless --force
+      if (!force) {
+        skipped.push(name)
+        continue
+      }
+      rmSync(linkPath, { recursive: true, force: true })
+    }
+
+    const type = process.platform === 'win32' ? 'junction' : 'dir'
+    symlinkSync(absTarget, linkPath, type)
+    linked.push(name)
+  }
+
+  if (!quiet) {
+    const rel = (n) => `@aeon-ui/${n}`
+    for (const n of linked) console.log(`  link ${rel(n)} → packages/${n}`)
+    for (const n of skipped) console.log(`  skip ${rel(n)} (already present)`)
+    for (const n of missing) console.log(`  miss ${rel(n)} (not in engine)`)
+    if (linked.length === 0 && skipped.length > 0) {
+      console.log(`aeon-ui link: ${skipped.length} package(s) already present in ${targetNodeModules}`)
+    } else if (linked.length > 0) {
+      console.log(`aeon-ui link: linked ${linked.length} package(s) into ${targetNodeModules}`)
+    }
+  }
+
+  return { linked, skipped, missing, targetNodeModules, engineRoot }
+}
+
+function parseArgs(argv) {
+  const opts = {}
+  for (let i = 0; i < argv.length; i++) {
+    const a = argv[i]
+    if (a === '--cwd' && argv[i + 1]) {
+      opts.cwd = argv[++i]
+    } else if (a === '--engine-root' && argv[i + 1]) {
+      opts.engineRoot = argv[++i]
+    } else if (a === '--quiet' || a === '-q') {
+      opts.quiet = true
+    } else if (a === '--force' || a === '-f') {
+      opts.force = true
+    }
+  }
+  return opts
+}
+
+const isMain = (() => {
+  if (!process.argv[1]) return false
+  try {
+    return realpathSync(fileURLToPath(import.meta.url)) === realpathSync(process.argv[1])
+  } catch {
+    return path.resolve(fileURLToPath(import.meta.url)) === path.resolve(process.argv[1])
+  }
+})()
+
+if (isMain) {
+  try {
+    linkScopedPackages(parseArgs(process.argv.slice(2)))
+  } catch (err) {
+    console.error('aeon-ui link failed:', err instanceof Error ? err.message : err)
+    process.exitCode = 1
+  }
+}

package/scripts/vite-aliases.mjs

@@ -1,19 +1,17 @@
 /**
- * Vite + TypeScript wiring for apps that install `aeon-ui-engine` from npm.
+ * Vite helpers for apps that install `aeon-ui-engine` from npm.
+ *
+ * Scoped `@aeon-ui/*` imports resolve via postinstall linking
+ * (`aeon-ui-engine/link` / `npx aeon-ui link`). This plugin is optional —
+ * it still helps with optimizeDeps and monorepo `packagesRoot`.
  *
  * @example
- * // vite.config.ts — one call, done
+ * // vite.config.ts — optional
  * import { aeonUiVitePlugin } from 'aeon-ui-engine/vite'
  *
  * export default defineConfig({
  *   plugins: [react(), aeonUiVitePlugin()],
  * })
- *
- * // tsconfig.json — spread the base config
- * {
- *   "extends": "aeon-ui-engine/tsconfig",
- *   "compilerOptions": { "jsx": "react-jsx" }
- * }
  */
 import { createRequire } from 'node:module'
 import path from 'node:path'