@turnipxenon/pineapple 4.5.0 → 5.0.0-alpha.1

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

@@ -0,0 +1 @@
+{"version":3,"file":"GeneralSettingsModal.svelte.d.ts","sourceRoot":"","sources":["../../../../../src/lib/ui/modules/modals/general-settings/GeneralSettingsModal.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAqFD,QAAA,MAAM,SAAS;;;;;;CAA0C,CAAC;AAC1D,MAAM,MAAM,yBAAyB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC/D,MAAM,MAAM,0BAA0B,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACjE,MAAM,MAAM,yBAAyB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE/D,MAAM,CAAC,OAAO,OAAO,oBAAqB,SAAQ,oBAAoB,CAAC,yBAAyB,EAAE,0BAA0B,EAAE,yBAAyB,CAAC;CACvJ"}

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

@@ -1,7 +1,7 @@
 <script lang="ts">
-	import { deLocalizeHref, getLocale, localizeHref } from "../../../../paraglide/runtime";
+	import { deLocalizeHref, getLocale, localizeHref } from "../../../../external/paraglide/runtime";
 	import PinyaCombobox from "../../../elements/pinya-combobox/PinyaCombobox.svelte";
-	import { appState } from "../../../templates/PinyaPageLayout/runes.svelte";
+	import { appState } from "../../../templates/PinyaPageLayout/pinyaPageLayoutRunes.svelte.js";
 
 	interface ComboxData {
 		label: string;
@@ -14,16 +14,14 @@
 		{ label: "Tagalog", value: "tl" }
 	];
 
-	let selectedCountry = $state([getLocale()]);
+	let selectedCountry = $state(getLocale());
 
-	interface ValueDetail {
-		value: string[];
-	}
+	const onValueChange = (e: { value: ComboxData["value"] | undefined }) => {
+		if (!e.value) return;
 
-	const onValueChange = (e: ValueDetail) => {
-		const data = comboboxData.find((d) => d.value === e.value[0]);
+		const data = comboboxData.find((d) => d.value === e.value);
 		if (data) {
-			selectedCountry = [data.value];
+			selectedCountry = data.value;
 			const pathname = deLocalizeHref(location.href);
 			location.href = localizeHref(pathname, { locale: data.value });
 		}
@@ -40,4 +38,4 @@
 	placeholder="Select Language"
 	{onValueChange}
 	{disabled}
-/>
+/>

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

@@ -1,3 +1,15 @@
-declare const LanguagePicker: import("svelte").Component<Record<string, never>, {}, "">;
-type LanguagePicker = ReturnType<typeof LanguagePicker>;
-export default LanguagePicker;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type LanguagePickerProps = typeof __propDef.props;
+export type LanguagePickerEvents = typeof __propDef.events;
+export type LanguagePickerSlots = typeof __propDef.slots;
+export default class LanguagePicker extends SvelteComponentTyped<LanguagePickerProps, LanguagePickerEvents, LanguagePickerSlots> {
+}
+export {};
+//# sourceMappingURL=LanguagePicker.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"LanguagePicker.svelte.d.ts","sourceRoot":"","sources":["../../../../../src/lib/ui/modules/modals/general-settings/LanguagePicker.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAyCD,QAAA,MAAM,SAAS;;;;;;CAA0C,CAAC;AAC1D,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACzD,MAAM,MAAM,oBAAoB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC3D,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEzD,MAAM,CAAC,OAAO,OAAO,cAAe,SAAQ,oBAAoB,CAAC,mBAAmB,EAAE,oBAAoB,EAAE,mBAAmB,CAAC;CAC/H"}

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

@@ -70,4 +70,4 @@
         object-position: top;
         max-height: 64rem;
     }
-</style>
+</style>

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

@@ -1,22 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
 import type { ProjectComponentProps } from "../../templates/SeaweedLayout/ProjectComponentProps";
 declare const component: (props: ProjectComponentProps) => ReturnType<import("svelte").Snippet>;
 declare const key = "Hepcat";
 export { component, key };
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
     };
-    z_$$bindings?: Bindings;
+    slots: {};
+};
+export type HepcatProps = typeof __propDef.props;
+export type HepcatEvents = typeof __propDef.events;
+export type HepcatSlots = typeof __propDef.slots;
+export default class Hepcat extends SvelteComponentTyped<HepcatProps, HepcatEvents, HepcatSlots> {
 }
