@turnipxenon/pineapple 2.10.0 → 3.0.0-alpha-3

package/dist/components/combo_box/ComboBox.svelte

@@ -1,7 +1,13 @@
-<script>import "./combo-box.postcss";
-export let stringItems = ["Select item"];
-export let selectedValue = "";
-selectedValue = stringItems.length === 0 ? "" : stringItems[0];
+<script lang="ts">
+	import "./combo-box.postcss";
+
+	interface Props {
+		stringItems?: string[];
+		selectedValue?: string;
+	}
+
+	let { stringItems = ["Select item"], selectedValue = $bindable("") }: Props = $props();
+	selectedValue = stringItems.length === 0 ? "" : stringItems[0];
 </script>
 
 <select bind:value={selectedValue} class="select">

package/dist/components/combo_box/ComboBox.svelte.d.ts

@@ -1,18 +1,8 @@
-import { SvelteComponent } from "svelte";
 import "./combo-box.postcss";
-declare const __propDef: {
-    props: {
-        stringItems?: string[] | undefined;
-        selectedValue?: string | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ComboBoxProps = typeof __propDef.props;
-export type ComboBoxEvents = typeof __propDef.events;
-export type ComboBoxSlots = typeof __propDef.slots;
-export default class ComboBox extends SvelteComponent<ComboBoxProps, ComboBoxEvents, ComboBoxSlots> {
+interface Props {
+    stringItems?: string[];
+    selectedValue?: string;
 }
-export {};
+declare const ComboBox: import("svelte").Component<Props, {}, "selectedValue">;
+type ComboBox = ReturnType<typeof ComboBox>;
+export default ComboBox;

package/dist/components/combo_box/ComboBoxWithButton.svelte

@@ -1,15 +1,22 @@
-<script>import ComboBox from "./ComboBox.svelte";
-import "./combo-box.postcss";
-export let selectedValue = "";
-export let stringItems = [];
-export let onClick = void 0;
-let onClickInternal = () => {
-  onClick?.(selectedValue);
-};
+<script lang="ts">
+	import ComboBox from "./ComboBox.svelte";
+	import "./combo-box.postcss";
+
+	interface Props {
+		selectedValue?: string;
+		stringItems?: string[];
+		onClick?: undefined | ((selected: string) => void);
+	}
+
+	let { selectedValue = $bindable(""), stringItems = $bindable([]), onClick = undefined }: Props = $props();
+
+	let onClickInternal = () => {
+		onClick?.(selectedValue);
+	};
 </script>
 
 <div class="combo-box-wrapper">
-	<button class="combo-box-side-button btn variant-filled-primary" on:click={onClickInternal}>+ Add entry</button>
+	<button class="combo-box-side-button btn preset-filled-primary-500" onclick={onClickInternal}>+ Add entry</button>
 	<ComboBox bind:selectedValue={selectedValue}
 	          bind:stringItems={stringItems}></ComboBox>
 </div>

package/dist/components/combo_box/ComboBoxWithButton.svelte.d.ts

@@ -1,19 +1,9 @@
-import { SvelteComponent } from "svelte";
 import "./combo-box.postcss";
-declare const __propDef: {
-    props: {
-        selectedValue?: string | undefined;
-        stringItems?: string[] | undefined;
-        onClick?: ((selected: string) => void) | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type ComboBoxWithButtonProps = typeof __propDef.props;
-export type ComboBoxWithButtonEvents = typeof __propDef.events;
-export type ComboBoxWithButtonSlots = typeof __propDef.slots;
-export default class ComboBoxWithButton extends SvelteComponent<ComboBoxWithButtonProps, ComboBoxWithButtonEvents, ComboBoxWithButtonSlots> {
+interface Props {
+    selectedValue?: string;
+    stringItems?: string[];
+    onClick?: undefined | ((selected: string) => void);
 }
-export {};
+declare const ComboBoxWithButton: import("svelte").Component<Props, {}, "stringItems" | "selectedValue">;
+type ComboBoxWithButton = ReturnType<typeof ComboBoxWithButton>;
+export default ComboBoxWithButton;

package/dist/components/combo_box/combo-box.postcss

@@ -4,7 +4,7 @@
 
 .select {
     flex-grow: 1;
-    @apply variant-filled-primary;
+    @apply preset-filled-primary-500;
 }
 
 .dark .select option {
@@ -12,7 +12,7 @@
 }
 
 .combo-box-side-button {
-    @apply btn variant-filled-primary;
+    @apply btn preset-filled-primary-500;
 }
 
 .dark .option,

package/dist/components/dialog_manager/DialogManager.d.ts

@@ -1,7 +1,6 @@
 /**
  * DialogManager is the object we want to interact with in Svelte
  */
-/// <reference types="svelte" />
 import type { DialogDetail } from "../../types/pineapple_fiber/DialogDetail";
 import { DialogState } from "../../types/pineapple_fiber/DialogState";
 import { DialogProcessor } from "./DialogProcessor";

package/dist/components/dialog_manager/DialogManagerStore.d.ts

@@ -2,7 +2,6 @@
  * DialogManagerStore is for variables that will be used as a Svelte store
  * or is saved in local storage
  */
-/// <reference types="svelte" />
 import type { DialogMapStore } from "../../types/pineapple_fiber/DialogVariableStore";
 import type { DialogDetail } from "../../types/pineapple_fiber/DialogDetail";
 import { DialogManager } from "./DialogManager";

package/dist/components/dialog_manager/DialogManagerStore.js

@@ -20,7 +20,7 @@ import { DialogManager } from "./DialogManager";
  * });
  * ```
  */
-export const enableDialogueOverlay = writable(true);
+export const enableDialogueOverlay = writable(false);
 export const dialogVariableStore = createNewMapStore();
 export const updateRate = 40 / 1000; // *at least* 40ms per letter
 // todo: if we go through doing yarn to typescript, move this!

package/dist/components/dialog_overlay/DialogOverlay.svelte

@@ -1,32 +1,40 @@
-<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;
-});
-let currentPortrait = AresHappy;
-dialogManager.currentPortrait.subscribe((value) => {
-  if (value) {
-    currentPortrait = value;
-  }
-});
-let hidePercent = 100;
-let isHidden = true;
-onMount(() => {
-  dialogManager.hidePercent.subscribe((value) => {
-    hidePercent = value * 0.4;
-    isHidden = false;
-  });
-  dialogManager.currentReadableState.subscribe((value) => {
-    isHidden = value === DialogState.Invisible;
-  });
-  dialogManager.update(0);
-});
-const onDialogClick = () => {
-  dialogManager.skipAnimation();
-};
+<script lang="ts">
+	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 = $state("");
+	dialogManager.currentMessage.subscribe((value) => {
+		currentMessage = value;
+	});
+
+	let currentPortrait = $state(AresHappy);
+	dialogManager.currentPortrait.subscribe((value) => {
+		if (value) {
+			currentPortrait = value;
+		}
+	});
+
+	let hidePercent = $state(100);
+	let isHidden = $state(true);
+	onMount(() => {
+		dialogManager.hidePercent.subscribe((value) => {
+			hidePercent = value * 0.4;
+			isHidden = false;
+		});
+
+		dialogManager.currentReadableState.subscribe((value) => {
+			isHidden = value === DialogState.Invisible;
+		});
+
+		dialogManager.update(0);
+	});
+
+	const onDialogClick = () => {
+		dialogManager.skipAnimation();
+	};
+
 </script>
 
 <div class="dialog-elements"
@@ -36,7 +44,7 @@ const onDialogClick = () => {
 	<div class="dialog-portrait-container">
 		<img src={currentPortrait} alt="Ares" class="dialog-portrait" />
 	</div>
-	<div class="card dialog-box variant-ghost-primary" on:click={onDialogClick}>
+	<div class="card dialog-box preset-tonal-primary border border-primary-500" onclick={onDialogClick}>
 		<div class="card dialog-name">
 			<p><b>Turnip</b></p>
 		</div>
@@ -81,11 +89,11 @@ const onDialogClick = () => {
     }
 
     .dialog-name {
-        padding-left: 1rem;
-        padding-right: 1rem;
-        padding-top: 0.5rem;
+		    padding-top: 2rem;
+		    padding-left: 4rem;
+		    padding-right: 4rem;
         position: fixed;
-}
+    }
 
     .dialog-name:dir(ltr) {
         /* for centering vertically */

package/dist/components/dialog_overlay/DialogOverlay.svelte.d.ts

@@ -1,14 +1,3 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: Record<string, never>;
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type DialogOverlayProps = typeof __propDef.props;
-export type DialogOverlayEvents = typeof __propDef.events;
-export type DialogOverlaySlots = typeof __propDef.slots;
-export default class DialogOverlay extends SvelteComponent<DialogOverlayProps, DialogOverlayEvents, DialogOverlaySlots> {
-}
-export {};
+declare const DialogOverlay: import("svelte").Component<Record<string, never>, {}, "">;
+type DialogOverlay = ReturnType<typeof DialogOverlay>;
+export default DialogOverlay;

package/dist/components/index.d.ts

@@ -2,7 +2,7 @@ export { default as LazyAsset } from "./LazyAsset.svelte";
 export { default as Card } from "./Card.svelte";
 export { default as Chip } from "./chip/Chip.svelte";
 export { default as PineappleSlideToggle } from "./PineappleSlideToggle.svelte";
-export { default as SocialSection } from "./SocialSection.svelte";
+export { default as SocialSection } from "../ui/components/SocialSection.svelte";
 export { default as ElementVisbilityDetector } from "./ElementVisbilityDetector.svelte";
 export { default as BlogTemplate } from "./blog_template/BlogTemplate.svelte";
 export { default as DialogOverlay } from "./dialog_overlay/DialogOverlay.svelte";

package/dist/components/index.js

@@ -3,7 +3,7 @@ export { default as LazyAsset } from "./LazyAsset.svelte";
 export { default as Card } from "./Card.svelte";
 export { default as Chip } from "./chip/Chip.svelte";
 export { default as PineappleSlideToggle } from "./PineappleSlideToggle.svelte";
-export { default as SocialSection } from "./SocialSection.svelte";
+export { default as SocialSection } from "../ui/components/SocialSection.svelte";
 export { default as ElementVisbilityDetector } from "./ElementVisbilityDetector.svelte";
 export { default as BlogTemplate } from "./blog_template/BlogTemplate.svelte";
 export { default as DialogOverlay } from "./dialog_overlay/DialogOverlay.svelte";

package/dist/components/layouts/SeaweedBaseLayout.svelte

@@ -1,58 +1,95 @@
-<script>import { AppBar, AppShell, autoModeWatcher, LightSwitch } from "@skeletonlabs/skeleton";
-import RandomizedBackground from "../RandomizedBackground.svelte";
-import { enableBackground } from "../../store";
-import { enableDialogueOverlay } from "../dialog_manager/DialogManagerStore";
-import { writable } from "svelte/store";
-import { fly } from "svelte/transition";
-export let shouldDisplayLeadingIcons = false;
-let enableBackgroundValue = true;
-enableBackground.subscribe((value) => {
-  enableBackgroundValue = value;
-});
-enableDialogueOverlay.set(false);
-let shouldDisplaySocialIcons = writable(false);
+<script lang="ts">
+	// For auto dark/light mode
+	import { AppBar } from "@skeletonlabs/skeleton-svelte";
+	import RandomizedBackground from "../RandomizedBackground.svelte";
+
+	// store
+	import { enableBackground } from "../../store";
+	// assets
+	import { enableDialogueOverlay } from "../dialog_manager/DialogManagerStore";
+	import { writable } from "svelte/store";
+	import { fly } from "svelte/transition";
+	import { appState } from "../../ui/templates/index";
+
+	// todo: clean up all these imports!
+
+	interface Props {
+		shouldDisplayLeadingIcons?: boolean;
+		extraLeadingIcons?: import("svelte").Snippet;
+		s?: import("svelte").Snippet;
+		children?: import("svelte").Snippet<[any]>;
+	}
+
+	let {
+		shouldDisplayLeadingIcons = $bindable(false),
+		extraLeadingIcons,
+		s,
+		children
+	}: Props = $props();
+
+	$inspect("inside: should display:", shouldDisplayLeadingIcons, !!extraLeadingIcons);
+
+	$effect(() => {
+		if (extraLeadingIcons && shouldDisplayLeadingIcons) {
+			appState.lead = extraLeadingIcons;
+		} else {
+			appState.lead = undefined;
+		}
+	});
+
+	let enableBackgroundValue = $state(true);
+	enableBackground.subscribe((value) => {
+		enableBackgroundValue = value;
+	});
+
+	enableDialogueOverlay.set(false); // false by default until we unlock the fab for public
+
+	let shouldDisplaySocialIcons = writable(false);
 </script>
 
 <!-- App Shell -->
-<svelte:head>
-	{@html `<script>${autoModeWatcher.toString()} autoModeWatcher();</script>`}
-</svelte:head>
-
-<AppShell>
-	<svelte:fragment slot="header">
-		<!-- App Bar -->
-		<AppBar slotDefault="place-content-start"
-		        background="app-shell-token">
-			<svelte:fragment slot="lead">
-				<span class="lead-slot-placeholder"></span>
-
-				{#if $$slots.extraLeadingIcons && shouldDisplayLeadingIcons}
-					<div transition:fly={{x:-10}}>
-						<slot name="extraLeadingIcons" />
-					</div>
-				{:else if $$slots.extraLeadingIcons}
-					<div hidden>
-						<slot name="s" />
-					</div>
-				{/if}
-			</svelte:fragment>
-			<svelte:fragment slot="trail">
-				<LightSwitch bgLight="bg-surface-400" />
-			</svelte:fragment>
-		</AppBar>
-	</svelte:fragment>
+<!--<svelte:head>-->
+<!--	{@html `<script>${autoModeWatcher.toString()} autoModeWatcher();</script>`}-->
+<!--</svelte:head>-->
+
+<div>
+	<!-- App Bar -->
+	<AppBar background="bg-surface-600 dark:bg-surface-900">
+		{#snippet lead()}
+
+			<span class="lead-slot-placeholder"></span>
+
+			{#if extraLeadingIcons && shouldDisplayLeadingIcons}
+				<div transition:fly={{x:-10}}>
+					{@render extraLeadingIcons?.()}
+				</div>
+			{:else if extraLeadingIcons}
+				<div hidden>
+					{@render s?.()}
+				</div>
+			{/if}
+
+		{/snippet}
+		{#snippet trail()}
+
+			<!-- todo: -->
+			<!--						<LightSwitch bgLight="bg-surface-400" />-->
+
+		{/snippet}
+	</AppBar>
+
 
 	<RandomizedBackground enable={enableBackgroundValue} />
 
 	<!--{#if enableDialogueOverlayValue}-->
 	<!-- Page Route Content -->
 	<div class="default-page-container">
-		<slot shouldDisplaySocialIcons={shouldDisplaySocialIcons} />
-		<div class="footer-space" />
+		{@render children?.({ shouldDisplaySocialIcons, })}
+		<div class="footer-space"></div>
 	</div>
 	<!-- todo: eventually re-add	-->
 	<!--	<DialogOverlay />-->
-</AppShell>
+</div>
 
 <style>
     :root {

package/dist/components/layouts/SeaweedBaseLayout.svelte.d.ts

@@ -1,22 +1,9 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        shouldDisplayLeadingIcons?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        extraLeadingIcons: {};
-        s: {};
-        default: {
-            shouldDisplaySocialIcons: import("svelte/store").Writable<boolean>;
-        };
-    };
-};
-export type SeaweedBaseLayoutProps = typeof __propDef.props;
-export type SeaweedBaseLayoutEvents = typeof __propDef.events;
-export type SeaweedBaseLayoutSlots = typeof __propDef.slots;
-export default class SeaweedBaseLayout extends SvelteComponent<SeaweedBaseLayoutProps, SeaweedBaseLayoutEvents, SeaweedBaseLayoutSlots> {
+interface Props {
+    shouldDisplayLeadingIcons?: boolean;
+    extraLeadingIcons?: import("svelte").Snippet;
+    s?: import("svelte").Snippet;
+    children?: import("svelte").Snippet<[any]>;
 }
-export {};
+declare const SeaweedBaseLayout: import("svelte").Component<Props, {}, "shouldDisplayLeadingIcons">;
+type SeaweedBaseLayout = ReturnType<typeof SeaweedBaseLayout>;
+export default SeaweedBaseLayout;