js-kompo-utils 1.0.14 → 1.0.15

package/components/step-builder/SbContextMenu.vue

@@ -0,0 +1,41 @@
+<template>
+    <div v-if="sb.contextMenu" class="sb-context-menu"
+         :style="{ left: sb.contextMenu.x + 'px', top: sb.contextMenu.y + 'px' }">
+        <div class="sb-ctx-item sb-ctx-item--green" @click="action('insertAfter')">Insert After</div>
+        <div class="sb-ctx-item" @click="action('duplicate')">Duplicate</div>
+        <div class="sb-ctx-sep"></div>
+        <div class="sb-ctx-item" @click="action('copyStep')">Copy Step Code</div>
+        <div class="sb-ctx-sep"></div>
+        <div class="sb-ctx-item" :class="{ 'sb-ctx-item--disabled': sb.contextMenu.idx === 0 }" @click="action('moveUp')">Move Up</div>
+        <div class="sb-ctx-item" :class="{ 'sb-ctx-item--disabled': sb.contextMenu.idx >= sb.steps.length - 1 }" @click="action('moveDown')">Move Down</div>
+        <div class="sb-ctx-sep"></div>
+        <div class="sb-ctx-item sb-ctx-item--red" :class="{ 'sb-ctx-item--disabled': sb.steps.length <= 1 }" @click="action('delete')">Delete</div>
+    </div>
+</template>
+<script>
+export default {
+    inject: ['sb'],
+    watch: {
+        'sb.contextMenu'(val) {
+            if (val) {
+                const close = () => { this.sb.contextMenu = null; document.removeEventListener('click', close); };
+                this.$nextTick(() => document.addEventListener('click', close));
+            }
+        },
+    },
+    methods: {
+        action(type) {
+            const i = this.sb.contextMenu.idx;
+            this.sb.contextMenu = null;
+            switch (type) {
+                case 'insertAfter': this.sb.state.addStep(i); this.sb.previewNow(); break;
+                case 'duplicate': this.sb.state.duplicateStep(i); this.sb.previewNow(); break;
+                case 'copyStep': this.sb._copy(JSON.stringify(this.sb.steps[i], null, 2)); break;
+                case 'moveUp': if (i > 0) { this.sb.state.moveStep(i, i - 1); this.sb.previewNow(); } break;
+                case 'moveDown': if (i < this.sb.steps.length - 1) { this.sb.state.moveStep(i, i + 1); this.sb.previewNow(); } break;
+                case 'delete': this.sb.state.deleteStep(i); this.sb.previewNow(); break;
+            }
+        },
+    },
+};
+</script>

package/components/step-builder/SbGraphView.vue

