@atmos.build/ui 0.1.0

package/dist/flow/canvas/sticky-notes.d.ts

@@ -0,0 +1,25 @@
+export type StickyNoteColor = 'yellow' | 'blue' | 'green' | 'rose';
+export type StickyNote = {
+    id: string;
+    x: number;
+    y: number;
+    text: string;
+    color?: StickyNoteColor;
+};
+export declare const STICKY_NOTE_COLORS: StickyNoteColor[];
+export type StickyNoteLabels = {
+    body: string;
+    placeholder: string;
+    delete: string;
+    color: (color: StickyNoteColor) => string;
+};
+export type StickyNotesController = {
+    annotations: StickyNote[];
+    updateAnnotation: (id: string, patch: Partial<StickyNote>) => void;
+    commitAnnotation: (id: string, patch: Partial<StickyNote>) => void;
+    removeAnnotation: (id: string) => void;
+};
+export declare function StickyNotesLayer({ controller, labels, }: {
+    controller: StickyNotesController;
+    labels: StickyNoteLabels;
+}): import("react").JSX.Element;

package/dist/flow/canvas/sticky-notes.js

@@ -0,0 +1,101 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useCallback, useEffect, useRef, useState } from 'react';
+import { useViewport } from 'reactflow';
+import { Trash2 } from 'lucide-react';
+import { cn } from '../../lib/cn.js';
+export const STICKY_NOTE_COLORS = ['yellow', 'blue', 'green', 'rose'];
+const NOTE_COLOR_CLASS = {
+    yellow: 'border-amber-300/70 bg-amber-100 text-amber-950 dark:border-amber-400/30 dark:bg-amber-400/15 dark:text-amber-50',
+    blue: 'border-sky-300/70 bg-sky-100 text-sky-950 dark:border-sky-400/30 dark:bg-sky-400/15 dark:text-sky-50',
+    green: 'border-emerald-300/70 bg-emerald-100 text-emerald-950 dark:border-emerald-400/30 dark:bg-emerald-400/15 dark:text-emerald-50',
+    rose: 'border-rose-300/70 bg-rose-100 text-rose-950 dark:border-rose-400/30 dark:bg-rose-400/15 dark:text-rose-50',
+};
+const NOTE_TEXT_COMMIT_MS = 400;
+export function StickyNotesLayer({ controller, labels, }) {
+    const viewport = useViewport();
+    return (_jsx("div", { className: "pointer-events-none absolute inset-0 z-10", children: controller.annotations.map((annotation) => (_jsx(StickyNoteCard, { annotation: annotation, viewport: viewport, labels: labels, onUpdate: controller.updateAnnotation, onCommit: controller.commitAnnotation, onRemove: controller.removeAnnotation }, annotation.id))) }));
+}
+function StickyNoteCard({ annotation, viewport, labels, onUpdate, onCommit, onRemove, }) {
+    const [dragPos, setDragPos] = useState(null);
+    const textAreaRef = useRef(null);
+    const textTimerRef = useRef(null);
+    const pendingTextRef = useRef(null);
+    const dirtyTextRef = useRef(false);
+    const flushText = useCallback(() => {
+        if (textTimerRef.current) {
+            clearTimeout(textTimerRef.current);
+            textTimerRef.current = null;
+        }
+        if (pendingTextRef.current !== null) {
+            onUpdate(annotation.id, { text: pendingTextRef.current });
+            pendingTextRef.current = null;
+            dirtyTextRef.current = false;
+        }
+    }, [annotation.id, onUpdate]);
+    useEffect(() => () => flushText(), [flushText]);
+    useEffect(() => {
+        const textArea = textAreaRef.current;
+        if (!textArea || dirtyTextRef.current || textArea.value === annotation.text)
+            return;
+        textArea.value = annotation.text;
+    }, [annotation.text]);
+    const handleTextChange = (value) => {
+        dirtyTextRef.current = true;
+        pendingTextRef.current = value;
+        if (textTimerRef.current)
+            clearTimeout(textTimerRef.current);
+        textTimerRef.current = setTimeout(flushText, NOTE_TEXT_COMMIT_MS);
+    };
+    const handleTextBlur = () => {
+        flushText();
+    };
+    const startDrag = useCallback((event) => {
+        const target = event.target;
+        if (target?.closest('textarea, button'))
+            return;
+        event.preventDefault();
+        const start = { x: event.clientX, y: event.clientY };
+        const origin = { x: annotation.x, y: annotation.y };
+        let last = null;
+        let frame = null;
+        const onMove = (move) => {
+            last = {
+                x: origin.x + (move.clientX - start.x) / viewport.zoom,
+                y: origin.y + (move.clientY - start.y) / viewport.zoom,
+            };
+            if (frame == null) {
+                frame = requestAnimationFrame(() => {
+                    frame = null;
+                    setDragPos(last);
+                });
+            }
+        };
+        const onUp = () => {
+            document.removeEventListener('mousemove', onMove);
+            document.removeEventListener('mouseup', onUp);
+            if (frame != null) {
+                cancelAnimationFrame(frame);
+                frame = null;
+            }
+            if (last && (last.x !== origin.x || last.y !== origin.y)) {
+                onCommit(annotation.id, { x: last.x, y: last.y });
+            }
+            setDragPos(null);
+        };
+        document.addEventListener('mousemove', onMove);
+        document.addEventListener('mouseup', onUp);
+    }, [annotation.id, annotation.x, annotation.y, onCommit, viewport.zoom]);
+    const color = annotation.color ?? 'yellow';
+    const pos = dragPos ?? { x: annotation.x, y: annotation.y };
+    return (
+    // Drag container is a plain div, not a button: a button would make the drag
+    // guard's `closest('button')` match the card itself and abort every drag,
+    // and nesting a textarea/buttons inside a button is invalid HTML.
+    // eslint-disable-next-line jsx-a11y/no-static-element-interactions
+    _jsxs("div", { "aria-label": labels.body, className: cn('pointer-events-auto absolute w-52 cursor-grab rounded-md border text-left shadow-sm select-none', NOTE_COLOR_CLASS[color]), style: {
+            transform: `translate(${pos.x * viewport.zoom + viewport.x}px, ${pos.y * viewport.zoom + viewport.y}px) scale(${viewport.zoom})`,
+            transformOrigin: 'top left',
+        }, onMouseDown: startDrag, children: [_jsxs("div", { className: "flex items-center justify-between gap-2 border-b border-current/10 px-2 py-1", children: [_jsx("div", { className: "flex items-center gap-1", children: STICKY_NOTE_COLORS.map((candidate) => (_jsx("button", { type: "button", "aria-label": labels.color(candidate), title: labels.color(candidate), onClick: () => onUpdate(annotation.id, { color: candidate }), className: cn('size-3 rounded-full border border-current/25', candidate === 'yellow' && 'bg-amber-300', candidate === 'blue' && 'bg-sky-300', candidate === 'green' && 'bg-emerald-300', candidate === 'rose' && 'bg-rose-300', color === candidate &&
+                                'ring-offset-background ring-2 ring-current/35 ring-offset-1') }, candidate))) }), _jsx("button", { type: "button", "aria-label": labels.delete, title: labels.delete, onClick: () => onRemove(annotation.id), className: "inline-flex size-5 items-center justify-center rounded text-current/60 hover:bg-current/10 hover:text-current", children: _jsx(Trash2, { className: "size-3", strokeWidth: 1.8 }) })] }), _jsx("textarea", { ref: textAreaRef, defaultValue: annotation.text, "aria-label": labels.body, placeholder: labels.placeholder, onChange: (event) => handleTextChange(event.currentTarget.value), onBlur: handleTextBlur, className: "block min-h-24 w-full resize-none bg-transparent px-2 py-2 text-[12px] leading-relaxed outline-none placeholder:text-current/45" })] }));
+}

