@streamscloud/kit 0.0.1-1770820176986 → 0.0.1-1770839905472

package/dist/core/toastr/toaster-host.svelte.d.ts

@@ -1,5 +1,7 @@
+type Toast = typeof import('svelte-sonner').toast;
 export declare class ToasterHost {
-    private static _ready;
+    private static _toast;
     private static _mountPromise;
-    static ensure(): Promise<void>;
+    static ensure(): Promise<Toast>;
 }
+export {};

package/dist/core/toastr/toaster-host.svelte.js

@@ -1,20 +1,20 @@
 import { AppTheme } from '../theme';
 import { mount, tick } from 'svelte';
-import { Toaster } from 'svelte-sonner';
 export class ToasterHost {
-    static _ready = false;
+    static _toast = null;
     static _mountPromise = null;
     static async ensure() {
-        if (this._ready) {
-            return;
+        if (this._toast) {
+            return this._toast;
         }
         if (this._mountPromise) {
             return this._mountPromise;
         }
         if (typeof document === 'undefined') {
-            return;
+            throw new Error('ToasterHost requires a browser environment');
         }
         this._mountPromise = (async () => {
+            const { Toaster, toast } = await import('svelte-sonner');
             const container = document.createElement('div');
             container.id = 'toastr-container';
             document.body.appendChild(container);
@@ -33,7 +33,8 @@ export class ToasterHost {
                 }
             });
             await tick();
-            this._ready = true;
+            this._toast = toast;
+            return toast;
         })();
         return this._mountPromise;
     }

package/dist/core/toastr/toastr.svelte.js

@@ -1,24 +1,23 @@
 import { ToasterHost } from './toaster-host.svelte';
-import { toast } from 'svelte-sonner';
 export class Toastr {
     static async error(message, options) {
-        await ToasterHost.ensure();
+        const toast = await ToasterHost.ensure();
         toast.error(message, patchOptions(options));
     }
     static async success(message, options) {
-        await ToasterHost.ensure();
+        const toast = await ToasterHost.ensure();
         toast.success(message, patchOptions(options));
     }
     static async warning(message, options) {
-        await ToasterHost.ensure();
+        const toast = await ToasterHost.ensure();
         toast.warning(message, patchOptions(options));
     }
     static async info(message, options) {
-        await ToasterHost.ensure();
+        const toast = await ToasterHost.ensure();
         toast.info(message, patchOptions(options));
     }
     static async promise(promise, messages) {
-        await ToasterHost.ensure();
+        const toast = await ToasterHost.ensure();
         toast.promise(promise, messages);
     }
 }

package/dist/ui/image/cmp.image.svelte

@@ -6,11 +6,11 @@ let hasError = $state(false);
 const imageState = $derived(calculateImageState(src, hasError, showStubOnError));
 const onLoad = () => {
     hasError = false;
-    on?.load(true);
+    on?.load?.(true);
 };
 const onLoadError = () => {
     hasError = true;
-    on?.load(false);
+    on?.load?.(false);
 };
 </script>
 

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

@@ -4,7 +4,7 @@ type Props = {
     alt?: string;
     showStubOnError?: boolean;
     on?: {
-        load: (loadedSuccessfully: boolean) => void;
+        load?: (loadedSuccessfully: boolean) => void;
     };
     stub?: Snippet;
 };

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

@@ -0,0 +1,82 @@
+<script lang="ts">import { onMount } from 'svelte';
+let { positionFixedCenter = false, positionAbsoluteCenter = false, blocking = false, timeout = 0 } = $props();
+let visible = $state(false);
+onMount(() => {
+    setTimeout(() => (visible = true), timeout);
+});
+</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-1770820176986",
+  "version": "0.0.1-1770839905472",
   "author": "StreamsCloud",
   "repository": {
     "type": "git",
@@ -88,6 +88,14 @@
       "types": "./dist/ui/image/index.d.ts",
       "svelte": "./dist/ui/image/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"