@ibgib/web-gib 0.0.52 → 0.0.56

package/src/ui/component/identity/index.mts

@@ -0,0 +1,36 @@
+/**
+ * @module ui/component/identity
+ *
+ * Keystone identity UI components and registration helpers.
+ */
+
+export * from './identity-header/identity-header.mjs';
+export * from './identity-manager/identity-manager.mjs';
+export * from './keystone-creator/keystone-creator.mjs';
+export * from './keystone-details/keystone-details.mjs';
+export * from './keystone-scrubber/keystone-scrubber.mjs';
+export * from './add-device/add-device.mjs';
+export * from './remove-device/remove-device.mjs';
+
+import { getComponentSvc } from '../ibgib-component-service.mjs';
+import { IdentityHeaderComponentMeta } from './identity-header/identity-header.mjs';
+import { IdentityManagerComponentMeta } from './identity-manager/identity-manager.mjs';
+import { KeystoneCreatorComponentMeta } from './keystone-creator/keystone-creator.mjs';
+import { KeystoneDetailsComponentMeta } from './keystone-details/keystone-details.mjs';
+import { KeystoneScrubberComponentMeta } from './keystone-scrubber/keystone-scrubber.mjs';
+import { AddDeviceComponentMeta } from './add-device/add-device.mjs';
+import { RemoveDeviceComponentMeta } from './remove-device/remove-device.mjs';
+
+/**
+ * Registers all standard Keystone Identity UI components with the central component service.
+ */
+export async function registerStandardIdentityComponents(): Promise<void> {
+    const componentSvc = await getComponentSvc();
+    componentSvc.registerComponentMeta(new IdentityHeaderComponentMeta());
+    componentSvc.registerComponentMeta(new IdentityManagerComponentMeta());
+    componentSvc.registerComponentMeta(new KeystoneCreatorComponentMeta());
+    componentSvc.registerComponentMeta(new KeystoneDetailsComponentMeta());
+    componentSvc.registerComponentMeta(new KeystoneScrubberComponentMeta());
+    componentSvc.registerComponentMeta(new AddDeviceComponentMeta());
+    componentSvc.registerComponentMeta(new RemoveDeviceComponentMeta());
+}

package/src/ui/component/identity/keystone-creator/keystone-creator.css

