@turnipxenon/pineapple 5.2.2 → 5.3.0-alpha.2

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

@@ -11,19 +11,24 @@ TODO: delete GeneralSettingsModal.svelte
 	import DarkIcon from "../../../assets/icons/icon-dark-mode.svg";
 	import LightIcon from "../../../assets/icons/icon-light-mode.svg";
 	import PineappleSwitch from "../../elements/PineappleSwitch.svelte";
+	import PinyaButton from "../../elements/PinyaButton/PinyaButton.svelte";
 
 	import LanguagePicker from "../modals/general-settings/LanguagePicker.svelte";
 	import { appState } from "../../templates/index";
 	import {
+		getAutoScrollPrefContext,
 		getEnableDialogPreferenceContext,
-		getEnablePortraitContext
+		getEnablePortraitContext,
+		getTextSpeedContext
 	} from "../../../util/context/pineappleBaseContextDefinitions.svelte";
 	import { setMode, userPrefersMode } from "mode-watcher";
+	import TutorialYarn from "../../../yarn/Tutorial.yarn?raw";
+	import { dialogManager } from "../../../components/dialog_manager/DialogManager";
 
 	interface ToggleItem {
-		key: "light" | "dark" | "system"
-		imageSrc: string,
-		label: string,
+		key: "light" | "dark" | "system";
+		imageSrc: string;
+		label: string;
 	}
 
 	const modes: ToggleItem[] = [
@@ -32,13 +37,15 @@ TODO: delete GeneralSettingsModal.svelte
 		{ key: "system", imageSrc: ConstrastIcon, label: "System" }
 	];
 
