@turnipxenon/pineapple 4.5.0 → 5.0.0-alpha.1

package/dist/util/localStore.svelte.js

@@ -0,0 +1,76 @@
+/** from https://www.reddit.com/r/sveltejs/comments/1d43d8p/svelte_5_runes_with_localstorage_thanks_to_joy_of/ */
+import { browser } from "$app/environment";
+// const localConsole = console;
+const localConsole = undefined;
+export class LocalStore {
+    value = $state();
+    key = "";
+    valueType;
+    defaultValue;
+    constructor(key, defaultValue) {
+        this.key = key;
+        this.defaultValue = defaultValue;
+        this.value = defaultValue;
+        this.valueType = typeof defaultValue;
+        let localStorageState = $state('initial');
+        if (browser) {
+            const item = localStorage.getItem(`pinya-local-${key}`);
+            if (item) {
+                this.value = this.deserialize(item);
+                localConsole?.log(`initializing initial ${this.key}: ${this.value}`);
+            }
+            localStorageState = 'accessed';
+        }
+        $effect(() => {
+            localConsole?.log(`updating ${this.key}: ${this.value}`);
+            switch (localStorageState) {
+                case "initial":
+                    // completely ignore all next changes
+                    break;
+                case "accessed":
+                    // for the initial change, we ignore it but allow the next changes to be writable
+                    localStorageState = 'writable';
+                    localConsole?.log(`setting writable for ${this.key}`);
+                    break;
+                case "writable":
+                    localStorage.setItem(`pinya-local-${this.key}`, this.serialize(this.value));
+                    localConsole?.log(`initializing after ${this.key}: ${this.value}`);
+                    break;
+            }
+        });
+    }
+    serialize(value) {
+        if (this.valueType !== "object") {
+            return value;
+        }
+        return JSON.stringify(value);
+    }
+    deserialize(item) {
+        localConsole?.log(`deserializing item ${item}`);
+        if (this.valueType === "string") {
+            localConsole?.log(`deserializing string ${item}`);
+            return item;
+        }
+        try {
+            return JSON.parse(item);
+        }
+        catch (error) {
+            console.error(error);
+            return this.defaultValue;
+        }
+    }
+}
+const localStoreDefault = {
+    "enable-portrait": true,
+    "enable-dialog-overlay": true, // todo: turn to false once we implement an onboarding/welcome screen
+    "overlay-type": 'dialog',
+};
+export const createLocalStore = (key) => {
+    return new LocalStore(key, localStoreDefault[key]);
+};
+// export const createAllLocalStore = () => {
+// 	let enablePortrait = $state(createLocalStore('enablePortrait'));
+// 	return {
+// 		enablePortrait
+// 	}
+// }

package/dist/util/util.d.ts

@@ -9,3 +9,4 @@ export interface RawGlob {
     default: string;
 }
 export declare const getQueryTerms: (modules: Record<string, unknown>) => string[];
+//# sourceMappingURL=util.d.ts.map

package/dist/util/util.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"util.d.ts","sourceRoot":"","sources":["../../src/lib/util/util.ts"],"names":[],"mappings":"AAAA,eAAO,MAAM,kBAAkB,QAAO,MAIrC,CAAC;AAIF,eAAO,MAAM,mBAAmB,GAAI,GAAG,MAAM,KAAG,CAAC,MAAM,MAAM,CAO5D,CAAC;AAEF,eAAO,MAAM,kBAAkB,GAAI,MAAM,MAAM,KAAG,CAAC,MAAM,IAAI,CAI5D,CAAC;AAEF,MAAM,WAAW,uBAAuB;IACvC,IAAI,EAAE,MAAM,CAAC;CACb;AAED,eAAO,MAAM,iCAAiC,GAAI,MAAM,uBAAuB,KAAG,CAAC,MAAM,IAAI,CAM5F,CAAC;AAEF,MAAM,WAAW,OAAO;IACvB,OAAO,EAAE,MAAM,CAAC;CAChB;AAED,eAAO,MAAM,aAAa,GAAI,SAAS,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,KAAG,MAAM,EAQtE,CAAA"}

