@turnipxenon/pineapple 3.0.0 → 3.1.0-alpha.10

package/dist/components/layouts/SeaweedBaseLayout.svelte

@@ -90,12 +90,6 @@
 </div>
 
 <style>
-    :root {
-        --dialog-start-pad: clamp(0em, 5vw, 2em);
-        --dialog-box-width: min(calc(50em + 4em), calc(100vw - var(--dialog-start-pad) - var(--theme-border-base)));
-        --dialog-box-height: clamp(15em, 50vw, 18em);
-    }
-
     .default-page-container {
         max-width: 2100px;
         margin: 4em auto;

package/dist/components/pineapple/PineappleBaseLayout.svelte

@@ -20,7 +20,7 @@
 	import Toast from "./toast/Toast.svelte";
 	import DialogOverlay from "../dialog_overlay/DialogOverlay.svelte";
 	import { fade } from "svelte/transition";
-	import { getDialogManager } from "../dialog_manager/DialogMangerInit";
+	import { dialogManager } from "../dialog_manager/DialogManager";
 
 	interface Props {
 		showDialogByDefault?: boolean;
@@ -77,7 +77,7 @@
 
 <!--todo: turn off hidden when it's time-->
 <button class="fab" onclick={()=>{
-	getDialogManager().then(dm => dm.toggleDialogOverlay());
+	dialogManager.toggleDialogOverlay();
 }}>
 	{#if (enableDialogueOverlayValue)}
 		<img class="turnip-icon" src={CloseIcon} alt="interactive floating action button represented as a turnip">
@@ -137,25 +137,6 @@
 </div>
 
 <style>
-    :root {
-        --dialog-start-pad: clamp(0em, 5vw, 2em);
-        --dialog-box-width: min(calc(50em + 4em), calc(100vw - var(--dialog-start-pad) - var(--theme-border-base)));
-        --dialog-box-height: clamp(15em, 50vw, 18em);
-
-        /** FAB icon margin/position calculation origin:
-						Criteria:
-						- We want at mobile (360px) our margin to be at 1em (16px)
-						- We want at web (1960px) our margin to be at 2em (32px)
-
-						A useful scaling factor might vw. At 360px, 16px would be around 4.44vw (360/16).
-						At 360px: margin is at 16px or 1em.
-						At 1960px: 4.44vw is at 87px but that will be clamped to 32px or 2em.
-						The calculation implies that the natural point that the margin becomes 2em is clamped on
-						wider screens is at 727px.
-				*/
-        --fab-margin: clamp(1em, 4.44vw, 2em);
-    }
-
     /*todo*/
     /*@apply flex justify-center items-center;*/
     .default-page-container {
@@ -208,9 +189,8 @@
     }
 
     .fab {
-        /*@apply btn preset-filled-tertiary-500;*/
+		    position: fixed;
         padding: 0;
-        position: fixed;
         bottom: var(--fab-margin);
         width: 4em;
         border-radius: 50%;

package/dist/index.d.ts

@@ -1,7 +1,7 @@
 export { default as PineappleLayoutBase } from "./components/pineapple/PineappleBaseLayout.svelte";
 export * from "./components/index";
 export * from "./components/overrideable_meta/index";
-export * from "./components/navigation_component/index";
+export * from "./ui/modules/NavigationMenu/index";
 export * from "./types/api/index";
 export * from "./components/dialog_manager/DialogManagerStore";
 export * from "./components/dialog_manager/DialogManager";
@@ -11,4 +11,4 @@ export * from "./types/pineapple_fiber/DialogDetail";
 export * from "./util/util";
 export * from "./api/index";
 export type { IDialogManager } from "./components/dialog_manager/IDialogManager";
-export { getDialogManager } from "./components/dialog_manager/DialogMangerInit";
+export { dialogManager } from "./components/dialog_manager/DialogManager";

package/dist/index.js

@@ -2,7 +2,7 @@
 export { default as PineappleLayoutBase } from "./components/pineapple/PineappleBaseLayout.svelte";
 export * from "./components/index";
 export * from "./components/overrideable_meta/index";
-export * from "./components/navigation_component/index";
+export * from "./ui/modules/NavigationMenu/index";
 export * from "./types/api/index";
 export * from "./components/dialog_manager/DialogManagerStore";
 export * from "./components/dialog_manager/DialogManager";
@@ -11,4 +11,4 @@ export * from "./types/pineapple_fiber/PortraitType";
 export * from "./types/pineapple_fiber/DialogDetail";
 export * from "./util/util";
 export * from "./api/index";
-export { getDialogManager } from "./components/dialog_manager/DialogMangerInit";
+export { dialogManager } from "./components/dialog_manager/DialogManager";

package/dist/scripts/pineapple_fiber/PineappleWeaver.js

@@ -44,8 +44,7 @@ const pineappleWeaverRun = () => {
         const template = `// this file was generated by PineappleWeaver.ts
 // do not edit!
 			
-import type { DialogDetail } from "@turnipxenon/pineapple";
-import { dialogManager, PortraitType } from "@turnipxenon/pineapple";
+import { type DialogDetail, dialogManager, PortraitType } from "@turnipxenon/pineapple";
 
 class _${fileName}Yarn {
 	dialogList: DialogDetail[] = [

package/dist/styles/app.css

@@ -10,11 +10,22 @@
 
 @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-height: clamp(15em, 50vw, 18em);
+    --fab-margin: 1rem;
+}
+
 .footer-space {
     width: 100%;
     height: calc(var(--dialog-box-height) + 4em);
 }
 
+.dialog-box a, .dialog-box b, .dialog-box i {
+    font-size: inherit;
+}
+
 a.dialog-choice {
     cursor: url("$pkg/assets/icons/chat-cursor.svg"), auto;
 }
@@ -37,20 +48,6 @@ a.external-link {
     background: rgba(var(--color-secondary-500));
 }
 
-.dialog-box {
-    background-color: rgb(var(--color-surface-500) / 0.9);
-    position: fixed;
-    bottom: 0;
-    width: var(--dialog-box-width); /*75em + 4em padding*/
-    height: var(--dialog-box-height);
-    max-width: calc(100vw - ((var(--fab-margin) * 2) + 4em));
-}
-
-.dark .dialog-box {
-    background-color: rgb(var(--color-surface-900) / 0.95);
-    --tw-ring-color: rgb(var(--color-text-400));
-    /*background-color: red;*/
-}
 
 @layer base {
     .game-link-section {

package/dist/styles/turnip-theme.css

@@ -250,7 +250,7 @@ blockquote {
     filter: brightness(140%);
 }
 
-h1, h2, h3, h4, h5, h6, .fake-h2, .fake-h3, .fake-h4 {
+h1, h2, h3, h4, h5, h6, .fake-h1, .fake-h2, .fake-h3, .fake-h4 {
     text-align: center;
     margin-top: 0;
     font-weight: bolder;
@@ -265,7 +265,7 @@ h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p, .fake-h2 + p, .fake-h3 + p, .fak
     margin-top: 0.5lh;
 }
 
-h1 {
+h1, .fake-h1 {
     @apply text-4xl;
 }
 
@@ -289,7 +289,11 @@ h6 {
     text-decoration: underline;
 }
 
-a {
+a.a-as-btn {
+    text-decoration: none;
+}
+
+a:not(.a-as-btn) {
     text-decoration: underline;
     color: var(--color-secondary-500);
 
@@ -298,11 +302,16 @@ a {
     }
 }
 
-a:hover, a:focus {
+a:not(.a-as-btn):hover, a:not(.a-as-btn):focus {
     filter: brightness(150%);
 }
 
-a:visited {
+/*  we're fighting a specificity war with skeleton components */
+a.a-as-btn:hover {
+    filter: brightness(110%);
+}
+
+a:not(.a-as-btn):visited {
     color: var(--color-secondary-950);
 
     @variant dark {
@@ -310,6 +319,7 @@ a:visited {
     }
 }
 
+
 ul {
     list-style: inside;
 }
@@ -318,10 +328,10 @@ ol {
     list-style: decimal inside;
 }
 
-p{
+p {
     @apply mb-3;
 }
 
 @theme {
     --color-secondary-0: oklch(99% 0.02 38.38deg);
-}
+}

package/dist/ui/components/ModalBase.svelte

@@ -1,75 +1,75 @@
-<script lang="ts">
-	import { scale } from 'svelte/transition';
-	import { elasticOut } from 'svelte/easing';
-
-	import type { ModalProps } from 'svelte-modals';
-
-	import { onMount, type Snippet } from 'svelte';
-	import { PinyaCard } from '../elements';
-
-	// https://svelte-modals.mattjennin.gs/modal-components/props/#typescript
-	interface ModalBaseProps extends ModalProps {
-		children: Snippet,
-	}
-
-	let {
-		children,
-		isOpen,
-		close
-	}: ModalBaseProps = $props();
-
-	let container: HTMLDivElement;
-	onMount(() => {
-		const focusableElement = container.querySelector('input, select, textarea, button, object, a, area[href], [tabindex]');
-		if (focusableElement) {
-			(focusableElement as HTMLElement).focus();
-		}
-
-		document.addEventListener('keydown', (e) => {
-			if (e.code === 'Escape') {
-				close();
-			}
-		});
-	});
-</script>
-
-{#if isOpen}
-	<dialog aria-modal="true" in:scale|global={{
-		start: 0.95,
-		duration: 750,
-		easing: elasticOut,
-		opacity: 0.9
-	}}>
-		<div class="interactable" bind:this={container}>
-			<PinyaCard
-				widthClass="max-w-xl2"
-				paddingClass="pl-8 pr-8 pt-4 pb-8"
-			>
-				{@render children?.()}
-			</PinyaCard>
-		</div>
-	</dialog>
-{/if}
-
-<style>
-    dialog {
-        padding: 0;
-        background-color: transparent;
-        border-color: transparent;
-        z-index: 20;
-        position: fixed;
-        top: 0;
-        width: 100%;
-        height: 100%;
-        display: flex;
-        justify-content: center;
-        align-items: center;
-
-        /* allow click-through to backdrop */
-        pointer-events: none;
-    }
-
-    .interactable {
-        pointer-events: auto;
-    }
+<script lang="ts">
+	import { scale } from 'svelte/transition';
+	import { elasticOut } from 'svelte/easing';
+
+	import type { ModalProps } from 'svelte-modals';
+
+	import { onMount, type Snippet } from 'svelte';
+	import { PinyaCard } from '../elements';
+
+	// https://svelte-modals.mattjennin.gs/modal-components/props/#typescript
+	interface ModalBaseProps extends ModalProps {
+		children: Snippet,
+	}
+
+	let {
+		children,
+		isOpen,
+		close
+	}: ModalBaseProps = $props();
+
+	let container: HTMLDivElement;
+	onMount(() => {
+		const focusableElement = container.querySelector('input, select, textarea, button, object, a, area[href], [tabindex]');
+		if (focusableElement) {
+			(focusableElement as HTMLElement).focus();
+		}
+
+		document.addEventListener('keydown', (e) => {
+			if (e.code === 'Escape') {
+				close();
+			}
+		});
+	});
+</script>
+
+{#if isOpen}
+	<dialog aria-modal="true" in:scale|global={{
+		start: 0.95,
+		duration: 750,
+		easing: elasticOut,
+		opacity: 0.9
+	}}>
+		<div class="interactable" bind:this={container}>
+			<PinyaCard
+				widthClass="max-w-xl2"
+				paddingClass="pl-8 pr-8 pt-4 pb-8"
+			>
+				{@render children?.()}
+			</PinyaCard>
+		</div>
+	</dialog>
+{/if}
+
+<style>
+    dialog {
+        padding: 0;
+        background-color: transparent;
+        border-color: transparent;
+        z-index: 20;
+        position: fixed;
+        top: 0;
+        width: 100%;
+        height: 100%;
+        display: flex;
+        justify-content: center;
+        align-items: center;
+
+        /* allow click-through to backdrop */
+        pointer-events: none;
+    }
+
+    .interactable {
+        pointer-events: auto;
+    }
 </style>

package/dist/ui/components/SocialSection.svelte

@@ -6,8 +6,9 @@
 	import GithubIcon from "../../assets/icons/github-mark.svg";
 	import LinkedinIcon from "../../assets/icons/linkedin.svg";
 	import { ItchLogoHotLink } from "../../consts";
-	import { ButtonVariant, PinyaButton } from "../elements/PinyaButton/index";
+	import { PinyaButton } from "../elements/PinyaButton/index";
 	import ImageIcon from "../elements/ImageIcon.svelte";
+	import { ButtonVariant } from "../elements/PinyaButtonCommon/ButtonVariant";
 
 	/** @type {{isSmallVersion?: boolean, email?: string, linkedinSlug?: string, isSlot?: boolean, allowLinkedIn?: boolean}} */
 	let {

package/dist/ui/components/accordion/PinyaAccordion.svelte

@@ -1,21 +1,21 @@
-<script lang="ts">
-	import { Accordion } from "@skeletonlabs/skeleton-svelte";
-	import type { Snippet } from "svelte";
-
-	let {
-		value = $bindable(),
-		children,
-	}: {
-		value: string[],
-		children: Snippet,
-	} = $props();
-</script>
-
-<Accordion
-	classes="bg-primary-100 dark:bg-tertiary-900 dark:saturate-75"
-	{value}
-	onValueChange={(e) => (value = e.value)}
-	collapsible
->
-	{@render children()}
+<script lang="ts">
+	import { Accordion } from "@skeletonlabs/skeleton-svelte";
+	import type { Snippet } from "svelte";
+
+	let {
+		value = $bindable(),
+		children,
+	}: {
+		value: string[],
+		children: Snippet,
+	} = $props();
+</script>
+
+<Accordion
+	classes="bg-primary-100 dark:bg-tertiary-900 dark:saturate-75"
+	{value}
+	onValueChange={(e) => (value = e.value)}
+	collapsible
+>
+	{@render children()}
 </Accordion>

package/dist/ui/components/accordion/PinyaAccordionItem.svelte

@@ -1,29 +1,29 @@
-<script lang="ts">
-	// noinspection ES6UnusedImports
-	import { Accordion } from "@skeletonlabs/skeleton-svelte";
-	import type { Snippet } from "svelte";
-
-	let {
-		value,
-		control: controlSnippet,
-		panel: panelSnippet,
-	}: {
-		value: string,
-		control: Snippet;
-		panel: Snippet;
-	} = $props();
-</script>
-
-<Accordion.Item
-	{value}
-	controlHover="hover:bg-primary-500 dark:hover:bg-secondary-600"
->
-	<!-- Control -->
-	{#snippet control()}
-		{@render controlSnippet()}
-	{/snippet}
-	<!-- Panel -->
-	{#snippet panel()}
-		{@render panelSnippet()}
-	{/snippet}
+<script lang="ts">
+	// noinspection ES6UnusedImports
+	import { Accordion } from "@skeletonlabs/skeleton-svelte";
+	import type { Snippet } from "svelte";
+
+	let {
+		value,
+		control: controlSnippet,
+		panel: panelSnippet,
+	}: {
+		value: string,
+		control: Snippet;
+		panel: Snippet;
+	} = $props();
+</script>
+
+<Accordion.Item
+	{value}
+	controlHover="hover:bg-primary-500 dark:hover:bg-secondary-600"
+>
+	<!-- Control -->
+	{#snippet control()}
+		{@render controlSnippet()}
+	{/snippet}
+	<!-- Panel -->
+	{#snippet panel()}
+		{@render panelSnippet()}
+	{/snippet}
 </Accordion.Item>

package/dist/ui/components/randomized-background/RandomizedBackground.svelte

@@ -9,6 +9,7 @@
 	import BgTiledTurnip from '../../../assets/bg_tiled/bg_tiled_turnip.png';
 	import RandomizedImage from './RandomizedImage.svelte';
 	import { generatedDailySeed, mulberry32Generator } from '../../../util/util';
+	import { appState } from "../../templates/PinyaPageLayout/runes.svelte";
 
 	let { enabled }: {
 		enabled: boolean
@@ -47,6 +48,8 @@
 		}
 		generatedImageList = gi;
 	});
+
+	let bgStyle = $derived(`opacity: ${appState.bgOpacity}`);
 </script>
 
 <svelte:head>
@@ -63,7 +66,12 @@
 
 <!--todo: add a letterbox beyond 1960px + 16 rem-->
 {#if enabled && generatedImageList.length > 0}
-	<div class="default-background" aria-hidden="true" transition:fade>
+	<div
+		class="default-background"
+		aria-hidden="true"
+		style={bgStyle}
+		transition:fade
+	>
 		{#each generatedImageList as imageItem, idx (idx)}
 			<RandomizedImage src={imageItem} {rng} />
 		{/each}

package/dist/ui/elements/CodeBlock/CodeBlock.svelte

@@ -1,65 +1,66 @@
-<!-- @component Code Block based on: https://shiki.style/ and https://www.skeleton.dev/docs/integrations/code-block/svelte/ -->
-
-<script module>
-	import { addCopyButton } from "shiki-transformer-copy-button";
-	import { createHighlighterCoreSync } from "shiki/core";
-	import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
-	// Themes
-	// https://shiki.style/themes
-	import themeLight from "shiki/themes/catppuccin-latte.mjs";
-	import themeDark from "shiki/themes/catppuccin-frappe.mjs";
-	// Languages
-	// https://shiki.style/languages
-	import console from "shiki/langs/console.mjs";
-	import html from "shiki/langs/html.mjs";
-	import css from "shiki/langs/css.mjs";
-	import js from "shiki/langs/javascript.mjs";
-	import ts from "shiki/langs/typescript.mjs";
-	import markdown from "shiki/langs/markdown.mjs";
-
-	// https://shiki.style/guide/sync-usage
-	const shiki = createHighlighterCoreSync({
-		engine: createJavaScriptRegexEngine(),
-		// Implement your import theme.
-		themes: [themeLight, themeDark],
-		// Implement your imported and supported languages.
-		langs: [console, html, css, js, ts, markdown]
-	});
-</script>
-
-<script lang="ts">
-	import type { CodeBlockProps } from "./CodeBlockProps";
-
-	let {
-		code = "",
-		lang = "console",
-		// Base Style Props
-		base = " overflow-hidden",
-		rounded = "rounded-container",
-		shadow = "",
-		classes = "",
-		// Pre Style Props
-		preBase = "",
-		prePadding = "[&>pre]:p-4",
-		preClasses = ""
-	}: CodeBlockProps = $props();
-
-	// Shiki convert to HTML
-	const generatedHtml = $derived(shiki.codeToHtml(code, {
-		lang,
-		themes: {
-			light: "catppuccin-latte",
-			dark: "catppuccin-frappe"
-		},
-		transformers: [
-			addCopyButton({ toggle: 2000 })
-		]
-	}));
-</script>
-
-<div
-	class="{base} {rounded} {shadow} {classes} {preBase} {prePadding} {preClasses}"
->
-	<!-- Output Shiki's Generated HTML -->
-	{@html generatedHtml}
+<!-- @component Code Block based on: https://shiki.style/ and https://www.skeleton.dev/docs/integrations/code-block/svelte/ -->
+
+<script module>
+	import { addCopyButton } from "shiki-transformer-copy-button";
+	import { createHighlighterCoreSync } from "shiki/core";
+	import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
+	// Themes
+	// https://shiki.style/themes
+	import themeLight from "shiki/themes/catppuccin-latte.mjs";
+	import themeDark from "shiki/themes/catppuccin-frappe.mjs";
+	// Languages
+	// https://shiki.style/languages
+	import console from "shiki/langs/console.mjs";
+	import html from "shiki/langs/html.mjs";
+	import css from "shiki/langs/css.mjs";
+	import js from "shiki/langs/javascript.mjs";
+	import ts from "shiki/langs/typescript.mjs";
+	import markdown from "shiki/langs/markdown.mjs";
+	import xml from "shiki/langs/xml.mjs";
+
+	// https://shiki.style/guide/sync-usage
+	const shiki = createHighlighterCoreSync({
+		engine: createJavaScriptRegexEngine(),
+		// Implement your import theme.
+		themes: [themeLight, themeDark],
+		// Implement your imported and supported languages.
+		langs: [console, html, css, js, ts, markdown, xml]
+	});
+</script>
+
+<script lang="ts">
+	import type { CodeBlockProps } from "./CodeBlockProps";
+
+	let {
+		code = "",
+		lang = "console",
+		// Base Style Props
+		base = " overflow-hidden",
+		rounded = "rounded-container",
+		shadow = "",
+		classes = "",
+		// Pre Style Props
+		preBase = "",
+		prePadding = "[&>pre]:p-4",
+		preClasses = ""
+	}: CodeBlockProps = $props();
+
+	// Shiki convert to HTML
+	const generatedHtml = $derived(shiki.codeToHtml(code, {
+		lang,
+		themes: {
+			light: "catppuccin-latte",
+			dark: "catppuccin-frappe"
+		},
+		transformers: [
+			addCopyButton({ toggle: 2000 })
+		]
+	}));
+</script>
+
+<div
+	class="{base} {rounded} {shadow} {classes} {preBase} {prePadding} {preClasses}"
+>
+	<!-- Output Shiki's Generated HTML -->
+	{@html generatedHtml}
 </div>

package/dist/ui/elements/CodeBlock/CodeBlockProps.d.ts

@@ -1,6 +1,6 @@
 export interface CodeBlockProps {
     code?: string;
-    lang?: 'console' | 'html' | 'css' | 'js' | 'ts' | 'markdown';
+    lang?: 'console' | 'html' | 'css' | 'js' | 'ts' | 'markdown' | 'xml';
     base?: string;
     rounded?: string;
     shadow?: string;