@ibgib/space-gib 0.0.8 → 0.0.12

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

@@ -1,569 +0,0 @@
-:host {
-    display: block;
-    width: 100%;
-    max-width: 100%;
-    font-family: var(--font-family-base, inherit);
-    font-size: var(--font-size-base, 1rem);
-    color: var(--text-color-base, var(--clr-text-primary, #ffffff));
-    box-sizing: border-box;
-}
-
-.details-view {
-    display: flex;
-    flex-direction: column;
-    gap: 1.5rem;
-}
-
-.card {
-    padding: 1.5rem;
-    background: rgba(255, 255, 255, 0.02);
-    border: 1px solid var(--border-color-base, rgba(255, 255, 255, 0.05));
-    border-radius: var(--radius-md, 8px);
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-}
-
-.card h3 {
-    margin: 0;
-    font-size: var(--h3-font-size, 1.15rem);
-    font-weight: var(--h3-font-weight, 500);
-    color: var(--clr-accent, #50fa7b);
-}
-
-/* Key-Value Details Grid Layout */
-.kv-grid {
-    display: grid;
-    grid-template-columns: minmax(140px, 180px) 1fr;
-    gap: 0.75rem 1.5rem;
-    align-items: baseline;
-    margin-top: 1rem;
-    margin-bottom: 1.5rem;
-}
-
-.kv-label {
-    font-family: var(--font-sans);
-    font-size: 0.75rem;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    color: var(--clr-text-secondary, #8fa08f);
-    user-select: none;
-}
-
-.kv-value {
-    font-size: 0.9375rem;
-    color: var(--clr-text-primary, #ffffff);
-    word-break: break-all;
-}
-
-.kv-pre {
-    margin: 0;
-    padding: 0.6rem 0.8rem;
-    background: rgba(0, 0, 0, 0.3);
-    border: 1px solid var(--border-color-base, rgba(255, 255, 255, 0.05));
-    border-radius: var(--radius-sm, 6px);
-    font-family: var(--font-mono, monospace);
-    font-size: 0.8rem;
-    color: var(--clr-accent, #50fa7b);
-    max-height: 150px;
-    overflow: auto;
-    white-space: pre;
-    word-break: normal;
-}
-
-/* Accordion raw styles */
-.accordion {
-    padding: 0;
-    overflow: hidden;
-}
-
-.accordion-header {
-    padding: 1.25rem 1.5rem;
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    cursor: pointer;
-    background: rgba(255, 255, 255, 0.01);
-    transition: background 0.2s ease-in-out;
-}
-
-.accordion-header:hover {
-    background: rgba(255, 255, 255, 0.03);
-}
-
-.accordion-header .chevron {
-    transition: transform 0.2s ease-in-out;
-    font-size: 0.8rem;
-    color: var(--clr-text-secondary, #b3b3b3);
-}
-
-.accordion-header.expanded .chevron {
-    transform: rotate(180deg);
-}
-
-.accordion-content {
-    max-height: 0;
-    transition: max-height 0.3s cubic-bezier(0, 1, 0, 1);
-    background: rgba(0, 0, 0, 0.15);
-    border-top: 1px solid var(--border-color-base, rgba(255, 255, 255, 0.03));
-}
-
-.accordion-content.expanded {
-    max-height: 5000px;
-    overflow-y: visible;
-    transition: max-height 0.3s cubic-bezier(1, 0, 1, 0);
-}
-
-.json-code {
-    margin: 0;
-    padding: 1.25rem;
-    font-family: var(--font-mono, monospace);
-    font-size: 0.8rem;
-    color: var(--clr-accent, #50fa7b);
-    background: transparent;
-    overflow: auto;
-    max-height: 70dvh;
-    white-space: pre-wrap;
-    word-break: break-all;
-}
-
-.description {
-    font-size: 0.85rem;
-    color: var(--clr-text-secondary, #b3b3b3);
-    margin: 0;
-}
-
-.hidden {
-    display: none !important;
-}
-
-.pools-container {
-    display: flex;
-    flex-direction: column;
-    gap: 1rem;
-}
-
-.pool-card {
-    padding: 1rem;
-    background: rgba(0, 0, 0, 0.25);
-    border: 1px solid var(--border-color-base, rgba(255, 255, 255, 0.05));
-    border-radius: 6px;
-    display: flex;
-    flex-direction: column;
-    gap: 0.75rem;
-}
-
-.pool-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-    padding-bottom: 0.5rem;
-}
-
-.pool-title {
-    font-size: 0.95rem;
-    font-weight: 600;
-    color: var(--clr-accent, #50fa7b);
-}
-
-.pool-tag {
-    font-size: 0.7rem;
-    padding: 0.15rem 0.4rem;
-    border-radius: 4px;
-    font-weight: bold;
-    text-transform: uppercase;
-}
-
-.pool-tag.foreign {
-    background: rgba(255, 184, 108, 0.15);
-    border: 1px solid rgba(255, 184, 108, 0.3);
-    color: #ffb86c;
-}
-
-.pool-tag.native {
-    background: rgba(80, 250, 123, 0.1);
-    border: 1px solid rgba(80, 250, 123, 0.2);
-    color: #50fa7b;
-}
-
-.pool-grid {
-    display: grid;
-    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
-    gap: 0.75rem;
-    font-size: 0.85rem;
-}
-
-.pool-field {
-    display: flex;
-    flex-direction: column;
-    gap: 0.2rem;
-}
-
-.pool-field label {
-    font-size: 0.7rem;
-    color: var(--clr-text-secondary, #b3b3b3);
-    text-transform: uppercase;
-    letter-spacing: 0.03em;
-}
-
-.pool-field span {
-    color: #ffffff;
-    font-weight: 500;
-    word-break: break-all;
-}
-
-/* Pool Details & Challenges/Binding Map styling */
-.pool-details {
-    margin-top: 0.75rem;
-    border-top: 1px solid rgba(255, 255, 255, 0.05);
-    padding-top: 0.5rem;
-}
-
-.pool-details-summary {
-    font-size: 0.8rem;
-    font-weight: 600;
-    color: var(--clr-text-secondary, #8fa08f);
-    cursor: pointer;
-    user-select: none;
-    outline: none;
-    padding: 0.25rem 0;
-    display: flex;
-    align-items: center;
-    gap: 0.25rem;
-    transition: color var(--t-fast, 120ms ease);
-}
-
-.pool-details-summary:hover {
-    color: var(--clr-accent, #78f87e);
-}
-
-.pool-challenges-list {
-    margin-top: 0.5rem;
-    display: flex;
-    flex-direction: column;
-    gap: 0.4rem;
-    max-height: 180px;
-    overflow-y: auto;
-    padding-right: 0.25rem;
-    border: 1px solid rgba(255, 255, 255, 0.05);
-    background: rgba(0, 0, 0, 0.15);
-    border-radius: 4px;
-    padding: 0.5rem;
-}
-
-.pool-challenge-item {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    background: rgba(255, 255, 255, 0.02);
-    border: 1px solid rgba(255, 255, 255, 0.03);
-    border-radius: 4px;
-    padding: 0.35rem 0.5rem;
-    font-size: 0.75rem;
-    font-family: var(--font-mono, monospace);
-}
-
-.challenge-id {
-    color: var(--clr-text-secondary, #8fa08f);
-    font-weight: 500;
-}
-
-.challenge-hash {
-    color: var(--clr-accent, #78f87e);
-    word-break: break-all;
-    margin-left: 1rem;
-    text-align: right;
-}
-
-/* Delegates Table styling */
-.delegates-table {
-    width: 100%;
-    border-collapse: collapse;
-    margin-top: 1rem;
-    font-size: 0.9rem;
-    background: rgba(0, 0, 0, 0.2);
-    border-radius: var(--radius-sm, 6px);
-    overflow: hidden;
-}
-
-.delegates-table th,
-.delegates-table td {
-    padding: 0.75rem 1rem;
-    text-align: left;
-    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
-}
-
-.delegates-table th {
-    font-family: var(--font-sans);
-    font-size: 0.75rem;
-    font-weight: 600;
-    text-transform: uppercase;
-    letter-spacing: 0.05em;
-    color: var(--clr-text-secondary, #8fa08f);
-    background: rgba(255, 255, 255, 0.02);
-}
-
-.delegates-table td {
-    font-family: var(--font-mono, monospace);
-    font-size: 0.8rem;
-    color: var(--clr-text-primary, #ffffff);
-    word-break: break-all;
-}
-
-.delegates-table tbody tr:hover {
-    background: rgba(255, 255, 255, 0.02);
-}
-
-.action-row {
-    display: flex;
-    gap: 1rem;
-    margin-top: 1rem;
-}
-
-.action-btn {
-    padding: 0.6rem 1.2rem;
-    background: var(--clr-accent, #50fa7b);
-    border: none;
-    border-radius: var(--radius-sm, 4px);
-    color: #1a1a24;
-    font-weight: 600;
-    cursor: pointer;
-    transition: all 0.2s ease-in-out;
-}
-
-.action-btn:hover {
-    background: #40c767;
-}
-
-.action-btn.secondary {
-    background: transparent;
-    border: 1px solid var(--border-color-base, rgba(255, 255, 255, 0.1));
-    color: #ffffff;
-}
-
-.action-btn.secondary:hover {
-    background: rgba(255, 255, 255, 0.05);
-}
-
-.action-btn.small {
-    padding: 0.2rem 0.5rem;
-    font-size: var(--font-size-xs, 0.75rem);
-    border-radius: 3px;
-}
-
-.action-btn.active-primary {
-    background: rgba(80, 250, 123, 0.2);
-    border: 1px solid rgba(80, 250, 123, 0.4);
-    color: var(--clr-accent, #50fa7b);
-    cursor: default;
-}
-
-.address-code {
-    display: inline-block;
-    padding: 0.2rem 0.4rem;
-    background: rgba(0, 0, 0, 0.3);
-    border: 1px solid var(--border-color-base, rgba(255, 255, 255, 0.05));
-    border-radius: var(--radius-sm, 4px);
-    font-family: var(--font-mono, monospace);
-    font-size: 0.8rem;
-    color: var(--clr-accent, #50fa7b);
-    word-break: break-all;
-}
-
-.status-msg {
-    margin-top: 1rem;
-    padding: 0.75rem 1rem;
-    border-radius: var(--radius-sm, 4px);
-    font-size: 0.9rem;
-}
-
-.status-msg.info {
-    background: rgba(139, 233, 253, 0.1);
-    border: 1px solid rgba(139, 233, 253, 0.3);
-    color: #8be9fd;
-}
-
-.status-msg.success {
-    background: rgba(80, 250, 123, 0.1);
-    border: 1px solid rgba(80, 250, 123, 0.3);
-    color: #50fa7b;
-}
-
-.status-msg.error {
-    background: rgba(255, 85, 85, 0.1);
-    border: 1px solid rgba(255, 85, 85, 0.3);
-    color: #ff5555;
-}
-
-/* Warning styles for viewing historical frames */
-#container.is-historical {
-    border: 3px dashed var(--clr-warning, #ffb86c);
-    border-radius: var(--radius-md, 8px);
-    padding: 1.5rem;
-    position: relative;
-    background: rgba(255, 184, 108, 0.01);
-}
-
-.warning-banner {
-    background: rgba(255, 184, 108, 0.1);
-    border: 1.5px solid rgba(255, 184, 108, 0.35);
-    color: var(--clr-warning, #ffb86c);
-    padding: 0.8rem 1.2rem;
-    border-radius: var(--radius-md, 8px);
-    font-weight: 600;
-    font-size: 1rem;
-    margin-bottom: 1.5rem;
-    display: flex;
-    align-items: center;
-    gap: 0.5rem;
-    box-shadow: 0 4px 12px rgba(255, 184, 108, 0.05);
-    animation: pulse-border 2s infinite alternate;
-}
-
-@keyframes pulse-border {
-    0% {
-        border-color: rgba(255, 184, 108, 0.2);
-        box-shadow: 0 4px 12px rgba(255, 184, 108, 0.02);
-    }
-    100% {
-        border-color: rgba(255, 184, 108, 0.5);
-        box-shadow: 0 4px 16px rgba(255, 184, 108, 0.08);
-    }
-}
-
-/* Grouped Toggle Switch for Identity Providers */
-.sso-toggle-group {
-    display: flex;
-    gap: 1.5rem;
-    margin-top: 1rem;
-    flex-wrap: wrap;
-}
-
-.sso-toggle-card {
-    flex: 1;
-    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;
-    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);
-}
-
-.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;
-}

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

@@ -1,127 +0,0 @@
-<div id="container" class="component-container">
-    <div id="historical-warning-banner" class="warning-banner hidden">
-        <span>⚠️ Viewing Historical Frame (Past State)</span>
-    </div>
-    <div id="identity-details-view" class="details-view">
-        <!-- Details for the active Domain Identity -->
-        <div class="card">
-            <h3>Domain Identity Details</h3>
-
-            <!-- Key-Value Grid -->
-            <div class="kv-grid">
-                <div class="kv-label">Username</div>
-                <div id="identity-name" class="kv-value">-</div>
-
-                <div class="kv-label">Description</div>
-                <div id="identity-description" class="kv-value">-</div>
-
-                <div class="kv-label">Verifiable Address</div>
-                <code id="identity-addr" class="address-code"></code>
-
-                <div class="kv-label">Generation (n)</div>
-                <div id="identity-gen" class="kv-value">-</div>
-
-                <div class="kv-label">Timestamp</div>
-                <div id="identity-timestamp" class="kv-value">-</div>
-
-                <div class="kv-label">UUID</div>
-                <div id="identity-uuid" class="kv-value">-</div>
-
-                <div class="kv-label">Frame Details</div>
-                <div class="kv-value">
-                    <pre id="identity-frame-details" class="kv-pre">-</pre>
-                </div>
-
-                <div class="kv-label">Aggr. Details</div>
-                <div class="kv-value">
-                    <pre id="identity-aggr-details" class="kv-pre">-</pre>
-                </div>
-            </div>
-
-            <div class="action-row">
-                <button id="btn-set-active" class="action-btn">Set as Active Identity</button>
-                <button id="btn-verify-chain" class="action-btn secondary">Verify Identity Chain</button>
-            </div>
-            <div id="verification-status" class="status-msg hidden"></div>
-        </div>
-
-        <!-- Challenge Pools Card -->
-        <div class="card">
-            <h3>Challenge Pools</h3>
-            <div id="pools-container" class="pools-container">
-                <!-- Dynamic pools list gets injected here -->
-            </div>
-        </div>
-
-        <!-- Delegates Card -->
-        <div id="delegates-card" class="card">
-            <h3>Registered Delegates</h3>
-            <div id="delegates-container" class="delegates-container">
-                <p class="description">Active sub-keystones authorized to perform sync and operations on behalf of this Domain Identity.</p>
-                <table class="delegates-table">
-                    <thead>
-                        <tr>
-                            <th>Name / Description</th>
-                            <th>TJP Address</th>
-                            <th>Allowed Verbs</th>
-                            <th>Actions</th>
-                        </tr>
-                    </thead>
-                    <tbody id="delegates-list">
-                        <!-- Dynamic list of delegates gets injected here -->
-                    </tbody>
-                </table>
-            </div>
-        </div>
-
-        <!-- SSO Identity Linking Card -->
-        <div id="sso-link-card" class="card hidden">
-            <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>
-
-        <!-- Raw Keystone Timeline Explorer -->
-        <div class="card accordion">
-            <div id="raw-accordion-header" class="accordion-header">
-                <span>Raw Keystone Timeline (JSON)</span>
-                <span class="chevron">▼</span>
-            </div>
-            <div id="raw-accordion-content" class="accordion-content">
-                <pre id="raw-keystone-json" class="json-code"></pre>
-            </div>
-        </div>
-    </div>
-</div>