@turnipxenon/pineapple 5.0.0 → 5.2.0-alpha.1

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

@@ -1,42 +1,132 @@
-<!-- TODO: Documentation: consider documentation showcase -->
-
 <script lang="ts" generics="T extends string">
 	import type { PinyaComboboxProps } from "./PinyaComboboxProps";
 	import { Combobox } from "melt/builders";
+	import { SvelteSet } from "svelte/reactivity";
 
 	let {
 		// todo: fix this
-		contentZIndex = "auto",
-		value = $bindable(),
+		value = $bindable([]),
 		onValueChange = () => {
 		},
-		onValueChangeBase = undefined,
+		multiple = false,
+		name = "",
 		...props
 	}: PinyaComboboxProps<T> = $props();
 
-	const onValueChangeBaseImpl = (e: T | undefined) => {
-		value = e;
-		console.log("change", e);
-		onValueChange({
-			value: e,
-			items: props.data
-		});
-	};
+	const uid = $props.id();
+	const _name = $derived(name ? name : `combobox-${uid}`);
 
-	const combobox = new Combobox<T, false>({
-		value: props.defaultValue,
-		inputValue: function() {
-			return props.data.find((o) => o.value === value)?.label ?? "---";
+	const combobox = $derived(new Combobox({
+		value: (() => {
+			if (value) {
+				if (multiple) {
+					return value;
+				} else if (value.length > 0) {
+					return value[0];
+				}
+			}
+
+			return undefined;
+		})(),
+		// todo: investigate later why typescript says it's the wrong type?
+		onValueChange: (t: T | SvelteSet<T> | undefined) => {
+			if (t instanceof SvelteSet) {
+				if (t.size > 0) {
+					value = [...t];
+				} else {
+					value = [];
+				}
+			} else if (t) {
+				value = [t];
+			} else {
+				value = [];
+			}
+			onValueChange?.(value);
 		},
-		onValueChange: onValueChangeBase ?? onValueChangeBaseImpl,
-	});
+		inputValue: (() => {
+			if (value.length === props.data.length) {
+				return "All";
+			}
+			if (value.length === 0) {
+				return "---";
+			}
+			return props.data.filter(d => value.includes(d.value))
+				.map(d => d.label)
+				.join(", ");
+		})(),
+		multiple
+	}));
+
+	let inputValue = $state("");
+	let wrapperEl: HTMLDivElement | undefined = $state();
+
+	const onfocusin = (event: FocusEvent) => {
+		// Don't clear filter when navigating to/between options
+		const target = event.target as HTMLElement;
+		if (!target?.hasAttribute('data-melt-combobox-option')) {
+			inputValue = "";
+		}
+	};
+
+	const onblur = (event: FocusEvent) => {
+		// Don't reset if focus moved to another element within the wrapper
+		if (wrapperEl && event.relatedTarget instanceof Node && wrapperEl.contains(event.relatedTarget)) {
+			return;
+		}
+
+		if (value.length === props.data.length) {
+			inputValue = "All";
+			return;
+		}
+		if (value.length === 0) {
+			inputValue = "---";
+			return;
+		}
+
+		inputValue = props.data.filter(d => value.includes(d.value))
+			.map(d => d.label)
+			.join(", ");
+	};
+
+	const onOptionKeydown = (event: KeyboardEvent, index: number) => {
+		const options = wrapperEl?.querySelectorAll<HTMLElement>('[data-melt-combobox-option]');
+		if (!options) return;
+
+		if (event.key === 'ArrowDown') {
+			event.preventDefault();
+			options[index + 1]?.focus();
+		} else if (event.key === 'ArrowUp') {
+			event.preventDefault();
+			if (index === 0) {
+				wrapperEl?.querySelector<HTMLElement>('input')?.focus();
+			} else {
+				options[index - 1]?.focus();
+			}
+		}
+	};
+
+	const onInputKeydown = (event: KeyboardEvent) => {
+		if (event.key === 'Tab' && !event.shiftKey && combobox.open) {
+			event.preventDefault();
+			const firstOption = wrapperEl?.querySelector('[data-melt-combobox-option]') as HTMLElement | null;
+			if (firstOption) {
+				firstOption.focus();
+				return;
+			}
+		}
+		// Delegate to Melt's keydown handler for all other keys
+		(combobox.input as { onkeydown?: (e: KeyboardEvent) => void }).onkeydown?.(event);
+	};
 
 	const filtered = $derived.by(() => {
 		if (!combobox.touched) return props.data;
 		return props.data.filter((o) =>
-			o.value.toLowerCase().includes(combobox.inputValue.trim().toLowerCase())
+			o.value.toLowerCase().includes(inputValue.trim().toLowerCase())
+			|| o.label.toLowerCase().includes(inputValue.trim().toLowerCase())
 		);
 	});
+
+	const clearAll = () => value = [];
 </script>
 
 <!--
@@ -46,10 +136,29 @@ 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}`} {...props}>
-	<label {...combobox.label}>{props.label}</label>
+<div
+	class={`pinya-combobox-wrapper ${props.class}`}
+	{...props}
+	onfocusin={onfocusin}
+	onfocusout={onblur}
+	bind:this={wrapperEl}
+>
+	<div class="label-section">
+		<label {...combobox.label} for={_name}>{props.label}</label>
+		{#if value.length > 0 && multiple}
+			<button class="clear-btn" onclick={clearAll}>Clear all</button>
+		{:else }
+			<button class="clear-btn invisible" onclick={clearAll}>Clear all</button>
+		{/if}
+	</div>
 	<div class="pinya-combobox-control">
-		<input {...combobox.input} disabled={props.disabled} />
+		<input
+			{...combobox.input}
+			disabled={props.disabled}
+			name={_name}
+			bind:value={inputValue}
+			onkeydown={onInputKeydown}
+		/>
 		<button class="size-[3rem]" {...combobox.trigger} disabled={props.disabled}>
 			<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>
@@ -59,13 +168,13 @@ When migrating from Skeleton to Melt, change the value is no longer an array T[]
 
 
 	<div {...combobox.content}>
-		{#each filtered as option (option)}
-			<div {...combobox.getOption(option.value)}>
+		{#each filtered as option, i (option)}
+			<button {...combobox.getOption(option.value)} tabindex="0" onkeydown={(e) => onOptionKeydown(e, i)}>
 				{option.label}
 				{#if combobox.isSelected(option.value)}
 					✓
 				{/if}
-			</div>
+			</button>
 		{:else}
 			<span>No results found</span>
 		{/each}
@@ -95,11 +204,20 @@ When migrating from Skeleton to Melt, change the value is no longer an array T[]
 }
 [data-melt-combobox-content][data-open] {
   display: flex;
+  overflow-y: auto;
+  max-height: 8lh;
 }
 [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);
+  background: none;
+  border: none;
+  width: 100%;
+  text-align: left;
+  font: inherit;
+  color: inherit;
+  cursor: pointer;
 }
 [data-melt-combobox-content] [data-melt-combobox-option][aria-selected=true] {
   background-color: light-dark(var(--color-secondary-400), var(--color-secondary-600));
@@ -108,6 +226,7 @@ When migrating from Skeleton to Melt, change the value is no longer an array T[]
 .pinya-combobox-wrapper {
   display: flex;
   flex-direction: column;
+  gap: 0.2lh;
 }
 
 .pinya-combobox-control {
@@ -128,4 +247,28 @@ When migrating from Skeleton to Melt, change the value is no longer an array T[]
   text-overflow: ellipsis;
   padding: var(--spacing-2) var(--spacing-4);
   padding-right: 0;
+}
+
+.clear-btn {
+  font-size: 0.75rem;
+  padding: 0.25rem 0.5rem;
+  border-radius: var(--radius-md);
+  border: 1px solid var(--color-primary-500);
+  background: transparent;
+  color: var(--color-primary-500);
+  cursor: pointer;
+  transition: background-color 0.2s;
+}
+.clear-btn.invisible {
+  pointer-events: none;
+  opacity: 0;
+}
+
+.clear-btn:hover {
+  background: var(--color-primary-100);
+}
+
+.label-section {
+  display: flex;
+  gap: 0.5em;
 }</style>

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

@@ -1 +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"}
+{"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;AAG7F,iBAAS,QAAQ,CAAC,CAAC,SAAS,MAAM;WAwKL,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

@@ -9,13 +9,12 @@ export interface ValueChangeDetails<T extends string> {
 }
 export type PinyaComboboxProps<T extends string> = {
     data: GenericComboboxItem<T>[];
-    defaultValue: T | undefined;
-    value: T | undefined;
-    label: string;
-    placeholder: string;
-    onValueChange?: (selectedList: ValueChangeDetails<T>) => void;
-    onValueChangeBase?: (e: T | undefined) => void;
-    contentZIndex?: string;
+    value?: T[];
+    label?: string;
+    name?: string;
+    placeholder?: string;
+    onValueChange?: (selectedList: T[]) => void;
     disabled?: boolean;
+    multiple?: boolean;
 } & HTMLAttributes<HTMLDivElement>;
 //# sourceMappingURL=PinyaComboboxProps.d.ts.map

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

@@ -1 +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"}
+{"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;IAE9B,KAAK,CAAC,EAAE,CAAC,EAAE,CAAC;IACZ,KAAK,CAAC,EAAE,MAAM,CAAC;IACf,IAAI,CAAC,EAAE,MAAM,CAAC;IACd,WAAW,CAAC,EAAE,MAAM,CAAC;IACrB,aAAa,CAAC,EAAE,CAAC,YAAY,EAAE,CAAC,EAAE,KAAK,IAAI,CAAC;IAC5C,QAAQ,CAAC,EAAE,OAAO,CAAC;IACnB,QAAQ,CAAC,EAAE,OAAO,CAAC;CACnB,GAAG,cAAc,CAAC,cAAc,CAAC,CAAC"}

package/dist/ui/modules/experience/ExampleJob1.svelte

@@ -0,0 +1,79 @@
+<!-- TODO: Documentation: consider documentation showcase -->
+
+<script module lang="ts">
+	import { default as FourPartCard } from "../../components/FourPartCard.svelte";
+	import { TextChip } from "../../elements/TextChip";
+	import type { ProjectComponentProps } from "../../templates/SeaweedLayout/ProjectComponentProps";
+
+	const key = "Software Engineer at Old Company";
+	const dateStarted = "2022-01-01";
+	const dateFinished = "2024-12-31";
+	const tags = ["typescript", "svelte", "web"];
+
+	// note that we can cheat the regex by doing this!
+	// qt-web
+	export { component, key, dateStarted, dateFinished, tags };
+</script>
+
+<script lang="ts">
+
+</script>
+
+{#snippet component(props: ProjectComponentProps)}
+	<FourPartCard>
+		{#snippet headerCover()}
+			<div class="company-logo-placeholder">
+				<h1>CX</h1>
+			</div>
+		{/snippet}
+
+		{#snippet header()}
+			<h3>Software Engineer</h3>
+			<h4>Old Company</h4>
+			<p class="date-range">Jan 2022 - Dec 2024</p>
+		{/snippet}
+
+		<p>
+			<span class="qt-typescript">TypeScript</span> and
+			<span class="qt-svelte">Svelte</span>. Why would anyone hire that though?
+		</p>
+
+		<div class="text-chip-container">
+			{#each tags as t (t)}
+				<TextChip queryClass="qt-{t}">{t}</TextChip>
+			{/each}
+		</div>
+	</FourPartCard>
+{/snippet}
+
+<style>
+    :global {
+        .company-logo-placeholder {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+            width: 100%;
+            height: 100%;
+            min-height: 150px;
+            background: linear-gradient(135deg, var(--color-primary-500), var(--color-secondary-500));
+            color: white;
+            font-size: 2rem;
+            font-weight: bold;
+            border-top-right-radius: var(--radius-xl);
+            border-top-left-radius: var(--radius-xl);
+        }
+
+    }
+
+    .date-range {
+        font-size: 0.875rem;
+        color: var(--color-text-secondary);
+        margin-bottom: 0.5rem;
+    }
+
+    h4 {
+        margin-top: 0.25rem;
+        margin-bottom: 0.5rem;
+        color: var(--color-text-secondary);
+    }
+</style>

package/dist/ui/modules/experience/ExampleJob1.svelte.d.ts

@@ -0,0 +1,26 @@
+import type { ProjectComponentProps } from "../../templates/SeaweedLayout/ProjectComponentProps";
+declare const key = "Software Engineer at Old Company";
+declare const dateStarted = "2022-01-01";
+declare const dateFinished = "2024-12-31";
+declare const tags: string[];
+export { component, key, dateStarted, dateFinished, tags };
+declare const component: (props: ProjectComponentProps) => ReturnType<import("svelte").Snippet>;
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ExampleJob1: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ExampleJob1 = InstanceType<typeof ExampleJob1>;
+export default ExampleJob1;
+//# sourceMappingURL=ExampleJob1.svelte.d.ts.map

package/dist/ui/modules/experience/ExampleJob1.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExampleJob1.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/modules/experience/ExampleJob1.svelte.ts"],"names":[],"mappings":"AAKC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,uDAAuD,CAAC;AAEnG,QAAA,MAAM,GAAG,qCAAqC,CAAC;AAC/C,QAAA,MAAM,WAAW,eAAe,CAAC;AACjC,QAAA,MAAM,YAAY,eAAe,CAAC;AAClC,QAAA,MAAM,IAAI,UAAkC,CAAC;AAI7C,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,WAAW,EAAE,YAAY,EAAE,IAAI,EAAE,CAAC;AACzD,QAAA,MAAM,SAAS,GAAyB,OAAO,qBAAqB,KAAqB,UAAU,CAAC,OAAO,QAAQ,EAAE,OAAO,CAyBlG,CAAC;AAe9B,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,WAAW;;kBAA+E,CAAC;AAC/E,KAAK,WAAW,GAAG,YAAY,CAAC,OAAO,WAAW,CAAC,CAAC;AACtD,eAAe,WAAW,CAAC"}

package/dist/ui/modules/experience/ExampleJob2.svelte

@@ -0,0 +1,74 @@
+<!-- TODO: Documentation: consider documentation showcase -->
+
+<script module lang="ts">
+	import type { ProjectComponentProps } from "../../templates/SeaweedLayout/ProjectComponentProps";
+	import { default as FourPartCard } from "../../components/FourPartCard.svelte";
+	import { TextChip } from "../../elements/TextChip";
+
+	const key = "Senior Developer at Current Company";
+	const dateStarted = "2024-01-01";
+	// No dateFinished export - indicates ongoing position
+	// qt-ongoing, qt-systems, qt-performance, qt-infrastructure
+	const tags = ["ongoing", "rust", "systems", "performance", "infrastructure"];
+	export { component, key, dateStarted, tags };
+</script>
+
+{#snippet component(props: ProjectComponentProps)}
+	<FourPartCard>
+		{#snippet headerCover()}
+			<div class="company-logo-placeholder">
+				<h1>CC</h1>
+			</div>
+		{/snippet}
+
+		{#snippet header()}
+			<h3>Senior Developer</h3>
+			<h4>Current Company</h4>
+			<p class="date-range">Jan 2024 - Present</p>
+		{/snippet}
+
+		<p>
+			Currently working on high-performance systems using
+			<span class="qt-rust">Rust</span>.
+			Leading development of critical infrastructure components and mentoring junior developers to preach our love of
+			<span class="qt-rust">Rust</span>. Did I forget to mention <span class="qt-rust">RUST</span>?!?!
+		</p>
+
+		<div class="text-chip-container">
+			{#each tags as t (t)}
+				<TextChip queryClass="qt-{t}">{t}</TextChip>
+			{/each}
+		</div>
+	</FourPartCard>
+{/snippet}
+
+<style>
+	.company-logo-placeholder {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		width: 100%;
+		height: 100%;
+		min-height: 150px;
+		background: linear-gradient(135deg, var(--color-secondary-500), var(--color-tertiary-500));
+		color: white;
+		font-size: 2rem;
+		font-weight: bold;
+	}
+
+	.date-range {
+		font-size: 0.875rem;
+		color: var(--color-text-secondary);
+		margin-bottom: 0.5rem;
+	}
+
+	h4 {
+		margin-top: 0.25rem;
+		margin-bottom: 0.5rem;
+		color: var(--color-text-secondary);
+	}
+
+	.ongoing-badge {
+		margin-top: 0.5rem;
+	}
+</style>

package/dist/ui/modules/experience/ExampleJob2.svelte.d.ts

@@ -0,0 +1,25 @@
+import type { ProjectComponentProps } from "../../templates/SeaweedLayout/ProjectComponentProps";
+declare const component: (props: ProjectComponentProps) => ReturnType<import("svelte").Snippet>;
+declare const key = "Senior Developer at Current Company";
+declare const dateStarted = "2024-01-01";
+declare const tags: string[];
+export { component, key, dateStarted, tags };
+interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
+    new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
+        $$bindings?: Bindings;
+    } & Exports;
+    (internal: unknown, props: {
+        $$events?: Events;
+        $$slots?: Slots;
+    }): Exports & {
+        $set?: any;
+        $on?: any;
+    };
+    z_$$bindings?: Bindings;
+}
+declare const ExampleJob2: $$__sveltets_2_IsomorphicComponent<Record<string, never>, {
+    [evt: string]: CustomEvent<any>;
+}, {}, {}, string>;
+type ExampleJob2 = InstanceType<typeof ExampleJob2>;
+export default ExampleJob2;
+//# sourceMappingURL=ExampleJob2.svelte.d.ts.map

package/dist/ui/modules/experience/ExampleJob2.svelte.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"ExampleJob2.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/modules/experience/ExampleJob2.svelte.ts"],"names":[],"mappings":"AAGC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,uDAAuD,CAAC;AAGnG,QAAA,MAAM,SAAS,GAAyB,OAAO,qBAAqB,KAAqB,UAAU,CAAC,OAAO,QAAQ,EAAE,OAAO,CA2BhG,CAAC;AAE7B,QAAA,MAAM,GAAG,wCAAwC,CAAC;AAClD,QAAA,MAAM,WAAW,eAAe,CAAC;AAGjC,QAAA,MAAM,IAAI,UAAkE,CAAC;AAC7E,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,WAAW,EAAE,IAAI,EAAE,CAAC;AAW9C,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,WAAW;;kBAA+E,CAAC;AAC/E,KAAK,WAAW,GAAG,YAAY,CAAC,OAAO,WAAW,CAAC,CAAC;AACtD,eAAe,WAAW,CAAC"}

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

@@ -0,0 +1,3 @@
+export * as ExampleJob1 from './ExampleJob1.svelte';
+export * as ExampleJob2 from './ExampleJob2.svelte';
+//# sourceMappingURL=index.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/modules/experience/index.ts"],"names":[],"mappings":"AAAA,OAAO,KAAK,WAAW,MAAM,sBAAsB,CAAC;AACpD,OAAO,KAAK,WAAW,MAAM,sBAAsB,CAAC"}

package/dist/ui/modules/experience/index.js

@@ -0,0 +1,2 @@
+export * as ExampleJob1 from './ExampleJob1.svelte';
+export * as ExampleJob2 from './ExampleJob2.svelte';

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

@@ -16,16 +16,15 @@
 		{ label: "Tagalog", value: "tl" }
 	];
 
-	let selectedCountry = $state(getLocale());
+	let selectedCountry = $state([getLocale()]);
 
-	const onValueChange = (e: { value: ComboxData["value"] | undefined }) => {
-		if (!e.value) return;
+	const onValueChange = (e: ComboxData["value"][] | undefined) => {
+		if (!e || e.length === 0) return;
 
-		const data = comboboxData.find((d) => d.value === e.value);
-		if (data) {
-			selectedCountry = data.value;
+		const data = comboboxData.filter(v => e.includes(v.value));
+		if (data && data.length > 0) {
 			const pathname = deLocalizeHref(location.href);
-			location.href = localizeHref(pathname, { locale: data.value });
+			location.href = localizeHref(pathname, { locale: data[0].value });
 		}
 	};
 
@@ -34,8 +33,7 @@
 
 <PinyaCombobox
 	data={comboboxData}
-	value={selectedCountry}
-	defaultValue={selectedCountry}
+	bind:value={selectedCountry}
 	label="Select Language"
 	placeholder="Select Language"
 	{onValueChange}

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

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

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

@@ -3,6 +3,7 @@
 <script module lang="ts">
 	import HeaderHepCat from "../../../assets/temp/header-hep-cat.mp4";
 	import BitbucketIcon from "../../../assets/icons/bitbucket-icon.svg";
+	import ProjectDateBadge from "../../components/project-date-badge/ProjectDateBadge.svelte";
 	import type { ProjectComponentProps } from "../../templates/SeaweedLayout/ProjectComponentProps";
 	import { default as FourPartCard } from "../../components/FourPartCard.svelte";
 	import { default as ImageIcon } from "../../elements/ImageIcon.svelte";
@@ -11,7 +12,12 @@
 	import { ButtonVariant } from "../../elements/PinyaButtonCommon/ButtonVariant";
 
 	const key = "Hepcat";
-	export { component, key };
+	const dateStarted = "2020-01-01";
+	const dateFinished = "2020-04-15";
+	const priority = 100;
+	const tags = ["unity", "csharp", "game", "rhythm", "rpgmaker"];
+	// type SnippetMeta at src/lib/ui/templates/SeaweedLayout/props.ts:6
+	export { component, key, dateStarted, dateFinished, tags, priority };
 </script>
 
 {#snippet component(props: ProjectComponentProps)}
@@ -48,6 +54,13 @@
 			files.
 		</p>
 
+		<ProjectDateBadge
+			dateStarted={props.snippetMeta?.dateStarted}
+			dateFinished={props.snippetMeta?.dateFinished}
+			isOngoing={props.snippetMeta?.tags?.includes("ongoing") ?? false}
+			commitCount={props.snippetMeta?.commitCount}
+			gitRepoLink={props.snippetMeta?.gitRepoLink}
+		/>
 
 		<section class="game-link-section">
 			<PinyaButton
@@ -63,6 +76,7 @@
 				<ImageIcon alt="itch.io icon" src={ItchLogoHotLink}></ImageIcon>
 			</PinyaButton>
 		</section>
+
 	</FourPartCard>
 {/snippet}
 

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

@@ -1,7 +1,11 @@
 import type { ProjectComponentProps } from "../../templates/SeaweedLayout/ProjectComponentProps";
 declare const component: (props: ProjectComponentProps) => ReturnType<import("svelte").Snippet>;
 declare const key = "Hepcat";
-export { component, key };
+declare const dateStarted = "2020-01-01";
+declare const dateFinished = "2020-04-15";
+declare const priority = 100;
+declare const tags: string[];
+export { component, key, dateStarted, dateFinished, tags, priority };
 interface $$__sveltets_2_IsomorphicComponent<Props extends Record<string, any> = any, Events extends Record<string, any> = any, Slots extends Record<string, any> = any, Exports = {}, Bindings = string> {
     new (options: import('svelte').ComponentConstructorOptions<Props>): import('svelte').SvelteComponent<Props, Events, Slots> & {
         $$bindings?: Bindings;

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

@@ -1 +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"}
+{"version":3,"file":"Hepcat.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/modules/projects/Hepcat.svelte.ts"],"names":[],"mappings":"AAMC,OAAO,KAAK,EAAE,qBAAqB,EAAE,MAAM,uDAAuD,CAAC;AAMnG,QAAA,MAAM,SAAS,GAAyB,OAAO,qBAAqB,KAAqB,UAAU,CAAC,OAAO,QAAQ,EAAE,OAAO,CA0ChG,CAAC;AAE7B,QAAA,MAAM,GAAG,WAAW,CAAC;AACrB,QAAA,MAAM,WAAW,eAAe,CAAC;AACjC,QAAA,MAAM,YAAY,eAAe,CAAC;AAClC,QAAA,MAAM,QAAQ,MAAM,CAAC;AACrB,QAAA,MAAM,IAAI,UAAoD,CAAC;AAE/D,OAAO,EAAE,SAAS,EAAE,GAAG,EAAE,WAAW,EAAE,YAAY,EAAE,IAAI,EAAE,QAAQ,EAAE,CAAC;AAYtE,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"}