@streamscloud/kit 0.1.12-1772041668184 → 0.2.0-1772457727942

package/dist/core/transitions/slide-horizontally.js

@@ -1,5 +1,5 @@
 import { sineInOut } from 'svelte/easing';
-export const slideHorizontally = (node, { delay = 0, duration = 400, easing = sineInOut } = {}) => {
+export const slideHorizontally = (node, { delay = 0, duration = 250, easing = sineInOut } = {}) => {
     const style = getComputedStyle(node);
     const isHtmlElement = (n) => n.nodeType === Node.ELEMENT_NODE;
     const children = Array.from(node.children).filter(isHtmlElement);

package/dist/styles/_mixins.scss

@@ -70,14 +70,15 @@
   max-height: 100%;
 }
 
-@mixin scrollbar($thumb-color: var(--scrollbar--thumb-color, #7d7d7d), $track-color: var(--scrollbar--track-color, transparent)) {
+
+@mixin scrollbar($thumb-color: var(--scrollbar--thumb-color, light-dark(#999999, #333333)), $track-color: var(--scrollbar--track-color, transparent)) {
   --_cross-browser-scrollbar--thumb-color: #{$thumb-color};
   --_cross-browser-scrollbar--track-color: #{$track-color};
 
   @include _cross-browser-scrollbar;
 }
 
-@mixin scrollbar-on-hover($thumb-color: var(--scrollbar--thumb-color, #7d7d7d), $track-color: var(--scrollbar--track-color, transparent)) {
+@mixin scrollbar-on-hover($thumb-color: var(--scrollbar--thumb-color, light-dark(#999999, #333333)), $track-color: var(--scrollbar--track-color, transparent)) {
   --_cross-browser-scrollbar--thumb-color: transparent;
   --_cross-browser-scrollbar--track-color: transparent;
 

package/dist/styles/_transitions.scss

@@ -0,0 +1,24 @@
+@use 'sass:list';
+
+$transition-duration-fast: 150ms;
+$transition-duration-base: 250ms;
+$transition-duration-slow: 350ms;
+
+$transition-easing-default: cubic-bezier(0.4, 0, 0.2, 1);
+$transition-easing-in: cubic-bezier(0.4, 0, 1, 1);
+$transition-easing-out: cubic-bezier(0, 0, 0.2, 1);
+
+// Transition mixin
+// Usage:
+//   @include transition(opacity);
+//   @include transition(background-color color, $transition-duration-fast);
+//   @include transition(width, $transition-duration-slow, linear);
+@mixin transition($properties: all, $duration: $transition-duration-base, $easing: $transition-easing-default) {
+  $result: ();
+
+  @each $property in $properties {
+    $result: list.append($result, $property $duration $easing, comma);
+  }
+
+  transition: $result;
+}

package/dist/styles/reset.css

@@ -121,7 +121,7 @@ input[type=number] {
 textarea {
   vertical-align: top;
   resize: vertical;
-  --_cross-browser-scrollbar--thumb-color: var(--scrollbar--thumb-color, #7d7d7d);
+  --_cross-browser-scrollbar--thumb-color: var(--scrollbar--thumb-color, light-dark(#999999, #333333));
   --_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);
 }
 textarea::-webkit-scrollbar {

package/dist/ui/button/resources/button-base.svelte

@@ -53,7 +53,7 @@ export {};
   justify-content: var(--_button--justify-content);
   align-items: center;
   vertical-align: middle;
-  transition: background-color linear 0.2s, color linear 0.2s, border-color linear 0.2s, filter linear 0.2s;
+  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1), color 250ms cubic-bezier(0.4, 0, 0.2, 1), border-color 250ms cubic-bezier(0.4, 0, 0.2, 1), filter 250ms cubic-bezier(0.4, 0, 0.2, 1);
   white-space: nowrap;
   cursor: pointer;
 }

package/dist/ui/dialog/cmp.dialog.svelte

@@ -104,7 +104,7 @@ A structured dialog panel with header (title + close button), scrollable body, a
   min-height: 0;
   overflow-y: auto;
   padding: var(--_dialog--body--padding-block) var(--_dialog--body--padding-inline);
-  --_cross-browser-scrollbar--thumb-color: var(--scrollbar--thumb-color, #7d7d7d);
+  --_cross-browser-scrollbar--thumb-color: var(--scrollbar--thumb-color, light-dark(#999999, #333333));
   --_cross-browser-scrollbar--track-color: var(--scrollbar--track-color, transparent);
 }
 .dialog__body::-webkit-scrollbar {

package/dist/ui/dialog/dialog-data.d.ts

@@ -26,4 +26,8 @@ export type DialogInit<TData = void, TResult = void, TCancelResult = void> = {
     /** Mount target for the dialog element. Useful for shadow DOM isolation. Defaults to `document.body`. */
     host?: ParentNode;
 };
+/** Adds an optional `dialogHost` field to any dialog data type. Helper functions strip it and pass to `Dialogs.open({ host })`. */
+export type DialogHostable<T> = T & {
+    dialogHost?: ParentNode;
+};
 export {};

package/dist/ui/dialog/index.d.ts

@@ -1,5 +1,6 @@
 export { Dialogs } from './dialogs.svelte';
 export { DialogController } from './dialog-controller';
+export { type DialogHostable } from './dialog-data';
 export { DIALOG_SIZES, type DialogPosition, type DialogResult, type DialogSize } from './types.svelte';
 export { default as Dialog } from './cmp.dialog.svelte';
 export { default as DialogButton } from './cmp.dialog-button.svelte';

package/dist/ui/dialog/index.js

@@ -1,5 +1,6 @@
 export { Dialogs } from './dialogs.svelte';
 export { DialogController } from './dialog-controller';
+export {} from './dialog-data';
 export { DIALOG_SIZES } from './types.svelte';
 export { default as Dialog } from './cmp.dialog.svelte';
 export { default as DialogButton } from './cmp.dialog-button.svelte';

package/dist/ui/dropdown/cmp.dropdown.svelte

@@ -135,8 +135,10 @@ const initPopper = (node) => {
     {/if}
   </button>
   {#if opened}
-    <div use:initPopper class="dropdown__content" role="tooltip" tabindex="-1">
-      {@render children()}
+    <div use:initPopper class="dropdown__popper" role="tooltip" tabindex="-1">
+      <div class="dropdown__content">
+        {@render children()}
+      </div>
     </div>
   {/if}
 </div>
@@ -179,10 +181,25 @@ A Popper.js-powered dropdown that positions content relative to a trigger elemen
   opacity: 0.5;
   pointer-events: none;
 }
+.dropdown__popper {
+  z-index: 999;
+}
 .dropdown__content {
   width: max-content;
-  z-index: 999;
+  transform-origin: top left;
+  animation: dropdown-appear 150ms cubic-bezier(0, 0, 0.2, 1) both;
 }
 .dropdown :global([data-popper-escaped]) {
   visibility: hidden !important;
+}
+
+@keyframes dropdown-appear {
+  from {
+    opacity: 0;
+    transform: scale(0.95) translateY(-4px);
+  }
+  to {
+    opacity: 1;
+    transform: scale(1) translateY(0);
+  }
 }</style>

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

@@ -8,7 +8,7 @@ export {};
 
 <style>.html-block {
   display: contents;
-  word-break: break-word;
+  overflow-wrap: break-word;
   font-size: 0.875em;
   line-height: 1.4;
   font-weight: normal;

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

@@ -1,4 +1,4 @@
-import { type DialogResult } from '../dialog';
+import { type DialogHostable, type DialogResult } from '../dialog';
 import type { MediaViewerData } from './types';
 /**
  * Opens a full-screen media viewer dialog for images and videos.
@@ -9,6 +9,7 @@ import type { MediaViewerData } from './types';
  * - `index` — zero-based index of the initially visible item
  * - `backgroundOpacity` — backdrop opacity (default `0.6`)
  * - `carouselMode` — carousel navigation mode (default `'arrows-with-counts'`)
+ * - `dialogHost` — mount target for the dialog element (default `document.body`)
  */
-export declare const openMediaViewer: (data: MediaViewerData) => Promise<DialogResult<void>>;
+export declare const openMediaViewer: (data: DialogHostable<MediaViewerData>) => Promise<DialogResult<void>>;
 export type { MediaViewerData, MediaViewerItem, MediaViewerItemType } from './types';

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

@@ -9,10 +9,13 @@ import { default as MediaViewerDialog } from './cmp.media-viewer-dialog.svelte';
  * - `index` — zero-based index of the initially visible item
  * - `backgroundOpacity` — backdrop opacity (default `0.6`)
  * - `carouselMode` — carousel navigation mode (default `'arrows-with-counts'`)
+ * - `dialogHost` — mount target for the dialog element (default `document.body`)
  */
 export const openMediaViewer = (data) => {
+    const { dialogHost, ...rest } = data;
     return Dialogs.open({
         view: MediaViewerDialog,
-        data
+        data: rest,
+        host: dialogHost
     });
 };

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

@@ -4,7 +4,7 @@ const { item } = $props();
 let containerWidth = $state(0);
 let containerHeight = $state(0);
 const fittedSize = $derived.by(() => {
-    if (containerWidth === 0 || containerHeight === 0) {
+    if (containerWidth === 0 || containerHeight === 0 || item.width === 0 || item.height === 0) {
         return { width: 0, height: 0 };
     }
     const aspectRatio = item.width / item.height;

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

@@ -176,7 +176,6 @@ const onKeyPress = Utils.throttle((e) => {
 const notifyIndexChanged = () => {
     on?.indexChanged?.(selectedIndex);
 };
-notifyIndexChanged();
 const setIndex = (index) => {
     if (index < 0) {
         animationIndex = 0;
@@ -195,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) {

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;

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

@@ -58,6 +58,7 @@ $effect(() => untrack(() => {
         PlaybackManager.unregisterPlayer(id);
     };
 }));
+let latestEntry = null;
 // Intersection observer for lazy loading and autoplay-on-appearance
 $effect(() => {
     if (!videoContainerRef) {
@@ -70,12 +71,13 @@ $effect(() => {
                 return;
             }
             const [entry] = entries;
+            latestEntry = entry;
             if ((entry.isIntersecting || allowPreloading) && !video.src) {
                 video.src = src;
                 video.load();
                 if (autoplayState === true) {
                     const handleCanPlay = () => {
-                        if (entry.isIntersecting) {
+                        if (latestEntry?.isIntersecting) {
                             void play();
                             autoplayState = false;
                         }
@@ -96,7 +98,7 @@ $effect(() => {
             }
             if (entry.intersectionRatio >= 0.6) {
                 const handleCanPlay = () => {
-                    if (entry.intersectionRatio >= 0.6) {
+                    if (latestEntry && latestEntry.intersectionRatio >= 0.6) {
                         void play();
                     }
                 };

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.1.12-1772041668184",
+  "version": "0.2.0-1772457727942",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",
@@ -216,6 +216,9 @@
     },
     "./styles/theme": {
       "sass": "./dist/styles/_theme.scss"
+    },
+    "./styles/transitions": {
+      "sass": "./dist/styles/_transitions.scss"
     }
   },
   "dependencies": {