aeon-ui-engine 1.3.1 → 1.4.0

package/packages/primitives/dist/machines/range-slider.d.ts

@@ -0,0 +1,129 @@
+import * as xstate from 'xstate';
+
+interface RangeSliderContext {
+    values: [number, number];
+    min: number;
+    max: number;
+    step: number;
+    minStepsBetween: number;
+    disabled: boolean;
+    activeThumb: 0 | 1 | null;
+}
+type RangeSliderEvent = {
+    type: 'SET_VALUES';
+    values: [number, number];
+} | {
+    type: 'SET_BOUNDS';
+    min: number;
+    max: number;
+    step: number;
+    minStepsBetween: number;
+} | {
+    type: 'SET_DISABLED';
+    disabled: boolean;
+} | {
+    type: 'POINTER_DOWN';
+    thumb: 0 | 1;
+} | {
+    type: 'POINTER_MOVE';
+    value: number;
+} | {
+    type: 'POINTER_UP';
+} | {
+    type: 'STEP';
+    thumb: 0 | 1;
+    delta: number;
+} | {
+    type: 'HOME';
+    thumb: 0 | 1;
+} | {
+    type: 'END';
+    thumb: 0 | 1;
+};
+declare function clamp(value: number, min: number, max: number): number;
+declare function snap(value: number, min: number, max: number, step: number): number;
+declare function normalizePair(raw: [number, number], min: number, max: number, step: number, minStepsBetween: number): [number, number];
+type RangeSliderInput = {
+    values: [number, number];
+    min: number;
+    max: number;
+    step: number;
+    minStepsBetween?: number;
+    disabled?: boolean;
+};
+/** Two-thumb range control — idle vs dragging with activeThumb in context. */
+declare const rangeSliderMachine: xstate.StateMachine<RangeSliderContext, {
+    type: "SET_VALUES";
+    values: [number, number];
+} | {
+    type: "SET_BOUNDS";
+    min: number;
+    max: number;
+    step: number;
+    minStepsBetween: number;
+} | {
+    type: "SET_DISABLED";
+    disabled: boolean;
+} | {
+    type: "POINTER_DOWN";
+    thumb: 0 | 1;
+} | {
+    type: "POINTER_MOVE";
+    value: number;
+} | {
+    type: "POINTER_UP";
+} | {
+    type: "STEP";
+    thumb: 0 | 1;
+    delta: number;
+} | {
+    type: "HOME";
+    thumb: 0 | 1;
+} | {
+    type: "END";
+    thumb: 0 | 1;
+}, {}, never, {
+    type: "setValues";
+    params: xstate.NonReducibleUnknown;
+} | {
+    type: "setBounds";
+    params: xstate.NonReducibleUnknown;
+} | {
+    type: "setDisabled";
+    params: xstate.NonReducibleUnknown;
+} | {
+    type: "pointerDown";
+    params: xstate.NonReducibleUnknown;
+} | {
+    type: "pointerMove";
+    params: xstate.NonReducibleUnknown;
+} | {
+    type: "pointerUp";
+    params: xstate.NonReducibleUnknown;
+} | {
+    type: "stepThumb";
+    params: xstate.NonReducibleUnknown;
+} | {
+    type: "homeThumb";
+    params: xstate.NonReducibleUnknown;
+} | {
+    type: "endThumb";
+    params: xstate.NonReducibleUnknown;
+}, {
+    type: "notDisabled";
+    params: unknown;
+}, never, {
+    interaction: "idle" | "dragging";
+}, string, RangeSliderInput, xstate.NonReducibleUnknown, xstate.EventObject, xstate.MetaObject, {
+    id: "rangeSlider";
+    states: {
+        readonly interaction: {
+            states: {
+                readonly idle: {};
+                readonly dragging: {};
+            };
+        };
+    };
+}>;
+
+export { type RangeSliderContext, type RangeSliderEvent, type RangeSliderInput, clamp as clampRangeSliderValue, normalizePair as normalizeRangeSliderValues, rangeSliderMachine, snap as snapRangeSliderValue };

package/packages/primitives/dist/machines/range-slider.js

