@turnipxenon/pineapple 3.1.0-alpha.8 → 4.0.0-alpha.1

package/dist/components/RandomizedBackground.svelte

@@ -1,87 +0,0 @@
-<!--
-    @component
-    @deprecated
--->
-<script lang="ts">
-	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";
-
-	interface Props {
-		enable: any;
-	}
-
-	let { enable }: Props = $props();
-
-	const imageList = [BgTiledAres, BgTiledCorn, BgTiledPineapple, BgTiledReinhard, BgTiledTomato, BgTiledTurnip];
-
-	const seed = generatedDailySeed();
-	const rng = mulberry32Generator(seed);
-
-	const shuffle = (array: any[]): any[] => {
-		// from: community wiki @ https://stackoverflow.com/a/2450976/17836168
-		let currentIndex = array.length,
-			randomIndex;
-
-		// While there remain elements to shuffle.
-		while (currentIndex != 0) {
-			// Pick a remaining element.
-			randomIndex = Math.floor(rng() * currentIndex);
-			currentIndex--;
-
-			// And swap it with the current element.
-			[array[currentIndex], array[randomIndex]] = [array[randomIndex], array[currentIndex]];
-		}
-
-		return array;
-	};
-
-	let generatedImageList: string[] = $state([]);
-
-	for (let i = 0; i < 20; i++) {
-		shuffle(imageList);
-		generatedImageList = generatedImageList.concat(imageList);
-	}
-</script>
-
-<svelte:head>
-	<!-- from: https://dev.to/khromov/preloading-images-in-svelte-465h	-->
-	{#each imageList as image}
-		<link rel="preload" as="image" href={image} />
-	{/each}
-	<link
-		as="video"
-		href="https://video.twimg.com/ext_tw_video/1318728494256410624/pu/vid/640x360/TMklz6hiTkQu3xhn.mp4"
-		rel="preload"
-	/>
-</svelte:head>
-
-<!--todo: add a letterbox beyond 1960px + 16 rem-->
-{#if enable}
-	<div class="default-background" aria-hidden="true">
-		{#each generatedImageList as imageItem}
-			<RandomizedImage src={imageItem} {rng} />
-		{/each}
-	</div>
-{/if}
-
-<style>
-    .default-background {
-        position: fixed;
-        display: flex;
-        top: -8rem;
-        left: 50%;
-        transform: translate(-50%, 0);
-        width: calc(100vw + 16rem);
-        max-width: 1960px;
-        height: calc(100vh + 16rem);
-        flex-wrap: wrap;
-        overflow: hidden;
-        z-index: -10;
-    }
-</style>

package/dist/components/RandomizedBackground.svelte.d.ts

@@ -1,7 +0,0 @@
-interface Props {
-    enable: any;
-}
-/** @deprecated */
-declare const RandomizedBackground: import("svelte").Component<Props, {}, "">;
-type RandomizedBackground = ReturnType<typeof RandomizedBackground>;
-export default RandomizedBackground;

package/dist/components/RandomizedImage.svelte

@@ -1,44 +0,0 @@
-<script lang="ts">
-	    interface Props {
-        src: string;
-        rng: () => number;
-    }
-
-    let { src, rng }: Props = $props();
-	let rotateRandom = rng() * 90 - 45;
-
-	const paddingLeft = 1 + rng() * 5;
-	const paddingRight = 1 + rng() * 5;
-	const paddingTop = 1 + rng() * 7;
-</script>
-
-<div
-	style="--paddingTop: {paddingTop}rem;
-        --paddingLeft: {paddingLeft}rem;
-        --paddingRight: {paddingRight}rem;">
-	<img {src} class="randomized-image-style"
-	     aria-hidden="true"
-	     style="--rotateRandom:{rotateRandom}deg;"
-	     alt=""
-	/>
-<!--	todo: migration -->
-<!--	     class:darkMode={modeCurrent} />-->
-</div>
-
-<style>
-    div {
-        padding-top: var(--paddingTop);
-        padding-left: var(--paddingLeft);
-        padding-right: var(--paddingRight);
-    }
-
-    img {
-        width: 8rem;
-        height: 8rem;
-        transform: rotate(var(--rotateRandom));
-    }
-
-    .darkMode {
-        filter: brightness(50%);
-    }
-</style>

package/dist/components/RandomizedImage.svelte.d.ts

@@ -1,7 +0,0 @@
-interface Props {
-    src: string;
-    rng: () => number;
-}
-declare const RandomizedImage: import("svelte").Component<Props, {}, "">;
-type RandomizedImage = ReturnType<typeof RandomizedImage>;
-export default RandomizedImage;

package/dist/components/StickyElement.svelte

@@ -1,45 +0,0 @@
-<script lang="ts">
-    import {onMount} from "svelte";
-    import {fly} from "svelte/transition";
-
-    interface Props {
-        isFirst?: boolean;
-        children?: import('svelte').Snippet;
-    }
-
-    let { isFirst = false, children }: Props = $props();
-
-    let stickyElem: HTMLElement = $state();
-    let isSticky = $state(false);
-
-    let observer: undefined | IntersectionObserver;
-    onMount(() => {
-        observer = new IntersectionObserver(
-            ([e]) => {
-                isSticky = e.intersectionRatio < 1;
-            },
-            {threshold: [1]}
-        );
-        observer.observe(stickyElem);
-    });
-</script>
-
-<span transition:fly={{y: -100}}>
-{#if (isFirst && !isSticky)}
-	<!-- intentionally empty -->
-{:else if (isSticky)}
-	{" | "}
-{:else }
-	<br>
-{/if}
-	<span class="sticky-div" bind:this={stickyElem}>
-		{@render children?.()}
-	</span>
-</span>
-
-<style>
-    .sticky-div {
-        position: sticky;
-        top: -1px;
-    }
-</style>

package/dist/components/StickyElement.svelte.d.ts

@@ -1,7 +0,0 @@
-interface Props {
-    isFirst?: boolean;
-    children?: import('svelte').Snippet;
-}
-declare const StickyElement: import("svelte").Component<Props, {}, "">;
-type StickyElement = ReturnType<typeof StickyElement>;
-export default StickyElement;

package/dist/components/ToggleableContent.svelte

@@ -1,95 +0,0 @@
-<script lang="ts">
-	import { run } from 'svelte/legacy';
-
-	import { ToggleableContentType } from "./ToggleableContentType";
-	import { onMount } from "svelte";
-
-	interface Props {
-		toggle?: ToggleableContentType;
-		children?: import('svelte').Snippet;
-	}
-
-	let { toggle = ToggleableContentType.Default, children }: Props = $props();
-
-	enum GibberishState {
-		NonExistent,
-		CreatingParent,
-		Binded
-	}
-
-	let defaultSlot: HTMLDivElement | undefined = $state(undefined);
-	let gibberishState: GibberishState = $state(GibberishState.NonExistent);
-	let gibberishParent: HTMLDivElement | undefined;
-	let gibberishSlot: Node | undefined;
-
-	const chaoticWordBank = ["niko", "toba", "seal", "aquarium", "ojisan", "baikal"];
-	const turnToGibberish = (node: Node) => {
-		for (const childNodes of node.childNodes) {
-			turnToGibberish(childNodes);
-		}
-
-		if (node.nodeType === Node.TEXT_NODE && node.textContent?.trim()) {
-			const max = node.textContent.length;
-			node.textContent = "";
-			while (node.textContent.length < max) {
-				node.textContent += (chaoticWordBank[Math.floor(Math.random() * chaoticWordBank.length)]) + " ";
-			}
-		}
-	};
-
-	const processDefaultSlot = (slot: HTMLDivElement | undefined) => {
-		if (!slot || toggle == ToggleableContentType.Default) {
-			return;
-		}
-
-		turnToGibberish(slot);
-	};
-
-	const attachGibberish = (parent: HTMLDivElement | undefined) => {
-		console.log("Help");
-		if (gibberishState !== GibberishState.CreatingParent && parent !== undefined) {
-			return;
-		}
-
-		console.log("Help1");
-		if (gibberishSlot === undefined) {
-			console.warn("Gibberish slot was not created");
-			return;
-		}
-
-		console.log("Help2");
-		if (gibberishParent === undefined) {
-			console.warn("Gibberish parent was not created");
-			return;
-		}
-
-		console.log("Help3");
-		gibberishParent.appendChild(gibberishSlot);
-		console.log(gibberishParent);
-		gibberishState = GibberishState.Binded;
-	};
-
-	onMount(() => {
-		processDefaultSlot(defaultSlot);
-	});
-
-	// afterUpdate(() => {
-	// 	console.log("after update:", gibberishState);
-	// 	console.log("after update:", gibberishParent);
-	// 	if (gibberishParent !== undefined && gibberishState === GibberishState.CreatingParent) {
-	// 		gibberishState = GibberishState.ParentCreated;
-	// 	}
-	// });
-
-	run(() => {
-		attachGibberish(gibberishParent);
-	});
-</script>
-
-{#if toggle === ToggleableContentType.Default}
-	{@render children?.()}
-{:else if (ToggleableContentType.Gibberish === toggle)}
-	<div bind:this={defaultSlot} style={`visibility: ${gibberishState === GibberishState.Binded}`}>
-		{@render children?.()}
-	</div>
-{/if}

package/dist/components/ToggleableContent.svelte.d.ts

@@ -1,8 +0,0 @@
-import { ToggleableContentType } from "./ToggleableContentType";
-interface Props {
-    toggle?: ToggleableContentType;
-    children?: import('svelte').Snippet;
-}
-declare const ToggleableContent: import("svelte").Component<Props, {}, "">;
-type ToggleableContent = ReturnType<typeof ToggleableContent>;
-export default ToggleableContent;

package/dist/components/ToggleableContentType.d.ts

@@ -1,4 +0,0 @@
-export declare enum ToggleableContentType {
-    Default = 0,
-    Gibberish = 1
-}

package/dist/components/ToggleableContentType.js

@@ -1,5 +0,0 @@
-export var ToggleableContentType;
-(function (ToggleableContentType) {
-    ToggleableContentType[ToggleableContentType["Default"] = 0] = "Default";
-    ToggleableContentType[ToggleableContentType["Gibberish"] = 1] = "Gibberish";
-})(ToggleableContentType || (ToggleableContentType = {}));

package/dist/components/chip/Chip.svelte

@@ -1,71 +0,0 @@
-<script lang="ts">
-	import { run } from "svelte/legacy";
-
-	interface Props {
-		onClick?: undefined | (() => void);
-		checked?: boolean;
-		children?: import("svelte").Snippet;
-	}
-
-	let { onClick = undefined, checked = true, children }: Props = $props();
-
-	// todo: look at isLightMode usage
-	// let textColorClass = $derived($isLightMode ? "local-light" : "local-dark");
-	let buttonClass = $state("preset-filled-tertiary-500");
-	const toggleChipColor = (isLightMode: boolean, checked: boolean) => {
-		if (isLightMode) {
-			buttonClass = checked ? "normal-bg" : "light-unchecked-bg";
-		} else {
-			buttonClass = checked ? "normal-bg" : "dark-unchecked-bg";
-		}
-	};
-	// run(() => {
-	// 	toggleChipColor($isLightMode, checked);
-	// });
-</script>
-
-{#if onClick}
-	<!--	<button class={`chip ${buttonClass} ${textColorClass}`}-->
-	<button class={`chip ${buttonClass}`}
-	        onclick={onClick}>
-		{@render children?.()}
-	</button>
-{:else }
-	<!--	<span class={`local-chip normal-bg ${textColorClass}`}>-->
-	<span class={`local-chip normal-bg`}>
-		{@render children?.()}
-	</span>
-{/if}
-
-<style>
-    /*todo: migration*/
-    /*@apply chip;*/
-    .local-chip {
-        border-radius: 1em;
-        margin: 0.25em;
-        font-weight: bold;
-        pointer-events: none;
-    }
-
-    .normal-bg {
-        --tw-bg-opacity: 1;
-        background-color: rgb(var(--color-tertiary-500) / var(--tw-bg-opacity));
-    }
-
-    .dark-unchecked-bg {
-        background-color: rgb(var(--color-tertiary-500) / 0.2);
-    }
-
-    .light-unchecked-bg {
-        background-color: rgb(var(--color-primary-500) / var(--tw-bg-opacity));
-    }
-
-    .local-light {
-        color: rgb(var(--theme-font-color-base));
-    }
-
-    .local-dark {
-        color: whitesmoke;
-        /*color: rgb(var(--theme-font-color-dark));*/
-    }
-</style>

package/dist/components/chip/Chip.svelte.d.ts

@@ -1,8 +0,0 @@
-interface Props {
-    onClick?: undefined | (() => void);
-    checked?: boolean;
-    children?: import("svelte").Snippet;
-}
-declare const Chip: import("svelte").Component<Props, {}, "">;
-type Chip = ReturnType<typeof Chip>;
-export default Chip;

package/dist/components/combo_box/ComboBox.svelte

@@ -1,17 +0,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">
-	{#each stringItems as item}
-		<option value={item}>{item}</option>
-	{/each}
-</select>

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

@@ -1,8 +0,0 @@
-import "./combo-box.postcss";
-interface Props {
-    stringItems?: string[];
-    selectedValue?: string;
-}
-declare const ComboBox: import("svelte").Component<Props, {}, "selectedValue">;
-type ComboBox = ReturnType<typeof ComboBox>;
-export default ComboBox;

package/dist/components/combo_box/ComboBoxWithButton.svelte

@@ -1,29 +0,0 @@
-<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 preset-filled-primary-500" onclick={onClickInternal}>+ Add entry</button>
-	<ComboBox bind:selectedValue={selectedValue}
-	          bind:stringItems={stringItems}></ComboBox>
-</div>
-
-<style>
-    .combo-box-wrapper {
-        display: flex;
-        gap: 1em;
-    }
-</style>

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

@@ -1,9 +0,0 @@
-import "./combo-box.postcss";
-interface Props {
-    selectedValue?: string;
-    stringItems?: string[];
-    onClick?: undefined | ((selected: string) => void);
-}
-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

@@ -1,22 +0,0 @@
-.combo-box-wrapper {
-    display: flex;
-}
-
-.select {
-    flex-grow: 1;
-    @apply preset-filled-primary-500;
-}
-
-.dark .select option {
-    background-color: rgb(var(--color-primary-500) / var(--tw-bg-opacity));
-}
-
-.combo-box-side-button {
-    @apply btn preset-filled-primary-500;
-}
-
-.dark .option,
-.dark .select,
-.dark .combo-box-side-button {
-    color: var(--color-text-50);
-}

package/dist/components/index.d.ts

@@ -1,8 +0,0 @@
-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 "../ui/components/SocialSection.svelte";
-export { default as ElementVisibilityDetector } from "../ui/elements/ElementVisibilityDetector.svelte";
-export { default as BlogTemplate } from "./blog_template/BlogTemplate.svelte";
-export { default as DialogOverlay } from "./dialog_overlay/DialogOverlay.svelte";

package/dist/components/index.js

@@ -1,9 +0,0 @@
-// noinspection JSUnusedGlobalSymbols
-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 "../ui/components/SocialSection.svelte";
-export { default as ElementVisibilityDetector } from "../ui/elements/ElementVisibilityDetector.svelte";
-export { default as BlogTemplate } from "./blog_template/BlogTemplate.svelte";
-export { default as DialogOverlay } from "./dialog_overlay/DialogOverlay.svelte";

package/dist/components/layouts/LayoutConstants.d.ts

@@ -1 +0,0 @@
-export declare const AppShellBackground = "app-shell-token";

package/dist/components/layouts/LayoutConstants.js

@@ -1 +0,0 @@
-export const AppShellBackground = "app-shell-token";

package/dist/components/layouts/SeaweedBaseLayout.svelte

@@ -1,115 +0,0 @@
-<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();
-
-	$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>-->
-
-<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">
-		{@render children?.({ shouldDisplaySocialIcons, })}
-		<div class="footer-space"></div>
-	</div>
-	<!-- todo: eventually re-add	-->
-	<!--	<DialogOverlay />-->
-</div>
-
-<style>
-    .default-page-container {
-        max-width: 2100px;
-        margin: 4em auto;
-        flex-direction: column;
-        z-index: 0;
-    }
-
-    .lead-slot-placeholder {
-        height: 3em;
-        margin-inline-end: 0.5em;
-    }
-
-    /*todo: consider left handedness or customizability*/
-    /*.fab {*/
-    /*    @apply btn-icon variant-filled-surface;*/
-    /*    position: fixed;*/
-    /*    height: 5em;*/
-    /*    width: 5em;*/
-    /*    bottom: 3em;*/
-    /*    right: 2em;*/
-    /*    box-shadow: 0.5em 0.5em 0.5em gray;*/
-    /*}*/
-</style>

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

@@ -1,9 +0,0 @@
-interface Props {
-    shouldDisplayLeadingIcons?: boolean;
-    extraLeadingIcons?: import("svelte").Snippet;
-    s?: import("svelte").Snippet;
-    children?: import("svelte").Snippet<[any]>;
-}
-declare const SeaweedBaseLayout: import("svelte").Component<Props, {}, "shouldDisplayLeadingIcons">;
-type SeaweedBaseLayout = ReturnType<typeof SeaweedBaseLayout>;
-export default SeaweedBaseLayout;