@atmos.build/ui 0.1.0

package/dist/components/voice-line.js

@@ -0,0 +1,293 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import * as React from 'react';
+import { CircleDashed, Loader2, Mic, RotateCcw, Volume2 } from 'lucide-react';
+import { cn } from '../lib/cn.js';
+import { COMPOSITED_GLINT_BANDS, useCompositedGlint } from '../lib/composited-glint.js';
+const TONES = {
+    idle: {
+        chip: 'bg-muted text-muted-foreground',
+        wave: 'text-muted-foreground/50',
+        ring: 'border-border/70',
+        glow: '',
+        caret: 'bg-muted-foreground',
+    },
+    generating: {
+        chip: 'bg-muted text-muted-foreground',
+        wave: 'text-muted-foreground/60',
+        ring: 'border-border/70',
+        glow: '',
+        caret: 'bg-muted-foreground',
+    },
+    speaking: {
+        chip: 'bg-primary/15 text-primary',
+        wave: 'text-primary',
+        ring: 'border-primary/40 ring-1 ring-primary/15',
+        glow: 'shadow-[0_12px_40px_-16px] shadow-primary/40',
+        caret: 'bg-primary',
+    },
+    listening: {
+        chip: 'bg-primary/15 text-primary',
+        wave: 'text-primary',
+        ring: 'border-primary/40 ring-1 ring-primary/15',
+        glow: 'shadow-[0_12px_40px_-16px] shadow-primary/40',
+        caret: 'bg-primary',
+    },
+    verifying: {
+        chip: 'bg-muted text-muted-foreground',
+        wave: 'text-muted-foreground/60',
+        ring: 'border-border/70',
+        glow: '',
+        caret: 'bg-muted-foreground',
+    },
+    reprompt: {
+        chip: 'bg-destructive/10 text-destructive',
+        wave: 'text-destructive',
+        ring: 'border-destructive/40 ring-1 ring-destructive/15',
+        glow: 'shadow-[0_12px_40px_-16px] shadow-destructive/40',
+        caret: 'bg-destructive',
+    },
+};
+const GLYPHS = {
+    idle: CircleDashed,
+    generating: Loader2,
+    speaking: Volume2,
+    listening: Mic,
+    verifying: Loader2,
+    reprompt: RotateCcw,
+};
+/**
+ * The unified voice line — one dynamic-island pill whose tint, glyph, caption and
+ * waveform cross-fade between speaking → listening → verifying → reprompt. It is a
+ * single morphing surface (never two stacked boxes): the system's spoken line and the
+ * caller's transcribed line share it. Presentational; the caption is announced via
+ * aria-live so the spoken/heard line reaches a screen reader.
+ */
+export function VoiceLine({ state, caption, who, icon, partial = false, analyser = null, active = false, micLevel, countdownMs, layout = 'stacked', loadingVisualization = 'ripple', bars, className, ...props }) {
+    const tone = TONES[state];
+    const Glyph = icon ?? GLYPHS[state];
+    const spinning = state === 'verifying' || state === 'generating';
+    const showRing = state === 'listening' && typeof countdownMs === 'number' && countdownMs > 0;
+    if (layout === 'waveform') {
+        return (_jsxs("div", { "data-slot": "voice-line", "data-state": state, "data-layout": layout, className: cn('bg-card/80 relative flex min-h-8 items-center gap-2 overflow-hidden rounded-full border px-2.5 py-1.5', 'transition-[box-shadow,border-color] duration-500 motion-reduce:transition-none', tone.ring, tone.glow, className), ...props, children: [who ? (_jsxs("span", { className: cn('inline-flex shrink-0 items-center gap-1.5 rounded-full px-2 py-1 text-[11px] font-medium', 'transition-colors duration-300 motion-reduce:transition-none', tone.chip), children: [_jsx(Glyph, { className: cn('size-3.5', spinning && 'motion-safe:animate-spin'), strokeWidth: 1.6, "aria-hidden": true }), who] })) : null, _jsx(Waveform, { analyser: analyser, active: active, state: state, micLevel: micLevel, bars: bars, loadingVisualization: loadingVisualization, className: cn('h-5 min-w-16 flex-1', tone.wave) }), caption ? (_jsx("span", { className: "sr-only", "aria-live": "polite", children: caption })) : null, state === 'generating' && loadingVisualization !== 'shimmer-bars' ? (_jsx("span", { "aria-hidden": true, className: "via-primary/[0.06] pointer-events-none absolute inset-0 bg-gradient-to-r from-transparent to-transparent motion-safe:animate-pulse" })) : null] }));
+    }
+    return (_jsxs("div", { "data-slot": "voice-line", "data-state": state, "data-layout": layout, className: cn('bg-card/80 relative flex flex-col gap-3 overflow-hidden rounded-2xl border px-4 py-3.5', 'transition-[box-shadow,border-color] duration-500 motion-reduce:transition-none', tone.ring, tone.glow, className), ...props, children: [who || showRing ? (_jsxs("div", { className: "flex items-center gap-2", children: [who ? (_jsxs("span", { className: cn('inline-flex items-center gap-1.5 rounded-full px-2.5 py-1 text-[11px] font-medium', 'transition-colors duration-300 motion-reduce:transition-none', tone.chip), children: [_jsx(Glyph, { className: cn('size-3.5', spinning && 'motion-safe:animate-spin'), strokeWidth: 1.6, "aria-hidden": true }), who] })) : null, showRing ? _jsx(CountdownRing, { ms: countdownMs, className: tone.wave }) : null] })) : null, _jsx(Waveform, { analyser: analyser, active: active, state: state, micLevel: micLevel, bars: bars, loadingVisualization: loadingVisualization, className: cn('h-8 w-full', tone.wave) }), _jsxs("p", { "aria-live": "polite", className: cn('min-h-[2.5rem] text-[13.5px] leading-relaxed tracking-[-0.005em] transition-opacity duration-300 motion-reduce:transition-none', partial ? 'text-muted-foreground' : 'text-foreground'), children: [caption, partial ? (_jsx("span", { "aria-hidden": true, className: cn('ml-0.5 inline-block h-[1em] w-0.5 -translate-y-px align-middle', tone.caret, 'motion-safe:animate-pulse') })) : null] }), state === 'generating' ? (_jsx("span", { "aria-hidden": true, className: "via-primary/[0.06] pointer-events-none absolute inset-0 bg-gradient-to-r from-transparent to-transparent motion-safe:animate-pulse" })) : null] }));
+}
+function CountdownRing({ ms, className }) {
+    const arcRef = React.useRef(null);
+    const CIRC = 2 * Math.PI * 9;
+    React.useEffect(() => {
+        const arc = arcRef.current;
+        if (!arc)
+            return;
+        const reduce = typeof window !== 'undefined' && window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+        if (reduce) {
+            arc.style.strokeDashoffset = String(CIRC * 0.5);
+            return;
+        }
+        let raf = 0;
+        const start = performance.now();
+        const step = (now) => {
+            const p = Math.min(1, (now - start) / ms);
+            arc.style.strokeDashoffset = String(CIRC * p);
+            if (p < 1)
+                raf = requestAnimationFrame(step);
+        };
+        arc.style.strokeDashoffset = '0';
+        raf = requestAnimationFrame(step);
+        return () => cancelAnimationFrame(raf);
+    }, [ms, CIRC]);
+    return (_jsxs("svg", { className: cn('ml-auto size-[22px] -rotate-90', className), viewBox: "0 0 22 22", "aria-hidden": true, children: [_jsx("circle", { cx: "11", cy: "11", r: "9", fill: "none", stroke: "currentColor", strokeOpacity: 0.2, strokeWidth: 2 }), _jsx("circle", { ref: arcRef, cx: "11", cy: "11", r: "9", fill: "none", stroke: "currentColor", strokeWidth: 2, strokeLinecap: "round", strokeDasharray: CIRC })] }));
+}
+// The one waveform: real TTS frequency bars while speaking, center-weighted mic bars
+// while listening, a loading ripple while generating/checking, and a single static frame at rest.
+function Waveform({ analyser, active, state, micLevel, bars, loadingVisualization, className, }) {
+    const canvasRef = React.useRef(null);
+    const barsRef = React.useRef([]);
+    const levelRef = React.useRef(micLevel ?? 0);
+    React.useEffect(() => {
+        if (micLevel !== undefined)
+            levelRef.current = micLevel;
+    }, [micLevel]);
+    const listening = state === 'listening';
+    const speaking = state === 'speaking';
+    const generating = state === 'generating';
+    const verifying = state === 'verifying';
+    const loading = generating || verifying;
+    React.useEffect(() => {
+        const canvas = canvasRef.current;
+        if (!canvas)
+            return;
+        const ctx = canvas.getContext('2d');
+        if (!ctx)
+            return;
+        const reduce = window.matchMedia('(prefers-reduced-motion: reduce)').matches;
+        const color = getComputedStyle(canvas).color;
+        const barWidth = listening ? 3.6 : 3;
+        const step = barWidth + (listening ? 3.1 : 2.7);
+        const freq = analyser ? new Uint8Array(analyser.frequencyBinCount) : null;
+        const target = [];
+        let phase = 0;
+        let raf = 0;
+        const animate = !reduce && (speaking || listening || loading);
+        const render = () => {
+            const dpr = window.devicePixelRatio || 1;
+            const w = canvas.clientWidth;
+            const h = canvas.clientHeight;
+            if (canvas.width !== w * dpr || canvas.height !== h * dpr) {
+                canvas.width = w * dpr;
+                canvas.height = h * dpr;
+                ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
+            }
+            const centerY = h / 2;
+            const barCount = bars ?? Math.max(1, Math.floor(w / step));
+            const stepPx = bars ? w / bars : step;
+            const half = Math.max(1, Math.floor(barCount / 2));
+            const analyserActive = active && speaking && analyser && freq;
+            const barsActive = analyserActive || listening || (active && speaking);
+            if (!barsActive && !(loading && loadingVisualization === 'shimmer-bars')) {
+                ctx.clearRect(0, 0, w, h);
+                barsRef.current.length = 0;
+                phase += 0.09;
+                const rippleWidth = Math.max(12, w * 0.32);
+                const travelStart = Math.min(w / 2, rippleWidth * 0.35);
+                const travelEnd = Math.max(travelStart, w - travelStart);
+                const moving = loading && !reduce;
+                const travelProgress = (Math.sin(phase) + 1) / 2;
+                const rippleCenter = moving
+                    ? travelStart + travelProgress * (travelEnd - travelStart)
+                    : w / 2;
+                ctx.strokeStyle = color;
+                ctx.lineCap = 'round';
+                ctx.lineWidth = 1.25;
+                ctx.globalAlpha = 0.22;
+                ctx.beginPath();
+                ctx.moveTo(0, centerY);
+                ctx.lineTo(w, centerY);
+                ctx.stroke();
+                ctx.globalAlpha = 0.75;
+                ctx.beginPath();
+                for (let x = 0; x <= w; x += 1) {
+                    const dist = x - rippleCenter;
+                    const envelope = moving
+                        ? Math.exp(-((dist * dist) / (2 * rippleWidth * rippleWidth * 0.18)))
+                        : 0;
+                    const y = centerY + Math.sin(dist * 0.42) * envelope * h * 0.16;
+                    if (x === 0)
+                        ctx.moveTo(x, y);
+                    else
+                        ctx.lineTo(x, y);
+                }
+                ctx.stroke();
+                ctx.globalAlpha = 1;
+                if (animate)
+                    raf = requestAnimationFrame(render);
+                return;
+            }
+            target.length = barCount;
+            if (analyserActive && analyser && freq) {
+                analyser.getByteFrequencyData(freq);
+                const start = Math.floor(freq.length * 0.05);
+                const span = Math.floor(freq.length * 0.5) - start;
+                for (let i = 0; i < barCount; i++) {
+                    const mirrored = Math.abs(i - half) / half;
+                    const idx = start + Math.floor(mirrored * span);
+                    target[i] = Math.max(0.08, (freq[idx] ?? 0) / 255);
+                }
+            }
+            else {
+                phase += reduce ? 0 : 0.08;
+                let micAmp = Math.min(0.5, levelRef.current);
+                if (analyser && freq) {
+                    analyser.getByteTimeDomainData(freq);
+                    let sum = 0;
+                    for (let i = 0; i < freq.length; i++) {
+                        const v = ((freq[i] ?? 128) - 128) / 128;
+                        sum += v * v;
+                    }
+                    micAmp = Math.min(0.6, Math.sqrt(sum / freq.length) * 2.4);
+                }
+                const amp = Math.min(1, 0.24 + micAmp * 1.25);
+                for (let i = 0; i < barCount; i++) {
+                    const centered = (i - half) / half;
+                    const mirrored = Math.abs(centered);
+                    const centerWeight = Math.exp(-((centered * centered) / 0.18));
+                    const breath = reduce ? 0.72 : 0.72 + Math.sin(phase + mirrored * Math.PI * 1.2) * 0.12;
+                    target[i] = centerWeight < 0.035 ? 0.01 : 0.035 + centerWeight * amp * breath;
+                }
+            }
+            const prev = barsRef.current;
+            prev.length = barCount;
+            for (let i = 0; i < barCount; i++) {
+                const p = prev[i] ?? 0.08;
+                prev[i] = p + ((target[i] ?? 0.08) - p) * 0.35;
+            }
+            ctx.clearRect(0, 0, w, h);
+            const offset = offsetForBars(w, barCount, stepPx);
+            ctx.fillStyle = color;
+            for (let i = 0; i < barCount; i++) {
+                const value = prev[i] ?? 0.08;
+                if (!analyserActive && value < 0.045)
+                    continue;
+                const barHeight = Math.max(listening ? 3.25 : 2, value * h);
+                const x = offset + i * stepPx;
+                ctx.globalAlpha = listening ? Math.min(0.95, 0.16 + value * 1.2) : 0.35 + value * 0.65;
+                ctx.beginPath();
+                ctx.roundRect(x, centerY - barHeight / 2, barWidth, barHeight, barWidth / 2);
+                ctx.fill();
+            }
+            ctx.globalAlpha = 1;
+            if (animate)
+                raf = requestAnimationFrame(render);
+        };
+        if (animate)
+            raf = requestAnimationFrame(render);
+        else
+            render();
+        return () => cancelAnimationFrame(raf);
+    }, [
+        analyser,
+        active,
+        state,
+        listening,
+        speaking,
+        generating,
+        verifying,
+        loading,
+        loadingVisualization,
+        bars,
+    ]);
+    if (loading && loadingVisualization === 'shimmer-bars') {
+        return _jsx(VoiceShimmerBars, { bars: bars, className: className });
+    }
+    return _jsx("canvas", { ref: canvasRef, className: cn('block h-full', className), "aria-hidden": true });
+}
+function offsetForBars(width, count, step) {
+    return (width - count * step) / 2;
+}
+const SHIMMER_BAR_STEP = 5.7;
+const SHIMMER_BAR_WIDTH = 3;
+const SHIMMER_BAR_HEIGHTS = ['35%', '55%', '76%'];
+function VoiceShimmerBars({ bars, className }) {
+    const rootRef = React.useRef(null);
+    const [barCount, setBarCount] = React.useState(bars ?? 24);
+    const resolvedBarCount = bars ?? barCount;
+    useCompositedGlint(rootRef);
+    React.useLayoutEffect(() => {
+        if (bars !== undefined)
+            return;
+        const root = rootRef.current;
+        if (!root || typeof ResizeObserver === 'undefined')
+            return;
+        const update = () => {
+            setBarCount(Math.max(1, Math.floor(root.clientWidth / SHIMMER_BAR_STEP)));
+        };
+        const observer = new ResizeObserver(update);
+        observer.observe(root);
+        return () => observer.disconnect();
+    }, [bars]);
+    return (_jsxs("div", { ref: rootRef, "data-slot": "voice-shimmer-bars", "data-glint-active": "false", className: cn('relative block h-full overflow-hidden', className), "aria-hidden": true, children: [_jsx(VoiceShimmerBarGroup, { count: resolvedBarCount, height: "22%", className: "opacity-[0.16]" }), COMPOSITED_GLINT_BANDS.map((band, index) => (_jsx("span", { "data-composited-glint-window": true, "data-composited-glint-width": band.width, "data-composited-glint-opacity": band.opacity, className: "pointer-events-none absolute inset-y-0 left-0 overflow-hidden opacity-0", style: { width: `${band.width * 100}%` }, children: _jsx(VoiceShimmerBarGroup, { "data-composited-glint-copy": true, count: resolvedBarCount, height: SHIMMER_BAR_HEIGHTS[index] ?? '76%', className: "absolute inset-y-0 left-0", style: { width: `${100 / band.width}%` } }) }, band.width)))] }));
+}
+function VoiceShimmerBarGroup({ count, height, className, style, ...props }) {
+    return (_jsx("span", { className: cn('absolute inset-0 flex items-center justify-center gap-[2.7px]', className), style: style, ...props, children: Array.from({ length: count }, (_, index) => (_jsx("span", { className: "block shrink-0 rounded-full bg-current", style: { width: SHIMMER_BAR_WIDTH, height, minHeight: 3 } }, index))) }));
+}

