'use strict';
/* ════════════════════════════════════════════════════════════════════════
   SimBuilder — учительский редактор спек-симуляций (Фаза 4 SimForge).

   Собирает JSON-спеку v1 (данные, не код) из форм-панелей и монтирует
   живое превью через window.SimEngine.mount(host, spec). Любое числовое
   свойство объекта принимает число ИЛИ строку-выражение; выражения
   проверяются через window.SimExpr.compile (без eval/Function). Save/Load
   через LS.customSim* (Фаза 3). Доступ — только teacher/admin (гейт в html).

   Раскладка: левая колонка — панели-аккордеоны (Мета / Параметры / Объекты /
   Графики·Физика); центр — превью + тулбар; перемонтаж движка с debounce при
   любой правке. Drag-on-preview: клик/перетаскивание ставит x/y выбранного
   объекта в мировых координатах (через inst._toWorld).

   ВАЖНО: Без эмодзи (только inline SVG). ВАЖНО: Без eval/new Function. Vanilla JS.
   ════════════════════════════════════════════════════════════════════════ */
(function (global) {

  /* ── Лимиты (зеркалят серверную validateSpec, Фаза 3) ── */
  var LIMITS = {
    params: 50, objects: 200, walls: 20, springs: 50, plots: 50,
    exprLen: 500, points: 1000, jsonBytes: 200 * 1024
  };
  var SPEC_VERSION = 1;
  // inline-стиль активного тумблера привязки (без зависимости от CSS-класса)
  var SNAP_ACTIVE_CSS = 'background:var(--accent,#06D6E0);color:#0b1020;border-color:transparent';
  var OBJECT_TYPES = ['point', 'segment', 'vector', 'circle', 'rect', 'polyline', 'path', 'label', 'plot', 'readout'];
  var CATS = ['math', 'phys', 'chem', 'bio', 'game'];
  // ВАЖНО: имя param 'e' зарезервировано в SimExpr (число Эйлера)
  var RESERVED_PARAM = { e: true, E: true, pi: true, PI: true, t: true, w: true, h: true, tau: true };

  /* ── Палитра имён функций/констант (из SimExpr) для подсказок ── */
  function exprNames() {
    var fns = [], consts = [];
    if (global.SimExpr) {
      Object.keys(global.SimExpr.FUNCTIONS || {}).forEach(function (k) { fns.push(k); });
      Object.keys(global.SimExpr.CONSTANTS || {}).forEach(function (k) { consts.push(k); });
    }
    fns.sort(); consts.sort();
    return { fns: fns, consts: consts };
  }

  /* ── escape для безопасной вставки в HTML-разметку ── */
  function esc(s) {
    return String(s == null ? '' : s)
      .replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;')
      .replace(/"/g, '&quot;').replace(/'/g, '&#39;');
  }
  function uid(prefix) {
    return (prefix || 'o') + Math.random().toString(36).slice(2, 7) + (SimBuilder._seq++);
  }

  /* ════════════════════════════════════════════════════════════════════════
     SimBuilder — модель состояния редактора + рендер панелей.
     ════════════════════════════════════════════════════════════════════════ */
  var SimBuilder = {
    _seq: 0,

    create: function (opts) {
      return new Builder(opts || {});
    }
  };

  /* ── шаблон стартовой спеки (чистый лист) ── */
  function blankState() {
    return {
      meta: { title: '', desc: '' },
      subject: '',
      grade: '',
      cat: '',
      viewport: { xmin: -1, xmax: 10, ymin: -1, ymax: 10, grid: true, axes: true },
      time: { autoplay: false, loop: true, speed: 1 },
      params: [],
      objects: [],
      plots: [],          // храним plot-объекты отдельно для удобства UI, при сборке мерджим в objects
      physics: { enabled: false, gx: 0, gy: -9.8, friction: 0, restitution: 0.9, walls: [], springs: [] }
    };
  }

  function Builder(opts) {
    this.host = opts.host;                 // DOM-узел-контейнер всей страницы (.app-layout > .sb-content > root)
    this.previewHost = opts.previewHost;   // DOM-узел, куда монтируется SimEngine
    this.panelHost = opts.panelHost;       // DOM-узел левой колонки панелей
    this.toolbarHost = opts.toolbarHost;   // DOM-узел тулбара превью
    this.simId = opts.simId || null;       // если редактируем существующий
    this.status = 'draft';                 // draft | published
    this.version = 1;
    this.st = blankState();
    this.inst = null;                      // текущий инстанс SimEngine
    this._remountTimer = null;
    this._selObjId = null;                 // выбранный для drag-on-preview объект
    this._placing = false;                 // режим «поставить объект кликом»
    this._open = { meta: true, params: true, objects: true, plots: true };
    this._lastSpec = null;
    // P5: прямое манипулирование + история
    this._snap = false;                    // привязка к сетке при drag
    this._undo = [];                       // стек снапшотов JSON состояния (для отката)
    this._redo = [];                       // стек откатанных снапшотов (для повтора)
    this._undoMax = 50;                    // ограничение глубины истории
    this._fieldSnapTaken = false;          // взят ли снапшот для текущего сеанса правки поля
    this._keyHandler = null;               // ссылка на keydown-листенер (для отвязки)
  }

  /* ════════════════════════ ИСТОРИЯ (Undo / Redo, P5) ════════════════════════
     Снапшот — сериализуемое состояние редактора this.st (JSON). Снимаем ПЕРЕД
     мутацией; restore возвращает структуру + перерисовывает панели и превью.
     Глубина ограничена _undoMax; любой новый снапшот сбрасывает redo-стек. */

  /* Снять снапшот текущего состояния (вызывать ДО мутации). dedupe — не пушить
     дубликат верхушки стека (например при повторных drag-сессиях). */
  Builder.prototype.pushHistory = function () {
    var snap;
    try { snap = JSON.stringify(this.st); } catch (e) { return; }
    if (this._undo.length && this._undo[this._undo.length - 1] === snap) return; // без дублей
    this._undo.push(snap);
    if (this._undo.length > this._undoMax) this._undo.shift();
    this._redo.length = 0;     // новая ветка истории — повтор сбрасывается
    this.updateHistoryButtons();
  };

  /* Применить снапшот к состоянию (восстановить структуру, перерисовать). */
  Builder.prototype._restoreSnapshot = function (snap) {
    var st;
    try { st = JSON.parse(snap); } catch (e) { return; }
    this.st = st;
    // выбранный объект мог исчезнуть в восстановленном состоянии
    var selId = this._selObjId;
    if (selId && !(st.objects || []).some(function (o) { return o._uid === selId; })) {
      this._selObjId = null;
    }
    this.renderPanels();
    this.scheduleRemount(false);
    this.updateHistoryButtons();
  };

  Builder.prototype.undo = function () {
    if (!this._undo.length) return;
    var cur;
    try { cur = JSON.stringify(this.st); } catch (e) { cur = null; }
    var snap = this._undo.pop();
    if (cur != null) this._redo.push(cur);
    if (this._redo.length > this._undoMax) this._redo.shift();
    this._restoreSnapshot(snap);
  };

  Builder.prototype.redo = function () {
    if (!this._redo.length) return;
    var cur;
    try { cur = JSON.stringify(this.st); } catch (e) { cur = null; }
    var snap = this._redo.pop();
    if (cur != null) this._undo.push(cur);
    if (this._undo.length > this._undoMax) this._undo.shift();
    this._restoreSnapshot(snap);
  };

  /* Снапшот для правки поля: один на сессию (между focusin и blur). Вызывать в
     начале input/change-обработчика поля — Ctrl+Z откатит всё значение разом. */
  Builder.prototype.snapField = function () {
    if (this._fieldSnapTaken) return;
    this.pushHistory();
    this._fieldSnapTaken = true;
  };

  /* Обновить disabled-состояние кнопок undo/redo в тулбаре. */
  Builder.prototype.updateHistoryButtons = function () {
    var t = this.toolbarHost; if (!t) return;
    var u = t.querySelector('[data-a="undo"]'), r = t.querySelector('[data-a="redo"]');
    if (u) u.disabled = !this._undo.length;
    if (r) r.disabled = !this._redo.length;
  };

  /* ════════════════════════ ПУБЛИЧНЫЙ API ════════════════════════ */

  Builder.prototype.init = function () {
    this.renderToolbar();
    this.renderPanels();
    this.scheduleRemount(true);
  };

  /* Загрузить существующую спеку (sim.spec + мета) в состояние. */
  Builder.prototype.loadFromSim = function (sim) {
    this.simId = sim.id;
    this.status = sim.status || 'draft';
    this.version = sim.version || 1;
    var spec = sim.spec || {};
    var st = blankState();
    st.meta = { title: (spec.meta && spec.meta.title) || sim.title || '', desc: (spec.meta && spec.meta.desc) || sim.description || '' };
    st.subject = sim.subject || '';
    st.grade = (sim.grade == null ? '' : sim.grade);
    st.cat = sim.cat || '';
    var vp = spec.viewport || {};
    st.viewport = {
      xmin: numOr(vp.xmin, -1), xmax: numOr(vp.xmax, 10),
      ymin: numOr(vp.ymin, -1), ymax: numOr(vp.ymax, 10),
      grid: vp.grid !== false, axes: vp.axes !== false
    };
    var time = spec.time || {};
    st.time = { autoplay: !!time.autoplay, loop: time.loop !== false, speed: numOr(time.speed, 1) };
    // params
    st.params = (Array.isArray(spec.params) ? spec.params : []).map(function (p) {
      return {
        name: String(p.name || ''), label: p.label || '',
        min: numOr(p.min, 0), max: numOr(p.max, 100), step: numOr(p.step, 1),
        value: numOr(p.value, 0), unit: p.unit || ''
      };
    });
    // objects + plots (plot выделяем в отдельный список UI)
    var objs = Array.isArray(spec.objects) ? spec.objects : [];
    st.objects = []; st.plots = [];
    objs.forEach(function (o) {
      if (o.type === 'plot') {
        st.plots.push(loadPlot(o));
      } else {
        st.objects.push(Object.assign({ _uid: uid('o') }, o));
      }
    });
    // physics
    var ph = spec.physics || {};
    st.physics = {
      enabled: !!ph.enabled,
      gx: numOr(ph.gravity && ph.gravity.x, 0),
      gy: numOr(ph.gravity && ph.gravity.y, -9.8),
      friction: numOr(ph.friction, 0),
      restitution: numOr(ph.restitution, 0.9),
      walls: (Array.isArray(ph.walls) ? ph.walls : []).map(function (w) { return Object.assign({ _uid: uid('w') }, w); }),
      springs: (Array.isArray(ph.springs) ? ph.springs : []).map(function (s) { return Object.assign({ _uid: uid('s') }, s); })
    };
    this.st = st;
    // свежая загрузка (открытие симуляции / шаблон) — история начинается заново
    this._undo.length = 0; this._redo.length = 0; this._fieldSnapTaken = false;
    this.renderToolbar();
    this.renderPanels();
    this.scheduleRemount(true);
  };

  /* Сборка чистой JSON-спеки v1 из состояния (для движка / сохранения). */
  Builder.prototype.buildSpec = function () {
    var st = this.st;
    var objects = [];
    // обычные объекты (скрытые hidden:true не попадают в спеку — движок не знает о hidden)
    st.objects.forEach(function (o) { if (o.hidden) return; objects.push(stripObj(o)); });
    // plot-объекты
    st.plots.forEach(function (o) { if (o.hidden) return; objects.push(stripObj(o)); });

    var spec = {
      specVersion: SPEC_VERSION,
      meta: { title: trimStr(st.meta.title), desc: trimStr(st.meta.desc) },
      viewport: {
        xmin: numOr(st.viewport.xmin, -1), xmax: numOr(st.viewport.xmax, 10),
        ymin: numOr(st.viewport.ymin, -1), ymax: numOr(st.viewport.ymax, 10),
        grid: !!st.viewport.grid, axes: !!st.viewport.axes
      },
      time: { autoplay: !!st.time.autoplay, loop: !!st.time.loop, speed: numOr(st.time.speed, 1) },
      params: st.params.filter(function (p) { return p.name; }).map(function (p) {
        var o = { name: p.name, min: numOr(p.min, 0), max: numOr(p.max, 100), step: numOr(p.step, 1), value: numOr(p.value, numOr(p.min, 0)) };
        if (p.label) o.label = trimStr(p.label);
        if (p.unit) o.unit = trimStr(p.unit);
        return o;
      }),
      objects: objects
    };

    if (st.physics.enabled) {
      var ph = {
        enabled: true,
        gravity: { x: numOr(st.physics.gx, 0), y: numOr(st.physics.gy, 0) },
        friction: numOr(st.physics.friction, 0),
        restitution: clamp01(numOr(st.physics.restitution, 0.9)),
        walls: st.physics.walls.map(stripWall),
        springs: st.physics.springs.map(stripSpring)
      };
      spec.physics = ph;
    }
    return spec;
  };

  /* ── Удаление UI-метаданных (_uid, пустых и дефолтных стилевых полей) из объекта спеки.
     Дефолты стиля не сериализуем — спека минимальна и round-trip стабилен (loadFromSim
     восстанавливает их обратно из дефолтов контролов). hidden никогда не идёт в спеку. ── */
  function isDefaultStyle(k, v) {
    if (k === 'hidden') return true;                 // UI-флаг, не для движка
    if (k === 'glow' && v === false) return true;
    if (k === 'trail' && v === false) return true;
    if (k === 'closed' && v === false) return true;
    if (k === 'lineStyle' && v === 'solid') return true;
    if (k === 'pointStyle' && v === 'filled') return true;
    if (k === 'opacity' && (v === 1 || v === '1')) return true;
    return false;
  }
  function stripObj(o) {
    var out = {};
    Object.keys(o).forEach(function (k) {
      if (k === '_uid') return;
      var v = o[k];
      if (v === '' || v === undefined || v === null) return;
      if (isDefaultStyle(k, v)) return;
      out[k] = v;
    });
    return out;
  }
  function stripWall(w) {
    var out = {};
    if (w.side) out.side = w.side;
    if (w.x1 !== '' && w.x1 != null) { out.x1 = numOr(w.x1, 0); out.y1 = numOr(w.y1, 0); out.x2 = numOr(w.x2, 0); out.y2 = numOr(w.y2, 0); }
    return out;
  }
  function stripSpring(s) {
    var out = { k: numOr(s.k, 40), length: numOr(s.length, 1) };
    out.a = parseEnd(s.a);
    out.b = parseEnd(s.b);
    if (s.damping !== '' && s.damping != null) out.damping = numOr(s.damping, 0);
    return out;
  }
  // конец пружины: "id" или "[x,y]" / "x,y" -> id-строка или [x,y]
  function parseEnd(v) {
    if (Array.isArray(v)) return v;
    var s = String(v == null ? '' : v).trim();
    var m = s.match(/^\[?\s*(-?[\d.]+)\s*,\s*(-?[\d.]+)\s*\]?$/);
    if (m) return [parseFloat(m[1]), parseFloat(m[2])];
    return s;
  }

  /* ════════════════════════ ЖИВОЕ ПРЕВЬЮ ════════════════════════ */

  Builder.prototype.scheduleRemount = function (immediate) {
    var self = this;
    if (this._remountTimer) { clearTimeout(this._remountTimer); this._remountTimer = null; }
    if (immediate) { this.remount(); return; }
    this._remountTimer = setTimeout(function () { self.remount(); }, 280);
  };

  Builder.prototype.remount = function () {
    if (!global.SimEngine || !this.previewHost) return;
    var wasRunning = this.inst && this.inst.isRunning && this.inst.isRunning();
    try { if (this.inst) this.inst.destroy(); } catch (e) {}
    this.inst = null;
    this.previewHost.innerHTML = '';
    var spec = this.buildSpec();
    this._lastSpec = spec;
    try {
      this.inst = global.SimEngine.mount(this.previewHost, spec);
      if (wasRunning && this.inst.play) this.inst.play();
    } catch (e) {
      this.previewHost.innerHTML = '<div style="padding:40px;color:#ef4444;font-size:.85rem">Ошибка сборки превью: ' + esc(e.message || e) + '</div>';
    }
    this.bindPreviewDrag();
  };

  /* Drag-on-preview (P5): прямое манипулирование выбранным объектом на сцене.
     Поддержаны ВСЕ позиционируемые типы — точка/окружность/подпись/показатель/
     прямоугольник (x,y), отрезок/вектор (оба конца x1,y1 и x2,y2; вектор также в
     форме origin+dx/dy), ломаная/путь (перетаскивание вершин массива points).
     Выбирается ближайшая «ручка» в пределах допуска; иначе — целое тело (двигаем
     все координаты сразу). Поля-ВЫРАЖЕНИЯ (не числа) НЕ перезаписываем молча.
     При включённой привязке (this._snap) мир-координаты округляются к шагу сетки.
     Работает только когда выбран объект и движок не запущен (иначе мешает
     встроенному drag/анимации движка). */
  Builder.prototype.bindPreviewDrag = function () {
    var self = this;
    if (!this.inst || !this.inst.canvas) return;
    var canvas = this.inst.canvas;
    var drag = null;       // активная сессия: { kind, keys, start, base }
    var HIT = 14;          // допуск хит-теста ручки в экранных px

    function objSel() {
      if (!self._selObjId) return null;
      return self.st.objects.find(function (o) { return o._uid === self._selObjId; }) || null;
    }
    function worldAt(ev) {
      var r = canvas.getBoundingClientRect();
      var px = ev.clientX - r.left, py = ev.clientY - r.top;
      if (typeof self.inst._toWorld === 'function') return self.inst._toWorld(px, py);
      return null;
    }
    function pxAt(mx, my) {
      if (typeof self.inst._toPx === 'function') return self.inst._toPx(mx, my);
      return null;
    }
    // шаг привязки: минорный шаг сетки движка (~34px) или 0.5 как запасной
    function snapStep() {
      if (self.inst && typeof self.inst._niceStep === 'function') {
        var s = self.inst._niceStep(34);
        if (isFinite(s) && s > 0) return s;
      }
      return 0.5;
    }
    function snapVal(v) {
      if (!self._snap) return round2(v);
      var step = snapStep();
      return round2(Math.round(v / step) * step);
    }
    // числовое значение поля или null, если выражение/пусто (не трогаем выражения)
    function numField(obj, key) {
      var v = obj[key];
      if (v === '' || v == null) return 0;        // пустое трактуем как 0 (можно двигать)
      if (typeof v === 'number') return v;
      var n = Number(v);
      return (isFinite(n) && String(v).trim() !== '') ? n : null; // null = выражение
    }
    // массив вершин полилинии/пути из строки JSON; null при ошибке
    function parsePoints(obj) {
      try {
        var arr = JSON.parse(obj.points);
        if (Array.isArray(arr)) return arr;
      } catch (e) {}
      return null;
    }

    /* Перечислить «ручки» объекта (мир-координаты + сеттер). exprBlocked=true,
       если соответствующее поле — выражение (ручка показывается, но не двигается). */
    function handlesOf(obj) {
      var hs = [];
      if (!obj) return hs;
      var t = obj.type;
      function pt(keyX, keyY, label) {
        var wx = numField(obj, keyX), wy = numField(obj, keyY);
        var blocked = (wx === null || wy === null);
        hs.push({
          label: label, blocked: blocked,
          wx: blocked ? null : wx, wy: blocked ? null : wy,
          set: function (x, y) { if (!blocked) { obj[keyX] = snapVal(x); obj[keyY] = snapVal(y); } }
        });
      }
      if (t === 'segment' || t === 'vector') {
        // вектор может быть задан origin(x1,y1)+dx,dy ИЛИ x1y1x2y2
        var hasDxDy = ('dx' in obj || 'dy' in obj) && !('x2' in obj && 'y2' in obj);
        pt('x1', 'y1', 'origin');
        if (hasDxDy) {
          // конец = origin + (dx,dy); ручка пишет dx/dy
          var ox = numField(obj, 'x1'), oy = numField(obj, 'y1');
          var dx = numField(obj, 'dx'), dy = numField(obj, 'dy');
          var blk = (ox === null || oy === null || dx === null || dy === null);
          hs.push({
            label: 'end', blocked: blk,
            wx: blk ? null : ox + dx, wy: blk ? null : oy + dy,
            set: function (x, y) { if (!blk) { obj.dx = snapVal(x - ox); obj.dy = snapVal(y - oy); } }
          });
        } else {
          pt('x2', 'y2', 'end');
        }
      } else if (t === 'polyline' || t === 'path') {
        var arr = parsePoints(obj);
        if (arr) {
          arr.forEach(function (p, idx) {
            if (!Array.isArray(p) || p.length < 2) return;
            var nx = Number(p[0]), ny = Number(p[1]);
            if (!isFinite(nx) || !isFinite(ny)) return; // выражение-вершина — не двигаем
            hs.push({
              label: 'v' + idx, blocked: false, wx: nx, wy: ny, _vidx: idx,
              set: function (x, y) {
                var a = parsePoints(obj); if (!a || !a[idx]) return;
                a[idx][0] = snapVal(x); a[idx][1] = snapVal(y);
                obj.points = JSON.stringify(a);
              }
            });
          });
        }
      } else {
        // x/y типы: point, circle, label, readout, rect
        pt('x', 'y', 'pos');
      }
      return hs;
    }

    /* Хит-тест: ближайшая незаблокированная ручка под экранной точкой (px,py). */
    function pickHandle(obj, lx, ly) {
      var hs = handlesOf(obj), best = null, bestD = HIT * HIT;
      for (var i = 0; i < hs.length; i++) {
        var h = hs[i];
        if (h.blocked || h.wx == null) continue;
        var p = pxAt(h.wx, h.wy); if (!p) continue;
        var dx = p[0] - lx, dy = p[1] - ly, d = dx * dx + dy * dy;
        if (d <= bestD) { bestD = d; best = h; }
      }
      return best;
    }

    // незаблокированные ручки объекта
    function movableHandles(obj) {
      return handlesOf(obj).filter(function (h) { return !h.blocked && h.wx != null; });
    }

    canvas.addEventListener('pointerdown', function (ev) {
      if (!self._selObjId) return;
      if (self.inst && self.inst.isRunning && self.inst.isRunning()) return;
      var obj = objSel(); if (!obj) return;
      var w = worldAt(ev); if (!w) return;
      var r = canvas.getBoundingClientRect();
      var lx = ev.clientX - r.left, ly = ev.clientY - r.top;
      // снапшот в историю ПЕРЕД началом перемещения (один на сессию drag)
      self.pushHistory();
      var handle = pickHandle(obj, lx, ly);
      var move = movableHandles(obj);
      // режим: 'handle' (конкретная ручка), 'place' (клик ставит единственную точку),
      // 'body' (несколько ручек — двигаем тело относительно стартовой точки), 'none'
      var mode;
      if (handle) mode = 'handle';
      else if (move.length === 1) { handle = move[0]; mode = 'place'; }   // point/circle/label/readout/rect
      else if (move.length > 1) mode = 'body';                            // segment/vector/polyline
      else mode = 'none';
      drag = { obj: obj, mode: mode, handle: handle, startW: w, moved: false,
               baseHandles: (mode === 'body') ? move.map(function (h) { return { wx: h.wx, wy: h.wy, set: h.set }; }) : null };
      try { canvas.setPointerCapture(ev.pointerId); } catch (e) {}
      // handle/place — сразу поставить ручку в точку клика (place = клик ставит)
      if (mode === 'handle' || mode === 'place') {
        handle.set(w[0], w[1]); drag.moved = true;
        self.refreshObjFields(obj._uid); self.scheduleRemount(false);
      }
      ev.preventDefault();
    });
    canvas.addEventListener('pointermove', function (ev) {
      if (!drag) return;
      var w = worldAt(ev); if (!w) return;
      var obj = drag.obj;
      if (drag.mode === 'handle' || drag.mode === 'place') {
        drag.handle.set(w[0], w[1]);
      } else if (drag.mode === 'body') {
        // тело целиком: сдвиг всех ручек от стартовой мировой точки
        var dxw = w[0] - drag.startW[0], dyw = w[1] - drag.startW[1];
        drag.baseHandles.forEach(function (h) { h.set(h.wx + dxw, h.wy + dyw); });
      } else return;
      drag.moved = true;
      self.refreshObjFields(obj._uid);
      self.scheduleRemount(false);
    });
    function end() {
      // если состояние не менялось (mode 'none' или body без движения) — откатить
      // лишний снапшот, чтобы Ctrl+Z не «застревал» на пустых записях.
      if (drag && !drag.moved && self._undo.length) {
        var top = self._undo[self._undo.length - 1];
        var cur; try { cur = JSON.stringify(self.st); } catch (e) { cur = null; }
        if (cur != null && cur === top) { self._undo.pop(); self.updateHistoryButtons(); }
      }
      drag = null;
    }
    canvas.addEventListener('pointerup', end);
    canvas.addEventListener('pointercancel', end);
    // курсор-подсказка
    canvas.style.cursor = this._selObjId ? 'crosshair' : '';
  };

  /* ════════════════════════ ТУЛБАР ════════════════════════ */

  Builder.prototype.renderToolbar = function () {
    var self = this;
    var t = this.toolbarHost;
    if (!t) return;
    var statusBadge = this.status === 'published'
      ? '<span class="sbu-badge sbu-badge-pub">Опубликовано</span>'
      : '<span class="sbu-badge">Черновик</span>';
    // Кнопка публикации: для опубликованной — «Снять с публикации»; иначе «Опубликовать».
    var pubBtn = this.status === 'published'
      ? '<button class="btn-ghost sbu-tb-btn" data-a="unpublish" title="Вернуть в черновик">' + ICON.unpublish + ' Снять</button>'
      : '<button class="btn-primary sbu-tb-btn" data-a="publish">' + ICON.send + ' Опубликовать</button>';
    // «Раздать классу» доступна только для уже сохранённой симуляции.
    var shareBtn = this.simId
      ? '<button class="btn-ghost sbu-tb-btn" data-a="share" title="Раздать классу">' + ICON.send + ' Раздать</button>'
      : '';
    t.innerHTML =
      '<div class="sbu-tb-left">' +
        '<span class="sbu-tb-title">' + (this.simId ? 'Редактор симуляции' : 'Новая симуляция') + '</span>' +
        statusBadge +
      '</div>' +
      '<div class="sbu-tb-right">' +
        '<button class="btn-ghost sbu-tb-btn sbu-tb-ico" data-a="undo" title="Отменить (Ctrl+Z)"' + (this._undo.length ? '' : ' disabled') + '>' + ICON.undo + '</button>' +
        '<button class="btn-ghost sbu-tb-btn sbu-tb-ico" data-a="redo" title="Повторить (Ctrl+Shift+Z)"' + (this._redo.length ? '' : ' disabled') + '>' + ICON.redo + '</button>' +
        '<button class="btn-ghost sbu-tb-btn sbu-tb-ico" data-a="snap" title="Привязка к сетке" aria-pressed="' + (this._snap ? 'true' : 'false') + '"' + (this._snap ? ' style="' + SNAP_ACTIVE_CSS + '"' : '') + '>' + ICON.grid + '</button>' +
        '<button class="btn-ghost sbu-tb-btn" data-a="template" title="Создать из шаблона">' + ICON.template + ' Шаблон</button>' +
        '<button class="btn-ghost sbu-tb-btn" data-a="test" title="Запустить превью">' + ICON.play + ' Тест</button>' +
        '<button class="btn-ghost sbu-tb-btn" data-a="reset" title="Сброс превью">' + ICON.reset + ' Сброс</button>' +
        '<button class="btn-ghost sbu-tb-btn" data-a="save">' + ICON.save + ' Сохранить</button>' +
        shareBtn +
        pubBtn +
      '</div>';
    t.querySelectorAll('[data-a]').forEach(function (b) {
      b.addEventListener('click', function () { self.onToolbar(b.getAttribute('data-a')); });
    });
    this.bindKeyboardShortcuts();
  };

  /* Глобальные горячие клавиши истории (Ctrl+Z / Ctrl+Shift+Z / Ctrl+Y).
     Игнорируем, если фокус в поле ввода (там работает нативная отмена текста). */
  Builder.prototype.bindKeyboardShortcuts = function () {
    var self = this;
    if (this._keyHandler) return; // вешаем один раз
    this._keyHandler = function (ev) {
      if (!(ev.ctrlKey || ev.metaKey)) return;
      var tag = (ev.target && ev.target.tagName) || '';
      var editable = ev.target && (ev.target.isContentEditable || tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT');
      if (editable) return; // не перехватываем правку текста в полях
      var k = (ev.key || '').toLowerCase();
      if (k === 'z' && !ev.shiftKey) { ev.preventDefault(); self.undo(); }
      else if ((k === 'z' && ev.shiftKey) || k === 'y') { ev.preventDefault(); self.redo(); }
    };
    global.document.addEventListener('keydown', this._keyHandler);
  };

  Builder.prototype.onToolbar = function (action) {
    if (action === 'test') { if (this.inst && this.inst.play) this.inst.play(); return; }
    if (action === 'reset') { if (this.inst && this.inst.reset) this.inst.reset(); return; }
    if (action === 'save') { this.save(false); return; }
    if (action === 'publish') { this.save(true); return; }
    if (action === 'unpublish') { this.setStatus('draft'); return; }
    if (action === 'share') { this.openShareModal(); return; }
    if (action === 'template') { this.openTemplateModal(); return; }
    if (action === 'undo') { this.undo(); return; }
    if (action === 'redo') { this.redo(); return; }
    if (action === 'snap') { this.toggleSnap(); return; }
  };

  /* Переключить привязку к сетке (drag будет округлять к шагу сетки). */
  Builder.prototype.toggleSnap = function () {
    this._snap = !this._snap;
    var t = this.toolbarHost;
    if (t) {
      var b = t.querySelector('[data-a="snap"]');
      if (b) {
        b.setAttribute('aria-pressed', this._snap ? 'true' : 'false');
        b.setAttribute('style', this._snap ? SNAP_ACTIVE_CSS : '');
      }
    }
    if (global.LS && global.LS.toast) global.LS.toast(this._snap ? 'Привязка к сетке включена' : 'Привязка к сетке выключена', 'info', 1600);
  };

  /* Изменить статус публикации уже сохранённой симуляции (PUT status). */
  Builder.prototype.setStatus = function (status) {
    var self = this;
    if (!this.simId) { this.save(status === 'published'); return; }
    global.LS.customSimUpdate(this.simId, { status: status }).then(function () {
      self.status = status;
      self.renderToolbar();
      global.LS.toast(status === 'published' ? 'Опубликовано' : 'Снято с публикации', 'success');
    }).catch(function (e) {
      global.LS.toast((e && e.message) || 'Ошибка', 'error');
    });
  };

  /* Раздать классу: модалка выбора класса -> LS.customSimShare (авто-публикует +
     уведомляет учеников со ссылкой /lab?sim=custom:<id>). */
  Builder.prototype.openShareModal = function () {
    var self = this;
    if (!this.simId) { global.LS.toast('Сначала сохраните симуляцию', 'warn'); return; }
    global.LS.getClasses().then(function (classes) {
      if (!Array.isArray(classes) || !classes.length) { global.LS.toast('Нет классов для раздачи', 'warn'); return; }
      var opts = classes.map(function (c) {
        return '<option value="' + esc(c.id) + '">' + esc(c.name) + '</option>';
      }).join('');
      var content = '<div style="display:flex;flex-direction:column;gap:8px">' +
        '<label style="font-size:.8rem;color:var(--text-3)">Класс</label>' +
        '<select id="sbu-share-class" class="sbu-in">' + opts + '</select>' +
        '<div style="font-size:.78rem;color:var(--text-3)">Ученики класса получат уведомление со ссылкой. Симуляция будет автоматически опубликована.</div>' +
        '</div>';
      var m = global.LS.modal({ title: 'Раздать классу', content: content, size: 'sm', actions: [
        { label: 'Отмена', onClick: function () { m.close(); } },
        { label: 'Раздать', primary: true, onClick: function () {
          var sel = m.body.querySelector('#sbu-share-class');
          var classId = sel ? Number(sel.value) : NaN;
          global.LS.customSimShare(self.simId, { classId: classId }).then(function (r) {
            m.close();
            self.status = 'published';
            self.renderToolbar();
            global.LS.toast('Отправлено ученикам: ' + ((r && r.sent) || 0), 'success');
          }).catch(function (e) {
            global.LS.toast((e && e.message) || 'Ошибка раздачи', 'error');
          });
        } }
      ] });
    }).catch(function () { global.LS.toast('Не удалось загрузить классы', 'error'); });
  };

  /* Старт из шаблона: выбор готовой спеки -> загрузка в редактор как НОВАЯ
     симуляция (simId сбрасывается, чтобы первое «Сохранить» создало запись). */
  Builder.prototype.openTemplateModal = function () {
    var self = this;
    var cards = TEMPLATES.map(function (tpl, i) {
      return '<button type="button" data-tpl="' + i + '" style="text-align:left;display:flex;flex-direction:column;gap:4px;padding:11px 13px;border:1px solid var(--border);border-radius:10px;background:#fff;cursor:pointer">' +
        '<span style="font-weight:800;font-size:.84rem;color:var(--text)">' + esc(tpl.name) + '</span>' +
        '<span style="font-size:.74rem;color:var(--text-3)">' + esc(tpl.desc) + '</span>' +
        '</button>';
    }).join('');
    var content = '<div style="display:flex;flex-direction:column;gap:8px">' + cards +
      '<div style="font-size:.74rem;color:var(--text-3);margin-top:4px">Шаблон заменит текущую сцену и создаст новую симуляцию.</div></div>';
    var m = global.LS.modal({ title: 'Создать из шаблона', content: content, size: 'sm', actions: [
      { label: 'Закрыть', onClick: function () { m.close(); } }
    ] });
    m.body.querySelectorAll('[data-tpl]').forEach(function (b) {
      b.addEventListener('click', function () {
        var tpl = TEMPLATES[Number(b.getAttribute('data-tpl'))];
        if (!tpl) return;
        var apply = function () {
          self.simId = null;
          try { global.history.replaceState({}, '', '/sim-builder'); } catch (e) {}
          // loadFromSim ждёт sim-объект; собираем синтетический из спеки шаблона.
          var spec = JSON.parse(JSON.stringify(tpl.spec));
          self.loadFromSim({
            id: null, status: 'draft', version: 1,
            title: (spec.meta && spec.meta.title) || tpl.name,
            description: (spec.meta && spec.meta.desc) || '',
            subject: spec.subject || '', grade: spec.grade != null ? spec.grade : '',
            cat: tpl.cat || spec.cat || '', spec: spec
          });
          m.close();
          global.LS.toast('Шаблон загружен', 'success');
        };
        var hasContent = self.st.params.length || self.st.objects.length || self.st.plots.length;
        if (hasContent && !global.confirm('Заменить текущую сцену шаблоном «' + tpl.name + '»?')) return;
        apply();
      });
    });
  };

  /* ════════════════════════ ВАЛИДАЦИЯ (клиент, до запроса) ════════════════════════ */

  /* Возвращает массив строк-ошибок (пусто = всё валидно). */
  Builder.prototype.validate = function () {
    var st = this.st, errs = [];
    if (!trimStr(st.meta.title)) errs.push('Укажите заголовок симуляции.');

    // params
    if (st.params.length > LIMITS.params) errs.push('Слишком много параметров (макс ' + LIMITS.params + ').');
    var seen = {};
    st.params.forEach(function (p, i) {
      var nm = trimStr(p.name);
      if (!nm) { errs.push('Параметр #' + (i + 1) + ': пустое имя.'); return; }
      if (!/^[a-zA-Z_][a-zA-Z_0-9]*$/.test(nm)) errs.push('Параметр «' + nm + '»: имя должно быть идентификатором (буквы/цифры/_, не с цифры).');
      if (RESERVED_PARAM[nm]) errs.push('Имя «' + nm + '» зарезервировано (' + (nm === 'e' ? 'число Эйлера' : 'служебное') + '). Выберите другое.');
      if (seen[nm]) errs.push('Дубликат параметра «' + nm + '».');
      seen[nm] = true;
      if (numOr(p.min, 0) > numOr(p.max, 0)) errs.push('Параметр «' + nm + '»: min больше max.');
    });

    // objects + plots
    var total = st.objects.length + st.plots.length;
    if (total > LIMITS.objects) errs.push('Слишком много объектов (макс ' + LIMITS.objects + ').');

    // выражения объектов
    var self = this;
    function checkExpr(v, where) {
      if (typeof v !== 'string' || v === '') return;
      if (v.length > LIMITS.exprLen) errs.push(where + ': выражение длиннее ' + LIMITS.exprLen + ' симв.');
      var c = global.SimExpr ? global.SimExpr.compile(v) : { error: null };
      if (c.error) errs.push(where + ': ' + c.error);
    }
    st.objects.forEach(function (o, i) {
      exprFieldsOf(o).forEach(function (f) {
        checkExpr(o[f], 'Объект #' + (i + 1) + ' (' + o.type + '), поле «' + f + '»');
      });
    });
    // выражения графиков: кривые + границы диапазона
    st.plots.forEach(function (o, i) {
      (Array.isArray(o.curves) ? o.curves : []).forEach(function (cv, ci) {
        checkExpr(cv.expr, 'График #' + (i + 1) + ', кривая ' + (ci + 1));
      });
      checkExpr(typeof o.range_a === 'string' ? o.range_a : '', 'График #' + (i + 1) + ', «от»');
      checkExpr(typeof o.range_b === 'string' ? o.range_b : '', 'График #' + (i + 1) + ', «до»');
    });

    // physics
    if (st.physics.enabled) {
      if (st.physics.walls.length > LIMITS.walls) errs.push('Слишком много стен (макс ' + LIMITS.walls + ').');
      if (st.physics.springs.length > LIMITS.springs) errs.push('Слишком много пружин (макс ' + LIMITS.springs + ').');
      var r = numOr(st.physics.restitution, 0.9);
      if (r < 0 || r > 1) errs.push('Упругость (restitution) должна быть в диапазоне 0..1.');
    }

    // размер JSON
    try {
      var bytes = new global.Blob([JSON.stringify(this.buildSpec())]).size;
      if (bytes > LIMITS.jsonBytes) errs.push('Спека слишком большая (' + Math.round(bytes / 1024) + ' КБ, макс 200 КБ).');
    } catch (e) {}

    return errs;
  };

  /* ════════════════════════ SAVE / LOAD ════════════════════════ */

  Builder.prototype.save = function (publish) {
    var self = this;
    var errs = this.validate();
    if (errs.length) {
      global.LS.modal({
        title: 'Не удаётся сохранить', size: 'sm',
        content: '<div style="display:flex;flex-direction:column;gap:8px;font-size:.85rem;color:var(--text-2)">' +
          '<div>Исправьте перед сохранением:</div><ul style="margin:0;padding-left:18px;display:flex;flex-direction:column;gap:5px">' +
          errs.slice(0, 12).map(function (e) { return '<li>' + esc(e) + '</li>'; }).join('') +
          (errs.length > 12 ? '<li>…и ещё ' + (errs.length - 12) + '</li>' : '') +
          '</ul></div>',
        actions: [{ label: 'Понятно', primary: true, onClick: function () { this.close(); } }]
      });
      return;
    }

    var spec = this.buildSpec();
    var meta = {
      title: trimStr(this.st.meta.title),
      description: trimStr(this.st.meta.desc),
      subject: trimStr(this.st.subject) || null,
      grade: (this.st.grade === '' || this.st.grade == null) ? null : parseInt(this.st.grade, 10),
      cat: this.st.cat || null,
      spec: spec
    };
    if (publish) meta.status = 'published';

    var p;
    if (this.simId) {
      p = global.LS.customSimUpdate(this.simId, meta);
    } else {
      if (publish) meta.status = 'published';
      p = global.LS.customSimCreate(meta);
    }
    p.then(function (res) {
      if (!self.simId && res && res.id) {
        self.simId = res.id;
        // обновить URL, чтобы повторное «Сохранить» делало update, а reload грузил эту симуляцию
        try { global.history.replaceState({}, '', '/sim-builder?id=' + res.id); } catch (e) {}
      }
      if (publish) self.status = 'published';
      else if (self.status !== 'published') self.status = 'draft';
      self.renderToolbar();
      global.LS.toast(publish ? 'Опубликовано' : 'Сохранено', 'success');
    }).catch(function (e) {
      global.LS.toast((e && e.message) || 'Ошибка сохранения', 'error');
    });
  };

  /* ════════════════════════ РЕНДЕР ПАНЕЛЕЙ ════════════════════════ */

  Builder.prototype.renderPanels = function () {
    var p = this.panelHost;
    if (!p) return;
    p.innerHTML =
      this.sectionMeta() +
      this.sectionParams() +
      this.sectionObjects() +
      this.sectionPlotsPhysics();
    this.wirePanels();
  };

  /* ── секция-аккордеон ── */
  function section(key, title, bodyHtml, open, count) {
    var cnt = (count != null) ? '<span class="sbu-sec-count">' + count + '</span>' : '';
    return '<div class="sbu-sec' + (open ? ' open' : '') + '" data-sec="' + key + '">' +
      '<button class="sbu-sec-hdr" data-sec-toggle="' + key + '">' +
        '<span class="sbu-sec-title">' + esc(title) + '</span>' + cnt +
        '<span class="sbu-sec-chev">' + ICON.chev + '</span>' +
      '</button>' +
      '<div class="sbu-sec-body">' + bodyHtml + '</div>' +
    '</div>';
  }

  /* ── Мета ── */
  Builder.prototype.sectionMeta = function () {
    var st = this.st;
    var catOpts = ['<option value="">— нет —</option>'].concat(CATS.map(function (c) {
      return '<option value="' + c + '"' + (st.cat === c ? ' selected' : '') + '>' + CAT_LABEL[c] + '</option>';
    })).join('');
    var body =
      field('Заголовок', '<input class="sbu-in" data-meta="title" value="' + esc(st.meta.title) + '" placeholder="Бросок тела под углом" />') +
      field('Описание', '<textarea class="sbu-in" data-meta="desc" rows="2" placeholder="Краткое описание">' + esc(st.meta.desc) + '</textarea>') +
      '<div class="sbu-row2">' +
        field('Предмет', '<input class="sbu-in" data-meta="subject" value="' + esc(st.subject) + '" placeholder="Физика" />') +
        field('Класс', '<input class="sbu-in" type="number" min="1" max="11" data-meta="grade" value="' + esc(st.grade) + '" placeholder="9" />') +
      '</div>' +
      field('Категория', '<select class="sbu-in" data-meta="cat">' + catOpts + '</select>') +
      '<div class="sbu-divider"></div>' +
      '<div class="sbu-sub">Поле сцены (мировые координаты)</div>' +
      '<div class="sbu-row4">' +
        miniField('x от', '<input class="sbu-in" type="number" data-vp="xmin" value="' + esc(st.viewport.xmin) + '" />') +
        miniField('x до', '<input class="sbu-in" type="number" data-vp="xmax" value="' + esc(st.viewport.xmax) + '" />') +
        miniField('y от', '<input class="sbu-in" type="number" data-vp="ymin" value="' + esc(st.viewport.ymin) + '" />') +
        miniField('y до', '<input class="sbu-in" type="number" data-vp="ymax" value="' + esc(st.viewport.ymax) + '" />') +
      '</div>' +
      '<div class="sbu-checks">' +
        checkbox('vp', 'grid', 'Сетка', st.viewport.grid) +
        checkbox('vp', 'axes', 'Оси', st.viewport.axes) +
        checkbox('time', 'autoplay', 'Автозапуск', st.time.autoplay) +
        checkbox('time', 'loop', 'Зацикл. t', st.time.loop) +
      '</div>';
    return section('meta', 'Метаданные и сцена', body, this._open.meta);
  };

  /* ── Параметры ── */
  Builder.prototype.sectionParams = function () {
    var rows = this.st.params.map(function (p, i) {
      return '<div class="sbu-param" data-pi="' + i + '">' +
        '<div class="sbu-param-top">' +
          '<input class="sbu-in sbu-in-sm" data-pf="name" value="' + esc(p.name) + '" placeholder="имя (v)" title="Имя переменной (исп. в выражениях)" />' +
          '<input class="sbu-in sbu-in-sm" data-pf="label" value="' + esc(p.label) + '" placeholder="подпись" />' +
          '<button class="sbu-icon-btn sbu-del" data-pdel="' + i + '" title="Удалить">' + ICON.trash + '</button>' +
        '</div>' +
        '<div class="sbu-row4">' +
          miniField('min', '<input class="sbu-in" type="number" data-pf="min" value="' + esc(p.min) + '" />') +
          miniField('max', '<input class="sbu-in" type="number" data-pf="max" value="' + esc(p.max) + '" />') +
          miniField('шаг', '<input class="sbu-in" type="number" data-pf="step" value="' + esc(p.step) + '" />') +
          miniField('старт', '<input class="sbu-in" type="number" data-pf="value" value="' + esc(p.value) + '" />') +
        '</div>' +
        '<input class="sbu-in sbu-in-sm" data-pf="unit" value="' + esc(p.unit) + '" placeholder="ед. изм. (м/с)" />' +
      '</div>';
    }).join('');
    var body = (rows || '<div class="sbu-empty-sm">Нет параметров. Добавьте слайдер.</div>') +
      '<button class="sbu-add" data-add="param">' + ICON.plus + ' Параметр</button>';
    return section('params', 'Параметры (слайдеры)', body, this._open.params, this.st.params.length);
  };

  /* ── Объекты ── */
  Builder.prototype.sectionObjects = function () {
    var self = this;
    var rows = this.st.objects.map(function (o, i) { return self.objectEditor(o, i); }).join('');
    var typeOpts = OBJECT_TYPES.filter(function (t) { return t !== 'plot'; })
      .map(function (t) { return '<option value="' + t + '">' + TYPE_LABEL[t] + '</option>'; }).join('');
    var body = (rows || '<div class="sbu-empty-sm">Нет объектов. Добавьте фигуру/точку/подпись.</div>') +
      '<div class="sbu-add-row">' +
        '<select class="sbu-in sbu-in-sm" id="sbu-newtype">' + typeOpts + '</select>' +
        '<button class="sbu-add" data-add="object">' + ICON.plus + ' Объект</button>' +
      '</div>';
    return section('objects', 'Объекты', body, this._open.objects, this.st.objects.length);
  };

  /* Редактор одного объекта: поля зависят от типа. */
  Builder.prototype.objectEditor = function (o, i) {
    var selected = (this._selObjId === o._uid);
    var hidden = !!o.hidden;
    var n = this.st.objects.length;
    var fields = OBJ_FIELDS[o.type] || [];
    var inner = fields.map(function (f) {
      if (f.kind === 'check') {
        return '<label class="sbu-of-check"><input type="checkbox" data-of="' + f.key + '"' + (o[f.key] ? ' checked' : '') + '/> ' + esc(f.label) + '</label>';
      }
      if (f.kind === 'color') {
        // fill/trailColor — очищаемые («нет заливки»); основной color — нет
        var clearable = (f.key === 'fill' || f.key === 'fillColor' || f.key === 'trailColor');
        return colorCtl(f.label, 'data-of="' + f.key + '"', o[f.key], clearable);
      }
      if (f.kind === 'text') {
        return miniField(f.label, '<input class="sbu-in" data-of="' + f.key + '" value="' + esc(o[f.key] == null ? '' : o[f.key]) + '" placeholder="' + esc(f.ph || '') + '" />');
      }
      // expr — число или выражение, с проверкой
      var v = (o[f.key] == null ? '' : o[f.key]);
      var err = exprError(v);
      return '<div class="sbu-of' + (err ? ' has-err' : '') + '">' +
        '<label class="sbu-of-lbl">' + esc(f.label) +
          '<button class="sbu-fx" data-fx="' + f.key + '" title="Палитра функций/параметров">fx</button>' +
        '</label>' +
        '<input class="sbu-in sbu-in-expr" data-of="' + f.key + '" value="' + esc(v) + '" placeholder="' + esc(f.ph || 'число или выражение') + '" />' +
        (err ? '<span class="sbu-of-err">' + esc(err) + '</span>' : '') +
      '</div>';
    }).join('');
    // ── блок «Стиль» (P4): opacity/lineStyle/pointStyle/glow/gradient ──
    var style = STYLE_FOR[o.type] ? this.styleBlock(o) : '';
    // ── label с LaTeX-превью ──
    var latexPrev = '';
    if (o.type === 'label' && o.text) {
      latexPrev = '<div class="sbu-latex" data-latex="' + esc(o.text) + '"></div>';
    }
    return '<div class="sbu-obj' + (selected ? ' sel' : '') + (hidden ? ' is-hidden' : '') + '" data-oi="' + i + '">' +
      '<div class="sbu-obj-hdr">' +
        '<span class="sbu-obj-type">' + (TYPE_LABEL[o.type] || o.type) + '</span>' +
        '<input class="sbu-in sbu-in-id" data-of="id" value="' + esc(o.id == null ? '' : o.id) + '" placeholder="id" title="Идентификатор (для ссылок obj.x/obj.y)" />' +
        '<button class="sbu-icon-btn sbu-zord" data-oup="' + i + '" title="Выше"' + (i === 0 ? ' disabled' : '') + '>' + ICON.up + '</button>' +
        '<button class="sbu-icon-btn sbu-zord" data-odown="' + i + '" title="Ниже"' + (i === n - 1 ? ' disabled' : '') + '>' + ICON.down + '</button>' +
        '<button class="sbu-icon-btn' + (hidden ? ' active' : '') + '" data-ohide="' + i + '" title="' + (hidden ? 'Показать' : 'Скрыть') + '">' + (hidden ? ICON.eyeOff : ICON.eye) + '</button>' +
        '<button class="sbu-icon-btn sbu-dup" data-odup="' + i + '" title="Дублировать">' + ICON.copy + '</button>' +
        '<button class="sbu-icon-btn sbu-place" data-place="' + o._uid + '" title="Поставить/двигать на сцене">' + ICON.target + '</button>' +
        '<button class="sbu-icon-btn sbu-del" data-odel="' + i + '" title="Удалить">' + ICON.trash + '</button>' +
      '</div>' +
      '<div class="sbu-obj-fields">' + inner + latexPrev + '</div>' +
      style +
    '</div>';
  };

  /* Блок «Стиль» объекта: непрозрачность + стиль линии/точки + glow + градиент.
     Применимость полей зависит от типа (STYLE_FOR[type] = {opacity,line,point,glow,grad}). */
  Builder.prototype.styleBlock = function (o) {
    var cfg = STYLE_FOR[o.type];
    var ctrls = [];
    if (cfg.opacity) ctrls.push(rangeCtl('непрозр.', 'data-of="opacity"', o.opacity, 0, 1, 0.05));
    if (cfg.line) ctrls.push(selectCtl('линия', 'data-of="lineStyle"', o.lineStyle || 'solid', LINE_STYLE_OPTS));
    if (cfg.point) ctrls.push(selectCtl('стиль точки', 'data-of="pointStyle"', o.pointStyle || 'filled', POINT_STYLE_OPTS));
    var grad = '';
    if (cfg.grad) {
      var g = Array.isArray(o.gradient) ? o.gradient : [];
      var on = (g.length >= 2);
      grad =
        '<label class="sbu-of-check"><input type="checkbox" data-grad-on' + (on ? ' checked' : '') + '/> Градиент-заливка</label>' +
        '<div class="sbu-grad-row"' + (on ? '' : ' style="display:none"') + '>' +
          colorCtl('от', 'data-grad="0"', g[0] || toHexColor(o.color) , false) +
          colorCtl('до', 'data-grad="1"', g[1] || '#1b1b2e', false) +
        '</div>';
    }
    var glow = cfg.glow
      ? '<label class="sbu-of-check"><input type="checkbox" data-of="glow"' + (o.glow ? ' checked' : '') + '/> Свечение (glow)</label>'
      : '';
    return '<div class="sbu-obj-style">' +
      '<div class="sbu-sub">Стиль</div>' +
      (ctrls.length ? '<div class="sbu-style-row">' + ctrls.join('') + '</div>' : '') +
      glow + grad +
    '</div>';
  };

  /* Редактор одного графика (plot): plot-уровневые поля (var/range/trace/fill/marker/legend)
     + список кривых (curveEditor). */
  Builder.prototype.plotEditor = function (o, i) {
    var hidden = !!o.hidden;
    var n = this.st.plots.length;
    var rangeErr = (o.range_a !== '' && o.range_a != null) ? exprError(o.range_a) : (exprError(o.range_b) || '');
    var curves = Array.isArray(o.curves) ? o.curves : [];
    var curveHtml = curves.map(function (cv, ci) { return curveEditor(cv, i, ci, (curves.length > 1)); }).join('');
    return '<div class="sbu-plot' + (hidden ? ' is-hidden' : '') + '" data-plti="' + i + '">' +
      '<div class="sbu-obj-hdr">' +
        '<span class="sbu-obj-type">График</span>' +
        '<span style="flex:1"></span>' +
        '<button class="sbu-icon-btn sbu-zord" data-pltup="' + i + '" title="Выше"' + (i === 0 ? ' disabled' : '') + '>' + ICON.up + '</button>' +
        '<button class="sbu-icon-btn sbu-zord" data-pltdown="' + i + '" title="Ниже"' + (i === n - 1 ? ' disabled' : '') + '>' + ICON.down + '</button>' +
        '<button class="sbu-icon-btn' + (hidden ? ' active' : '') + '" data-plthide="' + i + '" title="' + (hidden ? 'Показать' : 'Скрыть') + '">' + (hidden ? ICON.eyeOff : ICON.eye) + '</button>' +
        '<button class="sbu-icon-btn sbu-del" data-pltdel="' + i + '" title="Удалить">' + ICON.trash + '</button>' +
      '</div>' +
      '<div class="sbu-curves">' + curveHtml + '</div>' +
      '<button class="sbu-add sbu-add-sm" data-curveadd="' + i + '">' + ICON.plus + ' Кривая</button>' +
      '<div class="sbu-row4">' +
        miniField('перем.', '<input class="sbu-in" data-plf="var" value="' + esc(o['var'] == null ? 'x' : o['var']) + '" placeholder="x" />') +
        miniField('от', '<input class="sbu-in" data-plf="range_a" value="' + esc(o.range_a == null ? '' : o.range_a) + '" placeholder="xmin" />') +
        miniField('до', '<input class="sbu-in" data-plf="range_b" value="' + esc(o.range_b == null ? '' : o.range_b) + '" placeholder="xmax" />') +
        miniField('точек', '<input class="sbu-in" type="number" data-plf="samples" value="' + esc(o.samples == null ? '' : o.samples) + '" placeholder="200" />') +
      '</div>' +
      '<div class="sbu-style-row">' +
        selectCtl('маркеры', 'data-plf="plotMarker"', o.plotMarker || 'none', MARKER_OPTS) +
        '<label class="sbu-mini"><span class="sbu-mini-lbl">заливка под всеми</span>' +
          '<label class="sbu-of-check" style="height:32px"><input type="checkbox" data-plf="plotFill"' + (o.plotFill ? ' checked' : '') + '/> вкл</label></label>' +
      '</div>' +
      '<div class="sbu-checks">' +
        '<label class="sbu-of-check"><input type="checkbox" data-plf="trace"' + (o.trace ? ' checked' : '') + '/> След по времени (trace)</label>' +
        '<label class="sbu-of-check"><input type="checkbox" data-plf="legend"' + (o.legend !== false ? ' checked' : '') + '/> Легенда</label>' +
      '</div>' +
      (rangeErr ? '<span class="sbu-of-err">диапазон: ' + esc(rangeErr) + '</span>' : '') +
    '</div>';
  };

  /* Редактор одной кривой графика. data-cvf — поле кривой; data-cvfx — fx-палитра. */
  function curveEditor(cv, pi, ci, removable) {
    var exprErr = exprError(cv.expr);
    return '<div class="sbu-curve" data-pi="' + pi + '" data-ci="' + ci + '">' +
      '<div class="sbu-of' + (exprErr ? ' has-err' : '') + '">' +
        '<label class="sbu-of-lbl">выражение' +
          '<span style="display:flex;gap:4px;align-items:center">' +
            '<button class="sbu-fx" data-cvfx>fx</button>' +
            (removable ? '<button class="sbu-icon-btn sbu-del sbu-curve-del" data-curvedel title="Удалить кривую">' + ICON.trash + '</button>' : '') +
          '</span>' +
        '</label>' +
        '<input class="sbu-in sbu-in-expr" data-cvf="expr" value="' + esc(cv.expr == null ? '' : cv.expr) + '" placeholder="sin(x)" />' +
        (exprErr ? '<span class="sbu-of-err">' + esc(exprErr) + '</span>' : '') +
      '</div>' +
      '<div class="sbu-row2">' +
        colorCtl('цвет', 'data-cvf="color"', cv.color, true) +
        miniField('подпись', '<input class="sbu-in sbu-in-sm" data-cvf="label" value="' + esc(cv.label == null ? '' : cv.label) + '" placeholder="легенда" />') +
      '</div>' +
      '<div class="sbu-style-row">' +
        miniField('толщ.', '<input class="sbu-in sbu-in-sm" type="number" step="0.5" data-cvf="width" value="' + esc(cv.width == null ? '' : cv.width) + '" placeholder="2" />') +
        selectCtl('линия', 'data-cvf="lineStyle"', cv.lineStyle || 'solid', LINE_STYLE_OPTS) +
        selectCtl('маркер', 'data-cvf="marker"', cv.marker || 'none', MARKER_OPTS) +
      '</div>' +
      '<div class="sbu-style-row">' +
        rangeCtl('непрозр.', 'data-cvf="opacity"', cv.opacity, 0, 1, 0.05) +
        '<label class="sbu-mini"><span class="sbu-mini-lbl">заливка</span>' +
          '<label class="sbu-of-check" style="height:32px"><input type="checkbox" data-cvf="fill"' + (cv.fill ? ' checked' : '') + '/> вкл</label></label>' +
        (cv.fill ? colorCtl('цвет зал.', 'data-cvf="fillColor"', cv.fillColor, true) : '<span></span>') +
      '</div>' +
    '</div>';
  }

  /* ── Графики + Физика ── */
  Builder.prototype.sectionPlotsPhysics = function () {
    var self = this;
    // plots — каждый график: список кривых + plot-уровневые поля
    var plotRows = this.st.plots.map(function (o, i) { return self.plotEditor(o, i); }).join('');

    var plotsBody = (plotRows || '<div class="sbu-empty-sm">Нет графиков. Добавьте график функции — можно несколько кривых.</div>') +
      '<button class="sbu-add" data-add="plot">' + ICON.plus + ' График</button>';

    // physics
    var ph = this.st.physics;
    var bodyHint = '<div class="sbu-sub" style="margin-top:6px">Сделать объект физ-телом: добавьте ему поле «масса» (' + ICON.cog + ' в объекте). Тип point/circle.</div>';
    var physBody =
      '<label class="sbu-of-check sbu-phys-toggle"><input type="checkbox" data-phys="enabled"' + (ph.enabled ? ' checked' : '') + '/> Включить физику</label>' +
      '<div class="sbu-phys-fields"' + (ph.enabled ? '' : ' style="opacity:.45;pointer-events:none"') + '>' +
        '<div class="sbu-row2">' +
          miniField('гравитация x', '<input class="sbu-in" type="number" data-phf="gx" value="' + esc(ph.gx) + '" />') +
          miniField('гравитация y', '<input class="sbu-in" type="number" data-phf="gy" value="' + esc(ph.gy) + '" />') +
        '</div>' +
        '<div class="sbu-row2">' +
          miniField('трение', '<input class="sbu-in" type="number" step="0.1" data-phf="friction" value="' + esc(ph.friction) + '" />') +
          miniField('упругость 0..1', '<input class="sbu-in" type="number" step="0.05" min="0" max="1" data-phf="restitution" value="' + esc(ph.restitution) + '" />') +
        '</div>' +
        // walls
        '<div class="sbu-sub">Стены</div>' +
        ph.walls.map(function (w, i) {
          var sideOpts = ['', 'bottom', 'top', 'left', 'right'].map(function (s) {
            return '<option value="' + s + '"' + (w.side === s ? ' selected' : '') + '>' + (s === '' ? '— отрезок —' : WALL_LABEL[s]) + '</option>';
          }).join('');
          return '<div class="sbu-wall" data-wi="' + i + '">' +
            '<select class="sbu-in sbu-in-sm" data-wf="side">' + sideOpts + '</select>' +
            (w.side ? '' :
              '<div class="sbu-row4">' +
                miniField('x1', '<input class="sbu-in" data-wf="x1" value="' + esc(w.x1 == null ? '' : w.x1) + '" />') +
                miniField('y1', '<input class="sbu-in" data-wf="y1" value="' + esc(w.y1 == null ? '' : w.y1) + '" />') +
                miniField('x2', '<input class="sbu-in" data-wf="x2" value="' + esc(w.x2 == null ? '' : w.x2) + '" />') +
                miniField('y2', '<input class="sbu-in" data-wf="y2" value="' + esc(w.y2 == null ? '' : w.y2) + '" />') +
              '</div>') +
            '<button class="sbu-icon-btn sbu-del" data-wdel="' + i + '" title="Удалить стену">' + ICON.trash + '</button>' +
          '</div>';
        }).join('') +
        '<button class="sbu-add sbu-add-sm" data-add="wall">' + ICON.plus + ' Стена</button>' +
        // springs
        '<div class="sbu-sub">Пружины</div>' +
        ph.springs.map(function (s, i) {
          return '<div class="sbu-spring" data-spi="' + i + '">' +
            '<div class="sbu-row2">' +
              miniField('конец A', '<input class="sbu-in" data-spf="a" value="' + esc(s.a == null ? '' : s.a) + '" placeholder="id или x,y" />') +
              miniField('конец B', '<input class="sbu-in" data-spf="b" value="' + esc(s.b == null ? '' : s.b) + '" placeholder="id или x,y" />') +
            '</div>' +
            '<div class="sbu-row4">' +
              miniField('k', '<input class="sbu-in" type="number" data-spf="k" value="' + esc(s.k == null ? '' : s.k) + '" />') +
              miniField('длина', '<input class="sbu-in" type="number" data-spf="length" value="' + esc(s.length == null ? '' : s.length) + '" />') +
              miniField('демпф.', '<input class="sbu-in" type="number" data-spf="damping" value="' + esc(s.damping == null ? '' : s.damping) + '" />') +
              '<button class="sbu-icon-btn sbu-del" data-spdel="' + i + '" title="Удалить пружину">' + ICON.trash + '</button>' +
            '</div>' +
          '</div>';
        }).join('') +
        '<button class="sbu-add sbu-add-sm" data-add="spring">' + ICON.plus + ' Пружина</button>' +
        bodyHint +
      '</div>';

    return section('plots', 'Графики', plotsBody, this._open.plots, this.st.plots.length) +
           section('physics', 'Физика', physBody, !!ph.enabled);
  };

  /* ════════════════════════ ПРИВЯЗКА СОБЫТИЙ ПАНЕЛЕЙ ════════════════════════ */

  Builder.prototype.wirePanels = function () {
    var self = this;
    var p = this.panelHost;

    // ── История правки полей (P5): один снапшот на «сессию» правки поля.
    //    На focusin поля сбрасываем флаг; первый input/change снимает снапшот.
    //    Так Ctrl+Z откатывает целиком отредактированное значение, а не посимвольно. ──
    p.addEventListener('focusin', function (ev) {
      var tg = ev.target, tag = tg && tg.tagName;
      if (tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT') self._fieldSnapTaken = false;
    });

    // аккордеоны
    p.querySelectorAll('[data-sec-toggle]').forEach(function (b) {
      b.addEventListener('click', function () {
        var key = b.getAttribute('data-sec-toggle');
        var sec = p.querySelector('[data-sec="' + key + '"]');
        if (sec) sec.classList.toggle('open');
        self._open[key] = sec ? sec.classList.contains('open') : false;
      });
    });

    // meta inputs (title/desc -> st.meta.X ; subject/grade/cat -> st.X)
    p.querySelectorAll('[data-meta]').forEach(function (el) {
      var evt = el.tagName === 'SELECT' ? 'change' : 'input';
      el.addEventListener(evt, function () {
        self.snapField();
        var k = el.getAttribute('data-meta');
        if (k === 'title' || k === 'desc') self.st.meta[k] = el.value;
        else self.st[k] = el.value;
        self.scheduleRemount(false);
      });
    });
    p.querySelectorAll('[data-vp]').forEach(function (el) {
      el.addEventListener('input', function () {
        self.snapField();
        var k = el.getAttribute('data-vp');
        if (el.type === 'checkbox') self.st.viewport[k] = el.checked;
        else self.st.viewport[k] = el.value === '' ? '' : parseFloat(el.value);
        self.scheduleRemount(false);
      });
    });
    p.querySelectorAll('[data-grp]').forEach(function (el) {
      el.addEventListener('change', function () {
        self.pushHistory();
        var grp = el.getAttribute('data-grp'), k = el.getAttribute('data-k');
        var target = grp === 'vp' ? self.st.viewport : self.st.time;
        target[k] = el.checked;
        self.scheduleRemount(false);
      });
    });

    // params
    p.querySelectorAll('.sbu-param').forEach(function (row) {
      var i = parseInt(row.getAttribute('data-pi'), 10);
      row.querySelectorAll('[data-pf]').forEach(function (el) {
        el.addEventListener('input', function () {
          self.snapField();
          var k = el.getAttribute('data-pf');
          self.st.params[i][k] = (el.type === 'number') ? (el.value === '' ? '' : parseFloat(el.value)) : el.value;
          self.scheduleRemount(false);
        });
      });
    });
    p.querySelectorAll('[data-pdel]').forEach(function (b) {
      b.addEventListener('click', function () {
        self.pushHistory();
        self.st.params.splice(parseInt(b.getAttribute('data-pdel'), 10), 1);
        self.renderPanels(); self.scheduleRemount(false);
      });
    });

    // objects
    p.querySelectorAll('.sbu-obj').forEach(function (row) {
      var i = parseInt(row.getAttribute('data-oi'), 10);
      row.querySelectorAll('[data-of]').forEach(function (el) {
        var evt = el.type === 'checkbox' ? 'change' : 'input';
        el.addEventListener(evt, function () {
          if (el.type === 'checkbox') self.pushHistory(); else self.snapField();
          var k = el.getAttribute('data-of');
          if (el.type === 'checkbox') self.st.objects[i][k] = el.checked;
          else if (el.type === 'range') {
            self.st.objects[i][k] = (el.value === '' ? '' : parseFloat(el.value));
            var vb = el.closest('.sbu-range-mini'); var lbl = vb && vb.querySelector('.sbu-range-val');
            if (lbl) lbl.textContent = el.value;
          } else self.st.objects[i][k] = el.value;
          // обновить inline-ошибку выражения и LaTeX-превью без полного рендера
          self.updateFieldFeedback(el, self.st.objects[i]);
          self.scheduleRemount(false);
        });
      });
      // нативный color-picker -> синхрон с текстовым полем рядом (текст = источник истины)
      self.wireColorControls(row, function () { self.scheduleRemount(false); });
      // градиент-заливка: тумблер показывает пару color-input-ов; снятие -> удалить gradient
      var gOn = row.querySelector('[data-grad-on]');
      if (gOn) gOn.addEventListener('change', function () {
        self.pushHistory();
        var obj = self.st.objects[i];
        var gr = row.querySelector('.sbu-grad-row');
        if (gOn.checked) {
          if (gr) gr.style.display = '';
          var c0 = row.querySelector('[data-grad="0"]'), c1 = row.querySelector('[data-grad="1"]');
          obj.gradient = [ (c0 && c0.value) || '#06D6E0', (c1 && c1.value) || '#1b1b2e' ];
        } else { delete obj.gradient; if (gr) gr.style.display = 'none'; }
        self.scheduleRemount(false);
      });
      row.querySelectorAll('[data-grad]').forEach(function (el) {
        el.addEventListener('input', function () {
          self.snapField();
          var obj = self.st.objects[i];
          var c0 = row.querySelector('[data-grad="0"]'), c1 = row.querySelector('[data-grad="1"]');
          obj.gradient = [ (c0 && c0.value) || '#06D6E0', (c1 && c1.value) || '#1b1b2e' ];
          self.scheduleRemount(false);
        });
      });
    });
    p.querySelectorAll('[data-odel]').forEach(function (b) {
      b.addEventListener('click', function () {
        self.pushHistory();
        var i = parseInt(b.getAttribute('data-odel'), 10);
        var o = self.st.objects[i];
        if (o && o._uid === self._selObjId) self._selObjId = null;
        self.st.objects.splice(i, 1);
        self.renderPanels(); self.scheduleRemount(false);
      });
    });
    // z-order: вверх (раньше в массиве = под низом отрисовки) / вниз
    p.querySelectorAll('[data-oup]').forEach(function (b) {
      b.addEventListener('click', function () {
        var i = parseInt(b.getAttribute('data-oup'), 10);
        if (i > 0) { self.pushHistory(); var a = self.st.objects; var t = a[i]; a[i] = a[i - 1]; a[i - 1] = t; }
        self.renderPanels(); self.scheduleRemount(false);
      });
    });
    p.querySelectorAll('[data-odown]').forEach(function (b) {
      b.addEventListener('click', function () {
        var i = parseInt(b.getAttribute('data-odown'), 10);
        var a = self.st.objects;
        if (i < a.length - 1) { self.pushHistory(); var t = a[i]; a[i] = a[i + 1]; a[i + 1] = t; }
        self.renderPanels(); self.scheduleRemount(false);
      });
    });
    // видимость: hidden:true -> объект не попадёт в buildSpec (движок не трогаем)
    p.querySelectorAll('[data-ohide]').forEach(function (b) {
      b.addEventListener('click', function () {
        self.pushHistory();
        var i = parseInt(b.getAttribute('data-ohide'), 10);
        var o = self.st.objects[i]; if (!o) return;
        if (o.hidden) delete o.hidden; else o.hidden = true;
        self.renderPanels(); self.scheduleRemount(false);
      });
    });
    // дублировать объект (новый _uid + новая ссылка; вставить сразу после)
    p.querySelectorAll('[data-odup]').forEach(function (b) {
      b.addEventListener('click', function () {
        var i = parseInt(b.getAttribute('data-odup'), 10);
        if (self.st.objects.length + self.st.plots.length >= LIMITS.objects) { global.LS.toast('Достигнут лимит объектов', 'warn'); return; }
        var o = self.st.objects[i]; if (!o) return;
        self.pushHistory();
        var clone = JSON.parse(JSON.stringify(o));
        clone._uid = uid('o');
        if (clone.id) clone.id = clone.id + '_copy';
        self.st.objects.splice(i + 1, 0, clone);
        self.renderPanels(); self.scheduleRemount(false);
      });
    });
    p.querySelectorAll('[data-place]').forEach(function (b) {
      b.addEventListener('click', function () {
        var uidv = b.getAttribute('data-place');
        self._selObjId = (self._selObjId === uidv) ? null : uidv;
        self.renderPanels();
        if (self.inst && self.inst.canvas) self.inst.canvas.style.cursor = self._selObjId ? 'crosshair' : '';
        if (self._selObjId) global.LS.toast('Кликните на сцене, чтобы поставить объект', 'info', 2200);
      });
    });
    p.querySelectorAll('[data-fx]').forEach(function (b) {
      b.addEventListener('click', function () {
        var key = b.getAttribute('data-fx');
        var input = b.closest('.sbu-of').querySelector('[data-of]');
        self.openPalette(input);
      });
    });

    // plots
    p.querySelectorAll('.sbu-plot').forEach(function (row) {
      var i = parseInt(row.getAttribute('data-plti'), 10);
      // plot-уровневые поля (var/range/samples/trace/legend/plotFill/plotMarker)
      row.querySelectorAll('[data-plf]').forEach(function (el) {
        var evt = el.type === 'checkbox' ? 'change' : 'input';
        el.addEventListener(evt, function () {
          if (el.type === 'checkbox') self.pushHistory(); else self.snapField();
          var k = el.getAttribute('data-plf');
          if (el.type === 'checkbox') self.st.plots[i][k] = el.checked;
          else self.st.plots[i][k] = el.value;
          self.updateFieldFeedback(el, null);
          self.scheduleRemount(false);
        });
      });
      // кривые
      row.querySelectorAll('.sbu-curve').forEach(function (cr) {
        var ci = parseInt(cr.getAttribute('data-ci'), 10);
        cr.querySelectorAll('[data-cvf]').forEach(function (el) {
          var evt = (el.type === 'checkbox') ? 'change' : 'input';
          el.addEventListener(evt, function () {
            if (el.type === 'checkbox') self.pushHistory(); else self.snapField();
            var k = el.getAttribute('data-cvf');
            var cv = self.st.plots[i].curves[ci]; if (!cv) return;
            if (el.type === 'checkbox') {
              cv[k] = el.checked;
              if (k === 'fill') { self.renderPanels(); self.scheduleRemount(false); return; } // показать/скрыть «цвет зал.»
            } else if (el.type === 'range') {
              cv[k] = (el.value === '' ? '' : parseFloat(el.value));
              var vb = el.closest('.sbu-range-mini'); var lbl = vb && vb.querySelector('.sbu-range-val');
              if (lbl) lbl.textContent = el.value;
            } else cv[k] = el.value;
            self.updateFieldFeedback(el, null);
            self.scheduleRemount(false);
          });
        });
        self.wireColorControls(cr);
        // fx-палитра для выражения кривой
        var fx = cr.querySelector('[data-cvfx]');
        if (fx) fx.addEventListener('click', function () {
          self.openPalette(cr.querySelector('[data-cvf="expr"]'));
        });
        // удалить кривую
        var cdel = cr.querySelector('[data-curvedel]');
        if (cdel) cdel.addEventListener('click', function () {
          var arr = self.st.plots[i].curves;
          if (arr.length > 1) { self.pushHistory(); arr.splice(ci, 1); }
          self.renderPanels(); self.scheduleRemount(false);
        });
      });
      // plot-level color-контролы (на будущее; кривые имеют свои)
      self.wireColorControls(row);
    });
    p.querySelectorAll('[data-curveadd]').forEach(function (b) {
      b.addEventListener('click', function () {
        var i = parseInt(b.getAttribute('data-curveadd'), 10);
        var plt = self.st.plots[i]; if (!plt) return;
        self.pushHistory();
        plt.curves = Array.isArray(plt.curves) ? plt.curves : [];
        plt.curves.push(defaultCurve('', ''));
        self.renderPanels(); self.scheduleRemount(false);
      });
    });
    p.querySelectorAll('[data-pltdel]').forEach(function (b) {
      b.addEventListener('click', function () {
        self.pushHistory();
        self.st.plots.splice(parseInt(b.getAttribute('data-pltdel'), 10), 1);
        self.renderPanels(); self.scheduleRemount(false);
      });
    });
    p.querySelectorAll('[data-pltup]').forEach(function (b) {
      b.addEventListener('click', function () {
        var i = parseInt(b.getAttribute('data-pltup'), 10);
        if (i > 0) { self.pushHistory(); var a = self.st.plots; var t = a[i]; a[i] = a[i - 1]; a[i - 1] = t; }
        self.renderPanels(); self.scheduleRemount(false);
      });
    });
    p.querySelectorAll('[data-pltdown]').forEach(function (b) {
      b.addEventListener('click', function () {
        var i = parseInt(b.getAttribute('data-pltdown'), 10);
        var a = self.st.plots;
        if (i < a.length - 1) { self.pushHistory(); var t = a[i]; a[i] = a[i + 1]; a[i + 1] = t; }
        self.renderPanels(); self.scheduleRemount(false);
      });
    });
    p.querySelectorAll('[data-plthide]').forEach(function (b) {
      b.addEventListener('click', function () {
        self.pushHistory();
        var i = parseInt(b.getAttribute('data-plthide'), 10);
        var o = self.st.plots[i]; if (!o) return;
        if (o.hidden) delete o.hidden; else o.hidden = true;
        self.renderPanels(); self.scheduleRemount(false);
      });
    });

    // physics
    var phEnabled = p.querySelector('[data-phys="enabled"]');
    if (phEnabled) phEnabled.addEventListener('change', function () {
      self.pushHistory();
      self.st.physics.enabled = phEnabled.checked;
      self.renderPanels(); self.scheduleRemount(false);
    });
    p.querySelectorAll('[data-phf]').forEach(function (el) {
      el.addEventListener('input', function () {
        self.snapField();
        var k = el.getAttribute('data-phf');
        self.st.physics[k] = el.value === '' ? '' : parseFloat(el.value);
        self.scheduleRemount(false);
      });
    });
    p.querySelectorAll('.sbu-wall').forEach(function (row) {
      var i = parseInt(row.getAttribute('data-wi'), 10);
      row.querySelectorAll('[data-wf]').forEach(function (el) {
        el.addEventListener('input', function () {
          self.snapField();
          var k = el.getAttribute('data-wf');
          self.st.physics.walls[i][k] = (k === 'side') ? el.value : el.value;
          if (k === 'side') { self.renderPanels(); }
          self.scheduleRemount(false);
        });
        el.addEventListener('change', function () { if (el.getAttribute('data-wf') === 'side') { self.renderPanels(); self.scheduleRemount(false); } });
      });
    });
    p.querySelectorAll('[data-wdel]').forEach(function (b) {
      b.addEventListener('click', function () {
        self.pushHistory();
        self.st.physics.walls.splice(parseInt(b.getAttribute('data-wdel'), 10), 1);
        self.renderPanels(); self.scheduleRemount(false);
      });
    });
    p.querySelectorAll('.sbu-spring').forEach(function (row) {
      var i = parseInt(row.getAttribute('data-spi'), 10);
      row.querySelectorAll('[data-spf]').forEach(function (el) {
        el.addEventListener('input', function () {
          self.snapField();
          var k = el.getAttribute('data-spf');
          self.st.physics.springs[i][k] = (el.type === 'number') ? (el.value === '' ? '' : parseFloat(el.value)) : el.value;
          self.scheduleRemount(false);
        });
      });
    });
    p.querySelectorAll('[data-spdel]').forEach(function (b) {
      b.addEventListener('click', function () {
        self.pushHistory();
        self.st.physics.springs.splice(parseInt(b.getAttribute('data-spdel'), 10), 1);
        self.renderPanels(); self.scheduleRemount(false);
      });
    });

    // add buttons
    p.querySelectorAll('[data-add]').forEach(function (b) {
      b.addEventListener('click', function () { self.onAdd(b.getAttribute('data-add')); });
    });

    this.renderLatexPreviews();
  };

  /* Синхронизация color-контролов внутри row: нативный пикер -> текст (и dispatch input,
     чтобы сработал основной обработчик data-of/data-plf/data-cvf); текст -> пикер;
     кнопка очистки -> пустое значение («нет заливки»). onChange — доп. ремонт (для grad). */
  Builder.prototype.wireColorControls = function (row, onChange) {
    row.querySelectorAll('.sbu-color-wrap').forEach(function (wrap) {
      var pick = wrap.querySelector('[data-color-pick]');
      var txt = wrap.querySelector('input.sbu-in-color');
      var clr = wrap.querySelector('[data-color-clear]');
      if (pick && txt) {
        pick.addEventListener('input', function () {
          txt.value = pick.value;
          txt.dispatchEvent(new Event('input', { bubbles: true }));
        });
        txt.addEventListener('input', function () {
          var h = toHexColor(txt.value);
          if (h !== '#000000' || /^#0{3,6}$/i.test(String(txt.value).trim())) pick.value = h;
        });
      }
      if (clr && txt) {
        clr.addEventListener('click', function () {
          txt.value = '';
          txt.dispatchEvent(new Event('input', { bubbles: true }));
        });
      }
    });
  };

  /* Привести checkbox data-grp атрибуты в соответствие (vp/time) — генерим в checkbox()
     с data-grp/data-k. Но проще: переиспользуем общий обработчик. */

  Builder.prototype.onAdd = function (what) {
    if (what === 'param') {
      if (this.st.params.length >= LIMITS.params) { global.LS.toast('Достигнут лимит параметров', 'warn'); return; }
      this.pushHistory();
      this.st.params.push({ name: '', label: '', min: 0, max: 10, step: 1, value: 0, unit: '' });
    } else if (what === 'object') {
      if (this.st.objects.length + this.st.plots.length >= LIMITS.objects) { global.LS.toast('Достигнут лимит объектов', 'warn'); return; }
      var sel = this.panelHost.querySelector('#sbu-newtype');
      var type = sel ? sel.value : 'point';
      this.pushHistory();
      this.st.objects.push(defaultObject(type));
    } else if (what === 'plot') {
      if (this.st.objects.length + this.st.plots.length >= LIMITS.objects) { global.LS.toast('Достигнут лимит объектов', 'warn'); return; }
      this.pushHistory();
      this.st.plots.push({
        _uid: uid('plt'), type: 'plot', 'var': 'x', range_a: '', range_b: '', samples: '',
        trace: false, legend: true, plotFill: false, plotMarker: 'none',
        curves: [defaultCurve('sin(x)', '#F15BB5')]
      });
    } else if (what === 'wall') {
      if (this.st.physics.walls.length >= LIMITS.walls) { global.LS.toast('Достигнут лимит стен', 'warn'); return; }
      this.pushHistory();
      this.st.physics.walls.push({ _uid: uid('w'), side: 'bottom', x1: '', y1: '', x2: '', y2: '' });
    } else if (what === 'spring') {
      if (this.st.physics.springs.length >= LIMITS.springs) { global.LS.toast('Достигнут лимит пружин', 'warn'); return; }
      this.pushHistory();
      this.st.physics.springs.push({ _uid: uid('s'), a: '', b: '', k: 40, length: 2, damping: 0.5 });
    }
    this.renderPanels();
    this.scheduleRemount(false);
  };

  /* дефолтная кривая plot (UI-модель). */
  function defaultCurve(expr, color) {
    return {
      _uid: uid('cv'), expr: (expr == null ? '' : expr), color: (color || ''),
      label: '', width: '', lineStyle: 'solid', opacity: '', fill: '', fillColor: '', marker: 'none'
    };
  }

  /* Загрузка spec-plot -> UI-модель: список curves[] + plot-уровневые поля.
     Поддерживает легаси (одиночный expr/exprs[]) и P3-формат (curves[]). */
  function loadPlot(o) {
    var ui = { _uid: uid('plt'), type: 'plot' };
    ui['var'] = o['var'] || 'x';
    if (Array.isArray(o.range)) { ui.range_a = o.range[0]; ui.range_b = o.range[1]; }
    else { ui.range_a = ''; ui.range_b = ''; }
    ui.trace = !!o.trace;
    ui.samples = (o.samples != null ? o.samples : '');
    ui.plotFill = (o.fill === true) ? true : (typeof o.fill === 'string' ? o.fill : false);
    ui.plotMarker = (o.marker === 'dot' || o.marker === 'ring') ? o.marker : 'none';
    ui.legend = (o.legend === false) ? false : true;
    if (o.hidden) ui.hidden = true;
    // источник кривых: curves[] -> exprs[] -> expr (легаси)
    var defs = [];
    if (Array.isArray(o.curves) && o.curves.length) {
      defs = o.curves.map(function (cv) { return (cv && typeof cv === 'object') ? cv : { expr: cv }; });
    } else if (Array.isArray(o.exprs) && o.exprs.length) {
      defs = o.exprs.map(function (ex) { return { expr: ex }; });
    } else {
      defs = [{ expr: o.expr != null ? o.expr : '', color: o.color }];
    }
    // plot-уровневые стили (легаси width/lineStyle/opacity) наследуются кривой, если у неё не задано
    ui.curves = defs.map(function (cv) {
      cv = cv || {};
      var c = defaultCurve(cv.expr, cv.color || '');
      if (cv.label != null) c.label = String(cv.label);
      var w = (cv.width != null && cv.width !== '') ? cv.width : o.width;
      if (w != null && w !== '' && isFinite(parseFloat(w))) c.width = w;
      var ls = (cv.lineStyle === 'dashed' || cv.lineStyle === 'dotted') ? cv.lineStyle
        : ((o.lineStyle === 'dashed' || o.lineStyle === 'dotted') ? o.lineStyle : '');
      if (ls) c.lineStyle = ls;
      var op = (cv.opacity != null && cv.opacity !== '') ? cv.opacity : o.opacity;
      if (op != null && op !== '' && isFinite(parseFloat(op))) c.opacity = op;
      if (cv.fill === true) c.fill = true;
      else if (typeof cv.fill === 'string' && cv.fill) { c.fill = true; c.fillColor = cv.fill; }
      if (cv.marker === 'dot' || cv.marker === 'ring') c.marker = cv.marker;
      return c;
    });
    if (!ui.curves.length) ui.curves = [defaultCurve('', '')];
    return ui;
  }

  /* Перед сборкой spec plot-объект нужно «материализовать»: range + curves + убрать UI-поля.
     Если ровно одна «простая» кривая (только expr + опц. color) и нет plot-уровневых стилей —
     эмитим легаси-форму (expr/color) для обратной совместимости и стабильного round-trip. */
  function normalizePlotForSpec(o) {
    var out = { type: 'plot', var: o['var'] || 'x' };
    var a = o.range_a, b = o.range_b;
    if (!((a === '' || a == null) && (b === '' || b == null))) {
      out.range = [parseRangeVal(a), parseRangeVal(b)];
    }
    if (o.trace) out.trace = true;
    if (o.samples !== '' && o.samples != null && isFinite(parseFloat(o.samples))) out.samples = parseFloat(o.samples);
    if (o.plotFill === true) out.fill = true;
    else if (typeof o.plotFill === 'string' && o.plotFill) out.fill = o.plotFill;
    if (o.plotMarker === 'dot' || o.plotMarker === 'ring') out.marker = o.plotMarker;

    var curves = Array.isArray(o.curves) ? o.curves : [];
    var built = curves.map(stripCurve).filter(function (c) { return c.expr !== '' && c.expr != null; });

    // легенда: явно выключаем, если стоит false (по умолчанию движок включает при наличии label)
    if (o.legend === false) out.legend = false;

    var single = (built.length === 1) ? built[0] : null;
    var simpleSingle = single && !single.label && single.width == null && (!single.lineStyle || single.lineStyle === 'solid') &&
      single.opacity == null && single.fill == null && (!single.marker || single.marker === 'none');
    if (simpleSingle && out.fill == null && out.marker == null) {
      // легаси-форма: одиночное выражение + цвет
      out.expr = single.expr;
      if (single.color) out.color = single.color;
    } else if (built.length) {
      out.curves = built;
    } else {
      out.expr = ''; // пустой график (валидация поймает)
    }
    return out;
  }

  /* кривую (UI) -> минимальный объект кривой спеки (без _uid/дефолтов). */
  function stripCurve(cv) {
    var out = { expr: (cv.expr == null ? '' : cv.expr) };
    if (cv.color) out.color = cv.color;
    if (cv.label) out.label = cv.label;
    if (cv.width !== '' && cv.width != null && isFinite(parseFloat(cv.width))) out.width = parseFloat(cv.width);
    if (cv.lineStyle === 'dashed' || cv.lineStyle === 'dotted') out.lineStyle = cv.lineStyle;
    if (cv.opacity !== '' && cv.opacity != null && isFinite(parseFloat(cv.opacity))) out.opacity = parseFloat(cv.opacity);
    if (cv.fill === true) out.fill = (cv.fillColor && String(cv.fillColor).trim()) ? cv.fillColor : true;
    if (cv.marker === 'dot' || cv.marker === 'ring') out.marker = cv.marker;
    return out;
  }
  function parseRangeVal(v) {
    if (v === '' || v == null) return 0;
    var n = parseFloat(v);
    return isFinite(n) ? n : String(v); // допускаем выражение-границу (xmin/xmax)
  }

  /* Обновить inline-ошибку выражения у конкретного поля без полного ререндера. */
  Builder.prototype.updateFieldFeedback = function (el, obj) {
    var wrap = el.closest('.sbu-of');
    if (!wrap) return;
    var err = exprError(el.value);
    wrap.classList.toggle('has-err', !!err);
    var errEl = wrap.querySelector('.sbu-of-err');
    if (err) {
      if (!errEl) { errEl = document.createElement('span'); errEl.className = 'sbu-of-err'; wrap.appendChild(errEl); }
      errEl.textContent = err;
    } else if (errEl) { errEl.remove(); }
    // LaTeX-превью для label.text
    if (obj && obj.type === 'label' && el.getAttribute('data-of') === 'text') {
      this.renderLatexPreviews();
    }
  };

  /* Перерисовать поля одного объекта (после drag-on-preview) без потери фокуса панели. */
  Builder.prototype.refreshObjFields = function (uidv) {
    var row = this.panelHost.querySelector('.sbu-obj.sel');
    if (!row) {
      // найти по uid
      var objs = this.st.objects;
      for (var i = 0; i < objs.length; i++) {
        if (objs[i]._uid === uidv) { row = this.panelHost.querySelector('.sbu-obj[data-oi="' + i + '"]'); break; }
      }
    }
    if (!row) return;
    var obj = null;
    var idx = parseInt(row.getAttribute('data-oi'), 10);
    obj = this.st.objects[idx];
    if (!obj) return;
    // числовые поля координат всех типов + points (polyline/path) + dx/dy (vector)
    ['x', 'y', 'x1', 'y1', 'x2', 'y2', 'dx', 'dy', 'points'].forEach(function (k) {
      var inp = row.querySelector('[data-of="' + k + '"]');
      if (inp && obj[k] != null) inp.value = obj[k];
    });
  };

  /* Рендер LaTeX-превью подписей (KaTeX). Безопасно через textContent + renderMathInElement. */
  Builder.prototype.renderLatexPreviews = function () {
    var nodes = this.panelHost.querySelectorAll('.sbu-latex');
    nodes.forEach(function (n) {
      var src = n.getAttribute('data-latex') || '';
      n.textContent = src;
      if (global.renderMathInElement) {
        try {
          global.renderMathInElement(n, {
            delimiters: [
              { left: '$$', right: '$$', display: true },
              { left: '$', right: '$', display: false },
              { left: '\\(', right: '\\)', display: false },
              { left: '\\[', right: '\\]', display: true }
            ], throwOnError: false
          });
        } catch (e) {}
      } else if (global.katex) {
        // одиночная формула без разделителей
        try { n.innerHTML = global.katex.renderToString(src, { throwOnError: false }); } catch (e) {}
      }
    });
  };

  /* Палитра: всплывающее меню функций/констант/параметров. Вставляет имя в input. */
  Builder.prototype.openPalette = function (input) {
    var self = this;
    var names = exprNames();
    var params = this.st.params.filter(function (p) { return p.name; }).map(function (p) { return p.name; });
    // ссылки на объекты с id -> id.x / id.y
    var objRefs = [];
    this.st.objects.forEach(function (o) { if (o.id) { objRefs.push(o.id + '.x'); objRefs.push(o.id + '.y'); } });

    function chips(title, arr, kind) {
      if (!arr.length) return '';
      return '<div class="sbu-pal-grp"><div class="sbu-pal-title">' + esc(title) + '</div><div class="sbu-pal-chips">' +
        arr.map(function (n) { return '<button class="sbu-pal-chip" data-ins="' + esc(n) + '" data-kind="' + kind + '">' + esc(n) + '</button>'; }).join('') +
        '</div></div>';
    }
    var content =
      '<div class="sbu-pal">' +
        chips('Параметры', params, 'var') +
        chips('Объекты (id.x / id.y)', objRefs, 'var') +
        chips('Время / размеры', ['t', 'w', 'h'], 'var') +
        chips('Константы', names.consts, 'const') +
        chips('Функции', names.fns, 'fn') +
      '</div>';
    var m = global.LS.modal({
      title: 'Палитра выражений', size: 'md', content: content,
      actions: [{ label: 'Закрыть', primary: true, onClick: function () { m.close(); } }]
    });
    m.body.querySelectorAll('[data-ins]').forEach(function (b) {
      b.addEventListener('click', function () {
        var ins = b.getAttribute('data-ins');
        var kind = b.getAttribute('data-kind');
        var add = (kind === 'fn') ? ins + '()' : ins;
        insertAtCursor(input, add);
        // обновить состояние из input
        input.dispatchEvent(new Event('input', { bubbles: true }));
      });
    });
  };

  /* ════════════════════════ ХЕЛПЕРЫ ════════════════════════ */

  function field(label, inner) {
    return '<label class="sbu-field"><span class="sbu-field-lbl">' + esc(label) + '</span>' + inner + '</label>';
  }
  function miniField(label, inner) {
    return '<label class="sbu-mini"><span class="sbu-mini-lbl">' + esc(label) + '</span>' + inner + '</label>';
  }
  function checkbox(grp, key, label, checked) {
    return '<label class="sbu-chk"><input type="checkbox" data-grp="' + grp + '" data-k="' + key + '"' + (checked ? ' checked' : '') + '/> ' + esc(label) + '</label>';
  }

  /* ── Контролы стиля (P4) ──────────────────────────────────────────────────
     Все генерят input-ы с data-of (для объектов) или data-plf/data-cvf (plot/кривая).
     attr — строка вида 'data-of="color"' (атрибут привязки события).
     Цвет: нативный <input type=color> (sync) + текст (точное значение / rgba/named) +
     кнопка очистки (для fill/trailColor «нет заливки»). Текст — источник истины. */

  // привести произвольный цвет к #rrggbb для нативного пикера (иначе #000000)
  function toHexColor(v) {
    var s = String(v == null ? '' : v).trim();
    if (/^#[0-9a-fA-F]{6}$/.test(s)) return s.toLowerCase();
    if (/^#[0-9a-fA-F]{3}$/.test(s)) {
      return ('#' + s[1] + s[1] + s[2] + s[2] + s[3] + s[3]).toLowerCase();
    }
    return '#000000';
  }
  // colorAttr — 'data-of="color"' и т.п.; clearable — показывать кнопку «нет»
  function colorCtl(label, colorAttr, value, clearable) {
    var v = (value == null ? '' : value);
    var hex = toHexColor(v);
    var clr = clearable
      ? '<button type="button" class="sbu-color-clr" data-color-clear title="Нет заливки">' + ICON.clearX + '</button>'
      : '';
    return '<label class="sbu-mini sbu-color-mini">' +
      '<span class="sbu-mini-lbl">' + esc(label) + '</span>' +
      '<span class="sbu-color-wrap">' +
        '<input type="color" class="sbu-color-pick" data-color-pick value="' + esc(hex) + '" title="Выбрать цвет" />' +
        '<input class="sbu-in sbu-in-sm sbu-in-color" ' + colorAttr + ' value="' + esc(v) + '" placeholder="#06D6E0" />' +
        clr +
      '</span>' +
    '</label>';
  }
  // слайдер 0..1 (opacity) с числовым отображением
  function rangeCtl(label, attr, value, mn, mx, st) {
    var num = (value == null || value === '') ? '' : value;
    var sliderVal = (num === '') ? mx : num;
    return '<label class="sbu-mini sbu-range-mini">' +
      '<span class="sbu-mini-lbl">' + esc(label) + ' <b class="sbu-range-val">' + esc(num === '' ? mx : num) + '</b></span>' +
      '<input type="range" class="sbu-range" ' + attr + ' min="' + mn + '" max="' + mx + '" step="' + st + '" value="' + esc(sliderVal) + '" />' +
    '</label>';
  }
  // select по списку [{v,l}]
  function selectCtl(label, attr, value, opts) {
    var o = opts.map(function (op) {
      return '<option value="' + esc(op.v) + '"' + (String(value || '') === String(op.v) ? ' selected' : '') + '>' + esc(op.l) + '</option>';
    }).join('');
    return '<label class="sbu-mini"><span class="sbu-mini-lbl">' + esc(label) + '</span>' +
      '<select class="sbu-in sbu-in-sm" ' + attr + '>' + o + '</select></label>';
  }
  var LINE_STYLE_OPTS = [{ v: 'solid', l: 'сплошная' }, { v: 'dashed', l: 'штрих' }, { v: 'dotted', l: 'точки' }];
  var POINT_STYLE_OPTS = [{ v: 'filled', l: 'заполн.' }, { v: 'hollow', l: 'контур' }, { v: 'ring', l: 'кольцо' }, { v: 'cross', l: 'крест' }];
  var MARKER_OPTS = [{ v: 'none', l: 'нет' }, { v: 'dot', l: 'точка' }, { v: 'ring', l: 'кольцо' }];

  /* Ошибка компиляции выражения (строка) или '' если число/пусто/валидно. */
  function exprError(v) {
    if (v === '' || v == null) return '';
    if (typeof v === 'number') return '';
    var n = Number(v);
    if (!isNaN(n) && String(v).trim() !== '') return ''; // чистое число
    if (!global.SimExpr) return '';
    var c = global.SimExpr.compile(String(v));
    return c.error || '';
  }

  function numOr(v, d) { var n = parseFloat(v); return isFinite(n) ? n : d; }
  function numOr2(v) { var n = parseFloat(v); return isFinite(n) ? n : 0; }
  function clamp01(v) { return v < 0 ? 0 : (v > 1 ? 1 : v); }
  function round2(v) { return Math.round(v * 100) / 100; }
  function trimStr(s) { return String(s == null ? '' : s).trim(); }

  function insertAtCursor(input, text) {
    if (!input) return;
    var start = input.selectionStart, end = input.selectionEnd;
    if (start == null) { input.value += text; return; }
    var v = input.value;
    input.value = v.slice(0, start) + text + v.slice(end);
    var pos = start + text.length - (text.slice(-1) === ')' ? 1 : 0);
    try { input.focus(); input.setSelectionRange(pos, pos); } catch (e) {}
  }

  /* дефолтный объект каждого типа (с _uid). */
  function defaultObject(type) {
    var base = { _uid: uid('o'), type: type, id: '' };
    switch (type) {
      case 'point':    return Object.assign(base, { x: 0, y: 0, r: 6, color: '#06D6E0', trail: false });
      case 'circle':   return Object.assign(base, { x: 0, y: 0, r: 1, color: '#9B5DE5', fill: '', width: 2 });
      case 'rect':     return Object.assign(base, { x: 0, y: 0, w: 2, h: 1, color: '#9B5DE5', fill: '', width: 2 });
      case 'segment':  return Object.assign(base, { x1: 0, y1: 0, x2: 5, y2: 5, color: '#ffffff', width: 2 });
      case 'vector':   return Object.assign(base, { x1: 0, y1: 0, x2: 3, y2: 2, color: '#F15BB5', width: 2 });
      case 'polyline': return Object.assign(base, { points: '[[0,0],[2,2],[4,0]]', color: '#06D6E0', width: 2, closed: false });
      case 'path':     return Object.assign(base, { points: '[[0,0],[2,2],[4,0]]', color: '#06D6E0', width: 2, closed: false });
      case 'label':    return Object.assign(base, { x: 0, y: 0, text: 'A', latex: true, color: '#ffffff', size: 14 });
      case 'readout':  return Object.assign(base, { label: 'R', expr: '0', unit: '', precision: 2, x: '', y: '', color: '#06D6E0' });
      default:         return Object.assign(base, { x: 0, y: 0 });
    }
  }

  /* поля-выражения объекта (для валидации). polyline.points — массив, не выражение. */
  function exprFieldsOf(o) {
    switch (o.type) {
      case 'point':   return ['x', 'y', 'r'];
      case 'circle':  return ['x', 'y', 'r', 'width'];
      case 'rect':    return ['x', 'y', 'w', 'h', 'width'];
      case 'segment': return ['x1', 'y1', 'x2', 'y2', 'width'];
      case 'vector':  return ['x1', 'y1', 'x2', 'y2', 'width'];
      case 'label':   return ['x', 'y', 'size'];
      case 'readout': return ['expr', 'x', 'y'];
      case 'plot':    return ['expr'];
      default:        return [];
    }
  }

  /* поля редактора по типу: kind = expr | text | color | check */
  var OBJ_FIELDS = {
    point:   [{ key: 'x', label: 'x', kind: 'expr' }, { key: 'y', label: 'y', kind: 'expr' }, { key: 'r', label: 'радиус (px)', kind: 'expr' }, { key: 'color', label: 'цвет', kind: 'color' }, { key: 'trail', label: 'След', kind: 'check' }, { key: 'trailColor', label: 'цвет следа', kind: 'color' }],
    circle:  [{ key: 'x', label: 'x', kind: 'expr' }, { key: 'y', label: 'y', kind: 'expr' }, { key: 'r', label: 'радиус', kind: 'expr' }, { key: 'color', label: 'цвет', kind: 'color' }, { key: 'fill', label: 'заливка', kind: 'color' }, { key: 'width', label: 'толщина', kind: 'expr' }],
    rect:    [{ key: 'x', label: 'x (центр)', kind: 'expr' }, { key: 'y', label: 'y (центр)', kind: 'expr' }, { key: 'w', label: 'ширина', kind: 'expr' }, { key: 'h', label: 'высота', kind: 'expr' }, { key: 'color', label: 'цвет', kind: 'color' }, { key: 'fill', label: 'заливка', kind: 'color' }, { key: 'width', label: 'толщина', kind: 'expr' }],
    segment: [{ key: 'x1', label: 'x1', kind: 'expr' }, { key: 'y1', label: 'y1', kind: 'expr' }, { key: 'x2', label: 'x2', kind: 'expr' }, { key: 'y2', label: 'y2', kind: 'expr' }, { key: 'color', label: 'цвет', kind: 'color' }, { key: 'width', label: 'толщина', kind: 'expr' }],
    vector:  [{ key: 'x1', label: 'x1', kind: 'expr' }, { key: 'y1', label: 'y1', kind: 'expr' }, { key: 'x2', label: 'x2', kind: 'expr' }, { key: 'y2', label: 'y2', kind: 'expr' }, { key: 'color', label: 'цвет', kind: 'color' }, { key: 'width', label: 'толщина', kind: 'expr' }],
    polyline:[{ key: 'points', label: 'точки [[x,y],…]', kind: 'text', ph: '[[0,0],[2,2]]' }, { key: 'color', label: 'цвет', kind: 'color' }, { key: 'width', label: 'толщина', kind: 'expr' }, { key: 'closed', label: 'Замкнуть', kind: 'check' }],
    path:    [{ key: 'points', label: 'точки [[x,y],…]', kind: 'text', ph: '[[0,0],[2,2]]' }, { key: 'color', label: 'цвет', kind: 'color' }, { key: 'width', label: 'толщина', kind: 'expr' }, { key: 'closed', label: 'Замкнуть', kind: 'check' }],
    label:   [{ key: 'text', label: 'текст (LaTeX)', kind: 'text', ph: '\\\\vec{v}' }, { key: 'x', label: 'x', kind: 'expr' }, { key: 'y', label: 'y', kind: 'expr' }, { key: 'size', label: 'размер', kind: 'expr' }, { key: 'color', label: 'цвет', kind: 'color' }, { key: 'latex', label: 'LaTeX', kind: 'check' }],
    readout: [{ key: 'label', label: 'подпись', kind: 'text', ph: 'R' }, { key: 'expr', label: 'выражение', kind: 'expr' }, { key: 'unit', label: 'ед.', kind: 'text' }, { key: 'precision', label: 'знаков', kind: 'expr' }, { key: 'x', label: 'x (опц.)', kind: 'expr' }, { key: 'y', label: 'y (опц.)', kind: 'expr' }, { key: 'color', label: 'цвет', kind: 'color' }]
  };

  /* Какие style-контролы (P4) показывать у типа.
     opacity/glow — почти у всех рисуемых; line (lineStyle) — у линий/контуров;
     point (pointStyle) — только point; grad (gradient-заливка) — у circle/rect (есть заливка). */
  var STYLE_FOR = {
    point:    { opacity: true, glow: true, point: true },
    segment:  { opacity: true, glow: true, line: true },
    vector:   { opacity: true, glow: true, line: true },
    circle:   { opacity: true, glow: true, line: true, grad: true },
    rect:     { opacity: true, glow: true, line: true, grad: true },
    polyline: { opacity: true, glow: true, line: true },
    path:     { opacity: true, glow: true, line: true }
  };

  var TYPE_LABEL = {
    point: 'Точка', segment: 'Отрезок', vector: 'Вектор', circle: 'Окружность',
    rect: 'Прямоугольник', polyline: 'Ломаная', path: 'Путь', label: 'Подпись',
    plot: 'График', readout: 'Показатель'
  };
  var CAT_LABEL = { math: 'Математика', phys: 'Физика', chem: 'Химия', bio: 'Биология', game: 'Игра' };
  var WALL_LABEL = { bottom: 'Низ', top: 'Верх', left: 'Лево', right: 'Право' };

  /* inline SVG-иконки (.ic-стиля; без эмодзи) */
  var ICON = {
    play: '<svg viewBox="0 0 24 24" width="14" height="14" fill="currentColor"><polygon points="5 3 19 12 5 21 5 3"/></svg>',
    reset: '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M3 12a9 9 0 1 0 9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"/><path d="M3 3v5h5"/></svg>',
    save: '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.1"><path d="M19 21H5a2 2 0 0 1-2-2V5a2 2 0 0 1 2-2h11l5 5v11a2 2 0 0 1-2 2z"/><polyline points="17 21 17 13 7 13 7 21"/><polyline points="7 3 7 8 15 8"/></svg>',
    send: '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.1"><line x1="22" y1="2" x2="11" y2="13"/><polygon points="22 2 15 22 11 13 2 9 22 2"/></svg>',
    plus: '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.4"><line x1="12" y1="5" x2="12" y2="19"/><line x1="5" y1="12" x2="19" y2="12"/></svg>',
    trash: '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.1"><polyline points="3 6 5 6 21 6"/><path d="M19 6l-1 14a2 2 0 0 1-2 2H8a2 2 0 0 1-2-2L5 6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"/></svg>',
    chev: '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.4"><polyline points="6 9 12 15 18 9"/></svg>',
    target: '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.1"><circle cx="12" cy="12" r="9"/><circle cx="12" cy="12" r="3.5"/><line x1="12" y1="1" x2="12" y2="5"/><line x1="12" y1="19" x2="12" y2="23"/><line x1="1" y1="12" x2="5" y2="12"/><line x1="19" y1="12" x2="23" y2="12"/></svg>',
    cog: '<svg viewBox="0 0 24 24" width="13" height="13" style="vertical-align:-2px" fill="none" stroke="currentColor" stroke-width="2"><circle cx="12" cy="12" r="3"/><path d="M19.4 15a1.65 1.65 0 0 0 .33 1.82l.06.06a2 2 0 1 1-2.83 2.83l-.06-.06a1.65 1.65 0 0 0-1.82-.33 1.65 1.65 0 0 0-1 1.51V21a2 2 0 0 1-4 0v-.09A1.65 1.65 0 0 0 9 19.4a1.65 1.65 0 0 0-1.82.33l-.06.06a2 2 0 1 1-2.83-2.83l.06-.06a1.65 1.65 0 0 0 .33-1.82 1.65 1.65 0 0 0-1.51-1H3a2 2 0 0 1 0-4h.09A1.65 1.65 0 0 0 4.6 9a1.65 1.65 0 0 0-.33-1.82l-.06-.06a2 2 0 1 1 2.83-2.83l.06.06a1.65 1.65 0 0 0 1.82.33H9a1.65 1.65 0 0 0 1-1.51V3a2 2 0 0 1 4 0v.09a1.65 1.65 0 0 0 1 1.51 1.65 1.65 0 0 0 1.82-.33l.06-.06a2 2 0 1 1 2.83 2.83l-.06.06a1.65 1.65 0 0 0-.33 1.82V9a1.65 1.65 0 0 0 1.51 1H21a2 2 0 0 1 0 4h-.09a1.65 1.65 0 0 0-1.51 1z"/></svg>',
    template: '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.1"><rect x="3" y="3" width="7" height="7" rx="1"/><rect x="14" y="3" width="7" height="7" rx="1"/><rect x="14" y="14" width="7" height="7" rx="1"/><rect x="3" y="14" width="7" height="7" rx="1"/></svg>',
    unpublish: '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.1"><path d="M3 3l18 18"/><path d="M10.5 5.1A15.3 15.3 0 0 1 12 5a15.3 15.3 0 0 1 4 7M6.3 6.3A15.3 15.3 0 0 0 12 19a15.3 15.3 0 0 0 3-4"/><path d="M3 12h7m5 0h6"/></svg>',
    up: '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.4"><polyline points="18 15 12 9 6 15"/></svg>',
    down: '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.4"><polyline points="6 9 12 15 18 9"/></svg>',
    copy: '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.1"><rect x="9" y="9" width="13" height="13" rx="2"/><path d="M5 15H4a2 2 0 0 1-2-2V4a2 2 0 0 1 2-2h9a2 2 0 0 1 2 2v1"/></svg>',
    eye: '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.1"><path d="M1 12s4-7 11-7 11 7 11 7-4 7-11 7-11-7-11-7z"/><circle cx="12" cy="12" r="3"/></svg>',
    eyeOff: '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.1"><path d="M17.94 17.94A10.07 10.07 0 0 1 12 20c-7 0-11-8-11-8a18.45 18.45 0 0 1 5.06-5.94M9.9 4.24A9.12 9.12 0 0 1 12 4c7 0 11 8 11 8a18.5 18.5 0 0 1-2.16 3.19m-6.72-1.07a3 3 0 1 1-4.24-4.24"/><line x1="1" y1="1" x2="23" y2="23"/></svg>',
    clearX: '<svg viewBox="0 0 24 24" width="12" height="12" fill="none" stroke="currentColor" stroke-width="2.4"><line x1="18" y1="6" x2="6" y2="18"/><line x1="6" y1="6" x2="18" y2="18"/></svg>',
    undo: '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M3 7v6h6"/><path d="M3 13a9 9 0 1 0 3-7.7L3 8"/></svg>',
    redo: '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.2"><path d="M21 7v6h-6"/><path d="M21 13a9 9 0 1 1-3-7.7L21 8"/></svg>',
    grid: '<svg viewBox="0 0 24 24" width="14" height="14" fill="none" stroke="currentColor" stroke-width="2.1"><rect x="3" y="3" width="18" height="18" rx="1.5"/><line x1="9" y1="3" x2="9" y2="21"/><line x1="15" y1="3" x2="15" y2="21"/><line x1="3" y1="9" x2="21" y2="9"/><line x1="3" y1="15" x2="21" y2="15"/></svg>'
  };

  /* ── Встроенные шаблоны стартовых спек (Фаза 6) ──────────────────────────
     Данные, не код. Каждый — полноценная валидная спека v1: «Создать из шаблона»
     загружает её через loadFromSim как новую симуляцию. */
  var TEMPLATES = [
    {
      name: 'Пустая сцена', cat: 'phys',
      desc: 'Чистый холст с осями и сеткой — начать с нуля.',
      spec: {
        specVersion: 1, meta: { title: 'Новая симуляция', desc: '' },
        viewport: { xmin: -1, xmax: 10, ymin: -1, ymax: 10, grid: true, axes: true },
        time: { autoplay: false, loop: true, speed: 1 }, params: [], objects: []
      }
    },
    {
      name: 'Математический маятник', cat: 'phys',
      desc: 'Груз на нити: угол колеблется по гармоническому закону.',
      spec: {
        specVersion: 1, meta: { title: 'Маятник', desc: 'Колебания груза на нити' },
        viewport: { xmin: -3, xmax: 3, ymin: -3.4, ymax: 0.6, grid: true, axes: true },
        time: { autoplay: true, loop: true, speed: 1 },
        params: [
          { name: 'L', label: 'Длина нити', min: 0.5, max: 3, step: 0.1, value: 2.4, unit: 'м' },
          { name: 'A', label: 'Амплитуда', min: 0.1, max: 1, step: 0.05, value: 0.5, unit: 'рад' }
        ],
        objects: [
          { type: 'segment', x1: 0, y1: 0, x2: 'L*sin(A*cos(2.2*t))', y2: '-L*cos(A*cos(2.2*t))', color: '#94a3b8', width: 2 },
          { id: 'bob', type: 'circle', x: 'L*sin(A*cos(2.2*t))', y: '-L*cos(A*cos(2.2*t))', r: 0.18, color: '#9B5DE5' }
        ]
      }
    },
    {
      name: 'График y = f(x)', cat: 'math',
      desc: 'Параметрический график функции с настраиваемыми коэффициентами.',
      spec: {
        specVersion: 1, meta: { title: 'График функции', desc: 'y = a*sin(b*x)' },
        viewport: { xmin: -6.5, xmax: 6.5, ymin: -3.5, ymax: 3.5, grid: true, axes: true },
        time: { autoplay: false, loop: true, speed: 1 },
        params: [
          { name: 'a', label: 'Амплитуда a', min: -3, max: 3, step: 0.1, value: 2 },
          { name: 'b', label: 'Частота b', min: 0.2, max: 4, step: 0.1, value: 1 }
        ],
        objects: [
          { type: 'plot', expr: 'a*sin(b*x)', var: 'x', range: [-6.5, 6.5], samples: 200, color: '#06D6E0', width: 2 }
        ]
      }
    },
    {
      name: 'Бросок тела', cat: 'phys',
      desc: 'Траектория тела под углом к горизонту (кинематика).',
      spec: {
        specVersion: 1, meta: { title: 'Бросок тела', desc: 'Движение в поле тяжести' },
        viewport: { xmin: -1, xmax: 22, ymin: -1, ymax: 12, grid: true, axes: true },
        time: { autoplay: true, loop: true, speed: 1 },
        params: [
          { name: 'v', label: 'Скорость', min: 5, max: 25, step: 0.5, value: 16, unit: 'м/с' },
          { name: 'ang', label: 'Угол', min: 10, max: 80, step: 1, value: 45, unit: 'град' }
        ],
        objects: [
          { id: 'b', type: 'circle', x: 'v*cos(ang*pi/180)*t', y: 'v*sin(ang*pi/180)*t - 4.9*t*t', r: 0.25, color: '#9B5DE5' },
          { type: 'plot', expr: '(x*tan(ang*pi/180)) - (4.9*x*x)/((v*cos(ang*pi/180))^2)', var: 'x', range: [0, 22], samples: 150, color: 'rgba(6,214,224,0.5)', width: 1.5 }
        ]
      }
    }
  ];

  /* plot-объект сериализуется особым путём (range_a/range_b -> range, без UI-полей);
     все прочие типы — через _stripObjOrig (удаление _uid и пустых полей). */
  var _stripObjOrig = stripObj;
  stripObj = function (o) {
    if (o && o.type === 'plot') return normalizePlotForSpec(o);
    return _stripObjOrig(o);
  };

  global.SimBuilder = SimBuilder;

})(typeof window !== 'undefined' ? window : globalThis);