@ibgib/space-gib 0.0.1

package/src/client/helpers.web.mts

@@ -0,0 +1,178 @@
+/**
+ * @module helpers.web
+ *
+ * Web-specific helper functions for space-gib.
+ */
+
+import { extractErrorMsg } from "@ibgib/helper-gib/dist/helpers/utils-helper.mjs";
+import { storageGet } from "@ibgib/web-gib/dist/storage/storage-helpers.web.mjs";
+import { initAppStorage } from "@ibgib/web-gib/dist/helpers.web.mjs";
+import { getGlobalMetaspace_waitIfNeeded } from "@ibgib/web-gib/dist/helpers.mjs";
+import { IbGibDynamicComponentMetaCtorOpts } from "@ibgib/web-gib/dist/ui/component/component-types.mjs";
+import { IbGibGlobalThisInfo } from "@ibgib/web-gib/dist/types.mjs";
+import { delay } from "@ibgib/helper-gib/dist/helpers/utils-helper.mjs";
+
+import { GLOBAL_LOG_A_LOT } from "./constants.mjs";
+import { AUTO_GENERATED_VERSION } from "./AUTO-GENERATED-version.mjs";
+import {
+    IbGibAmbientContextConfig,
+    IbGibGlobalThis_SpaceGib,
+    IbGibGlobalThis_Common,
+} from "./types.mjs";
+
+const logalot = GLOBAL_LOG_A_LOT;
+
+// ---------------------------------------------------------------------------
+// Storage initialization
+// ---------------------------------------------------------------------------
+
+export async function initIbGibStorage(config: IbGibAmbientContextConfig): Promise<void> {
+    const lc = `[${initIbGibStorage.name}]`;
+    try {
+        if (logalot) { console.log(`${lc} starting... (I: 1905af1827a34ca8a5507fe0c5085b01)`); }
+        await initAppStorage({
+            infos: [
+                {
+                    dbName: config.dbName,
+                    storeNames: [config.storeName, ...(config.additionalStoreNames ?? [])],
+                },
+            ],
+        });
+    } catch (error) {
+        console.error(`${lc} ${extractErrorMsg(error)}`);
+        throw error;
+    } finally {
+        if (logalot) { console.log(`${lc} complete.`); }
+    }
+}
+
+// ---------------------------------------------------------------------------
+// globalThis initialization
+// ---------------------------------------------------------------------------
+
+export function initIbGibGlobalThis(config: IbGibAmbientContextConfig): void {
+    const lc = `[${initIbGibGlobalThis.name}]`;
+    try {
+        if (logalot) { console.log(`${lc} starting... (I: 7be20d161bb14a498c44a42d3193bec1)`); }
+
+        if (!(globalThis as any).ibgib) {
+            (globalThis as any).ibgib = {
+                dbName_hack: config.dbName,
+                apiKeyName_hack: config.apiKeyName,
+                storeName_hack: config.storeName,
+            } satisfies IbGibGlobalThisInfo;
+        }
+
+        if (!(globalThis as any).ibgib.spaceGib) {
+            (globalThis as any).ibgib.spaceGib = {
+                version: AUTO_GENERATED_VERSION,
+                spaceShim: {},
+                fnDefaultGetAPIKey: async () => {
+                    const apiKey = await storageGet({
+                        dbName: config.dbName,
+                        storeName: config.storeName,
+                        key: config.apiKeyName,
+                    });
+                    return apiKey ?? '';
+                },
+                dbName_hack: config.dbName,
+                apiKeyName_hack: config.apiKeyName,
+                storeName_hack: config.storeName,
+            } satisfies IbGibGlobalThis_SpaceGib;
+        }
+    } catch (error) {
+        console.error(`${lc} ${extractErrorMsg(error)}`);
+        throw error;
+    } finally {
+        if (logalot) { console.log(`${lc} complete.`); }
+    }
+}
+
+// ---------------------------------------------------------------------------
+// GlobalThis accessors
+// ---------------------------------------------------------------------------
+
+export function getIbGibGlobalThis_SpaceGib(
+    config?: IbGibAmbientContextConfig
+): IbGibGlobalThis_SpaceGib {
+    if (!(globalThis as any).ibgib?.spaceGib) {
+        if (!config) {
+            throw new Error(`Global context not initialized and config not provided.`);
+        }
+        initIbGibGlobalThis(config);
+    }
+    return (globalThis as any).ibgib.spaceGib as IbGibGlobalThis_SpaceGib;
+}
+
+export function getIbGibGlobalThis_Common(): IbGibGlobalThis_Common {
+    const g = (globalThis as any).ibgib?.spaceGib;
+    if (!g) {
+        throw new Error(`(UNEXPECTED) globalThis.ibgib.spaceGib not initialized.`);
+    }
+    return g as IbGibGlobalThis_Common;
+}
+
+// ---------------------------------------------------------------------------
+// API key helper
+// ---------------------------------------------------------------------------
+
+export function getDefaultFnGetAPIKey(): () => Promise<string> {
+    return async () => {
+        const gb = getIbGibGlobalThis_SpaceGib();
+        return (await storageGet({
+            dbName: gb.dbName_hack,
+            storeName: gb.storeName_hack,
+            key: gb.apiKeyName_hack,
+        })) ?? '';
+    };
+}
+
+// ---------------------------------------------------------------------------
+// Dynamic bootstrap loading
+// ---------------------------------------------------------------------------
+
+export async function dynamicallyLoadBootstrapScript(path: string): Promise<void> {
+    const lc = `[${dynamicallyLoadBootstrapScript.name}]`;
+    try {
+        if (logalot) { console.log(`${lc} starting... (I: 3123b18eb29b480bad056a9a029b9ad4)`); }
+        const module = await import(path);
+        await module.bootstrapSpaceGibApp();
+    } catch (error) {
+        console.error(`${lc} ${extractErrorMsg(error)}`);
+        throw error;
+    } finally {
+        if (logalot) { console.log(`${lc} complete.`); }
+    }
+}
+
+// ---------------------------------------------------------------------------
+// Component constructor args helper
+// ---------------------------------------------------------------------------
+
+export function getComponentCtorArg(): IbGibDynamicComponentMetaCtorOpts {
+    const fnGetMetaspace = async () => getGlobalMetaspace_waitIfNeeded();
+
+    const bootstrapPromiseWrapper = new Promise<void>(async (resolve, reject) => {
+        try {
+            let maxTries = 100_000;
+            let counter = 0;
+            let bootstrapPromise: Promise<void> | undefined;
+            do {
+                bootstrapPromise =
+                    getIbGibGlobalThis_SpaceGib()?.bootstrapPromise;
+                counter++;
+                if (counter > maxTries) { break; }
+                await delay(10);
+            } while (bootstrapPromise === undefined);
+            if (!bootstrapPromise) {
+                throw new Error(`Timed out waiting for bootstrapPromise. (E: ceb3ba5261994476900e4a623c0e9d10)`);
+            }
+            await bootstrapPromise;
+            resolve();
+        } catch (error) {
+            reject(error);
+        }
+    });
+
+    return { fnGetMetaspace, bootstrapPromise: bootstrapPromiseWrapper };
+}