package/dist/flow/collaborative-graph-presence.d.ts

@@ -0,0 +1,28 @@
+export type CollaborativeConnectionStatus = 'connecting' | 'connected' | 'disconnected';
+export declare function collaborativePresenceColor(id: string): string;
+/**
+ * A node a peer is dragging right now, expressed in flow/world coordinates so
+ * every viewer projects it through its own viewport. `width`/`height` are the
+ * node's measured size (also world units) used to draw the live ghost.
+ */
+export type CollaborativeGraphDrag = {
+    nodeId: string;
+    x: number;
+    y: number;
+    width: number;
+    height: number;
+};
+export type CollaborativeGraphPeer = {
+    id: string;
+    name: string;
+    color: string;
+    /** Pointer in flow/world coordinates (not container pixels), or null. */
+    pointer: {
+        x: number;
+        y: number;
+    } | null;
+    selectedNodeIds: string[];
+    /** The node this peer is dragging live, or null when idle. */
+    drag: CollaborativeGraphDrag | null;
+};
+export declare function parseCollaborativeGraphPeer(fallbackID: string, state: unknown): CollaborativeGraphPeer | null;

package/dist/flow/collaborative-graph-presence.js

@@ -0,0 +1,55 @@
+const presenceColors = [
+    '#2563eb',
+    '#7c3aed',
+    '#db2777',
+    '#dc2626',
+    '#ea580c',
+    '#16a34a',
+    '#0891b2',
+];
+export function collaborativePresenceColor(id) {
+    let hash = 0;
+    for (let index = 0; index < id.length; index++)
+        hash = (hash * 31 + id.charCodeAt(index)) | 0;
+    return presenceColors[Math.abs(hash) % presenceColors.length] ?? presenceColors[0];
+}
+export function parseCollaborativeGraphPeer(fallbackID, state) {
+    if (!state || typeof state !== 'object' || Array.isArray(state))
+        return null;
+    const record = state;
+    return {
+        id: fallbackID,
+        name: typeof record.name === 'string' && record.name.trim() ? record.name : fallbackID,
+        color: collaborativePresenceColor(fallbackID),
+        pointer: parseCollaborativePointer(record.pointer),
+        selectedNodeIds: Array.isArray(record.selectedNodeIds)
+            ? record.selectedNodeIds.filter((value) => typeof value === 'string')
+            : [],
+        drag: parseCollaborativeDrag(record.drag),
+    };
+}
+function parseCollaborativeDrag(value) {
+    if (!value || typeof value !== 'object' || Array.isArray(value))
+        return null;
+    const record = value;
+    if (typeof record.nodeId !== 'string' ||
+        typeof record.x !== 'number' ||
+        typeof record.y !== 'number') {
+        return null;
+    }
+    return {
+        nodeId: record.nodeId,
+        x: record.x,
+        y: record.y,
+        width: typeof record.width === 'number' && record.width > 0 ? record.width : 160,
+        height: typeof record.height === 'number' && record.height > 0 ? record.height : 44,
+    };
+}
+function parseCollaborativePointer(value) {
+    if (!value || typeof value !== 'object' || Array.isArray(value))
+        return null;
+    const record = value;
+    return typeof record.x === 'number' && typeof record.y === 'number'
+        ? { x: record.x, y: record.y }
+        : null;
+}

