@sierra-95/svelte-scaffold 1.0.81 → 1.1.1

package/dist/Core/components/Form/Button/Flip/button.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import './button.css';
     type _buttonType = 'button' | 'submit' | 'reset';
     const {
         back = "back",
@@ -25,55 +26,3 @@
 		rest.onclick?.(e);
 	}} 
 ></button>
-<style>.btn-flip {
-  position: relative;
-  display: inline-block;
-  width: 150px; /* you can fix width if needed */
-  height: 40px;
-  text-align: center;
-  perspective: 1000px;
-  color: var(--text-color);
-}
-
-.btn-flip::before,
-.btn-flip::after {
-  content: attr(data-front);
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 0 30px;
-  line-height: 40px;
-  transition: 0.5s;
-  backface-visibility: hidden;
-  box-sizing: border-box;
-}
-
-.btn-flip::before {
-  content: attr(data-front);
-  background: var(--bg-front);
-  transform: translateY(0) rotateX(0);
-  opacity: 1;
-}
-
-.btn-flip::after {
-  content: attr(data-back);
-  background: var(--bg-back);
-  transform: translateY(-50%) rotateX(90deg);
-  opacity: 0;
-}
-
-.btn-flip:hover::before {
-  opacity: 0;
-  transform: translateY(50%) rotateX(90deg);
-}
-
-.btn-flip:hover::after {
-  opacity: 1;
-  transform: translateY(0) rotateX(0);
-}
-</style>

package/dist/Core/components/Form/Button/Flip/button.svelte.d.ts

