@magicborn/dialogue-forge 0.1.0

package/dist/components/EdgeIcon.d.ts

@@ -0,0 +1,8 @@
+import React from 'react';
+interface EdgeIconProps {
+    color?: string;
+    size?: number;
+    className?: string;
+}
+export declare function EdgeIcon({ color, size, className }: EdgeIconProps): React.JSX.Element;
+export {};

package/dist/components/EdgeIcon.js

@@ -0,0 +1,13 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.EdgeIcon = EdgeIcon;
+const react_1 = __importDefault(require("react"));
+function EdgeIcon({ color = 'currentColor', size = 24, className = '' }) {
+    return (react_1.default.createElement("svg", { width: size, height: size, viewBox: "0 0 24 24", fill: "none", xmlns: "http://www.w3.org/2000/svg", className: className },
+        react_1.default.createElement("circle", { cx: "6", cy: "12", r: "2", fill: color }),
+        react_1.default.createElement("circle", { cx: "18", cy: "12", r: "2", fill: color }),
+        react_1.default.createElement("line", { x1: "8", y1: "12", x2: "16", y2: "12", stroke: color, strokeWidth: "2" })));
+}

package/dist/components/ExampleLoader.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { DialogueTree } from '../types';
+import { FlagSchema } from '../types/flags';
+interface ExampleLoaderProps {
+    onLoadDialogue: (dialogue: DialogueTree) => void;
+    onLoadFlags: (flags: FlagSchema) => void;
+    currentDialogue?: DialogueTree;
+    currentFlags?: FlagSchema;
+}
+export declare function ExampleLoader({ onLoadDialogue, onLoadFlags }: ExampleLoaderProps): React.JSX.Element;
+export {};

package/dist/components/ExampleLoader.js

@@ -0,0 +1,52 @@
+"use strict";
+var __importDefault = (this && this.__importDefault) || function (mod) {
+    return (mod && mod.__esModule) ? mod : { "default": mod };
+};
+Object.defineProperty(exports, "__esModule", { value: true });
+exports.ExampleLoader = ExampleLoader;
+const react_1 = __importDefault(require("react"));
+const examples_1 = require("../examples");
+function ExampleLoader({ onLoadDialogue, onLoadFlags }) {
+    const handleDialogueChange = (e) => {
+        const name = e.target.value;
+        if (name) {
+            const dialogue = (0, examples_1.getExampleDialogue)(name);
+            if (dialogue) {
+                onLoadDialogue(dialogue);
+            }
+        }
+    };
+    const handleFlagsChange = (e) => {
+        const name = e.target.value;
+        if (name) {
+            const flags = (0, examples_1.getDemoFlagSchema)(name);
+            if (flags) {
+                onLoadFlags(flags);
+            }
+        }
+    };
+    return (react_1.default.createElement("div", { className: "flex items-center gap-3" },
+        react_1.default.createElement("select", { onChange: handleDialogueChange, defaultValue: "", className: "bg-[#12121a] border border-[#2a2a3e] text-white text-sm px-3 py-1.5 rounded hover:border-[#3a3a4e] focus:outline-none focus:border-[#e94560] cursor-pointer", title: "Load Dialogue Example" },
+            react_1.default.createElement("option", { value: "", disabled: true }, "Dialogue Example..."),
+            (0, examples_1.listExamples)().map(name => {
+                const dialogue = (0, examples_1.getExampleDialogue)(name);
+                if (!dialogue)
+                    return null;
+                const nodeCount = Object.keys(dialogue.nodes).length;
+                return (react_1.default.createElement("option", { key: name, value: name },
+                    dialogue.title,
+                    " (",
+                    nodeCount,
+                    " nodes)"));
+            }).filter(Boolean)),
+        react_1.default.createElement("select", { onChange: handleFlagsChange, defaultValue: "", className: "bg-[#12121a] border border-[#2a2a3e] text-white text-sm px-3 py-1.5 rounded hover:border-[#3a3a4e] focus:outline-none focus:border-[#e94560] cursor-pointer", title: "Load Flag Schema" },
+            react_1.default.createElement("option", { value: "", disabled: true }, "Flag Schema..."),
+            (0, examples_1.listDemoFlagSchemas)().map(name => {
+                const flags = (0, examples_1.getDemoFlagSchema)(name);
+                return (react_1.default.createElement("option", { key: name, value: name },
+                    name.charAt(0).toUpperCase() + name.slice(1),
+                    " (",
+                    flags?.flags.length || 0,
+                    " flags)"));
+            }))));
+}

