@magicborn/dialogue-forge 0.1.0 → 0.1.1

package/dist/components/GuidePanel.js

@@ -399,9 +399,9 @@ const [gameState, setGameState] = useState<GameState>({
   }}
   flagSchema={flagSchema}
   // Event hooks
-  onNodeAdd={(node) => console.log('Node added:', node.id)}
-  onNodeDelete={(nodeId) => console.log('Node deleted:', nodeId)}
-  onConnect={(source, target) => console.log('Connected:', source, '->', target)}
+  onNodeAdd={(node) => {/* Example: handle node add */}}
+  onNodeDelete={(nodeId) => {/* Example: handle node delete */}}
+  onConnect={(source, target) => {/* Example: handle connect */}}
 />`, language: "typescript" }),
                 react_1.default.createElement("h3", { className: "text-lg font-semibold mt-6 mb-2 text-white" }, "6. Define Game State"),
                 react_1.default.createElement("p", { className: "text-gray-400 text-sm mb-2" }, "Game state can be any JSON object. Flags should represent the dialogue-relevant portion of your game state."),
@@ -465,21 +465,21 @@ const gameState: GameState = {
   }}
   // Event hooks
   onNodeEnter={(nodeId, node) => {
-    console.log('Entered node:', nodeId, node);
+    // Example: handle node enter
     // Trigger animations, sound effects, etc.
   }}
   onNodeExit={(nodeId, node) => {
-    console.log('Exited node:', nodeId, node);
+    // Example: handle node exit
   }}
   onChoiceSelect={(nodeId, choice) => {
-    console.log('Selected choice:', choice.text);
+    // Example: handle choice select
     // Track player decisions
   }}
   onDialogueStart={() => {
-    console.log('Dialogue started');
+    // Example: handle dialogue start
   }}
   onDialogueEnd={() => {
-    console.log('Dialogue ended');
+    // Example: handle dialogue end
   }}
 />`, language: "typescript" }),
                 react_1.default.createElement("h3", { className: "text-lg font-semibold mt-6 mb-2 text-white" }, "Complete Example"),
@@ -538,23 +538,23 @@ const dialogue = importFromYarn(yarnFile, 'Merchant');
   flagSchema={flagSchema}
   // Event hooks
   onNodeAdd={(node) => {
-    console.log('Node added:', node.id);
+    // Example: handle node add
     // Track node creation
   }}
   onNodeDelete={(nodeId) => {
-    console.log('Node deleted:', nodeId);
+    // Example: handle node delete
   }}
   onNodeUpdate={(nodeId, updates) => {
-    console.log('Node updated:', nodeId, updates);
+    // Example: handle node update
   }}
   onConnect={(sourceId, targetId, sourceHandle) => {
-    console.log('Connected:', sourceId, '->', targetId);
+    // Example: handle connect
   }}
   onDisconnect={(edgeId, sourceId, targetId) => {
-    console.log('Disconnected:', sourceId, '->', targetId);
+    // Example: handle disconnect
   }}
   onNodeSelect={(nodeId) => {
-    console.log('Node selected:', nodeId);
+    // Example: handle node select
   }}
 />
 
@@ -570,11 +570,11 @@ const dialogue = importFromYarn(yarnFile, 'Merchant');
     }));
   }}
   onNodeEnter={(nodeId, node) => {
-    console.log('Entered node:', nodeId);
+    // Example: handle node enter
     // Play animations, sound effects
   }}
   onChoiceSelect={(nodeId, choice) => {
-    console.log('Selected:', choice.text);
+    // Example: handle choice select
     // Track player decisions
   }}
 />`, language: "typescript" }),
@@ -1044,6 +1044,89 @@ await saveFile('dialogue.yarn', newYarn);`))))
                                 react_1.default.createElement("strong", { className: "text-white text-xs" }, "Square Selection"),
                                 react_1.default.createElement("p", { className: "text-gray-400 text-xs mt-1" }, "Selection box doesn't always capture all nodes within the selection area (deprioritized)")))))))
         },
