@atmos.build/ui 0.1.0

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

@@ -0,0 +1,199 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useCallback, useEffect, useMemo, useRef, useState } from 'react';
+import { useTranslations } from 'use-intl';
+import { Settings2 } from 'lucide-react';
+import { Button } from '../../components/button.js';
+import { useDebouncedValue } from '../use-debounced-value.js';
+import { useDagEditor } from './use-dag-editor.js';
+import { FlowDagCanvas } from './dag-canvas.js';
+import { FlowLibraryRail } from './library-rail.js';
+import { SavePublishBar } from './save-publish-bar.js';
+import { IssuesPopover, isBlocked } from './issues-popover.js';
+import { SettingsDialog } from './settings-dialog.js';
+function useDefaultCanvasPresentation(_context) {
+    return {};
+}
+export function FlowEditor({ adapter, workspaceId, initialNodes, initialEdges, settingsTitle, isNew = false, externalDirty = false, initiallyUnpublished = false, onSaved, onPublished, onFirstSave, onError, renderInsertPicker, renderDropPicker, dropPickerWidth, buildEdge, isSingleHandle, handleOrderOf, clipboardKind, headingFont, testId = 'flow-editor', renderHeaderStart, useCanvasPresentation = useDefaultCanvasPresentation, renderSettings, }) {
+    const t = useTranslations('flowEditor');
+    const adapterCtx = useMemo(() => ({ workspaceId }), [workspaceId]);
+    const groups = useMemo(() => adapter.nodeGroups(adapterCtx), [adapter, adapterCtx]);
+    const dag = useDagEditor({
+        makeNodeData: adapter.makeNodeData,
+        ...(adapter.cloneNodeData ? { cloneNodeData: adapter.cloneNodeData } : {}),
+        isProtected: adapter.isProtected,
+        ...(adapter.isValidConnection ? { isValidConnection: adapter.isValidConnection } : {}),
+        initialNodes,
+        initialEdges,
+        ...(buildEdge ? { buildEdge } : {}),
+        ...(isSingleHandle ? { isSingleHandle } : {}),
+        ...(handleOrderOf ? { handleOrderOf } : {}),
+        ...(clipboardKind ? { clipboardKind } : {}),
+    });
+    const save = adapter.useSave();
+    const publish = adapter.usePublish();
+    const stickyNotes = adapter.useStickyNotes?.() ?? null;
+    const isSaving = save.isPending || publish.isPending;
+    const isDirty = dag.isDirty || externalDirty;
+    const [hasSavedUnpublishedDraft, setHasSavedUnpublishedDraft] = useState(initiallyUnpublished);
+    const publishReady = isDirty || hasSavedUnpublishedDraft;
+    const issues = useMemo(() => adapter.validate(dag.nodes, dag.edges), [adapter, dag.nodes, dag.edges]);
+    const invalidNodeIds = useMemo(() => new Set(issues.map((i) => i.nodeId)), [issues]);
+    const publishBlocked = isBlocked(issues);
+    const issuesKey = useMemo(() => issues.map((i) => `${i.nodeId}:${i.severity ?? 'error'}:${i.message}`).join('|'), [issues]);
+    const [issuesOpenKey, setIssuesOpenKey] = useState(null);
+    const issuesPopoverOpen = issues.length > 0 && issuesOpenKey === issuesKey;
+    const jumpToNode = useCallback((nodeId) => {
+        dag.selectNode(nodeId);
+        dag.requestFocus(nodeId);
+    }, [dag]);
+    const surfaceIssues = useCallback(() => {
+        if (issues.length === 0)
+            return;
+        setIssuesOpenKey(issuesKey);
+        const first = issues[0];
+        if (first)
+            jumpToNode(first.nodeId);
+    }, [issues, issuesKey, jumpToNode]);
+    const setIssuesPopoverOpen = useCallback((open) => {
+        if (!open || issues.length === 0) {
+            setIssuesOpenKey(null);
+            return;
+        }
+        surfaceIssues();
+    }, [issues.length, surfaceIssues]);
+    const nodeLabelFor = useCallback((nodeId) => {
+        const node = dag.nodes.find((n) => n.id === nodeId);
+        if (node && adapter.nodeLabel)
+            return adapter.nodeLabel(node);
+        const data = node?.data;
+        const title = typeof data?.title === 'string' ? data.title.trim() : '';
+        return title || adapter.titleForKind(nodeId);
+    }, [adapter, dag.nodes]);
+    const [justSaved, setJustSaved] = useState(false);
+    const savedCueTimer = useRef(null);
+    const flashSaved = useCallback(() => {
+        setJustSaved(true);
+        if (savedCueTimer.current)
+            clearTimeout(savedCueTimer.current);
+        savedCueTimer.current = setTimeout(() => setJustSaved(false), 1800);
+    }, []);
+    useEffect(() => () => {
+        if (savedCueTimer.current)
+            clearTimeout(savedCueTimer.current);
+    }, []);
+    const wasNewRef = useRef(isNew);
+    useEffect(() => {
+        if (!isNew)
+            wasNewRef.current = false;
+    }, [isNew]);
+    const persist = useCallback(async (positionsOnly) => {
+        // Freeze node identity only on content saves — never on the positions
+        // autosave, which would freeze a freshly-dropped, still-untitled node to a
+        // generic key. Stamp through a quiet commit so it leaves no undo checkpoint.
+        const stamped = positionsOnly ? null : (adapter.stampIdentity?.(dag.nodes) ?? null);
+        const nodesForSave = stamped ?? dag.nodes;
+        if (stamped)
+            dag.commitNodesQuiet(() => stamped);
+        const input = adapter.buildSaveInput({
+            nodes: nodesForSave,
+            edges: dag.edges,
+            positionsOnly,
+        });
+        const result = await save.mutateAsync(input);
+        setHasSavedUnpublishedDraft(true);
+        return result;
+    }, [adapter, dag, save]);
+    const handleSave = useCallback(async () => {
+        try {
+            const result = await persist(false);
+            dag.markSaved();
+            flashSaved();
+            onSaved?.(result);
+            if (wasNewRef.current) {
+                wasNewRef.current = false;
+                onFirstSave?.(result);
+            }
+        }
+        catch (err) {
+            if (issues.length > 0)
+                surfaceIssues();
+            onError?.(err, 'save');
+        }
+    }, [persist, dag, flashSaved, onSaved, onFirstSave, issues.length, surfaceIssues, onError]);
+    const handlePublish = useCallback(async () => {
+        if (publishBlocked) {
+            surfaceIssues();
+            return;
+        }
+        try {
+            const result = await persist(false);
+            await publish.mutateAsync(adapter.buildPublishInput(result));
+            dag.markSaved();
+            setHasSavedUnpublishedDraft(false);
+            onSaved?.(result);
+            onPublished?.(result);
+            if (wasNewRef.current) {
+                wasNewRef.current = false;
+                onFirstSave?.(result);
+            }
+        }
+        catch (err) {
+            if (issues.length > 0)
+                surfaceIssues();
+            onError?.(err, 'publish');
+        }
+    }, [
+        publishBlocked,
+        surfaceIssues,
+        persist,
+        publish,
+        adapter,
+        dag,
+        onSaved,
+        onPublished,
+        onFirstSave,
+        issues.length,
+        onError,
+    ]);
+    const positionSig = useMemo(() => dag.nodes
+        .map((n) => `${n.id}:${Math.round(n.position.x)},${Math.round(n.position.y)}`)
+        .join('|'), [dag.nodes]);
+    const annotationSig = useMemo(() => (stickyNotes?.annotations ?? [])
+        .map((a) => `${a.id}:${Math.round(a.x)},${Math.round(a.y)}:${a.color ?? ''}:${a.text}`)
+        .join('|'), [stickyNotes]);
+    const debouncedSaveSig = useDebouncedValue(`${positionSig}\n${annotationSig}`, 600);
+    const lastSavedSigRef = useRef(null);
+    const persistRef = useRef(persist);
+    useEffect(() => {
+        persistRef.current = persist;
+    }, [persist]);
+    useEffect(() => {
+        if (lastSavedSigRef.current === null) {
+            lastSavedSigRef.current = debouncedSaveSig;
+            return;
+        }
+        if (isNew || !workspaceId)
+            return;
+        if (debouncedSaveSig === lastSavedSigRef.current)
+            return;
+        lastSavedSigRef.current = debouncedSaveSig;
+        void persistRef.current(true).catch(() => {
+            lastSavedSigRef.current = null;
+        });
+    }, [debouncedSaveSig, isNew, workspaceId]);
+    const [settingsOpen, setSettingsOpen] = useState(false);
+    const toolbarExtras = adapter.toolbarExtras?.(adapterCtx);
+    const canvasPresentation = useCanvasPresentation({ dag, groups, invalidNodeIds });
+    const { afterCanvas, alternateContent, rightPanel: contributedRightPanel, toolbarExtras: contributedToolbarExtras, renderInsertPicker: contributedInsertPicker, renderDropPicker: contributedDropPicker, ...canvasProps } = canvasPresentation;
+    const canvasToolbarExtras = contributedToolbarExtras ?? toolbarExtras;
+    return (_jsxs("div", { className: "flex min-h-0 flex-1 flex-col", "data-testid": testId, children: [_jsxs("div", { className: "border-border/50 flex shrink-0 items-center gap-3 border-b px-6 py-2.5", children: [renderHeaderStart?.(), _jsxs("div", { className: "ml-auto flex items-center gap-1.5", children: [_jsx(IssuesPopover, { issues: issues, nodeLabelFor: nodeLabelFor, onJump: jumpToNode, open: issuesPopoverOpen, onOpenChange: setIssuesPopoverOpen }), _jsxs(Button, { type: "button", size: "sm", variant: "ghost", onClick: () => setSettingsOpen(true), className: "gap-1.5", "data-testid": "flow-editor-settings", children: [_jsx(Settings2, { className: "size-3.5", strokeWidth: 1.8, "aria-hidden": true }), t('settings.open')] }), _jsx(SavePublishBar, { isDirty: isDirty, publishReady: publishReady, justSaved: justSaved, isSaving: isSaving, savePending: save.isPending, publishPending: publish.isPending, publishBlocked: publishBlocked, onSave: () => void handleSave(), onPublish: () => void handlePublish(), className: "flex items-center gap-1.5" })] })] }), _jsx("div", { className: "flex min-h-0 flex-1 flex-col xl:flex-row", children: alternateContent ? (alternateContent) : (_jsxs(_Fragment, { children: [_jsx(FlowDagCanvas, { dag: dag, NodeComponent: adapter.NodeComponent, EdgeComponent: adapter.EdgeComponent, titleForKind: adapter.titleForKind, invalidNodeIds: invalidNodeIds, stickyNotes: adapter.supportsStickyNotes ? stickyNotes : null, showStickyNotes: adapter.supportsStickyNotes ?? false, renderInsertPicker: contributedInsertPicker ?? renderInsertPicker, renderDropPicker: contributedDropPicker ?? renderDropPicker, presentation: {
+                                ...canvasProps,
+                                ...(canvasToolbarExtras ? { toolbarExtras: canvasToolbarExtras } : {}),
+                                ...(dropPickerWidth ? { dropPickerWidth } : {}),
+                                rightPanel: contributedRightPanel ?? (_jsx(FlowLibraryRail, { testId: "flow-editor-rail", selectedNode: dag.selectedNode, groups: groups, onAddKind: (kind) => dag.addNodeAtEnd(kind, adapter.titleForKind(kind)), onDeselect: dag.deselectAll, renderConfig: (node) => {
+                                        const Panel = adapter.NodeConfigPanel;
+                                        return (_jsx(Panel, { node: node, onChange: (patch) => dag.updateNodeData(node.id, patch), onClose: dag.deselectAll }, node.id));
+                                    }, ...(headingFont ? { headingFont } : {}) })),
+                            } }), afterCanvas] })) }), renderSettings ? (renderSettings({ open: settingsOpen, onOpenChange: setSettingsOpen })) : (_jsx(SettingsDialog, { open: settingsOpen, onOpenChange: setSettingsOpen, title: settingsTitle, Content: adapter.SettingsDialogContent }))] }));
+}

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

