@turnipxenon/pineapple 2.4.14 → 2.4.15

package/.idea/workspace.xml

@@ -4,11 +4,8 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="accb6ba2-c343-4f84-ad30-6e2d71eceee5" name="Changes" comment="Add default PR template">
-      <change afterPath="$PROJECT_DIR$/docs/OverlaySpec.md" afterDir="false" />
-      <change afterPath="$PROJECT_DIR$/src/lib/components/pineapple/overlay_manager/OverlayManager.ts" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/lib/components/Chip.svelte" beforeDir="false" afterPath="$PROJECT_DIR$/src/lib/components/Chip.svelte" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/lib/components/pineapple/toast/Toast.svelte" beforeDir="false" afterPath="$PROJECT_DIR$/src/lib/components/pineapple/toast/Toast.svelte" afterDir="false" />
+    <list default="true" id="accb6ba2-c343-4f84-ad30-6e2d71eceee5" name="Changes" comment="Fix dialog layout to make it usable on hobby site">
+      <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -54,7 +51,12 @@
   </component>
   <component name="JsbtTreeLayoutManager">
     <layout place="tools.popupnpm">
-      <scroll-view-position x="0" y="0" />
+      <scroll-view-position x="14" y="0" />
+      <selected-paths>
+        <path>
+          <id value="$PROJECT_DIR$/../speenus/package.json" />
+        </path>
+      </selected-paths>
     </layout>
   </component>
   <component name="MarkdownSettingsMigration">
@@ -82,7 +84,7 @@
     "WebServerToolWindowFactoryState": "false",
     "git-widget-placeholder": "turnip/fix",
     "ignore.virus.scanning.warn.message": "true",
-    "last_opened_file_path": "C:/Users/Pumpkin/Projects/Web/pineapple/src/lib/components/pineapple/toast/custom-toast",
+    "last_opened_file_path": "C:/Users/Pumpkin/Projects/Web/pineapple/src/lib/scripts/pineapple_fiber",
     "node.js.detected.package.eslint": "true",
     "node.js.detected.package.tslint": "true",
     "node.js.selected.package.eslint": "(autodetect)",
@@ -102,11 +104,11 @@
 }]]></component>
   <component name="RecentsManager">
     <key name="CopyFile.RECENT_KEYS">
+      <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\lib\scripts\pineapple_fiber" />
+      <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\routes\(pineapple)\pineapple" />
       <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\lib\components\pineapple\toast\custom-toast" />
       <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\lib\components\pineapple\toast" />
       <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\routes\(pineapple)" />
-      <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\routes\(seaweed)" />
-      <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\routes\portfolio" />
     </key>
     <key name="MoveFile.RECENT_KEYS">
       <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\lib\components\pineapple\toast\custom-toast" />
@@ -201,39 +203,9 @@
       <workItem from="1710565588306" duration="339000" />
       <workItem from="1710566188907" duration="950000" />
       <workItem from="1710623596666" duration="2298000" />
-      <workItem from="1710645881933" duration="7972000" />
-    </task>
-    <task id="LOCAL-00023" summary="Implement throwoway prototype for game showcase carousel">
-      <option name="closed" value="true" />
-      <created>1709835566776</created>
-      <option name="number" value="00023" />
-      <option name="presentableId" value="LOCAL-00023" />
-      <option name="project" value="LOCAL" />
-      <updated>1709835566776</updated>
-    </task>
-    <task id="LOCAL-00024" summary="Implement sticky element">
-      <option name="closed" value="true" />
-      <created>1709837150508</created>
-      <option name="number" value="00024" />
-      <option name="presentableId" value="LOCAL-00024" />
-      <option name="project" value="LOCAL" />
-      <updated>1709837150508</updated>
-    </task>
-    <task id="LOCAL-00025" summary="Fix upgraded vite package imports">
-      <option name="closed" value="true" />
-      <created>1709837649846</created>
-      <option name="number" value="00025" />
-      <option name="presentableId" value="LOCAL-00025" />
-      <option name="project" value="LOCAL" />
-      <updated>1709837649846</updated>
-    </task>
-    <task id="LOCAL-00026" summary="Implement base layout for portfolio">
-      <option name="closed" value="true" />
-      <created>1709854774552</created>
-      <option name="number" value="00026" />
-      <option name="presentableId" value="LOCAL-00026" />
-      <option name="project" value="LOCAL" />
-      <updated>1709854774553</updated>
+      <workItem from="1710645881933" duration="8776000" />
+      <workItem from="1710721345686" duration="2025000" />
+      <workItem from="1710724001847" duration="10956000" />
     </task>
     <task id="LOCAL-00027" summary="Implement experience section">
       <option name="closed" value="true" />
