@odigos/ui-kit 0.0.294 → 0.0.295

package/lib/snippets/blast-radius/index.d.ts

@@ -1,5 +1,4 @@
 import { type FC } from 'react';
-import '@xyflow/react/dist/style.css';
 import type { InsightsBlastRadiusSubgraph } from '../../types';
 export interface BlastRadiusProps {
     blastRadius?: InsightsBlastRadiusSubgraph;

package/lib/snippets/graph-flow/animated-edge.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { GRAPH_FLOW_ANIMATED_EDGE, type AnimatedGraphEdgeData } from './types';
+import { type Edge, type EdgeProps } from '@xyflow/react';
+export type AnimatedGraphEdgeType = Edge<AnimatedGraphEdgeData, typeof GRAPH_FLOW_ANIMATED_EDGE>;
+/**
+ * Packet-stream edge animation.
+ * - `mode: 'fixed'` — constant ball count/duration (service map).
+ * - `mode: 'path-length'` — duration/count scale with path length (blast radius).
+ * Colors resolve from `data` → `style.stroke` → theme defaults.
+ */
+declare const AnimatedGraphEdgeComponent: React.FC<EdgeProps<AnimatedGraphEdgeType>>;
+export { AnimatedGraphEdgeComponent as AnimatedGraphEdge };

package/lib/snippets/graph-flow/auto-fit-view.d.ts

@@ -0,0 +1,14 @@
+import { type FC } from 'react';
+import { type FitViewOptions } from '@xyflow/react';
+export declare const DEFAULT_GRAPH_FIT_VIEW_OPTIONS: FitViewOptions;
+interface AutoFitViewProps {
+    trigger: number;
+    options?: FitViewOptions;
+}
+/**
+ * Programmatically calls fitView whenever `trigger` increments.
+ * Skips the first render (empty/unlaid-out graph). Needed because async ELK
+ * finishes after React Flow's built-in fitView-on-mount.
+ */
+export declare const AutoFitView: FC<AutoFitViewProps>;
+export {};

package/lib/snippets/graph-flow/elk-layout.d.ts

@@ -0,0 +1,6 @@
+import type { Edge, Node } from '@xyflow/react';
+import type { ElkLayoutOptions } from './types';
+export declare const getElkLayoutedElements: <N extends Node>(nodes: N[], edges: Edge[], options: ElkLayoutOptions) => Promise<{
+    nodes: N[];
+    edges: Edge[];
+}>;

package/lib/snippets/graph-flow/get-edge-path.d.ts

@@ -0,0 +1,14 @@
+import { Position } from '@xyflow/react';
+interface Params {
+    sourceX: number;
+    sourceY: number;
+    targetX: number;
+    targetY: number;
+    sourcePosition?: Position;
+    targetPosition?: Position;
+    isSelfLoop?: boolean;
+    /** Used to clear the node body when drawing a self-loop arc. */
+    selfLoopNodeHeight?: number;
+}
+export declare const getGraphEdgePath: ({ sourceX, sourceY, targetX, targetY, sourcePosition, targetPosition, isSelfLoop, selfLoopNodeHeight, }: Params) => [string, number, number, number, number];
+export {};

package/lib/snippets/graph-flow/graph-flow.d.ts

@@ -0,0 +1,9 @@
+import React, { type FC } from 'react';
+import '@xyflow/react/dist/style.css';
+import type { GraphFlowProps } from './types';
+import { AutoFitView, DEFAULT_GRAPH_FIT_VIEW_OPTIONS } from './auto-fit-view';
+import { type Node } from '@xyflow/react';
+export declare function GraphFlow<N extends Node>(props: GraphFlowProps<N>): React.JSX.Element;
+/** Headless AutoFit for callers that keep their own ReactFlow shell (e.g. Service Map). */
+export { AutoFitView, DEFAULT_GRAPH_FIT_VIEW_OPTIONS };
+export declare const GraphFlowComponent: FC<GraphFlowProps>;

package/lib/snippets/graph-flow/index.d.ts

@@ -0,0 +1,5 @@
+export { GraphFlow, GraphFlowComponent, AutoFitView, DEFAULT_GRAPH_FIT_VIEW_OPTIONS } from './graph-flow';
+export { getGraphEdgePath } from './get-edge-path';
+export { getElkLayoutedElements } from './elk-layout';
+export { AnimatedGraphEdge, type AnimatedGraphEdgeType } from './animated-edge';
+export { GRAPH_FLOW_ANIMATED_EDGE, type AnimatedEdgeMode, type AnimatedGraphEdgeData, type ElkDirection, type ElkLayoutOptions, type ElkLayoutSpacing, type ElkRootLayerConstraint, type GraphFlowProps, } from './types';

package/lib/snippets/graph-flow/types.d.ts

@@ -0,0 +1,61 @@
+import type { CSSProperties, ReactNode } from 'react';
+import type { Edge, Node, NodeTypes, EdgeTypes as RFEdgeTypes, NodeMouseHandler, OnNodesChange, OnEdgesChange } from '@xyflow/react';
+export type ElkDirection = 'RIGHT' | 'DOWN' | 'LEFT' | 'UP';
+export type ElkRootLayerConstraint = 'FIRST' | 'FIRST_SEPARATE';
+export interface ElkLayoutSpacing {
+    betweenLayers?: number;
+    nodeNode?: number;
+    edgeEdge?: number;
+    edgeNode?: number;
+}
+export interface ElkLayoutOptions {
+    direction?: ElkDirection;
+    nodeWidth: number;
+    nodeHeight: number;
+    rootIds?: string[];
+    /** Applied to every id in `rootIds`. Defaults to `FIRST`. */
+    rootLayerConstraint?: ElkRootLayerConstraint;
+    /** When true (default), also set `elk.alignment: CENTER` on root nodes. */
+    rootAlignCenter?: boolean;
+    spacing?: ElkLayoutSpacing;
+    /** Merged last into ELK layoutOptions (e.g. separateConnectedComponents). */
+    extraOptions?: Record<string, string>;
+}
+export type AnimatedEdgeMode = 'fixed' | 'path-length';
+export type AnimatedGraphEdgeData = {
+    isSelfLoop?: boolean;
+    /** When true with path-length mode, uses red packet colors (blast-radius attacker). */
+    isAttacker?: boolean;
+    /** Optional packet colors; falls back to theme blues (fixed) or silvers (path-length). */
+    trackColor?: string;
+    ballColorSmall?: string;
+    ballColorLarge?: string;
+    mode?: AnimatedEdgeMode;
+    /** Node height used for self-loop arc clearance. Defaults to 80. */
+    selfLoopNodeHeight?: number;
+};
+export declare const GRAPH_FLOW_ANIMATED_EDGE = "graph-flow-animated";
+export interface GraphFlowProps<N extends Node = Node> {
+    nodes: N[];
+    edges: Edge[];
+    nodeTypes: NodeTypes;
+    edgeTypes?: RFEdgeTypes;
+    height?: number | string;
+    /** When false (default), locks drag/select/focus and disables node pointer events. */
+    interactive?: boolean;
+    minZoom?: number;
+    maxZoom?: number;
+    fitViewPadding?: number;
+    fitViewTrigger?: number;
+    showBackground?: boolean;
+    /** Soften node focus/selection chrome (baselines). Default true when not interactive. */
+    suppressNodeFocusStyle?: boolean;
+    onNodesChange?: OnNodesChange<N>;
+    onEdgesChange?: OnEdgesChange;
+    onNodeClick?: NodeMouseHandler<N>;
+    onNodeMouseEnter?: NodeMouseHandler<N>;
+    onNodeMouseLeave?: NodeMouseHandler<N>;
+    className?: string;
+    style?: CSSProperties;
+    children?: ReactNode;
+}

package/lib/snippets/index.d.ts

@@ -7,6 +7,7 @@ export * from './connector-created-modal';
 export * from './delete-modal';
 export * from './dynamic-field';
 export * from './enable-disable-segment';
+export * from './graph-flow';
 export * from './instrumentation-rule-form-sections';
 export * from './odigos-logo-text-by-tier';
 export * from './rich-title';

package/lib/snippets.js

@@ -1 +1 @@
-export{A as ActionType,a as Actions,R as RichTitle}from"./chunks/ui-components-CnvJIMbW.js";export{A as AnimatedCollapse,B as BlastRadius,C as CancelModal,a as ConnectorCreatedModal,D as DURATION_OPTIONS,b as DeleteModal,c as DurationErrorsSection,d as DynamicActionFields,e as DynamicField,f as DynamicFields,E as EnableDisableSegment,I as InstrumentationPreviewSection,N as NOISY_PERCENTAGE_OPTIONS,O as OdigosLogoTextByTier,g as OperationSection,P as PERCENTAGE_OPTIONS,h as PercentageSection,i as PresetWithCustomInput,R as RuleInfoSection,j as RuleTypeSection,S as SamplingPreviewSection,k as SignalsCheckboxList,l as SourceScopeSection,U as UpgradeModal,W as WIDE_DRAWER_WIDTH,m as WideDrawer,Y as YamlSectionCard}from"./chunks/index-DrntqYmU.js";export{C as ColoredSpan,a as ColoredSpanVariant}from"./chunks/helpers-BbLwXwCP.js";import"react/jsx-runtime";import"styled-components";import"./icons.js";import"zustand";import"react";import"javascript-time-ago";import"javascript-time-ago/locale/en";import"react-dom";import"prism-react-renderer";import"react-error-boundary";import"virtua";import"@xyflow/react/dist/style.css";import"@xyflow/react";
+export{A as ActionType,a as Actions,R as RichTitle}from"./chunks/ui-components-DwtaxXwl.js";export{A as AnimatedCollapse,a as AnimatedGraphEdge,b as AutoFitView,B as BlastRadius,C as CancelModal,c as ConnectorCreatedModal,D as DEFAULT_GRAPH_FIT_VIEW_OPTIONS,d as DURATION_OPTIONS,e as DeleteModal,f as DurationErrorsSection,g as DynamicActionFields,h as DynamicField,i as DynamicFields,E as EnableDisableSegment,G as GRAPH_FLOW_ANIMATED_EDGE,j as GraphFlow,k as GraphFlowComponent,I as InstrumentationPreviewSection,N as NOISY_PERCENTAGE_OPTIONS,O as OdigosLogoTextByTier,l as OperationSection,P as PERCENTAGE_OPTIONS,m as PercentageSection,n as PresetWithCustomInput,R as RuleInfoSection,o as RuleTypeSection,S as SamplingPreviewSection,p as SignalsCheckboxList,q as SourceScopeSection,U as UpgradeModal,W as WIDE_DRAWER_WIDTH,r as WideDrawer,Y as YamlSectionCard,s as getElkLayoutedElements,t as getGraphEdgePath}from"./chunks/index-B13xWqwt.js";export{C as ColoredSpan,a as ColoredSpanVariant}from"./chunks/helpers-CVRjhvw4.js";import"react/jsx-runtime";import"styled-components";import"./icons.js";import"zustand";import"react";import"javascript-time-ago";import"javascript-time-ago/locale/en";import"react-dom";import"prism-react-renderer";import"react-error-boundary";import"virtua";import"elkjs/lib/elk.bundled.js";import"@xyflow/react";import"@xyflow/react/dist/style.css";

package/lib/store.js

@@ -1 +1 @@
-export{hp as DrawerType,bf as ProgressKeys,jt as getDrawerTypeForAdd,eO as getDrawerTypeForEdit,bc as useDataStreamStore,eJ as useDrawerStore,jo as useFilterStore,b7 as useNotificationStore,bd as useProgressStore,ju as useSelectedStore,be as useSetupStore}from"./chunks/ui-components-CnvJIMbW.js";import"react/jsx-runtime";import"styled-components";import"./icons.js";import"zustand";import"react";import"javascript-time-ago";import"javascript-time-ago/locale/en";import"react-dom";import"prism-react-renderer";import"react-error-boundary";import"virtua";
+export{hp as DrawerType,bf as ProgressKeys,ju as getDrawerTypeForAdd,eO as getDrawerTypeForEdit,bc as useDataStreamStore,eJ as useDrawerStore,jp as useFilterStore,b7 as useNotificationStore,bd as useProgressStore,jv as useSelectedStore,be as useSetupStore}from"./chunks/ui-components-DwtaxXwl.js";import"react/jsx-runtime";import"styled-components";import"./icons.js";import"zustand";import"react";import"javascript-time-ago";import"javascript-time-ago/locale/en";import"react-dom";import"prism-react-renderer";import"react-error-boundary";import"virtua";

package/lib/theme.js

@@ -1 +1 @@
-export{nE as Provider,nF as animations,nG as opacity,nH as palettes}from"./chunks/ui-components-CnvJIMbW.js";import"react/jsx-runtime";import"styled-components";import"./icons.js";import"zustand";import"react";import"javascript-time-ago";import"javascript-time-ago/locale/en";import"react-dom";import"prism-react-renderer";import"react-error-boundary";import"virtua";
+export{nF as Provider,nG as animations,nH as opacity,nI as palettes}from"./chunks/ui-components-DwtaxXwl.js";import"react/jsx-runtime";import"styled-components";import"./icons.js";import"zustand";import"react";import"javascript-time-ago";import"javascript-time-ago/locale/en";import"react-dom";import"prism-react-renderer";import"react-error-boundary";import"virtua";

package/lib/types.js

@@ -1 +1 @@
-export{eg as ActionCategoryTypes,bu as ActionKeyTypes,bv as ActionType,kL as AgentInjectedReason,kM as BooleanOperation,eo as CloudConnectorFeatureKey,ai as CodeAttributesKeyTypes,kN as ConditionType,ba as Crud,ac as CustomInstrumentationsKeyTypes,eZ as DesiredConditionActionItemType,eD as DesiredStateProgress,kO as DestinationTypes,bb as EntityTypes,c4 as ExtractionDataFormat,n as FieldTypes,ae as GolangCustomProbe,ag as HeadersCollectionKeyTypes,z as InputTypes,kP as InsightsAnomalyClassFindingKind,iK as InsightsAnomalyResolution,iH as InsightsAnomalyStatus,kQ as InsightsBaselineHistogramUnit,iL as InsightsBaselineLearningPhase,iJ as InsightsBulkResolution,bP as InsightsDeviationClass,bj as InsightsEntityTypes,iI as InsightsFindingKind,bR as InsightsLearningConditionType,bT as InsightsLearningMode,bO as InsightsPolicyScope,bI as InsightsRuleMode,iX as InsightsSampleReason,e5 as InsightsSeverity,jl as InsightsStorageDiskStatus,kR as InsightsStorageHealthStatus,kS as InsightsTransactionKind,iG as InsightsViolationStatus,kT as InstallationMethod,kU as InstallationStatus,ab as InstrumentationRuleType,kV as IntrumentationStatus,ad as JavaCustomProbe,kW as JsonOperation,c2 as K8sAttributesFrom,bY as K8sResourceKind,kX as K8sWorkloadContainerAgentConfigTracesHeadSamplingSpanMetricsMode,kY as ListDirection,kZ as NumberOperation,k_ as OtelDistroName,k$ as OtherEntityTypes,ah as PayloadCollectionKeyTypes,af as PhpCustomProbe,P as PlatformType,l0 as PodContainerLifecycleStatus,l1 as PodContainerStatus,l2 as PodPhase,l3 as Profile,Q as ProgrammingLanguages,f8 as RecommendationApplyExampleType,f9 as RecommendationRemediationType,f7 as RecommendationState,l4 as RecommendationType,l5 as SIGNAL_KEY_TO_TYPE,l6 as SIGNAL_TYPE_TO_KEY,l7 as SignalKey,bA as SignalType,l8 as SortDirection,S as StatusType,l9 as StringOperation,b as Tier,la as WorkloadRolloutReason,jH as WorkloadRolloutStatus}from"./chunks/ui-components-CnvJIMbW.js";import"react/jsx-runtime";import"styled-components";import"./icons.js";import"zustand";import"react";import"javascript-time-ago";import"javascript-time-ago/locale/en";import"react-dom";import"prism-react-renderer";import"react-error-boundary";import"virtua";
+export{eg as ActionCategoryTypes,bu as ActionKeyTypes,bv as ActionType,kM as AgentInjectedReason,kN as BooleanOperation,eo as CloudConnectorFeatureKey,ai as CodeAttributesKeyTypes,kO as ConditionType,ba as Crud,ac as CustomInstrumentationsKeyTypes,eZ as DesiredConditionActionItemType,eD as DesiredStateProgress,kP as DestinationTypes,bb as EntityTypes,c4 as ExtractionDataFormat,n as FieldTypes,ae as GolangCustomProbe,ag as HeadersCollectionKeyTypes,z as InputTypes,kQ as InsightsAnomalyClassFindingKind,iL as InsightsAnomalyResolution,iI as InsightsAnomalyStatus,kR as InsightsBaselineHistogramUnit,iM as InsightsBaselineLearningPhase,iK as InsightsBulkResolution,bP as InsightsDeviationClass,bj as InsightsEntityTypes,iJ as InsightsFindingKind,bR as InsightsLearningConditionType,bT as InsightsLearningMode,bO as InsightsPolicyScope,bI as InsightsRuleMode,iY as InsightsSampleReason,e5 as InsightsSeverity,jm as InsightsStorageDiskStatus,kS as InsightsStorageHealthStatus,kT as InsightsTransactionKind,iH as InsightsViolationStatus,kU as InstallationMethod,kV as InstallationStatus,ab as InstrumentationRuleType,kW as IntrumentationStatus,ad as JavaCustomProbe,kX as JsonOperation,c2 as K8sAttributesFrom,bY as K8sResourceKind,kY as K8sWorkloadContainerAgentConfigTracesHeadSamplingSpanMetricsMode,kZ as ListDirection,k_ as NumberOperation,k$ as OtelDistroName,l0 as OtherEntityTypes,ah as PayloadCollectionKeyTypes,af as PhpCustomProbe,P as PlatformType,l1 as PodContainerLifecycleStatus,l2 as PodContainerStatus,l3 as PodPhase,l4 as Profile,Q as ProgrammingLanguages,f8 as RecommendationApplyExampleType,f9 as RecommendationRemediationType,f7 as RecommendationState,l5 as RecommendationType,l6 as SIGNAL_KEY_TO_TYPE,l7 as SIGNAL_TYPE_TO_KEY,l8 as SignalKey,bA as SignalType,l9 as SortDirection,S as StatusType,la as StringOperation,b as Tier,lb as WorkloadRolloutReason,jI as WorkloadRolloutStatus}from"./chunks/ui-components-DwtaxXwl.js";import"react/jsx-runtime";import"styled-components";import"./icons.js";import"zustand";import"react";import"javascript-time-ago";import"javascript-time-ago/locale/en";import"react-dom";import"prism-react-renderer";import"react-error-boundary";import"virtua";

package/lib/visuals.js

@@ -1 +1 @@
-export{lb as VISUAL_ODIGOS_LOGO_HEIGHT,lc as VISUAL_ODIGOS_LOGO_WIDTH,V as VisualGreenRings,ld as VisualOdigosLogo,hz as VisualPurpleRings}from"./chunks/ui-components-CnvJIMbW.js";import"react/jsx-runtime";import"styled-components";import"./icons.js";import"zustand";import"react";import"javascript-time-ago";import"javascript-time-ago/locale/en";import"react-dom";import"prism-react-renderer";import"react-error-boundary";import"virtua";
+export{lc as VISUAL_ODIGOS_LOGO_HEIGHT,ld as VISUAL_ODIGOS_LOGO_WIDTH,V as VisualGreenRings,le as VisualOdigosLogo,hz as VisualPurpleRings}from"./chunks/ui-components-DwtaxXwl.js";import"react/jsx-runtime";import"styled-components";import"./icons.js";import"zustand";import"react";import"javascript-time-ago";import"javascript-time-ago/locale/en";import"react-dom";import"prism-react-renderer";import"react-error-boundary";import"virtua";

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@odigos/ui-kit",
-  "version": "0.0.294",
+  "version": "0.0.295",
   "author": "Odigos",
   "license": "MIT",
   "repository": {
@@ -94,7 +94,7 @@
     "styled-components": "6.5.3"
   },
   "dependencies": {
-    "@xyflow/react": "^12.11.5",
+    "@xyflow/react": "^12.11.6",
     "elkjs": "^0.12.0",
     "javascript-time-ago": "^2.6.4",
     "prism-react-renderer": "^2.4.1",
@@ -111,32 +111,32 @@
     "@babel/preset-env": "^7.29.7",
     "@babel/preset-react": "^7.29.7",
     "@babel/preset-typescript": "^7.29.7",
-    "@eslint/eslintrc": "^3.3.6",
+    "@eslint/eslintrc": "^3.3.7",
     "@rollup/plugin-commonjs": "^29.0.3",
     "@rollup/plugin-json": "^6.1.0",
     "@rollup/plugin-node-resolve": "^16.0.3",
     "@rollup/plugin-terser": "^1.0.0",
     "@rollup/plugin-typescript": "^12.3.0",
     "@storybook/addon-webpack5-compiler-babel": "^4.0.1",
-    "@storybook/react-webpack5": "10.5.10",
-    "@types/node": "^26.4.0",
+    "@storybook/react-webpack5": "10.6.0",
+    "@types/node": "^26.4.1",
     "@types/react": "^19.2.18",
-    "@types/react-dom": "^19.2.5",
+    "@types/react-dom": "^19.2.7",
     "@typescript-eslint/eslint-plugin": "^8.69.0",
     "@typescript-eslint/parser": "^8.69.0",
     "babel-loader": "^10.1.1",
     "babel-plugin-styled-components": "^2.3.0",
     "eslint": "^9.39.4",
     "eslint-plugin-react": "^7.37.5",
-    "eslint-plugin-storybook": "10.5.10",
+    "eslint-plugin-storybook": "10.6.0",
     "graphql": "^17.0.2",
-    "postcss": "^8.5.26",
+    "postcss": "^8.5.27",
     "rollup": "^4.63.1",
     "rollup-plugin-filesize": "^10.0.0",
     "rollup-plugin-postcss": "^4.0.2",
     "rollup-plugin-visualizer": "^7.1.1",
     "rxjs": "^7.8.2",
-    "storybook": "10.5.10",
+    "storybook": "10.6.0",
     "typescript": "^5.9.3"
   },
   "resolutions": {