@ibgib/web-gib 0.0.52 → 0.0.55

package/src/ui/component/README.md

@@ -26,6 +26,76 @@ The protocol itself is a universe-sized address spacetime that allows truly dist
 
 ---
 
+## 📦 Built-In Component Suites
+
+`@ibgib/web-gib` exports standard, pre-built web component suites that downstream applications can register and consume out-of-the-box.
+
+### 🔑 Keystone Identity Component Suite
+
+The Keystone Identity suite provides a complete, decentralized identity management interface powered by ibgib's unique keystone architecture (domain keys, sync delegate keys, KDF genesis, and timeline verification).
+
+| Component Tag Name | Class | Description |
+| :--- | :--- | :--- |
+| **`ibgib-identity-header`** | `IdentityHeaderComponentMeta` / `Instance` | Compact header bar widget displaying active identity avatar, username, dropdown selection, and quick-access management buttons. |
+| **`ibgib-identity-manager`** | `IdentityManagerComponentMeta` / `Instance` | Full tab-based identity management panel with settings persistence (`Settings_IdentityManager`), identity tabs, and creation/import triggers. |
+| **`ibgib-keystone-creator`** | `KeystoneCreatorComponentMeta` / `Instance` | Interactive form for local KDF key derivation, domain keystone genesis, and sync delegate generation. |
+| **`ibgib-keystone-details`** | `KeystoneDetailsComponentMeta` / `Instance` | Deep-dive inspector for individual keystones, showing pool configs, SSO provider linkage, secret reveal, and timeline scrubber. |
+| **`ibgib-keystone-scrubber`** | `KeystoneScrubberComponentMeta` / `Instance` | Timeline scrubber control permitting step-by-step navigation across historical keystone evolution frames. |
+
+### Downstream Suite Registration
+
+Downstream applications can register all 5 Keystone Identity components with a single convenience call during app shell bootstrap:
+
+```typescript
+import { registerStandardIdentityComponents } from '@ibgib/web-gib/dist/ui/component/identity/index.mjs';
+
+// Inside app initialization (e.g. ShellService.registerComponents):
+await registerStandardIdentityComponents();
+```
+
+---
+
+## 🛠️ Downstream Integration Patterns & API Bridge
+
+### 1. REST API Bridge Abstraction (`IbGibApiBridge`)
+
+Components in `@ibgib/web-gib` that make REST API requests (e.g., identity creation, SSO login, keystone evolution sync) interact through an abstracted `IbGibApiBridge` interface rather than hardcoding endpoint URLs.
+
+Downstream apps can extend `IbGibApiBridge` to customize API routing or authentication, registering their bridge instance on startup:
+
+```typescript
+import { IbGibApiBridge, setApiBridge } from '@ibgib/web-gib/dist/api/ibgib-api-bridge.mjs';
+
+export class MyAppApiBridge extends IbGibApiBridge {
+    // Override base REST methods or base URLs as needed
+}
+
+// Register on app startup:
+setApiBridge(new MyAppApiBridge());
+```
+
+### 2. Common Component Design System (`common-component-styles.css`)
+
+Because Web Components use Shadow DOM encapsulation, shared button, tab, form, and tag styles are housed in `libs/web-gib/src/ui/component/common-component-styles.css`.
+
+When implementing custom components, import `commonComponentStylesCss` and include it in your component's `css` initialization array so your controls automatically inherit standard `@ibgib` aesthetics (`.action-btn`, `.secondary`, `.tab-btn`, `.text-input`, `.status-msg`, `.address-code`):
+
+```typescript
+import thisCss from "./my-component.css";
+import thisHtml from "./my-component.html";
+import commonComponentStylesCss from "../common-component-styles.css";
+
+// Inside Meta.createInstance():
+await component.initialize({
+    ibGibAddr,
+    meta: this,
+    html: thisHtml,
+    css: [commonComponentStylesCss, thisCss],
+});
+```
+
+---
+
 ## 🛠️ How to Create an IbGib UI Component
 
 ### 1. Registering your Component Metadata
@@ -33,7 +103,7 @@ To register your component with the shell router, extend `IbGibDynamicComponentM
 
 ```typescript
 import { IbGibDynamicComponentMetaBase } from '@ibgib/web-gib/dist/ui/component/ibgib-dynamic-component-bases.mjs';
-import { componentSvc } from '@ibgib/web-gib/dist/ui/component/component-service.mjs';
+import { getComponentSvc } from '@ibgib/web-gib/dist/ui/component/ibgib-component-service.mjs';
 
 export const MY_COMPONENT_NAME = 'my-custom-component';
 
