@magicborn/dialogue-forge 0.1.4 → 0.1.6

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/bin/postbuild.js

@@ -0,0 +1,69 @@
+const fs = require('fs');
+const path = require('path');
+
+const srcStylesDir = path.join(__dirname, '..', 'src', 'styles');
+const distStylesDir = path.join(__dirname, '..', 'dist', 'styles');
+
+function copyStyles() {
+  if (!fs.existsSync(srcStylesDir)) return;
+  fs.mkdirSync(distStylesDir, { recursive: true });
+  const files = fs.readdirSync(srcStylesDir).filter((file) => file.endsWith('.css'));
+  files.forEach((file) => {
+    fs.copyFileSync(path.join(srcStylesDir, file), path.join(distStylesDir, file));
+  });
+}
+
+function updateEsmEntryPoints() {
+  const esmEntries = [
+    path.join(__dirname, '..', 'dist', 'esm', 'index.js'),
+    path.join(__dirname, '..', 'dist', 'esm', 'index.d.ts')
+  ];
+
+  esmEntries.forEach((filePath) => {
+    if (!fs.existsSync(filePath)) return;
+    const content = fs.readFileSync(filePath, 'utf8');
+    const updated = content.replace(/\.\/styles\//g, '../styles/');
+    fs.writeFileSync(filePath, updated);
+  });
+}
+
+function verifyCssPaths() {
+  const checks = [
+    {
+      filePath: path.join(__dirname, '..', 'dist', 'index.js'),
+      cssImports: ['./styles/scrollbar.css', './styles/theme.css']
+    },
+    {
+      filePath: path.join(__dirname, '..', 'dist', 'index.d.ts'),
+      cssImports: ['./styles/scrollbar.css', './styles/theme.css']
+    },
+    {
+      filePath: path.join(__dirname, '..', 'dist', 'esm', 'index.js'),
+      cssImports: ['../styles/scrollbar.css', '../styles/theme.css']
+    },
+    {
+      filePath: path.join(__dirname, '..', 'dist', 'esm', 'index.d.ts'),
+      cssImports: ['../styles/scrollbar.css', '../styles/theme.css']
+    }
+  ];
+
+  checks.forEach(({ filePath, cssImports }) => {
+    if (!fs.existsSync(filePath)) return;
+    const content = fs.readFileSync(filePath, 'utf8');
+
+    cssImports.forEach((cssPath) => {
+      if (!content.includes(cssPath)) {
+        throw new Error(`Missing CSS import ${cssPath} in ${path.relative(process.cwd(), filePath)}`);
+      }
+
+      const resolved = path.resolve(path.dirname(filePath), cssPath);
+      if (!fs.existsSync(resolved)) {
+        throw new Error(`CSS asset not found for ${cssPath} referenced by ${path.relative(process.cwd(), filePath)}`);
+      }
+    });
+  });
+}
+
+copyStyles();
+updateEsmEntryPoints();
+verifyCssPaths();

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/index.d.ts

@@ -8,8 +8,8 @@ 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';
+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';

package/dist/esm/index.js

@@ -9,8 +9,8 @@ export { CharacterSelector } from './components/CharacterSelector';
 export { ZoomControls } from './components/ZoomControls';
 export { ExampleLoader } from './components/ExampleLoader';
 // Export styles
-import './styles/scrollbar.css';
-import './styles/theme.css';
+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';

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/styles/scrollbar.css

@@ -0,0 +1,108 @@
+/* Dialogue Forge Custom Scrollbar Styles */
+
+/* Webkit browsers (Chrome, Safari, Edge) */
+.dialogue-forge-scrollbar::-webkit-scrollbar {
+  width: 8px;
+  height: 8px;
+}
+
+.dialogue-forge-scrollbar::-webkit-scrollbar-track {
+  background: rgba(15, 15, 25, 0.5);
+  border-radius: 4px;
+}
+
+.dialogue-forge-scrollbar::-webkit-scrollbar-thumb {
+  background: linear-gradient(180deg, rgba(99, 102, 241, 0.5), rgba(139, 92, 246, 0.5));
+  border-radius: 4px;
+  border: 1px solid rgba(99, 102, 241, 0.3);
+}
+
+.dialogue-forge-scrollbar::-webkit-scrollbar-thumb:hover {
+  background: linear-gradient(180deg, rgba(99, 102, 241, 0.7), rgba(139, 92, 246, 0.7));
+}
+
+.dialogue-forge-scrollbar::-webkit-scrollbar-corner {
+  background: transparent;
+}
+
+/* Firefox */
+.dialogue-forge-scrollbar {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(99, 102, 241, 0.5) rgba(15, 15, 25, 0.5);
+}
+
+/* Thin variant for smaller containers */
+.dialogue-forge-scrollbar-thin::-webkit-scrollbar {
+  width: 4px;
+  height: 4px;
+}
+
+.dialogue-forge-scrollbar-thin::-webkit-scrollbar-track {
+  background: transparent;
+}
+
+.dialogue-forge-scrollbar-thin::-webkit-scrollbar-thumb {
+  background: rgba(99, 102, 241, 0.4);
+  border-radius: 2px;
+}
+
+.dialogue-forge-scrollbar-thin::-webkit-scrollbar-thumb:hover {
+  background: rgba(99, 102, 241, 0.6);
+}
+
+.dialogue-forge-scrollbar-thin {
+  scrollbar-width: thin;
+  scrollbar-color: rgba(99, 102, 241, 0.4) transparent;
+}
+
+/* Hide scrollbar but keep functionality */
+.dialogue-forge-scrollbar-hidden {
+  -ms-overflow-style: none;
+  scrollbar-width: none;
+}
+
+.dialogue-forge-scrollbar-hidden::-webkit-scrollbar {
+  display: none;
+}
+
+/* React Flow Controls Styling */
+.react-flow__controls {
+  background: #0d0d14 !important;
+  border: 1px solid #2a2a3e !important;
+  border-radius: 8px !important;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3) !important;
+  padding: 4px !important;
+  gap: 2px !important;
+  display: flex !important;
+  flex-direction: column !important;
+}
+
+.react-flow__controls-button {
+  background: #12121a !important;
+  border: 1px solid #2a2a3e !important;
+  border-radius: 4px !important;
+  width: 24px !important;
+  height: 24px !important;
+  padding: 4px !important;
+  display: flex !important;
+  align-items: center !important;
+  justify-content: center !important;
+  transition: all 0.15s ease !important;
+}
+
+.react-flow__controls-button:hover {
+  background: #1a1a2e !important;
+  border-color: #3a3a4e !important;
+}
+
+.react-flow__controls-button svg {
+  fill: #6b7280 !important;
+  max-width: 14px !important;
+  max-height: 14px !important;
+}
+
+.react-flow__controls-button:hover svg {
+  fill: #e5e7eb !important;
+}
+
+