@@ -1,3 +1,4 @@
+import './button.css';
 declare const Button: import("svelte").Component<{
     back?: string;
     front?: string;

package/dist/Core/components/Form/Button/Swipe/button.svelte

@@ -1,4 +1,5 @@
 <script lang="ts">
+    import './button.css';
     import {buttonRipple} from '../../../../../index.js'
 
     type _buttonType = 'button' | 'submit' | 'reset';
@@ -22,37 +23,4 @@
     onclick={(e: MouseEvent) => {
 		rest.onclick?.(e);
 	}} 
->{text}</button>
-<style>.swipe-btn {
-  position: relative;
-  display: block;
-  width:130px;
-  height: 30px;
-  line-height: 27px;
-  text-align: center;
-  border: 1px solid var(--btn-color);
-  border-radius: 50px;
-  overflow: hidden;
-  cursor: pointer;
-  z-index: 0;
-  color: var(--text-color);
-  transition: color 0.4s ease;
-}
-/* Swipe layer */
-.swipe-btn::before {
-  content: '';
-  position: absolute;
-  top: 0; left: 0; bottom: 0; right: 0;
-  background-color: var(--btn-color);
-  transform: translateX(-100%);
-  transition: transform 0.4s ease;
-  z-index: -1;
-}
-/* Hover triggers swipe */
-.swipe-btn:hover::before {
-  transform: translateX(0);
-}
-.swipe-btn:hover {
-  color: var(--button-text);
-}
-</style>
+>{text}</button>

package/dist/Core/components/Form/Button/Swipe/button.svelte.d.ts

@@ -1,3 +1,4 @@
+import './button.css';
 declare const Button: import("svelte").Component<{
     text?: string;
     bg?: string;

package/dist/Core/components/Form/Input/FileInput/fileInput.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { onDestroy } from 'svelte';
-    import {fileInputStore, Button, setToastMessage, DOCUMENT_MIME_TYPES} from '../../../../../index.js'
+    import {fileInputStore, Button, DOCUMENT_MIME_TYPES, addToast} from '../../../../../index.js'
     import Preview from './preview.svelte';
 
     const {
@@ -44,18 +44,20 @@
 
         for (const file of files) {
             if (!isAllowedType(file)) {
-                setToastMessage(
-                    'error',
-                    `"${file.name}" is not an allowed file type. Allowed types: ${allowedTypes()}`
-                );
+                addToast({
+                    status: 'error',
+                    message: `"${file.name}" is not an allowed file type. Allowed types: ${allowedTypes()}`,
+                    priority: 'high'
+                })
                 continue; // skip invalid
             }
 
             if (file.size > $fileInputStore.sizeConstraint) {
-                setToastMessage(
-                    'error',
-                    `"${file.name}" exceeds the allowed file size`
-                );
+                addToast({
+                    status: 'error',
+                    message: `"${file.name}" exceeds the allowed file size`,
+                    priority: 'high'
+                });
                 continue; // skip oversized
             }
             validFiles.push(file); 

package/dist/Core/components/others/Previews/Audio/audio.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import {setToastMessage,ButtonTimes, fileInputStore, ButtonSelect, removeFileForMedia, toggleSelectForMedia} from '../../../../../index.js'
+    import {ButtonTimes, fileInputStore, ButtonSelect, removeFileForMedia, toggleSelectForMedia, addToast} from '../../../../../index.js'
     export let media;
     export let buttonTimes = false;
     export let urlsOnly = true;
@@ -8,7 +8,10 @@
     let audioRefs: Record<string, HTMLAudioElement> = {};
     function togglePlay(id: string) {
         if(!urlsOnly){
-            setToastMessage('warning', 'Audio preview is disabled for local files.');
+            addToast({
+                status: 'warning',
+                message: 'Audio preview is disabled for local files.'
+            });
             return;
         }
         const audio = audioRefs[id];

package/dist/Core/components/others/Progress/LinearProgress/LinearProgress.svelte

@@ -1,86 +1,13 @@
 <script>
+  import './LinearProgress.css';
   const {
     color = 'var(--primary-bg)',
   } = $props();
 </script>
-<style>.pure-material-progress-linear {
-    -webkit-appearance: none;
-    -moz-appearance: none;
-    appearance: none;
-    border: none;
-    height: 0.25em;
-    background-color: rgba( 33, 150, 243, 0.12);
-    font-size: 16px;
-}
 
-.pure-material-progress-linear::-webkit-progress-bar {
-    background-color: transparent;
-}
-
-/* Determinate */
-
-.pure-material-progress-linear::-webkit-progress-value {
-    background-color: currentColor;
-    transition: all 0.2s;
-}
-
-.pure-material-progress-linear::-moz-progress-bar {
-    background-color: currentColor;
-    transition: all 0.2s;
-}
-
-.pure-material-progress-linear::-ms-fill {
-    border: none;
-    background-color: currentColor;
-    transition: all 0.2s;
-}
-
-/* Indeterminate */
-
-.pure-material-progress-linear:indeterminate {
-    background-size: 200% 100%;
-    background-image: linear-gradient(to right, transparent 50%, currentColor 50%, currentColor 60%, transparent 60%, transparent 71.5%, currentColor 71.5%, currentColor 84%, transparent 84%);
-    animation: pure-material-progress-linear 2s infinite linear;
-}
-
-.pure-material-progress-linear:indeterminate::-moz-progress-bar {
-    background-color: transparent;
-}
-
-.pure-material-progress-linear:indeterminate::-ms-fill {
-    animation-name: none;
-}
-
-@keyframes pure-material-progress-linear {
-    0% {
-        background-size: 200% 100%;
-        background-position: left -31.25% top 0%;
-    }
-    50% {
-        background-size: 800% 100%;
-        background-position: left -49% top 0%;
-    }
-    100% {
-        background-size: 400% 100%;
-        background-position: left -102% top 0%;
-    }
-}
-
-.cover{
-    position: relative;
-    height: 0.25em;
-  }
-
-.child{
-    width: 100%;
-    position: absolute;
-    left: 0;
-    right: 0;
-  }
-</style>
-<div class="cover">
+<div style="position: relative; height: 0.25em;">
   <progress 
-    style="color: {color};"
-    class="pure-material-progress-linear child"
+    style="color: {color}; width: 100%; position: absolute; left: 0; right: 0;"
+    class="pure-material-progress-linear"
     ></progress>
 </div>

package/dist/Core/features/ToastManager/toastManager.svelte

@@ -0,0 +1,56 @@
+<script lang="ts">
+	import { toasts, removeToast, ButtonTimes } from '../../../index.js';
+    import type { Toast } from '../../../stores/features/toastManager.js';
+
+    let elements =$state<HTMLDivElement[]>([]);
+    let toastMessages=$state<Toast[]>([]);
+
+    $effect(()=>{
+        toastMessages = $toasts;
+    })
+
+    const getOffset = (index: number) => {
+        let offset = 0;
+
+        for (let i = 0; i < index; i++) {
+            offset += elements[i]?.offsetHeight || 0;
+            offset += 10; // gap between toasts
+        }
+        return offset;
+    };
+</script>
+
+<style>
+    #toast{
+        position: fixed;
+        top: 80px;
+        right: 20px;
+        width: 300px;
+        border-top-right-radius: 5px;
+        border-bottom-right-radius: 5px;
+        border-left: 6px solid var(--retval);
+        box-shadow: var(--box-shadow);
+        background-color: var(--menu-bg);
+        transition: transform 0.3s ease, opacity 0.3s ease;
+        z-index: 25;
+    }
+</style>
+{#each toastMessages as toast,i (toast.id)}
+    <div 
+        id="toast"
+        bind:this={elements[i]}
+        style="--retval: {toast.color}; 
+        transform: translateY({getOffset(i)}px);
+    ">
+		<div style="display: flex; align-items: center; justify-content: space-between; padding: 5px 5px 5px 10px;">
+			<div style="display: flex;align-items: center; gap: 10px;">
+				<i style="color: {toast.color};" class="fa-solid {toast.icon}"></i>
+				<p style="font-weight: bold; color: {toast.color}; max-width: 250px;"
+                    class="sierra-text-wrap"
+                >{toast.status}</p>
+			</div>
+            <ButtonTimes width="50px" height="100%" absolute={false} iconSize="18px" onclick={() => removeToast(toast.id)}/>
+        </div>
+		<div style="padding: 0px 5px 5px 20px;">{ toast.message }</div>
+	</div>
+{/each}

package/dist/Core/features/ToastManager/toastManager.svelte.d.ts

@@ -0,0 +1,3 @@
+declare const ToastManager: import("svelte").Component<Record<string, never>, {}, "">;
+type ToastManager = ReturnType<typeof ToastManager>;
+export default ToastManager;

package/dist/Hooks/layout_menu.js

@@ -1,5 +1,5 @@
 import { get } from 'svelte/store';
-import { setToastMessage, layoutStore } from '../index.js';
+import { layoutStore, addToast } from '../index.js';
 export function validateLayoutMenuSections(sections) {
     const seenPaths = new Set();
     for (const section of sections) {
@@ -9,12 +9,20 @@ export function validateLayoutMenuSections(sections) {
                 continue;
             // Check for missing id
             if (!item.id) {
-                setToastMessage('warning', `Parent item "${item.label}" with path "${item.path}" is missing an 'id'. Each parent must have a unique 'id'.`);
+                addToast({
+                    status: 'warning',
+                    message: `Parent item "${item.label}" with path "${item.path}" is missing an 'id'. Each parent must have a unique 'id'.`,
+                    persistent: true
+                });
                 console.warn(`Missing id on parent item:`, item);
             }
             // Check for duplicate paths
             if (seenPaths.has(item.path)) {
-                setToastMessage('warning', `Duplicate parent path detected: "${item.path}". Each parent must have a unique path.`);
+                addToast({
+                    status: 'warning',
+                    message: `Duplicate parent path detected: "${item.path}". Each parent must have a unique path.`,
+                    persistent: true
+                });
                 console.warn(`Duplicate parent path: "${item.path}"`, item);
             }
             else {

package/dist/Modules/Editor/Hooks/extractContent.js

@@ -1,4 +1,4 @@
-import { setToastMessage } from '../../../index.js';
+import { addToast } from '../../../index.js';
 /**
  * @param {import('@tiptap/core').Editor} editor
  */
@@ -9,6 +9,9 @@ export async function exractContent(editor) {
         const html_content = editor.getHTML();
         return { json_content, html_content};
     }catch (error) {
-        setToastMessage('error', 'An error occurred while processing content.');
+        addToast({
+            status: 'error',
+            message: 'An error occurred while processing content.'
+        });
     }
 }

package/dist/Modules/Editor/Nodes/Images/images.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
 	import { insertImageAndMoveCursor } from '../../tools.js';
-	import {fileInputStore, resetFileInputStore, editorStore, setToastMessage, modalStore, Input, DropdownContainer, MenuItem} from '../../../../index.js';
+	import {fileInputStore, resetFileInputStore, editorStore, modalStore, Input, DropdownContainer, MenuItem, addToast} from '../../../../index.js';
 
 
   	import type { Editor } from "@tiptap/core";
@@ -16,7 +16,11 @@
 			!$editorStore.serverStorageUrl ||
 			!$editorStore.serverDownloadUrl
 		){
-			setToastMessage('error','Server configuration is missing.');
+			addToast({
+				status: 'error',
+				message: 'Please configure the server settings in the editor configuration.',
+				persistent: true
+			});
 			return;
 		}
 		fileInputStore.update(store => ({ 
@@ -56,7 +60,10 @@
 			title: 'Editor',
 			onConfirm: () => {
 				if (!isValidUrl(value)) {
-					setToastMessage('error', 'Please enter a valid image URL.');
+					addToast({
+						status: 'error',
+						message: 'Please enter a valid image URL.'
+					});
 					return;
 				}
 				insertImageAndMoveCursor(value, editor);

package/dist/Modules/Editor/export.svelte

@@ -1,19 +1,28 @@
 <script lang="ts">
-    import { setToastMessage,isLoading, editorStore} from '../../index.js';
+    import {isLoading, editorStore,addToast} from '../../index.js';
     import { exractContent } from './tools.js';
 
     import type { Editor } from "@tiptap/core";
     export let editor: Editor;
 
     async function onSave() {
-      if(editor?.isEmpty) setToastMessage('warning','Editor is empty')
+      if(editor?.isEmpty) { 
+        addToast({
+          status: 'warning',
+          message: 'Editor is empty'
+        });
+        return;
+      }
       try {
         isLoading.set(true);
         const content = await exractContent(editor); 
         editorStore.update((state) => ({ ...state, content }));
         if($editorStore.content) $editorStore.onExport();
       }catch (error) {
-          setToastMessage('error', 'An error occurred while processing content.');
+          addToast({
+            status: 'error',
+            message: 'An error occurred while processing content.'
+          });
       } finally {
         isLoading.set(false);
       }

package/dist/Modules/FilePicker/ActionsMenu/delete_media.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { get } from "svelte/store";
-    import {modalStore, fileInputStore, setToastMessage, MenuItem} from "../../../index.js";
+    import {modalStore, fileInputStore, MenuItem, addToast} from "../../../index.js";
 
     let {
         processing = $bindable(),
@@ -41,13 +41,19 @@
 
             if (!response.ok) {
                 //console.error('Delete request failed:', data);
-                setToastMessage('error', data || 'Failed to delete files.');
+                addToast({
+                    status: 'error',
+                    message: data || 'Failed to delete files.'
+                });
                 return;
             }
 
             data.forEach((item: { id: string; code: number }) => {
                 if (item.code === 404) {
-                    setToastMessage('error', `Failed to delete file with ID: ${item.id}`);
+                    addToast({
+                        status: 'error',
+                        message: `Failed to delete file with ID: ${item.id}`
+                    });
                 }
             });
             fileInputStore.update(store => ({ 
@@ -57,7 +63,10 @@
             }));
 
         } catch (error) {
-            setToastMessage('error', `Error deleting files: ${error}`);
+            addToast({
+                status: 'error',
+                message: `Error deleting files: ${error}`
+            });
         } finally {
             processing = false;
         }

package/dist/Modules/FilePicker/ActionsMenu/download_media.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { get } from "svelte/store";
-    import {MenuItem, fileInputStore, User, setToastMessage} from "../../../index.js";
+    import {MenuItem, fileInputStore, User, addToast} from "../../../index.js";
 
     let {
         processing = $bindable(),
@@ -11,7 +11,10 @@
         openActionsMenu = false;
         const store = get(fileInputStore);
         if (!store.submissions?.length || !$User.userId) {
-            setToastMessage('error', 'An error occurred while processing your request.');
+            addToast({
+                status: 'error',
+                message: 'An error occurred while processing your request.'
+            });
             return;
         };
         try {
@@ -41,7 +44,10 @@
             });
 
             if (!res.ok) {
-                setToastMessage('error', await res.json() || 'Upload failed' );
+                addToast({
+                    status: 'error',
+                    message: await res.json() || 'Download failed'
+                });
                 return;
             }
             
@@ -66,7 +72,10 @@
             URL.revokeObjectURL(url);
             
         } catch (err) {
-            setToastMessage('error', `Upload failed: ${err}`);
+            addToast({
+                status: 'error',
+                message: `Download failed: ${err}`
+            });
         }
     }
 </script>

package/dist/Modules/FilePicker/ActionsMenu/media_storage.svelte

@@ -1,6 +1,6 @@
 <script>
     import { onMount } from 'svelte';
-    import { fileInputStore, User, setToastMessage, CustomProgress} from '../../../index.js';
+    import { fileInputStore, User, CustomProgress, addToast} from '../../../index.js';
     
     export let padding = "0.5rem";
     export let hidden = false;
@@ -25,14 +25,22 @@
             const data = await res.json();
 
             if (!res.ok) {
-                setToastMessage("error", data || "Failed to fetch storage usage.");
+                addToast({
+                    status: 'error',
+                    message: data || "Failed to fetch storage usage.",
+                    persistent: true
+                });
                 return;
             }
             const { usedBytes, maxBytes } = data.storage;
             progress = (usedBytes / maxBytes) * 100;
         } catch (e) {
             console.error("catch error:", e);
-            setToastMessage("error", "An error occurred while fetching storage usage.");
+            addToast({
+                status: 'error',
+                message: "An error occurred while fetching storage usage.",
+                persistent: true
+            });
         }
     }
 

package/dist/Modules/FilePicker/Cloud/cloudStore.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { onMount } from 'svelte';
-    import { fileInputStore, User, setToastMessage, buttonRipple, isMobile, isTablet } from '../../../index.js';
+    import { fileInputStore, User, buttonRipple, isMobile, isTablet, addToast } from '../../../index.js';
     import Previews from './previews.svelte';
     import Storage from '../ActionsMenu/media_storage.svelte';
 
@@ -47,13 +47,19 @@
 
             if (!res.ok) {
                 //console.log('Error fetching media:', data);
-                setToastMessage("error", data || "Failed to fetch media.");
+                addToast({
+                    status: 'error',
+                    message: data || "Failed to fetch media."
+                });
                 return;
             }
             media = data;
         } catch (e) {
             console.error("catch error:", e);
-            setToastMessage("error", "An error occurred while fetching media.");
+            addToast({
+                status: 'error',
+                message: "An error occurred while fetching media."
+            });
         } finally {
             processing = false;
         }

package/dist/Modules/FilePicker/main.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-    import {Backdrop,Wrapper,fileInputStore, LinearProgress,FileInput, User, setToastMessage, Tabs, resetFileInputStore} from '../../index.js'
+    import {Backdrop,Wrapper,fileInputStore, LinearProgress,FileInput, User, Tabs, resetFileInputStore, addToast} from '../../index.js'
     import CloudStore from './Cloud/cloudStore.svelte';
     import Actions from './ActionsMenu/Actions.svelte';
 
@@ -24,13 +24,20 @@
             const data = await res.json();
 
             if (!res.ok) {
-                setToastMessage('error', data || 'Upload failed' );
+                addToast({
+                    status: 'error',
+                    message: data || 'Upload failed',
+                    persistent: true
+                });
                 return;
             }
 
             data.forEach((item: { original_name: string; code: number; }) => {
                 if (item.code === 500) {
-                    setToastMessage('error', `Failed to upload file: ${item.original_name}`);
+                    addToast({
+                        status: 'error',
+                        message: `Failed to upload file: ${item.original_name}`
+                    });
                 }
             });
 
@@ -41,7 +48,11 @@
                 return store;
             });
         } catch (err) {
-            setToastMessage('error', `Upload failed: ${err}`);
+            addToast({
+                status: 'error',
+                message: `Upload failed: ${err}`,
+                persistent: true
+            });
         } finally {
             processing = false;
         }

package/dist/Modules/Layout/main.svelte

@@ -1,7 +1,7 @@
 <script>
 	import './main.css';
     import { onMount } from 'svelte';
-	import {LinearProgress, isLoading, isMobile, isTablet, Modal, Toast, theme,FilePicker, layoutStore} from '../../index.js'
+	import {LinearProgress, isLoading, isMobile, isTablet, Modal, theme,FilePicker, layoutStore, ToastManager} from '../../index.js'
 	import Header from './Header/header.svelte';
 	import Menu from './Menu/menu.svelte';
 	import Background from './background.svelte';
@@ -59,8 +59,8 @@
 
 <main style="height: 100vh;">
 	<Modal />
-	<Toast />
 	<FilePicker />
+	<ToastManager/>
 	<Header {toggleMenu}/>
 	{#if $isLoading}<LinearProgress />{/if}
 	<div id="sierra-layout">

package/dist/index.d.ts

@@ -23,15 +23,13 @@ export { default as PreviewImage } from './Core/components/others/Previews/Image
 export { default as PreviewVideo } from './Core/components/others/Previews/Video/video.svelte';
 export { default as PreviewDocument } from './Core/components/others/Previews/Document/documents.svelte';
 export { default as PreviewGenericFile } from './Core/components/others/Previews/GenericFile/genericFile.svelte';
-export { default as Modal } from './Core/components/Alerts/Modal/modal.svelte';
-export { default as Backdrop } from './Core/components/Alerts/Backdrop/backdrop.svelte';
-export { default as Wrapper } from './Core/components/Alerts/Wrapper/wrapper.svelte';
-export { default as Toast } from './Core/components/Alerts/Toast/toast.svelte';
-export { default as SiteUnderMaintenance } from './Core/components/Alerts/site-under-maintenance/site-under-maintenance.svelte';
 export { default as MenuItem } from './Core/components/Menus/MenuItem/menuItem.svelte';
 export { default as DropdownContainer } from './Core/components/Menus/DropdownContainer/dropdown.svelte';
 export { default as Tabs } from './Core/components/Menus/Tabs/main.svelte';
 export { default as HamburgerMenu } from './Core/components/Menus/Hamburger/hamburger.svelte';
+export { default as Modal } from './Core/components/others/Modal/modal.svelte';
+export { default as Backdrop } from './Core/components/others/Backdrop/backdrop.svelte';
+export { default as Wrapper } from './Core/components/others/Wrapper/wrapper.svelte';
 export { default as Time } from './Core/components/others/Calender/Time/time.svelte';
 export { default as Date } from './Core/components/others/Calender/Date/date.svelte';
 export { default as Hr } from './Core/components/others/Hr/Hr/hr.svelte';
@@ -42,6 +40,7 @@ export { default as Carousel } from './Core/components/others/Carousel/carousel.
 export { default as Avatar } from './Core/components/others/Avatar/avatar.svelte';
 export { default as ColorPicker } from './Core/components/others/ColorPicker/main.svelte';
 export { default as GlobalSearch } from './Core/features/GlobalSearch/main.svelte';
+export { default as ToastManager } from './Core/features/ToastManager/toastManager.svelte';
 export { default as Editor } from './Modules/Editor/main.svelte';
 export { default as Layout } from './Modules/Layout/main.svelte';
 export { default as FilePicker } from './Modules/FilePicker/main.svelte';
@@ -52,8 +51,8 @@ export { modalStore, resetModalStore } from './stores/core/modal.js';
 export { editorStore, resetEditorStore } from './stores/modules/editor.js';
 export { fileInputStore, resetFileInputStore } from './stores/modules/fileInput.js';
 export type { FileInputStoreMediaItem } from './stores/modules/fileInput.js';
-export { toastCarrier, setToastMessage, clearToastMessage } from './stores/modules/toast.js';
 export { layoutStore, resetLayoutStore } from './stores/modules/layout.js';
+export { addToast, removeToast, toasts } from './stores/features/toastManager.js';
 export { getPreviewUrlForMedia, toggleSelectForMedia, removeFileForMedia, DOCUMENT_MIME_TYPES, IMAGE_MIME_TYPES_PREVIEW } from './Hooks/preview.js';
 export { validateLayoutMenuSections, filterSectionsByRole } from './Hooks/layout_menu.js';
 export { buttonRipple } from './Hooks/button.js';

package/dist/index.js

@@ -28,18 +28,15 @@ export { default as PreviewImage } from './Core/components/others/Previews/Image
 export { default as PreviewVideo } from './Core/components/others/Previews/Video/video.svelte';
 export { default as PreviewDocument } from './Core/components/others/Previews/Document/documents.svelte';
 export { default as PreviewGenericFile } from './Core/components/others/Previews/GenericFile/genericFile.svelte';
-//Alerts
-export { default as Modal } from './Core/components/Alerts/Modal/modal.svelte';
-export { default as Backdrop } from './Core/components/Alerts/Backdrop/backdrop.svelte';
-export { default as Wrapper } from './Core/components/Alerts/Wrapper/wrapper.svelte';
-export { default as Toast } from './Core/components/Alerts/Toast/toast.svelte';
-export { default as SiteUnderMaintenance } from './Core/components/Alerts/site-under-maintenance/site-under-maintenance.svelte';
 //Menus
 export { default as MenuItem } from './Core/components/Menus/MenuItem/menuItem.svelte';
 export { default as DropdownContainer } from './Core/components/Menus/DropdownContainer/dropdown.svelte';
 export { default as Tabs } from './Core/components/Menus/Tabs/main.svelte';
 export { default as HamburgerMenu } from './Core/components/Menus/Hamburger/hamburger.svelte';
 //others
+export { default as Modal } from './Core/components/others/Modal/modal.svelte';
+export { default as Backdrop } from './Core/components/others/Backdrop/backdrop.svelte';
+export { default as Wrapper } from './Core/components/others/Wrapper/wrapper.svelte';
 export { default as Time } from './Core/components/others/Calender/Time/time.svelte';
 export { default as Date } from './Core/components/others/Calender/Date/date.svelte';
 export { default as Hr } from './Core/components/others/Hr/Hr/hr.svelte';
@@ -51,6 +48,7 @@ export { default as Avatar } from './Core/components/others/Avatar/avatar.svelte
 export { default as ColorPicker } from './Core/components/others/ColorPicker/main.svelte';
 //####################Features##################################
 export { default as GlobalSearch } from './Core/features/GlobalSearch/main.svelte';
+export { default as ToastManager } from './Core/features/ToastManager/toastManager.svelte';
 //####################MODULES COMPONENTS########################
 export { default as Editor } from './Modules/Editor/main.svelte';
 export { default as Layout } from './Modules/Layout/main.svelte';
@@ -64,8 +62,8 @@ export { modalStore, resetModalStore } from './stores/core/modal.js';
 //Modules
 export { editorStore, resetEditorStore } from './stores/modules/editor.js';
 export { fileInputStore, resetFileInputStore } from './stores/modules/fileInput.js';
-export { toastCarrier, setToastMessage, clearToastMessage } from './stores/modules/toast.js';
 export { layoutStore, resetLayoutStore } from './stores/modules/layout.js';
+export { addToast, removeToast, toasts } from './stores/features/toastManager.js';
 //#######################HOOKS/UTILS########################
 export { getPreviewUrlForMedia, toggleSelectForMedia, removeFileForMedia, DOCUMENT_MIME_TYPES, IMAGE_MIME_TYPES_PREVIEW } from './Hooks/preview.js';
 export { validateLayoutMenuSections, filterSectionsByRole } from './Hooks/layout_menu.js';

package/dist/stores/features/toastManager.d.ts

@@ -0,0 +1,21 @@
+export type ToastPriority = 'high' | 'medium' | 'low';
+export interface Toast {
+    id: string;
+    status: 'info' | 'success' | 'warning' | 'error';
+    message: string;
+    priority: ToastPriority;
+    persistent: boolean;
+    duration: number;
+    createdAt: number;
+    icon?: string;
+    color?: string;
+}
+export declare const toasts: import("svelte/store").Writable<Toast[]>;
+export declare const removeToast: (id: string) => void;
+export declare const addToast: ({ status, message, priority, persistent, duration }: {
+    status: Toast["status"];
+    message: string;
+    priority?: ToastPriority;
+    persistent?: boolean;
+    duration?: number;
+}) => void;

package/dist/stores/features/toastManager.js

@@ -0,0 +1,67 @@
+import { writable } from 'svelte/store';
+import { v4 as uuid } from 'uuid';
+export const toasts = writable([]);
+//Functionalities
+export const removeToast = (id) => {
+    toasts.update((current) => current.filter((t) => t.id !== id));
+};
+const priorityRank = {
+    high: 3,
+    medium: 2,
+    low: 1
+};
+const statusMeta = {
+    info: {
+        icon: 'fa-circle-info',
+        color: 'var(--primary-bg)'
+    },
+    success: {
+        icon: 'fa-circle-check',
+        color: 'var(--primary-bg)'
+    },
+    error: {
+        icon: 'fa-circle-xmark',
+        color: 'var(--error-bg)'
+    },
+    warning: {
+        icon: 'fa-triangle-exclamation',
+        color: 'var(--warning-bg)'
+    }
+};
+const sortToasts = (list) => {
+    return list.sort((a, b) => {
+        // Persistent first
+        if (a.persistent !== b.persistent) {
+            return a.persistent ? -1 : 1;
+        }
+        // Priority next
+        if (priorityRank[a.priority] !== priorityRank[b.priority]) {
+            return priorityRank[b.priority] - priorityRank[a.priority];
+        }
+        // Oldest first
+        return a.createdAt - b.createdAt;
+    });
+};
+export const addToast = ({ status, message, priority = 'low', persistent = false, duration = 6000 }) => {
+    const meta = statusMeta[status];
+    const newToast = {
+        id: uuid(),
+        status,
+        message,
+        priority,
+        persistent,
+        duration,
+        createdAt: Date.now(),
+        icon: meta.icon,
+        color: meta.color
+    };
+    toasts.update((current) => {
+        const updated = [...current, newToast];
+        return sortToasts(updated);
+    });
+    if (!persistent) {
+        setTimeout(() => {
+            removeToast(newToast.id);
+        }, duration);
+    }
+};

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sierra-95/svelte-scaffold",
-	"version": "1.0.81",
+	"version": "1.1.1",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",
@@ -73,6 +73,7 @@
 		"@tiptap/extension-text-style": "^3.13.0",
 		"@tiptap/extension-youtube": "^3.13.0",
 		"@tiptap/pm": "^3.13.0",
-		"@tiptap/starter-kit": "^3.13.0"
+		"@tiptap/starter-kit": "^3.13.0",
+		"uuid": "^13.0.0"
 	}
 }

package/dist/Core/components/Alerts/Toast/toast.css

@@ -1,39 +0,0 @@
-#toast{
-    position: fixed;
-    top: 80px;
-    right: 20px;
-    width: 300px;
-    border-top-right-radius: 5px;
-    border-bottom-right-radius: 5px;
-    border-left: 6px solid var(--retval);
-    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
-    background-color: var(--menu-bg);
-    z-index: 25;
-}
-#toast div:nth-child(1){
-    display: flex;
-    align-items: center;
-    justify-content: space-between;
-    font-weight: bold;
-    color: var(--retval);
-    padding: 5px 5px 5px 10px;
-}
-#toast div:nth-child(1) div{
-    display: flex;
-    align-items: center;
-    gap: 10px;
-}
-#toast div:nth-child(2){
-    padding: 0px 5px 5px 20px; 
-}
-#toast p {
-    max-width: 250px;
-    white-space: normal;
-    overflow-wrap: break-word;
-    word-break: normal;
-}
-#toast i.fa-times{
-    color: var(--text);
-    cursor: pointer;
-    padding-right: 20px;
-}

