feat(ui): port session UI work to main — WanDirector LTX rebuild + shared kit

Surgical port from feat/v2-ai-spine of this session's UI work (NO blind
merge — main stays curated, AI-spine features excluded):
- WanDirector: DOM track sidebar (pills/eye toggles), '+' add-menu, GLOBAL
  PROMPT, CSS design-system, game-sprite noodle completion FX.
- Shared _c2c_ui_kit.js design system + rollout: points-bbox editor,
  video player, video-comparer pills.
- Bookmark toggle moved Ctrl+Alt+B -> Alt+B (no build-workflow collision).
- Vendored self-contained infra deps feat added (_c2c_lite,
  _editor_empty_state) so no dangling imports.
Verified: whole-tree ./import check clean; every ported .js node --check OK.
(spline_mask_editor intentionally NOT ported — its bg3 theme import would
require changing the 34-importer _c2c_theme; left for a dedicated pass.)

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

Author: Code2Collapse

js/_c2c_lite.js

@@ -0,0 +1,84 @@
+// _c2c_lite.js — C2C "Lite / Performance mode".
+// ---------------------------------------------------------------------------
+// This pack ships 100+ JS extensions. On a busy graph (1000s of nodes) the
+// cumulative per-frame + per-event overhead of the *visual extras* (completion
+// FX, animated noodles, always-on HUD pills, per-node badges, mood board, etc.)
+// is what makes a loaded box feel sluggish/unresponsive. Lite mode lets the user
+// switch those OFF so only the functional tools remain.
+//
+// HOW IT WORKS (load-order-proof): the flag lives in localStorage and is read
+// SYNCHRONOUSLY at module-eval time, BEFORE any heavy extension registers. Each
+// gated extension does `import { LITE } from "./_c2c_lite.js"` — the ES import
+// guarantees this module evaluates first — and wraps its registration in
+// `if (!LITE) …`. So in lite mode the heavy extension never registers: its draw
+// hooks, DOM, and timers are never installed (true load reduction, not a flag
+// checked every frame).
+//
+// Toggle: Settings → C2C → Performance → "Lite mode". Changing it writes
+// localStorage and the value applies on the next page load (extensions are
+// imported once at startup), so we offer a one-click reload.
+
+import { app } from "/scripts/app.js";
+
+const LS_KEY = "c2c.lite";
+
+export const LITE = (() => {
+    try { return localStorage.getItem(LS_KEY) === "1"; } catch (_) { return false; }
+})();
+
+// Optional helper for gated files that prefer a function call.
+export function liteSkip(label) {
+    if (LITE && label) { try { console.debug(`[C2C.Lite] skipped ${label}`); } catch (_) {} }
+    return LITE;
+}
+
+// localStorage is the SOLE source of truth (read at module-eval). ComfyUI fires
+// the setting's onChange with its server-stored value during init, which must
+// NOT be allowed to clobber localStorage — so onChange is ignored until the user
+// can actually interact (after setup).
+let _initDone = false;
+
+if (!(app.extensions || []).some((e) => e?.name === "C2C.LiteMode")) app.registerExtension({
+    name: "C2C.LiteMode",
+    settings: [
+        {
+            id: "c2c.lite.enabled",
+            name: "Lite mode — disable C2C visual extras (FX, animated noodles, HUD pills, badges) for performance",
+            tooltip: "Recommended on heavy graphs / low-RAM machines. Keeps all functional tools; turns off "
+                   + "eye-candy and always-on overlays. Applies after a page reload.",
+            type: "boolean",
+            defaultValue: LITE,
+            category: ["c2c", "Performance", "Lite mode"],
+            onChange: (v) => {
+                if (!_initDone) return;          // ignore the init echo + our own sync (don't clobber localStorage)
+                const on = !!v;
+                let changed = false;
+                try { changed = (localStorage.getItem(LS_KEY) === "1") !== on; localStorage.setItem(LS_KEY, on ? "1" : "0"); } catch (_) {}
+                if (!changed) return;
+                // Offer an immediate reload so the change takes effect.
+                try {
+                    const t = app.extensionManager?.toast;
+                    if (t?.add) {
+                        t.add({ severity: "info", summary: "C2C Lite mode",
+                                detail: `Lite mode ${on ? "ON" : "OFF"} — reload to apply.`, life: 6000 });
+                    }
+                } catch (_) {}
+                // A gentle confirm to reload now (skips if the host blocks dialogs).
+                setTimeout(() => {
+                    try {
+                        if (window.confirm(`C2C Lite mode ${on ? "enabled" : "disabled"}.\nReload now to apply?`)) {
+                            location.reload();
+                        }
+                    } catch (_) {}
+                }, 50);
+            },
+        },
+    ],
+    async setup() {
+        // Sync the checkbox to the real (localStorage) state without writing back
+        // (onChange is still gated by _initDone), then allow user toggles.
+        try { app.ui.settings.setSettingValue("c2c.lite.enabled", LITE); } catch (_) {}
+        setTimeout(() => { _initDone = true; }, 800);
+        if (LITE) { try { console.log("%c[C2C.Lite] active — visual extras disabled for performance", "color:#8cf"); } catch (_) {} }
+    },
+});

