@elevasis/ui 1.17.0 → 1.18.0

package/dist/features/operations/index.d.ts

@@ -1,3 +1,98 @@
-export { ResourcesPage } from './ResourcesPage';
-export type { ResourcesPageProps } from './ResourcesPage';
-//# sourceMappingURL=index.d.ts.map
+import * as react_jsx_runtime from 'react/jsx-runtime';
+
+/**
+ * Time range selector for dashboard metrics
+ */
+type TimeRange = '1h' | '24h' | '7d' | '30d';
+
+/**
+ * Resource Registry type definitions
+ */
+
+/**
+ * Environment/deployment status for resources
+ */
+type ResourceStatus = 'dev' | 'prod';
+/**
+ * All resource types in the platform
+ * Used as the discriminator field in ResourceDefinition
+ */
+type ResourceType = 'agent' | 'workflow' | 'trigger' | 'integration' | 'external' | 'human';
+/**
+ * Base interface for ALL platform resources
+ * Shared by both executable (agents, workflows) and non-executable (triggers, integrations, etc.) resources
+ */
+interface ResourceDefinition {
+    /** Unique resource identifier */
+    resourceId: string;
+    /** Display name */
+    name: string;
+    /** Purpose and functionality description */
+    description: string;
+    /** Version for change tracking and evolution */
+    version: string;
+    /** Resource type discriminator */
+    type: ResourceType;
+    /** Environment/deployment status */
+    status: ResourceStatus;
+    /** Domain tags for filtering and organization */
+    domains?: ResourceDomain[];
+    /** Whether the agent supports multi-turn sessions (agents only) */
+    sessionCapable?: boolean;
+    /** Whether the resource is local (monorepo) or remote (externally deployed) */
+    origin?: 'local' | 'remote';
+    /** Whether this resource is archived and should be excluded from registration and deployment */
+    archived?: boolean;
+}
+
+/**
+ * Standard Domain Definitions
+ * Centralized domain constants and definitions for all organization resources.
+ */
+
+declare const DOMAINS: {
+    readonly INBOUND_PIPELINE: "inbound-pipeline";
+    readonly LEAD_GEN_PIPELINE: "lead-gen-pipeline";
+    readonly SUPPORT: "support";
+    readonly CLIENT_SUPPORT: "client-support";
+    readonly DELIVERY: "delivery";
+    readonly OPERATIONS: "operations";
+    readonly FINANCE: "finance";
+    readonly EXECUTIVE: "executive";
+    readonly INSTANTLY: "instantly";
+    readonly TESTING: "testing";
+    readonly INTERNAL: "internal";
+    readonly INTEGRATION: "integration";
+    readonly UTILITY: "utility";
+    readonly DIAGNOSTIC: "diagnostic";
+};
+/**
+ * ResourceDomain - Strongly typed domain identifier
+ * Use this type for all domain references to ensure compile-time validation.
+ */
+type ResourceDomain = (typeof DOMAINS)[keyof typeof DOMAINS];
+
+interface ResourcesPageProps {
+    /** Initial filter type from the URL search param (caller-managed) */
+    initialFilter?: ResourceType;
+    /** Called when the user changes the tab filter — caller should update its URL */
+    onTypeChange: (type: ResourceType | undefined) => void;
+    /** Current time range value — caller passes from its own store */
+    timeRange: TimeRange;
+    /** Called when the user clicks a resource row — caller handles navigation */
+    onResourceClick: (resource: ResourceDefinition) => void;
+    /** Items per page (defaults to 20) */
+    pageSize?: number;
+}
+declare function ResourcesPage({ initialFilter, onTypeChange, timeRange, onResourceClick, pageSize }: ResourcesPageProps): react_jsx_runtime.JSX.Element;
+
+interface ResourcesSidebarProps {
+    timeRange: TimeRange;
+}
+/**
+ * Resources sidebar - shows execution health donut, domain filters and search
+ */
+declare function ResourcesSidebar({ timeRange }: ResourcesSidebarProps): react_jsx_runtime.JSX.Element;
+
+export { ResourcesPage, ResourcesSidebar };
+export type { ResourcesPageProps, ResourcesSidebarProps };

package/dist/features/operations/index.js

