@magicborn/dialogue-forge 0.1.0

package/demo/tailwind.config.ts

@@ -0,0 +1,90 @@
+import type { Config } from 'tailwindcss';
+
+const config: Config = {
+  content: [
+    './app/**/*.{js,ts,jsx,tsx,mdx}',
+    './components/**/*.{js,ts,jsx,tsx,mdx}',
+    '../src/**/*.{js,ts,jsx,tsx,mdx}',
+    '../../packages-shared/server-template/**/*.{js,ts,jsx,tsx,mdx}',
+  ],
+  theme: {
+    extend: {
+      colors: {
+        'df-base': 'var(--color-df-base)',
+        'df-surface': 'var(--color-df-surface)',
+        'df-elevated': 'var(--color-df-elevated)',
+        'df-node-bg': 'var(--color-df-node-bg)',
+        'df-node-border': 'var(--color-df-node-border)',
+        'df-node-selected': 'var(--color-df-node-selected)',
+        'df-node-dimmed': 'var(--color-df-node-dimmed)',
+        'df-npc-bg': 'var(--color-df-npc-bg)',
+        'df-npc-border': 'var(--color-df-npc-border)',
+        'df-npc-header': 'var(--color-df-npc-header)',
+        'df-npc-text': 'var(--color-df-npc-text)',
+        'df-npc-selected': 'var(--color-df-npc-selected)',
+        'df-player-bg': 'var(--color-df-player-bg)',
+        'df-player-border': 'var(--color-df-player-border)',
+        'df-player-header': 'var(--color-df-player-header)',
+        'df-player-text': 'var(--color-df-player-text)',
+        'df-player-selected': 'var(--color-df-player-selected)',
+        'df-conditional-bg': 'var(--color-df-conditional-bg)',
+        'df-conditional-border': 'var(--color-df-conditional-border)',
+        'df-conditional-header': 'var(--color-df-conditional-header)',
+        'df-conditional-text': 'var(--color-df-conditional-text)',
+        'df-start': 'var(--color-df-start)',
+        'df-start-bg': 'var(--color-df-start-bg)',
+        'df-end': 'var(--color-df-end)',
+        'df-end-bg': 'var(--color-df-end-bg)',
+        'df-edge-default': 'var(--color-df-edge-default)',
+        'df-edge-default-hover': 'var(--color-df-edge-default-hover)',
+        'df-edge-choice-1': 'var(--color-df-edge-choice-1)',
+        'df-edge-choice-2': 'var(--color-df-edge-choice-2)',
+        'df-edge-choice-3': 'var(--color-df-edge-choice-3)',
+        'df-edge-choice-4': 'var(--color-df-edge-choice-4)',
+        'df-edge-choice-5': 'var(--color-df-edge-choice-5)',
+        'df-edge-loop': 'var(--color-df-edge-loop)',
+        'df-edge-dimmed': 'var(--color-df-edge-dimmed)',
+        'df-error': 'var(--color-df-error)',
+        'df-error-bg': 'var(--color-df-error-bg)',
+        'df-warning': 'var(--color-df-warning)',
+        'df-warning-bg': 'var(--color-df-warning-bg)',
+        'df-success': 'var(--color-df-success)',
+        'df-success-bg': 'var(--color-df-success-bg)',
+        'df-info': 'var(--color-df-info)',
+        'df-info-bg': 'var(--color-df-info-bg)',
+        'df-text-primary': 'var(--color-df-text-primary)',
+        'df-text-secondary': 'var(--color-df-text-secondary)',
+        'df-text-tertiary': 'var(--color-df-text-tertiary)',
+        'df-text-muted': 'var(--color-df-text-muted)',
+        'df-control-bg': 'var(--color-df-control-bg)',
+        'df-control-border': 'var(--color-df-control-border)',
+        'df-control-hover': 'var(--color-df-control-hover)',
+        'df-control-active': 'var(--color-df-control-active)',
+        'df-flag-dialogue': 'var(--color-df-flag-dialogue)',
+        'df-flag-dialogue-bg': 'var(--color-df-flag-dialogue-bg)',
+        'df-flag-quest': 'var(--color-df-flag-quest)',
+        'df-flag-quest-bg': 'var(--color-df-flag-quest-bg)',
+        'df-flag-achievement': 'var(--color-df-flag-achievement)',
+        'df-flag-achievement-bg': 'var(--color-df-flag-achievement-bg)',
+        'df-flag-item': 'var(--color-df-flag-item)',
+        'df-flag-item-bg': 'var(--color-df-flag-item-bg)',
+        'df-flag-stat': 'var(--color-df-flag-stat)',
+        'df-flag-stat-bg': 'var(--color-df-flag-stat-bg)',
+        'df-flag-title': 'var(--color-df-flag-title)',
+        'df-flag-title-bg': 'var(--color-df-flag-title-bg)',
+        'df-flag-global': 'var(--color-df-flag-global)',
+        'df-flag-global-bg': 'var(--color-df-flag-global-bg)',
+        'df-canvas-bg': 'var(--color-df-canvas-bg)',
+        'df-canvas-grid': 'var(--color-df-canvas-grid)',
+        'df-sidebar-bg': 'var(--color-df-sidebar-bg)',
+        'df-sidebar-border': 'var(--color-df-sidebar-border)',
+        'df-editor-bg': 'var(--color-df-editor-bg)',
+        'df-editor-border': 'var(--color-df-editor-border)',
+      },
+    },
+  },
+  plugins: [],
+};
+
+export default config;
+