-declare const Hepcat: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Hepcat = InstanceType<typeof Hepcat>;
-export default Hepcat;
+//# sourceMappingURL=Hepcat.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Hepcat.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/modules/projects/Hepcat.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAGA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,uDAAuD,CAAC;AAMnG,QAAA,MAAM,SAAS,GAAyB,OAAO,qBAAqB,KAAqB,UAAU,CAAC,OAAO,QAAQ,EAAE,OAAO,CAwChG,CAAC;AAE7B,QAAA,MAAM,GAAG,WAAW,CAAC;AACrB,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC;AAU3B,QAAA,MAAM,SAAS;;;;;;CAA0C,CAAC;AAC1D,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACjD,MAAM,MAAM,YAAY,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACnD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEjD,MAAM,CAAC,OAAO,OAAO,MAAO,SAAQ,oBAAoB,CAAC,WAAW,EAAE,YAAY,EAAE,WAAW,CAAC;CAC/F"}

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

@@ -59,4 +59,4 @@
 		</section>
 
 	</FourPartCard>
-{/snippet}
+{/snippet}

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

@@ -1,22 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
 import type { ProjectComponentProps } from "../../templates/SeaweedLayout/ProjectComponentProps";
 declare const component: (props: ProjectComponentProps) => ReturnType<import("svelte").Snippet>;
 declare const key = "Pengi";
 export { component, key };
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
     };
-    z_$$bindings?: Bindings;
+    slots: {};
+};
+export type PengiProps = typeof __propDef.props;
+export type PengiEvents = typeof __propDef.events;
+export type PengiSlots = typeof __propDef.slots;
+export default class Pengi extends SvelteComponentTyped<PengiProps, PengiEvents, PengiSlots> {
 }
-declare const Pengi: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Pengi = InstanceType<typeof Pengi>;
-export default Pengi;
+//# sourceMappingURL=Pengi.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"Pengi.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/modules/projects/Pengi.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAGA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,uDAAuD,CAAC;AAMnG,QAAA,MAAM,SAAS,GAAyB,OAAO,qBAAqB,KAAqB,UAAU,CAAC,OAAO,QAAQ,EAAE,OAAO,CAoChG,CAAC;AAE7B,QAAA,MAAM,GAAG,UAAU,CAAC;AACpB,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC;AAO3B,QAAA,MAAM,SAAS;;;;;;CAA0C,CAAC;AAC1D,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAChD,MAAM,MAAM,WAAW,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAClD,MAAM,MAAM,UAAU,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEhD,MAAM,CAAC,OAAO,OAAO,KAAM,SAAQ,oBAAoB,CAAC,UAAU,EAAE,WAAW,EAAE,UAAU,CAAC;CAC3F"}

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

@@ -1,22 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
 import type { ProjectComponentProps } from "../../templates/SeaweedLayout";
 declare const component: (props: ProjectComponentProps) => ReturnType<import("svelte").Snippet>;
 declare const key = "Soulwork";
 export { component, key };
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
     };
-    z_$$bindings?: Bindings;
+    slots: {};
+};
+export type SoulworkProps = typeof __propDef.props;
+export type SoulworkEvents = typeof __propDef.events;
+export type SoulworkSlots = typeof __propDef.slots;
+export default class Soulwork extends SvelteComponentTyped<SoulworkProps, SoulworkEvents, SoulworkSlots> {
 }
-declare const Soulwork: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type Soulwork = InstanceType<typeof Soulwork>;
-export default Soulwork;
+//# sourceMappingURL=Soulwork.svelte.d.ts.map

package/dist/ui/modules/projects/Soulwork.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Soulwork.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/modules/projects/Soulwork.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAGA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AAM7E,QAAA,MAAM,SAAS,GAAyB,OAAO,qBAAqB,KAAqB,UAAU,CAAC,OAAO,QAAQ,EAAE,OAAO,CAiChG,CAAC;AAE7B,QAAA,MAAM,GAAG,aAAa,CAAC;AACvB,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC;AAO3B,QAAA,MAAM,SAAS;;;;;;CAA0C,CAAC;AAC1D,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}

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

@@ -1,22 +1,18 @@
+import { SvelteComponentTyped } from "svelte";
 import type { ProjectComponentProps } from "../../templates/SeaweedLayout/ProjectComponentProps";
 declare const component: (props: ProjectComponentProps) => ReturnType<import("svelte").Snippet>;
 declare const key = "This Webpage";
 export { component, key };
-interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
-    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
-        $$bindings?: Bindings;
-    } & Exports;
-    (internal: unknown, props: {
-        $$events?: Events;
-        $$slots?: Slots;
-    }): Exports & {
-        $set?: any;
-        $on?: any;
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
     };
-    z_$$bindings?: Bindings;
+    slots: {};
+};
+export type ThisWebpageProps = typeof __propDef.props;
+export type ThisWebpageEvents = typeof __propDef.events;
+export type ThisWebpageSlots = typeof __propDef.slots;
+export default class ThisWebpage extends SvelteComponentTyped<ThisWebpageProps, ThisWebpageEvents, ThisWebpageSlots> {
 }
-declare const ThisWebpage: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
-    [evt: string]: CustomEvent<any>;
-}, {}, {}, string>;
-type ThisWebpage = InstanceType<typeof ThisWebpage>;
-export default ThisWebpage;
+//# sourceMappingURL=ThisWebpage.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ThisWebpage.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/modules/projects/ThisWebpage.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAGA,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,uDAAuD,CAAC;AAMnG,QAAA,MAAM,SAAS,GAAyB,OAAO,qBAAqB,KAAqB,UAAU,CAAC,OAAO,QAAQ,EAAE,OAAO,CA4ChG,CAAC;AAE7B,QAAA,MAAM,GAAG,iBAAiB,CAAC;AAC3B,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC;AAO3B,QAAA,MAAM,SAAS;;;;;;CAA0C,CAAC;AAC1D,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACtD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACxD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEtD,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,oBAAoB,CAAC,gBAAgB,EAAE,iBAAiB,EAAE,gBAAgB,CAAC;CACnH"}

package/dist/ui/modules/projects/index.d.ts

@@ -2,3 +2,4 @@ export * as Hepcat from "./Hepcat.svelte";
 export * as Pengi from "./Pengi.svelte";
 export * as Soulwork from "./Soulwork.svelte";
 export * as ThisWebpage from "./ThisWebpage.svelte";
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/modules/projects/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/modules/projects/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,MAAM,MAAM,iBAAiB,CAAC;AAC1C,OAAO,KAAM,KAAK,MAAM,gBAAgB,CAAC;AACzC,OAAO,KAAK,QAAQ,MAAM,mBAAmB,CAAC;AAC9C,OAAO,KAAK,WAAW,MAAM,sBAAsB,CAAC"}

package/dist/ui/modules/universal-overlay/DialogPanel.svelte

@@ -0,0 +1,37 @@
+<!-- @component
+Layout and logic for DialogPanel. Some of the logics for the portraits are in UniversalOverlay.svelte
+-->
+
+<script lang="ts">
+	import { dialogManager } from "../../../components/dialog_manager/DialogManager";
+	import { onMount } from "svelte";
+
+	let currentMessage = $state("");
+
+	const onDialogClick = () => {
+		dialogManager?.skipAnimation();
+	};
+
+	onMount(() => {
+		dialogManager.currentMessage.subscribe((value) => {
+			currentMessage = value;
+		});
+
+		dialogManager.update(0);
+	});
+</script>
+
+<div
+	tabindex="0"
+	role="button"
+	onclick={onDialogClick}
+	onkeyup={(e) => {
+					if (e.key === 'j') {
+						onDialogClick();
+					}
+				}}
+>
+	<!-- Made for 140 characters, like the original tweets -->
+	<!-- eslint-disable-next-line svelte/no-at-html-tags -->
+	{@html currentMessage}
+</div>

package/dist/ui/modules/universal-overlay/DialogPanel.svelte.d.ts

@@ -0,0 +1,16 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type DialogPanelProps = typeof __propDef.props;
+export type DialogPanelEvents = typeof __propDef.events;
+export type DialogPanelSlots = typeof __propDef.slots;
+/** Layout and logic for DialogPanel. Some of the logics for the portraits are in UniversalOverlay.svelte */
+export default class DialogPanel extends SvelteComponentTyped<DialogPanelProps, DialogPanelEvents, DialogPanelSlots> {
+}
+export {};
+//# sourceMappingURL=DialogPanel.svelte.d.ts.map

