@turnipxenon/pineapple 2.10.0 → 3.0.0-alpha.1

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

@@ -1,93 +1,128 @@
-<script>import {
-} from "../SeaweedTemplateData";
-import { removeProxyWrapperOnString } from "./EntryOrderConfig";
-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";
-export let seaweedTemplateData;
-export let seaweedEntries;
-export let orderUrl;
-export let updateUrl;
-export let getAllEntryFromGlobal;
-export let getEntryFromGlobal;
-const updateOrderQuery = () => {
-  orderUrl = "order=" + seaweedEntries.map((g) => {
-    const groupUrl = g.items.map(
-      (e) => removeProxyWrapperOnString(e.name)
-    ).join("|");
-    return `${g.name}:${groupUrl}:${g.gridClass}`;
-  }).join(",");
-  updateUrl(seaweedTemplateData);
-};
-const addEntry = (group) => {
-  return (selected) => {
-    const c = getEntryFromGlobal(selected);
-    if (c) {
-      group.items.push(c);
-      seaweedEntries = seaweedEntries;
-      updateOrderQuery();
-    }
-  };
-};
-const swapEntry = (index, group, shouldDecrement) => {
-  return () => {
-    let newIndex = index;
-    if (shouldDecrement && index >= 1) {
-      newIndex--;
-    } else if (!shouldDecrement && index <= group.items.length - 2) {
-      newIndex++;
-    } else {
-      return;
-    }
-    const tempVar = group.items[newIndex];
-    group.items[newIndex] = group.items[index];
-    group.items[index] = tempVar;
-    seaweedEntries = seaweedEntries;
-    updateOrderQuery();
-  };
-};
-const swapGroups = (index, shouldDecrement) => {
-  return () => {
-    let newIndex = index;
-    if (shouldDecrement && index >= 1) {
-      newIndex--;
-    } else if (!shouldDecrement && index <= seaweedEntries.length - 2) {
-      newIndex++;
-    } else {
-      return;
-    }
-    const tempVar = seaweedEntries[newIndex];
-    seaweedEntries[newIndex] = seaweedEntries[index];
-    seaweedEntries[index] = tempVar;
-    seaweedEntries = seaweedEntries;
-    updateOrderQuery();
-  };
-};
-const removeGroup = (group) => {
-  return () => {
-    const index = seaweedEntries.indexOf(group);
-    if (index === -1) {
-      return;
-    }
-    seaweedEntries.splice(index, 1);
-    seaweedEntries = seaweedEntries;
-    updateOrderQuery();
-  };
-};
-const removeEntry = (entry, group) => {
-  return () => {
-    for (let i = group.items.length - 1; i >= 0; i--) {
-      if (group.items[i].name === entry.name) {
-        group.items.splice(i, 1);
-        seaweedEntries = seaweedEntries;
-        updateOrderQuery();
-        break;
-      }
-    }
-  };
-};
-const allDefaultEntries = Array.from(getAllEntryFromGlobal().keys());
+<script lang="ts">
+	import {
+		type ComponentMeta,
+		type EntryGroup,
+		type SeaweedTemplateData
+	} from "../SeaweedTemplateData";
+	import { removeProxyWrapperOnString } from "./EntryOrderConfig";
+	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;
+		seaweedEntries: EntryGroup[];
+		orderUrl: string;
+		updateUrl: (data: SeaweedTemplateData) => void;
+		getAllEntryFromGlobal: () => Map<string, ComponentMeta>;
+		getEntryFromGlobal: (s: string) => ComponentMeta | undefined;
+	}
+
+	let {
+		seaweedTemplateData,
+		seaweedEntries = $bindable(),
+		orderUrl = $bindable(),
+		updateUrl,
+		getAllEntryFromGlobal,
+		getEntryFromGlobal
+	}: Props = $props();
+
+	const updateOrderQuery = () => {
+		orderUrl = "order=" + seaweedEntries.map(g => {
+			const groupUrl = g.items.map(
+				e => removeProxyWrapperOnString(e.name)
+			).join("|");
+			return `${g.name}:${groupUrl}:${g.gridClass}`;
+		}).join(",");
+		updateUrl(seaweedTemplateData);
+	};
+
+	const addEntry = (group: EntryGroup): ((selected: string) => void) => {
+		return (selected: string) => {
+			const c = getEntryFromGlobal(selected);
+			if (c) {
+				group.items.push(c);
+				seaweedEntries = seaweedEntries;
+				updateOrderQuery();
+			}
+		};
+	};
+	const swapEntry = (index: number, group: EntryGroup, shouldDecrement: boolean): (() => void) => {
+		return () => {
+			let newIndex = index;
+			if (shouldDecrement && index >= 1) {
+				newIndex--;
+			} else if (!shouldDecrement && index <= group.items.length - 2) {
+				newIndex++;
+			} else {
+				return;
+			}
+
+			const tempVar = group.items[newIndex];
+			group.items[newIndex] = group.items[index];
+			group.items[index] = tempVar;
+			seaweedEntries = seaweedEntries;
+			updateOrderQuery();
+		};
+	};
+	const swapGroups = (index: number, shouldDecrement: boolean): (() => void) => {
+		return () => {
+			let newIndex = index;
+			if (shouldDecrement && index >= 1) {
+				newIndex--;
+			} else if (!shouldDecrement && index <= seaweedEntries.length - 2) {
+				newIndex++;
+			} else {
+				return;
+			}
+
+			const tempVar = seaweedEntries[newIndex];
+			seaweedEntries[newIndex] = seaweedEntries[index];
+			seaweedEntries[index] = tempVar;
+			seaweedEntries = seaweedEntries;
+			updateOrderQuery();
+		};
+	};
+
+	// todo: add group; we might not need it now
+	// const addGroup = (group: EntryGroup): (() => void) => {
+	// 	return () => {
+	// 		seaweedEntries.push({
+	// 			name: "",
+	// 			items: [],
+	// 			gridClass: GroupGridClass.Projects.toString()
+	// 		});
+	// 		updateOrderQuery();
+	// 	};
+	// };
+
+	const removeGroup = (group: EntryGroup): (() => void) => {
+		return () => {
+			const index = seaweedEntries.indexOf(group);
+			if (index === -1) {
+				return;
+			}
+
+			seaweedEntries.splice(index, 1);
+			seaweedEntries = seaweedEntries;
+			updateOrderQuery();
+		};
+	};
+	const removeEntry = (entry: ComponentMeta, group: EntryGroup): (() => void) => {
+		return () => {
+			for (let i = group.items.length - 1; i >= 0; i--) {
+				if (group.items[i].name === entry.name) {
+					group.items.splice(i, 1);
+					seaweedEntries = seaweedEntries;
+					updateOrderQuery();
+					break;
+				}
+			}
+		};
+	};
+
+	const allDefaultEntries = Array.from(getAllEntryFromGlobal().keys());
 </script>
 
 <br>
