@turnipxenon/pineapple 4.5.1 → 5.0.0-alpha.10

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

@@ -20,6 +20,12 @@ interface $$IsomorphicComponent {
     <T extends string>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
     z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
 }
+/**
+ * Melt-based Combobox
+ *
+ * When migrating from Skeleton to Melt, change the value is no longer an array T[] but it's now T | undefined
+ */
 declare const PinyaCombobox: $$IsomorphicComponent;
 type PinyaCombobox<T extends string> = InstanceType<typeof PinyaCombobox<T>>;
 export default PinyaCombobox;
+//# sourceMappingURL=PinyaCombobox.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"PinyaCombobox.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/elements/pinya-combobox/PinyaCombobox.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,kBAAkB,EAAE,MAAM,oDAAoD,CAAC;AAE7F,iBAAS,QAAQ,CAAC,CAAC,SAAS,MAAM;WAuEL,kBAAkB,CAAC,CAAC,CAAC;;;;;EAAiF;AACnI,cAAM,iBAAiB,CAAC,CAAC,SAAS,MAAM;IACpC,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAChD,MAAM,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC;IAClD,KAAK,IAAI,UAAU,CAAC,OAAO,QAAQ,CAAC,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC;IAChD,QAAQ;IACR,OAAO;CACV;AAED,UAAU,qBAAqB;IAC3B,KAAK,CAAC,SAAS,MAAM,EAAE,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,UAAU,CAAC,CAAC,CAAA;KAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IAC3Y,CAAC,CAAC,SAAS,MAAM,EAAE,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,GAAG,EAAE,GAAG,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,SAAS,CAAC,CAAC,CAAC;IAC1I,YAAY,CAAC,EAAE,UAAU,CAAC,iBAAiB,CAAC,GAAG,CAAC,CAAC,UAAU,CAAC,CAAC,CAAC;CACjE;AACD;;;;GAIG;AACH,QAAA,MAAM,aAAa,EAAE,qBAAmC,CAAC;AACvC,KAAK,aAAa,CAAC,CAAC,SAAS,MAAM,IAAI,YAAY,CAAC,OAAO,aAAa,CAAC,CAAC,CAAC,CAAC,CAAC;AAC/E,eAAe,aAAa,CAAC"}

package/dist/ui/elements/pinya-combobox/PinyaComboboxProps.d.ts

@@ -1,19 +1,21 @@
+import type { HTMLAttributes } from "svelte/elements";
 export interface GenericComboboxItem<T extends string> {
     label: string;
     value: T;
 }
 export interface ValueChangeDetails<T extends string> {
-    value: string[];
-    items: T[];
+    value: T | undefined;
+    items: GenericComboboxItem<T>[];
 }
-export interface PinyaComboboxProps<T extends string> {
+export type PinyaComboboxProps<T extends string> = {
     data: GenericComboboxItem<T>[];
-    defaultValue: T[];
-    value: T[];
+    defaultValue: T | undefined;
+    value: T | undefined;
     label: string;
     placeholder: string;
     onValueChange?: (selectedList: ValueChangeDetails<T>) => void;
-    onValueChangeBase?: (selectedList: ValueChangeDetails<T>) => void;
+    onValueChangeBase?: (e: T | undefined) => void;
     contentZIndex?: string;
     disabled?: boolean;
-}
+} & HTMLAttributes<HTMLDivElement>;
+//# sourceMappingURL=PinyaComboboxProps.d.ts.map

package/dist/ui/elements/pinya-combobox/PinyaComboboxProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PinyaComboboxProps.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/elements/pinya-combobox/PinyaComboboxProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAEtD,MAAM,WAAW,mBAAmB,CAAC,CAAC,SAAS,MAAM;IACpD,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,EAAE,CAAC,CAAC;CACT;AAED,MAAM,WAAW,kBAAkB,CAAC,CAAC,SAAS,MAAM;IACnD,KAAK,EAAE,CAAC,GAAG,SAAS,CAAC;IACrB,KAAK,EAAE,mBAAmB,CAAC,CAAC,CAAC,EAAE,CAAA;CAC/B;AAED,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,MAAM,IAAI;IAElD,IAAI,EAAE,mBAAmB,CAAC,CAAC,CAAC,EAAE,CAAA;IAC9B,YAAY,EAAE,CAAC,GAAG,SAAS,CAAC;IAE5B,KAAK,EAAE,CAAC,GAAG,SAAS,CAAC;IACrB,KAAK,EAAE,MAAM,CAAC;IACd,WAAW,EAAE,MAAM,CAAC;IACpB,aAAa,CAAC,EAAE,CAAC,YAAY,EAAE,kBAAkB,CAAC,CAAC,CAAC,KAAK,IAAI,CAAC;IAG9D,iBAAiB,CAAC,EAAE,CAAC,CAAC,EAAE,CAAC,GAAG,SAAS,KAAK,IAAI,CAAC;IAC/C,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC"}