+	let { close = undefined }: { close?: () => void } = $props();
+
 	let selectedItem: ToggleItem = $state(modes[0]);
 
 	// when mode is edited outside, adjust toggle button
 	// do not use runes here because we only want explicit changes outside
 	// our control here!
 	userPrefersMode.subscribe((value) => {
-		const si = modes.find(m => m.key === value);
+		const si = modes.find((m) => m.key === value);
 		if (selectedItem !== si && si) {
 			selectedItem = si;
 		}
@@ -46,6 +53,29 @@ TODO: delete GeneralSettingsModal.svelte
 
 	let enableDialogPreference = getEnableDialogPreferenceContext();
 	let enablePortraitContext = getEnablePortraitContext();
+	let textSpeedContext = getTextSpeedContext();
+	let autoScrollPrefContext = getAutoScrollPrefContext();
+
+	let tutorialLoaded = $state(false);
+	const activateTutorial = () => {
+		const _tutorialLoaded = tutorialLoaded;
+		tutorialLoaded = false;
+		const currentDialogId = dialogManager.currentMessageMeta.dialogId;
+		if (currentDialogId && !currentDialogId.includes('Tutorial')) {
+			dialogManager.dialogVariableStore.setItem("$tutorialReturnAddress", currentDialogId);
+		}
+		if (!_tutorialLoaded) {
+			dialogManager.extendDialogTree(TutorialYarn, "TutorialStart").then(() => {
+				close?.();
+				dialogManager.enableDialog(true);
+			});
+		} else {
+			dialogManager.setDialogChoiceById("TutorialStart");
+			close?.();
+			dialogManager.enableDialog(true);
+			
+		}
+	};
 
 	// when mode is changed inside the button, adjust the mode
 	$effect(() => {
@@ -74,18 +104,20 @@ TODO: delete GeneralSettingsModal.svelte
 					type="button"
 					title={mode.label}
 					class={`btn pt-3 pb-3 hover:brightness-125
-				${mode.key === selectedItem.key ? 'selected bg-secondary-400 dark:bg-secondary-800' : 'preset-outlined-primary-300-700'}
+				${mode.key === selectedItem.key ? "selected bg-secondary-400 dark:bg-secondary-800" : "preset-outlined-primary-300-700"}
 				`}
-					onclick={() => { setMode(mode.key) }}
+					onclick={() => {
+						setMode(mode.key);
+					}}
 				>
 					<img
 						src={mode.imageSrc}
 						aria-hidden="true"
 						alt=""
 						class={`icon
-					${mode.key === selectedItem.key ? 'reverse' : ''}
+					${mode.key === selectedItem.key ? "reverse" : ""}
 					`}
-					>
+					/>
 					<div>
 						{mode.label}
 					</div>
@@ -99,84 +131,109 @@ TODO: delete GeneralSettingsModal.svelte
 	{/if}
 
 	{#if appState.allowDialog}
+		<h3>Dialog or conversation</h3>
 		<div class="switch-default">
-			<PineappleSwitch
-				name="conversation-preference"
-				bind:checked={enableDialogPreference.value}>
-			</PineappleSwitch>
+			<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>
+			<PineappleSwitch name="portrait-preference" bind:checked={enablePortraitContext.value}
+			></PineappleSwitch>
 			<label for="portrait-preference">
 				Show conversation portrait: {enablePortraitContext.value ? "Always on" : "Always off"}
 			</label>
 		</div>
+		<div class="switch-default">
+			<PineappleSwitch name="auto-scroll-preference" bind:checked={autoScrollPrefContext.value}
+			></PineappleSwitch>
+			<label for="auto-scroll-preference">
+				Auto scroll conversations: {autoScrollPrefContext.value ? "On" : "Off"}
+			</label>
+		</div>
+		<div class="input-slider default-flex">
+			<label for="text-speed-input">Text speed {textSpeedContext.value}/10</label>
+			<input
+				bind:value={textSpeedContext.value}
+				id="text-speed-input"
+				type="range"
+				min="1"
+				max="10"
+			/>
+		</div>
+		<PinyaButton onclick={activateTutorial}><span>Initiate conversation tutorial</span></PinyaButton
+		>
 	{/if}
 </div>
 
 <style>
-    :global {
-        html {
-            --primary-btn-color-selected: var(--color-secondary-400);
-        }
-
-        html.dark {
-            --primary-btn-color-selected: var(--color-secondary-800);
-        }
-    }
-
-    .actions {
-        display: flex;
-        flex-direction: row-reverse;
-        margin-top: 1.4lh;
-    }
-
-    .wrapper {
-        display: flex;
-        flex-direction: column;
-        justify-content: start;
-        text-align: start;
-        gap: 1lh;
-        overflow-y: auto;
-        font-size: var(--text-base);
-    }
-
-    #dark-mode-fieldset {
-        legend {
-            background: transparent;
-        }
-
-        #field-flex {
-            display: flex;
-            flex-wrap: wrap;
-            gap: 1rem;
-            padding: 0.25lh 1rem;
-        }
-
-        button {
-            img {
-                filter: invert(80%);
-            }
-        }
-
-        button.selected {
-            background-color: var(--primary-btn-color-selected);
-
-            img {
-                filter: unset;
-            }
-        }
-    }
-
-    .switch-default {
-        display: flex;
-        justify-items: center;
-        gap: 1em;
-    }
+	:global {
+		html {
+			--primary-btn-color-selected: var(--color-secondary-400);
+		}
+
+		html.dark {
+			--primary-btn-color-selected: var(--color-secondary-800);
+		}
+
+		.input-slider {
+			accent-color: var(--primary-btn-color-selected);
+		}
+	}
+
+	.actions {
+		display: flex;
+		flex-direction: row-reverse;
+		margin-top: 1.4lh;
+	}
+
+	.wrapper {
+		display: flex;
+		flex-direction: column;
+		justify-content: start;
+		text-align: start;
+		gap: 1lh;
+		overflow-y: auto;
+		font-size: var(--text-base);
+		margin: 0.5lh 0;
+		padding-top: 0.5lh;
+		padding-bottom: 1.6lh;
+	}
+
+	#dark-mode-fieldset {
+		legend {
+			background: transparent;
+		}
+
+		#field-flex {
+			display: flex;
+			flex-wrap: wrap;
+			gap: 1rem;
+			padding: 0.25lh 1rem;
+		}
+
+		button {
+			img {
+				filter: invert(80%);
+			}
+		}
+
+		button.selected {
+			background-color: var(--primary-btn-color-selected);
+
+			img {
+				filter: unset;
+			}
+		}
+	}
+
+	:global {
+		.switch-default {
+			display: flex;
+			justify-items: center;
+			gap: 1em;
+		}
+	}
 </style>

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

@@ -1,9 +1,12 @@
+type $$ComponentProps = {
+    close?: () => void;
+};
 /**
  * Layout and logic for Settings
  *
  * TODO: delete GeneralSettingsModal.svelte
  */
-declare const SettingsPanel: import("svelte").Component<Record<string, never>, {}, "">;
+declare const SettingsPanel: import("svelte").Component<$$ComponentProps, {}, "">;
 type SettingsPanel = ReturnType<typeof SettingsPanel>;
 export default SettingsPanel;
 //# sourceMappingURL=SettingsPanel.svelte.d.ts.map

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":"AAyHA;;;;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":"AA2BC,KAAK,gBAAgB,GAAI;IAAE,KAAK,CAAC,EAAE,MAAM,IAAI,CAAA;CAAE,CAAC;AA6IjD;;;;GAIG;AACH,QAAA,MAAM,aAAa,sDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

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

@@ -120,8 +120,6 @@
 	const filterSearchParams = (searchParams: URLSearchParams) => {
 		// region Order
 		const orderParam = searchParams.get("order")?.trim();
-		console.log(searchParams);
-		console.log(orderParam);
 		if (orderParam) {
 			actualLayout = [];
 
@@ -146,7 +144,6 @@
 			});
 
 			actualLayout = [...actualLayout];
-			console.log(actualLayout);
 		}
 		// endregion
 

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