js/_c2c_ui_kit.js

@@ -0,0 +1,145 @@
+// _c2c_ui_kit.js — shared LTX-quality design system for C2C/MEC node UIs.
+//
+// WHY: our node editors used ad-hoc inline styles and read as "canvas
+// sketches" next to LTX Director, which ships one consistent stylesheet
+// (pill buttons, floating-label panels, popover menus, sub-status pills,
+// hover/active transitions, a disciplined neutral-dark palette). This module
+// is that stylesheet, injected once and shared by every node, so the whole
+// pack looks like one finished pro tool.
+//
+// USAGE:
+//   import { ensureC2CKit } from "./_c2c_ui_kit.js";
+//   ensureC2CKit();                       // inject the stylesheet (idempotent)
+//   root.classList.add("c2ck");           // opt a subtree into the system
+//   btn.className = "c2ck-btn";           // then use the classes below
+//
+// The functional accent colours a node needs (skeleton=blue, iris=red, …)
+// stay the node's own business — the kit only styles the CHROME.
+//
+// License: Apache-2.0
+
+const KIT_ID = "c2ck-styles";
+
+const CSS = `
+.c2ck{--k-bg:#161616;--k-panel:#1e1e1e;--k-panel2:#222;--k-line:#111;--k-line2:#2c2c2c;
+  --k-fg:#e6e6e6;--k-dim:#8a8a8a;--k-dim2:#666;--k-acc:#5b9dd9;
+  font-family:ui-sans-serif,system-ui,-apple-system,sans-serif;color:var(--k-fg);box-sizing:border-box;}
+.c2ck *,.c2ck *::before,.c2ck *::after{box-sizing:border-box;}
+
+/* buttons */
+.c2ck-btn{background:var(--k-panel2);color:var(--k-fg);border:1px solid var(--k-line);border-radius:5px;
+  padding:5px 11px;font-size:11px;font-weight:500;cursor:pointer;display:inline-flex;align-items:center;gap:5px;
+  transition:background .15s ease,border-color .15s ease,transform .05s ease;}
+.c2ck-btn:hover:not(:disabled){background:#2e2e2e;border-color:#4a4a4a;}
+.c2ck-btn:active:not(:disabled){transform:translateY(1px);}
+.c2ck-btn:disabled{opacity:.45;cursor:not-allowed;}
+.c2ck-btn.on{background:#1c2733;border-color:#2f4a63;color:#cfe6ff;}
+.c2ck-btn-danger:hover:not(:disabled){background:#3a1717;border-color:#a44;color:#ffb4b4;}
+.c2ck-btn-icon{padding:5px 8px;font-size:12px;justify-content:center;min-width:28px;}
+.c2ck-sep{width:1px;align-self:stretch;background:var(--k-line2);margin:2px 3px;}
+.c2ck-select{background:var(--k-panel2);color:var(--k-fg);border:1px solid var(--k-line);border-radius:5px;
+  padding:4px 6px;font-size:11px;cursor:pointer;}
+
+/* toolbars / status */
+.c2ck-toolbar{display:flex;gap:5px;align-items:center;flex-wrap:wrap;}
+.c2ck-status{font:11px ui-monospace,monospace;color:var(--k-dim);letter-spacing:.2px;}
+
+/* panels + floating-label fields (the LTX .pr-prompt look) */
+.c2ck-panel{background:var(--k-panel);border:1px solid var(--k-line);border-radius:7px;position:relative;box-sizing:border-box;}
+.c2ck-fieldwrap{position:relative;width:100%;background:var(--k-panel);border:1px solid var(--k-line);border-radius:7px;
+  overflow:hidden;transition:border-color .2s ease;}
+.c2ck-fieldwrap:focus-within{border-color:#4d6a86;}
+.c2ck-flabel{position:absolute;top:6px;left:9px;font-size:9px;font-weight:700;color:var(--k-dim2);
+  text-transform:uppercase;letter-spacing:.6px;pointer-events:none;user-select:none;z-index:2;}
+.c2ck-fmeta{position:absolute;top:6px;right:9px;font:9px ui-monospace,monospace;color:var(--k-dim2);pointer-events:none;z-index:2;}
+.c2ck-area{width:100%;background:transparent;color:var(--k-fg);border:none;padding:22px 9px 9px;resize:none;
+  font-size:12px;line-height:1.45;outline:none;box-sizing:border-box;}
+.c2ck-area::placeholder{color:#555;}
+.c2ck-info{background:#191919;color:#bcbcbc;border:1px solid var(--k-line);border-radius:7px;padding:10px 11px;
+  font-size:11.5px;line-height:1.6;}
+.c2ck-info b,.c2ck-info .hi{color:#fff;font-weight:600;}
+.c2ck-itag{display:block;font-size:9px;font-weight:700;color:var(--k-dim2);text-transform:uppercase;
+  letter-spacing:.6px;margin-bottom:6px;}
+
+/* sub-status pill (LTX 'Inpaint: ON' / 'Audio: OFF') */
+.c2ck-pill{display:inline-flex;align-items:center;gap:4px;font-size:9px;font-weight:600;letter-spacing:.3px;
+  padding:2px 7px;border-radius:999px;background:#242424;border:1px solid var(--k-line2);color:var(--k-dim);}
+.c2ck-pill.on{background:#12251a;border-color:#1f5b3a;color:#7fe0a6;}
+.c2ck-pill.off{background:#251414;border-color:#5b2020;color:#e08a8a;}
+
+/* toggle chip */
+.c2ck-chip{font-size:10.5px;padding:3px 9px;border-radius:999px;cursor:pointer;border:1px solid var(--k-line2);
+  background:transparent;color:var(--k-dim);transition:background .12s ease,border-color .12s ease,color .12s ease;}
+.c2ck-chip:hover{border-color:#555;}
+
+/* popover menu (build per-open on document.body) */
+.c2ck-menu{position:fixed;z-index:2147483000;background:#1c1c1c;border:1px solid #333;border-radius:9px;padding:5px;
+  box-shadow:0 10px 30px rgba(0,0,0,.6);display:flex;flex-direction:column;gap:1px;min-width:176px;}
+.c2ck-menu-head{font-size:9px;font-weight:700;text-transform:uppercase;letter-spacing:.6px;color:var(--k-dim2);padding:5px 10px 3px;}
+.c2ck-menu-btn{display:flex;align-items:center;gap:9px;background:none;border:none;color:var(--k-fg);
+  font:12px ui-sans-serif,system-ui;text-align:left;padding:7px 10px;border-radius:6px;cursor:pointer;
+  transition:background .12s ease;width:100%;box-sizing:border-box;}
+.c2ck-menu-btn:hover:not(:disabled){background:#2c2c2c;}
+.c2ck-menu-btn:disabled{opacity:.4;cursor:not-allowed;}
+.c2ck-menu-btn .g{width:16px;text-align:center;flex:0 0 auto;color:#9aa;}
+.c2ck-menu-sep{height:1px;background:#2c2c2c;margin:3px 4px;}
+
+/* range inputs adopt the accent */
+.c2ck input[type=range]{accent-color:var(--k-acc);}
+`;
+
+/** Inject the shared stylesheet once. Safe to call from every node's setup. */
+export function ensureC2CKit() {
+    if (typeof document === "undefined") return;
+    if (document.getElementById(KIT_ID)) return;
+    const el = document.createElement("style");
+    el.id = KIT_ID;
+    el.textContent = CSS;
+    document.head.appendChild(el);
+}
+
+/**
+ * Build a floating-label popover menu on document.body (eclipse-proof:
+ * position:fixed, high z-index, dismiss on outside pointerdown/wheel). Returns
+ * a `dismiss()` you should also call from the node's teardown.
+ *
+ * items: [{ label, glyph?, onPick, disabled?, title? } | { sep:true }]
+ */
+export function popoverMenu(clientX, clientY, { head, items } = {}) {
+    ensureC2CKit();
+    const menu = document.createElement("div");
+    menu.className = "c2ck-menu";
+    if (head) {
+        const h = document.createElement("div");
+        h.className = "c2ck-menu-head";
+        h.textContent = head;
+        menu.appendChild(h);
+    }
+    for (const it of (items || [])) {
+        if (it.sep) { const s = document.createElement("div"); s.className = "c2ck-menu-sep"; menu.appendChild(s); continue; }
+        const b = document.createElement("button");
+        b.className = "c2ck-menu-btn";
+        b.innerHTML = `<span class="g">${it.glyph || ""}</span>${it.label}`;
+        if (it.disabled) { b.disabled = true; if (it.title) b.title = it.title; }
+        else b.addEventListener("pointerdown", (ev) => { ev.preventDefault(); ev.stopPropagation(); dismiss(); try { it.onPick?.(); } catch (_) {} });
+        menu.appendChild(b);
+    }
+    document.body.appendChild(menu);
+    const vw = window.innerWidth, vh = window.innerHeight, r = menu.getBoundingClientRect();
+    let px = clientX + 4, py = clientY - 6;
+    if (px + r.width > vw - 6) px = vw - r.width - 6;
+    if (py + r.height > vh - 6) py = vh - r.height - 6;
+    menu.style.left = Math.max(6, px) + "px";
+    menu.style.top = Math.max(6, py) + "px";
+    let onDoc = null;
+    function dismiss() {
+        try { menu.remove(); } catch (_) {}
+        if (onDoc) { document.removeEventListener("pointerdown", onDoc, true); document.removeEventListener("wheel", onDoc, true); onDoc = null; }
+    }
+    setTimeout(() => {
+        onDoc = (ev) => { if (!menu.contains(ev.target)) dismiss(); };
+        document.addEventListener("pointerdown", onDoc, true);
+        document.addEventListener("wheel", onDoc, true);
+    }, 0);
+    return { menu, dismiss };
+}

