js-kompo-utils 1.0.14 → 1.0.15

package/components/VlTutorialStepBuilder.vue

@@ -1,375 +1,94 @@
 <template>
-    <div v-show="visible" class="sb" @keydown.left.prevent="prevStep" @keydown.right.prevent="nextStep" tabindex="0">
+    <div v-show="visible" class="sb-wrapper">
+        <sb-history-drawer />
+        <div class="sb" ref="panel" @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 -->
+        <sb-header />
+        <sb-step-list />
+        <sb-context-menu />
         <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 :value="step.bubbleLeft || ''" @input="setStepProp('bubbleLeft', $event.target.value)" class="sb-input" placeholder="e.g. 50%, 300px, 20vw">
-                        </div>
-                        <div class="sb-row">
-                            <label class="sb-lbl">Top</label>
-                            <input :value="step.bubbleTop || ''" @input="setStepProp('bubbleTop', $event.target.value)" class="sb-input" placeholder="e.g. 50%, 200px, 30vh">
-                        </div>
-                    </template>
-                    <div class="sb-row">
-                        <label class="sb-lbl">Avatar Pos</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>
-                            <option value="custom">Custom (manual)</option>
-                        </select>
-                    </div>
-                    <template v-if="step.align === 'custom'">
-                        <div class="sb-row">
-                            <label class="sb-lbl">Left</label>
-                            <input :value="step.avatarLeft || ''" @input="setStepProp('avatarLeft', $event.target.value)" class="sb-input" placeholder="e.g. 30%, 200px">
-                        </div>
-                        <div class="sb-row">
-                            <label class="sb-lbl">Top</label>
-                            <input :value="step.avatarTop || ''" @input="setStepProp('avatarTop', $event.target.value)" class="sb-input" placeholder="e.g. 60%, 400px">
-                        </div>
-                    </template>
-                    <!-- Avatar size override -->
-                    <div class="sb-row">
-                        <label class="sb-lbl">Avatar Size</label>
-                        <input :value="step.avatarSize || ''" @input="setStepProp('avatarSize', $event.target.value); 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 :value="step.positionTarget || ''" @input="setStepProp('positionTarget', $event.target.value)" 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 :value="step.scrollTo || ''" @input="setStepProp('scrollTo', $event.target.value)" 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 :value="step.silentClick || ''" @input="setStepProp('silentClick', $event.target.value)" class="sb-input">
-                        <button class="sb-pick" @click="pickField('silentClick')">Pick</button>
-                    </div>
-                    <div class="sb-row">
-                        <label class="sb-lbl">Redirect</label>
-                        <input :value="step.redirect || ''" @input="setStepProp('redirect', $event.target.value)" 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 :value="step.showIf || ''" @input="setStepProp('showIf', $event.target.value)" class="sb-input" placeholder="permission:X, role:X, selector:.css">
-                    </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>
+            <sb-content-card />
+            <sb-position-card />
+            <sb-cursor-card />
+            <sb-highlight-card />
+            <sb-hover-card />
+            <sb-scroll-card />
+            <sb-options-card />
+            <sb-actions-card />
+            <sb-advance-card />
+            <sb-conditions-card />
+            <sb-output-card />
+            <sb-global-opts-card />
+        </div>
+        <sb-timeline />
+        <sb-path-preview />
+        <sb-graph-view />
         </div>
     </div>
 </template>
 
 <script>
-import { pickElement } from '../tutorials/step-builder/utils/element-picker.js';
+import { StepBuilderState } from '../tutorials/step-builder/StepBuilderState.js';
 import { generateFullJson } from '../tutorials/step-builder/utils/code-generator.js';
