@magicborn/dialogue-forge 0.1.4 → 0.1.5

package/README.md

@@ -156,6 +156,89 @@ See [DATA_STRUCTURES.md](./DATA_STRUCTURES.md) for complete type documentation a
 - `GameFlagState` - Current flag values `{ [flagId]: value }`
 - `DialogueResult` - Result from running dialogue (updated flags, visited nodes)
 
+### Dialogue Editor V2 with View Modes
+
+`DialogueEditorV2` supports graph, yarn, and play views. Use the exported `VIEW_MODE` constant (instead of string literals) alongside the `ViewMode` type so consumers get auto-complete and type safety when switching views.
+
+```tsx
+import { DialogueEditorV2, VIEW_MODE, type DialogueTree, type ViewMode } from '@magicborn/dialogue-forge';
+import { useState } from 'react';
+
+export function DialogueEditorDemo() {
+  const [dialogue, setDialogue] = useState<DialogueTree | null>(null);
+  const [viewMode, setViewMode] = useState<ViewMode>(VIEW_MODE.GRAPH);
+
+  return (
+    <DialogueEditorV2
+      dialogue={dialogue}
+      onChange={setDialogue}
+      viewMode={viewMode}
+      onViewModeChange={setViewMode}
+    />
+  );
+}
+```
+
+### Authoring dialogue data programmatically
+
+You can build dialogue content without the editor and still take advantage of the types and constants that power the scene player. This makes it easy to script nonlinear stories, export them, or feed them directly into `ScenePlayer`.
+
+```ts
+import {
+  NODE_TYPE,
+  type DialogueTree,
+  type DialogueNode,
+  ScenePlayer,
+} from '@magicborn/dialogue-forge';
+
+const nodes: Record<string, DialogueNode> = {
+  npc_1: {
+    id: 'npc_1',
+    type: NODE_TYPE.NPC,
+    speaker: 'Merchant',
+    content: 'Welcome, traveler! Looking for supplies?',
+    nextNodeId: 'player_1',
+    x: 0,
+    y: 0,
+  },
+  player_1: {
+    id: 'player_1',
+    type: NODE_TYPE.PLAYER,
+    content: ' ',
+    choices: [
+      { id: 'buy', text: 'Show me your wares.', nextNodeId: 'npc_2' },
+      { id: 'chat', text: 'Any rumors?', nextNodeId: 'npc_3' },
+    ],
+    x: 320,
+    y: 0,
+  },
+  npc_2: {
+    id: 'npc_2',
+    type: NODE_TYPE.NPC,
+    content: 'Take a look! Fresh stock just arrived.',
+    x: 640,
+    y: -120,
+  },
+  npc_3: {
+    id: 'npc_3',
+    type: NODE_TYPE.NPC,
+    content: 'Bandits have been spotted near the bridge—stay sharp.',
+    x: 640,
+    y: 120,
+  },
+};
+
+const merchantIntro: DialogueTree = {
+  id: 'merchant_intro',
+  title: 'Merchant Greeting',
+  startNodeId: 'npc_1',
+  nodes,
+};
+
+// Render or test the dialogue without the editor
+// <ScenePlayer dialogue={merchantIntro} gameState={yourGameState} onComplete={...} />
+```
+
 ## Complete Example
 
 ```typescript

package/dist/components/DialogueEditorV2.js

@@ -58,6 +58,7 @@ const PlayerNodeV2_1 = require("./PlayerNodeV2");
 const ConditionalNodeV2_1 = require("./ConditionalNodeV2");
 const ChoiceEdgeV2_1 = require("./ChoiceEdgeV2");
 const NPCEdgeV2_1 = require("./NPCEdgeV2");
+const constants_1 = require("../types/constants");
 // Define node and edge types outside component for stability
 const nodeTypes = {
     npc: NPCNodeV2_1.NPCNodeV2,
@@ -68,7 +69,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, characters = {}, initialViewMode = 'graph', viewMode: controlledViewMode, onViewModeChange, layoutStrategy: propLayoutStrategy = 'dagre', // Accept from parent
+function DialogueEditorV2Internal({ dialogue, onChange, onExportYarn, onExportJSON, className = '', showTitleEditor = true, flagSchema, characters = {}, initialViewMode = constants_1.VIEW_MODE.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, }) {
@@ -898,7 +899,7 @@ onNodeAdd, onNodeDelete, onNodeUpdate, onConnect: onConnectHook, onDisconnect, o
         }, 100);
     }, [dialogue, onChange, reactFlowInstance, layoutDirection, layoutStrategy]);
     return (react_1.default.createElement("div", { className: `dialogue-editor-v2 ${className} w-full h-full flex flex-col` },
-        viewMode === 'graph' && (react_1.default.createElement("div", { className: "flex-1 flex overflow-hidden" },
+        viewMode === constants_1.VIEW_MODE.GRAPH && (react_1.default.createElement("div", { className: "flex-1 flex overflow-hidden" },
             react_1.default.createElement("div", { className: "flex-1 relative w-full h-full", ref: reactFlowWrapperRef, style: { minHeight: 0 } },
                 react_1.default.createElement(reactflow_1.default, { nodes: nodesWithFlags, edges: edges.map(edge => {
                         // Detect back-edges (loops) based on layout direction
@@ -1174,7 +1175,7 @@ onNodeAdd, onNodeDelete, onNodeUpdate, onConnect: onConnectHook, onDisconnect, o
                         }, 0);
                     }
                 }, onDelete: () => handleDeleteNode(selectedNode.id), onAddChoice: () => handleAddChoice(selectedNode.id), onUpdateChoice: (idx, updates) => handleUpdateChoice(selectedNode.id, idx, updates), onRemoveChoice: (idx) => handleRemoveChoice(selectedNode.id, idx), onClose: () => setSelectedNodeId(null), flagSchema: flagSchema })))),
-        viewMode === 'yarn' && (react_1.default.createElement(YarnView_1.YarnView, { dialogue: dialogue, onExport: () => {
+        viewMode === constants_1.VIEW_MODE.YARN && (react_1.default.createElement(YarnView_1.YarnView, { dialogue: dialogue, onExport: () => {
                 const yarn = (0, yarn_converter_1.exportToYarn)(dialogue);
                 if (onExportYarn) {
                     onExportYarn(yarn);
@@ -1199,7 +1200,7 @@ onNodeAdd, onNodeDelete, onNodeUpdate, onConnect: onConnectHook, onDisconnect, o
                     alert('Failed to import Yarn file. Please check the format.');
                 }
             } })),
-        viewMode === 'play' && (react_1.default.createElement(PlayView_1.PlayView, { dialogue: dialogue, flagSchema: flagSchema }))));
+        viewMode === constants_1.VIEW_MODE.PLAY && (react_1.default.createElement(PlayView_1.PlayView, { dialogue: dialogue, flagSchema: flagSchema }))));
 }
 function DialogueEditorV2(props) {
     return (react_1.default.createElement(reactflow_1.ReactFlowProvider, null,

package/dist/esm/components/DialogueEditorV2.js

@@ -22,6 +22,7 @@ import { PlayerNodeV2 } from './PlayerNodeV2';
 import { ConditionalNodeV2 } from './ConditionalNodeV2';
 import { ChoiceEdgeV2 } from './ChoiceEdgeV2';
 import { NPCEdgeV2 } from './NPCEdgeV2';
+import { VIEW_MODE } from '../types/constants';
 // Define node and edge types outside component for stability
 const nodeTypes = {
     npc: NPCNodeV2,
@@ -32,7 +33,7 @@ const edgeTypes = {
     choice: ChoiceEdgeV2,
     default: NPCEdgeV2, // Use custom component for NPC edges instead of React Flow default
 };
-function DialogueEditorV2Internal({ dialogue, onChange, onExportYarn, onExportJSON, className = '', showTitleEditor = true, flagSchema, characters = {}, initialViewMode = 'graph', viewMode: controlledViewMode, onViewModeChange, layoutStrategy: propLayoutStrategy = 'dagre', // Accept from parent
+function DialogueEditorV2Internal({ dialogue, onChange, onExportYarn, onExportJSON, className = '', showTitleEditor = true, flagSchema, characters = {}, initialViewMode = VIEW_MODE.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, }) {
@@ -862,7 +863,7 @@ onNodeAdd, onNodeDelete, onNodeUpdate, onConnect: onConnectHook, onDisconnect, o
         }, 100);
     }, [dialogue, onChange, reactFlowInstance, layoutDirection, layoutStrategy]);
     return (React.createElement("div", { className: `dialogue-editor-v2 ${className} w-full h-full flex flex-col` },
-        viewMode === 'graph' && (React.createElement("div", { className: "flex-1 flex overflow-hidden" },
+        viewMode === VIEW_MODE.GRAPH && (React.createElement("div", { className: "flex-1 flex overflow-hidden" },
             React.createElement("div", { className: "flex-1 relative w-full h-full", ref: reactFlowWrapperRef, style: { minHeight: 0 } },
                 React.createElement(ReactFlow, { nodes: nodesWithFlags, edges: edges.map(edge => {
                         // Detect back-edges (loops) based on layout direction
@@ -1138,7 +1139,7 @@ onNodeAdd, onNodeDelete, onNodeUpdate, onConnect: onConnectHook, onDisconnect, o
                         }, 0);
                     }
                 }, onDelete: () => handleDeleteNode(selectedNode.id), onAddChoice: () => handleAddChoice(selectedNode.id), onUpdateChoice: (idx, updates) => handleUpdateChoice(selectedNode.id, idx, updates), onRemoveChoice: (idx) => handleRemoveChoice(selectedNode.id, idx), onClose: () => setSelectedNodeId(null), flagSchema: flagSchema })))),
-        viewMode === 'yarn' && (React.createElement(YarnView, { dialogue: dialogue, onExport: () => {
+        viewMode === VIEW_MODE.YARN && (React.createElement(YarnView, { dialogue: dialogue, onExport: () => {
                 const yarn = exportToYarn(dialogue);
                 if (onExportYarn) {
                     onExportYarn(yarn);
@@ -1163,7 +1164,7 @@ onNodeAdd, onNodeDelete, onNodeUpdate, onConnect: onConnectHook, onDisconnect, o
                     alert('Failed to import Yarn file. Please check the format.');
                 }
             } })),
-        viewMode === 'play' && (React.createElement(PlayView, { dialogue: dialogue, flagSchema: flagSchema }))));
+        viewMode === VIEW_MODE.PLAY && (React.createElement(PlayView, { dialogue: dialogue, flagSchema: flagSchema }))));
 }
 export function DialogueEditorV2(props) {
     return (React.createElement(ReactFlowProvider, null,

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

@@ -2,6 +2,15 @@
  * Type-safe constants for Dialogue Forge
  * Use these instead of string literals for better type safety and IDE support
  */
+/**
+ * View modes for DialogueEditorV2
+ */
+export declare const VIEW_MODE: {
+    readonly GRAPH: "graph";
+    readonly YARN: "yarn";
+    readonly PLAY: "play";
+};
+export type ViewMode = typeof VIEW_MODE[keyof typeof VIEW_MODE];
 /**
  * Node types in a dialogue tree
  */

package/dist/esm/types/constants.js

@@ -2,6 +2,14 @@
  * Type-safe constants for Dialogue Forge
  * Use these instead of string literals for better type safety and IDE support
  */
+/**
+ * View modes for DialogueEditorV2
+ */
+export const VIEW_MODE = {
+    GRAPH: 'graph',
+    YARN: 'yarn',
+    PLAY: 'play',
+};
 /**
  * Node types in a dialogue tree
  */

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

@@ -1,4 +1,5 @@
 import { ConditionOperator, NodeType } from './constants';
+export type { ViewMode } from './constants';
 export interface Choice {
     id: string;
     text: string;
@@ -43,7 +44,6 @@ export interface DialogueTree {
     nodes: Record<string, DialogueNode>;
 }
 import { FlagSchema } from './flags';
-export type ViewMode = 'graph' | 'yarn' | 'play';
 export interface DialogueEditorProps {
     dialogue: DialogueTree | null;
     onChange: (dialogue: DialogueTree) => void;

package/dist/types/constants.d.ts

@@ -2,6 +2,15 @@
  * Type-safe constants for Dialogue Forge
  * Use these instead of string literals for better type safety and IDE support
  */
+/**
+ * View modes for DialogueEditorV2
+ */
+export declare const VIEW_MODE: {
+    readonly GRAPH: "graph";
+    readonly YARN: "yarn";
+    readonly PLAY: "play";
+};
+export type ViewMode = typeof VIEW_MODE[keyof typeof VIEW_MODE];
 /**
  * Node types in a dialogue tree
  */

package/dist/types/constants.js

@@ -4,7 +4,15 @@
  * Use these instead of string literals for better type safety and IDE support
  */
 Object.defineProperty(exports, "__esModule", { value: true });
-exports.QUEST_STATE = exports.FLAG_VALUE_TYPE = exports.CONDITION_OPERATOR = exports.FLAG_TYPE = exports.NODE_TYPE = void 0;
+exports.QUEST_STATE = exports.FLAG_VALUE_TYPE = exports.CONDITION_OPERATOR = exports.FLAG_TYPE = exports.NODE_TYPE = exports.VIEW_MODE = void 0;
+/**
+ * View modes for DialogueEditorV2
+ */
+exports.VIEW_MODE = {
+    GRAPH: 'graph',
+    YARN: 'yarn',
+    PLAY: 'play',
+};
 /**
  * Node types in a dialogue tree
  */

package/dist/types/index.d.ts

@@ -1,4 +1,5 @@
 import { ConditionOperator, NodeType } from './constants';
+export type { ViewMode } from './constants';
 export interface Choice {
     id: string;
     text: string;
@@ -43,7 +44,6 @@ export interface DialogueTree {
     nodes: Record<string, DialogueNode>;
 }
 import { FlagSchema } from './flags';
-export type ViewMode = 'graph' | 'yarn' | 'play';
 export interface DialogueEditorProps {
     dialogue: DialogueTree | null;
     onChange: (dialogue: DialogueTree) => void;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@magicborn/dialogue-forge",
-  "version": "0.1.4",
+  "version": "0.1.5",
   "description": "Visual node-based dialogue editor with Yarn Spinner support",
   "author": "Ben Garrard <b2gdevs@gmail.com>",
   "license": "MIT",