package/dist/flow/collaborative-graph-sync.d.ts

@@ -0,0 +1,40 @@
+import type { Edge, Node } from 'reactflow';
+import type * as Y from 'yjs';
+export type CollaborativeYDoc = Y.Doc;
+export type CollaborativeYMap<T = unknown> = Y.Map<T>;
+export type CollaborativeYMapEvent<T = unknown> = Y.YMapEvent<T>;
+export type CollaborativeGraphSnapshot<TNodeData, TEdgeData> = {
+    nodes: Node<TNodeData>[];
+    edges: Edge<TEdgeData>[];
+};
+export type CollaborativeGraphPatch<TNodeData, TEdgeData> = {
+    nodes?: {
+        upsert?: Node<TNodeData>[];
+        deleteIds?: string[];
+    };
+    edges?: {
+        upsert?: Edge<TEdgeData>[];
+        deleteIds?: string[];
+    };
+};
+export type CollaborativeCollectionHashes = {
+    nodes: Map<string, string>;
+    edges: Map<string, string>;
+};
+export type CollaborativeGraphMapNames = {
+    nodes: string;
+    edges: string;
+};
+export declare function createCollaborativeCollectionHashes(): CollaborativeCollectionHashes;
+export declare function collaborativeEdgeKey<TEdgeData>(edge: Edge<TEdgeData>): string;
+export declare function serializeCollaborativeNode<TNodeData>(node: Node<TNodeData>): Node<TNodeData>;
+export declare function serializeCollaborativeEdge<TEdgeData>(edge: Edge<TEdgeData>): Edge<TEdgeData>;
+export declare function coerceCollaborativeNode<TNodeData>(value: unknown): Node<TNodeData> | null;
+export declare function coerceCollaborativeEdge<TEdgeData>(value: unknown): Edge<TEdgeData> | null;
+export declare function syncCollaborativeCollection<TItem>(map: Y.Map<unknown>, items: readonly TItem[], hashes: Map<string, string>, keyForItem: (item: TItem, index: number) => string): boolean;
+export declare function collaborativePatchFromMapEvent<TItem>(event: Y.YMapEvent<unknown>, map: Y.Map<unknown>, hashes: Map<string, string>, coerce: (value: unknown) => TItem | null, keyForItem: (item: TItem, index: number) => string): {
+    upsert?: TItem[];
+    deleteIds?: string[];
+};
+export declare function writeCollaborativeGraph<TNodeData, TEdgeData>(doc: Y.Doc, graph: CollaborativeGraphSnapshot<TNodeData, TEdgeData>, mapNames: CollaborativeGraphMapNames, hashes: CollaborativeCollectionHashes): boolean;
+export declare function resetCollaborativeGraphHashes<TNodeData, TEdgeData>(graph: CollaborativeGraphSnapshot<TNodeData, TEdgeData>, hashes: CollaborativeCollectionHashes): void;

