@svadmin/ui 0.55.1 → 0.57.0

package/dist/app.css

@@ -263,6 +263,27 @@
 
 }
 
+@layer components {
+  /* Collapsed semantic containers must not retain surface chrome or spacing. */
+  details.svadmin-collapsible:not([open]),
+  [data-svadmin-collapsible]:not([data-open="true"]) {
+    margin: 0 !important;
+    padding: 0 !important;
+    border: 0 !important;
+    background: transparent !important;
+    box-shadow: none !important;
+  }
+
+  [data-svadmin-filter-toolbar] .svadmin-filter-toolbar-advanced[hidden] {
+    display: none !important;
+  }
+
+  [data-svadmin-filter-toolbar] .svadmin-filter-toolbar-advanced:not([hidden]) {
+    min-width: 0;
+  }
+
+}
+
 body {
   background: var(--background);
   color: var(--foreground);
@@ -605,6 +626,13 @@ main {
   font-weight: 600;
 }
 
+/* Collapsible details normalization stays scoped to svadmin-owned hooks. */
+details[data-svadmin-filter]:not([open]) > :not(summary),
+details.svadmin-collapsible-filter:not([open]) > :not(summary),
+details.svadmin-collapsible:not([open]) > :not(summary) {
+  display: none !important;
+}
+
 /* --- Stripe-first layout preset (clean-flat) --- */
 /* Keep this public class for layoutPreset API compatibility. The preset only
  * adjusts density and composition; color, focus, and elevation stay semantic. */

package/dist/app.theme.css

@@ -263,6 +263,27 @@
 
 }
 
+@layer components {
+  /* Collapsed semantic containers must not retain surface chrome or spacing. */
+  details.svadmin-collapsible:not([open]),
+  [data-svadmin-collapsible]:not([data-open="true"]) {
+    margin: 0 !important;
+    padding: 0 !important;
+    border: 0 !important;
+    background: transparent !important;
+    box-shadow: none !important;
+  }
+
+  [data-svadmin-filter-toolbar] .svadmin-filter-toolbar-advanced[hidden] {
+    display: none !important;
+  }
+
+  [data-svadmin-filter-toolbar] .svadmin-filter-toolbar-advanced:not([hidden]) {
+    min-width: 0;
+  }
+
+}
+
 body {
   background: var(--background);
   color: var(--foreground);
@@ -604,6 +625,13 @@ main {
   font-weight: 600;
 }
 
+/* Collapsible details normalization stays scoped to svadmin-owned hooks. */
+details[data-svadmin-filter]:not([open]) > :not(summary),
+details.svadmin-collapsible-filter:not([open]) > :not(summary),
+details.svadmin-collapsible:not([open]) > :not(summary) {
+  display: none !important;
+}
+
 /* --- Stripe-first layout preset (clean-flat) --- */
 /* Keep this public class for layoutPreset API compatibility. The preset only
  * adjusts density and composition; color, focus, and elevation stay semantic. */

package/dist/components/DetailDrawer.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
-  import type { Snippet } from 'svelte';
-  import type { HTMLAttributes } from 'svelte/elements';
-  import { cn, type WithElementRef } from '../utils.js';
-  import * as Sheet from './ui/sheet/index.js';
+  import type { Snippet } from "svelte";
+  import type { HTMLAttributes } from "svelte/elements";
+  import { cn, type WithElementRef } from "../utils.js";
+  import * as Sheet from "./ui/sheet/index.js";
 
   type Props = WithElementRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
     open?: boolean;
@@ -11,30 +11,32 @@
     description?: string;
     descriptionId?: string;
     closeLabel?: string;
-    side?: 'left' | 'right';
+    side?: "left" | "right";
     width?: string;
     onClose?: () => void;
     children?: Snippet;
     footer?: Snippet;
+    extra?: Snippet;
   };
 
   let {
     open = $bindable(false),
-    title = '',
-    description = '',
-    side = 'right',
-    width = 'max-w-md w-full sm:max-w-lg',
+    title = "",
+    description = "",
+    side = "right",
+    width = "max-w-md w-full sm:max-w-lg",
     ref = $bindable(null),
     class: className,
-    'aria-label': ariaLabel,
-    'aria-labelledby': ariaLabelledby,
-    'aria-describedby': ariaDescribedby,
+    "aria-label": ariaLabel,
+    "aria-labelledby": ariaLabelledby,
+    "aria-describedby": ariaDescribedby,
     titleId,
     descriptionId,
-    closeLabel = 'Close',
+    closeLabel = "Close",
     onClose,
     children,
     footer,
+    extra,
     ...restProps
   }: Props = $props();
 
