added OCIO libary

CMakeLists.txt

@@ -136,6 +136,7 @@ set(SHADER_MANIFEST_SOURCES
 	"${SRC_DIR}/shader/ShaderManifestParameters.cpp"
 	"${SRC_DIR}/shader/ShaderManifestParser.cpp"
 	"${SRC_DIR}/shader/ShaderPackageRegistry.cpp"
+	"${SRC_DIR}/shader/ShaderUiPath.cpp"
 )
 
 set(VIDEO_MODE_SOURCES

README.md

@@ -248,6 +248,34 @@ http://127.0.0.1:<serverPort>
 
 `/api/state` exposes backend-neutral output telemetry in `videoOutput`. Use `videoOutput.enabled`, `videoOutput.backend`, and `videoOutput.scheduleFailures` for portable status. Backend-specific counters live in `videoOutput.backendMetrics`.
 
+### Borderless Window / Fullscreen Output Plan
+
+The preview window is a best-effort diagnostic view and is allowed to drop or reuse frames without disturbing cadence. A borderless window or fullscreen display output should be implemented as a real `output.backend`, separate from preview, so it can target full configured resolution and frame rate.
+
+Rough plan:
+
+- Add a `window` video output backend behind the existing `IVideoOutput` factory, selectable with `"output": { "backend": "window", ... }`.
+- Give it its own device/display selection, fullscreen/borderless mode, window position, vsync policy, and optional monitor refresh validation in `runtime-host.json`.
+- Consume `SystemFrameExchange` frames like the other output backends, on an output-owned thread, without blocking the render thread.
+- Upload/present frames through a dedicated GL/DX window context or shared-context path, with a bounded mailbox so late window presentation never back-pressures render cadence.
+- Report backend-neutral telemetry through `videoOutput` and put display/window-specific details under `videoOutput.backendMetrics`.
+- Keep the existing preview window as an operator confidence monitor only, not as the full-quality display output path.
+
+### OCIO / Linear 16-Bit Float Pipeline Plan
+
+The render backend should move toward a true linear-light `RGBA16F` pipeline, with OpenColorIO used for explicit color transforms at the video I/O and display edges. Shader packages should be able to assume a stable working space instead of guessing whether input pixels are display-referred, log, Rec.709, HDR, or already linear.
+
+Rough plan:
+
+- Add OCIO as an optional third-party dependency and package its required runtime DLLs, config files, and license notices with Release builds.
+- Extend `runtime-host.json` with color settings for input, working, output, and preview/display transforms, including OCIO config path, input color space, working color space, output color space, view, look, exposure, and gamma.
+- Convert captured/input frames into the configured linear working space before shader layers sample them.
+- Allocate runtime render targets, temporal history, feedback buffers, and intermediate layer buffers as `RGBA16F` by default, with explicit fallbacks for unsupported hardware.
+- Keep shader parameter uploads and texture assets explicit about color intent: data textures stay data, image/video textures can opt into OCIO or known transfer conversion.
+- Apply the output transform only at backend edges: DeckLink/NDI/window output, screenshots, and preview each get the correct display/output transform for their target.
+- Prebuild OCIO GPU shader/lut resources off the render thread and commit prepared resources to the render thread only when ready, following the render cadence golden rules.
+- Add test coverage for config parsing, color-pipeline defaults, fallback behavior, and shader/runtime state reporting.
+
 ## Runtime State
 
 The current layer stack is autosaved to `runtime/runtime_state.json` whenever durable UI/API layer changes are accepted: add/remove, shader assignment, bypass state, ordering, parameter updates, parameter reset, and reload compatibility refreshes. Saves are debounced and written on a background worker, with a final flush during shutdown.

config/runtime-host.json

@@ -22,6 +22,31 @@
     "pixelFormat": "auto",
     "resolution": "1080p"
   },
+  "windowOutput": {
+    "fullscreen": true,
+    "borderless": true,
+    "display": "default",
+    "x": 0,
+    "y": 0,
+    "width": 0,
+    "height": 0,
+    "vsync": true,
+    "allowTearing": false
+  },
+  "colorPipeline": {
+    "ocioEnabled": false,
+    "ocioConfig": "",
+    "inputColorSpace": "scene_linear",
+    "workingColorSpace": "scene_linear",
+    "outputColorSpace": "rec709",
+    "display": "sRGB",
+    "view": "Rec.709",
+    "look": "",
+    "exposure": 0,
+    "gamma": 1,
+    "workingFormat": "rgba16f",
+    "linearWorkingSpace": true
+  },
   "previewEnabled": true,
   "previewFps": 59.94,
   "runtimeShaderId": "",

config/runtime-host.schema.json

@@ -46,6 +46,12 @@
     "output": {
       "$ref": "#/$defs/output"
     },