@@ -0,0 +1,11 @@
+import type { FlowEditorIssue } from './adapter.js';
+export declare function isBlocked(issues: readonly FlowEditorIssue[]): boolean;
+export interface IssuesPopoverProps {
+    issues: readonly FlowEditorIssue[];
+    nodeLabelFor: (nodeId: string) => string;
+    onJump: (nodeId: string) => void;
+    open?: boolean;
+    onOpenChange?: (open: boolean) => void;
+    className?: string;
+}
+export declare function IssuesPopover({ issues, nodeLabelFor, onJump, open, onOpenChange, className, }: IssuesPopoverProps): import("react").JSX.Element | null;

package/dist/flow/editor/issues-popover.js

@@ -0,0 +1,70 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { useEffect, useRef } from 'react';
+import { useTranslations } from 'use-intl';
+import { AlertTriangle, ChevronRight, Info } from 'lucide-react';
+import { Button } from '../../components/button.js';
+import { Popover, PopoverContent, PopoverTrigger } from '../../components/popover.js';
+import { cn } from '../../lib/cn.js';
+export function isBlocked(issues) {
+    return issues.some((issue) => issue.severity === 'error');
+}
+function severityRank(severity) {
+    return severity === 'error' ? 0 : severity === 'warning' ? 1 : 2;
+}
+function highestSeverity(issues) {
+    return issues.reduce((worst, issue) => {
+        const s = issue.severity ?? 'error';
+        return severityRank(s) < severityRank(worst) ? s : worst;
+    }, 'info');
+}
+function severityClass(severity) {
+    switch (severity ?? 'error') {
+        case 'error':
+            return 'text-destructive';
+        case 'warning':
+            return 'text-amber-600 dark:text-amber-400';
+        default:
+            return 'text-muted-foreground';
+    }
+}
+function SeverityIcon({ severity, label, className, }) {
+    const Icon = (severity ?? 'error') === 'info' ? Info : AlertTriangle;
+    return (_jsx(Icon, { role: "img", "aria-label": label, className: cn('size-3.5 shrink-0', severityClass(severity), className), strokeWidth: 1.8 }));
+}
+function IssuesList({ issues, nodeLabelFor, onJump, autoFocusFirst, className }) {
+    const t = useTranslations('flowEditor.issues');
+    const listRef = useRef(null);
+    useEffect(() => {
+        if (!autoFocusFirst)
+            return;
+        const first = listRef.current?.querySelector('[data-issue-row]');
+        first?.focus();
+    }, [autoFocusFirst]);
+    const onListKeyDown = (e) => {
+        if (e.key !== 'ArrowDown' && e.key !== 'ArrowUp')
+            return;
+        const rows = Array.from(listRef.current?.querySelectorAll('[data-issue-row]') ?? []);
+        const index = rows.indexOf(document.activeElement);
+        if (index === -1)
+            return;
+        e.preventDefault();
+        const next = e.key === 'ArrowDown' ? index + 1 : index - 1;
+        rows[(next + rows.length) % rows.length]?.focus();
+    };
+    return (
+    // Roving arrow-key focus across the already-focusable issue rows (each row is
+    // a real <button>); the list element only relays arrow keys to them.
+    // eslint-disable-next-line jsx-a11y/no-noninteractive-element-interactions
+    _jsx("ul", { ref: listRef, onKeyDown: onListKeyDown, className: cn('max-h-56 overflow-auto', className), children: issues.map((issue, i) => {
+            const severity = issue.severity ?? 'error';
+            return (_jsx("li", { children: _jsxs("button", { type: "button", "data-issue-row": true, "data-severity": severity, onClick: () => onJump(issue.nodeId), className: cn('group flex w-full items-center gap-2 rounded-md px-3 py-1.5 text-left text-[12px]', 'hover:bg-muted focus-visible:bg-muted focus-visible:ring-ring/40', 'outline-none focus-visible:ring-2'), children: [_jsx(SeverityIcon, { severity: severity, label: t(`severity.${severity}`) }), _jsx("span", { className: "text-foreground/90 shrink-0 font-medium", children: nodeLabelFor(issue.nodeId) }), _jsx("span", { className: "text-muted-foreground min-w-0 flex-1 truncate", children: issue.message }), _jsx(ChevronRight, { className: "text-muted-foreground/60 group-hover:text-foreground size-3.5 shrink-0", strokeWidth: 1.8, "aria-hidden": true })] }) }, `${issue.nodeId}:${i}`));
+        }) }));
+}
+export function IssuesPopover({ issues, nodeLabelFor, onJump, open, onOpenChange, className, }) {
+    const t = useTranslations('flowEditor.issues');
+    if (issues.length === 0)
+        return null;
+    const worst = highestSeverity(issues);
+    return (_jsxs(Popover, { open: open, onOpenChange: onOpenChange, children: [_jsx(PopoverTrigger, { asChild: true, children: _jsxs(Button, { type: "button", size: "sm", variant: "ghost", className: cn('gap-1.5', severityClass(worst), 'hover:bg-muted', className), "data-testid": "flow-editor-issues-toggle", children: [_jsx(SeverityIcon, { severity: worst, label: t(`severity.${worst}`) }), t('count', { count: issues.length })] }) }), _jsxs(PopoverContent, { align: "end", sideOffset: 8, className: "w-[360px] max-w-[calc(100vw-2rem)] gap-2 p-2", role: "alert", "aria-label": t('title'), "data-testid": "flow-editor-issues", children: [_jsxs("div", { className: "flex items-center gap-2 px-1 py-0.5", children: [_jsx(SeverityIcon, { severity: worst, label: t(`severity.${worst}`), "aria-hidden": true }), _jsx("span", { className: cn('text-[12px] font-medium', severityClass(worst)), children: t('title') })] }), _jsx(IssuesList, { issues: issues, nodeLabelFor: nodeLabelFor, onJump: onJump, className: "pr-1", autoFocusFirst: open !== false })] })] }));
+}

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

