@structured-id/ui-core 0.1.5

package/src/browser-vp/storage.test.ts

@@ -0,0 +1,9 @@
+import { describe, it, expect } from "vitest";
+import { isIndexedDbAvailable } from "./storage";
+
+describe("isIndexedDbAvailable", () => {
+  it("returns false in Node.js environment (no indexedDB global)", () => {
+    // Node.js doesn't have indexedDB
+    expect(isIndexedDbAvailable()).toBe(false);
+  });
+});

package/src/browser-vp/storage.ts

@@ -0,0 +1,165 @@
+/**
+ * IndexedDB storage for Browser VP.
+ *
+ * Database: sid-browser-vp
+ *   ├── bindings       — per-service binding entries (key: service_sector)
+ *   └── profile-state  — profile state + encrypted blob (key: profile_id)
+ *
+ * See arch/auth/browser-vp.md § IndexedDB Storage Schema.
+ */
+
+import type { ProfileState, BindingEntry } from "./types";
+
+const DB_NAME = "sid-browser-vp";
+const DB_VERSION = 1;
+const STORE_BINDINGS = "bindings";
+const STORE_PROFILE = "profile-state";
+
+/**
+ * Open (or create) the IndexedDB database.
+ */
+function openDb(): Promise<IDBDatabase> {
+  return new Promise((resolve, reject) => {
+    const request = indexedDB.open(DB_NAME, DB_VERSION);
+
+    request.onupgradeneeded = () => {
+      const db = request.result;
+      if (!db.objectStoreNames.contains(STORE_BINDINGS)) {
+        db.createObjectStore(STORE_BINDINGS, { keyPath: "serviceSector" });
+      }
+      if (!db.objectStoreNames.contains(STORE_PROFILE)) {
+        db.createObjectStore(STORE_PROFILE, { keyPath: "profileId" });
+      }
+    };
+
+    request.onsuccess = () => resolve(request.result);
+    request.onerror = () => reject(request.error);
+  });
+}
+
+// ── Profile State ──
+
+/** Save or update profile state. */
+export async function saveProfileState(
+  profileId: string,
+  state: ProfileState,
+): Promise<void> {
+  const db = await openDb();
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(STORE_PROFILE, "readwrite");
+    tx.objectStore(STORE_PROFILE).put({ profileId, ...state });
+    tx.oncomplete = () => resolve();
+    tx.onerror = () => reject(tx.error);
+  });
+}
+
+/** Load profile state by ID. Returns null if not found. */
+export async function loadProfileState(
+  profileId: string,
+): Promise<ProfileState | null> {
+  const db = await openDb();
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(STORE_PROFILE, "readonly");
+    const request = tx.objectStore(STORE_PROFILE).get(profileId);
+    request.onsuccess = () => {
+      const result = request.result;
+      if (!result) {
+        resolve(null);
+        return;
+      }
+      // Strip the profileId key we added for IndexedDB
+      const { profileId: _profileId, ...state } = result;
+      resolve(state as ProfileState);
+    };
+    request.onerror = () => reject(request.error);
+  });
+}
+
+/** Delete profile state. */
+export async function deleteProfileState(profileId: string): Promise<void> {
+  const db = await openDb();
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(STORE_PROFILE, "readwrite");
+    tx.objectStore(STORE_PROFILE).delete(profileId);
+    tx.oncomplete = () => resolve();
+    tx.onerror = () => reject(tx.error);
+  });
+}
+
+// ── Bindings ──
+
+/** Save or update a binding entry. */
+export async function saveBinding(
+  serviceSector: string,
+  entry: BindingEntry,
+): Promise<void> {
+  const db = await openDb();
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(STORE_BINDINGS, "readwrite");
+    tx.objectStore(STORE_BINDINGS).put({ serviceSector, ...entry });
+    tx.oncomplete = () => resolve();
+    tx.onerror = () => reject(tx.error);
+  });
+}
+
+/** Load a binding by service sector. */
+export async function loadBinding(
+  serviceSector: string,
+): Promise<BindingEntry | null> {
+  const db = await openDb();
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(STORE_BINDINGS, "readonly");
+    const request = tx.objectStore(STORE_BINDINGS).get(serviceSector);
+    request.onsuccess = () => {
+      const result = request.result;
+      if (!result) {
+        resolve(null);
+        return;
+      }
+      const { serviceSector: _serviceSector, ...entry } = result;
+      resolve(entry as BindingEntry);
+    };
+    request.onerror = () => reject(request.error);
+  });
+}
+
+/** List all stored bindings. */
+export async function listBindings(): Promise<
+  Array<{ serviceSector: string } & BindingEntry>
+> {
+  const db = await openDb();
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(STORE_BINDINGS, "readonly");
+    const request = tx.objectStore(STORE_BINDINGS).getAll();
+    request.onsuccess = () => resolve(request.result ?? []);
+    request.onerror = () => reject(request.error);
+  });
+}
+
+/** Delete a binding. */
+export async function deleteBinding(serviceSector: string): Promise<void> {
+  const db = await openDb();
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction(STORE_BINDINGS, "readwrite");
+    tx.objectStore(STORE_BINDINGS).delete(serviceSector);
+    tx.oncomplete = () => resolve();
+    tx.onerror = () => reject(tx.error);
+  });
+}
+
+/** Clear all data (profile state + bindings). */
+export async function clearAll(): Promise<void> {
+  const db = await openDb();
+  return new Promise((resolve, reject) => {
+    const tx = db.transaction([STORE_PROFILE, STORE_BINDINGS], "readwrite");
+    tx.objectStore(STORE_PROFILE).clear();
+    tx.objectStore(STORE_BINDINGS).clear();
+    tx.oncomplete = () => resolve();
+    tx.onerror = () => reject(tx.error);
+  });
+}
+
+/** Check if IndexedDB is available in this environment. */
+export function isIndexedDbAvailable(): boolean {
+  return typeof indexedDB !== "undefined";
+}

