@magicborn/dialogue-forge 0.1.0 → 0.1.2

package/demo/app/page.tsx

@@ -11,7 +11,8 @@ import {
   listExamples, 
   getExampleDialogue, 
   listDemoFlagSchemas,
-  getDemoFlagSchema 
+  getDemoFlagSchema,
+  getExampleCharacters
 } from '@magicborn/dialogue-forge/src/examples';
 import { Play, Layout, FileText } from 'lucide-react';
 import { ThemeSwitcher } from '../components/ThemeSwitcher';
@@ -31,7 +32,8 @@ const demoDialogues: Record<string, DialogueTree> = {
       'start': {
         id: 'start',
         type: 'npc',
-        speaker: 'Stranger',
+        characterId: 'stranger',
+        speaker: 'Stranger', // Fallback
         x: 300,
         y: 100,
         content: "You find yourself at a crossroads. A cloaked figure emerges from the shadows.",
@@ -40,7 +42,8 @@ const demoDialogues: Record<string, DialogueTree> = {
       'greeting': {
         id: 'greeting',
         type: 'npc',
-        speaker: 'Stranger',
+        characterId: 'stranger',
+        speaker: 'Stranger', // Fallback
         x: 300,
         y: 200,
         content: "\"Traveler... I've been waiting for you. What brings you to these lands?\"",
@@ -82,7 +85,8 @@ const demoDialogues: Record<string, DialogueTree> = {
       'treasure_response': {
         id: 'treasure_response',
         type: 'npc',
-        speaker: 'Stranger',
+        characterId: 'stranger',
+        speaker: 'Stranger', // Fallback
         x: 200,
         y: 450,
         content: "\"Many have sought the same. Take this map—it shows the entrance to the catacombs.\"",
@@ -91,7 +95,8 @@ const demoDialogues: Record<string, DialogueTree> = {
       'knowledge_response': {
         id: 'knowledge_response',
         type: 'npc',
-        speaker: 'Stranger',
+        characterId: 'stranger',
+        speaker: 'Stranger', // Fallback
         x: 400,
         y: 450,
         content: "\"A seeker of truth... Take this tome. It contains the riddles you must solve.\"",
@@ -100,7 +105,8 @@ const demoDialogues: Record<string, DialogueTree> = {
       'high_rep_response': {
         id: 'high_rep_response',
         type: 'npc',
-        speaker: 'Stranger',
+        characterId: 'stranger',
+        speaker: 'Stranger', // Fallback
         x: 500,
         y: 450,
         content: "\"Ah, a hero! Your reputation precedes you. I have something special for you...\"",
@@ -126,7 +132,8 @@ const demoDialogues: Record<string, DialogueTree> = {
       'bartender_greet': {
         id: 'bartender_greet',
         type: 'npc',
-        speaker: 'Bartender',
+        characterId: 'bartender',
+        speaker: 'Bartender', // Fallback
         x: 300,
         y: 150,
         content: "\"Welcome, stranger! What can I get ya? We've got ale, mead, or if you're looking for work, I might have something.\"",
@@ -155,7 +162,8 @@ const demoDialogues: Record<string, DialogueTree> = {
       'drink_ale': {
         id: 'drink_ale',
         type: 'npc',
-        speaker: 'Bartender',
+        characterId: 'bartender',
+        speaker: 'Bartender', // Fallback
         x: 100,
         y: 420,
         content: "\"Coming right up!\" He slides a frothy mug across the bar.",
@@ -164,7 +172,8 @@ const demoDialogues: Record<string, DialogueTree> = {
       'work_info': {
         id: 'work_info',
         type: 'npc',
-        speaker: 'Bartender',
+        characterId: 'bartender',
+        speaker: 'Bartender', // Fallback
         x: 300,
         y: 420,
         content: "\"Rats in the cellar. Big ones. I'll pay 10 gold if you clear 'em out.\"",
@@ -184,7 +193,8 @@ const demoDialogues: Record<string, DialogueTree> = {
       'quest_accepted': {
         id: 'quest_accepted',
         type: 'npc',
-        speaker: 'Bartender',
+        characterId: 'bartender',
+        speaker: 'Bartender', // Fallback
         x: 300,
         y: 680,
         content: "\"Great! The cellar door is in the back. Good luck!\"",
@@ -193,7 +203,8 @@ const demoDialogues: Record<string, DialogueTree> = {
       'observe_tavern': {
         id: 'observe_tavern',
         type: 'npc',
-        speaker: 'Narrator',
+        characterId: 'narrator',
+        speaker: 'Narrator', // Fallback
         x: 500,
         y: 420,
         content: "You notice a hooded figure in the corner, watching you intently...",
@@ -202,7 +213,8 @@ const demoDialogues: Record<string, DialogueTree> = {
       'vip_response': {
         id: 'vip_response',
         type: 'npc',
-        speaker: 'Bartender',
+        characterId: 'bartender',
+        speaker: 'Bartender', // Fallback
         x: 600,
         y: 420,
         content: "\"Of course! Right this way to the VIP lounge. Your reputation grants you access.\"",
@@ -231,6 +243,7 @@ export default function DialogueForgeDemo() {
   const [dialogueTree, setDialogueTree] = useState<DialogueTree>(demoDialogues['mysterious-stranger']);
   const [flagSchema, setFlagSchema] = useState<FlagSchema>(demoFlagSchema);
   const [viewMode, setViewMode] = useState<ViewMode>('graph');
+  const characters = getExampleCharacters(); // Get example characters
   
   // Panel states
   const [showFlagManager, setShowFlagManager] = useState(false);
@@ -343,6 +356,7 @@ export default function DialogueForgeDemo() {
           onChange={setDialogueTree}
           onExportYarn={handleExportYarn}
           flagSchema={flagSchema}
+          characters={characters}
           viewMode={viewMode}
           onViewModeChange={setViewMode}
           className="w-full h-full"

package/demo/public/logo.svg

@@ -1 +1,14 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z"/></svg>
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 96 96" role="img" aria-label="Dialogue Forge icon" preserveAspectRatio="xMidYMid meet">
+  <defs>
+    <style>
+      .ink{ fill:none; stroke:currentColor; stroke-width:6; stroke-linecap:round; stroke-linejoin:round; }
+    </style>
+  </defs>
+
+  <!-- Brackets -->
+  <path class="ink" d="M22 22v34c0 10 8 18 18 18h12"/>
+  <path class="ink" d="M74 22v34c0 10-8 18-18 18H44"/>
+
+  <!-- Construction bar -->
+  <path class="ink" d="M48 18v60"/>
+</svg>

package/dist/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 {};

package/dist/components/CharacterSelector.js

@@ -0,0 +1,125 @@
+"use strict";
+/**
+ * CharacterSelector - Combobox with search for selecting characters
+ */
+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.CharacterSelector = CharacterSelector;
+const react_1 = __importStar(require("react"));
+const lucide_react_1 = require("lucide-react");
+function CharacterSelector({ characters = {}, selectedCharacterId, onSelect, placeholder = 'Select character...', className = '', compact = false, }) {
+    const [isOpen, setIsOpen] = (0, react_1.useState)(false);
+    const [searchQuery, setSearchQuery] = (0, react_1.useState)('');
+    const containerRef = (0, react_1.useRef)(null);
+    const inputRef = (0, react_1.useRef)(null);
+    const selectedCharacter = selectedCharacterId ? characters[selectedCharacterId] : undefined;
+    // Filter characters based on search query
+    const filteredCharacters = Object.entries(characters).filter(([id, character]) => {
+        if (!searchQuery.trim())
+            return true;
+        const query = searchQuery.toLowerCase();
+        return (character.name.toLowerCase().includes(query) ||
+            character.id.toLowerCase().includes(query) ||
+            (character.description && character.description.toLowerCase().includes(query)));
+    });
+    // Close dropdown when clicking outside
+    (0, react_1.useEffect)(() => {
+        function handleClickOutside(event) {
+            if (containerRef.current && !containerRef.current.contains(event.target)) {
+                setIsOpen(false);
+                setSearchQuery('');
+            }
+        }
+        if (isOpen) {
+            document.addEventListener('mousedown', handleClickOutside);
+            // Focus input when dropdown opens
+            setTimeout(() => inputRef.current?.focus(), 0);
+        }
+        return () => {
+            document.removeEventListener('mousedown', handleClickOutside);
+        };
+    }, [isOpen]);
+    const handleSelect = (characterId) => {
+        onSelect(characterId);
+        setIsOpen(false);
+        setSearchQuery('');
+    };
+    const handleClear = (e) => {
+        e.stopPropagation();
+        onSelect(undefined);
+        setIsOpen(false);
+        setSearchQuery('');
+    };
+    // Compact mode for conditional blocks
+    if (compact) {
+        return (react_1.default.createElement("div", { ref: containerRef, className: `relative ${className}` },
+            react_1.default.createElement("button", { type: "button", onClick: () => setIsOpen(!isOpen), className: "flex items-center gap-1.5 bg-df-elevated border border-df-control-border rounded px-1.5 py-0.5 text-[10px] text-df-text-primary hover:border-df-control-hover transition-colors" }, selectedCharacter ? (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement("span", { className: "text-sm flex-shrink-0" }, selectedCharacter.avatar || '👤'),
+                react_1.default.createElement("span", { className: "text-[10px] truncate max-w-[80px]" }, selectedCharacter.name),
+                react_1.default.createElement("button", { onClick: handleClear, className: "flex-shrink-0 p-0.5 hover:bg-df-control-hover rounded", title: "Clear character" },
+                    react_1.default.createElement(lucide_react_1.X, { size: 10, className: "text-df-text-secondary" })))) : (react_1.default.createElement(react_1.default.Fragment, null,
+                react_1.default.createElement(lucide_react_1.User, { size: 10, className: "text-df-text-secondary flex-shrink-0" }),
+                react_1.default.createElement("span", { className: "text-[10px] text-df-text-secondary" }, placeholder)))),
+            isOpen && (react_1.default.createElement("div", { className: "absolute z-50 mt-1 w-48 bg-df-sidebar-bg border border-df-sidebar-border rounded-lg shadow-xl max-h-48 overflow-hidden flex flex-col" },
+                react_1.default.createElement("div", { className: "p-1.5 border-b border-df-sidebar-border" },
+                    react_1.default.createElement("div", { className: "relative" },
+                        react_1.default.createElement(lucide_react_1.Search, { size: 12, className: "absolute left-1.5 top-1/2 -translate-y-1/2 text-df-text-secondary" }),
+                        react_1.default.createElement("input", { ref: inputRef, type: "text", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: "Search...", className: "w-full bg-df-elevated border border-df-control-border rounded px-1.5 py-1 pl-6 text-[10px] text-df-text-primary placeholder:text-df-text-tertiary focus:border-df-control-hover outline-none" }))),
+                react_1.default.createElement("div", { className: "overflow-y-auto" }, filteredCharacters.length === 0 ? (react_1.default.createElement("div", { className: "p-2 text-[10px] text-df-text-secondary text-center" }, searchQuery ? 'No matches' : 'No characters')) : (filteredCharacters.map(([id, character]) => (react_1.default.createElement("button", { key: id, type: "button", onClick: () => handleSelect(id), className: `w-full flex items-center gap-1.5 px-2 py-1 text-left hover:bg-df-elevated transition-colors ${selectedCharacterId === id ? 'bg-df-npc-selected/20' : ''}` },
+                    react_1.default.createElement("span", { className: "text-sm flex-shrink-0" }, character.avatar || '👤'),
+                    react_1.default.createElement("span", { className: "text-[10px] text-df-text-primary truncate flex-1" }, character.name),
+                    selectedCharacterId === id && (react_1.default.createElement("div", { className: "flex-shrink-0 w-1.5 h-1.5 rounded-full bg-df-npc-selected" })))))))))));
+    }
+    // Full mode (existing)
+    return (react_1.default.createElement("div", { ref: containerRef, className: `relative ${className}` },
+        react_1.default.createElement("button", { type: "button", onClick: () => setIsOpen(!isOpen), className: "w-full flex items-center gap-2 bg-df-elevated border border-df-control-border rounded px-2 py-1.5 text-sm text-df-text-primary hover:border-df-control-hover transition-colors" }, selectedCharacter ? (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement("span", { className: "text-lg flex-shrink-0" }, selectedCharacter.avatar || '👤'),
+            react_1.default.createElement("span", { className: "flex-1 text-left truncate" }, selectedCharacter.name),
+            react_1.default.createElement("button", { onClick: handleClear, className: "flex-shrink-0 p-0.5 hover:bg-df-control-hover rounded", title: "Clear character" },
+                react_1.default.createElement(lucide_react_1.X, { size: 12, className: "text-df-text-secondary" })))) : (react_1.default.createElement(react_1.default.Fragment, null,
+            react_1.default.createElement(lucide_react_1.User, { size: 14, className: "text-df-text-secondary flex-shrink-0" }),
+            react_1.default.createElement("span", { className: "flex-1 text-left text-df-text-secondary" }, placeholder)))),
+        isOpen && (react_1.default.createElement("div", { className: "absolute z-50 mt-1 w-full bg-df-sidebar-bg border border-df-sidebar-border rounded-lg shadow-xl max-h-64 overflow-hidden flex flex-col" },
+            react_1.default.createElement("div", { className: "p-2 border-b border-df-sidebar-border" },
+                react_1.default.createElement("div", { className: "relative" },
+                    react_1.default.createElement(lucide_react_1.Search, { size: 14, className: "absolute left-2 top-1/2 -translate-y-1/2 text-df-text-secondary" }),
+                    react_1.default.createElement("input", { ref: inputRef, type: "text", value: searchQuery, onChange: (e) => setSearchQuery(e.target.value), placeholder: "Search characters...", className: "w-full bg-df-elevated border border-df-control-border rounded px-2 py-1.5 pl-7 text-sm text-df-text-primary placeholder:text-df-text-tertiary focus:border-df-control-hover outline-none" }))),
+            react_1.default.createElement("div", { className: "overflow-y-auto" }, filteredCharacters.length === 0 ? (react_1.default.createElement("div", { className: "p-3 text-sm text-df-text-secondary text-center" }, searchQuery ? 'No characters found' : 'No characters available')) : (filteredCharacters.map(([id, character]) => (react_1.default.createElement("button", { key: id, type: "button", onClick: () => handleSelect(id), className: `w-full flex items-center gap-2 px-3 py-2 text-left hover:bg-df-elevated transition-colors ${selectedCharacterId === id ? 'bg-df-npc-selected/20' : ''}` },
+                react_1.default.createElement("span", { className: "text-lg flex-shrink-0" }, character.avatar || '👤'),
+                react_1.default.createElement("div", { className: "flex-1 min-w-0" },
+                    react_1.default.createElement("div", { className: "text-sm text-df-text-primary font-medium truncate" }, character.name),
+                    character.description && (react_1.default.createElement("div", { className: "text-xs text-df-text-secondary truncate" }, character.description))),
+                selectedCharacterId === id && (react_1.default.createElement("div", { className: "flex-shrink-0 w-2 h-2 rounded-full bg-df-npc-selected" })))))))))));
+}

package/dist/components/ConditionalNodeV2.d.ts

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

package/dist/components/ConditionalNodeV2.js

@@ -40,7 +40,7 @@ const lucide_react_1 = require("lucide-react");
 // Color scheme for conditional block edges
 const CONDITIONAL_COLORS = ['#3b82f6', '#8b5cf6', '#06b6d4', '#22c55e', '#f59e0b'];
 function ConditionalNodeV2({ data, selected }) {
-    const { node, flagSchema, isDimmed, isInPath, layoutDirection = 'TB', isStartNode, isEndNode } = data;
+    const { node, flagSchema, characters = {}, isDimmed, isInPath, layoutDirection = 'TB', isStartNode, isEndNode } = data;
     const blocks = node.conditionalBlocks || [];
     const updateNodeInternals = (0, reactflow_1.useUpdateNodeInternals)();
     const headerRef = (0, react_1.useRef)(null);
@@ -49,6 +49,7 @@ function ConditionalNodeV2({ data, selected }) {
     // Handle positions based on layout direction
     const isHorizontal = layoutDirection === 'LR';
     const targetPosition = isHorizontal ? reactflow_1.Position.Left : reactflow_1.Position.Top;
+    const sourcePosition = isHorizontal ? reactflow_1.Position.Right : reactflow_1.Position.Bottom;
     // Calculate handle positions based on actual rendered heights
     (0, react_1.useEffect)(() => {
         if (headerRef.current && blocks.length > 0) {
@@ -85,23 +86,41 @@ function ConditionalNodeV2({ data, selected }) {
             : isEndNode
                 ? 'border-df-end shadow-md'
                 : 'border-df-conditional-border';
-    return (react_1.default.createElement("div", { className: `rounded-lg border-2 transition-all duration-300 ${borderClass} ${isInPath ? 'border-df-conditional-border/70' : ''} bg-df-conditional-bg min-w-[200px] relative`, style: isDimmed ? { opacity: 0.35, filter: 'saturate(0.3)' } : undefined },
-        isStartNode && (react_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 conditional nodes
+    const headerBgClass = isStartNode
+        ? 'bg-df-start-bg'
+        : isEndNode
+            ? 'bg-df-end-bg'
+            : 'bg-df-conditional-header';
+    return (react_1.default.createElement("div", { className: `rounded-lg border-2 transition-all duration-300 ${borderClass} ${isInPath ? 'border-df-conditional-border/70' : ''} bg-df-conditional-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-conditional-header flex items-center gap-2 rounded-t-lg" },
-            react_1.default.createElement(lucide_react_1.GitBranch, { size: 12, className: "text-df-conditional-border" }),
-            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-conditional-border" }, "IF/ELSE")),
-        react_1.default.createElement("div", { className: "py-1" }, blocks.map((block, idx) => {
+        react_1.default.createElement("div", { ref: headerRef, className: `${headerBgClass} border-b-2 border-df-conditional-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-conditional-bg border-[3px] border-df-conditional-border flex items-center justify-center shadow-lg flex-shrink-0" },
+                react_1.default.createElement(lucide_react_1.Code, { size: 20, className: "text-df-conditional-selected" })),
+            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" }, "Conditional Logic")),
+            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-conditional-selected/20 border border-df-conditional-selected/50", title: "Conditional Node" },
+                    react_1.default.createElement(lucide_react_1.GitBranch, { size: 14, className: "text-df-conditional-selected" }),
+                    react_1.default.createElement("span", { className: "text-[10px] font-semibold text-df-conditional-selected" }, "IF/ELSE"))),
+            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" }, blocks.map((block, idx) => {
             const color = CONDITIONAL_COLORS[idx % CONDITIONAL_COLORS.length];
             const blockType = block.type === 'if' ? 'IF' : block.type === 'elseif' ? 'ELSE IF' : 'ELSE';
-            return (react_1.default.createElement("div", { key: block.id, ref: el => { blockRefs.current[idx] = el; }, className: "px-3 py-1.5 border-b border-df-control-border last:border-b-0" },
-                react_1.default.createElement("div", { className: "flex items-center gap-2 mb-1" },
+            // Get character if characterId is set
+            const character = block.characterId ? characters[block.characterId] : undefined;
+            const displayName = character ? character.name : (block.speaker || undefined);
+            const avatar = character?.avatar || '👤';
+            return (react_1.default.createElement("div", { key: block.id, ref: el => { blockRefs.current[idx] = el; }, className: "px-3 py-2 border-b border-df-control-border last:border-b-0" },
+                react_1.default.createElement("div", { className: "flex items-center gap-2 mb-1.5" },
                     react_1.default.createElement("span", { className: "text-[9px] px-1.5 py-0.5 rounded bg-df-base text-df-text-primary font-semibold" }, blockType),
                     block.condition && block.condition.length > 0 && (react_1.default.createElement("span", { className: "text-[9px] text-df-text-secondary font-mono truncate flex-1" }, block.condition.map((c) => {
                         const varName = `$${c.flag}`;
@@ -121,27 +140,29 @@ function ConditionalNodeV2({ data, selected }) {
                         }
                         return '';
                     }).filter(c => c).join(' and ').slice(0, 30)))),
-                block.speaker && (react_1.default.createElement("div", { className: "text-[9px] text-df-conditional-border font-medium" }, block.speaker)),
-                react_1.default.createElement("div", { className: "text-[10px] text-df-text-primary line-clamp-1 bg-df-base border border-df-control-border rounded px-2 py-1 mt-1" },
+                displayName && (react_1.default.createElement("div", { className: "flex items-center gap-1.5 mb-1.5" },
+                    react_1.default.createElement("span", { className: "text-sm flex-shrink-0" }, avatar),
+                    react_1.default.createElement("span", { className: "text-[10px] text-df-conditional-selected font-medium" }, displayName))),
+                react_1.default.createElement("div", { className: "text-xs text-df-text-primary line-clamp-2 bg-df-elevated border border-df-control-border rounded px-3 py-1.5" },
                     "\"",
-                    block.content.slice(0, 40) + (block.content.length > 40 ? '...' : ''),
+                    block.content.slice(0, 60) + (block.content.length > 60 ? '...' : ''),
                     "\""),
                 react_1.default.createElement(reactflow_1.Handle, { type: "source", position: reactflow_1.Position.Right, id: `block-${idx}`, style: {
                         top: `${handlePositions[idx] || 0}px`,
                         right: -8,
-                    }, className: "!bg-[#2a2a3e] !border-[#4a4a6a] !w-3 !h-3 !rounded-full hover:!border-blue-400 hover:!bg-blue-400/20" })));
+                    }, className: "!bg-df-control-bg !border-df-control-border !w-3 !h-3 !rounded-full hover:!border-df-conditional-selected hover:!bg-df-conditional-selected/20" })));
         })),
-        node.setFlags && node.setFlags.length > 0 && (react_1.default.createElement("div", { className: "px-3 py-1 border-t border-[#2a2a3e] flex flex-wrap gap-1" }, node.setFlags.map(flagId => {
+        node.setFlags && node.setFlags.length > 0 && (react_1.default.createElement("div", { className: "px-4 py-2 border-t border-df-control-border flex flex-wrap gap-1" }, node.setFlags.map(flagId => {
             const flag = flagSchema?.flags.find(f => f.id === flagId);
             const flagType = flag?.type || 'dialogue';
-            const colorClass = flagType === 'dialogue' ? 'bg-gray-500/20 text-gray-400 border-gray-500/30' :
-                flagType === 'quest' ? 'bg-blue-500/20 text-blue-400 border-blue-500/30' :
-                    flagType === 'achievement' ? 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30' :
-                        flagType === 'item' ? 'bg-green-500/20 text-green-400 border-green-500/30' :
-                            flagType === 'stat' ? 'bg-purple-500/20 text-purple-400 border-purple-500/30' :
-                                flagType === 'title' ? 'bg-pink-500/20 text-pink-400 border-pink-500/30' :
-                                    flagType === 'global' ? 'bg-orange-500/20 text-orange-400 border-orange-500/30' :
-                                        'bg-gray-500/20 text-gray-400 border-gray-500/30';
-            return (react_1.default.createElement("span", { key: flagId, className: `text-[8px] px-1 py-0.5 rounded border ${colorClass}`, title: flag?.name || flagId }, flagType === 'dialogue' ? 't' : flagType[0]));
+            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.5 py-0.5 rounded-full border ${colorClass}`, title: flag?.name || flagId }, flagType === 'dialogue' ? 't' : flagType[0]));
         })))));
 }

package/dist/components/DialogueEditorV2.d.ts

@@ -8,9 +8,11 @@ import React from 'react';
 import 'reactflow/dist/style.css';
 import { DialogueEditorProps } from '../types';
 import { FlagSchema } from '../types/flags';
+import { Character } from '../types/characters';
 type ViewMode = 'graph' | 'yarn' | 'play';
 export declare function DialogueEditorV2(props: DialogueEditorProps & {
     flagSchema?: FlagSchema;
+    characters?: Record<string, Character>;
     initialViewMode?: ViewMode;
     viewMode?: ViewMode;
     onViewModeChange?: (mode: ViewMode) => void;

package/dist/components/DialogueEditorV2.js

@@ -68,7 +68,7 @@ const edgeTypes = {
     choice: ChoiceEdgeV2_1.ChoiceEdgeV2,
     default: NPCEdgeV2_1.NPCEdgeV2, // Use custom component for NPC edges instead of React Flow default
 };
-function DialogueEditorV2Internal({ dialogue, onChange, onExportYarn, onExportJSON, className = '', showTitleEditor = true, flagSchema, initialViewMode = 'graph', viewMode: controlledViewMode, onViewModeChange, layoutStrategy: propLayoutStrategy = 'dagre', // Accept from parent
+function DialogueEditorV2Internal({ dialogue, onChange, onExportYarn, onExportJSON, className = '', showTitleEditor = true, flagSchema, characters = {}, initialViewMode = 'graph', viewMode: controlledViewMode, onViewModeChange, layoutStrategy: propLayoutStrategy = 'dagre', // Accept from parent
 onLayoutStrategyChange, onOpenFlagManager, onOpenGuide, onLoadExampleDialogue, onLoadExampleFlags, 
 // Event hooks
 onNodeAdd, onNodeDelete, onNodeUpdate, onConnect: onConnectHook, onDisconnect, onNodeSelect, onNodeDoubleClick: onNodeDoubleClickHook, }) {
@@ -84,6 +84,8 @@ onNodeAdd, onNodeDelete, onNodeUpdate, onConnect: onConnectHook, onDisconnect, o
     const [layoutDirection, setLayoutDirection] = (0, react_1.useState)('TB');
     const layoutStrategy = propLayoutStrategy; // Use prop instead of state
     const [autoOrganize, setAutoOrganize] = (0, react_1.useState)(false); // Auto-layout on changes
+    // Track if we've made a direct React Flow update to avoid unnecessary conversions
+    const directUpdateRef = (0, react_1.useRef)(null);
     const [showPathHighlight, setShowPathHighlight] = (0, react_1.useState)(true); // Toggle path highlighting
     const [showBackEdges, setShowBackEdges] = (0, react_1.useState)(true); // Toggle back-edge styling
     const [showLayoutMenu, setShowLayoutMenu] = (0, react_1.useState)(false);
@@ -174,13 +176,20 @@ onNodeAdd, onNodeDelete, onNodeUpdate, onConnect: onConnectHook, onDisconnect, o
         return { edgesToSelectedNode: edgesOnPath, nodeDepths: nodeDepthMap };
     }, [selectedNodeId, dialogue]);
     // Update nodes/edges when dialogue changes externally
+    // Skip conversion if we just made a direct React Flow update (for simple text changes)
     react_1.default.useEffect(() => {
         if (dialogue) {
+            // If we just updated a node directly in React Flow, skip full conversion
+            // The direct update already handled the visual change
+            if (directUpdateRef.current) {
+                directUpdateRef.current = null; // Clear the flag
+                return; // Skip conversion - React Flow is already updated
+            }
             const { nodes: newNodes, edges: newEdges } = (0, reactflow_converter_1.convertDialogueTreeToReactFlow)(dialogue, layoutDirection);
             setNodes(newNodes);
             setEdges(newEdges);
         }
-    }, [dialogue]);
+    }, [dialogue, layoutDirection]);
     // Calculate end nodes (nodes with no outgoing connections)
     const endNodeIds = (0, react_1.useMemo)(() => {
         if (!dialogue)
@@ -196,7 +205,7 @@ onNodeAdd, onNodeDelete, onNodeUpdate, onConnect: onConnectHook, onDisconnect, o
         });
         return ends;
     }, [dialogue]);
-    // Add flagSchema, dim state, and layout direction to node data
+    // Add flagSchema, characters, dim state, and layout direction to node data
     const nodesWithFlags = (0, react_1.useMemo)(() => {
         const hasSelection = selectedNodeId !== null && showPathHighlight;
         const startNodeId = dialogue?.startNodeId;
@@ -212,6 +221,7 @@ onNodeAdd, onNodeDelete, onNodeUpdate, onConnect: onConnectHook, onDisconnect, o
                 data: {
                     ...node.data,
                     flagSchema,
+                    characters, // Pass characters to all nodes including conditional
                     isDimmed,
                     isInPath,
                     layoutDirection,
@@ -220,7 +230,7 @@ onNodeAdd, onNodeDelete, onNodeUpdate, onConnect: onConnectHook, onDisconnect, o
                 },
             };
         });
-    }, [nodes, flagSchema, nodeDepths, selectedNodeId, layoutDirection, showPathHighlight, dialogue, endNodeIds]);
+    }, [nodes, flagSchema, characters, nodeDepths, selectedNodeId, layoutDirection, showPathHighlight, dialogue, endNodeIds]);
     if (!dialogue) {
         return (react_1.default.createElement("div", { className: `dialogue-editor-v2-empty ${className}` },
             react_1.default.createElement("p", null, "No dialogue loaded. Please provide a dialogue tree.")));
@@ -782,6 +792,33 @@ onNodeAdd, onNodeDelete, onNodeUpdate, onConnect: onConnectHook, onDisconnect, o
     // Handle node updates
     const handleUpdateNode = (0, react_1.useCallback)((nodeId, updates) => {
         const updatedNode = { ...dialogue.nodes[nodeId], ...updates };
+        // Check if this is a "simple" update (just text/content changes, not structural)
+        // Simple updates: speaker, content, characterId (non-structural properties)
+        // Structural updates: choices, conditionalBlocks, nextNodeId (affect edges/connections)
+        const isSimpleUpdate = Object.keys(updates).every(key => ['speaker', 'content', 'characterId', 'setFlags'].includes(key));
+        if (isSimpleUpdate && reactFlowInstance) {
+            // For simple updates, update React Flow directly without full tree conversion
+            // This is much faster and avoids expensive recalculations
+            const allNodes = reactFlowInstance.getNodes();
+            const nodeToUpdate = allNodes.find(n => n.id === nodeId);
+            if (nodeToUpdate) {
+                // Mark that we're doing a direct update to skip full conversion
+                directUpdateRef.current = nodeId;
+                // Update the node data directly in React Flow
+                const updatedReactFlowNode = {
+                    ...nodeToUpdate,
+                    data: {
+                        ...nodeToUpdate.data,
+                        node: updatedNode, // Update the dialogue node in the data
+                    },
+                };
+                // Update just this node in React Flow
+                const updatedNodes = allNodes.map(n => n.id === nodeId ? updatedReactFlowNode : n);
+                reactFlowInstance.setNodes(updatedNodes);
+            }
+        }
+        // Always update the dialogue tree (source of truth) - but this triggers full conversion
+        // The useEffect will handle the full conversion, but React Flow is already updated above
         onChange({
             ...dialogue,
             nodes: {
@@ -791,7 +828,7 @@ onNodeAdd, onNodeDelete, onNodeUpdate, onConnect: onConnectHook, onDisconnect, o
         });
         // Call onNodeUpdate hook
         onNodeUpdate?.(nodeId, updates);
-    }, [dialogue, onChange, onNodeUpdate]);
+    }, [dialogue, onChange, onNodeUpdate, reactFlowInstance]);
     // Handle choice updates
     const handleAddChoice = (0, react_1.useCallback)((nodeId) => {
         const updated = (0, node_helpers_1.addChoiceToNode)(dialogue.nodes[nodeId]);
@@ -1111,7 +1148,7 @@ onNodeAdd, onNodeDelete, onNodeUpdate, onConnect: onConnectHook, onDisconnect, o
                                         " Delete"))));
                             })(),
                             react_1.default.createElement("button", { onClick: () => setNodeContextMenu(null), className: "w-full px-4 py-1.5 text-xs text-df-text-secondary hover:text-df-text-primary border-t border-df-control-border mt-1" }, "Cancel")))))),
-            selectedNode && (react_1.default.createElement(NodeEditor_1.NodeEditor, { node: selectedNode, dialogue: dialogue, onUpdate: (updates) => handleUpdateNode(selectedNode.id, updates), onFocusNode: (nodeId) => {
+            selectedNode && (react_1.default.createElement(NodeEditor_1.NodeEditor, { node: selectedNode, dialogue: dialogue, characters: characters, onUpdate: (updates) => handleUpdateNode(selectedNode.id, updates), onFocusNode: (nodeId) => {
                     const targetNode = nodes.find(n => n.id === nodeId);
                     if (targetNode && reactFlowInstance) {
                         // Set selectedNodeId first so NodeEditor updates