package/dist/flow/collaborative-graph-sync.js

@@ -0,0 +1,127 @@
+export function createCollaborativeCollectionHashes() {
+    return { nodes: new Map(), edges: new Map() };
+}
+export function collaborativeEdgeKey(edge) {
+    return (edge.id ||
+        `${edge.source}:${edge.sourceHandle ?? ''}->${edge.target}:${edge.targetHandle ?? ''}`);
+}
+export function serializeCollaborativeNode(node) {
+    return {
+        id: node.id,
+        type: node.type ?? 'atmos',
+        position: { x: Math.round(node.position.x), y: Math.round(node.position.y) },
+        data: structuredClone(node.data),
+    };
+}
+export function serializeCollaborativeEdge(edge) {
+    return {
+        id: collaborativeEdgeKey(edge),
+        source: edge.source,
+        target: edge.target,
+        type: edge.type ?? 'atmos',
+        ...(edge.sourceHandle ? { sourceHandle: edge.sourceHandle } : {}),
+        ...(edge.targetHandle ? { targetHandle: edge.targetHandle } : {}),
+        ...(edge.data ? { data: structuredClone(edge.data) } : {}),
+    };
+}
+export function coerceCollaborativeNode(value) {
+    if (!value || typeof value !== 'object' || Array.isArray(value))
+        return null;
+    const record = value;
+    if (typeof record.id !== 'string')
+        return null;
+    if (!record.position || typeof record.position !== 'object' || Array.isArray(record.position)) {
+        return null;
+    }
+    const position = record.position;
+    if (typeof position.x !== 'number' || typeof position.y !== 'number')
+        return null;
+    if (!record.data || typeof record.data !== 'object' || Array.isArray(record.data))
+        return null;
+    return {
+        id: record.id,
+        type: typeof record.type === 'string' ? record.type : 'atmos',
+        position: { x: position.x, y: position.y },
+        data: structuredClone(record.data),
+    };
+}
+export function coerceCollaborativeEdge(value) {
+    if (!value || typeof value !== 'object' || Array.isArray(value))
+        return null;
+    const record = value;
+    if (typeof record.source !== 'string' || typeof record.target !== 'string')
+        return null;
+    const sourceHandle = typeof record.sourceHandle === 'string' ? record.sourceHandle : undefined;
+    const targetHandle = typeof record.targetHandle === 'string' ? record.targetHandle : undefined;
+    const edge = {
+        id: typeof record.id === 'string' && record.id.trim()
+            ? record.id
+            : `${record.source}:${sourceHandle ?? ''}->${record.target}:${targetHandle ?? ''}`,
+        source: record.source,
+        target: record.target,
+        type: typeof record.type === 'string' ? record.type : 'atmos',
+        ...(sourceHandle ? { sourceHandle } : {}),
+        ...(targetHandle ? { targetHandle } : {}),
+    };
+    if (record.data && typeof record.data === 'object' && !Array.isArray(record.data)) {
+        edge.data = structuredClone(record.data);
+    }
+    return edge;
+}
+export function syncCollaborativeCollection(map, items, hashes, keyForItem) {
+    let changed = false;
+    const nextKeys = new Set();
+    items.forEach((item, index) => {
+        const key = keyForItem(item, index);
+        nextKeys.add(key);
+        const serialized = JSON.stringify(item);
+        if (hashes.get(key) !== serialized) {
+            map.set(key, item);
+            hashes.set(key, serialized);
+            changed = true;
+        }
+    });
+    for (const key of Array.from(map.keys())) {
+        if (nextKeys.has(key))
+            continue;
+        map.delete(key);
+        hashes.delete(key);
+        changed = true;
+    }
+    return changed;
+}
+export function collaborativePatchFromMapEvent(event, map, hashes, coerce, keyForItem) {
+    const upsert = [];
+    const deleteIds = [];
+    for (const [key, change] of event.changes.keys) {
+        if (change.action === 'delete') {
+            hashes.delete(key);
+            deleteIds.push(key);
+            continue;
+        }
+        const item = coerce(map.get(key));
+        if (!item)
+            continue;
+        hashes.set(keyForItem(item, 0), JSON.stringify(item));
+        upsert.push(item);
+    }
+    return {
+        ...(upsert.length ? { upsert } : {}),
+        ...(deleteIds.length ? { deleteIds } : {}),
+    };
+}
+export function writeCollaborativeGraph(doc, graph, mapNames, hashes) {
+    const nodes = graph.nodes.map(serializeCollaborativeNode);
+    const edges = graph.edges.map(serializeCollaborativeEdge);
+    const nodesChanged = syncCollaborativeCollection(doc.getMap(mapNames.nodes), nodes, hashes.nodes, (node) => node.id);
+    const edgesChanged = syncCollaborativeCollection(doc.getMap(mapNames.edges), edges, hashes.edges, collaborativeEdgeKey);
+    return nodesChanged || edgesChanged;
+}
+export function resetCollaborativeGraphHashes(graph, hashes) {
+    resetHashes(hashes.nodes, graph.nodes, (node) => node.id);
+    resetHashes(hashes.edges, graph.edges, collaborativeEdgeKey);
+}
+function resetHashes(hashes, items, keyForItem) {
+    hashes.clear();
+    items.forEach((item, index) => hashes.set(keyForItem(item, index), JSON.stringify(item)));
+}

