@ibgib/space-gib 0.0.33 → 0.0.34

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ibgib/space-gib",
-  "version": "0.0.33",
+  "version": "0.0.34",
   "type": "module",
   "description": "ibgib storage and provider service — SaaS at ibgib.space",
   "scripts": {
@@ -12,11 +12,11 @@
     "build:test": "tsc -p tsconfig.test.json"
   },
   "dependencies": {
-    "@ibgib/core-gib": "^0.1.87",
-    "@ibgib/helper-gib": "^0.0.39",
-    "@ibgib/ts-gib": "^0.5.36",
-    "@ibgib/web-gib": "^0.0.73",
-    "@ibgib/node-gib": "^0.0.34"
+    "@ibgib/core-gib": "^0.1.88",
+    "@ibgib/helper-gib": "^0.0.40",
+    "@ibgib/ts-gib": "^0.5.37",
+    "@ibgib/web-gib": "^0.0.74",
+    "@ibgib/node-gib": "^0.0.35"
   },
   "engines": {
     "node": ">=20.0.0"

package/src/client/AUTO-GENERATED-version.mts

@@ -8,4 +8,4 @@
 /**
  * Version of space-gib, auto-updated by the build process.
  */
-export const AUTO_GENERATED_VERSION = '0.0.33';
+export const AUTO_GENERATED_VERSION = '0.0.34';

package/src/client/cosmos/seed-cosmos-workspace.mts

@@ -0,0 +1,69 @@
+/**
+ * @module client/cosmos/seed-cosmos-workspace
+ *
+ * Seeds the in-memory @playground Cosmos ('welcome-cosmos') backed by an
+ * in-memory temporary Metaspace.
+ */
+
+import { extractErrorMsg } from '@ibgib/helper-gib/dist/helpers/utils-helper.mjs';
+import { createInMemoryTempMetaspaceAndSpace } from '@ibgib/core-gib/dist/witness/space/metaspace/metaspace-innerspace/metaspace-innerspace.mjs';
+import { createCosmosIbGib } from '@ibgib/core-gib/dist/vcs/cosmos/cosmos-helpers.mjs';
+import { Metaspace_Innerspace } from '@ibgib/core-gib/dist/witness/space/metaspace/metaspace-innerspace/metaspace-innerspace.mjs';
+import { IbGibSpaceAny } from '@ibgib/core-gib/dist/witness/space/space-base-v1.mjs';
+
+import { CosmosInfo } from '../ui/component/cosmos-navigator/cosmos-navigator.mjs';
+
+const lc = `[seed-cosmos-workspace]`;
+
+let prewarmedMetaspacePromise: Promise<{ metaspace: Metaspace_Innerspace; space: IbGibSpaceAny }> | undefined;
+let cachedSeededCosmos: CosmosInfo | undefined;
+
+/**
+ * Pre-warms the in-memory temporary metaspace in the background during cold landing
+ * so it is immediately warm and available upon Big Bang initiation.
+ */
+export function prewarmPlaygroundMetaspace(): Promise<{ metaspace: Metaspace_Innerspace; space: IbGibSpaceAny }> {
+    if (!prewarmedMetaspacePromise) {
+        console.log(`${lc} Pre-warming in-memory temporary metaspace in background...`);
+        prewarmedMetaspacePromise = createInMemoryTempMetaspaceAndSpace();
+    }
+    return prewarmedMetaspacePromise;
+}
+
+/**
+ * Seeds the initial @playground cosmos ('welcome-cosmos') without auto-generating galaxies.
+ */
+export async function seedInMemoryCosmosWorkspace(): Promise<CosmosInfo> {
+    if (cachedSeededCosmos) {
+        return cachedSeededCosmos;
+    }
+
+    try {
+        console.log(`${lc} Initializing in-memory @playground cosmos 'welcome-cosmos'...`);
+        const { metaspace, space } = await (prewarmedMetaspacePromise || prewarmPlaygroundMetaspace());
+
+        // Create the first-class CosmosIbGib
+        const cosmosName = 'welcome-cosmos';
+        const cosmosIbGib = await createCosmosIbGib({
+            cosmosName,
+            description: 'In-Memory Playground Cosmos',
+            space,
+            metaspace,
+        });
+
+        console.log(`${lc} Materialized CosmosIbGib for ${cosmosName}: ${cosmosIbGib.ib}`);
+
+        cachedSeededCosmos = {
+            id: cosmosName,
+            name: cosmosName,
+            isTemporary: true,
+            spaces: [], // No galaxies auto-created yet
+            createdAt: Date.now(),
+        };
+
+        return cachedSeededCosmos;
+    } catch (err) {
+        console.error(`${lc} Failed to seed in-memory cosmos: ${extractErrorMsg(err)}`);
+        throw err;
+    }
+}

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

@@ -0,0 +1,417 @@
+/* =========================================================================
+   Activity Bar & Multi-Space Navigation (VS Code Pattern)
+   ========================================================================= */
+
+.activity-bar {
+    width: 52px;
+    background: #03060c;
+    border-right: 1px solid var(--clr-border);
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: center;
+    padding: 0.6rem 0;
+    z-index: 25;
+    flex-shrink: 0;
+    transition: width 0.35s cubic-bezier(0.16, 1, 0.3, 1), opacity 0.3s ease;
+}
+
+.activity-bar.collapsed {
+    width: 0 !important;
+    opacity: 0;
+    pointer-events: none;
+    overflow: hidden;
+    border: none;
+    padding: 0;
+}
+
+.activity-bar.expanded {
+    width: 52px !important;
+    opacity: 1;
+    pointer-events: auto;
+}
+
+.activity-bar-top,
+.activity-bar-bottom {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+    width: 100%;
+}
+
+.activity-bar-btn {
+    width: 42px;
+    height: 42px;
+    border-radius: var(--radius-sm);
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    color: var(--clr-text-secondary);
+    position: relative;
+    transition: all var(--t-fast);
+}
+
+.activity-bar-btn:hover {
+    color: var(--clr-text-primary);
+    background: rgba(255, 255, 255, 0.05);
+}
+
+.activity-bar-btn.active {
+    color: var(--clr-accent);
+    background: rgba(120, 248, 126, 0.08);
+}
+
+.activity-bar-btn.active::before {
+    content: '';
+    position: absolute;
+    left: 0;
+    top: 6px;
+    bottom: 6px;
+    width: 2.5px;
+    border-radius: 0 2px 2px 0;
+    background: var(--clr-accent);
+}
+
+.activity-icon {
+    font-size: 1.15rem;
+    line-height: 1;
+}
+
+.activity-label {
+    font-size: 0.48rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.04em;
+    margin-top: 2px;
+    margin-left: 1px;
+}
+
+.activity-divider {
+    width: 28px;
+    height: 1px;
+    background: var(--clr-border);
+    margin: 0.25rem 0;
+}
+
+.activity-spaces-container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 0.5rem;
+    width: 100%;
+}
+
+.activity-polycosmos-btn {
+    color: #fbbf24;
+}
+
+.activity-polycosmos-btn:hover {
+    color: #fef08a;
+    background: rgba(251, 191, 36, 0.1);
+}
+
+.activity-polycosmos-btn.active {
+    color: #fbbf24;
+    background: rgba(251, 191, 36, 0.18);
+}
+
+.activity-polycosmos-btn.active::before {
+    background: #fbbf24;
+}
+
+.activity-cosmos-btn {
+    color: #c084fc;
+}
+
+.activity-cosmos-btn:hover {
+    color: #e9d5ff;
+    background: rgba(192, 132, 252, 0.1);
+}
+
+.activity-cosmos-btn.active {
+    color: #c084fc !important;
+    background: rgba(192, 132, 252, 0.18) !important;
+}
+
+.activity-cosmos-btn.active::before {
+    content: '' !important;
+    position: absolute !important;
+    left: 0 !important;
+    top: 6px !important;
+    bottom: 6px !important;
+    width: 3px !important;
+    border-radius: 0 2px 2px 0 !important;
+    background: #c084fc !important;
+    box-shadow: 0 0 10px rgba(192, 132, 252, 0.7) !important;
+}
+
+.activity-space-btn {
+    animation: space-btn-pop 0.35s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes space-btn-pop {
+    from {
+        transform: scale(0.6);
+        opacity: 0;
+    }
+
+    to {
+        transform: scale(1);
+        opacity: 1;
+    }
+}
+
+/* Cosmos Project Meta Card & Spaces Summary */
+.cosmos-meta-card {
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid var(--clr-border);
+    border-radius: var(--radius-md);
+    padding: 0.85rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+    margin-bottom: 1.25rem;
+}
+
+.cosmos-meta-row {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 0.8rem;
+}
+
+.meta-label {
+    color: var(--clr-text-secondary);
+}
+
+.meta-val {
+    font-family: var(--font-mono);
+    color: var(--clr-accent);
+    font-weight: 600;
+}
+
+.cosmos-spaces-summary {
+    display: flex;
+    flex-direction: column;
+    gap: 0.6rem;
+}
+
+.summary-header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    font-size: 0.75rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--clr-text-secondary);
+}
+
+.summary-counter {
+    background: rgba(120, 248, 126, 0.15);
+    color: var(--clr-accent);
+    padding: 0.1rem 0.45rem;
+    border-radius: 999px;
+    font-size: 0.75rem;
+    font-family: var(--font-mono);
+}
+
+.cosmos-spaces-list {
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+}
+
+.empty-list-note {
+    font-size: 0.78rem;
+    color: var(--clr-text-secondary);
+    line-height: 1.4;
+    text-align: center;
+    padding: 1.5rem 0.5rem;
+    border: 1px dashed var(--clr-border);
+    border-radius: var(--radius-sm);
+}
+
+.cosmos-space-item {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.5rem 0.65rem;
+    background: rgba(255, 255, 255, 0.02);
+    border: 1px solid var(--clr-border);
+    border-radius: var(--radius-sm);
+    font-size: 0.8rem;
+    cursor: pointer;
+    transition: all var(--t-fast);
+}
+
+.cosmos-space-item:hover {
+    border-color: var(--clr-accent);
+    background: rgba(120, 248, 126, 0.05);
+}
+
+.cosmos-space-item.active {
+    border-color: var(--clr-accent);
+    background: rgba(120, 248, 126, 0.1);
+}
+
+.space-item-name {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    color: var(--clr-text-primary);
+    font-weight: 500;
+}
+
+.space-item-icon {
+    font-family: var(--font-mono);
+    color: var(--clr-accent);
+}
+
+.space-item-type {
+    font-size: 0.68rem;
+    color: var(--clr-text-secondary);
+    font-family: var(--font-mono);
+    background: rgba(255, 255, 255, 0.04);
+    padding: 0.1rem 0.35rem;
+    border-radius: 3px;
+}
+
+.badge-text-space {
+    color: #d18aff !important;
+    background: rgba(180, 100, 255, 0.1) !important;
+    border-color: rgba(180, 100, 255, 0.25) !important;
+}
+
+/* Left Panel Views (New User POV) */
+.space-side-view {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+}
+
+.side-view-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.65rem 0.5rem 0.85rem;
+    border-bottom: 1px solid var(--clr-border);
+    margin-bottom: 1rem;
+}
+
+.side-view-title {
+    font-size: 0.78rem;
+    font-weight: 700;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+    color: var(--clr-text-secondary);
+    display: flex;
+    align-items: center;
+    gap: 0.45rem;
+}
+
+.side-icon {
+    font-family: var(--font-mono);
+    color: var(--clr-accent);
+}
+
+.side-view-actions {
+    display: flex;
+    gap: 0.25rem;
+}
+
+.side-icon-btn {
+    background: rgba(255, 255, 255, 0.04);
+    border: 1px solid var(--clr-border);
+    color: var(--clr-text-secondary);
+    width: 24px;
+    height: 24px;
+    border-radius: 4px;
+    font-size: 0.8rem;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    cursor: pointer;
+    transition: all var(--t-fast);
+}
+
+.side-icon-btn:hover {
+    color: var(--clr-accent);
+    border-color: var(--clr-border-hover);
+    background: rgba(255, 255, 255, 0.08);
+}
+
+.empty-spaces-box {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    padding: 2.5rem 0.75rem;
+    background: rgba(255, 255, 255, 0.02);
+    border: 1px dashed var(--clr-border);
+    border-radius: var(--radius-md);
+    margin-top: 0.5rem;
+}
+
+.empty-icon {
+    font-size: 2.4rem;
+    margin-bottom: 0.6rem;
+    opacity: 0.75;
+}
+
+.empty-title {
+    font-size: 0.95rem;
+    font-weight: 600;
+    color: var(--clr-text-primary);
+    margin-bottom: 0.4rem;
+}
+
+.empty-desc {
+    font-size: 0.8rem;
+    color: var(--clr-text-secondary);
+    line-height: 1.5;
+    margin-bottom: 1.25rem;
+}
+
+.btn-empty-cta {
+    background: var(--clr-accent);
+    border: none;
+    color: var(--clr-bg-deep);
+    font-weight: 600;
+    font-size: 0.8rem;
+    padding: 0.45rem 1rem;
+    border-radius: var(--radius-sm);
+    cursor: pointer;
+    box-shadow: 0 0 16px var(--clr-accent-glow);
+    transition: all var(--t-fast);
+}
+
+.btn-empty-cta:hover {
+    background: #9fffa5;
+    transform: translateY(-1px);
+}
+
+/* ── Docking Pulse for newly arrived space buttons ── */
+.space-btn-docked-pulse {
+    animation: space-dock-pulse 1.8s cubic-bezier(0.16, 1, 0.3, 1);
+}
+
+@keyframes space-dock-pulse {
+    0% {
+        transform: scale(0.85);
+        box-shadow: 0 0 24px rgba(56, 189, 248, 0.9), inset 0 0 12px rgba(56, 189, 248, 0.6);
+    }
+    30% {
+        transform: scale(1.18);
+        box-shadow: 0 0 35px rgba(56, 189, 248, 0.95), inset 0 0 18px rgba(56, 189, 248, 0.7);
+    }
+    100% {
+        transform: scale(1);
+        box-shadow: none;
+    }
+}

