@turnipxenon/pineapple 4.5.0 → 5.0.0-alpha.1

package/dist/styles/turnip-theme.css

@@ -211,39 +211,46 @@
     --filter-button-image: brightness(0) saturate(100%) invert(21%) sepia(75%) saturate(397%) hue-rotate(338deg) brightness(99%) contrast(93%);
 }
 
+:root {
+    --header-color: var(--color-primary-900);
+}
+
 html.dark {
-    @variant turnip {
-        --border-card: 0;
-        --filter-randomized-image: brightness(50%);
-        --filter-ares-logo: brightness(0) saturate(100%) invert(72%) sepia(8%) saturate(1524%) hue-rotate(3deg) brightness(90%) contrast(88%);
-        --filter-button-image: brightness(0) saturate(100%) invert(72%) sepia(8%) saturate(1524%) hue-rotate(3deg) brightness(90%) contrast(88%);
-    }
+    --header-color: var(--color-primary-100);
+    /*todo: migration*/
+    /*@variant turnip {*/
+    /*    --border-card: 0;*/
+    /*    --filter-randomized-image: brightness(50%);*/
+    /*    --filter-ares-logo: brightness(0) saturate(100%) invert(72%) sepia(8%) saturate(1524%) hue-rotate(3deg) brightness(90%) contrast(88%);*/
+    /*    --filter-button-image: brightness(0) saturate(100%) invert(72%) sepia(8%) saturate(1524%) hue-rotate(3deg) brightness(90%) contrast(88%);*/
+    /*}*/
 }
 
 .icon {
-    @variant turnip {
-        filter: var(--filter-button-image);
-        margin: 0.3rem 0.2rem 0.2rem;
-    }
+    /*todo: migration*/
+    /*@variant turnip {*/
+    /*    filter: var(--filter-button-image);*/
+    /*    margin: 0.3rem 0.2rem 0.2rem;*/
+    /*}*/
 }
 
+/*todo: migration*/
+/*@layer base {*/
+/*    @variant turnip {*/
 