package/dist/flow/editor/adapter.d.ts

@@ -0,0 +1,64 @@
+import type { ComponentType, ReactNode } from 'react';
+import type { Connection, EdgeProps, Edge as RfEdge, Node as RfNode } from 'reactflow';
+import type { FlowCanvasController } from '../canvas/canvas-frame.js';
+import type { NodeLibraryGroup } from '../canvas/node-library.js';
+import type { MakeNodeDataContext } from './use-dag-editor.js';
+export type FlowEditorIssueSeverity = 'error' | 'warning' | 'info';
+export interface FlowEditorIssue {
+    readonly nodeId: string;
+    readonly message: string;
+    readonly severity?: FlowEditorIssueSeverity;
+}
+export interface FlowAdapterContext {
+    readonly workspaceId: string | null | undefined;
+}
+export interface NodeConfigPanelProps<TData> {
+    readonly node: RfNode<TData>;
+    readonly onChange: (patch: Partial<TData>) => void;
+    readonly onClose: () => void;
+}
+export interface SettingsDialogContentProps {
+    readonly onClose: () => void;
+}
+export interface FlowMutation<TInput, TResult> {
+    readonly mutateAsync: (input: TInput) => Promise<TResult>;
+    readonly isPending: boolean;
+}
+export type FlowStickyNotes = Pick<FlowCanvasController, 'annotations' | 'addAnnotation' | 'updateAnnotation' | 'commitAnnotation' | 'removeAnnotation'>;
+export interface FlowDomainAdapter<TData, TEdge, TDef, TSaveInput = unknown, TSaveResult = unknown, TPublishInput = unknown, TPublishResult = unknown> {
+    readonly nodeGroups: (ctx: FlowAdapterContext) => NodeLibraryGroup[];
+    readonly makeNodeData: (kind: string, title: string, ctx?: MakeNodeDataContext<TData>) => TData;
+    readonly cloneNodeData?: (data: TData) => TData;
+    readonly stampIdentity?: (nodes: RfNode<TData>[]) => RfNode<TData>[] | null;
+    readonly isEntryNode: (node: RfNode<TData>) => boolean;
+    readonly isProtected: (node: RfNode<TData>) => boolean;
+    readonly isValidConnection?: (connection: Connection, nodes: RfNode<TData>[], edges: RfEdge<TEdge>[]) => boolean;
+    readonly NodeComponent: ComponentType<Record<string, unknown>>;
+    readonly EdgeComponent: ComponentType<EdgeProps<TEdge>>;
+    readonly titleForKind: (kind: string) => string;
+    readonly nodeLabel?: (node: RfNode<TData>) => string;
+    readonly NodeConfigPanel: ComponentType<NodeConfigPanelProps<TData>>;
+    readonly SettingsDialogContent: ComponentType<SettingsDialogContentProps>;
+    readonly compile: (nodes: RfNode<TData>[], edges: RfEdge<TEdge>[]) => TDef;
+    readonly decode: (def: TDef | null | undefined, layout?: FlowLayoutMap) => {
+        nodes: RfNode<TData>[];
+        edges: RfEdge<TEdge>[];
+    };
+    readonly encodeLayout: (nodes: RfNode<TData>[]) => FlowLayoutMap;
+    readonly useSave: () => FlowMutation<TSaveInput, TSaveResult>;
+    readonly usePublish: () => FlowMutation<TPublishInput, TPublishResult>;
+    readonly buildSaveInput: (args: {
+        nodes: RfNode<TData>[];
+        edges: RfEdge<TEdge>[];
+        positionsOnly: boolean;
+    }) => TSaveInput;
+    readonly buildPublishInput: (saveResult: TSaveResult) => TPublishInput;
+    readonly validate: (nodes: RfNode<TData>[], edges: RfEdge<TEdge>[]) => FlowEditorIssue[];
+    readonly supportsStickyNotes?: boolean;
+    readonly useStickyNotes?: () => FlowStickyNotes;
+    readonly toolbarExtras?: (ctx: FlowAdapterContext) => ReactNode;
+}
+export type FlowLayoutMap = Record<string, {
+    x: number;
+    y: number;
+}>;