@@ -1 +1 @@
-{"version":3,"file":"SeaweedLayout.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/templates/SeaweedLayout/SeaweedLayout.svelte.ts"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAgB,kBAAkB,EAAE,MAAM,SAAS,CAAC;AA0ThE,QAAA,MAAM,aAAa,wDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}
+{"version":3,"file":"SeaweedLayout.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/templates/SeaweedLayout/SeaweedLayout.svelte.ts"],"names":[],"mappings":"AAiBA,OAAO,KAAK,EAAgB,kBAAkB,EAAE,MAAM,SAAS,CAAC;AAuThE,QAAA,MAAM,aAAa,wDAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

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

@@ -54,7 +54,7 @@
 		</BlogTemplateInner>
 	</div>
 {:else}
-	<PinyaCard {includeDataNoSnippet} widthClass="max-w-4xl">
+	<PinyaCard {includeDataNoSnippet} widthClass="blog-template">
 		<BlogTemplateInner pageMeta={pageMeta}>
 			{@render children?.()}
 		</BlogTemplateInner>
@@ -68,4 +68,10 @@
         padding-right: 2em;
         padding-left: 2em;
     }
+
+    :global(.blog-template) {
+        max-width: 64em;
+		    width: 100%;
+        margin: auto;
+    }
 </style>

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

@@ -2,6 +2,7 @@
 
 <script lang="ts">
 	import type { SimplePageMeta } from "../../modules/NavigationMenu/index";
+	import { localizeHref } from "../../../external/paraglide/runtime.js";
 
 	interface Props {
 		pageMeta: SimplePageMeta;
@@ -9,6 +10,13 @@
 	}
 
 	let { pageMeta, children }: Props = $props();
+
+	const getTagQueryHref = (tag: string): string => {
+		const query = new URLSearchParams();
+		query.set("index", "0");
+		query.append("tags", tag);
+		return `${localizeHref("/pineapple/")}?${query.toString()}`;
+	};
 </script>
 
 <article>
@@ -26,7 +34,7 @@
 			<section id="article-tags">
 				Tags:
 				{#each pageMeta.tags as tag, index (index)}
-					<span class="badge preset-filled">{tag}</span>
+					<a class="badge tag-link" href={getTagQueryHref(tag)}>{tag}</a>
 				{/each}
 			</section>
 		{/if}
@@ -45,4 +53,28 @@
     .badge {
         margin-inline-end: 0.5em;
     }
+
+    #article-tags a.badge {
+        text-decoration: none;
+    }
+
+    #article-tags .tag-link {
+        display: inline-flex;
+        align-items: center;
+        border-radius: 0.5rem;
+        padding: 0.2rem 0.55rem;
+        border: 1px solid var(--color-surface-700-600);
+        background-color: transparent;
+        color: var(--color-surface-900-100);
+        transition: background-color 0.15s ease, color 0.15s ease, border-color 0.15s ease;
+    }
+
+    #article-tags .tag-link:hover,
+    #article-tags .tag-link:focus-visible {
+        background-color: transparent;
+        border-color: var(--color-primary-400-600);
+        color: var(--color-surface-900-100);
+        outline: none;
+		    filter: brightness(110%);
+    }
 </style>

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