package/dist/components/ExampleLoaderButton.d.ts

@@ -0,0 +1,15 @@
+/**
+ * ExampleLoaderButton - Compact button for loading examples
+ *
+ * Debug tool for loading example dialogues and flag schemas.
+ * Only shown when ENABLE_DEBUG_TOOLS is true.
+ */
+import React from 'react';
+import { DialogueTree } from '../types';
+import { FlagSchema } from '../types/flags';
+interface ExampleLoaderButtonProps {
+    onLoadDialogue: (dialogue: DialogueTree) => void;
+    onLoadFlags: (flags: FlagSchema) => void;
+}
+export declare function ExampleLoaderButton({ onLoadDialogue, onLoadFlags }: ExampleLoaderButtonProps): React.JSX.Element;
+export {};

package/dist/components/ExampleLoaderButton.js

@@ -0,0 +1,102 @@
+"use strict";
+/**
+ * ExampleLoaderButton - Compact button for loading examples
+ *
+ * Debug tool for loading example dialogues and flag schemas.
+ * Only shown when ENABLE_DEBUG_TOOLS is true.
+ */
+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.ExampleLoaderButton = ExampleLoaderButton;
+const react_1 = __importStar(require("react"));
+const examples_1 = require("../examples");
+const lucide_react_1 = require("lucide-react");
+function ExampleLoaderButton({ onLoadDialogue, onLoadFlags }) {
+    const [showMenu, setShowMenu] = (0, react_1.useState)(false);
+    const handleDialogueChange = (name) => {
+        const dialogue = (0, examples_1.getExampleDialogue)(name);
+        if (dialogue) {
+            onLoadDialogue(dialogue);
+            setShowMenu(false);
+        }
+    };
+    const handleFlagsChange = (name) => {
+        const flags = (0, examples_1.getDemoFlagSchema)(name);
+        if (flags) {
+            onLoadFlags(flags);
+            setShowMenu(false);
+        }
+    };
+    return (react_1.default.createElement("div", { className: "relative" },
+        react_1.default.createElement("button", { onClick: () => setShowMenu(!showMenu), className: `p-1.5 rounded transition-colors ${showMenu
+                ? 'bg-[#e94560]/20 text-[#e94560] border border-[#e94560]/50'
+                : 'bg-[#12121a] border border-[#2a2a3e] text-gray-400 hover:text-white hover:border-[#3a3a4e]'}`, title: "Load Examples (Debug Tool)" },
+            react_1.default.createElement(lucide_react_1.FileCode, { size: 14 })),
+        showMenu && (react_1.default.createElement("div", { className: "absolute left-full ml-2 top-0 z-50 bg-[#0d0d14] border border-[#2a2a3e] rounded-lg shadow-xl p-1 min-w-[250px]" },
+            react_1.default.createElement("div", { className: "text-[10px] text-gray-500 uppercase tracking-wider px-2 py-1 border-b border-[#2a2a3e]" }, "Load Examples"),
+            react_1.default.createElement("div", { className: "px-2 py-1" },
+                react_1.default.createElement("div", { className: "text-xs text-gray-400 mb-1" }, "Dialogue Examples"),
+                react_1.default.createElement("select", { onChange: (e) => {
+                        if (e.target.value)
+                            handleDialogueChange(e.target.value);
+                    }, defaultValue: "", className: "w-full bg-[#12121a] border border-[#2a2a3e] text-white text-xs px-2 py-1.5 rounded hover:border-[#3a3a4e] focus:outline-none focus:border-[#e94560] cursor-pointer" },
+                    react_1.default.createElement("option", { value: "" }, "Select dialogue..."),
+                    (0, examples_1.listExamples)().map(name => {
+                        const dialogue = (0, examples_1.getExampleDialogue)(name);
+                        if (!dialogue)
+                            return null;
+                        const nodeCount = Object.keys(dialogue.nodes).length;
+                        return (react_1.default.createElement("option", { key: name, value: name },
+                            dialogue.title,
+                            " (",
+                            nodeCount,
+                            " nodes)"));
+                    }).filter(Boolean))),
+            react_1.default.createElement("div", { className: "px-2 py-1 border-t border-[#2a2a3e]" },
+                react_1.default.createElement("div", { className: "text-xs text-gray-400 mb-1" }, "Flag Schemas"),
+                react_1.default.createElement("select", { onChange: (e) => {
+                        if (e.target.value)
+                            handleFlagsChange(e.target.value);
+                    }, defaultValue: "", className: "w-full bg-[#12121a] border border-[#2a2a3e] text-white text-xs px-2 py-1.5 rounded hover:border-[#3a3a4e] focus:outline-none focus:border-[#e94560] cursor-pointer" },
+                    react_1.default.createElement("option", { value: "" }, "Select schema..."),
+                    (0, examples_1.listDemoFlagSchemas)().map(name => {
+                        const flags = (0, examples_1.getDemoFlagSchema)(name);
+                        return (react_1.default.createElement("option", { key: name, value: name },
+                            name.charAt(0).toUpperCase() + name.slice(1),
+                            " (",
+                            flags?.flags.length || 0,
+                            " flags)"));
+                    })))))));
+}

