Add this component

npx zentauri-ui add change-impact-explorer

Accessibility notes

Keyboard accessible by default with semantic markup, visible focus treatment, and tokenized states. Add descriptive labels for icon-only or decorative usage.

Dependency notes

Check Installation for shared peers. This component keeps styling in Tailwind classes and the --zui-* token contract.

Data exploration

Understand the reach of a proposed change

Review a proposed change through its supplied dependency graph. Explore affected consumers, shortest explanation paths, and application-provided before/after comparisons.

Impact review playground

Trace a proposed change, inspect a consumer, and follow its explanation path.

Appearance

Size

Direction

Depth

Dataset

State

Reading direction

Show dependency mapInclude outside analysisVirtualize large results

Change impact explorer

Explore the relationships behind a proposed change.

Proposed changeFind an item

Preview the reach of a public field rename before updating its consumers.

Changed: 1
Direct impact: 2
Downstream impact: 3
Outside traversal: 1

Dependency map

6 of 6 reachable items · shortest paths

Proposed change

Hop 1

Hop 2

Affected items

6 results

Use Up/Down, Home/End, or type a name to select an item.

API contract · Changed

Customer schema

The contract used by customer-facing integrations.

Connection to the proposed change

Customer schemaChanged item

Public field

Before

customer_id: string

After

account_id: string

Owner: Platform team

The 10,000-item fixture exercises bounded map rendering and windowed results. Priority, reasons, and comparisons are supplied by the application. No changes are executed.

Appearance gallery

Impact preview

Explore the relationships behind a proposed change.

Proposed changeFind an item

Preview the reach of a public field rename before updating its consumers.

Changed: 1
Direct impact: 1
Downstream impact: 0
Outside traversal: 0

Affected items

2 results

Use Up/Down, Home/End, or type a name to select an item.

Customer schema

Impact preview

Explore the relationships behind a proposed change.

Proposed changeFind an item

Preview the reach of a public field rename before updating its consumers.

Changed: 1
Direct impact: 1
Downstream impact: 0
Outside traversal: 0

Affected items

2 results

Use Up/Down, Home/End, or type a name to select an item.

Customer schema

Impact preview

Explore the relationships behind a proposed change.

Proposed changeFind an item

Preview the reach of a public field rename before updating its consumers.

Changed: 1
Direct impact: 1
Downstream impact: 0
Outside traversal: 0

Affected items

2 results

Use Up/Down, Home/End, or type a name to select an item.

Customer schema

Impact preview

Explore the relationships behind a proposed change.

Proposed changeFind an item

Preview the reach of a public field rename before updating its consumers.

Changed: 1
Direct impact: 1
Downstream impact: 0
Outside traversal: 0

Affected items

2 results

Use Up/Down, Home/End, or type a name to select an item.

Customer schema

Impact preview

Explore the relationships behind a proposed change.

Proposed changeFind an item

Preview the reach of a public field rename before updating its consumers.

Changed: 1
Direct impact: 1
Downstream impact: 0
Outside traversal: 0

Affected items

2 results

Use Up/Down, Home/End, or type a name to select an item.

Customer schema

Impact preview

Explore the relationships behind a proposed change.

Proposed changeFind an item

Preview the reach of a public field rename before updating its consumers.

Changed: 1
Direct impact: 1
Downstream impact: 0
Outside traversal: 0

Affected items

2 results

Use Up/Down, Home/End, or type a name to select an item.

Customer schema

Impact preview

Explore the relationships behind a proposed change.

Proposed changeFind an item

Preview the reach of a public field rename before updating its consumers.

Changed: 1
Direct impact: 1
Downstream impact: 0
Outside traversal: 0

Affected items

2 results

Use Up/Down, Home/End, or type a name to select an item.

Customer schema

Impact preview

Explore the relationships behind a proposed change.

Proposed changeFind an item

Preview the reach of a public field rename before updating its consumers.

Changed: 1
Direct impact: 1
Downstream impact: 0
Outside traversal: 0

Affected items

2 results

Use Up/Down, Home/End, or type a name to select an item.

Customer schema

Impact preview

Explore the relationships behind a proposed change.

Proposed changeFind an item

Preview the reach of a public field rename before updating its consumers.

Changed: 1
Direct impact: 1
Downstream impact: 0
Outside traversal: 0