@@ -103,21 +138,21 @@ const allDefaultEntries = Array.from(getAllEntryFromGlobal().keys());
 	{#each seaweedEntries as group, groupIndex}
 		<div class="entry-group card">
 
-			<div class="btn-group-header">
+			<div class="-header">
 				<button title={`Remove ${group.name}`}
-				        on:click={removeGroup(group)}>
+				        onclick={removeGroup(group)}>
 					<img class="img-icon" src={CloseIcon} alt={`Remove ${group.name}`}>
 				</button>
 
 				<button title={`Move group ${group.name} upwards`}
-				        on:click={swapGroups(groupIndex, true)}
+				        onclick={swapGroups(groupIndex, true)}
 				        disabled="{groupIndex === 0}">
 					<img class="img-icon" src={UpwardIcon} alt={`Move group ${group.name} upwards`}>
 				</button>
 
 				<button title={`Move group ${group.name} downwards`}
 				        disabled={groupIndex === seaweedEntries.length - 1}
-				        on:click={swapGroups(groupIndex, false)}>
+				        onclick={swapGroups(groupIndex, false)}>
 					<img class="img-icon flipped-vertically" src={UpwardIcon} alt={`Move group ${group.name} downwards`}>
 				</button>
 
@@ -133,22 +168,22 @@ const allDefaultEntries = Array.from(getAllEntryFromGlobal().keys());
 				<tbody>
 				{#each group.items as entry, entryIndex}
 					<tr class="entry-row">
-						<td class="btn-group-entry">
+						<td class="-entry">
 
 							<button title={`Remove ${entry.name}`}
-							        on:click={removeEntry(entry, group)}>
+							        onclick={removeEntry(entry, group)}>
 								<img class="img-icon" src={CloseIcon} alt={`Remove ${entry.name}`}>
 							</button>
 
 							<button title={`Move ${entry.name} upwards`}
-							        on:click={swapEntry(entryIndex, group, true)}
+							        onclick={swapEntry(entryIndex, group, true)}
 							        disabled="{entryIndex === 0}">
 								<img class="img-icon" src={UpwardIcon} alt={`Move ${entry.name} upwards`}>
 							</button>
 
 							<button title={`Move ${entry.name} downwards`}
 							        disabled={entryIndex === group.items.length - 1}
-							        on:click={swapEntry(entryIndex, group, false)}>
+							        onclick={swapEntry(entryIndex, group, false)}>
 								<img class="img-icon flipped-vertically" src={UpwardIcon} alt={`Move ${entry.name} downwards`}>
 							</button>
 							<div class="entry-name">
@@ -180,173 +215,15 @@ const allDefaultEntries = Array.from(getAllEntryFromGlobal().keys());
         flex-direction: column;
     }
 
-    :is(.dark .btn-group-header) {
-        --tw-bg-opacity: 1;
-        background-color: rgb(var(--color-tertiary-500) / var(--tw-bg-opacity));
-        color: rgb(var(--on-tertiary));
-}
-
-    .btn-group-header > *:disabled {
-        cursor: not-allowed;
-        opacity: 0.5;
-}
-
-    .btn-group-header > *:disabled:hover {
-        --tw-brightness: brightness(1);
-        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
-    .btn-group-header > *:disabled:active {
-        --tw-scale-x: 1;
-        --tw-scale-y: 1;
-        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-    .btn-group-header {
-        display: inline-flex;
-        flex-direction: row;
-        overflow: hidden;
-        border-radius: var(--theme-rounded-base);
-        isolation: isolate;
-}
-
-    .btn-group-header > :not([hidden]) ~ :not([hidden]) {
-        --tw-space-x-reverse: 0;
-        margin-right: calc(0px * var(--tw-space-x-reverse));
-        margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse)));
-}
-
-    .btn-group-header button,.btn-group-header a {
-        font-size: 1rem;
-        line-height: 1.5rem;
-        padding-left: 1.25rem;
-        padding-right: 1.25rem;
-        padding-top: 9px;
-        padding-bottom: 9px;
-        white-space: nowrap;
-        text-align: center;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        transition-property: all;
-        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-        transition-duration: 150ms;
-        color: inherit;
-        text-decoration-line: none;
-}
-
-    .btn-group-header button > :not([hidden]) ~ :not([hidden]),.btn-group-header a > :not([hidden]) ~ :not([hidden]) {
-        --tw-space-x-reverse: 0;
-        margin-right: calc(0.5rem * var(--tw-space-x-reverse));
-        margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
-}
-
-    .btn-group-header button:hover,.btn-group-header a:hover {
-        --tw-brightness: brightness(1.15);
-        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-        background-color: rgb(var(--color-surface-50) / 3%);
-}
-
-    .btn-group-header button:active,.btn-group-header a:active {
-        background-color: rgb(var(--color-surface-900) / 3%);
-}
-
-    .btn-group-header > * + * {
-        border-top-width: 0px;
-        border-left-width: 1px;
-        border-color: rgb(var(--color-surface-500) / 0.2);
-}
-
-    .btn-group-header {
-        --tw-bg-opacity: 1;
-        background-color: rgb(var(--color-tertiary-500) / var(--tw-bg-opacity));
-        color: rgb(var(--on-tertiary));
-}
-
-    :is(.dark .btn-group-header) {
-        --tw-bg-opacity: 1;
-        background-color: rgb(var(--color-tertiary-500) / var(--tw-bg-opacity));
-        color: rgb(var(--on-tertiary));
-}
-
     .btn-group-header {
+        @apply  preset-filled-tertiary-500;
         display: flex;
         align-items: center;
         margin-bottom: 0.5lh;
     }
 
