feat: add path_geometry data

packages/ui/src/histoire.setup.ts

@@ -0,0 +1 @@
+import "./lib/app.css"

packages/ui/src/lib/ShortCut.story.svelte

@@ -0,0 +1,17 @@
+<script lang="ts">
+  import type { Hst } from "@histoire/plugin-svelte";
+  export let Hst: Hst;
+  import Checkbox from "./ShortCut.svelte";
+  import StoryContent from "$lib/helpers/StoryContent.svelte";
+  import StorySettings from "$lib/helpers/StorySettings.svelte";
+  let theme = "dark";
+</script>
+
+<Hst.Story>
+  <StoryContent {theme}>
+    <Checkbox ctrl alt key={"del"} />
+  </StoryContent>
+  <svelte:fragment slot="controls">
+    <StorySettings bind:theme />
+  </svelte:fragment>
+</Hst.Story>

packages/ui/src/lib/ShortCut.svelte

@@ -0,0 +1,35 @@
+<script lang="ts">
+  export let ctrl = false;
+  export let shift = false;
+  export let alt = false;
+  export let key: string;
+</script>
+
+<div class="command">
+  {#if ctrl}
+    <span>Ctrl</span>
+  {/if}
+  {#if shift}
+    <span>Shift</span>
+  {/if}
+  {#if alt}
+    <span>Alt</span>
+  {/if}
+  {key}
+</div>
+
+<style>
+  .command {
+    background: var(--layer-2);
+    padding: 0.4em;
+    font-size: 0.8em;
+    border-radius: 0.3em;
+    white-space: nowrap;
+    width: fit-content;
+  }
+
+  span::after {
+    content: " +";
+    opacity: 0.5;
+  }
+</style>

packages/ui/src/lib/app.css

@@ -42,7 +42,7 @@ body {
   overflow: hidden;
 
   --neutral-100: #E7E7E7;
-  --neutral-200: #A6A6A6;
+  --neutral-200: #CECECE;
   --neutral-300: #7C7C7C;
   --neutral-400: #2D2D2D;
   --neutral-500: #171717;
@@ -79,7 +79,7 @@ body.theme-light {
   --outline: var(--neutral-300);
   --layer-0: var(--neutral-100);
   --layer-1: var(--neutral-100);
-  --layer-2: var(--neutral-100);
+  --layer-2: var(--neutral-200);
   --layer-3: var(--neutral-500);
   --active: #000000;
   --selected: #c65a19;

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>

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>

packages/ui/src/lib/index.ts

@@ -10,3 +10,5 @@ import Details from "./Details.svelte";
 export { Float, Integer, Select, Checkbox, Input, Details };
 
 export default Input;
+
+export { default as ShortCut } from "./ShortCut.svelte";

packages/ui/src/routes/+layout.ts

@@ -0,0 +1 @@
+export const prerender = true;