package/dist/Core/components/Alerts/Toast/toast.svelte

@@ -1,32 +0,0 @@
-<script>
-	import './toast.css';
-    import {toastCarrier, clearToastMessage} from '../../../../index.js';
-
-    const statusClass = {
-		info: 'var(--primary-bg)',
-		success: 'var(--primary-bg)',
-		error: 'var(--error-bg)',
-		warning: 'var(--warning-bg)'
-	};
-	$: retval = statusClass[$toastCarrier.status]
-</script>
-{#if $toastCarrier.message}
-	<div id="toast" style="--retval: {retval};">
-		<div>
-			<div>
-				{#if $toastCarrier.status === 'info'}
-					<i class="fa-solid fa-circle-info"></i>
-				{:else if $toastCarrier.status === 'success'}
-					<i class="fa-solid fa-circle-check"></i>
-				{:else if $toastCarrier.status === 'error'}
-					<i class="fa-solid fa-circle-xmark"></i>
-				{:else if $toastCarrier.status === 'warning'}
-					<i class="fa-solid fa-triangle-exclamation"></i>
-				{/if}
-				<p>{$toastCarrier.status}</p>
-			</div>
-			<i on:click={clearToastMessage} role="none" class="fa-solid fa-times"></i>
-		</div>
-		<div>{ $toastCarrier.message }</div>
-	</div>
-{/if}

package/dist/Core/components/Alerts/Toast/toast.svelte.d.ts

@@ -1,26 +0,0 @@
-export default Toast;
-type Toast = SvelteComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}> & {
-    $$bindings?: string | undefined;
-};
-declare const Toast: $$__sveltets_2_IsomorphicComponent<{
-    [x: string]: never;
-}, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
-    };
-    z_$$bindings?: Bindings;
-}