@@ -595,7 +567,39 @@
       <option name="project" value="LOCAL" />
       <updated>1710651695177</updated>
     </task>
-    <option name="localTasksCounter" value="72" />
+    <task id="LOCAL-00072" summary="Fix chip in light mode">
+      <option name="closed" value="true" />
+      <created>1710654837283</created>
+      <option name="number" value="00072" />
+      <option name="presentableId" value="LOCAL-00072" />
+      <option name="project" value="LOCAL" />
+      <updated>1710654837283</updated>
+    </task>
+    <task id="LOCAL-00073" summary="2.4.14">
+      <option name="closed" value="true" />
+      <created>1710655474323</created>
+      <option name="number" value="00073" />
+      <option name="presentableId" value="LOCAL-00073" />
+      <option name="project" value="LOCAL" />
+      <updated>1710655474323</updated>
+    </task>
+    <task id="LOCAL-00074" summary="Run dialog parser in runtime">
+      <option name="closed" value="true" />
+      <created>1710731570794</created>
+      <option name="number" value="00074" />
+      <option name="presentableId" value="LOCAL-00074" />
+      <option name="project" value="LOCAL" />
+      <updated>1710731570794</updated>
+    </task>
+    <task id="LOCAL-00075" summary="Fix dialog layout to make it usable on hobby site">
+      <option name="closed" value="true" />
+      <created>1710739937750</created>
+      <option name="number" value="00075" />
+      <option name="presentableId" value="LOCAL-00075" />
+      <option name="project" value="LOCAL" />
+      <updated>1710739937750</updated>
+    </task>
+    <option name="localTasksCounter" value="76" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -633,7 +637,7 @@
                   <entry key="branch">
                     <value>
                       <list>
-                        <option value="main" />
+                        <option value="turnip/fix" />
                       </list>
                     </value>
                   </entry>
@@ -653,10 +657,6 @@
     </option>
   </component>
   <component name="VcsManagerConfiguration">
-    <MESSAGE value="Fix path for Seaweed" />
-    <MESSAGE value="Move from dist to lib for package path" />
-    <MESSAGE value="Add missing npm run package to allow dist generation" />
-    <MESSAGE value="Remove postcss reference in non root layout" />
     <MESSAGE value="Add unique class for Card" />
     <MESSAGE value="Remove unnecessary files" />
     <MESSAGE value="Fix accordion rounded border missing" />
@@ -678,6 +678,21 @@
     <MESSAGE value="Adjust default toast body styling and add shadow to toast" />
     <MESSAGE value="Clean up todos" />
     <MESSAGE value="Add default PR template" />
-    <option name="LAST_COMMIT_MESSAGE" value="Add default PR template" />
+    <MESSAGE value="Fix chip in light mode" />
+    <MESSAGE value="2.4.14" />
+    <MESSAGE value="Run dialog parser in runtime" />
+    <MESSAGE value="Fix dialog layout to make it usable on hobby site" />
+    <option name="LAST_COMMIT_MESSAGE" value="Fix dialog layout to make it usable on hobby site" />
+  </component>
+  <component name="XDebuggerManager">
+    <breakpoint-manager>
+      <breakpoints>
+        <line-breakpoint enabled="true" type="javascript">
+          <url>file://$PROJECT_DIR$/src/routes/(pineapple)/pineapple/+page.svelte</url>
+          <line>31</line>
+          <option name="timeStamp" value="1" />
+        </line-breakpoint>
+      </breakpoints>
+    </breakpoint-manager>
   </component>
 </project>

package/.svelte-kit/__package__/app.postcss

