@magicborn/dialogue-forge 0.1.0

package/dist/esm/components/ChoiceEdgeV2.js

@@ -0,0 +1,67 @@
+import React, { useState } from 'react';
+import { BaseEdge, getSmoothStepPath, getBezierPath, Position } from 'reactflow';
+export function ChoiceEdgeV2({ id, sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition, data, selected, }) {
+    const [hovered, setHovered] = useState(false);
+    const isBackEdge = data?.isBackEdge ?? false;
+    // Use smooth step path for angular look (like the horizontal example)
+    // For back edges, use bezier for a more curved appearance
+    const [edgePath, labelX, labelY] = isBackEdge
+        ? getBezierPath({
+            sourceX,
+            sourceY,
+            sourcePosition,
+            targetX,
+            targetY,
+            targetPosition,
+            curvature: 0.5,
+        })
+        : getSmoothStepPath({
+            sourceX,
+            sourceY,
+            sourcePosition: sourcePosition || Position.Bottom,
+            targetX,
+            targetY,
+            targetPosition: targetPosition || Position.Top,
+            borderRadius: 8,
+        });
+    const choiceIndex = data?.choiceIndex ?? 0;
+    // Map choice index to CSS variable
+    const choiceColorVar = `var(--color-df-edge-choice-${Math.min(choiceIndex % 5, 4) + 1})`;
+    // Use loop color for back edges, otherwise use choice color
+    const colorVar = isBackEdge ? 'var(--color-df-edge-loop)' : choiceColorVar;
+    const isSelected = selected || hovered;
+    const isDimmed = data?.isDimmed ?? false;
+    // Make edge thicker and more opaque when hovered or selected
+    // Dim edges not in path when highlighting is on
+    const strokeWidth = isSelected ? 4 : 2;
+    const opacity = isDimmed ? 0.15 : (isSelected ? 1 : 0.7);
+    // Use dimmed color when dimmed
+    const strokeColor = isDimmed ? 'var(--color-df-edge-dimmed)' : colorVar;
+    // Add glow effect when hovered (only if not dimmed)
+    const filter = hovered && !isDimmed ? `drop-shadow(0 0 4px ${colorVar})` : undefined;
+    // For pulse animation, we'll use a slightly brighter version
+    // Since we can't easily brighten CSS variables, we'll use the same color with higher opacity
+    const pulseColor = colorVar;
+    const shouldAnimate = data?.isInPathToSelected ?? false;
+    return (React.createElement(React.Fragment, null,
+        React.createElement("path", { d: edgePath, fill: "none", stroke: "transparent", strokeWidth: 20, style: { cursor: 'pointer', pointerEvents: 'all' }, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false) }),
+        React.createElement(BaseEdge, { id: id, path: edgePath, style: {
+                stroke: strokeColor,
+                strokeWidth,
+                opacity,
+                cursor: 'pointer',
+                transition: 'all 0.2s ease',
+                pointerEvents: 'none',
+                filter,
+                // Dashed line for back edges
+                strokeDasharray: isBackEdge ? '8 4' : undefined,
+            }, markerEnd: isDimmed ? undefined : `url(#react-flow__arrowclosed-choice-${choiceIndex})` }),
+        isBackEdge && (React.createElement("g", { transform: `translate(${labelX - 10}, ${labelY - 10})` },
+            React.createElement("circle", { cx: "10", cy: "10", r: "12", fill: "var(--color-df-base)", stroke: strokeColor, strokeWidth: "2" }),
+            React.createElement("text", { x: "10", y: "14", textAnchor: "middle", fontSize: "12", fill: strokeColor }, "\u21BA"))),
+        shouldAnimate && (React.createElement("circle", { r: "6", fill: pulseColor, opacity: 0.9 },
+            React.createElement("animateMotion", { dur: "2s", repeatCount: "indefinite", path: edgePath }))),
+        React.createElement("defs", null,
+            React.createElement("marker", { id: `react-flow__arrowclosed-choice-${choiceIndex}`, markerWidth: "12.5", markerHeight: "12.5", viewBox: "-10 -10 20 20", markerUnits: "strokeWidth", orient: "auto", refX: "0", refY: "0" },
+                React.createElement("polyline", { stroke: colorVar, strokeLinecap: "round", strokeLinejoin: "round", fill: colorVar, points: "-5,-4 0,0 -5,4 -5,-4" })))));
+}

