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,6 +146,7 @@ export function ParameterField({ layer, parameter, onParameterChange }) {
     return (
       <section className="parameter">
         {header}
+        <div className="parameter__control">
           <div className="parameter__pair">
             <input
               type="range"
@@ -150,7 +176,7 @@ export function ParameterField({ layer, parameter, onParameterChange }) {
               onBlur={endInteraction}
             />
           </div>
-        <ParameterValueDisplay parameterType={parameter.type} value={appliedValue} pending={isPending} />
+        </div>
       </section>
     );
   }
@@ -164,11 +190,13 @@ export function ParameterField({ layer, parameter, onParameterChange }) {
     return (
       <section className="parameter">
         {header}
-        <div className="parameter__pair">
+        <div className="parameter__control">
+          <div className="parameter__pair parameter__pair--vec2">
             {Array.from({ length: 2 }, (_, index) => (
               <input
                 key={index}
                 type="number"
+                aria-label={`${parameter.label} ${index === 0 ? "X" : "Y"}`}
                 min={parameter.min?.[index] ?? ""}
                 max={parameter.max?.[index] ?? ""}
                 step={parameter.step?.[index] ?? 0.01}
@@ -183,7 +211,7 @@ export function ParameterField({ layer, parameter, onParameterChange }) {
               />
             ))}
           </div>
-        <ParameterValueDisplay parameterType={parameter.type} value={appliedValue} pending={isPending} />
+        </div>
       </section>
     );
   }
@@ -196,12 +224,46 @@ 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">
+            <button
+              type="button"
+              className="parameter__swatch-button"
+              title={`Open ${parameter.label} color picker`}
+              aria-label={`Open ${parameter.label} color picker`}
+              onClick={() => setColorPickerOpen((open) => !open)}
+            >
+              <span className="parameter__swatch" style={{ background: colorValueToHex(values) }} aria-hidden="true" />
+            </button>
+            <div className="parameter__rgba-grid">
+              {["R", "G", "B", "A"].map((label, index) => (
+                <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>
+          </div>
+          {colorPickerOpen ? (
+            <div className="parameter__color-popover">
               <div
                 className="parameter__wheel"
                 onPointerDown={beginInteraction}
@@ -217,6 +279,7 @@ export function ParameterField({ layer, parameter, onParameterChange }) {
                 />
               </div>
               <label className="parameter__value-slider">
+                <span>Value</span>
                 <input
                   type="range"
                   min={0}
@@ -237,28 +300,8 @@ export function ParameterField({ layer, parameter, onParameterChange }) {
                 />
               </label>
             </div>
-          <div className="parameter__color-bottom">
+          ) : null}
-            <label className="parameter__alpha">
-              <span>Alpha</span>
-              <input
-                type="number"
-                min={parameter.min?.[3] ?? 0}
-                max={parameter.max?.[3] ?? 1}
-                step={parameter.step?.[3] ?? 0.01}
-                value={values[3]}
-                onFocus={beginInteraction}
-                onChange={(event) => {
-                  const next = [...values];
-                  next[3] = Number(event.target.value);
-                  sendValue(next);
-                }}
-                onBlur={endInteraction}
-              />
-            </label>
-            <div className="parameter__swatch" style={{ background: colorValueToHex(values) }} aria-hidden="true" />
         </div>
-        </div>
-        <ParameterValueDisplay parameterType={parameter.type} value={appliedValue} pending={isPending} />
       </section>
     );
   }
@@ -267,6 +310,7 @@ export function ParameterField({ layer, parameter, onParameterChange }) {
     return (
       <section className="parameter">
         {header}
+        <div className="parameter__control">
           <label className="toggle toggle--field">
             <input
               type="checkbox"
@@ -277,7 +321,7 @@ export function ParameterField({ layer, parameter, onParameterChange }) {
             />
             <span>{draftValue ? "Enabled" : "Disabled"}</span>
           </label>
-        <ParameterValueDisplay parameterType={parameter.type} value={appliedValue} pending={isPending} />
+        </div>
       </section>
     );
   }
@@ -286,6 +330,7 @@ export function ParameterField({ layer, parameter, onParameterChange }) {
     return (
       <section className="parameter">
         {header}
+        <div className="parameter__control">
           <select
             value={draftValue}
             onFocus={beginInteraction}
@@ -298,7 +343,7 @@ export function ParameterField({ layer, parameter, onParameterChange }) {
               </option>
             ))}
           </select>
-        <ParameterValueDisplay parameterType={parameter.type} value={appliedValue} pending={isPending} />
+        </div>
       </section>
     );
   }
@@ -307,6 +352,7 @@ export function ParameterField({ layer, parameter, onParameterChange }) {
     return (
       <section className="parameter">
         {header}
+        <div className="parameter__control">
           <input
             type="text"
             maxLength={parameter.maxLength ?? 64}
@@ -316,7 +362,7 @@ export function ParameterField({ layer, parameter, onParameterChange }) {
             onChange={(event) => sendValue(event.target.value)}
             onBlur={endInteraction}
           />
-        <ParameterValueDisplay parameterType={parameter.type} value={appliedValue} pending={isPending} />
+        </div>
       </section>
     );
   }
@@ -326,6 +372,7 @@ export function ParameterField({ layer, parameter, onParameterChange }) {
     return (
       <section className="parameter">
         {header}
+        <div className="parameter__control">
           <button
             type="button"
             className="button-with-icon parameter__trigger"
@@ -334,7 +381,7 @@ export function ParameterField({ layer, parameter, onParameterChange }) {
             <Zap size={16} strokeWidth={1.9} aria-hidden="true" />
             <span>Trigger</span>
           </button>
-        <ParameterValueDisplay parameterType={parameter.type} value={appliedValue} pending={isPending} />
+        </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%;