js/_editor_empty_state.js

@@ -0,0 +1,48 @@
+// _editor_empty_state.js — shared empty-state painter for the MEC canvas
+// editors (spline / points+bbox / tracker / paint).
+//
+// An empty editor used to render as a flat near-black void — no grid, no
+// invitation, nothing that tells a first-time user what to do (the Director
+// timeline's "+ add image — or drop a file" lanes set the quality bar).
+// This paints, in DOC space (ctx already panned/zoomed):
+//   1. a subtle dark checkerboard over the canvas rect (reads as "empty
+//      artboard", not "broken node"),
+//   2. a centered glyph + hint lines in muted slate.
+//
+// Colors are literal hex on purpose: canvas fillStyle cannot resolve
+// var(--x) (the all-black-confetti bug class).
+
+const CHECK_A = "#15151d";
+const CHECK_B = "#1a1a24";
+
+export function drawEditorEmptyState(ctx, w, h, z, glyph, lines) {
+    const zz = Math.max(0.05, z || 1);
+    ctx.save();
+    // Checkerboard (doc-space 24px tiles, clipped to the canvas rect)
+    ctx.beginPath();
+    ctx.rect(0, 0, w, h);
+    ctx.clip();
+    const tile = 24;
+    for (let y = 0; y < h; y += tile) {
+        for (let x = 0; x < w; x += tile) {
+            ctx.fillStyle = (((x + y) / tile) % 2 === 0) ? CHECK_A : CHECK_B;
+            ctx.fillRect(x, y, Math.min(tile, w - x), Math.min(tile, h - y));
+        }
+    }
+    // Centered glyph + hint lines (sized in screen px via 1/z)
+    const cx = w / 2, cy = h / 2;
+    ctx.textAlign = "center";
+    ctx.textBaseline = "middle";
+    ctx.fillStyle = "rgba(148,158,190,0.55)";
+    ctx.font = `${28 / zz}px system-ui, sans-serif`;
+    ctx.fillText(glyph || "✎", cx, cy - 26 / zz);
+    ctx.font = `600 ${13 / zz}px system-ui, sans-serif`;
+    ctx.fillStyle = "rgba(168,178,208,0.75)";
+    if (lines && lines.length) ctx.fillText(lines[0], cx, cy + 4 / zz);
+    ctx.font = `${11 / zz}px system-ui, sans-serif`;
+    ctx.fillStyle = "rgba(128,138,166,0.55)";
+    for (let i = 1; i < (lines?.length || 0); i++) {
+        ctx.fillText(lines[i], cx, cy + (4 + i * 18) / zz);
+    }
+    ctx.restore();
+}

