Miscellaneous parameter improvements

package.json

@@ -40,9 +40,9 @@
         "help:preview:cmd": "echo Previews w/o rebuild; needed for e2e tests.",
         "preview:cmd": "vite --config etc/vite.config.ts preview",
         "help:test:unit": "echo Typechecks and runs unit tests.",
-        "test:unit": "sh -c 'make -f etc/Makefile testunit \"cl_args=$@\"' phony",
+        "test:unit": "sh -xc 'make -f etc/Makefile testunit \"cl_args=$*\"' phony",
         "help:test:e2e": "echo Runs end-to-end in-browser tests via Docker.",
-        "test:e2e": "sh -c 'make -f etc/Makefile e2e/certificate \"cl_args=$@\"' phony",
+        "test:e2e": "sh -xc 'make -f etc/Makefile e2e/certificate \"cl_args=$*\"' phony",
         "help:test:e2e:cmd": "run-s -s help:test:e2e:cmd-*",
         "help:test:e2e:cmd-1": "echo Runs end-to-end tests directly.",
         "help:test:e2e:cmd-2": "echo However, note that it does not rebuild",
@@ -52,7 +52,7 @@
         "help:test:e2e:cmd-6": "echo use by other scripts.",
         "test:e2e:cmd": "playwright test -c e2e/playwright.config.ts",
         "help:test:e2e:report": "echo Runs e2e and opens report in browser",
-        "test:e2e:report": "sh -c 'make -f etc/Makefile playreport \"cl_args=$@\"' phony",
+        "test:e2e:report": "sh -xc 'make -f etc/Makefile playreport \"cl_args=$*\"' phony",
         "help:test:e2e:ui": "echo Runs interactive end-to-end tests directly.",
         "test:e2e:ui": "npm run build && npm run test:e2e:cmd -- --ui",
         "help:typecheck": "run-s -s help:typecheck:*",

src/components/ParamEditor.vue

@@ -222,15 +222,23 @@
     }
 
     .stacked-param {
-        margin-top: 24px;
+        margin-top: 16px;
         margin-bottom: 0px;
     }
 
+    .stacked-param + .stacked-param {
+        margin-top: 24px;
+    }
+
     .inline-param {
-        margin-top: 16px;
+        margin-top: 8px;
         margin-bottom: 0px;
     }
 
+    .stacked-param + .inline-param {
+        margin-top: 16px;
+    }
+
     .sub-stacked-param {
         border-left: 1px solid var(--ns-color-black);
         margin-left: 8px;

src/components/ParamField.vue

@@ -14,6 +14,7 @@
                     :id="paramName"
                     v-model:value="colorValue"
                     v-model:show-picker="showPicker"
+                    show-alpha
                     :add-color="param.type === ParamType.COLOR_ARRAY"
                     @click="maybeTogglePicker"
                     @update:show-picker="reconcilePicker" />
@@ -29,14 +30,22 @@
                         {{ name }}
                     </option>
                 </select>
+                <textarea
+                    v-else-if="param.type === ParamType.FORMULA"
+                    :id="paramName"
+                    :class="!status.isValid() ? 'error-field' : ''"
+                    :value="value"
+                    :placeholder="placehold(param)"
+                    @keyup.enter="growArea($event)"
+                    @input="updateString($event)" />
                 <input
                     v-else
                     :id="paramName"
                     type="text"
                     :class="!status.isValid() ? 'error-field' : ''"
                     :value="value"
                     :placeholder="placehold(param)"
-                    @keyup.enter="blurField(paramName)"
+                    @keyup.enter="blurField($event)"
                     @input="updateString($event)">
             </label>
 
@@ -99,19 +108,31 @@
         return map
     }
 
-    function blurField(id: string) {
-        window.document.getElementById(id)?.blur()
+    function blurField(e: Event) {
+        const field = e.target
+        if (field instanceof HTMLElement) field.blur()
+    }
+    function growArea(e: Event) {
+        const area = e.target
+        if (area instanceof HTMLTextAreaElement) {
+            const curheight = area.getBoundingClientRect().height
+            area.style.height = `${curheight + 14}px`
+        }
     }
 
     function updateBoolean(e: Event) {
-        blurField(props.paramName)
+        blurField(e)
         const inp = e.target as HTMLInputElement
         emit('updateParam', inp.checked + '')
     }
 
     function updateString(e: Event) {
         const t = e.target
-        if (t instanceof HTMLSelectElement || t instanceof HTMLInputElement) {
+        if (
+            t instanceof HTMLSelectElement
+            || t instanceof HTMLInputElement
+            || t instanceof HTMLTextAreaElement
+        ) {
             emit('updateParam', t.value)
         }
     }
@@ -253,6 +274,18 @@
         }
     }
 
+    textarea {
+        display: block;
+        border: none;
+        border-bottom: 1.5px solid var(--ns-color-black);
+        padding-bottom: 0px;
+        margin: 0px;
+        width: 100%;
+        height: 30px;
+        font-size: 14px;
+        resize: vertical;
+    }
+
     .param-description {
         font-size: 12px;
         color: var(--ns-color-grey);

src/shared/ParamType.ts

@@ -232,7 +232,7 @@ export const typeFunctions: {
             status.forbid(
                 freeVars.size,
                 `free variables limited to ${inputSymbols}; `
-                    + `please remove '${freeVars}'`
+                    + `please remove '${Array.from(freeVars).join(', ')}'`
             )
             status.forbid(
                 fmla.freefuncs.size,

src/shared/defineFeatured.ts

@@ -86,10 +86,11 @@ const featuredSIMs = [
         'Wait For It',
         'Turtle',
         'Formula',
-        'domain=-1+1&angles=30+120&steps=30+30&widths=2&strokeColor=%237a9f6f'
-            + '&bgColor=363071&speed=3&ruleMode=1&angleFormula=%7B%22-1%22%3A'
-            + '+30%2C+%221%22%3A+120%7D%5Bstring%28a%29%5D&stepFormula=%7B%22'
-            + '-1%22%3A+30%2C+%221%22%3A+30%7D%5Bstring%28a%29%5D&widthFormula'
+        'domain=-1+1&angles=30+120&steps=30+30&widths=2'
+            + '&strokeColor=%237a106080+%237a9f6f50&bgColor=363071&speed=3'
+            + '&angleFormula=%7B%22-1%22%3A+30%2C+%221%22%3A+120%7D'
+            + '%5Bstring%28a%29%5D&stepFormula=%7B%22-1%22%3A+30%2C'
+            + '+%221%22%3A+30%7D%5Bstring%28a%29%5D&widthFormula'
             + '=%7B%22-1%22%3A+2%2C+%221%22%3A+2%7D%5Bstring%28a%29%5D'
             + '&colorFormula=%7B%22-1%22%3A+%237a106080%2C+%221%22%3A'
             + '+%237a9f6f50%7D%5Bstring%28a%29%5D',