aeon-ui-engine 1.3.1 → 1.4.0

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

@@ -1696,6 +1696,7 @@
       grid-template-columns: minmax(0, 1fr) auto;
       align-items: end;
       column-gap: 0.4rem;
+      position: relative;
       width: 100%;
       padding-top: 0.45rem;
       padding-bottom: 0.75rem;
@@ -1716,6 +1717,14 @@
       border-top-color: var(--colors-danger);
 }
 
+    .aeonComposer__root[data-aeon-state=command] {
+      border-top-color: var(--colors-accent);
+}
+
+    .aeonComposer__root[data-aeon-state=lookup] {
+      border-top-color: var(--colors-border);
+}
+
     .aeonComposer__input {
       background: var(--colors-surface);
       font: inherit;
@@ -1763,6 +1772,53 @@
       height: controlMinHSm;
 }
 
+    .aeonComposer__suggestions {
+      margin: var(--spacing-0);
+      padding: 0.25rem;
+      background: var(--colors-surface);
+      list-style: none;
+      gap: 0.15rem;
+      grid-column: 1 / -1;
+      border-radius: var(--radii-lg);
+      border-width: 1px;
+      border-color: var(--colors-border);
+      display: grid;
+      order: -1;
+      margin-bottom: 0.35rem;
+      max-height: 10rem;
+      overflow-y: auto;
+}
+
+    .aeonComposer__suggestion {
+      background: var(--colors-transparent);
+      font: inherit;
+      gap: 0.5rem;
+      padding-inline: 0.55rem;
+      padding-block: 0.4rem;
+      border-radius: var(--radii-md);
+      border-width: 0;
+      display: flex;
+      align-items: baseline;
+      text-align: left;
+      color: var(--colors-fg);
+      font-size: var(--font-sizes-sm);
+      cursor: pointer;
+      width: 100%;
+}
+
+    .aeonComposer__suggestion:is(:hover, [data-hover]) {
+      background: var(--colors-surface-raised);
+}
+
+    .aeonComposer__toolbar {
+      gap: 0.25rem;
+      grid-column: 1 / -1;
+      display: flex;
+      align-items: center;
+      order: -1;
+      margin-bottom: 0.25rem;
+}
+
     .aeonContent__root {
       gap: 1rem;
       flex: 1 1 auto;
@@ -2314,6 +2370,102 @@
       color: var(--colors-muted);
 }
 
+    .aeonFileUpload__root,.aeonFileUpload__dropzone {
+      gap: var(--spacing-gap-sm);
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+}
+
+    .aeonFileUpload__dropzone {
+      background: var(--colors-surface);
+      padding-inline: var(--spacing-4);
+      padding-block: var(--spacing-6);
+      border-width: 1px;
+      border-style: dashed;
+      border-color: var(--colors-border);
+      border-radius: var(--radii-lg);
+      align-items: center;
+      justify-content: center;
+      cursor: pointer;
+      --transition-prop: border-color, background;
+      transition-property: border-color, background;
+      --transition-duration: var(--durations-fast);
+      transition-duration: var(--durations-fast);
+      min-height: 8rem;
+}
+
+    .aeonFileUpload__dropzone[data-aeon-state=dragging] {
+      background: var(--colors-accent-dim);
+      border-color: var(--colors-accent);
+}
+
+    .aeonFileUpload__dropzone[data-aeon-state=rejected] {
+      border-color: var(--colors-danger);
+}
+
+    .aeonFileUpload__dropzone[data-disabled] {
+      opacity: 0.5;
+      cursor: not-allowed;
+}
+
+    .aeonFileUpload__dropzone:is(:focus-visible, [data-focus-visible]) {
+      box-shadow: var(--shadows-focus-ring);
+}
+
+    .aeonFileUpload__input {
+      padding: var(--spacing-0);
+      margin: -1px;
+      overflow: hidden;
+      border-width: 0;
+      position: absolute;
+      clip: rect(0, 0, 0, 0);
+      white-space: nowrap;
+      width: 1px;
+      height: 1px;
+}
+
+    .aeonFileUpload__label {
+      font-size: var(--font-sizes-sm);
+      font-family: var(--fonts-ui);
+      font-weight: var(--font-weights-medium);
+      color: var(--colors-fg);
+}
+
+    .aeonFileUpload__hint {
+      font-size: var(--font-sizes-xs);
+      font-family: var(--fonts-ui);
+      color: var(--colors-muted);
+      text-align: center;
+}
+
+    .aeonFileUpload__preview {
+      gap: var(--spacing-gap-sm);
+      font-size: var(--font-sizes-sm);
+      font-family: var(--fonts-ui);
+      color: var(--colors-fg);
+      display: flex;
+      align-items: center;
+}
+
+    .aeonFileUpload__clearTrigger {
+      background: var(--colors-transparent);
+      padding: var(--spacing-0);
+      text-decoration: underline;
+      border-width: 0;
+      color: var(--colors-muted);
+      cursor: pointer;
+}
+
+    .aeonFileUpload__clearTrigger,.aeonFileUpload__rejectionMessage {
+      font-size: var(--font-sizes-xs);
+      font-family: var(--fonts-ui);
+}
+
+    .aeonFileUpload__rejectionMessage {
+      color: var(--colors-danger);
+}
+
     .aeonIdentity__root {
       gap: 0.625rem;
       display: flex;
@@ -3155,6 +3307,70 @@
       cursor: pointer;
 }
 