js/c2c_node_bookmarks.js

@@ -1,7 +1,11 @@
-// c2c_node_bookmarks.js — Ctrl+B toggle bookmark, Ctrl+Shift+1..9 jump (C2C)
+// c2c_node_bookmarks.js — Alt+B toggle bookmark, Ctrl+Shift+1..9 jump (C2C)
 // ---------------------------------------------------------------------
+// NOTE: This shortcut deliberately does NOT use plain Ctrl+B (ComfyUI core
+// binds it to "Bypass selected nodes") NOR Ctrl+Alt+B (the C2C AI workflow
+// builder / "build workflow" owns that). So the bookmark toggle is Alt+B.
+//
 // What it does:
-//   • Ctrl+B on a selected node → adds/removes a bookmark slot (1..9).
+//   • Alt+B on a selected node → adds/removes a bookmark slot (1..9).
 //     Bookmark slot is auto-assigned to the lowest free index 1..9.
 //   • Ctrl+Shift+1..9 → pan + zoom to that bookmark, pulse the node.
 //   • Bookmarks persist in workflow JSON under
@@ -184,15 +188,24 @@ function isEditingField() {
 
 function onKey(ev) {
     if (isEditingField()) return;
-    if (!(ev.ctrlKey || ev.metaKey)) return;
-    // Ctrl+B → toggle bookmark on selected node
-    if ((ev.key === "b" || ev.key === "B") && !ev.shiftKey) {
+    // Respect the on/off setting — switching it OFF must also disable the
+    // keyboard shortcuts. (Previously only the strip was hidden in render();
+    // this handler ignored the setting, so Ctrl+B still fired — the
+    // "bookmark won't switch off" bug.)
+    try {
+        if (app.ui?.settings?.getSettingValue?.(SETTING_ID, true) === false) return;
+    } catch { /* settings not ready */ }
+    // Alt+B (NO Ctrl/Meta/Shift) → toggle bookmark on selected node.
+    // Moved off Ctrl+Alt+B because that collided with the AI workflow builder
+    // ("build workflow"). ev.code is layout-independent and unaffected by Alt
+    // (Alt+b can change ev.key on some OSes).
+    if (ev.altKey && !ev.ctrlKey && !ev.metaKey && !ev.shiftKey && ev.code === "KeyB") {
         ev.preventDefault();
         toggleBookmark();
         return;
     }
     // Ctrl+Shift+1..9 → jump to slot
-    if (ev.shiftKey && /^[1-9]$/.test(ev.key)) {
+    if ((ev.ctrlKey || ev.metaKey) && ev.shiftKey && /^[1-9]$/.test(ev.key)) {
         ev.preventDefault();
         jumpToSlot(ev.key);
     }
@@ -204,7 +217,7 @@ app.registerExtension({
         try {
             app.ui.settings.addSetting({
                 id: SETTING_ID,
-                name: "Node bookmarks strip (Ctrl+B, Ctrl+Shift+1..9)",
+                name: "Node bookmarks strip (Alt+B, Ctrl+Shift+1..9)",
                 type: "boolean", defaultValue: true,
                 category: ["c2c", "Overlays", "Bookmarks"],
                 onChange: render,