package/dist/flow/editor/adapter.js

@@ -0,0 +1 @@
+export {};

package/dist/flow/editor/command-registry.d.ts

@@ -0,0 +1,10 @@
+export type FlowEditorCommands = {
+    readonly run?: () => void;
+    readonly tidy?: () => void;
+    readonly addNode?: () => void;
+};
+export type FlowEditorCommandId = keyof FlowEditorCommands;
+export declare function registerFlowEditorCommands(scope: string, commands: FlowEditorCommands): () => void;
+export declare function getFlowEditorCommands(scope: string): FlowEditorCommands;
+export declare function runFlowEditorCommand(scope: string, id: FlowEditorCommandId): void;
+export declare function useFlowEditorCommands(scope: string): FlowEditorCommands;

package/dist/flow/editor/command-registry.js

@@ -0,0 +1,35 @@
+'use client';
+import { useSyncExternalStore } from 'react';
+const commandsByScope = new Map();
+const listeners = new Set();
+const emptyCommands = {};
+function notifyListeners() {
+    for (const listener of listeners)
+        listener();
+}
+export function registerFlowEditorCommands(scope, commands) {
+    commandsByScope.set(scope, { ...commandsByScope.get(scope), ...commands });
+    notifyListeners();
+    return () => {
+        const current = commandsByScope.get(scope) ?? emptyCommands;
+        const removed = new Set(Object.keys(commands).filter((key) => current[key] === commands[key]));
+        const remaining = Object.fromEntries(Object.entries(current).filter(([key]) => !removed.has(key)));
+        if (Object.keys(remaining).length === 0)
+            commandsByScope.delete(scope);
+        else
+            commandsByScope.set(scope, remaining);
+        notifyListeners();
+    };
+}
+export function getFlowEditorCommands(scope) {
+    return commandsByScope.get(scope) ?? emptyCommands;
+}
+export function runFlowEditorCommand(scope, id) {
+    getFlowEditorCommands(scope)[id]?.();
+}
+export function useFlowEditorCommands(scope) {
+    return useSyncExternalStore((listener) => {
+        listeners.add(listener);
+        return () => listeners.delete(listener);
+    }, () => getFlowEditorCommands(scope), () => emptyCommands);
+}

package/dist/flow/editor/dag-canvas.d.ts