package/dist/components/FlagManager.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { FlagSchema } from '../types/flags';
+import { DialogueTree } from '../types';
+interface FlagManagerProps {
+    flagSchema: FlagSchema;
+    dialogue?: DialogueTree;
+    onUpdate: (schema: FlagSchema) => void;
+    onClose: () => void;
+}
+export declare function FlagManager({ flagSchema, dialogue, onUpdate, onClose }: FlagManagerProps): React.JSX.Element;
+export {};

package/dist/components/FlagManager.js

@@ -0,0 +1,282 @@
+"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.FlagManager = FlagManager;
+const react_1 = __importStar(require("react"));
+const flagTypeColors = {
+    dialogue: 'bg-gray-500/20 text-gray-400 border-gray-500/30',
+    quest: 'bg-blue-500/20 text-blue-400 border-blue-500/30',
+    achievement: 'bg-yellow-500/20 text-yellow-400 border-yellow-500/30',
+    item: 'bg-green-500/20 text-green-400 border-green-500/30',
+    stat: 'bg-purple-500/20 text-purple-400 border-purple-500/30',
+    title: 'bg-pink-500/20 text-pink-400 border-pink-500/30',
+    global: 'bg-orange-500/20 text-orange-400 border-orange-500/30',
+};
+const flagTypeLabels = {
+    dialogue: 'Dialogue',
+    quest: 'Quest',
+    achievement: 'Achievement',
+    item: 'Item',
+    stat: 'Stat',
+    title: 'Title',
+    global: 'Global',
+};
+const flagTypeIcons = {
+    dialogue: '💬',
+    quest: '📜',
+    achievement: '🏆',
+    item: '🎒',
+    stat: '📊',
+    title: '👑',
+    global: '🌐',
+};
+function FlagManager({ flagSchema, dialogue, onUpdate, onClose }) {
+    const [editingFlag, setEditingFlag] = (0, react_1.useState)(null);
+    const [isCreating, setIsCreating] = (0, react_1.useState)(false);
+    const [selectedSection, setSelectedSection] = (0, react_1.useState)('all');
+    // Find all flags used in the dialogue tree
+    const usedFlags = (0, react_1.useMemo)(() => {
+        if (!dialogue)
+            return new Set();
+        const used = new Set();
+        Object.values(dialogue.nodes).forEach(node => {
+            if (node.setFlags) {
+                node.setFlags.forEach(flagId => used.add(flagId));
+            }
+            if (node.choices) {
+                node.choices.forEach(choice => {
+                    if (choice.setFlags) {
+                        choice.setFlags.forEach(flagId => used.add(flagId));
+                    }
+                    if (choice.conditions) {
+                        choice.conditions.forEach(cond => used.add(cond.flag));
+                    }
+                });
+            }
+        });
+        return used;
+    }, [dialogue]);
+    // Group flags by type
+    const flagsByType = (0, react_1.useMemo)(() => {
+        const grouped = {
+            all: flagSchema.flags,
+        };
+        Object.keys(flagTypeLabels).forEach(type => {
+            grouped[type] = flagSchema.flags.filter(f => f.type === type);
+        });
+        return grouped;
+    }, [flagSchema.flags]);
+    const currentFlags = flagsByType[selectedSection] || [];
+    const handleCreateFlag = (type) => {
+        const newFlag = {
+            id: 'new_flag',
+            name: 'New Flag',
+            type: type || 'dialogue',
+        };
+        setEditingFlag(newFlag);
+        setIsCreating(true);
+    };
+    const handleSaveFlag = (flag) => {
+        if (isCreating) {
+            onUpdate({
+                ...flagSchema,
+                flags: [...flagSchema.flags, flag]
+            });
+            setIsCreating(false);
+        }
+        else {
+            onUpdate({
+                ...flagSchema,
+                flags: flagSchema.flags.map(f => f.id === flag.id ? flag : f)
+            });
+        }
+        setEditingFlag(null);
+    };
+    const handleDeleteFlag = (flagId) => {
+        if (confirm(`Delete flag "${flagId}"?`)) {
+            onUpdate({
+                ...flagSchema,
+                flags: flagSchema.flags.filter(f => f.id !== flagId)
+            });
+        }
+    };
+    // Get counts for each section
+    const sectionCounts = (0, react_1.useMemo)(() => {
+        const counts = { all: flagSchema.flags.length };
+        Object.keys(flagTypeLabels).forEach(type => {
+            counts[type] = flagsByType[type].length;
+        });
+        return counts;
+    }, [flagSchema.flags, flagsByType]);
+    return (react_1.default.createElement("div", { className: "fixed inset-0 bg-black/70 z-50 flex items-center justify-center p-4", onClick: (e) => {
+            if (e.target === e.currentTarget) {
+                onClose();
+            }
+        } },
+        react_1.default.createElement("div", { className: "bg-[#0d0d14] border border-[#1a1a2e] rounded-xl max-w-6xl w-full max-h-[90vh] overflow-hidden flex flex-col", onClick: (e) => e.stopPropagation() },
+            react_1.default.createElement("div", { className: "p-4 border-b border-[#1a1a2e] flex items-center justify-between flex-shrink-0" },
+                react_1.default.createElement("div", null,
+                    react_1.default.createElement("h2", { className: "text-lg font-semibold text-white" }, "Flag Manager"),
+                    react_1.default.createElement("p", { className: "text-xs text-gray-500 mt-1" }, dialogue && (react_1.default.createElement("span", null,
+                        react_1.default.createElement("span", { className: "text-[#e94560] font-semibold" }, usedFlags.size),
+                        react_1.default.createElement("span", { className: "text-gray-500" }, " / "),
+                        react_1.default.createElement("span", { className: "text-gray-400" }, flagSchema.flags.length),
+                        react_1.default.createElement("span", { className: "text-gray-500" }, " flags used in dialogue"))))),
+                react_1.default.createElement("div", { className: "flex gap-2" },
+                    react_1.default.createElement("button", { onClick: () => handleCreateFlag(selectedSection !== 'all' ? selectedSection : undefined), className: "px-3 py-1.5 bg-[#e94560] hover:bg-[#d63850] text-white text-sm rounded flex items-center gap-2" },
+                        react_1.default.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" },
+                            react_1.default.createElement("line", { x1: "12", y1: "5", x2: "12", y2: "19" }),
+                            react_1.default.createElement("line", { x1: "5", y1: "12", x2: "19", y2: "12" })),
+                        "New Flag"),
+                    react_1.default.createElement("button", { onClick: (e) => {
+                            e.stopPropagation();
+                            onClose();
+                        }, className: "p-1.5 text-gray-400 hover:text-white transition-colors", title: "Close" },
+                        react_1.default.createElement("svg", { width: "20", height: "20", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" },
+                            react_1.default.createElement("line", { x1: "18", y1: "6", x2: "6", y2: "18" }),
+                            react_1.default.createElement("line", { x1: "6", y1: "6", x2: "18", y2: "18" }))))),
+            react_1.default.createElement("div", { className: "flex-1 flex overflow-hidden" },
+                react_1.default.createElement("div", { className: "w-64 border-r border-[#1a1a2e] bg-[#12121a] flex flex-col flex-shrink-0" },
+                    react_1.default.createElement("div", { className: "p-4 border-b border-[#1a1a2e]" },
+                        react_1.default.createElement("div", { className: "text-xs text-gray-500 uppercase tracking-wider mb-3" }, "Sections"),
+                        react_1.default.createElement("nav", { className: "space-y-1" },
+                            react_1.default.createElement("button", { onClick: () => setSelectedSection('all'), className: `w-full text-left px-3 py-2 rounded text-sm transition-colors flex items-center justify-between ${selectedSection === 'all'
+                                    ? 'bg-[#e94560]/20 text-[#e94560] border border-[#e94560]/30'
+                                    : 'text-gray-400 hover:bg-[#1a1a2e] hover:text-white'}` },
+                                react_1.default.createElement("span", null, "All Flags"),
+                                react_1.default.createElement("span", { className: "text-xs text-gray-500" }, sectionCounts.all)),
+                            Object.entries(flagTypeLabels).map(([type, label]) => (react_1.default.createElement("button", { key: type, onClick: () => setSelectedSection(type), className: `w-full text-left px-3 py-2 rounded text-sm transition-colors flex items-center justify-between ${selectedSection === type
+                                    ? `${flagTypeColors[type]} border`
+                                    : 'text-gray-400 hover:bg-[#1a1a2e] hover:text-white'}` },
+                                react_1.default.createElement("span", { className: "flex items-center gap-2" },
+                                    react_1.default.createElement("span", null, flagTypeIcons[type]),
+                                    react_1.default.createElement("span", null, label)),
+                                react_1.default.createElement("span", { className: "text-xs text-gray-500" }, sectionCounts[type] || 0)))))),
+                    react_1.default.createElement("div", { className: "p-4 border-t border-[#1a1a2e] mt-auto" },
+                        react_1.default.createElement("div", { className: "text-xs text-gray-500 uppercase tracking-wider mb-2" }, "Info"),
+                        react_1.default.createElement("div", { className: "text-xs text-gray-400 space-y-1" },
+                            react_1.default.createElement("p", null,
+                                react_1.default.createElement("span", { className: "text-gray-500" }, "Dialogue flags"),
+                                " (gray) are temporary and reset after dialogue ends."),
+                            react_1.default.createElement("p", null,
+                                react_1.default.createElement("span", { className: "text-white" }, "Game flags"),
+                                " (colored) persist and affect the entire game.")))),
+                react_1.default.createElement("div", { className: "flex-1 overflow-y-auto" }, editingFlag ? (react_1.default.createElement("div", { className: "p-6" },
+                    react_1.default.createElement(FlagEditor, { flag: editingFlag, categories: flagSchema.categories || [], onSave: handleSaveFlag, onCancel: () => { setEditingFlag(null); setIsCreating(false); } }))) : (react_1.default.createElement("div", { className: "p-6" }, currentFlags.length === 0 ? (react_1.default.createElement("div", { className: "text-center py-12 text-gray-500" },
+                    react_1.default.createElement("p", { className: "mb-4" },
+                        "No ",
+                        selectedSection === 'all' ? '' : flagTypeLabels[selectedSection],
+                        " flags defined yet."),
+                    react_1.default.createElement("button", { onClick: () => handleCreateFlag(selectedSection !== 'all' ? selectedSection : undefined), className: "px-4 py-2 bg-[#e94560] hover:bg-[#d63850] text-white rounded" },
+                        "Create ",
+                        selectedSection === 'all' ? 'a' : flagTypeLabels[selectedSection],
+                        " Flag"))) : (react_1.default.createElement("div", { className: "space-y-2" }, currentFlags.map(flag => {
+                    const isUsed = usedFlags.has(flag.id);
+                    return (react_1.default.createElement("div", { key: flag.id, className: `bg-[#12121a] border rounded-lg p-4 hover:bg-[#1a1a2e] transition-colors ${isUsed ? 'border-l-4 border-l-[#e94560]' : 'border-[#1a1a2e]'}` },
+                        react_1.default.createElement("div", { className: "flex items-start justify-between gap-4" },
+                            react_1.default.createElement("div", { className: "flex-1 min-w-0" },
+                                react_1.default.createElement("div", { className: "flex items-center gap-2 mb-2" },
+                                    react_1.default.createElement("span", { className: `px-2 py-1 rounded text-xs font-medium border ${flagTypeColors[flag.type]}` }, flagTypeLabels[flag.type]),
+                                    react_1.default.createElement("span", { className: "font-mono text-sm text-white" }, flag.id),
+                                    isUsed && (react_1.default.createElement("span", { className: "text-[10px] px-1.5 py-0.5 bg-[#e94560]/20 text-[#e94560] rounded border border-[#e94560]/30" }, "Used"))),
+                                flag.name !== flag.id && (react_1.default.createElement("div", { className: "text-sm text-gray-300 mb-1" }, flag.name)),
+                                flag.description && (react_1.default.createElement("div", { className: "text-xs text-gray-500 mt-1" }, flag.description)),
+                                react_1.default.createElement("div", { className: "flex items-center gap-3 mt-2" },
+                                    flag.category && (react_1.default.createElement("span", { className: "text-xs text-gray-500" },
+                                        "Category: ",
+                                        flag.category)),
+                                    flag.valueType && (react_1.default.createElement("span", { className: "text-xs text-gray-500" },
+                                        "Type: ",
+                                        flag.valueType)),
+                                    flag.defaultValue !== undefined && (react_1.default.createElement("span", { className: "text-xs text-gray-500" },
+                                        "Default: ",
+                                        String(flag.defaultValue))))),
+                            react_1.default.createElement("div", { className: "flex gap-1 flex-shrink-0" },
+                                react_1.default.createElement("button", { onClick: () => setEditingFlag(flag), className: "p-2 text-gray-400 hover:text-white hover:bg-[#2a2a3e] rounded transition-colors", title: "Edit" },
+                                    react_1.default.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" },
+                                        react_1.default.createElement("path", { d: "M11 4H4a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h14a2 2 0 0 0 2-2v-7" }),
+                                        react_1.default.createElement("path", { d: "M18.5 2.5a2.121 2.121 0 0 1 3 3L12 15l-4 1 1-4 9.5-9.5z" }))),
+                                react_1.default.createElement("button", { onClick: () => handleDeleteFlag(flag.id), className: "p-2 text-gray-400 hover:text-red-400 hover:bg-red-500/10 rounded transition-colors", title: "Delete" },
+                                    react_1.default.createElement("svg", { width: "14", height: "14", viewBox: "0 0 24 24", fill: "none", stroke: "currentColor", strokeWidth: "2" },
+                                        react_1.default.createElement("polyline", { points: "3 6 5 6 21 6" }),
+                                        react_1.default.createElement("path", { d: "M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2" })))))));
+                }))))))))));
+}
+function FlagEditor({ flag, categories, onSave, onCancel }) {
+    const [edited, setEdited] = (0, react_1.useState)(flag);
+    const flagTypes = ['dialogue', 'quest', 'achievement', 'item', 'stat', 'title', 'global'];
+    return (react_1.default.createElement("div", { className: "space-y-4 max-w-2xl" },
+        react_1.default.createElement("div", null,
+            react_1.default.createElement("label", { className: "text-xs text-gray-500 uppercase block mb-1" }, "Flag ID"),
+            react_1.default.createElement("input", { type: "text", value: edited.id, onChange: (e) => setEdited({ ...edited, id: e.target.value }), className: "w-full bg-[#12121a] border border-[#2a2a3e] rounded px-2 py-1.5 text-sm text-gray-200 font-mono focus:border-[#e94560] outline-none", placeholder: "quest_dragon_slayer" }),
+            react_1.default.createElement("p", { className: "text-xs text-gray-500 mt-1" }, "Use prefixes: quest_, item_, stat_, etc.")),
+        react_1.default.createElement("div", null,
+            react_1.default.createElement("label", { className: "text-xs text-gray-500 uppercase block mb-1" }, "Display Name"),
+            react_1.default.createElement("input", { type: "text", value: edited.name, onChange: (e) => setEdited({ ...edited, name: e.target.value }), className: "w-full bg-[#12121a] border border-[#2a2a3e] rounded px-2 py-1.5 text-sm text-gray-200 focus:border-[#e94560] outline-none", placeholder: "Dragon Slayer Quest" })),
+        react_1.default.createElement("div", null,
+            react_1.default.createElement("label", { className: "text-xs text-gray-500 uppercase block mb-1" }, "Description"),
+            react_1.default.createElement("textarea", { value: edited.description || '', onChange: (e) => setEdited({ ...edited, description: e.target.value }), className: "w-full bg-[#12121a] border border-[#2a2a3e] rounded px-2 py-1.5 text-sm text-gray-200 focus:border-[#e94560] outline-none min-h-[60px] resize-y", placeholder: "Optional description..." })),
+        react_1.default.createElement("div", null,
+            react_1.default.createElement("label", { className: "text-xs text-gray-500 uppercase block mb-1" }, "Flag Type"),
+            react_1.default.createElement("div", { className: "grid grid-cols-2 gap-2" }, flagTypes.map(type => (react_1.default.createElement("button", { key: type, onClick: () => setEdited({ ...edited, type }), className: `px-3 py-2 rounded text-sm border transition-colors ${edited.type === type
+                    ? flagTypeColors[type] + ' border-current'
+                    : 'bg-[#12121a] border-[#2a2a3e] text-gray-400 hover:border-[#3a3a4e]'}` }, flagTypeLabels[type])))),
+            react_1.default.createElement("p", { className: "text-xs text-gray-500 mt-2" }, edited.type === 'dialogue' ? (react_1.default.createElement("span", { className: "text-gray-400" }, "Temporary flag - resets after dialogue ends")) : (react_1.default.createElement("span", { className: "text-white" }, "Persistent flag - affects entire game")))),
+        react_1.default.createElement("div", null,
+            react_1.default.createElement("label", { className: "text-xs text-gray-500 uppercase block mb-1" }, "Category"),
+            react_1.default.createElement("input", { type: "text", value: edited.category || '', onChange: (e) => setEdited({ ...edited, category: e.target.value }), className: "w-full bg-[#12121a] border border-[#2a2a3e] rounded px-2 py-1.5 text-sm text-gray-200 focus:border-[#e94560] outline-none", placeholder: "quests, items, stats, etc.", list: "categories" }),
+            react_1.default.createElement("datalist", { id: "categories" }, categories.map(cat => react_1.default.createElement("option", { key: cat, value: cat })))),
+        react_1.default.createElement("div", null,
+            react_1.default.createElement("label", { className: "text-xs text-gray-500 uppercase block mb-1" }, "Value Type"),
+            react_1.default.createElement("select", { value: edited.valueType || '', onChange: (e) => setEdited({ ...edited, valueType: e.target.value }), className: "w-full bg-[#12121a] border border-[#2a2a3e] rounded px-2 py-1.5 text-sm text-gray-200 focus:border-[#e94560] outline-none" },
+                react_1.default.createElement("option", { value: "" }, "Boolean (true/false)"),
+                react_1.default.createElement("option", { value: "number" }, "Number"),
+                react_1.default.createElement("option", { value: "string" }, "String"))),
+        edited.valueType && (react_1.default.createElement("div", null,
+            react_1.default.createElement("label", { className: "text-xs text-gray-500 uppercase block mb-1" }, "Default Value"),
+            react_1.default.createElement("input", { type: edited.valueType === 'number' ? 'number' : 'text', value: edited.defaultValue?.toString() || '', onChange: (e) => {
+                    let value = e.target.value;
+                    if (edited.valueType === 'number') {
+                        value = parseFloat(value) || 0;
+                    }
+                    else if (edited.valueType === 'boolean') {
+                        value = value === 'true';
+                    }
+                    setEdited({ ...edited, defaultValue: value });
+                }, className: "w-full bg-[#12121a] border border-[#2a2a3e] rounded px-2 py-1.5 text-sm text-gray-200 focus:border-[#e94560] outline-none", placeholder: edited.valueType === 'number' ? '0' : edited.valueType === 'string' ? '""' : 'false' }))),
+        react_1.default.createElement("div", { className: "flex gap-2 pt-4 border-t border-[#1a1a2e]" },
+            react_1.default.createElement("button", { onClick: () => onSave(edited), className: "flex-1 px-4 py-2 bg-[#e94560] hover:bg-[#d63850] text-white rounded" }, "Save Flag"),
+            react_1.default.createElement("button", { onClick: onCancel, className: "px-4 py-2 bg-[#12121a] hover:bg-[#1a1a2e] text-gray-300 rounded" }, "Cancel"))));
+}

package/dist/components/FlagSelector.d.ts

@@ -0,0 +1,11 @@
+import React from 'react';
+import { FlagSchema } from '../types/flags';
+import 'react-tooltip/dist/react-tooltip.css';
+interface FlagSelectorProps {
+    value: string[];
+    onChange: (flags: string[]) => void;
+    flagSchema?: FlagSchema;
+    placeholder?: string;
+}
+export declare function FlagSelector({ value, onChange, flagSchema, placeholder }: FlagSelectorProps): React.JSX.Element;
+export {};