Font loading fixes

shaders/vhs/shader.json

@@ -24,6 +24,11 @@
       "output": "layerOutput"
     }
   ],
+  "ui": {
+    "type": "webComponent",
+    "entry": "ui/controls.js",
+    "tag": "vhs-controls"
+  },
   "parameters": [
     {
       "id": "wiggle",

shaders/vhs/ui/controls.js

@@ -0,0 +1,698 @@
+const PARAMETER_GROUPS = [
+  {
+    title: "Tape Transport",
+    note: "Deck instability and horizontal smear.",
+    parameters: ["wiggle", "wiggleSpeed", "smear", "blurSamples", "sharpnessDrift"],
+  },
+  {
+    title: "Picture Wear",
+    note: "Copied-tape softness, glow, fade, and edge falloff.",
+    parameters: ["generationLoss", "fadeAmount", "vignetteAmount", "halationAmount", "bloomAmount", "aberrationAmount"],
+  },
+  {
+    title: "Signal Noise",
+    note: "Static, grain, scanlines, and chroma shimmer.",
+    parameters: ["noiseAmount", "noiseSize", "staticAmount", "staticLines", "scanlineAmount", "chromaCrawlAmount"],
+  },
+];
+
+const PRESETS = [
+  {
+    label: "Clean SP",
+    values: {
+      wiggle: 0.02,
+      wiggleSpeed: 18,
+      smear: 0.45,
+      blurSamples: 9,
+      generationLoss: 0.06,
+      fadeAmount: 0.08,
+      noiseAmount: 0.025,
+      staticAmount: 0.01,
+      staticLines: 0.18,
+      scanlineAmount: 0.04,
+      chromaCrawlAmount: 0.015,
+      sharpnessDrift: 0.04,
+    },
+  },
+  {
+    label: "Rental Copy",
+    values: {
+      wiggle: 0.18,
+      wiggleSpeed: 31,
+      smear: 1.2,
+      blurSamples: 15,
+      generationLoss: 0.36,
+      fadeAmount: 0.33,
+      noiseAmount: 0.075,
+      staticAmount: 0.06,
+      staticLines: 0.85,
+      scanlineAmount: 0.12,
+      chromaCrawlAmount: 0.065,
+      sharpnessDrift: 0.22,
+    },
+  },
+  {
+    label: "Tracking Lost",
+    values: {
+      wiggle: 0.72,
+      wiggleSpeed: 64,
+      smear: 1.75,
+      blurSamples: 15,
+      generationLoss: 0.58,
+      fadeAmount: 0.48,
+      noiseAmount: 0.12,
+      staticAmount: 0.16,
+      staticLines: 1.2,
+      scanlineAmount: 0.2,
+      chromaCrawlAmount: 0.14,
+      sharpnessDrift: 0.45,
+    },
+  },
+];
+
+const SEGMENT_FONT_FAMILY = "VhsSevenSegment";
+const SEGMENT_FONT_URL = new URL("./7segment.ttf", import.meta.url).href;
+let segmentFontLoadPromise = null;
+
+function ensureSegmentFontLoaded() {
+  if (segmentFontLoadPromise || !("FontFace" in window) || !document.fonts) {
+    return segmentFontLoadPromise;
+  }
+
+  const font = new FontFace(SEGMENT_FONT_FAMILY, `url("${SEGMENT_FONT_URL}")`);
+  segmentFontLoadPromise = font.load()
+    .then((loadedFont) => {
+      document.fonts.add(loadedFont);
+      return loadedFont;
+    })
+    .catch(() => null);
+  return segmentFontLoadPromise;
+}
+
+function numberValue(parameter) {
+  const value = Number(parameter?.value ?? parameter?.defaultValue ?? 0);
+  return Number.isFinite(value) ? value : 0;
+}
+
+function formatValue(value, step) {
+  if (step >= 1) {
+    return String(Math.round(value));
+  }
+  if (step >= 0.05) {
+    return value.toFixed(2);
+  }
+  return value.toFixed(3);
+}
+
+class VhsControls extends HTMLElement {
+  constructor() {
+    super();
+    this.attachShadow({ mode: "open" });
+    this._parameters = [];
+    this._parameterMap = new Map();
+    this._values = {};
+    this._setParameter = null;
+  }
+
+  set layer(value) {
+    this._layer = value;
+  }
+
+  set parameters(value) {
+    this._parameters = Array.isArray(value) ? value : [];
+    this._parameterMap = new Map(this._parameters.map((parameter) => [parameter.id, parameter]));
+    this.render();
+  }
+
+  set values(value) {
+    this._values = value && typeof value === "object" ? value : {};
+    this.render();
+  }
+
+  set setParameter(callback) {
+    this._setParameter = typeof callback === "function" ? callback : null;
+  }
+
+  set requestReset(callback) {
+    this._requestReset = typeof callback === "function" ? callback : null;
+  }
+
+  connectedCallback() {
+    ensureSegmentFontLoaded();
+    this.render();
+  }
+
+  updateParameter(parameterId, value) {
+    if (this._setParameter) {
+      this._setParameter(parameterId, value);
+      return;
+    }
+    this.dispatchEvent(new CustomEvent("shader-parameter-change", {
+      detail: { parameterId, value },
+      bubbles: true,
+      composed: true,
+    }));
+  }
+
+  applyPreset(preset) {
+    for (const [parameterId, value] of Object.entries(preset.values)) {
+      if (this._parameterMap.has(parameterId)) {
+        this.updateParameter(parameterId, value);
+      }
+    }
+  }
+
+  renderSlider(parameter) {
+    const value = numberValue(parameter);
+    const min = Number(parameter.min?.[0] ?? 0);
+    const max = Number(parameter.max?.[0] ?? 1);
+    const step = Number(parameter.step?.[0] ?? 0.01);
+    const safeMin = Number.isFinite(min) ? min : 0;
+    const safeMax = Number.isFinite(max) && max > safeMin ? max : safeMin + 1;
+    const safeStep = Number.isFinite(step) && step > 0 ? step : 0.01;
+    const percent = Math.max(0, Math.min(100, ((value - safeMin) / (safeMax - safeMin)) * 100));
+    const angle = -135 + percent * 2.7;
+
+    return `
+      <label class="control" title="${parameter.description || ""}" style="--angle: ${angle}deg; --arc: ${percent * 2.7}deg">
+        <span class="control__head">
+          <span>${parameter.label || parameter.id}</span>
+          <output>${formatValue(value, safeStep)}</output>
+        </span>
+        <span class="knob-stage">
+          <span class="knob" aria-hidden="true"><span></span></span>
+          <input
+            type="range"
+            data-parameter="${parameter.id}"
+            min="${safeMin}"
+            max="${safeMax}"
+            step="${safeStep}"
+            value="${value}"
+          >
+        </span>
+      </label>
+    `;
+  }
+
+  render() {
+    if (!this.shadowRoot) {
+      return;
+    }
+
+    const groups = PARAMETER_GROUPS.map((group) => {
+      const controls = group.parameters
+        .map((parameterId) => this._parameterMap.get(parameterId))
+        .filter(Boolean)
+        .map((parameter) => this.renderSlider(parameter))
+        .join("");
+      if (!controls) {
+        return "";
+      }
+      return `
+        <section class="group">
+          <div class="group__header">
+            <h4>${group.title}</h4>
+            <p>${group.note}</p>
+          </div>
+          <div class="controls">${controls}</div>
+        </section>
+      `;
+    }).join("");
+
+    this.shadowRoot.innerHTML = `
+      <style>
+        @font-face {
+          font-family: "${SEGMENT_FONT_FAMILY}";
+          src: url("${SEGMENT_FONT_URL}") format("truetype");
+          font-display: swap;
+        }
+
+        :host {
+          display: block;
+          color: #151a1b;
+          font-family: "Arial Narrow", "Roboto Condensed", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
+        }
+
+        * {
+          box-sizing: border-box;
+        }
+
+        .vhs-panel {
+          display: grid;
+          gap: 8px;
+          overflow: hidden;
+          padding: 13px 13px 20px;
+          border: 1px solid #252a2a;
+          border-radius: 3px;
+          background:
+            repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.08) 0 1px, transparent 1px 5px),
+            repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.035) 0 1px, transparent 1px 6px),
+            linear-gradient(#cfd2c2, #aeb3a4 54%, #8d9387);
+          box-shadow:
+            inset 0 1px 0 rgba(255, 255, 255, 0.62),
+            inset 0 -2px 5px rgba(0, 0, 0, 0.3),
+            0 10px 24px rgba(0, 0, 0, 0.24);
+        }
+
+        .tab {
+          display: grid;
+          place-items: center;
+          min-height: 28px;
+          padding: 0 11px;
+          border: 1px solid #282c29;
+          border-radius: 1px;
+          background: linear-gradient(#eceee5, #b9beb1);
+          color: #2d2f2b;
+          font-size: 11px;
+          font-weight: 800;
+          letter-spacing: 0.04em;
+          text-transform: uppercase;
+          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.62), 0 1px 2px rgba(0, 0, 0, 0.2);
+        }
+
+        .faceplate {
+          display: grid;
+          grid-template-columns: minmax(0, 1fr) auto;
+          gap: 12px;
+          min-height: 94px;
+          padding: 0;
+          border-bottom: 0;
+          background:
+            linear-gradient(90deg, rgba(255, 255, 255, 0.16), transparent),
+            transparent;
+        }
+
+        .brand {
+          position: relative;
+          min-width: 0;
+          padding: 18px 18px 14px 76px;
+          border: 1px solid rgba(0, 0, 0, 0.24);
+          border-radius: 2px;
+          background:
+            radial-gradient(circle at 96% 82%, rgba(255, 255, 255, 0.42) 0 10px, transparent 11px),
+            linear-gradient(90deg, rgba(255, 255, 255, 0.32), transparent 46%),
+            linear-gradient(#dbddd2, #c5c8b9);
+          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6);
+        }
+
+        .brand::before,
+        .brand::after {
+          content: "";
+          position: absolute;
+          width: 18px;
+          height: 18px;
+          border-radius: 50%;
+          border: 1px solid rgba(0, 0, 0, 0.08);
+          background: rgba(255, 255, 255, 0.24);
+        }
+
+        .brand::before {
+          top: 18px;
+          left: 32px;
+        }
+
+        .brand::after {
+          right: 14px;
+          bottom: 12px;
+        }
+
+        .brand h3 {
+          margin: 0;
+          color: #272727;
+          font-size: clamp(30px, 6vw, 44px);
+          font-weight: 260;
+          line-height: 0.9;
+          letter-spacing: 0;
+        }
+
+        .brand strong {
+          display: block;
+          margin-top: 5px;
+          color: #ff3f18;
+          font-size: 15px;
+          font-weight: 680;
+          letter-spacing: 0.08em;
+          text-transform: uppercase;
+        }
+
+        .brand p {
+          margin: 10px 0 0;
+          color: #3c3b38;
+          font-size: 13px;
+          font-weight: 700;
+          letter-spacing: 0.05em;
+          text-transform: uppercase;
+        }
+
+        .display {
+          display: grid;
+          grid-template-columns: minmax(0, 1fr) auto;
+          gap: 14px;
+          align-items: center;
+          padding: 10px 12px;
+          background:
+            linear-gradient(125deg, rgba(255, 255, 255, 0.06), transparent 34%),
+            linear-gradient(#566052, #232925);
+          border: 1px solid #222;
+          border-radius: 2px;
+          box-shadow:
+            inset 0 18px 28px rgba(255, 255, 255, 0.03),
+            inset 0 -12px 24px rgba(0, 0, 0, 0.62);
+        }
+
+        .lcd {
+          min-width: 128px;
+          justify-self: stretch;
+          min-height: 62px;
+          padding: 9px 14px;
+          border: 2px solid #55604f;
+          border-radius: 2px;
+          background:
+            repeating-linear-gradient(0deg, rgba(32, 48, 32, 0.12) 0 1px, transparent 1px 3px),
+            linear-gradient(rgba(255, 255, 255, 0.18), transparent 48%),
+            linear-gradient(#a5af8e, #778269);
+          color: #111717;
+          font-family: "${SEGMENT_FONT_FAMILY}", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+          font-size: clamp(26px, 5vw, 42px);
+          font-weight: 400;
+          letter-spacing: 0;
+          line-height: 1;
+          text-shadow: 0 1px 0 rgba(255, 255, 255, 0.18);
+        }
+
+        .lcd small {
+          display: block;
+          margin-bottom: 3px;
+          color: #1f2b22;
+          font-family: "Arial Narrow", "Roboto Condensed", system-ui, sans-serif;
+          font-size: 10px;
+          font-weight: 800;
+          letter-spacing: 0.06em;
+          vertical-align: top;
+          text-shadow: none;
+        }
+
+        .master-knob {
+          position: relative;
+          width: 64px;
+          height: 64px;
+          border-radius: 50%;
+          background: radial-gradient(circle at 35% 28%, #4a4a4a, #050505 68%);
+          box-shadow:
+            inset 0 0 0 5px #191919,
+            inset 0 0 0 7px #333,
+            0 2px 4px rgba(0, 0, 0, 0.38);
+        }
+
+        .presets {
+          display: grid;
+          grid-template-columns: repeat(3, minmax(0, 1fr));
+          gap: 7px;
+          padding: 0;
+        }
+
+        button {
+          min-height: 34px;
+          border: 1px solid #0a0a0a;
+          border-radius: 2px;
+          background: linear-gradient(#22262a, #08090a);
+          color: #f5f1eb;
+          font: inherit;
+          font-size: 11px;
+          font-weight: 700;
+          letter-spacing: 0.04em;
+          text-transform: uppercase;
+          cursor: pointer;
+          box-shadow:
+            inset 0 1px 0 rgba(255, 255, 255, 0.18),
+            inset 0 -3px 0 rgba(0, 0, 0, 0.42),
+            0 2px 3px rgba(0, 0, 0, 0.3);
+        }
+
+        button:hover {
+          background: linear-gradient(#ff6b2f, #df2d0a);
+          color: #fff;
+          box-shadow:
+            inset 0 1px 0 rgba(255, 255, 255, 0.3),
+            inset 0 -3px 0 rgba(80, 12, 0, 0.36),
+            0 0 14px rgba(255, 73, 25, 0.36);
+        }
+
+        .controls-shell {
+          position: relative;
+          padding: 0;
+          background:
+            linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.18), transparent),
+            transparent;
+        }
+
+        .controls-shell::after {
+          content: "REMOTE CONTROL PANEL";
+          display: block;
+          margin-top: 9px;
+          color: #474a43;
+          font-size: 10px;
+          font-weight: 700;
+          letter-spacing: 0.07em;
+          text-align: center;
+          text-transform: uppercase;
+        }
+
+        .group {
+          display: grid;
+          gap: 9px;
+          padding: 12px 13px 14px;
+          margin-top: 10px;
+          border: 1px solid rgba(0, 0, 0, 0.36);
+          border-radius: 2px;
+          background:
+            linear-gradient(90deg, rgba(255, 255, 255, 0.12), transparent 42%),
+            linear-gradient(#cdd0c1, #adb2a3);
+          box-shadow:
+            inset 0 1px 0 rgba(255, 255, 255, 0.55),
+            inset 0 -1px 0 rgba(0, 0, 0, 0.17);
+        }
+
+        .group__header {
+          display: flex;
+          align-items: baseline;
+          justify-content: space-between;
+          gap: 12px;
+        }
+
+        h4 {
+          margin: 0;
+          color: #242321;
+          font-size: 15px;
+          letter-spacing: 0.04em;
+          text-transform: uppercase;
+        }
+
+        .group__header p {
+          margin: 0;
+          color: #55504a;
+          font-size: 11px;
+          text-align: right;
+        }
+
+        .controls {
+          display: grid;
+          grid-template-columns: repeat(auto-fit, minmax(128px, 1fr));
+          gap: 10px;
+        }
+
+        .control {
+          position: relative;
+          display: grid;
+          gap: 6px;
+          min-width: 0;
+          padding: 10px 10px 12px;
+          border: 1px solid rgba(30, 34, 30, 0.36);
+          border-radius: 2px;
+          background:
+            linear-gradient(90deg, rgba(255, 255, 255, 0.22), transparent 58%),
+            #c8ccbd;
+          box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.45), inset 0 -1px 0 rgba(0, 0, 0, 0.16);
+        }
+
+        .control::before {
+          content: "";
+          position: absolute;
+          left: 8px;
+          bottom: 8px;
+          width: 6px;
+          height: 6px;
+          border-radius: 50%;
+          background: #1d201d;
+          box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.22);
+        }
+
+        .control:nth-child(3n + 1)::before {
+          background: #e13b1a;
+          box-shadow: 0 0 6px rgba(255, 65, 30, 0.62);
+        }
+
+        .control:nth-child(3n + 2)::before {
+          background: #1788d3;
+          box-shadow: 0 0 6px rgba(50, 160, 255, 0.5);
+        }
+
+        .control__head {
+          display: flex;
+          align-items: baseline;
+          justify-content: space-between;
+          gap: 8px;
+          color: #252525;
+          font-size: 10px;
+          font-weight: 740;
+          letter-spacing: 0.03em;
+          text-transform: uppercase;
+        }
+
+        output {
+          min-width: 48px;
+          padding: 3px 6px;
+          border: 1px solid rgba(0, 0, 0, 0.4);
+          border-radius: 2px;
+          background: #1d2720;
+          color: #e5ffd0;
+          font-family: "${SEGMENT_FONT_FAMILY}", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
+          font-size: 13px;
+          font-weight: 400;
+          text-align: right;
+          text-shadow: 0 0 5px rgba(190, 255, 150, 0.26);
+        }
+
+        .knob-stage {
+          position: relative;
+          display: grid;
+          place-items: center;
+          min-height: 74px;
+        }
+
+        .knob {
+          position: relative;
+          width: 58px;
+          height: 58px;
+          border-radius: 50%;
+          background:
+            radial-gradient(circle at 35% 30%, #555, #1d1d1d 56%, #030303 100%);
+          box-shadow:
+            0 0 0 7px #777d72,
+            0 0 0 7px rgba(20, 22, 20, 0.62),
+            inset 0 2px 4px rgba(255, 255, 255, 0.18),
+            inset 0 -6px 10px rgba(0, 0, 0, 0.64),
+            0 4px 7px rgba(0, 0, 0, 0.45);
+        }
+
+        .knob::before {
+          content: "";
+          position: absolute;
+          inset: -12px;
+          border-radius: 50%;
+          background:
+            conic-gradient(from -135deg, #f4511e 0 var(--arc), #2e342f var(--arc) 270deg, transparent 270deg 360deg);
+          -webkit-mask: radial-gradient(circle, transparent 0 62%, #000 63% 70%, transparent 71%);
+          mask: radial-gradient(circle, transparent 0 62%, #000 63% 70%, transparent 71%);
+          opacity: 0.92;
+          z-index: -1;
+        }
+
+        .knob span {
+          position: absolute;
+          left: 50%;
+          top: 8px;
+          width: 3px;
+          height: 19px;
+          border-radius: 999px;
+          background: #f1f1ed;
+          transform: translateX(-50%) rotate(var(--angle));
+          transform-origin: 50% 21px;
+          box-shadow: 0 0 4px rgba(255, 255, 255, 0.45);
+        }
+
+        input[type="range"] {
+          position: absolute;
+          inset: 0;
+          width: 100%;
+          height: 100%;
+          margin: 0;
+          opacity: 0;
+          cursor: pointer;
+          background: transparent;
+        }
+
+        @media (max-width: 560px) {
+          .faceplate,
+          .display,
+          .group__header,
+          .presets {
+            grid-template-columns: 1fr;
+          }
+
+          .display {
+            padding: 8px;
+          }
+
+          .group__header {
+            display: grid;
+          }
+
+          .group__header p {
+            text-align: left;
+          }
+        }
+      </style>
+      <div class="vhs-panel">
+        <header class="faceplate">
+          <div class="brand">
+            <h3>TX-VHS</h3>
+            <strong>Video Tape Remote</strong>
+            <p>Remote Control Panel</p>
+          </div>
+          <span class="tab" aria-hidden="true">Remote Control Panel</span>
+        </header>
+        <section class="display">
+          <div class="lcd"><small>TRACK</small> 03.7</div>
+          <div class="master-knob" aria-hidden="true"></div>
+        </section>
+        <div class="presets">
+          ${PRESETS.map((preset, index) => `<button type="button" data-preset="${index}">${preset.label}</button>`).join("")}
+        </div>
+        <div class="controls-shell">
+          ${groups}
+        </div>
+      </div>
+    `;
+
+    this.shadowRoot.querySelectorAll("input[data-parameter]").forEach((input) => {
+      input.addEventListener("input", (event) => {
+        const target = event.currentTarget;
+        const parameterId = target.dataset.parameter;
+        const value = Number(target.value);
+        const percent = Math.max(0, Math.min(100, ((value - Number(target.min)) / (Number(target.max) - Number(target.min))) * 100));
+        const control = target.closest(".control");
+        if (control) {
+          control.style.setProperty("--angle", `${-135 + percent * 2.7}deg`);
+          control.style.setProperty("--arc", `${percent * 2.7}deg`);
+          const output = control.querySelector("output");
+          if (output) {
+            output.textContent = formatValue(value, Number(target.step));
+          }
+        }
+        this.updateParameter(parameterId, value);
+      });
+    });
+
+    this.shadowRoot.querySelectorAll("button[data-preset]").forEach((button) => {
+      button.addEventListener("click", () => {
+        const preset = PRESETS[Number(button.dataset.preset)];
+        if (preset) {
+          this.applyPreset(preset);
+        }
+      });
+    });
+  }
+}
+
+customElements.define("vhs-controls", VhsControls);

src/control/http/HttpControlServerRoutes.cpp

@@ -102,6 +102,14 @@ std::string HttpControlServer::GuessContentType(const std::filesystem::path& pat
 		return "image/x-icon";
 	if (extension == ".map")
 		return "application/json";
+	if (extension == ".ttf")
+		return "font/ttf";
+	if (extension == ".otf")
+		return "font/otf";
+	if (extension == ".woff")
+		return "font/woff";
+	if (extension == ".woff2")
+		return "font/woff2";
 	return "text/plain";
 }
 

ui/src/components/LayerCard.jsx

@@ -1,4 +1,5 @@
 import { EyeOff, GripVertical, RotateCcw, SlidersHorizontal, Trash2 } from "lucide-react";
+import { useEffect, useState } from "react";
 
 import { postJson } from "../api/controlApi";
 import { ParameterField } from "./ParameterField";
@@ -22,6 +23,7 @@ export function LayerCard({
   const selectedShader = shaders.find((shader) => shader.id === layer.shaderId);
   const customUi = layer.ui?.type === "webComponent" ? layer.ui : selectedShader?.ui;
   const hasCustomUi = customUi?.type === "webComponent" && customUi.assetUrl && customUi.tag;
+  const [useDefaultControls, setUseDefaultControls] = useState(false);
   const updateParameter = (parameterId, value) => onLayerParameterChange(layer.id, parameterId, value);
   const resetParameters = () => postJson("/api/layers/reset-parameters", { layerId: layer.id });
   const parameterControls = layer.parameters.length > 0 ? (
@@ -39,6 +41,10 @@ export function LayerCard({
     <p className="muted">This shader does not expose any user parameters.</p>
   );
 
+  useEffect(() => {
+    setUseDefaultControls(false);
+  }, [customUi?.assetUrl, customUi?.tag]);
+
   return (
     <div
       className={`layer-card${expanded ? " layer-card--expanded" : ""}${isDragging ? " layer-card--dragging" : ""}${isDropTarget ? " layer-card--drop-target" : ""}`}
@@ -135,21 +141,33 @@ export function LayerCard({
 
           <div className="layer-card__subheader">
             <h3>Parameters</h3>
-            <button
-              type="button"
-              className="button-with-icon"
-              disabled={layer.parameters.length === 0}
-              onClick={resetParameters}
-            >
-              <RotateCcw size={16} strokeWidth={1.9} aria-hidden="true" />
-              <span>Reset</span>
-            </button>
+            <div className="layer-card__subheader-actions">
+              {hasCustomUi ? (
+                <button
+                  type="button"
+                  className="button-with-icon"
+                  onClick={() => setUseDefaultControls((current) => !current)}
+                >
+                  <span>{useDefaultControls ? "Custom UI" : "Default controls"}</span>
+                </button>
+              ) : null}
+              <button
+                type="button"
+                className="button-with-icon"
+                disabled={layer.parameters.length === 0}
+                onClick={resetParameters}
+              >
+                <RotateCcw size={16} strokeWidth={1.9} aria-hidden="true" />
+                <span>Reset</span>
+              </button>
+            </div>
           </div>
 
           {hasCustomUi ? (
             <ShaderCustomPanel
               layer={layer}
               ui={customUi}
+              useDefaultControls={useDefaultControls}
               onParameterChange={updateParameter}
               onResetParameters={resetParameters}
             >

ui/src/components/ShaderCustomPanel.jsx

@@ -23,8 +23,14 @@ function parameterMap(parameters) {
   return Object.fromEntries((parameters ?? []).map((parameter) => [parameter.id, parameter.value]));
 }
 
-export function ShaderCustomPanel({ layer, ui, onParameterChange, onResetParameters, children }) {
-  const [useDefaultControls, setUseDefaultControls] = useState(false);
+export function ShaderCustomPanel({
+  layer,
+  ui,
+  useDefaultControls,
+  onParameterChange,
+  onResetParameters,
+  children,
+}) {
   const [loadError, setLoadError] = useState("");
   const [element, setElement] = useState(null);
   const values = useMemo(() => parameterMap(layer.parameters), [layer.parameters]);
@@ -39,7 +45,6 @@ export function ShaderCustomPanel({ layer, ui, onParameterChange, onResetParamet
     let customElement = null;
     setLoadError("");
     setElement(null);
-    setUseDefaultControls(false);
 
     loadCustomElement(ui)
       .then(() => {
@@ -113,13 +118,6 @@ export function ShaderCustomPanel({ layer, ui, onParameterChange, onResetParamet
   if (useDefaultControls || loadError) {
     return (
       <div className="shader-custom-ui">
-        {!loadError ? (
-          <div className="shader-custom-ui__toolbar">
-            <button type="button" className="button-with-icon" onClick={() => setUseDefaultControls(false)}>
-              <span>Custom UI</span>
-            </button>
-          </div>
-        ) : null}
         {loadError ? <p className="shader-custom-ui__status">Custom controls unavailable; default controls shown.</p> : null}
         {children}
       </div>
@@ -128,11 +126,6 @@ export function ShaderCustomPanel({ layer, ui, onParameterChange, onResetParamet
 
   return (
     <div className="shader-custom-ui">
-      <div className="shader-custom-ui__toolbar">
-        <button type="button" className="button-with-icon" onClick={() => setUseDefaultControls(true)}>
-          <span>Default controls</span>
-        </button>
-      </div>
       <div
         className="shader-custom-ui__host"
         ref={(node) => {

ui/src/styles.css

@@ -788,6 +788,7 @@ pre {
 .layer-card__header,
 .layer-card__meta,
 .layer-card__actions,
+.layer-card__subheader-actions,
 .layer-card__subheader {
   display: flex;
   align-items: center;
@@ -810,7 +811,13 @@ pre {
   align-self: flex-start;
 }
 
+.layer-card__subheader-actions {
+  flex-wrap: wrap;
+  justify-content: flex-end;
+}
+
 .layer-card__actions button,
+.layer-card__subheader-actions button,
 .layer-card__subheader button {
   width: auto;
   min-width: var(--button-min-width);