@coral-viz/viz 0.2.3

package/dist/settings/useSettings.js

@@ -0,0 +1,154 @@
+/**
+ * useSettings Hook (CORAL-REQ-009)
+ *
+ * Manages settings state with two tiers:
+ * - Document Settings: Saved with the diagram file
+ * - User Preferences: Saved to localStorage
+ */
+import { useState, useCallback, useEffect, useMemo } from 'react';
+import { DEFAULT_USER_PREFERENCES, DEFAULT_LAYOUT_SETTINGS, LAYOUT_PRESETS, getLayoutPreset, } from '../file/schema.js';
+const STORAGE_KEY = 'coral:user-preferences';
+/**
+ * Load user preferences from localStorage
+ */
+function loadUserPreferences() {
+    if (typeof window === 'undefined' || !window.localStorage) {
+        return DEFAULT_USER_PREFERENCES;
+    }
+    try {
+        const stored = localStorage.getItem(STORAGE_KEY);
+        if (!stored) {
+            return DEFAULT_USER_PREFERENCES;
+        }
+        const parsed = JSON.parse(stored);
+        // Merge with defaults to handle missing fields
+        return { ...DEFAULT_USER_PREFERENCES, ...parsed };
+    }
+    catch {
+        // Invalid JSON or other error - use defaults
+        return DEFAULT_USER_PREFERENCES;
+    }
+}
+/**
+ * Save user preferences to localStorage
+ */
+function saveUserPreferences(prefs) {
+    if (typeof window === 'undefined' || !window.localStorage) {
+        return;
+    }
+    try {
+        localStorage.setItem(STORAGE_KEY, JSON.stringify(prefs));
+    }
+    catch {
+        // Storage full or other error - ignore
+    }
+}
+/**
+ * Detect which preset matches the current layout settings
+ */
+function detectPreset(layout) {
+    // Check each preset (except custom) to see if settings match
+    for (const preset of LAYOUT_PRESETS) {
+        if (preset.id === 'custom')
+            continue;
+        const presetLayout = preset.settings;
+        // Compare key fields
+        if (layout.algorithm === presetLayout.algorithm &&
+            layout.direction === presetLayout.direction) {
+            return preset.id;
+        }
+    }
+    return 'custom';
+}
+/**
+ * Hook for managing settings with localStorage persistence for user preferences
+ */
+export function useSettings(options = {}) {
+    const { initialDocumentSettings, initialUserPreferences, onDocumentSettingsChange, onLayoutChange, } = options;
+    // User preferences state (persisted to localStorage)
+    const [userPreferences, setUserPreferences] = useState(() => {
+        if (initialUserPreferences) {
+            return { ...DEFAULT_USER_PREFERENCES, ...initialUserPreferences };
+        }
+        return loadUserPreferences();
+    });
+    // Document settings state (NOT persisted - saved with document)
+    const [documentSettings, setDocumentSettings] = useState(() => {
+        if (initialDocumentSettings) {
+            return initialDocumentSettings;
+        }
+        return {
+            notation: userPreferences.defaultNotation,
+            layout: DEFAULT_LAYOUT_SETTINGS,
+        };
+    });
+    // Detect current preset based on layout settings
+    const selectedPreset = useMemo(() => detectPreset(documentSettings.layout), [documentSettings.layout]);
+    // Persist user preferences to localStorage when they change
+    useEffect(() => {
+        saveUserPreferences(userPreferences);
+    }, [userPreferences]);
+    // Update user preferences
+    const updateUserPreferences = useCallback((updates) => {
+        setUserPreferences((prev) => ({ ...prev, ...updates }));
+    }, []);
+    // Reset user preferences to defaults
+    const resetUserPreferences = useCallback(() => {
+        setUserPreferences(DEFAULT_USER_PREFERENCES);
+    }, []);
+    // Update document settings
+    const updateDocumentSettings = useCallback((settings) => {
+        setDocumentSettings(settings);
+        onDocumentSettingsChange?.(settings);
+    }, [onDocumentSettingsChange]);
+    // Apply a layout preset
+    const applyLayoutPreset = useCallback((presetId) => {
+        const preset = getLayoutPreset(presetId);
+        if (!preset)
+            return;
+        const newSettings = {
+            ...documentSettings,
+            layout: { ...preset.settings },
+        };
+        setDocumentSettings(newSettings);
+        onDocumentSettingsChange?.(newSettings);
+        onLayoutChange?.(preset.settings);
+    }, [documentSettings, onDocumentSettingsChange, onLayoutChange]);
+    // Add file to recent files
+    const addRecentFile = useCallback((filePath) => {
+        setUserPreferences((prev) => {
+            // Remove if already exists
+            const filtered = prev.recentFiles.filter((f) => f !== filePath);
+            // Add to front
+            const updated = [filePath, ...filtered];
+            // Limit to max
+            const limited = updated.slice(0, prev.maxRecentFiles);
+            return { ...prev, recentFiles: limited };
+        });
+    }, []);
+    // Clear recent files
+    const clearRecentFiles = useCallback(() => {
+        setUserPreferences((prev) => ({ ...prev, recentFiles: [] }));
+    }, []);
+    // Get combined settings panel state
+    const getSettingsPanelState = useCallback(() => {
+        return {
+            document: documentSettings,
+            user: userPreferences,
+            selectedPreset,
+        };
+    }, [documentSettings, userPreferences, selectedPreset]);
+    return {
+        userPreferences,
+        documentSettings,
+        selectedPreset,
+        updateUserPreferences,
+        resetUserPreferences,
+        updateDocumentSettings,
+        applyLayoutPreset,
+        addRecentFile,
+        clearRecentFiles,
+        getSettingsPanelState,
+    };
+}
+//# sourceMappingURL=useSettings.js.map

