@elevasis/ui 1.0.0

package/dist/components/index.js

@@ -0,0 +1,18 @@
+export { ChatHeader, ChatInputArea, ChatInterface, ChatSidebar, ConfirmationInputModal, ConfirmationModal, MessageBubble } from '../chunk-S66I2PYB.js';
+export { ExecutionLogsTable, ResourceHealthChart, getHealthColor } from '../chunk-NE36BUGQ.js';
+import '../chunk-W7ZBF5AA.js';
+export { ActionModal, CustomModal, TaskCard, getIcon, iconMap } from '../chunk-ZGHDPDTF.js';
+import '../chunk-J3FALDQE.js';
+export { FormFieldRenderer } from '../chunk-PSLKGOBZ.js';
+export { NotificationBell, NotificationItem, NotificationList, NotificationPanel } from '../chunk-PYL4XW6H.js';
+import '../chunk-JKERRYVS.js';
+export { AgentDefinitionDisplay, CollapsibleJsonSection, ConfigCard, ContractDisplay, NewKnowledgeMapEdge, NewKnowledgeMapGraph, NewKnowledgeMapNode, ResourceDefinitionSection, ToolsListDisplay, WorkflowDefinitionDisplay, useNewKnowledgeMapLayout } from '../chunk-OXVOHOP3.js';
+import '../chunk-6BJOYF6E.js';
+import '../chunk-HUWJXLLF.js';
+export { APIErrorAlert, CollapsibleSection, ContextViewer, CustomSelector, DetailCardSkeleton, EmptyState, JsonViewer, ListSkeleton, NavigationButton, PageNotFound, PageTitleCaption, ResourceCard, StatCard, StatCardSkeleton, StatsCardSkeleton, TabCountBadge, TimeRangeSelector, TrendIndicator, catalogItemToResourceDefinition } from '../chunk-OUHGHTE7.js';
+export { StyledMarkdown } from '../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/monitoring/index.d.ts

@@ -0,0 +1,66 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/** Time-bucketed health data point */
+interface ResourceHealthDataPoint {
+    time: string;
+    success: number;
+    failure: number;
+    warning: number;
+    rate: number;
+}
+/** Health data for a single resource */
+interface ResourceHealth {
+    entityType: string;
+    entityId: string;
+    entityName: string | null;
+    trendData: ResourceHealthDataPoint[];
+    summary: {
+        total: number;
+        successRate: number;
+    };
+}
+
+type ExecutionStatus = 'pending' | 'running' | 'completed' | 'failed' | 'warning';
+
+interface ExecutionLogEntry {
+    id: string;
+    resourceId: string;
+    resourceName: string;
+    resourceType: 'workflow' | 'agent' | 'pipeline';
+    status: ExecutionStatus;
+    startTime: number;
+    endTime?: number;
+    duration?: number;
+    resourceStatus: 'dev' | 'prod';
+    resourceVersion?: string | null;
+    apiVersion?: string | null;
+    sdkVersion?: string | null;
+}
+interface ExecutionLogsTableProps {
+    executions: ExecutionLogEntry[];
+    isLoading: boolean;
+    onRowClick?: (params: {
+        resourceType: string;
+        resourceId: string;
+        executionId: string;
+    }) => void;
+}
+declare function ExecutionLogsTable({ executions, isLoading, onRowClick }: ExecutionLogsTableProps): react_jsx_runtime.JSX.Element;
+
+/**
+ * Get chart color based on success rate
+ */
+declare function getHealthColor(successRate: number, hasExecutions?: boolean): string;
+interface ResourceHealthChartProps {
+    healthData: ResourceHealth | undefined;
+    hasExecutions?: boolean;
+    width?: number | string;
+    height?: number;
+}
+/**
+ * Mini health chart for resource cards
+ */
+declare function ResourceHealthChart({ healthData, hasExecutions, width, height }: ResourceHealthChartProps): react_jsx_runtime.JSX.Element;
+
+export { ExecutionLogsTable, ResourceHealthChart, getHealthColor };
+export type { ExecutionLogEntry, ExecutionLogsTableProps };

