@turnipxenon/pineapple 5.0.0-alpha.9 → 5.0.0

package/dist/index.d.ts

@@ -13,4 +13,5 @@ export { default as BlogTemplate } from "./ui/templates/blog_template/BlogTempla
 export { default as UniversalOverlay } from "./ui/modules/universal-overlay/UniversalOverlay.svelte";
 export { dialogManager } from "./components/dialog_manager/DialogManager";
 export * from "./modules/parsnip/index";
+export * from "./util/context/pineappleBaseContextDefinitions.svelte";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"AAEA,cAAc,sCAAsC,CAAC;AACrD,cAAc,sCAAsC,CAAC;AACrD,cAAc,sBAAsB,CAAC;AACrC,cAAc,gDAAgD,CAAC;AAC/D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,yCAAyC,CAAC;AACxD,cAAc,sCAAsC,CAAC;AACrD,cAAc,sCAAsC,CAAC;AACrD,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAE5B,YAAY,EAAE,cAAc,EAAE,MAAM,+CAA+C,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qDAAqD,CAAC;AAC9F,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2DAA2D,CAAC;AACxG,OAAO,EAAE,aAAa,EAAE,MAAM,8CAA8C,CAAC;AAE7E,cAAc,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"AAEA,cAAc,sCAAsC,CAAC;AACrD,cAAc,sCAAsC,CAAC;AACrD,cAAc,sBAAsB,CAAC;AACrC,cAAc,gDAAgD,CAAC;AAC/D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,yCAAyC,CAAC;AACxD,cAAc,sCAAsC,CAAC;AACrD,cAAc,sCAAsC,CAAC;AACrD,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAE5B,YAAY,EAAE,cAAc,EAAE,MAAM,+CAA+C,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qDAAqD,CAAC;AAC9F,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2DAA2D,CAAC;AACxG,OAAO,EAAE,aAAa,EAAE,MAAM,8CAA8C,CAAC;AAE7E,cAAc,yBAAyB,CAAC;AACxC,cAAc,uDAAuD,CAAA"}

package/dist/index.js

@@ -13,3 +13,4 @@ export { default as BlogTemplate } from "./ui/templates/blog_template/BlogTempla
 export { default as UniversalOverlay } from "./ui/modules/universal-overlay/UniversalOverlay.svelte";
 export { dialogManager } from "./components/dialog_manager/DialogManager";
 export * from "./modules/parsnip/index";
+export * from "./util/context/pineappleBaseContextDefinitions.svelte";

package/dist/remoteIndex.remote.d.ts

@@ -0,0 +1,2 @@
+export * from "./util/getParsnipData.remote";
+//# sourceMappingURL=remoteIndex.remote.d.ts.map

package/dist/remoteIndex.remote.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"remoteIndex.remote.d.ts","sourceRoot":"","sources":["../src/lib/remoteIndex.remote.ts"],"names":[],"mappings":"AAEA,cAAc,8BAA8B,CAAC"}

package/dist/remoteIndex.remote.js

@@ -0,0 +1,2 @@
+// noinspection JSUnusedGlobalSymbols
+export * from "./util/getParsnipData.remote";

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/FourPartCard.svelte

@@ -51,6 +51,11 @@
     :global {
         .pinya-four-part-card.pinya-card {
             padding: 0;
+
+            .card-header-cover > img {
+                border-top-right-radius: var(--radius-xl);
+                border-top-left-radius: var(--radius-xl);
+            }
         }
     }
 </style>

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/components/NestedNavigation.svelte

@@ -48,7 +48,6 @@
 				let bestMatch: string | null = null;
 
 				layout.forEach(site => {
-					console.log(`Current path (${currentPath}) vs layout path (${site.relativeLink})`);
 					const link = site.relativeLink;
 					if (!link) {
 						return;

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

@@ -1 +1 @@
-{"version":3,"file":"NestedNavigation.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ui/components/NestedNavigation.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,MAAM,CAAC;AAKrC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGrD,KAAK,gBAAgB,GAAI;IACxB,MAAM,EAAE,QAAQ,EAAE,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,YAAY,CAAC,EAAE,UAAU,GAAG,aAAa,GAAG,WAAW,CAAA;CAEvD,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,IAAI,CAAC,CAAC;AAqGhD,QAAA,MAAM,gBAAgB,sDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"NestedNavigation.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ui/components/NestedNavigation.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,MAAM,CAAC;AAKrC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGrD,KAAK,gBAAgB,GAAI;IACxB,MAAM,EAAE,QAAQ,EAAE,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,YAAY,CAAC,EAAE,UAAU,GAAG,aAAa,GAAG,WAAW,CAAA;CAEvD,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,IAAI,CAAC,CAAC;AAoGhD,QAAA,MAAM,gBAAgB,sDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,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/elements/pinya-combobox/PinyaCombobox.svelte

@@ -28,7 +28,7 @@
 		inputValue: function() {
 			return props.data.find((o) => o.value === value)?.label ?? "---";
 		},
-		onValueChange: onValueChangeBase ?? onValueChangeBaseImpl
+		onValueChange: onValueChangeBase ?? onValueChangeBaseImpl,
 	});
 
 	const filtered = $derived.by(() => {
@@ -46,11 +46,11 @@ Melt-based Combobox
 When migrating from Skeleton to Melt, change the value is no longer an array T[] but it's now T | undefined
 -->
 
-<div class={`pinya-combobox-wrapper ${props.class}`}>
+<div class={`pinya-combobox-wrapper ${props.class}`} {...props}>
 	<label {...combobox.label}>{props.label}</label>
 	<div class="pinya-combobox-control">
-		<input {...combobox.input} />
-		<button class="size-[3rem]" {...combobox.trigger}>
+		<input {...combobox.input} disabled={props.disabled} />
+		<button class="size-[3rem]" {...combobox.trigger} disabled={props.disabled}>
 			<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="opacity: 0.5" class="size-[2rem] m-auto">
 				<path d="m6 9 6 6 6-6"></path>
 			</svg>

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";
@@ -62,6 +63,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.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,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"}

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

@@ -50,6 +50,7 @@ See panels:
 
 		dialogManager.currentReadableState.subscribe((value) => {
 			isHidden = value === DialogState.Invisible;
+			console.log(value, DialogState.Invisible, isHidden)
 		});
 
 		dialogManager.update(0);
@@ -57,10 +58,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 +164,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/modules/universal-overlay/UniversalOverlay.svelte.d.ts.map

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