@turnipxenon/pineapple 2.4.17 → 2.4.19

package/.idea/workspace.xml

@@ -4,9 +4,15 @@
     <option name="autoReloadType" value="SELECTIVE" />
   </component>
   <component name="ChangeListManager">
-    <list default="true" id="accb6ba2-c343-4f84-ad30-6e2d71eceee5" name="Changes" comment="Export Card">
-      <change beforePath="$PROJECT_DIR$/package.json" beforeDir="false" afterPath="$PROJECT_DIR$/package.json" afterDir="false" />
-      <change beforePath="$PROJECT_DIR$/src/routes/(pineapple)/pineapple/+page.svelte" beforeDir="false" afterPath="$PROJECT_DIR$/src/routes/(pineapple)/pineapple/+page.svelte" afterDir="false" />
+    <list default="true" id="accb6ba2-c343-4f84-ad30-6e2d71eceee5" name="Changes" comment="Replace all $lib to $pkg">
+      <change afterPath="$PROJECT_DIR$/src/lib/util/util.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/lib/components/Card.svelte" beforeDir="false" afterPath="$PROJECT_DIR$/src/lib/components/Card.svelte" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/lib/components/RandomizedBackground.svelte" beforeDir="false" afterPath="$PROJECT_DIR$/src/lib/components/RandomizedBackground.svelte" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/lib/components/pineapple/PineappleBaseLayout.svelte" beforeDir="false" afterPath="$PROJECT_DIR$/src/lib/components/pineapple/PineappleBaseLayout.svelte" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/lib/index.ts" beforeDir="false" afterPath="$PROJECT_DIR$/src/lib/index.ts" afterDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/lib/util/create_go_to_function.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/lib/util/stable_random.ts" beforeDir="false" />
+      <change beforePath="$PROJECT_DIR$/src/routes/(pineapple)/+page.svelte" beforeDir="false" afterPath="$PROJECT_DIR$/src/routes/(pineapple)/+page.svelte" afterDir="false" />
     </list>
     <option name="SHOW_DIALOG" value="false" />
     <option name="HIGHLIGHT_CONFLICTS" value="true" />
@@ -118,6 +124,9 @@
       <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\routes\(pineapple)" />
       <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\routes\(seaweed)" />
     </key>
+    <key name="es6.move.members.recent.items">
+      <recent name="C:\Users\Pumpkin\Projects\Web\pineapple\src\lib\util\util.ts" />
+    </key>
   </component>
   <component name="RunManager" selected="npm.dev --open">
     <configuration name="dev --open" type="js.build_tools.npm" temporary="true" nameIsGenerated="true">
@@ -211,15 +220,7 @@
       <workItem from="1710914868232" duration="41000" />
       <workItem from="1711051949931" duration="144000" />
       <workItem from="1711052377810" duration="128000" />
-      <workItem from="1711090540281" duration="1759000" />
-    </task>
-    <task id="LOCAL-00029" summary="Add game section">
-      <option name="closed" value="true" />
-      <created>1709926810058</created>
-      <option name="number" value="00029" />
-      <option name="presentableId" value="LOCAL-00029" />
-      <option name="project" value="LOCAL" />
-      <updated>1709926810058</updated>
+      <workItem from="1711090540281" duration="4426000" />
     </task>
     <task id="LOCAL-00030" summary="Migrate to skeleton 2.0">
       <option name="closed" value="true" />
@@ -605,7 +606,15 @@
       <option name="project" value="LOCAL" />
       <updated>1711093190088</updated>
     </task>
-    <option name="localTasksCounter" value="78" />
+    <task id="LOCAL-00078" summary="Replace all $lib to $pkg">
+      <option name="closed" value="true" />
+      <created>1711093944293</created>
+      <option name="number" value="00078" />
+      <option name="presentableId" value="LOCAL-00078" />
+      <option name="project" value="LOCAL" />
+      <updated>1711093944293</updated>
+    </task>
+    <option name="localTasksCounter" value="79" />
     <servers />
   </component>
   <component name="TypeScriptGeneratedFilesManager">
