@magicborn/dialogue-forge 0.1.0

package/dist/components/PlayView.d.ts

@@ -0,0 +1,12 @@
+import React from 'react';
+import { DialogueTree } from '../types';
+import { FlagSchema } from '../types/flags';
+import { GameFlagState } from '../types/game-state';
+interface PlayViewProps {
+    dialogue: DialogueTree;
+    startNodeId?: string;
+    flagSchema?: FlagSchema;
+    initialFlags?: GameFlagState;
+}
+export declare function PlayView({ dialogue, startNodeId, flagSchema, initialFlags }: PlayViewProps): React.JSX.Element;
+export {};

package/dist/components/PlayView.js

@@ -0,0 +1,307 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PlayView = PlayView;
+const react_1 = __importStar(require("react"));
+const flag_manager_1 = require("../lib/flag-manager");
+const yarn_runner_1 = require("../lib/yarn-runner");
+function PlayView({ dialogue, startNodeId, flagSchema, initialFlags }) {
+    const [currentNodeId, setCurrentNodeId] = (0, react_1.useState)(startNodeId || dialogue.startNodeId);
+    // Initialize game flags with defaults from schema, then merge with initialFlags
+    const initialGameFlags = (0, react_1.useMemo)(() => {
+        if (flagSchema) {
+            const defaults = (0, flag_manager_1.initializeFlags)(flagSchema);
+            return { ...defaults, ...initialFlags };
+        }
+        return initialFlags || {};
+    }, [flagSchema, initialFlags]);
+    // Initialize variable manager
+    const variableManager = (0, react_1.useMemo)(() => {
+        return new yarn_runner_1.VariableManager(initialGameFlags, new Set());
+    }, [initialGameFlags]);
+    const [gameFlags, setGameFlags] = (0, react_1.useState)(initialGameFlags);
+    const [history, setHistory] = (0, react_1.useState)([]);
+    const [isTyping, setIsTyping] = (0, react_1.useState)(false);
+    const [showDebugPanel, setShowDebugPanel] = (0, react_1.useState)(false);
+    const chatEndRef = (0, react_1.useRef)(null);
+    // Track which flags were set during this run
+    const [flagsSetDuringRun, setFlagsSetDuringRun] = (0, react_1.useState)(new Set());
+    // Use ref to track latest gameFlags to avoid stale closures
+    const gameFlagsRef = (0, react_1.useRef)(gameFlags);
+    (0, react_1.useEffect)(() => {
+        gameFlagsRef.current = gameFlags;
+    }, [gameFlags]);
+    // Process current node
+    (0, react_1.useEffect)(() => {
+        const node = dialogue.nodes[currentNodeId];
+        if (!node)
+            return;
+        // Update variable manager with current game flags (use ref to get latest)
+        Object.entries(gameFlagsRef.current).forEach(([key, value]) => {
+            variableManager.set(key, value);
+        });
+        // If it's a player node, just ensure typing is false and show choices
+        if (node.type === 'player') {
+            setIsTyping(false);
+            return;
+        }
+        // Process the node using the modular runner
+        setIsTyping(true);
+        const timer = setTimeout(() => {
+            // Update flags before processing
+            if (node.setFlags) {
+                // Update dialogue flags (temporary)
+                node.setFlags.forEach(flagId => {
+                    variableManager.addMemoryFlag(flagId);
+                });
+                // Update game flags (persistent)
+                if (flagSchema) {
+                    const gameFlagIds = node.setFlags.filter(flagId => {
+                        const flag = flagSchema.flags.find(f => f.id === flagId);
+                        return flag && flag.type !== 'dialogue';
+                    });
+                    if (gameFlagIds.length > 0) {
+                        const updated = (0, flag_manager_1.mergeFlagUpdates)(gameFlagsRef.current, gameFlagIds, flagSchema);
+                        setGameFlags(updated);
+                        // Update variable manager
+                        gameFlagIds.forEach(flagId => {
+                            const flag = flagSchema.flags.find(f => f.id === flagId);
+                            if (flag) {
+                                variableManager.set(flagId, flag.defaultValue ?? true);
+                            }
+                        });
+                        setFlagsSetDuringRun(prev => {
+                            const next = new Set(prev);
+                            gameFlagIds.forEach(f => next.add(f));
+                            return next;
+                        });
+                    }
+                }
+            }
+            // Process variable operations in content (e.g., <<set $var += 10>>)
+            (0, yarn_runner_1.processVariableOperationsInContent)(node.content, variableManager);
+            // Process the node
+            const result = (0, yarn_runner_1.processNode)(node, variableManager);
+            // Add to history if there's content
+            if (result.content) {
+                setHistory(prev => [...prev, {
+                        nodeId: node.id,
+                        type: 'npc',
+                        speaker: result.speaker,
+                        content: result.content
+                    }]);
+            }
+            // Update game flags from variable manager after operations
+            // Use functional update to avoid dependency issues
+            setGameFlags(prev => {
+                const updatedVars = variableManager.getAllVariables();
+                // Filter out undefined values and only update if there are changes
+                const definedVars = {};
+                for (const [key, value] of Object.entries(updatedVars)) {
+                    if (value !== undefined)
+                        definedVars[key] = value;
+                }
+                const hasChanges = Object.keys(definedVars).some(key => prev[key] !== definedVars[key]);
+                return hasChanges ? { ...prev, ...definedVars } : prev;
+            });
+            setIsTyping(false);
+            // Navigate to next node if valid
+            if (result.nextNodeId && (0, yarn_runner_1.isValidNextNode)(result.nextNodeId, dialogue.nodes)) {
+                setTimeout(() => setCurrentNodeId(result.nextNodeId), 300);
+            }
+        }, 500);
+        return () => clearTimeout(timer);
+    }, [currentNodeId, dialogue.startNodeId, flagSchema]); // Removed gameFlags and variableManager from deps
+    (0, react_1.useEffect)(() => {
+        chatEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+    }, [history, isTyping]);
+    const currentNode = dialogue.nodes[currentNodeId];
+    // Get available choices from processed node result
+    const processedResult = currentNode ? (0, yarn_runner_1.processNode)(currentNode, variableManager) : null;
+    const availableChoices = processedResult?.choices || [];
+    const handleChoice = (choice) => {
+        setHistory(prev => [...prev, {
+                nodeId: choice.id,
+                type: 'player',
+                content: choice.text
+            }]);
+        // Process variable operations in choice text
+        (0, yarn_runner_1.processVariableOperationsInContent)(choice.text, variableManager);
+        // Update game flags from variable manager after operations
+        const updatedVars = variableManager.getAllVariables();
+        const definedVars = {};
+        for (const [key, value] of Object.entries(updatedVars)) {
+            if (value !== undefined)
+                definedVars[key] = value;
+        }
+        setGameFlags(prev => ({ ...prev, ...definedVars }));
+        if (choice.setFlags) {
+            // Update dialogue flags (temporary)
+            choice.setFlags.forEach(flagId => {
+                variableManager.addMemoryFlag(flagId);
+            });
+            // Update game flags (persistent)
+            if (flagSchema) {
+                const gameFlagIds = choice.setFlags.filter(flagId => {
+                    const flag = flagSchema.flags.find(f => f.id === flagId);
+                    return flag && flag.type !== 'dialogue';
+                });
+                if (gameFlagIds.length > 0) {
+                    setGameFlags(prev => (0, flag_manager_1.mergeFlagUpdates)(prev, gameFlagIds, flagSchema));
+                    // Update variable manager
+                    gameFlagIds.forEach(flagId => {
+                        const flag = flagSchema.flags.find(f => f.id === flagId);
+                        if (flag) {
+                            variableManager.set(flagId, flag.defaultValue ?? true);
+                        }
+                    });
+                    setFlagsSetDuringRun(prev => {
+                        const next = new Set(prev);
+                        gameFlagIds.forEach(f => next.add(f));
+                        return next;
+                    });
+                }
+            }
+        }
+        // Only move to next node if it exists and is valid
+        if (choice.nextNodeId && (0, yarn_runner_1.isValidNextNode)(choice.nextNodeId, dialogue.nodes)) {
+            setCurrentNodeId(choice.nextNodeId);
+        }
+        else {
+            // Choice leads nowhere - dialogue complete
+            setIsTyping(false);
+        }
+    };
+    const handleRestart = () => {
+        setHistory([]);
+        variableManager.reset(initialGameFlags, new Set());
+        setGameFlags(initialGameFlags);
+        setFlagsSetDuringRun(new Set());
+        setCurrentNodeId(startNodeId || dialogue.startNodeId);
+    };
+    // Get all non-dialogue flags from schema
+    const gameFlagsList = (0, react_1.useMemo)(() => {
+        if (!flagSchema)
+            return [];
+        return flagSchema.flags.filter(f => f.type !== 'dialogue');
+    }, [flagSchema]);
+    const flagTypeColors = {
+        dialogue: 'bg-gray-500/20 text-gray-400 border-gray-500/30',
+        quest: 'bg-blue-500/20 text-blue-400 border-blue-500/30',
+        achievement: 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30',
+        item: 'bg-green-500/20 text-green-400 border-green-500/30',
+        stat: 'bg-purple-500/20 text-purple-400 border-purple-500/30',
+        title: 'bg-pink-500/20 text-pink-400 border-pink-500/30',
+        global: 'bg-orange-500/20 text-orange-400 border-orange-500/30',
+    };
+    return (react_1.default.createElement("main", { className: "flex-1 flex flex-col relative" },
+        flagSchema && (react_1.default.createElement("button", { onClick: () => setShowDebugPanel(!showDebugPanel), className: "absolute top-4 right-4 z-10 px-3 py-1.5 bg-[#1a1a2e] hover:bg-[#2a2a3e] border border-[#2a2a3e] hover:border-[#e94560] text-gray-400 hover:text-white text-xs rounded-lg transition-colors flex items-center gap-2", title: "Toggle Flag Debug Panel" },
+            react_1.default.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" },
+                react_1.default.createElement("rect", { x: "3", y: "3", width: "18", height: "18", rx: "2" }),
+                react_1.default.createElement("path", { d: "M9 9h6M9 15h6M9 12h6" })),
+            showDebugPanel ? 'Hide' : 'Debug',
+            " Flags")),
+        showDebugPanel && flagSchema && (react_1.default.createElement("div", { className: "absolute top-12 right-4 w-80 bg-[#0d0d14] border border-[#1a1a2e] rounded-lg shadow-xl z-20 max-h-[calc(100vh-8rem)] overflow-hidden flex flex-col" },
+            react_1.default.createElement("div", { className: "p-3 border-b border-[#1a1a2e] flex items-center justify-between" },
+                react_1.default.createElement("h3", { className: "text-sm font-semibold text-white" }, "Flag Debug Panel"),
+                react_1.default.createElement("button", { onClick: () => setShowDebugPanel(false), className: "p-1 text-gray-400 hover:text-white" },
+                    react_1.default.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" },
+                        react_1.default.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                        react_1.default.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" })))),
+            react_1.default.createElement("div", { className: "flex-1 overflow-y-auto p-3 space-y-4" },
+                flagsSetDuringRun.size > 0 && (react_1.default.createElement("div", null,
+                    react_1.default.createElement("h4", { className: "text-xs text-gray-500 uppercase mb-2" },
+                        "Flags Set This Run (",
+                        flagsSetDuringRun.size,
+                        ")"),
+                    react_1.default.createElement("div", { className: "space-y-1" }, Array.from(flagsSetDuringRun).map(flagId => {
+                        const flag = flagSchema.flags.find(f => f.id === flagId);
+                        if (!flag)
+                            return null;
+                        const value = gameFlags[flagId];
+                        return (react_1.default.createElement("div", { key: flagId, className: "bg-[#12121a] border border-[#2a2a3e] rounded px-2 py-1.5 text-xs" },
+                            react_1.default.createElement("div", { className: "flex items-center gap-2" },
+                                react_1.default.createElement("span", { className: `px-1.5 py-0.5 rounded text-[10px] border ${flagTypeColors[flag.type]}` }, flag.type),
+                                react_1.default.createElement("span", { className: "font-mono text-white flex-1 truncate" }, flagId),
+                                value !== undefined && (react_1.default.createElement("span", { className: "text-gray-400" },
+                                    "= ",
+                                    typeof value === 'boolean' ? (value ? 'true' : 'false') : String(value))))));
+                    })))),
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("h4", { className: "text-xs text-gray-500 uppercase mb-2" },
+                        "All Game Flags (",
+                        gameFlagsList.length,
+                        ")"),
+                    react_1.default.createElement("div", { className: "space-y-1 max-h-96 overflow-y-auto" }, gameFlagsList.map(flag => {
+                        const value = gameFlags[flag.id];
+                        const wasSet = flagsSetDuringRun.has(flag.id);
+                        const hasValue = value !== undefined;
+                        return (react_1.default.createElement("div", { key: flag.id, className: `bg-[#12121a] border rounded px-2 py-1.5 text-xs transition-colors ${wasSet ? 'border-[#e94560]/50 bg-[#e94560]/5' : 'border-[#2a2a3e]'}` },
+                            react_1.default.createElement("div", { className: "flex items-center gap-2 mb-1" },
+                                react_1.default.createElement("span", { className: `px-1.5 py-0.5 rounded text-[10px] border ${flagTypeColors[flag.type]}` }, flag.type),
+                                react_1.default.createElement("span", { className: "font-mono text-white flex-1 truncate text-[10px]" }, flag.id),
+                                wasSet && (react_1.default.createElement("span", { className: "text-[10px] px-1 py-0.5 bg-[#e94560]/20 text-[#e94560] rounded" }, "NEW"))),
+                            react_1.default.createElement("div", { className: "text-gray-400 text-[10px] truncate" }, flag.name),
+                            hasValue ? (react_1.default.createElement("div", { className: "mt-1 text-[10px] text-gray-300" },
+                                react_1.default.createElement("span", { className: "text-gray-500" }, "Value: "),
+                                react_1.default.createElement("span", { className: "font-mono" }, typeof value === 'boolean' ? (value ? 'true' : 'false') :
+                                    typeof value === 'number' ? value :
+                                        `"${value}"`))) : (react_1.default.createElement("div", { className: "mt-1 text-[10px] text-gray-600 italic" }, "Not set"))));
+                    })))))),
+        react_1.default.createElement("div", { className: "flex-1 overflow-y-auto p-4" },
+            react_1.default.createElement("div", { className: "max-w-2xl mx-auto space-y-4" },
+                history.map((entry, idx) => (react_1.default.createElement("div", { key: idx, className: `flex ${entry.type === 'player' ? 'justify-end' : 'justify-start'}` },
+                    react_1.default.createElement("div", { className: `max-w-[80%] rounded-2xl px-4 py-3 ${entry.type === 'player'
+                            ? 'bg-[#e94560] text-white rounded-br-md'
+                            : 'bg-[#1a1a2e] text-gray-100 rounded-bl-md'}` },
+                        entry.type === 'npc' && entry.speaker && (react_1.default.createElement("div", { className: "text-xs text-[#e94560] font-medium mb-1" }, entry.speaker)),
+                        react_1.default.createElement("div", { className: "whitespace-pre-wrap" }, entry.content))))),
+                isTyping && (react_1.default.createElement("div", { className: "flex justify-start" },
+                    react_1.default.createElement("div", { className: "bg-[#1a1a2e] rounded-2xl rounded-bl-md px-4 py-3" },
+                        react_1.default.createElement("div", { className: "flex gap-1" },
+                            react_1.default.createElement("span", { className: "w-2 h-2 bg-[#e94560] rounded-full animate-bounce", style: { animationDelay: '0ms' } }),
+                            react_1.default.createElement("span", { className: "w-2 h-2 bg-[#e94560] rounded-full animate-bounce", style: { animationDelay: '150ms' } }),
+                            react_1.default.createElement("span", { className: "w-2 h-2 bg-[#e94560] rounded-full animate-bounce", style: { animationDelay: '300ms' } }))))),
+                react_1.default.createElement("div", { ref: chatEndRef }))),
+        currentNode?.type === 'player' && !isTyping && availableChoices.length > 0 && (react_1.default.createElement("div", { className: "border-t border-[#1a1a2e] bg-[#0d0d14]/80 backdrop-blur-sm p-4" },
+            react_1.default.createElement("div", { className: "max-w-2xl mx-auto space-y-2" }, availableChoices.map((choice) => (react_1.default.createElement("button", { key: choice.id, onClick: () => handleChoice(choice), className: "w-full text-left px-4 py-3 rounded-lg border border-[#2a2a3e] hover:border-[#e94560] bg-[#12121a] hover:bg-[#1a1a2e] text-gray-200 transition-all group flex items-center justify-between" },
+                react_1.default.createElement("span", null, choice.text),
+                react_1.default.createElement("svg", { width: "18", height: "18", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2", className: "text-gray-600 group-hover:text-[#e94560] transition-colors" },
+                    react_1.default.createElement("polyline", { points: "9 18 15 12 9 6" })))))))),
+        currentNode?.type === 'npc' && !currentNode.nextNodeId && !isTyping && (react_1.default.createElement("div", { className: "border-t border-[#1a1a2e] bg-[#0d0d14]/80 backdrop-blur-sm p-4" },
+            react_1.default.createElement("div", { className: "max-w-2xl mx-auto text-center" },
+                react_1.default.createElement("p", { className: "text-gray-500 mb-3" }, "End of dialogue"),
+                react_1.default.createElement("button", { onClick: handleRestart, className: "px-4 py-2 bg-[#e94560] hover:bg-[#d63850] text-white rounded-lg transition-colors" }, "Play Again"))))));
+}

package/dist/components/PlayerNodeV2.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 PlayerNodeData {
+    node: DialogueNode;
+    flagSchema?: FlagSchema;
+    isDimmed?: boolean;
+    isInPath?: boolean;
+    layoutDirection?: LayoutDirection;
+    isStartNode?: boolean;
+    isEndNode?: boolean;
+}
+export declare function PlayerNodeV2({ data, selected }: NodeProps<PlayerNodeData>): React.JSX.Element;
+export {};

package/dist/components/PlayerNodeV2.js

@@ -0,0 +1,139 @@
+"use strict";
+var __createBinding = (this && this.__createBinding) || (Object.create ? (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    var desc = Object.getOwnPropertyDescriptor(m, k);
+    if (!desc || ("get" in desc ? !m.__esModule : desc.writable || desc.configurable)) {
+      desc = { enumerable: true, get: function() { return m[k]; } };
+    }
+    Object.defineProperty(o, k2, desc);
+}) : (function(o, m, k, k2) {
+    if (k2 === undefined) k2 = k;
+    o[k2] = m[k];
+}));
+var __setModuleDefault = (this && this.__setModuleDefault) || (Object.create ? (function(o, v) {
+    Object.defineProperty(o, "default", { enumerable: true, value: v });
+}) : function(o, v) {
+    o["default"] = v;
+});
+var __importStar = (this && this.__importStar) || (function () {
+    var ownKeys = function(o) {
+        ownKeys = Object.getOwnPropertyNames || function (o) {
+            var ar = [];
+            for (var k in o) if (Object.prototype.hasOwnProperty.call(o, k)) ar[ar.length] = k;
+            return ar;
+        };
+        return ownKeys(o);
+    };
+    return function (mod) {
+        if (mod && mod.__esModule) return mod;
+        var result = {};
+        if (mod != null) for (var k = ownKeys(mod), i = 0; i < k.length; i++) if (k[i] !== "default") __createBinding(result, mod, k[i]);
+        __setModuleDefault(result, mod);
+        return result;
+    };
+})();
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.PlayerNodeV2 = PlayerNodeV2;
+const react_1 = __importStar(require("react"));
+const reactflow_1 = require("reactflow");
+const lucide_react_1 = require("lucide-react");
+// Color scheme for choice edges (same as current implementation)
+const CHOICE_COLORS = ['#e94560', '#8b5cf6', '#06b6d4', '#22c55e', '#f59e0b'];
+function PlayerNodeV2({ data, selected }) {
+    const { node, flagSchema, isDimmed, isInPath, layoutDirection = 'TB', isStartNode, isEndNode } = data;
+    const choices = node.choices || [];
+    const updateNodeInternals = (0, reactflow_1.useUpdateNodeInternals)();
+    const headerRef = (0, react_1.useRef)(null);
+    const choiceRefs = (0, react_1.useRef)([]);
+    const [handlePositions, setHandlePositions] = (0, react_1.useState)([]);
+    // Handle positions based on layout direction
+    const isHorizontal = layoutDirection === 'LR';
+    const targetPosition = isHorizontal ? reactflow_1.Position.Left : reactflow_1.Position.Top;
+    const sourcePosition = isHorizontal ? reactflow_1.Position.Right : reactflow_1.Position.Bottom;
+    // Calculate handle positions based on actual rendered heights
+    (0, react_1.useEffect)(() => {
+        if (headerRef.current && choices.length > 0) {
+            const positions = [];
+            const headerHeight = headerRef.current.offsetHeight;
+            let cumulativeHeight = headerHeight;
+            choices.forEach((_choice, idx) => {
+                const choiceEl = choiceRefs.current[idx];
+                if (choiceEl) {
+                    const choiceHeight = choiceEl.offsetHeight;
+                    const handleY = cumulativeHeight + (choiceHeight / 2);
+                    positions.push(handleY);
+                    cumulativeHeight += choiceHeight;
+                }
+                else {
+                    // Fallback: estimate height
+                    const estimatedHeight = 32; // py-1.5 (12px) + text (~16px) + flags (~4px) = ~32px
+                    const handleY = cumulativeHeight + (estimatedHeight / 2);
+                    positions.push(handleY);
+                    cumulativeHeight += estimatedHeight;
+                }
+            });
+            setHandlePositions(positions);
+            // Update React Flow internals after positions are calculated
+            setTimeout(() => {
+                updateNodeInternals(node.id);
+            }, 0);
+        }
+    }, [choices, node.id, updateNodeInternals]);
+    // Update node internals when choices change
+    (0, react_1.useEffect)(() => {
+        updateNodeInternals(node.id);
+    }, [choices.length, node.id, updateNodeInternals]);
+    // Check if this is an end node (player node with no choices that have nextNodeId)
+    const hasNoOutgoingConnections = !choices.some(c => c.nextNodeId);
+    // Border color based on state
+    const borderClass = selected
+        ? 'border-df-player-selected shadow-lg shadow-df-glow'
+        : isStartNode
+            ? 'border-df-start shadow-md'
+            : isEndNode
+                ? 'border-df-end shadow-md'
+                : 'border-df-player-border';
+    return (react_1.default.createElement("div", { className: `rounded-lg border-2 transition-all duration-300 ${borderClass} ${isInPath ? 'border-df-player-selected/70' : ''} bg-df-player-bg min-w-[200px] relative`, style: isDimmed ? { opacity: 0.35, filter: 'saturate(0.3)' } : undefined },
+        isStartNode && (react_1.default.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_1.default.createElement(lucide_react_1.Play, { size: 8, fill: "currentColor" }),
+            " START")),
+        isEndNode && (react_1.default.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_1.default.createElement(lucide_react_1.Flag, { size: 8 }),
+            " END")),
+        react_1.default.createElement(reactflow_1.Handle, { type: "target", position: targetPosition, className: "!bg-df-control-bg !border-df-control-border !w-4 !h-4 !rounded-full" }),
+        react_1.default.createElement("div", { ref: headerRef, className: "px-3 py-1.5 border-b border-df-control-border bg-df-player-header flex items-center gap-2 rounded-t-lg" },
+            react_1.default.createElement(lucide_react_1.GitBranch, { size: 12, className: "text-df-player-selected" }),
+            react_1.default.createElement("span", { className: "text-[10px] font-mono text-df-text-secondary truncate flex-1" }, node.id),
+            react_1.default.createElement("span", { className: "text-[10px] text-df-text-tertiary" }, "PLAYER")),
+        react_1.default.createElement("div", { className: "border-t border-df-control-border" }, choices.map((choice, idx) => {
+            // Use calculated position or fallback
+            const choiceColor = CHOICE_COLORS[idx % CHOICE_COLORS.length];
+            return (react_1.default.createElement("div", { key: choice.id, ref: el => {
+                    choiceRefs.current[idx] = el;
+                }, className: "px-3 py-1.5 text-[10px] text-df-text-secondary flex items-center gap-2 border-b border-df-control-border last:border-0 relative" },
+                react_1.default.createElement("div", { className: "flex-1 min-w-0" },
+                    react_1.default.createElement("span", { className: "truncate block bg-df-base border border-df-control-border rounded px-2 py-1 text-df-text-primary" },
+                        "\"",
+                        choice.text || 'Empty choice',
+                        "\""),
+                    choice.setFlags && choice.setFlags.length > 0 && (react_1.default.createElement("div", { className: "mt-0.5 flex flex-wrap gap-0.5" }, choice.setFlags.map(flagId => {
+                        const flag = flagSchema?.flags.find(f => f.id === flagId);
+                        const flagType = flag?.type || 'dialogue';
+                        const colorClass = flagType === 'dialogue' ? 'bg-df-flag-dialogue-bg text-df-flag-dialogue border-df-flag-dialogue' :
+                            flagType === 'quest' ? 'bg-df-flag-quest-bg text-df-flag-quest border-df-flag-quest' :
+                                flagType === 'achievement' ? 'bg-df-flag-achievement-bg text-df-flag-achievement border-df-flag-achievement' :
+                                    flagType === 'item' ? 'bg-df-flag-item-bg text-df-flag-item border-df-flag-item' :
+                                        flagType === 'stat' ? 'bg-df-flag-stat-bg text-df-flag-stat border-df-flag-stat' :
+                                            flagType === 'title' ? 'bg-df-flag-title-bg text-df-flag-title border-df-flag-title' :
+                                                flagType === 'global' ? 'bg-df-flag-global-bg text-df-flag-global border-df-flag-global' :
+                                                    'bg-df-flag-dialogue-bg text-df-flag-dialogue border-df-flag-dialogue';
+                        return (react_1.default.createElement("span", { key: flagId, className: `text-[7px] px-0.5 py-0 rounded border ${colorClass}`, title: flag?.name || flagId }, flagType === 'dialogue' ? 't' : flagType[0]));
+                    })))),
+                react_1.default.createElement(reactflow_1.Handle, { type: "source", position: reactflow_1.Position.Right, id: `choice-${idx}`, style: {
+                        top: `50%`,
+                        transform: `translateY(-50%)`,
+                        right: '-6px',
+                        borderColor: choiceColor,
+                    }, className: "!bg-df-control-bg !border-2 hover:!border-df-player-selected hover:!bg-df-player-selected/20 !w-3 !h-3 !rounded-full" })));
+        }))));
+}