package/dist/Core/components/Alerts/site-under-maintenance/site-under-maintenance.svelte

@@ -1,34 +0,0 @@
-<script>
-  const {email} = $props();
-</script>
-<style>        
-  #maintenance {
-    position: fixed;
-    top: 0;
-    right: 0;
-    bottom: 0;
-    left: 0;
-    background-color: rgba(0, 0, 0, 0.7);
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-    gap: 10px;
-    padding: 1rem;
-    z-index: 5;
-    backdrop-filter: blur(2px);
-    color: white;
-  }
-  #maintenance a{
-    text-decoration: underline;
-  }
-</style>
-  
-<div id="maintenance">
-      <h1>Under Construction</h1>
-      <p>This site is still being built and will be available soon. Thanks for your patience.</p>
-      <p>
-      Need immediate assistance?<br>
-      Contact <a href="mailto:{email}">{email}</a>
-    </p>
-</div>

package/dist/Core/components/Alerts/site-under-maintenance/site-under-maintenance.svelte.d.ts

@@ -1,11 +0,0 @@
-export default SiteUnderMaintenance;
-type SiteUnderMaintenance = {
-    $on?(type: string, callback: (e: any) => void): () => void;
-    $set?(props: Partial<$$ComponentProps>): void;
-};
-declare const SiteUnderMaintenance: import("svelte").Component<{
-    email: any;
-}, {}, "">;
-type $$ComponentProps = {
-    email: any;
-};