@turnipxenon/pineapple 3.0.0-alpha.1 → 3.0.0-alpha.2

package/dist/ui/elements/pinya-combobox/PinyaComboboxProps.d.ts

@@ -0,0 +1,18 @@
+export interface GenericComboboxItem<T extends string> {
+    label: string;
+    value: T;
+}
+export interface ValueChangeDetails<T extends string> {
+    value: string[];
+    items: T[];
+}
+export interface PinyaComboboxProps<T extends string> {
+    data: GenericComboboxItem<T>[];
+    defaultValue: T[];
+    value: T[];
+    label: string;
+    placeholder: string;
+    onValueChange?: (selectedList: ValueChangeDetails<T>) => void;
+    onValueChangeBase?: (selectedList: ValueChangeDetails<T>) => void;
+    contentZIndex?: string;
+}

package/dist/ui/elements/pinya-combobox/PinyaComboboxProps.js

@@ -0,0 +1 @@
+export {};

package/dist/ui/elements/text-chip/TextChip.svelte

@@ -0,0 +1,15 @@
+<script lang="ts">
+	import type { TextChipProps } from "./TextChipProps";
+
+	let { children, queryClass = "" }: TextChipProps = $props();
+</script>
+
+<span class={`chip text-chip font-bold pointer-events-none ${queryClass}`}>{@render children()}</span>
+
+<style>
+    /*noinspection CssUnusedSymbol*/
+    :global(.highlight-chip.text-chip) {
+        background-color: var(--color-secondary-500) /* oklch(55.6% 0 0deg) = #737373 */;
+        color: var(--color-secondary-contrast-500) /* var(--color-secondary-contrast-light) */;
+    }
+</style>

package/dist/ui/elements/text-chip/TextChip.svelte.d.ts

@@ -0,0 +1,4 @@
+import type { TextChipProps } from "./TextChipProps";
+declare const TextChip: import("svelte").Component<TextChipProps, {}, "">;
+type TextChip = ReturnType<typeof TextChip>;
+export default TextChip;

package/dist/ui/elements/text-chip/TextChipProps.d.ts

@@ -0,0 +1,4 @@
+import type { WrapperProps } from "../index";
+export interface TextChipProps extends WrapperProps {
+    queryClass?: string;
+}

package/dist/ui/elements/text-chip/TextChipProps.js

@@ -0,0 +1 @@
+export {};

package/dist/ui/elements/text-chip/index.d.ts

@@ -0,0 +1,2 @@
+export { default as TextChip } from "./TextChip.svelte";
+export * from "./TextChipProps";

package/dist/ui/elements/text-chip/index.js

@@ -0,0 +1,2 @@
+export { default as TextChip } from "./TextChip.svelte";
+export * from "./TextChipProps";

package/dist/ui/modules/index.d.ts

@@ -1 +1,2 @@
-export * from "./seaweed/index";
+export * from "./seaweed";
+export * from "./projects";

package/dist/ui/modules/index.js

@@ -1 +1,2 @@
-export * from "./seaweed/index";
+export * from "./seaweed";
+export * from "./projects";

package/dist/ui/modules/modals/general-settings/LanguagePicker.svelte

@@ -1,16 +1,16 @@
 <script lang="ts">
-	import { Combobox } from '@skeletonlabs/skeleton-svelte';
-	import { getLocale, localizeHref } from '../../../../paraglide/runtime';
+	import { getLocale, localizeHref } from "../../../../paraglide/runtime";
+	import PinyaCombobox from "../../../elements/pinya-combobox/PinyaCombobox.svelte";
 
 	interface ComboxData {
 		label: string;
-		value: 'en' | 'fr' | 'tl';
+		value: "en" | "fr" | "tl";
 	}
 
 	const comboboxData: ComboxData[] = [
-		{ label: 'English', value: 'en' },
-		{ label: 'French', value: 'fr' },
-		{ label: 'Tagalog', value: 'tl' }
+		{ label: "English", value: "en" },
+		{ label: "French", value: "fr" },
+		{ label: "Tagalog", value: "tl" }
 	];
 
 	let selectedCountry = $state([getLocale()]);
