@turnipxenon/pineapple 5.3.9 → 5.3.11

package/dist/ui/modules/projects/ThisWebpage.svelte

@@ -14,24 +14,30 @@
 
 	const key = "This Webpage";
 	const priority = 70;
-	const startCommit = "https://github.com/TurnipXenon/pineapple/commit/b16aa69b9f5ad224871e80c09aa4cca067dc2a52"; // fill in GitHub commit URL to auto-resolve dateStarted
+	const startCommit =
+		"https://github.com/TurnipXenon/pineapple/commit/b16aa69b9f5ad224871e80c09aa4cca067dc2a52"; // fill in GitHub commit URL to auto-resolve dateStarted
 	const gitRepoLink = "https://github.com/TurnipXenon/pineapple";
-	const tags = ["svelte", "typescript", "web", "tailwind", "postgres", "prisma", "ongoing", "database"];
+	const tags = [
+		"svelte",
+		"typescript",
+		"web",
+		"tailwind",
+		"postgres",
+		"prisma",
+		"ongoing",
+		"database"
+	];
 	export { component, key, startCommit, gitRepoLink, tags, priority };
 </script>
 
 {#snippet component(props: ProjectComponentProps)}
 	<FourPartCard>
-
 		{#snippet headerCover()}
 			{#if !props.isPineapple}
-				<video
-					playsinline autoplay muted loop preload="none"
-					class="game-video-cover"
-				>
-					<source src={ThisWebsiteFootage} type="video/mp4">
-					video unavailable. original video contains clips of this website being resized and light-dark mode being
-					toggled.
+				<video playsinline autoplay muted loop preload="none" class="game-video-cover">
+					<source src={ThisWebsiteFootage} type="video/mp4" />
+					video unavailable. original video contains clips of this website being resized and light-dark
+					mode being toggled.
 				</video>
 			{/if}
 		{/snippet}
@@ -41,13 +47,16 @@
 		{/snippet}
 
 		<p>
-			The webpage is made with two parts. The webpage that has the content for everything here, I've lovingly called
-			Seaweed. I kept seaweed as a private package. On the other hand, the base package which I want to use for all
-			spin offs of my websites is called Pineapple and have kept that codebase public.
+			The webpage is made with two parts. The webpage that has the content for everything here, I've
+			lovingly called Seaweed. I kept seaweed as a private package. On the other hand, the base
+			package which I want to use for all spin offs of my websites is called Pineapple and have kept
+			that codebase public.
+		</p>
+		<p>
+			The webpage can dynamically emphasize terms, rearrange the layout, use different terms, and
+			save all these configurations as a shortened link. Additionally fetches the latest blog
+			entries from turnipxenon.com via REST calls.
 		</p>
-		<p>The webpage can dynamically emphasize terms, rearrange the layout, use different terms, and save all these
-			configurations as a shortened link. Additionally fetches the latest blog entries from turnipxenon.com via REST
-			calls.</p>
 
 		<div class="text-chip-container">
 			<TextChip queryClass="qt-svelte">Svelte 5</TextChip>
@@ -73,17 +82,18 @@
 			<PinyaButton
 				buttonVariant={ButtonVariant.Image}
 				title="https://github.com/TurnipXenon/pineapple"
-				onclick={() => window.open("https://github.com/TurnipXenon/pineapple")}>
+				onclick={() => window.open("https://github.com/TurnipXenon/pineapple")}
+			>
 				<ImageIcon src={GithubIcon} class="long-btn-image" alt="github icon" />
 			</PinyaButton>
 			<PinyaButton
 				data-nosnippet
 				buttonVariant={ButtonVariant.SmallIcon}
 				title="https://pineapple.turnipxenon.com/documentation"
-				onclick={() => window.open("https://pineapple.turnipxenon.com/documentation")}>
+				onclick={() => window.open("https://pineapple.turnipxenon.com/documentation")}
+			>
 				<span class="external-link">pineapple.turnipxenon.com</span>
 			</PinyaButton>
 		</section>
-
 	</FourPartCard>
 {/snippet}

package/dist/ui/modules/projects/ThisWebpage.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"ThisWebpage.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/modules/projects/ThisWebpage.svelte.ts"],"names":[],"mappings":"AAYC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,uDAAuD,CAAC;AACnG,QAAA,MAAM,SAAS,GAAyB,OAAO,qBAAqB,KAAqB,UAAU,CAAC,OAAO,QAAQ,EAAE,OAAO,CAkDhG,CAAC;AAE7B,QAAA,MAAM,GAAG,iBAAiB,CAAC;AAC3B,QAAA,MAAM,QAAQ,KAAK,CAAC;AACpB,QAAA,MAAM,WAAW,6FAA6F,CAAC;AAC/G,QAAA,MAAM,WAAW,6CAA6C,CAAC;AAC/D,QAAA,MAAM,IAAI,UAA2F,CAAC;AACtG,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,WAAW,EAAE,WAAW,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;AASrE,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,WAAW;;kBAA+E,CAAC;AAC/E,KAAK,WAAW,GAAG,YAAY,CAAC,OAAO,WAAW,CAAC,CAAC;AACtD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"ThisWebpage.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/modules/projects/ThisWebpage.svelte.ts"],"names":[],"mappings":"AAYC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,uDAAuD,CAAC;AACnG,QAAA,MAAM,SAAS,GAAyB,OAAO,qBAAqB,KAAqB,UAAU,CAAC,OAAO,QAAQ,EAAE,OAAO,CAmDhG,CAAC;AAE7B,QAAA,MAAM,GAAG,iBAAiB,CAAC;AAC3B,QAAA,MAAM,QAAQ,KAAK,CAAC;AACpB,QAAA,MAAM,WAAW,6FAC0E,CAAC;AAC5F,QAAA,MAAM,WAAW,6CAA6C,CAAC;AAC/D,QAAA,MAAM,IAAI,UAST,CAAC;AACF,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,WAAW,EAAE,WAAW,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;AASrE,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,WAAW;;kBAA+E,CAAC;AAC/E,KAAK,WAAW,GAAG,YAAY,CAAC,OAAO,WAAW,CAAC,CAAC;AACtD,eAAe,WAAW,CAAC"}

package/dist/ui/modules/universal-overlay/DialogPanel.svelte

@@ -29,7 +29,9 @@ Layout and logic for DialogPanel. Some of the logics for the portraits are in Un
 		}
 
 		const distanceToBottom =
-			dialogPanelElement.scrollHeight - dialogPanelElement.scrollTop - dialogPanelElement.clientHeight;
+			dialogPanelElement.scrollHeight -
+			dialogPanelElement.scrollTop -
+			dialogPanelElement.clientHeight;
 		shouldStickToBottom = distanceToBottom <= 24;
 	};
 
