@ibgib/space-gib 0.0.32 → 0.0.34

package/src/client/ui/component/cosmos-navigator/index.mts

@@ -0,0 +1,18 @@
+/**
+ * @module ui/component/cosmos-navigator
+ *
+ * space-gib-cosmos-navigator Web Component barrel export and registration.
+ */
+
+export * from './cosmos-navigator.mjs';
+
+import { getComponentSvc } from "@ibgib/web-gib/dist/ui/component/ibgib-component-service.mjs";
+import { CosmosNavigatorComponentMeta } from "./cosmos-navigator.mjs";
+
+/**
+ * Registers the CosmosNavigator Web Component with the central component service.
+ */
+export async function registerCosmosNavigatorComponent(): Promise<void> {
+    const componentSvc = await getComponentSvc();
+    componentSvc.registerComponentMeta(new CosmosNavigatorComponentMeta());
+}

package/src/client/ui/component/file-explorer/IMPLEMENTATION.md

@@ -0,0 +1,42 @@
+# space-gib-file-explorer Component Specification
+
+## Overview
+`space-gib-file-explorer` is an encapsulated `@ibgib` Web Component (Custom Element) representing a Branch File Explorer in the `space-gib` Left Panel.
+
+## Component Identity
+- **Tag**: `<space-gib-file-explorer>`
+- **Meta Class**: `FileExplorerComponentMeta`
+- **Instance Class**: `FileExplorerComponentInstance`
+- **Path Constant**: `space-gib-file-explorer`
+- **Initial Backing ibGib**: `ROOT_ADDR` (`ibgib` root address)
+
+## Visual Architecture & Shadow DOM Layout
+1. **Branch Worktree Header**:
+   - Chevron collapse toggle (`▼` / `▶`)
+   - Branch icon: `🌿`
+   - Branch label: `main` (or active branch name)
+   - Worktree badge: `worktree`
+   - Action icons (visible on hover):
+     - `+ New File` (`📄+`)
+     - `+ New Folder` (`📁+`)
+     - `Collapse All` (`⇱`)
+2. **File Tree Container**:
+   - Hierarchical collapsible folders (`📂 src/`, `📁 docs/`)
+   - File items (`📄 index.ts`, `📄 helper.ts`, `📝 README.md`, `⚙️ package.json`)
+   - Living companion note indicator badges (`💬`)
+   - Indentation guides (`.tree-indent`, `.tree-indent-2`)
+   - Active / selected file indicator with accent glow
+
+## Event Contracts
+Dispatched across Shadow DOM boundary (`bubbles: true`, `composed: true`):
+- `space-gib-file-selected`: `{ branch: string, path: string, name: string }`
+- `space-gib-branch-selected`: `{ branch: string }`
+- `space-gib-new-file-requested`: `{ branch: string, folder?: string }`
+- `space-gib-new-folder-requested`: `{ branch: string, folder?: string }`
+
+## Lifecycle Checklist
+- [x] Extends `IbGibDynamicComponentMetaBase` and `IbGibDynamicComponentInstanceBase`.
+- [x] Queries elements in `created()`.
+- [x] Cleans up event listeners in `disconnected()`.
+- [x] Renders worktree branch file tree with folder expansion toggling.
+- [x] Dispatches composed events to app shell.

package/src/client/ui/component/file-explorer/file-explorer.css