@@ -0,0 +1,93 @@
+<template>
+    <div v-if="sb.graphViewOpen" class="sb-graph-modal" @keydown.esc="sb.graphViewOpen = false" tabindex="0" ref="modal">
+        <div class="sb-graph-header">
+            <span class="sb-graph-title">Step Graph ({{ sb.steps.length }} steps)</span>
+            <button class="sb-hbtn" @click="sb.graphViewOpen = false">&times;</button>
+        </div>
+        <div class="sb-graph-container" ref="container">
+            <svg :width="svgWidth" :height="svgHeight" class="sb-graph-arrows">
+                <defs>
+                    <marker id="sb-arrowhead" markerWidth="8" markerHeight="6" refX="8" refY="3" orient="auto">
+                        <polygon points="0 0, 8 3, 0 6" fill="#555" />
+                    </marker>
+                </defs>
+                <path v-for="(arrow, ai) in arrows" :key="'a' + ai" :d="arrow"
+                      stroke="#555" stroke-width="2" fill="none" marker-end="url(#sb-arrowhead)" />
+            </svg>
+            <div v-for="(node, ni) in nodes" :key="'n' + ni"
+                 class="sb-graph-node" :class="{ 'sb-graph-node--active': node.index === sb.idx }"
+                 :style="{ left: node.x + 'px', top: node.y + 'px' }"
+                 @click="sb.selectStep(node.index); sb.graphViewOpen = false">
+                <div class="sb-graph-node-branch" :style="{ backgroundColor: node.branchColor }"></div>
+                <span class="sb-graph-node-num">{{ node.index }}</span>
+                <span class="sb-graph-node-text">{{ node.preview }}</span>
+                <span class="sb-graph-node-icons">
+                    <span v-if="sb.steps[node.index].cursor">&#8982;</span>
+                    <span v-if="sb.steps[node.index].highlight">&#9734;</span>
+                    <span v-if="sb.steps[node.index].options">&#8230;</span>
+                </span>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+const NODE_W = 160, NODE_H = 72, GAP_X = 24, GAP_Y = 20, PAD = 32, COLS = 6;
+const BRANCH_COLORS = ['#6c8aff', '#2ecc71', '#e74c3c', '#f1c40f', '#9b59b6', '#e67e22', '#1abc9c', '#e84393'];
+
+export default {
+    inject: ['sb'],
+    watch: {
+        'sb.graphViewOpen'(val) {
+            if (val) this.$nextTick(() => this.$refs.modal?.focus());
+        },
+    },
+    computed: {
+        branchColorMap() {
+            const map = {}; let ci = 0;
+            for (const s of this.sb.steps) {
+                const b = s._branch || '_main';
+                if (!map[b]) map[b] = BRANCH_COLORS[ci++ % BRANCH_COLORS.length];
+            }
+            return map;
+        },
+        nodes() {
+            return this.sb.steps.map((s, i) => {
+                const row = Math.floor(i / COLS);
+                const colInRow = i % COLS;
+                const col = row % 2 === 0 ? colInRow : (COLS - 1 - colInRow);
+                return {
+                    index: i,
+                    x: PAD + col * (NODE_W + GAP_X),
+                    y: PAD + row * (NODE_H + GAP_Y),
+                    preview: (s.html || s.silentClick || '').substring(0, 20) || '(empty)',
+                    branchColor: this.branchColorMap[s._branch || '_main'],
+                };
+            });
+        },
+        arrows() {
+            const paths = [];
+            for (let i = 0; i < this.nodes.length - 1; i++) {
+                const a = this.nodes[i], b = this.nodes[i + 1];
+                const ax = a.x + NODE_W / 2, ay = a.y + NODE_H / 2;
+                const bx = b.x + NODE_W / 2, by = b.y + NODE_H / 2;
+                if (Math.abs(ay - by) < 5) {
+                    // Same row: horizontal
+                    const fromX = a.x + (bx > ax ? NODE_W : 0);
+                    const toX = b.x + (bx > ax ? 0 : NODE_W);
+                    paths.push(`M ${fromX},${ay} L ${toX},${by}`);
+                } else {
+                    // Row change: U-turn
+                    const midY = ay + (by - ay) / 2;
+                    paths.push(`M ${ax},${a.y + NODE_H} L ${ax},${midY} L ${bx},${midY} L ${bx},${b.y}`);
+                }
+            }
+            return paths;
+        },
+        svgWidth() { return PAD * 2 + COLS * (NODE_W + GAP_X); },
+        svgHeight() {
+            const rows = Math.ceil(this.sb.steps.length / COLS);
+            return PAD * 2 + rows * (NODE_H + GAP_Y);
+        },
+    },
+};
+</script>

package/components/step-builder/SbHeader.vue

@@ -0,0 +1,16 @@
+<template>
+    <div class="sb-header">
+        <span class="sb-header-title">Step Builder</span>
+        <button class="sb-hbtn" title="Undo (Ctrl+Z)" :disabled="!sb.state.canUndo"
+                @click="sb.state.undo(); sb.previewNow()">&#8630;</button>
+        <button class="sb-hbtn" title="Redo (Ctrl+Shift+Z)" :disabled="!sb.state.canRedo"
+                @click="sb.state.redo(); sb.previewNow()">&#8631;</button>
+        <button class="sb-hbtn" title="History" @click="sb.historyOpen = !sb.historyOpen">&#128337;</button>
+        <button class="sb-hbtn" title="Spectator" @click="sb.spectatorMode()">&#9654;</button>
+        <button class="sb-hbtn" title="Copy All" @click="sb.copyAll()">&#128203;</button>
+        <button class="sb-hbtn" title="Close" @click="sb.visible = false">&times;</button>
+    </div>
+</template>
+<script>
+export default { inject: ['sb'] };
+</script>

