@streamscloud/kit 0.0.1-1770839905472 → 0.0.1-1770848433096

package/dist/core/actions/horizontal-wheel-scroll.d.ts

@@ -0,0 +1,5 @@
+import type { Action } from 'svelte/action';
+export declare const horizontalWheelScroll: Action<HTMLElement, {
+    isolateScroll: boolean;
+    speed?: number;
+} | undefined>;

package/dist/core/actions/horizontal-wheel-scroll.js

@@ -0,0 +1,20 @@
+export const horizontalWheelScroll = (node, param = { isolateScroll: true, speed: 1 }) => {
+    const onWheel = (event) => {
+        const canScrollX = node.scrollWidth > node.clientWidth;
+        if (!canScrollX) {
+            return;
+        }
+        const delta = Math.abs(event.deltaX) > Math.abs(event.deltaY) ? event.deltaX : event.deltaY;
+        node.scrollBy({ left: delta * (param.speed ?? 1), behavior: 'smooth' });
+        if (param.isolateScroll) {
+            event.preventDefault();
+            event.stopPropagation();
+        }
+    };
+    node.addEventListener('wheel', onWheel, { passive: false });
+    return {
+        destroy() {
+            node.removeEventListener('wheel', onWheel);
+        }
+    };
+};

package/dist/core/actions/index.d.ts

@@ -0,0 +1,2 @@
+export { horizontalWheelScroll } from './horizontal-wheel-scroll';
+export { swallowTouch } from './swallow-touch';

package/dist/core/actions/index.js

@@ -0,0 +1,2 @@
+export { horizontalWheelScroll } from './horizontal-wheel-scroll';
+export { swallowTouch } from './swallow-touch';

package/dist/core/actions/swallow-touch.d.ts

@@ -0,0 +1,2 @@
+import type { Action } from 'svelte/action';
+export declare const swallowTouch: Action;

package/dist/core/actions/swallow-touch.js

@@ -0,0 +1,17 @@
+export const swallowTouch = (node) => {
+    const stopAll = (e) => {
+        e.stopPropagation();
+    };
+    node.addEventListener('touchstart', stopAll, { passive: false });
+    node.addEventListener('touchmove', stopAll, { passive: false });
+    node.addEventListener('touchend', stopAll, { passive: false });
+    node.addEventListener('touchcancel', stopAll, { passive: false });
+    return {
+        destroy() {
+            node.removeEventListener('touchstart', stopAll);
+            node.removeEventListener('touchmove', stopAll);
+            node.removeEventListener('touchend', stopAll);
+            node.removeEventListener('touchcancel', stopAll);
+        }
+    };
+};

package/dist/ui/infinite-scrolling/cmp.infinite-scrolling.svelte

