aeon-ui-engine 1.5.1 → 1.9.0

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

@@ -16,13 +16,15 @@ import {
 import { useAeonMachine } from '../hooks/use-aeon-machine.js'
 import { mergeProps } from '../utils/merge-props.js'
 
-interface SliderContextValue {
+export 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. */
@@ -33,7 +35,11 @@ interface SliderContextValue {
 
 const SliderCtx = createContext<SliderContextValue | null>(null)
 
-function useSliderCtx() {
+/**
+ * Read the slider's live machine state from inside `Slider.Root`.
+ * `interaction` is the nested region value — the same thing the snapshot holds.
+ */
+export function useSliderContext() {
   const ctx = useContext(SliderCtx)
   if (!ctx) throw new Error('Slider parts must be used within Slider.Root')
   return ctx
@@ -144,6 +150,7 @@ const Root = forwardRef<HTMLDivElement, SliderRootProps>(function SliderRoot(
       step,
       disabled,
       dragging,
+      interaction: (dragging ? 'dragging' : 'idle') as 'idle' | 'dragging',
       send,
       onValueChange,
       commit,
@@ -187,7 +194,7 @@ const Track = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(functio
   { onPointerDown, ...rest },
   ref,
 ) {
-  const { disabled, send, setValueFromClientX, trackRef } = useSliderCtx()
+  const { disabled, send, setValueFromClientX, trackRef } = useSliderContext()
 
   return (
     <div
@@ -217,7 +224,7 @@ const Range = forwardRef<HTMLDivElement, HTMLAttributes<HTMLDivElement>>(functio
   { style, ...rest },
   ref,
 ) {
-  const { value, min, max } = useSliderCtx()
+  const { value, min, max } = useSliderContext()
   return (
     <div
       ref={ref}
@@ -233,7 +240,7 @@ const Thumb = forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>(funct
   ref,
 ) {
   const { value, min, max, step, disabled, dragging, send, commit, setValueFromClientX } =
-    useSliderCtx()
+    useSliderContext()
 
   return (
     <span
@@ -295,7 +302,7 @@ const ValueText = forwardRef<HTMLSpanElement, HTMLAttributes<HTMLSpanElement>>(f
   props,
   ref,
 ) {
-  const { value } = useSliderCtx()
+  const { value } = useSliderContext()
   return (
     <span ref={ref} {...mergeProps(partOnlyAttrs(sliderAnatomy.valueText), props)}>
       {props.children ?? value}

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

@@ -3,6 +3,7 @@ import { tabsMachine } from '@aeon-ui/primitives'
 import {
   createContext,
   forwardRef,
+  useCallback,
   useContext,
   useEffect,
   useMemo,
@@ -16,7 +17,7 @@ import { mergeProps } from '../utils/merge-props.js'
 
 interface TabsContextValue {
   value: string
-  send: ReturnType<typeof useAeonMachine<typeof tabsMachine>>[1]
+  selectValue: (value: string) => void
 }
 
 const TabsCtx = createContext<TabsContextValue | null>(null)
@@ -27,7 +28,8 @@ function useTabsCtx() {
   return ctx
 }
 
-export interface TabsRootProps {
+export interface TabsRootProps
+  extends Omit<HTMLAttributes<HTMLDivElement>, 'defaultValue' | 'onChange' | 'children'> {
   value?: string
   defaultValue?: string
   onValueChange?: (value: string) => void
@@ -43,17 +45,27 @@ const Root = forwardRef<HTMLDivElement, TabsRootProps>(function TabsRoot(
     input: { value: defaultValue, disabled: false },
   })
 
+  const controlled = value !== undefined
   const resolvedValue = value ?? snapshot.context.value
 
+  const selectValue = useCallback(
+    (next: string) => {
+      if (controlled) onValueChange?.(next)
+      else send({ type: 'SELECT', value: next })
+    },
+    [controlled, onValueChange, send],
+  )
+
   useEffect(() => {
-    onValueChange?.(resolvedValue)
-  }, [resolvedValue, onValueChange])
+    if (controlled) return
+    onValueChange?.(snapshot.context.value)
+  }, [snapshot.context.value, controlled, onValueChange])
 
   useEffect(() => {
     if (value !== undefined) send({ type: 'SET_VALUE', value })
   }, [value, send])
 
-  const ctx = useMemo(() => ({ value: resolvedValue, send }), [resolvedValue, send])
+  const ctx = useMemo(() => ({ value: resolvedValue, selectValue }), [resolvedValue, selectValue])
 
   return (
     <TabsCtx.Provider value={ctx}>
@@ -80,7 +92,7 @@ const Trigger = forwardRef<HTMLButtonElement, TabsTriggerProps>(function TabsTri
   { value: triggerValue, onClick, ...rest },
   ref,
 ) {
-  const { value, send } = useTabsCtx()
+  const { value, selectValue } = useTabsCtx()
   const selected = value === triggerValue
 
   return (
@@ -98,7 +110,7 @@ const Trigger = forwardRef<HTMLButtonElement, TabsTriggerProps>(function TabsTri
         {
           onClick: (e: MouseEvent<HTMLButtonElement>) => {
             onClick?.(e)
-            send({ type: 'SELECT', value: triggerValue })
+            if (!e.defaultPrevented && value !== triggerValue) selectValue(triggerValue)
           },
         },
         rest,

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

@@ -0,0 +1,75 @@
+import { partAttrs, textareaAnatomy } from '@aeon-ui/core'
+import {
+  forwardRef,
+  useCallback,
+  useLayoutEffect,
+  useRef,
+  type CSSProperties,
+  type ForwardedRef,
+  type TextareaHTMLAttributes,
+} from 'react'
+import { assignRef } from '../utils/assign-ref.js'
+import { mergeProps } from '../utils/merge-props.js'
+
+/** Row limits as the CSS variables Aeon's auto-growing textareas read (Textarea, Composer.Input). */
+export function rowLimits(minRows?: number, maxRows?: number): CSSProperties {
+  return {
+    ...(minRows === undefined ? {} : { '--aeon-textarea-min-rows': minRows }),
+    ...(maxRows === undefined ? {} : { '--aeon-textarea-max-rows': maxRows }),
+  } as CSSProperties
+}
+
+const growsByItself =
+  typeof CSS !== 'undefined' && typeof CSS.supports === 'function' && CSS.supports('field-sizing', 'content')
+
+/**
+ * Grows a textarea to its content where CSS `field-sizing` is missing (Firefox); the recipe's
+ * min / max height still clamp it. Spread the result onto the textarea.
+ */
+export function useAutoGrow(forwarded: ForwardedRef<HTMLTextAreaElement>, value: unknown) {
+  const node = useRef<HTMLTextAreaElement | null>(null)
+
+  const fit = useCallback(() => {
+    const el = node.current
+    if (growsByItself || !el) return
+    el.style.height = 'auto'
+    el.style.height = `${el.scrollHeight + el.offsetHeight - el.clientHeight}px`
+  }, [])
+
+  useLayoutEffect(fit, [fit, value])
+
+  const ref = useCallback(
+    (el: HTMLTextAreaElement | null) => {
+      node.current = el
+      assignRef(forwarded, el)
+    },
+    [forwarded],
+  )
+
+  return { ref, onInput: fit }
+}
+
+export interface TextareaRootProps extends TextareaHTMLAttributes<HTMLTextAreaElement> {
+  /** Height floor in lines. */
+  minRows?: number
+  /** Height ceiling in lines; past it the textarea scrolls. Omit to grow without limit. */
+  maxRows?: number
+}
+
+const Root = forwardRef<HTMLTextAreaElement, TextareaRootProps>(function TextareaRoot(
+  { minRows = 2, maxRows, style, disabled, ...rest },
+  ref,
+) {
+  const grow = useAutoGrow(ref, rest.value)
+
+  return (
+    <textarea
+      rows={minRows}
+      disabled={disabled}
+      style={{ ...rowLimits(minRows, maxRows), ...style }}
+      {...mergeProps(partAttrs(textareaAnatomy.scope, textareaAnatomy.root, { disabled }), grow, rest)}
+    />
+  )
+})
+
+export const Textarea = { Root }

package/packages/react/src/utils/assign-ref.ts

@@ -0,0 +1,7 @@
+import type { ForwardedRef } from 'react'
+
+/** Hands a node to a forwarded ref of either shape. */
+export function assignRef<T>(ref: ForwardedRef<T> | undefined, node: T | null) {
+  if (typeof ref === 'function') ref(node)
+  else if (ref) ref.current = node
+}

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

@@ -51,6 +51,10 @@ declare const componentSchemas: {
     readonly prompt: JsonSchema;
     readonly statusBanner: JsonSchema;
     readonly separator: JsonSchema;
+    readonly prose: JsonSchema;
+    readonly textarea: JsonSchema;
+    readonly clipboard: JsonSchema;
+    readonly segmentGroup: JsonSchema;
     readonly composer: JsonSchema;
     readonly thread: JsonSchema;
     readonly identity: JsonSchema;
@@ -103,6 +107,10 @@ declare const catalog: {
         readonly prompt: JsonSchema;
         readonly statusBanner: JsonSchema;
         readonly separator: JsonSchema;
+        readonly prose: JsonSchema;
+        readonly textarea: JsonSchema;
+        readonly clipboard: JsonSchema;
+        readonly segmentGroup: JsonSchema;
         readonly composer: JsonSchema;
         readonly thread: JsonSchema;
         readonly identity: JsonSchema;

package/packages/schemas/dist/index.js

@@ -643,6 +643,65 @@ var componentSchemas = {
     runtime: "props",
     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",
@@ -926,7 +985,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 \u2014 React is the full catalog
 
 ${STATECHART_PROMPTS.async}