gardenjs 1.6.8 → 1.7.0

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

@@ -0,0 +1,31 @@
+<script lang="ts">
+  let {
+    value,
+    onChange,
+  }: { value: number; onChange: (value: number) => void } = $props()
+</script>
+
+<input
+  class="input"
+  type="number"
+  {value}
+  oninput={(e) => {
+    const newValue = (e.currentTarget as HTMLInputElement).valueAsNumber
+    if (Number.isFinite(newValue)) onChange(newValue)
+  }}
+/>
+
+<style>
+  @import './input.scss';
+
+  .input {
+    padding-right: 0;
+    -moz-appearance: auto;
+    appearance: auto;
+  }
+  .input::-webkit-inner-spin-button,
+  .input::-webkit-outer-spin-button {
+    -webkit-appearance: auto;
+    margin: 0;
+  }
+</style>

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

@@ -0,0 +1,148 @@
+<script>
+  let { value, onChange, schema = {} } = $props()
+
+  function addProperty() {
+    const defaultKey = schema.keyDefault ?? ''
+    const defaultValue = schema.valueDefault ?? ''
+    const newObject = { ...(value || {}), [defaultKey]: defaultValue }
+    onChange(newObject)
+  }
+
+  function removeProperty(key) {
+    const newObject = { ...value }
+    delete newObject[key]
+    onChange(newObject)
+  }
+
+  function updateKey(oldKey, newKey) {
+    if (oldKey === newKey) return
+    const newObject = {}
+    for (const k in value) {
+      if (k === oldKey) {
+        newObject[newKey] = value[oldKey]
+      } else {
+        newObject[k] = value[k]
+      }
+    }
+    onChange(newObject)
+  }
+
+  function updateValue(key, newValue) {
+    const newObject = { ...value, [key]: newValue }
+    onChange(newObject)
+  }
+
+  let entries = $derived(Object.entries(value || {}))
+</script>
+
+<div class="object-param">
+  {#if entries.length > 0}
+    {#each entries as [key, val], index (index)}
+      <div class="object-item">
+        <input
+          class="input input_key"
+          type="text"
+          value={key}
+          placeholder="key"
+          oninput={(e) => updateKey(key, e.currentTarget.value)}
+        />
+        <span class="separator">:</span>
+        <input
+          type="text"
+          class="input input_value"
+          value={String(val ?? '')}
+          placeholder="value"
+          oninput={(e) => updateValue(key, e.currentTarget.value)}
+        />
+        <button
+          class="btn btn_remove"
+          title="Remove property"
+          aria-label="Remove property"
+          onclick={() => removeProperty(key)}
+        >
+          <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>
+    {/each}
+  {/if}
+  <button class="btn" onclick={addProperty}>
+    <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 Property
+  </button>
+</div>
+
+<style>
+  @import './button.scss';
+  @import './input.scss';
+
+  .object-param {
+    display: flex;
+    flex-direction: column;
+    gap: 0.375rem;
+    width: 100%;
+  }
+
+  .object-item {
+    display: flex;
+    gap: 0.25rem;
+    align-items: center;
+  }
+
+  .input_key {
+    flex: 0 0 35%;
+    min-width: 0;
+  }
+
+  .separator {
+    color: var(--c-basic-500);
+    font-weight: 500;
+  }
+
+  .input.input_value {
+    flex: 1;
+    min-width: 0;
+  }
+
+  .btn_remove {
+    width: 1.5rem;
+    height: 1.5rem;
+    padding: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    border-radius: 0.125rem;
+  }
+
+  .btn {
+    max-width: 8.5rem;
+  }
+
+  .plus {
+    display: block;
+    margin-right: 0.25rem;
+  }
+</style>

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

@@ -0,0 +1,156 @@
+<script lang="ts">
+  let {
+    value,
+    onChange,
+    min = 0,
+    max = 100,
+    step = 1,
+  }: {
+    value: number | null
+    onChange: (value: number | null) => void
+    min?: number
+    max?: number
+    step?: number
+  } = $props()
+
+  let isUnset = $derived(value === undefined || value === null)
+</script>
+
+<div class="row">
+  <div class="slider-wrapper">
+    <input
+      class="range"
+      type="range"
+      {min}
+      {max}
+      {step}
+      value={value ?? min}
+      oninput={(e) => {
+        const newValue = parseFloat((e.currentTarget as HTMLInputElement).value)
+        onChange(newValue)
+      }}
+    />
+  </div>
+  <div class="value">{isUnset ? '-' : value}</div>
+  <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">
+  @use './button_unset.scss';
+
+  .row {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+  }
+
+  .slider-wrapper {
+    flex: 1;
+    display: flex;
+    align-items: center;
+    height: 1.5rem;
+  }
+
+  .range {
+    width: 100%;
+    cursor: pointer;
+    -webkit-appearance: none;
+    appearance: none;
+    background: transparent;
+    outline: none;
+    padding: 0;
+    margin: 0;
+  }
+
+  .range::-webkit-slider-runnable-track {
+    width: 100%;
+    height: 0.25rem;
+    background-color: var(--c-basic-250);
+    border-radius: 0.125rem;
+    border: none;
+  }
+
+  .range::-webkit-slider-thumb {
+    -webkit-appearance: none;
+    appearance: none;
+    width: 1.125rem;
+    height: 1.125rem;
+    background: var(--c-primary);
+    border-radius: 50%;
+    cursor: pointer;
+    box-shadow: 0 1px 0.25rem rgba(0, 0, 0, 0.3);
+    margin-top: -8px;
+  }
+
+  .range::-webkit-slider-thumb:hover {
+    background: var(--c-primary-hover, var(--c-primary));
+  }
+
+  .range::-moz-range-track {
+    width: 100%;
+    height: 0.25rem;
+    background: var(--c-basic-300);
+    border-radius: 0.125rem;
+    border: none;
+  }
+
+  .range::-moz-range-thumb {
+    width: 1.125rem;
+    height: 1.125rem;
+    background: var(--c-primary);
+    border: 0.125rem solid var(--c-basic-0);
+    border-radius: 50%;
+    cursor: pointer;
+    box-shadow: 0 1px 0.25rem rgba(0, 0, 0, 0.3);
+  }
+
+  .range::-moz-range-thumb:hover {
+    background: var(--c-primary-hover, var(--c-primary));
+  }
+
+  .range:focus {
+    outline: none;
+  }
+
+  .range:focus::-webkit-slider-thumb {
+    box-shadow:
+      0 0 0 0.188rem var(--c-primary-bg),
+      0 1px 0.25rem rgba(0, 0, 0, 0.3);
+  }
+
+  .range:focus::-moz-range-thumb {
+    box-shadow:
+      0 0 0 0.188rem var(--c-primary-bg),
+      0 1px 0.25rem rgba(0, 0, 0, 0.3);
+  }
+
+  .value {
+    min-width: 3rem;
+    text-align: right;
+    font-size: 0.938rem;
+    font-weight: 500;
+    color: var(--c-basic-800);
+  }
+</style>

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

@@ -0,0 +1,233 @@
+<script>
+  let { value, onChange, options = [], control = 'dropdown' } = $props()
+
+  let isUnset = $derived(!value || value === undefined || value === null)
+</script>
+
+{#if control === 'radio'}
+  <div class="radio-group">
+    {#each options as option, index (option.value ?? option ?? index)}
+      {@const optionValue = option.value ?? option}
+      {@const optionLabel = option.label ?? option}
+      <label class="radio-option">
+        <input
+          type="radio"
+          name="radio-{Math.random()}"
+          value={optionValue}
+          checked={value === optionValue}
+          onchange={(e) => onChange(e.currentTarget.value)}
+        />
+        <span class="radio-label">{optionLabel}</span>
+      </label>
+    {/each}
+  </div>
+  <div class="unset-area">
+    {#if isUnset}
+      <div class="unset-info radio-unset">is not set</div>
+    {:else}
+      <button
+        class="btn_unset radio-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>
+{:else}
+  <div class="row">
+    <div class="container">
+      <select
+        class="select"
+        value={value ?? ''}
+        onchange={(e) => onChange(e.currentTarget.value)}
+      >
+        {#if !value}
+          <option value="" disabled>Select an option...</option>
+        {/if}
+        {#each options as option, index (option.value ?? option ?? index)}
+          <option value={option.value ?? option}>
+            {option.label ?? option}
+          </option>
+        {/each}
+      </select>
+      <svg
+        class="icon"
+        xmlns="http://www.w3.org/2000/svg"
+        width="20"
+        height="20"
+        viewBox="0 0 24 24"
+        fill="none"
+        stroke="currentColor"
+        stroke-width="1.5"
+        stroke-linecap="round"
+        stroke-linejoin="round"
+      >
+        <path d="M6 9l6 6 6-6" />
+      </svg>
+    </div>
+    <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>
+{/if}
+
+<style lang="scss">
+  @use './button_unset.scss';
+
+  .row {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+  }
+
+  .container {
+    position: relative;
+    display: block;
+    flex: 1;
+  }
+
+  .select {
+    padding: 0.125rem 0.5rem;
+    width: 100%;
+    height: 1.5rem;
+    border: 1px solid var(--c-primary);
+    border-radius: 0.125rem;
+    background-color: var(--c-basic-0);
+    font-size: 0.938rem;
+    color: var(--c-basic-800);
+    cursor: pointer;
+    appearance: none;
+    -webkit-appearance: none;
+    -moz-appearance: none;
+  }
+
+  .select:focus {
+    outline: none;
+    box-shadow: 0 0 0 1px var(--c-primary);
+  }
+
+  .select:disabled {
+    opacity: 0.5;
+    cursor: not-allowed;
+  }
+
+  .icon {
+    position: absolute;
+    top: 50%;
+    right: 0.5rem;
+    transform: translateY(-50%);
+    color: var(--c-primary);
+    pointer-events: none;
+  }
+
+  /* Radio variant styles */
+  .radio-group {
+    display: flex;
+    flex-direction: column;
+    gap: 0.5rem;
+  }
+
+  .radio-option {
+    display: flex;
+    align-items: center;
+    gap: 0.5rem;
+    cursor: pointer;
+    font-size: 0.938rem;
+    color: var(--c-basic-700);
+  }
+
+  .radio-option:hover {
+    color: var(--c-basic-800);
+  }
+
+  .radio-label {
+    user-select: none;
+  }
+
+  input[type='radio'] {
+    cursor: pointer;
+    margin: 0;
+    width: 1.125rem;
+    height: 1.125rem;
+    border: 1px solid var(--c-primary);
+    background-color: var(--c-basic-0);
+  }
+
+  @supports (appearance: none) {
+    input[type='radio'] {
+      appearance: none;
+      position: relative;
+      border-radius: 50%;
+      transition: all 0.15s ease;
+    }
+
+    input[type='radio']:hover {
+      border-color: var(--c-primary);
+    }
+
+    input[type='radio']:checked {
+      border-color: var(--c-primary);
+      background: var(--c-primary);
+    }
+
+    input[type='radio']:checked::before {
+      content: '';
+      position: absolute;
+      top: 50%;
+      left: 50%;
+      transform: translate(-50%, -50%);
+      width: 0.375rem;
+      height: 0.375rem;
+      border-radius: 50%;
+      background-color: var(--c-basic-0);
+    }
+
+    input[type='radio']:focus-visible {
+      outline: none;
+      box-shadow: 0 0 0 1px var(--c-primary);
+    }
+  }
+
+  .radio-unset,
+  .radio-btn-unset {
+    margin: 0.75rem 0 0;
+  }
+
+  .radio-unset {
+    line-height: 1.25rem;
+  }
+</style>

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

@@ -0,0 +1,85 @@
+<script lang="ts">
+  let {
+    value,
+    onChange,
+    control = 'text',
+    numberOfRows = 4,
+  }: {
+    value: string
+    onChange: (value: string) => void
+    control?: 'text' | 'textarea'
+    numberOfRows?: number
+  } = $props()
+
+  let isUnset = $derived(!value || value === undefined || value === null)
+</script>
+
+<div class="row">
+  <div class="container">
+    {#if control === 'textarea'}
+      <textarea
+        class="input textarea"
+        rows={numberOfRows}
+        value={String(value ?? '')}
+        oninput={(e) => {
+          onChange(String((e.currentTarget as HTMLTextAreaElement).value ?? ''))
+        }}
+      ></textarea>
+    {:else}
+      <input
+        class="input"
+        type="text"
+        value={String(value ?? '')}
+        oninput={(e) => {
+          onChange(String((e.currentTarget as HTMLInputElement).value ?? ''))
+        }}
+      />
+    {/if}
+  </div>
+  <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">
+  @use './input.scss';
+  @use './button_unset.scss';
+
+  .row {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+  }
+
+  .container {
+    flex: 1;
+    display: block;
+  }
+
+  .textarea {
+    resize: vertical;
+    height: auto;
+    line-height: 1.4;
+    padding: 0.375rem 0.5rem;
+  }
+</style>

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

@@ -0,0 +1,64 @@
+<script lang="ts">
+  let {
+    value,
+    onChange,
+  }: { value: string; onChange: (value: string) => void } = $props()
+
+  let isUnset = $derived(!value || value === undefined || value === null)
+</script>
+
+<div class="row">
+  <input
+    class="input"
+    type="time"
+    value={value ?? ''}
+    onchange={(e) => {
+      const newValue = (e.currentTarget as HTMLInputElement).value
+      onChange(newValue || (undefined as any))
+    }}
+  />
+  <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">
+  @use './input.scss';
+  @use './button_unset.scss';
+
+  .row {
+    display: flex;
+    gap: 0.5rem;
+    align-items: center;
+  }
+
+  input[type='time'] {
+    cursor: pointer;
+    flex: 1;
+  }
+
+  input[type='time']::-webkit-calendar-picker-indicator {
+    cursor: pointer;
+    color: var(--c-primary);
+  }
+</style>