Font loading fixes

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