package/src/browser-vp/types.ts

@@ -0,0 +1,97 @@
+/**
+ * Browser VP types.
+ *
+ * See arch/auth/browser-vp.md for full specification.
+ */
+
+/** VP strategy — automatically selected based on browser capabilities. */
+export type VpStrategy = "prf" | "device-key";
+
+/** Profile state stored in IndexedDB. */
+export interface ProfileState {
+  /** Which strategy this profile uses. */
+  strategy: VpStrategy;
+
+  /** Encrypted profile blob (< 1MB typical). */
+  encryptedBlob: ArrayBuffer;
+
+  /** Optimistic sync version with SID server. */
+  blobVersion: number;
+
+  // Strategy A (PRF) fields
+  /** PRF salt identifier (for versioning). */
+  prfSalt?: string;
+  /** SHA-256 of master public key (authenticator change detection). */
+  masterPublicKeyHash?: string;
+
+  // Strategy B (device-key) fields
+  /** Non-extractable CryptoKey reference (browser-managed). */
+  cryptoKeyRef?: CryptoKey;
+
+  /** Last sync timestamp with SID server. */
+  lastSyncedAt: Date;
+  /** SID device ID for this browser instance. */
+  deviceId: string;
+}
+
+/** Per-service binding stored in IndexedDB. */
+export interface BindingEntry {
+  /** Opaque BindingId (pairwise per-service). */
+  bindingId: string;
+  /** HD derivation index for this binding. */
+  bindingIndex: number;
+  /** Per-binding certificate chain (DER-encoded). */
+  certChain: ArrayBuffer;
+  /** Certificate expiry date. */
+  certExpiry: Date;
+  /** Last time a VP was created for this binding. */
+  lastUsedAt: Date;
+}
+
+/** Key material derived from PRF or generated via WebCrypto. */
+export interface DerivedKeys {
+  /** ECDSA P-256 signing key (non-extractable). */
+  signingKey: CryptoKeyPair;
+  /** AES-256-GCM data encryption key. */
+  dataKey: CryptoKey;
+}
+
+/** Verifiable Presentation payload. */
+export interface VerifiablePresentation {
+  /** The service sector this VP is bound to. */
+  serviceSector: string;
+  /** Binding ID (pairwise). */
+  bindingId: string;
+  /** Signed VP payload (CBOR or JSON). */
+  payload: ArrayBuffer;
+  /** Signature over payload. */
+  signature: ArrayBuffer;
+  /** Certificate chain for verification. */
+  certChain: ArrayBuffer;
+  /** Nonce from relying party (replay protection). */
+  nonce: string;
+  /** Audience (relying party origin). */
+  audience: string;
+}
+
+/** Options for VP creation request from a relying party. */
+export interface VpRequest {
+  /** Nonce for replay protection. */
+  nonce: string;
+  /** Requested claims (e.g., ["email", "name"]). */
+  requestedClaims: string[];
+  /** Audience (relying party origin). */
+  audience: string;
+  /** Service sector identifier. */
+  serviceSector: string;
+}
+
+/** Result of browser VP initialization. */
+export interface BrowserVpContext {
+  /** Active strategy. */
+  strategy: VpStrategy;
+  /** Profile ID. */
+  profileId: string;
+  /** Whether VP creation is available (keys + blob + cert ready). */
+  ready: boolean;
+}