package/components/step-builder/SbHistoryDrawer.vue

@@ -0,0 +1,43 @@
+<template>
+    <div class="sb-history-drawer" :class="{ 'sb-history-drawer--open': sb.historyOpen }">
+        <div class="sb-history-header">
+            <span>History ({{ sb.state.undoStack.length }})</span>
+            <button class="sb-hbtn" @click="sb.historyOpen = false">&times;</button>
+        </div>
+        <div class="sb-history-list">
+            <div class="sb-history-item sb-history-item--current">Current State</div>
+            <div v-for="(entry, i) in sb.state.undoLabels.slice().reverse()" :key="'u' + i"
+                 class="sb-history-item" @click="undoToIndex(sb.state.undoLabels.length - 1 - i)">
+                <span class="sb-history-icon" :style="{ color: historyColor(entry.label) }">&#9679;</span>
+                <span class="sb-history-label">{{ entry.label }}</span>
+                <span class="sb-history-time">{{ timeAgo(entry.time) }}</span>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    inject: ['sb'],
+    methods: {
+        undoToIndex(targetIdx) {
+            const count = this.sb.state.undoStack.length - targetIdx;
+            for (let i = 0; i < count; i++) this.sb.state.undo();
+            this.sb.previewNow();
+        },
+        timeAgo(ts) {
+            const diff = Math.round((Date.now() - ts) / 1000);
+            if (diff < 5) return 'just now';
+            if (diff < 60) return diff + 's ago';
+            if (diff < 3600) return Math.floor(diff / 60) + 'm ago';
+            return Math.floor(diff / 3600) + 'h ago';
+        },
+        historyColor(label) {
+            if (label.startsWith('Add'))       return '#2ecc71';
+            if (label.startsWith('Delete'))    return '#e74c3c';
+            if (label.startsWith('Duplicate')) return '#6c8aff';
+            if (label.startsWith('Move'))      return '#f1c40f';
+            return '#b0b4c0';
+        },
+    },
+};
+</script>

package/components/step-builder/SbPathPreview.vue

