@coral-viz/viz 0.2.3

package/dist/components/SymbolNode.d.ts

@@ -0,0 +1,53 @@
+/**
+ * SymbolNode - React Flow node component that renders symbols
+ *
+ * This component looks up the symbol and shape from registries
+ * and renders them with proper styling and handles.
+ *
+ * Supports inline label editing via double-click.
+ */
+import type { HandleDragState, CoralNodeData } from '../types.js';
+export interface SymbolNodeData extends CoralNodeData {
+    /** Symbol ID (e.g., 'flowchart-process', 'arch-service') */
+    symbolId?: string;
+    /** Variant ID (e.g., 'start', 'end') */
+    variant?: string;
+    /** Override fill color */
+    fill?: string;
+    /** Override stroke color */
+    stroke?: string;
+    /** Override stroke width */
+    strokeWidth?: number;
+    /** Node width */
+    width?: number;
+    /** Node height */
+    height?: number;
+    /** Enable hand-drawn sketch rendering */
+    sketch?: boolean;
+    /**
+     * Live state of a connection gesture relative to this node, so its handles
+     * can show whether dropping here would be accepted (R-016).
+     */
+    dragState?: HandleDragState;
+    /** Live compatibility keyed by the concrete React Flow handle id. */
+    dragStates?: Record<string, HandleDragState>;
+}
+/**
+ * Props passed to SymbolNode by React Flow
+ */
+interface SymbolNodeProps {
+    id: string;
+    data: SymbolNodeData;
+    selected?: boolean;
+}
+/**
+ * SymbolNode component - renders any symbol from the registry
+ *
+ * Supports inline label editing via double-click:
+ * - Double-click to edit the label
+ * - Press Enter or blur to save
+ * - Press Escape to cancel
+ */
+export declare const SymbolNode: import("react").MemoExoticComponent<({ id, data, selected }: SymbolNodeProps) => import("react").JSX.Element>;
+export default SymbolNode;
+//# sourceMappingURL=SymbolNode.d.ts.map

package/dist/components/SymbolNode.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SymbolNode.d.ts","sourceRoot":"","sources":["../../src/components/SymbolNode.tsx"],"names":[],"mappings":"AAAA;;;;;;;GAOG;AAQH,OAAO,KAAK,EACV,eAAe,EAAgC,aAAa,EAAE,MAAM,aAAa,CAAC;AAkBpF,MAAM,WAAW,cAAe,SAAQ,aAAa;IACnD,4DAA4D;IAC5D,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,wCAAwC;IACxC,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,0BAA0B;IAC1B,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,4BAA4B;IAC5B,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,4BAA4B;IAC5B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iBAAiB;IACjB,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,kBAAkB;IAClB,MAAM,CAAC,EAAE,MAAM,CAAC;IAChB,yCAAyC;IACzC,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB;;;OAGG;IACH,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,qEAAqE;IACrE,UAAU,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,eAAe,CAAC,CAAC;CAC9C;AAED;;GAEG;AACH,UAAU,eAAe;IACvB,EAAE,EAAE,MAAM,CAAC;IACX,IAAI,EAAE,cAAc,CAAC;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACpB;AAuHD;;;;;;;GAOG;AACH,eAAO,MAAM,UAAU,+DAAoD,eAAe,iCAqTxF,CAAC;AAEH,eAAe,UAAU,CAAC"}

package/dist/components/SymbolNode.js

