@turnipxenon/pineapple 4.5.0 → 5.0.0-alpha.1

package/dist/ui/elements/TextChip/TextChip.svelte

@@ -1,3 +1,7 @@
+<!-- @component TextChip
+ todo: consider current-surface scss and tailwind cleanup
+ -->
+
 <script lang="ts">
 	import type { TextChipProps } from "./TextChipProps";
 
@@ -12,4 +16,4 @@
         background-color: var(--color-secondary-500) /* oklch(55.6% 0 0deg) = #737373 */;
         color: var(--color-secondary-contrast-500) /* var(--color-secondary-contrast-light) */;
     }
-</style>
+</style>

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

@@ -1,4 +1,19 @@
-import type { TextChipProps } from "./TextChipProps";
-declare const TextChip: import("svelte").Component<TextChipProps, {}, "">;
-type TextChip = ReturnType<typeof TextChip>;
-export default TextChip;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+type TextChipProps_ = typeof __propDef.props;
+export { TextChipProps_ as TextChipProps };
+export type TextChipEvents = typeof __propDef.events;
+export type TextChipSlots = typeof __propDef.slots;
+/**
+ * TextChip
+ * todo: consider current-surface scss and tailwind cleanup
+ */
+export default class TextChip extends SvelteComponentTyped<TextChipProps_, TextChipEvents, TextChipSlots> {
+}
+//# sourceMappingURL=TextChip.svelte.d.ts.map

package/dist/ui/elements/TextChip/TextChip.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextChip.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/elements/TextChip/TextChip.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAiBD,QAAA,MAAM,SAAS;;;;;;CAA0C,CAAC;AAC1D,KAAK,cAAc,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC7C,OAAO,EAAE,cAAc,IAAI,aAAa,EAAE,CAAC;AAC3C,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD;;;GAGG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,cAAc,EAAE,cAAc,EAAE,aAAa,CAAC;CACxG"}

package/dist/ui/elements/TextChip/TextChipProps.d.ts

@@ -2,3 +2,4 @@ import type { WrapperProps } from "../index";
 export interface TextChipProps extends WrapperProps {
     queryClass?: string;
 }
+//# sourceMappingURL=TextChipProps.d.ts.map

package/dist/ui/elements/TextChip/TextChipProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextChipProps.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/elements/TextChip/TextChipProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,YAAY,EAAE,MAAM,wBAAwB,CAAC;AAE3D,MAAM,WAAW,aAAc,SAAQ,YAAY;IAClD,UAAU,CAAC,EAAE,MAAM,CAAC;CACpB"}

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

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

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/elements/TextChip/index.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,cAAc,iBAAiB,CAAC"}

package/dist/ui/elements/TextLink.svelte

@@ -1,17 +1,22 @@
+<!-- @component TextLink
+ todo: consider current-surface scss
+ -->
+
 <script lang="ts">
-	import { type Snippet } from 'svelte';
+	import { type Snippet } from "svelte";
+	import type { HTMLAnchorAttributes } from "svelte/elements";
 
 	let {
 		children,
-		href
-	}: { href: string, children: Snippet } = $props();
+		...props
+	}: { href: string, children: Snippet } & HTMLAnchorAttributes = $props();
 </script>
 
 <a
-	{href}
+	{...props}
 	class="visited:text-surface-950 dark:visited:text-surface-400">
 	{@render children?.()}
 </a>
 
 <style>
-</style>
+</style>

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

@@ -1,8 +1,19 @@
-import { type Snippet } from 'svelte';
-type $$ComponentProps = {
-    href: string;
-    children: Snippet;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
 };
-declare const TextLink: import("svelte").Component<$$ComponentProps, {}, "">;
-type TextLink = ReturnType<typeof TextLink>;
-export default TextLink;
+export type TextLinkProps = typeof __propDef.props;
+export type TextLinkEvents = typeof __propDef.events;
+export type TextLinkSlots = typeof __propDef.slots;
+/**
+ * TextLink
+ * todo: consider current-surface scss
+ */
+export default class TextLink extends SvelteComponentTyped<TextLinkProps, TextLinkEvents, TextLinkSlots> {
+}
+export {};
+//# sourceMappingURL=TextLink.svelte.d.ts.map