@@ -0,0 +1,57 @@
+<template>
+    <svg v-if="visible" class="sb-path-preview" xmlns="http://www.w3.org/2000/svg">
+        <path v-if="pathD" :d="pathD" fill="none" stroke="#f1c40f" stroke-width="2" stroke-dasharray="8,4" />
+        <circle v-if="fromPos" :cx="fromPos.x" :cy="fromPos.y" r="8" fill="#2ecc71" opacity="0.8" />
+        <text v-if="fromPos" :x="fromPos.x + 12" :y="fromPos.y + 4" fill="#2ecc71" font-size="10" font-family="system-ui">FROM</text>
+        <circle v-if="toPos" :cx="toPos.x" :cy="toPos.y" r="8" fill="#e74c3c" opacity="0.8" />
+        <text v-if="toPos" :x="toPos.x + 12" :y="toPos.y + 4" fill="#e74c3c" font-size="10" font-family="system-ui">TO</text>
+        <template v-for="(wp, wi) in waypointPositions">
+            <circle :key="'wc' + wi" :cx="wp.x" :cy="wp.y" r="6" fill="#00bcd4" opacity="0.8" />
+            <text :key="'wt' + wi" :x="wp.x + 10" :y="wp.y + 4" fill="#00bcd4" font-size="9" font-family="system-ui">WP{{ wi }}</text>
+        </template>
+    </svg>
+</template>
+<script>
+export default {
+    inject: ['sb'],
+    computed: {
+        visible() {
+            return !!(this.sb.step.cursor && (this.sb.step.cursor.from || this.sb.step.cursor.to));
+        },
+        fromPos() { return this._resolve(this.sb.step.cursor?.from); },
+        toPos() { return this._resolve(this.sb.step.cursor?.to); },
+        pathD() {
+            if (!this.fromPos || !this.toPos) return null;
+            const svgPath = this.sb.step.cursor?.svgPath || 'M 0,0 C 0.3,0.1 0.7,0.9 1,1';
+            return this._denormalize(svgPath, this.fromPos, this.toPos);
+        },
+        waypointPositions() {
+            const wps = this.sb.step.cursor?.waypoints || [];
+            return wps.map(wp => this._resolve(wp.target)).filter(Boolean);
+        },
+    },
+    methods: {
+        _resolve(selector) {
+            if (!selector) return null;
+            if (typeof selector === 'string' && selector.startsWith('screen:')) {
+                const parts = selector.replace('screen:', '').split(',');
+                return { x: parseFloat(parts[0]), y: parseFloat(parts[1]) };
+            }
+            const el = document.querySelector(selector);
+            if (!el) return null;
+            const rect = el.getBoundingClientRect();
+            return { x: rect.left + rect.width / 2, y: rect.top + rect.height / 2 };
+        },
+        _denormalize(pathStr, from, to) {
+            const match = pathStr.match(/C\s*([\d.]+),([\d.]+)\s+([\d.]+),([\d.]+)\s+([\d.]+),([\d.]+)/);
+            if (!match) return `M ${from.x},${from.y} L ${to.x},${to.y}`;
+            const dx = to.x - from.x, dy = to.y - from.y;
+            const cp1x = from.x + parseFloat(match[1]) * dx;
+            const cp1y = from.y + parseFloat(match[2]) * dy;
+            const cp2x = from.x + parseFloat(match[3]) * dx;
+            const cp2y = from.y + parseFloat(match[4]) * dy;
+            return `M ${from.x},${from.y} C ${cp1x},${cp1y} ${cp2x},${cp2y} ${to.x},${to.y}`;
+        },
+    },
+};
+</script>

package/components/step-builder/SbStepList.vue