-    .btn-group-entry > *:disabled {
-        cursor: not-allowed;
-        opacity: 0.5;
-}
-
-    .btn-group-entry > *:disabled:hover {
-        --tw-brightness: brightness(1);
-        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-}
-
-    .btn-group-entry > *:disabled:active {
-        --tw-scale-x: 1;
-        --tw-scale-y: 1;
-        transform: translate(var(--tw-translate-x), var(--tw-translate-y)) rotate(var(--tw-rotate)) skewX(var(--tw-skew-x)) skewY(var(--tw-skew-y)) scaleX(var(--tw-scale-x)) scaleY(var(--tw-scale-y));
-}
-
-    .btn-group-entry {
-        display: inline-flex;
-        flex-direction: row;
-        overflow: hidden;
-        border-radius: var(--theme-rounded-base);
-        isolation: isolate;
-}
-
-    .btn-group-entry > :not([hidden]) ~ :not([hidden]) {
-        --tw-space-x-reverse: 0;
-        margin-right: calc(0px * var(--tw-space-x-reverse));
-        margin-left: calc(0px * calc(1 - var(--tw-space-x-reverse)));
-}
-
-    .btn-group-entry button,.btn-group-entry a {
-        font-size: 1rem;
-        line-height: 1.5rem;
-        padding-left: 1.25rem;
-        padding-right: 1.25rem;
-        padding-top: 9px;
-        padding-bottom: 9px;
-        white-space: nowrap;
-        text-align: center;
-        display: inline-flex;
-        align-items: center;
-        justify-content: center;
-        transition-property: all;
-        transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
-        transition-duration: 150ms;
-        color: inherit;
-        text-decoration-line: none;
-}
-
-    .btn-group-entry button > :not([hidden]) ~ :not([hidden]),.btn-group-entry a > :not([hidden]) ~ :not([hidden]) {
-        --tw-space-x-reverse: 0;
-        margin-right: calc(0.5rem * var(--tw-space-x-reverse));
-        margin-left: calc(0.5rem * calc(1 - var(--tw-space-x-reverse)));
-}
-
-    .btn-group-entry button:hover,.btn-group-entry a:hover {
-        --tw-brightness: brightness(1.15);
-        filter: var(--tw-blur) var(--tw-brightness) var(--tw-contrast) var(--tw-grayscale) var(--tw-hue-rotate) var(--tw-invert) var(--tw-saturate) var(--tw-sepia) var(--tw-drop-shadow);
-        background-color: rgb(var(--color-surface-50) / 3%);
-}
-
-    .btn-group-entry button:active,.btn-group-entry a:active {
-        background-color: rgb(var(--color-surface-900) / 3%);
-}
-
-    .btn-group-entry > * + * {
-        border-top-width: 0px;
-        border-left-width: 1px;
-        border-color: rgb(var(--color-surface-500) / 0.2);
-}
-
     .btn-group-entry {
+        @apply ;
         display: flex;
         padding: 0;
     }
