@turnipxenon/pineapple 5.0.0-alpha.10 → 5.0.0-alpha.12

package/dist/styles/app.css

@@ -76,88 +76,6 @@ a.external-link {
     }
 }
 
-/*https://shiki.style/guide/dual-themes*/
-html.dark .shiki,
-html.dark .shiki span {
-    color: var(--shiki-dark) !important;
-    background-color: var(--shiki-dark-bg) !important;
-    /* Optional, if you also want font styles */
-    font-style: var(--shiki-dark-font-style) !important;
-    font-weight: var(--shiki-dark-font-weight) !important;
-    text-decoration: var(--shiki-dark-text-decoration) !important;
-}
-
-.inline-code {
-    background-color: aliceblue;
-    padding: 0.2rem;
-    border-radius: 0.2rem;
-}
-
-html.dark .inline-code {
-    background-color: #303446;
-}
-
-.shiki {
-    span {
-        white-space: pre-wrap;
-        word-wrap: break-word;
-    }
-}
-
-/* region shiki copy button */
-pre:has(code) {
-    position: relative;
-}
-
-pre button.copy {
-    position: absolute;
-    right: 16px;
-    top: 16px;
-    height: 28px;
-    width: 28px;
-    padding: 0;
-    display: flex;
-
-    & span {
-        width: 100%;
-        aspect-ratio: 1 / 1;
-        background-repeat: no-repeat;
-        background-position: center;
-        background-size: cover;
-    }
-
-    & .ready {
-        background-image: url("$pkg/assets/icons/icon-copy-light-contrast.svg");
-        /*todo*/
-        /*@variant dark {*/
-        /*    background-image: url("$pkg/assets/icons/icon-copy-dark-contrast.svg");*/
-        /*}*/
-    }
-
-    & .success {
-        display: none;
-        background-image: url("$pkg/assets/icons/icon-check-light-contrast.svg");
-
-        /*todo: migration*/
-        /*@variant dark {*/
-        /*    background-image: url("$pkg/assets/icons/icon-check-dark-contrast.svg");*/
-        /*}*/
-    }
-
-    &.copied {
-        & .success {
-            display: block;
-        }
-
-        & .ready {
-            display: none;
-        }
-    }
-}
-
-/* endregion shiki copy button */
-
-
 ul + h2, ol + h2 {
     margin-top: 1rlh;
 }

package/dist/styles/tailwind.css

@@ -536,9 +536,6 @@
   .ig-textarea::placeholder {
     color:var(--color-surface-700-300)
   }
-  ::selection {
-    background-color:#73737380
-  }
   :disabled,
   .disabled {
     opacity:.5
@@ -2715,15 +2712,6 @@ a.external-link {
 #toast-progress::-moz-progress-bar {
   background:rgba(var(--color-secondary-500))
 }
-html.dark .shiki,
-html.dark .shiki span {
-  color:var(--shiki-dark)!important;
-  background-color:var(--shiki-dark-bg)!important;
-  font-style:var(--shiki-dark-font-style)!important;
-  font-weight:var(--shiki-dark-font-weight)!important;
-  -webkit-text-decoration:var(--shiki-dark-text-decoration)!important;
-  text-decoration:var(--shiki-dark-text-decoration)!important
-}
 .inline-code {
   background-color:#f0f8ff;
   border-radius:.2rem;

package/dist/styles/turnip-theme.css

@@ -217,6 +217,7 @@
 
 html.dark {
     --header-color: var(--color-primary-100);
+    --body-background-color: var(--body-background-color-dark);
     /*todo: migration*/
     /*@variant turnip {*/
     /*    --border-card: 0;*/

package/dist/ui/components/MeltToaster/MeltToaster.svelte

@@ -11,6 +11,7 @@
 </script>
 
 <script lang="ts">
+	import { browser } from "$app/environment";
 	import { onDestroy, onMount } from "svelte";
 
 	let toasterRoot: HTMLDivElement;
@@ -39,7 +40,9 @@
 	});
 
 	onDestroy(() => {
-		if (observer) observer.disconnect();
+		if (browser) {
+			if (observer) observer.disconnect();
+		}
 	});
 </script>
 

package/dist/ui/components/MeltToaster/MeltToaster.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"MeltToaster.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/components/MeltToaster/MeltToaster.svelte.ts"],"names":[],"mappings":"AAGC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,8CAA8C,CAAC;AAClF,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAKxC,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAmB,CAAC;AA4D1C;;;;GAIG;AACH,QAAA,MAAM,WAAW,2DAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"MeltToaster.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/components/MeltToaster/MeltToaster.svelte.ts"],"names":[],"mappings":"AAGC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,8CAA8C,CAAC;AAClF,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAKxC,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAmB,CAAC;AAgE1C;;;;GAIG;AACH,QAAA,MAAM,WAAW,2DAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/ui/elements/CodeBlock/CodeBlock.svelte

@@ -1,23 +1,25 @@
 <!-- @component Code Block based on: https://shiki.style/ and https://www.skeleton.dev/docs/integrations/code-block/svelte/ -->
 
 <script module lang="ts">
+	import { transformerNotationDiff } from "@shikijs/transformers";
 	import { addCopyButton } from "shiki-transformer-copy-button";
 	import { createHighlighterCoreSync } from "shiki/core";
 	import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
-	// Themes
-	// https://shiki.style/themes
-	import themeLight from "shiki/themes/catppuccin-latte.mjs";
-	import themeDark from "shiki/themes/catppuccin-frappe.mjs";
 	// Languages
 	// https://shiki.style/languages
-	import console from "shiki/langs/console.mjs";
-	import html from "shiki/langs/html.mjs";
+	import shikiConsole from "shiki/langs/console.mjs";
 	import css from "shiki/langs/css.mjs";