package/dist/settings/useSettings.js.map

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

package/dist/text-editor/SplitEditor.d.ts

@@ -0,0 +1,72 @@
+/**
+ * SplitEditor - Combined text and visual editor with bidirectional sync
+ *
+ * Renders a split view with text editor on one side and visual diagram
+ * on the other, keeping them in sync through Graph-IR.
+ */
+import React from 'react';
+import { type SyntaxLanguage } from './TextEditor.js';
+import { type ParseFunction, type PrintFunction, type ParseError } from './hooks/useBidirectionalSync.js';
+import type { GraphIR, EditorConfig } from '../types.js';
+/**
+ * Layout orientation for the split view
+ */
+export type SplitLayout = 'horizontal' | 'vertical';
+/**
+ * Which pane is on the left/top
+ */
+export type PrimaryPane = 'text' | 'visual';
+/**
+ * SplitEditor props
+ */
+export interface SplitEditorProps {
+    /** Initial text content */
+    initialText?: string;
+    /** Initial Graph-IR (if provided, takes precedence over text) */
+    initialGraph?: GraphIR;
+    /** Parser function (text → Graph-IR) */
+    parse: ParseFunction;
+    /** Printer function (Graph-IR → text) */
+    print: PrintFunction;
+    /** Syntax language for text editor */
+    language?: SyntaxLanguage;
+    /** Layout orientation */
+    layout?: SplitLayout;
+    /** Which pane is primary (left/top) */
+    primaryPane?: PrimaryPane;
+    /** Split ratio (0-1, proportion of primary pane) */
+    splitRatio?: number;
+    /** Show resize handle between panes */
+    resizable?: boolean;
+    /** Visual editor configuration */
+    editorConfig?: EditorConfig;
+    /** Debounce delay for sync (ms) */
+    debounceMs?: number;
+    /** Callback when graph changes */
+    onGraphChange?: (graph: GraphIR | null) => void;
+    /** Callback when text changes */
+    onTextChange?: (text: string) => void;
+    /** Callback when errors change */
+    onErrorsChange?: (errors: ParseError[]) => void;
+    /** CSS class name */
+    className?: string;
+    /** Inline styles */
+    style?: React.CSSProperties;
+    /** Minimum pane size (px) */
+    minPaneSize?: number;
+}
+/**
+ * SplitEditor component
+ *
+ * A split-pane editor that shows both text DSL and visual diagram,
+ * keeping them synchronized through Graph-IR.
+ *
+ * Features:
+ * - Bidirectional sync between text and visual
+ * - Configurable layout (horizontal/vertical)
+ * - Resizable panes
+ * - Parse error display
+ */
+export declare const SplitEditor: React.FC<SplitEditorProps>;
+export default SplitEditor;
+//# sourceMappingURL=SplitEditor.d.ts.map