+        characters: {
+            title: 'Characters',
+            content: (react_1.default.createElement("div", { className: "space-y-4 text-sm" },
+                react_1.default.createElement("p", { className: "text-gray-300" }, "Dialogue Forge supports character assignment for NPC and Player nodes. Characters are defined in your game state and can be selected from a searchable dropdown."),
+                react_1.default.createElement("h3", { className: "text-lg font-semibold mt-6 mb-2 text-white" }, "Character System"),
+                react_1.default.createElement("p", { className: "text-gray-300 mb-3" }, "Each node (NPC or Player) can be assigned a character from your game state. When a character is assigned:"),
+                react_1.default.createElement("ul", { className: "list-disc list-inside space-y-1 text-sm ml-2 text-gray-300" },
+                    react_1.default.createElement("li", null, "The character's avatar and name are displayed on the node in the graph"),
+                    react_1.default.createElement("li", null, "The character name is used as the speaker name"),
+                    react_1.default.createElement("li", null, "You can still override with a custom speaker name if needed")),
+                react_1.default.createElement("h3", { className: "text-lg font-semibold mt-6 mb-2 text-white" }, "Game State Structure"),
+                react_1.default.createElement("p", { className: "text-gray-300 mb-3" },
+                    "Characters should be defined in your game state under the ",
+                    react_1.default.createElement("code", { className: "bg-[#0d0d14] px-1 rounded" }, "characters"),
+                    " property:"),
+                react_1.default.createElement(CodeBlock_1.CodeBlock, { code: `interface GameState {
+  flags?: FlagState;
+  characters?: {
+    [characterId: string]: Character;
+  };
+}
+
+interface Character {
+  id: string;
+  name: string;
+  avatar?: string; // URL or emoji (e.g., "👤", "🧙", "/avatars/wizard.png")
+  description?: string;
+}`, language: "typescript" }),
+                react_1.default.createElement("h3", { className: "text-lg font-semibold mt-6 mb-2 text-white" }, "Using Characters"),
+                react_1.default.createElement("ol", { className: "list-decimal list-inside space-y-2 text-sm ml-2 text-gray-300" },
+                    react_1.default.createElement("li", null,
+                        react_1.default.createElement("strong", null, "Define characters"),
+                        " in your game state with ",
+                        react_1.default.createElement("code", { className: "bg-[#0d0d14] px-1 rounded" }, "id"),
+                        ", ",
+                        react_1.default.createElement("code", { className: "bg-[#0d0d14] px-1 rounded" }, "name"),
+                        ", and optionally ",
+                        react_1.default.createElement("code", { className: "bg-[#0d0d14] px-1 rounded" }, "avatar")),
+                    react_1.default.createElement("li", null,
+                        react_1.default.createElement("strong", null, "Pass characters"),
+                        " to ",
+                        react_1.default.createElement("code", { className: "bg-[#0d0d14] px-1 rounded" }, "DialogueEditorV2"),
+                        " via the ",
+                        react_1.default.createElement("code", { className: "bg-[#0d0d14] px-1 rounded" }, "characters"),
+                        " prop"),
+                    react_1.default.createElement("li", null,
+                        react_1.default.createElement("strong", null, "Select a character"),
+                        " in the Node Editor using the character dropdown (searchable combobox)"),
+                    react_1.default.createElement("li", null,
+                        react_1.default.createElement("strong", null, "View on graph"),
+                        " - The character's avatar and name appear on the node")),
+                react_1.default.createElement("h3", { className: "text-lg font-semibold mt-6 mb-2 text-white" }, "Example"),
+                react_1.default.createElement(CodeBlock_1.CodeBlock, { code: `// Game state with characters
+const gameState = {
+  flags: { reputation: 50 },
+  characters: {
+    stranger: {
+      id: 'stranger',
+      name: 'Mysterious Stranger',
+      avatar: '👤',
+      description: 'A cloaked figure'
+    },
+    player: {
+      id: 'player',
+      name: 'Player',
+      avatar: '🎮',
+      description: 'The player character'
+    }
+  }
+};
+
+// Pass to DialogueEditorV2
+<DialogueEditorV2
+  dialogue={dialogueTree}
+  characters={gameState.characters}
+  flagSchema={flagSchema}
+  onChange={setDialogueTree}
+/>`, language: "typescript" }),
+                react_1.default.createElement("div", { className: "bg-[#1a2a3e] border-l-4 border-blue-500 p-4 rounded mt-4" },
+                    react_1.default.createElement("p", { className: "text-gray-300 text-xs" },
+                        react_1.default.createElement("strong", null, "Note:"),
+                        " If a character is not assigned, you can still use a custom speaker name. The character system is optional but recommended for consistency across your dialogue system."))))
+        },
         theming: {
             title: 'Theming',
             content: (react_1.default.createElement("div", { className: "space-y-4 text-sm" },

package/dist/components/NPCNodeV2.d.ts

@@ -11,11 +11,13 @@
 import React from 'react';
 import { NodeProps } from 'reactflow';
 import { DialogueNode } from '../types';
+import { Character } from '../types/characters';
 import { FlagSchema } from '../types/flags';
 import { LayoutDirection } from '../utils/layout';
 interface NPCNodeData {
     node: DialogueNode;
     flagSchema?: FlagSchema;
+    characters?: Record<string, Character>;
     isDimmed?: boolean;
     isInPath?: boolean;
     layoutDirection?: LayoutDirection;

package/dist/components/NPCNodeV2.js

@@ -36,7 +36,11 @@ function getFlagColorClass(type) {
 // Component
 // ============================================================================
 function NPCNodeV2({ data, selected }) {
-    const { node, flagSchema, isDimmed, isInPath, layoutDirection = 'TB', isStartNode, isEndNode } = data;
+    const { node, flagSchema, characters = {}, isDimmed, isInPath, layoutDirection = 'TB', isStartNode, isEndNode } = data;
+    // Get character if characterId is set
+    const character = node.characterId ? characters[node.characterId] : undefined;
+    const displayName = character ? character.name : (node.speaker || 'NPC');
+    const avatar = character?.avatar || '👤';
     // Handle positions based on layout direction
     const isHorizontal = layoutDirection === 'LR';
     const targetPosition = isHorizontal ? reactflow_1.Position.Left : reactflow_1.Position.Top;
@@ -59,28 +63,35 @@ function NPCNodeV2({ data, selected }) {
     const contentPreview = node.content.length > 60
         ? node.content.slice(0, 60) + '...'
         : node.content;
-    return (react_1.default.createElement("div", { className: `rounded-lg border-2 transition-all duration-300 ${borderClass} ${isInPath ? 'border-df-node-selected/70' : ''} bg-df-npc-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")),
+    return (react_1.default.createElement("div", { className: `rounded-lg border-2 transition-all duration-300 ${borderClass} ${isInPath ? 'border-df-node-selected/70' : ''} bg-df-npc-bg min-w-[320px] max-w-[450px] relative overflow-hidden`, style: isDimmed ? { opacity: 0.35, filter: 'saturate(0.3)' } : undefined },
         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", { className: `px-3 py-1.5 border-b border-df-control-border flex items-center gap-2 rounded-t-lg ${headerBgClass}` },
-            react_1.default.createElement(lucide_react_1.MessageSquare, { size: 12, className: "text-df-npc-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" }, "NPC")),
-        react_1.default.createElement("div", { className: "px-3 py-2 min-h-[50px]" },
-            node.speaker && (react_1.default.createElement("div", { className: "text-[10px] text-df-npc-selected font-medium mb-1" }, node.speaker)),
-            react_1.default.createElement("div", { className: "text-xs text-df-text-primary line-clamp-2 bg-df-base border border-df-control-border rounded px-2 py-1" },
-                "\"",
-                contentPreview,
-                "\""),
-            node.setFlags && node.setFlags.length > 0 && (react_1.default.createElement("div", { className: "mt-1.5 flex flex-wrap gap-1" }, node.setFlags.map((flagId) => {
+        react_1.default.createElement("div", { className: `${headerBgClass} border-b-2 border-df-npc-border px-3 py-2.5 flex items-center gap-3 relative` },
+            react_1.default.createElement("div", { className: "w-14 h-14 rounded-full bg-df-npc-bg border-[3px] border-df-npc-border flex items-center justify-center text-3xl shadow-lg flex-shrink-0" }, avatar),
+            react_1.default.createElement("div", { className: "flex-1 min-w-0" },
+                react_1.default.createElement("h3", { className: "text-base font-bold text-df-text-primary truncate leading-tight" }, displayName)),
+            react_1.default.createElement("div", { className: "flex items-center gap-2 flex-shrink-0" },
+                react_1.default.createElement("div", { className: "flex items-center gap-1 px-2 py-1 rounded bg-df-base/50 border border-df-control-border", title: `Node ID: ${node.id}` },
+                    react_1.default.createElement(lucide_react_1.Hash, { size: 12, className: "text-df-text-secondary" }),
+                    react_1.default.createElement("span", { className: "text-[10px] font-mono text-df-text-secondary" }, node.id)),
+                react_1.default.createElement("div", { className: "flex items-center gap-1 px-2 py-1 rounded bg-df-npc-selected/20 border border-df-npc-selected/50", title: "NPC Node" },
+                    react_1.default.createElement(lucide_react_1.MessageSquare, { size: 14, className: "text-df-npc-selected" }),
+                    react_1.default.createElement("span", { className: "text-[10px] font-semibold text-df-npc-selected" }, "NPC"))),
+            isStartNode && (react_1.default.createElement("div", { className: "absolute top-1 right-1 bg-df-start text-df-text-primary text-[8px] font-bold px-1.5 py-0.5 rounded flex items-center gap-0.5 shadow-lg z-20" },
+                react_1.default.createElement(lucide_react_1.Play, { size: 8, fill: "currentColor" }),
+                " START")),
+            isEndNode && (react_1.default.createElement("div", { className: "absolute top-1 right-1 bg-df-end text-df-text-primary text-[8px] font-bold px-1.5 py-0.5 rounded flex items-center gap-0.5 shadow-lg z-20" },
+                react_1.default.createElement(lucide_react_1.Flag, { size: 8 }),
+                " END"))),
+        react_1.default.createElement("div", { className: "px-4 py-3" },
+            react_1.default.createElement("div", { className: "bg-df-elevated border border-df-control-border rounded-lg px-4 py-3 mb-2" },
+                react_1.default.createElement("p", { className: "text-sm text-df-text-primary leading-relaxed" },
+                    "\"",
+                    contentPreview,
+                    "\"")),
+            node.setFlags && node.setFlags.length > 0 && (react_1.default.createElement("div", { className: "flex flex-wrap gap-1" }, node.setFlags.map((flagId) => {
                 const flag = flagSchema?.flags.find((f) => f.id === flagId);
                 const flagType = flag?.type || 'dialogue';
-                return (react_1.default.createElement("span", { key: flagId, className: `text-[8px] px-1 py-0.5 rounded border ${getFlagColorClass(flagType)}`, title: flag?.name || flagId }, flagType === 'dialogue' ? 't' : flagType[0]));
+                return (react_1.default.createElement("span", { key: flagId, className: `text-[8px] px-1.5 py-0.5 rounded-full border ${getFlagColorClass(flagType)}`, title: flag?.name || flagId }, flagType === 'dialogue' ? 't' : flagType[0]));
             })))),
         react_1.default.createElement(reactflow_1.Handle, { type: "source", position: sourcePosition, id: "next", className: "!bg-df-control-bg !border-df-control-border !w-4 !h-4 !rounded-full hover:!border-df-npc-selected hover:!bg-df-npc-selected/20" })));
 }

package/dist/components/NodeEditor.d.ts

@@ -1,6 +1,7 @@
 import React from 'react';
 import { DialogueNode, DialogueTree, Choice } from '../types';
 import { FlagSchema } from '../types/flags';
+import { Character } from '../types/characters';
 interface NodeEditorProps {
     node: DialogueNode;
     dialogue: DialogueTree;
@@ -13,6 +14,7 @@ interface NodeEditorProps {
     onPlayFromHere?: (nodeId: string) => void;
     onFocusNode?: (nodeId: string) => void;
     flagSchema?: FlagSchema;
+    characters?: Record<string, Character>;
 }
-export declare function NodeEditor({ node, dialogue, onUpdate, onDelete, onAddChoice, onUpdateChoice, onRemoveChoice, onClose, onPlayFromHere, onFocusNode, flagSchema }: NodeEditorProps): React.JSX.Element;
+export declare function NodeEditor({ node, dialogue, onUpdate, onDelete, onAddChoice, onUpdateChoice, onRemoveChoice, onClose, onPlayFromHere, onFocusNode, flagSchema, characters, }: NodeEditorProps): React.JSX.Element;
 export {};

package/dist/components/NodeEditor.js

@@ -36,12 +36,13 @@ Object.defineProperty(exports, "__esModule", { value: true });
 exports.NodeEditor = NodeEditor;
 const react_1 = __importStar(require("react"));
 const FlagSelector_1 = require("./FlagSelector");
+const CharacterSelector_1 = require("./CharacterSelector");
 const constants_1 = require("../types/constants");
 const lucide_react_1 = require("lucide-react");
 const reactflow_converter_1 = require("../utils/reactflow-converter");
 const EdgeIcon_1 = require("./EdgeIcon");
 const ConditionAutocomplete_1 = require("./ConditionAutocomplete");
-function NodeEditor({ node, dialogue, onUpdate, onDelete, onAddChoice, onUpdateChoice, onRemoveChoice, onClose, onPlayFromHere, onFocusNode, flagSchema }) {
+function NodeEditor({ node, dialogue, onUpdate, onDelete, onAddChoice, onUpdateChoice, onRemoveChoice, onClose, onPlayFromHere, onFocusNode, flagSchema, characters = {}, }) {
     // Local state for condition input values (keyed by block id for conditional blocks, choice id for choices)
     const [conditionInputs, setConditionInputs] = (0, react_1.useState)({});
     const [debouncedConditionInputs, setDebouncedConditionInputs] = (0, react_1.useState)({});
@@ -347,11 +348,21 @@ function NodeEditor({ node, dialogue, onUpdate, onDelete, onAddChoice, onUpdateC
                     react_1.default.createElement("input", { value: node.id, disabled: true, className: "w-full bg-[#12121a] border border-[#2a2a3e] rounded px-2 py-1 text-xs text-gray-500 font-mono" })),
                 node.type === 'npc' && (react_1.default.createElement(react_1.default.Fragment, null,
                     react_1.default.createElement("div", null,
-                        react_1.default.createElement("label", { className: "text-[10px] text-gray-500 uppercase" }, "Speaker"),
+                        react_1.default.createElement("label", { className: "text-[10px] text-df-text-secondary uppercase" }, "Character"),
+                        react_1.default.createElement(CharacterSelector_1.CharacterSelector, { characters: characters, selectedCharacterId: node.characterId, onSelect: (characterId) => {
+                                const character = characterId ? characters[characterId] : undefined;
+                                onUpdate({
+                                    characterId,
+                                    speaker: character ? character.name : node.speaker, // Keep speaker as fallback
+                                });
+                            }, placeholder: "Select character...", className: "mb-2" }),
+                        react_1.default.createElement("div", { className: "text-[9px] text-df-text-tertiary mt-1" }, "Or enter custom speaker name below")),
+                    react_1.default.createElement("div", null,
+                        react_1.default.createElement("label", { className: "text-[10px] text-df-text-secondary uppercase" }, "Speaker (Custom)"),
                         react_1.default.createElement("div", { className: "flex items-center gap-2" },
-                            react_1.default.createElement("div", { className: "w-8 h-8 rounded-full bg-[#2a2a3e] border border-[#2a2a3e] flex items-center justify-center flex-shrink-0" },
-                                react_1.default.createElement(lucide_react_1.User, { size: 16, className: "text-gray-500" })),
-                            react_1.default.createElement("input", { type: "text", value: node.speaker || '', onChange: (e) => onUpdate({ speaker: e.target.value }), className: "flex-1 bg-df-elevated border border-df-control-border rounded px-2 py-1 text-sm text-df-text-primary focus:border-df-npc-selected outline-none", placeholder: "Character name" }))),
+                            react_1.default.createElement("div", { className: "w-8 h-8 rounded-full bg-df-control-bg border border-df-control-border flex items-center justify-center flex-shrink-0" },
+                                react_1.default.createElement(lucide_react_1.User, { size: 16, className: "text-df-text-secondary" })),
+                            react_1.default.createElement("input", { type: "text", value: node.speaker || '', onChange: (e) => onUpdate({ speaker: e.target.value }), className: "flex-1 bg-df-elevated border border-df-control-border rounded px-2 py-1 text-sm text-df-text-primary focus:border-df-npc-selected outline-none", placeholder: "Custom speaker name (optional)" }))),
                     react_1.default.createElement("div", null,
                         react_1.default.createElement("label", { className: "text-[10px] text-gray-500 uppercase" }, "Content"),
                         react_1.default.createElement("textarea", { value: node.content, onChange: (e) => onUpdate({ content: e.target.value }), className: "w-full bg-df-elevated border border-df-control-border rounded px-2 py-1 text-sm text-df-text-primary focus:border-df-npc-selected outline-none min-h-[100px] resize-y", placeholder: "What the character says..." })),
@@ -411,14 +422,22 @@ function NodeEditor({ node, dialogue, onUpdate, onDelete, onAddChoice, onUpdateC
                                 return (react_1.default.createElement("div", { key: block.id, className: `rounded p-2 space-y-2 ${styles.bg} ${styles.border} border-2` },
                                     react_1.default.createElement("div", { className: "flex items-center gap-2" },
                                         react_1.default.createElement("span", { className: `text-[9px] px-1.5 py-0.5 rounded ${styles.tagBg} ${styles.tagText} font-semibold` }, block.type === 'if' ? 'IF' : block.type === 'elseif' ? 'ELSE IF' : 'ELSE'),
-                                        react_1.default.createElement("div", { className: "flex items-center gap-2 flex-1" },
-                                            react_1.default.createElement("div", { className: "w-6 h-6 rounded-full bg-[#2a2a2a] flex items-center justify-center flex-shrink-0" },
-                                                react_1.default.createElement(lucide_react_1.User, { size: 12, className: "text-gray-400" })),
+                                        react_1.default.createElement("div", { className: "flex items-center gap-1.5 flex-1" },
+                                            react_1.default.createElement(CharacterSelector_1.CharacterSelector, { characters: characters, selectedCharacterId: block.characterId, onSelect: (characterId) => {
+                                                    const newBlocks = [...node.conditionalBlocks];
+                                                    const character = characterId ? characters[characterId] : undefined;
+                                                    newBlocks[idx] = {
+                                                        ...block,
+                                                        characterId,
+                                                        speaker: character ? character.name : block.speaker, // Keep speaker as fallback
+                                                    };
+                                                    onUpdate({ conditionalBlocks: newBlocks });
+                                                }, placeholder: "Speaker...", compact: true, className: "flex-1" }),
                                             react_1.default.createElement("input", { type: "text", value: block.speaker || '', onChange: (e) => {
                                                     const newBlocks = [...node.conditionalBlocks];
                                                     newBlocks[idx] = { ...block, speaker: e.target.value || undefined };
                                                     onUpdate({ conditionalBlocks: newBlocks });
-                                                }, className: `flex-1 bg-[#1a1a1a] border border-[#2a2a2a] rounded px-2 py-1 text-xs ${styles.text} focus:border-blue-500 outline-none`, placeholder: "Speaker (optional)" }))),
+                                                }, className: `flex-1 bg-df-elevated border border-df-control-border rounded px-1.5 py-0.5 text-[10px] text-df-text-primary focus:border-df-conditional-selected outline-none`, placeholder: "Custom name" }))),
                                     block.type !== 'else' && (() => {
                                         const parseCondition = (conditionStr) => {
                                             const conditions = [];
@@ -726,11 +745,21 @@ function NodeEditor({ node, dialogue, onUpdate, onDelete, onAddChoice, onUpdateC
                                     }, className: "text-xs px-2 py-1 bg-[#12121a] border border-[#2a2a3e] rounded text-gray-400 hover:text-gray-200" }, "+ Add Else"))))) : (react_1.default.createElement("div", { className: "text-xs text-gray-500 p-4 text-center border border-[#2a2a3e] rounded" }, "No conditional blocks. Add an \"If\" block to start."))))),
                 node.type === 'player' && (react_1.default.createElement("div", null,
                     react_1.default.createElement("div", null,
-                        react_1.default.createElement("label", { className: "text-[10px] text-gray-500 uppercase" }, "Speaker"),
+                        react_1.default.createElement("label", { className: "text-[10px] text-df-text-secondary uppercase" }, "Character"),
+                        react_1.default.createElement(CharacterSelector_1.CharacterSelector, { characters: characters, selectedCharacterId: node.characterId, onSelect: (characterId) => {
+                                const character = characterId ? characters[characterId] : undefined;
+                                onUpdate({
+                                    characterId,
+                                    speaker: character ? character.name : node.speaker, // Keep speaker as fallback
+                                });
+                            }, placeholder: "Select character...", className: "mb-2" }),
+                        react_1.default.createElement("div", { className: "text-[9px] text-df-text-tertiary mt-1" }, "Or enter custom speaker name below")),
+                    react_1.default.createElement("div", null,
+                        react_1.default.createElement("label", { className: "text-[10px] text-df-text-secondary uppercase" }, "Speaker (Custom)"),
                         react_1.default.createElement("div", { className: "flex items-center gap-2" },
-                            react_1.default.createElement("div", { className: "w-8 h-8 rounded-full bg-[#2a2a3e] border border-[#2a2a3e] flex items-center justify-center flex-shrink-0" },
-                                react_1.default.createElement(lucide_react_1.User, { size: 16, className: "text-gray-500" })),
-                            react_1.default.createElement("input", { type: "text", value: node.speaker || '', onChange: (e) => onUpdate({ speaker: e.target.value }), className: "flex-1 bg-[#12121a] border border-[#2a2a3e] rounded px-2 py-1 text-sm text-gray-200 focus:border-[#8b5cf6] outline-none", placeholder: "Character name (optional)" }))),
+                            react_1.default.createElement("div", { className: "w-8 h-8 rounded-full bg-df-control-bg border border-df-control-border flex items-center justify-center flex-shrink-0" },
+                                react_1.default.createElement(lucide_react_1.User, { size: 16, className: "text-df-text-secondary" })),
+                            react_1.default.createElement("input", { type: "text", value: node.speaker || '', onChange: (e) => onUpdate({ speaker: e.target.value }), className: "flex-1 bg-df-elevated border border-df-control-border rounded px-2 py-1 text-sm text-df-text-primary focus:border-df-player-selected outline-none", placeholder: "Custom speaker name (optional)" }))),
                     react_1.default.createElement("div", { className: "flex items-center justify-between mb-2 mt-4" },
                         react_1.default.createElement("label", { className: "text-[10px] text-gray-500 uppercase" }, "Choices"),
                         react_1.default.createElement("button", { onClick: onAddChoice, className: "text-[10px] text-[#e94560] hover:text-[#ff6b6b]" }, "+ Add")),

package/dist/components/PlayerNodeV2.d.ts

@@ -1,11 +1,13 @@
 import React from 'react';
 import { NodeProps } from 'reactflow';
 import { DialogueNode } from '../types';
+import { Character } from '../types/characters';
 import { FlagSchema } from '../types/flags';
 import { LayoutDirection } from '../utils/layout';
 interface PlayerNodeData {
     node: DialogueNode;
     flagSchema?: FlagSchema;
+    characters?: Record<string, Character>;
     isDimmed?: boolean;
     isInPath?: boolean;
     layoutDirection?: LayoutDirection;

package/dist/components/PlayerNodeV2.js

@@ -40,8 +40,12 @@ 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 { node, flagSchema, characters = {}, isDimmed, isInPath, layoutDirection = 'TB', isStartNode, isEndNode } = data;
     const choices = node.choices || [];
+    // Get character if characterId is set
+    const character = node.characterId ? characters[node.characterId] : undefined;
+    const displayName = character ? character.name : (node.speaker || 'Player');
+    const avatar = character?.avatar || '🎮';
     const updateNodeInternals = (0, reactflow_1.useUpdateNodeInternals)();
     const headerRef = (0, react_1.useRef)(null);
     const choiceRefs = (0, react_1.useRef)([]);
@@ -93,47 +97,62 @@ function PlayerNodeV2({ data, selected }) {
             : 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")),
+    // Header background for player nodes
+    const headerBgClass = isStartNode
+        ? 'bg-df-start-bg'
+        : isEndNode
+            ? 'bg-df-end-bg'
+            : 'bg-df-player-header';
+    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-[320px] max-w-[450px] relative overflow-hidden`, style: isDimmed ? { opacity: 0.35, filter: 'saturate(0.3)' } : undefined },
         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) => {
+        react_1.default.createElement("div", { ref: headerRef, className: `${headerBgClass} border-b-2 border-df-player-border px-3 py-2.5 flex items-center gap-3 relative` },
+            react_1.default.createElement("div", { className: "w-14 h-14 rounded-full bg-df-player-bg border-[3px] border-df-player-border flex items-center justify-center text-3xl shadow-lg flex-shrink-0" }, avatar),
+            react_1.default.createElement("div", { className: "flex-1 min-w-0" },
+                react_1.default.createElement("h3", { className: "text-base font-bold text-df-text-primary truncate leading-tight" }, displayName)),
+            react_1.default.createElement("div", { className: "flex items-center gap-2 flex-shrink-0" },
+                react_1.default.createElement("div", { className: "flex items-center gap-1 px-2 py-1 rounded bg-df-base/50 border border-df-control-border", title: `Node ID: ${node.id}` },
+                    react_1.default.createElement(lucide_react_1.Hash, { size: 12, className: "text-df-text-secondary" }),
+                    react_1.default.createElement("span", { className: "text-[10px] font-mono text-df-text-secondary" }, node.id)),
+                react_1.default.createElement("div", { className: "flex items-center gap-1 px-2 py-1 rounded bg-df-player-selected/20 border border-df-player-selected/50", title: "Player Node" },
+                    react_1.default.createElement(lucide_react_1.GitBranch, { size: 14, className: "text-df-player-selected" }),
+                    react_1.default.createElement("span", { className: "text-[10px] font-semibold text-df-player-selected" }, "PLAYER"))),
+            isStartNode && (react_1.default.createElement("div", { className: "absolute top-1 right-1 bg-df-start text-df-text-primary text-[8px] font-bold px-1.5 py-0.5 rounded flex items-center gap-0.5 shadow-lg z-20" },
+                react_1.default.createElement(lucide_react_1.Play, { size: 8, fill: "currentColor" }),
+                " START")),
+            isEndNode && (react_1.default.createElement("div", { className: "absolute top-1 right-1 bg-df-end text-df-text-primary text-[8px] font-bold px-1.5 py-0.5 rounded flex items-center gap-0.5 shadow-lg z-20" },
+                react_1.default.createElement(lucide_react_1.Flag, { size: 8 }),
+                " END"))),
+        react_1.default.createElement("div", { className: "px-4 py-3 space-y-2" }, 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" })));
-        }))));
+                }, className: "relative group" },
+                react_1.default.createElement("div", { className: "bg-df-elevated border border-df-control-border rounded-lg px-3 py-2 flex items-start gap-2 hover:border-df-player-selected/50 transition-colors" },
+                    react_1.default.createElement("div", { className: "flex-1 min-w-0" },
+                        react_1.default.createElement("p", { className: "text-sm text-df-text-primary leading-relaxed" },
+                            "\"",
+                            choice.text || 'Empty choice',
+                            "\""),
+                        choice.setFlags && choice.setFlags.length > 0 && (react_1.default.createElement("div", { className: "mt-1.5 flex flex-wrap gap-1" }, 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-[8px] px-1 py-0.5 rounded-full 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" }))));
+        })),
+        react_1.default.createElement(reactflow_1.Handle, { type: "source", position: sourcePosition, id: "next", className: "!bg-df-control-bg !border-df-control-border !w-4 !h-4 !rounded-full hover:!border-df-player-selected hover:!bg-df-player-selected/20" })));
 }

package/dist/components/ReactFlowPOC.js

@@ -271,17 +271,17 @@ function ReactFlowPOC({ dialogue }) {
     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 node 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 connection
     }, []);
     // Handle edge changes (delete, etc.)
     const onEdgesChange = (0, react_1.useCallback)((changes) => {
-        console.log('Edges changed:', changes);
+        // Handle edge changes
     }, []);
     return (react_1.default.createElement("div", { className: "w-full h-full" },
         react_1.default.createElement("div", { className: "p-8 text-gray-400" },

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

@@ -0,0 +1,15 @@
+/**
+ * CharacterSelector - Combobox with search for selecting characters
+ */
+import React from 'react';
+import { Character } from '../types/characters';
+interface CharacterSelectorProps {
+    characters?: Record<string, Character>;
+    selectedCharacterId?: string;
+    onSelect: (characterId: string | undefined) => void;
+    placeholder?: string;
+    className?: string;
+    compact?: boolean;
+}
+export declare function CharacterSelector({ characters, selectedCharacterId, onSelect, placeholder, className, compact, }: CharacterSelectorProps): React.JSX.Element;
+export {};