@@ -643,7 +652,7 @@
                   <entry key="branch">
                     <value>
                       <list>
-                        <option value="turnip/fix" />
+                        <option value="turnip/dev" />
                       </list>
                     </value>
                   </entry>
@@ -663,7 +672,6 @@
     </option>
   </component>
   <component name="VcsManagerConfiguration">
-    <MESSAGE value="Fix accordion rounded border missing" />
     <MESSAGE value="v2.4.6" />
     <MESSAGE value="Extract styling out of Skeleton accordion" />
     <MESSAGE value="Attempt to make postcss exportable" />
@@ -688,17 +696,7 @@
     <MESSAGE value="Fix dialog layout to make it usable on hobby site" />
     <MESSAGE value="Add option to set default dialog behavior in Pineapple" />
     <MESSAGE value="Export Card" />
-    <option name="LAST_COMMIT_MESSAGE" value="Export Card" />
-  </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>
+    <MESSAGE value="Replace all $lib to $pkg" />
+    <option name="LAST_COMMIT_MESSAGE" value="Replace all $lib to $pkg" />
   </component>
 </project>

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

@@ -7,6 +7,9 @@ const style = `
 		--turnip-card-margin-bottom: ${marginBottom};
 		${overrideStyle};
 	`;
+if (!$$slots.content) {
+  console.error("Missing content slot in card. No content will be displayed.");
+}
 </script>
 
 {#if (includeDataNoSnippet)}

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

@@ -1,11 +1,11 @@
-<script>import { generatedDailySeed, mulberry32Generator } from "../util/stable_random";
-import BgTiledAres from "../assets/bg_tiled/bg_tiled_ares.png";
+<script>import BgTiledAres from "../assets/bg_tiled/bg_tiled_ares.png";
 import BgTiledCorn from "../assets/bg_tiled/bg_tiled_corn.png";
 import BgTiledPineapple from "../assets/bg_tiled/bg_tiled_pineapple.png";
 import BgTiledReinhard from "../assets/bg_tiled/bg_tiled_reinhard.png";
 import BgTiledTomato from "../assets/bg_tiled/bg_tiled_tomato.png";
 import BgTiledTurnip from "../assets/bg_tiled/bg_tiled_turnip.png";
 import RandomizedImage from "./RandomizedImage.svelte";
+import { generatedDailySeed, mulberry32Generator } from "../util/util";
 export let enable;
 const imageList = [BgTiledAres, BgTiledCorn, BgTiledPineapple, BgTiledReinhard, BgTiledTomato, BgTiledTurnip];
 const seed = generatedDailySeed();

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

@@ -9,6 +9,7 @@ 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";
+import { crossfade } from "svelte/transition";
 let pages = [];
 const updateBreadcrumb = (pathname) => {
   pages = [];
@@ -80,12 +81,12 @@ enableDialogueOverlay.set(showDialogByDefault);
 				<ol class="breadcrumb">
 					{#each pages as crumb, i}
 						{#if i < pages.length - 1}
-							<li class="crumb">
+							<li class="crumb" transition:crossfade>
 								<a href={crumb.path}>{crumb.name.charAt(0).toUpperCase() + crumb.name.slice(1)}</a>
+							  &nbsp;&rsaquo;
 							</li>
-							<li class="crumb-separator" aria-hidden="true">&rsaquo;</li>
 						{:else}
-							<li class="crumb">{crumb.name.charAt(0).toUpperCase() + crumb.name.slice(1)}</li>
+							<li class="crumb" transition:crossfade>{crumb.name.charAt(0).toUpperCase() + crumb.name.slice(1)}</li>
 						{/if}
 					{/each}
 				</ol>
@@ -106,17 +107,7 @@ enableDialogueOverlay.set(showDialogByDefault);
 		<slot />
 		<div class="footer-space" />
 	</div>
-	<!--{#if enableDialogueOverlayValue}-->
-	<!--	&lt;!&ndash; Page Route Content &ndash;&gt;-->
-	<!--	<div class="default-page-container">-->
-	<!--		<slot />-->
-	<!--		<div class="footer-space" />-->
-	<!--	</div>-->
-	<!--	<DialogOverlay />-->
-	<!--{:else}-->
-	<!--	<DialogOverlay />-->
-	<!--	<slot />-->
-	<!--{/if}-->
+
 </AppShell>
 
 <style>
@@ -166,15 +157,6 @@ enableDialogueOverlay.set(showDialogByDefault);
         display: flex;
         width: 100%;
         align-items: center;
-}
-    .breadcrumb > :not([hidden]) ~ :not([hidden]),
-    .breadcrumb-nonresponsive > :not([hidden]) ~ :not([hidden]) {
-        --tw-space-x-reverse: 0;
-        margin-right: calc(1rem * var(--tw-space-x-reverse));
-        margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
-}
-    .breadcrumb,
-    .breadcrumb-nonresponsive {
         overflow-x: auto;
         /*@apply flex items-center space-x-4 w-full hide-scrollbar overflow-x-auto;*/
 }
@@ -185,24 +167,9 @@ enableDialogueOverlay.set(showDialogByDefault);
         justify-content: center;
 }
 
-    .crumb > :not([hidden]) ~ :not([hidden]) {
-        --tw-space-x-reverse: 0;
-        margin-right: calc(0.5rem * var(--tw-space-x-reverse));
-        margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
-}
-
-    .dark .crumb-separator {
-        color: rgb(var(--color-surface-200));
-}
-
     .crumb-separator {
         display: flex;
-        opacity: 0.5;
-        color: rgb(var(--color-surface-700));
-}
-
-    .dark .crumb-separator {
-        color: rgb(var(--color-surface-200));
+        color: var(--color-text-50);
 }
 
     /* === Auto-Responsive === */

package/.svelte-kit/__package__/index.d.ts

@@ -7,4 +7,6 @@ export * from "./components/dialog_manager/DialogManager";
 export * from "./components/dialog_manager/DialogUtils";
 export * from "./types/pineapple_fiber/PortraitType";
 export * from "./types/pineapple_fiber/DialogDetail";
-export * from "./util/stable_random";
+export * from "./util/util";
+export { mulberry32Generator } from "./util/util";
+export { generatedDailySeed } from "./util/util";

package/.svelte-kit/__package__/index.js

@@ -7,4 +7,6 @@ export * from "./components/dialog_manager/DialogManager";
 export * from "./components/dialog_manager/DialogUtils";
 export * from "./types/pineapple_fiber/PortraitType";
 export * from "./types/pineapple_fiber/DialogDetail";
-export * from "./util/stable_random";
+export * from "./util/util";
+export { mulberry32Generator } from "./util/util";
+export { generatedDailySeed } from "./util/util";

package/{dist/util/stable_random.d.ts → .svelte-kit/__package__/util/util.d.ts}

@@ -1,2 +1,3 @@
 export declare const generatedDailySeed: () => number;
 export declare const mulberry32Generator: (a: number) => (() => number);
+export declare const createGoToFunction: (path: string) => (() => void);

package/{dist/util/stable_random.js → .svelte-kit/__package__/util/util.js}

@@ -13,3 +13,8 @@ export const mulberry32Generator = (a) => {
         return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
     };
 };
+export const createGoToFunction = (path) => {
+    return (() => {
+        location.href = path;
+    });
+};

package/.svelte-kit/generated/server/internal.js

@@ -21,7 +21,7 @@ export const options = {
 		app: ({ head, body, assets, nonce, env }) => "<!DOCTYPE html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\" />\n\t\t<link rel=\"icon\" href=\"" + assets + "/favicon.png\" />\n\t\t<meta name=\"viewport\" content=\"width=device-width\" />\n\t\t" + head + "\n\t</head>\n\n\t<body data-sveltekit-preload-data=\"hover\" data-theme=\"crimson\">\n\t\t<div style=\"display: contents\" class=\"h-full overflow-hidden\">" + body + "</div>\n\t</body>\n</html>\n",
 		error: ({ status, message }) => "<!doctype html>\n<html lang=\"en\">\n\t<head>\n\t\t<meta charset=\"utf-8\" />\n\t\t<title>" + message + "</title>\n\n\t\t<style>\n\t\t\tbody {\n\t\t\t\t--bg: white;\n\t\t\t\t--fg: #222;\n\t\t\t\t--divider: #ccc;\n\t\t\t\tbackground: var(--bg);\n\t\t\t\tcolor: var(--fg);\n\t\t\t\tfont-family:\n\t\t\t\t\tsystem-ui,\n\t\t\t\t\t-apple-system,\n\t\t\t\t\tBlinkMacSystemFont,\n\t\t\t\t\t'Segoe UI',\n\t\t\t\t\tRoboto,\n\t\t\t\t\tOxygen,\n\t\t\t\t\tUbuntu,\n\t\t\t\t\tCantarell,\n\t\t\t\t\t'Open Sans',\n\t\t\t\t\t'Helvetica Neue',\n\t\t\t\t\tsans-serif;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tjustify-content: center;\n\t\t\t\theight: 100vh;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t.error {\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t\tmax-width: 32rem;\n\t\t\t\tmargin: 0 1rem;\n\t\t\t}\n\n\t\t\t.status {\n\t\t\t\tfont-weight: 200;\n\t\t\t\tfont-size: 3rem;\n\t\t\t\tline-height: 1;\n\t\t\t\tposition: relative;\n\t\t\t\ttop: -0.05rem;\n\t\t\t}\n\n\t\t\t.message {\n\t\t\t\tborder-left: 1px solid var(--divider);\n\t\t\t\tpadding: 0 0 0 1rem;\n\t\t\t\tmargin: 0 0 0 1rem;\n\t\t\t\tmin-height: 2.5rem;\n\t\t\t\tdisplay: flex;\n\t\t\t\talign-items: center;\n\t\t\t}\n\n\t\t\t.message h1 {\n\t\t\t\tfont-weight: 400;\n\t\t\t\tfont-size: 1em;\n\t\t\t\tmargin: 0;\n\t\t\t}\n\n\t\t\t@media (prefers-color-scheme: dark) {\n\t\t\t\tbody {\n\t\t\t\t\t--bg: #222;\n\t\t\t\t\t--fg: #ddd;\n\t\t\t\t\t--divider: #666;\n\t\t\t\t}\n\t\t\t}\n\t\t</style>\n\t</head>\n\t<body>\n\t\t<div class=\"error\">\n\t\t\t<span class=\"status\">" + status + "</span>\n\t\t\t<div class=\"message\">\n\t\t\t\t<h1>" + message + "</h1>\n\t\t\t</div>\n\t\t</div>\n\t</body>\n</html>\n"
 	},
-	version_hash: "1v14hx1"
+	version_hash: "1nuybzt"
 };
 
 export async function get_hooks() {

package/dist/components/Card.svelte

@@ -7,6 +7,9 @@ const style = `
 		--turnip-card-margin-bottom: ${marginBottom};
 		${overrideStyle};
 	`;
+if (!$$slots.content) {
+  console.error("Missing content slot in card. No content will be displayed.");
+}
 </script>
 
 {#if (includeDataNoSnippet)}

package/dist/components/RandomizedBackground.svelte

@@ -1,11 +1,11 @@
-<script>import { generatedDailySeed, mulberry32Generator } from "../util/stable_random";
-import BgTiledAres from "../assets/bg_tiled/bg_tiled_ares.png";
+<script>import BgTiledAres from "../assets/bg_tiled/bg_tiled_ares.png";
 import BgTiledCorn from "../assets/bg_tiled/bg_tiled_corn.png";
 import BgTiledPineapple from "../assets/bg_tiled/bg_tiled_pineapple.png";
 import BgTiledReinhard from "../assets/bg_tiled/bg_tiled_reinhard.png";
 import BgTiledTomato from "../assets/bg_tiled/bg_tiled_tomato.png";
 import BgTiledTurnip from "../assets/bg_tiled/bg_tiled_turnip.png";
 import RandomizedImage from "./RandomizedImage.svelte";
+import { generatedDailySeed, mulberry32Generator } from "../util/util";
 export let enable;
 const imageList = [BgTiledAres, BgTiledCorn, BgTiledPineapple, BgTiledReinhard, BgTiledTomato, BgTiledTurnip];
 const seed = generatedDailySeed();

package/dist/components/pineapple/PineappleBaseLayout.svelte

@@ -9,6 +9,7 @@ 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";
+import { crossfade } from "svelte/transition";
 let pages = [];
 const updateBreadcrumb = (pathname) => {
   pages = [];
@@ -80,12 +81,12 @@ enableDialogueOverlay.set(showDialogByDefault);
 				<ol class="breadcrumb">
 					{#each pages as crumb, i}
 						{#if i < pages.length - 1}
-							<li class="crumb">
+							<li class="crumb" transition:crossfade>
 								<a href={crumb.path}>{crumb.name.charAt(0).toUpperCase() + crumb.name.slice(1)}</a>
+							  &nbsp;&rsaquo;
 							</li>
-							<li class="crumb-separator" aria-hidden="true">&rsaquo;</li>
 						{:else}
-							<li class="crumb">{crumb.name.charAt(0).toUpperCase() + crumb.name.slice(1)}</li>
+							<li class="crumb" transition:crossfade>{crumb.name.charAt(0).toUpperCase() + crumb.name.slice(1)}</li>
 						{/if}
 					{/each}
 				</ol>
@@ -106,17 +107,7 @@ enableDialogueOverlay.set(showDialogByDefault);
 		<slot />
 		<div class="footer-space" />
 	</div>
-	<!--{#if enableDialogueOverlayValue}-->
-	<!--	&lt;!&ndash; Page Route Content &ndash;&gt;-->
-	<!--	<div class="default-page-container">-->
-	<!--		<slot />-->
-	<!--		<div class="footer-space" />-->
-	<!--	</div>-->
-	<!--	<DialogOverlay />-->
-	<!--{:else}-->
-	<!--	<DialogOverlay />-->
-	<!--	<slot />-->
-	<!--{/if}-->
+
 </AppShell>
 
 <style>
@@ -166,15 +157,6 @@ enableDialogueOverlay.set(showDialogByDefault);
         display: flex;
         width: 100%;
         align-items: center;
-}
-    .breadcrumb > :not([hidden]) ~ :not([hidden]),
-    .breadcrumb-nonresponsive > :not([hidden]) ~ :not([hidden]) {
-        --tw-space-x-reverse: 0;
-        margin-right: calc(1rem * var(--tw-space-x-reverse));
-        margin-left: calc(1rem * calc(1 - var(--tw-space-x-reverse)));
-}
-    .breadcrumb,
-    .breadcrumb-nonresponsive {
         overflow-x: auto;
         /*@apply flex items-center space-x-4 w-full hide-scrollbar overflow-x-auto;*/
 }
@@ -185,24 +167,9 @@ enableDialogueOverlay.set(showDialogByDefault);
         justify-content: center;
 }
 
-    .crumb > :not([hidden]) ~ :not([hidden]) {
-        --tw-space-x-reverse: 0;
-        margin-right: calc(0.5rem * var(--tw-space-x-reverse));
-        margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
-}
-
-    .dark .crumb-separator {
-        color: rgb(var(--color-surface-200));
-}
-
     .crumb-separator {
         display: flex;
-        opacity: 0.5;
-        color: rgb(var(--color-surface-700));
-}
-
-    .dark .crumb-separator {
-        color: rgb(var(--color-surface-200));
+        color: var(--color-text-50);
 }
 
     /* === Auto-Responsive === */

package/dist/index.d.ts

@@ -7,4 +7,6 @@ export * from "./components/dialog_manager/DialogManager";
 export * from "./components/dialog_manager/DialogUtils";
 export * from "./types/pineapple_fiber/PortraitType";
 export * from "./types/pineapple_fiber/DialogDetail";
-export * from "./util/stable_random";
+export * from "./util/util";
+export { mulberry32Generator } from "./util/util";
+export { generatedDailySeed } from "./util/util";

package/dist/index.js

@@ -7,4 +7,6 @@ export * from "./components/dialog_manager/DialogManager";
 export * from "./components/dialog_manager/DialogUtils";
 export * from "./types/pineapple_fiber/PortraitType";
 export * from "./types/pineapple_fiber/DialogDetail";
-export * from "./util/stable_random";
+export * from "./util/util";
+export { mulberry32Generator } from "./util/util";
+export { generatedDailySeed } from "./util/util";

package/{.svelte-kit/__package__/util/stable_random.d.ts → dist/util/util.d.ts}

@@ -1,2 +1,3 @@
 export declare const generatedDailySeed: () => number;
 export declare const mulberry32Generator: (a: number) => (() => number);
+export declare const createGoToFunction: (path: string) => (() => void);

package/{.svelte-kit/__package__/util/stable_random.js → dist/util/util.js}

@@ -13,3 +13,8 @@ export const mulberry32Generator = (a) => {
         return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
     };
 };
+export const createGoToFunction = (path) => {
+    return (() => {
+        location.href = path;
+    });
+};

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@turnipxenon/pineapple",
   "description": "personal package for base styling for other personal projects",
-  "version": "2.4.17",
+  "version": "2.4.19",
   "scripts": {
     "dev": "vite dev",
     "build": "npm run check-requirements && vite build && yarn package",

package/src/lib/components/Card.svelte

@@ -10,6 +10,10 @@
 		--turnip-card-margin-bottom: ${marginBottom};
 		${overrideStyle};
 	`;
+
+	if (!$$slots.content) {
+		console.error("Missing content slot in card. No content will be displayed.");
+	}
 </script>
 
 {#if (includeDataNoSnippet)}

package/src/lib/components/RandomizedBackground.svelte

@@ -1,5 +1,4 @@
 <script lang="ts">
-	import { generatedDailySeed, mulberry32Generator } from "$lib/util/stable_random";
 	import BgTiledAres from "$lib/assets/bg_tiled/bg_tiled_ares.png";
 	import BgTiledCorn from "$lib/assets/bg_tiled/bg_tiled_corn.png";
 	import BgTiledPineapple from "$lib/assets/bg_tiled/bg_tiled_pineapple.png";
@@ -7,6 +6,7 @@
 	import BgTiledTomato from "$lib/assets/bg_tiled/bg_tiled_tomato.png";
 	import BgTiledTurnip from "$lib/assets/bg_tiled/bg_tiled_turnip.png";
 	import RandomizedImage from "$lib/components/RandomizedImage.svelte";
+	import { generatedDailySeed, mulberry32Generator } from "$pkg/util/util";
 
 	export let enable;
 

package/src/lib/components/pineapple/PineappleBaseLayout.svelte

@@ -18,6 +18,7 @@
 	import { dialogManager, enableDialogueOverlay } from "$pkg/components/dialog_manager/DialogManagerStore";
 	import Toast from "$pkg/components/pineapple/toast/Toast.svelte";
 	import DialogOverlay from "$pkg/components/DialogOverlay.svelte";
+	import { crossfade } from "svelte/transition";
 	// todo: clean up all these imports!
 
 	let pages: BreadcrumbData[] = [];
@@ -97,12 +98,12 @@
 				<ol class="breadcrumb">
 					{#each pages as crumb, i}
 						{#if i < pages.length - 1}
-							<li class="crumb">
+							<li class="crumb" transition:crossfade>
 								<a href={crumb.path}>{crumb.name.charAt(0).toUpperCase() + crumb.name.slice(1)}</a>
+							  &nbsp;&rsaquo;
 							</li>
-							<li class="crumb-separator" aria-hidden="true">&rsaquo;</li>
 						{:else}
-							<li class="crumb">{crumb.name.charAt(0).toUpperCase() + crumb.name.slice(1)}</li>
+							<li class="crumb" transition:crossfade>{crumb.name.charAt(0).toUpperCase() + crumb.name.slice(1)}</li>
 						{/if}
 					{/each}
 				</ol>
@@ -123,17 +124,7 @@
 		<slot />
 		<div class="footer-space" />
 	</div>
-	<!--{#if enableDialogueOverlayValue}-->
-	<!--	&lt;!&ndash; Page Route Content &ndash;&gt;-->
-	<!--	<div class="default-page-container">-->
-	<!--		<slot />-->
-	<!--		<div class="footer-space" />-->
-	<!--	</div>-->
-	<!--	<DialogOverlay />-->
-	<!--{:else}-->
-	<!--	<DialogOverlay />-->
-	<!--	<slot />-->
-	<!--{/if}-->
+
 </AppShell>
 
 <style lang="postcss">
@@ -177,16 +168,17 @@
        it likely disappeared due to code gen shenanigans and package magic */
     .breadcrumb,
     .breadcrumb-nonresponsive {
-        @apply flex items-center space-x-4 w-full overflow-x-auto;
+        @apply flex items-center w-full overflow-x-auto;
         /*@apply flex items-center space-x-4 w-full hide-scrollbar overflow-x-auto;*/
     }
 
     .crumb {
-        @apply flex justify-center items-center space-x-2;
+        @apply flex justify-center items-center;
     }
 
     .crumb-separator {
-        @apply flex text-surface-700-200-token opacity-50;
+        @apply flex;
+        color: var(--color-text-50);
     }
 
     /* === Auto-Responsive === */

package/src/lib/index.ts

@@ -8,4 +8,6 @@ export * from "./components/dialog_manager/DialogManager";
 export * from "./components/dialog_manager/DialogUtils";
 export * from "./types/pineapple_fiber/PortraitType";
 export * from "./types/pineapple_fiber/DialogDetail";
-export * from "./util/stable_random";
+export * from "./util/util";
+export { mulberry32Generator } from "$pkg/util/util";
+export { generatedDailySeed } from "$pkg/util/util";

package/src/lib/util/{stable_random.ts → util.ts}

@@ -1,16 +1,22 @@
-export const generatedDailySeed = (): number => {
-	const date = new Date();
-	const time = date.getTime() + 86400000;
-	return time - (time % 86400000);
-};
-
-// psuedo misc with seed
-// from https://stackoverflow.com/a/47593316
-export const mulberry32Generator = (a: number): (() => number) => {
-	return function () {
-		var t = (a += 0x6d2b79f5);
-		t = Math.imul(t ^ (t >>> 15), t | 1);
-		t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
-		return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
-	};
-};
+export const generatedDailySeed = (): number => {
+	const date = new Date();
+	const time = date.getTime() + 86400000;
+	return time - (time % 86400000);
+};
+
+// psuedo misc with seed
+// from https://stackoverflow.com/a/47593316
+export const mulberry32Generator = (a: number): (() => number) => {
+	return function() {
+		var t = (a += 0x6d2b79f5);
+		t = Math.imul(t ^ (t >>> 15), t | 1);
+		t ^= t + Math.imul(t ^ (t >>> 7), t | 61);
+		return ((t ^ (t >>> 14)) >>> 0) / 4294967296;
+	};
+};
+
+export const createGoToFunction = (path: string): (() => void) => {
+	return (() => {
+		location.href = path;
+	});
+};

package/src/routes/(pineapple)/+page.svelte

@@ -1,8 +1,9 @@
 <script>
 	import { PUBLIC_CRINGE_USERNAME } from "$env/static/public";
 
-	import { createGoToFunction } from "$pkg/util/create_go_to_function";
-	import PineappleBaseLayout from "$pkg/components/pineapple/PineappleBaseLayout.svelte";
+
+	import { createGoToFunction } from "$pkg/util/util";
+	import { Card } from "$pkg";
 </script>
 
 <svelte:head>
@@ -14,23 +15,32 @@
 	/>
 </svelte:head>
 
-<div class="card default-card">
-	<h1 class="mb-8">Directory</h1>
+<Card>
+	<div slot="content" class="content">
+		<h1 class="mb-8" style="font-weight: bolder">Directory</h1>
 
-	<div class="btn-group-vertical variant-filled-secondary">
-		<button on:click={createGoToFunction("pineapple")}><h2>Pineapple playground</h2></button>
-		<button on:click={createGoToFunction("portfolio")}><h2>Seaweed playrground</h2></button>
+		<div class="btn-group">
+			<button on:click={createGoToFunction("pineapple")}><h2>Pineapple playground</h2></button>
+			<button on:click={createGoToFunction("portfolio")}><h2>Seaweed playrground</h2></button>
+		</div>
 	</div>
-</div>
+</Card>
 
 <style lang="postcss">
-    .btn-group-vertical button {
+    .btn-group {
         padding: 2em;
+		    display: flex;
+		    gap: 2em;
+		    flex-direction: column;
+
     }
 
-    .default-card {
+    button {
+		    @apply btn variant-filled-secondary;
+    }
+
+    .content {
+        padding: 2em;
         text-align: center;
-        padding-inline-end: 0;
-        @apply p-16;
     }
 </style>

package/src/routes/(pineapple)/pineapple/+page.svelte

@@ -3,7 +3,7 @@
 	import { showComponentInToast, showTextInToast } from "$pkg/components/pineapple/toast/Toast";
 	import TestCard from "$pkg/components/pineapple/toast/custom-toast/TestCustomToast.svelte";
 	import TestDialogYarn from "./TestDialog.yarn?raw";
-	import { Card, dialogManager } from "$pkg";
+	import { dialogManager } from "$pkg";
 
 
 	let testingQueueNumber = 1;
@@ -36,30 +36,27 @@
 	/>
 </svelte:head>
 
-<Card>
-	<div slot="content" class="card-content">
-		<button
-			class="btn variant-filled-secondary"
-			on:click={() => {
+<div class="card default-card">
+	<button
+		class="btn variant-filled-secondary"
+		on:click={() => {
 			showComponentInToast({componentAndProps: {component: TestCard, props: undefined}});
 		}}><h3>Test custom toast</h3></button>
-		<button
-			class="btn variant-filled-secondary"
-			on:click={() => {
+	<button
+		class="btn variant-filled-secondary"
+		on:click={() => {
 			showTextInToast(`${testingQueueNumber} ${testingRandomPhrases[testingQueueNumber]}`);
 			testingQueueNumber = (testingQueueNumber + 1) % testingRandomPhrases.length;
 		}}><h3>Handy toast</h3></button>
-		<button
-			class="btn variant-filled-secondary"
-			on:click={onTestDialogClick}><h3>Test dialog</h3></button>
-	</div>
-</Card>
+	<button
+		class="btn variant-filled-secondary"
+		on:click={onTestDialogClick}><h3>Test dialog</h3></button>
+</div>
 
 <style lang="postcss">
-    .card-content {
+    .default-card {
         display: flex;
         flex-wrap: wrap;
         gap: 2em;
-		    padding: 2em;
     }
 </style>

package/.svelte-kit/__package__/util/create_go_to_function.d.ts

@@ -1 +0,0 @@
-export declare const createGoToFunction: (path: string) => (() => void);

package/.svelte-kit/__package__/util/create_go_to_function.js

@@ -1,5 +0,0 @@
-export const createGoToFunction = (path) => {
-    return (() => {
-        location.href = path;
-    });
-};

package/dist/util/create_go_to_function.d.ts

@@ -1 +0,0 @@
-export declare const createGoToFunction: (path: string) => (() => void);

package/dist/util/create_go_to_function.js

@@ -1,5 +0,0 @@
-export const createGoToFunction = (path) => {
-    return (() => {
-        location.href = path;
-    });
-};

package/src/lib/util/create_go_to_function.ts

@@ -1,5 +0,0 @@
-export const createGoToFunction = (path: string): (() => void) => {
-    return (() => {
-        location.href = path;
-    });
-};