@@ -41,13 +111,21 @@ export class MyComponentMeta extends IbGibDynamicComponentMetaBase {
     routeRegExp = new RegExp(`^${MY_COMPONENT_NAME}$`);
     componentName = MY_COMPONENT_NAME;
 
-    createInstance(opts) {
-        return document.createElement(this.componentName);
+    async createInstance(opts) {
+        const component = document.createElement(this.componentName);
+        await component.initialize({
+            ibGibAddr: opts.ibGibAddr,
+            meta: this,
+            html: thisHtml,
+            css: [commonComponentStylesCss, thisCss],
+        });
+        return component;
     }
 }
 
 // Register with central service
-componentSvc.registerComponentMeta(new MyComponentMeta());
+const componentSvc = await getComponentSvc();
+await componentSvc.registerComponentMeta(new MyComponentMeta());
 ```
 
 ### 2. Implementing the Component Instance
@@ -250,4 +328,3 @@ For complex views that act as shells containing other interactive component tabs
     }));
     ```
     The parent component listens to this event in `created()` and triggers `activateIbGib({ addr })` to dynamically open and activate the sub-tab.
-

package/src/ui/component/common-component-styles.css

@@ -0,0 +1,270 @@
+/* =========================================================================
+   @ibgib/web-gib — Common Web Component Stylesheet
+   Shared Shadow DOM styles for buttons, tabs, inputs, cards, and status tags.
+   ========================================================================= */
+
+:host {
+    --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;
+
+    --font-sans: system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
+    --font-mono: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Monaco, Consolas, monospace;
+
+    --radius-sm: 6px;
+    --radius-md: 12px;
+    --radius-lg: 20px;
+
+    --t-fast: 120ms ease;
+    --t-med: 240ms ease;
+
+    --tab-padding: 0.55rem 1.25rem;
+    --tab-background-color: rgba(255, 255, 255, 0.03);
+    --tab-background-color-hover: rgba(255, 255, 255, 0.08);
+    --tab-background-color-active: rgba(120, 248, 126, 0.1);
+    --tab-border-radius: var(--radius-sm) var(--radius-sm) 0 0;
+    --tab-border-width: 1px;
+    --tab-border-color: rgba(255, 255, 255, 0.05);
+    --tab-border-color-active: var(--clr-accent-dim);
+    --tab-text-color: var(--clr-text-secondary);
+    --tab-text-color-active: var(--clr-accent);
+
+    box-sizing: border-box;
+}
+
+*, *::before, *::after {
+    box-sizing: border-box;
+}
+
+.hidden {
+    display: none !important;
+}
+
+/* ── Container ── */
+.component-container {
+    padding: 2rem;
+    background: var(--clr-bg-glass);
+    backdrop-filter: blur(16px);
+    border-radius: var(--radius-lg);
+    border: 1px solid var(--clr-border);
+    box-shadow: 0 4px 24px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--clr-border);
+    color: var(--clr-text-primary);
+}
+
+/* ── Action Row & Action Buttons ── */
+.action-row {
+    display: flex;
+    gap: 1rem;
+    margin-top: 0.5rem;
+    align-items: center;
+}
+
+.action-btn {
+    padding: 0.75rem 1.5rem;
+    background: var(--clr-accent);
+    color: var(--clr-bg-deep);
+    border: 1px solid transparent;
+    border-radius: var(--radius-md);
+    font-family: var(--font-sans);
+    font-weight: 600;
+    font-size: 0.9rem;
+    cursor: pointer;
+    transition: all var(--t-fast);
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    outline: none;
+}
+
+.action-btn:hover:not(:disabled) {
+    background: #9fffa5;
+    color: var(--clr-bg-deep);
+    border-color: transparent;
+    transform: translateY(-1px);
+    box-shadow: 0 4px 12px var(--clr-accent-glow);
+}
+
+.action-btn:active:not(:disabled) {
+    transform: translateY(0);
+}
+
+.action-btn.secondary {
+    background: transparent;
+    border-color: rgba(255, 255, 255, 0.2);
+    color: var(--clr-text-primary);
+}
+
+.action-btn.secondary:hover:not(:disabled) {
+    background: rgba(255, 255, 255, 0.05);
+    border-color: rgba(255, 255, 255, 0.4);
+    color: var(--clr-text-primary);
+    box-shadow: none;
+}
+
+.action-btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+    background: var(--clr-border) !important;
+    color: var(--clr-text-muted) !important;
+    border-color: transparent !important;
+    box-shadow: none !important;
+    transform: none !important;
+}
+
+.action-btn.active-primary:disabled {
+    opacity: 0.85;
+    background: rgba(120, 248, 126, 0.15) !important;
+    color: var(--clr-accent) !important;
+    border: 1px solid var(--clr-accent) !important;
+}
+
+/* ── Tabs ── */
+.tabs-row {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+}
+
+.tabs-list {
+    display: flex;
+    gap: 0.25rem;
+    overflow-x: auto;
+    flex-grow: 1;
+    padding-bottom: 5px;
+    margin-bottom: -5px;
+    scrollbar-width: thin;
+    scrollbar-color: var(--clr-accent-dim) transparent;
+}
+
+.tabs-list::-webkit-scrollbar {
+    height: 5px;
+}
+
+.tabs-list::-webkit-scrollbar-track {
+    background: transparent;
+}
+
+.tabs-list::-webkit-scrollbar-thumb {
+    background: var(--clr-accent-dim);
+    border-radius: var(--radius-sm);
+}
+
+.tab-btn,
+.panel-tab-button {
+    padding: var(--tab-padding);
+    background: var(--tab-background-color);
+    border-radius: var(--tab-border-radius);
+    border: var(--tab-border-width) solid var(--tab-border-color);
+    border-bottom: none;
+    color: var(--tab-text-color);
+    font-family: var(--font-sans);
+    font-size: 0.85rem;
+    font-weight: 500;
+    cursor: pointer;
+    white-space: nowrap;
+    transition: background var(--t-fast), border-color var(--t-fast), color var(--t-fast);
+    outline: none;
+}
+
+.tab-btn:hover,
+.panel-tab-button:hover {
+    background: var(--tab-background-color-hover);
+    color: var(--clr-text-primary);
+    border-color: var(--clr-border-hover);
+}
+
+.tab-btn.active,
+.panel-tab-button.active {
+    background: var(--tab-background-color-active);
+    color: var(--tab-text-color-active);
+    border-color: var(--tab-border-color-active);
+    border-bottom: var(--tab-border-width) solid transparent;
+    font-weight: 600;
+    box-shadow: inset 0 2px 0 0 var(--clr-accent);
+}
+
+.tab-btn.global-active::after {
+    content: " •";
+    color: var(--clr-accent);
+    font-size: 1.2rem;
+    line-height: 0;
+    vertical-align: middle;
+}
+
+/* ── Inputs ── */
+.text-input,
+.secret-input {
+    flex-grow: 1;
+    padding: 0.75rem;
+    background: rgba(0, 0, 0, 0.25);
+    color: var(--clr-text-primary);
+    border: 1px solid var(--clr-border);
+    border-radius: var(--radius-sm);
+    font-size: 0.9rem;
+    font-family: var(--font-mono);
+    transition: border-color var(--t-fast);
+}
+
+.text-input:focus,
+.secret-input:focus {
+    outline: none;
+    border-color: var(--clr-accent);
+}
+
+.text-input.invalid,
+.secret-input.invalid {
+    border-color: var(--clr-danger);
+    box-shadow: 0 0 0 2px rgba(255, 91, 91, 0.2);
+}
+
+/* ── Status Messages & Code Formatting ── */
+.status-msg {
+    padding: 0.75rem 1rem;
+    border-radius: var(--radius-sm);
+    font-size: 0.85rem;
+    margin: 0;
+}
+
+.status-msg.success {
+    background: rgba(120, 248, 126, 0.08);
+    border: 1px solid var(--clr-border);
+    color: var(--clr-accent);
+}
+
+.status-msg.error {
+    background: rgba(255, 91, 91, 0.08);
+    border: 1px solid rgba(255, 91, 91, 0.2);
+    color: var(--clr-danger);
+}
+
+.status-msg.info {
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid rgba(255, 255, 255, 0.08);
+    color: var(--clr-text-secondary);
+}
+
+.address-code,
+.keystone-addr {
+    display: block;
+    padding: 0.75rem;
+    background: rgba(0, 0, 0, 0.3);
+    border-radius: var(--radius-sm);
+    font-family: var(--font-mono);
+    font-size: 0.85rem;
+    word-break: break-all;
+    color: var(--clr-accent);
+}

