50:I[707087,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"RegistryDependencies"] 51:I[314491,["/_next/static/immutable/chunks/3arlv5bvukoo2.js","/_next/static/immutable/chunks/39v64hmfyo-sr.js","/_next/static/immutable/chunks/2nvof3-29tvc3.js","/_next/static/immutable/chunks/3tjobt77z_9dj.js","/_next/static/immutable/chunks/04j_o97cgxn2x.js","/_next/static/immutable/chunks/3upr08c9vtj8w.js","/_next/static/immutable/chunks/1ww0328si-u8x.js","/_next/static/immutable/chunks/11mfl5ymqld9-.js","/_next/static/immutable/chunks/2xxcqy6ppds3l.js","/_next/static/immutable/chunks/3j06ow7w40nxu.js","/_next/static/immutable/chunks/31nn7jwsjvqii.js","/_next/static/immutable/chunks/43_s7jweyypoh.js","/_next/static/immutable/chunks/0p6vao205o1jc.js","/_next/static/immutable/chunks/1_kyvgkyokw92.js","/_next/static/immutable/chunks/1lo-zn37dolb5.js","/_next/static/immutable/chunks/1v8k6yxw1rg0u.js"],"FilesView"] 52:T1e5b,// Hairline UI · workflow-canvas · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components 'use client'; import * as React from 'react'; import { Circle, Maximize2, Minus, Plus } from 'lucide-react'; import { WorkflowConnections } from './workflow-connections'; import { useWorkflowViewport } from './use-workflow-viewport'; import { INTERACTION_FOCUS, useInteractionReducedMotion, useInteractionActivity } from './ui-interaction-motion'; import { WorkflowStatusMark, WORKFLOW_STATUS as STATUS } from './workflow-status'; import { WorkflowInspector } from './workflow-inspector'; import { NumberRoll } from './number-roll'; import { TextMorph } from './text-morph'; import { NODE_WIDTH, NODE_HEIGHT, type WorkflowNode, type WorkflowEdge, type WorkflowPoint, type WorkflowStatus } from './workflow-types'; export type { WorkflowNode, WorkflowEdge, WorkflowPoint, WorkflowStatus } from './workflow-types'; export interface WorkflowCanvasProps extends Omit, 'onSelect'> { nodes: WorkflowNode[]; edges: WorkflowEdge[]; width?: number; height?: number; label?: string; onNodeMove?: (id: string, position: WorkflowPoint) => void; onNodeSelect?: (id: string | null) => void; } const CONTROL = `cursor-pointer disabled:cursor-default flex size-8 items-center justify-center rounded-lg text-muted-foreground transition-colors hover:bg-accent hover:text-foreground disabled:opacity-30 ${INTERACTION_FOCUS}`; /** A bounded workflow viewer with movable nodes, a shared pan/zoom transform and live execution states. */ export function WorkflowCanvas({ nodes, edges, width = 660, height = 340, label = 'Workflow', onNodeMove, onNodeSelect, className = '', ...props }: WorkflowCanvasProps) { const reduced = useInteractionReducedMotion(); const activity = useInteractionActivity(); const [selected, setSelected] = React.useState(null); const nodeRefs = React.useRef(new Map()); const canvasWidth = Math.max(NODE_WIDTH, width), canvasHeight = Math.max(NODE_HEIGHT, height); const { viewport, world, positions, view, dragging, fit, zoom, revealNode, moveNode, handlers } = useWorkflowViewport(nodes, edges, canvasWidth, canvasHeight, reduced, onNodeMove); const selectedNode = nodes.find((node) => node.id === selected); const detailsId = React.useId(); const choose = (id: string | null) => { setSelected(id); onNodeSelect?.(id); }; return (

{label} nodes · connections

{nodes.map((node, index) => { const status = node.status ?? 'idle'; return ; })}

{ choose(null); if (selectedNode) nodeRefs.current.get(selectedNode.id)?.focus({ preventScroll: true }); }} />