@@ -38,7 +40,7 @@ Layout and logic for DialogPanel. Some of the logics for the portraits are in Un
 			currentMessage = value;
 		});
 
-		dialogManager.isDoneTransitionWritable.subscribe(value => {
+		dialogManager.isDoneTransitionWritable.subscribe((value) => {
 			divRole = value ? undefined : "button";
 		});
 
@@ -46,7 +48,7 @@ Layout and logic for DialogPanel. Some of the logics for the portraits are in Un
 	});
 
 	$effect(() => {
-		dialogManager.setUpdateRate((16 * 10) - (textSpeedContext.value * 16));
+		dialogManager.setUpdateRate(16 * 10 - textSpeedContext.value * 16);
 	});
 
 	$effect(() => {
@@ -94,39 +96,39 @@ Layout and logic for DialogPanel. Some of the logics for the portraits are in Un
 </div>
 
 <style>
-    :global {
-        :root {
-            --color-dialog-bold: #6b8499;
-            --color-dialog-italic: #a55332;
-        }
-
-        html.dark {
-            --color-dialog-bold: #85a1b6;
-            --color-dialog-italic: #f7b67c;
-        }
-
-        #reverse-dialog-wrapper {
-            width: 100%;
-        }
-
-        #dialog-panel {
-            overflow: auto;
-            display: block;
-
-            img,
-            video {
-                max-height: 3lh;
-                display: inline;
-            }
-
-            b {
-                font-weight: bolder;
-                color: var(--color-dialog-bold);
-            }
-
-            i {
-                color: var(--color-dialog-italic);
-            }
-        }
-    }
+	:global {
+		:root {
+			--color-dialog-bold: #6b8499;
+			--color-dialog-italic: #a55332;
+		}
+
+		html.dark {
+			--color-dialog-bold: #85a1b6;
+			--color-dialog-italic: #f7b67c;
+		}
+
+		#reverse-dialog-wrapper {
+			width: 100%;
+		}
+
+		#dialog-panel {
+			overflow: auto;
+			display: block;
+
+			img,
+			video {
+				max-height: 3lh;
+				display: inline;
+			}
+
+			b {
+				font-weight: bolder;
+				color: var(--color-dialog-bold);
+			}
+
+			i {
+				color: var(--color-dialog-italic);
+			}
+		}
+	}
 </style>

