@sierra-95/svelte-scaffold 1.0.32 → 1.0.34

package/dist/components/Core/Alerts/Backdrop/backdrop.svelte

@@ -1,10 +1,9 @@
 <script lang="ts">
-    import { onMount, onDestroy } from "svelte";
-    import { browser } from "$app/environment";
     
     let { 
         open = $bindable(false),
         zIndex = 15,
+        onClose = () => {},
 		children
 	} = $props();
 
@@ -12,18 +11,10 @@
         if (e.key === 'Escape' && open) {
             e.preventDefault();
             open = false;
+            onClose();
         }
     }
-
-    onMount(() => {
-        if (!browser) return;
-        window.addEventListener('keydown', handleEscape);
-    });
-
-    onDestroy(() => {
-        if (!browser) return;
-        window.removeEventListener('keydown', handleEscape);
-    });
+    
 </script>
 <style>
     #sierra-blur {
@@ -40,6 +31,9 @@
         backdrop-filter: blur(2px);
   }
 </style>
+
+
+<svelte:window on:keydown={handleEscape} />
 {#if open}
     <div id="sierra-blur" style="z-index: {zIndex};">
         {@render children?.()}

package/dist/components/Core/Alerts/Backdrop/backdrop.svelte.d.ts

@@ -1,6 +1,7 @@
 declare const Backdrop: import("svelte").Component<{
     open?: boolean;
     zIndex?: number;
+    onClose?: Function;
     children: any;
 }, {}, "open">;
 type Backdrop = ReturnType<typeof Backdrop>;

package/dist/components/Core/Alerts/Wrapper/wrapper.svelte

@@ -3,6 +3,7 @@
         padding = '20px',
         minHeight = '100px',
         maxWidth = '500px',
+        height = '',
 		children
 	} = $props();
 </script>
@@ -14,6 +15,13 @@
         width: 100%;
     }
 </style>
-<div id="sierra-wrapper" role='none' style="max-width: {maxWidth}; min-height: {minHeight}; padding: {padding};" onclick={e => e.stopPropagation()}>
+<div id="sierra-wrapper" role='none' 
+    style="
+        max-width: {maxWidth}; 
+        min-height: {minHeight}; 
+        padding: {padding};
+        {height? `height: ${height}`:''}
+    " 
+    onclick={e => e.stopPropagation()}>
     {@render children?.()}
 </div>

package/dist/components/Core/Alerts/Wrapper/wrapper.svelte.d.ts

@@ -7,11 +7,13 @@ declare const Wrapper: import("svelte").Component<{
     padding?: string;
     minHeight?: string;
     maxWidth?: string;
+    height?: string;
     children: any;
 }, {}, "">;
 type $$ComponentProps = {
     padding?: string;
     minHeight?: string;
     maxWidth?: string;
+    height?: string;
     children: any;
 };

package/dist/components/Core/Form/Input/SearchBar/search.svelte

@@ -1,7 +1,4 @@
-<script lang="ts">
-    import { onMount, onDestroy } from 'svelte';
-    import { browser } from '$app/environment';
-    
+<script lang="ts">    
     let {
         width = '200px',
         height = '40px',
@@ -21,16 +18,6 @@
             onHotkey?.();
         }
     }
-
-    onMount(() => {
-        if (!enableHotkey || !browser) return;
-        window.addEventListener('keydown', handleKeydown);
-    });
-
-    onDestroy(() => {
-        if(!browser) return;
-        window.removeEventListener('keydown', handleKeydown);
-    });
 </script>
 <style>
     #sierra-search-bar{
@@ -71,6 +58,10 @@
         border-left: none;
     }
 </style>
+
+
+<svelte:window on:keydown={handleKeydown} />
+
 <main id="sierra-search-bar" role="none" style="height: {height};  display:flex; }">
     
     <button 

package/dist/components/Core/Menus/MenuItem/menuItem.svelte

@@ -4,6 +4,7 @@
         active = false,
         disabled = false,
         iconSize = '20px',
+        iconGap = '20px',
         iconBg: iconBg = 'var(--primary-bg)',
         children = null,
         ...rest
@@ -40,5 +41,5 @@
         <i style="font-size: {iconSize}; color: {iconBg}" 
         class="fa {icon}"></i>
     {/if}
-    <h4 style="margin-left: {icon ? '20px' : '0'};">{@render children?.()}</h4>
+    <h4 style="margin-left: {icon ? iconGap : '0'};">{@render children?.()}</h4>
 </div>

package/dist/components/Core/Menus/MenuItem/menuItem.svelte.d.ts

@@ -3,6 +3,7 @@ declare const MenuItem: import("svelte").Component<{
     active?: boolean;
     disabled?: boolean;
     iconSize?: string;
+    iconGap?: string;
     iconBg?: string;
     children?: any;
 } & Record<string, any>, {}, "">;

package/dist/components/Core/Menus/Tabs/main.css

@@ -0,0 +1,22 @@
+#sierra-tabs {
+    position: relative;
+    background-color: var(--background-secondary);
+}
+#sierra-tabs .tab-row {
+    display: flex;
+    justify-content: space-between;
+}
+#sierra-tabs .tab {
+    display: flex;
+    align-items: center;
+    padding: 4px 16px;
+    border-radius: 4px 4px 0 0;
+}
+
+#sierra-tabs .tab.active {
+    background-color: var(--background);
+}
+#sierra-tabs .tab-content{
+    padding: 1rem;
+    background-color: var(--background);
+}

package/dist/components/Core/Menus/Tabs/main.svelte

