@turnipxenon/pineapple 3.0.0-alpha.1 → 3.0.0-alpha.2

package/dist/assets/icons/icon-check-dark-contrast.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#FFFDF6"><path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg>

package/dist/assets/icons/icon-check-light-contrast.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#4C473B"><path d="M382-240 154-468l57-57 171 171 367-367 57 57-424 424Z"/></svg>

package/dist/assets/icons/icon-copy-dark-contrast.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#FFFDF6"><path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z"/></svg>

package/dist/assets/icons/icon-copy-light-contrast.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" height="24px" viewBox="0 -960 960 960" width="24px" fill="#4C473B"><path d="M360-240q-33 0-56.5-23.5T280-320v-480q0-33 23.5-56.5T360-880h360q33 0 56.5 23.5T800-800v480q0 33-23.5 56.5T720-240H360Zm0-80h360v-480H360v480ZM200-80q-33 0-56.5-23.5T120-160v-560h80v560h440v80H200Zm160-240v-480 480Z"/></svg>

package/dist/components/PineappleSlideToggle.svelte

@@ -1,24 +1,30 @@
 <script lang="ts">
 
 	import { Switch } from "@skeletonlabs/skeleton-svelte";
+	import type { Snippet } from "svelte";
+
 	interface Props {
 		checked?: boolean;
 		name: string;
-		onChange?: undefined | (() => void);
-		children?: import('svelte').Snippet;
+		onChange?: (() => void);
+		children?: Snippet;
 	}
 
 	let {
 		checked = $bindable(false),
 		name,
 		onChange = undefined,
-		children
+		children = undefined,
 	}: Props = $props();
 </script>
 
 <Switch name={name}
-             background="bg-surface-700 dark:bg-surface-700"
-             bind:checked={checked}
-             on:change={onChange}>
+        controlBase="bg-red-500"
+        checked={checked}
+        onCheckedChange={(e) => {
+					checked = e.checked;
+					onChange?.();
+        }}
+>
 	{@render children?.()}
 </Switch>

package/dist/components/PineappleSlideToggle.svelte.d.ts

@@ -1,8 +1,9 @@
+import type { Snippet } from "svelte";
 interface Props {
     checked?: boolean;
     name: string;
-    onChange?: undefined | (() => void);
-    children?: import('svelte').Snippet;
+    onChange?: (() => void);
+    children?: Snippet;
 }
 declare const PineappleSlideToggle: import("svelte").Component<Props, {}, "checked">;
 type PineappleSlideToggle = ReturnType<typeof PineappleSlideToggle>;

package/dist/styles/app.css

@@ -4,7 +4,7 @@
 @import "@skeletonlabs/skeleton/themes/crimson";
 @import "./turnip-theme.css";
 
-@source "../node_modules/@skeletonlabs/skeleton-svelte/dist";
+@source "../../../node_modules/@skeletonlabs/skeleton-svelte/dist";
 
 @custom-variant dark (&:where(.dark, .dark *));
 
@@ -51,3 +51,94 @@ a.external-link {
     --tw-ring-color: rgb(var(--color-text-400));
     /*background-color: red;*/
 }
+
+@layer base {
+    .game-link-section {
+        @apply mt-6 flex gap-2 justify-center;
+    }
+
+    .game-video-cover {
+        @apply rounded-t-lg max-h-64 object-cover w-full;
+    }
+
+    .text-chip-container {
+        display: flex;
+        flex-wrap: wrap;
+        gap: 0.5rem;
+    }
+
+    .text-chip {
+        background-color: var(--color-secondary-50-950) /* light-dark(var(--color-secondary-50), var(--color-secondary-950)) */;
+        color: var(--color-secondary-950-50) /* light-dark(var(--color-secondary-950), var(--color-secondary-50)) */;
+    }
+}
+
+/*https://shiki.style/guide/dual-themes*/
+html.dark .shiki,
+html.dark .shiki span {
+    color: var(--shiki-dark) !important;
+    background-color: var(--shiki-dark-bg) !important;
+    /* Optional, if you also want font styles */
+    font-style: var(--shiki-dark-font-style) !important;
+    font-weight: var(--shiki-dark-font-weight) !important;
+    text-decoration: var(--shiki-dark-text-decoration) !important;
+}
+
+.shiki {
+    span {
+        white-space: pre-wrap;
+        word-wrap: break-word;
+    }
+}
+
+/* region shiki copy button */
+pre:has(code) {
+    position: relative;
+}
+
+pre button.copy {
+    position: absolute;
+    right: 16px;
+    top: 16px;
+    height: 28px;
+    width: 28px;
+    padding: 0;
+    display: flex;
+
+    & span {
+        width: 100%;
+        aspect-ratio: 1 / 1;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: cover;
+    }
+
+    & .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");
+        }
+    }
+
+    & .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");
+        }
+    }
+
+    &.copied {
+        & .success {
+            display: block;
+        }
+
+        & .ready {
+            display: none;
+        }
+    }
+}
+
+/* endregion shiki copy button */

