From 467098a9e46bbf8de7c918d9920ca8d47982d816 Mon Sep 17 00:00:00 2001
From: Branden J Brown <zephyrtronium@gmail.com>
Date: Fri, 3 Apr 2026 17:56:46 -0400
Subject: [PATCH] zenno/lib: spark component

---
 zenno/src/lib/Spark.svelte  | 70 +++++++++++++++++++++++++++++++++++++
 zenno/src/lib/data/spark.ts | 53 ++++++++++++++++++++++++++++
 zenno/src/lib/legacy.ts     |  2 +-
 3 files changed, 124 insertions(+), 1 deletion(-)
 create mode 100644 zenno/src/lib/Spark.svelte
 create mode 100644 zenno/src/lib/data/spark.ts

diff --git a/zenno/src/lib/Spark.svelte b/zenno/src/lib/Spark.svelte
new file mode 100644
index 0000000..df6653a
--- /dev/null
+++ b/zenno/src/lib/Spark.svelte
@@ -0,0 +1,70 @@
+<script lang="ts">
+	import { sparks } from '$lib/data/spark';
+
+	interface Props {
+		spark: number;
+		region?: keyof typeof sparks;
+	}
+
+	const { spark, region = 'global' }: Props = $props();
+
+	const cur = $derived(sparks[region].find((s) => s.spark_id === spark));
+	const curClass = $derived.by(() => {
+		if (cur == null) {
+			return [];
+		}
+		switch (cur.type) {
+			case 1:
+				return ['stat'];
+			case 2:
+				return ['aptitude'];
+			case 3:
+				return ['unique'];
+			case 5:
+			case 4:
+			case 6:
+			case 10:
+			case 8:
+			case 11:
+			case 9:
+				return ['white-spark'];
+			default:
+				return [];
+		}
+	});
+	const stars = $derived('★'.repeat(cur?.rarity ?? 0));
+</script>
+
+{#if cur != null}
+	<div
+		class={[
+			curClass,
+			'spark mx-1 flex items-center rounded-xl px-2 py-1 transition ease-in hover:shadow-md hover:ease-out motion-safe:duration-75 motion-safe:hover:-translate-y-0.5 dark:shadow-neutral-950',
+		]}
+	>
+		<span>{cur.name}</span>
+		<span class="ml-2 text-xl text-amber-800 text-shadow-md dark:text-amber-300">{stars}</span>
+	</div>
+{/if}
+
+<style>
+	.white-spark {
+		--spark-color: light-dark(var(--color-mist-300), var(--color-mist-600));
+	}
+
+	.stat {
+		--spark-color: light-dark(var(--color-sky-300), var(--color-sky-600));
+	}
+
+	.aptitude {
+		--spark-color: light-dark(var(--color-rose-300), var(--color-rose-700));
+	}
+
+	.unique {
+		--spark-color: light-dark(var(--color-lime-400), var(--color-lime-700));
+	}
+
+	.spark {
+		background-color: var(--spark-color);
+	}
+</style>
diff --git a/zenno/src/lib/data/spark.ts b/zenno/src/lib/data/spark.ts
new file mode 100644
index 0000000..0964301
--- /dev/null
+++ b/zenno/src/lib/data/spark.ts
@@ -0,0 +1,53 @@
+import globalJSON from '../../../../global/spark.json';
+
+/**
+ * Sparks, or succession factors.
+ */
+export interface Spark {
+	/**
+	 * Spark ID.
+	 */
+	spark_id: number;
+	/**
+	 * Regional spark name.
+	 */
+	name: string;
+	/**
+	 * Regional spark description.
+	 */
+	description: string;
+	/**
+	 * Spark group.
+	 * Different star levels of a given spark are different spark IDs but
+	 * share a spark group.
+	 */
+	spark_group: number;
+	/**
+	 * Spark rarity, or star level.
+	 */
+	rarity: 1 | 2 | 3;
+	/**
+	 * Spark type.
+	 * Roughly the spark color, with extra subdivisions for white sparks.
+	 */
+	type: 1 | 2 | 5 | 4 | 6 | 7 | 10 | 8 | 11 | 9 | 3;
+	/**
+	 * Possible effects applied by the spark during inspiration.
+	 * A random element is selected from this list according to unknown
+	 * distributions, then all effects in that selection are applied.
+	 */
+	effects: SparkEffect[][];
+}
+
+/**
+ * Effects that a spark can apply.
+ */
+export interface SparkEffect {
+	target: 1 | 2 | 3 | 4 | 5 | 6 | 7 | 11 | 12 | 21 | 22 | 23 | 24 | 31 | 32 | 33 | 34 | 41 | 51 | 61 | 62 | 63 | 64 | 65;
+	value1?: number;
+	value2: number;
+}
+
+export const sparks = {
+	global: globalJSON as Spark[],
+} as const;
diff --git a/zenno/src/lib/legacy.ts b/zenno/src/lib/legacy.ts
index 2defc00..50e2837 100644
--- a/zenno/src/lib/legacy.ts
+++ b/zenno/src/lib/legacy.ts
@@ -29,7 +29,7 @@ export function mapLegacy<U, V>(l: Legacy<U>, f: (u: U) => V): Legacy<V> {
 		p2: f(l.p2),
 		s21: f(l.s21),
 		s22: f(l.s22),
-	}
+	};
 }
 
 /**