+	import html from "shiki/langs/html.mjs";
 	import js from "shiki/langs/javascript.mjs";
-	import ts from "shiki/langs/typescript.mjs";
+	import json from "shiki/langs/json.mjs";
 	import markdown from "shiki/langs/markdown.mjs";
-	import xml from "shiki/langs/xml.mjs";
 	import svelte from "shiki/langs/svelte.mjs";
+	import ts from "shiki/langs/typescript.mjs";
+	import xml from "shiki/langs/xml.mjs";
+	// Themes
+	// https://shiki.style/themes
+	import themeDark from "shiki/themes/catppuccin-frappe.mjs";
+	import themeLight from "shiki/themes/catppuccin-latte.mjs";
 
 	// https://shiki.style/guide/sync-usage
 	const shiki = createHighlighterCoreSync({
@@ -25,11 +27,12 @@
 		// Implement your import theme.
 		themes: [themeLight, themeDark],
 		// Implement your imported and supported languages.
-		langs: [console, html, css, js, ts, markdown, xml, svelte]
+		langs: [shikiConsole, html, css, js, ts, markdown, xml, svelte, json]
 	});
 </script>
 
 <script lang="ts">
+	import { onMount } from "svelte";
 	import type { CodeBlockProps } from "./CodeBlockProps";
 
 	let {
@@ -54,6 +57,7 @@
 			dark: "catppuccin-frappe"
 		},
 		transformers: [
+			transformerNotationDiff(),
 			addCopyButton({ toggle: 2000 })
 		]
 	}));
@@ -67,13 +71,152 @@
 </div>
 
 <style>
-	:global {
-			.pinya-code-block {
-					margin-bottom: 1rlh;
-			}
-
-			h2 + .pinya-code-block {
-					margin-top: 0.5rlh;
-			}
-	}
+    :global {
+        .pinya-code-block {
+            margin-bottom: 1rlh;
+        }
+
+        /*https://shiki.style/guide/dual-themes*/
+
+        html.dark .shiki,
+        html.dark .shiki > span {
+            color: var(--shiki-dark);
+            background-color: var(--shiki-dark-bg);
+            /* Optional, if you also want font styles */
+            font-style: var(--shiki-dark-font-style);
+            font-weight: var(--shiki-dark-font-weight);
+            text-decoration: var(--shiki-dark-text-decoration);
+        }
+
+
+        html.dark .shiki {
+            color: var(--shiki-dark) !important;
+            background-color: var(--shiki-dark-bg) !important;
+            font-style: var(--shiki-dark-font-style) !important;
+            font-weight: var(--shiki-dark-font-weight) !important;
+            -webkit-text-decoration: var(--shiki-dark-text-decoration) !important;
+            text-decoration: var(--shiki-dark-text-decoration) !important
+        }
+
+		    html.dark .shiki.has-diff span.diff.add {
+            background-color: rgba(0, 255, 0, 0.05);
+		    }
+
+        .inline-code {
+            background-color: aliceblue;
+            padding: 0.2rem;
+            border-radius: 0.2rem;
+        }
+
+        .shiki {
+            span {
+                white-space: pre-wrap;
+                word-wrap: break-word;
+            }
+
+            &.has-diff {
+                padding-inline-start: 0;
+                padding-inline-end: 0;
+
+                code {
+                    display: flex;
+                    flex-direction: column;
+                    gap: 0.2lh;
+
+                    & > span {
+                        display: flex;
+                        flex-wrap: wrap;
+                        padding-inline-start: 2em;
+                        padding-inline-end: 1em;
+                    }
+                }
+
+                span.diff.remove {
+                    background-color: rgba(255, 0, 0, 0.15);
+
+                    &::before {
+                        display: block;
+                        position: absolute;
+                        content: "-";
+                        margin-inline-start: calc((var(--spacing) * -4) - 2em);
+                        padding-inline-start: 1.75em;
+                        font-weight: bold;
+                        pointer-events: none;
+                    }
+                }
+
+                span.diff.add {
+                    background-color: rgba(0, 255, 0, 0.15);
+
+                    &::before {
+                        display: block;
+                        position: absolute;
+                        content: "+";
+                        margin-inline-start: calc((var(--spacing) * -4) - 2em);
+                        padding-inline-start: 1.75em;
+                        font-weight: bold;
+                        pointer-events: none;
+                    }
+                }
+            }
+        }
+
+        /* region shiki copy button */
+
+        pre:has(code) {
+            position: relative;
+        }
+
+        pre button.copy {
+            position: absolute;
+            right: 16px;
+            top: 16px;
+            height: 28px;
+            width: 28px;
+            padding: 0;
+            display: flex;
+
+            & span {
+                width: 100%;
+                aspect-ratio: 1 / 1;
+                background-repeat: no-repeat;
+                background-position: center;
+                background-size: cover;
+            }
+
+            & .ready {
+                background-image: url("$pkg/assets/icons/icon-copy-light-contrast.svg");
+                /*todo*/
+                /*@variant dark {*/
+                /*    background-image: url("$pkg/assets/icons/icon-copy-dark-contrast.svg");*/
+                /*}*/
+            }
+
+            & .success {
+                display: none;
+                background-image: url("$pkg/assets/icons/icon-check-light-contrast.svg");
+
+                /*todo: migration*/
+                /*@variant dark {*/
+                /*    background-image: url("$pkg/assets/icons/icon-check-dark-contrast.svg");*/
+                /*}*/
+            }
+
+            &.copied {
+                & .success {
+                    display: block;
+                }
+
+                & .ready {
+                    display: none;
+                }
+            }
+        }
+
+        /* endregion shiki copy button */
+
+        h2 + .pinya-code-block {
+            margin-top: 0.5rlh;
+        }
+    }
 </style>