+    "windowOutput": {
+      "$ref": "#/$defs/windowOutput"
+    },
+    "colorPipeline": {
+      "$ref": "#/$defs/colorPipeline"
+    },
     "autoReload": {
       "type": "boolean",
       "default": true,
@@ -86,6 +92,9 @@
       "enum": [
         "decklink",
         "ndi",
+        "window",
+        "fullscreen",
+        "borderless",
         "none",
         "disabled",
         "off"
@@ -221,6 +230,132 @@
         "resolution",
         "frameRate"
       ]
+    },
+    "windowOutput": {
+      "type": "object",
+      "additionalProperties": false,
+      "description": "Reserved settings for a future full-resolution/full-frame-rate borderless or fullscreen video output backend. These are not used by the preview window.",
+      "properties": {
+        "fullscreen": {
+          "type": "boolean",
+          "default": true,
+          "description": "When the future window backend is implemented, request exclusive/fullscreen-style presentation."
+        },
+        "borderless": {
+          "type": "boolean",
+          "default": true,
+          "description": "When true, the future window backend should create a borderless output window."
+        },
+        "display": {
+          "type": "string",
+          "default": "default",
+          "description": "Display/monitor selector for the future window backend."
+        },
+        "x": {
+          "type": "integer",
+          "default": 0,
+          "description": "Window X position used when fullscreen is false or when a backend needs explicit placement."
+        },
+        "y": {
+          "type": "integer",
+          "default": 0,
+          "description": "Window Y position used when fullscreen is false or when a backend needs explicit placement."
+        },
+        "width": {
+          "type": "integer",
+          "minimum": 0,
+          "default": 0,
+          "description": "Optional window width override. Zero means use output resolution."
+        },
+        "height": {
+          "type": "integer",
+          "minimum": 0,
+          "default": 0,
+          "description": "Optional window height override. Zero means use output resolution."
+        },
+        "vsync": {
+          "type": "boolean",
+          "default": true,
+          "description": "Presentation sync request for the future window backend."
+        },
+        "allowTearing": {
+          "type": "boolean",
+          "default": false,
+          "description": "Allow tearing for the future window backend when the graphics API and OS support it."
+        }
+      }
+    },
+    "colorPipeline": {
+      "type": "object",
+      "additionalProperties": false,
+      "description": "Reserved color-management settings for a future OCIO-backed linear RGBA16F render pipeline.",
+      "properties": {
+        "ocioEnabled": {
+          "type": "boolean",
+          "default": false,
+          "description": "Enable future OpenColorIO transforms. Currently parsed and reported only."
+        },
+        "ocioConfig": {
+          "type": "string",
+          "default": "",
+          "description": "Path to an OCIO config file or package-relative config identifier."
+        },
+        "inputColorSpace": {
+          "type": "string",
+          "default": "scene_linear",
+          "description": "Input/video color space to convert from at the input edge."
+        },
+        "workingColorSpace": {
+          "type": "string",
+          "default": "scene_linear",
+          "description": "Linear working space shader packages should be able to assume."
+        },
+        "outputColorSpace": {
+          "type": "string",
+          "default": "rec709",
+          "description": "Output transform target color space for scheduled video output."
+        },
+        "display": {
+          "type": "string",
+          "default": "sRGB",
+          "description": "OCIO display name for preview/window/display transforms."
+        },
+        "view": {
+          "type": "string",
+          "default": "Rec.709",
+          "description": "OCIO view name for preview/window/display transforms."
+        },
+        "look": {
+          "type": "string",
+          "default": "",
+          "description": "Optional OCIO look name."
+        },
+        "exposure": {
+          "type": "number",
+          "default": 0,
+          "description": "Reserved display transform exposure adjustment."
+        },
+        "gamma": {
+          "type": "number",
+          "exclusiveMinimum": 0,
+          "default": 1,
+          "description": "Reserved display transform gamma adjustment."
+        },
+        "workingFormat": {
+          "type": "string",
+          "enum": [
+            "rgba16f",
+            "rgba32f"
+          ],
+          "default": "rgba16f",
+          "description": "Future render target/intermediate working format."
+        },
+        "linearWorkingSpace": {
+          "type": "boolean",
+          "default": true,
+          "description": "Documents the intended linear-light working pipeline."
+        }
+      }
     }
   }
 }

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/app/AppConfig.cpp

@@ -17,6 +17,27 @@ AppConfig DefaultAppConfig()
 	config.output.externalKeyingEnabled = false;
 	config.output.outputAlphaRequired = false;
 	config.output.systemFramePixelFormat = VideoIOPixelFormat::Bgra8;
+	config.windowOutput.fullscreen = true;
+	config.windowOutput.borderless = true;
+	config.windowOutput.display = "default";
+	config.windowOutput.x = 0;
+	config.windowOutput.y = 0;
+	config.windowOutput.width = 0;
+	config.windowOutput.height = 0;
+	config.windowOutput.vsync = true;
+	config.windowOutput.allowTearing = false;
+	config.colorPipeline.ocioEnabled = false;
+	config.colorPipeline.ocioConfig.clear();
+	config.colorPipeline.inputColorSpace = "scene_linear";
+	config.colorPipeline.workingColorSpace = "scene_linear";
+	config.colorPipeline.outputColorSpace = "rec709";
+	config.colorPipeline.display = "sRGB";
+	config.colorPipeline.view = "Rec.709";
+	config.colorPipeline.look.clear();
+	config.colorPipeline.exposure = 0.0;
+	config.colorPipeline.gamma = 1.0;
+	config.colorPipeline.workingFormat = "rgba16f";
+	config.colorPipeline.linearWorkingSpace = true;
 	config.outputThread.targetBufferedFrames = 4;
 	config.telemetry.interval = std::chrono::seconds(1);
 	config.logging.minimumLevel = LogLevel::Log;

src/app/AppConfig.h

@@ -34,10 +34,41 @@ struct VideoOutputAppConfig
 	VideoFormat videoMode;
 };
 
+struct WindowOutputAppConfig
+{
+	bool fullscreen = true;
+	bool borderless = true;
+	std::string display = "default";
+	int x = 0;
+	int y = 0;
+	unsigned width = 0;
+	unsigned height = 0;
+	bool vsync = true;
+	bool allowTearing = false;
+};
+
+struct ColorPipelineAppConfig
+{
+	bool ocioEnabled = false;
+	std::string ocioConfig;
+	std::string inputColorSpace = "scene_linear";
+	std::string workingColorSpace = "scene_linear";
+	std::string outputColorSpace = "rec709";
+	std::string display = "sRGB";
+	std::string view = "Rec.709";
+	std::string look;
+	double exposure = 0.0;
+	double gamma = 1.0;
+	std::string workingFormat = "rgba16f";
+	bool linearWorkingSpace = true;
+};
+
 struct AppConfig
 {
 	VideoInputAppConfig input;
 	VideoOutputAppConfig output;
+	WindowOutputAppConfig windowOutput;
+	ColorPipelineAppConfig colorPipeline;
 	VideoOutputThreadConfig outputThread;
 	TelemetryHealthMonitorConfig telemetry;
 	LoggerConfig logging;

src/app/AppConfigJson.cpp

@@ -40,6 +40,20 @@ void ApplySize(const JsonValue& root, const char* key, std::size_t& target)
 		target = static_cast<std::size_t>(value->asNumber());
 }
 
