@ibgib/space-gib 0.0.34 → 0.0.36

package/dist/client/css/activity-bar.css

@@ -290,18 +290,36 @@
 
 /* Left Panel Views (New User POV) */
 .space-side-view {
-    display: flex;
+    display: none;
     flex-direction: column;
     height: 100%;
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+    box-sizing: border-box;
+}
+
+/* Force flex column whenever the side-view is visible, overriding any inline display: block */
+.space-side-view:not([style*="display: none"]):not([style*="display:none"]),
+.space-side-view.active {
+    display: flex !important;
+    flex-direction: column !important;
+}
+
+.space-side-view[style*="display: none"],
+.space-side-view[style*="display:none"] {
+    display: none !important;
 }
 
 .side-view-header {
     display: flex;
     align-items: center;
     justify-content: space-between;
-    padding: 0.65rem 0.5rem 0.85rem;
+    padding: 0.35rem 0.5rem 0.4rem;
     border-bottom: 1px solid var(--clr-border);
-    margin-bottom: 1rem;
+    margin-bottom: 0.35rem;
+    flex: 0 0 auto !important;
+    flex-shrink: 0 !important;
 }
 
 .side-view-title {

package/dist/client/css/layout.css

@@ -204,6 +204,10 @@
 .left-panel {
     width: var(--left-panel-width);
     border-right: 1px solid var(--clr-border);
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    overflow: hidden;
 }
 
 .left-panel.collapsed {
@@ -227,6 +231,27 @@
     min-width: 150px;
     height: 100%;
     overflow-y: auto;
+    box-sizing: border-box;
+}
+
+.left-panel-content {
+    padding: 0.35rem 0.5rem 0.5rem !important;
+    overflow: hidden !important;
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+    box-sizing: border-box;
+}
+
+.left-panel-content > .space-side-view:not([style*="display: none"]):not([style*="display:none"]),
+.left-panel-content > .space-side-view.active {
+    display: flex !important;
+    flex-direction: column !important;
+    height: 100% !important;
+    flex: 1 1 0px !important;
+    min-height: 0 !important;
+    overflow: hidden !important;
+    box-sizing: border-box !important;
 }
 
 .placeholder-text {
@@ -586,7 +611,7 @@ space-gib-cosmos-navigator {
     overflow: visible !important;
 }
 
-/* ── Code Space File Explorer & Timeline Containers (Zero vertical margin) ── */
+/* ── Code Space File Explorer & Timeline Containers ── */
 .code-file-explorer-container {
     width: 100%;
     display: flex;
@@ -594,8 +619,17 @@ space-gib-cosmos-navigator {
     margin: 0 !important;
     padding: 0 !important;
     gap: 0 !important;
-    overflow-y: auto;
-    overflow-x: hidden;
+    overflow: hidden;
+    position: relative;
+    z-index: 30;
+    flex: 1 1 0px;
+    min-height: 76px;
+}
+
+.code-file-explorer-container:has(space-gib-file-explorer[collapsed]) {
+    flex: 0 0 auto !important;
+    height: auto !important;
+    min-height: 0 !important;
 }
 
 .code-file-explorer-container space-gib-file-explorer,
@@ -603,6 +637,39 @@ space-gib-file-explorer {
     display: flex !important;
     flex-direction: column !important;
     width: 100% !important;
+    height: 100%;
+    min-height: 0;
+    margin: 0 !important;
+    padding: 0 !important;
+}
+
+.code-changes-container {
+    width: 100%;
+    display: flex;
+    flex-direction: column;
+    margin: 0 !important;
+    padding: 0 !important;
+    gap: 0 !important;
+    overflow: hidden;
+    position: relative;
+    z-index: 20;
+    flex: 1 1 0px;
+    min-height: 32px;
+}
+
+.code-changes-container:has(space-gib-changes[collapsed]) {
+    flex: 0 0 auto !important;
+    height: auto !important;
+    min-height: 0 !important;
+}
+
+.code-changes-container space-gib-changes,
+space-gib-changes {
+    display: flex !important;
+    flex-direction: column !important;
+    width: 100% !important;
+    height: 100%;
+    min-height: 0;
     margin: 0 !important;
     padding: 0 !important;
 }
@@ -614,8 +681,17 @@ space-gib-file-explorer {
     margin: 0 !important;
     padding: 0 !important;
     gap: 0 !important;
-    overflow-y: auto;
-    overflow-x: hidden;
+    overflow: hidden;
+    position: relative;
+    z-index: 10;
+    flex: 1 1 0px;
+    min-height: 32px;
+}
+
+.code-timeline-container:has(space-gib-timeline[collapsed]) {
+    flex: 0 0 auto !important;
+    height: auto !important;
+    min-height: 0 !important;
 }
 
 .code-timeline-container space-gib-timeline,
@@ -623,10 +699,55 @@ space-gib-timeline {
     display: flex !important;
     flex-direction: column !important;
     width: 100% !important;
+    height: 100%;
+    min-height: 0;
     margin: 0 !important;
     padding: 0 !important;
 }
 
+/* ── Accordion Horizontal Resizers ── */
+.accordion-resizer {
+    height: 6px;
+    background: transparent;
+    cursor: row-resize;
+    position: relative;
+    z-index: 25;
+    flex: 0 0 6px;
+    margin: 1px 0;
+    transition: background 0.15s ease;
+}
+
+.accordion-resizer::before {
+    content: '';
+    position: absolute;
+    top: -4px;
+    bottom: -4px;
+    left: 0;
+    right: 0;
+    z-index: 26;
+}
+
+.accordion-resizer:hover,
+.accordion-resizer.active {
+    background: var(--clr-accent, #78f87e);
+}
+
+.code-file-explorer-container:has(space-gib-file-explorer[collapsed]) + #resizer-explorer-changes {
+    display: none !important;
+}
+
+#resizer-explorer-changes:has(+ .code-changes-container:has(space-gib-changes[collapsed])) {
+    display: none !important;
+}
+
+.code-changes-container:has(space-gib-changes[collapsed]) + #resizer-changes-timeline {
+    display: none !important;
+}
+
+#resizer-changes-timeline:has(+ .code-timeline-container:has(space-gib-timeline[collapsed])) {
+    display: none !important;
+}
+
 /* ── Right Panel & Chat View Container ── */
 .right-panel-content {
     padding: 0 !important;

package/dist/client/css/tutorial.css

@@ -0,0 +1,327 @@
+/**
+ * tutorial.css — Styles for the Space-Gib Interactive Tutorial & Spotlight Tour
+ */
+
+.tutorial-overlay-container {
+    position: fixed;
+    inset: 0;
+    z-index: 10000;
+    pointer-events: none;
+    overflow: hidden;
+    transition: opacity 0.3s ease;
+}
+
+/* Semi-transparent dimmer backdrop (active only when no spotlight target) */
+.tutorial-backdrop {
+    position: absolute;
+    inset: 0;
+    background: rgba(8, 10, 15, 0.82);
+    backdrop-filter: blur(4px);
+    -webkit-backdrop-filter: blur(4px);
+    pointer-events: auto;
+    opacity: 0;
+    transition: opacity 0.3s ease;
+}
+
+.tutorial-backdrop.backdrop-active {
+    opacity: 1;
+}
+
+/* Glowing spotlight ring around the active target with 100% crystal-clear cutout */
+.tutorial-spotlight-ring {
+    position: absolute;
+    border-radius: 8px;
+    background: transparent !important;
+    box-shadow: 0 0 0 9999px rgba(8, 10, 15, 0.82),
+                0 0 0 3px rgba(255, 204, 0, 0.85),
+                0 0 25px 6px rgba(255, 180, 0, 0.45);
+    pointer-events: none;
+    transition: top 0.35s cubic-bezier(0.2, 0.9, 0.3, 1),
+                left 0.35s cubic-bezier(0.2, 0.9, 0.3, 1),
+                width 0.35s cubic-bezier(0.2, 0.9, 0.3, 1),
+                height 0.35s cubic-bezier(0.2, 0.9, 0.3, 1),
+                opacity 0.25s ease;
+    z-index: 10001;
+}
+
+/* Animated Virtual Mouse Cursor */
+.tutorial-cursor {
+    position: fixed;
+    top: 0;
+    left: 0;
+    width: 32px;
+    height: 32px;
+    z-index: 10006;
+    pointer-events: none;
+    opacity: 0;
+    transform: translate(-9999px, -9999px);
+    transition: opacity 0.25s ease;
+}
+
+.tutorial-cursor.visible {
+    opacity: 1;
+}
+
+.tutorial-cursor-pointer {
+    filter: drop-shadow(0 3px 8px rgba(0, 0, 0, 0.7));
+    transition: transform 0.12s ease;
+    transform-origin: 0 0;
+}
+
+.tutorial-cursor.clicking .tutorial-cursor-pointer {
+    transform: scale(0.82);
+}
+
+.tutorial-cursor-ripple {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 36px;
+    height: 36px;
+    border-radius: 50%;
+    border: 2px solid #ffd700;
+    background: rgba(255, 215, 0, 0.25);
+    box-shadow: 0 0 16px rgba(255, 215, 0, 0.85);
+    transform: translate(-18px, -18px) scale(0);
+    opacity: 0;
+    pointer-events: none;
+}
+
+.tutorial-cursor.clicking .tutorial-cursor-ripple {
+    animation: cursor-ripple-anim 0.55s cubic-bezier(0.1, 0.8, 0.3, 1) forwards;
+}
+
+@keyframes cursor-ripple-anim {
+    0% {
+        transform: translate(-18px, -18px) scale(0.2);
+        opacity: 1;
+    }
+    100% {
+        transform: translate(-18px, -18px) scale(2.5);
+        opacity: 0;
+    }
+}
+
+/* Movable Golden Beacon Button */
+.tutorial-beacon {
+    position: absolute;
+    display: flex;
+    align-items: center;
+    gap: 8px;
+    padding: 8px 18px;
+    background: linear-gradient(135deg, #ffd700 0%, #ff9900 100%);
+    color: #121212;
+    font-family: inherit;
+    font-size: 0.95rem;
+    font-weight: 700;
+    border: 2px solid rgba(255, 255, 255, 0.8);
+    border-radius: 9999px;
+    box-shadow: 0 4px 20px rgba(255, 180, 0, 0.65), 0 0 30px rgba(255, 215, 0, 0.4);
+    cursor: pointer;
+    pointer-events: auto;
+    z-index: 10002;
+    transition: top 0.35s cubic-bezier(0.2, 0.9, 0.3, 1),
+                left 0.35s cubic-bezier(0.2, 0.9, 0.3, 1),
+                transform 0.2s ease,
+                box-shadow 0.2s ease,
+                opacity 0.25s ease;
+    animation: beacon-pulse 2s infinite ease-in-out;
+}
+
+.tutorial-beacon:hover {
+    transform: scale(1.06);
+    box-shadow: 0 6px 28px rgba(255, 190, 0, 0.85), 0 0 40px rgba(255, 230, 100, 0.6);
+}
+
+.tutorial-beacon:active {
+    transform: scale(0.96);
+}
+
+.tutorial-beacon-icon {
+    font-size: 1.15rem;
+    line-height: 1;
+}
+
+.tutorial-beacon-text {
+    letter-spacing: 0.02em;
+}
+
+@keyframes beacon-pulse {
+    0%, 100% {
+        box-shadow: 0 4px 20px rgba(255, 180, 0, 0.65), 0 0 15px rgba(255, 215, 0, 0.4);
+    }
+    50% {
+        box-shadow: 0 4px 30px rgba(255, 200, 0, 0.9), 0 0 35px rgba(255, 230, 50, 0.7);
+    }
+}
+
+/* Floating Glassmorphic Narration Card */
+.tutorial-card {
+    position: absolute;
+    width: 440px;
+    max-width: calc(100vw - 32px);
+    background: rgba(18, 22, 34, 0.95);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+    border: 1px solid rgba(255, 215, 0, 0.35);
+    border-radius: 14px;
+    box-shadow: 0 16px 40px rgba(0, 0, 0, 0.75), 0 0 20px rgba(255, 200, 0, 0.15);
+    padding: 22px 24px;
+    color: #e2e8f0;
+    pointer-events: auto;
+    z-index: 10002;
+    transition: top 0.35s cubic-bezier(0.2, 0.9, 0.3, 1),
+                left 0.35s cubic-bezier(0.2, 0.9, 0.3, 1),
+                opacity 0.25s ease;
+}
+
+.tutorial-card.placement-center {
+    top: 50% !important;
+    left: 50% !important;
+    transform: translate(-50%, -50%);
+    width: 620px;
+    border-color: rgba(255, 215, 0, 0.45);
+    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.85), 0 0 40px rgba(255, 200, 0, 0.25);
+}
+
+.tutorial-card-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    margin-bottom: 12px;
+}
+
+.tutorial-step-badge {
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.08em;
+    color: #ffd700;
+    background: rgba(255, 215, 0, 0.12);
+    padding: 4px 10px;
+    border-radius: 9999px;
+    border: 1px solid rgba(255, 215, 0, 0.3);
+}
+
+.tutorial-card-close {
+    background: none;
+    border: none;
+    color: #94a3b8;
+    font-size: 1.25rem;
+    cursor: pointer;
+    padding: 4px 8px;
+    border-radius: 6px;
+    transition: color 0.15s ease, background 0.15s ease;
+}
+
+.tutorial-card-close:hover {
+    color: #ffffff;
+    background: rgba(255, 255, 255, 0.1);
+}
+
+.tutorial-card-title {
+    margin: 0 0 12px 0;
+    font-size: 1.25rem;
+    font-weight: 700;
+    color: #ffffff;
+    line-height: 1.35;
+}
+
+.tutorial-card-body {
+    font-size: 0.92rem;
+    line-height: 1.6;
+    color: #cbd5e1;
+    margin-bottom: 20px;
+    max-height: 55vh;
+    overflow-y: auto;
+}
+
+.tutorial-card-body p {
+    margin: 0 0 10px 0;
+}
+
+.tutorial-card-body p:last-child {
+    margin-bottom: 0;
+}
+
+.tutorial-card-body strong {
+    color: #f8fafc;
+}
+
+.tutorial-card-body em {
+    color: #ffd700;
+    font-style: normal;
+}
+
+.tutorial-card-footer {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-top: 14px;
+    border-top: 1px solid rgba(255, 255, 255, 0.08);
+}
+
+.tutorial-progress-dots {
+    display: flex;
+    gap: 6px;
+}
+
+.tutorial-dot {
+    width: 8px;
+    height: 8px;
+    border-radius: 9999px;
+    background: rgba(255, 255, 255, 0.2);
+    transition: background 0.25s ease, transform 0.25s ease;
+}
+
+.tutorial-dot.active {
+    background: #ffd700;
+    transform: scale(1.25);
+    box-shadow: 0 0 8px #ffd700;
+}
+
+.tutorial-card-actions {
+    display: flex;
+    align-items: center;
+    gap: 10px;
+}
+
+.tutorial-btn-skip {
+    background: none;
+    border: none;
+    color: #94a3b8;
+    font-size: 0.85rem;
+    cursor: pointer;
+    padding: 6px 12px;
+    border-radius: 6px;
+    transition: color 0.15s ease;
+}
+
+.tutorial-btn-skip:hover {
+    color: #ffffff;
+}
+
+.tutorial-btn-next {
+    display: inline-flex;
+    align-items: center;
+    gap: 6px;
+    background: linear-gradient(135deg, #ffd700 0%, #ffaa00 100%);
+    color: #0f172a;
+    font-weight: 700;
+    font-size: 0.9rem;
+    padding: 8px 18px;
+    border: none;
+    border-radius: 8px;
+    cursor: pointer;
+    box-shadow: 0 4px 14px rgba(255, 180, 0, 0.4);
+    transition: transform 0.15s ease, box-shadow 0.15s ease;
+}
+
+.tutorial-btn-next:hover {
+    transform: translateY(-1px);
+    box-shadow: 0 6px 20px rgba(255, 180, 0, 0.6);
+}
+
+.tutorial-btn-next:active {
+    transform: translateY(1px);
+}

package/dist/client/index.html

@@ -233,6 +233,12 @@
 
             <!-- File Explorer Container (Web Component injected dynamically) -->
             <div id="code-file-explorer-container" class="code-file-explorer-container"></div>
+            <!-- Resizer between Explorer and Changes -->
+            <div id="resizer-explorer-changes" class="accordion-resizer" title="Drag to resize, double-click to reset"></div>
+            <!-- Changes / Staging Accordion Container (Web Component injected dynamically) -->
+            <div id="code-changes-container" class="code-changes-container"></div>
+            <!-- Resizer between Changes and Timeline -->
+            <div id="resizer-changes-timeline" class="accordion-resizer" title="Drag to resize, double-click to reset"></div>
             <!-- Timeline Container (Web Component injected dynamically) -->
             <div id="code-timeline-container" class="code-timeline-container"></div>
           </div>