@streamscloud/kit 0.1.12-1772041668184 → 0.2.0

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/_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/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/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/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",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",
@@ -216,6 +216,9 @@
     },
     "./styles/theme": {
       "sass": "./dist/styles/_theme.scss"
+    },
+    "./styles/transitions": {
+      "sass": "./dist/styles/_transitions.scss"
     }
   },
   "dependencies": {