+void ApplyInt(const JsonValue& root, const char* key, int& target)
+{
+	const JsonValue* value = Find(root, key);
+	if (value && value->isNumber())
+		target = static_cast<int>(value->asNumber());
+}
+
+void ApplyUnsigned(const JsonValue& root, const char* key, unsigned& target)
+{
+	const JsonValue* value = Find(root, key);
+	if (value && value->isNumber() && value->asNumber() >= 0.0)
+		target = static_cast<unsigned>(value->asNumber());
+}
+
 void ApplyPort(const JsonValue& root, const char* key, unsigned short& target)
 {
 	const JsonValue* value = Find(root, key);
@@ -108,6 +122,43 @@ void ApplyOutputConfig(const JsonValue& root, AppConfig& config)
 		config.output.externalKeyingEnabled = false;
 }
 
+void ApplyWindowOutputConfig(const JsonValue& root, AppConfig& config)
+{
+	const JsonValue* window = Find(root, "windowOutput");
+	if (!window || !window->isObject())
+		return;
+
+	ApplyBool(*window, "fullscreen", config.windowOutput.fullscreen);
+	ApplyBool(*window, "borderless", config.windowOutput.borderless);
+	ApplyString(*window, "display", config.windowOutput.display);
+	ApplyInt(*window, "x", config.windowOutput.x);
+	ApplyInt(*window, "y", config.windowOutput.y);
+	ApplyUnsigned(*window, "width", config.windowOutput.width);
+	ApplyUnsigned(*window, "height", config.windowOutput.height);
+	ApplyBool(*window, "vsync", config.windowOutput.vsync);
+	ApplyBool(*window, "allowTearing", config.windowOutput.allowTearing);
+}
+
+void ApplyColorPipelineConfig(const JsonValue& root, AppConfig& config)
+{
+	const JsonValue* color = Find(root, "colorPipeline");
+	if (!color || !color->isObject())
+		return;
+
+	ApplyBool(*color, "ocioEnabled", config.colorPipeline.ocioEnabled);
+	ApplyString(*color, "ocioConfig", config.colorPipeline.ocioConfig);
+	ApplyString(*color, "inputColorSpace", config.colorPipeline.inputColorSpace);
+	ApplyString(*color, "workingColorSpace", config.colorPipeline.workingColorSpace);
+	ApplyString(*color, "outputColorSpace", config.colorPipeline.outputColorSpace);
+	ApplyString(*color, "display", config.colorPipeline.display);
+	ApplyString(*color, "view", config.colorPipeline.view);
+	ApplyString(*color, "look", config.colorPipeline.look);
+	ApplyDouble(*color, "exposure", config.colorPipeline.exposure);
+	ApplyDouble(*color, "gamma", config.colorPipeline.gamma);
+	ApplyString(*color, "workingFormat", config.colorPipeline.workingFormat);
+	ApplyBool(*color, "linearWorkingSpace", config.colorPipeline.linearWorkingSpace);
+}
+
 JsonValue InputConfigToJson(const VideoInputAppConfig& input)
 {
 	JsonValue value = JsonValue::MakeObject();
@@ -133,6 +184,39 @@ JsonValue OutputConfigToJson(const VideoOutputAppConfig& output)
 	value.set("keying", keying);
 	return value;
 }
+
+JsonValue WindowOutputConfigToJson(const WindowOutputAppConfig& window)
+{
+	JsonValue value = JsonValue::MakeObject();
+	value.set("fullscreen", JsonValue(window.fullscreen));
+	value.set("borderless", JsonValue(window.borderless));
+	value.set("display", JsonValue(window.display));
+	value.set("x", JsonValue(static_cast<double>(window.x)));
+	value.set("y", JsonValue(static_cast<double>(window.y)));
+	value.set("width", JsonValue(static_cast<double>(window.width)));
+	value.set("height", JsonValue(static_cast<double>(window.height)));
+	value.set("vsync", JsonValue(window.vsync));
+	value.set("allowTearing", JsonValue(window.allowTearing));
+	return value;
+}
+
+JsonValue ColorPipelineConfigToJson(const ColorPipelineAppConfig& color)
+{
+	JsonValue value = JsonValue::MakeObject();
+	value.set("ocioEnabled", JsonValue(color.ocioEnabled));
+	value.set("ocioConfig", JsonValue(color.ocioConfig));
+	value.set("inputColorSpace", JsonValue(color.inputColorSpace));
+	value.set("workingColorSpace", JsonValue(color.workingColorSpace));
+	value.set("outputColorSpace", JsonValue(color.outputColorSpace));
+	value.set("display", JsonValue(color.display));
+	value.set("view", JsonValue(color.view));
+	value.set("look", JsonValue(color.look));
+	value.set("exposure", JsonValue(color.exposure));
+	value.set("gamma", JsonValue(color.gamma));
+	value.set("workingFormat", JsonValue(color.workingFormat));
+	value.set("linearWorkingSpace", JsonValue(color.linearWorkingSpace));
+	return value;
+}
 }
 
 bool ApplyAppConfigJson(const JsonValue& root, AppConfig& config, std::string* error)
@@ -151,6 +235,8 @@ bool ApplyAppConfigJson(const JsonValue& root, AppConfig& config, std::string* e
 	ApplyDouble(root, "oscSmoothing", config.oscSmoothing);
 	ApplyInputConfig(root, config);
 	ApplyOutputConfig(root, config);
+	ApplyWindowOutputConfig(root, config);
+	ApplyColorPipelineConfig(root, config);
 	ApplyBool(root, "autoReload", config.autoReload);
 	ApplySize(root, "maxTemporalHistoryFrames", config.maxTemporalHistoryFrames);
 	ApplyBool(root, "previewEnabled", config.previewEnabled);
@@ -186,6 +272,8 @@ JsonValue AppConfigToJsonValue(const AppConfig& config)
 	root.set("oscSmoothing", NumberValue(config.oscSmoothing));
 	root.set("input", InputConfigToJson(config.input));
 	root.set("output", OutputConfigToJson(config.output));
+	root.set("windowOutput", WindowOutputConfigToJson(config.windowOutput));
+	root.set("colorPipeline", ColorPipelineConfigToJson(config.colorPipeline));
 	root.set("autoReload", JsonValue(config.autoReload));
 	root.set("maxTemporalHistoryFrames", SizeValue(config.maxTemporalHistoryFrames));
 	root.set("previewEnabled", JsonValue(config.previewEnabled));

src/app/AppConfigProvider.cpp

@@ -70,6 +70,20 @@ void ApplySize(const JsonValue& root, const char* key, std::size_t& target)
 		target = static_cast<std::size_t>(value->asNumber());
 }
 
