@ibgib/space-gib 0.0.1

package/src/client/style.css

@@ -0,0 +1,605 @@
+/* =========================================================================
+   space-gib — style.css
+   Dark-first, glassmorphism, premium design.
+   ========================================================================= */
+
+@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&family=JetBrains+Mono:wght@400;500&display=swap');
+
+/* ── Custom properties ── */
+:root {
+    /* Palette */
+    --clr-bg-deep:      #05080f;
+    --clr-bg-surface:   #0b1120;
+    --clr-bg-glass:     rgba(11, 17, 32, 0.7);
+    --clr-border:       rgba(120, 248, 126, 0.12);
+    --clr-border-hover: rgba(120, 248, 126, 0.32);
+
+    --clr-accent:       #78f87e;
+    --clr-accent-dim:   rgba(120, 248, 126, 0.35);
+    --clr-accent-glow:  rgba(120, 248, 126, 0.15);
+
+    --clr-text-primary:   #e8f0e8;
+    --clr-text-secondary: #8fa08f;
+    --clr-text-muted:     #4a604a;
+
+    --clr-danger:       #ff5b5b;
+    --clr-warn:         #ffcc44;
+    --clr-info:         #44aaff;
+
+    /* Typography */
+    --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
+    --font-mono: 'JetBrains Mono', 'Fira Code', monospace;
+
+    /* Spacing / Layout */
+    --header-h:        60px;
+    --footer-h:        48px;
+    --radius-sm:       6px;
+    --radius-md:       12px;
+    --radius-lg:       20px;
+
+    /* Shadows */
+    --shadow-card:     0 4px 24px rgba(0,0,0,0.5), 0 0 0 1px var(--clr-border);
+    --shadow-glow:     0 0 32px var(--clr-accent-glow);
+    --shadow-dialog:   0 8px 48px rgba(0,0,0,0.8), 0 0 0 1px var(--clr-border);
+
+    /* Panel Dimensions */
+    --left-panel-width: 250px;
+    --right-panel-width: 250px;
+    --footer-panel-height: 48px;
+
+    /* Transition */
+    --t-fast: 120ms ease;
+    --t-med:  240ms ease;
+    --t-slow: 400ms cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+/* ── Reset ── */
+*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
+html { font-size: 16px; -webkit-text-size-adjust: 100%; }
+body {
+    font-family: var(--font-sans);
+    background: var(--clr-bg-deep);
+    color: var(--clr-text-primary);
+    min-height: 100dvh;
+    overflow-x: hidden;
+    line-height: 1.6;
+}
+
+/* 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;
+}
+.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);
+}
+
+/* ── App root layout ── */
+.app-root {
+    position: relative;
+    z-index: 1;
+    display: flex;
+    flex-direction: column;
+    height: 100dvh;
+    overflow: hidden;
+}
+
+.middle-row {
+    display: flex;
+    flex: 1;
+    overflow: hidden;
+    position: relative;
+}
+
+/* ── Header ── */
+.header-panel {
+    position: sticky;
+    top: 0;
+    z-index: 100;
+    height: var(--header-h);
+    background: var(--clr-bg-glass);
+    border-bottom: 1px solid var(--clr-border);
+    backdrop-filter: blur(16px);
+    -webkit-backdrop-filter: blur(16px);
+}
+.header-content {
+    max-width: 1100px;
+    margin: 0 auto;
+    height: 100%;
+    display: flex;
+    align-items: center;
+    padding: 0 1.5rem;
+    gap: 1rem;
+}
+.brand-link {
+    text-decoration: none;
+    display: flex;
+    align-items: center;
+    gap: 0.4rem;
+    font-size: 1.2rem;
+    font-weight: 700;
+    color: var(--clr-text-primary);
+    letter-spacing: -0.02em;
+    transition: color var(--t-fast);
+    margin-right: auto;
+}
+.brand-link:hover { color: var(--clr-accent); }
+.brand-icon {
+    color: var(--clr-accent);
+    font-size: 1.4rem;
+    animation: spin-slow 12s linear infinite;
+}
+.brand-accent { color: var(--clr-accent); }
+@keyframes spin-slow {
+    from { transform: rotate(0deg); }
+    to   { transform: rotate(360deg); }
+}
+.header-nav {
+    display: flex;
+    gap: 0.25rem;
+}
+.nav-link {
+    text-decoration: none;
+    color: var(--clr-text-secondary);
+    font-size: 0.875rem;
+    font-weight: 500;
+    padding: 0.35rem 0.75rem;
+    border-radius: var(--radius-sm);
+    transition: color var(--t-fast), background var(--t-fast);
+}
+.nav-link:hover {
+    color: var(--clr-text-primary);
+    background: rgba(255,255,255,0.04);
+}
+.config-btn {
+    background: none;
+    border: 1px solid var(--clr-border);
+    border-radius: var(--radius-sm);
+    padding: 0.3rem 0.6rem;
+    color: var(--clr-text-secondary);
+    cursor: pointer;
+    font-size: 1rem;
+    transition: border-color var(--t-fast), color var(--t-fast);
+}
+.config-btn:hover {
+    border-color: var(--clr-border-hover);
+    color: var(--clr-text-primary);
+}
+.config-popover {
+    position: absolute;
+    top: var(--header-h);
+    right: 1rem;
+    background: var(--clr-bg-surface);
+    border: 1px solid var(--clr-border);
+    border-radius: var(--radius-md);
+    box-shadow: var(--shadow-card);
+    padding: 0.5rem;
+    min-width: 200px;
+    margin: 0;
+}
+.config-popover-option {
+    display: block;
+    width: 100%;
+    text-align: left;
+    padding: 0.6rem 0.9rem;
+    border: none;
+    border-radius: var(--radius-sm);
+    background: transparent;
+    color: var(--clr-text-primary);
+    font-family: var(--font-sans);
+    font-size: 0.875rem;
+    cursor: pointer;
+    transition: background var(--t-fast);
+}
+.config-popover-option:hover { background: rgba(120,248,126,0.08); }
+
+/* ── Header Toggle Buttons ── */
+.panel-toggle-btn {
+    background: none;
+    border: none;
+    color: var(--clr-text-secondary);
+    font-size: 1.4rem;
+    cursor: pointer;
+    padding: 0.2rem 0.5rem;
+    transition: color var(--t-fast);
+}
+.panel-toggle-btn:hover { color: var(--clr-accent); }
+
+/* ── Center panel / main ── */
+.center-panel {
+    flex: 1;
+    display: flex;
+    flex-direction: column;
+    overflow: hidden;
+}
+.center-panel-content {
+    flex: 1;
+    overflow-y: auto;
+}
+
+/* ── Side Panels ── */
+.side-panel {
+    background: var(--clr-bg-glass);
+    overflow: hidden;
+    transition: width var(--t-fast);
+    z-index: 5;
+}
+.left-panel { 
+    width: var(--left-panel-width); 
+    border-right: 1px solid var(--clr-border);
+}
+.left-panel.collapsed { width: 0 !important; border: none; }
+
+.right-panel { 
+    width: var(--right-panel-width); 
+    border-left: 1px solid var(--clr-border);
+}
+.right-panel.collapsed { width: 0 !important; border: none; }
+
+.panel-content-inner {
+    padding: 1rem;
+    width: 100%;
+    min-width: 150px;
+    height: 100%;
+    overflow-y: auto;
+}
+.placeholder-text {
+    color: var(--clr-text-muted);
+    font-size: 0.9rem;
+    font-style: italic;
+}
+
+/* ── Resizers ── */
+.resizer {
+    background: transparent;
+    transition: background var(--t-fast);
+    z-index: 10;
+}
+.resizer:hover, .resizer:active {
+    background: var(--clr-accent-dim);
+}
+.resizer-v {
+    width: 6px;
+    cursor: col-resize;
+    margin-left: -3px;
+    margin-right: -3px;
+}
+.resizer-h {
+    height: 6px;
+    cursor: row-resize;
+    margin-top: -3px;
+    margin-bottom: -3px;
+}
+
+/* ── Hero section ── */
+.hero-section {
+    max-width: 720px;
+    margin: 0 auto;
+    padding: 6rem 1.5rem 4rem;
+    text-align: center;
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    gap: 1.25rem;
+}
+.hero-glyph {
+    font-size: 4rem;
+    color: var(--clr-accent);
+    animation: pulse-glyph 3s ease-in-out infinite;
+}
+@keyframes pulse-glyph {
+    0%, 100% { text-shadow: 0 0 0 transparent; opacity: 1; }
+    50%       { text-shadow: 0 0 30px var(--clr-accent-glow); opacity: 0.85; }
+}
+.hero-title {
+    font-size: clamp(2.5rem, 6vw, 4rem);
+    font-weight: 700;
+    letter-spacing: -0.03em;
+    background: linear-gradient(135deg, var(--clr-accent) 0%, #44aaff 100%);
+    -webkit-background-clip: text;
+    -webkit-text-fill-color: transparent;
+    background-clip: text;
+    line-height: 1.1;
+}
+.hero-tagline {
+    font-size: 1.125rem;
+    color: var(--clr-text-secondary);
+    max-width: 480px;
+    line-height: 1.7;
+}
+.cta-row {
+    display: flex;
+    gap: 0.75rem;
+    flex-wrap: wrap;
+    justify-content: center;
+    margin-top: 0.5rem;
+}
+.cta-btn {
+    padding: 0.75rem 1.75rem;
+    border-radius: var(--radius-md);
+    font-family: var(--font-sans);
+    font-size: 0.9375rem;
+    font-weight: 600;
+    cursor: pointer;
+    text-decoration: none;
+    transition: all var(--t-med);
+    display: inline-flex;
+    align-items: center;
+    gap: 0.4rem;
+}
+.cta-primary {
+    background: var(--clr-accent);
+    color: var(--clr-bg-deep);
+    border: none;
+    box-shadow: 0 0 20px var(--clr-accent-glow);
+}
+.cta-primary:hover {
+    background: #9fffa5;
+    box-shadow: 0 0 32px rgba(120,248,126,0.35);
+    transform: translateY(-1px);
+}
+.cta-secondary {
+    background: transparent;
+    color: var(--clr-text-primary);
+    border: 1px solid var(--clr-border);
+}
+.cta-secondary:hover {
+    border-color: var(--clr-border-hover);
+    background: rgba(255,255,255,0.04);
+    transform: translateY(-1px);
+}
+
+/* ── Features section ── */
+.features-section {
+    max-width: 1000px;
+    margin: 0 auto;
+    padding: 0 1.5rem 5rem;
+    display: grid;
+    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
+    gap: 1.25rem;
+}
+.feature-card {
+    background: var(--clr-bg-glass);
+    border: 1px solid var(--clr-border);
+    border-radius: var(--radius-lg);
+    padding: 1.75rem;
+    backdrop-filter: blur(12px);
+    transition: border-color var(--t-med), box-shadow var(--t-med), transform var(--t-med);
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+}
+.feature-card:hover {
+    border-color: var(--clr-border-hover);
+    box-shadow: var(--shadow-glow);
+    transform: translateY(-3px);
+}
+.feature-icon {
+    font-size: 1.75rem;
+}
+.feature-title {
+    font-size: 1.1rem;
+    font-weight: 600;
+    color: var(--clr-text-primary);
+}
+.feature-desc {
+    font-size: 0.9rem;
+    color: var(--clr-text-secondary);
+    line-height: 1.65;
+}
+.feature-desc code {
+    font-family: var(--font-mono);
+    font-size: 0.8rem;
+    background: rgba(120,248,126,0.1);
+    color: var(--clr-accent);
+    padding: 0.1em 0.35em;
+    border-radius: 3px;
+}
+
+/* ── Status section ── */
+.status-section {
+    max-width: 400px;
+    margin: 0 auto;
+    padding: 0 1.5rem 4rem;
+    display: flex;
+    justify-content: center;
+}
+.status-badge {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.5rem;
+    padding: 0.5rem 1rem;
+    border-radius: 999px;
+    font-size: 0.85rem;
+    font-weight: 500;
+    border: 1px solid var(--clr-border);
+    background: var(--clr-bg-glass);
+    backdrop-filter: blur(8px);
+}
+.status-loading { color: var(--clr-text-secondary); }
+.status-ready   { color: var(--clr-accent); border-color: var(--clr-accent-dim); }
+.status-error   { color: var(--clr-danger); }
+
+/* ── Footer ── */
+.footer-panel {
+    height: var(--footer-panel-height);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-top: 1px solid var(--clr-border);
+    background: var(--clr-bg-glass);
+}
+.footer-text {
+    font-size: 0.8rem;
+    color: var(--clr-text-muted);
+    display: flex;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+    justify-content: center;
+    align-items: center;
+}
+.footer-link {
+    color: var(--clr-text-secondary);
+    text-decoration: none;
+    transition: color var(--t-fast);
+}
+.footer-link:hover { color: var(--clr-accent); }
+
+/* ── Responsive ── */
+@media (max-width: 600px) {
+    .header-nav { display: none; }
+    .hero-section { padding: 3rem 1rem 2.5rem; }
+    .features-section { padding: 0 1rem 3rem; }
+}
+
+/* ── Dev Tools Panel (diagnostic only — remove when WS sync confirmed) ── */
+.dev-panel {
+    max-width: 720px;
+    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;
+}
+.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-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: 240px;
+    overflow-y: auto;
+    white-space: pre-wrap;
+    word-break: break-all;
+    min-height: 3rem;
+}

package/src/client/types.mts

@@ -0,0 +1,85 @@
+import { CommentData_V1 } from "@ibgib/core-gib/dist/common/comment/comment-types.mjs";
+import { MetaspaceService } from "@ibgib/core-gib/dist/witness/space/metaspace/metaspace-types.mjs";
+import { RCLIArgInfo } from "@ibgib/helper-gib/dist/rcli/rcli-types.mjs";
+import { IbGibRel8ns_V1, IbGib_V1 } from "@ibgib/ts-gib/dist/V1/types.mjs";
+import { LiveProxyIbGib } from "@ibgib/web-gib/dist/witness/live-proxy-ibgib/live-proxy-ibgib-one-file.mjs";
+import { IbGibGlobalThisInfo } from "@ibgib/web-gib/dist/types.mjs";
+
+// ---------------------------------------------------------------------------
+// App-level ambient context config
+// ---------------------------------------------------------------------------
+
+/**
+ * Configuration for the application's global state and storage substrates.
+ */
+export interface IbGibAmbientContextConfig {
+    dbName: string;
+    storeName: string;
+    additionalStoreNames?: string[];
+    apiKeyName: string;
+}
+
+// ---------------------------------------------------------------------------
+// Bootstrap request comment (RCLI plumbing)
+// ---------------------------------------------------------------------------
+
+export interface RequestCommentData_V1 extends CommentData_V1 {
+    args: string[];
+    interpretedArgInfos: RCLIArgInfo[];
+}
+
+export interface RequestCommentRel8ns_V1 extends IbGibRel8ns_V1 { }
+
+export interface RequestCommentIbGib_V1
+    extends IbGib_V1<RequestCommentData_V1, RequestCommentRel8ns_V1> {
+    oneOff: boolean;
+}
+
+// ---------------------------------------------------------------------------
+// Space shim (RCLI pathing compat)
+// ---------------------------------------------------------------------------
+
+export interface SpaceShimGlobalInfo {
+    initialCwd: string;
+    cwd: string;
+}
+
+// ---------------------------------------------------------------------------
+// Identity (optional)
+// ---------------------------------------------------------------------------
+
+export interface IbGibIdentityContext {
+    resolved: boolean;
+    authenticated: boolean;
+    data?: Record<string, any>;
+}
+
+// ---------------------------------------------------------------------------
+// GlobalThis state
+// ---------------------------------------------------------------------------
+
+export interface IbGibGlobalThis_Common extends IbGibGlobalThisInfo {
+    bootstrapStarted?: boolean;
+    bootstrapPromise?: Promise<void>;
+    chronologysComponent?: any;
+}
+
+export interface IbGibGlobalThis_IbGibApp extends IbGibGlobalThis_Common {
+    version?: string;
+    spaceShim: { [spaceId: string]: SpaceShimGlobalInfo };
+    verbose?: boolean;
+    fnDefaultGetAPIKey: () => Promise<string>;
+    initialCommentIbGib?: IbGib_V1;
+    initialCommentIbGibProxy?: LiveProxyIbGib;
+    identity?: IbGibIdentityContext | null;
+}
+
+// ---------------------------------------------------------------------------
+// App-specific globalThis
+// ---------------------------------------------------------------------------
+
+export interface IbGibGlobalThis_SpaceGib extends IbGibGlobalThis_IbGibApp {
+    spaceGibShellSvc?: any;
+    // TODO: add app-specific singleton references here, e.g.:
+    // currentModuleAddr?: string;
+}

package/src/client/ui/shell/space-gib-shell-constants.mts

@@ -0,0 +1,24 @@
+export const ID_APP_ROOT = 'app-root';
+
+// Panels
+export const ID_HEADER_PANEL = 'header-panel';
+export const ID_LEFT_PANEL = 'left-panel';
+export const ID_CENTER_PANEL = 'center-panel';
+export const ID_RIGHT_PANEL = 'right-panel';
+export const ID_FOOTER_PANEL = 'footer-panel';
+
+// Resizers
+export const ID_LEFT_RESIZER = 'left-resizer';
+export const ID_RIGHT_RESIZER = 'right-resizer';
+export const ID_FOOTER_RESIZER = 'footer-resizer';
+
+// Buttons
+export const ID_BTN_LEFT_PANEL_TOGGLE = 'btn-left-panel-toggle';
+export const ID_BTN_RIGHT_PANEL_TOGGLE = 'btn-right-panel-toggle';
+export const ID_BTN_CREATE_KEYSTONE = 'btn-create-keystone';
+
+// Other
+export const ID_CENTER_PANEL_CONTENT = 'center-panel-content';
+
+// Events
+export const EVENT_SHELL_READY = 'space-gib-shell-ready';