@streamscloud/kit 0.1.12 → 0.2.0-1772458135351

package/dist/ui/html-block/cmp.html-block.svelte

@@ -0,0 +1,112 @@
+<script lang="ts">let { children } = $props();
+export {};
+</script>
+
+<div class="html-block">
+  {@render children()}
+</div>
+
+<style>.html-block {
+  display: contents;
+  overflow-wrap: break-word;
+  font-size: 0.875em;
+  line-height: 1.4;
+  font-weight: normal;
+  color: light-dark(#2e2e2e, #ffffff);
+}
+.html-block :global(h1) {
+  font-size: 1.5em;
+  line-height: 1.4;
+  font-weight: 600;
+  color: light-dark(#2e2e2e, #ffffff);
+}
+.html-block :global(h2) {
+  font-size: 1.375em;
+  line-height: 1.4;
+  font-weight: 600;
+  color: light-dark(#2e2e2e, #ffffff);
+}
+.html-block :global(h3) {
+  font-size: 1.25em;
+  line-height: 1.4;
+  font-weight: 600;
+  color: light-dark(#2e2e2e, #ffffff);
+}
+.html-block :global(h4) {
+  font-size: 1.125em;
+  line-height: 1.4;
+  font-weight: 500;
+  color: light-dark(#2e2e2e, #ffffff);
+}
+.html-block :global(h5) {
+  font-size: 1.0625em;
+  line-height: 1.4;
+  font-weight: 500;
+  color: light-dark(#2e2e2e, #ffffff);
+}
+.html-block :global(h6) {
+  font-size: 1em;
+  line-height: 1.4;
+  font-weight: 500;
+  color: light-dark(#2e2e2e, #ffffff);
+}
+.html-block :global(a) {
+  font-size: 1em;
+  line-height: 1.4;
+  font-weight: normal;
+  color: light-dark(#2e2e2e, #ffffff);
+  color: light-dark(#144ab0, #5a8dec);
+}
+.html-block :global(pre) {
+  font-family: monospace;
+  white-space: pre-wrap;
+  margin: 1em 0;
+  font-size: 1em;
+  line-height: 1;
+  font-weight: normal;
+  color: light-dark(#2e2e2e, #ffffff);
+}
+.html-block :global(ul) :global(> li),
+.html-block :global(ol) :global(> li) {
+  list-style: inherit;
+  margin-left: 1em;
+  position: relative;
+  font-size: 1em;
+  line-height: 1.4;
+  font-weight: normal;
+  color: light-dark(#2e2e2e, #ffffff);
+}
+.html-block :global(ol) {
+  list-style-type: decimal;
+}
+.html-block :global(ol) :global(> li > ol) {
+  list-style-type: lower-alpha;
+}
+.html-block :global(table) {
+  max-width: 100%;
+}
+.html-block :global(table),
+.html-block :global(tbody),
+.html-block :global(thead),
+.html-block :global(tr),
+.html-block :global(th),
+.html-block :global(td) {
+  border-width: initial;
+  border-style: inherit;
+  border-color: inherit;
+}
+.html-block :global(ul:not([style*='list-style-type'])),
+.html-block :global(ul:not([style*='list-style-type']) > li > ul:not([style*='list-style-type'])) {
+  list-style-type: none;
+}
+.html-block :global(ul:not([style*='list-style-type']) > li:before),
+.html-block :global(ul:not([style*='list-style-type']) > li > ul:not([style*='list-style-type']) > li:before) {
+  content: "-";
+  text-indent: -1em;
+  position: absolute;
+  font-weight: bold;
+}
+.html-block :global(ul[style*='list-style-type'] > li:before),
+.html-block :global(ul > li > ul[style*='list-style-type'] > li:before) {
+  content: none;
+}</style>

package/dist/ui/html-block/cmp.html-block.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    children: Snippet;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/html-block/index.d.ts

@@ -0,0 +1 @@
+export { default as HtmlBlock } from './cmp.html-block.svelte';

package/dist/ui/html-block/index.js

@@ -0,0 +1 @@
+export { default as HtmlBlock } from './cmp.html-block.svelte';

package/dist/ui/media-viewer-dialog/cmp.media-viewer-dialog.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">import { DialogCloseButton } from '../dialog';
+import { Carousel } from '../player/carousel';
+import { default as MediaViewerItem } from './media-viewer-item.svelte';
+import { untrack } from 'svelte';
+const { controller, data } = $props();
+$effect(() => untrack(() => {
+    controller.updateSettings({ closeOnEsc: true, closeOnClickOutside: true });
+    controller.updateContainerSettings({ position: 'full-screen' });
+}));
+</script>
+
+<div class="media-viewer-dialog" style:--media-viewer-dialog--background--opacity={data.backgroundOpacity}>
+  <div class="media-viewer-dialog__close">
+    <DialogCloseButton controller={controller} />
+  </div>
+
+  <div class="media-viewer-dialog__content">
+    {#if data.items.length === 1}
+      <MediaViewerItem item={data.items[0]} />
+    {:else}
+      <Carousel items={data.items} initialIndex={data.index} mode={data.carouselMode ?? 'arrows-with-counts'} wheelNavigation on={{ indexChanged: () => {} }}>
+        {#snippet children(item)}
+          <MediaViewerItem item={item} />
+        {/snippet}
+      </Carousel>
+    {/if}
+  </div>
+</div>
+
+<style>.media-viewer-dialog {
+  --_media-viewer-dialog--background--opacity: var(--media-viewer-dialog--background--opacity, 0.6);
+  --sc-kit--dialog-close-button--color: #ffffff;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  background: rgba(0, 0, 0, var(--_media-viewer-dialog--background--opacity));
+  position: relative;
+  padding: 0.625rem;
+}
+.media-viewer-dialog__close {
+  position: absolute;
+  top: 0.75rem;
+  right: 0.75rem;
+  z-index: 10;
+}
+.media-viewer-dialog__content {
+  flex: 1;
+  min-height: 0;
+}</style>

package/dist/ui/media-viewer-dialog/cmp.media-viewer-dialog.svelte.d.ts

@@ -0,0 +1,9 @@
+import { type DialogController } from '../dialog';
+import type { MediaViewerData } from './types';
+type Props = {
+    controller: DialogController;
+    data: MediaViewerData;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/media-viewer-dialog/index.d.ts

@@ -0,0 +1,15 @@
+import { type DialogResult } from '../dialog';
+import type { MediaViewerData } from './types';
+/**
+ * Opens a full-screen media viewer dialog for images and videos.
+ * Single item renders directly; multiple items display in a carousel with arrow navigation.
+ *
+ * ### Options
+ * - `items` — array of media items to display
+ * - `index` — zero-based index of the initially visible item
+ * - `backgroundOpacity` — backdrop opacity (default `0.6`)
+ * - `carouselMode` — carousel navigation mode (default `'arrows-with-counts'`)
+ * - `host` — mount target for the dialog element (default `document.body`)
+ */
+export declare const openMediaViewer: (data: MediaViewerData, host?: ParentNode) => Promise<DialogResult<void>>;
+export type { MediaViewerData, MediaViewerItem, MediaViewerItemType } from './types';

package/dist/ui/media-viewer-dialog/index.js

@@ -0,0 +1,20 @@
+import { Dialogs } from '../dialog';
+import { default as MediaViewerDialog } from './cmp.media-viewer-dialog.svelte';
+/**
+ * Opens a full-screen media viewer dialog for images and videos.
+ * Single item renders directly; multiple items display in a carousel with arrow navigation.
+ *
+ * ### Options
+ * - `items` — array of media items to display
+ * - `index` — zero-based index of the initially visible item
+ * - `backgroundOpacity` — backdrop opacity (default `0.6`)
+ * - `carouselMode` — carousel navigation mode (default `'arrows-with-counts'`)
+ * - `host` — mount target for the dialog element (default `document.body`)
+ */
+export const openMediaViewer = (data, host) => {
+    return Dialogs.open({
+        view: MediaViewerDialog,
+        data,
+        host
+    });
+};

package/dist/ui/media-viewer-dialog/media-viewer-item.svelte

@@ -0,0 +1,61 @@
+<script lang="ts">import { Image } from '../image';
+import { Video } from '../video';
+const { item } = $props();
+let containerWidth = $state(0);
+let containerHeight = $state(0);
+const fittedSize = $derived.by(() => {
+    if (containerWidth === 0 || containerHeight === 0 || item.width === 0 || item.height === 0) {
+        return { width: 0, height: 0 };
+    }
+    const aspectRatio = item.width / item.height;
+    const containerRatio = containerWidth / containerHeight;
+    if (aspectRatio > containerRatio) {
+        const width = containerWidth;
+        const height = width / aspectRatio;
+        return { width, height };
+    }
+    const height = containerHeight;
+    const width = height * aspectRatio;
+    return { width, height };
+});
+const observeResize = (node) => {
+    const observer = new ResizeObserver((entries) => {
+        const entry = entries[0];
+        if (entry) {
+            containerWidth = entry.contentRect.width;
+            containerHeight = entry.contentRect.height;
+        }
+    });
+    observer.observe(node);
+    return {
+        destroy: () => observer.disconnect()
+    };
+};
+</script>
+
+<div class="media-viewer-item" use:observeResize>
+  {#if fittedSize.width > 0 && fittedSize.height > 0}
+    <div class="media-viewer-item__media" style:width="{fittedSize.width}px" style:height="{fittedSize.height}px">
+      {#if item.type === 'image'}
+        <Image src={item.url} alt="" />
+      {:else}
+        <Video src={item.url} poster={item.thumbnailUrl} autoplay="on-appearance" />
+      {/if}
+    </div>
+  {/if}
+</div>
+
+<style>.media-viewer-item {
+  --sc-kit--image--object-fit: contain;
+  --sc-kit--video--media-fit: contain;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  width: 100%;
+  height: 100%;
+}
+.media-viewer-item__media {
+  flex-shrink: 0;
+  overflow: hidden;
+  border-radius: 0.375rem;
+}</style>

package/dist/ui/media-viewer-dialog/media-viewer-item.svelte.d.ts

@@ -0,0 +1,7 @@
+import type { MediaViewerItem } from './types';
+type Props = {
+    item: MediaViewerItem;
+};
+declare const MediaViewerItem: import("svelte").Component<Props, {}, "">;
+type MediaViewerItem = ReturnType<typeof MediaViewerItem>;
+export default MediaViewerItem;

package/dist/ui/media-viewer-dialog/types.d.ts

@@ -0,0 +1,15 @@
+import type { CarouselMode } from '../player/carousel';
+export type MediaViewerItemType = 'image' | 'video';
+export type MediaViewerItem = {
+    url: string;
+    thumbnailUrl: string | null;
+    type: MediaViewerItemType;
+    width: number;
+    height: number;
+};
+export type MediaViewerData = {
+    items: MediaViewerItem[];
+    index: number;
+    backgroundOpacity?: number;
+    carouselMode?: CarouselMode;
+};

package/dist/ui/media-viewer-dialog/types.js

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

package/dist/ui/player/carousel/cmp.carousel.svelte

@@ -1,11 +1,11 @@
 <script lang="ts" generics="T">import { Utils, isBrowser } from '../../../core/utils';
 import { Icon } from '../../icon';
-import { TouchSynchronizer } from '../utils';
+import { TouchSynchronizer, createWheelAdapter } from '../utils';
 import { CarouselLocalization } from './carousel-localization';
 import IconChevronLeft from '@fluentui/svg-icons/icons/chevron_left_20_regular.svg?raw';
 import IconChevronRight from '@fluentui/svg-icons/icons/chevron_right_20_regular.svg?raw';
 import { onDestroy, onMount, untrack } from 'svelte';
-let { items, mode = 'arrows-with-counts', initialIndex, autoSlideMs = 0, on, dot, children } = $props();
+let { items, mode = 'arrows-with-counts', initialIndex, autoSlideMs = 0, wheelNavigation = false, on, dot, children } = $props();
 const localization = new CarouselLocalization();
 const itemIndices = $derived(items.map((_, index) => index));
 const animationDuration = 300;
@@ -17,6 +17,20 @@ let slidesRef;
 let sliderWidth = $state(0);
 let swipeTransition = $state(0);
 let resizeObserver;
+let wheelAdapter = null;
+const wheelCallbacks = {
+    canLoadNext: () => items.length > 1,
+    canLoadPrevious: () => items.length > 1,
+    onTrigger: (direction) => {
+        if (direction === 'next') {
+            loadNext();
+        }
+        else {
+            loadPrevious();
+        }
+    },
+    getAnimationDurationMs: () => animationDuration
+};
 onMount(() => {
     notifyIndexChanged();
     setTimeout(() => {
@@ -132,6 +146,12 @@ onMount(() => {
     if (isBrowser()) {
         window.addEventListener(`keydown`, onKeyPress);
     }
+    if (wheelNavigation) {
+        wheelAdapter = createWheelAdapter(slidesRef, {
+            axis: 'x',
+            cbs: wheelCallbacks
+        });
+    }
 });
 onDestroy(() => {
     if (resizeObserver) {
@@ -143,6 +163,7 @@ onDestroy(() => {
             window.clearInterval(interval);
         }
     }
+    wheelAdapter?.destroy();
 });
 const onKeyPress = Utils.throttle((e) => {
     if (e.key === 'ArrowLeft') {
@@ -155,7 +176,6 @@ const onKeyPress = Utils.throttle((e) => {
 const notifyIndexChanged = () => {
     on?.indexChanged?.(selectedIndex);
 };
-notifyIndexChanged();
 const setIndex = (index) => {
     if (index < 0) {
         animationIndex = 0;
@@ -174,10 +194,10 @@ const setIndex = (index) => {
     }, 600);
 };
 const loadPrevious = Utils.throttle(() => {
-    setIndex(--selectedIndex);
+    setIndex(selectedIndex - 1);
 }, animationDuration);
 const loadNext = Utils.throttle(() => {
-    setIndex(++selectedIndex);
+    setIndex(selectedIndex + 1);
 }, animationDuration);
 $effect(() => {
     if (previousItems && items !== previousItems) {
@@ -260,7 +280,7 @@ A horizontal slide carousel with infinite looping, touch swipe support, keyboard
 ### CSS Custom Properties
 | Property | Description | Default |
 |---|---|---|
-| `--sc-kit--carousel--button-color` | Navigation arrow button background | `neutral-400` |
+| `--sc-kit--carousel--button-color` | Navigation arrow button background | `rgba(255, 255, 255, 0.2)` |
 | `--sc-kit--carousel--dot-color` | Dot indicator color (fill when active, border when inactive) | `white` |
 | `--sc-kit--carousel--dot-size` | Dot indicator diameter | `0.5rem` |
 | `--sc-kit--carousel--text-color` | Arrow button icon and counter text color | `white` |
@@ -269,7 +289,7 @@ A horizontal slide carousel with infinite looping, touch swipe support, keyboard
 <style>@charset "UTF-8";
 .carousel {
   /* Public API */
-  --_carousel--button-color: var(--sc-kit--carousel--button-color, #9ca3af);
+  --_carousel--button-color: var(--sc-kit--carousel--button-color, rgba(255, 255, 255, 0.2));
   --_carousel--dot-color: var(--sc-kit--carousel--dot-color, #ffffff);
   --_carousel--dot-size: var(--sc-kit--carousel--dot-size, 0.5rem);
   --_carousel--text-color: var(--sc-kit--carousel--text-color, #ffffff);

package/dist/ui/player/carousel/cmp.carousel.svelte.d.ts

@@ -10,6 +10,8 @@ declare function $$render<T>(): {
         mode?: CarouselMode;
         /** Auto-advance interval in ms; 0 disables auto-sliding @default 0 */
         autoSlideMs?: number;
+        /** Convert vertical mouse wheel scroll to slide navigation @default false */
+        wheelNavigation?: boolean;
         on?: {
             /** Fires after the active slide changes */
             indexChanged: (index: number) => void;
@@ -46,7 +48,7 @@ interface $$IsomorphicComponent {
  * ### CSS Custom Properties
  * | Property | Description | Default |
  * |---|---|---|
- * | `--sc-kit--carousel--button-color` | Navigation arrow button background | `neutral-400` |
+ * | `--sc-kit--carousel--button-color` | Navigation arrow button background | `rgba(255, 255, 255, 0.2)` |
  * | `--sc-kit--carousel--dot-color` | Dot indicator color (fill when active, border when inactive) | `white` |
  * | `--sc-kit--carousel--dot-size` | Dot indicator diameter | `0.5rem` |
  * | `--sc-kit--carousel--text-color` | Arrow button icon and counter text color | `white` |

package/dist/ui/player/feed-slider/cmp.feed-slider.svelte

@@ -1,5 +1,4 @@
-<script lang="ts" generics="T extends { id: string }">import { TouchSynchronizer } from '../utils';
-import { createWheelAdapter } from './wheel-gestures-adapter';
+<script lang="ts" generics="T extends { id: string }">import { TouchSynchronizer, createWheelAdapter } from '../utils';
 import { onDestroy, onMount, untrack } from 'svelte';
 let { buffer, on, children } = $props();
 let slidesRef;
@@ -142,11 +141,10 @@ const wheelCallbacks = {
     canLoadNext: () => buffer.canLoadNext,
     canLoadPrevious: () => buffer.canLoadPrevious,
     onTrigger: (direction) => {
-        // direction: 1 -> next, -1 -> previous
-        if (direction > 0) {
+        if (direction === 'next') {
             buffer.loadNext();
         }
-        else if (direction < 0) {
+        else {
             buffer.loadPrevious();
         }
     },

package/dist/ui/player/utils/index.d.ts

@@ -1 +1,2 @@
 export { TouchSynchronizer } from './touch-synchronizer';
+export * from './wheel-gestures-adapter';

package/dist/ui/player/utils/index.js

@@ -1 +1,2 @@
 export { TouchSynchronizer } from './touch-synchronizer';
+export * from './wheel-gestures-adapter';

package/dist/ui/player/{feed-slider → utils}/wheel-gestures-adapter.d.ts

@@ -1,16 +1,20 @@
+export type WheelAdapterAxis = 'x' | 'y';
+export type WheelAdapterDirection = 'next' | 'previous';
 export type WheelAdapterCallbacks = {
     canLoadNext: () => boolean;
     canLoadPrevious: () => boolean;
-    onTrigger: (direction: number) => void;
+    onTrigger: (direction: WheelAdapterDirection) => void;
     getAnimationDurationMs: () => number;
 };
 /**
  * Minimal, robust wheel adapter:
- * - EMA over axisVelocity[1] to smooth noisy streams (esp. on Windows)
+ * - Configurable axis: 'y' reads Y only; 'x' prefers X but remaps Y when X is negligible
+ * - EMA over velocity to smooth noisy streams (esp. on Windows)
  * - Cooldown blocks triggers while animation runs
  * - Mouse fallback: if velocity is near zero but delta is large, treat as a discrete "kick"
  */
 export declare const createWheelAdapter: (target: HTMLElement, params: {
+    axis?: WheelAdapterAxis;
     cbs: WheelAdapterCallbacks;
 }) => {
     destroy(): void;

package/dist/ui/player/{feed-slider → utils}/wheel-gestures-adapter.js

@@ -2,12 +2,13 @@
 import { WheelGestures } from 'wheel-gestures';
 /**
  * Minimal, robust wheel adapter:
- * - EMA over axisVelocity[1] to smooth noisy streams (esp. on Windows)
+ * - Configurable axis: 'y' reads Y only; 'x' prefers X but remaps Y when X is negligible
+ * - EMA over velocity to smooth noisy streams (esp. on Windows)
  * - Cooldown blocks triggers while animation runs
  * - Mouse fallback: if velocity is near zero but delta is large, treat as a discrete "kick"
  */
 export const createWheelAdapter = (target, params) => {
-    const { cbs } = params;
+    const { axis = 'y', cbs } = params;
     // Tunables
     const PEAK_THRESHOLD = 0.4; // EMA magnitude threshold to consider as a "peak"
     const ACCEL_THRESHOLD = 0.02; // minimal directional EMA rise to count as real acceleration
@@ -30,41 +31,49 @@ export const createWheelAdapter = (target, params) => {
         }, cbs.getAnimationDurationMs() + 100);
     };
     const fire = (direction) => {
-        // Respect external guards (e.g., paging boundaries)
-        if ((direction > 0 && !cbs.canLoadNext()) || (direction < 0 && !cbs.canLoadPrevious())) {
+        if ((direction === 'next' && !cbs.canLoadNext()) || (direction === 'previous' && !cbs.canLoadPrevious())) {
             return;
         }
         isAnimating = true;
         cbs.onTrigger(direction);
         startCooldown();
     };
-    wheelGestures.on('wheel', ({ axisDelta: [, axisDeltaY], axisVelocity: [, axisVelocityY] }) => {
-        const velocityY = axisVelocityY || 0;
-        const deltaY = axisDeltaY || 0;
+    const getAxisValues = (axisDelta, axisVelocity) => {
+        if (axis === 'y') {
+            return [axisDelta[1], axisVelocity[1]];
+        }
+        // axis === 'x': prefer X, fall back to Y (remap vertical scroll to horizontal)
+        if (Math.abs(axisDelta[0]) >= Math.abs(axisDelta[1])) {
+            return [axisDelta[0], axisVelocity[0]];
+        }
+        return [axisDelta[1], axisVelocity[1]];
+    };
+    wheelGestures.on('wheel', ({ axisDelta, axisVelocity }) => {
+        const [delta, velocity] = getAxisValues(axisDelta, axisVelocity);
         // Tracking only: always update EMA and compute signs/acceleration
         previousEmaVelocity = emaVelocity;
-        emaVelocity += (velocityY - emaVelocity) * EMA_ALPHA;
+        emaVelocity += (velocity - emaVelocity) * EMA_ALPHA;
         const emaMagnitude = Math.abs(emaVelocity);
-        const velocitySign = Math.sign(emaVelocity) || Math.sign(velocityY);
+        const velocitySign = Math.sign(emaVelocity) || Math.sign(velocity);
         const emaAcceleration = emaVelocity - previousEmaVelocity;
         // During animation we only track; no arming, no triggering
         if (isAnimating) {
             return;
         }
         // Path 1: mouse-like discrete kick (platform-agnostic via delta/velocity ratio)
-        const absDelta = Math.abs(deltaY);
-        const absVel = Math.abs(velocityY);
+        const absDelta = Math.abs(delta);
+        const absVel = Math.abs(velocity);
         const stepRatio = absDelta / Math.max(1e-6, absVel);
         const isMouseLikeKick = absDelta >= MOUSE_DELTA_KICK && stepRatio >= MOUSE_STEP_RATIO_KICK;
         if (isMouseLikeKick) {
-            const direction = deltaY > 0 ? 1 : -1; // 1 = next/down, -1 = previous/up
+            const direction = delta > 0 ? 'next' : 'previous';
             fire(direction);
             return;
         }
         // Path 2: trackpad/inertia via EMA acceleration and peak gating
         const isAcceleratingInDirection = velocitySign !== 0 && emaAcceleration * velocitySign > ACCEL_THRESHOLD;
         if (isAcceleratingInDirection && emaMagnitude > PEAK_THRESHOLD) {
-            const direction = velocitySign > 0 ? 1 : -1; // 1 = next/down, -1 = previous/up
+            const direction = velocitySign > 0 ? 'next' : 'previous';
             fire(direction);
         }
     });

package/dist/ui/seek-bar/cmp.seek-bar.svelte

@@ -158,7 +158,7 @@ A draggable media seek bar with a track, filled portion, and scrubber handle. Su
   transform: translate(-50%, -50%);
   z-index: 1;
   opacity: var(--_seek-bar--scrubber-opacity);
-  transition: opacity 0.2s ease-in-out;
+  transition: opacity 150ms cubic-bezier(0.4, 0, 0.2, 1);
 }
 .seek-bar__scrubber.is-dragging, .seek-bar__scrubber:focus {
   --_seek-bar--scrubber-opacity: 1;