@@ -1 +1 @@
-{"version":3,"file":"BlogTemplateInner.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/templates/blog_template/BlogTemplateInner.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAG1E,UAAU,KAAK;IACd,QAAQ,EAAE,cAAc,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;CACpC;AAwCF,QAAA,MAAM,iBAAiB,2CAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}
+{"version":3,"file":"BlogTemplateInner.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/templates/blog_template/BlogTemplateInner.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,sCAAsC,CAAC;AAI1E,UAAU,KAAK;IACd,QAAQ,EAAE,cAAc,CAAC;IACzB,QAAQ,CAAC,EAAE,OAAO,QAAQ,EAAE,OAAO,CAAC;CACpC;AAgDF,QAAA,MAAM,iBAAiB,2CAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

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

@@ -2,4 +2,5 @@ export { default as PinyaBase } from "./pinya-base/PinyaBase.svelte";
 export * from "./PinyaPageLayout";
 export * from "./SeaweedLayout";
 export * from "./confirmation-modal";
+export declare const TutorialYarn: string;
 //# sourceMappingURL=index.d.ts.map

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

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/ui/templates/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAErE,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/ui/templates/index.ts"],"names":[],"mappings":"AAEA,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,+BAA+B,CAAC;AAErE,cAAc,mBAAmB,CAAC;AAClC,cAAc,iBAAiB,CAAC;AAChC,cAAc,sBAAsB,CAAC;AACrC,eAAO,MAAM,YAAY,QAAgB,CAAC"}

package/dist/ui/templates/index.js

@@ -1,4 +1,6 @@
+import _TutorialYarn from "$pkg/yarn/Tutorial.yarn?raw";
 export { default as PinyaBase } from "./pinya-base/PinyaBase.svelte";
 export * from "./PinyaPageLayout";
 export * from "./SeaweedLayout";
 export * from "./confirmation-modal";
+export const TutorialYarn = _TutorialYarn;

package/dist/util/context/PineappleBaseContext.svelte

@@ -2,11 +2,13 @@
 	import { enableUniversalOverlaySvelte4 } from "../..";
 	import { appState } from "../../ui/templates/index";
 	import {
+		setAutoScrollPrefContext,
 		setEnableDialogOverlayContext,
 		setEnableDialogPreferenceContext,
 		setEnablePortraitContext,
 		setIgnoreOverlayOverride,
-		setOverlayTypeContext
+		setOverlayTypeContext,
+		setTextSpeedContext
 	} from "./pineappleBaseContextDefinitions.svelte";
 	import { createLocalStore } from "../localStore.svelte";
 	import { onMount } from "svelte";
@@ -15,6 +17,8 @@
 
 	setEnablePortraitContext(createLocalStore("enable-portrait"));
 	setOverlayTypeContext(createLocalStore("overlay-type"));
+	setTextSpeedContext(createLocalStore("text-speed"));
+	setAutoScrollPrefContext(createLocalStore("auto-scroll-pref"));
 
 	/**
 	 * how do we want to use this context???
@@ -30,7 +34,7 @@
 	 * c.setValue
 	 */
 
-	// special logic since we would need to change the extensions for all the typescript code if we dont
+		// special logic since we would need to change the extensions for all the typescript code if we dont
 	const enableDialogPrefStore = createLocalStore("enable-dialog-preference");
 	setEnableDialogPreferenceContext(enableDialogPrefStore);
 

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":"AAiFA,QAAA,MAAM,oBAAoB;cA7D8B,GAAG;UA6DO,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":"AAqFA,QAAA,MAAM,oBAAoB;cA/D8B,GAAG;UA+DO,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}

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

@@ -17,6 +17,8 @@ export declare const getIgnoreOverlayOverride: () => {
 }) => {
     value: boolean;
 };
