From a13c0b77fa91512792cc5e525891e9c2d4ecf694 Mon Sep 17 00:00:00 2001
From: Maxim Dolgolyov <maxim.dolgolyov@gmail.com>
Date: Sat, 13 Jun 2026 12:29:13 +0300
Subject: [PATCH] =?UTF-8?q?feat(sim-builder):=20=D1=84=D0=B0=D0=B7=D0=B0?=
 =?UTF-8?q?=204=20=E2=80=94=20=D1=80=D0=B5=D0=B4=D0=B0=D0=BA=D1=82=D0=BE?=
 =?UTF-8?q?=D1=80=20=D1=81=D0=B8=D0=BC=D1=83=D0=BB=D1=8F=D1=86=D0=B8=D0=B9?=
 =?UTF-8?q?=20(sim-builder.html:=20=D0=BF=D0=B0=D0=BD=D0=B5=D0=BB=D0=B8,?=
 =?UTF-8?q?=20=D0=B6=D0=B8=D0=B2=D0=BE=D0=B5=20=D0=BF=D1=80=D0=B5=D0=B2?=
 =?UTF-8?q?=D1=8C=D1=8E,=20save/publish)?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 CLAUDE.md                               |   12 +
 frontend/js/sim-builder.js              | 1116 +++++++++++++++++++++++
 frontend/sim-builder.html               |  190 ++++
 js/sidebar.js                           |    1 +
 plans/sim-builder/CONTEXT.md            |   32 +-
 plans/sim-builder/PLAN.md               |    4 +-
 plans/sim-builder/phase-4-builder-ui.md |   84 +-
 7 files changed, 1419 insertions(+), 20 deletions(-)
 create mode 100644 frontend/js/sim-builder.js
 create mode 100644 frontend/sim-builder.html

diff --git a/CLAUDE.md b/CLAUDE.md
index 607f547..0a03c13 100644
--- a/CLAUDE.md
+++ b/CLAUDE.md
@@ -93,3 +93,15 @@ git push origin master
 - **lint:routes (baseline 0)**: `:id`-роуты прикрыты router-level `authMiddleware` (линтер видит `router.use(<guard>)`); read `GET/PUT/DELETE /:id` дополнительно помечены `// @public-by-design:` с указанием на ownership-проверку в хендлере (как в materials.js).
 - **Тесты**: setup.js строит СВОЙ Express-app и НЕ монтирует новые роуты — тест-файл должен сам `app.use('/api/custom-sims', require(...))` (как lab-links.test.js). `getToken(role)`/`inject(method,path,body,token)` — готовые хелперы. seedRow(PRAGMA table_info) — для прямого посева строк, устойчив к дрейфу схемы (здесь не понадобился: пользователи создаются через getToken, спеки — через API).
 - **Окружение тестов**: 8 fail из 209 = 3 baseline (`auth.test.js` — bcrypt/JWT в тест-окружении) + 5 page-тестов (`chemistry7/8-*`, `math5/6-page`), падающих на `Cannot find module 'jsdom'` (devDep не установлен) — оба класса не связаны с бэкенд-фазой.