package/dist/styles/turnip-theme.css

@@ -246,7 +246,7 @@ html.dark {
             filter: brightness(140%);
         }
 
-        h1, h2, h3, h4, h5, h6, .fake-h2, .fake-h3 {
+        h1, h2, h3, h4, h5, h6, .fake-h2, .fake-h3, .fake-h4 {
             text-align: center;
             margin-top: 0;
             font-weight: bolder;
@@ -257,6 +257,10 @@ html.dark {
             }
         }
 
+        h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p, .fake-h2 + p, .fake-h3 + p, .fake-h4 + p {
+            margin-top: 0.5lh;
+        }
+
         h1 {
             @apply text-4xl;
         }
@@ -269,7 +273,7 @@ html.dark {
             @apply text-2xl;
         }
 
-        h4 {
+        h4, .fake-h4 {
             @apply text-xl;
         }
 

package/dist/template/seaweed/CreateUrlForm.svelte

@@ -1,6 +1,12 @@
 <script lang="ts">
 	import { type CreateUrlRequest, CreateUrlResult, jsonToCreateUrlResponse } from "../../types/api/CreateUrl";
-	import { type ToastSettings } from "@skeletonlabs/skeleton-svelte";
+	import type { ToastContext } from "@skeletonlabs/skeleton-svelte";
+	import { getContext } from "svelte";
+	import type { ToastSettings } from "./ToastSettings";
+	import { PinyaButton } from "../../ui/elements/index";
+
+	export const toast: ToastContext = getContext("toast");
+
 
 	interface Props {
 		queryParams?: string;
@@ -8,8 +14,6 @@
 
 	let { queryParams = "" }: Props = $props();
 
-	const toastStore = getToastStore();
-
 	let request: CreateUrlRequest = $state({
 		queryParams: "",
 		shortUrl: "",
@@ -22,14 +26,15 @@
 
 
 	const failToast: ToastSettings = {
-		message: "Adding new url failed"
+		title: "Adding new url failed",
+		type: "error"
 	};
 	const toastMap = new Map<CreateUrlResult, ToastSettings>([
 		[CreateUrlResult.Success, {
-			message: "Successfully added new url"
+			title: "Successfully added new url"
 		}],
 		[CreateUrlResult.Duplicate, {
-			message: "Short url already used; try again with another url"
+			title: "Short url already used; try again with another url"
 		}],
 		[CreateUrlResult.Fail, failToast]
 	]);
@@ -44,7 +49,7 @@
 			resp.json()
 		).then(json => {
 			const properResp = jsonToCreateUrlResponse(json);
-			toastStore.trigger(toastMap.get(properResp.result) ?? failToast);
+			toast.create(toastMap.get(properResp.result) ?? failToast);
 		});
 	};
 </script>
@@ -53,23 +58,24 @@
 	<label for="short-url">Short URL for url shortener</label>
 	<input bind:value={request.shortUrl}
 	       name="short-url"
-	       class="input"
+	       class="input border-[2px] border-primary-500"
 	       type="text"
 	       placeholder="short-url" />
 	<label for="password">Password</label>
 	<input bind:value={request.password}
 	       name="password"
-	       class="input"
+	       class="input border-[2px] border-primary-500"
 	       type="password"
 	       placeholder="ILoveTurnips" />
-	<button class="send-link btn preset-filled" onclick={post}>Send link</button>
+	<PinyaButton onclick={post}>Send link</PinyaButton>
 </div>
 
 <style>
     .local-list {
         display: flex;
         flex-direction: column;
-        gap: 0.25lh;
+        gap: 0.5lh;
+		    margin-top: 1lh;
     }
 
     .send-link {

package/dist/template/seaweed/CreateUrlForm.svelte.d.ts

@@ -1,6 +1,9 @@
+import type { ToastContext } from "@skeletonlabs/skeleton-svelte";
 interface Props {
     queryParams?: string;
 }
-declare const CreateUrlForm: import("svelte").Component<Props, {}, "">;
+declare const CreateUrlForm: import("svelte").Component<Props, {
+    toast: ToastContext;
+}, "">;
 type CreateUrlForm = ReturnType<typeof CreateUrlForm>;
 export default CreateUrlForm;

package/dist/template/seaweed/ToastSettings.d.ts

@@ -0,0 +1,15 @@
+export interface ToastSettings {
+    /** The unique toast ID. */
+    id?: string;
+    /** The unique toast title text. */
+    title?: string;
+    /** The unique toast description text. */
+    description?: string;
+    /**
+     * Define the toast type.
+     * @default info
+     */
+    type?: "info" | "error" | "success";
+    /** The duration of the toast. Default varies by type. */
+    duration?: number;
+}

package/dist/template/seaweed/ToastSettings.js

@@ -0,0 +1 @@
+export {};

package/dist/template/seaweed/entry_order_config/EntryOrderConfig.svelte

@@ -8,7 +8,6 @@
 	import ComboBoxWithButton from "../../../components/combo_box/ComboBoxWithButton.svelte";
 	import CloseIcon from "../../../assets/icons/close.svg";
 	import UpwardIcon from "../../../assets/icons/arrow-upward.svg";
-	import "./entry-order-config.postcss";
 
 	interface Props {
 		seaweedTemplateData: SeaweedTemplateData;
@@ -260,5 +259,39 @@
     tfoot > tr {
         display: flex;
     }
+    .btn-group > button {
+        padding: 0.3em 0.75em;
+    }
+
+    .btn-group-header > h2 {
+        font-weight: bolder;
+        padding-top: 1lh;
+        padding-bottom: 1lh;
+        margin-bottom: 0;
+        padding-inline-start: 1em;
+    }
+
+    .dark .btn-group-header > h2 {
+        color: rgb(var(--theme-font-color-dark));
+    }
+
+    .dark .entry-group {
+        background-color: rgb(var(--color-surface-800));
+    }
 
+    tbody tr:nth-child(odd) {
+        background-color: rgb(var(--color-surface-500));
+    }
+
+    .dark tbody tr:nth-child(odd) {
+        background-color: rgb(var(--color-surface-900));
+    }
+
+    tbody tr:nth-child(even) {
+        background-color: rgb(var(--color-surface-200));
+    }
+
+    .dark tbody tr:nth-child(even) {
+        background-color: rgb(var(--color-surface-800));
+    }
 </style>

package/dist/template/seaweed/entry_order_config/EntryOrderConfig.svelte.d.ts

@@ -1,5 +1,4 @@
 import { type ComponentMeta, type EntryGroup, type SeaweedTemplateData } from "../SeaweedTemplateData";
-import "./entry-order-config.postcss";
 interface Props {
     seaweedTemplateData: SeaweedTemplateData;
     seaweedEntries: EntryGroup[];

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

@@ -0,0 +1,65 @@
+<!-- @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}
+</div>

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

@@ -0,0 +1,5 @@
+import type { CodeBlockProps } from "./CodeBlockProps";
+/** Code Block based on: https://shiki.style/ and https://www.skeleton.dev/docs/integrations/code-block/svelte/ */
+declare const CodeBlock: import("svelte").Component<CodeBlockProps, {}, "">;
+type CodeBlock = ReturnType<typeof CodeBlock>;
+export default CodeBlock;

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

@@ -0,0 +1,11 @@
+export interface CodeBlockProps {
+    code?: string;
+    lang?: 'console' | 'html' | 'css' | 'js' | 'ts' | 'markdown';
+    base?: string;
+    rounded?: string;
+    shadow?: string;
+    classes?: string;
+    preBase?: string;
+    prePadding?: string;
+    preClasses?: string;
+}

package/dist/ui/elements/CodeBlock/CodeBlockProps.js

@@ -0,0 +1 @@
+export {};

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

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

package/dist/ui/elements/CodeBlock/index.js

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

package/dist/ui/elements/PineappleSwitch.svelte

@@ -0,0 +1,29 @@
+<script lang="ts">
+	import { Switch } from "@skeletonlabs/skeleton-svelte";
+	import type { Snippet } from "svelte";
+
+	interface Props {
+		checked?: boolean;
+		name: string;
+		onChange?: (() => void);
+		children?: Snippet;
+	}
+
+	let {
+		checked = $bindable(false),
+		name,
+		onChange = undefined,
+		children = undefined
+	}: Props = $props();
+</script>
+
+<Switch name={name}
+        controlActive="bg-secondary-400 dark:bg-secondary-500"
+        controlInactive="bg-surface-700 dark:bg-surface-800"
+        checked={checked}
+        onCheckedChange={(e) => {
+					checked = e.checked;
+					onChange?.();
+        }}>
+	{@render children?.()}
+</Switch>

package/dist/ui/elements/PineappleSwitch.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from "svelte";
+interface Props {
+    checked?: boolean;
+    name: string;
+    onChange?: (() => void);
+    children?: Snippet;
+}
+declare const PineappleSwitch: import("svelte").Component<Props, {}, "checked">;
+type PineappleSwitch = ReturnType<typeof PineappleSwitch>;
+export default PineappleSwitch;

package/dist/ui/elements/index.d.ts

@@ -1,8 +1,10 @@
-export { default as ImageIcon } from './ImageIcon.svelte';
-export { default as TextLink } from './TextLink.svelte';
-export * from './ColorScheme';
-export * from './GeneralUIProps';
-export * from './OnBackground';
-export * from './pinya-card/index';
-export * from './WrapperProps';
-export * from './pinya-button/index';
+export { default as ImageIcon } from "./ImageIcon.svelte";
+export { default as TextLink } from "./TextLink.svelte";
+export * from "./ColorScheme";
+export * from "./GeneralUIProps";
+export * from "./OnBackground";
+export * from "./pinya-card/index";
+export * from "./WrapperProps";
+export * from "./pinya-button/index";
+export * from "./text-chip";
+export * from "./CodeBlock";

package/dist/ui/elements/index.js

@@ -1,8 +1,10 @@
-export { default as ImageIcon } from './ImageIcon.svelte';
-export { default as TextLink } from './TextLink.svelte';
-export * from './ColorScheme';
-export * from './GeneralUIProps';
-export * from './OnBackground';
-export * from './pinya-card/index';
-export * from './WrapperProps';
-export * from './pinya-button/index';
+export { default as ImageIcon } from "./ImageIcon.svelte";
+export { default as TextLink } from "./TextLink.svelte";
+export * from "./ColorScheme";
+export * from "./GeneralUIProps";
+export * from "./OnBackground";
+export * from "./pinya-card/index";
+export * from "./WrapperProps";
+export * from "./pinya-button/index";
+export * from "./text-chip";
+export * from "./CodeBlock";

package/dist/ui/elements/pinya-card/component.svelte

@@ -1,19 +1,21 @@
 <script lang="ts">/**
-* When with texts, wrap the text content inside a div so flex wont apply
-*/
-	import type { PinyaCardProps } from './props';
+ * When with texts, wrap the text content inside a div so flex wont apply
+ */
+import type { PinyaCardProps } from "./props";
 
-	let {
-	paddingClass = 'pt-[1lh] pb-[1lh] pl-16 pr-16',
-	flexClass = 'flex flex-col',
-	widthClass = 'max-w-md',
+let {
+	paddingClass = "pt-[1lh] pb-[1lh] pl-16 pr-16",
+	flexClass = "flex flex-col",
+	widthClass = "max-w-md",
+	borderClass = "border-[2px] border-primary-500 dark:border-0",
+	marginClass = "",
 	className,
 	children
 }: PinyaCardProps = $props();
 </script>
 
 <div
-	class={`card bg-surface-200 dark:bg-surface-900 border-[2px] border-primary-500 dark:border-0 w-full text-start rounded-xl ${paddingClass} ${flexClass} ${className} ${widthClass}`}
+	class={`card bg-surface-200 dark:bg-surface-900 w-full text-start rounded-xl ${paddingClass} ${flexClass} ${className} ${widthClass} ${borderClass} ${marginClass}`}
 >
 	{@render children?.()}
 </div>

package/dist/ui/elements/pinya-card/component.svelte.d.ts

@@ -1,7 +1,7 @@
 /**
-* When with texts, wrap the text content inside a div so flex wont apply
-*/
-import type { PinyaCardProps } from './props';
+ * When with texts, wrap the text content inside a div so flex wont apply
+ */
+import type { PinyaCardProps } from "./props";
 declare const Component: import("svelte").Component<PinyaCardProps, {}, "">;
 type Component = ReturnType<typeof Component>;
 export default Component;

package/dist/ui/elements/pinya-card/props.d.ts

@@ -4,4 +4,7 @@ export interface PinyaCardProps extends WrapperProps {
     className?: string;
     flexClass?: string;
     widthClass?: string;
+    borderClass?: string;
+    marginClass?: string;
+    includeDataNoSnippet?: boolean;
 }

package/dist/ui/elements/pinya-combobox/PinyaCombobox.svelte

@@ -0,0 +1,35 @@
+<script lang="ts" generics="T extends string">
+	import { Combobox } from '@skeletonlabs/skeleton-svelte';
+	import { getLocale, localizeHref } from '../../../paraglide/runtime';
+	import type { PinyaComboboxProps, ValueChangeDetails } from "./PinyaComboboxProps";
+
+	let {
+		contentZIndex = 'auto',
+		value = $bindable(),
+		onValueChange = () => {},
+		onValueChangeBase = undefined,
+		...props
+	}: PinyaComboboxProps<T> = $props();
+
+	const onValueChangeBaseImpl = (e: ValueChangeDetails<T>) => {
+		value = e.value as T[];
+		onValueChange(e);
+	};
+</script>
+
+<Combobox
+	width="w-full"
+	labelText="text-md"
+	inputGroupBase="w-full flex items-center border-primary-500 border-2 rounded-xl"
+	inputGroupInput="grow bg-transparent border-0 dark:placeholder-surface-50 pl-4"
+	inputGroupButton="size-[3rem]"
+	inputGroupArrow="size-[2rem] m-auto"
+	contentBackground="bg-surface-100-900 border-primary-500 border-2"
+	zIndex={contentZIndex}
+	optionActive="bg-secondary-400-600"
+	optionHover="hover:brightness-75 dark:hover:brightness-125"
+	optionClasses='aria-selected:brightness-75 aria-selected:dark:brightness-125'
+	onValueChange={onValueChangeBase ?? onValueChangeBaseImpl}
+	{value}
+	{...props}
+/>

package/dist/ui/elements/pinya-combobox/PinyaCombobox.svelte.d.ts

@@ -0,0 +1,18 @@
+import type { PinyaComboboxProps } from "./PinyaComboboxProps";
+declare class __sveltets_Render<T extends string> {
+    props(): PinyaComboboxProps<T>;
+    events(): {};
+    slots(): {};
+    bindings(): "value";
+    exports(): {};
+}
+interface $$IsomorphicComponent {
+    new <T extends string>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
+        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
+    } & ReturnType<__sveltets_Render<T>['exports']>;
+    <T extends string>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
+    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+}
+declare const PinyaCombobox: $$IsomorphicComponent;
+type PinyaCombobox<T extends string> = InstanceType<typeof PinyaCombobox<T>>;
+export default PinyaCombobox;