Added new shaders

ui/src/components/LayerCard.jsx

@@ -2,7 +2,6 @@ import { GripVertical, Trash2 } from "lucide-react";
 
 import { postJson } from "../api/controlApi";
 import { ParameterField } from "./ParameterField";
-import { ShaderPicker } from "./ShaderPicker";
 
 export function LayerCard({
   layer,
@@ -19,6 +18,8 @@ export function LayerCard({
   onRemove,
   onLayerParameterChange,
 }) {
+  const selectedShader = shaders.find((shader) => shader.id === layer.shaderId);
+
   return (
     <div
       className={`layer-card${expanded ? " layer-card--expanded" : ""}${isDragging ? " layer-card--dragging" : ""}${isDropTarget ? " layer-card--drop-target" : ""}`}
@@ -90,20 +91,6 @@ export function LayerCard({
 
       {expanded ? (
         <div className="layer-card__body">
-          <div className="layer-card__field">
-            <ShaderPicker
-              id={`shader-${layer.id}`}
-              shaders={shaders}
-              value={layer.shaderId}
-              onChange={(shaderId) =>
-                postJson("/api/layers/set-shader", {
-                  layerId: layer.id,
-                  shaderId,
-                })
-              }
-            />
-          </div>
-
           {layer.temporal?.enabled ? (
             <div className="layer-card__field">
               <label>Temporal</label>
@@ -118,6 +105,13 @@ export function LayerCard({
             </div>
           )}
 
+          {selectedShader?.description ? (
+            <div className="shader-description">
+              <div className="shader-description__meta">{selectedShader.category || "Shader"}</div>
+              <p>{selectedShader.description}</p>
+            </div>
+          ) : null}
+
           <div className="layer-card__subheader">
             <h3>Parameters</h3>
             <button

ui/src/components/ParameterField.jsx

@@ -1,9 +1,15 @@
-import { Copy } from "lucide-react";
+import Wheel from "@uiw/react-color-wheel";
+import { hsvaToRgba, rgbaToHsva } from "@uiw/color-convert";
+import { Copy, RotateCcw } from "lucide-react";
 
 import { useThrottledParameterValue } from "../hooks/useThrottledParameterValue";
 import { ParameterValueDisplay } from "./ParameterValueDisplay";
 
-function ParameterHeader({ layer, parameter }) {
+function valuesMatch(left, right) {
+  return JSON.stringify(left) === JSON.stringify(right);
+}
+
+function ParameterHeader({ layer, parameter, onReset, resetDisabled }) {
   const layerKey = layer.shaderId || layer.shaderName || layer.id;
   const oscRoute = `/VideoShaderToys/${layerKey}/${parameter.id}`;
 
@@ -26,6 +32,16 @@ function ParameterHeader({ layer, parameter }) {
         <span>{oscRoute}</span>
         <Copy size={13} strokeWidth={1.75} aria-hidden="true" />
       </button>
+      <button
+        type="button"
+        className="parameter__reset"
+        title={`Reset ${parameter.label}`}
+        aria-label={`Reset ${parameter.label}`}
+        disabled={resetDisabled}
+        onClick={onReset}
+      >
+        <RotateCcw size={13} strokeWidth={1.9} aria-hidden="true" />
+      </button>
     </div>
   );
 }
@@ -48,13 +64,26 @@ function colorValueToHex(value) {
   return `#${colorComponentToHex(values[0])}${colorComponentToHex(values[1])}${colorComponentToHex(values[2])}`;
 }
 
-function hexToColorValue(hex, alpha) {
-  const sanitized = /^#[0-9a-fA-F]{6}$/.test(hex) ? hex.slice(1) : "000000";
+function colorValueToHsva(value) {
+  const values = [...(value ?? [])];
+  while (values.length < 4) {
+    values.push(values.length === 3 ? 1 : 0);
+  }
+  return rgbaToHsva({
+    r: Math.round(clamp01(values[0]) * 255),
+    g: Math.round(clamp01(values[1]) * 255),
+    b: Math.round(clamp01(values[2]) * 255),
+    a: clamp01(values[3]),
+  });
+}
+
+function hsvaToColorValue(hsva, alpha) {
+  const rgba = hsvaToRgba({ ...hsva, a: clamp01(alpha ?? hsva.a ?? 1) });
   return [
-    parseInt(sanitized.slice(0, 2), 16) / 255,
-    parseInt(sanitized.slice(2, 4), 16) / 255,
-    parseInt(sanitized.slice(4, 6), 16) / 255,
-    clamp01(alpha ?? 1),
+    clamp01(rgba.r / 255),
+    clamp01(rgba.g / 255),
+    clamp01(rgba.b / 255),
+    clamp01(alpha ?? rgba.a ?? 1),
   ];
 }
 
@@ -69,7 +98,21 @@ export function ParameterField({ layer, parameter, onParameterChange }) {
     sendValue,
   } = useThrottledParameterValue(parameter, onParameterChange);
 
-  const header = <ParameterHeader layer={layer} parameter={parameter} />;
+  const defaultValue = parameter.defaultValue;
+  const resetDisabled = defaultValue === undefined || valuesMatch(draftValue, defaultValue);
+  const resetParameter = () => {
+    if (defaultValue !== undefined) {
+      sendValue(defaultValue);
+    }
+  };
+  const header = (
+    <ParameterHeader
+      layer={layer}
+      parameter={parameter}
+      resetDisabled={resetDisabled}
+      onReset={resetParameter}
+    />
+  );
 
   if (parameter.type === "float") {
     return (
@@ -151,14 +194,21 @@ export function ParameterField({ layer, parameter, onParameterChange }) {
     return (
       <section className="parameter">
         {header}
-        <div className="parameter__color-row">
-          <input
-            type="color"
-            value={colorValueToHex(values)}
-            onFocus={beginInteraction}
-            onChange={(event) => sendValue(hexToColorValue(event.target.value, values[3]))}
+        <div className="parameter__wheel-row">
+          <div
+            className="parameter__wheel"
+            onPointerDown={beginInteraction}
+            onPointerUp={endInteraction}
+            onPointerCancel={endInteraction}
             onBlur={endInteraction}
-          />
+          >
+            <Wheel
+              color={colorValueToHsva(values)}
+              width={132}
+              height={132}
+              onChange={(color) => scheduleSendValue(hsvaToColorValue(color.hsva, values[3]))}
+            />
+          </div>
           <label className="parameter__alpha">
             <span>Alpha</span>
             <input
@@ -176,6 +226,7 @@ export function ParameterField({ layer, parameter, onParameterChange }) {
               onBlur={endInteraction}
             />
           </label>
+          <div className="parameter__swatch" style={{ background: colorValueToHex(values) }} aria-hidden="true" />
         </div>
         <ParameterValueDisplay parameterType={parameter.type} value={appliedValue} pending={isPending} />
       </section>

ui/src/components/ShaderPicker.jsx

@@ -12,6 +12,26 @@ function matchesShader(shader, query) {
     .some((value) => value.toLowerCase().includes(normalizedQuery));
 }
 
+function shaderSummary(shader) {
+  if (!shader) {
+    return "Search available shaders";
+  }
+
+  return shader.description || "No description";
+}
+
+function ShaderOptionContent({ shader }) {
+  return (
+    <>
+      <span className="shader-picker__option-head">
+        <span className="shader-picker__name">{shader.name}</span>
+        {shader.category ? <span className="shader-picker__category">{shader.category}</span> : null}
+      </span>
+      <span className="shader-picker__meta">{shaderSummary(shader)}</span>
+    </>
+  );
+}
+
 export function ShaderPicker({ id, label = "Shader", shaders, value, onChange }) {
   const [query, setQuery] = useState("");
   const [open, setOpen] = useState(false);
@@ -38,12 +58,13 @@ export function ShaderPicker({ id, label = "Shader", shaders, value, onChange })
         onClick={() => setOpen((current) => !current)}
       >
         <span>
-          <span className="shader-picker__name">{selectedShader?.name ?? "Choose shader"}</span>
-          <span className="shader-picker__meta">
-            {selectedShader
-              ? `${selectedShader.category ? `${selectedShader.category} / ` : ""}${selectedShader.id}`
-              : "Search available shaders"}
+          <span className="shader-picker__option-head">
+            <span className="shader-picker__name">{selectedShader?.name ?? "Choose shader"}</span>
+            {selectedShader?.category ? (
+              <span className="shader-picker__category">{selectedShader.category}</span>
+            ) : null}
           </span>
+          <span className="shader-picker__meta">{shaderSummary(selectedShader)}</span>
         </span>
         <ChevronDown size={16} strokeWidth={1.75} aria-hidden="true" />
       </button>
@@ -76,11 +97,7 @@ export function ShaderPicker({ id, label = "Shader", shaders, value, onChange })
                     setQuery("");
                   }}
                 >
-                  <span className="shader-picker__name">{shader.name}</span>
-                  <span className="shader-picker__meta">
-                    {shader.category ? `${shader.category} / ` : ""}
-                    {shader.id}
-                  </span>
+                  <ShaderOptionContent shader={shader} />
                 </button>
               ))
             ) : (