@@ -0,0 +1,333 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * SymbolNode - React Flow node component that renders symbols
+ *
+ * This component looks up the symbol and shape from registries
+ * and renders them with proper styling and handles.
+ *
+ * Supports inline label editing via double-click.
+ */
+import { memo, useMemo, useState, useCallback, useRef, useEffect } from 'react';
+import { Handle, Position } from '@xyflow/react';
+import { ShapeRenderer } from './ShapeRenderer.js';
+import { symbolRegistry } from '@coral-viz/render';
+import { shapeRegistry } from '@coral-viz/render';
+import { useEditContext } from './EditContext.js';
+/**
+ * Extended node data for symbol-aware rendering
+ */
+/** Visually hidden, but announced. */
+const SR_ONLY = {
+    position: 'absolute',
+    width: 1,
+    height: 1,
+    padding: 0,
+    margin: -1,
+    overflow: 'hidden',
+    clip: 'rect(0 0 0 0)',
+    whiteSpace: 'nowrap',
+    border: 0,
+};
+/**
+ * Map anchor direction to React Flow Position
+ */
+function anchorToPosition(anchor) {
+    switch (anchor) {
+        case 'NORTH':
+            return Position.Top;
+        case 'SOUTH':
+            return Position.Bottom;
+        case 'EAST':
+            return Position.Right;
+        case 'WEST':
+            return Position.Left;
+        default:
+            return Position.Top;
+    }
+}
+/**
+ * Get port position offset based on port count and index
+ */
+function getPortOffset(port, portIndex, totalPortsOnSide) {
+    if (port.position !== undefined) {
+        return `${port.position * 100}%`;
+    }
+    // Distribute ports evenly
+    const offset = ((portIndex + 1) / (totalPortsOnSide + 1)) * 100;
+    return `${offset}%`;
+}
+/**
+ * Get styling from symbol/variant defaults
+ */
+function getSymbolStyle(symbol, variant) {
+    const defaultStyle = {
+        fill: '#ffffff',
+        stroke: '#666666',
+        strokeWidth: 2,
+    };
+    if (!symbol) {
+        return defaultStyle;
+    }
+    // Start with symbol defaults
+    const symbolDefaults = symbol.defaults || {};
+    let style = {
+        fill: symbolDefaults.fill || defaultStyle.fill,
+        stroke: symbolDefaults.stroke || defaultStyle.stroke,
+        strokeWidth: symbolDefaults.strokeWidth || defaultStyle.strokeWidth,
+        strokeDasharray: symbolDefaults.strokeDasharray,
+    };
+    // Apply variant overrides
+    if (variant && symbol.variants?.[variant]) {
+        const variantDefaults = symbol.variants[variant].defaults || {};
+        style = {
+            ...style,
+            fill: variantDefaults.fill || style.fill,
+            stroke: variantDefaults.stroke || style.stroke,
+            strokeWidth: variantDefaults.strokeWidth || style.strokeWidth,
+            strokeDasharray: variantDefaults.strokeDasharray || style.strokeDasharray,
+        };
+    }
+    return style;
+}
+/**
+ * Get ports to render from symbol definition
+ */
+function getSymbolPorts(symbol, variant) {
+    if (!symbol) {
+        // Default ports
+        return [
+            { id: 'in', anchor: 'NORTH', direction: 'in' },
+            { id: 'out', anchor: 'SOUTH', direction: 'out' },
+        ];
+    }
+    // Check for variant-specific ports first
+    if (variant && symbol.variants?.[variant]?.ports) {
+        return symbol.variants[variant].ports;
+    }
+    // Fall back to symbol ports
+    if (symbol.ports && symbol.ports.length > 0) {
+        return symbol.ports;
+    }
+    // Default ports
+    return [
+        { id: 'in', anchor: 'NORTH', direction: 'in' },
+        { id: 'out', anchor: 'SOUTH', direction: 'out' },
+    ];
+}
+/**
+ * Fallback mapping from old node types to symbols
+ */
+const legacyTypeMapping = {
+    service: 'arch-service',
+    database: 'arch-database',
+    module: 'flowchart-process',
+    external_api: 'arch-external-api',
+    actor: 'arch-actor',
+    group: 'arch-container',
+    process: 'flowchart-process',
+    decision: 'flowchart-decision',
+    terminal: 'flowchart-terminal',
+    io: 'flowchart-io',
+    document: 'flowchart-document',
+};
+/**
+ * SymbolNode component - renders any symbol from the registry
+ *
+ * Supports inline label editing via double-click:
+ * - Double-click to edit the label
+ * - Press Enter or blur to save
+ * - Press Escape to cancel
+ */
+export const SymbolNode = memo(function SymbolNode({ id, data, selected }) {
+    // Edit context for label editing
+    const { onLabelEdit, editingNodeId, startEditing, stopEditing } = useEditContext();
+    const isEditing = editingNodeId === id;
+    // Local state for edit value
+    const [editValue, setEditValue] = useState(data.label);
+    const inputRef = useRef(null);
+    // Resolve symbol ID (support legacy types)
+    const symbolId = data.symbolId || legacyTypeMapping[data.nodeType] || 'flowchart-process';
+    // Look up symbol and shape
+    const symbol = symbolRegistry.get(symbolId);
+    const shape = symbol ? shapeRegistry.get(symbol.shape) : shapeRegistry.get('rectangle');
+    // Get styling
+    const baseStyle = getSymbolStyle(symbol, data.variant);
+    const style = {
+        fill: data.fill || baseStyle.fill,
+        stroke: data.stroke || baseStyle.stroke,
+        strokeWidth: data.strokeWidth || baseStyle.strokeWidth,
+        strokeDasharray: baseStyle.strokeDasharray,
+    };
+    // Get dimensions
+    const width = data.width || shape?.defaultSize?.width || 120;
+    const height = data.height || shape?.defaultSize?.height || 60;
+    // Get ports
+    const ports = getSymbolPorts(symbol, data.variant);
+    // Group ports by side for positioning
+    const portsBySide = useMemo(() => {
+        const grouped = {};
+        ports.forEach((port) => {
+            const side = port.anchor;
+            if (!grouped[side])
+                grouped[side] = [];
+            grouped[side].push(port);
+        });
+        return grouped;
+    }, [ports]);
+    // Focus input when editing starts
+    useEffect(() => {
+        if (isEditing && inputRef.current) {
+            inputRef.current.focus();
+            inputRef.current.select();
+        }
+    }, [isEditing]);
+    // Sync edit value when data.label changes (external updates)
+    useEffect(() => {
+        if (!isEditing) {
+            setEditValue(data.label);
+        }
+    }, [data.label, isEditing]);
+    // Handle double-click to start editing
+    const handleDoubleClick = useCallback((e) => {
+        e.stopPropagation(); // Prevent React Flow from handling
+        setEditValue(data.label);
+        startEditing(id);
+    }, [id, data.label, startEditing]);
+    // Handle save (Enter or blur)
+    const handleSave = useCallback(() => {
+        if (editValue.trim() !== data.label && onLabelEdit) {
+            onLabelEdit(id, editValue.trim());
+        }
+        stopEditing();
+    }, [id, editValue, data.label, onLabelEdit, stopEditing]);
+    // Handle cancel (Escape)
+    const handleCancel = useCallback(() => {
+        setEditValue(data.label);
+        stopEditing();
+    }, [data.label, stopEditing]);
+    // Handle key down events
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === 'Enter') {
+            e.preventDefault();
+            handleSave();
+        }
+        else if (e.key === 'Escape') {
+            e.preventDefault();
+            handleCancel();
+        }
+    }, [handleSave, handleCancel]);
+    // Accessible name and state (R-014). Nodes carried no ARIA at all, so a
+    // screen reader announced an unlabelled group of divs.
+    const kindName = symbol?.name ?? data.symbolId ?? data.nodeType ?? 'node';
+    const accessibleName = `${data.label ?? id}, ${kindName}`;
+    const dragDescription = data.dragState === 'compatible'
+        ? 'can connect here'
+        : data.dragState === 'warning'
+            ? 'can connect here with a warning'
+            : data.dragState === 'incompatible'
+                ? 'cannot connect here'
+                : undefined;
+    return (_jsxs("div", { role: "group", "aria-label": accessibleName, "aria-selected": selected, "aria-describedby": dragDescription ? `${id}-drag-state` : undefined, tabIndex: 0, style: {
+            position: 'relative',
+            width,
+            height,
+            cursor: isEditing ? 'text' : 'grab',
+        }, onDoubleClick: handleDoubleClick, children: [dragDescription && (_jsx("span", { id: `${id}-drag-state`, style: SR_ONLY, children: dragDescription })), shape && (_jsx("div", { style: {
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    width: '100%',
+                    height: '100%',
+                }, children: _jsx(ShapeRenderer, { shape: shape, width: width, height: height, fill: style.fill, stroke: selected ? '#0066ff' : style.stroke, strokeWidth: selected ? style.strokeWidth + 1 : style.strokeWidth, strokeDasharray: style.strokeDasharray, parameters: symbol?.defaults, sketch: data.sketch }) })), _jsx("div", { style: {
+                    position: 'absolute',
+                    top: 0,
+                    left: 0,
+                    width: '100%',
+                    height: '100%',
+                    display: 'flex',
+                    alignItems: 'center',
+                    justifyContent: 'center',
+                    padding: '8px',
+                    boxSizing: 'border-box',
+                }, children: isEditing ? (_jsx("input", { ref: inputRef, type: "text", value: editValue, onChange: (e) => setEditValue(e.target.value), onBlur: handleSave, onKeyDown: handleKeyDown, style: {
+                        fontSize: '12px',
+                        fontWeight: 500,
+                        textAlign: 'center',
+                        width: '100%',
+                        maxWidth: '100%',
+                        padding: '2px 4px',
+                        border: '1px solid #0066ff',
+                        borderRadius: '2px',
+                        outline: 'none',
+                        background: 'white',
+                    } })) : (_jsx("div", { style: {
+                        fontSize: data.sketch ? '14px' : '12px',
+                        fontWeight: 500,
+                        fontFamily: data.sketch ? "'Caveat', 'Comic Sans MS', cursive" : undefined,
+                        textAlign: 'center',
+                        wordWrap: 'break-word',
+                        maxWidth: '100%',
+                        overflow: 'hidden',
+                        textOverflow: 'ellipsis',
+                    }, children: data.label })) }), ports.map((port, idx) => {
+                const portsOnSide = portsBySide[port.anchor] || [];
+                const indexOnSide = portsOnSide.indexOf(port);
+                const offset = getPortOffset(port, indexOnSide, portsOnSide.length);
+                const position = anchorToPosition(port.anchor);
+                const isVertical = position === Position.Top || position === Position.Bottom;
+                const handleStyle = {
+                    position: 'absolute',
+                    ...(isVertical
+                        ? { left: offset, transform: 'translateX(-50%)' }
+                        : { top: offset, transform: 'translateY(-50%)' }),
+                };
+                // While a connection is being dragged, handles say whether dropping
+                // here would be accepted. Idle handles keep the neutral colour.
+                const targetHandleId = port.direction === 'inout' ? `${port.id}-in` : port.id;
+                const sourceHandleId = port.direction === 'inout' ? `${port.id}-out` : port.id;
+                const stateFor = (handleId) => data.dragStates?.[handleId] ?? data.dragState ?? 'idle';
+                const dragState = stateFor(port.direction === 'out' ? sourceHandleId : targetHandleId);
+                const handleFill = dragState === 'compatible'
+                    ? '#22c55e'
+                    : dragState === 'warning'
+                        ? '#f59e0b'
+                        : dragState === 'incompatible'
+                            ? '#ef4444'
+                            : '#555';
+                const handleSize = dragState === 'idle' ? 8 : 12;
+                const handleVisual = {
+                    background: handleFill,
+                    width: handleSize,
+                    height: handleSize,
+                    ...(dragState === 'incompatible' ? { cursor: 'not-allowed' } : {}),
+                };
+                // Handle type based on direction
+                const handleType = port.direction === 'in'
+                    ? 'target'
+                    : port.direction === 'out'
+                        ? 'source'
+                        : undefined; // inout gets both
+                if (port.direction === 'inout') {
+                    // Render both source and target for bidirectional ports
+                    return (_jsxs("div", { children: [_jsx(Handle, { type: "target", position: position, id: `${port.id}-in`, "aria-label": `${port.label ?? port.id}: ${stateFor(targetHandleId)}`, style: {
+                                    ...handleStyle,
+                                    ...handleVisual,
+                                    background: stateFor(targetHandleId) === 'compatible' ? '#22c55e'
+                                        : stateFor(targetHandleId) === 'warning' ? '#f59e0b'
+                                            : stateFor(targetHandleId) === 'incompatible' ? '#ef4444' : '#555',
+                                } }), _jsx(Handle, { type: "source", position: position, id: `${port.id}-out`, "aria-label": `${port.label ?? port.id}: ${stateFor(sourceHandleId)}`, style: {
+                                    ...handleStyle,
+                                    ...handleVisual,
+                                    background: stateFor(sourceHandleId) === 'compatible' ? '#22c55e'
+                                        : stateFor(sourceHandleId) === 'warning' ? '#f59e0b'
+                                            : stateFor(sourceHandleId) === 'incompatible' ? '#ef4444' : '#555',
+                                } })] }, port.id));
+                }
+                return (_jsx(Handle, { type: handleType, position: position, id: port.id, "aria-label": `${port.label ?? port.id}: ${dragState}`, style: {
+                        ...handleStyle,
+                        ...handleVisual,
+                    } }, port.id));
+            })] }));
+});
+export default SymbolNode;
+//# sourceMappingURL=SymbolNode.js.map

