@svadmin/ui 0.68.1 → 0.69.0

package/dist/components/content/MetricBlock.svelte

@@ -30,15 +30,15 @@
   };
 </script>
 
-<div data-svadmin-metric-card role="region" aria-label={label} class={'min-w-0 rounded-lg border border-border bg-card p-4 shadow-sm ' + className}>
-  <div class="flex items-start justify-between gap-3">
-    <p class="text-sm text-muted-foreground">{label}</p>
-    {#if icon}<span class="text-muted-foreground" aria-hidden="true">{@render icon()}</span>{/if}
+<div data-svadmin-metric-card role="region" aria-label={label} class={'svadmin-u-7e0b7cdf1a94 svadmin-u-5f22e64f2282 svadmin-u-ca6bcd4b6f3f svadmin-u-18049387f0af svadmin-u-cd0ad9a56558 svadmin-u-8e63407b5ceb svadmin-u-438b2237b8d6 ' + className}>
+  <div class="svadmin-u-60fbb7713999 svadmin-u-60541e1e26f8 svadmin-u-8ef2268efbbc svadmin-u-1004c0c3954c">
+    <p class="svadmin-u-fc7473ca09eb svadmin-u-bfa603190748">{label}</p>
+    {#if icon}<span class="svadmin-u-bfa603190748" aria-hidden="true">{@render icon()}</span>{/if}
   </div>
   {#if loading}
-    <Skeleton class="mt-3 h-8 w-24" />
+    <Skeleton class="svadmin-u-eccd13ef4f2f svadmin-u-ed8a5df7b2fb svadmin-u-69da7e4ff95d" />
   {:else}
-    <p class="mt-2 truncate text-2xl font-semibold tracking-normal text-foreground tabular-nums">{value}</p>
-    {#if detail || trend}<div class="mt-2 flex flex-wrap gap-2 text-xs">{#if trend}<span class={'font-medium tabular-nums ' + trendClass[trendTone]}>{trend}</span>{/if}{#if detail}<span class="text-muted-foreground">{detail}</span>{/if}</div>{/if}
+    <p class="svadmin-u-50d0d216a2f8 svadmin-u-f283ea9bea0e svadmin-u-3febee094e85 svadmin-u-e83a7042bc91 svadmin-u-d9256981a032 svadmin-u-d4108abe6359 svadmin-u-3032cae0badb">{value}</p>
+    {#if detail || trend}<div class="svadmin-u-50d0d216a2f8 svadmin-u-60fbb7713999 svadmin-u-1eb5c6df38c1 svadmin-u-77a2a20e90d4 svadmin-u-359090c2d529">{#if trend}<span class={'svadmin-u-2689f3958069 svadmin-u-3032cae0badb ' + trendClass[trendTone]}>{trend}</span>{/if}{#if detail}<span class="svadmin-u-bfa603190748">{detail}</span>{/if}</div>{/if}
   {/if}
 </div>

package/dist/components/content/NetworkTable.svelte

@@ -11,7 +11,7 @@
 {#if resolvedState}
   <DataState state={resolvedState} title={stateTitle ?? emptyTitle} description={stateDescription ?? emptyDescription} {retry} {retryLabel} {loadingLabel} class={className} />
 {:else}
-<div class={'overflow-x-auto rounded-lg border border-border bg-card ' + className}>
+<div class={'svadmin-u-1384f66f41d0 svadmin-u-5f22e64f2282 svadmin-u-ca6bcd4b6f3f svadmin-u-18049387f0af svadmin-u-cd0ad9a56558 ' + className}>
   <Table.Root data-svadmin-datatable>
     <Table.Header data-svadmin-table-head><Table.Row>{#each columns as column (String(column.key))}<Table.Head>{column.label}</Table.Head>{/each}</Table.Row></Table.Header>
     <Table.Body>

package/dist/components/content/NetworkUserCard.svelte

@@ -38,20 +38,20 @@
   const initials = $derived(user.name.split(' ').map((part) => part[0]).join('').slice(0, 2).toUpperCase());
 </script>
 <Card.Card class={className}>
-  <Card.CardContent class="space-y-4 p-4">
-    <div class="flex items-start gap-3">
+  <Card.CardContent class="svadmin-u-3e7ce58d64fa svadmin-u-8e63407b5ceb">
+    <div class="svadmin-u-60fbb7713999 svadmin-u-60541e1e26f8 svadmin-u-1004c0c3954c">
       <Avatar src={user.avatar} alt={user.name} fallback={initials} size="lg" />
-      <div class="min-w-0 flex-1">
-        <div class="flex min-w-0 items-center gap-1.5"><h3 class="truncate text-sm font-semibold text-foreground">{user.name}</h3>{#if verified}<Check class="size-3.5 shrink-0 text-primary" aria-label={verifiedLabel} />{/if}</div>
-        {#if user.handle}<p class="truncate text-xs text-muted-foreground">{user.handle}</p>{/if}
-        {#if user.role}<p class="mt-2 text-xs font-medium text-foreground">{user.role}</p>{/if}
+      <div class="svadmin-u-7e0b7cdf1a94 svadmin-u-36e579c0b41c">
+        <div class="svadmin-u-60fbb7713999 svadmin-u-7e0b7cdf1a94 svadmin-u-3960ffc248d9 svadmin-u-58284b4ea568"><h3 class="svadmin-u-f283ea9bea0e svadmin-u-fc7473ca09eb svadmin-u-e83a7042bc91 svadmin-u-d4108abe6359">{user.name}</h3>{#if verified}<Check class="svadmin-u-783b0d9d1e2c svadmin-u-012fbd121f37 svadmin-u-20aaf08a7ed1" aria-label={verifiedLabel} />{/if}</div>
+        {#if user.handle}<p class="svadmin-u-f283ea9bea0e svadmin-u-359090c2d529 svadmin-u-bfa603190748">{user.handle}</p>{/if}
+        {#if user.role}<p class="svadmin-u-50d0d216a2f8 svadmin-u-359090c2d529 svadmin-u-2689f3958069 svadmin-u-d4108abe6359">{user.role}</p>{/if}
       </div>
-      {#if onmessage}<Button variant="ghost" size="icon-sm" aria-label={'Message ' + user.name} onclick={onmessage}><MessageSquare class="size-4" /></Button>{/if}
+      {#if onmessage}<Button variant="ghost" size="icon-sm" aria-label={'Message ' + user.name} onclick={onmessage}><MessageSquare class="svadmin-u-f7b5fa971871" /></Button>{/if}
     </div>
-    {#if user.summary}<p class="text-sm leading-5 text-muted-foreground">{user.summary}</p>{/if}
-    {#if tags.length > 0}<div class="flex flex-wrap gap-1.5">{#each tags as tag (tag)}<Badge variant="outline">{tag}</Badge>{/each}</div>{/if}
-    {#if metrics.length > 0}<dl class="grid gap-2 border-t border-border pt-3 text-center" style:grid-template-columns={`repeat(${metrics.length}, minmax(0, 1fr))`}>{#each metrics as metric (metric.label)}<div class="min-w-0"><dd class="truncate text-sm font-semibold text-foreground">{metric.value}</dd><dt class="mt-1 truncate text-xs text-muted-foreground">{metric.label}</dt></div>{/each}</dl>{/if}
-    {#if onconnect}<Button size="sm" variant={connected ? 'outline' : 'default'} class="w-full" onclick={onconnect}>{#if connected}<Check class="size-3.5" />{connectedLabel}{:else}<Plus class="size-3.5" />{connectLabel}{/if}</Button>{/if}
-    {#if footer}<div class="border-t border-border pt-3">{@render footer()}</div>{/if}
+    {#if user.summary}<p class="svadmin-u-fc7473ca09eb svadmin-u-7054e2767710 svadmin-u-bfa603190748">{user.summary}</p>{/if}
+    {#if tags.length > 0}<div class="svadmin-u-60fbb7713999 svadmin-u-1eb5c6df38c1 svadmin-u-58284b4ea568">{#each tags as tag (tag)}<Badge variant="outline">{tag}</Badge>{/each}</div>{/if}
+    {#if metrics.length > 0}<dl class="svadmin-u-f3c543ad5fe9 svadmin-u-77a2a20e90d4 svadmin-u-b950dda299d3 svadmin-u-18049387f0af svadmin-u-ce335a8e4f56 svadmin-u-ca6bf63030aa" style:grid-template-columns={`repeat(${metrics.length}, minmax(0, 1fr))`}>{#each metrics as metric (metric.label)}<div class="svadmin-u-7e0b7cdf1a94"><dd class="svadmin-u-f283ea9bea0e svadmin-u-fc7473ca09eb svadmin-u-e83a7042bc91 svadmin-u-d4108abe6359">{metric.value}</dd><dt class="svadmin-u-b6b02c0ebef6 svadmin-u-f283ea9bea0e svadmin-u-359090c2d529 svadmin-u-bfa603190748">{metric.label}</dt></div>{/each}</dl>{/if}
+    {#if onconnect}<Button size="sm" variant={connected ? 'outline' : 'default'} class="svadmin-u-6da6a3c3f741" onclick={onconnect}>{#if connected}<Check class="svadmin-u-783b0d9d1e2c" />{connectedLabel}{:else}<Plus class="svadmin-u-783b0d9d1e2c" />{connectLabel}{/if}</Button>{/if}
+    {#if footer}<div class="svadmin-u-b950dda299d3 svadmin-u-18049387f0af svadmin-u-ce335a8e4f56">{@render footer()}</div>{/if}
   </Card.CardContent>
 </Card.Card>

package/dist/components/content/OtpInput.svelte

@@ -57,10 +57,10 @@
   }
 </script>
 
-<div class={'flex justify-center gap-2 ' + className} role="group" aria-label={ariaLabel}>
+<div class={'svadmin-u-60fbb7713999 svadmin-u-86843cf1e227 svadmin-u-77a2a20e90d4 ' + className} role="group" aria-label={ariaLabel}>
   {#each slots as index (index)}
     <Input
-      class="size-12 text-center text-lg font-semibold tabular-nums"
+      class="svadmin-u-9939b97359ce svadmin-u-ca6bf63030aa svadmin-u-42536e69e639 svadmin-u-e83a7042bc91 svadmin-u-3032cae0badb"
       value={value[index] ?? ''}
       maxlength={1}
       inputmode="numeric"

package/dist/components/content/PageToolbar.svelte

@@ -9,10 +9,10 @@
   let { leading, trailing, children, class: className = '' }: Props = $props();
 </script>
 
-<div data-svadmin-table-toolbar class={'flex flex-col gap-3 rounded-lg border border-border bg-card p-3 shadow-sm sm:flex-row sm:items-center sm:justify-between ' + className}>
-  <div class="flex min-w-0 flex-1 flex-wrap items-center gap-2">
+<div data-svadmin-table-toolbar class={'svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-1004c0c3954c svadmin-u-5f22e64f2282 svadmin-u-ca6bcd4b6f3f svadmin-u-18049387f0af svadmin-u-cd0ad9a56558 svadmin-u-eb6e8b881acd svadmin-u-438b2237b8d6 svadmin-u-020ba687fa12 svadmin-u-9f76a62f4f44 svadmin-u-3b9871a0bf93 ' + className}>
+  <div class="svadmin-u-60fbb7713999 svadmin-u-7e0b7cdf1a94 svadmin-u-36e579c0b41c svadmin-u-1eb5c6df38c1 svadmin-u-3960ffc248d9 svadmin-u-77a2a20e90d4">
     {#if leading}{@render leading()}{/if}
     {#if children}{@render children()}{/if}
   </div>
-  {#if trailing}<div class="flex shrink-0 flex-wrap items-center gap-2">{@render trailing()}</div>{/if}
+  {#if trailing}<div class="svadmin-u-60fbb7713999 svadmin-u-012fbd121f37 svadmin-u-1eb5c6df38c1 svadmin-u-3960ffc248d9 svadmin-u-77a2a20e90d4">{@render trailing()}</div>{/if}
 </div>

package/dist/components/content/ProjectCard.svelte

@@ -22,19 +22,19 @@
   let { project, onclick, class: className = '' }: Props = $props();
   const progress = $derived(project.progress ?? (project.status === 'completed' ? 100 : project.status === 'active' ? 72 : 0));
 </script>
-<Card.Card data-interactive={onclick ? 'true' : undefined} class={'h-full ' + className}>
-  {#if project.image}<div class="h-32 w-full"><MediaThumbnail src={project.image} alt={project.name} size="full" fit="cover" showOverlay={false} /></div>{/if}
-  <Card.CardContent class="flex h-full flex-col gap-4 p-4">
-    <div class="flex items-start justify-between gap-3">
-      <div class="flex min-w-0 items-center gap-3"><span class="flex size-9 shrink-0 items-center justify-center rounded-md border border-border bg-muted/50 text-muted-foreground"><FolderKanban class="size-4" /></span><h3 class="truncate text-sm font-semibold text-foreground">{project.name}</h3></div>
+<Card.Card data-interactive={onclick ? 'true' : undefined} class={'svadmin-u-668b21aa5409 ' + className}>
+  {#if project.image}<div class="svadmin-u-b5f3ff77f4f9 svadmin-u-6da6a3c3f741"><MediaThumbnail src={project.image} alt={project.name} size="full" fit="cover" showOverlay={false} /></div>{/if}
+  <Card.CardContent class="svadmin-u-60fbb7713999 svadmin-u-668b21aa5409 svadmin-u-8dddea0773ed svadmin-u-0c3bc98565dd svadmin-u-8e63407b5ceb">
+    <div class="svadmin-u-60fbb7713999 svadmin-u-60541e1e26f8 svadmin-u-8ef2268efbbc svadmin-u-1004c0c3954c">
+      <div class="svadmin-u-60fbb7713999 svadmin-u-7e0b7cdf1a94 svadmin-u-3960ffc248d9 svadmin-u-1004c0c3954c"><span class="svadmin-u-60fbb7713999 svadmin-u-665f07fe73cc svadmin-u-012fbd121f37 svadmin-u-3960ffc248d9 svadmin-u-86843cf1e227 svadmin-u-421ac2be5045 svadmin-u-ca6bcd4b6f3f svadmin-u-18049387f0af svadmin-u-358af0b65a31 svadmin-u-bfa603190748"><FolderKanban class="svadmin-u-f7b5fa971871" /></span><h3 class="svadmin-u-f283ea9bea0e svadmin-u-fc7473ca09eb svadmin-u-e83a7042bc91 svadmin-u-d4108abe6359">{project.name}</h3></div>
       <StatusBadge status={project.status === 'active' ? 'success' : project.status === 'completed' ? 'info' : project.status === 'on-hold' ? 'warning' : 'neutral'} label={project.status} />
     </div>
-    {#if project.description}<p class="line-clamp-2 text-sm text-muted-foreground">{project.description}</p>{/if}
-    {#if project.tags?.length}<div class="flex flex-wrap gap-1.5">{#each project.tags as tag (tag)}<Badge variant="outline">{tag}</Badge>{/each}</div>{/if}
-    <div class="mt-auto space-y-2">
-      <div class="flex items-center justify-between text-xs text-muted-foreground"><span>Progress</span><span class="font-medium text-foreground">{progress}%</span></div>
-      <Progress value={progress} class="h-1.5" />
-      <div class="flex items-center justify-between border-t border-border pt-3 text-xs text-muted-foreground"><span class="flex items-center gap-1"><Users class="size-3.5" />{project.members ?? 0}</span><span class="flex items-center gap-1"><CheckCircle2 class="size-3.5" />{project.tasks ?? 0}</span>{#if onclick}<Button variant="ghost" size="icon-sm" aria-label={project.name} onclick={onclick}><ArrowRight class="size-3.5" /></Button>{/if}</div>
+    {#if project.description}<p class="svadmin-u-054cb4e36116 svadmin-u-fc7473ca09eb svadmin-u-bfa603190748">{project.description}</p>{/if}
+    {#if project.tags?.length}<div class="svadmin-u-60fbb7713999 svadmin-u-1eb5c6df38c1 svadmin-u-58284b4ea568">{#each project.tags as tag (tag)}<Badge variant="outline">{tag}</Badge>{/each}</div>{/if}
+    <div class="svadmin-u-9953408a8ef3 svadmin-u-6f7e013d6499">
+      <div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-8ef2268efbbc svadmin-u-359090c2d529 svadmin-u-bfa603190748"><span>Progress</span><span class="svadmin-u-2689f3958069 svadmin-u-d4108abe6359">{progress}%</span></div>
+      <Progress value={progress} class="svadmin-u-095acb275581" />
+      <div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-8ef2268efbbc svadmin-u-b950dda299d3 svadmin-u-18049387f0af svadmin-u-ce335a8e4f56 svadmin-u-359090c2d529 svadmin-u-bfa603190748"><span class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-44ee8ba0a421"><Users class="svadmin-u-783b0d9d1e2c" />{project.members ?? 0}</span><span class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-44ee8ba0a421"><CheckCircle2 class="svadmin-u-783b0d9d1e2c" />{project.tasks ?? 0}</span>{#if onclick}<Button variant="ghost" size="icon-sm" aria-label={project.name} onclick={onclick}><ArrowRight class="svadmin-u-783b0d9d1e2c" /></Button>{/if}</div>
     </div>
   </Card.CardContent>
 </Card.Card>

package/dist/components/content/SectionHeader.svelte

@@ -10,10 +10,10 @@
   let { title, description, actions, id, class: className = '' }: Props = $props();
 </script>
 
-<div class={'flex flex-col gap-3 sm:flex-row sm:items-start sm:justify-between ' + className}>
-  <div class="min-w-0 space-y-1">
-    <h2 {id} class="text-base font-semibold text-foreground">{title}</h2>
-    {#if description}<p class="text-sm text-muted-foreground">{description}</p>{/if}
+<div class={'svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-1004c0c3954c svadmin-u-020ba687fa12 svadmin-u-64cac80d2e9a svadmin-u-3b9871a0bf93 ' + className}>
+  <div class="svadmin-u-7e0b7cdf1a94 svadmin-u-da7c36cd8867">
+    <h2 {id} class="svadmin-u-4ee734926ff6 svadmin-u-e83a7042bc91 svadmin-u-d4108abe6359">{title}</h2>
+    {#if description}<p class="svadmin-u-fc7473ca09eb svadmin-u-bfa603190748">{description}</p>{/if}
   </div>
-  {#if actions}<div class="flex shrink-0 flex-wrap items-center gap-2">{@render actions()}</div>{/if}
+  {#if actions}<div class="svadmin-u-60fbb7713999 svadmin-u-012fbd121f37 svadmin-u-1eb5c6df38c1 svadmin-u-3960ffc248d9 svadmin-u-77a2a20e90d4">{@render actions()}</div>{/if}
 </div>

package/dist/components/content/SecurityEventTable.svelte

@@ -14,12 +14,12 @@
 {#if resolvedState}
   <DataState state={resolvedState} title={stateTitle ?? emptyTitle} description={stateDescription ?? emptyDescription} {retry} {retryLabel} {loadingLabel} class={className} />
 {:else}
-<div class={'overflow-x-auto rounded-lg border border-border bg-card ' + className}>
+<div class={'svadmin-u-1384f66f41d0 svadmin-u-5f22e64f2282 svadmin-u-ca6bcd4b6f3f svadmin-u-18049387f0af svadmin-u-cd0ad9a56558 ' + className}>
   <Table.Root data-svadmin-datatable>
     <Table.Header data-svadmin-table-head><Table.Row><Table.Head>{isZh ? '事件' : 'Event'}</Table.Head><Table.Head>{isZh ? '操作者' : 'Actor'}</Table.Head><Table.Head>{isZh ? '位置' : 'Location'}</Table.Head><Table.Head>{isZh ? '时间' : 'Time'}</Table.Head><Table.Head>{isZh ? '风险' : 'Risk'}</Table.Head></Table.Row></Table.Header>
     <Table.Body>
       {#each events as event (event.id)}
-        <Table.Row data-svadmin-table-row><Table.Cell class="font-medium">{event.event}</Table.Cell><Table.Cell>{event.actor ?? (isZh ? '系统' : 'System')}</Table.Cell><Table.Cell>{event.location ?? (isZh ? '未知' : 'Unknown')}</Table.Cell><Table.Cell class="whitespace-nowrap">{event.createdAt}</Table.Cell><Table.Cell><StatusBadge status={event.severity} label={event.severity} /></Table.Cell></Table.Row>
+        <Table.Row data-svadmin-table-row><Table.Cell class="svadmin-u-2689f3958069">{event.event}</Table.Cell><Table.Cell>{event.actor ?? (isZh ? '系统' : 'System')}</Table.Cell><Table.Cell>{event.location ?? (isZh ? '未知' : 'Unknown')}</Table.Cell><Table.Cell class="svadmin-u-e82ae8be04aa">{event.createdAt}</Table.Cell><Table.Cell><StatusBadge status={event.severity} label={event.severity} /></Table.Cell></Table.Row>
       {/each}
     </Table.Body>
   </Table.Root>

package/dist/components/content/SettingsFieldRow.svelte

@@ -19,10 +19,10 @@
   }: Props = $props();
 </script>
 
-<div class={cn('flex min-h-11 items-center justify-between gap-4 py-3', separated && 'border-t border-border', className)} data-svadmin-settings-field-row>
-  <div class="min-w-0">
-    <p class="text-sm font-medium text-foreground">{label}</p>
-    {#if description}<p class="mt-1 max-w-2xl text-sm leading-5 text-muted-foreground">{description}</p>{/if}
+<div class={cn('svadmin-u-60fbb7713999 svadmin-u-0e5b245b4ed1 svadmin-u-3960ffc248d9 svadmin-u-8ef2268efbbc svadmin-u-0c3bc98565dd svadmin-u-1b2d54a3fd12', separated && 'svadmin-u-b950dda299d3 svadmin-u-18049387f0af', className)} data-svadmin-settings-field-row>
+  <div class="svadmin-u-7e0b7cdf1a94">
+    <p class="svadmin-u-fc7473ca09eb svadmin-u-2689f3958069 svadmin-u-d4108abe6359">{label}</p>
+    {#if description}<p class="svadmin-u-b6b02c0ebef6 svadmin-u-2cc8041eca99 svadmin-u-fc7473ca09eb svadmin-u-7054e2767710 svadmin-u-bfa603190748">{description}</p>{/if}
   </div>
-  <div class="shrink-0">{@render control()}</div>
+  <div class="svadmin-u-012fbd121f37">{@render control()}</div>
 </div>

package/dist/components/content/SettingsGroup.svelte

@@ -21,13 +21,13 @@
   }: Props = $props();
 </script>
 
-<section class={cn('overflow-hidden rounded-lg border border-border bg-card shadow-sm', className)} data-svadmin-settings-group>
-  <header class="flex flex-col gap-3 border-b border-border px-5 py-4 sm:flex-row sm:items-start sm:justify-between">
-    <div class="min-w-0 space-y-1">
-      <h2 class="text-sm font-semibold text-foreground">{title}</h2>
-      {#if description}<p class="max-w-2xl text-sm leading-6 text-muted-foreground">{description}</p>{/if}
+<section class={cn('svadmin-u-2cd02d11d1af svadmin-u-5f22e64f2282 svadmin-u-ca6bcd4b6f3f svadmin-u-18049387f0af svadmin-u-cd0ad9a56558 svadmin-u-438b2237b8d6', className)} data-svadmin-settings-group>
+  <header class="svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-1004c0c3954c svadmin-u-65fdbade2025 svadmin-u-18049387f0af svadmin-u-d139dd09e38d svadmin-u-cb11fec3bb46 svadmin-u-020ba687fa12 svadmin-u-64cac80d2e9a svadmin-u-3b9871a0bf93">
+    <div class="svadmin-u-7e0b7cdf1a94 svadmin-u-da7c36cd8867">
+      <h2 class="svadmin-u-fc7473ca09eb svadmin-u-e83a7042bc91 svadmin-u-d4108abe6359">{title}</h2>
+      {#if description}<p class="svadmin-u-2cc8041eca99 svadmin-u-fc7473ca09eb svadmin-u-18550d5945ae svadmin-u-bfa603190748">{description}</p>{/if}
     </div>
-    {#if actions}<div class="flex shrink-0 flex-wrap items-center gap-2">{@render actions()}</div>{/if}
+    {#if actions}<div class="svadmin-u-60fbb7713999 svadmin-u-012fbd121f37 svadmin-u-1eb5c6df38c1 svadmin-u-3960ffc248d9 svadmin-u-77a2a20e90d4">{@render actions()}</div>{/if}
   </header>
-  <div class={cn('p-5', bodyClass)}>{@render children()}</div>
+  <div class={cn('svadmin-u-c07e54fd1439', bodyClass)}>{@render children()}</div>
 </section>

package/dist/components/content/StatusBadge.svelte

@@ -8,12 +8,12 @@
   }
   let { status, label = status, class: className = '' }: Props = $props();
   const toneClass: Record<Status, string> = {
-    success: 'border-success/30 bg-success/10 text-success',
-    warning: 'border-warning/30 bg-warning/10 text-warning-foreground',
-    danger: 'border-destructive/30 bg-destructive/10 text-destructive',
-    info: 'border-primary/30 bg-primary/10 text-primary',
-    neutral: 'border-border bg-muted text-muted-foreground',
+    success: 'svadmin-u-18a6e7a36f29 svadmin-u-17a9f7af2265 svadmin-u-76747e5e02ff',
+    warning: 'svadmin-u-2f960aa0c478 svadmin-u-283481e780bb svadmin-u-3a4ff758c2ab',
+    danger: 'svadmin-u-9d5d8b4711b4 svadmin-u-43928fcc832f svadmin-u-811148b13d1e',
+    info: 'svadmin-u-05f954a846d6 svadmin-u-375dc44df6e9 svadmin-u-20aaf08a7ed1',
+    neutral: 'svadmin-u-18049387f0af svadmin-u-2ef11f1cb219 svadmin-u-bfa603190748',
   };
 </script>
 
-<Badge variant="outline" class={'font-medium ' + toneClass[status] + ' ' + className}>{label}</Badge>
+<Badge variant="outline" class={'svadmin-u-2689f3958069 ' + toneClass[status] + ' ' + className}>{label}</Badge>

package/dist/components/content/StatusTabs.svelte

@@ -65,28 +65,28 @@
 
   const toneClasses: Record<string, { activeBadge: string; inactiveBadge: string }> = {
     default: {
-      activeBadge: 'bg-primary/20 text-primary',
-      inactiveBadge: 'bg-muted text-muted-foreground',
+      activeBadge: 'svadmin-u-6a1572b6bf5a svadmin-u-20aaf08a7ed1',
+      inactiveBadge: 'svadmin-u-2ef11f1cb219 svadmin-u-bfa603190748',
     },
     success: {
-      activeBadge: 'bg-success/25 text-success',
-      inactiveBadge: 'bg-success/10 text-success',
+      activeBadge: 'svadmin-u-68750801bcf6 svadmin-u-76747e5e02ff',
+      inactiveBadge: 'svadmin-u-17a9f7af2265 svadmin-u-76747e5e02ff',
     },
     warning: {
-      activeBadge: 'bg-warning/25 text-warning-foreground',
-      inactiveBadge: 'bg-warning/10 text-warning-foreground',
+      activeBadge: 'svadmin-u-3bb45dd48a74 svadmin-u-3a4ff758c2ab',
+      inactiveBadge: 'svadmin-u-283481e780bb svadmin-u-3a4ff758c2ab',
     },
     destructive: {
-      activeBadge: 'bg-destructive/25 text-destructive',
-      inactiveBadge: 'bg-destructive/10 text-destructive',
+      activeBadge: 'svadmin-u-f71dfc1f3d97 svadmin-u-811148b13d1e',
+      inactiveBadge: 'svadmin-u-43928fcc832f svadmin-u-811148b13d1e',
     },
     info: {
-      activeBadge: 'bg-info/25 text-info',
-      inactiveBadge: 'bg-info/10 text-info',
+      activeBadge: 'svadmin-u-ab159a179155 svadmin-u-fa68ba954fb0',
+      inactiveBadge: 'svadmin-u-1c1af10f0ece svadmin-u-fa68ba954fb0',
     },
     muted: {
-      activeBadge: 'bg-muted text-foreground',
-      inactiveBadge: 'bg-muted/50 text-muted-foreground',
+      activeBadge: 'svadmin-u-2ef11f1cb219 svadmin-u-d4108abe6359',
+      inactiveBadge: 'svadmin-u-358af0b65a31 svadmin-u-bfa603190748',
     },
   };
 </script>
@@ -98,9 +98,9 @@
   data-density={density}
   data-variant={variant}
   class={cn(
-    'flex items-center gap-1 overflow-x-auto',
-    variant === 'segmented' && 'rounded-lg bg-muted p-1',
-    variant === 'underline' && 'border-b border-border gap-2',
+    'svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-44ee8ba0a421 svadmin-u-1384f66f41d0',
+    variant === 'segmented' && 'svadmin-u-5f22e64f2282 svadmin-u-2ef11f1cb219 svadmin-u-eb6a3cef9686',
+    variant === 'underline' && 'svadmin-u-65fdbade2025 svadmin-u-18049387f0af svadmin-u-77a2a20e90d4',
     className
   )}
 >
@@ -117,25 +117,25 @@
       onclick={() => selectTab(item.key, item.disabled)}
       onkeydown={handleKeydown}
       class={cn(
-        'inline-flex items-center gap-1.5 whitespace-nowrap font-medium transition-colors cursor-pointer outline-none focus-visible:ring-2 focus-visible:ring-ring/50 disabled:pointer-events-none disabled:opacity-50',
-        isCompact ? 'text-xs px-2.5 py-1' : 'text-sm px-3 py-1.5',
+        'svadmin-u-52083e7da442 svadmin-u-3960ffc248d9 svadmin-u-58284b4ea568 svadmin-u-e82ae8be04aa svadmin-u-2689f3958069 svadmin-u-ceb69a6b0e5f svadmin-u-34516836730d svadmin-u-df37b1fd9495 svadmin-u-793c80e97ffb svadmin-u-ddac70ae5d29 svadmin-u-49330148794a svadmin-u-b29d8adbad2e',
+        isCompact ? 'svadmin-u-359090c2d529 svadmin-u-0b91436debbd svadmin-u-660d2effb880' : 'svadmin-u-fc7473ca09eb svadmin-u-0e17f2bd9074 svadmin-u-ec0091ee009b',
         variant === 'pills' && [
-          'rounded-md border',
+          'svadmin-u-421ac2be5045 svadmin-u-ca6bcd4b6f3f',
           active
-            ? 'border-border bg-background text-foreground shadow-xs font-semibold'
-            : 'border-transparent text-muted-foreground hover:bg-muted/50 hover:text-foreground',
+            ? 'svadmin-u-18049387f0af svadmin-u-e6f9e383a762 svadmin-u-d4108abe6359 svadmin-u-cef5b893cf23 svadmin-u-e83a7042bc91'
+            : 'svadmin-u-521fa0c7c407 svadmin-u-bfa603190748 svadmin-u-39f703dbe296 svadmin-u-ea7b2e9e070e',
         ],
         variant === 'segmented' && [
-          'rounded-md',
+          'svadmin-u-421ac2be5045',
           active
-            ? 'bg-background text-foreground shadow-xs font-semibold'
-            : 'text-muted-foreground hover:text-foreground',
+            ? 'svadmin-u-e6f9e383a762 svadmin-u-d4108abe6359 svadmin-u-cef5b893cf23 svadmin-u-e83a7042bc91'
+            : 'svadmin-u-bfa603190748 svadmin-u-ea7b2e9e070e',
         ],
         variant === 'underline' && [
-          '-mb-px border-b-2 rounded-none px-3 pb-2 pt-1',
+          'svadmin-u-f04f99ff45cb svadmin-u-65ac0c49a5d5 svadmin-u-0c5e9137c7de svadmin-u-0e17f2bd9074 svadmin-u-f4cc511ff0c1 svadmin-u-6b7d6e21ccbd',
           active
-            ? 'border-primary text-primary font-semibold'
-            : 'border-transparent text-muted-foreground hover:text-foreground hover:border-muted-foreground/30',
+            ? 'svadmin-u-6cbc84dd9e1a svadmin-u-20aaf08a7ed1 svadmin-u-e83a7042bc91'
+            : 'svadmin-u-521fa0c7c407 svadmin-u-bfa603190748 svadmin-u-ea7b2e9e070e svadmin-u-03b959081b5e',
         ]
       )}
     >
@@ -143,8 +143,8 @@
       {#if item.count !== undefined}
         <span
           class={cn(
-            'inline-flex items-center justify-center rounded-full font-semibold tabular-nums leading-none',
-            isCompact ? 'min-w-4 px-1 py-0.5 text-[10px]' : 'min-w-5 px-1.5 py-0.5 text-xs',
+            'svadmin-u-52083e7da442 svadmin-u-3960ffc248d9 svadmin-u-86843cf1e227 svadmin-u-ac204c108886 svadmin-u-e83a7042bc91 svadmin-u-3032cae0badb svadmin-u-c2385a463da8',
+            isCompact ? 'svadmin-u-69aaf7265e58 svadmin-u-d8e0e382c67b svadmin-u-465609a240a8 svadmin-u-1dc571a3609f' : 'svadmin-u-f8516763aedd svadmin-u-45d828117213 svadmin-u-465609a240a8 svadmin-u-359090c2d529',
             active ? badgeTone.activeBadge : badgeTone.inactiveBadge
           )}
         >

package/dist/components/content/SystemErrorState.svelte

@@ -13,6 +13,6 @@
   const resolvedTitle = $derived(title ?? (isNotFound ? i18n.t('common.pageNotFound') : i18n.t('common.error')));
   const resolvedDescription = $derived(description ?? (isNotFound ? i18n.t('error.pageNotFoundDescription') : i18n.t('error.internalServerErrorDescription')));
 </script>
-<div class="flex items-center justify-center p-4" data-svadmin-system-error>
-  <Card.Card class="w-full max-w-md"><Card.CardContent class="space-y-5 p-8 text-center"><div class="mx-auto flex size-14 items-center justify-center rounded-lg bg-muted text-muted-foreground">{#if isNotFound}<FileQuestion class="size-7" />{:else}<AlertTriangle class="size-7 text-destructive" />{/if}</div><div class="space-y-2"><p class="text-xs font-medium text-muted-foreground">{status}</p><h2 class="text-xl font-semibold text-foreground">{resolvedTitle}</h2><p class="text-sm leading-6 text-muted-foreground">{resolvedDescription}</p></div>{#if action}<div>{@render action()}</div>{/if}<div class="flex flex-wrap justify-center gap-2"><Button variant="outline" onclick={() => adminContext.back()}><ArrowLeft class="size-4" />{i18n.t('common.back')}</Button><Button onclick={() => adminContext.navigate('/')}><Home class="size-4" />{i18n.t('common.returnHome')}</Button></div></Card.CardContent></Card.Card>
+<div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-86843cf1e227 svadmin-u-8e63407b5ceb" data-svadmin-system-error>
+  <Card.Card class="svadmin-u-6da6a3c3f741 svadmin-u-9794ab45094d"><Card.CardContent class="svadmin-u-b43b4c086d9a svadmin-u-845f53365c8d svadmin-u-ca6bf63030aa"><div class="svadmin-u-0e12dc7de920 svadmin-u-60fbb7713999 svadmin-u-7a9ad020b130 svadmin-u-3960ffc248d9 svadmin-u-86843cf1e227 svadmin-u-5f22e64f2282 svadmin-u-2ef11f1cb219 svadmin-u-bfa603190748">{#if isNotFound}<FileQuestion class="svadmin-u-cc46d0fa277d" />{:else}<AlertTriangle class="svadmin-u-cc46d0fa277d svadmin-u-811148b13d1e" />{/if}</div><div class="svadmin-u-6f7e013d6499"><p class="svadmin-u-359090c2d529 svadmin-u-2689f3958069 svadmin-u-bfa603190748">{status}</p><h2 class="svadmin-u-d5c9b0001e7e svadmin-u-e83a7042bc91 svadmin-u-d4108abe6359">{resolvedTitle}</h2><p class="svadmin-u-fc7473ca09eb svadmin-u-18550d5945ae svadmin-u-bfa603190748">{resolvedDescription}</p></div>{#if action}<div>{@render action()}</div>{/if}<div class="svadmin-u-60fbb7713999 svadmin-u-1eb5c6df38c1 svadmin-u-86843cf1e227 svadmin-u-77a2a20e90d4"><Button variant="outline" onclick={() => adminContext.back()}><ArrowLeft class="svadmin-u-f7b5fa971871" />{i18n.t('common.back')}</Button><Button onclick={() => adminContext.navigate('/')}><Home class="svadmin-u-f7b5fa971871" />{i18n.t('common.returnHome')}</Button></div></Card.CardContent></Card.Card>
 </div>

package/dist/components/content/TeamCard.svelte

@@ -16,11 +16,11 @@
   let { team, onjoin, onclick, class: className = '' }: Props = $props();
   const initials = (name: string) => name.split(' ').map((part) => part[0]).join('').slice(0, 2).toUpperCase();
 </script>
-<Card.Card data-interactive={onclick ? 'true' : undefined} class={'h-full ' + className}>
-  <Card.CardContent class="flex h-full flex-col gap-3 p-4">
-    <div class="flex items-start gap-3"><span class="flex size-9 shrink-0 items-center justify-center rounded-md bg-primary/10 text-primary" style:background-color={team.color ? `${team.color}20` : undefined}><Users class="size-4" style={team.color ? `color: ${team.color}` : undefined} /></span><div class="min-w-0 flex-1"><h3 class="truncate text-sm font-semibold text-foreground">{team.name}</h3><p class="text-xs text-muted-foreground">{team.totalMembers ?? team.members?.length ?? 0} members</p></div>{#if team.rating}<span class="text-xs font-semibold text-warning">{team.rating}</span>{/if}</div>
-    {#if team.description}<p class="line-clamp-2 text-sm text-muted-foreground">{team.description}</p>{/if}
-    <div class="flex items-center gap-1">{#each (team.members ?? []).slice(0, 5) as member, index (member.id ?? member.name + '-' + index)}<Avatar src={member.avatar} alt={member.name} fallback={initials(member.name)} size="sm" class="-mr-1 ring-2 ring-card" />{/each}</div>
-    <div class="mt-auto flex gap-2 border-t border-border pt-3">{#if onjoin}<Button variant="outline" size="sm" class="flex-1" onclick={onjoin}>Join</Button>{/if}{#if onclick}<Button variant="ghost" size="sm" class="flex-1" onclick={onclick}>View <ArrowRight class="size-3.5" /></Button>{/if}</div>
+<Card.Card data-interactive={onclick ? 'true' : undefined} class={'svadmin-u-668b21aa5409 ' + className}>
+  <Card.CardContent class="svadmin-u-60fbb7713999 svadmin-u-668b21aa5409 svadmin-u-8dddea0773ed svadmin-u-1004c0c3954c svadmin-u-8e63407b5ceb">
+    <div class="svadmin-u-60fbb7713999 svadmin-u-60541e1e26f8 svadmin-u-1004c0c3954c"><span class="svadmin-u-60fbb7713999 svadmin-u-665f07fe73cc svadmin-u-012fbd121f37 svadmin-u-3960ffc248d9 svadmin-u-86843cf1e227 svadmin-u-421ac2be5045 svadmin-u-375dc44df6e9 svadmin-u-20aaf08a7ed1" style:background-color={team.color ? `${team.color}20` : undefined}><Users class="svadmin-u-f7b5fa971871" style={team.color ? `color: ${team.color}` : undefined} /></span><div class="svadmin-u-7e0b7cdf1a94 svadmin-u-36e579c0b41c"><h3 class="svadmin-u-f283ea9bea0e svadmin-u-fc7473ca09eb svadmin-u-e83a7042bc91 svadmin-u-d4108abe6359">{team.name}</h3><p class="svadmin-u-359090c2d529 svadmin-u-bfa603190748">{team.totalMembers ?? team.members?.length ?? 0} members</p></div>{#if team.rating}<span class="svadmin-u-359090c2d529 svadmin-u-e83a7042bc91 svadmin-u-918184635b1d">{team.rating}</span>{/if}</div>
+    {#if team.description}<p class="svadmin-u-054cb4e36116 svadmin-u-fc7473ca09eb svadmin-u-bfa603190748">{team.description}</p>{/if}
+    <div class="svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-44ee8ba0a421">{#each (team.members ?? []).slice(0, 5) as member, index (member.id ?? member.name + '-' + index)}<Avatar src={member.avatar} alt={member.name} fallback={initials(member.name)} size="sm" class="svadmin-u-8956a4275b9d svadmin-u-16b1efa5875e svadmin-u-21752b56424c" />{/each}</div>
+    <div class="svadmin-u-9953408a8ef3 svadmin-u-60fbb7713999 svadmin-u-77a2a20e90d4 svadmin-u-b950dda299d3 svadmin-u-18049387f0af svadmin-u-ce335a8e4f56">{#if onjoin}<Button variant="outline" size="sm" class="svadmin-u-36e579c0b41c" onclick={onjoin}>Join</Button>{/if}{#if onclick}<Button variant="ghost" size="sm" class="svadmin-u-36e579c0b41c" onclick={onclick}>View <ArrowRight class="svadmin-u-783b0d9d1e2c" /></Button>{/if}</div>
   </Card.CardContent>
 </Card.Card>

package/dist/components/content/TwoFactorStepper.svelte

@@ -2,10 +2,10 @@
   interface Props { current: number; steps?: string[]; class?: string; }
   let { current, steps = ['Setup', 'Verify', 'Recovery'], class: className = '' }: Props = $props();
 </script>
-<ol class={'grid gap-2 sm:grid-cols-3 ' + className} aria-label="Progress">
+<ol class={'svadmin-u-f3c543ad5fe9 svadmin-u-77a2a20e90d4 svadmin-u-ab1b20c2292a ' + className} aria-label="Progress">
   {#each steps as step, index (step)}
-    <li class={'flex items-center gap-2 rounded-md border px-3 py-2 text-xs ' + (index < current ? 'border-success/30 bg-success/10 text-success' : index === current ? 'border-primary/30 bg-primary/10 font-medium text-primary' : 'border-border text-muted-foreground')}>
-      <span class="flex size-5 shrink-0 items-center justify-center rounded-full border text-[11px]">{index + 1}</span><span class="truncate">{step}</span>
+    <li class={'svadmin-u-60fbb7713999 svadmin-u-3960ffc248d9 svadmin-u-77a2a20e90d4 svadmin-u-421ac2be5045 svadmin-u-ca6bcd4b6f3f svadmin-u-0e17f2bd9074 svadmin-u-03b4dd7f172b svadmin-u-359090c2d529 ' + (index < current ? 'svadmin-u-18a6e7a36f29 svadmin-u-17a9f7af2265 svadmin-u-76747e5e02ff' : index === current ? 'svadmin-u-05f954a846d6 svadmin-u-375dc44df6e9 svadmin-u-2689f3958069 svadmin-u-20aaf08a7ed1' : 'svadmin-u-18049387f0af svadmin-u-bfa603190748')}>
+      <span class="svadmin-u-60fbb7713999 svadmin-u-add63bc6753d svadmin-u-012fbd121f37 svadmin-u-3960ffc248d9 svadmin-u-86843cf1e227 svadmin-u-ac204c108886 svadmin-u-ca6bcd4b6f3f svadmin-u-d058ca6de60f">{index + 1}</span><span class="svadmin-u-f283ea9bea0e">{step}</span>
     </li>
   {/each}
 </ol>

package/dist/components/content/WorkspaceActionBar.svelte

@@ -27,31 +27,31 @@
   }: Props = $props();
 
   const toneClassMap: Record<WorkspaceActionBarTone, string> = {
-    default: 'bg-muted text-muted-foreground',
-    warning: 'bg-warning/15 text-warning-foreground',
-    success: 'bg-success/15 text-success',
-    destructive: 'bg-destructive/15 text-destructive',
-    info: 'bg-info/15 text-info',
+    default: 'svadmin-u-2ef11f1cb219 svadmin-u-bfa603190748',
+    warning: 'svadmin-u-d9c3c520f7d5 svadmin-u-3a4ff758c2ab',
+    success: 'svadmin-u-4cf5af8d25d3 svadmin-u-76747e5e02ff',
+    destructive: 'svadmin-u-c698f77c9ba5 svadmin-u-811148b13d1e',
+    info: 'svadmin-u-269105289e8f svadmin-u-fa68ba954fb0',
   };
 </script>
 
 <section
-  class={cn('flex flex-col gap-3 border-y border-border bg-card px-4 py-3 sm:flex-row sm:items-center sm:justify-between', className)}
+  class={cn('svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-1004c0c3954c svadmin-u-8b8196092091 svadmin-u-18049387f0af svadmin-u-cd0ad9a56558 svadmin-u-f0faeb26d656 svadmin-u-1b2d54a3fd12 svadmin-u-020ba687fa12 svadmin-u-9f76a62f4f44 svadmin-u-3b9871a0bf93', className)}
   aria-label={title}
   data-svadmin-workspace-action-bar
 >
-  <div class="min-w-0">
-    <div class="flex flex-wrap items-center gap-2">
+  <div class="svadmin-u-7e0b7cdf1a94">
+    <div class="svadmin-u-60fbb7713999 svadmin-u-1eb5c6df38c1 svadmin-u-3960ffc248d9 svadmin-u-77a2a20e90d4">
       {#if status}
-        <span class={cn('rounded-sm px-2 py-0.5 text-xs font-medium', toneClassMap[statusTone] || toneClassMap.warning)}>
+        <span class={cn('svadmin-u-36d4469299aa svadmin-u-d5eab218aa34 svadmin-u-465609a240a8 svadmin-u-359090c2d529 svadmin-u-2689f3958069', toneClassMap[statusTone] || toneClassMap.warning)}>
           {status}
         </span>
       {/if}
-      <h2 class="text-sm font-semibold text-foreground">{title}</h2>
+      <h2 class="svadmin-u-fc7473ca09eb svadmin-u-e83a7042bc91 svadmin-u-d4108abe6359">{title}</h2>
     </div>
-    {#if description}<p class="mt-1 text-xs leading-5 text-muted-foreground">{description}</p>{/if}
+    {#if description}<p class="svadmin-u-b6b02c0ebef6 svadmin-u-359090c2d529 svadmin-u-7054e2767710 svadmin-u-bfa603190748">{description}</p>{/if}
   </div>
-  <div class="flex shrink-0 flex-wrap items-center gap-2">
+  <div class="svadmin-u-60fbb7713999 svadmin-u-012fbd121f37 svadmin-u-1eb5c6df38c1 svadmin-u-3960ffc248d9 svadmin-u-77a2a20e90d4">
     {#if secondaryActions}{@render secondaryActions()}{/if}
     {@render primaryAction()}
   </div>

package/dist/components/content/WorkspaceInspector.svelte

@@ -33,25 +33,25 @@
   }
 </script>
 
-<aside class={cn('overflow-hidden rounded-lg border border-border bg-card', className)} data-svadmin-workspace-inspector data-open={open}>
+<aside class={cn('svadmin-u-2cd02d11d1af svadmin-u-5f22e64f2282 svadmin-u-ca6bcd4b6f3f svadmin-u-18049387f0af svadmin-u-cd0ad9a56558', className)} data-svadmin-workspace-inspector data-open={open}>
   {#if open}
-    <header class="flex items-start justify-between gap-3 border-b border-border px-4 py-3">
-      <div class="min-w-0">
-        <h2 class="text-sm font-semibold text-foreground">{title}</h2>
-        {#if description}<p class="mt-1 text-xs leading-5 text-muted-foreground">{description}</p>{/if}
+    <header class="svadmin-u-60fbb7713999 svadmin-u-60541e1e26f8 svadmin-u-8ef2268efbbc svadmin-u-1004c0c3954c svadmin-u-65fdbade2025 svadmin-u-18049387f0af svadmin-u-f0faeb26d656 svadmin-u-1b2d54a3fd12">
+      <div class="svadmin-u-7e0b7cdf1a94">
+        <h2 class="svadmin-u-fc7473ca09eb svadmin-u-e83a7042bc91 svadmin-u-d4108abe6359">{title}</h2>
+        {#if description}<p class="svadmin-u-b6b02c0ebef6 svadmin-u-359090c2d529 svadmin-u-7054e2767710 svadmin-u-bfa603190748">{description}</p>{/if}
       </div>
       <Button variant="ghost" size="icon-sm" aria-label={closeLabel} title={closeLabel} onclick={toggle}>
-        <PanelRightClose class="size-4" />
+        <PanelRightClose class="svadmin-u-f7b5fa971871" />
       </Button>
     </header>
-    <div class="max-h-[calc(100vh-15rem)] overflow-y-auto p-4">{@render children()}</div>
-    {#if footer}<footer class="border-t border-border p-3">{@render footer()}</footer>{/if}
+    <div class="svadmin-u-005b1fee4088 svadmin-u-92bf82f493b1 svadmin-u-8e63407b5ceb">{@render children()}</div>
+    {#if footer}<footer class="svadmin-u-b950dda299d3 svadmin-u-18049387f0af svadmin-u-eb6e8b881acd">{@render footer()}</footer>{/if}
   {:else}
-    <div class="flex min-h-64 flex-col items-center gap-3 py-3">
+    <div class="svadmin-u-60fbb7713999 svadmin-u-c7f14f00a474 svadmin-u-8dddea0773ed svadmin-u-3960ffc248d9 svadmin-u-1004c0c3954c svadmin-u-1b2d54a3fd12">
       <Button variant="ghost" size="icon-sm" aria-label={openLabel} title={openLabel} onclick={toggle}>
-        <PanelRightOpen class="size-4" />
+        <PanelRightOpen class="svadmin-u-f7b5fa971871" />
       </Button>
-      <span class="[writing-mode:vertical-rl] text-xs font-medium text-muted-foreground">{title}</span>
+      <span class="[writing-mode:vertical-rl] svadmin-u-359090c2d529 svadmin-u-2689f3958069 svadmin-u-bfa603190748">{title}</span>
     </div>
   {/if}
 </aside>

package/dist/components/content/WorkspaceLayout.svelte

@@ -28,15 +28,15 @@
 </script>
 
 <div
-  class={cn('flex flex-col gap-6', className)}
+  class={cn('svadmin-u-60fbb7713999 svadmin-u-8dddea0773ed svadmin-u-0d304f904cb0', className)}
   data-svadmin-workspace-layout
   data-secondary-collapsed={secondaryCollapsed}
   style:--workspace-secondary-width={resolvedSecondaryWidth}
 >
   {#if summary}<div data-svadmin-workspace-summary>{@render summary()}</div>{/if}
-  <div class={cn('grid min-w-0 items-start gap-6 xl:grid-cols-[minmax(0,1fr)_var(--workspace-secondary-width)]', mobileOrder === 'secondary-first' && 'grid-rows-[auto_auto]')}>
-    {#if mobileOrder === 'secondary-first' && secondary}<aside class="order-1 min-w-0 xl:order-2">{@render secondary()}</aside>{/if}
-    <div class={cn('min-w-0', mobileOrder === 'secondary-first' ? 'order-2 xl:order-1' : 'order-1')} data-svadmin-workspace-primary>{@render primary()}</div>
-    {#if mobileOrder !== 'secondary-first' && secondary}<aside class="order-2 min-w-0 xl:order-2">{@render secondary()}</aside>{/if}
+  <div class={cn('svadmin-u-f3c543ad5fe9 svadmin-u-7e0b7cdf1a94 svadmin-u-60541e1e26f8 svadmin-u-0d304f904cb0 svadmin-u-febbcd95bf06', mobileOrder === 'secondary-first' && 'svadmin-u-dfb5e722be57')}>
+    {#if mobileOrder === 'secondary-first' && secondary}<aside class="svadmin-u-ea37b42b1c3b svadmin-u-7e0b7cdf1a94 svadmin-u-2c1f5e2b6a5b">{@render secondary()}</aside>{/if}
+    <div class={cn('svadmin-u-7e0b7cdf1a94', mobileOrder === 'secondary-first' ? 'svadmin-u-ef72121aca75 svadmin-u-831f8770959d' : 'svadmin-u-ea37b42b1c3b')} data-svadmin-workspace-primary>{@render primary()}</div>
+    {#if mobileOrder !== 'secondary-first' && secondary}<aside class="svadmin-u-ef72121aca75 svadmin-u-7e0b7cdf1a94 svadmin-u-2c1f5e2b6a5b">{@render secondary()}</aside>{/if}
   </div>
 </div>

package/dist/components/content/WorkspaceSplitPane.svelte

@@ -21,14 +21,14 @@
 
 <div
   class={cn(
-    'grid min-w-0 overflow-hidden rounded-lg border border-border bg-card',
-    reverse ? 'lg:grid-cols-[var(--workspace-split-width)_minmax(0,1fr)]' : 'lg:grid-cols-[minmax(0,1fr)_var(--workspace-split-width)]',
+    'svadmin-u-f3c543ad5fe9 svadmin-u-7e0b7cdf1a94 svadmin-u-2cd02d11d1af svadmin-u-5f22e64f2282 svadmin-u-ca6bcd4b6f3f svadmin-u-18049387f0af svadmin-u-cd0ad9a56558',
+    reverse ? 'svadmin-u-a43c96035e6f' : 'svadmin-u-7d167f503a39',
     className,
   )}
   style:--workspace-split-width={secondaryWidth}
   data-svadmin-workspace-split-pane
   data-reverse={reverse}
 >
-  <section class={cn('min-w-0 p-4', reverse && 'lg:order-2')} data-svadmin-split-primary>{@render primary()}</section>
-  <section class={cn('min-w-0 border-t border-border bg-muted/15 p-4 lg:border-l lg:border-t-0', reverse && 'lg:order-1 lg:border-l-0 lg:border-r')} data-svadmin-split-secondary>{@render secondary()}</section>
+  <section class={cn('svadmin-u-7e0b7cdf1a94 svadmin-u-8e63407b5ceb', reverse && 'svadmin-u-87faeaaa291e')} data-svadmin-split-primary>{@render primary()}</section>
+  <section class={cn('svadmin-u-7e0b7cdf1a94 svadmin-u-b950dda299d3 svadmin-u-18049387f0af svadmin-u-46daeb0b661f svadmin-u-8e63407b5ceb svadmin-u-bb3e95154365 svadmin-u-7d283214b870', reverse && 'svadmin-u-ac7e80a2c2ae svadmin-u-e00052b6f07e svadmin-u-64a6e3fce6e0')} data-svadmin-split-secondary>{@render secondary()}</section>
 </div>