@@ -0,0 +1,45 @@
+<script lang="ts">
+    import { onMount } from 'svelte';
+    import './main.css';
+
+    let {
+      tabs,
+      snippets,
+      active = $bindable(),
+      iconBg = 'var(--primary-bg)',
+      iconSize = '15px',
+      boxShadow = false,
+      actions,
+    } = $props();
+
+    onMount(()=>{
+      if(!active && tabs?.length > 0){
+        active = tabs[0].key;
+      }
+    })    
+</script>
+
+<div id="sierra-tabs" style="{boxShadow? 'box-shadow: var(--box-shadow)':''}">
+  <div class="tab-row">
+      <div style="display: flex;">
+        {#each tabs as tab}
+          <button
+            class="tab {active === tab.key ? 'active' : ''}"
+            onclick={() => active = tab.key}
+          >
+            {#if tab.icon}
+                <i style="font-size: {iconSize}; color: {iconBg}; margin-right: 8px;" class="fa {tab.icon}"></i>
+            {/if}
+            {tab.title}
+          </button>
+        {/each}
+      </div>
+      {@render actions?.()}
+  </div>
+
+  <div class="tab-content">
+    {#if snippets?.[active]}
+        {@render snippets[active]()}
+    {/if}
+  </div>
+</div>

package/dist/components/Core/Menus/Tabs/main.svelte.d.ts

@@ -0,0 +1,12 @@
+import './main.css';
+declare const Main: import("svelte").Component<{
+    tabs: any;
+    snippets: any;
+    active?: any;
+    iconBg?: string;
+    iconSize?: string;
+    boxShadow?: boolean;
+    actions: any;
+}, {}, "active">;
+type Main = ReturnType<typeof Main>;
+export default Main;

package/dist/components/Core/others/Previews/Image/image.svelte

@@ -16,7 +16,6 @@
 
     function previewUrl(item: any): string | null {
         if (!item) return null;
-
         return isPreviewable(item)
             ? (urlsOnly ? (item).url : getPreviewUrlForMedia(item))
             : null;
@@ -24,18 +23,26 @@
 
 </script>
 
+<style>
+    #sierra-preview-image img{
+        width: 100%;
+        height: 100px;
+        object-fit: cover;
+    }
+</style>
+
 {#snippet imageTag(url: string)}
-    <img src={url} alt={url} style="width: 100%; height: 100px; object-fit: cover" />
+    <img src={url} alt={url} />
 {/snippet}
 
 {#if media.Images.length === 0}
     <p>No images available.</p>
 {:else}
-    <div style="display: flex; flex-wrap: wrap; gap: 1rem;">
+    <div id="sierra-preview-image" style="display: flex; flex-wrap: wrap; gap: 1rem;">
         {#each media.Images as item}
             <div on:click={() => toggleSelectForMedia(item, urlsOnly)} role="none" class="sierra-translate" style="position:relative; cursor: pointer; width: {previewUrl(item)? '150px':''}">
                 {#if previewUrl(item)}
-                    {@render imageTag(item.url)}
+                    {@render imageTag(previewUrl(item)!)}                    
                 {:else} 
                     <Generic/>
                 {/if}

package/dist/components/Modules/Editor/Hooks/extractContent.d.ts

@@ -3,5 +3,5 @@
  */
 export function exractContent(editor: import("@tiptap/core").Editor): Promise<{
     json_content: import("@tiptap/core").DocumentType<Record<string, any> | undefined, import("@tiptap/core").NodeType<string, Record<string, any> | undefined, any, (import("@tiptap/core").NodeType<any, any, any, any> | import("@tiptap/core").TextType<import("@tiptap/core").MarkType<any, any>>)[]>[]>;
-    images: string[];
+    html_content: string;
 } | undefined>;

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

@@ -1,5 +1,4 @@
 import { setToastMessage } from '../../../../index.js';
-import { extractImagesFromJSON } from '../tools.js';
 /**
  * @param {import('@tiptap/core').Editor} editor
  */
@@ -7,9 +6,9 @@ export async function exractContent(editor) {
     if (!editor) return;
     try {
         const json_content = editor.getJSON();
-        const fnl_imgs = extractImagesFromJSON(json_content);
-        return { json_content, images: fnl_imgs };
+        const html_content = editor.getHTML();
+        return { json_content, html_content};
     }catch (error) {
-        setToastMessage('error', 'An error occurred while saving.');
+        setToastMessage('error', 'An error occurred while processing content.');
     }
 }

package/dist/components/Modules/Editor/controls.svelte

@@ -1,73 +1,59 @@
 <script lang="ts">
     import {
         TextFormatting, Headings, TextColor, TextAlign, Images, History, Youtube,
-        Save, Lists, Links
+        Export, Lists, Links
     } from './tools.js';
     import type { Editor } from "@tiptap/core";
     import './styles/controls.css';
-    import {isMobile} from '../../../index.js';
+    import {Tabs} from '../../../index.js';
 
     export let editor: Editor;
-    export let exportText: string;
-    export let content: any = {};
     
-    const menuItems = [
-        {
-            id: 'home',
-            label: 'Home',
-            icon: 'fa-home',
-            components: [
-                TextFormatting,
+    const HomeItems = [
+        TextFormatting,
                 History,
                 Headings,
                 TextColor,
                 TextAlign,
                 Lists,
-            ]
-        },
-        {
-            id: 'insert',
-            label: 'Insert',
-            icon: 'fa-plus',
-            components: [
-                Images,
-                Links,
-                Youtube,
-            ]
-        },
     ] as const;
-    
-    type MenuItem = typeof menuItems[number];
-    type MenuId = MenuItem['id'];
-    
-    let activeTab: MenuId = 'home';    
-</script>
 
+    const InsertItems = [
+        Images,
+        Links,
+        Youtube,
+    ] as const;
+</script>
 
-<main id="controls">
-    <div class="controls-menu" style="display: flex; gap: 0.5rem;"
-    >
-        <Save bind:content {exportText} {editor} />
-        {#each menuItems as item, index (item.id)}
-            <button
-                style="padding: 2px 4px;"
-                aria-label={item.label}
-                class={` ${activeTab === item.id ? 'active' : ''}`}
-                on:click={() => {activeTab = item.id}}
-            ><i class="fa {item.icon}"></i><span hidden={$isMobile} style="margin-left: 5px;">{item.label}</span>
-            </button>
-        {/each}
+{#snippet Home()}
+    <div id="controls">
+        <div class="controls-buttons">
+            {#each HomeItems as Component}
+                <Component {editor} />
+            {/each}
+        </div>
     </div>
-    
-    <div class="controls">
-        {#each menuItems as item, index (item.id)}
-           <div  class={`controls-buttons
-                ${activeTab === item.id ? 'active' : ''}
-            `}>
-            {#each item.components as Component}
+{/snippet}
+
+{#snippet Insert()}
+    <div id="controls">
+        <div class="controls-buttons">
+            {#each InsertItems as Component}
                 <Component {editor} />
             {/each}
-            </div>
-        {/each}
+        </div>
     </div>
-</main>
+{/snippet}
+
+{#snippet actions()}
+    <Export {editor}/>
+{/snippet}
+
+<Tabs
+    tabs={[
+        { key: 'Home', title: 'Home', icon: 'fa-home' },
+        { key: 'Insert', title: 'Insert', icon: 'fa-plus' }
+    ]}
+    snippets={{ Home, Insert }}
+    actions={actions}
+/>

package/dist/components/Modules/Editor/controls.svelte.d.ts

@@ -15,8 +15,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 }
 declare const Controls: $$__sveltets_2_IsomorphicComponent<{
     editor: Editor;
-    exportText: string;
-    content?: any;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/components/Modules/Editor/export.svelte

@@ -0,0 +1,30 @@
+<script lang="ts">
+    import { setToastMessage,isLoading, editorStore} 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')
+      try {
+        isLoading.set(true);
+        const content = await exractContent(editor); 
+        editorStore.update((state) => ({ ...state, content }));
+        $editorStore.onExport();
+      }catch (error) {
+          setToastMessage('error', 'An error occurred while processing content.');
+      } finally {
+        isLoading.set(false);
+      }
+    }
+
+    $: if($editorStore.export){
+      editorStore.update( store =>{
+        store.export = false
+        return store;
+      })
+      onSave();
+    }
+
+</script>

package/dist/components/Modules/Editor/{save.svelte.d.ts → export.svelte.d.ts}

@@ -12,12 +12,10 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
     };
     z_$$bindings?: Bindings;
 }
-declare const Save: $$__sveltets_2_IsomorphicComponent<{
+declare const Export: $$__sveltets_2_IsomorphicComponent<{
     editor: Editor;
-    exportText: string;
-    content?: any;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;
-type Save = InstanceType<typeof Save>;
-export default Save;
+type Export = InstanceType<typeof Export>;
+export default Export;

package/dist/components/Modules/Editor/main.svelte

@@ -8,7 +8,6 @@
 
 	export let content: any = {};
 	export let readOnly: boolean = false; 
-	export let exportText: string = 'Save';
 	
 	let editor: Editor;
 	let element: HTMLElement;
@@ -36,7 +35,7 @@
 
 <main id="editor">
 	{#if editor && !readOnly}
-		<Controls bind:content {exportText} {editor} />
+		<Controls {editor} />
 	{/if}
 	<div bind:this={element}></div>
 </main>

package/dist/components/Modules/Editor/main.svelte.d.ts

@@ -15,7 +15,6 @@ interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> =
 declare const Main: $$__sveltets_2_IsomorphicComponent<{
     content?: any;
     readOnly?: boolean;
-    exportText?: string;
 }, {
     [evt: string]: CustomEvent<any>;
 }, {}, {}, string>;

package/dist/components/Modules/Editor/styles/controls.css

@@ -1,11 +1,7 @@
 #editor #controls{
-    margin: 0px 10px;
-    padding-top: 5px;
-}  
-#editor #controls .controls {
     margin-top: 5px;
     position: relative;
-    background-color: var(--background-tertiary);
+    background-color: var(--background-secondary);
     border-radius: 15px;
 }
 
@@ -15,19 +11,12 @@
   align-items: center;
   padding: 2px 10px;
   gap: 10px;
-  position: absolute;
+  position: relative;
   top: 0;
   left: 0;
   width: 100%;
-  opacity: 0;
-  pointer-events: none;
   transition: opacity 0.2s ease;
 }
-#editor #controls .controls-buttons.active {
-    position: relative;
-    opacity: 1;
-    pointer-events: all;
-}
 #editor #controls button{
   align-self: center;
 }

package/dist/components/Modules/Editor/styles/main.css

@@ -1,6 +1,6 @@
 #editor{
     height: 100%;
-    background-color: var(--background-secondary);
+    background-color: var(--background);
     box-shadow: var(--box-shadow);
 }
 

package/dist/components/Modules/Editor/tools.d.ts

@@ -7,8 +7,7 @@ export { default as Lists } from "./Nodes/Lists/lists.svelte";
 export { default as TextFormatting } from "./Marks/TextFormatting/textFormatting.svelte";
 export { default as Links } from "./Marks/Links/links.svelte";
 export { default as History } from "./Nodes/History/history.svelte";
-export { default as Save } from "./save.svelte";
+export { default as Export } from "./export.svelte";
 export { insertImageAndMoveCursor } from "./Hooks/insertImage.js";
 export { addYoutubeVideo } from "./Hooks/insertYoutube.js";
-export { extractImagesFromJSON } from "./Hooks/extractImage.js";
 export { exractContent } from "./Hooks/extractContent.js";

package/dist/components/Modules/Editor/tools.js

@@ -13,11 +13,9 @@ export {default as Links} from './Marks/Links/links.svelte';
 //functionality
 export {default as History} from './Nodes/History/history.svelte';
 
-
 //Export
-export {default as Save} from './save.svelte';
+export {default as Export} from './export.svelte';
 //Hooks
 export {insertImageAndMoveCursor} from './Hooks/insertImage.js';
 export {addYoutubeVideo} from './Hooks/insertYoutube.js';
-export {extractImagesFromJSON} from './Hooks/extractImage.js';
 export {exractContent} from './Hooks/extractContent.js';

package/dist/components/Modules/FilePicker/ActionsMenu/Actions.svelte

@@ -0,0 +1,52 @@
+<script lang="ts">
+    import { onDestroy } from "svelte";
+    import {fileInputStore,resetFileInputStore, DropdownContainer, MenuItem, buttonRipple} from "../../../../index.js";
+    import FileProperties from "./file_properties.svelte";
+    import DownloadMedia from "./download_media.svelte";
+    import DeleteMedia from "./delete_media.svelte";
+    
+    let {
+        processing = $bindable(),
+    } = $props();
+
+    function handleSelect() {
+        fileInputStore.update(store => ({ 
+            ...store,
+            submissionComplete: true,
+            uploadModalOpen: false
+        }));
+    }
+
+    const iconSize = '12px';
+    let showProperties = $state(false);
+    let openActionsMenu = $state(false);
+    let disableActions = $state(true);
+    $effect(() => {
+        if($fileInputStore.submissions.length > 0 && $fileInputStore.activeTab === 'Cloud'){
+            disableActions = false;
+        } else {
+            disableActions = true;
+        }
+    });
+
+    onDestroy(() => {
+        resetFileInputStore();
+    });
+</script>
+
+<FileProperties bind:showProperties />
+<div style="display: flex; gap: 1rem; align-items: center; margin-right: 1rem">
+    <button hidden={$fileInputStore.manage || disableActions} title="Select" onclick={handleSelect} style="color: var(--primary-bg);" aria-label="Select submissions"><i class="fa fa-check-circle-o"></i></button>
+    {#snippet TriggerMenu()}
+        <button hidden={$fileInputStore.activeTab !== 'Cloud'} disabled={$fileInputStore.submissions.length === 0} use:buttonRipple class="w-10" aria-label="Ellipsis" onclick={() => (openActionsMenu = !openActionsMenu)}>
+            <i class="fa fa-bars"></i>
+        </button>
+    {/snippet} 
+    <DropdownContainer bind:open={openActionsMenu} dropdownTrigger={TriggerMenu}>
+        <MenuItem iconBg="var(--primary-bg)" iconGap="10px" onclick={() => { showProperties = true; openActionsMenu = false; }} icon="fa-info-circle" iconSize={iconSize}>Properties</MenuItem>
+        <DownloadMedia {iconSize} bind:processing bind:openActionsMenu/>
+        <DeleteMedia {iconSize} bind:processing bind:openActionsMenu />
+    </DropdownContainer>
+    <button title="Cancel" onclick={resetFileInputStore} aria-label="Cancel"><i class="fa fa-xmark"></i></button>
+</div>
+

package/dist/components/Modules/FilePicker/ActionsMenu/Actions.svelte.d.ts

@@ -0,0 +1,5 @@
+declare const Actions: import("svelte").Component<{
+    processing?: any;
+}, {}, "processing">;
+type Actions = ReturnType<typeof Actions>;
+export default Actions;

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

@@ -65,4 +65,4 @@
     }
 </script>
 
-<MenuItem onclick={handleDelete} icon="fa-trash-o" iconBg="var(--error-bg)" iconSize={iconSize}>Delete</MenuItem>
+<MenuItem iconGap="10px" onclick={handleDelete} icon="fa-trash-o" iconBg="var(--error-bg)" iconSize={iconSize}>Delete</MenuItem>

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

@@ -72,4 +72,4 @@
     }
 </script>
 
-<MenuItem onclick={handleDownload} icon="fa-download" iconBg="var(--text)" iconSize={iconSize}>Download</MenuItem>
+<MenuItem iconGap="10px" onclick={handleDownload} icon="fa-download" iconBg="var(--primary-bg)" iconSize={iconSize}>Download</MenuItem>

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

@@ -1,6 +1,6 @@
 <script lang="ts">
     import { onMount } from 'svelte';
-    import { fileInputStore, User, setToastMessage, buttonRipple, isMobile } from '../../../../index.js';
+    import { fileInputStore, User, setToastMessage, buttonRipple, isMobile, isTablet } from '../../../../index.js';
     import Previews from './previews.svelte';
     import Storage from '../ActionsMenu/media_storage.svelte';
 
@@ -75,16 +75,33 @@
 </script>
 
 <style>
-    #sierra-cloud-store{
-        /**Dont remove, the Selected item count depends on this relative positioning*/
-        position: relative;
+    #sierra-cloud-store nav{
+        flex-direction: column;
     }
     #sierra-cloud-store .icon-active {
+        border-radius: 3px;
         background-color: var(--menu-item-active);
     }
+    #sierra-cloud-store i{
+        color: var(--icon-theme);
+    }
+    #sierra-cloud-store .icon-active i{
+        color: var(--primary-bg);
+    }
+    @media (max-width: 768px) {
+        #sierra-cloud-store {
+            flex-direction: column-reverse;
+        }
+        #sierra-cloud-store nav{
+            flex-direction: row;
+        }
+        #sierra-cloud-store nav button {
+            justify-content: center;
+        }
+    }
 </style>
 <main id="sierra-cloud-store" style="display: flex; gap: 1rem; height: 100%; min-height: 300px;">
-    <nav style="display: flex; flex-direction: column; gap: {$isMobile ? '1rem' : '0.5rem'}; padding-top: 1rem; background-color: var(--background); border-bottom-left-radius:5px;">
+    <nav style="display: flex; gap: {$isMobile ? '1rem' : '0.5rem'}; padding-top: 1rem; background-color: var(--background); border-bottom-left-radius:5px;">
         {#each tabs as tab}
             <button 
                 use:buttonRipple
@@ -95,16 +112,16 @@
                     }))
                 } 
                 style="
-                    width:100%; padding: 0.1rem 0.5rem; 
-                    {$fileInputStore.disabledMenuItem?.includes(tab.name) ? 'display: none;' : 'display: flex;align-items: center; gap: 0.5rem;'}
+                    width:100%; padding:{$isMobile? '0.5rem':' 0.1rem 0.5rem'};
+                    {$fileInputStore.disabledMenuItem?.includes(tab.name) ? 'display: none;' : 'display: flex; align-items: center; gap: 0.5rem;'}
                 "
                 class={`sierra-text-ellipsis ${$fileInputStore.activeMenu === tab.name ? 'icon-active' : ''}`}
             >
-                <i class={tab.icon} style="font-size: {$isMobile ? '' : '10px'}; color: var(--icon-theme);"></i>
+                <i class={tab.icon} style="font-size: {$isMobile ? '15px' : '10px'}; "></i>
                 {$isMobile ? '' : tab.name}
             </button>
         {/each}
-        <Storage hidden={$isMobile} bind:this={childFunctionRef}/>
+        <Storage hidden={$isMobile || $isTablet} bind:this={childFunctionRef}/>
     </nav>
     <Previews {media} />
 </main>

package/dist/components/Modules/FilePicker/Cloud/previews.svelte

@@ -33,7 +33,7 @@
     {:else}
         <p>No media available.</p>
     {/if}