@@ -0,0 +1,19 @@
+import type { ReactNode } from 'react';
+import type { Node as RfNode } from 'reactflow';
+import { type NodeLibraryGroup } from '../canvas/node-library.js';
+export declare function FlowLibraryRail<TData>({ selectedNode, groups, onAddKind, onDeselect, renderConfig, headingFont, testId, draggable, libraryHeader, libraryFooter, libraryTestIdPrefix, searchPlaceholder, emptyText, resultsHeading, }: {
+    selectedNode: RfNode<TData> | null;
+    groups: NodeLibraryGroup[];
+    onAddKind: (kind: string) => void;
+    onDeselect: () => void;
+    renderConfig: (node: RfNode<TData>) => ReactNode;
+    headingFont?: string;
+    testId?: string;
+    draggable?: boolean;
+    libraryHeader?: ReactNode;
+    libraryFooter?: ReactNode;
+    libraryTestIdPrefix?: string;
+    searchPlaceholder?: string;
+    emptyText?: string;
+    resultsHeading?: string;
+}): import("react").JSX.Element;

package/dist/flow/editor/library-rail.js

@@ -0,0 +1,25 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs, Fragment as _Fragment } from "react/jsx-runtime";
+import { useTranslations } from 'use-intl';
+import { FLOW_NODE_DND_MIME } from '../canvas/canvas-frame.js';
+import { NodeSearchList } from '../canvas/node-library.js';
+import { cn } from '../../lib/cn.js';
+import { FlowSideRail } from './side-rail.js';
+export function FlowLibraryRail({ selectedNode, groups, onAddKind, onDeselect, renderConfig, headingFont, testId = 'flow-library-rail', draggable = true, libraryHeader, libraryFooter, libraryTestIdPrefix = 'flow-lib', searchPlaceholder, emptyText, resultsHeading, }) {
+    const t = useTranslations('flowEditor');
+    return (_jsx(FlowSideRail, { testId: testId, backHeader: selectedNode
+            ? {
+                onBack: onDeselect,
+                backLabel: t('rail.back'),
+                title: t('rail.editStep'),
+                ...(headingFont ? { headingFont } : {}),
+            }
+            : null, children: selectedNode ? (_jsx("div", { className: "min-h-0 flex-1 overflow-auto px-5 py-5", children: renderConfig(selectedNode) })) : (_jsxs(_Fragment, { children: [libraryHeader ?? (_jsxs("div", { className: "border-border/50 border-b px-4 pt-4 pb-3", children: [_jsx("h2", { className: cn('text-[14px]', headingFont ?? 'font-semibold'), children: t('rail.libraryTitle') }), _jsx("p", { className: "text-muted-foreground mt-1 text-[11px] leading-snug", children: t('rail.libraryHint') })] })), _jsx("div", { className: "min-h-0 flex-1 overflow-hidden", children: _jsx(NodeSearchList, { groups: groups, onPick: onAddKind, emptyText: emptyText ?? t('rail.noSteps'), searchPlaceholder: searchPlaceholder ?? t('rail.searchSteps'), resultsHeading: resultsHeading ?? t('rail.searchResults'), testIdPrefix: libraryTestIdPrefix, fill: true, draggable: draggable, ...(draggable
+                            ? {
+                                onItemDragStart: (kind, event) => {
+                                    event.dataTransfer.setData(FLOW_NODE_DND_MIME, kind);
+                                    event.dataTransfer.effectAllowed = 'copy';
+                                },
+                            }
+                            : {}) }) }), libraryFooter] })) }));
+}

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

