@anlyx/ui 0.1.0 → 0.1.2

package/dist/components/PageStoryboardCard.js

@@ -1,6 +1,8 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 import { ScreenshotSegmentCard } from "./ScreenshotSegmentCard.js";
 export function PageStoryboardCard({ page }) {
-    return (_jsxs("section", { className: "anlyx-storyboard-panel", "aria-label": "Screenshot segments", children: [_jsxs("div", { className: "anlyx-storyboard-section-heading", children: [_jsx("h2", { children: "Segments" }), _jsx("span", { children: page.screenshots.length })] }), page.screenshots.length > 0 ? (_jsx("div", { className: "anlyx-segment-grid", children: page.screenshots.map((segment) => (_jsx(ScreenshotSegmentCard, { segment: segment }, `${page.id}:segment:${segment.segmentIndex}`))) })) : (_jsx("p", { className: "anlyx-empty-inline", children: "No screenshots captured yet." }))] }));
+    return (_jsxs("section", { className: "anlyx-storyboard-panel", "aria-label": "Screenshot segments", children: [_jsxs("div", { className: "anlyx-storyboard-section-heading", children: [_jsx("h2", { children: "Segments" }), _jsx("span", { children: page.screenshots.length })] }), page.screenshots.length > 0 ? (_jsx("div", { className: "anlyx-segment-grid", children: page.screenshots.map((segment) => (_jsx(ScreenshotSegmentCard, { segment: segment }, `${page.id}:segment:${segment.segmentIndex}`))) })) : (_jsxs("div", { className: "anlyx-segment-grid anlyx-segment-grid--empty", children: [_jsx(PlaceholderSegment, { index: 1, title: "Overview" }), _jsx(PlaceholderSegment, { index: 2, title: "Primary content" }), _jsx(PlaceholderSegment, { index: 3, title: "Related sections" })] }))] }));
+}
+function PlaceholderSegment({ index, title }) {
+    return (_jsxs("article", { className: "anlyx-segment-card anlyx-segment-card--placeholder", children: [_jsx("div", { className: "anlyx-segment-card__image", "aria-hidden": "true", children: _jsx("span", { children: index }) }), _jsxs("div", { className: "anlyx-segment-card__body", children: [_jsx("h3", { children: title }), _jsx("p", { children: "Waiting for capture data" }), _jsxs("div", { className: "anlyx-segment-card__meta", children: [_jsx("span", { children: "Viewport pending" }), _jsx("span", { children: "Capture pending" })] })] })] }));
 }
-//# sourceMappingURL=PageStoryboardCard.js.map

package/dist/components/PageStoryboardView.d.ts

@@ -1,6 +1,7 @@
-import type { PageStoryboard } from "@anlyx/core";
+import type { PageStoryboard, ScanResult } from "@anlyx/core";
 export type PageStoryboardViewProps = {
+    data: ScanResult;
     page: PageStoryboard | undefined;
+    onViewProcessFlow: (view: "process") => void;
 };
-export declare function PageStoryboardView({ page }: PageStoryboardViewProps): JSX.Element;
-//# sourceMappingURL=PageStoryboardView.d.ts.map
+export declare function PageStoryboardView({ data, page, onViewProcessFlow }: PageStoryboardViewProps): JSX.Element;

package/dist/components/PageStoryboardView.js

@@ -3,7 +3,9 @@ import { ApiCallList } from "./ApiCallList.js";
 import { CaptureStatusEmptyState } from "./CaptureStatusEmptyState.js";
 import { PageStoryboardCard } from "./PageStoryboardCard.js";
 import { StatusBadge } from "./StatusBadge.js";