@@ -373,7 +250,7 @@ const allDefaultEntries = Array.from(getAllEntryFromGlobal().keys());
     }
 
     .entry-name {
-        flex-grow: 1;
+        grow: 1;
     }
 
     tr, td, th {

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

@@ -1,23 +1,13 @@
-import { SvelteComponent } from "svelte";
 import { type ComponentMeta, type EntryGroup, type SeaweedTemplateData } from "../SeaweedTemplateData";
 import "./entry-order-config.postcss";
-declare const __propDef: {
-    props: {
-        seaweedTemplateData: SeaweedTemplateData;
-        seaweedEntries: EntryGroup[];
-        orderUrl: string;
-        updateUrl: (data: SeaweedTemplateData) => void;
-        getAllEntryFromGlobal: () => Map<string, ComponentMeta>;
-        getEntryFromGlobal: (s: string) => ComponentMeta | undefined;
-    };
-    events: {
-        [evt: string]: CustomEvent<any>;
-    };
-    slots: {};
-};
-export type EntryOrderConfigProps = typeof __propDef.props;
-export type EntryOrderConfigEvents = typeof __propDef.events;
-export type EntryOrderConfigSlots = typeof __propDef.slots;
-export default class EntryOrderConfig extends SvelteComponent<EntryOrderConfigProps, EntryOrderConfigEvents, EntryOrderConfigSlots> {
+interface Props {
+    seaweedTemplateData: SeaweedTemplateData;
+    seaweedEntries: EntryGroup[];
+    orderUrl: string;
+    updateUrl: (data: SeaweedTemplateData) => void;
+    getAllEntryFromGlobal: () => Map<string, ComponentMeta>;
+    getEntryFromGlobal: (s: string) => ComponentMeta | undefined;
 }
-export {};
+declare const EntryOrderConfig: import("svelte").Component<Props, {}, "seaweedEntries" | "orderUrl">;
+type EntryOrderConfig = ReturnType<typeof EntryOrderConfig>;
+export default EntryOrderConfig;

package/dist/template/seaweed/seaweed.postcss

@@ -7,14 +7,6 @@ main {
     align-items: center;
 }
 
-h1 {
-    font-size: 2em;
-}
-
-h2 {
-    font-size: 1.5em;
-}
-
 .section-card {
     padding: 3em;
     max-width: 800px;
@@ -45,7 +37,7 @@ h2 {
 }
 
 .game-button {
-    @apply btn variant-filled-primary;
+    @apply btn preset-filled-primary-500;
 }
 
 .game-button > img {

package/dist/{theme.postcss → theme.css}

@@ -1,5 +1,6 @@
 @tailwind variants;
 
+/*todo: delete after all downstream works #migration*/
 :root {
     /* =~= Theme Properties =~= */
     --theme-font-family-base: system-ui;
@@ -111,7 +112,3 @@
     --color-text-800: 38 29 28; /* ⬅ #261d1c */
     --color-text-900: 31 24 23; /* ⬅ #1f1817 */
 }
-
-.app-shell-token {
-    @apply bg-surface-600 dark:bg-surface-900;
-}

package/dist/ui/components/FourPartCard.svelte

@@ -0,0 +1,47 @@
+<script lang="ts">
+
+	import type { Snippet } from 'svelte';
+	import { PinyaCard, type PinyaCardProps } from '../elements';
+
+	interface Props extends PinyaCardProps {
+		headerCover?: Snippet;
+		header?: Snippet;
+		footer?: Snippet;
+	}
+
+	let {
+		children,
+		header,
+		footer,
+		headerCover,
+		paddingClass = '',
+		...props
+	}: Props = $props();
+</script>
+
+<PinyaCard {...props} {paddingClass}>
+	<section class="mb-6">
+
+		{#if headerCover}
+			<section class="card-header-cover w-full">
+				{@render headerCover()}
+			</section>
+		{/if}
+
+		<section class="card-content pl-6 pr-6">
+			{#if header}
+				<section class="card-header mt-4 mb-4">
+					{@render header()}
+				</section>
+			{/if}
+
+			{@render children()}
+
+			{#if footer}
+				<section class="card-footer">
+					{@render footer()}
+				</section>
+			{/if}
+		</section>
+	</section>
+</PinyaCard>

package/dist/ui/components/FourPartCard.svelte.d.ts

@@ -0,0 +1,10 @@
+import type { Snippet } from 'svelte';
+import { type PinyaCardProps } from '../elements';
+interface Props extends PinyaCardProps {
+    headerCover?: Snippet;
+    header?: Snippet;
+    footer?: Snippet;
+}
+declare const FourPartCard: import("svelte").Component<Props, {}, "">;
+type FourPartCard = ReturnType<typeof FourPartCard>;
+export default FourPartCard;

package/dist/ui/components/ModalBase.svelte

@@ -0,0 +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;
+    }
+</style>

package/dist/ui/components/ModalBase.svelte.d.ts

@@ -0,0 +1,8 @@
+import type { ModalProps } from 'svelte-modals';
+import { type Snippet } from 'svelte';
+interface ModalBaseProps extends ModalProps {
+    children: Snippet;
+}
+declare const ModalBase: import("svelte").Component<ModalBaseProps, {}, "">;
+type ModalBase = ReturnType<typeof ModalBase>;
+export default ModalBase;