package/dist/ui/elements/CodeBlock/CodeBlock.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"CodeBlock.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/elements/CodeBlock/CodeBlock.svelte.ts"],"names":[],"mappings":"AA+BA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AA6CvD,kHAAkH;AAClH,QAAA,MAAM,SAAS,oDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"CodeBlock.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/elements/CodeBlock/CodeBlock.svelte.ts"],"names":[],"mappings":"AAkCA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AA+CvD,kHAAkH;AAClH,QAAA,MAAM,SAAS,oDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

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

@@ -17,6 +17,7 @@ TODO: delete GeneralSettingsModal.svelte
 		getEnableDialogPreferenceContext,
 		getEnablePortraitContext
 	} from "../../../util/context/pineappleBaseContextDefinitions.svelte";
+	import type { LocalStore } from "../../../util/localStore.svelte";
 	import { setMode, userPrefersMode } from "mode-watcher";
 
 	interface ToggleItem {
@@ -98,19 +99,19 @@ TODO: delete GeneralSettingsModal.svelte
 	<div class="switch-default">
 		<PineappleSwitch
 			name="conversation-preference"
-			bind:checked={$enableDialogPreference}>
+			bind:checked={enableDialogPreference.value}>
 		</PineappleSwitch>
 		<label for="conversation-preference">
-			Conversation preference: {$enableDialogPreference ? "Always on" : "Always off"}
+			Conversation preference: {enableDialogPreference.value ? "Always on" : "Always off"}
 		</label>
 	</div>
 	<div class="switch-default">
 		<PineappleSwitch
 			name="portrait-preference"
-			bind:checked={$enablePortraitContext}>
+			bind:checked={enablePortraitContext.value}>
 		</PineappleSwitch>
 		<label for="portrait-preference">
-			Show conversation portrait: {$enablePortraitContext ? "Always on" : "Always off"}
+			Show conversation portrait: {enablePortraitContext.value ? "Always on" : "Always off"}
 		</label>
 	</div>
 </div>

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":"AAqHA;;;;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

@@ -60,7 +60,7 @@ See panels:
      hidden={isHidden}
      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">

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";
@@ -38,6 +38,11 @@
 	const onSettingsClick = () => {
 		modals.open(GeneralSettingsModal);
 	};
+
+	let isMounted = $state(false);
+	onMount(() => {
+		isMounted = true;
+	});
 </script>
 
 {#snippet header(extraClass: string)}
@@ -94,12 +99,12 @@
 				>
 					<ImageIcon src={SettingsLogo} aria-hidden="true" alt=""></ImageIcon>
 				</PinyaButton>
-					<PinyaButton
-						title="Toggle conversation"
-						buttonVariant={ButtonVariant.Image}
-						colorScheme={$enableUniversalOverlay ? ColorScheme.Secondary : undefined}
-						onclick={()=>{dialogManager.toggleDialogOverlay();}}
-					>
+				<PinyaButton
+					title="Toggle conversation"
+					buttonVariant={ButtonVariant.Image}
+					colorScheme={isMounted && enableUniversalOverlay.value ? ColorScheme.Secondary : undefined}
+					onclick={()=>{dialogManager.toggleDialogOverlay();}}
+				>
 					<ImageIcon src={DialogIcon} aria-hidden="true" alt=""></ImageIcon>
 				</PinyaButton>
 			</div>
@@ -127,6 +132,10 @@
 
 <style>
 		:global {
+				.hidden {
+						opacity: 0;
+				}
+
         #header-action-wrapper {
 		        max-height: 2rem;
             display: flex;

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;AA8GH,QAAA,MAAM,eAAe,gEAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/ui/templates/blog_template/BlogTemplate.svelte

@@ -2,6 +2,7 @@
 
 <script lang="ts">
 	import "./blog-template.css";
+	import { browser } from "$app/environment";
 	import { setIgnoreOverlayOverride } from "../../../util/context/pineappleBaseContextDefinitions.svelte";
 	import { onDestroy, onMount, type Snippet } from "svelte";
 	import BlogTemplateInner from "./BlogTemplateInner.svelte";
@@ -37,8 +38,10 @@
 	});
 
 	onDestroy(() => {
-		appState.bgOpacity = 1;
-		enableUniversalOverlaySvelte4.set(initialDialogState);
+		if (browser) {
+			appState.bgOpacity = 1;
+			enableUniversalOverlaySvelte4.set(initialDialogState);
+		}
 	});
 
 	appState.bgOpacity = shouldFillWholePage ? 0.2 : 1;

package/dist/ui/templates/blog_template/BlogTemplate.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"BlogTemplate.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/templates/blog_template/BlogTemplate.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,qBAAqB,CAAC;AAE7B,OAAO,EAAsB,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAE1D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAO1E,UAAU,KAAK;IACd,QAAQ,EAAE,cAAc,CAAC;IACzB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AAyDF,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}
+{"version":3,"file":"BlogTemplate.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/templates/blog_template/BlogTemplate.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,qBAAqB,CAAC;AAG7B,OAAO,EAAsB,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAE1D,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAO1E,UAAU,KAAK;IACd,QAAQ,EAAE,cAAc,CAAC;IACzB,mBAAmB,CAAC,EAAE,OAAO,CAAC;IAC9B,yBAAyB,CAAC,EAAE,OAAO,CAAC;IACpC,oBAAoB,CAAC,EAAE,OAAO,CAAC;IAC/B,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB;AA4DF,QAAA,MAAM,YAAY,2CAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/ui/templates/pinya-base/PinyaBase.svelte

@@ -1,16 +1,26 @@
 <script lang="ts">
 	import { page } from "$app/state";
+	import { menuPageServerLoad, type PageMeta, parsePageMetaNested } from "../../..";
 	import WebThumbnailImage from "../../../assets/placeholder/placeholder_circle.png";
 	import { locales, localizeHref } from "../../../external/paraglide/runtime";
 	import "../../../styles/global.css";
 	import MeltToaster from "../../components/MeltToaster/MeltToaster.svelte";
 	import type { PinyaHead } from "./pinyaBaseRunes.svelte.js";
 	import PineappleBaseContext from "../../../util/context/PineappleBaseContext.svelte";
+	import { setSiteLayout } from "../../../util/context/pineappleBaseContextDefinitions.svelte";
 	import { ModeWatcher } from "mode-watcher";
 	import "../../../styles/app.css";
+	import { onMount, type Snippet } from "svelte";
 	import { Modals } from "svelte-modals";
+	import { getParsnipDataRemote } from "../../../../routes/(pineapple)/pineapple/getParsnipData.remote";
 
-	let { children } = $props();
+	let { children, fileList = {}, jsonList = {}, parsnipBasePath = "/pineapple" }
+		: {
+		children: Snippet,
+		fileList?: Record<string, () => Promise<unknown>>,
+		jsonList?: Record<string, unknown>,
+		parsnipBasePath?: string
+	} = $props();
 
 	// https://github.com/sveltejs/kit/issues/1540#issuecomment-2029016082
 	const meta: PinyaHead = ({
@@ -31,6 +41,22 @@
 
 		return img;
 	}) ?? []);
+
+
+	let fileBasedList = $state<PageMeta[]>([]);
+	setSiteLayout(fileBasedList);
+
+	onMount(() => {
+		getParsnipDataRemote().then(data => {
+			fileBasedList.push(...parsePageMetaNested({
+				fileList,
+				jsonList,
+				imageMap: new Map<string, string>(),
+				parsnipOverall: data.parsnipOverall,
+				parsnipBasePath
+			}));
+		});
+	});
 </script>
 
 <PineappleBaseContext>

package/dist/ui/templates/pinya-base/PinyaBase.svelte.d.ts

@@ -1,8 +1,13 @@
 import "../../../styles/global.css";
 import "../../../styles/app.css";
-declare const PinyaBase: import("svelte").Component<{
-    children: any;
-}, {}, "">;
+import { type Snippet } from "svelte";
+type $$ComponentProps = {
+    children: Snippet;
+    fileList?: Record<string, () => Promise<unknown>>;
+    jsonList?: Record<string, unknown>;
+    parsnipBasePath?: string;
+};
+declare const PinyaBase: import("svelte").Component<$$ComponentProps, {}, "">;
 type PinyaBase = ReturnType<typeof PinyaBase>;
 export default PinyaBase;
 //# sourceMappingURL=PinyaBase.svelte.d.ts.map

package/dist/ui/templates/pinya-base/PinyaBase.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PinyaBase.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/templates/pinya-base/PinyaBase.svelte.ts"],"names":[],"mappings":"AAMA,OAAO,wBAAwB,CAAC;AAKhC,OAAO,qBAAqB,CAAC;AAiF7B,QAAA,MAAM,SAAS;cApEyC,GAAG;UAoEJ,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"PinyaBase.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/templates/pinya-base/PinyaBase.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,wBAAwB,CAAC;AAMhC,OAAO,qBAAqB,CAAC;AAC7B,OAAO,EAAW,KAAK,OAAO,EAAE,MAAM,QAAQ,CAAC;AAI9C,KAAK,gBAAgB,GAAI;IACxB,QAAQ,EAAE,OAAO,CAAC;IAClB,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,MAAM,OAAO,CAAC,OAAO,CAAC,CAAC,CAAC;IAClD,QAAQ,CAAC,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IACnC,eAAe,CAAC,EAAE,MAAM,CAAA;CACxB,CAAC;AAoGH,QAAA,MAAM,SAAS,sDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/ui/templates/pinya-base/menuPageServerLoadRemote.remote.svelte

@@ -0,0 +1 @@
+export const menuPageServerLoadRemote =

package/dist/ui/templates/pinya-base/menuPageServerLoadRemote.remote.svelte.d.ts

@@ -0,0 +1,27 @@
+export default MenuPageServerLoadRemote;
+type MenuPageServerLoadRemote = SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> & {
+    $$bindings?: string | undefined;
+};
+declare const MenuPageServerLoadRemote: $$__sveltets_2_IsomorphicComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import("svelte").ComponentConstructorOptions<Props>): import("svelte").SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+//# sourceMappingURL=menuPageServerLoadRemote.remote.svelte.d.ts.map

