@svadmin/ui 0.68.0 → 0.69.0

package/dist/components/Layout.svelte

@@ -146,40 +146,40 @@
   ontouchend={handleTouchEnd}
 />
 {#if loading}
-  <div data-svadmin-layout-scope={layoutScope} class="flex h-screen" in:fade={{ duration: 150 }}>
-    <div class="hidden md:block w-[252px] bg-sidebar/80 p-4 space-y-4">
-      <Skeleton class="h-8 w-32" />
-      <div class="space-y-2 mt-6">
+  <div data-svadmin-layout-scope={layoutScope} class="svadmin-u-60fbb7713999 svadmin-u-ef114b5f5ad1" in:fade={{ duration: 150 }}>
+    <div class="svadmin-u-99d72c7fc3e2 svadmin-u-9d60be3a6d80 svadmin-u-e2fe2012a697 svadmin-u-ac402894e356 svadmin-u-8e63407b5ceb svadmin-u-3e7ce58d64fa">
+      <Skeleton class="svadmin-u-ed8a5df7b2fb svadmin-u-516b03df0b7c" />
+      <div class="svadmin-u-6f7e013d6499 svadmin-u-31f2553311b6">
         {#each Array(5) as _, _i (_i)}
-          <Skeleton class="h-9 w-full rounded-lg" />
+          <Skeleton class="svadmin-u-e7a768f922d2 svadmin-u-6da6a3c3f741 svadmin-u-5f22e64f2282" />
         {/each}
       </div>
     </div>
-    <div class="flex-1 p-8 space-y-6">
-      <Skeleton class="h-8 w-48" />
-      <div class="space-y-3">
+    <div class="svadmin-u-36e579c0b41c svadmin-u-845f53365c8d svadmin-u-b3542e058833">
+      <Skeleton class="svadmin-u-ed8a5df7b2fb svadmin-u-74b2435a1d40" />
+      <div class="svadmin-u-6ed543e2fbbb">
         {#each Array(4) as _, _i (_i)}
-          <Skeleton class="h-12 w-full" />
+          <Skeleton class="svadmin-u-508ebf85b1c9 svadmin-u-6da6a3c3f741" />
         {/each}
       </div>
     </div>
   </div>
-  <div class="hidden" aria-hidden="true">
+  <div class="svadmin-u-99d72c7fc3e2" aria-hidden="true">
     <DevTools docked />
   </div>
 {:else}
-  <div data-svadmin-layout-scope={layoutScope} class="flex h-screen bg-background" in:fade={{ duration: 200, delay: 50 }}>
+  <div data-svadmin-layout-scope={layoutScope} class="svadmin-u-60fbb7713999 svadmin-u-ef114b5f5ad1 svadmin-u-e6f9e383a762" in:fade={{ duration: 200, delay: 50 }}>
     <button
       type="button"
       data-svadmin-skip-link={mainContentId}
-      class="absolute left-3 top-3 z-[100] -translate-y-16 rounded-md border border-border bg-background px-3 py-2 text-sm font-medium text-foreground shadow-sm transition-transform focus:translate-y-0 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2"
+      class="svadmin-u-da4dbfbc4fdc svadmin-u-22e59b722111 svadmin-u-8782d84cc906 svadmin-u-db5a366a0e21 svadmin-u-306d283a53fe svadmin-u-421ac2be5045 svadmin-u-ca6bcd4b6f3f svadmin-u-18049387f0af svadmin-u-e6f9e383a762 svadmin-u-0e17f2bd9074 svadmin-u-03b4dd7f172b svadmin-u-fc7473ca09eb svadmin-u-2689f3958069 svadmin-u-d4108abe6359 svadmin-u-438b2237b8d6 svadmin-u-eadef238231e svadmin-u-beab17f53576 svadmin-u-55d048ebfb1c svadmin-u-608dd26cd5ba svadmin-u-80b9d0ae125f svadmin-u-6b22a22a9752"
       onclick={focusMainContent}
     >
       {i18n.t('common.skipToMainContent')}
     </button>
 
     <!-- Desktop sidebar -->
-    <div class="hidden md:block">
+    <div class="svadmin-u-99d72c7fc3e2 svadmin-u-9d60be3a6d80">
       <Sidebar {collapsed} {identity} {title} {menu} {routeMode} onToggle={() => collapsed = !collapsed} onLogout={handleLogout} />
     </div>
 
@@ -191,14 +191,14 @@
       aria-modal="true"
       aria-labelledby={`${layoutScope}-mobile-navigation-title`}
     >
-      <Sheet.Title id={`${layoutScope}-mobile-navigation-title`} class="sr-only">{title}</Sheet.Title>
-      <div class="md:hidden">
+      <Sheet.Title id={`${layoutScope}-mobile-navigation-title`} class="svadmin-u-2daa8e5e2f2e">{title}</Sheet.Title>
+      <div class="svadmin-u-e477a6af4cb6">
         <Sidebar collapsed={false} {identity} {title} {menu} {routeMode} onToggle={() => { mobileMenuOpen = false; }} onLogout={handleLogout} />
       </div>
     </Sheet.Root>
 
     <div
-      class="flex-1 flex flex-col overflow-hidden transition-all duration-300"
+      class="svadmin-u-36e579c0b41c svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-2cd02d11d1af svadmin-u-0fe7d7d814d0 svadmin-u-7890552ecd63"
       class:md:ml-[252px]={!collapsed}
       class:sidebar-content-expanded={!collapsed}
       class:md:ml-[70px]={collapsed}
@@ -218,12 +218,12 @@
             type="button"
             variant="outline"
             size="sm"
-            class="md:hidden gap-1.5 px-2.5"
+            class="svadmin-u-e477a6af4cb6 svadmin-u-58284b4ea568 svadmin-u-0b91436debbd"
             aria-label={i18n.t('common.menu')}
             onclick={() => { mobileMenuOpen = true; }}
           >
-            <Menu class="h-5 w-5" />
-            <span class="text-xs">{i18n.t('common.menu')}</span>
+            <Menu class="svadmin-u-cd0d9c512cdc svadmin-u-72470489ff4e" />
+            <span class="svadmin-u-359090c2d529">{i18n.t('common.menu')}</span>
           </Button>
         {/snippet}
         {#snippet rightActions()}
@@ -237,8 +237,8 @@
 
       <!-- Content area: responsive padding + centered max-width container
            so wide screens don't stretch content indefinitely (avoids sparse layouts) -->
-      <main id={mainContentId} tabindex="-1" data-svadmin-main class="flex-1 overflow-y-auto bg-muted/30 px-4 py-5 sm:px-5 md:px-7.5 md:py-7">
-        <div class="mx-auto w-full max-w-[1600px]">
+      <main id={mainContentId} tabindex="-1" data-svadmin-main class="svadmin-u-36e579c0b41c svadmin-u-92bf82f493b1 svadmin-u-2859c861d7de svadmin-u-f0faeb26d656 svadmin-u-c9b99cd93450 svadmin-u-cc06a6575385 svadmin-u-daf5dc5fac2b svadmin-u-e86fadb84483">
+        <div class="svadmin-u-0e12dc7de920 svadmin-u-6da6a3c3f741 svadmin-u-9e3dc30c26a3">
           {#key getPath()}
             <div in:fly={{ x: 20, duration: 150 }} out:fade={{ duration: 80 }}>
               {@render children()}
@@ -247,7 +247,7 @@
         </div>
       </main>
 
-      <footer class="flex min-h-14 shrink-0 items-center justify-end gap-2 border-t border-border/60 bg-background px-4 empty:hidden">
+      <footer class="svadmin-u-60fbb7713999 svadmin-u-0cfe3fb5e434 svadmin-u-012fbd121f37 svadmin-u-3960ffc248d9 svadmin-u-77c08e015d14 svadmin-u-77a2a20e90d4 svadmin-u-b950dda299d3 svadmin-u-05faf5c801ff svadmin-u-e6f9e383a762 svadmin-u-f0faeb26d656 svadmin-u-472f43d3a27b">
         <DevTools docked />
         {@render aiAssistant?.({ docked: true, scope: chatScope, ownerScope: layoutScope })}
       </footer>

package/dist/components/LazyPage.svelte

@@ -34,14 +34,14 @@
 </script>
 
 {#await pagePromise}
-  <div class="flex min-h-40 items-center justify-center" role="status" aria-live="polite">
-    <span class="text-sm text-muted-foreground">Loading...</span>
+  <div class="svadmin-u-60fbb7713999 svadmin-u-8a7a926578c8 svadmin-u-3960ffc248d9 svadmin-u-86843cf1e227" role="status" aria-live="polite">
+    <span class="svadmin-u-fc7473ca09eb svadmin-u-bfa603190748">Loading...</span>
   </div>
 {:then pageModule}
   {@const Page = pageModule.default as unknown as LazyPageRenderable}
   <Page {...props} />
 {:catch}
-  <div class="flex min-h-40 items-center justify-center" role="alert">
-    <span class="text-sm text-destructive">Unable to load this page.</span>
+  <div class="svadmin-u-60fbb7713999 svadmin-u-8a7a926578c8 svadmin-u-3960ffc248d9 svadmin-u-86843cf1e227" role="alert">
+    <span class="svadmin-u-fc7473ca09eb svadmin-u-811148b13d1e">Unable to load this page.</span>
   </div>
 {/await}

package/dist/components/ListInferencer.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
-  // ListInferencer — 基于资源定义零配置渲染列表视图
-  // 直接复用 ListPage + AutoTable，不需要手写任何页面代码。
+  // ListInferencer renders a list view from the resource definition with no page-specific configuration.
+  // It composes ListPage and AutoTable without requiring handwritten page code.
   import ListPage from './ListPage.svelte';
 
   interface Props {

package/dist/components/ListPage.svelte

@@ -54,7 +54,7 @@
   const showCreate = $derived(canCreate ?? resource.canCreate !== false);
 </script>
 
-<div class="{density === 'compact' ? 'space-y-3' : 'space-y-4'} {className}">
+<div class="{density === 'compact' ? 'svadmin-u-6ed543e2fbbb' : 'svadmin-u-3e7ce58d64fa'} {className}">
   <PageHeader title={pageTitle} {density}>
     {#snippet actions()}
       {#if showCreate}

package/dist/components/LiveIndicator.svelte

@@ -16,9 +16,9 @@
   }>();
 
   const statusConfigs = {
-    connected: { variant: 'default' as const, dotClass: 'bg-success', label: 'Live', icon: Wifi },
-    connecting: { variant: 'secondary' as const, dotClass: 'bg-warning', label: 'Connecting...', icon: Loader2 as typeof Wifi },
-    disconnected: { variant: 'destructive' as const, dotClass: 'bg-destructive', label: 'Offline', icon: WifiOff },
+    connected: { variant: 'default' as const, dotClass: 'svadmin-u-3355648fe22b', label: 'Live', icon: Wifi },
+    connecting: { variant: 'secondary' as const, dotClass: 'svadmin-u-a486cacb3a15', label: 'Connecting...', icon: Loader2 as typeof Wifi },
+    disconnected: { variant: 'destructive' as const, dotClass: 'svadmin-u-fb1b0d05046d', label: 'Offline', icon: WifiOff },
   } as const;
   type StatusKey = 'connected' | 'connecting' | 'disconnected';
   const cfg = $derived(statusConfigs[status as StatusKey]);
@@ -40,28 +40,28 @@
   <div transition:fade={{ duration: 200 }}>
     <Badge
       variant={cfg.variant}
-      class="gap-1.5 select-none"
+      class="svadmin-u-58284b4ea568 svadmin-u-7f6912283f11"
       title={cfg.label}
       role="status"
       aria-label={`Connection status: ${cfg.label}${resource ? ` for ${resource}` : ''}`}
     >
-      <span class="relative flex h-2 w-2" aria-hidden="true">
-        <span class="{cfg.dotClass} rounded-full h-2 w-2"></span>
+      <span class="svadmin-u-d89972fe17d6 svadmin-u-60fbb7713999 svadmin-u-2f2a842e50fa svadmin-u-940924b6e2d9" aria-hidden="true">
+        <span class="{cfg.dotClass} svadmin-u-ac204c108886 svadmin-u-2f2a842e50fa svadmin-u-940924b6e2d9"></span>
         {#if status === 'connected'}
-          <span class="absolute inset-0 rounded-full {cfg.dotClass} opacity-40 animate-ping motion-reduce:animate-none"></span>
+          <span class="svadmin-u-da4dbfbc4fdc svadmin-u-7b7df0449b80 svadmin-u-ac204c108886 {cfg.dotClass} svadmin-u-2a2db4667b27 svadmin-u-e9963c2ac628 svadmin-u-259ce51fc8f3"></span>
         {/if}
       </span>
-      <span class="text-[0.6875rem] font-semibold uppercase tracking-wide">{cfg.label}</span>
+      <span class="svadmin-u-76067d04e222 svadmin-u-e83a7042bc91 uppercase svadmin-u-8baf13a3e9d7">{cfg.label}</span>
 
       {#if showDetails && resource}
-        <span class="text-[0.625rem] font-mono opacity-70">{resource}</span>
+        <span class="svadmin-u-06b1d9433e62 svadmin-u-0e65706bcccd svadmin-u-0c67ca474a69">{resource}</span>
       {/if}
 
       {#if showDetails && lastEvent}
-        <span class="text-[0.625rem] opacity-70">
+        <span class="svadmin-u-06b1d9433e62 svadmin-u-0c67ca474a69">
           {lastEvent.type}
           {#if timeSinceEvent !== null && timeSinceEvent < 60}
-            <span class="opacity-60 tabular-nums">{timeSinceEvent}s ago</span>
+            <span class="svadmin-u-f2868c227fcd svadmin-u-3032cae0badb">{timeSinceEvent}s ago</span>
           {/if}
         </span>
       {/if}

package/dist/components/LoginPage.svelte

@@ -68,65 +68,65 @@
 
 {#snippet footer()}
   {#if authProvider?.register}
-    <div class="flex items-center justify-center gap-1.5"><span class="text-sm text-muted-foreground">{i18n.t('auth.noAccount')}</span><Button variant="link" class="h-auto p-0 text-sm font-semibold" onclick={() => adminContext.navigate('/register')}>{i18n.t('auth.register')}</Button></div>
+    <div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-86843cf1e227 svadmin-u-58284b4ea568"><span class="svadmin-u-fc7473ca09eb svadmin-u-bfa603190748">{i18n.t('auth.noAccount')}</span><Button variant="link" class="svadmin-u-b8f0a08ece1e svadmin-u-8a539c7fe216 svadmin-u-fc7473ca09eb svadmin-u-e83a7042bc91" onclick={() => adminContext.navigate('/register')}>{i18n.t('auth.register')}</Button></div>
   {/if}
 {/snippet}
 
 <AuthPageShell brand={title} title={i18n.t('auth.welcomeBack')} description={i18n.t('auth.welcomeMessage')} {footer}>
       {#if loginHint || defaultIdentifier || defaultPassword}
-        <aside class="mb-5 rounded-md border border-border bg-muted/35 p-3">
+        <aside class="svadmin-u-fb88ccaacf5b svadmin-u-421ac2be5045 svadmin-u-ca6bcd4b6f3f svadmin-u-18049387f0af svadmin-u-60ed9c3ef326 svadmin-u-eb6e8b881acd">
           {#if loginHint}
-            <p class="text-sm font-medium text-foreground">{loginHint}</p>
+            <p class="svadmin-u-fc7473ca09eb svadmin-u-2689f3958069 svadmin-u-d4108abe6359">{loginHint}</p>
           {/if}
-          <dl class="mt-3 grid gap-2 sm:grid-cols-2">
+          <dl class="svadmin-u-eccd13ef4f2f svadmin-u-f3c543ad5fe9 svadmin-u-77a2a20e90d4 svadmin-u-e00ad81645a2">
             {#if defaultIdentifier}
-              <div class="rounded-md border border-border bg-background px-3 py-2">
-                <dt class="text-xs font-medium text-muted-foreground">{i18n.t('auth.usernameOrEmail')}</dt>
-                <dd class="mt-1 truncate font-mono text-sm text-foreground">{defaultIdentifier}</dd>
+              <div class="svadmin-u-421ac2be5045 svadmin-u-ca6bcd4b6f3f svadmin-u-18049387f0af svadmin-u-e6f9e383a762 svadmin-u-0e17f2bd9074 svadmin-u-03b4dd7f172b">
+                <dt class="svadmin-u-359090c2d529 svadmin-u-2689f3958069 svadmin-u-bfa603190748">{i18n.t('auth.usernameOrEmail')}</dt>
+                <dd class="svadmin-u-b6b02c0ebef6 svadmin-u-f283ea9bea0e svadmin-u-0e65706bcccd svadmin-u-fc7473ca09eb svadmin-u-d4108abe6359">{defaultIdentifier}</dd>
               </div>
             {/if}
             {#if defaultPassword}
-              <div class="rounded-md border border-border bg-background px-3 py-2">
-                <dt class="text-xs font-medium text-muted-foreground">{i18n.t('auth.password')}</dt>
-                <dd class="mt-1 font-mono text-sm text-foreground">{defaultPassword}</dd>
+              <div class="svadmin-u-421ac2be5045 svadmin-u-ca6bcd4b6f3f svadmin-u-18049387f0af svadmin-u-e6f9e383a762 svadmin-u-0e17f2bd9074 svadmin-u-03b4dd7f172b">
+                <dt class="svadmin-u-359090c2d529 svadmin-u-2689f3958069 svadmin-u-bfa603190748">{i18n.t('auth.password')}</dt>
+                <dd class="svadmin-u-b6b02c0ebef6 svadmin-u-0e65706bcccd svadmin-u-fc7473ca09eb svadmin-u-d4108abe6359">{defaultPassword}</dd>
               </div>
             {/if}
           </dl>
         </aside>
       {/if}
 
-      <form onsubmit={handleSubmit} class="space-y-5">
+      <form onsubmit={handleSubmit} class="svadmin-u-b43b4c086d9a">
         {#if error}
           <Alert.Root variant="destructive">
-            <AlertCircle class="h-4 w-4" />
-            <Alert.Description class="text-sm font-medium">{error}</Alert.Description>
+            <AlertCircle class="svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3" />
+            <Alert.Description class="svadmin-u-fc7473ca09eb svadmin-u-2689f3958069">{error}</Alert.Description>
           </Alert.Root>
         {/if}
 
-        <div class="space-y-2">
+        <div class="svadmin-u-6f7e013d6499">
           <Label for="login-identifier">
             {i18n.t('auth.usernameOrEmail')}
           </Label>
-          <div class="relative">
-            <User class="pointer-events-none absolute left-3 top-1/2 z-[1] h-4 w-4 -translate-y-1/2 text-muted-foreground" />
+          <div class="svadmin-u-d89972fe17d6">
+            <User class="svadmin-u-a4326536b8f5 svadmin-u-da4dbfbc4fdc svadmin-u-22e59b722111 svadmin-u-d694ba66e322 svadmin-u-536a7530a44f svadmin-u-11e59c6d5f6b svadmin-u-dc7972ebf3f3 svadmin-u-36b381be4df3 svadmin-u-bfa603190748" />
             <Input
               id="login-identifier"
               type="text"
               placeholder={i18n.t('auth.identifierPlaceholder')}
               bind:value={identifier}
-              class="pl-9"
+              class="svadmin-u-9e83b2412bc9"
               autocomplete="username"
             />
           </div>
         </div>
 
-        <div class="space-y-2">
-          <div class="flex items-center justify-between">
+        <div class="svadmin-u-6f7e013d6499">
+          <div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-8ef2268efbbc">
             <Label for="login-password">
               {i18n.t('auth.password')}
             </Label>
             {#if authProvider?.forgotPassword}
-              <Button variant="link" class="h-auto p-0 text-xs font-medium" onclick={() => adminContext.navigate('/forgot-password')}>
+              <Button variant="link" class="svadmin-u-b8f0a08ece1e svadmin-u-8a539c7fe216 svadmin-u-359090c2d529 svadmin-u-2689f3958069" onclick={() => adminContext.navigate('/forgot-password')}>
                 {i18n.t('auth.forgotPasswordLink')}
               </Button>
             {/if}
@@ -139,31 +139,31 @@
           />
         </div>
 
-        <Button type="submit" class="h-10 w-full" disabled={login.isLoading}>
+        <Button type="submit" class="svadmin-u-426b8b75185b svadmin-u-6da6a3c3f741" disabled={login.isLoading}>
           {#if login.isLoading}
-            <Loader2 class="h-5 w-5 animate-spin mr-2" />
+            <Loader2 class="svadmin-u-cd0d9c512cdc svadmin-u-72470489ff4e svadmin-u-afbdd13a380e svadmin-u-d2347e8497a9" />
           {/if}
           {i18n.t('auth.loginButton')}
         </Button>
       </form>
 
       {#if socialProviders.length > 0}
-        <div class="relative my-6">
+        <div class="svadmin-u-d89972fe17d6 svadmin-u-1256b2f6ad2d">
           <Separator />
-          <span class="absolute left-1/2 top-1/2 -translate-x-1/2 -translate-y-1/2 bg-card px-4 text-xs font-medium text-muted-foreground">
+          <span class="svadmin-u-da4dbfbc4fdc svadmin-u-e632769ad71e svadmin-u-d694ba66e322 svadmin-u-efaa0701487e svadmin-u-36b381be4df3 svadmin-u-cd0ad9a56558 svadmin-u-f0faeb26d656 svadmin-u-359090c2d529 svadmin-u-2689f3958069 svadmin-u-bfa603190748">
             {i18n.t('auth.orContinueWith')}
           </span>
         </div>
 
-        <div class="grid gap-3" class:grid-cols-2={socialProviders.length >= 2}>
+        <div class="svadmin-u-f3c543ad5fe9 svadmin-u-1004c0c3954c" class:grid-cols-2={socialProviders.length >= 2}>
           {#each socialProviders as provider (provider.name)}
             <Button
               variant="outline"
-              class="h-10 w-full"
+              class="svadmin-u-426b8b75185b svadmin-u-6da6a3c3f741"
               onclick={provider.onClick}
             >
               {#if provider.icon}
-                <span class="mr-2 text-lg">{provider.icon}</span>
+                <span class="svadmin-u-d2347e8497a9 svadmin-u-42536e69e639">{provider.icon}</span>
               {/if}
               {provider.name}
             </Button>

package/dist/components/MasterDetailView.svelte

@@ -22,7 +22,7 @@
     idKey = 'id',
     titleKey = 'title',
     subtitleKey = 'subtitle',
-    listWidth = 'w-72 sm:w-80',
+    listWidth = 'svadmin-u-92e13d146fd7 svadmin-u-b7dfca40c07f',
     emptyText = 'No items found',
     itemSnippet,
     detailSnippet,
@@ -46,44 +46,44 @@
   );
 </script>
 
-<div class={cn('flex h-full min-h-[420px] rounded-xl border border-border bg-card shadow-xs overflow-hidden text-xs', className)}>
+<div class={cn('svadmin-u-60fbb7713999 svadmin-u-668b21aa5409 svadmin-u-afc45e21ada6 svadmin-u-a217b4eaa918 svadmin-u-ca6bcd4b6f3f svadmin-u-18049387f0af svadmin-u-cd0ad9a56558 svadmin-u-cef5b893cf23 svadmin-u-2cd02d11d1af svadmin-u-359090c2d529', className)}>
   <!-- Master List Panel -->
-  <div class={cn('flex flex-col border-r border-border/60 bg-muted/15 shrink-0', listWidth)}>
+  <div class={cn('svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-5ceb636bd9f3 svadmin-u-05faf5c801ff svadmin-u-46daeb0b661f svadmin-u-012fbd121f37', listWidth)}>
     <!-- Search Bar -->
-    <div class="p-3 border-b border-border/60">
-      <div class="relative">
-        <Search class="absolute left-2.5 top-2.5 h-3.5 w-3.5 text-muted-foreground" />
+    <div class="svadmin-u-eb6e8b881acd svadmin-u-65fdbade2025 svadmin-u-05faf5c801ff">
+      <div class="svadmin-u-d89972fe17d6">
+        <Search class="svadmin-u-da4dbfbc4fdc svadmin-u-ecfeb742a3f3 svadmin-u-7a470f4c9b28 svadmin-u-7fc7f732bf7e svadmin-u-bf600f8e029c svadmin-u-bfa603190748" />
         <input
           type="text"
           bind:value={searchQuery}
           placeholder="Search items..."
-          class="h-8 w-full rounded-md border border-input bg-background pl-8 pr-2 text-xs focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring"
+          class="svadmin-u-ed8a5df7b2fb svadmin-u-6da6a3c3f741 svadmin-u-421ac2be5045 svadmin-u-ca6bcd4b6f3f svadmin-u-e5795dad4d22 svadmin-u-e6f9e383a762 svadmin-u-e4af885410fe svadmin-u-aa2c13a5e1b4 svadmin-u-359090c2d529 svadmin-u-f10f771f87e9 svadmin-u-3e94a98e1466 svadmin-u-9c1295a6914a"
         />
       </div>
     </div>
 
     <!-- Scrollable Items List -->
-    <div class="flex-1 overflow-y-auto divide-y divide-border/40">
+    <div class="svadmin-u-36e579c0b41c svadmin-u-92bf82f493b1 svadmin-u-fa6acbf81d74 svadmin-u-08b5607c7258">
       {#each filteredItems as item (item[idKey])}
         {@const isSelected = String(item[idKey]) === String(activeItem?.[idKey])}
         <button
           type="button"
           class={cn(
-            'w-full text-left p-3 transition-colors cursor-pointer border-0 bg-transparent',
+            'svadmin-u-6da6a3c3f741 svadmin-u-2eba0d65d059 svadmin-u-eb6e8b881acd svadmin-u-ceb69a6b0e5f svadmin-u-34516836730d svadmin-u-119b2aa0b8f6 svadmin-u-7f19cdf4c5bb',
             isSelected
-              ? 'bg-primary/10 border-l-3 border-primary text-foreground font-medium'
-              : 'hover:bg-muted/40 text-muted-foreground'
+              ? 'svadmin-u-375dc44df6e9 svadmin-u-445ec4d497ce svadmin-u-6cbc84dd9e1a svadmin-u-d4108abe6359 svadmin-u-2689f3958069'
+              : 'svadmin-u-f6e31b39b8e4 svadmin-u-bfa603190748'
           )}
           onclick={() => { selectedId = item[idKey] as (string | number); }}
         >
           {#if itemSnippet}
             {@render itemSnippet(item, isSelected)}
           {:else}
-            <div class={cn('font-semibold truncate', isSelected ? 'text-primary' : 'text-foreground')}>
+            <div class={cn('svadmin-u-e83a7042bc91 svadmin-u-f283ea9bea0e', isSelected ? 'svadmin-u-20aaf08a7ed1' : 'svadmin-u-d4108abe6359')}>
               {item[titleKey] ?? item.name ?? `Item #${item[idKey]}`}
             </div>
             {#if item[subtitleKey]}
-              <div class="text-[11px] text-muted-foreground truncate mt-0.5">
+              <div class="svadmin-u-d058ca6de60f svadmin-u-bfa603190748 svadmin-u-f283ea9bea0e svadmin-u-15e1b1f444fe">
                 {item[subtitleKey]}
               </div>
             {/if}
@@ -92,7 +92,7 @@
       {/each}
 
       {#if filteredItems.length === 0}
-        <div class="p-6 text-center text-muted-foreground">
+        <div class="svadmin-u-0478c89a150f svadmin-u-ca6bf63030aa svadmin-u-bfa603190748">
           {emptyText}
         </div>
       {/if}
@@ -100,33 +100,33 @@
   </div>
 
   <!-- Detail Content Panel -->
-  <div class="flex-1 flex flex-col overflow-y-auto p-6 bg-card">
+  <div class="svadmin-u-36e579c0b41c svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-92bf82f493b1 svadmin-u-0478c89a150f svadmin-u-cd0ad9a56558">
     {#if activeItem}
       {#if detailSnippet}
         {@render detailSnippet(activeItem)}
       {:else}
-        <div class="space-y-4">
-          <div class="pb-3 border-b border-border/60">
-            <h3 class="text-base font-semibold text-foreground">
+        <div class="svadmin-u-3e7ce58d64fa">
+          <div class="svadmin-u-7fcf9124b5df svadmin-u-65fdbade2025 svadmin-u-05faf5c801ff">
+            <h3 class="svadmin-u-4ee734926ff6 svadmin-u-e83a7042bc91 svadmin-u-d4108abe6359">
               {activeItem[titleKey] ?? activeItem.name ?? `Item #${activeItem[idKey]}`}
             </h3>
             {#if activeItem[subtitleKey]}
-              <p class="text-xs text-muted-foreground mt-0.5">{activeItem[subtitleKey]}</p>
+              <p class="svadmin-u-359090c2d529 svadmin-u-bfa603190748 svadmin-u-15e1b1f444fe">{activeItem[subtitleKey]}</p>
             {/if}
           </div>
 
-          <div class="grid grid-cols-2 gap-3 text-xs">
+          <div class="svadmin-u-f3c543ad5fe9 svadmin-u-8e75e3db482b svadmin-u-1004c0c3954c svadmin-u-359090c2d529">
             {#each Object.entries(activeItem) as [k, v] (k)}
-              <div class="p-2.5 rounded-lg bg-muted/20 border border-border/40">
-                <span class="text-muted-foreground font-medium block text-[11px] mb-0.5">{k}</span>
-                <span class="font-mono text-foreground break-words">{typeof v === 'object' ? JSON.stringify(v) : String(v ?? '—')}</span>
+              <div class="svadmin-u-9fe52d5d506c svadmin-u-5f22e64f2282 svadmin-u-967d113a1451 svadmin-u-ca6bcd4b6f3f svadmin-u-6ee2d41e2d2d">
+                <span class="svadmin-u-bfa603190748 svadmin-u-2689f3958069 svadmin-u-0214b4b355d1 svadmin-u-d058ca6de60f svadmin-u-166af870e200">{k}</span>
+                <span class="svadmin-u-0e65706bcccd svadmin-u-d4108abe6359 svadmin-u-170cee3ff4e4">{typeof v === 'object' ? JSON.stringify(v) : String(v ?? '—')}</span>
               </div>
             {/each}
           </div>
         </div>
       {/if}
     {:else}
-      <div class="flex-1 flex items-center justify-center text-muted-foreground">
+      <div class="svadmin-u-36e579c0b41c svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-86843cf1e227 svadmin-u-bfa603190748">
         Select an item from the list to view details
       </div>
     {/if}