package/src/browser-vp/vp.test.ts

@@ -0,0 +1,43 @@
+import { describe, it, expect } from "vitest";
+import { needsRenewal } from "./vp";
+import type { BindingEntry } from "./types";
+
+function makeBinding(certExpiry: Date): BindingEntry {
+  return {
+    bindingId: "bind_test",
+    bindingIndex: 0,
+    certChain: new ArrayBuffer(0),
+    certExpiry,
+    lastUsedAt: new Date(),
+  };
+}
+
+describe("needsRenewal", () => {
+  it("returns true when cert expires in less than 7 days", () => {
+    const sixDays = Date.now() + 6 * 24 * 60 * 60 * 1000;
+    expect(needsRenewal(makeBinding(new Date(sixDays)))).toBe(true);
+  });
+
+  it("returns true when cert is already expired", () => {
+    const yesterday = Date.now() - 24 * 60 * 60 * 1000;
+    expect(needsRenewal(makeBinding(new Date(yesterday)))).toBe(true);
+  });
+
+  it("returns false when cert expires in more than 7 days", () => {
+    const eightDays = Date.now() + 8 * 24 * 60 * 60 * 1000;
+    expect(needsRenewal(makeBinding(new Date(eightDays)))).toBe(false);
+  });
+
+  it("returns true at exactly 7 days boundary", () => {
+    // At exactly 7 days, difference < 7 days in ms because of execution time
+    // At exactly 7 days, could be true or false depending on execution timing.
+    // We test just under 7 days to be deterministic.
+    const justUnder = Date.now() + 7 * 24 * 60 * 60 * 1000 - 1000;
+    expect(needsRenewal(makeBinding(new Date(justUnder)))).toBe(true);
+  });
+
+  it("returns false for far-future expiry", () => {
+    const oneYear = Date.now() + 365 * 24 * 60 * 60 * 1000;
+    expect(needsRenewal(makeBinding(new Date(oneYear)))).toBe(false);
+  });
+});

package/src/browser-vp/vp.ts

