diff --git a/packages/apollo-react/src/canvas/README.md b/packages/apollo-react/src/canvas/README.md
index 7395e635e..97f4370d5 100644
--- a/packages/apollo-react/src/canvas/README.md
+++ b/packages/apollo-react/src/canvas/README.md
@@ -195,3 +195,90 @@ If you already use `@uipath/apollo-react/canvas/styles/variables.css` with shado
**Cause:** The Tailwind base layer includes `* { border-color: var(--color-border-de-emp) }` and `body { background-color: var(--background) }`. These may conflict with existing component styles.
**Fix:** These rules are in `@layer base`, so they lose to un-layered styles. If conflicts persist in Shadow DOM, override with more specific selectors in your injected CSS.
+
+---
+
+## Sequential view
+
+`SequentialCanvas` is an n8n/Zapier-style vertical projection of the same flow graph, built on the existing `BaseCanvas`. It reuses the same node manifests, icons, execution status, validation badges, and theming as the flow view; only the layout is different. A `ViewSwitcher` lets the host toggle a canvas between the free-form `flow` layout and the vertical `sequential` layout.
+
+### Projection model
+
+The consumer keeps one canonical `nodes`/`edges` array. `SequentialCanvas` derives vertical geometry from graph structure and never writes that geometry back. Entering Flow through `prepareCanvasViewTransition` computes a deterministic left-to-right layout and updates only canonical presentation fields (`position` and container dimensions); ids, data, containment, handles, and edges are unchanged. Nodes added in Sequential are normalized during the same transition.
+
+Sequential is not a symmetric conversion for every graph. `prepareCanvasViewTransition('sequential', ...)` returns a compatibility report with a `level` and an `editable` flag, and the guidance is three-way:
+
+1. **Editable.** `level: 'exact'`, and also `level: 'degraded'` when the only issues are `multiple-roots` or `orphan`. These graphs render correctly and are recoverable by ordinary editing, so keep them fully editable. Locking the view as soon as a user has two disconnected steps would lock them out of the only view that flags the problem.
+2. **Read-only.** A report containing a `cycle` or `unstructured-merge` issue. The slot-based mutation operations cannot express a safe splice across a `goto` connector, because a `goto` carries no insertion slot.
+3. **Not supported.** `level: 'unsupported'`, which means malformed containment (a duplicate node id, a missing parent, or a parent cycle).
+
+The component does not enforce any of this. The host reads `report.editable` and chooses the `mode` it passes to `SequentialCanvas`, which is what the example below does. Presentation-only nodes and edges can be excluded from the projection and preserved in the canonical graph.
+
+### Availability
+
+Everything ships from `@uipath/apollo-react/canvas`, the same entry point as the rest of the canvas. The component surface (`SequentialCanvas`, `SequentialCanvasProps`, `prepareCanvasViewTransition`, `ViewSwitcher`, `useCanvasViewMode`, `SequentialViewProvider`) and the pure projection engine (`analyzeSequentialCompatibility`, `projectSequence`, `layoutSequence`, the report types) are both re-exported from it, and both follow the package's normal semver.
+
+One caveat to plan around: the sequential view is pre-GA. Its documented v1 limitations (see "Degraded graphs" below, plus bare branch owners that cannot be moved and loop-close edges that are not relocated) mean the props are still likely to change, so pin the package version if you adopt it early and read the release notes before upgrading. If you only need to reason about a graph rather than render it, depend on the projection engine and skip the component entirely: it is pure, has no xyflow or registry dependency, and is the more settled half of the two.
+
+### Minimal usage
+
+```tsx
+import { useState } from 'react';
+import { applyEdgeChanges, applyNodeChanges } from '@uipath/apollo-react/canvas/xyflow/react';
+import {
+ prepareCanvasViewTransition,
+ SequentialCanvas,
+ useCanvasViewMode,
+ ViewSwitcher,
+} from '@uipath/apollo-react/canvas';
+
+function MyFlow({ initialNodes, initialEdges }) {
+ const [view, setView] = useCanvasViewMode('my-flow.view');
+ const [nodes, setNodes] = useState(initialNodes);
+ const [edges, setEdges] = useState(initialEdges);
+ const [report, setReport] = useState(undefined);
+
+ const changeView = (nextView) => {
+ const transition = prepareCanvasViewTransition(nextView, nodes, edges);
+ setNodes(transition.nodes);
+ // Only populated when entering sequential. Recompute it whenever the graph
+ // changes while sequential is on screen, or the advice below goes stale.
+ setReport(transition.sequentialCompatibility);
+ setView(nextView);
+ };
+
+ // The component never locks itself. The host decides, from `editable`.
+ const mode = view === 'sequential' && report && !report.editable ? 'readonly' : 'design';
+
+ return (
+
+ ),
+}));
+
+import { SEQ_HANDLE_LEFT_OFFSET } from '../../constants';
+import { BaseNode } from './BaseNode';
+import { INVISIBLE_HANDLE_STYLE } from './BaseNodeBar';
+import { BaseNodeBarNode } from './BaseNodeBarNode';
+
+const defaultProps: NodeProps> = {
+ id: 'step-1',
+ type: 'uipath.http',
+ data: {},
+ selected: false,
+ dragging: false,
+ draggable: true,
+ zIndex: 0,
+ isConnectable: true,
+ positionAbsoluteX: 0,
+ positionAbsoluteY: 0,
+ selectable: true,
+ deletable: true,
+};
+
+describe('BaseNodeBar (sequential bar variant)', () => {
+ afterEach(() => {
+ mockUpdateNode.mockClear();
+ mockNodeState.current = { height: undefined, width: undefined };
+ mockHandleConfigs.current = undefined;
+ mockOverrideConfig.current = {};
+ mockMode.current = 'design';
+ mockNodeLabel.mockClear();
+ mockSelectionState.current = { multipleNodesSelected: false };
+ mockManifest.current = {
+ display: { label: 'HTTP Request', shape: 'rectangle', icon: 'globe' },
+ handleConfiguration: [],
+ };
+ });
+
+ // The core visual-drift contract: the same node resolves to the same display
+ // (label / icon / color source) whether it renders as a card or a bar.
+ describe('display parity with the card variant', () => {
+ it('renders the identical resolved label and icon', () => {
+ const { unmount } = render();
+ const cardLabel = screen.getByTestId('node-label').textContent;
+ expect(screen.getAllByTestId('node-icon').length).toBeGreaterThan(0);
+ unmount();
+
+ render();
+ expect(screen.getByTestId('node-label').textContent).toBe(cardLabel);
+ expect(screen.getAllByTestId('node-icon').length).toBeGreaterThan(0);
+ });
+
+ it('feeds the icon shape from the same color source', () => {
+ const { unmount } = render();
+ const cardShape = screen.getByTestId('inner-shape');
+ const cardBg = cardShape.getAttribute('data-background');
+ const cardColor = cardShape.getAttribute('data-color');
+ unmount();
+
+ render();
+ const barShape = screen.getByTestId('inner-shape');
+ expect(barShape.getAttribute('data-background')).toBe(cardBg);
+ expect(barShape.getAttribute('data-color')).toBe(cardColor);
+ expect(cardBg).toBe('#611f69');
+ });
+ });
+
+ describe('bar geometry', () => {
+ it('renders at the fixed 896x56 bar size regardless of handle count', () => {
+ render();
+ const bar = screen.getByTestId('sequential-bar');
+ expect(bar.style.getPropertyValue('--node-w')).toBe('896px');
+ expect(bar.style.getPropertyValue('--node-h')).toBe('56px');
+ });
+
+ // The sequential layout stamps an explicit width on every derived bar, and
+ // that declared value is what the bar must paint. XYFlow's `width` prop is the
+ // MEASURED width, which lags a barWidth change by a render and still reports
+ // the flow-view card width right after a flow->sequential toggle.
+ it('sizes the bar from the declared node width, not the measured width prop', () => {
+ mockNodeState.current = { ...mockNodeState.current, width: 560 };
+ render();
+ expect(screen.getByTestId('sequential-bar').style.getPropertyValue('--node-w')).toBe('560px');
+ });
+
+ // A consumer whose barWidth happens to equal a card default must still get the
+ // width it asked for. The previous sentinel check discarded exactly these two
+ // values and silently substituted 896.
+ it.each([96, 288])('honors a declared width of %ipx that matches a card default', (width) => {
+ mockNodeState.current = { ...mockNodeState.current, width };
+ render();
+ expect(screen.getByTestId('sequential-bar').style.getPropertyValue('--node-w')).toBe(
+ `${width}px`
+ );
+ });
+
+ // The standalone path: no sequential derivation, so no declared width. The
+ // isolated card-vs-bar story reaches the renderer this way.
+ it('falls back to the default bar width when the node declares none', () => {
+ render();
+ expect(screen.getByTestId('sequential-bar').style.getPropertyValue('--node-w')).toBe('896px');
+ });
+
+ it('writes the fixed bar height (56) back to node.height', () => {
+ render();
+ expect(mockUpdateNode).toHaveBeenCalledWith('step-1', { height: 56 });
+ });
+ });
+
+ it('paints the left accent strip from the resolved icon background', () => {
+ render();
+ const accent = screen.getByTestId('sequential-bar-accent');
+ // Rendered as an inset box-shadow so the stripe follows the bar's rounded
+ // corners rather than a square-cornered strip.
+ expect(accent.style.boxShadow).toContain('#611f69');
+ });
+
+ it('keeps inline rename enabled in design mode (readonly=false, onChange wired)', () => {
+ render();
+ const labelProps = mockNodeLabel.mock.calls.at(-1)?.[0];
+ expect(labelProps.readonly).toBe(false);
+ expect(typeof labelProps.onChange).toBe('function');
+ expect(labelProps.shape).toBe('rectangle');
+ });
+
+ it('disables rename outside design mode', () => {
+ mockMode.current = 'view';
+ render();
+ expect(mockNodeLabel.mock.calls.at(-1)?.[0].readonly).toBe(true);
+ });
+
+ describe('trailing group', () => {
+ it('renders the toolbar actions as a kebab when selected', () => {
+ mockOverrideConfig.current = {
+ toolbarConfig: {
+ actions: [{ id: 'delete', icon: , label: 'Delete', onAction: vi.fn() }],
+ },
+ };
+ render();
+ expect(screen.getByLabelText('More options')).toBeInTheDocument();
+ });
+
+ it('fires the toolbar action with the node id when the item is selected', () => {
+ const onAction = vi.fn();
+ mockOverrideConfig.current = {
+ toolbarConfig: {
+ actions: [{ id: 'delete', icon: , label: 'Delete', onAction }],
+ },
+ };
+ render();
+ fireEvent.click(screen.getByText('Delete'));
+ expect(onAction).toHaveBeenCalledWith('step-1');
+ });
+
+ it('resolves a string toolbar icon through the icon registry instead of rendering it as literal text', () => {
+ mockOverrideConfig.current = {
+ toolbarConfig: {
+ actions: [{ id: 'delete', icon: 'trash', label: 'Delete', onAction: vi.fn() }],
+ },
+ };
+ render();
+ expect(screen.getByTestId('canvas-icon-trash')).toBeInTheDocument();
+ expect(screen.queryByText('trash')).not.toBeInTheDocument();
+ });
+
+ it('still renders a custom React node icon as-is (no double resolution)', () => {
+ mockOverrideConfig.current = {
+ toolbarConfig: {
+ actions: [
+ {
+ id: 'delete',
+ icon: ,
+ label: 'Delete',
+ onAction: vi.fn(),
+ },
+ ],
+ },
+ };
+ render();
+ expect(screen.getByTestId('custom-icon')).toBeInTheDocument();
+ });
+
+ it('hides the kebab when multiple nodes are selected, mirroring the card toolbar gating', () => {
+ mockOverrideConfig.current = {
+ toolbarConfig: {
+ actions: [{ id: 'delete', icon: , label: 'Delete', onAction: vi.fn() }],
+ },
+ };
+ mockSelectionState.current = { multipleNodesSelected: true };
+ render();
+ expect(screen.queryByLabelText('More options')).not.toBeInTheDocument();
+ });
+
+ it('shows the status indicator when not action-needed', () => {
+ render();
+ expect(screen.getByTestId('status-indicator')).toBeInTheDocument();
+ expect(screen.queryByText('Action needed')).not.toBeInTheDocument();
+ });
+
+ it('gives the Action needed pill precedence over the status indicator', () => {
+ const onActionNeeded = vi.fn();
+ mockOverrideConfig.current = { executionStatusOverride: 'ActionNeeded', onActionNeeded };
+ render();
+
+ expect(screen.queryByTestId('status-indicator')).not.toBeInTheDocument();
+ const pill = screen.getByText('Action needed');
+ fireEvent.click(pill);
+ expect(onActionNeeded).toHaveBeenCalledWith('step-1');
+ });
+ });
+
+ describe('extraMenuItems passthrough', () => {
+ it('shows the kebab from extraMenuItems alone, with no toolbar configured', () => {
+ render(
+
+ );
+ expect(screen.getByLabelText('More options')).toBeInTheDocument();
+ expect(screen.getByText('Move up')).toBeInTheDocument();
+ });
+
+ it('appends extraMenuItems after the toolbar actions with a divider between the two groups', () => {
+ mockOverrideConfig.current = {
+ toolbarConfig: {
+ actions: [{ id: 'delete', icon: , label: 'Delete', onAction: vi.fn() }],
+ },
+ };
+ const { container } = render(
+
+ );
+ expect(screen.getByText('Delete')).toBeInTheDocument();
+ expect(screen.getByText('Move up')).toBeInTheDocument();
+ // DropdownMenuSeparator is mocked to (see the @uipath/apollo-wind mock above).
+ expect(container.querySelectorAll('hr')).toHaveLength(1);
+ });
+
+ it('fires an extraMenuItems action on click', () => {
+ const onClick = vi.fn();
+ render(
+
+ );
+ fireEvent.click(screen.getByText('Move up'));
+ expect(onClick).toHaveBeenCalledTimes(1);
+ });
+
+ it('renders a disabled extraMenuItems action as disabled', () => {
+ render(
+
+ );
+ expect(screen.getByText('Move up').closest('button')).toBeDisabled();
+ });
+
+ it('renders no kebab at all when there is neither a toolbar nor extraMenuItems', () => {
+ render();
+ expect(screen.queryByLabelText('More options')).not.toBeInTheDocument();
+ });
+ });
+
+ describe('display parity: background and shadow', () => {
+ it('applies display.background as an inline background style, like BaseContainer', () => {
+ mockManifest.current = {
+ display: {
+ label: 'HTTP Request',
+ shape: 'rectangle',
+ icon: 'globe',
+ background: 'linear-gradient(90deg, #611f69, #0ea5e9)',
+ },
+ handleConfiguration: [],
+ };
+ render();
+ const bar = screen.getByTestId('sequential-bar');
+ expect(bar.style.background).toContain('linear-gradient');
+ });
+
+ it('renders the rest shadow class by default (display.shadow unset)', () => {
+ render();
+ const bar = screen.getByTestId('sequential-bar');
+ expect(bar.className).toContain('shadow-(--canvas-node-shadow-rest)');
+ });
+
+ it('omits the rest shadow class when display.shadow is false, like BaseContainer', () => {
+ mockManifest.current = {
+ display: { label: 'HTTP Request', shape: 'rectangle', icon: 'globe', shadow: false },
+ handleConfiguration: [],
+ };
+ render();
+ const bar = screen.getByTestId('sequential-bar');
+ expect(bar.className).not.toContain('shadow-(--canvas-node-shadow-rest)');
+ });
+ });
+
+ describe('loading accessibility', () => {
+ it('sets aria-busy on the bar shell while loading, matching BaseContainer', () => {
+ render();
+ const bar = screen.getByTestId('sequential-bar');
+ expect(bar).toHaveAttribute('aria-busy', 'true');
+ });
+
+ it('omits aria-busy when not loading', () => {
+ render();
+ const bar = screen.getByTestId('sequential-bar');
+ expect(bar).not.toHaveAttribute('aria-busy');
+ });
+ });
+
+ // Connectors anchor to the bar's bottom-left / top-left
+ // region instead of its horizontal center. `Handle` itself is stubbed to
+ // `null` above (BaseNode's Handle-rendering internals aren't under test
+ // here), so this asserts directly against the shared style object BOTH the
+ // top target and bottom source handles use -- the actual source of truth
+ // xyflow reads to position the real handle DOM nodes in production.
+ describe('handle anchoring', () => {
+ it('anchors the invisible top/bottom handles at SEQ_HANDLE_LEFT_OFFSET from the bar left edge, not the horizontal center', () => {
+ expect(INVISIBLE_HANDLE_STYLE.left).toBe(SEQ_HANDLE_LEFT_OFFSET);
+ });
+ });
+
+ // A collapsed collapsible sequential row renders the same
+ // decorative "stacked" treatment BaseContainer applies to drillable/collapsed
+ // cards (a layered bar peeking out behind), driven by a `stacked` prop
+ // (threaded via context by SequentialStepNode, never node.data) rather than
+ // any state BaseNodeBar derives itself.
+ describe('collapsed stacked treatment', () => {
+ it('renders no stacked-layer classes or data-stacked attribute by default', () => {
+ render();
+ const bar = screen.getByTestId('sequential-bar');
+ expect(bar).not.toHaveAttribute('data-stacked');
+ expect(bar.className).not.toContain('before:border-brand');
+ });
+
+ it('renders the stacked-layer classes and data-stacked when stacked=true', () => {
+ render();
+ const bar = screen.getByTestId('sequential-bar');
+ expect(bar).toHaveAttribute('data-stacked', 'true');
+ expect(bar.className).toContain('before:border-brand');
+ expect(bar.className).toContain('before:-z-10');
+ expect(bar.className).toContain('before:translate-y-[6px]');
+ });
+ });
+});
diff --git a/packages/apollo-react/src/canvas/components/BaseNode/BaseNodeBar.tsx b/packages/apollo-react/src/canvas/components/BaseNode/BaseNodeBar.tsx
new file mode 100644
index 000000000..490747d7b
--- /dev/null
+++ b/packages/apollo-react/src/canvas/components/BaseNode/BaseNodeBar.tsx
@@ -0,0 +1,390 @@
+import { Handle, Position } from '@uipath/apollo-react/canvas/xyflow/react';
+import { cn } from '@uipath/apollo-wind';
+import { memo, useMemo, useState } from 'react';
+import { useSafeLingui } from '../../../i18n';
+import { SEQ_BAR_HEIGHT, SEQ_BAR_WIDTH, SEQ_HANDLE_LEFT_OFFSET } from '../../constants';
+import type { SuggestionType } from '../../types';
+import type { ElementStatusValues } from '../../types/execution';
+import type { ValidationErrorSeverity } from '../../types/validation';
+import { CanvasIcon } from '../../utils/icon-registry';
+import type { NodeMenuItem } from '../NodeContextMenu';
+import { CanvasDropdownMenu } from '../shared/CanvasDropdownMenu';
+import type { NodeToolbarConfig } from '../Toolbar';
+import { getStatusBorder } from './BaseNodeContainer';
+import { BaseInnerShape } from './BaseNodeInnerShape';
+import { NodeLabel, type NodeLabelProps } from './NodeLabel';
+
+/**
+ * Bar geometry as CSS custom properties, shared by the manifest-backed step bar
+ * (BaseNodeBar) and the synthetic start / placeholder bars so all three render
+ * at an identical size. Fixed values (not the card's ratio math) because a
+ * compact row needs a constant icon box rather than one that scales with the
+ * container aspect ratio. Icon box shrunk to ~32px (from 40px) to stay
+ * balanced against the tightened `SEQ_BAR_HEIGHT`; the
+ * icon-to-box and radius-to-box ratios are unchanged from the original.
+ */
+export const SEQ_BAR_VARS = {
+ '--node-w': `${SEQ_BAR_WIDTH}px`,
+ '--node-h': `${SEQ_BAR_HEIGHT}px`,
+ '--node-radius': '12px',
+ '--inner-w': '32px',
+ '--inner-h': '32px',
+ '--inner-radius': '8px',
+ '--icon-size': '16px',
+} as React.CSSProperties;
+
+/** Returns the shared bar CSS variables with optional layout-owned dimensions. */
+export function getSeqBarVars(width = SEQ_BAR_WIDTH, height = SEQ_BAR_HEIGHT): React.CSSProperties {
+ return {
+ ...SEQ_BAR_VARS,
+ '--node-w': `${width}px`,
+ '--node-h': `${height}px`,
+ } as React.CSSProperties;
+}
+
+/**
+ * Static base classes for the bar shell. Mirrors BaseContainer's channel
+ * discipline (surface + border) in a horizontal layout. The rest/hover/lifted
+ * shadow classes are layered on per instance (gated by the `shadow` prop, like
+ * BaseContainer), along with status border, hover, and selection classes.
+ * Padding/gap tightened (`px-4`/`gap-3` -> `px-3`/`gap-2`) alongside the
+ * shorter `SEQ_BAR_HEIGHT` so the row reads balanced rather than cramped.
+ */
+export const SEQ_BAR_SHELL_CLASS =
+ 'relative flex flex-row items-center gap-2 px-3 bg-surface-overlay border border-border w-(--node-w) h-(--node-h) rounded-(--node-radius) outline-offset-0 transition-[box-shadow,border-color] duration-150';
+
+/**
+ * Handle ids used by every sequential bar. Rows expose one invisible top target
+ * and one invisible bottom source; connectors and the assembly wire
+ * edges between `source` of row N and `target` of row N+1.
+ */
+export const SEQUENTIAL_BAR_HANDLE_IDS = {
+ target: 'seq-target',
+ source: 'seq-source',
+ // Mid-left target used only by `branch-entry` connectors: a branch/container
+ // lane's first row is entered from its LEFT side at mid-height (not the top),
+ // so the elbow off the owner's spine reads as an indent. Left handles sit at
+ // the bar's left edge, vertically centered, with no left-offset.
+ branchTarget: 'seq-branch-target',
+} as const;
+
+/**
+ * Transparent 8px handle: sequential bars are not user-connectable in v1.
+ * `left` is pinned to `SEQ_HANDLE_LEFT_OFFSET` so the handle anchors to the
+ * bar's bottom-left / top-left region instead of xyflow's
+ * default horizontal center; the vertical placement and centering transform
+ * still come from xyflow's `.react-flow__handle-{top,bottom}` classes; this
+ * inline style only overrides `left`, not `transform`, so the handle's CENTER
+ * point lands exactly `SEQ_HANDLE_LEFT_OFFSET`px from the bar's left edge.
+ * Shared by the manifest-backed bar (below) and the synthetic start/placeholder
+ * bars (nodes/SequentialStartNode.tsx, nodes/SequentialPlaceholderNode.tsx) so
+ * every row -- real or synthetic -- anchors its connectors identically.
+ */
+export const INVISIBLE_HANDLE_STYLE: React.CSSProperties = {
+ background: 'transparent',
+ border: 'none',
+ width: 8,
+ height: 8,
+ left: SEQ_HANDLE_LEFT_OFFSET,
+};
+
+/**
+ * Decorative stacked layer for a collapsed sequential row, mirroring
+ * BaseContainer's `isStacked` recipe (components/BaseNode/BaseNodeContainer.tsx)
+ * adapted to the bar's horizontal shape: a `::before` pseudo-element the same
+ * size as the bar, offset down and pushed behind it (`-z-10`), so a thin arc of
+ * a second bar peeks out below -- signalling that collapsed content sits
+ * underneath. Kept as a local copy (not a shared export) so this file's owner
+ * doesn't need to also own BaseNodeContainer.tsx; keep the two class strings in
+ * sync if BaseContainer's recipe changes.
+ */
+const SEQ_BAR_STACKED_LAYER_CLASS =
+ 'before:content-[""] before:absolute before:inset-x-0 before:top-0 before:h-full before:rounded-[inherit] before:bg-surface-overlay before:border before:border-brand before:translate-y-[6px] before:-z-10 before:pointer-events-none';
+
+export interface BaseNodeBarProps {
+ nodeId: string;
+ width?: number;
+ height?: number;
+ mode?: 'design' | 'view' | 'readonly';
+ selected?: boolean;
+ dragging?: boolean;
+ disabled?: boolean;
+ label?: string;
+ subLabel?: NodeLabelProps['subLabel'];
+ labelTooltip?: string;
+ labelBackgroundColor?: string;
+ icon: React.ReactNode;
+ loading?: boolean;
+ /** Drives both the icon-box background and the left accent strip. */
+ iconBackground?: string;
+ iconColor?: string;
+ /** Same resolved display.background the card applies via BaseContainer. */
+ background?: string;
+ /** Same resolved display.shadow the card applies via BaseContainer. Defaults to true. */
+ shadow?: boolean;
+ executionStatus?: ElementStatusValues;
+ validationStatus?: ValidationErrorSeverity;
+ suggestionType?: SuggestionType;
+ /** The resolved trailing status/validation indicator (adornments.topRight). */
+ statusIndicator?: React.ReactNode;
+ /** Same resolved toolbar as the card; its actions feed the kebab menu (D3). */
+ toolbarConfig?: NodeToolbarConfig;
+ /** Hides the kebab during rubber-band multi-select, mirroring the card toolbar (BaseNode.tsx `hidden`). */
+ multipleNodesSelected?: boolean;
+ /**
+ * True when this row is a collapsed collapsible step. Driven by
+ * view-local collapsed state threaded through context (SequentialStepNode ->
+ * SequentialCollapsedRowsContext), never `node.data`, so the sequential
+ * clone's data stays reference-stable (D12). Renders the same decorative
+ * stacked-layer treatment BaseContainer uses for `isStacked` cards.
+ */
+ stacked?: boolean;
+ /**
+ * Extra kebab items appended after the resolved toolbar actions, with
+ * a divider between the two groups when both are non-empty. See
+ * `BaseNodeBarNodeProps.extraMenuItems`'s doc comment (BaseNodeBarNode.tsx) for the D3
+ * rationale (a direct prop, not a new `BaseNodeOverrideConfig` field).
+ */
+ extraMenuItems?: NodeMenuItem[];
+ /**
+ * Manifest source/target handle ids to expose as extra INVISIBLE anchor
+ * handles alongside the generic seq-source/seq-target. A bar collapses
+ * each side to one point visually, but the Add Node connection validator
+ * resolves a node's handle by id against its manifest, so the insert preview
+ * must be able to anchor on a real manifest handle id that the bar actually
+ * renders. Derived connectors keep using seq-source/seq-target.
+ */
+ manifestSourceHandleIds?: string[];
+ manifestTargetHandleIds?: string[];
+ onLabelChange?: (values: { label: string; subLabel: string }) => void;
+ onActionNeeded?: (nodeId: string) => void;
+}
+
+/**
+ * Horizontal "bar" rendering of a node for the Sequential Canvas view. Fed by
+ * the same resolved display / adornments / toolbar sources as BaseNode through
+ * useBaseNodePresentation, so a node looks and behaves identically in both
+ * views. Card geometry and interactions remain owned by BaseNode.
+ */
+function BaseNodeBarComponent({
+ nodeId,
+ width,
+ height,
+ mode,
+ selected,
+ dragging,
+ disabled,
+ label,
+ subLabel,
+ labelTooltip,
+ labelBackgroundColor,
+ icon,
+ loading,
+ iconBackground,
+ iconColor,
+ background,
+ shadow = true,
+ executionStatus,
+ validationStatus,
+ suggestionType,
+ statusIndicator,
+ toolbarConfig,
+ multipleNodesSelected,
+ stacked,
+ extraMenuItems,
+ manifestSourceHandleIds,
+ manifestTargetHandleIds,
+ onLabelChange,
+ onActionNeeded,
+}: BaseNodeBarProps) {
+ const { _ } = useSafeLingui();
+ const [isHovered, setIsHovered] = useState(false);
+ const [menuOpen, setMenuOpen] = useState(false);
+
+ // Same priority as BaseContainer: suggestion > validation > execution. The
+ // status border stays the border channel; selection stays the outline channel.
+ const activeStatus = suggestionType ?? validationStatus ?? executionStatus;
+ const statusBorder = getStatusBorder(activeStatus);
+ const hasStatusBorder = statusBorder.length > 0;
+
+ const isActionNeeded = executionStatus === 'ActionNeeded';
+
+ // Kebab items are the resolved toolbar actions (design-mode delete/duplicate/
+ // etc.), flattened from the same NodeToolbarConfig the card toolbar consumes,
+ // with the extraMenuItems (Sequential Canvas move actions) appended after
+ // a divider when both groups are present.
+ const menuItems = useMemo(() => {
+ const toolbarItems: NodeMenuItem[] = !toolbarConfig
+ ? []
+ : [...toolbarConfig.actions, ...(toolbarConfig.overflowActions ?? [])].map(
+ (action) => {
+ if (!('onAction' in action)) {
+ return { type: 'divider' };
+ }
+ return {
+ id: action.id,
+ label: action.label ?? action.id,
+ icon:
+ typeof action.icon === 'string' ? (
+
+ ) : (
+ action.icon
+ ),
+ disabled: action.disabled,
+ onClick: () => action.onAction(nodeId),
+ };
+ }
+ );
+
+ if (!extraMenuItems || extraMenuItems.length === 0) return toolbarItems;
+ if (toolbarItems.length === 0) return extraMenuItems;
+ return [...toolbarItems, { type: 'divider' }, ...extraMenuItems];
+ }, [toolbarConfig, nodeId, extraMenuItems]);
+
+ const showKebab =
+ menuItems.length > 0 && !multipleNodesSelected && (isHovered || selected || menuOpen);
+
+ const className = cn(
+ SEQ_BAR_SHELL_CLASS,
+ 'cursor-pointer',
+ shadow && 'shadow-(--canvas-node-shadow-rest)',
+ statusBorder,
+ shadow && isHovered && 'shadow-(--canvas-node-shadow-hover)',
+ isHovered && !hasStatusBorder && 'border-border-hover',
+ selected && 'outline outline-2 outline-foreground-accent-muted',
+ disabled && 'opacity-50 cursor-not-allowed',
+ dragging && cn('cursor-grabbing', shadow && 'shadow-(--canvas-node-shadow-lifted)'),
+ stacked && SEQ_BAR_STACKED_LAYER_CLASS
+ );
+
+ return (
+
setIsHovered(true)}
+ onMouseLeave={() => setIsHovered(false)}
+ >
+
+ {/* Mid-left entry for branch-entry connectors (no left-offset: a Left
+ handle already anchors at the bar's left edge, vertically centered). */}
+
+ {manifestTargetHandleIds?.map((hid) =>
+ hid === SEQUENTIAL_BAR_HANDLE_IDS.target ? null : (
+
+ )
+ )}
+
+ {iconBackground && (
+ // Left accent stripe painted as an inset box-shadow on a bar-sized
+ // overlay so it follows the bar's rounded corners exactly. A plain
+ // `w-1` strip can't carry a matching corner radius (its 4px width clamps
+ // the curve), so its square corners poked past the rounded bar edge.
+ // `-inset-px` grows the overlay to the border-box edge (the overlay
+ // paints on top of the border), so the stripe sits flush against the
+ // selection outline instead of leaving the 1px border as a dark gap.
+
+ )}
+
+ {(icon || loading) && (
+