js-kompo-utils 1.0.0

package/tutorials/tutorial.scss

@@ -0,0 +1,816 @@
+// tutorials/tutorial.scss
+// All styles extracted from inline JS Object.assign(el.style, {...}) calls.
+
+// === Overlay ===
+.tutorial-overlay {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    // No background-color here — set exclusively via JS setMode()
+    // to avoid CSS/inline conflicts
+    z-index: 9997; // Z.OVERLAY — below highlight (9998)
+    touch-action: none;
+    overscroll-behavior: contain;
+
+    &--transparent {
+        background-color: transparent !important;
+    }
+}
+
+.tutorial-peek-btn {
+    position: fixed;
+    z-index: 10003; // Z.CONTAINER + 1
+    bottom: 12px;
+    right: 12px;
+    width: 40px;
+    height: 40px;
+    border-radius: 50%;
+    border: none;
+    background-color: rgba(0, 0, 0, 0.5);
+    color: #fff;
+    font-size: 18px;
+    cursor: pointer;
+    display: none;
+    align-items: center;
+    justify-content: center;
+    backdrop-filter: blur(4px);
+    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
+}
+
+// === Container / Avatar ===
+// Container is a direct child of body (sibling of overlay, not inside it)
+// so it needs its own fixed positioning to center on screen.
+.tutorial-container {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    z-index: 10002; // Z.CONTAINER — above overlay and highlight
+    pointer-events: none; // Let clicks pass through to overlay
+
+    > * {
+        pointer-events: auto; // But children (bubble, avatar) are clickable
+    }
+
+    &--no-avatar {
+        // Bubble is on body now, not inside container — no overrides needed
+        .tutorial-arrow { display: none; }
+    }
+}
+
+.tutorial-img-wrapper {
+    position: relative;
+    flex-shrink: 0;
+    align-self: flex-end;
+}
+
+.tutorial-avatar {
+    object-fit: contain;
+    display: block;
+    pointer-events: none;
+}
+
+.tutorial-avatar-video {
+    object-fit: contain;
+    display: block;
+    pointer-events: none;
+}
+
+// === Bubble ===
+.tutorial-bubble {
+    background-color: #ffffff;
+    border-radius: 16px;
+    padding: clamp(1rem, 3vw, 2rem) clamp(1.2rem, 4vw, 2.5rem);
+    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
+    position: fixed;
+    z-index: 10003; // Above container (10002) so bubble is never cut by avatar
+    color: #1a1a1a;
+    font-family: "Outfit", sans-serif;
+    opacity: 0;
+    transform: scale(0.8);
+    transform-origin: bottom right;
+    transition: opacity 0.3s ease, transform 0.3s ease;
+    display: flex;
+    flex-direction: column;
+    pointer-events: auto;
+
+    &--mobile {
+        position: relative;
+        right: auto;
+        left: auto;
+        margin-right: 0;
+        margin-left: 0;
+        bottom: auto;
+        top: auto;
+        padding: 0.8rem 1rem;
+        font-size: 13px;
+        max-width: 90vw;
+        min-width: 0;
+        width: 100%;
+    }
+
+    &--chat {
+        position: relative;
+        top: auto;
+        bottom: auto;
+        left: auto;
+        right: auto;
+        transform: none;
+        margin-left: 0;
+        margin-right: 0;
+        display: grid;
+        grid-template-columns: 100px 1fr;
+        gap: 1rem;
+        align-items: start;
+    }
+
+    &--left {
+        left: auto;
+        right: 100%;
+        margin-left: 0;
+        margin-right: clamp(10px, 3vw, 20px);
+        transform-origin: bottom right;
+    }
+
+    &--right {
+        right: auto;
+        left: 100%;
+        margin-right: 0;
+        margin-left: clamp(10px, 3vw, 20px);
+        transform-origin: bottom left;
+    }
+
+    &--top {
+        left: 0;
+        right: 0;
+        margin-left: auto;
+        margin-right: auto;
+        top: auto;
+        transform: none;
+        transform-origin: bottom center;
+    }
+}
+
+.tutorial-arrow {
+    position: absolute;
+    right: -18px;
+    bottom: 18px;
+    width: 0;
+    height: 0;
+    border-top: 14px solid transparent;
+    border-bottom: 14px solid transparent;
+    border-left: 20px solid #ffffff;
+
+    &--left {
+        right: -18px;
+        left: auto;
+        border-top: 14px solid transparent;
+        border-bottom: 14px solid transparent;
+        border-left: 20px solid #ffffff;
+        border-right: none;
+    }
+
+    &--right {
+        right: auto;
+        left: -18px;
+        border-top: 14px solid transparent;
+        border-bottom: 14px solid transparent;
+        border-right: 20px solid #ffffff;
+        border-left: none;
+    }
+
+    &--top {
+        left: 50%;
+        right: auto;
+        bottom: -18px;
+        transform: translateX(-50%);
+        border-left: 14px solid transparent;
+        border-right: 14px solid transparent;
+        border-top: 20px solid #ffffff;
+        border-bottom: none;
+    }
+
+    &--bottom {
+        top: -18px;
+        bottom: auto;
+        left: 50%;
+        right: auto;
+        transform: translateX(-50%);
+        border-left: 14px solid transparent;
+        border-right: 14px solid transparent;
+        border-bottom: 20px solid #ffffff;
+        border-top: none;
+    }
+
+    &--hidden {
+        display: none;
+    }
+}
+
+.tutorial-text {
+    margin: 0;
+    max-height: clamp(150px, 40vh, 300px);
+    overflow-y: auto;
+}
+
+.tutorial-options {
+    margin-top: 1rem;
+    display: none;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.tutorial-btn-row {
+    margin-top: 1.2rem;
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.tutorial-action-btn {
+    padding: 0.75rem 1.5rem;
+    min-height: 44px;
+    background-color: #07499e;
+    color: #ffffff;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 600;
+}
+
+.tutorial-pause-btn {
+    padding: 0.75rem 1rem;
+    min-height: 44px;
+    background-color: transparent;
+    color: #07499e;
+    border: 2px solid #07499e;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 600;
+    display: none;
+}
+
+.tutorial-back-btn {
+    padding: 0.75rem 1rem;
+    min-height: 44px;
+    background-color: transparent;
+    color: #07499e;
+    border: 2px solid #07499e;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 600;
+    display: none;
+}
+
+// === Chat mode avatar ===
+.tutorial-chat-avatar {
+    width: 100px;
+    height: 100px;
+    min-width: 100px;
+    border-radius: 50%;
+    overflow: hidden;
+    border: 3px solid #07499e;
+    flex-shrink: 0;
+    align-self: center;
+
+    img {
+        width: 100%;
+        height: 100%;
+        object-fit: cover;
+        object-position: top center;
+    }
+}
+
+// === Cursor ===
+.tutorial-cursor {
+    position: fixed;
+    z-index: 10000; // Z.CURSOR
+    pointer-events: none;
+    left: 0;
+    top: 0;
+    opacity: 0;
+
+    &--mobile {
+        width: 24px;
+        height: 24px;
+        border-radius: 50%;
+        background-color: #4a6cf7;
+        border: 3px solid #ffffff;
+        box-shadow: 0 2px 8px rgba(74, 108, 247, 0.5);
+        transform: translate(-50%, -50%);
+    }
+}
+
+// === Highlight ===
+.tutorial-highlight-svg {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 9998; // Z.HIGHLIGHT — above overlay (9997)
+    pointer-events: none;
+}
+
+// === Options ===
+.tutorial-option-btn {
+    padding: 0.75rem 1rem;
+    min-height: 44px;
+    border-radius: 10px;
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 600;
+    text-align: left;
+    transition: background-color 0.2s ease, transform 0.1s ease;
+    opacity: 0;
+    transform: translateY(8px);
+    pointer-events: none;
+}
+
+// === AutoNext ===
+.tutorial-auto-next-bar {
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    height: clamp(3px, 0.8vw, 5px);
+    width: 0%;
+    background-color: #07499e;
+    border-radius: 0 0 16px 16px;
+    transition: none;
+}
+
+// === Click Pulse ===
+@keyframes tutorial-pulse-ring {
+    0% {
+        transform: translate(-50%, -50%) scale(1);
+        opacity: 1;
+    }
+    100% {
+        transform: translate(-50%, -50%) scale(var(--pulse-scale, 3));
+        opacity: 0;
+    }
+}
+
+.tutorial-pulse-ring {
+    position: fixed;
+    width: 48px;
+    height: 48px;
+    border-radius: 50%;
+    border: 3px solid #ff4444;
+    pointer-events: none;
+    z-index: 10001; // Z.PULSE
+    transform: translate(-50%, -50%);
+    animation: tutorial-pulse-ring var(--pulse-duration, 0.7s) var(--pulse-delay, 0s) ease-out forwards;
+}
+
+// === Element Picker (dev only) ===
+.tutorial-picker-highlight {
+    position: fixed;
+    border: 2px solid #6c8aff;
+    border-radius: 4px;
+    pointer-events: none;
+    z-index: 100001;
+    display: none;
+    transition: all 0.08s ease;
+    box-shadow: 0 0 0 3px rgba(108, 138, 255, 0.2);
+}
+
+.tutorial-picker-label {
+    position: fixed;
+    background: #1a1a2e;
+    color: #6c8aff;
+    padding: 2px 6px;
+    border-radius: 4px;
+    font-size: 10px;
+    font-family: monospace;
+    pointer-events: none;
+    z-index: 100002;
+    display: none;
+    white-space: nowrap;
+}
+
+// === Step Builder Panel (dev only) ===
+// Panel positioning and base look
+.tutorial-step-builder-panel {
+    position: fixed;
+    top: 0;
+    right: 0;
+    width: 420px;
+    height: 100vh;
+    overflow-y: auto;
+    z-index: 10010;
+    background: linear-gradient(170deg, #1e1e2e 0%, #161625 100%);
+    color: #e0e4ec;
+    border-left: 1px solid rgba(255, 255, 255, 0.06);
+    box-shadow: -4px 0 24px rgba(0, 0, 0, 0.4);
+
+    &:empty { display: none; }
+}
+
+// === [data-sb] scoped styles ===
+// Override Kompo wrapper styles for the dark step builder theme.
+// Kompo wraps fields in .vlField > .vlFormControl > input with white backgrounds.
+// We use !important sparingly where Kompo specificity can't be beaten otherwise.
+
+[data-sb] {
+    font-family: "Inter", "Segoe UI", system-ui, -apple-system, sans-serif;
+    font-size: 13px;
+    line-height: 1.5;
+}
+
+[data-sb] *,
+[data-sb] *::before,
+[data-sb] *::after {
+    box-sizing: border-box;
+}
+
+// --- Override Kompo wrappers ---
+[data-sb] .vlField,
+[data-sb] .vlFormControl,
+[data-sb] .vlInputWrapper,
+[data-sb] .vlToggle {
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+    padding: 0 !important;
+    margin: 0 !important;
+    min-height: auto !important;
+}
+
+[data-sb] .vlFieldLabel {
+    color: #7a7f8e !important;
+    font-size: 11px !important;
+    text-transform: uppercase !important;
+    letter-spacing: 0.3px !important;
+    margin-bottom: 4px !important;
+}
+
+// --- Inputs ---
+[data-sb] input,
+[data-sb] select,
+[data-sb] textarea {
+    background: rgba(255, 255, 255, 0.06) !important;
+    color: #e0e4ec !important;
+    border: 1px solid rgba(255, 255, 255, 0.1) !important;
+    border-radius: 8px !important;
+    padding: 8px 10px !important;
+    font-size: 13px !important;
+    font-family: inherit !important;
+    transition: border-color 0.2s, box-shadow 0.2s;
+    outline: none !important;
+    width: 100% !important;
+}
+
+[data-sb] input:focus,
+[data-sb] select:focus,
+[data-sb] textarea:focus {
+    border-color: #6c8aff !important;
+    box-shadow: 0 0 0 2px rgba(108, 138, 255, 0.15) !important;
+}
+
+[data-sb] input[type="number"] {
+    width: 72px !important;
+}
+
+[data-sb] input[type="checkbox"] {
+    width: 16px !important;
+    height: 16px !important;
+    accent-color: #6c8aff;
+    cursor: pointer;
+}
+
+[data-sb] select {
+    cursor: pointer;
+    appearance: none !important;
+    padding-right: 24px !important;
+    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") !important;
+    background-repeat: no-repeat !important;
+    background-position: right 8px center !important;
+}
+
+// --- Kompo Collapse/Collapsible overrides ---
+[data-sb] .vlCollapse,
+[data-sb] .vlCollapsible {
+    background: transparent !important;
+    border: none !important;
+    box-shadow: none !important;
+}
+
+[data-sb] .vlCollapseHeader,
+[data-sb] .vlCollapsibleHeader {
+    padding: 8px 0 !important;
+    background: transparent !important;
+}
+
+// --- Kompo Toggle override ---
+[data-sb] .vlToggleWrapper {
+    background: transparent !important;
+}
+
+[data-sb] .vlToggleLabel {
+    color: #b0b4c0 !important;
+    font-size: 12px !important;
+}
+
+// --- Buttons ---
+[data-sb] .sb-btn {
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    font-size: 14px;
+    font-weight: 600;
+    padding: 9px 16px;
+    transition: all 0.15s;
+    font-family: inherit;
+    white-space: nowrap;
+}
+
+[data-sb] .sb-btn:hover {
+    filter: brightness(1.15);
+    transform: translateY(-1px);
+}
+
+[data-sb] .sb-btn:active {
+    transform: translateY(0);
+}
+
+[data-sb] .sb-btn-blue  { background: #4a6cf7; color: #fff; }
+[data-sb] .sb-btn-green { background: #2ecc71; color: #fff; }
+[data-sb] .sb-btn-red   { background: #e74c3c; color: #fff; }
+[data-sb] .sb-btn-yellow { background: #f1c40f; color: #1a1a2e; }
+
+[data-sb] .sb-btn-ghost {
+    background: rgba(255, 255, 255, 0.06);
+    color: #ccc;
+    border: 1px solid rgba(255, 255, 255, 0.1);
+}
+
+[data-sb] .sb-btn-ghost:hover {
+    background: rgba(255, 255, 255, 0.12);
+}
+
+[data-sb] .sb-btn-sm {
+    padding: 7px 12px;
+    font-size: 13px;
+}
+
+[data-sb] .sb-btn-icon {
+    padding: 7px 10px;
+    font-size: 16px;
+    min-width: 32px;
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+}
+
+// --- Step list items ---
+[data-sb] .sb-step-list-inner {
+    display: flex;
+    flex-direction: column;
+    gap: 2px;
+}
+
+[data-sb] .sb-step-item {
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    padding: 6px 8px;
+    border-radius: 6px;
+    cursor: pointer;
+    transition: background 0.15s;
+    font-size: 12px;
+
+    &:hover { background: rgba(108, 138, 255, 0.1); }
+    &.sb-active {
+        background: rgba(108, 138, 255, 0.2);
+        border: 1px solid rgba(108, 138, 255, 0.3);
+    }
+}
+
+[data-sb] .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-active & { background: #6c8aff; color: #fff; }
+}
+
+[data-sb] .sb-step-text {
+    flex: 1;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    color: #b0b4c0;
+}
+
+[data-sb] .sb-step-icons {
+    display: flex;
+    gap: 3px;
+    flex-shrink: 0;
+    font-size: 11px;
+    color: #7a7f8e;
+}
+
+// --- Cards ---
+[data-sb] .sb-card {
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    border-radius: 8px;
+}
+
+// --- Spectator exit ---
+.sb-spectator-exit {
+    position: fixed;
+    top: 16px;
+    right: 16px;
+    z-index: 100001;
+    background: rgba(0, 0, 0, 0.7);
+    color: #fff;
+    border: 1px solid rgba(255, 255, 255, 0.2);
+    border-radius: 8px;
+    padding: 8px 16px;
+    font-size: 13px;
+    font-weight: 600;
+    cursor: pointer;
+    backdrop-filter: blur(8px);
+}
+
+// --- Labels & rows ---
+[data-sb] .sb-label {
+    font-size: 14px;
+    color: #7a7f8e;
+    min-width: 65px;
+    flex-shrink: 0;
+}
+
+[data-sb] .sb-row {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    margin-bottom: 10px;
+    flex-wrap: wrap;
+}
+
+// --- Section headers ---
+[data-sb] .sb-section-header {
+    font-size: 14px;
+    font-weight: 700;
+    color: #6c8aff;
+    cursor: pointer;
+    padding: 12px 0 8px;
+    user-select: none;
+    display: flex;
+    align-items: center;
+    gap: 6px;
+    letter-spacing: 0.3px;
+    text-transform: uppercase;
+}
+
+[data-sb] .sb-section-header:hover {
+    color: #8aa4ff;
+}
+
+[data-sb] .sb-section-divider {
+    border-top: 1px solid rgba(255, 255, 255, 0.06);
+    margin-top: 4px;
+}
+
+// --- Code blocks ---
+[data-sb] .sb-code {
+    font-family: "Fira Code", "Cascadia Code", "JetBrains Mono", monospace;
+}
+
+[data-sb] .sb-selector {
+    color: #2ecc71;
+    font-size: 12px;
+    word-break: break-all;
+    font-family: "Fira Code", monospace;
+}
+
+// --- Scrollbar ---
+[data-sb] ::-webkit-scrollbar       { width: 6px; }
+[data-sb] ::-webkit-scrollbar-track  { background: transparent; }
+[data-sb] ::-webkit-scrollbar-thumb  { background: rgba(255, 255, 255, 0.1); border-radius: 3px; }
+[data-sb] ::-webkit-scrollbar-thumb:hover { background: rgba(255, 255, 255, 0.2); }
+
+// --- Resize handles ---
+[data-sb] .sb-resize-handle {
+    position: absolute;
+    width: 12px;
+    height: 12px;
+    cursor: nwse-resize;
+    bottom: 0;
+    right: 0;
+    z-index: 2;
+}
+
+[data-sb] .sb-resize-handle::after {
+    content: "";
+    position: absolute;
+    right: 3px;
+    bottom: 3px;
+    width: 8px;
+    height: 8px;
+    border-right: 2px solid rgba(255, 255, 255, 0.15);
+    border-bottom: 2px solid rgba(255, 255, 255, 0.15);
+}
+
+[data-sb] .sb-resize-left {
+    position: absolute;
+    width: 6px;
+    top: 40px;
+    bottom: 0;
+    left: 0;
+    cursor: ew-resize;
+    z-index: 2;
+}
+
+[data-sb] .sb-resize-top {
+    position: absolute;
+    height: 6px;
+    top: 0;
+    left: 0;
+    right: 0;
+    cursor: ns-resize;
+    z-index: 2;
+}
+
+// --- Option rows ---
+[data-sb] .sb-option-row {
+    display: flex;
+    gap: 8px;
+    align-items: center;
+    padding: 10px 12px;
+    background: rgba(255, 255, 255, 0.03);
+    border-radius: 8px;
+    margin-bottom: 4px;
+    border: 1px solid rgba(255, 255, 255, 0.04);
+}
+
+// --- Badge ---
+[data-sb] .sb-badge {
+    display: inline-block;
+    font-size: 11px;
+    padding: 2px 6px;
+    border-radius: 4px;
+    background: rgba(108, 138, 255, 0.15);
+    color: #6c8aff;
+    font-weight: 600;
+}
+
+// --- Responsive ---
+@media (max-width: 600px) {
+    [data-sb] input,
+    [data-sb] select,
+    [data-sb] textarea {
+        font-size: 14px;
+        padding: 8px;
+    }
+
+    [data-sb] .sb-btn {
+        font-size: 13px;
+        padding: 8px 12px;
+    }
+
+    [data-sb] .sb-btn-sm {
+        font-size: 12px;
+        padding: 6px 10px;
+    }
+
+    [data-sb] .sb-step-btn {
+        font-size: 12px;
+        padding: 6px 10px;
+    }
+
+    [data-sb] .sb-row {
+        gap: 6px;
+        margin-bottom: 8px;
+    }
+
+    [data-sb] .sb-label {
+        font-size: 12px;
+        min-width: 50px;
+    }
+
+    [data-sb] .sb-section-header {
+        font-size: 12px;
+    }
+}