@streamscloud/kit 0.66.0 → 0.68.0

package/dist/ui/drag-and-drop/cmp.drop-zone.svelte

@@ -91,6 +91,9 @@ isn't in `acceptedEvents` — useful for visible zones where silent inertia coul
   height: 100%;
   position: relative;
 }
+.drop-zone--active, .drop-zone--drag-reject {
+  isolation: isolate;
+}
 .drop-zone--active::before {
   content: "";
   position: absolute;

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 } = $props();
+const { items, aspectRatio = 'vertical', objectFit = 'contain', showSeekBar = true, duration, decoding = 'auto' } = $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} />
+          <Image src={items[0].url} showStubOnError={true} decoding={decoding} />
         {/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={decoding} />
               {/if}
             </div>
           {/snippet}
@@ -123,6 +123,7 @@ The play glyph of a playable item is a `PlayIndicator` — size and shadow are t
 
 <style>.grid-card-media {
   --_grid-card-media--padding: var(--sc-kit--grid-card--media--padding, 0);
+  isolation: isolate;
   width: 100%;
   margin-bottom: 0.5rem;
 }

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

@@ -15,6 +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';
 };
 /**
  * Media slot for `GridCard`. Renders an empty placeholder, a single `Image` / `VideoPlayer`, or

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

@@ -2,7 +2,7 @@
 const { selected, children, on } = $props();
 const interactive = $derived(!!on?.activate);
 const onCardKeydown = (e) => {
-    if (!on?.activate) {
+    if (!on?.activate || e.target !== e.currentTarget) {
         return;
     }
     if (e.key === 'Enter' || e.key === ' ') {
@@ -87,5 +87,4 @@ Inner interactive elements stop event propagation so they don't double-fire acti
   position: absolute;
   top: 0.75rem;
   left: 0.75rem;
-  z-index: 10;
 }</style>

package/dist/ui/grid-card/video-player.svelte

@@ -124,7 +124,10 @@ export const seekTo = (time) => {
     onplay={() => setPlaying(true)}
     onpause={() => setPlaying(false)}
     onended={() => setPlaying(false)}
-    onclick={togglePlay}>
+    onclick={(e) => {
+      e.stopPropagation();
+      togglePlay();
+    }}>
     <track kind="captions" />
   </video>
 

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/player/carousel/cmp.carousel.svelte

@@ -199,6 +199,18 @@ const loadPrevious = Utils.throttle(() => {
 const loadNext = Utils.throttle(() => {
     setIndex(selectedIndex + 1);
 }, animationDuration);
+const onPreviousClick = (e) => {
+    e.stopPropagation();
+    loadPrevious();
+};
+const onNextClick = (e) => {
+    e.stopPropagation();
+    loadNext();
+};
+const onDotClick = (e, index) => {
+    e.stopPropagation();
+    setIndex(index);
+};
 $effect(() => {
     if (previousItems && items !== previousItems) {
         setIndex(0);
@@ -243,24 +255,24 @@ const slidesTranslateX = $derived(swipeTransition || (items.length > 1 ? -slider
   {#if items.length > 1}
     {#if mode === 'arrows-with-counts'}
       <div class="carousel__arrows-with-counts">
-        <button type="button" class="carousel__counts-navigation-button" onclick={loadPrevious} aria-label="none">
+        <button type="button" class="carousel__counts-navigation-button" onclick={onPreviousClick} aria-label="none">
           <Icon src={IconChevronLeft} />
         </button>
         <div class="carousel__counts">{localization.nOfM(selectedIndex + 1, items.length)}</div>
-        <button type="button" class="carousel__counts-navigation-button" onclick={loadNext} aria-label="none">
+        <button type="button" class="carousel__counts-navigation-button" onclick={onNextClick} aria-label="none">
           <Icon src={IconChevronRight} />
         </button>
       </div>
     {:else}
-      <button type="button" class="carousel__navigation-button carousel__navigation-button--prev" onclick={loadPrevious} aria-label="none">
+      <button type="button" class="carousel__navigation-button carousel__navigation-button--prev" onclick={onPreviousClick} aria-label="none">
         <Icon src={IconChevronLeft} />
       </button>
-      <button type="button" class="carousel__navigation-button carousel__navigation-button--next" onclick={loadNext} aria-label="none">
+      <button type="button" class="carousel__navigation-button carousel__navigation-button--next" onclick={onNextClick} aria-label="none">
         <Icon src={IconChevronRight} />
       </button>
       <div class="carousel__dots">
         {#each itemIndices as index (index)}
-          <button type="button" class="carousel__dot" onclick={() => setIndex(index)}>
+          <button type="button" class="carousel__dot" onclick={(e) => onDotClick(e, index)}>
             {#if dot}
               {@render dot({ active: index === selectedIndex })}
             {:else}

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

@@ -0,0 +1,193 @@
+<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, decoding = 'auto', 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`);
+</script>
+
+<div class="tile-card" class:tile-card--selected={selected} class:tile-card--checkbox-always={checkboxVisibility === 'always'}>
+  {#if on?.activate}
+    <button type="button" class="tile-card__hit" aria-label={title} title={title} onclick={() => on?.activate?.()}></button>
+  {/if}
+  {#if preview}
+    <div class="tile-card__preview">
+      {#if typeof preview === 'function'}
+        {@render preview()}
+      {:else if 'image' in preview}
+        <img class="tile-card__picture" src={preview.image} alt="" decoding={decoding} />
+      {: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>
+      {/if}
+    </div>
+  {/if}
+  <div class="tile-card__footer">
+    <div class="tile-card__text">
+      <span class="tile-card__title" title={title}>{title}</span>
+      {#if meta}
+        <span class="tile-card__meta">{meta}</span>
+      {/if}
+    </div>
+    {#if menu}
+      <div class="tile-card__menu">
+        <Popover position="bottom-end" fixedPosition aria-label={menuLabel ?? localization.actions}>
+          {#snippet trigger()}
+            <ToolbarIconButton icon={IconMore} presentational />
+          {/snippet}
+          {@render menu()}
+        </Popover>
+      </div>
+    {/if}
+  </div>
+  {#if on?.select}
+    <div class="tile-card__checkbox">
+      <Checkbox checked={selected} variant="on-accent" title={localization.select} on={{ change: (value) => on?.select?.(value) }} />
+    </div>
+  {/if}
+</div>
+
+<!--
+@component
+File-browser style tile: a full-bleed preview on top and a footer with title, optional meta line and a kebab menu. Selection
+checkbox via `on.select`, whole-card activation via `on.activate`. For a drop-target highlight wrap it in `DropZone`.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--tile-card--background` | Card background | `var(--sc-kit--color--bg--panel)` |
+| `--sc-kit--tile-card--border-color` | Border color | `var(--sc-kit--color--border)` |
+| `--sc-kit--tile-card--border-color--hover` | Border color on hover | `var(--sc-kit--color--border--strong)` |
+| `--sc-kit--tile-card--border-color--selected` | Border color when selected | `var(--sc-kit--color--accent)` |
+| `--sc-kit--tile-card--border-radius` | Border radius | `var(--sc-kit--radius--md)` |
+| `--sc-kit--tile-card--preview--background` | Preview area background | `var(--sc-kit--color--bg--field-alt)` |
+| `--sc-kit--tile-card--preview--aspect-ratio` | Preview aspect ratio | `7 / 5` |
+| `--sc-kit--tile-card--footer--min-height` | Footer minimum height | `52px` |
+-->
+
+<style>.tile-card {
+  --_tile-card--background: var(--sc-kit--tile-card--background, var(--sc-kit--color--bg--panel));
+  --_tile-card--border-color: var(--sc-kit--tile-card--border-color, var(--sc-kit--color--border));
+  --_tile-card--border-color-hover: var(--sc-kit--tile-card--border-color--hover, var(--sc-kit--color--border--strong));
+  --_tile-card--border-color-selected: var(--sc-kit--tile-card--border-color--selected, var(--sc-kit--color--accent));
+  --_tile-card--border-radius: var(--sc-kit--tile-card--border-radius, var(--sc-kit--radius--md));
+  --_tile-card--preview-background: var(--sc-kit--tile-card--preview--background, var(--sc-kit--color--bg--field-alt));
+  --_tile-card--preview-aspect-ratio: var(--sc-kit--tile-card--preview--aspect-ratio, 7 / 5);
+  --_tile-card--footer-min-height: var(--sc-kit--tile-card--footer--min-height, 3.25rem);
+  --_tile-card--checkbox-opacity: 0;
+  position: relative;
+  display: flex;
+  flex-direction: column;
+  inline-size: 100%;
+  overflow: hidden;
+  color: var(--sc-kit--color--text--primary);
+  background: var(--_tile-card--background);
+  border: 1px solid var(--_tile-card--border-color);
+  border-radius: var(--_tile-card--border-radius);
+  transition: border-color var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}
+.tile-card:hover {
+  --_tile-card--border-color: var(--_tile-card--border-color-hover);
+}
+.tile-card:hover, .tile-card:focus-within {
+  --_tile-card--checkbox-opacity: 1;
+}
+.tile-card:has(> .tile-card__hit:focus-visible) {
+  outline: 2px solid var(--sc-kit--color--border--focus);
+  outline-offset: 2px;
+}
+.tile-card--selected {
+  --_tile-card--checkbox-opacity: 1;
+}
+.tile-card--selected, .tile-card--selected:hover {
+  --_tile-card--border-color: var(--_tile-card--border-color-selected);
+}
+.tile-card--checkbox-always {
+  --_tile-card--checkbox-opacity: 1;
+}
+@media (hover: none) {
+  .tile-card {
+    --_tile-card--checkbox-opacity: 1;
+  }
+}
+.tile-card__hit {
+  position: absolute;
+  inset: 0;
+  padding: 0;
+  background: none;
+  border: 0;
+  outline: none;
+  cursor: pointer;
+}
+.tile-card__preview {
+  position: relative;
+  isolation: isolate;
+  container-type: inline-size;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  aspect-ratio: var(--_tile-card--preview-aspect-ratio);
+  overflow: hidden;
+  background: var(--_tile-card--preview-background);
+  pointer-events: none;
+}
+.tile-card__picture {
+  display: block;
+  max-inline-size: 100%;
+  max-block-size: 100%;
+  object-fit: contain;
+}
+.tile-card__play {
+  position: absolute;
+  inset: 0;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+.tile-card__footer {
+  display: grid;
+  grid-template-columns: minmax(0, 1fr) auto;
+  align-items: center;
+  column-gap: var(--sc-kit--space--2);
+  min-block-size: var(--_tile-card--footer-min-height);
+  padding: var(--sc-kit--space--2) var(--sc-kit--space--3) var(--sc-kit--space--2) var(--sc-kit--space--4);
+}
+.tile-card__text {
+  display: flex;
+  flex-direction: column;
+  gap: 0.125rem;
+  min-inline-size: 0;
+}
+.tile-card__title {
+  font-size: var(--sc-kit--font-size--md);
+  font-weight: var(--sc-kit--font-weight--semibold);
+  line-height: var(--sc-kit--leading--tight);
+  text-overflow: ellipsis;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.tile-card__meta {
+  font-size: var(--sc-kit--font-size--xs);
+  line-height: var(--sc-kit--leading--tight);
+  color: var(--sc-kit--color--text--muted);
+  text-overflow: ellipsis;
+  max-width: 100%;
+  white-space: nowrap;
+  overflow: hidden;
+}
+.tile-card__menu {
+  position: relative;
+  display: flex;
+}
+.tile-card__checkbox {
+  position: absolute;
+  inset-block-start: var(--sc-kit--space--3);
+  inset-inline-start: var(--sc-kit--space--3);
+  opacity: var(--_tile-card--checkbox-opacity);
+  transition: opacity var(--sc-kit--duration--base) var(--sc-kit--ease--default);
+}</style>

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

@@ -0,0 +1,43 @@
+import type { TileCardCheckboxVisibility, TileCardPreview } from './types';
+import type { Snippet } from 'svelte';
+type Props = {
+    title: string;
+    /** Secondary line under the title. */
+    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';
+    /** `PopoverItem`s of the kebab menu at the end of the footer. */
+    menu?: Snippet;
+    /** Accessible name of the kebab menu. @default localized "Actions" */
+    menuLabel?: string;
+    selected?: boolean;
+    /** When the checkbox shows: `'hover'` — on hover, focus-within, when selected and on touch screens; `'always'` — permanently. @default 'hover' */
+    checkboxVisibility?: TileCardCheckboxVisibility;
+    on?: {
+        /** Renders the checkbox at the top-left of the preview. */
+        select?: (value: boolean) => void;
+        /** Fires on a click on the card surface or Enter / Space; the checkbox and the menu don't trigger it. */
+        activate?: () => void;
+    };
+};
+/**
+ * File-browser style tile: a full-bleed preview on top and a footer with title, optional meta line and a kebab menu. Selection
+ * checkbox via `on.select`, whole-card activation via `on.activate`. For a drop-target highlight wrap it in `DropZone`.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--tile-card--background` | Card background | `var(--sc-kit--color--bg--panel)` |
+ * | `--sc-kit--tile-card--border-color` | Border color | `var(--sc-kit--color--border)` |
+ * | `--sc-kit--tile-card--border-color--hover` | Border color on hover | `var(--sc-kit--color--border--strong)` |
+ * | `--sc-kit--tile-card--border-color--selected` | Border color when selected | `var(--sc-kit--color--accent)` |
+ * | `--sc-kit--tile-card--border-radius` | Border radius | `var(--sc-kit--radius--md)` |
+ * | `--sc-kit--tile-card--preview--background` | Preview area background | `var(--sc-kit--color--bg--field-alt)` |
+ * | `--sc-kit--tile-card--preview--aspect-ratio` | Preview aspect ratio | `7 / 5` |
+ * | `--sc-kit--tile-card--footer--min-height` | Footer minimum height | `52px` |
+ */
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/tile-card/index.d.ts