Affected items

2 results

Use Up/Down, Home/End, or type a name to select an item.

Customer schema

Impact preview

Explore the relationships behind a proposed change.

Proposed changeFind an item

Preview the reach of a public field rename before updating its consumers.

Changed: 1
Direct impact: 1
Downstream impact: 0
Outside traversal: 0

Affected items

2 results

Use Up/Down, Home/End, or type a name to select an item.

Customer schema

Impact preview

Explore the relationships behind a proposed change.

Proposed changeFind an item

Preview the reach of a public field rename before updating its consumers.

Changed: 1
Direct impact: 1
Downstream impact: 0
Outside traversal: 0

Affected items

2 results

Use Up/Down, Home/End, or type a name to select an item.

Customer schema

Impact preview

Explore the relationships behind a proposed change.

Proposed changeFind an item

Preview the reach of a public field rename before updating its consumers.

Changed: 1
Direct impact: 1
Downstream impact: 0
Outside traversal: 0

Affected items

2 results

Use Up/Down, Home/End, or type a name to select an item.

Customer schema

Impact preview

Explore the relationships behind a proposed change.

Proposed changeFind an item

Preview the reach of a public field rename before updating its consumers.

Changed: 1
Direct impact: 1
Downstream impact: 0
Outside traversal: 0

Affected items

2 results

Use Up/Down, Home/End, or type a name to select an item.

Customer schema

Impact preview

Explore the relationships behind a proposed change.

Proposed changeFind an item

Preview the reach of a public field rename before updating its consumers.

Changed: 1
Direct impact: 1
Downstream impact: 0
Outside traversal: 0

Affected items

2 results

Use Up/Down, Home/End, or type a name to select an item.

Customer schema

Impact preview

Explore the relationships behind a proposed change.

Proposed changeFind an item

Preview the reach of a public field rename before updating its consumers.

Changed: 1
Direct impact: 1
Downstream impact: 0
Outside traversal: 0

Affected items

2 results

Use Up/Down, Home/End, or type a name to select an item.

Customer schema

Impact preview

Explore the relationships behind a proposed change.

Proposed changeFind an item

Preview the reach of a public field rename before updating its consumers.

Changed: 1
Direct impact: 1
Downstream impact: 0
Outside traversal: 0

Affected items

2 results

Use Up/Down, Home/End, or type a name to select an item.

Customer schema

Impact preview

Explore the relationships behind a proposed change.

Proposed changeFind an item

Preview the reach of a public field rename before updating its consumers.

Changed: 1
Direct impact: 1
Downstream impact: 0
Outside traversal: 0

Affected items

2 results

Use Up/Down, Home/End, or type a name to select an item.

Customer schema

Impact preview

Explore the relationships behind a proposed change.

Proposed changeFind an item

Preview the reach of a public field rename before updating its consumers.

Changed: 1
Direct impact: 1
Downstream impact: 0
Outside traversal: 0

Affected items

2 results

Use Up/Down, Home/End, or type a name to select an item.

Customer schema

Impact preview

Explore the relationships behind a proposed change.

Proposed changeFind an item

Preview the reach of a public field rename before updating its consumers.

Changed: 1
Direct impact: 1
Downstream impact: 0
Outside traversal: 0

Affected items

2 results

Use Up/Down, Home/End, or type a name to select an item.

Customer schema

Impact preview

Explore the relationships behind a proposed change.

Proposed changeFind an item

Preview the reach of a public field rename before updating its consumers.

Changed: 1
Direct impact: 1
Downstream impact: 0
Outside traversal: 0

Affected items

2 results

Use Up/Down, Home/End, or type a name to select an item.

Customer schema

Impact preview

Explore the relationships behind a proposed change.

Proposed changeFind an item

Preview the reach of a public field rename before updating its consumers.

Changed: 1
Direct impact: 1
Downstream impact: 0
Outside traversal: 0

Affected items

2 results

Use Up/Down, Home/End, or type a name to select an item.

Customer schema

Impact preview

Explore the relationships behind a proposed change.

Proposed changeFind an item

Preview the reach of a public field rename before updating its consumers.

Changed: 1
Direct impact: 1
Downstream impact: 0
Outside traversal: 0

Affected items

2 results

Use Up/Down, Home/End, or type a name to select an item.