package/src/client/css/base.css

@@ -0,0 +1,167 @@
+/* ── Reset ── */
+*,
+*::before,
+*::after {
+    box-sizing: border-box;
+    margin: 0;
+    padding: 0;
+}
+
+html {
+    font-size: 16px;
+    -webkit-text-size-adjust: 100%;
+    height: 100%;
+    overflow: hidden;
+}
+
+body {
+    font-family: var(--font-sans);
+    background: var(--clr-bg-deep);
+    color: var(--clr-text-primary);
+    height: 100dvh;
+    overflow: hidden;
+    line-height: 1.6;
+}
+
+/* ── Global Scrollbar Customization ── */
+/* Custom scrollbar properties for Firefox */
+* {
+    scrollbar-width: thin;
+    scrollbar-color: var(--clr-accent-dim) transparent;
+}
+
+/* Chrome, Safari, Edge, Opera */
+::-webkit-scrollbar {
+    width: 6px;
+    height: 6px;
+}
+
+::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+::-webkit-scrollbar-thumb {
+    background: var(--clr-accent-dim);
+    border-radius: var(--radius-sm);
+    background-clip: padding-box;
+}
+
+::-webkit-scrollbar-thumb:hover {
+    background: var(--clr-accent);
+}
+
+/* Subtle animated background gradient */
+body::before {
+    content: '';
+    position: fixed;
+    inset: 0;
+    background:
+        radial-gradient(ellipse 80% 60% at 10% 5%, rgba(120, 248, 126, 0.06) 0%, transparent 60%),
+        radial-gradient(ellipse 60% 50% at 90% 95%, rgba(68, 170, 255, 0.05) 0%, transparent 55%);
+    pointer-events: none;
+    z-index: 0;
+}
+
+/* ── Fullscreen dialog (required by @ibgib/web-gib) ── */
+.fullscreen-dialog {
+    border: 1px solid var(--clr-border);
+    border-radius: var(--radius-lg);
+    background: var(--clr-bg-surface);
+    color: var(--clr-text-primary);
+    box-shadow: var(--shadow-dialog);
+    max-width: min(520px, 92vw);
+    width: 100%;
+    padding: 0;
+    outline: none;
+    margin: auto;
+}
+
+.fullscreen-dialog::backdrop {
+    background: rgba(0, 0, 0, 0.72);
+    backdrop-filter: blur(4px);
+}
+
+.fullscreen-dialog-content {
+    display: flex;
+    flex-direction: column;
+}
+
+.fullscreen-dialog-header {
+    padding: 1.5rem 1.5rem 0.5rem;
+    border-bottom: 1px solid var(--clr-border);
+}
+
+.fullscreen-dialog-header h2 {
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: var(--clr-accent);
+}
+
+.fullscreen-dialog-body {
+    padding: 1rem 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+
+.fullscreen-dialog-message {
+    font-size: 0.9375rem;
+    color: var(--clr-text-primary);
+    white-space: pre-wrap;
+}
+
+#fullscreen-dialog-prompt-input {
+    background: rgba(255, 255, 255, 0.04);
+    border: 1px solid var(--clr-border);
+    border-radius: var(--radius-sm);
+    padding: 0.6rem 0.75rem;
+    color: var(--clr-text-primary);
+    font-family: var(--font-sans);
+    font-size: 0.9375rem;
+    outline: none;
+    transition: border-color var(--t-fast), box-shadow var(--t-fast);
+}
+
+#fullscreen-dialog-prompt-input:focus {
+    border-color: var(--clr-accent);
+    box-shadow: 0 0 0 3px var(--clr-accent-glow);
+}
+
+#fullscreen-dialog-prompt-input.collapsed {
+    display: none;
+}
+
+.fullscreen-dialog-footer {
+    display: flex;
+    justify-content: flex-end;
+    gap: 0.5rem;
+    padding: 0.75rem 1.5rem 1.25rem;
+}
+
+.dialog-button {
+    padding: 0.5rem 1.25rem;
+    border-radius: var(--radius-sm);
+    border: 1px solid var(--clr-border);
+    background: transparent;
+    color: var(--clr-text-primary);
+    font-family: var(--font-sans);
+    font-size: 0.875rem;
+    cursor: pointer;
+    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
+}
+
+.dialog-button:first-child {
+    background: var(--clr-accent);
+    border-color: var(--clr-accent);
+    color: var(--clr-bg-deep);
+    font-weight: 600;
+}
+
+.dialog-button:first-child:hover {
+    background: #9fffa5;
+}
+
+.dialog-button:last-child:hover {
+    border-color: var(--clr-border-hover);
+    background: rgba(255, 255, 255, 0.04);
+}