control layout updates

2026-05-08 18:28:28 +10:00
parent a0cc86f189
commit d650cac857
2 changed files with 322 additions and 210 deletions
--- a/ui/src/components/ParameterField.jsx
+++ b/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>
-        <Copy size={13} strokeWidth={1.75} aria-hidden="true" />
+        <span aria-hidden="true">OSC</span>
      </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__color-stack">
+        <div className="parameter__control" ref={colorControlRef}>
+          <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">
-            <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" />
+          ) : null}
        </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>
    );
  }
--- a/ui/src/styles.css
+++ b/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));
-  gap: 0.625rem;
+  grid-template-columns: repeat(auto-fit, minmax(min(100%, 32rem), 1fr));
+  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;
-  gap: 0.5rem;
-  align-items: start;
+  grid-template-columns: minmax(0, 1fr) auto auto;
+  gap: 0.35rem;
+  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;
-  line-height: 1.3;
+  font-size: 0.76rem;
+  line-height: 1.25;
+  text-overflow: ellipsis;
+  white-space: nowrap;
 }

 .parameter__osc,
 .parameter__reset {
  display: inline-flex;
  align-items: center;
-  justify-content: flex-end;
-  gap: 0.375rem;
-  width: auto;
-  min-width: 0;
+  justify-content: center;
+  width: 24px;
+  min-width: 24px;
  min-height: 24px;
  padding: 0;
  border: 0;
@@ -923,18 +935,16 @@ pre {
  font-weight: 500;
 }

-.parameter__reset {
-  justify-content: center;
-  width: 24px;
-  min-width: 24px;
-  color: var(--app-muted);
+.parameter__osc {
+  width: 34px;
+  min-width: 34px;
+  font-size: 0.66rem;
+  font-weight: 800;
+  letter-spacing: 0.02em;
 }

-.parameter__osc span {
-  min-width: 0;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+.parameter__reset {
+  color: var(--app-muted);
 }

 .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);
-  gap: 0.625rem;
-  align-items: start;
-  justify-content: center;
+  grid-template-columns: auto minmax(0, 1fr);
+  gap: 0.5rem;
+  align-items: end;
 }

-.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 {
-  display: grid;
-  gap: 0.25rem;
-  font-weight: 600;
+.parameter__trigger {
+  min-width: 7rem;
 }

 .toggle {
@@ -1156,8 +1213,8 @@ pre {
  .summary-grid,
  .kv-rows,
  .parameter-grid,
-  .parameter__header,
-  .parameter__wheel-row {
+  .parameter,
+  .parameter__header {
    grid-template-columns: 1fr;
  }

@@ -1169,12 +1226,20 @@ pre {
    width: 24px;
  }

-  .parameter__swatch {
-    grid-column: auto;
+  .parameter__pair,
+  .parameter__color-compact {
+    grid-template-columns: 1fr;
  }

-  .parameter__color-stack,
-  .parameter__color-bottom,
+  .parameter__rgba-grid {
+    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%;