feat: docker compose maybe

node_modules/@skeletonlabs/skeleton/dist/utilities/Toast/Toast.svelte

@@ -0,0 +1,141 @@
+<script context="module">import { fly } from "svelte/transition";
+import { prefersReducedMotionStore } from "../../index.js";
+import { dynamicTransition } from "../../internal/transitions.js";
+</script>
+
+<script generics="TransitionIn extends Transition = FlyTransition, TransitionOut extends Transition = FlyTransition">import { flip } from "svelte/animate";
+import { getToastStore } from "./stores.js";
+const toastStore = getToastStore();
+export let position = "b";
+export let max = 3;
+export let background = "variant-filled-secondary";
+export let width = "max-w-[640px]";
+export let color = "";
+export let padding = "p-4";
+export let spacing = "space-x-4";
+export let rounded = "rounded-container-token";
+export let shadow = "shadow-lg";
+export let zIndex = "z-[888]";
+export let buttonAction = "btn variant-filled";
+export let buttonDismiss = "btn-icon btn-icon-sm variant-filled";
+export let buttonDismissLabel = "\u2715";
+export let transitions = !$prefersReducedMotionStore;
+export let transitionIn = fly;
+export let transitionInParams = { duration: 250 };
+export let transitionOut = fly;
+export let transitionOutParams = { duration: 250 };
+const cWrapper = "flex fixed top-0 left-0 right-0 bottom-0 pointer-events-none";
+const cSnackbar = "flex flex-col gap-y-2";
+const cToast = "flex justify-between items-center pointer-events-auto";
+const cToastActions = "flex items-center space-x-2";
+let cPosition;
+let cAlign;
+let animAxis = { x: 0, y: 0 };
+switch (position) {
+  case "t":
+    cPosition = "justify-center items-start";
+    cAlign = "items-center";
+    animAxis = { x: 0, y: -100 };
+    break;
+  case "b":
+    cPosition = "justify-center items-end";
+    cAlign = "items-center";
+    animAxis = { x: 0, y: 100 };
+    break;
+  case "l":
+    cPosition = "justify-start items-center";
+    cAlign = "items-start";
+    animAxis = { x: -100, y: 0 };
+    break;
+  case "r":
+    cPosition = "justify-end items-center";
+    cAlign = "items-end";
+    animAxis = { x: 100, y: 0 };
+    break;
+  case "tl":
+    cPosition = "justify-start items-start";
+    cAlign = "items-start";
+    animAxis = { x: -100, y: 0 };
+    break;
+  case "tr":
+    cPosition = "justify-end items-start";
+    cAlign = "items-end";
+    animAxis = { x: 100, y: 0 };
+    break;
+  case "bl":
+    cPosition = "justify-start items-end";
+    cAlign = "items-start";
+    animAxis = { x: -100, y: 0 };
+    break;
+  case "br":
+    cPosition = "justify-end items-end";
+    cAlign = "items-end";
+    animAxis = { x: 100, y: 0 };
+    break;
+}
+function onAction(index) {
+  $toastStore[index]?.action?.response();
+  toastStore.close($toastStore[index].id);
+}
+function onMouseEnter(index) {
+  if ($toastStore[index]?.hoverable) {
+    toastStore.freeze(index);
+    classesSnackbar += " scale-[105%]";
+  }
+}
+function onMouseLeave(index) {
+  if ($toastStore[index]?.hoverable) {
+    toastStore.unfreeze(index);
+    classesSnackbar = classesSnackbar.replace(" scale-[105%]", "");
+  }
+}
+$:
+  classesWrapper = `${cWrapper} ${cPosition} ${zIndex} ${$$props.class || ""}`;
+$:
+  classesSnackbar = `${cSnackbar} ${cAlign} ${padding}`;
+$:
+  classesToast = `${cToast} ${width} ${color} ${padding} ${spacing} ${rounded} ${shadow}`;
+$:
+  filteredToasts = Array.from($toastStore).slice(0, max);
+</script>
+
+{#if $toastStore.length}
+	<!-- Wrapper -->
+	<div class="snackbar-wrapper {classesWrapper}" data-testid="snackbar-wrapper">
+		<!-- List -->
+		<div class="snackbar {classesSnackbar}">
+			{#each filteredToasts as t, i (t)}
+				<div
+					animate:flip={{ duration: transitions ? 250 : 0 }}
+					in:dynamicTransition|global={{
+						transition: transitionIn,
+						params: { x: animAxis.x, y: animAxis.y, ...transitionInParams },
+						enabled: transitions
+					}}
+					out:dynamicTransition|global={{
+						transition: transitionOut,
+						params: { x: animAxis.x, y: animAxis.y, ...transitionOutParams },
+						enabled: transitions
+					}}
+					on:mouseenter={() => onMouseEnter(i)}
+					on:mouseleave={() => onMouseLeave(i)}
+					role={t.hideDismiss ? 'alert' : 'alertdialog'}
+					aria-live="polite"
+				>
+					<!-- Toast -->
+					<div class="toast {classesToast} {t.background ?? background} {t.classes ?? ''}" data-testid="toast">
+						<div class="text-base">{@html t.message}</div>
+						{#if t.action || !t.hideDismiss}
+							<div class="toast-actions {cToastActions}">
+								{#if t.action}<button class={buttonAction} on:click={() => onAction(i)}>{@html t.action.label}</button>{/if}
+								{#if !t.hideDismiss}<button class={buttonDismiss} aria-label="Dismiss toast" on:click={() => toastStore.close(t.id)}
+										>{buttonDismissLabel}</button
+									>{/if}
+							</div>
+						{/if}
+					</div>
+				</div>
+			{/each}
+		</div>
+	</div>
+{/if}

node_modules/@skeletonlabs/skeleton/dist/utilities/Toast/Toast.svelte.d.ts

@@ -0,0 +1,55 @@
+import { SvelteComponentTyped } from "svelte";
+import { fly } from 'svelte/transition';
+import { type Transition, type TransitionParams } from '../../index.js';
+type FlyTransition = typeof fly;
+declare class __sveltets_Render<TransitionIn extends Transition = FlyTransition, TransitionOut extends Transition = FlyTransition> {
+    props(): {
+        [x: string]: any;
+        /** Set the toast position.*/
+        position?: "b" | "br" | "tr" | "t" | "l" | "r" | "tl" | "bl" | undefined;
+        /** Maximum toasts that can show at once.*/
+        max?: number | undefined;
+        /** Provide classes to set the background color.*/
+        background?: string | undefined;
+        /** Provide classes to set width styles.*/
+        width?: string | undefined;
+        /** Provide classes to set the text color.*/
+        color?: string | undefined;
+        /** Provide classes to set the padding.*/
+        padding?: string | undefined;
+        /** Provide classes to set toast horizontal spacing.*/
+        spacing?: string | undefined;
+        /** Provide classes to set the border radius styles.*/
+        rounded?: string | undefined;
+        /** Provide classes to set the border box shadow.*/
+        shadow?: string | undefined;
+        /** Provide a class to override the z-index*/
+        zIndex?: string | undefined;
+        /** Provide styles for the action button.*/
+        buttonAction?: string | undefined;
+        /** Provide styles for the dismiss button.*/
+        buttonDismiss?: string | undefined;
+        /** The button label text.*/
+        buttonDismissLabel?: string | undefined;
+        /** Enable/Disable transitions*/
+        transitions?: boolean | undefined;
+        /** Provide the transition to used on entry.*/
+        transitionIn?: TransitionIn | undefined;
+        /** Transition params provided to `transitionIn`.*/
+        transitionInParams?: TransitionParams<TransitionIn> | undefined;
+        /** Provide the transition to used on exit.*/
+        transitionOut?: TransitionOut | undefined;
+        /** Transition params provided to `transitionOut`.*/
+        transitionOutParams?: TransitionParams<TransitionOut> | undefined;
+    };
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
+}
+export type ToastProps<TransitionIn extends Transition = FlyTransition, TransitionOut extends Transition = FlyTransition> = ReturnType<__sveltets_Render<TransitionIn, TransitionOut>['props']>;
+export type ToastEvents<TransitionIn extends Transition = FlyTransition, TransitionOut extends Transition = FlyTransition> = ReturnType<__sveltets_Render<TransitionIn, TransitionOut>['events']>;
+export type ToastSlots<TransitionIn extends Transition = FlyTransition, TransitionOut extends Transition = FlyTransition> = ReturnType<__sveltets_Render<TransitionIn, TransitionOut>['slots']>;
+export default class Toast<TransitionIn extends Transition = FlyTransition, TransitionOut extends Transition = FlyTransition> extends SvelteComponentTyped<ToastProps<TransitionIn, TransitionOut>, ToastEvents<TransitionIn, TransitionOut>, ToastSlots<TransitionIn, TransitionOut>> {
+}
+export {};

node_modules/@skeletonlabs/skeleton/dist/utilities/Toast/ToastTest.svelte

@@ -0,0 +1,12 @@
+<script>import { initializeToastStore, getToastStore } from "./stores.js";
+import Toast from "./Toast.svelte";
+export let toastSettings = [];
+export let max = void 0;
+initializeToastStore();
+const toastStore = getToastStore();
+toastSettings.forEach((element) => {
+  toastStore.trigger(element);
+});
+</script>
+
+<Toast {max} />

node_modules/@skeletonlabs/skeleton/dist/utilities/Toast/ToastTest.svelte.d.ts

@@ -0,0 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ToastSettings } from './types.js';
+declare const __propDef: {
+    props: {
+        toastSettings?: ToastSettings[] | undefined;
+        max?: number | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ToastTestProps = typeof __propDef.props;
+export type ToastTestEvents = typeof __propDef.events;
+export type ToastTestSlots = typeof __propDef.slots;
+export default class ToastTest extends SvelteComponentTyped<ToastTestProps, ToastTestEvents, ToastTestSlots> {
+}
+export {};

node_modules/@skeletonlabs/skeleton/dist/utilities/Toast/stores.d.ts

@@ -0,0 +1,37 @@
+/// <reference types="svelte" />
+import type { ToastSettings, Toast } from './types.js';
+/**
+ * Retrieves the `toastStore`.
+ *
+ * This can *ONLY* be called from the **top level** of components!
+ *
+ * @example
+ * ```svelte
+ * <script>
+ * 	import { getToastStore } from "@skeletonlabs/skeleton";
+ *
+ * 	const toastStore = getToastStore();
+ *
+ * 	toastStore.open({ message: "Welcome!" });
+ * </script>
+ * ```
+ */
+export declare function getToastStore(): ToastStore;
+/**
+ * Initializes the `toastStore`.
+ */
+export declare function initializeToastStore(): ToastStore;
+export type ToastStore = ReturnType<typeof toastService>;
+declare function toastService(): {
+    subscribe: (this: void, run: import("svelte/store").Subscriber<Toast[]>, invalidate?: import("svelte/store").Invalidator<Toast[]> | undefined) => import("svelte/store").Unsubscriber;
+    close: (id: string) => void;
+    /** Add a new toast to the queue. */
+    trigger: (toast: ToastSettings) => string;
+    /** Remain visible on hover */
+    freeze: (index: number) => void;
+    /** Cancel remain visible on leave */
+    unfreeze: (index: number) => void;
+    /** Remove all toasts from queue */
+    clear: () => void;
+};
+export {};

node_modules/@skeletonlabs/skeleton/dist/utilities/Toast/stores.js

@@ -0,0 +1,107 @@
+// Toast Store Queue
+import { writable } from 'svelte/store';
+import { getContext, setContext } from 'svelte';
+const toastDefaults = { message: 'Missing Toast Message', autohide: true, timeout: 5000 };
+const TOAST_STORE_KEY = 'toastStore';
+/**
+ * Retrieves the `toastStore`.
+ *
+ * This can *ONLY* be called from the **top level** of components!
+ *
+ * @example
+ * ```svelte
+ * <script>
+ * 	import { getToastStore } from "@skeletonlabs/skeleton";
+ *
+ * 	const toastStore = getToastStore();
+ *
+ * 	toastStore.open({ message: "Welcome!" });
+ * </script>
+ * ```
+ */
+export function getToastStore() {
+    const toastStore = getContext(TOAST_STORE_KEY);
+    if (!toastStore)
+        throw new Error('toastStore is not initialized. Please ensure that `initializeStores()` is invoked in the root layout file of this app!');
+    return toastStore;
+}
+/**
+ * Initializes the `toastStore`.
+ */
+export function initializeToastStore() {
+    const toastStore = toastService();
+    return setContext(TOAST_STORE_KEY, toastStore);
+}
+// Note for security; differentiates the queued toasts
+function randomUUID() {
+    const random = Math.random();
+    return Number(random).toString(32);
+}
+function toastService() {
+    const { subscribe, set, update } = writable([]);
+    /** Remove toast in queue*/
+    const close = (id) => update((tStore) => {
+        if (tStore.length > 0) {
+            const index = tStore.findIndex((t) => t.id === id);
+            const selectedToast = tStore[index];
+            if (selectedToast) {
+                // Trigger Callback
+                if (selectedToast.callback)
+                    selectedToast.callback({ id, status: 'closed' });
+                // Clear timeout
+                if (selectedToast.timeoutId)
+                    clearTimeout(selectedToast.timeoutId);
+                // Remove
+                tStore.splice(index, 1);
+            }
+        }
+        return tStore;
+    });
+    // If toast should auto-hide, wait X time, then close by ID
+    function handleAutoHide(toast) {
+        if (toast.autohide === true) {
+            return setTimeout(() => {
+                close(toast.id);
+            }, toast.timeout);
+        }
+    }
+    return {
+        subscribe,
+        close,
+        /** Add a new toast to the queue. */
+        trigger: (toast) => {
+            const id = randomUUID();
+            update((tStore) => {
+                // Trigger Callback
+                if (toast && toast.callback)
+                    toast.callback({ id, status: 'queued' });
+                // activate autohide when dismiss button is hidden.
+                if (toast.hideDismiss)
+                    toast.autohide = true;
+                // Merge with defaults
+                const tMerged = { ...toastDefaults, ...toast, id };
+                // Handle auto-hide, if needed
+                tMerged.timeoutId = handleAutoHide(tMerged);
+                // Push into store
+                tStore.push(tMerged);
+                // Return
+                return tStore;
+            });
+            return id;
+        },
+        /** Remain visible on hover */
+        freeze: (index) => update((tStore) => {
+            if (tStore.length > 0)
+                clearTimeout(tStore[index].timeoutId);
+            return tStore;
+        }),
+        /** Cancel remain visible on leave */
+        unfreeze: (index) => update((tStore) => {
+            if (tStore.length > 0)
+                tStore[index].timeoutId = handleAutoHide(tStore[index]);
+            return tStore;
+        }),
+        /** Remove all toasts from queue */
+        clear: () => set([])
+    };
+}

node_modules/@skeletonlabs/skeleton/dist/utilities/Toast/types.d.ts

@@ -0,0 +1,35 @@
+export type { ToastStore } from './stores.js';
+export interface ToastSettings {
+    /** Provide the toast message. Supports HTML. */
+    message: string;
+    /** Provide CSS classes to set the background color. */
+    background?: string;
+    /** Enables auto-hide after the timeout duration. */
+    autohide?: boolean;
+    /** Set the auto-hide timeout duration. */
+    timeout?: number;
+    /** Generate a custom action button UI. */
+    action?: {
+        /** The button label. Supports HTML. */
+        label: string;
+        /** The function triggered when the button is pressed. */
+        response: () => void;
+    };
+    /** Hide dismiss button */
+    hideDismiss?: boolean;
+    /** Remain visible on Hover */
+    hoverable?: boolean;
+    /** Provide arbitrary CSS classes to style the toast. */
+    classes?: string;
+    /** Callback function that fires on trigger and close. */
+    callback?: (response: {
+        id: string;
+        status: 'queued' | 'closed';
+    }) => void;
+}
+export interface Toast extends ToastSettings {
+    /** A UUID will be auto-assigned on `.trigger()`. */
+    id: string;
+    /** The id of the `setTimeout` if `autohide` is enabled  */
+    timeoutId?: ReturnType<typeof setTimeout>;
+}

node_modules/@skeletonlabs/skeleton/dist/utilities/Toast/types.js

@@ -0,0 +1,2 @@
+// Toast interface types
+export {};