@turnipxenon/pineapple 3.0.0-alpha-3 → 3.0.0-alpha.10

package/dist/components/blog_template/BlogTemplate.svelte

@@ -1,9 +1,11 @@
 <script lang="ts">
-	import { Card, enableDialogueOverlay, type SimplePageMeta } from "../..";
 	import "./blog-template.css";
 	import { enableBackground } from "../../store";
 	import { onDestroy, onMount } from "svelte";
 	import BlogTemplateInner from "./BlogTemplateInner.svelte";
+	import type { SimplePageMeta } from "../navigation_component/index";
+	import { enableDialogueOverlay } from "../dialog_manager/DialogManagerStore";
+	import { Card } from "../index";
 
 	// grab page meta from the adjacent meta.json
 	interface Props {

package/dist/components/blog_template/BlogTemplate.svelte.d.ts

@@ -1,5 +1,5 @@
-import { type SimplePageMeta } from "../..";
 import "./blog-template.css";
+import type { SimplePageMeta } from "../navigation_component/index";
 interface Props {
     pageMeta: SimplePageMeta;
     shouldFillWholePage?: boolean;

package/dist/components/blog_template/BlogTemplateInner.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import type { SimplePageMeta } from "../..";
+	import type { SimplePageMeta } from "../navigation_component/index";
 
 	interface Props {
 		pageMeta: SimplePageMeta;

package/dist/components/blog_template/BlogTemplateInner.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { SimplePageMeta } from "../..";
+import type { SimplePageMeta } from "../navigation_component/index";
 interface Props {
     pageMeta: SimplePageMeta;
     children?: import('svelte').Snippet;

package/dist/components/dialog_manager/DialogManagerStore.d.ts

@@ -4,7 +4,6 @@
  */
 import type { DialogMapStore } from "../../types/pineapple_fiber/DialogVariableStore";
 import type { DialogDetail } from "../../types/pineapple_fiber/DialogDetail";
-import { DialogManager } from "./DialogManager";
 /**
  * Enables the dialogue overlay
  *
@@ -24,17 +23,3 @@ export declare const enableDialogueOverlay: import("svelte/store").Writable<bool
 export declare const dialogVariableStore: DialogMapStore;
 export declare const updateRate: number;
 export declare const defaultDialogMessage: DialogDetail[];
-/**
- * strictly must be declared last! or you might receive a weird error that looks like:
- *
- * 2:04:21 AM [vite] Error when evaluating SSR module /src/lib/components/dialog_manager/DialogManagerStore.ts:
- * |- TypeError: Cannot read properties of undefined (reading '0')
- *     at <instance_members_initializer> (/src/lib/components/dialog_manager/DialogManager.ts:38:67)
- *     at new DialogManager (/src/lib/components/dialog_manager/DialogManager.ts:53:14)
- *     at eval (/src/lib/components/dialog_manager/DialogManagerStore.ts:15:23)
- *     at async instantiateModule (file:///C:/Users/Pumpkin/Projects/Web/pineapple/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:54360:9)
- *
- * what this means is that one member of dialogManager cannot be initialized. in our case, it was the
- * defaultDialogMessage not yet being initialized
- */
-export declare const dialogManager: DialogManager;

package/dist/components/dialog_manager/DialogManagerStore.js

@@ -4,7 +4,6 @@
  */
 import { createNewMapStore } from "../../types/pineapple_fiber/DialogVariableStore";
 import { writable } from "svelte/store";
-import { DialogManager } from "./DialogManager";
 /**
  * Enables the dialogue overlay
  *
@@ -29,17 +28,3 @@ export const defaultDialogMessage = [
         textContent: `<p>I don't really have anything to say. Have you drank water? Or perhaps, you've checked out <a target="_blank" class="external-link" href="http://crouton.net">one of the best webpages</a> out there?`
     }
 ];
-/**
- * strictly must be declared last! or you might receive a weird error that looks like:
- *
- * 2:04:21 AM [vite] Error when evaluating SSR module /src/lib/components/dialog_manager/DialogManagerStore.ts:
- * |- TypeError: Cannot read properties of undefined (reading '0')
- *     at <instance_members_initializer> (/src/lib/components/dialog_manager/DialogManager.ts:38:67)
- *     at new DialogManager (/src/lib/components/dialog_manager/DialogManager.ts:53:14)
- *     at eval (/src/lib/components/dialog_manager/DialogManagerStore.ts:15:23)
- *     at async instantiateModule (file:///C:/Users/Pumpkin/Projects/Web/pineapple/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:54360:9)
- *
- * what this means is that one member of dialogManager cannot be initialized. in our case, it was the
- * defaultDialogMessage not yet being initialized
- */
-export const dialogManager = new DialogManager();

package/dist/components/dialog_manager/DialogMangerInit.d.ts

@@ -0,0 +1,15 @@
+import { DialogManager } from "./DialogManager";
+/**
+ * strictly must be declared last! or you might receive a weird error that looks like:
+ *
+ * 2:04:21 AM [vite] Error when evaluating SSR module /src/lib/components/dialog_manager/DialogManagerStore.ts:
+ * |- TypeError: Cannot read properties of undefined (reading '0')
+ *     at <instance_members_initializer> (/src/lib/components/dialog_manager/DialogManager.ts:38:67)
+ *     at new DialogManager (/src/lib/components/dialog_manager/DialogManager.ts:53:14)
+ *     at eval (/src/lib/components/dialog_manager/DialogManagerStore.ts:15:23)
+ *     at async instantiateModule (file:///C:/Users/Pumpkin/Projects/Web/pineapple/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:54360:9)
+ *
+ * what this means is that one member of dialogManager cannot be initialized. in our case, it was the
+ * defaultDialogMessage not yet being initialized
+ */
+export declare const dialogManager: DialogManager;

package/dist/components/dialog_manager/DialogMangerInit.js

@@ -0,0 +1,15 @@
+import { DialogManager } from "./DialogManager";
+/**
+ * strictly must be declared last! or you might receive a weird error that looks like:
+ *
+ * 2:04:21 AM [vite] Error when evaluating SSR module /src/lib/components/dialog_manager/DialogManagerStore.ts:
+ * |- TypeError: Cannot read properties of undefined (reading '0')
+ *     at <instance_members_initializer> (/src/lib/components/dialog_manager/DialogManager.ts:38:67)
+ *     at new DialogManager (/src/lib/components/dialog_manager/DialogManager.ts:53:14)
+ *     at eval (/src/lib/components/dialog_manager/DialogManagerStore.ts:15:23)
+ *     at async instantiateModule (file:///C:/Users/Pumpkin/Projects/Web/pineapple/node_modules/vite/dist/node/chunks/dep-934dbc7c.js:54360:9)
+ *
+ * what this means is that one member of dialogManager cannot be initialized. in our case, it was the
+ * defaultDialogMessage not yet being initialized
+ */
+export const dialogManager = new DialogManager();

package/dist/components/dialog_manager/behavior_tree/line_processors/commands/JumpCommand.js

@@ -1,7 +1,7 @@
 import { BehaviorStatus } from "../../core/BehaviorStatus";
 import { SetVariableNode } from "../SetVariableNode";
-import { dialogManager } from "../../../DialogManagerStore";
 import { btreeUtils } from "../../core/BTreeUtils";
+import { dialogManager } from "../../../DialogMangerInit";
 export class JumpCommand {
     setVariableNode = new SetVariableNode();
     process(nodeArgs) {

package/dist/components/dialog_overlay/DialogOverlay.svelte

@@ -1,8 +1,8 @@
 <script lang="ts">
 	import AresHappy from "../../assets/characters/ares/ares_happy.webp";
 	import { onMount } from "svelte";
-	import { dialogManager } from "../dialog_manager/DialogManagerStore";
 	import { DialogState } from "../../types/pineapple_fiber/DialogState";
+	import { dialogManager } from "../dialog_manager/DialogMangerInit";
 
 	let currentMessage = $state("");
 	dialogManager.currentMessage.subscribe((value) => {

package/dist/components/index.d.ts

@@ -3,6 +3,6 @@ export { default as Card } from "./Card.svelte";
 export { default as Chip } from "./chip/Chip.svelte";
 export { default as PineappleSlideToggle } from "./PineappleSlideToggle.svelte";
 export { default as SocialSection } from "../ui/components/SocialSection.svelte";
-export { default as ElementVisbilityDetector } from "./ElementVisbilityDetector.svelte";
+export { default as ElementVisibilityDetector } from "../ui/elements/ElementVisibilityDetector.svelte";
 export { default as BlogTemplate } from "./blog_template/BlogTemplate.svelte";
 export { default as DialogOverlay } from "./dialog_overlay/DialogOverlay.svelte";

package/dist/components/index.js

@@ -4,6 +4,6 @@ export { default as Card } from "./Card.svelte";
 export { default as Chip } from "./chip/Chip.svelte";
 export { default as PineappleSlideToggle } from "./PineappleSlideToggle.svelte";
 export { default as SocialSection } from "../ui/components/SocialSection.svelte";
-export { default as ElementVisbilityDetector } from "./ElementVisbilityDetector.svelte";
+export { default as ElementVisibilityDetector } from "../ui/elements/ElementVisibilityDetector.svelte";
 export { default as BlogTemplate } from "./blog_template/BlogTemplate.svelte";
 export { default as DialogOverlay } from "./dialog_overlay/DialogOverlay.svelte";

package/dist/components/layouts/SeaweedBaseLayout.svelte

@@ -27,8 +27,6 @@
 		children
 	}: Props = $props();
 
-	$inspect("inside: should display:", shouldDisplayLeadingIcons, !!extraLeadingIcons);
-
 	$effect(() => {
 		if (extraLeadingIcons && shouldDisplayLeadingIcons) {
 			appState.lead = extraLeadingIcons;

package/dist/components/navigation_component/NavigationComponent.svelte

@@ -1,7 +1,8 @@
 <script lang="ts">
 	import NavigationControl from "./NavigationControl.svelte";
-	import { Card, createGoToFunction } from "../..";
 	import { parsePageMeta, type ParsePageMetaCompareFn } from "./PageMeta";
+	import { Card } from "../index";
+	import { createGoToFunction } from "../../util/util";
 
 
 	

package/dist/components/navigation_component/NavigationControl.svelte

@@ -2,7 +2,7 @@
 	import { onMount } from "svelte";
 	import { page } from "$app/state";
 
-	import { Card } from "../..";
+	import { Card } from "../index";
 	import { goto } from "$app/navigation";
 
 	interface Props {

package/dist/components/pineapple/PineappleBaseLayout.svelte

@@ -16,10 +16,11 @@
 	import AresLogo from "../../assets/characters/ares/ares_logo.webp";
 	import FABIcon from "../../assets/bg_tiled/bg_tiled_turnip.png";
 	import CloseIcon from "../../assets/icons/close.svg";
-	import { dialogManager, enableDialogueOverlay } from "../dialog_manager/DialogManagerStore";
+	import { enableDialogueOverlay } from "../dialog_manager/DialogManagerStore";
 	import Toast from "./toast/Toast.svelte";
 	import DialogOverlay from "../dialog_overlay/DialogOverlay.svelte";
 	import { fade } from "svelte/transition";
+	import { dialogManager } from "../dialog_manager/DialogMangerInit";
 
 	interface Props {
 		showDialogByDefault?: boolean;

package/dist/index.d.ts

@@ -11,3 +11,4 @@ export * from "./types/pineapple_fiber/DialogDetail";
 export * from "./util/util";
 export * from "./api/index";
 export * from "./template/seaweed/index";
+export { dialogManager } from "./components/dialog_manager/DialogMangerInit";

package/dist/index.js

@@ -12,3 +12,4 @@ export * from "./types/pineapple_fiber/DialogDetail";
 export * from "./util/util";
 export * from "./api/index";
 export * from "./template/seaweed/index";
+export { dialogManager } from "./components/dialog_manager/DialogMangerInit";

package/dist/styles/turnip-theme.css

@@ -237,89 +237,89 @@ html.dark {
         @variant dark {
             color: var(--color-surface-950);
         }
+        /* endregion components */
+    }
+}
 
-        blockquote {
-            @apply mb-4;
-            font-style: italic;
-            border: 0;
-            text-align: center;
-            filter: brightness(140%);
-        }
 
-        h1, h2, h3, h4, h5, h6, .fake-h2, .fake-h3, .fake-h4 {
-            text-align: center;
-            margin-top: 0;
-            font-weight: bolder;
-            color: var(--color-primary-900);
+blockquote {
+    @apply mb-4;
+    font-style: italic;
+    border: 0;
+    text-align: center;
+    filter: brightness(140%);
+}
 
-            @variant dark {
-                color: var(--color-primary-100);
-            }
-        }
+h1, h2, h3, h4, h5, h6, .fake-h2, .fake-h3, .fake-h4 {
+    text-align: center;
+    margin-top: 0;
+    font-weight: bolder;
+    color: var(--color-primary-900);
 
-        h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p, .fake-h2 + p, .fake-h3 + p, .fake-h4 + p {
-            margin-top: 0.5lh;
-        }
+    @variant dark {
+        color: var(--color-primary-100);
+    }
+}
 
-        h1 {
-            @apply text-4xl;
-        }
+h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p, .fake-h2 + p, .fake-h3 + p, .fake-h4 + p {
+    margin-top: 0.5lh;
+}
 
-        h2, .fake-h2 {
-            @apply text-3xl;
-        }
+h1 {
+    @apply text-4xl;
+}
 
-        h3, .fake-h3 {
-            @apply text-2xl;
-        }
+h2, .fake-h2 {
+    @apply text-3xl;
+}
 
-        h4, .fake-h4 {
-            @apply text-xl;
-        }
+h3, .fake-h3 {
+    @apply text-2xl;
+}
 
-        h5 {
-            @apply text-lg;
-        }
+h4, .fake-h4 {
+    @apply text-xl;
+}
 
-        h6 {
-            text-decoration: underline;
-        }
+h5 {
+    @apply text-lg;
+}
 
-        a {
-            text-decoration: underline;
-            color: var(--color-secondary-500);
+h6 {
+    text-decoration: underline;
+}
 
-            @variant dark {
-                color: var(--color-secondary-300);
-            }
-        }
+a {
+    text-decoration: underline;
+    color: var(--color-secondary-500);
 
-        a:hover, a:focus {
-            filter: brightness(150%);
-        }
+    @variant dark {
+        color: var(--color-secondary-300);
+    }
+}
 
-        a:visited {
-            color: var(--color-secondary-950);
+a:hover, a:focus {
+    filter: brightness(150%);
+}
 
-            @variant dark {
-                color: var(--color-secondary-200);
-            }
-        }
+a:visited {
+    color: var(--color-secondary-950);
 
-        ul {
-            list-style: inside;
-        }
+    @variant dark {
+        color: var(--color-secondary-200);
+    }
+}
 
-        ol {
-            list-style: decimal inside;
-        }
+ul {
+    list-style: inside;
+}
 
-        p{
-            @apply mb-3;
-        }
+ol {
+    list-style: decimal inside;
+}
 
-        /* endregion components */
-    }
+p{
+    @apply mb-3;
 }
 
 @theme {

package/dist/template/seaweed/entries/ThisWebpage.svelte

@@ -3,7 +3,7 @@
 	import Card from "../../../components/Card.svelte";
 	import GithubIcon from "../../../assets/icons/github-mark.svg";
 	import ThisWebsiteFootage from "../../../assets/others/seaweed-showcase.mp4";
-	import { Chip } from "../../..";
+	import { Chip } from "../../../components/index";
 
 	// noinspection JSUnusedGlobalSymbols
 	interface Props {

package/dist/template/seaweed/entries/WorkExperience.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 	import SocialSection from "../../../ui/components/SocialSection.svelte";
 	import Card from "../../../components/Card.svelte";
-	import ElementVisibilityDetector from "../../../components/ElementVisbilityDetector.svelte";
+	import ElementVisibilityDetector from "../../../ui/elements/ElementVisibilityDetector.svelte";
 	import type { EntryProps } from "./EntryProps";
 
 	interface Props {

package/dist/ui/components/SocialSection.svelte

@@ -63,7 +63,9 @@
 			<PinyaButton
 				buttonVariant={ButtonVariant.SmallIcon}
 				title="https://turnipxenon.itch.io/"
-				onclick={() => window.open("https://turnipxenon.itch.io/")}>
+				onclick={() => window.open("https://turnipxenon.itch.io/")}
+				classes="h-full"
+			>
 				<ImageIcon src={ItchLogoHotLink} alt="itch icon" />
 				{#if (!isSmallVersion)}
 					<span>TurnipXenon</span>
@@ -83,5 +85,6 @@
         flex-wrap: wrap;
         justify-content: var(--preferred-justify-content);
         gap: 0.7rem;
+		    align-items: stretch;
     }
 </style>

package/dist/ui/components/accordion/PinyaAccordion.svelte

@@ -0,0 +1,21 @@
+<script lang="ts">
+	import { Accordion } from "@skeletonlabs/skeleton-svelte";
+	import type { Snippet } from "svelte";
+
+	let {
+		value = $bindable(),
+		children,
+	}: {
+		value: string[],
+		children: Snippet,
+	} = $props();
+</script>
+
+<Accordion
+	classes="bg-primary-100 dark:bg-tertiary-900 dark:saturate-75"
+	{value}
+	onValueChange={(e) => (value = e.value)}
+	collapsible
+>
+	{@render children()}
+</Accordion>

package/dist/ui/components/accordion/PinyaAccordion.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    value: string[];
+    children: Snippet;
+};
+declare const PinyaAccordion: import("svelte").Component<$$ComponentProps, {}, "value">;
+type PinyaAccordion = ReturnType<typeof PinyaAccordion>;
+export default PinyaAccordion;

package/dist/ui/components/accordion/PinyaAccordionItem.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	// noinspection ES6UnusedImports
+	import { Accordion } from "@skeletonlabs/skeleton-svelte";
+	import type { Snippet } from "svelte";
+
+	let {
+		value,
+		control: controlSnippet,
+		panel: panelSnippet,
+	}: {
+		value: string,
+		control: Snippet;
+		panel: Snippet;
+	} = $props();
+</script>
+
+<Accordion.Item
+	{value}
+	controlHover="hover:bg-primary-500 dark:hover:bg-secondary-600"
+>
+	<!-- Control -->
+	{#snippet control()}
+		{@render controlSnippet()}
+	{/snippet}
+	<!-- Panel -->
+	{#snippet panel()}
+		{@render panelSnippet()}
+	{/snippet}
+</Accordion.Item>

package/dist/ui/components/accordion/PinyaAccordionItem.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    value: string;
+    control: Snippet;
+    panel: Snippet;
+};
+declare const PinyaAccordionItem: import("svelte").Component<$$ComponentProps, {}, "">;
+type PinyaAccordionItem = ReturnType<typeof PinyaAccordionItem>;
+export default PinyaAccordionItem;

package/dist/ui/components/accordion/index.d.ts

@@ -0,0 +1,2 @@
+export { default as PinyaAccordion } from "./PinyaAccordion.svelte";
+export { default as PinyaAccordionItem } from "./PinyaAccordionItem.svelte";

package/dist/ui/components/accordion/index.js

@@ -0,0 +1,2 @@
+export { default as PinyaAccordion } from "./PinyaAccordion.svelte";
+export { default as PinyaAccordionItem } from "./PinyaAccordionItem.svelte";

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

@@ -1,3 +1,4 @@
 export { default as ModalBase } from "./ModalBase.svelte";
 export { default as FourPartCard } from "./FourPartCard.svelte";
 export { default as SocialSection } from "./SocialSection.svelte";
+export * from "./accordion";

package/dist/ui/components/index.js

@@ -1,3 +1,4 @@
 export { default as ModalBase } from "./ModalBase.svelte";
 export { default as FourPartCard } from "./FourPartCard.svelte";
 export { default as SocialSection } from "./SocialSection.svelte";
+export * from "./accordion";

package/dist/{components/ElementVisbilityDetector.svelte → ui/elements/ElementVisibilityDetector.svelte}

@@ -1,12 +1,15 @@
 <script lang="ts">
-    import {onMount} from "svelte";
+	import { onMount, type Snippet } from "svelte";
 
     interface Props {
         isVisible?: boolean;
-        children?: import('svelte').Snippet;
+        children?: Snippet;
     }
 
-    let { isVisible = $bindable(true), children }: Props = $props();
+    let {
+			isVisible = $bindable(true),
+	    children
+		}: Props = $props();
 
     let stickyElem: HTMLElement = $state();
 

package/dist/ui/elements/ElementVisibilityDetector.svelte.d.ts

@@ -0,0 +1,8 @@
+import { type Snippet } from "svelte";
+interface Props {
+    isVisible?: boolean;
+    children?: Snippet;
+}
+declare const ElementVisibilityDetector: import("svelte").Component<Props, {}, "isVisible">;
+type ElementVisibilityDetector = ReturnType<typeof ElementVisibilityDetector>;
+export default ElementVisibilityDetector;

package/dist/ui/elements/Placeholder.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+	let {
+		isCircle = false,
+		classes = '',
+	}: {
+		isCircle?: boolean;
+		classes?: string;
+	} = $props();
+</script>
+
+<div
+	class="
+	{isCircle ?'placeholder-circle' : 'placeholder'}
+	animate-pulse bg-surface-600 dark:bg-surface-800
+	{classes}
+"
+></div>

package/dist/ui/elements/Placeholder.svelte.d.ts

@@ -0,0 +1,7 @@
+type $$ComponentProps = {
+    isCircle?: boolean;
+    classes?: string;
+};
+declare const Placeholder: import("svelte").Component<$$ComponentProps, {}, "">;
+type Placeholder = ReturnType<typeof Placeholder>;
+export default Placeholder;

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

@@ -1,5 +1,6 @@
 export { default as ImageIcon } from "./ImageIcon.svelte";
 export { default as TextLink } from "./TextLink.svelte";
+export { default as ElementVisibilityDetector } from "./ElementVisibilityDetector.svelte";
 export * from "./ColorScheme";
 export * from "./GeneralUIProps";
 export * from "./OnBackground";

package/dist/ui/elements/index.js

@@ -1,5 +1,6 @@
 export { default as ImageIcon } from "./ImageIcon.svelte";
 export { default as TextLink } from "./TextLink.svelte";
+export { default as ElementVisibilityDetector } from "./ElementVisibilityDetector.svelte";
 export * from "./ColorScheme";
 export * from "./GeneralUIProps";
 export * from "./OnBackground";

package/dist/ui/elements/pinya-button/component.svelte

@@ -8,6 +8,7 @@
 		paddingClass = '',
 		buttonVariant = ButtonVariant.Default,
 		colorClass = '',
+		classes = '',
 		...props
 	}: PinyaButtonProps = $props();
 
@@ -41,7 +42,7 @@
 <button
 	{...props}
 	class:small-icon-button={buttonVariant === ButtonVariant.SmallIcon}
-	class={`btn rounded-2xl text-xl font-bold ${tailwindClass} ${paddingClass}`}
+	class={`btn rounded-2xl text-xl font-bold ${tailwindClass} ${paddingClass} ${classes}`}
 >
 	{@render children()}
 </button>

package/dist/ui/elements/pinya-button/props.d.ts

@@ -10,4 +10,5 @@ export type PinyaButtonProps = WrapperProps & HTMLButtonAttributes & GeneralUIPr
     paddingClass?: string;
     buttonVariant?: ButtonVariant;
     colorClass?: string;
+    classes?: string;
 };

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

@@ -1,6 +1,7 @@
 <script lang="ts">
-	import { type PageMeta } from "../../..";
+	import { type PageMeta } from "../../../components/navigation_component/index";
 	import { onMount } from "svelte";
+	import Placeholder from "../../elements/Placeholder.svelte";
 
 	let hasTriedGettingChumBucket = $state(false);
 	let pageMetaList: PageMeta[] = $state([]);
@@ -27,7 +28,7 @@
 
 	<div class="chum-bucket-grid">
 		{#if hasTriedGettingChumBucket}
-			{#each pageMetaList as pageMeta}
+			{#each pageMetaList as pageMeta (pageMeta.title)}
 				<div class="chum-bucket-item">
 					{#if pageMeta.imageUrl}
 						<img src={`https://turnipxenon.com${pageMeta.imageUrl}`}
@@ -48,8 +49,8 @@
 				</div>
 			{/each}
 		{:else}
-			{#each { length: 10 } as _}
-				<div class="placeholder"></div>
+			{#each { length: 10 } as _, idx (idx)}
+				<Placeholder classes="mb-2" />
 			{/each}
 		{/if}
 	</div>

package/dist/ui/templates/pinya-page-layout/component.svelte

@@ -8,7 +8,7 @@
 	import { modals } from "svelte-modals";
 	import GeneralSettingsModal from "../../modules/modals/general-settings/GeneralSettingsModal.svelte";
 	import { localizeHref } from "../../../paraglide/runtime";
-	import { appState } from "..";
+	import { appState } from "./runes.svelte";
 
 	let {
 		children,

package/dist/ui/templates/seaweed-layout/EntryGroup.svelte

@@ -7,14 +7,14 @@
 		entryList
 	}: ProjectGroup = $props();
 
-	const isSpecial = entryList.length % 3 === 1;
+	const isSpecial = $derived(entryList.length % 3 === 1);
 
-	let normalUiList: SnippetMeta[] = isSpecial
+	let normalUiList: SnippetMeta[] = $derived(isSpecial
 		? [...entryList.slice(0, -4)]
-		: [...entryList];
-	let overflowUiList: SnippetMeta[] = isSpecial
+		: [...entryList]);
+	let overflowUiList: SnippetMeta[] = $derived(isSpecial
 		? [...entryList.slice(-4)]
-		: [];
+		: []);
 
 
 	// <!--todo: implement in seaweedlayout #migration-->

package/dist/ui/templates/seaweed-layout/SeaweedLayout.svelte

@@ -1,5 +1,6 @@
 <script lang="ts">
-	import type { SeaweedLayoutProps } from "./props";
+	import { fly } from "svelte/transition";
+	import type { ProjectGroup, SeaweedLayoutProps } from "./props";
 	import ChumBucket from "../../modules/seaweed/ChumBucket.svelte";
 	import { PinyaPageLayout } from "../index";
 	import { SocialSection } from "../../components/index";
@@ -9,17 +10,22 @@
 	import { SvelteMap } from "svelte/reactivity";
 	import EntryOrderConfig2 from "./EntryOrderConfig2.svelte";
 	import CreateUrlForm from "../../../template/seaweed/CreateUrlForm.svelte";
+	import { onMount } from "svelte";
+	import { page } from "$app/state";
 
 	let {
 		children,
 		sideSection,
 		entryList, // todo
-		layout = $bindable(), // todo
+		layout, // todo
 		domain = "http://localhost:5173/seaweed2",
-		queryTerms
+		queryTerms,
+		showMiniSocial = false,
+		serverParams = ""
 	}: SeaweedLayoutProps = $props();
 
-	let isAdvanceSettingOn = $state(true);
+	let actualLayout = $state(layout);
+	let isAdvanceSettingOn = $state(false);
 	let orderUrl = $state("");
 
 	let queryStates = new SvelteMap<string, boolean>(queryTerms.map(term => [term, true]));
@@ -47,8 +53,8 @@
 		const chipList: string[] = [];
 		const termList: string[] = [];
 		queryStates.entries()
-			.filter(([_, state]) => state)
-			.forEach(([term, state], idx) => {
+			.filter(([, state]) => state)
+			.forEach(([term]) => {
 				const qtTerm = `.qt-${term}`;
 				termList.push(qtTerm);
 				chipList.push(`.text-chip${qtTerm}`);
@@ -78,6 +84,74 @@
 	});
 
 	let advancedUrl = $derived.by(() => `${domain}/?${advancedQuery}`);
+
+
+	/** qt values and what they mean:
+	 *  undefined: set all qt terms to font-weight: bold
+	 *  todo: implement clear
+	 *  clear: unset all terms to font-weight: normal
+	 *  <term>: only set qt-<term> to bold
+	 *  <term1>,<term2>: only set qt-<term1> and qt-<term2> to bold,
+	 *
+	 *  ONLY CALL INSIDE onMount()
+	 **/
+	const filterSearchParams = (searchParams: URLSearchParams) => {
+		// region Order
+		const orderParam = searchParams.get("order")?.trim();
+		console.log(searchParams);
+		console.log(orderParam);
+		if (orderParam) {
+			actualLayout = [];
+
+			orderParam.split(",").forEach((groupDefinition, idx) => {
+				const pair = groupDefinition.split(":");
+				if (pair.length >= 2) {
+					const group: ProjectGroup = {
+						title: pair[0],
+						entryList: [],
+						key: `${pair[0]}-${idx}`
+					};
+
+					pair[1].split("|").forEach(key => {
+						const component = entryList.find(e => e.key === key);
+						if (component) {
+							group.entryList.push(component);
+						}
+					});
+
+					actualLayout.push(group);
+				}
+			});
+
+			actualLayout = [...actualLayout];
+			console.log(actualLayout);
+		}
+		// endregion
+
+		// region Bold terms
+		const qtValue = searchParams.get("qt")?.trim();
+		if (qtValue !== undefined) {
+			queryStates.keys()
+				.forEach(key => queryStates.set(key, false));
+
+			if (qtValue !== "clear") {
+				qtValue.split(",").forEach((term) => {
+					if (queryStates.has(term)) {
+						queryStates.set(term, true);
+					}
+				});
+			}
+		}
+		// endregion Bold terms
+	};
+
+	onMount(() => {
+		if (serverParams) {
+			filterSearchParams(new URLSearchParams(serverParams));
+		} else if (page.url.searchParams.size) {
+			filterSearchParams(page.url.searchParams);
+		}
+	});
 </script>
 
 <svelte:head>
@@ -90,7 +164,14 @@
 {/snippet}
 <PinyaPageLayout>
 	{#snippet appBarLead()}
-		<div></div>
+		{#if showMiniSocial}
+			<div
+				class="flex flex-row"
+				transition:fly={{x:-10}}
+			>
+				<SocialSection isSmallVersion={true} />
+			</div>
+		{/if}
 	{/snippet}
 
 	<div id="upper-section">
@@ -105,7 +186,7 @@
 	</div>
 
 	<!--todo: render list #migration-->
-	{#each layout as group (group.title)}
+	{#each actualLayout as group (group.title)}
 		<EntryGroup {...group}></EntryGroup>
 	{/each}
 
@@ -143,7 +224,7 @@
 					</div>
 
 					<EntryOrderConfig2
-						{layout}
+						bind:layout={actualLayout}
 						bind:orderUrl={orderUrl}
 						allEntries={entryList}
 					></EntryOrderConfig2>

package/dist/ui/templates/seaweed-layout/SeaweedLayout.svelte.d.ts

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

package/dist/ui/templates/seaweed-layout/props.d.ts

@@ -21,5 +21,7 @@ export interface SeaweedLayoutProps {
     entryList: SnippetMeta[];
     layout: ProjectGroup[];
     queryTerms: string[];
+    showMiniSocial?: boolean;
+    serverParams?: string;
 }
 export {};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@turnipxenon/pineapple",
   "description": "personal package for base styling for other personal projects",
-  "version": "3.0.0-alpha-3",
+  "version": "3.0.0-alpha.10",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build && yarn package",
@@ -18,21 +18,25 @@
     "to-dev": "git checkout main && git pull origin main && git branch -d turnip/dev && git checkout -b turnip/dev"
   },
   "devDependencies": {
-    "@sveltejs/adapter-auto": "^3.1.1",
+    "@eslint/compat": "^1.2.5",
+    "@eslint/js": "^9.18.0",
+    "@sveltejs/adapter-auto": "^4.0.0",
     "@sveltejs/kit": "^2.5.27",
     "@sveltejs/package": "^2.3.7",
-    "@typescript-eslint/eslint-plugin": "^5.45.0",
-    "@typescript-eslint/parser": "^5.45.0",
-    "eslint": "^8.28.0",
-    "eslint-config-prettier": "^8.5.0",
-    "eslint-plugin-svelte3": "^4.0.0",
-    "prettier": "^3.2.5",
-    "prettier-plugin-svelte": "^3.2.6",
+    "@sveltejs/vite-plugin-svelte": "^4.0.0",
+    "eslint": "^9.18.0",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-plugin-svelte": "^3.0.0",
+    "globals": "^16.0.0",
+    "prettier": "^3.4.2",
+    "prettier-plugin-svelte": "^3.3.3",
+    "prettier-plugin-tailwindcss": "^0.6.11",
     "prisma": "^5.12.1",
     "svelte-check": "^4.0.0",
     "svelte2tsx": "^0.6.20",
     "tslib": "^2.4.1",
     "typescript": "^5.5.0",
+    "typescript-eslint": "^8.20.0",
     "vite": "^5.4.4"
   },
   "dependencies": {
@@ -40,7 +44,6 @@
     "@prisma/client": "^5.12.1",
     "@skeletonlabs/skeleton": "^3.1.0",
     "@skeletonlabs/skeleton-svelte": "^1.0.0",
-    "@sveltejs/kit": "^2.5.27",
     "@sveltejs/vite-plugin-svelte": "^4.0.0",
     "@tailwindcss/vite": "^4.0.14",
     "@types/htmlparser2": "^3.10.7",
@@ -87,6 +90,9 @@
     "src/lib/styles/app.css",
     "src/lib/theme.css"
   ],
+  "engines": {
+    "node": ">=22"
+  },
   "repository": "https://github.com/TurnipXenon/pineapple",
   "author": "turnipxenon <turnipxenon@gmail.com>",
   "license": "MIT",

package/dist/components/ElementVisbilityDetector.svelte.d.ts

@@ -1,7 +0,0 @@
-interface Props {
-    isVisible?: boolean;
-    children?: import('svelte').Snippet;
-}
-declare const ElementVisbilityDetector: import("svelte").Component<Props, {}, "isVisible">;
-type ElementVisbilityDetector = ReturnType<typeof ElementVisbilityDetector>;
-export default ElementVisbilityDetector;