@svadmin/ui 0.56.0 → 0.58.0

package/dist/components/ShowPage.svelte

@@ -1,12 +1,11 @@
 <script lang="ts">
-  import { captureAdminContext, useShow, getResource } from '@svadmin/core';
+  import { useNavigation, useShow, getResource } from '@svadmin/core';
   import { useTranslation } from '@svadmin/core/i18n';
   import type { Snippet } from 'svelte';
   import * as Card from './ui/card/index.js';
   import { Skeleton } from './ui/skeleton/index.js';
   import PageHeader from './PageHeader.svelte';
   import { getDisplayComponent } from './fieldComponentMap.js';
-  import ListButton from './buttons/ListButton.svelte';
   import EditButton from './buttons/EditButton.svelte';
   import DeleteButton from './buttons/DeleteButton.svelte';
   import CloneButton from './buttons/CloneButton.svelte';
@@ -38,7 +37,7 @@
     class: className = '',
   }: Props = $props();
 
-  const adminContext = captureAdminContext();
+  const navigation = useNavigation();
   const isCompact = $derived(density === 'compact');
 
   const resource = $derived(getResource(resourceName));
@@ -60,10 +59,10 @@
   <PageHeader
     title="{resource.label} {i18n.t('common.detail')} #{id}"
     {density}
