gardenjs 1.7.2 → 1.7.3

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

@@ -12,11 +12,11 @@
     componentName,
     das = {},
     devmodus,
-    gridSettings,
     panelExpanded,
     selectedExample,
     showGrid,
     showInspector,
+    showDistanceMeasure,
     stageContainerHeight,
     stageContainerMaxHeight,
     stageHeight,
@@ -25,7 +25,7 @@
     stageSize,
     stageStyle,
     stageWidth,
-    theme,
+    activeTheme,
     onSetStageContainerHeight,
     onSetStageContainerMaxHeight,
     onSetStageContainerWidth,
@@ -104,6 +104,16 @@
     }
   })
 
+  const valuesChanged = $derived.by(() => {
+    try {
+      return (
+        JSON.stringify(paramValues) !== JSON.stringify(selectedExampleInput)
+      )
+    } catch {
+      return false
+    }
+  })
+
   const resizeObserver = new ResizeObserver((entries) => {
     entries.forEach((entry) => {
       onUpdateStageRect(entry.contentRect)
@@ -152,6 +162,7 @@
         props: {
           params,
           values: paramValues,
+          valuesChanged,
           onChange: (prop, value) => {
             paramValues = { ...paramValues, [prop]: value }
           },
@@ -196,11 +207,11 @@
           selectedExample,
           componentName,
           stageSize,
-          theme,
+          activeTheme,
           appTheme,
           showInspector,
+          showDistanceMeasure,
           showGrid,
-          gridSettings,
           paramValues: paramValuesForPostMessage,
         },
         window.location

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

@@ -5,6 +5,7 @@
     examples = [],
     params,
     values,
+    valuesChanged = false,
     onChange,
     onReset,
     selected,
@@ -17,13 +18,17 @@
 <VerticalSplitPane
   {leftWidth}
   {maxWidth}
+  hideDragBar={false}
   onSetLeftWidth={(newLeftWidth) => (leftWidth = newLeftWidth)}
   onSetMaxWidth={(newMaxWidth) => (maxWidth = newMaxWidth)}
 >
   {#snippet left()}
     <ul class="examples">
       {#each examples as example, index (index)}
-        <li class:active={selected == example}>
+        <li
+          class:active={selected == example}
+          class:modified={selected == example && valuesChanged}
+        >
           <button onclick={() => onSelectExample(example)}>
             <span class="dot"></span>
             {example}
@@ -33,7 +38,7 @@
     </ul>
   {/snippet}
   {#snippet right()}
-    <ParamsPane {params} {values} {onChange} {onReset} />
+    <ParamsPane {params} {values} {valuesChanged} {onChange} {onReset} />
   {/snippet}
 </VerticalSplitPane>
 
@@ -81,6 +86,9 @@
     font-weight: 500;
     background-color: var(--c-primary-bg);
   }
+  .examples li.active.modified button {
+    background-color: var(--c-basic-100);
+  }
   .examples li.active button:focus-visible {
     background-color: var(--c-basic-150);
   }

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

@@ -14,7 +14,13 @@
   import TextInputControl from './controls/TextInputControl.svelte'
   import TimeControl from './controls/TimeControl.svelte'
 
-  let { params = [], values = {}, onChange, onReset } = $props()
+  let {
+    params = [],
+    values = {},
+    valuesChanged = false,
+    onChange,
+    onReset,
+  } = $props()
 
   const CONTROL_TYPES = [
     'checkbox',
@@ -60,21 +66,111 @@
 
   let openDescriptionKeys = new SvelteSet()
 
+  const paramsWithDescription = $derived(params.filter((p) => p.description))
+  const allDescriptionKeys = $derived(paramsWithDescription.map((p) => p.name))
+  const allDescriptionsOpen = $derived.by(() => {
+    const keys = allDescriptionKeys
+    if (keys.length === 0) return false
+    void openDescriptionKeys.size
+    return keys.every((k) => openDescriptionKeys.has(k))
+  })
+
   function toggleDescription(name) {
     if (openDescriptionKeys.has(name)) openDescriptionKeys.delete(name)
     else openDescriptionKeys.add(name)
   }
+
+  function toggleAllDescriptions() {
+    if (allDescriptionsOpen) {
+      allDescriptionKeys.forEach((k) => openDescriptionKeys.delete(k))
+    } else {
+      allDescriptionKeys.forEach((k) => openDescriptionKeys.add(k))
+    }
+  }
 </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 class="header-actions">
+      {#if paramsWithDescription.length > 0}
+        <button
+          type="button"
+          class="btn btn_descriptions"
+          title={allDescriptionsOpen
+            ? 'Collapse all descriptions'
+            : 'Expand all descriptions'}
+          aria-label={allDescriptionsOpen
+            ? 'Collapse all descriptions'
+            : 'Expand all descriptions'}
+          onclick={toggleAllDescriptions}
+        >
+          {#if allDescriptionsOpen}
+            <svg
+              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"
+              aria-hidden="true"
+            >
+              <path
+                d="M4 19.5v-15A2.5 2.5 0 016.5 2H19a1 1 0 011 1v18a1 1 0 01-1 1H6.5a1 1 0 010-5H20"
+              />
+            </svg>
+          {:else}
+            <svg
+              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"
+              aria-hidden="true"
+            >
+              <path
+                d="M12 7v14m-9-3a1 1 0 01-1-1V4a1 1 0 011-1h5a4 4 0 014 4 4 4 0 014-4h5a1 1 0 011 1v13a1 1 0 01-1 1h-6a3 3 0 00-3 3 3 3 0 00-3-3z"
+              />
+            </svg>
+          {/if}
+          <span class="btn-label"
+            >{allDescriptionsOpen ? 'Descriptions' : 'Descriptions'}</span
+          >
+        </button>
+      {/if}
+      {#if valuesChanged}
+        <button
+          class="btn"
+          title="Reset all parameters"
+          aria-label="Reset all parameters"
+          onclick={() => onReset?.()}
+        >
+          <svg
+            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"
+            aria-hidden="true"
+          >
+            <path d="M3 12a9 9 0 109-9 9.75 9.75 0 00-6.74 2.74L3 8" />
+            <path d="M3 3v5h5" />
+          </svg>
+          <span class="btn-label">Reset</span>
+        </button>
+      {/if}
+    </div>
   </div>
 
   {#if params.length === 0}
@@ -84,128 +180,141 @@
       {#each params as param (param.name)}
         {@const controlType = getControlType(param)}
         <div class="label-cell">
-          <span class="label">{param.label || param.name}</span>
-          {#if param.description}
-            <button
-              type="button"
-              class="info-btn"
-              title={openDescriptionKeys.has(param.name)
-                ? 'Close description'
-                : 'Show description'}
-              aria-label={openDescriptionKeys.has(param.name)
-                ? 'Close description'
-                : 'Show description'}
-              aria-expanded={openDescriptionKeys.has(param.name)}
-              onclick={() => toggleDescription(param.name)}
-            >
-              <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"
-                aria-hidden="true"
-                ><circle cx="12" cy="12" r="10" /><path
-                  d="M12 16v-4m0-4h.01"
-                /></svg
+          <div class="label-row">
+            <span class="label">{param.label || param.name}</span>
+            {#if param.description}
+              <button
+                type="button"
+                class="info-btn"
+                title={openDescriptionKeys.has(param.name)
+                  ? 'Close description'
+                  : 'Show description'}
+                aria-label={openDescriptionKeys.has(param.name)
+                  ? 'Close description'
+                  : 'Show description'}
+                aria-expanded={openDescriptionKeys.has(param.name)}
+                onclick={() => toggleDescription(param.name)}
               >
-            </button>
-          {/if}
+                <svg
+                  width="16"
+                  height="16"
+                  viewBox="0 0 16 16"
+                  xmlns="http://www.w3.org/2000/svg"
+                  fill-rule="evenodd"
+                  clip-rule="evenodd"
+                  stroke-linecap="round"
+                  stroke-linejoin="round"
+                  ><circle
+                    cx="12"
+                    cy="12"
+                    r="10"
+                    fill="none"
+                    stroke="#000"
+                    stroke-width="1.5"
+                    transform="scale(.66667)"
+                  /><path
+                    d="M8 10.667V8m0-2.667h.007"
+                    fill="none"
+                    stroke="#000"
+                    stroke-width="1.5"
+                  /></svg
+                >
+              </button>
+            {/if}
+          </div>
         </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] ?? null}
-              onChange={(v) => onChange?.(param.name, v)}
-            />
+        <div class="input-col">
+          {#if param.description && openDescriptionKeys.has(param.name)}
+            <div class="description">{param.description}</div>
           {/if}
+          <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] ?? undefined}
+                schema={param.schema ?? {}}
+                onChange={(v) => onChange?.(param.name, v)}
+              />
+            {:else if controlType === 'object'}
+              <ObjectControl
+                value={values?.[param.name] ?? undefined}
+                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] ?? null}
+                onChange={(v) => onChange?.(param.name, v)}
+              />
+            {/if}
+          </div>
         </div>
-        {#if param.description && openDescriptionKeys.has(param.name)}
-          <div class="description">{param.description}</div>
-        {/if}
       {/each}
     </div>
   {/if}
 </div>
 
-<style>
-  @import './controls/button.scss';
+<style lang="scss">
+  @use './controls/button.scss';
 
   .pane {
     width: 100%;
@@ -216,8 +325,15 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
+    min-height: 2.125rem;
     margin-bottom: 1rem;
   }
+  .header-actions {
+    display: flex;
+    align-items: center;
+    min-height: 2.125rem;
+    gap: 0.5rem;
+  }
   .title {
     font-size: 0.95rem;
     font-weight: 600;
@@ -233,20 +349,32 @@
     gap: 0.75rem;
     align-items: start;
   }
+  .input-col {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+    min-width: 0;
+  }
   .label-cell {
+    display: flex;
+    flex-direction: column;
+    gap: 0.25rem;
+  }
+  .label-row {
     display: flex;
     align-items: center;
     gap: 0.35rem;
   }
   .label {
-    margin: 0.313rem 0 0;
+    margin: 0;
+    line-height: 1.2;
     font-size: 0.938rem;
     font-weight: 500;
     color: var(--c-basic-900);
   }
   .info-btn {
     display: inline-flex;
-    margin: -0.15rem 0;
+    margin: 0;
     padding: 0.15rem;
     color: var(--c-basic-900);
   }
@@ -257,8 +385,7 @@
     color: var(--c-primary);
   }
   .description {
-    grid-column: 1 / -1;
-    margin: -0.25rem 0 0;
+    margin: 0;
     padding: 0.5rem 0.75rem;
     font-size: 0.813rem;
     color: var(--c-basic-800);