@elevasis/ui 1.0.0

package/dist/components/command-queue/index.d.ts

@@ -0,0 +1,204 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { IconCheck } from '@tabler/icons-react';
+import { UseFormReturnType } from '@mantine/form';
+
+/**
+ * Shared form field types for dynamic form generation
+ * Used by: Command Queue, Execution Runner UI, future form-based features
+ */
+/**
+ * Supported form field types for action payloads
+ * Maps to Mantine form components
+ */
+type FormFieldType = 'text' | 'textarea' | 'number' | 'select' | 'checkbox' | 'radio' | 'richtext';
+/**
+ * Form field definition
+ */
+interface FormField {
+    /** Field key in payload object */
+    name: string;
+    /** Field label for UI */
+    label: string;
+    /** Field type (determines UI component) */
+    type: FormFieldType;
+    /** Default value */
+    defaultValue?: unknown;
+    /** Required field */
+    required?: boolean;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Help text */
+    description?: string;
+    /** Options for select/radio */
+    options?: Array<{
+        label: string;
+        value: string | number;
+    }>;
+    /** Min/max for number */
+    min?: number;
+    max?: number;
+    /** Path to context value for pre-filling (dot notation, e.g., 'proposal.summary') */
+    defaultValueFromContext?: string;
+}
+/**
+ * Form schema for action payload collection
+ */
+interface FormSchema {
+    /** Form title */
+    title?: string;
+    /** Form description */
+    description?: string;
+    /** Form fields */
+    fields: FormField[];
+}
+
+/**
+ * Action configuration for HITL tasks
+ * Defines available user actions and their behavior
+ */
+interface ActionConfig {
+    /** Unique action identifier (e.g., 'approve', 'retry', 'escalate') */
+    id: string;
+    /** Display label for UI button */
+    label: string;
+    /** Button variant/style */
+    type: 'primary' | 'secondary' | 'danger' | 'outline';
+    /** Tabler icon name (e.g., 'IconCheck', 'IconRefresh') */
+    icon?: string;
+    /** Button color (Mantine theme colors) */
+    color?: string;
+    /** Button variant (Mantine button variant, e.g., 'light', 'filled', 'outline') */
+    variant?: string;
+    /** Execution target (agent/workflow to invoke) */
+    target?: {
+        resourceType: 'agent' | 'workflow';
+        resourceId: string;
+        /**
+         * Optional session ID for agent continuation.
+         * If provided, invokes a new turn on the existing session instead of standalone execution.
+         * Only valid when resourceType is 'agent'.
+         */
+        sessionId?: string;
+    };
+    /** Form schema for collecting action-specific data */
+    form?: FormSchema;
+    /** Payload template for pre-filling forms */
+    payloadTemplate?: unknown;
+    /** Requires confirmation dialog */
+    requiresConfirmation?: boolean;
+    /** Confirmation message */
+    confirmationMessage?: string;
+    /** Help text / tooltip */
+    description?: string;
+}
+
+/**
+ * Origin resource type - where an execution/task originated from.
+ * Used for audit trails and tracking execution lineage.
+ */
+type OriginResourceType = 'agent' | 'workflow' | 'scheduler' | 'api';
+/**
+ * Origin tracking metadata - who/what created this execution/task.
+ * Used by both TaskScheduler and CommandQueue for complete audit trails.
+ */
+interface OriginTracking {
+    originExecutionId: string;
+    originResourceType: OriginResourceType;
+    originResourceId: string;
+}
+
+/**
+ * Command queue task with flexible action system
+ */
+interface Task extends OriginTracking {
+    id: string;
+    organizationId: string;
+    actions: ActionConfig[];
+    context: unknown;
+    selectedAction?: string;
+    actionPayload?: unknown;
+    description?: string;
+    priority: number;
+    /** Optional checkpoint identifier for grouping related human approval tasks */
+    humanCheckpoint?: string;
+    status: TaskStatus;
+    /**
+     * Target resource tracking — mirrors origin columns.
+     * Set when task is created; patchable to redirect execution to a different resource.
+     */
+    targetResourceId?: string;
+    targetResourceType?: 'agent' | 'workflow';
+    /**
+     * Execution ID for the action that runs AFTER user approval.
+     * NULL until execution starts.
+     *
+     * Naming distinction:
+     * - originExecutionId = Parent execution that CREATED the HITL task
+     * - targetExecutionId = Child execution that RUNS AFTER user approval
+     */
+    targetExecutionId?: string;
+    createdAt: Date;
+    completedAt?: Date;
+    completedBy?: string;
+    expiresAt?: Date;
+    idempotencyKey?: string | null;
+}
+/**
+ * Task status values
+ * - pending: awaiting action
+ * - processing: execution in progress after user approval
+ * - completed: action was taken and execution succeeded
+ * - failed: execution failed, task can be retried
+ * - expired: timed out before action
+ */
+type TaskStatus = 'pending' | 'processing' | 'completed' | 'failed' | 'expired';
+
+interface TaskCardProps {
+    task: Task;
+    onViewExecution?: (params: {
+        resourceType: string;
+        resourceId: string;
+        executionId: string;
+    }) => void;
+    richTextRenderer?: (props: {
+        content: string;
+        onChange: (content: string) => void;
+        placeholder?: string;
+    }) => ReactNode;
+}
+declare function TaskCard({ task, onViewExecution, richTextRenderer }: TaskCardProps): react_jsx_runtime.JSX.Element;
+
+interface ActionModalProps {
+    action: ActionConfig;
+    task: Task;
+    opened: boolean;
+    onClose: () => void;
+    onSubmit: (payload: unknown, notes?: string) => void;
+    richTextRenderer?: (props: {
+        content: string;
+        onChange: (content: string) => void;
+        placeholder?: string;
+    }) => ReactNode;
+    error?: unknown;
+    isPending?: boolean;
+}
+declare function ActionModal({ action, task, opened, onClose, onSubmit, richTextRenderer, error, isPending }: ActionModalProps): react_jsx_runtime.JSX.Element | null;
+
+declare const iconMap: Record<string, typeof IconCheck>;
+/** Allowed icon names: IconCheck, IconX, IconRefresh, IconAlertTriangle, IconEdit, IconEye, IconRocket, IconMessageCircle, IconArrowUp, IconClock, IconFileText, IconSend, IconMail */
+declare function getIcon(iconName?: string): typeof IconCheck | null;
+
+interface FormFieldRendererProps {
+    field: FormField;
+    form: UseFormReturnType<any>;
+    richTextRenderer?: (props: {
+        content: string;
+        onChange: (content: string) => void;
+        placeholder?: string;
+    }) => ReactNode;
+}
+declare function FormFieldRenderer({ field, form, richTextRenderer }: FormFieldRendererProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null | undefined;
+
+export { ActionModal, FormFieldRenderer, TaskCard, getIcon, iconMap };

package/dist/components/command-queue/index.js

@@ -0,0 +1,10 @@
+export { ActionModal, TaskCard, getIcon, iconMap } from '../../chunk-ZGHDPDTF.js';
+import '../../chunk-J3FALDQE.js';
+export { FormFieldRenderer } from '../../chunk-PSLKGOBZ.js';
+import '../../chunk-OUHGHTE7.js';
+import '../../chunk-3KMDHCAR.js';
+import '../../chunk-YZ6GTZXL.js';
+import '../../chunk-KA7LO7U5.js';
+import '../../chunk-7AI5ZYJ4.js';
+import '../../chunk-7PLEQFHO.js';
+import '../../chunk-Q7DJKLEN.js';

package/dist/components/forms/index.d.ts

@@ -0,0 +1,56 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import * as react from 'react';
+import { ReactNode } from 'react';
+import { UseFormReturnType } from '@mantine/form';
+
+/**
+ * Shared form field types for dynamic form generation
+ * Used by: Command Queue, Execution Runner UI, future form-based features
+ */
+/**
+ * Supported form field types for action payloads
+ * Maps to Mantine form components
+ */
+type FormFieldType = 'text' | 'textarea' | 'number' | 'select' | 'checkbox' | 'radio' | 'richtext';
+/**
+ * Form field definition
+ */
+interface FormField {
+    /** Field key in payload object */
+    name: string;
+    /** Field label for UI */
+    label: string;
+    /** Field type (determines UI component) */
+    type: FormFieldType;
+    /** Default value */
+    defaultValue?: unknown;
+    /** Required field */
+    required?: boolean;
+    /** Placeholder text */
+    placeholder?: string;
+    /** Help text */
+    description?: string;
+    /** Options for select/radio */
+    options?: Array<{
+        label: string;
+        value: string | number;
+    }>;
+    /** Min/max for number */
+    min?: number;
+    max?: number;
+    /** Path to context value for pre-filling (dot notation, e.g., 'proposal.summary') */
+    defaultValueFromContext?: string;
+}
+
+interface FormFieldRendererProps {
+    field: FormField;
+    form: UseFormReturnType<any>;
+    richTextRenderer?: (props: {
+        content: string;
+        onChange: (content: string) => void;
+        placeholder?: string;
+    }) => ReactNode;
+}
+declare function FormFieldRenderer({ field, form, richTextRenderer }: FormFieldRendererProps): string | number | bigint | boolean | Iterable<ReactNode> | Promise<string | number | bigint | boolean | react.ReactPortal | react.ReactElement<unknown, string | react.JSXElementConstructor<any>> | Iterable<ReactNode> | null | undefined> | react_jsx_runtime.JSX.Element | null | undefined;
+
+export { FormFieldRenderer };

package/dist/components/forms/index.js

@@ -0,0 +1,2 @@
+import '../../chunk-W7ZBF5AA.js';
+export { FormFieldRenderer } from '../../chunk-PSLKGOBZ.js';

package/dist/components/index.css

@@ -0,0 +1,443 @@
+/* src/components/display/StatCard.module.css */
+.heroCard {
+  background: var(--glass-background);
+  backdrop-filter: var(--glass-blur);
+  border: 1px solid var(--color-border);
+}
+.iconRing {
+  position: relative;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 46px;
+  height: 46px;
+  border-radius: 50%;
+  background: color-mix(in srgb, var(--color-primary) 12%, transparent);
+  border: 1px solid color-mix(in srgb, var(--color-primary) 25%, transparent);
+  color: var(--color-primary);
+  flex-shrink: 0;
+  box-shadow: 0 0 12px color-mix(in srgb, var(--color-primary) 15%, transparent);
+}
+.iconRingSm {
+  composes: iconRing;
+  width: 36px;
+  height: 36px;
+  box-shadow: 0 0 8px color-mix(in srgb, var(--color-primary) 12%, transparent);
+}
+.heroValue {
+  font-family: var(--elevasis-font-family-subtitle);
+  font-size: 1.85rem;
+  font-weight: 800;
+  line-height: 1;
+  letter-spacing: -0.02em;
+  font-variant-numeric: tabular-nums;
+}
+[data-mantine-color-scheme=dark] .heroValue {
+  text-shadow: 0 0 20px color-mix(in srgb, var(--color-primary) 20%, transparent);
+}
+.heroValueSm {
+  composes: heroValue;
+  font-size: 1.35rem;
+  font-weight: 700;
+}
+.heroLabel {
+  font-size: 0.68rem;
+  font-weight: 700;
+  text-transform: uppercase;
+  letter-spacing: 0.12em;
+  color: var(--color-text-dimmed);
+}
+.heroLabelSm {
+  composes: heroLabel;
+  font-size: 0.62rem;
+}
+
+/* src/graph/Graph.globals.css */
+
+/* src/graph/Graph.module.css */
+@keyframes edgeFlow {
+  0% {
+    stroke-dashoffset: 24;
+  }
+  100% {
+    stroke-dashoffset: 0;
+  }
+}
+@keyframes edgeFlowReverse {
+  0% {
+    stroke-dashoffset: 0;
+  }
+  100% {
+    stroke-dashoffset: 24;
+  }
+}
+@keyframes pulse {
+  0%, 100% {
+    opacity: 0.6;
+  }
+  50% {
+    opacity: 1;
+  }
+}
+@keyframes livePulse {
+  0%, 100% {
+    opacity: 1;
+  }
+  50% {
+    opacity: 0.6;
+  }
+}
+.livePulse {
+  animation: livePulse 2s ease-in-out infinite;
+}
+@keyframes glowPulse {
+  0%, 100% {
+    box-shadow: 0 0 5px var(--glow-color, color-mix(in srgb, var(--color-primary) 30%, transparent)), 0 0 15px var(--glow-color, color-mix(in srgb, var(--color-primary) 10%, transparent));
+  }
+  50% {
+    box-shadow: 0 0 10px var(--glow-color, color-mix(in srgb, var(--color-primary) 50%, transparent)), 0 0 20px var(--glow-color, color-mix(in srgb, var(--color-primary) 20%, transparent));
+  }
+}
+@keyframes nodeEnter {
+  0% {
+    opacity: 0;
+    transform: scale(0.8) translateY(10px);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
+}
+@keyframes handlePulse {
+  0%, 100% {
+    transform: scale(1);
+    box-shadow: 0 0 0 0 var(--handle-color, color-mix(in srgb, var(--color-primary) 40%, transparent));
+  }
+  50% {
+    transform: scale(1.2);
+    box-shadow: 0 0 0 4px var(--handle-color, color-mix(in srgb, var(--color-primary) 0%, transparent));
+  }
+}
+@keyframes gridMove {
+  0% {
+    background-position: 0 0;
+  }
+  100% {
+    background-position: 40px 40px;
+  }
+}
+@keyframes labelFadeIn {
+  0% {
+    opacity: 0;
+    transform: translate(-50%, -50%) translate(var(--label-x), var(--label-y)) scale(0.8);
+  }
+  100% {
+    opacity: 1;
+    transform: translate(-50%, -50%) translate(var(--label-x), var(--label-y)) scale(1);
+  }
+}
+@keyframes scanLine {
+  0% {
+    transform: translateY(-100%);
+    opacity: 0;
+  }
+  50% {
+    opacity: 0.5;
+  }
+  100% {
+    transform: translateY(100%);
+    opacity: 0;
+  }
+}
+.graphContainer :global(.react-flow__node.selected),
+.graphContainer :global(.react-flow__node:focus),
+.graphContainer :global(.react-flow__node:focus-visible) {
+  outline: none !important;
+}
+.graphContainer :global(.react-flow__node.selected > *) {
+  box-shadow: none;
+}
+.graphContainer {
+  position: relative;
+  background-image:
+    linear-gradient(color-mix(in srgb, var(--color-primary) 5%, transparent) 1px, transparent 1px),
+    linear-gradient(
+      90deg,
+      color-mix(in srgb, var(--color-primary) 5%, transparent) 1px,
+      transparent 1px),
+    radial-gradient(
+      ellipse at 50% 50%,
+      color-mix(in srgb, var(--color-primary) 5%, transparent) 0%,
+      transparent 70%);
+  background-color: var(--color-background);
+  background-size:
+    40px 40px,
+    40px 40px,
+    100% 100%;
+  animation: gridMove 20s linear infinite;
+}
+[data-mantine-color-scheme=dark] .graphContainer {
+  background-image:
+    linear-gradient(color-mix(in srgb, var(--color-primary) 9%, transparent) 1px, transparent 1px),
+    linear-gradient(
+      90deg,
+      color-mix(in srgb, var(--color-primary) 9%, transparent) 1px,
+      transparent 1px),
+    radial-gradient(
+      ellipse at 50% 50%,
+      color-mix(in srgb, var(--color-primary) 9%, transparent) 0%,
+      transparent 70%);
+  background-color: var(--color-background);
+  background-size:
+    40px 40px,
+    40px 40px,
+    100% 100%;
+}
+.node {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+}
+.node :global(.react-flow__node.selected),
+.node :global(.react-flow__node:focus),
+.node :global(.react-flow__node:focus-visible) {
+  outline: none !important;
+  box-shadow: none !important;
+}
+.node:nth-child(1) {
+  animation-delay: 0.05s;
+}
+.node:nth-child(2) {
+  animation-delay: 0.1s;
+}
+.node:nth-child(3) {
+  animation-delay: 0.15s;
+}
+.node:nth-child(4) {
+  animation-delay: 0.2s;
+}
+.node:nth-child(5) {
+  animation-delay: 0.25s;
+}
+.node:nth-child(6) {
+  animation-delay: 0.3s;
+}
+.node:nth-child(7) {
+  animation-delay: 0.35s;
+}
+.node:nth-child(8) {
+  animation-delay: 0.4s;
+}
+.node:nth-child(9) {
+  animation-delay: 0.45s;
+}
+.node:nth-child(10) {
+  animation-delay: 0.5s;
+}
+.node:nth-child(11) {
+  animation-delay: 0.55s;
+}
+.node:nth-child(12) {
+  animation-delay: 0.6s;
+}
+.nodeCard {
+  position: relative;
+  border-radius: var(--mantine-radius-md);
+  overflow: hidden;
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+}
+.nodeCard::before {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background:
+    linear-gradient(
+      135deg,
+      var(--node-color-light, color-mix(in srgb, var(--color-primary) 10%, transparent)) 0%,
+      transparent 50%,
+      var(--node-color-light, color-mix(in srgb, var(--color-primary) 5%, transparent)) 100%);
+  pointer-events: none;
+  opacity: 0;
+  transition: opacity 0.3s ease;
+}
+.nodeCard::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  right: 0;
+  height: 30%;
+  background:
+    linear-gradient(
+      180deg,
+      transparent 0%,
+      var(--node-color-glow, color-mix(in srgb, var(--color-primary) 10%, transparent)) 50%,
+      transparent 100%);
+  pointer-events: none;
+  opacity: 0;
+}
+.nodeCard:hover::before,
+.nodeCardSelected::before {
+  opacity: 1;
+}
+.nodeCard:hover::after,
+.nodeCardSelected::after {
+  animation: scanLine 3s ease-in-out infinite;
+}
+.nodeCard:hover {
+  transform: translateY(-2px) scale(1.02);
+}
+.nodeCardSelected {
+  transform: translateY(-2px) scale(1.02);
+  animation: glowPulse 2s ease-in-out infinite;
+}
+.nodeAgent {
+  --glow-color: rgba(139, 92, 246, 0.4);
+  --node-color-light: rgba(139, 92, 246, 0.1);
+  --node-color-glow: rgba(139, 92, 246, 0.15);
+  --handle-color: rgba(139, 92, 246, 0.5);
+  --gradient-start: rgba(139, 92, 246, 0.15);
+  --gradient-end: rgba(139, 92, 246, 0.05);
+}
+.nodeWorkflow {
+  --glow-color: rgba(59, 130, 246, 0.4);
+  --node-color-light: rgba(59, 130, 246, 0.1);
+  --node-color-glow: rgba(59, 130, 246, 0.15);
+  --handle-color: rgba(59, 130, 246, 0.5);
+  --gradient-start: rgba(59, 130, 246, 0.15);
+  --gradient-end: rgba(59, 130, 246, 0.05);
+}
+.nodeTrigger {
+  --glow-color: rgba(249, 115, 22, 0.4);
+  --node-color-light: rgba(249, 115, 22, 0.1);
+  --node-color-glow: rgba(249, 115, 22, 0.15);
+  --handle-color: rgba(249, 115, 22, 0.5);
+  --gradient-start: rgba(249, 115, 22, 0.15);
+  --gradient-end: rgba(249, 115, 22, 0.05);
+}
+.nodeIntegration {
+  --glow-color: rgba(20, 184, 166, 0.4);
+  --node-color-light: rgba(20, 184, 166, 0.1);
+  --node-color-glow: rgba(20, 184, 166, 0.15);
+  --handle-color: rgba(20, 184, 166, 0.5);
+  --gradient-start: rgba(20, 184, 166, 0.15);
+  --gradient-end: rgba(20, 184, 166, 0.05);
+}
+.nodeExternal {
+  --glow-color: rgba(107, 114, 128, 0.4);
+  --node-color-light: rgba(107, 114, 128, 0.1);
+  --node-color-glow: rgba(107, 114, 128, 0.15);
+  --handle-color: rgba(107, 114, 128, 0.5);
+  --gradient-start: rgba(107, 114, 128, 0.15);
+  --gradient-end: rgba(107, 114, 128, 0.05);
+}
+.nodeHuman {
+  --glow-color: rgba(245, 158, 11, 0.4);
+  --node-color-light: rgba(245, 158, 11, 0.1);
+  --node-color-glow: rgba(245, 158, 11, 0.15);
+  --handle-color: rgba(245, 158, 11, 0.5);
+  --gradient-start: rgba(245, 158, 11, 0.15);
+  --gradient-end: rgba(245, 158, 11, 0.05);
+}
+.nodePrimary {
+  --glow-color: rgba(37, 99, 235, 0.4);
+  --node-color-light: rgba(37, 99, 235, 0.1);
+  --node-color-glow: rgba(37, 99, 235, 0.15);
+  --handle-color: rgba(37, 99, 235, 0.5);
+  --gradient-start: rgba(37, 99, 235, 0.15);
+  --gradient-end: rgba(37, 99, 235, 0.05);
+}
+.handle {
+  transition: all 0.2s ease;
+}
+.handle:hover {
+  animation: handlePulse 1s ease-in-out infinite;
+}
+.nodeIcon {
+  transition: all 0.3s ease;
+}
+.badge {
+  transition: all 0.2s ease;
+  backdrop-filter: blur(4px);
+}
+.nodeCard:hover .badge {
+  transform: scale(1.05);
+}
+.badgeProd {
+  box-shadow: 0 0 8px rgba(34, 197, 94, 0.3);
+}
+.edge {
+  transition: all 0.3s ease;
+}
+.edgeAnimated {
+  stroke-dasharray: 8 4;
+  animation: edgeFlow 1s linear infinite;
+}
+.edgeGlow {
+  filter: drop-shadow(0 0 3px var(--edge-color, color-mix(in srgb, var(--color-primary) 50%, transparent)));
+}
+.edgeHighlighted {
+  stroke-width: 3px;
+}
+.edgeLabel {
+  backdrop-filter: blur(8px);
+  border: 1px solid rgba(255, 255, 255, 0.1);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15), 0 0 20px var(--label-glow, color-mix(in srgb, var(--color-primary) 20%, transparent));
+  transition: box-shadow 0.2s ease;
+}
+.edgeLabel:hover {
+  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.2), 0 0 30px var(--label-glow, color-mix(in srgb, var(--color-primary) 30%, transparent));
+}
+.legend {
+  backdrop-filter: var(--glass-blur);
+  background: var(--glass-background);
+  border: 1px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1), 0 0 40px color-mix(in srgb, var(--color-primary) 10%, transparent);
+}
+[data-mantine-color-scheme=dark] .legend {
+  border-color: color-mix(in srgb, var(--color-primary) 30%, transparent);
+}
+.legendDot {
+  transition: all 0.2s ease;
+  box-shadow: 0 0 8px currentColor;
+}
+.legendDot:hover {
+  transform: scale(1.3);
+  box-shadow: 0 0 12px currentColor;
+}
+.nodeHighlighted .nodeCard {
+  transform: translateY(-2px) scale(1.02);
+}
+.nodeHighlighted .nodeCard::before {
+  opacity: 1;
+}
+.nodeHighlighted .nodeCard::after {
+  animation: scanLine 3s ease-in-out infinite;
+}
+.nodeDimmed {
+  opacity: 0.3;
+  filter: grayscale(0.5);
+  transition: all 0.3s ease;
+}
+.edgeHighlighted {
+  stroke-width: 4px !important;
+}
+.edgeDimmed {
+  opacity: 0.15;
+  transition: all 0.3s ease;
+}
+.edgeLabelDimmed {
+  opacity: 0.15;
+  transition: opacity 0.3s ease;
+}
+@media (prefers-reduced-motion: reduce) {
+  .node,
+  .nodeCard::after,
+  .edgeAnimated,
+  .nodeIcon,
+  .handle:hover,
+  .graphContainer {
+    animation: none;
+  }
+  .nodeCard:hover {
+    transform: none;
+  }
+}