package/dist/ui/modules/universal-overlay/DialogPanel.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"DialogPanel.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/modules/universal-overlay/DialogPanel.svelte.ts"],"names":[],"mappings":"AA8FA,4GAA4G;AAC5G,QAAA,MAAM,WAAW,2DAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"DialogPanel.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/modules/universal-overlay/DialogPanel.svelte.ts"],"names":[],"mappings":"AAgGA,4GAA4G;AAC5G,QAAA,MAAM,WAAW,2DAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/ui/modules/universal-overlay/SettingsPanel.svelte

@@ -61,7 +61,7 @@ TODO: delete GeneralSettingsModal.svelte
 		const _tutorialLoaded = tutorialLoaded;
 		tutorialLoaded = false;
 		const currentDialogId = dialogManager.currentMessageMeta.dialogId;
-		if (currentDialogId && !currentDialogId.includes('Tutorial')) {
+		if (currentDialogId && !currentDialogId.includes("Tutorial")) {
 			dialogManager.dialogVariableStore.setItem("$tutorialReturnAddress", currentDialogId);
 		}
 		if (!_tutorialLoaded) {
@@ -73,7 +73,6 @@ TODO: delete GeneralSettingsModal.svelte
 			dialogManager.setDialogChoiceById("TutorialStart");
 			close?.();
 			dialogManager.enableDialog(true);
-			
 		}
 	};
 

package/dist/ui/modules/universal-overlay/SettingsPanel.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"SettingsPanel.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/modules/universal-overlay/SettingsPanel.svelte.ts"],"names":[],"mappings":"AA2BC,KAAK,gBAAgB,GAAI;IAAE,KAAK,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE,CAAC;AA6IjD;;;;GAIG;AACH,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"SettingsPanel.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/modules/universal-overlay/SettingsPanel.svelte.ts"],"names":[],"mappings":"AA2BC,KAAK,gBAAgB,GAAI;IAAE,KAAK,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE,CAAC;AA4IjD;;;;GAIG;AACH,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

package/dist/ui/modules/universal-overlay/UniversalOverlay.svelte

@@ -56,10 +56,12 @@ See panels:
 	});
 </script>
 
-<div class="dialog-elements"
-     aria-hidden={hidePercent >= (99 * 0.4)}
-     style="--hidePercentWidth: -{hidePercent}vw;
-            --hidePercentHeight: {hidePercentLinear}vh;">
+<div
+	class="dialog-elements"
+	aria-hidden={hidePercent >= 99 * 0.4}
+	style="--hidePercentWidth: -{hidePercent}vw;
+            --hidePercentHeight: {hidePercentLinear}vh;"
+>
 	<div class="dialog-portrait-container" class:is-portrait-enabled={enablePortrait.value}>
 		<img src={currentPortrait} alt="Ares" class="dialog-portrait" />
 	</div>
@@ -76,14 +78,18 @@ See panels:
 				<PinyaButton
 					buttonVariant={ButtonVariant.Image}
 					title="Close conversation"
-					onclick={()=>{dialogManager.toggleDialogOverlay();}}
+					onclick={() => {
+						dialogManager.toggleDialogOverlay();
+					}}
 				>
 					<ImageIcon src={CloseIcon} aria-hidden="true" alt=""></ImageIcon>
 				</PinyaButton>
 				<PinyaButton
 					title="Settings"
 					buttonVariant={ButtonVariant.Image}
-					onclick={()=>{modals.open(GeneralSettingsModal);}}
+					onclick={() => {
+						modals.open(GeneralSettingsModal);
+					}}
 				>
 					<ImageIcon src={SettingsLogo} aria-hidden="true" alt=""></ImageIcon>
 				</PinyaButton>

package/dist/ui/modules/universal-overlay/UniversalOverlay.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"UniversalOverlay.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/modules/universal-overlay/UniversalOverlay.svelte.ts"],"names":[],"mappings":"AAkHA;;;;;;;GAOG;AACH,QAAA,MAAM,gBAAgB,2DAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"UniversalOverlay.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/modules/universal-overlay/UniversalOverlay.svelte.ts"],"names":[],"mappings":"AAsHA;;;;;;;GAOG;AACH,QAAA,MAAM,gBAAgB,2DAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/ui/templates/PinyaPageLayout/PinyaPageLayout.svelte