@@ -0,0 +1,2 @@
+export type { TileCardCheckboxVisibility, TileCardPreview } from './types';
+export { default as TileCard } from './cmp.tile-card.svelte';

package/dist/ui/tile-card/index.js

@@ -0,0 +1 @@
+export { default as TileCard } from './cmp.tile-card.svelte';

package/dist/ui/tile-card/tile-card-localization.d.ts

@@ -0,0 +1,4 @@
+export declare class TileCardLocalization {
+    get select(): string;
+    get actions(): string;
+}

package/dist/ui/tile-card/tile-card-localization.js

@@ -0,0 +1,19 @@
+import { AppLocale } from '../../core/locale';
+const loc = {
+    select: {
+        en: 'Select',
+        no: 'Velg'
+    },
+    actions: {
+        en: 'Actions',
+        no: 'Handlinger'
+    }
+};
+export class TileCardLocalization {
+    get select() {
+        return loc.select[AppLocale.current];
+    }
+    get actions() {
+        return loc.actions[AppLocale.current];
+    }
+}

package/dist/ui/tile-card/types.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from 'svelte';
+export type TileCardPreview = {
+    image: string;
+} | {
+    video: string;
+    poster?: string;
+} | Snippet;
+export type TileCardCheckboxVisibility = 'hover' | 'always';

package/dist/ui/tile-card/types.js

@@ -0,0 +1 @@
+export {};

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.68.0",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",
@@ -411,6 +411,10 @@
       "types": "./dist/ui/textarea/index.d.ts",
       "svelte": "./dist/ui/textarea/index.js"
     },
+    "./ui/tile-card": {
+      "types": "./dist/ui/tile-card/index.d.ts",
+      "svelte": "./dist/ui/tile-card/index.js"
+    },
     "./ui/time-ago": {
       "types": "./dist/ui/time-ago/index.d.ts",
       "svelte": "./dist/ui/time-ago/index.js"