+    .aeonRangeSlider__root {
+      gap: gapXs;
+      position: relative;
+      display: flex;
+      flex-direction: column;
+      width: 100%;
+      min-width: 8rem;
+}
+
+    .aeonRangeSlider__track {
+      background: var(--colors-surface);
+      border-radius: var(--radii-full);
+      border-width: 1px;
+      border-style: solid;
+      border-color: var(--colors-border);
+      position: relative;
+      cursor: pointer;
+      touch-action: none;
+      width: 100%;
+      height: 0.5rem;
+}
+
+    .aeonRangeSlider__range {
+      background: var(--colors-accent-dim);
+      pointer-events: none;
+      top: var(--spacing-0);
+      height: 100%;
+}
+
+    .aeonRangeSlider__range,.aeonRangeSlider__thumb {
+      border-radius: var(--radii-full);
+      position: absolute;
+}
+
+    .aeonRangeSlider__thumb {
+      background: var(--colors-accent);
+      border-width: 2px;
+      border-style: solid;
+      border-color: var(--colors-surface-raised);
+      transform: translate(-50%, -50%);
+      cursor: grab;
+      box-shadow: var(--shadows-panel);
+      z-index: 1;
+      top: 50%;
+      width: 1.125rem;
+      height: 1.125rem;
+}
+
+    .aeonRangeSlider__thumb[data-aeon-state=dragging] {
+      cursor: grabbing;
+      z-index: 2;
+}
+
+    .aeonRangeSlider__thumb:is(:focus-visible, [data-focus-visible]) {
+      box-shadow: var(--shadows-focus-ring);
+}
+
+    .aeonRangeSlider__valueText {
+      font-size: var(--font-sizes-xs);
+      font-family: var(--fonts-ui);
+      color: var(--colors-muted);
+      text-align: center;
+}
+
     .aeonScroll__root {
       gap: var(--spacing-gap-sm);
       display: flex;
@@ -3612,6 +3828,12 @@
       opacity: 0.9;
 }
 
+    .aeonThread__item[data-aeon-state~=command-result] {
+      align-self: center;
+      align-items: stretch;
+      max-width: 92%;
+}
+
     .aeonThread__bubble {
       background: var(--colors-surface-raised);
       padding-inline: 0.85rem;
@@ -3658,6 +3880,76 @@
       text-transform: uppercase;
 }
 
