@streamscloud/kit 0.19.7 → 0.20.0

package/dist/styles/_semantic.scss

@@ -174,6 +174,11 @@
   --sc-kit--shadow--card: 0 1px 1px rgba(0, 0, 0, 0.1);
   --sc-kit--shadow--focus: var(--sc-kit--focus-ring);
 
+  // ============================================================
+  // FILTERS
+  // ============================================================
+  --sc-kit--filter--icon-overlay: drop-shadow(1px 1px #000);
+
   // ============================================================
   // MOTION
   // ============================================================

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

@@ -1,4 +1,5 @@
-<script lang="ts">import { Duration } from '../duration';
+<script lang="ts">import { Utils } from '../../core/utils';
+import { Duration } from '../duration';
 import { Icon } from '../icon';
 import { Image } from '../image';
 import { PlaybackManager } from '../media-playback';
@@ -18,6 +19,9 @@ const onPlayerTimeUpdate = (t) => (currentTime = t);
 const onPlayerDurationChange = (d) => (mediaDuration = d);
 const onPlayerActivate = (id) => (activePlayerId = id);
 const normalizedRatio = $derived.by(() => {
+    if (typeof aspectRatio === 'number') {
+        return aspectRatio;
+    }
     switch (aspectRatio) {
         case 'vertical':
             return 9 / 16;
@@ -25,6 +29,8 @@ const normalizedRatio = $derived.by(() => {
             return 1;
         case 'horizontal':
             return 16 / 9;
+        default:
+            return Utils.assertUnreachable(aspectRatio);
     }
 });
 const onSeek = (value) => {

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

@@ -1,4 +1,4 @@
-/** Aspect ratio preset for `GridCardMedia`. */
-export type AspectRatio = 'vertical' | 'square' | 'horizontal';
+/** Aspect ratio for `GridCardMedia` — a named preset or a custom width/height number (e.g. `4 / 3`). */
+export type AspectRatio = 'vertical' | 'square' | 'horizontal' | number;
 /** Object-fit mode for media inside the card's media slot. */
 export type ObjectFit = 'contain' | 'cover';

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

@@ -171,7 +171,7 @@ via `bind:this` for parent seek-bar sync. Not exported standalone — use `GridC
   border: none;
   background: none;
   cursor: pointer;
-  --sc-kit--icon--filter: drop-shadow(1px 1px black);
+  --sc-kit--icon--filter: var(--sc-kit--filter--icon-overlay);
   transition: opacity var(--sc-kit--duration--base) var(--sc-kit--ease--default);
 }
 .video-player__control-button.is-playing {

package/dist/ui/play-indicator/cmp.play-indicator.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">import { Icon } from '../icon';
+import IconPlay from '@fluentui/svg-icons/icons/play_20_regular.svg?raw';
+</script>
+
+<div class="play-indicator">
+  <Icon src={IconPlay} color="on-accent" />
+</div>
+
+<!--
+@component
+Decorative play glyph overlaid on a static cover/thumbnail to mark it as video. Not a player: it plays
+nothing and is `pointer-events: none`. Matches the built-in play button of kit's `Video`. The parent
+positions it (typically absolute-centered) and must be `container-type: inline-size` for the default
+container-query size to scale.
+
+### CSS Custom Properties
+| Property | Description | Default |
+|---|---|---|
+| `--sc-kit--play-indicator--size` | Glyph size; container-query clamp scales it to parent width | `clamp(1.75rem, 12cqi, 3.5rem)` |
+-->
+
+<style>.play-indicator {
+  --_play-indicator--size: var(--sc-kit--play-indicator--size, clamp(1.75rem, 12cqi, 3.5rem));
+  display: inline-flex;
+  pointer-events: none;
+  --sc-kit--icon--size: var(--_play-indicator--size);
+  --sc-kit--icon--filter: var(--sc-kit--filter--icon-overlay);
+}</style>

package/dist/ui/play-indicator/cmp.play-indicator.svelte.d.ts

@@ -0,0 +1,29 @@
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+/**
+ * Decorative play glyph overlaid on a static cover/thumbnail to mark it as video. Not a player: it plays
+ * nothing and is `pointer-events: none`. Matches the built-in play button of kit's `Video`. The parent
+ * positions it (typically absolute-centered) and must be `container-type: inline-size` for the default
+ * container-query size to scale.
+ *
+ * ### CSS Custom Properties
+ * | Property | Description | Default |
+ * |---|---|---|
+ * | `--sc-kit--play-indicator--size` | Glyph size; container-query clamp scales it to parent width | `clamp(1.75rem, 12cqi, 3.5rem)` |
+ */
+declare const Cmp: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Cmp = InstanceType<typeof Cmp>;
+export default Cmp;

package/dist/ui/play-indicator/index.d.ts

@@ -0,0 +1 @@
+export { default as PlayIndicator } from './cmp.play-indicator.svelte';

package/dist/ui/play-indicator/index.js

@@ -0,0 +1 @@
+export { default as PlayIndicator } from './cmp.play-indicator.svelte';

package/dist/ui/table/table-cells/table-badge-cell.svelte

@@ -1,15 +1,20 @@
 <script lang="ts" generics="T extends {id: string}">import { Badge } from '../../badge';
-let { item, column } = $props();
+let { item, column, centered } = $props();
 const getValueForColumn = (column, item) => (column.valueFactory ? column.valueFactory(item) : String(item[column.id]));
 const variant = $derived(column.variantFactory ? column.variantFactory(item) : 'neutral');
 </script>
 
 {#if getValueForColumn(column, item) !== null}
-  <div class="table-badge-cell">
+  <div class="table-badge-cell" class:table-badge-cell--centered={centered}>
     <Badge variant={variant} fullWidth={column.fullWidth}>{getValueForColumn(column, item)}</Badge>
   </div>
 {/if}
 
 <style>.table-badge-cell {
-  width: 100%;
+  display: flex;
+  inline-size: 100%;
+}
+
+.table-badge-cell--centered {
+  justify-content: center;
 }</style>

package/dist/ui/table/table-cells/table-badge-cell.svelte.d.ts

@@ -5,6 +5,7 @@ declare function $$render<T extends {
     props: {
         item: T;
         column: ITableBadgeColumn<T>;
+        centered: boolean;
     };
     exports: {};
     bindings: "";

package/dist/ui/table/table-cells/table-button-cell.svelte

@@ -1,5 +1,5 @@
 <script lang="ts" generics="T extends {id: string}">import { Button } from '../../button';
-let { item, column } = $props();
+let { item, column, centered } = $props();
 const getValueForColumn = (column, item) => (column.valueFactory ? column.valueFactory(item) : String(item[column.id]));
 const variant = $derived(column.styleFactory ? column.styleFactory(item) : undefined);
 const size = $derived(column.sizeFactory ? column.sizeFactory(item) : undefined);
@@ -10,11 +10,16 @@ const handleClick = (e) => {
 </script>
 
 {#if getValueForColumn(column, item) !== null}
-  <div class="table-button-cell">
+  <div class="table-button-cell" class:table-button-cell--centered={centered}>
     <Button type="button" variant={variant} size={size} on={{ click: handleClick }}>{getValueForColumn(column, item)}</Button>
   </div>
 {/if}
 
 <style>.table-button-cell {
-  width: 100%;
+  display: flex;
+  inline-size: 100%;
+}
+
+.table-button-cell--centered {
+  justify-content: center;
 }</style>

package/dist/ui/table/table-cells/table-button-cell.svelte.d.ts

@@ -5,6 +5,7 @@ declare function $$render<T extends {
     props: {
         item: T;
         column: ITableButtonColumn<T>;
+        centered: boolean;
     };
     exports: {};
     bindings: "";

package/dist/ui/table/table-cells/table-cell.svelte

@@ -45,9 +45,9 @@ const changeItemPosition = (target, positionChange) => {
     </TableActionsCell>
   {/if}
 {:else if def.type === 'badge'}
-  <TableBadgeCell column={def} item={item} />
+  <TableBadgeCell column={def} item={item} centered={column.centered} />
 {:else if def.type === 'button'}
-  <TableButtonCell column={def} item={item} />
+  <TableButtonCell column={def} item={item} centered={column.centered} />
 {:else if def.type === 'by'}
   <TableByCell column={def} item={item} />
 {:else if def.type === 'checkbox'}
@@ -55,7 +55,7 @@ const changeItemPosition = (target, positionChange) => {
 {:else if def.type === 'custom'}
   <TableCustomCell column={def} item={item} />
 {:else if def.type === 'icon'}
-  <TableIconCell column={def} item={item} />
+  <TableIconCell column={def} item={item} centered={column.centered} />
 {:else if def.type === 'image'}
   <TableImageCell column={def} item={item} centered={column.centered} />
 {:else if def.type === 'move-row'}

package/dist/ui/table/table-cells/table-icon-cell.svelte

@@ -1,16 +1,10 @@
 <script lang="ts" generics="T extends {id: string}">import { IconSlot } from '../../icon';
 import { Tooltip } from '../../tooltip';
-let { item, column } = $props();
+let { item, column, centered } = $props();
 const iconProp = $derived(column.iconFactory ? column.iconFactory(item) : String(item[column.id]));
-const cssWidth = (column) => {
-    if (column?.fixedCssWidth) {
-        return `width: ${column.fixedCssWidth};`;
-    }
-    return 'width: auto;';
-};
 </script>
 
-<div class="table-icon-cell" style={cssWidth(column)}>
+<div class="table-icon-cell" class:table-icon-cell--centered={centered}>
   {#if column.tooltipTextFactory && column.tooltipTextFactory(item)}
     <Tooltip text={column.tooltipTextFactory(item)}>
       <IconSlot icon={iconProp} />
@@ -26,5 +20,10 @@ Icon cell for table rows. Displays an icon with optional tooltip.
 -->
 
 <style>.table-icon-cell {
-  display: inline-flex;
+  display: flex;
+  inline-size: 100%;
+}
+
+.table-icon-cell--centered {
+  justify-content: center;
 }</style>

package/dist/ui/table/table-cells/table-icon-cell.svelte.d.ts

@@ -5,6 +5,7 @@ declare function $$render<T extends {
     props: {
         item: T;
         column: ITableIconColumn<T>;
+        centered: boolean;
     };
     exports: {};
     bindings: "";

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

@@ -353,7 +353,7 @@ A full-featured video player with custom overlay controls, play/pause, mute, see
 }
 .video__playback-button {
   --sc-kit--icon--size: var(--_video--playback-button--size);
-  --sc-kit--icon--filter: drop-shadow(1px 1px #000);
+  --sc-kit--icon--filter: var(--sc-kit--filter--icon-overlay);
   position: absolute;
   top: 50%;
   left: 50%;
@@ -369,7 +369,7 @@ A full-featured video player with custom overlay controls, play/pause, mute, see
 }
 .video__mute-button {
   --sc-kit--icon--size: 1.25rem;
-  --sc-kit--icon--filter: drop-shadow(1px 1px #000);
+  --sc-kit--icon--filter: var(--sc-kit--filter--icon-overlay);
   position: absolute;
   top: 0.625em;
   right: 0.625em;

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.19.7",
+  "version": "0.20.0",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",
@@ -303,6 +303,10 @@
       "types": "./dist/ui/pin-input/index.d.ts",
       "svelte": "./dist/ui/pin-input/index.js"
     },
+    "./ui/play-indicator": {
+      "types": "./dist/ui/play-indicator/index.d.ts",
+      "svelte": "./dist/ui/play-indicator/index.js"
+    },
     "./ui/player/buttons": {
       "types": "./dist/ui/player/buttons/index.d.ts",
       "svelte": "./dist/ui/player/buttons/index.js"