package/dist/text-editor/SplitEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SplitEditor.d.ts","sourceRoot":"","sources":["../../src/text-editor/SplitEditor.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAyC,MAAM,OAAO,CAAC;AAE9D,OAAO,EAAc,KAAK,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAClE,OAAO,EAEL,KAAK,aAAa,EAClB,KAAK,aAAa,EAClB,KAAK,UAAU,EAChB,MAAM,iCAAiC,CAAC;AACzC,OAAO,KAAK,EAAE,OAAO,EAAwB,YAAY,EAAmB,MAAM,aAAa,CAAC;AAEhG;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,YAAY,GAAG,UAAU,CAAC;AAEpD;;GAEG;AACH,MAAM,MAAM,WAAW,GAAG,MAAM,GAAG,QAAQ,CAAC;AAE5C;;GAEG;AACH,MAAM,WAAW,gBAAgB;IAC/B,2BAA2B;IAC3B,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,iEAAiE;IACjE,YAAY,CAAC,EAAE,OAAO,CAAC;IACvB,wCAAwC;IACxC,KAAK,EAAE,aAAa,CAAC;IACrB,yCAAyC;IACzC,KAAK,EAAE,aAAa,CAAC;IACrB,sCAAsC;IACtC,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,yBAAyB;IACzB,MAAM,CAAC,EAAE,WAAW,CAAC;IACrB,uCAAuC;IACvC,WAAW,CAAC,EAAE,WAAW,CAAC;IAC1B,oDAAoD;IACpD,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,uCAAuC;IACvC,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,kCAAkC;IAClC,YAAY,CAAC,EAAE,YAAY,CAAC;IAC5B,mCAAmC;IACnC,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,kCAAkC;IAClC,aAAa,CAAC,EAAE,CAAC,KAAK,EAAE,OAAO,GAAG,IAAI,KAAK,IAAI,CAAC;IAChD,iCAAiC;IACjC,YAAY,CAAC,EAAE,CAAC,IAAI,EAAE,MAAM,KAAK,IAAI,CAAC;IACtC,kCAAkC;IAClC,cAAc,CAAC,EAAE,CAAC,MAAM,EAAE,UAAU,EAAE,KAAK,IAAI,CAAC;IAChD,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,6BAA6B;IAC7B,WAAW,CAAC,EAAE,MAAM,CAAC;CACtB;AAgCD;;;;;;;;;;;GAWG;AACH,eAAO,MAAM,WAAW,EAAE,KAAK,CAAC,EAAE,CAAC,gBAAgB,CAqNlD,CAAC;AAEF,eAAe,WAAW,CAAC"}

package/dist/text-editor/SplitEditor.js