package/dist/components/SymbolNode.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"SymbolNode.js","sourceRoot":"","sources":["../../src/components/SymbolNode.tsx"],"names":[],"mappings":"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"}

package/dist/components/index.d.ts

@@ -0,0 +1,8 @@
+/**
+ * Coral Node Components
+ */
+export { ServiceNode, DatabaseNode, ExternalApiNode, ActorNode, ModuleNode, GroupNode, nodeTypes, } from './nodes.js';
+export { ShapeRenderer, type ShapeRendererProps } from './ShapeRenderer.js';
+export { SymbolNode, type SymbolNodeData } from './SymbolNode.js';
+export { EditProvider, useEditContext, useIsEditing, type EditProviderProps, type OnLabelEditCallback, } from './EditContext.js';
+//# sourceMappingURL=index.d.ts.map

package/dist/components/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EACL,WAAW,EACX,YAAY,EACZ,eAAe,EACf,SAAS,EACT,UAAU,EACV,SAAS,EACT,SAAS,GACV,MAAM,YAAY,CAAC;AAGpB,OAAO,EAAE,aAAa,EAAE,KAAK,kBAAkB,EAAE,MAAM,oBAAoB,CAAC;AAC5E,OAAO,EAAE,UAAU,EAAE,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGlE,OAAO,EACL,YAAY,EACZ,cAAc,EACd,YAAY,EACZ,KAAK,iBAAiB,EACtB,KAAK,mBAAmB,GACzB,MAAM,kBAAkB,CAAC"}