@@ -0,0 +1,12 @@
+import {
+  clamp,
+  normalizePair,
+  rangeSliderMachine,
+  snap
+} from "../chunk-IZKQSCYU.js";
+export {
+  clamp as clampRangeSliderValue,
+  normalizePair as normalizeRangeSliderValues,
+  rangeSliderMachine,
+  snap as snapRangeSliderValue
+};

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":6.529208000000011,"failed":false}],[":src/__tests__/app-nav.test.ts",{"duration":7.017959000000019,"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":5.357416999999998,"failed":false}],[":src/__tests__/app-nav.test.ts",{"duration":7.012541999999996,"failed":false}],[":src/__tests__/file-upload.test.ts",{"duration":5.016666000000015,"failed":false}],[":src/__tests__/range-slider.test.ts",{"duration":6.245291999999978,"failed":false}]]}

package/packages/primitives/src/__tests__/file-upload.test.ts

@@ -0,0 +1,25 @@
+import { createActor } from 'xstate'
+import { describe, expect, it } from 'vitest'
+import { fileUploadMachine, getFileUploadPhase } from '../machines/file-upload.js'
+
+describe('fileUploadMachine', () => {
+  it('tracks drag → accept → idle', () => {
+    const actor = createActor(fileUploadMachine).start()
+    expect(getFileUploadPhase(actor.getSnapshot().value)).toBe('idle')
+
+    actor.send({ type: 'DRAG_OVER' })
+    expect(getFileUploadPhase(actor.getSnapshot().value)).toBe('dragging')
+
+    actor.send({ type: 'DROP_ACCEPT' })
+    expect(getFileUploadPhase(actor.getSnapshot().value)).toBe('idle')
+  })
+
+  it('rejects then resets', () => {
+    const actor = createActor(fileUploadMachine).start()
+    actor.send({ type: 'DROP_REJECT' })
+    expect(getFileUploadPhase(actor.getSnapshot().value)).toBe('rejected')
+
+    actor.send({ type: 'RESET' })
+    expect(getFileUploadPhase(actor.getSnapshot().value)).toBe('idle')
+  })
+})

package/packages/primitives/src/__tests__/range-slider.test.ts

@@ -0,0 +1,39 @@
+import { createActor } from 'xstate'
+import { describe, expect, it } from 'vitest'
+import { rangeSliderMachine } from '../machines/range-slider.js'
+
+describe('rangeSliderMachine', () => {
+  it('normalizes and enforces minStepsBetween on SET_VALUES', () => {
+    const actor = createActor(rangeSliderMachine, {
+      input: { values: [10, 90], min: 0, max: 100, step: 1, minStepsBetween: 10 },
+    }).start()
+
+    actor.send({ type: 'SET_VALUES', values: [50, 55] })
+    expect(actor.getSnapshot().context.values).toEqual([50, 60])
+  })
+
+  it('moves start thumb with gap constraint while dragging', () => {
+    const actor = createActor(rangeSliderMachine, {
+      input: { values: [20, 80], min: 0, max: 100, step: 1, minStepsBetween: 5 },
+    }).start()
+
+    actor.send({ type: 'POINTER_DOWN', thumb: 0 })
+    actor.send({ type: 'POINTER_MOVE', value: 90 })
+    expect(actor.getSnapshot().context.values).toEqual([75, 80])
+    expect(actor.getSnapshot().matches({ interaction: 'dragging' })).toBe(true)
+
+    actor.send({ type: 'POINTER_UP' })
+    expect(actor.getSnapshot().matches({ interaction: 'idle' })).toBe(true)
+    expect(actor.getSnapshot().context.activeThumb).toBeNull()
+  })
+
+  it('ignores interaction when disabled', () => {
+    const actor = createActor(rangeSliderMachine, {
+      input: { values: [10, 40], min: 0, max: 100, step: 1, disabled: true },
+    }).start()
+
+    actor.send({ type: 'POINTER_DOWN', thumb: 1 })
+    expect(actor.getSnapshot().matches({ interaction: 'idle' })).toBe(true)
+    expect(actor.getSnapshot().context.values).toEqual([10, 40])
+  })
+})

package/packages/primitives/src/index.ts

@@ -9,6 +9,8 @@ export * from './machines/field.js'
 export * from './machines/popover.js'
 export * from './machines/toast.js'
 export * from './machines/slider.js'
+export * from './machines/range-slider.js'
+export * from './machines/file-upload.js'
 export * from './machines/app-shell.js'
 export * from './machines/app-nav.js'
 export * from './machines/sticky-bar.js'