-export function PageStoryboardView({ page }) {
-    return (_jsxs("main", { className: "anlyx-workspace", children: [_jsxs("header", { className: "anlyx-workspace-header", children: [_jsxs("div", { children: [_jsx("p", { className: "anlyx-eyebrow", children: "Page Storyboard" }), _jsx("h1", { children: "Page Storyboard" })] }), page ? _jsx(StatusBadge, { tone: page.captureStatus, children: page.captureStatus }) : null] }), _jsx("section", { className: "anlyx-page-storyboard", role: "region", "aria-label": "Page Storyboard", children: page ? (_jsxs(_Fragment, { children: [_jsxs("section", { className: "anlyx-page-summary", "aria-label": "Selected page summary", children: [_jsxs("div", { children: [_jsx("span", { className: "anlyx-field__label", children: "Route" }), _jsx("h2", { children: page.route })] }), _jsxs("div", { children: [_jsx("span", { className: "anlyx-field__label", children: "File" }), _jsx("p", { children: page.filePath ?? "Unknown" })] }), _jsxs("div", { children: [_jsx("span", { className: "anlyx-field__label", children: "Status" }), _jsx(StatusBadge, { tone: page.captureStatus, children: page.captureStatus })] })] }), _jsx(CaptureStatusEmptyState, { status: page.captureStatus, ...(page.errorMessage ? { reason: page.errorMessage } : {}) }), _jsxs("div", { className: "anlyx-storyboard-grid", children: [_jsx(PageStoryboardCard, { page: page }), _jsx(ApiCallList, { apiCalls: page.apiCalls })] })] })) : (_jsx("div", { className: "anlyx-storyboard-empty", children: _jsx("p", { children: "No pages available yet." }) })) })] }));
+export function PageStoryboardView({ data, page, onViewProcessFlow }) {
+    const linkedEndpoints = page
+        ? data.endpoints.filter((endpoint) => page.apiCalls.some((apiCall) => apiCall.endpointId === endpoint.id))
+        : [];
+    return (_jsxs("main", { className: "anlyx-workspace", children: [_jsxs("header", { className: "anlyx-workspace-header", children: [_jsxs("div", { children: [_jsx("p", { className: "anlyx-eyebrow", children: "Connected Frontend" }), _jsx("h1", { children: page ? page.route : "Page Storyboard" })] }), _jsxs("div", { className: "anlyx-workspace-actions", children: [_jsx("button", { className: "anlyx-toolbar-button", type: "button", disabled: linkedEndpoints.length === 0, onClick: () => onViewProcessFlow("process"), children: "View Process Flow" }), page ? _jsx(StatusBadge, { tone: page.captureStatus, children: page.captureStatus }) : null] })] }), _jsx("section", { className: "anlyx-page-storyboard", role: "region", "aria-label": "Page Storyboard", children: page ? (_jsxs(_Fragment, { children: [_jsxs("section", { className: "anlyx-page-summary", "aria-label": "Selected page summary", children: [_jsxs("div", { children: [_jsx("span", { className: "anlyx-field__label", children: "Route" }), _jsx("h2", { children: page.route })] }), _jsxs("div", { children: [_jsx("span", { className: "anlyx-field__label", children: "File" }), _jsx("p", { children: page.filePath ?? "Unknown" })] }), _jsxs("div", { children: [_jsx("span", { className: "anlyx-field__label", children: "Status" }), _jsx(StatusBadge, { tone: page.captureStatus, children: page.captureStatus })] }), _jsxs("div", { children: [_jsx("span", { className: "anlyx-field__label", children: "Linked endpoints" }), _jsx("p", { children: linkedEndpoints.length })] })] }), _jsx(CaptureStatusEmptyState, { status: page.captureStatus, ...(page.errorMessage ? { reason: page.errorMessage } : {}) }), _jsxs("div", { className: "anlyx-storyboard-grid", children: [_jsx(PageStoryboardCard, { page: page }), _jsxs("div", { className: "anlyx-storyboard-side", children: [_jsx(ApiCallList, { apiCalls: page.apiCalls }), _jsxs("section", { className: "anlyx-storyboard-panel", "aria-label": "Page to endpoint relationship", children: [_jsxs("div", { className: "anlyx-storyboard-section-heading", children: [_jsx("h2", { children: "Page to Endpoint" }), _jsx("span", { children: linkedEndpoints.length })] }), linkedEndpoints.length > 0 ? (_jsxs("div", { className: "anlyx-relationship-diagram", children: [_jsxs("div", { className: "anlyx-relationship-source", children: [_jsx("strong", { children: page.route }), _jsx("span", { children: "Frontend Page" })] }), _jsx("ul", { className: "anlyx-relationship-list", children: linkedEndpoints.map((endpoint) => (_jsxs("li", { children: [_jsx("span", { className: "anlyx-relationship-line", "aria-hidden": "true" }), _jsx(StatusBadge, { tone: endpoint.method, children: endpoint.method }), _jsx("span", { children: endpoint.path })] }, endpoint.id))) })] })) : (_jsx("p", { className: "anlyx-empty-inline", children: "No backend endpoint was linked during capture." }))] })] })] })] })) : (_jsx("div", { className: "anlyx-storyboard-empty", children: _jsx("p", { children: "No pages available yet." }) })) })] }));
 }
-//# sourceMappingURL=PageStoryboardView.js.map

package/dist/components/ProcessFlowView.d.ts

@@ -0,0 +1,21 @@
+import type { Endpoint, EndpointFlow, FlowNode } from "@anlyx/core";
+import type { ReplayLiteState } from "../replay/use-replay-lite.js";
+import type { ReplayStep } from "../replay/build-replay-steps.js";
+export type ProcessFlowViewProps = {
+    endpoint: Endpoint | undefined;
+    flow: EndpointFlow | undefined;
+    replayState: ReplayLiteState;
+    replaySteps: ReplayStep[];
+    replayLoop: boolean;
+    replayDisabled: boolean;
+    replaySpeed: number;
+    selectedNodeId: string | undefined;
+    onSelectNode: (node: FlowNode) => void;
+    onPause: () => void;
+    onPlay: () => void;
+    onRestart: () => void;
+    onToggleLoop: () => void;
+    onSpeedChange: (speed: number) => void;
+    onViewStructure: () => void;
+};
+export declare function ProcessFlowView({ endpoint, flow, replayState, replaySteps, replayLoop, replayDisabled, replaySpeed, selectedNodeId, onSelectNode, onPause, onPlay, onRestart, onToggleLoop, onSpeedChange, onViewStructure }: ProcessFlowViewProps): JSX.Element;

package/dist/components/ProcessFlowView.js

@@ -0,0 +1,9 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { EndpointMapCanvas } from "./EndpointMapCanvas.js";
+import { ProcessTimeline } from "./ProcessTimeline.js";
+import { ReplayControls } from "./ReplayControls.js";
+export function ProcessFlowView({ endpoint, flow, replayState, replaySteps, replayLoop, replayDisabled, replaySpeed, selectedNodeId, onSelectNode, onPause, onPlay, onRestart, onToggleLoop, onSpeedChange, onViewStructure }) {
+    return (_jsxs("div", { className: "anlyx-process-view", children: [_jsx(ReplayControls, { disabled: replayDisabled, loop: replayLoop, speed: replaySpeed, state: replayState, steps: replaySteps, unavailableReason: "Process Flow is unavailable because this endpoint has no scanned main path.", onPause: onPause, onPlay: onPlay, onRestart: onRestart, onSpeedChange: onSpeedChange, onToggleLoop: onToggleLoop }), _jsx(EndpointMapCanvas, { eyebrow: "Request Process Flow", endpoint: endpoint, flow: flow, replayState: replayState, selectedNodeId: selectedNodeId, title: endpoint
+                    ? `${endpoint.method} ${endpoint.path}`
+                    : "Request process flow from scanned graph", toolbar: _jsx("button", { className: "anlyx-toolbar-button", type: "button", onClick: onViewStructure, children: "View on Structure" }), variant: "process", onSelectNode: onSelectNode }), _jsx(ProcessTimeline, { flow: flow, state: replayState, steps: replaySteps })] }));
+}

package/dist/components/ProcessTimeline.d.ts

@@ -0,0 +1,9 @@
+import type { EndpointFlow } from "@anlyx/core";
+import type { ReplayStep } from "../replay/build-replay-steps.js";
+import type { ReplayLiteState } from "../replay/use-replay-lite.js";
+export type ProcessTimelineProps = {
+    flow: EndpointFlow | undefined;
+    steps: ReplayStep[];
+    state: ReplayLiteState;
+};
+export declare function ProcessTimeline({ flow, steps, state }: ProcessTimelineProps): JSX.Element;

package/dist/components/ProcessTimeline.js

@@ -0,0 +1,46 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check } from "lucide-react";
+import { motion } from "motion/react";
+export function ProcessTimeline({ flow, steps, state }) {
+    const nodeById = new Map(flow?.nodes.map((node) => [node.id, node]) ?? []);
+    const isComplete = state.phase === "complete";
+    return (_jsxs("section", { className: "anlyx-process-timeline", "aria-label": "Process Flow timeline", children: [_jsxs("div", { className: "anlyx-process-timeline__header", children: [_jsx("span", { children: "Inferred request path" }), _jsxs("span", { children: [steps.length, " replay steps"] })] }), _jsxs("ol", { className: "anlyx-process-timeline__rail", children: [steps.map((step, index) => {
+                        const node = nodeById.get(step.nodeId);
+                        const isActive = state.phase !== "idle" &&
+                            state.phase !== "complete" &&
+                            state.currentStepIndex === index;
+                        const isCompleted = state.phase === "complete" ||
+                            (state.phase !== "idle" && state.currentStepIndex > index);
+                        return (_jsxs("li", { className: [
+                                "anlyx-process-step",
+                                `anlyx-process-step--${step.phase}`,
+                                isActive ? "anlyx-process-step--active" : "",
+                                isCompleted ? "anlyx-process-step--complete" : ""
+                            ]
+                                .filter(Boolean)
+                                .join(" "), children: [_jsx(motion.span, { animate: isActive ? { scale: [1, 1.18, 1] } : { scale: 1 }, className: "anlyx-process-step__dot", "aria-hidden": "true", transition: { duration: 1.1, repeat: isActive ? Infinity : 0 }, children: isCompleted ? _jsx(Check, { size: 11, strokeWidth: 3 }) : null }), _jsx("span", { className: "anlyx-process-step__phase", children: step.phase === "request" ? "Request" : "Response" }), _jsx("span", { className: "anlyx-process-step__label", children: formatStepLabel(node?.type, step.phase) }), _jsx("span", { className: "anlyx-process-step__node", children: node?.label ?? step.nodeId })] }, `${step.phase}:${step.nodeId}:${index}`));
+                    }), _jsxs("li", { className: [
+                            "anlyx-process-step",
+                            "anlyx-process-step--complete-stop",
+                            isComplete ? "anlyx-process-step--active" : ""
+                        ]
+                            .filter(Boolean)
+                            .join(" "), children: [_jsx(motion.span, { animate: isComplete ? { scale: [1, 1.18, 1] } : { scale: 1 }, className: "anlyx-process-step__dot", "aria-hidden": "true", transition: { duration: 1.1, repeat: isComplete ? Infinity : 0 }, children: isComplete ? _jsx(Check, { size: 11, strokeWidth: 3 }) : null }), _jsx("span", { className: "anlyx-process-step__phase", children: "Complete" }), _jsx("span", { className: "anlyx-process-step__label", children: "Client" }), _jsx("span", { className: "anlyx-process-step__node", children: "Response delivered" })] })] })] }));
+}
+function formatStepLabel(type, phase) {
+    const suffix = phase === "response" ? " Return" : "";
+    switch (type) {
+        case "endpoint":
+            return phase === "response" ? "Endpoint Return" : "Endpoint";
+        case "controller":
+            return `Controller${suffix}`;
+        case "service":
+            return `Service${suffix}`;
+        case "repository":
+            return `Repository${suffix}`;
+        case "database":
+            return phase === "response" ? "Database Result" : "Database";
+        default:
+            return "Flow Node";
+    }
+}