+void ApplyInt(const JsonValue& root, const char* key, int& target)
+{
+	const JsonValue* value = Find(root, key);
+	if (value && value->isNumber())
+		target = static_cast<int>(value->asNumber());
+}
+
+void ApplyUnsigned(const JsonValue& root, const char* key, unsigned& target)
+{
+	const JsonValue* value = Find(root, key);
+	if (value && value->isNumber() && value->asNumber() >= 0.0)
+		target = static_cast<unsigned>(value->asNumber());
+}
+
 void ApplyPort(const JsonValue& root, const char* key, unsigned short& target)
 {
 	const JsonValue* value = Find(root, key);
@@ -127,6 +141,43 @@ void ApplyOutputConfig(const JsonValue& root, AppConfig& config)
 	if (config.output.backend != "decklink")
 		config.output.externalKeyingEnabled = false;
 }
+
+void ApplyWindowOutputConfig(const JsonValue& root, AppConfig& config)
+{
+	const JsonValue* window = Find(root, "windowOutput");
+	if (!window || !window->isObject())
+		return;
+
+	ApplyBool(*window, "fullscreen", config.windowOutput.fullscreen);
+	ApplyBool(*window, "borderless", config.windowOutput.borderless);
+	ApplyString(*window, "display", config.windowOutput.display);
+	ApplyInt(*window, "x", config.windowOutput.x);
+	ApplyInt(*window, "y", config.windowOutput.y);
+	ApplyUnsigned(*window, "width", config.windowOutput.width);
+	ApplyUnsigned(*window, "height", config.windowOutput.height);
+	ApplyBool(*window, "vsync", config.windowOutput.vsync);
+	ApplyBool(*window, "allowTearing", config.windowOutput.allowTearing);
+}
+
+void ApplyColorPipelineConfig(const JsonValue& root, AppConfig& config)
+{
+	const JsonValue* color = Find(root, "colorPipeline");
+	if (!color || !color->isObject())
+		return;
+
+	ApplyBool(*color, "ocioEnabled", config.colorPipeline.ocioEnabled);
+	ApplyString(*color, "ocioConfig", config.colorPipeline.ocioConfig);
+	ApplyString(*color, "inputColorSpace", config.colorPipeline.inputColorSpace);
+	ApplyString(*color, "workingColorSpace", config.colorPipeline.workingColorSpace);
+	ApplyString(*color, "outputColorSpace", config.colorPipeline.outputColorSpace);
+	ApplyString(*color, "display", config.colorPipeline.display);
+	ApplyString(*color, "view", config.colorPipeline.view);
+	ApplyString(*color, "look", config.colorPipeline.look);
+	ApplyDouble(*color, "exposure", config.colorPipeline.exposure);
+	ApplyDouble(*color, "gamma", config.colorPipeline.gamma);
+	ApplyString(*color, "workingFormat", config.colorPipeline.workingFormat);
+	ApplyBool(*color, "linearWorkingSpace", config.colorPipeline.linearWorkingSpace);
+}
 }
 
 AppConfigProvider::AppConfigProvider() :
