@turnipxenon/pineapple 3.0.0-alpha.9 → 3.1.0-alpha.1

package/dist/ui/modules/modals/general-settings/GeneralSettingsModal.svelte

@@ -1,110 +1,110 @@
-<script lang="ts">
-	import type { ModalProps } from 'svelte-modals';
-	import { setMode, userPrefersMode } from 'mode-watcher';
-
-	import { m } from '../../../../paraglide/messages';
-	import ModalBase from '../../../components/ModalBase.svelte';
-	import DarkIcon from '../../../../assets/icons/icon-dark-mode.svg';
-	import LightIcon from '../../../../assets/icons/icon-light-mode.svg';
-	import ConstrastIcon from '../../../../assets/icons/icon-contrast.svg';
-	import LanguagePicker from './LanguagePicker.svelte';
-
-	let props: ModalProps = $props();
-
-
-	interface ToggleItem {
-		key: 'light' | 'dark' | 'system'
-		imageSrc: string,
-		label: string,
-	}
-
-	const modes: ToggleItem[] = [
-		{ key: 'light', imageSrc: LightIcon, label: 'Light' },
-		{ key: 'dark', imageSrc: DarkIcon, label: 'Dark' },
-		{ key: 'system', imageSrc: ConstrastIcon, label: 'System' }
-	];
-
-	let selectedItem: ToggleItem = $state(modes[0]);
-
-	// when mode is edited outside, adjust toggle button
-	// do not use runes here because we only want explicit changes outside
-	// our control here!
-	userPrefersMode.subscribe((value) => {
-		const si = modes.find(m => m.key === value);
-		if (selectedItem !== si && si) {
-			selectedItem = si;
-		}
-	});
-
-	// when mode is changed inside the button, adjust the mode
-	$effect(() => {
-		switch (selectedItem?.key) {
-			case 'dark':
-				setMode('dark');
-				break;
-			case 'light':
-				setMode('light');
-				break;
-			case 'system':
-				setMode('system');
-				break;
-			default:
-				break;
-		}
-	});
-</script>
-
-<ModalBase {...props}>
-	<div class="wrapper">
-		<h2>{m.settings()}</h2>
-
-		<fieldset class="btn-group border-primary-500 border-2 flex-col p-2 md:flex-row">
-			<legend class="bg-surface-100-900 pl-4 pr-4">Mode</legend>
-			{#each modes as mode (mode)}
-				<button
-					type="button"
-					title={mode.label}
-					class={`btn pt-3 pb-3 hover:brightness-125
-				${mode.key === selectedItem.key ? 'bg-secondary-400 dark:bg-secondary-800' : 'preset-outlined-primary-300-700'}
-				`}
-					onclick={() => { setMode(mode.key) }}
-				>
-					<img
-						src={mode.imageSrc}
-						aria-hidden="true"
-						alt=""
-						class={`icon
-					${mode.key === selectedItem.key ? 'reverse' : ''}
-					`}
-					>
-					{mode.label}
-				</button>
-			{/each}
-		</fieldset>
-
-		<LanguagePicker />
-
-		<div class="actions">
-			<button class="btn preset-filled-primary-400-600 text-surface-100" onclick={() => props.close()}
-							title="Close modal">
-				Close
-			</button>
-		</div>
-	</div>
-</ModalBase>
-
-<style>
-    .actions {
-        display: flex;
-        flex-direction: row-reverse;
-        margin-top: 1.4lh;
-    }
-
-    .wrapper {
-        display: flex;
-        flex-direction: column;
-        justify-content: start;
-        text-align: start;
-        gap: 1lh;
-    }
+<script lang="ts">
+	import type { ModalProps } from 'svelte-modals';
+	import { setMode, userPrefersMode } from 'mode-watcher';
+
+	import { m } from '../../../../paraglide/messages';
+	import ModalBase from '../../../components/ModalBase.svelte';
+	import DarkIcon from '../../../../assets/icons/icon-dark-mode.svg';
+	import LightIcon from '../../../../assets/icons/icon-light-mode.svg';
+	import ConstrastIcon from '../../../../assets/icons/icon-contrast.svg';
+	import LanguagePicker from './LanguagePicker.svelte';
+
+	let props: ModalProps = $props();
+
+
+	interface ToggleItem {
+		key: 'light' | 'dark' | 'system'
+		imageSrc: string,
+		label: string,
+	}
+
+	const modes: ToggleItem[] = [
+		{ key: 'light', imageSrc: LightIcon, label: 'Light' },
+		{ key: 'dark', imageSrc: DarkIcon, label: 'Dark' },
+		{ key: 'system', imageSrc: ConstrastIcon, label: 'System' }
+	];
+
+	let selectedItem: ToggleItem = $state(modes[0]);
+
+	// when mode is edited outside, adjust toggle button
+	// do not use runes here because we only want explicit changes outside
+	// our control here!
+	userPrefersMode.subscribe((value) => {
+		const si = modes.find(m => m.key === value);
+		if (selectedItem !== si && si) {
+			selectedItem = si;
+		}
+	});
+
+	// when mode is changed inside the button, adjust the mode
+	$effect(() => {
+		switch (selectedItem?.key) {
+			case 'dark':
+				setMode('dark');
+				break;
+			case 'light':
+				setMode('light');
+				break;
+			case 'system':
+				setMode('system');
+				break;
+			default:
+				break;
+		}
+	});
+</script>
+
+<ModalBase {...props}>
+	<div class="wrapper">
+		<h2>{m.settings()}</h2>
+
+		<fieldset class="btn-group border-primary-500 border-2 flex-col p-2 md:flex-row">
+			<legend class="bg-surface-100-900 pl-4 pr-4">Mode</legend>
+			{#each modes as mode (mode)}
+				<button
+					type="button"
+					title={mode.label}
+					class={`btn pt-3 pb-3 hover:brightness-125
+				${mode.key === selectedItem.key ? 'bg-secondary-400 dark:bg-secondary-800' : 'preset-outlined-primary-300-700'}
+				`}
+					onclick={() => { setMode(mode.key) }}
+				>
+					<img
+						src={mode.imageSrc}
+						aria-hidden="true"
+						alt=""
+						class={`icon
+					${mode.key === selectedItem.key ? 'reverse' : ''}
+					`}
+					>
+					{mode.label}
+				</button>
+			{/each}
+		</fieldset>
+
+		<LanguagePicker />
+
+		<div class="actions">
+			<button class="btn preset-filled-primary-400-600 text-surface-100" onclick={() => props.close()}
+							title="Close modal">
+				Close
+			</button>
+		</div>
+	</div>
+</ModalBase>
+
+<style>
+    .actions {
+        display: flex;
+        flex-direction: row-reverse;
+        margin-top: 1.4lh;
+    }
+
+    .wrapper {
+        display: flex;
+        flex-direction: column;
+        justify-content: start;
+        text-align: start;
+        gap: 1lh;
+    }
 </style>

package/dist/ui/modules/modals/general-settings/LanguagePicker.svelte

@@ -1,38 +1,43 @@
-<script lang="ts">
-	import { getLocale, localizeHref } from "../../../../paraglide/runtime";
-	import PinyaCombobox from "../../../elements/pinya-combobox/PinyaCombobox.svelte";
-
-	interface ComboxData {
-		label: string;
-		value: "en" | "fr" | "tl";
-	}
-
-	const comboboxData: ComboxData[] = [
-		{ label: "English", value: "en" },
-		{ label: "French", value: "fr" },
-		{ label: "Tagalog", value: "tl" }
-	];
-
-	let selectedCountry = $state([getLocale()]);
-
-	interface ValueDetail {
-		value: string[];
-	}
-
-	const onValueChange = (e: ValueDetail) => {
-		const data = comboboxData.find((d) => d.value === e.value[0]);
-		if (data) {
-			selectedCountry = [data.value];
-			location.href = localizeHref("./", { locale: data.value });
-		}
-	};
-</script>
-
-<PinyaCombobox
-	data={comboboxData}
-	value={selectedCountry}
-	defaultValue={selectedCountry}
-	label="Select Language"
-	placeholder="Select Language"
-	{onValueChange}
+<script lang="ts">
+	import { deLocalizeHref, getLocale, localizeHref } from "../../../../paraglide/runtime";
+	import PinyaCombobox from "../../../elements/pinya-combobox/PinyaCombobox.svelte";
+	import { appState } from "../../../templates/PinyaPageLayout/runes.svelte";
+
+	interface ComboxData {
+		label: string;
+		value: "en" | "fr" | "tl";
+	}
+
+	const comboboxData: ComboxData[] = [
+		{ label: "English", value: "en" },
+		{ label: "French", value: "fr" },
+		{ label: "Tagalog", value: "tl" }
+	];
+
+	let selectedCountry = $state([getLocale()]);
+
+	interface ValueDetail {
+		value: string[];
+	}
+
+	const onValueChange = (e: ValueDetail) => {
+		const data = comboboxData.find((d) => d.value === e.value[0]);
+		if (data) {
+			selectedCountry = [data.value];
+			const pathname = deLocalizeHref(location.href);
+			location.href = localizeHref(pathname, { locale: data.value });
+		}
+	};
+
+	let disabled = $derived(!appState.isLanguagePickerAvailable);
+</script>
+
+<PinyaCombobox
+	data={comboboxData}
+	value={selectedCountry}
+	defaultValue={selectedCountry}
+	label="Select Language"
+	placeholder="Select Language"
+	{onValueChange}
+	{disabled}
 />

package/dist/ui/modules/projects/Hepcat.svelte

@@ -1,10 +1,12 @@
 <script module lang="ts">
 	import HeaderHepCat from "../../../assets/temp/header-hep-cat.mp4";
 	import BitbucketIcon from "../../../assets/icons/bitbucket-icon.svg";
-	import type { ProjectComponentProps } from "../../templates/seaweed-layout/ProjectComponentProps";
-	import { FourPartCard } from "../../components/index.js";
-	import { ButtonVariant, ImageIcon, PinyaButton } from "../../elements/index.js";
-	import { ItchLogoHotLink } from "../../../consts.js";
+	import type { ProjectComponentProps } from "../../templates/SeaweedLayout/ProjectComponentProps";
+	import { default as FourPartCard } from "../../components/FourPartCard.svelte";
+	import { default as ImageIcon } from "../../elements/ImageIcon.svelte";
+	import { default as PinyaButton } from "../../elements/PinyaButton/PinyaButton.svelte";
+	import { ButtonVariant } from "../../elements/PinyaButton/PinyaButtonProps";
+	import { ItchLogoHotLink } from "../../../consts";
 
 	const key = "Hepcat";
 	export { component, key };

package/dist/ui/modules/projects/Hepcat.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { ProjectComponentProps } from "../../templates/seaweed-layout/ProjectComponentProps";
+import type { ProjectComponentProps } from "../../templates/SeaweedLayout/ProjectComponentProps";
 declare const key = "Hepcat";
 export { component, key };
 declare const component: (props: ProjectComponentProps) => ReturnType<import("svelte").Snippet>;

package/dist/ui/modules/projects/Pengi.svelte

@@ -1,60 +1,62 @@
-<script module lang="ts">
-	import HeaderPengi from "../../../assets/temp/header-pengi.mp4";
-	import GithubIcon from "../../../assets/icons/github-mark.svg";
-	import type { ProjectComponentProps } from "../../templates/index";
-	import { FourPartCard } from "../../components/index.js";
-	import { ButtonVariant, ImageIcon, PinyaButton } from "../../elements/index.js";
-	import { ItchLogoHotLink } from "../../../consts.js";
-
-	const key = "Pengi";
-	export { component, key };
-</script>
-
-{#snippet component(props: ProjectComponentProps)}
-	<FourPartCard>
-		{#snippet headerCover()}
-			<video class="rounded-t-xl max-h-64 not-prose object-cover w-full" playsinline autoplay muted loop preload="none">
-				video unavailable. original video contains pengi gameplay showing the dynamic dialog
-				layout and character animation.
-				<source src={HeaderPengi} type="video/mp4">
-			</video>
-		{/snippet}
-
-		{#snippet header()}
-			<h3>Pengi</h3>
-
-			<blockquote>
-				Well well, quite the dreamer, aren’t you? Might be hard to get in... costs a lot of
-				money...
-			</blockquote>
-		{/snippet}
-
-		<p>
-			Pengi is a text-based adventure made in <span class='qt-unity'>Unity</span> (<span class='qt-cs'>C#</span>). I
-			acted as the sole
-			programmer for the team. Most of the work revolves around UI and creating <a
-			href="https://yarnspinner.dev/" target="_blank">YarnSpinner</a> commands for writers
-			to use to create expressive stage directions in the script.
-		</p>
-
-		<section class="game-link-section">
-			<PinyaButton
-				buttonVariant={ButtonVariant.Image}
-				aria-label="Click to go to Project Pengi in Github"
-				title="https://github.com/GreenTea-M/ProjectPengi"
-				onclick={() => window.open("https://github.com/GreenTea-M/ProjectPengi")}
-			>
-				<ImageIcon alt="" aria-hidden="true" src={GithubIcon} />
-			</PinyaButton>
-			<PinyaButton
-				buttonVariant={ButtonVariant.Image}
-				aria-label="Click to go to Project Pengi in Itch.io"
-				title="https://turnipxenon.itch.io/pengi"
-				onclick={() => window.open("https://turnipxenon.itch.io/pengi")}
-			>
-				<ImageIcon alt="" aria-hidden="true" src={ItchLogoHotLink} />
-			</PinyaButton>
-		</section>
-
-	</FourPartCard>
+<script module lang="ts">
+	import HeaderPengi from "../../../assets/temp/header-pengi.mp4";
+	import GithubIcon from "../../../assets/icons/github-mark.svg";
+	import type { ProjectComponentProps } from "../../templates/SeaweedLayout/ProjectComponentProps";
+	import { default as FourPartCard } from "../../components/FourPartCard.svelte";
+	import { default as ImageIcon } from "../../elements/ImageIcon.svelte";
+	import { default as PinyaButton } from "../../elements/PinyaButton/PinyaButton.svelte";
+	import { ButtonVariant } from "../../elements/PinyaButton/PinyaButtonProps";
+	import { ItchLogoHotLink } from "../../../consts";
+
+	const key = "Pengi";
+	export { component, key };
+</script>
+
+{#snippet component(props: ProjectComponentProps)}
+	<FourPartCard>
+		{#snippet headerCover()}
+			<video class="rounded-t-xl max-h-64 not-prose object-cover w-full" playsinline autoplay muted loop preload="none">
+				video unavailable. original video contains pengi gameplay showing the dynamic dialog
+				layout and character animation.
+				<source src={HeaderPengi} type="video/mp4">
+			</video>
+		{/snippet}
+
+		{#snippet header()}
+			<h3>Pengi</h3>
+
+			<blockquote>
+				Well well, quite the dreamer, aren’t you? Might be hard to get in... costs a lot of
+				money...
+			</blockquote>
+		{/snippet}
+
+		<p>
+			Pengi is a text-based adventure made in <span class='qt-unity'>Unity</span> (<span class='qt-cs'>C#</span>). I
+			acted as the sole
+			programmer for the team. Most of the work revolves around UI and creating <a
+			href="https://yarnspinner.dev/" target="_blank">YarnSpinner</a> commands for writers
+			to use to create expressive stage directions in the script.
+		</p>
+
+		<section class="game-link-section">
+			<PinyaButton
+				buttonVariant={ButtonVariant.Image}
+				aria-label="Click to go to Project Pengi in Github"
+				title="https://github.com/GreenTea-M/ProjectPengi"
+				onclick={() => window.open("https://github.com/GreenTea-M/ProjectPengi")}
+			>
+				<ImageIcon alt="" aria-hidden="true" src={GithubIcon} />
+			</PinyaButton>
+			<PinyaButton
+				buttonVariant={ButtonVariant.Image}
+				aria-label="Click to go to Project Pengi in Itch.io"
+				title="https://turnipxenon.itch.io/pengi"
+				onclick={() => window.open("https://turnipxenon.itch.io/pengi")}
+			>
+				<ImageIcon alt="" aria-hidden="true" src={ItchLogoHotLink} />
+			</PinyaButton>
+		</section>
+
+	</FourPartCard>
 {/snippet}

package/dist/ui/modules/projects/Pengi.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { ProjectComponentProps } from "../../templates/index";
+import type { ProjectComponentProps } from "../../templates/SeaweedLayout/ProjectComponentProps";
 declare const key = "Pengi";
 export { component, key };
 declare const component: (props: ProjectComponentProps) => ReturnType<import("svelte").Snippet>;

package/dist/ui/modules/projects/Soulwork.svelte

@@ -1,10 +1,12 @@
 <script module lang="ts">
-	import HeaderSoulwork from '../../../assets/temp/header-soulwork.mp4';
-	import GithubIcon from '../../../assets/icons/github-mark.svg';
+	import HeaderSoulwork from "../../../assets/temp/header-soulwork.mp4";
+	import GithubIcon from "../../../assets/icons/github-mark.svg";
 	import type { ProjectComponentProps } from "../../templates/index";
-	import { FourPartCard } from "../../components/index";
-	import { ButtonVariant, ImageIcon, PinyaButton } from "../../elements/index.js";
-	import { ItchLogoHotLink } from "../../../consts.js";
+	import { default as FourPartCard } from "../../components/FourPartCard.svelte";
+	import { default as ImageIcon } from "../../elements/ImageIcon.svelte";
+	import { default as PinyaButton } from "../../elements/PinyaButton/PinyaButton.svelte";
+	import { ButtonVariant } from "../../elements/PinyaButton/PinyaButtonProps";
+	import { ItchLogoHotLink } from "../../../consts";
 
 	const key = "Soulwork";
 	export { component, key };

package/dist/ui/modules/projects/ThisWebpage.svelte

@@ -1,28 +1,31 @@
 <script module lang="ts">
-	import GithubIcon from '../../../assets/icons/github-mark.svg';
-	import ThisWebsiteFootage from '../../../assets/others/seaweed-showcase.mp4';
-	import type { ProjectComponentProps } from '../../templates/seaweed-layout/ProjectComponentProps';
+	import GithubIcon from "../../../assets/icons/github-mark.svg";
+	import ThisWebsiteFootage from "../../../assets/others/seaweed-showcase.mp4";
+	import type { ProjectComponentProps } from "../../templates/SeaweedLayout/ProjectComponentProps";
+	import { default as FourPartCard } from "../../components/FourPartCard.svelte";
+	import { default as ImageIcon } from "../../elements/ImageIcon.svelte";
+	import { default as PinyaButton } from "../../elements/PinyaButton/PinyaButton.svelte";
+	import { ButtonVariant } from "../../elements/PinyaButton/PinyaButtonProps";
+	import { default as TextChip } from "../../elements/text-chip/TextChip.svelte";
 
-	const key = 'This Webpage';
+	const key = "This Webpage";
 	export { component, key };
 </script>
-<script>
-	import { FourPartCard } from "../../components/index";
-	import { ButtonVariant, ImageIcon, PinyaButton, TextChip } from "../../elements/index.js";
-</script>
 
 {#snippet component(props: ProjectComponentProps)}
 	<FourPartCard>
 
 		{#snippet headerCover()}
-			<video
-				playsinline autoplay muted loop preload="none"
-				class="game-video-cover"
-			>
-				<source src={ThisWebsiteFootage} type="video/mp4">
-				video unavailable. original video contains clips of this website being resized and light-dark mode being
-				toggled.
-			</video>
+			{#if !props.isPineapple}
+				<video
+					playsinline autoplay muted loop preload="none"
+					class="game-video-cover"
+				>
+					<source src={ThisWebsiteFootage} type="video/mp4">
+					video unavailable. original video contains clips of this website being resized and light-dark mode being
+					toggled.
+				</video>
+			{/if}
 		{/snippet}
 
 		{#snippet header()}

package/dist/ui/modules/projects/ThisWebpage.svelte.d.ts

@@ -1,4 +1,4 @@
-import type { ProjectComponentProps } from '../../templates/seaweed-layout/ProjectComponentProps';
+import type { ProjectComponentProps } from "../../templates/SeaweedLayout/ProjectComponentProps";
 declare const key = "This Webpage";
 export { component, key };
 declare const component: (props: ProjectComponentProps) => ReturnType<import("svelte").Snippet>;

package/dist/ui/templates/{pinya-page-layout/component.svelte → PinyaPageLayout/PinyaPageLayout.svelte}

@@ -8,7 +8,7 @@
 	import { modals } from "svelte-modals";
 	import GeneralSettingsModal from "../../modules/modals/general-settings/GeneralSettingsModal.svelte";
 	import { localizeHref } from "../../../paraglide/runtime";
-	import { appState } from "..";
+	import { appState } from "./runes.svelte";
 
 	let {
 		children,

package/dist/ui/templates/PinyaPageLayout/PinyaPageLayout.svelte.d.ts

@@ -0,0 +1,9 @@
+import type { Snippet } from "svelte";
+type $$ComponentProps = {
+    children: Snippet;
+    appBarLead?: Snippet;
+    footer?: Snippet;
+};
+declare const PinyaPageLayout: import("svelte").Component<$$ComponentProps, {}, "appBarLead">;
+type PinyaPageLayout = ReturnType<typeof PinyaPageLayout>;
+export default PinyaPageLayout;

package/dist/ui/templates/PinyaPageLayout/index.d.ts

@@ -0,0 +1,2 @@
+export { default as PinyaPageLayout } from "./PinyaPageLayout.svelte";
+export * from "./runes.svelte";

package/dist/ui/templates/PinyaPageLayout/index.js

@@ -0,0 +1,2 @@
+export { default as PinyaPageLayout } from "./PinyaPageLayout.svelte";
+export * from "./runes.svelte";

package/dist/ui/templates/{pinya-page-layout → PinyaPageLayout}/runes.svelte.d.ts

@@ -2,6 +2,9 @@ import type { Snippet } from 'svelte';
 interface AppStore {
     title: string;
     lead?: Snippet;
+    isLanguagePickerAvailable: boolean;
+    allowDialog?: boolean;
+    enableDialogOnByDefault?: boolean;
 }
 export declare const appState: AppStore;
 export {};

package/dist/ui/templates/PinyaPageLayout/runes.svelte.js

@@ -0,0 +1,4 @@
+export const appState = $state({
+    title: '',
+    isLanguagePickerAvailable: true,
+});

package/dist/ui/{modules/seaweed → templates/SeaweedLayout}/ChumBucket.svelte

@@ -1,5 +1,5 @@
 <script lang="ts">
-	import { type PageMeta } from "../../../components/navigation_component/index";
+	import { type PageMeta } from "../../modules/NavigationMenu/index";
 	import { onMount } from "svelte";
 	import Placeholder from "../../elements/Placeholder.svelte";
 

package/dist/{template/seaweed → ui/templates/SeaweedLayout}/CreateUrlForm.svelte

@@ -1,9 +1,9 @@
 <script lang="ts">
-	import { type CreateUrlRequest, CreateUrlResult, jsonToCreateUrlResponse } from "../../types/api/CreateUrl";
+	import { type CreateUrlRequest, CreateUrlResult, jsonToCreateUrlResponse } from "../../../types/api/CreateUrl";
 	import type { ToastContext } from "@skeletonlabs/skeleton-svelte";
 	import { getContext } from "svelte";
 	import type { ToastSettings } from "./ToastSettings";
-	import { PinyaButton } from "../../ui/elements/index";
+	import { PinyaButton } from "../../elements/index";
 
 	export const toast: ToastContext = getContext("toast");