@magicborn/dialogue-forge 0.1.0

package/dist/esm/components/Minimap.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { DialogueTree } from '../types';
+interface MinimapProps {
+    dialogue: DialogueTree;
+    viewport: {
+        x: number;
+        y: number;
+        width: number;
+        height: number;
+        scale: number;
+    };
+    onNavigate: (x: number, y: number) => void;
+    className?: string;
+}
+export declare function Minimap({ dialogue, viewport, onNavigate, className }: MinimapProps): React.JSX.Element;
+export {};

package/dist/esm/components/Minimap.js

@@ -0,0 +1,57 @@
+import React, { useRef } from 'react';
+import { NODE_TYPE } from '../types/constants';
+const MINIMAP_SIZE = 200;
+const NODE_SIZE = 4;
+export function Minimap({ dialogue, viewport, onNavigate, className }) {
+    const minimapRef = useRef(null);
+    // Calculate bounds of all nodes
+    const bounds = React.useMemo(() => {
+        const nodes = Object.values(dialogue.nodes);
+        if (nodes.length === 0) {
+            return { minX: 0, minY: 0, maxX: 100, maxY: 100 };
+        }
+        const xs = nodes.map(n => n.x);
+        const ys = nodes.map(n => n.y);
+        const minX = Math.min(...xs);
+        const minY = Math.min(...ys);
+        const maxX = Math.max(...xs.map(x => x + 200)); // NODE_WIDTH
+        const maxY = Math.max(...ys.map(y => y + 100)); // NODE_HEIGHT
+        return { minX, minY, maxX, maxY };
+    }, [dialogue.nodes]);
+    const width = bounds.maxX - bounds.minX;
+    const height = bounds.maxY - bounds.minY;
+    const scaleX = MINIMAP_SIZE / Math.max(width, 100);
+    const scaleY = MINIMAP_SIZE / Math.max(height, 100);
+    const scale = Math.min(scaleX, scaleY);
+    const handleClick = (e) => {
+        if (!minimapRef.current)
+            return;
+        const rect = minimapRef.current.getBoundingClientRect();
+        const x = (e.clientX - rect.left) / scale - bounds.minX;
+        const y = (e.clientY - rect.top) / scale - bounds.minY;
+        onNavigate(x, y);
+    };
+    // Calculate viewport indicator position
+    // Account for graph scale and offset
+    const viewportX = ((viewport.x - bounds.minX) / viewport.scale) * scale;
+    const viewportY = ((viewport.y - bounds.minY) / viewport.scale) * scale;
+    const viewportWidth = (viewport.width / viewport.scale) * scale;
+    const viewportHeight = (viewport.height / viewport.scale) * scale;
+    return (React.createElement("div", { ref: minimapRef, className: `absolute bottom-4 right-4 bg-[#0d0d14] border border-[#2a2a3e] rounded-lg overflow-hidden ${className}`, style: { width: MINIMAP_SIZE, height: MINIMAP_SIZE }, onClick: handleClick },
+        React.createElement("svg", { width: MINIMAP_SIZE, height: MINIMAP_SIZE, className: "absolute inset-0" },
+            React.createElement("rect", { width: MINIMAP_SIZE, height: MINIMAP_SIZE, fill: "#0d0d14" }),
+            React.createElement("defs", null,
+                React.createElement("pattern", { id: "minimapGrid", width: "10", height: "10", patternUnits: "userSpaceOnUse" },
+                    React.createElement("path", { d: "M 10 0 L 0 0 0 10", fill: "none", stroke: "#1a1a2e", strokeWidth: "0.5" }))),
+            React.createElement("rect", { width: MINIMAP_SIZE, height: MINIMAP_SIZE, fill: "url(#minimapGrid)" }),
+            Object.values(dialogue.nodes).map(node => {
+                const x = (node.x - bounds.minX) * scale;
+                const y = (node.y - bounds.minY) * scale;
+                const color = node.type === NODE_TYPE.NPC ? '#e94560' : '#8b5cf6';
+                return (React.createElement("g", { key: node.id },
+                    React.createElement("rect", { x: x, y: y, width: NODE_SIZE * 2, height: NODE_SIZE * 2, fill: color, opacity: 0.6, stroke: color, strokeWidth: "0.5" }),
+                    node.id === dialogue.startNodeId && (React.createElement("circle", { cx: x + NODE_SIZE, cy: y + NODE_SIZE, r: NODE_SIZE * 1.5, fill: "none", stroke: "#22c55e", strokeWidth: "1", opacity: 0.8 }))));
+            }),
+            React.createElement("rect", { x: viewportX, y: viewportY, width: viewportWidth, height: viewportHeight, fill: "none", stroke: "#06b6d4", strokeWidth: "2", opacity: 0.8, strokeDasharray: "4 4" })),
+        React.createElement("div", { className: "absolute top-1 left-1 text-[8px] text-gray-500 bg-[#0d0d14]/80 px-1 rounded" }, "Minimap")));
+}