@@ -0,0 +1,87 @@
+<template>
+    <div class="sb-steps">
+        <div class="sb-steps-bar">
+            <span class="sb-steps-count">STEPS ({{ sb.steps.length }})</span>
+            <button class="sb-btn sb-btn-sm sb-btn-green" @click="sb.addStep()">+</button>
+        </div>
+        <div v-if="branchInfo.order.length > 1" class="sb-branch-tabs">
+            <span class="sb-branch-tab" :class="{ 'sb-branch-tab--active': !activeBranchTab }"
+                  @click="activeBranchTab = null">All</span>
+            <span v-for="b in branchInfo.order" :key="b"
+                  class="sb-branch-tab" :class="{ 'sb-branch-tab--active': activeBranchTab === b }"
+                  :style="{ borderBottomColor: branchInfo.colors[b] }"
+                  @click="activeBranchTab = b">
+                {{ b === '_main' ? 'Main' : b }}
+            </span>
+        </div>
+        <div class="sb-steps-list">
+            <div v-for="(s, i) in sb.steps" :key="i"
+                 v-show="!activeBranchTab || (s._branch || '_main') === activeBranchTab"
+                 class="sb-step" :class="{ 'sb-step--active': i === sb.idx, 'sb-step--drag-over': dragOverIdx === i }"
+                 draggable="true"
+                 @click="sb.selectStep(i)"
+                 @contextmenu.prevent="sb.contextMenu = { x: $event.clientX, y: $event.clientY, idx: i }"
+                 @dragstart="onDragStart($event, i)"
+                 @dragover.prevent="dragOverIdx = i"
+                 @dragleave="dragOverIdx = null"
+                 @drop="onDrop($event, i)"
+                 @dragend="dragFromIdx = null; dragOverIdx = null">
+                <span class="sb-step-branch-bar" :style="{ backgroundColor: getBranchColor(s) }"></span>
+                <span class="sb-step-num">{{ i }}</span>
+                <span class="sb-step-text">{{ (s.html || s.silentClick || '').substring(0, 30) || '(empty)' }}</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 v-if="sb.state.hasStepChanged(i)" class="sb-step-modified" title="modified">&#9679;</span>
+                </span>
+            </div>
+        </div>
+        <div class="sb-step-actions">
+            <button class="sb-hbtn" @click="sb.moveStepUp()" title="Move up">&#8593;</button>
+            <button class="sb-hbtn" @click="sb.moveStepDown()" title="Move down">&#8595;</button>
+            <button class="sb-hbtn" @click="sb.duplicateStep()" title="Duplicate">&#8916;</button>
+            <button class="sb-hbtn sb-hbtn--danger" @click="sb.deleteStep()" title="Delete">&#10005;</button>
+        </div>
+    </div>
+</template>
+<script>
+const BRANCH_COLORS = ['#6c8aff', '#2ecc71', '#e74c3c', '#f1c40f', '#9b59b6', '#e67e22', '#1abc9c', '#e84393'];
+
+export default {
+    inject: ['sb'],
+    data() {
+        return { activeBranchTab: null, dragFromIdx: null, dragOverIdx: null };
+    },
+    computed: {
+        branchInfo() {
+            const colors = {}, order = [];
+            let ci = 0;
+            for (const s of this.sb.steps) {
+                const b = s._branch || '_main';
+                if (!colors[b]) { colors[b] = BRANCH_COLORS[ci++ % BRANCH_COLORS.length]; order.push(b); }
+            }
+            return { order, colors };
+        },
+    },
+    methods: {
+        getBranchColor(step) {
+            return this.branchInfo.colors[step._branch || '_main'] || BRANCH_COLORS[0];
+        },
+        onDragStart(e, idx) {
+            this.dragFromIdx = idx;
+            e.dataTransfer.effectAllowed = 'move';
+            e.dataTransfer.setData('text/plain', String(idx));
+        },
+        onDrop(e, toIdx) {
+            e.preventDefault();
+            this.dragOverIdx = null;
+            if (this.dragFromIdx !== null && this.dragFromIdx !== toIdx) {
+                this.sb.state.moveStep(this.dragFromIdx, toIdx);
+                this.sb.previewNow();
+            }
+            this.dragFromIdx = null;
+        },
+    },
+};
+</script>

package/components/step-builder/SbTimeline.vue

@@ -0,0 +1,66 @@
+<template>
+    <div class="sb-timeline">
+        <div class="sb-timeline-bar">
+            <span class="sb-steps-count">TIMELINE</span>
+            <button class="sb-hbtn" title="Graph View" @click="sb.graphViewOpen = true">&#9673;</button>
+        </div>
+        <div class="sb-timeline-strip">
+            <div v-for="(s, i) in sb.steps" :key="'t' + i"
+                 class="sb-timeline-thumb" :class="{ 'sb-active': i === sb.idx }"
+                 draggable="true"
+                 @click="sb.selectStep(i)"
+                 @dragstart="onDragStart($event, i)"
+                 @dragover.prevent="dragOverIdx = i"
+                 @dragleave="dragOverIdx = null"
+                 @drop="onDrop($event, i)"
+                 @dragend="dragFromIdx = null; dragOverIdx = null">
+                <img v-if="sb.state.getScreenshot(i)" :src="sb.state.getScreenshot(i)" class="sb-timeline-thumb-img">
+                <span class="sb-timeline-thumb-num">{{ i }}</span>
+                <button class="sb-timeline-capture" @click.stop="capture(i)" title="Capture">&#128247;</button>
+                <span class="sb-timeline-thumb-icons">
+                    <span v-if="s.cursor">&#8982;</span>
+                    <span v-if="s.highlight">&#9734;</span>
+                </span>
+                <span v-if="sb.state.hasStepChanged(i)" class="sb-timeline-modified"></span>
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    inject: ['sb'],
+    data() { return { dragFromIdx: null, dragOverIdx: null }; },
+    methods: {
+        async capture(index) {
+            if (!window.html2canvas) {
+                try {
+                    const mod = await import('html2canvas');
+                    window.html2canvas = mod.default || mod;
+                } catch { console.warn('html2canvas not available'); return; }
+            }
+            const wasVisible = this.sb.visible;
+            this.sb.visible = false;
+            await this.$nextTick();
+            try {
+                const canvas = await window.html2canvas(document.body, { scale: 0.3, logging: false });
+                this.sb.state.setScreenshot(index, canvas.toDataURL('image/jpeg', 0.5));
+            } catch (e) { console.warn('Screenshot failed:', e); }
+            this.sb.visible = wasVisible;
+        },
+        onDragStart(e, idx) {
+            this.dragFromIdx = idx;
+            e.dataTransfer.effectAllowed = 'move';
+            e.dataTransfer.setData('text/plain', String(idx));
+        },
+        onDrop(e, toIdx) {
+            e.preventDefault();
+            this.dragOverIdx = null;
+            if (this.dragFromIdx !== null && this.dragFromIdx !== toIdx) {
+                this.sb.state.moveStep(this.dragFromIdx, toIdx);
+                this.sb.previewNow();
+            }
+            this.dragFromIdx = null;
+        },
+    },
+};
+</script>