package/src/ui/component/identity/add-device/add-device.css

@@ -0,0 +1,133 @@
+:host {
+    display: block;
+    width: 100%;
+    margin: 1rem auto;
+}
+
+.component-container {
+    padding: 1.5rem;
+    background: var(--ibgib-bg-surface, #1e1e2e);
+    color: var(--ibgib-text-primary, #cdd6f4);
+    border-radius: 12px;
+    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
+}
+
+.input-group {
+    margin-bottom: 1.2rem;
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
+}
+
+.input-group label {
+    font-size: 0.95rem;
+    font-weight: 500;
+    color: var(--ibgib-text-secondary, #a6adc8);
+}
+
+.text-input,
+.secret-input {
+    padding: 0.75rem 1rem;
+    border-radius: 8px;
+    border: 1px solid var(--ibgib-border-color, #45475a);
+    background: var(--ibgib-bg-input, #11111b);
+    color: var(--ibgib-text-primary, #cdd6f4);
+    font-size: 1rem;
+    outline: none;
+    transition: border-color 0.2s ease, box-shadow 0.2s ease;
+}
+
+.text-input:focus,
+.secret-input:focus {
+    border-color: var(--ibgib-accent-color, #89b4fa);
+    box-shadow: 0 0 0 2px rgba(137, 180, 250, 0.2);
+}
+
+.text-input.invalid,
+.secret-input.invalid {
+    border-color: #f38ba8;
+    box-shadow: 0 0 0 2px rgba(243, 139, 168, 0.2);
+}
+
+.action-row {
+    margin-top: 1.5rem;
+}
+
+.action-btn {
+    width: 100%;
+    padding: 0.85rem 1.5rem;
+    border: none;
+    border-radius: 8px;
+    background: linear-gradient(135deg, #50fa7b, #40c767);
+    color: #11111b;
+    font-size: 1rem;
+    font-weight: 600;
+    cursor: pointer;
+    transition: transform 0.15s ease, opacity 0.15s ease;
+}
+
+.action-btn:hover {
+    transform: translateY(-1px);
+    opacity: 0.95;
+}
+
+.action-btn:active {
+    transform: translateY(0);
+}
+
+.status-area {
+    margin-top: 1.2rem;
+    padding: 1rem;
+    border-radius: 8px;
+    font-size: 0.95rem;
+}
+
+.status-area.info {
+    background: rgba(137, 180, 250, 0.15);
+    border: 1px solid #89b4fa;
+    color: #89b4fa;
+}
+
+.status-area.error {
+    background: rgba(243, 139, 168, 0.15);
+    border: 1px solid #f38ba8;
+    color: #f38ba8;
+}
+
+.status-area.success {
+    background: rgba(166, 227, 161, 0.15);
+    border: 1px solid #a6e3a1;
+    color: #a6e3a1;
+}
+
+.hidden {
+    display: none !important;
+}
+
+.collapsed {
+    display: none !important;
+}
+
+.result-area {
+    margin-top: 1.5rem;
+    padding: 1.2rem;
+    border-radius: 8px;
+    background: rgba(166, 227, 161, 0.1);
+    border: 1px solid #a6e3a1;
+}
+
+.result-area h3 {
+    margin-top: 0;
+    color: #a6e3a1;
+}
+
+.keystone-addr {
+    display: block;
+    word-break: break-all;
+    padding: 0.6rem;
+    background: #11111b;
+    border-radius: 6px;
+    font-family: monospace;
+    font-size: 0.85rem;
+    color: #89b4fa;
+}

package/src/ui/component/identity/add-device/add-device.html

@@ -0,0 +1,52 @@
+<div id="container" class="component-container">
+    <h2 id="title">Add New Device (Pairing)</h2>
+    <div class="content">
+        <p>Pair this device to your existing primary identity timeline.</p>
+
+        <div class="input-group">
+            <label for="input-identifier">Username or Email</label>
+            <input type="text" id="input-identifier" placeholder="Enter registered username or email..."
+                class="text-input">
+        </div>
+
+        <div class="input-group">
+            <label for="input-device-tag">Device Tag / Name *</label>
+            <input type="text" id="input-device-tag" placeholder="e.g. laptop, phone, living-room..."
+                class="text-input">
+        </div>
+
+        <div class="input-group">
+            <label for="input-passphrase">Master Passphrase</label>
+            <input type="password" id="input-passphrase" placeholder="Enter your master passphrase..."
+                class="secret-input">
+        </div>
+
+        <div class="checkbox-group" style="margin-bottom: 1.5rem; display: flex; align-items: center; gap: 0.5rem;">
+            <input type="checkbox" id="checkbox-make-active" checked
+                style="cursor: pointer; width: 1rem; height: 1rem;">
+            <label for="checkbox-make-active" style="cursor: pointer; font-size: 0.9rem; user-select: none;">Set as
+                active device on this browser</label>
+        </div>
+
+        <div class="action-row">
+            <button id="btn-add-device" class="action-btn">Pair & Add Device</button>
+        </div>
+
+        <div class="switch-workflow" style="margin-top: 1.2rem; text-align: center; font-size: 0.9rem; color: #a6adc8;">
+            Need a new identity? <button id="btn-switch-create-account" class="link-btn"
+                style="background: none; border: none; color: #89b4fa; font-weight: 600; cursor: pointer; text-decoration: underline; padding: 0; font-size: 0.9rem;">Create
+                Account</button>
+        </div>
+
+        <div id="status-area" class="status-area hidden">
+            <p id="status-text" class="status-msg"></p>
+        </div>
+
+        <div id="result-area" class="result-area collapsed">
+            <h3>Device Paired Successfully!</h3>
+            <p class="address-label">New Device Delegate Address:</p>
+            <code id="delegate-addr" class="keystone-addr"></code>
+            <p class="warning">✅ This device is now authorized to sync with your primary identity.</p>
+        </div>
+    </div>
+</div>