@agent-native/core-corpus 0.214.0 → 0.216.0

package/corpus/templates/design/app/components/design/design-canvas/private-replay-screenshot-preview.ts

@@ -34,12 +34,12 @@ function randomNonce(): string {
   return `${Date.now().toString(36)}-${Math.random().toString(36).slice(2)}`;
 }
 
-interface SrcsetCandidate {
+export interface SrcsetCandidate {
   url: string;
   descriptor: string;
 }
 
-function parseSrcset(value: string): SrcsetCandidate[] {
+export function parseSrcset(value: string): SrcsetCandidate[] {
   const candidates: SrcsetCandidate[] = [];
   let position = 0;
 

package/corpus/templates/design/app/components/design/edit-panel/effects-properties.tsx

@@ -43,11 +43,6 @@ import {
   DesignColorPicker,
   inferPaintType,
 } from "../inspector/DesignColorPicker";
-import {
-  GlslShaderEffectSection,
-  useScreenGlslShaders,
-  type GlslShaderPanelContext,
-} from "../inspector/GlslShaderPanel";
 import {
   InspectorControlField,
   InspectorControlPopoverContent,
@@ -56,6 +51,11 @@ import {
   hasSelectedNativeEffects,
   NativeShaderEffectSection,
 } from "../inspector/NativeShaderPanel";
+import {
+  SavedGlslEffectRow,
+  useHasSavedGlslEffect,
+} from "../inspector/saved-glsl-shader";
+import type { ShaderEditorContext } from "../shader-source-coordination";
 import type { ElementInfo } from "../types";
 import { isTextElement } from "./element-classification";
 import { elementStableKey } from "./element-identity";
@@ -628,13 +628,13 @@ export function EffectsProperties({
   element,
   onStyleChange,
   onStylesChange,
-  glslShaderContext,
+  shaderContext,
   motionKeyframeContext,
 }: {
   element: ElementInfo;
   onStyleChange: StyleChangeHandler;
   onStylesChange?: StylesChangeHandler;
-  glslShaderContext?: GlslShaderPanelContext;
+  shaderContext?: ShaderEditorContext;
   motionKeyframeContext?: MotionKeyframeFieldContext;
 }) {
   const t = useT();
@@ -723,18 +723,11 @@ export function EffectsProperties({
     shadowLayers.length,
     reorderShadowLayers,
   );
-  const screenShaders = useScreenGlslShaders(glslShaderContext ?? {});
-  const hasShaderEffect = Boolean(
-    glslShaderContext?.nodeId &&
-    screenShaders.mounts.some(
-      (mount) =>
-        mount.nodeId === glslShaderContext.nodeId && mount.mode === "effect",
-    ),
-  );
+  const hasShaderEffect = useHasSavedGlslEffect(shaderContext);
   const hasNativeEffect = hasSelectedNativeEffects(
-    glslShaderContext?.content,
-    glslShaderContext?.nodeId,
-    glslShaderContext?.selector,
+    shaderContext?.content,
+    shaderContext?.nodeId,
+    shaderContext?.selector,
   );
   const hasEffectsContent =
     effectsAreMixed ||
@@ -811,7 +804,7 @@ export function EffectsProperties({
                 <IconBackground className="size-3.5" />
                 {"Background blur" /* i18n-ignore design effect type */}
               </DropdownMenuItem>
-              {glslShaderContext?.nodeId ? (
+              {shaderContext?.nodeId ? (
                 <DropdownMenuItem
                   className="gap-2 !text-[11px]"
                   onSelect={() => {
@@ -1020,15 +1013,11 @@ export function EffectsProperties({
               ) : null}
             </>
           )}
-          {glslShaderContext?.nodeId ? (
+          {shaderContext?.nodeId ? (
             <>
-              <GlslShaderEffectSection
-                context={glslShaderContext}
-                pickerOpen={false}
-                onPickerOpenChange={setShaderPickerOpen}
-              />
+              <SavedGlslEffectRow context={shaderContext} />
               <NativeShaderEffectSection
-                context={glslShaderContext}
+                context={shaderContext}
                 pickerOpen={shaderPickerOpen}
                 onPickerOpenChange={setShaderPickerOpen}
                 renderColorPicker={renderShaderColorPicker}

package/corpus/templates/design/app/components/design/edit-panel/fill-properties.tsx

@@ -20,6 +20,7 @@ import {
   PopoverAnchor,
   PopoverTrigger,
 } from "@/components/ui/popover";
+import { Skeleton } from "@/components/ui/skeleton";
 
 import { DEFAULT_SHAPE_FILL } from "../canvas-primitive-style";
 import {
@@ -49,10 +50,6 @@ import {
   showsChevron,
   showsOpacity,
 } from "../inspector/fill-field-reading";
-import {
-  findFillShader,
-  type GlslShaderPanelContext,
-} from "../inspector/GlslShaderPanel";
 import { InspectorControlPopoverContent } from "../inspector/InspectorControlPopover";
 import { nativeCatalogDefinitionKey } from "../inspector/native-catalog-display";
 import {
@@ -60,7 +57,9 @@ import {
   persistNativeShaderEdit,
   selectedNativeInstances,
 } from "../inspector/NativeShaderPanel";
+import { useSavedGlslFill } from "../inspector/saved-glsl-shader";
 import type { SubtreeColorStylesRead } from "../multi-screen/read-portable-style-snapshot";
+import type { ShaderEditorContext } from "../shader-source-coordination";
 import type { ElementInfo } from "../types";
 import { useDesignColorTokenSource } from "./design-color-tokens";
 import { paletteColorValue, selectionColorValues } from "./document-colors";
@@ -200,7 +199,7 @@ export function FillProperties({
   onStyleChange,
   onStylesChange,
   documentColorPalette = [],
-  glslShaderContext,
+  shaderContext,
   onRemoveShaderFill,
   motionKeyframeContext,
   breakpointOverrideContext,
@@ -217,7 +216,7 @@ export function FillProperties({
   onStyleChange: StyleChangeHandler;
   onStylesChange?: StylesChangeHandler;
   documentColorPalette?: string[];
-  glslShaderContext?: GlslShaderPanelContext;
+  shaderContext?: ShaderEditorContext;
   /**
    * Takes the element's shader off, with the fallback color it was painted
    * over. The fill row's remove button calls it instead of clearing the color
@@ -263,32 +262,31 @@ export function FillProperties({
     [isTextFillElement, contrastContext, styles.fontSize, styles.fontWeight, t],
   );
   const isVectorFillElement = isVectorShapeSelection(element);
-  const fillShader = useMemo(
-    () =>
-      isVectorFillElement || isTextFillElement
-        ? null
-        : findFillShader(glslShaderContext),
-    [glslShaderContext, isTextFillElement, isVectorFillElement],
-  );
+  const savedFill = useSavedGlslFill(shaderContext);
+  const readsSavedFill =
+    !isVectorFillElement &&
+    !isTextFillElement &&
+    Boolean(shaderContext?.nodeId);
+  const fillShader = readsSavedFill ? savedFill.fill : null;
   const isNativeVectorFillElement =
     isVectorFillElement &&
     element.tagName.toLowerCase() === "svg" &&
-    Boolean(glslShaderContext?.fileId) &&
-    !glslShaderContext?.editSource;
+    Boolean(shaderContext?.fileId) &&
+    !shaderContext?.editSource;
   const nativeFill = useMemo(
     () =>
       (isVectorFillElement && !isNativeVectorFillElement) || isTextFillElement
         ? { instances: [], definitions: [], errors: [] }
         : selectedNativeInstances(
-            glslShaderContext?.content,
-            glslShaderContext?.nodeId,
+            shaderContext?.content,
+            shaderContext?.nodeId,
             "fill",
-            glslShaderContext?.selector,
+            shaderContext?.selector,
           ),
     [
-      glslShaderContext?.content,
-      glslShaderContext?.nodeId,
-      glslShaderContext?.selector,
+      shaderContext?.content,
+      shaderContext?.nodeId,
+      shaderContext?.selector,
       isTextFillElement,
       isVectorFillElement,
       isNativeVectorFillElement,
@@ -305,10 +303,10 @@ export function FillProperties({
     instanceId: string,
     operation: Parameters<typeof persistNativeShaderEdit>[1],
   ) => {
-    if (!glslShaderContext) return;
+    if (!shaderContext) return;
     setNativeBusyId(instanceId);
     try {
-      await persistNativeShaderEdit(glslShaderContext, operation);
+      await persistNativeShaderEdit(shaderContext, operation);
       if (operation.kind === "remove") setNativeControlsOpenId(null);
     } catch (error) {
       toast.error(
@@ -460,34 +458,11 @@ export function FillProperties({
     ? hasAuthoredFill
     : isTextFillElement || colorHasVisibleAlpha(fillValue) || hasAuthoredFill;
   const hasVisibleFill =
-    hasBaseFill || hasBackgroundLayer || nativeFillInstances.length > 0;
-  // Legacy Shader conversion replaces its CSS paint layer. Keep it out of
-  // the sibling picker when native Fill instances already occupy their own slots.
-  const layerShaderContext = useMemo(
-    () =>
-      glslShaderContext &&
-      !isTextFillElement &&
-      !isVectorFillElement &&
-      !hasBaseFill &&
-      nativeFillInstances.length === 0 &&
-      backgroundLayers.length === 1
-        ? {
-            ...glslShaderContext,
-            replacesBackgroundLayers: true,
-            onFillShaderApplied: () =>
-              setOpenFillPickerKey(`${fillStashKey}:base`),
-          }
-        : undefined,
-    [
-      glslShaderContext,
-      isTextFillElement,
-      isVectorFillElement,
-      hasBaseFill,
-      nativeFillInstances.length,
-      backgroundLayers.length,
-      fillStashKey,
-    ],
-  );
+    hasBaseFill ||
+    hasBackgroundLayer ||
+    nativeFillInstances.length > 0 ||
+    Boolean(fillShader) ||
+    (readsSavedFill && savedFill.status !== "ready");
   const pendingConversion = pendingConvertedLayerRef.current;
   if (
     pendingConversion?.elementKey === fillStashKey &&
@@ -707,7 +682,7 @@ export function FillProperties({
   };
 
   const addFill = () => {
-    if (nativeFillInstances.length > 0 && glslShaderContext && !onAddFill) {
+    if (nativeFillInstances.length > 0 && shaderContext && !onAddFill) {
       setNativeAddOpen(true);
       return;
     }
@@ -814,7 +789,7 @@ export function FillProperties({
                   </SectionIconButton>
                 </span>
               </PopoverAnchor>
-              {nativeFillInstances.length > 0 && glslShaderContext ? (
+              {nativeFillInstances.length > 0 && shaderContext ? (
                 <InspectorControlPopoverContent
                   title={t("editPanel.shaders.shader")}
                   icon={<IconWaveSine className="size-4" />}
@@ -822,7 +797,7 @@ export function FillProperties({
                   bodyClassName="max-h-[70vh] overflow-y-auto p-0"
                 >
                   <NativeShaderPanel
-                    context={glslShaderContext}
+                    context={shaderContext}
                     placement="fill"
                     catalogOnly
                     onChanged={() => setNativeAddOpen(false)}
@@ -957,9 +932,9 @@ export function FillProperties({
                   className="w-[min(320px,calc(100vw-2rem))]"
                   bodyClassName="max-h-[70vh] overflow-y-auto p-0"
                 >
-                  {glslShaderContext ? (
+                  {shaderContext ? (
                     <NativeShaderPanel
-                      context={glslShaderContext}
+                      context={shaderContext}
                       placement="fill"
                       instanceId={instance.id}
                       showCatalog={false}
@@ -971,6 +946,43 @@ export function FillProperties({
               </Popover>
             );
           })}
+          {readsSavedFill && savedFill.status !== "ready" ? (
+            <InspectorPaintRow>
+              <InspectorGridCell span={28}>
+                {savedFill.status === "pending" ? (
+                  <Skeleton className="h-6 w-full" />
+                ) : (
+                  <div
+                    role="alert"
+                    className="text-muted-foreground !text-[11px]"
+                  >
+                    {t("common.genericError")}
+                  </div>
+                )}
+              </InspectorGridCell>
+            </InspectorPaintRow>
+          ) : null}
+          {fillShader && onRemoveShaderFill ? (
+            <InspectorPaintRow>
+              <InspectorGridCell span={20}>
+                <div className="flex h-6 min-w-0 items-center gap-1.5 rounded-md border border-[var(--design-editor-control-border)] bg-[var(--design-editor-control-bg)] px-1.5 !text-[11px]">
+                  <IconWaveSine className="size-3.5 shrink-0 text-muted-foreground" />
+                  <span className="min-w-0 flex-1 truncate font-medium text-foreground">
+                    {fillShader.name}
+                  </span>
+                </div>
+              </InspectorGridCell>
+              <InspectorGridCell span={4} className="flex justify-center" />
+              <InspectorGridCell span={4} className="flex justify-center">
+                <SectionIconButton
+                  label={t("editPanel.labels.removeLayer")}
+                  onClick={onRemoveShaderFill}
+                >
+                  <IconMinus className="size-3.5" />
+                </SectionIconButton>
+              </InspectorGridCell>
+            </InspectorPaintRow>
+          ) : null}
           {hasBaseFill ? (
             <InspectorPaintRow>
               <InspectorGridCell span={20}>
@@ -1066,14 +1078,11 @@ export function FillProperties({
                       element.tagName,
                     fillProperty,
                   ].join(":")}
-                  glslShaderContext={
-                    (isVectorFillElement && !isNativeVectorFillElement) ||
-                    isTextFillElement ||
-                    nativeFillInstances.length > 0
+                  shaderContext={
+                    isTextFillElement || nativeFillInstances.length > 0
                       ? undefined
-                      : glslShaderContext
+                      : shaderContext
                   }
-                  fillShader={fillShader}
                   authoredValue={
                     authoredFillValue ? storedPaint.stops[0]!.color : undefined
                   }
@@ -1100,10 +1109,6 @@ export function FillProperties({
                 <SectionIconButton
                   label={t("editPanel.labels.removeLayer")}
                   onClick={() => {
-                    if (fillShader && onRemoveShaderFill) {
-                      onRemoveShaderFill();
-                      return;
-                    }
                     commitStylePatch(
                       removeBaseFillPatch(fillProperty, element.inlineStyles),
                       onStyleChange,
@@ -1501,7 +1506,9 @@ export function FillProperties({
                             ? TEXT_GRADIENT_PAINT_TYPES
                             : EXISTING_LAYER_PAINT_TYPES
                         }
-                        glslShaderContext={layerShaderContext}
+                        shaderContext={
+                          isTextFillElement ? undefined : shaderContext
+                        }
                         backgroundImage={layer}
                         backgroundSize={backgroundSizeLayers[index]}
                         backgroundRepeat={backgroundRepeatLayers[index]}

package/corpus/templates/design/app/components/design/edit-panel/panel-primitives.tsx

@@ -28,7 +28,7 @@ import {
 } from "../inspector/color-picker-tokens";
 import type { DesignPaintType } from "../inspector/DesignColorPicker";
 import { readFillField } from "../inspector/fill-field-reading";
-import type { GlslShaderPanelContext } from "../inspector/GlslShaderPanel";
+import type { ShaderEditorContext } from "../shader-source-coordination";
 import { useDesignColorTokenSource } from "./design-color-tokens";
 import {
   buildGradientLayer,
@@ -200,9 +200,7 @@ export function ColorInput({
   documentColors,
   supportedPaintTypes,
   pickerKey,
-  glslShaderContext,
-  fillShader,
-  shaderDisplayOpacity,
+  shaderContext,
   authoredValue,
   bindTokens = false,
   boundToken,
@@ -252,12 +250,8 @@ export function ColorInput({
   documentColors?: string[];
   supportedPaintTypes?: DesignPaintType[];
   pickerKey?: string;
+  shaderContext?: ShaderEditorContext;
   disabled?: boolean;
-  glslShaderContext?: GlslShaderPanelContext;
-  /** The shader painted as this fill: the picker opens on its controls. */
-  fillShader?: { name: string } | null;
-  /** Native shader opacity for the Shader field; CSS layers keep their own alpha. */
-  shaderDisplayOpacity?: number;
   /** The color as written in the design, for the field to read as written. */
   authoredValue?: string;
   /** Offers the design's color tokens in the picker's Libraries pane; picking one writes `var(--token)`. */
@@ -473,11 +467,9 @@ export function ColorInput({
       ? selectedGradient
         ? selectedGradient.type
         : "image"
-      : fillShader
-        ? "shader"
-        : colorHasVisibleAlpha(draft || value)
-          ? "solid"
-          : "none";
+      : colorHasVisibleAlpha(draft || value)
+        ? "solid"
+        : "none";
   const pickerValue = singlePaint
     ? singlePaintGradient
       ? value
@@ -670,17 +662,13 @@ export function ColorInput({
       onBlendModeChange={onBlendModeChange}
       showBlendMode={Boolean(onBlendModeChange)}
       paintType={selectedPaintType}
-      opacity={
-        selectedPaintType === "shader" ? shaderDisplayOpacity : undefined
-      }
       onPaintTypeChange={handlePaintTypeChange}
       gradientType={activeGradient?.type}
       onGradientTypeChange={handleGradientTypeChange}
       documentColors={documentColors}
       supportedPaintTypes={supportedPaintTypes}
-      glslShaderContext={glslShaderContext}
+      shaderContext={shaderContext}
       authoredValue={authoredValue}
-      paintLabel={fillShader?.name}
       tokens={bindTokens ? tokenSource?.tokens : undefined}
       onRequestTokens={bindTokens ? tokenSource?.request : undefined}
       onPickToken={bindTokens && tokenSource ? bindToken : undefined}

package/corpus/templates/design/app/components/design/inspector/DesignColorPicker.tsx

@@ -36,6 +36,7 @@ import {
   useState,
   type ReactNode,
 } from "react";
+import { toast } from "sonner";
 
 import { Input } from "@/components/ui/input";
 import {
@@ -59,6 +60,7 @@ import {
 import { cn } from "@/lib/utils";
 
 import type { StyleChangeMeta } from "../edit-panel/style-change-types";
+import type { ShaderEditorContext } from "../shader-source-coordination";
 import {
   ContrastBar,
   ContrastOverlay,
@@ -120,10 +122,6 @@ import {
   DocumentColors,
   type ColorPickerTab,
 } from "./color-picker-sections";
-import {
-  ShaderPane,
-  type ShaderPaneController,
-} from "./color-picker-shader-pane";
 import {
   alphaTrackBackground,
   alphaTrackBackgroundFor,
@@ -155,7 +153,6 @@ import {
   showsChevron,
   showsOpacity,
 } from "./fill-field-reading";
-import type { GlslShaderPanelContext } from "./GlslShaderPanel";
 import {
   GradientEditor,
   defaultGradient,
@@ -170,6 +167,11 @@ import {
   parseImageFillCss,
   type ImageFillValue,
 } from "./ImageFillControls";
+import {
+  NativeShaderPanel,
+  persistNativeShaderEdit,
+  selectedNativeInstances,
+} from "./NativeShaderPanel";
 
 export {
   computeScrubbedValue,
@@ -297,9 +299,9 @@ export interface DesignColorPickerProps {
   onRemoveGradientStop?: (id: string) => void;
   documentColors?: string[];
   supportedPaintTypes?: DesignPaintType[];
+  shaderContext?: ShaderEditorContext;
   maxGradientStops?: number;
   showReverseStops?: boolean;
-  glslShaderContext?: GlslShaderPanelContext;
   labels?: Partial<DesignColorPickerLabels>;
   allowDesignHistoryHotkeys?: boolean;
   onDesignHistoryHotkey?: () => void;
@@ -343,8 +345,6 @@ export interface DesignColorPickerProps {
    * survives here. The Fill field reads it as written.
    */
   authoredValue?: string;
-  /** The Shader paint's name in the Fill field: the shader on the element. */
-  paintLabel?: string;
   /**
    * The color goes to something that reads only opaque sRGB, such as a shader
    * uniform: no opacity and no Display P3 or OKLCH, rather than a color the
@@ -449,9 +449,9 @@ export function DesignColorPicker({
   onGradientTypeChange,
   documentColors,
   supportedPaintTypes,
+  shaderContext,
   maxGradientStops,
   showReverseStops,
-  glslShaderContext,
   labels,
   allowDesignHistoryHotkeys = false,
   onDesignHistoryHotkey,
@@ -467,7 +467,6 @@ export function DesignColorPicker({
   anchorElement,
   restoreOnEscape = false,
   authoredValue,
-  paintLabel,
   opaqueSrgb = false,
 }: DesignColorPickerProps) {
   const t = useT();
@@ -585,12 +584,8 @@ export function DesignColorPicker({
     };
   }, []);
 
-  // The mounted Shader pane's way to take the shader off the element. The
-  // pane reads the screen's shaders, so a picker that never shows it does not.
-  const shaderPaneRef = useRef<ShaderPaneController | null>(null);
-
   const isPaintTypeSupported = (type: DesignPaintType) =>
-    (type !== "shader" || glslShaderContext !== undefined) &&
+    (type !== "shader" || shaderContext !== undefined) &&
     (!supportedPaintTypes || supportedPaintTypes.includes(type));
 
   const rawEffectivePaintType: DesignPaintType =
@@ -870,17 +865,26 @@ export function DesignColorPicker({
     if (disabled) return;
     if (!isPaintTypeSupported(nextType)) return;
 
-    // A shader is painted beside the fill's color, not instead of it, so
-    // leaving the Shader paint takes it off the element first.
-    const shaderPane = shaderPaneRef.current;
+    const activeNativeFill = selectedNativeInstances(
+      shaderContext?.content,
+      shaderContext?.nodeId,
+      "fill",
+      shaderContext?.selector,
+    ).instances[0];
     if (
       effectivePaintType === "shader" &&
       nextType !== "shader" &&
-      shaderPane?.hasShader()
+      activeNativeFill &&
+      shaderContext
     ) {
-      void shaderPane.remove().then((removed) => {
-        if (removed) applyPaintType(nextType);
-      });
+      void persistNativeShaderEdit(shaderContext, {
+        kind: "remove",
+        instanceId: activeNativeFill.id,
+      })
+        .then(() => applyPaintType(nextType))
+        .catch(() => {
+          toast.error(t("editPanel.shaders.saveFailed"));
+        });
       return;
     }
     applyPaintType(nextType);
@@ -891,7 +895,6 @@ export function DesignColorPicker({
       setLocalPaintType("shader");
       return;
     }
-
     if (onPaintTypeChange) {
       setLocalPaintType(nextType);
       if (onPaintTypeChange(nextType) !== false) return;
@@ -1627,13 +1630,19 @@ export function DesignColorPicker({
           />
         )}
 
-        {effectivePaintType === "shader" && glslShaderContext && (
-          <ShaderPane
-            context={glslShaderContext}
-            disabled={disabled}
-            controllerRef={shaderPaneRef}
+        {effectivePaintType === "shader" && shaderContext && (
+          <NativeShaderPanel
+            context={shaderContext}
+            placement="fill"
+            showCatalog={
+              selectedNativeInstances(
+                shaderContext.content,
+                shaderContext.nodeId,
+                "fill",
+                shaderContext.selector,
+              ).instances.length === 0
+            }
             renderColorPicker={renderNestedColorPicker}
-            onRemoved={() => applyPaintType("solid")}
           />
         )}
 
@@ -1665,7 +1674,7 @@ export function DesignColorPicker({
           : effectivePaintType === "shader"
             ? "shader"
             : "none",
-    paintName: fillPaintName(effectivePaintType, copy, paintLabel),
+    paintName: fillPaintName(effectivePaintType, copy),
     value,
     authored: authoredValue,
     token: fieldTokenName

package/corpus/templates/design/app/components/design/inspector/GradientEditor.tsx

@@ -120,6 +120,10 @@ export function gradientToCss(value: GradientValue): string {
 }
 
 function stopsBarCss(stops: GradientStopValue[]): string {
+  if (stops.length === 1) {
+    const color = normalizeColor(stops[0]!.color);
+    return `linear-gradient(90deg, ${color} 0%, ${color} 100%)`;
+  }
   const ordered = sortedStops(stops)
     .map((stop) => `${normalizeColor(stop.color)} ${round(stop.position)}%`)
     .join(", ");

package/corpus/templates/design/app/components/design/inspector/NativeShaderColorControls.tsx

@@ -138,7 +138,7 @@ export function NativeShaderColorControls({
     };
     return (
       <>
-        <div className={cn(FIELD, "gap-2 px-1.5")}>
+        <div className={cn(FIELD, "w-44 gap-2 px-1.5")}>
           <button
             type="button"
             aria-label={t("editPanel.colorPicker.editStopColor")}
@@ -221,7 +221,7 @@ export function NativeShaderColorControls({
             (a, b) => a.position - b.position,
           );
           const ids: string[] = [];
-          const updated = ordered.map((stop, index) => {
+          const updated = ordered.map((stop) => {
             ids.push(stop.id);
             const previous = originalColorsById.get(stop.id);
             if (previous && stop.color === nativeEffectColorToCss(previous)) {
@@ -261,11 +261,7 @@ export function NativeShaderColorControls({
     selectedStopIdState && stopIds.includes(selectedStopIdState)
       ? selectedStopIdState
       : (stopIds[0] ?? "palette-empty");
-  const gradientValue: GradientValue = {
-    kind: "linear",
-    angle: 0,
-    stops,
-  };
+  const gradientValue: GradientValue = { kind: "linear", angle: 0, stops };
 
   return (
     <GradientEditor