@streamscloud/kit 0.72.0 → 0.74.0

package/dist/core/actions/index.d.ts

@@ -1,2 +1,3 @@
 export { horizontalWheelScroll } from './horizontal-wheel-scroll';
 export { swallowTouch } from './swallow-touch';
+export { predecodeOnLoad } from './predecode-on-load';

package/dist/core/actions/index.js

@@ -1,2 +1,3 @@
 export { horizontalWheelScroll } from './horizontal-wheel-scroll';
 export { swallowTouch } from './swallow-touch';
+export { predecodeOnLoad } from './predecode-on-load';

package/dist/core/actions/predecode-on-load.d.ts

@@ -0,0 +1,3 @@
+import type { Action } from 'svelte/action';
+/** Decodes the `<img>` once after every load, so a drag ghost snapshotted right after includes the picture. A broken image is ignored. `false` turns it off. */
+export declare const predecodeOnLoad: Action<HTMLImageElement, boolean | undefined>;

package/dist/core/actions/predecode-on-load.js

@@ -0,0 +1,31 @@
+/** Decodes the `<img>` once after every load, so a drag ghost snapshotted right after includes the picture. A broken image is ignored. `false` turns it off. */
+export const predecodeOnLoad = (node, enabled = true) => {
+    let active = enabled;
+    const decode = async () => {
+        try {
+            await node.decode();
+        }
+        catch {
+            // a broken image has nothing to decode
+        }
+    };
+    const decodeLoaded = () => {
+        if (active && node.complete && node.naturalWidth > 0) {
+            void decode();
+        }
+    };
+    node.addEventListener('load', decodeLoaded);
+    decodeLoaded();
+    return {
+        update(nextEnabled = true) {
+            const turnedOn = nextEnabled && !active;
+            active = nextEnabled;
+            if (turnedOn) {
+                decodeLoaded();
+            }
+        },
+        destroy() {
+            node.removeEventListener('load', decodeLoaded);
+        }
+    };
+};

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, decoding = 'auto' } = $props();
+const { items, aspectRatio = 'vertical', objectFit = 'contain', showSeekBar = true, duration, predecode = false } = $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} decoding={decoding} />
+          <Image src={items[0].url} showStubOnError={true} predecode={predecode} />
         {/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} decoding={decoding} />
+                <Image src={item.url} showStubOnError={true} predecode={predecode} />
               {/if}
             </div>
           {/snippet}

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

@@ -15,8 +15,8 @@ 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`. Pass `'sync'` when the card sits in a `DragSource`, or the first drag ghost comes out without the picture. @default 'auto' */
-    decoding?: 'sync' | 'async' | 'auto';
+    /** 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,7 +1,8 @@
-<script lang="ts">import { Icon } from '../icon';
+<script lang="ts">import { predecodeOnLoad } from '../../core/actions';
+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, decoding = 'auto', on, stub } = $props();
+let { src, alt = '', showStubOnError = false, predecode = 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
@@ -26,7 +27,7 @@ const onLoadError = () => {
       srcset={srcset}
       alt={alt || ''}
       draggable="false"
-      decoding={decoding}
+      use:predecodeOnLoad={predecode}
       onload={onLoad}
       onerror={onLoadError} />
   {/if}

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

@@ -5,8 +5,8 @@ type Props = {
     alt?: string;
     /** Show a placeholder stub instead of an error icon when image fails to load */
     showStubOnError?: boolean;
-    /** `'sync'` paints the picture in the same frame as its box — needed when the element can be dragged, or the first drag ghost comes out empty. @default 'auto' */
-    decoding?: 'sync' | 'async' | 'auto';
+    /** 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,10 +1,11 @@
-<script lang="ts">import { Checkbox } from '../checkbox';
+<script lang="ts">import { predecodeOnLoad } from '../../core/actions';
+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, decoding = 'auto', menu, menuLabel, selected = false, checkboxVisibility = 'hover', on } = $props();
+const { title, meta, preview, predecode = false, menu, menuLabel, selected = false, checkboxVisibility = 'hover', on } = $props();
 const localization = new TileCardLocalization();
 // Safari paints no frame for preload="metadata" until a seek target is given.
 const withFirstFrame = (src) => (src.includes('#') ? src : `${src}#t=0.001`);
@@ -19,7 +20,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="" decoding={decoding} />
+        <img class="tile-card__picture" src={preview.image} alt="" use:predecodeOnLoad={predecode} />
       {: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>

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

@@ -6,8 +6,8 @@ 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;
-    /** Decoding of the `image` preview. Pass `'sync'` when the tile sits in a `DragSource`, or the first drag ghost comes out without the picture — the same goes for an `<img>` in a preview snippet. @default 'auto' */
-    decoding?: 'sync' | 'async' | 'auto';
+    /** 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 `use:predecodeOnLoad` 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.72.0",
+  "version": "0.74.0",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",