@@ -50,34 +52,43 @@
   {side}
   onClose={handleClose}
   {closeLabel}
-  class={cn('overflow-y-auto', width, className)}
+  class={cn("gap-0 p-0 overflow-hidden", width, className)}
   role="dialog"
   aria-modal="true"
-  aria-label={(ariaLabelledby || titleId) ? ariaLabel : (ariaLabel || title || 'Details')}
+  aria-label={(ariaLabelledby || titleId) ? ariaLabel : (ariaLabel || title || "Details")}
   aria-labelledby={ariaLabelledby || (titleId ? titleId : undefined)}
   aria-describedby={ariaDescribedby || (descriptionId ? descriptionId : undefined)}
   {...restProps}
 >
-  <Sheet.Content class="flex h-full flex-col">
-    {#if title || description}
-      <Sheet.Header>
-        {#if title}
-          <Sheet.Title id={titleId}>{title}</Sheet.Title>
-        {/if}
-        {#if description}
-          <Sheet.Description id={descriptionId}>{description}</Sheet.Description>
-        {/if}
+  <Sheet.Content class="flex h-full flex-col gap-0 p-0">
+    {#if title || description || extra}
+      <Sheet.Header class="flex-shrink-0 border-b border-border px-6 py-4 pr-12">
+        <div class="flex items-start justify-between gap-4">
+          <div class="flex min-w-0 flex-1 flex-col gap-1.5">
+            {#if title}
+              <Sheet.Title id={titleId}>{title}</Sheet.Title>
+            {/if}
+            {#if description}
+              <Sheet.Description id={descriptionId}>{description}</Sheet.Description>
+            {/if}
+          </div>
+          {#if extra}
+            <div class="flex flex-shrink-0 items-center gap-2">
+              {@render extra()}
+            </div>
+          {/if}
+        </div>
       </Sheet.Header>
     {/if}
 
-    <div class="flex-1 overflow-y-auto py-2">
+    <div class="flex-1 overflow-y-auto p-6">
       {#if children}
         {@render children()}
       {/if}
     </div>
 
     {#if footer}
-      <Sheet.Footer>
+      <Sheet.Footer class="mt-auto flex-shrink-0 border-t border-border px-6 py-4">
         {@render footer()}
       </Sheet.Footer>
     {/if}

package/dist/components/DetailDrawer.svelte.d.ts

@@ -1,6 +1,6 @@
-import type { Snippet } from 'svelte';
-import type { HTMLAttributes } from 'svelte/elements';
-import { type WithElementRef } from '../utils.js';
+import type { Snippet } from "svelte";
+import type { HTMLAttributes } from "svelte/elements";
+import { type WithElementRef } from "../utils.js";
 type Props = WithElementRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
     open?: boolean;
     title?: string;
@@ -8,11 +8,12 @@ type Props = WithElementRef<HTMLAttributes<HTMLDivElement>, HTMLDivElement> & {
     description?: string;
     descriptionId?: string;
     closeLabel?: string;
-    side?: 'left' | 'right';
+    side?: "left" | "right";
     width?: string;
     onClose?: () => void;
     children?: Snippet;
     footer?: Snippet;
+    extra?: Snippet;
 };
 declare const DetailDrawer: import("svelte").Component<Props, {}, "open" | "ref">;
 type DetailDrawer = ReturnType<typeof DetailDrawer>;

package/dist/components/EmptyState.svelte

@@ -17,7 +17,7 @@
 </script>
 
 <div
-  class="flex flex-col items-center justify-center p-8 text-center min-h-[300px] bg-card/50 rounded-lg shadow-sm"
+  class="flex flex-col items-center justify-center rounded-lg bg-card/50 px-8 py-10 text-center shadow-sm"
   in:scale={{ start: 0.95, duration: 250, opacity: 0 }}
 >
   <div class="h-20 w-20 rounded-full bg-muted flex items-center justify-center mb-4">

package/dist/components/ErrorComponent.svelte

@@ -19,7 +19,7 @@
   }>();
 </script>
 
-<div class="flex flex-col items-center justify-center p-8 text-center min-h-[300px]">
+<div class="flex flex-col items-center justify-center px-8 py-10 text-center">
   <Alert.Root variant="destructive" class="max-w-md text-left">
     <AlertTriangle class="h-5 w-5" />
     <Alert.Title>{title}</Alert.Title>

package/dist/components/FieldRenderer.svelte

@@ -17,6 +17,7 @@
   import TooltipButton from './TooltipButton.svelte';
   import ComboboxField from './ComboboxField.svelte';
   import ArrayField from './fields/ArrayField.svelte';
+  import MediaThumbnail from './content/MediaThumbnail.svelte';
   import { Plus, X } from '@lucide/svelte';
   import type { Snippet } from 'svelte';
   import { getRichTextEditor } from '../editor-config.svelte.js';
@@ -429,7 +430,7 @@
             {disabled}
           />
           {#if url}
-            <img src={url} alt="preview" class="h-9 w-9 rounded object-cover border" />
+            <div class="size-9 shrink-0"><MediaThumbnail src={url} alt="preview" size="full" fit="cover" showOverlay={false} /></div>
           {/if}
           <TooltipButton tooltip={i18n.t('common.removeImage')} variant="ghost" size="icon" class="h-8 w-8 shrink-0" onclick={() => removeImage(i)}>
             <X class="h-3.5 w-3.5" />

package/dist/components/TaskQueueDrawer.svelte

@@ -362,7 +362,7 @@
                   }}
                 />
               {:else}
-                <div class="flex h-full min-h-[280px] items-center justify-center rounded-lg border border-dashed border-border/60 bg-background/70 text-center text-sm text-muted-foreground">
+                <div class="flex h-full items-center justify-center rounded-lg border border-dashed border-border/60 bg-background/70 p-8 text-center text-sm text-muted-foreground">
                   {i18n.t('task.selectHint')}
                 </div>
               {/if}

package/dist/components/account/MembersStarterPage.svelte

@@ -25,7 +25,7 @@
 <ContentPageShell pageId="account-members-starter" width="wide">
   <ContentPageHeader title={isZh ? '开始组建团队' : 'Start building your team'} description={isZh ? '这是零成员工作区的起始页。邀请第一位成员，或通过 CSV 批量导入。' : 'This is the starting state for a workspace with no members. Invite the first teammate or import a CSV roster.'} />
 
-  <section class="grid min-h-[28rem] overflow-hidden rounded-lg border border-border bg-card lg:grid-cols-[minmax(0,1fr)_21rem]">
+  <section class="grid overflow-hidden rounded-lg border border-border bg-card lg:grid-cols-[minmax(0,1fr)_21rem]">
     <div class="flex flex-col items-center justify-center px-6 py-12 text-center">
       <span class="flex size-14 items-center justify-center rounded-lg bg-primary/10 text-primary"><Users class="size-6" /></span>
       <Badge variant="outline" class="mt-5">0 {isZh ? '名成员' : 'members'}</Badge>

package/dist/components/content/DataState.svelte

@@ -53,7 +53,7 @@
     {#if action}<div class="mt-3">{@render action()}</div>{/if}
   </Alert.Root>
 {:else}
-  <div class={'flex min-h-40 flex-col items-center justify-center rounded-lg border border-dashed border-border bg-card p-6 text-center ' + className}>
+  <div class={'flex flex-col items-center justify-center rounded-lg border border-dashed border-border bg-card px-6 py-8 text-center ' + className}>
     <Inbox class="size-8 text-muted-foreground" /><h3 class="mt-3 text-sm font-semibold text-foreground">{resolvedTitle}</h3><p class="mt-1 max-w-sm text-sm text-muted-foreground">{resolvedDescription}</p>
     {#if action}<div class="mt-4">{@render action()}</div>{/if}
   </div>

package/dist/components/content/FilterToolbar.svelte

@@ -6,6 +6,8 @@
   import { Badge } from '../ui/badge/index.js';
   import { cn } from '../../utils.js';
 
+  const uid = $props.id();
+
   interface Props {
     query?: string;
     placeholder?: string;
@@ -37,9 +39,10 @@
   }: Props = $props();
 
   const isCompact = $derived(density === 'compact');
+  const advancedPanelId = `svadmin-filter-toolbar-advanced-${uid}`;
 </script>
 
-<div class={cn('space-y-2', className)}>
+<div class={cn('space-y-2', className)} data-svadmin-filter-toolbar data-advanced-open={advanced && advancedOpen ? 'true' : 'false'}>
   <div class="flex flex-col gap-2 sm:flex-row sm:items-center">
     {#if showSearch}
       <div class="relative min-w-0 flex-1">
@@ -76,6 +79,7 @@
         class={cn('gap-1.5 shrink-0', isCompact ? 'h-8 text-xs px-2.5' : '')}
         onclick={() => advancedOpen = !advancedOpen}
         aria-expanded={advancedOpen}
+        aria-controls={advancedPanelId}
       >
         <SlidersHorizontal class="size-3.5" />
         <span>{advancedLabel}</span>
@@ -98,7 +102,7 @@
     {/if}
   </div>
   {#if advanced && advancedOpen}
-    <div class="rounded-lg border border-border/60 bg-muted/20 p-3">
+    <div id={advancedPanelId} class="svadmin-filter-toolbar-advanced rounded-lg border border-border/60 bg-muted/20 p-3" aria-hidden="false">
       {@render advanced()}
     </div>
   {/if}

package/dist/components/content/MediaThumbnail.svelte

@@ -0,0 +1,109 @@
+<script lang="ts">
+  import { Eye, FileText, ImageOff, Loader2 } from '@lucide/svelte';
+  import * as Dialog from '../ui/dialog/index.js';
+  import { cn } from '../../utils.js';
+
+  export type MediaThumbnailSize = 'sm' | 'md' | 'lg' | 'full';
+  export type MediaThumbnailFit = 'contain' | 'cover';
+
+  interface Props {
+    src?: string | null;
+    alt?: string;
+    title?: string;
+    fileName?: string;
+    mimeType?: string;
+    size?: MediaThumbnailSize;
+    fit?: MediaThumbnailFit;
+    aspectRatio?: string;
+    showOverlay?: boolean;
+    overlayText?: string;
+    emptyLabel?: string;
+    loadingLabel?: string;
+    errorLabel?: string;
+    onopen?: () => void;
+    class?: string;
+  }
+
+  let {
+    src = null,
+    alt = '',
+    title = '',
+    fileName = '',
+    mimeType = '',
+    size = 'md',
+    fit = 'contain',
+    aspectRatio,
+    showOverlay = true,
+    overlayText = 'View',
+    emptyLabel = 'No media',
+    loadingLabel = 'Loading media',
+    errorLabel = 'Image unavailable',
+    onopen,
+    class: className = '',
+  }: Props = $props();
+
+  const isImage = $derived(Boolean(
+    (mimeType && mimeType.startsWith('image/'))
+    || (src && /\.(png|jpe?g|webp|gif|svg|bmp|avif)(\?.*)?$/i.test(src))
+    || (fileName && /\.(png|jpe?g|webp|gif|svg|bmp|avif)$/i.test(fileName))
+    || (src && !mimeType && !fileName && !/\.(pdf|docx?|xlsx?|zip|tar|gz|txt|csv|json)$/i.test(src))
+  ));
+  const sizeClasses: Record<MediaThumbnailSize, string> = {
+    sm: 'h-16 min-w-16 max-w-24',
+    md: 'min-h-20 max-h-56 w-full',
+    lg: 'min-h-32 max-h-80 w-full',
+    full: 'h-full w-full',
+  };
+  const fitClasses: Record<MediaThumbnailFit, string> = {
+    contain: 'object-contain',
+    cover: 'object-cover',
+  };
+
+  let imageState = $state<'loading' | 'loaded' | 'error'>('loading');
+  let previewOpen = $state(false);
+
+  $effect(() => {
+    if (src && isImage) imageState = 'loading';
+    previewOpen = false;
+  });
+
+  function openMedia() {
+    if (onopen) onopen();
+    else previewOpen = true;
+  }
+
+  function openDocument() {
+    if (onopen) onopen();
+    else if (src) window.open(src, '_blank', 'noopener,noreferrer');
+  }
+</script>
+
+{#if isImage && src}
+  <div class={cn('relative flex items-center justify-center overflow-hidden rounded-lg border border-border bg-muted/30 transition-colors', sizeClasses[size], className)} style:aspect-ratio={aspectRatio} data-slot="media-thumbnail" data-size={size} data-media-state={imageState} aria-busy={imageState === 'loading' || undefined}>
+    <img {src} alt={alt || title || fileName || 'Thumbnail'} class={cn('block max-h-full max-w-full transition-transform duration-200', showOverlay && 'group-hover:scale-[1.02]', fitClasses[fit], imageState !== 'loaded' && 'invisible')} loading="lazy" onload={() => imageState = 'loaded'} onerror={() => imageState = 'error'} />
+
+    {#if imageState === 'loading'}
+      <div class="absolute inset-0 flex items-center justify-center bg-muted/40" role="status" aria-label={loadingLabel}><Loader2 class="size-4 animate-spin text-muted-foreground" aria-hidden="true" /></div>
+    {:else if imageState === 'error'}
+      <div class="absolute inset-0 flex flex-col items-center justify-center gap-1 p-3 text-center text-xs text-muted-foreground" role="img" aria-label={errorLabel} data-slot="media-thumbnail-error"><ImageOff class="size-5" aria-hidden="true" /><span class="max-w-[12rem] truncate text-[11px]">{errorLabel}</span></div>
+    {:else if showOverlay}
+      <Dialog.Root bind:open={previewOpen}>
+        <button type="button" class="group absolute inset-0 cursor-zoom-in outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-inset" onclick={openMedia} aria-label={alt ? `Preview ${alt}` : overlayText}>
+          <span class="pointer-events-none absolute inset-0 flex items-center justify-center gap-1.5 bg-background/60 text-foreground opacity-0 transition-opacity group-hover:opacity-100 group-focus-visible:opacity-100" aria-hidden="true"><Eye class="size-4" /><span class="text-xs font-semibold">{overlayText}</span></span>
+        </button>
+        {#if !onopen}
+          <Dialog.Content class="max-w-[min(92vw,72rem)] border-none bg-transparent p-0 shadow-none">
+            <Dialog.Header class="sr-only"><Dialog.Title>{alt || title || fileName || 'Media preview'}</Dialog.Title><Dialog.Description>{alt || title || fileName || 'Expanded media preview'}</Dialog.Description></Dialog.Header>
+            <img {src} alt={alt || title || fileName || 'Media preview'} class="max-h-[82vh] w-full rounded-md object-contain" />
+          </Dialog.Content>
+        {/if}
+      </Dialog.Root>
+    {/if}
+  </div>
+{:else if src || fileName}
+  <button type="button" class={cn('inline-flex items-center gap-2 rounded-lg border border-border bg-muted/20 px-3 py-2 text-left text-xs text-foreground transition-colors hover:bg-muted/40', className)} onclick={openDocument} data-slot="media-thumbnail-document">
+    <FileText class="size-4 shrink-0 text-muted-foreground" /><span class="truncate font-medium" title={fileName || alt || title}>{fileName || alt || title || 'Document'}</span>
+  </button>
+{:else}
+  <span class={cn('inline-flex items-center gap-1 text-xs text-muted-foreground', className)} data-media-state="empty"><ImageOff class="size-3.5" aria-hidden="true" /><span>{emptyLabel}</span></span>
+{/if}

package/dist/components/content/MediaThumbnail.svelte.d.ts

@@ -0,0 +1,22 @@
+export type MediaThumbnailSize = 'sm' | 'md' | 'lg' | 'full';
+export type MediaThumbnailFit = 'contain' | 'cover';
+interface Props {
+    src?: string | null;
+    alt?: string;
+    title?: string;
+    fileName?: string;
+    mimeType?: string;
+    size?: MediaThumbnailSize;
+    fit?: MediaThumbnailFit;
+    aspectRatio?: string;
+    showOverlay?: boolean;
+    overlayText?: string;
+    emptyLabel?: string;
+    loadingLabel?: string;
+    errorLabel?: string;
+    onopen?: () => void;
+    class?: string;
+}
+declare const MediaThumbnail: import("svelte").Component<Props, {}, "">;
+type MediaThumbnail = ReturnType<typeof MediaThumbnail>;
+export default MediaThumbnail;

package/dist/components/content/ProjectCard.svelte

@@ -5,6 +5,7 @@
   import { Badge } from '../ui/badge/index.js';
   import Progress from '../ui/progress/progress.svelte';
   import StatusBadge from './StatusBadge.svelte';
+  import MediaThumbnail from './MediaThumbnail.svelte';
   export type ProjectStatus = 'active' | 'completed' | 'on-hold' | 'draft';
   export interface ProjectSummary {
     id: string;
@@ -22,7 +23,7 @@
   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}<img src={project.image} alt={project.name} class="h-32 w-full object-cover" />{/if}
+  {#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>

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 min-h-[24rem] items-center justify-center p-4" data-svadmin-system-error>
+<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>

package/dist/components/content/WorkspaceActionBar.svelte

@@ -1,3 +1,7 @@
+<script module lang="ts">
+  export type WorkspaceActionBarTone = 'default' | 'warning' | 'success' | 'destructive' | 'info';
+</script>
+
 <script lang="ts">
   import type { Snippet } from 'svelte';
   import { cn } from '../../utils.js';
@@ -6,12 +10,29 @@
     title: string;
     description?: string;
     status?: string;
+    statusTone?: WorkspaceActionBarTone;
     primaryAction: Snippet;
     secondaryActions?: Snippet;
     class?: string;
   }
 
-  let { title, description, status, primaryAction, secondaryActions, class: className = '' }: Props = $props();
+  let {
+    title,
+    description,
+    status,
+    statusTone = 'warning',
+    primaryAction,
+    secondaryActions,
+    class: className = '',
+  }: 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',
+  };
 </script>
 
 <section
@@ -21,7 +42,11 @@
 >
   <div class="min-w-0">
     <div class="flex flex-wrap items-center gap-2">
-      {#if status}<span class="rounded-sm bg-warning/15 px-2 py-0.5 text-xs font-medium text-warning-foreground">{status}</span>{/if}
+      {#if status}
+        <span class={cn('rounded-sm px-2 py-0.5 text-xs font-medium', toneClassMap[statusTone] || toneClassMap.warning)}>
+          {status}
+        </span>
+      {/if}
       <h2 class="text-sm font-semibold text-foreground">{title}</h2>
     </div>
     {#if description}<p class="mt-1 text-xs leading-5 text-muted-foreground">{description}</p>{/if}

package/dist/components/content/WorkspaceActionBar.svelte.d.ts

@@ -1,8 +1,10 @@
+export type WorkspaceActionBarTone = 'default' | 'warning' | 'success' | 'destructive' | 'info';
 import type { Snippet } from 'svelte';
 interface Props {
     title: string;
     description?: string;
     status?: string;
+    statusTone?: WorkspaceActionBarTone;
     primaryAction: Snippet;
     secondaryActions?: Snippet;
     class?: string;

package/dist/components/content/WorkspaceTabBar.svelte

@@ -0,0 +1,94 @@
+<script module lang="ts">
+  import type { Component } from 'svelte';
+
+  export interface WorkspaceTabItem {
+    id: string;
+    label: string;
+    icon?: Component<{ class?: string; 'aria-hidden'?: string | boolean }>;
+    badge?: string | number;
+    disabled?: boolean;
+    description?: string;
+  }
+</script>
+
+<script lang="ts">
+  import { cn } from '../../utils.js';
+
+  interface Props {
+    items: WorkspaceTabItem[];
+    activeId: string;
+    onselect?: (item: WorkspaceTabItem) => void;
+    variant?: 'segmented' | 'pill' | 'underline';
+    ariaLabel?: string;
+    class?: string;
+  }
+
+  let {
+    items,
+    activeId,
+    onselect,
+    variant = 'segmented',
+    ariaLabel = 'Workspace tabs',
+    class: className = '',
+  }: Props = $props();
+</script>
+
+<nav
+  aria-label={ariaLabel}
+  class={cn(
+    'flex items-center gap-1 overflow-x-auto',
+    variant === 'segmented' && 'rounded-lg border border-border bg-muted/40 p-1',
+    variant === 'pill' && 'gap-1.5 p-0.5',
+    variant === 'underline' && 'gap-2 border-b border-border',
+    className,
+  )}
+  data-svadmin-workspace-tab-bar
+  data-variant={variant}
+>
+  {#each items as item (item.id)}
+    {@const Icon = item.icon}
+    {@const isActive = item.id === activeId}
+    <button
+      type="button"
+      disabled={item.disabled}
+      class={cn(
+        'inline-flex items-center gap-2 rounded-md px-3 py-1.5 text-xs font-medium transition-colors outline-none focus-visible:ring-2 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
+        variant === 'segmented' && [
+          isActive
+            ? 'bg-background text-foreground shadow-sm font-semibold'
+            : 'text-muted-foreground hover:bg-background/50 hover:text-foreground',
+        ],
+        variant === 'pill' && [
+          isActive
+            ? 'bg-primary text-primary-foreground font-semibold'
+            : 'bg-muted/50 text-muted-foreground hover:bg-muted hover:text-foreground',
+        ],
+        variant === 'underline' && [
+          'rounded-none border-b-2 px-3 py-2',
+          isActive
+            ? 'border-primary text-primary font-semibold'
+            : 'border-transparent text-muted-foreground hover:border-border hover:text-foreground',
+        ],
+      )}
+      aria-current={isActive ? 'page' : undefined}
+      onclick={() => onselect?.(item)}
+    >
+      {#if Icon}
+        <Icon class="size-4 shrink-0" aria-hidden="true" />
+      {/if}
+      <span>{item.label}</span>
+      {#if item.badge !== undefined && item.badge !== ''}
+        <span
+          class={cn(
+            'inline-flex items-center justify-center rounded-full px-1.5 py-0.5 text-[0.6875rem] font-bold leading-none tabular-nums',
+            isActive
+              ? (variant === 'pill' ? 'bg-primary-foreground/20 text-primary-foreground' : 'bg-primary/10 text-primary')
+              : 'bg-muted text-muted-foreground',
+          )}
+        >
+          {item.badge}
+        </span>
+      {/if}
+    </button>
+  {/each}
+</nav>

package/dist/components/content/WorkspaceTabBar.svelte.d.ts

@@ -0,0 +1,23 @@
+import type { Component } from 'svelte';
+export interface WorkspaceTabItem {
+    id: string;
+    label: string;
+    icon?: Component<{
+        class?: string;
+        'aria-hidden'?: string | boolean;
+    }>;
+    badge?: string | number;
+    disabled?: boolean;
+    description?: string;
+}
+interface Props {
+    items: WorkspaceTabItem[];
+    activeId: string;
+    onselect?: (item: WorkspaceTabItem) => void;
+    variant?: 'segmented' | 'pill' | 'underline';
+    ariaLabel?: string;
+    class?: string;
+}
+declare const WorkspaceTabBar: Component<Props, {}, "">;
+type WorkspaceTabBar = ReturnType<typeof WorkspaceTabBar>;
+export default WorkspaceTabBar;

package/dist/components/content/index.d.ts

@@ -5,6 +5,9 @@ export { default as PageToolbar } from './PageToolbar.svelte';
 export { default as WorkspaceLayout } from './WorkspaceLayout.svelte';
 export { default as WorkspaceStageStepper } from './WorkspaceStageStepper.svelte';
 export { default as WorkspaceActionBar } from './WorkspaceActionBar.svelte';
+export type { WorkspaceActionBarTone } from './WorkspaceActionBar.svelte';
+export { default as WorkspaceTabBar } from './WorkspaceTabBar.svelte';
+export type { WorkspaceTabItem } from './WorkspaceTabBar.svelte';
 export { default as WorkspaceInspector } from './WorkspaceInspector.svelte';
 export { default as WorkspaceSplitPane } from './WorkspaceSplitPane.svelte';
 export { default as SettingsGroup } from './SettingsGroup.svelte';
@@ -43,3 +46,5 @@ export { default as FeedbackNotice } from './FeedbackNotice.svelte';
 export type { FeedbackNoticeTone, FeedbackNoticePriority } from './FeedbackNotice.svelte';
 export { default as AuditTimeline } from './AuditTimeline.svelte';
 export type { TimelineItem } from './AuditTimeline.svelte';
+export { default as MediaThumbnail } from './MediaThumbnail.svelte';
+export type { MediaThumbnailSize, MediaThumbnailFit } from './MediaThumbnail.svelte';

package/dist/components/content/index.js

@@ -5,6 +5,7 @@ export { default as PageToolbar } from './PageToolbar.svelte';
 export { default as WorkspaceLayout } from './WorkspaceLayout.svelte';
 export { default as WorkspaceStageStepper } from './WorkspaceStageStepper.svelte';
 export { default as WorkspaceActionBar } from './WorkspaceActionBar.svelte';
+export { default as WorkspaceTabBar } from './WorkspaceTabBar.svelte';
 export { default as WorkspaceInspector } from './WorkspaceInspector.svelte';
 export { default as WorkspaceSplitPane } from './WorkspaceSplitPane.svelte';
 export { default as SettingsGroup } from './SettingsGroup.svelte';
@@ -30,3 +31,4 @@ export { default as TwoFactorStepper } from './TwoFactorStepper.svelte';
 export { default as SystemErrorState } from './SystemErrorState.svelte';
 export { default as FeedbackNotice } from './FeedbackNotice.svelte';
 export { default as AuditTimeline } from './AuditTimeline.svelte';
+export { default as MediaThumbnail } from './MediaThumbnail.svelte';

package/dist/components/fields/ImageField.svelte

@@ -1,9 +1,24 @@
 <script lang="ts">
-  interface Props { value: string | null | undefined; alt?: string; width?: number; height?: number }
-  let { value, alt = '', width = 80, height = 80 }: Props = $props();
+  import MediaThumbnail from '../content/MediaThumbnail.svelte';
+
+  interface Props {
+    value: string | null | undefined;
+    alt?: string;
+    title?: string;
+    width?: number;
+    height?: number;
+    previewable?: boolean;
+    emptyLabel?: string;
+    class?: string;
+  }
+
+  let { value, alt = '', title, width = 80, height = 80, previewable = true, emptyLabel = 'No image', class: className = '' }: Props = $props();
 </script>
+
 {#if value}
-  <img src={value} {alt} {width} {height} class="rounded-lg object-cover border border-border" />
+  <div style={`width: ${width}px; height: ${height}px;`} class="inline-block shrink-0">
+    <MediaThumbnail src={value} {alt} {title} size="full" fit="cover" showOverlay={previewable} class={className} />
+  </div>
 {:else}
-  <span class="inline-flex items-center justify-center w-20 h-20 bg-muted rounded-lg text-muted-foreground">—</span>
+  <MediaThumbnail src={null} {emptyLabel} class={className} />
 {/if}

package/dist/components/fields/ImageField.svelte.d.ts

@@ -1,8 +1,12 @@
 interface Props {
     value: string | null | undefined;
     alt?: string;
+    title?: string;
     width?: number;
     height?: number;
+    previewable?: boolean;
+    emptyLabel?: string;
+    class?: string;
 }
 declare const ImageField: import("svelte").Component<Props, {}, "">;
 type ImageField = ReturnType<typeof ImageField>;

package/dist/index.d.ts

@@ -170,6 +170,9 @@ export { default as WorkspaceLayout } from './components/content/WorkspaceLayout
 export { default as WorkspaceStageStepper } from './components/content/WorkspaceStageStepper.svelte';
 export type { WorkspaceStage, WorkspaceStageStatus } from './components/content/WorkspaceStageStepper.svelte';
 export { default as WorkspaceActionBar } from './components/content/WorkspaceActionBar.svelte';
+export type { WorkspaceActionBarTone } from './components/content/WorkspaceActionBar.svelte';
+export { default as WorkspaceTabBar } from './components/content/WorkspaceTabBar.svelte';
+export type { WorkspaceTabItem } from './components/content/WorkspaceTabBar.svelte';
 export { default as WorkspaceInspector } from './components/content/WorkspaceInspector.svelte';
 export { default as WorkspaceSplitPane } from './components/content/WorkspaceSplitPane.svelte';
 export { default as SettingsGroup } from './components/content/SettingsGroup.svelte';
@@ -224,3 +227,5 @@ export type { DateRangeFormat, DateRangeValue } from './components/fields/DateRa
 export type { PercentTone } from './components/fields/PercentField.svelte';
 export type { RatingSize } from './components/fields/RatingField.svelte';
 export type { CurrencyTone } from './components/fields/CurrencyField.svelte';
+export { default as MediaThumbnail } from './components/content/MediaThumbnail.svelte';
+export type { MediaThumbnailSize, MediaThumbnailFit } from './components/content/MediaThumbnail.svelte';

package/dist/index.js

@@ -184,6 +184,7 @@ export { default as PageToolbar } from './components/content/PageToolbar.svelte'
 export { default as WorkspaceLayout } from './components/content/WorkspaceLayout.svelte';
 export { default as WorkspaceStageStepper } from './components/content/WorkspaceStageStepper.svelte';
 export { default as WorkspaceActionBar } from './components/content/WorkspaceActionBar.svelte';
+export { default as WorkspaceTabBar } from './components/content/WorkspaceTabBar.svelte';
 export { default as WorkspaceInspector } from './components/content/WorkspaceInspector.svelte';
 export { default as WorkspaceSplitPane } from './components/content/WorkspaceSplitPane.svelte';
 export { default as SettingsGroup } from './components/content/SettingsGroup.svelte';
@@ -213,3 +214,4 @@ export { default as DetailDrawer } from './components/DetailDrawer.svelte';
 export { default as AuditTimeline } from './components/content/AuditTimeline.svelte';
 export { default as FilterDropdown } from './components/FilterDropdown.svelte';
 export { default as BatchActionBar } from './components/BatchActionBar.svelte';
+export { default as MediaThumbnail } from './components/content/MediaThumbnail.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/ui",
-  "version": "0.55.1",
+  "version": "0.57.0",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [