gardenjs 1.6.8 → 1.7.0

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

@@ -34,7 +34,7 @@
   })
 </script>
 
-<div>
+<div class="panel_code">
   {#if devmodus}
     Running Gardenjs in devmodus. No Code view supported.
   {/if}
@@ -42,3 +42,9 @@
     <pre><code class="language-xml" bind:this={codeblock}>{code}</code></pre>
   {/if}
 </div>
+
+<style>
+  .panel_code {
+    padding: 1.25rem;
+  }
+</style>

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

@@ -167,7 +167,6 @@
     right: 0;
     bottom: 0;
     left: 0;
-    padding: 1.25rem;
     width: 100%;
     overflow-y: auto;
   }

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

@@ -25,3 +25,9 @@
   <!-- eslint-disable-next-line -->
   {@html marked(das.descriptionfile || das.description)}
 </div>
+
+<style>
+  .markdown-body {
+    padding: 1.25rem;
+  }
+</style>

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

@@ -1,23 +1,49 @@
 <script>
-  let { examples = [], selected, onSelectExample } = $props()
+  import ParamsPane from './ParamsPane.svelte'
+  import VerticalSplitPane from './../../panes/VerticalSplitPane.svelte'
+  let {
+    examples = [],
+    params,
+    values,
+    onChange,
+    onReset,
+    selected,
+    onSelectExample,
+  } = $props()
+  let leftWidth = $state('')
+  let maxWidth = $state('')
 </script>
 
