@authrim/sveltekit 0.1.0

package/dist/ui/account/LinkedAccountsList.svelte.d.ts

@@ -0,0 +1,32 @@
+import type { LinkedAccountDisplay } from '../types.js';
+import type { SocialProvider } from '../../types.js';
+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 LinkedAccountsList: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: any;
+    accounts?: LinkedAccountDisplay[] | undefined;
+    loading?: boolean | undefined;
+    unlinkingId?: string | undefined | undefined;
+    class?: string | undefined;
+}, {
+    unlink: CustomEvent<{
+        accountId: string;
+        provider: SocialProvider;
+    }>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type LinkedAccountsList = InstanceType<typeof LinkedAccountsList>;
+export default LinkedAccountsList;
+//# sourceMappingURL=LinkedAccountsList.svelte.d.ts.map

package/dist/ui/account/LinkedAccountsList.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LinkedAccountsList.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ui/account/LinkedAccountsList.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,oBAAoB,EAAE,MAAM,aAAa,CAAC;AACxD,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAkHrD,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,kBAAkB;;eAZ6F,oBAAoB,EAAE;;kBAA0C,MAAM,GAAG,SAAS;;;;mBAC9K,MAAM;kBAAY,cAAc;;;;kBAWqE,CAAC;AAC7G,KAAK,kBAAkB,GAAG,YAAY,CAAC,OAAO,kBAAkB,CAAC,CAAC;AACpE,eAAe,kBAAkB,CAAC"}

package/dist/ui/account/UnlinkAccountButton.svelte

@@ -0,0 +1,179 @@
+<!--
+  UnlinkAccountButton Component
+  Button to unlink a social account with confirmation
+-->
+<script lang="ts">
+  import { createEventDispatcher } from 'svelte';
+  import type { SocialProvider } from '../../types.js';
+  import Spinner from '../shared/Spinner.svelte';
+
+  export let accountId: string;
+  export let provider: SocialProvider;
+  export let loading = false;
+  let className = '';
+  export { className as class };
+
+  const dispatch = createEventDispatcher<{
+    click: void;
+    confirm: void;
+  }>();
+
+  let showConfirm = false;
+
+  function handleClick() {
+    if (loading) return;
+    dispatch('click');
+    showConfirm = true;
+  }
+
+  function handleConfirm() {
+    if (loading) return;
+    dispatch('confirm');
+  }
+
+  function handleCancel() {
+    showConfirm = false;
+  }
+</script>
+
+<div class="authrim-unlink {className}" data-account-id={accountId} data-provider={provider}>
+  {#if showConfirm}
+    <div class="authrim-unlink__confirm">
+      <span class="authrim-unlink__confirm-text">Unlink?</span>
+      <button
+        type="button"
+        class="authrim-unlink__action authrim-unlink__action--confirm"
+        disabled={loading}
+        on:click={handleConfirm}
+      >
+        {#if loading}
+          <Spinner size="sm" />
+        {:else}
+          Yes
+        {/if}
+      </button>
+      <button
+        type="button"
+        class="authrim-unlink__action authrim-unlink__action--cancel"
+        disabled={loading}
+        on:click={handleCancel}
+      >
+        No
+      </button>
+    </div>
+  {:else}
+    <button
+      type="button"
+      class="authrim-unlink__btn"
+      disabled={loading}
+      on:click={handleClick}
+      aria-label="Unlink account"
+    >
+      <svg viewBox="0 0 20 20" fill="currentColor">
+        <path d="M11.983 1.907a.75.75 0 00-1.292-.657l-8.5 9.5A.75.75 0 002.75 12h6.572l-1.305 6.093a.75.75 0 001.292.657l8.5-9.5A.75.75 0 0017.25 8h-6.572l1.305-6.093z"/>
+      </svg>
+    </button>
+  {/if}
+</div>
+
+<style>
+  .authrim-unlink {
+    flex-shrink: 0;
+  }
+
+  .authrim-unlink__btn {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 36px;
+    height: 36px;
+    padding: 0;
+    background: transparent;
+    border: none;
+    border-radius: var(--authrim-radius-sm);
+    color: var(--authrim-color-text-muted);
+    cursor: pointer;
+    transition:
+      color var(--authrim-duration-fast) var(--authrim-ease-default),
+      background-color var(--authrim-duration-fast) var(--authrim-ease-default);
+  }
+
+  .authrim-unlink__btn:hover:not(:disabled) {
+    color: var(--authrim-color-warning-text);
+    background: var(--authrim-color-warning-subtle);
+  }
+
+  .authrim-unlink__btn:focus-visible {
+    outline: none;
+    box-shadow: 0 0 0 3px var(--authrim-color-warning-subtle);
+  }
+
+  .authrim-unlink__btn:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .authrim-unlink__btn svg {
+    width: 18px;
+    height: 18px;
+  }
+
+  .authrim-unlink__confirm {
+    display: flex;
+    align-items: center;
+    gap: var(--authrim-space-2);
+    animation: fade-in var(--authrim-duration-fast) var(--authrim-ease-out);
+  }
+
+  @keyframes fade-in {
+    from { opacity: 0; }
+    to { opacity: 1; }
+  }
+
+  .authrim-unlink__confirm-text {
+    font-size: var(--authrim-text-xs);
+    font-weight: 500;
+    color: var(--authrim-color-text-secondary);
+  }
+
+  .authrim-unlink__action {
+    padding: var(--authrim-space-1) var(--authrim-space-2);
+    font-family: var(--authrim-font-sans);
+    font-size: var(--authrim-text-xs);
+    font-weight: 500;
+    border: none;
+    border-radius: var(--authrim-radius-sm);
+    cursor: pointer;
+    transition:
+      background-color var(--authrim-duration-fast) var(--authrim-ease-default),
+      transform var(--authrim-duration-fast) var(--authrim-ease-default);
+  }
+
+  .authrim-unlink__action:active:not(:disabled) {
+    transform: scale(0.95);
+  }
+
+  .authrim-unlink__action:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .authrim-unlink__action--confirm {
+    background: var(--authrim-color-warning);
+    color: white;
+    min-width: 40px;
+  }
+
+  .authrim-unlink__action--confirm:hover:not(:disabled) {
+    background: var(--authrim-color-warning-hover);
+  }
+
+  .authrim-unlink__action--cancel {
+    background: var(--authrim-color-bg-subtle);
+    color: var(--authrim-color-text-secondary);
+  }
+
+  .authrim-unlink__action--cancel:hover:not(:disabled) {
+    background: var(--authrim-color-bg-muted);
+  }
+</style>

package/dist/ui/account/UnlinkAccountButton.svelte.d.ts

@@ -0,0 +1,28 @@
+import type { SocialProvider } from '../../types.js';
+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 UnlinkAccountButton: $$__sveltets_2_IsomorphicComponent<{
+    accountId: string;
+    provider: SocialProvider;
+    loading?: boolean;
+    class?: string;
+}, {
+    click: CustomEvent<void>;
+    confirm: CustomEvent<void>;
+} & {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type UnlinkAccountButton = InstanceType<typeof UnlinkAccountButton>;
+export default UnlinkAccountButton;
+//# sourceMappingURL=UnlinkAccountButton.svelte.d.ts.map

package/dist/ui/account/UnlinkAccountButton.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"UnlinkAccountButton.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ui/account/UnlinkAccountButton.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,gBAAgB,CAAC;AAmErD,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,mBAAmB;eAbwF,MAAM;cAAY,cAAc;;;;;;;;kBAazC,CAAC;AACvF,KAAK,mBAAmB,GAAG,YAAY,CAAC,OAAO,mBAAmB,CAAC,CAAC;AACtE,eAAe,mBAAmB,CAAC"}

package/dist/ui/account/index.d.ts

@@ -0,0 +1,7 @@
+/**
+ * Authrim UI Account Components
+ */
+export { default as LinkedAccountsList } from './LinkedAccountsList.svelte';
+export { default as LinkAccountButton } from './LinkAccountButton.svelte';
+export { default as UnlinkAccountButton } from './UnlinkAccountButton.svelte';
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/account/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/ui/account/index.ts"],"names":[],"mappings":"AAAA;;GAEG;AAEH,OAAO,EAAE,OAAO,IAAI,kBAAkB,EAAE,MAAM,6BAA6B,CAAC;AAC5E,OAAO,EAAE,OAAO,IAAI,iBAAiB,EAAE,MAAM,4BAA4B,CAAC;AAC1E,OAAO,EAAE,OAAO,IAAI,mBAAmB,EAAE,MAAM,8BAA8B,CAAC"}

package/dist/ui/account/index.js

@@ -0,0 +1,6 @@
+/**
+ * Authrim UI Account Components
+ */
+export { default as LinkedAccountsList } from './LinkedAccountsList.svelte';
+export { default as LinkAccountButton } from './LinkAccountButton.svelte';
+export { default as UnlinkAccountButton } from './UnlinkAccountButton.svelte';

package/dist/ui/context.d.ts

@@ -0,0 +1,17 @@
+/**
+ * Authrim UI Theme Context
+ */
+import { type Writable } from 'svelte/store';
+export type Theme = 'light' | 'dark' | 'system';
+export interface ThemeContext {
+    theme: Writable<Theme>;
+    resolvedTheme: Writable<'light' | 'dark'>;
+    setTheme: (theme: Theme) => void;
+    destroy: () => void;
+}
+export declare const THEME_CONTEXT_KEY: unique symbol;
+export declare function createThemeContext(initialTheme?: Theme): ThemeContext;
+export declare function getThemeContext(): ThemeContext;
+export declare function hasThemeContext(): boolean;
+export declare function loadSavedTheme(): Theme;
+//# sourceMappingURL=context.d.ts.map

package/dist/ui/context.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"context.d.ts","sourceRoot":"","sources":["../../src/lib/ui/context.ts"],"names":[],"mappings":"AAAA;;GAEG;AAGH,OAAO,EAAiB,KAAK,QAAQ,EAAE,MAAM,cAAc,CAAC;AAE5D,MAAM,MAAM,KAAK,GAAG,OAAO,GAAG,MAAM,GAAG,QAAQ,CAAC;AAEhD,MAAM,WAAW,YAAY;IAC3B,KAAK,EAAE,QAAQ,CAAC,KAAK,CAAC,CAAC;IACvB,aAAa,EAAE,QAAQ,CAAC,OAAO,GAAG,MAAM,CAAC,CAAC;IAC1C,QAAQ,EAAE,CAAC,KAAK,EAAE,KAAK,KAAK,IAAI,CAAC;IACjC,OAAO,EAAE,MAAM,IAAI,CAAC;CACrB;AAED,eAAO,MAAM,iBAAiB,eAA0B,CAAC;AAOzD,wBAAgB,kBAAkB,CAAC,YAAY,GAAE,KAAgB,GAAG,YAAY,CA4C/E;AAED,wBAAgB,eAAe,IAAI,YAAY,CAM9C;AAED,wBAAgB,eAAe,IAAI,OAAO,CAMzC;AAED,wBAAgB,cAAc,IAAI,KAAK,CAKtC"}

package/dist/ui/context.js

@@ -0,0 +1,71 @@
+/**
+ * Authrim UI Theme Context
+ */
+import { setContext, getContext } from 'svelte';
+import { writable, get } from 'svelte/store';
+export const THEME_CONTEXT_KEY = Symbol('authrim-theme');
+function getSystemTheme() {
+    if (typeof window === 'undefined')
+        return 'light';
+    return window.matchMedia('(prefers-color-scheme: dark)').matches ? 'dark' : 'light';
+}
+export function createThemeContext(initialTheme = 'system') {
+    const theme = writable(initialTheme);
+    const resolvedTheme = writable(initialTheme === 'system' ? getSystemTheme() : initialTheme);
+    let mediaQuery = null;
+    let handleChange = null;
+    function updateResolved(t) {
+        resolvedTheme.set(t === 'system' ? getSystemTheme() : t);
+    }
+    function setTheme(newTheme) {
+        theme.set(newTheme);
+        updateResolved(newTheme);
+        if (typeof window !== 'undefined') {
+            localStorage.setItem('authrim-theme', newTheme);
+        }
+    }
+    function destroy() {
+        if (mediaQuery && handleChange) {
+            mediaQuery.removeEventListener('change', handleChange);
+            mediaQuery = null;
+            handleChange = null;
+        }
+    }
+    // Listen for system preference changes
+    if (typeof window !== 'undefined') {
+        mediaQuery = window.matchMedia('(prefers-color-scheme: dark)');
+        handleChange = () => {
+            const current = get(theme);
+            if (current === 'system') {
+                resolvedTheme.set(getSystemTheme());
+            }
+        };
+        mediaQuery.addEventListener('change', handleChange);
+    }
+    const ctx = { theme, resolvedTheme, setTheme, destroy };
+    setContext(THEME_CONTEXT_KEY, ctx);
+    return ctx;
+}
+export function getThemeContext() {
+    const ctx = getContext(THEME_CONTEXT_KEY);
+    if (!ctx) {
+        throw new Error('Theme context not found. Wrap your app with a theme provider.');
+    }
+    return ctx;
+}
+export function hasThemeContext() {
+    try {
+        return !!getContext(THEME_CONTEXT_KEY);
+    }
+    catch {
+        return false;
+    }
+}
+export function loadSavedTheme() {
+    if (typeof window === 'undefined')
+        return 'system';
+    const saved = localStorage.getItem('authrim-theme');
+    if (saved === 'light' || saved === 'dark' || saved === 'system')
+        return saved;
+    return 'system';
+}

package/dist/ui/forms/CIBARequestCard.svelte

@@ -0,0 +1,315 @@
+<!--
+  CIBARequestCard Component
+  Displays a single CIBA authentication request with client info,
+  binding message, scopes, and approve/deny actions
+-->
+<script context="module" lang="ts">
+  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;
+  }
+</script>
+
+<script lang="ts">
+  import { createEventDispatcher } from "svelte";
+  import Button from "../shared/Button.svelte";
+  import CountdownTimer from "../shared/CountdownTimer.svelte";
+
+  export let request: CIBARequest;
+  export let loading = false;
+  export let approveLabel = "Approve";
+  export let denyLabel = "Deny";
+  export let bindingMessageLabel = "Binding Message";
+  export let verificationCodeLabel = "Verification Code";
+  export let requestedAccessLabel = "Requested Access";
+  let className = "";
+  export { className as class };
+
+  const dispatch = createEventDispatcher<{
+    approve: { authReqId: string };
+    deny: { authReqId: string };
+    expired: { authReqId: string };
+  }>();
+
+  $: scopes = request.scope.split(" ").filter(Boolean);
+</script>
+
+<div class="authrim-ciba-card {className}" {...$$restProps}>
+  <!-- Client header -->
+  <div class="authrim-ciba-card__header">
+    {#if request.client_logo_uri}
+      <img
+        src={request.client_logo_uri}
+        alt={request.client_name}
+        class="authrim-ciba-card__logo"
+      />
+    {:else}
+      <div class="authrim-ciba-card__logo-placeholder">
+        <svg viewBox="0 0 20 20" fill="currentColor" aria-hidden="true">
+          <path
+            d="M8 16.25a.75.75 0 01.75-.75h2.5a.75.75 0 010 1.5h-2.5a.75.75 0 01-.75-.75zM3 4.5A2.5 2.5 0 015.5 2h9A2.5 2.5 0 0117 4.5v7a2.5 2.5 0 01-2.5 2.5h-9A2.5 2.5 0 013 11.5v-7z"
+          />
+        </svg>
+      </div>
+    {/if}
+
+    <div class="authrim-ciba-card__client">
+      <h3 class="authrim-ciba-card__name">{request.client_name}</h3>
+      <p class="authrim-ciba-card__subtitle">Authentication Request</p>
+    </div>
+
+    <div class="authrim-ciba-card__timer">
+      <CountdownTimer
+        expiresAt={request.expires_at}
+        size="sm"
+        on:expired={() =>
+          dispatch("expired", { authReqId: request.auth_req_id })}
+      />
+    </div>
+  </div>
+
+  <!-- Binding message -->
+  {#if request.binding_message}
+    <div class="authrim-ciba-card__binding">
+      <svg
+        class="authrim-ciba-card__binding-icon"
+        viewBox="0 0 20 20"
+        fill="currentColor"
+      >
+        <path
+          fill-rule="evenodd"
+          d="M18 10a8 8 0 11-16 0 8 8 0 0116 0zm-7-4a1 1 0 11-2 0 1 1 0 012 0zM9 9a.75.75 0 000 1.5h.253a.25.25 0 01.244.304l-.459 2.066A1.75 1.75 0 0010.747 15H11a.75.75 0 000-1.5h-.253a.25.25 0 01-.244-.304l.459-2.066A1.75 1.75 0 009.253 9H9z"
+          clip-rule="evenodd"
+        />
+      </svg>
+      <div>
+        <p class="authrim-ciba-card__binding-label">{bindingMessageLabel}</p>
+        <p class="authrim-ciba-card__binding-text">{request.binding_message}</p>
+      </div>
+    </div>
+  {/if}
+
+  <!-- User code -->
+  {#if request.user_code}
+    <div class="authrim-ciba-card__code">
+      <p class="authrim-ciba-card__code-label">{verificationCodeLabel}</p>
+      <p class="authrim-ciba-card__code-value">{request.user_code}</p>
+    </div>
+  {/if}
+
+  <!-- Scopes -->
+  <div class="authrim-ciba-card__scopes">
+    <p class="authrim-ciba-card__scopes-label">{requestedAccessLabel}</p>
+    <div class="authrim-ciba-card__scopes-list">
+      {#each scopes as scope (scope)}
+        <span class="authrim-ciba-card__scope-badge">{scope}</span>
+      {/each}
+    </div>
+  </div>
+
+  <!-- Actions -->
+  <div class="authrim-ciba-card__actions">
+    <Button
+      variant="primary"
+      fullWidth
+      {loading}
+      on:click={() => dispatch("approve", { authReqId: request.auth_req_id })}
+    >
+      <svg
+        viewBox="0 0 16 16"
+        fill="currentColor"
+        style="width: 16px; height: 16px;"
+        aria-hidden="true"
+      >
+        <path
+          fill-rule="evenodd"
+          d="M12.416 3.376a.75.75 0 01.208 1.04l-5 7.5a.75.75 0 01-1.154.114l-3-3a.75.75 0 011.06-1.06l2.353 2.353 4.493-6.74a.75.75 0 011.04-.207z"
+          clip-rule="evenodd"
+        />
+      </svg>
+      {approveLabel}
+    </Button>
+    <Button
+      variant="secondary"
+      fullWidth
+      disabled={loading}
+      on:click={() => dispatch("deny", { authReqId: request.auth_req_id })}
+    >
+      <svg
+        viewBox="0 0 16 16"
+        fill="currentColor"
+        style="width: 16px; height: 16px;"
+        aria-hidden="true"
+      >
+        <path
+          d="M5.28 4.22a.75.75 0 00-1.06 1.06L6.94 8l-2.72 2.72a.75.75 0 101.06 1.06L8 9.06l2.72 2.72a.75.75 0 101.06-1.06L9.06 8l2.72-2.72a.75.75 0 00-1.06-1.06L8 6.94 5.28 4.22z"
+        />
+      </svg>
+      {denyLabel}
+    </Button>
+  </div>
+</div>
+
+<style>
+  .authrim-ciba-card {
+    display: flex;
+    flex-direction: column;
+    gap: var(--authrim-space-4);
+    padding: var(--authrim-space-5);
+    background: var(--authrim-color-bg);
+    border: 1.5px solid var(--authrim-color-border);
+    border-radius: var(--authrim-radius-lg);
+    box-shadow: var(--authrim-shadow-sm);
+  }
+
+  .authrim-ciba-card__header {
+    display: flex;
+    align-items: center;
+    gap: var(--authrim-space-3);
+  }
+
+  .authrim-ciba-card__logo {
+    width: 48px;
+    height: 48px;
+    border-radius: var(--authrim-radius-md);
+    object-fit: cover;
+  }
+
+  .authrim-ciba-card__logo-placeholder {
+    width: 48px;
+    height: 48px;
+    border-radius: var(--authrim-radius-md);
+    background: var(--authrim-color-bg-subtle);
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    color: var(--authrim-color-primary);
+  }
+
+  .authrim-ciba-card__logo-placeholder svg {
+    width: 24px;
+    height: 24px;
+  }
+
+  .authrim-ciba-card__client {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .authrim-ciba-card__name {
+    margin: 0;
+    font-family: var(--authrim-font-sans);
+    font-size: var(--authrim-text-lg);
+    font-weight: 600;
+    color: var(--authrim-color-text);
+  }
+
+  .authrim-ciba-card__subtitle {
+    margin: 0;
+    font-family: var(--authrim-font-sans);
+    font-size: var(--authrim-text-sm);
+    color: var(--authrim-color-text-muted);
+  }
+
+  .authrim-ciba-card__timer {
+    flex-shrink: 0;
+    text-align: right;
+  }
+
+  .authrim-ciba-card__binding {
+    display: flex;
+    gap: var(--authrim-space-3);
+    padding: var(--authrim-space-4);
+    background: var(--authrim-color-info-subtle, #eff6ff);
+    border: 1px solid var(--authrim-color-info, #3b82f6);
+    border-radius: var(--authrim-radius-md);
+  }
+
+  .authrim-ciba-card__binding-icon {
+    flex-shrink: 0;
+    width: 20px;
+    height: 20px;
+    color: var(--authrim-color-info, #3b82f6);
+    margin-top: 1px;
+  }
+
+  .authrim-ciba-card__binding-label {
+    margin: 0;
+    font-family: var(--authrim-font-sans);
+    font-size: var(--authrim-text-sm);
+    font-weight: 500;
+    color: var(--authrim-color-info-text, #1e40af);
+  }
+
+  .authrim-ciba-card__binding-text {
+    margin: var(--authrim-space-1) 0 0;
+    font-family: var(--authrim-font-sans);
+    font-size: var(--authrim-text-sm);
+    color: var(--authrim-color-info-text, #1e40af);
+  }
+
+  .authrim-ciba-card__code {
+    display: flex;
+    flex-direction: column;
+    gap: var(--authrim-space-1);
+  }
+
+  .authrim-ciba-card__code-label {
+    margin: 0;
+    font-family: var(--authrim-font-sans);
+    font-size: var(--authrim-text-sm);
+    font-weight: 500;
+    color: var(--authrim-color-text-secondary);
+  }
+
+  .authrim-ciba-card__code-value {
+    margin: 0;
+    font-family: var(--authrim-font-mono, monospace);
+    font-size: var(--authrim-text-2xl);
+    font-weight: 700;
+    color: var(--authrim-color-text);
+    letter-spacing: 0.1em;
+  }
+
+  .authrim-ciba-card__scopes {
+    display: flex;
+    flex-direction: column;
+    gap: var(--authrim-space-2);
+  }
+
+  .authrim-ciba-card__scopes-label {
+    margin: 0;
+    font-family: var(--authrim-font-sans);
+    font-size: var(--authrim-text-sm);
+    font-weight: 500;
+    color: var(--authrim-color-text-secondary);
+  }
+
+  .authrim-ciba-card__scopes-list {
+    display: flex;
+    flex-wrap: wrap;
+    gap: var(--authrim-space-2);
+  }
+
+  .authrim-ciba-card__scope-badge {
+    font-family: var(--authrim-font-sans);
+    font-size: var(--authrim-text-xs);
+    font-weight: 500;
+    color: var(--authrim-color-text-secondary);
+    background: var(--authrim-color-bg-muted);
+    padding: 2px var(--authrim-space-3);
+    border-radius: var(--authrim-radius-full);
+  }
+
+  .authrim-ciba-card__actions {
+    display: flex;
+    gap: var(--authrim-space-3);
+  }
+</style>