@magicborn/dialogue-forge 0.1.0

package/dist/components/ReactFlowPOC.js

@@ -0,0 +1,312 @@
+"use strict";
+/**
+ * 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
+ */
+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.convertDialogueTreeToReactFlow = convertDialogueTreeToReactFlow;
+exports.ReactFlowPOC = ReactFlowPOC;
+const react_1 = __importStar(require("react"));
+const constants_1 = require("../types/constants");
+// Color scheme for choice edges (same as current implementation)
+const CHOICE_COLORS = ['#e94560', '#8b5cf6', '#06b6d4', '#22c55e', '#f59e0b'];
+/**
+ * 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
+ */
+// function ChoiceEdge({ id, sourceX, sourceY, targetX, targetY, data }: EdgeProps) {
+//   const [edgePath] = getBezierPath({
+//     sourceX,
+//     sourceY,
+//     targetX,
+//     targetY,
+//   });
+// 
+//   const choiceIndex = data?.choiceIndex ?? 0;
+//   const color = CHOICE_COLORS[choiceIndex % CHOICE_COLORS.length];
+// 
+//   return (
+//     <>
+//       <BaseEdge 
+//         id={id} 
+//         path={edgePath}
+//         style={{ stroke: color, strokeWidth: 2, opacity: 0.7 }}
+//         markerEnd={{
+//           type: 'arrowclosed',
+//           color: color,
+//         }}
+//       />
+//     </>
+//   );
+// }
+/**
+ * NPC Node Component
+ *
+ * Features:
+ * - Single output handle at bottom
+ * - Speaker + content display
+ * - Matches current styling
+ */
+// function NPCNode({ data, selected }: NodeProps) {
+//   const node = data.node as DialogueNode;
+//   
+//   return (
+//     <div className={`rounded-lg border-2 transition-all ${
+//       selected ? 'border-[#e94560] shadow-lg shadow-[#e94560]/20' : 'border-[#2a2a3e]'
+//     } bg-[#1a1a2e] min-w-[200px]`}>
+//       {/* Input handle at top */}
+//       <Handle type="target" position={Position.Top} className="!bg-[#2a2a3e] !border-[#4a4a6a]" />
+//       
+//       {/* Header */}
+//       <div className="px-3 py-1.5 border-b border-[#2a2a3e] bg-[#12121a] flex items-center gap-2 rounded-t-lg">
+//         <span className="text-[10px] font-mono text-gray-500 truncate flex-1">{node.id}</span>
+//         <span className="text-[10px] text-gray-600">NPC</span>
+//       </div>
+//       
+//       {/* Content */}
+//       <div className="px-3 py-2 min-h-[50px]">
+//         {node.speaker && (
+//           <div className="text-[10px] text-[#e94560] font-medium">{node.speaker}</div>
+//         )}
+//         <div className="text-xs text-gray-400 line-clamp-2">
+//           {node.content.slice(0, 60) + (node.content.length > 60 ? '...' : '')}
+//         </div>
+//       </div>
+//       
+//       {/* Output handle at bottom (for nextNodeId connection) */}
+//       {node.nextNodeId && (
+//         <Handle 
+//           type="source" 
+//           position={Position.Bottom} 
+//           className="!bg-[#2a2a3e] !border-[#4a4a6a] !w-4 !h-4"
+//           id="next"
+//         />
+//       )}
+//     </div>
+//   );
+// }
+/**
+ * Player Node Component
+ *
+ * Features:
+ * - Dynamic handles: one per choice (positioned on right side)
+ * - Each handle positioned at choice's Y offset
+ * - Matches current styling
+ */
+// function PlayerNode({ data, selected }: NodeProps) {
+//   const node = data.node as DialogueNode;
+//   const choices = node.choices || [];
+//   
+//   return (
+//     <div className={`rounded-lg border-2 transition-all ${
+//       selected ? 'border-[#e94560] shadow-lg shadow-[#e94560]/20' : 'border-[#2a2a3e]'
+//     } bg-[#1e1e3a] min-w-[200px]`}>
+//       {/* Input handle at top */}
+//       <Handle type="target" position={Position.Top} className="!bg-[#2a2a3e] !border-[#4a4a6a]" />
+//       
+//       {/* Header */}
+//       <div className="px-3 py-1.5 border-b border-[#2a2a3e] bg-[#16162a] flex items-center gap-2 rounded-t-lg">
+//         <span className="text-[10px] font-mono text-gray-500 truncate flex-1">{node.id}</span>
+//         <span className="text-[10px] text-gray-600">PLAYER</span>
+//       </div>
+//       
+//       {/* Choices */}
+//       <div className="border-t border-[#2a2a3e]">
+//         {choices.map((choice, idx) => {
+//           const color = CHOICE_COLORS[idx % CHOICE_COLORS.length];
+//           // Calculate Y position: base offset + choice index * height
+//           const handleY = 20 + idx * 24; // Matches current: fromY + 10 + idx * 24
+//           
+//           return (
+//             <div 
+//               key={choice.id} 
+//               className="px-3 py-1 text-[10px] text-gray-400 flex items-center gap-2 border-b border-[#2a2a3e] last:border-0 relative"
+//               style={{ minHeight: 24 }}
+//             >
+//               <div className="flex-1 min-w-0">
+//                 <span className="truncate block">{choice.text.slice(0, 25)}...</span>
+//               </div>
+//               
+//               {/* Dynamic handle for this choice */}
+//               <Handle
+//                 type="source"
+//                 position={Position.Right}
+//                 id={`choice-${idx}`}
+//                 style={{ 
+//                   top: `${handleY}px`,
+//                   right: '-6px',
+//                   background: color,
+//                   borderColor: color,
+//                   width: '12px',
+//                   height: '12px',
+//                 }}
+//                 className="!bg-[#2a2a3e] !border-2 hover:!border-[#e94560] hover:!bg-[#e94560]/20"
+//               />
+//             </div>
+//           );
+//         })}
+//       </div>
+//     </div>
+//   );
+// }
+/**
+ * Convert DialogueTree to React Flow format
+ */
+function convertDialogueTreeToReactFlow(dialogue) {
+    const nodes = [];
+    const edges = [];
+    // Define node types
+    const nodeTypes = {
+    // 'npc': NPCNode,
+    // 'player': PlayerNode,
+    };
+    // Define edge types
+    const edgeTypes = {
+    // 'choice': ChoiceEdge,
+    };
+    // Convert nodes
+    Object.values(dialogue.nodes).forEach(node => {
+        nodes.push({
+            id: node.id,
+            type: node.type, // 'npc' or 'player'
+            position: { x: node.x, y: node.y },
+            data: { node },
+            selected: false,
+        });
+    });
+    // Convert edges
+    Object.values(dialogue.nodes).forEach(node => {
+        if (node.type === constants_1.NODE_TYPE.NPC && node.nextNodeId) {
+            // NPC -> next node (single connection)
+            edges.push({
+                id: `${node.id}-next`,
+                source: node.id,
+                target: node.nextNodeId,
+                sourceHandle: 'next',
+                type: 'default', // Use default edge for NPC connections
+                style: { stroke: '#4a4a6a', strokeWidth: 2 },
+            });
+        }
+        if (node.type === constants_1.NODE_TYPE.PLAYER && node.choices) {
+            // Player -> multiple choices (one edge per choice)
+            node.choices.forEach((choice, idx) => {
+                if (choice.nextNodeId) {
+                    edges.push({
+                        id: `${node.id}-choice-${idx}`,
+                        source: node.id,
+                        target: choice.nextNodeId,
+                        sourceHandle: `choice-${idx}`, // Connect to specific choice handle
+                        type: 'choice', // Use custom ChoiceEdge
+                        data: {
+                            choiceIndex: idx,
+                            choiceId: choice.id,
+                        },
+                    });
+                }
+            });
+        }
+    });
+    return { nodes, edges, nodeTypes, edgeTypes };
+}
+/**
+ * Main React Flow Component (POC)
+ *
+ * Usage:
+ * ```tsx
+ * <ReactFlowProvider>
+ *   <ReactFlowPOC dialogue={dialogueTree} />
+ * </ReactFlowProvider>
+ * ```
+ */
+function ReactFlowPOC({ dialogue }) {
+    // Convert dialogue to React Flow format
+    const { nodes, edges, nodeTypes, edgeTypes } = (0, react_1.useMemo)(() => convertDialogueTreeToReactFlow(dialogue), [dialogue]);
+    // Handle node changes (drag, etc.)
+    const onNodesChange = (0, react_1.useCallback)((changes) => {
+        // Update dialogue tree positions
+        // This would sync back to our DialogueTree structure
+        console.log('Nodes changed:', changes);
+    }, []);
+    // Handle edge connections
+    const onConnect = (0, react_1.useCallback)((connection) => {
+        // Handle new edge connections
+        // This would update our DialogueTree structure
+        console.log('Connected:', connection);
+    }, []);
+    // Handle edge changes (delete, etc.)
+    const onEdgesChange = (0, react_1.useCallback)((changes) => {
+        console.log('Edges changed:', changes);
+    }, []);
+    return (react_1.default.createElement("div", { className: "w-full h-full" },
+        react_1.default.createElement("div", { className: "p-8 text-gray-400" },
+            react_1.default.createElement("h2", { className: "text-xl font-bold mb-4 text-white" }, "React Flow POC"),
+            react_1.default.createElement("p", { className: "mb-4" }, "This is a proof of concept for migrating to React Flow."),
+            react_1.default.createElement("p", { className: "mb-4" }, "To use this:"),
+            react_1.default.createElement("ol", { className: "list-decimal list-inside space-y-2 mb-4" },
+                react_1.default.createElement("li", null,
+                    "Install React Flow: ",
+                    react_1.default.createElement("code", { className: "bg-[#1a1a2e] px-2 py-1 rounded" }, "npm install reactflow")),
+                react_1.default.createElement("li", null, "Uncomment the React Flow imports and components"),
+                react_1.default.createElement("li", null, "Test with your dialogue tree")),
+            react_1.default.createElement("div", { className: "mt-8 p-4 bg-[#1a1a2e] rounded" },
+                react_1.default.createElement("h3", { className: "font-semibold mb-2" }, "Key Features:"),
+                react_1.default.createElement("ul", { className: "list-disc list-inside space-y-1 text-sm" },
+                    react_1.default.createElement("li", null, "\u2705 Custom ChoiceEdge component with color-coded edges"),
+                    react_1.default.createElement("li", null, "\u2705 Dynamic handles on PlayerNode (one per choice)"),
+                    react_1.default.createElement("li", null, "\u2705 NPCNode with single output handle"),
+                    react_1.default.createElement("li", null, "\u2705 Conversion functions (DialogueTree \u2194 React Flow)"),
+                    react_1.default.createElement("li", null, "\u2705 Matches current visual style"))),
+            react_1.default.createElement("div", { className: "mt-4 p-4 bg-[#1a1a2e] rounded" },
+                react_1.default.createElement("h3", { className: "font-semibold mb-2" }, "Current Stats:"),
+                react_1.default.createElement("p", { className: "text-sm" },
+                    "Nodes: ",
+                    nodes.length,
+                    ", Edges: ",
+                    edges.length)))));
+}

