@turnipxenon/pineapple 2.10.0 → 3.0.0-alpha.1

package/dist/components/RandomizedImage.svelte

@@ -1,10 +1,15 @@
-<script>import { modeCurrent } from "@skeletonlabs/skeleton";
-export let src;
-export let rng;
-let rotateRandom = rng() * 90 - 45;
-const paddingLeft = 1 + rng() * 5;
-const paddingRight = 1 + rng() * 5;
-const paddingTop = 1 + rng() * 7;
+<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
@@ -15,7 +20,9 @@ const paddingTop = 1 + rng() * 7;
 	     aria-hidden="true"
 	     style="--rotateRandom:{rotateRandom}deg;"
 	     alt=""
-	     class:darkMode={modeCurrent} />
+	/>
+<!--	todo: migration -->
+<!--	     class:darkMode={modeCurrent} />-->
 </div>
 
 <style>

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

@@ -1,17 +1,7 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        src: string;
-        rng: () => number;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type RandomizedImageProps = typeof __propDef.props;
-export type RandomizedImageEvents = typeof __propDef.events;
-export type RandomizedImageSlots = typeof __propDef.slots;
-export default class RandomizedImage extends SvelteComponent<RandomizedImageProps, RandomizedImageEvents, RandomizedImageSlots> {
+interface Props {
+    src: string;
+    rng: () => number;
 }
-export {};
+declare const RandomizedImage: import("svelte").Component<Props, {}, "">;
+type RandomizedImage = ReturnType<typeof RandomizedImage>;
+export default RandomizedImage;

package/dist/components/StickyElement.svelte

@@ -1,18 +1,27 @@
-<script>import { onMount } from "svelte";
-import { fly } from "svelte/transition";
-export let isFirst = false;
-let stickyElem;
-let isSticky = false;
-let observer;
-onMount(() => {
-  observer = new IntersectionObserver(
-    ([e]) => {
-      isSticky = e.intersectionRatio < 1;
-    },
-    { threshold: [1] }
-  );
-  observer.observe(stickyElem);
-});
+<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}}>
@@ -24,7 +33,7 @@ onMount(() => {
 	<br>
 {/if}
 	<span class="sticky-div" bind:this={stickyElem}>
-		<slot/>
+		{@render children?.()}
 	</span>
 </span>
 

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

@@ -1,18 +1,7 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        isFirst?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type StickyElementProps = typeof __propDef.props;
-export type StickyElementEvents = typeof __propDef.events;
-export type StickyElementSlots = typeof __propDef.slots;
-export default class StickyElement extends SvelteComponent<StickyElementProps, StickyElementEvents, StickyElementSlots> {
+interface Props {
+    isFirst?: boolean;
+    children?: import('svelte').Snippet;
 }
-export {};
+declare const StickyElement: import("svelte").Component<Props, {}, "">;
+type StickyElement = ReturnType<typeof StickyElement>;
+export default StickyElement;

package/dist/components/ToggleableContent.svelte

@@ -1,66 +1,95 @@
-<script>import { ToggleableContentType } from "./ToggleableContentType";
-import { afterUpdate, onMount } from "svelte";
-export let toggle = ToggleableContentType.Default;
-var GibberishState = /* @__PURE__ */ ((GibberishState2) => {
-  GibberishState2[GibberishState2["NonExistent"] = 0] = "NonExistent";
-  GibberishState2[GibberishState2["CreatingParent"] = 1] = "CreatingParent";
-  GibberishState2[GibberishState2["Binded"] = 2] = "Binded";
-  return GibberishState2;
-})(GibberishState || {});
-let defaultSlot = void 0;
-let gibberishState = 0 /* NonExistent */;
-let gibberishParent;
-let gibberishSlot;
-const chaoticWordBank = ["niko", "toba", "seal", "aquarium", "ojisan", "baikal"];
-const turnToGibberish = (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) => {
-  if (!slot || toggle == ToggleableContentType.Default) {
-    return;
-  }
-  turnToGibberish(slot);
-};
-const attachGibberish = (parent) => {
-  console.log("Help");
-  if (gibberishState !== 1 /* CreatingParent */ && parent !== void 0) {
-    return;
-  }
-  console.log("Help1");
-  if (gibberishSlot === void 0) {
-    console.warn("Gibberish slot was not created");
-    return;
-  }
-  console.log("Help2");
-  if (gibberishParent === void 0) {
-    console.warn("Gibberish parent was not created");
-    return;
-  }
-  console.log("Help3");
-  gibberishParent.appendChild(gibberishSlot);
-  console.log(gibberishParent);
-  gibberishState = 2 /* Binded */;
-};
-onMount(() => {
-  processDefaultSlot(defaultSlot);
-});
-$:
-  attachGibberish(gibberishParent);
+<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}
-	<slot />
+	{@render children?.()}
 {:else if (ToggleableContentType.Gibberish === toggle)}
 	<div bind:this={defaultSlot} style={`visibility: ${gibberishState === GibberishState.Binded}`}>
-		<slot />
+		{@render children?.()}
 	</div>
 {/if}

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

@@ -1,19 +1,8 @@
-import { SvelteComponent } from "svelte";
 import { ToggleableContentType } from "./ToggleableContentType";
-declare const __propDef: {
-    props: {
-        toggle?: ToggleableContentType | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type ToggleableContentProps = typeof __propDef.props;
-export type ToggleableContentEvents = typeof __propDef.events;
-export type ToggleableContentSlots = typeof __propDef.slots;
-export default class ToggleableContent extends SvelteComponent<ToggleableContentProps, ToggleableContentEvents, ToggleableContentSlots> {
+interface Props {
+    toggle?: ToggleableContentType;
+    children?: import('svelte').Snippet;
 }
-export {};
+declare const ToggleableContent: import("svelte").Component<Props, {}, "">;
+type ToggleableContent = ReturnType<typeof ToggleableContent>;
+export default ToggleableContent;

package/dist/components/blog_template/BlogTemplate.svelte

@@ -1,37 +1,57 @@
-<script>import { Card, enableDialogueOverlay } from "../..";
-import "./blog-template.css";
-import { enableBackground } from "../../store";
-import { onDestroy, onMount } from "svelte";
-import BlogTemplateInner from "./BlogTemplateInner.svelte";
-export let pageMeta;
-export let shouldFillWholePage = false;
-export let shouldEnableDialogOverlay = false;
-export let includeDataNoSnippet = false;
-enableBackground.set(!shouldFillWholePage);
-let initialDialogState = false;
-onMount(() => {
-  initialDialogState = $enableDialogueOverlay;
-  enableDialogueOverlay.set(shouldEnableDialogOverlay);
-});
-onDestroy(() => {
-  enableBackground.set(true);
-  enableDialogueOverlay.set(initialDialogState);
-});
+<script lang="ts">
+	import { Card, enableDialogueOverlay, type SimplePageMeta } from "../..";
+	import "./blog-template.css";
+	import { enableBackground } from "../../store";
+	import { onDestroy, onMount } from "svelte";
+	import BlogTemplateInner from "./BlogTemplateInner.svelte";
+
+	// grab page meta from the adjacent meta.json
+	interface Props {
+		pageMeta: SimplePageMeta;
+		shouldFillWholePage?: boolean;
+		shouldEnableDialogOverlay?: boolean;
+		includeDataNoSnippet?: boolean;
+		children?: import('svelte').Snippet;
+	}
+
+	let {
+		pageMeta,
+		shouldFillWholePage = false,
+		shouldEnableDialogOverlay = false,
+		includeDataNoSnippet = false,
+		children
+	}: Props = $props();
+
+	enableBackground.set(!shouldFillWholePage);
+	let initialDialogState = false;
+
+	onMount(() => {
+		initialDialogState = $enableDialogueOverlay;
+		enableDialogueOverlay.set(shouldEnableDialogOverlay);
+	});
+
+	onDestroy(() => {
+		enableBackground.set(true);
+		enableDialogueOverlay.set(initialDialogState);
+	});
+
 </script>
 
 {#if shouldFillWholePage}
 	<div class="whole-page">
 		<BlogTemplateInner pageMeta={pageMeta}>
-			<slot />
+			{@render children?.()}
 		</BlogTemplateInner>
 	</div>
 {:else}
 	<Card includeDataNoSnippet={includeDataNoSnippet}>
-		<div slot="content" class="default-card">
-			<BlogTemplateInner pageMeta={pageMeta}>
-				<slot />
-			</BlogTemplateInner>
-		</div>
+		{#snippet content()}
+				<div  class="default-card">
+				<BlogTemplateInner pageMeta={pageMeta}>
+					{@render children?.()}
+				</BlogTemplateInner>
+			</div>
+			{/snippet}
 	</Card>
 {/if}
 

package/dist/components/blog_template/BlogTemplate.svelte.d.ts

@@ -1,23 +1,12 @@
-import { SvelteComponent } from "svelte";
 import { type SimplePageMeta } from "../..";
 import "./blog-template.css";
-declare const __propDef: {
-    props: {
-        pageMeta: SimplePageMeta;
-        shouldFillWholePage?: boolean | undefined;
-        shouldEnableDialogOverlay?: boolean | undefined;
-        includeDataNoSnippet?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type BlogTemplateProps = typeof __propDef.props;
-export type BlogTemplateEvents = typeof __propDef.events;
-export type BlogTemplateSlots = typeof __propDef.slots;
-export default class BlogTemplate extends SvelteComponent<BlogTemplateProps, BlogTemplateEvents, BlogTemplateSlots> {
+interface Props {
+    pageMeta: SimplePageMeta;
+    shouldFillWholePage?: boolean;
+    shouldEnableDialogOverlay?: boolean;
+    includeDataNoSnippet?: boolean;
+    children?: import('svelte').Snippet;
 }
-export {};
+declare const BlogTemplate: import("svelte").Component<Props, {}, "">;
+type BlogTemplate = ReturnType<typeof BlogTemplate>;
+export default BlogTemplate;

package/dist/components/blog_template/BlogTemplateInner.svelte

@@ -1,4 +1,12 @@
-<script>export let pageMeta;
+<script lang="ts">
+	import type { SimplePageMeta } from "../..";
+
+	interface Props {
+		pageMeta: SimplePageMeta;
+		children?: import('svelte').Snippet;
+	}
+
+	let { pageMeta, children }: Props = $props();
 </script>
 
 <article>
@@ -16,14 +24,14 @@
 			<section id="article-tags">
 				Tags:
 				{#each pageMeta.tags as tag}
-					<span class="badge variant-filled">{tag}</span>
+					<span class="badge preset-filled">{tag}</span>
 				{/each}
 			</section>
 		{/if}
 	</hgroup>
 
 	<div class="article-content">
-		<slot />
+		{@render children?.()}
 	</div>
 </article>
 

package/dist/components/blog_template/BlogTemplateInner.svelte.d.ts

@@ -1,19 +1,8 @@
-import { SvelteComponent } from "svelte";
 import type { SimplePageMeta } from "../..";
-declare const __propDef: {
-    props: {
-        pageMeta: SimplePageMeta;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type BlogTemplateInnerProps = typeof __propDef.props;
-export type BlogTemplateInnerEvents = typeof __propDef.events;
-export type BlogTemplateInnerSlots = typeof __propDef.slots;
-export default class BlogTemplateInner extends SvelteComponent<BlogTemplateInnerProps, BlogTemplateInnerEvents, BlogTemplateInnerSlots> {
+interface Props {
+    pageMeta: SimplePageMeta;
+    children?: import('svelte').Snippet;
 }
-export {};
+declare const BlogTemplateInner: import("svelte").Component<Props, {}, "">;
+type BlogTemplateInner = ReturnType<typeof BlogTemplateInner>;
+export default BlogTemplateInner;

package/dist/components/chip/Chip.svelte

@@ -1,69 +1,45 @@
-<script>import { modeCurrent as isLightMode } from "@skeletonlabs/skeleton";
-export let onClick = void 0;
-export let checked = true;
-$:
-  textColorClass = $isLightMode ? "local-light" : "local-dark";
-let buttonClass = "variant-filled-tertiary";
-const toggleChipColor = (isLightMode2, checked2) => {
-  if (isLightMode2) {
-    buttonClass = checked2 ? "normal-bg" : "light-unchecked-bg";
-  } else {
-    buttonClass = checked2 ? "normal-bg" : "dark-unchecked-bg";
-  }
-};
-$:
-  toggleChipColor($isLightMode, checked);
+<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}`}
-	        on:click={onClick}>
-		<slot />
+	<!--	<button class={`chip ${buttonClass} ${textColorClass}`}-->
+	<button class={`chip ${buttonClass}`}
+	        onclick={onClick}>
+		{@render children?.()}
 	</button>
 {:else }
-	<span class={`local-chip normal-bg ${textColorClass}`}>
-		<slot />
+	<!--	<span class={`local-chip normal-bg ${textColorClass}`}>-->
+	<span class={`local-chip normal-bg`}>
+		{@render children?.()}
 	</span>
 {/if}
 
 <style>
-    .local-chip {
-        cursor: pointer;
-        white-space: nowrap;
-        padding-left: 0.75rem;
-        padding-right: 0.75rem;
-        padding-top: 0.375rem;
-        padding-bottom: 0.375rem;
-        text-align: center;
-        font-size: 0.75rem;
-        line-height: 1rem;
-        border-radius: 0.25rem;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        transition-property: all;
-        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-        transition-duration: 150ms;
-}
-.local-chip > :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)));
-}
-a.local-chip:hover,
-	button.local-chip:hover {
-        --tw-brightness: brightness(1.15);
-        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-.local-chip:disabled {
-        cursor: not-allowed;
-        opacity: 0.5;
-}
-.local-chip:disabled:active {
-        --tw-scale-x: 1;
-        --tw-scale-y: 1;
-        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
+    /*todo: migration*/
+    /*@apply chip;*/
     .local-chip {
         border-radius: 1em;
         margin: 0.25em;

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

@@ -1,19 +1,8 @@
-import { SvelteComponent } from "svelte";
-declare const __propDef: {
-    props: {
-        onClick?: undefined | (() => void);
-        checked?: boolean | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {
-        default: {};
-    };
-};
-export type ChipProps = typeof __propDef.props;
-export type ChipEvents = typeof __propDef.events;
-export type ChipSlots = typeof __propDef.slots;
-export default class Chip extends SvelteComponent<ChipProps, ChipEvents, ChipSlots> {
+interface Props {
+    onClick?: undefined | (() => void);
+    checked?: boolean;
+    children?: import("svelte").Snippet;
 }
-export {};
+declare const Chip: import("svelte").Component<Props, {}, "">;
+type Chip = ReturnType<typeof Chip>;
+export default Chip;

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">