@turnipxenon/pineapple 2.4.13 → 2.4.14

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

@@ -0,0 +1,37 @@
+import { writable } from "svelte/store";
+import DefaultToastBody from "./DefaultToastBody.svelte";
+/**
+ * Default toast duration is 5 seconds
+ */
+export const DefaultToastParamsDuration = 5000;
+/**
+ * todo: do not call directly documentation
+ */
+export const activeToast = writable();
+export const toastQueue = [];
+/**
+ *
+ * @param newToast
+ */
+export const showComponentInToast = (newToast) => {
+    // todo: queue component
+    activeToast.update((currentToast) => {
+        if (currentToast !== undefined) {
+            toastQueue.push(newToast);
+            return currentToast;
+        }
+        else {
+            return newToast;
+        }
+    });
+};
+export const showTextInToast = (message) => {
+    showComponentInToast({
+        componentAndProps: {
+            component: DefaultToastBody,
+            props: {
+                message
+            }
+        }
+    });
+};

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

@@ -0,0 +1,89 @@
+<script>import {
+  activeToast,
+  DefaultToastParamsDuration,
+  toastQueue
+} from "./Toast";
+import {} from "svelte";
+import Card from "../../Card.svelte";
+import { spring, tweened } from "svelte/motion";
+let localComponent;
+let localProps;
+const HIDDEN_VALUE = -15;
+const SHOWN_VALUE = 0;
+const progress = tweened(0, { duration: DefaultToastParamsDuration });
+const position = spring(HIDDEN_VALUE);
+position.damping = 0.4;
+let isDismissed = false;
+let shouldEnableButton = false;
+const onToastDisappear = () => {
+  localComponent = void 0;
+  activeToast.update(() => {
+    if (toastQueue.length === 0) {
+      return void 0;
+    }
+    return toastQueue.shift();
+  });
+};
+activeToast.subscribe((params) => {
+  if (!params) {
+    return;
+  }
+  if (params.componentAndProps?.component === localComponent) {
+    return;
+  }
+  localComponent = params.componentAndProps.component;
+  localProps = params.componentAndProps.props;
+  progress.set(0, { duration: 0 }).then(() => {
+    position.set(SHOWN_VALUE).then(() => {
+      shouldEnableButton = true;
+      progress.set(100, { delay: 500, duration: params.duration ?? DefaultToastParamsDuration }).then(() => {
+        shouldEnableButton = false;
+        if (isDismissed) {
+          return;
+        }
+        position.set(HIDDEN_VALUE).then(onToastDisappear);
+      });
+    });
+  });
+});
+const dismissToast = () => {
+  shouldEnableButton = false;
+  isDismissed = true;
+  position.set(HIDDEN_VALUE).then(onToastDisappear);
+};
+</script>
+
+{#if (localComponent !== undefined)}
+	<div class="toast-positioner" style={`bottom: ${$position}lh;`}>
+		<!-- todo: adjust shadow to be more dynamic or transparent -->
+		<Card marginBottom="1lh" overrideStyle="box-shadow: 3px 3px 3px var(--shadow-color);">
+			<div slot="content">
+				{#if (localProps !== undefined)}
+					<svelte:component this={localComponent}
+					                  props={localProps}
+					                  dismissToastCallback={dismissToast}
+					                  shouldEnableButton={shouldEnableButton} />
+				{:else }
+					<svelte:component this={localComponent} />
+				{/if}
+				<progress id="toast-progress" value={$progress/100}></progress>
+			</div>
+		</Card>
+	</div>
+{/if}
+
+<style>
+    .toast-positioner {
+        position: fixed;
+        /* 12em = this component's margin (4em) + fab margin + width (8em) */
+        max-width: calc(100vw - 12em);
+    }
+
+    .toast-positioner:dir(ltr) {
+        left: 2em;
+    }
+
+    .toast-positioner:dir(rtl) {
+        right: 2em;
+    }
+</style>

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

@@ -0,0 +1,14 @@
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ToastProps = typeof __propDef.props;
+export type ToastEvents = typeof __propDef.events;
+export type ToastSlots = typeof __propDef.slots;
+export default class Toast extends SvelteComponent<ToastProps, ToastEvents, ToastSlots> {
+}
+export {};

package/.svelte-kit/__package__/components/pineapple/toast/custom-toast/TestCustomToast.d.ts

@@ -0,0 +1,5 @@
+import TestCustomToast from "./TestCustomToast.svelte";
+export interface TestCustomToastPair {
+    component: typeof TestCustomToast;
+    props: undefined;
+}

package/.svelte-kit/__package__/components/pineapple/toast/custom-toast/TestCustomToast.js

@@ -0,0 +1 @@
+import TestCustomToast from "./TestCustomToast.svelte";

package/.svelte-kit/__package__/components/pineapple/toast/custom-toast/TestCustomToast.svelte

@@ -0,0 +1 @@
+<h1>Testing bad custom card</h1>

package/.svelte-kit/__package__/components/pineapple/toast/custom-toast/TestCustomToast.svelte.d.ts

@@ -0,0 +1,23 @@
+/** @typedef {typeof __propDef.props}  TestCustomToastProps */
+/** @typedef {typeof __propDef.events}  TestCustomToastEvents */
+/** @typedef {typeof __propDef.slots}  TestCustomToastSlots */
+export default class TestCustomToast extends SvelteComponent<{
+    [x: string]: never;
+}, {
+    [evt: string]: CustomEvent<any>;
+}, {}> {
+}
+export type TestCustomToastProps = typeof __propDef.props;
+export type TestCustomToastEvents = typeof __propDef.events;
+export type TestCustomToastSlots = typeof __propDef.slots;
+import { SvelteComponent } from "svelte";
+declare const __propDef: {
+    props: {
+        [x: string]: never;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export {};

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

@@ -1,4 +1,4 @@
-export { default as PineappleLayoutBase } from "./components/layouts/PineappleBaseLayout.svelte";
+export { default as PineappleLayoutBase } from "./components/pineapple/PineappleBaseLayout.svelte";
 export { default as SeaweedTemplate } from "./template/SeaweedTemplate.svelte";
 export { default as LazyAsset } from "./components/LazyAsset.svelte";
 export * from "./components/dialog_manager/DialogManagerStore";

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

@@ -1,4 +1,4 @@
-export { default as PineappleLayoutBase } from "./components/layouts/PineappleBaseLayout.svelte";
+export { default as PineappleLayoutBase } from "./components/pineapple/PineappleBaseLayout.svelte";
 export { default as SeaweedTemplate } from "./template/SeaweedTemplate.svelte";
 export { default as LazyAsset } from "./components/LazyAsset.svelte";
 export * from "./components/dialog_manager/DialogManagerStore";

package/.svelte-kit/generated/client/app.js

@@ -15,7 +15,7 @@ export const server_loads = [];
 
 export const dictionary = {
 		"/(pineapple)": [4,[2]],
-		"/(pineapple)/personal": [5,[2]],
+		"/(pineapple)/pineapple": [5,[2]],
 		"/(seaweed)/portfolio": [~6,[3]],
 		"/(seaweed)/portfolio/actual": [7,[3]]
 	};

package/.svelte-kit/generated/client/nodes/5.js

@@ -1 +1 @@
-export { default as component } from "../../../../src/routes/(pineapple)/personal/+page.svelte";
+export { default as component } from "../../../../src/routes/(pineapple)/pineapple/+page.svelte";

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: "1kjhsuz"
+	version_hash: "3q1q8i"
 };
 
 export async function get_hooks() {

package/.svelte-kit/types/route_meta_data.json

@@ -2,7 +2,7 @@
 	"/(seaweed)": [],
 	"/(pineapple)": [],
 	"/": [],
-	"/(pineapple)/personal": [],
+	"/(pineapple)/pineapple": [],
 	"/(seaweed)/portfolio": [
 		"src/routes/(seaweed)/portfolio/+page.server.ts"
 	],

package/.svelte-kit/types/src/routes/$types.d.ts

@@ -11,7 +11,7 @@ type OutputDataShape<T> = MaybeWithVoid<Omit<App.PageData, RequiredKeys<T>> & Pa
 type EnsureDefined<T> = T extends null | undefined ? {} : T;
 type OptionalUnion<U extends Record<string, any>, A extends keyof U = U extends U ? keyof U : never> = U extends unknown ? { [P in Exclude<A, keyof U>]?: never } & U : never;
 export type Snapshot<T = any> = Kit.Snapshot<T>;
-type LayoutRouteId = RouteId | "/(pineapple)" | "/(pineapple)/personal" | "/(seaweed)/portfolio" | "/(seaweed)/portfolio/actual" | null
+type LayoutRouteId = RouteId | "/(pineapple)" | "/(pineapple)/pineapple" | "/(seaweed)/portfolio" | "/(seaweed)/portfolio/actual" | null
 type LayoutParams = RouteParams & {  }
 type LayoutParentData = EnsureDefined<{}>;
 

package/.svelte-kit/types/src/routes/(pineapple)/$types.d.ts

@@ -12,7 +12,7 @@ type EnsureDefined<T> = T extends null | undefined ? {} : T;
 type OptionalUnion<U extends Record<string, any>, A extends keyof U = U extends U ? keyof U : never> = U extends unknown ? { [P in Exclude<A, keyof U>]?: never } & U : never;
 export type Snapshot<T = any> = Kit.Snapshot<T>;
 type PageParentData = Omit<EnsureDefined<import('../$types.js').LayoutData>, keyof LayoutData> & EnsureDefined<LayoutData>;
-type LayoutRouteId = RouteId | "/(pineapple)" | "/(pineapple)/personal"
+type LayoutRouteId = RouteId | "/(pineapple)" | "/(pineapple)/pineapple"
 type LayoutParams = RouteParams & {  }
 type LayoutParentData = EnsureDefined<import('../$types.js').LayoutData>;
 

package/.svelte-kit/types/src/routes/(pineapple)/{personal → pineapple}/$types.d.ts

@@ -4,7 +4,7 @@ type Expand<T> = T extends infer O ? { [K in keyof O]: O[K] } : never;
 // @ts-ignore
 type MatcherParam<M> = M extends (param : string) => param is infer U ? U extends string ? U : string : string;
 type RouteParams = {  };
-type RouteId = '/(pineapple)/personal';
+type RouteId = '/(pineapple)/pineapple';
 type MaybeWithVoid<T> = {} extends T ? T | void : T;
 export type RequiredKeys<T> = { [K in keyof T]-?: {} extends { [P in K]: T[K] } ? never : K; }[keyof T];
 type OutputDataShape<T> = MaybeWithVoid<Omit<App.PageData, RequiredKeys<T>> & Partial<Pick<App.PageData, keyof T & keyof App.PageData>> & Record<string, any>>

package/dist/app.postcss

@@ -41,11 +41,11 @@ html, body {
 }
 
 /* todo: add some hues to the icon that should be in sync with primary and make them not pure darkness */
-.turnip-button > img {
+.turnip-button > img, .img-icon {
     filter: grayscale(100%) brightness(0%) invert(25%);
 }
 
-.dark .turnip-button > img {
+.dark .turnip-button > img, .dark .img-icon {
     filter: grayscale(100%) brightness(0%) invert(100%);
 }
 
@@ -164,4 +164,30 @@ a:active {
 .accordion-item {
     @apply variant-filled-primary rounded-md;
 }
+
 /* endregion Accordion css for handling missing styles in package */
+
+:root {
+    --shadow-color: rgba(91, 79, 54, 0.5);
+}
+
+/* todo: adjust shadow for each component + change depending on dark mode or not */
+.fab, #shell-header {
+    box-shadow: 3px 3px 3px var(--shadow-color);
+}
+
+#toast-progress {
+    position: relative;
+    top: 5px;
+    left: 6px;
+    width: calc(100% - 12px);
+    border-radius: 8px;
+    background: transparent;
+    height: 10px;
+}
+
+#toast-progress::-moz-progress-bar {
+    /*background-color: red;*/
+    background: rgba(var(--color-secondary-500));
+}
+

package/dist/assets/icons/close.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24" viewBox="0 -960 960 960" width="24"><path d="m256-200-56-56 224-224-224-224 56-56 224 224 224-224 56 56-224 224 224 224-56 56-224-224-224 224Z"/></svg>

package/dist/components/Card.svelte

@@ -1,5 +1,5 @@
 <script>export let margin = "0";
-export let marginBottom = "3em";
+export let marginBottom = "2lh";
 export let overrideStyle = "";
 export let includeDataNoSnippet = true;
 const style = `

package/dist/components/Chip.svelte

@@ -8,5 +8,6 @@
         margin: 0.25em;
         font-weight: bold;
         pointer-events: none;
+        background-color: rgb(var(--color-tertiary-500) / var(--tw-bg-opacity));
     }
 </style>

package/dist/components/{layouts → pineapple}/PineappleBaseLayout.svelte

@@ -2,10 +2,10 @@
 import RandomizedBackground from "../RandomizedBackground.svelte";
 import { page } from "$app/stores";
 import { enableBackground } from "../../store";
-import DialogOverlay from "../DialogOverlay.svelte";
 import AresLogo from "../../assets/characters/ares/ares_logo.webp";
 import FABIcon from "../../assets/placeholder/placeholder_circle.png";
 import { enableDialogueOverlay } from "../dialog_manager/DialogManagerStore";
+import Toast from "./toast/Toast.svelte";
 let pages = [];
 const updateBreadcrumb = (pathname) => {
   pages = [];
@@ -57,15 +57,18 @@ enableDialogueOverlay.subscribe((value) => {
 <AppShell>
 	<svelte:fragment slot="header">
 		<!-- App Bar -->
-		<AppBar slotDefault="place-content-start" slotTrail="place-content-end">
+		<AppBar
+			background="app-shell-token"
+			slotDefault="place-content-start"
+			slotTrail="place-content-end">
 			<svelte:fragment slot="lead">
 				<!--TODO: add logo or something for the lead in layout-->
 				<img
-						alt="Ares's head titled towards the left with his tongue out and winking"
-						class="ares-logo"
-						src={AresLogo}
+					alt="Ares's head titled towards the left with his tongue out and winking"
+					class="ares-logo"
+					src={AresLogo}
 				/>
-				<span class="mr-2"/>
+				<span class="mr-2" />
 				<ol class="breadcrumb">
 					{#each pages as crumb, i}
 						{#if i < pages.length - 1}
@@ -80,24 +83,30 @@ enableDialogueOverlay.subscribe((value) => {
 				</ol>
 			</svelte:fragment>
 			<svelte:fragment slot="trail">
-				<LightSwitch bgLight="bg-surface-400"/>
+				<LightSwitch bgLight="bg-surface-400" />
 			</svelte:fragment>
 		</AppBar>
 	</svelte:fragment>
 
-	<RandomizedBackground enable={enableBackgroundValue}/>
-
-	{#if enableDialogueOverlayValue}
-		<!-- Page Route Content -->
-		<div class="default-page-container">
-			<slot/>
-			<div class="footer-space"/>
-		</div>
-		<DialogOverlay/>
-	{:else}
-		<DialogOverlay/>
-		<slot/>
-	{/if}
+	<RandomizedBackground enable={enableBackgroundValue} />
+
+	<Toast></Toast>
+
+	<div class="default-page-container">
+		<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>
@@ -105,6 +114,19 @@ enableDialogueOverlay.subscribe((value) => {
         --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-box-height: clamp(15em, 50vw, 18em);
+
+        /** FAB icon margin/position calculation origin:
+						Criteria:
+						- We want at mobile (360px) our margin to be at 1em (16px)
+						- We want at web (1960px) our margin to be at 2em (32px)
+
+						A useful scaling factor might vw. At 360px, 16px would be around 4.44vw (360/16).
+						At 360px: margin is at 16px or 1em.
+						At 1960px: 4.44vw is at 87px but that will be clamped to 32px or 2em.
+						The calculation implies that the natural point that the margin becomes 2em is clamped on
+						wider screens is at 727px.
+				*/
+        --fab-margin: clamp(1em, 4.44vw, 2em);
     }
 
     .default-page-container {
@@ -194,15 +216,17 @@ enableDialogueOverlay.subscribe((value) => {
 }
 
     .fab {
-		    position: fixed;
-		    bottom: 2em;
+        position: fixed;
+        bottom: var(--fab-margin);
+        width: 4em;
+        border-radius: 50%;
     }
 
     .fab:dir(ltr) {
-		    right: 2em;
+        right: var(--fab-margin);
     }
 
     .fab:dir(rtl) {
-		    left: 2em;
+        left: var(--fab-margin);
     }
 </style>

package/dist/components/pineapple/overlay_manager/OverlayManager.js

@@ -0,0 +1 @@
+"use strict";

package/dist/components/pineapple/toast/DefaultToastBody.d.ts

@@ -0,0 +1,8 @@
+import DefaultToastBody from "./DefaultToastBody.svelte";
+export interface Props {
+    message: string;
+}
+export interface DefaultToastPair {
+    component: typeof DefaultToastBody;
+    props: Props;
+}

package/dist/components/pineapple/toast/DefaultToastBody.js

@@ -0,0 +1 @@
+import DefaultToastBody from "./DefaultToastBody.svelte";

package/dist/components/pineapple/toast/DefaultToastBody.svelte

@@ -0,0 +1,48 @@
+<script>import CloseIcon from "../../../assets/icons/close.svg";
+export let props;
+export let dismissToastCallback;
+export let shouldEnableButton = false;
+</script>
+
+<div class="body-container">
+	<!-- todo: support markdown? -->
+	<button class="btn"
+	        disabled={!shouldEnableButton}
+	        on:click={dismissToastCallback}>
+		<img class="img-icon" src={CloseIcon} alt="close button">
+	</button>
+	<div class="text-container">
+		<span>{props.message}</span>
+	</div>
+</div>
+
+<style>
+    .body-container {
+        display: flex;
+        gap: 1em;
+    }
+
+    .text-container {
+        margin-top: 0.25lh;
+        margin-right: 1em;
+    }
+
+    .text-container:dir(rtl) {
+        margin-left: 1em;
+    }
+
+    .btn {
+        --tw-bg-opacity: 1;
+        background-color: rgb(var(--color-surface-100) / var(--tw-bg-opacity));
+}
+
+    :is(.dark .btn) {
+        --tw-bg-opacity: 1;
+        background-color: rgb(var(--color-surface-900) / var(--tw-bg-opacity));
+}
+
+    .btn {
+        border-radius: 8px;
+		    padding: 0.5em;
+    }
+</style>

package/dist/components/pineapple/toast/DefaultToastBody.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponent } from "svelte";
+import type { Props } from "./DefaultToastBody";
+import type { DismissToastCallback } from "./Toast";
+declare const __propDef: {
+    props: {
+        props: Props;
+        dismissToastCallback: DismissToastCallback | undefined;
+        shouldEnableButton?: boolean | undefined;
+    };
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DefaultToastBodyProps = typeof __propDef.props;
+export type DefaultToastBodyEvents = typeof __propDef.events;
+export type DefaultToastBodySlots = typeof __propDef.slots;
+export default class DefaultToastBody extends SvelteComponent<DefaultToastBodyProps, DefaultToastBodyEvents, DefaultToastBodySlots> {
+}
+export {};

package/dist/components/pineapple/toast/Toast.d.ts

@@ -0,0 +1,27 @@
+/// <reference types="svelte" />
+import type { DefaultToastPair } from "./DefaultToastBody";
+import type { TestCustomToastPair } from "./custom-toast/TestCustomToast";
+/**
+ * Default toast duration is 5 seconds
+ */
+export declare const DefaultToastParamsDuration = 5000;
+export type CustomToastPairs = DefaultToastPair | TestCustomToastPair;
+export type DismissToastCallback = () => void;
+export interface ToastParams {
+    componentAndProps: CustomToastPairs;
+    /**
+     * Time in millisecond. If undefined, defaults to DefaultToastParamsDuration
+     */
+    duration?: number;
+}
+/**
+ * todo: do not call directly documentation
+ */
+export declare const activeToast: import("svelte/store").Writable<ToastParams | undefined>;
+export declare const toastQueue: ToastParams[];
+/**
+ *
+ * @param newToast
+ */
+export declare const showComponentInToast: (newToast: ToastParams) => void;
+export declare const showTextInToast: (message: string) => void;

package/dist/components/pineapple/toast/Toast.js

@@ -0,0 +1,37 @@
+import { writable } from "svelte/store";
+import DefaultToastBody from "./DefaultToastBody.svelte";
+/**
+ * Default toast duration is 5 seconds
+ */
+export const DefaultToastParamsDuration = 5000;
+/**
+ * todo: do not call directly documentation
+ */
+export const activeToast = writable();
+export const toastQueue = [];
+/**
+ *
+ * @param newToast
+ */
+export const showComponentInToast = (newToast) => {
+    // todo: queue component
+    activeToast.update((currentToast) => {
+        if (currentToast !== undefined) {
+            toastQueue.push(newToast);
+            return currentToast;
+        }
+        else {
+            return newToast;
+        }
+    });
+};
+export const showTextInToast = (message) => {
+    showComponentInToast({
+        componentAndProps: {
+            component: DefaultToastBody,
+            props: {
+                message
+            }
+        }
+    });
+};