js-kompo-utils 1.0.0

package/components/VlTutorialStepBuilder.vue

@@ -0,0 +1,671 @@
+<template>
+    <div v-show="visible" class="sb" @keydown.left.prevent="prevStep" @keydown.right.prevent="nextStep" tabindex="0">
+        <div class="sb-resize" @mousedown="startResize"></div>
+
+        <!-- Header -->
+        <div class="sb-header">
+            <span class="sb-header-title">Step Builder</span>
+            <button class="sb-hbtn" title="Spectator" @click="spectatorMode">&#9654;</button>
+            <button class="sb-hbtn" title="Copy All" @click="copyAll">&#128203;</button>
+            <button class="sb-hbtn" title="Close" @click="visible = false">&times;</button>
+        </div>
+
+        <!-- Step List -->
+        <div class="sb-steps">
+            <div class="sb-steps-bar">
+                <span class="sb-steps-count">STEPS ({{ steps.length }})</span>
+                <button class="sb-btn sb-btn-sm sb-btn-green" @click="addStep">+</button>
+            </div>
+            <div class="sb-steps-list">
+                <div v-for="(s, i) in steps" :key="i"
+                     class="sb-step" :class="{ 'sb-step--active': i === idx }"
+                     @click="selectStep(i)">
+                    <span class="sb-step-num">{{ i }}</span>
+                    <span class="sb-step-text">{{ stepPreview(s) }}</span>
+                    <span class="sb-step-icons">
+                        <span v-if="s.cursor" title="cursor">&#8982;</span>
+                        <span v-if="s.highlight" title="highlight">&#9734;</span>
+                        <span v-if="s.options" title="options">&#8230;</span>
+                    </span>
+                </div>
+            </div>
+            <div class="sb-step-actions">
+                <button class="sb-hbtn" @click="moveStepUp" title="Move up">&#8593;</button>
+                <button class="sb-hbtn" @click="moveStepDown" title="Move down">&#8595;</button>
+                <button class="sb-hbtn" @click="duplicateStep" title="Duplicate">&#8916;</button>
+                <button class="sb-hbtn sb-hbtn--danger" @click="deleteStep" title="Delete">&#10005;</button>
+            </div>
+        </div>
+
+        <!-- Detail Zone -->
+        <div class="sb-detail">
+
+            <!-- Content -->
+            <div class="sb-card" :class="{ 'sb-card--open': cards.content }">
+                <div class="sb-card-head" @click="toggle('content')">
+                    <span>CONTENT</span>
+                    <span class="sb-chevron">{{ cards.content ? '&#9660;' : '&#9654;' }}</span>
+                </div>
+                <div v-show="cards.content" class="sb-card-body">
+                    <label class="sb-lbl">HTML / Key</label>
+                    <textarea v-model="step.html" class="sb-input sb-textarea" rows="3"></textarea>
+                    <div class="sb-row">
+                        <label class="sb-check"><input type="checkbox" v-model="step.overlay"> overlay</label>
+                        <label class="sb-check"><input type="checkbox" v-model="showBack"> showBack</label>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Position -->
+            <div class="sb-card" :class="{ 'sb-card--open': cards.position }">
+                <div class="sb-card-head" @click="toggle('position')">
+                    <span>POSITION</span>
+                    <span class="sb-chevron">{{ cards.position ? '&#9660;' : '&#9654;' }}</span>
+                </div>
+                <div v-show="cards.position" class="sb-card-body">
+                    <div class="sb-row">
+                        <label class="sb-lbl">Position</label>
+                        <select v-model="step.position" @change="previewNow()" class="sb-input">
+                            <option value="left">Left of avatar</option>
+                            <option value="right">Right of avatar</option>
+                            <option value="top">Above avatar</option>
+                            <option value="bottom">Below avatar</option>
+                            <option value="custom">Custom (manual)</option>
+                        </select>
+                    </div>
+                    <!-- Custom position: free left/top values -->
+                    <template v-if="step.position === 'custom'">
+                        <div class="sb-row">
+                            <label class="sb-lbl">Left</label>
+                            <input v-model="step.bubbleLeft" @input="previewNow()" class="sb-input" placeholder="e.g. 50%, 300px, 20vw">
+                        </div>
+                        <div class="sb-row">
+                            <label class="sb-lbl">Top</label>
+                            <input v-model="step.bubbleTop" @input="previewNow()" class="sb-input" placeholder="e.g. 50%, 200px, 30vh">
+                        </div>
+                    </template>
+                    <div class="sb-row">
+                        <label class="sb-lbl">Align</label>
+                        <select v-model="step.align" @change="previewNow()" class="sb-input">
+                            <option value="left">Left</option>
+                            <option value="center">Center</option>
+                            <option value="right">Right</option>
+                        </select>
+                    </div>
+                    <!-- Avatar size override -->
+                    <div class="sb-row">
+                        <label class="sb-lbl">Avatar Size</label>
+                        <input v-model="step.avatarSize" @input="applyAvatarSize()" class="sb-input" placeholder="e.g. 200px, 30vh (empty = default)">
+                    </div>
+                    <label class="sb-check"><input type="checkbox" v-model="chatMode" @change="previewNow()"> Chat Mode</label>
+                    <div class="sb-row sb-row--pick">
+                        <label class="sb-lbl">Target</label>
+                        <input v-model="step.positionTarget" class="sb-input" placeholder="CSS selector">
+                        <button class="sb-pick" @click="pick('positionTarget')">Pick</button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Cursor -->
+            <div class="sb-card" :class="{ 'sb-card--open': cards.cursor }">
+                <div class="sb-card-head" @click="toggle('cursor')">
+                    <span>CURSOR</span>
+                    <span class="sb-chevron">{{ cards.cursor ? '&#9660;' : '&#9654;' }}</span>
+                </div>
+                <div v-show="cards.cursor" class="sb-card-body">
+                    <div class="sb-row sb-row--pick">
+                        <label class="sb-lbl">From</label>
+                        <input :value="cursorFrom" @input="setCursor('from', $event.target.value)" class="sb-input">
+                        <button class="sb-pick" @click="pickCursor('from')">Pick</button>
+                    </div>
+                    <div class="sb-row sb-row--pick">
+                        <label class="sb-lbl">To</label>
+                        <input :value="cursorTo" @input="setCursor('to', $event.target.value)" class="sb-input">
+                        <button class="sb-pick" @click="pickCursor('to')">Pick</button>
+                    </div>
+                    <div class="sb-row">
+                        <label class="sb-lbl">Duration</label>
+                        <input type="number" :value="cursorDuration" @input="setCursor('duration', parseFloat($event.target.value) || 1.5)" class="sb-input sb-input--num" step="0.1">
+                    </div>
+                    <div class="sb-row">
+                        <label class="sb-check"><input type="checkbox" :checked="cursorClick" @change="setCursor('click', $event.target.checked)"> Click</label>
+                        <label class="sb-check"><input type="checkbox" :checked="cursorLoop" @change="setCursor('loop', $event.target.checked)"> Loop</label>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Highlight -->
+            <div class="sb-card" :class="{ 'sb-card--open': cards.highlight }">
+                <div class="sb-card-head" @click="toggle('highlight')">
+                    <span>HIGHLIGHT</span>
+                    <span class="sb-chevron">{{ cards.highlight ? '&#9660;' : '&#9654;' }}</span>
+                </div>
+                <div v-show="cards.highlight" class="sb-card-body">
+                    <div class="sb-row sb-row--pick">
+                        <label class="sb-lbl">Elements</label>
+                        <input :value="highlightElements" @input="setHighlightElements($event.target.value)" class="sb-input" placeholder="sel1, sel2">
+                        <button class="sb-pick" @click="pickHighlight">Pick</button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Hover -->
+            <div class="sb-card" :class="{ 'sb-card--open': cards.hover }">
+                <div class="sb-card-head" @click="toggle('hover')">
+                    <span>HOVER</span>
+                    <span class="sb-chevron">{{ cards.hover ? '&#9660;' : '&#9654;' }}</span>
+                </div>
+                <div v-show="cards.hover" class="sb-card-body">
+                    <div class="sb-row sb-row--pick">
+                        <input v-model="hoverValue" class="sb-input" placeholder="CSS selector">
+                        <button class="sb-pick" @click="pickField('hover')">Pick</button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Scroll -->
+            <div class="sb-card" :class="{ 'sb-card--open': cards.scroll }">
+                <div class="sb-card-head" @click="toggle('scroll')">
+                    <span>SCROLL</span>
+                    <span class="sb-chevron">{{ cards.scroll ? '&#9660;' : '&#9654;' }}</span>
+                </div>
+                <div v-show="cards.scroll" class="sb-card-body">
+                    <div class="sb-row sb-row--pick">
+                        <label class="sb-lbl">Scroll To</label>
+                        <input v-model="step.scrollTo" class="sb-input">
+                        <button class="sb-pick" @click="pickField('scrollTo')">Pick</button>
+                    </div>
+                </div>
+            </div>
+
+            <!-- Options -->
+            <div class="sb-card" :class="{ 'sb-card--open': cards.options }">
+                <div class="sb-card-head" @click="toggle('options')">
+                    <span>OPTIONS</span>
+                    <span class="sb-chevron">{{ cards.options ? '&#9660;' : '&#9654;' }}</span>
+                </div>
+                <div v-show="cards.options" class="sb-card-body">
+                    <div v-for="(opt, oi) in (step.options || [])" :key="oi" class="sb-opt-row">
+                        <input v-model="opt.label" class="sb-input" placeholder="Label">
+                        <select v-model="opt._action" @change="setOptionAction(oi, opt._action)" class="sb-input sb-input--sm">
+                            <option value="next">Next</option>
+                            <option value="done">Done</option>
+                            <option value="goToStep">Go To</option>
+                            <option value="redirect">Redirect</option>
+                        </select>
+                        <button class="sb-pick sb-pick--danger" @click="removeOption(oi)">&times;</button>
+                    </div>
+                    <button class="sb-btn sb-btn-sm sb-btn-green" @click="addOption">+ Option</button>
+                </div>
+            </div>
+
+            <!-- Actions -->
+            <div class="sb-card" :class="{ 'sb-card--open': cards.actions }">
+                <div class="sb-card-head" @click="toggle('actions')">
+                    <span>ACTIONS</span>
+                    <span class="sb-chevron">{{ cards.actions ? '&#9660;' : '&#9654;' }}</span>
+                </div>
+                <div v-show="cards.actions" class="sb-card-body">
+                    <div class="sb-row sb-row--pick">
+                        <label class="sb-lbl">Silent Click</label>
+                        <input v-model="step.silentClick" class="sb-input">
+                        <button class="sb-pick" @click="pickField('silentClick')">Pick</button>
+                    </div>
+                    <div class="sb-row">
+                        <label class="sb-lbl">Redirect</label>
+                        <input v-model="step.redirect" class="sb-input" placeholder="/url">
+                    </div>
+                </div>
+            </div>
+
+            <!-- Advance -->
+            <div class="sb-card" :class="{ 'sb-card--open': cards.advance }">
+                <div class="sb-card-head" @click="toggle('advance')">
+                    <span>ADVANCE</span>
+                    <span class="sb-chevron">{{ cards.advance ? '&#9660;' : '&#9654;' }}</span>
+                </div>
+                <div v-show="cards.advance" class="sb-card-body">
+                    <select v-model="advanceMode" @change="previewNow()" class="sb-input">
+                        <option value="click">Click</option>
+                        <option value="auto">Auto Next</option>
+                        <option value="afterAnimation">After Animation</option>
+                    </select>
+                    <div v-if="advanceMode === 'auto'" class="sb-row" style="margin-top:8px">
+                        <label class="sb-lbl">Delay (s)</label>
+                        <input type="number" v-model.number="autoNextDelay" class="sb-input sb-input--num" step="1" min="1">
+                    </div>
+                </div>
+            </div>
+
+            <!-- Conditions -->
+            <div class="sb-card" :class="{ 'sb-card--open': cards.conditions }">
+                <div class="sb-card-head" @click="toggle('conditions')">
+                    <span>CONDITIONS</span>
+                    <span class="sb-chevron">{{ cards.conditions ? '&#9660;' : '&#9654;' }}</span>
+                </div>
+                <div v-show="cards.conditions" class="sb-card-body">
+                    <div class="sb-row">
+                        <label class="sb-lbl">Show If</label>
+                        <input v-model="step.showIf" class="sb-input" placeholder="CSS selector">
+                    </div>
+                </div>
+            </div>
+
+            <!-- Output -->
+            <div class="sb-card" :class="{ 'sb-card--open': cards.output }">
+                <div class="sb-card-head" @click="toggle('output')">
+                    <span>OUTPUT (JSON)</span>
+                    <span class="sb-chevron">{{ cards.output ? '&#9660;' : '&#9654;' }}</span>
+                </div>
+                <div v-show="cards.output" class="sb-card-body">
+                    <pre class="sb-code">{{ outputJson }}</pre>
+                    <div class="sb-row" style="margin-top:8px;justify-content:flex-end">
+                        <button class="sb-btn sb-btn-sm sb-btn-ghost" @click="copyStep">Copy Step</button>
+                        <button class="sb-btn sb-btn-sm sb-btn-ghost" @click="copyAll">Copy All</button>
+                    </div>
+                </div>
+            </div>
+        </div>
+    </div>
+</template>
+
+<script>
+import { pickElement } from '../tutorials/step-builder/utils/element-picker.js';
+import { generateFullJson } from '../tutorials/step-builder/utils/code-generator.js';
+
+export default {
+    name: 'VlTutorialStepBuilder',
+
+    data() {
+        return {
+            visible: false,
+            steps: [{ html: '', overlay: true, position: 'left', align: 'center' }],
+            idx: 0,
+            engine: null,
+            cards: {
+                content: true, position: false, cursor: false, highlight: false,
+                hover: false, scroll: false, options: false, actions: false,
+                advance: false, conditions: false, output: false,
+            },
+            _previewTimer: null,
+            _syncing: false,
+        };
+    },
+
+    computed: {
+        step() {
+            return this.steps[this.idx] || {};
+        },
+
+        // --- Cursor helpers (nested object needs explicit reactivity) ---
+        cursorFrom()     { return this.step.cursor?.from || ''; },
+        cursorTo()       { return this.step.cursor?.to || ''; },
+        cursorDuration() { return this.step.cursor?.duration || 1.5; },
+        cursorClick()    { return !!this.step.cursor?.click; },
+        cursorLoop()     { return !!this.step.cursor?.loop; },
+
+        // --- Highlight helper ---
+        highlightElements() {
+            return this.step.highlight?.groups?.flatMap(g => g.elements || g)?.join(', ') || '';
+        },
+
+        // --- Hover helper ---
+        hoverValue: {
+            get() {
+                const h = this.step.hover;
+                return Array.isArray(h) ? h.join(', ') : (h || '');
+            },
+            set(val) {
+                if (!val) { this.$delete(this.step, 'hover'); return; }
+                const parts = val.split(',').map(s => s.trim()).filter(Boolean);
+                this.$set(this.step, 'hover', parts.length === 1 ? parts[0] : parts);
+            }
+        },
+
+        // --- Chat mode helper ---
+        chatMode: {
+            get() { return !!this.step.chatMode; },
+            set(v) {
+                if (v) this.$set(this.step, 'chatMode', true);
+                else this.$delete(this.step, 'chatMode');
+            }
+        },
+
+        // --- showBack helper ---
+        showBack: {
+            get() { return !!this.step.showBack; },
+            set(v) {
+                if (v) this.$set(this.step, 'showBack', true);
+                else this.$delete(this.step, 'showBack');
+            }
+        },
+
+        // --- Advance helpers ---
+        advanceMode: {
+            get() {
+                if (this.step.autoNext) return 'auto';
+                if (this.step.afterAnimation) return 'afterAnimation';
+                return 'click';
+            },
+            set(mode) {
+                this.$delete(this.step, 'autoNext');
+                this.$delete(this.step, 'afterAnimation');
+                if (mode === 'auto') this.$set(this.step, 'autoNext', 3);
+                else if (mode === 'afterAnimation') this.$set(this.step, 'afterAnimation', true);
+            }
+        },
+        autoNextDelay: {
+            get() { return typeof this.step.autoNext === 'number' ? this.step.autoNext : 3; },
+            set(v) { this.$set(this.step, 'autoNext', v || 3); }
+        },
+
+        outputJson() {
+            try { return generateFullJson(this.steps, this.engine?.config); }
+            catch (e) { return JSON.stringify(this.steps, null, 2); }
+        },
+    },
+
+    watch: {
+        steps: {
+            deep: true,
+            handler() { if (!this._syncing) this.schedulePreview(); }
+        }
+    },
+
+    mounted() {
+        this.engine = window.TutorialEngine;
+        if (!this.engine) return;
+
+        // When engine starts and has steps, sync and show
+        this.engine.onReady(() => {
+            if (this.engine.steps?.length) {
+                this._syncing = true;
+                this.steps = this.engine.steps.map(s => JSON.parse(JSON.stringify(s)));
+                this.idx = 0;
+                this.visible = true;
+                this.$nextTick(() => {
+                    this._syncing = false;
+                    this.$el.focus();
+                });
+            }
+        });
+
+        // Listen for step changes from the running tutorial
+        document.addEventListener('tutorial-step-change', (e) => {
+            const i = e.detail?.index;
+            if (typeof i === 'number' && i !== this.idx && i < this.steps.length) {
+                this.idx = i;
+            }
+        });
+    },
+
+    methods: {
+        // --- Step management ---
+        selectStep(i) {
+            this.idx = Math.max(0, Math.min(i, this.steps.length - 1));
+            this.previewNow();
+        },
+        prevStep() { if (this.idx > 0) this.selectStep(this.idx - 1); },
+        nextStep() { if (this.idx < this.steps.length - 1) this.selectStep(this.idx + 1); },
+
+        addStep() {
+            this.steps.splice(this.idx + 1, 0, { html: '', overlay: true, position: 'left', align: 'center' });
+            this.selectStep(this.idx + 1);
+        },
+        deleteStep() {
+            if (this.steps.length <= 1) return;
+            this.steps.splice(this.idx, 1);
+            this.selectStep(Math.min(this.idx, this.steps.length - 1));
+        },
+        duplicateStep() {
+            const clone = JSON.parse(JSON.stringify(this.steps[this.idx]));
+            this.steps.splice(this.idx + 1, 0, clone);
+            this.selectStep(this.idx + 1);
+        },
+        moveStepUp() {
+            if (this.idx <= 0) return;
+            const i = this.idx;
+            this.steps.splice(i - 1, 2, this.steps[i], this.steps[i - 1]);
+            this.selectStep(i - 1);
+        },
+        moveStepDown() {
+            if (this.idx >= this.steps.length - 1) return;
+            const i = this.idx;
+            this.steps.splice(i, 2, this.steps[i + 1], this.steps[i]);
+            this.selectStep(i + 1);
+        },
+
+        stepPreview(s) {
+            return (s.html || s.silentClick || '').substring(0, 30) || '(empty)';
+        },
+
+        // --- Card toggles ---
+        toggle(card) { this.cards[card] = !this.cards[card]; },
+
+        // --- Cursor (nested reactivity) ---
+        ensureCursor() {
+            if (!this.step.cursor) this.$set(this.step, 'cursor', {});
+        },
+        setCursor(key, val) {
+            this.ensureCursor();
+            this.$set(this.step.cursor, key, val);
+            if (!this.step.cursor.from && !this.step.cursor.to) {
+                this.$delete(this.step, 'cursor');
+            }
+        },
+        async pickCursor(key) {
+            const sel = await pickElement();
+            if (sel) this.setCursor(key, sel);
+        },
+
+        // --- Highlight ---
+        setHighlightElements(val) {
+            if (!val) { this.$delete(this.step, 'highlight'); return; }
+            const elements = val.split(',').map(s => s.trim()).filter(Boolean);
+            this.$set(this.step, 'highlight', { groups: [{ elements }] });
+        },
+        async pickHighlight() {
+            const sel = await pickElement();
+            if (sel) {
+                const current = this.highlightElements;
+                this.setHighlightElements(current ? current + ', ' + sel : sel);
+            }
+        },
+
+        // --- Avatar size ---
+        applyAvatarSize() {
+            const size = this.step.avatarSize;
+            if (this.engine?.avatar?.img) {
+                this.engine.avatar.img.style.height = size || this.engine.config?.get('avatarHeight') || '';
+                this.engine.avatar.img.style.maxHeight = size || this.engine.config?.get('avatarMaxHeight') || '';
+            }
+            this.previewNow();
+        },
+
+        // --- Generic field pick ---
+        async pickField(prop) {
+            const sel = await pickElement();
+            if (sel) this.$set(this.step, prop, sel);
+        },
+        async pick(prop) {
+            const sel = await pickElement();
+            if (sel) this.$set(this.step, prop, sel);
+        },
+
+        // --- Options ---
+        addOption() {
+            if (!this.step.options) this.$set(this.step, 'options', []);
+            this.step.options.push({ label: 'New Option', _action: 'next' });
+        },
+        removeOption(i) {
+            this.step.options.splice(i, 1);
+            if (!this.step.options.length) this.$delete(this.step, 'options');
+        },
+        setOptionAction(i, action) {
+            const opt = this.step.options[i];
+            delete opt.done; delete opt.goToStep; delete opt.redirect;
+            if (action === 'done') opt.done = true;
+            else if (action === 'goToStep') opt.goToStep = this.idx + 1;
+            else if (action === 'redirect') opt.redirect = '/';
+        },
+
+        // --- Preview ---
+        schedulePreview() {
+            clearTimeout(this._previewTimer);
+            this._previewTimer = setTimeout(() => this.previewNow(), 300);
+        },
+        previewNow() {
+            if (!this.engine) return;
+            this.engine.steps = this.steps;
+            this.engine.previewStep(this.idx);
+        },
+
+        // --- Clipboard ---
+        copyAll() { this._copy(this.outputJson); },
+        copyStep() { this._copy(JSON.stringify(this.steps[this.idx], null, 2)); },
+        _copy(text) {
+            navigator.clipboard.writeText(text).catch(() => {
+                const ta = document.createElement('textarea');
+                ta.value = text;
+                ta.style.cssText = 'position:fixed;left:-9999px';
+                document.body.appendChild(ta);
+                ta.select();
+                document.execCommand('copy');
+                ta.remove();
+            });
+        },
+
+        // --- Spectator ---
+        spectatorMode() {
+            this.visible = false;
+            if (this.engine) { this.engine.steps = this.steps; this.engine.previewStep(0); }
+
+            const btn = document.createElement('button');
+            btn.textContent = 'Exit Spectator (Esc)';
+            Object.assign(btn.style, {
+                position: 'fixed', top: '16px', right: '16px', zIndex: '100001',
+                background: 'rgba(0,0,0,0.7)', color: '#fff', border: '1px solid rgba(255,255,255,0.2)',
+                borderRadius: '8px', padding: '8px 16px', fontSize: '13px', fontWeight: '600',
+                cursor: 'pointer', backdropFilter: 'blur(8px)',
+            });
+            document.body.appendChild(btn);
+
+            const exit = () => { this.visible = true; btn.remove(); document.removeEventListener('keydown', esc); this.previewNow(); };
+            const esc = (e) => { if (e.key === 'Escape') exit(); };
+            btn.onclick = exit;
+            document.addEventListener('keydown', esc);
+        },
+
+        // --- Resize ---
+        startResize(e) {
+            e.preventDefault();
+            const startX = e.clientX;
+            const startW = this.$el.offsetWidth;
+            const onMove = (ev) => { this.$el.style.width = Math.max(300, startW - (ev.clientX - startX)) + 'px'; };
+            const onUp = () => { document.removeEventListener('mousemove', onMove); document.removeEventListener('mouseup', onUp); };
+            document.addEventListener('mousemove', onMove);
+            document.addEventListener('mouseup', onUp);
+        },
+    },
+};
+</script>
+
+<style scoped>
+.sb {
+    position: fixed;
+    top: 0;
+    right: 0;
+    width: 420px;
+    height: 100vh;
+    z-index: 99997;
+    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;
+}
+.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); }
+
+@media (max-width: 600px) {
+    .sb { width: 100vw; }
+}
+</style>