package/dist/esm/components/NPCEdgeV2.d.ts

@@ -0,0 +1,3 @@
+import React from 'react';
+import { EdgeProps } from 'reactflow';
+export declare function NPCEdgeV2({ id, sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition, selected, data, }: EdgeProps): React.JSX.Element;

package/dist/esm/components/NPCEdgeV2.js

@@ -0,0 +1,68 @@
+import React, { useState } from 'react';
+import { BaseEdge, getSmoothStepPath, getBezierPath, Position } from 'reactflow';
+// Loop back edge color - now uses CSS variable var(--color-df-edge-loop)
+export function NPCEdgeV2({ id, sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition, selected, data, }) {
+    const [hovered, setHovered] = useState(false);
+    const isBackEdge = data?.isBackEdge ?? false;
+    // Use smooth step path for angular look (like the horizontal example)
+    // For back edges, use bezier for a more curved appearance
+    const [edgePath, labelX, labelY] = isBackEdge
+        ? getBezierPath({
+            sourceX,
+            sourceY,
+            sourcePosition,
+            targetX,
+            targetY,
+            targetPosition,
+            curvature: 0.5,
+        })
+        : getSmoothStepPath({
+            sourceX,
+            sourceY,
+            sourcePosition: sourcePosition || Position.Bottom,
+            targetX,
+            targetY,
+            targetPosition: targetPosition || Position.Top,
+            borderRadius: 8,
+        });
+    const isSelected = selected || hovered;
+    const isDimmed = data?.isDimmed ?? false;
+    // Use CSS variables for colors
+    const strokeColor = isDimmed
+        ? 'var(--color-df-edge-dimmed)'
+        : (isBackEdge ? 'var(--color-df-edge-loop)' : (isSelected ? 'var(--color-df-edge-default-hover)' : 'var(--color-df-edge-default)'));
+    const strokeWidth = isSelected ? 4 : 2;
+    const opacity = isDimmed ? 0.2 : (isSelected ? 1 : 0.6);
+    // Add glow effect when hovered (only if not dimmed)
+    const filter = hovered && !isDimmed ? 'drop-shadow(0 0 4px var(--color-df-edge-default-hover))' : undefined;
+    // Create a brighter version of the color for the pulse
+    const brightenColor = (hex, percent = 40) => {
+        const num = parseInt(hex.replace('#', ''), 16);
+        const r = Math.min(255, ((num >> 16) & 0xff) + percent);
+        const g = Math.min(255, ((num >> 8) & 0xff) + percent);
+        const b = Math.min(255, (num & 0xff) + percent);
+        return `#${((r << 16) | (g << 8) | b).toString(16).padStart(6, '0')}`;
+    };
+    const pulseColor = brightenColor(strokeColor, 50);
+    const shouldAnimate = data?.isInPathToSelected ?? false;
+    return (React.createElement(React.Fragment, null,
+        React.createElement("path", { d: edgePath, fill: "none", stroke: "transparent", strokeWidth: 20, style: { cursor: 'pointer', pointerEvents: 'all' }, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false) }),
+        React.createElement(BaseEdge, { id: id, path: edgePath, style: {
+                stroke: strokeColor,
+                strokeWidth,
+                opacity,
+                cursor: 'pointer',
+                transition: 'all 0.2s ease',
+                filter,
+                // Dashed line for back edges
+                strokeDasharray: isBackEdge ? '8 4' : undefined,
+            }, markerEnd: isBackEdge ? `url(#loop-arrow-${id})` : 'url(#react-flow__arrowclosed)' }),
+        isBackEdge && (React.createElement("g", { transform: `translate(${labelX - 10}, ${labelY - 10})` },
+            React.createElement("circle", { cx: "10", cy: "10", r: "12", fill: "var(--color-df-base)", stroke: strokeColor, strokeWidth: "2" }),
+            React.createElement("text", { x: "10", y: "14", textAnchor: "middle", fontSize: "12", fill: strokeColor }, "\u21BA"))),
+        shouldAnimate && (React.createElement("circle", { r: "6", fill: pulseColor, opacity: 0.9 },
+            React.createElement("animateMotion", { dur: "2s", repeatCount: "indefinite", path: edgePath }))),
+        isBackEdge && (React.createElement("defs", null,
+            React.createElement("marker", { id: `loop-arrow-${id}`, markerWidth: "12.5", markerHeight: "12.5", viewBox: "-10 -10 20 20", markerUnits: "strokeWidth", orient: "auto", refX: "0", refY: "0" },
+                React.createElement("polyline", { stroke: "var(--color-df-edge-loop)", strokeLinecap: "round", strokeLinejoin: "round", fill: "var(--color-df-edge-loop)", points: "-5,-4 0,0 -5,4 -5,-4" }))))));
+}

