@authrim/sveltekit 0.1.0

package/dist/ui/forms/CIBARequestCard.svelte.d.ts

@@ -0,0 +1,50 @@
+export interface CIBARequest {
+    auth_req_id: string;
+    client_id: string;
+    client_name: string;
+    client_logo_uri?: string | null;
+    scope: string;
+    binding_message?: string;
+    user_code?: string;
+    created_at: number;
+    expires_at: number;
+}
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const CIBARequestCard: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: any;
+    request: CIBARequest;
+    loading?: boolean | undefined;
+    approveLabel?: string | undefined;
+    denyLabel?: string | undefined;
+    bindingMessageLabel?: string | undefined;
+    verificationCodeLabel?: string | undefined;
+    requestedAccessLabel?: string | undefined;
+    class?: string | undefined;
+}, {
+    approve: CustomEvent<{
+        authReqId: string;
+    }>;
+    deny: CustomEvent<{
+        authReqId: string;
+    }>;
+    expired: CustomEvent<{
+        authReqId: string;
+    }>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type CIBARequestCard = InstanceType<typeof CIBARequestCard>;
+export default CIBARequestCard;
+//# sourceMappingURL=CIBARequestCard.svelte.d.ts.map

package/dist/ui/forms/CIBARequestCard.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CIBARequestCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ui/forms/CIBARequestCard.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,WAAW,WAAW;IAC1B,WAAW,EAAE,MAAM,CAAC;IACpB,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,eAAe,CAAC,EAAE,MAAM,GAAG,IAAI,CAAC;IAChC,KAAK,EAAE,MAAM,CAAC;IACd,eAAe,CAAC,EAAE,MAAM,CAAC;IACzB,SAAS,CAAC,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;IACnB,UAAU,EAAE,MAAM,CAAC;CACpB;AAkHH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,eAAe;;aAd4P,WAAW;;;;;;;;;;mBAClQ,MAAM;;;mBACT,MAAM;;;mBACH,MAAM;;;;kBAW2F,CAAC;AAC1G,KAAK,eAAe,GAAG,YAAY,CAAC,OAAO,eAAe,CAAC,CAAC;AAC9D,eAAe,eAAe,CAAC"}

package/dist/ui/forms/ClientInfo.svelte

@@ -0,0 +1,232 @@
+<!--
+  ClientInfo Component
+  Displays OAuth client logo, name, and policy links
+-->
+<script context="module" lang="ts">
+  export interface ClientInfoData {
+    client_id: string;
+    client_name: string;
+    logo_uri?: string;
+    client_uri?: string;
+    policy_uri?: string;
+    tos_uri?: string;
+    is_trusted?: boolean;
+  }
+</script>
+
+<script lang="ts">
+  export let client: ClientInfoData;
+  export let trustedLabel = "Trusted";
+  export let privacyPolicyLabel = "Privacy Policy";
+  export let termsLabel = "Terms of Service";
+  let className = "";
+  export { className as class };
+</script>
+
+<div class="authrim-client-info {className}" {...$$restProps}>
+  <!-- Logo -->
+  {#if client.logo_uri}
+    <img
+      src={client.logo_uri}
+      alt={client.client_name}
+      class="authrim-client-info__logo"
+    />
+  {:else}
+    <div class="authrim-client-info__logo-placeholder">
+      <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+        <path
+          fill-rule="evenodd"
+          d="M4 16.5v-13h-.25a.75.75 0 010-1.5h12.5a.75.75 0 010 1.5H16v13h.25a.75.75 0 010 1.5h-3.5a.75.75 0 01-.75-.75v-2.5a.75.75 0 00-.75-.75h-2.5a.75.75 0 00-.75.75v2.5a.75.75 0 01-.75.75h-3.5a.75.75 0 010-1.5H4zm3-11a.5.5 0 01.5-.5h1a.5.5 0 01.5.5v1a.5.5 0 01-.5.5h-1a.5.5 0 01-.5-.5v-1zM7.5 9a.5.5 0 00-.5.5v1a.5.5 0 00.5.5h1a.5.5 0 00.5-.5v-1a.5.5 0 00-.5-.5h-1zM11 5.5a.5.5 0 01.5-.5h1a.5.5 0 01.5.5v1a.5.5 0 01-.5.5h-1a.5.5 0 01-.5-.5v-1zm.5 3.5a.5.5 0 00-.5.5v1a.5.5 0 00.5.5h1a.5.5 0 00.5-.5v-1a.5.5 0 00-.5-.5h-1z"
+          clip-rule="evenodd"
+        />
+      </svg>
+    </div>
+  {/if}
+
+  <!-- Name -->
+  <h2 class="authrim-client-info__name">{client.client_name}</h2>
+
+  <!-- Trusted badge -->
+  {#if client.is_trusted}
+    <span class="authrim-client-info__badge">
+      <svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+        <path
+          fill-rule="evenodd"
+          d="M8 15A7 7 0 108 1a7 7 0 000 14zm3.844-8.791a.75.75 0 00-1.188-.918l-3.7 4.79-1.649-1.833a.75.75 0 10-1.114 1.004l2.25 2.5a.75.75 0 001.15-.043l4.25-5.5z"
+          clip-rule="evenodd"
+        />
+      </svg>
+      {trustedLabel}
+    </span>
+  {/if}
+
+  <!-- Client URI -->
+  {#if client.client_uri}
+    <a
+      href={client.client_uri}
+      target="_blank"
+      rel="noopener noreferrer"
+      class="authrim-client-info__uri"
+    >
+      {client.client_uri}
+      <svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+        <path
+          d="M6.22 8.72a.75.75 0 001.06 1.06l5.22-5.22v1.69a.75.75 0 001.5 0v-3.5a.75.75 0 00-.75-.75h-3.5a.75.75 0 000 1.5h1.69L6.22 8.72z"
+        />
+        <path
+          d="M3.5 6.75c0-.69.56-1.25 1.25-1.25H7A.75.75 0 007 4H4.75A2.75 2.75 0 002 6.75v4.5A2.75 2.75 0 004.75 14h4.5A2.75 2.75 0 0012 11.25V9a.75.75 0 00-1.5 0v2.25c0 .69-.56 1.25-1.25 1.25h-4.5c-.69 0-1.25-.56-1.25-1.25v-4.5z"
+        />
+      </svg>
+    </a>
+  {/if}
+
+  <!-- Policy links -->
+  {#if client.policy_uri || client.tos_uri}
+    <div class="authrim-client-info__links">
+      {#if client.policy_uri}
+        <a
+          href={client.policy_uri}
+          target="_blank"
+          rel="noopener noreferrer"
+          class="authrim-client-info__link"
+        >
+          {privacyPolicyLabel}
+          <svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+            <path
+              d="M6.22 8.72a.75.75 0 001.06 1.06l5.22-5.22v1.69a.75.75 0 001.5 0v-3.5a.75.75 0 00-.75-.75h-3.5a.75.75 0 000 1.5h1.69L6.22 8.72z"
+            />
+            <path
+              d="M3.5 6.75c0-.69.56-1.25 1.25-1.25H7A.75.75 0 007 4H4.75A2.75 2.75 0 002 6.75v4.5A2.75 2.75 0 004.75 14h4.5A2.75 2.75 0 0012 11.25V9a.75.75 0 00-1.5 0v2.25c0 .69-.56 1.25-1.25 1.25h-4.5c-.69 0-1.25-.56-1.25-1.25v-4.5z"
+            />
+          </svg>
+        </a>
+      {/if}
+      {#if client.tos_uri}
+        <a
+          href={client.tos_uri}
+          target="_blank"
+          rel="noopener noreferrer"
+          class="authrim-client-info__link"
+        >
+          {termsLabel}
+          <svg viewBox="0 0 16 16" fill="currentColor" aria-hidden="true">
+            <path
+              d="M6.22 8.72a.75.75 0 001.06 1.06l5.22-5.22v1.69a.75.75 0 001.5 0v-3.5a.75.75 0 00-.75-.75h-3.5a.75.75 0 000 1.5h1.69L6.22 8.72z"
+            />
+            <path
+              d="M3.5 6.75c0-.69.56-1.25 1.25-1.25H7A.75.75 0 007 4H4.75A2.75 2.75 0 002 6.75v4.5A2.75 2.75 0 004.75 14h4.5A2.75 2.75 0 0012 11.25V9a.75.75 0 00-1.5 0v2.25c0 .69-.56 1.25-1.25 1.25h-4.5c-.69 0-1.25-.56-1.25-1.25v-4.5z"
+            />
+          </svg>
+        </a>
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<style>
+  .authrim-client-info {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    text-align: center;
+    gap: var(--authrim-space-2);
+  }
+
+  .authrim-client-info__logo {
+    width: 64px;
+    height: 64px;
+    border-radius: var(--authrim-radius-lg);
+    object-fit: cover;
+  }
+
+  .authrim-client-info__logo-placeholder {
+    width: 64px;
+    height: 64px;
+    border-radius: var(--authrim-radius-lg);
+    background: var(--authrim-color-bg-subtle);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--authrim-color-primary);
+  }
+
+  .authrim-client-info__logo-placeholder svg {
+    width: 32px;
+    height: 32px;
+  }
+
+  .authrim-client-info__name {
+    margin: 0;
+    font-family: var(--authrim-font-sans);
+    font-size: var(--authrim-text-2xl);
+    font-weight: 600;
+    color: var(--authrim-color-text);
+    letter-spacing: var(--authrim-tracking-tight);
+  }
+
+  .authrim-client-info__badge {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--authrim-space-1);
+    padding: 2px var(--authrim-space-2);
+    font-family: var(--authrim-font-sans);
+    font-size: var(--authrim-text-xs);
+    font-weight: 500;
+    color: var(--authrim-color-success, #22c55e);
+    background: var(--authrim-color-success-subtle, #f0fdf4);
+    border-radius: var(--authrim-radius-full);
+  }
+
+  .authrim-client-info__badge svg {
+    width: 12px;
+    height: 12px;
+  }
+
+  .authrim-client-info__uri {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--authrim-space-1);
+    font-family: var(--authrim-font-sans);
+    font-size: var(--authrim-text-sm);
+    color: var(--authrim-color-primary);
+    text-decoration: none;
+    transition: color var(--authrim-duration-fast) var(--authrim-ease-default);
+  }
+
+  .authrim-client-info__uri:hover {
+    color: var(--authrim-color-primary-hover);
+    text-decoration: underline;
+  }
+
+  .authrim-client-info__uri svg {
+    width: 12px;
+    height: 12px;
+  }
+
+  .authrim-client-info__links {
+    display: flex;
+    align-items: center;
+    gap: var(--authrim-space-4);
+    margin-top: var(--authrim-space-1);
+  }
+
+  .authrim-client-info__link {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--authrim-space-1);
+    font-family: var(--authrim-font-sans);
+    font-size: var(--authrim-text-xs);
+    color: var(--authrim-color-text-muted);
+    text-decoration: none;
+    transition: color var(--authrim-duration-fast) var(--authrim-ease-default);
+  }
+
+  .authrim-client-info__link:hover {
+    color: var(--authrim-color-primary);
+  }
+
+  .authrim-client-info__link svg {
+    width: 12px;
+    height: 12px;
+  }
+</style>

package/dist/ui/forms/ClientInfo.svelte.d.ts

@@ -0,0 +1,35 @@
+export interface ClientInfoData {
+    client_id: string;
+    client_name: string;
+    logo_uri?: string;
+    client_uri?: string;
+    policy_uri?: string;
+    tos_uri?: string;
+    is_trusted?: boolean;
+}
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ClientInfo: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: any;
+    client: ClientInfoData;
+    trustedLabel?: string | undefined;
+    privacyPolicyLabel?: string | undefined;
+    termsLabel?: string | undefined;
+    class?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ClientInfo = InstanceType<typeof ClientInfo>;
+export default ClientInfo;
+//# sourceMappingURL=ClientInfo.svelte.d.ts.map

package/dist/ui/forms/ClientInfo.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ClientInfo.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ui/forms/ClientInfo.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,WAAW,cAAc;IAC7B,SAAS,EAAE,MAAM,CAAC;IAClB,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,UAAU,CAAC,EAAE,MAAM,CAAC;IACpB,OAAO,CAAC,EAAE,MAAM,CAAC;IACjB,UAAU,CAAC,EAAE,OAAO,CAAC;CACtB;AA+EH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,UAAU;;YAV+I,cAAc;;;;;;;kBAUvD,CAAC;AACrG,KAAK,UAAU,GAAG,YAAY,CAAC,OAAO,UAAU,CAAC,CAAC;AACpD,eAAe,UAAU,CAAC"}

package/dist/ui/forms/ConsentScopesList.svelte

@@ -0,0 +1,109 @@
+<!--
+  ConsentScopesList Component
+  Displays a list of requested OAuth scopes with check icons
+-->
+<script context="module" lang="ts">
+  export interface ScopeItem {
+    name: string;
+    title: string;
+    description: string;
+    required: boolean;
+  }
+</script>
+
+<script lang="ts">
+  export let scopes: ScopeItem[] = [];
+  /** Optional label map: scope name → display label. Falls back to scope.title or scope.name */
+  export let labelMap: Record<string, string> = {};
+  let className = "";
+  export { className as class };
+
+  function getLabel(scope: ScopeItem): string {
+    return labelMap[scope.name] || scope.title || scope.name;
+  }
+</script>
+
+<ul class="authrim-scopes {className}" role="list" {...$$restProps}>
+  {#each scopes as scope (scope.name)}
+    <li class="authrim-scopes__item">
+      <svg
+        class="authrim-scopes__icon"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+        aria-hidden="true"
+      >
+        <path
+          fill-rule="evenodd"
+          d="M10 18a8 8 0 100-16 8 8 0 000 16zm3.857-9.809a.75.75 0 00-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 10-1.06 1.061l2.5 2.5a.75.75 0 001.137-.089l4-5.5z"
+          clip-rule="evenodd"
+        />
+      </svg>
+      <div class="authrim-scopes__content">
+        <span class="authrim-scopes__label">{getLabel(scope)}</span>
+        {#if scope.description}
+          <span class="authrim-scopes__desc">{scope.description}</span>
+        {/if}
+      </div>
+      {#if scope.required}
+        <span class="authrim-scopes__required">Required</span>
+      {/if}
+    </li>
+  {/each}
+</ul>
+
+<style>
+  .authrim-scopes {
+    list-style: none;
+    margin: 0;
+    padding: 0;
+    display: flex;
+    flex-direction: column;
+    gap: var(--authrim-space-3);
+  }
+
+  .authrim-scopes__item {
+    display: flex;
+    align-items: flex-start;
+    gap: var(--authrim-space-3);
+  }
+
+  .authrim-scopes__icon {
+    flex-shrink: 0;
+    width: 20px;
+    height: 20px;
+    margin-top: 1px;
+    color: var(--authrim-color-success, #22c55e);
+  }
+
+  .authrim-scopes__content {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .authrim-scopes__label {
+    display: block;
+    font-family: var(--authrim-font-sans);
+    font-size: var(--authrim-text-sm);
+    color: var(--authrim-color-text);
+    line-height: var(--authrim-leading-snug);
+  }
+
+  .authrim-scopes__desc {
+    display: block;
+    font-family: var(--authrim-font-sans);
+    font-size: var(--authrim-text-xs);
+    color: var(--authrim-color-text-muted);
+    margin-top: var(--authrim-space-1);
+  }
+
+  .authrim-scopes__required {
+    flex-shrink: 0;
+    font-family: var(--authrim-font-sans);
+    font-size: var(--authrim-text-xs);
+    font-weight: 500;
+    color: var(--authrim-color-text-muted);
+    padding: 1px var(--authrim-space-2);
+    border: 1px solid var(--authrim-color-border);
+    border-radius: var(--authrim-radius-full);
+  }
+</style>

package/dist/ui/forms/ConsentScopesList.svelte.d.ts

@@ -0,0 +1,30 @@
+export interface ScopeItem {
+    name: string;
+    title: string;
+    description: string;
+    required: boolean;
+}
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ConsentScopesList: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: any;
+    scopes?: ScopeItem[] | undefined;
+    labelMap?: Record<string, string> | undefined;
+    class?: string | undefined;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ConsentScopesList = InstanceType<typeof ConsentScopesList>;
+export default ConsentScopesList;
+//# sourceMappingURL=ConsentScopesList.svelte.d.ts.map

package/dist/ui/forms/ConsentScopesList.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ConsentScopesList.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ui/forms/ConsentScopesList.svelte.ts"],"names":[],"mappings":"AAGE,MAAM,WAAW,SAAS;IACxB,IAAI,EAAE,MAAM,CAAC;IACb,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,OAAO,CAAC;CACnB;AAyCH,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,KAAK,GAAG;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IAC9G,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,iBAAiB;;aAX+D,SAAS,EAAE;eACQ,MAAM,CAAC,MAAM,EAAE,MAAM,CAAC;;;;kBAUF,CAAC;AAC5G,KAAK,iBAAiB,GAAG,YAAY,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAClE,eAAe,iBAAiB,CAAC"}

package/dist/ui/forms/EmailCodeForm.svelte

@@ -0,0 +1,224 @@
+<!--
+  EmailCodeForm Component
+  Two-step email + code verification form
+-->
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+  import type { EmailCodeStep } from '../types.js';
+  import Button from '../shared/Button.svelte';
+  import Input from '../shared/Input.svelte';
+  import AuthError from '../helpers/AuthError.svelte';
+  import OTPInput from '../helpers/OTPInput.svelte';
+  import ResendCodeButton from '../helpers/ResendCodeButton.svelte';
+
+  export let step: EmailCodeStep = 'email';
+  export let email = '';
+  export let maskedEmail = '';
+  export let loading = false;
+  export let error = '';
+  export let resendRemainingTime = 0;
+  let className = '';
+  export { className as class };
+
+  const dispatch = createEventDispatcher<{
+    'submit-email': { email: string };
+    'submit-code': { code: string };
+    'dismiss-error': void;
+    back: void;
+    resend: void;
+  }>();
+
+  let code = '';
+  let emailInput = '';
+
+  $: emailInput = email;
+
+  function handleEmailSubmit() {
+    if (emailInput.trim() && !loading) {
+      dispatch('submit-email', { email: emailInput.trim() });
+    }
+  }
+
+  function handleCodeComplete(e: CustomEvent<{ value: string }>) {
+    code = e.detail.value;
+    if (!loading) {
+      dispatch('submit-code', { code });
+    }
+  }
+
+  function handleBack() {
+    code = '';
+    dispatch('back');
+  }
+</script>
+
+<div class="authrim-email-form {className}" {...$$restProps}>
+  {#if step === 'email'}
+    <form on:submit|preventDefault={handleEmailSubmit} class="authrim-email-form__form">
+      <div class="authrim-email-form__header">
+        <h2 class="authrim-email-form__title">Sign in with email</h2>
+        <p class="authrim-email-form__desc">
+          Enter your email and we'll send you a verification code
+        </p>
+      </div>
+
+      {#if error}
+        <AuthError message={error} on:dismiss={() => dispatch('dismiss-error')} />
+      {/if}
+
+      <Input
+        type="email"
+        label="Email address"
+        placeholder="you@example.com"
+        bind:value={emailInput}
+        disabled={loading}
+        required
+        fullWidth
+        size="lg"
+        error={!!error}
+      />
+
+      <Button type="submit" {loading} fullWidth size="lg">
+        Continue
+      </Button>
+    </form>
+  {:else}
+    <div class="authrim-email-form__code">
+      <button
+        type="button"
+        class="authrim-email-form__back"
+        on:click={handleBack}
+        disabled={loading}
+      >
+        <svg viewBox="0 0 20 20" fill="currentColor" class="authrim-email-form__back-icon">
+          <path fill-rule="evenodd" d="M17 10a.75.75 0 01-.75.75H5.612l4.158 3.96a.75.75 0 11-1.04 1.08l-5.5-5.25a.75.75 0 010-1.08l5.5-5.25a.75.75 0 111.04 1.08L5.612 9.25H16.25A.75.75 0 0117 10z" clip-rule="evenodd"/>
+        </svg>
+        Back
+      </button>
+
+      <div class="authrim-email-form__header">
+        <h2 class="authrim-email-form__title">Check your email</h2>
+        <p class="authrim-email-form__desc">
+          We sent a code to <strong>{maskedEmail || email}</strong>
+        </p>
+      </div>
+
+      {#if error}
+        <AuthError message={error} on:dismiss={() => dispatch('dismiss-error')} />
+      {/if}
+
+      <div class="authrim-email-form__otp-wrap">
+        <OTPInput
+          bind:value={code}
+          disabled={loading}
+          error={!!error}
+          on:complete={handleCodeComplete}
+        />
+      </div>
+
+      <div class="authrim-email-form__resend">
+        <span class="authrim-email-form__resend-text">Didn't receive the code?</span>
+        <ResendCodeButton
+          remainingTime={resendRemainingTime}
+          {loading}
+          on:click={() => dispatch('resend')}
+        />
+      </div>
+
+      <Button
+        type="button"
+        {loading}
+        fullWidth
+        size="lg"
+        disabled={code.length < 6}
+        on:click={() => dispatch('submit-code', { code })}
+      >
+        Verify
+      </Button>
+    </div>
+  {/if}
+</div>
+
+<style>
+  .authrim-email-form__form,
+  .authrim-email-form__code {
+    display: flex;
+    flex-direction: column;
+    gap: var(--authrim-space-5);
+  }
+
+  .authrim-email-form__header {
+    text-align: center;
+  }
+
+  .authrim-email-form__title {
+    margin: 0 0 var(--authrim-space-2);
+    font-size: var(--authrim-text-xl);
+    font-weight: 700;
+    color: var(--authrim-color-text);
+    letter-spacing: var(--authrim-tracking-tight);
+  }
+
+  .authrim-email-form__desc {
+    margin: 0;
+    font-size: var(--authrim-text-sm);
+    color: var(--authrim-color-text-secondary);
+    line-height: var(--authrim-leading-relaxed);
+  }
+
+  .authrim-email-form__desc strong {
+    color: var(--authrim-color-text);
+    font-weight: 600;
+  }
+
+  .authrim-email-form__back {
+    display: inline-flex;
+    align-items: center;
+    gap: var(--authrim-space-1);
+    padding: var(--authrim-space-1) var(--authrim-space-2);
+    margin: 0 0 var(--authrim-space-2) calc(-1 * var(--authrim-space-2));
+    font-family: var(--authrim-font-sans);
+    font-size: var(--authrim-text-sm);
+    font-weight: 500;
+    color: var(--authrim-color-text-secondary);
+    background: transparent;
+    border: none;
+    border-radius: var(--authrim-radius-sm);
+    cursor: pointer;
+    transition:
+      color var(--authrim-duration-fast) var(--authrim-ease-default),
+      background-color var(--authrim-duration-fast) var(--authrim-ease-default);
+  }
+
+  .authrim-email-form__back:hover:not(:disabled) {
+    color: var(--authrim-color-text);
+    background: var(--authrim-color-bg-subtle);
+  }
+
+  .authrim-email-form__back:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .authrim-email-form__back-icon {
+    width: 18px;
+    height: 18px;
+  }
+
+  .authrim-email-form__otp-wrap {
+    padding: var(--authrim-space-4) 0;
+  }
+
+  .authrim-email-form__resend {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: var(--authrim-space-1);
+    flex-wrap: wrap;
+  }
+
+  .authrim-email-form__resend-text {
+    font-size: var(--authrim-text-sm);
+    color: var(--authrim-color-text-muted);
+  }
+</style>