@svadmin/ui 0.68.1 → 0.69.0

package/dist/components/AboutSettings.svelte

@@ -12,8 +12,8 @@
   const version = '__SVADMIN_VERSION__';
 </script>
 
-<div class="space-y-6">
-  <div><h2 class="text-xl font-semibold text-foreground">{i18n.t('settings.about')}</h2></div>
+<div class="svadmin-u-b3542e058833">
+  <div><h2 class="svadmin-u-d5c9b0001e7e svadmin-u-e83a7042bc91 svadmin-u-d4108abe6359">{i18n.t('settings.about')}</h2></div>
   <SettingsGroup title="svadmin" description={i18n.t('settings.currentEnvironment')} bodyClass="space-y-6">
     <DescriptionList columns={2} items={[
       { label: i18n.t('settings.version'), value: version },
@@ -21,13 +21,13 @@
       { label: i18n.t('settings.themeMode'), value: getResolvedTheme() },
       { label: i18n.t('settings.colorAccent'), value: getColorTheme() },
     ]} />
-    <div class="border-t border-border pt-5">
-      <h3 class="text-sm font-medium text-foreground">{i18n.t('settings.registeredResources')}</h3>
-      <div class="mt-3 flex flex-wrap gap-2">{#each resources as resource (resource.name)}<Badge variant="outline" class="font-mono text-xs">{resource.name}</Badge>{:else}<span class="text-sm text-muted-foreground">—</span>{/each}</div>
+    <div class="svadmin-u-b950dda299d3 svadmin-u-18049387f0af svadmin-u-52be28846b5f">
+      <h3 class="svadmin-u-fc7473ca09eb svadmin-u-2689f3958069 svadmin-u-d4108abe6359">{i18n.t('settings.registeredResources')}</h3>
+      <div class="svadmin-u-eccd13ef4f2f svadmin-u-60fbb7713999 svadmin-u-1eb5c6df38c1 svadmin-u-77a2a20e90d4">{#each resources as resource (resource.name)}<Badge variant="outline" class="svadmin-u-0e65706bcccd svadmin-u-359090c2d529">{resource.name}</Badge>{:else}<span class="svadmin-u-fc7473ca09eb svadmin-u-bfa603190748">—</span>{/each}</div>
     </div>
-    <div class="border-t border-border pt-5">
-      <h3 class="text-sm font-medium text-foreground">{i18n.t('settings.dataProvider')}</h3>
-      <div class="mt-3 flex flex-wrap gap-2">{#each providerNames as name (name)}<Badge variant="outline" class="font-mono text-xs">{name}</Badge>{:else}<span class="text-sm text-muted-foreground">—</span>{/each}</div>
+    <div class="svadmin-u-b950dda299d3 svadmin-u-18049387f0af svadmin-u-52be28846b5f">
+      <h3 class="svadmin-u-fc7473ca09eb svadmin-u-2689f3958069 svadmin-u-d4108abe6359">{i18n.t('settings.dataProvider')}</h3>
+      <div class="svadmin-u-eccd13ef4f2f svadmin-u-60fbb7713999 svadmin-u-1eb5c6df38c1 svadmin-u-77a2a20e90d4">{#each providerNames as name (name)}<Badge variant="outline" class="svadmin-u-0e65706bcccd svadmin-u-359090c2d529">{name}</Badge>{:else}<span class="svadmin-u-fc7473ca09eb svadmin-u-bfa603190748">—</span>{/each}</div>
     </div>
   </SettingsGroup>
 </div>

package/dist/components/ActivityFeed.svelte

@@ -44,60 +44,45 @@
       isSending = false;
     }
   }
-
-  function getStatusBadge(status?: ActivityItem['status']) {
-    switch (status) {
-      case 'success':
-        return 'bg-success/15 text-success border-success/20';
-      case 'warning':
-        return 'bg-warning/15 text-warning-foreground border-warning/20';
-      case 'destructive':
-        return 'bg-destructive/15 text-destructive border-destructive/20';
-      default:
-        return 'bg-primary/10 text-primary border-primary/20';
-    }
-  }
 </script>
 
-<div class={cn('space-y-4 rounded-xl border border-border bg-card p-4 shadow-xs text-xs', className)}>
-  <div class="flex items-center justify-between pb-2 border-b border-border/60">
-    <h4 class="font-semibold text-foreground flex items-center gap-1.5">
-      <MessageSquare class="h-4 w-4 text-primary" />
+<div class={cn('svadmin-activity-feed', className)}>
+  <div class="svadmin-activity-feed__header">
+    <h4 class="svadmin-activity-feed__title">
+      <MessageSquare class="svadmin-activity-feed__icon" />
       Activity & Timeline Stream
     </h4>
-    <span class="text-muted-foreground text-[11px]">{activities.length} event{activities.length === 1 ? '' : 's'}</span>
+    <span class="svadmin-activity-feed__count">{activities.length} event{activities.length === 1 ? '' : 's'}</span>
   </div>
 
-  <!-- Timeline Stream -->
-  <div class="relative space-y-4 pl-4 before:absolute before:left-1.5 before:top-2 before:bottom-2 before:w-0.5 before:bg-border/60">
+  <div class="svadmin-activity-feed__timeline">
     {#each activities as act (act.id)}
-      <div class="relative flex items-start gap-3 group">
-        <!-- Bullet dot -->
-        <div class="absolute -left-4 top-1 h-3 w-3 rounded-full border-2 border-card bg-primary ring-2 ring-primary/20"></div>
+      <div class="svadmin-activity-feed__item">
+        <div class="svadmin-activity-feed__dot"></div>
 
-        <div class="flex-1 space-y-1.5">
-          <div class="flex flex-wrap items-center justify-between gap-1">
-            <div class="flex items-center gap-1.5">
-              <span class="font-semibold text-foreground">{act.user?.name ?? 'System'}</span>
-              <span class="text-muted-foreground">{act.action}</span>
+        <div class="svadmin-activity-feed__body">
+          <div class="svadmin-activity-feed__meta">
+            <div class="svadmin-activity-feed__summary">
+              <span class="svadmin-activity-feed__user">{act.user?.name ?? 'System'}</span>
+              <span class="svadmin-activity-feed__action">{act.action}</span>
               {#if act.target}
-                <strong class="text-foreground">{act.target}</strong>
+                <strong class="svadmin-activity-feed__target">{act.target}</strong>
               {/if}
               {#if act.status}
-                <Badge variant="outline" class={cn('text-[10px] px-1 py-0', getStatusBadge(act.status))}>
+                <Badge variant="outline" data-status={act.status}>
                   {act.status}
                 </Badge>
               {/if}
             </div>
 
-            <div class="flex items-center gap-1 text-[11px] text-muted-foreground">
-              <Clock class="h-3 w-3" />
+            <div class="svadmin-activity-feed__timestamp">
+              <Clock class="svadmin-activity-feed__timestamp-icon" />
               <span>{act.timestamp}</span>
             </div>
           </div>
 
           {#if act.comment}
-            <div class="rounded-lg bg-muted/40 p-2.5 text-foreground border border-border/40 font-normal">
+            <div class="svadmin-activity-feed__comment">
               {act.comment}
             </div>
           {/if}
@@ -106,7 +91,7 @@
     {/each}
 
     {#if activities.length === 0}
-      <div class="py-6 text-center text-muted-foreground">
+      <div class="svadmin-activity-feed__empty">
         No recent activities
       </div>
     {/if}
@@ -114,18 +99,18 @@
 
   <!-- Add Comment Box -->
   {#if allowComment && onaddcomment}
-    <div class="pt-3 border-t border-border/60 space-y-2">
+    <div class="svadmin-activity-feed__composer">
       <textarea
         bind:value={newComment}
         placeholder="Add an internal comment or update note..."
-        class="w-full h-16 rounded-md border border-input bg-background p-2 text-xs focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+        class="svadmin-activity-feed__textarea"
       ></textarea>
-      <div class="flex justify-end">
-        <Button size="sm" class="h-7 text-xs gap-1" disabled={isSending || !newComment.trim()} onclick={handleSend}>
+      <div class="svadmin-activity-feed__send">
+        <Button size="sm" class="svadmin-activity-feed__send-button" disabled={isSending || !newComment.trim()} onclick={handleSend}>
           {#if isSending}
-            <Loader2 class="h-3.5 w-3.5 animate-spin" />
+            <Loader2 class="svadmin-activity-feed__send-icon svadmin-activity-feed__send-icon--loading" />
           {:else}
-            <Send class="h-3.5 w-3.5" />
+            <Send class="svadmin-activity-feed__send-icon" />
           {/if}
           Send Comment
         </Button>

package/dist/components/AdminApp.svelte

@@ -517,10 +517,10 @@
   {#if !resolvedDataProvider}
     <ConfigErrorScreen title="{title} — DataProvider is required" />
   {:else if !authChecked || authProviderPending}
-    <div class="flex h-screen items-center justify-center">
-      <div class="space-y-4 text-center">
-        <div class="h-8 w-8 animate-spin rounded-full border-4 border-muted border-t-primary mx-auto"></div>
-        <p class="text-sm text-muted-foreground">Loading...</p>
+    <div class="svadmin-u-60fbb7713999 svadmin-u-ef114b5f5ad1 svadmin-u-3960ffc248d9 svadmin-u-86843cf1e227">
+      <div class="svadmin-u-3e7ce58d64fa svadmin-u-ca6bf63030aa">
+        <div class="svadmin-u-ed8a5df7b2fb svadmin-u-2bbcfc3b5179 svadmin-u-afbdd13a380e svadmin-u-ac204c108886 svadmin-u-b485ae1c3b47 svadmin-u-da2c5d419684 svadmin-u-8a5560925d62 svadmin-u-0e12dc7de920"></div>
+        <p class="svadmin-u-fc7473ca09eb svadmin-u-bfa603190748">Loading...</p>
       </div>
     </div>
   {:else if route === '/login' && loginPage}
@@ -552,12 +552,12 @@
     </SystemPageShell>
   {:else if isAuthenticated || !resolvedAuthProvider}
     <Layout {title} {menu} {siteUrl} routeMode={resolvedRouteMode} {aiAssistant}>
-      <div class="relative min-h-40" aria-busy={authRechecking}>
+      <div class="svadmin-u-d89972fe17d6 svadmin-u-8a7a926578c8" aria-busy={authRechecking}>
         {#if authRechecking}
-          <div class="absolute inset-0 z-10 flex min-h-40 items-center justify-center bg-background/80" role="status" aria-live="polite">
-            <div class="space-y-3 text-center">
-              <div class="h-6 w-6 animate-spin rounded-full border-4 border-muted border-t-primary mx-auto"></div>
-              <p class="text-sm text-muted-foreground">Loading...</p>
+          <div class="svadmin-u-da4dbfbc4fdc svadmin-u-7b7df0449b80 svadmin-u-236812d64c82 svadmin-u-60fbb7713999 svadmin-u-8a7a926578c8 svadmin-u-3960ffc248d9 svadmin-u-86843cf1e227 svadmin-u-d542b60b5312" role="status" aria-live="polite">
+            <div class="svadmin-u-6ed543e2fbbb svadmin-u-ca6bf63030aa">
+              <div class="svadmin-u-f6fe902450dc svadmin-u-7ec10f86d9b1 svadmin-u-afbdd13a380e svadmin-u-ac204c108886 svadmin-u-b485ae1c3b47 svadmin-u-da2c5d419684 svadmin-u-8a5560925d62 svadmin-u-0e12dc7de920"></div>
+              <p class="svadmin-u-fc7473ca09eb svadmin-u-bfa603190748">Loading...</p>
             </div>
           </div>
         {:else}
@@ -605,9 +605,9 @@
         {#if dashboard}
           {@render dashboard()}
         {:else}
-          <div class="space-y-4">
-            <h1 class="text-xl font-semibold text-foreground">{translation.t('common.welcome', { title })}</h1>
-            <p class="text-muted-foreground">{translation.t('common.dashboardHint')}</p>
+          <div class="svadmin-u-3e7ce58d64fa">
+            <h1 class="svadmin-u-d5c9b0001e7e svadmin-u-e83a7042bc91 svadmin-u-d4108abe6359">{translation.t('common.welcome', { title })}</h1>
+            <p class="svadmin-u-bfa603190748">{translation.t('common.dashboardHint')}</p>
           </div>
         {/if}
       {:else if (renderedRoute === '/:resource' || renderedRoute === '/:parent/:parentId/:resource') && renderedHasRouteResource}
@@ -655,8 +655,8 @@
       </div>
     </Layout>
   {:else}
-    <div class="flex h-screen items-center justify-center">
-      <p class="text-muted-foreground">{translation.t('common.redirecting')}</p>
+    <div class="svadmin-u-60fbb7713999 svadmin-u-ef114b5f5ad1 svadmin-u-3960ffc248d9 svadmin-u-86843cf1e227">
+      <p class="svadmin-u-bfa603190748">{translation.t('common.redirecting')}</p>
     </div>
   {/if}
   <Toast />

package/dist/components/AnomalyBadge.svelte

@@ -47,7 +47,7 @@
 </script>
 
 {#if !isAnomaly}
-  <span class="text-muted-foreground text-sm font-medium tabular-nums {className}">
+  <span class="svadmin-anomaly-badge__value {className}">
     {formatter(value)}
   </span>
 {:else}
@@ -55,17 +55,18 @@
     tooltip={`Baseline: ${formatter(baseline)} (${diff > 0 ? '+' : '-'}${percentLabel})`}
     variant="ghost" 
     size="sm" 
-    class="p-0 h-auto hover:bg-transparent"
+    class="svadmin-anomaly-badge__trigger"
     aria-label={anomalyAriaLabel}
   >
     <Badge 
       variant={isGood ? 'default' : 'destructive'} 
-      class="flex items-center gap-1 font-mono text-xs tabular-nums px-1.5 py-0 {isGood ? 'bg-success hover:bg-success/90 text-success-foreground' : ''} {className}"
+      class="svadmin-anomaly-badge {className}"
+      data-good={isGood === true ? 'true' : 'false'}
     >
       {#if diff > 0}
-        <TrendingUp class="h-3 w-3" aria-hidden="true" />
+        <TrendingUp class="svadmin-anomaly-badge__icon" aria-hidden="true" />
       {:else}
-        <TrendingDown class="h-3 w-3" aria-hidden="true" />
+        <TrendingDown class="svadmin-anomaly-badge__icon" aria-hidden="true" />
       {/if}
       {formatter(value)}
     </Badge>

package/dist/components/ApiSettings.svelte

@@ -160,26 +160,26 @@
   <WorkspaceLayout secondaryWidth="21rem">
     {#snippet summary()}
       {#if generatedSecret}
-        <section class="rounded-lg border border-primary/20 bg-primary/5 p-4" role="status" aria-live="polite">
-          <div class="flex flex-col gap-4 sm:flex-row sm:items-center sm:justify-between"><div class="flex min-w-0 items-start gap-3"><ShieldCheck class="mt-0.5 size-5 shrink-0 text-primary" /><div class="min-w-0"><h2 class="text-sm font-semibold text-foreground">{i18n.t('api.successTitle')}</h2><p class="mt-1 text-sm text-muted-foreground">{i18n.t('api.successHint')}</p></div></div><Button variant="ghost" size="sm" onclick={() => { generatedSecret = ''; copied = false; }}>{i18n.t('common.close')}</Button></div>
-          <div class="mt-4 flex min-w-0 items-center gap-2"><Input readonly value={generatedSecret} class="min-w-0 font-mono text-xs" aria-label={i18n.t('api.successTitle')} /><Button size="icon" onclick={copySecret} aria-label={i18n.t('common.copy')}>{#if copied}<Check class="size-4" />{:else}<Copy class="size-4" />{/if}</Button></div>
+        <section class="svadmin-u-5f22e64f2282 svadmin-u-ca6bcd4b6f3f svadmin-u-a6afccfc915b svadmin-u-989c466fdbe7 svadmin-u-8e63407b5ceb" role="status" aria-live="polite">
+          <div class="svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-0c3bc98565dd svadmin-u-020ba687fa12 svadmin-u-9f76a62f4f44 svadmin-u-3b9871a0bf93"><div class="svadmin-u-60fbb7713999 svadmin-u-7e0b7cdf1a94 svadmin-u-60541e1e26f8 svadmin-u-1004c0c3954c"><ShieldCheck class="svadmin-u-15e1b1f444fe svadmin-u-add63bc6753d svadmin-u-012fbd121f37 svadmin-u-20aaf08a7ed1" /><div class="svadmin-u-7e0b7cdf1a94"><h2 class="svadmin-u-fc7473ca09eb svadmin-u-e83a7042bc91 svadmin-u-d4108abe6359">{i18n.t('api.successTitle')}</h2><p class="svadmin-u-b6b02c0ebef6 svadmin-u-fc7473ca09eb svadmin-u-bfa603190748">{i18n.t('api.successHint')}</p></div></div><Button variant="ghost" size="sm" onclick={() => { generatedSecret = ''; copied = false; }}>{i18n.t('common.close')}</Button></div>
+          <div class="svadmin-u-0ab8667228fd svadmin-u-60fbb7713999 svadmin-u-7e0b7cdf1a94 svadmin-u-3960ffc248d9 svadmin-u-77a2a20e90d4"><Input readonly value={generatedSecret} class="svadmin-u-7e0b7cdf1a94 svadmin-u-0e65706bcccd svadmin-u-359090c2d529" aria-label={i18n.t('api.successTitle')} /><Button size="icon" onclick={copySecret} aria-label={i18n.t('common.copy')}>{#if copied}<Check class="svadmin-u-f7b5fa971871" />{:else}<Copy class="svadmin-u-f7b5fa971871" />{/if}</Button></div>
         </section>
       {/if}
     {/snippet}
     {#snippet primary()}
-      <div class="space-y-6">
+      <div class="svadmin-u-b3542e058833">
         <SettingsGroup title={i18n.t('api.activeKeysTitle')} description={i18n.t('api.activeKeysDesc')} bodyClass="p-0">
-          {#if loading}<DataState state="loading" />{:else if error}<DataState state="error" description={error} retry={loadCredentials} />{:else}<ApiKeyList class="rounded-none border-0" keys={keys.map((key) => ({ id: key.id, name: key.name, prefix: key.prefix, createdAt: new Date(key.createdAt).toLocaleString(), lastUsedAt: key.lastUsedAt ? new Date(key.lastUsedAt).toLocaleString() : undefined, permissions: key.permissions }))} stateTitle={i18n.t('api.noKeys')} stateDescription={credentialProvider ? i18n.t('api.generateDesc') : (isZh ? '配置 CredentialProvider 后可管理真实凭据。' : 'Configure CredentialProvider to manage real credentials.')} onrevoke={credentialProvider ? (key) => revokeKey(key.id) : undefined} />{/if}
+          {#if loading}<DataState state="loading" />{:else if error}<DataState state="error" description={error} retry={loadCredentials} />{:else}<ApiKeyList class="svadmin-u-0c5e9137c7de svadmin-u-119b2aa0b8f6" keys={keys.map((key) => ({ id: key.id, name: key.name, prefix: key.prefix, createdAt: new Date(key.createdAt).toLocaleString(), lastUsedAt: key.lastUsedAt ? new Date(key.lastUsedAt).toLocaleString() : undefined, permissions: key.permissions }))} stateTitle={i18n.t('api.noKeys')} stateDescription={credentialProvider ? i18n.t('api.generateDesc') : (isZh ? '配置 CredentialProvider 后可管理真实凭据。' : 'Configure CredentialProvider to manage real credentials.')} onrevoke={credentialProvider ? (key) => revokeKey(key.id) : undefined} />{/if}
         </SettingsGroup>
         <SettingsGroup title={i18n.t('api.webhooks')} description={i18n.t('api.webhooksDesc')} bodyClass="space-y-5">
-          <form class="grid min-w-0 gap-4 md:grid-cols-2" onsubmit={handleAddWebhook}><div class="space-y-2"><Label for="webhook-name">{i18n.t('api.webhookName')}</Label><Input id="webhook-name" bind:value={newWebhookName} placeholder="Order Events" disabled={!credentialProvider || submitting} /></div><div class="space-y-2 md:col-span-2"><Label for="webhook-url">{i18n.t('api.webhookUrl')}</Label><Input id="webhook-url" type="url" bind:value={newWebhookUrl} placeholder="https://api.example.com/hooks" disabled={!credentialProvider || submitting} /></div><div class="space-y-2"><Label for="webhook-event">{i18n.t('api.eventType')}</Label><select id="webhook-event" bind:value={newWebhookEvent} disabled={!credentialProvider || submitting} class="flex h-9 w-full rounded-md border border-input bg-background px-3 py-2 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:opacity-50"><option value="resource.created">resource.created</option><option value="resource.updated">resource.updated</option><option value="resource.deleted">resource.deleted</option><option value="auth.login">auth.login</option></select></div><div class="flex items-end"><Button type="submit" class="w-full" disabled={!credentialProvider || submitting || !newWebhookName.trim() || !newWebhookUrl.trim()}><Plus class="size-4" />{i18n.t('api.addWebhook')}</Button></div></form>
-          {#if webhooks.length === 0}<DataState state="empty" title={i18n.t('api.noWebhooks')} description={credentialProvider ? i18n.t('api.webhooksDesc') : (isZh ? '配置 CredentialProvider 后可管理真实 Webhook。' : 'Configure CredentialProvider to manage real webhooks.')} />{:else}<div class="divide-y divide-border border-t border-border">{#each webhooks as hook (hook.id)}<div class="flex flex-col gap-3 py-4 sm:flex-row sm:items-center sm:justify-between"><div class="min-w-0"><p class="text-sm font-medium text-foreground">{hook.name}</p><p class="truncate font-mono text-xs text-muted-foreground">{hook.url}</p></div><div class="flex items-center justify-between gap-3 sm:justify-end"><span class="rounded bg-muted px-2 py-1 font-mono text-xs text-muted-foreground">{hook.eventType}</span><Button variant="ghost" size="icon-sm" onclick={() => deleteWebhook(hook.id)} aria-label={i18n.t('common.delete') + ' ' + hook.name}><Trash2 class="size-4" /></Button></div></div>{/each}</div>{/if}
+          <form class="svadmin-u-f3c543ad5fe9 svadmin-u-7e0b7cdf1a94 svadmin-u-0c3bc98565dd svadmin-u-e4d6f343b9ff" onsubmit={handleAddWebhook}><div class="svadmin-u-6f7e013d6499"><Label for="webhook-name">{i18n.t('api.webhookName')}</Label><Input id="webhook-name" bind:value={newWebhookName} placeholder="Order Events" disabled={!credentialProvider || submitting} /></div><div class="svadmin-u-6f7e013d6499 svadmin-u-eea04c60c0ca"><Label for="webhook-url">{i18n.t('api.webhookUrl')}</Label><Input id="webhook-url" type="url" bind:value={newWebhookUrl} placeholder="https://api.example.com/hooks" disabled={!credentialProvider || submitting} /></div><div class="svadmin-u-6f7e013d6499"><Label for="webhook-event">{i18n.t('api.eventType')}</Label><select id="webhook-event" bind:value={newWebhookEvent} disabled={!credentialProvider || submitting} class="svadmin-u-60fbb7713999 svadmin-u-e7a768f922d2 svadmin-u-6da6a3c3f741 svadmin-u-421ac2be5045 svadmin-u-ca6bcd4b6f3f svadmin-u-e5795dad4d22 svadmin-u-e6f9e383a762 svadmin-u-0e17f2bd9074 svadmin-u-03b4dd7f172b svadmin-u-fc7473ca09eb svadmin-u-582e6ef4b245 svadmin-u-55d048ebfb1c svadmin-u-608dd26cd5ba svadmin-u-80b9d0ae125f svadmin-u-6b22a22a9752 svadmin-u-b29d8adbad2e"><option value="resource.created">resource.created</option><option value="resource.updated">resource.updated</option><option value="resource.deleted">resource.deleted</option><option value="auth.login">auth.login</option></select></div><div class="svadmin-u-60fbb7713999 svadmin-u-6f27f4f79e55"><Button type="submit" class="svadmin-u-6da6a3c3f741" disabled={!credentialProvider || submitting || !newWebhookName.trim() || !newWebhookUrl.trim()}><Plus class="svadmin-u-f7b5fa971871" />{i18n.t('api.addWebhook')}</Button></div></form>
+          {#if webhooks.length === 0}<DataState state="empty" title={i18n.t('api.noWebhooks')} description={credentialProvider ? i18n.t('api.webhooksDesc') : (isZh ? '配置 CredentialProvider 后可管理真实 Webhook。' : 'Configure CredentialProvider to manage real webhooks.')} />{:else}<div class="svadmin-u-fa6acbf81d74 svadmin-u-e783642739e3 svadmin-u-b950dda299d3 svadmin-u-18049387f0af">{#each webhooks as hook (hook.id)}<div class="svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-1004c0c3954c svadmin-u-cb11fec3bb46 svadmin-u-020ba687fa12 svadmin-u-9f76a62f4f44 svadmin-u-3b9871a0bf93"><div class="svadmin-u-7e0b7cdf1a94"><p class="svadmin-u-fc7473ca09eb svadmin-u-2689f3958069 svadmin-u-d4108abe6359">{hook.name}</p><p class="svadmin-u-f283ea9bea0e svadmin-u-0e65706bcccd svadmin-u-359090c2d529 svadmin-u-bfa603190748">{hook.url}</p></div><div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-8ef2268efbbc svadmin-u-1004c0c3954c svadmin-u-1f51d781e606"><span class="svadmin-u-07389a777c1f svadmin-u-2ef11f1cb219 svadmin-u-d5eab218aa34 svadmin-u-660d2effb880 svadmin-u-0e65706bcccd svadmin-u-359090c2d529 svadmin-u-bfa603190748">{hook.eventType}</span><Button variant="ghost" size="icon-sm" onclick={() => deleteWebhook(hook.id)} aria-label={i18n.t('common.delete') + ' ' + hook.name}><Trash2 class="svadmin-u-f7b5fa971871" /></Button></div></div>{/each}</div>{/if}
         </SettingsGroup>
       </div>
     {/snippet}
     {#snippet secondary()}
       <SettingsGroup title={i18n.t('api.generateTitle')} description={i18n.t('api.generateDesc')}>
-        <form onsubmit={handleGenerateKey} class="space-y-5"><div class="space-y-2"><Label for="api-key-name">{i18n.t('api.keyName')}</Label><Input id="api-key-name" placeholder="CI deployment token" bind:value={newKeyName} required disabled={!credentialProvider || submitting} /></div><fieldset class="space-y-3" disabled={!credentialProvider || submitting}><legend class="text-sm font-medium text-foreground">{i18n.t('api.permissions')}</legend>{#each Object.keys(newKeyPermissions) as permission (permission)}<div class="flex items-center gap-2"><Checkbox id={`perm-${permission}`} bind:checked={newKeyPermissions[permission as keyof typeof newKeyPermissions]} /><Label for={`perm-${permission}`} class="cursor-pointer text-sm font-normal">{permission}</Label></div>{/each}</fieldset><Button type="submit" class="w-full" disabled={!credentialProvider || submitting || !newKeyName.trim()}>{i18n.t('api.generateButton')}</Button></form>
+        <form onsubmit={handleGenerateKey} class="svadmin-u-b43b4c086d9a"><div class="svadmin-u-6f7e013d6499"><Label for="api-key-name">{i18n.t('api.keyName')}</Label><Input id="api-key-name" placeholder="CI deployment token" bind:value={newKeyName} required disabled={!credentialProvider || submitting} /></div><fieldset class="svadmin-u-6ed543e2fbbb" disabled={!credentialProvider || submitting}><legend class="svadmin-u-fc7473ca09eb svadmin-u-2689f3958069 svadmin-u-d4108abe6359">{i18n.t('api.permissions')}</legend>{#each Object.keys(newKeyPermissions) as permission (permission)}<div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-77a2a20e90d4"><Checkbox id={`perm-${permission}`} bind:checked={newKeyPermissions[permission as keyof typeof newKeyPermissions]} /><Label for={`perm-${permission}`} class="svadmin-u-34516836730d svadmin-u-fc7473ca09eb svadmin-u-8ecebc9f80e6">{permission}</Label></div>{/each}</fieldset><Button type="submit" class="svadmin-u-6da6a3c3f741" disabled={!credentialProvider || submitting || !newKeyName.trim()}>{i18n.t('api.generateButton')}</Button></form>
       </SettingsGroup>
     {/snippet}
   </WorkspaceLayout>

package/dist/components/AppearanceSettings.svelte

@@ -26,33 +26,33 @@
   function setPageSize(size: number) { pageSize = size; if (typeof window !== 'undefined') localStorage.setItem(PAGE_SIZE_KEY, String(size)); }
 </script>
 
-<div class="space-y-6">
-  <div><h2 class="text-xl font-semibold text-foreground">{i18n.t('settings.appearance')}</h2><p class="mt-1 text-sm text-muted-foreground">{i18n.t('settings.settingsDescription')}</p></div>
+<div class="svadmin-u-b3542e058833">
+  <div><h2 class="svadmin-u-d5c9b0001e7e svadmin-u-e83a7042bc91 svadmin-u-d4108abe6359">{i18n.t('settings.appearance')}</h2><p class="svadmin-u-b6b02c0ebef6 svadmin-u-fc7473ca09eb svadmin-u-bfa603190748">{i18n.t('settings.settingsDescription')}</p></div>
   <SettingsGroup title={i18n.t('settings.themeMode')}>
-    <div class="grid grid-cols-3 gap-3">
+    <div class="svadmin-u-f3c543ad5fe9 svadmin-u-be2e831be5dd svadmin-u-1004c0c3954c">
       {#each themeOptions as option (option.value)}
         {@const active = currentTheme === option.value}
-        <button class="relative flex min-w-0 flex-col items-center gap-2 rounded-lg border p-4 transition-colors {active ? 'border-primary bg-primary/5' : 'border-border hover:bg-accent/50'}" onclick={() => setTheme(option.value)} aria-pressed={active}>
-          {#if active}<Check class="absolute right-2 top-2 size-3.5 text-primary" />{/if}
-          <span class="flex size-10 items-center justify-center rounded-md {active ? 'bg-primary/10 text-primary' : 'bg-muted text-muted-foreground'}"><option.icon class="size-5" /></span>
-          <span class="truncate text-xs font-medium {active ? 'text-primary' : 'text-muted-foreground'}">{i18n.t(option.label)}</span>
+        <button class="svadmin-u-d89972fe17d6 svadmin-u-60fbb7713999 svadmin-u-7e0b7cdf1a94 svadmin-u-8dddea0773ed svadmin-u-3960ffc248d9 svadmin-u-77a2a20e90d4 svadmin-u-5f22e64f2282 svadmin-u-ca6bcd4b6f3f svadmin-u-8e63407b5ceb svadmin-u-ceb69a6b0e5f {active ? 'svadmin-u-6cbc84dd9e1a svadmin-u-989c466fdbe7' : 'svadmin-u-18049387f0af svadmin-u-c7824f6076ea'}" onclick={() => setTheme(option.value)} aria-pressed={active}>
+          {#if active}<Check class="svadmin-u-da4dbfbc4fdc svadmin-u-7b2d63937d23 svadmin-u-9a2db8f949b6 svadmin-u-783b0d9d1e2c svadmin-u-20aaf08a7ed1" />{/if}
+          <span class="svadmin-u-60fbb7713999 svadmin-u-7bbb00f9ba7a svadmin-u-3960ffc248d9 svadmin-u-86843cf1e227 svadmin-u-421ac2be5045 {active ? 'svadmin-u-375dc44df6e9 svadmin-u-20aaf08a7ed1' : 'svadmin-u-2ef11f1cb219 svadmin-u-bfa603190748'}"><option.icon class="svadmin-u-add63bc6753d" /></span>
+          <span class="svadmin-u-f283ea9bea0e svadmin-u-359090c2d529 svadmin-u-2689f3958069 {active ? 'svadmin-u-20aaf08a7ed1' : 'svadmin-u-bfa603190748'}">{i18n.t(option.label)}</span>
         </button>
       {/each}
     </div>
   </SettingsGroup>
   <SettingsGroup title={i18n.t('settings.colorAccent')}>
-    <div class="flex flex-wrap gap-3">
+    <div class="svadmin-u-60fbb7713999 svadmin-u-1eb5c6df38c1 svadmin-u-1004c0c3954c">
       {#each presets as preset (preset.name)}
         {@const active = currentColor === preset.name}
-        <button class="relative size-9 rounded-full border border-border transition-opacity {active ? 'ring-2 ring-primary ring-offset-2 ring-offset-background' : 'opacity-70 hover:opacity-100'}" style="background-color: {preset.color}" onclick={() => setColorTheme(preset.name as Parameters<typeof setColorTheme>[0])} aria-label={preset.label} aria-pressed={active}>{#if active}<Check class="absolute inset-0 m-auto size-4 text-white drop-shadow-sm" />{/if}</button>
+        <button class="svadmin-u-d89972fe17d6 svadmin-u-665f07fe73cc svadmin-u-ac204c108886 svadmin-u-ca6bcd4b6f3f svadmin-u-18049387f0af svadmin-u-67d6184a0024 {active ? 'svadmin-u-16b1efa5875e svadmin-u-fd1dda07320a svadmin-u-0c15f6cff5a0 svadmin-u-582e6ef4b245' : 'svadmin-u-0c67ca474a69 svadmin-u-5da1d5250e75'}" style="background-color: {preset.color}" onclick={() => setColorTheme(preset.name as Parameters<typeof setColorTheme>[0])} aria-label={preset.label} aria-pressed={active}>{#if active}<Check class="svadmin-u-da4dbfbc4fdc svadmin-u-7b7df0449b80 svadmin-u-e12dfd448aa6 svadmin-u-f7b5fa971871 svadmin-u-72a4c7cdeef7 drop-shadow-sm" />{/if}</button>
       {/each}
     </div>
   </SettingsGroup>
   <SettingsGroup title={i18n.t('settings.interface')}>
-    <div class="divide-y divide-border">
-      <SettingsFieldRow label={i18n.t('settings.language')} description={localeNames[currentLocale] ?? currentLocale}>{#snippet control()}<select class="h-9 max-w-44 rounded-md border border-input bg-background px-3 text-sm ring-offset-background focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2" value={currentLocale} onchange={(event) => i18n.setLocale((event.target as HTMLSelectElement).value)}>{#each availableLocales as locale (locale)}<option value={locale}>{localeNames[locale] ?? locale}</option>{/each}</select>{/snippet}</SettingsFieldRow>
-      <SettingsFieldRow label={i18n.t('settings.sidebarDensity')}>{#snippet control()}<div class="flex overflow-hidden rounded-md border border-input"><button class="px-3 py-1.5 text-xs font-medium {density === 'compact' ? 'bg-primary text-primary-foreground' : 'bg-background text-muted-foreground hover:bg-accent'}" onclick={() => setDensity('compact')}>{i18n.t('settings.compact')}</button><button class="px-3 py-1.5 text-xs font-medium {density === 'standard' ? 'bg-primary text-primary-foreground' : 'bg-background text-muted-foreground hover:bg-accent'}" onclick={() => setDensity('standard')}>{i18n.t('settings.standard')}</button></div>{/snippet}</SettingsFieldRow>
-      <SettingsFieldRow label={i18n.t('settings.defaultPageSize')}>{#snippet control()}<div class="flex overflow-hidden rounded-md border border-input">{#each pageSizeOptions as size (size)}<button class="px-3 py-1.5 font-mono text-xs font-medium {pageSize === size ? 'bg-primary text-primary-foreground' : 'bg-background text-muted-foreground hover:bg-accent'}" onclick={() => setPageSize(size)}>{size}</button>{/each}</div>{/snippet}</SettingsFieldRow>
+    <div class="svadmin-u-fa6acbf81d74 svadmin-u-e783642739e3">
+      <SettingsFieldRow label={i18n.t('settings.language')} description={localeNames[currentLocale] ?? currentLocale}>{#snippet control()}<select class="svadmin-u-e7a768f922d2 svadmin-u-3713c4c7843d svadmin-u-421ac2be5045 svadmin-u-ca6bcd4b6f3f svadmin-u-e5795dad4d22 svadmin-u-e6f9e383a762 svadmin-u-0e17f2bd9074 svadmin-u-fc7473ca09eb svadmin-u-582e6ef4b245 svadmin-u-55d048ebfb1c svadmin-u-608dd26cd5ba svadmin-u-80b9d0ae125f svadmin-u-6b22a22a9752" value={currentLocale} onchange={(event) => i18n.setLocale((event.target as HTMLSelectElement).value)}>{#each availableLocales as locale (locale)}<option value={locale}>{localeNames[locale] ?? locale}</option>{/each}</select>{/snippet}</SettingsFieldRow>
+      <SettingsFieldRow label={i18n.t('settings.sidebarDensity')}>{#snippet control()}<div class="svadmin-u-60fbb7713999 svadmin-u-2cd02d11d1af svadmin-u-421ac2be5045 svadmin-u-ca6bcd4b6f3f svadmin-u-e5795dad4d22"><button class="svadmin-u-0e17f2bd9074 svadmin-u-ec0091ee009b svadmin-u-359090c2d529 svadmin-u-2689f3958069 {density === 'compact' ? 'svadmin-u-75b1bec3ea0e svadmin-u-30ca335ae9c2' : 'svadmin-u-e6f9e383a762 svadmin-u-bfa603190748 svadmin-u-0557b88819cd'}" onclick={() => setDensity('compact')}>{i18n.t('settings.compact')}</button><button class="svadmin-u-0e17f2bd9074 svadmin-u-ec0091ee009b svadmin-u-359090c2d529 svadmin-u-2689f3958069 {density === 'standard' ? 'svadmin-u-75b1bec3ea0e svadmin-u-30ca335ae9c2' : 'svadmin-u-e6f9e383a762 svadmin-u-bfa603190748 svadmin-u-0557b88819cd'}" onclick={() => setDensity('standard')}>{i18n.t('settings.standard')}</button></div>{/snippet}</SettingsFieldRow>
+      <SettingsFieldRow label={i18n.t('settings.defaultPageSize')}>{#snippet control()}<div class="svadmin-u-60fbb7713999 svadmin-u-2cd02d11d1af svadmin-u-421ac2be5045 svadmin-u-ca6bcd4b6f3f svadmin-u-e5795dad4d22">{#each pageSizeOptions as size (size)}<button class="svadmin-u-0e17f2bd9074 svadmin-u-ec0091ee009b svadmin-u-0e65706bcccd svadmin-u-359090c2d529 svadmin-u-2689f3958069 {pageSize === size ? 'svadmin-u-75b1bec3ea0e svadmin-u-30ca335ae9c2' : 'svadmin-u-e6f9e383a762 svadmin-u-bfa603190748 svadmin-u-0557b88819cd'}" onclick={() => setPageSize(size)}>{size}</button>{/each}</div>{/snippet}</SettingsFieldRow>
     </div>
   </SettingsGroup>
 </div>

package/dist/components/ApprovalActionCard.svelte

@@ -51,13 +51,13 @@
   const statusConfig = $derived.by(() => {
     switch (status) {
       case 'approved':
-        return { label: 'Approved', badge: 'bg-success/15 text-success border-success/20', icon: CheckCircle2 };
+        return { label: 'Approved', icon: CheckCircle2 };
       case 'rejected':
-        return { label: 'Rejected', badge: 'bg-destructive/15 text-destructive border-destructive/20', icon: XCircle };
+        return { label: 'Rejected', icon: XCircle };
       case 'recalled':
-        return { label: 'Recalled', badge: 'bg-muted text-muted-foreground border-border', icon: Undo2 };
+        return { label: 'Recalled', icon: Undo2 };
       default:
-        return { label: 'Pending Approval', badge: 'bg-warning/15 text-warning-foreground border-warning/20', icon: Clock };
+        return { label: 'Pending Approval', icon: Clock };
     }
   });
 
@@ -97,19 +97,19 @@
   }
 </script>
 
-<div class={cn('rounded-xl border border-border bg-card p-4 shadow-xs space-y-3', className)}>
-  <div class="flex flex-wrap items-center justify-between gap-2 pb-3 border-b border-border/50">
-    <div class="space-y-0.5">
-      <div class="flex items-center gap-2">
-        <h4 class="text-sm font-semibold text-foreground">{title}</h4>
-        <Badge variant="outline" class={cn('gap-1 text-[11px] font-medium', statusConfig.badge)}>
-          <statusConfig.icon class="h-3 w-3" />
+<div class={cn('svadmin-approval-card', className)} data-status={status}>
+  <div class="svadmin-approval-card__header">
+    <div class="svadmin-approval-card__heading">
+      <div class="svadmin-approval-card__title-row">
+        <h4 class="svadmin-approval-card__title">{title}</h4>
+        <Badge variant="outline" data-status={status}>
+          <statusConfig.icon class="svadmin-approval-card__status-icon" />
           {statusConfig.label}
         </Badge>
       </div>
       {#if applicant}
-        <p class="text-xs text-muted-foreground">
-          Submitted by <strong class="text-foreground">{applicant.name}</strong>
+        <p class="svadmin-approval-card__applicant">
+          Submitted by <strong>{applicant.name}</strong>
           {#if applicant.department} ({applicant.department}){/if}
           {#if applicant.time} · {applicant.time}{/if}
         </p>
@@ -117,16 +117,16 @@
     </div>
 
     {#if status === 'pending'}
-      <div class="flex items-center gap-1.5">
+      <div class="svadmin-approval-card__actions">
         {#if ontransfer}
           <Button
             variant="outline"
             size="sm"
-            class="h-8 text-xs gap-1 text-muted-foreground"
+            class="svadmin-approval-card__action"
             {disabled}
             onclick={() => { transferDialogOpen = true; }}
           >
-            <ArrowRightLeft class="h-3.5 w-3.5" />
+            <ArrowRightLeft class="svadmin-approval-card__action-icon" />
             Transfer
           </Button>
         {/if}
@@ -135,11 +135,11 @@
           <Button
             variant="outline"
             size="sm"
-            class="h-8 text-xs gap-1 border-destructive/30 text-destructive hover:bg-destructive/10"
+            class="svadmin-approval-card__action svadmin-approval-card__action--reject"
             {disabled}
             onclick={() => { rejectDialogOpen = true; }}
           >
-            <X class="h-3.5 w-3.5" />
+            <X class="svadmin-approval-card__action-icon" />
             Reject
           </Button>
         {/if}
@@ -147,11 +147,11 @@
         {#if onapprove}
           <Button
             size="sm"
-            class="h-8 text-xs gap-1 bg-success hover:bg-success/90 text-success-foreground"
+            class="svadmin-approval-card__action svadmin-approval-card__action--approve"
             {disabled}
             onclick={() => { approveDialogOpen = true; }}
           >
-            <Check class="h-3.5 w-3.5" />
+            <Check class="svadmin-approval-card__action-icon" />
             Approve
           </Button>
         {/if}
@@ -160,7 +160,7 @@
   </div>
 
   {#if children}
-    <div class="text-xs text-foreground space-y-2">
+    <div class="svadmin-approval-card__content">
       {@render children()}
     </div>
   {/if}
@@ -169,22 +169,22 @@
 <!-- Approve Dialog -->
 {#if approveDialogOpen}
   <Dialog.Dialog bind:open={approveDialogOpen}>
-    <Dialog.DialogContent class="sm:max-w-md">
+    <Dialog.DialogContent class="svadmin-approval-card__dialog">
       <Dialog.DialogHeader>
         <Dialog.DialogTitle>Confirm Approval</Dialog.DialogTitle>
       </Dialog.DialogHeader>
-      <div class="space-y-3 py-2 text-xs">
-        <label class="block font-medium text-foreground" for="approve_comment_input">Optional Approval Comment</label>
+      <div class="svadmin-approval-card__dialog-form">
+        <label class="svadmin-approval-card__dialog-label" for="approve_comment_input">Optional Approval Comment</label>
         <textarea
           id="approve_comment_input"
           bind:value={approveComment}
           placeholder="e.g. Verified and approved"
-          class="w-full h-20 rounded-md border border-input bg-background p-2 text-xs focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          class="svadmin-approval-card__textarea"
         ></textarea>
       </div>
       <Dialog.DialogFooter>
         <Button variant="outline" size="sm" onclick={() => { approveDialogOpen = false; }}>Cancel</Button>
-        <Button size="sm" class="bg-success hover:bg-success/90 text-success-foreground" disabled={isSubmitting} onclick={handleApprove}>
+        <Button size="sm" class="svadmin-approval-card__confirm svadmin-approval-card__confirm--approve" disabled={isSubmitting} onclick={handleApprove}>
           Confirm Approval
         </Button>
       </Dialog.DialogFooter>
@@ -195,17 +195,17 @@
 <!-- Reject Dialog -->
 {#if rejectDialogOpen}
   <Dialog.Dialog bind:open={rejectDialogOpen}>
-    <Dialog.DialogContent class="sm:max-w-md">
+    <Dialog.DialogContent class="svadmin-approval-card__dialog">
       <Dialog.DialogHeader>
-        <Dialog.DialogTitle class="text-destructive">Reject Request</Dialog.DialogTitle>
+        <Dialog.DialogTitle class="svadmin-approval-card__reject-title">Reject Request</Dialog.DialogTitle>
       </Dialog.DialogHeader>
-      <div class="space-y-3 py-2 text-xs">
-        <label class="block font-medium text-foreground" for="reject_reason_input">Rejection Reason (Required)</label>
+      <div class="svadmin-approval-card__dialog-form">
+        <label class="svadmin-approval-card__dialog-label" for="reject_reason_input">Rejection Reason (Required)</label>
         <textarea
           id="reject_reason_input"
           bind:value={rejectReason}
           placeholder="Please explain why this request is being rejected..."
-          class="w-full h-20 rounded-md border border-destructive/40 bg-background p-2 text-xs focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-destructive"
+          class="svadmin-approval-card__textarea svadmin-approval-card__textarea--reject"
           required
         ></textarea>
       </div>
@@ -222,18 +222,18 @@
 <!-- Transfer Dialog -->
 {#if transferDialogOpen}
   <Dialog.Dialog bind:open={transferDialogOpen}>
-    <Dialog.DialogContent class="sm:max-w-md">
+    <Dialog.DialogContent class="svadmin-approval-card__dialog">
       <Dialog.DialogHeader>
         <Dialog.DialogTitle>Transfer Approval</Dialog.DialogTitle>
       </Dialog.DialogHeader>
-      <div class="space-y-3 py-2 text-xs">
-        <label class="block font-medium text-foreground" for="transfer_target_input">Target Approver Email / Username</label>
+      <div class="svadmin-approval-card__dialog-form">
+        <label class="svadmin-approval-card__dialog-label" for="transfer_target_input">Target Approver Email / Username</label>
         <input
           id="transfer_target_input"
           type="text"
           bind:value={transferTarget}
           placeholder="e.g. manager@example.com"
-          class="w-full h-8 rounded-md border border-input bg-background px-2 text-xs focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          class="svadmin-approval-card__input"
           required
         />
       </div>