@streamscloud/kit 0.0.1-1770823200886 → 0.0.1-1770841384222

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

@@ -0,0 +1,82 @@
+<script lang="ts">let { positionFixedCenter = false, positionAbsoluteCenter = false, blocking = false, timeout = 0 } = $props();
+let visible = $state(false);
+$effect(() => {
+    const timer = setTimeout(() => (visible = true), timeout);
+    return () => clearTimeout(timer);
+});
+</script>
+
+{#if visible && blocking}
+  <div class="loading-ring-overlay" class:loading-ring-overlay--fixed={positionFixedCenter}></div>
+{/if}
+
+<div
+  class="la-ball-clip-rotate"
+  class:la-ball-clip-rotate--absolute-center={positionAbsoluteCenter}
+  class:la-ball-clip-rotate--fixed-center={positionFixedCenter}
+  class:la-ball-clip-rotate--visible={visible}>
+  <div class="la-ball-clip-rotate__spin"></div>
+</div>
+
+<style>.loading-ring-overlay {
+  position: absolute;
+  inset: 0;
+  background-color: rgba(0, 0, 0, 0.3);
+  z-index: 999;
+}
+.loading-ring-overlay--fixed {
+  position: fixed;
+}
+
+.la-ball-clip-rotate {
+  --_loading--font-size: var(--loading--font-size, 1rem);
+  --_loading--spinner-color: var(--loading--spinner-color, light-dark(#144ab0, #5a8dec));
+  font-size: var(--_loading--font-size);
+  color: var(--_loading--spinner-color);
+  display: block;
+  opacity: 0;
+  width: 2em;
+  height: 2em;
+  z-index: 10;
+}
+.la-ball-clip-rotate--visible {
+  opacity: 1;
+}
+.la-ball-clip-rotate--absolute-center {
+  position: absolute;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+}
+.la-ball-clip-rotate--fixed-center {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 1;
+}
+.la-ball-clip-rotate__spin {
+  position: relative;
+  box-sizing: border-box;
+  display: inline-block;
+  float: none;
+  border: 0.125em solid currentColor;
+  width: 2em;
+  height: 2em;
+  background: transparent;
+  border-bottom-color: transparent;
+  border-radius: 100%;
+  animation: ball-clip-rotate 0.75s linear infinite;
+}
+
+@keyframes ball-clip-rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+  50% {
+    transform: rotate(180deg);
+  }
+  100% {
+    transform: rotate(360deg);
+  }
+}</style>

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

@@ -0,0 +1,9 @@
+type Props = {
+    positionFixedCenter?: boolean;
+    positionAbsoluteCenter?: boolean;
+    blocking?: boolean;
+    timeout?: number;
+};
+declare const Cmp: import("svelte").Component<Props, {}, "">;
+type Cmp = ReturnType<typeof Cmp>;
+export default Cmp;

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

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

package/dist/ui/loading/index.js

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

package/dist/ui/proportional-container/cmp.proportional-container.svelte

@@ -0,0 +1,25 @@
+<script lang="ts">let { ratio, children } = $props();
+export {};
+</script>
+
+<div class="proportional-container" style:--proportional-container--ratio={ratio}>
+  <div class="proportional-container__placer">
+    {@render children?.()}
+  </div>
+</div>
+
+<style>.proportional-container {
+  --_proportional-container--ratio: var(--proportional-container--ratio, 1);
+  --_proportional-container--height: var(--proportional-container--height, auto);
+  --_proportional-container--width: var(--proportional-container--width, 100%);
+  width: var(--_proportional-container--width);
+  max-width: 100%;
+  height: var(--_proportional-container--height);
+  max-height: 100%;
+  aspect-ratio: var(--_proportional-container--ratio);
+  position: relative;
+}
+.proportional-container__placer {
+  position: absolute;
+  inset: 0;
+}</style>

package/dist/ui/proportional-container/cmp.proportional-container.svelte.d.ts

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

package/dist/ui/proportional-container/index.d.ts

@@ -0,0 +1 @@
+export { default as ProportionalContainer } from './cmp.proportional-container.svelte';

package/dist/ui/proportional-container/index.js

@@ -0,0 +1 @@
+export { default as ProportionalContainer } from './cmp.proportional-container.svelte';

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@streamscloud/kit",
-  "version": "0.0.1-1770823200886",
+  "version": "0.0.1-1770841384222",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",
@@ -88,6 +88,18 @@
       "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"
+    },
+    "./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"