@turnipxenon/pineapple 5.0.0-alpha.9 → 5.1.0

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

@@ -11,7 +11,10 @@
 	import { ButtonVariant } from "../../elements/PinyaButtonCommon/ButtonVariant";
 
 	const key = "Soulwork";
-	export { component, key };
+	const dateStarted = "2019-11-09";
+	const dateFinished = "2019-11-10";
+	const tags = ["unity", "csharp", "game", "gamejam", "physics"];
+	export { component, key, dateStarted, dateFinished, tags };
 </script>
 
 {#snippet component(props: ProjectComponentProps)}

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

@@ -1,7 +1,10 @@
 import type { ProjectComponentProps } from "../../templates/SeaweedLayout";
 declare const component: (props: ProjectComponentProps) => ReturnType<import("svelte").Snippet>;
 declare const key = "Soulwork";
-export { component, key };
+declare const dateStarted = "2019-11-09";
+declare const dateFinished = "2019-11-10";
+declare const tags: string[];
+export { component, key, dateStarted, dateFinished, tags };
 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;

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

@@ -1 +1 @@
-{"version":3,"file":"Soulwork.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/modules/projects/Soulwork.svelte.ts"],"names":[],"mappings":"AAKC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AAM7E,QAAA,MAAM,SAAS,GAAyB,OAAO,qBAAqB,KAAqB,UAAU,CAAC,OAAO,QAAQ,EAAE,OAAO,CAiChG,CAAC;AAE7B,QAAA,MAAM,GAAG,aAAa,CAAC;AACvB,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC;AAS3B,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,QAAQ;;kBAA+E,CAAC;AAC5E,KAAK,QAAQ,GAAG,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAC;AAChD,eAAe,QAAQ,CAAC"}
+{"version":3,"file":"Soulwork.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/modules/projects/Soulwork.svelte.ts"],"names":[],"mappings":"AAKC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AAM7E,QAAA,MAAM,SAAS,GAAyB,OAAO,qBAAqB,KAAqB,UAAU,CAAC,OAAO,QAAQ,EAAE,OAAO,CAiChG,CAAC;AAE7B,QAAA,MAAM,GAAG,aAAa,CAAC;AACvB,QAAA,MAAM,WAAW,eAAe,CAAC;AACjC,QAAA,MAAM,YAAY,eAAe,CAAC;AAClC,QAAA,MAAM,IAAI,UAAoD,CAAC;AAC/D,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,WAAW,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC;AAS5D,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,QAAQ;;kBAA+E,CAAC;AAC5E,KAAK,QAAQ,GAAG,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAC;AAChD,eAAe,QAAQ,CAAC"}

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

@@ -3,6 +3,7 @@
 <script module lang="ts">
 	import GithubIcon from "../../../assets/icons/github-mark.svg";
 	import ThisWebsiteFootage from "../../../assets/others/seaweed-showcase.mp4";
+	import LinkIcon from "../../../assets/icons/link-icon.svg";
 	import type { ProjectComponentProps } from "../../templates/SeaweedLayout/ProjectComponentProps";
 	import { default as FourPartCard } from "../../components/FourPartCard.svelte";
 	import { default as ImageIcon } from "../../elements/ImageIcon.svelte";
@@ -11,7 +12,9 @@
 	import { ButtonVariant } from "../../elements/PinyaButtonCommon/ButtonVariant";
 
 	const key = "This Webpage";
