feat: initial app code

packages/types/src/inputs.ts

@@ -61,7 +61,10 @@ export const NodeInputBooleanSchema = z.object({
 export const NodeInputSelectSchema = z.object({
   ...DefaultOptionsSchema.shape,
   type: z.literal('select'),
-  options: z.array(z.string()).optional(),
+  options: z.union([
+    z.array(z.string()),
+    z.array(z.object({ label: z.string(), value: z.string() }))
+  ]).optional(),
   value: z.string().optional()
 });
 

packages/ui/src/lib/Input.svelte

@@ -40,7 +40,7 @@
 {:else if input.type === 'boolean'}
   <InputCheckbox bind:value={value as boolean} {id} />
 {:else if input.type === 'select'}
-  <InputSelect bind:value={value as number} options={input.options} {id} />
+  <InputSelect bind:value={value as number | string} options={input.options} {id} />
 {:else if input.type === 'vec3'}
   <InputVec3 bind:value={value as [number, number, number]} {id} />
 {/if}

packages/ui/src/lib/inputs/InputSelect.svelte

@@ -1,17 +1,28 @@
 <script lang="ts">
+  type StringOption = string;
+  type LabeledOption = { label: string; value: string };
+
   interface Props {
-    options?: string[];
-    value?: number;
+    options?: StringOption[] | LabeledOption[];
+    value?: number | string;
     id?: string;
   }
 
-  let { options = [], value = $bindable(0), id = '' }: Props = $props();
+  let { options = [], value = $bindable<number | string>(0), id = '' }: Props = $props();
+
+  const isLabeled = $derived(options.length > 0 && typeof options[0] === 'object');
 </script>
 
 <select {id} bind:value class="bg-layer-2 text-text">
-  {#each options as label, i (label)}
-    <option value={i}>{label}</option>
-  {/each}
+  {#if isLabeled}
+    {#each options as opt ((opt as LabeledOption).value)}
+      <option value={(opt as LabeledOption).value}>{(opt as LabeledOption).label}</option>
+    {/each}
+  {:else}
+    {#each options as label, i (label)}
+      <option value={i}>{label as string}</option>
+    {/each}
+  {/if}
 </select>
 
 <style>