gardenjs 1.6.9 → 1.7.0

package/src/client/components/sidebar/Sidebar.svelte

@@ -108,13 +108,10 @@
 
 <style>
   .sidebar_container {
-    --w-sidebar: 260px;
+    margin-right: 0.125rem;
     display: flex;
     flex-direction: column;
     position: relative;
-    margin: 0.375rem 0;
-    width: 0;
-    max-width: var(--w-sidebar);
     height: calc(100vh - 0.75rem);
     background-color: var(--c-sidebar-bg);
     border-radius: 0.625rem;
@@ -122,8 +119,7 @@
     overflow: hidden;
   }
   .show-sidebar {
-    margin: 0.375rem 0.375rem 0.375rem 0;
-    width: var(--w-sidebar);
+    margin: 0.375rem 0.125rem 0.375rem 0;
     box-sizing: border-box;
   }
   .project-identifier {
@@ -135,10 +131,10 @@
     align-items: center;
     padding: 0.25rem 0.688rem;
     margin: 0 0 0.125rem;
-    width: var(--w-sidebar);
+    width: 100%;
     height: 2.25rem;
     background-color: var(--c-sidebar);
-    inline-size: var(--w-sidebar);
+    inline-size: 100%;
     overflow: hidden;
     white-space: nowrap;
     font-size: 1.25rem;
@@ -188,7 +184,7 @@
     box-shadow: 0 0 0 1px var(--c-primary);
   }
   .filter_zero-results {
-    width: var(--w-sidebar);
+    width: 100%;
     padding: 0.5rem 0.688rem 0.375rem 0.688rem;
     text-transform: initial;
     font-size: 0.813rem;
@@ -214,7 +210,7 @@
     .controls {
       display: block;
       flex-shrink: 0;
-      width: var(--w-sidebar);
+      width: 100%;
       height: 103px;
       bottom: 0.375rem;
       padding: 0;

package/src/client/components/stage/Stage.svelte

@@ -38,11 +38,6 @@
   let myframeready = $state()
   let myframe = $state()
 
-  const params = $derived.by(() => {
-    if (das?.params && Array.isArray(das.params)) return das.params
-    return []
-  })
-
   const selectedExampleObj = $derived.by(() => {
     if (!das?.examples?.length) return {}
     return das.examples.find((ex) => ex.title === selectedExample) ?? {}
@@ -54,30 +49,58 @@
     return {}
   })
 
-  const computeInitialParamValues = (params, input) => {
-    const next = {}
-    for (const p of params ?? []) {
-      if (!p?.name) continue
-      if (Object.prototype.hasOwnProperty.call(input, p.name)) {
-        next[p.name] = input[p.name]
-      }
+  function getType(value) {
+    if (Array.isArray(value)) {
+      return 'array'
+    }
+    if (value instanceof Date) {
+      return 'date'
     }
-    return next
+    return typeof value
   }
 
-  let paramValues = $derived(
-    computeInitialParamValues(params, selectedExampleInput)
-  )
+  function capitalize(str) {
+    if (str.length > 1) {
+      return str.charAt(0).toUpperCase() + str.substring(1)
+    }
+    return str
+  }
 
-  const mergedArgs = $derived.by(() => {
-    return { ...paramValues }
+  const params = $derived.by(() => {
+    const configuredParams = das?.params ?? []
+    const exampleParams = Object.entries(selectedExampleInput).reduce(
+      (acc, [name, value]) => {
+        let configuredParam = configuredParams.find((p) => p.name === name)
+        if (configuredParam) {
+          acc.push(configuredParam)
+        } else {
+          acc.push({ name, type: getType(value), label: capitalize(name) })
+        }
+        return acc
+      },
+      []
+    )
+
+    return [
+      ...exampleParams,
+      ...configuredParams
+        .filter((configuredParam) =>
+          exampleParams.every(
+            (exampleParam) => exampleParam.name !== configuredParam.name
+          )
+        )
+        .map((p) => ({ ...p, value: undefined })),
+    ]
   })
 
-  const argsForMessage = $derived.by(() => {
+  let paramValues = $derived(structuredClone(selectedExampleInput))
+
+  const paramValuesForPostMessage = $derived.by(() => {
     try {
-      return JSON.parse(JSON.stringify(mergedArgs))
-    } catch {
-      return {}
+      return JSON.parse(JSON.stringify(paramValues))
+    } catch (e) {
+      console.err(e)
+      return null
     }
   })
 
@@ -133,10 +156,7 @@
             paramValues = { ...paramValues, [prop]: value }
           },
           onReset: () => {
-            paramValues = computeInitialParamValues(
-              params,
-              selectedExampleInput
-            )
+            paramValues = { ...selectedExampleInput }
           },
           selected: selectedExample,
           examples: das.examples.map((ex) => ex.title),
@@ -181,7 +201,7 @@
           showInspector,
           showGrid,
           gridSettings,
-          args: argsForMessage,
+          paramValues: paramValuesForPostMessage,
         },
         window.location
       )

package/src/client/components/stage/panel/ParamsPane.svelte

@@ -24,7 +24,7 @@
     'datetime',
     'array',
     'object',
-    'dropdown',
+    'multiselect',
     'checkboxes',
     'toggle',
     'radio',
@@ -46,14 +46,14 @@
         return 'checkbox'
       case 'number':
         return 'number'
-      case 'string':
-        return 'text'
       case 'date':
         return 'date'
       case 'array':
       case 'object':
-      default:
         return 'json'
+      case 'string':
+      default:
+        return 'text'
     }
   }
 </script>
@@ -82,7 +82,7 @@
           {#if controlType === 'checkbox' || controlType === 'toggle'}
             <BooleanControl
               value={values?.[param.name] ?? undefined}
-              variant={controlType}
+              control={controlType}
               onChange={(v) => onChange?.(param.name, v)}
             />
           {:else if controlType === 'number'}
@@ -122,11 +122,11 @@
               schema={param.schema ?? {}}
               onChange={(v) => onChange?.(param.name, v)}
             />
-          {:else if controlType === 'dropdown' || controlType === 'checkboxes'}
+          {:else if controlType === 'multiselect' || controlType === 'checkboxes'}
             <MultiselectControl
               value={values?.[param.name] ?? []}
               options={param.options ?? []}
-              variant={controlType}
+              control={controlType}
               onChange={(v) => onChange?.(param.name, v)}
             />
           {:else if controlType === 'range'}
@@ -137,25 +137,23 @@
               step={param.step}
               onChange={(v) => onChange?.(param.name, v)}
             />
-          {:else if controlType === 'dropdown' || controlType === 'radio'}
+          {:else if controlType === 'select' || controlType === 'radio'}
             <SelectControl
               value={values?.[param.name] ?? undefined}
               options={param.options ?? []}
-              variant={controlType}
+              control={controlType}
               onChange={(v) => onChange?.(param.name, v)}
             />
           {:else if controlType === 'textarea' || controlType === 'text'}
             <TextInputControl
               value={values?.[param.name] ?? ''}
-              variant={controlType}
-              rows={param.rows}
+              control={controlType}
+              numberOfRows={param.numberOfRows}
               onChange={(v) => onChange?.(param.name, v)}
             />
           {:else}
             <JsonControl
               value={values?.[param.name] ?? ''}
-              variant={controlType}
-              rows={param.rows}
               onChange={(v) => onChange?.(param.name, v)}
             />
           {/if}

package/src/client/components/stage/panel/controls/ArrayControl.svelte

@@ -116,7 +116,7 @@
                   value={item[key] ?? []}
                   onChange={(v) => updateItemProperty(index, key, v)}
                   options={config.options ?? []}
-                  variant={config.variant ?? 'dropdown'}
+                  control={config.control ?? 'dropdown'}
                 />
               {:else if fieldType === 'number'}
                 <NumberControl
@@ -151,8 +151,8 @@
               {:else}
                 <TextInputControl
                   value={item[key] ?? ''}
-                  variant={config.variant ?? 'text'}
-                  rows={config.rows}
+                  control={config.control ?? 'text'}
+                  numberOfRows={config.numberOfRows}
                   onChange={(v) => updateItemProperty(index, key, v)}
                 />
               {/if}

package/src/client/components/stage/panel/controls/BooleanControl.svelte

@@ -2,41 +2,43 @@
   let {
     value,
     onChange,
-    variant = 'checkbox',
+    control = 'checkbox',
   }: {
     value: boolean
     onChange: (value: boolean) => void
-    variant?: 'checkbox' | 'toggle'
+    control?: 'checkbox' | 'toggle'
   } = $props()
 </script>
 
 <input
   type="checkbox"
-  class={variant}
+  class={control}
   checked={value === true}
   onchange={(e) => {
     onChange((e.currentTarget as HTMLInputElement).checked)
   }}
 />
-{#if value === undefined || value === null}
-  <span class="unset-info">is not set</span>
-{:else}
-  <button class="btn_unset" onclick={() => onChange(undefined as any)}>
-    <svg
-      class="close"
-      xmlns="http://www.w3.org/2000/svg"
-      width="12"
-      height="12"
-      viewBox="0 0 24 24"
-      fill="none"
-      stroke="currentColor"
-      stroke-width="2"
-      stroke-linecap="round"
-      stroke-linejoin="round"><path d="M18 6L6 18M6 6l12 12" /></svg
-    >
-    unset
-  </button>
-{/if}
+<div class="unset-area">
+  {#if value === undefined || value === null}
+    <span class="unset-info">is not set</span>
+  {:else}
+    <button class="btn_unset" onclick={() => onChange(undefined as any)}>
+      <svg
+        class="close"
+        xmlns="http://www.w3.org/2000/svg"
+        width="12"
+        height="12"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="2"
+        stroke-linecap="round"
+        stroke-linejoin="round"><path d="M18 6L6 18M6 6l12 12" /></svg
+      >
+      unset
+    </button>
+  {/if}
+</div>
 
 <style lang="scss">
   @use './button_unset.scss';

package/src/client/components/stage/panel/controls/ColorPickerControl.svelte

@@ -78,25 +78,27 @@
     value={value || ''}
     oninput={handleTextInput}
   />
-  {#if isUnset}
-    <span class="unset-info">is not set</span>
-  {:else}
-    <button class="btn_unset" onclick={() => onChange(undefined)}>
-      <svg
-        class="close"
-        xmlns="http://www.w3.org/2000/svg"
-        width="12"
-        height="12"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"><path d="M18 6L6 18M6 6l12 12" /></svg
-      >
-      unset
-    </button>
-  {/if}
+  <div class="unset-area">
+    {#if isUnset}
+      <span class="unset-info">is not set</span>
+    {:else}
+      <button class="btn_unset" onclick={() => onChange(undefined)}>
+        <svg
+          class="close"
+          xmlns="http://www.w3.org/2000/svg"
+          width="12"
+          height="12"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"><path d="M18 6L6 18M6 6l12 12" /></svg
+        >
+        unset
+      </button>
+    {/if}
+  </div>
 </div>
 
 <style>

package/src/client/components/stage/panel/controls/DateControl.svelte

@@ -17,27 +17,29 @@
       onChange(newValue || (undefined as any))
     }}
   />
-  {#if isUnset}
-    <span class="unset-info">is not set</span>
-  {:else}
-    <button class="btn_unset" onclick={() => onChange(undefined as any)}>
-      <svg
-        class="close"
-        xmlns="http://www.w3.org/2000/svg"
-        width="12"
-        height="12"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      >
-        <path d="M18 6L6 18M6 6l12 12" />
-      </svg>
-      unset
-    </button>
-  {/if}
+  <div class="unset-area">
+    {#if isUnset}
+      <span class="unset-info">is not set</span>
+    {:else}
+      <button class="btn_unset" onclick={() => onChange(undefined as any)}>
+        <svg
+          class="close"
+          xmlns="http://www.w3.org/2000/svg"
+          width="12"
+          height="12"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="M18 6L6 18M6 6l12 12" />
+        </svg>
+        unset
+      </button>
+    {/if}
+  </div>
 </div>
 
 <style lang="scss">

package/src/client/components/stage/panel/controls/DatetimeControl.svelte

@@ -17,27 +17,29 @@
       onChange(newValue || (undefined as any))
     }}
   />
-  {#if isUnset}
-    <span class="unset-info">is not set</span>
-  {:else}
-    <button class="btn_unset" onclick={() => onChange(undefined as any)}>
-      <svg
-        class="close"
-        xmlns="http://www.w3.org/2000/svg"
-        width="12"
-        height="12"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      >
-        <path d="M18 6L6 18M6 6l12 12" />
-      </svg>
-      unset
-    </button>
-  {/if}
+  <div class="unset-area">
+    {#if isUnset}
+      <span class="unset-info">is not set</span>
+    {:else}
+      <button class="btn_unset" onclick={() => onChange(undefined as any)}>
+        <svg
+          class="close"
+          xmlns="http://www.w3.org/2000/svg"
+          width="12"
+          height="12"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="M18 6L6 18M6 6l12 12" />
+        </svg>
+        unset
+      </button>
+    {/if}
+  </div>
 </div>
 
 <style lang="scss">

package/src/client/components/stage/panel/controls/JsonControl.svelte

@@ -10,10 +10,10 @@
 
 <textarea
   class="input textarea"
-  rows="5"
-  value={String(value ?? '')}
+  rows="10"
+  value={JSON.stringify(value ?? '', null, 2)}
   onchange={(e) => {
-    onChange(JSON.parse((e.currentTarget as HTMLTextAreaElement).value ?? ''))
+    onChange(JSON.parse(e.currentTarget.value ?? ''))
   }}
 ></textarea>
 

package/src/client/components/stage/panel/controls/MultiselectControl.svelte

@@ -3,12 +3,12 @@
     value,
     onChange,
     options = [],
-    variant = 'dropdown',
+    control = 'dropdown',
   }: {
     value: string[]
     onChange: (value: string[]) => void
     options?: string[] | { label: string; value: string }[]
-    variant?: 'dropdown' | 'checkboxes'
+    control?: 'dropdown' | 'checkboxes'
   } = $props()
 
   let isUnset = $derived(
@@ -36,7 +36,7 @@
   }
 </script>
 
-{#if variant === 'dropdown'}
+{#if control === 'dropdown'}
   <div class="row">
     <div class="select-wrapper">
       <button
@@ -82,8 +82,46 @@
         </div>
       {/if}
     </div>
+    <div class="unset-area">
+      {#if !isUnset}
+        <button class="btn_unset" onclick={handleUnset}>
+          <svg
+            class="close"
+            xmlns="http://www.w3.org/2000/svg"
+            width="12"
+            height="12"
+            viewBox="0 0 24 24"
+            fill="none"
+            stroke="currentColor"
+            stroke-width="2"
+            stroke-linecap="round"
+            stroke-linejoin="round"
+          >
+            <path d="M18 6L6 18M6 6l12 12" />
+          </svg>
+          unset
+        </button>
+      {:else}
+        <span class="unset-info">is not set</span>
+      {/if}
+    </div>
+  </div>
+{:else if control === 'checkboxes'}
+  <div class="checkboxes-container">
+    {#each normalizedOptions as option (option.value)}
+      <label class="checkbox-item">
+        <input
+          type="checkbox"
+          checked={value?.includes(option.value) || false}
+          onchange={() => toggleOption(option.value)}
+        />
+        <span>{option.label}</span>
+      </label>
+    {/each}
+  </div>
+  <div class="unset-area">
     {#if !isUnset}
-      <button class="btn_unset" onclick={handleUnset}>
+      <button class="btn_unset checkboxes-btn-unset" onclick={handleUnset}>
         <svg
           class="close"
           xmlns="http://www.w3.org/2000/svg"
@@ -101,43 +139,9 @@
         unset
       </button>
     {:else}
-      <span class="unset-info">is not set</span>
+      <div class="unset-info checkboxes-unset">is not set</div>
     {/if}
   </div>
-{:else if variant === 'checkboxes'}
-  <div class="checkboxes-container">
-    {#each normalizedOptions as option (option.value)}
-      <label class="checkbox-item">
-        <input
-          type="checkbox"
-          checked={value?.includes(option.value) || false}
-          onchange={() => toggleOption(option.value)}
-        />
-        <span>{option.label}</span>
-      </label>
-    {/each}
-  </div>
-  {#if !isUnset}
-    <button class="btn_unset checkboxes-btn-unset" onclick={handleUnset}>
-      <svg
-        class="close"
-        xmlns="http://www.w3.org/2000/svg"
-        width="12"
-        height="12"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      >
-        <path d="M18 6L6 18M6 6l12 12" />
-      </svg>
-      unset
-    </button>
-  {:else}
-    <div class="unset-info checkboxes-unset">is not set</div>
-  {/if}
 {/if}
 
 <style lang="scss">

package/src/client/components/stage/panel/controls/RangeControl.svelte

@@ -32,27 +32,29 @@
     />
   </div>
   <div class="value">{isUnset ? '-' : value}</div>
-  {#if !isUnset}
-    <button class="btn_unset" onclick={() => onChange(null)}>
-      <svg
-        class="close"
-        xmlns="http://www.w3.org/2000/svg"
-        width="12"
-        height="12"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="round"
-        stroke-linejoin="round"
-      >
-        <path d="M18 6L6 18M6 6l12 12" />
-      </svg>
-      unset
-    </button>
-  {:else}
-    <span class="unset-info">is not set</span>
-  {/if}
+  <div class="unset-area">
+    {#if !isUnset}
+      <button class="btn_unset" onclick={() => onChange(null)}>
+        <svg
+          class="close"
+          xmlns="http://www.w3.org/2000/svg"
+          width="12"
+          height="12"
+          viewBox="0 0 24 24"
+          fill="none"
+          stroke="currentColor"
+          stroke-width="2"
+          stroke-linecap="round"
+          stroke-linejoin="round"
+        >
+          <path d="M18 6L6 18M6 6l12 12" />
+        </svg>
+        unset
+      </button>
+    {:else}
+      <span class="unset-info">is not set</span>
+    {/if}
+  </div>
 </div>
 
 <style lang="scss">