package/src/client/index.html

@@ -0,0 +1,147 @@
+<!DOCTYPE html>
+<html lang="en-US">
+
+<head>
+  <meta charset="utf-8" />
+  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+  <!--
+    HTML_META_APP_ID: Used by isExecutingInBlankGibWebAppProper() to detect
+    whether code is running in the top-level shell vs. an embedded iframe.
+    The content value MUST be unique per app.
+  -->
+  <meta name="ibgib-app-id" content="0c45ac92e668410190b115512d5e2d51" />
+  <meta name="description"
+    content="space-gib — ibgib durable storage and SaaS provider. Store, retrieve, and manage ibgib data in a decentralized, content-addressed space." />
+  <title>space-gib · ibgib.space</title>
+  <link rel="stylesheet" type="text/css" href="style.css">
+  <script type="module" src="script.mjs" defer></script>
+  <script type="module" src="index.mjs" defer></script>
+</head>
+
+<body>
+  <!--
+    REQUIRED: fullscreen-dialog
+    This block is required by @ibgib/web-gib helper functions (alertUser,
+    promptForText, promptForSecret, promptForConfirm). Do not remove or rename
+    the element IDs prefixed with "fullscreen-dialog-".
+  -->
+  <dialog id="fullscreen-dialog" class="fullscreen-dialog">
+    <div id="fullscreen-dialog-content" class="fullscreen-dialog-content">
+      <div id="fullscreen-dialog-header" class="fullscreen-dialog-header">
+        <h2 id="fullscreen-dialog-title"></h2>
+      </div>
+      <div id="fullscreen-dialog-body" class="fullscreen-dialog-body">
+        <div id="fullscreen-dialog-message" class="fullscreen-dialog-message"></div>
+        <input type="text" id="fullscreen-dialog-prompt-input" class="collapsed">
+      </div>
+      <div id="fullscreen-dialog-footer" class="fullscreen-dialog-footer">
+        <button id="fullscreen-dialog-ok-button" class="dialog-button">OK</button>
+        <button id="fullscreen-dialog-cancel-button" class="dialog-button">Cancel</button>
+      </div>
+    </div>
+  </dialog>
+
+  <!-- =====================================================================
+    SPACE-GIB SHELL
+    This is the Phase 1 shell scaffold. The full four-panel UI will be
+    wired up in Phase 1b / 2 alongside the shell service.
+  ===================================================================== -->
+
+  <div id="app-root" class="app-root">
+
+    <!-- Header Panel -->
+    <header id="header-panel" class="header-panel">
+      <div class="header-content">
+        <button id="btn-left-panel-toggle" class="panel-toggle-btn" aria-label="Toggle Left Panel">☰</button>
+        <a id="space-gib-title-link" href="/" class="brand-link">
+          <span class="brand-icon">◈</span>
+          <span class="brand-name">space<span class="brand-accent">-</span>gib</span>
+        </a>
+        <nav class="header-nav" aria-label="Main navigation">
+          <a href="/docs" class="nav-link">Docs</a>
+          <a href="/api" class="nav-link">API</a>
+        </nav>
+        <button id="btn-right-panel-toggle" class="panel-toggle-btn" aria-label="Toggle Right Panel">◨</button>
+      </div>
+    </header>
+
+    <!-- Middle Content Row -->
+    <div class="middle-row">
+      <!-- Left Panel -->
+      <aside id="left-panel" class="side-panel left-panel collapsed">
+        <div class="panel-content-inner">
+          <p class="placeholder-text">Left Panel Content</p>
+        </div>
+      </aside>
+      
+      <!-- Left Resizer -->
+      <div id="left-resizer" class="resizer resizer-v"></div>
+
+      <!-- Center Panel -->
+      <main id="center-panel" class="center-panel">
+        <div class="center-panel-content">
+          <section class="hero-section">
+            <div class="hero-glyph" aria-hidden="true">◈</div>
+            <h1 class="hero-title">space-gib</h1>
+            <p class="hero-tagline">
+              Durable, content-addressed ibgib storage.<br>
+              Your data, your keystone, your space.
+            </p>
+            <div class="cta-row">
+              <button id="btn-create-keystone" class="cta-btn cta-primary">Create Keystone</button>
+              <a href="/docs" class="cta-btn cta-secondary">Learn More</a>
+            </div>
+          </section>
+
+          <!-- Status / health indicator -->
+          <section class="status-section" id="status-section" aria-live="polite">
+            <div id="engine-status" class="status-badge status-loading">
+              ⏳ Initialising ibgib engine…
+            </div>
+          </section>
+
+          <!-- DEV TOOLS — remove or hide once WS sync is confirmed working -->
+          <section class="dev-panel" id="dev-panel" aria-label="Developer tools">
+            <h2 class="dev-panel-title">Dev Tools</h2>
+            <div class="dev-panel-row">
+              <button id="btn-print-dev-state" class="dev-btn">Print Dev State</button>
+              <button id="btn-create-domain-keystone" class="dev-btn">1. Create Domain Keystone (I)</button>
+              <button id="btn-create-test-ibgib" class="dev-btn" disabled>2. Create Test IbGib (X)</button>
+              <button id="btn-create-session-keystone" class="dev-btn" disabled>3. Create Session Keystone (S)</button>
+              <button id="btn-evolve-domain-keystone" class="dev-btn" disabled>4. Evolve Domain Keystone (I^I1)</button>
+              <button id="btn-perform-sync" class="dev-btn" disabled>5. Perform Sync Handshake (S)</button>
+              <button id="btn-test-ws" class="dev-btn">Test WebSocket Echo</button>
+            </div>
+            <pre id="dev-panel-log" class="dev-panel-log" aria-live="polite" aria-label="Dev log"></pre>
+          </section>
+        </div>
+      </main>
+
+      <!-- Right Resizer -->
+      <div id="right-resizer" class="resizer resizer-v"></div>
+
+      <!-- Right Panel -->
+      <aside id="right-panel" class="side-panel right-panel collapsed">
+        <div class="panel-content-inner">
+          <p class="placeholder-text">Right Panel Content</p>
+        </div>
+      </aside>
+    </div>
+
+    <!-- Footer Resizer -->
+    <div id="footer-resizer" class="resizer resizer-h"></div>
+
+    <!-- Footer Panel -->
+    <footer id="footer-panel" class="footer-panel">
+      <p class="footer-text">
+        <span>© ibgib contributors</span> ·
+        <a href="https://ibgib.space" class="footer-link">ibgib.space</a> ·
+        <a href="https://github.com/ibgib" class="footer-link" target="_blank" rel="noopener">GitHub</a>
+      </p>
+    </footer>
+
+  </div>
+
+</body>
+
+</html>

