feat: add path_geometry data

packages/ui/src/lib/elements/Checkbox.story.svelte

@@ -2,16 +2,16 @@
   import type { Hst } from "@histoire/plugin-svelte";
   export let Hst: Hst;
   import Checkbox from "./Checkbox.svelte";
+  import StoryContent from "$lib/helpers/StoryContent.svelte";
+  import StorySettings from "$lib/helpers/StorySettings.svelte";
+  let theme = "dark";
 </script>
 
 <Hst.Story>
-  <div>
-    <Checkbox checked={false} />
-  </div>
+  <StoryContent {theme}>
+    <Checkbox value={false} />
+  </StoryContent>
+  <svelte:fragment slot="controls">
+    <StorySettings bind:theme />
+  </svelte:fragment>
 </Hst.Story>
-
-<style>
-  div {
-    padding: 1em;
-  }
-</style>

packages/ui/src/lib/elements/Checkbox.svelte

@@ -7,7 +7,7 @@
     value = value === 1;
   }
 
-  export let id: string;
+  export let id = "";
 </script>
 
 <input {id} type="checkbox" bind:checked={value} />

packages/ui/src/lib/elements/Float.story.svelte

@@ -2,16 +2,16 @@
   import type { Hst } from "@histoire/plugin-svelte";
   export let Hst: Hst;
   import Float from "./Float.svelte";
+  import StoryContent from "$lib/helpers/StoryContent.svelte";
+  import StorySettings from "$lib/helpers/StorySettings.svelte";
+  let theme = "dark";
 </script>
 
 <Hst.Story>
-  <div>
+  <StoryContent {theme}>
     <Float value={0} min={0} max={6.9} />
-  </div>
+  </StoryContent>
+  <svelte:fragment slot="controls">
+    <StorySettings bind:theme />
+  </svelte:fragment>
 </Hst.Story>
-
-<style>
-  div {
-    padding: 1em;
-  }
-</style>

packages/ui/src/lib/elements/Float.svelte

@@ -1,6 +1,6 @@
 <script lang="ts">
   import { createEventDispatcher } from "svelte";
-  import { getBoundingValue } from "../helpers/getBoundingValue";
+  import { getBoundingValue } from "../helpers/getBoundingValue.js";
 
   export let value = 0.5;
   export let step = 0.01;
@@ -123,10 +123,11 @@
   .component-wrapper {
     position: relative;
     background-color: var(--layer-2, #4b4b4b);
-    border-radius: 2px;
+    border-radius: 4px;
     user-select: none;
     transition: box-shadow 0.3s ease;
-    outline: solid 1px var(--outline);
+    border: solid 1px var(--outline);
+    box-sizing: border-box;
     overflow: hidden;
     border-radius: var(--border-radius, 2px);
   }

packages/ui/src/lib/elements/Integer.story.svelte

@@ -2,12 +2,19 @@
   import type { Hst } from "@histoire/plugin-svelte";
   export let Hst: Hst;
   import Integer from "./Integer.svelte";
+  import StorySettings from "../helpers/StorySettings.svelte";
+  import StoryContent from "$lib/helpers/StoryContent.svelte";
+
+  let theme = "dark";
 </script>
 
 <Hst.Story>
-  <div>
+  <StoryContent {theme}>
     <Integer value={5} min={0} max={42} />
-  </div>
+  </StoryContent>
+  <svelte:fragment slot="controls">
+    <StorySettings bind:theme />
+  </svelte:fragment>
 </Hst.Story>
 
 <style>

packages/ui/src/lib/elements/Integer.svelte

@@ -96,6 +96,7 @@
   <input
     bind:value
     bind:this={inputEl}
+    {id}
     {step}
     {max}
     {min}

packages/ui/src/lib/elements/Select.story.svelte

@@ -2,16 +2,17 @@
   import type { Hst } from "@histoire/plugin-svelte";
   export let Hst: Hst;
   import Select from "./Select.svelte";
+  import StoryContent from "$lib/helpers/StoryContent.svelte";
+  import StorySettings from "$lib/helpers/StorySettings.svelte";
+
+  let theme = "dark";
 </script>
 
 <Hst.Story>
-  <div>
-    <Select value={"banana"} options={["strawberry", "apple", "banana"]} />
-  </div>
+  <StoryContent {theme}>
+    <Select id="" options={["strawberry", "apple", "banana"]} />
+  </StoryContent>
+  <svelte:fragment slot="controls">
+    <StorySettings bind:theme />
+  </svelte:fragment>
 </Hst.Story>
-
-<style>
-  div {
-    padding: 1em;
-  }
-</style>

packages/ui/src/lib/elements/Select.svelte

@@ -1,7 +1,7 @@
 <script lang="ts">
   export let options: string[] = [];
   export let value: number = 0;
-  export let id: string;
+  export let id = "";
 </script>
 
 <select {id} bind:value>

packages/ui/src/lib/elements/Vec3.story.svelte

@@ -0,0 +1,18 @@
+<script lang="ts">
+  import type { Hst } from "@histoire/plugin-svelte";
+  export let Hst: Hst;
+  import Vec3 from "./Vec3.svelte";
+  import StoryContent from "$lib/helpers/StoryContent.svelte";
+  import StorySettings from "$lib/helpers/StorySettings.svelte";
+
+  let theme = "dark";
+</script>
+
+<Hst.Story>
+  <StoryContent {theme}>
+    <Vec3 value={[0.2, 0.4, 0.6]} />
+  </StoryContent>
+  <svelte:fragment slot="controls">
+    <StorySettings bind:theme />
+  </svelte:fragment>
+</Hst.Story>

packages/ui/src/lib/elements/Vec3.svelte

@@ -5,6 +5,27 @@
   export let id = "";
 </script>
 
-<Float id={`${id}-x`} bind:value={value[0]} />
-<Float id={`${id}-y`} bind:value={value[1]} />
-<Float id={`${id}-z`} bind:value={value[2]} />
+<div>
+  <Float id={`${id}-x`} bind:value={value[0]} />
+  <Float id={`${id}-y`} bind:value={value[1]} />
+  <Float id={`${id}-z`} bind:value={value[2]} />
+</div>
+
+<style>
+  div > :global(.component-wrapper:nth-child(1)) {
+    border-radius: 4px 4px 0px 0px !important;
+    border-bottom: none !important;
+  }
+  div > :global(.component-wrapper:nth-child(2)) {
+    border-radius: 0px !important;
+    outline: none;
+    border: solid thin var(--outline);
+    border-top: solid thin color-mix(in srgb, var(--outline) 50%, transparent);
+    border-bottom: solid thin
+      color-mix(in srgb, var(--outline) 50%, transparent);
+  }
+  div > :global(.component-wrapper:nth-child(3)) {
+    border-top: none !important;
+    border-radius: 0px 0px 4px 4px !important;
+  }
+</style>