package/components/step-builder/cards/SbActionsCard.vue

@@ -0,0 +1,26 @@
+<template>
+    <div class="sb-card" :class="{ 'sb-card--open': sb.cards.actions }">
+        <div class="sb-card-head" @click="sb.toggle('actions')">
+            <span>ACTIONS</span><span class="sb-chevron">{{ sb.cards.actions ? '&#9660;' : '&#9654;' }}</span>
+        </div>
+        <div v-show="sb.cards.actions" class="sb-card-body">
+            <div class="sb-row sb-row--pick">
+                <label class="sb-lbl">Silent Click</label>
+                <input :value="sb.step.silentClick || ''" @input="sb.setStepProp('silentClick', $event.target.value)" class="sb-input">
+                <button class="sb-pick" @click="sb.pickField('silentClick')">Pick</button>
+            </div>
+            <div class="sb-row sb-row--pick">
+                <label class="sb-lbl">Link Next</label>
+                <input :value="sb.step.linkNext || ''" @input="sb.setStepProp('linkNext', $event.target.value)" class="sb-input">
+                <button class="sb-pick" @click="sb.pickField('linkNext')">Pick</button>
+            </div>
+            <div class="sb-row">
+                <label class="sb-lbl">Redirect</label>
+                <input :value="sb.step.redirect || ''" @input="sb.setStepProp('redirect', $event.target.value)" class="sb-input" placeholder="/url">
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default { inject: ['sb'] };
+</script>

package/components/step-builder/cards/SbAdvanceCard.vue

@@ -0,0 +1,43 @@
+<template>
+    <div class="sb-card" :class="{ 'sb-card--open': sb.cards.advance }">
+        <div class="sb-card-head" @click="sb.toggle('advance')">
+            <span>ADVANCE</span><span class="sb-chevron">{{ sb.cards.advance ? '&#9660;' : '&#9654;' }}</span>
+        </div>
+        <div v-show="sb.cards.advance" class="sb-card-body">
+            <select :value="advanceMode" @change="setAdvanceMode($event.target.value)" 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" :value="sb.step.autoNext || 3" @input="setDelay(parseInt($event.target.value) || 3)" class="sb-input sb-input--num" step="1" min="1">
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    inject: ['sb'],
+    computed: {
+        advanceMode() {
+            if (this.sb.step.autoNext) return 'auto';
+            if (this.sb.step.afterAnimation) return 'afterAnimation';
+            return 'click';
+        },
+    },
+    methods: {
+        setAdvanceMode(mode) {
+            this.sb.state.beginEdit('Edit step #' + this.sb.idx + ' \u2192 advance');
+            this.$delete(this.sb.step, 'autoNext');
+            this.$delete(this.sb.step, 'afterAnimation');
+            if (mode === 'auto') this.$set(this.sb.step, 'autoNext', 3);
+            else if (mode === 'afterAnimation') this.$set(this.sb.step, 'afterAnimation', true);
+        },
+        setDelay(val) {
+            this.sb.state.beginEdit('Edit step #' + this.sb.idx + ' \u2192 autoNext delay');
+            this.$set(this.sb.step, 'autoNext', val);
+        },
+    },
+};
+</script>