package/dist/ui/modules/universal-overlay/DialogPanel.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogPanel.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/modules/universal-overlay/DialogPanel.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAqCD,QAAA,MAAM,SAAS;;;;;;CAA0C,CAAC;AAC1D,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACtD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACxD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEtD,4GAA4G;AAC5G,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,oBAAoB,CAAC,gBAAgB,EAAE,iBAAiB,EAAE,gBAAgB,CAAC;CACnH"}

package/dist/ui/modules/universal-overlay/SettingsPanel.svelte

@@ -0,0 +1,152 @@
+<!-- @component
+Layout and logic for Settings
+
+TODO: delete GeneralSettingsModal.svelte
+-->
+
+<script lang="ts">
+	import ConstrastIcon from "../../../assets/icons/icon-contrast.svg";
+	import DarkIcon from "../../../assets/icons/icon-dark-mode.svg";
+	import LightIcon from "../../../assets/icons/icon-light-mode.svg";
+
+	import LanguagePicker from "../modals/general-settings/LanguagePicker.svelte";
+	import { getEnablePortraitContext } from "../../../util/context/pineappleBaseContextDefinitions";
+	import type { LocalStore } from "../../../util/localStore.svelte";
+	import { setMode, userPrefersMode } from "mode-watcher";
+
+	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]);
+	let enablePortraitContext: LocalStore<boolean> = getEnablePortraitContext();
+
+	// 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>
+
+<div class="wrapper">
+	<fieldset id="dark-mode-fieldset" class="border-primary-500 border-2 flex-col p-2 md:flex-row">
+		<legend class="apply-current-surface pl-4 pr-4">Mode</legend>
+		<div id="field-flex">
+			{#each modes as mode (mode)}
+				<button
+					type="button"
+					title={mode.label}
+					class={`btn pt-3 pb-3 hover:brightness-125
+				${mode.key === selectedItem.key ? 'selected 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' : ''}
+					`}
+					>
+					<div>
+						{mode.label}
+					</div>
+				</button>
+			{/each}
+		</div>
+	</fieldset>
+
+	<LanguagePicker />
+
+	<div class="actions">
+		<!-- todo: decide if we want an explicit save button or set the settings on the go -->
+		<!--		<button class="btn preset-filled-primary-400-600 text-surface-100" onclick={() => props.close()}-->
+		<!--		        title="Close modal">-->
+		<!--			Close-->
+		<!--		</button>-->
+	</div>
+</div>
+
+<style>
+    :global {
+        html {
+            --primary-btn-color-selected: var(--color-secondary-400);
+        }
+
+        html.dark {
+            --primary-btn-color-selected: var(--color-secondary-800);
+        }
+    }
+
+    .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;
+        overflow-y: auto;
+        font-size: var(--text-base);
+    }
+
+    #dark-mode-fieldset {
+        legend {
+            background: transparent;
+        }
+
+        #field-flex {
+            display: flex;
+            gap: 1rem;
+            padding: 0.25lh 1rem;
+        }
+
+        button {
+            img {
+                filter: invert(80%);
+            }
+        }
+
+        button.selected {
+            background-color: var(--primary-btn-color-selected);
+
+            img {
+                filter: unset;
+            }
+        }
+    }
+</style>

package/dist/ui/modules/universal-overlay/SettingsPanel.svelte.d.ts

@@ -0,0 +1,20 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type SettingsPanelProps = typeof __propDef.props;
+export type SettingsPanelEvents = typeof __propDef.events;
+export type SettingsPanelSlots = typeof __propDef.slots;
+/**
+ * Layout and logic for Settings
+ *
+ * TODO: delete GeneralSettingsModal.svelte
+ */
+export default class SettingsPanel extends SvelteComponentTyped<SettingsPanelProps, SettingsPanelEvents, SettingsPanelSlots> {
+}
+export {};
+//# sourceMappingURL=SettingsPanel.svelte.d.ts.map

package/dist/ui/modules/universal-overlay/SettingsPanel.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"SettingsPanel.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/modules/universal-overlay/SettingsPanel.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAmGD,QAAA,MAAM,SAAS;;;;;;CAA0C,CAAC;AAC1D,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACxD,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC1D,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAExD;;;;GAIG;AACH,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,oBAAoB,CAAC,kBAAkB,EAAE,mBAAmB,EAAE,kBAAkB,CAAC;CAC3H"}