package/dist/components/index.js

@@ -0,0 +1,10 @@
+/**
+ * Coral Node Components
+ */
+export { ServiceNode, DatabaseNode, ExternalApiNode, ActorNode, ModuleNode, GroupNode, nodeTypes, } from './nodes.js';
+// New symbol-aware components
+export { ShapeRenderer } from './ShapeRenderer.js';
+export { SymbolNode } from './SymbolNode.js';
+// Edit context for inline label editing
+export { EditProvider, useEditContext, useIsEditing, } from './EditContext.js';
+//# sourceMappingURL=index.js.map

package/dist/components/index.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.js","sourceRoot":"","sources":["../../src/components/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EACL,WAAW,EACX,YAAY,EACZ,eAAe,EACf,SAAS,EACT,UAAU,EACV,SAAS,EACT,SAAS,GACV,MAAM,YAAY,CAAC;AAEpB,8BAA8B;AAC9B,OAAO,EAAE,aAAa,EAA2B,MAAM,oBAAoB,CAAC;AAC5E,OAAO,EAAE,UAAU,EAAuB,MAAM,iBAAiB,CAAC;AAElE,wCAAwC;AACxC,OAAO,EACL,YAAY,EACZ,cAAc,EACd,YAAY,GAGb,MAAM,kBAAkB,CAAC"}