package/dist/ui/templates/pinya-base/menuPageServerLoadRemote.remote.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"menuPageServerLoadRemote.remote.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/templates/pinya-base/menuPageServerLoadRemote.remote.svelte.js"],"names":[],"mappings":";;;;;;;;AAeA;;;;mBAAoI;6CATvF,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,QAAQ,OAAO,OAAO,QAAQ;IAC3L,cAAc,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,WAAW,OAAO,SAAS;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,eAAe,QAAQ,CAAC"}

package/dist/util/context/PineappleBaseContext.svelte

@@ -1,7 +1,6 @@
 <script lang="ts">
 	import { enableUniversalOverlaySvelte4 } from "../..";
 	import {
-		getIgnoreOverlayOverride,
 		setEnableDialogOverlayContext,
 		setEnableDialogPreferenceContext,
 		setEnablePortraitContext,
@@ -10,7 +9,6 @@
 	} from "./pineappleBaseContextDefinitions.svelte";
 	import { createLocalStore } from "../localStore.svelte";
 	import { onMount } from "svelte";
-	import { writable } from "svelte/store";
 
 	let { children } = $props();
 
@@ -35,19 +33,19 @@
 	const enableDialogPrefStore = createLocalStore("enable-dialog-preference");
 	setEnableDialogPreferenceContext(enableDialogPrefStore);
 
