@streamscloud/kit 0.66.0 → 0.67.0

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

@@ -63,7 +63,7 @@ const onCarouselIndexChanged = (index) => {
             active={true}
             on={{ timeUpdate: onPlayerTimeUpdate, durationChange: onPlayerDurationChange, activate: onPlayerActivate }} />
         {:else}
-          <Image src={items[0].url} showStubOnError={true} />
+          <Image src={items[0].url} showStubOnError={true} decoding="sync" />
         {/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} />
+                <Image src={item.url} showStubOnError={true} decoding="sync" />
               {/if}
             </div>
           {/snippet}

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

@@ -1,7 +1,7 @@
 <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, on, stub } = $props();
+let { src, alt = '', showStubOnError = false, decoding = 'auto', 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
@@ -20,7 +20,15 @@ const onLoadError = () => {
 
 <div class="image">
   {#if !!src}
-    <img class="image__img" class:image__img--hidden={imageState !== 'showImage'} srcset={srcset} alt={alt || ''} onload={onLoad} onerror={onLoadError} />
+    <img
+      class="image__img"
+      class:image__img--hidden={imageState !== 'showImage'}
+      srcset={srcset}
+      alt={alt || ''}
+      draggable="false"
+      decoding={decoding}
+      onload={onLoad}
+      onerror={onLoadError} />
   {/if}
 
   {#if imageState === 'showError'}

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

@@ -5,6 +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';
     on?: {
         /** Fires after load attempt; `true` if successful, `false` on error */
         load?: (loadedSuccessfully: boolean) => void;

package/dist/ui/tree/cmp.tree-node-view.svelte

@@ -341,6 +341,7 @@ const handleActionsClosed = () => {
 .tree-node__leaf--drag-over {
   background: var(--sc-kit--color--bg--menu-active);
   outline: 1px solid var(--sc-kit--color--accent);
+  outline-offset: -1px;
 }
 .tree-node__children {
   width: 100%;

package/dist/ui/video/cmp.video.svelte

@@ -263,7 +263,7 @@ const handleSeek = (percent) => {
     <track src="" kind="captions" />
   </video>
   {#if !everActivated && poster}
-    <img class="video__poster" src={poster} alt="" />
+    <img class="video__poster" src={poster} alt="" draggable="false" />
   {/if}
   <div
     class="video__overlay"

package/package.json

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