@turnipxenon/pineapple 5.0.0-alpha.9 → 5.1.0

package/README.md

@@ -6,13 +6,13 @@ NPM package: https://www.npmjs.com/package/@turnipxenon/pineapple
 
 ## Developing
 
-Once you've created a project and installed dependencies with `yarn`, start a development server:
+Once you've created a project and installed dependencies with `pnpm`, start a development server:
 
 ```bash
-yarn dev
+pnpm dev
 
 # or start the server and open the app in a new browser tab
-yarn dev -- --open
+pnpm dev -- --open
 ```
 
 ## Building
@@ -20,10 +20,10 @@ yarn dev -- --open
 To create a production version of your app:
 
 ```bash
-yarn build
+pnpm build
 ```
 
-You can preview the production build with `yarn preview`.
+You can preview the production build with `pnpm preview`.
 
 > To deploy your app, you may need to install an [adapter](https://kit.svelte.dev/docs/adapters) for your target environment.
 
@@ -35,7 +35,7 @@ TODO: If you're curious how to install this on a fresh package or a package not
 ## Migration from v2 to v3
 
 ```bash
-yarn add @turnipxenon2/pineapple
+pnpm add @turnipxenon2/pineapple
 ```
 
 **Manual steps**
@@ -119,13 +119,13 @@ kit: {
 
 ## Local linking
 
-1. In pineapple, run `yarn link`
-2. In seaweed2, run `yarn unlink @turnipxenon/pineapple`
+1. In pineapple, run `pnpm link`
+2. In seaweed2, run `pnpm link @turnipxenon/pineapple`
 
 **To unlink:**
 
-1. In seaweed2, run `yarn unlink @turnipxenon/pineapple`
-2. In pineapple, run `yarn unlink`
+1. In seaweed2, run `pnpm unlink @turnipxenon/pineapple`
+2. In pineapple, run `pnpm unlink`
 3. **If unlinking, remember to restart PC cause Windows symlinking is tricky**
 
-To reinstall a single package: `yarn add @turnipxenon/pineapple --no-package-lock --no-save`
+To reinstall a single package: `pnpm add @turnipxenon/pineapple --no-package-lock --no-save`

package/dist/index.d.ts

@@ -13,4 +13,5 @@ export { default as BlogTemplate } from "./ui/templates/blog_template/BlogTempla
 export { default as UniversalOverlay } from "./ui/modules/universal-overlay/UniversalOverlay.svelte";
 export { dialogManager } from "./components/dialog_manager/DialogManager";
 export * from "./modules/parsnip/index";
+export * from "./util/context/pineappleBaseContextDefinitions.svelte";
 //# sourceMappingURL=index.d.ts.map

package/dist/index.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"AAEA,cAAc,sCAAsC,CAAC;AACrD,cAAc,sCAAsC,CAAC;AACrD,cAAc,sBAAsB,CAAC;AACrC,cAAc,gDAAgD,CAAC;AAC/D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,yCAAyC,CAAC;AACxD,cAAc,sCAAsC,CAAC;AACrD,cAAc,sCAAsC,CAAC;AACrD,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAE5B,YAAY,EAAE,cAAc,EAAE,MAAM,+CAA+C,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qDAAqD,CAAC;AAC9F,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2DAA2D,CAAC;AACxG,OAAO,EAAE,aAAa,EAAE,MAAM,8CAA8C,CAAC;AAE7E,cAAc,yBAAyB,CAAC"}
+{"version":3,"file":"index.d.ts","sourceRoot":"","sources":["../src/lib/index.ts"],"names":[],"mappings":"AAEA,cAAc,sCAAsC,CAAC;AACrD,cAAc,sCAAsC,CAAC;AACrD,cAAc,sBAAsB,CAAC;AACrC,cAAc,gDAAgD,CAAC;AAC/D,cAAc,2CAA2C,CAAC;AAC1D,cAAc,yCAAyC,CAAC;AACxD,cAAc,sCAAsC,CAAC;AACrD,cAAc,sCAAsC,CAAC;AACrD,cAAc,aAAa,CAAC;AAC5B,cAAc,aAAa,CAAC;AAE5B,YAAY,EAAE,cAAc,EAAE,MAAM,+CAA+C,CAAC;AACpF,OAAO,EAAE,OAAO,IAAI,YAAY,EAAE,MAAM,qDAAqD,CAAC;AAC9F,OAAO,EAAE,OAAO,IAAI,gBAAgB,EAAE,MAAM,2DAA2D,CAAC;AACxG,OAAO,EAAE,aAAa,EAAE,MAAM,8CAA8C,CAAC;AAE7E,cAAc,yBAAyB,CAAC;AACxC,cAAc,uDAAuD,CAAA"}

package/dist/index.js

@@ -13,3 +13,4 @@ export { default as BlogTemplate } from "./ui/templates/blog_template/BlogTempla
 export { default as UniversalOverlay } from "./ui/modules/universal-overlay/UniversalOverlay.svelte";
 export { dialogManager } from "./components/dialog_manager/DialogManager";
 export * from "./modules/parsnip/index";
+export * from "./util/context/pineappleBaseContextDefinitions.svelte";

package/dist/remoteIndex.remote.d.ts

@@ -0,0 +1,2 @@
+export * from "./util/getParsnipData.remote";
+//# sourceMappingURL=remoteIndex.remote.d.ts.map

package/dist/remoteIndex.remote.d.ts.map

@@ -0,0 +1 @@
+{"version":3,"file":"remoteIndex.remote.d.ts","sourceRoot":"","sources":["../src/lib/remoteIndex.remote.ts"],"names":[],"mappings":"AAEA,cAAc,8BAA8B,CAAC"}

package/dist/remoteIndex.remote.js

@@ -0,0 +1,2 @@
+// noinspection JSUnusedGlobalSymbols
+export * from "./util/getParsnipData.remote";

package/dist/styles/app.css

@@ -76,88 +76,6 @@ a.external-link {
     }
 }
 