@@ -0,0 +1,97 @@
+:host {
+    display: block;
+    width: 100%;
+    margin: 1rem auto;
+}
+
+h2 {
+    margin-top: 0;
+    font-size: 1.5rem;
+    color: var(--clr-accent, #50fa7b);
+}
+
+.subtitle {
+    color: var(--clr-text-secondary, #a6adc8);
+    font-size: 0.95rem;
+    margin: 0;
+}
+
+.content {
+    margin-top: 1.5rem;
+    display: flex;
+    flex-direction: column;
+    gap: 1.5rem;
+}
+
+.input-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+}
+
+.input-group label {
+    font-size: 0.85rem;
+    color: var(--clr-text-secondary, #a6adc8);
+}
+
+.action-row {
+    margin-top: 1rem;
+    width: 100%;
+}
+
+.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: 0.5rem;
+}
+
+.status-area.hidden {
+    display: none;
+}
+
+.result-area {
+    padding: 1.5rem;
+    background: rgba(255, 255, 255, 0.03);
+    border: 1px solid var(--clr-border, rgba(255, 255, 255, 0.1));
+    border-radius: var(--radius-md, 8px);
+    display: flex;
+    flex-direction: column;
+    gap: 0.75rem;
+    transition: opacity var(--t-med, 0.2s ease);
+}
+
+.result-area.collapsed {
+    display: none;
+}
+
+.address-label {
+    font-size: 0.8rem;
+    color: var(--clr-text-secondary, #a6adc8);
+    margin: 0;
+}
+
+.warning {
+    font-size: 0.8rem;
+    color: var(--clr-warn, #f38ba8);
+    margin: 0.5rem 0 0;
+}

package/src/ui/component/identity/keystone-creator/keystone-creator.html

@@ -0,0 +1,51 @@
+<div id="container" class="component-container">
+    <h2 id="title">Create Account</h2>
+    <div class="content">
+        <p class="subtitle">Create your sovereign identity and register it to begin.</p>
+
+        <div class="input-group">
+            <label for="input-username">Username</label>
+            <input type="text" id="input-username" placeholder="Enter your username..." class="text-input">
+        </div>
+
+        <div class="input-group">
+            <label for="input-description">Description (Optional)</label>
+            <input type="text" id="input-description" placeholder="Enter an optional description..." class="text-input">
+        </div>
+
+        <div class="input-group">
+            <label for="input-email">Primary Email (Optional)</label>
+            <input type="email" id="input-email" placeholder="Enter your primary email address..." class="text-input">
+            <span class="privacy-note" style="font-size: 0.78rem; color: #a6adc8; margin-top: 0.25rem;">ℹ️ Primary email is optional and used for account discovery. If provided, it is linked to your public identity graph.</span>
+        </div>
+
+        <div class="input-group">
+            <label for="input-secret">Master Secret (Keep this private!)</label>
+            <input type="password" id="input-secret" placeholder="Enter your master secret..." 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;">Make this the active identity</label>
+        </div>
+
+        <div class="action-row">
+            <button id="btn-generate" class="action-btn">Generate Identity Keystone</button>
+        </div>
+
+        <div class="switch-workflow" style="margin-top: 1.2rem; text-align: center; font-size: 0.9rem; color: #a6adc8;">
+            Already have an account? <button id="btn-switch-sign-in" class="link-btn" style="background: none; border: none; color: #89b4fa; font-weight: 600; cursor: pointer; text-decoration: underline; padding: 0; font-size: 0.9rem;">Sign In</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>New Keystone Generated!</h3>
+            <p class="address-label">Address:</p>
+            <code id="keystone-addr" class="keystone-addr"></code>
+            <p class="warning">⚠️ Store this address safely. It is your root identity for this space.</p>
+        </div>
+    </div>
+</div>

package/src/ui/component/identity/keystone-creator/keystone-creator.mts

@@ -0,0 +1,497 @@
+import thisCss from "./keystone-creator.css";
+import thisHtml from "./keystone-creator.html";
+import commonComponentStylesCss from "../../common-component-styles.css";
+
+import { delay, extractErrorMsg, hash } from "@ibgib/helper-gib/dist/helpers/utils-helper.mjs";
+import { HashAlgorithm } from "@ibgib/helper-gib/dist/helpers/utils-helper.mjs";
+import { IbGibAddr } from "@ibgib/ts-gib/dist/types.mjs";
+import { IbGib_V1 } from "@ibgib/ts-gib/dist/V1/types.mjs";
+import { getIbGibAddr } from "@ibgib/ts-gib/dist/helper.mjs";
+import { KeystoneService_V1 } from "@ibgib/core-gib/dist/keystone/keystone-service-v1.mjs";
+import {
+    KeystonePoolConfig, KeystoneChallengeType, KeystoneReplenishStrategy
+} from "@ibgib/core-gib/dist/keystone/keystone-types.mjs";
+import { KeystoneProfileBuilder } from "@ibgib/core-gib/dist/keystone/policy/keystone-profile-builder.mjs";
+import { getGlobalMetaspace_waitIfNeeded, getLocalCoupledIbGibForDomainIbGib } from "../../../../helpers.mjs";
+import {
+    IbGibDynamicComponentMetaBase, IbGibFormInstanceBase,
+} from "../../ibgib-dynamic-component-bases.mjs";
+import {
+    ElementsBase, IbGibDynamicComponentInstance,
+    IbGibDynamicComponentInstanceInitOpts,
+} from "../../component-types.mjs";
+
+import { getComponentCtorArg } from "../../../../app-bootstrap/init-orchestration.mjs";
+import { getApiBridge } from "../../../../api/ibgib-api-bridge.mjs";
+
+import {
+    createSettings, getSectionName, getSettingsScope
+} from "../../../../common/settings/settings-helpers.mjs";
+import { SettingsType } from "../../../../common/settings/settings-constants.mjs";
+import { SettingsIbGib_V1 } from "../../../../common/settings/settings-types.mjs";
+import { updateSpecialIndex, mut8Timeline } from "@ibgib/core-gib/dist/timeline/timeline-api.mjs";
+import { toDto } from "@ibgib/core-gib/dist/common/other/ibgib-helper.mjs";
+import { validateEmail } from "@ibgib/core-gib/dist/keystone/keystone-helpers.mjs";
+import { KEYSTONE_USERNAME_REGEXP, KEYSTONE_DESCRIPTION_REGEXP, KEYSTONE_VERB_SYNC, KEYSTONE_VERB_CONNECT } from "@ibgib/core-gib/dist/keystone/keystone-constants.mjs";
+import { EVENT_IBGIB_IDENTITY_REQUEST_CHANGE, EVENT_IBGIB_UI_MESSAGE } from "../../../ui-constants.mjs";
+import { deriveDelegateSecret } from "@ibgib/core-gib/dist/keystone/strategy/hash-reveal-v1/hash-reveal-v1.mjs";
+
+export const KEYSTONE_CREATOR_COMPONENT_NAME = 'ibgib-keystone-creator';
+
+/**
+ * Metadata for the Keystone Creator component.
+ */
+export class KeystoneCreatorComponentMeta extends IbGibDynamicComponentMetaBase {
+    protected lc: string = `[KeystoneCreatorComponentMeta]`;
+
+    routeRegExp?: RegExp = new RegExp(`^${KEYSTONE_CREATOR_COMPONENT_NAME}$`);
+    componentName = KEYSTONE_CREATOR_COMPONENT_NAME;
+
+    constructor() {
+        super(getComponentCtorArg());
+        if (!customElements.get(this.componentName)) {
+            customElements.define(this.componentName, KeystoneCreatorComponentInstance);
+        }
+    }
+
+    async createInstance({
+        path,
+        ibGibAddr
+    }: {
+        path: string;
+        ibGibAddr: IbGibAddr;
+    }): Promise<IbGibDynamicComponentInstance> {
+        const lc = `${this.lc}[${this.createInstance.name}]`;
+        const component = document.createElement(this.componentName) as KeystoneCreatorComponentInstance;
+        await component.initialize({
+            ibGibAddr,
+            meta: this,
+            html: thisHtml,
+            css: [commonComponentStylesCss, thisCss],
+        });
+        return component;
+    }
+}
+
+/**
+ * References to DOM elements within the component's shadow root.
+ */
+interface KeystoneCreatorElements extends ElementsBase {
+    containerEl: HTMLDivElement;
+    titleEl: HTMLHeadingElement;
+    btnGenerateEl: HTMLButtonElement;
+    resultAreaEl: HTMLDivElement;
+    keystoneAddrEl: HTMLElement;
+    inputUsername: HTMLInputElement;
+    inputDescription: HTMLInputElement;
+    inputEmail: HTMLInputElement;
+    inputSecret: HTMLInputElement;
+    checkboxMakeActive: HTMLInputElement;
+    statusArea: HTMLDivElement;
+    statusText: HTMLParagraphElement;
+}
+
+/**
+ * Concrete implementation of the Keystone Creator component.
+ */
+export class KeystoneCreatorComponentInstance
+    extends IbGibFormInstanceBase<IbGib_V1, KeystoneCreatorElements>
+    implements IbGibDynamicComponentInstance<IbGib_V1, KeystoneCreatorElements> {
+
+    protected lc: string = `[KeystoneCreatorComponentInstance]`;
+    private hasExistingIdentities = false;
+
+    constructor() {
+        super();
+    }
+
+    override async initialize(opts: IbGibDynamicComponentInstanceInitOpts): Promise<void> {
+        await super.initialize(opts);
+    }
+
+    override async created(): Promise<void> {
+        this.elements = {} as KeystoneCreatorElements;
+
+        this.elements.containerEl = this.shadowRoot!.getElementById('container') as HTMLDivElement;
+        this.elements.titleEl = this.shadowRoot!.getElementById('title') as HTMLHeadingElement;
+        this.elements.btnGenerateEl = this.shadowRoot!.getElementById('btn-generate') as HTMLButtonElement;
+        this.elements.resultAreaEl = this.shadowRoot!.getElementById('result-area') as HTMLDivElement;
+        this.elements.keystoneAddrEl = this.shadowRoot!.getElementById('keystone-addr') as HTMLElement;
+        this.elements.inputUsername = this.shadowRoot!.getElementById('input-username') as HTMLInputElement;
+        this.elements.inputDescription = this.shadowRoot!.getElementById('input-description') as HTMLInputElement;
+        this.elements.inputEmail = this.shadowRoot!.getElementById('input-email') as HTMLInputElement;
+        this.elements.inputSecret = this.shadowRoot!.getElementById('input-secret') as HTMLInputElement;
+        this.elements.checkboxMakeActive = this.shadowRoot!.getElementById('checkbox-make-active') as HTMLInputElement;
+        this.elements.statusArea = this.shadowRoot!.getElementById('status-area') as HTMLDivElement;
+        this.elements.statusText = this.shadowRoot!.getElementById('status-text') as HTMLParagraphElement;
+
+        // ElementBase requires contentEl
+        this.elements.contentEl = this.elements.containerEl;
+
+        this.initHandlers();
+
+        if (this.ibGibAddr && !this.ibGib) {
+            await this.loadIbGib();
+        }
+        await this.checkExistingIdentities();
+        await this.renderUI();
+    }
+
+    private async checkExistingIdentities() {
+        const lc = `${this.lc}[checkExistingIdentities]`;
+        try {
+            const metaspace = await getGlobalMetaspace_waitIfNeeded();
+            const space = await metaspace.getLocalUserSpace({});
+            if (space) {
+                const keystonesIndex = await metaspace.getSpecialIbGib({
+                    type: "keystones",
+                    space,
+                    initialize: true,
+                });
+                const registeredKeystones = keystonesIndex?.rel8ns?.keystone ?? [];
+                this.hasExistingIdentities = registeredKeystones.length > 0;
+            }
+        } catch (error) {
+            console.warn(`${lc} Error checking existing identities: ${extractErrorMsg(error)}`);
+            this.hasExistingIdentities = false;
+        }
+
+        const checkbox = this.elements!.checkboxMakeActive;
+        if (checkbox) {
+            if (!this.hasExistingIdentities) {
+                checkbox.checked = true;
+                checkbox.disabled = true;
+                checkbox.title = "At least one active identity is required.";
+            } else {
+                checkbox.disabled = false;
+                checkbox.title = "";
+            }
+        }
+    }
+
+    override async disconnected(): Promise<void> {
+        // cleanup if needed
+    }
+
+    private initHandlers() {
+        this.elements!.btnGenerateEl.addEventListener('click', () => this.handleGenerate());
+
+        this.shadowRoot!.getElementById('btn-switch-sign-in')?.addEventListener('click', (e) => {
+            e.preventDefault();
+            window.dispatchEvent(new CustomEvent(EVENT_IBGIB_UI_MESSAGE, {
+                detail: { action: 'show-add-device' },
+                bubbles: true,
+                composed: true
+            }));
+        });
+
+        // Clear invalid styling when user inputs text
+        this.elements!.inputUsername.addEventListener('input', () => {
+            this.elements!.inputUsername.classList.remove('invalid');
+        });
+        this.elements!.inputDescription.addEventListener('input', () => {
+            this.elements!.inputDescription.classList.remove('invalid');
+        });
+        this.elements!.inputEmail.addEventListener('input', () => {
+            this.elements!.inputEmail.classList.remove('invalid');
+        });
+        this.elements!.inputSecret.addEventListener('input', () => {
+            this.elements!.inputSecret.classList.remove('invalid');
+        });
+    }
+
+    private setButtonLoading(isLoading: boolean) {
+        const btn = this.shadowRoot?.getElementById('btn-generate') as HTMLButtonElement | null;
+        if (btn) {
+            btn.disabled = isLoading;
+            btn.textContent = isLoading ? 'Generating...' : 'Generate Identity Keystone';
+        }
+    }
+
+    /**
+     * Triggered by the "Generate" button.
+     * Orchestrates: Secret -> Local Genesis -> Graph Collection -> Server Sync.
+     */
+    protected async handleGenerate() {
+        const lc = `${this.lc}[${this.handleGenerate.name}]`;
+        try {
+            console.log(`${lc} starting genesis orchestration...`);
+            const humanEyeDelay = 500;
+            this.setStatus("Initializing genesis...", "info");
+
+            const username = this.elements!.inputUsername.value.trim();
+            this.elements!.inputUsername.value = username;
+
+            // Validate Username using base class validation plumbing
+            if (!this.validateInputPattern({
+                input: this.elements!.inputUsername,
+                pattern: KEYSTONE_USERNAME_REGEXP,
+                errorMessage: "Username must be 1-63 characters (alphanumeric, underscores, hyphens, dots).",
+                required: true
+            })) {
+                this.setStatus("Invalid username. Must be 1-63 characters (alphanumeric, _, -, .).", "error");
+                return;
+            }
+
+            const description = this.elements!.inputDescription.value.trim();
+            this.elements!.inputDescription.value = description;
+
+            if (!this.validateInputPattern({
+                input: this.elements!.inputDescription,
+                pattern: KEYSTONE_DESCRIPTION_REGEXP,
+                errorMessage: "Description must be 0-128 characters and consist of English characters and common punctuation.",
+                required: false
+            })) {
+                this.setStatus("Invalid description. Alphanumeric + common punctuation, max 128 chars.", "error");
+                return;
+            }
+
+            // Validate Primary Email (Optional)
+            const email = this.elements!.inputEmail.value.trim();
+            this.elements!.inputEmail.value = email;
+            if (email && !validateEmail(email)) {
+                this.elements!.inputEmail.classList.add('invalid');
+                this.setStatus("Invalid email address format.", "error");
+                return;
+            }
+
+            const masterSecret = this.elements!.inputSecret.value.trim();
+            if (!masterSecret) {
+                this.elements!.inputSecret.classList.add('invalid');
+                this.setStatus("Please enter a master secret.", "error");
+                return;
+            } else {
+                this.elements!.inputSecret.classList.remove('invalid');
+            }
+
+            this.setButtonLoading(true);
+            this.showBusy({
+                isBusy: true,
+                title: 'Checking Email Availability...',
+                msg: 'Checking server identity index...',
+                animationEmoji: '🔍'
+            });
+
+            // 0. Pre-check email availability on server before generating local keystone
+            if (email) {
+                const resCheck = await getApiBridge().checkEmailAvailability({ email });
+                if (!resCheck.available) {
+                    const msg = resCheck.message || "Email/Identity is already registered.";
+                    console.error(`${lc} ${msg}`);
+                    this.setStatus(msg, "error");
+                    this.showBusy({ isBusy: false });
+                    this.setButtonLoading(false);
+                    return;
+                }
+            }
+
+            this.showBusy({
+                isBusy: true,
+                title: 'Generating Identity...',
+                msg: 'Preparing configuration and policy options...',
+                animationEmoji: '⚙️'
+            });
+
+            // 1. Prepare Primary/Domain Keystone Configs
+            const builder = KeystoneProfileBuilder.buildKeystone('domain')
+                .withUsername(username)
+                .withDescription(description);
+            if (email) {
+                builder.withEmails([email]);
+            }
+            builder.withDetails({
+                client: 'space-gib-web',
+                role: 'domain-identity'
+            });
+            const configs = await builder.compileConfigs();
+
+            // 2. Get local services
+            const metaspace = await getGlobalMetaspace_waitIfNeeded();
+            const space = await metaspace.getLocalUserSpace({});
+            if (!space) { throw new Error("No default space found in metaspace."); }
+
+            // 3. Perform Genesis (Local)
+            this.showBusy({
+                isBusy: true,
+                title: 'Generating Identity...',
+                msg: 'Generating cryptographic domain identity keys...',
+                animationEmoji: '🔑'
+            });
+            const keystoneService = new KeystoneService_V1();
+            const keystoneIbGib = await keystoneService.genesis({
+                masterSecret,
+                emails: email ? [email] : undefined,
+                configs,
+                metaspace,
+                space,
+                frameDetails: builder.getFrameDetails(),
+                isPrimary: true
+            });
+
+            const addr = getIbGibAddr({ ibGib: keystoneIbGib });
+            console.log(`${lc} local genesis complete: ${addr}`);
+            await delay(humanEyeDelay); // for human eyes, not needed for functionality
+            this.setStatus("Local genesis complete. Creating sync delegate...", "info");
+            console.log(`✓ Local genesis complete: ${addr}`);
+
+            // Automatically generate Sync Delegate Keystone
+            this.showBusy({
+                isBusy: true,
+                title: 'Creating Sync Delegate...',
+                msg: 'Generating cryptographic sync delegate keys...',
+                animationEmoji: '🔑'
+            });
+
+            const delegateSecret = await deriveDelegateSecret({ masterSecret });
+            const delegateBuilder = KeystoneProfileBuilder.buildKeystone('sync')
+                .withUsername(`${username}-sync`)
+                .withDescription(`Sync Delegate for ${username}`)
+                .withDetails({
+                    client: 'space-gib-web',
+                    role: 'sync-delegate'
+                });
+            const delegateConfigs = await delegateBuilder.compileConfigs();
+
+            const delegateKeystoneIbGib = await keystoneService.genesis({
+                masterSecret: delegateSecret,
+                configs: delegateConfigs,
+                metaspace,
+                space,
+                frameDetails: delegateBuilder.getFrameDetails()
+            });
+
+            const delegateAddr = getIbGibAddr({ ibGib: delegateKeystoneIbGib });
+            console.log(`${lc} sync delegate genesis complete: ${delegateAddr}`);
+            await delay(humanEyeDelay);
+
+            // Register delegate on parent
+            this.setStatus("Registering delegate on parent...", "info");
+            this.showBusy({
+                isBusy: true,
+                title: 'Registering Delegate...',
+                msg: 'Evolving domain identity to register delegate...',
+                animationEmoji: '📝'
+            });
+            const evolvedParentKeystoneIbGib = await keystoneService.registerDelegate({
+                parentKeystone: keystoneIbGib,
+                delegateKeystone: delegateKeystoneIbGib,
+                masterSecret,
+                metaspace,
+                space,
+                allowedVerbs: [KEYSTONE_VERB_SYNC, KEYSTONE_VERB_CONNECT]
+            });
+            const evolvedParentAddr = getIbGibAddr({ ibGib: evolvedParentKeystoneIbGib });
+            console.log(`${lc} delegate registered. evolved parent address: ${evolvedParentAddr}`);
+            await delay(humanEyeDelay);
+
+            // 4. Post to Server
+            console.log(`Posting genesis keystone to server...`);
+            this.setStatus("Syncing genesis to server...", "info");
+            this.showBusy({
+                isBusy: true,
+                title: 'Syncing to Server...',
+                msg: [
+                    'Posting genesis keystone to server sync node...',
+                    '(may take awhile, depending on strength of keystone...)',
+                ].join('\n'),
+                animationEmoji: '🔄'
+            });
+            const resSync = await getApiBridge().postGenesisKeystone(keystoneIbGib);
+            if (!resSync.success) {
+                const msg = `Sync failed: ${resSync.message}`;
+                console.error(`${lc} ${msg}`);
+                this.setStatus(msg, "error");
+                this.showBusy({ isBusy: false });
+                this.setButtonLoading(false);
+                return;
+            }
+
+            // Post evolved keystone + delegate keystone
+            this.setStatus("Syncing delegate registration to server...", "info");
+            this.showBusy({
+                isBusy: true,
+                title: 'Syncing Delegate...',
+                msg: 'Posting evolved domain identity and sync delegate to server...',
+                animationEmoji: '🔄'
+            });
+            const resEvolve = await getApiBridge().putEvolveKeystone({
+                domainAddr: addr,
+                keystoneIbGib: evolvedParentKeystoneIbGib,
+                relatedKeystoneIbGibs: [delegateKeystoneIbGib]
+            });
+            if (!resEvolve.success) {
+                const msg = `Delegate registration sync failed: ${resEvolve.message}`;
+                console.error(`${lc} ${msg}`);
+                this.setStatus(msg, "error");
+                this.showBusy({ isBusy: false });
+                this.setButtonLoading(false);
+                return;
+            }
+
+            // 5. Register with the keystones special index
+            this.showBusy({
+                isBusy: true,
+                title: 'Registering Identity...',
+                msg: 'Server sync succeeded!\nUpdating local identity indexes and scope settings...',
+                animationEmoji: '💾'
+            });
+            await delay(humanEyeDelay); // for human eyes, not needed for functionality
+            await updateSpecialIndex({
+                type: "keystones",
+                rel8nInfos: [
+                    {
+                        rel8nName: "keystone",
+                        ibGibs: [
+                            toDto({ ibGib: evolvedParentKeystoneIbGib }),
+                            toDto({ ibGib: delegateKeystoneIbGib })
+                        ],
+                    },
+                ],
+                metaspace,
+                space,
+            });
+
+            // Expose for dev tools
+            (window as any).dev_domainI = evolvedParentKeystoneIbGib;
+            (window as any).dev_domainIMasterSecret = masterSecret;
+            (window as any).dev_syncDelegate = delegateKeystoneIbGib;
+            (window as any).dev_syncDelegateSecret = delegateSecret;
+
+            // 6. Request to make the new identity active if the checkbox is checked
+            const makeActive = this.elements!.checkboxMakeActive?.checked;
+            if (makeActive) {
+                window.dispatchEvent(new CustomEvent(EVENT_IBGIB_IDENTITY_REQUEST_CHANGE, {
+                    detail: { activeIdentityAddr: evolvedParentAddr },
+                    bubbles: true,
+                    composed: true
+                }));
+            }
+
+            // 7. Success
+            this.elements!.keystoneAddrEl.textContent = evolvedParentAddr;
+            this.elements!.statusArea.classList.remove('hidden');
+            this.setStatus("Keystone successfully created and synced!", "success");
+            await delay(humanEyeDelay); // for human eyes, not needed for functionality
+            console.log(`✓ Keystone successfully created and synced!`);
+
+        } catch (error) {
+            const emsg = extractErrorMsg(error);
+            console.error(`${lc} ${emsg}`, error);
+            this.setStatus(`Error: ${emsg}`, "error");
+        } finally {
+            this.showBusy({
+                isBusy: false,
+                submitBtnSelector: '#btn-generate'
+            });
+            this.setButtonLoading(false);
+        }
+    }
+
+    protected override async renderUI(): Promise<void> {
+        // No complex rendering needed for this simple creator component yet
+    }
+
+    override async handleContextUpdated(): Promise<void> {
+        await this.renderUI();
+    }
+}