@svadmin/lite 0.3.24 → 0.3.25

package/dist/components/LiteMediaThumbnail.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  interface Props {
+    src?: string | null;
+    alt?: string;
+    height?: number;
+    muted?: boolean;
+    emptyLabel?: string;
+    errorLabel?: string;
+  }
+
+  let { src = null, alt = '', height = 100, muted = false, emptyLabel = 'No image', errorLabel = 'Image unavailable' }: Props = $props();
+  let state = $state<'loading' | 'loaded' | 'error'>('loading');
+
+  $effect(() => {
+    if (src) state = 'loading';
+  });
+</script>
+
+{#if src}
+  <span class="lite-media-thumbnail" data-lite-media-state={state} style={`height:${height}px;${muted ? 'opacity:0.6;' : ''}`}>
+    <img {src} {alt} onload={() => state = 'loaded'} onerror={() => state = 'error'} class:lite-media-hidden={state !== 'loaded'} />
+    {#if state === 'loading'}<span class="lite-media-status" role="status">Loading image</span>{/if}
+    {#if state === 'error'}<span class="lite-media-status" role="img" aria-label={errorLabel}>{errorLabel}</span>{/if}
+  </span>
+{:else}
+  <span class="lite-media-empty" data-lite-media-state="empty">{emptyLabel}</span>
+{/if}
+
+<style>
+  .lite-media-thumbnail { position: relative; display: inline-flex; max-width: 300px; align-items: center; justify-content: center; overflow: hidden; border: 1px solid #e2e8f0; border-radius: 6px; background: #f8fafc; }
+  .lite-media-thumbnail img { display: block; width: auto; max-width: 100%; height: 100%; object-fit: contain; }
+  .lite-media-hidden { visibility: hidden; }
+  .lite-media-status { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 8px; color: #64748b; font-size: 12px; text-align: center; }
+  .lite-media-empty { color: #64748b; font-size: 12px; }
+</style>

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

@@ -0,0 +1,11 @@
+interface Props {
+    src?: string | null;
+    alt?: string;
+    height?: number;
+    muted?: boolean;
+    emptyLabel?: string;
+    errorLabel?: string;
+}
+declare const LiteMediaThumbnail: import("svelte").Component<Props, {}, "">;
+type LiteMediaThumbnail = ReturnType<typeof LiteMediaThumbnail>;
+export default LiteMediaThumbnail;

package/dist/components/LiteShowField.svelte

@@ -6,6 +6,7 @@
   import type { FieldDefinition } from '@svadmin/core';
   import { toSafeHref, toSafeText } from '../security';
   import { isExplicitBooleanTrue } from '../value-normalization';
+  import LiteMediaThumbnail from './LiteMediaThumbnail.svelte';
 
   interface Props {
     field: FieldDefinition;
@@ -52,7 +53,7 @@
     {toSafeText(value)}
   {/if}
 {:else if field.type === 'image' && value}
-  <img src={String(value)} alt={field.label} style="max-width:300px;max-height:200px;border-radius:6px;border:1px solid #e2e8f0;" />
+  <LiteMediaThumbnail src={String(value)} alt={field.label} height={200} />
 {:else if field.type === 'tags' && Array.isArray(value)}
   {#each value as tag, _i (_i)}
     <span class="lite-badge">{tag}</span>

package/dist/components/fields/LiteImageField.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
   import type { FieldDefinition } from '@svadmin/core';
+  import LiteMediaThumbnail from '../LiteMediaThumbnail.svelte';
 
   interface Props {
     field: FieldDefinition;
@@ -23,7 +24,7 @@
   {@const urls = getUrls(value)}
   <div class="lite-inline-md lite-flex-wrap">
     {#each urls as url, _i (_i)}
-      <img src={url} alt={field.label} style="max-height: 100px; border-radius: 4px; border: 1px solid #e5e7eb;" />
+      <LiteMediaThumbnail src={url} alt={field.label} height={100} />
     {:else}
       <span>—</span>
     {/each}
@@ -34,7 +35,7 @@
     {#if urls.length > 0}
       <div class="lite-inline-md lite-flex-wrap" style="margin-bottom: 8px;">
         {#each urls as url, _i (_i)}
-          <img src={url} alt="Current" style="height: 60px; border-radius: 4px; border: 1px solid #e5e7eb; opacity: 0.6;" />
+          <LiteMediaThumbnail src={url} alt="Current" height={60} muted />
         {/each}
       </div>
     {/if}

package/dist/index.d.ts

@@ -18,6 +18,7 @@ export { default as LiteConfirmDialog } from './components/LiteConfirmDialog.sve
 export { default as LiteEmptyState } from './components/LiteEmptyState.svelte';
 export { default as LiteTabs } from './components/LiteTabs.svelte';
 export { default as LiteShowField } from './components/LiteShowField.svelte';
+export { default as LiteMediaThumbnail } from './components/LiteMediaThumbnail.svelte';
 export { default as LiteChatDialog } from './components/LiteChatDialog.svelte';
 export * from './components/buttons/index';
 export * from './components/fields/index';

package/dist/index.js

@@ -22,6 +22,7 @@ export { default as LiteConfirmDialog } from './components/LiteConfirmDialog.sve
 export { default as LiteEmptyState } from './components/LiteEmptyState.svelte';
 export { default as LiteTabs } from './components/LiteTabs.svelte';
 export { default as LiteShowField } from './components/LiteShowField.svelte';
+export { default as LiteMediaThumbnail } from './components/LiteMediaThumbnail.svelte';
 export { default as LiteChatDialog } from './components/LiteChatDialog.svelte';
 // Action Buttons
 export * from './components/buttons/index';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@svadmin/lite",
-  "version": "0.3.24",
+  "version": "0.3.25",
   "description": "SSR-first lightweight admin UI for @svadmin with optional progressive enhancement",
   "type": "module",
   "sideEffects": [