@turnipxenon/pineapple 4.5.1 → 5.0.0-alpha.10

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

@@ -20,3 +20,4 @@ declare const ThisWebpage: $$__sveltets_2_IsomorphicComponent<Record<string, nev
 }, {}, {}, 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":"AAKC,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;AAS3B,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,WAAW;;kBAA+E,CAAC;AAC/E,KAAK,WAAW,GAAG,YAAY,CAAC,OAAO,WAAW,CAAC,CAAC;AACtD,eAAe,WAAW,CAAC"}

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,39 @@
+<!-- TODO: Documentation: consider documentation showcase -->
+
+<!-- @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,5 @@
+/** Layout and logic for DialogPanel. Some of the logics for the portraits are in UniversalOverlay.svelte */
+declare const DialogPanel: import("svelte").Component<Record<string, never>, {}, "">;
+type DialogPanel = ReturnType<typeof DialogPanel>;
+export default DialogPanel;
+//# 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":"AAyCA,4GAA4G;AAC5G,QAAA,MAAM,WAAW,2DAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

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

@@ -0,0 +1,177 @@
+<!-- TODO: Documentation: consider documentation showcase -->
+
+<!-- @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 PineappleSwitch from "../../elements/PineappleSwitch.svelte";
+
+	import LanguagePicker from "../modals/general-settings/LanguagePicker.svelte";
+	import {
+		getEnableDialogPreferenceContext,
+		getEnablePortraitContext
+	} from "../../../util/context/pineappleBaseContextDefinitions.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]);
+
+	// 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;
+		}
+	});
+
+	let enableDialogPreference = getEnableDialogPreferenceContext();
+	let enablePortraitContext = getEnablePortraitContext();
+
+	// 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="switch-default">
+		<PineappleSwitch
+			name="conversation-preference"
+			bind:checked={$enableDialogPreference}>
+		</PineappleSwitch>
+		<label for="conversation-preference">
+			Conversation preference: {$enableDialogPreference ? "Always on" : "Always off"}
+		</label>
+	</div>
+	<div class="switch-default">
+		<PineappleSwitch
+			name="portrait-preference"
+			bind:checked={$enablePortraitContext}>
+		</PineappleSwitch>
+		<label for="portrait-preference">
+			Show conversation portrait: {$enablePortraitContext ? "Always on" : "Always off"}
+		</label>
+	</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;
+		        flex-wrap: wrap;
+            gap: 1rem;
+            padding: 0.25lh 1rem;
+        }
+
+        button {
+            img {
+                filter: invert(80%);
+            }
+        }
+
+        button.selected {
+            background-color: var(--primary-btn-color-selected);
+
+            img {
+                filter: unset;
+            }
+        }
+    }
+
+    .switch-default {
+		    display: flex;
+		    justify-items: center;
+		    gap: 1em;
+    }
+</style>

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

@@ -0,0 +1,9 @@
+/**
+ * Layout and logic for Settings
+ *
+ * TODO: delete GeneralSettingsModal.svelte
+ */
+declare const SettingsPanel: import("svelte").Component<Record<string, never>, {}, "">;
+type SettingsPanel = ReturnType<typeof SettingsPanel>;
+export default SettingsPanel;
+//# 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":"AAmHA;;;;GAIG;AACH,QAAA,MAAM,aAAa,2DAAwC,CAAC;AAC5D,KAAK,aAAa,GAAG,UAAU,CAAC,OAAO,aAAa,CAAC,CAAC;AACtD,eAAe,aAAa,CAAC"}

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