package/package.json

@@ -1,7 +1,7 @@
 {
   "name": "@turnipxenon/pineapple",
   "description": "personal package for base styling for other personal projects",
-  "version": "4.5.0",
+  "version": "5.0.0-alpha.1",
   "scripts": {
     "dev": "vite dev",
     "build": "vite build",
@@ -16,59 +16,57 @@
     "preview": "pnpm run build && wrangler dev",
     "prepublishOnly": "pnpm package",
     "prepare": "husky",
-    "deploy": "pnpm run build && wrangler deploy",
+    "deploy": "wrangler deploy",
     "cf-typegen": "wrangler types ./src/worker-configuration.d.ts"
   },
   "devDependencies": {
-    "@commitlint/cli": "^19.8.0",
-    "@commitlint/config-conventional": "^19.8.0",
-    "@eslint/compat": "^1.2.5",
-    "@eslint/js": "^9.18.0",
+    "@commitlint/cli": "^19.8.1",
+    "@commitlint/config-conventional": "^19.8.1",
+    "@eslint/compat": "^1.4.1",
+    "@eslint/js": "^9.39.0",
     "@sveltejs/adapter-cloudflare": "^7.2.4",
-    "@sveltejs/package": "^2.3.7",
-    "@sveltejs/vite-plugin-svelte": "^4.0.0",
-    "eslint": "^9.18.0",
-    "eslint-config-prettier": "^10.0.1",
-    "eslint-plugin-svelte": "^3.0.0",
-    "globals": "^16.0.0",
+    "@sveltejs/package": "^2.5.4",
+    "@sveltejs/vite-plugin-svelte": "^6.2.1",
+    "@types/mdast": "^4.0.4",
+    "@types/node": "^20.19.24",
+    "eslint": "^9.39.0",
+    "eslint-config-prettier": "^10.1.8",
+    "eslint-plugin-svelte": "^3.13.0",
+    "globals": "^16.5.0",
     "husky": "^9.1.7",
     "madge": "^8.0.0",
     "mdast": "^3.0.0",
-    "mdast-util-from-markdown": "^1.0.2",
-    "prettier": "^3.4.2",
-    "prettier-plugin-svelte": "^3.3.3",
-    "prettier-plugin-tailwindcss": "^0.6.11",
-    "prisma": "^5.12.1",
-    "svelte-check": "^4.0.0",
-    "svelte2tsx": "^0.6.20",
-    "tslib": "^2.4.1",
-    "typescript": "^5.5.0",
-    "typescript-eslint": "^8.20.0",
-    "vite": "^5.4.4",
-    "wrangler": "^4.42.2"
+    "mdast-util-from-markdown": "^1.3.1",
+    "prettier": "^3.6.2",
+    "prettier-plugin-svelte": "^3.4.0",
+    "prisma": "^5.22.0",
+    "sass": "^1.97.3",
+    "svelte": "^5.43.2",
+    "svelte-check": "^4.3.3",
+    "svelte2tsx": "^0.6.27",
+    "tslib": "^2.8.1",
+    "typescript": "^5.9.3",
+    "typescript-eslint": "^8.46.2",
+    "vite": "^7.1.12",
+    "wrangler": "4.59.1"
   },
   "dependencies": {
-    "@inlang/paraglide-js": "2.0.7",
-    "@prisma/client": "^5.12.1",
-    "@skeletonlabs/skeleton": "^3.1.0",
-    "@skeletonlabs/skeleton-svelte": "1.0.0",
-    "@sveltejs/kit": "^2.5.27",
-    "@sveltejs/vite-plugin-svelte": "^4.0.0",
-    "@tailwindcss/vite": "^4.0.14",
+    "@inlang/paraglide-js": "~2.4.0",
+    "@prisma/client": "^5.22.0",
+    "@sveltejs/kit": "2.49.5",
+    "@sveltejs/vite-plugin-svelte": "^6.2.1",
     "@types/htmlparser2": "^3.10.7",
-    "@types/node": "^20.11.25",
-    "highlight.js": "^11.8.0",
+    "highlight.js": "^11.11.1",
     "htmlparser2": "^9.1.0",
+    "melt": "^0.44.0",
     "mode-watcher": "^0.5.1",
-    "node-html-parser": "^6.1.5",
-    "publint": "^0.2.7",
-    "shiki": "^3.2.1",
+    "node-html-parser": "^6.1.13",
+    "publint": "^0.2.12",
+    "shiki": "^3.14.0",
     "shiki-transformer-copy-button": "0.0.3",
-    "string-width": "^7.1.0",
-    "svelte": "^5.0.0",
+    "string-width": "^7.2.0",
     "svelte-modals": "^2.0.1",
-    "tailwindcss": "^4.0.14",
-    "ts-node": "^10.9.1"
+    "ts-node": "^10.9.2"
   },
   "exports": {
     ".": {
@@ -100,7 +98,10 @@
   "engines": {
     "node": ">=22"
   },
-  "repository": "https://github.com/TurnipXenon/pineapple",
+  "repository": {
+    "type": "git",
+    "url": "git+https://github.com/TurnipXenon/pineapple.git"
+  },
   "author": "turnipxenon <turnipxenon@gmail.com>",
   "license": "MIT",
   "svelte": "./dist/index.js",

package/src/lib/styles/app.css

@@ -1,20 +1,19 @@
-@import 'tailwindcss';
-@import "@skeletonlabs/skeleton";
-@import "@skeletonlabs/skeleton/optional/presets";
-@import "@skeletonlabs/skeleton/themes/crimson";
+@import "./tailwind.css";
+@import "./color-tokens.css";
 @import "./turnip-theme.css";
 
-@source "../../../node_modules/@skeletonlabs/skeleton-svelte/dist";
-
-@custom-variant dark (&:where(.dark, .dark *));
-
-@custom-variant turnip (&:where([data-theme=turnip], [data-theme=turnip] *));
-
 html {
     --dialog-start-pad: clamp(0em, 5vw, 2em);
-    --dialog-box-width: min(calc(54em), calc(100vw - var(--dialog-start-pad) - 2px));
+    --dialog-box-width: 54em;
     --dialog-box-height: clamp(15em, 50vw, 18em);
     --fab-margin: 1rem;
+
+
+    /* spacing calcs */
+    --spacing-1: calc(var(--spacing) * 1);
+    --spacing-2: calc(var(--spacing) * 2);
+    --spacing-3: calc(var(--spacing) * 3);
+    --spacing-4: calc(var(--spacing) * 4);
 }
 
 .footer-space {
@@ -22,7 +21,7 @@ html {
     height: calc(var(--dialog-box-height) + 4em);
 }
 
-.dialog-box a, .dialog-box b, .dialog-box i {
+.main-dialog-box-container a, .main-dialog-box-container b, .main-dialog-box-container i {
     font-size: inherit;
 }
 
@@ -51,11 +50,18 @@ a.external-link {
 
 @layer base {
     .game-link-section {
-        @apply mt-6 flex gap-2 justify-center;
+        margin-top: calc(var(--spacing) * 6);
+        display: flex;
+        gap: calc(var(--spacing) * 2);
+        justify-content: center;
     }
 
     .game-video-cover {
-        @apply rounded-t-lg max-h-64 object-cover w-full;
+        border-top-left-radius: var(--radius-lg);
+        border-top-right-radius: var(--radius-lg);
+        max-height: calc(var(--spacing) * 64);
+        object-fit: cover;
+        width: 100%;
     }
 
     .text-chip-container {
@@ -122,19 +128,20 @@ pre button.copy {
 
     & .ready {
         background-image: url("$pkg/assets/icons/icon-copy-light-contrast.svg");
-
-        @variant dark {
-            background-image: url("$pkg/assets/icons/icon-copy-dark-contrast.svg");
-        }
+        /*todo*/
+        /*@variant dark {*/
+        /*    background-image: url("$pkg/assets/icons/icon-copy-dark-contrast.svg");*/
+        /*}*/
     }
 
     & .success {
         display: none;
         background-image: url("$pkg/assets/icons/icon-check-light-contrast.svg");
 
-        @variant dark {
-            background-image: url("$pkg/assets/icons/icon-check-dark-contrast.svg");
-        }
+        /*todo: migration*/
+        /*@variant dark {*/
+        /*    background-image: url("$pkg/assets/icons/icon-check-dark-contrast.svg");*/
+        /*}*/
     }
 
     &.copied {
@@ -149,3 +156,36 @@ pre button.copy {
 }
 
 /* endregion shiki copy button */
+
+/* region general styles */
+.btn {
+    background-color: var(--color-primary-400-600);
+    color: var(--color-secondary-950-0);
+
+    padding-block: var(--spacing-1);
+
+    &.image-button {
+        padding: var(--spacing-2) var(--spacing-3);
+    }
+
+    &:hover {
+        filter: brightness(110%);
+    }
+
+    &.secondary {
+        background-color: var(--color-secondary-400-600);
+        color: var(--color-secondary-950-0);
+    }
+
+    &.warning {
+        color: var(--color-secondary-0-950);
+        background-color: var(--color-warning-700-400);
+    }
+
+    &.surface {
+        background-color: var(--color-surface-700-600);
+        color: var(--color-surface-50-950);
+    }
+}
+
+/* endregion general styles */

package/dist/ui/modules/dialog_overlay/DialogOverlay.svelte

@@ -1,239 +0,0 @@
-<script lang="ts">
-	import { slide } from "svelte/transition";
-	import { onMount } from "svelte";
-
-	import AresHappy from "../../../assets/characters/ares/ares_happy.webp";
-	import { DialogState } from "../../../types/pineapple_fiber/DialogState";
-	import { dialogManager } from "../../../components/dialog_manager/DialogManager";
-	import PinyaCard from "../../elements/PinyaCard/PinyaCard.svelte";
-	import { appState } from "../../templates/PinyaPageLayout/runes.svelte";
-	import CloseIcon from "../../../assets/icons/close.svg";
-	import FABIcon from "../../../assets/bg_tiled/bg_tiled_turnip.png";
-	import { enableDialogueOverlay } from "../../../components/dialog_manager/DialogManagerStore";
-	import PinyaButton from "../../elements/PinyaButton/PinyaButton.svelte";
-
-	let currentMessage = $state("");
-	let currentPortrait = $state(AresHappy);
-	let isMounted = $state(false);
-
-	let hidePercent = $state(100);
-	let isHidden = $state(true);
-	onMount(() => {
-
-		dialogManager.currentMessage.subscribe((value) => {
-			currentMessage = value;
-		});
-
-		dialogManager.currentPortrait.subscribe((value) => {
-			console.log("sub value", value);
-			if (value) {
-				currentPortrait = value;
-			}
-		});
-
-		dialogManager.hidePercent.subscribe((value) => {
-			hidePercent = value * 0.4;
-			isHidden = false;
-		});
-
-		dialogManager.currentReadableState.subscribe((value) => {
-			isHidden = value === DialogState.Invisible;
-		});
-
-		console.log("CAlling update");
-		dialogManager.update(0);
-		isMounted = true;
-
-	});
-
-	const onDialogClick = () => {
-		dialogManager?.skipAnimation();
-	};
-
-	let enableDialogueOverlayValue = $state(true);
-	enableDialogueOverlay.subscribe((value) => {
-		enableDialogueOverlayValue = value;
-	});
-
-	enableDialogueOverlay.set(appState.enableDialogOnByDefault ?? false);
-</script>
-
-<div class="dialog-elements"
-     hidden={isHidden}
-     style="--hidePercentWidth: -{hidePercent}vw;
-            --hidePercentHeight: {hidePercent}vh;">
-	<div class="dialog-portrait-container">
-		<img src={currentPortrait} alt="Ares" class="dialog-portrait" />
-	</div>
-	<div
-		tabindex="0"
-		role="button"
-		class="dialog-box"
-		onclick={onDialogClick}
-		onkeyup={(e) => {
-			if (e.key === 'j') {
-				onDialogClick()
-;			}
-		}}
-	>
-		<PinyaCard
-			widthClass=""
-			paddingClass=""
-			className="dialog-name"
-		>
-			<div class="fake-h1">Turnip</div>
-		</PinyaCard>
-		<PinyaCard
-			widthClass="w-full"
-			className="dialog-text"
-			colorClass=""
-			flexClass=""
-		>
-			<!-- Made for 140 characters, like the original tweets -->
-			{@html currentMessage}
-		</PinyaCard>
-	</div>
-</div>
-
-
-{#if appState.allowDialog && isMounted}
-	<div class="fab-container" transition:slide>
-		<PinyaButton
-			classes="fab"
-			onclick={()=>{dialogManager.toggleDialogOverlay();}}
-		>
-			{#if (enableDialogueOverlayValue)}
-				<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>
-    :global(.dialog-text) {
-        height: 100%;
-        padding: 0.8lh 2rem 0.5lh;
-    }
-
-    :global(.dialog-text) {
-        font-size: clamp(1rem, 3vw, 1.75rem);
-        line-height: calc(clamp(1rem, 3vw, 1.75rem) * 1.5);
-    }
-
-    .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-left: 2rem;
-        padding-right: 2rem;
-        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:dir(ltr) {
-        transform: translateX(var(--hidePercentWidth));
-        left: clamp(-4rem, calc(5vw - 5em), 0rem);
-    }
-
-    .dialog-portrait-container:dir(rtl) {
-        transform: translateX(calc(var(--hidePercentWidth) * -1));
-        right: clamp(-4rem, calc(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);
-    }
-
-    .dialog-box {
-        background-color: var(--bg-dialog);
-        position: fixed;
-        bottom: 0;
-        width: var(--dialog-box-width); /*75em + 4em padding*/
-        height: var(--dialog-box-height);
-        max-width: calc(100vw - ((var(--fab-margin) * 3) + (clamp(2rem, 5vw, 4rem))));
-        border-radius: 1rem;
-    }
-
-    :global(.fab) {
-		    position: relative;
-        transform: scale3d(1, 1, 1.5);
-        background-color: var(--color-tertiary-500);
-        padding: 0.3rem;
-        width: clamp(2rem, 5vw, 4rem);
-        border-radius: 50%;
-        z-index: 100;
-        box-shadow: 3px 3px 3px var(--shadow-color);
-        margin-bottom: var(--fab-margin);
-    }
-
-    .fab-container {
-        position: fixed;
-        bottom: 0;
-    }
-
-    .fab-container:dir(ltr) {
-        right: 0;
-    }
-
-    .fab-container:dir(rtl) {
-        left: 0;
-    }
-
-    :global(.fab > img) {
-        width: 100%;
-        filter: brightness(0) invert(1);
-    }
-
-    :global(.fab:dir(ltr)) {
-        margin-right: var(--fab-margin);
-    }
-
-    :global(.fab:dir(rtl)) {
-        margin-left: var(--fab-margin);
-    }
-
-</style>

package/dist/ui/modules/dialog_overlay/DialogOverlay.svelte.d.ts

@@ -1,3 +0,0 @@
-declare const DialogOverlay: import("svelte").Component<Record<string, never>, {}, "">;
-type DialogOverlay = ReturnType<typeof DialogOverlay>;
-export default DialogOverlay;

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

@@ -1,7 +0,0 @@
-import "../../styles/global.css";
-import "../../styles/app.css";
-declare const PinyaBase: import("svelte").Component<{
-    children: any;
-}, {}, "">;
-type PinyaBase = ReturnType<typeof PinyaBase>;
-export default PinyaBase;