package/packages/primitives/src/machines/file-upload.ts

@@ -0,0 +1,55 @@
+import { setup } from 'xstate'
+
+export type FileUploadPhase = 'idle' | 'dragging' | 'rejected'
+
+export type FileUploadEvent =
+  | { type: 'DRAG_OVER' }
+  | { type: 'DRAG_LEAVE' }
+  | { type: 'DROP_ACCEPT' }
+  | { type: 'DROP_REJECT' }
+  | { type: 'RESET' }
+
+/**
+ * Drag-and-drop surface lifecycle. Selected file bytes stay in React
+ * (or parent callbacks); idle / dragging / rejected are chart-owned.
+ */
+export const fileUploadMachine = setup({
+  types: {} as {
+    events: FileUploadEvent
+  },
+}).createMachine({
+  id: 'fileUpload',
+  initial: 'idle',
+  states: {
+    idle: {
+      on: {
+        DRAG_OVER: 'dragging',
+        DROP_REJECT: 'rejected',
+        RESET: 'idle',
+      },
+    },
+    dragging: {
+      on: {
+        DRAG_OVER: 'dragging',
+        DRAG_LEAVE: 'idle',
+        DROP_ACCEPT: 'idle',
+        DROP_REJECT: 'rejected',
+      },
+    },
+    rejected: {
+      on: {
+        DRAG_OVER: 'dragging',
+        DROP_ACCEPT: 'idle',
+        DROP_REJECT: 'rejected',
+        RESET: 'idle',
+      },
+    },
+  },
+})
+
+export function getFileUploadPhase(value: unknown): FileUploadPhase {
+  if (value === 'idle' || value === 'dragging' || value === 'rejected') {
+    return value
+  }
+  return 'idle'
+}

package/packages/primitives/src/machines/range-slider.ts