@@ -0,0 +1,18 @@
+import type { FlowCanvasController } from '../canvas/canvas-frame.js';
+import type { DagEditor } from './use-dag-editor.js';
+import type { FlowStickyNotes } from './adapter.js';
+/**
+ * Extras the shell layers onto the controller beyond the plain `useDagEditor`
+ * pass-through: the optional sticky-notes slice (wired only when the domain
+ * supports it).
+ */
+export interface MakeControllerExtras {
+    readonly stickyNotes?: FlowStickyNotes | null;
+}
+/**
+ * Build the `FlowCanvasController` the shared canvas frame consumes from a
+ * `useDagEditor` instance. Pure field pass-through — every mutating operation
+ * the canvas triggers (connect, insert-on-edge, delete, duplicate, undo/redo,
+ * tidy) routes back into the hook — plus the optional annotation slice.
+ */
+export declare function makeFlowCanvasController<TData, TEdge>(dag: DagEditor<TData, TEdge>, extras?: MakeControllerExtras): FlowCanvasController<TData, TEdge>;

package/dist/flow/editor/make-controller.js

@@ -0,0 +1,44 @@
+/**
+ * Build the `FlowCanvasController` the shared canvas frame consumes from a
+ * `useDagEditor` instance. Pure field pass-through — every mutating operation
+ * the canvas triggers (connect, insert-on-edge, delete, duplicate, undo/redo,
+ * tidy) routes back into the hook — plus the optional annotation slice.
+ */
+export function makeFlowCanvasController(dag, extras) {
+    const sticky = extras?.stickyNotes;
+    return {
+        nodes: dag.nodes,
+        edges: dag.edges,
+        onNodesChange: dag.onNodesChange,
+        onEdgesChange: dag.onEdgesChange,
+        onConnect: dag.onConnect,
+        isValidConnection: dag.isValidConnection,
+        setNodes: dag.setNodes,
+        setEdges: dag.setEdges,
+        insertNodeOnEdge: (edgeId, kind, title) => {
+            dag.insertNodeOnEdge(edgeId, kind, title);
+        },
+        addConnectedNodeAt: (args) => {
+            dag.addConnectedNodeAt(args);
+        },
+        removeNode: dag.removeNode,
+        removeNodesAndEdges: dag.removeNodesAndEdges,
+        duplicateNode: dag.duplicateNode,
+        undo: dag.undo,
+        redo: dag.redo,
+        canUndo: dag.canUndo,
+        canRedo: dag.canRedo,
+        tidy: dag.tidy,
+        deselectAll: dag.deselectAll,
+        focusRequest: dag.focusRequest,
+        ...(sticky
+            ? {
+                annotations: sticky.annotations,
+                addAnnotation: sticky.addAnnotation,
+                updateAnnotation: sticky.updateAnnotation,
+                commitAnnotation: sticky.commitAnnotation,
+                removeAnnotation: sticky.removeAnnotation,
+            }
+            : {}),
+    };
+}

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

