@ibgib/space-gib 0.0.33 → 0.0.35

package/src/client/ui/component/pitch/pitch.css

@@ -0,0 +1,295 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    background: var(--clr-bg-deep, #05080f);
+    color: var(--clr-text-primary, #f0f4fc);
+    font-family: var(--font-sans, system-ui, -apple-system, sans-serif);
+    overflow-y: auto;
+    overflow-x: hidden;
+    position: relative;
+}
+
+.pitch-root {
+    width: 100%;
+    min-height: 100%;
+    padding: 2.5rem 1.5rem 4rem;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    box-sizing: border-box;
+}
+
+.pitch-container {
+    width: 100%;
+    max-width: 900px;
+    display: flex;
+    flex-direction: column;
+    gap: 2.5rem;
+}
+
+/* ── Top Navigation Bar ── */
+.pitch-nav {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    width: 100%;
+}
+
+.pitch-return-btn {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    background: rgba(255, 255, 255, 0.05);
+    border: 1px solid var(--clr-border, rgba(255, 255, 255, 0.1));
+    border-radius: var(--radius-sm, 6px);
+    color: var(--clr-text-secondary, #b4c0d3);
+    padding: 0.45rem 0.9rem;
+    font-size: 0.85rem;
+    cursor: pointer;
+    transition: all 150ms ease;
+}
+
+.pitch-return-btn:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: var(--clr-text-primary, #fff);
+    border-color: rgba(255, 255, 255, 0.25);
+    transform: translateX(-2px);
+}
+
+.pitch-badge {
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    background: rgba(251, 191, 36, 0.1);
+    border: 1px solid rgba(251, 191, 36, 0.35);
+    border-radius: 999px;
+    padding: 0.25rem 0.8rem;
+    font-size: 0.75rem;
+    font-weight: 700;
+    color: #fde047;
+    text-transform: uppercase;
+    letter-spacing: 0.06em;
+}
+
+/* ── Hero Section ── */
+.pitch-hero {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    position: relative;
+    padding: 1.5rem 0;
+}
+
+.hero-glow {
+    position: absolute;
+    top: 50%;
+    left: 50%;
+    transform: translate(-50%, -50%);
+    width: 320px;
+    height: 180px;
+    background: radial-gradient(circle, rgba(251, 191, 36, 0.18) 0%, transparent 70%);
+    pointer-events: none;
+    z-index: 0;
+}
+
+.hero-money-icon {
+    font-size: 3rem;
+    line-height: 1;
+    margin-bottom: 0.85rem;
+    filter: drop-shadow(0 0 20px rgba(251, 191, 36, 0.6));
+    animation: float-icon 4s ease-in-out infinite;
+    z-index: 1;
+}
+
+@keyframes float-icon {
+    0%, 100% { transform: translateY(0); }
+    50% { transform: translateY(-8px); }
+}
+
+.hero-title {
+    margin: 0 0 1rem;
+    font-size: 2.25rem;
+    font-weight: 800;
+    line-height: 1.25;
+    letter-spacing: -0.02em;
+    color: var(--clr-text-primary, #f0f4fc);
+    z-index: 1;
+}
+
+.highlight-gold {
+    color: #fde047;
+    text-shadow: 0 0 24px rgba(251, 191, 36, 0.4);
+}
+
+.hero-subtitle {
+    margin: 0;
+    font-size: 1.05rem;
+    line-height: 1.6;
+    color: var(--clr-text-secondary, #b4c0d3);
+    max-width: 720px;
+    z-index: 1;
+}
+
+.hero-subtitle code {
+    background: rgba(255, 255, 255, 0.06);
+    border: 1px solid rgba(255, 255, 255, 0.1);
+    border-radius: 4px;
+    padding: 0.15rem 0.4rem;
+    font-family: var(--font-mono, monospace);
+    color: var(--clr-accent, #78f87e);
+}
+
+/* ── Pillars Grid ── */
+.pitch-pillars-grid {
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(380px, 1fr));
+    gap: 1.25rem;
+    width: 100%;
+}
+
+.pillar-card {
+    background: rgba(18, 25, 42, 0.55);
+    border: 1px solid var(--clr-border, rgba(255, 255, 255, 0.08));
+    border-radius: var(--radius-md, 12px);
+    padding: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.65rem;
+    backdrop-filter: blur(10px);
+    transition: transform 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
+}
+
+.pillar-card:hover {
+    transform: translateY(-3px);
+    border-color: rgba(255, 255, 255, 0.2);
+    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.5);
+}
+
+.pillar-card.gold-border {
+    border-color: rgba(251, 191, 36, 0.35);
+    background: rgba(251, 191, 36, 0.02);
+}
+
+.pillar-card.gold-border:hover {
+    border-color: rgba(251, 191, 36, 0.7);
+    box-shadow: 0 8px 32px rgba(251, 191, 36, 0.15);
+}
+
+.pillar-icon {
+    font-size: 1.75rem;
+    line-height: 1;
+    margin-bottom: 0.25rem;
+}
+
+.pillar-title {
+    margin: 0;
+    font-size: 1.1rem;
+    font-weight: 700;
+    color: var(--clr-text-primary, #f0f4fc);
+}
+
+.pillar-desc {
+    margin: 0;
+    font-size: 0.88rem;
+    line-height: 1.5;
+    color: var(--clr-text-secondary, #b4c0d3);
+}
+
+.pillar-desc code {
+    background: rgba(255, 255, 255, 0.05);
+    padding: 0.1rem 0.35rem;
+    border-radius: 4px;
+    font-family: var(--font-mono, monospace);
+    color: var(--clr-accent, #78f87e);
+}
+
+/* ── CTA Card ── */
+.pitch-cta-card {
+    background: radial-gradient(circle at center, rgba(251, 191, 36, 0.12) 0%, rgba(15, 20, 32, 0.85) 90%);
+    border: 1.5px solid rgba(251, 191, 36, 0.45);
+    border-radius: var(--radius-md, 14px);
+    padding: 2rem 2.25rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.6), inset 0 0 20px rgba(251, 191, 36, 0.08);
+}
+
+.cta-header {
+    display: flex;
+    align-items: center;
+    gap: 1.25rem;
+}
+
+.cta-emoji {
+    font-size: 2.5rem;
+    line-height: 1;
+}
+
+.cta-heading-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.35rem;
+}
+
+.cta-title {
+    margin: 0;
+    font-size: 1.35rem;
+    font-weight: 800;
+    color: #fde047;
+}
+
+.cta-desc {
+    margin: 0;
+    font-size: 0.925rem;
+    line-height: 1.5;
+    color: var(--clr-text-secondary, #b4c0d3);
+}
+
+.cta-actions {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    flex-wrap: wrap;
+}
+
+.cta-btn {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.65rem 1.4rem;
+    border-radius: var(--radius-sm, 6px);
+    font-family: inherit;
+    font-size: 0.9rem;
+    font-weight: 700;
+    cursor: pointer;
+    transition: all 150ms ease;
+    border: 1px solid transparent;
+}
+
+.cta-btn.primary {
+    background: linear-gradient(135deg, #fde047 0%, #d97706 100%);
+    color: #05080f;
+    box-shadow: 0 4px 18px rgba(251, 191, 36, 0.4);
+}
+
+.cta-btn.primary:hover {
+    transform: translateY(-2px);
+    box-shadow: 0 6px 26px rgba(251, 191, 36, 0.65);
+    background: linear-gradient(135deg, #fef08a 0%, #f59e0b 100%);
+}
+
+.cta-btn.secondary {
+    background: rgba(255, 255, 255, 0.06);
+    border-color: rgba(255, 255, 255, 0.15);
+    color: var(--clr-text-primary, #f0f4fc);
+}
+
+.cta-btn.secondary:hover {
+    background: rgba(255, 255, 255, 0.12);
+    border-color: rgba(255, 255, 255, 0.3);
+    transform: translateY(-2px);
+}

package/src/client/ui/component/pitch/pitch.html

@@ -0,0 +1,97 @@
+<div class="pitch-root" id="pitch-root">
+  <div class="pitch-container">
+
+    <!-- Top Navigation / Close -->
+    <div class="pitch-nav">
+      <button id="btn-pitch-return" class="pitch-return-btn" type="button" title="Return to Workspace">
+        <span class="btn-icon">↺</span>
+        <span class="btn-text">Return to Cosmos</span>
+      </button>
+      <div class="pitch-badge">
+        <span class="badge-sparkle">✨</span>
+        <span class="badge-text">Investment Pitch</span>
+      </div>
+    </div>
+
+    <!-- Hero Section -->
+    <section class="pitch-hero">
+      <div class="hero-glow"></div>
+      <div class="hero-money-icon">💰</div>
+      <h1 class="hero-title">
+        The Future of <span class="highlight-gold">Decentralized Software</span> &amp; Digital Property
+      </h1>
+      <p class="hero-subtitle">
+        <code>space-gib</code> re-architects version control, collaborative code review, and project management
+        into a self-sovereign cryptographic Merkle graph. No centralized servers, no SaaS lock-in, and full data sovereignty.
+      </p>
+    </section>
+
+    <!-- Core Pillars Grid -->
+    <div class="pitch-pillars-grid">
+      <!-- Pillar 1 -->
+      <div class="pillar-card">
+        <div class="pillar-icon">🌐</div>
+        <h3 class="pillar-title">Beyond Centralized Silos</h3>
+        <p class="pillar-desc">
+          GitHub and GitLab hold your issues, discussions, and commit graphs hostage in proprietary relational databases.
+          <code>space-gib</code> replaces centralized SaaS with immutable Merkle DAGs owned entirely by developers.
+        </p>
+      </div>
+
+      <!-- Pillar 2 -->
+      <div class="pillar-card gold-border">
+        <div class="pillar-icon">⚡</div>
+        <h3 class="pillar-title">Inverted Soft Rel8ns</h3>
+        <p class="pillar-desc">
+          Code reviews, living companion notes, and discussions are first-class Merkle nodes linked directly to code
+          via <code>data.targetAddr</code>. Metadata points to code, keeping codebases clean for lightweight selective cloning.
+        </p>
+      </div>
+
+      <!-- Pillar 3 -->
+      <div class="pillar-card">
+        <div class="pillar-icon">🌿</div>
+        <h3 class="pillar-title">Multi-Space Worktree Topology</h3>
+        <p class="pillar-desc">
+          Branches operate like lightweight git worktrees across specialized peer spaces (codebases, discussions, docs, and assets).
+          Users can project, clone, and merge spaces independently or as unified superspaces.
+        </p>
+      </div>
+
+      <!-- Pillar 4 -->
+      <div class="pillar-card">
+        <div class="pillar-icon">🔐</div>
+        <h3 class="pillar-title">Deterministic Attribution</h3>
+        <p class="pillar-desc">
+          Zero-knowledge Keystones provide verifiable cryptographic identity and permissionless sync across edge devices
+          and federated hubs without requiring centralized email/password accounts.
+        </p>
+      </div>
+    </div>
+
+    <!-- Investment / Call to Action Section -->
+    <section class="pitch-cta-card">
+      <div class="cta-header">
+        <span class="cta-emoji">🌟</span>
+        <div class="cta-heading-group">
+          <h2 class="cta-title">Join the Cosmic Syndicate</h2>
+          <p class="cta-desc">
+            We are opening strategic seed participation for visionaries, developer advocates, and decentralized infrastructure funds.
+          </p>
+        </div>
+      </div>
+
+      <div class="cta-actions">
+        <button id="btn-pitch-invest" class="cta-btn primary" type="button">
+          <span class="btn-emoji">💰</span>
+          <span>Express Investment Interest</span>
+        </button>
+        <button id="btn-pitch-contact" class="cta-btn secondary" type="button">
+          <span class="btn-emoji">✉️</span>
+          <span>Contact Founders</span>
+        </button>
+      </div>
+    </section>
+
+  </div>
+</div>

package/src/client/ui/component/pitch/pitch.mts

@@ -0,0 +1,135 @@
+import thisCss from "./pitch.css";
+import thisHtml from "./pitch.html";
+
+import { ROOT_ADDR } from "@ibgib/ts-gib/dist/V1/constants.mjs";
+import { IbGibAddr } from "@ibgib/ts-gib/dist/types.mjs";
+import { IbGib_V1 } from "@ibgib/ts-gib/dist/V1/types.mjs";
+import { extractErrorMsg } from "@ibgib/helper-gib/dist/helpers/utils-helper.mjs";
+import {
+    IbGibDynamicComponentMetaBase, IbGibDynamicComponentInstanceBase,
+} from "@ibgib/web-gib/dist/ui/component/ibgib-dynamic-component-bases.mjs";
+import {
+    ElementsBase, IbGibDynamicComponentInstance,
+} from "@ibgib/web-gib/dist/ui/component/component-types.mjs";
+import { getComponentCtorArg } from "@ibgib/web-gib/dist/app-bootstrap/init-orchestration.mjs";
+
+export const PITCH_COMPONENT_NAME = 'space-gib-pitch';
+
+/**
+ * Metadata factory for space-gib-pitch Web Component.
+ */
+export class PitchComponentMeta extends IbGibDynamicComponentMetaBase {
+    protected lc: string = `[${PitchComponentMeta.name}]`;
+
+    routeRegExp?: RegExp = new RegExp(`^${PITCH_COMPONENT_NAME}$`);
+    componentName = PITCH_COMPONENT_NAME;
+
+    constructor() {
+        super(getComponentCtorArg());
+        if (!customElements.get(this.componentName)) {
+            customElements.define(this.componentName, PitchComponentInstance);
+        }
+    }
+
+    async createInstance({
+        path,
+        ibGibAddr
+    }: {
+        path: string;
+        ibGibAddr: IbGibAddr;
+    }): Promise<IbGibDynamicComponentInstance> {
+        const component = document.createElement(this.componentName) as PitchComponentInstance;
+        await component.initialize({
+            ibGibAddr: ibGibAddr || ROOT_ADDR,
+            meta: this,
+            html: thisHtml,
+            css: [thisCss],
+        });
+        return component;
+    }
+}
+
+/**
+ * References to DOM elements within the pitch component Shadow Root.
+ */
+export interface PitchElements extends ElementsBase {
+    rootEl: HTMLDivElement;
+    btnReturnEl: HTMLButtonElement;
+    btnInvestEl: HTMLButtonElement;
+    btnContactEl: HTMLButtonElement;
+    contentEl: HTMLDivElement;
+}
+
+/**
+ * Concrete implementation of the space-gib-pitch component.
+ */
+export class PitchComponentInstance
+    extends IbGibDynamicComponentInstanceBase<IbGib_V1, PitchElements>
+    implements IbGibDynamicComponentInstance<IbGib_V1, PitchElements> {
+
+    protected lc: string = `[${PitchComponentInstance.name}]`;
+
+    get el(): PitchElements {
+        if (!this.elements) {
+            throw new Error(`elements is not defined in ${this.lc}`);
+        }
+        return this.elements;
+    }
+
+    override async created(): Promise<void> {
+        const lc = `${this.lc}[${this.created.name}]`;
+        try {
+            const root = this.shadowRoot!;
+            this.elements = {
+                rootEl: root.getElementById('pitch-root') as HTMLDivElement,
+                btnReturnEl: root.getElementById('btn-pitch-return') as HTMLButtonElement,
+                btnInvestEl: root.getElementById('btn-pitch-invest') as HTMLButtonElement,
+                btnContactEl: root.getElementById('btn-pitch-contact') as HTMLButtonElement,
+                contentEl: root.getElementById('pitch-root') as HTMLDivElement,
+            };
+
+            this.bindEvents();
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`);
+        }
+    }
+
+    private bindEvents(): void {
+        const lc = `${this.lc}[${this.bindEvents.name}]`;
+        if (!this.el) return;
+
+        this.el.btnReturnEl?.addEventListener('click', () => {
+            window.dispatchEvent(new CustomEvent('space-gib-pitch-closed', {
+                bubbles: true,
+                composed: true,
+            }));
+        });
+
+        this.el.btnInvestEl?.addEventListener('click', () => {
+            alert('💰 Thank you for your interest in investing in space-gib! Syndicate inquiries: invest@ibgib.space');
+            window.dispatchEvent(new CustomEvent('space-gib-pitch-interest-expressed', {
+                bubbles: true,
+                composed: true,
+                detail: { action: 'invest' }
+            }));
+        });
+
+        this.el.btnContactEl?.addEventListener('click', () => {
+            alert('✉️ Contact the founders: team@ibgib.space or join our decentralization syndicate.');
+            window.dispatchEvent(new CustomEvent('space-gib-pitch-interest-expressed', {
+                bubbles: true,
+                composed: true,
+                detail: { action: 'contact' }
+            }));
+        });
+    }
+
+    override async disconnected(): Promise<void> {
+        const lc = `${this.lc}[${this.disconnected.name}]`;
+        try {
+            // cleanup if needed
+        } catch (error) {
+            console.error(`${lc} ${extractErrorMsg(error)}`);
+        }
+    }
+}

package/src/client/ui/component/timeline/IMPLEMENTATION.md

@@ -0,0 +1,33 @@
+# space-gib-timeline Component Implementation
+
+## Overview
+`space-gib-timeline` is an accordion-style timeline component that lives in the left panel of `space-gib`, directly below the `space-gib-file-explorer` component with zero vertical margin. It displays chronological snapshots (commits/revisions) along a worktree branch.
+
+## Architecture
+- **Web Component Tag**: `<space-gib-timeline>`
+- **Meta Class**: `TimelineComponentMeta`
+- **Instance Class**: `TimelineComponentInstance`
+- **Base Class**: `IbGibDynamicComponentInstanceBase<IbGib_V1, TimelineElements>`
+- **Backing ibGib Address**: `ROOT_ADDR`
+
+## UI Elements
+1. **Accordion Header**:
+   - Chevron toggle (`▼` / `▶`)
+   - Timeline Emoji: `⏳`
+   - Branch Title: `main` (monospace)
+   - Badge: `TIMELINE` (styled identically to the file explorer's `worktree` badge)
+   - Action buttons: Collapse/Expand (`⇱`), Refresh (`⟳`)
+2. **Snapshot Stream Container**:
+   - Chronological nodes connected by a subtle vertical rail
+   - Each item shows:
+     - Hash tag (e.g., `3e8f1c2`)
+     - Optional `tip` badge for the latest snapshot
+     - Commit summary title
+     - Relative timestamp
+3. **Interactivity**:
+   - Clicking an item selects it and dispatches `space-gib-timeline-item-selected` with the snapshot details.
+   - Accordion toggle collapses or expands the snapshot stream.
+
+## Events
+- Dispatches `space-gib-timeline-item-selected`: Emitted when the user clicks a snapshot, containing `{ item: TimelineItem }`.
+- Dispatches `space-gib-timeline-refresh-requested`: Emitted when the refresh button is clicked.

package/src/client/ui/component/timeline/index.mts

@@ -0,0 +1,9 @@
+import { getComponentSvc } from "@ibgib/web-gib/dist/ui/component/ibgib-component-service.mjs";
+import { TimelineComponentMeta, TIMELINE_COMPONENT_NAME } from "./timeline.mjs";
+
+export * from "./timeline.mjs";
+
+export async function registerTimelineComponent(): Promise<void> {
+    const componentSvc = await getComponentSvc();
+    componentSvc.registerComponentMeta(new TimelineComponentMeta());
+}