package/dist/esm/components/CodeBlock.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface CodeBlockProps {
+    code: string;
+    language?: string;
+    className?: string;
+}
+export declare function CodeBlock({ code, language, className }: CodeBlockProps): React.JSX.Element;
+export {};

package/dist/esm/components/CodeBlock.js

@@ -0,0 +1,18 @@
+import React from 'react';
+import { Prism as SyntaxHighlighter } from 'react-syntax-highlighter';
+import { vscDarkPlus } from 'react-syntax-highlighter/dist/esm/styles/prism';
+export function CodeBlock({ code, language = 'typescript', className = '' }) {
+    return (React.createElement("div", { className: `bg-[#12121a] rounded border border-[#2a2a3e] overflow-hidden ${className}` },
+        React.createElement(SyntaxHighlighter, { language: language, style: vscDarkPlus, customStyle: {
+                margin: 0,
+                padding: '1rem',
+                background: '#12121a',
+                fontSize: '0.75rem',
+                lineHeight: '1.5',
+                borderRadius: 0,
+            }, codeTagProps: {
+                style: {
+                    fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace',
+                }
+            }, PreTag: "div" }, code)));
+}

package/dist/esm/components/ConditionAutocomplete.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { FlagSchema } from '../types/flags';
+interface ConditionAutocompleteProps {
+    value: string;
+    onChange: (value: string) => void;
+    onBlur?: () => void;
+    placeholder?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    flagSchema?: FlagSchema;
+    textarea?: boolean;
+}
+export declare function ConditionAutocomplete({ value, onChange, onBlur, placeholder, className, style, flagSchema, textarea }: ConditionAutocompleteProps): React.JSX.Element;
+export {};

package/dist/esm/components/ConditionAutocomplete.js