@@ -0,0 +1,2 @@
+export type ChipKey = 'strong' | 'neutral' | 'blue' | 'violet' | 'emerald' | 'amber' | 'indigo' | 'rose' | 'cyan' | 'teal' | 'primary';
+export declare function chipClassForKey(key: ChipKey): string;

package/dist/flow/editor/node-chip.js

@@ -0,0 +1,16 @@
+const CHIP_PALETTE = {
+    strong: 'bg-foreground text-background',
+    neutral: 'bg-muted text-muted-foreground',
+    primary: 'bg-primary/12 text-primary',
+    blue: 'bg-blue-500/12 text-blue-700 dark:text-blue-300',
+    violet: 'bg-violet-500/12 text-violet-700 dark:text-violet-300',
+    emerald: 'bg-emerald-500/12 text-emerald-700 dark:text-emerald-300',
+    amber: 'bg-amber-500/12 text-amber-700 dark:text-amber-300',
+    indigo: 'bg-indigo-500/12 text-indigo-700 dark:text-indigo-300',
+    rose: 'bg-rose-500/12 text-rose-700 dark:text-rose-300',
+    cyan: 'bg-cyan-500/12 text-cyan-700 dark:text-cyan-300',
+    teal: 'bg-teal-500/12 text-teal-700 dark:text-teal-300',
+};
+export function chipClassForKey(key) {
+    return CHIP_PALETTE[key];
+}