package/dist/components/ScenePlayer.d.ts

@@ -0,0 +1,18 @@
+import React from 'react';
+import { DialogueTree, DialogueNode, Choice } from '../types';
+import { FlagState, DialogueResult } from '../types/game-state';
+import { type FlattenConfig } from '../utils/game-state-flattener';
+export interface ScenePlayerProps {
+    dialogue: DialogueTree;
+    gameState: Record<string, any>;
+    startNodeId?: string;
+    onComplete: (result: DialogueResult) => void;
+    onFlagUpdate?: (flags: FlagState) => void;
+    flattenConfig?: FlattenConfig;
+    onNodeEnter?: (nodeId: string, node: DialogueNode) => void;
+    onNodeExit?: (nodeId: string, node: DialogueNode) => void;
+    onChoiceSelect?: (nodeId: string, choice: Choice) => void;
+    onDialogueStart?: () => void;
+    onDialogueEnd?: () => void;
+}
+export declare function ScenePlayer({ dialogue, gameState, startNodeId, onComplete, onFlagUpdate, flattenConfig, onNodeEnter, onNodeExit, onChoiceSelect, onDialogueStart, onDialogueEnd, }: ScenePlayerProps): React.JSX.Element;

package/dist/components/ScenePlayer.js

@@ -0,0 +1,196 @@
+"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.ScenePlayer = ScenePlayer;
+const react_1 = __importStar(require("react"));
+const flag_manager_1 = require("../lib/flag-manager");
+const game_state_flattener_1 = require("../utils/game-state-flattener");
+function ScenePlayer({ dialogue, gameState, startNodeId, onComplete, onFlagUpdate, flattenConfig, onNodeEnter, onNodeExit, onChoiceSelect, onDialogueStart, onDialogueEnd, }) {
+    // Validate and extract flags from gameState
+    const initialFlags = (0, react_1.useMemo)(() => {
+        try {
+            (0, game_state_flattener_1.validateGameState)(gameState);
+            return (0, game_state_flattener_1.extractFlagsFromGameState)(gameState, flattenConfig);
+        }
+        catch (error) {
+            console.error('ScenePlayer: Invalid gameState', error);
+            throw error;
+        }
+    }, [gameState, flattenConfig]);
+    const [currentNodeId, setCurrentNodeId] = (0, react_1.useState)(startNodeId || dialogue.startNodeId);
+    const [flags, setFlags] = (0, react_1.useState)(initialFlags);
+    const [history, setHistory] = (0, react_1.useState)([]);
+    const [isTyping, setIsTyping] = (0, react_1.useState)(false);
+    const [visitedNodes, setVisitedNodes] = (0, react_1.useState)(new Set());
+    const chatEndRef = (0, react_1.useRef)(null);
+    // Re-extract flags when gameState changes
+    (0, react_1.useEffect)(() => {
+        try {
+            (0, game_state_flattener_1.validateGameState)(gameState);
+            const newFlags = (0, game_state_flattener_1.extractFlagsFromGameState)(gameState, flattenConfig);
+            setFlags(newFlags);
+        }
+        catch (error) {
+            console.error('ScenePlayer: Failed to update flags from gameState', error);
+        }
+    }, [gameState, flattenConfig]);
+    // Initialize dialogue
+    (0, react_1.useEffect)(() => {
+        if (currentNodeId === dialogue.startNodeId) {
+            onDialogueStart?.();
+        }
+    }, []); // Only on mount
+    // Process current node
+    (0, react_1.useEffect)(() => {
+        const node = dialogue.nodes[currentNodeId];
+        if (!node)
+            return;
+        // Call onNodeEnter hook
+        onNodeEnter?.(currentNodeId, node);
+        if (node.type === 'npc') {
+            setIsTyping(true);
+            const timer = setTimeout(() => {
+                // Mark as visited
+                setVisitedNodes(prev => new Set([...prev, node.id]));
+                // Update flags
+                if (node.setFlags && node.setFlags.length > 0) {
+                    const updated = (0, flag_manager_1.mergeFlagUpdates)(flags, node.setFlags);
+                    setFlags(updated);
+                    onFlagUpdate?.(updated);
+                }
+                // Add to history
+                setHistory(prev => [...prev, {
+                        nodeId: node.id,
+                        type: 'npc',
+                        speaker: node.speaker,
+                        content: node.content
+                    }]);
+                setIsTyping(false);
+                // Call onNodeExit before moving to next
+                onNodeExit?.(currentNodeId, node);
+                // Auto-advance if there's a next node
+                if (node.nextNodeId) {
+                    setTimeout(() => setCurrentNodeId(node.nextNodeId), 300);
+                }
+                else {
+                    // Dialogue complete
+                    onDialogueEnd?.();
+                    onComplete({
+                        updatedFlags: flags,
+                        dialogueTree: dialogue,
+                        completedNodeIds: Array.from(visitedNodes)
+                    });
+                }
+            }, 500);
+            return () => clearTimeout(timer);
+        }
+    }, [currentNodeId, dialogue, flags, onNodeEnter, onNodeExit, onDialogueEnd, onComplete, onFlagUpdate]);
+    (0, react_1.useEffect)(() => {
+        chatEndRef.current?.scrollIntoView({ behavior: 'smooth' });
+    }, [history, isTyping]);
+    const currentNode = dialogue.nodes[currentNodeId];
+    // Filter choices based on conditions and flags
+    const availableChoices = currentNode?.choices?.filter(choice => {
+        if (!choice.conditions)
+            return true;
+        return choice.conditions.every(cond => {
+            const flagValue = flags[cond.flag];
+            const hasFlag = flagValue !== undefined && flagValue !== false && flagValue !== 0 && flagValue !== '';
+            return cond.operator === 'is_set' ? hasFlag : !hasFlag;
+        });
+    }) || [];
+    const handleChoice = (choice) => {
+        const currentNode = dialogue.nodes[currentNodeId];
+        // Call onChoiceSelect hook
+        onChoiceSelect?.(currentNodeId, choice);
+        // Call onNodeExit for current player node
+        if (currentNode) {
+            onNodeExit?.(currentNodeId, currentNode);
+        }
+        // Add to history
+        setHistory(prev => [...prev, {
+                nodeId: choice.id,
+                type: 'player',
+                content: choice.text
+            }]);
+        // Update flags
+        if (choice.setFlags && choice.setFlags.length > 0) {
+            const updated = (0, flag_manager_1.mergeFlagUpdates)(flags, choice.setFlags);
+            setFlags(updated);
+            onFlagUpdate?.(updated);
+        }
+        // Move to next node
+        if (choice.nextNodeId) {
+            setCurrentNodeId(choice.nextNodeId);
+        }
+        else {
+            // Choice leads nowhere - dialogue complete
+            onComplete({
+                updatedFlags: flags,
+                dialogueTree: dialogue,
+                completedNodeIds: Array.from(visitedNodes)
+            });
+        }
+    };
+    return (react_1.default.createElement("div", { className: "flex-1 flex flex-col" },
+        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" }, "Dialogue complete"),
+                react_1.default.createElement("button", { onClick: () => onComplete({
+                        updatedFlags: flags,
+                        dialogueTree: dialogue,
+                        completedNodeIds: Array.from(visitedNodes)
+                    }), className: "px-4 py-2 bg-[#e94560] hover:bg-[#d63850] text-white rounded-lg transition-colors" }, "Close"))))));
+}