@@ -0,0 +1,113 @@
+/**
+ * Verifiable Presentation creation.
+ *
+ * Builds and signs VPs using cached keys and profile blob.
+ * VP creation is fully offline (~50ms with biometric cache).
+ *
+ * See arch/auth/browser-vp.md § VP Creation.
+ */
+
+import type { VpRequest, VerifiablePresentation, BindingEntry } from "./types";
+import { sign } from "./crypto";
+import { loadBinding, saveBinding } from "./storage";
+
+const encoder = new TextEncoder();
+
+/**
+ * Create a Verifiable Presentation for a service.
+ *
+ * @param request - VP request from the relying party.
+ * @param signingKey - ECDSA P-256 private key (master or per-binding).
+ * @param profileBlob - Decrypted profile blob.
+ * @returns Signed VP, or null if binding not found.
+ */
+export async function createVp(
+  request: VpRequest,
+  signingKey: CryptoKey,
+  profileBlob: ArrayBuffer,
+): Promise<VerifiablePresentation | null> {
+  // Load binding for this service sector
+  const binding = await loadBinding(request.serviceSector);
+  if (!binding) {
+    return null;
+  }
+
+  // Check certificate expiry
+  if (binding.certExpiry < new Date()) {
+    // Certificate expired — VP creation blocked
+    // Caller should trigger online renewal
+    return null;
+  }
+
+  // Build VP payload
+  const payload = buildPayload(request, binding, profileBlob);
+
+  // Sign with binding key
+  const signature = await sign(payload, signingKey);
+
+  // Update last used timestamp
+  await saveBinding(request.serviceSector, {
+    ...binding,
+    lastUsedAt: new Date(),
+  });
+
+  return {
+    serviceSector: request.serviceSector,
+    bindingId: binding.bindingId,
+    payload,
+    signature,
+    certChain: binding.certChain,
+    nonce: request.nonce,
+    audience: request.audience,
+  };
+}
+
+/**
+ * Build the VP payload to be signed.
+ *
+ * The payload contains:
+ * - nonce (replay protection)
+ * - audience (relying party)
+ * - bindingId (pairwise identifier)
+ * - requested claims (selective disclosure)
+ * - timestamp
+ */
+function buildPayload(
+  request: VpRequest,
+  binding: BindingEntry,
+  _profileBlob: ArrayBuffer,
+): ArrayBuffer {
+  // Simplified payload structure.
+  // Production: SD-JWT or Merkle-based selective disclosure
+  // from the profile blob.
+  const payload = {
+    nonce: request.nonce,
+    aud: request.audience,
+    sub: binding.bindingId,
+    iat: Math.floor(Date.now() / 1000),
+    claims: request.requestedClaims,
+  };
+
+  return encoder.encode(JSON.stringify(payload)).buffer as ArrayBuffer;
+}
+
+/**
+ * Check if a binding's certificate needs renewal.
+ *
+ * Renewal is attempted 7 days before expiry (background).
+ */
+export function needsRenewal(binding: BindingEntry): boolean {
+  const sevenDays = 7 * 24 * 60 * 60 * 1000;
+  return binding.certExpiry.getTime() - Date.now() < sevenDays;
+}
+
+/**
+ * List all bindings that need certificate renewal.
+ */
+export async function getExpiringSoon(): Promise<
+  Array<{ serviceSector: string } & BindingEntry>
+> {
+  const { listBindings } = await import("./storage");
+  const all = await listBindings();
+  return all.filter((b) => needsRenewal(b));
+}

package/src/components/SidAvatar.vue

