@streamscloud/kit 0.73.0 → 0.75.0

package/dist/core/utils/image-preloader.d.ts

@@ -1,3 +1 @@
 export declare const preloadImage: (src: string, throwOnError?: boolean) => Promise<void>;
-/** Decodes a loaded `<img>` once, so a drag ghost snapshotted right after includes the picture. A broken image is ignored. */
-export declare const predecodeImage: (img: HTMLImageElement) => Promise<void>;

package/dist/core/utils/image-preloader.js

@@ -8,12 +8,3 @@ export const preloadImage = (src, throwOnError = false) => {
         img.src = src;
     });
 };
-/** Decodes a loaded `<img>` once, so a drag ghost snapshotted right after includes the picture. A broken image is ignored. */
-export const predecodeImage = async (img) => {
-    try {
-        await img.decode();
-    }
-    catch {
-        // a broken image has nothing to decode
-    }
-};

package/dist/ui/grid-card/cmp.grid-card-media.svelte

@@ -8,7 +8,7 @@ import { ProportionalContainer } from '../proportional-container';
 import { SeekBar } from '../seek-bar';
 import VideoPlayer from './video-player.svelte';
 import IconImageOff from '@fluentui/svg-icons/icons/image_off_20_regular.svg?raw';
-const { items, aspectRatio = 'vertical', objectFit = 'contain', showSeekBar = true, duration, predecode = false } = $props();
+const { items, aspectRatio = 'vertical', objectFit = 'contain', showSeekBar = true, duration } = $props();
 let currentIndex = $state(0);
 let currentTime = $state(0);
 let mediaDuration = $state(NaN);