@@ -0,0 +1,172 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * SplitEditor - Combined text and visual editor with bidirectional sync
+ *
+ * Renders a split view with text editor on one side and visual diagram
+ * on the other, keeping them in sync through Graph-IR.
+ */
+import React, { useCallback, useMemo, useState } from 'react';
+import { CoralEditor } from '../editor/CoralEditor.js';
+import { TextEditor } from './TextEditor.js';
+import { useBidirectionalSync, } from './hooks/useBidirectionalSync.js';
+/**
+ * Container styles for split layout
+ */
+const containerStyles = {
+    display: 'flex',
+    width: '100%',
+    height: '100%',
+    minHeight: '400px',
+    overflow: 'hidden',
+};
+/**
+ * Pane styles
+ */
+const paneStyles = {
+    overflow: 'auto',
+    display: 'flex',
+    flexDirection: 'column',
+};
+/**
+ * Resize handle styles
+ */
+const resizeHandleStyles = {
+    backgroundColor: '#e0e0e0',
+    cursor: 'col-resize',
+    transition: 'background-color 0.2s',
+    flexShrink: 0,
+};
+/**
+ * SplitEditor component
+ *
+ * A split-pane editor that shows both text DSL and visual diagram,
+ * keeping them synchronized through Graph-IR.
+ *
+ * Features:
+ * - Bidirectional sync between text and visual
+ * - Configurable layout (horizontal/vertical)
+ * - Resizable panes
+ * - Parse error display
+ */
+export const SplitEditor = ({ initialText = '', initialGraph, parse, print, language = 'coral', layout = 'horizontal', primaryPane = 'text', splitRatio: initialSplitRatio = 0.5, resizable = true, editorConfig, debounceMs = 100, onGraphChange, onTextChange, onErrorsChange, className, style, minPaneSize = 200, }) => {
+    // Split ratio state for resizing
+    const [splitRatio, setSplitRatio] = useState(initialSplitRatio);
+    const [isResizing, setIsResizing] = useState(false);
+    // Bidirectional sync hook
+    const [syncState, syncActions] = useBidirectionalSync({
+        initialText,
+        initialGraph,
+        parse,
+        print,
+        debounceMs,
+        onGraphChange,
+        onTextChange,
+        onErrorsChange,
+    });
+    // Handle text editor changes
+    const handleTextChange = useCallback((newText) => {
+        syncActions.setText(newText);
+    }, [syncActions]);
+    // Handle visual editor node changes
+    const handleNodesChange = useCallback((nodes) => {
+        if (syncState.graph) {
+            // Get current edges from the visual editor state
+            // For now, just update nodes - full implementation would track edges too
+            const updatedGraph = {
+                ...syncState.graph,
+                nodes: nodes.map((node) => ({
+                    id: node.id,
+                    type: node.data.nodeType,
+                    label: node.data.label,
+                    description: node.data.description,
+                    properties: node.data.properties,
+                    position: node.position,
+                    dimensions: node.measured
+                        ? { width: node.measured.width ?? 0, height: node.measured.height ?? 0 }
+                        : undefined,
+                })),
+            };
+            syncActions.setGraph(updatedGraph);
+        }
+    }, [syncState.graph, syncActions]);
+    // Editor callbacks for visual editor
+    const editorCallbacks = useMemo(() => ({
+        onNodesChange: handleNodesChange,
+    }), [handleNodesChange]);
+    // Handle resize drag
+    const handleResizeStart = useCallback((e) => {
+        e.preventDefault();
+        setIsResizing(true);
+    }, []);
+    // Resize mouse move handler
+    React.useEffect(() => {
+        if (!isResizing)
+            return;
+        const handleMouseMove = (e) => {
+            const container = document.querySelector('.coral-split-editor');
+            if (!container)
+                return;
+            const rect = container.getBoundingClientRect();
+            const isHorizontal = layout === 'horizontal';
+            const position = isHorizontal ? e.clientX - rect.left : e.clientY - rect.top;
+            const total = isHorizontal ? rect.width : rect.height;
+            const newRatio = Math.max(minPaneSize / total, Math.min(1 - minPaneSize / total, position / total));
+            setSplitRatio(newRatio);
+        };
+        const handleMouseUp = () => {
+            setIsResizing(false);
+        };
+        document.addEventListener('mousemove', handleMouseMove);
+        document.addEventListener('mouseup', handleMouseUp);
+        return () => {
+            document.removeEventListener('mousemove', handleMouseMove);
+            document.removeEventListener('mouseup', handleMouseUp);
+        };
+    }, [isResizing, layout, minPaneSize]);
+    // Compute pane dimensions
+    const primarySize = `${splitRatio * 100}%`;
+    const secondarySize = `${(1 - splitRatio) * 100}%`;
+    // Build pane content
+    const textPane = (_jsx("div", { className: "coral-split-editor-text-pane", style: {
+            ...paneStyles,
+            width: layout === 'horizontal' ? primaryPane === 'text' ? primarySize : secondarySize : '100%',
+            height: layout === 'vertical' ? primaryPane === 'text' ? primarySize : secondarySize : '100%',
+            flexShrink: 0,
+        }, children: _jsx(TextEditor, { value: syncState.text, onChange: handleTextChange, language: language, errors: syncState.errors, showLineNumbers: true, style: { flex: 1, minHeight: 0 } }) }));
+    const visualPane = (_jsx("div", { className: "coral-split-editor-visual-pane", style: {
+            ...paneStyles,
+            width: layout === 'horizontal' ? primaryPane === 'visual' ? primarySize : secondarySize : '100%',
+            height: layout === 'vertical' ? primaryPane === 'visual' ? primarySize : secondarySize : '100%',
+            flex: 1,
+            minWidth: 0,
+            minHeight: 0,
+        }, children: syncState.graph ? (_jsx(CoralEditor, { graph: syncState.graph, config: editorConfig, callbacks: editorCallbacks, style: { width: '100%', height: '100%' } })) : (_jsx("div", { style: {
+                display: 'flex',
+                alignItems: 'center',
+                justifyContent: 'center',
+                height: '100%',
+                color: '#999',
+                fontStyle: 'italic',
+            }, children: syncState.errors.length > 0
+                ? 'Fix syntax errors to see the diagram'
+                : 'Enter diagram code to see the visualization' })) }));
+    // Resize handle
+    const resizeHandle = resizable ? (_jsx("div", { className: "coral-split-editor-resize-handle", onMouseDown: handleResizeStart, style: {
+            ...resizeHandleStyles,
+            width: layout === 'horizontal' ? '6px' : '100%',
+            height: layout === 'horizontal' ? '100%' : '6px',
+            cursor: layout === 'horizontal' ? 'col-resize' : 'row-resize',
+            backgroundColor: isResizing ? '#bdbdbd' : '#e0e0e0',
+        } })) : null;
+    // Order panes based on primary
+    const firstPane = primaryPane === 'text' ? textPane : visualPane;
+    const secondPane = primaryPane === 'text' ? visualPane : textPane;
+    return (_jsxs("div", { className: `coral-split-editor ${className || ''}`, style: {
+            ...containerStyles,
+            ...style,
+            flexDirection: layout === 'horizontal' ? 'row' : 'column',
+            userSelect: isResizing ? 'none' : undefined,
+        }, children: [firstPane, resizeHandle, secondPane] }));
+};
+export default SplitEditor;
+//# sourceMappingURL=SplitEditor.js.map