package/dist/ui/elements/TextLink.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"TextLink.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ui/elements/TextLink.svelte.ts"],"names":[],"mappings":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAyBD,QAAA,MAAM,SAAS;;;;;;CAA0C,CAAC;AAC1D,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACnD,MAAM,MAAM,cAAc,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AACrD,MAAM,MAAM,aAAa,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEnD;;;GAGG;AACH,MAAM,CAAC,OAAO,OAAO,QAAS,SAAQ,oBAAoB,CAAC,aAAa,EAAE,cAAc,EAAE,aAAa,CAAC;CACvG"}

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

@@ -2,3 +2,4 @@ import type { Snippet } from 'svelte';
 export type WrapperProps = {
     children: Snippet;
 };
+//# sourceMappingURL=WrapperProps.d.ts.map

package/dist/ui/elements/WrapperProps.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"WrapperProps.d.ts","sourceRoot":"","sources":["../../../src/lib/ui/elements/WrapperProps.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,EAAE,OAAO,EAAE,MAAM,QAAQ,CAAC;AAEtC,MAAM,MAAM,YAAY,GAAG;IAAE,QAAQ,EAAE,OAAO,CAAA;CAAE,CAAC"}

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

@@ -11,3 +11,4 @@ export * from "./PinyaButton";
 export * from "./PinyaAnchorButton";
 export * from "./TextChip";
 export * from "./CodeBlock";
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../src/lib/ui/elements/index.ts"],"names":[],"mappings":"AACA,cAAc,eAAe,CAAC;AAC9B,cAAc,kBAAkB,CAAC;AACjC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,qBAAqB,CAAC;AAGpC,OAAO,EAAE,OAAO,IAAI,SAAS,EAAE,MAAM,oBAAoB,CAAC;AAC1D,OAAO,EAAE,OAAO,IAAI,QAAQ,EAAE,MAAM,mBAAmB,CAAC;AACxD,OAAO,EAAE,OAAO,IAAI,yBAAyB,EAAE,MAAM,oCAAoC,CAAC;AAE1F,cAAc,mBAAmB,CAAC;AAClC,cAAc,gBAAgB,CAAC;AAC/B,cAAc,eAAe,CAAC;AAC9B,cAAc,qBAAqB,CAAC;AACpC,cAAc,YAAY,CAAC;AAC3B,cAAc,aAAa,CAAC"}

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

@@ -1,35 +1,129 @@
 <script lang="ts" generics="T extends string">
-	import { Combobox } from '@skeletonlabs/skeleton-svelte';
-	import { getLocale, localizeHref } from '../../../paraglide/runtime';
-	import type { PinyaComboboxProps, ValueChangeDetails } from "./PinyaComboboxProps";
+	import type { PinyaComboboxProps } from "./PinyaComboboxProps";
+	import { Combobox } from "melt/builders";
 
 	let {
-		contentZIndex = 'auto',
+		// todo: fix this
+		contentZIndex = "auto",
 		value = $bindable(),
-		onValueChange = () => {},
+		onValueChange = () => {
+		},
 		onValueChangeBase = undefined,
 		...props
 	}: PinyaComboboxProps<T> = $props();
 
