@magicborn/dialogue-forge 0.1.0 → 0.1.2

package/dist/esm/components/NPCNodeV2.js

@@ -10,7 +10,7 @@
  */
 import React from 'react';
 import { Handle, Position } from 'reactflow';
-import { MessageSquare, Play, Flag } from 'lucide-react';
+import { MessageSquare, Play, Flag, Hash } from 'lucide-react';
 // ============================================================================
 // Styles
 // ============================================================================
@@ -30,7 +30,11 @@ function getFlagColorClass(type) {
 // Component
 // ============================================================================
 export 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 ? Position.Left : Position.Top;
@@ -53,28 +57,35 @@ export function NPCNodeV2({ data, selected }) {
     const contentPreview = node.content.length > 60
         ? node.content.slice(0, 60) + '...'
         : node.content;
-    return (React.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.createElement("div", { className: "absolute -top-2 -left-2 bg-df-start text-df-text-primary text-[8px] font-bold px-1.5 py-0.5 rounded-full flex items-center gap-0.5 shadow-lg z-10" },
-            React.createElement(Play, { size: 8, fill: "currentColor" }),
-            " START")),
-        isEndNode && (React.createElement("div", { className: "absolute -top-2 -right-2 bg-df-end text-df-text-primary text-[8px] font-bold px-1.5 py-0.5 rounded-full flex items-center gap-0.5 shadow-lg z-10" },
-            React.createElement(Flag, { size: 8 }),
-            " END")),
+    return (React.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.createElement(Handle, { type: "target", position: targetPosition, className: "!bg-df-control-bg !border-df-control-border !w-4 !h-4 !rounded-full" }),
-        React.createElement("div", { className: `px-3 py-1.5 border-b border-df-control-border flex items-center gap-2 rounded-t-lg ${headerBgClass}` },
-            React.createElement(MessageSquare, { size: 12, className: "text-df-npc-selected" }),
-            React.createElement("span", { className: "text-[10px] font-mono text-df-text-secondary truncate flex-1" }, node.id),
-            React.createElement("span", { className: "text-[10px] text-df-text-tertiary" }, "NPC")),
-        React.createElement("div", { className: "px-3 py-2 min-h-[50px]" },
-            node.speaker && (React.createElement("div", { className: "text-[10px] text-df-npc-selected font-medium mb-1" }, node.speaker)),
-            React.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.createElement("div", { className: "mt-1.5 flex flex-wrap gap-1" }, node.setFlags.map((flagId) => {
+        React.createElement("div", { className: `${headerBgClass} border-b-2 border-df-npc-border px-3 py-2.5 flex items-center gap-3 relative` },
+            React.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.createElement("div", { className: "flex-1 min-w-0" },
+                React.createElement("h3", { className: "text-base font-bold text-df-text-primary truncate leading-tight" }, displayName)),
+            React.createElement("div", { className: "flex items-center gap-2 flex-shrink-0" },
+                React.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.createElement(Hash, { size: 12, className: "text-df-text-secondary" }),
+                    React.createElement("span", { className: "text-[10px] font-mono text-df-text-secondary" }, node.id)),
+                React.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.createElement(MessageSquare, { size: 14, className: "text-df-npc-selected" }),
+                    React.createElement("span", { className: "text-[10px] font-semibold text-df-npc-selected" }, "NPC"))),
+            isStartNode && (React.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.createElement(Play, { size: 8, fill: "currentColor" }),
+                " START")),
+            isEndNode && (React.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.createElement(Flag, { size: 8 }),
+                " END"))),
+        React.createElement("div", { className: "px-4 py-3" },
+            React.createElement("div", { className: "bg-df-elevated border border-df-control-border rounded-lg px-4 py-3 mb-2" },
+                React.createElement("p", { className: "text-sm text-df-text-primary leading-relaxed" },
+                    "\"",
+                    contentPreview,
+                    "\"")),
+            node.setFlags && node.setFlags.length > 0 && (React.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.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.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.createElement(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/esm/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/esm/components/NodeEditor.js

@@ -1,11 +1,12 @@
 import React, { useState, useEffect, useRef, useMemo } from 'react';
 import { FlagSelector } from './FlagSelector';
+import { CharacterSelector } from './CharacterSelector';
 import { CONDITION_OPERATOR } from '../types/constants';
 import { AlertCircle, CheckCircle, Info, GitBranch, X, User, Maximize2 } from 'lucide-react';
 import { CHOICE_COLORS } from '../utils/reactflow-converter';
 import { EdgeIcon } from './EdgeIcon';
 import { ConditionAutocomplete } from './ConditionAutocomplete';
-export function NodeEditor({ node, dialogue, onUpdate, onDelete, onAddChoice, onUpdateChoice, onRemoveChoice, onClose, onPlayFromHere, onFocusNode, flagSchema }) {
+export 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] = useState({});
     const [debouncedConditionInputs, setDebouncedConditionInputs] = useState({});
@@ -311,11 +312,21 @@ export function NodeEditor({ node, dialogue, onUpdate, onDelete, onAddChoice, on
                     React.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.createElement(React.Fragment, null,
                     React.createElement("div", null,
-                        React.createElement("label", { className: "text-[10px] text-gray-500 uppercase" }, "Speaker"),
+                        React.createElement("label", { className: "text-[10px] text-df-text-secondary uppercase" }, "Character"),
+                        React.createElement(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.createElement("div", { className: "text-[9px] text-df-text-tertiary mt-1" }, "Or enter custom speaker name below")),
+                    React.createElement("div", null,
+                        React.createElement("label", { className: "text-[10px] text-df-text-secondary uppercase" }, "Speaker (Custom)"),
                         React.createElement("div", { className: "flex items-center gap-2" },
-                            React.createElement("div", { className: "w-8 h-8 rounded-full bg-[#2a2a3e] border border-[#2a2a3e] flex items-center justify-center flex-shrink-0" },
-                                React.createElement(User, { size: 16, className: "text-gray-500" })),
-                            React.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.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.createElement(User, { size: 16, className: "text-df-text-secondary" })),
+                            React.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.createElement("div", null,
                         React.createElement("label", { className: "text-[10px] text-gray-500 uppercase" }, "Content"),
                         React.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..." })),
@@ -375,14 +386,22 @@ export function NodeEditor({ node, dialogue, onUpdate, onDelete, onAddChoice, on
                                 return (React.createElement("div", { key: block.id, className: `rounded p-2 space-y-2 ${styles.bg} ${styles.border} border-2` },
                                     React.createElement("div", { className: "flex items-center gap-2" },
                                         React.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.createElement("div", { className: "flex items-center gap-2 flex-1" },
-                                            React.createElement("div", { className: "w-6 h-6 rounded-full bg-[#2a2a2a] flex items-center justify-center flex-shrink-0" },
-                                                React.createElement(User, { size: 12, className: "text-gray-400" })),
+                                        React.createElement("div", { className: "flex items-center gap-1.5 flex-1" },
+                                            React.createElement(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.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 = [];
@@ -690,11 +709,21 @@ export function NodeEditor({ node, dialogue, onUpdate, onDelete, onAddChoice, on
                                     }, className: "text-xs px-2 py-1 bg-[#12121a] border border-[#2a2a3e] rounded text-gray-400 hover:text-gray-200" }, "+ Add Else"))))) : (React.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.createElement("div", null,
                     React.createElement("div", null,
-                        React.createElement("label", { className: "text-[10px] text-gray-500 uppercase" }, "Speaker"),
+                        React.createElement("label", { className: "text-[10px] text-df-text-secondary uppercase" }, "Character"),
+                        React.createElement(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.createElement("div", { className: "text-[9px] text-df-text-tertiary mt-1" }, "Or enter custom speaker name below")),
+                    React.createElement("div", null,
+                        React.createElement("label", { className: "text-[10px] text-df-text-secondary uppercase" }, "Speaker (Custom)"),
                         React.createElement("div", { className: "flex items-center gap-2" },
-                            React.createElement("div", { className: "w-8 h-8 rounded-full bg-[#2a2a3e] border border-[#2a2a3e] flex items-center justify-center flex-shrink-0" },
-                                React.createElement(User, { size: 16, className: "text-gray-500" })),
-                            React.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.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.createElement(User, { size: 16, className: "text-df-text-secondary" })),
+                            React.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.createElement("div", { className: "flex items-center justify-between mb-2 mt-4" },
                         React.createElement("label", { className: "text-[10px] text-gray-500 uppercase" }, "Choices"),
                         React.createElement("button", { onClick: onAddChoice, className: "text-[10px] text-[#e94560] hover:text-[#ff6b6b]" }, "+ Add")),

package/dist/esm/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/esm/components/PlayerNodeV2.js

@@ -1,11 +1,15 @@
 import React, { useEffect, useRef, useState } from 'react';
 import { Handle, Position, useUpdateNodeInternals } from 'reactflow';
-import { GitBranch, Play, Flag } from 'lucide-react';
+import { GitBranch, Play, Flag, Hash } from 'lucide-react';
 // Color scheme for choice edges (same as current implementation)
 const CHOICE_COLORS = ['#e94560', '#8b5cf6', '#06b6d4', '#22c55e', '#f59e0b'];
 export 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 = useUpdateNodeInternals();
     const headerRef = useRef(null);
     const choiceRefs = useRef([]);
@@ -57,47 +61,62 @@ export function PlayerNodeV2({ data, selected }) {
             : isEndNode
                 ? 'border-df-end shadow-md'
                 : 'border-df-player-border';
-    return (React.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.createElement("div", { className: "absolute -top-2 -left-2 bg-df-start text-df-text-primary text-[8px] font-bold px-1.5 py-0.5 rounded-full flex items-center gap-0.5 shadow-lg z-10" },
-            React.createElement(Play, { size: 8, fill: "currentColor" }),
-            " START")),
-        isEndNode && (React.createElement("div", { className: "absolute -top-2 -right-2 bg-df-end text-df-text-primary text-[8px] font-bold px-1.5 py-0.5 rounded-full flex items-center gap-0.5 shadow-lg z-10" },
-            React.createElement(Flag, { size: 8 }),
-            " END")),
+    // Header background for player nodes
+    const headerBgClass = isStartNode
+        ? 'bg-df-start-bg'
+        : isEndNode
+            ? 'bg-df-end-bg'
+            : 'bg-df-player-header';
+    return (React.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.createElement(Handle, { type: "target", position: targetPosition, className: "!bg-df-control-bg !border-df-control-border !w-4 !h-4 !rounded-full" }),
-        React.createElement("div", { ref: headerRef, className: "px-3 py-1.5 border-b border-df-control-border bg-df-player-header flex items-center gap-2 rounded-t-lg" },
-            React.createElement(GitBranch, { size: 12, className: "text-df-player-selected" }),
-            React.createElement("span", { className: "text-[10px] font-mono text-df-text-secondary truncate flex-1" }, node.id),
-            React.createElement("span", { className: "text-[10px] text-df-text-tertiary" }, "PLAYER")),
-        React.createElement("div", { className: "border-t border-df-control-border" }, choices.map((choice, idx) => {
+        React.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.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.createElement("div", { className: "flex-1 min-w-0" },
+                React.createElement("h3", { className: "text-base font-bold text-df-text-primary truncate leading-tight" }, displayName)),
+            React.createElement("div", { className: "flex items-center gap-2 flex-shrink-0" },
+                React.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.createElement(Hash, { size: 12, className: "text-df-text-secondary" }),
+                    React.createElement("span", { className: "text-[10px] font-mono text-df-text-secondary" }, node.id)),
+                React.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.createElement(GitBranch, { size: 14, className: "text-df-player-selected" }),
+                    React.createElement("span", { className: "text-[10px] font-semibold text-df-player-selected" }, "PLAYER"))),
+            isStartNode && (React.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.createElement(Play, { size: 8, fill: "currentColor" }),
+                " START")),
+            isEndNode && (React.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.createElement(Flag, { size: 8 }),
+                " END"))),
+        React.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.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.createElement("div", { className: "flex-1 min-w-0" },
-                    React.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.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.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.createElement(Handle, { type: "source", position: 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.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.createElement("div", { className: "flex-1 min-w-0" },
+                        React.createElement("p", { className: "text-sm text-df-text-primary leading-relaxed" },
+                            "\"",
+                            choice.text || 'Empty choice',
+                            "\""),
+                        choice.setFlags && choice.setFlags.length > 0 && (React.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.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.createElement(Handle, { type: "source", position: 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.createElement(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/esm/components/ReactFlowPOC.js

@@ -234,17 +234,17 @@ export function ReactFlowPOC({ dialogue }) {
     const onNodesChange = 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 = 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 = useCallback((changes) => {
-        console.log('Edges changed:', changes);
+        // Handle edge changes
     }, []);
     return (React.createElement("div", { className: "w-full h-full" },
         React.createElement("div", { className: "p-8 text-gray-400" },

package/dist/esm/examples/example-characters.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Example Characters
+ *
+ * Sample character data for use in examples and demos
+ */
+import type { Character } from '../types/characters';
+export declare const exampleCharacters: Record<string, Character>;
+/**
+ * Get all example characters
+ */
+export declare function getExampleCharacters(): Record<string, Character>;
+/**
+ * Get a character by ID
+ */
+export declare function getExampleCharacter(id: string): Character | undefined;
+/**
+ * List all character IDs
+ */
+export declare function listExampleCharacterIds(): string[];

package/dist/esm/examples/example-characters.js

@@ -0,0 +1,67 @@
+/**
+ * Example Characters
+ *
+ * Sample character data for use in examples and demos
+ */
+export const exampleCharacters = {
+    'stranger': {
+        id: 'stranger',
+        name: 'Mysterious Stranger',
+        avatar: '👤',
+        description: 'A cloaked figure who appears at crossroads',
+    },
+    'bartender': {
+        id: 'bartender',
+        name: 'Bartender',
+        avatar: '🍺',
+        description: 'The friendly tavern keeper',
+    },
+    'merchant': {
+        id: 'merchant',
+        name: 'Merchant',
+        avatar: '💰',
+        description: 'A traveling trader',
+    },
+    'guard': {
+        id: 'guard',
+        name: 'City Guard',
+        avatar: '🛡️',
+        description: 'A vigilant city guard',
+    },
+    'wizard': {
+        id: 'wizard',
+        name: 'Wizard',
+        avatar: '🧙',
+        description: 'An ancient mage',
+    },
+    'player': {
+        id: 'player',
+        name: 'Player',
+        avatar: '🎮',
+        description: 'The player character',
+    },
+    'narrator': {
+        id: 'narrator',
+        name: 'Narrator',
+        avatar: '📖',
+        description: 'The story narrator',
+    },
+};
+/**
+ * Get all example characters
+ */
+export function getExampleCharacters() {
+    return exampleCharacters;
+}
+/**
+ * Get a character by ID
+ */
+export function getExampleCharacter(id) {
+    return exampleCharacters[id];
+}
+/**
+ * List all character IDs
+ */
+export function listExampleCharacterIds() {
+    return Object.keys(exampleCharacters);
+}

package/dist/esm/examples/index.d.ts

@@ -11,6 +11,7 @@
  * - index.ts: Public API for loading examples (this file)
  */
 export { examplesRegistry, exampleFlagSchemas, getExampleMetadata, listExampleIds, getExampleFlagSchema, listFlagSchemaIds, type ExampleMetadata } from './examples-registry';
+export { exampleCharacters, getExampleCharacters, getExampleCharacter, listExampleCharacterIds, } from './example-characters';
 /**
  * Legacy exports for backward compatibility
  * These maintain the old API while we migrate examples to Yarn format

package/dist/esm/examples/index.js

@@ -14,6 +14,8 @@
 export { examplesRegistry, exampleFlagSchemas, getExampleMetadata, listExampleIds, getExampleFlagSchema, listFlagSchemaIds } from './examples-registry';
 import { getExampleDialogue as getYarnExampleDialogue } from './yarn-examples';
 import { listExampleIds, listFlagSchemaIds, getExampleFlagSchema } from './examples-registry';
+// Export character examples
+export { exampleCharacters, getExampleCharacters, getExampleCharacter, listExampleCharacterIds, } from './example-characters';
 import { exampleDialogues as legacyExamples, demoFlagSchemas as legacySchemas } from './legacy-examples';
 // Export legacy examples - these work alongside the new Yarn examples
 export const exampleDialogues = legacyExamples;

package/dist/esm/index.d.ts

@@ -5,14 +5,17 @@ export { ScenePlayer as DialogueSimulator } from './components/ScenePlayer';
 export { GuidePanel } from './components/GuidePanel';
 export { FlagSelector } from './components/FlagSelector';
 export { FlagManager } from './components/FlagManager';
+export { CharacterSelector } from './components/CharacterSelector';
 export { ZoomControls } from './components/ZoomControls';
 export { ExampleLoader } from './components/ExampleLoader';
 import './styles/scrollbar.css';
 import './styles/theme.css';
 export { exampleDialogues, demoFlagSchemas, getExampleDialogue, getDemoFlagSchema, listExamples, listDemoFlagSchemas } from './examples';
+export { exampleCharacters, getExampleCharacters, getExampleCharacter, listExampleCharacterIds } from './examples';
 export * from './types';
 export * from './types/flags';
 export * from './types/game-state';
+export * from './types/characters';
 export * from './types/constants';
 export { flattenGameState, validateGameState, extractFlagsFromGameState, type FlattenConfig, type FlattenedState } from './utils/game-state-flattener';
 export { exportToYarn, importFromYarn } from './lib/yarn-converter';

package/dist/esm/index.js

@@ -5,6 +5,7 @@ export { ScenePlayer as DialogueSimulator } from './components/ScenePlayer';
 export { GuidePanel } from './components/GuidePanel';
 export { FlagSelector } from './components/FlagSelector';
 export { FlagManager } from './components/FlagManager';
+export { CharacterSelector } from './components/CharacterSelector';
 export { ZoomControls } from './components/ZoomControls';
 export { ExampleLoader } from './components/ExampleLoader';
 // Export styles
@@ -12,10 +13,12 @@ import './styles/scrollbar.css';
 import './styles/theme.css';
 // Export examples
 export { exampleDialogues, demoFlagSchemas, getExampleDialogue, getDemoFlagSchema, listExamples, listDemoFlagSchemas } from './examples';
+export { exampleCharacters, getExampleCharacters, getExampleCharacter, listExampleCharacterIds } from './examples';
 // Export all types
 export * from './types';
 export * from './types/flags';
 export * from './types/game-state';
+export * from './types/characters';
 export * from './types/constants';
 // Export game state utilities
 export { flattenGameState, validateGameState, extractFlagsFromGameState } from './utils/game-state-flattener';

package/dist/esm/types/characters.d.ts

@@ -0,0 +1,15 @@
+/**
+ * Character Types
+ *
+ * Defines character data structure for dialogue nodes
+ */
+export interface Character {
+    id: string;
+    name: string;
+    avatar?: string;
+    description?: string;
+    [key: string]: any;
+}
+export interface CharactersState {
+    [characterId: string]: Character;
+}

package/dist/esm/types/characters.js

@@ -0,0 +1,6 @@
+/**
+ * Character Types
+ *
+ * Defines character data structure for dialogue nodes
+ */
+export {};

package/dist/esm/types/game-state.d.ts

@@ -19,12 +19,14 @@ export interface FlagState {
  * Legacy alias for backward compatibility
  */
 export type GameFlagState = FlagState;
+import type { Character } from './characters';
 /**
  * Base game state structure that users can extend
  * Must have a 'flags' property, but can have any other structure
  */
 export interface BaseGameState {
     flags?: FlagState;
+    characters?: Record<string, Character>;
 }
 /**
  * Convenience type for extending game state

package/dist/esm/types/index.d.ts

@@ -20,12 +20,14 @@ export interface ConditionalBlock {
     condition?: Condition[];
     content: string;
     speaker?: string;
+    characterId?: string;
     nextNodeId?: string;
 }
 export interface DialogueNode {
     id: string;
     type: NodeType;
     speaker?: string;
+    characterId?: string;
     content: string;
     choices?: Choice[];
     nextNodeId?: string;

package/dist/examples/example-characters.d.ts

@@ -0,0 +1,19 @@
+/**
+ * Example Characters
+ *
+ * Sample character data for use in examples and demos
+ */
+import type { Character } from '../types/characters';
+export declare const exampleCharacters: Record<string, Character>;
+/**
+ * Get all example characters
+ */
+export declare function getExampleCharacters(): Record<string, Character>;
+/**
+ * Get a character by ID
+ */
+export declare function getExampleCharacter(id: string): Character | undefined;
+/**
+ * List all character IDs
+ */
+export declare function listExampleCharacterIds(): string[];