package/src/client/index.mts

@@ -0,0 +1,59 @@
+import { extractErrorMsg } from '@ibgib/helper-gib/dist/helpers/utils-helper.mjs';
+
+import { GLOBAL_LOG_A_LOT, APP_CONFIG } from './constants.mjs';
+import {
+    initIbGibStorage,
+    initIbGibGlobalThis,
+    dynamicallyLoadBootstrapScript,
+} from './helpers.web.mjs';
+import { initDevTools } from './dev-tools.mjs';
+
+initIbGibGlobalThis(APP_CONFIG);
+
+const logalot = GLOBAL_LOG_A_LOT;
+
+/**
+ * hmm
+ * Initiates startup without blocking DOMContentLoaded.
+ *
+ * Sequence:
+ *   1. Init IndexedDB storage
+ *   2. Dynamically import bootstrap.mts — the heavy ibgib graph loads here
+ */
+async function spinOffStartup(): Promise<void> {
+    const lc = `[${spinOffStartup.name}]`;
+    try {
+        if (logalot) { console.log(`${lc} starting... (I: 3d893846d02c4ff49181f9b8e586eb74)`); }
+        console.time(lc);
+
+        document.addEventListener('DOMContentLoaded', async () => {
+            try {
+                console.timeLog(lc, 'DOMContentLoaded fired');
+
+                await initIbGibStorage(APP_CONFIG);
+                console.timeLog(lc, 'initIbGibStorage complete');
+
+                await dynamicallyLoadBootstrapScript('./bootstrap.mjs');
+                console.timeLog(lc, 'dynamicallyLoadBootstrapScript complete');
+
+                initDevTools();
+                console.timeLog(lc, 'initDevTools complete');
+
+                console.timeEnd(lc);
+            } catch (error) {
+                console.error(`${lc} ${extractErrorMsg(error)}`);
+                throw error;
+            }
+        });
+
+    } catch (error) {
+        console.timeEnd(lc);
+        debugger; // error in index.mts — investigate immediately
+        console.error(`${lc} ${extractErrorMsg(error)}`);
+        throw error;
+    } finally {
+        if (logalot) { console.log(`${lc} complete.`); }
+    }
+}
+
+spinOffStartup();

package/src/client/script.mts

@@ -0,0 +1,13 @@
+/**
+ * script.mts
+ *
+ * Early initialization script for the space-gib SPA.
+ * Runs as soon as the HTML is parsed (before DOMContentLoaded).
+ */
+
+console.log('space-gib early script executing...');
+
+import { getSpaceGibShellSvc } from "./ui/shell/space-gib-shell-service.mjs";
+
+// Initialize the UI shell singleton
+getSpaceGibShellSvc();