-	export { component, key };
+	const dateStarted = "2023-06-01";
+	const tags = ["svelte", "typescript", "web", "tailwind", "postgres", "prisma", "ongoing", "database"];
+	export { component, key, dateStarted, tags };
 </script>
 
 {#snippet component(props: ProjectComponentProps)}
@@ -47,7 +50,7 @@
 			<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-typescript">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>
@@ -62,6 +65,14 @@
 				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")}>
+				<ImageIcon src={LinkIcon} aria-hidden />
+					<span>pineapple.turnipxenon.com</span>
+			</PinyaButton>
 		</section>
 	</FourPartCard>
 {/snippet}

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

@@ -1,7 +1,9 @@
 import type { ProjectComponentProps } from "../../templates/SeaweedLayout/ProjectComponentProps";
 declare const component: (props: ProjectComponentProps) => ReturnType<import("svelte").Snippet>;
 declare const key = "This Webpage";
-export { component, key };
+declare const dateStarted = "2023-06-01";
+declare const tags: string[];
+export { component, key, dateStarted, tags };
 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;

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":"AAKC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,uDAAuD,CAAC;AAMnG,QAAA,MAAM,SAAS,GAAyB,OAAO,qBAAqB,KAAqB,UAAU,CAAC,OAAO,QAAQ,EAAE,OAAO,CA4ChG,CAAC;AAE7B,QAAA,MAAM,GAAG,iBAAiB,CAAC;AAC3B,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC;AAS3B,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":"AAMC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,uDAAuD,CAAC;AAMnG,QAAA,MAAM,SAAS,GAAyB,OAAO,qBAAqB,KAAqB,UAAU,CAAC,OAAO,QAAQ,EAAE,OAAO,CAgDhG,CAAC;AAE7B,QAAA,MAAM,GAAG,iBAAiB,CAAC;AAC3B,QAAA,MAAM,WAAW,eAAe,CAAC;AACjC,QAAA,MAAM,IAAI,UAA2F,CAAC;AACtG,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;AAS9C,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/SettingsPanel.svelte

@@ -13,6 +13,7 @@ TODO: delete GeneralSettingsModal.svelte
 	import PineappleSwitch from "../../elements/PineappleSwitch.svelte";
 
 	import LanguagePicker from "../modals/general-settings/LanguagePicker.svelte";
+	import { appState } from "../../templates/index";
 	import {
 		getEnableDialogPreferenceContext,
 		getEnablePortraitContext
@@ -93,26 +94,30 @@ TODO: delete GeneralSettingsModal.svelte
 		</div>
 	</fieldset>
 
-	<LanguagePicker />
-
-	<div class="switch-default">
-		<PineappleSwitch
-			name="conversation-preference"
-			bind:checked={$enableDialogPreference}>
-		</PineappleSwitch>
-		<label for="conversation-preference">
-			Conversation preference: {$enableDialogPreference ? "Always on" : "Always off"}
-		</label>
-	</div>
-	<div class="switch-default">
-		<PineappleSwitch
-			name="portrait-preference"
-			bind:checked={$enablePortraitContext}>
-		</PineappleSwitch>
-		<label for="portrait-preference">
-			Show conversation portrait: {$enablePortraitContext ? "Always on" : "Always off"}
-		</label>
-	</div>
+	{#if appState.isLanguagePickerAvailable}
+		<LanguagePicker />
+	{/if}
+
+	{#if appState.allowDialog}
+		<div class="switch-default">
+			<PineappleSwitch
+				name="conversation-preference"
+				bind:checked={enableDialogPreference.value}>
+			</PineappleSwitch>
+			<label for="conversation-preference">
+				Conversation preference: {enableDialogPreference.value ? "Always on" : "Always off"}
+			</label>
+		</div>
+		<div class="switch-default">
+			<PineappleSwitch
+				name="portrait-preference"
+				bind:checked={enablePortraitContext.value}>
+			</PineappleSwitch>
+			<label for="portrait-preference">
+				Show conversation portrait: {enablePortraitContext.value ? "Always on" : "Always off"}
+			</label>
+		</div>
+	{/if}
 </div>
 
 <style>
@@ -149,7 +154,7 @@ TODO: delete GeneralSettingsModal.svelte
 
         #field-flex {
             display: flex;
-		        flex-wrap: wrap;
+            flex-wrap: wrap;
             gap: 1rem;
             padding: 0.25lh 1rem;
         }
@@ -170,8 +175,8 @@ TODO: delete GeneralSettingsModal.svelte
     }
 
     .switch-default {
-		    display: flex;
-		    justify-items: center;
-		    gap: 1em;
+        display: flex;
+        justify-items: center;
+        gap: 1em;
     }
 </style>

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":"AAmHA;;;;GAIG;AACH,QAAA,MAAM,aAAa,2DAAwC,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":"AAyHA;;;;GAIG;AACH,QAAA,MAAM,aAAa,2DAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

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

@@ -57,10 +57,10 @@ See panels:
 </script>
 
 <div class="dialog-elements"
-     hidden={isHidden}
+     aria-hidden={hidePercent >= (99 * 0.4)}
      style="--hidePercentWidth: -{hidePercent}vw;
             --hidePercentHeight: {hidePercentLinear}vh;">
-	<div class="dialog-portrait-container" class:is-portrait-enabled={$enablePortrait}>
+	<div class="dialog-portrait-container" class:is-portrait-enabled={enablePortrait.value}>
 		<img src={currentPortrait} alt="Ares" class="dialog-portrait" />
 	</div>
 	<div id="main-dialog-box-container">
@@ -163,6 +163,10 @@ See panels:
   position: fixed;
   z-index: 10;
 }
+.dialog-elements[aria-hidden=true] {
+  opacity: 0;
+  pointer-events: none;
+}
 
 .dialog-elements:dir(ltr) {
   left: 0;

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

@@ -3,9 +3,9 @@
 <script lang="ts">
 	import { dialogManager } from "../../..";
 	import AresLogo from "../../../assets/characters/ares/ares_logo.webp";
-	import SettingsLogo from "../../../assets/icons/icon-settings.svg";
-	import HamburgerIcon from "../../../assets/icons/icon-menu.svg";
 	import DialogIcon from "../../../assets/icons/icon-chat.svg";
+	import HamburgerIcon from "../../../assets/icons/icon-menu.svg";
+	import SettingsLogo from "../../../assets/icons/icon-settings.svg";
 
 	import { m } from "../../../external/paraglide/messages";
 	import { localizeHref } from "../../../external/paraglide/runtime";
@@ -16,7 +16,7 @@
 	import NavigationModal from "../../modules/modals/general-settings/NavigationModal.svelte";
 	import UniversalOverlay from "../../modules/universal-overlay/UniversalOverlay.svelte";
 	import { getEnableDialogOverlayContext } from "../../../util/context/pineappleBaseContextDefinitions.svelte";
-	import type { Snippet } from "svelte";
+	import { onMount, type Snippet } from "svelte";
 	import { modals } from "svelte-modals";
 	import PinyaButton from "../../elements/PinyaButton/PinyaButton.svelte";
 	import { appState } from "./pinyaPageLayoutRunes.svelte.js";
@@ -33,11 +33,16 @@
 		appBardEndStyle?: "classic" | "functional"
 	} = $props();
 
-	let enableUniversalOverlay = getEnableDialogOverlayContext();
+	let enableUniversalOverlay = $derived(getEnableDialogOverlayContext().value);
 
 	const onSettingsClick = () => {
 		modals.open(GeneralSettingsModal);
 	};
+
+	let isMounted = $state(false);
+	onMount(() => {
+		isMounted = true;
+	});
 </script>
 
 {#snippet header(extraClass: string)}
@@ -94,10 +99,12 @@
 				>
 					<ImageIcon src={SettingsLogo} aria-hidden="true" alt=""></ImageIcon>
 				</PinyaButton>
+				<!-- todo: investigate why enableUniversalOverlay is false here -->
 				<PinyaButton
 					title="Toggle conversation"
 					buttonVariant={ButtonVariant.Image}
-					colorScheme={enableUniversalOverlay.value ? ColorScheme.Secondary : undefined}
+					disabled={appState.allowDialog === false}
+					colorScheme={isMounted && enableUniversalOverlay && appState.allowDialog !== false ? ColorScheme.Secondary : undefined}
 					onclick={()=>{dialogManager.toggleDialogOverlay();}}
 				>
 					<ImageIcon src={DialogIcon} aria-hidden="true" alt=""></ImageIcon>
@@ -126,24 +133,28 @@
 
 
 <style>
-		:global {
+    :global {
+        .hidden {
+            opacity: 0;
+        }
+
         #header-action-wrapper {
-		        max-height: 2rem;
+            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;
-		            }
+                aspect-ratio: 1 / 1;
+                height: 100%;
+
+                & > img {
+                    padding: 0.3rem;
+                    height: 95%;
+                    aspect-ratio: 1 / 1;
+                    object-fit: contain;
+                }
             }
 
             .pinya-button {
@@ -151,10 +162,10 @@
             }
         }
 
-				:root {
-		      --default-page-container-margin: 4rem 1rem 0 1rem;
-				}
-		}
+        :root {
+            --default-page-container-margin: 4rem 1rem 0 1rem;
+        }
+    }
 
     header {
         top: 0;

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

@@ -1,4 +1,4 @@
-import type { Snippet } from "svelte";
+import { type Snippet } from "svelte";
 type $$ComponentProps = {
     children: Snippet;
     appBarLead?: Snippet;

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,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAKrC,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;AAyGH,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,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"}

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

@@ -1 +1 @@
-{"version":3,"file":"pinyaPageLayoutRunes.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/templates/PinyaPageLayout/pinyaPageLayoutRunes.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,UAAU,QAAQ;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,yBAAyB,EAAE,OAAO,CAAC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,SAAS,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,QAAQ,UAInB,CAAC"}
+{"version":3,"file":"pinyaPageLayoutRunes.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/templates/PinyaPageLayout/pinyaPageLayoutRunes.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,UAAU,QAAQ;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,yBAAyB,EAAE,OAAO,CAAC;IAInC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,SAAS,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,QAAQ,UAInB,CAAC"}

package/dist/ui/templates/SeaweedLayout/EntryGroup.svelte

@@ -1,42 +1,161 @@
 <!-- TODO: Documentation: consider documentation showcase -->
 
 <script lang="ts">
+	import SortDropdown from "../../components/SortDropdown.svelte";
+	import TagFilter from "../../components/TagFilter.svelte";
 	import { PinyaCard } from "../../elements/PinyaCard";
 	import type { ProjectGroup, SnippetMeta } from "./";
+	import { SectionType } from "./props";
 
 	let {
 		title,
 		entryList,
-		projectComponentProps
+		projectComponentProps,
+		// New props for Seaweed 3
+		sectionType = SectionType.Projects,
+		showFilter = false,
+		showSort = false,
+		showMoreLimit = 0
 	}: ProjectGroup = $props();
 
-	const isSpecial = $derived(entryList.length % 3 === 1);
+	// State
+	let selectedTags = $state<string[]>([]);
+	let sortBy = $state<string[]>(["default"]);
+	let isExpanded = $state(false);
 
-	let normalUiList: SnippetMeta[] = $derived(isSpecial
-		? [...entryList.slice(0, -4)]
-		: [...entryList]);
-	let overflowUiList: SnippetMeta[] = $derived(isSpecial
-		? [...entryList.slice(-4)]
-		: []);
+	// Derived values
+	const allTags = $derived([...new Set(entryList.flatMap(e => e.tags ?? []))]);
+
+	const filteredList = $derived(
+		selectedTags.length === 0
+			? entryList
+			: entryList.filter(e => e.tags?.some(t => selectedTags.includes(t)))
+	);
+
+	function sortEntries(list: SnippetMeta[], sort: string): SnippetMeta[] {
+		const sorted = [...list];
+		switch (sort) {
+			case "date-desc":
+				return sorted.sort((a, b) => {
+					// Entries without dateFinished go to the bottom
+					if (!a.dateFinished) return 1;
+					if (!b.dateFinished) return -1;
+					return new Date(b.dateFinished).getTime() - new Date(a.dateFinished).getTime();
+				});
+			case "date-asc":
+				return sorted.sort((a, b) => {
+					// Entries without dateFinished go to the bottom
+					if (!a.dateFinished) return 1;
+					if (!b.dateFinished) return -1;
+					return new Date(a.dateFinished).getTime() - new Date(b.dateFinished).getTime();
+				});
+			case "duration-desc":
+				return sorted.sort((a, b) => {
+					const durationA = getDuration(a);
+					const durationB = getDuration(b);
+					// Entries without valid dates go to the bottom
+					if (durationA === 0) return 1;
+					if (durationB === 0) return -1;
+					return durationB - durationA;
+				});
+			case "duration-asc":
+				return sorted.sort((a, b) => {
+					const durationA = getDuration(a);
+					const durationB = getDuration(b);
+					// Entries without valid dates go to the bottom
+					if (durationA === 0) return 1;
+					if (durationB === 0) return -1;
+					return durationA - durationB;
+				});
+			default:
+				return sorted;
+		}
+	}
+
+	function getDuration(entry: SnippetMeta): number {
+		if (!entry.dateStarted) return 0;
+
+		if (!entry.dateFinished) {
+			return new Date().getTime() - new Date(entry.dateStarted).getTime();
+		}
+
+		return new Date(entry.dateFinished).getTime() - new Date(entry.dateStarted).getTime();
+	}
+
+	const sortedList = $derived(sortEntries(filteredList, sortBy.length > 0 ? sortBy[0] : "default"));
+
+	const visibleList = $derived(
+		showMoreLimit > 0 && !isExpanded
+			? sortedList.slice(0, showMoreLimit)
+			: sortedList
+	);
+
+	const hasMore = $derived(showMoreLimit > 0 && sortedList.length > showMoreLimit);
 </script>
 
-<div class="mt-8 flex flex-col items-center">
+<div class="flex flex-col items-center entry-group-wrapper">
 	<PinyaCard class="group-header">
-		<h2 class="m-auto">{title}</h2>
+		<div class="header-content">
+			<h2>{title}</h2>
+			<div class="header-controls">
+				{#if showFilter && allTags.length > 0}
+					<TagFilter bind:selectedTags {allTags} />
+				{/if}
+				{#if showSort}
+					<SortDropdown bind:sortBy={sortBy} {sectionType} />
+				{/if}
+			</div>
+		</div>
 	</PinyaCard>
-	<div class="normal-project-container">
-		{#each normalUiList as ui (ui.key)}
-			{@render ui.component(projectComponentProps ?? {})}
-		{/each}
-	</div>
-	<div class="overflow-project-container">
-		{#each overflowUiList as ui (ui.key)}
-			{@render ui.component(projectComponentProps ?? {})}
-		{/each}
-	</div>
+
+	{#if sortedList.length === 0}
+		<div class="no-results">
+			<p>No items match your filter</p>
+		</div>
+	{:else}
+		<div class="normal-project-container">
+			{#each visibleList as ui (ui.key)}
+				{@render ui.component(projectComponentProps ?? {})}
+			{/each}
+		</div>
+
+		{#if hasMore}
+			<button class="show-more-btn" onclick={() => isExpanded = !isExpanded}>
+				{isExpanded ? "Show less" : `Click to see ${sortedList.length - visibleList.length} more...`}
+			</button>
+		{/if}
+	{/if}
 </div>
 
 <style>
+    .header-content {
+        display: flex;
+        flex-direction: column;
+        gap: 1rem;
+        width: 100%;
+    }
+
+    @media (min-width: 768px) {
+        .header-content {
+            flex-direction: row;
+            justify-content: space-between;
+            align-items: center;
+        }
+    }
+
+    .header-controls {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+
+    @media (min-width: 768px) {
+        .header-controls {
+            flex-direction: row;
+            gap: 1rem;
+        }
+    }
+
     .normal-project-container {
         display: flex;
         flex-wrap: wrap;
@@ -49,21 +168,50 @@
         align-items: start;
     }
 
-    .overflow-project-container {
-        display: flex;
-        flex-wrap: wrap;
-        gap: 2rem;
-        margin: auto;
-        /* 2 containers + 1 gap + extra rem */
-        max-width: calc((28rem * 2) + 3rem);
-        justify-content: center;
-        align-items: start;
+    :global {
+        .upper-section-style .normal-project-container > .pinya-four-part-card {
+            max-width: revert;
+            flex-grow: revert;
+            flex-basis: revert;
+        }
+
+        .normal-project-container > .pinya-four-part-card {
+            max-width: 30em;
+            flex-grow: 1;
+            flex-basis: 25em;
+        }
+    }
+
+    .show-more-btn {
+        margin-bottom: 1.5lh;
+        padding: 0.5rem 1rem;
+        border-radius: var(--radius-lg);
+        border: 2px solid var(--color-primary-500);
+        background: transparent;
+        cursor: pointer;
+        transition: background-color 0.2s;
+    }
+
+    .show-more-btn:hover {
+        background: var(--color-primary-100);
+    }
+
+    .no-results {
+        padding: 2rem;
+        text-align: center;
+        color: var(--color-text-secondary);
     }
 
     :global {
         .group-header.pinya-card {
             margin-bottom: calc(var(--spacing) * 8);
             max-width: unset;
+            width: 100%;
         }
     }
+
+    .entry-group-wrapper {
+        max-width: calc((28rem * 3) + 5rem);
+        width: 100%;
+    }
 </style>

package/dist/ui/templates/SeaweedLayout/EntryGroup.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"EntryGroup.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/templates/SeaweedLayout/EntryGroup.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,YAAY,EAAe,MAAM,iCAAiC,CAAC;AA4CjF,QAAA,MAAM,UAAU,kDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}
+{"version":3,"file":"EntryGroup.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/templates/SeaweedLayout/EntryGroup.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,KAAK,EAAE,YAAY,EAAe,MAAM,iCAAiC,CAAC;AAwIjF,QAAA,MAAM,UAAU,kDAAwC,CAAC;AACzD,KAAK,UAAU,GAAG,UAAU,CAAC,OAAO,UAAU,CAAC,CAAC;AAChD,eAAe,UAAU,CAAC"}

package/dist/ui/templates/SeaweedLayout/ProjectGroupConfig.svelte

@@ -102,7 +102,7 @@
 		};
 	});
 
-	let comboboxValue = $state(comboboxData[0].value);
+	let comboboxValue = $state([comboboxData[0].value]);
 
 	const addEntry = () => {
 		const c = allEntries.find(e => e.key === comboboxValue[0]);
@@ -205,11 +205,9 @@
 				<PinyaCombobox
 					class="project-group-config"
 					data={comboboxData}
-					defaultValue={comboboxValue}
 					bind:value={comboboxValue}
 					label="New entry"
 					placeholder="Add new entry"
-					contentZIndex="10"
 				/>
 			</td>
 		</tr>