package/dist/styles/theme.css

@@ -0,0 +1,106 @@
+/* Dialogue Forge Theme - Dark Fantasy, Earthy Tones */
+/* CSS Variables for Tailwind v3 compatibility */
+
+:root {
+  /* Base Colors */
+  --color-df-base: oklch(0.15 0.02 250);
+  --color-df-surface: oklch(0.18 0.02 260);
+  --color-df-elevated: oklch(0.22 0.02 270);
+  
+  /* Node Colors - General */
+  --color-df-node-bg: oklch(0.20 0.03 240);
+  --color-df-node-border: oklch(0.35 0.05 220);
+  --color-df-node-selected: oklch(0.45 0.12 15);
+  --color-df-node-dimmed: oklch(0.15 0.02 250);
+  
+  /* NPC Node Colors - Earthy Brown/Tan (duller borders, bright when selected) */
+  --color-df-npc-bg: oklch(0.25 0.04 45);
+  --color-df-npc-border: oklch(0.35 0.05 35);
+  --color-df-npc-header: oklch(0.30 0.10 25);
+  --color-df-npc-text: oklch(0.85 0.02 250);
+  --color-df-npc-selected: oklch(0.60 0.20 15);
+  
+  /* Player Node Colors - Deep Purple/Magenta (duller borders, bright when selected) */
+  --color-df-player-bg: oklch(0.22 0.08 300);
+  --color-df-player-border: oklch(0.38 0.10 310);
+  --color-df-player-header: oklch(0.28 0.12 290);
+  --color-df-player-text: oklch(0.85 0.02 250);
+  --color-df-player-selected: oklch(0.65 0.25 280);
+  
+  /* Conditional Node Colors - Forest Green (duller borders, bright when selected) */
+  --color-df-conditional-bg: oklch(0.24 0.06 150);
+  --color-df-conditional-border: oklch(0.35 0.08 140);
+  --color-df-conditional-header: oklch(0.30 0.10 145);
+  --color-df-conditional-text: oklch(0.85 0.02 250);
+  
+  /* Start/End Badges */
+  --color-df-start: oklch(0.55 0.15 140);
+  --color-df-start-bg: oklch(0.25 0.08 140);
+  --color-df-end: oklch(0.50 0.15 45);
+  --color-df-end-bg: oklch(0.25 0.08 45);
+  
+  /* Edge Colors (duller default, bright on hover/selection) */
+  --color-df-edge-default: oklch(0.35 0.02 250);
+  --color-df-edge-default-hover: oklch(0.55 0.10 250);
+  --color-df-edge-choice-1: oklch(0.45 0.12 15);
+  --color-df-edge-choice-2: oklch(0.50 0.15 280);
+  --color-df-edge-choice-3: oklch(0.48 0.12 200);
+  --color-df-edge-choice-4: oklch(0.52 0.12 120);
+  --color-df-edge-choice-5: oklch(0.45 0.10 45);
+  --color-df-edge-loop: oklch(0.50 0.12 60);
+  --color-df-edge-dimmed: oklch(0.25 0.02 250);
+  
+  /* Status Colors */
+  --color-df-error: oklch(0.55 0.22 25);
+  --color-df-error-bg: oklch(0.25 0.10 25);
+  --color-df-warning: oklch(0.65 0.18 70);
+  --color-df-warning-bg: oklch(0.25 0.10 70);
+  --color-df-success: oklch(0.60 0.18 150);
+  --color-df-success-bg: oklch(0.25 0.10 150);
+  --color-df-info: oklch(0.55 0.15 220);
+  --color-df-info-bg: oklch(0.25 0.08 220);
+  
+  /* Text Colors */
+  --color-df-text-primary: oklch(0.85 0.02 250);
+  --color-df-text-secondary: oklch(0.65 0.02 250);
+  --color-df-text-tertiary: oklch(0.45 0.02 250);
+  --color-df-text-muted: oklch(0.40 0.02 250);
+  
+  /* UI Control Colors */
+  --color-df-control-bg: oklch(0.18 0.02 260);
+  --color-df-control-border: oklch(0.30 0.03 250);
+  --color-df-control-hover: oklch(0.25 0.03 250);
+  --color-df-control-active: oklch(0.35 0.05 250);
+  
+  /* Flag Colors */
+  --color-df-flag-dialogue: oklch(0.45 0.03 250);
+  --color-df-flag-dialogue-bg: oklch(0.20 0.02 250);
+  --color-df-flag-quest: oklch(0.50 0.15 220);
+  --color-df-flag-quest-bg: oklch(0.22 0.08 220);
+  --color-df-flag-achievement: oklch(0.60 0.18 70);
+  --color-df-flag-achievement-bg: oklch(0.25 0.10 70);
+  --color-df-flag-item: oklch(0.55 0.15 150);
+  --color-df-flag-item-bg: oklch(0.25 0.08 150);
+  --color-df-flag-stat: oklch(0.55 0.18 280);
+  --color-df-flag-stat-bg: oklch(0.25 0.10 280);
+  --color-df-flag-title: oklch(0.55 0.18 330);
+  --color-df-flag-title-bg: oklch(0.25 0.10 330);
+  --color-df-flag-global: oklch(0.50 0.15 45);
+  --color-df-flag-global-bg: oklch(0.25 0.08 45);
+  
+  /* Canvas/Background */
+  --color-df-canvas-bg: oklch(0.12 0.01 250);
+  --color-df-canvas-grid: oklch(0.20 0.02 250);
+  
+  /* Sidebar/Editor */
+  --color-df-sidebar-bg: oklch(0.18 0.02 260);
+  --color-df-sidebar-border: oklch(0.35 0.05 250);
+  --color-df-editor-bg: oklch(0.15 0.02 240);
+  --color-df-editor-border: oklch(0.30 0.03 250);
+  
+  /* Shadows */
+  --shadow-df-sm: 0 2px 4px oklch(0 0 0 / 0.3);
+  --shadow-df-md: 0 4px 8px oklch(0 0 0 / 0.4);
+  --shadow-df-lg: 0 8px 16px oklch(0 0 0 / 0.5);
+  --shadow-df-glow: 0 0 12px oklch(0.45 0.12 15 / 0.3);
+}

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.6",
   "description": "Visual node-based dialogue editor with Yarn Spinner support",
   "author": "Ben Garrard <b2gdevs@gmail.com>",
   "license": "MIT",
@@ -24,12 +24,13 @@
   },
   "files": [
     "dist",
+    "dist/styles",
     "demo",
     "bin",
     "README.md"
   ],
   "scripts": {
-    "build": "tsc && tsc --module esnext --outDir dist/esm",
+    "build": "tsc && tsc --module esnext --outDir dist/esm && node ./bin/postbuild.js",
     "dev": "cd demo && npm install && npm run dev",
     "dev:watch": "tsc --watch",
     "test": "vitest",