package/dist/text-editor/SplitEditor.js.map

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

package/dist/text-editor/TextEditor.d.ts

@@ -0,0 +1,53 @@
+/**
+ * TextEditor - DSL text editor component
+ *
+ * A code editor for Coral DSL, Mermaid, and DOT syntax with
+ * inline error display and syntax highlighting.
+ */
+import React from 'react';
+import type { ParseError } from './hooks/useBidirectionalSync.js';
+/**
+ * Supported syntax languages
+ */
+export type SyntaxLanguage = 'coral' | 'mermaid' | 'dot' | 'plain';
+/**
+ * TextEditor props
+ */
+export interface TextEditorProps {
+    /** Current text content */
+    value: string;
+    /** Callback when text changes */
+    onChange: (value: string) => void;
+    /** Syntax language for highlighting */
+    language?: SyntaxLanguage;
+    /** Parse errors to display inline */
+    errors?: ParseError[];
+    /** Placeholder text */
+    placeholder?: string;
+    /** Read-only mode */
+    readOnly?: boolean;
+    /** CSS class name */
+    className?: string;
+    /** Inline styles */
+    style?: React.CSSProperties;
+    /** Line numbers */
+    showLineNumbers?: boolean;
+    /** Auto-focus on mount */
+    autoFocus?: boolean;
+    /** Tab size */
+    tabSize?: number;
+    /** Minimum height */
+    minHeight?: string;
+}
+/**
+ * TextEditor component
+ *
+ * Provides a code editing experience for diagram DSLs with:
+ * - Syntax-aware editing
+ * - Inline error display
+ * - Optional line numbers
+ * - Keyboard shortcuts (Tab indentation)
+ */
+export declare const TextEditor: React.FC<TextEditorProps>;
+export default TextEditor;
+//# sourceMappingURL=TextEditor.d.ts.map