{nodes.filter((node) => node.status === 'running').map((node) => `${node.title} running`).join('. ') || (nodes.some((node) => node.status === 'error') ? 'Workflow has a failed step.' : nodes.length > 0 && nodes.every((node) => node.status === 'complete') ? 'Workflow complete.' : 'Workflow ready.')}

); } 53:T578,// Hairline UI · workflow-canvas · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components import type * as React from 'react'; export type WorkflowStatus = 'idle' | 'queued' | 'running' | 'complete' | 'error'; export type WorkflowPoint = { x: number; y: number }; export interface WorkflowNode extends WorkflowPoint { id: string; title: string; subtitle?: string; icon?: React.ReactNode; status?: WorkflowStatus; detail?: React.ReactNode; } export interface WorkflowEdge { id: string; from: string; to: string } export const NODE_WIDTH = 164; export const NODE_HEIGHT = 78; /** Rounded elbows for forward connections; a smooth loop for nodes dragged behind their source. */ export function workflowPath(from: WorkflowPoint, to: WorkflowPoint) { const x1 = from.x + NODE_WIDTH, y1 = from.y + NODE_HEIGHT / 2; const x2 = to.x, y2 = to.y + NODE_HEIGHT / 2; if (x2 - x1 < 40) { const reach = Math.max(60, Math.abs(x2 - x1) * 0.6); return `M ${x1} ${y1} C ${x1 + reach} ${y1}, ${x2 - reach} ${y2}, ${x2} ${y2}`; } if (Math.abs(y2 - y1) < 2) return `M ${x1} ${y1} H ${x2}`; const mid = (x1 + x2) / 2, sign = Math.sign(y2 - y1), radius = Math.min(14, Math.abs(y2 - y1) / 2); return `M ${x1} ${y1} H ${mid - radius} Q ${mid} ${y1} ${mid} ${y1 + sign * radius} V ${y2 - sign * radius} Q ${mid} ${y2} ${mid + radius} ${y2} H ${x2}`; } 54:Tb9c,// Hairline UI · workflow-canvas · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components 'use client'; import * as React from 'react'; import { workflowPath, type WorkflowEdge, type WorkflowNode, type WorkflowPoint } from './workflow-types'; function Connection({ edge, nodes, positions, reduced, playing }: { edge: WorkflowEdge; nodes: WorkflowNode[]; positions: Record; reduced: boolean; playing: boolean }) { const ref = React.useRef(null); const from = nodes.find((node) => node.id === edge.from), to = nodes.find((node) => node.id === edge.to); const active = from?.status === 'complete' && to?.status === 'running'; const completed = from?.status === 'complete' && to?.status === 'complete'; const d = from && to ? workflowPath(positions[from.id] ?? from, positions[to.id] ?? to) : ''; React.useEffect(() => { const path = ref.current; if (!path || !active || !playing || reduced) return; const length = path.getTotalLength(); path.style.strokeDasharray = `14 ${length}`; const animation = path.animate([{ strokeDashoffset: '0' }, { strokeDashoffset: String(-length - 14) }], { duration: Math.max(700, length / 0.2), iterations: Infinity, easing: 'linear' }); return () => { animation.cancel(); path.style.strokeDasharray = ''; }; }, [active, playing, reduced, d]); if (!from || !to) return null; return ( {active && } ); } export function WorkflowConnections({ nodes, edges, positions, reduced, width, height }: { nodes: WorkflowNode[]; edges: WorkflowEdge[]; positions: Record; reduced: boolean; width: number; height: number }) { const ref = React.useRef(null); const [visible, setVisible] = React.useState(false); const [hidden, setHidden] = React.useState(false); React.useEffect(() => { const svg = ref.current; if (!svg) return; const observer = new IntersectionObserver(([entry]) => setVisible(entry.isIntersecting)); observer.observe(svg); const visibility = () => setHidden(document.hidden); visibility(); document.addEventListener('visibilitychange', visibility); return () => { observer.disconnect(); document.removeEventListener('visibilitychange', visibility); }; }, []); return ; } 55:T746,// Hairline UI · workflow-canvas · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components 'use client'; import React from 'react'; import { Circle, CircleAlert } from 'lucide-react'; import { interactionIcon } from './ui-interaction-motion'; import type { WorkflowStatus } from './workflow-types'; export const WORKFLOW_STATUS: Record = { idle: 'Ready', queued: 'Queued', running: 'Running', complete: 'Complete', error: 'Failed' }; export function WorkflowStatusMark({ status, reduced, active }: { status: WorkflowStatus; reduced: boolean; active: boolean }) { return ; } 56:Ta3e,// Hairline UI · workflow-canvas · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components 'use client'; import * as React from 'react'; import { X } from 'lucide-react'; import { TextMorph } from './text-morph'; import { EASE_OUT, INTERACTION_FOCUS } from './ui-interaction-motion'; import { WORKFLOW_STATUS } from './workflow-status'; import type { WorkflowNode } from './workflow-types'; export function WorkflowInspector({ node, onClose, reduced, id }: { node?: WorkflowNode; onClose: () => void; reduced: boolean; id: string }) { const last = React.useRef(undefined); if (node) last.current = node; const displayed = node ?? last.current; const content = React.useRef(null); const measure = React.useRef(null); const [height, setHeight] = React.useState(0); React.useLayoutEffect(() => { const el = measure.current; if (!el) return; const observer = new ResizeObserver(() => setHeight((previous) => previous === el.offsetHeight ? previous : el.offsetHeight)); observer.observe(el); return () => observer.disconnect(); }, [Boolean(displayed)]); React.useLayoutEffect(() => { const el = content.current; if (!el || !node || reduced) return; const animation = el.animate([{ opacity: 0, transform: 'translateY(6px)' }, { opacity: 1, transform: 'none' }], { duration: 300, easing: EASE_OUT }); return () => animation.cancel(); }, [node?.id, reduced]); return

