@ibgib/space-gib 0.0.32 → 0.0.34

package/src/client/css/cosmic.css

@@ -0,0 +1,557 @@
+/* =========================================================================
+   Cosmic Big Bang & Spaces Wireframe Styles
+   ========================================================================= */
+
+/* Reflected Left Panel Toggle Icon */
+.reflected-icon {
+    display: inline-block;
+    transform: scaleX(-1);
+    font-size: 1.15rem;
+    line-height: 1;
+}
+
+/* Galaxy Brand Icon Animation */
+.brand-galaxy {
+    font-size: 1.25rem;
+    margin-left: 0.35rem;
+    display: inline-block;
+    animation: galaxy-slow-spin 30s linear infinite;
+}
+
+@keyframes galaxy-slow-spin {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}
+
+/* Spaces Workspace & Cosmic Stage */
+.spaces-workspace {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    flex: 1;
+    min-height: 0;
+    background: #000000;
+    position: relative;
+    overflow: hidden;
+}
+
+.cosmic-stage {
+    position: relative;
+    width: 100%;
+    height: calc(100vh - var(--header-h) - var(--footer-h));
+    min-height: 520px;
+    background: radial-gradient(circle at center, #070c18 0%, #000206 100%);
+    overflow: hidden;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+}
+
+/* Canvas Background */
+.cosmic-canvas {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    pointer-events: none;
+    z-index: 1;
+}
+
+/* Singularity Orb Container */
+.cosmic-singularity-container {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    z-index: 10;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    transition: transform 0.6s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease;
+}
+
+.cosmic-singularity-container.collapsed {
+    transform: translate(-50%, -50%) scale(0);
+    opacity: 0;
+    pointer-events: none;
+    visibility: hidden;
+}
+
+/* Singularity Button */
+.singularity-btn {
+    position: relative;
+    width: 130px;
+    height: 130px;
+    border-radius: 50%;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    outline: none;
+    transition: transform 0.3s ease;
+}
+
+.singularity-btn:hover {
+    transform: scale(1.08);
+}
+
+.singularity-glow {
+    position: absolute;
+    inset: 15px;
+    border-radius: 50%;
+    background: radial-gradient(circle, rgba(120, 248, 126, 0.7) 0%, rgba(68, 170, 255, 0.3) 50%, transparent 75%);
+    animation: singularity-pulse-glow 2.5s ease-in-out infinite;
+    z-index: 2;
+}
+
+@keyframes singularity-pulse-glow {
+    0%, 100% {
+        transform: scale(0.9);
+        opacity: 0.6;
+    }
+    50% {
+        transform: scale(1.3);
+        opacity: 1;
+        box-shadow: 0 0 45px rgba(120, 248, 126, 0.6), 0 0 70px rgba(68, 170, 255, 0.4);
+    }
+}
+
+.singularity-core {
+    position: relative;
+    width: 32px;
+    height: 32px;
+    border-radius: 50%;
+    background: #ffffff;
+    box-shadow: 0 0 24px #ffffff, 0 0 45px var(--clr-accent);
+    z-index: 3;
+    animation: core-shimmer 1.8s ease-in-out infinite alternate;
+}
+
+@keyframes core-shimmer {
+    from { transform: scale(0.92); opacity: 0.85; }
+    to { transform: scale(1.08); opacity: 1; }
+}
+
+.singularity-ring {
+    position: absolute;
+    border-radius: 50%;
+    border: 1px dashed;
+    pointer-events: none;
+}
+
+.ring-outer {
+    inset: 0;
+    border-color: rgba(120, 248, 126, 0.35);
+    animation: spin-clockwise 14s linear infinite;
+}
+
+.ring-middle {
+    inset: 16px;
+    border-color: rgba(180, 100, 255, 0.4);
+    animation: spin-counter-clockwise 9s linear infinite;
+}
+
+.ring-inner {
+    inset: 32px;
+    border-color: rgba(68, 170, 255, 0.5);
+    animation: spin-clockwise 5s linear infinite;
+}
+
+@keyframes spin-clockwise {
+    from { transform: rotate(0deg); }
+    to { transform: rotate(360deg); }
+}
+
+@keyframes spin-counter-clockwise {
+    from { transform: rotate(360deg); }
+    to { transform: rotate(0deg); }
+}
+
+.singularity-label {
+    position: absolute;
+    bottom: -32px;
+    white-space: nowrap;
+    font-family: var(--font-sans);
+    font-size: 0.85rem;
+    font-weight: 600;
+    letter-spacing: 0.08em;
+    text-transform: uppercase;
+    color: var(--clr-accent);
+    text-shadow: 0 0 12px rgba(120, 248, 126, 0.5);
+    z-index: 4;
+    transition: opacity 0.3s ease;
+}
+
+/* Cosmic Cluster (Post-Big Bang) */
+.cosmic-cluster {
+    position: absolute;
+    inset: 0;
+    width: 100%;
+    height: 100%;
+    z-index: 10;
+    pointer-events: none;
+    transition: opacity 0.5s ease;
+}
+
+.cosmic-cluster.hidden {
+    display: none;
+    opacity: 0;
+}
+
+.cosmic-cluster.expanded {
+    display: block;
+    opacity: 1;
+}
+
+/* Node Wrapper & Positions */
+.node-wrapper {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.4rem;
+    pointer-events: auto;
+    z-index: 10;
+}
+
+/* 1st-Order Layout:
+   - Superspace (Galaxy) sits dead center.
+   - Identity starts in top-right sector and drifts slowly towards top-right header.
+   - Robot starts in bottom-right sector and drifts slowly towards bottom-right FAB.
+*/
+.node-superspace-pos {
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.node-identity-pos {
+    top: 50%;
+    left: 50%;
+    animation: drift-identity-to-corner 28s cubic-bezier(0.2, 0.8, 0.4, 1) forwards;
+}
+
+.node-identity-pos:hover {
+    animation-play-state: paused;
+}
+
+@keyframes drift-identity-to-corner {
+    0% {
+        transform: translate(calc(-50% + 140px), calc(-50% - 100px));
+    }
+    100% {
+        transform: translate(calc(-50% + 38vw), calc(-50% - 38vh));
+    }
+}
+
+.node-agent-pos {
+    top: 50%;
+    left: 50%;
+    animation: drift-agent-to-corner 28s cubic-bezier(0.2, 0.8, 0.4, 1) forwards;
+}
+
+.node-agent-pos:hover {
+    animation-play-state: paused;
+}
+
+@keyframes drift-agent-to-corner {
+    0% {
+        transform: translate(calc(-50% + 140px), calc(-50% + 110px));
+    }
+    100% {
+        transform: translate(calc(-50% + 38vw), calc(-50% + 38vh));
+    }
+}
+
+/* Node Buttons */
+.cosmic-node-btn {
+    position: relative;
+    width: 76px;
+    height: 76px;
+    border-radius: 50%;
+    background: rgba(11, 17, 32, 0.85);
+    border: 2px solid rgba(120, 248, 126, 0.35);
+    backdrop-filter: blur(14px);
+    -webkit-backdrop-filter: blur(14px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8), 0 0 20px rgba(120, 248, 126, 0.15);
+    outline: none;
+    transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.cosmic-node-btn:hover {
+    transform: scale(1.12);
+    border-color: var(--clr-accent);
+    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.9), 0 0 28px rgba(120, 248, 126, 0.45);
+}
+
+.node-emoji {
+    font-size: 2rem;
+    line-height: 1;
+    z-index: 2;
+    transition: transform 0.25s ease;
+}
+
+.cosmic-node-btn:hover .node-emoji {
+    transform: scale(1.1);
+}
+
+.node-caption {
+    font-size: 0.78rem;
+    font-weight: 600;
+    letter-spacing: 0.06em;
+    text-transform: uppercase;
+    color: var(--clr-text-secondary);
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.8);
+    pointer-events: none;
+    white-space: nowrap;
+}
+
+.galaxy-node {
+    border-color: rgba(180, 100, 255, 0.5);
+    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.8), 0 0 22px rgba(180, 100, 255, 0.25);
+}
+
+.galaxy-node:hover {
+    border-color: #d18aff;
+    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.9), 0 0 32px rgba(180, 100, 255, 0.55);
+}
+
+.galaxy-orbit-ring {
+    position: absolute;
+    inset: -12px;
+    border-radius: 50%;
+    border: 1px dashed rgba(180, 100, 255, 0.3);
+    animation: spin-clockwise 16s linear infinite;
+    pointer-events: none;
+}
+
+/* Second-Order Satellites (Around Galaxy) */
+.superspace-satellites {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    width: 0;
+    height: 0;
+    pointer-events: none;
+    transition: all 0.4s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.superspace-satellites.collapsed {
+    opacity: 0;
+    transform: scale(0.2);
+}
+
+.superspace-satellites.unfolded {
+    opacity: 1;
+    pointer-events: auto;
+    transform: scale(1);
+}
+
+.satellite-wrapper {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.3rem;
+    pointer-events: auto;
+    transition: transform 0.35s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+/* Symmetrically centered above the galaxy node: midpoint is 0px (perfect alignment) */
+.sat-code-pos {
+    transform: translate(calc(-50% - 85px), calc(-50% - 85px));
+}
+
+.sat-notes-pos {
+    transform: translate(calc(-50% + 85px), calc(-50% - 85px));
+}
+
+.satellite-node-btn {
+    position: relative;
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    background: rgba(5, 8, 15, 0.92);
+    border: 2px solid rgba(68, 170, 255, 0.6);
+    backdrop-filter: blur(12px);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7), 0 0 16px rgba(68, 170, 255, 0.3);
+    outline: none;
+    transition: all 0.25s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+.satellite-node-btn:hover {
+    transform: scale(1.15);
+    border-color: #66c2ff;
+    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.8), 0 0 24px rgba(68, 170, 255, 0.6);
+}
+
+.satellite-emoji {
+    font-family: var(--font-mono);
+    font-size: 1.15rem;
+    font-weight: 700;
+    color: #44aaff;
+    line-height: 1;
+}
+
+.sat-notes-pos .satellite-node-btn {
+    border-color: rgba(255, 204, 68, 0.6);
+    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.7), 0 0 16px rgba(255, 204, 68, 0.3);
+}
+
+.sat-notes-pos .satellite-node-btn:hover {
+    border-color: #ffe066;
+    box-shadow: 0 8px 26px rgba(0, 0, 0, 0.8), 0 0 24px rgba(255, 204, 68, 0.6);
+}
+
+.sat-notes-pos .satellite-emoji {
+    font-family: var(--font-sans);
+    font-size: 1.25rem;
+}
+
+.satellite-caption {
+    font-size: 0.72rem;
+    font-weight: 600;
+    letter-spacing: 0.04em;
+    text-transform: uppercase;
+    color: var(--clr-text-primary);
+    white-space: nowrap;
+    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.9);
+}
+
+/* Shooting Animations */
+.shooting-to-top-right {
+    animation: none !important;
+    transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease !important;
+    transform: translate(calc(45vw - 120px), -45vh) scale(0.25) !important;
+    opacity: 0 !important;
+    pointer-events: none !important;
+}
+
+.identity-active-highlight {
+    border-radius: var(--radius-lg, 20px) !important;
+    animation: identity-glow-ring 2s ease-in-out infinite alternate;
+}
+
+@keyframes identity-glow-ring {
+    from {
+        box-shadow: 0 0 8px rgba(120, 248, 126, 0.25);
+    }
+    to {
+        box-shadow: 0 0 22px rgba(120, 248, 126, 0.8), 0 0 35px rgba(68, 170, 255, 0.5);
+    }
+}
+
+.shooting-to-bottom-right {
+    animation: none !important;
+    transition: transform 0.65s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.5s ease !important;
+    transform: translate(calc(45vw - 80px), calc(45vh - 70px)) scale(0.3) !important;
+    opacity: 0 !important;
+    pointer-events: none !important;
+}
+
+/* Agent FAB Container */
+.agent-fab-container {
+    position: fixed;
+    bottom: 24px;
+    right: 24px;
+    z-index: 200;
+    display: flex;
+    align-items: center;
+    gap: 0.6rem;
+    transition: transform 0.4s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
+}
+
+.agent-fab-container.hidden {
+    transform: scale(0) translateY(30px);
+    opacity: 0;
+    pointer-events: none;
+}
+
+.agent-fab-container.visible {
+    transform: scale(1) translateY(0);
+    opacity: 1;
+    pointer-events: auto;
+}
+
+.agent-fab-btn {
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    background: linear-gradient(135deg, #111d33 0%, #0d1527 100%);
+    border: 2px solid var(--clr-accent);
+    color: #fff;
+    cursor: pointer;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.75), 0 0 18px var(--clr-accent-glow);
+    transition: all 0.25s ease;
+}
+
+.agent-fab-btn:hover {
+    transform: scale(1.1);
+    box-shadow: 0 12px 36px rgba(0, 0, 0, 0.85), 0 0 28px rgba(120, 248, 126, 0.5);
+}
+
+.fab-emoji {
+    font-size: 1.85rem;
+    line-height: 1;
+}
+
+.agent-fab-badge {
+    background: rgba(11, 17, 32, 0.85);
+    border: 1px solid var(--clr-border);
+    border-radius: 999px;
+    padding: 0.25rem 0.65rem;
+    font-size: 0.75rem;
+    font-weight: 600;
+    color: var(--clr-accent);
+    box-shadow: var(--shadow-card);
+    white-space: nowrap;
+}
+
+/* Cosmic Controls (Reset Button) */
+.cosmic-controls {
+    position: absolute;
+    bottom: 24px;
+    z-index: 15;
+    transition: opacity 0.3s ease;
+}
+
+.cosmic-controls.hidden {
+    opacity: 0;
+    pointer-events: none;
+}
+
+.cosmic-reset-btn {
+    background: rgba(255, 255, 255, 0.04);
+    border: 1px solid var(--clr-border);
+    border-radius: 999px;
+    padding: 0.4rem 1.1rem;
+    font-family: var(--font-sans);
+    font-size: 0.8rem;
+    color: var(--clr-text-secondary);
+    cursor: pointer;
+    transition: all var(--t-fast);
+}
+
+.cosmic-reset-btn:hover {
+    background: rgba(255, 255, 255, 0.08);
+    border-color: var(--clr-border-hover);
+    color: var(--clr-text-primary);
+}