+    .aeonThread__bind {
+      background: var(--colors-transparent);
+      padding-inline: 0.55rem;
+      padding-block: 0.25rem;
+      border-radius: var(--radii-md);
+      border-width: 1px;
+      border-color: var(--colors-border);
+      align-self: flex-start;
+      color: var(--colors-muted);
+      font-size: 0.7rem;
+      cursor: pointer;
+      margin-top: 0.15rem;
+      min-height: 2rem;
+}
+
+    .aeonThread__bind:is(:hover, [data-hover]) {
+      border-color: var(--colors-accent);
+      color: var(--colors-fg);
+}
+
+    .aeonThread__card {
+      background: var(--colors-surface);
+      gap: 0.35rem;
+      padding-inline: 0.85rem;
+      padding-block: 0.7rem;
+      border-radius: var(--radii-xl);
+      border-width: 1px;
+      border-color: var(--colors-border);
+      display: grid;
+      width: 100%;
+}
+
+    [data-aeon-state~=command-result] > .aeonThread__card {
+      background: var(--colors-surface-raised);
+}
+
+    [data-aeon-state~=payment-card] > .aeonThread__card {
+      border-color: var(--colors-accent);
+}
+
+    [data-aeon-state~=request-card] > .aeonThread__card {
+      border-color: var(--colors-border);
+}
+
+    .aeonThread__cardTitle {
+      gap: 0.5rem;
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      font-size: 0.72rem;
+      font-weight: 600;
+      letter-spacing: 0.04em;
+      text-transform: uppercase;
+      color: var(--colors-muted);
+}
+
+    .aeonThread__cardBody {
+      gap: 0.2rem;
+      display: grid;
+      font-size: var(--font-sizes-sm);
+      color: var(--colors-fg);
+}
+
+    .aeonThread__cardActions {
+      gap: 0.35rem;
+      display: flex;
+      flex-wrap: wrap;
+      margin-top: 0.25rem;
+}
+
     .aeonToast__viewport {
       gap: var(--spacing-gap-sm);
       outline: var(--borders-none);

package/packages/primitives/dist/chunk-CV4UXXZF.js

@@ -0,0 +1,44 @@
+// src/machines/file-upload.ts
+import { setup } from "xstate";
+var fileUploadMachine = setup({
+  types: {}
+}).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"
+      }
+    }
+  }
+});
+function getFileUploadPhase(value) {
+  if (value === "idle" || value === "dragging" || value === "rejected") {
+    return value;
+  }
+  return "idle";
+}
+
+export {
+  fileUploadMachine,
+  getFileUploadPhase
+};

package/packages/primitives/dist/chunk-IZKQSCYU.js