package/dist/components/monitoring/index.js

@@ -0,0 +1,2 @@
+export { ExecutionLogsTable, ResourceHealthChart, getHealthColor } from '../../chunk-NE36BUGQ.js';
+import '../../chunk-6BJOYF6E.js';

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

@@ -0,0 +1,54 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+import React from 'react';
+
+interface BreadcrumbItem {
+    label: string;
+    path?: string;
+    isActive?: boolean;
+}
+interface UseBreadcrumbsOptions {
+    /** Navigation items to match against for proper labels */
+    navItems?: Array<{
+        label: string;
+        link?: string;
+        links?: Array<{
+            label: string;
+            link?: string;
+            links?: Array<{
+                label: string;
+                link: string;
+            }>;
+        }>;
+    }>;
+}
+declare const useBreadcrumbs: (options?: UseBreadcrumbsOptions) => BreadcrumbItem[];
+
+interface LinkItem {
+    label: string;
+    link: string;
+    onClick?: () => void;
+}
+interface LinksGroupProps {
+    icon: React.ComponentType<{
+        size?: number;
+        stroke?: number;
+    }>;
+    label: string;
+    initiallyOpened?: boolean;
+    links?: LinkItem[];
+    link?: string;
+    onClick?: () => void;
+    currentPath?: string;
+    opened?: boolean;
+    onToggle?: () => void;
+    /** Optional tour target ID for onboarding highlights */
+    dataOnboardingTourId?: string;
+}
+
+interface BreadcrumbsProps extends UseBreadcrumbsOptions {
+    navItems: LinksGroupProps[];
+}
+declare const Breadcrumbs: ({ navItems }: BreadcrumbsProps) => react_jsx_runtime.JSX.Element;
+
+export { Breadcrumbs, useBreadcrumbs };
+export type { BreadcrumbItem, BreadcrumbsProps, UseBreadcrumbsOptions };

package/dist/components/navigation/index.js

@@ -0,0 +1,91 @@
+import { useRouterContext } from '../../chunk-Q7DJKLEN.js';
+import { Text, Anchor, Breadcrumbs as Breadcrumbs$1 } from '@mantine/core';
+import { useMemo } from 'react';
+import { jsx } from 'react/jsx-runtime';
+
+var useBreadcrumbs = (options = {}) => {
+  const { currentPath } = useRouterContext();
+  const { navItems = [] } = options;
+  return useMemo(() => {
+    const segments = currentPath.split("/").filter(Boolean);
+    if (segments.length === 0) {
+      return [{ label: "Dashboard", isActive: true }];
+    }
+    const breadcrumbs = [{ label: "Dashboard", path: "/" }];
+    let currentSegmentPath = "";
+    for (let i = 0; i < segments.length; i++) {
+      currentSegmentPath += `/${segments[i]}`;
+      const isLast = i === segments.length - 1;
+      let label = formatSegmentLabel(segments[i]);
+      let matchedItem = null;
+      for (const navItem of navItems) {
+        if (navItem.link === currentSegmentPath) {
+          matchedItem = navItem;
+          break;
+        }
+        if (navItem.links) {
+          for (const subItem of navItem.links) {
+            if (subItem.link === currentSegmentPath) {
+              if (i === 0 && subItem.label === "Overview") {
+                matchedItem = { label: navItem.label };
+              } else {
+                matchedItem = subItem;
+              }
+              break;
+            }
+            if (subItem.links) {
+              for (const nestedLink of subItem.links) {
+                if (nestedLink.link === currentSegmentPath) {
+                  matchedItem = nestedLink;
+                  break;
+                }
+              }
+            }
+            if (matchedItem) break;
+          }
+        }
+        if (matchedItem) break;
+      }
+      if (matchedItem) {
+        label = matchedItem.label;
+      }
+      breadcrumbs.push({
+        label,
+        path: isLast ? void 0 : currentSegmentPath,
+        isActive: isLast
+      });
+    }
+    return breadcrumbs;
+  }, [currentPath, navItems]);
+};
+function formatSegmentLabel(segment) {
+  return segment.split("-").map((word) => word.charAt(0).toUpperCase() + word.slice(1)).join(" ");
+}
+var Breadcrumbs = ({ navItems }) => {
+  const { Link } = useRouterContext();
+  const breadcrumbs = useBreadcrumbs({ navItems });
+  const items = breadcrumbs.map((item) => {
+    const isActive = item.isActive;
+    if (isActive) {
+      return /* @__PURE__ */ jsx(Text, { size: "sm", fw: 500, c: "var(--color-text)", children: item.label }, item.path || item.label);
+    }
+    return item.path ? /* @__PURE__ */ jsx(
+      Anchor,
+      {
+        component: Link,
+        to: item.path,
+        size: "sm",
+        style: {
+          color: "var(--color-text-subtle)",
+          textDecoration: "none"
+        },
+        c: "dimmed",
+        children: item.label
+      },
+      item.path
+    ) : /* @__PURE__ */ jsx(Text, { size: "sm", c: "var(--color-text-subtle)", children: item.label }, item.label);
+  });
+  return /* @__PURE__ */ jsx(Breadcrumbs$1, { separator: "/", children: items });
+};
+
+export { Breadcrumbs, useBreadcrumbs };

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