-	const enableDialogOverlayStore = writable($enableDialogPrefStore);
-	setEnableDialogOverlayContext(enableDialogOverlayStore);
-	setIgnoreOverlayOverride(true);
-	let ignoreOverlaySet = getIgnoreOverlayOverride();
+	let enableDialog = $state({ value: enableDialogPrefStore.value });
+	setEnableDialogOverlayContext(enableDialog);
+	let ignoreOverlaySet = $state({ value: true });
+	setIgnoreOverlayOverride(ignoreOverlaySet);
 	onMount(() => {
 		enableUniversalOverlaySvelte4.subscribe((value) => {
-			if (ignoreOverlaySet) {
-				ignoreOverlaySet = false;
+			if (ignoreOverlaySet.value) {
+				ignoreOverlaySet.value = false;
 				// force initial value?
-				enableUniversalOverlaySvelte4.set($enableDialogPrefStore);
-				enableDialogOverlayStore.set($enableDialogPrefStore);
+				enableUniversalOverlaySvelte4.set(enableDialogPrefStore.value);
+				enableDialog.value = enableDialogPrefStore.value;
 			} else {
-				enableDialogOverlayStore.set(value);
+				enableDialog.value = value;
 			}
 		});
 

package/dist/util/context/PineappleBaseContext.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PineappleBaseContext.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/util/context/PineappleBaseContext.svelte.ts"],"names":[],"mappings":"AAsEA,QAAA,MAAM,oBAAoB;cAjD8B,GAAG;UAiDO,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}
+{"version":3,"file":"PineappleBaseContext.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/util/context/PineappleBaseContext.svelte.ts"],"names":[],"mappings":"AAmEA,QAAA,MAAM,oBAAoB;cAjD8B,GAAG;UAiDO,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}

package/dist/util/context/pineappleBaseContextDefinitions.svelte.d.ts

@@ -1,16 +1,29 @@
-import type { OverlayType, PageMeta } from "../..";
+import { type OverlayType, type PageMeta } from "../..";
 import { type LocalStore } from "../localStore.svelte";
-import { type Writable } from "svelte/store";
-export declare const getEnablePortraitContext: () => LocalStore<boolean>;
-export declare const setEnablePortraitContext: (value: LocalStore<boolean>) => void;
-export declare const getEnableDialogPreferenceContext: () => LocalStore<boolean>;
-export declare const setEnableDialogPreferenceContext: (value: LocalStore<boolean>) => void;
-export declare const getEnableDialogOverlayContext: () => Writable<boolean>;
-export declare const setEnableDialogOverlayContext: (value: Writable<boolean>) => void;
-export declare const getOverlayTypeContext: () => LocalStore<OverlayType>;
-export declare const setOverlayTypeContext: (value: LocalStore<OverlayType>) => void;
-export declare const getIgnoreOverlayOverride: () => boolean;
-export declare const setIgnoreOverlayOverride: (value: boolean) => void;
-export declare const getSiteLayout: () => PageMeta[];
-export declare const setSiteLayout: (value: PageMeta[]) => void;
+export declare const getEnablePortraitContext: () => LocalStore<boolean>, setEnablePortraitContext: (context: LocalStore<boolean>) => LocalStore<boolean>;
+export declare const getEnableDialogPreferenceContext: () => LocalStore<boolean>, setEnableDialogPreferenceContext: (context: LocalStore<boolean>) => LocalStore<boolean>;
+export declare const getEnableDialogOverlayContext: () => {
+    value: boolean;
+}, setEnableDialogOverlayContext: (context: {
+    value: boolean;
+}) => {
+    value: boolean;
+};
+export declare const getOverlayTypeContext: () => LocalStore<OverlayType>, setOverlayTypeContext: (context: LocalStore<OverlayType>) => LocalStore<OverlayType>;
+export declare const getIgnoreOverlayOverride: () => {
+    value: boolean;
+}, setIgnoreOverlayOverride: (context: {
+    value: boolean;
+}) => {
+    value: boolean;
+};
+export declare const getSiteLayout: () => PageMeta[], setSiteLayout: (context: PageMeta[]) => PageMeta[];
+/**
+ * useful for on-start dialog appearance
+ *
+ * use on onMount
+ *
+ * @param value
+ */
+export declare const forceSetDialog: (value: boolean) => void;
 //# sourceMappingURL=pineappleBaseContextDefinitions.svelte.d.ts.map

package/dist/util/context/pineappleBaseContextDefinitions.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"pineappleBaseContextDefinitions.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/util/context/pineappleBaseContextDefinitions.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,WAAW,EAAE,QAAQ,EAAE,MAAM,MAAM,CAAC;AAClD,OAAO,EAAoB,KAAK,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAChF,OAAO,EAAiB,KAAK,QAAQ,EAAE,MAAM,cAAc,CAAC;AAS5D,eAAO,MAAM,wBAAwB,2BAA8B,CAAC;AACpE,eAAO,MAAM,wBAAwB,GAAI,OAAO,UAAU,CAAC,OAAO,CAAC,SAElE,CAAC;AAEF,eAAO,MAAM,gCAAgC,2BAAsC,CAAC;AACpF,eAAO,MAAM,gCAAgC,GAAI,OAAO,UAAU,CAAC,OAAO,CAAC,SAE1E,CAAC;AAEF,eAAO,MAAM,6BAA6B,yBAAmC,CAAC;AAC9E,eAAO,MAAM,6BAA6B,GAAI,OAAO,QAAQ,CAAC,OAAO,CAAC,SAErE,CAAC;AAEF,eAAO,MAAM,qBAAqB,+BAA2B,CAAC;AAC9D,eAAO,MAAM,qBAAqB,GAAI,OAAO,UAAU,CAAC,WAAW,CAAC,SAEnE,CAAC;AAEF,eAAO,MAAM,wBAAwB,eAA8B,CAAC;AACpE,eAAO,MAAM,wBAAwB,GAAI,OAAO,OAAO,SAEtD,CAAC;AAEF,eAAO,MAAM,aAAa,kBAAmB,CAAC;AAC9C,eAAO,MAAM,aAAa,GAAI,OAAO,QAAQ,EAAE,SAE9C,CAAC"}
+{"version":3,"file":"pineappleBaseContextDefinitions.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/util/context/pineappleBaseContextDefinitions.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAAiC,KAAK,WAAW,EAAE,KAAK,QAAQ,EAAE,MAAM,MAAM,CAAC;AACtF,OAAO,EAAE,KAAK,UAAU,EAAE,MAAM,6BAA6B,CAAC;AAG9D,eAAO,MAAO,wBAAwB,6BAAE,wBAAwB,uDAAwC,CAAC;AACzG,eAAO,MAAO,gCAAgC,6BAAE,gCAAgC,uDAAwC,CAAC;AAIzH,eAAO,MAAO,6BAA6B;WAAyD,OAAO;GAA9D,6BAA6B;WAA0B,OAAO;;WAAP,OAAO;CAAI,CAAC;AAEhH,eAAO,MAAO,qBAAqB,iCAAE,qBAAqB,+DAA4C,CAAC;AACvG,eAAO,MAAO,wBAAwB;WAAqD,OAAO;GAA1D,wBAAwB;WAA2B,OAAO;;WAAP,OAAO;CAAK,CAAC;AACxG,eAAO,MAAO,aAAa,oBAAE,aAAa,qCAA+B,CAAC;AAE1E;;;;;;GAMG;AACH,eAAO,MAAM,cAAc,GAAI,OAAO,OAAO,SAI5C,CAAA"}

package/dist/util/context/pineappleBaseContextDefinitions.svelte.js

@@ -1,32 +1,23 @@
-import { createLocalStore } from "../localStore.svelte";
-import { get, writable } from "svelte/store";
-let enablePortraitContext = createLocalStore("enable-portrait");
-let enableDialogPreferenceContext = createLocalStore("enable-dialog-preference");
-let overlayTypeContext = createLocalStore("overlay-type");
-let enableDialogOverlayContext = writable(get(enableDialogPreferenceContext));
-let ignoreOverlayOverride = true;
-let siteLayout = [];
-export const getEnablePortraitContext = () => enablePortraitContext;
-export const setEnablePortraitContext = (value) => {
-    enablePortraitContext = value;
-};
-export const getEnableDialogPreferenceContext = () => enableDialogPreferenceContext;
-export const setEnableDialogPreferenceContext = (value) => {
-    enableDialogPreferenceContext = value;
-};
-export const getEnableDialogOverlayContext = () => enableDialogOverlayContext;
-export const setEnableDialogOverlayContext = (value) => {
-    enableDialogOverlayContext = value;
-};
-export const getOverlayTypeContext = () => overlayTypeContext;
-export const setOverlayTypeContext = (value) => {
-    overlayTypeContext = value;
-};
-export const getIgnoreOverlayOverride = () => ignoreOverlayOverride;
-export const setIgnoreOverlayOverride = (value) => {
-    ignoreOverlayOverride = value;
-};
-export const getSiteLayout = () => siteLayout;
-export const setSiteLayout = (value) => {
-    siteLayout = value;
+import { enableUniversalOverlaySvelte4 } from "../..";
+import {} from "../localStore.svelte";
+import { createContext } from "svelte";
+export const [getEnablePortraitContext, setEnablePortraitContext] = createContext();
+export const [getEnableDialogPreferenceContext, setEnableDialogPreferenceContext] = createContext();
+// note to self: proper two way binding is seen with the variables below
+// see https://svelte.dev/docs/svelte/context#Using-context-with-state
+export const [getEnableDialogOverlayContext, setEnableDialogOverlayContext] = createContext();
+export const [getOverlayTypeContext, setOverlayTypeContext] = createContext();
+export const [getIgnoreOverlayOverride, setIgnoreOverlayOverride] = createContext();
+export const [getSiteLayout, setSiteLayout] = createContext();
+/**
+ * useful for on-start dialog appearance
+ *
+ * use on onMount
+ *
+ * @param value
+ */
+export const forceSetDialog = (value) => {
+    const ignoreOverride = getIgnoreOverlayOverride();
+    ignoreOverride.value = false;
+    enableUniversalOverlaySvelte4.set(value);
 };

package/dist/util/localStore.svelte.d.ts

@@ -1,10 +1,17 @@
 import type { OverlayType } from "..";
-import { type Writable } from "svelte/store";
-export type LocalStore<T> = Writable<T>;
+export declare class LocalStore<T> {
+    value: T;
+    key: string;
+    valueType: "undefined" | "object" | "boolean" | "number" | "string" | "function" | "symbol" | "bigint";
+    defaultValue: T;
+    constructor(key: string, defaultValue: T);
+    serialize(value: T): string;
+    deserialize(item: string): T;
+}
 export interface LocalStoreRestriction {
     "enable-portrait": boolean;
     "enable-dialog-preference": boolean;
     "overlay-type": OverlayType;
 }
-export declare const createLocalStore: <k extends keyof LocalStoreRestriction>(key: k) => Writable<Readonly<LocalStoreRestriction>[k]>;
+export declare const createLocalStore: <k extends keyof LocalStoreRestriction>(key: k) => LocalStore<Readonly<LocalStoreRestriction>[k]>;
 //# sourceMappingURL=localStore.svelte.d.ts.map

package/dist/util/localStore.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"localStore.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/util/localStore.svelte.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,MAAM,CAAC;AACxC,OAAO,EAAY,KAAK,QAAQ,EAAE,MAAM,cAAc,CAAC;AAKvD,MAAM,MAAM,UAAU,CAAC,CAAC,IAAI,QAAQ,CAAC,CAAC,CAAC,CAAC;AAExC,MAAM,WAAW,qBAAqB;IACrC,iBAAiB,EAAE,OAAO,CAAC;IAC3B,0BAA0B,EAAE,OAAO,CAAC;IACpC,cAAc,EAAE,WAAW,CAAC;CAC5B;AAQD,eAAO,MAAM,gBAAgB,GAAI,CAAC,SAAS,MAAM,qBAAqB,EAAE,KAAK,CAAC,iDAqD7E,CAAC"}
+{"version":3,"file":"localStore.svelte.d.ts","sourceRoot":"","sources":["../../src/lib/util/localStore.svelte.ts"],"names":[],"mappings":"AAEA,OAAO,KAAK,EAAE,WAAW,EAAE,MAAM,MAAM,CAAC;AAOxC,qBAAa,UAAU,CAAC,CAAC;IACxB,KAAK,EAAkB,CAAC,CAAC;IACzB,GAAG,SAAM;IACT,SAAS,EAAE,WAAW,GAAG,QAAQ,GAAG,SAAS,GAAG,QAAQ,GAAG,QAAQ,GAAG,UAAU,GAAG,QAAQ,GAAG,QAAQ,CAAC;IACvG,YAAY,EAAE,CAAC,CAAC;gBAEJ,GAAG,EAAE,MAAM,EAAE,YAAY,EAAE,CAAC;IAmCxC,SAAS,CAAC,KAAK,EAAE,CAAC,GAAG,MAAM;IAQ3B,WAAW,CAAC,IAAI,EAAE,MAAM,GAAG,CAAC;CAc5B;AAED,MAAM,WAAW,qBAAqB;IACrC,iBAAiB,EAAE,OAAO,CAAC;IAC3B,0BAA0B,EAAE,OAAO,CAAC;IACpC,cAAc,EAAE,WAAW,CAAC;CAC5B;AAQD,eAAO,MAAM,gBAAgB,GAAI,CAAC,SAAS,MAAM,qBAAqB,EAAE,KAAK,CAAC,mDAE7E,CAAC"}

package/dist/util/localStore.svelte.js

@@ -1,27 +1,51 @@
 /** from https://www.reddit.com/r/sveltejs/comments/1d43d8p/svelte_5_runes_with_localstorage_thanks_to_joy_of/ */
 import { browser } from "$app/environment";
-import { writable } from "svelte/store";
 // const localConsole = console;
 const localConsole = undefined;
-const localStoreDefault = {
-    "enable-portrait": true,
-    "enable-dialog-preference": true,
-    "overlay-type": "dialog"
-};
-export const createLocalStore = (key) => {
-    const defaultValue = localStoreDefault[key];
-    const valueType = typeof defaultValue;
-    const store = writable(defaultValue);
-    const storageKey = `pinya-local-${key}`;
-    const serialize = (value) => {
-        if (valueType !== "object") {
-            return `${value}`;
+export class LocalStore {
+    constructor(key, defaultValue) {
+        this.value = $state();
+        this.key = "";
+        this.key = key;
+        this.defaultValue = defaultValue;
+        this.value = defaultValue;
+        this.valueType = typeof defaultValue;
+        let localStorageState = $state('initial');
+        if (browser) {
+            const item = localStorage.getItem(`pinya-local-${key}`);
+            if (item) {
+                this.value = this.deserialize(item);
+                localConsole === null || localConsole === void 0 ? void 0 : localConsole.log(`initializing initial ${this.key}: ${this.value}`);
+            }
+            localStorageState = 'accessed';
+        }
+        $effect(() => {
+            localConsole === null || localConsole === void 0 ? void 0 : localConsole.log(`updating ${this.key}: ${this.value}`);
+            switch (localStorageState) {
+                case "initial":
+                    // completely ignore all next changes
+                    break;
+                case "accessed":
+                    // for the initial change, we ignore it but allow the next changes to be writable
+                    localStorageState = 'writable';
+                    localConsole === null || localConsole === void 0 ? void 0 : localConsole.log(`setting writable for ${this.key}`);
+                    break;
+                case "writable":
+                    localStorage.setItem(`pinya-local-${this.key}`, this.serialize(this.value));
+                    localConsole === null || localConsole === void 0 ? void 0 : localConsole.log(`initializing after ${this.key}: ${this.value}`);
+                    break;
+            }
+        });
+    }
+    serialize(value) {
+        if (this.valueType !== "object") {
+            return value;
         }
         return JSON.stringify(value);
-    };
-    const deserialize = (item) => {
+    }
+    deserialize(item) {
         localConsole === null || localConsole === void 0 ? void 0 : localConsole.log(`deserializing item ${item}`);
-        if (valueType === "string") {
+        if (this.valueType === "string") {
             localConsole === null || localConsole === void 0 ? void 0 : localConsole.log(`deserializing string ${item}`);
             return item;
         }
@@ -30,27 +54,21 @@ export const createLocalStore = (key) => {
         }
         catch (error) {
             console.error(error);
-            return defaultValue;
-        }
-    };
-    if (browser) {
-        const item = localStorage.getItem(storageKey);
-        if (item) {
-            store.set(deserialize(item));
-            localConsole === null || localConsole === void 0 ? void 0 : localConsole.log(`initializing initial ${storageKey}: ${item}`);
+            return this.defaultValue;
         }
     }
-    let skipWrite = true;
-    store.subscribe((value) => {
-        if (!browser) {
-            return;
-        }
-        if (skipWrite) {
-            skipWrite = false;
-            return;
-        }
-        localStorage.setItem(storageKey, serialize(value));
-        localConsole === null || localConsole === void 0 ? void 0 : localConsole.log(`initializing after ${storageKey}: ${value}`);
-    });
-    return store;
+}
+const localStoreDefault = {
+    "enable-portrait": true,
+    "enable-dialog-preference": true,
+    "overlay-type": 'dialog',
+};
+export const createLocalStore = (key) => {
+    return new LocalStore(key, localStoreDefault[key]);
 };
+// export const createAllLocalStore = () => {
+// 	let enablePortrait = $state(createLocalStore('enablePortrait'));
+// 	return {
+// 		enablePortrait
+// 	}
+// }

package/package.json

@@ -1,17 +1,22 @@
 {
   "name": "@turnipxenon/pineapple",
   "description": "personal package for base styling for other personal projects",
-  "version": "5.0.0-alpha.10",
+  "version": "5.0.0-alpha.12",
   "devDependencies": {
     "@commitlint/cli": "^19.8.1",
     "@commitlint/config-conventional": "^19.8.1",
     "@eslint/compat": "^1.4.1",
     "@eslint/js": "^9.39.2",
+    "@inlang/paraglide-js": "~2.4.0",
+    "@prisma/client": "^5.22.0",
+    "@shikijs/transformers": "^3.22.0",
     "@sveltejs/adapter-cloudflare": "^7.2.6",
+    "@sveltejs/kit": "2.49.5",
     "@sveltejs/package": "^2.5.7",
+    "@sveltejs/vite-plugin-svelte": "^6.2.4",
     "@types/htmlparser2": "^3.10.7",
     "@types/mdast": "^4.0.4",
-    "@types/node": "^20.19.30",
+    "@types/node": "^20.19.31",
     "eslint": "^9.39.2",
     "eslint-config-prettier": "^10.1.8",
     "eslint-plugin-svelte": "^3.14.0",
@@ -29,19 +34,15 @@
     "publint": "^0.2.12",
     "sass": "^1.97.3",
     "string-width": "^7.2.0",
-    "svelte": "^5.49.1",
+    "svelte": "^5.49.2",
     "svelte-check": "^4.3.6",
     "svelte2tsx": "^0.7.47",
     "ts-node": "^10.9.2",
     "tslib": "^2.8.1",
     "typescript": "^5.9.3",
     "typescript-eslint": "^8.54.0",
-    "@sveltejs/vite-plugin-svelte": "^6.2.4",
     "vite": "^7.3.1",
-    "wrangler": "4.59.1",
-    "@sveltejs/kit": "2.49.5",
-    "@inlang/paraglide-js": "~2.4.0",
-    "@prisma/client": "^5.22.0"
+    "wrangler": "4.59.1"
   },
   "dependencies": {
     "melt": "^0.44.0",
@@ -87,6 +88,8 @@
   },
   "files": [
     "dist",
+    "!dist/**/*.test.*",
+    "!dist/**/*.spec.*",
     "src/lib/styles/app.css",
     "src/lib/theme.css"
   ],

package/src/lib/styles/app.css

@@ -76,88 +76,6 @@ a.external-link {
     }
 }
 
-/*https://shiki.style/guide/dual-themes*/
-html.dark .shiki,
-html.dark .shiki span {
-    color: var(--shiki-dark) !important;
-    background-color: var(--shiki-dark-bg) !important;
-    /* Optional, if you also want font styles */
-    font-style: var(--shiki-dark-font-style) !important;
-    font-weight: var(--shiki-dark-font-weight) !important;
-    text-decoration: var(--shiki-dark-text-decoration) !important;
-}
-
-.inline-code {
-    background-color: aliceblue;
-    padding: 0.2rem;
-    border-radius: 0.2rem;
-}
-
-html.dark .inline-code {
-    background-color: #303446;
-}
-
-.shiki {
-    span {
-        white-space: pre-wrap;
-        word-wrap: break-word;
-    }
-}
-
-/* region shiki copy button */
-pre:has(code) {
-    position: relative;
-}
-
-pre button.copy {
-    position: absolute;
-    right: 16px;
-    top: 16px;
-    height: 28px;
-    width: 28px;
-    padding: 0;
-    display: flex;
-
-    & span {
-        width: 100%;
-        aspect-ratio: 1 / 1;
-        background-repeat: no-repeat;
-        background-position: center;
-        background-size: cover;
-    }
-
-    & .ready {
-        background-image: url("$pkg/assets/icons/icon-copy-light-contrast.svg");
-        /*todo*/
-        /*@variant dark {*/
-        /*    background-image: url("$pkg/assets/icons/icon-copy-dark-contrast.svg");*/
-        /*}*/
-    }
-
-    & .success {
-        display: none;
-        background-image: url("$pkg/assets/icons/icon-check-light-contrast.svg");
-
-        /*todo: migration*/
-        /*@variant dark {*/
-        /*    background-image: url("$pkg/assets/icons/icon-check-dark-contrast.svg");*/
-        /*}*/
-    }
-
-    &.copied {
-        & .success {
-            display: block;
-        }
-
-        & .ready {
-            display: none;
-        }
-    }
-}
-
-/* endregion shiki copy button */
-
-
 ul + h2, ol + h2 {
     margin-top: 1rlh;
 }