-/*https://shiki.style/guide/dual-themes*/
-html.dark .shiki,
-html.dark .shiki span {
-    color: var(--shiki-dark) !important;
-    background-color: var(--shiki-dark-bg) !important;
-    /* Optional, if you also want font styles */
-    font-style: var(--shiki-dark-font-style) !important;
-    font-weight: var(--shiki-dark-font-weight) !important;
-    text-decoration: var(--shiki-dark-text-decoration) !important;
-}
-
-.inline-code {
-    background-color: aliceblue;
-    padding: 0.2rem;
-    border-radius: 0.2rem;
-}
-
-html.dark .inline-code {
-    background-color: #303446;
-}
-
-.shiki {
-    span {
-        white-space: pre-wrap;
-        word-wrap: break-word;
-    }
-}
-
-/* region shiki copy button */
-pre:has(code) {
-    position: relative;
-}
-
-pre button.copy {
-    position: absolute;
-    right: 16px;
-    top: 16px;
-    height: 28px;
-    width: 28px;
-    padding: 0;
-    display: flex;
-
-    & span {
-        width: 100%;
-        aspect-ratio: 1 / 1;
-        background-repeat: no-repeat;
-        background-position: center;
-        background-size: cover;
-    }
-
-    & .ready {
-        background-image: url("$pkg/assets/icons/icon-copy-light-contrast.svg");
-        /*todo*/
-        /*@variant dark {*/
-        /*    background-image: url("$pkg/assets/icons/icon-copy-dark-contrast.svg");*/
-        /*}*/
-    }
-
-    & .success {
-        display: none;
-        background-image: url("$pkg/assets/icons/icon-check-light-contrast.svg");
-
-        /*todo: migration*/
-        /*@variant dark {*/
-        /*    background-image: url("$pkg/assets/icons/icon-check-dark-contrast.svg");*/
-        /*}*/
-    }
-
-    &.copied {
-        & .success {
-            display: block;
-        }
-
-        & .ready {
-            display: none;
-        }
-    }
-}
-
-/* endregion shiki copy button */
-
-
 ul + h2, ol + h2 {
     margin-top: 1rlh;
 }

package/dist/styles/tailwind.css