package/dist/flow/editor/save-publish-bar.d.ts

@@ -0,0 +1,27 @@
+export interface SavePublishBarProps {
+    readonly isDirty: boolean;
+    readonly justSaved: boolean;
+    readonly isSaving: boolean;
+    readonly publishBlocked: boolean;
+    readonly canSaveEmpty?: boolean;
+    /**
+     * Whether there is anything to publish — unsaved canvas edits OR a
+     * saved-but-unpublished draft. Save clears `isDirty` but not this, so Publish
+     * stays available after a plain Save. Defaults to `isDirty` (edit-then-publish)
+     * when a caller doesn't track draft-vs-published separately.
+     */
+    readonly publishReady?: boolean;
+    /**
+     * Per-action in-flight flags for the spinner. The button label never changes
+     * (that shifts width and flickers on every autosave); instead the leading icon
+     * becomes a spinner. Both default to `isSaving` so callers that don't
+     * distinguish still get a spinner on the acting button.
+     */
+    readonly savePending?: boolean;
+    readonly publishPending?: boolean;
+    readonly onSave: () => void;
+    readonly onPublish: () => void;
+    readonly publishTitle?: string;
+    readonly className?: string;
+}
+export declare function SavePublishBar({ isDirty, justSaved, isSaving, publishBlocked, canSaveEmpty, publishReady, savePending, publishPending, onSave, onPublish, publishTitle, className, }: SavePublishBarProps): import("react").JSX.Element;

package/dist/flow/editor/save-publish-bar.js