@@ -63,7 +63,7 @@ const onCarouselIndexChanged = (index) => {
             active={true}
             on={{ timeUpdate: onPlayerTimeUpdate, durationChange: onPlayerDurationChange, activate: onPlayerActivate }} />
         {:else}
-          <Image src={items[0].url} showStubOnError={true} predecode={predecode} />
+          <Image src={items[0].url} showStubOnError={true} />
         {/if}
       </div>
     {:else}
@@ -78,7 +78,7 @@ const onCarouselIndexChanged = (index) => {
                   active={item === items[currentIndex]}
                   on={{ timeUpdate: onPlayerTimeUpdate, durationChange: onPlayerDurationChange, activate: onPlayerActivate }} />
               {:else}
-                <Image src={item.url} showStubOnError={true} predecode={predecode} />
+                <Image src={item.url} showStubOnError={true} />
               {/if}
             </div>
           {/snippet}

package/dist/ui/grid-card/cmp.grid-card-media.svelte.d.ts

@@ -15,8 +15,6 @@ type Props = {
     showSeekBar?: boolean;
     /** Duration in seconds; rendered as a badge overlay at the bottom-right of the media. `≤ 0` / `undefined` renders nothing. */
     duration?: number;
-    /** Forwarded to each `Image`. Set it when the card sits in a `DragSource`, or the first drag ghost comes out without the picture. @default false */
-    predecode?: boolean;
 };
 /**
  * Media slot for `GridCard`. Renders an empty placeholder, a single `Image` / `VideoPlayer`, or

package/dist/ui/image/cmp.image.svelte

@@ -1,18 +1,14 @@
-<script lang="ts">import { predecodeImage } from '../../core/utils';
-import { Icon } from '../icon';
+<script lang="ts">import { Icon } from '../icon';
 import { calculateImageState } from './image-state';
 import IconImageOff from '@fluentui/svg-icons/icons/image_off_20_regular.svg?raw';
-let { src, alt = '', showStubOnError = false, predecode = false, on, stub } = $props();
+let { src, alt = '', showStubOnError = false, on, stub } = $props();
 let hasError = $state(false);
 const imageState = $derived(calculateImageState(src, hasError, showStubOnError));
 // A 0.01x density makes the intrinsic size 100× the natural one, so `contain` sizing always scales the picture
 // down to fit — small pictures upscale too — and the box hugs the picture, rounding its own corners.
 // `src` must stay unset: it would join srcset as the 1x candidate and win.
 const srcset = $derived(src ? `${src.replace(/\s/g, (char) => encodeURIComponent(char))} 0.01x` : undefined);
-const onLoad = (event) => {
-    if (predecode && event.currentTarget instanceof HTMLImageElement) {
-        void predecodeImage(event.currentTarget);
-    }
+const onLoad = () => {
     hasError = false;
     on?.load?.(true);
 };

package/dist/ui/image/cmp.image.svelte.d.ts

@@ -5,8 +5,6 @@ type Props = {
     alt?: string;
     /** Show a placeholder stub instead of an error icon when image fails to load */
     showStubOnError?: boolean;
-    /** Decodes the picture once right after it loads. Set it when the element can be dragged, or the first drag ghost comes out empty. @default false */
-    predecode?: boolean;
     on?: {
         /** Fires after load attempt; `true` if successful, `false` on error */
         load?: (loadedSuccessfully: boolean) => void;

package/dist/ui/tile-card/cmp.tile-card.svelte

@@ -1,17 +1,11 @@
-<script lang="ts">import { predecodeImage } from '../../core/utils';
-import { Checkbox } from '../checkbox';
+<script lang="ts">import { Checkbox } from '../checkbox';
 import { ToolbarIconButton } from '../page-toolbar';
 import { PlayIndicator } from '../play-indicator';
 import { Popover } from '../popover';
 import { TileCardLocalization } from './tile-card-localization';
 import IconMore from '@fluentui/svg-icons/icons/more_vertical_20_regular.svg?raw';
-const { title, meta, preview, predecode = false, menu, menuLabel, selected = false, checkboxVisibility = 'hover', on } = $props();
+const { title, meta, preview, menu, menuLabel, selected = false, checkboxVisibility = 'hover', on } = $props();
 const localization = new TileCardLocalization();
-const onPictureLoad = (event) => {
-    if (predecode && event.currentTarget instanceof HTMLImageElement) {
-        void predecodeImage(event.currentTarget);
-    }
-};
 // Safari paints no frame for preload="metadata" until a seek target is given.
 const withFirstFrame = (src) => (src.includes('#') ? src : `${src}#t=0.001`);
 </script>
@@ -25,7 +19,7 @@ const withFirstFrame = (src) => (src.includes('#') ? src : `${src}#t=0.001`);
       {#if typeof preview === 'function'}
         {@render preview()}
       {:else if 'image' in preview}
-        <img class="tile-card__picture" src={preview.image} alt="" onload={onPictureLoad} />
+        <img class="tile-card__picture" src={preview.image} alt="" />
       {:else}
         <video class="tile-card__picture" src={withFirstFrame(preview.video)} poster={preview.poster} preload="metadata" muted playsinline></video>
         <span class="tile-card__play"><PlayIndicator /></span>
@@ -142,10 +136,12 @@ checkbox via `on.select`, whole-card activation via `on.activate`. For a drop-ta
   pointer-events: none;
 }
 .tile-card__picture {
+  position: absolute;
+  inset: 0;
   display: block;
   max-inline-size: 100%;
   max-block-size: 100%;
-  object-fit: contain;
+  margin: auto;
 }
 .tile-card__play {
   position: absolute;

package/dist/ui/tile-card/cmp.tile-card.svelte.d.ts

@@ -6,8 +6,6 @@ type Props = {
     meta?: string;
     /** Top area: `image` / `video` render a drag-safe picture or frame (contain, never upscaled; a video gets a play glyph); a snippet renders custom content. The area is `pointer-events: none` — interactive content belongs in `menu` or `on.activate`. */
     preview?: TileCardPreview;
-    /** Decodes the `image` preview once right after it loads. Set it when the tile sits in a `DragSource`, or the first drag ghost comes out without the picture — an `<img>` in a preview snippet needs `predecodeImage` from its owner. @default false */
-    predecode?: boolean;
     /** `PopoverItem`s of the kebab menu at the end of the footer. */
     menu?: Snippet;
     /** Accessible name of the kebab menu. @default localized "Actions" */

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.73.0",
+  "version": "0.75.0",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",