+import SbHeader from './step-builder/SbHeader.vue';
+import SbStepList from './step-builder/SbStepList.vue';
+import SbHistoryDrawer from './step-builder/SbHistoryDrawer.vue';
+import SbContextMenu from './step-builder/SbContextMenu.vue';
+import SbContentCard from './step-builder/cards/SbContentCard.vue';
+import SbPositionCard from './step-builder/cards/SbPositionCard.vue';
+import SbCursorCard from './step-builder/cards/SbCursorCard.vue';
+import SbHighlightCard from './step-builder/cards/SbHighlightCard.vue';
+import SbHoverCard from './step-builder/cards/SbHoverCard.vue';
+import SbScrollCard from './step-builder/cards/SbScrollCard.vue';
+import SbOptionsCard from './step-builder/cards/SbOptionsCard.vue';
+import SbActionsCard from './step-builder/cards/SbActionsCard.vue';
+import SbAdvanceCard from './step-builder/cards/SbAdvanceCard.vue';
+import SbConditionsCard from './step-builder/cards/SbConditionsCard.vue';
+import SbOutputCard from './step-builder/cards/SbOutputCard.vue';
+import SbGlobalOptsCard from './step-builder/cards/SbGlobalOptsCard.vue';
+import SbTimeline from './step-builder/SbTimeline.vue';
+import SbPathPreview from './step-builder/SbPathPreview.vue';
+import SbGraphView from './step-builder/SbGraphView.vue';
+
+function isInputFocused() {
+    const tag = document.activeElement?.tagName || '';
+    return tag === 'INPUT' || tag === 'TEXTAREA' || tag === 'SELECT';
+}
 
 export default {
     name: 'VlTutorialStepBuilder',
+    components: {
+        SbHeader, SbStepList, SbHistoryDrawer, SbContextMenu,
+        SbContentCard, SbPositionCard, SbCursorCard, SbHighlightCard,
+        SbHoverCard, SbScrollCard, SbOptionsCard, SbActionsCard,
+        SbAdvanceCard, SbConditionsCard, SbOutputCard, SbGlobalOptsCard,
+        SbTimeline, SbPathPreview, SbGraphView,
+    },
+
+    provide() { return { sb: this }; },
 
     data() {
         return {
             visible: false,
-            steps: [{ html: '', overlay: true, position: 'left', align: 'center' }],
-            idx: 0,
+            state: new StepBuilderState(),
             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,
+                advance: false, conditions: false, output: false, globalOpts: false,
             },
-            _previewTimer: null,
+            graphViewOpen: false,
+            historyOpen: false,
+            contextMenu: null,
             _syncing: false,
+            _previewTimer: null,
         };
     },
 
     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); }