@@ -0,0 +1,52 @@
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * Wire-format DTO for notification API responses.
+ * Dates are ISO 8601 strings (not Date objects like the domain Notification type).
+ * Used by frontend hooks that consume /api/notifications.
+ */
+interface NotificationDTO {
+    id: string;
+    userId: string;
+    organizationId: string;
+    category: string;
+    title: string;
+    message: string;
+    actionUrl: string | null;
+    read: boolean;
+    readAt: string | null;
+    createdAt: string;
+}
+
+interface NotificationItemProps {
+    notification: NotificationDTO;
+    onClose?: () => void;
+    onNavigate?: (url: string) => void;
+}
+declare function NotificationItem({ notification, onClose, onNavigate }: NotificationItemProps): react_jsx_runtime.JSX.Element;
+
+interface NotificationListProps {
+    notifications: NotificationDTO[];
+    isLoading?: boolean;
+    onClose?: () => void;
+    onNavigate?: (url: string) => void;
+}
+declare function NotificationList({ notifications, isLoading, onClose, onNavigate }: NotificationListProps): react_jsx_runtime.JSX.Element;
+
+interface NotificationPanelProps {
+    notifications: NotificationDTO[];
+    isLoading?: boolean;
+    onClose?: () => void;
+    onNavigate?: (url: string) => void;
+}
+declare function NotificationPanel({ notifications, isLoading, onClose, onNavigate }: NotificationPanelProps): react_jsx_runtime.JSX.Element;
+
+interface NotificationBellProps {
+    /** Override unread count (e.g., from SSE-enhanced source) */
+    unreadCount?: number;
+    /** Callback for navigation when notification is clicked */
+    onNavigate?: (url: string) => void;
+}
+declare function NotificationBell({ unreadCount, onNavigate }: NotificationBellProps): react_jsx_runtime.JSX.Element;
+
+export { NotificationBell, NotificationItem, NotificationList, NotificationPanel };

package/dist/components/notifications/index.js

@@ -0,0 +1,4 @@
+export { NotificationBell, NotificationItem, NotificationList, NotificationPanel } from '../../chunk-PYL4XW6H.js';
+import '../../chunk-JKERRYVS.js';
+import '../../chunk-KA7LO7U5.js';
+import '../../chunk-7AI5ZYJ4.js';

package/dist/components/resource-definition/index.css

@@ -0,0 +1,388 @@
+/* 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;
+  }
+}