@@ -0,0 +1,209 @@
+import { assign, setup } from 'xstate'
+
+export interface RangeSliderContext {
+  values: [number, number]
+  min: number
+  max: number
+  step: number
+  minStepsBetween: number
+  disabled: boolean
+  activeThumb: 0 | 1 | null
+}
+
+export type RangeSliderEvent =
+  | { type: 'SET_VALUES'; values: [number, number] }
+  | { type: 'SET_BOUNDS'; min: number; max: number; step: number; minStepsBetween: number }
+  | { type: 'SET_DISABLED'; disabled: boolean }
+  | { type: 'POINTER_DOWN'; thumb: 0 | 1 }
+  | { type: 'POINTER_MOVE'; value: number }
+  | { type: 'POINTER_UP' }
+  | { type: 'STEP'; thumb: 0 | 1; delta: number }
+  | { type: 'HOME'; thumb: 0 | 1 }
+  | { type: 'END'; thumb: 0 | 1 }
+
+function clamp(value: number, min: number, max: number) {
+  return Math.min(max, Math.max(min, value))
+}
+
+function snap(value: number, min: number, max: number, step: number) {
+  if (step <= 0) return clamp(value, min, max)
+  const snapped = min + Math.round((value - min) / step) * step
+  return clamp(snapped, min, max)
+}
+
+function normalizePair(
+  raw: [number, number],
+  min: number,
+  max: number,
+  step: number,
+  minStepsBetween: number,
+): [number, number] {
+  const gap = Math.max(0, minStepsBetween) * (step > 0 ? step : 1)
+  let a = snap(raw[0], min, max, step)
+  let b = snap(raw[1], min, max, step)
+  if (a > b) [a, b] = [b, a]
+  if (b - a < gap) {
+    if (a + gap <= max) b = snap(a + gap, min, max, step)
+    else a = snap(b - gap, min, max, step)
+    if (a > b) [a, b] = [b, a]
+  }
+  return [a, b]
+}
+
+function moveThumb(
+  context: RangeSliderContext,
+  thumb: 0 | 1,
+  nextRaw: number,
+): [number, number] {
+  const { min, max, step, minStepsBetween, values } = context
+  const gap = Math.max(0, minStepsBetween) * (step > 0 ? step : 1)
+  const next = snap(nextRaw, min, max, step)
+  if (thumb === 0) {
+    const maxStart = values[1] - gap
+    return [clamp(next, min, maxStart), values[1]]
+  }
+  const minEnd = values[0] + gap
+  return [values[0], clamp(next, minEnd, max)]
+}
+
+export type RangeSliderInput = {
+  values: [number, number]
+  min: number
+  max: number
+  step: number
+  minStepsBetween?: number
+  disabled?: boolean
+}
+
+/** Two-thumb range control — idle vs dragging with activeThumb in context. */
+export const rangeSliderMachine = setup({
+  types: {
+    context: {} as RangeSliderContext,
+    events: {} as RangeSliderEvent,
+    input: {} as RangeSliderInput,
+  },
+  guards: {
+    notDisabled: ({ context }) => !context.disabled,
+  },
+  actions: {
+    setValues: assign({
+      values: ({ context, event }) => {
+        if (event.type !== 'SET_VALUES') return context.values
+        return normalizePair(
+          event.values,
+          context.min,
+          context.max,
+          context.step,
+          context.minStepsBetween,
+        )
+      },
+    }),
+    setBounds: assign(({ context, event }) => {
+      if (event.type !== 'SET_BOUNDS') return {}
+      const next = {
+        min: event.min,
+        max: event.max,
+        step: event.step,
+        minStepsBetween: event.minStepsBetween,
+      }
+      return {
+        ...next,
+        values: normalizePair(
+          context.values,
+          next.min,
+          next.max,
+          next.step,
+          next.minStepsBetween,
+        ),
+      }
+    }),
+    setDisabled: assign({
+      disabled: ({ context, event }) =>
+        event.type === 'SET_DISABLED' ? event.disabled : context.disabled,
+    }),
+    pointerDown: assign({
+      activeThumb: ({ event }) => (event.type === 'POINTER_DOWN' ? event.thumb : null),
+    }),
+    pointerMove: assign({
+      values: ({ context, event }) => {
+        if (event.type !== 'POINTER_MOVE' || context.activeThumb == null) {
+          return context.values
+        }
+        return moveThumb(context, context.activeThumb, event.value)
+      },
+    }),
+    pointerUp: assign({
+      activeThumb: null,
+    }),
+    stepThumb: assign({
+      values: ({ context, event }) => {
+        if (event.type !== 'STEP') return context.values
+        const current = context.values[event.thumb]
+        return moveThumb(context, event.thumb, current + event.delta)
+      },
+    }),
+    homeThumb: assign({
+      values: ({ context, event }) => {
+        if (event.type !== 'HOME') return context.values
+        return moveThumb(context, event.thumb, context.min)
+      },
+    }),
+    endThumb: assign({
+      values: ({ context, event }) => {
+        if (event.type !== 'END') return context.values
+        return moveThumb(context, event.thumb, context.max)
+      },
+    }),
+  },
+}).createMachine({
+  id: 'rangeSlider',
+  context: ({ input }) => {
+    const min = input.min
+    const max = input.max
+    const step = input.step
+    const minStepsBetween = input.minStepsBetween ?? 0
+    return {
+      values: normalizePair(input.values, min, max, step, minStepsBetween),
+      min,
+      max,
+      step,
+      minStepsBetween,
+      disabled: input.disabled ?? false,
+      activeThumb: null,
+    }
+  },
+  initial: 'interaction',
+  states: {
+    interaction: {
+      initial: 'idle',
+      states: {
+        idle: {
+          on: {
+            SET_VALUES: { actions: 'setValues', guard: 'notDisabled' },
+            SET_BOUNDS: { actions: 'setBounds' },
+            SET_DISABLED: { actions: 'setDisabled' },
+            POINTER_DOWN: { target: 'dragging', actions: 'pointerDown', guard: 'notDisabled' },
+            STEP: { actions: 'stepThumb', guard: 'notDisabled' },
+            HOME: { actions: 'homeThumb', guard: 'notDisabled' },
+            END: { actions: 'endThumb', guard: 'notDisabled' },
+          },
+        },
+        dragging: {
+          on: {
+            POINTER_MOVE: { actions: 'pointerMove' },
+            POINTER_UP: { target: 'idle', actions: 'pointerUp' },
+            SET_VALUES: { actions: 'setValues' },
+            SET_BOUNDS: { actions: 'setBounds' },
+            SET_DISABLED: { actions: 'setDisabled' },
+          },
+        },
+      },
+    },
+  },
+})
+
+export {
+  clamp as clampRangeSliderValue,
+  snap as snapRangeSliderValue,
+  normalizePair as normalizeRangeSliderValues,
+}