package/dist/components/nodes.d.ts

@@ -0,0 +1,43 @@
+/**
+ * Custom Node Components for Coral Editor
+ *
+ * Each node type gets a distinct visual style.
+ */
+import React from 'react';
+import type { CoralNodeProps } from '../types.js';
+/**
+ * Service Node - rectangular with rounded corners
+ */
+export declare const ServiceNode: React.MemoExoticComponent<({ data, selected }: CoralNodeProps) => React.JSX.Element>;
+/**
+ * Database Node - cylinder-like appearance
+ */
+export declare const DatabaseNode: React.MemoExoticComponent<({ data, selected }: CoralNodeProps) => React.JSX.Element>;
+/**
+ * External API Node - cloud-like appearance
+ */
+export declare const ExternalApiNode: React.MemoExoticComponent<({ data, selected }: CoralNodeProps) => React.JSX.Element>;
+/**
+ * Actor Node - stick figure / person shape
+ */
+export declare const ActorNode: React.MemoExoticComponent<({ data, selected }: CoralNodeProps) => React.JSX.Element>;
+/**
+ * Module Node - smaller, component-like
+ */
+export declare const ModuleNode: React.MemoExoticComponent<({ data, selected }: CoralNodeProps) => React.JSX.Element>;
+/**
+ * Group Node - container for other nodes
+ */
+export declare const GroupNode: React.MemoExoticComponent<({ data, selected }: CoralNodeProps) => React.JSX.Element>;
+/**
+ * Node type registry for React Flow
+ */
+export declare const nodeTypes: {
+    coralService: React.MemoExoticComponent<({ data, selected }: CoralNodeProps) => React.JSX.Element>;
+    coralDatabase: React.MemoExoticComponent<({ data, selected }: CoralNodeProps) => React.JSX.Element>;
+    coralExternalApi: React.MemoExoticComponent<({ data, selected }: CoralNodeProps) => React.JSX.Element>;
+    coralActor: React.MemoExoticComponent<({ data, selected }: CoralNodeProps) => React.JSX.Element>;
+    coralModule: React.MemoExoticComponent<({ data, selected }: CoralNodeProps) => React.JSX.Element>;
+    coralGroup: React.MemoExoticComponent<({ data, selected }: CoralNodeProps) => React.JSX.Element>;
+};
+//# sourceMappingURL=nodes.d.ts.map