@@ -536,9 +536,6 @@
   .ig-textarea::placeholder {
     color:var(--color-surface-700-300)
   }
-  ::selection {
-    background-color:#73737380
-  }
   :disabled,
   .disabled {
     opacity:.5
@@ -2715,15 +2712,6 @@ a.external-link {
 #toast-progress::-moz-progress-bar {
   background:rgba(var(--color-secondary-500))
 }
-html.dark .shiki,
-html.dark .shiki span {
-  color:var(--shiki-dark)!important;
-  background-color:var(--shiki-dark-bg)!important;
-  font-style:var(--shiki-dark-font-style)!important;
-  font-weight:var(--shiki-dark-font-weight)!important;
-  -webkit-text-decoration:var(--shiki-dark-text-decoration)!important;
-  text-decoration:var(--shiki-dark-text-decoration)!important
-}
 .inline-code {
   background-color:#f0f8ff;
   border-radius:.2rem;

package/dist/styles/turnip-theme.css

@@ -217,6 +217,7 @@
 
 html.dark {
     --header-color: var(--color-primary-100);
+    --body-background-color: var(--body-background-color-dark);
     /*todo: migration*/
     /*@variant turnip {*/
     /*    --border-card: 0;*/

package/dist/ui/components/FourPartCard.svelte

@@ -51,6 +51,15 @@
     :global {
         .pinya-four-part-card.pinya-card {
             padding: 0;
+
+            .card-header-cover > img {
+                border-top-right-radius: var(--radius-xl);
+                border-top-left-radius: var(--radius-xl);
+            }
         }
+
+		    html.dark .pinya-four-part-card {
+				    border: 0;
+		    }
     }
 </style>

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

@@ -11,6 +11,7 @@
 </script>
 
 <script lang="ts">
+	import { browser } from "$app/environment";
 	import { onDestroy, onMount } from "svelte";
 
 	let toasterRoot: HTMLDivElement;
@@ -39,7 +40,9 @@
 	});
 
 	onDestroy(() => {
-		if (observer) observer.disconnect();
+		if (browser) {
+			if (observer) observer.disconnect();
+		}
 	});
 </script>
 

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

@@ -1 +1 @@
-{"version":3,"file":"MeltToaster.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/components/MeltToaster/MeltToaster.svelte.ts"],"names":[],"mappings":"AAGC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,8CAA8C,CAAC;AAClF,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAKxC,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAmB,CAAC;AA4D1C;;;;GAIG;AACH,QAAA,MAAM,WAAW,2DAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}
+{"version":3,"file":"MeltToaster.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/components/MeltToaster/MeltToaster.svelte.ts"],"names":[],"mappings":"AAGC,OAAO,KAAK,EAAE,aAAa,EAAE,MAAM,8CAA8C,CAAC;AAClF,OAAO,EAAE,OAAO,EAAE,MAAM,eAAe,CAAC;AAKxC,eAAO,MAAM,QAAQ;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;CAAmB,CAAC;AAgE1C;;;;GAIG;AACH,QAAA,MAAM,WAAW,2DAAwC,CAAC;AAC1D,KAAK,WAAW,GAAG,UAAU,CAAC,OAAO,WAAW,CAAC,CAAC;AAClD,eAAe,WAAW,CAAC"}

package/dist/ui/components/NestedNavigation.svelte