+export declare const getTextSpeedContext: () => LocalStore<number>, setTextSpeedContext: (context: LocalStore<number>) => LocalStore<number>;
+export declare const getAutoScrollPrefContext: () => LocalStore<boolean>, setAutoScrollPrefContext: (context: LocalStore<boolean>) => LocalStore<boolean>;
 export declare const getSiteLayout: () => PageMeta[], setSiteLayout: (context: PageMeta[]) => PageMeta[];
 /**
  * useful for on-start dialog appearance

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,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"}
+{"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,mBAAmB,4BAAE,mBAAmB,qDAAuC,CAAC;AAC9F,eAAO,MAAO,wBAAwB,6BAAE,wBAAwB,uDAAwC,CAAC;AACzG,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

@@ -8,6 +8,8 @@ export const [getEnableDialogPreferenceContext, setEnableDialogPreferenceContext
 export const [getEnableDialogOverlayContext, setEnableDialogOverlayContext] = createContext();
 export const [getOverlayTypeContext, setOverlayTypeContext] = createContext();
 export const [getIgnoreOverlayOverride, setIgnoreOverlayOverride] = createContext();
+export const [getTextSpeedContext, setTextSpeedContext] = createContext();
+export const [getAutoScrollPrefContext, setAutoScrollPrefContext] = createContext();
 export const [getSiteLayout, setSiteLayout] = createContext();
 /**
  * useful for on-start dialog appearance

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

@@ -12,6 +12,8 @@ export interface LocalStoreRestriction {
     "enable-portrait": boolean;
     "enable-dialog-preference": boolean;
     "overlay-type": OverlayType;
+    "text-speed": number;
+    "auto-scroll-pref": boolean;
 }
 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;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"}
+{"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;IAC5B,YAAY,EAAE,MAAM,CAAC;IACrB,kBAAkB,EAAE,OAAO,CAAC;CAC5B;AAUD,eAAO,MAAM,gBAAgB,GAAI,CAAC,SAAS,MAAM,qBAAqB,EAAE,KAAK,CAAC,mDAE7E,CAAC"}

package/dist/util/localStore.svelte.js

@@ -62,6 +62,8 @@ const localStoreDefault = {
     "enable-portrait": true,
     "enable-dialog-preference": true,
     "overlay-type": 'dialog',
+    "text-speed": 9,
+    "auto-scroll-pref": true,
 };
 export const createLocalStore = (key) => {
     return new LocalStore(key, localStoreDefault[key]);

package/dist/yarn/Tutorial.yarn

@@ -0,0 +1,141 @@
+title: TutorialSetup
+position: 50,-152
+---
+Portrait: AresNeutral
+<<declare $tutorialReturnAddress = "" as string>>
+===
+title: TutorialStart
+position: 50,31
+---
+Portrait: AresHappy
+<p><b>Hello!</b> If you're here, I'm assuming you want to learn more how to use <i>conversations</i>.
+This is a <i>dialog box</i>.</p>
+<p>Texts within <i>dialog boxes</i> are <i>scrollable</i> so please <i>scroll</i> if this text overflows.</p>
+<p>Below are <i>choices</i> you can <i>click</i>. Please <b>click</b> them to see what the next dialogs look like.</p>
+
+<choice Continue>Click me to proceed to the next dialog</choice>
+<ChoiceBreak>
+
+-> Continue
+    <<jump TutorialStart2>>
+===
+title: TutorialStart2
+position: 51,244
+---
+Portrait: AresNeutral
+<<unvisit TutorialChoiceA>>
+<<unvisit TutorialChoiceB>>
+<p>You can see that <i>choices</i> are indicated with this image <img src="/yarn/icon-chat.svg" alt="dialog-icon"/>.</p>
+<p>Click any of the links that proceed the image <img src="/yarn/icon-chat.svg" alt="dialog-icon"/>.</p>
+
+<choice TutorialChoiceA>Let's go to tutorial A</choice> | <choice TutorialChoiceB>Let's go to tutorial B</choice>
+<ChoiceBreak>
+
+-> TutorialChoiceA
+    <<jump TutorialChoiceA>>
+-> TutorialChoiceB
+    <<jump TutorialChoiceB>>
+===
+title: TutorialChoiceA
+position: 316,535
+---
+Portrait: AresHappy
+<p>Click anywhere in the <i>dialog box</i> to instantly make the text appear. Sometimes, you may want to speed up the text.</p>
+<p>This is <i>dialog</i> for choice A!</p>
+<<if visited("TutorialChoiceB")>>
+    <choice TutorialMerge>Continue</choice>
+<<else>>
+    <choice TutorialChoiceB>Continue</choice>
+<<endif>>
+<ChoiceBreak>
+
+-> TutorialChoiceB
+    <<jump TutorialChoiceB>>
+-> TutorialMerge
+    <<jump TutorialMerge>>
+===
+title: TutorialChoiceB
+position: -191,497
+---
+Portrait: AresYay
+<p>Welcome to Choice B!</p>
+<p>Sometimes, I'll post links in the dialog. You'll see that <i>external links</i> are proceeded with this image <img src="/yarn/icon-open-in-new.svg" alt="external link icon"/>.</p>
+<p>Clicking any of these <i>external links</i> will send you to a new tab with the link. You can <b>hover</b> on the link, and watch on the <i>bottom corner left of your browser</i> to see where the <i>external link</i> will lead you to.</p>
+<p><a target="_blank" class="external-link" href="http://crouton.net">Check out this external link!</a></p>
+<<if visited("TutorialChoiceA")>>
+    <choice TutorialMerge>Continue</choice>
+<<else>>
+    <choice TutorialChoiceA>Continue</choice>
+<<endif>>
+<ChoiceBreak>
+
+-> TutorialChoiceA
+    <<jump TutorialChoiceA>>
+-> TutorialMerge
+    <<jump TutorialMerge>>
+===
+title: TutorialMerge
+---
+Portrait: AresSurprised
+<p>Just like opportunities and <i>external links</i>, <choice Continue>choices</choice> can appear anywhere!</p>
+<p>It can appear <choice Continue>here</choice>, <choice Continue>there</choice>, and <choice Continue>everywhere!</choice></p>
+<ChoiceBreak>
+
+-> Continue
+    <<jump TutorialChoicesResult>>
+===
+title: TutorialChoicesResult
+---
+Portrait: AresDisappointed
+<p>Just like life, I've sadly given you an illusion of <i>choice</i> since all those <i>choices</i> only lead to one outcome.
+<i>This particular dialog.</i></p>
+<choice Continue>Anyways...</choice>
+<ChoiceBreak>
+
+-> Continue
+    <<jump TutorialSettings>>
+===
+title: TutorialSettings
+---
+Portrait: AresMad
+<p>Feel free to check out the <i>Settings</i> menu by clicking the iconic <i>gear icon</i> on this dialog or on the top right of the page. You can...</p>
+<ul>
+    <li>Keep this pesky <i>dialog box</i> away all the time!</li>
+    <li>Make the <i>portrait</i> of this ugly character disappear!</li>
+    <li>Make the <i>text speed</i> faster</li>
+    <li>Disable <i>auto scroll</i></li>
+</ul>
+<br>
+<choice Continue>One last thing...</choice>
+<ChoiceBreak>
+
+-> Continue
+    <<jump TutorialDialogToggle>>
+===
+title: TutorialDialogToggle
+---
+Portrait: AresNeutral
+<p>You can toggle (open or close) the dialog by clicking the <img src="/yarn/icon-chat.svg" alt="dialog-icon"/> icon at the top right, 
+or click the close button on this <i>dialog box</i>.</p>
+<p>Try it out! You won't lose progress of our conversation.</p>
+<choice Continue>And...</choice>
+<ChoiceBreak>
+
+-> Continue
+    <<jump TutorialEnd>>
+===
+title: TutorialEnd
+---
+Portrait: AresLetsGo
+<p>And that covers everything you need to know. <b>^^</b></p>
+<<if $tutorialReturnAddress != "">>
+    <choice Return>Return</choice> |
+<<endif>>
+<choice Redo>Redo tutorial</choice>
+<ChoiceBreak>
+
+-> Return
+    <<jump {$tutorialReturnAddress}>>
+-> Redo
+    <<jump TutorialStart>>
+===