package/dist/components/nodes.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"nodes.d.ts","sourceRoot":"","sources":["../../src/components/nodes.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAe,MAAM,OAAO,CAAC;AAEpC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,aAAa,CAAC;AAmClD;;GAEG;AACH,eAAO,MAAM,WAAW,iDAA6B,cAAc,uBAkBjE,CAAC;AAGH;;GAEG;AACH,eAAO,MAAM,YAAY,iDAA6B,cAAc,uBA4BlE,CAAC;AAGH;;GAEG;AACH,eAAO,MAAM,eAAe,iDAA6B,cAAc,uBAerE,CAAC;AAGH;;GAEG;AACH,eAAO,MAAM,SAAS,iDAA6B,cAAc,uBAqB/D,CAAC;AAGH;;GAEG;AACH,eAAO,MAAM,UAAU,iDAA6B,cAAc,uBAehE,CAAC;AAGH;;GAEG;AACH,eAAO,MAAM,SAAS,iDAA6B,cAAc,uBA8B/D,CAAC;AAGH;;GAEG;AACH,eAAO,MAAM,SAAS;iEAnK+B,cAAc;kEAwBb,cAAc;qEAkCX,cAAc;+DAqBpB,cAAc;gEA2Bb,cAAc;+DAqBf,cAAc;CA2ChE,CAAC"}

package/dist/components/nodes.js