package/src/client/css/dev-tools.css

@@ -0,0 +1,163 @@
+/* ── Dev Tools Panel (diagnostic only — remove when WS sync confirmed) ── */
+.dev-panel {
+    max-width: 100%;
+    width: 100%;
+    margin: 0 auto;
+    padding: 1.5rem;
+    border: 1px dashed rgba(255, 204, 68, 0.35);
+    border-radius: var(--radius-md);
+    background: rgba(255, 204, 68, 0.04);
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    margin-bottom: 3rem;
+    max-height: none;
+}
+
+.dev-panel-title {
+    font-size: 0.8rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.12em;
+    color: var(--clr-warn);
+    opacity: 0.7;
+}
+
+.dev-panel-select-container {
+    display: flex;
+    align-items: center;
+    gap: 0.75rem;
+    margin-bottom: 0.5rem;
+}
+
+.dev-select {
+    background: var(--clr-bg-surface);
+    color: var(--clr-text-primary);
+    border: 1px solid rgba(255, 204, 68, 0.4);
+    padding: 0.5rem 1rem;
+    border-radius: var(--radius-sm);
+    font-family: var(--font-sans);
+    outline: none;
+    cursor: pointer;
+    font-size: 0.9rem;
+    transition: border-color var(--t-fast);
+}
+
+.dev-select:hover {
+    border-color: rgba(255, 204, 68, 0.7);
+}
+
+.dev-panel-row {
+    display: flex;
+    gap: 0.75rem;
+    flex-wrap: wrap;
+}
+
+.dev-btn {
+    padding: 0.55rem 1.25rem;
+    border-radius: var(--radius-sm);
+    background: transparent;
+    border: 1px solid rgba(255, 204, 68, 0.4);
+    color: var(--clr-warn);
+    font-family: var(--font-sans);
+    font-size: 0.875rem;
+    font-weight: 500;
+    cursor: pointer;
+    transition: background var(--t-fast), border-color var(--t-fast);
+}
+
+.dev-btn:hover:not(:disabled) {
+    background: rgba(255, 204, 68, 0.08);
+    border-color: rgba(255, 204, 68, 0.7);
+}
+
+.dev-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    border-color: rgba(255, 204, 68, 0.2);
+}
+
+.dev-panel-log {
+    font-family: var(--font-mono);
+    font-size: 0.75rem;
+    color: var(--clr-text-secondary);
+    background: rgba(0, 0, 0, 0.35);
+    border: 1px solid var(--clr-border);
+    border-radius: var(--radius-sm);
+    padding: 0.75rem 1rem;
+    max-height: 800px;
+    overflow-y: auto;
+    white-space: pre-wrap;
+    word-break: break-all;
+    min-height: 10rem;
+}
+
+/* dev tools row styles */
+.dev-panel-row-container {
+    display: flex;
+    align-items: center;
+    gap: 1.25rem;
+    border-bottom: 1px solid rgba(255, 204, 68, 0.08);
+    padding-bottom: 0.85rem;
+}
+
+.dev-panel-row-container:last-of-type {
+    border-bottom: none;
+    padding-bottom: 0;
+}
+
+.dev-panel-row-label {
+    font-family: var(--font-mono);
+    font-size: 0.85rem;
+    font-weight: 700;
+    color: var(--clr-warn);
+    min-width: 2.2rem;
+    text-align: center;
+    border: 1px solid rgba(255, 204, 68, 0.25);
+    border-radius: var(--radius-sm);
+    padding: 0.25rem 0.45rem;
+    background: rgba(255, 204, 68, 0.06);
+    user-select: none;
+}
+
+@keyframes spin-bounce {
+    0% {
+        transform: translate(0, 0) scale(1);
+    }
+    25% {
+        transform: translate(10px, -6px) scale(1.05);
+    }
+    50% {
+        transform: translate(0, -12px) scale(1.1);
+    }
+    75% {
+        transform: translate(-10px, -6px) scale(1.05);
+    }
+    100% {
+        transform: translate(0, 0) scale(1);
+    }
+}
+
+/* Collapsible Dev Tools */
+.dev-tools-collapsible {
+    margin: 1.5rem 2rem 3rem;
+    border: 1px dashed rgba(255, 204, 68, 0.3);
+    border-radius: var(--radius-md);
+    padding: 0.85rem 1.25rem;
+    background: rgba(11, 17, 32, 0.5);
+    z-index: 5;
+}
+
+.dev-tools-summary {
+    color: var(--clr-warn);
+    font-size: 0.875rem;
+    font-weight: 600;
+    cursor: pointer;
+    user-select: none;
+    outline: none;
+    padding: 0.25rem 0;
+}
+
+.dev-tools-summary:hover {
+    color: #ffe066;
+}