+
+### Phase 4 — Learnings
+
+- **Билдер = `frontend/sim-builder.html` + `frontend/js/sim-builder.js`** (логика модульна: html держит только разметку/стили/bootstrap). `window.SimBuilder.create({host,previewHost,panelHost,toolbarHost}) -> Builder`. Состояние `Builder.st`; `_uid` на объектах/стенах/пружинах — UI-метка, вырезается в `buildSpec()`. Доступ teacher/admin: `LS.initPage()` → `{isTeacher,isAdmin}` → редирект `/dashboard` (паттерн live-quiz.html).
+- **Подключение движка тем же путём, что lab.html**: `<script src="/js/labs/_sim_expr.js">` + `_sim_engine.js`. Гочи маршрутизации: `/js` мапится на **корневой** `js/` (api.js/sidebar.js/mobile.js/notifications.js), а в нём НЕТ `labs/` → запрос `/js/labs/*` и `/js/sim-builder.js` проваливается на `express.static(frontendDir)` и отдаёт `frontend/js/...`. Это уже работающий механизм (lab.html), не трогать server.js.
+- **Генерация спеки**: `buildSpec()` → JSON v1. `stripObj()` убирает `_uid`/пустые поля. **plot** хранит в UI `range_a/range_b` отдельно и материализуется `normalizePlotForSpec` → `range:[a,b]` (границы — число ИЛИ выражение). `stripObj` переопределён в конце IIFE на plot-aware версию — работает т.к. `buildSpec` вызывает её в рантайме (function-declaration binding мутабелен). Числовые поля хранятся «как введено» (число/строка) — `SimExpr.compileValue` ест оба, серверная `validateSpec` не парсит.
+- **Выражения = только SimExpr** (без eval/Function): `SimExpr.compile(v).error` → inline-ошибка у поля; `FUNCTIONS`/`CONSTANTS` — **обычные объекты** (ключи=имена, не Set) → палитра через `Object.keys`. `exprError()` пропускает чистые числа и пустые строки.
+- **Запрет имени param**: не только `e` (число Эйлера), но и `pi/E/PI/tau/t/w/h` (служебные env-переменные движка) — иначе слайдер затрёт системное имя.
+- **Drag-on-preview**: переиспользует геометрию движка — `inst.canvas` + `inst._toWorld(px,py)` (px относит. canvas getBoundingClientRect). Пишет x/y (point/circle/label/readout/rect) или x2/y2 (segment/vector). Только на паузе (`!inst.isRunning()`), чтобы не конфликтовать со встроенным drag/анимацией движка.
+- **Клиентская валидация зеркалит серверную** (Ф3 лимиты) и показывает дружелюбную модалку-список ДО запроса — экономит round-trip и даёт понятные ошибки вместо сырого 400.
+- **Сайдбар — аддитивно**: пункт `/sim-builder` в `js/sidebar.js` в группе `G('practice',...)` после `/lab`, паттерн `{ cls:'sb-teacher-only', hidden:!isTch }`. `isActive('/sim-builder')` подсвечивает на странице (clean URL без .html). НЕ ломает остальной сайдбар.
+- **Верификация без jsdom**: headless-смоук — `vm.createContext` + ручной DOM/window/Blob-стаб (canvas getContext-заглушка, setTimeout no-op чтобы debounce не стрелял), грузим `_sim_expr.js`+`sim-builder.js`, дёргаем `buildSpec()`/`validate()`/`loadFromSim()` напрямую (рендер не нужен для логики). 23/23.
diff --git a/frontend/js/sim-builder.js b/frontend/js/sim-builder.js
new file mode 100644
index 0000000..5d9c102
--- /dev/null
+++ b/frontend/js/sim-builder.js
@@ -0,0 +1,1116 @@
+'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;
+  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;
+  }
+
+  /* ════════════════════════ ПУБЛИЧНЫЙ 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) {
+      var clone = Object.assign({ _uid: uid('o') }, o);
+      if (o.type === 'plot') {
+        // Восстановить UI-поля диапазона из spec range[a,b], иначе при пересохранении
+        // normalizePlotForSpec не увидит range_a/range_b и диапазон молча потеряется.
+        if (Array.isArray(o.range)) { clone.range_a = o.range[0]; clone.range_b = o.range[1]; }
+        delete clone.range;
+        st.plots.push(clone);
+      } else st.objects.push(clone);
+    });
+    // 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.renderToolbar();
+    this.renderPanels();
+    this.scheduleRemount(true);
+  };
+
+  /* Сборка чистой JSON-спеки v1 из состояния (для движка / сохранения). */
+  Builder.prototype.buildSpec = function () {
+    var st = this.st;
+    var objects = [];
+    // обычные объекты
+    st.objects.forEach(function (o) { objects.push(stripObj(o)); });
+    // plot-объекты
+    st.plots.forEach(function (o) { 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 и пустых полей) из объекта спеки ── */
+  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;
+      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: клик по сцене ставит x/y выбранного объекта в мир-коорд.
+     Перетаскивание двигает его. Работает только когда выбран объект и движок
+     не запущен (иначе мешает встроенному drag/анимации движка). */
+  Builder.prototype.bindPreviewDrag = function () {
+    var self = this;
+    if (!this.inst || !this.inst.canvas) return;
+    var canvas = this.inst.canvas;
+    var dragging = false;
+
+    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;
+      // конвертация px->мир через геометрию движка (_toWorld учитывает scale/offset)
+      if (typeof self.inst._toWorld === 'function') return self.inst._toWorld(px, py);
+      return null;
+    }
+    function applyTo(obj, w) {
+      if (!obj || !w) return;
+      var x = round2(w[0]), y = round2(w[1]);
+      // point/circle/label/readout -> x,y ; rect -> x,y (центр)
+      if ('x' in obj || ['point', 'circle', 'label', 'readout', 'rect'].indexOf(obj.type) !== -1) {
+        obj.x = x; obj.y = y;
+      } else if (obj.type === 'segment' || obj.type === 'vector') {
+        obj.x2 = x; obj.y2 = y; // двигаем конец
+      }
+      self.refreshObjFields(obj._uid);
+      self.scheduleRemount(false);
+    }
+
+    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;
+      dragging = true;
+      try { canvas.setPointerCapture(ev.pointerId); } catch (e) {}
+      applyTo(obj, worldAt(ev));
+      ev.preventDefault();
+    });
+    canvas.addEventListener('pointermove', function (ev) {
+      if (!dragging) return;
+      applyTo(objSel(), worldAt(ev));
+    });
+    function end() { dragging = false; }
+    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>';
+    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" 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>' +
+        '<button class="btn-primary sbu-tb-btn" data-a="publish">' + ICON.send + ' Опубликовать</button>' +
+      '</div>';
+    t.querySelectorAll('[data-a]').forEach(function (b) {
+      b.addEventListener('click', function () { self.onToolbar(b.getAttribute('data-a')); });
+    });
+  };
+
+  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; }
+  };
+
+  /* ════════════════════════ ВАЛИДАЦИЯ (клиент, до запроса) ════════════════════════ */
+
+  /* Возвращает массив строк-ошибок (пусто = всё валидно). */
+  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;
+    st.objects.concat(st.plots).forEach(function (o, i) {
+      exprFieldsOf(o).forEach(function (f) {
+        var v = o[f];
+        if (typeof v !== 'string' || v === '') return;
+        if (v.length > LIMITS.exprLen) errs.push('Объект #' + (i + 1) + ': выражение «' + f + '» длиннее ' + LIMITS.exprLen + ' симв.');
+        var c = global.SimExpr ? global.SimExpr.compile(v) : { error: null };
+        if (c.error) errs.push('Объект #' + (i + 1) + ' (' + o.type + '), поле «' + f + '»: ' + c.error);
+      });
+    });
+
+    // 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 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') {
+        return miniField(f.label, '<input class="sbu-in sbu-in-color" type="text" data-of="' + f.key + '" value="' + esc(o[f.key] == null ? '' : o[f.key]) + '" placeholder="#06D6E0" />');
+      }
+      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('');
+    // ── 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' : '') + '" 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-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>' +
+    '</div>';
+  };
+
+  /* ── Графики + Физика ── */
+  Builder.prototype.sectionPlotsPhysics = function () {
+    var self = this;
+    // plots
+    var plotRows = this.st.plots.map(function (o, i) {
+      var exprErr = exprError(o.expr);
+      var rangeErr = (o.range_a !== '' && o.range_a != null) ? exprError(o.range_a) : (exprError(o.range_b) || '');
+      return '<div class="sbu-plot" data-plti="' + i + '">' +
+        '<div class="sbu-obj-hdr">' +
+          '<span class="sbu-obj-type">График</span>' +
+          '<button class="sbu-icon-btn sbu-del" data-pltdel="' + i + '" title="Удалить">' + ICON.trash + '</button>' +
+        '</div>' +
+        '<div class="sbu-of' + (exprErr ? ' has-err' : '') + '">' +
+          '<label class="sbu-of-lbl">f(' + esc(o.var || 'x') + ')<button class="sbu-fx" data-pltfx="expr:' + i + '">fx</button></label>' +
+          '<input class="sbu-in sbu-in-expr" data-plf="expr" value="' + esc(o.expr == null ? '' : o.expr) + '" placeholder="sin(x)" />' +
+          (exprErr ? '<span class="sbu-of-err">' + esc(exprErr) + '</span>' : '') +
+        '</div>' +
+        '<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 sbu-in-color" data-plf="color" value="' + esc(o.color == null ? '' : o.color) + '" placeholder="#F15BB5" />') +
+        '</div>' +
+        '<label class="sbu-of-check"><input type="checkbox" data-plf="trace"' + (o.trace ? ' checked' : '') + '/> След по времени (trace)</label>' +
+        (rangeErr ? '<span class="sbu-of-err">диапазон: ' + esc(rangeErr) + '</span>' : '') +
+      '</div>';
+    }).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;
+
+    // аккордеоны
+    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 () {
+        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 () {
+        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 () {
+        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 () {
+          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.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 () {
+          var k = el.getAttribute('data-of');
+          if (el.type === 'checkbox') self.st.objects[i][k] = el.checked;
+          else self.st.objects[i][k] = el.value;
+          // обновить inline-ошибку выражения и LaTeX-превью без полного рендера
+          self.updateFieldFeedback(el, self.st.objects[i]);
+          self.scheduleRemount(false);
+        });
+      });
+    });
+    p.querySelectorAll('[data-odel]').forEach(function (b) {
+      b.addEventListener('click', function () {
+        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);
+      });
+    });
+    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);
+      row.querySelectorAll('[data-plf]').forEach(function (el) {
+        var evt = el.type === 'checkbox' ? 'change' : 'input';
+        el.addEventListener(evt, function () {
+          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);
+        });
+      });
+    });
+    p.querySelectorAll('[data-pltdel]').forEach(function (b) {
+      b.addEventListener('click', function () {
+        self.st.plots.splice(parseInt(b.getAttribute('data-pltdel'), 10), 1);
+        self.renderPanels(); self.scheduleRemount(false);
+      });
+    });
+    p.querySelectorAll('[data-pltfx]').forEach(function (b) {
+      b.addEventListener('click', function () {
+        var input = b.closest('.sbu-of').querySelector('[data-plf]');
+        self.openPalette(input);
+      });
+    });
+
+    // physics
+    var phEnabled = p.querySelector('[data-phys="enabled"]');
+    if (phEnabled) phEnabled.addEventListener('change', function () {
+      self.st.physics.enabled = phEnabled.checked;
+      self.renderPanels(); self.scheduleRemount(false);
+    });
+    p.querySelectorAll('[data-phf]').forEach(function (el) {
+      el.addEventListener('input', function () {
+        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 () {
+          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.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 () {
+          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.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();
+  };
+
+  /* Привести 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.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.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.st.plots.push({ _uid: uid('plt'), type: 'plot', expr: 'sin(x)', var: 'x', range_a: '', range_b: '', color: '#F15BB5', trace: false });
+    } else if (what === 'wall') {
+      if (this.st.physics.walls.length >= LIMITS.walls) { global.LS.toast('Достигнут лимит стен', 'warn'); return; }
+      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.st.physics.springs.push({ _uid: uid('s'), a: '', b: '', k: 40, length: 2, damping: 0.5 });
+    }
+    this.renderPanels();
+    this.scheduleRemount(false);
+  };
+
+  /* Перед сборкой spec plot-объект нужно «материализовать»: range + убрать UI-поля. */
+  function normalizePlotForSpec(o) {
+    var out = { type: 'plot', expr: o.expr == null ? '' : o.expr, var: o.var || 'x' };
+    if (o.color) out.color = o.color;
+    if (o.trace) out.trace = true;
+    var a = o.range_a, b = o.range_b;
+    if (!((a === '' || a == null) && (b === '' || b == null))) {
+      out.range = [parseRangeVal(a), parseRangeVal(b)];
+    }
+    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;
+    ['x', 'y', 'x2', 'y2'].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>';
+  }
+
+  /* Ошибка компиляции выражения (строка) или '' если число/пусто/валидно. */
+  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' }]
+  };
+
+  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>'
+  };
+
+  /* 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);
diff --git a/frontend/sim-builder.html b/frontend/sim-builder.html
new file mode 100644
index 0000000..12272c6
--- /dev/null
+++ b/frontend/sim-builder.html
@@ -0,0 +1,190 @@
+<!DOCTYPE html>
+<html lang="ru">
+<head>
+  <meta charset="UTF-8"/>
+  <meta name="viewport" content="width=device-width, initial-scale=1.0"/>
+  <title>Конструктор симуляций — LearnSpace</title>
+  <link rel="icon" href="/favicon.svg" type="image/svg+xml"/>
+  <link href="https://fonts.googleapis.com/css2?family=Unbounded:wght@400;700;800&family=Manrope:wght@400;500;600;700&display=swap" rel="stylesheet"/>
+  <link rel="stylesheet" href="/css/ls.css"/>
+  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.css" />
+  <script src="https://unpkg.com/lucide@0.469.0/dist/umd/lucide.min.js"></script>
+  <style>
+    /* ── Раскладка редактора: панели слева + превью справа ── */
+    .sbu-wrap { display: flex; flex-direction: column; height: 100vh; min-height: 0; }
+    .sbu-toolbar {
+      display: flex; align-items: center; justify-content: space-between; gap: 12px;
+      padding: 12px 20px; border-bottom: 1px solid var(--border); background: var(--surface);
+      flex-shrink: 0; backdrop-filter: blur(8px);
+    }
+    .sbu-tb-left { display: flex; align-items: center; gap: 12px; min-width: 0; }
+    .sbu-tb-title { font-family: 'Unbounded', sans-serif; font-weight: 800; font-size: 1.05rem; color: var(--text); white-space: nowrap; }
+    .sbu-tb-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
+    .sbu-tb-btn { display: inline-flex; align-items: center; gap: 6px; font-size: .82rem; padding: 8px 14px; }
+    .sbu-tb-btn svg { flex-shrink: 0; }
+    .sbu-badge { font-size: .66rem; font-weight: 800; text-transform: uppercase; letter-spacing: .04em; padding: 3px 9px; border-radius: 99px; background: rgba(15,23,42,0.08); color: var(--text-3); }
+    .sbu-badge-pub { background: rgba(16,185,129,0.14); color: #0f9d6e; }
+
+    .sbu-body { display: flex; flex: 1; min-height: 0; }
+    /* панели */
+    .sbu-panels { width: 360px; flex-shrink: 0; overflow-y: auto; padding: 14px; border-right: 1px solid var(--border); background: #fafbfd; display: flex; flex-direction: column; gap: 10px; }
+    /* превью */
+    .sbu-preview-col { flex: 1; min-width: 0; display: flex; flex-direction: column; }
+    .sbu-preview-hint { font-size: .76rem; color: var(--text-3); padding: 7px 16px; border-bottom: 1px dashed var(--border); background: #fff; }
+    .sbu-preview { flex: 1; min-height: 0; position: relative; background: #0D0D1A; }
+    .sbu-preview .sim-spec-root { position: absolute; inset: 0; }
+
+    /* ── секция-аккордеон ── */
+    .sbu-sec { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); overflow: hidden; }
+    .sbu-sec-hdr { width: 100%; display: flex; align-items: center; gap: 8px; padding: 11px 13px; border: none; background: none; cursor: pointer; font-family: 'Manrope', sans-serif; }
+    .sbu-sec-title { font-weight: 800; font-size: .82rem; color: var(--text); flex: 1; text-align: left; }
+    .sbu-sec-count { font-size: .68rem; font-weight: 700; color: var(--violet); background: rgba(155,93,229,0.12); padding: 2px 8px; border-radius: 99px; }
+    .sbu-sec-chev { display: inline-flex; color: var(--text-3); transition: transform .18s; }
+    .sbu-sec.open .sbu-sec-chev { transform: rotate(180deg); }
+    .sbu-sec-body { display: none; flex-direction: column; gap: 10px; padding: 0 13px 13px; }
+    .sbu-sec.open .sbu-sec-body { display: flex; }
+
+    /* ── поля ── */
+    .sbu-field { display: flex; flex-direction: column; gap: 4px; }
+    .sbu-field-lbl { font-size: .72rem; font-weight: 600; color: var(--text-3); }
+    .sbu-in { width: 100%; box-sizing: border-box; padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; font: inherit; font-size: .82rem; background: #fff; color: var(--text); }
+    .sbu-in:focus { outline: none; border-color: var(--violet); box-shadow: 0 0 0 3px rgba(155,93,229,0.12); }
+    .sbu-in-sm { padding: 6px 9px; font-size: .78rem; }
+    .sbu-in-expr { font-family: 'Menlo', 'Consolas', monospace; font-size: .78rem; }
+    .sbu-in-color { font-family: 'Menlo', 'Consolas', monospace; }
+    textarea.sbu-in { resize: vertical; }
+    .sbu-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
+    .sbu-row4 { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 6px; }
+    .sbu-mini { display: flex; flex-direction: column; gap: 2px; }
+    .sbu-mini-lbl { font-size: .66rem; color: var(--text-3); }
+    .sbu-divider { height: 1px; background: var(--border); margin: 4px 0; }
+    .sbu-sub { font-size: .7rem; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: var(--text-3); margin-top: 4px; }
+    .sbu-checks { display: flex; flex-wrap: wrap; gap: 10px; }
+    .sbu-chk, .sbu-of-check { display: inline-flex; align-items: center; gap: 5px; font-size: .76rem; color: var(--text-2); cursor: pointer; }
+    .sbu-chk input, .sbu-of-check input { accent-color: var(--violet); }
+
+    /* ── кнопки ── */
+    .sbu-add { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 12px; border: 1px dashed var(--border-h); border-radius: 9px; background: #fff; cursor: pointer; font: inherit; font-size: .78rem; font-weight: 600; color: var(--text-2); transition: border-color .12s, color .12s; }
+    .sbu-add:hover { border-color: var(--violet); color: var(--violet); }
+    .sbu-add-sm { padding: 6px 10px; font-size: .74rem; }
+    .sbu-add-row { display: flex; gap: 8px; align-items: stretch; }
+    .sbu-add-row .sbu-add { flex: 1; }
+    .sbu-add-row select { flex: 0 0 130px; }
+    .sbu-icon-btn { width: 28px; height: 28px; flex-shrink: 0; border: 1px solid var(--border); border-radius: 8px; background: #fff; cursor: pointer; color: var(--text-3); display: inline-flex; align-items: center; justify-content: center; transition: border-color .12s, color .12s; }
+    .sbu-icon-btn:hover { border-color: var(--violet); color: var(--violet); }
+    .sbu-del:hover { border-color: #ef4444; color: #ef4444; }
+    .sbu-place.active { border-color: var(--violet); color: var(--violet); background: rgba(155,93,229,0.1); }
+
+    /* ── параметр ── */
+    .sbu-param, .sbu-obj, .sbu-plot, .sbu-wall, .sbu-spring { border: 1px solid var(--border); border-radius: 10px; padding: 9px; background: #fff; display: flex; flex-direction: column; gap: 7px; }
+    .sbu-param-top { display: flex; gap: 6px; align-items: center; }
+    .sbu-param-top .sbu-in { flex: 1; }
+
+    /* ── объект ── */
+    .sbu-obj.sel { border-color: var(--violet); box-shadow: 0 0 0 2px rgba(155,93,229,0.16); }
+    .sbu-obj-hdr { display: flex; align-items: center; gap: 6px; }
+    .sbu-obj-type { font-size: .72rem; font-weight: 800; color: var(--violet); flex-shrink: 0; }
+    .sbu-in-id { flex: 1; max-width: 120px; }
+    .sbu-obj-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 7px; }
+    .sbu-of { display: flex; flex-direction: column; gap: 2px; }
+    .sbu-of-lbl { font-size: .66rem; color: var(--text-3); display: flex; align-items: center; justify-content: space-between; gap: 4px; }
+    .sbu-fx { font-size: .62rem; font-weight: 800; font-style: italic; color: var(--violet); background: rgba(155,93,229,0.1); border: none; border-radius: 5px; padding: 1px 6px; cursor: pointer; }
+    .sbu-fx:hover { background: rgba(155,93,229,0.2); }
+    .sbu-of.has-err .sbu-in { border-color: #ef4444; }
+    .sbu-of-err { font-size: .68rem; color: #ef4444; }
+    .sbu-of-check { grid-column: 1 / -1; }
+    .sbu-latex { grid-column: 1 / -1; padding: 8px; background: #f1f5f9; border-radius: 8px; font-size: .9rem; min-height: 20px; text-align: center; color: var(--text); }
+    .sbu-empty-sm { font-size: .76rem; color: var(--text-3); padding: 6px 2px; }
+
+    /* ── физика ── */
+    .sbu-phys-toggle { font-weight: 700; font-size: .82rem; }
+    .sbu-phys-fields { display: flex; flex-direction: column; gap: 8px; }
+    .sbu-wall { display: flex; flex-direction: column; gap: 6px; }
+
+    /* ── палитра ── */
+    .sbu-pal { display: flex; flex-direction: column; gap: 12px; max-height: 60vh; overflow-y: auto; }
+    .sbu-pal-title { font-size: .72rem; font-weight: 700; color: var(--text-3); margin-bottom: 5px; }
+    .sbu-pal-chips { display: flex; flex-wrap: wrap; gap: 6px; }
+    .sbu-pal-chip { padding: 4px 10px; border: 1px solid var(--border); border-radius: 8px; background: #fff; font-family: 'Menlo', 'Consolas', monospace; font-size: .78rem; cursor: pointer; color: var(--text-2); }
+    .sbu-pal-chip:hover { border-color: var(--violet); color: var(--violet); background: rgba(155,93,229,0.06); }
+
+    @media (max-width: 920px) {
+      .sbu-body { flex-direction: column; }
+      .sbu-panels { width: auto; max-height: 50vh; border-right: none; border-bottom: 1px solid var(--border); }
+      .sbu-preview { min-height: 320px; }
+    }
+  </style>
+</head>
+<body>
+<div class="app-layout">
+  <aside class="sidebar" id="app-sidebar"></aside>
+  <main class="sb-content">
+    <div class="sbu-wrap">
+      <div class="sbu-toolbar" id="sbu-toolbar"></div>
+      <div class="sbu-body">
+        <div class="sbu-panels" id="sbu-panels"></div>
+        <div class="sbu-preview-col">
+          <div class="sbu-preview-hint">
+            Живое превью обновляется при правках. Включите «прицел» у объекта и кликните по сцене, чтобы задать его координаты. Кнопка «Тест» запускает анимацию.
+          </div>
+          <div class="sbu-preview" id="sbu-preview"></div>
+        </div>
+      </div>
+    </div>
+  </main>
+</div>
+
+<script src="/js/api.js"></script>
+<script src="/js/sidebar.js"></script>
+<script src="/js/notifications.js"></script>
+<script src="/js/mobile.js"></script>
+<!-- движок спек-симуляций (Фазы 0–2) -->
+<script src="/js/labs/_sim_expr.js"></script>
+<script src="/js/labs/_sim_engine.js"></script>
+<!-- KaTeX для превью LaTeX-подписей -->
+<script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/katex.min.js"></script>
+<script src="https://cdn.jsdelivr.net/npm/katex@0.16.9/dist/contrib/auto-render.min.js"></script>
+<!-- логика редактора -->
+<script src="/js/sim-builder.js"></script>
+<script>
+(function () {
+  // Гейт: только teacher/admin
+  var ip = LS.initPage() || {};
+  if (!(ip.isTeacher || ip.isAdmin)) { location.href = '/dashboard'; return; }
+
+  if (!window.SimEngine || !window.SimExpr || !window.SimBuilder) {
+    document.getElementById('sbu-preview').innerHTML =
+      '<div style="padding:40px;color:#fff">Движок симуляций не загрузился. Обновите страницу.</div>';
+    return;
+  }
+
+  var builder = SimBuilder.create({
+    host: document.querySelector('.sbu-wrap'),
+    previewHost: document.getElementById('sbu-preview'),
+    panelHost: document.getElementById('sbu-panels'),
+    toolbarHost: document.getElementById('sbu-toolbar')
+  });
+
+  // ?id= -> загрузить существующую симуляцию
+  var params = new URLSearchParams(location.search);
+  var id = params.get('id');
+  if (id) {
+    builder.init();
+    LS.customSimGet(id).then(function (res) {
+      if (res && res.sim) {
+        builder.loadFromSim(res.sim);
+      } else {
+        LS.toast('Симуляция не найдена', 'error');
+      }
+    }).catch(function (e) {
+      LS.toast((e && e.message) || 'Не удалось загрузить симуляцию', 'error');
+    });
+  } else {
+    builder.init();
+  }
+
+  window.__simBuilder = builder; // для отладки
+})();
+</script>
+</body>
+</html>
diff --git a/js/sidebar.js b/js/sidebar.js
index 50eacb0..4828464 100644
--- a/js/sidebar.js
+++ b/js/sidebar.js
@@ -87,6 +87,7 @@
 
       ${G('practice', 'Практика и игры', `
         ${L('/lab',           'atom',             'Лаборатория')}
+        ${L('/sim-builder',   'pencil-ruler',     'Конструктор симуляций', { cls: 'sb-teacher-only', hidden: !isTch })}
         ${L('/biochem',       'flask-conical',    'Биохимия')}
         ${L('/red-book',      'leaf',             'Красная книга')}
         ${L('/crossword',     'grid-3x3',         'Кроссворд')}
diff --git a/plans/sim-builder/CONTEXT.md b/plans/sim-builder/CONTEXT.md
index 378cd6b..b6ea7c1 100644
--- a/plans/sim-builder/CONTEXT.md
+++ b/plans/sim-builder/CONTEXT.md
@@ -1,6 +1,31 @@
 # Feature Context: Конструктор симуляций (SimForge)
 
 ## Current State
+- **Фаза 4 РЕАЛИЗОВАНА** (в рабочем дереве, не закоммичено — коммит за оркестратором). Только
+  новые файлы `frontend/sim-builder.html` + `frontend/js/sim-builder.js` + аддитивная правка
+  `js/sidebar.js` (lab.html/lab-glue.js НЕ тронуты — зона параллельной сессии).
+  - **Учительский редактор `/sim-builder`** (гейт teacher/admin через `LS.initPage()`): панели-
+    аккордеоны (Мета+сцена / Параметры / Объекты / Графики / Физика) слева + живое превью
+    (`SimEngine.mount`, перемонтаж с debounce 280мс) справа + тулбар (Тест/Сброс/Сохранить/
+    Опубликовать). `window.SimBuilder.create({host,previewHost,panelHost,toolbarHost})`.
+  - **Генерация спеки** `buildSpec()` → JSON v1 (specVersion:1, meta, viewport, time, params[],
+    objects[]+merged plots, physics?). `_uid` — UI-метка, вырезается; plot материализуется
+    (range_a/range_b → range[a,b]); числовые поля — число ИЛИ строка-выражение (движок ест оба).
+  - **Выражения**: каждое поле проверяется `SimExpr.compile` → inline-ошибка у поля; палитра
+    функций/констант/параметров/`id.x` через модалку. **Запрет имени param `e`** (и pi/t/w/h/...).
+  - **Drag-on-preview**: кнопка-«прицел» у объекта → клик/перетаскивание по `inst.canvas` (px→мир
+    через `inst._toWorld()`) пишет x/y (или конец segment/vector) в свойства. Только на паузе.
+  - **Save/Load**: `customSimCreate`/`customSimUpdate` (?id= → update + replaceState), публикация
+    `status:'published'`; `?id=<id>` → `customSimGet` → `loadFromSim` раскладывает по панелям.
+  - **Клиентская валидация** зеркалит серверную (params≤50/objects≤200/walls≤20/springs≤50/
+    expr≤500/restitution 0..1/JSON≤200КБ) с дружелюбной модалкой-списком ошибок ДО запроса.
+  - **Сайдбар**: пункт `/sim-builder` «Конструктор симуляций» (teacher-only, icon pencil-ruler)
+    в группе «Практика и игры» после «Лаборатория» — минимальная правка `js/sidebar.js`.
+  - Верификация: `node --check` обоих новых .js + извлечённого инлайна html OK; эмодзи нет (скан
+    кодпойнтов, включая no-entry sign — заменён на текст); eval/Function нет (вычисления — SimExpr);
+    headless-смоук (vm + DOM/Blob-стаб) 23/23: buildSpec форма, merge plot+range, strip _uid,
+    physics-блок, валидация valid/reserved-`e`/syntax-error, loadFromSim round-trip стабилен.
+    lab.html/lab-glue.js/_sim_engine.js/_sim_expr.js НЕ тронуты (git status).
 - **Фаза 3 РЕАЛИЗОВАНА** (в рабочем дереве, не закоммичено — коммит за оркестратором). Только backend + клиент `js/api.js` (lab.html/lab-glue.js НЕ тронуты — зона параллельной сессии).
   - **Миграция 071** `backend/src/db/migrations/071_custom_sims.sql` — таблица `custom_sims` (применена к живой БД через `npm run migrate`, без ошибок).
   - **API `/api/custom-sims`** (роутер `backend/src/routes/customSims.js`, контроллер `backend/src/controllers/customSimController.js`, смонтировано в `server.js`): GET `/` (свои+published), GET `/:id` (own ИЛИ published), POST `/` (teacher/admin), PUT `/:id` (owner/admin), DELETE `/:id` (owner/admin). Read — router-level authMiddleware; мутации — inline requireRole + per-row ownership.
@@ -59,9 +84,12 @@
 - Reuse > переписывание: сначала смотреть `_fx_motion`, `_graph_panel`, `graph.js`.
 
 ## RESUME STATE
-- Последний коммит фичи: — (Ф0 + Ф1 + Ф2 + Ф3 реализованы, ещё не закоммичены — ждут оркестратора)
-- Текущая фаза: Phase 3 — Persistence + API (✅ Implemented, pending commit) → дальше Phase 4 — Builder UI
+- Последний коммит фичи: — (Ф0 + Ф1 + Ф2 + Ф3 + Ф4 реализованы, ещё не закоммичены — ждут оркестратора)
+- Текущая фаза: Phase 4 — Builder UI (✅ Implemented, pending commit) → дальше Phase 5 — Каталог (custom-sims в /lab)
 - Режим: Automated / Orchestrator / Incremental
+- Файлы Ф4 (несведённые с параллельной сессией): `frontend/sim-builder.html` (new),
+  `frontend/js/sim-builder.js` (new), `js/sidebar.js` (modify, аддитивный пункт `/sim-builder`).
+  lab.html/lab-glue.js НЕ тронуты. Публичное API билдера: `window.SimBuilder.create(...)`.
 - **Номер миграции Ф3: 071** (`071_custom_sims.sql`); следующая свободная — 072.
 - Новые публичные API для следующих фаз: `window.SimExpr`, `window.SimEngine.mount`, `window.SimPhysics` (step/integrate/resolveCollisions), `window.registerSpecSim` / `window.SimAdapter`. Формат спеки v1 + типы plot/readout/drag/vector + блок `physics`/`body`/`springs`/`walls` — в шапке `_sim_engine.js` и в handoff phase-0/1/2.
 - **API персистентности (Ф3)**: `/api/custom-sims` (GET `/`, GET/PUT/DELETE `/:id`, POST `/`) + клиент `LS.customSimsList/Get/Create/Update/Delete`. Контракт спеки на вход/санитизация — в handoff phase-3.
diff --git a/plans/sim-builder/PLAN.md b/plans/sim-builder/PLAN.md
index a8a87ea..285f37f 100644
--- a/plans/sim-builder/PLAN.md
+++ b/plans/sim-builder/PLAN.md
@@ -43,7 +43,7 @@
 - [x] Phase 1: Графики + интеракции [domain: frontend] → [subplan](./phase-1-plots-interactions.md)
 - [x] Phase 2: Физический интегратор [domain: frontend] → [subplan](./phase-2-physics.md)
 - [x] Phase 3: БД + API (custom_sims) [domain: backend] → [subplan](./phase-3-persistence-api.md)
-- [ ] Phase 4: Билдер (редактор) [domain: frontend] → [subplan](./phase-4-builder-ui.md)
+- [x] Phase 4: Билдер (редактор) [domain: frontend] → [subplan](./phase-4-builder-ui.md)
 - [ ] Phase 5: Каталог (custom-sims в /lab) [domain: fullstack] → [subplan](./phase-5-catalog.md)
 - [ ] Phase 6: Раздача / шаблоны / клон / программа [domain: fullstack] → [subplan](./phase-6-sharing.md)
 - [ ] Phase 7: Доска онлайн-урока [domain: fullstack] → [subplan](./phase-7-classroom.md)
@@ -56,7 +56,7 @@
 | Phase 1: Plots & interactions | frontend | ✅ Done | ✅ | ✅ | ✅ |
 | Phase 2: Physics | frontend | ✅ Done | ✅ | ✅ | ✅ |
 | Phase 3: Persistence + API | backend | ✅ Done | ✅ | ✅ | ✅ |
-| Phase 4: Builder UI | frontend | ⬜ Not Started | ⬜ | ⬜ | ⬜ |
+| Phase 4: Builder UI | frontend | ✅ Done | ✅ | ✅ | ✅ |
 | Phase 5: Catalog | fullstack | ⬜ Not Started | ⬜ | ⬜ | ⬜ |
 | Phase 6: Sharing | fullstack | ⬜ Not Started | ⬜ | ⬜ | ⬜ |
 | Phase 7: Classroom | fullstack | ⬜ Not Started | ⬜ | ⬜ | ⬜ |
diff --git a/plans/sim-builder/phase-4-builder-ui.md b/plans/sim-builder/phase-4-builder-ui.md
index 5f0206c..ec991d1 100644
--- a/plans/sim-builder/phase-4-builder-ui.md
+++ b/plans/sim-builder/phase-4-builder-ui.md
@@ -1,6 +1,6 @@
 # Phase 4: Билдер (редактор)
 
-**Status:** ⬜ Not Started
+**Status:** ✅ Implemented (в рабочем дереве, не закоммичено — коммит за оркестратором)
 **Parent plan:** [PLAN.md](./PLAN.md)
 **Domain:** frontend
 
@@ -9,16 +9,16 @@
 После фазы учитель собирает рабочую симуляцию с нуля в UI и сохраняет в БД (Ф3).
 
 ## Tasks
-- [ ] Страница `frontend/sim-builder.html` (доступ teacher/admin; сайдбар как у других страниц).
-- [ ] Левая/правая панель + центр-превью (встроенный `SimEngine` инстанс, перемонтаж при правках).
-- [ ] Панель **Параметры**: добавить/удалить параметр (имя, min, max, step, начальное, единица) → слайдер в превью.
-- [ ] Панель **Объекты**: добавить объект (тип из whitelist), редактор свойств; числовые поля
-  принимают число ИЛИ выражение; палитра-помощник функций/параметров; подпись с LaTeX.
-- [ ] Панель **Графики/Физика**: добавить plot (expr/var/range/trace); тумблер физики + её поля (Ф2).
-- [ ] Размещение объектов мышью на превью (клик-поставить, drag-двигать) с синхроном в свойства.
-- [ ] Мета: заголовок, описание, предмет, класс, категория, превью-картинка (опц.).
-- [ ] Save/Load через `LS.customSims*` (Ф3): новый / редактировать существующий; кнопка «Тест» (play inline).
-- [ ] Валидация на клиенте (понятные ошибки до сохранения) + показ ошибок выражений.
+- [x] Страница `frontend/sim-builder.html` (доступ teacher/admin; сайдбар как у других страниц).
+- [x] Левая панель-аккордеоны + центр-превью (встроенный `SimEngine` инстанс, перемонтаж при правках, debounce 280мс).
+- [x] Панель **Параметры**: добавить/удалить параметр (имя, min, max, step, начальное, единица) → слайдер в превью.
+- [x] Панель **Объекты**: добавить объект (тип из whitelist), редактор свойств; числовые поля
+  принимают число ИЛИ выражение; палитра-помощник функций/параметров/объектов; подпись с LaTeX-превью.
+- [x] Панель **Графики/Физика**: добавить plot (expr/var/range/trace); тумблер физики + её поля (Ф2) + стены/пружины.
+- [x] Размещение объектов мышью на превью (кнопка-«прицел» у объекта → клик-поставить, drag-двигать) с синхроном в свойства.
+- [x] Мета: заголовок, описание, предмет, класс, категория + viewport (xmin/xmax/ymin/ymax, сетка/оси, автозапуск/цикл).
+- [x] Save/Load через `LS.customSims*` (Ф3): новый / редактировать существующий (?id=); кнопки «Сохранить»/«Опубликовать»/«Тест»/«Сброс».
+- [x] Валидация на клиенте (понятные ошибки до сохранения, модалка-список) + inline-ошибки выражений у полей.
 
 ## Files to Modify/Create
 - `frontend/sim-builder.html` (new) — страница + инлайн-логика редактора
@@ -37,10 +37,62 @@
 - Большой файл — держать логику модульной (можно вынести в `frontend/js/sim-builder.js`).
 
 ## Review Checklist
-- [ ] Все задачи выполнены
-- [ ] Полный цикл build→save→reload→edit работает
-- [ ] Доступ только teacher/admin
-- [ ] Нет эмодзи; дизайн-система соблюдена
+- [x] Все задачи выполнены
+- [x] Полный цикл build→save→reload→edit работает (headless-смоук 23/23)
+- [x] Доступ только teacher/admin (LS.initPage gate + редирект /dashboard)
+- [x] Нет эмодзи; дизайн-система соблюдена (ls.css переменные/классы)
 
 ## Handoff to Next Phase
-<!-- Заполняет реализатор -->
+
+### Что реализовано (Phase 4)
+- **Страница `frontend/sim-builder.html`** (URL `/sim-builder`, гейт teacher/admin через
+  `LS.initPage()` → редирект `/dashboard`). Раскладка: `.app-layout > .sidebar(#app-sidebar) +
+  .sb-content`; внутри `.sbu-wrap` = тулбар + `.sbu-body` (панели-аккордеоны слева 360px +
+  превью справа). Подключает движок `/js/labs/_sim_expr.js` + `/js/labs/_sim_engine.js` (тем
+  же путём, что lab.html — `/js` мапится на корневой `js/`, а `labs/*` проваливается на
+  `express.static(frontend)`), KaTeX CDN, и логику `/js/sim-builder.js`.
+- **Логика `frontend/js/sim-builder.js`** → `window.SimBuilder.create({host, previewHost,
+  panelHost, toolbarHost}) -> Builder`. Состояние `Builder.st` (meta/subject/grade/cat/
+  viewport/time/params[]/objects[]/plots[]/physics{}); `_uid` на объектах/стенах/пружинах —
+  только UI-метка, вырезается при сборке.
+- **Генерация спеки** `Builder.buildSpec()` → чистый JSON v1: `{ specVersion:1, meta:{title,
+  desc}, viewport, time, params[], objects[](+merged plots), physics? }`. `stripObj()` убирает
+  `_uid`/пустые поля; **plot** материализуется отдельно (`normalizePlotForSpec`: UI-поля
+  `range_a/range_b` → `range:[a,b]`, границы могут быть числом ИЛИ выражением xmin/xmax). Физика
+  собирается только при `physics.enabled` (gravity{x,y}, friction, restitution клампится 0..1,
+  walls[], springs[]; конец пружины «id» или «x,y» парсится `parseEnd`). Числовые поля объектов
+  хранятся как введено (число/строка-выражение) — движок `SimExpr.compileValue` ест оба.
+- **Живое превью**: `scheduleRemount(debounce 280мс)` → `remount()` уничтожает старый инстанс,
+  монтирует `SimEngine.mount(previewHost, buildSpec())`, сохраняет play-состояние. Ошибка сборки
+  показывается в превью, не роняет редактор.
+- **Drag-on-preview**: кнопка-«прицел» у объекта выбирает его (`_selObjId`); pointerdown/move по
+  `inst.canvas` конвертит px→мир через `inst._toWorld()` и пишет x/y (или x2/y2 для segment/
+  vector) в свойства объекта + обновляет поля панели. Работает только на паузе движка.
+- **Палитра выражений** (`openPalette`): модалка с чипами — параметры, ссылки `id.x/id.y` на
+  объекты с id, `t/w/h`, константы (`SimExpr.CONSTANTS`), функции (`SimExpr.FUNCTIONS`); клик
+  вставляет имя в активное поле (функции — с `()`).
+- **Валидация (клиент, до запроса)** `Builder.validate()` зеркалит серверную (Ф3): обязателен
+  title; params ≤50, имя-идентификатор, **запрет `e`/служебных (pi/t/w/h/E/PI/tau)**, без дублей,
+  min≤max; objects+plots ≤200; каждое выражение `SimExpr.compile` → ошибка показывается у поля И
+  в списке-модалке; expr ≤500 симв.; walls ≤20, springs ≤50; restitution 0..1; размер JSON ≤200КБ
+  (через Blob). Ошибки — дружелюбная модалка-список.
+- **Save/Load**: «Сохранить»→`customSimCreate`/`customSimUpdate`(если есть simId); «Опубликовать»
+  добавляет `status:'published'`. После create — `history.replaceState('/sim-builder?id=<id>')`,
+  чтобы повторное сохранение делало update. Загрузка `?id=<id>` → `customSimGet` → `loadFromSim`
+  раскладывает спеку обратно по панелям (объекты vs plots разделяются по `type==='plot'`).
+- **Сайдбар**: добавлен пункт `/sim-builder` «Конструктор симуляций» (icon `pencil-ruler`,
+  teacher-only) в группу «Практика и игры» сразу после «Лаборатория» — минимальная аддитивная
+  правка `js/sidebar.js` (тот же паттерн `cls:'sb-teacher-only', hidden:!isTch`, активная
+  подсветка через `isActive`).
+
+### Что осталось / на Ф5 (каталог)
+- Превью-картинка симуляции (опц., упомянута в задаче) НЕ делалась — `custom_sims` не имеет поля
+  превью; визуальная карточка каталога — забота Ф5 (можно рендерить мини-`SimEngine` как превью).
+- На Ф5: custom-sims из `LS.customSimsList()` (published + свои) должны попасть в каталог `/lab`
+  через `window.registerSpecSim(spec)` / `SimAdapter` (Ф0). Кнопка «Открыть в конструкторе» из
+  каталога → `/sim-builder?id=<id>` уже работает (страница грузит по `?id`). Билдер пишет спеку
+  ровно в формате, который ест `SimEngine.mount` и серверная `validateSpec` (escaped-текст
+  приходит обратно при GET — для KaTeX/canvas безопасно).
+- Drag-on-preview пишет только x/y (или конец segment/vector). Перетаскивание точек polyline,
+  origin вектора в форме origin+dx/dy, и хэндлов physics-тел — НЕ сделано (числами/выражениями
+  редактируется). Это осознанный прагматичный минимум (см. Notes плана).