js-kompo-utils 1.0.13 → 1.0.15

package/tutorials/modules/Cursor.js

@@ -9,6 +9,14 @@ gsap.registerPlugin(MotionPathPlugin);
 const DEFAULT_CURSOR_SIZE = 'clamp(32px, 8vw, 48px)';
 const DEFAULT_SVG_PATH = 'M 0,0 C 0.3,0.1 0.7,0.9 1,1';
 
+// Inline SVG cursor as data URI fallback when no image is configured
+const FALLBACK_CURSOR_SVG = 'data:image/svg+xml,' + encodeURIComponent(
+    '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 32 32" width="32" height="32">'
+    + '<path d="M5 2 L5 26 L11.5 19.5 L17 29 L21 27 L15.5 17.5 L24 17.5 Z" '
+    + 'fill="white" stroke="#333" stroke-width="1.5" stroke-linejoin="round"/>'
+    + '</svg>'
+);
+
 /**
  * Cursor module: animated cursor element using GSAP MotionPathPlugin.
  */
@@ -27,16 +35,18 @@ export class Cursor {
      */
     create(cfg = {}, isMobile = false) {
         let cursorEl;
+        const configImage = this.engine?.config?.get('cursorImage');
+        const configSize = this.engine?.config?.get('cursorSize') || DEFAULT_CURSOR_SIZE;
 
         if (isMobile) {
             cursorEl = document.createElement('div');
             cursorEl.className = 'tutorial-cursor tutorial-cursor--mobile';
         } else {
             cursorEl = document.createElement('img');
-            cursorEl.src = cfg.image || '/images/tutorial-cursor.svg';
+            cursorEl.src = cfg.image || configImage || FALLBACK_CURSOR_SVG;
             cursorEl.className = 'tutorial-cursor';
-            cursorEl.style.width = DEFAULT_CURSOR_SIZE;
-            cursorEl.style.height = DEFAULT_CURSOR_SIZE;
+            cursorEl.style.width = configSize;
+            cursorEl.style.height = configSize;
         }
 
         document.body.appendChild(cursorEl);
@@ -269,6 +279,13 @@ export class Cursor {
         };
     }
 
+    _hexToRgba(hex, alpha) {
+        const r = parseInt(hex.slice(1, 3), 16);
+        const g = parseInt(hex.slice(3, 5), 16);
+        const b = parseInt(hex.slice(5, 7), 16);
+        return `rgba(${r}, ${g}, ${b}, ${alpha})`;
+    }
+
     /**
      * Create a click-pulse visual effect at the given coordinates.
      * @param {number} x
@@ -287,7 +304,10 @@ export class Cursor {
         ring.className = 'tutorial-pulse-ring';
         ring.style.left = x + 'px';
         ring.style.top = y + 'px';
-        ring.style.backgroundColor = `rgba(255, 68, 68, ${bgOpacity})`;
+        const configColor = this.engine?.config?.get('pulseColor');
+        const devMode = this.engine?.config?.get('devMode');
+        const baseColor = configColor || (devMode ? '#4a6cf7' : '#ff4444');
+        ring.style.backgroundColor = this._hexToRgba(baseColor, bgOpacity);
         ring.style.setProperty('--pulse-scale', String(scale));
         ring.style.setProperty('--pulse-duration', duration + 's');
         ring.style.setProperty('--pulse-delay', delay + 's');

package/tutorials/modules/Highlight.js

@@ -69,7 +69,7 @@ function buildHighlightPathData(groups, padding, radius) {
  * @param {{ x, y, w, h, r }} cr
  * @returns {SVGRectElement}
  */
-function createBorderRect(cr) {
+function createBorderRect(cr, color) {
     return createSvgEl('rect', {
         x: cr.x,
         y: cr.y,
@@ -77,7 +77,7 @@ function createBorderRect(cr) {
         height: cr.h,
         rx: cr.r,
         fill: 'none',
-        stroke: '#ffd700',
+        stroke: color,
         'stroke-width': '2',
     });
 }
@@ -186,7 +186,7 @@ export class Highlight {
         this._generation++;
         const gen = this._generation;
         const padding = config.padding || 8;
-        const radius = config.borderRadius || 8;
+        const radius = config.borderRadius ?? this.engine.config.get('highlightBorderRadius') ?? 8;
         const blockOutside = config.blockOutside || false;
 
         this._cancelStability = waitForStableHighlight(config, () => {
@@ -230,8 +230,10 @@ export class Highlight {
         });
         this.svgEl.appendChild(this.pathEl);
 
+        const highlightColor = this.engine.config.get('highlightColor') || '#ffd700';
+        this._highlightColor = highlightColor;
         for (const cr of result.rects) {
-            this.svgEl.appendChild(createBorderRect(cr));
+            this.svgEl.appendChild(createBorderRect(cr, highlightColor));
         }
 
         document.body.appendChild(this.svgEl);
@@ -264,7 +266,7 @@ export class Highlight {
             border.remove();
         }
         for (const cr of result.rects) {
-            this.svgEl.appendChild(createBorderRect(cr));
+            this.svgEl.appendChild(createBorderRect(cr, this._highlightColor || '#ffd700'));
         }
     }
 

package/tutorials/modules/HoverForcer.js

@@ -236,6 +236,7 @@ export class HoverForcer {
             }
             el.classList.remove(FORCE_HOVER_CLASS);
             el.dispatchEvent(new MouseEvent('mouseleave', { bubbles: true }));
+            el.dispatchEvent(new MouseEvent('mouseout', { bubbles: true }));
         }
         this.forcedElements.clear();
 

package/tutorials/modules/Overlay.js

@@ -41,6 +41,8 @@ export class Overlay {
         this.el.setAttribute('aria-modal', 'true');
         this.el.setAttribute('aria-label', 'Tutorial');
         this.el.style.backgroundColor = 'rgba(0,0,0,0.5)'; // Default dark, setMode() toggles
+        this.el.style.overscrollBehavior = 'contain';
+        this.el.style.touchAction = 'none';
 
         document.body.appendChild(this.el);
         document.body.style.overflow = 'hidden';

package/tutorials/step-builder/StepBuilderState.js

@@ -0,0 +1,265 @@
+// StepBuilderState.js — Framework-agnostic state management for Step Builder
+// Handles steps CRUD, undo/redo, screenshots, and change detection.
+
+var DEFAULT_STEP = { html: '', overlay: true, position: 'left', align: 'center' };
+
+export class StepBuilderState {
+
+    constructor() {
+        this.steps = [JSON.parse(JSON.stringify(DEFAULT_STEP))];
+        this.idx = 0;
+        this.undoStack = [];
+        this.redoStack = [];
+        this.maxUndoSize = 50;
+        this.screenshots = {};
+        this.originalSteps = JSON.parse(JSON.stringify(this.steps));
+        this._listeners = {};
+        this._version = 0;
+    }
+
+    // --------------- Event Bus ---------------
+
+    on(event, cb) {
+        if (!this._listeners[event]) this._listeners[event] = [];
+        this._listeners[event].push(cb);
+    }
+
+    off(event, cb) {
+        if (!this._listeners[event]) return;
+        this._listeners[event] = this._listeners[event].filter(function(fn) { return fn !== cb; });
+    }
+
+    emit(event, data) {
+        if (!this._listeners[event]) return;
+        this._listeners[event].forEach(function(cb) {
+            try { cb(data); } catch (e) { console.warn('StepBuilderState event error:', event, e); }
+        });
+    }
+
+    // --------------- Init ---------------
+
+    init(steps) {
+        var cloned = JSON.parse(JSON.stringify(steps));
+        // Replace contents in-place so external references stay valid
+        this.steps.length = 0;
+        for (var i = 0; i < cloned.length; i++) this.steps.push(cloned[i]);
+        this.originalSteps = JSON.parse(JSON.stringify(this.steps));
+        this.idx = 0;
+        this.undoStack = [];
+        this.redoStack = [];
+        this.screenshots = {};
+        this._version++;
+    }
+
+    // --------------- Getters ---------------
+
+    get step() {
+        return this.steps[this.idx] || {};
+    }
+
+    get canUndo() {
+        return this.undoStack.length > 0;
+    }
+
+    get canRedo() {
+        return this.redoStack.length > 0;
+    }
+
+    get undoLabels() {
+        return this.undoStack.map(function(e) { return { label: e.label, time: e.time }; });
+    }
+
+    get redoLabels() {
+        return this.redoStack.map(function(e) { return { label: e.label, time: e.time }; });
+    }
+
+    // --------------- Undo / Redo ---------------
+
+    /**
+     * Call before field edits to record undo state.
+     * Debounced: rapid edits (typing) only snapshot once per second.
+     */
+    beginEdit(label) {
+        if (this._editActive) return;
+        this._pushUndo(label);
+        this._editActive = true;
+        clearTimeout(this._editTimer);
+        this._editTimer = setTimeout(() => { this._editActive = false; }, 1000);
+    }
+
+    _pushUndo(label) {
+        this.undoStack.push({
+            snapshot: JSON.parse(JSON.stringify(this.steps)),
+            label: label || 'Change',
+            time: Date.now(),
+        });
+        if (this.undoStack.length > this.maxUndoSize) this.undoStack.shift();
+        this.redoStack = [];
+        this.emit('undo-changed', { undoSize: this.undoStack.length, redoSize: 0 });
+    }
+
+    undo() {
+        if (!this.undoStack.length) return;
+
+        // Push current state to redo
+        this.redoStack.push({
+            snapshot: JSON.parse(JSON.stringify(this.steps)),
+            label: this.undoStack[this.undoStack.length - 1].label,
+            time: Date.now(),
+        });
+
+        var entry = this.undoStack.pop();
+
+        // Replace steps in-place
+        this.steps.length = 0;
+        for (var i = 0; i < entry.snapshot.length; i++) this.steps.push(entry.snapshot[i]);
+
+        // Clamp idx
+        this.idx = Math.min(this.idx, this.steps.length - 1);
+        this._version++;
+        this.emit('state-restored');
+        this.emit('undo-changed', { undoSize: this.undoStack.length, redoSize: this.redoStack.length });
+    }
+
+    redo() {
+        if (!this.redoStack.length) return;
+
+        // Push current state to undo
+        this.undoStack.push({
+            snapshot: JSON.parse(JSON.stringify(this.steps)),
+            label: this.redoStack[this.redoStack.length - 1].label,
+            time: Date.now(),
+        });
+
+        var entry = this.redoStack.pop();
+
+        // Replace steps in-place
+        this.steps.length = 0;
+        for (var i = 0; i < entry.snapshot.length; i++) this.steps.push(entry.snapshot[i]);
+
+        // Clamp idx
+        this.idx = Math.min(this.idx, this.steps.length - 1);
+        this._version++;
+        this.emit('state-restored');
+        this.emit('undo-changed', { undoSize: this.undoStack.length, redoSize: this.redoStack.length });
+    }
+
+    // --------------- Step CRUD ---------------
+
+    selectStep(i) {
+        this.idx = Math.max(0, Math.min(i, this.steps.length - 1));
+        this._version++;
+        this.emit('step-selected', { index: this.idx });
+    }
+
+    addStep(afterIndex, branch) {
+        this._pushUndo('Add step after #' + afterIndex);
+        var newStep = JSON.parse(JSON.stringify(DEFAULT_STEP));
+        if (branch) newStep._branch = branch;
+        this.steps.splice(afterIndex + 1, 0, newStep);
+        this.idx = afterIndex + 1;
+        this._version++;
+        this.emit('step-added', { index: this.idx });
+    }
+
+    deleteStep(index) {
+        if (this.steps.length <= 1) return;
+        this._pushUndo('Delete step #' + index);
+
+        // Remap screenshots — shift indices above deleted down by 1
+        var newScreenshots = {};
+        var keys = Object.keys(this.screenshots);
+        for (var k = 0; k < keys.length; k++) {
+            var i = parseInt(keys[k], 10);
+            if (i < index) newScreenshots[i] = this.screenshots[i];
+            else if (i > index) newScreenshots[i - 1] = this.screenshots[i];
+            // i === index is dropped
+        }
+        this.screenshots = newScreenshots;
+
+        this.steps.splice(index, 1);
+        this.idx = Math.min(index, this.steps.length - 1);
+        this._version++;
+        this.emit('step-removed', { index: index });
+    }
+
+    duplicateStep(index) {
+        this._pushUndo('Duplicate step #' + index);
+        var clone = JSON.parse(JSON.stringify(this.steps[index]));
+        this.steps.splice(index + 1, 0, clone);
+        this.idx = index + 1;
+        this._version++;
+        this.emit('step-added', { index: this.idx });
+    }
+
+    moveStep(fromIndex, toIndex) {
+        if (fromIndex === toIndex) return;
+        this._pushUndo('Move step #' + fromIndex + ' → #' + toIndex);
+
+        var step = this.steps.splice(fromIndex, 1)[0];
+        this.steps.splice(toIndex, 0, step);
+
+        // Remap screenshots
+        var newScreenshots = {};
+        var keys = Object.keys(this.screenshots);
+        for (var k = 0; k < keys.length; k++) {
+            var i = parseInt(keys[k], 10);
+            var newIdx = i;
+            if (i === fromIndex) {
+                newIdx = toIndex;
+            } else if (fromIndex < toIndex && i > fromIndex && i <= toIndex) {
+                newIdx = i - 1;
+            } else if (fromIndex > toIndex && i >= toIndex && i < fromIndex) {
+                newIdx = i + 1;
+            }
+            newScreenshots[newIdx] = this.screenshots[i];
+        }
+        this.screenshots = newScreenshots;
+
+        this.idx = toIndex;
+        this._version++;
+        this.emit('step-moved', { from: fromIndex, to: toIndex });
+    }
+
+    // --------------- Screenshots ---------------
+
+    setScreenshot(index, dataUrl) {
+        this.screenshots[index] = dataUrl;
+        this.emit('screenshot-updated', { index: index });
+    }
+
+    getScreenshot(index) {
+        return this.screenshots[index] || null;
+    }
+
+    // --------------- Change Detection ---------------
+
+    hasStepChanged(index) {
+        var orig = this.originalSteps[index];
+        var curr = this.steps[index];
+        if (!orig || !curr) return true;
+
+        var allKeys = {};
+        Object.keys(orig).forEach(function(k) { allKeys[k] = true; });
+        Object.keys(curr).forEach(function(k) { allKeys[k] = true; });
+
+        var keys = Object.keys(allKeys);
+        for (var i = 0; i < keys.length; i++) {
+            var k = keys[i];
+            // Skip internal builder properties except _branch
+            if (k.charAt(0) === '_' && k !== '_branch') continue;
+
+            var a = orig[k];
+            var b = curr[k];
+
+            // Treat undefined, null, and empty arrays as equivalent "empty" values
+            var aEmpty = a === undefined || a === null || (Array.isArray(a) && a.length === 0);
+            var bEmpty = b === undefined || b === null || (Array.isArray(b) && b.length === 0);
+            if (aEmpty && bEmpty) continue;
+
+            if (JSON.stringify(a) !== JSON.stringify(b)) return true;
+        }
+
+        return false;
+    }
+}

package/tutorials/tutorial.scss

@@ -840,3 +840,189 @@
         font-size: 12px;
     }
 }
+
+// ─── Step Builder ───
+.sb-wrapper {
+    position: fixed;
+    top: 0;
+    right: 0;
+    height: 100vh;
+    z-index: 99997;
+    display: flex;
+    flex-direction: row-reverse;
+}
+.sb {
+    width: 420px;
+    height: 100vh;
+    background: linear-gradient(170deg, #1e1e2e 0%, #161625 100%);
+    color: #e0e4ec;
+    font-family: system-ui, -apple-system, sans-serif;
+    font-size: 13px;
+    line-height: 1.5;
+    display: flex;
+    flex-direction: column;
+    border-left: 1px solid rgba(255,255,255,0.06);
+    box-shadow: -4px 0 24px rgba(0,0,0,0.4);
+    outline: none;
+    flex-shrink: 0;
+}
+.sb * { box-sizing: border-box; }
+
+// Resize handle
+.sb-resize { position: absolute; width: 6px; top: 0; bottom: 0; left: 0; cursor: ew-resize; z-index: 2; }
+.sb-resize:hover { background: rgba(108,138,255,0.2); }
+
+// Header
+.sb-header { height: 44px; min-height: 44px; padding: 0 14px; display: flex; align-items: center; gap: 8px; border-bottom: 1px solid rgba(255,255,255,0.06); background: rgba(255,255,255,0.02); }
+.sb-header-title { font-size: 14px; font-weight: 700; flex: 1; }
+.sb-hbtn { background: none; border: 1px solid rgba(255,255,255,0.1); color: #aaa; border-radius: 6px; width: 28px; height: 28px; cursor: pointer; display: flex; align-items: center; justify-content: center; font-size: 14px; transition: all 0.15s; }
+.sb-hbtn:hover { background: rgba(255,255,255,0.08); color: #fff; }
+.sb-hbtn--danger:hover { color: #e74c3c; border-color: #e74c3c; }
+
+// Steps
+.sb-steps { border-bottom: 1px solid rgba(255,255,255,0.06); padding: 8px 14px; flex-shrink: 0; }
+.sb-steps-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
+.sb-steps-count { font-size: 11px; font-weight: 600; color: #7a7f8e; text-transform: uppercase; letter-spacing: 0.3px; }
+.sb-steps-list { max-height: 200px; overflow-y: auto; }
+.sb-step { display: flex; align-items: center; gap: 6px; padding: 5px 8px; border-radius: 6px; cursor: pointer; transition: background 0.15s; border: 1px solid transparent; }
+.sb-step:hover { background: rgba(108,138,255,0.1); }
+.sb-step--active { background: rgba(108,138,255,0.2); border-color: rgba(108,138,255,0.3); }
+.sb-step-num { width: 22px; height: 22px; border-radius: 50%; background: rgba(255,255,255,0.08); display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; flex-shrink: 0; }
+.sb-step--active .sb-step-num { background: #6c8aff; color: #fff; }
+.sb-step-text { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: #b0b4c0; font-size: 12px; }
+.sb-step-icons { display: flex; gap: 3px; font-size: 11px; color: #7a7f8e; flex-shrink: 0; }
+.sb-step-actions { display: flex; gap: 4px; margin-top: 6px; }
+
+// Detail zone
+.sb-detail { flex: 1; overflow-y: auto; padding: 8px 14px; }
+.sb-detail::-webkit-scrollbar { width: 5px; }
+.sb-detail::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 3px; }
+
+// Cards
+.sb-card { background: rgba(255,255,255,0.02); border: 1px solid rgba(255,255,255,0.06); border-radius: 8px; margin-bottom: 6px; overflow: hidden; }
+.sb-card--open { background: rgba(255,255,255,0.04); }
+.sb-card-head { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; cursor: pointer; user-select: none; font-size: 11px; font-weight: 600; color: #6c8aff; text-transform: uppercase; letter-spacing: 0.3px; }
+.sb-card-head:hover { background: rgba(255,255,255,0.03); }
+.sb-chevron { font-size: 10px; color: #555; }
+.sb-card-body { padding: 8px 12px 12px; }
+
+// Inputs
+.sb-input { background: rgba(255,255,255,0.06); color: #e0e4ec; border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; padding: 7px 10px; font-size: 13px; font-family: inherit; outline: none; width: 100%; transition: border-color 0.2s; }
+.sb-input:focus { border-color: #6c8aff; box-shadow: 0 0 0 2px rgba(108,138,255,0.15); }
+.sb-input--num { width: 72px; }
+.sb-input--sm { width: auto; min-width: 80px; }
+.sb-textarea { resize: vertical; min-height: 60px; font-family: "Fira Code", monospace; font-size: 12px; }
+select.sb-input { cursor: pointer; appearance: none; padding-right: 24px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%23888'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 8px center; }
+
+// Labels, rows
+.sb-lbl { font-size: 11px; color: #7a7f8e; min-width: 50px; flex-shrink: 0; text-transform: uppercase; letter-spacing: 0.3px; margin-bottom: 4px; display: block; }
+.sb-row { display: flex; gap: 6px; align-items: center; margin-bottom: 8px; }
+.sb-row--pick .sb-input { flex: 1; }
+.sb-check { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: #b0b4c0; cursor: pointer; margin-right: 12px; }
+.sb-check input[type="checkbox"] { width: 16px; height: 16px; accent-color: #6c8aff; cursor: pointer; }
+
+// Pick button
+.sb-pick { background: rgba(108,138,255,0.15); color: #6c8aff; border: 1px solid rgba(108,138,255,0.3); border-radius: 6px; padding: 6px 10px; font-size: 11px; font-weight: 600; cursor: pointer; white-space: nowrap; transition: all 0.15s; }
+.sb-pick:hover { background: rgba(108,138,255,0.25); }
+.sb-pick--danger { background: rgba(231,76,60,0.15); color: #e74c3c; border-color: rgba(231,76,60,0.3); }
+.sb-pick--danger:hover { background: rgba(231,76,60,0.25); }
+
+// Buttons
+.sb-btn { border: none; border-radius: 6px; cursor: pointer; font-size: 12px; font-weight: 600; padding: 6px 12px; transition: all 0.15s; font-family: inherit; white-space: nowrap; }
+.sb-btn:hover { filter: brightness(1.15); }
+.sb-btn-sm { padding: 4px 8px; font-size: 11px; }
+.sb-btn-green { background: #2ecc71; color: #fff; }
+.sb-btn-ghost { background: rgba(255,255,255,0.06); color: #ccc; border: 1px solid rgba(255,255,255,0.1); }
+.sb-btn-ghost:hover { background: rgba(255,255,255,0.12); }
+
+// Options row
+.sb-opt-row { display: flex; gap: 6px; align-items: center; padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
+.sb-opt-row .sb-input { flex: 1; }
+
+// Code output
+.sb-code { background: rgba(0,0,0,0.3); color: #8bc78b; padding: 10px 12px; border-radius: 6px; font-family: "Fira Code", monospace; font-size: 10px; line-height: 1.6; overflow: auto; max-height: 200px; white-space: pre-wrap; border: 1px solid rgba(255,255,255,0.04); }
+
+// Undo/Redo buttons
+.sb-hbtn:disabled { opacity: 0.3; cursor: default; }
+.sb-hbtn:disabled:hover { background: none; color: #aaa; }
+
+// History drawer
+.sb-history-drawer { width: 0; height: 100vh; background: linear-gradient(170deg, #1e1e2e, #161625); border-right: 1px solid rgba(255,255,255,0.08); transition: width 0.25s ease; overflow: hidden; flex-shrink: 0; }
+.sb-history-drawer--open { width: 240px; overflow-y: auto; }
+.sb-history-header { padding: 10px 12px; display: flex; align-items: center; justify-content: space-between; border-bottom: 1px solid rgba(255,255,255,0.06); font-size: 12px; font-weight: 600; color: #6c8aff; }
+.sb-history-list { padding: 6px; }
+.sb-history-item { display: flex; align-items: center; gap: 6px; padding: 6px 8px; border-radius: 6px; cursor: pointer; font-size: 11px; color: #b0b4c0; transition: background 0.15s; }
+.sb-history-item:hover { background: rgba(108,138,255,0.1); }
+.sb-history-item--current { color: #6c8aff; font-weight: 600; cursor: default; }
+.sb-history-item--current::before { content: ''; width: 8px; height: 8px; border-radius: 50%; background: #6c8aff; flex-shrink: 0; }
+.sb-history-label { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.sb-history-time { font-size: 9px; color: #7a7f8e; flex-shrink: 0; }
+
+// Drag & Drop
+.sb-step--drag-over { border-color: #6c8aff; background: rgba(108,138,255,0.15); }
+
+// Context menu
+.sb-context-menu { position: fixed; z-index: 100010; background: linear-gradient(170deg, #2a2a3d, #1e1e2e); border: 1px solid rgba(255,255,255,0.1); border-radius: 10px; padding: 4px; min-width: 160px; box-shadow: 0 8px 30px rgba(0,0,0,0.5); font-size: 12px; }
+.sb-ctx-item { padding: 6px 12px; border-radius: 6px; cursor: pointer; color: #b0b4c0; transition: background 0.1s; }
+.sb-ctx-item:hover { background: rgba(255,255,255,0.06); }
+.sb-ctx-item--green { color: #2ecc71; }
+.sb-ctx-item--red { color: #e74c3c; }
+.sb-ctx-item--disabled { opacity: 0.3; pointer-events: none; }
+.sb-ctx-sep { height: 1px; background: rgba(255,255,255,0.06); margin: 3px 8px; }
+
+// Branch tabs
+.sb-branch-tabs { display: flex; gap: 4px; margin-bottom: 6px; flex-wrap: wrap; }
+.sb-branch-tab { font-size: 10px; padding: 2px 8px; border-radius: 4px; cursor: pointer; color: #7a7f8e; border-bottom: 2px solid transparent; transition: all 0.15s; }
+.sb-branch-tab:hover { color: #e0e4ec; }
+.sb-branch-tab--active { color: #e0e4ec; background: rgba(255,255,255,0.06); }
+
+// Branch bar on step items
+.sb-step-branch-bar { width: 3px; height: 18px; border-radius: 2px; flex-shrink: 0; }
+
+// Modified dot
+.sb-step-modified { color: #f1c40f; font-size: 8px; }
+
+// Waypoint rows
+.sb-wp-row { padding: 6px 0; border-bottom: 1px solid rgba(255,255,255,0.04); }
+
+// Anchor badge
+.sb-badge { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-family: "Fira Code", monospace; background: rgba(108,138,255,0.15); color: #6c8aff; }
+
+// Color input
+.sb-color-input { width: 36px; height: 36px; border: 1px solid rgba(255,255,255,0.1); border-radius: 6px; padding: 2px; cursor: pointer; background: transparent; }
+
+@media (max-width: 600px) {
+    .sb { width: 100vw; }
+}
+
+// ─── Timeline ───
+.sb-timeline { border-top: 1px solid rgba(255,255,255,0.06); flex-shrink: 0; padding: 6px 14px; }
+.sb-timeline-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 4px; }
+.sb-timeline-strip { display: flex; gap: 6px; overflow-x: auto; padding: 4px 0; }
+.sb-timeline-strip::-webkit-scrollbar { height: 4px; }
+.sb-timeline-strip::-webkit-scrollbar-thumb { background: rgba(255,255,255,0.1); border-radius: 2px; }
+.sb-timeline-thumb { position: relative; width: 70px; height: 52px; border-radius: 6px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.08); cursor: pointer; overflow: hidden; flex-shrink: 0; }
+.sb-timeline-thumb.sb-active { border-color: #6c8aff; }
+.sb-timeline-thumb-img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0.5; }
+.sb-timeline-thumb-num { position: absolute; top: 2px; left: 4px; font-size: 9px; font-weight: 700; color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,0.5); }
+.sb-timeline-capture { position: absolute; bottom: 2px; right: 2px; font-size: 10px; background: none; border: none; cursor: pointer; opacity: 0; transition: opacity 0.15s; padding: 2px; color: #ccc; }
+.sb-timeline-thumb:hover .sb-timeline-capture { opacity: 0.7; }
+.sb-timeline-thumb-icons { position: absolute; bottom: 2px; left: 4px; display: flex; gap: 2px; font-size: 9px; color: #7a7f8e; }
+.sb-timeline-modified { position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: #f1c40f; }
+
+// ─── Path Preview ───
+.sb-path-preview { position: fixed; top: 0; left: 0; width: 100%; height: 100%; pointer-events: none; z-index: 99996; }
+
+// ─── Graph View ───
+.sb-graph-modal { position: fixed; inset: 0; z-index: 100000; background: rgba(10,10,20,0.92); backdrop-filter: blur(6px); display: flex; flex-direction: column; font-family: system-ui, -apple-system, sans-serif; outline: none; }
+.sb-graph-header { display: flex; align-items: center; padding: 12px 20px; border-bottom: 1px solid rgba(255,255,255,0.08); flex-shrink: 0; }
+.sb-graph-title { font-size: 16px; font-weight: 700; color: #e0e4ec; flex: 1; }
+.sb-graph-container { flex: 1; overflow: auto; position: relative; }
+.sb-graph-arrows { position: absolute; top: 0; left: 0; pointer-events: none; }
+.sb-graph-node { position: absolute; width: 160px; height: 72px; border-radius: 8px; background: rgba(255,255,255,0.04); border: 1px solid rgba(255,255,255,0.1); cursor: pointer; display: flex; flex-direction: column; justify-content: center; padding: 8px 10px 8px 16px; transition: all 0.15s; overflow: hidden; }
+.sb-graph-node:hover { background: rgba(108,138,255,0.1); border-color: rgba(108,138,255,0.3); }
+.sb-graph-node--active { background: rgba(108,138,255,0.2); border-color: #6c8aff; }
+.sb-graph-node-branch { position: absolute; left: 0; top: 0; bottom: 0; width: 4px; }
+.sb-graph-node-num { font-size: 10px; font-weight: 700; color: #6c8aff; }
+.sb-graph-node-text { font-size: 11px; color: #b0b4c0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.sb-graph-node-icons { font-size: 10px; color: #7a7f8e; display: flex; gap: 3px; }