@turnipxenon/pineapple 4.5.1 → 5.0.0-alpha.1

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

@@ -0,0 +1,302 @@
+<!-- @component
+Overlay that contains the dialog, settings, and site map
+
+See panels:
+- DialogPanel.svelte
+ TODO: settings
+ TODO: site map
+ -->
+
+<script lang="ts">
+	import FABIcon from "../../../assets/bg_tiled/bg_tiled_turnip.png";
+
+	import AresHappy from "../../../assets/characters/ares/ares_happy.webp";
+	import CloseIcon from "../../../assets/icons/close.svg";
+	import { dialogManager } from "../../../components/dialog_manager/DialogManager";
+	import { m } from "../../../external/paraglide/messages";
+	import { DialogState } from "../../../types/pineapple_fiber/DialogState";
+	import { ColorScheme } from "../../elements/index";
+	import DialogPanel from "./DialogPanel.svelte";
+	import SettingsPanel from "./SettingsPanel.svelte";
+	import { appState } from "../../templates/PinyaPageLayout/pinyaPageLayoutRunes.svelte.js";
+	import {
+		getEnableDialogOverlayContext,
+		getEnablePortraitContext,
+		getOverlayTypeContext
+	} from "../../../util/context/pineappleBaseContextDefinitions";
+	import { onMount } from "svelte";
+	import { slide } from "svelte/transition";
+	import PinyaButton from "../../elements/PinyaButton/PinyaButton.svelte";
+	import PinyaCard from "../../elements/PinyaCard/PinyaCard.svelte";
+
+	let currentPortrait = $state(AresHappy);
+	let isMounted = $state(false);
+
+	let hidePercent = $state(100);
+	let hidePercentLinear = $state(100);
+	let isHidden = $state(true);
+
+	let enableUniversalOverlay = getEnableDialogOverlayContext();
+	let _overlayType = getOverlayTypeContext();
+
+	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);
+		isMounted = true;
+	});
+</script>
+
+<div class="dialog-elements"
+     hidden={isHidden}
+     style="--hidePercentWidth: -{hidePercent}vw;
+            --hidePercentHeight: {hidePercentLinear}vh;">
+	<div class="dialog-portrait-container" class:is-portrait-enabled={enablePortrait.value}>
+		<img src={currentPortrait} alt="Ares" class="dialog-portrait" />
+	</div>
+	<div id="main-dialog-box-container">
+		<PinyaCard id="dialog-name">
+			{#if _overlayType.value === 'dialog'}
+				<div class="fake-h1">Turnip</div>
+			{:else if _overlayType.value === 'site-map'}
+				<div class="fake-h1">Turnip</div>
+			{:else}
+				<div class="fake-h1">{m.settings()}</div>
+			{/if}
+		</PinyaCard>
+		<!-- todo: implement this properly later -->
+		<!--<div id="dialog-scroll-indicator"></div>-->
+		<div id="panel-container">
+			{#if _overlayType.value === 'dialog'}
+				<DialogPanel></DialogPanel>
+			{:else if _overlayType.value === 'site-map'}
+				<DialogPanel></DialogPanel>
+			{:else}
+				<SettingsPanel></SettingsPanel>
+			{/if}
+			<div id="settings-menu-bar">
+				<!-- settings -->
+				<PinyaButton
+					colorScheme={_overlayType.value === 'settings' ? ColorScheme.Secondary : undefined}
+					onclick={()=>{_overlayType.value = 'settings';}}
+				>
+					S
+				</PinyaButton>
+				<!-- site map -->
+				<PinyaButton
+					colorScheme={_overlayType.value === 'site-map' ? ColorScheme.Secondary : undefined}
+					onclick={()=>{_overlayType.value = 'site-map';}}
+				>
+					M
+				</PinyaButton>
+				<!-- convo (active) -->
+				<PinyaButton
+					colorScheme={_overlayType.value === 'dialog' ? ColorScheme.Secondary : undefined}
+					onclick={()=>{_overlayType.value = "dialog";}}
+				>
+					C
+				</PinyaButton>
+				<!-- close -->
+				<PinyaButton
+					title="close overlay"
+					onclick={()=>{dialogManager.toggleDialogOverlay();}}
+				>
+					X
+				</PinyaButton>
+			</div>
+		</div>
+	</div>
+</div>
+
+
+{#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;
+  /*todo: implement later*/
+  /*#dialog-scroll-indicator {*/
+  /*    position: fixed;*/
+  /*    border-radius: 0 2rem 0 0;*/
+  /*    width: 100%;*/
+  /*    height: 1.3lh;*/
+  /*    background: #2A7B9B;*/
+  /*    background: linear-gradient(90deg, rgba(42, 123, 155, 1) 0%, rgba(87, 199, 133, 1) 50%, rgba(237, 221, 83, 1) 100%);*/
+  /*}*/
+}
+#main-dialog-box-container :global(#panel-container > *:first-child) {
+  flex: 1;
+  overflow-y: auto;
+  border-width: 0 2px 0 0;
+  padding: 1.3lh 1em;
+  border-color: var(--color-primary-50-900);
+}
+#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-end;
+  padding-bottom: 0.2rem;
+  gap: 0.5rem;
+  margin: 0 0.4rem;
+}
+#main-dialog-box-container #panel-container #settings-menu-bar * {
+  padding: 0.4rem;
+}
+
+.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,23 @@
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type UniversalOverlayProps = typeof __propDef.props;
+export type UniversalOverlayEvents = typeof __propDef.events;
+export type UniversalOverlaySlots = typeof __propDef.slots;
+/**
+ * Overlay that contains the dialog, settings, and site map
+ *
+ * See panels:
+ * - DialogPanel.svelte
+ * TODO: settings
+ * TODO: site map
+ */
+export default class UniversalOverlay extends SvelteComponentTyped<UniversalOverlayProps, UniversalOverlayEvents, UniversalOverlaySlots> {
+}
+export {};
+//# 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":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA+ID,QAAA,MAAM,SAAS;;;;;;CAA0C,CAAC;AAC1D,MAAM,MAAM,qBAAqB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC3D,MAAM,MAAM,sBAAsB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC7D,MAAM,MAAM,qBAAqB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE3D;;;;;;;GAOG;AACH,MAAM,CAAC,OAAO,OAAO,gBAAiB,SAAQ,oBAAoB,CAAC,qBAAqB,EAAE,sBAAsB,EAAE,qBAAqB,CAAC;CACvI"}

