@sierra-95/svelte-scaffold 1.0.1

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

@@ -0,0 +1,19 @@
+<script lang="ts">
+    import {PreviewAudio,PreviewDocument,PreviewImage,PreviewVideo, fileInputStore} from '../../../index.js';
+    
+    export let media;
+</script>
+
+<div id="file-picker-previews" style="flex-grow: 1; overflow-y: auto; padding-top: 1rem; max-height: 400px;">
+    {#if media}
+        {#if $fileInputStore.activeMenu === 'Music'}
+            <PreviewAudio {media} />
+        {:else if $fileInputStore.activeMenu === 'Documents'}
+            <PreviewDocument {media} />
+        {:else if $fileInputStore.activeMenu === 'Pictures'}
+            <PreviewImage {media} />
+        {:else if $fileInputStore.activeMenu === 'Videos'}
+            <PreviewVideo {media} />
+        {/if}
+    {/if}
+</div>

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

@@ -0,0 +1,20 @@
+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: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Previews: $$__sveltets_2_IsomorphicComponent<{
+    media: any;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Previews = InstanceType<typeof Previews>;
+export default Previews;

package/dist/components/Modules/Layout/Header/header.css

@@ -0,0 +1,38 @@
+#sierra-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  height: 50px;
+  border-bottom: 1px solid var(--border);
+  background-color: var(--header);
+}
+#sierra-header .bar {
+  width: 50px;
+  height: 3px;
+  margin: 8px auto;
+  background-color: var(--hamburger);
+  border-radius: 5px;
+  transition: 0.3s;
+}
+#sierra-header button:hover .bar:nth-of-type(1) {
+  -webkit-transform: translateY(1.5px) rotate(-4.5deg);
+  -ms-transform: translateY(1.5px) rotate(-4.5deg);
+  transform: translateY(1.5px) rotate(-4.5deg);
+}
+
+#sierra-header button:hover .bar:nth-of-type(3) {
+  -webkit-transform: translateY(-1.5px) rotate(4.5deg);
+  -ms-transform: translateY(-1.5px) rotate(4.5deg);
+  transform: translateY(-1.5px) rotate(4.5deg);
+}
+
+#sierra-header img{
+  width: var(--header-image-size);
+}
+#sierra-header a:hover{
+  text-decoration: underline;
+}
+#sierra-header h2{
+  font-size: 1rem;
+  font-weight: normal;
+}

package/dist/components/Modules/Layout/Header/header.svelte

@@ -0,0 +1,29 @@
+<script>
+  import './header.css';
+   const {
+    headerTitle,
+    headerLink,
+    headerImage, 
+    headerImageSize,
+    toggleMenu = (() => {}),
+    headerContent,
+  } = $props();
+</script>
+<header id='sierra-header'>
+  <div style="display: flex; align-items: center; margin-left: 0.5rem; gap: 2rem;">
+    <button aria-label="Toggle menu" style="cursor: pointer;" onclick={toggleMenu}>
+      <div class="bar"></div>
+      <div class="bar"></div>
+      <div class="bar"></div>
+    </button>
+    <a href={headerLink} style="display: flex; align-items: center; gap: 0.5rem; color: inherit">
+      {#if headerImage}
+          <img style="--header-image-size : {headerImageSize}" src={headerImage} alt="Logo"/>
+      {/if}
+      {#if headerTitle}
+        <h2>{headerTitle}</h2>
+      {/if}
+      </a>
+  </div>
+  {@render headerContent?.()}
+</header>

package/dist/components/Modules/Layout/Header/header.svelte.d.ts

@@ -0,0 +1,21 @@
+export default Header;
+type Header = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Header: import("svelte").Component<{
+    headerTitle: any;
+    headerLink: any;
+    headerImage: any;
+    headerImageSize: any;
+    toggleMenu?: any;
+    headerContent: any;
+}, {}, "">;
+type $$ComponentProps = {
+    headerTitle: any;
+    headerLink: any;
+    headerImage: any;
+    headerImageSize: any;
+    toggleMenu?: any;
+    headerContent: any;
+};

package/dist/components/Modules/Layout/Menu/menu.css

@@ -0,0 +1,45 @@
+#sierra-menu{
+    display: flex;
+    flex-direction: column;
+    gap: 12px;
+    align-items: flex-end;
+    padding: 20px 0px;
+}
+#sierra-menu hr{
+    color: var(--border);
+}
+#sierra-menu .icon-base {
+    position: relative;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    width: 95%;
+    padding: 1px 0px;
+    cursor: pointer;
+    border-top-left-radius: 40px;
+    border-bottom-left-radius: 40px;
+}
+#sierra-menu .icon-active {
+    background-color: var(--menu-icon-active-bg);
+    border: 1px solid var(--menu-icon-active-border);
+    border-right: unset;
+}
+#sierra-menu h3{
+    width: 50%;
+    font-size: 0.9rem;
+    margin-left: 10px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+}
+#sierra-menu i.fa-chevron-right {
+  transition: transform 0.2s;
+}
+#sierra-menu i.fa-chevron-right.active {
+  transform: rotate(90deg);
+}
+
+#sierra-menu a:not(.icon-active):hover {
+    background-color: var(--menu-item-hover);
+}
+

