@ibgib/web-gib 0.0.62 → 0.0.64

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

@@ -199,4 +199,30 @@ h2 {
 input::placeholder {
     color: rgba(255, 255, 255, 0.35);
     opacity: 1;
+}
+
+.public-directory-notice {
+    padding: 0.75rem 1rem;
+    border-radius: 8px;
+    background: rgba(137, 180, 250, 0.08);
+    border: 1px solid rgba(137, 180, 250, 0.25);
+    display: flex;
+    gap: 0.6rem;
+    align-items: flex-start;
+    text-align: left;
+}
+
+.notice-icon {
+    font-size: 1.1rem;
+    line-height: 1.2;
+}
+
+.notice-body {
+    font-size: 0.82rem;
+    color: var(--clr-text, #cdd6f4);
+    line-height: 1.45;
+}
+
+.notice-body strong {
+    color: #89b4fa;
 }

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

@@ -80,6 +80,15 @@
                 <input type="text" id="input-passkey-name" placeholder="e.g. MacBook Touch ID, YubiKey 5Ci, Android Phone..." class="text-input">
             </div>
 
+            <div class="input-group">
+                <label for="select-passkey-attachment">Authenticator Device Target</label>
+                <select id="select-passkey-attachment" class="text-input" style="cursor: pointer;">
+                    <option value="any" selected>Any / Smart Chooser (All Options, No Forced Windows PIN)</option>
+                    <option value="cross-platform">Hardware Security Key (USB / NFC YubiKey Directly)</option>
+                    <option value="platform">Built-in Biometrics (Windows Hello, Touch ID, Fingerprint)</option>
+                </select>
+            </div>
+
             <div class="checkbox-group" style="margin-top: 0.5rem; margin-bottom: 1rem; display: flex; align-items: center; gap: 0.5rem;">
                 <input type="checkbox" id="checkbox-passkey-make-active" checked style="cursor: pointer; width: 1rem; height: 1rem;">
                 <label for="checkbox-passkey-make-active" style="cursor: pointer; font-size: 0.9rem; user-select: none;">Make this the active identity</label>
@@ -150,13 +159,21 @@
             <p class="warning">⚠️ Store this address safely. It is your root identity for this space.</p>
         </div>
 
+        <!-- Public Directory Notice Callout -->
+        <div class="public-directory-notice">
+            <span class="notice-icon">ℹ️</span>
+            <div class="notice-body">
+                <strong>Public Directory Notice:</strong> Your username and registered email address are associated with your public identity keystone and can be queried on the network (similar to a public PGP key or public DNS record).
+            </div>
+        </div>
+
         <div class="switch-workflow" style="margin-top: 1.2rem; text-align: center; font-size: 0.9rem; color: #a6adc8;">
             Already have a device paired? <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;">Pair New Device</button>
         </div>
 
         <!-- Privacy Footer Note -->
         <div class="privacy-footer" style="margin-top: 1rem; text-align: center; font-size: 0.78rem; color: #a6adc8; line-height: 1.4;">
-            ℹ️ Primary email addresses and identity keystones form part of the public graph for account discovery. Business data requires authorized sync delegates. Learn more in our <a id="link-privacy-policy" href="#privacy" style="color: #89b4fa; text-decoration: underline;">Privacy Policy</a>.
+            Identity keystones form part of the public graph for account discovery. Learn more in our <a id="link-privacy-policy" href="/privacy" target="_blank" rel="noopener" style="color: #89b4fa; text-decoration: underline;">Privacy Policy</a>.
         </div>
     </div>
 </div>

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

@@ -696,12 +696,21 @@ export class KeystoneCreatorComponentInstance
                 animationEmoji: '🛡️'
             });
 
+            const selectAttachment = this.shadowRoot?.querySelector('#select-passkey-attachment') as HTMLSelectElement | null;
+            const attachmentVal = selectAttachment?.value;
+            const authenticatorAttachment: AuthenticatorAttachment | undefined =
+                (attachmentVal === 'cross-platform' || attachmentVal === 'platform')
+                    ? attachmentVal
+                    : undefined;
+
             const rawSalt = crypto.getRandomValues(new Uint8Array(32));
             const saltHex = bufferToHex(rawSalt.buffer as ArrayBuffer);
             const regResult = await registerPasskeyCredential({
                 username,
                 displayName: username,
-                salt: saltHex
+                salt: saltHex,
+                authenticatorAttachment,
+                userVerification: 'preferred'
             });
             const { credentialId, transports } = regResult;
 
@@ -710,7 +719,8 @@ export class KeystoneCreatorComponentInstance
                 const prfResult = await evaluatePasskeyPrf({
                     credentialId,
                     salt: saltHex,
-                    transports
+                    transports,
+                    userVerification: 'preferred'
                 });
                 passkeySecret = prfResult.passkeySecret;
             }

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

@@ -97,6 +97,14 @@
                     </tbody>
                 </table>
             </div>
+            <div class="form-group" style="margin-top: 1rem; max-width: 360px;">
+                <label for="select-passkey-attachment" style="font-size: 0.85rem; color: var(--clr-text-secondary, #b3b3b3);">Authenticator Device Target</label>
+                <select id="select-passkey-attachment" class="form-control" style="width: 100%; padding: 0.4rem 0.6rem; margin-top: 0.25rem; border-radius: 4px; background: rgba(0,0,0,0.3); color: inherit; border: 1px solid rgba(255,255,255,0.2);">
+                    <option value="">Any (Default / Auto-Detect)</option>
+                    <option value="cross-platform">🔑 Hardware Security Key (USB / NFC)</option>
+                    <option value="platform">💻 Built-in Biometrics (Fingerprint / Touch ID)</option>
+                </select>
+            </div>
             <div class="action-row" style="margin-top: 0.5rem;">
                 <button id="btn-add-passkey" class="action-btn">
                     🛡️ Register New Passkey / Security Key