-        },
-
+        step()  { return this.state.step; },
+        steps() { return this.state.steps; },
+        idx()   { return this.state.idx; },
         outputJson() {
             try { return generateFullJson(this.steps, this.engine?.config); }
             catch (e) { return JSON.stringify(this.steps, null, 2); }
@@ -377,159 +96,60 @@ export default {
     },
 
     watch: {
-        steps: {
+        'state._version'() {
+            if (!this._syncing) this.schedulePreview();
+        },
+        'state.steps': {
             deep: true,
-            handler() { if (!this._syncing) this.schedulePreview(); }
-        }
+            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.engine.config.set('devMode', true);
+                this.state.init(this.engine.steps);
                 this.visible = true;
-                this.$nextTick(() => {
-                    this._syncing = false;
-                    this.$el.focus();
-                });
+                this.$nextTick(() => { this._syncing = false; if (this.$refs.panel) this.$refs.panel.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;
+            if (typeof i === 'number' && i !== this.state.idx && i < this.state.steps.length) {
+                this.state.idx = i;
             }
         });
+
+        this._shortcutHandler = (e) => this._handleShortcut(e);
+        document.addEventListener('keydown', this._shortcutHandler);
+    },
+
+    beforeDestroy() {
+        if (this._shortcutHandler) document.removeEventListener('keydown', this._shortcutHandler);
+        if (this.engine) this.engine.config.set('devMode', false);
     },
 
     methods: {
-        // --- Step management ---
-        selectStep(i) {
-            this.idx = Math.max(0, Math.min(i, this.steps.length - 1));
-            this.previewNow();
-        },
+        // --- Step navigation ---
+        selectStep(i) { this.state.selectStep(i); 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.state.addStep(this.idx); this.previewNow(); },
+        deleteStep() { this.state.deleteStep(this.idx); this.previewNow(); },
+        duplicateStep() { this.state.duplicateStep(this.idx); this.previewNow(); },
+        moveStepUp() { if (this.idx > 0) { this.state.moveStep(this.idx, this.idx - 1); this.previewNow(); } },
+        moveStepDown() { if (this.idx < this.steps.length - 1) { this.state.moveStep(this.idx, this.idx + 1); this.previewNow(); } },
 
-        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();
-        },
-
-        // --- Reactive step property setter (Vue 2 needs $set for new keys) ---
-        setStepProp(key, value) {
-            if (value) {
-                this.$set(this.step, key, value);
-            } else {
-                this.$delete(this.step, key);
-            }
-            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);
@@ -537,8 +157,23 @@ export default {
         },
         previewNow() {
             if (!this.engine) return;
-            this.engine.steps = this.steps;
-            this.engine.previewStep(this.idx);
+            this.engine.steps = this.state.steps;
+            this.engine.previewStep(this.state.idx);
+        },
+
+        // --- Step property helpers (used by children via this.sb) ---
+        setStepProp(key, value) {
+            this.state.beginEdit('Edit step #' + this.idx + ' \u2192 ' + key);
+            if (value) this.$set(this.step, key, value);
+            else this.$delete(this.step, key);
+        },
+        async pickField(prop) {
+            const { pickElement } = await import('../tutorials/step-builder/utils/element-picker.js');
+            const sel = await pickElement();
+            if (sel) {
+                this.state.beginEdit('Edit step #' + this.idx + ' \u2192 ' + prop);
+                this.$set(this.step, prop, sel);
+            }
         },
 
         // --- Clipboard ---
@@ -547,20 +182,15 @@ export default {
         _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();
+                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); }
-
+            if (this.engine) { this.engine.steps = this.state.steps; this.engine.previewStep(0); }
             const btn = document.createElement('button');
             btn.textContent = 'Exit Spectator (Esc)';
             Object.assign(btn.style, {
@@ -570,7 +200,6 @@ export default {
                 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;
@@ -580,113 +209,35 @@ export default {
         // --- Resize ---
         startResize(e) {
             e.preventDefault();
+            const panel = this.$refs.panel;
             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 startW = panel.offsetWidth;
+            const onMove = (ev) => { panel.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);
         },
+
+        // --- Shortcuts ---
+        _handleShortcut(e) {
+            if (!this.visible) return;
+            if (!isInputFocused()) {
+                if (e.key === 'Delete') { e.preventDefault(); this.deleteStep(); return; }
+            }
+            if (e.ctrlKey || e.metaKey) {
+                if (e.key === 'z' && !e.shiftKey) { e.preventDefault(); this.state.undo(); this.previewNow(); return; }
+                if ((e.key === 'z' || e.key === 'Z') && e.shiftKey) { e.preventDefault(); this.state.redo(); this.previewNow(); return; }
+                if (!isInputFocused()) {
+                    if (e.key === 'c' && e.shiftKey) { e.preventDefault(); this.copyAll(); return; }
+                    if (e.key === 'c' && !e.shiftKey) { e.preventDefault(); this.copyStep(); return; }
+                    if (e.key === 'd') { e.preventDefault(); this.duplicateStep(); return; }
+                    if (e.key === 'n') { e.preventDefault(); this.addStep(); return; }
+                }
+            }
+            if (e.key === 'Escape') {
+                if (this.historyOpen) { this.historyOpen = false; return; }
+            }
+        },
     },
 };
 </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>