@@ -0,0 +1,111 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * Custom Node Components for Coral Editor
+ *
+ * Each node type gets a distinct visual style.
+ */
+import { memo } from 'react';
+import { Handle, Position } from '@xyflow/react';
+const NodeWrapper = ({ children, selected, className = '', style = {}, }) => (_jsx("div", { className: `coral-node ${className} ${selected ? 'selected' : ''}`, style: {
+        padding: '10px 15px',
+        borderRadius: '4px',
+        border: selected ? '2px solid #1a73e8' : '1px solid #ccc',
+        backgroundColor: '#fff',
+        boxShadow: selected ? '0 0 0 2px rgba(26, 115, 232, 0.2)' : '0 1px 3px rgba(0,0,0,0.1)',
+        minWidth: '100px',
+        textAlign: 'center',
+        ...style,
+    }, children: children }));
+/**
+ * Service Node - rectangular with rounded corners
+ */
+export const ServiceNode = memo(({ data, selected }) => (_jsxs(NodeWrapper, { selected: selected, className: "coral-node-service", style: {
+        backgroundColor: '#e3f2fd',
+        borderColor: selected ? '#1a73e8' : '#90caf9',
+    }, children: [_jsx(Handle, { type: "target", position: Position.Top }), _jsx("div", { style: { fontWeight: 500 }, children: data.label }), data.description && (_jsx("div", { style: { fontSize: '11px', color: '#666', marginTop: '4px' }, children: data.description })), _jsx(Handle, { type: "source", position: Position.Bottom })] })));
+ServiceNode.displayName = 'ServiceNode';
+/**
+ * Database Node - cylinder-like appearance
+ */
+export const DatabaseNode = memo(({ data, selected }) => (_jsxs(NodeWrapper, { selected: selected, className: "coral-node-database", style: {
+        backgroundColor: '#fff3e0',
+        borderColor: selected ? '#1a73e8' : '#ffb74d',
+        borderRadius: '8px',
+        position: 'relative',
+    }, children: [_jsx(Handle, { type: "target", position: Position.Top }), _jsx("div", { style: {
+                position: 'absolute',
+                top: '-8px',
+                left: '10%',
+                right: '10%',
+                height: '16px',
+                backgroundColor: '#fff3e0',
+                borderRadius: '50%',
+                border: selected ? '2px solid #1a73e8' : '1px solid #ffb74d',
+                borderBottom: 'none',
+            } }), _jsx("div", { style: { fontWeight: 500, marginTop: '8px' }, children: data.label }), _jsx(Handle, { type: "source", position: Position.Bottom })] })));
+DatabaseNode.displayName = 'DatabaseNode';
+/**
+ * External API Node - cloud-like appearance
+ */
+export const ExternalApiNode = memo(({ data, selected }) => (_jsxs(NodeWrapper, { selected: selected, className: "coral-node-external-api", style: {
+        backgroundColor: '#fce4ec',
+        borderColor: selected ? '#1a73e8' : '#f48fb1',
+        borderStyle: 'dashed',
+    }, children: [_jsx(Handle, { type: "target", position: Position.Top }), _jsx("div", { style: { fontWeight: 500 }, children: data.label }), _jsx("div", { style: { fontSize: '10px', color: '#888' }, children: "External" }), _jsx(Handle, { type: "source", position: Position.Bottom })] })));
+ExternalApiNode.displayName = 'ExternalApiNode';
+/**
+ * Actor Node - stick figure / person shape
+ */
+export const ActorNode = memo(({ data, selected }) => (_jsxs(NodeWrapper, { selected: selected, className: "coral-node-actor", style: {
+        backgroundColor: '#e8f5e9',
+        borderColor: selected ? '#1a73e8' : '#81c784',
+        borderRadius: '50%',
+        width: '80px',
+        height: '80px',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        justifyContent: 'center',
+    }, children: [_jsx(Handle, { type: "target", position: Position.Top }), _jsx("div", { style: { fontSize: '24px' }, children: "\uD83D\uDC64" }), _jsx("div", { style: { fontWeight: 500, fontSize: '12px' }, children: data.label }), _jsx(Handle, { type: "source", position: Position.Bottom })] })));
+ActorNode.displayName = 'ActorNode';
+/**
+ * Module Node - smaller, component-like
+ */
+export const ModuleNode = memo(({ data, selected }) => (_jsxs(NodeWrapper, { selected: selected, className: "coral-node-module", style: {
+        backgroundColor: '#f3e5f5',
+        borderColor: selected ? '#1a73e8' : '#ce93d8',
+        padding: '6px 12px',
+        fontSize: '13px',
+    }, children: [_jsx(Handle, { type: "target", position: Position.Top }), _jsx("div", { style: { fontWeight: 500 }, children: data.label }), _jsx(Handle, { type: "source", position: Position.Bottom })] })));
+ModuleNode.displayName = 'ModuleNode';
+/**
+ * Group Node - container for other nodes
+ */
+export const GroupNode = memo(({ data, selected }) => (_jsxs("div", { className: `coral-node-group ${selected ? 'selected' : ''}`, style: {
+        padding: '10px',
+        borderRadius: '8px',
+        border: selected ? '2px dashed #1a73e8' : '2px dashed #bdbdbd',
+        backgroundColor: 'rgba(245, 245, 245, 0.5)',
+        minWidth: '200px',
+        minHeight: '150px',
+    }, children: [_jsx("div", { style: {
+                fontWeight: 600,
+                fontSize: '14px',
+                color: '#616161',
+                marginBottom: '10px',
+                paddingBottom: '5px',
+                borderBottom: '1px solid #e0e0e0',
+            }, children: data.label }), data.childCount !== undefined && data.childCount > 0 && (_jsxs("div", { style: { fontSize: '11px', color: '#9e9e9e' }, children: [data.childCount, " items"] }))] })));
+GroupNode.displayName = 'GroupNode';
+/**
+ * Node type registry for React Flow
+ */
+export const nodeTypes = {
+    coralService: ServiceNode,
+    coralDatabase: DatabaseNode,
+    coralExternalApi: ExternalApiNode,
+    coralActor: ActorNode,
+    coralModule: ModuleNode,
+    coralGroup: GroupNode,
+};
+//# sourceMappingURL=nodes.js.map