@@ -0,0 +1,248 @@
+import React, { useState, useEffect, useRef, useMemo, useCallback } from 'react';
+import { BookOpen, Trophy, Package, TrendingUp, Crown, Globe, MessageSquare } from 'lucide-react';
+function getFlagIcon(flagType) {
+    switch (flagType) {
+        case 'quest':
+            return BookOpen;
+        case 'achievement':
+            return Trophy;
+        case 'item':
+            return Package;
+        case 'stat':
+            return TrendingUp;
+        case 'title':
+            return Crown;
+        case 'global':
+            return Globe;
+        case 'dialogue':
+        default:
+            return MessageSquare;
+    }
+}
+function getFlagColorClasses(flagType) {
+    switch (flagType) {
+        case 'quest':
+            return 'bg-blue-500/20 text-blue-400 border-blue-500/30';
+        case 'achievement':
+            return 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30';
+        case 'item':
+            return 'bg-green-500/20 text-green-400 border-green-500/30';
+        case 'stat':
+            return 'bg-purple-500/20 text-purple-400 border-purple-500/30';
+        case 'title':
+            return 'bg-pink-500/20 text-pink-400 border-pink-500/30';
+        case 'global':
+            return 'bg-orange-500/20 text-orange-400 border-orange-500/30';
+        case 'dialogue':
+        default:
+            return 'bg-gray-500/20 text-gray-400 border-gray-500/30';
+    }
+}
+export function ConditionAutocomplete({ value, onChange, onBlur, placeholder, className = '', style, flagSchema, textarea = false }) {
+    const [showSuggestions, setShowSuggestions] = useState(false);
+    const [selectedIndex, setSelectedIndex] = useState(0);
+    const [cursorPosition, setCursorPosition] = useState(0);
+    const [debouncedSearchTerm, setDebouncedSearchTerm] = useState('');
+    const containerRef = useRef(null);
+    const inputRef = useRef(null);
+    const debounceTimerRef = useRef(null);
+    // Extract the current word being typed (for autocomplete matching)
+    const currentWord = useMemo(() => {
+        const textBeforeCursor = value.substring(0, cursorPosition);
+        const match = textBeforeCursor.match(/(\$?\w*)$/);
+        return match ? match[1] : '';
+    }, [value, cursorPosition]);
+    // Debounce search term for better performance
+    useEffect(() => {
+        if (debounceTimerRef.current) {
+            clearTimeout(debounceTimerRef.current);
+        }
+        debounceTimerRef.current = setTimeout(() => {
+            setDebouncedSearchTerm(currentWord);
+        }, 300); // 300ms debounce for smoother experience
+        return () => {
+            if (debounceTimerRef.current) {
+                clearTimeout(debounceTimerRef.current);
+            }
+        };
+    }, [currentWord]);
+    // Generate suggestions based on current input (using debounced search term)
+    const suggestions = useMemo(() => {
+        const result = [];
+        const word = debouncedSearchTerm.toLowerCase();
+        const isTypingVariable = word.startsWith('$') || word.length > 0;
+        // If typing a variable (starts with $ or has text), show flags
+        if (flagSchema && (isTypingVariable || word === '')) {
+            const searchTerm = word.startsWith('$') ? word.substring(1) : word;
+            flagSchema.flags.forEach(flag => {
+                const flagId = flag.id.toLowerCase();
+                const flagName = flag.name.toLowerCase();
+                // Match if search term is empty (showing $ or empty field) or matches flag id/name
+                if (!searchTerm || flagId.includes(searchTerm) || flagName.includes(searchTerm)) {
+                    result.push({
+                        type: 'flag',
+                        label: `$${flag.id}`, // Show with dollar sign
+                        insert: `$${flag.id}`,
+                        description: flag.name,
+                        flagType: flag.type
+                    });
+                }
+            });
+        }
+        // Show operators and keywords when user has typed $ or is actively typing
+        if (word === '$' || (word.startsWith('$') && word.length > 1)) {
+            // Operators - only show when user has typed $ and is looking for what comes next
+            result.push({ type: 'operator', label: '==', insert: ' == ', description: 'Equals' }, { type: 'operator', label: '!=', insert: ' != ', description: 'Not equals' }, { type: 'operator', label: '>=', insert: ' >= ', description: 'Greater than or equal' }, { type: 'operator', label: '<=', insert: ' <= ', description: 'Less than or equal' }, { type: 'operator', label: '>', insert: ' > ', description: 'Greater than' }, { type: 'operator', label: '<', insert: ' < ', description: 'Less than' });
+            // Keywords
+            result.push({ type: 'keyword', label: 'and', insert: ' and ', description: 'Logical AND' }, { type: 'keyword', label: 'not', insert: 'not ', description: 'Logical NOT' });
+        }
+        // Limit results
+        return result.slice(0, 20);
+    }, [debouncedSearchTerm, flagSchema]);
+    // Handle input change
+    const handleChange = (e) => {
+        const newValue = e.target.value;
+        const newCursorPos = e.target.selectionStart || 0;
+        // Mark that user has actively typed
+        setHasActivelyTyped(true);
+        onChange(newValue);
+        setCursorPosition(newCursorPos);
+    };
+    // Track if user has actively typed in this session (not just focused on existing content)
+    const [hasActivelyTyped, setHasActivelyTyped] = useState(false);
+    // Update suggestions visibility when value or cursor changes
+    // Show suggestions when typing $ or when actively typing
+    useEffect(() => {
+        const textBeforeCursor = value.substring(0, cursorPosition);
+        const match = textBeforeCursor.match(/(\$?\w*)$/);
+        const word = match ? match[1] : '';
+        // Show suggestions when:
+        // 1. User is typing a variable (starts with $) OR
+        // 2. User has actively typed something and we have suggestions OR
+        // 3. Field is empty and user just focused (allow showing on empty field when typing $)
+        const isTypingVariable = word.startsWith('$') || word === '$';
+        const isEmpty = value.trim() === '';
+        const shouldShow = (hasActivelyTyped || isTypingVariable || isEmpty) && suggestions.length > 0;
+        setShowSuggestions(shouldShow);
+    }, [value, cursorPosition, suggestions.length, hasActivelyTyped]);
+    // Handle selection change (for cursor tracking)
+    const handleSelect = (e) => {
+        const target = e.currentTarget;
+        setCursorPosition(target.selectionStart || 0);
+    };
+    // Handle keydown
+    const handleKeyDown = (e) => {
+        if (!showSuggestions || suggestions.length === 0) {
+            if (e.key === 'Escape' && onBlur) {
+                onBlur();
+            }
+            return;
+        }
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            setSelectedIndex(prev => (prev + 1) % suggestions.length);
+        }
+        else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            setSelectedIndex(prev => (prev - 1 + suggestions.length) % suggestions.length);
+        }
+        else if (e.key === 'Enter' || e.key === 'Tab') {
+            e.preventDefault();
+            insertSuggestion(suggestions[selectedIndex]);
+        }
+        else if (e.key === 'Escape') {
+            setShowSuggestions(false);
+        }
+    };
+    // Insert suggestion at cursor position
+    const insertSuggestion = useCallback((suggestion) => {
+        const textBeforeCursor = value.substring(0, cursorPosition);
+        const textAfterCursor = value.substring(cursorPosition);
+        // Find the start of the current word
+        const wordMatch = textBeforeCursor.match(/(\$?\w*)$/);
+        const wordStart = wordMatch ? cursorPosition - wordMatch[1].length : cursorPosition;
+        // Replace the current word with the suggestion
+        const newText = value.substring(0, wordStart) +
+            suggestion.insert +
+            textAfterCursor;
+        onChange(newText);
+        // Set cursor position after inserted text
+        const newCursorPos = wordStart + suggestion.insert.length;
+        setTimeout(() => {
+            if (inputRef.current) {
+                inputRef.current.setSelectionRange(newCursorPos, newCursorPos);
+                inputRef.current.focus();
+            }
+        }, 0);
+        setShowSuggestions(false);
+        setSelectedIndex(0);
+    }, [value, cursorPosition, onChange]);
+    // Handle drag start for draggable suggestions
+    const handleDragStart = useCallback((e, suggestion) => {
+        e.dataTransfer.setData('text/plain', suggestion.insert);
+        e.dataTransfer.effectAllowed = 'copy';
+    }, []);
+    // Handle click outside
+    useEffect(() => {
+        const handleClickOutside = (event) => {
+            if (containerRef.current && !containerRef.current.contains(event.target)) {
+                setShowSuggestions(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, []);
+    const InputComponent = textarea ? 'textarea' : 'input';
+    const inputProps = {
+        ref: inputRef,
+        type: textarea ? undefined : 'text',
+        value,
+        onChange: handleChange,
+        onSelect: handleSelect,
+        onKeyDown: handleKeyDown,
+        onFocus: () => {
+            if (inputRef.current) {
+                setCursorPosition(inputRef.current.selectionStart || 0);
+            }
+            // Don't reset hasActivelyTyped on focus - allow showing suggestions if field is empty or has $
+            // This allows suggestions to show when user focuses and types $
+        },
+        onBlur: () => {
+            // Delay to allow click on suggestion
+            setTimeout(() => {
+                if (onBlur)
+                    onBlur();
+            }, 200);
+        },
+        placeholder,
+        className,
+    };
+    if (style) {
+        inputProps.style = style;
+    }
+    return (React.createElement("div", { className: "relative", ref: containerRef },
+        React.createElement(InputComponent, { ...inputProps }),
+        showSuggestions && suggestions.length > 0 && (React.createElement("div", { className: "absolute z-50 mt-1 w-full bg-[#1a1a2e] border border-[#2a2a3e] rounded-lg shadow-xl max-h-64 overflow-y-auto" }, suggestions.map((suggestion, idx) => {
+            const isSelected = idx === selectedIndex;
+            const IconComponent = suggestion.type === 'flag' && suggestion.flagType
+                ? getFlagIcon(suggestion.flagType)
+                : null;
+            // Get color classes for operators and keywords
+            const operatorColorClasses = 'bg-purple-500/20 text-purple-400 border-purple-500/30';
+            const keywordColorClasses = 'bg-blue-500/20 text-blue-400 border-blue-500/30';
+            return (React.createElement("button", { key: `${suggestion.type}-${suggestion.label}-${idx}`, type: "button", onClick: () => insertSuggestion(suggestion), onMouseEnter: () => setSelectedIndex(idx), draggable: true, onDragStart: (e) => handleDragStart(e, suggestion), className: `w-full text-left px-3 py-2 text-sm flex items-center gap-2 transition-colors ${isSelected
+                    ? 'bg-[#2a2a3e] text-white'
+                    : 'text-gray-300 hover:bg-[#252538]'}`, style: { minHeight: 'auto', height: 'auto' } },
+                suggestion.type === 'flag' && suggestion.flagType && (React.createElement(React.Fragment, null,
+                    IconComponent && (React.createElement(IconComponent, { size: 14, className: `flex-shrink-0 ${getFlagColorClasses(suggestion.flagType).split(' ')[1]}` })),
+                    React.createElement("span", { className: `text-xs px-2 py-1 rounded border flex-shrink-0 font-medium whitespace-nowrap ${getFlagColorClasses(suggestion.flagType)}` }, suggestion.label),
+                    suggestion.description && (React.createElement("span", { className: "text-[10px] text-gray-500 truncate flex-1 min-w-0 ml-1" }, suggestion.description)),
+                    React.createElement("span", { className: `text-[10px] px-1.5 py-0.5 rounded border flex-shrink-0 whitespace-nowrap ${getFlagColorClasses(suggestion.flagType)}` }, suggestion.flagType === 'dialogue' ? 'temp' : suggestion.flagType))),
+                suggestion.type === 'operator' && (React.createElement(React.Fragment, null,
+                    React.createElement("span", { className: `text-xs px-2 py-1 rounded border flex-shrink-0 font-mono font-medium whitespace-nowrap ${operatorColorClasses}` }, suggestion.label),
+                    suggestion.description && (React.createElement("span", { className: "text-[10px] text-gray-500 truncate flex-1 min-w-0 ml-1" }, suggestion.description)))),
+                suggestion.type === 'keyword' && (React.createElement(React.Fragment, null,
+                    React.createElement("span", { className: `text-xs px-2 py-1 rounded border flex-shrink-0 font-mono font-medium whitespace-nowrap ${keywordColorClasses}` }, suggestion.label),
+                    suggestion.description && (React.createElement("span", { className: "text-[10px] text-gray-500 truncate flex-1 min-w-0 ml-1" }, suggestion.description))))));
+        })))));
+}

package/dist/esm/components/ConditionalNodeV2.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { NodeProps } from 'reactflow';
+import { DialogueNode } from '../types';
+import { FlagSchema } from '../types/flags';
+import { LayoutDirection } from '../utils/layout';
+interface ConditionalNodeData {
+    node: DialogueNode;
+    flagSchema?: FlagSchema;
+    isDimmed?: boolean;
+    isInPath?: boolean;
+    layoutDirection?: LayoutDirection;
+    isStartNode?: boolean;
+    isEndNode?: boolean;
+}
+export declare function ConditionalNodeV2({ data, selected }: NodeProps<ConditionalNodeData>): React.JSX.Element;
+export {};

package/dist/esm/components/ConditionalNodeV2.js

@@ -0,0 +1,111 @@
+import React, { useEffect, useRef, useState } from 'react';
+import { Handle, Position, useUpdateNodeInternals } from 'reactflow';
+import { GitBranch, Play, Flag } from 'lucide-react';
+// Color scheme for conditional block edges
+const CONDITIONAL_COLORS = ['#3b82f6', '#8b5cf6', '#06b6d4', '#22c55e', '#f59e0b'];
+export function ConditionalNodeV2({ data, selected }) {
+    const { node, flagSchema, isDimmed, isInPath, layoutDirection = 'TB', isStartNode, isEndNode } = data;
+    const blocks = node.conditionalBlocks || [];
+    const updateNodeInternals = useUpdateNodeInternals();
+    const headerRef = useRef(null);
+    const blockRefs = useRef([]);
+    const [handlePositions, setHandlePositions] = useState([]);
+    // Handle positions based on layout direction
+    const isHorizontal = layoutDirection === 'LR';
+    const targetPosition = isHorizontal ? Position.Left : Position.Top;
+    // Calculate handle positions based on actual rendered heights
+    useEffect(() => {
+        if (headerRef.current && blocks.length > 0) {
+            const positions = [];
+            const headerHeight = headerRef.current.offsetHeight;
+            let cumulativeHeight = headerHeight;
+            blocks.forEach((_block, idx) => {
+                const blockEl = blockRefs.current[idx];
+                if (blockEl) {
+                    const blockHeight = blockEl.offsetHeight;
+                    const handleY = cumulativeHeight + (blockHeight / 2);
+                    positions.push(handleY);
+                    cumulativeHeight += blockHeight;
+                }
+                else {
+                    // Fallback: estimate height
+                    const estimatedHeight = 40;
+                    const handleY = cumulativeHeight + (estimatedHeight / 2);
+                    positions.push(handleY);
+                    cumulativeHeight += estimatedHeight;
+                }
+            });
+            setHandlePositions(positions);
+            setTimeout(() => {
+                updateNodeInternals(node.id);
+            }, 0);
+        }
+    }, [blocks.length, node.id, updateNodeInternals]);
+    // Border color based on state
+    const borderClass = selected
+        ? 'border-df-conditional-border shadow-lg shadow-df-glow'
+        : isStartNode
+            ? 'border-df-start shadow-md'
+            : isEndNode
+                ? 'border-df-end shadow-md'
+                : 'border-df-conditional-border';
+    return (React.createElement("div", { className: `rounded-lg border-2 transition-all duration-300 ${borderClass} ${isInPath ? 'border-df-conditional-border/70' : ''} bg-df-conditional-bg min-w-[200px] relative`, style: isDimmed ? { opacity: 0.35, filter: 'saturate(0.3)' } : undefined },
+        isStartNode && (React.createElement("div", { className: "absolute -top-2 -left-2 bg-df-start text-df-text-primary text-[8px] font-bold px-1.5 py-0.5 rounded-full flex items-center gap-0.5 shadow-lg z-10" },
+            React.createElement(Play, { size: 8, fill: "currentColor" }),
+            " START")),
+        isEndNode && (React.createElement("div", { className: "absolute -top-2 -right-2 bg-df-end text-df-text-primary text-[8px] font-bold px-1.5 py-0.5 rounded-full flex items-center gap-0.5 shadow-lg z-10" },
+            React.createElement(Flag, { size: 8 }),
+            " END")),
+        React.createElement(Handle, { type: "target", position: targetPosition, className: "!bg-df-control-bg !border-df-control-border !w-4 !h-4 !rounded-full" }),
+        React.createElement("div", { ref: headerRef, className: "px-3 py-1.5 border-b border-df-control-border bg-df-conditional-header flex items-center gap-2 rounded-t-lg" },
+            React.createElement(GitBranch, { size: 12, className: "text-df-conditional-border" }),
+            React.createElement("span", { className: "text-[10px] font-mono text-df-text-secondary truncate flex-1" }, node.id),
+            React.createElement("span", { className: "text-[10px] text-df-conditional-border" }, "IF/ELSE")),
+        React.createElement("div", { className: "py-1" }, blocks.map((block, idx) => {
+            const color = CONDITIONAL_COLORS[idx % CONDITIONAL_COLORS.length];
+            const blockType = block.type === 'if' ? 'IF' : block.type === 'elseif' ? 'ELSE IF' : 'ELSE';
+            return (React.createElement("div", { key: block.id, ref: el => { blockRefs.current[idx] = el; }, className: "px-3 py-1.5 border-b border-df-control-border last:border-b-0" },
+                React.createElement("div", { className: "flex items-center gap-2 mb-1" },
+                    React.createElement("span", { className: "text-[9px] px-1.5 py-0.5 rounded bg-df-base text-df-text-primary font-semibold" }, blockType),
+                    block.condition && block.condition.length > 0 && (React.createElement("span", { className: "text-[9px] text-df-text-secondary font-mono truncate flex-1" }, block.condition.map((c) => {
+                        const varName = `$${c.flag}`;
+                        if (c.operator === 'is_set')
+                            return varName;
+                        if (c.operator === 'is_not_set')
+                            return `not ${varName}`;
+                        if (c.value !== undefined) {
+                            const op = c.operator === 'equals' ? '==' :
+                                c.operator === 'not_equals' ? '!=' :
+                                    c.operator === 'greater_than' ? '>' :
+                                        c.operator === 'less_than' ? '<' :
+                                            c.operator === 'greater_equal' ? '>=' :
+                                                c.operator === 'less_equal' ? '<=' : '==';
+                            const value = typeof c.value === 'string' ? `"${c.value}"` : c.value;
+                            return `${varName} ${op} ${value}`;
+                        }
+                        return '';
+                    }).filter(c => c).join(' and ').slice(0, 30)))),
+                block.speaker && (React.createElement("div", { className: "text-[9px] text-df-conditional-border font-medium" }, block.speaker)),
+                React.createElement("div", { className: "text-[10px] text-df-text-primary line-clamp-1 bg-df-base border border-df-control-border rounded px-2 py-1 mt-1" },
+                    "\"",
+                    block.content.slice(0, 40) + (block.content.length > 40 ? '...' : ''),
+                    "\""),
+                React.createElement(Handle, { type: "source", position: Position.Right, id: `block-${idx}`, style: {
+                        top: `${handlePositions[idx] || 0}px`,
+                        right: -8,
+                    }, className: "!bg-[#2a2a3e] !border-[#4a4a6a] !w-3 !h-3 !rounded-full hover:!border-blue-400 hover:!bg-blue-400/20" })));
+        })),
+        node.setFlags && node.setFlags.length > 0 && (React.createElement("div", { className: "px-3 py-1 border-t border-[#2a2a3e] flex flex-wrap gap-1" }, node.setFlags.map(flagId => {
+            const flag = flagSchema?.flags.find(f => f.id === flagId);
+            const flagType = flag?.type || 'dialogue';
+            const colorClass = flagType === 'dialogue' ? 'bg-gray-500/20 text-gray-400 border-gray-500/30' :
+                flagType === 'quest' ? 'bg-blue-500/20 text-blue-400 border-blue-500/30' :
+                    flagType === 'achievement' ? 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30' :
+                        flagType === 'item' ? 'bg-green-500/20 text-green-400 border-green-500/30' :
+                            flagType === 'stat' ? 'bg-purple-500/20 text-purple-400 border-purple-500/30' :
+                                flagType === 'title' ? 'bg-pink-500/20 text-pink-400 border-pink-500/30' :
+                                    flagType === 'global' ? 'bg-orange-500/20 text-orange-400 border-orange-500/30' :
+                                        'bg-gray-500/20 text-gray-400 border-gray-500/30';
+            return (React.createElement("span", { key: flagId, className: `text-[8px] px-1 py-0.5 rounded border ${colorClass}`, title: flag?.name || flagId }, flagType === 'dialogue' ? 't' : flagType[0]));
+        })))));
+}

package/dist/esm/components/DialogueEditorV2.d.ts

@@ -0,0 +1,22 @@
+/**
+ * Dialogue Editor V2 - React Flow Implementation
+ *
+ * This is the new version using React Flow for graph rendering.
+ * See V2_MIGRATION_PLAN.md for implementation details.
+ */
+import React from 'react';
+import 'reactflow/dist/style.css';
+import { DialogueEditorProps } from '../types';
+import { FlagSchema } from '../types/flags';
+type ViewMode = 'graph' | 'yarn' | 'play';
+export declare function DialogueEditorV2(props: DialogueEditorProps & {
+    flagSchema?: FlagSchema;
+    initialViewMode?: ViewMode;
+    viewMode?: ViewMode;
+    onViewModeChange?: (mode: ViewMode) => void;
+    layoutStrategy?: string;
+    onLayoutStrategyChange?: (strategy: string) => void;
+    onOpenFlagManager?: () => void;
+    onOpenGuide?: () => void;
+}): React.JSX.Element;
+export {};