@ibgib/space-gib 0.0.32 → 0.0.34

package/src/client/ui/component/code-editor/IMPLEMENTATION.md

@@ -0,0 +1,89 @@
+# space-gib Code File Editor Web Component (`space-gib-code-editor`)
+
+Implementation specification and architecture doc for the `@ibgib` Web Component responsible for viewing and editing code files within the `space-gib` client application.
+
+---
+
+## 1. Overview & Architectural Role
+
+* **Component Tag**: `<space-gib-code-editor>`
+* **Meta Class**: `CodeEditorComponentMeta` (extends `IbGibDynamicComponentMetaBase`)
+* **Instance Class**: `CodeEditorComponentInstance` (extends `IbGibDynamicComponentInstanceBase`)
+* **Purpose**:
+  - Replaces static repository code mockup with a dynamic, encapsulated code viewer/editor.
+  - Combines the file view breadcrumb header and the single code editor pane into one cohesive component.
+  - Features `readOnly` / `readonly` mode control allowing the component to function both as an interactive code editor and as a protected viewer.
+  - Integrates a secondary virtual breadcrumb displaying the active branch and Merkle tip address (`@ 🌿 main [7f8a1b2]`).
+  - Supports synchronized line number gutters, monospace formatting, and tab key handling.
+
+---
+
+## 2. Component Design & Layout
+
+```
+┌────────────────────────────────────────────────────────────────────────────────────────┐
+│ [my-app] / [src] / [index.ts]   [@ 🌿 main 7f8a1b2]   │ TypeScript · 18 lines · 🔒 Read-Only │
+├───────┬────────────────────────────────────────────────────────────────────────────────┤
+│   1   │ /**                                                                            │
+│   2   │  * @module my-app/index                                                        │
+│   3   │  * Application entry point running on ibgib VCS.                               │
+│   4   │  */                                                                            │
+│   5   │                                                                                │
+│   6   │ import { getGlobalMetaspace } from '@ibgib/web-gib';                           │
+│   ... │ ...                                                                            │
+└───────┴────────────────────────────────────────────────────────────────────────────────┘
+```
+
+### Key Sub-Elements:
+1. **Header Bar (`.editor-header`)**:
+   - Primary breadcrumbs (`#crumb-repo`, `#crumb-path`).
+   - Secondary virtual tip pill (`#crumb-tip-container` with branch icon `🌿`, branch name, and tip hash).
+   - Stats bar: language badge (`#stat-lang`), line count (`#stat-lines`), byte size (`#stat-size`).
+   - Mode badge / toggle button (`#badge-mode` with `🔒 Read-Only` or `✏️ Editable`).
+   - Quick action: Copy to clipboard (`#btn-copy-code`).
+2. **Editor Body (`.editor-body`)**:
+   - Synchronized line numbers gutter (`#editor-gutter`).
+   - Code input / viewer textarea (`#editor-textarea`).
+   - Single pane (no split view).
+
+---
+
+## 3. Properties & Methods
+
+* **`readOnly: boolean`** (and `readonly: boolean`):
+  - Getter and setter reflecting to textarea and DOM classes.
+  - Observed attribute: `readonly`.
+* **`loadFile(opts: { filepath: string; content: string; branch?: string; tipAddr?: string; language?: string }): void`**:
+  - Updates breadcrumbs, tip address pill, textarea content, line numbers, and language badge.
+* **`getContent(): string`**:
+  - Returns current textarea text.
+* **`setContent(text: string): void`**:
+  - Sets textarea text and re-computes line numbers gutter.
+
+---
+
+## 4. Events
+
+* **`space-gib-code-changed`**: Dispatched on input in editable mode:
+  ```typescript
+  detail: {
+    filepath: string;
+    content: string;
+    lineCount: number;
+  }
+  ```
+* **`space-gib-code-copied`**: Dispatched when code is copied to clipboard.
+
+---
+
+## 5. Implementation Checklist
+
+- [x] Create `IMPLEMENTATION.md`
+- [ ] Create `code-editor.html`
+- [ ] Create `code-editor.css`
+- [ ] Create `code-editor.mts`
+- [ ] Create `index.mts`
+- [ ] Update `index.html` (remove `repo-top-bar`, mount host container)
+- [ ] Update `layout.css`
+- [ ] Integrate into `space-gib-shell-service.mts`
+- [ ] Verify build and docker restart

package/src/client/ui/component/code-editor/code-editor.css

