@svadmin/ui 0.56.0 → 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/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/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>;

package/dist/index.d.ts

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

@@ -214,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.56.0",
+  "version": "0.57.0",
   "description": "Pre-built admin UI components — AdminApp, AutoTable, AutoForm, Sidebar, Layout",
   "type": "module",
   "sideEffects": [