Customer schema

Impact preview

Explore the relationships behind a proposed change.

Proposed changeFind an item

Preview the reach of a public field rename before updating its consumers.

Changed: 1
Direct impact: 1
Downstream impact: 0
Outside traversal: 0

Affected items

2 results

Use Up/Down, Home/End, or type a name to select an item.

Customer schema

Impact preview

Explore the relationships behind a proposed change.

Proposed changeFind an item

Preview the reach of a public field rename before updating its consumers.

Changed: 1
Direct impact: 1
Downstream impact: 0
Outside traversal: 0

Affected items

2 results

Use Up/Down, Home/End, or type a name to select an item.

Customer schema

Impact preview

Explore the relationships behind a proposed change.

Proposed changeFind an item

Preview the reach of a public field rename before updating its consumers.

Changed: 1
Direct impact: 1
Downstream impact: 0
Outside traversal: 0

Affected items

2 results

Use Up/Down, Home/End, or type a name to select an item.

Customer schema

Impact preview

Explore the relationships behind a proposed change.

Proposed changeFind an item

Preview the reach of a public field rename before updating its consumers.

Changed: 1
Direct impact: 1
Downstream impact: 0
Outside traversal: 0

Affected items

2 results

Use Up/Down, Home/End, or type a name to select an item.

Customer schema

Change Impact Explorer recipes

Public contract change

Change impact explorer

Explore the relationships behind a proposed change.

Proposed changeFind an item

Preview the reach of a public field rename before updating its consumers.

Changed: 1
Direct impact: 2
Downstream impact: 3
Outside traversal: 1

Dependency map

6 of 6 reachable items · shortest paths

Proposed change

Hop 1

Hop 2

Affected items

6 results

Use Up/Down, Home/End, or type a name to select an item.

Application · Indirect

Account dashboard

Uses the SDK and billing data.

Connection to the proposed change

Customer schemaChanged item
Generates SDK types from the schema
TypeScript SDK
Imports customer types from the SDK
Account dashboard

Application usage

Before

customer.customer_id

After

customer.account_id

Controlled review selection

Change impact explorer

Explore the relationships behind a proposed change.

Proposed changeFind an item

Preview the reach of a public field rename before updating its consumers.

Changed: 1
Direct impact: 2
Downstream impact: 3
Outside traversal: 1

Dependency map

6 of 6 reachable items · shortest paths

Proposed change

Hop 1

Hop 2

Affected items

6 results

Use Up/Down, Home/End, or type a name to select an item.

Integration · Direct

TypeScript SDK

Generated types expose the public schema.

Connection to the proposed change

Customer schemaChanged item
Generates SDK types from the schema
TypeScript SDK

Type definition

Before

type Customer = { customer_id: string }

After

type Customer = { account_id: string }

Selected item: sdk · Proposal: rename

Upstream dependencies and custom details

Change impact explorer

Explore the relationships behind a proposed change.

Proposed changeFind an item

Changed: 1
Direct dependencies: 2
Further upstream: 2
Outside traversal: 2

Dependency map

5 of 5 reachable items · shortest paths

Proposed change

Hop 1

Hop 2

Dependencies

5 results

Use Up/Down, Home/End, or type a name to select an item.

Customer schema

Owner-provided review content can appear here.

3 steps connect this item to the selected change.

10,000 consumers with bounded rendering

Change impact explorer

Explore the relationships behind a proposed change.

Proposed changeFind an item

Changed: 1
Direct impact: 9999
Downstream impact: 0
Outside traversal: 0

Dependency map

12 of 10000 reachable items · shortest paths

Proposed change

Hop 1

Additional items are available in the searchable results below.

Affected items

10000 results

Use Up/Down, Home/End, or type a name to select an item.

Contract · Changed

Consumer 00000

Connection to the proposed change

Consumer 00000Changed item

Graph contract and performance

Each edge points from a dependency to its consumer: source → target. Downstream mode finds consumers of changed nodes; upstream mode finds dependencies of those nodes. Multiple sources, diamonds, self-links, and cycles are supported. One shortest path is retained, with input order breaking ties.

IDs must be nonempty and unique for nodes, edges, and proposals. Duplicate IDs throw a descriptive error. Dangling edges and missing changed-node IDs are reported and excluded. A depth limit makes the analysis partial; items outside that analysis are not necessarily unaffected.

