@ibgib/space-gib 0.0.7 → 0.0.9

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@ibgib/space-gib",
-  "version": "0.0.7",
+  "version": "0.0.9",
   "type": "module",
   "description": "ibgib storage and provider service — SaaS at ibgib.space",
   "scripts": {
@@ -12,11 +12,11 @@
     "build:test": "tsc -p tsconfig.test.json"
   },
   "dependencies": {
-    "@ibgib/core-gib": "^0.1.64",
+    "@ibgib/core-gib": "^0.1.66",
     "@ibgib/helper-gib": "^0.0.36",
     "@ibgib/ts-gib": "^0.5.33",
-    "@ibgib/web-gib": "^0.0.50",
-    "@ibgib/node-gib": "^0.0.8"
+    "@ibgib/web-gib": "^0.0.52",
+    "@ibgib/node-gib": "^0.0.10"
   },
   "engines": {
     "node": ">=20.0.0"

package/src/client/AUTO-GENERATED-version.mts

@@ -8,4 +8,4 @@
 /**
  * Version of space-gib, auto-updated by the build process.
  */
-export const AUTO_GENERATED_VERSION = '0.0.7';
+export const AUTO_GENERATED_VERSION = '0.0.9';

package/src/client/api/space-gib-api-bridge.mts

@@ -51,9 +51,39 @@ export class SpaceGibApiBridge {
     }
 
     /**
-     * PUTs an evolved domain keystone and any related ibgibs (e.g. S^Stjp) to the server.
+     * PUTs an evolved domain keystone and any related keystones (e.g., session
+     * keystones or delegate keystones) to the server.
      */
-    public async putEvolveKeystone(domainAddr: string, keystoneIbGib: IbGib_V1, relatedIbGibs: IbGib_V1[] = []): Promise<{ success: boolean; message?: string }> {
+    public async putEvolveKeystone({
+        domainAddr,
+        keystoneIbGib,
+        relatedKeystoneIbGibs = [],
+        revokeTokens
+    }: {
+        /**
+         * Address of the root parent domain identity keystone.
+         */
+        domainAddr: string;
+        /**
+         * The main evolved keystone frame being synchronized.
+         */
+        keystoneIbGib: IbGib_V1;
+        /**
+         * Array of other keystone frames related to this evolution.
+         * Distinction in intent:
+         * 1. Ephemeral Session Keystones: Temporary keystones generated to
+         *    authorize a single sync session (under 'sync' claims, targeted via
+         *    claim.target = sAddr).
+         * 2. Persistent Delegate Keystones: Long-lived sub-keystones registered
+         *    in the parent's `delegates` dictionary that are evolved
+         *    concurrently (e.g., during 'manage' password changes).
+         */
+        relatedKeystoneIbGibs?: IbGib_V1[];
+        /**
+         * Optional map of providerId to token to revoke during unlinking.
+         */
+        revokeTokens?: Record<string, string>;
+    }): Promise<{ success: boolean; message?: string }> {
         const lc = `${this.lc}[${this.putEvolveKeystone.name}]`;
         try {
             console.log(`${lc} posting evolved keystone...`);
@@ -65,7 +95,11 @@ export class SpaceGibApiBridge {
                 headers: {
                     'Content-Type': 'application/json',
                 },
-                body: JSON.stringify({ keystoneIbGib, relatedIbGibs }),
+                body: JSON.stringify({
+                    keystoneIbGib,
+                    relatedKeystoneIbGibs,
+                    revokeTokens
+                }),
             });
 
             const data = await response.json();

package/src/client/components/keystone-creator/keystone-creator.mts

@@ -363,11 +363,11 @@ export class KeystoneCreatorComponentInstance
                 msg: 'Posting evolved domain identity and sync delegate to server...',
                 animationEmoji: '🔄'
             });
-            const resEvolve = await spaceGibApiBridge.putEvolveKeystone(
-                addr,
-                evolvedParentKeystoneIbGib,
-                [delegateKeystoneIbGib]
-            );
+            const resEvolve = await spaceGibApiBridge.putEvolveKeystone({
+                domainAddr: addr,
+                keystoneIbGib: evolvedParentKeystoneIbGib,
+                relatedKeystoneIbGibs: [delegateKeystoneIbGib]
+            });
             if (!resEvolve.success) {
                 this.setStatus(`Delegate registration sync failed: ${resEvolve.message}`, "error");
                 devLog(`✗ Server rejected delegate registration: ${resEvolve.message}`);

package/src/client/components/keystone-details/keystone-details.css

@@ -433,40 +433,179 @@
     }
 }
 