@@ -0,0 +1,275 @@
+:host {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+    background: var(--clr-bg-deep, #05080f);
+    color: var(--clr-text-primary, #f0f4fc);
+    font-family: var(--font-sans, system-ui, -apple-system, sans-serif);
+    overflow: hidden;
+    position: relative;
+}
+
+.editor-root {
+    display: flex;
+    flex-direction: column;
+    width: 100%;
+    height: 100%;
+    min-height: 0;
+    overflow: hidden;
+}
+
+/* ── Integrated Header (File Breadcrumb + Virtual Tip + Actions) ── */
+.editor-header {
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding: 0.65rem 1.25rem;
+    background: rgba(11, 17, 32, 0.75);
+    border-bottom: 1px solid var(--clr-border, rgba(255, 255, 255, 0.08));
+    flex-shrink: 0;
+    gap: 1rem;
+    flex-wrap: wrap;
+    backdrop-filter: blur(10px);
+}
+
+.header-left {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    flex-wrap: wrap;
+}
+
+.file-breadcrumb {
+    display: flex;
+    align-items: center;
+    font-size: 0.875rem;
+    font-family: var(--font-mono, monospace);
+}
+
+.crumb-icon {
+    margin-right: 0.4rem;
+    font-size: 0.95rem;
+}
+
+.crumb-repo {
+    color: var(--clr-text-muted, #7e8c9f);
+    font-weight: 500;
+}
+
+.crumb-sep {
+    color: var(--clr-border, rgba(255, 255, 255, 0.2));
+    margin: 0 0.35rem;
+    font-weight: 300;
+}
+
+.crumb-path {
+    color: var(--clr-accent, #78f87e);
+    font-weight: 600;
+}
+
+/* ── Secondary Virtual Breadcrumb: Active Branch & Tip Merkle Address ── */
+.tip-virtual-breadcrumb {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    background: rgba(124, 92, 252, 0.12);
+    border: 1px solid rgba(124, 92, 252, 0.35);
+    border-radius: var(--radius-sm, 6px);
+    padding: 0.2rem 0.55rem;
+    font-size: 0.775rem;
+    font-family: var(--font-mono, monospace);
+    color: #c4b5fd;
+    user-select: none;
+    transition: all 150ms ease;
+}
+
+.tip-virtual-breadcrumb:hover {
+    background: rgba(124, 92, 252, 0.2);
+    border-color: rgba(124, 92, 252, 0.6);
+    box-shadow: 0 0 10px rgba(124, 92, 252, 0.25);
+}
+
+.tip-sep {
+    color: rgba(196, 181, 253, 0.5);
+}
+
+.tip-icon {
+    font-size: 0.8rem;
+}
+
+.tip-branch {
+    color: #ddd6fe;
+    font-weight: 600;
+}
+
+.tip-hash {
+    color: #a78bfa;
+    font-weight: 700;
+    letter-spacing: 0.02em;
+}
+
+/* ── Header Right: Stats & Actions ── */
+.header-right {
+    display: flex;
+    align-items: center;
+    gap: 1rem;
+    flex-wrap: wrap;
+}
+
+.editor-stats {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    font-size: 0.78rem;
+    color: var(--clr-text-secondary, #b4c0d3);
+    font-family: var(--font-mono, monospace);
+}
+
+.stat-sep {
+    color: rgba(255, 255, 255, 0.18);
+}
+
+.header-actions {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.mode-toggle-btn {
+    display: inline-flex;
+    align-items: center;
+    gap: 0.35rem;
+    background: rgba(255, 255, 255, 0.04);
+    border: 1px solid var(--clr-border, rgba(255, 255, 255, 0.12));
+    border-radius: var(--radius-sm, 4px);
+    padding: 0.25rem 0.65rem;
+    color: var(--clr-text-secondary, #b4c0d3);
+    font-family: inherit;
+    font-size: 0.78rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: all 150ms ease;
+}
+
+.mode-toggle-btn:hover {
+    background: rgba(255, 255, 255, 0.08);
+    color: #ffffff;
+    border-color: rgba(255, 255, 255, 0.25);
+}
+
+.mode-toggle-btn.readonly {
+    border-color: rgba(251, 191, 36, 0.4);
+    color: #fde047;
+    background: rgba(251, 191, 36, 0.08);
+}
+
+.mode-toggle-btn.readonly:hover {
+    background: rgba(251, 191, 36, 0.15);
+    border-color: rgba(251, 191, 36, 0.7);
+}
+
+.mode-toggle-btn.editable {
+    border-color: rgba(120, 248, 126, 0.4);
+    color: #78f87e;
+    background: rgba(120, 248, 126, 0.08);
+}
+
+.mode-toggle-btn.editable:hover {
+    background: rgba(120, 248, 126, 0.15);
+    border-color: rgba(120, 248, 126, 0.7);
+}
+
+.action-btn {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    background: rgba(255, 255, 255, 0.04);
+    border: 1px solid var(--clr-border, rgba(255, 255, 255, 0.1));
+    border-radius: var(--radius-sm, 4px);
+    padding: 0.25rem 0.5rem;
+    color: var(--clr-text-secondary, #b4c0d3);
+    cursor: pointer;
+    transition: all 150ms ease;
+}
+
+.action-btn:hover {
+    background: rgba(255, 255, 255, 0.1);
+    color: #ffffff;
+    border-color: rgba(255, 255, 255, 0.25);
+}
+
+/* ── Editor Body (Gutter + Textarea) ── */
+.editor-body {
+    display: flex;
+    flex: 1;
+    min-height: 0;
+    overflow: hidden;
+    background: rgba(5, 8, 15, 0.85);
+    position: relative;
+}
+
+.editor-gutter {
+    width: 54px;
+    padding: 1rem 0.75rem 1rem 0;
+    display: flex;
+    flex-direction: column;
+    align-items: flex-end;
+    background: rgba(11, 17, 32, 0.4);
+    border-right: 1px solid var(--clr-border, rgba(255, 255, 255, 0.06));
+    font-family: var(--font-mono, 'JetBrains Mono', monospace);
+    font-size: 0.85rem;
+    line-height: 1.6;
+    color: var(--clr-text-muted, #4b5563);
+    user-select: none;
+    flex-shrink: 0;
+    box-sizing: border-box;
+    overflow: hidden;
+}
+
+.line-num {
+    height: 1.6em;
+    line-height: 1.6em;
+}
+
+.editor-content-wrapper {
+    flex: 1;
+    min-width: 0;
+    height: 100%;
+    overflow: hidden;
+    position: relative;
+    display: flex;
+}
+
+.editor-textarea {
+    width: 100%;
+    height: 100%;
+    box-sizing: border-box;
+    padding: 1rem 1.25rem;
+    margin: 0;
+    border: none;
+    outline: none;
+    resize: none;
+    background: transparent;
+    color: var(--clr-text-primary, #f0f4fc);
+    font-family: var(--font-mono, 'JetBrains Mono', 'Fira Code', 'SF Mono', Consolas, monospace);
+    font-size: 0.85rem;
+    line-height: 1.6;
+    tab-size: 4;
+    -moz-tab-size: 4;
+    white-space: pre;
+    overflow: auto;
+    caret-color: var(--clr-accent, #78f87e);
+}
+
+.editor-textarea::selection {
+    background: rgba(120, 248, 126, 0.25);
+}
+
+/* Read-only appearance */
+:host([readonly]) .editor-textarea,
+.editor-root.readonly-mode .editor-textarea {
+    cursor: default;
+    caret-color: transparent;
+}

package/src/client/ui/component/code-editor/code-editor.html

@@ -0,0 +1,54 @@
+<div class="editor-root" id="editor-root">
+  <!-- Combined File View Header & Virtual Breadcrumb -->
+  <header class="editor-header" id="editor-header">
+    <div class="header-left">
+      <div class="file-breadcrumb">
+        <span class="crumb-icon">📄</span>
+        <span class="crumb-repo" id="crumb-repo">my-app</span>
+        <span class="crumb-sep">/</span>
+        <span class="crumb-path" id="crumb-path">src/index.ts</span>
+      </div>
+
+      <!-- Secondary Virtual Breadcrumb: Active Branch & Tip Merkle Hash -->
+      <div class="tip-virtual-breadcrumb" id="crumb-tip-container" title="Active Branch Tip Merkle Address">
+        <span class="tip-sep">@</span>
+        <span class="tip-icon">🌿</span>
+        <span class="tip-branch" id="crumb-branch">main</span>
+        <span class="tip-hash" id="crumb-tip">7f8a1b2</span>
+      </div>
+    </div>
+
+    <div class="header-right">
+      <div class="editor-stats">
+        <span class="stat-badge" id="stat-lang">TypeScript</span>
+        <span class="stat-sep">·</span>
+        <span class="stat-badge" id="stat-lines">18 lines</span>
+        <span class="stat-sep">·</span>
+        <span class="stat-badge" id="stat-size">520 B</span>
+      </div>
+
+      <div class="header-actions">
+        <!-- Read-Only / Editable Mode Toggle -->
+        <button id="btn-toggle-readonly" class="mode-toggle-btn" type="button" title="Toggle Read-Only / Editable Mode">
+          <span class="mode-icon" id="mode-icon">🔒</span>
+          <span class="mode-text" id="mode-text">Read-Only</span>
+        </button>
+
+        <!-- Copy Code Action -->
+        <button id="btn-copy-code" class="action-btn" type="button" title="Copy code to clipboard">
+          <span class="btn-icon">📋</span>
+        </button>
+      </div>
+    </div>
+  </header>
+
+  <!-- Single Editor Body (Gutter + Code Textarea) -->
+  <main class="editor-body" id="editor-body">
+    <div class="editor-gutter" id="editor-gutter" aria-hidden="true">
+      <span class="line-num">1</span>
+    </div>
+    <div class="editor-content-wrapper">
+      <textarea id="editor-textarea" class="editor-textarea" spellcheck="false" autocomplete="off" autocapitalize="off" wrap="off" placeholder="Write code here..."></textarea>
+    </div>
+  </main>
+</div>