-    <div hidden={itemCount === 0} style="position: absolute; bottom: 0; right: 0;padding: 2px 5px; box-shadow: var(--box-shadow); background: var(--background-secondary); z-index: 1;">
+    <div hidden={itemCount === 0} style="position: absolute; bottom: 0; right: 0;padding: 2px 5px; box-shadow: var(--box-shadow); background: var(--background); z-index: 1;">
         {itemCount} {itemCount === 1 ? 'item' : 'items'} selected ({totalSizeMB} MB)
     </div>
 </div>

package/dist/components/Modules/FilePicker/main.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
-    import {Backdrop,Wrapper,fileInputStore, FileInput, User, setToastMessage} from '../../../index.js'
+    import {Backdrop,Wrapper,fileInputStore, LinearProgress,FileInput, User, setToastMessage, Tabs} from '../../../index.js'
     import CloudStore from './Cloud/cloudStore.svelte';
-    import Controls from './controls.svelte';
+    import Actions from './ActionsMenu/Actions.svelte';
 
     let processing: boolean = false;
 
@@ -36,7 +36,7 @@
 
             fileInputStore.update(store => {
                 store.selectedFiles = [];
-                store.activeTab = 'cloud';
+                store.activeTab = 'Cloud';
                 store.requestReload = true;
                 return store;
             });
