feat: [US-054] - Character and Variable TypeScript types

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/app/editor/[projectId]/page.tsx

@@ -31,10 +31,13 @@ export default async function EditorPage({ params }: PageProps) {
     notFound()
   }
 
-  const flowchartData = (project.flowchart_data || {
-    nodes: [],
-    edges: [],
-  }) as FlowchartData
+  const rawData = project.flowchart_data || {}
+  const flowchartData: FlowchartData = {
+    nodes: rawData.nodes || [],
+    edges: rawData.edges || [],
+    characters: rawData.characters || [],
+    variables: rawData.variables || [],
+  }
 
   return (
     <div className="flex h-screen flex-col">

src/types/flowchart.ts

@@ -4,15 +4,35 @@ export type Position = {
   y: number;
 };
 
+// Character type: represents a defined character in the project
+export type Character = {
+  id: string;
+  name: string;
+  color: string; // hex color
+  description?: string;
+};
+
+// Variable type: represents a defined variable in the project
+export type Variable = {
+  id: string;
+  name: string;
+  type: 'numeric' | 'string' | 'boolean';
+  initialValue: number | string | boolean;
+  description?: string;
+};
+
 // DialogueNode type: represents character speech/dialogue
+export type DialogueNodeData = {
+  speaker?: string;
+  characterId?: string;
+  text: string;
+};
+
 export type DialogueNode = {
   id: string;
   type: 'dialogue';
   position: Position;
-  data: {
-    speaker?: string;
-    text: string;
-  };
+  data: DialogueNodeData;
 };
 
 // Choice option type for ChoiceNode
@@ -33,15 +53,18 @@ export type ChoiceNode = {
 };
 
 // VariableNode type: represents variable operations
+export type VariableNodeData = {
+  variableName: string;
+  variableId?: string;
+  operation: 'set' | 'add' | 'subtract';
+  value: number;
+};
+
 export type VariableNode = {
   id: string;
   type: 'variable';
   position: Position;
-  data: {
-    variableName: string;
-    operation: 'set' | 'add' | 'subtract';
-    value: number;
-  };
+  data: VariableNodeData;
 };
 
 // Union type for all node types
@@ -50,6 +73,7 @@ export type FlowchartNode = DialogueNode | ChoiceNode | VariableNode;
 // Condition type for conditional edges
 export type Condition = {
   variableName: string;
+  variableId?: string;
   operator: '>' | '<' | '==' | '>=' | '<=' | '!=';
   value: number;
 };
@@ -70,4 +94,6 @@ export type FlowchartEdge = {
 export type FlowchartData = {
   nodes: FlowchartNode[];
   edges: FlowchartEdge[];
+  characters: Character[];
+  variables: Variable[];
 };