package/dist/ui/templates/PinyaPageLayout/PinyaPageLayout.svelte

@@ -8,9 +8,9 @@
 	import SettingsLogo from "../../../assets/icons/icon-settings.svg";
 	import RandomizedBackground from "../../components/randomized-background/RandomizedBackground.svelte";
 	import GeneralSettingsModal from "../../modules/modals/general-settings/GeneralSettingsModal.svelte";
-	import { appState } from "./runes.svelte";
+	import { appState } from "./pinyaPageLayoutRunes.svelte.js";
 	import { enableBackground } from "../../../store";
-	import DialogOverlay from "../../modules/dialog_overlay/DialogOverlay.svelte";
+	import UniversalOverlay from "../../modules/universal-overlay/UniversalOverlay.svelte";
 
 	let {
 		children,
@@ -76,7 +76,7 @@
 	{@render children?.()}
 </div>
 
-<DialogOverlay></DialogOverlay>
+<UniversalOverlay></UniversalOverlay>
 
 {#if footer}
 	{@render footer()}

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

@@ -1,9 +1,15 @@
-import type { Snippet } from "svelte";
-type $$ComponentProps = {
-    children: Snippet;
-    appBarLead?: Snippet;
-    footer?: Snippet;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
 };
-declare const PinyaPageLayout: import("svelte").Component<$$ComponentProps, {}, "appBarLead">;
-type PinyaPageLayout = ReturnType<typeof PinyaPageLayout>;
-export default PinyaPageLayout;
+export type PinyaPageLayoutProps = typeof __propDef.props;
+export type PinyaPageLayoutEvents = typeof __propDef.events;
+export type PinyaPageLayoutSlots = typeof __propDef.slots;
+export default class PinyaPageLayout extends SvelteComponentTyped<PinyaPageLayoutProps, PinyaPageLayoutEvents, PinyaPageLayoutSlots> {
+}
+export {};
+//# sourceMappingURL=PinyaPageLayout.svelte.d.ts.map

package/dist/ui/templates/PinyaPageLayout/PinyaPageLayout.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PinyaPageLayout.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/templates/PinyaPageLayout/PinyaPageLayout.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAgGD,QAAA,MAAM,SAAS;;;;;;CAA0C,CAAC;AAC1D,MAAM,MAAM,oBAAoB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC1D,MAAM,MAAM,qBAAqB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC5D,MAAM,MAAM,oBAAoB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE1D,MAAM,CAAC,OAAO,OAAO,eAAgB,SAAQ,oBAAoB,CAAC,oBAAoB,EAAE,qBAAqB,EAAE,oBAAoB,CAAC;CACnI"}

package/dist/ui/templates/PinyaPageLayout/index.d.ts

@@ -1,2 +1,3 @@
 export { default as PinyaPageLayout } from "./PinyaPageLayout.svelte";
-export * from "./runes.svelte";
+export * from "./pinyaPageLayoutRunes.svelte.js";
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/templates/PinyaPageLayout/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/templates/PinyaPageLayout/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,eAAe,EAAE,MAAM,0BAA0B,CAAC;AACtE,cAAc,kCAAkC,CAAC"}

package/dist/ui/templates/PinyaPageLayout/index.js

@@ -1,2 +1,2 @@
 export { default as PinyaPageLayout } from "./PinyaPageLayout.svelte";
-export * from "./runes.svelte";
+export * from "./pinyaPageLayoutRunes.svelte.js";

package/dist/ui/templates/PinyaPageLayout/{runes.svelte.d.ts → pinyaPageLayoutRunes.svelte.d.ts}

@@ -9,3 +9,4 @@ interface AppStore {
 }
 export declare const appState: AppStore;
 export {};
+//# sourceMappingURL=pinyaPageLayoutRunes.svelte.d.ts.map

package/dist/ui/templates/PinyaPageLayout/pinyaPageLayoutRunes.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"pinyaPageLayoutRunes.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/templates/PinyaPageLayout/pinyaPageLayoutRunes.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,UAAU,QAAQ;IACjB,KAAK,EAAE,MAAM,CAAC;IACd,IAAI,CAAC,EAAE,OAAO,CAAC;IACf,yBAAyB,EAAE,OAAO,CAAC;IACnC,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,uBAAuB,CAAC,EAAE,OAAO,CAAC;IAClC,SAAS,EAAE,MAAM,CAAC;CAClB;AAED,eAAO,MAAM,QAAQ,UAInB,CAAC"}

package/dist/ui/templates/SeaweedLayout/ChumBucket.svelte

@@ -73,7 +73,7 @@
 
     .chum-bucket {
 		    margin-top: 2lh;
-        padding: 1.5lh 0;
+        padding: 1.5lh 1em;
         width: 100%;
         max-width: var(--container-3xl);
     }

package/dist/ui/templates/SeaweedLayout/ChumBucket.svelte.d.ts

@@ -1,3 +1,15 @@
-declare const ChumBucket: import("svelte").Component<Record<string, never>, {}, "">;
-type ChumBucket = ReturnType<typeof ChumBucket>;
-export default ChumBucket;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type ChumBucketProps = typeof __propDef.props;
+export type ChumBucketEvents = typeof __propDef.events;
+export type ChumBucketSlots = typeof __propDef.slots;
+export default class ChumBucket extends SvelteComponentTyped<ChumBucketProps, ChumBucketEvents, ChumBucketSlots> {
+}
+export {};
+//# sourceMappingURL=ChumBucket.svelte.d.ts.map

package/dist/ui/templates/SeaweedLayout/ChumBucket.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ChumBucket.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/templates/SeaweedLayout/ChumBucket.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAgED,QAAA,MAAM,SAAS;;;;;;CAA0C,CAAC;AAC1D,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACrD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACvD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAErD,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,oBAAoB,CAAC,eAAe,EAAE,gBAAgB,EAAE,eAAe,CAAC;CAC/G"}

package/dist/ui/templates/SeaweedLayout/CreateUrlForm.svelte

@@ -1,12 +1,8 @@
 <script lang="ts">
 	import { type CreateUrlRequest, CreateUrlResult, jsonToCreateUrlResponse } from "../../../types/api/CreateUrl";
-	import type { ToastContext } from "@skeletonlabs/skeleton-svelte";
-	import { getContext } from "svelte";
-	import type { ToastSettings } from "./ToastSettings";
+	import { addToast } from "../../components/MeltToaster/MeltToaster.svelte";
 	import PinyaButton from "../../elements/PinyaButton/PinyaButton.svelte";
-
-	export const toast: ToastContext = getContext("toast");
-
+	import type { ToastSettings } from "../../components/MeltToaster/ToastSettings";
 
 	interface Props {
 		queryParams?: string;
@@ -26,15 +22,17 @@
 
 
 	const failToast: ToastSettings = {
-		title: "Adding new url failed",
-		type: "error"
+		type: "error",
+		description: "Adding new url failed"
 	};
 	const toastMap = new Map<CreateUrlResult, ToastSettings>([
 		[CreateUrlResult.Success, {
-			title: "Successfully added new url"
+			type: "success",
+			description: "Successfully added new url"
 		}],
 		[CreateUrlResult.Duplicate, {
-			title: "Short url already used; try again with another url"
+			type: "error",
+			description: "Short url already used; try again with another url"
 		}],
 		[CreateUrlResult.Fail, failToast]
 	]);
@@ -49,7 +47,7 @@
 			resp.json()
 		).then(json => {
 			const properResp = jsonToCreateUrlResponse(json);
-			toast.create(toastMap.get(properResp.result) ?? failToast);
+			addToast({ data: toastMap.get(properResp.result) ?? failToast });
 		});
 	};
 </script>
