@elevasis/ui 2.40.1 → 2.41.1

package/dist/api/index.js

@@ -1,9 +1,7 @@
-export { createElevasisQueryClient } from '../chunk-73EWE2EW.js';
-export { ApiClientProvider, useApiClient, useApiClientContext } from '../chunk-TE4P6OSJ.js';
-import '../chunk-RXH4D6TY.js';
-import '../chunk-KRWALB24.js';
+export { createElevasisQueryClient } from '../chunk-V5HWC5EW.js';
+export { ApiClientProvider, useApiClient, useApiClientContext } from '../chunk-7FJI76OH.js';
 import '../chunk-DD3CCMCZ.js';
-import '../chunk-6ROXVZ3L.js';
-import '../chunk-RH5VWWSC.js';
+import '../chunk-5M4HSHQ5.js';
+import '../chunk-KRWALB24.js';
 import '../chunk-TVTSASST.js';
 import '../chunk-I2KLQ2HA.js';

package/dist/app/index.css

@@ -273,3 +273,387 @@
   letter-spacing: 0.12em;
   color: var(--color-text-dimmed);
 }
+
+/* src/graph/Graph.globals.css */
+.elevasis-graph-root .react-flow__node.selected,
+.elevasis-graph-root .react-flow__node:focus,
+.elevasis-graph-root .react-flow__node:focus-visible {
+  outline: none !important;
+}
+.elevasis-graph-root .react-flow__node.selected > * {
+  box-shadow: none;
+}
+
+/* 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 {
+  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) 1.25%, transparent) 0%,
+      transparent 70%);
+  background-color: color-mix(in srgb, var(--color-background) 50%, var(--glass-background));
+  backdrop-filter: var(--glass-blur);
+  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) 2.25%, transparent) 0%,
+      transparent 70%);
+  background-size:
+    40px 40px,
+    40px 40px,
+    100% 100%;
+}
+.node {
+  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
+  position: relative;
+}
+.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;
+  }
+}

package/dist/app/index.d.ts

@@ -7,6 +7,7 @@ import { MantineThemeOverride } from '@mantine/core';
 import * as react_jsx_runtime from 'react/jsx-runtime';
 import { useAuth } from '@workos-inc/authkit-react';
 import { EventSourceMessage } from '@microsoft/fetch-event-source';
+import { IconBrain } from '@tabler/icons-react';
 
 type Json = string | number | boolean | null | {
     [key: string]: Json | undefined;
@@ -3713,6 +3714,84 @@ declare const OrganizationModelSchema: z$1.ZodObject<{
             primary: z$1.ZodDefault<z$1.ZodRecord<z$1.ZodString, z$1.ZodType<SidebarNode, unknown, z$1.core.$ZodTypeInternals<SidebarNode, unknown>>>>;
             bottom: z$1.ZodDefault<z$1.ZodRecord<z$1.ZodString, z$1.ZodType<SidebarNode, unknown, z$1.core.$ZodTypeInternals<SidebarNode, unknown>>>>;
         }, z$1.core.$strip>>;
+        topbar: z$1.ZodDefault<z$1.ZodRecord<z$1.ZodString, z$1.ZodObject<{
+            id: z$1.ZodString;
+            label: z$1.ZodString;
+            tooltip: z$1.ZodOptional<z$1.ZodString>;
+            icon: z$1.ZodOptional<z$1.ZodUnion<readonly [z$1.ZodEnum<{
+                message: "message";
+                error: "error";
+                agent: "agent";
+                workflow: "workflow";
+                "google-sheets": "google-sheets";
+                dashboard: "dashboard";
+                calendar: "calendar";
+                sales: "sales";
+                crm: "crm";
+                "lead-gen": "lead-gen";
+                projects: "projects";
+                clients: "clients";
+                operations: "operations";
+                monitoring: "monitoring";
+                knowledge: "knowledge";
+                settings: "settings";
+                admin: "admin";
+                archive: "archive";
+                business: "business";
+                finance: "finance";
+                platform: "platform";
+                seo: "seo";
+                playbook: "playbook";
+                strategy: "strategy";
+                reference: "reference";
+                integration: "integration";
+                database: "database";
+                user: "user";
+                team: "team";
+                gmail: "gmail";
+                attio: "attio";
+                overview: "overview";
+                "command-view": "command-view";
+                "command-queue": "command-queue";
+                pipeline: "pipeline";
+                lists: "lists";
+                resources: "resources";
+                approve: "approve";
+                reject: "reject";
+                retry: "retry";
+                edit: "edit";
+                view: "view";
+                launch: "launch";
+                "message-plus": "message-plus";
+                escalate: "escalate";
+                promote: "promote";
+                submit: "submit";
+                email: "email";
+                success: "success";
+                warning: "warning";
+                info: "info";
+                pending: "pending";
+                bolt: "bolt";
+                building: "building";
+                briefcase: "briefcase";
+                apps: "apps";
+                graph: "graph";
+                shield: "shield";
+                users: "users";
+                "chart-bar": "chart-bar";
+                search: "search";
+            }>, z$1.ZodString]>>;
+            order: z$1.ZodOptional<z$1.ZodNumber>;
+            enabled: z$1.ZodDefault<z$1.ZodBoolean>;
+            devOnly: z$1.ZodOptional<z$1.ZodBoolean>;
+            requiresAdmin: z$1.ZodOptional<z$1.ZodBoolean>;
+            targets: z$1.ZodOptional<z$1.ZodDefault<z$1.ZodObject<{
+                systems: z$1.ZodOptional<z$1.ZodDefault<z$1.ZodArray<z$1.ZodString>>>;
+                entities: z$1.ZodOptional<z$1.ZodDefault<z$1.ZodArray<z$1.ZodString>>>;
+                resources: z$1.ZodOptional<z$1.ZodDefault<z$1.ZodArray<z$1.ZodString>>>;
+                actions: z$1.ZodOptional<z$1.ZodDefault<z$1.ZodArray<z$1.ZodString>>>;
+            }, z$1.core.$strip>>>;
+        }, z$1.core.$strip>>>;
     }, z$1.core.$strip>>;
     identity: z$1.ZodDefault<z$1.ZodObject<{
         mission: z$1.ZodDefault<z$1.ZodString>;
@@ -4381,6 +4460,7 @@ declare const OrganizationModelSchema: z$1.ZodObject<{
             edit: "edit";
             view: "view";
             launch: "launch";
+            "message-plus": "message-plus";
             escalate: "escalate";
             promote: "promote";
             submit: "submit";
@@ -4773,6 +4853,8 @@ interface SSEConnectionManagerLike {
     }>;
 }
 
+type TablerIconComponent = typeof IconBrain;
+
 type ElevasisOrganizationModel = Omit<OrganizationModel, 'knowledge'> & {
     knowledge?: OrganizationModel['knowledge'];
 };
@@ -4814,11 +4896,37 @@ interface ShellSidebarLinkGroup {
     links?: ShellSidebarLinkItem[];
     link?: string;
 }
+/**
+ * A resolved topbar action — the OM node after gating/filtering, with icon resolved
+ * from the semantic icon registry. Passed to `TopbarActionModule.render`.
+ */
+interface ResolvedTopbarAction {
+    id: string;
+    label: string;
+    tooltip?: string;
+    icon: TablerIconComponent;
+    order: number;
+}
+/**
+ * A topbar action module — binds a registry key to UI behavior (a render callback).
+ * The key must match `navigation.topbar[id]`. The OM supplies data + visibility;
+ * the module supplies behavior.
+ */
+interface TopbarActionModule {
+    /** Stable key that matches the `id` of a `navigation.topbar` node. */
+    key: string;
+    /** Render the topbar action. Receives the resolved OM node (icon pre-resolved). */
+    render: (ctx: {
+        node: ResolvedTopbarAction;
+    }) => ReactNode;
+}
 interface OrganizationGraphSystemBridge {
     systemId?: string;
 }
 interface ElevasisSystemsProviderProps {
     systems?: SystemModule[];
+    /** Registered topbar action modules. OM node presence controls visibility; module supplies behavior. */
+    topbarActions?: TopbarActionModule[];
     organizationModel?: ElevasisOrganizationModel;
     timeRange?: TimeRange;
     operationsApiUrl?: string;

package/dist/app/index.js

@@ -1,35 +1,25 @@
-import { AppErrorBoundary } from '../chunk-66U7JOWV.js';
+import { useSessionCheck, AppErrorBoundary, SidebarProvider, ElevasisSystemsProvider, useElevasisSystems, AppShellContainer, Sidebar, AppShellRightSideContainer, AppShellRightSideOuterContainer, SystemShell, ElevasisUIProvider } from '../chunk-QDXTIQT4.js';
+import '../chunk-NZ2F5RQ4.js';
+import '../chunk-OJJK27GC.js';
+import '../chunk-AUDNF2Q7.js';
+import '../chunk-6M6OLGQY.js';
+import '../chunk-BRXELOHC.js';
+import '../chunk-GUKY77FJ.js';
 import '../chunk-SJHM4WDG.js';
-import { SidebarProvider, AppShellContainer, Sidebar, AppShellRightSideContainer, AppShellRightSideOuterContainer } from '../chunk-X7D6SUKR.js';
-import '../chunk-X4WBGKJQ.js';
-import '../chunk-IIMU5YAJ.js';
-import '../chunk-RNP5R5I3.js';
-import { ElevasisUIProvider } from '../chunk-SJNIOGVX.js';
-import '../chunk-5JYKCULK.js';
-import '../chunk-6D4LCJ52.js';
-import '../chunk-WF7CONXF.js';
-import '../chunk-WLOQ4IBG.js';
-import { SystemShell } from '../chunk-6EV47QQW.js';
-import '../chunk-CTJBPF3Z.js';
-import '../chunk-3KMDHCAR.js';
+import '../chunk-ZTWA5H77.js';
 import '../chunk-S3XR4II4.js';
-import '../chunk-L7GXUSCV.js';
-import '../chunk-NYBEU5TE.js';
-import '../chunk-TE4P6OSJ.js';
-import '../chunk-DT3QYZVU.js';
-import { TanStackRouterBridge, ScrollToTop } from '../chunk-2IFYDILW.js';
-import '../chunk-Q7DJKLEN.js';
-import '../chunk-RXH4D6TY.js';
-import '../chunk-KRWALB24.js';
-import { useSessionCheck } from '../chunk-LJDYY3XB.js';
-import '../chunk-7MTWRSUZ.js';
-import { ElevasisSystemsProvider, useElevasisSystems } from '../chunk-J3FLIZY4.js';
 import { useInitialization } from '../chunk-6DO4PE3O.js';
-import '../chunk-K7GKKETO.js';
+import '../chunk-7FJI76OH.js';
 import '../chunk-DD3CCMCZ.js';
+import '../chunk-GMXGDO3I.js';
+import { TanStackRouterBridge, ScrollToTop } from '../chunk-2IFYDILW.js';
+import '../chunk-Q7DJKLEN.js';
+import '../chunk-HENXLGVD.js';
+import '../chunk-7FPLLSHN.js';
+import '../chunk-RNP5R5I3.js';
 import '../chunk-W2SFTXMT.js';
-import '../chunk-6ROXVZ3L.js';
-import { listAllSystems } from '../chunk-RH5VWWSC.js';
+import { listAllSystems } from '../chunk-5M4HSHQ5.js';
+import '../chunk-KRWALB24.js';
 import '../chunk-2FTX4WO2.js';
 import '../chunk-MQZE7SUI.js';
 import '../chunk-TVTSASST.js';