control layout updates

ui/src/components/ParameterField.jsx

@@ -1,9 +1,9 @@
 import Wheel from "@uiw/react-color-wheel";
 import { hsvaToRgba, rgbaToHsva } from "@uiw/color-convert";
-import { Copy, RotateCcw, Zap } from "lucide-react";
+import { RotateCcw, Zap } from "lucide-react";
+import { useEffect, useRef, useState } from "react";
 
 import { useThrottledParameterValue } from "../hooks/useThrottledParameterValue";
-import { ParameterValueDisplay } from "./ParameterValueDisplay";
 
 function valuesMatch(left, right) {
   return JSON.stringify(left) === JSON.stringify(right);
@@ -23,7 +23,7 @@ function ParameterHeader({ layer, parameter, onReset, resetDisabled }) {
     <div className="parameter__header">
       <div className="parameter__title">
         <label>{parameter.label}</label>
-        {parameter.description ? <p>{parameter.description}</p> : null}
+        {parameter.description ? <p title={parameter.description}>{parameter.description}</p> : null}
       </div>
       <button
         type="button"
@@ -32,8 +32,7 @@ function ParameterHeader({ layer, parameter, onReset, resetDisabled }) {
         aria-label={`Copy OSC route ${oscRoute}`}
         onClick={copyRoute}
       >
-        <span>{oscRoute}</span>
+        <span aria-hidden="true">OSC</span>
-        <Copy size={13} strokeWidth={1.75} aria-hidden="true" />
       </button>
       <button
         type="button"
@@ -91,12 +90,12 @@ function hsvaToColorValue(hsva, alpha) {
 }
 
 export function ParameterField({ layer, parameter, onParameterChange }) {
+  const [colorPickerOpen, setColorPickerOpen] = useState(false);
+  const colorControlRef = useRef(null);
   const {
-    appliedValue,
     beginInteraction,
     draftValue,
     endInteraction,
-    isPending,
     scheduleSendValue,
     sendValue,
   } = useThrottledParameterValue(parameter, onParameterChange);
@@ -108,6 +107,32 @@ export function ParameterField({ layer, parameter, onParameterChange }) {
       sendValue(defaultValue);
     }
   };
+
+  useEffect(() => {
+    if (!colorPickerOpen) {
+      return undefined;
+    }
+
+    function handlePointerDown(event) {
+      if (!colorControlRef.current || !colorControlRef.current.contains(event.target)) {
+        setColorPickerOpen(false);
+      }
+    }
+
+    function handleKeyDown(event) {
+      if (event.key === "Escape") {
+        setColorPickerOpen(false);
+      }
+    }
+
+    document.addEventListener("pointerdown", handlePointerDown, true);
+    document.addEventListener("keydown", handleKeyDown);
+    return () => {
+      document.removeEventListener("pointerdown", handlePointerDown, true);
+      document.removeEventListener("keydown", handleKeyDown);
+    };
+  }, [colorPickerOpen]);
+
   const header = (
     <ParameterHeader
       layer={layer}
@@ -121,36 +146,37 @@ export function ParameterField({ layer, parameter, onParameterChange }) {
     return (
       <section className="parameter">
         {header}
-        <div className="parameter__pair">
+        <div className="parameter__control">
-          <input
+          <div className="parameter__pair">
-            type="range"
+            <input
-            min={parameter.min?.[0] ?? 0}
+              type="range"
-            max={parameter.max?.[0] ?? 1}
+              min={parameter.min?.[0] ?? 0}
-            step={parameter.step?.[0] ?? 0.01}
+              max={parameter.max?.[0] ?? 1}
-            value={draftValue}
+              step={parameter.step?.[0] ?? 0.01}
-            onMouseDown={beginInteraction}
+              value={draftValue}
-            onPointerDown={beginInteraction}
+              onMouseDown={beginInteraction}
-            onTouchStart={beginInteraction}
+              onPointerDown={beginInteraction}
-            onChange={(event) => scheduleSendValue(Number(event.target.value))}
+              onTouchStart={beginInteraction}
-            onMouseUp={endInteraction}
+              onChange={(event) => scheduleSendValue(Number(event.target.value))}
-            onTouchEnd={endInteraction}
+              onMouseUp={endInteraction}
-            onPointerUp={endInteraction}
+              onTouchEnd={endInteraction}
-            onKeyDown={beginInteraction}
+              onPointerUp={endInteraction}
-            onKeyUp={endInteraction}
+              onKeyDown={beginInteraction}
-            onBlur={endInteraction}
+              onKeyUp={endInteraction}
-          />
+              onBlur={endInteraction}
-          <input
+            />
-            type="number"
+            <input
-            min={parameter.min?.[0] ?? ""}
+              type="number"
-            max={parameter.max?.[0] ?? ""}
+              min={parameter.min?.[0] ?? ""}
-            step={parameter.step?.[0] ?? 0.01}
+              max={parameter.max?.[0] ?? ""}
-            value={draftValue}
+              step={parameter.step?.[0] ?? 0.01}
-            onFocus={beginInteraction}
+              value={draftValue}
-            onChange={(event) => sendValue(Number(event.target.value))}
+              onFocus={beginInteraction}
-            onBlur={endInteraction}
+              onChange={(event) => sendValue(Number(event.target.value))}
-          />
+              onBlur={endInteraction}
+            />
+          </div>
         </div>
-        <ParameterValueDisplay parameterType={parameter.type} value={appliedValue} pending={isPending} />
       </section>
     );
   }
@@ -164,26 +190,28 @@ export function ParameterField({ layer, parameter, onParameterChange }) {
     return (
       <section className="parameter">
         {header}
-        <div className="parameter__pair">
+        <div className="parameter__control">
-          {Array.from({ length: 2 }, (_, index) => (
+          <div className="parameter__pair parameter__pair--vec2">
-            <input
+            {Array.from({ length: 2 }, (_, index) => (
-              key={index}
+              <input
-              type="number"
+                key={index}
-              min={parameter.min?.[index] ?? ""}
+                type="number"
-              max={parameter.max?.[index] ?? ""}
+                aria-label={`${parameter.label} ${index === 0 ? "X" : "Y"}`}
-              step={parameter.step?.[index] ?? 0.01}
+                min={parameter.min?.[index] ?? ""}
-              value={values[index]}
+                max={parameter.max?.[index] ?? ""}
-              onFocus={beginInteraction}
+                step={parameter.step?.[index] ?? 0.01}
-              onChange={(event) => {
+                value={values[index]}
-                const next = [...values];
+                onFocus={beginInteraction}
-                next[index] = Number(event.target.value);
+                onChange={(event) => {
-                sendValue(next);
+                  const next = [...values];
-              }}
+                  next[index] = Number(event.target.value);
-              onBlur={endInteraction}
+                  sendValue(next);
-            />
+                }}
-          ))}
+                onBlur={endInteraction}
+              />
+            ))}
+          </div>
         </div>
-        <ParameterValueDisplay parameterType={parameter.type} value={appliedValue} pending={isPending} />
       </section>
     );
   }
@@ -196,69 +224,84 @@ export function ParameterField({ layer, parameter, onParameterChange }) {
     const hsva = colorValueToHsva(values);
     const wheelHsva = { ...hsva, v: 100 };
     const sendHsva = (nextHsva) => scheduleSendValue(hsvaToColorValue(nextHsva, values[3]));
+    const updateColorComponent = (index, nextValue) => {
+      const next = [...values];
+      next[index] = Number(nextValue);
+      sendValue(next);
+    };
 
     return (
-      <section className="parameter">
+      <section className="parameter parameter--color">
         {header}
-        <div className="parameter__wheel-row">
+        <div className="parameter__control" ref={colorControlRef}>
-          <div className="parameter__color-stack">
+          <div className="parameter__color-compact">
-            <div
+            <button
-              className="parameter__wheel"
+              type="button"
-              onPointerDown={beginInteraction}
+              className="parameter__swatch-button"
-              onPointerUp={endInteraction}
+              title={`Open ${parameter.label} color picker`}
-              onPointerCancel={endInteraction}
+              aria-label={`Open ${parameter.label} color picker`}
-              onBlur={endInteraction}
+              onClick={() => setColorPickerOpen((open) => !open)}
             >
-              <Wheel
+              <span className="parameter__swatch" style={{ background: colorValueToHex(values) }} aria-hidden="true" />
-                color={wheelHsva}
+            </button>
-                width={196}
+            <div className="parameter__rgba-grid">
-                height={196}
+              {["R", "G", "B", "A"].map((label, index) => (
-                onChange={(color) => sendHsva({ ...color.hsva, v: hsva.v })}
+                <label key={label} className="parameter__rgba-field">
-              />
+                  <span>{label}</span>
+                  <input
+                    type="number"
+                    min={parameter.min?.[index] ?? 0}
+                    max={parameter.max?.[index] ?? 1}
+                    step={parameter.step?.[index] ?? 0.01}
+                    value={values[index]}
+                    onFocus={beginInteraction}
+                    onChange={(event) => updateColorComponent(index, event.target.value)}
+                    onBlur={endInteraction}
+                  />
+                </label>
+              ))}
             </div>
-            <label className="parameter__value-slider">
+          </div>
-              <input
+          {colorPickerOpen ? (
-                type="range"
+            <div className="parameter__color-popover">
-                min={0}
+              <div
-                max={100}
+                className="parameter__wheel"
-                step={1}
-                value={Math.round(hsva.v)}
-                aria-label={`${parameter.label} value`}
-                onMouseDown={beginInteraction}
                 onPointerDown={beginInteraction}
-                onTouchStart={beginInteraction}
-                onChange={(event) => sendHsva({ ...hsva, v: Number(event.target.value) })}
-                onMouseUp={endInteraction}
-                onTouchEnd={endInteraction}
                 onPointerUp={endInteraction}
-                onKeyDown={beginInteraction}
+                onPointerCancel={endInteraction}
-                onKeyUp={endInteraction}
                 onBlur={endInteraction}
-              />
+              >
-            </label>
+                <Wheel
-          </div>
+                  color={wheelHsva}
-          <div className="parameter__color-bottom">
+                  width={196}
-            <label className="parameter__alpha">
+                  height={196}
-              <span>Alpha</span>
+                  onChange={(color) => sendHsva({ ...color.hsva, v: hsva.v })}
-              <input
+                />
-                type="number"
+              </div>
-                min={parameter.min?.[3] ?? 0}
+              <label className="parameter__value-slider">
-                max={parameter.max?.[3] ?? 1}
+                <span>Value</span>
-                step={parameter.step?.[3] ?? 0.01}
+                <input
-                value={values[3]}
+                  type="range"
-                onFocus={beginInteraction}
+                  min={0}
-                onChange={(event) => {
+                  max={100}
-                  const next = [...values];
+                  step={1}
-                  next[3] = Number(event.target.value);
+                  value={Math.round(hsva.v)}
-                  sendValue(next);
+                  aria-label={`${parameter.label} value`}
-                }}
+                  onMouseDown={beginInteraction}
-                onBlur={endInteraction}
+                  onPointerDown={beginInteraction}
-              />
+                  onTouchStart={beginInteraction}
-            </label>
+                  onChange={(event) => sendHsva({ ...hsva, v: Number(event.target.value) })}
-            <div className="parameter__swatch" style={{ background: colorValueToHex(values) }} aria-hidden="true" />
+                  onMouseUp={endInteraction}
-          </div>
+                  onTouchEnd={endInteraction}
+                  onPointerUp={endInteraction}
+                  onKeyDown={beginInteraction}
+                  onKeyUp={endInteraction}
+                  onBlur={endInteraction}
+                />
+              </label>
+            </div>
+          ) : null}
         </div>
-        <ParameterValueDisplay parameterType={parameter.type} value={appliedValue} pending={isPending} />
       </section>
     );
   }
@@ -267,17 +310,18 @@ export function ParameterField({ layer, parameter, onParameterChange }) {
     return (
       <section className="parameter">
         {header}
-        <label className="toggle toggle--field">
+        <div className="parameter__control">
-          <input
+          <label className="toggle toggle--field">
-            type="checkbox"
+            <input
-            checked={Boolean(draftValue)}
+              type="checkbox"
-            onFocus={beginInteraction}
+              checked={Boolean(draftValue)}
-            onChange={(event) => sendValue(event.target.checked)}
+              onFocus={beginInteraction}
-            onBlur={endInteraction}
+              onChange={(event) => sendValue(event.target.checked)}
-          />
+              onBlur={endInteraction}
-          <span>{draftValue ? "Enabled" : "Disabled"}</span>
+            />
-        </label>
+            <span>{draftValue ? "Enabled" : "Disabled"}</span>
-        <ParameterValueDisplay parameterType={parameter.type} value={appliedValue} pending={isPending} />
+          </label>
+        </div>
       </section>
     );
   }
@@ -286,19 +330,20 @@ export function ParameterField({ layer, parameter, onParameterChange }) {
     return (
       <section className="parameter">
         {header}
-        <select
+        <div className="parameter__control">
-          value={draftValue}
+          <select
-          onFocus={beginInteraction}
+            value={draftValue}
-          onChange={(event) => sendValue(event.target.value)}
+            onFocus={beginInteraction}
-          onBlur={endInteraction}
+            onChange={(event) => sendValue(event.target.value)}
-        >
+            onBlur={endInteraction}
-          {parameter.options.map((option) => (
+          >
-            <option key={option.value} value={option.value}>
+            {parameter.options.map((option) => (
-              {option.label}
+              <option key={option.value} value={option.value}>
-            </option>
+                {option.label}
-          ))}
+              </option>
-        </select>
+            ))}
-        <ParameterValueDisplay parameterType={parameter.type} value={appliedValue} pending={isPending} />
+          </select>
+        </div>
       </section>
     );
   }
@@ -307,16 +352,17 @@ export function ParameterField({ layer, parameter, onParameterChange }) {
     return (
       <section className="parameter">
         {header}
-        <input
+        <div className="parameter__control">
-          type="text"
+          <input
-          maxLength={parameter.maxLength ?? 64}
+            type="text"
-          placeholder={parameter.defaultValue ? `Default: ${parameter.defaultValue}` : ""}
+            maxLength={parameter.maxLength ?? 64}
-          value={draftValue ?? ""}
+            placeholder={parameter.defaultValue ? `Default: ${parameter.defaultValue}` : ""}
-          onFocus={beginInteraction}
+            value={draftValue ?? ""}
-          onChange={(event) => sendValue(event.target.value)}
+            onFocus={beginInteraction}
-          onBlur={endInteraction}
+            onChange={(event) => sendValue(event.target.value)}
-        />
+            onBlur={endInteraction}
-        <ParameterValueDisplay parameterType={parameter.type} value={appliedValue} pending={isPending} />
+          />
+        </div>
       </section>
     );
   }
@@ -326,15 +372,16 @@ export function ParameterField({ layer, parameter, onParameterChange }) {
     return (
       <section className="parameter">
         {header}
-        <button
+        <div className="parameter__control">
-          type="button"
+          <button
-          className="button-with-icon parameter__trigger"
+            type="button"
-          onClick={() => sendValue(triggerCount + 1)}
+            className="button-with-icon parameter__trigger"
-        >
+            onClick={() => sendValue(triggerCount + 1)}
-          <Zap size={16} strokeWidth={1.9} aria-hidden="true" />
+          >
-          <span>Trigger</span>
+            <Zap size={16} strokeWidth={1.9} aria-hidden="true" />
-        </button>
+            <span>Trigger</span>
-        <ParameterValueDisplay parameterType={parameter.type} value={appliedValue} pending={isPending} />
+          </button>
+        </div>
       </section>
     );
   }

ui/src/styles.css

@@ -701,7 +701,6 @@ pre {
 .shader-picker__meta,
 .shader-picker__empty,
 .parameter__value,
-.parameter__alpha,
 .parameter__osc,
 .parameter__reset {
   color: var(--app-muted);
@@ -876,21 +875,27 @@ pre {
 }
 
 .parameter-grid {
-  grid-template-columns: repeat(auto-fit, minmax(17.5rem, 1fr));
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 32rem), 1fr));
-  gap: 0.625rem;
+  gap: 0.5rem;
+  align-items: start;
 }
 
 .parameter {
-  padding: 0.75rem;
+  position: relative;
+  grid-template-columns: minmax(16rem, 0.9fr) minmax(18rem, 1.35fr);
+  gap: 0.625rem;
+  align-items: center;
+  padding: 0.55rem 0.65rem;
   border: 1px solid var(--app-border);
   background: #141a23;
 }
 
 .parameter__header {
   display: grid;
-  grid-template-columns: minmax(5.5rem, auto) minmax(0, 1fr) auto;
+  grid-template-columns: minmax(0, 1fr) auto auto;
-  gap: 0.5rem;
+  gap: 0.35rem;
-  align-items: start;
+  align-items: center;
+  min-width: 0;
 }
 
 .parameter__title {
@@ -899,23 +904,30 @@ pre {
 
 .parameter__title label {
   display: block;
+  overflow: hidden;
+  font-size: 0.9rem;
+  line-height: 1.2;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .parameter__title p {
-  margin: 0.2rem 0 0;
+  margin: 0.12rem 0 0;
+  overflow: hidden;
   color: var(--app-muted);
-  font-size: 0.82rem;
+  font-size: 0.76rem;
-  line-height: 1.3;
+  line-height: 1.25;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }
 
 .parameter__osc,
 .parameter__reset {
   display: inline-flex;
   align-items: center;
-  justify-content: flex-end;
+  justify-content: center;
-  gap: 0.375rem;
+  width: 24px;
-  width: auto;
+  min-width: 24px;
-  min-width: 0;
   min-height: 24px;
   padding: 0;
   border: 0;
@@ -923,18 +935,16 @@ pre {
   font-weight: 500;
 }
 
-.parameter__reset {
+.parameter__osc {
-  justify-content: center;
+  width: 34px;
-  width: 24px;
+  min-width: 34px;
-  min-width: 24px;
+  font-size: 0.66rem;
-  color: var(--app-muted);
+  font-weight: 800;
+  letter-spacing: 0.02em;
 }
 
-.parameter__osc span {
+.parameter__reset {
-  min-width: 0;
+  color: var(--app-muted);
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
 }
 
 .parameter__osc svg,
@@ -946,29 +956,89 @@ pre {
   color: var(--app-warning);
 }
 
+.parameter__control {
+  position: relative;
+  min-width: 0;
+}
+
 .parameter__pair {
   display: grid;
-  grid-template-columns: repeat(auto-fit, minmax(5.125rem, 1fr));
+  grid-template-columns: minmax(8rem, 1fr) minmax(5.25rem, 7rem);
   gap: 0.5rem;
   align-items: center;
 }
 
+.parameter__pair--vec2 {
+  grid-template-columns: repeat(2, minmax(5.25rem, 1fr));
+}
+
 .parameter__pair input[type="range"] {
   min-width: 7.5rem;
 }
 
-.parameter__wheel-row {
+.parameter__color-compact {
   display: grid;
-  grid-template-columns: minmax(0, 196px);
+  grid-template-columns: auto minmax(0, 1fr);
-  gap: 0.625rem;
+  gap: 0.5rem;
-  align-items: start;
+  align-items: end;
-  justify-content: center;
 }
 
-.parameter__color-stack {
+.parameter__swatch-button {
+  width: 42px;
+  min-width: 42px;
+  height: 42px;
+  min-height: 42px;
+  padding: 0.25rem;
+  border-color: var(--app-border);
+  background: var(--app-surface-2);
+}
+
+.parameter__swatch-button:hover:not(:disabled) {
+  background: var(--app-surface-2);
+  border-color: rgba(26, 156, 219, 0.55);
+}
+
+.parameter__swatch {
+  display: block;
+  width: 100%;
+  min-height: 100%;
+  border: 1px solid rgba(255, 255, 255, 0.28);
+  border-radius: var(--app-radius-sm);
+}
+
+.parameter__rgba-grid {
+  display: grid;
+  grid-template-columns: repeat(4, minmax(3.5rem, 1fr));
+  gap: 0.35rem;
+}
+
+.parameter__rgba-field {
+  display: grid;
+  gap: 0.15rem;
+  color: var(--app-muted);
+  font-size: 0.68rem;
+  font-weight: 700;
+}
+
+.parameter__rgba-field input {
+  min-height: 32px;
+  padding: 0.35rem 0.45rem;
+  font-size: 0.82rem;
+}
+
+.parameter__color-popover {
+  position: absolute;
+  z-index: 20;
+  top: calc(100% + 0.45rem);
+  left: 0;
   display: grid;
   gap: 0.625rem;
-  width: 196px;
+  width: 224px;
+  padding: 0.75rem;
+  border: 1px solid var(--app-border);
+  border-radius: var(--app-radius);
+  background: #10151d;
+  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45);
 }
 
 .parameter__wheel {
@@ -988,24 +1058,13 @@ pre {
   display: block;
 }
 
-.parameter__color-bottom {
-  display: grid;
-  grid-template-columns: minmax(0, 1fr) minmax(4.5rem, 0.85fr);
-  gap: 0.625rem;
-  align-items: end;
-  width: 196px;
-}
-
-.parameter__swatch {
-  width: 100%;
-  min-height: 38px;
-  border: 1px solid var(--app-border);
-  border-radius: var(--app-radius-sm);
-}
-
 .parameter__value-slider {
-  display: block;
+  display: grid;
+  gap: 0.25rem;
   width: 196px;
+  color: var(--app-muted);
+  font-size: 0.72rem;
+  font-weight: 700;
 }
 
 .parameter__value-slider input[type="range"] {
@@ -1064,10 +1123,8 @@ pre {
   line-height: 1;
 }
 
-.parameter__alpha {
+.parameter__trigger {
-  display: grid;
+  min-width: 7rem;
-  gap: 0.25rem;
-  font-weight: 600;
 }
 
 .toggle {
@@ -1156,8 +1213,8 @@ pre {
   .summary-grid,
   .kv-rows,
   .parameter-grid,
-  .parameter__header,
+  .parameter,
-  .parameter__wheel-row {
+  .parameter__header {
     grid-template-columns: 1fr;
   }
 
@@ -1169,12 +1226,20 @@ pre {
     width: 24px;
   }
 
-  .parameter__swatch {
+  .parameter__pair,
-    grid-column: auto;
+  .parameter__color-compact {
+    grid-template-columns: 1fr;
   }
 
-  .parameter__color-stack,
+  .parameter__rgba-grid {
-  .parameter__color-bottom,
+    grid-template-columns: repeat(2, minmax(0, 1fr));
+  }
+
+  .parameter__swatch-button {
+    width: 100%;
+  }
+
+  .parameter__color-popover,
   .parameter__value-slider,
   .parameter__value-slider input[type="range"] {
     width: 100%;