package/dist/components/YarnView.d.ts

@@ -0,0 +1,9 @@
+import React from 'react';
+import { DialogueTree } from '../types';
+interface YarnViewProps {
+    dialogue: DialogueTree;
+    onExport: () => void;
+    onImport?: (yarn: string) => void;
+}
+export declare function YarnView({ dialogue, onExport, onImport }: YarnViewProps): React.JSX.Element;
+export {};

package/dist/components/YarnView.js

@@ -0,0 +1,45 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.YarnView = YarnView;
+const react_1 = __importDefault(require("react"));
+const yarn_converter_1 = require("../lib/yarn-converter");
+function YarnView({ dialogue, onExport, onImport }) {
+    const fileInputRef = react_1.default.useRef(null);
+    const handleImport = (e) => {
+        const file = e.target.files?.[0];
+        if (!file)
+            return;
+        const reader = new FileReader();
+        reader.onload = (ev) => {
+            const content = ev.target?.result;
+            if (onImport) {
+                onImport(content);
+            }
+        };
+        reader.readAsText(file);
+        e.target.value = '';
+    };
+    return (react_1.default.createElement("main", { className: "flex-1 flex flex-col bg-[#0d0d14] overflow-hidden" },
+        react_1.default.createElement("div", { className: "border-b border-[#1a1a2e] px-4 py-2 flex items-center justify-between flex-shrink-0" },
+            react_1.default.createElement("span", { className: "text-sm text-gray-400" }, "Yarn Spinner Output"),
+            react_1.default.createElement("div", { className: "flex items-center gap-2" },
+                onImport && (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement("button", { onClick: () => fileInputRef.current?.click(), className: "px-3 py-1.5 bg-[#2a2a3e] hover:bg-[#3a3a4e] text-gray-300 text-sm rounded flex items-center gap-2" },
+                        react_1.default.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" },
+                            react_1.default.createElement("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+                            react_1.default.createElement("polyline", { points: "17 8 12 3 7 8" }),
+                            react_1.default.createElement("line", { x1: "12", y1: "3", x2: "12", y2: "15" })),
+                        "Import .yarn"),
+                    react_1.default.createElement("input", { ref: fileInputRef, type: "file", accept: ".yarn", onChange: handleImport, className: "hidden" }))),
+                react_1.default.createElement("button", { onClick: onExport, className: "px-3 py-1.5 bg-[#e94560] hover:bg-[#d63850] text-white text-sm rounded flex items-center gap-2" },
+                    react_1.default.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" },
+                        react_1.default.createElement("path", { d: "M21 15v4a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2v-4" }),
+                        react_1.default.createElement("polyline", { points: "7 10 12 15 17 10" }),
+                        react_1.default.createElement("line", { x1: "12", y1: "15", x2: "12", y2: "3" })),
+                    "Download .yarn"))),
+        react_1.default.createElement("div", { className: "flex-1 overflow-y-auto p-4 min-h-0" },
+            react_1.default.createElement("pre", { className: "font-mono text-sm text-gray-300 whitespace-pre-wrap bg-[#08080c] rounded-lg p-4 border border-[#1a1a2e]" }, (0, yarn_converter_1.exportToYarn)(dialogue)))));
+}