-<ul class="examples">
-  {#each examples as example, index (index)}
-    <li class:active={selected == example}>
-      <button onclick={() => onSelectExample(example)}>
-        <span class="dot"></span>
-        {example}
-      </button>
-    </li>
-  {/each}
-</ul>
+<VerticalSplitPane
+  {leftWidth}
+  {maxWidth}
+  onSetLeftWidth={(newLeftWidth) => (leftWidth = newLeftWidth)}
+  onSetMaxWidth={(newMaxWidth) => (maxWidth = newMaxWidth)}
+>
+  {#snippet left()}
+    <ul class="examples">
+      {#each examples as example, index (index)}
+        <li class:active={selected == example}>
+          <button onclick={() => onSelectExample(example)}>
+            <span class="dot"></span>
+            {example}
+          </button>
+        </li>
+      {/each}
+    </ul>
+  {/snippet}
+  {#snippet right()}
+    <ParamsPane {params} {values} {onChange} {onReset} />
+  {/snippet}
+</VerticalSplitPane>
 
 <style>
   .examples {
     list-style: none;
     margin: 0;
-    padding: 0;
+    padding: 1.25rem 0 1.25rem 1.25rem;
+    width: 100%;
+    overflow-x: hidden;
   }
   .examples li button {
     display: flex;

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

@@ -0,0 +1,201 @@
+<script>
+  import ArrayControl from './controls/ArrayControl.svelte'
+  import BooleanControl from './controls/BooleanControl.svelte'
+  import ColorPickerControl from './controls/ColorPickerControl.svelte'
+  import DateControl from './controls/DateControl.svelte'
+  import DatetimeControl from './controls/DatetimeControl.svelte'
+  import JsonControl from './controls/JsonControl.svelte'
+  import MultiselectControl from './controls/MultiselectControl.svelte'
+  import NumberControl from './controls/NumberControl.svelte'
+  import ObjectControl from './controls/ObjectControl.svelte'
+  import RangeControl from './controls/RangeControl.svelte'
+  import SelectControl from './controls/SelectControl.svelte'
+  import TextInputControl from './controls/TextInputControl.svelte'
+  import TimeControl from './controls/TimeControl.svelte'
+
+  let { params = [], values = {}, onChange, onReset } = $props()
+
+  const CONTROL_TYPES = [
+    'checkbox',
+    'number',
+    'color',
+    'date',
+    'time',
+    'datetime',
+    'array',
+    'object',
+    'multiselect',
+    'checkboxes',
+    'toggle',
+    'radio',
+    'textarea',
+    'text',
+    'range',
+    'select',
+  ]
+
+  const isValidControl = (control) =>
+    CONTROL_TYPES.includes(control.toLowerCase())
+
+  const getControlType = (param) => {
+    if (param.control && isValidControl(param.control)) {
+      return param.control.toLowerCase()
+    }
+    switch (param.type?.toLowerCase()) {
+      case 'boolean':
+        return 'checkbox'
+      case 'number':
+        return 'number'
+      case 'date':
+        return 'date'
+      case 'array':
+      case 'object':
+        return 'json'
+      case 'string':
+      default:
+        return 'text'
+    }
+  }
+</script>
+
+<div class="pane">
+  <div class="header">
+    <div class="title">Parameters</div>
+    <button
+      class="btn btn_reset"
+      title="Reset all parameters"
+      aria-label="Reset all parameters"
+      onclick={() => onReset?.()}>Reset</button
+    >
+  </div>
+
+  {#if params.length === 0}
+    <div class="empty">No parameters defined.</div>
+  {:else}
+    <div class="grid">
+      {#each params as param (param.name)}
+        {@const controlType = getControlType(param)}
+        <div class="label">
+          {param.label || param.name}
+        </div>
+        <div class="input">
+          {#if controlType === 'checkbox' || controlType === 'toggle'}
+            <BooleanControl
+              value={values?.[param.name] ?? undefined}
+              control={controlType}
+              onChange={(v) => onChange?.(param.name, v)}
+            />
+          {:else if controlType === 'number'}
+            <NumberControl
+              value={values?.[param.name] ?? null}
+              onChange={(v) => onChange?.(param.name, v)}
+            />
+          {:else if controlType === 'color'}
+            <ColorPickerControl
+              value={values?.[param.name] ?? undefined}
+              onChange={(v) => onChange?.(param.name, v)}
+            />
+          {:else if controlType === 'date'}
+            <DateControl
+              value={values?.[param.name] ?? undefined}
+              onChange={(v) => onChange?.(param.name, v)}
+            />
+          {:else if controlType === 'time'}
+            <TimeControl
+              value={values?.[param.name] ?? undefined}
+              onChange={(v) => onChange?.(param.name, v)}
+            />
+          {:else if controlType === 'datetime'}
+            <DatetimeControl
+              value={values?.[param.name] ?? undefined}
+              onChange={(v) => onChange?.(param.name, v)}
+            />
+          {:else if controlType === 'array'}
+            <ArrayControl
+              value={values?.[param.name] ?? []}
+              schema={param.schema ?? {}}
+              onChange={(v) => onChange?.(param.name, v)}
+            />
+          {:else if controlType === 'object'}
+            <ObjectControl
+              value={values?.[param.name] ?? {}}
+              schema={param.schema ?? {}}
+              onChange={(v) => onChange?.(param.name, v)}
+            />
+          {:else if controlType === 'multiselect' || controlType === 'checkboxes'}
+            <MultiselectControl
+              value={values?.[param.name] ?? []}
+              options={param.options ?? []}
+              control={controlType}
+              onChange={(v) => onChange?.(param.name, v)}
+            />
+          {:else if controlType === 'range'}
+            <RangeControl
+              value={values?.[param.name] ?? null}
+              min={param.min}
+              max={param.max}
+              step={param.step}
+              onChange={(v) => onChange?.(param.name, v)}
+            />
+          {:else if controlType === 'select' || controlType === 'radio'}
+            <SelectControl
+              value={values?.[param.name] ?? undefined}
+              options={param.options ?? []}
+              control={controlType}
+              onChange={(v) => onChange?.(param.name, v)}
+            />
+          {:else if controlType === 'textarea' || controlType === 'text'}
+            <TextInputControl
+              value={values?.[param.name] ?? ''}
+              control={controlType}
+              numberOfRows={param.numberOfRows}
+              onChange={(v) => onChange?.(param.name, v)}
+            />
+          {:else}
+            <JsonControl
+              value={values?.[param.name] ?? ''}
+              onChange={(v) => onChange?.(param.name, v)}
+            />
+          {/if}
+        </div>
+      {/each}
+    </div>
+  {/if}
+</div>
+
+<style>
+  @import './controls/button.scss';
+
+  .pane {
+    width: 100%;
+    padding: 1.25rem;
+    overflow-y: auto;
+  }
+  .header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 1rem;
+  }
+  .title {
+    font-size: 0.95rem;
+    font-weight: 600;
+    color: var(--c-basic-800);
+  }
+  .empty {
+    color: var(--c-basic-600);
+    font-size: 0.9rem;
+  }
+  .grid {
+    display: grid;
+    grid-template-columns: minmax(120px, auto) 1fr;
+    gap: 0.75rem;
+    align-items: start;
+  }
+  .label {
+    font-size: 0.938rem;
+    font-weight: 500;
+    color: var(--c-basic-700);
+    max-width: 220px;
+  }
+</style>

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

@@ -0,0 +1,242 @@
+<script>
+  import ArrayControl from './ArrayControl.svelte'
+  import BooleanControl from './BooleanControl.svelte'
+  import ColorPickerControl from './ColorPickerControl.svelte'
+  import DateControl from './DateControl.svelte'
+  import DatetimeControl from './DatetimeControl.svelte'
+  import MultiselectControl from './MultiselectControl.svelte'
+  import NumberControl from './NumberControl.svelte'
+  import ObjectControl from './ObjectControl.svelte'
+  import RangeControl from './RangeControl.svelte'
+  import SelectControl from './SelectControl.svelte'
+  import TextInputControl from './TextInputControl.svelte'
+  import TimeControl from './TimeControl.svelte'
+
+  let { value, onChange, schema = {} } = $props()
+
+  function addItem() {
+    const newItem = {}
+    Object.keys(schema).forEach((key) => {
+      const fieldType = getFieldType(schema[key])
+      if (fieldType === 'array' || fieldType === 'multiselect') {
+        newItem[key] = []
+      } else if (fieldType === 'boolean') {
+        newItem[key] = undefined
+      } else if (fieldType === 'number' || fieldType === 'range') {
+        newItem[key] = null
+      } else if (fieldType === 'object') {
+        newItem[key] = {}
+      } else {
+        newItem[key] = undefined
+      }
+    })
+    const newArray = [...(value || []), newItem]
+    onChange(newArray)
+  }
+
+  function removeItem(index) {
+    const newArray = [...value]
+    newArray.splice(index, 1)
+    onChange(newArray)
+  }
+
+  function updateItemProperty(index, propertyKey, newValue) {
+    const newArray = [...value]
+    newArray[index] = { ...newArray[index], [propertyKey]: newValue }
+    onChange(newArray)
+  }
+
+  const getFieldType = (config) => String(config?.type ?? 'text').toLowerCase()
+
+  let items = $derived(Array.isArray(value) ? value : [])
+</script>
+
+<div class="items">
+  {#if items.length > 0}
+    {#each items as item, index (index)}
+      <div class="item">
+        <div class="item_header">
+          <span class="item_number">#{index + 1}</span>
+          <button
+            class="btn btn_remove"
+            title="Remove item"
+            aria-label="Remove item"
+            onclick={() => removeItem(index)}
+          >
+            <svg
+              xmlns="http://www.w3.org/2000/svg"
+              width="16"
+              viewBox="0 0 24 24"
+              height="16"
+              fill="none"
+              stroke="currentColor"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+              ><path
+                d="M10 11v6m4-6v6m5-11v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2"
+              /></svg
+            >
+          </button>
+        </div>
+        <div class="grid">
+          {#each Object.entries(schema) as [key, config] (key)}
+            {@const fieldType = getFieldType(config)}
+            <div class="label">
+              <div class="field-label">{config.label || key}</div>
+            </div>
+            <div class="input_wrapper">
+              {#if fieldType === 'array'}
+                <ArrayControl
+                  value={item[key] ?? []}
+                  onChange={(v) => updateItemProperty(index, key, v)}
+                />
+              {:else if fieldType === 'boolean'}
+                <BooleanControl
+                  value={item[key] ?? undefined}
+                  onChange={(v) => updateItemProperty(index, key, v)}
+                />
+              {:else if fieldType === 'color'}
+                <ColorPickerControl
+                  value={item[key] ?? undefined}
+                  onChange={(v) => updateItemProperty(index, key, v)}
+                />
+              {:else if fieldType === 'date'}
+                <DateControl
+                  value={item[key] ?? undefined}
+                  onChange={(v) => updateItemProperty(index, key, v)}
+                />
+              {:else if fieldType === 'datetime'}
+                <DatetimeControl
+                  value={item[key] ?? undefined}
+                  onChange={(v) => updateItemProperty(index, key, v)}
+                />
+              {:else if fieldType === 'multiselect'}
+                <MultiselectControl
+                  value={item[key] ?? []}
+                  onChange={(v) => updateItemProperty(index, key, v)}
+                  options={config.options ?? []}
+                  control={config.control ?? 'dropdown'}
+                />
+              {:else if fieldType === 'number'}
+                <NumberControl
+                  value={item[key] ?? null}
+                  onChange={(v) => updateItemProperty(index, key, v)}
+                />
+              {:else if fieldType === 'object'}
+                <ObjectControl
+                  value={item[key] ?? {}}
+                  onChange={(v) => updateItemProperty(index, key, v)}
+                  schema={config.schema ?? {}}
+                />
+              {:else if fieldType === 'range'}
+                <RangeControl
+                  value={item[key] ?? null}
+                  min={config.min}
+                  max={config.max}
+                  step={config.step}
+                  onChange={(v) => updateItemProperty(index, key, v)}
+                />
+              {:else if fieldType === 'select'}
+                <SelectControl
+                  value={item[key] ?? undefined}
+                  onChange={(v) => updateItemProperty(index, key, v)}
+                  options={config.options ?? []}
+                />
+              {:else if fieldType === 'time'}
+                <TimeControl
+                  value={item[key] ?? undefined}
+                  onChange={(v) => updateItemProperty(index, key, v)}
+                />
+              {:else}
+                <TextInputControl
+                  value={item[key] ?? ''}
+                  control={config.control ?? 'text'}
+                  numberOfRows={config.numberOfRows}
+                  onChange={(v) => updateItemProperty(index, key, v)}
+                />
+              {/if}
+            </div>
+          {/each}
+        </div>
+      </div>
+    {/each}
+  {/if}
+  <button class="btn btn_add" onclick={addItem}>
+    <svg
+      class="plus"
+      xmlns="http://www.w3.org/2000/svg"
+      width="14"
+      height="14"
+      viewBox="0 0 24 24"
+      fill="none"
+      stroke="currentColor"
+      stroke-width="2"
+      stroke-linecap="round"
+      stroke-linejoin="round"><path d="M5 12h14" /><path d="M12 5v14" /></svg
+    >
+    Add Item
+  </button>
+</div>
+
+<style>
+  @import './button.scss';
+
+  .items {
+    display: flex;
+    flex-direction: column;
+    gap: 1rem;
+    width: 100%;
+  }
+
+  .item {
+    border-left: 1px solid var(--c-basic-250);
+    padding: 0 0 0 0.75rem;
+    background: var(--c-basic-0);
+  }
+
+  .item_header {
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    margin-bottom: 0.75rem;
+  }
+
+  .item_number {
+    font-size: 0.875rem;
+    font-weight: 600;
+    color: var(--c-basic-600);
+  }
+
+  .grid {
+    display: grid;
+    grid-template-columns: minmax(120px, auto) 1fr;
+    gap: 0.75rem;
+    align-items: start;
+  }
+  .label {
+    font-size: 0.938rem;
+    font-weight: 500;
+    color: var(--c-basic-700);
+    max-width: 220px;
+  }
+
+  .btn_remove {
+    width: 1.5rem;
+    height: 1.5rem;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0.125rem;
+  }
+
+  .btn_add {
+    max-width: 8.5rem;
+  }
+
+  .plus {
+    display: block;
+    margin-right: 0.25rem;
+  }
+</style>

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

@@ -0,0 +1,142 @@
+<script lang="ts">
+  let {
+    value,
+    onChange,
+    control = 'checkbox',
+  }: {
+    value: boolean
+    onChange: (value: boolean) => void
+    control?: 'checkbox' | 'toggle'
+  } = $props()
+</script>
+
+<input
+  type="checkbox"
+  class={control}
+  checked={value === true}
+  onchange={(e) => {
+    onChange((e.currentTarget as HTMLInputElement).checked)
+  }}
+/>
+<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';
+
+  input {
+    border: 1px solid var(--c-basic-150);
+    background: var(--c-basic-0);
+    color: var(--c-basic-800);
+  }
+  @supports (appearance: none) {
+    input[type='checkbox'] {
+      appearance: none;
+      position: relative;
+      display: inline-block;
+      margin: 0;
+      padding: 0;
+      height: 1.25rem;
+      vertical-align: top;
+      outline: none;
+      border: 1px solid var(--c-primary);
+      cursor: pointer;
+      &:after {
+        position: absolute;
+        display: block;
+        content: '';
+        left: 0;
+        top: 0;
+      }
+      &:checked {
+        background-color: var(--c-primary);
+        border: 1px solid var(--c-primary);
+      }
+      &:disabled {
+        background-color: var(--c-text);
+        cursor: not-allowed;
+        opacity: 0.4;
+        &:checked {
+          background-color: var(--c-text);
+          border-color: var(--c-text);
+        }
+      }
+      &:hover {
+        &:not(:checked) {
+          &:not(:disabled) {
+            border-color: var(--c-primary);
+          }
+        }
+      }
+      &:focus-visible {
+        outline: none;
+        box-shadow: 0 0 0 1px var(--c-primary);
+      }
+    }
+
+    // checkbox variant
+    input[type='checkbox'].checkbox {
+      width: 1.25rem;
+      border-radius: 0;
+      &:after {
+        width: 0.313rem;
+        height: 0.563rem;
+        border: 2px solid #fff;
+        border-top: 0;
+        border-left: 0;
+        left: 0.4rem;
+        top: 0.2125rem;
+        transform: rotate(43deg);
+        opacity: var(--o, 0);
+      }
+      &:checked {
+        --o: 1;
+      }
+    }
+
+    // toggle variant
+    input[type='checkbox'].toggle {
+      width: 2.5rem;
+      border-radius: 1.125rem;
+      transition: background-color 0.2s ease;
+
+      &:after {
+        width: 1rem;
+        height: 1rem;
+        border-radius: 50%;
+        background-color: var(--c-basic-0);
+        left: 0.0625rem;
+        top: 0.0625rem;
+        transition: left 0.2s ease;
+      }
+
+      &:checked:after {
+        left: 1.3125rem;
+      }
+
+      &:not(:checked) {
+        background-color: var(--c-basic-300);
+        border-color: var(--c-basic-300);
+      }
+    }
+  }
+</style>