package/dist/components/ReplayControls.d.ts

@@ -1,13 +1,16 @@
 import type { ReplayLiteState } from "../replay/use-replay-lite.js";
+import type { ReplayStep } from "../replay/build-replay-steps.js";
 export type ReplayControlsProps = {
     state: ReplayLiteState;
+    steps: ReplayStep[];
     loop: boolean;
     disabled?: boolean;
+    speed: number;
     unavailableReason?: string;
     onPlay: () => void;
     onPause: () => void;
     onRestart: () => void;
     onToggleLoop: () => void;
+    onSpeedChange: (speed: number) => void;
 };
-export declare function ReplayControls({ state, loop, disabled, unavailableReason, onPlay, onPause, onRestart, onToggleLoop }: ReplayControlsProps): JSX.Element;
-//# sourceMappingURL=ReplayControls.d.ts.map
+export declare function ReplayControls({ state, steps, loop, speed, disabled, unavailableReason, onPlay, onPause, onRestart, onToggleLoop, onSpeedChange }: ReplayControlsProps): JSX.Element;

package/dist/components/ReplayControls.js

@@ -1,5 +1,6 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
-export function ReplayControls({ state, loop, disabled = false, unavailableReason, onPlay, onPause, onRestart, onToggleLoop }) {
-    return (_jsxs("section", { className: "anlyx-replay", "aria-label": "Replay Lite controls", children: [_jsxs("div", { className: "anlyx-replay__buttons", "aria-label": "Replay actions", children: [_jsx("button", { type: "button", disabled: disabled || state.isPlaying, onClick: onPlay, children: "Play" }), _jsx("button", { type: "button", disabled: disabled || !state.isPlaying, onClick: onPause, children: "Pause" }), _jsx("button", { type: "button", disabled: disabled, onClick: onRestart, children: "Restart" }), _jsxs("button", { type: "button", "aria-pressed": loop, disabled: disabled, onClick: onToggleLoop, children: ["Loop ", loop ? "on" : "off"] })] }), _jsxs("div", { className: "anlyx-replay__state", children: [_jsxs("span", { children: ["Phase: ", state.phase] }), _jsxs("span", { children: ["Active: ", state.activeNodeId ?? "none"] }), _jsx("span", { children: "Main Flow only" })] }), disabled && unavailableReason ? (_jsx("p", { className: "anlyx-replay__empty", children: unavailableReason })) : null] }));
+import { Pause, Play, RefreshCw, Repeat2 } from "lucide-react";
+export function ReplayControls({ state, steps, loop, speed, disabled = false, unavailableReason, onPlay, onPause, onRestart, onToggleLoop, onSpeedChange }) {
+    const currentStepNumber = state.phase === "idle" ? 0 : Math.min(state.currentStepIndex + 1, steps.length);
+    return (_jsxs("section", { className: "anlyx-replay", "aria-label": "Process Flow controls", children: [_jsxs("div", { children: [_jsx("p", { className: "anlyx-eyebrow", children: "Replay from scanned flow graph" }), _jsxs("div", { className: "anlyx-replay__buttons", "aria-label": "Process Flow actions", children: [_jsxs("button", { className: "anlyx-replay__button--primary", type: "button", disabled: disabled || state.isPlaying, onClick: onPlay, children: [_jsx(Play, { size: 14, strokeWidth: 2.5 }), _jsx("span", { children: "Play" })] }), _jsxs("button", { type: "button", disabled: disabled || !state.isPlaying, onClick: onPause, children: [_jsx(Pause, { size: 14, strokeWidth: 2.5 }), _jsx("span", { children: "Pause" })] }), _jsxs("button", { type: "button", disabled: disabled, onClick: onRestart, children: [_jsx(RefreshCw, { size: 14, strokeWidth: 2.5 }), _jsx("span", { children: "Restart" })] }), _jsxs("button", { type: "button", "aria-pressed": loop, disabled: disabled, onClick: onToggleLoop, children: [_jsx(Repeat2, { size: 14, strokeWidth: 2.5 }), _jsxs("span", { children: ["Loop ", loop ? "on" : "off"] })] })] })] }), _jsxs("div", { className: "anlyx-replay__state", children: [_jsxs("span", { children: ["Step ", currentStepNumber, "/", steps.length] }), _jsxs("span", { children: ["Phase: ", state.phase] }), _jsxs("label", { children: ["Speed", _jsxs("select", { "aria-label": "Replay speed", disabled: disabled, value: speed, onChange: (event) => onSpeedChange(Number(event.currentTarget.value)), children: [_jsx("option", { value: 1100, children: "0.75x" }), _jsx("option", { value: 800, children: "1x" }), _jsx("option", { value: 520, children: "1.5x" })] })] }), _jsx("span", { children: "Main Flow only" })] }), disabled && unavailableReason ? (_jsx("p", { className: "anlyx-replay__empty", children: unavailableReason })) : null] }));
 }
-//# sourceMappingURL=ReplayControls.js.map

package/dist/components/ScreenshotSegmentCard.d.ts

@@ -3,4 +3,3 @@ export type ScreenshotSegmentCardProps = {
     segment: ScreenshotSegment;
 };
 export declare function ScreenshotSegmentCard({ segment }: ScreenshotSegmentCardProps): JSX.Element;
-//# sourceMappingURL=ScreenshotSegmentCard.d.ts.map

package/dist/components/ScreenshotSegmentCard.js

@@ -3,4 +3,3 @@ export function ScreenshotSegmentCard({ segment }) {
     const title = segment.title ?? `Segment ${segment.segmentIndex + 1}`;
     return (_jsxs("article", { className: "anlyx-segment-card", children: [_jsx("div", { className: "anlyx-segment-card__image", children: segment.path ? _jsx("img", { alt: title, src: segment.path }) : _jsx("span", { children: "No image path" }) }), _jsxs("div", { className: "anlyx-segment-card__body", children: [_jsxs("h3", { children: ["Segment ", segment.segmentIndex + 1] }), segment.title ? _jsx("p", { children: segment.title }) : null, segment.path ? _jsx("code", { children: segment.path }) : _jsx("code", { children: "No path" }), _jsxs("div", { className: "anlyx-segment-card__meta", children: [_jsxs("span", { children: ["scrollY ", segment.scrollY] }), _jsxs("span", { children: [segment.viewport.width, " x ", segment.viewport.height] })] })] })] }));
 }
-//# sourceMappingURL=ScreenshotSegmentCard.js.map

package/dist/components/Sidebar.d.ts

@@ -1,13 +1,14 @@
 import type { Endpoint, PageStoryboard, ScanResult } from "@anlyx/core";
 type SidebarProps = {
     data: ScanResult;
-    activeView: "endpoint" | "pages" | "replay";
+    activeView: "structure" | "frontend" | "process";
+    collapsed: boolean;
     selectedEndpointId: string | undefined;
     selectedPageId: string | undefined;
-    onSelectView: (view: "endpoint" | "pages" | "replay") => void;
+    onSelectView: (view: "structure" | "frontend" | "process") => void;
+    onToggleCollapsed: () => void;
     onSelectEndpoint: (endpoint: Endpoint) => void;
     onSelectPage: (page: PageStoryboard) => void;
 };
-export declare function Sidebar({ data, activeView, selectedEndpointId, selectedPageId, onSelectView, onSelectEndpoint, onSelectPage }: SidebarProps): JSX.Element;
+export declare function Sidebar({ data, activeView, collapsed, selectedEndpointId, selectedPageId, onSelectView, onToggleCollapsed, onSelectEndpoint, onSelectPage }: SidebarProps): JSX.Element;
 export {};
-//# sourceMappingURL=Sidebar.d.ts.map

package/dist/components/Sidebar.js

@@ -1,7 +1,10 @@
 import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { PanelLeftClose, PanelLeftOpen, Search } from "lucide-react";
 import { EndpointList } from "./EndpointList.js";
 import { PageList } from "./PageList.js";
-export function Sidebar({ data, activeView, selectedEndpointId, selectedPageId, onSelectView, onSelectEndpoint, onSelectPage }) {
-    return (_jsxs("aside", { className: "anlyx-sidebar", "aria-label": "Primary navigation", children: [_jsxs("div", { className: "anlyx-brand", children: [_jsx("div", { className: "anlyx-brand__mark", "aria-hidden": "true", children: "A" }), _jsxs("div", { children: [_jsx("div", { className: "anlyx-brand__name", children: "Anlyx" }), _jsx("div", { className: "anlyx-brand__project", children: data.projectName })] })] }), _jsxs("nav", { className: "anlyx-tabs", "aria-label": "Views", children: [_jsx("button", { className: activeView === "endpoint" ? "anlyx-tab anlyx-tab--active" : "anlyx-tab", type: "button", onClick: () => onSelectView("endpoint"), children: "Endpoint" }), _jsx("button", { className: activeView === "pages" ? "anlyx-tab anlyx-tab--active" : "anlyx-tab", type: "button", onClick: () => onSelectView("pages"), children: "Pages" }), _jsx("button", { className: activeView === "replay" ? "anlyx-tab anlyx-tab--active" : "anlyx-tab", type: "button", onClick: () => onSelectView("replay"), children: "Replay" })] }), _jsxs("label", { className: "anlyx-search", children: [_jsx("span", { className: "anlyx-search__label", children: "Search" }), _jsx("input", { placeholder: "Search endpoints or pages", type: "search" })] }), _jsx(EndpointList, { endpoints: data.endpoints, selectedEndpointId: selectedEndpointId, onSelectEndpoint: onSelectEndpoint }), _jsx(PageList, { pages: data.pages, selectedPageId: selectedPageId, onSelectPage: onSelectPage })] }));
+export function Sidebar({ data, activeView, collapsed, selectedEndpointId, selectedPageId, onSelectView, onToggleCollapsed, onSelectEndpoint, onSelectPage }) {
+    if (collapsed) {
+        return (_jsxs("aside", { className: "anlyx-sidebar anlyx-sidebar--collapsed", "aria-label": "Primary navigation", children: [_jsx("button", { className: "anlyx-panel-toggle", type: "button", "aria-label": "Expand navigation panel", onClick: onToggleCollapsed, children: _jsx(PanelLeftOpen, { size: 15, strokeWidth: 2.4 }) }), _jsx("span", { className: "anlyx-collapsed-label", children: "Nav" })] }));
+    }
+    return (_jsxs("aside", { className: "anlyx-sidebar", "aria-label": "Primary navigation", children: [_jsxs("div", { className: "anlyx-brand", children: [_jsx("div", { className: "anlyx-brand__mark", "aria-hidden": "true", children: "A" }), _jsxs("div", { children: [_jsx("div", { className: "anlyx-brand__name", children: "Anlyx" }), _jsx("div", { className: "anlyx-brand__project", children: data.projectName })] }), _jsx("button", { className: "anlyx-panel-toggle", type: "button", "aria-label": "Collapse navigation panel", onClick: onToggleCollapsed, children: _jsx(PanelLeftClose, { size: 15, strokeWidth: 2.4 }) })] }), _jsxs("nav", { className: "anlyx-tabs", "aria-label": "Views", children: [_jsx("button", { className: activeView === "structure" ? "anlyx-tab anlyx-tab--active" : "anlyx-tab", type: "button", onClick: () => onSelectView("structure"), children: "Structure" }), _jsx("button", { className: activeView === "frontend" ? "anlyx-tab anlyx-tab--active" : "anlyx-tab", type: "button", onClick: () => onSelectView("frontend"), children: "Connected Frontend" }), _jsx("button", { className: activeView === "process" ? "anlyx-tab anlyx-tab--active" : "anlyx-tab", type: "button", onClick: () => onSelectView("process"), children: "Process Flow" })] }), _jsxs("label", { className: "anlyx-search", children: [_jsx("span", { className: "anlyx-search__label", children: "Search" }), _jsxs("span", { className: "anlyx-search__control", children: [_jsx(Search, { size: 14, strokeWidth: 2.4 }), _jsx("input", { placeholder: "Search endpoints or pages", type: "search" })] })] }), _jsx("div", { className: "anlyx-sidebar__list-region", children: activeView === "frontend" ? (_jsx(PageList, { pages: data.pages, selectedPageId: selectedPageId, onSelectPage: onSelectPage })) : (_jsx(EndpointList, { endpoints: data.endpoints, selectedEndpointId: selectedEndpointId, onSelectEndpoint: onSelectEndpoint })) })] }));
 }
-//# sourceMappingURL=Sidebar.js.map

package/dist/components/StatusBadge.d.ts

@@ -6,4 +6,3 @@ type StatusBadgeProps = {
 };
 export declare function StatusBadge({ children, tone, label }: StatusBadgeProps): JSX.Element;
 export {};
-//# sourceMappingURL=StatusBadge.d.ts.map

package/dist/components/StatusBadge.js

@@ -2,4 +2,3 @@ import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
 export function StatusBadge({ children, tone = "neutral", label }) {
     return (_jsxs("span", { className: `anlyx-status-badge anlyx-status-badge--${tone.toLowerCase()}`, children: [label ? _jsx("span", { className: "anlyx-status-badge__label", children: label }) : null, children] }));
 }
-//# sourceMappingURL=StatusBadge.js.map

package/dist/flow/build-react-flow-model.d.ts

@@ -1,5 +1,6 @@
 import type { ConfidenceLevel, EndpointFlow, FlowEdge, FlowNode } from "@anlyx/core";
 import type { Edge, Node } from "@xyflow/react";
+import { type FlowLayoutVariant } from "./layout/elk-layout.js";
 export type AnlyxFlowRole = "main" | "sub" | "secondary";
 export type AnlyxFlowNodeData = {
     node: FlowNode;
@@ -16,6 +17,7 @@ export type AnlyxFlowEdgeData = {
     flowRole: AnlyxFlowRole;
     confidence?: ConfidenceLevel;
     isReplayActive?: boolean;
+    replayPhase?: "request" | "response" | "idle" | "complete";
 };
 export type AnlyxReactFlowNode = Node<AnlyxFlowNodeData, "anlyxNode">;
 export type AnlyxReactFlowEdge = Edge<AnlyxFlowEdgeData>;
@@ -23,5 +25,7 @@ export type ReactFlowModel = {
     nodes: AnlyxReactFlowNode[];
     edges: AnlyxReactFlowEdge[];
 };
-export declare function buildReactFlowModel(flow: EndpointFlow): ReactFlowModel;
-//# sourceMappingURL=build-react-flow-model.d.ts.map
+export type BuildReactFlowModelOptions = {
+    variant?: FlowLayoutVariant;
+};
+export declare function buildReactFlowModel(flow: EndpointFlow, options?: BuildReactFlowModelOptions): ReactFlowModel;

package/dist/flow/build-react-flow-model.js

@@ -1,41 +1,39 @@
-const MAIN_X_SPACING = 220;
-const SECONDARY_Y_OFFSET = 120;
-const SUB_X_SPACING = 180;
-const SUB_Y_OFFSET = 180;
-export function buildReactFlowModel(flow) {
+import { layoutWithFallback } from "./layout/elk-layout.js";
+export function buildReactFlowModel(flow, options = {}) {
+    const variant = options.variant ?? "structure";
     const mainPathSet = new Set(flow.mainPath);
     const nodesById = new Map(flow.nodes.map((node) => [node.id, node]));
     const positionedNodes = new Map();
     flow.mainPath.forEach((nodeId, index) => {
         const node = nodesById.get(nodeId);
         if (node) {
-            positionedNodes.set(node.id, createNode(node, "main", { x: index * MAIN_X_SPACING, y: 0 }));
+            positionedNodes.set(node.id, createNode(node, "main", { x: index * 220, y: 0 }));
         }
     });
     flow.nodes
         .filter((node) => !mainPathSet.has(node.id))
         .forEach((node, index) => {
-        positionedNodes.set(node.id, createNode(node, "secondary", { x: index * MAIN_X_SPACING, y: SECONDARY_Y_OFFSET }));
+        positionedNodes.set(node.id, createNode(node, "secondary", { x: index * 220, y: 120 }));
     });
     flow.subFlows.forEach((subFlow, subFlowIndex) => {
         const parentPosition = positionedNodes.get(subFlow.parentNodeId)?.position ?? {
-            x: subFlowIndex * MAIN_X_SPACING,
+            x: subFlowIndex * 220,
             y: 0
         };
         subFlow.nodes.forEach((node, index) => {
             positionedNodes.set(node.id, createNode(node, "sub", {
-                x: parentPosition.x + index * SUB_X_SPACING,
-                y: parentPosition.y + SUB_Y_OFFSET + subFlowIndex * 36
+                x: parentPosition.x + index * 180,
+                y: parentPosition.y + 180 + subFlowIndex * 36
             }, subFlow.id));
         });
     });
-    return {
+    return layoutWithFallback({
         nodes: [...positionedNodes.values()],
         edges: [
-            ...flow.edges.map((edge) => createEdge(edge, getEdgeRole(edge, mainPathSet))),
-            ...flow.subFlows.flatMap((subFlow) => subFlow.edges.map((edge) => createEdge(edge, "sub")))
+            ...flow.edges.map((edge, index) => createEdge(edge, getEdgeRole(edge, mainPathSet), index)),
+            ...flow.subFlows.flatMap((subFlow, subFlowIndex) => subFlow.edges.map((edge, edgeIndex) => createEdge(edge, "sub", `${subFlowIndex}:${edgeIndex}`)))
         ]
-    };
+    }, flow.mainPath, { variant });
 }
 function createNode(node, flowRole, position, subFlowId) {
     return {
@@ -52,12 +50,12 @@ function createNode(node, flowRole, position, subFlowId) {
         }
     };
 }
-function createEdge(edge, flowRole) {
+function createEdge(edge, flowRole, stableSuffix) {
     return {
-        id: edge.id,
+        id: `${edge.id}:${stableSuffix}`,
         source: edge.from,
         target: edge.to,
-        type: "smoothstep",
+        type: "anlyxEdge",
         animated: false,
         className: `anlyx-flow-edge anlyx-flow-edge--${flowRole}`,
         data: {
@@ -76,4 +74,3 @@ function getEdgeRole(edge, mainPathSet) {
     }
     return "secondary";
 }
-//# sourceMappingURL=build-react-flow-model.js.map

package/dist/flow/layout/elk-layout.d.ts

@@ -0,0 +1,7 @@
+import type { ReactFlowModel } from "../build-react-flow-model.js";
+export type FlowLayoutVariant = "structure" | "process";
+export type LayoutOptions = {
+    variant: FlowLayoutVariant;
+};
+export declare function layoutWithElk(model: ReactFlowModel, options: LayoutOptions): Promise<ReactFlowModel>;
+export declare function layoutWithFallback(model: ReactFlowModel, mainPath: string[], options: LayoutOptions): ReactFlowModel;

package/dist/flow/layout/elk-layout.js

@@ -0,0 +1,74 @@
+import ELKConstructor from "elkjs/lib/elk.bundled.js";
+const Elk = ELKConstructor;
+const elk = new Elk();
+const NODE_WIDTH = 196;
+const NODE_HEIGHT = 92;
+const STRUCTURE_MAIN_Y = 0;
+const STRUCTURE_SECONDARY_Y = 145;
+const PROCESS_REQUEST_Y = 0;
+const PROCESS_BRANCH_Y = 145;
+const MAIN_X_SPACING = 232;
+const BRANCH_X_SPACING = 190;
+export async function layoutWithElk(model, options) {
+    if (model.nodes.length === 0) {
+        return model;
+    }
+    const graph = {
+        id: "anlyx-flow",
+        layoutOptions: {
+            "elk.algorithm": "layered",
+            "elk.direction": "RIGHT",
+            "elk.layered.spacing.nodeNodeBetweenLayers": options.variant === "process" ? "72" : "84",
+            "elk.spacing.nodeNode": options.variant === "process" ? "44" : "52",
+            "elk.layered.nodePlacement.strategy": "NETWORK_SIMPLEX",
+            "elk.layered.crossingMinimization.strategy": "LAYER_SWEEP"
+        },
+        children: model.nodes.map((node) => ({
+            id: node.id,
+            width: NODE_WIDTH,
+            height: NODE_HEIGHT
+        })),
+        edges: model.edges.map((edge) => ({
+            id: edge.id,
+            sources: [edge.source],
+            targets: [edge.target]
+        }))
+    };
+    const layoutedGraph = await elk.layout(graph);
+    const positions = new Map(layoutedGraph.children?.map((node) => [node.id, { x: node.x ?? 0, y: node.y ?? 0 }]) ?? []);
+    return {
+        nodes: model.nodes.map((node) => ({
+            ...node,
+            position: positions.get(node.id) ?? node.position
+        })),
+        edges: model.edges
+    };
+}
+export function layoutWithFallback(model, mainPath, options) {
+    const mainPathIndex = new Map(mainPath.map((nodeId, index) => [nodeId, index]));
+    let secondaryIndex = 0;
+    return {
+        nodes: model.nodes.map((node) => {
+            const pathIndex = mainPathIndex.get(node.id);
+            if (pathIndex !== undefined) {
+                return {
+                    ...node,
+                    position: {
+                        x: pathIndex * MAIN_X_SPACING,
+                        y: options.variant === "process" ? PROCESS_REQUEST_Y : STRUCTURE_MAIN_Y
+                    }
+                };
+            }
+            const nextSecondaryIndex = secondaryIndex++;
+            return {
+                ...node,
+                position: {
+                    x: Math.max(1, Math.floor(nextSecondaryIndex / 2) + 1) * BRANCH_X_SPACING,
+                    y: (options.variant === "process" ? PROCESS_BRANCH_Y : STRUCTURE_SECONDARY_Y) +
+                        (nextSecondaryIndex % 2) * 116
+                }
+            };
+        }),
+        edges: model.edges
+    };
+}

package/dist/index.d.ts

@@ -26,4 +26,3 @@ export { buildReactFlowModel } from "./flow/build-react-flow-model.js";
 export { mockScanResult } from "./mock-data.js";
 export { buildReplaySteps } from "./replay/build-replay-steps.js";
 export { useReplayLite } from "./replay/use-replay-lite.js";
-//# sourceMappingURL=index.d.ts.map

package/dist/index.js

@@ -19,4 +19,3 @@ export { buildReactFlowModel } from "./flow/build-react-flow-model.js";
 export { mockScanResult } from "./mock-data.js";
 export { buildReplaySteps } from "./replay/build-replay-steps.js";
 export { useReplayLite } from "./replay/use-replay-lite.js";
-//# sourceMappingURL=index.js.map

package/dist/mock-data.d.ts

@@ -1,3 +1,2 @@
 import { type ScanResult } from "@anlyx/core";
 export declare const mockScanResult: ScanResult;
-//# sourceMappingURL=mock-data.d.ts.map

package/dist/mock-data.js

@@ -219,4 +219,3 @@ export const mockScanResult = scanResultSchema.parse({
         }
     ]
 });
-//# sourceMappingURL=mock-data.js.map

package/dist/replay/build-replay-steps.d.ts

@@ -7,4 +7,3 @@ export type ReplayStep = {
     index: number;
 };
 export declare function buildReplaySteps(mainPath: string[]): ReplayStep[];
-//# sourceMappingURL=build-replay-steps.d.ts.map

package/dist/replay/build-replay-steps.js

@@ -23,4 +23,3 @@ export function buildReplaySteps(mainPath) {
     });
     return [...requestSteps, ...responseSteps];
 }
-//# sourceMappingURL=build-replay-steps.js.map

package/dist/replay/use-replay-lite.d.ts

@@ -1,4 +1,4 @@
-import { type ReplayPhase } from "./build-replay-steps.js";
+import { type ReplayPhase, type ReplayStep } from "./build-replay-steps.js";
 export type ReplayLiteState = {
     phase: ReplayPhase;
     isPlaying: boolean;
@@ -16,6 +16,7 @@ export type UseReplayLiteOptions = {
 };
 export type UseReplayLiteResult = {
     state: ReplayLiteState;
+    steps: ReplayStep[];
     loop: boolean;
     play: () => void;
     pause: () => void;
@@ -23,4 +24,3 @@ export type UseReplayLiteResult = {
     toggleLoop: () => void;
 };
 export declare function useReplayLite({ mainPath, loop: initialLoop, intervalMs }: UseReplayLiteOptions): UseReplayLiteResult;
-//# sourceMappingURL=use-replay-lite.d.ts.map

package/dist/replay/use-replay-lite.js

@@ -67,6 +67,7 @@ export function useReplayLite({ mainPath, loop: initialLoop = false, intervalMs
             isPlaying,
             phase
         }),
+        steps,
         loop,
         play,
         pause,
@@ -94,4 +95,3 @@ function toReplayState(options) {
             : {})
     };
 }
-//# sourceMappingURL=use-replay-lite.js.map