@@ -0,0 +1,18 @@
+import { type ComponentType } from 'react';
+import type { EdgeProps, NodeTypes } from 'reactflow';
+import type { FlowStickyNotes } from './adapter.js';
+import type { FlowEditorCanvasPresentation } from './flow-editor.js';
+import type { DagEditor } from './use-dag-editor.js';
+export interface FlowDagCanvasProps<TData, TEdge> {
+    readonly dag: DagEditor<TData, TEdge>;
+    readonly NodeComponent: NodeTypes[string] | ComponentType<Record<string, unknown>>;
+    readonly EdgeComponent: ComponentType<EdgeProps<TEdge>>;
+    readonly titleForKind: (kind: string) => string;
+    readonly renderInsertPicker: FlowEditorCanvasPresentation<TData, TEdge>['renderInsertPicker'];
+    readonly renderDropPicker: FlowEditorCanvasPresentation<TData, TEdge>['renderDropPicker'];
+    readonly presentation?: FlowEditorCanvasPresentation<TData, TEdge>;
+    readonly invalidNodeIds?: ReadonlySet<string>;
+    readonly stickyNotes?: FlowStickyNotes | null;
+    readonly showStickyNotes?: boolean;
+}
+export declare function FlowDagCanvas<TData, TEdge>({ dag, NodeComponent, EdgeComponent, titleForKind, renderInsertPicker, renderDropPicker, presentation, invalidNodeIds, stickyNotes, showStickyNotes, }: FlowDagCanvasProps<TData, TEdge>): import("react").JSX.Element;

package/dist/flow/editor/dag-canvas.js

@@ -0,0 +1,33 @@
+'use client';
+import { jsx as _jsx } from "react/jsx-runtime";
+import { useMemo } from 'react';
+import { useTranslations } from 'use-intl';
+import { FlowCanvasFrame } from '../canvas/canvas-frame.js';
+import { makeFlowCanvasController } from './make-controller.js';
+export function FlowDagCanvas({ dag, NodeComponent, EdgeComponent, titleForKind, renderInsertPicker, renderDropPicker, presentation = {}, invalidNodeIds, stickyNotes, showStickyNotes = false, }) {
+    const tc = useTranslations('flowEditor.canvas');
+    const controller = useMemo(() => makeFlowCanvasController(dag, { stickyNotes }), [dag, stickyNotes]);
+    const labels = useMemo(() => ({
+        modeMove: tc('modeMove'),
+        modeSelect: tc('modeSelect'),
+        copy: tc('copy'),
+        paste: tc('paste'),
+        undo: tc('undo'),
+        redo: tc('redo'),
+        tidy: tc('tidy'),
+        addNote: tc('addNote'),
+        minimapShow: tc('minimapShow'),
+        minimapHide: tc('minimapHide'),
+        closePicker: tc('closePicker'),
+        stickyNotes: {
+            body: tc('stickyNotes.body'),
+            placeholder: tc('stickyNotes.placeholder'),
+            delete: tc('stickyNotes.delete'),
+            color: () => '',
+        },
+    }), [tc]);
+    const nodeTypes = useMemo(() => ({ atmos: NodeComponent }), [NodeComponent]);
+    const edgeTypes = useMemo(() => ({ atmos: EdgeComponent }), [EdgeComponent]);
+    const { afterCanvas: _afterCanvas, alternateContent: _alternateContent, renderInsertPicker: contributedInsertPicker, renderDropPicker: contributedDropPicker, ...canvasProps } = presentation;
+    return (_jsx(FlowCanvasFrame, { ...canvasProps, controller: controller, nodeTypes: nodeTypes, edgeTypes: edgeTypes, labels: labels, titleForKind: titleForKind, invalidNodeIds: invalidNodeIds, showStickyNotes: showStickyNotes, onCopySelection: dag.copy, onPasteSelection: dag.paste, onPaneDrop: (kind, position) => dag.addNodeAt(kind, position), renderInsertPicker: contributedInsertPicker ?? renderInsertPicker ?? (() => null), renderDropPicker: contributedDropPicker ?? renderDropPicker ?? (() => null) }));
+}

package/dist/flow/editor/flow-editor.d.ts