@@ -48,7 +48,6 @@
 				let bestMatch: string | null = null;
 
 				layout.forEach(site => {
-					console.log(`Current path (${currentPath}) vs layout path (${site.relativeLink})`);
 					const link = site.relativeLink;
 					if (!link) {
 						return;

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

@@ -1 +1 @@
-{"version":3,"file":"NestedNavigation.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ui/components/NestedNavigation.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,MAAM,CAAC;AAKrC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGrD,KAAK,gBAAgB,GAAI;IACxB,MAAM,EAAE,QAAQ,EAAE,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,YAAY,CAAC,EAAE,UAAU,GAAG,aAAa,GAAG,WAAW,CAAA;CAEvD,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,IAAI,CAAC,CAAC;AAqGhD,QAAA,MAAM,gBAAgB,sDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}
+{"version":3,"file":"NestedNavigation.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ui/components/NestedNavigation.svelte.ts"],"names":[],"mappings":"AAIA,OAAO,KAAK,EAAE,QAAQ,EAAE,MAAM,MAAM,CAAC;AAKrC,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,iBAAiB,CAAC;AAGrD,KAAK,gBAAgB,GAAI;IACxB,MAAM,EAAE,QAAQ,EAAE,CAAC;IACnB,KAAK,EAAE,MAAM,CAAC;IACd,KAAK,CAAC,EAAE,MAAM,IAAI,CAAC;IACnB,YAAY,CAAC,EAAE,UAAU,GAAG,aAAa,GAAG,WAAW,CAAA;CAEvD,GAAG,IAAI,CAAC,cAAc,CAAC,cAAc,CAAC,EAAE,IAAI,CAAC,CAAC;AAoGhD,QAAA,MAAM,gBAAgB,sDAAwC,CAAC;AAC/D,KAAK,gBAAgB,GAAG,UAAU,CAAC,OAAO,gBAAgB,CAAC,CAAC;AAC5D,eAAe,gBAAgB,CAAC"}

package/dist/ui/components/SortDropdown.svelte

@@ -0,0 +1,50 @@
+<script lang="ts">
+	import PinyaCombobox from "../elements/pinya-combobox/PinyaCombobox.svelte";
+	import type { GenericComboboxItem } from "../elements/pinya-combobox/PinyaComboboxProps";
+	import { SectionType } from "../templates/SeaweedLayout/props";
+
+	interface SortDropdownProps {
+		sortBy: string[];              // Current sort value (bindable)
+		sectionType: SectionType;    // Determines available sort options
+	}
+
+	let {
+		sortBy = $bindable(["default"]),
+		sectionType = SectionType.Projects
+	}: SortDropdownProps = $props();
+
+	const projectSortOptions: GenericComboboxItem<string>[] = [
+		{ label: "Default order", value: "default" },
+		{ label: "Most recently finished", value: "date-desc" },
+		{ label: "Oldest finished", value: "date-asc" },
+		{ label: "Longest projects", value: "duration-desc" },
+		{ label: "Shortest projects", value: "duration-asc" }
+	];
+
+	const experienceSortOptions: GenericComboboxItem<string>[] = [
+		{ label: "Default order", value: "default" },
+		{ label: "Most recent first", value: "date-desc" },
+		{ label: "Oldest first", value: "date-asc" }
+	];
+
+	const sortOptions = $derived(
+		sectionType === SectionType.Experience
+			? experienceSortOptions
+			: projectSortOptions
+	);
+</script>
+
+<div class="sort-dropdown">
+	<PinyaCombobox
+		data={sortOptions}
+		bind:value={sortBy}
+		label="Sort by"
+		placeholder="Select sort order"
+	/>
+</div>
+
+<style>
+    .sort-dropdown {
+        min-width: 200px;
+    }
+</style>

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

@@ -0,0 +1,9 @@
+import { SectionType } from "../templates/SeaweedLayout/props";
+interface SortDropdownProps {
+    sortBy: string[];
+    sectionType: SectionType;
+}
+declare const SortDropdown: import("svelte").Component<SortDropdownProps, {}, "sortBy">;
+type SortDropdown = ReturnType<typeof SortDropdown>;
+export default SortDropdown;
+//# sourceMappingURL=SortDropdown.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"SortDropdown.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ui/components/SortDropdown.svelte.ts"],"names":[],"mappings":"AAKA,OAAO,EAAE,WAAW,EAAE,MAAM,uCAAuC,CAAC;AAGnE,UAAU,iBAAiB;IAC1B,MAAM,EAAE,MAAM,EAAE,CAAC;IACjB,WAAW,EAAE,WAAW,CAAC;CACzB;AAyCF,QAAA,MAAM,YAAY,6DAAwC,CAAC;AAC3D,KAAK,YAAY,GAAG,UAAU,CAAC,OAAO,YAAY,CAAC,CAAC;AACpD,eAAe,YAAY,CAAC"}

package/dist/ui/components/TagFilter.svelte

@@ -0,0 +1,32 @@
+<script lang="ts">
+	import PinyaCombobox from "../elements/pinya-combobox/PinyaCombobox.svelte";
+
+	interface TagFilterProps {
+		allTags: string[];           // All available tags
+		selectedTags: string[];      // Currently selected tags (bindable)
+		label?: string;              // Optional label
+	}
+
+	let {
+		allTags,
+		selectedTags = $bindable([]),
+		label = "Filter by tags"
+	}: TagFilterProps = $props();
+</script>
+
+<div class="tag-filter">
+	<PinyaCombobox
+		bind:value={selectedTags}
+		data={allTags.map(t => ({value: t, label: t}))}
+		multiple={true}
+		{label}
+	/>
+</div>
+
+<style>
+    .tag-filter {
+        display: flex;
+        flex-direction: column;
+        gap: 0.5rem;
+    }
+</style>

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

@@ -0,0 +1,9 @@
+interface TagFilterProps {
+    allTags: string[];
+    selectedTags: string[];
+    label?: string;
+}
+declare const TagFilter: import("svelte").Component<TagFilterProps, {}, "selectedTags">;
+type TagFilter = ReturnType<typeof TagFilter>;
+export default TagFilter;
+//# sourceMappingURL=TagFilter.svelte.d.ts.map

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

@@ -0,0 +1 @@
+{"version":3,"file":"TagFilter.svelte.d.ts","sourceRoot":"","sources":["../../../src/lib/ui/components/TagFilter.svelte.ts"],"names":[],"mappings":"AAMC,UAAU,cAAc;IACvB,OAAO,EAAE,MAAM,EAAE,CAAC;IAClB,YAAY,EAAE,MAAM,EAAE,CAAC;IACvB,KAAK,CAAC,EAAE,MAAM,CAAC;CACf;AAoBF,QAAA,MAAM,SAAS,gEAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/ui/components/accordion/PinyaAccordion.svelte

@@ -4,7 +4,7 @@
 	import { Accordion } from "melt/builders";
 	import { setContext } from "svelte";
 	import type { SvelteSet } from "svelte/reactivity";
-	import { accordionContextKey, type AccordionContext } from "./accordionContext";
+	import { type AccordionContext, accordionContextKey } from "./accordionContext";
 	import type { PinyaAccordionProps } from "./PinyaAccordionProps";
 
 	let {
@@ -13,6 +13,7 @@
 		multiple = true,
 		...props
 	}: PinyaAccordionProps = $props();
+
 	let accordion = $derived(new Accordion({
 		value: (() => {
 			if (openItems) {
@@ -33,10 +34,11 @@
 			} else {
 				openItems = [];
 			}
-		}, multiple
+		},
+		multiple,
 	}));
 	setContext<AccordionContext>(accordionContextKey, (key) => accordion.getItem(key));
-	setContext<string[]>('accordionOpenItems', openItems);
+	setContext<string[]>("accordionOpenItems", openItems);
 </script>
 
 <div {...props} class={`pinya-accordion-root ${props.class ?? ''}`} {...accordion.root}>

package/dist/ui/components/accordion/PinyaAccordion.svelte.d.ts.map

@@ -1 +1 @@
-{"version":3,"file":"PinyaAccordion.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/components/accordion/PinyaAccordion.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAmDjE,QAAA,MAAM,cAAc,kEAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}
+{"version":3,"file":"PinyaAccordion.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/components/accordion/PinyaAccordion.svelte.ts"],"names":[],"mappings":"AAOA,OAAO,KAAK,EAAE,mBAAmB,EAAE,MAAM,uBAAuB,CAAC;AAqDjE,QAAA,MAAM,cAAc,kEAAwC,CAAC;AAC7D,KAAK,cAAc,GAAG,UAAU,CAAC,OAAO,cAAc,CAAC,CAAC;AACxD,eAAe,cAAc,CAAC"}

package/dist/ui/elements/CodeBlock/CodeBlock.svelte

@@ -1,23 +1,25 @@
 <!-- @component Code Block based on: https://shiki.style/ and https://www.skeleton.dev/docs/integrations/code-block/svelte/ -->
 
 <script module lang="ts">
+	import { transformerNotationDiff } from "@shikijs/transformers";
 	import { addCopyButton } from "shiki-transformer-copy-button";
 	import { createHighlighterCoreSync } from "shiki/core";
 	import { createJavaScriptRegexEngine } from "shiki/engine/javascript";
-	// Themes
-	// https://shiki.style/themes
-	import themeLight from "shiki/themes/catppuccin-latte.mjs";
-	import themeDark from "shiki/themes/catppuccin-frappe.mjs";
 	// Languages
 	// https://shiki.style/languages
-	import console from "shiki/langs/console.mjs";
-	import html from "shiki/langs/html.mjs";
+	import shikiConsole from "shiki/langs/console.mjs";
 	import css from "shiki/langs/css.mjs";
+	import html from "shiki/langs/html.mjs";
 	import js from "shiki/langs/javascript.mjs";
-	import ts from "shiki/langs/typescript.mjs";
+	import json from "shiki/langs/json.mjs";
 	import markdown from "shiki/langs/markdown.mjs";
-	import xml from "shiki/langs/xml.mjs";
 	import svelte from "shiki/langs/svelte.mjs";
+	import ts from "shiki/langs/typescript.mjs";
+	import xml from "shiki/langs/xml.mjs";
+	// Themes
+	// https://shiki.style/themes
+	import themeDark from "shiki/themes/catppuccin-frappe.mjs";
+	import themeLight from "shiki/themes/catppuccin-latte.mjs";
 
 	// https://shiki.style/guide/sync-usage
 	const shiki = createHighlighterCoreSync({
@@ -25,11 +27,12 @@
 		// Implement your import theme.
 		themes: [themeLight, themeDark],
 		// Implement your imported and supported languages.
-		langs: [console, html, css, js, ts, markdown, xml, svelte]
+		langs: [shikiConsole, html, css, js, ts, markdown, xml, svelte, json]
 	});
 </script>
 
 <script lang="ts">
+	import { onMount } from "svelte";
 	import type { CodeBlockProps } from "./CodeBlockProps";
 
 	let {
@@ -54,6 +57,7 @@
 			dark: "catppuccin-frappe"
 		},
 		transformers: [
+			transformerNotationDiff(),
 			addCopyButton({ toggle: 2000 })
 		]
 	}));
@@ -67,13 +71,158 @@
 </div>
 
 <style>
-	:global {
-			.pinya-code-block {
-					margin-bottom: 1rlh;
-			}
-
-			h2 + .pinya-code-block {
-					margin-top: 0.5rlh;
-			}
-	}
+    :global {
+        .pinya-code-block {
+            margin-bottom: 1rlh;
+        }
+
+        /*https://shiki.style/guide/dual-themes*/
+
+        html.dark .shiki,
+        html.dark .shiki > span {
+            color: var(--shiki-dark);
+            background-color: var(--shiki-dark-bg);
+            /* Optional, if you also want font styles */
+            font-style: var(--shiki-dark-font-style);
+            font-weight: var(--shiki-dark-font-weight);
+            text-decoration: var(--shiki-dark-text-decoration);
+        }
+
+
+        html.dark .shiki {
+            color: var(--shiki-dark) !important;
+            background-color: var(--shiki-dark-bg) !important;
+            font-style: var(--shiki-dark-font-style) !important;
+            font-weight: var(--shiki-dark-font-weight) !important;
+            -webkit-text-decoration: var(--shiki-dark-text-decoration) !important;
+            text-decoration: var(--shiki-dark-text-decoration) !important;
+
+		        span[style*="color:#4C4F69"] {
+                color: oklch(0.835 0.043 279.325) !important;
+            }
+        }
+
+		    html.dark .shiki.has-diff span.diff.add {
+            background-color: rgba(0, 255, 0, 0.05);
+		    }
+
+        .inline-code {
+            background-color: aliceblue;
+            padding: 0.2rem;
+            border-radius: 0.2rem;
+        }
+
+        .shiki {
+            span {
+                white-space: pre-wrap;
+                word-wrap: break-word;
+            }
+
+            &.has-diff {
+                padding-inline-start: 0;
+                padding-inline-end: 0;
+
+                code {
+                    display: block;
+
+                    & > span {
+                        display: block;
+                        padding-inline-start: 2em;
+                        padding-inline-end: 1em;
+                        margin-block-end: -1lh;
+
+                        &:last-child {
+                            margin-block-end: 0;
+                        }
+                    }
+                }
+
+                span.diff.remove {
+                    background-color: rgba(255, 0, 0, 0.15);
+
+                    &::before {
+                        display: block;
+                        position: absolute;
+                        content: "-";
+                        margin-inline-start: calc((var(--spacing) * -4) - 2em);
+                        padding-inline-start: 1.75em;
+                        font-weight: bold;
+                        pointer-events: none;
+                    }
+                }
+
+                span.diff.add {
+                    background-color: rgba(0, 255, 0, 0.15);
+
+                    &::before {
+                        display: block;
+                        position: absolute;
+                        content: "+";
+                        margin-inline-start: calc((var(--spacing) * -4) - 2em);
+                        padding-inline-start: 1.75em;
+                        font-weight: bold;
+                        pointer-events: none;
+                    }
+                }
+            }
+        }
+
+        /* region shiki copy button */
+
+        pre:has(code) {
+            position: relative;
+        }
+
+        pre button.copy {
+            position: absolute;
+            right: 16px;
+            top: 16px;
+            height: 28px;
+            width: 28px;
+            padding: 0;
+            display: flex;
+
+            & span {
+                width: 100%;
+                aspect-ratio: 1 / 1;
+                background-repeat: no-repeat;
+                background-position: center;
+                background-size: cover;
+            }
+
+            & .ready {
+                background-image: url("$pkg/assets/icons/icon-copy-light-contrast.svg");
+                /*todo*/
+                /*@variant dark {*/
+                /*    background-image: url("$pkg/assets/icons/icon-copy-dark-contrast.svg");*/
+                /*}*/
+            }
+
+            & .success {
+                display: none;
+                background-image: url("$pkg/assets/icons/icon-check-light-contrast.svg");
+
+                /*todo: migration*/
+                /*@variant dark {*/
+                /*    background-image: url("$pkg/assets/icons/icon-check-dark-contrast.svg");*/
+                /*}*/
+            }
+
+            &.copied {
+                & .success {
+                    display: block;
+                }
+
+                & .ready {
+                    display: none;
+                }
+            }
+        }
+
+        /* endregion shiki copy button */
+
+        h2 + .pinya-code-block {
+            margin-top: 0.5rlh;
+        }
+    }
 </style>

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

@@ -1 +1 @@
-{"version":3,"file":"CodeBlock.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/elements/CodeBlock/CodeBlock.svelte.ts"],"names":[],"mappings":"AA+BA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AA6CvD,kHAAkH;AAClH,QAAA,MAAM,SAAS,oDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}
+{"version":3,"file":"CodeBlock.svelte.d.ts","sourceRoot":"","sources":["../../../../src/lib/ui/elements/CodeBlock/CodeBlock.svelte.ts"],"names":[],"mappings":"AAkCA,OAAO,KAAK,EAAE,cAAc,EAAE,MAAM,kBAAkB,CAAC;AA+CvD,kHAAkH;AAClH,QAAA,MAAM,SAAS,oDAAwC,CAAC;AACxD,KAAK,SAAS,GAAG,UAAU,CAAC,OAAO,SAAS,CAAC,CAAC;AAC9C,eAAe,SAAS,CAAC"}

package/dist/ui/elements/PineappleSwitch.svelte

@@ -5,14 +5,14 @@
 
 	interface Props {
 		checked?: boolean;
-		name: string;
+		name?: string;
 		onChange?: ((val: boolean) => void);
 		children?: Snippet;
 	}
 
 	let {
 		checked = $bindable(false),
-		name,
+		name = undefined,
 		onChange = undefined,
 		children = undefined
 	}: Props = $props();