package/demo/tsconfig.json

@@ -0,0 +1,42 @@
+{
+  "compilerOptions": {
+    "target": "ES2017",
+    "lib": [
+      "dom",
+      "dom.iterable",
+      "esnext"
+    ],
+    "allowJs": true,
+    "skipLibCheck": true,
+    "strict": true,
+    "noEmit": true,
+    "esModuleInterop": true,
+    "module": "esnext",
+    "moduleResolution": "bundler",
+    "resolveJsonModule": true,
+    "isolatedModules": true,
+    "jsx": "react-jsx",
+    "incremental": true,
+    "plugins": [
+      {
+        "name": "next"
+      }
+    ],
+    "paths": {
+      "@magicborn/*": [
+        "../../packages/*",
+        "../../packages-shared/*"
+      ]
+    }
+  },
+  "include": [
+    "next-env.d.ts",
+    "**/*.ts",
+    "**/*.tsx",
+    ".next/types/**/*.ts",
+    ".next/dev/types/**/*.ts"
+  ],
+  "exclude": [
+    "node_modules"
+  ]
+}

package/dist/components/ChoiceEdgeV2.d.ts

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

package/dist/components/ChoiceEdgeV2.js

@@ -0,0 +1,103 @@
+"use strict";
+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.ChoiceEdgeV2 = ChoiceEdgeV2;
+const react_1 = __importStar(require("react"));
+const reactflow_1 = require("reactflow");
+function ChoiceEdgeV2({ id, sourceX, sourceY, sourcePosition, targetX, targetY, targetPosition, data, selected, }) {
+    const [hovered, setHovered] = (0, react_1.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
+        ? (0, reactflow_1.getBezierPath)({
+            sourceX,
+            sourceY,
+            sourcePosition,
+            targetX,
+            targetY,
+            targetPosition,
+            curvature: 0.5,
+        })
+        : (0, reactflow_1.getSmoothStepPath)({
+            sourceX,
+            sourceY,
+            sourcePosition: sourcePosition || reactflow_1.Position.Bottom,
+            targetX,
+            targetY,
+            targetPosition: targetPosition || reactflow_1.Position.Top,
+            borderRadius: 8,
+        });
+    const choiceIndex = data?.choiceIndex ?? 0;
+    // Map choice index to CSS variable
+    const choiceColorVar = `var(--color-df-edge-choice-${Math.min(choiceIndex % 5, 4) + 1})`;
+    // Use loop color for back edges, otherwise use choice color
+    const colorVar = isBackEdge ? 'var(--color-df-edge-loop)' : choiceColorVar;
+    const isSelected = selected || hovered;
+    const isDimmed = data?.isDimmed ?? false;
+    // Make edge thicker and more opaque when hovered or selected
+    // Dim edges not in path when highlighting is on
+    const strokeWidth = isSelected ? 4 : 2;
+    const opacity = isDimmed ? 0.15 : (isSelected ? 1 : 0.7);
+    // Use dimmed color when dimmed
+    const strokeColor = isDimmed ? 'var(--color-df-edge-dimmed)' : colorVar;
+    // Add glow effect when hovered (only if not dimmed)
+    const filter = hovered && !isDimmed ? `drop-shadow(0 0 4px ${colorVar})` : undefined;
+    // For pulse animation, we'll use a slightly brighter version
+    // Since we can't easily brighten CSS variables, we'll use the same color with higher opacity
+    const pulseColor = colorVar;
+    const shouldAnimate = data?.isInPathToSelected ?? false;
+    return (react_1.default.createElement(react_1.default.Fragment, null,
+        react_1.default.createElement("path", { d: edgePath, fill: "none", stroke: "transparent", strokeWidth: 20, style: { cursor: 'pointer', pointerEvents: 'all' }, onMouseEnter: () => setHovered(true), onMouseLeave: () => setHovered(false) }),
+        react_1.default.createElement(reactflow_1.BaseEdge, { id: id, path: edgePath, style: {
+                stroke: strokeColor,
+                strokeWidth,
+                opacity,
+                cursor: 'pointer',
+                transition: 'all 0.2s ease',
+                pointerEvents: 'none',
+                filter,
+                // Dashed line for back edges
+                strokeDasharray: isBackEdge ? '8 4' : undefined,
+            }, markerEnd: isDimmed ? undefined : `url(#react-flow__arrowclosed-choice-${choiceIndex})` }),
+        isBackEdge && (react_1.default.createElement("g", { transform: `translate(${labelX - 10}, ${labelY - 10})` },
+            react_1.default.createElement("circle", { cx: "10", cy: "10", r: "12", fill: "var(--color-df-base)", stroke: strokeColor, strokeWidth: "2" }),
+            react_1.default.createElement("text", { x: "10", y: "14", textAnchor: "middle", fontSize: "12", fill: strokeColor }, "\u21BA"))),
+        shouldAnimate && (react_1.default.createElement("circle", { r: "6", fill: pulseColor, opacity: 0.9 },
+            react_1.default.createElement("animateMotion", { dur: "2s", repeatCount: "indefinite", path: edgePath }))),
+        react_1.default.createElement("defs", null,
+            react_1.default.createElement("marker", { id: `react-flow__arrowclosed-choice-${choiceIndex}`, markerWidth: "12.5", markerHeight: "12.5", viewBox: "-10 -10 20 20", markerUnits: "strokeWidth", orient: "auto", refX: "0", refY: "0" },
+                react_1.default.createElement("polyline", { stroke: colorVar, strokeLinecap: "round", strokeLinejoin: "round", fill: colorVar, points: "-5,-4 0,0 -5,4 -5,-4" })))));
+}

package/dist/components/CodeBlock.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface CodeBlockProps {
+    code: string;
+    language?: string;
+    className?: string;
+}
+export declare function CodeBlock({ code, language, className }: CodeBlockProps): React.JSX.Element;
+export {};

package/dist/components/CodeBlock.js

@@ -0,0 +1,24 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.CodeBlock = CodeBlock;
+const react_1 = __importDefault(require("react"));
+const react_syntax_highlighter_1 = require("react-syntax-highlighter");
+const prism_1 = require("react-syntax-highlighter/dist/esm/styles/prism");
+function CodeBlock({ code, language = 'typescript', className = '' }) {
+    return (react_1.default.createElement("div", { className: `bg-[#12121a] rounded border border-[#2a2a3e] overflow-hidden ${className}` },
+        react_1.default.createElement(react_syntax_highlighter_1.Prism, { language: language, style: prism_1.vscDarkPlus, customStyle: {
+                margin: 0,
+                padding: '1rem',
+                background: '#12121a',
+                fontSize: '0.75rem',
+                lineHeight: '1.5',
+                borderRadius: 0,
+            }, codeTagProps: {
+                style: {
+                    fontFamily: 'ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace',
+                }
+            }, PreTag: "div" }, code)));
+}

package/dist/components/ConditionAutocomplete.d.ts

@@ -0,0 +1,14 @@
+import React from 'react';
+import { FlagSchema } from '../types/flags';
+interface ConditionAutocompleteProps {
+    value: string;
+    onChange: (value: string) => void;
+    onBlur?: () => void;
+    placeholder?: string;
+    className?: string;
+    style?: React.CSSProperties;
+    flagSchema?: FlagSchema;
+    textarea?: boolean;
+}
+export declare function ConditionAutocomplete({ value, onChange, onBlur, placeholder, className, style, flagSchema, textarea }: ConditionAutocompleteProps): React.JSX.Element;
+export {};

package/dist/components/ConditionAutocomplete.js

@@ -0,0 +1,284 @@
+"use strict";
+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.ConditionAutocomplete = ConditionAutocomplete;
+const react_1 = __importStar(require("react"));
+const lucide_react_1 = require("lucide-react");
+function getFlagIcon(flagType) {
+    switch (flagType) {
+        case 'quest':
+            return lucide_react_1.BookOpen;
+        case 'achievement':
+            return lucide_react_1.Trophy;
+        case 'item':
+            return lucide_react_1.Package;
+        case 'stat':
+            return lucide_react_1.TrendingUp;
+        case 'title':
+            return lucide_react_1.Crown;
+        case 'global':
+            return lucide_react_1.Globe;
+        case 'dialogue':
+        default:
+            return lucide_react_1.MessageSquare;
+    }
+}
+function getFlagColorClasses(flagType) {
+    switch (flagType) {
+        case 'quest':
+            return 'bg-blue-500/20 text-blue-400 border-blue-500/30';
+        case 'achievement':
+            return 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30';
+        case 'item':
+            return 'bg-green-500/20 text-green-400 border-green-500/30';
+        case 'stat':
+            return 'bg-purple-500/20 text-purple-400 border-purple-500/30';
+        case 'title':
+            return 'bg-pink-500/20 text-pink-400 border-pink-500/30';
+        case 'global':
+            return 'bg-orange-500/20 text-orange-400 border-orange-500/30';
+        case 'dialogue':
+        default:
+            return 'bg-gray-500/20 text-gray-400 border-gray-500/30';
+    }
+}
+function ConditionAutocomplete({ value, onChange, onBlur, placeholder, className = '', style, flagSchema, textarea = false }) {
+    const [showSuggestions, setShowSuggestions] = (0, react_1.useState)(false);
+    const [selectedIndex, setSelectedIndex] = (0, react_1.useState)(0);
+    const [cursorPosition, setCursorPosition] = (0, react_1.useState)(0);
+    const [debouncedSearchTerm, setDebouncedSearchTerm] = (0, react_1.useState)('');
+    const containerRef = (0, react_1.useRef)(null);
+    const inputRef = (0, react_1.useRef)(null);
+    const debounceTimerRef = (0, react_1.useRef)(null);
+    // Extract the current word being typed (for autocomplete matching)
+    const currentWord = (0, react_1.useMemo)(() => {
+        const textBeforeCursor = value.substring(0, cursorPosition);
+        const match = textBeforeCursor.match(/(\$?\w*)$/);
+        return match ? match[1] : '';
+    }, [value, cursorPosition]);
+    // Debounce search term for better performance
+    (0, react_1.useEffect)(() => {
+        if (debounceTimerRef.current) {
+            clearTimeout(debounceTimerRef.current);
+        }
+        debounceTimerRef.current = setTimeout(() => {
+            setDebouncedSearchTerm(currentWord);
+        }, 300); // 300ms debounce for smoother experience
+        return () => {
+            if (debounceTimerRef.current) {
+                clearTimeout(debounceTimerRef.current);
+            }
+        };
+    }, [currentWord]);
+    // Generate suggestions based on current input (using debounced search term)
+    const suggestions = (0, react_1.useMemo)(() => {
+        const result = [];
+        const word = debouncedSearchTerm.toLowerCase();
+        const isTypingVariable = word.startsWith('$') || word.length > 0;
+        // If typing a variable (starts with $ or has text), show flags
+        if (flagSchema && (isTypingVariable || word === '')) {
+            const searchTerm = word.startsWith('$') ? word.substring(1) : word;
+            flagSchema.flags.forEach(flag => {
+                const flagId = flag.id.toLowerCase();
+                const flagName = flag.name.toLowerCase();
+                // Match if search term is empty (showing $ or empty field) or matches flag id/name
+                if (!searchTerm || flagId.includes(searchTerm) || flagName.includes(searchTerm)) {
+                    result.push({
+                        type: 'flag',
+                        label: `$${flag.id}`, // Show with dollar sign
+                        insert: `$${flag.id}`,
+                        description: flag.name,
+                        flagType: flag.type
+                    });
+                }
+            });
+        }
+        // Show operators and keywords when user has typed $ or is actively typing
+        if (word === '$' || (word.startsWith('$') && word.length > 1)) {
+            // Operators - only show when user has typed $ and is looking for what comes next
+            result.push({ type: 'operator', label: '==', insert: ' == ', description: 'Equals' }, { type: 'operator', label: '!=', insert: ' != ', description: 'Not equals' }, { type: 'operator', label: '>=', insert: ' >= ', description: 'Greater than or equal' }, { type: 'operator', label: '<=', insert: ' <= ', description: 'Less than or equal' }, { type: 'operator', label: '>', insert: ' > ', description: 'Greater than' }, { type: 'operator', label: '<', insert: ' < ', description: 'Less than' });
+            // Keywords
+            result.push({ type: 'keyword', label: 'and', insert: ' and ', description: 'Logical AND' }, { type: 'keyword', label: 'not', insert: 'not ', description: 'Logical NOT' });
+        }
+        // Limit results
+        return result.slice(0, 20);
+    }, [debouncedSearchTerm, flagSchema]);
+    // Handle input change
+    const handleChange = (e) => {
+        const newValue = e.target.value;
+        const newCursorPos = e.target.selectionStart || 0;
+        // Mark that user has actively typed
+        setHasActivelyTyped(true);
+        onChange(newValue);
+        setCursorPosition(newCursorPos);
+    };
+    // Track if user has actively typed in this session (not just focused on existing content)
+    const [hasActivelyTyped, setHasActivelyTyped] = (0, react_1.useState)(false);
+    // Update suggestions visibility when value or cursor changes
+    // Show suggestions when typing $ or when actively typing
+    (0, react_1.useEffect)(() => {
+        const textBeforeCursor = value.substring(0, cursorPosition);
+        const match = textBeforeCursor.match(/(\$?\w*)$/);
+        const word = match ? match[1] : '';
+        // Show suggestions when:
+        // 1. User is typing a variable (starts with $) OR
+        // 2. User has actively typed something and we have suggestions OR
+        // 3. Field is empty and user just focused (allow showing on empty field when typing $)
+        const isTypingVariable = word.startsWith('$') || word === '$';
+        const isEmpty = value.trim() === '';
+        const shouldShow = (hasActivelyTyped || isTypingVariable || isEmpty) && suggestions.length > 0;
+        setShowSuggestions(shouldShow);
+    }, [value, cursorPosition, suggestions.length, hasActivelyTyped]);
+    // Handle selection change (for cursor tracking)
+    const handleSelect = (e) => {
+        const target = e.currentTarget;
+        setCursorPosition(target.selectionStart || 0);
+    };
+    // Handle keydown
+    const handleKeyDown = (e) => {
+        if (!showSuggestions || suggestions.length === 0) {
+            if (e.key === 'Escape' && onBlur) {
+                onBlur();
+            }
+            return;
+        }
+        if (e.key === 'ArrowDown') {
+            e.preventDefault();
+            setSelectedIndex(prev => (prev + 1) % suggestions.length);
+        }
+        else if (e.key === 'ArrowUp') {
+            e.preventDefault();
+            setSelectedIndex(prev => (prev - 1 + suggestions.length) % suggestions.length);
+        }
+        else if (e.key === 'Enter' || e.key === 'Tab') {
+            e.preventDefault();
+            insertSuggestion(suggestions[selectedIndex]);
+        }
+        else if (e.key === 'Escape') {
+            setShowSuggestions(false);
+        }
+    };
+    // Insert suggestion at cursor position
+    const insertSuggestion = (0, react_1.useCallback)((suggestion) => {
+        const textBeforeCursor = value.substring(0, cursorPosition);
+        const textAfterCursor = value.substring(cursorPosition);
+        // Find the start of the current word
+        const wordMatch = textBeforeCursor.match(/(\$?\w*)$/);
+        const wordStart = wordMatch ? cursorPosition - wordMatch[1].length : cursorPosition;
+        // Replace the current word with the suggestion
+        const newText = value.substring(0, wordStart) +
+            suggestion.insert +
+            textAfterCursor;
+        onChange(newText);
+        // Set cursor position after inserted text
+        const newCursorPos = wordStart + suggestion.insert.length;
+        setTimeout(() => {
+            if (inputRef.current) {
+                inputRef.current.setSelectionRange(newCursorPos, newCursorPos);
+                inputRef.current.focus();
+            }
+        }, 0);
+        setShowSuggestions(false);
+        setSelectedIndex(0);
+    }, [value, cursorPosition, onChange]);
+    // Handle drag start for draggable suggestions
+    const handleDragStart = (0, react_1.useCallback)((e, suggestion) => {
+        e.dataTransfer.setData('text/plain', suggestion.insert);
+        e.dataTransfer.effectAllowed = 'copy';
+    }, []);
+    // Handle click outside
+    (0, react_1.useEffect)(() => {
+        const handleClickOutside = (event) => {
+            if (containerRef.current && !containerRef.current.contains(event.target)) {
+                setShowSuggestions(false);
+            }
+        };
+        document.addEventListener('mousedown', handleClickOutside);
+        return () => document.removeEventListener('mousedown', handleClickOutside);
+    }, []);
+    const InputComponent = textarea ? 'textarea' : 'input';
+    const inputProps = {
+        ref: inputRef,
+        type: textarea ? undefined : 'text',
+        value,
+        onChange: handleChange,
+        onSelect: handleSelect,
+        onKeyDown: handleKeyDown,
+        onFocus: () => {
+            if (inputRef.current) {
+                setCursorPosition(inputRef.current.selectionStart || 0);
+            }
+            // Don't reset hasActivelyTyped on focus - allow showing suggestions if field is empty or has $
+            // This allows suggestions to show when user focuses and types $
+        },
+        onBlur: () => {
+            // Delay to allow click on suggestion
+            setTimeout(() => {
+                if (onBlur)
+                    onBlur();
+            }, 200);
+        },
+        placeholder,
+        className,
+    };
+    if (style) {
+        inputProps.style = style;
+    }
+    return (react_1.default.createElement("div", { className: "relative", ref: containerRef },
+        react_1.default.createElement(InputComponent, { ...inputProps }),
+        showSuggestions && suggestions.length > 0 && (react_1.default.createElement("div", { className: "absolute z-50 mt-1 w-full bg-[#1a1a2e] border border-[#2a2a3e] rounded-lg shadow-xl max-h-64 overflow-y-auto" }, suggestions.map((suggestion, idx) => {
+            const isSelected = idx === selectedIndex;
+            const IconComponent = suggestion.type === 'flag' && suggestion.flagType
+                ? getFlagIcon(suggestion.flagType)
+                : null;
+            // Get color classes for operators and keywords
+            const operatorColorClasses = 'bg-purple-500/20 text-purple-400 border-purple-500/30';
+            const keywordColorClasses = 'bg-blue-500/20 text-blue-400 border-blue-500/30';
+            return (react_1.default.createElement("button", { key: `${suggestion.type}-${suggestion.label}-${idx}`, type: "button", onClick: () => insertSuggestion(suggestion), onMouseEnter: () => setSelectedIndex(idx), draggable: true, onDragStart: (e) => handleDragStart(e, suggestion), className: `w-full text-left px-3 py-2 text-sm flex items-center gap-2 transition-colors ${isSelected
+                    ? 'bg-[#2a2a3e] text-white'
+                    : 'text-gray-300 hover:bg-[#252538]'}`, style: { minHeight: 'auto', height: 'auto' } },
+                suggestion.type === 'flag' && suggestion.flagType && (react_1.default.createElement(react_1.default.Fragment, null,
+                    IconComponent && (react_1.default.createElement(IconComponent, { size: 14, className: `flex-shrink-0 ${getFlagColorClasses(suggestion.flagType).split(' ')[1]}` })),
+                    react_1.default.createElement("span", { className: `text-xs px-2 py-1 rounded border flex-shrink-0 font-medium whitespace-nowrap ${getFlagColorClasses(suggestion.flagType)}` }, suggestion.label),
+                    suggestion.description && (react_1.default.createElement("span", { className: "text-[10px] text-gray-500 truncate flex-1 min-w-0 ml-1" }, suggestion.description)),
+                    react_1.default.createElement("span", { className: `text-[10px] px-1.5 py-0.5 rounded border flex-shrink-0 whitespace-nowrap ${getFlagColorClasses(suggestion.flagType)}` }, suggestion.flagType === 'dialogue' ? 'temp' : suggestion.flagType))),
+                suggestion.type === 'operator' && (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement("span", { className: `text-xs px-2 py-1 rounded border flex-shrink-0 font-mono font-medium whitespace-nowrap ${operatorColorClasses}` }, suggestion.label),
+                    suggestion.description && (react_1.default.createElement("span", { className: "text-[10px] text-gray-500 truncate flex-1 min-w-0 ml-1" }, suggestion.description)))),
+                suggestion.type === 'keyword' && (react_1.default.createElement(react_1.default.Fragment, null,
+                    react_1.default.createElement("span", { className: `text-xs px-2 py-1 rounded border flex-shrink-0 font-mono font-medium whitespace-nowrap ${keywordColorClasses}` }, suggestion.label),
+                    suggestion.description && (react_1.default.createElement("span", { className: "text-[10px] text-gray-500 truncate flex-1 min-w-0 ml-1" }, suggestion.description))))));
+        })))));
+}

package/dist/components/ConditionalNodeV2.d.ts

@@ -0,0 +1,16 @@
+import React from 'react';
+import { NodeProps } from 'reactflow';
+import { DialogueNode } from '../types';
+import { FlagSchema } from '../types/flags';
+import { LayoutDirection } from '../utils/layout';
+interface ConditionalNodeData {
+    node: DialogueNode;
+    flagSchema?: FlagSchema;
+    isDimmed?: boolean;
+    isInPath?: boolean;
+    layoutDirection?: LayoutDirection;
+    isStartNode?: boolean;
+    isEndNode?: boolean;
+}
+export declare function ConditionalNodeV2({ data, selected }: NodeProps<ConditionalNodeData>): React.JSX.Element;
+export {};