@@ -0,0 +1,54 @@
+import { type ReactNode } from 'react';
+import type { Edge as RfEdge, Node as RfNode } from 'reactflow';
+import type { DropAddContext, FlowCanvasFrameProps } from '../canvas/canvas-frame.js';
+import type { FlowDomainAdapter } from './adapter.js';
+import { type DagEditor, type EdgeBridgeSpec } from './use-dag-editor.js';
+import type { NodeLibraryGroup } from '../canvas/node-library.js';
+type PickerActions = {
+    onPick: (kind: string) => void;
+    onClose: () => void;
+};
+type CoreCanvasProps = 'controller' | 'nodeTypes' | 'edgeTypes' | 'labels' | 'titleForKind' | 'renderDropPicker' | 'renderInsertPicker' | 'invalidNodeIds' | 'showStickyNotes' | 'onCopySelection' | 'onPasteSelection' | 'onPaneDrop';
+export type FlowEditorCanvasPresentation<TData, TEdge> = Omit<FlowCanvasFrameProps<TData, TEdge>, CoreCanvasProps> & {
+    readonly afterCanvas?: ReactNode;
+    readonly alternateContent?: ReactNode;
+    readonly renderInsertPicker?: FlowCanvasFrameProps<TData, TEdge>['renderInsertPicker'];
+    readonly renderDropPicker?: FlowCanvasFrameProps<TData, TEdge>['renderDropPicker'];
+};
+export interface FlowEditorCanvasContext<TData, TEdge> {
+    readonly dag: DagEditor<TData, TEdge>;
+    readonly groups: readonly NodeLibraryGroup[];
+    readonly invalidNodeIds: ReadonlySet<string>;
+}
+export type UseFlowEditorCanvasPresentation<TData, TEdge> = (context: FlowEditorCanvasContext<TData, TEdge>) => FlowEditorCanvasPresentation<TData, TEdge>;
+export interface FlowEditorProps<TData, TEdge, TDef, TSaveInput, TSaveResult, TPublishInput, TPublishResult> {
+    readonly adapter: FlowDomainAdapter<TData, TEdge, TDef, TSaveInput, TSaveResult, TPublishInput, TPublishResult>;
+    readonly workspaceId: string | null | undefined;
+    readonly initialNodes: RfNode<TData>[];
+    readonly initialEdges: RfEdge<TEdge>[];
+    readonly settingsTitle: string;
+    readonly isNew?: boolean;
+    readonly externalDirty?: boolean;
+    readonly initiallyUnpublished?: boolean;
+    readonly onSaved?: (result: TSaveResult) => void;
+    readonly onPublished?: (result: TSaveResult) => void;
+    readonly onFirstSave?: (result: TSaveResult) => void;
+    readonly onError?: (error: unknown, phase: 'save' | 'publish') => void;
+    readonly renderInsertPicker: (edgeId: string, actions: PickerActions) => ReactNode;
+    readonly renderDropPicker: (ctx: DropAddContext, actions: PickerActions) => ReactNode;
+    readonly dropPickerWidth?: number;
+    readonly buildEdge?: (spec: EdgeBridgeSpec<TEdge>) => RfEdge<TEdge>;
+    readonly isSingleHandle?: (sourceId: string, handle: string | null, nodes: RfNode<TData>[]) => boolean;
+    readonly handleOrderOf?: (sourceId: string, sourceHandle: string | null | undefined, nodes: RfNode<TData>[]) => number | null;
+    readonly clipboardKind?: string;
+    readonly headingFont?: string;
+    readonly testId?: string;
+    readonly renderHeaderStart?: () => ReactNode;
+    readonly useCanvasPresentation?: UseFlowEditorCanvasPresentation<TData, TEdge>;
+    readonly renderSettings?: (args: {
+        open: boolean;
+        onOpenChange: (open: boolean) => void;
+    }) => ReactNode;
+}
+export declare function FlowEditor<TData, TEdge = unknown, TDef = unknown, TSaveInput = unknown, TSaveResult = unknown, TPublishInput = unknown, TPublishResult = unknown>({ adapter, workspaceId, initialNodes, initialEdges, settingsTitle, isNew, externalDirty, initiallyUnpublished, onSaved, onPublished, onFirstSave, onError, renderInsertPicker, renderDropPicker, dropPickerWidth, buildEdge, isSingleHandle, handleOrderOf, clipboardKind, headingFont, testId, renderHeaderStart, useCanvasPresentation, renderSettings, }: FlowEditorProps<TData, TEdge, TDef, TSaveInput, TSaveResult, TPublishInput, TPublishResult>): import("react").JSX.Element;
+export {};