package/components/step-builder/cards/SbConditionsCard.vue

@@ -0,0 +1,20 @@
+<template>
+    <div class="sb-card" :class="{ 'sb-card--open': sb.cards.conditions }">
+        <div class="sb-card-head" @click="sb.toggle('conditions')">
+            <span>CONDITIONS</span><span class="sb-chevron">{{ sb.cards.conditions ? '&#9660;' : '&#9654;' }}</span>
+        </div>
+        <div v-show="sb.cards.conditions" class="sb-card-body">
+            <div class="sb-row">
+                <label class="sb-lbl">Show If</label>
+                <input :value="sb.step.showIf || ''" @input="sb.setStepProp('showIf', $event.target.value)" class="sb-input" placeholder="permission:X, role:X, selector:.css">
+            </div>
+            <div class="sb-row">
+                <label class="sb-lbl">Hide If</label>
+                <input :value="sb.step.hideIf || ''" @input="sb.setStepProp('hideIf', $event.target.value)" class="sb-input" placeholder="selector:.css — skip if found">
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default { inject: ['sb'] };
+</script>

package/components/step-builder/cards/SbContentCard.vue

@@ -0,0 +1,45 @@
+<template>
+    <div class="sb-card" :class="{ 'sb-card--open': sb.cards.content }">
+        <div class="sb-card-head" @click="sb.toggle('content')">
+            <span>CONTENT</span>
+            <span class="sb-chevron">{{ sb.cards.content ? '&#9660;' : '&#9654;' }}</span>
+        </div>
+        <div v-show="sb.cards.content" class="sb-card-body">
+            <label class="sb-lbl">HTML / Key</label>
+            <textarea :value="sb.step.html || ''" @input="setHtml($event.target.value)" class="sb-input sb-textarea" rows="3"></textarea>
+            <div class="sb-row">
+                <label class="sb-check"><input type="checkbox" :checked="!!sb.step.overlay" @change="toggleOverlay($event.target.checked)"> overlay</label>
+                <label class="sb-check"><input type="checkbox" :checked="!!sb.step.showBack" @change="toggleShowBack"> showBack</label>
+            </div>
+            <div class="sb-row">
+                <label class="sb-lbl">Branch</label>
+                <input :value="sb.step._branch || ''" @input="setBranch($event.target.value)" class="sb-input" placeholder="(main)">
+            </div>
+        </div>
+    </div>
+</template>
+<script>
+export default {
+    inject: ['sb'],
+    methods: {
+        setHtml(val) {
+            this.sb.state.beginEdit('Edit step #' + this.sb.idx + ' \u2192 html');
+            this.$set(this.sb.step, 'html', val);
+        },
+        toggleOverlay(checked) {
+            this.sb.state.beginEdit('Edit step #' + this.sb.idx + ' \u2192 overlay');
+            this.$set(this.sb.step, 'overlay', checked);
+        },
+        toggleShowBack(e) {
+            this.sb.state.beginEdit('Edit step #' + this.sb.idx + ' \u2192 showBack');
+            if (e.target.checked) this.$set(this.sb.step, 'showBack', true);
+            else this.$delete(this.sb.step, 'showBack');
+        },
+        setBranch(val) {
+            this.sb.state.beginEdit('Edit step #' + this.sb.idx + ' \u2192 branch');
+            if (val) this.$set(this.sb.step, '_branch', val);
+            else this.$delete(this.sb.step, '_branch');
+        },
+    },
+};
+</script>