-	const onValueChangeBaseImpl = (e: ValueChangeDetails<T>) => {
-		value = e.value as T[];
-		onValueChange(e);
+	const onValueChangeBaseImpl = (e: T | undefined) => {
+		value = e;
+		console.log("change", e);
+		onValueChange({
+			value: e,
+			items: props.data
+		});
 	};
+
+	const combobox = new Combobox<T, false>({
+		value: props.defaultValue,
+		inputValue: function() {
+			return props.data.find((o) => o.value === value)?.label ?? "---";
+		},
+		onValueChange: onValueChangeBase ?? onValueChangeBaseImpl
+	});
+
+	const filtered = $derived.by(() => {
+		if (!combobox.touched) return props.data;
+		return props.data.filter((o) =>
+			o.value.toLowerCase().includes(combobox.inputValue.trim().toLowerCase())
+		);
+	});
 </script>
 
-<Combobox
-	width="w-full"
-	labelText="text-md"
-	inputGroupBase="w-full flex items-center border-primary-500 border-2 rounded-xl"
-	inputGroupInput="grow bg-transparent border-0 dark:placeholder-surface-50 pl-4"
-	inputGroupButton="size-[3rem]"
-	inputGroupArrow="size-[2rem] m-auto"
-	contentBackground="bg-surface-100-900 border-primary-500 border-2"
-	zIndex={contentZIndex}
-	optionActive="bg-secondary-400-600"
-	optionHover="hover:brightness-75 dark:hover:brightness-125"
-	optionClasses='aria-selected:brightness-75 aria-selected:dark:brightness-125'
-	onValueChange={onValueChangeBase ?? onValueChangeBaseImpl}
-	{value}
-	{...props}
-/>
+<!--
+@component
+Melt-based Combobox
+
+When migrating from Skeleton to Melt, change the value is no longer an array T[] but it's now T | undefined
+-->
+
+<div class={`pinya-combobox-wrapper ${props.class}`}>
+	<label {...combobox.label}>{props.label}</label>
+	<div class="pinya-combobox-control">
+		<input {...combobox.input} />
+		<button class="size-[3rem]" {...combobox.trigger}>
+			<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" style="opacity: 0.5" class="size-[2rem] m-auto">
+				<path d="m6 9 6 6 6-6"></path>
+			</svg>
+		</button>
+	</div>
+
+
+	<div {...combobox.content}>
+		{#each filtered as option (option)}
+			<div {...combobox.getOption(option.value)}>
+				{option.label}
+				{#if combobox.isSelected(option.value)}
+					✓
+				{/if}
+			</div>
+		{:else}
+			<span>No results found</span>
+		{/each}
+	</div>
+</div>
+
+<style>.apply-current-surface {
+  background-color: var(--current-surface-color);
+}
+
+[data-melt-combobox-content] {
+  --current-surface-color: var(--body-background-color);
+  background-color: var(--current-surface-color);
+}
+
+[data-melt-combobox-content] {
+  border-color: var(--color-primary-500);
+  border-style: var(--tw-border-style);
+  border-radius: var(--radius-xl);
+  border-width: 2px;
+  font-size: var(--text-base);
+  display: none;
+  flex-direction: column;
+  gap: 0.25lh;
+  padding: 0.25lh 0.5em;
+  box-shadow: 3px 3px 3px var(--shadow-color);
+}
+[data-melt-combobox-content][data-open] {
+  display: flex;
+}
+[data-melt-combobox-content] [data-melt-combobox-option] {
+  padding-block: calc(var(--spacing) * 1);
+  padding-inline: calc(var(--spacing) * 4);
+  border-radius: var(--radius-lg);
+}
+[data-melt-combobox-content] [data-melt-combobox-option][aria-selected=true] {
+  background-color: light-dark(var(--color-secondary-400), var(--color-secondary-600));
+}
+
+.pinya-combobox-wrapper {
+  display: flex;
+  flex-direction: column;
+}
+
+.pinya-combobox-control {
+  background-color: transparent;
+  border-color: var(--color-primary-500);
+  border-style: var(--tw-border-style);
+  border-radius: var(--radius-xl);
+  border-width: 2px;
+  font-size: var(--text-base);
+  padding-right: 0;
+  width: 100%;
+  display: flex;
+  flex-direction: row;
+  gap: 0.5rem;
+}
+.pinya-combobox-control input {
+  flex-grow: 1;
+  text-overflow: ellipsis;
+  padding: var(--spacing-2) var(--spacing-4);
+  padding-right: 0;
+}</style>

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

@@ -1,25 +1,20 @@
-import type { PinyaComboboxProps } from "./PinyaComboboxProps";
-declare function $$render<T extends string>(): {
-    props: PinyaComboboxProps<T>;
-    exports: {};
-    bindings: "value";
-    slots: {};
-    events: {};
-};
+import { SvelteComponentTyped } from "svelte";
 declare class __sveltets_Render<T extends string> {
-    props(): ReturnType<typeof $$render<T>>['props'];
-    events(): ReturnType<typeof $$render<T>>['events'];
-    slots(): ReturnType<typeof $$render<T>>['slots'];
-    bindings(): "value";
-    exports(): {};
+    props(): Record<string, never>;
+    events(): {} & {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots(): {};
 }
-interface $$IsomorphicComponent {
-    new <T extends string>(options: import('svelte').ComponentConstructorOptions<ReturnType<__sveltets_Render<T>['props']>>): import('svelte').SvelteComponent<ReturnType<__sveltets_Render<T>['props']>, ReturnType<__sveltets_Render<T>['events']>, ReturnType<__sveltets_Render<T>['slots']>> & {
-        $$bindings?: ReturnType<__sveltets_Render<T>['bindings']>;
-    } & ReturnType<__sveltets_Render<T>['exports']>;
-    <T extends string>(internal: unknown, props: ReturnType<__sveltets_Render<T>['props']> & {}): ReturnType<__sveltets_Render<T>['exports']>;
-    z_$$bindings?: ReturnType<__sveltets_Render<any>['bindings']>;
+export type PinyaComboboxProps_<T extends string> = ReturnType<__sveltets_Render<T>['props']>;
+export type PinyaComboboxEvents<T extends string> = ReturnType<__sveltets_Render<T>['events']>;
+export type PinyaComboboxSlots<T extends string> = ReturnType<__sveltets_Render<T>['slots']>;
+/**
+ * Melt-based Combobox
+ *
+ * When migrating from Skeleton to Melt, change the value is no longer an array T[] but it's now T | undefined
+ */
+export default class PinyaCombobox<T extends string> extends SvelteComponentTyped<PinyaComboboxProps_<T>, PinyaComboboxEvents<T>, PinyaComboboxSlots<T>> {
 }
-declare const PinyaCombobox: $$IsomorphicComponent;
-type PinyaCombobox<T extends string> = InstanceType<typeof PinyaCombobox<T>>;
-export default PinyaCombobox;
+export {};
+//# 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":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAyED,cAAM,iBAAiB,CAAC,CAAC,SAAS,MAAM;IACpC,KAAK;IAGL,MAAM;;;IAGN,KAAK;CAGR;AACD,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,MAAM,IAAI,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC;AAC9F,MAAM,MAAM,mBAAmB,CAAC,CAAC,SAAS,MAAM,IAAI,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,QAAQ,CAAC,CAAC,CAAC;AAC/F,MAAM,MAAM,kBAAkB,CAAC,CAAC,SAAS,MAAM,IAAI,UAAU,CAAC,iBAAiB,CAAC,CAAC,CAAC,CAAC,OAAO,CAAC,CAAC,CAAC;AAE7F;;;;GAIG;AACH,MAAM,CAAC,OAAO,OAAO,aAAa,CAAC,CAAC,SAAS,MAAM,CAAE,SAAQ,oBAAoB,CAAC,mBAAmB,CAAC,CAAC,CAAC,EAAE,mBAAmB,CAAC,CAAC,CAAC,EAAE,kBAAkB,CAAC,CAAC,CAAC,CAAC;CACvJ"}

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.d.ts

@@ -1,8 +1,15 @@
-interface Props {
-    currentIndex?: number;
-    contentLength: number;
-    pageSize: number;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type NavigationControlProps = typeof __propDef.props;
+export type NavigationControlEvents = typeof __propDef.events;
+export type NavigationControlSlots = typeof __propDef.slots;
+export default class NavigationControl extends SvelteComponentTyped<NavigationControlProps, NavigationControlEvents, NavigationControlSlots> {
 }
-declare const NavigationControl: import("svelte").Component<Props, {}, "currentIndex" | "pageSize">;
-type NavigationControl = ReturnType<typeof NavigationControl>;
-export default NavigationControl;
+export {};
+//# 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":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAsED,QAAA,MAAM,SAAS;;;;;;CAA0C,CAAC;AAC1D,MAAM,MAAM,sBAAsB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAC5D,MAAM,MAAM,uBAAuB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC9D,MAAM,MAAM,sBAAsB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAE5D,MAAM,CAAC,OAAO,OAAO,iBAAkB,SAAQ,oBAAoB,CAAC,sBAAsB,EAAE,uBAAuB,EAAE,sBAAsB,CAAC;CAC3I"}

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

@@ -8,7 +8,7 @@
 		type ParsePageMetaCompareFn
 	} from "./PageMeta";
 	import { PinyaCard } from "../../elements/index";
-	import { localizeHref } from "../../../paraglide/runtime.js";
+	import { localizeHref } from "../../../external/paraglide/runtime.js";
 
 	interface Props {
 		fileList: Record<string, unknown>;
@@ -72,7 +72,7 @@
 <div class="navigation-wrapper">
 	{#if (title)}
 		<div>
-			<PinyaCard widthClass="">
+			<PinyaCard widthClass="w-full">
 				<h1 class="navigation-title">
 					{title}
 				</h1>
@@ -143,13 +143,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 +158,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

@@ -1,22 +1,15 @@
-import type { ParsnipOverall } from "../../../modules/parsnip/ParsnipOverall";
-import { type ParsePageMetaCompareFn } from "./PageMeta";
-interface Props {
-    fileList: Record<string, unknown>;
-    jsonList: Record<string, unknown>;
-    title?: string | undefined;
-    imageMap?: Map<string, string>;
-    shouldAllowControl?: boolean;
-    /**
-     * Should include a slash before and after the path
-     */
-    parentSubpath: string;
-    allowUpperControl?: boolean;
-    compareFn?: undefined | ParsePageMetaCompareFn;
-    pageSize?: number;
-    currentIndex?: number;
-    parsnipOverall?: ParsnipOverall;
-    parsnipBasePath?: string;
+import { SvelteComponentTyped } from "svelte";
+declare const __propDef: {
+    props: Record<string, never>;
+    events: {
+        [evt: string]: CustomEvent<any>;
+    };
+    slots: {};
+};
+export type NavigationMenuProps = typeof __propDef.props;
+export type NavigationMenuEvents = typeof __propDef.events;
+export type NavigationMenuSlots = typeof __propDef.slots;
+export default class NavigationMenu extends SvelteComponentTyped<NavigationMenuProps, NavigationMenuEvents, NavigationMenuSlots> {
 }
-declare const NavigationMenu: import("svelte").Component<Props, {}, "currentIndex" | "pageSize">;
-type NavigationMenu = ReturnType<typeof NavigationMenu>;
-export default NavigationMenu;
+export {};
+//# 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":"AAAA,OAAO,EAAE,oBAAoB,EAAE,MAAM,QAAQ,CAE5C;AAuID,QAAA,MAAM,SAAS;;;;;;CAA0C,CAAC;AAC1D,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AACzD,MAAM,MAAM,oBAAoB,GAAG,OAAO,SAAS,CAAC,MAAM,CAAC;AAC3D,MAAM,MAAM,mBAAmB,GAAG,OAAO,SAAS,CAAC,KAAK,CAAC;AAEzD,MAAM,CAAC,OAAO,OAAO,cAAe,SAAQ,oBAAoB,CAAC,mBAAmB,EAAE,oBAAoB,EAAE,mBAAmB,CAAC;CAC/H"}

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

@@ -93,3 +93,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":"AAEA,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;CACd;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,EAkG3D,CAAC;AAKF;;;;;;GAMG;AACH,eAAO,MAAM,qBAAqB,EAAE,sBAoBnC,CAAC"}

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

@@ -2,12 +2,12 @@
 	import type { ModalProps } from 'svelte-modals';
 	import { setMode, userPrefersMode } from 'mode-watcher';
 
-	import { m } from '../../../../paraglide/messages';
+	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 +58,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 +69,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

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