@@ -27,10 +27,10 @@
 		footer,
 		appBardEndStyle = "functional"
 	}: {
-		children: Snippet
-		appBarLead?: Snippet
-		footer?: Snippet,
-		appBardEndStyle?: "classic" | "functional"
+		children: Snippet;
+		appBarLead?: Snippet;
+		footer?: Snippet;
+		appBardEndStyle?: "classic" | "functional";
 	} = $props();
 
 	let enableUniversalOverlay = $derived(getEnableDialogOverlayContext().value);
@@ -47,7 +47,6 @@
 
 {#snippet header(extraClass: string)}
 	<header class={`bg-surface-100-900 shadow-md ${extraClass}`}>
-
 		{#if appState.lead}
 			<div class="title-space">
 				{@render appState.lead()}
@@ -56,14 +55,14 @@
 			<div class="title-space">
 				{@render appBarLead()}
 			</div>
-		{:else }
-			<button onclick={() => { location.href = localizeHref('/'); }} title="Home">
-				<img
-					aria-hidden="true"
-					alt=""
-					class="ares-logo"
-					src={AresLogo}
-				/>
+		{:else}
+			<button
+				onclick={() => {
+					location.href = localizeHref("/");
+				}}
+				title="Home"
+			>
+				<img aria-hidden="true" alt="" class="ares-logo" src={AresLogo} />
 			</button>
 			<div class="title-space text-primary-900-100 font-bold">
 				{#if appState.title}
@@ -72,22 +71,23 @@
 			</div>
 		{/if}
 
-
-		{#if appBardEndStyle === 'classic'}
+		{#if appBardEndStyle === "classic"}
 			<button
 				title={m.settings()}
 				aria-label={m.settings()}
 				class="btn-icon preset-outlined-primary-500 hover:brightness-125"
 				onclick={onSettingsClick}
 			>
-				<img class="icon" src={SettingsLogo} aria-hidden="true" alt="">
+				<img class="icon" src={SettingsLogo} aria-hidden="true" alt="" />
 			</button>
-		{:else }
+		{:else}
 			<div id="header-action-wrapper">
 				<!-- site map -->
 				<PinyaButton
 					title="Navigation"
-					onclick={()=>{modals.open(NavigationModal);}}
+					onclick={() => {
+						modals.open(NavigationModal);
+					}}
 				>
 					<ImageIcon src={HamburgerIcon} aria-hidden="true" alt=""></ImageIcon>
 				</PinyaButton>
@@ -95,7 +95,9 @@
 				<PinyaButton
 					title="Settings"
 					buttonVariant={ButtonVariant.Image}
-					onclick={()=>{modals.open(GeneralSettingsModal);}}
+					onclick={() => {
+						modals.open(GeneralSettingsModal);
+					}}
 				>
 					<ImageIcon src={SettingsLogo} aria-hidden="true" alt=""></ImageIcon>
 				</PinyaButton>
@@ -104,8 +106,12 @@
 					title="Toggle conversation"
 					buttonVariant={ButtonVariant.Image}
 					disabled={appState.allowDialog === false}
-					colorScheme={isMounted && enableUniversalOverlay && appState.allowDialog !== false ? ColorScheme.Secondary : undefined}
-					onclick={()=>{dialogManager.toggleDialogOverlay();}}
+					colorScheme={isMounted && enableUniversalOverlay && appState.allowDialog !== false
+						? ColorScheme.Secondary
+						: undefined}
+					onclick={() => {
+						dialogManager.toggleDialogOverlay();
+					}}
 				>
 					<ImageIcon src={DialogIcon} aria-hidden="true" alt=""></ImageIcon>
 				</PinyaButton>
@@ -114,8 +120,8 @@
 	</header>
 {/snippet}
 
-{@render header('hidden shadow-none w-full')}
-{@render header('fixed z-15 w-[105vw]')}
+{@render header("hidden shadow-none w-full")}
+{@render header("fixed z-15 w-[105vw]")}
 
 <RandomizedBackground enabled={$enableBackground} />
 
@@ -127,79 +133,78 @@
 
 {#if footer}
 	{@render footer()}
-{:else }
+{:else}
 	<div aria-hidden="true" class="footer-space"></div>
 {/if}
 
-
 <style>
-    :global {
-        .hidden {
-            opacity: 0;
-        }
-
-        #header-action-wrapper {
-            max-height: 2rem;
-            display: flex;
-            flex-direction: row-reverse;
-            gap: 0.5rem;
-
-            & > * {
-                padding: 0;
-                aspect-ratio: 1 / 1;
-                height: 100%;
-
-                & > img {
-                    padding: 0.3rem;
-                    height: 95%;
-                    aspect-ratio: 1 / 1;
-                    object-fit: contain;
-                }
-            }
-
-            .pinya-button {
-                border-radius: 50%;
-            }
-        }
-
-        :root {
-            --default-page-container-margin: 4rem min(1rem, 1vw) 0 min(1rem, 1vw);
-        }
-    }
-
-    header {
-        top: 0;
-        display: flex;
-        padding: 0.5rem calc(0.5rem + 1vw) 0.5rem calc(0.5rem + 5vw);
-        align-items: center;
-        transform: translateX(-5vw);
-    }
-
-    #default-page-container {
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        margin: var(--default-page-container-margin);
-        flex-direction: column;
-    }
-
-    .ares-logo {
-        object-fit: contain;
-        height: 2rem;
-        margin: 0 1rem 0 0;
-        filter: var(--filter-ares-logo);
-    }
-
-    .title-space {
-        flex-grow: 1;
-        white-space: nowrap;
-        overflow: hidden;
-        text-overflow: ellipsis;
-        padding-inline: 1em;
-    }
-
-    .footer-space {
-        width: 100%;
-        height: calc(var(--dialog-box-height) + 3.5lh);
-    }
+	:global {
+		.hidden {
+			opacity: 0;
+		}
+
+		#header-action-wrapper {
+			max-height: 2rem;
+			display: flex;
+			flex-direction: row-reverse;
+			gap: 0.5rem;
+
+			& > * {
+				padding: 0;
+				aspect-ratio: 1 / 1;
+				height: 100%;
+
+				& > img {
+					padding: 0.3rem;
+					height: 95%;
+					aspect-ratio: 1 / 1;
+					object-fit: contain;
+				}
+			}
+
+			.pinya-button {
+				border-radius: 50%;
+			}
+		}
+
+		:root {
+			--default-page-container-margin: 4rem min(1rem, 1vw) 0 min(1rem, 1vw);
+		}
+	}
+
+	header {
+		top: 0;
+		display: flex;
+		padding: 0.5rem calc(0.5rem + 1vw) 0.5rem calc(0.5rem + 5vw);
+		align-items: center;
+		transform: translateX(-5vw);
+	}
+
+	#default-page-container {
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		margin: var(--default-page-container-margin);
+		flex-direction: column;
+	}
+
+	.ares-logo {
+		object-fit: contain;
+		height: 2rem;
+		margin: 0 1rem 0 0;
+		filter: var(--filter-ares-logo);
+	}
+
+	.title-space {
+		flex-grow: 1;
+		white-space: nowrap;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		padding-inline: 1em;
+	}
+
+	.footer-space {
+		width: 100%;
+		height: calc(var(--dialog-box-height) + 3.5lh);
+	}
 </style>

package/dist/ui/templates/PinyaPageLayout/PinyaPageLayout.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PinyaPageLayout.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/templates/PinyaPageLayout/PinyaPageLayout.svelte.ts"],"names":[],"mappings":"AAkBA,OAAO,EAAW,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAK9C,KAAK,gBAAgB,GAAI;IACxB,QAAQ,EAAE,OAAO,CAAA;IACjB,UAAU,CAAC,EAAE,OAAO,CAAA;IACpB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,eAAe,CAAC,EAAE,SAAS,GAAG,YAAY,CAAA;CAC1C,CAAC;AA+GH,QAAA,MAAM,eAAe,gEAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}
+{"version":3,"file":"PinyaPageLayout.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/templates/PinyaPageLayout/PinyaPageLayout.svelte.ts"],"names":[],"mappings":"AAkBA,OAAO,EAAW,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAK9C,KAAK,gBAAgB,GAAI;IACxB,QAAQ,EAAE,OAAO,CAAC;IAClB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,MAAM,CAAC,EAAE,OAAO,CAAC;IACjB,eAAe,CAAC,EAAE,SAAS,GAAG,YAAY,CAAC;CAC3C,CAAC;AAsHH,QAAA,MAAM,eAAe,gEAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/ui/templates/PinyaPageLayout/pinyaPageLayoutRunes.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { Snippet } from 'svelte';
+import type { Snippet } from "svelte";
 interface AppStore {
     title: string;
     lead?: Snippet;

package/dist/ui/templates/PinyaPageLayout/pinyaPageLayoutRunes.svelte.js

@@ -1,5 +1,5 @@
 export const appState = $state({
-    title: '',
+    title: "",
     isLanguagePickerAvailable: true,
-    bgOpacity: 1,
+    bgOpacity: 1
 });