@@ -75,6 +73,6 @@
         display: flex;
         flex-direction: column;
         gap: 0.5lh;
-		    margin-top: 1lh;
+        margin-top: 1lh;
     }
 </style>

package/dist/ui/templates/SeaweedLayout/CreateUrlForm.svelte.d.ts

@@ -1,9 +1,15 @@
-import type { ToastContext } from "@skeletonlabs/skeleton-svelte";
-interface Props {
-    queryParams?: string;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type CreateUrlFormProps = typeof __propDef.props;
+export type CreateUrlFormEvents = typeof __propDef.events;
+export type CreateUrlFormSlots = typeof __propDef.slots;
+export default class CreateUrlForm extends SvelteComponentTyped<CreateUrlFormProps, CreateUrlFormEvents, CreateUrlFormSlots> {
 }
-declare const CreateUrlForm: import("svelte").Component<Props, {
-    toast: ToastContext;
-}, "">;
-type CreateUrlForm = ReturnType<typeof CreateUrlForm>;
-export default CreateUrlForm;
+export {};
+//# sourceMappingURL=CreateUrlForm.svelte.d.ts.map

package/dist/ui/templates/SeaweedLayout/CreateUrlForm.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CreateUrlForm.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/templates/SeaweedLayout/CreateUrlForm.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAyED,QAAA,MAAM,SAAS;;;;;;CAA0C,CAAC;AAC1D,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACxD,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC1D,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAExD,MAAM,CAAC,OAAO,OAAO,aAAc,SAAQ,oBAAoB,CAAC,kBAAkB,EAAE,mBAAmB,EAAE,kBAAkB,CAAC;CAC3H"}

package/dist/ui/templates/SeaweedLayout/EntryGroup.svelte

@@ -5,7 +5,7 @@
 	let {
 		title,
 		entryList,
-		projectComponentProps,
+		projectComponentProps
 	}: ProjectGroup = $props();
 
 	const isSpecial = $derived(entryList.length % 3 === 1);
@@ -19,7 +19,7 @@
 </script>
 
 <div class="mt-8 flex flex-col items-center">
-	<PinyaCard widthClass="w-full" className="mb-8">
+	<PinyaCard class="group-header">
 		<h2 class="m-auto">{title}</h2>
 	</PinyaCard>
 	<div class="normal-project-container">
@@ -34,12 +34,6 @@
 	</div>
 </div>
 
-<!--todo: implement in seaweedlayout #migration-->
-<!--{@html styleStr}-->
-
-<!-- Force tailwind to pickup some classes -->
-<div class="hidden rounded-2xl hover:brightness-110"></div>
-
 <style>
     .normal-project-container {
         display: flex;
@@ -63,4 +57,11 @@
         justify-content: center;
         align-items: start;
     }
+
+    :global {
+        .group-header.pinya-card {
+            margin-bottom: calc(var(--spacing) * 8);
+            max-width: unset;
+        }
+    }
 </style>

package/dist/ui/templates/SeaweedLayout/EntryGroup.svelte.d.ts

@@ -1,4 +1,15 @@
-import type { ProjectGroup } from "./";
-declare const EntryGroup: import("svelte").Component<ProjectGroup, {}, "">;
-type EntryGroup = ReturnType<typeof EntryGroup>;
-export default EntryGroup;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type EntryGroupProps = typeof __propDef.props;
+export type EntryGroupEvents = typeof __propDef.events;
+export type EntryGroupSlots = typeof __propDef.slots;
+export default class EntryGroup extends SvelteComponentTyped<EntryGroupProps, EntryGroupEvents, EntryGroupSlots> {
+}
+export {};
+//# sourceMappingURL=EntryGroup.svelte.d.ts.map

package/dist/ui/templates/SeaweedLayout/EntryGroup.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EntryGroup.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/templates/SeaweedLayout/EntryGroup.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AA4CD,QAAA,MAAM,SAAS;;;;;;CAA0C,CAAC;AAC1D,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACrD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACvD,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAErD,MAAM,CAAC,OAAO,OAAO,UAAW,SAAQ,oBAAoB,CAAC,eAAe,EAAE,gBAAgB,EAAE,eAAe,CAAC;CAC/G"}

package/dist/ui/templates/SeaweedLayout/EntryOrderConfig.svelte.d.ts

@@ -1,9 +1,15 @@
-import type { ProjectGroup, SnippetMeta } from "./";
-interface Props {
-    layout: ProjectGroup[];
-    orderUrl: string;
-    allEntries: SnippetMeta[];
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    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 SvelteComponentTyped<EntryOrderConfigProps, EntryOrderConfigEvents, EntryOrderConfigSlots> {
 }
-declare const EntryOrderConfig: import("svelte").Component<Props, {}, "layout" | "orderUrl">;
-type EntryOrderConfig = ReturnType<typeof EntryOrderConfig>;
-export default EntryOrderConfig;
+export {};
+//# sourceMappingURL=EntryOrderConfig.svelte.d.ts.map

package/dist/ui/templates/SeaweedLayout/EntryOrderConfig.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"EntryOrderConfig.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/templates/SeaweedLayout/EntryOrderConfig.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAqCD,QAAA,MAAM,SAAS;;;;;;CAA0C,CAAC;AAC1D,MAAM,MAAM,qBAAqB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC3D,MAAM,MAAM,sBAAsB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC7D,MAAM,MAAM,qBAAqB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE3D,MAAM,CAAC,OAAO,OAAO,gBAAiB,SAAQ,oBAAoB,CAAC,qBAAqB,EAAE,sBAAsB,EAAE,qBAAqB,CAAC;CACvI"}

package/dist/ui/templates/SeaweedLayout/ProjectComponentProps.d.ts

@@ -3,3 +3,4 @@ export interface ProjectComponentProps {
     isPineapple?: boolean;
 }
 export type ComponentSnippet = Snippet<[ProjectComponentProps]>;
+//# sourceMappingURL=ProjectComponentProps.d.ts.map

package/dist/ui/templates/SeaweedLayout/ProjectComponentProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ProjectComponentProps.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/templates/SeaweedLayout/ProjectComponentProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,MAAM,WAAW,qBAAqB;IACrC,WAAW,CAAC,EAAE,OAAO,CAAC;CACtB;AAED,MAAM,MAAM,gBAAgB,GAAG,OAAO,CAAC,CAAC,qBAAqB,CAAC,CAAC,CAAC"}