@@ -92,7 +92,7 @@ ul {
 .default-page-container {
     @apply flex justify-center items-center;
     margin-top: 4em;
-    margin-left: clamp(1em, 15vw, 10em);
+    margin-left: 1em;
     margin-right: 1em;
     flex-direction: column;
     z-index: 0;
@@ -191,3 +191,17 @@ a:active {
     background: rgba(var(--color-secondary-500));
 }
 
+.dialog-box {
+    background-color: rgb(var(--color-surface-500) / 0.9);
+    position: fixed;
+    bottom: 0;
+    width: var(--dialog-box-width); /*75em + 4em padding*/
+    height: var(--dialog-box-height);
+    max-width: calc(100vw - ((var(--fab-margin) * 2) + 4em));
+}
+
+.dark .dialog-box {
+    background-color: rgb(var(--color-surface-900) / 0.95);
+    --tw-ring-color: rgb(var(--color-text-400));
+    /*background-color: red;*/
+}

package/.svelte-kit/__package__/components/DialogOverlay.svelte

@@ -1,6 +1,7 @@
 <script>import AresHappy from "../assets/characters/ares/ares_happy.webp";
 import { onMount } from "svelte";
 import { dialogManager } from "./dialog_manager/DialogManagerStore";
+import { DialogState } from "../types/pineapple_fiber/DialogState";
 let currentMessage = "";
 dialogManager.currentMessage.subscribe((value) => {
   currentMessage = value;
@@ -15,15 +16,25 @@ onMount(() => {
   dialogManager.update(0);
 });
 let hidePercent = 100;
+let isHidden = true;
 dialogManager.hidePercent.subscribe((value) => {
   hidePercent = value * 0.4;
+  isHidden = false;
+});
+dialogManager.currentReadableState.subscribe((value) => {
+  isHidden = value === DialogState.Invisible;
+  if (value === DialogState.Invisible) {
+  }
 });
 const onDialogClick = () => {
   dialogManager.skipAnimation();
 };
 </script>
 
-<div class="dialog-elements" style="--hidePercentWidth: -{hidePercent}vw; --hidePercentHeight: {hidePercent}vh">
+<div class="dialog-elements"
+     hidden={isHidden}
+     style="--hidePercentWidth: -{hidePercent}vw;
+            --hidePercentHeight: {hidePercent}vh;">
 	<img src={currentPortrait} alt="Ares" class="dialog-portrait" />
 	<div class="card dialog-box variant-ghost-primary" on:click={onDialogClick}>
 		<div class="card dialog-name">
@@ -37,59 +48,49 @@ const onDialogClick = () => {
 </div>
 
 <style>
-	.dialog-elements {
-		position: absolute;
-		z-index: 10;
-	}
-
-	.dialog-elements > img {
-		transform: translateX(var(--hidePercentWidth));
-	}
-
-	.dialog-elements > div {
-		transform: translateY(var(--hidePercentHeight));
-	}
+    .dialog-elements {
+        position: fixed;
+        z-index: 10;
+    }
 
-	.dialog-box {
-		background-color: rgb(var(--color-surface-500) / 0.9);
-		position: fixed;
-		bottom: 0;
-		left: var(--dialog-left-pad);
+    .dialog-elements > img {
+        transform: translateX(var(--hidePercentWidth));
+    }
 
-		width: var(--dialog-box-width); /*75em + 4em padding*/
-		height: var(--dialog-box-height);
-	}
+    .dialog-elements > div {
+        transform: translateY(var(--hidePercentHeight));
+    }
 
-	.dialog-box *,
-	.dialog-name * {
-		font-size: clamp(1em, 5vw, 1.3em);
-		line-height: 1.5em;
-	}
+    .dialog-box *,
+    .dialog-name * {
+        font-size: clamp(1em, 5vw, 1.3em);
+        line-height: 1.5em;
+    }
 
-	.dialog-padding :global(p) {
-		font-size: clamp(1em, 5vw, 1.3em) !important;
-		line-height: 1.5em !important;
-	}
+    .dialog-padding :global(p) {
+        font-size: clamp(1em, 5vw, 1.3em) !important;
+        line-height: 1.5em !important;
+    }
 
-	.dialog-padding {
-		padding: clamp(1.5em, 5vw, 1.75em) clamp(0em, 5vw - 0.5em, 2em) 0;
-	}
+    .dialog-padding {
+        padding: clamp(1.5em, 5vw, 1.75em) clamp(0em, 5vw - 0.5em, 2em) 0;
+    }
 
-	.dialog-name {
-		padding-left: 1rem;
-		padding-right: 1rem;
-		padding-top: 0.5rem;
-		position: fixed;
+    .dialog-name {
+        padding-left: 1rem;
+        padding-right: 1rem;
+        padding-top: 0.5rem;
+        position: fixed;
 
-		/* for centering vertically */
-		transform: translateX(clamp(0em, 5vw - 0.5em, 1em)) translateY(-50%);
+        /* for centering vertically */
+        transform: translateX(clamp(0em, 5vw - 0.5em, 1em)) translateY(-50%);
 }
 
-	.dialog-portrait {
-		position: fixed;
-		bottom: 0;
-		left: clamp(-4rem, calc(5vw - 5em), 0rem);
-		height: clamp(30rem, 75vw, 40rem);
-		width: auto;
-	}
+    .dialog-portrait {
+        position: fixed;
+        bottom: 0;
+        left: clamp(-4rem, calc(5vw - 5em), 0rem);
+        height: clamp(30rem, 75vw, 40rem);
+        width: auto;
+    }
 </style>

package/.svelte-kit/__package__/components/dialog_manager/DialogManager.d.ts

@@ -8,7 +8,7 @@ import { DialogProcessor } from "./DialogProcessor";
 export type OnSetDialogChoiceCallback = (newMessage: DialogDetail) => void;
 export declare class DialogManager {
     dialogMessageMap: Map<string, DialogDetail>;
-    dialogMessageList: DialogDetail[];
+    currentDialogTree: DialogDetail[];
     fullCurrentMessage: string;
     currentMessageMeta: DialogDetail;
     currentMessage: import("svelte/store").Writable<string>;
@@ -18,12 +18,14 @@ export declare class DialogManager {
     currentPortrait: import("svelte/store").Writable<unknown>;
     portraitMap: Map<string, any>;
     currentState: DialogState;
+    currentReadableState: import("svelte/store").Writable<DialogState>;
     hidePercent: import("svelte/motion").Tweened<number>;
     skipNextActiveTime: number;
     dialogProcessor: DialogProcessor;
     _setDialogChoiceQueue: DialogDetail[];
     _setDialogChoiceMutex: boolean;
     onSetDialogListeners: OnSetDialogChoiceCallback[];
+    enableDialogueOverlayCache: boolean;
     constructor();
     /**
      * when users interact with the dialog, they can skip the transition like in a game
@@ -39,9 +41,9 @@ export declare class DialogManager {
      * sets the possible dialog that might appear on the Dialog UI
      * note that it overwrites the previous tree and does not append on it due to the possibility
      * of node name conflicts
-     * @param newMessageList
+     * @param newDialogTree
      */
-    setDialogTree: (newMessageList: DialogDetail[]) => void;
+    setDialogTree: (newDialogTree: DialogDetail[]) => void;
     /**
      * Remember to call this before SetDialogTree
      * and unsubscribe during onDestroy
@@ -74,4 +76,7 @@ export declare class DialogManager {
      * ISSUE #81 https://github.com/TurnipXenon/pineapple/issues/81
      */
     update: (timestamp: number) => void;
+    enableDialogOverlay(enable: boolean): void;
+    toggleDialogOverlay(): void;
+    parseAndSetDialogTree(dialogYarn: string): Promise<DialogDetail[]>;
 }

package/.svelte-kit/__package__/components/dialog_manager/DialogManager.js

@@ -4,7 +4,7 @@
 import { writable } from "svelte/store";
 import { DialogState } from "../../types/pineapple_fiber/DialogState";
 import { tweened } from "svelte/motion";
-import { cubicOut } from "svelte/easing";
+import { backOut } from "svelte/easing";
 import { PortraitType } from "../../types/pineapple_fiber/PortraitType";
 import AresHappy from "../../assets/characters/ares/ares_happy.webp";
 import AresBlushing from "../../assets/characters/ares/ares_blushing.webp";
@@ -17,10 +17,11 @@ import AresSurprised from "../../assets/characters/ares/ares_surprised.webp";
 import AresYay from "../../assets/characters/ares/ares_yay.webp";
 import { defaultDialogMessage, dialogVariableStore, enableDialogueOverlay, updateRate } from "./DialogManagerStore";
 import { DialogProcessor } from "./DialogProcessor";
+import { parseYarn } from "../../scripts/pineapple_fiber/PineappleFiberParser";
 const shouldDebugYarn = false;
 export class DialogManager {
     dialogMessageMap = new Map();
-    dialogMessageList = [];
+    currentDialogTree = [];
     fullCurrentMessage = defaultDialogMessage[0].textContent;
     currentMessageMeta = defaultDialogMessage[0];
     currentMessage = writable("");
@@ -30,9 +31,10 @@ export class DialogManager {
     currentPortrait = writable();
     portraitMap = new Map();
     currentState = DialogState.Visible;
+    currentReadableState = writable(this.currentState);
     hidePercent = tweened(100, {
         duration: 400,
-        easing: cubicOut
+        easing: backOut
     }); // 100 = 100%
     skipNextActiveTime = 0;
     dialogProcessor = new DialogProcessor();
@@ -40,16 +42,23 @@ export class DialogManager {
     _setDialogChoiceQueue = [];
     _setDialogChoiceMutex = false;
     onSetDialogListeners = [];
+    enableDialogueOverlayCache = false;
     constructor() {
         enableDialogueOverlay.subscribe((value) => {
             // todo: investigate why we cant put setDialogDefault inside the then clause
             // ISSUE #82 https://github.com/TurnipXenon/pineapple/issues/82
+            this.enableDialogueOverlayCache = value;
             if (value) {
-                this.hidePercent.set(0);
-                this.setDialogToDefault();
+                this.hidePercent.set(0).then(() => {
+                    this.currentState = DialogState.Visible;
+                    this.currentReadableState.set(this.currentState);
+                });
             }
             else {
-                this.hidePercent.set(100);
+                this.hidePercent.set(100).then(() => {
+                    this.currentState = DialogState.Invisible;
+                    this.currentReadableState.set(this.currentState);
+                });
                 this.setDialogTree([{ textContent: "" }]);
             }
         });
@@ -78,12 +87,12 @@ export class DialogManager {
      * sets the possible dialog that might appear on the Dialog UI
      * note that it overwrites the previous tree and does not append on it due to the possibility
      * of node name conflicts
-     * @param newMessageList
+     * @param newDialogTree
      */
-    setDialogTree = (newMessageList) => {
-        this.dialogMessageList = newMessageList;
+    setDialogTree = (newDialogTree) => {
+        this.currentDialogTree = newDialogTree;
         this.dialogMessageMap.clear();
-        newMessageList.map((value) => {
+        newDialogTree.map((value) => {
             if (value.dialogId) {
                 this.dialogMessageMap.set(value.dialogId, value);
             }
@@ -100,7 +109,7 @@ export class DialogManager {
             this.portraitMap.set(PortraitType.AresSurprised.toString(), AresSurprised);
             this.portraitMap.set(PortraitType.AresYay.toString(), AresYay);
         }
-        this.setDialogChoice(newMessageList[0]);
+        this.setDialogChoice(newDialogTree[0]);
     };
     /**
      * Remember to call this before SetDialogTree
@@ -236,4 +245,19 @@ export class DialogManager {
         ++this.currentIndex;
         window.requestAnimationFrame(this.update);
     };
+    enableDialogOverlay(enable) {
+        enableDialogueOverlay.set(enable);
+    }
+    toggleDialogOverlay() {
+        enableDialogueOverlay.set(!this.enableDialogueOverlayCache);
+    }
+    ;
+    async parseAndSetDialogTree(dialogYarn) {
+        return parseYarn(dialogYarn)
+            .then((dialogTree) => {
+            console.log(dialogTree);
+            this.setDialogTree(dialogTree);
+            return dialogTree;
+        });
+    }
 }

package/.svelte-kit/__package__/components/dialog_manager/DialogManagerStore.js

@@ -26,7 +26,7 @@ export const updateRate = 40 / 1000; // *at least* 40ms per letter
 // todo: if we go through doing yarn to typescript, move this!
 export const defaultDialogMessage = [
     {
-        textContent: `<p>Have you drank water? Or perhaps, you've checked out <a target="_blank" class="external-link" href="http://crouton.net">one of the best webpages</a> out there?`
+        textContent: `<p>I don't really have anything to say. Have you drank water? Or perhaps, you've checked out <a target="_blank" class="external-link" href="http://crouton.net">one of the best webpages</a> out there?`
     }
 ];
 /**

package/.svelte-kit/__package__/components/layouts/SeaweedBaseLayout.svelte

@@ -56,8 +56,8 @@ let shouldDisplaySocialIcons = writable(false);
 
 <style>
     :root {
-        --dialog-left-pad: clamp(0em, 5vw, 2em);
-        --dialog-box-width: min(calc(50em + 4em), calc(100vw - var(--dialog-left-pad) - var(--theme-border-base)));
+        --dialog-start-pad: clamp(0em, 5vw, 2em);
+        --dialog-box-width: min(calc(50em + 4em), calc(100vw - var(--dialog-start-pad) - var(--theme-border-base)));
         --dialog-box-height: clamp(15em, 50vw, 18em);
     }
 

package/.svelte-kit/__package__/components/pineapple/PineappleBaseLayout.svelte

@@ -4,8 +4,10 @@ import { page } from "$app/stores";
 import { enableBackground } from "../../store";
 import AresLogo from "../../assets/characters/ares/ares_logo.webp";
 import FABIcon from "../../assets/placeholder/placeholder_circle.png";
-import { enableDialogueOverlay } from "../dialog_manager/DialogManagerStore";
+import CloseIcon from "../../assets/icons/close.svg";
+import { dialogManager, enableDialogueOverlay } from "../dialog_manager/DialogManagerStore";
 import Toast from "./toast/Toast.svelte";
+import DialogOverlay from "../DialogOverlay.svelte";
 let pages = [];
 const updateBreadcrumb = (pathname) => {
   pages = [];
@@ -40,6 +42,7 @@ let enableDialogueOverlayValue = true;
 enableDialogueOverlay.subscribe((value) => {
   enableDialogueOverlayValue = value;
 });
+enableDialogueOverlay.set(false);
 </script>
 
 <!-- App Shell -->
@@ -49,9 +52,13 @@ enableDialogueOverlay.subscribe((value) => {
 
 <!--todo: turn off hidden when it's time-->
 <button type="button" class="fab" on:click={()=>{
-    enableDialogueOverlay.set(!enableDialogueOverlayValue);
+	dialogManager.toggleDialogOverlay()
 }}>
-	<img src={FABIcon} alt="interactive floating action button represented as a turnip">
+	{#if (enableDialogueOverlayValue)}
+		<img class="img-icon" src={CloseIcon} alt="interactive floating action button represented as a turnip">
+	{:else }
+		<img src={FABIcon} alt="interactive floating action button represented as a turnip">
+	{/if}
 </button>
 
 <AppShell>
@@ -92,6 +99,8 @@ enableDialogueOverlay.subscribe((value) => {
 
 	<Toast></Toast>
 
+	<DialogOverlay></DialogOverlay>
+
 	<div class="default-page-container">
 		<slot />
 		<div class="footer-space" />
@@ -111,8 +120,8 @@ enableDialogueOverlay.subscribe((value) => {
 
 <style>
     :root {
-        --dialog-left-pad: clamp(0em, 5vw, 2em);
-        --dialog-box-width: min(calc(50em + 4em), calc(100vw - var(--dialog-left-pad) - var(--theme-border-base)));
+        --dialog-start-pad: clamp(0em, 5vw, 2em);
+        --dialog-box-width: min(calc(50em + 4em), calc(100vw - var(--dialog-start-pad) - var(--theme-border-base)));
         --dialog-box-height: clamp(15em, 50vw, 18em);
 
         /** FAB icon margin/position calculation origin:
@@ -134,7 +143,6 @@ enableDialogueOverlay.subscribe((value) => {
         align-items: center;
         justify-content: center;
         margin-top: 4em;
-        margin-left: clamp(1em, 15vw, 10em);
         margin-right: 1em;
         flex-direction: column;
         z-index: 0;
@@ -222,6 +230,10 @@ enableDialogueOverlay.subscribe((value) => {
         border-radius: 50%;
     }
 
+    .fab > img {
+        width: 100%;
+    }
+
     .fab:dir(ltr) {
         right: var(--fab-margin);
     }

package/.svelte-kit/__package__/components/pineapple/toast/Toast.svelte

@@ -77,6 +77,7 @@ const dismissToast = () => {
         position: fixed;
         /* 12em = this component's margin (4em) + fab margin + width (8em) */
         max-width: calc(100vw - 12em);
+		    z-index: 100;
     }
 
     .toast-positioner:dir(ltr) {

package/.svelte-kit/__package__/scripts/pineapple_fiber/PineappleFiberParser.d.ts

@@ -0,0 +1,2 @@
+import type { DialogDetail } from "../../types/pineapple_fiber/DialogDetail";
+export declare const parseYarn: (fileContent: string) => Promise<DialogDetail[]>;