@svadmin/ui 0.68.1 → 0.69.1

package/dist/components/OfflineSyncBanner.svelte

@@ -78,31 +78,31 @@
 {#if !isOnline || pendingMutations.length > 0}
   <div
     class={cn(
-      'rounded-xl border shadow-xs text-xs p-3 transition-all',
+      'svadmin-u-a217b4eaa918 svadmin-u-ca6bcd4b6f3f svadmin-u-cef5b893cf23 svadmin-u-359090c2d529 svadmin-u-eb6e8b881acd svadmin-u-0fe7d7d814d0',
       !isOnline
-        ? 'bg-warning/15 border-warning/30 text-warning-foreground'
-        : 'bg-muted/40 border-border/80 text-foreground',
+        ? 'svadmin-u-d9c3c520f7d5 svadmin-u-2f960aa0c478 svadmin-u-3a4ff758c2ab'
+        : 'svadmin-u-b00f43c30c2b svadmin-u-c9ed8c5f79ae svadmin-u-d4108abe6359',
       className
     )}
   >
-    <div class="flex flex-wrap items-center justify-between gap-2">
+    <div class="svadmin-u-60fbb7713999 svadmin-u-1eb5c6df38c1 svadmin-u-3960ffc248d9 svadmin-u-8ef2268efbbc svadmin-u-77a2a20e90d4">
       <!-- Status Indicator -->
-      <div class="flex items-center gap-2">
+      <div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-77a2a20e90d4">
         {#if !isOnline}
-          <div class="flex h-6 w-6 items-center justify-center rounded-full bg-warning/20 text-warning">
-            <WifiOff class="h-3.5 w-3.5" />
+          <div class="svadmin-u-60fbb7713999 svadmin-u-f6fe902450dc svadmin-u-7ec10f86d9b1 svadmin-u-3960ffc248d9 svadmin-u-86843cf1e227 svadmin-u-ac204c108886 svadmin-u-55acecc7e2f1 svadmin-u-918184635b1d">
+            <WifiOff class="svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c" />
           </div>
           <div>
-            <div class="font-semibold text-foreground">Offline Mode</div>
-            <div class="text-[11px] text-muted-foreground">Changes are saved locally to IndexedDB queue.</div>
+            <div class="svadmin-u-e83a7042bc91 svadmin-u-d4108abe6359">Offline Mode</div>
+            <div class="svadmin-u-d058ca6de60f svadmin-u-bfa603190748">Changes are saved locally to IndexedDB queue.</div>
           </div>
         {:else}
-          <div class="flex h-6 w-6 items-center justify-center rounded-full bg-success/20 text-success">
-            <Wifi class="h-3.5 w-3.5" />
+          <div class="svadmin-u-60fbb7713999 svadmin-u-f6fe902450dc svadmin-u-7ec10f86d9b1 svadmin-u-3960ffc248d9 svadmin-u-86843cf1e227 svadmin-u-ac204c108886 svadmin-u-ccc86a0cef94 svadmin-u-76747e5e02ff">
+            <Wifi class="svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c" />
           </div>
           <div>
-            <div class="font-semibold text-foreground">Online • Synced Connection</div>
-            <div class="text-[11px] text-muted-foreground">
+            <div class="svadmin-u-e83a7042bc91 svadmin-u-d4108abe6359">Online • Synced Connection</div>
+            <div class="svadmin-u-d058ca6de60f svadmin-u-bfa603190748">
               {pendingMutations.length} pending mutation(s) in queue
             </div>
           </div>
@@ -110,11 +110,11 @@
       </div>
 
       <!-- Actions -->
-      <div class="flex items-center gap-2">
+      <div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-77a2a20e90d4">
         {#if pendingMutations.length > 0}
           <button
             type="button"
-            class="text-[11px] text-muted-foreground hover:text-foreground underline cursor-pointer bg-transparent border-0"
+            class="svadmin-u-d058ca6de60f svadmin-u-bfa603190748 svadmin-u-ea7b2e9e070e svadmin-u-c82b67c88e69 svadmin-u-34516836730d svadmin-u-7f19cdf4c5bb svadmin-u-119b2aa0b8f6"
             onclick={() => { expanded = !expanded; }}
           >
             {expanded ? 'Hide Details' : `View Queue (${pendingMutations.length})`}
@@ -122,11 +122,11 @@
 
           <Button
             size="sm"
-            class="h-7 text-xs gap-1"
+            class="svadmin-u-d0a52b312f7d svadmin-u-359090c2d529 svadmin-u-44ee8ba0a421"
             disabled={!isOnline || isSyncing}
             onclick={triggerSync}
           >
-            <RefreshCw class={cn('h-3 w-3', isSyncing ? 'animate-spin' : '')} />
+            <RefreshCw class={cn('svadmin-u-6a60c09e6aaa svadmin-u-9cea05671a29', isSyncing ? 'svadmin-u-afbdd13a380e' : '')} />
             {isSyncing ? 'Syncing...' : 'Sync Now'}
           </Button>
         {/if}
@@ -135,30 +135,30 @@
 
     <!-- Queue List Drawer -->
     {#if expanded && pendingMutations.length > 0}
-      <div class="mt-3 pt-3 border-t border-border/40 space-y-1.5 max-h-48 overflow-y-auto">
+      <div class="svadmin-u-eccd13ef4f2f svadmin-u-ce335a8e4f56 svadmin-u-b950dda299d3 svadmin-u-6ee2d41e2d2d svadmin-u-5a2508227c6a svadmin-u-558f64349245 svadmin-u-92bf82f493b1">
         {#each pendingMutations as mut (mut.id)}
-          <div class="flex items-center justify-between p-2 rounded-md bg-card border border-border/60 text-[11px]">
-            <div class="flex items-center gap-2 truncate">
+          <div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-8ef2268efbbc svadmin-u-7660b450905a svadmin-u-421ac2be5045 svadmin-u-cd0ad9a56558 svadmin-u-ca6bcd4b6f3f svadmin-u-05faf5c801ff svadmin-u-d058ca6de60f">
+            <div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-77a2a20e90d4 svadmin-u-f283ea9bea0e">
               {#if mut.status === 'failed'}
-                <AlertCircle class="h-3.5 w-3.5 text-destructive shrink-0" />
+                <AlertCircle class="svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c svadmin-u-811148b13d1e svadmin-u-012fbd121f37" />
               {:else if mut.status === 'syncing'}
-                <RefreshCw class="h-3.5 w-3.5 text-primary animate-spin shrink-0" />
+                <RefreshCw class="svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c svadmin-u-20aaf08a7ed1 svadmin-u-afbdd13a380e svadmin-u-012fbd121f37" />
               {:else if mut.status === 'synced'}
-                <CheckCircle2 class="h-3.5 w-3.5 text-success shrink-0" />
+                <CheckCircle2 class="svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c svadmin-u-76747e5e02ff svadmin-u-012fbd121f37" />
               {:else}
-                <Clock class="h-3.5 w-3.5 text-muted-foreground shrink-0" />
+                <Clock class="svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c svadmin-u-bfa603190748 svadmin-u-012fbd121f37" />
               {/if}
 
-              <Badge variant="outline" class="font-mono text-[9px] uppercase px-1 py-0">{mut.action}</Badge>
-              <span class="font-medium text-foreground truncate">{mut.resource}</span>
-              <span class="text-muted-foreground font-mono text-[10px]">{mut.timestamp}</span>
+              <Badge variant="outline" class="svadmin-u-0e65706bcccd svadmin-u-e09880869d1f uppercase svadmin-u-d8e0e382c67b svadmin-u-68ecb30dbec6">{mut.action}</Badge>
+              <span class="svadmin-u-2689f3958069 svadmin-u-d4108abe6359 svadmin-u-f283ea9bea0e">{mut.resource}</span>
+              <span class="svadmin-u-bfa603190748 svadmin-u-0e65706bcccd svadmin-u-1dc571a3609f">{mut.timestamp}</span>
             </div>
 
             {#if mut.status === 'failed' && onretry}
               <Button
                 variant="ghost"
                 size="sm"
-                class="h-6 text-[10px] px-2 text-destructive hover:bg-destructive/10"
+                class="svadmin-u-f6fe902450dc svadmin-u-1dc571a3609f svadmin-u-d5eab218aa34 svadmin-u-811148b13d1e svadmin-u-8db899b4e072"
                 onclick={() => onretry?.(mut.id)}
               >
                 Retry

package/dist/components/PageHeader.svelte

@@ -33,47 +33,46 @@
     class: className = '',
   }: Props = $props();
 
-  const isCompact = $derived(density === 'compact');
 </script>
 
-<div class={cn(isCompact ? 'space-y-1.5' : 'space-y-4', className)}>
+<div class={cn('svadmin-page-header', className)} data-density={density}>
   {#if showBreadcrumbs}
-    <Breadcrumbs class={isCompact ? 'mb-1 text-xs' : 'mb-4'} />
+    <Breadcrumbs class="svadmin-page-header__breadcrumbs" />
   {/if}
-  <div class={cn('flex flex-col sm:flex-row sm:items-center sm:justify-between', isCompact ? 'gap-1.5' : 'gap-2')}>
-    <div class="flex items-center gap-2.5 min-w-0">
+  <div class="svadmin-page-header__row">
+    <div class="svadmin-page-header__heading">
       {#if back}
         {@render back()}
       {:else if onBack}
         <Button
           variant="ghost"
           size="icon-xs"
-          class="shrink-0 text-muted-foreground hover:text-foreground"
+          class="svadmin-page-header__back"
           onclick={onBack}
           aria-label={backLabel}
           title={backLabel}
         >
-          <ArrowLeft class="size-4" />
+          <ArrowLeft class="svadmin-page-header__back-icon" />
         </Button>
       {/if}
-      <div class="min-w-0">
-        <div class="flex flex-wrap items-center gap-2">
-          <h1 class={cn('font-semibold text-foreground truncate', isCompact ? 'text-lg' : 'text-xl')}>
+      <div class="svadmin-page-header__text">
+        <div class="svadmin-page-header__title-row">
+          <h1 class="svadmin-page-header__title">
             {title}
           </h1>
           {#if tags}
-            <div class="inline-flex items-center gap-1.5">
+            <div class="svadmin-page-header__tags">
               {@render tags()}
             </div>
           {/if}
         </div>
         {#if description}
-          <p class={cn('text-muted-foreground', isCompact ? 'text-xs' : 'text-sm')}>{description}</p>
+          <p class="svadmin-page-header__description">{description}</p>
         {/if}
       </div>
     </div>
     {#if actions || extra}
-      <div class={cn('flex items-center shrink-0', isCompact ? 'gap-1.5' : 'gap-2')}>
+      <div class="svadmin-page-header__actions">
         {#if extra}
           {@render extra()}
         {/if}

package/dist/components/PageSkeleton.svelte

@@ -11,59 +11,59 @@
   }>();
 </script>
 
-<div class="w-full space-y-6" out:fade={{ duration: 200 }}>
+<div class="svadmin-u-6da6a3c3f741 svadmin-u-b3542e058833" out:fade={{ duration: 200 }}>
   <!-- Header Skeleton -->
-  <div class="flex items-center justify-between">
-    <div class="space-y-2">
-      <Skeleton class="h-8 w-[200px]" />
-      <Skeleton class="h-4 w-[300px]" />
+  <div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-8ef2268efbbc">
+    <div class="svadmin-u-6f7e013d6499">
+      <Skeleton class="svadmin-u-ed8a5df7b2fb svadmin-u-efc981d0f818" />
+      <Skeleton class="svadmin-u-11e59c6d5f6b svadmin-u-069503724c35" />
     </div>
     {#if type === 'list'}
-      <Skeleton class="h-10 w-[120px]" />
+      <Skeleton class="svadmin-u-426b8b75185b svadmin-u-c1ca66f139f6" />
     {/if}
   </div>
 
-  <div class="rounded-md border p-4 space-y-4">
+  <div class="svadmin-u-421ac2be5045 svadmin-u-ca6bcd4b6f3f svadmin-u-8e63407b5ceb svadmin-u-3e7ce58d64fa">
     {#if type === 'list'}
       <!-- Table Header -->
-      <div class="flex gap-4 border-b pb-4">
+      <div class="svadmin-u-60fbb7713999 svadmin-u-0c3bc98565dd svadmin-u-65fdbade2025 svadmin-u-9fcd8a13827e">
         {#each Array(4) as _, _i (_i)}
-          <Skeleton class="h-6 flex-1" />
+          <Skeleton class="svadmin-u-f6fe902450dc svadmin-u-36e579c0b41c" />
         {/each}
       </div>
       <!-- Table Rows -->
-      <div class="space-y-4">
+      <div class="svadmin-u-3e7ce58d64fa">
         {#each Array(rows) as _, _i (_i)}
-          <div class="flex gap-4">
-            <Skeleton class="h-6 flex-1" />
-            <Skeleton class="h-6 flex-1" />
-            <Skeleton class="h-6 flex-1" />
-            <Skeleton class="h-6 flex-1" />
+          <div class="svadmin-u-60fbb7713999 svadmin-u-0c3bc98565dd">
+            <Skeleton class="svadmin-u-f6fe902450dc svadmin-u-36e579c0b41c" />
+            <Skeleton class="svadmin-u-f6fe902450dc svadmin-u-36e579c0b41c" />
+            <Skeleton class="svadmin-u-f6fe902450dc svadmin-u-36e579c0b41c" />
+            <Skeleton class="svadmin-u-f6fe902450dc svadmin-u-36e579c0b41c" />
           </div>
         {/each}
       </div>
     {:else if type === 'show'}
       <!-- Key-Value pairs -->
-      <div class="space-y-6">
+      <div class="svadmin-u-b3542e058833">
         {#each Array(rows) as _, _i (_i)}
-          <div class="space-y-2">
-            <Skeleton class="h-4 w-[100px]" />
-            <Skeleton class="h-6 w-[250px]" />
+          <div class="svadmin-u-6f7e013d6499">
+            <Skeleton class="svadmin-u-11e59c6d5f6b svadmin-u-671513a87226" />
+            <Skeleton class="svadmin-u-f6fe902450dc svadmin-u-71e31b2f1bb2" />
           </div>
         {/each}
       </div>
     {:else if type === 'form'}
       <!-- Form Inputs -->
-      <div class="space-y-6">
+      <div class="svadmin-u-b3542e058833">
         {#each Array(rows) as _, _i (_i)}
-          <div class="space-y-2">
-            <Skeleton class="h-4 w-[100px]" />
-            <Skeleton class="h-10 w-full max-w-md" />
+          <div class="svadmin-u-6f7e013d6499">
+            <Skeleton class="svadmin-u-11e59c6d5f6b svadmin-u-671513a87226" />
+            <Skeleton class="svadmin-u-426b8b75185b svadmin-u-6da6a3c3f741 svadmin-u-9794ab45094d" />
           </div>
         {/each}
-        <div class="pt-4 flex gap-2">
-          <Skeleton class="h-10 w-[100px]" />
-          <Skeleton class="h-10 w-[100px]" />
+        <div class="svadmin-u-173fa8f06789 svadmin-u-60fbb7713999 svadmin-u-77a2a20e90d4">
+          <Skeleton class="svadmin-u-426b8b75185b svadmin-u-671513a87226" />
+          <Skeleton class="svadmin-u-426b8b75185b svadmin-u-671513a87226" />
         </div>
       </div>
     {/if}

package/dist/components/PasswordInput.svelte

@@ -57,16 +57,16 @@
   );
 </script>
 
-<div class="space-y-2 {className}">
+<div class="svadmin-u-6f7e013d6499 {className}">
   <Label for={id}>{label}</Label>
-  <div class="relative">
-    <Lock class="absolute left-3 top-1/2 -translate-y-1/2 h-4 w-4 text-muted-foreground pointer-events-none z-[1]" />
+  <div class="svadmin-u-d89972fe17d6">
+    <Lock class="svadmin-u-da4dbfbc4fdc svadmin-u-22e59b722111 svadmin-u-d694ba66e322 svadmin-u-36b381be4df3 svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3 svadmin-u-bfa603190748 svadmin-u-a4326536b8f5 svadmin-u-536a7530a44f" />
     <Input
       {id}
       type={showPassword ? 'text' : 'password'}
       {placeholder}
       bind:value
-      class="pl-9 pr-9"
+      class="svadmin-u-9e83b2412bc9 svadmin-u-1b1df78e4d0a"
       autocomplete={autocomplete as any}
       {disabled}
     />
@@ -75,27 +75,27 @@
       variant="ghost"
       size="icon"
       type="button"
-      class="absolute right-1 top-1/2 -translate-y-1/2 h-7 w-7 z-[1]"
+      class="svadmin-u-da4dbfbc4fdc svadmin-u-68d3fc190004 svadmin-u-d694ba66e322 svadmin-u-36b381be4df3 svadmin-u-d0a52b312f7d svadmin-u-cbbf90f9a828 svadmin-u-536a7530a44f"
       onclick={(e) => { e.preventDefault(); showPassword = !showPassword; }}
       {disabled}
       tabindex={-1}
     >
       {#if showPassword}
-        <EyeOff class="h-4 w-4" />
+        <EyeOff class="svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3" />
       {:else}
-        <Eye class="h-4 w-4" />
+        <Eye class="svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3" />
       {/if}
     </TooltipButton>
   </div>
   {#if showStrength && value}
-    <div class="flex items-center gap-2">
-      <div class="flex-1 h-1.5 rounded-full bg-muted overflow-hidden">
+    <div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-77a2a20e90d4">
+      <div class="svadmin-u-36e579c0b41c svadmin-u-095acb275581 svadmin-u-ac204c108886 svadmin-u-2ef11f1cb219 svadmin-u-2cd02d11d1af">
         <div
-          class="h-full rounded-full transition-all duration-300 {strengthColor}"
+          class="svadmin-u-668b21aa5409 svadmin-u-ac204c108886 svadmin-u-0fe7d7d814d0 svadmin-u-7890552ecd63 {strengthColor}"
           style="width: {strength}%"
         ></div>
       </div>
-      <span class="text-xs text-muted-foreground w-12 text-right">{strengthLabel}</span>
+      <span class="svadmin-u-359090c2d529 svadmin-u-bfa603190748 svadmin-u-e7e371071bc5 svadmin-u-308fc069e46e">{strengthLabel}</span>
     </div>
   {/if}
 </div>

package/dist/components/PdfDocumentViewer.svelte

@@ -105,47 +105,47 @@
   function getStampVariant(status?: string) {
     switch (status) {
       case 'approved':
-        return 'bg-success/15 text-success border-success/30';
+        return 'svadmin-u-4cf5af8d25d3 svadmin-u-76747e5e02ff svadmin-u-18a6e7a36f29';
       case 'rejected':
-        return 'bg-destructive/15 text-destructive border-destructive/30';
+        return 'svadmin-u-c698f77c9ba5 svadmin-u-811148b13d1e svadmin-u-9d5d8b4711b4';
       case 'confidential':
-        return 'bg-warning/15 text-warning border-warning/30';
+        return 'svadmin-u-d9c3c520f7d5 svadmin-u-918184635b1d svadmin-u-2f960aa0c478';
       default:
-        return 'bg-primary/15 text-primary border-primary/30';
+        return 'svadmin-u-30f13f694038 svadmin-u-20aaf08a7ed1 svadmin-u-05f954a846d6';
     }
   }
 </script>
 
 <div
   class={cn(
-    'flex flex-col rounded-xl border border-border bg-card shadow-xs text-xs overflow-hidden transition-all',
-    isFullscreen ? 'fixed inset-4 z-50 shadow-2xl' : 'min-h-[500px]',
+    'svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-a217b4eaa918 svadmin-u-ca6bcd4b6f3f svadmin-u-18049387f0af svadmin-u-cd0ad9a56558 svadmin-u-cef5b893cf23 svadmin-u-359090c2d529 svadmin-u-2cd02d11d1af svadmin-u-0fe7d7d814d0',
+    isFullscreen ? 'svadmin-u-7bc555991dba svadmin-u-dff2e7481197 svadmin-u-181b286668b5 svadmin-u-14e46609fd68' : 'svadmin-u-243d62579c55',
     className
   )}
 >
   <!-- Toolbar Header -->
-  <div class="flex flex-wrap items-center justify-between gap-2 p-3 bg-muted/30 border-b border-border/60">
+  <div class="svadmin-u-60fbb7713999 svadmin-u-1eb5c6df38c1 svadmin-u-3960ffc248d9 svadmin-u-8ef2268efbbc svadmin-u-77a2a20e90d4 svadmin-u-eb6e8b881acd svadmin-u-2859c861d7de svadmin-u-65fdbade2025 svadmin-u-05faf5c801ff">
     <!-- File Title -->
-    <div class="flex items-center gap-2 font-medium text-foreground truncate max-w-64">
-      <FileText class="h-4 w-4 text-primary shrink-0" />
-      <span class="truncate">{fileName}</span>
+    <div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-77a2a20e90d4 svadmin-u-2689f3958069 svadmin-u-d4108abe6359 svadmin-u-f283ea9bea0e svadmin-u-35b2f3aff60f">
+      <FileText class="svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3 svadmin-u-20aaf08a7ed1 svadmin-u-012fbd121f37" />
+      <span class="svadmin-u-f283ea9bea0e">{fileName}</span>
     </div>
 
     <!-- Paging Controls -->
-    <div class="flex items-center gap-1.5">
+    <div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-58284b4ea568">
       <Button
         variant="ghost"
         size="sm"
-        class="h-7 w-7 p-0"
+        class="svadmin-u-d0a52b312f7d svadmin-u-cbbf90f9a828 svadmin-u-8a539c7fe216"
         disabled={currentPage <= 1}
         onclick={prevPage}
         title="Previous Page"
       >
-        <ChevronLeft class="h-4 w-4" />
+        <ChevronLeft class="svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3" />
       </Button>
 
-      <div class="flex items-center gap-1 font-mono text-[11px] text-muted-foreground px-1">
-        <span class="font-semibold text-foreground">{currentPage}</span>
+      <div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-44ee8ba0a421 svadmin-u-0e65706bcccd svadmin-u-d058ca6de60f svadmin-u-bfa603190748 svadmin-u-d8e0e382c67b">
+        <span class="svadmin-u-e83a7042bc91 svadmin-u-d4108abe6359">{currentPage}</span>
         <span>/</span>
         <span>{totalPages}</span>
       </div>
@@ -153,87 +153,87 @@
       <Button
         variant="ghost"
         size="sm"
-        class="h-7 w-7 p-0"
+        class="svadmin-u-d0a52b312f7d svadmin-u-cbbf90f9a828 svadmin-u-8a539c7fe216"
         disabled={currentPage >= totalPages}
         onclick={nextPage}
         title="Next Page"
       >
-        <ChevronRight class="h-4 w-4" />
+        <ChevronRight class="svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3" />
       </Button>
     </div>
 
     <!-- Zoom & Rotate Actions -->
-    <div class="flex items-center gap-1">
-      <Button variant="ghost" size="sm" class="h-7 w-7 p-0" onclick={zoomOut} title="Zoom Out">
-        <ZoomOut class="h-3.5 w-3.5" />
+    <div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-44ee8ba0a421">
+      <Button variant="ghost" size="sm" class="svadmin-u-d0a52b312f7d svadmin-u-cbbf90f9a828 svadmin-u-8a539c7fe216" onclick={zoomOut} title="Zoom Out">
+        <ZoomOut class="svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c" />
       </Button>
 
-      <span class="font-mono text-[11px] text-muted-foreground w-12 text-center">{zoomLevel}%</span>
+      <span class="svadmin-u-0e65706bcccd svadmin-u-d058ca6de60f svadmin-u-bfa603190748 svadmin-u-e7e371071bc5 svadmin-u-ca6bf63030aa">{zoomLevel}%</span>
 
-      <Button variant="ghost" size="sm" class="h-7 w-7 p-0" onclick={zoomIn} title="Zoom In">
-        <ZoomIn class="h-3.5 w-3.5" />
+      <Button variant="ghost" size="sm" class="svadmin-u-d0a52b312f7d svadmin-u-cbbf90f9a828 svadmin-u-8a539c7fe216" onclick={zoomIn} title="Zoom In">
+        <ZoomIn class="svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c" />
       </Button>
 
-      <Button variant="ghost" size="sm" class="h-7 w-7 p-0" onclick={rotate} title="Rotate 90°">
-        <RotateCw class="h-3.5 w-3.5" />
+      <Button variant="ghost" size="sm" class="svadmin-u-d0a52b312f7d svadmin-u-cbbf90f9a828 svadmin-u-8a539c7fe216" onclick={rotate} title="Rotate 90°">
+        <RotateCw class="svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c" />
       </Button>
 
       <Button
         variant="ghost"
         size="sm"
-        class="h-7 w-7 p-0"
+        class="svadmin-u-d0a52b312f7d svadmin-u-cbbf90f9a828 svadmin-u-8a539c7fe216"
         onclick={() => { isFullscreen = !isFullscreen; }}
         title={isFullscreen ? 'Exit Fullscreen' : 'Fullscreen'}
       >
-        <Maximize2 class="h-3.5 w-3.5" />
+        <Maximize2 class="svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c" />
       </Button>
     </div>
 
     <!-- Export & Print -->
-    <div class="flex items-center gap-1.5">
-      <Button variant="outline" size="sm" class="h-7 text-xs gap-1" onclick={handlePrint}>
-        <Printer class="h-3.5 w-3.5" />
+    <div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-58284b4ea568">
+      <Button variant="outline" size="sm" class="svadmin-u-d0a52b312f7d svadmin-u-359090c2d529 svadmin-u-44ee8ba0a421" onclick={handlePrint}>
+        <Printer class="svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c" />
         Print
       </Button>
 
-      <Button size="sm" class="h-7 text-xs gap-1" onclick={handleDownload}>
-        <Download class="h-3.5 w-3.5" />
+      <Button size="sm" class="svadmin-u-d0a52b312f7d svadmin-u-359090c2d529 svadmin-u-44ee8ba0a421" onclick={handleDownload}>
+        <Download class="svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c" />
         Download
       </Button>
     </div>
   </div>
 
   <!-- Document Viewport -->
-  <div class="flex-1 overflow-auto bg-muted/40 p-6 flex items-center justify-center min-h-[400px]">
+  <div class="svadmin-u-36e579c0b41c svadmin-u-73fc3fb18ceb svadmin-u-b00f43c30c2b svadmin-u-0478c89a150f svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-86843cf1e227 svadmin-u-179c0e54131c">
     <div
-      class="relative bg-card rounded-lg shadow-md border border-border/80 transition-transform duration-200 overflow-hidden"
+      class="svadmin-u-d89972fe17d6 svadmin-u-cd0ad9a56558 svadmin-u-5f22e64f2282 svadmin-u-febc34e471df svadmin-u-ca6bcd4b6f3f svadmin-u-c9ed8c5f79ae svadmin-u-eadef238231e svadmin-u-625a4c3fbeb2 svadmin-u-2cd02d11d1af"
       style={`transform: scale(${zoomLevel / 100}) rotate(${rotation}deg); transform-origin: center center; width: 595px; min-height: 842px;`}
     >
       {#if fileUrl}
         <iframe
           src={fileUrl}
           title={fileName}
-          class="w-full h-[842px] border-0"
+          class="svadmin-u-6da6a3c3f741 svadmin-u-f24b9e2db7e8 svadmin-u-119b2aa0b8f6"
         ></iframe>
       {:else}
         <!-- Simulated Document Paper -->
-        <div class="p-12 space-y-6 text-foreground">
-          <div class="border-b border-border/60 pb-4 flex justify-between items-start">
+        <div class="svadmin-u-16a5872ee870 svadmin-u-b3542e058833 svadmin-u-d4108abe6359">
+          <div class="svadmin-u-65fdbade2025 svadmin-u-05faf5c801ff svadmin-u-9fcd8a13827e svadmin-u-60fbb7713999 svadmin-u-8ef2268efbbc svadmin-u-60541e1e26f8">
             <div>
-              <h2 class="text-base font-bold tracking-tight">{fileName.replace(/\.[^/.]+$/, '')}</h2>
-              <p class="text-[11px] text-muted-foreground">Document Sheet Reference • Page {currentPage}</p>
+              <h2 class="svadmin-u-4ee734926ff6 svadmin-u-69450ef1487e svadmin-u-1d7f28b046ad">{fileName.replace(/\.[^/.]+$/, '')}</h2>
+              <p class="svadmin-u-d058ca6de60f svadmin-u-bfa603190748">Document Sheet Reference • Page {currentPage}</p>
             </div>
-            <Badge variant="outline" class="font-mono text-[10px]">P.{currentPage}</Badge>
+            <Badge variant="outline" class="svadmin-u-0e65706bcccd svadmin-u-1dc571a3609f">P.{currentPage}</Badge>
           </div>
 
-          <div class="space-y-3 text-muted-foreground leading-relaxed text-xs">
+          <div class="svadmin-u-6ed543e2fbbb svadmin-u-bfa603190748 svadmin-u-6b189c6edadb svadmin-u-359090c2d529">
             <p>This is a rendered document preview surface. In production, provide a valid PDF / image URL via the <code>fileUrl</code> prop to stream direct binary pages.</p>
             <p>The document supports electronic stamps, digital approval watermarks, interactive zooming, rotation and multi-page flipping.</p>
           </div>
 
-          <div class="my-8 p-4 rounded-lg bg-muted/30 border border-border/60 space-y-2">
-            <div class="font-semibold text-foreground">Terms & Conditions of Execution</div>
-            <div class="text-[11px] text-muted-foreground">All parties acknowledge the contractual stipulations herein outlined and agreed upon via authenticated electronic signatures.</div>
+          <div class="svadmin-u-adfb03d826b8 svadmin-u-8e63407b5ceb svadmin-u-5f22e64f2282 svadmin-u-2859c861d7de svadmin-u-ca6bcd4b6f3f svadmin-u-05faf5c801ff svadmin-u-6f7e013d6499">
+            <div class="svadmin-u-e83a7042bc91 svadmin-u-d4108abe6359">Terms & Conditions of Execution</div>
+            <div class="svadmin-u-d058ca6de60f svadmin-u-bfa603190748">All parties acknowledge the contractual stipulations herein outlined and agreed upon via authenticated electronic signatures.</div>
           </div>
         </div>
       {/if}
@@ -242,7 +242,7 @@
       {#each pageStamps as stamp (stamp.id)}
         <div
           class={cn(
-            'absolute z-20 px-3 py-1.5 rounded-md border-2 font-bold text-xs uppercase tracking-wider shadow-sm rotate-[-12deg] pointer-events-none select-none',
+            'svadmin-u-da4dbfbc4fdc svadmin-u-145745bf5286 svadmin-u-0e17f2bd9074 svadmin-u-ec0091ee009b svadmin-u-421ac2be5045 svadmin-u-65935df577ba svadmin-u-69450ef1487e svadmin-u-359090c2d529 uppercase svadmin-u-09ace3a4d9f5 svadmin-u-438b2237b8d6 svadmin-u-2c69d147b501 svadmin-u-a4326536b8f5 svadmin-u-7f6912283f11',
             getStampVariant(stamp.status)
           )}
           style={`left: ${stamp.x}%; top: ${stamp.y}%;`}