Indexing and traversal are linear in graph size. Keep nodes, edges, and changes references stable between updates. Search does not rebuild adjacency, and paths are materialized only for the selected item. Maps mount at most mapNodeLimit nodes; results over 100 rows are windowed by default. The default detail path shows the last 12 steps of long chains.

The layout responds to its container width, so controls and details stack in narrow sidebars as well as mobile screens.

Comparisons, edge reasons, priorities, and review decisions come from the application. This component displays reachability through supplied relationships; it does not execute changes or infer business outcomes.

The static entry also exports buildChangeImpactGraph(nodes, edges), analyzeChangeImpact(graph, nodeIds, { direction, maxDepth }), and getChangeImpactPath(analysis, nodeId) for headless indexing, traversal, and explanation paths. In Server Components, import these helpers from the server-safe entry @zentauri-ui/zentauri-components/ui/change-impact-explorer/graph.

Keyboard and composition

Tab reaches the named proposal selector, search input, map buttons, and result list. Up/Down, Home/End, and typeahead select result items while focus stays on the listbox. Virtual rows expose position and total size, and active descendants reference mounted options. Give renderNode noninteractive content; put links and actions in renderDetails. Custom result content must fit rowHeight.

Controlled proposal, selection, and query props call their change handlers without modifying the supplied values. A custom details renderer mounts only for the selected item. No data is fetched internally.

Change Impact Explorer API

Generated from the package prop types and variant definitions.

ChangeImpactExplorer

ChangeImpactExplorerProps

Variants

Prop	Type	Default
appearance	`bluecontrastcyandefaultemeraldglassgradient-bluegradient-greengradient-orangegradient-pinkgradient-purplegray`+14	default
size	`lgmdsm`	md

Behavior

Prop	Type	Default
changeId	`string \| undefined`	none
changes*	`readonly ChangeImpactChange[]`	none
defaultChangeId	`string \| undefined`	none
defaultQuery	`string \| undefined`	none
defaultSelectedNodeId	`string \| undefined`	none
direction	`ChangeImpactDirection \| undefined`	downstream
edges*	`readonly ChangeImpactEdge[]`	none
emptyContent	`ReactNode`	none
error	`ReactNode`	none
listHeightResult viewport height in pixels.	`number \| undefined`	384
loading	`boolean \| undefined`	false
mapNodeLimitMaximum nodes mounted in the map.	`number \| undefined`	24
maxDepthMaximum traversal hops; omitted means unlimited. Zero shows changed nodes only.	`number \| undefined`	none
nodes*	`readonly ChangeImpactNode[]`	none
onChangeIdChange	`((id: string) => void) \| undefined`	none
onQueryChange	`((query: string) => void) \| undefined`	none
onSelectedNodeIdChange	`((id: string, node: ChangeImpactNode) => void) \| undefined`	none
query	`string \| undefined`	none
renderDetails	`((context: ChangeImpactDetailsContext) => ReactNode) \| undefined`	none
renderNodeNoninteractive node content for map cards and listbox options.	`((entry: ChangeImpactEntry) => ReactNode) \| undefined`	none
rowHeightFixed row height in pixels; custom node content must fit this height.	`number \| undefined`	64
selectedNodeId	`string \| undefined`	none
showMapRender the bounded dependency map above the results.	`boolean \| undefined`	true
showOutsideAnalysisInclude nodes outside this traversal in the results.	`boolean \| undefined`	false
title	`ReactNode`	Change impact explorer
virtualizeWindow result rows when the list has more than 100 items.	`boolean \| undefined`	true

Inherited HTML props

Prop	Type	Default
className	`string \| undefined`	none
id	`string \| undefined`	none
onClick	`MouseEventHandler<HTMLElement> \| undefined`	none
style	`CSSProperties \| undefined`	none

Installation and theming

pnpm add @zentauri-ui/zentauri-components
# Or vendor the source (initialize once per app):
pnpm dlx @zentauri-ui/zentauri-components init
pnpm dlx @zentauri-ui/zentauri-components add change-impact-explorer

The static entry has no animation peer. The source CLI includes the virtual-list hook and shared utilities.

@import "tailwindcss";
@source "../node_modules/@zentauri-ui/zentauri-components";