-    onBack={() => adminContext.navigate(`/${resourceName}`)}
+    onBack={() => navigation.list(resourceName)}
+    backLabel={i18n.t('common.backToList')}
   >
     {#snippet actions()}
-      <ListButton resource={resourceName} hideText />
       {#if resource.canEdit !== false}
         <EditButton resource={resourceName} recordItemId={id} hideText />
       {/if}
@@ -71,7 +70,7 @@
         <CloneButton resource={resourceName} recordItemId={id} hideText />
       {/if}
       {#if resource.canDelete !== false}
-        <DeleteButton resource={resourceName} recordItemId={id} hideText onSuccess={() => adminContext.navigate(`/${resourceName}`)} />
+        <DeleteButton resource={resourceName} recordItemId={id} hideText onSuccess={() => navigation.list(resourceName)} />
       {/if}
       <RefreshButton resource={resourceName} hideText />
       {#if headerActions}

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/TenantSwitcher.svelte

@@ -31,6 +31,7 @@
     <DropdownMenu.Trigger>
       {#snippet child({ props }: { props: Record<string, unknown> })}
         <button
+          type="button"
           {...props}
           class="flex w-full items-center gap-3 rounded-lg px-3 py-2 text-left transition-colors hover:bg-sidebar-accent/50
             {collapsed ? 'justify-center' : ''}"

package/dist/components/Toast.svelte

@@ -1,8 +1,17 @@
 <script lang="ts">
   import { onMount } from 'svelte';
   import { Toaster, toast as sonner, type ToasterProps } from 'svelte-sonner';
-  import { getResolvedTheme, getToastQueue, consumeToastQueue, getPromiseQueue, consumePromiseQueue } from '@svadmin/core';
+  import {
+    consumePromiseQueue,
+    consumeToastQueue,
+    getPromiseQueue,
+    getResolvedTheme,
+    getToastQueue,
+    getToasts,
+    removeToast,
+  } from '@svadmin/core';
   import { registerToastHost, type ToastHostRegistration } from './toast-host.svelte.js';
+  import UndoableNotification from './UndoableNotification.svelte';
 
   let host = $state<ToastHostRegistration | null>(null);
   const isActiveHost = $derived(host?.isActive() ?? false);
@@ -56,8 +65,33 @@
       },
     }
   } satisfies ToasterProps);
+
+  function undo(id: number, callback?: () => void): void {
+    removeToast(id);
+    callback?.();
+  }
+
+  function commit(id: number, callback?: () => void): void {
+    removeToast(id);
+    callback?.();
+  }
 </script>
 
 {#if isActiveHost}
   <Toaster {...toasterProps} />
+  <div
+    class="pointer-events-none fixed bottom-4 left-4 right-4 z-[100] flex flex-col-reverse gap-2 sm:bottom-6 sm:left-1/2 sm:right-auto sm:w-[min(32rem,calc(100vw-3rem))] sm:-translate-x-1/2"
+    data-svadmin-undo-stack
+  >
+    {#each getToasts().slice(-3) as item (item.id)}
+      <UndoableNotification
+        message={item.message}
+        duration={item.duration}
+        embedded
+        managedExternally
+        onUndo={() => undo(item.id, item.onUndo)}
+        onTimeout={() => commit(item.id, item.onTimeout)}
+      />
+    {/each}
+  </div>
 {/if}

package/dist/components/UndoableNotification.svelte

@@ -8,9 +8,11 @@
 
   const i18n = useTranslation();
 
-  let { message, duration = 5000, onUndo, onTimeout } = $props<{
+  let { message, duration = 5000, embedded = false, managedExternally = false, onUndo, onTimeout } = $props<{
     message: string;
     duration?: number;
+    embedded?: boolean;
+    managedExternally?: boolean;
     onUndo: () => void;
     onTimeout: () => void;
   }>();
@@ -27,7 +29,7 @@
       if (remaining <= 0) {
         remaining = 0;
         clearInterval(interval);
-        if (!dismissed) {
+        if (!dismissed && !managedExternally) {
           dismissed = true;
           onTimeout();
         }
@@ -51,17 +53,21 @@
 
 {#if !dismissed}
   <div
-    class="fixed bottom-6 left-1/2 -translate-x-1/2 z-[100] min-w-80 max-w-lg rounded-lg border bg-card shadow-lg overflow-hidden"
+    class={embedded
+      ? 'pointer-events-auto relative w-full overflow-hidden rounded-lg border bg-card shadow-lg'
+      : 'fixed bottom-4 left-4 right-4 z-[100] overflow-hidden rounded-lg border bg-card shadow-lg sm:bottom-6 sm:left-1/2 sm:right-auto sm:w-[min(32rem,calc(100vw-3rem))] sm:-translate-x-1/2'}
+    role="status"
+    aria-live="polite"
     transition:slide={{ duration: 250 }}
   >
-    <div class="flex items-center justify-between px-4 py-3 gap-3">
-      <p class="text-sm text-foreground">{message}</p>
+    <div class="flex items-center justify-between gap-3 px-4 py-3">
+      <p class="min-w-0 break-words text-sm text-foreground">{message}</p>
       <div class="flex items-center gap-1 flex-shrink-0">
         <Button variant="ghost" size="sm" onclick={handleUndo} class="font-semibold text-primary">
           <Undo2 class="h-3.5 w-3.5 mr-1" />
           {i18n.t('common.undo')}
         </Button>
-        <Button variant="ghost" size="icon" class="h-7 w-7" onclick={handleDismiss}>
+        <Button variant="ghost" size="icon" class="h-7 w-7" onclick={handleDismiss} aria-label={i18n.t('common.close')}>
           <X class="h-3.5 w-3.5" />
         </Button>
       </div>

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

@@ -1,6 +1,8 @@
 type $$ComponentProps = {
     message: string;
     duration?: number;
+    embedded?: boolean;
+    managedExternally?: boolean;
     onUndo: () => void;
     onTimeout: () => void;
 };

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/buttons/CloneButton.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
-  import { useNavigation, useCan, useTranslation } from '@svadmin/core';
+  import { getResource, useNavigation, useCan, useTranslation } from '@svadmin/core';
   import { Button } from '../ui/button/index.js';
   import { Copy } from '@lucide/svelte';
   import type { ButtonAccessControl } from './access-control';
@@ -27,6 +27,13 @@
   }>();
 
   const nav = useNavigation();
+  const resourceDefinition = $derived.by(() => {
+    try {
+      return getResource(resource);
+    } catch {
+      return null;
+    }
+  });
   const can = useCan(() => ({
     resource,
     action: 'create',
@@ -34,8 +41,8 @@
     meta: accessControl?.meta,
     queryOptions: { enabled: accessControl?.enabled ?? true }
   }));
-  const hidden = $derived(accessControl?.hideIfUnauthorized && !can.allowed);
   const displayText = $derived(label ?? i18n.t('common.clone'));
+  const hidden = $derived(resourceDefinition?.canCreate === false || (accessControl?.hideIfUnauthorized && !can.allowed));
 </script>
 
 {#if !hidden}

package/dist/components/buttons/CreateButton.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
-  import { useNavigation, useCan, useTranslation } from '@svadmin/core';
+  import { getResource, useNavigation, useCan, useTranslation } from '@svadmin/core';
   import { Button } from '../ui/button/index.js';
   import { Plus } from '@lucide/svelte';
   import type { ButtonAccessControl } from './access-control';
@@ -24,6 +24,13 @@
   }>();
 
   const nav = useNavigation();
+  const resourceDefinition = $derived.by(() => {
+    try {
+      return getResource(resource);
+    } catch {
+      return null;
+    }
+  });
   const can = useCan(() => ({
     resource,
     action: 'create',
@@ -31,8 +38,8 @@
     meta: accessControl?.meta,
     queryOptions: { enabled: accessControl?.enabled ?? true }
   }));
-  const hidden = $derived(accessControl?.hideIfUnauthorized && !can.allowed);
   const displayText = $derived(label ?? i18n.t('common.create'));
+  const hidden = $derived(resourceDefinition?.canCreate === false || (accessControl?.hideIfUnauthorized && !can.allowed));
 </script>
 
 {#if !hidden}

package/dist/components/buttons/DeleteButton.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
-  import { useDelete, useCan, useTranslation } from '@svadmin/core';
+  import { getResource, useDelete, useCan, useTranslation } from '@svadmin/core';
   import { Button } from '../ui/button/index.js';
   import { Trash2 } from '@lucide/svelte';
   import type { ButtonAccessControl } from './access-control';
@@ -31,6 +31,13 @@
   }>();
 
   const deleteMut = useDelete({ get resource() { return resource; }, get mutationMode() { return undoable ? 'undoable' as const : 'pessimistic' as const; } });
+  const resourceDefinition = $derived.by(() => {
+    try {
+      return getResource(resource);
+    } catch {
+      return null;
+    }
+  });
   const can = useCan(() => ({
     resource,
     action: 'delete',
@@ -38,8 +45,8 @@
     meta: accessControl?.meta,
     queryOptions: { enabled: accessControl?.enabled ?? true }
   }));
-  const hidden = $derived(accessControl?.hideIfUnauthorized && !can.allowed);
   const displayText = $derived(label ?? i18n.t('common.delete'));
+  const hidden = $derived(resourceDefinition?.canDelete === false || (accessControl?.hideIfUnauthorized && !can.allowed));
   let confirming = $state(false);
 
   async function handleDelete() {

package/dist/components/buttons/EditButton.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
-  import { useNavigation, useCan, useTranslation } from '@svadmin/core';
+  import { getResource, useNavigation, useCan, useTranslation } from '@svadmin/core';
   import { Button } from '../ui/button/index.js';
   import { Pencil } from '@lucide/svelte';
   import type { ButtonAccessControl } from './access-control';
@@ -27,6 +27,13 @@
   }>();
 
   const nav = useNavigation();
+  const resourceDefinition = $derived.by(() => {
+    try {
+      return getResource(resource);
+    } catch {
+      return null;
+    }
+  });
   const can = useCan(() => ({
     resource,
     action: 'edit',
@@ -34,8 +41,8 @@
     meta: accessControl?.meta,
     queryOptions: { enabled: accessControl?.enabled ?? true }
   }));
-  const hidden = $derived(accessControl?.hideIfUnauthorized && !can.allowed);
   const displayText = $derived(label ?? i18n.t('common.edit'));
+  const hidden = $derived(resourceDefinition?.canEdit === false || (accessControl?.hideIfUnauthorized && !can.allowed));
 </script>
 
 {#if !hidden}

package/dist/components/buttons/ListButton.svelte

@@ -19,7 +19,7 @@
   const res = $derived((() => {
     try { return getResource(resourceName); } catch { return null; }
   })());
-  const displayLabel = $derived(label ?? res?.label ?? i18n.t('common.list') ?? resourceName);
+  const displayLabel = $derived(label ?? (hideText ? i18n.t('common.backToList') : (res?.label ?? i18n.t('common.list') ?? resourceName)));
 
   function navigateToList() {
     const navigate = () => nav.list(resourceName);

package/dist/components/buttons/ShowButton.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import type { Snippet } from 'svelte';
-  import { useNavigation, useCan, useTranslation } from '@svadmin/core';
+  import { getResource, useNavigation, useCan, useTranslation } from '@svadmin/core';
   import { Button } from '../ui/button/index.js';
   import { Eye } from '@lucide/svelte';
   import type { ButtonAccessControl } from './access-control';
@@ -29,6 +29,13 @@
   }>();
 
   const nav = useNavigation();
+  const resourceDefinition = $derived.by(() => {
+    try {
+      return getResource(resource);
+    } catch {
+      return null;
+    }
+  });
   const can = useCan(() => ({
     resource,
     action: 'show',
@@ -36,7 +43,7 @@
     meta: accessControl?.meta,
     queryOptions: { enabled: accessControl?.enabled ?? true }
   }));
-  const hidden = $derived(accessControl?.hideIfUnauthorized && !can.allowed);
+  const hidden = $derived(resourceDefinition?.canShow === false || (accessControl?.hideIfUnauthorized && !can.allowed));
   const displayText = $derived(label ?? i18n.t('common.detail'));
 
   function navigateToRecord() {

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/index.d.ts

@@ -46,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

@@ -31,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>;