@@ -0,0 +1,14 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { Check, Loader2, UploadCloud } from 'lucide-react';
+import { useTranslations } from 'use-intl';
+import { Button } from '../../components/button.js';
+export function SavePublishBar({ isDirty, justSaved, isSaving, publishBlocked, canSaveEmpty = false, publishReady, savePending, publishPending, onSave, onPublish, publishTitle, className, }) {
+    const t = useTranslations('flowEditor.actions');
+    const canSave = (isDirty || canSaveEmpty) && !isSaving;
+    const hasUnpublished = publishReady ?? isDirty;
+    const canPublish = hasUnpublished && !publishBlocked && !isSaving;
+    const saving = savePending ?? isSaving;
+    const publishing = publishPending ?? isSaving;
+    return (_jsxs("div", { className: className, children: [_jsxs(Button, { type: "button", size: "sm", variant: "outline", disabled: !canSave, "aria-busy": saving, onClick: onSave, className: "gap-1.5", "data-testid": "flow-editor-save", children: [saving ? (_jsx(Loader2, { className: "size-3.5 shrink-0 animate-spin", strokeWidth: 1.8, "aria-hidden": true })) : justSaved ? (_jsx(Check, { className: "size-3.5 shrink-0", strokeWidth: 2, "aria-hidden": true })) : isDirty ? (_jsx("span", { "aria-hidden": true, className: "bg-foreground/50 size-1.5 shrink-0 rounded-full" })) : null, t('save')] }), _jsxs(Button, { type: "button", size: "sm", disabled: !canPublish, "aria-busy": publishing, onClick: onPublish, title: publishTitle, className: "gap-1.5", "data-testid": "flow-editor-publish", children: [publishing ? (_jsx(Loader2, { className: "size-3.5 shrink-0 animate-spin", strokeWidth: 1.8, "aria-hidden": true })) : (_jsx(UploadCloud, { className: "size-3.5 shrink-0", strokeWidth: 1.8, "aria-hidden": true })), t('publish')] })] }));
+}

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

@@ -0,0 +1,11 @@
+import type { ComponentType, ReactNode } from 'react';
+import type { SettingsDialogContentProps } from './adapter.js';
+export interface SettingsDialogProps {
+    open: boolean;
+    onOpenChange: (open: boolean) => void;
+    title: string;
+    Content?: ComponentType<SettingsDialogContentProps>;
+    children?: ReactNode;
+    testId?: string;
+}
+export declare function SettingsDialog({ open, onOpenChange, title, Content, children, testId, }: SettingsDialogProps): import("react").JSX.Element;

package/dist/flow/editor/settings-dialog.js

@@ -0,0 +1,11 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { X } from 'lucide-react';
+import { useTranslations } from 'use-intl';
+import { cn } from '../../lib/cn.js';
+import { Dialog, DialogClose, DialogContent, DialogTitle } from '../../components/dialog.js';
+export function SettingsDialog({ open, onOpenChange, title, Content, children, testId = 'flow-editor-settings-dialog', }) {
+    const t = useTranslations('flowEditor');
+    const close = () => onOpenChange(false);
+    return (_jsx(Dialog, { open: open, onOpenChange: onOpenChange, children: open ? (_jsxs(DialogContent, { "data-testid": testId, showCloseButton: false, className: cn('gap-0 overflow-hidden p-0', 'h-[min(680px,90vh)] sm:max-w-[min(880px,92vw)]'), children: [_jsx(DialogTitle, { className: "sr-only", children: title }), _jsx(DialogClose, { "aria-label": t('settings.close'), className: "hover:bg-muted focus-visible:ring-ring/50 text-muted-foreground hover:text-foreground absolute top-3 right-3 z-10 inline-flex size-7 items-center justify-center rounded-md transition-colors outline-none focus-visible:ring-1", children: _jsx(X, { className: "size-4", strokeWidth: 1.5, "aria-hidden": true }) }), _jsx("div", { className: "bg-background flex min-h-0 flex-col overflow-y-auto", children: Content ? _jsx(Content, { onClose: close }) : children })] })) : null }));
+}

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