@@ -0,0 +1,106 @@
+<script setup lang="ts">
+/**
+ * Avatar component with image, initials fallback, and size variants.
+ *
+ * Pure Vue 3, no Quasar dependency. Consuming apps can override
+ * styles via CSS custom properties.
+ */
+import { computed } from "vue";
+
+export type AvatarSize = "xs" | "sm" | "md" | "lg" | "xl";
+
+const props = withDefaults(
+  defineProps<{
+    /** Image URL (optional — falls back to initials). */
+    src?: string | null;
+    /** Display name for initials fallback. */
+    name?: string;
+    /** Size variant. */
+    size?: AvatarSize;
+  }>(),
+  {
+    src: null,
+    name: "",
+    size: "md",
+  },
+);
+
+const sizeMap: Record<AvatarSize, number> = {
+  xs: 24,
+  sm: 32,
+  md: 40,
+  lg: 56,
+  xl: 80,
+};
+
+const fontSizeMap: Record<AvatarSize, string> = {
+  xs: "0.625rem",
+  sm: "0.75rem",
+  md: "0.875rem",
+  lg: "1.25rem",
+  xl: "1.75rem",
+};
+
+const initials = computed(() => {
+  if (!props.name) return "?";
+  const parts = props.name.trim().split(/\s+/);
+  if (parts.length === 1) return parts[0][0].toUpperCase();
+  return (parts[0][0] + parts[parts.length - 1][0]).toUpperCase();
+});
+
+/** Deterministic color from name string. */
+const bgColor = computed(() => {
+  if (!props.name) return "var(--sid-avatar-bg, #9e9e9e)";
+  let hash = 0;
+  for (const ch of props.name) {
+    hash = ch.charCodeAt(0) + ((hash << 5) - hash);
+  }
+  const hue = Math.abs(hash) % 360;
+  return `hsl(${hue}, 45%, 55%)`;
+});
+
+const dimension = computed(() => `${sizeMap[props.size]}px`);
+const fontSize = computed(() => fontSizeMap[props.size]);
+</script>
+
+<template>
+  <span
+    class="sid-avatar"
+    :style="{
+      width: dimension,
+      height: dimension,
+      fontSize: fontSize,
+      backgroundColor: src ? 'transparent' : bgColor,
+    }"
+  >
+    <img
+      v-if="src"
+      :src="src"
+      :alt="name || 'Avatar'"
+      class="sid-avatar__img"
+    />
+    <span v-else class="sid-avatar__initials">{{ initials }}</span>
+  </span>
+</template>
+
+<style scoped>
+.sid-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  border-radius: 50%;
+  overflow: hidden;
+  flex-shrink: 0;
+  user-select: none;
+}
+.sid-avatar__img {
+  width: 100%;
+  height: 100%;
+  object-fit: cover;
+}
+.sid-avatar__initials {
+  color: var(--sid-avatar-text, #fff);
+  font-weight: 500;
+  line-height: 1;
+}
+</style>

package/src/components/SidConfirmDialog.vue

@@ -0,0 +1,125 @@
+<script setup lang="ts">
+/**
+ * Confirmation dialog component (pure Vue 3, no Quasar).
+ *
+ * Renders a modal overlay with confirm/cancel actions.
+ * Consuming apps can style via CSS custom properties or
+ * replace entirely with their own Quasar q-dialog wrapper.
+ */
+const props = withDefaults(
+  defineProps<{
+    modelValue: boolean;
+    title: string;
+    message: string;
+    confirmLabel?: string;
+    cancelLabel?: string;
+    destructive?: boolean;
+  }>(),
+  {
+    confirmLabel: "Confirm",
+    cancelLabel: "Cancel",
+    destructive: false,
+  },
+);
+
+const emit = defineEmits<{
+  "update:modelValue": [value: boolean];
+  confirm: [];
+  cancel: [];
+}>();
+
+function close() {
+  emit("update:modelValue", false);
+  emit("cancel");
+}
+
+function confirm() {
+  emit("update:modelValue", false);
+  emit("confirm");
+}
+</script>
+
+<template>
+  <Teleport to="body">
+    <div v-if="props.modelValue" class="sid-dialog-overlay" @click.self="close">
+      <div class="sid-dialog" role="dialog" aria-modal="true">
+        <h3 class="sid-dialog__title">{{ props.title }}</h3>
+        <p class="sid-dialog__message">{{ props.message }}</p>
+        <div class="sid-dialog__actions">
+          <button
+            class="sid-dialog__btn sid-dialog__btn--cancel"
+            @click="close"
+          >
+            {{ props.cancelLabel }}
+          </button>
+          <button
+            class="sid-dialog__btn"
+            :class="
+              props.destructive
+                ? 'sid-dialog__btn--destructive'
+                : 'sid-dialog__btn--confirm'
+            "
+            @click="confirm"
+          >
+            {{ props.confirmLabel }}
+          </button>
+        </div>
+      </div>
+    </div>
+  </Teleport>
+</template>
+
+<style scoped>
+.sid-dialog-overlay {
+  position: fixed;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: rgba(0, 0, 0, 0.5);
+  z-index: 9999;
+}
+.sid-dialog {
+  background: var(--sid-dialog-bg, #fff);
+  border-radius: 8px;
+  padding: 24px;
+  min-width: 320px;
+  max-width: 480px;
+  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12);
+}
+.sid-dialog__title {
+  margin: 0 0 8px;
+  font-size: 1.125rem;
+  font-weight: 600;
+}
+.sid-dialog__message {
+  margin: 0 0 24px;
+  color: var(--sid-dialog-text, #666);
+  line-height: 1.5;
+}
+.sid-dialog__actions {
+  display: flex;
+  justify-content: flex-end;
+  gap: 8px;
+}
+.sid-dialog__btn {
+  padding: 8px 16px;
+  border: none;
+  border-radius: 4px;
+  font-size: 0.875rem;
+  font-weight: 500;
+  cursor: pointer;
+}
+.sid-dialog__btn--cancel {
+  background: var(--sid-btn-cancel-bg, #f5f5f5);
+  color: var(--sid-btn-cancel-color, #333);
+}
+.sid-dialog__btn--confirm {
+  background: var(--sid-btn-confirm-bg, #1976d2);
+  color: var(--sid-btn-confirm-color, #fff);
+}
+.sid-dialog__btn--destructive {
+  background: var(--sid-btn-destructive-bg, #d32f2f);
+  color: var(--sid-btn-destructive-color, #fff);
+}
+</style>