package/dist/components/nodes.js.map

@@ -0,0 +1 @@
+{"version":3,"file":"nodes.js","sourceRoot":"","sources":["../../src/components/nodes.tsx"],"names":[],"mappings":"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"}

package/dist/editor/CoralEditor.d.ts

@@ -0,0 +1,29 @@
+/**
+ * CoralEditor - Main visual editor component
+ *
+ * Renders Graph-IR as an interactive diagram using React Flow.
+ */
+import React from 'react';
+import type { GraphIR, CoralNode, CoralEdge, EditorConfig, EditorCallbacks } from '../types.js';
+export interface CoralEditorProps {
+    /** Graph-IR data to render */
+    graph: GraphIR;
+    /** Editor configuration */
+    config?: EditorConfig;
+    /** Callbacks for editor events */
+    callbacks?: EditorCallbacks;
+    /** CSS class name for the container */
+    className?: string;
+    /** Inline styles for the container */
+    style?: React.CSSProperties;
+}
+/**
+ * Main Coral Editor component
+ */
+export declare const CoralEditor: React.FC<CoralEditorProps>;
+/**
+ * Hook to get Graph-IR from current editor state
+ */
+export declare function useGraphIR(nodes: CoralNode[], edges: CoralEdge[], originalGraph: GraphIR): GraphIR;
+export default CoralEditor;
+//# sourceMappingURL=CoralEditor.d.ts.map

package/dist/editor/CoralEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CoralEditor.d.ts","sourceRoot":"","sources":["../../src/editor/CoralEditor.tsx"],"names":[],"mappings":"AAAA;;;;GAIG;AAEH,OAAO,KAAyC,MAAM,OAAO,CAAC;AAiB9D,OAAO,KAAK,EACV,OAAO,EAGP,SAAS,EACT,SAAS,EACT,YAAY,EACZ,eAAe,EAChB,MAAM,aAAa,CAAC;AAErB,MAAM,WAAW,gBAAgB;IAC/B,8BAA8B;IAC9B,KAAK,EAAE,OAAO,CAAC;IACf,2BAA2B;IAC3B,MAAM,CAAC,EAAE,YAAY,CAAC;IACtB,kCAAkC;IAClC,SAAS,CAAC,EAAE,eAAe,CAAC;IAC5B,uCAAuC;IACvC,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,sCAAsC;IACtC,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;CAC7B;AAaD;;GAEG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CA0IlD,CAAC;AAEF;;GAEG;AACH,wBAAgB,UAAU,CACxB,KAAK,EAAE,SAAS,EAAE,EAClB,KAAK,EAAE,SAAS,EAAE,EAClB,aAAa,EAAE,OAAO,GACrB,OAAO,CAWT;AAED,eAAe,WAAW,CAAC"}