package/dist/components/ReactFlowPOC.d.ts

@@ -0,0 +1,61 @@
+/**
+ * Proof of Concept: React Flow Implementation with Custom Choice Edges
+ *
+ * This demonstrates how we can use React Flow's custom edges feature
+ * to implement our choice-based edge system.
+ *
+ * Key concepts:
+ * 1. Dynamic handles on PlayerNode (one handle per choice)
+ * 2. Custom ChoiceEdge component that colors based on choice index
+ * 3. Edge data stores choiceIndex and choiceId
+ *
+ * To use this, install: npm install reactflow
+ */
+import React from 'react';
+import { DialogueTree } from '../types';
+/**
+ * Custom Edge Component for Player Choice Connections
+ *
+ * This edge:
+ * - Colors based on choice index (from edge data)
+ * - Uses bezier path for smooth curves
+ * - Matches our current visual style
+ */
+/**
+ * NPC Node Component
+ *
+ * Features:
+ * - Single output handle at bottom
+ * - Speaker + content display
+ * - Matches current styling
+ */
+/**
+ * Player Node Component
+ *
+ * Features:
+ * - Dynamic handles: one per choice (positioned on right side)
+ * - Each handle positioned at choice's Y offset
+ * - Matches current styling
+ */
+/**
+ * Convert DialogueTree to React Flow format
+ */
+export declare function convertDialogueTreeToReactFlow(dialogue: DialogueTree): {
+    nodes: any[];
+    edges: any[];
+    nodeTypes: {};
+    edgeTypes: {};
+};
+/**
+ * Main React Flow Component (POC)
+ *
+ * Usage:
+ * ```tsx
+ * <ReactFlowProvider>
+ *   <ReactFlowPOC dialogue={dialogueTree} />
+ * </ReactFlowProvider>
+ * ```
+ */
+export declare function ReactFlowPOC({ dialogue }: {
+    dialogue: DialogueTree;
+}): React.JSX.Element;