package/dist/ui/modules/NavigationMenu/NavigationControl.svelte

@@ -1,3 +1,5 @@
+<!-- TODO: Documentation: consider documentation showcase -->
+
 <script lang="ts">
 	import { onMount } from "svelte";
 	import { page } from "$app/state";

package/dist/ui/modules/NavigationMenu/NavigationControl.svelte.d.ts

@@ -6,3 +6,4 @@ interface Props {
 declare const NavigationControl: import("svelte").Component<Props, {}, "currentIndex" | "pageSize">;
 type NavigationControl = ReturnType<typeof NavigationControl>;
 export default NavigationControl;
+//# sourceMappingURL=NavigationControl.svelte.d.ts.map

package/dist/ui/modules/NavigationMenu/NavigationControl.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationControl.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/modules/NavigationMenu/NavigationControl.svelte.ts"],"names":[],"mappings":"AASC,UAAU,KAAK;IACd,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,aAAa,EAAE,MAAM,CAAC;IACtB,QAAQ,EAAE,MAAM,CAAC;CACjB;AA6DF,QAAA,MAAM,iBAAiB,oEAAwC,CAAC;AAChE,KAAK,iBAAiB,GAAG,UAAU,CAAC,OAAO,iBAAiB,CAAC,CAAC;AAC9D,eAAe,iBAAiB,CAAC"}

package/dist/ui/modules/NavigationMenu/NavigationMenu.svelte

@@ -1,3 +1,5 @@
+<!-- TODO: Documentation: consider documentation showcase -->
+
 <script lang="ts">
 	import type { ParsnipOverall } from "../../../modules/parsnip/ParsnipOverall";
 	import NavigationControl from "./NavigationControl.svelte";
@@ -72,7 +74,7 @@
 <div class="navigation-wrapper">
 	{#if (title)}
 		<div>
-			<PinyaCard widthClass="">
+			<PinyaCard widthClass="w-full">
 				<h1 class="navigation-title">
 					{title}
 				</h1>
@@ -143,13 +145,13 @@
             border-radius: var(--theme-rounded-container) var(--theme-rounded-container) 0 0;
         }
 
-        :global(.navigation-element) {
+        :global(.navigation-element.pinya-card) {
             flex-direction: column;
         }
     }
 
     @container (min-width: 801px) {
-        :global(.navigation-element) {
+        :global(.navigation-element.pinya-card) {
             flex-direction: row;
         }
 
@@ -158,7 +160,7 @@
         }
     }
 
-    :global(.navigation-element) {
+    :global(.navigation-element.pinya-card) {
         /* todo: migration */
         /*@apply btn card card-hover bg-surface-100 dark:bg-surface-900;*/
         container-type: inline-size;

package/dist/ui/modules/NavigationMenu/NavigationMenu.svelte.d.ts

@@ -20,3 +20,4 @@ interface Props {
 declare const NavigationMenu: import("svelte").Component<Props, {}, "currentIndex" | "pageSize">;
 type NavigationMenu = ReturnType<typeof NavigationMenu>;
 export default NavigationMenu;
+//# sourceMappingURL=NavigationMenu.svelte.d.ts.map

package/dist/ui/modules/NavigationMenu/NavigationMenu.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationMenu.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/modules/NavigationMenu/NavigationMenu.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAC;AAE1E,OAAO,EAIL,KAAK,sBAAsB,EAC3B,MAAM,yCAAyC,CAAC;AAKjD,UAAU,KAAK;IACd,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAClC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAClC,KAAK,CAAC,EAAE,MAAM,GAAG,SAAS,CAAC;IAC3B,QAAQ,CAAC,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC/B,kBAAkB,CAAC,EAAE,OAAO,CAAC;IAC7B;;OAEG;IACH,aAAa,EAAE,MAAM,CAAC;IACtB,iBAAiB,CAAC,EAAE,OAAO,CAAC;IAC5B,SAAS,CAAC,EAAE,SAAS,GAAG,sBAAsB,CAAC;IAC/C,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB,YAAY,CAAC,EAAE,MAAM,CAAC;IACtB,cAAc,CAAC,EAAE,cAAc,CAAC;IAChC,eAAe,CAAC,EAAE,MAAM,CAAC;CACzB;AA4GF,QAAA,MAAM,cAAc,oEAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/ui/modules/NavigationMenu/PageMeta.d.ts

@@ -1,3 +1,4 @@
+import type { ParsnipOverall } from "../../../modules/parsnip/ParsnipOverall";
 export interface PageMeta {
     datePublished?: string;
     description?: string;
@@ -39,6 +40,12 @@ export interface PageMeta {
      * title defaults to the directory name if it's an empty string.
      */
     title: string;
+    /**
+     * priority is used to sort pages in the navigation menu. Higher priority pages will be displayed first.
+     * if you don't have a priority, it will be set to 0
+     * all pages with the same priority will be sorted based on date, description, title, then relative link
+     */
+    priority: number;
 }
 export interface SimplePageMeta {
     datePublished?: string;
@@ -85,6 +92,14 @@ export interface SimplePageMeta {
 export declare const findPageMetaParent: (parentList: PageMeta[], child: PageMeta) => boolean;
 export type ParsePageMetaCompareFn = ((a: PageMeta, b: PageMeta) => number);
 export declare const parsePageMeta: (fileList: Record<string, unknown>, jsonList: Record<string, unknown>, imageMap: Map<string, string>, compareFn?: ParsePageMetaCompareFn) => PageMeta[];
+export declare const parsePageMetaNested: (args: {
+    fileList: Record<string, unknown>;
+    jsonList: Record<string, unknown>;
+    imageMap: Map<string, string>;
+    compareFn?: ParsePageMetaCompareFn;
+    parsnipOverall?: ParsnipOverall | undefined;
+    parsnipBasePath?: string;
+}) => PageMeta[];
 /**
  * Prioritizes, in order, recently lastUpdated or datePublished, has description, then title
  *
@@ -93,3 +108,4 @@ export declare const parsePageMeta: (fileList: Record<string, unknown>, jsonList
  * @constructor
  */
 export declare const DefaultPageMetaSorter: ParsePageMetaCompareFn;
+//# sourceMappingURL=PageMeta.d.ts.map

package/dist/ui/modules/NavigationMenu/PageMeta.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"PageMeta.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/modules/NavigationMenu/PageMeta.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,qCAAqC,CAAC;AAG1E,MAAM,WAAW,QAAQ;IACxB,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;;;;;;;;;;OAgBG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,WAAW,EAAE,QAAQ,EAAE,CAAC;IAExB;;OAEG;IACH,YAAY,EAAE,MAAM,CAAC;IACrB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,EAAE,MAAM,EAAE,CAAC;IAEf;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;IAEd;;;;OAIG;IACH,QAAQ,EAAE,MAAM,CAAC;CACjB;AAED,MAAM,WAAW,cAAc;IAC9B,aAAa,CAAC,EAAE,MAAM,CAAC;IACvB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,QAAQ,CAAC,EAAE,MAAM,CAAC;IAClB;;;;;;;;;;;;;;;;OAgBG;IACH,OAAO,CAAC,EAAE,MAAM,CAAC;IAEjB;;;;OAIG;IACH,QAAQ,CAAC,EAAE,MAAM,CAAC;IAElB,WAAW,CAAC,EAAE,MAAM,CAAC;IAErB,WAAW,CAAC,EAAE,OAAO,CAAC;IACtB,UAAU,CAAC,EAAE,OAAO,CAAC;IACrB,IAAI,EAAE,MAAM,EAAE,CAAC;IAEf;;OAEG;IACH,KAAK,EAAE,MAAM,CAAC;CACd;AAED;;;;GAIG;AACH,eAAO,MAAM,kBAAkB,GAAI,YAAY,QAAQ,EAAE,EAAE,OAAO,QAAQ,KAAG,OAiB5E,CAAC;AAEF,MAAM,MAAM,sBAAsB,GAAG,CAAC,CAAC,CAAC,EAAE,QAAQ,EAAE,CAAC,EAAE,QAAQ,KAAK,MAAM,CAAC,CAAC;AAE5E,eAAO,MAAM,aAAa,GAAI,UAAU,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EAChD,UAAU,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,EACjC,UAAU,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,EAC7B,YAAY,sBAAsB,KAAG,QAAQ,EAoG3D,CAAC;AAEF,eAAO,MAAM,mBAAmB,GAAI,MAAM;IACzC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAClC,QAAQ,EAAE,MAAM,CAAC,MAAM,EAAE,OAAO,CAAC,CAAC;IAClC,QAAQ,EAAE,GAAG,CAAC,MAAM,EAAE,MAAM,CAAC,CAAC;IAC9B,SAAS,CAAC,EAAE,sBAAsB,CAAC;IACnC,cAAc,CAAC,EAAE,cAAc,GAAG,SAAS,CAAC;IAC5C,eAAe,CAAC,EAAE,MAAM,CAAC;CACzB,KAAG,QAAQ,EA8CX,CAAC;AAKF;;;;;;GAMG;AACH,eAAO,MAAM,qBAAqB,EAAE,sBA6BnC,CAAC"}

package/dist/ui/modules/NavigationMenu/PageMeta.js

@@ -19,6 +19,7 @@ export const findPageMetaParent = (parentList, child) => {
     return isChild;
 };
 export const parsePageMeta = (fileList, jsonList, imageMap, compareFn) => {
+    var _a, _b, _c, _d;
     const pageFlatList = [];
     // save for the future
     // let pageGroupedList: PageMeta[] = [];
@@ -57,20 +58,22 @@ export const parsePageMeta = (fileList, jsonList, imageMap, compareFn) => {
             relativeLink: subPath.join("/"),
             title,
             tags: [],
-            nestedPages: []
+            nestedPages: [],
+            priority: 0
             // todo: transform the data in server.ts?
         };
         const metadata = jsonMap.get(meta.relativeLink);
         if (metadata) {
-            meta.title = metadata["title"] ?? meta.title;
-            meta.tags = metadata["tags"] ?? [];
+            meta.title = (_a = metadata["title"]) !== null && _a !== void 0 ? _a : meta.title;
+            meta.tags = (_b = metadata["tags"]) !== null && _b !== void 0 ? _b : [];
             meta.description = metadata["description"];
             meta.datePublished = metadata["datePublished"];
             meta.lastUpdated = metadata["lastUpdated"];
             meta.shouldGroup = metadata["shouldGroup"];
             meta.shouldHide = metadata["shouldHide"];
+            meta.priority = (_c = metadata["priority"]) !== null && _c !== void 0 ? _c : 0;
             meta.imageID = metadata["imageID"];
-            meta.imageUrl = imageMap.get(meta.imageID) ?? metadata["imageUrl"];
+            meta.imageUrl = (_d = imageMap.get(meta.imageID)) !== null && _d !== void 0 ? _d : metadata["imageUrl"];
             if (meta.imageUrl) {
                 meta.imageAlt = metadata["imageAlt"];
                 if (!meta.imageAlt) {
@@ -100,6 +103,52 @@ export const parsePageMeta = (fileList, jsonList, imageMap, compareFn) => {
     }
     return pageFlatList;
 };
+export const parsePageMetaNested = (args) => {
+    var _a, _b;
+    const parsnipBasedList = (_b = (_a = args.parsnipOverall) === null || _a === void 0 ? void 0 : _a.files.map(pf => {
+        var _a;
+        const meta = {
+            title: pf.basename,
+            nestedPages: [],
+            relativeLink: `${args.parsnipBasePath}${pf.slug}`,
+            tags: pf.tags,
+            imageUrl: pf.preview ? `${(_a = args.parsnipOverall) === null || _a === void 0 ? void 0 : _a.baseUrl}/${pf.preview}` : undefined,
+            imageAlt: pf.previewAlt,
+            datePublished: pf.stat.ctime ? new Date(pf.stat.ctime).toISOString().split("T")[0] : undefined,
+            lastUpdated: pf.stat.mtime ? new Date(pf.stat.mtime).toISOString().split("T")[0] : undefined,
+            description: pf.tagline,
+            priority: 0
+        };
+        return meta;
+    })) !== null && _b !== void 0 ? _b : [];
+    const pageFlatList = parsePageMeta(args.fileList, args.jsonList, args.imageMap, args.compareFn);
+    pageFlatList.push(...parsnipBasedList);
+    const pageMap = new Map(pageFlatList.map(page => [page.relativeLink, page]));
+    const nestedChildLinks = new Set();
+    pageFlatList.forEach(page => {
+        if (!page.relativeLink) {
+            if (page.title === ".") {
+                page.title = "Home";
+            }
+            return;
+        }
+        const parts = page.relativeLink.split("/");
+        for (let i = parts.length - 1; i > 0; i--) {
+            const parentLink = parts.slice(0, i).join("/");
+            const parent = pageMap.get(parentLink);
+            if (parent && page.relativeLink.startsWith(`${parent.relativeLink}/`)) {
+                const alreadyNested = parent.nestedPages.some(nested => nested.relativeLink === page.relativeLink);
+                if (!alreadyNested) {
+                    parent.nestedPages.push(page);
+                }
+                nestedChildLinks.add(page.relativeLink);
+                break;
+            }
+        }
+    });
+    // dont include links that have parents in the base page list
+    return pageFlatList.filter(page => !nestedChildLinks.has(page.relativeLink));
+};
 const AWins = -1;
 const BWins = 1;
 /**
@@ -110,6 +159,9 @@ const BWins = 1;
  * @constructor
  */
 export const DefaultPageMetaSorter = (a, b) => {
+    if (a.priority !== b.priority) {
+        return b.priority - a.priority;
+    }
     const aDate = a.lastUpdated || a.datePublished;
     const bDate = b.lastUpdated || b.datePublished;
     if (aDate && !bDate) {
@@ -128,5 +180,9 @@ export const DefaultPageMetaSorter = (a, b) => {
     else if (!a.description && b.description) {
         return BWins;
     }
-    return a.title.localeCompare(b.title);
+    const titleCompare = a.title.localeCompare(b.title);
+    if (titleCompare !== 0) {
+        return titleCompare;
+    }
+    return a.relativeLink.localeCompare(b.relativeLink);
 };

package/dist/ui/modules/NavigationMenu/index.d.ts

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

package/dist/ui/modules/NavigationMenu/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/modules/NavigationMenu/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,cAAc,EAAE,MAAM,yBAAyB,CAAC;AACpE,cAAc,YAAY,CAAC"}

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

@@ -1,4 +1,5 @@
 export * from "./projects";
 export * from "./NavigationMenu";
 export { default as BlogTemplate } from "../templates/blog_template/BlogTemplate.svelte";
-export { default as DialogOverlay } from "./dialog_overlay/DialogOverlay.svelte";
+export { default as UniversalOverlay } from "./universal-overlay/UniversalOverlay.svelte";
+//# sourceMappingURL=index.d.ts.map

package/dist/ui/modules/index.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/ui/modules/index.ts"],"names":[],"mappings":"AAAA,cAAc,YAAY,CAAC;AAC3B,cAAc,kBAAkB,CAAC;AACjC,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qDAAqD,CAAC;AAC9F,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2DAA2D,CAAC"}

package/dist/ui/modules/index.js

@@ -1,4 +1,4 @@
 export * from "./projects";
 export * from "./NavigationMenu";
 export { default as BlogTemplate } from "../templates/blog_template/BlogTemplate.svelte";
-export { default as DialogOverlay } from "./dialog_overlay/DialogOverlay.svelte";
+export { default as UniversalOverlay } from "./universal-overlay/UniversalOverlay.svelte";

package/dist/ui/modules/modals/general-settings/GeneralSettingsModal.svelte

@@ -1,13 +1,15 @@
+<!-- TODO: Documentation: consider documentation showcase -->
+
 <script lang="ts">
 	import type { ModalProps } from 'svelte-modals';
 	import { setMode, userPrefersMode } from 'mode-watcher';
 
 	import { m } from '../../../../external/paraglide/messages';
+	import SettingsPanel from "../../universal-overlay/SettingsPanel.svelte";
 	import ModalBase from '../../../components/ModalBase.svelte';
 	import DarkIcon from '../../../../assets/icons/icon-dark-mode.svg';
 	import LightIcon from '../../../../assets/icons/icon-light-mode.svg';
 	import ConstrastIcon from '../../../../assets/icons/icon-contrast.svg';
-	import LanguagePicker from './LanguagePicker.svelte';
 
 	let props: ModalProps = $props();
 
@@ -58,31 +60,7 @@
 	<div class="wrapper">
 		<h2>{m.settings()}</h2>
 
-		<fieldset class="btn-group border-primary-500 border-2 flex-col p-2 md:flex-row">
-			<legend class="bg-surface-100-900 pl-4 pr-4">Mode</legend>
-			{#each modes as mode (mode)}
-				<button
-					type="button"
-					title={mode.label}
-					class={`btn pt-3 pb-3 hover:brightness-125
-				${mode.key === selectedItem.key ? 'bg-secondary-400 dark:bg-secondary-800' : 'preset-outlined-primary-300-700'}
-				`}
-					onclick={() => { setMode(mode.key) }}
-				>
-					<img
-						src={mode.imageSrc}
-						aria-hidden="true"
-						alt=""
-						class={`icon
-					${mode.key === selectedItem.key ? 'reverse' : ''}
-					`}
-					>
-					{mode.label}
-				</button>
-			{/each}
-		</fieldset>
-
-		<LanguagePicker />
+		<SettingsPanel />
 
 		<div class="actions">
 			<button class="btn preset-filled-primary-400-600 text-surface-100" onclick={() => props.close()}
@@ -93,18 +71,20 @@
 	</div>
 </ModalBase>
 
-<style>
-    .actions {
-        display: flex;
-        flex-direction: row-reverse;
-        margin-top: 1.4lh;
-    }
+<style>.apply-current-surface {
+  background-color: var(--current-surface-color);
+}
+
+.actions {
+  display: flex;
+  flex-direction: row-reverse;
+  margin-top: 1.4lh;
+}
 
-    .wrapper {
-        display: flex;
-        flex-direction: column;
-        justify-content: start;
-        text-align: start;
-        gap: 1lh;
-    }
-</style>
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  text-align: start;
+  gap: 1lh;
+}</style>

package/dist/ui/modules/modals/general-settings/GeneralSettingsModal.svelte.d.ts

@@ -2,3 +2,4 @@ import type { ModalProps } from 'svelte-modals';
 declare const GeneralSettingsModal: import("svelte").Component<ModalProps<any>, {}, "">;
 type GeneralSettingsModal = ReturnType<typeof GeneralSettingsModal>;
 export default GeneralSettingsModal;
+//# sourceMappingURL=GeneralSettingsModal.svelte.d.ts.map

package/dist/ui/modules/modals/general-settings/GeneralSettingsModal.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"GeneralSettingsModal.svelte.d.ts","sourceRoot":"","sources":["../../../../../src/lib/ui/modules/modals/general-settings/GeneralSettingsModal.svelte.ts"],"names":[],"mappings":"AAGA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AAsFhD,QAAA,MAAM,oBAAoB,qDAAwC,CAAC;AACnE,KAAK,oBAAoB,GAAG,UAAU,CAAC,OAAO,oBAAoB,CAAC,CAAC;AACpE,eAAe,oBAAoB,CAAC"}

package/dist/ui/modules/modals/general-settings/LanguagePicker.svelte

@@ -1,7 +1,9 @@
+<!-- TODO: Documentation: consider documentation showcase -->
+
 <script lang="ts">
 	import { deLocalizeHref, getLocale, localizeHref } from "../../../../external/paraglide/runtime";
 	import PinyaCombobox from "../../../elements/pinya-combobox/PinyaCombobox.svelte";
-	import { appState } from "../../../templates/PinyaPageLayout/runes.svelte";
+	import { appState } from "../../../templates/PinyaPageLayout/pinyaPageLayoutRunes.svelte.js";
 
 	interface ComboxData {
 		label: string;
@@ -14,16 +16,14 @@
 		{ label: "Tagalog", value: "tl" }
 	];
 
-	let selectedCountry = $state([getLocale()]);
+	let selectedCountry = $state(getLocale());
 
-	interface ValueDetail {
-		value: string[];
-	}
+	const onValueChange = (e: { value: ComboxData["value"] | undefined }) => {
+		if (!e.value) return;
 
-	const onValueChange = (e: ValueDetail) => {
-		const data = comboboxData.find((d) => d.value === e.value[0]);
+		const data = comboboxData.find((d) => d.value === e.value);
 		if (data) {
-			selectedCountry = [data.value];
+			selectedCountry = data.value;
 			const pathname = deLocalizeHref(location.href);
 			location.href = localizeHref(pathname, { locale: data.value });
 		}

package/dist/ui/modules/modals/general-settings/LanguagePicker.svelte.d.ts

@@ -1,3 +1,4 @@
 declare const LanguagePicker: import("svelte").Component<Record<string, never>, {}, "">;
 type LanguagePicker = ReturnType<typeof LanguagePicker>;
 export default LanguagePicker;
+//# sourceMappingURL=LanguagePicker.svelte.d.ts.map

package/dist/ui/modules/modals/general-settings/LanguagePicker.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"LanguagePicker.svelte.d.ts","sourceRoot":"","sources":["../../../../../src/lib/ui/modules/modals/general-settings/LanguagePicker.svelte.ts"],"names":[],"mappings":"AA6CA,QAAA,MAAM,cAAc,2DAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/ui/modules/modals/general-settings/NavigationModal.svelte

@@ -0,0 +1,113 @@
+<!-- TODO: Documentation: consider documentation showcase -->
+
+<script lang="ts">
+	import ConstrastIcon from "../../../../assets/icons/icon-contrast.svg";
+	import DarkIcon from "../../../../assets/icons/icon-dark-mode.svg";
+	import LightIcon from "../../../../assets/icons/icon-light-mode.svg";
+	import ModalBase from "../../../components/ModalBase.svelte";
+	import NestedNavigation from "../../../components/NestedNavigation.svelte";
+	import { getSiteLayout } from "../../../../util/context/pineappleBaseContextDefinitions.svelte";
+	import { setMode, userPrefersMode } from "mode-watcher";
+	import type { ModalProps } from "svelte-modals";
+
+	let props: ModalProps = $props();
+
+
+	interface ToggleItem {
+		key: "light" | "dark" | "system"
+		imageSrc: string,
+		label: string,
+	}
+
+	const modes: ToggleItem[] = [
+		{ key: "light", imageSrc: LightIcon, label: "Light" },
+		{ key: "dark", imageSrc: DarkIcon, label: "Dark" },
+		{ key: "system", imageSrc: ConstrastIcon, label: "System" }
+	];
+
+	let selectedItem: ToggleItem = $state(modes[0]);
+
+	// when mode is edited outside, adjust toggle button
+	// do not use runes here because we only want explicit changes outside
+	// our control here!
+	userPrefersMode.subscribe((value) => {
+		const si = modes.find(m => m.key === value);
+		if (selectedItem !== si && si) {
+			selectedItem = si;
+		}
+	});
+
+	// when mode is changed inside the button, adjust the mode
+	$effect(() => {
+		switch (selectedItem?.key) {
+			case "dark":
+				setMode("dark");
+				break;
+			case "light":
+				setMode("light");
+				break;
+			case "system":
+				setMode("system");
+				break;
+			default:
+				break;
+		}
+	});
+
+	let siteLayout = getSiteLayout();
+</script>
+
+<ModalBase {...props} class="navigation-modal">
+	<h2>Navigation</h2>
+
+	<div class="wrapper nested-navigation">
+		<NestedNavigation layout={siteLayout} depth={0} close={props.close} openBehavior="open-active"></NestedNavigation>
+	</div>
+
+	<div class="actions">
+		<button class="btn preset-filled-primary-400-600 text-surface-100" onclick={() => props.close()}
+		        title="Close modal">
+			Close
+		</button>
+	</div>
+</ModalBase>
+
+<style>.apply-current-surface {
+  background-color: var(--current-surface-color);
+}
+
+.actions {
+  display: flex;
+  flex-direction: row-reverse;
+}
+
+:global .navigation-modal {
+  min-width: min(24lh, 100vw);
+  max-height: min(24lh, 100vh);
+  display: flex;
+  flex-direction: column;
+  height: 100%;
+  gap: 0.1lh;
+  padding: 0;
+}
+:global .navigation-modal > * {
+  padding: 0.5lh 1rem;
+}
+:global .nested-navigation {
+  overflow: auto;
+  padding: 0;
+}
+:global .nested-navigation > * {
+  margin: 1lh 1rem;
+}
+:global .nested-navigation .wrapper {
+  padding-inline-start: 1rem;
+}
+
+.wrapper {
+  display: flex;
+  flex-direction: column;
+  justify-content: start;
+  text-align: start;
+  gap: 0.4lh;
+}</style>

package/dist/ui/modules/modals/general-settings/NavigationModal.svelte.d.ts

@@ -0,0 +1,5 @@
+import type { ModalProps } from "svelte-modals";
+declare const NavigationModal: import("svelte").Component<ModalProps<any>, {}, "">;
+type NavigationModal = ReturnType<typeof NavigationModal>;
+export default NavigationModal;
+//# sourceMappingURL=NavigationModal.svelte.d.ts.map

package/dist/ui/modules/modals/general-settings/NavigationModal.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"NavigationModal.svelte.d.ts","sourceRoot":"","sources":["../../../../../src/lib/ui/modules/modals/general-settings/NavigationModal.svelte.ts"],"names":[],"mappings":"AAUA,OAAO,KAAK,EAAE,UAAU,EAAE,MAAM,eAAe,CAAC;AA+EhD,QAAA,MAAM,eAAe,qDAAwC,CAAC;AAC9D,KAAK,eAAe,GAAG,UAAU,CAAC,OAAO,eAAe,CAAC,CAAC;AAC1D,eAAe,eAAe,CAAC"}

package/dist/ui/modules/projects/Hepcat.svelte

@@ -1,3 +1,5 @@
+<!-- TODO: Documentation: consider documentation showcase -->
+
 <script module lang="ts">
 	import HeaderHepCat from "../../../assets/temp/header-hep-cat.mp4";
 	import BitbucketIcon from "../../../assets/icons/bitbucket-icon.svg";
@@ -70,4 +72,4 @@
         object-position: top;
         max-height: 64rem;
     }
-</style>
+</style>

package/dist/ui/modules/projects/Hepcat.svelte.d.ts

@@ -20,3 +20,4 @@ declare const Hepcat: $$__sveltets_2_IsomorphicComponent<Record<string, never>,
 }, {}, {}, string>;
 type Hepcat = InstanceType<typeof Hepcat>;
 export default Hepcat;
+//# sourceMappingURL=Hepcat.svelte.d.ts.map

package/dist/ui/modules/projects/Hepcat.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Hepcat.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/modules/projects/Hepcat.svelte.ts"],"names":[],"mappings":"AAKC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,uDAAuD,CAAC;AAMnG,QAAA,MAAM,SAAS,GAAyB,OAAO,qBAAqB,KAAqB,UAAU,CAAC,OAAO,QAAQ,EAAE,OAAO,CAwChG,CAAC;AAE7B,QAAA,MAAM,GAAG,WAAW,CAAC;AACrB,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC;AAY3B,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,MAAM;;kBAA+E,CAAC;AAC1E,KAAK,MAAM,GAAG,YAAY,CAAC,OAAO,MAAM,CAAC,CAAC;AAC5C,eAAe,MAAM,CAAC"}

package/dist/ui/modules/projects/Pengi.svelte

@@ -1,3 +1,5 @@
+<!-- TODO: Documentation: consider documentation showcase -->
+
 <script module lang="ts">
 	import HeaderPengi from "../../../assets/temp/header-pengi.mp4";
 	import GithubIcon from "../../../assets/icons/github-mark.svg";
@@ -59,4 +61,4 @@
 		</section>
 
 	</FourPartCard>
-{/snippet}
+{/snippet}

package/dist/ui/modules/projects/Pengi.svelte.d.ts

@@ -20,3 +20,4 @@ declare const Pengi: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
 }, {}, {}, string>;
 type Pengi = InstanceType<typeof Pengi>;
 export default Pengi;
+//# sourceMappingURL=Pengi.svelte.d.ts.map

package/dist/ui/modules/projects/Pengi.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Pengi.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/modules/projects/Pengi.svelte.ts"],"names":[],"mappings":"AAKC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,uDAAuD,CAAC;AAMnG,QAAA,MAAM,SAAS,GAAyB,OAAO,qBAAqB,KAAqB,UAAU,CAAC,OAAO,QAAQ,EAAE,OAAO,CAoChG,CAAC;AAE7B,QAAA,MAAM,GAAG,UAAU,CAAC;AACpB,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC;AAS3B,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,KAAK;;kBAA+E,CAAC;AACzE,KAAK,KAAK,GAAG,YAAY,CAAC,OAAO,KAAK,CAAC,CAAC;AAC1C,eAAe,KAAK,CAAC"}

package/dist/ui/modules/projects/Soulwork.svelte

@@ -1,3 +1,5 @@
+<!-- TODO: Documentation: consider documentation showcase -->
+
 <script module lang="ts">
 	import HeaderSoulwork from "../../../assets/temp/header-soulwork.mp4";
 	import GithubIcon from "../../../assets/icons/github-mark.svg";

package/dist/ui/modules/projects/Soulwork.svelte.d.ts

@@ -20,3 +20,4 @@ declare const Soulwork: $$__sveltets_2_IsomorphicComponent<Record<string, never>
 }, {}, {}, string>;
 type Soulwork = InstanceType<typeof Soulwork>;
 export default Soulwork;
+//# sourceMappingURL=Soulwork.svelte.d.ts.map

package/dist/ui/modules/projects/Soulwork.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"Soulwork.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/modules/projects/Soulwork.svelte.ts"],"names":[],"mappings":"AAKC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,iCAAiC,CAAC;AAM7E,QAAA,MAAM,SAAS,GAAyB,OAAO,qBAAqB,KAAqB,UAAU,CAAC,OAAO,QAAQ,EAAE,OAAO,CAiChG,CAAC;AAE7B,QAAA,MAAM,GAAG,aAAa,CAAC;AACvB,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,CAAC;AAS3B,UAAU,kCAAkC,CAAC,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,MAAM,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,KAAK,SAAS,MAAM,CAAC,MAAM,EAAE,GAAG,CAAC,GAAG,GAAG,EAAE,OAAO,GAAG,EAAE,EAAE,QAAQ,GAAG,MAAM;IACpM,KAAK,OAAO,EAAE,OAAO,QAAQ,EAAE,2BAA2B,CAAC,KAAK,CAAC,GAAG,OAAO,QAAQ,EAAE,eAAe,CAAC,KAAK,EAAE,MAAM,EAAE,KAAK,CAAC,GAAG;QAAE,UAAU,CAAC,EAAE,QAAQ,CAAA;KAAE,GAAG,OAAO,CAAC;IACjK,CAAC,QAAQ,EAAE,OAAO,EAAE,KAAK,EAAE;QAAC,QAAQ,CAAC,EAAE,MAAM,CAAC;QAAC,OAAO,CAAC,EAAE,KAAK,CAAA;KAAC,GAAG,OAAO,GAAG;QAAE,IAAI,CAAC,EAAE,GAAG,CAAC;QAAC,GAAG,CAAC,EAAE,GAAG,CAAA;KAAE,CAAC;IACtG,YAAY,CAAC,EAAE,QAAQ,CAAC;CAC3B;AAKD,QAAA,MAAM,QAAQ;;kBAA+E,CAAC;AAC5E,KAAK,QAAQ,GAAG,YAAY,CAAC,OAAO,QAAQ,CAAC,CAAC;AAChD,eAAe,QAAQ,CAAC"}

package/dist/ui/modules/projects/ThisWebpage.svelte

@@ -1,3 +1,5 @@
+<!-- TODO: Documentation: consider documentation showcase -->
+
 <script module lang="ts">
 	import GithubIcon from "../../../assets/icons/github-mark.svg";
 	import ThisWebsiteFootage from "../../../assets/others/seaweed-showcase.mp4";