-.sso-actions {
+/* Grouped Toggle Switch for Identity Providers */
+.sso-toggle-group {
     display: flex;
-    gap: 1rem;
+    gap: 1.5rem;
     margin-top: 1rem;
     flex-wrap: wrap;
 }
 
-.sso-btn {
+.sso-toggle-card {
     flex: 1;
-    min-width: 200px;
-    display: inline-flex;
-    justify-content: center;
+    min-width: 180px;
+    max-width: 240px;
+    height: 180px;
+    background: rgba(255, 255, 255, 0.02);
+    border: 1px solid rgba(255, 255, 255, 0.06);
+    border-radius: var(--radius-md, 8px);
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
     align-items: center;
-    gap: 0.5rem;
-    padding: 0.75rem 1.25rem;
+    cursor: pointer;
+    overflow: hidden;
+    position: relative;
+    user-select: none;
+    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.sso-toggle-card:hover {
+    background: rgba(255, 255, 255, 0.04);
+    border-color: rgba(255, 255, 255, 0.12);
+    transform: translateY(-2px);
+    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
+}
+
+.sso-toggle-card:focus-visible {
+    outline: 2px solid var(--clr-accent, #50fa7b);
+    outline-offset: 2px;
+}
+
+/* Status Indicator bars: Top (Green/Active) and Bottom (Red/Faded) */
+.toggle-status-indicator {
+    width: 100%;
+    height: 6px;
+    transition: all 0.25s ease-in-out;
+}
+
+.toggle-status-indicator.top {
+    background: transparent;
+}
+
+.toggle-status-indicator.bottom {
+    background: transparent;
+}
+
+/* Middle Content Wrapper */
+.toggle-content {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    gap: 0.6rem;
+    padding: 1rem;
+    text-align: center;
+}
+
+.sso-icon {
+    width: 2.25rem;
+    height: 2.25rem;
+    transition: transform 0.25s cubic-bezier(0.4, 0, 0.2, 1);
+}
+
+.sso-toggle-card:hover .sso-icon {
+    transform: scale(1.1);
+}
+
+.provider-label {
+    font-size: 0.95rem;
     font-weight: 600;
+    color: var(--clr-text-primary, #ffffff);
 }
 
-.sso-btn.google {
-    background: #4285F4;
-    border-color: #4285F4;
-    color: #ffffff;
+.toggle-state-text {
+    font-size: 0.75rem;
+    font-weight: 500;
+    text-transform: uppercase;
+    letter-spacing: 0.05em;
+    color: var(--clr-text-secondary, #8fa08f);
+    transition: color 0.25s ease-in-out;
+}
+
+/* Linked (Active State) styles */
+.sso-toggle-card.linked {
+    background: rgba(80, 250, 123, 0.02);
+    border-color: rgba(80, 250, 123, 0.2);
+    box-shadow: 0 4px 16px rgba(80, 250, 123, 0.04);
+}
+
+.sso-toggle-card.linked:hover {
+    background: rgba(80, 250, 123, 0.04);
+    border-color: rgba(80, 250, 123, 0.35);
+}
+
+.sso-toggle-card.linked .toggle-status-indicator.top {
+    background: var(--clr-accent, #50fa7b);
+    box-shadow: 0 2px 10px rgba(80, 250, 123, 0.5);
+}
+
+.sso-toggle-card.linked .toggle-state-text {
+    color: var(--clr-accent, #50fa7b);
+    font-weight: bold;
+}
+
+/* Unlinked (Inactive/Faded State) styles */
+.sso-toggle-card.unlinked {
+    opacity: 0.75;
+}
+
+.sso-toggle-card.unlinked:hover {
+    opacity: 1.0;
+}
+
+.sso-toggle-card.unlinked .toggle-status-indicator.bottom {
+    background: rgba(255, 85, 85, 0.4);
+}
+
+.sso-toggle-card.unlinked .toggle-state-text {
+    color: var(--clr-text-secondary, #8fa08f);
+}
+
+/* Historical/Disabled state */
+.sso-toggle-card.disabled {
+    pointer-events: none;
+    opacity: 0.4;
 }
 
-.sso-btn.google:hover {
-    background: #357ae8;
+/* Form Layout for Passphrase Rotation */
+.form-row {
+    display: flex;
+    gap: 1rem;
+    flex-wrap: wrap;
+    margin-top: 0.5rem;
+}
+
+.form-group {
+    flex: 1;
+    min-width: 200px;
+    display: flex;
+    flex-direction: column;
+    gap: 0.4rem;
 }
 
-.sso-btn.github {
-    background: #333333;
-    border-color: #444444;
+.form-group label {
+    font-size: 0.75rem;
+    font-weight: 600;
+    text-transform: uppercase;
+    letter-spacing: 0.03em;
+    color: var(--clr-text-secondary, #8fa08f);
+}
+
+.form-input {
+    padding: 0.65rem 0.8rem;
+    background: rgba(0, 0, 0, 0.35);
+    border: 1px solid var(--border-color-base, rgba(255, 255, 255, 0.08));
+    border-radius: var(--radius-sm, 6px);
     color: #ffffff;
+    font-family: var(--font-family-base, inherit);
+    font-size: 0.9rem;
+    transition: all 0.2s ease-in-out;
 }
 
-.sso-btn.github:hover {
-    background: #444444;
+.form-input:focus {
+    outline: none;
+    border-color: var(--clr-accent, #50fa7b);
+    background: rgba(0, 0, 0, 0.5);
+    box-shadow: 0 0 8px rgba(80, 250, 123, 0.15);
 }

package/src/client/components/keystone-details/keystone-details.html

@@ -76,15 +76,67 @@
 
         <!-- SSO Identity Linking Card -->
         <div id="sso-link-card" class="card hidden">
-            <h3>Link Identity Provider</h3>
-            <p class="description">Evolve this Domain Identity by linking a Web2 provider (Google, GitHub) to delegate sync access.</p>
-            <div class="sso-actions">
-                <button id="btn-link-google" class="action-btn sso-btn google">Link Google Account</button>
-                <button id="btn-link-github" class="action-btn sso-btn github">Link GitHub Account</button>
+            <h3>Identity Providers</h3>
+            <p class="description">Securely link or unlink external OAuth2 providers to delegate sync access to this identity.</p>
+            <div class="sso-toggle-group">
+                <!-- Google Card Toggle -->
+                <div id="btn-link-google" class="sso-toggle-card google" role="button" tabindex="0">
+                    <div class="toggle-status-indicator top"></div>
+                    <div class="toggle-content">
+                        <!-- Custom Google SVG Icon -->
+                        <svg class="sso-icon" viewBox="0 0 24 24">
+                            <path fill="#4285F4" d="M22.56 12.25c0-.78-.07-1.53-.2-2.25H12v4.26h5.92c-.26 1.37-1.04 2.53-2.21 3.31v2.77h3.57c2.08-1.92 3.28-4.74 3.28-8.09z"/>
+                            <path fill="#34A853" d="M12 23c2.97 0 5.46-.98 7.28-2.66l-3.57-2.77c-.98.66-2.23 1.06-3.71 1.06-2.86 0-5.29-1.93-6.16-4.53H2.18v2.84C3.99 20.53 7.7 23 12 23z"/>
+                            <path fill="#FBBC05" d="M5.84 14.09c-.22-.66-.35-1.36-.35-2.09s.13-1.43.35-2.09V7.06H2.18C1.43 8.55 1 10.22 1 12s.43 3.45 1.18 4.94l2.85-2.22.81-.63z"/>
+                            <path fill="#EA4335" d="M12 5.38c1.62 0 3.06.56 4.21 1.64l3.15-3.15C17.45 2.09 14.97 1 12 1 7.7 1 3.99 3.47 2.18 7.06l3.66 2.84c.87-2.6 3.3-4.52 6.16-4.52z"/>
+                        </svg>
+                        <span class="provider-label">Google</span>
+                        <span class="toggle-state-text">Unlinked</span>
+                    </div>
+                    <div class="toggle-status-indicator bottom"></div>
+                </div>
+
+                <!-- GitHub Card Toggle -->
+                <div id="btn-link-github" class="sso-toggle-card github" role="button" tabindex="0">
+                    <div class="toggle-status-indicator top"></div>
+                    <div class="toggle-content">
+                        <!-- Custom GitHub SVG Icon -->
+                        <svg class="sso-icon" viewBox="0 0 24 24" fill="currentColor">
+                            <path d="M12 .297c-6.63 0-12 5.373-12 12 0 5.303 3.438 9.8 8.205 11.385.6.113.82-.258.82-.577 0-.285-.01-1.04-.015-2.04-3.338.724-4.042-1.61-4.042-1.61C4.422 18.07 3.633 17.7 3.633 17.7c-1.087-.744.084-.729.084-.729 1.205.084 1.838 1.236 1.838 1.236 1.07 1.835 2.809 1.305 3.495.998.108-.776.417-1.305.76-1.605-2.665-.3-5.466-1.332-5.466-5.93 0-1.31.465-2.38 1.235-3.22-.135-.303-.54-1.523.105-3.176 0 0 1.005-.322 3.3 1.23.96-.267 1.98-.399 3-.405 1.02.006 2.04.138 3 .405 2.28-1.552 3.285-1.23 3.285-1.23.645 1.653.24 2.873.12 3.176.765.84 1.23 1.91 1.23 3.22 0 4.61-2.805 5.625-5.475 5.92.42.36.81 1.096.81 2.22 0 1.606-.015 2.896-.015 3.286 0 .315.21.69.825.57C20.565 22.092 24 17.592 24 12.297c0-6.627-5.373-12-12-12"/>
+                        </svg>
+                        <span class="provider-label">GitHub</span>
+                        <span class="toggle-state-text">Unlinked</span>
+                    </div>
+                    <div class="toggle-status-indicator bottom"></div>
+                </div>
             </div>
             <div id="sso-status-msg" class="status-msg hidden"></div>
         </div>
 
+        <!-- Change Passphrase Card -->
+        <div id="change-passphrase-card" class="card">
+            <h3>Change Master Passphrase</h3>
+            <p class="description">Rotate your local master passphrase. This will cryptographically evolve your primary identity and all registered user-owned delegate keystones to the new passphrase.</p>
+            <div class="form-row">
+                <div class="form-group">
+                    <label for="input-current-passphrase">Current Passphrase</label>
+                    <input type="password" id="input-current-passphrase" placeholder="••••••••" class="form-input">
+                </div>
+                <div class="form-group">
+                    <label for="input-new-passphrase">New Passphrase</label>
+                    <input type="password" id="input-new-passphrase" placeholder="••••••••" class="form-input">
+                </div>
+                <div class="form-group">
+                    <label for="input-confirm-passphrase">Confirm New Passphrase</label>
+                    <input type="password" id="input-confirm-passphrase" placeholder="••••••••" class="form-input">
+                </div>
+            </div>
+            <div class="action-row">
+                <button id="btn-change-passphrase" class="action-btn">Update Passphrase</button>
+            </div>
+            <div id="change-passphrase-status" class="status-msg hidden"></div>
+        </div>
+
         <!-- Raw Keystone Timeline Explorer -->
         <div class="card accordion">
             <div id="raw-accordion-header" class="accordion-header">