.impact-review {
  --zui-change-impact-explorer-radius: 1.25rem;
  --zui-change-impact-explorer-radius-dark: 1.25rem;
  --zui-change-impact-explorer-focus-ring: #7c3aed;
  --zui-change-impact-explorer-focus-ring-dark: #c4b5fd;
}

Apply className="impact-review" to the root. Adjust the Tailwind source path for your stylesheet.

Browse every light and dark token

CSS variable overrides

Change Impact Explorer CSS variables

Theme the explorer surfaces, appearances, sizes, selected rows, spacing, and visible focus treatment.

190 variables

Pattern: --zui-<component>-<slot?>-<variant?>-<property>-<state?>-dark?

:root {
  --zui-change-impact-explorer-map-height: 24rem;
  --zui-change-impact-explorer-radius: 1rem;
  --zui-change-impact-explorer-border-width: 1px;
  --zui-change-impact-explorer-padding: 1rem;
  --zui-change-impact-explorer-focus-width: 2px;
  --zui-change-impact-explorer-focus-offset: 2px;
  --zui-change-impact-explorer-focus-ring: currentColor;
  --zui-change-impact-explorer-selected-bg: #64748b1a;
  --zui-change-impact-explorer-font-size-sm: 0.75rem;
  --zui-change-impact-explorer-font-size-md: 0.875rem;
  --zui-change-impact-explorer-font-size-lg: 1rem;
  --zui-change-impact-explorer-default-bg: #ffffff;
  --zui-change-impact-explorer-default-fg: #0f172a;
  --zui-change-impact-explorer-default-border: #e2e8f0;
  --zui-change-impact-explorer-subtle-bg: #f8fafc;
  --zui-change-impact-explorer-subtle-fg: #334155;
  --zui-change-impact-explorer-subtle-border: #e2e8f0;
  --zui-change-impact-explorer-contrast-bg: #0f172a;
  --zui-change-impact-explorer-contrast-fg: #f8fafc;
  --zui-change-impact-explorer-contrast-border: #334155;
  --zui-change-impact-explorer-glass-bg: #ffffffb3;
  --zui-change-impact-explorer-glass-fg: #0f172a;
  --zui-change-impact-explorer-glass-border: #cbd5e1;
  --zui-change-impact-explorer-glass-blur: 12px;
  --zui-change-impact-explorer-blue-bg: #eff6ff;
  --zui-change-impact-explorer-blue-fg: #1e40af;
  --zui-change-impact-explorer-blue-border: #bfdbfe;
  --zui-change-impact-explorer-cyan-bg: #ecfeff;
  --zui-change-impact-explorer-cyan-fg: #155e75;
  --zui-change-impact-explorer-cyan-border: #a5f3fc;
  --zui-change-impact-explorer-green-bg: #f0fdf4;
  --zui-change-impact-explorer-green-fg: #166534;
  --zui-change-impact-explorer-green-border: #bbf7d0;
  --zui-change-impact-explorer-lime-bg: #f7fee7;
  --zui-change-impact-explorer-lime-fg: #3f6212;
  --zui-change-impact-explorer-lime-border: #d9f99d;
  --zui-change-impact-explorer-emerald-bg: #ecfdf5;
  --zui-change-impact-explorer-emerald-fg: #065f46;
  --zui-change-impact-explorer-emerald-border: #a7f3d0;
  --zui-change-impact-explorer-indigo-bg: #eef2ff;
  --zui-change-impact-explorer-indigo-fg: #3730a3;
  --zui-change-impact-explorer-indigo-border: #c7d2fe;
  --zui-change-impact-explorer-purple-bg: #faf5ff;
  --zui-change-impact-explorer-purple-fg: #6b21a8;
  --zui-change-impact-explorer-purple-border: #e9d5ff;
  --zui-change-impact-explorer-pink-bg: #fdf2f8;
  --zui-change-impact-explorer-pink-fg: #9d174d;
  --zui-change-impact-explorer-pink-border: #fbcfe8;
  --zui-change-impact-explorer-rose-bg: #fff1f2;
  --zui-change-impact-explorer-rose-fg: #9f1239;
  --zui-change-impact-explorer-rose-border: #fecdd3;
  --zui-change-impact-explorer-sky-bg: #f0f9ff;
  --zui-change-impact-explorer-sky-fg: #075985;
  --zui-change-impact-explorer-sky-border: #bae6fd;
  --zui-change-impact-explorer-teal-bg: #f0fdfa;
  --zui-change-impact-explorer-teal-fg: #115e59;
  --zui-change-impact-explorer-teal-border: #99f6e4;
  --zui-change-impact-explorer-yellow-bg: #fefce8;
  --zui-change-impact-explorer-yellow-fg: #854d0e;
  --zui-change-impact-explorer-yellow-border: #fef08a;
  --zui-change-impact-explorer-orange-bg: #fff7ed;
  --zui-change-impact-explorer-orange-fg: #9a3412;
  --zui-change-impact-explorer-orange-border: #fed7aa;
  --zui-change-impact-explorer-red-bg: #fef2f2;
  --zui-change-impact-explorer-red-fg: #991b1b;
  --zui-change-impact-explorer-red-border: #fecaca;
  --zui-change-impact-explorer-slate-bg: #f8fafc;
  --zui-change-impact-explorer-slate-fg: #334155;
  --zui-change-impact-explorer-slate-border: #cbd5e1;
  --zui-change-impact-explorer-gray-bg: #f9fafb;
  --zui-change-impact-explorer-gray-fg: #374151;
  --zui-change-impact-explorer-gray-border: #d1d5db;
  --zui-change-impact-explorer-zinc-bg: #fafafa;
  --zui-change-impact-explorer-zinc-fg: #3f3f46;
  --zui-change-impact-explorer-zinc-border: #d4d4d8;
  --zui-change-impact-explorer-gradient-blue-from: #eff6ff;
  --zui-change-impact-explorer-gradient-blue-to: #faf5ff;
  --zui-change-impact-explorer-gradient-blue-fg: #0f172a;
  --zui-change-impact-explorer-gradient-blue-border: #bfdbfe;
  --zui-change-impact-explorer-gradient-green-from: #f0fdf4;
  --zui-change-impact-explorer-gradient-green-to: #f7fee7;
  --zui-change-impact-explorer-gradient-green-fg: #0f172a;
  --zui-change-impact-explorer-gradient-green-border: #bbf7d0;
  --zui-change-impact-explorer-gradient-purple-from: #faf5ff;
  --zui-change-impact-explorer-gradient-purple-to: #fdf2f8;
  --zui-change-impact-explorer-gradient-purple-fg: #0f172a;
  --zui-change-impact-explorer-gradient-purple-border: #e9d5ff;
  --zui-change-impact-explorer-gradient-orange-from: #fff7ed;
  --zui-change-impact-explorer-gradient-orange-to: #fefce8;
  --zui-change-impact-explorer-gradient-orange-fg: #0f172a;
  --zui-change-impact-explorer-gradient-orange-border: #fed7aa;
  --zui-change-impact-explorer-gradient-pink-from: #fdf2f8;
  --zui-change-impact-explorer-gradient-pink-to: #fff1f2;
  --zui-change-impact-explorer-gradient-pink-fg: #0f172a;
  --zui-change-impact-explorer-gradient-pink-border: #fbcfe8;
}

/* Dark theme variables follow the same names with -dark appended. */
.dark {
  --zui-change-impact-explorer-map-height-dark: 24rem;
  --zui-change-impact-explorer-radius-dark: 1rem;
  /* ...same variables with -dark at the end */
}

What it does

Trace proposed changes through dependency graphs with shortest explanation paths, before/after comparisons, search, and bounded rendering.

Common use cases

API and schema migration reviews.
Configuration and integration change planning.
Release dependency inspection.

Accessibility

Named controls, keyboard listbox navigation, mounted active descendants, and noninteractive gallery samples support accessible reviews.

FAQ

Does it predict business impact?

It traces supplied relationships. Reasons, priorities, and comparisons are provided by the application.

Can it handle cycles and multiple changed items?

Yes. Multi-source breadth-first traversal visits each reachable node once and retains one shortest explanation path.

How does it handle large graphs?

The graph index is memoized, map nodes are bounded, and result collections over 100 items are windowed by default.

What does a depth limit mean?

The analysis is partial. Nodes outside the limit can still be affected; they are hidden by default and labeled outside analysis only when showOutsideAnalysis is enabled.