@@ -0,0 +1,21 @@
+import { type ReactNode } from 'react';
+import { Info } from 'lucide-react';
+export declare function SettingsDialogShell({ title, nav, children, }: {
+    title: string;
+    nav: ReactNode;
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function NavItem({ icon: Icon, label, active, onClick, }: {
+    icon: typeof Info;
+    label: string;
+    active: boolean;
+    onClick: () => void;
+}): import("react").JSX.Element;
+export declare function SettingsNotice({ children }: {
+    children: ReactNode;
+}): import("react").JSX.Element;
+export declare function SettingsSection({ title, description, children, }: {
+    title: string;
+    description: string;
+    children: ReactNode;
+}): import("react").JSX.Element;

package/dist/flow/editor/settings-shell.js

@@ -0,0 +1,20 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import {} from 'react';
+import { Info } from 'lucide-react';
+import { DialogContent, DialogTitle } from '../../components/dialog.js';
+import { cn } from '../../lib/cn.js';
+export function SettingsDialogShell({ title, nav, children, }) {
+    return (_jsxs(DialogContent, { showCloseButton: true, className: cn('gap-0 overflow-hidden p-0', 'h-[min(680px,90vh)] sm:max-w-[min(880px,92vw)]', 'grid grid-cols-[220px_1fr] grid-rows-1'), children: [_jsx(DialogTitle, { className: "sr-only", children: title }), _jsxs("aside", { className: "border-border bg-sidebar flex min-h-0 flex-col border-r", children: [_jsx("div", { className: "text-muted-foreground/70 px-4 pt-4 pb-1 font-mono text-[10.5px] tracking-tight", children: title }), _jsx("ul", { className: "flex flex-1 flex-col gap-px overflow-y-auto px-2 py-1", children: nav })] }), _jsx("div", { className: "bg-background min-w-0 overflow-y-auto", children: _jsx("div", { className: "mx-auto max-w-2xl px-8 py-7", children: children }) })] }));
+}
+export function NavItem({ icon: Icon, label, active, onClick, }) {
+    return (_jsx("li", { children: _jsxs("button", { type: "button", onClick: onClick, "data-active": active || undefined, className: cn('flex h-7 w-full cursor-pointer items-center gap-2 rounded-md px-2 text-[12.5px] transition-colors', active
+                ? 'bg-sidebar-accent text-sidebar-accent-foreground'
+                : 'text-sidebar-foreground/85 hover:bg-sidebar-accent/60 hover:text-sidebar-foreground'), children: [_jsx("span", { className: cn('shrink-0', active ? 'text-primary' : 'text-muted-foreground'), children: _jsx(Icon, { className: "size-3.5", strokeWidth: 1.8, "aria-hidden": true }) }), _jsx("span", { className: "truncate", children: label })] }) }));
+}
+export function SettingsNotice({ children }) {
+    return (_jsxs("div", { role: "status", className: "border-border/60 text-muted-foreground mb-4 flex items-start gap-2.5 border-b pb-4 text-[12.5px] leading-relaxed", children: [_jsx(Info, { className: "text-foreground/70 mt-0.5 size-4 shrink-0", strokeWidth: 1.8, "aria-hidden": true }), _jsx("span", { children: children })] }));
+}
+export function SettingsSection({ title, description, children, }) {
+    return (_jsxs("section", { className: "flex flex-col gap-4", children: [_jsxs("header", { children: [_jsx("h2", { className: "text-foreground text-[18px] font-semibold tracking-tight", children: title }), _jsx("p", { className: "text-muted-foreground mt-1 text-[12.5px] leading-relaxed", children: description })] }), children] }));
+}

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

@@ -0,0 +1,22 @@
+import type { ReactNode } from 'react';
+export interface FlowSideRailBackHeader {
+    onBack: () => void;
+    /** Accessible label for the back button. */
+    backLabel: string;
+    /** Header title shown next to the back button. */
+    title: ReactNode;
+    headingFont?: string;
+}
+/**
+ * The responsive detail rail shell shared by the flow editors and the run
+ * viewer: a bottom strip below `xl`, a 360px right sidebar at `xl`. Optionally
+ * renders a back-button header (owned by the rail); the body is whatever the
+ * caller composes as children. Domain content (node library / config /
+ * run overview / step detail) lives in the caller — this owns only the chrome.
+ */
+export declare function FlowSideRail({ backHeader, children, testId, className, }: {
+    backHeader?: FlowSideRailBackHeader | null;
+    children: ReactNode;
+    testId?: string;
+    className?: string;
+}): import("react").JSX.Element;

package/dist/flow/editor/side-rail.js

@@ -0,0 +1,15 @@
+'use client';
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+import { ArrowLeft } from 'lucide-react';
+import { Button } from '../../components/button.js';
+import { cn } from '../../lib/cn.js';
+/**
+ * The responsive detail rail shell shared by the flow editors and the run
+ * viewer: a bottom strip below `xl`, a 360px right sidebar at `xl`. Optionally
+ * renders a back-button header (owned by the rail); the body is whatever the
+ * caller composes as children. Domain content (node library / config /
+ * run overview / step detail) lives in the caller — this owns only the chrome.
+ */
+export function FlowSideRail({ backHeader, children, testId = 'flow-side-rail', className, }) {
+    return (_jsxs("aside", { "data-testid": testId, className: cn('border-border/60 bg-muted/15 flex min-h-0 w-full flex-1 flex-col border-t', 'xl:w-[360px] xl:flex-none xl:self-stretch xl:border-t-0 xl:border-l', className), children: [backHeader ? (_jsxs("div", { className: "border-border/50 flex shrink-0 items-center gap-1.5 border-b px-3 py-2.5", children: [_jsx(Button, { type: "button", variant: "ghost", size: "icon-sm", onClick: backHeader.onBack, "aria-label": backHeader.backLabel, className: "text-muted-foreground hover:text-foreground -ml-1", children: _jsx(ArrowLeft, { className: "size-4", strokeWidth: 1.8 }) }), _jsx("span", { className: cn('text-[13px] font-medium', backHeader.headingFont), children: backHeader.title })] })) : null, children] }));
+}