@streamscloud/kit 0.67.0 → 0.68.1

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/file-uploader/file-type-colors.d.ts

@@ -5,4 +5,8 @@ export declare const fileTypeColors: Record<string, string>;
  * entry of `fileTypeColors` counts regardless of length (`.sketch`).
  */
 export declare const fileTypeFromName: (name: string) => string;
-export declare const fileTypeColor: (type: string) => string;
+/**
+ * Stamp color of a file type (an extension, e.g. from `fileTypeFromName`). `fallback` is returned for a type missing from
+ * `fileTypeColors` — pass your own color, or `''` to detect an unknown type.
+ */
+export declare const fileTypeColor: (type: string, fallback?: string) => string;

package/dist/ui/file-uploader/file-type-colors.js

@@ -6,24 +6,49 @@ export const fileTypeColors = {
     pdf: '#e15554',
     doc: '#144ab0',
     docx: '#144ab0',
+    odt: '#144ab0',
+    rtf: '#144ab0',
     xls: '#10b981',
     xlsx: '#10b981',
+    ods: '#10b981',
     csv: '#10b981',
     ppt: '#e0772e',
     pptx: '#e0772e',
+    odp: '#e0772e',
     zip: '#f5a623',
     rar: '#f5a623',
+    '7z': '#f5a623',
+    tar: '#f5a623',
+    gz: '#f5a623',
+    tgz: '#f5a623',
+    bz2: '#f5a623',
     fig: '#1abc9c',
     sketch: '#fdb022',
     png: '#8b5cf6',
     jpg: '#8b5cf6',
     jpeg: '#8b5cf6',
     gif: '#8b5cf6',
+    webp: '#8b5cf6',
+    avif: '#8b5cf6',
+    heic: '#8b5cf6',
+    heif: '#8b5cf6',
+    bmp: '#8b5cf6',
+    tif: '#8b5cf6',
+    tiff: '#8b5cf6',
     svg: '#7c3aed',
     mp4: '#ec4899',
     mov: '#ec4899',
+    webm: '#ec4899',
+    mkv: '#ec4899',
+    avi: '#ec4899',
+    m4v: '#ec4899',
     mp3: '#f97066',
     wav: '#f97066',
+    ogg: '#f97066',
+    m4a: '#f97066',
+    flac: '#f97066',
+    aac: '#f97066',
+    opus: '#f97066',
     txt: '#6b7280',
     md: '#6b7280',
     json: '#7c3aed',
@@ -45,4 +70,8 @@ export const fileTypeFromName = (name) => {
     const tail = name.slice(dot + 1).toLowerCase();
     return fileTypeColors[tail] !== undefined || EXTENSION_SHAPE.test(tail) ? tail : '';
 };
-export const fileTypeColor = (type) => fileTypeColors[type.toLowerCase()] ?? '#6b7280';
+/**
+ * Stamp color of a file type (an extension, e.g. from `fileTypeFromName`). `fallback` is returned for a type missing from
+ * `fileTypeColors` — pass your own color, or `''` to detect an unknown type.
+ */
+export const fileTypeColor = (type, fallback = '#6b7280') => fileTypeColors[type.toLowerCase()] ?? fallback;

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} decoding="sync" />
+          <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} decoding="sync" />
+                <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/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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.67.0",
+  "version": "0.68.1",
   "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"