modulearn 0.1.0__py3-none-any.whl

modulearn/static/graph-engine.js

@@ -0,0 +1,623 @@
+/* ModuLearn — graph-engine.js
+ *
+ * A small, self-contained canvas node-graph engine that replaces the vendored
+ * LiteGraph.js. It exposes the exact three globals graph.js consumes —
+ * `LiteGraph`, `LGraph`, `LGraphCanvas` — with byte-compatible signatures, so
+ * graph.js runs on top of it unchanged.
+ *
+ * Coordinate model (must match graph.js/zoomToFit's assumptions):
+ *   screen = (graph + ds.offset) * ds.scale
+ * so graph = screen / scale - offset. Node.pos is the top-left of the node
+ * BODY; the title bar is drawn in the TITLE_H band directly above it. All the
+ * graph.js render hooks (canvas.onDrawForeground, node.onDrawForeground) are
+ * invoked in graph space, node hooks with the origin translated to node.pos.
+ *
+ * Scope: reproduces LiteGraph's look/feel and the surface graph.js uses —
+ * node boxes, typed slots, bezier wires, four widget kinds (number/combo/
+ * toggle/text), node drag, background pan, wheel zoom, port-drag connect with
+ * exact type-match, selection + delete, and collapse. Nothing more.
+ */
+(function () {
+  "use strict";
+
+  // ---- layout constants (LiteGraph-ish) --------------------------------------
+  const TITLE_H = 30;     // title bar band above node.pos
+  const SLOT_H = 20;      // per input/output row
+  const WIDGET_H = 20;    // per widget row
+  const SLOT_TOP = 6;     // gap from body top to first slot row
+  const PORT_R = 4;       // slot dot radius
+  const HIT_R = 11;       // port grab radius (graph units)
+
+  function roundRect(ctx, x, y, w, h, r) {
+    r = Math.min(r, w / 2, h / 2);
+    ctx.beginPath();
+    ctx.moveTo(x + r, y);
+    ctx.arcTo(x + w, y, x + w, y + h, r);
+    ctx.arcTo(x + w, y + h, x, y + h, r);
+    ctx.arcTo(x, y + h, x, y, r);
+    ctx.arcTo(x, y, x + w, y, r);
+    ctx.closePath();
+  }
+
+  // ---- LiteGraph namespace ---------------------------------------------------
+  const registered = {};   // type id -> node constructor
+
+  const LiteGraph = {
+    NODE_TITLE_HEIGHT: TITLE_H,
+    NODE_SLOT_HEIGHT: SLOT_H,
+    registerNodeType(id, Ctor) {
+      // Splice LGraphNode's methods under the constructor's own prototype
+      // WITHOUT clobbering props graph.js already set on it (onDrawForeground).
+      Object.setPrototypeOf(Ctor.prototype, LGraphNode.prototype);
+      Ctor.type = id;
+      registered[id] = Ctor;
+    },
+    createNode(type) {
+      const Ctor = registered[type];
+      if (!Ctor) return null;
+      const n = Object.create(Ctor.prototype);
+      initNode(n, type, Ctor.title || type);
+      Ctor.call(n);            // runs the spec constructor: addInput/Output/Widget
+      return n;
+    },
+  };
+
+  // ---- node base -------------------------------------------------------------
+  function initNode(n, type, title) {
+    n.id = null;
+    n.type = type;
+    n.title = title;
+    n.graph = null;
+    n.pos = [0, 0];
+    n.size = [140, 60];
+    n.inputs = [];
+    n.outputs = [];
+    n.widgets = [];
+    n.properties = {};
+    n.flags = { collapsed: false };
+  }
+
+  function LGraphNode() {}
+  LGraphNode.prototype.addInput = function (name, type) {
+    this.inputs.push({ name, type, link: null });
+  };
+  LGraphNode.prototype.addOutput = function (name, type) {
+    this.outputs.push({ name, type, links: [] });
+  };
+  LGraphNode.prototype.addWidget = function (kind, name, value, callback, options) {
+    const w = { type: kind, name, value, callback, options: options || {} };
+    this.widgets.push(w);
+    return w;
+  };
+  LGraphNode.prototype.computeSize = function () {
+    const rows = Math.max(this.inputs.length, this.outputs.length);
+    let h = SLOT_TOP * 2 + rows * SLOT_H + this.widgets.length * WIDGET_H;
+    h = Math.max(h, 42);
+    return [140, h];
+  };
+  // Graph-space position of an input/output slot's connection dot.
+  LGraphNode.prototype.getConnectionPos = function (isInput, slot, out) {
+    out = out || [0, 0];
+    if (this.flags.collapsed) {
+      out[0] = this.pos[0] + (isInput ? 0 : this.size[0]);
+      out[1] = this.pos[1] - TITLE_H / 2;
+      return out;
+    }
+    out[0] = this.pos[0] + (isInput ? 0 : this.size[0]);
+    out[1] = this.pos[1] + SLOT_TOP + slot * SLOT_H + SLOT_H * 0.5;
+    return out;
+  };
+  // Wire this node's output `slot` to `target`'s input `targetSlot`. An input
+  // holds a single link, so any prior link into it is replaced.
+  LGraphNode.prototype.connect = function (slot, target, targetSlot) {
+    const out = this.outputs[slot], inp = target.inputs[targetSlot];
+    const g = this.graph;
+    if (!out || !inp || !g) return false;
+    for (const id in g.links) {
+      const l = g.links[id];
+      if (l && l.target_id === target.id && l.target_slot === targetSlot) g._removeLink(id);
+    }
+    const id = ++g.last_link_id;
+    g.links[id] = {
+      id, origin_id: this.id, origin_slot: slot,
+      target_id: target.id, target_slot: targetSlot, type: out.type,
+    };
+    out.links.push(id);
+    inp.link = id;
+    if (g.onNodeConnectionChange) g.onNodeConnectionChange();
+    return true;
+  };
+
+  // ---- graph model -----------------------------------------------------------
+  function LGraph() {
+    this._nodes = [];
+    this.links = {};
+    this.last_node_id = 0;
+    this.last_link_id = 0;
+    this.onNodeAdded = null;
+    this.onNodeRemoved = null;
+    this.onNodeConnectionChange = null;
+  }
+  LGraph.prototype.add = function (node) {
+    if (node.id == null) node.id = ++this.last_node_id;
+    else this.last_node_id = Math.max(this.last_node_id, node.id);
+    node.graph = this;
+    this._nodes.push(node);
+    if (this.onNodeAdded) this.onNodeAdded(node);
+    return node;
+  };
+  LGraph.prototype.getNodeById = function (id) {
+    return this._nodes.find((n) => n.id == id) || null;
+  };
+  LGraph.prototype._removeLink = function (id) {
+    const l = this.links[id];
+    if (!l) return;
+    const src = this.getNodeById(l.origin_id);
+    if (src && src.outputs[l.origin_slot]) {
+      const arr = src.outputs[l.origin_slot].links;
+      const i = arr.indexOf(id); if (i >= 0) arr.splice(i, 1);
+    }
+    const dst = this.getNodeById(l.target_id);
+    if (dst && dst.inputs[l.target_slot] && dst.inputs[l.target_slot].link === id) {
+      dst.inputs[l.target_slot].link = null;
+    }
+    delete this.links[id];
+  };
+  LGraph.prototype.remove = function (node) {
+    let touched = false;
+    for (const id in this.links) {
+      const l = this.links[id];
+      if (l && (l.origin_id === node.id || l.target_id === node.id)) {
+        this._removeLink(id); touched = true;
+      }
+    }
+    const i = this._nodes.indexOf(node);
+    if (i >= 0) this._nodes.splice(i, 1);
+    node.graph = null;
+    if (touched && this.onNodeConnectionChange) this.onNodeConnectionChange();
+    if (this.onNodeRemoved) this.onNodeRemoved(node);
+  };
+  LGraph.prototype.clear = function () {
+    this._nodes = [];
+    this.links = {};
+    this.last_node_id = 0;
+    this.last_link_id = 0;
+  };
+  LGraph.prototype.start = function () { /* graph.js drives its own rAF loop */ };
+
+  // ---- canvas ----------------------------------------------------------------
+  function LGraphCanvas(selector, graph) {
+    this.canvas = typeof selector === "string"
+      ? document.querySelector(selector) : selector;
+    this.graph = graph;
+    this.ctx = this.canvas.getContext("2d");
+    this.ds = { scale: 1, offset: [0, 0] };
+    this.selected = null;       // single-selection
+    this.node_over = null;      // hovered node (graph.js drawPortCues)
+    this.connecting_output = null; // output slot obj mid-drag (graph.js drawPortCues)
+    this.onDrawForeground = null;  // graph.js ambient hook (graph space)
+    this._connecting = null;    // {node, slot}
+    this._drag = null;          // active drag state
+    this._mouseGraph = [0, 0];  // last pointer in graph space
+    this._bindEvents();
+  }
+
+  LGraphCanvas.link_type_colors = {};
+
+  LGraphCanvas.prototype.resize = function () { this.draw(true, true); };
+  LGraphCanvas.prototype.setDirty = function () { this.draw(true, true); };
+
+  LGraphCanvas.prototype.convertOffsetToCanvas = function (pos) {
+    // screen -> graph
+    return [pos[0] / this.ds.scale - this.ds.offset[0],
+            pos[1] / this.ds.scale - this.ds.offset[1]];
+  };
+  LGraphCanvas.prototype._toGraph = function (clientX, clientY) {
+    const r = this.canvas.getBoundingClientRect();
+    return [(clientX - r.left) / this.ds.scale - this.ds.offset[0],
+            (clientY - r.top) / this.ds.scale - this.ds.offset[1]];
+  };
+
+  LGraphCanvas.prototype.selectNode = function (n) { this.selected = n; };
+  LGraphCanvas.prototype.centerOnNode = function (n) {
+    const s = this.ds.scale;
+    this.ds.offset[0] = this.canvas.width / (2 * s) - (n.pos[0] + n.size[0] / 2);
+    this.ds.offset[1] = this.canvas.height / (2 * s) - (n.pos[1] + n.size[1] / 2);
+  };
+
+  // ---- hit-testing (all in graph space) --------------------------------------
+  LGraphCanvas.prototype._nodeBox = function (n) {
+    const top = n.pos[1] - TITLE_H;
+    const h = TITLE_H + (n.flags.collapsed ? 0 : n.size[1]);
+    return [n.pos[0], top, n.size[0], h];
+  };
+  LGraphCanvas.prototype._nodeAt = function (gx, gy) {
+    for (let i = this.graph._nodes.length - 1; i >= 0; i--) {
+      const n = this.graph._nodes[i], b = this._nodeBox(n);
+      if (gx >= b[0] && gx <= b[0] + b[2] && gy >= b[1] && gy <= b[1] + b[3]) return n;
+    }
+    return null;
+  };
+  LGraphCanvas.prototype._portAt = function (gx, gy) {
+    const p = [0, 0];
+    for (let i = this.graph._nodes.length - 1; i >= 0; i--) {
+      const n = this.graph._nodes[i];
+      if (n.flags.collapsed) continue;
+      for (let s = 0; s < n.outputs.length; s++) {
+        n.getConnectionPos(false, s, p);
+        if (Math.hypot(gx - p[0], gy - p[1]) <= HIT_R)
+          return { node: n, isInput: false, slot: s, port: n.outputs[s] };
+      }
+      for (let s = 0; s < n.inputs.length; s++) {
+        n.getConnectionPos(true, s, p);
+        if (Math.hypot(gx - p[0], gy - p[1]) <= HIT_R)
+          return { node: n, isInput: true, slot: s, port: n.inputs[s] };
+      }
+    }
+    return null;
+  };
+  // widget row under a point, given the node it's inside.
+  LGraphCanvas.prototype._widgetAt = function (n, gx, gy) {
+    if (n.flags.collapsed || !n.widgets.length) return -1;
+    const rows = Math.max(n.inputs.length, n.outputs.length);
+    const top = n.pos[1] + SLOT_TOP + rows * SLOT_H + 2;
+    if (gx < n.pos[0] + 4 || gx > n.pos[0] + n.size[0] - 4) return -1;
+    const idx = Math.floor((gy - top) / WIDGET_H);
+    return (idx >= 0 && idx < n.widgets.length) ? idx : -1;
+  };
+  LGraphCanvas.prototype._collapseHit = function (n, gx, gy) {
+    // small toggle circle at the title's left
+    return Math.hypot(gx - (n.pos[0] + 14), gy - (n.pos[1] - TITLE_H / 2)) <= 7;
+  };
+
+  // ---- widget value editing --------------------------------------------------
+  function widgetDisplay(w) {
+    if (w.type === "toggle") return `${w.name}: ${w.value ? "on" : "off"}`;
+    if (w.type === "number") {
+      const prec = w.options.precision;
+      const v = prec === 0 ? Math.round(w.value) : w.value;
+      return `${w.name}: ${v}`;
+    }
+    return `${w.name}: ${w.value}`;
+  }
+  function applyNumber(w, v) {
+    const o = w.options;
+    if (o.precision === 0) v = Math.round(v);
+    else v = Math.round(v / (o.step || 1)) * (o.step || 1);
+    if (o.min != null) v = Math.max(o.min, v);
+    if (o.max != null) v = Math.min(o.max, v);
+    if (o.precision != null && o.precision > 0) v = +v.toFixed(o.precision);
+    return v;
+  }
+  LGraphCanvas.prototype._commitWidget = function (w, v) {
+    w.value = v;
+    if (w.callback) w.callback(v, this, null);
+    this.setDirty();
+  };
+  // A plain click (no meaningful drag) on a widget.
+  LGraphCanvas.prototype._clickWidget = function (w) {
+    if (w.type === "toggle") { this._commitWidget(w, !w.value); return; }
+    if (w.type === "combo") {
+      const vals = w.options.values || [];
+      const i = vals.indexOf(w.value);
+      if (vals.length) this._commitWidget(w, vals[(i + 1) % vals.length]);
+      return;
+    }
+    if (w.type === "number") {
+      const raw = window.prompt(w.name, String(w.value));
+      if (raw != null && raw.trim() !== "" && !isNaN(+raw))
+        this._commitWidget(w, applyNumber(w, +raw));
+      return;
+    }
+    // text (incl. int_list stored as "128,64")
+    const raw = window.prompt(w.name, String(w.value));
+    if (raw != null) this._commitWidget(w, raw);
+  };
+
+  // ---- interaction -----------------------------------------------------------
+  LGraphCanvas.prototype._bindEvents = function () {
+    const cv = this.canvas;
+    cv.addEventListener("mousedown", (e) => this._onDown(e));
+    window.addEventListener("mousemove", (e) => this._onMove(e));
+    window.addEventListener("mouseup", (e) => this._onUp(e));
+    cv.addEventListener("wheel", (e) => this._onWheel(e), { passive: false });
+    cv.addEventListener("contextmenu", (e) => e.preventDefault());
+    window.addEventListener("keydown", (e) => this._onKey(e));
+  };
+
+  LGraphCanvas.prototype._onDown = function (e) {
+    if (e.button !== 0) return;
+    const [gx, gy] = this._toGraph(e.clientX, e.clientY);
+    this._mouseGraph = [gx, gy];
+
+    // 1) start/pick-up a wire from a port
+    const hit = this._portAt(gx, gy);
+    if (hit) {
+      if (hit.isInput) {
+        // grab the existing link (if any) off this input to reconnect it
+        const lid = hit.port.link;
+        if (lid != null && this.graph.links[lid]) {
+          const l = this.graph.links[lid];
+          const src = this.graph.getNodeById(l.origin_id);
+          this.graph._removeLink(lid);
+          if (this.graph.onNodeConnectionChange) this.graph.onNodeConnectionChange();
+          this._connecting = { node: src, slot: l.origin_slot };
+          this.connecting_output = src.outputs[l.origin_slot];
+          e.preventDefault(); return;
+        }
+        return; // bare input: nothing to drag
+      }
+      this._connecting = { node: hit.node, slot: hit.slot };
+      this.connecting_output = hit.port;
+      e.preventDefault(); return;
+    }
+
+    // 2) node?
+    const node = this._nodeAt(gx, gy);
+    if (node) {
+      this.selected = node;
+      if (this._collapseHit(node, gx, gy)) {
+        node.flags.collapsed = !node.flags.collapsed;
+        this.setDirty(); e.preventDefault(); return;
+      }
+      const wi = this._widgetAt(node, gx, gy);
+      if (wi >= 0) {
+        this._drag = { kind: "widget", node, widget: node.widgets[wi],
+                       startX: gx, startVal: node.widgets[wi].value, moved: false };
+        e.preventDefault(); return;
+      }
+      this._drag = { kind: "node", node, ox: gx - node.pos[0], oy: gy - node.pos[1] };
+      e.preventDefault(); return;
+    }
+
+    // 3) empty space: pan (and clear selection)
+    this.selected = null;
+    this._drag = { kind: "pan", sx: e.clientX, sy: e.clientY,
+                   ox: this.ds.offset[0], oy: this.ds.offset[1] };
+    this.setDirty();
+  };
+
+  LGraphCanvas.prototype._onMove = function (e) {
+    const [gx, gy] = this._toGraph(e.clientX, e.clientY);
+    this._mouseGraph = [gx, gy];
+    this.node_over = this._nodeAt(gx, gy);
+
+    const d = this._drag;
+    if (d) {
+      if (d.kind === "node") {
+        d.node.pos[0] = gx - d.ox; d.node.pos[1] = gy - d.oy;
+      } else if (d.kind === "pan") {
+        this.ds.offset[0] = d.ox + (e.clientX - d.sx) / this.ds.scale;
+        this.ds.offset[1] = d.oy + (e.clientY - d.sy) / this.ds.scale;
+      } else if (d.kind === "widget") {
+        const dx = gx - d.startX;
+        if (Math.abs(dx) > 3) d.moved = true;
+        const w = d.widget;
+        if (w.type === "number" && d.moved) {
+          const step = w.options.step || 0.1;
+          this._commitWidget(w, applyNumber(w, d.startVal + dx * step * 0.25));
+        }
+      }
+      this.setDirty();
+      return;
+    }
+    if (this._connecting) this.setDirty();
+  };
+
+  LGraphCanvas.prototype._onUp = function (e) {
+    if (this._connecting) {
+      const [gx, gy] = this._toGraph(e.clientX, e.clientY);
+      const hit = this._portAt(gx, gy);
+      const c = this._connecting;
+      if (hit && hit.isInput && hit.port.type === c.node.outputs[c.slot].type) {
+        c.node.connect(c.slot, hit.node, hit.slot);
+      }
+      this._connecting = null;
+      this.connecting_output = null;
+      this.setDirty();
+    }
+    const d = this._drag;
+    if (d && d.kind === "widget" && !d.moved) this._clickWidget(d.widget);
+    this._drag = null;
+  };
+
+  LGraphCanvas.prototype._onWheel = function (e) {
+    e.preventDefault();
+    const r = this.canvas.getBoundingClientRect();
+    const sx = e.clientX - r.left, sy = e.clientY - r.top;
+    const before = [sx / this.ds.scale - this.ds.offset[0],
+                    sy / this.ds.scale - this.ds.offset[1]];
+    const factor = e.deltaY < 0 ? 1.1 : 1 / 1.1;
+    this.ds.scale = Math.max(0.15, Math.min(3, this.ds.scale * factor));
+    // keep the graph point under the cursor fixed
+    this.ds.offset[0] = sx / this.ds.scale - before[0];
+    this.ds.offset[1] = sy / this.ds.scale - before[1];
+    this.setDirty();
+  };
+
+  LGraphCanvas.prototype._onKey = function (e) {
+    const typing = /^(input|textarea|select)$/i.test(e.target.tagName || "");
+    if (typing) return;
+    if ((e.key === "Delete" || e.key === "Backspace") && this.selected) {
+      e.preventDefault();
+      const n = this.selected; this.selected = null;
+      this.graph.remove(n);
+      this.setDirty();
+    }
+  };
+
+  // ---- rendering -------------------------------------------------------------
+  const COL = {
+    titleBg: "#2a323f", titleText: "#e6edf3",
+    bodyBg: "#1b212b", border: "#39424f", sel: "#c8663c",
+    slotText: "#c3ccd8", widgetBg: "#232b37", widgetText: "#e6edf3",
+    muted: "#8b98a9",
+  };
+  function linkColor(type) {
+    return LGraphCanvas.link_type_colors[type]
+        || LGraphCanvas.link_type_colors[(type || "").split("/")[0]]
+        || COL.muted;
+  }
+
+  LGraphCanvas.prototype.draw = function () {
+    const ctx = this.ctx, cv = this.canvas;
+    ctx.setTransform(1, 0, 0, 1, 0, 0);
+    ctx.clearRect(0, 0, cv.width, cv.height);
+    ctx.fillStyle = "#14181f";
+    ctx.fillRect(0, 0, cv.width, cv.height);
+
+    const s = this.ds.scale, o = this.ds.offset;
+    ctx.setTransform(s, 0, 0, s, o[0] * s, o[1] * s);
+
+    this._drawGrid(ctx, cv);
+    this._drawLinks(ctx);
+    if (this._connecting) this._drawConnecting(ctx);
+    for (const n of this.graph._nodes) this._drawNode(ctx, n);
+    if (this.onDrawForeground) this.onDrawForeground(ctx);   // graph.js ambient
+  };
+
+  LGraphCanvas.prototype._drawGrid = function (ctx, cv) {
+    const s = this.ds.scale, o = this.ds.offset;
+    const step = 50;
+    const x0 = -o[0], y0 = -o[1];
+    const x1 = cv.width / s - o[0], y1 = cv.height / s - o[1];
+    ctx.strokeStyle = "rgba(255,255,255,.03)";
+    ctx.lineWidth = 1 / s;
+    ctx.beginPath();
+    for (let x = Math.floor(x0 / step) * step; x < x1; x += step) {
+      ctx.moveTo(x, y0); ctx.lineTo(x, y1);
+    }
+    for (let y = Math.floor(y0 / step) * step; y < y1; y += step) {
+      ctx.moveTo(x0, y); ctx.lineTo(x1, y);
+    }
+    ctx.stroke();
+  };
+
+  LGraphCanvas.prototype._bezier = function (ctx, a, b, color, width) {
+    const dist = Math.max(40, Math.abs(b[0] - a[0]) * 0.5);
+    ctx.beginPath();
+    ctx.moveTo(a[0], a[1]);
+    ctx.bezierCurveTo(a[0] + dist, a[1], b[0] - dist, b[1], b[0], b[1]);
+    ctx.strokeStyle = color; ctx.lineWidth = width; ctx.stroke();
+  };
+
+  LGraphCanvas.prototype._drawLinks = function (ctx) {
+    const a = [0, 0], b = [0, 0];
+    for (const id in this.graph.links) {
+      const l = this.graph.links[id]; if (!l) continue;
+      const src = this.graph.getNodeById(l.origin_id);
+      const dst = this.graph.getNodeById(l.target_id);
+      if (!src || !dst) continue;
+      src.getConnectionPos(false, l.origin_slot, a);
+      dst.getConnectionPos(true, l.target_slot, b);
+      this._bezier(ctx, [a[0], a[1]], [b[0], b[1]], linkColor(l.type), 2.5);
+    }
+  };
+
+  LGraphCanvas.prototype._drawConnecting = function (ctx) {
+    const c = this._connecting, a = [0, 0];
+    c.node.getConnectionPos(false, c.slot, a);
+    this._bezier(ctx, [a[0], a[1]], this._mouseGraph,
+                 linkColor(c.node.outputs[c.slot].type), 2);
+  };
+
+  LGraphCanvas.prototype._drawNode = function (ctx, n) {
+    const x = n.pos[0], y = n.pos[1], w = n.size[0];
+    const collapsed = n.flags.collapsed;
+    const bodyH = collapsed ? 0 : n.size[1];
+
+    // body
+    if (!collapsed) {
+      roundRect(ctx, x, y, w, bodyH, 6);
+      ctx.fillStyle = COL.bodyBg; ctx.fill();
+    }
+    // title
+    roundRect(ctx, x, y - TITLE_H, w, TITLE_H + (collapsed ? 0 : 6), 6);
+    ctx.fillStyle = COL.titleBg; ctx.fill();
+    // collapse dot
+    ctx.beginPath();
+    ctx.arc(x + 14, y - TITLE_H / 2, 4, 0, Math.PI * 2);
+    ctx.fillStyle = collapsed ? COL.sel : COL.muted; ctx.fill();
+    // title text
+    ctx.fillStyle = COL.titleText;
+    ctx.font = "13px ui-sans-serif, system-ui, sans-serif";
+    ctx.textBaseline = "middle"; ctx.textAlign = "left";
+    ctx.fillText(n.title || n.type, x + 26, y - TITLE_H / 2 + 1);
+
+    // selection ring
+    if (this.selected === n) {
+      roundRect(ctx, x - 1.5, y - TITLE_H - 1.5, w + 3, TITLE_H + bodyH + 3, 7);
+      ctx.strokeStyle = COL.sel; ctx.lineWidth = 1.5; ctx.stroke();
+    } else {
+      roundRect(ctx, x, y - TITLE_H, w, TITLE_H + bodyH, 6);
+      ctx.strokeStyle = COL.border; ctx.lineWidth = 1; ctx.stroke();
+    }
+
+    if (collapsed) { this._drawSlotDots(ctx, n, true); return; }
+
+    this._drawSlotDots(ctx, n, false);
+    this._drawWidgets(ctx, n);
+
+    // graph.js node hook (descriptors + Train status), origin at node body
+    if (n.onDrawForeground) {
+      ctx.save(); ctx.translate(x, y);
+      ctx.textAlign = "left"; ctx.textBaseline = "alphabetic";
+      n.onDrawForeground(ctx);
+      ctx.restore();
+    }
+  };
+
+  LGraphCanvas.prototype._drawSlotDots = function (ctx, n, collapsed) {
+    const p = [0, 0];
+    ctx.font = "11px ui-sans-serif, system-ui, sans-serif";
+    ctx.textBaseline = "middle";
+    n.inputs.forEach((inp, i) => {
+      n.getConnectionPos(true, i, p);
+      ctx.beginPath(); ctx.arc(p[0], p[1], PORT_R, 0, Math.PI * 2);
+      ctx.fillStyle = linkColor(inp.type); ctx.fill();
+      if (!collapsed) {
+        ctx.fillStyle = COL.slotText; ctx.textAlign = "left";
+        ctx.fillText(inp.name, p[0] + 8, p[1]);
+      }
+    });
+    n.outputs.forEach((out, i) => {
+      n.getConnectionPos(false, i, p);
+      ctx.beginPath(); ctx.arc(p[0], p[1], PORT_R, 0, Math.PI * 2);
+      ctx.fillStyle = linkColor(out.type); ctx.fill();
+      if (!collapsed) {
+        ctx.fillStyle = COL.slotText; ctx.textAlign = "right";
+        ctx.fillText(out.name, p[0] - 8, p[1]);
+      }
+    });
+  };
+
+  LGraphCanvas.prototype._drawWidgets = function (ctx, n) {
+    const rows = Math.max(n.inputs.length, n.outputs.length);
+    let y = n.pos[1] + SLOT_TOP + rows * SLOT_H + 2;
+    const x = n.pos[0] + 6, w = n.size[0] - 12;
+    ctx.font = "11px ui-sans-serif, system-ui, sans-serif";
+    ctx.textBaseline = "middle";
+    for (const wd of n.widgets) {
+      roundRect(ctx, x, y + 2, w, WIDGET_H - 4, 4);
+      ctx.fillStyle = COL.widgetBg; ctx.fill();
+      const cy = y + WIDGET_H / 2;
+      // affordance markers
+      ctx.fillStyle = COL.muted; ctx.textAlign = "right";
+      if (wd.type === "number" || wd.type === "combo")
+        ctx.fillText("‹ ›", x + w - 6, cy);
+      else if (wd.type === "toggle") {
+        ctx.fillStyle = wd.value ? "#3fb950" : COL.muted;
+        ctx.fillText(wd.value ? "◉" : "◯", x + w - 6, cy);
+      } else ctx.fillText("✎", x + w - 6, cy);
+      // label + value
+      ctx.fillStyle = COL.widgetText; ctx.textAlign = "left";
+      ctx.fillText(widgetDisplay(wd), x + 8, cy);
+      y += WIDGET_H;
+    }
+  };
+
+  // ---- export globals --------------------------------------------------------
+  window.LiteGraph = LiteGraph;
+  window.LGraph = LGraph;
+  window.LGraphCanvas = LGraphCanvas;
+})();