@@ -1,9 +1,9 @@
-import { ExecutionStats } from '../../chunk-ZGK6XZVY.js';
-import { SubshellLoader } from '../../chunk-ADSSLKKP.js';
-import { PageTitleCaption, TabCountBadge, ResourceCard } from '../../chunk-7S5FS7WW.js';
+import { ExecutionStats } from '../../chunk-BVNAC4SQ.js';
+import { SubshellLoader, SubshellSidebarSection } from '../../chunk-35UWYH2A.js';
+import { PageTitleCaption, TabCountBadge, ResourceCard, useCyberColors, CyberDonut } from '../../chunk-LBY7FVFD.js';
 import '../../chunk-KBLGVZBD.js';
-import { useStatusFilter, useResourceSearch, useResourcesDomainFilters, filterByDomainFilters } from '../../chunk-XGVD76EL.js';
-import { usePaginationState, useResources, useRecentExecutionsByResource } from '../../chunk-TRVSTJTK.js';
+import { useStatusFilter, useResourceSearch, useResourcesDomainFilters, filterByDomainFilters } from '../../chunk-UTWJZEOJ.js';
+import { usePaginationState, useResources, useRecentExecutionsByResource } from '../../chunk-2Z7LYTIX.js';
 import '../../chunk-LXHZYSMQ.js';
 import '../../chunk-NJJ3NQ7B.js';
 import '../../chunk-MHW43EOH.js';
@@ -13,16 +13,16 @@ import '../../chunk-ELJIFLCB.js';
 import '../../chunk-L4XXM55J.js';
 import '../../chunk-SLVC5OJ2.js';
 import '../../chunk-RNP5R5I3.js';
-import '../../chunk-IVHJRJFK.js';
+import '../../chunk-OCF63OXD.js';
 import '../../chunk-NUULWBAD.js';
 import '../../chunk-SZHARWKU.js';
-import '../../chunk-4AKGF454.js';
+import '../../chunk-UEYUPTAD.js';
 import '../../chunk-7ATCF6UL.js';
-import '../../chunk-53GNREDV.js';
+import '../../chunk-UANJP5P7.js';
 import '../../chunk-QJ2KCHKX.js';
 import '../../chunk-U2522LSW.js';
-import '../../chunk-RULQSZYX.js';
-import { formatRelativeTime } from '../../chunk-FCFLBMVI.js';
+import '../../chunk-JNBHUCKW.js';
+import { formatRelativeTime, DOMAIN_MAP } from '../../chunk-MBZDE6UT.js';
 import '../../chunk-CC3SDRIF.js';
 import '../../chunk-ALA56RGZ.js';
 import { useInitialization } from '../../chunk-DVKEEY5J.js';
@@ -30,10 +30,10 @@ import '../../chunk-QEPXAWE2.js';
 import '../../chunk-DD3CCMCZ.js';
 import '../../chunk-BRJ3QZ4E.js';
 import '../../chunk-Q7DJKLEN.js';
-import { Stack, Card, Text, Button, Tabs, Group, Pagination } from '@mantine/core';
-import { IconApps, IconRoute, IconBrain } from '@tabler/icons-react';
+import { Stack, Card, Text, Button, Tabs, Group, Pagination, useMantineTheme, Box, Center, Loader, UnstyledButton, TextInput, Divider } from '@mantine/core';
+import { IconApps, IconRoute, IconBrain, IconRefresh, IconAdjustmentsHorizontal, IconSearch, IconChevronDown, IconCircleX, IconCircleCheck, IconCircleDashed } from '@tabler/icons-react';
 import { useState, useEffect, useMemo } from 'react';
-import { jsx, jsxs } from 'react/jsx-runtime';
+import { jsx, jsxs, Fragment } from 'react/jsx-runtime';
 
 function ResourcesPage({
   initialFilter,
@@ -237,5 +237,290 @@ function ResourcesPage({
     ) })
   ] });
 }