-@layer base {
-    @variant turnip {
-
-        /* region components */
-        color: var(--color-secondary-0);
+/*        !* region components *!*/
+/*        color: var(--color-secondary-0);*/
 
-        @variant dark {
-            color: var(--color-surface-950);
-        }
-        /* endregion components */
-    }
-}
+/*        @variant dark {*/
+/*            color: var(--color-surface-950);*/
+/*        }*/
+/*        !* endregion components *!*/
+/*    }*/
+/*}*/
 
 
 blockquote {
-    @apply mb-4;
+    margin-bottom: 1lh;
     font-style: italic;
     border: 0;
     text-align: center;
@@ -254,11 +261,7 @@ h1, h2, h3, h4, h5, h6, .fake-h1, .fake-h2, .fake-h3, .fake-h4 {
     text-align: start;
     margin-top: 0;
     font-weight: bolder;
-    color: var(--color-primary-900);
-
-    @variant dark {
-        color: var(--color-primary-100);
-    }
+    color: var(--header-color);
 }
 
 h1 {
@@ -269,25 +272,26 @@ h1 + p, h2 + p, h3 + p, h4 + p, h5 + p, h6 + p, .fake-h2 + p, .fake-h3 + p, .fak
     margin-top: 0.5lh;
 }
 
-h1, .fake-h1 {
-    @apply text-4xl;
-}
+/*in tailwind.css*/
+/*h1, .fake-h1 {*/
+/*    @apply text-4xl;*/
+/*}*/
 
-h2, .fake-h2 {
-    @apply text-3xl;
-}
+/*h2, .fake-h2 {*/
+/*    @apply text-3xl;*/
+/*}*/
 
-h3, .fake-h3 {
-    @apply text-2xl;
-}
+/*h3, .fake-h3 {*/
+/*    @apply text-2xl;*/
+/*}*/
 
-h4, .fake-h4 {
-    @apply text-xl;
-}
+/*h4, .fake-h4 {*/
+/*    @apply text-xl;*/
+/*}*/
 
-h5 {
-    @apply text-lg;
-}
+/*h5 {*/
+/*    @apply text-lg;*/
+/*}*/
 
 h6 {
     text-decoration: underline;
@@ -301,9 +305,10 @@ a:not(.a-as-btn) {
     text-decoration: underline;
     color: var(--color-secondary-500);
 
-    @variant dark {
-        color: var(--color-secondary-300);
-    }
+    /*todo: migration*/
+    /*@variant dark {*/
+    /*    color: var(--color-secondary-300);*/
+    /*}*/
 }
 
 a:not(.a-as-btn):hover, a:not(.a-as-btn):focus {
@@ -311,16 +316,17 @@ a:not(.a-as-btn):hover, a:not(.a-as-btn):focus {
 }
 
 /*  we're fighting a specificity war with skeleton components */
-a.a-as-btn:hover {
+.a-as-btn:hover {
     filter: brightness(110%);
 }
 
 a:not(.a-as-btn):visited {
     color: var(--color-secondary-950);
 
-    @variant dark {
-        color: var(--color-secondary-200);
-    }
+    /*todo: migration*/
+    /*@variant dark {*/
+    /*    color: var(--color-secondary-200);*/
+    /*}*/
 }
 
 
@@ -336,9 +342,10 @@ li > ul, li > ol {
     margin-inline-start: 2em;
 }
 
-p {
-    @apply mb-3;
-}
+/*in tailwind.css*/
+/*p {*/
+/*    @apply mb-3;*/
+/*}*/
 
 @theme {
     --color-secondary-0: oklch(99% 0.02 38.38deg);

package/dist/types/BlogBlurbMeta.d.ts

@@ -9,3 +9,4 @@ export declare class BlogBlurbMeta {
     previewAlt: string;
     blogLink: string;
 }
+//# sourceMappingURL=BlogBlurbMeta.d.ts.map

package/dist/types/BlogBlurbMeta.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BlogBlurbMeta.d.ts","sourceRoot":"","sources":["../../src/lib/types/BlogBlurbMeta.ts"],"names":[],"mappings":"AAKA,qBAAa,aAAa;IACzB,KAAK,SAAM;IACX,KAAK,SAAM;IACX,OAAO,EAAE,MAAM,EAAE,CAAM;IACvB,WAAW,SAAM;IACjB,UAAU,SAAM;IAChB,UAAU,EAAE,GAAG,CAAM;IACrB,gBAAgB,SAAM;IACtB,UAAU,SAAM;IAChB,QAAQ,SAAM;CACd"}

package/dist/types/BreadcrumbData.d.ts

@@ -2,3 +2,4 @@ export interface BreadcrumbData {
     path: string;
     name: string;
 }
+//# sourceMappingURL=BreadcrumbData.d.ts.map

package/dist/types/BreadcrumbData.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"BreadcrumbData.d.ts","sourceRoot":"","sources":["../../src/lib/types/BreadcrumbData.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,cAAc;IAC9B,IAAI,EAAE,MAAM,CAAC;IACb,IAAI,EAAE,MAAM,CAAC;CACb"}

package/dist/types/api/CreateUrl.d.ts

@@ -13,3 +13,4 @@ export interface CreateUrlResponse {
 }
 export declare const jsonToCreateUrlRequest: (json: Record<string, never>) => CreateUrlRequest;
 export declare const jsonToCreateUrlResponse: (json: Record<string, never>) => CreateUrlResponse;
+//# sourceMappingURL=CreateUrl.d.ts.map

package/dist/types/api/CreateUrl.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"CreateUrl.d.ts","sourceRoot":"","sources":["../../../src/lib/types/api/CreateUrl.ts"],"names":[],"mappings":"AAAA,MAAM,WAAW,gBAAgB;IAChC,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,EAAE,MAAM,CAAC;IACjB,QAAQ,EAAE,MAAM,CAAC;CACjB;AAED,oBAAY,eAAe;IAC1B,IAAI,IAAI;IACR,OAAO,IAAI;IACX,SAAS,IAAI;CACb;AAED,MAAM,WAAW,iBAAiB;IACjC,MAAM,EAAE,eAAe,CAAC;CACxB;AAED,eAAO,MAAM,sBAAsB,GAAI,MAAM,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,KAAG,gBAMpE,CAAC;AAEF,eAAO,MAAM,uBAAuB,GAAI,MAAM,MAAM,CAAC,MAAM,EAAE,KAAK,CAAC,KAAG,iBAKrE,CAAC"}

package/dist/types/api/index.d.ts

@@ -1 +1,2 @@
 export * from "./CreateUrl";
+//# sourceMappingURL=index.d.ts.map

package/dist/types/api/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/types/api/index.ts"],"names":[],"mappings":"AAEA,cAAc,aAAa,CAAC"}

package/dist/types/pineapple_fiber/DialogDetail.d.ts

@@ -4,3 +4,4 @@ export interface DialogDetail {
     dialogId?: string;
     portraitType?: PortraitType;
 }
+//# sourceMappingURL=DialogDetail.d.ts.map

package/dist/types/pineapple_fiber/DialogDetail.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogDetail.d.ts","sourceRoot":"","sources":["../../../src/lib/types/pineapple_fiber/DialogDetail.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,yCAAyC,CAAC;AAE5E,MAAM,WAAW,YAAY;IAC5B,WAAW,EAAE,MAAM,CAAC;IACpB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,YAAY,CAAC;CAC5B"}

package/dist/types/pineapple_fiber/DialogState.d.ts

@@ -4,3 +4,4 @@ export declare enum DialogState {
     Busy = 2,
     Inherit = 3
 }
+//# sourceMappingURL=DialogState.d.ts.map

package/dist/types/pineapple_fiber/DialogState.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogState.d.ts","sourceRoot":"","sources":["../../../src/lib/types/pineapple_fiber/DialogState.ts"],"names":[],"mappings":"AAAA,oBAAY,WAAW;IACtB,SAAS,IAAA;IACT,OAAO,IAAA;IACP,IAAI,IAAA;IACJ,OAAO,IAAA;CACP"}

package/dist/types/pineapple_fiber/DialogVariableStore.d.ts

@@ -1,2 +1,3 @@
 export type DialogMapStore = Storage;
 export declare const createNewMapStore: () => DialogMapStore;
+//# sourceMappingURL=DialogVariableStore.d.ts.map

package/dist/types/pineapple_fiber/DialogVariableStore.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"DialogVariableStore.d.ts","sourceRoot":"","sources":["../../../src/lib/types/pineapple_fiber/DialogVariableStore.ts"],"names":[],"mappings":"AAKA,MAAM,MAAM,cAAc,GAAG,OAAO,CAAC;AAErC,eAAO,MAAM,iBAAiB,QAAO,cAgBpC,CAAC"}

package/dist/types/pineapple_fiber/PortraitType.d.ts

@@ -9,3 +9,4 @@ export declare enum PortraitType {
     AresSurprised = "AresSurprised",
     AresYay = "AresYay"
 }
+//# sourceMappingURL=PortraitType.d.ts.map

package/dist/types/pineapple_fiber/PortraitType.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PortraitType.d.ts","sourceRoot":"","sources":["../../../src/lib/types/pineapple_fiber/PortraitType.ts"],"names":[],"mappings":"AAAA,oBAAY,YAAY;IACvB,SAAS,cAAc;IACvB,gBAAgB,qBAAqB;IACrC,YAAY,iBAAiB;IAC7B,UAAU,eAAe;IACzB,OAAO,YAAY;IACnB,WAAW,gBAAgB;IAC3B,eAAe,oBAAoB;IACnC,aAAa,kBAAkB;IAC/B,OAAO,YAAY;CACnB"}

package/dist/ui/components/FourPartCard.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
 
-	import type { Snippet } from 'svelte';
-	import { PinyaCard, type PinyaCardProps } from '../elements';
+	import { PinyaCard, type PinyaCardProps } from "../elements";
+	import type { Snippet } from "svelte";
 
 	interface Props extends PinyaCardProps {
 		headerCover?: Snippet;
@@ -14,12 +14,11 @@
 		header,
 		footer,
 		headerCover,
-		paddingClass = '',
 		...props
 	}: Props = $props();
 </script>
 
-<PinyaCard {...props} {paddingClass}>
+<PinyaCard {...props} class={`pinya-four-part-card ${props.class}`}>
 	<section class="mb-6">
 
 		{#if headerCover}
@@ -44,4 +43,12 @@
 			{/if}
 		</section>
 	</section>
-</PinyaCard>
+</PinyaCard>
+
+<style>
+    :global {
+        .pinya-four-part-card.pinya-card {
+            padding: 0;
+        }
+    }
+</style>

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

@@ -1,10 +1,15 @@
-import type { Snippet } from 'svelte';
-import { type PinyaCardProps } from '../elements';
-interface Props extends PinyaCardProps {
-    headerCover?: Snippet;
-    header?: Snippet;
-    footer?: Snippet;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type FourPartCardProps = typeof __propDef.props;
+export type FourPartCardEvents = typeof __propDef.events;
+export type FourPartCardSlots = typeof __propDef.slots;
+export default class FourPartCard extends SvelteComponentTyped<FourPartCardProps, FourPartCardEvents, FourPartCardSlots> {
 }
-declare const FourPartCard: import("svelte").Component<Props, {}, "">;
-type FourPartCard = ReturnType<typeof FourPartCard>;
-export default FourPartCard;
+export {};
+//# sourceMappingURL=FourPartCard.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"FourPartCard.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ui/components/FourPartCard.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAyDD,QAAA,MAAM,SAAS;;;;;;CAA0C,CAAC;AAC1D,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACvD,MAAM,MAAM,kBAAkB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACzD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEvD,MAAM,CAAC,OAAO,OAAO,YAAa,SAAQ,oBAAoB,CAAC,iBAAiB,EAAE,kBAAkB,EAAE,iBAAiB,CAAC;CACvH"}

package/dist/ui/components/MeltToaster/MeltToaster.svelte

@@ -0,0 +1,101 @@
+<script lang="ts" module>
+	import type { ToastSettings } from "./ToastSettings";
+	import { Toaster } from "melt/builders";
+
+	// const toaster = new Toaster<ToastSettings>({ closeDelay: 0 });
+	const toaster = new Toaster<ToastSettings>();
+
+	export const addToast = toaster.addToast;
+</script>
+
+<script lang="ts">
+	import { onDestroy, onMount } from "svelte";
+
+	let toasterRoot: HTMLDivElement;
+	let observer = $state<MutationObserver>();
+
+	onMount(() => {
+		// from https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver
+		observer = new MutationObserver((mutationList) => {
+			for (const mutation of mutationList) {
+				if (mutation.type === "childList") {
+					setTimeout(() => {
+						// get all toasterRoot children
+						const children = Array.from(toasterRoot.children);
+						children.forEach((child, index) => {
+							const revNum = Math.min(Math.abs(children.length - 1 - index), 5);
+							child.style.setProperty("--toast-index", index.toString());
+							child.style.setProperty("--toast-gap", `${Math.max(2 - (revNum * 0.2), 1)}lh`);
+							child.style.setProperty("--toast-scale", `${Math.max(1 - (revNum * 0.02), 0.9)}`);
+							child.style.setProperty("--toast-shadow-px", `${Math.max(8 - (revNum), 3)}px`);
+						});
+					}, 16); // 16 is an approximate ms for 60 Hz
+				}
+			}
+		});
+		observer.observe(toasterRoot, { childList: true });
+	});
+
+	onDestroy(() => {
+		if (observer) observer.disconnect();
+	});
+</script>
+
+<!-- @component MeltToaster
+ todo: implement outgoing animation
+ todo: add animation indicating its duration
+ -->
+<div {...toaster.root} bind:this={toasterRoot} class="pinya-toaster-root">
+	{#each toaster.toasts as toast (toast.id)}
+
+		<div {...toast.content} class={`toast-instance ${toast.data.type}`}>
+			<div class="toast-header">
+				<div {...toast.title} class="fake-h4">{toast.data.title ?? (toast.data.type ?? "Info").toUpperCase()}</div>
+				<button {...toast.close} aria-label="dismiss alert">X</button>
+			</div>
+			<div {...toast.description}>{toast.data.description}</div>
+		</div>
+	{/each}
+</div>
+
+<style>.apply-current-surface {
+  background-color: var(--current-surface-color);
+}
+
+.pinya-toaster-root .toast-instance {
+  --current-surface-color: var(--body-background-color);
+  background-color: var(--current-surface-color);
+}
+
+.pinya-toaster-root .toast-instance.success {
+  --current-surface-color: var(--color-success-500);
+  background-color: var(--current-surface-color);
+}
+
+.pinya-toaster-root .toast-instance.error {
+  --current-surface-color: var(--color-error-500);
+  background-color: var(--current-surface-color);
+}
+
+.pinya-toaster-root .toast-instance {
+  position: fixed;
+  width: min(90vw, 14em);
+  --toast-gap: -10lh;
+  bottom: calc(var(--toast-gap));
+  transition: bottom 0.25s linear 0.2s, transform 0.25s linear 0.2s;
+}
+.pinya-toaster-root .toast-instance:last-child {
+  transition: bottom 0.25s cubic-bezier(0, 0, 0.5, 1.2), transform 0.25s linear;
+}
+.pinya-toaster-root .toast-instance {
+  transform: scale(var(--toast-scale));
+  z-index: var(--toast-index);
+  left: 1rem;
+  box-shadow: var(--toast-shadow-px) var(--toast-shadow-px) var(--toast-shadow-px) var(--shadow-color);
+  padding: 1rem;
+  border-radius: var(--radius-sm);
+}
+.pinya-toaster-root .toast-instance .toast-header {
+  display: flex;
+  justify-content: space-between;
+}</style>

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

@@ -0,0 +1,65 @@
+import { SvelteComponentTyped } from "svelte";
+import type { ToastSettings } from "./ToastSettings";
+import { Toaster } from "melt/builders";
+export declare const addToast: (props: import("melt/builders").AddToastArgs<ToastSettings>) => {
+    "__#private@#private": any;
+    readonly toaster: Toaster<ToastSettings>;
+    readonly id: string;
+    data: ToastSettings;
+    closeDelay: number;
+    type: "assertive" | "polite";
+    ids: {
+        title: string;
+        description: string;
+        content: string;
+        close: string;
+    };
+    readonly createdAt: number;
+    timeElapsed: number;
+    readonly percentage: number;
+    readonly removeSelf: () => void;
+    readonly cleanup: () => void;
+    readonly pause: () => void;
+    readonly reset: () => void;
+    readonly resume: () => void;
+    get content(): {
+        readonly "data-melt-toaster-toast-content": "";
+        readonly id: string;
+        readonly role: "alert";
+        readonly "aria-labelledby": string;
+        readonly "aria-describedby": string;
+        readonly "aria-live": "assertive" | "polite";
+        readonly tabindex: -1;
+        readonly onpointerenter: (e: PointerEvent) => void;
+        readonly onpointerleave: (e: PointerEvent) => void;
+    };
+    get title(): {
+        id: string;
+    };
+    get description(): {
+        id: string;
+    };
+    get close(): {
+        readonly "data-melt-toaster-toast-close": "";
+        readonly onclick: () => void;
+    };
+};
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type MeltToasterProps = typeof __propDef.props;
+export type MeltToasterEvents = typeof __propDef.events;
+export type MeltToasterSlots = typeof __propDef.slots;
+/**
+ * MeltToaster
+ * todo: implement outgoing animation
+ * todo: add animation indicating its duration
+ */
+export default class MeltToaster extends SvelteComponentTyped<MeltToasterProps, MeltToasterEvents, MeltToasterSlots> {
+}
+export {};
+//# sourceMappingURL=MeltToaster.svelte.d.ts.map

package/dist/ui/components/MeltToaster/MeltToaster.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"MeltToaster.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/components/MeltToaster/MeltToaster.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AACA,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,8CAA8C,CAAC;AAClF,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAKxC,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAmB,CAAC;AA0D1C,QAAA,MAAM,SAAS;;;;;;CAA0C,CAAC;AAC1D,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACtD,MAAM,MAAM,iBAAiB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACxD,MAAM,MAAM,gBAAgB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEtD;;;;GAIG;AACH,MAAM,CAAC,OAAO,OAAO,WAAY,SAAQ,oBAAoB,CAAC,gBAAgB,EAAE,iBAAiB,EAAE,gBAAgB,CAAC;CACnH"}

package/dist/ui/{templates/SeaweedLayout → components/MeltToaster}/ToastSettings.d.ts

@@ -1,6 +1,5 @@
 export interface ToastSettings {
     /** The unique toast ID. */
-    id?: string;
     /** The unique toast title text. */
     title?: string;
     /** The unique toast description text. */
@@ -13,3 +12,4 @@ export interface ToastSettings {
     /** The duration of the toast. Default varies by type. */
     duration?: number;
 }
+//# sourceMappingURL=ToastSettings.d.ts.map

package/dist/ui/components/MeltToaster/ToastSettings.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ToastSettings.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/components/MeltToaster/ToastSettings.ts"],"names":[],"mappings":"AACA,MAAM,WAAW,aAAa;IAC7B,2BAA2B;IAE3B,mCAAmC;IACnC,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,yCAAyC;IACzC,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB;;;OAGG;IACH,IAAI,CAAC,EAAE,MAAM,GAAG,OAAO,GAAG,SAAS,CAAC;IACpC,yDAAyD;IACzD,QAAQ,CAAC,EAAE,MAAM,CAAC;CAClB"}

package/dist/ui/components/MeltToaster/ToastSettings.js

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

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

@@ -1,8 +1,15 @@
-import type { ModalProps } from 'svelte-modals';
-import { type Snippet } from 'svelte';
-interface ModalBaseProps extends ModalProps {
-    children: Snippet;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type ModalBaseProps_ = typeof __propDef.props;
+export { ModalBaseProps_ as ModalBaseProps };
+export type ModalBaseEvents = typeof __propDef.events;
+export type ModalBaseSlots = typeof __propDef.slots;
+export default class ModalBase extends SvelteComponentTyped<ModalBaseProps_, ModalBaseEvents, ModalBaseSlots> {
 }
-declare const ModalBase: import("svelte").Component<ModalBaseProps, {}, "">;
-type ModalBase = ReturnType<typeof ModalBase>;
-export default ModalBase;
+//# sourceMappingURL=ModalBase.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"ModalBase.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ui/components/ModalBase.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAgED,QAAA,MAAM,SAAS;;;;;;CAA0C,CAAC;AAC1D,KAAK,eAAe,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC9C,OAAO,EAAE,eAAe,IAAI,cAAc,EAAE,CAAC;AAC7C,MAAM,MAAM,eAAe,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACtD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEpD,MAAM,CAAC,OAAO,OAAO,SAAU,SAAQ,oBAAoB,CAAC,eAAe,EAAE,eAAe,EAAE,cAAc,CAAC;CAC5G"}

package/dist/ui/components/SocialSection.svelte

@@ -1,23 +1,48 @@
 <script lang="ts">
-	import { onMount } from "svelte";
-	import { scale } from "svelte/transition";
-
-	import MailIcon from "../../assets/icons/mail.svg";
 	import GithubIcon from "../../assets/icons/github-mark.svg";
 	import LinkedinIcon from "../../assets/icons/linkedin.svg";
+
+	import MailIcon from "../../assets/icons/mail.svg";
+	import RevealInfo from "../../components/reveal-info/RevealInfo.svelte";
+	import type { RevealInfoRecord } from "../../components/reveal-info/RevealInfoCollection";
 	import { ItchLogoHotLink } from "../../consts";
-	import { PinyaButton } from "../elements/PinyaButton/index";
+	import { getDefaultEmail, getDefaultLinkedin } from "./socialSectionRemote.remote";
 	import ImageIcon from "../elements/ImageIcon.svelte";
+	import { PinyaButton } from "../elements/PinyaButton/index";
 	import { ButtonVariant } from "../elements/PinyaButtonCommon/ButtonVariant";
+	import { onMount } from "svelte";
+	import { scale } from "svelte/transition";
+
+	type SocialSectionProps = {
+		isSmallVersion?: boolean,
+		emailRemoteQuery?: RevealInfoRecord,
+		linkedinRemoteQuery?: RevealInfoRecord,
+		isSlot?: boolean,
+		allowLinkedIn?: boolean
+	};
 
-	/** @type {{isSmallVersion?: boolean, email?: string, linkedinSlug?: string, isSlot?: boolean, allowLinkedIn?: boolean}} */
 	let {
 		isSmallVersion = false,
-		email = "turnipxenon@gmail.com",
-		linkedinSlug = "turnip-xenon",
+		emailRemoteQuery,
+		linkedinRemoteQuery,
 		isSlot = false,
 		allowLinkedIn = true
-	} = $props();
+	}: SocialSectionProps = $props();
+
+	const getDefaultEmailQuery = {
+		query: {
+			run: getDefaultEmail,
+			type: "void"
+		},
+		placeholder: "See email"
+	} as const;
+	const getDefaultLinkedinQuery = {
+		query: {
+			run: getDefaultLinkedin,
+			type: "void"
+		},
+		placeholder: "See Linkedin"
+	} as const;
 
 	let shouldShowExtra = $state(false);
 	const style = `
@@ -41,26 +66,32 @@
 		{/if}
 	</PinyaButton>
 	{#if allowLinkedIn}
-		<PinyaButton
+		<RevealInfo
+			infoRecord={linkedinRemoteQuery ?? getDefaultLinkedinQuery}
 			buttonVariant={ButtonVariant.SmallIcon}
-			title={`https://www.linkedin.com/in/${linkedinSlug}/`}
-			onclick={() => window.open(`https://www.linkedin.com/in/${linkedinSlug}/`)}>
-			<ImageIcon src={LinkedinIcon} alt="linkedin icon" />
-			{#if (!isSmallVersion)}
-				<span>{linkedinSlug}</span>
-			{/if}
-		</PinyaButton>
+			titleBuilder={(info) => `https://www.linkedin.com/in/${info}/`}
+			onclickBuilder={(info) => (() => window.open(`https://www.linkedin.com/in/${info}/`))}>
+			{#snippet bodySnippet(info)}
+				<ImageIcon src={LinkedinIcon} alt="linkedin icon" />
+				{#if (!isSmallVersion)}
+					<span>{info}</span>
+				{/if}
+			{/snippet}
+		</RevealInfo>
 	{/if}
-	<PinyaButton
+	<RevealInfo
+		infoRecord={emailRemoteQuery ?? getDefaultEmailQuery}
 		buttonVariant={ButtonVariant.SmallIcon}
-		title={`mailto:${email}`}
-		onclick={() => window.open(`mailto:${email}`)}
+		titleBuilder={(info) => `mailto:${info}`}
+		onclickBuilder={(info) => (() => window.open(`mailto:${info}`))}
 	>
-		<ImageIcon src={MailIcon} alt="mail icon" />
-		{#if (!isSmallVersion)}
-			<span>{email}</span>
-		{/if}
-	</PinyaButton>
+		{#snippet bodySnippet(info)}
+			<ImageIcon src={MailIcon} aria-hidden />
+			{#if (!isSmallVersion)}
+				<span>{info}</span>
+			{/if}
+		{/snippet}
+	</RevealInfo>
 	{#if (shouldShowExtra)}
 		<div transition:scale>
 			<PinyaButton
@@ -79,7 +110,7 @@
 </div>
 
 <style>
-    span {
+    :global(.socials button span) {
         font-size: 0.8em;
     }
 
@@ -88,6 +119,6 @@
         flex-wrap: wrap;
         justify-content: var(--preferred-justify-content);
         gap: 0.7rem;
-		    align-items: stretch;
+        align-items: stretch;
     }
 </style>