@@ -0,0 +1,256 @@
+:host {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+.file-explorer-root {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  user-select: none;
+  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+  box-sizing: border-box;
+}
+
+/* Branch Worktree Accordion Header */
+.branch-header {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.4rem 0.6rem;
+  background: rgba(255, 255, 255, 0.04);
+  border: 1px solid rgba(255, 255, 255, 0.08);
+  border-radius: 6px;
+  font-size: 0.82rem;
+  font-weight: 600;
+  color: #cbd5e1;
+  cursor: pointer;
+  transition: all 0.15s ease;
+  outline: none;
+  box-sizing: border-box;
+}
+
+.branch-header:hover {
+  background: rgba(255, 255, 255, 0.07);
+  border-color: rgba(124, 92, 252, 0.3);
+  color: #f1f5f9;
+}
+
+.branch-header:focus-visible {
+  border-color: #a78bfa;
+}
+
+.branch-toggle-btn {
+  background: transparent;
+  border: none;
+  color: inherit;
+  font-size: 0.65rem;
+  padding: 0;
+  margin: 0;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 14px;
+  height: 14px;
+  line-height: 1;
+}
+
+.chevron-icon {
+  display: inline-block;
+  transition: transform 0.15s ease;
+}
+
+.branch-header.collapsed .chevron-icon {
+  transform: rotate(-90deg);
+}
+
+.branch-icon {
+  font-size: 0.9rem;
+  line-height: 1;
+}
+
+.branch-title {
+  flex: 1;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
+  font-size: 0.82rem;
+  color: #a78bfa;
+  font-weight: 600;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.worktree-badge {
+  font-size: 0.58rem;
+  text-transform: uppercase;
+  letter-spacing: 0.04em;
+  background: rgba(124, 92, 252, 0.18);
+  color: #c084fc;
+  padding: 1px 5px;
+  border-radius: 4px;
+  border: 1px solid rgba(192, 132, 252, 0.3);
+  font-weight: 600;
+}
+
+.branch-actions {
+  display: flex;
+  align-items: center;
+  gap: 2px;
+  opacity: 0;
+  transition: opacity 0.15s ease;
+  margin-left: 0.25rem;
+}
+
+.branch-header:hover .branch-actions {
+  opacity: 1;
+}
+
+.action-btn {
+  background: transparent;
+  border: none;
+  color: #94a3b8;
+  font-size: 0.72rem;
+  padding: 2px 4px;
+  border-radius: 3px;
+  cursor: pointer;
+  line-height: 1;
+  transition: all 0.12s ease;
+}
+
+.action-btn:hover {
+  background: rgba(255, 255, 255, 0.1);
+  color: #fff;
+}
+
+/* File Tree Container */
+.file-tree-container {
+  display: flex;
+  flex-direction: column;
+  gap: 2px;
+  padding: 0.35rem 0.2rem;
+  transition: max-height 0.2s ease, opacity 0.2s ease;
+}
+
+.file-tree-container.collapsed {
+  display: none !important;
+}
+
+/* Tree Item (Folder / File) */
+.tree-item {
+  display: flex;
+  align-items: center;
+  gap: 0.35rem;
+  padding: 0.32rem 0.5rem;
+  border-radius: 4px;
+  font-size: 0.82rem;
+  color: #94a3b8;
+  cursor: pointer;
+  transition: all 0.12s ease;
+  border: 1px solid transparent;
+  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
+  outline: none;
+  box-sizing: border-box;
+}
+
+.tree-item:hover {
+  background: rgba(255, 255, 255, 0.05);
+  color: #f1f5f9;
+}
+
+.tree-item:focus-visible {
+  border-color: rgba(124, 92, 252, 0.4);
+}
+
+.tree-item.selected {
+  background: rgba(120, 248, 126, 0.1);
+  border-color: rgba(120, 248, 126, 0.25);
+  color: #78f87e;
+  font-weight: 500;
+}
+
+.tree-item.hidden {
+  display: none !important;
+}
+
+.tree-chevron {
+  font-size: 0.6rem;
+  width: 12px;
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  opacity: 0.7;
+  flex-shrink: 0;
+}
+
+.tree-indent {
+  display: inline-block;
+  width: 0.75rem;
+  flex-shrink: 0;
+}
+
+.tree-indent-2 {
+  width: 1.5rem;
+}
+
+.tree-icon {
+  font-size: 0.9rem;
+  line-height: 1;
+  flex-shrink: 0;
+}
+
+.tree-label {
+  flex: 1;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.file-comment-badge {
+  margin-left: auto;
+  font-size: 0.75rem;
+  color: #fbbf24;
+  line-height: 1;
+}
+
+.file-action-btn {
+  opacity: 0;
+  background: transparent;
+  border: none;
+  color: #94a3b8;
+  padding: 1px 4px;
+  border-radius: 3px;
+  cursor: pointer;
+  font-size: 0.8rem;
+  line-height: 1;
+  transition: all 0.15s ease;
+  margin-left: 4px;
+}
+
+.tree-item:hover .file-action-btn {
+  opacity: 0.8;
+}
+
+.file-action-btn:hover {
+  opacity: 1 !important;
+  background: rgba(99, 102, 241, 0.25);
+  color: #c7d2fe;
+}
+
+.file-branch-btn:hover {
+  background: rgba(16, 185, 129, 0.25) !important;
+  color: #6ee7b7 !important;
+}
+
+#btn-branch-branch {
+  color: #6ee7b7;
+}
+
+#btn-branch-branch:hover {
+  background: rgba(16, 185, 129, 0.2);
+  color: #a7f3d0;
+}
+
+

package/src/client/ui/component/file-explorer/file-explorer.html

@@ -0,0 +1,75 @@
+<div id="file-explorer-root" class="file-explorer-root">
+  <!-- Worktree Branch Header Accordion -->
+  <div id="branch-header" class="branch-header expanded" tabindex="0">
+    <button id="btn-branch-toggle" class="branch-toggle-btn" type="button" aria-label="Toggle Branch Files">
+      <span class="chevron-icon">▼</span>
+    </button>
+    <span class="branch-icon">🌿</span>
+    <span id="branch-title" class="branch-title">main</span>
+    <!-- <span class="worktree-badge">worktree</span> -->
+    <div class="branch-actions">
+      <button id="btn-branch-branch" class="action-btn" type="button" title="Branch from worktree (🌿+)">🌿+</button>
+      <button id="btn-clone-branch" class="action-btn" type="button" title="Clone / Export Worktree (⤓)">⤓</button>
+      <button id="btn-new-file" class="action-btn" type="button" title="New File">📄+</button>
+      <button id="btn-new-folder" class="action-btn" type="button" title="New Folder">📁+</button>
+      <button id="btn-collapse-all" class="action-btn" type="button" title="Collapse All">⇱</button>
+    </div>
+  </div>
+
+  <!-- Worktree Files Container -->
+  <div id="file-tree-container" class="file-tree-container">
+    <!-- Folder: src -->
+    <div class="tree-item folder expanded" data-folder="src" tabindex="0">
+      <span class="tree-chevron">▼</span>
+      <span class="tree-icon">📂</span>
+      <span class="tree-label">src</span>
+      <button class="file-action-btn file-branch-btn" title="Branch from directory item (🌿+)"
+        type="button">🌿+</button>
+      <button class="file-action-btn file-clone-btn" title="Clone directory item" type="button">⤓</button>
+    </div>
+    <!-- File: src/index.ts (Selected by default) -->
+    <div class="tree-item file selected" data-path="src/index.ts" data-name="index.ts" tabindex="0">
+      <span class="tree-indent tree-indent-2"></span>
+      <span class="tree-icon">📄</span>
+      <span class="tree-label">index.ts</span>
+      <span class="file-comment-badge" title="Living companion comment attached">💬</span>
+      <button class="file-action-btn file-branch-btn" title="Branch from file item (🌿+)" type="button">🌿+</button>
+      <button class="file-action-btn file-clone-btn" title="Clone file item" type="button">⤓</button>
+    </div>
+    <!-- File: src/helper.ts -->
+    <div class="tree-item file" data-path="src/helper.ts" data-name="helper.ts" tabindex="0">
+      <span class="tree-indent tree-indent-2"></span>
+      <span class="tree-icon">📄</span>
+      <span class="tree-label">helper.ts</span>
+      <button class="file-action-btn file-branch-btn" title="Branch from file item (🌿+)" type="button">🌿+</button>
+      <button class="file-action-btn file-clone-btn" title="Clone file item" type="button">⤓</button>
+    </div>
+
+    <!-- Folder: docs -->
+    <div class="tree-item folder" data-folder="docs" tabindex="0">
+      <span class="tree-chevron">▼</span>
+      <span class="tree-icon">📁</span>
+      <span class="tree-label">docs</span>
+      <button class="file-action-btn file-branch-btn" title="Branch from directory item (🌿+)"
+        type="button">🌿+</button>
+      <button class="file-action-btn file-clone-btn" title="Clone directory item" type="button">⤓</button>
+    </div>
+    <!-- File: docs/README.md (Initially hidden under collapsed docs) -->
+    <div class="tree-item file child-of-docs hidden" data-path="docs/README.md" data-name="README.md" tabindex="0">
+      <span class="tree-indent tree-indent-2"></span>
+      <span class="tree-icon">📝</span>
+      <span class="tree-label">README.md</span>
+      <button class="file-action-btn file-branch-btn" title="Branch from file item (🌿+)" type="button">🌿+</button>
+      <button class="file-action-btn file-clone-btn" title="Clone file item" type="button">⤓</button>
+    </div>
+
+    <!-- Root File: package.json -->
+    <div class="tree-item file" data-path="package.json" data-name="package.json" tabindex="0">
+      <span class="tree-indent"></span>
+      <span class="tree-icon">⚙️</span>
+      <span class="tree-label">package.json</span>
+      <button class="file-action-btn file-branch-btn" title="Branch from file item (🌿+)" type="button">🌿+</button>
+      <button class="file-action-btn file-clone-btn" title="Clone file item" type="button">⤓</button>
+    </div>
+  </div>
+</div>