package/dist/text-editor/TextEditor.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextEditor.d.ts","sourceRoot":"","sources":["../../src/text-editor/TextEditor.tsx"],"names":[],"mappings":"AAAA;;;;;GAKG;AAEH,OAAO,KAAkD,MAAM,OAAO,CAAC;AACvE,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,iCAAiC,CAAC;AAElE;;GAEG;AACH,MAAM,MAAM,cAAc,GAAG,OAAO,GAAG,SAAS,GAAG,KAAK,GAAG,OAAO,CAAC;AAEnE;;GAEG;AACH,MAAM,WAAW,eAAe;IAC9B,2BAA2B;IAC3B,KAAK,EAAE,MAAM,CAAC;IACd,iCAAiC;IACjC,QAAQ,EAAE,CAAC,KAAK,EAAE,MAAM,KAAK,IAAI,CAAC;IAClC,uCAAuC;IACvC,QAAQ,CAAC,EAAE,cAAc,CAAC;IAC1B,qCAAqC;IACrC,MAAM,CAAC,EAAE,UAAU,EAAE,CAAC;IACtB,uBAAuB;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,qBAAqB;IACrB,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,oBAAoB;IACpB,KAAK,CAAC,EAAE,KAAK,CAAC,aAAa,CAAC;IAC5B,mBAAmB;IACnB,eAAe,CAAC,EAAE,OAAO,CAAC;IAC1B,0BAA0B;IAC1B,SAAS,CAAC,EAAE,OAAO,CAAC;IACpB,eAAe;IACf,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,qBAAqB;IACrB,SAAS,CAAC,EAAE,MAAM,CAAC;CACpB;AAwFD;;;;;;;;GAQG;AACH,eAAO,MAAM,UAAU,EAAE,KAAK,CAAC,EAAE,CAAC,eAAe,CAoLhD,CAAC;AAEF,eAAe,UAAU,CAAC"}

package/dist/text-editor/TextEditor.js