package/dist/components/weekly-schedule-editor.d.ts

@@ -0,0 +1,15 @@
+import { type Weekday, type WeeklySchedule } from '../lib/weekly-schedule.js';
+export interface WeeklyScheduleEditorLabels {
+    days: Record<Weekday, string>;
+    closed: string;
+    addInterval: string;
+    removeInterval: string;
+    openLabel: (dayLabel: string) => string;
+    closeLabel: (dayLabel: string) => string;
+}
+export interface WeeklyScheduleEditorProps {
+    schedule: WeeklySchedule;
+    onChange: (next: WeeklySchedule) => void;
+    labels: WeeklyScheduleEditorLabels;
+}
+export declare function WeeklyScheduleEditor({ schedule, onChange, labels, }: WeeklyScheduleEditorProps): React.ReactElement;

package/dist/components/weekly-schedule-editor.js

@@ -0,0 +1,28 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { Plus, Trash2 } from 'lucide-react';
+import { WEEKDAY_ORDER, } from '../lib/weekly-schedule.js';
+import { Button } from './button.js';
+import { Input } from './input.js';
+export function WeeklyScheduleEditor({ schedule, onChange, labels, }) {
+    const setDayIntervals = (day, intervals) => {
+        const next = {};
+        for (const candidate of WEEKDAY_ORDER) {
+            const value = candidate === day ? intervals : schedule[candidate];
+            if (value?.length)
+                next[candidate] = value;
+        }
+        onChange(next);
+    };
+    return (_jsx("div", { className: "flex flex-col gap-1.5", children: WEEKDAY_ORDER.map((day) => (_jsx(WeekdayRow, { day: day, intervals: schedule[day] ?? [], labels: labels, onChange: (intervals) => setDayIntervals(day, intervals) }, day))) }));
+}
+function WeekdayRow({ day, intervals, labels, onChange, }) {
+    const dayLabel = labels.days[day];
+    const setInterval = (index, patch) => onChange(intervals.map((interval, candidate) => candidate === index ? { ...interval, ...patch } : interval));
+    const addInterval = () => onChange([...intervals, { start: '09:00', end: '17:00' }]);
+    const removeInterval = (index) => onChange(intervals.filter((_, candidate) => candidate !== index));
+    return (_jsxs("div", { className: "border-border/60 grid grid-cols-[88px_1fr] items-start gap-3 rounded-lg border px-3 py-2.5", children: [_jsx("span", { className: "text-foreground pt-1.5 text-[12.5px] font-medium", children: dayLabel }), _jsx("div", { className: "flex flex-col gap-1.5", children: intervals.length === 0 ? (_jsxs("div", { className: "flex items-center justify-between gap-2", children: [_jsx("span", { className: "text-muted-foreground text-[12px]", children: labels.closed }), _jsxs(Button, { type: "button", size: "xs", variant: "ghost", className: "text-muted-foreground gap-1 text-[11.5px]", onClick: addInterval, children: [_jsx(Plus, { className: "size-3", strokeWidth: 1.8 }), labels.addInterval] })] })) : (_jsxs(_Fragment, { children: [intervals.map((interval, index) => (_jsxs("div", { className: "flex items-center gap-2", children: [_jsx(TimeField, { value: interval.start, ariaLabel: labels.openLabel(dayLabel), onChange: (start) => setInterval(index, { start }) }), _jsx("span", { className: "text-muted-foreground text-[12px]", children: "\u2013" }), _jsx(TimeField, { value: interval.end, ariaLabel: labels.closeLabel(dayLabel), onChange: (end) => setInterval(index, { end }) }), _jsx(Button, { type: "button", size: "icon", variant: "ghost", className: "text-muted-foreground hover:text-destructive size-7 shrink-0", "aria-label": labels.removeInterval, onClick: () => removeInterval(index), children: _jsx(Trash2, { className: "size-3.5", strokeWidth: 1.8 }) })] }, index))), _jsxs(Button, { type: "button", size: "xs", variant: "ghost", className: "text-muted-foreground -ml-1 w-fit gap-1 text-[11.5px]", onClick: addInterval, children: [_jsx(Plus, { className: "size-3", strokeWidth: 1.8 }), labels.addInterval] })] })) })] }));
+}
+function TimeField({ value, ariaLabel, onChange, }) {
+    return (_jsx(Input, { type: "time", value: value, onChange: (event) => onChange(event.target.value), "aria-label": ariaLabel, className: "w-[124px]" }));
+}

