@streamscloud/kit 0.10.7-1781475571897 → 0.10.7-1781511135617

package/dist/ui/badge/cmp.badge.svelte

@@ -1,14 +1,17 @@
-<script lang="ts">const { variant = 'neutral', size = 'md', style = 'soft', fullWidth = false, children } = $props();
-export {};
+<script lang="ts">import { IconSlot } from '../icon';
+const { variant = 'neutral', size = 'md', style = 'soft', fullWidth = false, icon, children } = $props();
 </script>
 
 <span class="badge badge--{size} badge--{variant}-{style}" class:badge--full={fullWidth}>
+  {#if icon}
+    <span class="badge__icon" aria-hidden="true"><IconSlot icon={icon} /></span>
+  {/if}
   <span class="badge__content">{@render children()}</span>
 </span>
 
 <!--
 @component
-Pill-shaped status indicator. Use `solid` for stronger emphasis, `soft` (default) for a calm tinted fill that pairs with body content.
+Pill-shaped status indicator. Use `solid` for stronger emphasis, `soft` (default) for a calm tinted fill that pairs with body content. Optional leading `icon` renders in its own slot; the text content keeps its own ellipsis when it overflows.
 
 ### CSS Custom Properties
 | Property | Description | Default |
@@ -38,9 +41,14 @@ Pill-shaped status indicator. Use `solid` for stronger emphasis, `soft` (default
   background: var(--_badge--background);
   font-size: var(--_badge--font-size);
   font-weight: var(--_badge--font-weight);
-  line-height: 1.4;
+  line-height: var(--sc-kit--leading--tight);
   max-width: 100%;
 }
+.badge__icon {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
 .badge__content {
   min-width: 0;
   overflow: hidden;

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

@@ -1,3 +1,4 @@
+import { type IconProp } from '../icon';
 import type { BadgeVariant } from './types';
 import type { Snippet } from 'svelte';
 type Props = {
@@ -9,10 +10,12 @@ type Props = {
     style?: 'soft' | 'solid';
     /** Stretch to fill the parent's inline axis, centering the content. @default false */
     fullWidth?: boolean;
+    /** Optional leading icon. */
+    icon?: IconProp;
     children: Snippet;
 };
 /**
- * Pill-shaped status indicator. Use `solid` for stronger emphasis, `soft` (default) for a calm tinted fill that pairs with body content.
+ * Pill-shaped status indicator. Use `solid` for stronger emphasis, `soft` (default) for a calm tinted fill that pairs with body content. Optional leading `icon` renders in its own slot; the text content keeps its own ellipsis when it overflows.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |

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

@@ -4,14 +4,13 @@ import { PlaybackManager } from '../media-playback';
 import { Carousel } from '../player/carousel';
 import { ProportionalContainer } from '../proportional-container';
 import { SeekBar } from '../seek-bar';
-import { default as VideoPlayer } from './cmp.video-player.svelte';
+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();
 let currentIndex = $state(0);
 let currentTime = $state(0);
 let mediaDuration = $state(NaN);
 let activePlayerId = $state.raw(null);
-const hasPlayable = $derived(items.some((item) => item.playable));
 const isCurrentPlayable = $derived(items[currentIndex]?.playable === true);
 const progress = $derived(mediaDuration ? currentTime / mediaDuration : 0);
 const onPlayerTimeUpdate = (t) => (currentTime = t);
@@ -52,6 +51,7 @@ const onCarouselIndexChanged = (index) => {
       {#if items[0].playable}
         <VideoPlayer
           src={items[0].url}
+          poster={items[0].cover}
           active={true}
           on={{ timeUpdate: onPlayerTimeUpdate, durationChange: onPlayerDurationChange, activate: onPlayerActivate }} />
       {:else}
@@ -65,6 +65,7 @@ const onCarouselIndexChanged = (index) => {
               {#if item.playable}
                 <VideoPlayer
                   src={item.url}
+                  poster={item.cover}
                   active={item === items[currentIndex]}
                   on={{ timeUpdate: onPlayerTimeUpdate, durationChange: onPlayerDurationChange, activate: onPlayerActivate }} />
               {:else}
@@ -82,7 +83,7 @@ const onCarouselIndexChanged = (index) => {
   </ProportionalContainer>
 </div>
 
-{#if showSeekBar && hasPlayable}
+{#if showSeekBar}
   <div class="seek-bar-section">
     <div class="seek-bar-section__content">
       <div class="seek-bar-section__bar" class:seek-bar-section__bar--hidden={!isCurrentPlayable}>
@@ -95,9 +96,9 @@ const onCarouselIndexChanged = (index) => {
 <!--
 @component
 Media slot for `GridCard`. Renders an empty placeholder, a single `Image` / `VideoPlayer`, or
-a `Carousel` of mixed image / video items. Seek-bar appears below the media when any item is
-playable; in a carousel it's hidden via `visibility: hidden` when the current slide is an
-image (preserves card height). Optional `duration` overlay renders bottom-right.
+a `Carousel` of mixed image / video items. Seek-bar renders below the media whenever `showSeekBar`
+(default true); the bar itself is hidden via `visibility: hidden` when the current item isn't
+playable (preserves card height). Optional `duration` overlay renders bottom-right.
 
 ### CSS Custom Properties
 | Property | Description | Default |

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

@@ -2,6 +2,8 @@ import type { AspectRatio, ObjectFit } from './types';
 export type MediaItem = {
     url: string;
     playable?: boolean;
+    /** Poster shown for a playable item before playback; falls back to the video's first frame. */
+    cover?: string;
 };
 type Props = {
     items: MediaItem[];
@@ -16,9 +18,9 @@ type Props = {
 };
 /**
  * Media slot for `GridCard`. Renders an empty placeholder, a single `Image` / `VideoPlayer`, or
- * a `Carousel` of mixed image / video items. Seek-bar appears below the media when any item is
- * playable; in a carousel it's hidden via `visibility: hidden` when the current slide is an
- * image (preserves card height). Optional `duration` overlay renders bottom-right.
+ * a `Carousel` of mixed image / video items. Seek-bar renders below the media whenever `showSeekBar`
+ * (default true); the bar itself is hidden via `visibility: hidden` when the current item isn't
+ * playable (preserves card height). Optional `duration` overlay renders bottom-right.
  *
  * ### CSS Custom Properties
  * | Property | Description | Default |

package/dist/ui/grid-card/fields/cmp.grid-card-badge-field.svelte

@@ -1,16 +1,14 @@
 <script lang="ts">import { Badge } from '../../badge';
-import { IconSlot } from '../../icon';
 import GridCardField from './cmp.grid-card-field.svelte';
 const { label, text, variant = 'neutral', style = 'soft', icon } = $props();
 </script>
 
 <GridCardField label={label}>
-  <Badge variant={variant} style={style} size="sm">
-    {#if icon}
-      <span class="grid-card-badge-field__icon" aria-hidden="true"><IconSlot icon={icon} /></span>
-    {/if}
-    {text}
-  </Badge>
+  <span class="grid-card-badge-field">
+    <Badge variant={variant} style={style} size="sm" icon={icon}>
+      {text}
+    </Badge>
+  </span>
 </GridCardField>
 
 <!--
@@ -20,9 +18,7 @@ inside a `<GridCardField>` so it aligns with text rows. Use for content status,
 plan / tier indicators, etc.
 -->
 
-<style>.grid-card-badge-field__icon {
-  display: inline-flex;
-  align-items: center;
+<style>.grid-card-badge-field {
+  display: contents;
   --sc-kit--icon--size: 0.875em;
-  --sc-kit--icon--color: currentColor;
 }</style>

package/dist/ui/grid-card/fields/cmp.grid-card-badge-field.svelte.d.ts

@@ -1,5 +1,5 @@
 import type { BadgeVariant } from '../../badge';
-import { type IconProp } from '../../icon';
+import type { IconProp } from '../../icon';
 type Props = {
     label: string;
     text: string;

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

@@ -3,8 +3,8 @@ export {};
 </script>
 
 <div class="grid-card-field" class:grid-card-field--multiline={multiline} class:grid-card-field--vertical={vertical}>
-  <span class="grid-card-field__label">{label}</span>
-  <div class="grid-card-field__content">
+  <span class="grid-card-field__label" class:grid-card-field__label--vertical={vertical}>{label}</span>
+  <div class="grid-card-field__content" class:grid-card-field__content--multiline={multiline} class:grid-card-field__content--vertical={vertical}>
     {@render children()}
   </div>
 </div>
@@ -43,9 +43,6 @@ content; set `vertical` to stack the label above the content (escapes the subgri
   grid-row-gap: 0.25rem;
   padding: var(--_gcf--padding-block) var(--_gcf--padding-inline);
 }
-.grid-card-field--vertical .grid-card-field__label, .grid-card-field--vertical .grid-card-field__content {
-  padding: 0;
-}
 .grid-card-field__label {
   font-size: 0.625rem;
   color: var(--sc-kit--color--text--secondary);
@@ -54,8 +51,19 @@ content; set `vertical` to stack the label above the content (escapes the subgri
   white-space: nowrap;
   line-height: var(--sc-kit--leading--tight);
 }
+.grid-card-field__label--vertical {
+  padding: 0;
+}
 .grid-card-field__content {
+  display: flex;
+  align-items: center;
   padding-block: var(--_gcf--padding-block);
   padding-inline-end: var(--_gcf--padding-inline);
   min-width: 0;
+}
+.grid-card-field__content--multiline {
+  align-items: flex-start;
+}
+.grid-card-field__content--vertical {
+  padding: 0;
 }</style>

package/dist/ui/grid-card/{cmp.video-player.svelte → video-player.svelte}

@@ -4,7 +4,7 @@ import { PlaybackManager } from '../media-playback';
 import IconPause from '@fluentui/svg-icons/icons/pause_20_regular.svg?raw';
 import IconPlay from '@fluentui/svg-icons/icons/play_20_regular.svg?raw';
 import { untrack } from 'svelte';
-const { src, active, on } = $props();
+const { src, poster, active, on } = $props();
 const id = randomNanoid();
 let videoEl = $state(null);
 let currentTime = $state(0);
@@ -115,6 +115,7 @@ export const seekTo = (time) => {
   <video
     bind:this={videoEl}
     src={src}
+    poster={poster}
     controls={false}
     preload="auto"
     ontimeupdate={onTimeUpdate}

package/dist/ui/grid-card/{cmp.video-player.svelte.d.ts → video-player.svelte.d.ts}

@@ -1,5 +1,7 @@
 type Props = {
     src: string;
+    /** Poster image shown before playback; falls back to the video's first frame when omitted. */
+    poster?: string;
     /**
      * When `true`, the player re-publishes its current `currentTime` / `duration` upward via
      * `on.timeUpdate` / `on.durationChange` so the parent can read this slide's state on
@@ -19,8 +21,8 @@ type Props = {
  * with the global `PlaybackManager` so only one player can play at a time. Exposes `seekTo(t)`
  * via `bind:this` for parent seek-bar sync. Not exported standalone — use `GridCardMedia`.
  */
-declare const Cmp: import("svelte").Component<Props, {
+declare const VideoPlayer: import("svelte").Component<Props, {
     seekTo: (time: number) => void;
 }, "">;
-type Cmp = ReturnType<typeof Cmp>;
-export default Cmp;
+type VideoPlayer = ReturnType<typeof VideoPlayer>;
+export default VideoPlayer;

package/dist/ui/select/select-internals.d.ts

@@ -25,9 +25,14 @@ export declare const buildFuseIndex: <T>(items: SelectItem<T>[]) => Fuse<FlatOpt
  * shape so the core's group-header logic keeps working. Empty query returns the original
  * items untouched.
  *
+ * Results are ordered by relevance, not by the original list order: matches rank
+ * prefix > substring > scattered-fuzzy (the Fuse score breaks ties within a tier), groups
+ * are ordered by their best hit, and options keep that order inside each group. Scattered
+ * fuzzy hits are a typo fallback only — they are dropped whenever any prefix/substring hit
+ * exists, so a real match is never buried under noise.
+ *
  * Group labels participate in the match: when a group's label fuzzy-matches the query, the
  * entire group (header + every child) is included regardless of whether the children
- * themselves matched. Matched children also bubble their parent group into the result so
- * the tree structure stays readable.
+ * themselves matched.
  */
 export declare const runFuseSearch: <T>(fuse: Fuse<FlatOption<T>>, query: string, items: SelectItem<T>[]) => SelectItem<T>[];

package/dist/ui/select/select-internals.js

@@ -52,56 +52,72 @@ export const moveHighlightIndex = (indices, current, delta) => {
  * locally inside their `loadOptions` shim. Async impls don't need this — the server does
  * the filtering.
  */
-export const buildFuseIndex = (items) => new Fuse(flattenItems(items), { keys: ['option.label'], threshold: 0.4, ignoreLocation: true });
+export const buildFuseIndex = (items) => new Fuse(flattenItems(items), { keys: ['option.label'], threshold: 0.4, ignoreLocation: true, includeScore: true });
 /**
  * Runs a fuzzy search via the Fuse index and reconstructs the grouped `SelectItem<T>[]`
  * shape so the core's group-header logic keeps working. Empty query returns the original
  * items untouched.
  *
+ * Results are ordered by relevance, not by the original list order: matches rank
+ * prefix > substring > scattered-fuzzy (the Fuse score breaks ties within a tier), groups
+ * are ordered by their best hit, and options keep that order inside each group. Scattered
+ * fuzzy hits are a typo fallback only — they are dropped whenever any prefix/substring hit
+ * exists, so a real match is never buried under noise.
+ *
  * Group labels participate in the match: when a group's label fuzzy-matches the query, the
  * entire group (header + every child) is included regardless of whether the children
- * themselves matched. Matched children also bubble their parent group into the result so
- * the tree structure stays readable.
+ * themselves matched.
  */
 export const runFuseSearch = (fuse, query, items) => {
     if (!query) {
         return items;
     }
-    const hits = fuse.search(query).map((r) => r.item);
+    const needle = query.toLowerCase();
+    const rankOf = (label, score) => {
+        const haystack = label.toLowerCase();
+        const tier = haystack.startsWith(needle) ? 0 : haystack.includes(needle) ? 1 : 2;
+        return tier + score;
+    };
+    const ranked = fuse
+        .search(query)
+        .map((r) => ({ flat: r.item, rank: rankOf(r.item.option.label, r.score ?? 1) }))
+        .sort((a, b) => a.rank - b.rank);
+    const hasExact = ranked.some((r) => r.rank < 2);
+    const matches = hasExact ? ranked.filter((r) => r.rank < 2) : ranked;
+    const groups = items.filter(isSelectGroup);
+    const labelMatches = new Set();
+    if (groups.length > 0) {
+        const labelFuse = new Fuse(groups.map((g) => ({ label: g.label })), { keys: ['label'], threshold: 0.4, ignoreLocation: true });
+        for (const hit of labelFuse.search(query)) {
+            labelMatches.add(hit.item.label);
+        }
+    }
     const groupBuckets = new Map();
+    const groupRank = new Map();
     const standalone = [];
-    for (const hit of hits) {
-        if (hit.group) {
-            const bucket = groupBuckets.get(hit.group);
+    matches.forEach(({ flat }, i) => {
+        if (flat.group) {
+            const bucket = groupBuckets.get(flat.group);
             if (bucket) {
-                bucket.push(hit.option);
+                bucket.push(flat.option);
             }
             else {
-                groupBuckets.set(hit.group, [hit.option]);
+                groupBuckets.set(flat.group, [flat.option]);
+                groupRank.set(flat.group, i);
             }
         }
         else {
-            standalone.push(hit.option);
+            standalone.push(flat.option);
         }
-    }
-    // Fuzzy-match group labels: build a tiny per-call Fuse just over group label entries.
-    // Cheap (one item per group) and reuses the same threshold so behavior matches options.
-    const groups = items.filter(isSelectGroup);
-    const labelMatches = new Set();
-    if (groups.length > 0) {
-        const labelFuse = new Fuse(groups.map((g) => ({ label: g.label })), { keys: ['label'], threshold: 0.4, ignoreLocation: true });
-        for (const hit of labelFuse.search(query)) {
-            labelMatches.add(hit.item.label);
-        }
-    }
+    });
     const out = [];
-    for (const item of items) {
-        if (isSelectGroup(item)) {
-            // Group label matched → include every child. Otherwise include only the children that matched.
-            const childrenForRender = labelMatches.has(item.label) ? item.options : groupBuckets.get(item.label);
-            if (childrenForRender && childrenForRender.length > 0) {
-                out.push({ label: item.label, value: item.value, options: childrenForRender });
-            }
+    const matchedGroups = groups
+        .filter((g) => groupBuckets.has(g.label) || labelMatches.has(g.label))
+        .sort((a, b) => (groupRank.get(a.label) ?? Infinity) - (groupRank.get(b.label) ?? Infinity));
+    for (const g of matchedGroups) {
+        const options = labelMatches.has(g.label) ? g.options : (groupBuckets.get(g.label) ?? []);
+        if (options.length > 0) {
+            out.push({ label: g.label, value: g.value, options });
         }
     }
     for (const opt of standalone) {

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.10.7-1781475571897",
+  "version": "0.10.7-1781511135617",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",