package/dist/esm/components/NPCNodeV2.d.ts

@@ -0,0 +1,26 @@
+/**
+ * NPCNodeV2 - React Flow node component for NPC dialogue
+ *
+ * Displays:
+ * - Node header with ID and type
+ * - Speaker name (if present)
+ * - Content preview (truncated)
+ * - Flag indicators
+ * - Start/End badges when applicable
+ */
+import React from 'react';
+import { NodeProps } from 'reactflow';
+import { DialogueNode } from '../types';
+import { FlagSchema } from '../types/flags';
+import { LayoutDirection } from '../utils/layout';
+interface NPCNodeData {
+    node: DialogueNode;
+    flagSchema?: FlagSchema;
+    isDimmed?: boolean;
+    isInPath?: boolean;
+    layoutDirection?: LayoutDirection;
+    isStartNode?: boolean;
+    isEndNode?: boolean;
+}
+export declare function NPCNodeV2({ data, selected }: NodeProps<NPCNodeData>): React.JSX.Element;
+export {};

package/dist/esm/components/NPCNodeV2.js

@@ -0,0 +1,80 @@
+/**
+ * NPCNodeV2 - React Flow node component for NPC dialogue
+ *
+ * Displays:
+ * - Node header with ID and type
+ * - Speaker name (if present)
+ * - Content preview (truncated)
+ * - Flag indicators
+ * - Start/End badges when applicable
+ */
+import React from 'react';
+import { Handle, Position } from 'reactflow';
+import { MessageSquare, Play, Flag } from 'lucide-react';
+// ============================================================================
+// Styles
+// ============================================================================
+const FLAG_COLORS = {
+    dialogue: 'bg-df-flag-dialogue-bg text-df-flag-dialogue border-df-flag-dialogue',
+    quest: 'bg-df-flag-quest-bg text-df-flag-quest border-df-flag-quest',
+    achievement: 'bg-df-flag-achievement-bg text-df-flag-achievement border-df-flag-achievement',
+    item: 'bg-df-flag-item-bg text-df-flag-item border-df-flag-item',
+    stat: 'bg-df-flag-stat-bg text-df-flag-stat border-df-flag-stat',
+    title: 'bg-df-flag-title-bg text-df-flag-title border-df-flag-title',
+    global: 'bg-df-flag-global-bg text-df-flag-global border-df-flag-global',
+};
+function getFlagColorClass(type) {
+    return FLAG_COLORS[type] || FLAG_COLORS.dialogue;
+}
+// ============================================================================
+// Component
+// ============================================================================
+export function NPCNodeV2({ data, selected }) {
+    const { node, flagSchema, isDimmed, isInPath, layoutDirection = 'TB', isStartNode, isEndNode } = data;
+    // Handle positions based on layout direction
+    const isHorizontal = layoutDirection === 'LR';
+    const targetPosition = isHorizontal ? Position.Left : Position.Top;
+    const sourcePosition = isHorizontal ? Position.Right : Position.Bottom;
+    // Border color based on state
+    const borderClass = selected
+        ? 'border-df-npc-selected shadow-lg shadow-df-glow'
+        : isStartNode
+            ? 'border-df-start shadow-md'
+            : isEndNode
+                ? 'border-df-end shadow-md'
+                : 'border-df-npc-border';
+    // Header background based on node type
+    const headerBgClass = isStartNode
+        ? 'bg-df-start-bg'
+        : isEndNode
+            ? 'bg-df-end-bg'
+            : 'bg-df-npc-header';
+    // Content preview (truncated)
+    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")),
+        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) => {
+                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]));
+            })))),
+        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

@@ -0,0 +1,18 @@
+import React from 'react';
+import { DialogueNode, DialogueTree, Choice } from '../types';
+import { FlagSchema } from '../types/flags';
+interface NodeEditorProps {
+    node: DialogueNode;
+    dialogue: DialogueTree;
+    onUpdate: (updates: Partial<DialogueNode>) => void;
+    onDelete: () => void;
+    onAddChoice: () => void;
+    onUpdateChoice: (idx: number, updates: Partial<Choice>) => void;
+    onRemoveChoice: (idx: number) => void;
+    onClose: () => void;
+    onPlayFromHere?: (nodeId: string) => void;
+    onFocusNode?: (nodeId: string) => void;
+    flagSchema?: FlagSchema;
+}
+export declare function NodeEditor({ node, dialogue, onUpdate, onDelete, onAddChoice, onUpdateChoice, onRemoveChoice, onClose, onPlayFromHere, onFocusNode, flagSchema }: NodeEditorProps): React.JSX.Element;
+export {};