feat: add path_geometry data

packages/ui/src/lib/helpers/StoryContent.svelte

@@ -0,0 +1,24 @@
+<script lang="ts">
+  export let theme = "dark";
+
+  $: if (theme !== undefined) {
+    const classes = document.body.classList;
+    const newClassName = `theme-${theme}`;
+    for (const className of classes) {
+      if (className.startsWith("theme-") && className !== newClassName) {
+        classes.remove(className);
+      }
+    }
+    document.body.classList.add(newClassName);
+  }
+</script>
+
+<div>
+  <slot />
+</div>
+
+<style>
+  div {
+    padding: 1em;
+  }
+</style>

packages/ui/src/lib/helpers/StorySettings.svelte

@@ -0,0 +1,31 @@
+<script lang="ts">
+  import { Select } from "$lib/index.js";
+
+  const themes = [
+    "dark",
+    "light",
+    "catppuccin",
+    "solarized",
+    "high-contrast",
+    "nord",
+    "dracula",
+  ];
+
+  let value = 0;
+  export let theme = themes[value];
+  $: theme = themes[value];
+</script>
+
+<div>
+  <label for="theme-select"> Select Theme </label>
+  <Select id="" bind:value options={themes} />
+</div>
+
+<style>
+  div {
+    display: flex;
+    flex-direction: column;
+    gap: 1em;
+    padding: 1em;
+  }
+</style>