+var FILTER_STATE_ICONS = {
+  neutral: IconCircleDashed,
+  include: IconCircleCheck,
+  exclude: IconCircleX
+};
+var FILTER_STATE_COLORS = {
+  neutral: "var(--color-text-subtle)",
+  include: "var(--mantine-color-green-6)",
+  exclude: "var(--mantine-color-red-6)"
+};
+var FILTER_STATE_LABELS = {
+  neutral: "Not filtered",
+  include: "Include only",
+  exclude: "Exclude"
+};
+function ResourcesSidebar({ timeRange }) {
+  const searchQuery = useResourceSearch((s) => s.query);
+  const setSearchQuery = useResourceSearch((s) => s.set);
+  const statusFilter = useStatusFilter((s) => s.value);
+  const setStatusFilter = useStatusFilter((s) => s.set);
+  const [domainsOpen, setDomainsOpen] = useState(true);
+  const domainFilters = useResourcesDomainFilters((s) => s.filters);
+  const cycleDomainFilter = useResourcesDomainFilters((s) => s.cycle);
+  const { organizationReady } = useInitialization();
+  const { data: resources, isLoading: isResourcesLoading, error, refetch } = useResources();
+  const theme = useMantineTheme();
+  const colors = useCyberColors();
+  const { data: executionData } = useRecentExecutionsByResource({ timeRange });
+  const activeDomains = useMemo(() => {
+    if (!resources) return [];
+    const allResources = [...resources.workflows || [], ...resources.agents || []];
+    const domainSet = /* @__PURE__ */ new Set();
+    allResources.forEach((r) => r.domains?.forEach((d) => domainSet.add(d)));
+    const bottomDomains = /* @__PURE__ */ new Set(["utility", "diagnostic"]);
+    return Array.from(domainSet).sort((a, b) => {
+      const aBottom = bottomDomains.has(a) ? 1 : 0;
+      const bBottom = bottomDomains.has(b) ? 1 : 0;
+      if (aBottom !== bBottom) return aBottom - bBottom;
+      return a.localeCompare(b);
+    });
+  }, [resources]);
+  const domainFilteredResources = useMemo(() => {
+    if (!resources) return [];
+    const allResources = [...resources.workflows || [], ...resources.agents || []];
+    return filterByDomainFilters(allResources, domainFilters);
+  }, [resources, domainFilters]);
+  const { donutSuccessCount, donutFailedCount } = useMemo(() => {
+    if (!executionData?.resources || domainFilteredResources.length === 0) {
+      return { donutSuccessCount: 0, donutFailedCount: 0 };
+    }
+    const filteredIds = new Set(domainFilteredResources.map((r) => r.resourceId));
+    let success = 0;
+    let failed = 0;
+    for (const r of executionData.resources) {
+      if (filteredIds.has(r.resourceId)) {
+        success += r.successCount;
+        failed += r.failureCount;
+      }
+    }
+    return { donutSuccessCount: success, donutFailedCount: failed };
+  }, [executionData, domainFilteredResources]);
+  if (!organizationReady || isResourcesLoading) {
+    return /* @__PURE__ */ jsx(Box, { style: { flex: 1, minHeight: 0, padding: theme.spacing.sm }, children: /* @__PURE__ */ jsx(Center, { p: "xl", children: /* @__PURE__ */ jsx(Loader, {}) }) });
+  }
+  if (error) {
+    return /* @__PURE__ */ jsxs(Box, { style: { flex: 1, minHeight: 0, padding: theme.spacing.sm }, children: [
+      /* @__PURE__ */ jsx(
+        Text,
+        {
+          size: "xs",
+          fw: 600,
+          c: "dimmed",
+          tt: "uppercase",
+          mb: "md",
+          style: { fontFamily: "var(--elevasis-font-family-subtitle)" },
+          children: "Error Loading Resources"
+        }
+      ),
+      /* @__PURE__ */ jsx(Text, { size: "sm", c: "red", mb: "md", children: error instanceof Error ? error.message : "Failed to load resources" }),
+      /* @__PURE__ */ jsx(Button, { size: "xs", leftSection: /* @__PURE__ */ jsx(IconRefresh, { size: 14 }), onClick: () => refetch(), variant: "light", children: "Retry" })
+    ] });
+  }
+  const totalExecutions = donutSuccessCount + donutFailedCount;
+  const successRate = totalExecutions > 0 ? donutSuccessCount / totalExecutions * 100 : 0;
+  const healthSegments = [
+    { name: "Completed", value: donutSuccessCount, color: colors.green },
+    { name: "Failed", value: donutFailedCount, color: colors.red }
+  ];
+  const centerValueColor = totalExecutions === 0 ? "var(--mantine-color-dimmed)" : successRate >= 95 ? colors.green : successRate >= 80 ? colors.yellow : colors.red;
+  return /* @__PURE__ */ jsxs(Stack, { gap: 0, style: { flex: 1, minHeight: 0, overflow: "hidden" }, children: [
+    /* @__PURE__ */ jsx(Box, { p: "sm", pb: 0, children: /* @__PURE__ */ jsx(Box, { pb: "xs", mb: 4, children: /* @__PURE__ */ jsx(
+      CyberDonut,
+      {
+        title: `Execution Health (${timeRange})`,
+        segments: healthSegments,
+        centerValue: totalExecutions === 0 ? "\u2014" : `${Math.round(successRate)}%`,
+        centerLabel: `${totalExecutions} runs`,
+        centerValueColor,
+        glowId: "resHealthGlow",
+        colors
+      }
+    ) }) }),
+    /* @__PURE__ */ jsx(
+      SubshellSidebarSection,
+      {
+        icon: IconAdjustmentsHorizontal,
+        label: "Resource Filters",
+        withTopBorder: true,
+        rightSection: /* @__PURE__ */ jsx(UnstyledButton, { title: "Refresh resources", onClick: () => refetch(), children: /* @__PURE__ */ jsx(IconRefresh, { size: 16, color: "var(--color-text-subtle)" }) })
+      }
+    ),
+    /* @__PURE__ */ jsxs(Box, { p: "sm", style: { flex: 1, minHeight: 0, display: "flex", flexDirection: "column", overflowY: "auto" }, children: [
+      resources && (() => {
+        const stats = [
+          {
+            key: "all",
+            label: "All",
+            count: domainFilteredResources.length,
+            color: "var(--color-text)",
+            activeColor: "var(--color-primary)"
+          },
+          {
+            key: "prod",
+            label: "Prod",
+            count: domainFilteredResources.filter((r) => r.status === "prod").length,
+            color: "var(--color-text)",
+            activeColor: "var(--color-primary)"
+          },
+          {
+            key: "dev",
+            label: "Dev",
+            count: domainFilteredResources.filter((r) => r.status === "dev").length,
+            color: "var(--color-text)",
+            activeColor: "var(--color-primary)"
+          }
+        ];
+        return /* @__PURE__ */ jsx(
+          Group,
+          {
+            gap: 0,
+            mb: "sm",
+            style: {
+              flexShrink: 0,
+              borderRadius: "var(--mantine-radius-default)",
+              border: "1px solid var(--color-border)",
+              background: "var(--glass-background)",
+              overflow: "hidden"
+            },
+            children: stats.map((stat, i) => {
+              const isActive = statusFilter === stat.key;
+              return /* @__PURE__ */ jsx(
+                UnstyledButton,
+                {
+                  onClick: () => setStatusFilter(stat.key),
+                  style: {
+                    flex: 1,
+                    borderLeft: i > 0 ? "1px solid var(--color-border)" : void 0,
+                    background: isActive ? "var(--active-background)" : "transparent",
+                    boxShadow: isActive ? "inset 0 -2px 0 var(--color-primary)" : "none",
+                    transition: "all var(--duration-fast) var(--easing)"
+                  },
+                  children: /* @__PURE__ */ jsxs(Stack, { gap: 0, align: "center", py: 8, children: [
+                    /* @__PURE__ */ jsx(
+                      Text,
+                      {
+                        size: "md",
+                        fw: 700,
+                        ff: "monospace",
+                        style: { color: isActive ? stat.activeColor : "var(--color-text)", lineHeight: 1.2 },
+                        children: stat.count
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Text,
+                      {
+                        size: "xs",
+                        c: isActive ? void 0 : "dimmed",
+                        fw: isActive ? 600 : 400,
+                        style: { lineHeight: 1.2 },
+                        children: stat.label
+                      }
+                    )
+                  ] })
+                },
+                stat.key
+              );
+            })
+          }
+        );
+      })(),
+      /* @__PURE__ */ jsx(
+        TextInput,
+        {
+          placeholder: "Filter resources...",
+          leftSection: /* @__PURE__ */ jsx(IconSearch, { size: 16 }),
+          size: "sm",
+          value: searchQuery,
+          onChange: (e) => setSearchQuery(e.currentTarget.value),
+          mb: "sm",
+          style: { flexShrink: 0 }
+        }
+      ),
+      activeDomains.length > 0 && /* @__PURE__ */ jsxs(Fragment, { children: [
+        /* @__PURE__ */ jsx(UnstyledButton, { onClick: () => setDomainsOpen((o) => !o), style: { width: "100%", flexShrink: 0 }, mt: 4, children: /* @__PURE__ */ jsxs(Group, { justify: "space-between", children: [
+          /* @__PURE__ */ jsx(
+            Text,
+            {
+              size: "sm",
+              fw: 600,
+              c: "dimmed",
+              tt: "uppercase",
+              style: { fontFamily: "var(--elevasis-font-family-subtitle)" },
+              children: "Domains"
+            }
+          ),
+          /* @__PURE__ */ jsx(
+            IconChevronDown,
+            {
+              size: 14,
+              style: {
+                transform: domainsOpen ? "rotate(180deg)" : "rotate(0deg)",
+                transition: "transform var(--duration-fast) var(--easing)",
+                color: "var(--color-text-subtle)"
+              }
+            }
+          )
+        ] }) }),
+        /* @__PURE__ */ jsx(
+          "div",
+          {
+            style: {
+              display: "grid",
+              gridTemplateRows: domainsOpen ? "1fr" : "0fr",
+              transition: "grid-template-rows 200ms cubic-bezier(0.4, 0, 0.2, 1)"
+            },
+            children: /* @__PURE__ */ jsx("div", { style: { overflow: "hidden" }, children: /* @__PURE__ */ jsx(Stack, { gap: 2, mt: "xs", style: { flexShrink: 0 }, children: activeDomains.map((domainId) => {
+              const domain = DOMAIN_MAP[domainId];
+              if (!domain) return null;
+              const filterState = domainFilters[domainId] || "neutral";
+              const StateIcon = FILTER_STATE_ICONS[filterState];
+              return /* @__PURE__ */ jsx(
+                UnstyledButton,
+                {
+                  title: FILTER_STATE_LABELS[filterState],
+                  onClick: () => cycleDomainFilter(domainId),
+                  py: 5,
+                  px: 6,
+                  style: {
+                    transition: "background-color var(--duration-fast) var(--easing)",
+                    "&:hover": { backgroundColor: "var(--color-surface-hover)" }
+                  },
+                  children: /* @__PURE__ */ jsxs(Group, { gap: 10, wrap: "nowrap", children: [
+                    /* @__PURE__ */ jsx(
+                      StateIcon,
+                      {
+                        size: 16,
+                        style: {
+                          color: FILTER_STATE_COLORS[filterState],
+                          flexShrink: 0,
+                          transition: "color var(--duration-fast) var(--easing)"
+                        }
+                      }
+                    ),
+                    /* @__PURE__ */ jsx(
+                      Text,
+                      {
+                        size: "sm",
+                        truncate: true,
+                        fw: filterState !== "neutral" ? 500 : 400,
+                        c: filterState !== "neutral" ? void 0 : "dimmed",
+                        children: domain.name
+                      }
+                    )
+                  ] })
+                },
+                domainId
+              );
+            }) }) })
+          }
+        ),
+        /* @__PURE__ */ jsx(Divider, { my: "sm", color: "var(--color-border)", style: { flexShrink: 0 } })
+      ] })
+    ] })
+  ] });
+}
 
-export { ResourcesPage };
+export { ResourcesPage, ResourcesSidebar };

package/dist/graph/index.d.ts

@@ -1,13 +1,230 @@
+import { Node, Edge, NodeMouseHandler } from '@xyflow/react';
+import { MouseEvent } from 'react';
+
 /**
- * Graph Package (headless)
+ * Graph Component Constants
  *
- * Hooks and utilities for ReactFlow-based graphs.
- * Visual components have moved to Command Center.
+ * Shared constants for graph layout, dimensions, and behavior
+ */
+declare const GRAPH_CONSTANTS: {
+    readonly NODE_WIDTH: 220;
+    readonly NODE_HEIGHT: 140;
+    readonly HANDLE_SIZE: 12;
+    readonly MIN_ZOOM: 0.2;
+    readonly MAX_ZOOM: 1.5;
+    readonly RANK_SEP: 140;
+    readonly NODE_SEP: 60;
+};
+
+/**
+ * Resource Type Metadata
+ *
+ * Centralized metadata for ResourceDefinition types including icon names and colors.
+ * Icon names reference @tabler/icons-react - UI layer maps these to actual components.
+ */
+
+/**
+ * Node color types for graph visualization
+ * Used by both @repo/core (metadata) and @repo/ui (components)
+ */
+type NodeColorType = 'violet' | 'blue' | 'orange' | 'teal' | 'gray' | 'yellow';
+
+/**
+ * Graph Component Types
+ *
+ * Shared type definitions for graph components
+ */
+
+type GlowIntensity = 'none' | 'subtle' | 'medium' | 'intense';
+interface GraphThemeColors {
+    primary: string;
+    agent: string;
+    workflow: string;
+    trigger: string;
+    integration: string;
+    approval: string;
+    primaryGlow: string;
+    agentGlow: string;
+    workflowGlow: string;
+    triggerGlow: string;
+    integrationGlow: string;
+    approvalGlow: string;
+    edgeTriggers: string;
+    edgeUses: string;
+    edgeApproval: string;
+    edgeTriggersGlow: string;
+    edgeUsesGlow: string;
+    edgeApprovalGlow: string;
+}
+
+/**
+ * useConnectionHighlight - Hook to track and highlight connected nodes/edges
+ *
+ * When a node is hovered, highlights all directly connected nodes and edges
+ * while dimming unconnected elements for better visual clarity.
+ */
+
+interface UseConnectionHighlightReturn {
+    hoveredNodeId: string | null;
+    highlightedNodeIds: Set<string>;
+    highlightedEdgeIds: Set<string>;
+    onNodeMouseEnter: (nodeId: string) => void;
+    onNodeMouseLeave: () => void;
+    getNodeClassName: (nodeId: string) => string;
+    getEdgeClassName: (edgeId: string) => string;
+}
+/**
+ * Hook to manage connection highlighting state
+ */
+declare function useConnectionHighlight(nodes: Node[], edges: Edge[]): UseConnectionHighlightReturn;
+
+/**
+ * useGraphHighlighting - Higher-level hook for connection highlighting
+ *
+ * Wraps useConnectionHighlight and automatically applies CSS classes to nodes/edges
+ * based on hover state. Eliminates boilerplate code in graph components.
+ *
+ * @example
+ * ```tsx
+ * const { nodes, edges, handleNodeMouseEnter, handleNodeMouseLeave } =
+ *   useGraphHighlighting(layoutNodes, layoutEdges)
+ *
+ * <ReactFlow
+ *   nodes={nodes}
+ *   edges={edges}
+ *   onNodeMouseEnter={handleNodeMouseEnter}
+ *   onNodeMouseLeave={handleNodeMouseLeave}
+ * />
+ * ```
+ */
+
+interface GraphHighlightingResult {
+    nodes: Node[];
+    edges: Edge[];
+    handleNodeMouseEnter: NodeMouseHandler;
+    handleNodeMouseLeave: NodeMouseHandler;
+}
+/**
+ * Apply connection highlighting to nodes and edges
+ *
+ * @param layoutNodes - Nodes from layout algorithm (without highlight classes)
+ * @param layoutEdges - Edges from layout algorithm (without highlight classes)
+ * @returns Nodes/edges with highlight classes and mouse handlers
+ */
+declare function useGraphHighlighting(layoutNodes: Node[], layoutEdges: Edge[]): GraphHighlightingResult;
+
+/**
+ * useDirectedChainHighlighting - Directed chain highlighting for ReactFlow graphs
+ *
+ * When a node is hovered, highlights all predecessors (upstream) and successors
+ * (downstream) following edge direction, while dimming unrelated nodes.
+ *
+ * Pre-computes directed reachability for O(1) lookup on hover.
+ *
+ * @example
+ * ```tsx
+ * const { nodes, edges, handleNodeMouseEnter, handleNodeMouseLeave } =
+ *   useDirectedChainHighlighting(layoutNodes, layoutEdges)
+ *
+ * <ReactFlow
+ *   nodes={nodes}
+ *   edges={edges}
+ *   onNodeMouseEnter={handleNodeMouseEnter}
+ *   onNodeMouseLeave={handleNodeMouseLeave}
+ * />
+ * ```
+ */
+
+interface DirectedChainHighlightingOptions {
+    /** Optional selected node ID - its chain will always be highlighted */
+    selectedNodeId?: string | null;
+}
+interface DirectedChainHighlightingResult<N extends Node, E extends Edge> {
+    nodes: N[];
+    edges: E[];
+    hoveredNodeId: string | null;
+    handleNodeMouseEnter: NodeMouseHandler;
+    handleNodeMouseLeave: NodeMouseHandler;
+}
+/**
+ * Apply directed chain highlighting to graph nodes and edges
+ *
+ * @param layoutNodes - Nodes from layout algorithm
+ * @param layoutEdges - Edges from layout algorithm
+ * @param options - Optional configuration (selectedNodeId for persistent chain highlight)
+ * @returns Nodes/edges with highlight classes and mouse handlers
+ */
+declare function useDirectedChainHighlighting<N extends Node, E extends Edge>(layoutNodes: N[], layoutEdges: E[], options?: DirectedChainHighlightingOptions): DirectedChainHighlightingResult<N, E>;
+
+/**
+ * Generic hook for handling node selection in ReactFlow graphs
+ * Supports both string-based and number-based node IDs
+ */
+declare function useNodeSelection<T extends string | number>(selectedId: T | null, onSelect: (id: T | null) => void): {
+    handleNodeClick: (event: MouseEvent, node: Node) => void;
+    handlePaneClick: () => void;
+    handleContainerClick: (event: MouseEvent) => void;
+};
+
+/**
+ * Hook to trigger fit view when data or nodes change
+ *
+ * @param data - Data that triggers fit view when changed (e.g., timelineData, iterationData)
+ * @param nodes - ReactFlow nodes array
+ * @returns fitViewTrigger - Increment value to pass to GraphFitViewHandler
+ */
+declare function useFitViewTrigger(data: unknown, nodes: Node[]): number;
+
+/**
+ * calculateGraphHeight - Dynamic height calculation for graph containers
+ *
+ * Calculates container height based on item count with min/max bounds.
+ * Useful for graphs that grow with content (workflow steps, knowledge nodes, etc.)
+ *
+ * @example
+ * ```tsx
+ * const containerHeight = calculateGraphHeight({
+ *   itemCount: workflow.steps.length,
+ *   minHeight: 300,
+ *   maxHeight: 500,
+ *   heightPerItem: 80
+ * })
+ *
+ * <div style={{ height: containerHeight }}>
+ *   <ReactFlow ... />
+ * </div>
+ * ```
+ */
+interface GraphHeightOptions {
+    /**
+     * Number of items to calculate height for
+     */
+    itemCount: number;
+    /**
+     * Minimum container height in pixels
+     * @default 300
+     */
+    minHeight?: number;
+    /**
+     * Maximum container height in pixels
+     * @default 500
+     */
+    maxHeight?: number;
+    /**
+     * Additional height per item in pixels
+     * @default 80
+     */
+    heightPerItem?: number;
+}
+/**
+ * Calculate dynamic container height based on item count
+ *
+ * Formula: min(minHeight + (itemCount * heightPerItem), maxHeight)
  *
- * @packageDocumentation
+ * @param options - Configuration for height calculation
+ * @returns Container height in pixels
  */
-export * from './constants';
-export * from './types';
-export * from './hooks';
-export * from './utils';
-//# sourceMappingURL=index.d.ts.map
+declare function calculateGraphHeight({ itemCount, minHeight, maxHeight, heightPerItem }: GraphHeightOptions): number;
+
+export { GRAPH_CONSTANTS, calculateGraphHeight, useConnectionHighlight, useDirectedChainHighlighting, useFitViewTrigger, useGraphHighlighting, useNodeSelection };
+export type { DirectedChainHighlightingOptions, DirectedChainHighlightingResult, GlowIntensity, GraphHeightOptions, GraphHighlightingResult, GraphThemeColors, NodeColorType };