@@ -23,26 +23,16 @@
 		const data = comboboxData.find((d) => d.value === e.value[0]);
 		if (data) {
 			selectedCountry = [data.value];
-			location.href = localizeHref('./', { locale: data.value });
+			location.href = localizeHref("./", { locale: data.value });
 		}
 	};
 </script>
 
-<Combobox
-	width="w-full"
-	labelText="text-md"
-	inputGroupBase="w-full flex items-center border-primary-500 border-2 rounded-xl"
-	inputGroupInput="grow bg-transparent border-0 dark:placeholder-surface-50 pl-4"
-	inputGroupButton="size-[3rem]"
-	inputGroupArrow="size-[2rem] m-auto"
-	contentBackground="bg-surface-100-900 border-primary-500 border-2"
-	optionActive="bg-secondary-400-600"
-	optionHover="hover:brightness-75 dark:hover:brightness-125"
-	optionClasses='aria-selected:brightness-75 aria-selected:dark:brightness-125'
+<PinyaCombobox
 	data={comboboxData}
-	defaultValue={selectedCountry}
 	value={selectedCountry}
-	onValueChange={onValueChange}
+	defaultValue={selectedCountry}
 	label="Select Language"
 	placeholder="Select Language"
+	{onValueChange}
 />

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

@@ -0,0 +1,71 @@
+<script module lang="ts">
+	import HeaderHepCat from "../../../assets/temp/header-hep-cat.mp4";
+	import BitbucketIcon from "../../../assets/icons/bitbucket-icon.svg";
+	import type { ProjectComponentProps } from "../../templates/seaweed-layout/ProjectComponentProps";
+	import { FourPartCard } from "../../components/index.js";
+	import { ButtonVariant, ImageIcon, PinyaButton } from "../../elements/index.js";
+	import { ItchLogoHotLink } from "../../../consts.js";
+
+	const key = "Hepcat";
+	export { component, key };
+</script>
+
+{#snippet component(props: ProjectComponentProps)}
+	<FourPartCard>
+		{#snippet headerCover()}
+			<video playsinline autoplay muted loop preload="none" id="hepcat-video" class="game-video-cover">
+				<source src={HeaderHepCat} type="video/mp4">
+			</video>
+		{/snippet}
+
+		{#snippet header()}
+			<h3>Hepcat</h3>
+
+			<blockquote>
+				"Cats, Jazz, and a little bit of Death. What more could anyone ask for?"
+			</blockquote>
+		{/snippet}
+
+
+		<p>This is a course project made by a team of six for <a
+			href="https://sites.google.com/ualberta.ca/cmput250/">CMPUT 250</a>, and it won <a
+			href="https://webdocs.cs.ualberta.ca/~nathanst/certificate/">Game of the year.</a>
+		</p>
+
+		<p>
+			Hep Cat is a <span class="qt-rhythm">rhythm</span> game made in <a
+			href="https://www.rpgmakerweb.com/products/programs/rpg-maker-mv" target="_blank"
+			class='qt-rpgmaker'>
+			RPG Maker MV</a> with the help of additional custom-made <span class='qt-js'>Javascript</span>
+			plugins. I
+			wrote the rhythm game plugin's framework. For this plugin to work, I
+			had to write a <span class='qt-python'>Python</span> script that parses osu! files
+			into readable JSON
+			files.
+		</p>
+
+
+		<section class="game-link-section">
+			<PinyaButton
+				buttonVariant={ButtonVariant.Image}
+				title="https://bitbucket.org/egginchicken/hep-cat/src/master/"
+				onclick={()=> window.open("https://bitbucket.org/egginchicken/hep-cat/src/master/")}>
+				<ImageIcon alt="bitbucket icon" src={BitbucketIcon} />
+			</PinyaButton>
+			<PinyaButton
+				buttonVariant={ButtonVariant.Image}
+				title="https://just-a-phantom.itch.io/hep-cat"
+				onclick={()=> window.open("https://just-a-phantom.itch.io/hep-cat")}>
+				<ImageIcon alt="itch.io icon" src={ItchLogoHotLink}></ImageIcon>
+			</PinyaButton>
+		</section>
+	</FourPartCard>
+{/snippet}
+
+
+<style>
+    #hepcat-video {
+        object-position: top;
+        max-height: 64rem;
+    }
+</style>

package/dist/ui/modules/projects/Hepcat.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { ProjectComponentProps } from "../../templates/seaweed-layout/ProjectComponentProps";
+declare const key = "Hepcat";
+export { component, key };
+declare const component: (props: ProjectComponentProps) => ReturnType<import("svelte").Snippet>;
+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;
+}
+declare const Hepcat: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Hepcat = InstanceType<typeof Hepcat>;
+export default Hepcat;

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

@@ -0,0 +1,60 @@
+<script module lang="ts">
+	import HeaderPengi from "../../../assets/temp/header-pengi.mp4";
+	import GithubIcon from "../../../assets/icons/github-mark.svg";
+	import type { ProjectComponentProps } from "../../templates/index";
+	import { FourPartCard } from "../../components/index.js";
+	import { ButtonVariant, ImageIcon, PinyaButton } from "../../elements/index.js";
+	import { ItchLogoHotLink } from "../../../consts.js";
+
+	const key = "Pengi";
+	export { component, key };
+</script>
+
+{#snippet component(props: ProjectComponentProps)}
+	<FourPartCard>
+		{#snippet headerCover()}
+			<video class="rounded-t-xl max-h-64 not-prose object-cover w-full" playsinline autoplay muted loop preload="none">
+				video unavailable. original video contains pengi gameplay showing the dynamic dialog
+				layout and character animation.
+				<source src={HeaderPengi} type="video/mp4">
+			</video>
+		{/snippet}
+
+		{#snippet header()}
+			<h3>Pengi</h3>
+
+			<blockquote>
+				Well well, quite the dreamer, aren’t you? Might be hard to get in... costs a lot of
+				money...
+			</blockquote>
+		{/snippet}
+
+		<p>
+			Pengi is a text-based adventure made in <span class='qt-unity'>Unity</span> (<span class='qt-cs'>C#</span>). I
+			acted as the sole
+			programmer for the team. Most of the work revolves around UI and creating <a
+			href="https://yarnspinner.dev/" target="_blank">YarnSpinner</a> commands for writers
+			to use to create expressive stage directions in the script.
+		</p>
+
+		<section class="game-link-section">
+			<PinyaButton
+				buttonVariant={ButtonVariant.Image}
+				aria-label="Click to go to Project Pengi in Github"
+				title="https://github.com/GreenTea-M/ProjectPengi"
+				onclick={() => window.open("https://github.com/GreenTea-M/ProjectPengi")}
+			>
+				<ImageIcon alt="" aria-hidden="true" src={GithubIcon} />
+			</PinyaButton>
+			<PinyaButton
+				buttonVariant={ButtonVariant.Image}
+				aria-label="Click to go to Project Pengi in Itch.io"
+				title="https://turnipxenon.itch.io/pengi"
+				onclick={() => window.open("https://turnipxenon.itch.io/pengi")}
+			>
+				<ImageIcon alt="" aria-hidden="true" src={ItchLogoHotLink} />
+			</PinyaButton>
+		</section>
+
+	</FourPartCard>
+{/snippet}

package/dist/ui/modules/projects/Pengi.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { ProjectComponentProps } from "../../templates/index";
+declare const key = "Pengi";
+export { component, key };
+declare const component: (props: ProjectComponentProps) => ReturnType<import("svelte").Snippet>;
+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;
+}
+declare const Pengi: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Pengi = InstanceType<typeof Pengi>;
+export default Pengi;

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

@@ -0,0 +1,55 @@
+<script module lang="ts">
+	import HeaderSoulwork from '../../../assets/temp/header-soulwork.mp4';
+	import GithubIcon from '../../../assets/icons/github-mark.svg';
+	import type { ProjectComponentProps } from "../../templates/index";
+	import { FourPartCard } from "../../components/index";
+	import { ButtonVariant, ImageIcon, PinyaButton } from "../../elements/index.js";
+	import { ItchLogoHotLink } from "../../../consts.js";
+
+	const key = "Soulwork";
+	export { component, key };
+</script>
+
+{#snippet component(props: ProjectComponentProps)}
+	<FourPartCard>
+		{#snippet headerCover()}
+			<video
+				playsinline autoplay muted loop preload="none"
+				class="game-video-cover"
+			>
+				<source src={HeaderSoulwork} type="video/mp4">
+			</video>
+		{/snippet}
+
+		{#snippet header()}
+			<h1>Soulwork</h1>
+		{/snippet}
+
+		<p>
+			Soulwork is a 2D platforming game that uses unique physics to solve puzzle-based levels.
+			This project is a Time to Game Jam entry, restricting game development to be under 48
+			hours.
+		</p>
+		<p>
+			I helped make the level designing tools used by the designers to drag-and-drop objects
+			on the stage. I also helped program the unique physics-based gameplay mechanic. This was
+			was made in <span class="qt-unity">Unity</span> written using <span class="qt-cs">C#</span>.
+		</p>
+
+
+		<section class="game-link-section">
+			<PinyaButton
+				buttonVariant={ButtonVariant.Image}
+				title="https://github.com/Zeyu-Li/Clockwork"
+				onclick={()=> window.open("https://github.com/Zeyu-Li/Clockwork")}>
+				<ImageIcon alt="github icon" src={GithubIcon} />
+			</PinyaButton>
+			<PinyaButton
+				buttonVariant={ButtonVariant.Image}
+				title="https://itch.io/jam/time-to-game-jam-gadec-fall-game-jam/rate/514331"
+				onclick={()=> window.open("https://itch.io/jam/time-to-game-jam-gadec-fall-game-jam/rate/514331")}>
+				<ImageIcon alt="itch.io icon" src={ItchLogoHotLink} />
+			</PinyaButton>
+		</section>
+	</FourPartCard>
+{/snippet}

package/dist/ui/modules/projects/Soulwork.svelte.d.ts

@@ -0,0 +1,22 @@
+import type { ProjectComponentProps } from "../../templates/index";
+declare const key = "Soulwork";
+export { component, key };
+declare const component: (props: ProjectComponentProps) => ReturnType<import("svelte").Snippet>;
+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;
+}
+declare const Soulwork: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type Soulwork = InstanceType<typeof Soulwork>;
+export default Soulwork;

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

@@ -0,0 +1,62 @@
+<script module lang="ts">
+	import GithubIcon from '../../../assets/icons/github-mark.svg';
+	import ThisWebsiteFootage from '../../../assets/others/seaweed-showcase.mp4';
+	import type { ProjectComponentProps } from '../../templates/seaweed-layout/ProjectComponentProps';
+
+	const key = 'This Webpage';
+	export { component, key };
+</script>
+<script>
+	import { FourPartCard } from "../../components/index";
+	import { ButtonVariant, ImageIcon, PinyaButton, TextChip } from "../../elements/index.js";
+</script>
+
+{#snippet component(props: ProjectComponentProps)}
+	<FourPartCard>
+
+		{#snippet headerCover()}
+			<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>
+		{/snippet}
+
+		{#snippet header()}
+			<h2>This webpage!</h2>
+		{/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.
+		</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>
+			<TextChip queryClass="qt-tailwind">Tailwind 4</TextChip>
+			<TextChip queryClass="qt-skeleton">Skeleton (Svelte UI library)</TextChip>
+			<TextChip queryClass="qt-ts">Typescript</TextChip>
+			<TextChip queryClass="qt-vercel qt-cicd">Vercel</TextChip>
+			<TextChip queryClass="qt-gamedev">YarnSpinner</TextChip>
+			<TextChip queryClass="qt-postgres qt-db">Postgres (SQL database)</TextChip>
+			<TextChip queryClass="qt-prisma qt-db">Prisma ORM</TextChip>
+			<TextChip queryClass="qt-rest">RESTful API</TextChip>
+		</div>
+
+		<section class="game-link-section">
+			<PinyaButton
+				buttonVariant={ButtonVariant.Image}
+				title="https://github.com/TurnipXenon/pineapple"
+				onclick={() => window.open("https://github.com/TurnipXenon/pineapple")}>
+				<ImageIcon src={GithubIcon} class="long-btn-image" alt="github icon" />
+			</PinyaButton>
+		</section>
+	</FourPartCard>
+{/snippet}

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

@@ -0,0 +1,22 @@
+import type { ProjectComponentProps } from '../../templates/seaweed-layout/ProjectComponentProps';
+declare const key = "This Webpage";
+export { component, key };
+declare const component: (props: ProjectComponentProps) => ReturnType<import("svelte").Snippet>;
+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;
+}
+declare const ThisWebpage: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ThisWebpage = InstanceType<typeof ThisWebpage>;
+export default ThisWebpage;

package/dist/ui/modules/projects/index.d.ts

@@ -0,0 +1,4 @@
+export * as Hepcat from "./Hepcat.svelte";
+export * as Pengi from "./Pengi.svelte";
+export * as Soulwork from "./Soulwork.svelte";
+export * as ThisWebpage from "./ThisWebpage.svelte";

package/dist/ui/modules/projects/index.js

@@ -0,0 +1,4 @@
+export * as Hepcat from "./Hepcat.svelte";
+export * as Pengi from "./Pengi.svelte";
+export * as Soulwork from "./Soulwork.svelte";
+export * as ThisWebpage from "./ThisWebpage.svelte";

package/dist/ui/modules/seaweed/ChumBucket.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { type PageMeta } from "../../..";
 	import { onMount } from "svelte";
-	import { PinyaCard } from "../../elements/index";
 
 	let hasTriedGettingChumBucket = $state(false);
 	let pageMetaList: PageMeta[] = $state([]);
@@ -19,43 +18,42 @@
 	});
 </script>
 
-<PinyaCard
-	widthClass='max-w-3xl'>
-	<div class="chum-bucket">
-		<h2 class="text-start">More about me...</h2>
-		<p>Check out the latest things I've been rambling about at
-			<a href="https://turnipxenon.com" target="_blank">turnipxenon.com</a> or at
-			<a href="https://turnipxenon.com/blogs/coding-chagrin" target="_blank">turnipxenon.com/blogs/coding-chagrin.</a>
-		</p>
+<div class="chum-bucket">
+	<h2 class="text-start">More about me...</h2>
+	<p>Check out the latest things I've been rambling about at
+		<a href="https://turnipxenon.com" target="_blank">turnipxenon.com</a> or at
+		<a href="https://turnipxenon.com/blogs/coding-chagrin" target="_blank">turnipxenon.com/blogs/coding-chagrin.</a>
+	</p>
 
-		<div class="chum-bucket-grid">
-			{#if hasTriedGettingChumBucket}
-				{#each pageMetaList as pageMeta}
-					<div class="chum-bucket-item">
-						{#if pageMeta.imageUrl}
-							<img src={`https://turnipxenon.com${pageMeta.imageUrl}`}
-							     class="chum-bucket-image"
-							     alt={pageMeta.imageAlt}>
-						{/if}
-						<div>
-							<h3 class="text-start"><a href={`https://turnipxenon.com/${pageMeta.relativeLink}`}>{pageMeta.title}</a></h3>
-							<p>Published: {pageMeta.datePublished}
-								{#if pageMeta.lastUpdated}
-									| Last updated: {pageMeta.lastUpdated}
-								{/if}
-							</p>
-							<p>{pageMeta.description}</p>
-						</div>
+	<div class="chum-bucket-grid">
+		{#if hasTriedGettingChumBucket}
+			{#each pageMetaList as pageMeta}
+				<div class="chum-bucket-item">
+					{#if pageMeta.imageUrl}
+						<img src={`https://turnipxenon.com${pageMeta.imageUrl}`}
+						     class="chum-bucket-image"
+						     alt={pageMeta.imageAlt}>
+					{/if}
+					<div>
+						<h3 class="text-start">
+							<a href={`https://turnipxenon.com/${pageMeta.relativeLink}`}>{pageMeta.title}</a>
+						</h3>
+						<p>Published: {pageMeta.datePublished}
+							{#if pageMeta.lastUpdated}
+								| Last updated: {pageMeta.lastUpdated}
+							{/if}
+						</p>
+						<p>{pageMeta.description}</p>
 					</div>
-				{/each}
-			{:else}
-				{#each { length: 10 } as _}
-					<div class="placeholder"></div>
-				{/each}
-			{/if}
-		</div>
+				</div>
+			{/each}
+		{:else}
+			{#each { length: 10 } as _}
+				<div class="placeholder"></div>
+			{/each}
+		{/if}
 	</div>
-</PinyaCard>
+</div>
 
 <style>
     .chum-bucket-item {
@@ -72,10 +70,11 @@
         margin-inline-end: 1em;
     }
 
-
     .chum-bucket {
+		    margin-top: 2lh;
         padding: 1.5lh 0;
-		    width: 100%;
+        width: 100%;
+        max-width: var(--container-3xl);
     }
 
     .chum-bucket-grid {

package/dist/ui/templates/PinyaBase.svelte

@@ -1,11 +1,12 @@
 <script lang="ts">
-	import { ModeWatcher } from 'mode-watcher';
-	import { Modals } from 'svelte-modals';
-	import { page } from '$app/state';
-	import { locales, localizeHref } from '../../paraglide/runtime';
+	import { ModeWatcher } from "mode-watcher";
+	import { Modals } from "svelte-modals";
+	import { page } from "$app/state";
+	import { locales, localizeHref } from "../../paraglide/runtime";
 	import "../../styles/global.css";
 
-	import '../../styles/app.css';
+	import "../../styles/app.css";
+	import { ToastProvider } from "@skeletonlabs/skeleton-svelte";
 
 	let { children } = $props();
 </script>
@@ -22,7 +23,9 @@
 </Modals>
 <ModeWatcher defaultTheme="turnip" />
 
-{@render children()}
+<ToastProvider>
+	{@render children()}
+</ToastProvider>
 
 <!--invisible ink-->
 <div style="display:none">

package/dist/ui/templates/PinyaBase.svelte.d.ts

@@ -1,5 +1,5 @@
 import "../../styles/global.css";
-import '../../styles/app.css';
+import "../../styles/app.css";
 declare const PinyaBase: import("svelte").Component<{
     children: any;
 }, {}, "">;

package/dist/ui/templates/index.d.ts

@@ -1,3 +1,4 @@
 export { default as PinyaBase } from "./PinyaBase.svelte";
-export * from "./pinya-page-layout/index";
-export * from "./confirmation-modal/index";
+export * from "./pinya-page-layout";
+export * from "./seaweed-layout";
+export * from "./confirmation-modal";

package/dist/ui/templates/index.js

@@ -1,3 +1,4 @@
 export { default as PinyaBase } from "./PinyaBase.svelte";
-export * from "./pinya-page-layout/index";
-export * from "./confirmation-modal/index";
+export * from "./pinya-page-layout";
+export * from "./seaweed-layout";
+export * from "./confirmation-modal";