{displayed &&

{displayed.title}

{WORKFLOW_STATUS[displayed.status ?? 'idle']}

{displayed.detail}

}

; } 57:T232a,// Hairline UI · workflow-canvas · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components 'use client'; import * as React from 'react'; import { NODE_WIDTH, NODE_HEIGHT, workflowPath, type WorkflowNode, type WorkflowEdge, type WorkflowPoint } from './workflow-types'; type View = { x: number; y: number; scale: number }; type Gesture = { pointer: number; startX: number; startY: number; origin: WorkflowPoint; node?: string; moved: boolean }; export function useWorkflowViewport(nodes: WorkflowNode[], edges: WorkflowEdge[], width: number, height: number, reduced: boolean, onNodeMove?: (id: string, point: WorkflowPoint) => void) { const viewport = React.useRef(null); const world = React.useRef(null); const overrides = React.useRef>({}); const positions: Record = Object.fromEntries(nodes.map((node) => [node.id, overrides.current[node.id] ?? { x: node.x, y: node.y }])); const currentPositions = React.useRef(positions); currentPositions.current = positions; const viewRef = React.useRef({ x: 0, y: 0, scale: 1 }); const gesture = React.useRef(null); const suppressClick = React.useRef(false); const [view, setView] = React.useState(viewRef.current); const [, commit] = React.useReducer((n: number) => n + 1, 0); const [dragging, setDragging] = React.useState(false); const paintView = (next: View, animate = false) => { viewRef.current = next; if (world.current) { world.current.style.transition = animate && !reduced ? 'transform 320ms cubic-bezier(0.16,1,0.3,1)' : 'none'; world.current.style.transform = `translate(${next.x}px, ${next.y}px) scale(${next.scale})`; } }; const fit = (minimum = 0.2) => { const frame = viewport.current; if (!frame) return; const scale = Math.max(minimum, Math.min(1.25, (frame.clientWidth - 36) / width, (frame.clientHeight - 36) / height)); const next = { x: width * scale > frame.clientWidth - 36 ? 18 : (frame.clientWidth - width * scale) / 2, y: (frame.clientHeight - height * scale) / 2, scale }; paintView(next, true); setView(next); }; React.useLayoutEffect(() => { const frame = viewport.current; if (!frame) return; const observer = new ResizeObserver(() => fit(0.85)); observer.observe(frame); return () => observer.disconnect(); // Refit when the canvas bounds change. Status updates preserve the view. // eslint-disable-next-line react-hooks/exhaustive-deps }, [width, height, reduced]); const zoom = (factor: number) => { const frame = viewport.current; if (!frame) return; const previous = viewRef.current; const scale = Math.max(0.25, Math.min(1.75, previous.scale * factor)); const cx = frame.clientWidth / 2, cy = frame.clientHeight / 2; const next = { scale, x: cx - (cx - previous.x) * scale / previous.scale, y: cy - (cy - previous.y) * scale / previous.scale }; paintView(next, true); setView(next); }; const revealNode = (id: string) => { const point = currentPositions.current[id], frame = viewport.current; if (!point || !frame) return; const previous = viewRef.current; const left = point.x * previous.scale + previous.x, top = point.y * previous.scale + previous.y; let x = previous.x, y = previous.y; if (left < 12) x += 12 - left; else if (left + NODE_WIDTH * previous.scale > frame.clientWidth - 12) x -= left + NODE_WIDTH * previous.scale - frame.clientWidth + 12; if (top < 12) y += 12 - top; else if (top + NODE_HEIGHT * previous.scale > frame.clientHeight - 12) y -= top + NODE_HEIGHT * previous.scale - frame.clientHeight + 12; if (x !== previous.x || y !== previous.y) { const next = { ...previous, x, y }; paintView(next, true); setView(next); } }; const paintNode = (id: string, point: WorkflowPoint) => { currentPositions.current[id] = point; // Keep the draft position through status renders while the pointer is down. overrides.current[id] = point; const node = world.current?.querySelector(`[data-workflow-node="${CSS.escape(id)}"]`); if (node) node.style.transform = `translate(${point.x}px, ${point.y}px)`; edges.filter((edge) => edge.from === id || edge.to === id).forEach((edge) => { const from = currentPositions.current[edge.from], to = currentPositions.current[edge.to]; if (from && to) world.current?.querySelectorAll(`[data-workflow-edge="${CSS.escape(edge.id)}"]`).forEach((path) => path.setAttribute('d', workflowPath(from, to))); }); }; const moveNode = (id: string, dx: number, dy: number) => { const point = currentPositions.current[id]; if (!point) return; const next = { x: Math.max(0, Math.min(width - NODE_WIDTH, point.x + dx)), y: Math.max(0, Math.min(height - NODE_HEIGHT, point.y + dy)) }; paintNode(id, next); commit(); onNodeMove?.(id, next); revealNode(id); }; /** * While a gesture runs, the moving part gets its own compositor layer so panning and dragging move pixels instead of * repainting them. The layer is dropped afterwards so text re-rasterises crisply at the new zoom. */ const layer = (el: HTMLElement | null | undefined, on: boolean) => { if (el) el.style.willChange = on ? 'transform' : ''; }; const nodeEl = (id?: string) => (id ? world.current?.querySelector(`[data-workflow-node="${CSS.escape(id)}"]`) : null); const finish = (event: React.PointerEvent, cancelled: boolean) => { const state = gesture.current; if (!state || state.pointer !== event.pointerId) return; gesture.current = null; layer(state.node ? nodeEl(state.node) : world.current, false); setDragging(false); suppressClick.current = state.moved; if (state.node) { if (cancelled) paintNode(state.node, state.origin); else if (state.moved) { const point = currentPositions.current[state.node]; overrides.current[state.node] = point; onNodeMove?.(state.node, point); } commit(); } else { if (cancelled) paintView({ ...viewRef.current, ...state.origin }); setView(viewRef.current); } }; return { viewport, world, positions, view, dragging, fit: () => fit(), zoom, revealNode, moveNode, handlers: { onPointerDown(event: React.PointerEvent) { if (event.button !== 0 || !event.isPrimary || (event.target as HTMLElement).closest('[data-workflow-control]')) return; const target = (event.target as HTMLElement).closest('[data-workflow-node]'); const node = target?.dataset.workflowNode; suppressClick.current = false; (target ?? event.currentTarget).setPointerCapture(event.pointerId); if (target) target.focus({ preventScroll: true }); gesture.current = { pointer: event.pointerId, startX: event.clientX, startY: event.clientY, node, origin: node ? { ...currentPositions.current[node] } : { x: viewRef.current.x, y: viewRef.current.y }, moved: false }; }, onPointerMove(event: React.PointerEvent) { const state = gesture.current; if (!state || state.pointer !== event.pointerId) return; const dx = event.clientX - state.startX, dy = event.clientY - state.startY; if (!state.moved && Math.hypot(dx, dy) < 5) return; if (!state.moved) { state.moved = true; setDragging(true); layer(state.node ? nodeEl(state.node) : world.current, true); } if (state.node) paintNode(state.node, { x: Math.max(0, Math.min(width - NODE_WIDTH, state.origin.x + dx / viewRef.current.scale)), y: Math.max(0, Math.min(height - NODE_HEIGHT, state.origin.y + dy / viewRef.current.scale)), }); else paintView({ ...viewRef.current, x: Math.max(-width * viewRef.current.scale + 60, Math.min((viewport.current?.clientWidth ?? width) - 60, state.origin.x + dx)), y: Math.max(-height * viewRef.current.scale + 60, Math.min((viewport.current?.clientHeight ?? height) - 60, state.origin.y + dy)) }); }, onPointerUp: (event: React.PointerEvent) => finish(event, false), onPointerCancel: (event: React.PointerEvent) => finish(event, true), onLostPointerCapture: (event: React.PointerEvent) => finish(event, true), onKeyDown(event: React.KeyboardEvent) { const state = gesture.current; if (event.key !== 'Escape' || !state) return; event.preventDefault(); gesture.current = null; setDragging(false); suppressClick.current = true; layer(state.node ? nodeEl(state.node) : world.current, false); if (state.node) { paintNode(state.node, state.origin); commit(); } else { paintView({ ...viewRef.current, ...state.origin }); setView(viewRef.current); } }, onClickCapture(event: React.MouseEvent) { if (suppressClick.current) { event.stopPropagation(); suppressClick.current = false; } }, }, }; } 58:Tc6d,// Hairline UI · workflow-canvas · MIT License // Copyright (c) 2026 Hairline UI · https://hairlineui.com/license#components 'use client'; import * as React from 'react'; export const EASE_OUT = 'cubic-bezier(0.16, 1, 0.3, 1)'; export const EASE_SETTLE = 'cubic-bezier(0.22, 1.18, 0.36, 1)'; export const INTERACTION_FOCUS = 'focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring/50 focus-visible:ring-offset-2 focus-visible:ring-offset-background'; const query = '(prefers-reduced-motion: reduce)'; const subscribe = (notify: () => void) => { const media = window.matchMedia(query); media.addEventListener('change', notify); return () => media.removeEventListener('change', notify); }; export const useInteractionReducedMotion = () => React.useSyncExternalStore(subscribe, () => window.matchMedia(query).matches, () => false); export function useInteractionActivity() { const ref = React.useRef(null); const [visible, setVisible] = React.useState(false); const [hidden, setHidden] = React.useState(false); React.useEffect(() => { const el = ref.current; if (!el) return; const observer = new IntersectionObserver(([entry]) => setVisible(entry.isIntersecting)); observer.observe(el); const visibility = () => setHidden(document.hidden); visibility(); document.addEventListener('visibilitychange', visibility); return () => { observer.disconnect(); document.removeEventListener('visibilitychange', visibility); }; }, []); return { ref, active: visible && !hidden }; } export function interactionIcon(on: boolean, reduced: boolean): React.CSSProperties { return { opacity: on ? 1 : 0, transform: on ? 'none' : 'scale(0.6)', filter: on ? 'blur(0px)' : 'blur(3px)', transition: reduced ? 'none' : `opacity 220ms ${EASE_OUT}, transform 380ms ${EASE_OUT}, filter 220ms ${EASE_OUT}` }; } /** Sample recent movement rather than averaging a long drag and losing its release velocity. */ export type PointerSample = { x: number; time: number }; export function samplePointer(samples: PointerSample[], x: number, time: number) { samples.push({ x, time }); while (samples.length > 2 && time - samples[0].time > 100) samples.shift(); } export function releaseVelocity(samples: PointerSample[], now: number) { if (samples.length < 2 || now - samples[samples.length - 1].time > 100) return 0; const first = samples[0], last = samples[samples.length - 1]; return (last.x - first.x) / Math.max(1, last.time - first.time); } /** A damped spring sampled by WAAPI: no React renders or perpetual frame loop. */ export function springFrames(from: number, to: number, velocity = 0, duration = 520) { const omega = 20, damping = 0.82, damped = omega * Math.sqrt(1 - damping * damping); const displacement = from - to; const coefficient = (velocity * 1000 + damping * omega * displacement) / damped; return Array.from({ length: 33 }, (_, i) => { const t = (i / 32) * duration / 1000; const value = to + Math.exp(-damping * omega * t) * (displacement * Math.cos(damped * t) + coefficient * Math.sin(damped * t)); return { value: i === 32 ? to : value, offset: i / 32 }; }); } 4f:["$","div",null,{"className":"mt-3 flex min-h-0 min-w-0 flex-1 flex-col gap-3","children":[["$","div",null,{"className":"flex shrink-0 items-start gap-3","children":[["$","div",null,{"className":"flex max-h-28 min-w-0 flex-1 flex-wrap items-center gap-2 overflow-y-auto","children":[["$","ul",null,{"className":"flex min-w-0 flex-wrap gap-2","aria-label":"Package dependencies","children":[["$","li","lucide-react",{"className":"min-w-0 max-w-full","children":["$","a",null,{"href":"https://www.npmjs.com/package/lucide-react","target":"_blank","rel":"noopener noreferrer","className":"flex max-w-full min-w-0 items-center gap-1.5 rounded-md border px-2 py-1.5 text-xs","children":[["$","svg",null,{"viewBox":"0 0 24 24","className":"size-3 shrink-0","children":["$","path",null,{"d":"M1.763 0C.786 0 0 .786 0 1.763v20.474C0 23.214.786 24 1.763 24h20.474c.977 0 1.763-.786 1.763-1.763V1.763C24 .786 23.214 0 22.237 0zM5.13 5.323l13.837.019-.009 13.836h-3.464l.01-10.382h-3.456L12.04 19.17H5.113z","fill":"currentColor"}]}],["$","span",null,{"className":"min-w-0 break-all text-xs font-medium","children":"lucide-react"}]]}]}]]}],["$","$L50",null,{"namespace":"@hairline","registryDependencies":["https://hairlineui.com/r/number-roll.json?as=dependency","https://hairlineui.com/r/text-morph.json?as=dependency"]}]]}],null]}],["$","$L51",null,{"files":[{"path":"registry/workflow-canvas.tsx","content":"$52","type":"registry:component"},{"path":"registry/workflow-types.ts","content":"$53","type":"registry:component"},{"path":"registry/workflow-connections.tsx","content":"$54","type":"registry:component"},{"path":"registry/workflow-status.tsx","content":"$55","type":"registry:component"},{"path":"registry/workflow-inspector.tsx","content":"$56","type":"registry:component"},{"path":"registry/use-workflow-viewport.ts","content":"$57","type":"registry:component"},{"path":"registry/ui-interaction-motion.ts","content":"$58","type":"registry:component"}],"className":"h-[70svh] min-h-80"}]]}]