package/dist/components/ZoomControls.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+interface ZoomControlsProps {
+    scale: number;
+    onZoomIn: () => void;
+    onZoomOut: () => void;
+    onZoomFit: () => void;
+    onZoomToSelection?: () => void;
+    className?: string;
+}
+export declare function ZoomControls({ scale, onZoomIn, onZoomOut, onZoomFit, onZoomToSelection, className }: ZoomControlsProps): React.JSX.Element;
+export {};

package/dist/components/ZoomControls.js

@@ -0,0 +1,34 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ZoomControls = ZoomControls;
+const react_1 = __importDefault(require("react"));
+function ZoomControls({ scale, onZoomIn, onZoomOut, onZoomFit, onZoomToSelection, className }) {
+    const zoomPercent = Math.round(scale * 100);
+    return (react_1.default.createElement("div", { className: `flex flex-col gap-1 ${className}` },
+        react_1.default.createElement("div", { className: "bg-[#0d0d14] border border-[#2a2a3e] rounded px-2 py-1 text-xs text-gray-400 text-center mb-1" },
+            zoomPercent,
+            "%"),
+        react_1.default.createElement("div", { className: "flex flex-col gap-1 bg-[#0d0d14] border border-[#2a2a3e] rounded-lg p-1" },
+            react_1.default.createElement("button", { onClick: onZoomIn, className: "p-1.5 hover:bg-[#1a1a2e] rounded text-gray-400 hover:text-white transition-colors", title: "Zoom In (Ctrl +)" },
+                react_1.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" },
+                    react_1.default.createElement("circle", { cx: "11", cy: "11", r: "8" }),
+                    react_1.default.createElement("line", { x1: "11", y1: "8", x2: "11", y2: "14" }),
+                    react_1.default.createElement("line", { x1: "8", y1: "11", x2: "14", y2: "11" }))),
+            react_1.default.createElement("button", { onClick: onZoomOut, className: "p-1.5 hover:bg-[#1a1a2e] rounded text-gray-400 hover:text-white transition-colors", title: "Zoom Out (Ctrl -)" },
+                react_1.default.createElement("svg", { width: "16", height: "16", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" },
+                    react_1.default.createElement("circle", { cx: "11", cy: "11", r: "8" }),
+                    react_1.default.createElement("line", { x1: "8", y1: "11", x2: "14", y2: "11" }))),
+            react_1.default.createElement("div", { className: "h-px bg-[#2a2a3e] my-1" }),
+            react_1.default.createElement("button", { onClick: onZoomFit, className: "p-1.5 hover:bg-[#1a1a2e] rounded text-gray-400 hover:text-white transition-colors", title: "Zoom to Fit (Ctrl 0)" },
+                react_1.default.createElement("svg", { width: "16", height: "16", 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: "M8 8h8v8" }))),
+            onZoomToSelection && (react_1.default.createElement("button", { onClick: onZoomToSelection, className: "p-1.5 hover:bg-[#1a1a2e] rounded text-gray-400 hover:text-white transition-colors", title: "Zoom to Selection" },
+                react_1.default.createElement("svg", { width: "16", height: "16", 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: "M8 8h8v8" }),
+                    react_1.default.createElement("circle", { cx: "12", cy: "12", r: "2" })))))));
+}

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

@@ -0,0 +1,3 @@
+import React from 'react';
+import { EdgeProps } from 'reactflow';
+export declare function ChoiceEdgeV2({ id, sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition, data, selected, }: EdgeProps): React.JSX.Element;