@@ -0,0 +1,265 @@
+<!-- TODO: Documentation: consider documentation showcase -->
+
+<!-- @component
+Overlay that contains the dialog, settings, and site map
+
+See panels:
+- DialogPanel.svelte
+ TODO: settings
+ TODO: site map
+ -->
+
+<script lang="ts">
+	import AresHappy from "../../../assets/characters/ares/ares_happy.webp";
+	import CloseIcon from "../../../assets/icons/close.svg";
+	import SettingsLogo from "../../../assets/icons/icon-settings.svg";
+	import { dialogManager } from "../../../components/dialog_manager/DialogManager";
+	import { DialogState } from "../../../types/pineapple_fiber/DialogState";
+	import { ButtonVariant, ImageIcon } from "../../elements/index";
+	import GeneralSettingsModal from "../modals/general-settings/GeneralSettingsModal.svelte";
+	import DialogPanel from "./DialogPanel.svelte";
+	import { getEnablePortraitContext } from "../../../util/context/pineappleBaseContextDefinitions.svelte";
+	import { onMount } from "svelte";
+	import { modals } from "svelte-modals";
+	import PinyaButton from "../../elements/PinyaButton/PinyaButton.svelte";
+	import PinyaCard from "../../elements/PinyaCard/PinyaCard.svelte";
+
+	let currentPortrait = $state(AresHappy);
+
+	let hidePercent = $state(100);
+	let hidePercentLinear = $state(100);
+	let isHidden = $state(true);
+
+	let enablePortrait = getEnablePortraitContext();
+
+	onMount(() => {
+		dialogManager.currentPortrait.subscribe((value) => {
+			if (value) {
+				currentPortrait = value;
+			}
+		});
+
+		dialogManager.hidePercent.subscribe((value) => {
+			hidePercent = value * 0.4;
+			isHidden = false;
+		});
+
+		dialogManager.hidePercentLinear.subscribe((value) => {
+			hidePercentLinear = value * 0.4;
+		});
+
+		dialogManager.currentReadableState.subscribe((value) => {
+			isHidden = value === DialogState.Invisible;
+		});
+
+		dialogManager.update(0);
+	});
+</script>
+
+<div class="dialog-elements"
+     hidden={isHidden}
+     style="--hidePercentWidth: -{hidePercent}vw;
+            --hidePercentHeight: {hidePercentLinear}vh;">
+	<div class="dialog-portrait-container" class:is-portrait-enabled={$enablePortrait}>
+		<img src={currentPortrait} alt="Ares" class="dialog-portrait" />
+	</div>
+	<div id="main-dialog-box-container">
+		<PinyaCard id="dialog-name">
+			<div class="fake-h1">Turnip</div>
+		</PinyaCard>
+		<!-- todo: implement this properly later -->
+		<!--<div id="dialog-scroll-indicator"></div>-->
+		<div id="panel-container">
+			<DialogPanel></DialogPanel>
+			<div id="settings-menu-bar">
+				<!-- close -->
+				<PinyaButton
+					buttonVariant={ButtonVariant.Image}
+					title="Close conversation"
+					onclick={()=>{dialogManager.toggleDialogOverlay();}}
+				>
+					<ImageIcon src={CloseIcon} aria-hidden="true" alt=""></ImageIcon>
+				</PinyaButton>
+				<PinyaButton
+					title="Settings"
+					buttonVariant={ButtonVariant.Image}
+					onclick={()=>{modals.open(GeneralSettingsModal);}}
+				>
+					<ImageIcon src={SettingsLogo} aria-hidden="true" alt=""></ImageIcon>
+				</PinyaButton>
+			</div>
+		</div>
+	</div>
+</div>
+
+<!-- todo: consider keeping or not... -->
+<!--{#if appState.allowDialog && isMounted && !enableUniversalOverlay.value}-->
+<!--	<div id="fab-container" transition:slide>-->
+<!--		<PinyaButton-->
+<!--			classes="fab"-->
+<!--			onclick={()=>{dialogManager.toggleDialogOverlay();}}-->
+<!--		>-->
+<!--			{#if enableUniversalOverlay.value}-->
+<!--				<img class="turnip-icon" src={CloseIcon} alt="interactive floating action button represented as a turnip">-->
+<!--			{:else }-->
+<!--				<img class="turnip-icon" src={FABIcon} alt="interactive floating action button represented as a turnip">-->
+<!--			{/if}-->
+<!--		</PinyaButton>-->
+<!--	</div>-->
+<!--{/if}-->
+
+<style>.apply-current-surface {
+  background-color: var(--current-surface-color);
+}
+
+.dialog-elements {
+  --current-surface-color: var(--bg-dialog);
+  background-color: var(--current-surface-color);
+}
+
+#main-dialog-box-container {
+  background-color: var(--bg-dialog);
+  position: fixed;
+  bottom: 0;
+  width: var(--dialog-box-width); /*75em + 4em padding*/
+  max-width: 100%;
+  height: var(--dialog-box-height);
+  /* radius-base is from dialog-text and 0.8lh is from dialog-box padding */
+  border-radius: 0 2rem 0 0;
+}
+#main-dialog-box-container :global(#panel-container > *:first-child) {
+  flex: 1;
+  overflow-y: auto;
+  padding: 1.3lh 1em;
+}
+#main-dialog-box-container #panel-container {
+  height: 100%;
+  font-size: 1.5em;
+  display: flex;
+  flex-direction: row;
+}
+#main-dialog-box-container #panel-container #settings-menu-bar {
+  display: flex;
+  flex-direction: column;
+  justify-content: flex-start;
+  padding-bottom: 0.2rem;
+  padding-top: 0.5rem;
+  gap: 0.5rem;
+  margin: 0 0.4rem;
+  overflow-y: auto;
+}
+
+:global #settings-menu-bar > * {
+  padding: 0.4rem;
+}
+:global #settings-menu-bar > * > * {
+  width: 90%;
+}
+:global #settings-menu-bar .pinya-button {
+  border-radius: 50%;
+}
+
+.dialog-elements {
+  position: fixed;
+  z-index: 10;
+}
+
+.dialog-elements:dir(ltr) {
+  left: 0;
+}
+
+.dialog-elements:dir(rtl) {
+  right: 0;
+}
+
+.dialog-elements > div {
+  transform: translateY(var(--hidePercentHeight));
+}
+
+:global #dialog-name {
+  padding: 0 2rem;
+  width: unset;
+  position: fixed;
+}
+:global #dialog-name:dir(ltr) {
+  /* for centering vertically */
+  transform: translateX(clamp(0em, 5vw - 0.5em, 1em)) translateY(-50%);
+}
+:global #dialog-name:dir(rtl) {
+  /* for centering vertically */
+  transform: translateX(calc(clamp(0em, 5vw - 0.5em, 1em) * -1)) translateY(-50%);
+}
+
+.dialog-portrait-container {
+  position: fixed;
+  bottom: 0;
+  height: clamp(30rem, 75vw, 40rem);
+  width: auto;
+}
+.dialog-portrait-container:not(.is-portrait-enabled) {
+  display: none;
+}
+
+.dialog-portrait-container:dir(ltr) {
+  transform: translateX(var(--hidePercentWidth));
+  left: clamp(-4rem, 5vw - 5em, 0rem);
+}
+
+.dialog-portrait-container:dir(rtl) {
+  transform: translateX(calc(var(--hidePercentWidth) * -1));
+  right: clamp(-4rem, 5vw - 5em, 0rem);
+}
+
+.dialog-portrait {
+  height: 100%;
+}
+
+.dialog-portrait:dir(rtl) {
+  transform: scaleX(-1);
+}
+
+:global(html) {
+  --bg-dialog: rgba(255, 247, 225, 0.9);
+}
+
+:global(html.dark) {
+  --bg-dialog: rgba(76, 71, 59, 0.9);
+}
+
+:global .fab {
+  position: relative;
+  transform: scale3d(1, 1, 1.5);
+  background-color: var(--color-tertiary-500);
+  padding: 0.3rem;
+  width: 4rem;
+  height: 4rem;
+  border-radius: 50%;
+  z-index: 100;
+  box-shadow: 3px 3px 3px var(--shadow-color);
+  margin-bottom: var(--fab-margin);
+}
+:global .fab:dir(ltr) {
+  margin-right: var(--fab-margin);
+}
+:global .fab:dir(rtl) {
+  margin-left: var(--fab-margin);
+}
+:global .fab > img {
+  width: 100%;
+  filter: brightness(0) invert(1);
+}
+
+#fab-container {
+  position: fixed;
+  bottom: 0;
+}
+#fab-container:dir(ltr) {
+  right: 0;
+}
+#fab-container:dir(rtl) {
+  left: 0;
+}
+
+.turnip-icon {
+  width: 3rem;
+}</style>

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

@@ -0,0 +1,12 @@
+/**
+ * Overlay that contains the dialog, settings, and site map
+ *
+ * See panels:
+ * - DialogPanel.svelte
+ * TODO: settings
+ * TODO: site map
+ */
+declare const UniversalOverlay: import("svelte").Component<Record<string, never>, {}, "">;
+type UniversalOverlay = ReturnType<typeof UniversalOverlay>;
+export default UniversalOverlay;
+//# sourceMappingURL=UniversalOverlay.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"UniversalOverlay.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/modules/universal-overlay/UniversalOverlay.svelte.ts"],"names":[],"mappings":"AAkHA;;;;;;;GAOG;AACH,QAAA,MAAM,gBAAgB,2DAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}