package/dist/components/Modules/Layout/Menu/menu.svelte

@@ -0,0 +1,129 @@
+<script lang="ts">
+	import './menu.css';
+	import { onMount } from 'svelte';
+    import { page } from '$app/state';
+    import { afterNavigate, beforeNavigate } from '$app/navigation';
+    import { isLoading, validateLayoutMenuSections } from '../../../../index.js';
+
+	export let toggleMenu: () => void;
+	export let closeMobileMenu: () => void;
+	export let isMenuOpen: boolean;
+	export let sections: any[];
+
+	function isParentActive(item: any, pathname: string) {
+		if (item.path === '/') {
+			return pathname === '/';
+		}
+		return pathname === item.path || pathname.startsWith(item.path + '/');
+	}
+
+	let openSubsections = new Set();
+
+	function toggleSubsection(id: string) {
+		if (!isMenuOpen){
+			toggleMenu();
+			if(openSubsections.has(id)) return;
+		}
+		if (openSubsections.has(id)) {
+			openSubsections.delete(id);
+		} else {
+			openSubsections.add(id);
+		}
+
+		openSubsections = new Set(openSubsections);
+	}
+	function syncOpenSubsectionsWithRoute(pathname: string) {
+		openSubsections.clear();
+
+		for (const section of sections) {
+			for (const item of section.items) {
+				if (!item.children) continue;
+
+				const match = item.children.some((child: any) =>
+					pathname.startsWith(child.path)
+				);
+
+				if (match) {
+					openSubsections.add(item.id);
+				}
+			}
+		}
+
+		openSubsections = new Set(openSubsections);
+	}
+	onMount(() => {
+		validateLayoutMenuSections(sections);
+		syncOpenSubsectionsWithRoute(page.url.pathname);
+	});
+
+	beforeNavigate(() => isLoading.set(true));
+	afterNavigate(({ to }) => {
+		isLoading.set(false);
+		if (to) {
+			syncOpenSubsectionsWithRoute(to.url.pathname);
+		}
+	});
+
+</script>
+<nav id="sierra-menu">
+	{#each sections as section, i}
+		{#if section.label}
+			<div style="width: 80%;">
+				<h3 style="font-size:small; {isMenuOpen? '':'display:none;'}">{section.label}</h3>
+				<hr/>
+			</div>
+		{/if}
+
+		{#each section.items as item}
+			<a  title={item.label}
+				href={item.children ? 'javascript:void(0)' : item.path}
+				on:click={() => {
+					if (item.children) {
+						toggleSubsection(item.id);
+					}else{
+						closeMobileMenu();
+					}
+				}}
+				style="{isMenuOpen? '':'border-radius: unset;border-left: none;'}"
+				class={`
+					icon-base
+					${
+						item.children
+							? (!isMenuOpen && isParentActive(item, page.url.pathname) ? 'icon-active' : '')
+							: (isParentActive(item, page.url.pathname) ? 'icon-active' : '')
+					}
+				`}
+
+			>
+				<i class={item.icon} style="font-size: 15px; color: var(--icon-theme)"></i>
+				<h3 style="{isMenuOpen ? '':'display:none'}">{item.label}</h3>
+				{#if item.children}
+					<i
+						class={`fa fa-chevron-right ${openSubsections.has(item.id) ? 'active' : ''}`}
+						style="position: absolute; right: 10px; font-size: 12px; {isMenuOpen ? '':'display:none'}"
+					></i>
+				{/if}
+			</a>
+			{#if item.children && openSubsections.has(item.id) && isMenuOpen}
+				<div style="width: 75%; border-left: 1px solid var(--border); display: flex; flex-direction: column; gap: 12px">
+					{#each item.children as child}
+						<a
+							title={child.label}
+							href={child.path}
+							on:click={closeMobileMenu}
+							class={`
+								icon-base
+								${page.url.pathname.startsWith(child.path) ? 'icon-active' : ''}
+							`}
+							style="margin-left: 10px"
+						>
+							<h3 style="{isMenuOpen ? '':'display:none'}">
+								{child.label}
+							</h3>
+						</a>
+					{/each}
+				</div>
+			{/if}
+		{/each}
+	{/each}
+</nav>

package/dist/components/Modules/Layout/Menu/menu.svelte.d.ts

@@ -0,0 +1,24 @@
+import './menu.css';
+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: Props & {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const Menu: $$__sveltets_2_IsomorphicComponent<{
+    toggleMenu: () => void;
+    closeMobileMenu: () => void;
+    isMenuOpen: boolean;
+    sections: any[];
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Menu = InstanceType<typeof Menu>;
+export default Menu;

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

@@ -0,0 +1,28 @@
+<style>
+  .background-svg {
+    position: absolute;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    z-index: -1;
+  }
+</style>
+
+<svg class="background-svg" viewBox="0 0 1000 1000" preserveAspectRatio="xMidYMid slice">
+  <defs>
+    <linearGradient id="lineGradient" x1="0%" y1="0%" x2="100%" y2="100%">
+      <stop offset="0%" stop-color="var(--background-v1-gradient-line-start)" />
+      <stop offset="100%" stop-color="var(--background-v1-gradient-line-end)" />
+    </linearGradient>
+  </defs>
+  <line x1="100" y1="0" x2="100" y2="1000" stroke="url(#lineGradient)" stroke-width="2" opacity="0.3" />
+  <line x1="300" y1="0" x2="250" y2="1000" stroke="url(#lineGradient)" stroke-width="1.5" opacity="0.2" />
+  <line x1="700" y1="0" x2="750" y2="1000" stroke="url(#lineGradient)" stroke-width="1.5" opacity="0.2" />
+  <line x1="900" y1="0" x2="900" y2="1000" stroke="url(#lineGradient)" stroke-width="2" opacity="0.3" />
+
+  <line x1="0" y1="200" x2="1000" y2="200" stroke="url(#lineGradient)" stroke-width="1" opacity="0.15" />
+  <line x1="0" y1="400" x2="1000" y2="450" stroke="url(#lineGradient)" stroke-width="1.5" opacity="0.2" />
+  <line x1="0" y1="650" x2="1000" y2="600" stroke="url(#lineGradient)" stroke-width="1" opacity="0.15" />
+  <line x1="0" y1="850" x2="1000" y2="850" stroke="url(#lineGradient)" stroke-width="2" opacity="0.25" />
+</svg>

package/dist/components/Modules/Layout/background.svelte.d.ts

@@ -0,0 +1,26 @@
+export default Background;
+type Background = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const Background: $$__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/components/Modules/Layout/main.css

@@ -0,0 +1,21 @@
+#sierra-layout{
+    display: flex;
+    height: calc(100vh - 50px);
+}
+#sierra-layout .menu{
+    height: 100%;
+    overflow-y: auto;
+    background-color: var(--sierra-menu);
+    border-right: 1px solid var(--border);
+    z-index: 10;
+}
+#sierra-layout .content{
+    position: relative;
+    width: 100%;
+    height: 100%;
+    overflow-y: auto;
+}
+#sierra-wrapper{
+    margin: 0 auto;
+    max-width: 56rem;
+}

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

@@ -0,0 +1,119 @@
+<script>
+	import './main.css';
+    import { onMount } from 'svelte';
+	import {LinearProgress, isLoading, isMobile, Modal, Toast, theme,FilePicker, User, isLoggedIn} from '../../../index.js'
+	import Header from './Header/header.svelte';
+	import Menu from './Menu/menu.svelte';
+	import Background from './background.svelte';
+	
+	let { 
+		children, 
+		headerTitle = '',
+		headerLink = '',
+		headerImage = '',
+		headerImageSize = '30px',
+		sections = [],
+		contentCenter = false,
+		headerContent = null,
+		paddingOff = false,
+	} = $props();
+
+
+	let isMenuOpen = $state(false);
+	$effect(() => {
+		if ($isMobile) isMenuOpen = false;
+		if ($theme){
+			document.body.setAttribute('data-theme', $theme);
+			localStorage.setItem('theme', $theme);
+		}
+	});
+
+	onMount(() => {
+		if (typeof localStorage !== 'undefined') {
+			if(!$isMobile){
+				const stored = localStorage.getItem('isMenuOpen');
+				if (stored === null) {
+					localStorage.setItem('isMenuOpen', 'true');
+					isMenuOpen = true;
+				} else {
+					isMenuOpen = stored === 'true';
+				}
+			}
+			const storedTheme = localStorage.getItem('theme');
+			if (storedTheme) {
+				theme.set(storedTheme);
+				document.body.setAttribute('data-theme', storedTheme);
+			} else {
+				theme.set('dark');
+				localStorage.setItem('theme', 'dark');
+				document.body.setAttribute('data-theme', 'dark');
+			}
+
+			const anonId = localStorage.getItem('anonymous_id');
+			if(!$isLoggedIn){
+				if (!anonId) {
+					const newId = crypto.randomUUID();
+					localStorage.setItem('anonymous_id', newId);
+					User.update(user => ({ ...user, userId: newId }));
+				}else if(anonId) {
+					User.update(user => ({ ...user, userId: anonId }) );
+					//console.log("Updated User store with user id:", $User);
+				}
+			}
+		}
+	});
+
+	const toggleMenu = () => {
+		isMenuOpen = !isMenuOpen;
+		if($isMobile) return;
+		if (typeof localStorage !== 'undefined') {
+			localStorage.setItem('isMenuOpen', isMenuOpen.toString());
+		}
+	};
+	const closeMobileMenu = () => {
+		if ($isMobile && isMenuOpen) isMenuOpen = false;
+	};
+</script>
+
+<main style="height: 100vh;">
+	<Modal />
+	<Toast />
+	<FilePicker />
+	<Header 
+		{headerTitle}
+		{headerLink}
+		{headerImage}
+		{headerImageSize}
+		{toggleMenu}
+		{headerContent}
+	/>
+	{#if $isLoading}<LinearProgress />{/if}
+	<div id="sierra-layout">
+		<div
+			class="menu"
+			data-label="Menu Container"
+			style={
+				$isMobile
+				? `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;`
+			}
+		>
+		<Menu 
+			{sections} 
+			{isMenuOpen} 
+			{toggleMenu}
+			{closeMobileMenu} 
+		/>
+		</div>
+		<div data-label="Content Container" class="content" role="none" onclick={closeMobileMenu} style={paddingOff ? 'padding: 0px;' : 'padding: 20px'}>
+			<Background />
+			{#if contentCenter}
+				<div id='sierra-wrapper'>
+					{@render children()}
+				</div>
+			{:else}
+				{@render children()}
+			{/if}
+		</div>
+	</div>
+</main>

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

@@ -0,0 +1,27 @@
+export default Main;
+type Main = {
+    $on?(type: string, callback: (e: any) => void): () => void;
+    $set?(props: Partial<$$ComponentProps>): void;
+};
+declare const Main: import("svelte").Component<{
+    children: any;
+    headerTitle?: string;
+    headerLink?: string;
+    headerImage?: string;
+    headerImageSize?: string;
+    sections?: any[];
+    contentCenter?: boolean;
+    headerContent?: any;
+    paddingOff?: boolean;
+}, {}, "">;
+type $$ComponentProps = {
+    children: any;
+    headerTitle?: string;
+    headerLink?: string;
+    headerImage?: string;
+    headerImageSize?: string;
+    sections?: any[];
+    contentCenter?: boolean;
+    headerContent?: any;
+    paddingOff?: boolean;
+};