@@ -174,6 +225,8 @@ bool AppConfigProvider::Load(const std::filesystem::path& path, std::string& err
 	ApplyDouble(root, "oscSmoothing", mConfig.oscSmoothing);
 	ApplyInputConfig(root, mConfig);
 	ApplyOutputConfig(root, mConfig);
+	ApplyWindowOutputConfig(root, mConfig);
+	ApplyColorPipelineConfig(root, mConfig);
 	ApplyBool(root, "autoReload", mConfig.autoReload);
 	ApplySize(root, "maxTemporalHistoryFrames", mConfig.maxTemporalHistoryFrames);
 	ApplyBool(root, "previewEnabled", mConfig.previewEnabled);

src/app/ShaderRuntimeContentController.cpp

@@ -2,73 +2,12 @@
 
 #include "../control/RuntimeControlCommand.h"
 #include "../control/RuntimeStateJson.h"
+#include "../shader/ShaderUiPath.h"
 
 #include <utility>
 
 namespace RenderCadenceCompositor
 {
-namespace
-{
-bool IsSafeShaderAssetPath(const std::string& assetPath, std::filesystem::path& normalizedPath)
-{
-	if (assetPath.empty() || assetPath.find('\\') != std::string::npos ||
-		assetPath.find(':') != std::string::npos || assetPath.find('?') != std::string::npos ||
-		assetPath.find('#') != std::string::npos)
-		return false;
-
-	const std::filesystem::path path(assetPath);
-	if (path.empty() || path.is_absolute())
-		return false;
-
-	bool firstPart = true;
-	bool startsInUiDirectory = false;
-	for (const std::filesystem::path& part : path)
-	{
-		if (part.empty() || part == "." || part == "..")
-			return false;
-		if (firstPart)
-		{
-			startsInUiDirectory = part == "ui";
-			firstPart = false;
-		}
-	}
-	if (!startsInUiDirectory)
-		return false;
-
-	normalizedPath = path.lexically_normal();
-	if (normalizedPath.empty() || normalizedPath.is_absolute())
-		return false;
-	for (const std::filesystem::path& part : normalizedPath)
-	{
-		if (part.empty() || part == "." || part == "..")
-			return false;
-	}
-	return true;
-}
-
-bool IsPathUnderRoot(const std::filesystem::path& root, const std::filesystem::path& path)
-{
-	std::error_code errorCode;
-	const std::filesystem::path canonicalRoot = std::filesystem::weakly_canonical(root, errorCode);
-	if (errorCode)
-		return false;
-
-	const std::filesystem::path canonicalPath = std::filesystem::weakly_canonical(path, errorCode);
-	if (errorCode)
-		return false;
-
-	const std::filesystem::path relative = canonicalPath.lexically_relative(canonicalRoot);
-	if (relative.empty() || relative.is_absolute())
-		return false;
-	for (const std::filesystem::path& part : relative)
-	{
-		if (part == "..")
-			return false;
-	}
-	return true;
-}
-}
-
 ShaderRuntimeContentController::ShaderRuntimeContentController(RenderLayerPublisher publisher) :
 	mRuntimeLayers(std::move(publisher))
 {
@@ -145,26 +84,15 @@ bool ShaderRuntimeContentController::ResolveAssetPath(
 		return false;
 	}
 
-	std::filesystem::path normalizedPath;
-	if (!IsSafeShaderAssetPath(assetPath, normalizedPath))
+	if (!ShaderUiPath::ResolveAssetPath(shaderPackage->directoryPath, assetPath, resolvedPath))
 	{
-		error = "Shader asset path is not safe.";
+		std::filesystem::path normalizedPath;
+		if (!ShaderUiPath::NormalizeAssetPath(assetPath, normalizedPath))
+			error = "Shader asset path is not safe.";
+		else
+			error = "Shader asset was not found.";
 		return false;
 	}
-
-	const std::filesystem::path candidatePath = shaderPackage->directoryPath / normalizedPath;
-	if (!IsPathUnderRoot(shaderPackage->directoryPath, candidatePath))
-	{
-		error = "Shader asset path escaped the package directory.";
-		return false;
-	}
-	if (!std::filesystem::exists(candidatePath) || !std::filesystem::is_regular_file(candidatePath))
-	{
-		error = "Shader asset was not found.";
-		return false;
-	}
-
-	resolvedPath = candidatePath;
 	return true;
 }
 }

src/app/VideoBackendFactory.cpp

@@ -288,6 +288,12 @@ std::unique_ptr<IVideoOutputEdge> CreateNdiOutputBackend(const AppConfig& config
 	return std::make_unique<NdiOutput>(config.output.device);
 }
 
+std::unique_ptr<IVideoOutputEdge> CreateWindowOutputBackend(const AppConfig&)
+{
+	return std::make_unique<DisabledVideoOutputEdge>(
+		"Window output backend is reserved but not implemented yet. Use preview for best-effort monitoring or DeckLink/NDI for scheduled output.");
+}
+
 std::unique_ptr<VideoInputBackendSession> StartNoInputBackend(const VideoInputBackendStartContext&)
 {
 	Log("app", "Video input backend disabled by config.");
@@ -329,6 +335,7 @@ const std::vector<VideoOutputBackendRegistration>& VideoOutputBackendRegistry()
 	static const std::vector<VideoOutputBackendRegistration> registry = {
 		VideoOutputBackendRegistration{ { "decklink" }, true, &CreateDeckLinkOutputBackend },
 		VideoOutputBackendRegistration{ { "ndi" }, false, &CreateNdiOutputBackend },
+		VideoOutputBackendRegistration{ { "window", "fullscreen", "borderless" }, false, &CreateWindowOutputBackend },
 		VideoOutputBackendRegistration{ { "none", "disabled", "off" }, false, &CreateDisabledOutputBackend },
 	};
 	return registry;

src/control/RuntimeStateJson.h

@@ -420,6 +420,33 @@ inline std::string RuntimeStateToJson(const RuntimeStateJsonInput& input)
 	writer.KeyBool("alphaRequired", input.config.output.outputAlphaRequired);
 	writer.EndObject();
 	writer.EndObject();
+	writer.Key("windowOutput");
+	writer.BeginObject();
+	writer.KeyBool("fullscreen", input.config.windowOutput.fullscreen);
+	writer.KeyBool("borderless", input.config.windowOutput.borderless);
+	writer.KeyString("display", input.config.windowOutput.display);
+	writer.KeyInt("x", input.config.windowOutput.x);
+	writer.KeyInt("y", input.config.windowOutput.y);
+	writer.KeyUInt("width", input.config.windowOutput.width);
+	writer.KeyUInt("height", input.config.windowOutput.height);
+	writer.KeyBool("vsync", input.config.windowOutput.vsync);
+	writer.KeyBool("allowTearing", input.config.windowOutput.allowTearing);
+	writer.EndObject();
+	writer.Key("colorPipeline");
+	writer.BeginObject();
+	writer.KeyBool("ocioEnabled", input.config.colorPipeline.ocioEnabled);
+	writer.KeyString("ocioConfig", input.config.colorPipeline.ocioConfig);
+	writer.KeyString("inputColorSpace", input.config.colorPipeline.inputColorSpace);
+	writer.KeyString("workingColorSpace", input.config.colorPipeline.workingColorSpace);
+	writer.KeyString("outputColorSpace", input.config.colorPipeline.outputColorSpace);
+	writer.KeyString("display", input.config.colorPipeline.display);
+	writer.KeyString("view", input.config.colorPipeline.view);
+	writer.KeyString("look", input.config.colorPipeline.look);
+	writer.KeyDouble("exposure", input.config.colorPipeline.exposure);
+	writer.KeyDouble("gamma", input.config.colorPipeline.gamma);
+	writer.KeyString("workingFormat", input.config.colorPipeline.workingFormat);
+	writer.KeyBool("linearWorkingSpace", input.config.colorPipeline.linearWorkingSpace);
+	writer.EndObject();
 	writer.EndObject();
 
 	writer.Key("runtime");

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";
 }
 

src/shader/ShaderManifestParser.cpp

@@ -1,6 +1,8 @@
 #include "stdafx.h"
 #include "ShaderManifestParser.h"
 
+#include "ShaderUiPath.h"
+
 #include <algorithm>
 #include <cmath>
 #include <cctype>
@@ -47,46 +49,6 @@ bool ParseTemporalHistorySource(const std::string& sourceName, TemporalHistorySo
 	return false;
 }
 
-bool IsSafeUiEntryPath(const std::string& entryPath)
-{
-	if (Trim(entryPath).empty())
-		return false;
-	if (entryPath.find('\\') != std::string::npos || entryPath.find(':') != std::string::npos ||
-		entryPath.find('?') != std::string::npos || entryPath.find('#') != std::string::npos)
-		return false;
-
-	const std::filesystem::path path(entryPath);
-	if (path.empty() || path.is_absolute())
-		return false;
-
-	bool firstPart = true;
-	bool startsInUiDirectory = false;
-	for (const std::filesystem::path& part : path)
-	{
-		if (part.empty() || part == "." || part == "..")
-			return false;
-		if (firstPart)
-		{
-			startsInUiDirectory = part == "ui";
-			firstPart = false;
-		}
-	}
-	if (!startsInUiDirectory)
-		return false;
-
-	const std::filesystem::path normalized = path.lexically_normal();
-	if (normalized.empty() || normalized.is_absolute())
-		return false;
-	for (const std::filesystem::path& part : normalized)
-	{
-		if (part.empty() || part == "." || part == "..")
-			return false;
-	}
-
-	const std::string extension = normalized.extension().string();
-	return extension == ".js" || extension == ".mjs";
-}
-
 bool IsValidCustomElementTag(const std::string& tag)
 {
 	if (tag.empty() || tag.find('-') == std::string::npos || tag.front() == '-' || tag.back() == '-')
@@ -450,7 +412,9 @@ bool ParseUiDefinition(const JsonValue& manifestJson, ShaderPackage& shaderPacka
 		error = "Shader UI type must be 'webComponent' in: " + ManifestPathMessage(manifestPath);
 		return false;
 	}
-	if (!IsSafeUiEntryPath(ui.entryPath))
+	std::filesystem::path normalizedEntryPath;
+	if (!ShaderUiPath::NormalizeAssetPath(ui.entryPath, normalizedEntryPath) ||
+		!ShaderUiPath::IsModulePath(normalizedEntryPath))
 	{
 		error = "Shader UI entry must be a safe relative .js or .mjs path under ui/ in: " + ManifestPathMessage(manifestPath);
 		return false;
@@ -461,14 +425,15 @@ bool ParseUiDefinition(const JsonValue& manifestJson, ShaderPackage& shaderPacka
 		return false;
 	}
 
-	const std::filesystem::path entryPath = shaderPackage.directoryPath / std::filesystem::path(ui.entryPath);
-	if (!std::filesystem::exists(entryPath))
+	std::filesystem::path entryPath;
+	if (!ShaderUiPath::ResolveAssetPath(shaderPackage.directoryPath, ui.entryPath, entryPath))
 	{
-		error = "Shader UI entry not found for package " + shaderPackage.id + ": " + entryPath.string();
+		error = "Shader UI entry not found for package " + shaderPackage.id + ": " +
+			(shaderPackage.directoryPath / normalizedEntryPath).string();
 		return false;
 	}
 
-	ui.entryPath = std::filesystem::path(ui.entryPath).lexically_normal().generic_string();
+	ui.entryPath = normalizedEntryPath.generic_string();
 	ui.enabled = true;
 	shaderPackage.ui = ui;
 	return true;

src/shader/ShaderPackageRegistry.cpp

@@ -77,6 +77,7 @@ bool ShaderPackageRegistry::Scan(
 		return false;
 	}
 
+	std::map<std::string, std::string> customUiTagOwners;
 	for (const auto& entry : std::filesystem::directory_iterator(shaderRoot))
 	{
 		if (!entry.is_directory())
@@ -100,6 +101,21 @@ bool ShaderPackageRegistry::Scan(
 			continue;
 		}
 
+		if (shaderPackage.ui.enabled)
+		{
+			const auto tagOwnerIt = customUiTagOwners.find(shaderPackage.ui.customElementTag);
+			if (tagOwnerIt != customUiTagOwners.end())
+			{
+				packageStatuses.push_back(BuildUnavailableStatus(
+					manifestPath,
+					shaderPackage,
+					"Duplicate shader UI custom element tag '" + shaderPackage.ui.customElementTag +
+						"' already used by shader '" + tagOwnerIt->second + "'."));
+				continue;
+			}
+			customUiTagOwners[shaderPackage.ui.customElementTag] = shaderPackage.id;
+		}
+
 		packageOrder.push_back(shaderPackage.id);
 		packageStatuses.push_back(BuildAvailableStatus(shaderPackage));
 		packagesById[shaderPackage.id] = shaderPackage;

src/shader/ShaderUiPath.cpp

@@ -0,0 +1,96 @@
+#include "stdafx.h"
+#include "ShaderUiPath.h"
+
+namespace ShaderUiPath
+{
+namespace
+{
+bool IsPathUnderRoot(const std::filesystem::path& root, const std::filesystem::path& path)
+{
+	std::error_code errorCode;
+	const std::filesystem::path canonicalRoot = std::filesystem::weakly_canonical(root, errorCode);
+	if (errorCode)
+		return false;
+
+	const std::filesystem::path canonicalPath = std::filesystem::weakly_canonical(path, errorCode);
+	if (errorCode)
+		return false;
+
+	const std::filesystem::path relative = canonicalPath.lexically_relative(canonicalRoot);
+	if (relative.empty() || relative.is_absolute())
+		return false;
+	for (const std::filesystem::path& part : relative)
+	{
+		if (part == "..")
+			return false;
+	}
+	return true;
+}
+}
+
+bool NormalizeAssetPath(const std::string& assetPath, std::filesystem::path& normalizedPath)
+{
+	normalizedPath.clear();
+	if (assetPath.empty() || assetPath.find('\\') != std::string::npos ||
+		assetPath.find(':') != std::string::npos || assetPath.find('?') != std::string::npos ||
+		assetPath.find('#') != std::string::npos)
+	{
+		return false;
+	}
+
+	const std::filesystem::path path(assetPath);
+	if (path.empty() || path.is_absolute())
+		return false;
+
+	bool firstPart = true;
+	bool startsInUiDirectory = false;
+	for (const std::filesystem::path& part : path)
+	{
+		if (part.empty() || part == "." || part == "..")
+			return false;
+		if (firstPart)
+		{
+			startsInUiDirectory = part == "ui";
+			firstPart = false;
+		}
+	}
+	if (!startsInUiDirectory)
+		return false;
+
+	normalizedPath = path.lexically_normal();
+	if (normalizedPath.empty() || normalizedPath.is_absolute())
+		return false;
+	for (const std::filesystem::path& part : normalizedPath)
+	{
+		if (part.empty() || part == "." || part == "..")
+			return false;
+	}
+	return true;
+}
+
+bool IsModulePath(const std::filesystem::path& normalizedPath)
+{
+	const std::string extension = normalizedPath.extension().string();
+	return extension == ".js" || extension == ".mjs";
+}
+
+bool ResolveAssetPath(
+	const std::filesystem::path& packageRoot,
+	const std::string& assetPath,
+	std::filesystem::path& resolvedPath)
+{
+	resolvedPath.clear();
+	std::filesystem::path normalizedPath;
+	if (!NormalizeAssetPath(assetPath, normalizedPath))
+		return false;
+
+	const std::filesystem::path candidatePath = packageRoot / normalizedPath;
+	if (!IsPathUnderRoot(packageRoot, candidatePath))
+		return false;
+	if (!std::filesystem::exists(candidatePath) || !std::filesystem::is_regular_file(candidatePath))
+		return false;
+
+	resolvedPath = candidatePath;
+	return true;
+}
+}

src/shader/ShaderUiPath.h

@@ -0,0 +1,14 @@
+#pragma once
+
+#include <filesystem>
+#include <string>
+
+namespace ShaderUiPath
+{
+bool NormalizeAssetPath(const std::string& assetPath, std::filesystem::path& normalizedPath);
+bool IsModulePath(const std::filesystem::path& normalizedPath);
+bool ResolveAssetPath(
+	const std::filesystem::path& packageRoot,
+	const std::string& assetPath,
+	std::filesystem::path& resolvedPath);
+}

tests/RenderCadenceCompositorAppConfigProviderTests.cpp

@@ -49,6 +49,31 @@ std::filesystem::path WriteConfigFixture()
 		<< "      \"alphaRequired\": true\n"
 		<< "    }\n"
 		<< "  },\n"
+		<< "  \"windowOutput\": {\n"
+		<< "    \"fullscreen\": false,\n"
+		<< "    \"borderless\": true,\n"
+		<< "    \"display\": \"Display 2\",\n"
+		<< "    \"x\": 1920,\n"
+		<< "    \"y\": 0,\n"
+		<< "    \"width\": 1920,\n"
+		<< "    \"height\": 1080,\n"
+		<< "    \"vsync\": true,\n"
+		<< "    \"allowTearing\": false\n"
+		<< "  },\n"
+		<< "  \"colorPipeline\": {\n"
+		<< "    \"ocioEnabled\": true,\n"
+		<< "    \"ocioConfig\": \"config/ocio/studio.ocio\",\n"
+		<< "    \"inputColorSpace\": \"rec709\",\n"
+		<< "    \"workingColorSpace\": \"acescg\",\n"
+		<< "    \"outputColorSpace\": \"rec709_display\",\n"
+		<< "    \"display\": \"sRGB\",\n"
+		<< "    \"view\": \"Filmic\",\n"
+		<< "    \"look\": \"none\",\n"
+		<< "    \"exposure\": 0.5,\n"
+		<< "    \"gamma\": 1.1,\n"
+		<< "    \"workingFormat\": \"rgba16f\",\n"
+		<< "    \"linearWorkingSpace\": true\n"
+		<< "  },\n"
 		<< "  \"autoReload\": false,\n"
 		<< "  \"maxTemporalHistoryFrames\": 8,\n"
 		<< "  \"previewEnabled\": true,\n"
@@ -92,6 +117,27 @@ void TestLoadsRuntimeHostConfig()
 	Expect(config.runtimeShaderId == "solid-color", "runtime shader id loads");
 	Expect(config.output.externalKeyingEnabled, "external keying loads");
 	Expect(config.output.outputAlphaRequired, "output alpha requirement loads");
+	Expect(!config.windowOutput.fullscreen, "window output fullscreen loads");
+	Expect(config.windowOutput.borderless, "window output borderless loads");
+	Expect(config.windowOutput.display == "Display 2", "window output display loads");
+	Expect(config.windowOutput.x == 1920, "window output x loads");
+	Expect(config.windowOutput.y == 0, "window output y loads");
+	Expect(config.windowOutput.width == 1920, "window output width loads");
+	Expect(config.windowOutput.height == 1080, "window output height loads");
+	Expect(config.windowOutput.vsync, "window output vsync loads");
+	Expect(!config.windowOutput.allowTearing, "window output tearing flag loads");
+	Expect(config.colorPipeline.ocioEnabled, "OCIO enabled loads");
+	Expect(config.colorPipeline.ocioConfig == "config/ocio/studio.ocio", "OCIO config path loads");
+	Expect(config.colorPipeline.inputColorSpace == "rec709", "input color space loads");
+	Expect(config.colorPipeline.workingColorSpace == "acescg", "working color space loads");
+	Expect(config.colorPipeline.outputColorSpace == "rec709_display", "output color space loads");
+	Expect(config.colorPipeline.display == "sRGB", "OCIO display loads");
+	Expect(config.colorPipeline.view == "Filmic", "OCIO view loads");
+	Expect(config.colorPipeline.look == "none", "OCIO look loads");
+	Expect(config.colorPipeline.exposure == 0.5, "OCIO exposure loads");
+	Expect(config.colorPipeline.gamma == 1.1, "OCIO gamma loads");
+	Expect(config.colorPipeline.workingFormat == "rgba16f", "working format loads");
+	Expect(config.colorPipeline.linearWorkingSpace, "linear working space flag loads");
 
 	std::filesystem::remove(path);
 }
@@ -154,6 +200,10 @@ void TestConfigJsonRoundTrip()
 	config.output.backend = "ndi";
 	config.output.device = "Program";
 	config.output.pixelFormat = "uyvy8";
+	config.windowOutput.fullscreen = false;
+	config.windowOutput.display = "Display 3";
+	config.colorPipeline.ocioEnabled = true;
+	config.colorPipeline.workingColorSpace = "acescg";
 	config.previewEnabled = true;
 	config.runtimeShaderId = "solid-color";
 
@@ -166,6 +216,10 @@ void TestConfigJsonRoundTrip()
 	Expect(parsed.output.backend == "ndi", "output backend round trips");
 	Expect(parsed.output.device == "Program", "output device round trips");
 	Expect(parsed.output.pixelFormat == "uyvy8", "output pixel format round trips");
+	Expect(!parsed.windowOutput.fullscreen, "window output fullscreen round trips");
+	Expect(parsed.windowOutput.display == "Display 3", "window output display round trips");
+	Expect(parsed.colorPipeline.ocioEnabled, "OCIO enabled round trips");
+	Expect(parsed.colorPipeline.workingColorSpace == "acescg", "working color space round trips");
 	Expect(parsed.previewEnabled, "preview enabled round trips");
 	Expect(parsed.runtimeShaderId == "solid-color", "runtime shader id round trips");
 }

tests/RenderCadenceCompositorRuntimeStateJsonTests.cpp

@@ -131,6 +131,9 @@ int main()
 	ExpectContains(json, "\"height\":1080", "state JSON should expose output height");
 	ExpectContains(json, "\"input\":{\"backend\":\"decklink\",\"device\":\"default\",\"resolution\":\"1080p\",\"frameRate\":\"59.94\"}", "state JSON should expose nested input config");
 	ExpectContains(json, "\"output\":{\"backend\":\"decklink\",\"device\":\"default\",\"resolution\":\"1080p\",\"frameRate\":\"59.94\",\"pixelFormat\":\"auto\",\"systemFramePixelFormat\":\"8-bit BGRA\",\"keying\"", "state JSON should expose nested output config");
+	ExpectContains(json, "\"windowOutput\":{\"fullscreen\":true,\"borderless\":true,\"display\":\"default\"", "state JSON should expose window output stub config");
+	ExpectContains(json, "\"colorPipeline\":{\"ocioEnabled\":false,\"ocioConfig\":\"\",\"inputColorSpace\":\"scene_linear\"", "state JSON should expose color pipeline stub config");
+	ExpectContains(json, "\"workingFormat\":\"rgba16f\",\"linearWorkingSpace\":true", "state JSON should expose linear 16-bit float pipeline intent");
 	ExpectContains(json, "\"osc\":{\"configured\":true,\"listening\":false", "state JSON should expose OSC stub status");
 	ExpectContains(json, "\"videoOutput\":{\"enabled\":true,\"backend\":\"decklink\"", "state JSON should expose neutral video output status");
 	ExpectContains(json, "\"scheduleFailures\":2", "state JSON should expose neutral video output schedule failures");

tests/ShaderPackageRegistryTests.cpp

@@ -138,6 +138,38 @@ void TestInvalidUiDefinition()
 	std::filesystem::remove_all(root);
 }
 
+void TestDuplicateCustomUiTags()
+{
+	const std::filesystem::path root = MakeTestRoot();
+	WriteFile(root / "a" / "ui" / "controls.js", "customElements.define('shared-controls', class extends HTMLElement {});\n");
+	WriteFile(root / "b" / "ui" / "controls.js", "customElements.define('shared-controls', class extends HTMLElement {});\n");
+	WriteShaderPackage(root, "a", R"({
+		"id": "shader-a",
+		"name": "Shader A",
+		"ui": { "type": "webComponent", "entry": "ui/controls.js", "tag": "shared-controls" },
+		"parameters": []
+	})");
+	WriteShaderPackage(root, "b", R"({
+		"id": "shader-b",
+		"name": "Shader B",
+		"ui": { "type": "webComponent", "entry": "ui/controls.js", "tag": "shared-controls" },
+		"parameters": []
+	})");
+
+	ShaderPackageRegistry registry(4);
+	std::map<std::string, ShaderPackage> packages;
+	std::vector<std::string> order;
+	std::vector<ShaderPackageStatus> statuses;
+	std::string error;
+	Expect(registry.Scan(root, packages, order, statuses, error), "duplicate custom UI tags do not fail the whole scan");
+	Expect(packages.size() == 1, "only one duplicate custom UI tag owner remains available");
+	Expect(std::any_of(statuses.begin(), statuses.end(), [](const ShaderPackageStatus& status) {
+		return !status.available && status.error.find("Duplicate shader UI custom element tag") != std::string::npos;
+	}), "duplicate custom UI tag is surfaced as an unavailable shader");
+
+	std::filesystem::remove_all(root);
+}
+
 void TestExplicitPassManifest()
 {
 	const std::filesystem::path root = MakeTestRoot();
@@ -335,6 +367,7 @@ int main()
 	TestValidManifest();
 	TestExplicitPassManifest();
 	TestInvalidUiDefinition();
+	TestDuplicateCustomUiTags();
 	TestMissingFontAsset();
 	TestInvalidManifest();
 	TestInvalidTemporalSettings();

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) => {
@@ -140,7 +133,11 @@ export function ShaderCustomPanel({ layer, ui, onParameterChange, onResetParamet
             return;
           }
           if (element.parentNode !== node) {
-            node.replaceChildren(element);
+            try {
+              node.replaceChildren(element);
+            } catch (error) {
+              setLoadError(error instanceof Error ? error.message : "Custom controls failed to mount.");
+            }
           }
         }}
       >

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);