@@ -48,13 +48,30 @@
     }
 </script>
 
+
+{#snippet Cloud()}
+    <CloudStore bind:processing />
+{/snippet}
+
+{#snippet Upload()}
+    <FileInput bind:processing onclick={handleUpload} />
+{/snippet}
+
+{#snippet actions()}
+    <Actions bind:processing />
+{/snippet}
+
 <Backdrop bind:open={$fileInputStore.uploadModalOpen} zIndex={15}>
     <Wrapper maxWidth="700px" minHeight="300px" padding="0px">
-        <Controls bind:processing />
-        {#if $fileInputStore.activeTab === 'cloud'}
-            <CloudStore bind:processing />
-        {:else}
-            <FileInput bind:processing onclick={handleUpload} />
-        {/if}
+        <Tabs
+            bind:active={$fileInputStore.activeTab}
+            tabs={[
+                { key: 'Cloud', title: 'Cloud', icon: 'fa-cloud' },
+                { key: 'Upload', title: 'Upload', icon: 'fa-plus' }
+            ]}
+            snippets={{ Cloud, Upload }}
+            actions={actions}
+        />
+        {#if processing}<LinearProgress />{/if}
     </Wrapper>
 </Backdrop>

package/dist/components/Modules/Layout/main.svelte

@@ -1,7 +1,7 @@
 <script>
 	import './main.css';
     import { onMount } from 'svelte';
-	import {LinearProgress, isLoading, isMobile, Modal, Toast, theme,FilePicker} from '../../../index.js'
+	import {LinearProgress, isLoading, isMobile, isTablet, Modal, Toast, theme,FilePicker} from '../../../index.js'
 	import Header from './Header/header.svelte';
 	import Menu from './Menu/menu.svelte';
 	import Background from './background.svelte';
@@ -23,10 +23,12 @@
 		toggleMenuSize = "25px",
 	} = $props();
 
-
+	let isSmallscreen = $state(true);
 	let isMenuOpen = $state(false);
+
 	$effect(() => {
-		if ($isMobile) isMenuOpen = false;
+		isSmallscreen = $isMobile || $isTablet;
+		if (isSmallscreen) isMenuOpen = false;
 		if ($theme){
 			document.body.setAttribute('data-theme', $theme);
 			localStorage.setItem('theme', $theme);
@@ -35,7 +37,7 @@
 
 	onMount(() => {
 		if (typeof localStorage !== 'undefined') {
-			if(!$isMobile){
+			if(!isSmallscreen){
 				const stored = localStorage.getItem('isMenuOpen');
 				if (stored === null) {
 					localStorage.setItem('isMenuOpen', 'true');
@@ -58,13 +60,13 @@
 
 	const toggleMenu = () => {
 		isMenuOpen = !isMenuOpen;
-		if($isMobile) return;
+		if(isSmallscreen) return;
 		if (typeof localStorage !== 'undefined') {
 			localStorage.setItem('isMenuOpen', isMenuOpen.toString());
 		}
 	};
 	const closeMobileMenu = () => {
-		if ($isMobile && isMenuOpen) isMenuOpen = false;
+		if (isSmallscreen && isMenuOpen) isMenuOpen = false;
 	};
 </script>
 
@@ -90,7 +92,7 @@
 			class="menu"
 			data-label="Menu Container"
 			style={
-				$isMobile
+				isSmallscreen
 				? `width:300px; transform: translateX(${isMenuOpen ? '0%' : '-100%'}); transition: transform 0.3s ease; position: fixed; left: 0; padding-bottom: 50px`
 				: `width: ${isMenuOpen ? '300px' : '70px'}; transition: width 0.3s ease;`
 			}

package/dist/index.d.ts

@@ -25,7 +25,7 @@ export { default as Toast } from './components/Core/Alerts/Toast/toast.svelte';
 export { default as SiteUnderMaintenance } from './components/Core/Alerts/site-under-maintenance/site-under-maintenance.svelte';
 export { default as MenuItem } from './components/Core/Menus/MenuItem/menuItem.svelte';
 export { default as DropdownContainer } from './components/Core/Menus/DropdownContainer/dropdown.svelte';
-export { default as UserMenu } from './components/Core/Menus/UserMenu/profile.svelte';
+export { default as Tabs } from './components/Core/Menus/Tabs/main.svelte';
 export { default as Time } from './components/Core/others/Clock/Time/time.svelte';
 export { default as Date } from './components/Core/others/Clock/Date/date.svelte';
 export { default as Hr } from './components/Core/Form/Hr/hr.svelte';
@@ -33,7 +33,7 @@ export { default as Editor } from './components/Modules/Editor/main.svelte';
 export { default as Layout } from './components/Modules/Layout/main.svelte';
 export { default as FilePicker } from './components/Modules/FilePicker/main.svelte';
 export { isLoading, isLoggedIn, theme, } from './stores/core/general.js';
-export { isMobile } from './stores/core/ismobile.js';
+export { isMobile, isTablet, isDesktop } from './stores/core/deviceWidth.js';
 export { User, resetUserStore } from './stores/core/user.js';
 export { modalStore, resetModalStore } from './stores/core/modal.js';
 export { editorStore, resetEditorStore } from './stores/modules/editor.js';

package/dist/index.js

@@ -32,7 +32,7 @@ export { default as SiteUnderMaintenance } from './components/Core/Alerts/site-u
 //Menus
 export { default as MenuItem } from './components/Core/Menus/MenuItem/menuItem.svelte';
 export { default as DropdownContainer } from './components/Core/Menus/DropdownContainer/dropdown.svelte';
-export { default as UserMenu } from './components/Core/Menus/UserMenu/profile.svelte';
+export { default as Tabs } from './components/Core/Menus/Tabs/main.svelte';
 //others
 export { default as Time } from './components/Core/others/Clock/Time/time.svelte';
 export { default as Date } from './components/Core/others/Clock/Date/date.svelte';
@@ -44,7 +44,7 @@ export { default as FilePicker } from './components/Modules/FilePicker/main.svel
 //#######################STORES########################
 //Core
 export { isLoading, isLoggedIn, theme, } from './stores/core/general.js';
-export { isMobile } from './stores/core/ismobile.js';
+export { isMobile, isTablet, isDesktop } from './stores/core/deviceWidth.js';
 export { User, resetUserStore } from './stores/core/user.js';
 export { modalStore, resetModalStore } from './stores/core/modal.js';
 //Modules

package/dist/stores/core/deviceWidth.d.ts

@@ -0,0 +1,6 @@
+export const isMobile: import("svelte/store").Writable<boolean>;
+export const isTablet: import("svelte/store").Writable<boolean>;
+export const isDesktop: import("svelte/store").Writable<boolean>;
+export const BP_MOBILE: 480;
+export const BP_TABLET: 768;
+export const BP_DESKTOP: 1024;

package/dist/stores/core/deviceWidth.js

@@ -0,0 +1,26 @@
+import { writable } from 'svelte/store';
+import { browser } from '$app/environment';
+
+export const isMobile = writable(true);
+export const isTablet = writable(true);
+export const isDesktop = writable(false);
+
+export const BP_MOBILE = 480;
+export const BP_TABLET = 768;
+export const BP_DESKTOP = 1024;
+
+
+if (browser) {
+    const updateDevice = () => {
+        const width = window.innerWidth;
+
+        isMobile.set(width < BP_MOBILE);
+        isTablet.set(width >= BP_MOBILE && width < BP_DESKTOP);
+        isDesktop.set(width >= BP_DESKTOP);
+    };
+
+    updateDevice();
+    window.addEventListener('resize', updateDevice);
+
+    // return () => window.removeEventListener('resize', updateDevice);
+}

package/dist/stores/modules/editor.d.ts

@@ -1,4 +1,7 @@
 export type EditorState = {
+    content: any;
+    export: boolean;
+    onExport: any;
     r2_key: string;
     serverGetUrl: string;
     serverUploadUrl: string;

package/dist/stores/modules/editor.js

@@ -1,5 +1,8 @@
 import { writable } from 'svelte/store';
 const defaultEditorState = {
+    content: {},
+    export: false,
+    onExport: () => { },
     r2_key: '',
     serverGetUrl: '',
     serverUploadUrl: '',

package/dist/stores/modules/fileInput.d.ts

@@ -13,7 +13,7 @@ export type FileInputState = {
     selectedFiles: File[];
     sizeConstraint: number;
     uploadType: Array<'image' | 'audio' | 'video' | 'documents' | 'others'>;
-    activeTab: 'cloud' | 'upload';
+    activeTab: 'Cloud' | 'Upload';
     activeMenu: 'Documents' | 'Music' | 'Pictures' | 'Videos' | 'Others';
     disabledMenuItem: Array<'Music' | 'Documents' | 'Pictures' | 'Videos' | 'Others'> | null;
     manage: boolean;

package/dist/stores/modules/fileInput.js

@@ -5,7 +5,7 @@ const defaultFileInputState = {
     sizeConstraint: 10 * 1024 * 1024,
     uploadType: ['image', 'audio', 'video', 'documents', 'others'],
     // FilePicker
-    activeTab: 'cloud',
+    activeTab: 'Cloud',
     activeMenu: 'Documents',
     disabledMenuItem: null,
     manage: false,

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "@sierra-95/svelte-scaffold",
-	"version": "1.0.32",
+	"version": "1.0.34",
 	"scripts": {
 		"dev": "vite dev",
 		"build": "vite build && npm run prepack",

package/dist/components/Core/Menus/UserMenu/profile.svelte

@@ -1,35 +0,0 @@
-<script lang="ts">
-  import {DropdownContainer} from '../../../../index.js';
-
-  let { 
-    top = '150%',
-    width = '300px',
-    iconSize = '30px',
-    iconBg = 'var(--primary-bg)',
-    user = $bindable({}),
-    open = $bindable(false),
-    children = null,
-   } = $props();
-
-  const handleClick = () => {
-    open = !open;
-  };
-</script>
-
-<DropdownContainer bind:open {top} {width}>
-    {#snippet dropdownTrigger()}
-        <button aria-label="none" onclick={handleClick}>
-          <i style="font-size: {iconSize}; color: {iconBg}" class="fa-solid fa-user"></i>
-        </button>
-    {/snippet}
-    <div style="padding:15px; border-bottom:1px solid var(--border);">
-      {#if Object.keys(user).length > 0}
-        {#each Object.entries(user) as [key, value], i}
-          <p>{value}</p>
-        {/each}
-      {:else}
-        <p>No user info</p>
-      {/if}
-    </div> 
-    {@render children?.()}
-</DropdownContainer>

package/dist/components/Core/Menus/UserMenu/profile.svelte.d.ts

@@ -1,11 +0,0 @@
-declare const Profile: import("svelte").Component<{
-    top?: string;
-    width?: string;
-    iconSize?: string;
-    iconBg?: string;
-    user?: Record<string, any>;
-    open?: boolean;
-    children?: any;
-}, {}, "open" | "user">;
-type Profile = ReturnType<typeof Profile>;
-export default Profile;

package/dist/components/Modules/Editor/Hooks/extractImage.d.ts

@@ -1,7 +0,0 @@
-/**
- * Extract all image slugs from a Tiptap JSON document.
- *
- * @param {import('@tiptap/core').JSONContent} json - Tiptap JSON content
- * @returns {string[]} - Array of image slugs
- */
-export function extractImagesFromJSON(json: import("@tiptap/core").JSONContent): string[];

package/dist/components/Modules/Editor/Hooks/extractImage.js

@@ -1,30 +0,0 @@
-/**
- * Extract all image slugs from a Tiptap JSON document.
- * 
- * @param {import('@tiptap/core').JSONContent} json - Tiptap JSON content
- * @returns {string[]} - Array of image slugs
- */
-
-export function extractImagesFromJSON(json) {
-	const slugs = new Set();
-
-	/**
-     * Recursively walk a node and collect image slugs
-     * @param {any} node - Node in the JSON tree
-     */
-
-	function walk(node) {
-		if (!node) return;
-		if (node.type === 'image' && typeof node.attrs?.src === 'string') {
-			const url = node.attrs.src;
-			const slug = url.split('/').pop();
-			if (slug) slugs.add(slug);
-		}
-		if (node.content && Array.isArray(node.content)) {
-			node.content.forEach(walk);
-		}
-	}
-
-	walk(json);
-	return [...slugs];
-}

package/dist/components/Modules/Editor/save.svelte

@@ -1,28 +0,0 @@
-<script lang="ts">
-    import { setToastMessage,isLoading, Button} from '../../../index.js';
-    import { exractContent } from './tools.js';
-
-    import type { Editor } from "@tiptap/core";
-    export let editor: Editor;
-    export let exportText: string;
-    export let content: any = {};
-
-    $: disabled = $isLoading || editor?.isEmpty;
-
-    async function onSave() {
-      try {
-        isLoading.set(true);
-        content = await exractContent(editor); 
-      }catch (error) {
-          setToastMessage('error', 'An error occurred while saving.');
-      } finally {
-        isLoading.set(false);
-      }
-    }
-
-</script>
-
-<Button
-  onclick={onSave}
-  disabled={disabled}
->{exportText}</Button>

package/dist/components/Modules/FilePicker/controls.svelte

@@ -1,95 +0,0 @@
-<script lang="ts">
-    import {fileInputStore, LinearProgress, resetFileInputStore, DropdownContainer, MenuItem, buttonRipple} from "../../../index.js";
-    import FileProperties from "./ActionsMenu/file_properties.svelte";
-    import DownloadMedia from "./ActionsMenu/download_media.svelte";
-    import DeleteMedia from "./ActionsMenu/delete_media.svelte";
-    
-    let {
-        processing = $bindable(),
-    } = $props();
-
-    const menuItems = [
-        {
-            id: 'cloud',
-            label: 'Cloud',
-        },
-        {
-            id: 'upload',
-            label: 'Upload',
-        },
-    ] as const;
-
-    function handleSelect() {
-        fileInputStore.update(store => ({ 
-            ...store,
-            submissionComplete: true,
-            uploadModalOpen: false
-        }));
-    }
-
-    const iconSize = '15px';
-    let showProperties = $state(false);
-    let openActionsMenu = $state(false);
-    let disableActions = $state(true);
-    $effect(() => {
-        if($fileInputStore.submissions.length > 0 && $fileInputStore.activeTab === 'cloud'){
-            disableActions = false;
-        } else {
-            disableActions = true;
-        }
-    });
-</script>
-
-<style>
-    .file-picker-controls {
-        display: flex;
-        flex-wrap: wrap;
-        justify-content: space-between;
-        gap : 1rem;
-        width: 100%;
-        padding: 0.5rem 1rem;
-        border-top-left-radius: 5px;
-        border-top-right-radius: 5px;
-        background-color: var(--background-tertiary);
-    }
-    #file-picker-controls i{
-        font-size: 18px;
-    }
-    #file-picker-controls button.active{
-        padding: 0.2rem 0.5rem;
-        border-radius: 3px;
-        background-color: var(--text);
-        color: var(--background);
-    }
-</style>
-
-<main id="file-picker-controls" style="display: flex; justify-content: space-between; gap:1rem;">
-    <div class="file-picker-controls">
-        <div style="display: flex; align-items: last baseline; gap:1rem;">
-            {#each menuItems as item, index (item.id)}
-                <button
-                    class={$fileInputStore.activeTab === item.id ? 'active' : ''}
-                    onclick={() => {fileInputStore.update(store => ({ ...store, activeTab: item.id }))}}
-                ><span>{item.label}</span>
-                </button>
-            {/each}
-        </div>
-        <div style="display: flex; gap: 1rem; align-items: last baseline;">
-            <button hidden={$fileInputStore.manage || disableActions} title="Select" onclick={handleSelect} style="color: var(--primary-bg);" aria-label="Select submissions"><i class="fa fa-check-circle-o"></i></button>
-            {#snippet TriggerMenu()}
-                <button disabled={disableActions} use:buttonRipple class="w-10" aria-label="Ellipsis" onclick={() => (openActionsMenu = !openActionsMenu)}>
-                    <i class="fa fa-bars"></i>
-                </button>
-            {/snippet} 
-            <DropdownContainer bind:open={openActionsMenu} dropdownTrigger={TriggerMenu}>
-                <MenuItem onclick={() => { showProperties = true; openActionsMenu = false; }} icon="fa-info-circle" iconBg="var(--text)" iconSize={iconSize}>Properties</MenuItem>
-                <DownloadMedia {iconSize} bind:processing bind:openActionsMenu/>
-                <DeleteMedia {iconSize} bind:processing bind:openActionsMenu />
-            </DropdownContainer>
-            <button title="Cancel" onclick={resetFileInputStore} aria-label="Cancel"><i class="fa fa-times-circle"></i></button>
-        </div>
-    </div>
-</main>
-{#if processing}<LinearProgress />{/if}
-
-<FileProperties bind:showProperties />

package/dist/components/Modules/FilePicker/controls.svelte.d.ts

@@ -1,5 +0,0 @@
-declare const Controls: import("svelte").Component<{
-    processing?: any;
-}, {}, "processing">;
-type Controls = ReturnType<typeof Controls>;
-export default Controls;

package/dist/stores/core/ismobile.d.ts

@@ -1 +0,0 @@
-export const isMobile: import("svelte/store").Writable<boolean>;

package/dist/stores/core/ismobile.js

@@ -1,14 +0,0 @@
-import { writable } from 'svelte/store';
-import { browser } from '$app/environment';
-
-export const isMobile = writable(true);
-
-if (browser) {
-    const updateIsMobile = () => {
-        isMobile.set(window.innerWidth < 768);
-    };
-    updateIsMobile();
-    window.addEventListener('resize', updateIsMobile);
-
-    // return () => window.removeEventListener('resize', updateIsMobile);
-}