package/dist/flow/canvas/canvas-frame.d.ts

@@ -0,0 +1,160 @@
+import { type Dispatch, type ReactNode, type SetStateAction } from 'react';
+import { type Connection, type EdgeTypes, type Edge as RfEdge, type Node as RfNode, type NodeTypes, type OnEdgesChange, type OnNodesChange } from 'reactflow';
+import { type StickyNotesController, type StickyNoteLabels } from './sticky-notes.js';
+export type CanvasMode = 'move' | 'select';
+export declare const FLOW_NODE_DND_MIME = "application/atmos-flow-node";
+export type DropAddContext = {
+    flow: {
+        x: number;
+        y: number;
+    };
+    screen: {
+        x: number;
+        y: number;
+    };
+    from?: {
+        sourceId: string;
+        handleId: string | null;
+    };
+    to?: {
+        targetId: string;
+    };
+};
+/** A node a peer is dragging live, in flow/world coordinates. */
+export type FlowNodeDragPreview = {
+    nodeId: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export type FlowCollaborator = {
+    id: string;
+    name: string;
+    color: string;
+    /** Pointer in flow/world coordinates (projected to screen at render). */
+    pointer?: {
+        x: number;
+        y: number;
+    } | null;
+    selectedNodeIds?: readonly string[];
+    drag?: FlowNodeDragPreview | null;
+};
+export interface FlowCanvasController<TData = unknown, TEdge = unknown> {
+    nodes: RfNode<TData>[];
+    edges: RfEdge<TEdge>[];
+    onNodesChange: OnNodesChange;
+    onEdgesChange: OnEdgesChange;
+    onConnect: (connection: Connection) => void;
+    isValidConnection: (connection: Connection) => boolean;
+    setNodes: Dispatch<SetStateAction<RfNode<TData>[]>>;
+    setEdges: Dispatch<SetStateAction<RfEdge<TEdge>[]>>;
+    insertNodeOnEdge: (edgeId: string, kind: string, title: string) => void;
+    addConnectedNodeAt: (args: {
+        kind: string;
+        title: string;
+        at: {
+            x: number;
+            y: number;
+        };
+        from?: {
+            sourceId: string;
+            handleId?: string | null;
+        };
+        to?: {
+            targetId: string;
+        };
+    }) => void;
+    removeNode: (id: string) => void;
+    removeNodesAndEdges: (nodeIds: readonly string[], edgeIds?: readonly string[]) => void;
+    duplicateNode: (id: string) => void;
+    undo: () => void;
+    redo: () => void;
+    canUndo: boolean;
+    canRedo: boolean;
+    tidy: () => void;
+    deselectAll: () => void;
+    focusRequest: {
+        id: string;
+        seq: number;
+    } | null;
+    annotations?: StickyNotesController['annotations'];
+    addAnnotation?: (at?: {
+        x: number;
+        y: number;
+    }) => void;
+    updateAnnotation?: StickyNotesController['updateAnnotation'];
+    commitAnnotation?: StickyNotesController['commitAnnotation'];
+    removeAnnotation?: StickyNotesController['removeAnnotation'];
+}
+export type FlowCanvasLabels = {
+    modeMove: string;
+    modeSelect: string;
+    copy: string;
+    paste: string;
+    undo: string;
+    redo: string;
+    tidy: string;
+    addNote: string;
+    minimapShow: string;
+    minimapHide: string;
+    closePicker: string;
+    stickyNotes: StickyNoteLabels;
+};
+type PickerActions = {
+    onPick: (kind: string) => void;
+    onClose: () => void;
+};
+export type FlowCanvasFrameProps<TData = unknown, TEdge = unknown> = {
+    controller: FlowCanvasController<TData, TEdge>;
+    nodeTypes: NodeTypes;
+    edgeTypes: EdgeTypes;
+    labels: FlowCanvasLabels;
+    titleForKind: (kind: string) => string;
+    renderDropPicker: (ctx: DropAddContext, actions: PickerActions) => ReactNode;
+    renderInsertPicker: (edgeId: string, actions: PickerActions) => ReactNode;
+    collaborators?: FlowCollaborator[];
+    onPointer?: (pointer: {
+        x: number;
+        y: number;
+    } | null) => void;
+    onNodeDragPreview?: (drag: FlowNodeDragPreview | null) => void;
+    highlightedNodeId?: string | null;
+    highlightedEdgeIds?: ReadonlySet<string>;
+    invalidNodeIds?: ReadonlySet<string>;
+    showStickyNotes?: boolean;
+    onAddPickerReady?: (openAddPicker: () => void) => void;
+    onCopySelection?: () => void | Promise<void>;
+    onPasteSelection?: () => void | Promise<void>;
+    toolbarExtras?: ReactNode;
+    rightPanel?: ReactNode;
+    onPaneDrop?: (kind: string, flowPosition: {
+        x: number;
+        y: number;
+    }) => void;
+    testId?: string;
+    collaboratorCursorTestIdPrefix?: string;
+    className?: string;
+    minimapDefaultThreshold?: number;
+    dropPickerWidth?: number;
+    dropPickerHeight?: number;
+    /** Read-only run replay overlay: disables editing and colors the live graph by run status. */
+    replay?: boolean;
+    statusByNode?: Readonly<Record<string, string>>;
+    durationByNode?: Readonly<Record<string, number>>;
+    takenHandlesByNode?: Readonly<Record<string, readonly string[]>>;
+    traversedEdgeIds?: ReadonlySet<string>;
+    /** Replay-only step selection: a node id on node click, null on pane click. */
+    onReplayNodeClick?: (nodeId: string | null) => void;
+    /** Content of the replay mode banner (status + exit control), rendered in place of the toolbar. */
+    replayBanner?: ReactNode;
+};
+export declare function FlowCanvasFrame<TData = unknown, TEdge = unknown>({ controller, nodeTypes, edgeTypes, labels, titleForKind, renderDropPicker, renderInsertPicker, collaborators, onPointer, onNodeDragPreview, highlightedNodeId, highlightedEdgeIds, invalidNodeIds, showStickyNotes, onAddPickerReady, onCopySelection, onPasteSelection, toolbarExtras, rightPanel, onPaneDrop, testId, collaboratorCursorTestIdPrefix, className, minimapDefaultThreshold, dropPickerWidth, dropPickerHeight, replay, statusByNode, durationByNode, takenHandlesByNode, traversedEdgeIds, onReplayNodeClick, replayBanner, }: FlowCanvasFrameProps<TData, TEdge>): import("react").JSX.Element;
+export declare function ToolbarButton({ active, disabled, title, onClick, children, }: {
+    active?: boolean;
+    disabled?: boolean;
+    title: string;
+    onClick: () => void;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export {};