feat: admin gui card code unified, unhinged conversation tree GUI sort of implemented

1 files changed, 1000 insertions, 84 deletions

diff --git a/internal/admin/static/talktree.js b/internal/admin/static/talktree.js
index f254c21..e7079f5 100644
--- a/internal/admin/static/talktree.js
+++ b/internal/admin/static/talktree.js
@@ -1,92 +1,1008 @@
-function renderTalkTree(data) {
-  var container = document.getElementById('talktree');
-  if (!container) return;
-  if (!data || !data.talk || !data.talk.nodes) {
-    container.innerHTML = '<p style="color:#888">No conversation tree defined.</p>';
-    return;
-  }
-  window._talkData = data;
-  var nodes = data.talk.nodes;
-  var html = '<div class="talk-tree">';
-  html += renderTreeNodes(nodes, 'start', {});
-  html += '</div>';
-  container.innerHTML = html;
-}
-
-function renderTreeNodes(nodes, rootKey, seen) {
-  var node = nodes[rootKey];
-  if (!node) return '';
-  if (seen[rootKey]) {
-    return '<div class="node ref"><span class="key">' + esc(rootKey) + '</span> <span class="preview">(already shown)</span></div>';
-  }
-  seen[rootKey] = true;
-
-  var html = '';
-  html += '<div class="node root' + (rootKey === 'start' ? ' open' : '') + '">';
-  html += '<div class="node-header" onclick="this.parentElement.classList.toggle(\'open\')">';
-  html += '<span class="arrow"></span>';
-  html += '<span class="key">' + esc(rootKey) + '</span>';
-  html += '<span class="preview">' + esc((node.message || '').substring(0, 60)) + '</span>';
-  html += '</div>';
-  html += '<div class="node-children">';
-
-  html += '<div style="margin-left:8px;font-size:11px">';
-  if (node.message) html += '<div><b>Message:</b> ' + esc(node.message) + '</div>';
-  if (node.condition) html += '<div><b>Condition:</b> ' + esc(JSON.stringify(node.condition)) + '</div>';
-  if (node.goto) html += '<div><b>Goto:</b> ' + esc(node.goto) + '</div>';
-  html += '</div>';
-
-  html += '<div style="margin-left:10px"><b style="font-size:11px;color:#aaa">Options:</b>';
-  if (node.options && node.options.length > 0) {
-    node.options.forEach(function(opt, idx) {
-      html += '<div class="option">';
-      html += '<span>' + esc(opt.text || '') + '</span> \u2192 <span style="color:#8cf">' + esc(opt.goto || '') + '</span>';
-      if (opt.condition) html += ' <span style="color:#888;font-size:10px">[cond]</span>';
-      if (opt.action) html += ' <span style="color:#888;font-size:10px">[action]</span>';
-      html += ' <button class="btn btn-danger btn-sm" onclick="deleteOption(event,\'' + escAttr(rootKey) + '\',' + idx + ')">Delete Option</button>';
-      html += '</div>';
+// talktree.js — Full-featured conversation tree editor.
+// Inline editing for all TalkNode and TalkOption fields.
+// No prompt() dialogs. Clause-based condition editor, action forms.
+
+(function() {
+  'use strict';
+
+  // ---- Path helpers ----
+
+  function talkRoot() { return window._talkData && window._talkData.talk; }
+  function talkNodes() { var r = talkRoot(); return r && r.nodes; }
+  function talkSync() { if (typeof window.onTalkTreeChange === 'function') window.onTalkTreeChange(window._talkData); }
+
+  function talkGet(path) {
+    var parts = path.split('.'), obj = talkRoot();
+    for (var i = 0; i < parts.length; i++) {
+      if (obj == null) return undefined;
+      var k = parts[i];
+      obj = /^\d+$/.test(k) ? obj[parseInt(k, 10)] : obj[k];
+    }
+    return obj;
+  }
+
+  function talkSet(path, value) {
+    var parts = path.split('.'), root = talkRoot();
+    for (var i = 0; i < parts.length - 1; i++) {
+      var k = parts[i];
+      if (/^\d+$/.test(k)) {
+        var idx = parseInt(k, 10);
+        if (root[idx] == null) root[idx] = /^\d+$/.test(parts[i + 1]) ? [] : {};
+        root = root[idx];
+      } else {
+        if (root[k] == null) root[k] = /^\d+$/.test(parts[i + 1]) ? [] : {};
+        root = root[k];
+      }
+    }
+    var lk = parts[parts.length - 1];
+    if (/^\d+$/.test(lk)) { root[parseInt(lk, 10)] = value; }
+    else { root[lk] = value; }
+  }
+
+  function talkDel(path) {
+    var parts = path.split('.'), root = talkRoot();
+    for (var i = 0; i < parts.length - 1; i++) {
+      if (root == null) return;
+      var k = parts[i];
+      root = /^\d+$/.test(k) ? root[parseInt(k, 10)] : root[k];
+    }
+    if (!root) return;
+    var lk = parts[parts.length - 1];
+    if (/^\d+$/.test(lk)) { root.splice(parseInt(lk, 10), 1); }
+    else { delete root[lk]; }
+  }
+
+  // ---- Clause types ----
+
+  var CLAUSE_TYPES = [
+    { key: 'flag', label: 'Flag', hasValue: true },
+    { key: 'player_flag', label: 'Player Flag', hasValue: true },
+    { key: 'has_item', label: 'Has Item', hasValue: false },
+    { key: 'min_credits', label: 'Min Credits', hasValue: false }
+  ];
+
+  function clauseTypeLabel(key) {
+    for (var i = 0; i < CLAUSE_TYPES.length; i++) {
+      if (CLAUSE_TYPES[i].key === key) return CLAUSE_TYPES[i].label;
+    }
+    return key;
+  }
+
+  function clauseTypeHasValue(key) {
+    for (var i = 0; i < CLAUSE_TYPES.length; i++) {
+      if (CLAUSE_TYPES[i].key === key) return CLAUSE_TYPES[i].hasValue;
+    }
+    return false;
+  }
+
+  // Extract clauses from a condition object
+  function extractClauses(cond) {
+    if (!cond || typeof cond !== 'object' || Array.isArray(cond)) return { mode: 'none', clauses: [], groupKey: null };
+    if (cond.all_of && Array.isArray(cond.all_of) && cond.all_of.length > 0) {
+      return { mode: 'multi', clauses: cond.all_of.slice(), groupKey: 'all_of' };
+    }
+    if (cond.any_of && Array.isArray(cond.any_of) && cond.any_of.length > 0) {
+      return { mode: 'multi', clauses: cond.any_of.slice(), groupKey: 'any_of' };
+    }
+    // Single clause from flat fields
+    for (var i = 0; i < CLAUSE_TYPES.length; i++) {
+      if (cond[CLAUSE_TYPES[i].key] !== undefined && cond[CLAUSE_TYPES[i].key] !== '') {
+        var c = {};
+        c[CLAUSE_TYPES[i].key] = cond[CLAUSE_TYPES[i].key];
+        if (cond.not) c.not = cond.not;
+        if (cond.value !== undefined && cond.value !== '') c.value = cond.value;
+        if (cond.has_item && CLAUSE_TYPES[i].key !== 'has_item') c.has_item = cond.has_item;
+        if (cond.player_flag && CLAUSE_TYPES[i].key !== 'player_flag') c.player_flag = cond.player_flag;
+        if (cond.flag && CLAUSE_TYPES[i].key !== 'flag') c.flag = cond.flag;
+        return { mode: 'single', clauses: [c], groupKey: null };
+      }
+    }
+    // Check for has_item or min_credits as the only key
+    for (var j = 0; j < CLAUSE_TYPES.length; j++) {
+      var ck = CLAUSE_TYPES[j].key;
+      if (cond[ck] !== undefined && cond[ck] !== '') {
+        var cc = {};
+        cc[ck] = cond[ck];
+        if (cond.not) cc.not = cond.not;
+        if (cond.value !== undefined && cond.value !== '') cc.value = cond.value;
+        return { mode: 'single', clauses: [cc], groupKey: null };
+      }
+    }
+    return { mode: 'none', clauses: [], groupKey: null };
+  }
+
+  // Determine the type key for a clause object
+  function clauseObjType(clause) {
+    for (var i = 0; i < CLAUSE_TYPES.length; i++) {
+      var k = CLAUSE_TYPES[i].key;
+      if (clause[k] !== undefined && clause[k] !== '') return k;
+    }
+    return null;
+  }
+
+  // Build a full condition object from clauses
+  function buildCondition(clauses, groupKey) {
+    if (!clauses || clauses.length === 0) return null;
+    if (clauses.length === 1) {
+      var flat = {};
+      var c = clauses[0];
+      for (var k in c) { if (c[k] !== undefined && c[k] !== '') flat[k] = c[k]; }
+      return flat;
+    }
+    var cond = {};
+    cond[groupKey || 'all_of'] = clauses.map(function(c) {
+      var sub = {};
+      for (var k in c) { if (c[k] !== undefined && c[k] !== '') sub[k] = c[k]; }
+      return sub;
     });
-  } else {
-    html += '<div class="option" style="color:#888">No options</div>';
+    return cond;
+  }
+
+  // ---- Action field definitions ----
+
+  var ACTION_FIELDS = [
+    { key: 'give_item', label: 'Give Item', type: 'text' },
+    { key: 'take_item', label: 'Take Item', type: 'text' },
+    { key: 'teleport', label: 'Teleport Room', type: 'number' },
+    { key: 'heal', label: 'Heal HP', type: 'number' },
+    { key: 'cost', label: 'Cost (Credits)', type: 'number' },
+    { key: 'reputation_cost', label: 'Rep Cost', type: 'number' },
+  ];
+
+  var ACTION_BOOLS = [
+    { key: 'assign_task', label: 'Assign Task' },
+    { key: 'skip_task', label: 'Skip Task' },
+    { key: 'extend_task', label: 'Extend Task' },
+    { key: 'sawmill', label: 'Sawmill' },
+    { key: 'aps_node', label: 'APS Node' },
+  ];
+
+  // ---- Event delegation ----
+
+  function talkEvent(e) {
+    var el = e.target;
+    var path = el.getAttribute('data-tp');
+    if (!path) return;
+
+    var tag = el.tagName;
+    var type = el.type;
+
+    if (tag === 'INPUT' || tag === 'TEXTAREA') {
+      var val;
+      if (type === 'checkbox') { val = el.checked; }
+      else if (type === 'number') { var n = parseFloat(el.value); val = isNaN(n) ? 0 : n; }
+      else { val = el.value; }
+      talkSyncPath(path, val);
+    } else if (tag === 'SELECT') {
+      talkSyncPath(path, el.value);
+    }
+  }
+
+  function talkSyncPath(path, val) {
+    talkSet(path, val);
+    talkSync();
   }
-  html += '<div style="margin-top:4px"><button class="btn btn-primary btn-sm" onclick="addOption(event,\'' + escAttr(rootKey) + '\')">+ Add Option</button></div>';
-  html += '</div>';
 
-  html += '</div></div>';
+  function talkHandleClick(e) {
+    var el = e.target;
+    var action = el.getAttribute('data-action');
+    if (!action) return;
 
-  if (node.options) {
-    node.options.forEach(function(opt) {
-      if (opt.goto && nodes[opt.goto]) {
-        html += renderTreeNodes(nodes, opt.goto, seen);
+    var nodeKey = el.getAttribute('data-nk');
+    var optIdx = el.getAttribute('data-oi');
+    var subIdx = el.getAttribute('data-si');
+    var subKey = el.getAttribute('data-sk');
+    var condGroupKey = el.getAttribute('data-cgk');
+
+    switch (action) {
+      case 'delete-node':
+        deleteNode(nodeKey);
+        break;
+      case 'add-option':
+        addOption(nodeKey);
+        break;
+      case 'delete-option':
+        deleteOption(nodeKey, parseInt(optIdx, 10));
+        break;
+      case 'add-node':
+        addNode();
+        break;
+      case 'add-sequence':
+        addSequenceLine(nodeKey);
+        break;
+      case 'delete-sequence':
+        deleteSequenceLine(nodeKey, parseInt(optIdx, 10));
+        break;
+      case 'add-condition':
+        toggleCondition(nodeKey, optIdx !== null ? parseInt(optIdx, 10) : null);
+        break;
+      case 'remove-condition':
+        removeCondition(nodeKey, optIdx !== null ? parseInt(optIdx, 10) : null);
+        break;
+      case 'add-action':
+        addAction(nodeKey, optIdx !== null ? parseInt(optIdx, 10) : null);
+        break;
+      case 'remove-action':
+        removeAction(nodeKey, optIdx !== null ? parseInt(optIdx, 10) : null);
+        break;
+      case 'add-clause':
+        addClause(nodeKey, optIdx !== null ? parseInt(optIdx, 10) : null, el.getAttribute('data-ct'));
+        break;
+      case 'remove-clause':
+        removeClause(nodeKey, optIdx !== null ? parseInt(optIdx, 10) : null, parseInt(subIdx, 10));
+        break;
+      case 'set-cond-group':
+        setCondGroup(nodeKey, optIdx !== null ? parseInt(optIdx, 10) : null, condGroupKey);
+        break;
+      case 'add-kv':
+        addKVPair(nodeKey, optIdx !== null ? parseInt(optIdx, 10) : null, el.getAttribute('data-kvk'));
+        break;
+      case 'remove-kv':
+        removeKVPair(nodeKey, optIdx !== null ? parseInt(optIdx, 10) : null, el.getAttribute('data-kvk'), subKey);
+        break;
+      case 'add-shop-item':
+        addShopItem(nodeKey, optIdx !== null ? parseInt(optIdx, 10) : null);
+        break;
+      case 'remove-shop-item':
+        removeShopItem(nodeKey, optIdx !== null ? parseInt(optIdx, 10) : null, parseInt(subIdx, 10));
+        break;
+    }
+  }
+
+  // ---- Render entry point ----
+
+  window.renderTalkTree = function(data) {
+    var container = document.getElementById('talktree');
+    if (!container) return;
+    window._talkData = data;
+    if (!data || !data.talk || !data.talk.nodes) {
+      container.innerHTML = '<p style="color:#888">No conversation tree defined.</p>';
+      return;
+    }
+    var nodes = data.talk.nodes;
+    var visited = {};
+    var html = '<div class="talk-tree" id="talkTreeRoot">';
+    html += '<datalist id="talkNodeKeys">';
+    Object.keys(nodes).forEach(function(k) { html += '<option value="' + escAttr(k) + '">'; });
+    html += '</datalist>';
+    html += renderTreeNodes(nodes, 'start', visited);
+
+    var allKeys = Object.keys(nodes);
+    var orphanKeys = [];
+    for (var i = 0; i < allKeys.length; i++) {
+      if (!visited[allKeys[i]]) orphanKeys.push(allKeys[i]);
+    }
+    if (orphanKeys.length > 0) {
+      html += '<div class="talk-orphans">';
+      html += '<div class="talk-orphans-label">Unreferenced Nodes</div>';
+      html += '<div class="talk-orphans-hint">These nodes are not reachable from start. Add a goto to them from another node\'s option.</div>';
+      for (var j = 0; j < orphanKeys.length; j++) {
+        html += renderOrphanNode(orphanKeys[j], nodes[orphanKeys[j]], nodes);
       }
+      html += '</div>';
+    }
+
+    html += renderAddNodeRow();
+    html += '</div>';
+    container.innerHTML = html;
+  };
+
+  // ---- Add/Delete Node ----
+
+  function renderAddNodeRow() {
+    return '<div class="talk-add-node-row">' +
+      '<input class="talk-input talk-input-sm" id="talkNewNodeKey" placeholder="New node key (unique name)">' +
+      '<button class="talk-add-btn" data-action="add-node">Add Node</button>' +
+      '</div>';
+  }
+
+  function addNode() {
+    var input = document.getElementById('talkNewNodeKey');
+    if (!input) return;
+    var key = input.value.trim();
+    if (!key) return;
+    if (talkNodes()[key]) { notify('Node "' + key + '" already exists.', 'error'); return; }
+    talkNodes()[key] = { message: '', options: [] };
+    input.value = '';
+    renderTalkTree(window._talkData);
+    talkSync();
+  }
+
+  function deleteNode(nodeKey) {
+    if (nodeKey === 'start') { notify('Cannot delete the start node.', 'error'); return; }
+    var nodes = talkNodes();
+    if (!nodes || !nodes[nodeKey]) return;
+    delete nodes[nodeKey];
+    Object.keys(nodes).forEach(function(k) {
+      var n = nodes[k];
+      if (n.goto === nodeKey) delete n.goto;
+      if (n.options) {
+        n.options.forEach(function(opt) { if (opt.goto === nodeKey) opt.goto = ''; });
+      }
+    });
+    renderTalkTree(window._talkData);
+    talkSync();
+  }
+
+  // ---- Orphan node ----
+
+  function renderOrphanNode(key, node, nodes) {
+    var h = '<div class="talk-node">';
+    h += '<div class="talk-node-header" onclick="if(!event.target.closest(\'[data-action]\'))this.parentElement.parentElement.classList.toggle(\'open\')">';
+    h += '<span class="talk-node-arrow"></span>';
+    h += '<span class="talk-node-key">' + esc(key) + '</span>';
+    h += '<span class="talk-node-preview">' + esc((getNodePreview(node) || '').substring(0, 60)) + '</span>';
+    h += '<span class="talk-node-spacer"></span>';
+    h += '<button class="talk-node-btn talk-node-del" data-action="delete-node" data-nk="' + escAttr(key) + '">Delete</button>';
+    h += '</div>';
+    h += '<div class="talk-node-body">';
+    h += renderNodeBody(key, node, nodes);
+    h += '</div>';
+    h += '</div>';
+    return h;
+  }
+
+  // ---- Recursive tree render ----
+
+  function renderTreeNodes(nodes, rootKey, seen, indent) {
+    indent = indent || 0;
+    var node = nodes[rootKey];
+    if (!node) return '';
+    if (seen[rootKey]) {
+      return '<div class="talk-node ref"><span class="talk-node-key">' + esc(rootKey) + '</span> <span class="talk-node-preview">(already shown)</span></div>';
+    }
+    seen[rootKey] = true;
+
+    var previewText = getNodePreview(node);
+
+    var html = '<div class="talk-node' + (rootKey === 'start' ? ' open' : '') + '">';
+
+    // Header — fix: check for data-action before toggling
+    html += '<div class="talk-node-header" onclick="if(!event.target.closest(\'[data-action]\'))this.parentElement.classList.toggle(\'open\')">';
+    html += '<span class="talk-node-arrow"></span>';
+    html += '<span class="talk-node-key">' + esc(rootKey) + '</span>';
+    html += '<span class="talk-node-preview">' + esc((previewText || '').substring(0, 60)) + '</span>';
+    html += '<span class="talk-node-spacer"></span>';
+    html += '<button class="talk-node-btn talk-node-del" data-action="delete-node" data-nk="' + escAttr(rootKey) + '">Delete</button>';
+    html += '</div>';
+
+    // Body
+    html += '<div class="talk-node-body">';
+    html += renderNodeBody(rootKey, node, nodes);
+    html += '</div>'; // .talk-node-body
+
+    // Children
+    var childKeys = [];
+    if (node.goto && nodes[node.goto]) childKeys.push(node.goto);
+    if (node.options) {
+      node.options.forEach(function(opt) {
+        if (opt.goto && nodes[opt.goto] && childKeys.indexOf(opt.goto) < 0) childKeys.push(opt.goto);
+      });
+    }
+    if (childKeys.length > 0) {
+      html += '<div class="talk-children">';
+      childKeys.forEach(function(k) { html += renderTreeNodes(nodes, k, seen, indent + 1); });
+      html += '</div>';
+    }
+
+    html += '</div>'; // .talk-node
+    return html;
+  }
+
+  function getNodePreview(node) {
+    if (node.message) return typeof node.message === 'string' ? node.message : (Array.isArray(node.message) ? node.message[0] : '');
+    if (node.sequence && node.sequence.length) return node.sequence[0];
+    return '';
+  }
+
+  // ---- Node body: condition-gated content ----
+
+  function renderNodeBody(nodeKey, node, nodes) {
+    var ec = extractClauses(node.condition);
+    var hasCond = ec.mode !== 'none';
+
+    var html = '';
+
+    if (hasCond) {
+      html += '<div class="talk-cond-card">';
+      html += '<div class="talk-cond-card-header">' +
+        'Condition' +
+        '<button class="talk-section-remove" data-action="remove-condition" data-nk="' + escAttr(nodeKey) + '">Remove</button>' +
+        '</div>';
+      html += '<div class="talk-cond-card-body">';
+      html += renderConditionClauses(ec, nodeKey, null);
+      html += '<div class="talk-cond-card-sep"></div>';
+      html += renderMessageSection(nodeKey, node);
+      html += renderSequenceSection(nodeKey, node);
+      html += renderActionSection(nodeKey, null, node.action);
+      html += renderOptionsSection(nodeKey, node);
+      html += '</div>'; // .talk-cond-card-body
+      html += '</div>'; // .talk-cond-card
+    } else {
+      html += '<button class="talk-add-cond-btn" data-action="add-condition" data-nk="' + escAttr(nodeKey) + '">+ Add Condition</button>';
+      html += renderMessageSection(nodeKey, node);
+      html += renderSequenceSection(nodeKey, node);
+      html += renderActionSection(nodeKey, null, node.action);
+      html += renderOptionsSection(nodeKey, node);
+    }
+
+    // Goto fallback — only when no options
+    if (!node.options || node.options.length === 0) {
+      html += renderGotoFallback(nodeKey, node);
+    }
+
+    return html;
+  }
+
+  // ---- Goto fallback ----
+
+  function renderGotoFallback(nodeKey, node) {
+    return '<div class="talk-goto-fallback">' +
+      '<span class="talk-prop-label">Auto-advance to</span>' +
+      '<input class="talk-input talk-input-sm" data-tp="nodes.' + escAttr(nodeKey) + '.goto" list="talkNodeKeys" value="' + escAttr(node.goto || '') + '" placeholder="Fallback node when no options are available...">' +
+      '</div>';
+  }
+
+  // ---- Message / Sequence ----
+
+  function renderMessageSection(nodeKey, node) {
+    var msg = node.message || '';
+    if (Array.isArray(msg)) msg = msg.join('\n');
+    return '<div class="talk-section">' +
+      '<div class="talk-section-header"><span class="talk-prop-label">Message</span></div>' +
+      '<textarea class="talk-textarea" data-tp="nodes.' + escAttr(nodeKey) + '.message" rows="2" placeholder="NPC dialogue text...">' + esc(msg) + '</textarea>' +
+      '</div>';
+  }
+
+  function renderSequenceSection(nodeKey, node) {
+    var seq = node.sequence || [];
+    var html = '<div class="talk-section">';
+    html += '<div class="talk-section-header"><span class="talk-prop-label">Sequence</span></div>';
+    seq.forEach(function(line, i) {
+      html += '<div class="talk-seq-line">' +
+        '<span class="talk-seq-num">' + (i + 1) + '</span>' +
+        '<input class="talk-input talk-input-sm" data-tp="nodes.' + escAttr(nodeKey) + '.sequence.' + i + '" value="' + escAttr(line) + '" placeholder="Sequence line...">' +
+        '<button class="talk-seq-del" data-action="delete-sequence" data-nk="' + escAttr(nodeKey) + '" data-oi="' + i + '">x</button>' +
+        '</div>';
+    });
+    html += '<div class="talk-seq-add-row">' +
+      '<span class="talk-seq-num">' + (seq.length + 1) + '</span>' +
+      '<input class="talk-input talk-input-sm" id="talkSeqAdd_' + escAttr(nodeKey) + '" placeholder="Add sequence line...">' +
+      '<button class="talk-add-btn" data-action="add-sequence" data-nk="' + escAttr(nodeKey) + '">Add</button>' +
+      '</div>';
+    html += '</div>';
+    return html;
+  }
+
+  // ---- Condition clauses ----
+
+  function renderConditionClauses(ec, nodeKey, optIdx) {
+    var clauses = ec.clauses;
+    var groupKey = ec.groupKey || 'all_of';
+    var html = '';
+
+    // AND/OR mode selector (only when 2+ clauses)
+    if (clauses.length >= 2) {
+      html += '<div class="talk-cond-mode-row">' +
+        '<span class="talk-prop-label">Combine with</span>' +
+        '<select class="talk-select" data-action="set-cond-group" data-nk="' + escAttr(nodeKey) + '"' + (optIdx !== null ? ' data-oi="' + optIdx + '"' : '') + ' data-cgk="' + escAttr(groupKey) + '" onchange="event.stopPropagation(); talkCondGroupChange(this)">' +
+        '<option value="all_of"' + (groupKey === 'all_of' ? ' selected' : '') + '>All of (AND)</option>' +
+        '<option value="any_of"' + (groupKey === 'any_of' ? ' selected' : '') + '>Any of (OR)</option>' +
+        '</select>' +
+        '</div>';
+    }
+
+    // Clause rows
+    for (var i = 0; i < clauses.length; i++) {
+      var typeKey = clauseObjType(clauses[i]) || 'flag';
+      var pathPrefix = clauses.length === 1 ?
+        'nodes.' + escAttr(nodeKey) + (optIdx !== null ? '.options.' + optIdx : '') + '.condition' :
+        'nodes.' + escAttr(nodeKey) + (optIdx !== null ? '.options.' + optIdx : '') + '.condition.' + groupKey + '.' + i;
+      html += renderClauseRow(clauses[i], pathPrefix, typeKey, nodeKey, optIdx, i);
+    }
+
+    // Add clause buttons
+    html += '<div class="talk-clause-add-bar">';
+    CLAUSE_TYPES.forEach(function(ct) {
+      html += '<button class="talk-clause-add-btn" data-action="add-clause" data-nk="' + escAttr(nodeKey) + '"' +
+        (optIdx !== null ? ' data-oi="' + optIdx + '"' : '') + ' data-ct="' + escAttr(ct.key) + '">+ ' + esc(ct.label) + '</button>';
+    });
+    html += '</div>';
+
+    return html;
+  }
+
+  function renderClauseRow(clause, pathPrefix, typeKey, nodeKey, optIdx, clauseIdx) {
+    var hasValue = clauseTypeHasValue(typeKey);
+    var html = '<div class="talk-clause-row">';
+    html += '<span class="talk-clause-type">' + esc(clauseTypeLabel(typeKey)) + '</span>';
+
+    if (typeKey === 'flag' || typeKey === 'player_flag') {
+      html += '<span class="talk-clause-label">key:</span>';
+      html += '<input class="talk-input talk-input-sm" data-tp="' + escAttr(pathPrefix + '.' + typeKey) + '" value="' + escAttr(clause[typeKey] || '') + '" placeholder="Flag name...">';
+      html += '<label class="talk-check-label"><input type="checkbox" data-tp="' + escAttr(pathPrefix + '.not') + '"' + (clause.not ? ' checked' : '') + '> Not</label>';
+      html += '<span class="talk-clause-label">val:</span>';
+      html += '<input class="talk-input talk-input-sm" data-tp="' + escAttr(pathPrefix + '.value') + '" value="' + escAttr(clause.value || '') + '" placeholder="Value match..." style="max-width:80px">';
+    } else if (typeKey === 'has_item') {
+      html += '<span class="talk-clause-label">item:</span>';
+      html += '<input class="talk-input talk-input-sm" data-tp="' + escAttr(pathPrefix + '.has_item') + '" value="' + escAttr(clause.has_item || '') + '" placeholder="Item ID...">';
+      html += '<label class="talk-check-label"><input type="checkbox" data-tp="' + escAttr(pathPrefix + '.not') + '"' + (clause.not ? ' checked' : '') + '> Not</label>';
+    } else if (typeKey === 'min_credits') {
+      html += '<span class="talk-clause-label">cr:</span>';
+      html += '<input class="talk-input-num" data-tp="' + escAttr(pathPrefix + '.min_credits') + '" type="number" value="' + (clause.min_credits || 0) + '" placeholder="0">';
+      html += '<label class="talk-check-label"><input type="checkbox" data-tp="' + escAttr(pathPrefix + '.not') + '"' + (clause.not ? ' checked' : '') + '> Not</label>';
+    }
+
+    html += '<button class="talk-clause-del" data-action="remove-clause" data-nk="' + escAttr(nodeKey) + '"' + (optIdx !== null ? ' data-oi="' + optIdx + '"' : '') + ' data-si="' + clauseIdx + '" title="Remove clause">x</button>';
+    html += '</div>';
+    return html;
+  }
+
+  // ---- Clause add/remove/migrate ----
+
+  function getConditionFor(nodeKey, optIdx) {
+    var node = talkNodes()[nodeKey];
+    if (!node) return null;
+    if (optIdx !== null) {
+      if (!node.options || !node.options[optIdx]) return null;
+      return node.options[optIdx];
+    }
+    return node;
+  }
+
+  function condAddClause(target, typeKey, optIdx, nodeKey) {
+    var ec = extractClauses(target.condition);
+    var newClause = {};
+    newClause[typeKey] = '';
+    ec.clauses.push(newClause);
+
+    if (ec.clauses.length === 1) {
+      // First clause: use flat fields
+      target.condition = buildCondition(ec.clauses, null);
+    } else {
+      ec.groupKey = ec.groupKey || 'all_of';
+      target.condition = buildCondition(ec.clauses, ec.groupKey);
+    }
+  }
+
+  function addClause(nodeKey, optIdx, typeKey) {
+    var target = getConditionFor(nodeKey, optIdx);
+    if (!target) return;
+    if (!target.condition || typeof target.condition !== 'object' || Array.isArray(target.condition)) {
+      target.condition = {};
+    }
+    condAddClause(target, typeKey, optIdx, nodeKey);
+    renderTalkTree(window._talkData);
+    talkSync();
+  }
+
+  function removeClause(nodeKey, optIdx, clauseIdx) {
+    var target = getConditionFor(nodeKey, optIdx);
+    if (!target) return;
+    var ec = extractClauses(target.condition);
+    if (clauseIdx < 0 || clauseIdx >= ec.clauses.length) return;
+
+    ec.clauses.splice(clauseIdx, 1);
+
+    if (ec.clauses.length === 0) {
+      delete target.condition;
+    } else {
+      target.condition = buildCondition(ec.clauses, ec.groupKey);
+    }
+    renderTalkTree(window._talkData);
+    talkSync();
+  }
+
+  function setCondGroup(nodeKey, optIdx, newGroupKey) {
+    var target = getConditionFor(nodeKey, optIdx);
+    if (!target) return;
+    var ec = extractClauses(target.condition);
+    if (ec.clauses.length < 2) return;
+    ec.groupKey = newGroupKey;
+    target.condition = buildCondition(ec.clauses, ec.groupKey);
+    renderTalkTree(window._talkData);
+    talkSync();
+  }
+
+  // Called from onchange on the AND/OR select
+  window.talkCondGroupChange = function(select) {
+    var nodeKey = select.getAttribute('data-nk');
+    var optIdx = select.getAttribute('data-oi');
+    setCondGroup(nodeKey, optIdx !== null ? parseInt(optIdx, 10) : null, select.value);
+  };
+
+  // ---- Add/Remove whole Condition ----
+
+  function toggleCondition(nodeKey, optIdx) {
+    var target = getConditionFor(nodeKey, optIdx);
+    if (!target) return;
+    if (target.condition && typeof target.condition === 'object' && !Array.isArray(target.condition)) {
+      delete target.condition;
+    } else {
+      target.condition = {};
+    }
+    renderTalkTree(window._talkData);
+    talkSync();
+  }
+
+  function removeCondition(nodeKey, optIdx) {
+    var target = getConditionFor(nodeKey, optIdx);
+    if (!target) return;
+    delete target.condition;
+    renderTalkTree(window._talkData);
+    talkSync();
+  }
+
+  // ---- Action editor ----
+
+  function renderActionSection(nodeKey, optIdx, action) {
+    var prefix = optIdx !== null ? 'nodes.' + escAttr(nodeKey) + '.options.' + optIdx + '.action' : 'nodes.' + escAttr(nodeKey) + '.action';
+    var hasAct = action && typeof action === 'object' && !Array.isArray(action);
+
+    if (!hasAct) {
+      return '<div class="talk-section">' +
+        '<button class="talk-add-act-btn" data-action="add-action" data-nk="' + escAttr(nodeKey) + '"' + (optIdx !== null ? ' data-oi="' + optIdx + '"' : '') + '>+ Add Action</button>' +
+        '</div>';
+    }
+
+    return '<div class="talk-section">' +
+      '<div class="talk-cond-card-header">' +
+        '<span class="talk-prop-label">Action</span>' +
+        '<button class="talk-section-remove" data-action="remove-action" data-nk="' + escAttr(nodeKey) + '"' + (optIdx !== null ? ' data-oi="' + optIdx + '"' : '') + '>Remove</button>' +
+      '</div>' +
+      renderActionForm(action, prefix, nodeKey, optIdx) +
+      '</div>';
+  }
+
+  function renderActionForm(action, prefix, nodeKey, optIdx) {
+    var html = '<div class="talk-action-block">';
+
+    html += '<div class="talk-action-grid">';
+    ACTION_FIELDS.forEach(function(f) {
+      var fpath = prefix + '.' + f.key;
+      var val = (action && action[f.key] !== undefined) ? action[f.key] : '';
+      html += '<div class="talk-field-row">' +
+        '<span class="talk-prop-label">' + esc(f.label) + '</span>' +
+        '<input class="talk-input talk-input-sm" data-tp="' + escAttr(fpath) + '" type="' + f.type + '" value="' + escAttr(String(val)) + '">' +
+        '</div>';
+    });
+    html += '</div>';
+
+    html += '<div style="margin-top:4px">';
+    ACTION_BOOLS.forEach(function(b) {
+      html += '<label class="talk-check-label">' +
+        '<input type="checkbox" data-tp="' + escAttr(prefix + '.' + b.key) + '"' + (action && action[b.key] ? ' checked' : '') + '> ' + esc(b.label) +
+        '</label>';
+    });
+    html += '</div>';
+
+    html += renderKVEditor(action, prefix, 'set_flags', 'Set Flags', nodeKey, optIdx);
+    html += renderKVEditor(action, prefix, 'set_player_flags', 'Set Player Flags', nodeKey, optIdx);
+    html += renderShopEditor(action, prefix, nodeKey, optIdx);
+
+    html += '</div>'; // .talk-action-block
+    return html;
+  }
+
+  function renderKVEditor(action, prefix, key, label, nodeKey, optIdx) {
+    var kv = (action && action[key]) || {};
+    var keys = Object.keys(kv);
+    var fcID = prefix.replace(/\./g, '_') + '_' + key;
+    var addKeyID = 'kvAddKey_' + fcID;
+    var nkAttr = escAttr(nodeKey);
+    var oiAttr = optIdx !== null ? ' data-oi="' + optIdx + '"' : '';
+    var html = '<div class="talk-kv-section">';
+    html += '<div class="talk-kv-header">';
+    html += '<span class="talk-prop-label">' + esc(label) + '</span>';
+    html += '</div>';
+    keys.forEach(function(k) {
+      html += '<div class="talk-kv-row">' +
+        '<input class="talk-input" data-tp="' + escAttr(prefix + '.' + key + '.' + k) + '" value="' + escAttr(String(kv[k])) + '" placeholder="value">' +
+        '<span style="font-size:9px;color:#888;white-space:nowrap;min-width:60px">key: ' + esc(k) + '</span>' +
+        '<button class="talk-kv-del" data-action="remove-kv" data-nk="' + nkAttr + '"' + oiAttr + ' data-kvk="' + escAttr(key) + '" data-sk="' + escAttr(k) + '">x</button>' +
+        '</div>';
     });
+    html += '<div class="talk-kv-row">' +
+      '<input class="talk-input" id="' + escAttr(addKeyID) + '" placeholder="New key name" style="max-width:100px" data-nk="' + nkAttr + '"' + oiAttr + ' data-kvk="' + escAttr(key) + '">' +
+      '<input class="talk-input" placeholder="Value" style="display:none">' +
+      '<span style="font-size:9px;color:#888;white-space:nowrap;min-width:60px"></span>' +
+      '<button class="talk-kv-add" data-action="add-kv" data-nk="' + nkAttr + '"' + oiAttr + ' data-kvk="' + escAttr(key) + '">Add</button>' +
+      '</div>';
+    html += '</div>';
+    return html;
   }
 
-  return html;
-}
-
-function addOption(e, nodeKey) {
-  if (e) e.stopPropagation();
-  var data = window._talkData;
-  if (!data || !data.talk || !data.talk.nodes || !data.talk.nodes[nodeKey]) return;
-  var text = prompt('Option text:');
-  if (text === null) return;
-  var dest = prompt('Goto node key:') || '';
-  var node = data.talk.nodes[nodeKey];
-  if (!node.options) node.options = [];
-  node.options.push({ text: text, goto: dest });
-  renderTalkTree(data);
-  if (typeof window.onTalkTreeChange === 'function') window.onTalkTreeChange(data);
-}
-
-function deleteOption(e, nodeKey, idx) {
-  if (e) e.stopPropagation();
-  var data = window._talkData;
-  if (!data || !data.talk || !data.talk.nodes || !data.talk.nodes[nodeKey]) return;
-  var node = data.talk.nodes[nodeKey];
-  if (!node.options || idx < 0 || idx >= node.options.length) return;
-  if (!confirm('Delete this option?')) return;
-  node.options.splice(idx, 1);
-  renderTalkTree(data);
-  if (typeof window.onTalkTreeChange === 'function') window.onTalkTreeChange(data);
-}
+  function renderShopEditor(action, prefix, nodeKey, optIdx) {
+    var shop = action && action.shop;
+    var hasShop = shop && typeof shop === 'object' && !Array.isArray(shop);
+    var html = '<div class="talk-shop-block">';
+    html += '<div class="talk-shop-header">Shop</div>';
+
+    if (hasShop) {
+      html += '<div class="talk-field-row" style="margin-bottom:4px">' +
+        '<span class="talk-prop-label">Shop Message</span>' +
+        '<textarea class="talk-textarea" data-tp="' + escAttr(prefix + '.shop.message') + '" rows="2" style="min-height:24px">' + esc(shop.message || '') + '</textarea>' +
+        '</div>';
+
+      var items = shop.items || [];
+      html += '<div class="talk-prop-label" style="margin-bottom:2px">Items</div>';
+      items.forEach(function(item, si) {
+        var ip = prefix + '.shop.items.' + si;
+        html += '<div class="talk-shop-item">' +
+          '<input class="talk-input" data-tp="' + escAttr(ip + '.item_id') + '" value="' + escAttr(item.item_id || '') + '" placeholder="Item ID">' +
+          '<input class="talk-input-num" data-tp="' + escAttr(ip + '.buy_price') + '" type="number" value="' + (item.buy_price || 0) + '" placeholder="Buy" title="Buy price">' +
+          '<input class="talk-input-num" data-tp="' + escAttr(ip + '.sell_price') + '" type="number" value="' + (item.sell_price || 0) + '" placeholder="Sell" title="Sell price">' +
+          '<button class="talk-kv-del" data-action="remove-shop-item" data-nk="' + escAttr(nodeKey) + '"' + (optIdx !== null ? ' data-oi="' + optIdx + '"' : '') + ' data-si="' + si + '">x</button>' +
+          '</div>';
+      });
+      html += '<button class="talk-kv-add" data-action="add-shop-item" data-nk="' + escAttr(nodeKey) + '"' + (optIdx !== null ? ' data-oi="' + optIdx + '"' : '') + '>+ Add Item</button>';
+    } else {
+      html += '<button class="talk-kv-add" data-action="add-shop-item" data-nk="' + escAttr(nodeKey) + '"' + (optIdx !== null ? ' data-oi="' + optIdx + '"' : '') + '>+ Add Shop</button>';
+    }
+
+    html += '</div>';
+    return html;
+  }
+
+  // ---- Options section ----
+
+  function renderOptionsSection(nodeKey, node) {
+    var options = node.options || [];
+    var html = '<div class="talk-options">';
+    html += '<b class="talk-options-label">Options</b>';
+
+    if (options.length > 0) {
+      options.forEach(function(opt, idx) {
+        html += '<div class="talk-opt-edit-row">';
+        html += '<span class="talk-opt-arrow">&#10132;</span>';
+        html += '<input class="talk-input" data-tp="nodes.' + escAttr(nodeKey) + '.options.' + idx + '.text" value="' + escAttr(opt.text || '') + '" placeholder="Option text...">';
+        html += '<input class="talk-input" data-tp="nodes.' + escAttr(nodeKey) + '.options.' + idx + '.goto" list="talkNodeKeys" value="' + escAttr(opt.goto || '') + '" placeholder="Goto..." style="max-width:120px">';
+
+        html += '<div class="talk-opt-edit-actions">';
+        if (opt.condition && typeof opt.condition === 'object' && !Array.isArray(opt.condition)) {
+          html += '<span class="talk-opt-tag talk-opt-tag-cond" title="Has condition" onclick="toggleOptionDetail(event,\'cond\',' + idx + ',\'' + escAttr(nodeKey) + '\')">cond</span>';
+        } else {
+          html += '<button class="talk-add-cond-btn" style="margin:0;margin-bottom:0" data-action="add-condition" data-nk="' + escAttr(nodeKey) + '" data-oi="' + idx + '" title="Add condition">c</button>';
+        }
+        if (opt.action) {
+          html += '<span class="talk-opt-tag talk-opt-tag-act" title="Has action" onclick="toggleOptionDetail(event,\'act\',' + idx + ',\'' + escAttr(nodeKey) + '\')">act</span>';
+        } else {
+          html += '<button class="talk-add-act-btn" style="margin:0;margin-bottom:0" data-action="add-action" data-nk="' + escAttr(nodeKey) + '" data-oi="' + idx + '" title="Add action">a</button>';
+        }
+        html += '</div>';
+
+        html += '<button class="talk-opt-del" data-action="delete-option" data-nk="' + escAttr(nodeKey) + '" data-oi="' + idx + '" title="Delete option">x</button>';
+        html += '</div>';
+
+        if (opt.condition && typeof opt.condition === 'object' && !Array.isArray(opt.condition)) {
+          html += '<div class="talk-opt-detail" id="optDetail_cond_' + idx + '_' + escAttr(nodeKey) + '" style="display:none;margin-left:18px">';
+          html += '<div class="talk-cond-card" style="margin-top:2px">';
+          html += '<div class="talk-cond-card-header">Condition' +
+            '<button class="talk-section-remove" data-action="remove-condition" data-nk="' + escAttr(nodeKey) + '" data-oi="' + idx + '">Remove</button></div>';
+          html += '<div class="talk-cond-card-body">';
+          html += renderConditionClauses(extractClauses(opt.condition), nodeKey, idx);
+          html += '</div>';
+          html += '</div>';
+          html += '</div>';
+        }
+        if (opt.action) {
+          html += '<div class="talk-opt-detail" id="optDetail_act_' + idx + '_' + escAttr(nodeKey) + '" style="display:none;margin-left:18px">';
+          html += '<div class="talk-cond-card-header" style="border:1px solid var(--border);border-radius:5px 5px 0 0">' +
+            '<span class="talk-prop-label">Action</span>' +
+            '<button class="talk-section-remove" data-action="remove-action" data-nk="' + escAttr(nodeKey) + '" data-oi="' + idx + '">Remove</button></div>';
+          html += renderActionForm(opt.action, 'nodes.' + escAttr(nodeKey) + '.options.' + idx + '.action', nodeKey, idx);
+          html += '</div>';
+        }
+      });
+    } else {
+      html += '<div class="talk-option-empty">none</div>';
+    }
+
+    html += '<div class="talk-add-opt-row">' +
+      '<span class="talk-opt-arrow" style="color:#555">&#10132;</span>' +
+      '<input class="talk-input" id="talkOptText_' + escAttr(nodeKey) + '" placeholder="Option text...">' +
+      '<input class="talk-input" id="talkOptGoto_' + escAttr(nodeKey) + '" list="talkNodeKeys" placeholder="Goto..." style="max-width:120px">' +
+      '<span style="width:62px;flex-shrink:0"></span>' +
+      '<button class="talk-add-btn" data-action="add-option" data-nk="' + escAttr(nodeKey) + '">Add</button>' +
+      '</div>';
+
+    html += '</div>'; // .talk-options
+    return html;
+  }
+
+  window.toggleOptionDetail = function(e, type, idx, nodeKey) {
+    e.stopPropagation();
+    var el = document.getElementById('optDetail_' + type + '_' + idx + '_' + nodeKey);
+    if (el) el.style.display = el.style.display === 'none' ? 'block' : 'none';
+  };
+
+  // ---- Add/Delete Option ----
+
+  function addOption(nodeKey) {
+    var textInput = document.getElementById('talkOptText_' + nodeKey);
+    var gotoInput = document.getElementById('talkOptGoto_' + nodeKey);
+    var text = textInput ? textInput.value.trim() : '';
+    var dest = gotoInput ? gotoInput.value.trim() : '';
+    var node = talkNodes()[nodeKey];
+    if (!node) return;
+    if (!node.options) node.options = [];
+    node.options.push({ text: text, goto: dest });
+    if (textInput) textInput.value = '';
+    if (gotoInput) gotoInput.value = '';
+    renderTalkTree(window._talkData);
+    talkSync();
+  }
+
+  function deleteOption(nodeKey, idx) {
+    var node = talkNodes()[nodeKey];
+    if (!node || !node.options || idx < 0 || idx >= node.options.length) return;
+    node.options.splice(idx, 1);
+    renderTalkTree(window._talkData);
+    talkSync();
+  }
+
+  // ---- Add/Delete Sequence Line ----
+
+  function addSequenceLine(nodeKey) {
+    var input = document.getElementById('talkSeqAdd_' + nodeKey);
+    var text = input ? input.value.trim() : '';
+    var node = talkNodes()[nodeKey];
+    if (!node) return;
+    if (!node.sequence) node.sequence = [];
+    node.sequence.push(text);
+    renderTalkTree(window._talkData);
+    talkSync();
+  }
+
+  function deleteSequenceLine(nodeKey, idx) {
+    var node = talkNodes()[nodeKey];
+    if (!node || !node.sequence) return;
+    node.sequence.splice(idx, 1);
+    if (node.sequence.length === 0) delete node.sequence;
+    renderTalkTree(window._talkData);
+    talkSync();
+  }
+
+  // ---- Add/Remove Action ----
+
+  function addAction(nodeKey, optIdx) {
+    var target = getConditionFor(nodeKey, optIdx);
+    if (!target) return;
+    target.action = {};
+    renderTalkTree(window._talkData);
+    talkSync();
+  }
+
+  function removeAction(nodeKey, optIdx) {
+    var target = getConditionFor(nodeKey, optIdx);
+    if (!target) return;
+    delete target.action;
+    renderTalkTree(window._talkData);
+    talkSync();
+  }
+
+  // ---- Add/Remove KV Pairs (set_flags/set_player_flags) ----
+
+  function kvPath(nodeKey, optIdx, kvKey, flagKey) {
+    var base = optIdx !== null ?
+      'nodes.' + nodeKey + '.options.' + optIdx + '.action.' + kvKey :
+      'nodes.' + nodeKey + '.action.' + kvKey;
+    return flagKey ? base + '.' + flagKey : base;
+  }
+
+  function addKVPair(nodeKey, optIdx, kvKey) {
+    var prefixBase = optIdx !== null ?
+      'nodes.' + nodeKey + '.options.' + optIdx + '.action' :
+      'nodes.' + nodeKey + '.action';
+    var fcID = prefixBase.replace(/\./g, '_') + '_' + kvKey;
+    var addKeyID = 'kvAddKey_' + fcID;
+    var input = document.getElementById(addKeyID);
+    var key = input ? input.value.trim() : '';
+    if (!key) return;
+    var basePath = kvPath(nodeKey, optIdx, kvKey);
+    var obj = talkGet(basePath);
+    if (!obj || typeof obj !== 'object') {
+      talkSet(basePath, {});
+      obj = talkGet(basePath);
+    }
+    if (obj[key] !== undefined) { notify('Flag "' + key + '" already exists.', 'error'); return; }
+    obj[key] = true;
+    renderTalkTree(window._talkData);
+    talkSync();
+  }
+
+  function removeKVPair(nodeKey, optIdx, kvKey, flagKey) {
+    var fullPath = kvPath(nodeKey, optIdx, kvKey, flagKey);
+    talkDel(fullPath);
+    var basePath = kvPath(nodeKey, optIdx, kvKey);
+    var obj = talkGet(basePath);
+    if (obj && typeof obj === 'object' && Object.keys(obj).length === 0) {
+      talkDel(basePath);
+    }
+    renderTalkTree(window._talkData);
+    talkSync();
+  }
+
+  // ---- Add/Remove Shop Items ----
+
+  function addShopItem(nodeKey, optIdx) {
+    var actionPath = optIdx !== null ? 'nodes.' + nodeKey + '.options.' + optIdx + '.action' : 'nodes.' + nodeKey + '.action';
+    var action = talkGet(actionPath);
+    if (!action || typeof action !== 'object') {
+      action = {};
+      talkSet(actionPath, action);
+    }
+    if (!action.shop) { action.shop = { items: [] }; }
+    if (!action.shop.items) action.shop.items = [];
+    action.shop.items.push({ item_id: '', buy_price: 0, sell_price: 0 });
+    renderTalkTree(window._talkData);
+    talkSync();
+  }
+
+  function removeShopItem(nodeKey, optIdx, idx) {
+    var actionPath = optIdx !== null ? 'nodes.' + nodeKey + '.options.' + optIdx + '.action' : 'nodes.' + nodeKey + '.action';
+    var action = talkGet(actionPath);
+    if (!action || !action.shop || !action.shop.items) return;
+    action.shop.items.splice(idx, 1);
+    if (action.shop.items.length === 0) delete action.shop;
+    renderTalkTree(window._talkData);
+    talkSync();
+  }
+
+  // ---- Global event listeners ----
+
+  document.addEventListener('input', function(e) {
+    var el = e.target;
+    if (!el.closest || !el.closest('#talktree')) return;
+    if (!el.getAttribute('data-tp')) return;
+    talkEvent(e);
+  });
+
+  document.addEventListener('change', function(e) {
+    var el = e.target;
+    if (!el.closest || !el.closest('#talktree')) return;
+    talkEvent(e);
+  });
+
+  document.addEventListener('click', function(e) {
+    var el = e.target;
+    if (!el.closest || !el.closest('#talktree')) return;
+    talkHandleClick(e);
+  });
+
+  document.addEventListener('keydown', function(e) {
+    if (e.key !== 'Enter') return;
+    var el = e.target;
+    if (!el.closest || !el.closest('#talktree')) return;
+
+    if (el.id === 'talkNewNodeKey') {
+      e.preventDefault();
+      addNode();
+      return;
+    }
+
+    if (el.id && (el.id.startsWith('talkOptText_') || el.id.startsWith('talkOptGoto_'))) {
+      e.preventDefault();
+      var nodeKey = el.id.replace('talkOptText_', '').replace('talkOptGoto_', '');
+      addOption(nodeKey);
+      return;
+    }
+
+    if (el.id && el.id.startsWith('talkSeqAdd_')) {
+      e.preventDefault();
+      var nk = el.id.replace('talkSeqAdd_', '');
+      addSequenceLine(nk);
+      return;
+    }
+
+    if (el.id && el.id.startsWith('kvAddKey_')) {
+      e.preventDefault();
+      var nk = el.getAttribute('data-nk');
+      var oi = el.getAttribute('data-oi');
+      var kvk = el.getAttribute('data-kvk');
+      addKVPair(nk, oi !== null ? parseInt(oi, 10) : null, kvk);
+      return;
+    }
+  });
+
+})();