@@ -0,0 +1,164 @@
+// src/machines/range-slider.ts
+import { assign, setup } from "xstate";
+function clamp(value, min, max) {
+  return Math.min(max, Math.max(min, value));
+}
+function snap(value, min, max, step) {
+  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, min, max, step, minStepsBetween) {
+  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, thumb, nextRaw) {
+  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)];
+}
+var rangeSliderMachine = setup({
+  types: {
+    context: {},
+    events: {},
+    input: {}
+  },
+  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,
+  snap,
+  normalizePair,
+  rangeSliderMachine
+};

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

@@ -9,6 +9,8 @@ export { FIELD_INTERACTION_STATES, FIELD_SUBMISSION_STATES, FIELD_VALIDATION_STA
 export { PopoverContext, PopoverEvent, popoverMachine } from './machines/popover.js';
 export { ToastContext, ToastEvent, toastMachine } from './machines/toast.js';
 export { SliderContext, SliderEvent, clampSliderValue, sliderMachine, snapSliderValue } from './machines/slider.js';
+export { RangeSliderContext, RangeSliderEvent, RangeSliderInput, clampRangeSliderValue, normalizeRangeSliderValues, rangeSliderMachine, snapRangeSliderValue } from './machines/range-slider.js';
+export { FileUploadEvent, FileUploadPhase, fileUploadMachine, getFileUploadPhase } from './machines/file-upload.js';
 export { APP_SHELL_STATES, AppShellContext, AppShellEvent, AppShellState, appShellMachine } from './machines/app-shell.js';
 export { AppNavChild, AppNavContext, AppNavEvent, appNavChild, appNavDepth, appNavMachine, appNavStateAttr } from './machines/app-nav.js';
 export { STICKY_BAR_STATES, StickyBarContext, StickyBarEvent, StickyBarState, stickyBarMachine } from './machines/sticky-bar.js';

package/packages/primitives/dist/index.js

@@ -1,15 +1,31 @@
+import {
+  toastMachine
+} from "./chunk-5S4DIRL4.js";
+import {
+  toggleMachine
+} from "./chunk-H4KOEPYC.js";
 import {
   FIELD_INTERACTION_STATES,
   FIELD_SUBMISSION_STATES,
   FIELD_VALIDATION_STATES,
   fieldMachine
 } from "./chunk-ZMGRX64G.js";
+import {
+  fileUploadMachine,
+  getFileUploadPhase
+} from "./chunk-CV4UXXZF.js";
 import {
   panelMachine
 } from "./chunk-V5D7LS4J.js";
 import {
   popoverMachine
 } from "./chunk-LVNCD5F2.js";
+import {
+  clamp as clamp2,
+  normalizePair,
+  rangeSliderMachine,
+  snap as snap2
+} from "./chunk-IZKQSCYU.js";
 import {
   clamp,
   sliderMachine,
@@ -22,12 +38,6 @@ import {
 import {
   tabsMachine
 } from "./chunk-HONROWUG.js";
-import {
-  toastMachine
-} from "./chunk-5S4DIRL4.js";
-import {
-  toggleMachine
-} from "./chunk-H4KOEPYC.js";
 import {
   accordionMachine
 } from "./chunk-JBAG5E6W.js";
@@ -75,15 +85,21 @@ export {
   appShellMachine,
   asyncMachine,
   buttonLifecycleMachine,
+  clamp2 as clampRangeSliderValue,
   clamp as clampSliderValue,
   contentRegionMachine,
   createAsyncMachine,
   dialogMachine,
   fieldMachine,
+  fileUploadMachine,
+  getFileUploadPhase,
   isEmptyAsyncData,
+  normalizePair as normalizeRangeSliderValues,
   panelMachine,
   popoverMachine,
+  rangeSliderMachine,
   sliderMachine,
+  snap2 as snapRangeSliderValue,
   snap as snapSliderValue,
   stickyBarMachine,
   tabsMachine,

package/packages/primitives/dist/machines/file-upload.d.ts

@@ -0,0 +1,39 @@
+import * as xstate from 'xstate';
+
+type FileUploadPhase = 'idle' | 'dragging' | 'rejected';
+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.
+ */
+declare const fileUploadMachine: xstate.StateMachine<xstate.MachineContext, {
+    type: "DRAG_OVER";
+} | {
+    type: "DRAG_LEAVE";
+} | {
+    type: "DROP_ACCEPT";
+} | {
+    type: "DROP_REJECT";
+} | {
+    type: "RESET";
+}, {}, never, never, never, never, "idle" | "dragging" | "rejected", string, xstate.NonReducibleUnknown, xstate.NonReducibleUnknown, xstate.EventObject, xstate.MetaObject, {
+    id: "fileUpload";
+    states: {
+        readonly idle: {};
+        readonly dragging: {};
+        readonly rejected: {};
+    };
+}>;
+declare function getFileUploadPhase(value: unknown): FileUploadPhase;
+
+export { type FileUploadEvent, type FileUploadPhase, fileUploadMachine, getFileUploadPhase };

package/packages/primitives/dist/machines/file-upload.js

@@ -0,0 +1,8 @@
+import {
+  fileUploadMachine,
+  getFileUploadPhase
+} from "../chunk-CV4UXXZF.js";
+export {
+  fileUploadMachine,
+  getFileUploadPhase
+};