@@ -0,0 +1,79 @@
+<script lang="ts">import { Loading } from '../loading';
+let { loadMore, container = null, actuationOffset = '', children, loading } = $props();
+let isLoading = $state(false);
+let paginationTrigger = $state(null);
+let itemsContainer = $state(null);
+$effect(() => {
+    if (!paginationTrigger || !itemsContainer) {
+        return;
+    }
+    const trigger = paginationTrigger;
+    const items = itemsContainer;
+    const intersectionObserver = new IntersectionObserver((e) => {
+        const [entries] = e;
+        if (entries.isIntersecting) {
+            void onLoadMore();
+        }
+    }, {
+        root: container,
+        rootMargin: actuationOffset
+    });
+    // Re-observe trigger on container resize to force IntersectionObserver
+    // to re-evaluate visibility — it won't fire on its own when siblings resize
+    const resizeObserver = new ResizeObserver(() => {
+        intersectionObserver.unobserve(trigger);
+        intersectionObserver.observe(trigger);
+    });
+    resizeObserver.observe(items);
+    return () => {
+        resizeObserver.disconnect();
+        intersectionObserver.disconnect();
+    };
+});
+const onLoadMore = async () => {
+    if (isLoading) {
+        return;
+    }
+    isLoading = true;
+    try {
+        await loadMore();
+    }
+    finally {
+        isLoading = false;
+    }
+};
+</script>
+
+<div class="infinite-scrolling">
+  <div bind:this={itemsContainer}>
+    {@render children()}
+  </div>
+
+  <div class="infinite-scrolling__pagination-trigger" bind:this={paginationTrigger}></div>
+  {#if isLoading}
+    {#if loading}
+      {@render loading()}
+    {:else}
+      <div class="infinite-scrolling__loading-container">
+        <Loading timeout={500} />
+      </div>
+    {/if}
+  {/if}
+</div>
+
+<style>.infinite-scrolling {
+  --_infinite-scrolling--overflow-y: var(--infinite-scrolling--overflow-y, initial);
+  overflow-y: var(--_infinite-scrolling--overflow-y);
+  min-height: 2.625em;
+  position: relative;
+  width: 100%;
+}
+.infinite-scrolling__pagination-trigger {
+  border: 1px solid transparent;
+}
+.infinite-scrolling__loading-container {
+  position: absolute;
+  bottom: 0.3125em;
+  left: 50%;
+  transform: translateX(-50%);
+}</style>

package/dist/ui/infinite-scrolling/cmp.infinite-scrolling.svelte.d.ts

@@ -0,0 +1,14 @@
+import type { Snippet } from 'svelte';
+type Props = {
+    loadMore: () => Promise<unknown>;
+    /**
+     * Must be passed only if viewport is less than scrolling container
+     */
+    container?: HTMLElement | null;
+    actuationOffset?: string;
+    children: Snippet;
+    loading?: Snippet;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/infinite-scrolling/index.d.ts

@@ -0,0 +1 @@
+export { default as InfiniteScrolling } from './cmp.infinite-scrolling.svelte';

package/dist/ui/infinite-scrolling/index.js

@@ -0,0 +1 @@
+export { default as InfiniteScrolling } from './cmp.infinite-scrolling.svelte';

package/dist/ui/loading/cmp.loading.svelte

@@ -1,8 +1,8 @@
-<script lang="ts">import { onMount } from 'svelte';
-let { positionFixedCenter = false, positionAbsoluteCenter = false, blocking = false, timeout = 0 } = $props();
+<script lang="ts">let { positionFixedCenter = false, positionAbsoluteCenter = false, blocking = false, timeout = 0 } = $props();
 let visible = $state(false);
-onMount(() => {
-    setTimeout(() => (visible = true), timeout);
+$effect(() => {
+    const timer = setTimeout(() => (visible = true), timeout);
+    return () => clearTimeout(timer);
 });
 </script>
 

package/dist/ui/progress/cmp.progress.svelte

@@ -0,0 +1,28 @@
+<script lang="ts">let { value } = $props();
+const cssWidth = $derived(`${100 * (value <= 1 ? value : 1)}%`);
+</script>
+
+<div class="progress">
+  <span class="progress__value" class:progress__value--animated={value > 0.01 && value < 0.96} style:width={cssWidth}> &nbsp; </span>
+</div>
+
+<style>.progress {
+  --_progress--height: var(--progress--height, 0.25em);
+  --_progress--back-color: var(--progress--back-color, #9ca3af);
+  --_progress--front-color: var(--progress--front-color, #ffffff);
+  --_progress--box-shadow: var(--progress--box-shadow, 0 2px 3px rgba(0, 0, 0, 0.25) inset);
+  --_progress--border-radius: var(--progress--border-radius, 0);
+  width: 100%;
+  background: var(--_progress--back-color);
+  height: var(--_progress--height);
+  box-shadow: var(--_progress--box-shadow);
+  border-radius: var(--_progress--border-radius);
+}
+.progress__value {
+  background: var(--_progress--front-color);
+  display: inline-block;
+  height: 100%;
+}
+.progress__value--animated {
+  transition: width 600ms;
+}</style>

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

@@ -0,0 +1,7 @@
+type Props = {
+    /** 0-1 */
+    value: number;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

@@ -0,0 +1 @@
+export { default as Progress } from './cmp.progress.svelte';

package/dist/ui/progress/index.js

@@ -0,0 +1 @@
+export { default as Progress } from './cmp.progress.svelte';

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

@@ -0,0 +1,155 @@
+<script lang="ts">let { value, listenParentClicks = false, on } = $props();
+let seekBarRef = $state(null);
+let scrubberRef = $state(null);
+let progressRef = $state(null);
+let isDragging = $state(false);
+const cssValue = $derived(`${100 * (value <= 1 ? value : 1)}%`);
+const handleSeek = (e) => {
+    if (!progressRef) {
+        return;
+    }
+    e.stopPropagation();
+    const { left, width } = progressRef.getBoundingClientRect();
+    const x = e.clientX - left;
+    const percent = Math.max(0, Math.min(1, x / width));
+    on?.seek(percent);
+};
+const handleParentClick = (e) => {
+    e.preventDefault();
+    e.stopPropagation();
+    if (!progressRef || !seekBarRef || isDragging) {
+        return;
+    }
+    const seekBarRect = progressRef.getBoundingClientRect();
+    if (e.clientX >= seekBarRect.left && e.clientX <= seekBarRect.right) {
+        const x = e.clientX - seekBarRect.left;
+        const percent = Math.max(0, Math.min(1, x / seekBarRect.width));
+        on?.seek(percent);
+    }
+};
+const onMouseMove = (e) => {
+    if (isDragging) {
+        handleSeek(e);
+    }
+};
+const onMouseUp = () => {
+    isDragging = false;
+    window.removeEventListener('mousemove', onMouseMove);
+    window.removeEventListener('mouseup', onMouseUp);
+    scrubberRef?.blur();
+    on?.dragEnd?.();
+};
+const onMouseDown = (e) => {
+    isDragging = true;
+    on?.dragStart?.();
+    handleSeek(e);
+    window.addEventListener('mousemove', onMouseMove);
+    window.addEventListener('mouseup', onMouseUp);
+    scrubberRef?.blur();
+};
+const handleScrubberKeyDown = (event) => {
+    const step = 0.05;
+    let newValue;
+    if (event.key === /*@wc-ignore*/ 'ArrowLeft') {
+        newValue = Math.max(0, value - step);
+    }
+    else if (event.key === /*@wc-ignore*/ 'ArrowRight') {
+        newValue = Math.min(1, value + step);
+    }
+    else if (event.key === /*@wc-ignore*/ 'Home') {
+        newValue = 0;
+    }
+    else if (event.key === /*@wc-ignore*/ 'End') {
+        newValue = 1;
+    }
+    if (newValue !== undefined) {
+        event.preventDefault();
+        on?.seek(newValue);
+    }
+};
+$effect(() => {
+    if (!listenParentClicks || !seekBarRef) {
+        return;
+    }
+    const parent = seekBarRef.parentElement;
+    if (!parent) {
+        return;
+    }
+    parent.addEventListener('click', handleParentClick);
+    return () => {
+        parent.removeEventListener('click', handleParentClick);
+    };
+});
+$effect(() => {
+    return () => {
+        window.removeEventListener('mousemove', onMouseMove);
+        window.removeEventListener('mouseup', onMouseUp);
+    };
+});
+</script>
+
+<div class="seek-bar" onmousedown={onMouseDown} onkeydown={() => ({})} role="none" bind:this={seekBarRef}>
+  <div class="seek-bar__container" bind:this={progressRef}>
+    <span class="seek-bar__value" style:width={cssValue}> &nbsp; </span>
+    <div
+      class="seek-bar__scrubber"
+      bind:this={scrubberRef}
+      class:is-dragging={isDragging}
+      style:left={cssValue}
+      role="slider"
+      tabindex="0"
+      aria-valuemin="0"
+      aria-valuemax="1"
+      aria-valuenow={value}
+      aria-label="Media position slider"
+      onkeydown={handleScrubberKeyDown}>
+    </div>
+  </div>
+</div>
+
+<style>.seek-bar {
+  cursor: pointer;
+  position: relative;
+  padding: 0.3125rem 0;
+  --_seek-bar--container-color: var(--seek-bar--container-color, #9ca3af);
+  --_seek-bar--value-color: var(--seek-bar--value-color, #ffffff);
+  --_seek-bar--scrubber-color: var(--seek-bar--scrubber-color, #ffffff);
+  --_seek-bar--scrubber-border-color: var(--seek-bar--scrubber-border-color, #9ca3af);
+  --_seek-bar--scrubber-opacity: 0;
+}
+.seek-bar:hover {
+  --_seek-bar--scrubber-opacity: 1;
+}
+.seek-bar__container {
+  width: 100%;
+  background: var(--_seek-bar--container-color);
+  height: 0.3125rem;
+  position: relative;
+}
+.seek-bar__value {
+  background: var(--_seek-bar--value-color);
+  border-color: var(--_seek-bar--container-color);
+  border-width: 0.0625rem;
+  display: inline-block;
+  height: 100%;
+}
+.seek-bar__scrubber {
+  position: absolute;
+  top: 50%;
+  width: 0.75rem;
+  height: 0.75rem;
+  background: var(--_seek-bar--scrubber-color);
+  border-color: var(--_seek-bar--scrubber-border-color);
+  border-width: 0.0625rem;
+  border-radius: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1;
+  opacity: var(--_seek-bar--scrubber-opacity);
+  transition: opacity 0.2s ease-in-out;
+}
+.seek-bar__scrubber.is-dragging, .seek-bar__scrubber:focus {
+  --_seek-bar--scrubber-opacity: 1;
+}
+.seek-bar__scrubber:focus-visible {
+  outline: none;
+}</style>

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

@@ -0,0 +1,13 @@
+type Props = {
+    /** 0-1 */
+    value: number;
+    listenParentClicks?: boolean;
+    on: {
+        seek: (e: number) => void;
+        dragStart?: () => void;
+        dragEnd?: () => void;
+    };
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

package/dist/ui/seek-bar/index.d.ts

@@ -0,0 +1 @@
+export { default as SeekBar } from './cmp.seek-bar.svelte';

package/dist/ui/seek-bar/index.js

@@ -0,0 +1 @@
+export { default as SeekBar } from './cmp.seek-bar.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.0.1-1770839905472",
+  "version": "0.0.1-1770848433096",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",
@@ -28,42 +28,42 @@
     "**/*.css"
   ],
   "exports": {
+    "./button": {
+      "types": "./dist/ui/button/index.d.ts",
+      "svelte": "./dist/ui/button/index.js"
+    },
     "./core": {
       "types": "./dist/core/index.d.ts",
       "svelte": "./dist/core/index.js"
     },
+    "./core/actions": {
+      "types": "./dist/core/actions/index.d.ts",
+      "svelte": "./dist/core/actions/index.js"
+    },
     "./core/css": {
       "types": "./dist/core/css/index.d.ts",
       "svelte": "./dist/core/css/index.js"
     },
-    "./core/i18n": {
-      "types": "./dist/core/i18n/index.d.ts",
-      "svelte": "./dist/core/i18n/index.js"
-    },
-    "./core/transitions": {
-      "types": "./dist/core/transitions/index.d.ts",
-      "svelte": "./dist/core/transitions/index.js"
-    },
-    "./core/utils": {
-      "types": "./dist/core/utils/index.d.ts",
-      "svelte": "./dist/core/utils/index.js"
+    "./core/data-loaders": {
+      "types": "./dist/core/data-loaders/index.d.ts",
+      "svelte": "./dist/core/data-loaders/index.js"
     },
     "./core/files": {
       "types": "./dist/core/files/index.d.ts",
       "svelte": "./dist/core/files/index.js"
     },
+    "./core/i18n": {
+      "types": "./dist/core/i18n/index.d.ts",
+      "svelte": "./dist/core/i18n/index.js"
+    },
+    "./core/media": {
+      "types": "./dist/core/media/index.d.ts",
+      "svelte": "./dist/core/media/index.js"
+    },
     "./core/repository": {
       "types": "./dist/core/repository/index.d.ts",
       "svelte": "./dist/core/repository/index.js"
     },
-    "./core/data-loaders": {
-      "types": "./dist/core/data-loaders/index.d.ts",
-      "svelte": "./dist/core/data-loaders/index.js"
-    },
-    "./core/validation": {
-      "types": "./dist/core/validation/index.d.ts",
-      "svelte": "./dist/core/validation/index.js"
-    },
     "./core/theme": {
       "types": "./dist/core/theme/index.d.ts",
       "svelte": "./dist/core/theme/index.js"
@@ -72,14 +72,22 @@
       "types": "./dist/core/toastr/index.d.ts",
       "svelte": "./dist/core/toastr/index.js"
     },
+    "./core/transitions": {
+      "types": "./dist/core/transitions/index.d.ts",
+      "svelte": "./dist/core/transitions/index.js"
+    },
+    "./core/utils": {
+      "types": "./dist/core/utils/index.d.ts",
+      "svelte": "./dist/core/utils/index.js"
+    },
+    "./core/validation": {
+      "types": "./dist/core/validation/index.d.ts",
+      "svelte": "./dist/core/validation/index.js"
+    },
     "./dialog": {
       "types": "./dist/ui/dialog/index.d.ts",
       "svelte": "./dist/ui/dialog/index.js"
     },
-    "./button": {
-      "types": "./dist/ui/button/index.d.ts",
-      "svelte": "./dist/ui/button/index.js"
-    },
     "./icon": {
       "types": "./dist/ui/icon/index.d.ts",
       "svelte": "./dist/ui/icon/index.js"
@@ -88,17 +96,31 @@
       "types": "./dist/ui/image/index.d.ts",
       "svelte": "./dist/ui/image/index.js"
     },
+    "./infinite-scrolling": {
+      "types": "./dist/ui/infinite-scrolling/index.d.ts",
+      "svelte": "./dist/ui/infinite-scrolling/index.js"
+    },
     "./loading": {
       "types": "./dist/ui/loading/index.d.ts",
       "svelte": "./dist/ui/loading/index.js"
     },
+    "./progress": {
+      "types": "./dist/ui/progress/index.d.ts",
+      "svelte": "./dist/ui/progress/index.js"
+    },
     "./proportional-container": {
       "types": "./dist/ui/proportional-container/index.d.ts",
       "svelte": "./dist/ui/proportional-container/index.js"
     },
-    "./core/media": {
-      "types": "./dist/core/media/index.d.ts",
-      "svelte": "./dist/core/media/index.js"
+    "./seek-bar": {
+      "types": "./dist/ui/seek-bar/index.d.ts",
+      "svelte": "./dist/ui/seek-bar/index.js"
+    },
+    "./styles/base": {
+      "sass": "./dist/styles/_index.scss"
+    },
+    "./styles/colors": {
+      "sass": "./dist/styles/_colors.scss"
     },
     "./styles/functions": {
       "sass": "./dist/styles/_functions.scss"
@@ -106,17 +128,11 @@
     "./styles/mixins": {
       "sass": "./dist/styles/_mixins.scss"
     },
-    "./styles/colors": {
-      "sass": "./dist/styles/_colors.scss"
-    },
+    "./styles/normalize.css": "./dist/styles/normalize.css",
+    "./styles/reset.css": "./dist/styles/reset.css",
     "./styles/responsive": {
       "sass": "./dist/styles/_responsive.scss"
     },
-    "./styles/base": {
-      "sass": "./dist/styles/_index.scss"
-    },
-    "./styles/normalize.css": "./dist/styles/normalize.css",
-    "./styles/reset.css": "./dist/styles/reset.css",
     "./styles/theme": {
       "sass": "./dist/styles/_theme.scss"
     }