@@ -0,0 +1,181 @@
+import { jsx as _jsx, jsxs as _jsxs } from "react/jsx-runtime";
+/**
+ * TextEditor - DSL text editor component
+ *
+ * A code editor for Coral DSL, Mermaid, and DOT syntax with
+ * inline error display and syntax highlighting.
+ */
+import { useCallback, useRef, useEffect, useMemo } from 'react';
+/**
+ * Get line and column from text offset
+ */
+function getPositionFromOffset(text, offset) {
+    const lines = text.slice(0, offset).split('\n');
+    return {
+        line: lines.length,
+        column: lines[lines.length - 1].length + 1,
+    };
+}
+/**
+ * Get offset from line and column
+ */
+function getOffsetFromPosition(text, line, column) {
+    const lines = text.split('\n');
+    let offset = 0;
+    for (let i = 0; i < line - 1 && i < lines.length; i++) {
+        offset += lines[i].length + 1; // +1 for newline
+    }
+    return offset + column - 1;
+}
+/**
+ * Default styles for the editor
+ */
+const defaultStyles = {
+    fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace',
+    fontSize: '14px',
+    lineHeight: '1.5',
+    padding: '12px',
+    border: '1px solid #e0e0e0',
+    borderRadius: '4px',
+    outline: 'none',
+    resize: 'vertical',
+    width: '100%',
+    boxSizing: 'border-box',
+    backgroundColor: '#fafafa',
+};
+/**
+ * Error marker styles
+ */
+const errorMarkerStyles = {
+    position: 'absolute',
+    backgroundColor: 'rgba(255, 0, 0, 0.1)',
+    borderBottom: '2px wavy red',
+    pointerEvents: 'none',
+};
+/**
+ * Error tooltip styles
+ */
+const errorTooltipStyles = {
+    position: 'absolute',
+    backgroundColor: '#ffebee',
+    color: '#c62828',
+    padding: '4px 8px',
+    borderRadius: '4px',
+    fontSize: '12px',
+    boxShadow: '0 2px 4px rgba(0,0,0,0.2)',
+    zIndex: 1000,
+    maxWidth: '300px',
+    whiteSpace: 'pre-wrap',
+};
+/**
+ * Line number gutter styles
+ */
+const lineNumberStyles = {
+    position: 'absolute',
+    left: 0,
+    top: 0,
+    width: '40px',
+    backgroundColor: '#f5f5f5',
+    borderRight: '1px solid #e0e0e0',
+    textAlign: 'right',
+    paddingRight: '8px',
+    paddingTop: '12px',
+    fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace',
+    fontSize: '12px',
+    color: '#999',
+    userSelect: 'none',
+    lineHeight: '1.5',
+};
+/**
+ * TextEditor component
+ *
+ * Provides a code editing experience for diagram DSLs with:
+ * - Syntax-aware editing
+ * - Inline error display
+ * - Optional line numbers
+ * - Keyboard shortcuts (Tab indentation)
+ */
+export const TextEditor = ({ value, onChange, language = 'coral', errors = [], placeholder = 'Enter diagram code...', readOnly = false, className, style, showLineNumbers = true, autoFocus = false, tabSize = 2, minHeight = '200px', }) => {
+    const textareaRef = useRef(null);
+    const containerRef = useRef(null);
+    // Calculate line numbers
+    const lineCount = useMemo(() => value.split('\n').length, [value]);
+    const lineNumbers = useMemo(() => Array.from({ length: lineCount }, (_, i) => i + 1), [lineCount]);
+    // Handle text changes
+    const handleChange = useCallback((e) => {
+        onChange(e.target.value);
+    }, [onChange]);
+    // Handle tab key for indentation
+    const handleKeyDown = useCallback((e) => {
+        if (e.key === 'Tab') {
+            e.preventDefault();
+            const textarea = e.currentTarget;
+            const start = textarea.selectionStart;
+            const end = textarea.selectionEnd;
+            const spaces = ' '.repeat(tabSize);
+            // Insert spaces at cursor
+            const newValue = value.slice(0, start) + spaces + value.slice(end);
+            onChange(newValue);
+            // Move cursor after inserted spaces
+            requestAnimationFrame(() => {
+                textarea.selectionStart = textarea.selectionEnd = start + tabSize;
+            });
+        }
+    }, [value, onChange, tabSize]);
+    // Auto-focus
+    useEffect(() => {
+        if (autoFocus && textareaRef.current) {
+            textareaRef.current.focus();
+        }
+    }, [autoFocus]);
+    // Find errors for display
+    const displayErrors = useMemo(() => {
+        return errors.map((error) => ({
+            ...error,
+            // Ensure we have line/column
+            line: error.line || 1,
+            column: error.column || 1,
+        }));
+    }, [errors]);
+    // Group errors by line for inline display
+    const errorsByLine = useMemo(() => {
+        const byLine = new Map();
+        for (const error of displayErrors) {
+            const existing = byLine.get(error.line) || [];
+            existing.push(error);
+            byLine.set(error.line, existing);
+        }
+        return byLine;
+    }, [displayErrors]);
+    // Compute textarea styles with line number offset
+    const textareaStyles = useMemo(() => ({
+        ...defaultStyles,
+        ...style,
+        minHeight,
+        paddingLeft: showLineNumbers ? '52px' : '12px',
+    }), [style, minHeight, showLineNumbers]);
+    return (_jsxs("div", { ref: containerRef, className: `coral-text-editor ${className || ''}`, style: {
+            position: 'relative',
+            width: '100%',
+        }, children: [showLineNumbers && (_jsx("div", { className: "coral-text-editor-line-numbers", style: {
+                    ...lineNumberStyles,
+                    minHeight,
+                }, children: lineNumbers.map((num) => (_jsx("div", { style: {
+                        height: '21px', // Match line height
+                        color: errorsByLine.has(num) ? '#c62828' : '#999',
+                        fontWeight: errorsByLine.has(num) ? 'bold' : 'normal',
+                    }, children: num }, num))) })), _jsx("textarea", { ref: textareaRef, value: value, onChange: handleChange, onKeyDown: handleKeyDown, placeholder: placeholder, readOnly: readOnly, spellCheck: false, autoComplete: "off", autoCorrect: "off", autoCapitalize: "off", "data-language": language, style: textareaStyles }), displayErrors.length > 0 && (_jsxs("div", { className: "coral-text-editor-errors", style: {
+                    marginTop: '8px',
+                    padding: '8px 12px',
+                    backgroundColor: '#ffebee',
+                    borderRadius: '4px',
+                    fontSize: '13px',
+                }, children: [_jsxs("div", { style: { color: '#c62828', fontWeight: 500, marginBottom: '4px' }, children: [displayErrors.length, " error", displayErrors.length !== 1 ? 's' : ''] }), displayErrors.slice(0, 5).map((error, i) => (_jsxs("div", { style: {
+                            color: '#b71c1c',
+                            marginTop: '4px',
+                            fontFamily: 'monospace',
+                            fontSize: '12px',
+                        }, children: ["Line ", error.line, ", Col ", error.column, ": ", error.message] }, i))), displayErrors.length > 5 && (_jsxs("div", { style: { color: '#999', marginTop: '4px', fontSize: '12px' }, children: ["...and ", displayErrors.length - 5, " more"] }))] }))] }));
+};
+export default TextEditor;
+//# sourceMappingURL=TextEditor.js.map